/* Light Page Theme (Default — Google Cloud Clean Surface + Quartet Accents) */
:root {
  --bg-page: #d4dde8;
  --bg-topbar: rgba(216, 226, 238, 0.96);
  --topbar-text: #16202e;
  --topbar-border: #b6c5da;
  --bg-card: #e6ecf4;
  --bg-subtle: #d9e2ef;
  --ink-900: #16202e;
  --ink-700: #334357;
  --ink-500: #55677f;
  --line: #bccada;
  --line-strong: #aebfd4;
  --brand: var(--gc-blue, #1d5bbf);
  --brand-dark: var(--gc-blue-ink, #164899);
  --brand-soft: var(--gc-blue-soft, rgba(29, 91, 191, 0.12));
  --card-active-bg: #dbe6f6;
  --radius-xl: 18px;
  --radius-lg: 14px;
  --radius-md: 10px;
  --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.07), 0 6px 16px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 14px 34px rgba(15, 23, 42, 0.14), 0 3px 8px rgba(15, 23, 42, 0.07);
}

/* Dark Page Theme (Switches entire page background & panels!) */
body.theme-dark {
  --bg-page: #0d121d;
  --bg-topbar: rgba(17, 24, 39, 0.94);
  --topbar-text: #f8fafc;
  --topbar-border: #263349;
  --bg-card: #151e2e;
  --bg-subtle: #1c273b;
  --ink-900: #f8fafc;
  --ink-700: #d2dbe8;
  --ink-500: #9aa5b4;
  --line: #263349;
  --line-strong: #374967;
  --brand: var(--gc-blue, #8ab4f8);
  --brand-dark: var(--gc-blue-ink, #aecbfa);
  --brand-soft: var(--gc-blue-soft, rgba(138, 180, 248, 0.16));
  --card-active-bg: rgba(66, 133, 244, 0.14);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 18px 42px rgba(0, 0, 0, 0.45);
}

* {
  box-sizing: border-box;
}

html, body {
  overflow-x: clip;
  max-width: 100vw;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background-color: var(--bg-page);
  background-image: var(--gc-page-aura);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--ink-900);
  font-size: 18px;
  line-height: 1.58;
  transition: background-color 0.22s ease, color 0.22s ease;
  -webkit-font-smoothing: antialiased;
}

/* Mobile Floating Slim Live HUD (Hidden on desktop; slides down smoothly on mobile scroll!) */
.mobile-mini-hud {
  display: none;
}

/* Global Header Bar — Focal Brand Touchpoint #1 (Ultra-fine 2.5px Soaring Horizon Line + Official Emblem) */
.studio-topbar {
  background: var(--bg-topbar);
  backdrop-filter: blur(12px);
  color: var(--topbar-text);
  border-bottom: 1px solid var(--topbar-border);
  position: sticky;
  top: 0;
  z-index: 60;
  transition: background-color 0.22s ease;
}

.studio-topbar::before {
  content: "";
  display: block;
  width: 100%;
  height: 2.5px;
  background: var(--f3k-horizon-line);
}

.topbar-inner {
  max-width: 1620px;
  margin: 0 auto;
  padding: 9px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand-cluster {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
}

.brand-cluster::-webkit-scrollbar {
  display: none;
}

.brand-mark {
  background: var(--bg-card);
  color: var(--ink-900);
  border: 1px solid var(--line-strong);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.06em;
  padding: 4px 12px 4px 6px;
  border-radius: 999px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.06);
}

.f3k-emblem-icon {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: block;
  flex-shrink: 0;
}

.tair-wordmark-icon {
  height: 18px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

body.theme-dark .tair-wordmark-icon {
  filter: brightness(1.25);
}

.brand-divider {
  width: 1px;
  height: 13px;
  background: var(--line-strong);
  display: inline-block;
  flex-shrink: 0;
}

.brand-domain {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.07em;
  color: var(--ink-700);
}

.model-tabs {
  display: flex;
  align-items: center;
  gap: 5px;
}

.model-tab {
  border: 1px solid var(--line-strong);
  background: var(--bg-subtle);
  color: var(--ink-700);
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.model-tab.active {
  background: var(--gc-blue-soft);
  color: var(--gc-blue-ink);
  border-color: rgba(26, 115, 232, 0.45);
  font-weight: 800;
}

body.theme-dark .model-tab.active {
  background: rgba(138, 180, 248, 0.16);
  color: #e8f0fe;
  border-color: rgba(138, 180, 248, 0.48);
}

.model-tab.slot-preview {
  opacity: 0.78;
}

.plugin-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #cbd5e1;
  display: inline-block;
  flex-shrink: 0;
}

body.theme-dark .plugin-dot {
  background: #475569;
}

.plugin-dot.active-dot {
  background: var(--f3k-green, #3ea049);
  box-shadow: 0 0 0 2px rgba(62, 160, 73, 0.22);
}

body.theme-dark .plugin-dot.active-dot {
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.28), 0 0 6px rgba(74, 222, 128, 0.45);
}

body.theme-dark .model-tab.active .plugin-dot.active-dot {
  background: #4ade80;
  box-shadow: 0 0 0 2.5px rgba(74, 222, 128, 0.36), 0 0 8px rgba(74, 222, 128, 0.72);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.top-btn {
  background: var(--bg-subtle);
  border: 1px solid var(--line-strong);
  color: var(--ink-700);
  padding: 5px 11px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.top-btn:hover {
  border-color: var(--brand);
  color: var(--ink-900);
}

.top-btn.highlight {
  background: var(--bg-card);
  border-color: var(--line-strong);
  color: var(--ink-700);
}

body.theme-dark .top-btn.highlight {
  background: var(--bg-subtle);
  color: var(--ink-700);
}

/* Main Split Workspace */
.studio-shell {
  max-width: 1620px;
  margin: 0 auto;
  padding: 18px 22px 60px;
  display: grid;
  grid-template-columns: minmax(0, 56%) minmax(0, 44%);
  gap: 22px;
  align-items: start;
}

.studio-shell > * {
  min-width: 0;
  max-width: 100%;
}

/* Left Sticky Vector Stage (Desktop) */
.stage-column {
  position: sticky;
  top: 64px;
}

.stage-card {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line-strong);
  background: var(--bg-card);
  position: relative;
}

.stage-header {
  padding: 12px 18px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.stage-title-wrap h1 {
  margin: 0;
  font-size: 23px;
  font-weight: 900;
  color: var(--ink-900);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.stage-badge {
  font-size: 14px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-dark);
}

.stage-subtitle {
  width: 100%;
  margin: 0;
  font-size: 15px;
  color: var(--ink-500);
  font-weight: 600;
}

.stage-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.stage-pill {
  border: 1.5px solid var(--line-strong);
  background: var(--bg-subtle);
  color: var(--ink-700);
  font-size: 14px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.stage-pill.active {
  background: var(--gc-blue);
  color: #ffffff;
  border-color: var(--gc-blue);
}

#btnScGrass.stage-pill.active {
  background: #1e8e3e;
  border-color: #1e8e3e;
  color: #ffffff;
}

body.theme-dark .stage-pill.active {
  color: #0f172a;
}

body.theme-dark #btnScGrass.stage-pill.active {
  background: #34a853;
  border-color: #34a853;
  color: #09130c;
}

/* Outdoor Scene Backgrounds */
.svg-viewport, .mini-hud-svg {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.svg-viewport {
  padding: 8px 12px 12px;
}

.scene-grass {
  background: linear-gradient(180deg, #4b8b34 0%, #5da142 48%, #4f9136 100%);
}

.scene-sky {
  background: linear-gradient(180deg, #1d72d2 0%, #4da2f2 55%, #9bd2fc 100%);
}

.scene-split {
  background: linear-gradient(180deg, #53963a 0%, #5ea344 48%, #2980df 50%, #7fc2fa 100%);
}

.scene-white {
  background: #f8fafc;
}

.svg-viewport svg {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.2s ease;
  transform-origin: center center;
}

.svg-viewport.zoomed svg {
  transform: scale(1.36);
}

/* Stage Footer */
.stage-footer {
  background: var(--bg-card);
  padding: 9px 14px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.code-readout {
  font-family: Consolas, "JetBrains Mono", monospace;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--ink-900);
  background: var(--bg-subtle);
  border: 1px solid var(--line-strong);
  padding: 5px 9px;
  border-radius: 7px;
  flex: 1 1 380px;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
  overflow: visible;
}

.stage-action-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.action-btn {
  border: 1.5px solid var(--line-strong);
  background: var(--bg-subtle);
  color: var(--ink-900);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.action-btn.primary-ghost {
  background: var(--gc-blue);
  border-color: var(--gc-blue);
  color: #ffffff;
}

body.theme-dark .action-btn.primary-ghost {
  color: #0f172a;
}

/* Right Controls Column */
.controls-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.step-section {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 15px 17px;
  box-shadow: var(--shadow-sm);
  position: relative;
}

.step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.step-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.step-num {
  font-family: Consolas, monospace;
  font-size: 14px;
  font-weight: 900;
  color: var(--brand-dark);
  background: var(--brand-soft);
  padding: 2px 7px;
  border-radius: 6px;
}

.step-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink-900);
}

.step-current {
  font-size: 15px;
  font-weight: 800;
  color: var(--brand-dark);
}

.step-hint {
  margin: -4px 0 10px;
  font-size: 14px;
  color: var(--ink-500);
}

.smart-tip {
  margin-top: 9px;
  padding: 8px 11px;
  border-radius: 8px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  color: #92400e;
  font-size: 14px;
  font-weight: 600;
  display: none;
}

.smart-tip.visible {
  display: block;
}

/* Series Filter Chips */
.series-filter {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.filter-chip {
  border: 1.5px solid var(--line-strong);
  background: var(--bg-subtle);
  color: var(--ink-700);
  font-size: 14px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  cursor: pointer;
}

.filter-chip.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

body.theme-dark .filter-chip.active {
  color: #0f172a;
}

/* Option Grids */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.grid-swatches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.grid-wings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

/* Choice Cards */
.opt-card {
  border: 2px solid var(--line);
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 9px 11px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--ink-900);
  min-width: 0;
  overflow: hidden;
}

.opt-card:hover:not(.disabled) {
  border-color: var(--brand);
}

.opt-card.active {
  border-color: var(--brand);
  background: var(--card-active-bg);
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.16);
}

.opt-card.disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

.opt-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.opt-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink-900);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sel-check-badge {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--brand);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(2, 132, 199, 0.35);
}

.sel-check-badge svg {
  width: 11px;
  height: 11px;
  display: block;
}

body.theme-dark .sel-check-badge {
  background: #38bdf8;
  color: #0f172a;
}

.step-carbon-panel .sel-check-badge,
body.theme-dark .step-carbon-panel .sel-check-badge {
  background: #38bdf8;
  color: #0f172a;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.55);
}

.grid-swatches .sel-check-badge {
  width: 15px;
  height: 15px;
}

.grid-swatches .sel-check-badge svg {
  width: 9.5px;
  height: 9.5px;
}

.opt-price-tag {
  font-size: 14px;
  font-weight: 800;
  color: var(--gc-blue-ink);
  background: var(--gc-blue-soft);
  border: 1px solid var(--gc-blue-border);
  padding: 1px 6px;
  border-radius: 5px;
  white-space: nowrap;
}

.opt-price-tag.included {
  color: var(--gc-green-ink);
  background: var(--gc-green-soft);
  border: 1px solid var(--gc-green-border);
}

.opt-note {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-500);
  line-height: 1.35;
}

.grid-swatches .opt-top-row {
  flex-wrap: wrap;
  row-gap: 1px;
}

.grid-swatches .opt-note {
  font-size: 13px;
}

/* Pure White rounded rectangle box behind mini wings */
.mini-svg-box {
  width: 100%;
  background: #dbe4ef !important;
  border: 1.5px solid #bac9de;
  border-radius: 7px;
  padding: 5px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mini-svg-box svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Enlarged, High-Clarity Tail Illustrations in Step 06 (HOR & Detachable FIN) */
.mini-svg-box.tail-hor-preview {
  padding: 9px 12px;
  min-height: 76px;
}

.mini-svg-box.tail-hor-preview svg {
  width: 100%;
  max-width: 244px;
  height: auto;
  max-height: 66px;
}

.mini-svg-box.tail-hor-swatch {
  padding: 5px 6px;
  min-height: 40px;
}

.mini-svg-box.tail-hor-swatch svg {
  width: 100%;
  height: auto;
  max-height: 34px;
}

.mini-svg-box.tail-fin-preview {
  padding: 8px 12px;
  min-height: 114px;
}

.mini-svg-box.tail-fin-preview svg {
  width: auto;
  height: 98px;
  max-width: 100%;
}

.mini-svg-box.tail-fin-swatch {
  padding: 5px 6px;
  min-height: 64px;
}

.mini-svg-box.tail-fin-swatch svg {
  width: auto;
  height: 54px;
  max-width: 100%;
}

/* Layup Carbon Depth Swatch Box in Step 01 */
.layup-carbon-box {
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16);
}

.layup-carbon-box svg {
  width: 100%;
  height: auto;
  display: block;
}

.throw-svg-box {
  padding: 3px 5px;
}

#layupGrid .opt-top-row {
  flex-wrap: wrap;
  row-gap: 4px;
}

#layupGrid .opt-title {
  font-size: 14.5px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Real CarboLine Carbon Rounded Preview Box for Steps 04 & 07 */
.carbon-preview-box {
  width: 100%;
  background-color: #161b24;
  background-image: linear-gradient(155deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.01) 46%, rgba(0, 0, 0, 0.26) 100%), var(--carbon-tex);
  background-size: 100% 100%, 104px 104px;
  border: 1.5px solid #334155;
  border-radius: 7px;
  padding: 6px 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.14);
}

.carbon-preview-box svg {
  width: 100%;
  height: auto;
  max-height: 24px;
  display: block;
}

.swatch-bar {
  width: 100%;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid #cbd5e1;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.14);
}

body.theme-dark .swatch-bar {
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* ============================================================================
   Step 03 Expanded Full-Panel CarboLine Carbon Surface
   Bright text inside + Invariant when switching global Light/Dark page theme!
   ============================================================================ */
.step-section.step-carbon-panel,
body.theme-dark .step-section.step-carbon-panel {
  background-color: #141922;
  background-image:
    linear-gradient(160deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.01) 42%, rgba(0, 0, 0, 0.34) 100%),
    var(--carbon-tex);
  background-size: 100% 100%, 156px 156px;
  background-position: top left, top left;
  background-repeat: no-repeat, repeat;
  border: 1.5px solid #334155;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.20), inset 0 1px 1px rgba(255, 255, 255, 0.14);
  color: #f8fafc;
}

.step-carbon-panel .step-num,
body.theme-dark .step-carbon-panel .step-num {
  background: rgba(56, 189, 248, 0.18);
  color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.38);
}

.step-carbon-panel .step-head h2,
body.theme-dark .step-carbon-panel .step-head h2 {
  color: #f8fafc;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}

.step-carbon-panel .step-current,
body.theme-dark .step-carbon-panel .step-current {
  color: #38bdf8;
}

.step-carbon-panel .opt-card,
body.theme-dark .step-carbon-panel .opt-card {
  background-color: rgba(9, 13, 22, 0.44);
  border: 1.5px solid rgba(148, 163, 184, 0.34);
  color: #f8fafc;
  padding: 10px 11px;
  gap: 7px;
  backdrop-filter: blur(1px);
}

.step-carbon-panel .opt-card:hover:not(.disabled),
body.theme-dark .step-carbon-panel .opt-card:hover:not(.disabled) {
  border-color: #7dd3fc;
  background-color: rgba(15, 23, 42, 0.58);
}

.step-carbon-panel .opt-card.active,
body.theme-dark .step-carbon-panel .opt-card.active {
  border-color: #38bdf8;
  background-color: rgba(2, 132, 199, 0.24);
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.30);
}

.step-carbon-panel .opt-title,
body.theme-dark .step-carbon-panel .opt-title {
  color: #f8fafc;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

.step-carbon-panel .opt-note,
body.theme-dark .step-carbon-panel .opt-note {
  color: #e2e8f0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

.step-carbon-panel .opt-price-tag,
body.theme-dark .step-carbon-panel .opt-price-tag {
  background: rgba(2, 132, 199, 0.38);
  color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.45);
}

.step-carbon-panel .opt-price-tag.included,
body.theme-dark .step-carbon-panel .opt-price-tag.included {
  background: rgba(255, 255, 255, 0.14);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.20);
}

.step-carbon-panel .swatch-bar,
body.theme-dark .step-carbon-panel .swatch-bar {
  height: 20px;
  border-radius: 5px;
  border: 1.2px solid rgba(255, 255, 255, 0.58);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.65);
}

.step-carbon-panel .smart-tip,
body.theme-dark .step-carbon-panel .smart-tip {
  background: rgba(120, 53, 15, 0.78);
  border-color: #fbbf24;
  color: #fef3c7;
}

/* Step 03 Dual Separate Mode Boxes (Active Full-Color vs Inactive Pure Grayscale!) */
.step03-dual-boxes {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.mode-group-box {
  border-radius: 11px;
  padding: 10px 11px 11px;
  border: 2px solid rgba(148, 163, 184, 0.28);
  background: rgba(9, 13, 22, 0.52);
  transition: filter 0.2s ease, opacity 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.mode-group-box.is-active {
  border-color: #38bdf8;
  background: rgba(12, 22, 38, 0.74);
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.22), 0 8px 20px rgba(0, 0, 0, 0.35);
}

.mode-group-box.is-inactive {
  filter: grayscale(100%);
  opacity: 0.44;
  border-style: dashed;
  border-color: rgba(148, 163, 184, 0.36);
  background: rgba(9, 13, 22, 0.36);
}

.mode-group-box.is-inactive:hover {
  opacity: 0.68;
}

.mode-group-box.is-inactive .opt-card:hover {
  filter: none;
  opacity: 1;
}

.mode-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  cursor: pointer;
}

.mode-group-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.mode-radio-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mode-group-box.is-active .mode-radio-dot {
  border-color: #38bdf8;
  background: #0284c7;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.65);
}

.mode-group-box.is-active .mode-radio-dot::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffffff;
}

.mode-group-title {
  font-size: 16px;
  font-weight: 900;
  color: #f8fafc;
}

.mode-state-pill {
  font-size: 13px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.22);
  color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.45);
}

.mode-group-box.is-inactive .mode-state-pill {
  background: rgba(148, 163, 184, 0.16);
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, 0.3);
}

/* Unselected cards inside the active Step 03 box keep true vivid color (no grayscale) */
.mode-group-box.is-active .opt-card:not(.active) {
  filter: none;
  opacity: 0.94;
}

.mode-group-box.is-active .opt-card:not(.active):hover {
  filter: none;
  opacity: 1;
}

.mode-group-box.is-active .opt-card.active {
  border-color: #38bdf8;
  background-color: rgba(2, 132, 199, 0.34);
  box-shadow: 0 0 0 2px #38bdf8, 0 4px 12px rgba(2, 132, 199, 0.35);
}

/* Step 03 Gradient Difficulty Tiers (Mono +¥50 -> Dual +¥100 -> Multi +¥200) */
.grad-tiers-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.grad-tier-block {
  background: rgba(15, 23, 42, 0.42);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 9px;
  padding: 8px 9px 9px;
}

.grad-tier-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 7px;
}

.grad-tier-title {
  font-size: 14px;
  font-weight: 800;
  color: #e2e8f0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.grad-tier-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38bdf8;
  display: inline-block;
  flex-shrink: 0;
}

.grad-tier-dot.easy {
  background: #34a853;
  box-shadow: 0 0 6px rgba(52, 168, 83, 0.65);
}

.grad-tier-dot.mid {
  background: #fbbc04;
  box-shadow: 0 0 6px rgba(251, 188, 4, 0.65);
}

.grad-tier-dot.pro {
  background: #ea4335;
  box-shadow: 0 0 6px rgba(234, 67, 53, 0.65);
}

/* Custom Color Sub-Panel for Step 04 (Bottom Surface) & Step 05 (FG Tail) */
.custom-color-subbox {
  background: var(--bg-subtle);
  border: 1.5px solid var(--line-strong);
  border-radius: 11px;
  padding: 9px 11px 10px;
}

.subbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.subbox-default-btn {
  border: 1.5px solid var(--line-strong);
  background: var(--bg-card);
  color: var(--ink-700);
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.subbox-default-btn:hover {
  border-color: var(--brand);
}

.subbox-default-btn.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #ffffff;
}

body.theme-dark .subbox-default-btn.active {
  color: #0f172a;
}

.subbox-swatch-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid rgba(15, 23, 42, 0.45);
  display: inline-block;
  flex-shrink: 0;
}

.subbox-label {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-700);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Keep all color swatches vivid & crystal clear (never grayscaled!) */
.custom-color-subbox .grid-swatches .opt-card {
  filter: none;
  opacity: 1;
}

/* Custom Name Input (Independent Left / Right Aileron Cards · +¥100 per side) */
.dual-aileron-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

@media (max-width: 560px) {
  .dual-aileron-cards {
    grid-template-columns: 1fr;
  }
}

.aileron-side-card {
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.aileron-side-card:hover {
  border-color: var(--brand);
}

.aileron-side-card.active {
  border-color: var(--brand);
  background: var(--card-active-bg);
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);
}

.aileron-card-head {
  padding: 10px 11px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
}

.aileron-side-card.active .addon-check {
  background: #0284c7;
  border-color: #0284c7;
}

.aileron-card-input-wrap {
  padding: 8px 10px 10px;
  border-top: 1px dashed var(--line-strong);
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  gap: 7px;
}

.custom-name-color-panel {
  margin-top: 9px;
  border-top: 2px solid var(--brand);
  border-radius: var(--radius-md);
}

.aileron-auto-clear-banner {
  background: rgba(2, 132, 199, 0.10);
  border: 1.5px solid rgba(2, 132, 199, 0.35);
  color: var(--ink-800, #1e293b);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

body.theme-dark .aileron-auto-clear-banner {
  background: rgba(56, 189, 248, 0.14);
  border-color: rgba(56, 189, 248, 0.42);
  color: #e0f2fe;
}

.dual-name-inputs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}

.aileron-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.aileron-side-tag {
  font-size: 14px;
  font-weight: 800;
  color: #0369a1;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  border-radius: 7px;
  padding: 7px 8px;
  white-space: nowrap;
  min-width: 62px;
  text-align: center;
  flex-shrink: 0;
}

body.theme-dark .aileron-side-tag {
  color: #0f172a;
  background: #38bdf8;
  border-color: #38bdf8;
}

.pilot-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 2px solid var(--line-strong);
  background: var(--bg-card);
  color: var(--ink-900);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pilot-input:focus {
  outline: none;
  border-color: var(--brand);
}

/* Addon Check Cards */
.addon-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.addon-card {
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  background: var(--bg-card);
}

.addon-card.active {
  border-color: var(--brand);
  background: var(--card-active-bg);
}

.addon-check {
  width: 19px;
  height: 19px;
  border-radius: 5px;
  border: 2px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  margin-top: 2px;
  flex-shrink: 0;
}

.addon-card.active .addon-check {
  background: #0284c7;
  border-color: #0284c7;
}

/* Step 07 Pro Installation Servo Sub-Options Panel */
.addon-item-wrap {
  display: flex;
  flex-direction: column;
}

.addon-card.has-subpanel.active {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-width: 1px;
}

.addon-Collapsed-hint {
  margin-top: 5px;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-dark);
  background: var(--brand-soft);
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
}

.install-servo-panel {
  border: 2px solid var(--brand);
  border-top: none;
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  background: var(--bg-subtle);
  padding: 11px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.servo-panel-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line-strong);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-700);
}

.servo-panel-total {
  font-size: 14px;
  font-weight: 900;
  color: #0369a1;
  background: #e0f2fe;
  padding: 2px 9px;
  border-radius: 999px;
}

body.theme-dark .servo-panel-total {
  color: #0f172a;
  background: #38bdf8;
}

.servo-group-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.servo-group-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-900);
  display: flex;
  align-items: center;
  gap: 6px;
}

.servo-group-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  display: inline-block;
}

.servo-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.servo-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.servo-opt-btn {
  border: 1.5px solid var(--line-strong);
  background: var(--bg-card);
  color: var(--ink-900);
  border-radius: 8px;
  padding: 8px 9px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  transition: all 0.14s ease;
  min-width: 0;
}

.servo-opt-btn:hover {
  border-color: var(--brand);
}

.servo-opt-btn.active {
  border-color: var(--brand);
  background: var(--card-active-bg);
  box-shadow: 0 0 0 1.5px var(--brand);
}

.servo-opt-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink-900);
  line-height: 1.25;
  white-space: nowrap;
}

.servo-opt-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  flex-wrap: nowrap;
}

.servo-opt-price-row .opt-price-tag {
  font-size: 13px;
  padding: 1px 6px;
  flex-shrink: 0;
  white-space: nowrap;
}

.servo-opt-sub {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

@media (max-width: 640px) {
  .servo-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* Designated Coupon Section & Full-Payment Quote Dock (Calm, Non-Intrusive Styling) */
.coupon-section {
  border: 1px dashed var(--line-strong);
  background: var(--bg-card);
}

.coupon-apply-btn {
  border: none;
  background: #1e8e3e;
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  padding: 9px 16px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color 0.15s ease;
}

.coupon-apply-btn:hover {
  background: #137333;
}

body.theme-dark .coupon-apply-btn {
  background: #34a853;
  color: #07130a;
}

.coupon-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.coupon-input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border: 1.8px solid var(--line-strong);
  background: var(--bg-subtle);
  color: var(--ink-900);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.coupon-input:focus {
  outline: none;
  border-color: #34a853;
  background: var(--bg-card);
}

.coupon-feedback {
  margin-top: 7px;
  font-size: 14px;
  font-weight: 700;
  display: none;
}

.coupon-feedback.visible {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 7px;
}

.coupon-feedback.ok {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.45);
  color: #047857;
}

body.theme-dark .coupon-feedback.ok {
  color: #6ee7b7;
}

.coupon-feedback.err {
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #b91c1c;
}

body.theme-dark .coupon-feedback.err {
  color: #fca5a5;
}

.coupon-remove-link {
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-size: 14px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
}

/* Quote & Checkout Bar (100% Full Payment — Serene Deep Horizon Dock, Focal Touchpoint #2 CTA) */
.quote-dock {
  position: sticky;
  bottom: 12px;
  background: #151c28;
  color: #f8fafc;
  border-radius: var(--radius-lg);
  padding: 11px 15px 10px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.24);
  border: 1px solid rgba(148, 163, 184, 0.24);
  z-index: 45;
  overflow: hidden;
}

.quote-dock:not(.expanded) .quote-breakdown {
  display: none;
}

.quote-dock:not(.coupon-open) .dock-coupon-drawer {
  display: none;
}

.dock-coupon-drawer {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.dock-coupon-input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(148, 163, 184, 0.4);
  color: #ffffff;
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dock-coupon-input::placeholder {
  color: #94a3b8;
  text-transform: none;
  font-weight: 600;
}

.dock-coupon-apply {
  border: none;
  background: #38bdf8;
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
  padding: 6px 13px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
}

.dock-coupon-clear {
  border: 1px solid rgba(248, 113, 113, 0.6);
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
  font-size: 14px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
}

.price-left-cluster {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.quote-dock:not(.expanded) .price-stack {
  flex-direction: row;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}

.quote-dock:not(.expanded) .price-total-sub {
  margin-top: 0;
  color: #94a3b8;
}

.price-orig-strike {
  font-size: 15px;
  font-weight: 700;
  color: #94a3b8;
  text-decoration: line-through;
  display: none;
}

.price-orig-strike.visible {
  display: inline;
}

.dock-coupon-pill {
  border: 1px solid rgba(56, 189, 248, 0.48);
  background: rgba(56, 189, 248, 0.14);
  color: #7dd3fc;
  font-size: 14px;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.dock-coupon-pill.has-coupon {
  border-color: rgba(52, 211, 153, 0.65);
  background: rgba(16, 185, 129, 0.22);
  color: #6ee7b7;
}

/* Sandbox Coupon Manager Table */
.sb-coupon-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1.5px dashed #cbd5e1;
}

.sb-coupon-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
  font-size: 15px;
  color: #0f172a;
}

.sb-add-coupon-btn {
  border: 1.5px solid #0284c7;
  background: #f0f9ff;
  color: #0369a1;
  font-size: 14px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 7px;
  cursor: pointer;
}

.sb-coupon-hint {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 9px;
}

.sb-coupon-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.sb-coupon-row {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 0.8fr 1.6fr auto;
  gap: 6px;
  align-items: center;
}

.sb-coupon-row input,
.sb-coupon-row select {
  width: 100%;
  padding: 6px 8px;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  background: #ffffff;
}

.sb-coupon-del {
  border: 1px solid #fca5a5;
  background: #fef2f2;
  color: #dc2626;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}

.stage-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}

.stage-collapse-btn {
  display: none;
  border: 1.5px solid var(--line-strong);
  background: var(--bg-subtle);
  color: var(--ink-700);
  font-size: 14px;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.stage-card.is-collapsed .stage-controls,
.stage-card.is-collapsed .svg-viewport,
.stage-card.is-collapsed .stage-footer {
  display: none;
}

.paymode-switch {
  display: flex;
  gap: 8px;
  margin-bottom: 9px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.paymode-pill {
  flex: 1;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #cbd5e1;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.paymode-pill.active {
  background: #0284c7;
  border-color: #38bdf8;
  color: #ffffff;
}

.quote-main-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.price-stack {
  display: flex;
  flex-direction: column;
}

.price-inline-wrap {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.price-due-label {
  font-size: 14px;
  font-weight: 700;
  color: #94a3b8;
}

.price-due-value {
  font-size: 28px;
  font-weight: 900;
  color: #8ab4f8;
  line-height: 1.1;
}

.price-total-sub {
  font-size: 14px;
  font-weight: 600;
  color: #e2e8f0;
  margin-top: 2px;
}

.quote-cta-cluster {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.add-cart-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.09);
  border: 1.5px solid rgba(138, 180, 248, 0.45);
  color: #e2e8f0;
  font-size: 15px;
  font-weight: 800;
  padding: 10px 15px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.add-cart-cta:hover {
  background: rgba(138, 180, 248, 0.18);
  border-color: #8ab4f8;
  color: #ffffff;
}

.checkout-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #4285f4, #1a73e8);
  border: none;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  padding: 11px 20px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(26, 115, 232, 0.42);
  white-space: nowrap;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.stage-pill, .action-btn, .showcase-pill-link, .dock-coupon-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.checkout-cta:hover {
  box-shadow: 0 6px 18px rgba(26, 115, 232, 0.56);
}

.quote-breakdown {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.16);
  font-size: 14px;
  color: #cbd5e1;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
}

/* Modals */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(9, 13, 24, 0.72);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 120;
}

.modal-backdrop.open {
  display: flex;
}

.modal-panel {
  background: #ffffff;
  color: #0f172a;
  width: min(680px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
}

.close-btn {
  border: none;
  background: #f1f5f9;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 21px;
  cursor: pointer;
}

.pay-gateway-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0;
}

.gateway-box {
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px;
  font-weight: 700;
  font-size: 15px;
}

.gateway-box.wx {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.08);
}

.gateway-box.ali {
  border-color: #0284c7;
  background: rgba(2, 132, 199, 0.07);
}

.sandbox-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sandbox-field label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 4px;
}

.sandbox-field input {
  width: 100%;
  padding: 7px 10px;
  border: 1.5px solid #cbd5e1;
  border-radius: 7px;
  font-size: 16px;
  font-weight: 700;
}

.toast-banner {
  position: fixed;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #0f172a;
  color: #fff;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
  z-index: 200;
  white-space: nowrap;
}

.toast-banner.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================================
   ULTRA-MAXIMIZED MOBILE & NARROW WINDOW VIEWPORT (<= 1024px)
    Frees up >82% of screen height for effortless thumb selection!
   ============================================================================ */
@media (max-width: 1024px) {
  /* 1. Topbar is NOT sticky on mobile -> scrolls out of the way immediately! */
  .studio-topbar {
    position: relative;
  }

  .topbar-inner {
    padding: 6px 10px;
    gap: 6px;
  }

  .brand-mark {
    font-size: 14px;
    padding: 4px 7px;
  }

  .model-tab {
    padding: 4px 8px;
    font-size: 14px;
  }

  .top-btn {
    padding: 4px 8px;
    font-size: 14px;
  }

  .stage-collapse-btn {
    display: inline-flex;
    align-items: center;
  }

  /* 2. Main Stage sits naturally at top of page (not giant sticky!),
        while Ultra-Slim 78px Floating Mini HUD appears at top:0 when scrolling! */
  .stage-column {
    position: relative;
    top: 0;
  }

  .mobile-mini-hud {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 82px;
    background: var(--bg-card);
    border-bottom: 2px solid var(--brand);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.22);
    z-index: 90;
    transform: translateY(-105%);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 4px 6px;
    gap: 5px;
  }

  .mobile-mini-hud.visible {
    transform: translateY(0);
  }

  .mini-hud-svg {
    flex: 1;
    height: 72px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .mini-hud-svg svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .mini-hud-tools {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
  }

  .hud-icon-btn {
    border: 1px solid var(--line-strong);
    background: var(--bg-subtle);
    color: var(--ink-900);
    font-size: 13px;
    font-weight: 800;
    padding: 4px 7px;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1.1;
  }

  /* Main Workspace Compact Padding */
  .studio-shell {
    grid-template-columns: 1fr;
    padding: 8px 8px 66px;
    gap: 10px;
  }

  .stage-header {
    padding: 8px 10px;
    gap: 6px;
  }

  .stage-title-wrap h1 {
    font-size: 18px;
  }

  .stage-title-row {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .stage-subtitle {
    display: block;
    width: 100%;
    font-size: 14px;
    line-height: 1.35;
    margin: 0;
    color: var(--ink-700);
  }

  .stage-controls {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 5px;
  }

  .stage-controls::-webkit-scrollbar {
    display: none;
  }

  .stage-pill {
    font-size: 14px;
    padding: 4px 8px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .svg-viewport {
    padding: 4px 6px 6px;
  }

  .stage-footer {
    padding: 7px 10px;
    gap: 6px;
  }

  .code-readout {
    font-size: 13px;
    line-height: 1.38;
    padding: 4px 7px;
    flex: 1 1 100%;
    width: 100%;
  }

  .action-btn {
    padding: 5px 9px;
    font-size: 14px;
  }

  /* 3. High-density 2-column & 3-column mobile cards so 6-8 wings fit per screen! */
  .step-section {
    padding: 11px 10px;
  }

  .step-head {
    margin-bottom: 8px;
  }

  .step-head h2 {
    font-size: 18px;
  }

  .step-hint {
    font-size: 14px;
    margin-bottom: 8px;
  }

  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .grid-2,
  .grid-wings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .grid-swatches {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .grid-swatches .opt-card {
    padding: 6px 6px;
  }

  .grid-swatches .opt-top-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
  }

  .grid-swatches .opt-title {
    font-size: 14px;
    line-height: 1.15;
  }

  .grid-swatches .opt-note {
    font-size: 13px;
    line-height: 1.15;
    white-space: nowrap;
  }

  .opt-card {
    padding: 7px 8px;
    gap: 4px;
  }

  .opt-title {
    font-size: 15px;
  }

  .opt-note {
    font-size: 13px;
    line-height: 1.25;
  }

  .opt-price-tag {
    font-size: 13px;
    padding: 1px 4px;
  }

  .mini-svg-box {
    padding: 3px 4px;
    border-radius: 6px;
  }

  .mini-svg-box.tail-hor-preview {
    padding: 6px 8px;
    min-height: 58px;
  }

  .mini-svg-box.tail-hor-preview svg {
    max-height: 50px;
  }

  .mini-svg-box.tail-fin-preview {
    padding: 6px 8px;
    min-height: 92px;
  }

  .mini-svg-box.tail-fin-preview svg {
    height: 78px;
  }

  .mini-svg-box.tail-fin-swatch {
    min-height: 52px;
  }

  .mini-svg-box.tail-fin-swatch svg {
    height: 44px;
  }

  .carbon-preview-box {
    padding: 5px 6px;
    min-height: 26px;
    border-radius: 6px;
  }

  .carbon-preview-box svg {
    max-height: 20px;
  }

  .swatch-bar {
    height: 14px;
  }

  .step-carbon-panel .opt-card,
  body.theme-dark .step-carbon-panel .opt-card {
    padding: 7px 7px;
    gap: 5px;
  }

  .step-carbon-panel .swatch-bar,
  body.theme-dark .step-carbon-panel .swatch-bar {
    height: 16px;
  }

  /* 4. Ultra-Slim 48px Single-Line Bottom Payment Bar! */
  .quote-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 14px 14px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding: 7px 12px;
    box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.25);
  }

  .quote-dock:not(.expanded) .paymode-switch,
  .quote-dock:not(.expanded) .quote-breakdown {
    display: none;
  }

  .quote-dock:not(.expanded) .price-stack {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
  }

  .price-due-label {
    font-size: 13px;
  }

  .price-due-value {
    font-size: 21px;
  }

  .price-total-sub {
    font-size: 13px;
    margin-top: 0;
    color: #94a3b8;
  }

  .checkout-cta {
    font-size: 15px;
    padding: 8px 14px;
    border-radius: 8px;
  }

  .pay-gateway-grid,
  .sandbox-grid {
    grid-template-columns: 1fr;
  }

  .sb-coupon-row {
    grid-template-columns: 1fr 1fr;
    background: #f8fafc;
    padding: 7px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
  }

  .dock-coupon-pill {
    font-size: 13px;
    padding: 3px 7px;
  }

  body.stage-collapsed-mode .studio-shell {
    padding-top: 88px;
  }
}

@media (max-width: 720px) {
  .model-tab.slot-preview {
    display: none;
  }
}

/* ============================================================================
   v6.0 Multi-Model Tabs, Showcase Link & Tair mini 3 Carbon Subpanels
   (Strictly follows 96% Serene Neutrals / 4% Focal Blue Accent Rule)
   ============================================================================ */
.model-tab .new-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  margin-left: 3px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
  background: rgba(26, 115, 232, 0.12);
  color: #1a73e8;
  border: 1px solid rgba(26, 115, 232, 0.25);
}

.model-tab.active .new-pill {
  background: #1a73e8;
  color: #ffffff;
  border-color: #1a73e8;
}

.stage-title-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.showcase-pill-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: #1a73e8;
  background: rgba(26, 115, 232, 0.08);
  border: 1px solid rgba(26, 115, 232, 0.24);
  text-decoration: none;
  transition: all 0.18s ease;
}

.showcase-pill-link:hover {
  background: #1a73e8;
  color: #ffffff;
  border-color: #1a73e8;
}

body.theme-dark .showcase-pill-link {
  color: #7dd3fc;
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.32);
}

#layupGrid.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.carbon-subpanel {
  margin-top: 11px;
  padding: 11px 12px;
  border-radius: 11px;
  background: rgba(9, 13, 22, 0.56);
  border: 1.5px solid rgba(148, 163, 184, 0.30);
}

.carbon-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}

.carbon-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 800;
  color: #f8fafc;
}

.logo-variant-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.logo-variant-box {
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  border-radius: 7px;
  background: rgba(6, 9, 15, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-variant-box svg {
  width: 100%;
  max-width: 132px;
  height: 30px;
  display: block;
}

@media (max-width: 640px) {
  .logo-variant-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .logo-variant-box svg {
    max-width: 108px;
    height: 24px;
  }
}


/* ============================================================================
   v7.8 1:1 Paint-Mask Cutting DXF Export & Admin Console Entry Styles
   ============================================================================ */
.top-btn.admin-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-color: rgba(2, 132, 199, 0.35);
  background: rgba(2, 132, 199, 0.08);
  color: #0369a1;
  font-weight: 800;
}

.top-btn.admin-link:hover {
  background: #0284c7;
  border-color: #0284c7;
  color: #ffffff;
}

body.theme-dark .top-btn.admin-link {
  color: #7dd3fc;
  background: rgba(56, 189, 248, 0.14);
  border-color: rgba(56, 189, 248, 0.36);
}

.order-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #0284c7;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.top-btn.admin-link:hover .order-count-pill {
  background: #ffffff;
  color: #0284c7;
}

.action-btn.dxf-ghost {
  border-color: #0f766e;
  background: rgba(15, 118, 110, 0.08);
  color: #0f766e;
  font-weight: 800;
}

.action-btn.dxf-ghost:hover {
  background: #0f766e;
  color: #ffffff;
}

body.theme-dark .action-btn.dxf-ghost {
  color: #5eead4;
  border-color: rgba(94, 234, 212, 0.42);
  background: rgba(20, 184, 166, 0.14);
}

.checkout-export-actions {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 0.95fr;
  gap: 8px;
  margin: 12px 0;
}

.checkout-export-actions .checkout-cta {
  font-size: 15px;
  padding: 10px 8px !important;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 640px) {
  .checkout-export-actions {
    grid-template-columns: 1fr;
  }
}

.checkout-cta.dxf-cta {
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.28);
}

.checkout-cta.dxf-cta:hover {
  filter: brightness(1.06);
}

.checkout-cta.admin-cta {
  background: #1e293b;
  color: #f8fafc;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.22);
}

.checkout-cta.admin-cta:hover {
  background: #0f172a;
}

/* ==========================================================================
   v9.5: Rudderless Architecture Callout + Standalone Servo Add-ons + Linked Order Split Preview
   ========================================================================== */
.rudderless-servo-notice {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.42);
  color: #92400e;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

body.theme-dark .rudderless-servo-notice {
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.42);
  color: #fde68a;
}

.extra-parts-panel {
  margin-top: 6px;
  border: 1.8px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.extra-parts-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.extra-parts-title {
  font-size: 15px;
  font-weight: 900;
  color: var(--ink-900);
  display: flex;
  align-items: center;
  gap: 6px;
}

.extra-parts-sub {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-500);
  margin-top: 2px;
}

.extra-parts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

@media (max-width: 640px) {
  .extra-parts-grid {
    grid-template-columns: 1fr;
  }
}

.extra-part-card {
  border: 1.5px solid var(--line);
  border-radius: 9px;
  padding: 8px 10px;
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.extra-part-card.has-qty {
  border-color: var(--brand);
  background: var(--card-active-bg);
}

.ep-info {
  min-width: 0;
  flex: 1;
}

.ep-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink-900);
  line-height: 1.25;
}

.ep-meta {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-500);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ep-sku-code {
  font-family: Consolas, monospace;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-700);
  background: rgba(148, 163, 184, 0.18);
  padding: 1px 5px;
  border-radius: 4px;
}

.ep-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.ep-step-btn {
  width: 25px;
  height: 25px;
  border-radius: 6px;
  border: 1.5px solid var(--line-strong);
  background: var(--bg-card);
  color: var(--ink-900);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.ep-step-btn:hover:not(:disabled) {
  border-color: var(--brand);
  color: var(--brand);
}

.ep-step-btn:disabled {
  opacity: 0.38;
  cursor: default;
}

.ep-qty-val {
  min-width: 24px;
  text-align: center;
  font-family: Consolas, monospace;
  font-size: 15px;
  font-weight: 900;
  color: var(--ink-900);
}

/* Linked Order Auto-Split Card */
.linked-order-preview {
  margin-top: 6px;
  border: 1.8px solid rgba(13, 148, 136, 0.48);
  border-radius: var(--radius-md);
  background: rgba(20, 184, 166, 0.06);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.theme-dark .linked-order-preview {
  background: rgba(20, 184, 166, 0.11);
  border-color: rgba(45, 212, 191, 0.45);
}

.linked-order-preview.is-idle {
  border-style: dashed;
  border-color: var(--line-strong);
  background: var(--bg-subtle);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-600, #475569);
}

.lo-split-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.lo-split-title {
  font-size: 15px;
  font-weight: 900;
  color: #0f766e;
  display: flex;
  align-items: center;
  gap: 6px;
}

body.theme-dark .lo-split-title {
  color: #5eead4;
}

.lo-dual-pills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

@media (max-width: 600px) {
  .lo-dual-pills {
    grid-template-columns: 1fr;
  }
}

.lo-order-box {
  border-radius: 8px;
  padding: 7px 9px;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lo-order-box.is-parts {
  border-color: rgba(13, 148, 136, 0.55);
}

.lo-box-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-900);
}

.lo-box-id {
  font-family: Consolas, monospace;
  font-size: 14px;
  font-weight: 900;
  color: #0369a1;
  background: #e0f2fe;
  padding: 1px 6px;
  border-radius: 4px;
}

.lo-order-box.is-parts .lo-box-id {
  color: #0f766e;
  background: #ccfbf1;
}

body.theme-dark .lo-box-id {
  color: #0f172a;
  background: #38bdf8;
}

body.theme-dark .lo-order-box.is-parts .lo-box-id {
  color: #042f2e;
  background: #5eead4;
}

.lo-box-sub {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-500);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.lo-sku-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px dashed rgba(13, 148, 136, 0.35);
  padding-top: 7px;
}

.lo-sku-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-900);
}

.lo-sku-left {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.lo-sku-title {
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.lo-sku-usage {
  font-size: 13px;
  color: var(--ink-500);
  font-weight: 600;
}

.lo-sku-right {
  font-family: Consolas, monospace;
  font-weight: 900;
  white-space: nowrap;
  color: var(--ink-900);
}

/* === v12.1 Dimmed Light & Dark Polish === */
.svg-viewport.scene-white,
.mini-hud-svg.scene-white {
  background: linear-gradient(180deg, #edf2f8 0%, #e2eaf3 100%) !important;
}
body.theme-dark .svg-viewport.scene-white,
body.theme-dark .mini-hud-svg.scene-white {
  background: linear-gradient(180deg, #dce4ef 0%, #cfd9e7 100%) !important;
}
.stage-controls {
  justify-content: center;
}

/* === v12.3 Right-Sidebar Controls & Crisp Aerospace Corner Geometry === */
@media (min-width: 1025px) {
  .studio-shell {
    grid-template-columns: minmax(0, 58%) minmax(390px, 42%);
  }
  .stage-column {
    order: 1;
    position: sticky;
    top: 112px;
  }
  .controls-column {
    order: 2;
  }
}
.stage-card,
.step-section {
  border-radius: 10px;
}
.svg-viewport {
  border-radius: 0;
}

/* ==========================================================================
   v12.9 Softened Light Aircraft Option Cards & Brightened Dark Studio Workspace
   ========================================================================== */

/* 1. Light Mode: Eliminate glaring pure-white boxes across wing/tail/stage/modals */
:root {
  --bg-page: #d1dbe7;
  --bg-card: #e3ebf4;
  --bg-subtle: #d6e0ee;
  --card-active-bg: #d4e1f3;
}

.scene-white,
.svg-viewport.scene-white,
.mini-hud-svg.scene-white {
  background: linear-gradient(180deg, #d3deec 0%, #dce6f2 100%) !important;
}

.opt-card {
  background: #dde6f1;
}

.opt-card.active {
  background: #d0def2;
}

.mini-svg-box {
  background: #d5dfed !important;
  border-color: #b3c3da;
}

.opt-card.active .mini-svg-box {
  background: #cbd9ee !important;
  border-color: rgba(29, 91, 191, 0.40);
}

.modal-panel {
  background: var(--bg-card) !important;
  color: var(--ink-900) !important;
}

.sb-coupon-row,
.coupon-input {
  background: var(--bg-subtle) !important;
}

/* 2. Dark Mode: Elevated Titanium-Slate Brightened Dark Studio Palette */
html.theme-dark-root body,
body.theme-dark {
  --bg-page: #1e293b;
  --bg-topbar: rgba(30, 41, 59, 0.95);
  --topbar-text: #f3f7fc;
  --topbar-border: #3f5472;
  --bg-card: #273549;
  --bg-subtle: #314259;
  --ink-900: #f3f7fc;
  --ink-700: #dae4f2;
  --ink-500: #a6b8d0;
  --line: #3e5370;
  --line-strong: #4e678a;
  --brand: var(--gc-blue, #8ab4f8);
  --brand-dark: var(--gc-blue-ink, #bfdbfe);
  --brand-soft: var(--gc-blue-soft, rgba(138, 180, 248, 0.20));
  --card-active-bg: rgba(96, 165, 250, 0.20);
  --shadow-sm: 0 3px 10px rgba(8, 13, 23, 0.26);
  --shadow-lg: 0 16px 38px rgba(8, 13, 23, 0.38);
}

body.theme-dark .scene-white,
html.theme-dark-root .scene-white,
body.theme-dark .svg-viewport.scene-white,
body.theme-dark .mini-hud-svg.scene-white {
  background: linear-gradient(180deg, #324560 0%, #293950 100%) !important;
}

body.theme-dark .opt-card,
html.theme-dark-root .opt-card {
  background: #2d3e55;
  border-color: #435a7a;
}

body.theme-dark .opt-card.active,
html.theme-dark-root .opt-card.active {
  background: rgba(96, 165, 250, 0.22);
  border-color: #66b2ff;
}

body.theme-dark .mini-svg-box,
html.theme-dark-root .mini-svg-box {
  background: #c5d4e6 !important;
  border-color: #536b8d;
}

body.theme-dark .opt-card.active .mini-svg-box,
html.theme-dark-root .opt-card.active .mini-svg-box {
  background: #cfe0f2 !important;
  border-color: #66b2ff;
}

body.theme-dark .step-carbon-panel,
html.theme-dark-root .step-carbon-panel {
  background: linear-gradient(145deg, #253448 0%, #1f2c3e 100%) !important;
  border-color: #465e80 !important;
}
/* === v13.0 STUDIO 1400PX GRID & STICKY MASTHEAD OFFSET === */
.studio-shell {
  max-width: 1400px !important;
  padding: 20px 24px 56px !important;
  gap: 24px !important;
  grid-template-columns: minmax(0, 55.5%) minmax(0, 44.5%) !important;
}

.stage-column {
  top: 84px !important;
}

@media (max-width: 1024px) {
  .studio-shell {
    grid-template-columns: 1fr !important;
    padding: 14px 14px 44px !important;
  }
  .stage-column {
    position: static !important;
  }
}