:root{
  --bg:#0b1020;
  --bg-soft:#10182d;
  --panel:#121b31;
  --panel-2:#0f172a;
  --line:rgba(255,255,255,.09);
  --text:#eef2ff;
  --muted:#9cadcf;
  --plus:#29c36a;
  --minus:#ff5f6d;
  --skip:#8ea0c9;
  --accent:#7c9cff;
  --shadow:0 20px 60px rgba(0,0,0,.28);
  --radius:24px;
  --footer-h:36px;
  --nav-h:74px;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(circle at top, #172549 0%, var(--bg) 44%);color:var(--text)}
a{color:#dce7ff;text-decoration:none}
a:hover{text-decoration:underline}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
textarea,input,select{background:#0a1326;color:var(--text);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
textarea{resize:vertical;min-height:104px}
.auth-body,.profile-public-body{min-height:100vh;display:flex;flex-direction:column}
.auth-shell,.public-shell{flex:1;display:grid;place-items:center;padding:32px 18px}
.auth-card,.public-card{width:min(100%,560px);background:rgba(10,18,38,.92);border:1px solid var(--line);border-radius:32px;padding:28px;box-shadow:var(--shadow);backdrop-filter:blur(12px)}
.auth-brand,.public-head,.topbar-brand{display:flex;gap:16px;align-items:center}
.brand-badge,.avatar-bubble{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;font-weight:800;letter-spacing:.04em;background:linear-gradient(135deg,#6ea8ff,#6d5cff);flex:0 0 auto;overflow:hidden}
.avatar-bubble.large{width:82px;height:82px;border-radius:26px;font-size:26px}
.brand-icon{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.24));flex:0 0 auto}
.brand-icon.mobile-brand-icon{width:52px;height:52px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid var(--line);padding:7px}
.brand-wordmark{display:block;height:42px;width:auto;max-width:100%}
.brand-wordmark.auth-wordmark{height:auto;max-width:min(100%,320px)}
.brand-wordmark.topbar-wordmark{height:34px}
.public-wordmark{height:auto;max-width:min(100%,260px)}
.footer-logo{width:16px;height:16px;object-fit:contain;opacity:.92;vertical-align:-3px;margin-right:8px}
.public-brand-row{margin-bottom:18px}
.mobile-brand-profile{display:flex;align-items:center;gap:10px;min-width:0}
.auth-form{display:grid;gap:14px;margin-top:18px}
.auth-form label{display:grid;gap:8px}
.auth-form span{font-size:14px;color:var(--muted)}
.auth-error{background:rgba(255,95,109,.12);border:1px solid rgba(255,95,109,.35);color:#ffd4d8;padding:12px 14px;border-radius:16px}
.primary-btn,.vote-btn{border:0;border-radius:18px;padding:14px 18px;font-weight:700;transition:transform .12s ease,opacity .12s ease,filter .12s ease}
.primary-btn{background:linear-gradient(135deg,#7c9cff,#7b65ff);color:#fff;box-shadow:0 10px 24px rgba(124,156,255,.32)}
.primary-btn:hover,.ghost-btn:hover,.vote-btn:hover{transform:translateY(-1px);filter:brightness(1.04);text-decoration:none}
.ghost-btn{border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);border-radius:16px;padding:11px 14px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.auth-links,.inline-actions,.sub-actions,.topbar-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.auth-links{margin-top:14px}
.auth-footer,.page-footer{padding:12px 18px;color:var(--muted);text-align:center;font-size:12px;display:flex;align-items:center;justify-content:center;gap:0}
.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;gap:14px;align-items:center;padding:16px 20px;background:rgba(7,11,23,.84);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topbar small,.muted,.eyebrow,.hint-line,.public-meta{color:var(--muted)}
.topbar-brand>div{display:grid;gap:4px}
.topbar-brand-wordmark-only{gap:0}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.desktop-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(340px,.9fr);gap:20px;padding:20px;align-items:start}
.panel,.main-card,.swipe-card{background:rgba(11,18,36,.94);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.panel{padding:18px}
.main-card,.swipe-card{padding:22px;position:relative;overflow:hidden;transition:transform .28s cubic-bezier(.22,.61,.36,1),opacity .28s ease,box-shadow .18s ease;will-change:transform,opacity}
.panel-head,.main-card-head,.section-head,.mobile-topline,.card-topline{display:flex;align-items:center;justify-content:space-between;gap:12px}
.panel-head h2,.main-card h1,.swipe-card h1,.public-card h1{margin:0}
.stack-list{display:grid;gap:12px}
.announcement-card,.leader-row,.feed-item{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:18px;padding:14px}
.announcement-card p,.feed-item div,.public-bio{margin:8px 0 0}
.announcement-card.pinned{border-color:rgba(124,156,255,.4);background:rgba(124,156,255,.08)}
.pin-badge,.card-meta-pill{padding:7px 10px;border-radius:999px;border:1px solid var(--line);color:#dfe6ff;background:rgba(255,255,255,.04);font-size:12px}
.pair-block h1{font-size:clamp(30px,4vw,48px);line-height:1.06}
.pair-sep{color:#7b88ad}
.example-list{display:grid;gap:12px;margin-top:14px}
.examples-title{display:inline-block;margin-top:8px}
.example-list.large{margin-top:18px}
.example-quote{margin:0;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:18px;padding:16px 18px;line-height:1.55;font-size:16px}
.action-row,.mobile-actions{display:grid;gap:12px}
.action-row{grid-template-columns:repeat(3,1fr);margin-top:18px}
.vote-btn.plus{background:linear-gradient(135deg,rgba(41,195,106,.24),rgba(41,195,106,.1));border:1px solid rgba(41,195,106,.42);color:#ddffea}
.vote-btn.minus{background:linear-gradient(135deg,rgba(255,95,109,.24),rgba(255,95,109,.08));border:1px solid rgba(255,95,109,.4);color:#ffe0e4}
.vote-btn.skip{background:linear-gradient(135deg,rgba(142,160,201,.23),rgba(142,160,201,.08));border:1px solid rgba(142,160,201,.38);color:#e5ecff}
.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.stats-grid.compact div,.stats-grid>div{background:rgba(255,255,255,.03);border:1px solid var(--line);padding:14px;border-radius:18px;display:grid;gap:6px}
.stats-grid span{color:var(--muted);font-size:13px}
.stats-grid strong{font-size:22px}
.status-wrap{display:grid;gap:10px}
.status-chip{display:inline-flex;align-items:center;gap:8px;width:max-content;padding:9px 12px;border-radius:999px;border:1px solid transparent;font-weight:700}
.status-novice{background:rgba(91,149,255,.12);color:#bdd7ff;border-color:rgba(91,149,255,.35)}
.status-labeler{background:rgba(46,194,108,.12);color:#c6ffdb;border-color:rgba(46,194,108,.35)}
.status-tracker{background:rgba(175,105,255,.14);color:#ead7ff;border-color:rgba(175,105,255,.36)}
.status-master{background:rgba(255,188,59,.14);color:#ffe4af;border-color:rgba(255,188,59,.36)}
.status-archivist{background:rgba(255,88,167,.14);color:#ffd6ea;border-color:rgba(255,88,167,.35)}
.status-legend{background:rgba(255,209,71,.18);color:#fff2bb;border-color:rgba(255,209,71,.42)}
.status-titan{background:linear-gradient(135deg,rgba(96,188,255,.18),rgba(255,109,184,.2),rgba(255,211,84,.18));color:#fff;border-color:rgba(255,255,255,.28)}
.status-atlas{background:linear-gradient(135deg,rgba(83,224,196,.18),rgba(91,149,255,.18),rgba(255,211,84,.16));color:#effffb;border-color:rgba(147,255,229,.3)}
.status-demiurge{background:linear-gradient(135deg,rgba(255,120,214,.22),rgba(131,111,255,.24),rgba(91,241,255,.2));color:#fff7ff;border-color:rgba(255,255,255,.34);box-shadow:0 0 24px rgba(146,120,255,.18) inset}
.status-subtitle{color:var(--muted)}
.progress-track{height:12px;background:rgba(255,255,255,.06);border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.progress-track span{display:block;height:100%;background:linear-gradient(90deg,#76a2ff,#7b65ff);width:0%;transition:width .24s ease}
.leader-row{display:grid;gap:10px}
.leader-main{display:flex;gap:12px;align-items:center;justify-content:space-between}
.leader-main>div{flex:1;min-width:0}
.leader-rank{font-size:20px;min-width:42px;text-align:center}
.leader-identity{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.leader-copy{min-width:0;display:grid;gap:6px}
.leader-copy a strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avatar-bubble.tiny{width:42px;height:42px;border-radius:14px;flex:0 0 auto;font-size:14px}
.leader-metric{min-width:48px;text-align:right}
.leader-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.leader-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#72a0ff,#8d6bff)}
.leader-row.top{border-color:rgba(255,211,84,.35);background:linear-gradient(180deg,rgba(255,211,84,.09),rgba(255,255,255,.03))}
.checkbox-line{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px}
.checkbox-line input{width:18px;height:18px}
.profile-edit,.stack-form{display:grid;gap:12px}
.online-wrap{display:flex;gap:10px;flex-wrap:wrap}
.avatar-pill{padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--line);font-size:14px}
.help-list{display:grid;gap:10px;padding-left:20px;line-height:1.55}
.modal{position:fixed;inset:0;background:rgba(5,8,15,.66);backdrop-filter:blur(10px);display:grid;place-items:center;padding:18px;z-index:70}
.modal.hidden{display:none}
.modal-card{width:min(100%,520px);background:#111a2f;border:1px solid var(--line);border-radius:28px;padding:24px;box-shadow:var(--shadow)}
.modal-card.success{background:linear-gradient(180deg,#172341,#101729)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;padding:12px 16px;border-radius:999px;background:#111a2f;border:1px solid var(--line);box-shadow:var(--shadow);transition:.18s ease;z-index:80}
.toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}
.empty-state{padding:14px;border:1px dashed var(--line);border-radius:16px;color:var(--muted)}
.full-width{width:100%}
@media (max-width:960px){
  .desktop-layout{grid-template-columns:1fr}
  .action-row{grid-template-columns:1fr}
  .topbar{flex-wrap:wrap}
}

.profile-mini-head,.profile-head-row,.avatar-settings-row{display:flex;align-items:center;gap:12px}
.profile-head-split{align-items:flex-start}
.wrap-end{justify-content:flex-end}
.compact-gap{gap:8px}
.socket-state{min-width:108px;justify-content:center}
.socket-online{border-color:rgba(41,195,106,.42);background:rgba(41,195,106,.12);color:#d7ffe7}
.socket-offline{border-color:rgba(255,95,109,.36);background:rgba(255,95,109,.12);color:#ffd6db}
.socket-sync{border-color:rgba(124,156,255,.35);background:rgba(124,156,255,.12);color:#dce7ff}
.mobile-head-actions{display:flex;align-items:center;gap:8px}
.compact-btn{min-width:44px;padding:10px 12px}
.avatar-image{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:inherit;display:block}
.profile-bio-card{display:grid;gap:8px;background:rgba(255,255,255,.03);border:1px solid var(--line);padding:14px;border-radius:18px}
.profile-bio-view{margin:0;color:var(--text);line-height:1.5}
.hidden-file{display:none}
.settings-grid{display:grid;gap:14px}
.compact-form textarea,.compact-form input{min-height:unset}
.avatar-settings-row{justify-content:space-between;align-items:center}
@media (max-width:640px){.avatar-settings-row{flex-direction:column;align-items:flex-start}}

.swipe-card.dragging,.main-card.dragging{transition:none!important}
.vote-fly-plus,.vote-fly-minus,.vote-fly-skip{pointer-events:none}
.mobile-profile-head{align-items:flex-start}
.stack-mobile-actions{display:grid;gap:10px}
.clamp-name{max-width:104px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.compact-topline{gap:8px;align-items:flex-start}
.compact-head{min-width:0;align-items:flex-start}
.profile-mini-copy{min-width:0;display:grid;gap:6px}
.tight-actions{gap:6px;flex-wrap:wrap;justify-content:flex-end}
.mobile-example-scroll{flex:1;min-height:0;overflow:auto;padding-right:2px}
.sticky-mobile-actions{padding-top:12px;margin-top:auto;background:linear-gradient(180deg,rgba(11,18,36,0),rgba(11,18,36,.94) 26%)}
.roomy-scroll{padding-bottom:28px}
@media (max-width:760px){
  .topbar-actions{justify-content:flex-end}
  .profile-head-split{flex-direction:column}
  .wrap-end{justify-content:flex-start}
}

@media (max-width:640px){.brand-wordmark.topbar-wordmark{height:28px}.brand-icon{width:48px;height:48px}.public-wordmark{max-width:220px}}

.admin-user-card{display:grid;gap:10px;background:rgba(255,255,255,.03);border:1px solid var(--line);padding:14px;border-radius:18px}
.admin-user-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.admin-user-actions{display:flex;gap:8px;flex-wrap:wrap}
.admin-role-badge{padding:6px 10px;border-radius:999px;border:1px solid var(--line);font-size:12px;color:#dfe6ff;background:rgba(255,255,255,.04)}