/* SlotForge Studio · Kobow Brand Unified · v1
 * Single source of truth — ALL pages use these tokens.
 * Based on official kobow-brand.css (kobowlotto.com).
 * Loaded LAST to override every prior design layer.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

/* ============================================================
   KOBOW BRAND TOKENS — dark theme default for the Studio
   ============================================================ */
:root {
  /* Surfaces (Kobow dark admin) */
  --kbw-paper: #0a0a0a;
  --kbw-card:  #141414;
  --kbw-soft:  #1a1a1a;
  --kbw-elev:  #1f1f1f;
  --kbw-ink:   #eaeaea;
  --kbw-line:        #2a2a2a;
  --kbw-line-strong: #383838;

  /* Text */
  --kbw-muted:   #888888;
  --kbw-muted-2: #6b6b75;

  /* CANONICAL KOBOW ACCENT — burnt orange #c2410c (wordmark hue) */
  --kbw-accent:        #d4500e;     /* main, slightly lifted for dark bg */
  --kbw-accent-2:      #fb923c;     /* hover lighter */
  --kbw-accent-dim:    #c2410c;     /* canonical wordmark */
  --kbw-accent-bright: #fb923c;
  --kbw-accent-soft:   rgba(212,80,14,.14);
  --kbw-accent-surface:rgba(212,80,14,.07);

  /* Status colors */
  --kbw-success:    #34d399;
  --kbw-success-bg: rgba(16,185,129,.12);
  --kbw-warn:       #fbbf24;
  --kbw-warn-bg:    rgba(202,138,4,.14);
  --kbw-danger:     #f87171;
  --kbw-danger-bg:  rgba(225,50,56,.10);
  --kbw-info:       #38bdf8;
  --kbw-info-bg:    rgba(14,165,233,.12);

  /* Geometry */
  --kbw-radius:    8px;
  --kbw-radius-sm: 5px;
  --kbw-radius-md: 6px;
  --kbw-shadow:        0 2px 8px rgba(0,0,0,.5);
  --kbw-shadow-hover:  0 8px 24px rgba(0,0,0,.6);

  /* Typography */
  --kbw-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --kbw-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --kbw-mono:    'IBM Plex Mono', 'SF Mono', Monaco, Menlo, 'Courier New', monospace;

  /* ============================================================
     LEGACY ALIASES — every previous design system points here now
     ============================================================ */
  /* klm-* (kobowlotto vintage) */
  --klm-paper: var(--kbw-paper);
  --klm-card:  var(--kbw-card);
  --klm-soft:  var(--kbw-soft);
  --klm-ink:   var(--kbw-ink);
  --klm-muted: var(--kbw-muted);
  --klm-accent: var(--kbw-accent);
  --klm-line: var(--kbw-line);
  --klm-radius: var(--kbw-radius);
  --klm-shadow: var(--kbw-shadow);
  --klm-font-display: var(--kbw-display);
  --klm-font-body: var(--kbw-body);
  --klm-font-mono: var(--kbw-mono);

  /* sf-* (my v2/v3 system) */
  --sf-bg-deep:    var(--kbw-paper);
  --sf-bg:         var(--kbw-paper);
  --sf-bg-elev1:   var(--kbw-card);
  --sf-bg-elev2:   var(--kbw-soft);
  --sf-bg-elev3:   var(--kbw-elev);
  --sf-bg-glass:   rgba(10,10,10,.92);
  --sf-line-soft:  var(--kbw-line);
  --sf-line:       var(--kbw-line);
  --sf-line-strong:var(--kbw-line-strong);
  --sf-text:       var(--kbw-ink);
  --sf-text-mid:   var(--kbw-muted);
  --sf-text-dim:   var(--kbw-muted-2);
  --sf-text-faint: #5a5a5a;
  --sf-gold:        var(--kbw-accent);
  --sf-gold-bright: var(--kbw-accent-2);
  --sf-gold-deep:   var(--kbw-accent-dim);
  --sf-gold-gradient: var(--kbw-accent);
  --sf-gold-glow:   none;
  --sf-success:    var(--kbw-success);
  --sf-warn:       var(--kbw-warn);
  --sf-error:      var(--kbw-danger);
  --sf-info:       var(--kbw-info);
  --sf-r-sm: var(--kbw-radius-sm);
  --sf-r-md: var(--kbw-radius-md);
  --sf-r-lg: var(--kbw-radius);
  --sf-r-xl: 12px;
  --sf-font-display: var(--kbw-display);
  --sf-font-body:    var(--kbw-body);
  --sf-font-brand:   var(--kbw-display);
  --sf-font-mono:    var(--kbw-mono);
  --sf-icon-color:   var(--kbw-muted);
  --sf-icon-active:  var(--kbw-accent);

  /* rica-* (legacy from old pages) */
  --rica-red:   var(--kbw-accent);
  --rica-gold:  var(--kbw-accent);
  --purple:     #a78bfa;

  /* shorthand (used in inline page CSS) */
  --bg:       var(--kbw-paper);
  --panel:    var(--kbw-card);
  --ink-2:    var(--kbw-soft);
  --line:     var(--kbw-line);
  --text:     var(--kbw-ink);
  --text-dim: var(--kbw-muted);
  --muted:    var(--kbw-muted-2);
  --accent:   var(--kbw-accent);
  --accent2:  var(--kbw-accent-2);
  --ok:       var(--kbw-success);
  --info:     var(--kbw-info);
  --err:      var(--kbw-danger);
}

/* ============================================================
   GLOBAL BASE
   ============================================================ */
html { font-family: var(--kbw-body); -webkit-font-smoothing: antialiased; }
body {
  background: var(--kbw-paper) !important;
  background-image: none !important;
  color: var(--kbw-ink) !important;
  font-family: var(--kbw-body) !important;
  font-size: 14px !important;
  line-height: 1.55;
  margin: 0;
}

/* Typography */
h1, h2, h3, h4, .kbw-display, .sf-display, .sf-brand {
  font-family: var(--kbw-display) !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  color: var(--kbw-ink) !important;
}
h1 { font-size: 24px !important; }
h2 { font-size: 18px !important; }
h3 { font-size: 15px !important; }
.kbw-mono, .sf-mono, code { font-family: var(--kbw-mono); }

/* Links */
a { color: var(--kbw-accent); text-decoration: none; }
a:hover { color: var(--kbw-accent-2); }

/* Selection */
::selection { background: var(--kbw-accent-soft); color: var(--kbw-ink); }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--kbw-line); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--kbw-line-strong); }

/* ============================================================
   SIDEBAR (studio-nav.js)
   ============================================================ */
.sf-sidebar {
  background: var(--kbw-paper) !important;
  border-right: 1px solid var(--kbw-line) !important;
}
.sf-sidebar-brand { padding: 18px 20px 16px; border-bottom: 1px solid var(--kbw-line) !important; }
.sf-brand-mark {
  background: var(--kbw-accent) !important;
  color: #fff !important;
  font-family: var(--kbw-display) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border-radius: var(--kbw-radius-sm) !important;
  box-shadow: none !important;
}
.sf-brand-text {
  font-family: var(--kbw-display) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: -.01em !important;
  color: var(--kbw-ink) !important;
}
.sf-brand-text .sub {
  font-family: var(--kbw-mono) !important;
  font-size: 10px !important;
  letter-spacing: .05em !important;
  color: var(--kbw-muted-2) !important;
  margin-top: 4px;
}
.sf-nav-group-label {
  font-family: var(--kbw-body) !important;
  text-transform: none !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: var(--kbw-muted-2) !important;
  padding: 14px 18px 6px !important;
}
.sf-nav-group-label .sf-group-icon { display: none !important; }
.sf-nav-item {
  font-family: var(--kbw-body) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  margin: 1px 10px !important;
  border-radius: var(--kbw-radius-sm) !important;
  color: var(--kbw-muted) !important;
  border: 1px solid transparent !important;
  transition: background .12s ease, color .12s ease !important;
}
.sf-nav-item:hover {
  background: var(--kbw-soft) !important;
  color: var(--kbw-ink) !important;
  transform: none !important;
}
.sf-nav-item:hover .sf-nav-icon { color: var(--kbw-accent) !important; }
.sf-nav-item.active {
  background: var(--kbw-accent-soft) !important;
  color: var(--kbw-accent) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.sf-nav-item.active .sf-nav-icon { color: var(--kbw-accent) !important; }
.sf-nav-item.active::before {
  background: var(--kbw-accent) !important;
  width: 2px !important;
  height: 60% !important;
}
.sf-nav-icon { color: var(--kbw-muted) !important; transition: color .12s ease !important; }
.sf-sidebar-footer { border-top: 1px solid var(--kbw-line) !important; padding: 12px 16px !important; color: var(--kbw-muted-2) !important; }
.sf-collapse-btn { background: var(--kbw-soft) !important; border: 1px solid var(--kbw-line) !important; color: var(--kbw-muted) !important; border-radius: var(--kbw-radius-sm) !important; }
.sf-collapse-btn:hover { background: var(--kbw-accent-soft) !important; color: var(--kbw-accent) !important; border-color: var(--kbw-accent) !important; }

/* ============================================================
   TOPBAR
   ============================================================ */
.sf-topbar {
  background: var(--kbw-paper) !important;
  border-bottom: 1px solid var(--kbw-line) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 20px !important;
  height: 52px !important;
}
.sf-crumbs { font-family: var(--kbw-body) !important; font-size: 13px !important; color: var(--kbw-muted) !important; }
.sf-crumbs .sf-crumb-current { color: var(--kbw-ink) !important; font-weight: 500 !important; }
.sf-crumbs .sf-crumb-icon { display: none !important; }
.sf-tb-btn, .sf-cmdk-hint {
  background: transparent !important;
  border: 1px solid var(--kbw-line) !important;
  color: var(--kbw-muted) !important;
  font-family: var(--kbw-body) !important;
  font-weight: 500 !important;
  border-radius: var(--kbw-radius-sm) !important;
  padding: 6px 11px !important;
  font-size: 12px !important;
}
.sf-tb-btn:hover, .sf-cmdk-hint:hover {
  background: var(--kbw-soft) !important;
  color: var(--kbw-ink) !important;
  border-color: var(--kbw-line-strong) !important;
}
.sf-tb-btn.primary {
  background: var(--kbw-accent) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.sf-tb-btn.primary:hover { background: var(--kbw-accent-2) !important; transform: none !important; box-shadow: none !important; }
.sf-cmdk-hint .key {
  font-family: var(--kbw-mono) !important;
  background: var(--kbw-soft) !important;
  border-radius: 3px !important;
  font-size: 10px !important;
  padding: 1px 5px !important;
}

/* ============================================================
   CARDS
   ============================================================ */
.theme-card, .prompt-card, .browser-item, .ref-section, .field-block,
.grid-card, .tile, .gen-result, .kbw-card, .klm-card {
  background: var(--kbw-card) !important;
  border: 1px solid var(--kbw-line) !important;
  border-radius: var(--kbw-radius) !important;
  box-shadow: none !important;
  transition: border-color .12s ease !important;
}
.theme-card:hover, .prompt-card:hover, .browser-item:hover, .grid-card:hover, .tile:hover {
  border-color: var(--kbw-line-strong) !important;
  transform: none !important;
}
.theme-card.active, .browser-item.active, .grid-card.active, .ref-chip.selected {
  border-color: var(--kbw-accent) !important;
  background: var(--kbw-accent-surface) !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn, button.btn, .kbw-btn, .klm-btn {
  background: var(--kbw-soft) !important;
  color: var(--kbw-ink) !important;
  border: 1px solid var(--kbw-line) !important;
  border-radius: var(--kbw-radius-sm) !important;
  font-family: var(--kbw-body) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 7px 14px !important;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease !important;
}
.btn:hover { background: var(--kbw-elev) !important; border-color: var(--kbw-line-strong) !important; transform: none !important; }
.btn.primary, button.primary, .btn-primary, .kbw-btn.primary, .klm-btn.primary {
  background: var(--kbw-accent) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.btn.primary:hover:not(:disabled) { background: var(--kbw-accent-2) !important; transform: none !important; filter: none !important; }
.btn.green, .btn-success { background: var(--kbw-success) !important; color: #0a0a0a !important; border: none !important; }
.btn.danger { background: var(--kbw-danger) !important; color: #fff !important; border: none !important; }

/* ============================================================
   PILLS & TAGS
   ============================================================ */
.pill, .filter-pill, .preset-btn, .src-pill, .format-pill,
.sym-pill, .palette-swatch, .zone-check, .kbw-pill {
  background: var(--kbw-card) !important;
  border: 1px solid var(--kbw-line) !important;
  border-radius: 999px !important;
  font-family: var(--kbw-body) !important;
  font-weight: 500 !important;
  font-size: 11.5px !important;
  letter-spacing: 0 !important;
  color: var(--kbw-muted) !important;
  padding: 4px 11px !important;
}
.pill:hover, .filter-pill:hover, .preset-btn:hover, .format-pill:hover, .sym-pill:hover {
  background: var(--kbw-soft) !important;
  color: var(--kbw-ink) !important;
  border-color: var(--kbw-line-strong) !important;
  transform: none !important;
}
.pill.active, .filter-pill.active, .sym-pill.active, .palette-swatch.active, .format-pill.active {
  background: var(--kbw-accent) !important;
  color: #fff !important;
  border-color: var(--kbw-accent) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.preset-btn.applied { background: var(--kbw-accent-dim) !important; color: #fff !important; border-color: var(--kbw-accent-dim) !important; }

/* ============================================================
   INPUTS
   ============================================================ */
input[type="text"], input[type="search"], input[type="email"], input[type="number"],
input:not([type]), textarea, select {
  background: var(--kbw-paper) !important;
  border: 1px solid var(--kbw-line) !important;
  color: var(--kbw-ink) !important;
  border-radius: var(--kbw-radius-sm) !important;
  font-family: var(--kbw-body) !important;
  font-size: 13.5px !important;
  padding: 8px 12px !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--kbw-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px var(--kbw-accent-soft) !important;
  background: var(--kbw-card) !important;
}
textarea { font-family: var(--kbw-body) !important; line-height: 1.6 !important; }
textarea.prompt-edit, textarea.em-edit-input, textarea#prompt-edit { font-family: var(--kbw-mono) !important; font-size: 12.5px !important; }

/* ============================================================
   MODALS
   ============================================================ */
.lightbox, .modal, .editor-modal, .cmdk-backdrop {
  background: rgba(10,10,10,.92) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
.lightbox .info-side, .editor-modal .em-right, .modal-content, .lightbox-content {
  background: var(--kbw-card) !important;
  border-left: 1px solid var(--kbw-line) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ============================================================
   SECTION TITLES
   ============================================================ */
.section-title, .chat-title {
  font-family: var(--kbw-body) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--kbw-ink) !important;
}
.section-title .ct, .chat-title .badge {
  background: var(--kbw-soft) !important;
  color: var(--kbw-muted) !important;
  border: 1px solid var(--kbw-line) !important;
  font-family: var(--kbw-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  padding: 1px 7px !important;
}

/* ============================================================
   TOASTS + COST BADGE
   ============================================================ */
#studio-toast-container > div {
  background: var(--kbw-card) !important;
  border: 1px solid var(--kbw-line) !important;
  border-radius: var(--kbw-radius) !important;
  font-family: var(--kbw-body) !important;
  font-size: 13px !important;
  box-shadow: var(--kbw-shadow-hover) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--kbw-ink) !important;
}
#studio-session-badge {
  background: var(--kbw-card) !important;
  border: 1px solid var(--kbw-line) !important;
  border-radius: var(--kbw-radius) !important;
  font-family: var(--kbw-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 7px 12px !important;
  color: var(--kbw-muted) !important;
  box-shadow: var(--kbw-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#studio-session-badge:hover { border-color: var(--kbw-accent) !important; color: var(--kbw-accent) !important; box-shadow: var(--kbw-shadow-hover) !important; }
#studio-session-badge b { color: var(--kbw-accent) !important; }

/* ============================================================
   TILE ID + STATUS BADGES
   ============================================================ */
.tile .id, .kbw-id {
  background: var(--kbw-accent-soft) !important;
  color: var(--kbw-accent) !important;
  border: 1px solid var(--kbw-accent-dim) !important;
  font-family: var(--kbw-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
}

/* ============================================================
   LOADER
   ============================================================ */
.loader { border-color: var(--kbw-accent) !important; border-top-color: transparent !important; }
.studio-skeleton, .skeleton {
  background: linear-gradient(90deg, var(--kbw-card) 25%, var(--kbw-soft) 50%, var(--kbw-card) 75%) !important;
  background-size: 200% 100% !important;
}

/* ============================================================
   LIGHT THEME — Kobow light (for clients/operators)
   Toggle: html[data-theme="dark"] is default; remove for light
   ============================================================ */
html[data-theme="light"], body.sf-light {
  --kbw-paper: #fafafa;
  --kbw-card:  #ffffff;
  --kbw-soft:  #f2f2f2;
  --kbw-elev:  #eeeeee;
  --kbw-ink:   #171717;
  --kbw-line:        #e5e7eb;
  --kbw-line-strong: #d9d9dd;
  --kbw-muted:   #525252;
  --kbw-muted-2: #6b6b75;
  --kbw-accent:        #c2410c;
  --kbw-accent-2:      #fb923c;
  --kbw-accent-dim:    #9a3308;
  --kbw-accent-soft:   rgba(194,65,12,.10);
  --kbw-accent-surface:rgba(194,65,12,.06);
}
body.sf-light { background: var(--kbw-paper) !important; color: var(--kbw-ink) !important; }