/* Shared look for the small public pages (Status, Stats, Mods, Appeal). */
:root{
  --asphalt:#17140F; --asphalt-2:#221D16; --asphalt-3:#2C261D;
  --rust:#C4622D; --rust-light:#E08347; --dust:#E8B04B; --moss:#8FA36F;
  --cream:#F2ECE0; --cream-dim:#C9C1AF; --cream-faint:#958D7C; --line:rgba(242,236,224,0.14);
  --bad:#E0614B;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background:var(--asphalt); color:var(--cream);
  font-family:'Karla',-apple-system,sans-serif; font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column;
}
a{ color:var(--dust); }
.plate, h1, h2{ font-family:'Bebas Neue','Karla',sans-serif; font-weight:400; letter-spacing:0.03em; }
.top{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:14px 20px; background:var(--asphalt-2); border-bottom:5px solid var(--rust); }
.top .plate{ font-size:26px; line-height:1; color:var(--cream); text-decoration:none; }
.top nav{ display:flex; gap:14px; flex-wrap:wrap; margin-left:auto; font-size:15px; }
.top nav a{ color:var(--cream-dim); text-decoration:none; }
.top nav a:hover, .top nav a[aria-current="page"]{ color:var(--cream); text-decoration:underline; text-underline-offset:4px; }
main{ width:100%; max-width:980px; margin:0 auto; padding:28px 16px 40px; flex:1; }
h1{ font-size:48px; line-height:1; margin:0 0 6px; }
h2{ font-size:30px; line-height:1.05; margin:32px 0 10px; }
.lead{ color:var(--cream-dim); margin:0 0 20px; max-width:62ch; }
.card{ background:var(--asphalt-2); border:1px solid var(--line); border-radius:10px; padding:16px 18px; }
.grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
.big{ font-family:'Bebas Neue','Karla',sans-serif; font-size:44px; line-height:1; }
.muted{ color:var(--cream-faint); font-size:14px; }
.dot{ display:inline-block; width:12px; height:12px; border-radius:50%; background:var(--cream-faint); margin-right:8px; vertical-align:middle; }
.dot.on{ background:var(--moss); box-shadow:0 0 0 4px rgba(143,163,111,0.2); }
.dot.off{ background:var(--bad); }
table{ width:100%; border-collapse:collapse; font-size:15px; }
th{ text-align:left; color:var(--cream-faint); font-weight:600; font-size:13px; padding:6px 8px; border-bottom:1px solid var(--line); }
td{ padding:7px 8px; border-bottom:1px solid var(--line); }
td.num{ text-align:right; font-variant-numeric:tabular-nums; }
.tag{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:0.1em; padding:2px 7px; border-radius:3px; background:var(--asphalt-3); color:var(--cream-dim); }
.tag.req{ background:var(--dust); color:var(--asphalt); }
.btn{ display:inline-block; border:0; border-radius:6px; padding:10px 16px; font:inherit; font-weight:700; cursor:pointer;
      background:var(--rust-light); color:#1b120b; text-decoration:none; }
.btn:hover{ background:var(--dust); }
.btn.ghost{ background:none; border:1px solid var(--line); color:var(--cream); }
code{ font-size:13px; background:var(--asphalt-3); padding:1px 5px; border-radius:4px; overflow-wrap:anywhere; }
label{ display:block; font-size:14px; font-weight:600; color:var(--cream-dim); margin:14px 0 6px; }
input, select, textarea{ width:100%; padding:10px 12px; font:inherit; color:var(--cream); background:var(--asphalt); border:1px solid var(--line); border-radius:6px; }
textarea{ min-height:140px; resize:vertical; }
input:focus, select:focus, textarea:focus, .btn:focus-visible{ outline:2px solid var(--rust-light); outline-offset:1px; }
.note{ padding:10px 12px; border-radius:6px; font-size:15px; margin-top:14px; }
.note.ok{ background:rgba(143,163,111,0.14); border:1px solid rgba(143,163,111,0.5); }
.note.err{ background:rgba(224,97,75,0.12); border:1px solid rgba(224,97,75,0.45); color:#F4B7AA; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
footer{ padding:18px 20px; color:var(--cream-faint); font-size:14px; border-top:1px solid var(--line); text-align:center; }
.heat{ display:grid; grid-template-columns:44px repeat(24, minmax(0,1fr)); gap:2px; font-size:11px; color:var(--cream-faint); }
.heat .cell{ aspect-ratio:1; border-radius:3px; background:var(--asphalt-3); }
.heat .lbl{ display:flex; align-items:center; }
.heat .hr{ text-align:center; }
.scroll-x{ overflow-x:auto; }
@media (max-width: 600px){ h1{ font-size:38px; } .heat{ grid-template-columns:34px repeat(24, minmax(9px,1fr)); min-width:300px; } }