/* Figma 19:1013 / 19:1073 supply the dark palette; the live flow owns layout. */
/* Avoid repainting the entire 2000 × 1500 canvas throughout a color fade. */
html,body,.canvas{transition:none}
.theme-changing .wizard,.theme-changing .wizard *,.theme-changing .wizard *:before,.theme-changing .wizard *:after{transition-property:transform!important}
html[data-theme=dark],html[data-theme=dark] body,html[data-theme=dark] .canvas{background:#1e1e1e}
html[data-theme=dark]{color-scheme:dark}
.wizard-stage{
  --surface:#fff;
  --tile:#fff;
  --control:#fff;
  --field:#fff;
  --text:#0a0d14;
  --muted:#525866;
  --secondary-muted:#717182;
  --changelog-muted:#525866;
  --control-text:#525866;
  --placeholder:#868c98;
  --stroke:#e2e4e9;
  --divider:#e2e4e9;
  --hover:#f6f8fa;
  --header-hover:#fafbfc;
  --disabled-bg:#f6f8fa;
  --disabled-text:#868c98;
  --custom-bg:#edf0f7;
  --suggestions-bg:#f5f8ff;
  --sources-bg:#f6f8fa;
  --source-icon-bg:#ebf1ff;
  --pending-bg:#fff;
  --pending-border:#e2e4e9;
  --toggle-off:#cdd0d5;
  --toggle-off-border:transparent;
  --toggle-thumb:#fff;
  --primary-bg:#20232d;
  --primary-text:#fff;
  --continue-text:#fff;
  --primary-hover:#343844;
  --focus-border:#999;
  --focus-ring:#e9e9e9;
  --input-hover:#caced7;
  --control-shadow:0 1px 2px #5258660f;
  --input-shadow:0 1px 2px #e4e5e73d;
  --loading-idle:#c1c4cd;
  --loading-active:#3e4784;
  --confirm-loading-idle:#ffffff59;
  --confirm-loading-active:#fff;
  position:absolute;left:1000px;top:750px;transform:translate(-50%,-50%);width:702px;
}
.wizard-stage[data-theme=dark]{
  --surface:#1a1a1a;
  --tile:#1f1f1f;
  --control:#242424;
  --field:#1f1f1f;
  --text:#fff;
  --muted:#727272;
  --secondary-muted:#727272;
  --changelog-muted:#525866;
  --control-text:#fff;
  --placeholder:#727272;
  --stroke:#2c2c2c;
  --divider:#2e2e2e;
  --hover:#2b2b2b;
  --header-hover:#202020;
  --disabled-bg:#1f1f1f;
  --disabled-text:#474747;
  --custom-bg:#2b2b2b;
  --suggestions-bg:#242424;
  --sources-bg:#242424;
  --source-icon-bg:#2b2b2b;
  --pending-bg:#292929;
  --pending-border:#363636;
  --toggle-off:#262626;
  --toggle-off-border:#2c2c2c;
  --toggle-thumb:#727272;
  --primary-bg:#fff;
  --primary-text:#393939;
  --continue-text:#0a0d14;
  --primary-hover:#e9e9e9;
  --focus-border:#727272;
  --focus-ring:#333;
  --input-hover:#454545;
  --control-shadow:0 0 0 transparent;
  --input-shadow:0 0 0 transparent;
  --loading-idle:#727272;
  --loading-active:#fff;
  --confirm-loading-idle:#c1c4cd;
  --confirm-loading-active:#3e4784;
}
.wizard-stage .wizard{position:relative;left:auto;top:auto;transform:none;background:var(--surface);color:var(--text);color-scheme:light;outline:1px solid #e2e4e9}
.wizard-stage[data-theme=dark] .wizard{color-scheme:dark;outline:1px solid #2e2e2e}
.wizard-stage :is(.wizard,.step-header,.selected-chip,.empty-selected,input,.manual-add,.custom-logo,.suggestions,.competitor,.toggle-company,.confirm,.source-grid,.source-card,.source-icon,.pending>span){
  transition:background-color 260ms ease,color 260ms ease,border-color 260ms ease,box-shadow 260ms ease,transform 180ms cubic-bezier(.22,1,.36,1);
}
.wizard-stage :is(.intro p,.suggestions-intro p,.source-copy p,.manual-add-label){transition:color 260ms ease}
.wizard-stage .step-header{box-shadow:inset 0 -1px var(--divider)}
.wizard-stage .next-step{box-shadow:inset 0 1px var(--divider)}
.wizard-stage :is(.intro p,.suggestions-intro p,.source-copy p){color:var(--muted)}
.wizard-stage .secondary-source .source-copy p{color:var(--secondary-muted)}
.wizard-stage #changelog-description{color:var(--changelog-muted)}
.wizard-stage :is(.selected-chip,.toggle-company){background:var(--control);color:var(--control-text);box-shadow:inset 0 0 0 1px var(--stroke),var(--control-shadow)}
.wizard-stage :is(.selected-chip,.toggle-company):hover{background:var(--hover)}
.wizard-stage .toggle-company[aria-pressed=true]{background:transparent;box-shadow:none}
.wizard-stage .toggle-company[aria-pressed=true]:hover{background:var(--hover)}
.wizard-stage .custom-logo{background:var(--custom-bg);color:var(--control-text)}
.wizard-stage .empty-selected{border-color:var(--stroke);background:var(--field);color:var(--placeholder)}
.wizard-stage input{background:var(--field);border-color:var(--stroke);color:var(--text);box-shadow:var(--input-shadow)}
.wizard-stage input::placeholder{color:var(--placeholder)}
.wizard-stage input:hover{border-color:var(--input-hover)}
.wizard-stage input:focus{border-color:var(--focus-border);box-shadow:0 0 0 3px var(--focus-ring)}
.wizard-stage input:focus-visible{outline:none}
.wizard-stage .manual-add{background:var(--disabled-bg);color:var(--disabled-text)}
.wizard-stage .manual-add:not(:disabled){background:var(--control);color:var(--control-text);box-shadow:inset 0 0 0 1px var(--stroke),var(--control-shadow)}
.wizard-stage .manual-add:not(:disabled):hover{background:var(--hover)}
.wizard-stage[data-theme=dark] .manual-add:not(:disabled)>img{filter:brightness(0) invert(1)}
.wizard-stage .manual-add.is-fetching{background:var(--hover);color:var(--control-text);box-shadow:none}
.wizard-stage .manual-add.is-fetching .manual-add-label{color:var(--control-text)}
.wizard-stage .suggestions{background:var(--suggestions-bg)}
.wizard-stage :is(.competitor,.source-card){background:var(--tile)}
.wizard-stage .confirm{background:var(--primary-bg);color:var(--primary-text);box-shadow:var(--control-shadow)}
.wizard-stage .continue{color:var(--continue-text)}
.wizard-stage .confirm:hover{background:var(--primary-hover)}
.wizard-stage .confirm:disabled{background:var(--disabled-bg);color:var(--disabled-text);box-shadow:none}
.wizard-stage .pending>span{background:var(--pending-bg);border-color:var(--pending-border)}
.wizard-stage .completed-step:hover{background:var(--header-hover)}
.wizard-stage .source-grid{background:var(--sources-bg)}
.wizard-stage .source-icon{background:var(--source-icon-bg)}
.wizard-stage .source-toggle:before{background:var(--toggle-off);box-shadow:inset 0 0 0 1px var(--toggle-off-border)}
.wizard-stage .source-toggle span{background:var(--toggle-thumb);transition:background-color 260ms ease,transform 260ms cubic-bezier(.22,1,.36,1)}
.wizard-stage .source-toggle[aria-checked=true]:before{background:#253ea7;box-shadow:none}
.wizard-stage .source-toggle[aria-checked=true] span{background:#fff}
.wizard-stage .dot-loader{--dot-idle:var(--loading-idle);--dot-active:var(--loading-active)}
.wizard-stage .confirm-spinner{--dot-idle:var(--confirm-loading-idle);--dot-active:var(--confirm-loading-active)}
/* Crossfade the exact exported artwork without moving either layer. */
.wizard-stage .glow{transition:opacity 300ms ease}
.dark-glow{opacity:0}
.dark-glow-one{width:617.213px;height:646.828px;left:-260px;top:-389px}
.dark-glow-one>div{transform:rotate(-165deg)}
.dark-glow-two{width:617.213px;height:646.828px;left:271px;top:-121px}
.dark-glow-two>div{transform:rotate(15deg)}
.wizard-stage[data-theme=dark] .glow:not(.dark-glow){opacity:0}
.wizard-stage[data-theme=dark] .dark-glow{opacity:1}
/* The theme control follows the canvas palette. */
/* The control is the site's header tabs (.tabs / .tab on the homepage), with
   the same 32px track, 10px radius and DM Sans metrics. The selected half
   paints its own background rather than a sliding indicator riding under it —
   the site does the same, and a slider would force both halves to a fixed
   width, which is exactly what makes the hover invisible. The track copies the
   site's contrast step, not its literal #f3f3f3: that is already the canvas
   colour here, so the track would vanish. #e9e9e9 sits the same ~5% below its
   ground. Sizing to content means a hover widens the pill by 4px and the
   centred position gives back 2px a side — the same breathing the site's own
   tab row does. */
.theme-picker{position:absolute;bottom:calc(100% + 24px);left:50%;transform:translateX(-50%);display:flex;align-items:center;height:32px;padding:0;background:#e9e9e9;border-radius:10px}
/* The mock itself stays on Inter — this control is page chrome, not part of
   the prototype's UI. */
.theme-option{display:flex;align-items:center;justify-content:center;gap:4px;height:32px;
  /* Transparent border, not none — otherwise the row shifts by 2px when the
     selected half gains its outline */
  border:1px solid transparent;border-radius:10px;padding:0 10px 0 8px;background:none;font-family:"DM Sans",system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.45;font-weight:500;letter-spacing:normal;color:#1a1a1a;transition:padding .2s cubic-bezier(.4,0,.2,1),background-color .22s ease,border-color .22s ease,box-shadow .22s ease}
/* Unlike the site's compact tabs the label never collapses here, so the
   selected half keeps the inactive padding — shrinking it would drag its
   neighbour across the track on every toggle. */
.theme-option[aria-checked=true]{background:#fff;border-color:#e2e0db;box-shadow:0 1px 2px #0000000d;cursor:default}
/* Hover breathes the sides out by 2px, and nothing else. The selected half is
   excluded — it is not a target, so feedback on it would be a false
   affordance. */
.theme-option:not([aria-checked=true]):is(:hover,:focus-visible){padding-right:12px;padding-left:10px}
/* Inline SVG, so the icon takes the label's colour the way the site's tab
   icons do — no opacity step, and no invert() needed in dark. */
.theme-option svg{width:16px;height:16px;display:block;flex-shrink:0}
.theme-option:focus-visible{outline:2px solid var(--focus-border);outline-offset:1px}
.wizard-stage[data-theme=dark] .theme-picker{background:#242424}
.wizard-stage[data-theme=dark] .theme-option{color:#f5f5f5}
.wizard-stage[data-theme=dark] .theme-option[aria-checked=true]{background:#353535;border-color:#404040;box-shadow:0 1px 2px #0000001a}
@media(prefers-reduced-motion:reduce){html,body,.canvas,.wizard-stage *,.wizard-stage *:before{transition:none!important}}