:root { --ink:#f4efe6; --bg:#121110; --brick:#8f2f1f; --gold:#f5c400; --green:#3ddc84; --muted:#a49d92; }
body { background: var(--bg); color: var(--ink); font-family: "Space Grotesk", system-ui, sans-serif; margin: 0;
  background-image: repeating-linear-gradient(0deg, transparent 0 28px, rgba(255,255,255,.025) 28px 30px),
  repeating-linear-gradient(90deg, transparent 0 58px, rgba(255,255,255,.02) 58px 60px); }
.hood { max-width: 1040px; margin: 0 auto; padding: 16px; }
.brand { font-family: Anton, Impact, sans-serif; letter-spacing: .02em; text-transform: uppercase; line-height: .9; }
.top { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 0 16px; border-bottom:3px solid var(--gold); margin-bottom:16px; flex-wrap:wrap; }
.top .brand { font-size: 40px; color: var(--gold); transform: rotate(-2deg); text-shadow: 3px 3px 0 var(--brick); }
.who { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.dot { width:10px; height:10px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(61,220,132,.25); display:inline-block; flex:none; animation:pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow:0 0 0 6px rgba(61,220,132,.05); } }
.hbtn { background:var(--gold); color:#111; border:0; font-weight:700; padding:10px 16px; border-radius:4px; cursor:pointer; font-family:inherit; text-transform:uppercase; letter-spacing:.04em; }
.hbtn:hover { filter:brightness(1.08); }
.hbtn.ghost { background:transparent; color:var(--ink); border:2px solid #3a3632; }
.hbtn:disabled { opacity:.5; cursor:wait; }
.layout { display:grid; gap:16px; }
@media (min-width: 820px) { .layout { grid-template-columns: 1fr 280px; align-items:start; } .side { position:sticky; top:16px; } }
.panel { background:#1c1a18; border:2px solid #2d2a26; border-radius:6px; padding:16px; }
.panel h2 { font-family:Anton, sans-serif; text-transform:uppercase; font-weight:400; margin:0 0 12px; font-size:22px; letter-spacing:.03em; }
.tag { color:var(--gold); }
.hin, .hta { width:100%; box-sizing:border-box; background:#0e0d0c; color:var(--ink); border:2px solid #3a3632; border-radius:4px; padding:10px 12px; font:inherit; }
.hin:focus, .hta:focus { outline:2px solid var(--gold); border-color:var(--gold); }
.hta { min-height:70px; resize:vertical; }
.post { background:#1c1a18; border:2px solid #2d2a26; border-radius:6px; overflow:hidden; }
.post img { width:100%; max-height:560px; object-fit:cover; display:block; background:#000; }
.post-head { display:flex; align-items:center; gap:10px; padding:12px 14px; }
.avatar { width:36px; height:36px; border-radius:50%; background:var(--brick); color:var(--gold); display:grid; place-items:center; font-family:Anton, sans-serif; font-size:18px; flex:none; position:relative; }
.avatar .dot { position:absolute; right:-2px; bottom:-2px; width:10px; height:10px; border:2px solid #1c1a18; }
.post-body { padding:12px 14px; white-space:pre-wrap; word-break:break-word; }
.meta { color:var(--muted); font-size:13px; }
.feed { display:grid; gap:16px; }
.online-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.online-list li { display:flex; align-items:center; gap:10px; }
.hero { min-height:100vh; display:grid; place-items:center; padding:16px; background:radial-gradient(circle at 20% 10%, rgba(245,196,0,.18), transparent 40%), radial-gradient(circle at 80% 90%, rgba(143,47,31,.45), transparent 50%), var(--bg); }
.gate { width:100%; max-width:400px; }
.gate .brand { font-size:72px; color:var(--gold); text-shadow:4px 4px 0 var(--brick); transform:rotate(-3deg); margin:0 0 6px; }
.tabs { display:flex; gap:8px; margin-bottom:12px; }
.err { background:#3a1410; border:1px solid var(--brick); color:#ffb4a6; padding:10px; border-radius:4px; }
.linkbtn { background:none; border:0; color:var(--muted); cursor:pointer; font:inherit; text-decoration:underline; }
.preview-img { max-height:220px; width:100%; object-fit:cover; border-radius:4px; }