/* XORISU DESIGN SYSTEM v3 — Single source of truth */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  --bg: #030303;
  --fg: #f0f0f0;
  --dim: #777;
  --muted: #444;
  --r: #ff2020;
  --r2: #ff6040;
  --r3: #ff9060;
  --green: #4ade80;
  --yellow: #facc15;
  --blue: #60a5fa;
  --red-soft: #f87171;
  --glow: rgba(255,32,32,.1);
  --glow2: rgba(255,32,32,.2);
  --card: rgba(255,255,255,.018);
  --card-h: rgba(255,255,255,.035);
  --border: rgba(255,255,255,.06);
  --border-h: rgba(255,32,32,.2);
  --radius: 16px;
  --radius-sm: 10px;
  --font: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --max-w: 960px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  padding-top: 56px; /* space for fixed nav */
}

/* grain */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9998; opacity: .02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: var(--r); text-decoration: none; transition: color .2s; }
a:hover { color: var(--r2); }

/* ── LAYOUT ── */
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 2rem 1.5rem; }

/* ── PAGE HEADER (below nav, per-service) ── */
.page-header {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 1.25rem; margin-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}
.page-title { font-weight: 800; font-size: 1.1rem; color: var(--fg); }
.page-title small { color: var(--muted); font-weight: 600; font-size: .7rem; margin-left: .5rem; text-transform: uppercase; letter-spacing: .1em; }
.page-actions { display: flex; gap: .75rem; align-items: center; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1.2rem; border-radius: var(--radius-sm);
  font-size: .82rem; font-weight: 700;
  border: none; cursor: pointer; font-family: var(--font);
  transition: all .3s;
}
.btn-p { background: var(--r); color: #fff; box-shadow: 0 2px 12px var(--glow2); }
.btn-p:hover { transform: translateY(-2px); box-shadow: 0 4px 20px var(--glow2); color: #fff; }
.btn-g { background: transparent; border: 1px solid var(--border); color: var(--fg); }
.btn-g:hover { border-color: var(--border-h); background: var(--card); color: var(--fg); }
.btn-d { background: transparent; border: 1px solid rgba(255,32,32,.2); color: var(--r); padding: .35rem .7rem; font-size: .75rem; }
.btn-d:hover { background: rgba(255,32,32,.08); }
.btn-sm { padding: .35rem .7rem; font-size: .75rem; }

/* ── FORMS ── */
input, select, textarea {
  width: 100%; padding: .7rem 1rem;
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--fg);
  font-size: .88rem; font-family: var(--font);
  outline: none; transition: border-color .3s;
}
input:focus, select:focus, textarea:focus { border-color: var(--border-h); }
textarea { min-height: 120px; resize: vertical; }
select {
  cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center; padding-right: 2.5rem;
}
label {
  display: block; font-size: .72rem; font-weight: 600;
  color: var(--dim); margin-bottom: .35rem;
  text-transform: uppercase; letter-spacing: .08em;
}
.field { margin-bottom: 1rem; }
.row { display: flex; gap: 1rem; }
.row > * { flex: 1; }

/* ── TABLE ── */
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; padding: .7rem 1rem;
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted);
  border-bottom: 1px solid var(--border);
}
td {
  padding: .7rem 1rem; font-size: .88rem;
  border-bottom: 1px solid rgba(255,255,255,.025);
  transition: background .2s;
}
tr:hover td { background: var(--card); }
tr:last-child td { border-bottom: none; }

/* ── BADGES ── */
.badge {
  display: inline-block; padding: .15rem .5rem;
  border-radius: 5px; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.badge-published, .badge-active, .badge-green { background: rgba(74,222,128,.1); color: var(--green); }
.badge-draft, .badge-pending, .badge-yellow, .badge-tester { background: rgba(250,204,21,.1); color: var(--yellow); }
.badge-archived, .badge-locked, .badge-red { background: rgba(248,113,113,.1); color: var(--red-soft); }
.badge-player, .badge-info, .badge-blue { background: rgba(96,165,250,.1); color: var(--blue); }
.badge-partner, .badge-pin { background: rgba(74,222,128,.1); color: var(--green); }
.badge-other, .badge-gray { background: rgba(255,255,255,.05); color: var(--dim); }
.badge-lock { background: rgba(248,113,113,.1); color: var(--red-soft); }

/* ── TABS ── */
.tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 2rem; }
.tab {
  padding: .7rem 1.5rem; font-size: .82rem; font-weight: 600;
  color: var(--muted); cursor: pointer;
  border: none; background: none; border-bottom: 2px solid transparent;
  font-family: var(--font); transition: all .2s;
}
.tab:hover { color: var(--fg); }
.tab.on, .tab.active { color: var(--fg); border-bottom-color: var(--r); }

/* ── PILLS / CATEGORIES ── */
.cats { display: flex; gap: .5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.cat {
  padding: .4rem 1rem; border-radius: 8px;
  font-size: .78rem; font-weight: 700; cursor: pointer;
  border: 1px solid var(--border); background: transparent;
  color: var(--dim); font-family: var(--font); transition: all .25s;
}
.cat:hover { border-color: var(--border-h); color: var(--fg); }
.cat.on { background: var(--r); border-color: var(--r); color: #fff; }

/* ── CARDS ── */
.card, .topic {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem;
  transition: all .3s ease; position: relative; overflow: hidden;
}
.card:hover, .topic:hover {
  border-color: var(--border-h); transform: translateY(-2px);
  background: var(--card-h);
}
.topic { padding: 1.25rem 1.5rem; margin-bottom: .75rem; cursor: pointer; }
.topic h3 { font-size: .95rem; font-weight: 700; margin-bottom: .3rem; display: flex; align-items: center; gap: .5rem; }
.topic .meta { font-size: .78rem; color: var(--dim); display: flex; gap: 1rem; align-items: center; }

/* ── REPLY / INTERACTION ── */
.reply, .int {
  border-left: 2px solid var(--border);
  padding: .75rem 1.25rem; margin-bottom: .75rem;
  transition: border-color .3s;
}
.reply:hover, .int:hover { border-color: var(--r); }

/* ── COUNT PILL ── */
.count {
  background: rgba(255,255,255,.05); padding: .15rem .5rem;
  border-radius: 5px; font-size: .7rem;
  font-family: var(--mono); color: var(--dim);
}

/* ── STAT CARD ── */
.stat-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem; text-align: center;
  transition: all .3s;
}
.stat-card:hover { border-color: var(--border-h); transform: translateY(-2px); }
.stat-card .sv { font-family: var(--mono); font-size: 2rem; font-weight: 700; color: var(--r); }
.stat-card .sl { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; margin-top: .3rem; }

/* ── UTILITY ── */
.actions { display: flex; gap: .5rem; margin-top: 1rem; }
.pager { text-align: center; margin-top: 1.5rem; color: var(--dim); font-size: .85rem; }
.pager a { margin: 0 .5rem; }
.mono { font-family: var(--mono); }
.dim { color: var(--dim); }
.muted { color: var(--muted); }
.text-sm { font-size: .82rem; }
.text-xs { font-size: .75rem; }
.mt-2 { margin-top: 1.5rem; }

/* ── FOOTER ── */
.x-footer {
  border-top: 1px solid var(--border);
  padding: 1.5rem 0; margin-top: 3rem;
  text-align: center; color: var(--muted); font-size: .73rem;
}
.x-footer a { color: var(--muted); }
.x-footer a:hover { color: var(--fg); }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .row { flex-direction: column; }
  .page-header { flex-wrap: wrap; gap: 1rem; }
  .cats { gap: .35rem; }
}