/* ============================================================================
   Playable Factory — "Studio" lime skin  ·  DROP-IN OVERRIDE
   Exact match to the Studio design system (slate + acid lime).
   Load ONE line after your existing styles.css:
       <link rel="stylesheet" href="./skin-studio.css">
   ============================================================================ */

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

/* ---- 1. Tokens — EXACT Studio values ---- */
:root {
  --bg: #15181f;
  --bg-2: #1a1e27;
  --panel: #1a1e27;
  --panel-2: #20242e;
  --line: #313745;
  --text: #eef1f6;
  --muted: #9aa3b4;
  --accent: #b8f24e;
  --accent-2: #4da8ff;
  --danger: #fb6e6e;
  --wood: #0e1016;
  --gold-soft: #c8f96a;
  --shadow-sm: 0 2px 6px -1px rgba(8,10,14,.45);
  --shadow-md: 0 8px 20px -6px rgba(8,10,14,.55);
  --shadow-lg: 0 20px 40px -12px rgba(8,10,14,.6);
  --shadow: var(--shadow-lg);
  --_glow: 0 0 0 1px rgba(184,242,78,.25), 0 8px 22px -8px rgba(184,242,78,.4);
}
[data-theme="light"] {
  --bg:#ffffff; --bg-2:#f2f4f8; --panel:#ffffff; --panel-2:#f4f5f8;
  --line:#e3e6ec; --text:#161922; --muted:#5a6273;
  --accent:#b8f24e; --accent-2:#2b8df0; --danger:#ef4848; --wood:#e8eaef; --gold-soft:#7fb315;
  --shadow:0 8px 24px rgba(40,44,60,.1);
}

/* ---- 2. Fonts: Space Grotesk headlines · Geist UI · JetBrains mono ---- */
body { font-family: 'Geist', system-ui, -apple-system, sans-serif !important; }
.topbar h1, .preview-top h2, .panel-head h2, .inspector-card h3,
.basic-wizard-head h2, .basic-wizard-detail-head h2, .basic-path-card strong,
.monetization-card h1, .auth-card h1, .template-card h3, h1, h2, h3 {
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  letter-spacing: -0.02em !important;
}
code, pre, .monetization-value, .monetization-txid, #mcpUrlValue, #capturePayload,
#referenceSummary, #referenceShotList, .field input[type="url"], .field input[type="text"][data-bind] {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace !important;
}
.field input, .field textarea, .field select { font-family: 'Geist', system-ui, sans-serif !important; }

/* ---- 3. App background ---- */
html, body {
  background:
    radial-gradient(circle at top left, rgba(77,168,255,0.08), transparent 26%),
    radial-gradient(circle at top right, rgba(184,242,78,0.10), transparent 20%),
    #15181f !important;
}
.topbar h1 { color: #eef1f6 !important; text-shadow: none !important; }
.eyebrow { color: #b8f24e !important; }

/* ---- 4. Surfaces — flat slate + hairline borders + lit top edge ---- */
.panel, .inspector-card, .preview-shell, .topbar, .basic-wizard-shell,
.basic-wizard-detail, .auth-card, .monetization-card, .basic-wizard-helper,
.basic-callout, .basic-config-card, .basic-collapsible, .panel-note, .monetization-beta {
  background: #1a1e27 !important;
  border: 1px solid #313745 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), var(--shadow-md) !important;
}
.template-card, .project-library-card, .basic-path-card, .basic-step-chip,
.symbol-item, .plan-opt, .account-badge, .monetization-summary span,
.global-template-card, .workspace-nav, .global-template-preview {
  background: #20242e !important;
  border: 1px solid #313745 !important;
  box-shadow: none !important;
}
.field input, .field textarea, .field select,
.monetization-value, .monetization-txid, .screenshot-cell-card select,
.screenshot-grid-stage {
  background: #20242e !important;
  border: 1px solid #313745 !important;
  color: #eef1f6 !important;
  box-shadow: none !important;
}
.field input:focus, .field textarea:focus, .field select:focus,
.monetization-txid:focus {
  border-color: rgba(184,242,78,.5) !important;
  box-shadow: 0 0 0 3px rgba(184,242,78,.13) !important;
  outline: none !important;
}
.field input[type="checkbox"] { accent-color: #b8f24e !important; }
.field input::placeholder, .field textarea::placeholder { color: #646c7e !important; }

/* ---- 5. BUTTON GEOMETRY — match the Studio example exactly (9px, ~36px) ---- */
.primary-btn, .ghost-btn {
  min-height: 36px !important; height: 36px !important; padding: 0 14px !important;
  border-radius: 9px !important; font-size: 13px !important; font-weight: 600 !important;
  letter-spacing: 0 !important; text-transform: none !important;
}
.primary-btn,
.mode-btn.active, .lang-btn.active, .basic-inline-tab.active,
.basic-step-chip.done .basic-step-chip-num,
.workflow-step.active .workflow-step-num {
  background: #b8f24e !important;
  color: #15181f !important;
  border: 1px solid transparent !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28) !important;
  text-transform: none !important;
}
.primary-btn:hover { background: #c8f96a !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), var(--_glow) !important; }

/* ---- 6. Ghost / secondary → slate chip, crisp lime outline + glow on hover
   (scoped to NON-light so it never fights the light-theme rule) ---- */
html:not([data-theme="light"]) .ghost-btn,
html:not([data-theme="light"]) .export-target-control,
html:not([data-theme="light"]) .basic-inline-tab {
  background: #20242e !important;
  border: 1px solid #313745 !important;
  color: #eef1f6 !important;
  border-radius: 9px !important;
}
.ghost-btn, .export-target-control, .basic-inline-tab { border-radius: 9px !important; text-transform: none !important; }
.ghost-btn:hover, .basic-inline-tab:hover {
  border-color: rgba(184,242,78,.55) !important;
  box-shadow: var(--_glow) !important;
  opacity: 1 !important;
}
/* nav items are FLAT; active = subtle sunken tint + inset hairline + lime icon (example parity) */
.workspace-nav-btn {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #9aa3b4 !important;
  box-shadow: none !important;
}
.workspace-nav-btn:hover {
  background: #20242e !important;
  border-color: transparent !important;
  color: #eef1f6 !important;
  box-shadow: none !important;
  transform: none !important;
}
.workspace-nav-btn.active {
  background: #20272a !important;
  border-color: transparent !important;
  color: #eef1f6 !important;
  box-shadow: inset 0 0 0 1px #313745 !important;
  font-weight: 600 !important;
}
.workspace-nav-btn .pf-ic { color: #838b9d !important; }
.workspace-nav-btn.active .pf-ic { color: #b8f24e !important; }
.workspace-nav-btn .pf-nav-label { flex: 1 !important; }

/* ---- 7. Selected / active cards → lime outline + glow ---- */
.template-card.active, .plan-opt.is-active, .basic-path-card.active,
.symbol-item.active, .basic-step-chip.active, .sidebar-panel.is-focused {
  border-color: rgba(184,242,78,.55) !important;
  box-shadow: 0 0 0 1px rgba(184,242,78,.22), 0 10px 24px -10px rgba(184,242,78,.3) !important;
}
.plan-opt.is-active { background: linear-gradient(180deg, rgba(184,242,78,.12), rgba(184,242,78,.03)) !important; }
.plan-opt.is-active .plan-radio { border-color: #b8f24e !important; }
.plan-opt.is-active .plan-radio::after { background: #b8f24e !important; }
.workflow-step.is-complete { border-color: rgba(70,217,138,.5) !important; }
.workflow-step.is-complete .workflow-step-num { background: rgba(70,217,138,.2) !important; color: #b6f1cf !important; }

/* ---- 8. Text accents ---- */
.monetization-label, .range-row strong, .monetization-amount, .monetization-amount strong { color: #b8f24e !important; }
.field span, .panel-head span, .section-title strong, .screenshot-frame-control span,
.screenshot-cell-meta strong { color: #838b9d !important; }
.basic-wizard-head h2, .basic-wizard-detail-head h2, .basic-path-card strong,
.topbar h1, .global-template-preview-placeholder strong { color: #eef1f6 !important; }
.basic-path-card p, .basic-wizard-subcopy, .panel-note, .section-title p { color: #9aa3b4 !important; }

/* ---- 9. Logo lockup + nav icons (added by studio-enhance.js) ---- */
.pf-logo-mark {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px;
  background: #b8f24e; display: grid; place-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.pf-logo-mark svg { width: 19px; height: 19px; color: #15181f; }
.workspace-nav-btn {
  display: inline-flex !important; align-items: center; gap: 10px;
}
.workspace-nav-btn .pf-ic { display: inline-flex; flex: 0 0 auto; color: #838b9d; }
.workspace-nav-btn .pf-ic svg { width: 16px; height: 16px; }

/* ---- 10. Misc lime details ---- */
.screenshot-grid-overlay { border-color: rgba(184,242,78,.9) !important; background: rgba(184,242,78,.08) !important; }
.screenshot-grid-handle { background: #b8f24e !important; border-color: rgba(15,24,31,.9) !important; }
.project-library-tag { background: rgba(70,217,138,.14) !important; color: #b6f1cf !important; }
.save-indicator__dot { background: #b8f24e !important; }
.basic-collapsible summary::after, .advanced-reference summary::after { color: #b8f24e !important; }

/* ============================================================================
   11. AUTH SCREEN — exact Studio match (black + lime glow TL, violet glow BR)
   ============================================================================ */
.auth-shell, .monetization-shell {
  background:
    radial-gradient(60% 50% at 16% 10%, rgba(184,242,78,0.12), transparent 60%),
    radial-gradient(52% 50% at 88% 92%, rgba(243,71,196,0.13), transparent 60%),
    #0e1016 !important;
}
.auth-shell::after, .monetization-shell::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0);
  background-size: 26px 26px;
}
[data-theme="light"] .auth-shell, [data-theme="light"] .monetization-shell {
  background:
    radial-gradient(60% 50% at 16% 10%, rgba(127,179,21,0.16), transparent 60%),
    radial-gradient(52% 50% at 88% 92%, rgba(214,43,168,0.12), transparent 60%),
    #eef1f6 !important;
}
.auth-card, .monetization-card {
  position: relative; z-index: 1;
  width: min(404px, 100%) !important;
  padding: 30px !important;
  border-radius: 18px !important;
  background: #1a1e27 !important;
  border: 1px solid #313745 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 30px 60px -24px rgba(0,0,0,.7) !important;
}
[data-theme="light"] .auth-card, [data-theme="light"] .monetization-card {
  background: #ffffff !important; border-color: #e3e6ec !important;
  box-shadow: 0 30px 60px -24px rgba(40,44,60,.25) !important;
}
.auth-card h1, .monetization-card h1 { font-size: 24px !important; margin: 18px 0 6px !important; }
.auth-subcopy { color: #9aa3b4 !important; font-size: 13.5px !important; }
.auth-card .eyebrow, .monetization-card .eyebrow { color: #b8f24e !important; }

/* ============================================================================
   12. BUILD FLOW (workflow-strip) — minimal text rows at the bottom of the nav
   ============================================================================ */
.workflow-strip {
  margin: 14px 0 0 !important; padding: 10px 0 2px !important;
  background: transparent !important; border: none !important;
  border-top: 1px solid #313745 !important; box-shadow: none !important;
}
.workflow-head { margin-bottom: 6px !important; }
.workflow-head h2 { display: none !important; }
.workflow-head .eyebrow {
  color: #646c7e !important; font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important; letter-spacing: 0.14em !important; padding: 0 10px !important;
}
.workflow-steps { display: flex !important; flex-direction: column !important; gap: 0 !important; }
.workflow-step {
  display: flex !important; gap: 10px !important; align-items: center !important;
  padding: 5px 10px !important; border-radius: 7px !important;
  background: transparent !important; border: 1px solid transparent !important;
  box-shadow: none !important; transform: none !important; text-align: left !important;
}
.workflow-step:hover { transform: none !important; background: #20242e !important; border-color: transparent !important; }
.workflow-step.active { transform: none !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.workflow-step.is-complete { border-color: transparent !important; }
.workflow-step-num {
  width: 18px !important; height: 18px !important; flex: 0 0 18px !important;
  border-radius: 5px !important; font-size: 10px !important;
  background: #272c38 !important; color: #9aa3b4 !important; font-family: 'JetBrains Mono', monospace !important;
}
.workflow-step.active .workflow-step-num { background: #b8f24e !important; color: #15181f !important; }
.workflow-step.is-complete .workflow-step-num { background: rgba(70,217,138,.2) !important; color: #b6f1cf !important; }
.workflow-step-copy small { display: none !important; }
.workflow-step-copy strong {
  font-size: 12px !important; letter-spacing: -0.005em !important;
  text-transform: none !important; color: #9aa3b4 !important; font-weight: 500 !important;
}
.workflow-step-copy small { font-size: 11px !important; color: #838b9d !important; }

/* ============================================================================
   13. THEME SWITCH — ONE square icon toggle (like the example IconButton).
   Both buttons stay in the DOM (app.js binds them); we show only the one that
   switches to the *other* theme, so it reads as a single ☾/☀ square.
   ============================================================================ */
.theme-switch {
  display: inline-flex !important; gap: 0 !important; padding: 0 !important;
  border-radius: 9px !important; background: transparent !important; border: none !important;
}
.theme-btn {
  width: 36px !important; height: 36px !important; padding: 0 !important;
  border-radius: 9px !important; border: 1px solid #313745 !important; background: #20242e !important;
  color: #eef1f6 !important; font-size: 15px !important; display: grid !important; place-items: center !important;
  box-shadow: none !important;
}
.theme-btn:hover { border-color: rgba(184,242,78,.55) !important; box-shadow: var(--_glow) !important; color: #eef1f6 !important; }
.theme-btn.active { display: none !important; }  /* hide current state → only the toggle target shows */
[data-theme="light"] .theme-btn { background: #ffffff !important; border-color: #e3e6ec !important; color: #161922 !important; }

/* mode + lang switches: clean slate pills */
.mode-switch, .lang-switch {
  padding: 3px !important; border-radius: 9px !important;
  background: #20242e !important; border: 1px solid #313745 !important; gap: 2px !important;
}
.mode-btn, .lang-btn {
  border-radius: 7px !important; border: 1px solid transparent !important;
  background: transparent !important; color: #9aa3b4 !important; padding: 5px 13px !important;
  min-height: 0 !important; height: 28px !important;
}
.mode-btn.active, .lang-btn.active { background: #b8f24e !important; color: #15181f !important; border-color: transparent !important; }

/* ============================================================================
   14. DEMO SCENE — Studio playable mock painted into the phone in static preview
   ============================================================================ */
.pf-demo-scene {
  position: absolute; inset: 0; z-index: 2; padding: 20px 16px; display: flex; flex-direction: column;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(243,71,196,0.42), transparent 62%),
    linear-gradient(180deg, #2a1145, #0c0716);
}
body:not(.ui-mode-basic) .device-frame { position: relative !important; overflow: hidden; }
.pf-demo-head { text-align: center; color: #fff; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 16px; text-shadow: 0 2px 10px rgba(0,0,0,.5); letter-spacing: -0.01em; }
.pf-demo-reels { margin: 18px auto 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; width: 168px; }
.pf-demo-cell { aspect-ratio: 1; border-radius: 10px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.2); display: grid; place-items: center; font-size: 22px; }
.pf-demo-cta { margin: auto auto 10px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 15px; color: #15181f; background: #b8f24e; padding: 12px 34px; border-radius: 999px; box-shadow: 0 8px 22px -4px rgba(184,242,78,.55); }
.pf-demo-foot { text-align: center; color: rgba(255,255,255,0.8); font-size: 11px; }

/* ============================================================================
   16. PREVIEW DEMO CONTENT — mechanic cards / step chips / swatches (preview only)
   Mirrors the Studio example so the static preview reads like the real product.
   ============================================================================ */
.pf-demo-steps { display: flex; gap: 8px; margin: 2px 0 18px; flex-wrap: wrap; }
.pf-demo-step { flex: 1 1 0; min-width: 78px; display: flex; flex-direction: column; gap: 6px; padding: 10px 11px; border-radius: 10px; background: #20242e; border: 1px solid #313745; }
.pf-demo-step__n { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #646c7e; font-weight: 600; }
.pf-demo-step > span:last-child { font-size: 12px; font-weight: 600; color: #eef1f6; }
.pf-demo-step.on { border-color: rgba(184,242,78,.55); background: #20272a; }
.pf-demo-step.on .pf-demo-step__n { color: #b8f24e; }
.pf-demo-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #646c7e; font-weight: 600; margin-bottom: 12px; }

.pf-demo-mechgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pf-demo-mech { position: relative; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 13px; align-items: center; padding: 15px; border-radius: 12px; background: #20242e; border: 1px solid #313745; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.pf-demo-mech:hover { border-color: rgba(184,242,78,.45); }
.pf-demo-mech.on { border-color: rgba(184,242,78,.6); background: #20272a; box-shadow: 0 0 0 1px rgba(184,242,78,.22), 0 10px 24px -10px rgba(184,242,78,.3); }
.pf-demo-mech__ic { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft, rgba(184,242,78,.13)); color: #b8f24e; }
.pf-demo-mech.on .pf-demo-mech__ic { background: #b8f24e; color: #15181f; }
.pf-demo-mech__ic svg { width: 22px; height: 22px; }
.pf-demo-mech__t { font-size: 14px; font-weight: 600; color: #eef1f6; align-self: end; }
.pf-demo-mech__d { font-size: 12px; color: #9aa3b4; align-self: start; }
.pf-demo-mech__chk { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: #b8f24e; color: #15181f; display: grid; place-items: center; border: 3px solid #1a1e27; }
.pf-demo-mech__chk svg { width: 12px; height: 12px; }

.pf-demo-swatches { display: flex; gap: 10px; margin-bottom: 16px; }
.pf-demo-sw { width: 44px; height: 44px; border-radius: 9px; border: 2px solid transparent; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.pf-demo-sw.on { border-color: #eef1f6; box-shadow: 0 0 0 2px #1a1e27, 0 0 0 4px rgba(184,242,78,.5); }

[data-theme="light"] .pf-demo-step, [data-theme="light"] .pf-demo-mech { background: #f4f5f8; border-color: #e3e6ec; }
[data-theme="light"] .pf-demo-step > span:last-child, [data-theme="light"] .pf-demo-mech__t { color: #161922; }
[data-theme="light"] .pf-demo-mech.on, [data-theme="light"] .pf-demo-step.on { background: #f3fae3; }

/* ============================================================================
   17. TOPBAR OVERFLOW MENU ("⋯") — houses Billing / Agent / Reset / Backup
   ============================================================================ */
.pf-overflow { position: relative; display: inline-flex; flex: 0 0 auto; }
.pf-overflow__btn {
  width: 36px; height: 36px; border-radius: 9px; border: 1px solid #313745;
  background: #20242e; color: #eef1f6; display: grid; place-items: center; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.pf-overflow__btn:hover { border-color: rgba(184,242,78,.55); box-shadow: var(--_glow); }
.pf-overflow__btn svg { width: 17px; height: 17px; }
.pf-overflow__menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 1200;
  display: flex; flex-direction: column; gap: 4px; min-width: 184px; padding: 7px;
  background: #1a1e27; border: 1px solid #313745; border-radius: 12px;
  box-shadow: 0 20px 40px -12px rgba(8,10,14,.7);
}
.pf-overflow__menu[hidden] { display: none; }
.pf-overflow__menu .ghost-btn,
.pf-overflow__menu .primary-btn {
  width: 100% !important; height: 34px !important; justify-content: flex-start !important;
  background: transparent !important; border: none !important; border-radius: 8px !important;
  color: #c2c9d6 !important; font-size: 13px !important; padding: 0 10px !important;
}
.pf-overflow__menu .ghost-btn:hover { background: #20242e !important; color: #eef1f6 !important; box-shadow: none !important; }
[data-theme="light"] .pf-overflow__btn { background: #ffffff; border-color: #e3e6ec; color: #161922; }
[data-theme="light"] .pf-overflow__menu { background: #ffffff; border-color: #e3e6ec; }
[data-theme="light"] .pf-overflow__menu .ghost-btn { color: #424a59 !important; }
[data-theme="light"] .pf-overflow__menu .ghost-btn:hover { background: #f4f5f8 !important; color: #161922 !important; }

/* ============================================================================
   15. LIGHT THEME — flip the structural surfaces (beats the !important darks
   above via the higher-specificity [data-theme="light"] prefix)
   ============================================================================ */
[data-theme="light"] html, [data-theme="light"] body,
html[data-theme="light"], body[data-theme="light"] {
  background:
    radial-gradient(circle at top left, rgba(127,179,21,0.10), transparent 26%),
    radial-gradient(circle at top right, rgba(184,242,78,0.12), transparent 20%),
    #eef1f6 !important;
}
[data-theme="light"] .panel, [data-theme="light"] .topbar, [data-theme="light"] .inspector-card,
[data-theme="light"] .basic-wizard-shell, [data-theme="light"] .basic-wizard-detail,
[data-theme="light"] .basic-callout, [data-theme="light"] .basic-config-card,
[data-theme="light"] .basic-collapsible, [data-theme="light"] .panel-note,
[data-theme="light"] .basic-wizard-helper, [data-theme="light"] .monetization-beta {
  background: #ffffff !important; border-color: #e3e6ec !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 24px -12px rgba(40,44,60,.12) !important;
}
[data-theme="light"] .preview-shell, [data-theme="light"] #panel-workspace-menu {
  background: #f6f7f9 !important; border-color: #e3e6ec !important;
}
[data-theme="light"] .template-card, [data-theme="light"] .project-library-card,
[data-theme="light"] .basic-path-card, [data-theme="light"] .basic-step-chip,
[data-theme="light"] .symbol-item, [data-theme="light"] .plan-opt, [data-theme="light"] .account-badge,
[data-theme="light"] .global-template-card, [data-theme="light"] .workspace-nav,
[data-theme="light"] .field input, [data-theme="light"] .field textarea, [data-theme="light"] .field select,
[data-theme="light"] .workflow-step, [data-theme="light"] .workflow-step-num {
  background: #f4f5f8 !important; border-color: #e3e6ec !important; color: #161922 !important;
}
[data-theme="light"] .workspace-nav-btn { background: #ffffff !important; color: #5a6273 !important; }
[data-theme="light"] .workspace-nav-btn.active { background: #f3fae3 !important; color: #161922 !important; }
[data-theme="light"] body, [data-theme="light"] .field input, [data-theme="light"] .field textarea,
[data-theme="light"] .field select, [data-theme="light"] .workflow-step-copy strong,
[data-theme="light"] .topbar h1, [data-theme="light"] .preview-top h2, [data-theme="light"] .panel-head h2 {
  color: #161922 !important;
}
[data-theme="light"] .field span, [data-theme="light"] .workflow-step-copy small,
[data-theme="light"] .auth-subcopy, [data-theme="light"] .preview-top .eyebrow + h2 { color: #5a6273 !important; }
[data-theme="light"] .ghost-btn, [data-theme="light"] .mode-switch, [data-theme="light"] .lang-switch,
[data-theme="light"] .theme-switch, [data-theme="light"] .mode-btn, [data-theme="light"] .lang-btn,
[data-theme="light"] .theme-btn, [data-theme="light"] .export-target-control {
  background: #ffffff !important; border-color: #e3e6ec !important; color: #161922 !important;
}
[data-theme="light"] .mode-btn.active, [data-theme="light"] .lang-btn.active,
[data-theme="light"] .theme-btn.active { background: #b8f24e !important; color: #1d2a07 !important; }
[data-theme="light"] .primary-btn { color: #1d2a07 !important; }

/* ============================================================
   Coverage patch — leftover platform navy/gold the base skin didn't target
   (these selectors weren't in the design's uploaded snapshot). Flatten to the
   exact Studio slate; recolor remaining gold actives to lime. Literal values so
   they hold regardless of which vars are defined.
   ============================================================ */
.basic-global-templates,
.basic-full-templates-entry,
.symbol-card,
.asset-card,
.asset-actions label,
.asset-actions button,
.workflow-strip,
.workflow-step,
.layout-chip,
.panel-toggle,
.toast,
.field-tooltip-text,
.project-library-limit-banner,
.basic-step-chip-num,
.screenshot-cell-card,
.screenshot-grid-handle-wrap {
  background-image: none !important;
  background-color: #20242e !important;
  border-color: #313745 !important;
}
/* gold actives the base skin missed → lime */
.layout-chip.active,
.theme-btn.active {
  background-image: linear-gradient(180deg, #c8f96a, #a3e02f) !important;
  background-color: #a3e02f !important;
  border-color: rgba(184, 242, 78, 0.55) !important;
  color: #1b2207 !important;
}
/* Studio layout boxes stay TRANSPARENT: the box must show strictly its real
   content (slot grid / offer / HUD preview) over the scene — an opaque slab
   here hid the scene and read as a fake background. Selection is shown by the
   lime border only. */
.layout-box {
  background-image: none !important;
  background-color: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(184, 242, 78, 0.4) !important;
}
.layout-box.active {
  background-image: none !important;
  background-color: rgba(184, 242, 78, 0.07) !important;
  border-color: rgba(184, 242, 78, 0.9) !important;
}
[data-theme="light"] .basic-global-templates,
[data-theme="light"] .basic-full-templates-entry,
[data-theme="light"] .symbol-card,
[data-theme="light"] .asset-card,
[data-theme="light"] .asset-actions label,
[data-theme="light"] .asset-actions button,
[data-theme="light"] .workflow-strip,
[data-theme="light"] .workflow-step,
[data-theme="light"] .layout-chip,
[data-theme="light"] .panel-toggle,
[data-theme="light"] .toast,
[data-theme="light"] .field-tooltip-text,
[data-theme="light"] .project-library-limit-banner,
[data-theme="light"] .basic-step-chip-num,
[data-theme="light"] .screenshot-cell-card {
  background-image: none !important;
  background-color: #f4f5f8 !important;
  border-color: #e3e6ec !important;
  color: #161922 !important;
}

/* ============================================================
   Coverage patch #2 — 5-block-only elements not in the design snapshot:
   block 3 (.basic-wizard-rail, blue-tinted FINAL-4 gradient) and block 5
   (#pfDrawer, hardcoded navy #0d1a2e). Force exact Studio slate.
   ============================================================ */
.basic-wizard-rail,
#pfDrawer,
#pfDrawer .pf-drawer-head,
#pfDrawer .pf-drawer-body,
.pf-chat-dock,
.pf-chat-log,
.pf-chat-setup {
  background-image: none !important;
  background-color: #1a1e27 !important;
}
.basic-wizard-rail,
#pfDrawer { border-color: #313745 !important; }
#pfDrawer .pf-drawer-head { border-bottom-color: #313745 !important; }

[data-theme="light"] .basic-wizard-rail,
[data-theme="light"] #pfDrawer,
[data-theme="light"] #pfDrawer .pf-drawer-head,
[data-theme="light"] #pfDrawer .pf-drawer-body,
[data-theme="light"] .pf-chat-dock,
[data-theme="light"] .pf-chat-log,
[data-theme="light"] .pf-chat-setup {
  background-image: none !important;
  background-color: #fbfbfd !important;
  border-color: #e3e6ec !important;
}

/* coverage patch #3 — small navy spots: export estimate panel, device selector,
   asset thumbnail container */
#exportPreviewPanel,
.export-preview-panel,
.device-preset-control,
.asset-thumb {
  background-image: none !important;
  background-color: #20242e !important;
  border-color: #313745 !important;
}
[data-theme="light"] #exportPreviewPanel,
[data-theme="light"] .export-preview-panel,
[data-theme="light"] .device-preset-control,
[data-theme="light"] .asset-thumb {
  background-color: #f4f5f8 !important;
  border-color: #e3e6ec !important;
  color: #161922 !important;
}

/* coverage patch #4 — version history + autoclone preview panels */
.version-history-panel,
.autoclone-build-preview,
.cocos-build-preview {
  background-image: none !important;
  background-color: #20242e !important;
  border-color: #313745 !important;
}
[data-theme="light"] .version-history-panel,
[data-theme="light"] .autoclone-build-preview,
[data-theme="light"] .cocos-build-preview {
  background-color: #f4f5f8 !important;
  border-color: #e3e6ec !important;
  color: #161922 !important;
}