:root{
  --bg:#0b1622; --panel:#12233a; --ink:#e7f0f7; --muted:#8fb0c9;
  --accent:#25c2f0; --accent2:#1d94f7; --good:#43d17a; --bad:#ff6b6b; --gm:#ffd166;
  --line:#20456b;
}
*{box-sizing:border-box}
/* Always reserve the scrollbar gutter. Chrome on Windows uses classic scrollbars that take
   width out of the viewport, so a page that scrolls (Commands) centred ~8px left of one that
   doesn't (Account) and the two looked misaligned. Firefox uses overlay scrollbars, which is
   why it never showed the shift. Reserving the gutter on every page makes centring identical
   whether or not the content scrolls; browsers without support just behave as before.
   color-scheme keeps the scrollbar and form controls dark rather than light-grey on the
   dark theme -- which matters more now that the gutter is always there. */
html{scrollbar-gutter:stable;color-scheme:dark}
/* The glow is a fixed 1200x600 ellipse anchored to the top. Left scrolling with the document it
   only covers the first 600px, so short pages (Account) sat inside it and looked blue while tall
   ones (Commands, Section ID) fell through to flat --bg and looked black -- the card is the same
   colour on every page, it was the backdrop behind it that changed. Fixing the attachment to the
   viewport makes every page read identically no matter how long it is. */
body{margin:0;min-height:100vh;display:flex;align-items:flex-start;justify-content:center;
  background:radial-gradient(1200px 600px at 50% -10%,#163049,#0b1622 60%) fixed;
  background-color:var(--bg);
  color:var(--ink);font:15px/1.5 "Segoe UI",system-ui,sans-serif;padding:40px 16px}
.card{width:100%;max-width:820px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:28px 26px;box-shadow:0 12px 40px rgba(0,0,0,.45)}
/* The card is wide (consistent frame + one-line nav), but page content flows in a centered column so
   simple/form pages stay tidy. Content-heavy pages opt into full width with the `wide` modifier. */
.inner{max-width:520px;margin:0 auto}
.inner.wide{max-width:none}
.brand{letter-spacing:.35em;font-weight:700;font-size:12px;color:var(--accent);text-align:center}
h1{margin:.2em 0 .5em;font-size:1.5rem;text-align:center}
h2{margin:1.4em 0 .5em;font-size:1.05rem;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:.3em}
/* Form controls don't inherit font-family from body -- browsers give them their own UI font,
   which rendered every input and <button> in Arial while the rest of the page was Segoe UI.
   Most visible on the dashboard, where the <button> "Change password" sat next to the
   <a class=btn> "My characters" in a different typeface. Size and weight stay with the
   individual rules below; only the family is inherited. */
input,button,select,textarea{font-family:inherit}
label{display:block;margin:.6em 0 .1em;color:var(--muted);font-size:.85rem}
/* 1rem (16px) rather than the body's 15px on purpose: iOS Safari zooms the page when a field
   smaller than 16px takes focus. Don't 'tidy' this to match the body size. */
input{width:100%;padding:10px 12px;margin-top:4px;background:#0c1a2b;border:1px solid var(--line);
  border-radius:8px;color:var(--ink);font-size:1rem}
input:focus{outline:none;border-color:var(--accent)}
button{margin-top:16px;width:100%;padding:11px;border:0;border-radius:8px;cursor:pointer;
  background:linear-gradient(180deg,var(--accent),var(--accent2));color:#04121f;font-weight:700;font-size:1rem}
button:hover{filter:brightness(1.08)}
.btn-alt{display:block;text-align:center;margin-top:8px;padding:11px;border-radius:8px;
  background:#5865F2;color:#fff;font-weight:700;text-decoration:none}
.btn-alt:hover{filter:brightness(1.08)}
/* Inline primary button, for anchors styled as buttons (change password, download, …) */
.btn{display:inline-block;padding:7px 14px;border-radius:8px;text-decoration:none;
  background:linear-gradient(180deg,var(--accent),var(--accent2));color:#04121f;
  font-weight:700;font-size:.85rem;line-height:1.2}
.btn:hover{filter:brightness(1.08)}
.linkbtn{width:auto;margin:0 0 0 .4em;padding:0;background:none;border:0;color:var(--accent);
  font-weight:400;font-size:.85rem;cursor:pointer;text-decoration:underline}
a{color:var(--accent)}
.alt,.foot,.muted{color:var(--muted);font-size:.85rem}
.small{font-size:.78rem}
.foot{margin-top:22px;text-align:center;font-size:.72rem;opacity:.7}
.nav{font-size:.82rem;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:.6em;
  text-align:center}
.err{background:rgba(255,107,107,.12);border:1px solid var(--bad);color:#ffd0d0;padding:9px 12px;border-radius:8px}
.ok{background:rgba(67,209,122,.12);border:1px solid var(--good);color:#c7f6da;padding:9px 12px;border-radius:8px}
.warn{background:rgba(255,209,102,.12);border:1px solid var(--gm);color:#ffe9b3;padding:9px 12px;border-radius:8px}
table.info{width:100%;border-collapse:collapse}
table.info th{text-align:left;color:var(--muted);font-weight:600;padding:7px 10px 7px 0;white-space:nowrap;vertical-align:top}
table.info td{padding:7px 0;border-bottom:1px solid rgba(32,69,107,.5)}
.good{color:var(--good)} .bad{color:var(--bad)} .gm{color:var(--gm);font-weight:700}
.up{color:var(--good);font-weight:600} .down{color:var(--bad);font-weight:600}
.chars{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.char{background:#0c1a2b;border:1px solid var(--line);border-radius:10px;padding:12px}
.char .slot{font-size:.7rem;letter-spacing:.15em;color:var(--accent);text-transform:uppercase}
.char .cname{font-size:1.1rem;font-weight:700;margin:.15em 0}
.char .cmeta{font-size:.82rem;color:var(--muted)}
/* announcements */
.news{display:flex;flex-direction:column;gap:10px;margin-bottom:8px}
.note{background:#0c1a2b;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;padding:10px 12px}
.note.pin{border-left-color:var(--gm)}
.note .nt{font-weight:700}
.note .nb{font-size:.9rem;margin:.2em 0;color:#d6e4f0}
.note .nd{font-size:.72rem;color:var(--muted)}
/* server status */
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat{background:#0c1a2b;border:1px solid var(--line);border-radius:10px;padding:12px}
.stat .k{font-size:.72rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.stat .v{font-size:1.25rem;font-weight:700;margin-top:.15em}
.svc .row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(32,69,107,.5)}
.svc small{color:var(--muted)}
@media(max-width:460px){.chars,.statgrid{grid-template-columns:1fr}}