/* Recruitable product kit: shared tokens for dashboard.html, items.html, bundle.html.
   Recruitable dark tokens (lm-styles.css) plus the kit's card and panel surfaces. */
:root {
  --bg: #0e0e0f;
  --bg-2: #141415;
  --panel: #18181a;
  --panel-2: #1e1e21;
  --border: #2a2a2e;
  --border-soft: rgba(255,255,255,0.07);
  --text: #e9edf1;
  --text-secondary: #c9ced4;
  --text-muted: rgba(255,255,255,0.58);
  --text-faint: rgba(255,255,255,0.38);
  --accent: #01FF86;
  --accent-ink: #07140d;
  --accent-soft: rgba(1,255,134,0.10);
  --cyan: #06F2FF;
  --gold: #F5C451;
  --silver: #C9D1DA;
  --bronze: #D08A5B;
  --reach: #F5C451;
  --match: #01FF86;
  --safety: #06F2FF;
  --tile: #f2f3f4;
  --radius: 14px;
  --radius-lg: 22px;
  --font: "Rigid Square", "rigid-square", "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Rigid Square", "rigid-square", "Helvetica Neue", Arial, sans-serif;
  --shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 30px 60px -30px rgba(0,0,0,0.9);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }

/* Review mode: same convention as v1/v2 (?review). */
html:not(.review) .flag-badge { display: none; }
html.review [data-flag] { outline: 2px dashed var(--gold); outline-offset: 3px; position: relative; }
html.review [data-flag]::after {
  content: attr(data-flag-n); position: absolute; top: -10px; right: -10px; z-index: 5;
  width: 20px; height: 20px; border-radius: 50%; background: var(--gold); color: #111;
  font: 700 11px/20px var(--font-ui); text-align: center;
}
.review-panel { position: fixed; right: 16px; bottom: 16px; width: min(360px, calc(100vw - 32px)); max-height: 60vh; overflow: auto; z-index: 100;
  background: #1b1b1d; border: 1px solid var(--gold); border-radius: 12px; padding: 14px 16px; font: 13px/1.45 var(--font-ui); color: var(--text); }
.review-panel h2 { margin: 0 0 8px; font-size: 13px; color: var(--gold); }
.review-panel ol { margin: 0; padding-left: 20px; }
.review-panel li { margin: 0 0 8px; cursor: pointer; }
.review-panel li span { display: block; color: var(--text-muted); font-size: 12px; }