.site-header .menu-btn {
    display: inline-flex; align-items: center; gap: 12px;
    font: inherit; font-size: 15px; letter-spacing: .2em; text-indent: .2em; color: var(--ink);
    background: var(--header-control-bg,rgba(28,20,46,.35)); border: 1px solid var(--line); border-radius: 999px;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    padding: 8px 18px 8px 20px; cursor: pointer;
    transition: border-color .25s, background .25s;
  }
  .site-header .menu-btn:hover, .site-header .menu-btn[aria-expanded="true"] { border-color: var(--accent); background: var(--header-control-hover,rgba(28,20,46,.55)); }
  .site-header .bars { position: relative; width: 18px; height: 12px; flex: none; display: block; overflow: visible; }
  .site-header .bars i { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 1px; background: currentColor; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
  .site-header .bars i:nth-child(1) { top: 1px; }
  .site-header .bars i:nth-child(2) { bottom: 1px; }
  .site-header .menu-btn[aria-expanded="true"] .bars i:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  .site-header .menu-btn[aria-expanded="true"] .bars i:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

  .site-header .menu-panel {
    position: absolute; top: calc(100% + 12px); right: 0; min-width: 232px;
    padding: 8px;
    background: rgba(28, 20, 46, .74); border: 1px solid var(--line); border-radius: 8px;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 18px 50px rgba(10, 6, 24, .45);
    opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.97); transform-origin: top right;
    transition: opacity .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .4s;
  }
  .site-header .menu-panel.open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .site-header .menu-panel a {
    display: block; padding: 11px 16px; border-radius: 5px;
    color: var(--ink-soft); text-decoration: none; font-size: 15px; letter-spacing: .14em;
    opacity: 0; transform: translateY(-6px);
    transition: opacity .35s ease, transform .4s cubic-bezier(.2, .8, .2, 1), background .2s, color .2s;
  }
  .site-header .menu-panel.open a { opacity: 1; transform: none; }
  .site-header .menu-panel.open a:nth-child(1) { transition-delay: .06s, .06s, 0s, 0s; }
  .site-header .menu-panel.open a:nth-child(2) { transition-delay: .10s, .10s, 0s, 0s; }
  .site-header .menu-panel.open a:nth-child(3) { transition-delay: .14s, .14s, 0s, 0s; }
  .site-header .menu-panel.open a:nth-child(4) { transition-delay: .18s, .18s, 0s, 0s; }
  .site-header .menu-panel.open a:nth-child(6) { transition-delay: .24s, .24s, 0s, 0s; }
  .site-header .menu-panel.open a:nth-child(7) { transition-delay: .28s, .28s, 0s, 0s; }
  .site-header .menu-panel a:hover, .site-header .menu-panel a:focus-visible { background: rgba(255, 176, 200, .16); color: var(--ink); outline: none; }
  .site-header .menu-panel hr { border: 0; border-top: 1px solid var(--line); margin: 6px 12px; }

/* Shared controls keep every header aligned with Community. */
.site-header .hright{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:nowrap}
.site-header .hright .menu-panel a{border-bottom:0}
.site-header .account-chip{display:inline-flex;align-items:center;gap:9px;max-width:200px;padding:4px 14px 4px 4px;border:1px solid var(--line);border-radius:999px;background:rgba(28,20,46,.35);color:var(--ink);font:inherit;cursor:pointer;transition:border-color .25s,background .25s}
.site-header .account-chip:hover{border-color:var(--accent);background:rgba(28,20,46,.55)}
.account-chip[hidden]{display:none!important}.account-avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(255,176,200,.15);overflow:hidden;flex:none}.account-avatar img{width:100%;height:100%;object-fit:cover}.account-name{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-overlay{position:fixed;inset:0;z-index:50;padding:20px;display:flex;align-items:center;justify-content:center;background:rgba(10,6,24,.62);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s linear .3s}
.account-overlay.open{opacity:1;visibility:visible;transition-delay:0s}.account-dialog{position:relative;width:min(440px,100%);max-height:100%;overflow:auto;padding:34px;border:1px solid var(--line);border-radius:12px;background:rgba(34,24,54,.96);color:var(--ink);box-shadow:0 30px 80px rgba(10,6,24,.55);text-align:center;transform:translateY(14px) scale(.96);transition:transform .4s cubic-bezier(.2,.8,.2,1)}.account-overlay.open .account-dialog{transform:none}
.account-dialog .account-avatar{width:104px;height:104px;margin:0 auto 18px;font-size:32px}.account-dialog h2{margin:0;font-size:24px}.account-dialog .ppronouns{margin:6px 0 16px;color:var(--ink-soft)}.account-dialog .pbio{white-space:pre-wrap;overflow-wrap:anywhere}.account-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}.account-actions a,.account-actions button,.account-close{font:inherit;color:var(--ink);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;padding:10px 18px;cursor:pointer;text-decoration:none;transition:background .2s,border-color .2s,transform .2s}.account-actions :is(a,button):hover,.account-close:hover{border-color:var(--accent);background:rgba(255,176,200,.12)}.account-actions :is(a,button):active{transform:scale(.96)}.account-close{position:absolute;right:12px;top:12px;padding:6px 12px}.account-error{color:var(--accent)}

/* Shared site design primitives. Page files only own their content layout. */
.site-header{position:fixed;top:0;left:0;right:0;z-index:10;padding:calc(env(safe-area-inset-top,0px) + 14px) clamp(18px,4vw,48px) 14px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(180deg,rgba(18,19,42,.6),transparent)}
.site-header .logo{font-size:20px;font-weight:700;letter-spacing:.3em;color:var(--ink);text-decoration:none;white-space:nowrap}
.site-header .hright{display:flex;align-items:center;justify-content:flex-end;gap:22px;min-width:0;flex:none;flex-wrap:nowrap}
.site-header .site-quicklinks{display:flex;align-items:center;gap:24px;position:static}
.site-header .site-quicklinks a{font-size:15px;letter-spacing:.12em;color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent;padding:10px 0;white-space:nowrap;transition:color .2s,border-color .2s}
.site-header .site-quicklinks a:hover,.site-header .site-quicklinks a[aria-current]{color:var(--ink);border-color:var(--accent)}
.site-header .site-menu{position:relative;display:block;flex:none}
.site-header .langbtn{font:inherit;font-size:14px;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:8px 15px;min-height:40px;background:rgba(28,20,46,.35);cursor:pointer;white-space:nowrap;transition:background .25s,border-color .25s}
.site-header .langbtn:hover{border-color:var(--accent)}
.site-header .site-auth-links{display:flex;align-items:center;gap:7px;border:1px solid var(--accent);border-radius:999px;padding:10px 18px;background:rgba(255,176,200,.08);white-space:nowrap}
.site-header .site-auth-links a{color:var(--ink);text-decoration:none;font-size:15px;letter-spacing:.08em;transition:color .2s}.site-header .site-auth-links a:hover{color:var(--accent)}
.site-header [hidden]{display:none!important}
.site-header .userchip{display:none;align-items:center;gap:9px;max-width:200px;font:inherit;color:var(--ink);cursor:pointer;background:rgba(28,20,46,.35);border:1px solid var(--line);border-radius:999px;padding:4px 14px 4px 4px;transition:border-color .25s}
.site-header .userchip.show{display:inline-flex}.site-header .userchip:hover{border-color:var(--accent)}.site-header .userchip span.n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.site-header .menu-panel{max-height:min(70dvh,600px);overflow-y:auto;overscroll-behavior:contain}.site-header .menu-panel a{border-bottom:0}.site-header .menu-panel a[hidden]{display:none}
/* Common controls, surfaces and motion apply to every page. */
:where(button,input,textarea,select){font:inherit}:where(button,a,input,textarea,select){touch-action:manipulation}
:where(a,button,input,textarea,select):focus-visible{outline:2px solid var(--accent);outline-offset:4px}
:where(.btnp,.btng,.submit,.fchip,.account-actions button,.account-actions a){transition:background .2s,border-color .2s,color .2s,transform .2s}
:where(.btnp,.btng,.submit,.fchip,.account-actions button,.account-actions a):active{transform:scale(.97)}

@media(max-width:1000px){.site-header .hright{gap:12px}.site-header .site-quicklinks{gap:14px}.site-header .account-name,.site-header .userchip span.n{display:none}.site-header .account-chip,.site-header .userchip{padding:4px}}
@media(prefers-reduced-motion:reduce){.site-header *,.account-overlay,.account-dialog,:where(.btnp,.btng,.submit,.fchip,.account-actions *){transition:none!important}}
.site-header .sk-root.sk-in-header{position:relative;top:auto;right:auto;bottom:auto;left:auto;z-index:auto;flex-shrink:0}

/* Chat's viewport grid needs the header to occupy its first row. */
body[data-page="community"] .site-header{position:relative}
.site-header .site-auth-links{color:var(--ink);text-decoration:none;font-size:15px;letter-spacing:.08em;transition:background .25s,border-color .25s,transform .2s}
.site-header .site-auth-links:hover{background:rgba(255,176,200,.16)}
.site-header .site-auth-links:active{transform:scale(.97)}
@media(max-width:760px){.site-header .site-auth-links{font-size:14px;letter-spacing:0}}

/* Give Chat's primary section switcher a little more room on desktop. */
@media(min-width:761px){body[data-page="community"] .tabs{min-height:58px}body[data-page="community"] .tab{min-height:48px;font-size:16px;padding:9px 22px}}

/* Compact mobile header: keep signed-in controls on the brand row. */
.site-account-controls{display:flex;align-items:center;gap:22px;min-width:0}
@media(max-width:1000px){.site-account-controls{gap:12px}}
.site-header :is(.account-chip,.userchip,.sk-chip,.langbtn,.menu-btn,.site-auth-links){height:44px;min-height:44px;box-sizing:border-box;line-height:1.5}
@media(max-width:760px){
 .site-header{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto 44px 44px;align-items:center;column-gap:6px;row-gap:2px;padding:calc(env(safe-area-inset-top,0px) + 10px) 10px 8px}
 .site-header .logo{grid-column:1;grid-row:1;min-width:0;font-size:16px;letter-spacing:.08em;overflow:hidden;text-overflow:ellipsis}
 .site-header .hright{display:contents}
 .site-header .site-account-controls{grid-column:2;grid-row:1;gap:6px;width:max-content;justify-self:end}
 .site-header .langbtn{grid-column:3;grid-row:1;width:44px;padding:4px;font-size:12px;letter-spacing:0}
 .site-header .site-menu{grid-column:4;grid-row:1;width:44px}
 .site-header .menu-btn{width:44px;padding:0;gap:0;justify-content:center;text-indent:0}
 .site-header .menu-btn>span:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .site-header .site-quicklinks{grid-column:1 / 3;grid-row:2;gap:16px;margin:0;width:max-content;justify-self:start}
 .site-header .site-quicklinks a{font-size:14px;letter-spacing:.04em;min-height:44px;display:flex;align-items:center;padding:4px 0}
 .site-header .site-auth-links{grid-column:2 / 5;grid-row:2;justify-self:end;padding:8px 10px;font-size:14px;letter-spacing:0}
 .site-header .account-chip,.site-header .userchip{width:36px;height:36px;min-height:36px;padding:2px;justify-content:center}
 .site-header .userchip .avwrap{--s:28px!important}.site-header .account-avatar{width:28px;height:28px}
 .site-header .account-name,.site-header .userchip span.n{display:none}
 .site-header .sk-root{flex:none}.site-header .sk-chip{gap:4px;padding:0 7px 0 4px;height:36px;min-height:36px}
 .site-header .langbtn,.site-header .menu-btn{height:36px;min-height:36px}
 .site-header .menu-panel{width:min(280px,calc(100vw - 20px));min-width:0}.site-header .menu-panel a{padding:11px 16px;font-size:15px;letter-spacing:.04em;min-height:44px}
}
@media(max-width:760px){.site-header .site-account-controls .userchip{height:36px;min-height:36px}}
@media(max-width:760px){.site-header .langbtn{padding:2px}}
/* Mobile destinations live exclusively in Menu. Desktop keeps direct links. */
.site-header .menu-panel .mobile-chat-link{display:none}
@media(max-width:760px){.site-header .site-quicklinks{display:none}.site-header .menu-panel .mobile-chat-link{display:block}}
/* Chat assigns avatar sizes inline; match the image and wrapper in the header. */
@media(max-width:760px){
 .site-header .site-account-controls .userchip{padding:0;gap:0}
 .site-header .userchip :is(.avwrap,.avatar){--s:28px!important}
 .site-header .userchip .dot{width:10px;height:10px;right:0;bottom:0}
}

/* Language is a full-width Menu row, shared across every route. */
.site-header .menu-language{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.site-header .menu-panel .langbtn{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;height:44px;min-height:44px;padding:10px 16px;margin:0;border:0;border-radius:10px;background:transparent;box-sizing:border-box;font-size:15px;line-height:1.5;letter-spacing:.04em;text-indent:0}
.site-header .menu-panel .langbtn::before{content:attr(data-language-label);color:var(--ink-soft)}
.site-header .menu-panel .langbtn:hover{background:rgba(255,176,200,.1)}
@media(max-width:760px){.site-header{grid-template-columns:minmax(0,1fr) auto 44px}.site-header .site-menu{grid-column:3}.site-header .site-auth-links{grid-column:2 / 4}}

@media(max-width:760px){
 body[data-page="community"] .site-header .menu-panel .mobile-chat-link{display:none}
}

/* Shared header transparency: reuse for any future header control. */
.site-header{--header-control-bg:rgba(28,20,46,.35);--header-control-hover:rgba(28,20,46,.55)}
/* Keep account, streak, bell and Menu spacing consistent on desktop. */
@media(min-width:761px){.site-header .hright,.site-header .site-account-controls{gap:12px;align-items:center}.site-header .site-notification-bell{margin:0;align-self:center}.site-header .site-notification-bell svg{display:block}}

/* Shared password visibility controls across login, signup and settings. */
.account-password-wrap{position:relative;width:100%}
.account-password-wrap input{padding-right:52px!important;width:100%}
.account-password-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;display:grid;place-items:center;padding:0;border:1px solid transparent;border-radius:50%;background:transparent;color:var(--ink-soft);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.account-password-toggle svg{width:20px;height:20px}
.account-password-toggle:hover,.account-password-toggle[aria-pressed=true]{color:var(--ink);background:rgba(255,176,200,.08);border-color:var(--line)}
.account-password-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}