:root {
  --bg:#070b14;
  --panel:#101827;
  --panel2:#131e31;
  --text:#f5f7fb;
  --muted:#9aa8bd;
  --line:#23304a;
  --gold:#f2c14e;
  --red:#ef5b5b;
  --green:#4fd18b;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(circle at top right, rgba(242,193,78,.08), transparent 26rem),
    var(--bg);
  color:var(--text);
}

.topbar, main, footer {
  width:min(1100px, calc(100% - 28px));
  margin:auto;
}

.topbar {
  padding:28px 0 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
}

.eyebrow {
  color:var(--gold);
  font-weight:800;
  letter-spacing:.16em;
  font-size:.75rem;
}

h1 { margin:.25rem 0 0; font-size:clamp(1.6rem,4vw,2.6rem); }
h2 { margin:.8rem 0 .4rem; font-size:clamp(1.4rem,4vw,2.3rem); }
h3 { margin-top:0; }

.lang { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.lang-btn {
  border:1px solid var(--line);
  background:#0c1321;
  color:var(--muted);
  border-radius:10px;
  padding:9px 11px;
  cursor:pointer;
  font-weight:700;
}
.lang-btn.active { background:var(--gold); color:#17130a; border-color:var(--gold); }

main { display:grid; gap:14px; padding-bottom:30px; }
.card {
  background:linear-gradient(180deg, rgba(19,30,49,.95), rgba(13,21,35,.97));
  border:1px solid var(--line);
  border-radius:18px;
  padding:20px;
  box-shadow:0 14px 45px rgba(0,0,0,.18);
}
.hero { padding:26px; }
.hero p, .compact p, .time-row p { color:var(--muted); line-height:1.55; }
.status-dot {
  width:10px;height:10px;border-radius:50%;
  display:inline-block;background:var(--green);
  box-shadow:0 0 14px rgba(79,209,139,.8);
  margin-right:8px;
}
.grid { display:grid; gap:14px; }
.grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }

.tag {
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background:#0b1220;
  border:1px solid var(--line);
  color:var(--gold);
  font-weight:900;
  margin-bottom:12px;
}
.alliance ul { padding-left:20px; color:var(--muted); line-height:1.7; }
.kor { border-top:3px solid var(--gold); }
.wlf { border-top:3px solid #8ca8ff; }

.section-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.pill {
  padding:6px 10px;
  border-radius:999px;
  color:#111;
  background:var(--gold);
  font-size:.8rem;
  font-weight:900;
}

.timeline { margin-top:12px; }
.time-row {
  display:grid;
  grid-template-columns:72px 1fr;
  gap:16px;
  padding:17px 0;
  border-top:1px solid var(--line);
}
.time { font-weight:900; color:var(--gold); font-size:1.05rem; }

.danger { border-color:rgba(239,91,91,.55); }
.doctrine blockquote {
  margin:0;
  padding:16px 18px;
  border-left:4px solid var(--gold);
  background:#0b1220;
  border-radius:0 12px 12px 0;
  line-height:1.65;
  font-size:1.08rem;
}

.commands { display:flex; flex-wrap:wrap; gap:9px; }
.commands span {
  padding:9px 12px;
  border:1px solid var(--line);
  background:#0b1220;
  border-radius:10px;
  font-weight:750;
  font-size:.9rem;
}

footer {
  padding:10px 0 30px;
  color:var(--muted);
  text-align:center;
}

@media (max-width:760px) {
  .topbar { align-items:flex-start; flex-direction:column; }
  .grid.two,.grid.three { grid-template-columns:1fr; }
  .card { padding:16px; }
  .time-row { grid-template-columns:58px 1fr; gap:10px; }
}