/* ================================================================
   KAIROS STUDIO V4 — Design System
   Mobile-first · Dark default · Light toggle
   ================================================================ */

/* ---------- Root variables ---------- */
:root {
  --logo-color: #fff;
  --logo-gradient: linear-gradient(135deg,#8b5cf6,#a855f7,#06b6d4);

  --color-bg: #0a0a0f;
  --color-surface: #141419;
  --color-surface-hover: #1a1a22;
  --color-border: #2a2a35;
  --color-border-active: #3ddc97;

  --color-primary: #3ddc97;
  --color-primary-light: #7cf0c8;
  --color-primary-dark: #22c55e;

  --color-accent: #06b6d4;
  --color-accent-light: #22d3ee;

  --color-text: #ffffff;
  --color-text-muted: #94a3b8;

  --gradient-button: linear-gradient(135deg, #06b6d4 0%, #22d3ee 20%, #14b8a6 52%, #3ddc97 100%);
  --gradient-waveform: linear-gradient(to top, #22d3ee, #3ddc97);

  --bg-0: var(--color-bg);
  --bg-1: #0f1018;
  --bg-2: #0d0e16;
  --surface-0: var(--color-surface);
  --surface-1: var(--color-surface-hover);
  --surface-2: rgba(255,255,255,0.04);

  --text: var(--color-text);
  --text-muted: var(--color-text-muted);
  --text-strong: #dbe4ff;
  --line: var(--color-border);
  --line-strong: rgba(61,220,151,0.4);

  --ok: var(--color-accent);
  --warn: #fbbf24;
  --bad: #fb7185;
  --accent: var(--color-primary);
  --accent-2: var(--color-accent);

  --cta-bg: var(--gradient-button);
  --cta-border: rgba(61,220,151,0.55);
  --cta-text: #fff;
  --cta-hover: linear-gradient(135deg, #0891b2 0%, #14b8a6 45%, #22c55e 100%);

  /* Shadows */
  --shadow-1: 0 8px 32px rgba(2,8,22,0.35);
  --shadow-2: 0 24px 64px rgba(2,7,20,0.55);
  --shadow-card: 0 8px 28px rgba(0,0,0,0.28);

  /* Motion */
  --t-fast: 160ms;
  --t-standard: 220ms;
  --t-slow: 400ms;
  --ease: cubic-bezier(0.24,0.82,0.24,1);
  --ease-bounce: cubic-bezier(0.34,1.56,0.64,1);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 80px;

  /* Radius */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* Typography */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --type-xs: 11px;
  --type-sm: 13px;
  --type-base: 15px;
  --type-md: 17px;
  --type-lg: 22px;
  --type-xl: 28px;
  --type-2xl: 36px;
  --type-display: clamp(32px, 5vw, 48px);
}

/* ---------- Light theme ---------- */
html[data-theme="light"] {
  --bg-0: #f7f4ff;
  --bg-1: #ffffff;
  --bg-2: #f0ecff;
  --surface-0: #ffffff;
  --surface-1: #f7f4ff;
  --surface-2: rgba(15,23,42,0.04);
  --text: #171225;
  --text-muted: #6b7280;
  --text-strong: #221b38;
  --line: rgba(35,25,63,0.1);
  --line-strong: rgba(61,220,151,0.35);
  --shadow-1: 0 8px 32px rgba(0,0,0,0.08);
  --shadow-2: 0 24px 64px rgba(0,0,0,0.12);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.06);
  --cta-bg: var(--gradient-button);
  --cta-text: #fff;
}

/* ---------- Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font);font-size:var(--type-base);line-height:1.5;color:var(--text);background:radial-gradient(circle at top right,rgba(61,220,151,0.12),transparent 32%),radial-gradient(circle at bottom left,rgba(34,211,238,0.08),transparent 28%),var(--bg-0);min-height:100dvh;overflow-x:hidden}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none;touch-action:manipulation}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}

/* ---------- App shell ---------- */
.app-root{min-height:100dvh;display:flex;flex-direction:column}

/* ---------- Auth ---------- */
#step_auth{display:flex;align-items:center;justify-content:center;padding:var(--space-6)}
.auth-card{width:100%;max-width:380px;background:var(--surface-0);border:1px solid var(--line);border-radius:var(--radius-xl);padding:var(--space-7);box-shadow:var(--shadow-1)}
.auth-brand{text-align:center;margin-bottom:var(--space-6)}
.auth-brand .brand-mark{width:72px;height:72px;margin:0 auto var(--space-4);object-fit:contain;filter:drop-shadow(0 10px 24px rgba(0,0,0,0.28))}
.auth-brand h1{font-size:var(--type-xl);font-weight:700;margin-bottom:var(--space-2)}
.auth-brand p{font-size:var(--type-sm)}

.field{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-4)}
.field-label{font-size:var(--type-sm);font-weight:500;color:var(--text-muted)}
.field-input,.field textarea{width:100%;padding:var(--space-3) var(--space-4);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-md);color:var(--text);font-size:var(--type-base);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.field-input:focus,.field textarea:focus{outline:none;border-color:var(--color-border-active);box-shadow:0 0 0 3px rgba(61,220,151,0.14)}
.field-input::placeholder{color:var(--text-muted);opacity:0.6}

.status-text{font-size:var(--type-sm);margin-top:var(--space-3)}

/* ---------- Wizard shell ---------- */
.wizard-shell{flex:1;display:flex;flex-direction:column;max-width:900px;margin:0 auto;width:100%;padding:var(--space-4)}

/* Topbar */
.topbar,.wizard-topbar{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) 0;margin-bottom:var(--space-5);border-bottom:1px solid var(--line)}
.topbar-brand {
  order: -1;
  margin-right: auto;
  margin-left: 0;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.wizard-progress{flex:0 1 200px;display:flex;flex-direction:column;gap:var(--space-2);max-width:200px}
.wizard-progress__value{font-size:var(--type-xs);color:var(--text-muted);text-align:right}
.wizard-progress__bar{height:4px;background:var(--surface-2);border-radius:var(--radius-pill);overflow:hidden}
.wizard-progress__bar span{display:block;height:100%;background:linear-gradient(90deg,var(--color-accent),var(--color-primary));border-radius:var(--radius-pill);transition:width var(--t-standard) var(--ease);width:0%}

/* ---------- Steps ---------- */
.step{display:none;flex-direction:column;gap:var(--space-5);animation:stepEnter var(--t-slow) var(--ease) both}
.step.is-active{display:flex}
.step--center{align-items:center;text-align:center;padding-top:var(--space-8)}

.step-head{display:flex;flex-direction:column;gap:var(--space-2)}
.eyebrow{font-size:var(--type-xs);font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--color-accent-light);margin-bottom:var(--space-1)}
.step-title{font-size:var(--type-xl);font-weight:700;line-height:1.2}
.step-subtitle{font-size:var(--type-md);color:var(--text-muted);max-width:520px}
.step--center .step-subtitle{margin-left:auto;margin-right:auto}

.step-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) 0;border-top:1px solid var(--line);margin-top:auto}

/* ---------- CTAs ---------- */
.cta-primary{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);background:var(--cta-bg);border:1px solid var(--cta-border);border-radius:var(--radius-lg);color:var(--cta-text);font-size:var(--type-base);font-weight:600;transition:all var(--t-fast);box-shadow:var(--shadow-1)}
.cta-primary:hover{transform:translateY(-1px);box-shadow:0 0 24px rgba(61,220,151,0.35),0 0 48px rgba(6,182,212,0.15);background:var(--cta-hover)}
.cta-primary:active{transform:translateY(0)}
.cta-primary:disabled{opacity:0.45;pointer-events:none}

.cta-xl{padding:var(--space-4) var(--space-7);font-size:var(--type-lg);border-radius:var(--radius-xl)}

.cta-secondary{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius-lg);color:var(--text);font-size:var(--type-base);font-weight:600;transition:all var(--t-fast)}
.cta-secondary:hover{border-color:var(--color-border-active);background:rgba(61,220,151,0.08)}

.cta-refine{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);background:linear-gradient(145deg,rgba(34,211,238,0.18),rgba(61,220,151,0.22));border:1px solid rgba(61,220,151,0.36);border-radius:var(--radius-lg);color:#fff;font-size:var(--type-base);font-weight:600;transition:all var(--t-fast)}
.cta-refine:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(61,220,151,0.22)}

.ghost{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:none;border:none;color:var(--text-muted);font-size:var(--type-sm);font-weight:500;transition:color var(--t-fast)}
.ghost:hover{color:var(--text)}

/* ---------- Step 1: Start ---------- */
.step-hero{display:flex;flex-direction:column;align-items:center;gap:var(--space-5);padding:var(--space-9) var(--space-4)}
.step-hero__logo-lockup{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);background:linear-gradient(135deg,rgba(34,211,238,0.1),rgba(61,220,151,0.07));border:1px solid rgba(61,220,151,0.18);border-radius:28px;box-shadow:0 18px 42px rgba(0,0,0,0.22);backdrop-filter:blur(12px)}
.step-hero__logo-mark{width:92px;height:92px;padding:8px;border-radius:26px;background:radial-gradient(circle at 32% 28%,rgba(34,211,238,0.18),transparent 58%),rgba(255,255,255,0.02);border:1px solid rgba(61,220,151,0.18);box-shadow:inset 0 1px 0 rgba(255,255,255,0.05)}
.step-hero__logo-mark img{width:100%;height:100%;object-fit:contain}
.step-hero__logo-copy{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left}
.step-hero__logo-overline{font-size:clamp(24px,4vw,36px);font-weight:300;line-height:1;letter-spacing:0.28em;color:var(--text)}
.step-hero__logo-caption{font-size:var(--type-xs);font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--color-primary-light)}
.step-hero .step-title{font-size:var(--type-display)}
.resume-panel{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-5);background:var(--surface-0);border:1px solid var(--line);border-radius:var(--radius-lg);margin-top:var(--space-6)}

/* ---------- Upload / Videos ---------- */
.upload-zone{margin:var(--space-4) 0}
.upload-drop{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-8) var(--space-5);background:var(--surface-0);border:2px dashed var(--line);border-radius:var(--radius-xl);transition:all var(--t-fast);cursor:pointer}
.upload-drop:hover{border-color:var(--color-border-active);background:rgba(61,220,151,0.06)}
.upload-drop__icon{font-size:40px;opacity:0.7}
.upload-drop strong{font-size:var(--type-lg)}
.upload-drop p{font-size:var(--type-sm)}

.asset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--space-3)}
.asset-card{position:relative;background:var(--surface-0);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;transition:all var(--t-fast);display:flex;flex-direction:column}
.asset-card:hover{border-color:var(--line-strong);transform:translateY(-2px);box-shadow:var(--shadow-card)}
.asset-card__thumb{aspect-ratio:16/9;background:var(--bg-2);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.asset-card__thumb video,.asset-card__thumb img{width:100%;height:100%;object-fit:cover}
.asset-card__placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:28px;opacity:0.5}
.asset-card__info{padding:var(--space-2) var(--space-3) var(--space-1)}
.asset-card__name{font-size:var(--type-sm);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asset-card__meta{font-size:var(--type-xs);color:var(--text-muted)}
.asset-card__actions{display:flex;gap:var(--space-1);padding:var(--space-2) var(--space-3) var(--space-3)}
.asset-card__actions button{flex:1;padding:var(--space-2);font-size:var(--type-xs);background:var(--surface-2);border-radius:var(--radius-sm);color:var(--text-muted)}
.asset-card__actions button:hover{color:var(--text);background:var(--surface-1)}
.asset-card__check{position:absolute;top:var(--space-2);left:var(--space-2);width:22px;height:22px;border-radius:var(--radius-sm);background:rgba(6,182,212,0.92);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;opacity:0;transition:opacity var(--t-fast);z-index:2;box-shadow:0 0 14px rgba(6,182,212,0.18)}
.asset-card.is-selected .asset-card__check{opacity:1}
.asset-card.is-selected{border-color:var(--color-border-active);background:rgba(61,220,151,0.08);box-shadow:0 0 0 1px rgba(61,220,151,0.12)}

/* Upload progress */
.upload-progress{width:100%;margin:var(--space-3) 0}
.upload-progress__track{width:100%;height:6px;background:var(--surface-2);border-radius:var(--radius-pill);overflow:hidden}
.upload-progress__fill{display:block;height:100%;background:var(--gradient-button);border-radius:var(--radius-pill);transition:width 200ms var(--ease)}
.upload-progress__text{display:block;margin-top:var(--space-2);font-size:var(--type-sm);color:var(--text-muted)}

/* ---------- Music ---------- */
.music-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-4);margin:var(--space-4) 0}
.mode-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-5);background:var(--surface-0);border:1px solid var(--line);border-radius:var(--radius-lg);text-align:center;transition:all var(--t-fast);cursor:pointer}
.mode-card:hover{border-color:var(--line-strong);background:var(--surface-1);transform:translateY(-2px);box-shadow:var(--shadow-card)}
.mode-card.is-active{border-color:var(--color-border-active);background:rgba(61,220,151,0.08);box-shadow:0 0 0 1px rgba(61,220,151,0.12)}
.mode-card__icon{font-size:32px}
.mode-card strong{font-size:var(--type-md)}
.mode-card p{font-size:var(--type-sm)}

.music-panel{margin:var(--space-4) 0;padding:var(--space-5);background:var(--surface-0);border:1px solid var(--line);border-radius:var(--radius-lg)}
.music-search-row{display:flex;gap:var(--space-3);align-items:center}
.music-search-row .field-input{flex:1}
.music-results{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-3);max-height:280px;overflow-y:auto}
.music-track{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);background:var(--surface-2);border-radius:var(--radius-md);cursor:pointer;transition:all var(--t-fast)}
.music-track:hover{background:var(--surface-1)}
.music-track.is-active{border:1px solid var(--color-border-active);background:rgba(61,220,151,0.08)}
.music-track__thumb{width:44px;height:44px;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--bg-2),var(--surface-0));display:flex;align-items:center;justify-content:center;font-size:20px}
.music-track__info{flex:1;min-width:0}
.music-track__info strong{display:block;font-size:var(--type-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-track__info span{font-size:var(--type-xs);color:var(--text-muted)}

/* ---------- Brief ---------- */
.brief-form{display:flex;flex-direction:column;gap:var(--space-4);max-width:560px}
.preset-section{display:flex;flex-direction:column;gap:var(--space-3)}
.preset-grid{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.preset-chip{padding:var(--space-2) var(--space-3);background:var(--surface-0);border:1px solid var(--line);border-radius:var(--radius-pill);font-size:var(--type-sm);font-weight:500;transition:all var(--t-fast);cursor:pointer}
.preset-chip:hover{border-color:var(--line-strong);background:var(--surface-1)}
.preset-chip.is-active{background:rgba(61,220,151,0.16);border-color:var(--color-border-active);color:var(--color-primary-light)}

/* ---------- Duration ---------- */
.duration-presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:var(--space-3);margin:var(--space-4) 0}
.duration-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);min-height:112px;padding:var(--space-5) var(--space-3);background:linear-gradient(180deg,rgba(24,25,39,0.98),rgba(20,20,25,0.98));border:1px solid rgba(61,220,151,0.16);border-radius:20px;transition:all var(--t-fast);cursor:pointer}
.duration-card:hover{border-color:rgba(61,220,151,0.38);background:linear-gradient(180deg,rgba(28,29,43,0.98),rgba(20,20,25,0.98));transform:translateY(-1px)}
.duration-card.is-active{background:rgba(61,220,151,0.08);border-color:var(--color-border-active);box-shadow:0 0 0 1px rgba(61,220,151,0.15),0 12px 28px rgba(11,14,26,0.3)}
.duration-card strong{font-size:clamp(32px,4vw,42px);line-height:1}
.duration-card span{font-size:var(--type-sm);color:var(--text-strong)}
.custom-duration{display:flex;flex-direction:column;gap:var(--space-2);margin-top:calc(var(--space-4) * -1);margin-bottom:var(--space-4);max-width:240px}
.custom-duration__row{display:flex;align-items:center;gap:var(--space-3)}
.custom-duration__input{max-width:140px}
.custom-duration__input::-webkit-outer-spin-button,
.custom-duration__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.custom-duration__input[type="number"]{-moz-appearance:textfield;appearance:textfield}
.custom-duration__unit{font-size:var(--type-sm)}
.custom-duration__hint{font-size:var(--type-xs)}

/* Waveform */
.waveform-empty{display:flex;flex-direction:column;gap:var(--space-2);margin:var(--space-4) 0;padding:var(--space-4);background:rgba(61,220,151,0.05);border:1px dashed rgba(61,220,151,0.18);border-radius:20px}
.waveform-panel{margin:var(--space-4) 0;padding:var(--space-5);background:#141419;border:1px solid rgba(61,220,151,0.22);border-radius:24px;box-shadow:0 18px 40px rgba(0,0,0,0.28),inset 0 1px 0 rgba(255,255,255,0.03)}
.waveform-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4);margin-bottom:12px}
.waveform-header__copy{display:flex;flex-direction:column;gap:4px}
.waveform-hint{font-size:var(--type-sm);font-weight:500;color:var(--color-primary-light)}
.waveform-scale{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-3);margin-bottom:12px}
.waveform-scale__time{font-size:var(--type-xs);color:var(--text-muted);font-variant-numeric:tabular-nums;letter-spacing:0.04em}
.waveform-scale__time--total{text-align:right}
.waveform-scale__center{display:flex;align-items:center;justify-content:center;gap:10px}
.waveform-nav__btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--radius-pill);background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:18px;opacity:0.6;transition:opacity var(--t-fast),transform var(--t-fast),border-color var(--t-fast)}
.waveform-nav__btn:hover{opacity:1;transform:translateY(-1px)}
.waveform-nav__btn--left{color:var(--color-primary)}
.waveform-nav__btn--left:hover{border-color:rgba(61,220,151,0.35)}
.waveform-nav__btn--right{color:var(--color-accent)}
.waveform-nav__btn--right:hover{border-color:rgba(6,182,212,0.35)}
.duration-badge{padding:6px 14px;background:rgba(61,220,151,0.12);border:1px solid rgba(61,220,151,0.22);border-radius:var(--radius-pill);font-size:var(--type-xs);font-weight:700;color:var(--color-primary-light);font-variant-numeric:tabular-nums;letter-spacing:0.04em}
.waveform-canvas-wrap{position:relative;height:184px;background:linear-gradient(180deg,rgba(20,20,25,0.98),rgba(10,10,15,0.98));border:1px solid rgba(61,220,151,0.22);border-radius:24px;overflow:hidden;margin-bottom:14px}
.waveform-canvas{width:100%;height:100%;display:block}
.waveform-overlay{position:absolute;inset:0;pointer-events:auto;touch-action:none}
.waveform-selection{position:absolute;top:18px;bottom:18px;height:auto;background:rgba(61,220,151,0.16);border:1px solid rgba(61,220,151,0.4);border-radius:18px;cursor:grab;pointer-events:auto;z-index:1;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.03)}
.waveform-selection:active{cursor:grabbing}
.waveform-handle{position:absolute;top:50%;bottom:auto;width:16px;height:88px;background:rgba(255,255,255,0.98);border-radius:12px;cursor:ew-resize;pointer-events:auto;transition:opacity var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);z-index:2;transform:translateY(-50%);box-shadow:0 12px 28px rgba(0,0,0,0.28),0 0 18px rgba(61,220,151,0.2),0 0 22px rgba(34,211,238,0.14)}
.waveform-handle::before,.waveform-handle::after{content:"";position:absolute;top:50%;width:2px;height:18px;background:rgba(148,163,184,0.9);border-radius:999px;transform:translateY(-50%)}
.waveform-handle::before{left:5px}
.waveform-handle::after{right:5px}
.waveform-handle:hover{opacity:1;transform:translateY(-50%) scaleX(1.03)}
.waveform-handle--left{left:0}
.waveform-handle--right{right:0}
.waveform-playhead{position:absolute;top:18px;bottom:18px;width:2px;height:auto;background:rgba(255,255,255,0.96);pointer-events:none;z-index:3;opacity:0;transform:translateX(-1px);transition:opacity .12s ease;box-shadow:0 0 10px rgba(61,220,151,0.42),0 0 18px rgba(6,182,212,0.18)}
.waveform-playhead.is-visible{opacity:0.72}
.waveform-playhead.is-active{opacity:1}
.waveform-selection-meta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;margin-bottom:12px;text-align:center}
.waveform-selection-range{font-size:var(--type-sm);font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.waveform-selection-duration{font-size:var(--type-xs);color:var(--color-primary-light)}
.waveform-controls{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.waveform-play{padding:0;color:var(--color-primary-light);font-weight:600;letter-spacing:0.02em}
.waveform-play:hover{color:var(--text)}
.waveform-time{flex:1;min-width:280px;color:var(--text-muted);font-size:var(--type-sm);font-weight:500;font-variant-numeric:tabular-nums;line-height:1.45}

/* ---------- Style ---------- */
.style-workspace{display:grid;grid-template-columns:minmax(260px,0.9fr) minmax(320px,1.1fr);gap:var(--space-5);align-items:start;margin:var(--space-4) 0}
.style-preview-panel{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);background:var(--surface-0);border:1px solid var(--line);border-radius:var(--radius-lg)}
.style-preview-frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius-md);background:linear-gradient(135deg,rgba(34,211,238,0.16),rgba(139,92,246,0.14) 45%,rgba(61,220,151,0.12));box-shadow:inset 0 0 0 1px rgba(255,255,255,0.04)}
.style-preview-video{width:100%;height:100%;object-fit:cover;background:var(--bg-2)}
.style-preview-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.72);font-size:var(--type-sm);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;background:radial-gradient(circle at 25% 30%,rgba(255,255,255,0.12),transparent 30%),linear-gradient(145deg,rgba(15,23,42,0.2),rgba(2,6,23,0.46))}
.style-preview-frame.has-video .style-preview-placeholder{display:none}
.style-preview-frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:rgba(255,255,255,var(--preview-overlay-alpha,0));mix-blend-mode:soft-light}
.style-preview-caption{font-size:var(--type-xs);text-align:center}
.adjustment-sliders{display:flex;flex-direction:column;gap:var(--space-5);margin:0;padding:var(--space-5);background:var(--surface-0);border:1px solid var(--line);border-radius:var(--radius-lg)}
.slider-group{display:flex;flex-direction:column;gap:var(--space-2)}
.slider-header{display:flex;justify-content:space-between;align-items:center}
.slider-label{font-size:var(--type-base);font-weight:600}
.slider-value{font-size:var(--type-base);font-weight:700;color:var(--color-primary-light);min-width:3ch;text-align:right}
.slider-input{width:100%;height:6px;border-radius:999px;background:var(--surface-2);-webkit-appearance:none;appearance:none;cursor:pointer;outline:none}
.slider-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--color-primary);border:2px solid var(--surface-0);box-shadow:0 2px 6px rgba(0,0,0,0.3),0 0 0 5px rgba(61,220,151,0.12);cursor:pointer;transition:transform var(--t-fast)}
.slider-input::-webkit-slider-thumb:hover{transform:scale(1.15)}
.slider-input::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--color-primary);border:2px solid var(--surface-0);box-shadow:0 2px 6px rgba(0,0,0,0.3),0 0 0 5px rgba(61,220,151,0.12);cursor:pointer}
.slider-hints{display:flex;justify-content:space-between;font-size:var(--type-xs);color:var(--text-muted);margin-top:2px}
.adjustment-reset{text-align:center;margin-top:var(--space-3)}

/* ---------- Generation ---------- */
.generation-hero{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-8) var(--space-4)}
.generation-pulse{width:80px;height:80px;border-radius:var(--radius-pill);background:var(--gradient-button);opacity:0.25;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:0.25}50%{transform:scale(1.15);opacity:0.4}}

.generation-steps{display:flex;flex-direction:column;gap:var(--space-3);width:100%;max-width:360px;margin:var(--space-4) 0}
.generation-step{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--surface-0);border:1px solid var(--line);border-radius:var(--radius-lg);opacity:0.5;transition:all var(--t-slow)}
.generation-step.is-active{opacity:1;border-color:var(--color-border-active);background:rgba(61,220,151,0.08)}
.generation-step.is-done{opacity:1;border-color:var(--color-border-active);background:rgba(61,220,151,0.12)}
.generation-step__icon{font-size:20px}
.generation-step strong{font-size:var(--type-sm)}

.generation-progress{width:100%;max-width:360px;display:flex;align-items:center;gap:var(--space-3)}
.generation-progress__bar{flex:1;height:6px;background:var(--surface-2);border-radius:var(--radius-pill);overflow:hidden}
.generation-progress__bar span{display:block;height:100%;background:var(--gradient-button);border-radius:var(--radius-pill);transition:width var(--t-standard) var(--ease)}
.generation-progress__percent{font-size:var(--type-sm);font-weight:600;color:var(--color-primary-light);min-width:40px;text-align:right}
.generation-cancel{margin-top:var(--space-3)}

/* ---------- Final ---------- */
.final-hero{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-7) var(--space-4)}
.final-check{width:64px;height:64px;border-radius:var(--radius-pill);background:var(--gradient-button);display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff;box-shadow:var(--shadow-1);animation:checkPop var(--t-slow) var(--ease-bounce) both}
@keyframes checkPop{0%{transform:scale(0)}100%{transform:scale(1)}}

.final-preview{width:100%;max-width:480px;margin:var(--space-4) 0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-2)}
.final-video{width:100%;aspect-ratio:16/9;background:var(--bg-2)}

.final-actions{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);width:100%;max-width:360px}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:var(--space-4);background:rgba(6,11,20,0.7);backdrop-filter:blur(8px);border:none;opacity:0;pointer-events:none;transition:opacity var(--t-standard)}
.modal[open]{opacity:1;pointer-events:auto}
.modal__content{width:100%;max-width:480px;background:var(--surface-0);border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow-2);overflow:hidden;transform:translateY(16px);transition:transform var(--t-standard) var(--ease)}
.modal[open] .modal__content{transform:translateY(0)}
.modal__head{display:flex;justify-content:space-between;align-items:center;padding:var(--space-4);border-bottom:1px solid var(--line)}
.modal__head h3{font-size:var(--type-lg)}
.modal__close{width:36px;height:36px;border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--text-muted);font-size:18px}
.modal__close:hover{background:var(--surface-1);color:var(--text)}
.modal__body{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-4)}
.modal__foot{padding:var(--space-4);border-top:1px solid var(--line);display:flex;justify-content:flex-end}

.refine-suggestions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.refine-chip{padding:var(--space-2) var(--space-3);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-pill);font-size:var(--type-sm);transition:all var(--t-fast);cursor:pointer}
.refine-chip:hover{border-color:var(--line-strong)}
.refine-chip.is-active{background:rgba(61,220,151,0.15);border-color:var(--color-primary);color:var(--color-primary-light)}

/* ---------- Toast ---------- */
.toast{position:fixed;bottom:var(--space-5);left:50%;transform:translateX(-50%) translateY(100px);padding:var(--space-3) var(--space-5);background:var(--surface-0);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-2);font-size:var(--type-sm);z-index:200;transition:transform var(--t-slow) var(--ease)}
.toast.is-visible{transform:translateX(-50%) translateY(0)}

/* ---------- Animations ---------- */
@keyframes stepEnter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ---------- Mobile ---------- */
@media (max-width:640px){
  .wizard-shell{padding:var(--space-3)}
  .topbar,.wizard-topbar{gap:var(--space-3)}

  .step-hero__logo-lockup{width:100%;flex-direction:column;align-items:center;padding:var(--space-4)}
  .step-hero__logo-copy{align-items:center;text-align:center}
  .step-hero__logo-overline{letter-spacing:0.18em}
  .step-title{font-size:var(--type-lg)}
  .step-subtitle{font-size:var(--type-base)}
  .step-actions{flex-direction:column-reverse;gap:var(--space-3)}
  .step-actions button{width:100%;justify-content:center}
  .cta-xl{width:100%}
  .asset-grid{grid-template-columns:repeat(2,1fr)}
  .music-modes{grid-template-columns:1fr}
  .duration-presets{grid-template-columns:repeat(2,1fr)}
  .style-workspace{grid-template-columns:1fr}
  .waveform-header{margin-bottom:10px}
  .waveform-scale{gap:var(--space-2)}
  .waveform-scale__center{gap:8px}
  .waveform-nav__btn{width:30px;height:30px;font-size:16px}
  .waveform-canvas-wrap{height:164px}
  .waveform-selection{top:16px;bottom:16px}
  .waveform-handle{width:14px;height:72px}
  .waveform-handle::before,.waveform-handle::after{height:14px}
  .waveform-playhead{top:16px;bottom:16px}
  .waveform-controls{flex-direction:column;align-items:flex-start}
  .waveform-time{min-width:0}
  .final-actions{width:100%;padding:0 var(--space-3)}
  .generation-steps{max-width:100%}
  .wizard-progress{max-width:120px}
}

@media (max-width:400px){
  .topbar,.wizard-topbar{gap:var(--space-2)}

  .asset-grid{grid-template-columns:1fr}
  .preset-grid{flex-direction:column}
  .preset-chip{width:100%;text-align:center}
}

/* ---------- Music ready badge ---------- */
.music-ready-badge{
  text-align:center;
  color:var(--color-accent-light);
  font-size:0.9rem;
  font-weight:600;
  margin-bottom:var(--space-2);
  animation:fadeIn 0.4s ease;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
}

/* ---------- Brand Hero (logo + texte KAIROS) ---------- */
.kairos-brand-hero {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 40px;
}

.kairos-brand-card {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px 30px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 50%, rgba(139,92,246,.16), transparent 36%),
    rgba(12, 12, 18, .88);
  border: 1px solid rgba(139,92,246,.28);
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
}

.kairos-brand-card-animated {
  position: relative;
  overflow: hidden;
  animation: kairosHeroIn .7s ease-out both;
}

.kairos-brand-card-animated .kairos-brand-icon,
.kairos-brand-card-animated .kairos-brand-text {
  position: relative;
  z-index: 1;
}

.kairos-logo-spark {
  position: absolute;
  left: 106px;
  top: 42px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow:
    0 0 8px rgba(255,255,255,0.95),
    0 0 18px rgba(255,255,255,0.75),
    0 0 28px rgba(139,92,246,0.22);
  opacity: 0.95;
  z-index: 5;
  pointer-events: none;
  animation: kairosSparkWhite 3.2s ease-in-out infinite;
}

.kairos-logo-shine {
  position: absolute;
  inset: -40%;
  background: linear-gradient(115deg,
    transparent 42%,
    rgba(255,255,255,.06) 47%,
    rgba(34,211,238,.16) 50%,
    rgba(167,139,250,.12) 53%,
    transparent 58%);
  transform: translateX(-65%) rotate(0deg);
  animation: kairosShine 4.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}

.kairos-brand-icon {
  width: 92px;
  height: 92px;
  border-radius: 24px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-logo-mark-img {
  width: 82px;
  height: 82px;
  display: block;
  object-fit: contain;
}

.hero-logo-word-img {
  width: 270px;
  height: auto;
  display: block;
  object-fit: contain;
}

.kairos-brand-text p {
  margin: 8px 0 0;
  font-size: 13px;
  letter-spacing: 2px;
  color: #7dd3fc;
  font-weight: 600;
  display: inline-block;
  position: relative;
  z-index: 0;
  opacity: 0;
  transform: translateY(8px);
  animation:
    studioCaptionReveal .85s ease 1.55s forwards,
    studioCaptionAfterglow 2.6s ease 2.4s infinite alternate;
  will-change: opacity, transform, text-shadow;
}

.kairos-brand-text p::after {
  content: "";
  position: absolute;
  inset: -8px -18px;
  z-index: -1;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at center, rgba(125,211,252,.34), rgba(168,85,247,.16) 46%, transparent 72%);
  filter: blur(10px);
  opacity: 0;
  transform: scaleX(.72) scaleY(.78);
  animation: studioHaloReveal 1s ease 1.6s forwards;
  pointer-events: none;
}

@keyframes studioCaptionReveal {
  0% {
    opacity: 0;
    transform: translateY(8px);
    text-shadow: 0 0 0 rgba(125,211,252,0);
  }
  72% {
    opacity: 1;
    transform: translateY(0);
    text-shadow:
      0 0 18px rgba(125,211,252,.72),
      0 0 34px rgba(6,182,212,.28);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    text-shadow:
      0 0 10px rgba(125,211,252,.34),
      0 0 22px rgba(139,92,246,.18);
  }
}

@keyframes studioHaloReveal {
  0% {
    opacity: 0;
    transform: scaleX(.72) scaleY(.78);
  }
  62% {
    opacity: .72;
    transform: scaleX(1.08) scaleY(1);
  }
  100% {
    opacity: .28;
    transform: scaleX(1) scaleY(.9);
  }
}

@keyframes studioCaptionAfterglow {
  from {
    text-shadow:
      0 0 8px rgba(125,211,252,.26),
      0 0 18px rgba(6,182,212,.12);
  }
  to {
    text-shadow:
      0 0 14px rgba(125,211,252,.46),
      0 0 28px rgba(139,92,246,.22);
  }
}

@keyframes kairosHeroIn {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes kairosSparkWhite {
  0%,100% { transform: scale(.92); opacity: .65; }
  50% { transform: scale(1.18); opacity: 1; }
}

@keyframes kairosShine {
  0%,55% { transform: translateX(-65%) rotate(0deg); opacity: 0; }
  65% { opacity: 1; }
  100% { transform: translateX(65%) rotate(0deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .kairos-brand-card-animated,
  .kairos-logo-spark,
  .kairos-logo-shine {
    animation: none !important;
  }

  .kairos-brand-text p {
    opacity: 1;
    transform: none;
    animation: none;
    text-shadow: 0 0 10px rgba(125,211,252,.24);
  }

  .kairos-brand-text p::after {
    opacity: .18;
    transform: none;
    animation: none;
  }
}

/* Responsive brand hero */
@media (max-width: 640px) {
  .kairos-brand-card {
    gap: 16px;
    padding: 14px 20px;
    border-radius: 22px;
  }
  .kairos-brand-icon {
    width: 68px;
    height: 68px;
    border-radius: 18px;
  }
  .hero-logo-mark-img {
    width: 52px;
    height: 52px;
  }
  .hero-logo-word-img {
    width: 180px;
    height: auto;
  }
  .kairos-logo-spark {
    left: 76px;
    top: 32px;
  }
  .kairos-brand-text p {
    font-size: 11px;
    letter-spacing: 1.5px;
  }
}

/* ---------- Topbar logo final (priority override) ---------- */
.topbar-brand {
  gap: 10px !important;
  min-width: 198px !important;
}

.topbar-brand .topbar-logo-mark {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  display: block;
  background: #fff;
  -webkit-mask: url("./assets/kairoslogo-final-topbar.svg?v=new-logo-r1") center/contain no-repeat;
  mask: url("./assets/kairoslogo-final-topbar.svg?v=new-logo-r1") center/contain no-repeat;
}

.topbar-brand .topbar-logo-word {
  width: 150px !important;
  height: 34px !important;
  flex: 0 0 150px !important;
  max-width: 150px !important;
  display: block;
  background: #fff;
  -webkit-mask: url("./assets/kairostopbar.svg?v=topbar-20260425-r9") left center / contain no-repeat;
  mask: url("./assets/kairostopbar.svg?v=topbar-20260425-r9") left center / contain no-repeat;
}

@media (max-width:640px){
  .topbar-brand{gap:9px!important;min-width:178px!important}
  .topbar-brand .topbar-logo-mark{width:32px!important;height:32px!important;flex-basis:32px!important}
  .topbar-brand .topbar-logo-word{
    width:136px!important;
    height:32px!important;
    flex-basis:136px!important;
    max-width:136px!important;
    -webkit-mask-size:contain;
    mask-size:contain;
  }
}

@media (max-width:400px){
  .topbar-brand{gap:7px!important;min-width:148px!important}
  .topbar-brand .topbar-logo-mark{width:28px!important;height:28px!important;flex-basis:28px!important}
  .topbar-brand .topbar-logo-word{
    width:112px!important;
    height:28px!important;
    flex-basis:112px!important;
    max-width:112px!important;
    -webkit-mask-size:contain;
    mask-size:contain;
  }
}