/* SPRE THEME — Locked Global Styles (v2)
   Include on every page:
   <link rel="stylesheet" href="/spre-assets/base.css">
*/
:root{
  --gold:#CDA75C;
  --bg:#0b0f14;
  --panel:#161b22;
  --line:#2f3b52;
  --text:#e6eef8;
  --muted:#9fb3c8;
}

html,body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}

/* Typography */
h1,h2,h3,h4{ color:var(--text); letter-spacing:.01em }
.small,.status{ color:var(--muted) }
a{ color:var(--text); text-decoration:none }

/* Emblem row — LOCKED */
.emblem-row{ display:flex; align-items:center; justify-content:center; gap:22px; margin:6px 0 8px; text-align:center; }
.emblem-row .rail{ display:flex; gap:12px; color:var(--gold) !important; font-size:2rem; white-space:nowrap; }
.emblem-row img{ width:130px; height:auto; display:block; }
@media (max-width:820px){ .emblem-row .rail{ font-size:1.4rem; gap:.6rem } .emblem-row{ gap:12px } .emblem-row img{ width:110px } }

/* Topbar + Home button — LOCKED */
.topbar{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; }
.btn-primary{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  background:var(--gold) !important;
  color:#000 !important;
  text-decoration:none;
  border:1px solid #1f2a39;
  box-shadow:0 0 0 2px rgba(205,167,92,.12);
}
.btn-primary:hover{ filter:brightness(1.06) }

/* Accents */
.spre-gold{ color:var(--gold) }
.pill-gold{
  background:var(--gold) !important; color:#000 !important;
  border:1px solid #1f2a39; border-radius:12px;
}

/* Containers */
.card, .panel, .tile, .box{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  color:var(--text);
}

/* Tables */
table{ width:100%; border-collapse:separate; border-spacing:0;
  background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:12px; overflow:hidden }
th,td{ border-bottom:1px solid var(--line); padding:10px 12px }
th{ text-align:left; color:var(--gold); background:#1a2230 }
tr:last-child td{ border-bottom:0 }

/* Inputs */
input,select,textarea{
  background:#0e151f; color:var(--text) !important;
  border:1px solid #1f2a39; border-radius:10px; padding:10px 12px;
}

/* Badges / status */
.badge{ display:inline-block; padding:6px 10px; border-radius:999px;
  border:1px solid var(--line); background:#121b28; color:var(--text) }
.badge.ok{ background:#10231a; border-color:#224e36; color:#b9f5c8 }
.badge.warn{ background:#2a1f0f; border-color:#5a3b16; color:#ffd7a1 }
.badge.err{ background:#2a1416; border-color:#5c2228; color:#ffb9c2 }

/* Generic buttons */
.btn,button,.button{
  background:#212a38; border:1px solid var(--line); color:#e6eef8;
  border-radius:10px; padding:8px 12px; cursor:pointer;
}
.btn:hover,button:hover,.button:hover{ background:#2a3547 }

/* Code blocks */
pre,code{ background:#111722; color:#d6e6ff; border:1px solid #263146; border-radius:8px; }
pre{ padding:12px; overflow:auto }

/* Layout helpers */
hr{ border:0; border-top:1px solid var(--line) }
.wrap,.container{ max-width:1200px; margin:0 auto; padding:0 16px 24px }
.grid{ display:grid; gap:16px }
.grid.cols-3{ grid-template-columns:repeat(3,1fr) }
@media (max-width:900px){ .grid.cols-3{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .grid.cols-3{ grid-template-columns:1fr } }