:root, [data-theme=dark] {
  --bg:#080a0e; --panel:rgba(17,20,28,.72); --card:rgba(21,25,34,.78); --card2:#1b2130; --solid:#141821;
  --line:#232938; --line2:#2f374a; --hover:#212839; --card-hover:rgba(26,31,43,.9);
  --text:#e9ecf3; --soft:#c3c9d8; --dim:#8a93a6; --faint:#5d6678;
  --accent:#e4431d; --accent2:#ff7a4d; --accent-soft:rgba(228,67,29,.14);
  --up:#ff6a3d; --down:#7c8cff; --green:#3ecf8e; --yellow:#f5b83d; --red:#ff5d5d;
  --glow1:rgba(228,67,29,.16); --glow2:rgba(92,107,255,.15); --shadow:0 10px 30px -12px rgba(0,0,0,.6);
  --radius:16px; color-scheme:dark;
}
[data-theme=light] {
  --bg:#f4f5f9; --panel:rgba(255,255,255,.8); --card:rgba(255,255,255,.88); --card2:#eef0f6; --solid:#ffffff;
  --line:#e2e5ee; --line2:#d3d8e4; --hover:#e9ecf4; --card-hover:#ffffff;
  --text:#161a24; --soft:#3b4254; --dim:#667087; --faint:#99a1b3;
  --accent:#e4431d; --accent2:#d1380f; --accent-soft:rgba(228,67,29,.1);
  --up:#e4431d; --down:#4f5fe0; --green:#12a56a; --yellow:#c98a0b; --red:#d93a3a;
  --glow1:rgba(228,67,29,.1); --glow2:rgba(92,107,255,.1); --shadow:0 10px 30px -14px rgba(30,40,80,.25);
  color-scheme:light;
}
* { box-sizing:border-box; }
html { scrollbar-color:var(--line2) transparent; }
body { margin:0; color:var(--text); font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased;
  background:radial-gradient(1000px 600px at 0% -10%, var(--glow1), transparent 60%), radial-gradient(900px 600px at 100% 110%, var(--glow2), transparent 60%), var(--bg);
  background-attachment:fixed; min-height:100vh; transition:background-color .25s; }
a { color:inherit; text-decoration:none; }
h1 { font-size:24px; margin:0; letter-spacing:-.02em; }
h3 { margin:20px 0 10px; font-size:15px; }
svg { flex:none; }
::selection { background:var(--accent); color:#fff; }

/* ---- controls ---- */
button, input, textarea, select { font:inherit; color:inherit; }
input, textarea, select { width:100%; background:var(--solid); border:1px solid var(--line2); border-radius:12px; padding:10px 14px; transition:border-color .15s, box-shadow .15s; }
input::placeholder, textarea::placeholder { color:var(--faint); }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
input[type=checkbox] { width:16px; height:16px; padding:0; accent-color:var(--accent); cursor:pointer; }
textarea { resize:vertical; min-height:90px; }
select { width:auto; }
button { cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; background:var(--card2);
  border:1px solid var(--line2); border-radius:12px; padding:8px 14px; font-weight:500; transition:background .15s, border-color .15s, transform .08s, box-shadow .2s; }
button:hover:not(:disabled) { background:var(--hover); border-color:var(--faint); }
button:active:not(:disabled) { transform:scale(.97); }
button:disabled { opacity:.45; cursor:default; }
button.primary { background:linear-gradient(135deg,#ff6a3d,#e4431d); border:0; color:#fff; font-weight:600; padding:9px 18px;
  box-shadow:0 8px 20px -8px rgba(228,67,29,.8), inset 0 1px 0 rgba(255,255,255,.25); }
button.primary:hover:not(:disabled) { background:linear-gradient(135deg,#ff7a4d,#ee4c24); box-shadow:0 10px 26px -8px rgba(228,67,29,.95), inset 0 1px 0 rgba(255,255,255,.3); }
button.block { width:100%; padding:11px; }
button.link { background:none; border:0; padding:4px 8px; color:var(--dim); font-size:13px; border-radius:8px; }
button.link:hover:not(:disabled) { background:var(--hover); color:var(--text); }
button.link.danger:hover { color:var(--red); }
button.link.active { color:var(--accent2); background:var(--accent-soft); }
.icon-btn { padding:8px; border-radius:50%; color:var(--dim); }
.err { color:var(--red); font-size:14px; }
.err:empty { display:none; }
.meta { color:var(--dim); font-size:13px; display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.avatar { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; color:#fff; font-weight:700; flex:none; box-shadow:0 0 0 2px var(--solid); }
.avatar.anon { background:linear-gradient(135deg,#4a5166,#2a3042); color:#c3c9d8; }
.anon-name { font-style:italic; }
.comm-icon { display:inline-flex; align-items:center; justify-content:center; border-radius:9px; font-weight:700; flex:none; }
.chip { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; padding:1px 7px; border-radius:999px; background:var(--accent-soft); color:var(--accent2); border:1px solid rgba(228,67,29,.28); }
.chip.pin { background:rgba(245,184,61,.12); color:var(--yellow); border-color:rgba(245,184,61,.3); }
.body { white-space:pre-wrap; word-break:break-word; }
.spacer { flex:1; }
.toggle { display:inline-flex; align-items:center; gap:6px; color:var(--dim); font-size:13px; cursor:pointer; padding:4px 8px; border-radius:8px; user-select:none; }
.toggle:hover { background:var(--hover); color:var(--text); }
.toggle:has(input:checked) { color:var(--accent2); background:var(--accent-soft); }

/* ---- motion ---- */
@keyframes rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes pop { 0% { transform:scale(1); } 40% { transform:scale(1.18); } 100% { transform:scale(1); } }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@keyframes slidein { from { opacity:0; transform:translateY(12px) scale(.96); } to { opacity:1; transform:none; } }
.page > * { animation:rise .38s cubic-bezier(.2,.7,.2,1) both; }
.page > *:nth-child(2) { animation-delay:.04s; } .page > *:nth-child(3) { animation-delay:.08s; }
.page > *:nth-child(4) { animation-delay:.12s; } .page > *:nth-child(5) { animation-delay:.16s; }
.page > *:nth-child(n+6) { animation-delay:.2s; }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }

/* ---- auth ---- */
.auth { display:grid; grid-template-columns:1.1fr 1fr; min-height:100vh; }
.auth-brand { position:relative; overflow:hidden; padding:56px; display:flex; flex-direction:column; justify-content:center; gap:28px; color:#e9ecf3;
  background:radial-gradient(900px 500px at 10% 0%, #6a2210 0%, transparent 60%), radial-gradient(700px 500px at 100% 100%, #1f2f80 0%, transparent 55%), #0d0f16; }
.auth-brand::after { content:""; position:absolute; width:420px; height:420px; right:-120px; bottom:-120px; border-radius:50%; border:1px solid rgba(255,255,255,.08); box-shadow:0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.015); }
.auth-brand h2 { font-size:44px; line-height:1.08; letter-spacing:-.035em; margin:0; max-width:480px; }
.auth-brand h2 span { background:linear-gradient(90deg,#ff8a55,#ff4d6d); -webkit-background-clip:text; background-clip:text; color:transparent; }
.auth-brand ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; color:#c3c9d8; position:relative; z-index:1; }
.auth-brand li { display:flex; gap:12px; align-items:center; }
.auth-brand li svg { color:#3ecf8e; }
.auth-form { display:flex; align-items:center; justify-content:center; padding:32px; }
.auth-card { width:100%; max-width:380px; display:flex; flex-direction:column; gap:14px; animation:rise .5s both; }
.auth-card h1 { font-size:28px; }
.auth-card label { font-size:13px; color:var(--dim); font-weight:500; margin-bottom:-6px; }
.auth-card .hint { color:var(--dim); font-size:13px; text-align:center; }
.auth-icon { width:58px; height:58px; border-radius:50%; background:var(--accent-soft); color:var(--accent2); display:grid; place-items:center; margin:0 auto; box-shadow:0 0 0 8px var(--accent-soft); }
.auth-card.center-text { text-align:center; }
.code-input { text-align:center; font-size:28px; letter-spacing:.5em; padding-left:.5em; font-weight:600; }
.row { display:flex; gap:10px; align-items:center; }
.row > * { flex:1; }
.logo { width:36px; height:36px; border-radius:11px; background:linear-gradient(135deg,#ff8a55,#e4431d 60%,#c2185b); display:grid; place-items:center; color:#fff; font-weight:800; font-size:18px; flex:none; box-shadow:0 6px 16px -6px rgba(228,67,29,.8); }
.logo-line { display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; }

/* ---- app shell ---- */
.topbar { position:sticky; top:0; z-index:20; height:60px; display:flex; align-items:center; gap:18px; padding:0 20px;
  background:color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter:blur(16px) saturate(1.4); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px; width:228px; flex:none; letter-spacing:-.01em; }
.search { flex:1; max-width:520px; position:relative; }
.search svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--dim); pointer-events:none; }
.search input { padding-left:40px; border-radius:999px; }
.top-right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.user-chip { display:flex; align-items:center; gap:8px; padding:4px 6px 4px 4px; border:1px solid var(--line2); border-radius:999px; background:var(--solid); font-size:14px; }
.user-chip button { padding:6px; border-radius:50%; border:0; background:transparent; color:var(--dim); }
.cols { display:grid; grid-template-columns:228px minmax(0,1fr) 310px; gap:26px; max-width:1280px; margin:0 auto; padding:22px 20px; align-items:start; }
.side, .aside { position:sticky; top:82px; display:flex; flex-direction:column; gap:4px; max-height:calc(100vh - 100px); overflow:auto; scrollbar-width:none; }
.side .label { font-size:11px; font-weight:600; letter-spacing:.08em; color:var(--faint); padding:14px 12px 6px; }
.nav-item { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:12px; color:var(--soft); font-weight:500; transition:background .15s, color .15s, transform .15s; }
.nav-item:hover { background:var(--hover); color:var(--text); transform:translateX(2px); }
.nav-item.active { background:linear-gradient(90deg,var(--accent-soft),transparent); color:var(--text); box-shadow:inset 3px 0 0 var(--accent); }
.nav-item .count { margin-left:auto; font-size:12px; color:var(--dim); }
main { min-width:0; }
.aside { gap:14px; }
.panel { background:var(--panel); backdrop-filter:blur(12px); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); }
.panel h4 { margin:0 0 12px; font-size:11px; letter-spacing:.09em; color:var(--dim); font-weight:600; text-transform:uppercase; display:flex; align-items:center; gap:6px; }
.panel .nav-item { padding:7px 6px; }
.panel p { margin:0 0 12px; color:var(--soft); font-size:14px; }
.foot { color:var(--faint); font-size:12px; padding:0 4px; margin-top:8px; }

/* ---- live widgets ---- */
.live { margin-left:auto; display:inline-flex; align-items:center; gap:5px; color:var(--green); font-size:10px; letter-spacing:.1em; }
.live::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--green); animation:pulse 1.6s infinite; }
.device { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.device > svg { padding:8px; width:38px; height:38px; border-radius:11px; background:var(--accent-soft); color:var(--accent2); }
.meter { margin-bottom:11px; }
.meter-top { display:flex; justify-content:space-between; font-size:12px; color:var(--dim); margin-bottom:5px; }
.meter-top b { color:var(--text); font-weight:600; }
.bar { height:6px; border-radius:99px; background:var(--card2); overflow:hidden; }
.bar i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--green),#7be3b3); transition:width .6s cubic-bezier(.2,.7,.2,1); }
.bar i.warm { background:linear-gradient(90deg,var(--yellow),#ffd98a); }
.bar i.hot { background:linear-gradient(90deg,var(--red),#ff9a8a); }
.kv { display:grid; grid-template-columns:1fr auto; gap:5px 12px; font-size:13px; color:var(--dim); margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.kv b { color:var(--text); }
.rank { display:flex; align-items:center; gap:10px; padding:6px 0; }
.rank .pos { width:18px; text-align:center; font-weight:700; color:var(--faint); font-size:13px; }
.rank:nth-child(2) .pos { color:var(--yellow); } .rank:nth-child(3) .pos { color:#b8c0cc; } .rank:nth-child(4) .pos { color:#cd8a5b; }
.rank .rname { flex:1; min-width:0; display:flex; align-items:center; gap:6px; font-size:14px; font-weight:500; overflow:hidden; white-space:nowrap; }
.rank .karma { color:var(--accent2); font-size:13px; }

/* ---- page header, tabs ---- */
.page-head { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.page-head .sub { color:var(--dim); font-size:14px; }
.seg { display:inline-flex; background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:3px; gap:2px; }
.seg button { border:0; background:transparent; color:var(--dim); padding:6px 14px; border-radius:10px; }
.seg button:hover:not(:disabled) { background:var(--hover); color:var(--text); }
.seg button.on { background:var(--solid); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.25); }
.toolbar { display:flex; align-items:center; gap:12px; margin:16px 0 12px; }

/* ---- cards & posts ---- */
.card { background:var(--card); backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin-bottom:12px; box-shadow:var(--shadow); }
.post { cursor:pointer; transition:border-color .2s, background .2s, transform .2s, box-shadow .2s; }
.post:hover { border-color:var(--line2); background:var(--card-hover); transform:translateY(-2px); box-shadow:0 16px 36px -16px rgba(0,0,0,.55), 0 0 0 1px rgba(228,67,29,.05); }
.post.pinned { border-color:rgba(245,184,61,.35); background:linear-gradient(180deg,rgba(245,184,61,.06),transparent 40%), var(--card); }
.post-meta { display:flex; align-items:center; gap:8px; color:var(--dim); font-size:13px; margin-bottom:6px; flex-wrap:wrap; }
.post-meta .comm { color:var(--text); font-weight:600; }
.post-meta .comm:hover { text-decoration:underline; }
.post .title { display:block; font-size:18px; font-weight:600; line-height:1.35; letter-spacing:-.01em; }
.post .snippet { color:var(--soft); opacity:.85; margin:6px 0 0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; }
.actions { display:flex; gap:8px; margin-top:14px; align-items:center; flex-wrap:wrap; }
.pill { display:inline-flex; align-items:center; gap:6px; background:var(--card2); border:1px solid var(--line2); border-radius:999px; padding:3px 6px; color:var(--dim); font-size:13px; font-weight:600; transition:background .2s, border-color .2s; }
a.pill { padding:5px 12px; }
a.pill:hover { background:var(--hover); color:var(--text); }
.pill button { border:0; background:transparent; padding:4px; border-radius:50%; color:var(--dim); }
.pill button:hover:not(:disabled) { background:rgba(255,255,255,.08); color:var(--text); }
.pill .score { min-width:18px; text-align:center; color:var(--text); }
.pill.up { background:rgba(255,106,61,.14); border-color:rgba(255,106,61,.45); animation:pop .3s; }
.pill.up .score, .pill.up .on-up { color:var(--up); }
.pill.down { background:rgba(124,140,255,.14); border-color:rgba(124,140,255,.45); animation:pop .3s; }
.pill.down .score, .pill.down .on-down { color:var(--down); }
.detail h1 { margin:6px 0 10px; font-size:26px; line-height:1.25; }
.empty { text-align:center; padding:56px 16px; color:var(--dim); }
.empty b { display:block; color:var(--text); font-size:17px; margin-bottom:4px; }

/* ---- polls ---- */
.poll { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.poll .opt { position:relative; overflow:hidden; justify-content:space-between; width:100%; padding:10px 14px; background:var(--solid); border-radius:12px; text-align:left; }
.poll .opt .fill { position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,rgba(124,140,255,.28),rgba(124,140,255,.12)); transition:width .6s cubic-bezier(.2,.7,.2,1); }
.poll .opt.mine { border-color:var(--down); }
.poll .opt.mine .fill { background:linear-gradient(90deg,rgba(255,106,61,.35),rgba(255,106,61,.12)); }
.poll .opt > * { position:relative; }
.poll .otext { display:flex; align-items:center; gap:8px; font-weight:500; }
.poll-builder { display:flex; flex-direction:column; gap:8px; padding:12px; border:1px dashed var(--line2); border-radius:12px; }
.poll-builder[hidden] { display:none; }
.poll-builder .link { align-self:flex-start; }

/* ---- composer ---- */
.composer { transition:border-color .2s, box-shadow .2s; }
.composer.open { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft), var(--shadow); }
.composer .head { display:flex; gap:12px; align-items:flex-start; }
.composer .fields { flex:1; display:flex; flex-direction:column; gap:10px; min-width:0; }
.composer .extra { display:none; flex-direction:column; gap:10px; }
.composer.open .extra { display:flex; }
.tools { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

/* ---- comments ---- */
.cbox { background:var(--card); border:1px solid var(--line2); border-radius:var(--radius); padding:10px; display:flex; flex-direction:column; gap:8px; transition:border-color .2s, box-shadow .2s; }
.cbox textarea { border:0; background:transparent; min-height:64px; padding:6px 8px; box-shadow:none !important; }
.cbox:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.comment { display:flex; gap:12px; padding:14px 2px; border-bottom:1px solid var(--line); }
.comment:last-child { border-bottom:0; }
.comment .c-main { flex:1; min-width:0; }
.comment .c-head { display:flex; align-items:center; gap:8px; color:var(--dim); font-size:13px; margin-bottom:2px; flex-wrap:wrap; }
.comment .c-head b { color:var(--text); }

/* ---- chat ---- */
.chat-wrap { background:var(--panel); backdrop-filter:blur(12px); border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-direction:column; height:calc(100vh - 230px); min-height:360px; overflow:hidden; box-shadow:var(--shadow); }
.msgs { flex:1; overflow-y:auto; padding:12px 18px; display:flex; flex-direction:column; }
.msg { display:flex; gap:12px; padding:6px 0; animation:rise .25s both; }
.msg.cont { padding:1px 0 1px 44px; }
.msg-body { min-width:0; }
.msg-head { display:flex; align-items:baseline; gap:8px; }
.msg-head b { font-weight:600; }
.time { color:var(--faint); font-size:12px; }
.divider { display:flex; align-items:center; gap:12px; margin:14px 0 8px; color:var(--dim); font-size:12px; font-weight:600; }
.divider::before, .divider::after { content:""; flex:1; height:1px; background:var(--line); }
.composer-bar { padding:12px; border-top:1px solid var(--line); }
.composer-bar .box { display:flex; align-items:center; gap:8px; background:var(--solid); border:1px solid var(--line2); border-radius:14px; padding:4px 4px 4px 14px; transition:border-color .2s, box-shadow .2s; }
.composer-bar .box:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.composer-bar input { border:0; background:transparent; padding:8px 0; box-shadow:none !important; }
.composer-bar button { padding:8px 12px; }

/* ---- misc ---- */
.form-narrow { max-width:460px; display:flex; flex-direction:column; gap:12px; }
#toasts { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; z-index:99; align-items:center; }
.toast { background:var(--solid); border:1px solid var(--line2); border-radius:12px; padding:10px 18px; box-shadow:0 14px 34px -10px rgba(0,0,0,.6); font-weight:500; animation:slidein .25s both; transition:opacity .35s, transform .35s; }
.toast.ok { border-color:rgba(62,207,142,.5); }
.toast.out { opacity:0; transform:translateY(8px); }

/* ---- responsive ---- */
@media (max-width:1100px) { .cols { grid-template-columns:228px minmax(0,1fr); } .aside { display:none; } }
@media (max-width:820px) {
  .auth { grid-template-columns:1fr; }
  .auth-brand { display:none; }
  .topbar { padding:0 12px; gap:10px; }
  .brand span:last-child, .top-right .hide-sm, .user-chip .uname { display:none; }
  .brand { width:auto; }
  .cols { grid-template-columns:minmax(0,1fr); padding:12px; gap:12px; }
  .side { position:static; flex-direction:row; overflow-x:auto; max-height:none; gap:6px; padding-bottom:4px; }
  .side .label, .side .nav-item .count { display:none; }
  .nav-item { white-space:nowrap; background:var(--panel); border:1px solid var(--line); padding:6px 12px; }
  .nav-item.active { box-shadow:none; border-color:var(--accent); }
  .chat-wrap { height:calc(100vh - 270px); }
  .detail h1 { font-size:22px; }
}