/* CashVille huisstijl voor het paneel: dezelfde tokens en onderdelen als de CashVille Launcher
   (src/style.css + style-v2.css, CashVilleLauncher-general/docs/design-tokens.json). Pas beide aan als je hier iets wijzigt.
   Lettertypen OFL 1.1 (Inter, Archivo Black), zelf gehost. */
@font-face { font-family: "Inter"; src: url("/cv/fonts/Inter.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo Black"; src: url("/cv/fonts/ArchivoBlack-Regular.ttf") format("truetype"); font-weight: 400 900; font-display: swap; }

:root {
  color-scheme: dark;
  /* design-tokens.json: color */
  --bg: #07090a;
  --panel: #0e1311;
  --panel2: #131a17;
  --panel3: #19221e;
  --edge: rgba(255, 255, 255, .06);
  --edge2: rgba(255, 255, 255, .10);
  --text: #eef3ee;
  --muted: #8c9c94;
  --gold: #e7b84a;
  --gold2: #ffe39a;
  --gold-d: #a8781a;
  --green: #22c06e;
  --green2: #4fe39a;
  --red: #ef4b55;
  --orange: #ff9a3d;
  --blue: #4aa3ff;
  --purple: #b56bff;
  --mythic: #ff5fa2;
  --discord: #5865f2;
  --on-gold: #1b1203;
  /* radius / ruimte / maten */
  --r: 12px;
  --r-btn: 8px;
  --r-badge: 6px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --control-h: 30px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --display: "Archivo Black", "Bahnschrift", sans-serif;
  --ui: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --mono: "Cascadia Mono", Consolas, ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
html, body, button, input, select, textarea { font-family: var(--ui); font-feature-settings: "cv11", "ss01"; }
body { font-size: 13px; line-height: 1.45; letter-spacing: -0.003em; text-rendering: optimizeLegibility; }
h1, h2, h3 { letter-spacing: -0.015em; }
b, strong { font-weight: 650; }
.mono, code { font-family: var(--mono); font-variant-numeric: tabular-nums; }
::selection { background: rgba(231, 184, 74, .35); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--panel3); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* Achtergrond van het hoofdvlak (launcher .main) */
.cv-main { background: radial-gradient(900px 500px at 100% -10%, rgba(231, 184, 74, .05), transparent 60%), radial-gradient(700px 500px at -10% 120%, rgba(34, 192, 110, .05), transparent 60%), var(--bg); }

/* Paneel / kaart (launcher .glass / .panel) */
.glass, .panel { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r); box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 8px 24px rgba(0, 0, 0, .28); }

/* Paginakop (launcher .page-head) */
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 0 14px; }
.page-head h1 { font-family: var(--display); font-weight: 400; font-size: 26px; letter-spacing: 0; margin: 0; }
.page-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }

/* Knoppen (launcher .btn-sm.gold|.ghost|.green|.discord|.warn) */
.btn-sm { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: var(--r-btn); font-weight: 650; font-size: 12px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .2s var(--ease), filter .2s; }
.btn-sm svg { width: 15px; height: 15px; }
.btn-sm:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.1); }
.btn-sm:disabled { opacity: .5; cursor: not-allowed; }
.btn-sm.gold { color: var(--on-gold); background: linear-gradient(180deg, var(--gold2), var(--gold)); box-shadow: 0 4px 16px rgba(231, 184, 74, .25); }
.btn-sm.green { color: #04170c; background: linear-gradient(180deg, var(--green2), var(--green)); }
.btn-sm.ghost { color: var(--text); background: var(--panel3); border-color: var(--edge2); }
.btn-sm.discord { color: #fff; background: var(--discord); }
.btn-sm.warn { color: var(--red); background: rgba(239, 75, 85, .08); border-color: rgba(239, 75, 85, .35); }

/* Chips, badges, stipjes */
.chip { padding: 5px 11px; border-radius: 8px; font-size: 12px; font-weight: 650; color: var(--muted); background: var(--panel2); border: 1px solid var(--edge); cursor: pointer; transition: all .2s; }
.chip:hover { color: var(--text); }
.chip.active { color: var(--on-gold); background: linear-gradient(180deg, var(--gold2), var(--gold)); border-color: transparent; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: var(--r-badge); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.badge.ok { color: var(--green2); background: rgba(34, 192, 110, .1); }
.badge.warn { color: var(--orange); background: rgba(255, 154, 61, .1); }
.badge.bad { color: var(--red); background: rgba(239, 75, 85, .1); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--muted); flex: none; }
.dot.ok { background: var(--green2); box-shadow: 0 0 10px var(--green2); }
.dot.bad { background: var(--red); }

/* Velden (launcher input / .search) */
.field, .cv input, .cv select, .cv textarea { font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--edge2); border-radius: var(--r-btn); padding: 6px 10px; min-height: var(--control-h); }
.field:focus, .cv input:focus, .cv select:focus, .cv textarea:focus { outline: none; border-color: rgba(231, 184, 74, .45); box-shadow: 0 0 0 3px rgba(231, 184, 74, .12); }

/* Segmentknop (launcher .seg) */
.seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: 9px; background: var(--panel2); border: 1px solid var(--edge); }
.seg button { padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 700; color: var(--muted); background: transparent; border: 0; cursor: pointer; }
.seg button.on, .seg button.active { color: var(--on-gold); background: linear-gradient(180deg, var(--gold2), var(--gold)); }

/* Merkteken (launcher wordmark) */
.cv-logo { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; font: 400 15px/1 var(--display); color: var(--on-gold); background: linear-gradient(180deg, var(--gold2), var(--gold)); box-shadow: 0 4px 16px rgba(231, 184, 74, .25); }
.wordmark { font-family: var(--display); font-weight: 400; letter-spacing: .01em; }