:root {
  --bg: #0f1216;
  --panel: #141820;
  --panel-2: #1b2130;
  --text: #e8eaef;
  --muted: #9aa3b2;
  --primary: #e85cff;
  --danger: #ff6363;
  --border: #263042;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--text); font:16px/1.5 system-ui,Segoe UI,Roboto,Arial; }

.container { max-width: 1100px; margin: 0 auto; padding: 24px; }
.topbar { position:sticky; top:0; z-index:10; backdrop-filter: blur(8px);
  display:flex; justify-content:space-between; align-items:center; padding:14px 20px; border-bottom:1px solid var(--border); background:rgba(15,18,22,.7);}
.brand { font-weight:800; letter-spacing:.5px; }
.nav { display:flex; gap:10px; }

.btn { border:1px solid var(--border); background:var(--panel); color:var(--text); padding:10px 14px; border-radius:10px; cursor:pointer; box-shadow:var(--shadow); }
.btn:hover { filter:brightness(1.1); }
.btn.primary { background:linear-gradient(45deg, #ff5dba, var(--primary)); border:none; }
.btn.danger { background:var(--danger); border:none; }
.btn.ghost { background:transparent; }
.btn.wide { width:100%; }

.hint { color:var(--muted); font-size:.9rem; margin-top:6px; }
.muted { color:var(--muted); }
.badge { display:inline-block; background:var(--panel-2); padding:6px 10px; border-radius:999px; border:1px solid var(--border); margin-bottom:10px; }
.subtitle { color:var(--muted); margin-top:0; }

.hero h1 { font-size: 42px; margin: 6px 0 4px; }
.grid.meta { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:16px; }
.card { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); }
.link { color:#a1b8ff; text-decoration:none; }
.link:hover { text-decoration:underline; }

.comments { margin-top:24px; }
.comments-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.comment-form { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:14px; }
.comment-form textarea { width:100%; resize:vertical; border-radius:12px; border:1px solid var(--border); background:var(--panel-2); color:var(--text); padding:10px; }
.comment-list { list-style:none; padding:0; margin:16px 0; display:flex; flex-direction:column; gap:12px; }
.comment { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; }
.comment .meta { color:var(--muted); font-size:.85rem; margin-bottom:6px; display:flex; gap:8px; align-items:center; }
.comment .actions { margin-left:auto; display:flex; gap:8px; }
.comment .btn.sm { padding:6px 8px; border-radius:8px; font-size:.85rem; }

.footer { border-top:1px solid var(--border); margin-top:28px; padding:18px; text-align:center; color:var(--muted); }

dialog::backdrop { background: rgba(0,0,0,.6); }
dialog { border:none; border-radius:18px; background:var(--panel); color:var(--text); width:min(96vw, 420px); }
.auth { padding:18px; display:flex; flex-direction:column; gap:10px; }
.auth label { display:flex; flex-direction:column; gap:6px; }
.auth input { background:var(--panel-2); border:1px solid var(--border); border-radius:12px; color:var(--text); padding:10px; }
.row { display:flex; gap:8px; align-items:center; }
.row.end { justify-content:flex-end; }
.error { color:#ff9b9b; min-height:1.2em; }
.or { text-align:center; color:var(--muted); margin:4px 0; }