/* ============================================================
   NOVA — new-age AI design layer for Creative Studio chrome.
   Everything is scoped under body.nova so the classic design
   stays intact; the header toggle flips between the two.
   The creative canvas (.cv) is deliberately untouched — brand
   renders must stay pixel-identical in both themes.
   ============================================================ */

body.nova {
  --nv-ink: #10163A;
  --nv-border: rgba(16, 22, 58, 0.09);
  --nv-border-strong: rgba(16, 22, 58, 0.16);
  --nv-surface: rgba(255, 255, 255, 0.86);
  --nv-ring: 0 0 0 3px rgba(0, 112, 252, 0.16);
  --nv-glow-blue: 0 6px 20px -6px rgba(0, 112, 252, 0.45);
  --nv-glow-violet: 0 8px 24px -8px rgba(124, 58, 237, 0.55);
  --nv-shadow-card: 0 1px 2px rgba(16, 22, 58, 0.04), 0 10px 32px -12px rgba(14, 0, 113, 0.10);
  --nv-shadow-pop: 0 18px 50px -12px rgba(14, 0, 113, 0.25);
  --nv-grad-ai: linear-gradient(135deg, #7C3AED 0%, #4F46E5 45%, #0070FC 100%);
  --nv-grad-primary: linear-gradient(180deg, #1281FF 0%, #0064E6 100%);
  background:
    radial-gradient(900px 420px at 85% -140px, rgba(124, 58, 237, 0.07), transparent 60%),
    radial-gradient(1100px 480px at 8% -160px, rgba(0, 112, 252, 0.08), transparent 60%),
    #F7F8FD;
  -webkit-font-smoothing: antialiased;
}

/* ---------- top bar: frosted glass ---------- */
body.nova .topbar {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid var(--nv-border);
  padding: 12px 28px;
}
body.nova .topbar-title strong { letter-spacing: -0.01em; }
body.nova .dealer-chip {
  border-radius: 999px;
  padding: 7px 18px 7px 12px;
  background: rgba(255, 255, 255, 0.8);
  border-color: var(--nv-border);
  box-shadow: 0 1px 2px rgba(16, 22, 58, 0.05);
}

/* ---------- cards ---------- */
body.nova .card {
  border-radius: 18px;
  border: 1px solid var(--nv-border);
  box-shadow: var(--nv-shadow-card);
}
body.nova .form-card { padding: 20px 22px; }
body.nova .form-card h3 { font-size: 14px; letter-spacing: -0.01em; margin-bottom: 6px; }
body.nova .form-card .hint { line-height: 1.55; margin-bottom: 12px; }
body.nova .theme-card.live:hover,
body.nova .tmpl-card:hover,
body.nova .var-card:hover {
  border-color: rgba(0, 112, 252, 0.35);
  box-shadow: 0 2px 4px rgba(16, 22, 58, 0.05), 0 18px 44px -14px rgba(14, 0, 113, 0.18);
}
body.nova .theme-card.live:hover { transform: translateY(-3px); }
body.nova .theme-card .t-icon {
  border-radius: 14px;
  background: linear-gradient(135deg, #EEF2FF, #E3F0FF);
  box-shadow: inset 0 0 0 1px rgba(0, 112, 252, 0.10);
}

/* ---------- hero panel: gradient mesh ---------- */
body.nova .hero-panel {
  border-radius: 24px;
  border: 1px solid rgba(99, 102, 241, 0.18);
  background:
    radial-gradient(500px 220px at 92% 0%, rgba(147, 51, 234, 0.10), transparent 65%),
    radial-gradient(600px 260px at 20% 120%, rgba(0, 112, 252, 0.10), transparent 65%),
    linear-gradient(120deg, #F2F5FF 0%, #EAF2FF 55%, #F1EDFF 100%);
  padding: 34px 38px;
}
body.nova .hero-panel h1 { font-size: 28px; letter-spacing: -0.02em; }

/* ---------- buttons ---------- */
body.nova .btn {
  border-radius: 13px;
  padding: 11px 22px;
  letter-spacing: 0.005em;
  background: var(--nv-grad-primary);
  box-shadow: var(--nv-glow-blue), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.4), box-shadow 0.16s, background 0.16s, opacity 0.16s;
}
body.nova .btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -8px rgba(0, 112, 252, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
body.nova .btn:active { transform: translateY(0) scale(0.985); }
body.nova .btn:focus-visible { outline: none; box-shadow: var(--nv-ring), var(--nv-glow-blue); }
body.nova .btn[disabled] { transform: none; box-shadow: none; }
body.nova .btn-ghost {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--nv-border);
  box-shadow: 0 1px 2px rgba(16, 22, 58, 0.05);
  color: var(--si-text-secondary, #374151);
}
body.nova .btn-ghost:hover { background: #fff; border-color: rgba(0, 112, 252, 0.4); color: var(--si-primary-accent, #0070FC); box-shadow: 0 4px 14px -4px rgba(0, 112, 252, 0.25); }
body.nova .btn-ai {
  position: relative;
  overflow: hidden;
  background: var(--nv-grad-ai);
  box-shadow: var(--nv-glow-violet), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
body.nova .btn-ai::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.55s ease;
}
body.nova .btn-ai:hover::after { transform: translateX(120%); }
body.nova .btn-ai:hover { box-shadow: 0 12px 32px -8px rgba(124, 58, 237, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
body.nova .btn-lg { border-radius: 15px; padding: 14px 28px; }

/* ---------- inputs, selects, textareas ---------- */
body.nova :is(.form-card, .field, .modal, .arrange-row, .copy-add) :is(select, textarea, input[type="text"], input[type="number"], input[type="date"]) {
  width: 100%;
  border: 1.5px solid var(--nv-border-strong);
  border-radius: 12px;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--nv-ink);
  background: #FBFCFF;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
body.nova :is(.form-card, .field, .modal, .arrange-row, .copy-add) :is(select, textarea, input[type="text"], input[type="number"], input[type="date"]):hover {
  border-color: rgba(0, 112, 252, 0.35);
}
body.nova :is(.form-card, .field, .modal, .arrange-row, .copy-add) :is(select, textarea, input[type="text"], input[type="number"], input[type="date"]):focus {
  outline: none;
  border-color: var(--si-primary-accent, #0070FC);
  background: #fff;
  box-shadow: var(--nv-ring);
}
body.nova textarea { resize: vertical; min-height: 74px; line-height: 1.5; }
body.nova .form-card select,
body.nova .field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-color: #FBFCFF;
  padding-right: 36px;
}
body.nova .field label { font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--si-text-tertiary, #6B7280); }
body.nova .charcount { margin-top: 2px; }

/* ---------- chips ---------- */
body.nova .chip {
  border-radius: 999px;
  padding: 7px 15px;
  border: 1px solid var(--nv-border-strong);
  background: rgba(255, 255, 255, 0.9);
  font-weight: 700;
  transition: all 0.15s;
  box-shadow: 0 1px 2px rgba(16, 22, 58, 0.04);
}
body.nova .chip:not(.off-disabled):hover { border-color: rgba(0, 112, 252, 0.5); color: var(--si-primary-accent, #0070FC); transform: translateY(-1px); }
body.nova .chip.on {
  background: linear-gradient(135deg, #EEF2FF, #E0EDFF);
  border-color: rgba(0, 112, 252, 0.55);
  color: var(--si-primary-deep, #0E0071);
  box-shadow: inset 0 0 0 1px rgba(0, 112, 252, 0.15), 0 2px 8px -2px rgba(0, 112, 252, 0.25);
}
body.nova .chipset { gap: 7px; }

/* ---------- segmented controls ---------- */
body.nova .seg {
  background: rgba(14, 0, 113, 0.055);
  border: 1px solid var(--nv-border);
  border-radius: 13px;
  padding: 4px;
  gap: 3px;
}
body.nova .seg button { border-radius: 10px; transition: all 0.15s; }
body.nova .seg button.on { box-shadow: 0 2px 8px -1px rgba(16, 22, 58, 0.18); }
body.nova .seg-mode { border-radius: 15px; }
body.nova .seg-mode button { padding: 10px 12px; border-radius: 12px; }
body.nova .seg-mode button[data-mode="ai"].on {
  background: var(--nv-grad-ai);
  color: #fff;
  box-shadow: var(--nv-glow-violet);
}

/* ---------- pills & notes ---------- */
body.nova .pill { padding: 4px 11px; box-shadow: 0 1px 2px rgba(16, 22, 58, 0.04); }
body.nova .pill-ai { background: var(--nv-grad-ai); }
body.nova .ai-note {
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(0, 112, 252, 0.06));
  border: 1px solid rgba(124, 58, 237, 0.18);
  padding: 11px 13px;
}
body.nova .applied { border-top-style: solid; border-top-color: var(--nv-border); }
body.nova .guide-preview { border-radius: 12px; }

/* ---------- swatches ---------- */
body.nova .swatch { border-radius: 8px; transition: transform 0.12s, outline 0.12s; box-shadow: inset 0 0 0 1px rgba(16, 22, 58, 0.10); }
body.nova .swatch:hover { transform: scale(1.14); }
body.nova .swatch.on { outline-width: 2.5px; }
body.nova .posgrid input[type="range"] { height: 24px; }

/* ---------- stage & canvas chrome ---------- */
body.nova .stage {
  border-radius: 18px;
  background:
    linear-gradient(rgba(247, 248, 253, 0.6), rgba(247, 248, 253, 0.6)),
    repeating-conic-gradient(rgba(16, 22, 58, 0.05) 0% 25%, transparent 0% 50%) 0 0 / 22px 22px;
}
body.nova .sel-toolbar {
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: saturate(1.5) blur(12px);
  backdrop-filter: saturate(1.5) blur(12px);
  border: 1px solid var(--nv-border-strong);
  box-shadow: var(--nv-shadow-pop);
  padding: 11px 13px;
}
body.nova .sel-ring { border-radius: 8px; }
body.nova .sel-locktip { border-radius: 10px; box-shadow: var(--nv-shadow-pop); }
body.nova .arrange-card {
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
body.nova .canvas-hint { opacity: 0.85; }
body.nova .preview-toolbar { border-radius: 16px; }

/* ---------- modal ---------- */
body.nova .modal-overlay {
  background: rgba(14, 8, 52, 0.42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
body.nova .modal { border-radius: 22px; box-shadow: var(--nv-shadow-pop); }

/* ---------- tiles ---------- */
body.nova .bgtile, body.nova .cut-tile { border-radius: 12px; transition: transform 0.14s, box-shadow 0.14s; }
body.nova .bgtile:hover, body.nova .cut-tile:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -8px rgba(14, 0, 113, 0.25); }

/* ---------- scrollbars ---------- */
body.nova ::-webkit-scrollbar { width: 9px; height: 9px; }
body.nova ::-webkit-scrollbar-track { background: transparent; }
body.nova ::-webkit-scrollbar-thumb { background: rgba(16, 22, 58, 0.16); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
body.nova ::-webkit-scrollbar-thumb:hover { background: rgba(16, 22, 58, 0.28); border: 2px solid transparent; background-clip: content-box; }

/* ---------- focus visibility for keyboard users ---------- */
body.nova :is(.chip, .seg button, .swatch):focus-visible { outline: none; box-shadow: var(--nv-ring); }