:root{
  --bg: #14100f;
  --bg-panel: #1e1815;
  --bg-panel-2: #241c18;
  --line: #3a2e26;
  --gold: #c9a227;
  --gold-bright: #e6c65c;
  --crimson: #7a1f2b;
  --crimson-bright: #a4293a;
  --text: #ece4d3;
  --text-dim: #a89a86;
  --text-faint: #6f6255;
  --ok: #6a9955;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(ellipse at top, rgba(122,31,43,0.12), transparent 55%),
    radial-gradient(ellipse at bottom, rgba(201,162,39,0.06), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.font-display{ font-family:'Cinzel', serif; letter-spacing:.02em; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--crimson); color:#fff; }

.ticker{
  background:#0c0a09; border-bottom:1px solid var(--line);
  font-size:12px; color:var(--text-dim); padding:6px 20px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}
.ticker .dot{ color:var(--ok); }
.ticker span b{ color:var(--gold-bright); font-weight:600; }

header{
  position:sticky; top:0; z-index:30;
  background:linear-gradient(180deg, rgba(20,16,15,0.97), rgba(20,16,15,0.9));
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1180px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family:'Cinzel',serif; font-weight:800; font-size:20px; letter-spacing:.06em;
  color:var(--gold-bright);
}
nav{ display:flex; gap:4px; flex-wrap:wrap; margin-left:auto;}
nav a{
  background:none; border:none; color:var(--text-dim);
  font-size:13px; letter-spacing:.03em; text-transform:uppercase;
  padding:8px 12px; border-radius:4px; transition:.15s; display:inline-block;
  border-bottom:2px solid transparent;
}
nav a:hover{ color:var(--gold-bright); }
nav a.active{ color:var(--gold-bright); border-bottom-color:var(--gold); }

.auth-area{ display:flex; align-items:center; gap:8px; }
.btn{
  padding:8px 16px; border-radius:3px; font-size:13px; font-weight:600;
  letter-spacing:.03em; border:1px solid var(--line); background:var(--bg-panel);
  color:var(--text); transition:.15s; display:inline-block;
}
.btn:hover{ border-color:var(--gold); color:var(--gold-bright); }
.btn-primary{
  background:linear-gradient(180deg, var(--crimson-bright), var(--crimson));
  border:1px solid #8f2735; color:#fff;
}
.btn-primary:hover{ filter:brightness(1.12); color:#fff; }
.btn-gold{
  background:linear-gradient(180deg, var(--gold-bright), var(--gold));
  border:1px solid #a8841c; color:#221a0c;
}
.btn-gold:hover{ filter:brightness(1.08); color:#221a0c;}
.user-pill{
  display:flex; align-items:center; gap:8px;
  background:var(--bg-panel); border:1px solid var(--line);
  padding:5px 12px 5px 6px; border-radius:20px; font-size:13px;
}
.user-pill .av{
  width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold-bright),var(--crimson));
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#1a1210;
}
.badge-admin{ font-size:9px; background:var(--crimson); color:#fff; padding:1px 6px; border-radius:8px; margin-left:4px; letter-spacing:.05em;}

.hero{ max-width:1180px; margin:0 auto; padding:56px 20px 40px; text-align:center; position:relative; }
.hero .eyebrow{ font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.hero h1{ font-size:clamp(28px,5vw,44px); margin:0 0 14px; color:var(--gold-bright); text-shadow:0 0 30px rgba(201,162,39,0.25); }
.hero p{ color:var(--text-dim); max-width:560px; margin:0 auto; font-size:15px; line-height:1.6;}
.rune-divider{ width:120px; height:1px; margin:26px auto 0; background:linear-gradient(90deg, transparent, var(--gold), transparent); position:relative; }
.rune-divider::before{ content:'✦'; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:var(--gold); font-size:12px; background:var(--bg); padding:0 8px; }

main{ max-width:1180px; margin:0 auto; padding:20px 20px 80px; }

.cat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:10px; }
.cat-card{
  background:linear-gradient(160deg, var(--bg-panel), var(--bg-panel-2));
  border:1px solid var(--line); border-radius:6px; padding:22px;
  position:relative; overflow:hidden; transition:.2s; text-align:left; display:block;
}
.cat-card:hover{ border-color:var(--gold); transform:translateY(-2px); }
.cat-card::after{
  content:''; position:absolute; top:-40px; right:-40px; width:110px; height:110px;
  border-radius:50%; background:radial-gradient(circle, rgba(201,162,39,0.14), transparent 70%);
}
.cat-icon{ font-size:26px; margin-bottom:10px; display:block; }
.cat-card h3{ margin:0 0 6px; font-size:17px; color:var(--gold-bright); }
.cat-card p.desc{ font-size:13px; color:var(--text-dim); margin:0 0 14px; line-height:1.5; min-height:36px;}
.cat-meta{ display:flex; justify-content:space-between; font-size:11px; color:var(--text-faint); border-top:1px solid var(--line); padding-top:10px;}
.cat-meta b{ color:var(--text-dim); }

.section-head{ display:flex; align-items:center; justify-content:space-between; margin:36px 0 16px; gap:12px; flex-wrap:wrap;}
.section-head h2{ font-size:15px; letter-spacing:.15em; text-transform:uppercase; color:var(--text-dim); margin:0; }
.section-head h2 b{ color:var(--gold-bright); }

.crumbs{ font-size:12px; color:var(--text-faint); margin-bottom:6px; }
.crumbs a{ color:var(--text-dim); font-size:12px; }
.crumbs a:hover{ color:var(--gold-bright); }

.topic-row{
  display:flex; align-items:center; gap:14px;
  background:var(--bg-panel); border:1px solid var(--line); border-radius:5px;
  padding:14px 16px; margin-bottom:8px; transition:.15s; cursor:pointer; text-decoration:none;
}
.topic-row:hover{ border-color:var(--gold); background:var(--bg-panel-2); }
.topic-tag{
  font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 8px; border-radius:3px; background:rgba(201,162,39,0.12); color:var(--gold-bright);
  border:1px solid rgba(201,162,39,0.3); white-space:nowrap;
}
.topic-main{ flex:1; min-width:0; }
.topic-main h4{ margin:0 0 4px; font-size:14.5px; color:var(--text); font-weight:600; }
.topic-main .sub{ font-size:11.5px; color:var(--text-faint); }
.topic-stats{ text-align:right; font-size:11px; color:var(--text-faint); white-space:nowrap; }
.topic-stats b{ display:block; color:var(--text-dim); font-size:13px; }
.empty-state{ text-align:center; padding:50px 20px; color:var(--text-faint); border:1px dashed var(--line); border-radius:6px; }

.topic-detail{ background:var(--bg-panel); border:1px solid var(--line); border-radius:6px; padding:28px; }
.topic-detail h1{ font-size:24px; color:var(--gold-bright); margin:0 0 8px; }
.topic-detail .meta-line{ font-size:12px; color:var(--text-faint); margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--line);}
.topic-detail .meta-line b{ color:var(--text-dim); }
.topic-body{ font-size:14.5px; line-height:1.8; color:#dcd3c2; }
.topic-body p{ margin:0 0 14px; }
.topic-body a{ color:var(--gold-bright); text-decoration:underline; }
.topic-body img{ max-width:100%; height:auto; border-radius:6px; margin:10px 0; display:block; }
.topic-body ul, .topic-body ol{ margin:0 0 14px; padding-left:22px; }
.topic-body h1, .topic-body h2, .topic-body h3, .topic-body h4{ color:var(--gold-bright); margin:20px 0 10px; }
.topic-body blockquote{ border-left:3px solid var(--gold-bright); margin:14px 0; padding:6px 0 6px 14px; color:var(--text-faint); }
.topic-body code{ background:rgba(255,255,255,0.08); padding:1px 5px; border-radius:4px; font-size:13px; }
.topic-body pre{ background:rgba(255,255,255,0.08); padding:12px; border-radius:6px; overflow-x:auto; }

.comments{ margin-top:30px; }
.comments h3{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); margin-bottom:14px;}
.comment{ display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); }
.comment .av{
  width:34px;height:34px;border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--gold-bright),var(--crimson));
  display:flex;align-items:center;justify-content:center; font-size:13px; font-weight:700; color:#1a1210;
}
.comment .who{ font-size:13px; font-weight:600; color:var(--text); }
.comment .when{ font-size:11px; color:var(--text-faint); margin-left:8px; font-weight:400;}
.comment p{ font-size:13.5px; color:var(--text-dim); margin:4px 0 0; line-height:1.6; white-space:pre-wrap;}

textarea, input[type=text], input[type=password], select{
  width:100%; background:#0f0c0b; border:1px solid var(--line); border-radius:4px;
  color:var(--text); padding:10px 12px; font-size:13.5px; font-family:inherit;
}
textarea:focus, input:focus, select:focus{ outline:none; border-color:var(--gold); }
label{ font-size:12px; color:var(--text-dim); display:block; margin:14px 0 6px; }
label:first-child{ margin-top:0; }

.comment-form{ margin-top:18px; display:flex; gap:10px; align-items:flex-start; }
.comment-form textarea{ min-height:60px; resize:vertical; }
.login-prompt{ text-align:center; padding:18px; color:var(--text-faint); font-size:13px; border:1px dashed var(--line); border-radius:6px; margin-top:18px; }
.login-prompt a{ color:var(--gold-bright); text-decoration:underline; }

.auth-page{ max-width:420px; margin:60px auto; background:var(--bg-panel); border:1px solid var(--line); border-radius:8px; padding:30px; }
.auth-page h2{ font-size:19px; color:var(--gold-bright); margin:0 0 4px; }
.auth-page .sub{ font-size:12.5px; color:var(--text-faint); margin-bottom:20px; }
.auth-page .switch{ margin-top:16px; font-size:12.5px; color:var(--text-faint); text-align:center; }
.auth-page .switch a{ color:var(--gold-bright); text-decoration:underline; }

.err{ background:rgba(122,31,43,0.2); border:1px solid var(--crimson); color:#e8a5ac; font-size:12.5px; padding:8px 12px; border-radius:4px; margin-top:14px;}
.ok-msg{ background:rgba(106,153,85,0.15); border:1px solid var(--ok); color:#b7d6a8; font-size:12.5px; padding:8px 12px; border-radius:4px; margin-top:14px;}

.new-topic-form{ background:var(--bg-panel); border:1px solid var(--line); border-radius:6px; padding:24px; margin-bottom:20px;}
.form-actions{ display:flex; gap:10px; margin-top:18px; justify-content:flex-end; }

footer{ border-top:1px solid var(--line); padding:26px 20px; text-align:center; font-size:11.5px; color:var(--text-faint); }
footer a{ color:var(--text-dim); }
footer a:hover{ color:var(--gold-bright); }

@media (max-width:640px){
  .header-inner{ gap:14px; }
  nav{ order:3; width:100%; justify-content:flex-start; }
}