.symbols-hero .hero-inner{max-width:960px}
.symbol-builder-shell{
  position:sticky;top:0;z-index:900;padding:6px 16px;
  background:rgba(250,248,252,.94);
  border-bottom:1px solid rgba(233,223,234,.9);
  backdrop-filter:blur(14px)
}
.symbol-builder{
  width:min(100%,980px);margin:0 auto;padding:9px 12px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);box-shadow:var(--shadow-sm)
}
.builder-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:5px}
.builder-heading h2{font-size:1rem;line-height:1.2;margin:0}
.bio-count{
  flex:0 0 auto;padding:5px 9px;border-radius:999px;background:var(--brand-soft);
  color:var(--brand-dark);font-size:.8rem;font-weight:800
}
#bio-builder{
  width:100%;min-height:52px;max-height:88px;resize:vertical;
  padding:9px 11px;border:1.5px solid #d8c9da;border-radius:14px;background:#fff;
  color:var(--text);font-size:1rem;line-height:1.5
}
#bio-builder:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 4px rgba(189,42,203,.1)}
.builder-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.primary-button,.secondary-button,.copy-set{
  min-height:34px;border-radius:9px;padding:6px 11px;font-weight:800
}
.primary-button{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--brand);background:var(--brand);color:#fff}
.primary-button:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.secondary-button,.copy-set{border:1px solid var(--line);background:#fff;color:var(--text)}
.secondary-button:hover,.copy-set:hover{border-color:#d6bdd9;background:var(--surface-soft);color:var(--brand-dark)}
.privacy-note{margin:4px 0 0;color:var(--muted);font-size:.7rem}

.symbols-browser{padding:50px 0 18px}
.symbols-heading{margin-bottom:18px}
.symbol-toolbar{
  position:relative;margin-bottom:28px;padding:14px;border:1px solid var(--line);
  border-radius:16px;background:#fff;box-shadow:var(--shadow-sm)
}
.symbol-search-wrap{position:relative}
#symbol-search{
  width:100%;height:50px;padding:0 112px 0 14px;border:1px solid var(--line);
  border-radius:13px;background:#fff;color:var(--text)
}
#symbol-search:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 4px rgba(189,42,203,.1)}
.search-count{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:.78rem;font-weight:750
}
.symbol-filters{display:flex;gap:8px;overflow-x:auto;padding-top:12px;scrollbar-width:thin}
.symbol-filter{
  flex:0 0 auto;border:1px solid var(--line);border-radius:999px;background:#fff;
  padding:7px 11px;color:#5c5261;font-size:.84rem;font-weight:750
}
.symbol-filter:hover{border-color:#d7c3da;color:var(--brand-dark)}
.symbol-filter.is-active{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-dark)}

.symbol-group{margin:0 0 46px;scroll-margin-top:170px}
.symbol-group[hidden]{display:none}
.group-heading{
  display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:14px;
  padding-bottom:11px;border-bottom:1px solid var(--line)
}
.group-heading h2{font-size:clamp(1.35rem,3vw,1.8rem)}
.symbol-grid{
  display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px
}
.symbol-card{
  position:relative;min-width:0;border:1px solid var(--line);border-radius:14px;
  background:#fff;box-shadow:0 1px 3px rgba(42,24,47,.04);overflow:hidden;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease
}
.symbol-card:hover{transform:translateY(-2px);border-color:#d7bddb;box-shadow:var(--shadow-sm)}
.symbol-copy{
  width:100%;min-height:86px;padding:10px 28px 8px 8px;border:0;background:transparent;color:var(--text);
  display:grid;place-items:center;align-content:center;gap:4px
}
.symbol-glyph{
  display:block;max-width:100%;font-size:1.42rem;line-height:1.25;overflow-wrap:anywhere
}
.symbol-action{font-size:.68rem;color:var(--muted);font-weight:750}
.symbol-add{
  position:absolute;right:5px;top:5px;width:26px;height:26px;padding:0;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--brand-dark);
  font-size:1rem;font-weight:900;line-height:1
}
.symbol-add:hover{background:var(--brand-soft);border-color:#d9b8dd}
.symbol-card.is-hidden{display:none}
.symbol-card.is-lazy-hidden{display:none}
.symbol-scroll-loader{
  display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;margin:8px 0 34px;padding:10px 14px;
  color:var(--muted);font-size:.82rem;font-weight:750;text-align:center
}
.symbol-scroll-loader[hidden]{display:none}
.loader-dot{
  width:8px;height:8px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 0 rgba(198,42,216,.28);
  animation:symbolLoaderPulse 1.5s ease-out infinite
}
@keyframes symbolLoaderPulse{
  0%{box-shadow:0 0 0 0 rgba(198,42,216,.28)}
  70%{box-shadow:0 0 0 8px rgba(198,42,216,0)}
  100%{box-shadow:0 0 0 0 rgba(198,42,216,0)}
}

.empty-symbols{
  margin:20px 0 44px;padding:34px 20px;border:1px dashed #d7c5da;border-radius:16px;
  background:#fff;text-align:center
}
.empty-symbols h3{margin-top:0}.empty-symbols p{margin-bottom:0;color:var(--muted)}

.combo-section{padding:48px 0;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-lead{max-width:760px;color:var(--muted)}
.combo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:20px}
.combo-card{
  min-height:88px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-soft);
  color:var(--text);text-align:left
}
.combo-card:hover{border-color:#d6bada;background:var(--brand-soft)}
.combo-card span{display:block;font-size:1.05rem;font-weight:700;overflow-wrap:anywhere}
.combo-card small{display:block;margin-top:5px;color:var(--muted);font-weight:700}

.recent-section{padding:42px 0}
.recent-symbols{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.recent-symbol{
  min-width:48px;min-height:44px;border:1px solid var(--line);border-radius:11px;background:#fff;
  font-size:1.15rem
}
.recent-symbol:hover{background:var(--brand-soft);border-color:#d5b6d9}

.related-tool-card{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-top:34px;padding:20px;border:1px solid #e1c9e5;border-radius:16px;background:var(--brand-soft)
}
.related-tool-card h3{margin:0 0 6px}.related-tool-card p{margin:0}
.related-tool-card .eyebrow{margin-bottom:5px}

.copy-toast{
  position:fixed;left:50%;bottom:24px;z-index:2100;transform:translate(-50%,18px);
  padding:9px 14px;border-radius:999px;background:#211925;color:#fff;font-size:.86rem;font-weight:750;
  opacity:0;visibility:hidden;transition:.18s ease;box-shadow:var(--shadow-md)
}
.copy-toast.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0)}

.symbols-page .side-note p{margin:0 0 7px}
.symbols-page .faq-section{padding-top:56px}

@media (max-width:980px){
  .symbol-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (max-width:760px){
  .symbols-browser{padding-top:38px}
  .symbol-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .symbol-copy{min-height:78px}
  .combo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .related-tool-card{align-items:flex-start;flex-direction:column}
  .related-tool-card .primary-button{width:100%}
}
@media (max-width:520px){
  .symbol-builder-shell{padding:4px 8px}
  .symbol-builder{padding:7px 8px;border-radius:11px}
  .builder-heading{align-items:center;margin-bottom:4px}
  .builder-heading .eyebrow{display:none}
  .builder-heading h2{font-size:.88rem}
  #bio-builder{min-height:42px;max-height:64px;padding:7px 9px;font-size:.88rem}
  .builder-actions{display:flex;flex-wrap:nowrap;gap:5px;margin-top:5px;overflow-x:auto}
  .builder-actions .primary-button{width:auto}
  .builder-actions button{flex:0 0 auto;min-height:32px;padding:5px 8px;font-size:.74rem}
  .privacy-note{display:none}
  .symbol-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .symbol-glyph{font-size:1.28rem}
  #symbol-search{padding-right:92px}
  .search-count{right:9px;font-size:.7rem}
  .group-heading{align-items:flex-start}
  .copy-set{min-height:38px;padding:7px 10px;font-size:.8rem}
  .combo-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .symbol-card,.copy-toast{transition:none}
  .loader-dot{animation:none}
}