/* === Style Block 1 === */
/* ═══════════════════════════════════════════
   CSS Variables & Reset
   ═══════════════════════════════════════════ */
:root {
  --primary: #ea001b;
  --primary-light: #fd5f00;
  --primary-dark: #c00016;
  --primary-bg: #fff1f2;
  --success: #059669;
  --success-bg: #ECFDF5;
  --warning: #D97706;
  --warning-bg: #FFFBEB;
  --error: #DC2626;
  --error-bg: #FEF2F2;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --bg: #ffffff;
  --bg-alt: #f8fafc;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.08);
  --shadow-xl: 0 20px 40px rgba(0,0,0,0.12);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --transition: 300ms ease;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--gray-900); min-height:100vh; overflow-x:hidden; }
button { font-family:inherit; }

/* ═══════════════════════════════════════════
   Header
   ═══════════════════════════════════════════ */
.header {
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 32px; height:64px;
  background:rgba(255,255,255,0.95); backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color var(--transition), box-shadow var(--transition);
}
.header.scrolled {
  border-bottom-color:var(--gray-200);
  box-shadow:0 1px 8px rgba(0,0,0,0.04);
}
.logo {
  display:flex; align-items:center; gap:8px;
  font-size:22px; font-weight:800; color:var(--gray-900);
  text-decoration:none; user-select:none;
}
.logo-icon {
  width:32px; height:32px; background:linear-gradient(135deg, var(--primary), var(--primary-light));
  border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:18px;
}
.logo span { color:var(--primary); }

.header-right { display:flex; align-items:center; gap:12px; }
.credit-badge {
  display:flex; align-items:center; gap:6px;
  background:var(--primary-bg); color:var(--primary);
  padding:6px 14px; border-radius:20px;
  font-size:13px; font-weight:600;
  transition:all var(--transition);
}
.credit-badge:hover { background:var(--primary); color:#fff; }
.credit-badge svg { width:14px; height:14px; }

.user-menu { position:relative; }
.avatar-btn {
  width:36px; height:36px; border-radius:50%;
  background:var(--primary); color:#fff;
  border:none; cursor:pointer;
  font-size:14px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  transition:all var(--transition);
}
.avatar-btn:hover { transform:scale(1.08); box-shadow:0 0 0 3px var(--primary-bg); }

.user-dropdown {
  position:absolute; right:0; top:calc(100% + 8px);
  background:#fff; border:1px solid var(--gray-200);
  border-radius:var(--radius-md); box-shadow:var(--shadow-lg);
  min-width:200px; overflow:hidden;
  opacity:0; transform:translateY(-8px) scale(0.96);
  pointer-events:none;
  transition:all 200ms ease;
  z-index:60;
}
.user-dropdown.show {
  opacity:1; transform:translateY(0) scale(1); pointer-events:all;
}
.dropdown-header {
  padding:14px 16px; border-bottom:1px solid var(--gray-100);
  font-size:13px;
}
.dropdown-header .name { font-weight:600; color:var(--gray-900); }
.dropdown-header .email { color:var(--gray-400); font-size:12px; margin-top:2px; }
.user-dropdown a {
  display:flex; align-items:center; gap:10px;
  padding:11px 16px; font-size:13px; color:var(--gray-700);
  text-decoration:none; cursor:pointer;
  transition:background 150ms;
}
.user-dropdown a:hover { background:var(--gray-50); }
.user-dropdown a svg { width:16px; height:16px; color:var(--gray-400); }
.dropdown-divider { height:1px; background:var(--gray-100); }

/* ═══════════════════════════════════════════
   Buttons
   ═══════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:var(--radius-sm); cursor:pointer;
  font-weight:600; font-size:14px;
  padding:10px 20px;
  transition:all var(--transition);
  position:relative; overflow:hidden;
}
.btn:active { transform:scale(0.98); }
.btn:disabled { opacity:0.5; cursor:not-allowed; transform:none; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover:not(:disabled) { background:var(--primary-dark); box-shadow:0 4px 14px rgba(234,0,27,0.35); transform:translateY(-1px); }
.btn-success { background:var(--success); color:#fff; }
.btn-success:hover:not(:disabled) { background:#047857; box-shadow:0 4px 14px rgba(5,150,105,0.35); transform:translateY(-1px); }
.btn-outline { background:transparent; color:var(--gray-700); border:1px solid var(--gray-300); }
.btn-outline:hover { background:var(--gray-50); border-color:var(--gray-400); }
.btn-ghost { background:transparent; color:var(--gray-600); }
.btn-ghost:hover { background:var(--gray-100); }
.btn-lg { padding:14px 32px; font-size:16px; border-radius:var(--radius-md); }
.btn-xl { padding:16px 40px; font-size:17px; border-radius:var(--radius-md); }
.btn-icon { padding:8px; border-radius:var(--radius-sm); }

.btn-glow {
  animation:btnGlow 2s ease-in-out infinite;
}
@keyframes btnGlow {
  0%,100% { box-shadow:0 0 20px rgba(79,70,229,0.2); }
  50% { box-shadow:0 0 30px rgba(79,70,229,0.4); }
}

/* ═══════════════════════════════════════════
   Auth Screen (Hero)
   ═══════════════════════════════════════════ */
.auth-screen {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:calc(100vh - 64px);
  padding:40px 24px;
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, #fff 0%, var(--bg-alt) 100%);
}
.auth-screen h1 {
  font-size:clamp(32px,5vw,52px); font-weight:800;
  text-align:center; line-height:1.15;
  max-width:680px; margin-bottom:16px;
}
.auth-screen h1 .gradient {
  background:linear-gradient(135deg, var(--primary), var(--primary-light), #a78bfa);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.auth-screen .subtitle {
  font-size:18px; color:var(--gray-500); text-align:center;
  max-width:500px; margin-bottom:40px; line-height:1.6;
}
.floating-cards {
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
}
.float-card {
  position:absolute; border-radius:var(--radius-lg);
  background:#fff; box-shadow:var(--shadow-md); border:1px solid var(--gray-100);
  opacity:0.5;
}
.float-card:nth-child(1) { width:180px; height:120px; top:15%; left:5%; transform:rotate(-8deg); animation:floatA 6s ease-in-out infinite; }
.float-card:nth-child(2) { width:160px; height:100px; top:20%; right:8%; transform:rotate(6deg); animation:floatB 7s ease-in-out infinite; }
.float-card:nth-child(3) { width:140px; height:90px; bottom:20%; left:10%; transform:rotate(4deg); animation:floatA 8s ease-in-out infinite 1s; }
.float-card:nth-child(4) { width:170px; height:110px; bottom:15%; right:5%; transform:rotate(-5deg); animation:floatB 6.5s ease-in-out infinite 0.5s; }
.float-card-bar { height:8px; border-radius:4px; background:var(--gray-100); margin:12px; }
.float-card-bar:first-child { width:60%; background:var(--primary-bg); }
.float-card-bar:nth-child(2) { width:80%; }
.float-card-bar:nth-child(3) { width:45%; }
@keyframes floatA { 0%,100%{transform:translateY(0) rotate(-8deg)} 50%{transform:translateY(-15px) rotate(-6deg)} }
@keyframes floatB { 0%,100%{transform:translateY(0) rotate(6deg)} 50%{transform:translateY(-12px) rotate(8deg)} }

/* ═══════════════════════════════════════════
   Login Modal
   ═══════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,0.4); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity 250ms ease;
}
.modal-overlay.show { opacity:1; pointer-events:all; }
.modal {
  background:#fff; border-radius:var(--radius-lg); padding:36px;
  width:100%; max-width:420px; position:relative;
  box-shadow:var(--shadow-xl);
  transform:scale(0.95) translateY(10px);
  transition:transform 300ms ease;
}
.modal-overlay.show .modal { transform:scale(1) translateY(0); }
.modal-close {
  position:absolute; top:16px; right:16px;
  width:32px; height:32px; border-radius:50%;
  border:none; background:var(--gray-100); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--gray-500); font-size:18px;
  transition:all 200ms;
}
.modal-close:hover { background:var(--gray-200); color:var(--gray-700); }
.modal h2 { font-size:24px; font-weight:700; margin-bottom:4px; }
.modal .modal-sub { color:var(--gray-500); font-size:14px; margin-bottom:24px; }

.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:13px; font-weight:600; color:var(--gray-700); margin-bottom:6px; }
.form-input {
  width:100%; padding:11px 14px;
  border:1.5px solid var(--gray-200); border-radius:var(--radius-sm);
  font-size:14px; font-family:inherit;
  transition:all var(--transition); background:#fff;
  outline:none;
}
.form-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(79,70,229,0.1); }
.form-input::placeholder { color:var(--gray-400); }

.login-error {
  display:none; padding:12px 14px;
  background:var(--error-bg); border-left:3px solid var(--error);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--error); font-size:13px; margin-bottom:16px;
}
.login-error.show { display:block; }

.btn-login-spinner { display:none; }
.btn-loading .btn-login-text { visibility:hidden; }
.btn-loading .btn-login-spinner { display:block; position:absolute; }

@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)} }
.shake { animation:shake 0.4s ease; }

/* ═══════════════════════════════════════════
   Main App Container
   ═══════════════════════════════════════════ */
.main-app {
  display:none; max-width:1400px; margin:0 auto;
  padding:32px 24px 60px;
}

/* ═══════════════════════════════════════════
   Step Progress Bar
   ═══════════════════════════════════════════ */
.step-progress {
  display:flex; align-items:center; justify-content:center;
  gap:0; margin-bottom:40px; padding:0 20px;
}
.step-item {
  display:flex; align-items:center; gap:10px; cursor:pointer;
  padding:8px 0; user-select:none;
}
.step-item.disabled { pointer-events:none; }
.step-circle {
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700;
  border:2px solid var(--gray-300); color:var(--gray-400);
  background:#fff;
  transition:all var(--transition);
  flex-shrink:0;
}
.step-item.active .step-circle { border-color:var(--primary); background:var(--primary); color:#fff; }
.step-item.done .step-circle { border-color:var(--success); background:var(--success); color:#fff; }
.step-label { font-size:13px; font-weight:600; color:var(--gray-400); transition:color var(--transition); }
.step-item.active .step-label { color:var(--gray-900); }
.step-item.done .step-label { color:var(--success); }
.step-line {
  flex:0 0 60px; height:2px; background:var(--gray-200);
  margin:0 8px;
  transition:background var(--transition);
}
.step-line.done { background:var(--success); }

/* ═══════════════════════════════════════════
   Step Panels
   ═══════════════════════════════════════════ */
.step-panel {
  display:none;
  animation:fadeSlideIn 350ms ease;
}
.step-panel.active { display:block; }
@keyframes fadeSlideIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

/* Step 1 — Topic */
.topic-header { text-align:center; margin-bottom:28px; }
.topic-header h2 { font-size:24px; font-weight:700; margin-bottom:6px; }
.topic-header p { color:var(--gray-500); font-size:15px; }

.prompt-wrap { position:relative; }
.prompt-area {
  width:100%; min-height:140px; max-height:300px;
  border:2px solid var(--gray-200); border-radius:var(--radius-md);
  padding:18px; padding-bottom:36px;
  font-size:16px; font-family:inherit; line-height:1.6;
  resize:vertical; outline:none;
  transition:all var(--transition); background:#fff;
}
.prompt-area:focus { border-color:var(--primary); box-shadow:0 0 0 4px rgba(79,70,229,0.08); }
.prompt-area::placeholder { color:var(--gray-400); }
.char-count {
  position:absolute; bottom:12px; right:14px;
  font-size:12px; color:var(--gray-400);
}

.topic-chips {
  display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;
}
.topic-chips-label { font-size:12px; font-weight:600; color:var(--gray-400); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px; width:100%; }
.chip {
  padding:8px 16px; border-radius:20px;
  background:var(--gray-50); border:1px solid var(--gray-200);
  font-size:13px; color:var(--gray-600); cursor:pointer;
  transition:all 200ms;
}
.chip:hover { background:var(--primary-bg); border-color:var(--primary-light); color:var(--primary); }

.step-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:32px; }

/* Step 2 — Customize */
.customize-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:32px;
}
.customize-section h3 {
  font-size:13px; font-weight:700; color:var(--gray-500);
  text-transform:uppercase; letter-spacing:0.5px;
  margin-bottom:14px;
}

/* ── Theme Showcase ── */
/* ── Step 2 Split Layout ── */
.step2-layout {
  display:flex; gap:24px; margin-bottom:24px;
}
.step2-themes {
  flex:3; min-width:0;
}
.step2-settings {
  flex:1; min-width:260px; max-width:300px;
}
.settings-panel {
  background:#fff; border:1px solid var(--gray-200);
  border-radius:var(--radius-md); padding:20px;
  position:sticky; top:80px; overflow:hidden;
}
.settings-panel .btn { box-sizing:border-box; }
.settings-panel-title {
  font-size:15px; font-weight:700; color:var(--gray-800);
  margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--gray-100);
}
.setting-group-v {
  margin-bottom:16px;
}
.setting-group-v .setting-label {
  display:block; font-size:12px; font-weight:600; color:var(--gray-500);
  text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px;
}
.setting-group-v .styled-select {
  width:100%;
}
.setting-group-v .pill-selector {
  flex-wrap:wrap;
}
.slide-range {
  width:100%; height:6px; -webkit-appearance:none; appearance:none;
  background:var(--gray-200); border-radius:3px; outline:none; cursor:pointer;
}
.slide-range::-webkit-slider-thumb {
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--primary); border:2px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,0.2); cursor:pointer;
}
.slide-range::-moz-range-thumb {
  width:20px; height:20px; border-radius:50%;
  background:var(--primary); border:2px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,0.2); cursor:pointer;
}
.settings-divider {
  height:1px; background:var(--gray-100); margin:16px 0;
}
.cost-display {
  text-align:center; margin-bottom:16px;
}
.cost-label {
  font-size:12px; color:var(--gray-400); text-transform:uppercase; letter-spacing:0.5px;
}
.cost-value-lg {
  font-size:24px; font-weight:700; color:var(--gray-800); margin-top:4px;
}
.cost-value-lg .cost-unit {
  font-size:14px; font-weight:400; color:var(--gray-400);
}

.theme-showcase {
  margin-bottom:28px;
}
.theme-search-bar {
  display:flex; align-items:center; gap:10px;
  padding:10px 16px; background:var(--gray-50);
  border:1px solid var(--gray-200); border-radius:var(--radius-md);
  margin-bottom:16px;
}
.theme-search-bar svg { color:var(--gray-400); flex-shrink:0; }
.theme-search-bar input {
  flex:1; border:none; background:transparent; outline:none;
  font-size:14px; color:var(--gray-800); font-family:inherit;
}
.theme-search-bar input::placeholder { color:var(--gray-400); }
.theme-count { font-size:12px; color:var(--gray-400); white-space:nowrap; }
.theme-grid-scroll {
  max-height:420px; overflow-y:auto; padding-right:4px;
  scrollbar-width:thin; scrollbar-color:var(--gray-300) transparent;
}
.theme-grid-scroll::-webkit-scrollbar { width:6px; }
.theme-grid-scroll::-webkit-scrollbar-track { background:transparent; }
.theme-grid-scroll::-webkit-scrollbar-thumb { background:var(--gray-300); border-radius:3px; }
.layout-grid-large {
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:14px;
}
.layout-card-lg {
  border:2px solid var(--gray-200); border-radius:var(--radius-md);
  cursor:pointer; transition:all 250ms; position:relative; background:#fff;
  overflow:hidden;
}
.layout-card-lg:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--gray-300); }
.layout-card-lg.selected { border-color:var(--primary); box-shadow:0 0 0 3px rgba(79,70,229,0.15); }
.layout-card-lg.selected .layout-check-lg { display:flex; }
.layout-check-lg {
  display:none; position:absolute; top:10px; right:10px; z-index:2;
  width:26px; height:26px; border-radius:50%;
  background:var(--primary); color:#fff;
  align-items:center; justify-content:center; font-size:13px; font-weight:700;
  box-shadow:0 2px 8px rgba(79,70,229,0.3);
}
.layout-thumb-lg {
  width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--gray-100);
}
.layout-thumb-lg img {
  width:100%; height:100%; object-fit:cover; display:block;
}
.layout-thumb-lg .layout-gradient {
  width:100%; height:100%;
}
.layout-card-lg-info {
  padding:12px 14px;
}
.layout-card-lg-info .layout-name-lg {
  font-size:14px; font-weight:600; color:var(--gray-800);
}
.layout-card-lg-info .layout-count-lg {
  font-size:12px; color:var(--gray-400); margin-top:2px;
}

/* ── Settings Row ── */
.settings-row {
  display:flex; align-items:flex-start; gap:32px;
  padding:20px 24px;
  background:var(--bg-alt); border:1px solid var(--gray-200);
  border-radius:var(--radius-md); margin-bottom:24px;
}
.setting-group {
  display:flex; flex-direction:column; gap:8px;
}
.setting-group .styled-select {
  width:auto; min-width:140px;
}
.setting-label {
  font-size:12px; font-weight:700; color:var(--gray-500);
  text-transform:uppercase; letter-spacing:0.5px;
}

/* ── Generate Actions ── */
.generate-actions {
  display:flex; align-items:center; justify-content:space-between;
}
.generate-group {
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.generate-btn {
  min-width:260px;
}
.cost-inline {
  font-size:13px; font-weight:600; color:var(--primary);
}
.cost-inline .cost-unit {
  font-size:12px; color:var(--gray-400); font-weight:400;
}

.pill-selector { display:flex; flex-wrap:wrap; gap:8px; }
.pill {
  padding:10px 20px; border-radius:var(--radius-sm);
  border:2px solid var(--gray-200); background:#fff;
  font-size:14px; font-weight:600; color:var(--gray-600);
  cursor:pointer; transition:all 200ms;
}
.pill:hover { border-color:var(--primary-light); color:var(--primary); }
.pill.selected { border-color:var(--primary); background:var(--primary-bg); color:var(--primary); }

.styled-select {
  width:100%; padding:11px 14px;
  border:2px solid var(--gray-200); border-radius:var(--radius-sm);
  font-size:14px; font-family:inherit;
  background:#fff; cursor:pointer; outline:none;
  transition:all var(--transition);
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239ca3af' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
}
.styled-select:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(79,70,229,0.1); }

.toggle-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px; background:var(--gray-50); border-radius:var(--radius-sm);
  margin-top:14px;
}
.toggle-row .toggle-label { font-size:14px; font-weight:500; color:var(--gray-700); }
.toggle-row .toggle-sub { font-size:12px; color:var(--gray-400); margin-top:2px; }
.toggle-switch {
  width:44px; height:24px; border-radius:12px;
  background:var(--gray-300); cursor:pointer;
  position:relative; transition:background 200ms;
  border:none; padding:0;
}
.toggle-switch.on { background:var(--primary); }
.toggle-switch::after {
  content:''; position:absolute;
  width:20px; height:20px; border-radius:50%;
  background:#fff; top:2px; left:2px;
  transition:transform 200ms; box-shadow:var(--shadow-sm);
}
.toggle-switch.on::after { transform:translateX(20px); }

.layout-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr));
  gap:12px;
}
.layout-card {
  border:2px solid var(--gray-200); border-radius:var(--radius-md);
  padding:16px; text-align:center; cursor:pointer;
  transition:all 250ms; position:relative; background:#fff;
}
.layout-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--gray-300); }
.layout-card.selected { border-color:var(--primary); background:var(--primary-bg); }
.layout-card.selected .layout-check { display:flex; }
.layout-check {
  display:none; position:absolute; top:8px; right:8px;
  width:22px; height:22px; border-radius:50%;
  background:var(--primary); color:#fff;
  align-items:center; justify-content:center; font-size:12px;
}
.layout-swatch {
  width:100%; height:80px; border-radius:var(--radius-sm);
  margin:0 auto 10px; overflow:hidden;
}
.layout-swatch:not(.layout-swatch-thumb) {
  width:48px; height:48px;
}
.layout-swatch-thumb img {
  width:100%; height:100%; object-fit:cover; border-radius:var(--radius-sm);
}
.layout-name { font-size:13px; font-weight:600; color:var(--gray-800); }
.layout-count { font-size:11px; color:var(--gray-400); margin-top:2px; }

.cost-estimate {
  margin-top:24px; padding:16px 20px;
  background:var(--bg-alt); border:1px solid var(--gray-200);
  border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:space-between;
}
.cost-estimate .cost-label { font-size:14px; color:var(--gray-600); }
.cost-estimate .cost-value { font-size:20px; font-weight:700; color:var(--primary); }
.cost-estimate .cost-unit { font-size:13px; color:var(--gray-400); font-weight:400; }

/* Step 3 — Generate */
.generating-section {
  text-align:center; padding:60px 20px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.gen-animation {
  width:120px; height:120px; margin:0 auto 24px; position:relative;
}
.gen-dot {
  width:14px; height:14px; border-radius:50%;
  background:var(--primary); position:absolute;
  animation:genPulse 1.4s ease-in-out infinite;
}
.gen-dot:nth-child(1) { left:0; top:33px; animation-delay:0s; }
.gen-dot:nth-child(2) { left:33px; top:33px; animation-delay:0.2s; }
.gen-dot:nth-child(3) { left:66px; top:33px; animation-delay:0.4s; }
@keyframes genPulse {
  0%,80%,100% { transform:scale(0.6); opacity:0.4; }
  40% { transform:scale(1); opacity:1; }
}
.gen-status {
  font-size:18px; font-weight:600; color:var(--gray-800);
  margin-bottom:12px; min-height:28px;
  transition:opacity 200ms;
}
.gen-substatus { font-size:14px; color:var(--gray-400); margin-bottom:32px; }
.gen-progress-bar {
  width:100%; max-width:400px; height:6px;
  background:var(--gray-100); border-radius:3px;
  margin:0 auto 24px; overflow:hidden;
}
.gen-progress-fill {
  height:100%; border-radius:3px;
  background:linear-gradient(90deg, var(--primary), var(--primary-light));
  transition:width 500ms ease;
}
.gen-progress-bar.indeterminate .gen-progress-fill {
  width:30% !important;
  animation:indeterminate 1.5s ease-in-out infinite;
}
@keyframes indeterminate {
  0% { transform:translateX(-100%); }
  100% { transform:translateX(400%); }
}

/* Result */
.result-section {
  text-align:center; padding:40px 20px;
  animation:fadeSlideIn 500ms ease;
}
.result-check {
  width:72px; height:72px; border-radius:50%;
  background:var(--success-bg); margin:0 auto 24px;
  display:flex; align-items:center; justify-content:center;
  font-size:36px; position:relative;
  animation:resultPop 0.5s cubic-bezier(0.175,0.885,0.32,1.275);
}
@keyframes resultPop { from{transform:scale(0)} to{transform:scale(1)} }
.confetti-piece {
  position:absolute; width:8px; height:8px; border-radius:2px;
  animation:confettiFall 1s ease forwards;
}
@keyframes confettiFall {
  0% { transform:translate(0,0) rotate(0deg); opacity:1; }
  100% { transform:translate(var(--x), var(--y)) rotate(var(--r)); opacity:0; }
}
.result-section h2 { font-size:26px; font-weight:700; margin-bottom:8px; }
.result-section .result-sub { color:var(--gray-500); margin-bottom:28px; font-size:15px; }

.stats-row {
  display:flex; justify-content:center; gap:20px; margin-bottom:32px; flex-wrap:wrap;
}
.stat-card {
  background:var(--bg-alt); border:1px solid var(--gray-200);
  border-radius:var(--radius-md); padding:16px 24px; min-width:120px;
}
.stat-card .stat-num { font-size:28px; font-weight:700; color:var(--gray-900); }
.stat-card .stat-label { font-size:12px; color:var(--gray-400); text-transform:uppercase; letter-spacing:0.5px; margin-top:2px; }

.download-btn {
  padding:16px 48px; font-size:17px;
  border-radius:var(--radius-md);
}
.download-btn:hover { box-shadow:0 8px 24px rgba(5,150,105,0.3); }

/* ═══════════════════════════════════════════
   History Panel (slide-in from right)
   ═══════════════════════════════════════════ */
.panel-overlay {
  position:fixed; inset:0; z-index:150;
  background:rgba(0,0,0,0.3); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none;
  transition:opacity 250ms;
}
.panel-overlay.show { opacity:1; pointer-events:all; }

.side-panel {
  position:fixed; top:0; right:0; bottom:0;
  width:440px; max-width:100vw;
  background:#fff; z-index:160;
  box-shadow:var(--shadow-xl);
  transform:translateX(100%);
  transition:transform 300ms ease;
  display:flex; flex-direction:column;
}
.side-panel.show { transform:translateX(0); }
.panel-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; border-bottom:1px solid var(--gray-200);
}
.panel-header h3 { font-size:18px; font-weight:700; }
.panel-body { flex:1; overflow-y:auto; padding:20px 24px; }

.history-item {
  padding:16px; border:1px solid var(--gray-200);
  border-radius:var(--radius-md); margin-bottom:12px;
  transition:all 200ms;
}
.history-item:hover { border-color:var(--gray-300); box-shadow:var(--shadow-sm); }
.history-prompt { font-size:14px; font-weight:600; color:var(--gray-800); margin-bottom:6px; line-height:1.4; }
.history-meta { display:flex; align-items:center; gap:12px; font-size:12px; color:var(--gray-400); margin-bottom:10px; }
.history-dl {
  display:inline-flex; align-items:center; gap:4px;
  font-size:12px; font-weight:600; color:var(--primary);
  text-decoration:none; padding:6px 12px;
  background:var(--primary-bg); border-radius:6px;
  transition:all 200ms;
}
.history-dl:hover { background:var(--primary); color:#fff; }
.empty-state { text-align:center; padding:60px 20px; color:var(--gray-400); }
.empty-state .empty-icon { font-size:48px; margin-bottom:12px; }
.empty-state p { font-size:14px; }

/* ═══════════════════════════════════════════
   Credits Modal
   ═══════════════════════════════════════════ */
.credits-balance {
  text-align:center; padding:24px; background:var(--primary-bg);
  border-radius:var(--radius-md); margin-bottom:20px;
}
.credits-balance .big-num { font-size:48px; font-weight:800; color:var(--primary); }
.credits-balance .credits-label { font-size:14px; color:var(--primary); opacity:0.7; }
.plan-badge {
  display:inline-block; padding:4px 12px; border-radius:20px;
  background:var(--primary); color:#fff; font-size:12px; font-weight:600;
  margin-top:8px;
}
.tx-list { list-style:none; }
.tx-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0; border-bottom:1px solid var(--gray-100);
  font-size:13px;
}
.tx-item:last-child { border-bottom:none; }
.tx-action { color:var(--gray-700); font-weight:500; }
.tx-date { color:var(--gray-400); font-size:12px; }
.tx-amount { font-weight:700; }
.tx-amount.positive { color:var(--success); }
.tx-amount.negative { color:var(--error); }

/* ═══════════════════════════════════════════
   Toast Notifications
   ═══════════════════════════════════════════ */
.toast-container {
  position:fixed; bottom:24px; right:24px; z-index:300;
  display:flex; flex-direction:column-reverse; gap:8px;
}
.toast {
  padding:14px 20px; border-radius:var(--radius-md);
  background:#fff; box-shadow:var(--shadow-lg);
  border-left:4px solid var(--gray-400);
  font-size:14px; color:var(--gray-800);
  display:flex; align-items:center; gap:10px;
  max-width:380px; cursor:pointer;
  animation:toastIn 300ms ease;
  transition:all 200ms;
}
.toast:hover { transform:translateX(-4px); }
.toast.toast-success { border-left-color:var(--success); }
.toast.toast-error { border-left-color:var(--error); }
.toast.toast-warning { border-left-color:var(--warning); }
.toast.toast-info { border-left-color:var(--primary); }
.toast.removing { animation:toastOut 200ms ease forwards; }
@keyframes toastIn { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }
@keyframes toastOut { to{opacity:0;transform:translateX(40px)} }

/* ═══════════════════════════════════════════
   Mobile Responsive
   ═══════════════════════════════════════════ */
@media(max-width:768px) {
  .header { padding:0 16px; }
  .main-app { padding:20px 16px 40px; }
  .customize-grid { grid-template-columns:1fr; gap:24px; }
  .layout-grid { grid-template-columns:repeat(2,1fr); }
  .step2-layout { flex-direction:column; }
  .step2-settings { max-width:100%; min-width:auto; }
  .step2-settings .generate-btn,
  .step2-settings .btn-outline { display:block; }
  .settings-panel { position:static; }
  .layout-grid-large { grid-template-columns:repeat(2,1fr); }
  .theme-grid-scroll { max-height:350px; }
  .settings-row { flex-direction:column; gap:16px; }
  .generate-actions { flex-direction:column; gap:12px; }
  .generate-group { width:100%; }
  .generate-btn { width:100%; }
  .stats-row { gap:12px; }
  .stat-card { min-width:90px; padding:12px 16px; }
  .stat-card .stat-num { font-size:22px; }
  .step-label { display:none; }
  .step-line { flex:0 0 30px; }
  .auth-screen h1 { font-size:28px; }
  .float-card { display:none; }
  .side-panel { width:100%; }
}
@media(max-width:480px) {
  .layout-grid { grid-template-columns:1fr; }
  .layout-grid-large { grid-template-columns:repeat(2,1fr); }
  .theme-grid-scroll { max-height:300px; }
  .pill { padding:8px 14px; font-size:13px; }
}

/* === Style Block 2 === */
.dot-loader { display:inline-flex; gap:4px; align-items:center; }
.dot-loader span {
  width:6px; height:6px; border-radius:50%; background:#fff;
  animation:dotBounce 1.2s ease-in-out infinite;
}
.dot-loader span:nth-child(2) { animation-delay:0.2s; }
.dot-loader span:nth-child(3) { animation-delay:0.4s; }
@keyframes dotBounce {
  0%,80%,100% { transform:scale(0.6); opacity:0.4; }
  40% { transform:scale(1); opacity:1; }
}

/* ═══════════════ Upload Section ═══════════════ */
.upload-section { margin-top: 16px; }
.upload-divider {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px; color: var(--gray-400); font-size: 13px;
}
.upload-divider::before, .upload-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--gray-200);
}
.upload-zone {
  border: 2px dashed var(--gray-200); border-radius: 12px;
  padding: 24px; text-align: center; cursor: pointer;
  transition: all 0.2s ease; background: var(--gray-50);
}
.upload-zone:hover, .upload-zone.dragover {
  border-color: var(--primary); background: var(--primary-bg);
}
.upload-zone.has-file {
  border-color: var(--success, #059669); border-style: solid;
  background: rgba(5, 150, 105, 0.05);
}
.upload-icon { margin-bottom: 8px; color: var(--gray-400); }
.upload-zone:hover .upload-icon, .upload-zone.dragover .upload-icon { color: var(--primary); }
.upload-text { color: var(--gray-500); font-size: 14px; line-height: 1.5; }
.upload-text small { color: var(--gray-400); }
.upload-link {
  color: var(--primary); font-weight: 600; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.upload-file-info {
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.file-name {
  font-size: 14px; font-weight: 600; color: var(--gray-700);
  max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.btn-remove-file {
  background: none; border: none; color: var(--gray-400); cursor: pointer;
  font-size: 16px; padding: 2px 6px; border-radius: 4px;
}
.btn-remove-file:hover { background: var(--gray-100); color: var(--gray-700); }