/*
  Etsy Product Studio — Billion UI System
  Eto editorial warmth × Railway infrastructure precision.
  This layer is intentionally loaded last. It upgrades appearance and motion without changing workflow IDs.
*/

:root,
html[data-theme="light"] {
  color-scheme: light;
  --bx-bg: #f6f4ef;
  --bx-bg-2: #fcfbf8;
  --bx-canvas: #ffffff;
  --bx-canvas-soft: rgba(255,255,255,.78);
  --bx-elevated: rgba(255,255,255,.92);
  --bx-frost: rgba(250,249,246,.72);
  --bx-ink: #17151c;
  --bx-ink-2: #29252f;
  --bx-muted: #716c78;
  --bx-muted-2: #97919d;
  --bx-line: rgba(27,22,34,.095);
  --bx-line-strong: rgba(27,22,34,.17);
  --bx-shadow-1: 0 1px 2px rgba(22,15,29,.035), 0 10px 30px rgba(30,18,38,.045);
  --bx-shadow-2: 0 12px 38px rgba(29,17,39,.075), 0 34px 90px rgba(29,17,39,.09);
  --bx-shadow-3: 0 24px 65px rgba(22,13,31,.13), 0 70px 150px rgba(22,13,31,.10);
  --bx-violet: #7656ff;
  --bx-violet-2: #9d87ff;
  --bx-violet-3: #ebe6ff;
  --bx-orange: #ff7a3d;
  --bx-orange-2: #ffa376;
  --bx-orange-3: #fff0e8;
  --bx-cyan: #2ecdb7;
  --bx-cyan-2: #83eadb;
  --bx-blue: #3c87ff;
  --bx-green: #42bc78;
  --bx-yellow: #e9ae42;
  --bx-red: #e65062;
  --bx-night: #0b0910;
  --bx-night-2: #12101a;
  --bx-night-3: #1a1624;
  --bx-radius-xs: 10px;
  --bx-radius-sm: 14px;
  --bx-radius-md: 20px;
  --bx-radius-lg: 28px;
  --bx-radius-xl: 38px;
  --bx-ease: cubic-bezier(.22,.9,.24,1);
  --bx-ease-out: cubic-bezier(.16,1,.3,1);
  --bx-cursor-x: 50vw;
  --bx-cursor-y: 20vh;
}

html[data-theme="dark"],
body.dark {
  color-scheme: dark;
  --bx-bg: #0b0910;
  --bx-bg-2: #0f0c15;
  --bx-canvas: #15121c;
  --bx-canvas-soft: rgba(22,18,29,.78);
  --bx-elevated: rgba(25,21,34,.92);
  --bx-frost: rgba(15,12,21,.70);
  --bx-ink: #fbfaf7;
  --bx-ink-2: #e7e2ea;
  --bx-muted: #a8a1af;
  --bx-muted-2: #7c7484;
  --bx-line: rgba(255,255,255,.085);
  --bx-line-strong: rgba(255,255,255,.16);
  --bx-shadow-1: 0 1px 2px rgba(0,0,0,.22), 0 12px 36px rgba(0,0,0,.24);
  --bx-shadow-2: 0 18px 52px rgba(0,0,0,.31), 0 45px 110px rgba(0,0,0,.25);
  --bx-shadow-3: 0 30px 80px rgba(0,0,0,.42), 0 90px 180px rgba(0,0,0,.30);
  --bx-violet-3: rgba(118,86,255,.16);
  --bx-orange-3: rgba(255,122,61,.13);
}

html {
  background: var(--bx-bg);
  scrollbar-color: rgba(118,86,255,.42) transparent;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--bx-ink);
  background:
    radial-gradient(70rem 50rem at 102% -5%, rgba(118,86,255,.13), transparent 63%),
    radial-gradient(58rem 46rem at -12% 18%, rgba(255,122,61,.095), transparent 63%),
    linear-gradient(180deg, var(--bx-bg-2), var(--bx-bg));
  font-family: "Avenir Next", Avenir, "SF Pro Text", "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  font-optical-sizing: auto;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  transition: color .36s ease, background-color .36s ease;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(34rem 34rem at var(--bx-cursor-x) var(--bx-cursor-y), rgba(118,86,255,.075), transparent 68%),
    linear-gradient(115deg, transparent 15%, rgba(255,255,255,.02) 48%, transparent 82%);
  transition: opacity .3s ease;
}

html[data-theme="dark"] body::after,
body.dark::after {
  background:
    radial-gradient(38rem 38rem at var(--bx-cursor-x) var(--bx-cursor-y), rgba(118,86,255,.12), transparent 68%),
    radial-gradient(28rem 28rem at calc(var(--bx-cursor-x) + 12rem) calc(var(--bx-cursor-y) + 8rem), rgba(46,205,183,.055), transparent 70%);
}

* { box-sizing: border-box; }

*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(118,86,255,.55), rgba(255,122,61,.42)) padding-box;
}

h1, h2, h3, h4, h5, h6,
.canva-hero h2,
.luxury-automation-hero h2,
.variations-hero h2 {
  color: var(--bx-ink);
  font-family: "Avenir Next", Avenir, "SF Pro Display", "Segoe UI Variable Display", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 760;
  letter-spacing: -.045em;
  text-wrap: balance;
}

p, small, label, input, textarea, select, button { letter-spacing: -.012em; }
code, pre, .prompt-text, .batch-prompt-text, .json-preview, .console-panel, .generation-log {
  font-family: "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
}

/* Ambient composition */
.billion-ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.billion-ambient span {
  position: absolute;
  width: 28rem;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .08;
  animation: bx-orbit 18s var(--bx-ease-in-out, ease-in-out) infinite alternate;
}
.billion-ambient span:nth-child(1) { top: -12rem; right: 8%; background: var(--bx-violet); }
.billion-ambient span:nth-child(2) { top: 38%; left: -17rem; background: var(--bx-orange); animation-delay: -7s; }
.billion-ambient span:nth-child(3) { bottom: -17rem; right: 14%; background: var(--bx-cyan); animation-delay: -12s; }
html[data-theme="dark"] .billion-ambient span, body.dark .billion-ambient span { opacity: .13; }

.billion-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  width: 100%;
  height: 2px;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--bx-orange), var(--bx-violet), var(--bx-cyan));
  box-shadow: 0 0 18px rgba(118,86,255,.6);
}

/* Global layout */
.shell {
  width: 100%;
  max-width: none;
  padding: 16px 24px 80px 120px;
}

.layout,
.dashboard-home,
.dashboard-status-bar,
.overview-strip,
.workflow,
footer {
  width: min(100%, 1700px);
  margin-inline: auto;
}

.layout {
  align-items: start;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 370px);
}
.layout main { min-width: 0; }
.layout aside { min-width: 0; }

/* Navigation: engineered, compact, tactile */
.section-nav.canva-rail {
  inset: 12px auto 12px 12px;
  width: 92px;
  padding: 14px 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 26px;
  background:
    radial-gradient(12rem 18rem at 50% -4%, rgba(118,86,255,.22), transparent 72%),
    linear-gradient(180deg, #17131f 0%, #0a0810 100%);
  box-shadow: 0 26px 80px rgba(5,3,9,.34), inset 0 1px 0 rgba(255,255,255,.07);
}
.section-nav.canva-rail::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .38;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 100% 24px;
  mask-image: linear-gradient(#000, transparent 86%);
}
.section-nav.canva-rail .nav-item,
.rail-create,
.rail-logo,
.rail-footer-button { position: relative; isolation: isolate; }
.section-nav.canva-rail .nav-item::after,
.rail-create::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.13), transparent 65%);
  transition: opacity .24s ease;
}
.section-nav.canva-rail .nav-item:hover::after,
.rail-create:hover::after { opacity: 1; }
.section-nav.canva-rail .nav-item {
  min-height: 59px;
  border-radius: 17px;
  transition: transform .22s var(--bx-ease), color .22s ease, background .22s ease, border-color .22s ease;
}
.section-nav.canva-rail .nav-item:hover:not(:disabled) { transform: translateX(3px) scale(1.015); }
.section-nav.canva-rail .nav-item.active {
  border-color: rgba(255,164,113,.22);
  background: linear-gradient(135deg, rgba(255,122,61,.19), rgba(118,86,255,.18));
  box-shadow: inset 3px 0 0 var(--bx-orange), 0 12px 30px rgba(0,0,0,.24);
}
.section-nav.canva-rail .nav-item.active .nav-icon { filter: drop-shadow(0 0 12px rgba(255,164,113,.28)); }
.rail-logo { animation: bx-logo-breathe 5s ease-in-out infinite; }
.rail-avatar { border: 1px solid rgba(255,255,255,.15); }

/* Header and premium theme selector */
.app-header {
  top: 12px;
  width: min(100%, 1700px);
  min-height: 82px;
  margin: 0 auto 24px;
  padding: 11px 13px 11px 15px;
  border: 1px solid var(--bx-line);
  border-radius: 22px;
  background: color-mix(in srgb, var(--bx-frost) 94%, transparent);
  box-shadow: var(--bx-shadow-1);
  backdrop-filter: blur(30px) saturate(1.35);
  transition: transform .32s var(--bx-ease), box-shadow .32s ease, background .32s ease;
}
.app-header.is-scrolled {
  transform: translateY(-3px);
  box-shadow: var(--bx-shadow-2);
  background: color-mix(in srgb, var(--bx-elevated) 92%, transparent);
}
.brand-mark {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  background: linear-gradient(145deg, var(--bx-orange), #e95827 58%, #b83a1d);
  box-shadow: 0 13px 28px rgba(255,122,61,.22), inset 0 1px 0 rgba(255,255,255,.32);
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: -60% -20%;
  transform: translateX(-100%) rotate(22deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  animation: bx-brand-shine 7s ease-in-out infinite;
}
.app-header h1 { font-size: clamp(1.08rem, 1.7vw, 1.48rem); }
.app-header p { color: var(--bx-muted); }
.eyebrow, .section-kicker, .recent-eyebrow, .luxury-automation-kicker, .canva-hero-kicker, .workflow-page-kicker {
  color: var(--bx-orange);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .16em;
}
.topbar-health {
  border: 1px solid var(--bx-line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--bx-canvas) 72%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.autosave-status {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--bx-green) 28%, transparent);
  border-radius: 12px;
  color: color-mix(in srgb, var(--bx-green) 75%, var(--bx-ink));
  background: color-mix(in srgb, var(--bx-green) 10%, transparent);
}
.autosave-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bx-green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bx-green) 16%, transparent), 0 0 14px color-mix(in srgb, var(--bx-green) 35%, transparent);
}

.premium-theme-switcher {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 40px;
  padding: 3px;
  border: 1px solid var(--bx-line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--bx-canvas) 66%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.premium-theme-switcher button {
  width: 34px;
  min-width: 34px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  color: var(--bx-muted);
  background: transparent;
  box-shadow: none;
}
.premium-theme-switcher button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.premium-theme-switcher button:hover:not(:disabled) { color: var(--bx-ink); background: color-mix(in srgb, var(--bx-violet) 9%, transparent); transform: none; }
.premium-theme-switcher button.active {
  color: var(--bx-ink);
  background: var(--bx-canvas);
  box-shadow: 0 5px 16px rgba(23,15,31,.10), inset 0 1px 0 rgba(255,255,255,.18);
}
#themeButton { display: none !important; }

/* Universal premium surfaces */
.card,
.workspace-card,
.subpanel,
.automation-preflight-shell,
.workflow-choice-panel,
.reference-examples-panel,
.competitor-research-panel,
.api-setup-card,
.deployment-card,
.results-card,
.batch-results-card,
.digital-template-builder,
.digital-universal-template,
.variation-keyword-upload,
.variation-example-upload,
.variation-analysis-card,
.variation-result-card,
.variation-research-card,
.image-studio-card,
.project-tile,
.overview-card,
.dashboard-status-bar,
.workflow {
  --bx-local-x: 50%;
  --bx-local-y: 50%;
  position: relative;
  isolation: isolate;
  border-color: var(--bx-line);
  background: var(--bx-canvas-soft);
  box-shadow: var(--bx-shadow-1);
  backdrop-filter: blur(18px) saturate(1.1);
}

.fx-surface::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -2;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(24rem circle at var(--bx-local-x) var(--bx-local-y), rgba(118,86,255,.17), transparent 48%);
  transition: opacity .28s ease;
}
.fx-surface:hover::before { opacity: 1; }
.fx-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(255,255,255,.045), transparent 38%);
}

.card,
.workspace-card { border-radius: var(--bx-radius-md); }
.workspace-card { padding: clamp(18px, 2.1vw, 30px); }
.subpanel { border-radius: 17px; }

.card:hover,
.subpanel:hover,
.project-tile:hover,
.overview-card:hover,
.variation-research-card:hover,
.variation-result-card:hover,
.image-studio-card:hover {
  border-color: color-mix(in srgb, var(--bx-violet) 23%, var(--bx-line));
  box-shadow: var(--bx-shadow-2);
}

.workspace-section-heading {
  width: min(100%, 1500px);
  margin: 44px auto 15px;
  padding-inline: 5px;
  align-items: end;
}
.workspace-section-heading .section-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--bx-orange) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bx-orange) 8%, transparent);
}
.workspace-section-heading h2 { margin: 2px 0 0; font-size: clamp(1.45rem, 2.4vw, 2.2rem); }
.workspace-section-heading p { color: var(--bx-muted); max-width: 820px; }

/* Premium buttons */
button,
a.button,
.hero-primary,
.hero-secondary {
  position: relative;
  overflow: hidden;
  min-height: 42px;
  border-radius: 13px;
  font-weight: 720;
  transition: transform .2s var(--bx-ease), box-shadow .24s ease, border-color .24s ease, background .24s ease, color .24s ease;
}
button:not(.nav-item):not(.rail-logo):not(.rail-create):not(.rail-footer-button):not(.canva-tool):not(.project-tile):not(.recent-filter):not(.recent-view):not(.premium-theme-switcher button):not(.mobile-nav-toggle):not(.icon-button):not(.danger),
a.button:not(.secondary):not(.danger),
.hero-primary {
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, #8a6cff 0%, #7151f5 54%, #5a3ed9 100%);
  box-shadow: 0 10px 25px rgba(103,71,228,.20), inset 0 1px 0 rgba(255,255,255,.22);
}
button:not(.nav-item):not(.rail-logo):not(.rail-create):not(.rail-footer-button):not(.canva-tool):not(.project-tile):not(.recent-filter):not(.recent-view):not(.premium-theme-switcher button):not(.mobile-nav-toggle):not(.icon-button):not(.danger)::before,
a.button:not(.secondary):not(.danger)::before,
.hero-primary::before {
  content: "";
  position: absolute;
  top: -120%;
  bottom: -120%;
  left: -36%;
  width: 28%;
  pointer-events: none;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transition: left .55s var(--bx-ease);
}
button:not(.nav-item):not(.rail-logo):not(.rail-create):not(.rail-footer-button):not(.canva-tool):not(.project-tile):not(.recent-filter):not(.recent-view):not(.premium-theme-switcher button):not(.mobile-nav-toggle):not(.icon-button):not(.danger):hover::before,
a.button:not(.secondary):not(.danger):hover::before,
.hero-primary:hover::before { left: 115%; }
button:hover:not(:disabled), a.button:hover, .hero-primary:hover {
  transform: translateY(-2px);
}
button:active:not(:disabled), a.button:active, .hero-primary:active { transform: translateY(0) scale(.985); }
button.secondary,
button.ghost,
a.button.secondary,
.hero-secondary,
.icon-button.secondary {
  color: var(--bx-ink);
  border: 1px solid var(--bx-line);
  background: color-mix(in srgb, var(--bx-canvas) 72%, transparent);
  box-shadow: 0 5px 16px rgba(24,16,31,.045), inset 0 1px 0 rgba(255,255,255,.07);
}
button.secondary:hover:not(:disabled),
button.ghost:hover:not(:disabled),
a.button.secondary:hover,
.hero-secondary:hover,
.icon-button.secondary:hover:not(:disabled) {
  color: var(--bx-ink);
  border-color: color-mix(in srgb, var(--bx-violet) 29%, var(--bx-line));
  background: color-mix(in srgb, var(--bx-violet) 7%, var(--bx-canvas));
  box-shadow: 0 12px 30px rgba(75,49,126,.10);
}
.button-ripple {
  position: absolute;
  z-index: 5;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  background: rgba(255,255,255,.38);
  animation: bx-ripple .58s ease-out forwards;
}

/* Form system */
.field label,
.field > label,
label {
  color: var(--bx-ink-2);
  font-size: .72rem;
  font-weight: 720;
}
input,
textarea,
select {
  min-height: 45px;
  color: var(--bx-ink);
  border: 1px solid var(--bx-line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--bx-canvas) 80%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 1px rgba(22,15,29,.02);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease;
}
input:hover,
textarea:hover,
select:hover { border-color: var(--bx-line-strong); }
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--bx-violet) 65%, transparent);
  background: var(--bx-canvas);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bx-violet) 13%, transparent), 0 12px 28px rgba(59,35,115,.08);
}
textarea { min-height: 112px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--bx-violet); }
.help { color: var(--bx-muted); line-height: 1.55; }

.drop-zone,
.csv-drop-card,
.reference-drop-card,
.digital-file-drop-card,
.variation-keyword-drop-zone,
.variation-example-drop-zone {
  border: 1px dashed color-mix(in srgb, var(--bx-violet) 32%, var(--bx-line));
  border-radius: 18px;
  background:
    radial-gradient(20rem 12rem at 50% 0%, color-mix(in srgb, var(--bx-violet) 8%, transparent), transparent 70%),
    color-mix(in srgb, var(--bx-canvas) 62%, transparent);
  transition: transform .24s var(--bx-ease), box-shadow .24s ease, border-color .24s ease, background .24s ease;
}
.drop-zone:hover,
.csv-drop-card:hover,
.reference-drop-card:hover,
.digital-file-drop-card:hover,
.variation-keyword-drop-zone:hover,
.variation-example-drop-zone:hover,
.drag-active {
  border-color: color-mix(in srgb, var(--bx-violet) 60%, transparent);
  background: color-mix(in srgb, var(--bx-violet) 7%, var(--bx-canvas));
  box-shadow: 0 14px 36px rgba(80,54,145,.10);
  transform: translateY(-2px);
}

/* Statuses, pills, metrics */
.status,
.notice,
.pill,
.metric,
.automation-health-tile {
  border-color: var(--bx-line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--bx-canvas) 67%, transparent);
}
.status.good, .automation-health-tile[data-state="good"] { border-color: color-mix(in srgb, var(--bx-green) 28%, transparent); background: color-mix(in srgb, var(--bx-green) 8%, var(--bx-canvas)); }
.status.warn, .automation-health-tile[data-state="warn"] { border-color: color-mix(in srgb, var(--bx-yellow) 32%, transparent); background: color-mix(in srgb, var(--bx-yellow) 8%, var(--bx-canvas)); }
.status.bad, .automation-health-tile[data-state="bad"] { border-color: color-mix(in srgb, var(--bx-red) 30%, transparent); background: color-mix(in srgb, var(--bx-red) 8%, var(--bx-canvas)); }
.pill { font-weight: 720; }
.step-number,
.csv-drop-number,
.overview-icon {
  box-shadow: 0 9px 20px rgba(88,61,177,.15), inset 0 1px 0 rgba(255,255,255,.24);
}

/* Dashboard */
.canva-dashboard { margin-bottom: 24px; }
.canva-hero {
  min-height: 590px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--bx-radius-xl);
  background:
    radial-gradient(44rem 34rem at 18% 16%, rgba(118,86,255,.31), transparent 70%),
    radial-gradient(38rem 30rem at 86% 7%, rgba(46,205,183,.19), transparent 74%),
    linear-gradient(135deg, #171220 0%, #100c17 48%, #171227 100%);
  box-shadow: var(--bx-shadow-3), inset 0 1px 0 rgba(255,255,255,.07);
}
.canva-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .43;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.027) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.027) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
  animation: bx-grid-drift 22s linear infinite;
}
.canva-hero::after {
  content: "";
  position: absolute;
  width: 32rem;
  aspect-ratio: 1;
  right: -13rem;
  bottom: -19rem;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(118,86,255,.025), 0 0 0 140px rgba(46,205,183,.018);
}
.canva-hero-inner { position: relative; z-index: 2; max-width: 790px; }
.canva-hero-kicker { color: #ffab83; }
.canva-hero h2 {
  color: #fff;
  max-width: 760px;
  margin-top: 14px;
  font-size: clamp(3.15rem, 6.7vw, 7.1rem);
  line-height: .91;
  letter-spacing: -.072em;
}
.eto-hero-lead { max-width: 690px; color: rgba(255,255,255,.67); font-size: clamp(1rem, 1.6vw, 1.26rem); line-height: 1.58; }
.canva-command-search {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 22px 60px rgba(0,0,0,.24);
  backdrop-filter: blur(20px);
}
.canva-command-search:focus-within {
  border-color: rgba(157,135,255,.75);
  box-shadow: 0 0 0 4px rgba(118,86,255,.15), 0 24px 70px rgba(0,0,0,.28);
}
.canva-command-search input { color: #fff; background: transparent; box-shadow: none; }
.canva-command-search input::placeholder { color: rgba(255,255,255,.44); }
.canva-command-search svg { fill: rgba(255,255,255,.65); }
.canva-command-search kbd { color: rgba(255,255,255,.64); border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.055); }
.hero-setup-pill { border-color: rgba(255,255,255,.11); background: rgba(11,8,16,.54); backdrop-filter: blur(20px); }
.eto-terminal-visual { z-index: 2; filter: drop-shadow(0 35px 70px rgba(0,0,0,.35)); }
.eto-terminal-window {
  border-color: rgba(255,255,255,.1);
  background: rgba(12,9,17,.80);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 28px 90px rgba(0,0,0,.36);
  backdrop-filter: blur(26px);
  animation: bx-terminal-float 7s ease-in-out infinite;
}
.eto-float-card { animation: bx-float-card 5.5s ease-in-out infinite; }
.eto-float-card.card-b { animation-delay: -2.2s; }
.canva-tool-strip {
  border-color: rgba(255,255,255,.09);
  background: rgba(15,11,21,.74);
  box-shadow: 0 22px 80px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(28px) saturate(1.25);
}
.canva-tool {
  border-radius: 16px;
  color: rgba(255,255,255,.68);
  transition: transform .22s var(--bx-ease), color .22s ease, background .22s ease;
}
.canva-tool:hover { color: #fff; background: rgba(255,255,255,.07); transform: translateY(-4px); }
.canva-tool .tool-icon { box-shadow: 0 11px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.22); }

.dashboard-status-bar {
  overflow: hidden;
  border-radius: 20px;
  background: var(--bx-canvas-soft);
}
.dashboard-status-bar > div { position: relative; }
.dashboard-status-bar > div:not(:last-child)::after { background: var(--bx-line); }
.overview-strip { gap: 12px; }
.overview-card { min-height: 94px; border-radius: 18px; transition: transform .25s var(--bx-ease), box-shadow .25s ease; }
.overview-card:hover { transform: translateY(-4px); }
.overview-card.accent { background: linear-gradient(135deg, color-mix(in srgb, var(--bx-violet) 14%, var(--bx-canvas)), color-mix(in srgb, var(--bx-orange) 8%, var(--bx-canvas))); }
.workflow { padding: 10px; border-radius: 17px; overflow-x: auto; }
.workflow-step { border-radius: 11px; transition: background .2s ease, color .2s ease, transform .2s ease; }
.workflow-step:hover { transform: translateY(-1px); }
.workflow-step.done { background: color-mix(in srgb, var(--bx-green) 8%, transparent); }

.recent-workspace { margin-top: 30px; }
.recent-heading-row h2 { font-size: clamp(1.65rem, 3vw, 2.6rem); }
.project-tile { overflow: hidden; border-radius: 22px; text-align: left; }
.project-tile:hover { transform: translateY(-6px); }
.project-preview { overflow: hidden; border-radius: 17px; }
.project-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(130deg, transparent 35%, rgba(255,255,255,.18), transparent 65%);
  transform: translateX(-65%);
  transition: transform .65s var(--bx-ease), opacity .25s ease;
}
.project-tile:hover .project-preview::after { opacity: 1; transform: translateX(65%); }
.project-meta { border-color: var(--bx-line); background: var(--bx-canvas); }

/* Physical / Digital studio heroes */
.luxury-automation-hero {
  min-height: 390px;
  overflow: hidden;
  padding: clamp(34px, 5vw, 72px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--bx-radius-xl);
  background:
    radial-gradient(34rem 30rem at 14% 12%, rgba(118,86,255,.38), transparent 72%),
    radial-gradient(30rem 28rem at 90% 22%, rgba(60,135,255,.24), transparent 72%),
    linear-gradient(135deg, #1a1230, #151020 55%, #11111d);
  box-shadow: var(--bx-shadow-3), inset 0 1px 0 rgba(255,255,255,.08);
}
body[data-active-page="digital"] .luxury-automation-hero {
  background:
    radial-gradient(36rem 28rem at 15% 14%, rgba(255,122,61,.34), transparent 72%),
    radial-gradient(32rem 28rem at 88% 18%, rgba(118,86,255,.28), transparent 72%),
    linear-gradient(135deg, #25140f, #18101e 52%, #111019);
}
.luxury-automation-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .46;
  background-image: radial-gradient(rgba(255,255,255,.1) .7px, transparent .7px);
  background-size: 15px 15px;
  mask-image: linear-gradient(110deg, #000, transparent 70%);
}
.luxury-automation-copy { position: relative; z-index: 2; }
.luxury-automation-hero h2 { color: #fff; max-width: 760px; font-size: clamp(2.65rem, 5.2vw, 5.7rem); line-height: .96; }
.luxury-automation-hero p { color: rgba(255,255,255,.65); font-size: 1.05rem; line-height: 1.6; }
.luxury-automation-kicker { color: #ffac84; }
.luxury-automation-visual { position: relative; z-index: 2; }
.luxury-canvas-card {
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.075);
  box-shadow: 0 34px 80px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(24px);
  animation: bx-terminal-float 7s ease-in-out infinite;
}
.luxury-floating-chip { border-color: rgba(255,255,255,.12); background: rgba(15,11,21,.72); box-shadow: 0 17px 45px rgba(0,0,0,.28); backdrop-filter: blur(18px); }

.workflow-page-hero {
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--bx-line);
  background:
    radial-gradient(20rem 13rem at 100% 0%, color-mix(in srgb, var(--bx-violet) 13%, transparent), transparent 72%),
    var(--bx-canvas-soft);
}
.workflow-page-hero.digital { background: radial-gradient(20rem 13rem at 100% 0%, color-mix(in srgb, var(--bx-orange) 13%, transparent), transparent 72%), var(--bx-canvas-soft); }
.workflow-page-feature-grid > div {
  border: 1px solid var(--bx-line);
  border-radius: 15px;
  background: color-mix(in srgb, var(--bx-canvas) 72%, transparent);
  transition: transform .22s var(--bx-ease), border-color .22s ease, box-shadow .22s ease;
}
.workflow-page-feature-grid > div:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--bx-violet) 24%, var(--bx-line)); box-shadow: var(--bx-shadow-1); }

/* Variation Lab */
.digital-variations-workspace { width: min(100%, 1700px); margin-inline: auto; }
.variations-hero {
  min-height: 380px;
  overflow: hidden;
  padding: clamp(34px, 5vw, 72px);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--bx-radius-xl);
  background:
    radial-gradient(36rem 28rem at 13% 15%, rgba(118,86,255,.40), transparent 72%),
    radial-gradient(34rem 28rem at 90% 25%, rgba(46,205,183,.30), transparent 72%),
    linear-gradient(135deg, #171021, #11131d 60%, #0e1819);
  box-shadow: var(--bx-shadow-3), inset 0 1px 0 rgba(255,255,255,.08);
}
.variations-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .32;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(circle at 40% 30%, #000, transparent 72%);
  animation: bx-grid-drift 20s linear infinite;
}
.variations-hero > * { position: relative; z-index: 2; }
.variations-hero h2 { color: #fff; font-size: clamp(2.7rem, 5.4vw, 6rem); line-height: .94; }
.variations-hero p { color: rgba(255,255,255,.66); font-size: 1.03rem; line-height: 1.6; }
.variations-hero-badge {
  border-color: rgba(255,255,255,.13);
  background: rgba(12,10,17,.56);
  box-shadow: 0 26px 70px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(24px);
  animation: bx-float-card 6s ease-in-out infinite;
}
.variation-research-grid { gap: 14px; }
.variation-research-card { overflow: hidden; border-radius: 18px; transition: transform .26s var(--bx-ease), box-shadow .26s ease, border-color .26s ease; }
.variation-research-card:hover { transform: translateY(-6px) scale(1.006); }
.variation-research-card img { transition: transform .55s var(--bx-ease); }
.variation-research-card:hover img { transform: scale(1.04); }
.variation-result-card { border-radius: 22px; }
.variation-result-head { background: linear-gradient(135deg, color-mix(in srgb, var(--bx-violet) 8%, transparent), color-mix(in srgb, var(--bx-orange) 6%, transparent)); }
.variation-image-strip a { transition: transform .22s var(--bx-ease), box-shadow .22s ease; }
.variation-image-strip a:hover { transform: translateY(-3px); box-shadow: var(--bx-shadow-1); }
.variation-primary-image { box-shadow: var(--bx-shadow-2); }

/* Image, research, data and output presentation */
.image-card,
.generation-sheet-card,
.approval-product-card,
.batch-product-card,
.competitor-research-card,
.results-card,
.api-setup-card,
.deployment-card,
.csv-drop-card,
.reference-drop-card,
.digital-file-drop-card {
  border-radius: 18px;
  border-color: var(--bx-line);
  background: var(--bx-canvas-soft);
  box-shadow: var(--bx-shadow-1);
}
.image-card img,
.generation-sheet-card img,
.batch-image-gallery img,
.competitor-research-gallery img,
.reference-preview-image,
.generated-gallery img {
  transition: transform .5s var(--bx-ease), filter .35s ease;
}
.image-card:hover img,
.generation-sheet-card:hover img,
.competitor-research-card:hover img { transform: scale(1.035); filter: saturate(1.05) contrast(1.02); }
.gallery,
.generated-gallery,
.batch-image-gallery,
.competitor-research-gallery,
.product-reference-grid,
.digital-reference-grid,
.reference-upload-grid { gap: 15px; }

.generation-monitor {
  border: 1px solid var(--bx-line);
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--bx-violet) 7%, var(--bx-canvas)), var(--bx-canvas));
}
.generation-overall-track { overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--bx-violet) 9%, var(--bx-canvas)); }
.generation-overall-track > span,
.variation-progress-bar,
.setup-progress i {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--bx-orange), var(--bx-violet), var(--bx-cyan));
  box-shadow: 0 0 18px rgba(118,86,255,.24);
}
.generation-overall-track > span::after,
.variation-progress-bar::after,
.setup-progress i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation: bx-progress-shine 1.8s linear infinite;
}

/* Tables and technical content */
.table-wrap { border-radius: 17px; border: 1px solid var(--bx-line); box-shadow: var(--bx-shadow-1); }
table {
  border-color: var(--bx-line);
  border-radius: 16px;
  background: var(--bx-canvas);
}
thead th {
  color: rgba(255,255,255,.80);
  border-color: rgba(255,255,255,.06);
  background: linear-gradient(180deg, #211a2c, #15101d);
}
tbody td { color: var(--bx-ink); border-color: var(--bx-line); }
tbody tr { transition: background .16s ease; }
tbody tr:hover { background: color-mix(in srgb, var(--bx-violet) 5%, transparent); }
pre, code, .prompt-text, .batch-prompt-text, .json-preview, .console-panel, .generation-log {
  color: #ddd7e8;
  border-color: rgba(255,255,255,.08);
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    #0f0c15;
  background-size: 100% 25px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 16px 42px rgba(0,0,0,.12);
}

/* Aside */
.layout aside .sticky { top: 116px; }
.layout aside .results-card {
  border-radius: 22px;
  background: var(--bx-elevated);
  box-shadow: var(--bx-shadow-2);
}
.results-heading {
  border-bottom: 1px solid var(--bx-line);
  background: linear-gradient(135deg, color-mix(in srgb, var(--bx-violet) 8%, transparent), transparent);
}
.copybox { border-color: var(--bx-line); border-radius: 14px; background: color-mix(in srgb, var(--bx-canvas) 70%, transparent); }

footer {
  margin-top: 42px;
  padding: 18px 22px;
  border-color: var(--bx-line);
  border-radius: 18px;
  color: var(--bx-muted);
  background: var(--bx-canvas-soft);
  box-shadow: var(--bx-shadow-1);
}

/* Reveal and route motion */
[data-bx-reveal] {
  opacity: 0;
  transform: translateY(16px) scale(.992);
  transition: opacity .62s var(--bx-ease-out), transform .62s var(--bx-ease-out);
  transition-delay: var(--bx-reveal-delay, 0ms);
}
[data-bx-reveal].is-visible { opacity: 1; transform: translateY(0) scale(1); }
body.bx-route-transition main > :not(.hidden):not(.app-page-hidden),
body.bx-route-transition .digital-variations-workspace:not(.hidden):not(.app-page-hidden) {
  animation: bx-page-enter .46s var(--bx-ease-out) both;
}
body.theme-transition,
body.theme-transition *:not(.button-ripple) {
  transition-property: color, background-color, border-color, box-shadow, fill, stroke !important;
  transition-duration: .34s !important;
  transition-timing-function: ease !important;
}

/* Accessibility */
:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--bx-violet) 72%, #fff);
  outline-offset: 3px;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 2px; }

/* Animations */
@keyframes bx-logo-breathe {
  0%,100% { box-shadow: 0 14px 30px rgba(255,122,61,.22), inset 0 1px 0 rgba(255,255,255,.28); }
  50% { box-shadow: 0 18px 40px rgba(255,122,61,.34), 0 0 0 5px rgba(255,122,61,.045), inset 0 1px 0 rgba(255,255,255,.28); }
}
@keyframes bx-brand-shine { 0%,72% { transform: translateX(-130%) rotate(22deg); } 88%,100% { transform: translateX(150%) rotate(22deg); } }
@keyframes bx-grid-drift { to { background-position: 34px 34px; } }
@keyframes bx-terminal-float { 0%,100% { transform: translateY(0) rotateX(0deg); } 50% { transform: translateY(-8px) rotateX(.6deg); } }
@keyframes bx-float-card { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes bx-orbit { from { transform: translate3d(-4%, -3%, 0) scale(.92); } to { transform: translate3d(8%, 7%, 0) scale(1.08); } }
@keyframes bx-progress-shine { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
@keyframes bx-ripple { to { transform: translate(-50%, -50%) scale(5); opacity: 0; } }
@keyframes bx-page-enter { from { opacity: .2; transform: translateY(12px); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }

/* Responsive */
@media (max-width: 1380px) {
  .layout { grid-template-columns: minmax(0,1fr) 330px; }
  .canva-hero { min-height: 550px; }
  .canva-hero h2 { font-size: clamp(3rem, 6.1vw, 6.1rem); }
}

@media (max-width: 1120px) {
  .layout { grid-template-columns: 1fr; }
  .layout aside .sticky { position: static; }
  .layout aside { order: 2; }
  .premium-theme-switcher { display: none; }
  #themeButton { display: inline-flex !important; }
}

@media (max-width: 980px) {
  .shell { padding: 10px 10px 92px; }
  .app-header { top: 8px; }
  .section-nav.canva-rail { inset: auto 9px 9px; width: auto; height: 72px; border-radius: 20px; }
  .canva-hero { min-height: auto; padding: 68px 24px 240px; }
  .canva-hero h2 { font-size: clamp(3rem, 10vw, 5.2rem); }
  .luxury-automation-hero, .variations-hero { min-height: auto; }
}

@media (max-width: 720px) {
  .app-header { border-radius: 17px; }
  .brand-block p, .topbar-health, #saveButton, #loadButton { display: none; }
  .header-actions { gap: 5px; }
  .header-actions .subtle-danger { max-width: 92px; min-height: 36px; padding: 7px 9px; font-size: .62rem; }
  .canva-hero { padding: 62px 18px 282px; border-radius: 26px; }
  .canva-hero h2 { font-size: clamp(2.85rem, 14vw, 4.6rem); }
  .canva-tool-strip { max-height: 250px; overflow: auto; }
  .luxury-automation-hero, .variations-hero { padding: 32px 20px; border-radius: 25px; }
  .luxury-automation-hero h2, .variations-hero h2 { font-size: clamp(2.5rem, 12vw, 4.2rem); }
  .workspace-card { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-bx-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ========================================
   Strict theme separation + code-only previews
   Light is fully light. Dark is fully dark.
======================================== */

/* Shared dashboard card composition */
.recent-workspace {
  padding-top: 18px;
}
.recent-heading-row {
  align-items: end;
  margin-bottom: 20px;
}
.recent-project-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.project-tile {
  min-width: 0;
  border-radius: 22px;
  transform: translateZ(0);
}
.project-preview {
  position: relative;
  min-height: 228px;
  isolation: isolate;
  overflow: hidden;
}
.project-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(118,86,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(118,86,255,.05) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.62) 78%, transparent);
}
.project-preview::after {
  content: "";
  position: absolute;
  inset: auto -16% -48% 24%;
  z-index: 0;
  height: 78%;
  pointer-events: none;
  border-radius: 50%;
}
.project-preview > * {
  position: absolute;
  z-index: 1;
}
.preview-private {
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 5px 9px;
  border-radius: 8px;
  font-size: .72rem;
  font-weight: 760;
  letter-spacing: .01em;
}
.project-meta {
  min-height: 88px;
  padding: 16px 17px 18px;
}
.project-meta strong {
  display: block;
  font-size: .98rem;
  line-height: 1.2;
}
.project-meta small {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .76rem;
  line-height: 1.35;
}

/* Code-built automation preview */
.preview-automation .flow-node {
  top: 50%;
  display: grid;
  place-items: center;
  width: 60px;
  height: 54px;
  border-radius: 14px;
  font-size: .74rem;
  font-style: normal;
  font-weight: 840;
  letter-spacing: .04em;
}
.preview-automation .n1 { left: 14%; transform: translateY(-10%); }
.preview-automation .n2 { left: 50%; transform: translate(-50%, -55%); }
.preview-automation .n3 { right: 14%; transform: translateY(14%); }
.preview-automation .flow-line {
  top: 51%;
  width: 24%;
  height: 2px;
  border: 0;
  transform-origin: left center;
}
.preview-automation .l1 { left: 27%; transform: rotate(-13deg); }
.preview-automation .l2 { left: 56%; transform: rotate(12deg); }
.preview-automation .flow-line::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translateY(-50%);
}

/* Code-built research preview */
.preview-research .mini-chart {
  left: 9%;
  right: 9%;
  bottom: 32px;
  height: 62%;
  display: flex;
  align-items: end;
  gap: 7px;
}
.preview-research .mini-chart i {
  flex: 1;
  min-width: 0;
  border-radius: 7px 7px 2px 2px;
  transform-origin: bottom;
  animation: bx-mini-bar 4.8s var(--bx-ease) infinite alternate;
}
.preview-research .mini-chart i:nth-child(2) { animation-delay: -.7s; }
.preview-research .mini-chart i:nth-child(3) { animation-delay: -1.4s; }
.preview-research .mini-chart i:nth-child(4) { animation-delay: -2.1s; }
.preview-research .mini-chart i:nth-child(5) { animation-delay: -2.8s; }
.preview-research .chart-title {
  left: 9%;
  bottom: 18px;
  font-size: .68rem;
  font-weight: 720;
}
.preview-research .chart-number {
  right: 9%;
  bottom: 14px;
  font-size: 1.05rem;
  font-weight: 850;
}

/* Code-built extraction preview */
.preview-extract .listing-photo {
  left: 9%;
  top: 22%;
  width: 44%;
  height: 58%;
  border-radius: 16px;
}
.preview-extract .listing-photo::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.92), rgba(255,255,255,.08) 62%, transparent 66%);
  opacity: .62;
}
.preview-extract .listing-lines {
  left: 58%;
  right: 9%;
  top: 27%;
  display: grid;
  gap: 10px;
}
.preview-extract .listing-lines i {
  position: static;
  display: block;
  height: 7px;
  border-radius: 99px;
}
.preview-extract .listing-lines i:nth-child(2) { width: 78%; }
.preview-extract .listing-lines i:nth-child(3) { width: 55%; }
.preview-extract .listing-lines b {
  margin-top: 8px;
  font-size: .92rem;
}

/* Code-built SEO preview */
.preview-seo .seo-paper {
  inset: 17% 11% 14%;
  padding: 22px;
  border-radius: 17px;
}
.preview-seo .seo-paper b {
  display: block;
  margin-bottom: 17px;
  font-size: .72rem;
}
.preview-seo .seo-paper i {
  position: static;
  display: block;
  height: 7px;
  margin: 8px 0;
  border-radius: 99px;
}
.preview-seo .seo-paper i:nth-of-type(2) { width: 78%; }
.preview-seo .seo-paper i:nth-of-type(3) { width: 58%; }
.preview-seo .seo-paper span {
  left: 22px;
  bottom: 18px;
  font-size: .66rem;
  font-weight: 800;
}

/* Code-built image studio preview */
.preview-images .image-mosaic {
  inset: 12% 6% 9%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 7px;
}
.preview-images .image-mosaic i {
  position: static;
  border-radius: 10px;
}
.preview-images .image-mosaic i:nth-child(1) {
  background:
    radial-gradient(circle at 60% 38%, rgba(255,255,255,.65), transparent 12%),
    radial-gradient(circle at 56% 48%, rgba(118,86,255,.76), transparent 30%),
    linear-gradient(145deg, rgba(255,122,61,.65), rgba(118,86,255,.54));
}
.preview-images .image-mosaic i:nth-child(2) {
  background:
    linear-gradient(135deg, transparent 42%, rgba(46,205,183,.78) 43% 58%, transparent 59%),
    linear-gradient(145deg, rgba(46,205,183,.56), rgba(118,86,255,.54));
}
.preview-images .image-mosaic i:nth-child(3) {
  background:
    radial-gradient(circle at 40% 50%, rgba(255,122,61,.78), transparent 22%),
    linear-gradient(145deg, rgba(118,86,255,.58), rgba(255,122,61,.48));
}
.preview-images .image-mosaic i:nth-child(4) {
  background:
    radial-gradient(circle at 60% 40%, rgba(46,205,183,.78), transparent 24%),
    linear-gradient(145deg, rgba(118,86,255,.54), rgba(46,205,183,.48));
}
.preview-images .image-count {
  right: 12px;
  bottom: 10px;
  padding: 6px 8px;
  border-radius: 9px;
  font-size: .68rem;
  font-weight: 850;
}

/* Code-built competitor grid */
.preview-competitors .competitor-grid {
  inset: 13% 6% 11%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 7px;
}
.preview-competitors .competitor-grid i {
  position: static;
  border-radius: 9px;
}
.preview-competitors .competitor-grid i:nth-child(1),
.preview-competitors .competitor-grid i:nth-child(5) {
  background: linear-gradient(145deg, rgba(118,86,255,.32), rgba(46,205,183,.20));
}
.preview-competitors .competitor-grid i:nth-child(2),
.preview-competitors .competitor-grid i:nth-child(6) {
  background: linear-gradient(145deg, rgba(46,205,183,.26), rgba(255,122,61,.20));
}
.preview-competitors .competitor-grid i:nth-child(3),
.preview-competitors .competitor-grid i:nth-child(4) {
  background: linear-gradient(145deg, rgba(255,122,61,.26), rgba(118,86,255,.24));
}
.preview-competitors .winner-badge {
  right: 12px;
  bottom: 10px;
  padding: 6px 9px;
  border-radius: 9px;
  font-size: .62rem;
  font-weight: 860;
}

/* Code-built package and deployment previews */
.preview-export .folder-shape {
  left: 15%;
  right: 15%;
  top: 26%;
  bottom: 17%;
  border-radius: 18px;
}
.preview-export .folder-shape::before {
  content: "";
  position: absolute;
  left: 10%;
  top: -15%;
  width: 38%;
  height: 28%;
  border-radius: 10px 10px 0 0;
  background: inherit;
  border: inherit;
  border-bottom: 0;
}
.preview-export .download-cloud {
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 58px;
  height: 50px;
  border-radius: 16px;
  transform: translate(-50%, -38%);
}
.preview-export .download-cloud svg { width: 25px; height: 25px; }
.preview-deploy .deploy-orb {
  left: 50%;
  top: 47%;
  display: grid;
  place-items: center;
  width: 126px;
  height: 126px;
  transform: translate(-50%, -45%);
}
.preview-deploy .deploy-orb::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  filter: blur(.2px);
}
.preview-deploy .deploy-orb::after {
  content: "";
  position: absolute;
  inset: 24px;
  border: 1px solid currentColor;
  border-radius: 50%;
  box-shadow: 0 0 0 11px color-mix(in srgb, currentColor 8%, transparent), 0 0 30px color-mix(in srgb, currentColor 25%, transparent);
}
.preview-deploy .deploy-orb i {
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 10px;
}
.preview-deploy .deploy-orb b,
.preview-deploy .deploy-orb small {
  z-index: 2;
  position: absolute;
  left: 50%;
  white-space: nowrap;
  transform: translateX(-50%);
}
.preview-deploy .deploy-orb b { top: 132px; font-size: .7rem; }
.preview-deploy .deploy-orb small { top: 151px; font-size: .58rem; opacity: .64; }

/* Adaptive LIGHT mode */
html[data-theme="light"] body,
body.light {
  color: #17151c;
  background:
    radial-gradient(60rem 42rem at 102% -8%, rgba(118,86,255,.09), transparent 62%),
    radial-gradient(52rem 40rem at -10% 16%, rgba(255,122,61,.07), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f7f5f1 52%, #f2f0eb 100%);
}
html[data-theme="light"] .section-nav.canva-rail,
body.light .section-nav.canva-rail {
  color: #25212b;
  border-color: rgba(30,24,37,.10);
  background:
    radial-gradient(14rem 18rem at 50% -6%, rgba(118,86,255,.10), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,246,241,.98));
  box-shadow: 0 22px 60px rgba(31,24,39,.10), inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-theme="light"] .section-nav.canva-rail::before,
body.light .section-nav.canva-rail::before {
  opacity: .55;
  background-image: linear-gradient(rgba(28,22,35,.035) 1px, transparent 1px);
}
html[data-theme="light"] .nav-item,
html[data-theme="light"] .rail-footer-button,
body.light .nav-item,
body.light .rail-footer-button {
  color: #635d68;
}
html[data-theme="light"] .nav-item:hover,
html[data-theme="light"] .nav-item.active,
body.light .nav-item:hover,
body.light .nav-item.active {
  color: #231e2a;
  border-color: rgba(118,86,255,.18);
  background: rgba(118,86,255,.08);
}
html[data-theme="light"] .rail-logo,
body.light .rail-logo {
  color: #fff;
  background: linear-gradient(145deg, #7656ff, #ff7a3d);
}
html[data-theme="light"] .rail-avatar,
body.light .rail-avatar {
  color: #3e3548;
  border-color: rgba(30,24,37,.10);
  background: #fff;
}
html[data-theme="light"] .app-header,
body.light .app-header {
  color: #17151c;
  border-color: rgba(30,24,37,.08);
  background: rgba(255,255,255,.86);
  box-shadow: 0 14px 36px rgba(31,24,39,.06);
}
html[data-theme="light"] .project-tile,
body.light .project-tile {
  border-color: rgba(30,24,37,.095);
  background: #fff;
  box-shadow: 0 12px 34px rgba(32,25,40,.055);
}
html[data-theme="light"] .project-meta,
body.light .project-meta {
  color: #17151c;
  background: #fff;
}
html[data-theme="light"] .project-preview,
body.light .project-preview {
  border-bottom-color: rgba(30,24,37,.08);
  background:
    radial-gradient(circle at 78% 20%, rgba(118,86,255,.11), transparent 30%),
    radial-gradient(circle at 18% 84%, rgba(46,205,183,.10), transparent 34%),
    linear-gradient(145deg, #fdfcff, #f1eef7 60%, #eeece8);
}
html[data-theme="light"] .project-preview::after,
body.light .project-preview::after {
  background: radial-gradient(circle, rgba(118,86,255,.12), transparent 68%);
}
html[data-theme="light"] .preview-private,
body.light .preview-private {
  color: #615a68;
  border-color: rgba(30,24,37,.10);
  background: rgba(255,255,255,.80);
  box-shadow: 0 8px 22px rgba(31,24,39,.07);
}
html[data-theme="light"] .preview-research .chart-title,
html[data-theme="light"] .preview-research .chart-number,
html[data-theme="light"] .preview-extract .listing-lines b,
body.light .preview-research .chart-title,
body.light .preview-research .chart-number,
body.light .preview-extract .listing-lines b {
  color: #29232f;
}
html[data-theme="light"] .preview-extract .listing-lines i,
body.light .preview-extract .listing-lines i,
html[data-theme="light"] .preview-seo .seo-paper i,
body.light .preview-seo .seo-paper i {
  background: rgba(31,24,39,.13);
}
html[data-theme="light"] .preview-seo .seo-paper,
body.light .preview-seo .seo-paper {
  color: #29232f;
  border-color: rgba(30,24,37,.09);
  background: rgba(255,255,255,.80);
  box-shadow: 0 18px 38px rgba(31,24,39,.08);
}
html[data-theme="light"] .preview-competitors .competitor-grid i,
body.light .preview-competitors .competitor-grid i,
html[data-theme="light"] .preview-images .image-mosaic i,
body.light .preview-images .image-mosaic i {
  border-color: rgba(30,24,37,.08);
}
html[data-theme="light"] .preview-export .folder-shape,
body.light .preview-export .folder-shape {
  border-color: rgba(30,24,37,.08);
  background: rgba(255,255,255,.72);
  box-shadow: 0 18px 42px rgba(31,24,39,.08);
}
html[data-theme="light"] .preview-deploy .deploy-orb,
body.light .preview-deploy .deploy-orb {
  color: #7656ff;
}
html[data-theme="light"] .luxury-automation-hero,
html[data-theme="light"] .variations-hero,
body.light .luxury-automation-hero,
body.light .variations-hero {
  color: #17151c;
  border-color: rgba(30,24,37,.10);
  background:
    radial-gradient(32rem 25rem at 12% 12%, rgba(118,86,255,.13), transparent 72%),
    radial-gradient(30rem 24rem at 92% 15%, rgba(46,205,183,.11), transparent 72%),
    radial-gradient(22rem 20rem at 72% 100%, rgba(255,122,61,.08), transparent 72%),
    linear-gradient(135deg, #ffffff, #f7f4fb 56%, #f2f5f5);
  box-shadow: 0 30px 80px rgba(31,24,39,.09), inset 0 1px 0 rgba(255,255,255,.92);
}
html[data-theme="light"] .luxury-automation-hero::before,
html[data-theme="light"] .variations-hero::before,
body.light .luxury-automation-hero::before,
body.light .variations-hero::before {
  opacity: .52;
  background-image: linear-gradient(rgba(31,24,39,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(31,24,39,.035) 1px, transparent 1px);
}
html[data-theme="light"] .luxury-automation-hero h2,
html[data-theme="light"] .variations-hero h2,
body.light .luxury-automation-hero h2,
body.light .variations-hero h2 {
  color: #17151c;
}
html[data-theme="light"] .luxury-automation-hero p,
html[data-theme="light"] .variations-hero p,
body.light .luxury-automation-hero p,
body.light .variations-hero p {
  color: #6f6877;
}
html[data-theme="light"] .luxury-canvas-card,
body.light .luxury-canvas-card {
  border-color: rgba(30,24,37,.10);
  background: rgba(255,255,255,.74);
  box-shadow: 0 30px 68px rgba(31,24,39,.10), inset 0 1px 0 #fff;
}
html[data-theme="light"] .luxury-canvas-grid span,
body.light .luxury-canvas-grid span {
  border-color: rgba(30,24,37,.07);
  background: linear-gradient(145deg, rgba(118,86,255,.10), rgba(46,205,183,.07));
}
html[data-theme="light"] .luxury-floating-chip,
body.light .luxury-floating-chip {
  color: #433c49;
  border-color: rgba(30,24,37,.10);
  background: rgba(255,255,255,.88);
  box-shadow: 0 14px 34px rgba(31,24,39,.10);
}
html[data-theme="light"] .variations-hero-badge,
body.light .variations-hero-badge {
  color: #29232f;
  border-color: rgba(30,24,37,.10);
  background: rgba(255,255,255,.76);
  box-shadow: 0 18px 42px rgba(31,24,39,.09);
}
html[data-theme="light"] .variations-hero-badge strong,
body.light .variations-hero-badge strong { color: #17151c; }
html[data-theme="light"] .variations-hero-badge span,
body.light .variations-hero-badge span { color: #7c7484; }

/* Adaptive DARK mode */
html[data-theme="dark"] body,
body.dark {
  color: #fbfaf7;
  background:
    radial-gradient(70rem 48rem at 102% -8%, rgba(118,86,255,.14), transparent 62%),
    radial-gradient(56rem 42rem at -10% 20%, rgba(255,122,61,.09), transparent 62%),
    linear-gradient(180deg, #0f0c15 0%, #0b0910 58%, #09070d 100%);
}
html[data-theme="dark"] .project-preview,
body.dark .project-preview {
  border-bottom-color: rgba(255,255,255,.075);
  background:
    radial-gradient(circle at 78% 20%, rgba(118,86,255,.16), transparent 30%),
    radial-gradient(circle at 18% 84%, rgba(46,205,183,.10), transparent 34%),
    linear-gradient(145deg, #171120, #0d0a13);
}
html[data-theme="dark"] .project-preview::after,
body.dark .project-preview::after {
  background: radial-gradient(circle, rgba(139,92,246,.20), transparent 68%);
}
html[data-theme="dark"] .preview-automation .flow-node,
body.dark .preview-automation .flow-node {
  color: #fff;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(145deg, rgba(139,92,246,.74), rgba(255,122,61,.58));
  box-shadow: 0 14px 30px rgba(0,0,0,.34);
}
html[data-theme="light"] .preview-automation .flow-node,
body.light .preview-automation .flow-node {
  color: #fff;
  border: 1px solid rgba(118,86,255,.14);
  background: linear-gradient(145deg, #7656ff, #ff7a3d);
  box-shadow: 0 14px 30px rgba(118,86,255,.18);
}
.preview-automation .flow-line { background: linear-gradient(90deg, #2ecdb7, #7656ff); }
.preview-automation .flow-line::after { background: #7656ff; box-shadow: 0 0 14px rgba(118,86,255,.55); }
.preview-research .mini-chart i { background: linear-gradient(180deg, #ff9a67, #e85a26); box-shadow: 0 8px 20px rgba(255,122,61,.18); }
.preview-extract .listing-photo { background: linear-gradient(145deg, rgba(46,205,183,.82), rgba(118,86,255,.70)); box-shadow: 0 20px 40px rgba(29,17,39,.20); }
.preview-seo .seo-paper span { color: #ff7a3d; }
.preview-images .image-count { color: #251822; background: linear-gradient(145deg, #ffe9df, #ffb08b); }
.preview-competitors .winner-badge { color: #261821; background: linear-gradient(145deg, #ffbd92, #ff7a3d); }
.preview-export .download-cloud { color: #17101b; background: linear-gradient(145deg, #fff5ed, #ffb187); box-shadow: 0 14px 32px rgba(255,122,61,.20); }
.preview-deploy .deploy-orb { color: #b8a8ff; }
.preview-deploy .deploy-orb::before { background: radial-gradient(circle, rgba(46,205,183,.84), rgba(118,86,255,.72) 44%, transparent 72%); }
.preview-deploy .deploy-orb i { background: linear-gradient(145deg, #2ecdb7, #7656ff); }

/* Restore original code-built page hero visual */
.luxury-canvas-card {
  position: relative;
  overflow: hidden;
}
.luxury-canvas-top,
.luxury-canvas-grid {
  display: flex;
}
.luxury-canvas-grid {
  display: grid;
}

@keyframes bx-mini-bar {
  from { transform: scaleY(.92); filter: saturate(.95); }
  to { transform: scaleY(1.02); filter: saturate(1.15); }
}

@media (max-width: 1220px) {
  .recent-project-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 920px) {
  .recent-project-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .recent-project-grid { grid-template-columns: 1fr; }
  .project-preview { min-height: 210px; }
}

@media (prefers-reduced-motion: reduce) {
  .preview-research .mini-chart i { animation: none !important; }
}


/* ==========================================================
   Light-mode dark rail + precise icon/button alignment
   ========================================================== */
html[data-theme="light"] .section-nav.canva-rail,
body.light .section-nav.canva-rail {
  color: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.08);
  background:
    radial-gradient(14rem 18rem at 50% -6%, rgba(118,86,255,.27), transparent 70%),
    radial-gradient(12rem 16rem at 50% 104%, rgba(255,122,61,.10), transparent 72%),
    linear-gradient(180deg, #17131f 0%, #0b0911 56%, #08070c 100%);
  box-shadow: 0 28px 80px rgba(20,14,28,.24), inset 0 1px 0 rgba(255,255,255,.08);
}
html[data-theme="light"] .section-nav.canva-rail::before,
body.light .section-nav.canva-rail::before {
  opacity: .40;
  background-image: linear-gradient(rgba(255,255,255,.027) 1px, transparent 1px);
}
html[data-theme="light"] .section-nav.canva-rail .nav-item,
html[data-theme="light"] .rail-footer-button,
body.light .section-nav.canva-rail .nav-item,
body.light .rail-footer-button {
  color: rgba(255,255,255,.62);
}
html[data-theme="light"] .section-nav.canva-rail .nav-item:hover,
body.light .section-nav.canva-rail .nav-item:hover {
  color: #fff;
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.07);
}
html[data-theme="light"] .section-nav.canva-rail .nav-item.active,
body.light .section-nav.canva-rail .nav-item.active {
  color: #fff;
  border-color: rgba(255,164,113,.24);
  background: linear-gradient(135deg, rgba(255,122,61,.22), rgba(118,86,255,.28));
  box-shadow: inset 3px 0 0 #ff7a3d, 0 13px 32px rgba(0,0,0,.26);
}
html[data-theme="light"] .section-nav.canva-rail .nav-item.active .nav-icon,
body.light .section-nav.canva-rail .nav-item.active .nav-icon {
  color: #fff;
  background: rgba(255,255,255,.06);
}
html[data-theme="light"] .rail-create,
body.light .rail-create {
  color: rgba(255,255,255,.80);
}
html[data-theme="light"] .rail-create:hover,
body.light .rail-create:hover {
  color: #fff;
  background: rgba(255,255,255,.06);
}
html[data-theme="light"] .rail-create-icon,
body.light .rail-create-icon {
  color: #fff;
  background: linear-gradient(145deg, #ff9f72, #7656ff);
  box-shadow: 0 11px 24px rgba(118,86,255,.30);
}
html[data-theme="light"] .rail-avatar,
body.light .rail-avatar {
  color: #1b1522;
  border-color: rgba(255,255,255,.14);
  background: #fff;
  box-shadow: 0 9px 24px rgba(0,0,0,.30);
}
html[data-theme="light"] .rail-footer,
body.light .rail-footer {
  border-top-color: rgba(255,255,255,.08);
}
html[data-theme="light"] .rail-footer-button:hover,
body.light .rail-footer-button:hover {
  color: #fff;
  background: rgba(255,255,255,.09);
}

/* Center every rail icon and label precisely. */
.section-nav.canva-rail {
  align-items: center;
}
.section-nav.canva-rail .rail-links {
  width: 100%;
  display: grid;
  justify-items: center;
  align-content: start;
}
.section-nav.canva-rail .nav-item,
.rail-create,
.rail-logo,
.rail-footer-button,
.rail-avatar {
  flex: 0 0 auto;
}
.section-nav.canva-rail .nav-item {
  width: 68px;
  max-width: 68px;
  min-height: 62px;
  margin-inline: auto;
  padding: 7px 4px 6px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 32px auto;
  place-items: center;
  align-content: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}
.section-nav.canva-rail .nav-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  line-height: 1;
}
.section-nav.canva-rail .nav-icon svg {
  display: block;
  width: 19px;
  height: 19px;
  margin: auto;
}
.section-nav.canva-rail .nav-item > span:last-child,
.section-nav.canva-rail .nav-item strong {
  width: 100%;
  min-width: 0;
  margin: 0;
  text-align: center;
  line-height: 1.05;
}
.rail-logo,
.rail-footer-button,
.rail-avatar,
.rail-create-icon {
  display: grid;
  place-items: center;
  margin-inline: auto;
}
.rail-logo svg,
.rail-footer-button svg {
  display: block;
  margin: auto;
}

/* Keep all header controls centered, clickable and orderly. */
.header-tools {
  max-width: none;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
.header-actions > *,
.premium-theme-switcher,
.premium-theme-switcher button,
.header-actions button,
.header-actions .icon-button {
  align-self: center;
}
.premium-theme-switcher {
  display: inline-grid;
  grid-template-columns: repeat(3, 34px);
  place-items: center;
  height: 42px;
  min-height: 42px;
}
.premium-theme-switcher button,
.header-actions .icon-button {
  display: grid;
  place-items: center;
  line-height: 1;
}
.premium-theme-switcher button svg,
.header-actions .icon-button svg {
  display: block;
  margin: auto;
}
.header-actions #saveButton,
.header-actions #loadButton {
  min-width: 78px;
  min-height: 42px;
  display: inline-grid;
  place-items: center;
}
.header-actions #clearAutosaveButton {
  min-width: 208px;
  min-height: 42px;
  display: inline-grid;
  place-items: center;
  text-align: center;
}
.autosave-status {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

@media (max-width: 1250px) {
  .app-header { align-items: flex-start; }
  .header-tools { max-width: 560px; flex-wrap: wrap; }
  .header-actions { width: 100%; }
}

@media (max-width: 860px) {
  .header-tools,
  .header-actions {
    width: 100%;
    justify-content: center;
  }
  .header-actions #clearAutosaveButton {
    min-width: min(100%, 230px);
  }
}

/* ==========================================================
   Dashboard command-search layout repair
   - prevents Safari/Chrome from painting the search input white
   - keeps search results in normal flow
   - gives the quick-tool buttons their own non-overlapping row
   ========================================================== */
.canva-hero {
  grid-template-rows: auto auto;
  align-items: center;
  row-gap: clamp(24px, 3vw, 38px);
  padding-bottom: clamp(30px, 4vw, 54px);
}
.canva-hero-inner,
.eto-terminal-visual {
  min-width: 0;
  align-self: center;
}
.canva-command-search {
  position: relative;
  z-index: 20;
  overflow: visible;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  grid-auto-rows: auto;
  align-items: center;
  background: rgba(15, 11, 22, .84) !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 54px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(22px) saturate(1.12);
  -webkit-backdrop-filter: blur(22px) saturate(1.12);
}
.canva-command-search > svg {
  position: relative;
  z-index: 2;
  color: rgba(255,255,255,.72) !important;
  fill: currentColor !important;
}
.canva-command-search input,
html[data-theme="light"] .canva-command-search input,
html[data-theme="dark"] .canva-command-search input,
body.light .canva-command-search input,
body.dark .canva-command-search input {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #bba9ff;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
}
.canva-command-search input:hover,
.canva-command-search input:focus,
.canva-command-search input:active {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.canva-command-search input::placeholder {
  color: rgba(255,255,255,.42) !important;
  -webkit-text-fill-color: rgba(255,255,255,.42) !important;
}
.canva-command-search input:-webkit-autofill,
.canva-command-search input:-webkit-autofill:hover,
.canva-command-search input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px rgba(15,11,22,.98) inset !important;
  box-shadow: 0 0 0 1000px rgba(15,11,22,.98) inset !important;
  transition: background-color 9999s ease-out 0s;
}
.canva-command-search kbd {
  position: relative;
  z-index: 2;
  color: rgba(255,255,255,.68) !important;
  border-color: rgba(255,255,255,.13) !important;
  background: rgba(255,255,255,.06) !important;
}

/* Results become a second grid row, so they expand the hero instead of
   floating over the tool buttons. */
.dashboard-home .command-suggestions {
  position: static;
  grid-column: 1 / -1;
  width: auto;
  max-height: 300px;
  margin: 8px -8px -8px;
  overflow-x: hidden;
  overflow-y: auto;
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(11,8,16,.98);
  box-shadow: 0 24px 64px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.dashboard-home .command-suggestions:not(.visible) {
  display: none;
}
.dashboard-home .command-suggestions.visible {
  display: grid;
}
.dashboard-home .command-suggestion {
  min-width: 0;
  color: rgba(255,255,255,.90);
  border-bottom-color: rgba(255,255,255,.07);
  background: transparent;
}
.dashboard-home .command-suggestion:hover:not(:disabled),
.dashboard-home .command-suggestion.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(118,86,255,.22), rgba(255,122,61,.10));
}
.dashboard-home .command-suggestion small {
  color: rgba(255,255,255,.48);
}

.canva-tool-strip {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 4;
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  margin: 0;
  align-self: end;
}
.canva-tool {
  position: relative;
  z-index: 1;
  cursor: pointer;
  pointer-events: auto;
}

@media (max-width: 1040px) {
  .canva-hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .canva-hero-inner,
  .eto-terminal-visual,
  .canva-tool-strip {
    grid-column: 1;
  }
  .eto-terminal-visual {
    min-height: 300px;
  }
}

@media (max-width: 720px) {
  .canva-hero {
    padding-bottom: 24px;
  }
  .canva-command-search {
    grid-template-columns: 24px minmax(0,1fr);
    padding-right: 14px;
  }
  .canva-command-search kbd {
    display: none;
  }
  .dashboard-home .command-suggestions {
    margin-inline: -6px;
    max-height: 260px;
  }
}