:root {
  --bg:        #0D0D0D;
  --surface:   #141414;
  --surface2:  #1A1A1A;
  --pink:      #F0198C;
  --pink-dim:  rgba(240,25,140,0.15);
  --pink-glow: rgba(240,25,140,0.35);
  --cyan:      #2CC4FF;
  --cyan-dim:  rgba(44,196,255,0.12);
  --yellow:    #F5C800;
  --yellow-dim:rgba(245,200,0,0.12);
  --green:     #1FD98A;
  --green-dim: rgba(31,217,138,0.12);
  --border:    rgba(255,255,255,0.07);
  --border-hi: rgba(255,255,255,0.13);
  --text:      #F2F2F2;
  --text-2:    #999;
  --text-3:    #555;
  --error:     #FF4D4D;
  --r-sm:      8px;
  --r-md:      12px;
  --r-lg:      18px;
  --font-d:    'Anton', sans-serif;
  --font-mark: 'Permanent Marker', cursive;
  --font-b:    'DM Sans', sans-serif;
  --ease:      cubic-bezier(0.22,1,0.36,1);
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-b);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 16px 80px;
  position: relative;
  overflow-x: hidden;
}
.bg-orbs { position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden; }
.orb {
  position:absolute;border-radius:50%;
  filter:blur(90px);opacity:0.25;
  animation:orbFloat 18s ease-in-out infinite;
}
.orb-1 { width:480px;height:480px;background:var(--pink);top:-160px;left:-120px;animation-duration:22s; }
.orb-2 { width:360px;height:360px;background:var(--cyan);top:30%;right:-100px;animation-duration:17s;animation-delay:-7s; }
.orb-3 { width:300px;height:300px;background:var(--yellow);bottom:-100px;left:30%;animation-duration:25s;animation-delay:-12s; }
@keyframes orbFloat {
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(30px,-40px) scale(1.06)}
  66%{transform:translate(-20px,30px) scale(0.95)}
}
.bg-grid {
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);
  background-size:40px 40px;
}
.layout {
  position:relative;z-index:1;
  width:100%;max-width:600px;
  display:flex;flex-direction:column;align-items:center;
}
.wordmark {
  text-decoration:none;
  display:flex;flex-direction:column;
  line-height:0.92;
  margin-bottom:20px;
  position:relative;
}
.wordmark-line1 { font-family:var(--font-mark);font-size:32px;color:var(--text);letter-spacing:0.01em; }
.wordmark-line2 { font-family:var(--font-mark);font-size:32px;color:var(--pink);letter-spacing:0.01em; }
.wordmark-dot {
  position:absolute;top:-6px;right:-14px;
  width:8px;height:8px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 12px var(--cyan);
}
.tool-badge {
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid rgba(240,25,140,0.3);
  background:rgba(240,25,140,0.06);
  color:var(--pink);
  font-size:10px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;
  padding:6px 16px;border-radius:100px;
  margin-bottom:32px;
  backdrop-filter:blur(8px);
}
.tool-badge-dot {
  width:5px;height:5px;border-radius:50%;
  background:var(--pink);box-shadow:0 0 8px var(--pink);
  animation:badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse{0%,100%{opacity:1}50%{opacity:0.3}}
.card-wrap {
  width:100%;
  background:linear-gradient(135deg,rgba(240,25,140,0.2) 0%,rgba(44,196,255,0.15) 50%,rgba(245,200,0,0.2) 100%);
  padding:1px;
  border-radius:var(--r-lg);
  box-shadow:0 0 0 1px rgba(255,255,255,0.03),0 32px 80px rgba(0,0,0,0.6),0 8px 32px rgba(0,0,0,0.4);
}
.card {
  background:var(--surface);
  border-radius:calc(var(--r-lg) - 1px);
  padding:48px 48px 44px;
  width:100%;
  position:relative;
  overflow:hidden;
}
.card > * { position:relative;z-index:1; }
.steps-nav {
  display:flex;align-items:center;
  margin-bottom:40px;
  gap:0;
}
.step-item { display:flex;align-items:center;gap:10px;flex:1; }
.step-item:last-child { flex:none; }
.step-num {
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-d);font-size:13px;letter-spacing:0.05em;
  border:1.5px solid var(--border-hi);
  background:var(--surface2);color:var(--text-3);
  flex-shrink:0;
  transition:all 0.4s var(--ease);
}
.step-num.active {
  border-color:var(--pink);background:var(--pink-dim);color:var(--pink);
  box-shadow:0 0 0 4px rgba(240,25,140,0.1),0 0 20px rgba(240,25,140,0.2);
}
.step-num.done { border-color:var(--cyan);background:var(--cyan-dim);color:var(--cyan); }
.step-label {
  font-size:10px;font-weight:700;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--text-3);
  transition:color 0.3s;white-space:nowrap;
}
.step-item.s-active .step-label { color:var(--text-2); }
.step-item.s-done .step-label { color:var(--cyan); }
.step-connector {
  flex:1;height:1px;margin:0 12px;
  background:var(--border-hi);position:relative;overflow:visible;
}
.step-connector-fill {
  position:absolute;inset-block:-0.5px;left:0;
  width:0%;background:var(--cyan);
  transition:width 0.6s var(--ease);
  box-shadow:0 0 8px rgba(44,196,255,0.5);
}
.step-connector-fill.filled{width:100%;}
.eyebrow {
  font-size:10px;font-weight:700;letter-spacing:0.25em;
  text-transform:uppercase;color:var(--cyan);
  text-align:center;margin-bottom:10px;
}
.card-title {
  font-family:var(--font-d);
  font-size:clamp(30px,5.5vw,44px);
  letter-spacing:0.04em;line-height:1;
  text-align:center;margin-bottom:40px;
}
.card-title .t-pink   { color:var(--pink); }
.card-title .t-cyan   { color:var(--cyan); }
.card-title .t-yellow { color:var(--yellow); }
.section-divider {
  display:flex;align-items:center;gap:12px;
  margin:8px 0 4px;
}
.section-divider-bar {
  width:3px;height:14px;border-radius:2px;
  background:linear-gradient(to bottom,var(--pink),var(--cyan));
  flex-shrink:0;
}
.section-divider-label {
  font-size:9px;font-weight:700;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--text-3);
}
.section-divider-line { flex:1;height:1px;background:var(--border); }
.fields { display:flex;flex-direction:column;gap:20px; }
.field  { display:flex;flex-direction:column;gap:8px; }
.field-label {
  font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--text-2);display:flex;align-items:center;gap:4px;
}
.field-label .req { color:var(--pink); }

/* ── Standard inputs ──────────────────────────────────── */
input[type="text"],input[type="url"],textarea,select {
  width:100%;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border-hi);
  border-radius:var(--r-sm);
  color:var(--text);
  font-family:var(--font-b);font-size:14px;font-weight:400;
  padding:13px 16px;outline:none;
  transition:border-color 0.2s,box-shadow 0.2s,background 0.2s;
  appearance:none;-webkit-appearance:none;
}
input:hover,textarea:hover,select:hover {
  border-color:rgba(255,255,255,0.18);background:rgba(255,255,255,0.06);
}
input:focus,textarea:focus,select:focus {
  border-color:var(--pink);
  box-shadow:0 0 0 3px rgba(240,25,140,0.1),inset 0 0 0 1px rgba(240,25,140,0.05);
  background:rgba(240,25,140,0.04);
}
input::placeholder,textarea::placeholder { color:var(--text-3); }
textarea { resize:vertical;min-height:100px;line-height:1.7; }
.select-wrap { position:relative; }
.select-wrap::after {
  content:'';position:absolute;right:14px;top:50%;transform:translateY(-50%);
  pointer-events:none;width:0;height:0;
  border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--pink);
}
select { padding-right:40px;cursor:pointer; }
select option { background:#1A1A1A;color:var(--text); }

/* ── Email input — same style as text/url inputs ─────── */
input[type="email"] {
  width:100%;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border-hi);
  border-radius:var(--r-sm);
  color:var(--text);
  font-family:var(--font-b);font-size:14px;font-weight:400;
  padding:13px 16px;outline:none;
  transition:border-color 0.2s,box-shadow 0.2s,background 0.2s;
  appearance:none;-webkit-appearance:none;
}
input[type="email"]:hover {
  border-color:rgba(255,255,255,0.18);background:rgba(255,255,255,0.06);
}
input[type="email"]:focus {
  border-color:var(--pink);
  box-shadow:0 0 0 3px rgba(240,25,140,0.1),inset 0 0 0 1px rgba(240,25,140,0.05);
  background:rgba(240,25,140,0.04);
}
input[type="email"]::placeholder { color:var(--text-3); }
.field.has-error input[type="email"] {
  border-color:rgba(255,77,77,0.6)!important;
  box-shadow:0 0 0 3px rgba(255,77,77,0.1)!important;
}
.email-hint {
  font-size:11px;color:var(--text-3);
  display:flex;align-items:center;gap:6px;
}
.email-hint-dot {
  width:5px;height:5px;border-radius:50%;flex-shrink:0;
  background:var(--cyan);box-shadow:0 0 6px rgba(44,196,255,0.4);
}
.email-hint strong { color:var(--cyan);font-weight:600; }

/* ── Input tabs ───────────────────────────────────────── */
.input-tabs {
  display:flex;gap:4px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  padding:3px;margin-bottom:8px;
}
.input-tab {
  flex:1;padding:7px 12px;
  font-family:var(--font-b);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.1em;
  border:none;background:transparent;color:var(--text-3);
  cursor:pointer;border-radius:6px;transition:all 0.2s;
}
.input-tab.active { background:var(--pink);color:#fff;box-shadow:0 2px 12px rgba(240,25,140,0.3); }
.input-tab:hover:not(.active) { color:var(--text-2);background:rgba(255,255,255,0.06); }
.file-zone {
  border:1.5px dashed rgba(44,196,255,0.25);
  border-radius:var(--r-sm);padding:30px 16px;
  text-align:center;cursor:pointer;position:relative;
  background:rgba(44,196,255,0.03);transition:all 0.2s;
}
.file-zone:hover { background:var(--cyan-dim);border-color:rgba(44,196,255,0.5); }
.file-zone input[type="file"] { position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%; }
.file-zone-icon { font-size:22px;margin-bottom:8px; }
.file-zone-text { font-size:12px;color:var(--text-3);line-height:1.6; }
.file-zone-text strong { color:var(--cyan);font-weight:600;display:block;margin-bottom:2px; }
.file-name { margin-top:8px;font-size:11px;color:var(--cyan);font-weight:600;word-break:break-all; }

/* ── Validation ───────────────────────────────────────── */
.field-error { font-size:11px;color:var(--error);display:none;margin-top:2px;align-items:center;gap:4px; }
.field-error::before { content:'!';width:14px;height:14px;border-radius:50%;background:var(--error);color:#fff;font-size:9px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0; }
.field.has-error .field-error { display:flex; }
.field.has-error input[type="text"],
.field.has-error input[type="url"],
.field.has-error select,
.field.has-error textarea { border-color:rgba(255,77,77,0.6)!important;box-shadow:0 0 0 3px rgba(255,77,77,0.1)!important; }
.error-banner {
  background:rgba(255,77,77,0.06);border:1px solid rgba(255,77,77,0.25);
  border-radius:var(--r-sm);color:var(--error);font-size:13px;
  padding:12px 16px;display:none;margin-top:16px;align-items:center;gap:10px;
}
.error-banner::before { content:'⚠';flex-shrink:0; }
.error-banner.visible { display:flex; }

/* ── Buttons ──────────────────────────────────────────── */
.btn-primary {
  width:100%;border:none;border-radius:var(--r-sm);
  padding:17px 24px;margin-top:20px;
  font-family:var(--font-d);font-size:20px;letter-spacing:0.08em;
  cursor:pointer;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#F0198C 0%,#D4107C 100%);
  color:#fff;
  box-shadow:0 4px 20px rgba(240,25,140,0.3),0 1px 0 rgba(255,255,255,0.1) inset;
  transition:transform 0.2s var(--ease),box-shadow 0.2s,opacity 0.2s;
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.btn-primary::before {
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,0.15) 50%,transparent 65%);
  transform:translateX(-100%);transition:transform 0.5s ease;
}
.btn-primary:hover:not(:disabled)::before { transform:translateX(100%); }
.btn-primary:hover:not(:disabled) {
  transform:translateY(-2px);
  box-shadow:0 8px 32px rgba(240,25,140,0.45),0 1px 0 rgba(255,255,255,0.1) inset;
}
.btn-primary:active:not(:disabled) { transform:translateY(0); }
.btn-primary:disabled { opacity:0.45;cursor:not-allowed; }
.btn-secondary {
  width:100%;border-radius:var(--r-sm);
  padding:15px 24px;margin-top:10px;
  font-family:var(--font-d);font-size:18px;letter-spacing:0.08em;
  cursor:pointer;position:relative;
  background:transparent;
  border:1.5px solid rgba(245,200,0,0.35);
  color:var(--yellow);
  transition:all 0.2s var(--ease);
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.btn-secondary:hover:not(:disabled) {
  background:rgba(245,200,0,0.07);border-color:var(--yellow);
  transform:translateY(-2px);box-shadow:0 6px 24px rgba(245,200,0,0.15);
}
.btn-secondary:disabled { opacity:0.3;cursor:not-allowed; }
.spinner {
  width:16px;height:16px;flex-shrink:0;
  border:2px solid rgba(255,255,255,0.2);
  border-top-color:#fff;border-radius:50%;
  animation:spin 0.65s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.view { animation:viewIn 0.4s var(--ease) both; }
@keyframes viewIn {
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
.btn-primary.locked { opacity:0.3;pointer-events:none; }
.btn-primary.unlocked { opacity:1;pointer-events:auto; }
.select-hint {
  font-size:11px;color:var(--text-3);
  text-align:center;margin-top:4px;transition:color 0.2s;
}
.select-hint.ready { color:var(--cyan);font-weight:600; }
.regen-count { text-align:center;font-size:10px;color:var(--text-3);margin-top:8px;letter-spacing:0.08em; }

/* ── Page loader ──────────────────────────────────────── */
.page-loader {
  position:fixed;inset:0;z-index:1000;
  background:rgba(13,13,13,0.9);backdrop-filter:blur(12px);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:36px;
  opacity:0;pointer-events:none;transition:opacity 0.3s ease;
}
.page-loader.visible{opacity:1;pointer-events:all;}
.loader-ring { position:relative;width:96px;height:96px; }
.loader-ring::before,.loader-ring::after {
  content:'';position:absolute;inset:0;
  border-radius:50%;border:2px solid transparent;
}
.loader-ring::before { border-top-color:var(--pink);border-right-color:var(--pink);animation:loaderSpin 0.9s linear infinite; }
.loader-ring::after { inset:12px;border-bottom-color:var(--cyan);border-left-color:var(--cyan);animation:loaderSpin 0.65s linear infinite reverse; }
.loader-icon { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--pink); }
@keyframes loaderSpin{to{transform:rotate(360deg)}}
.loader-copy { text-align:center;display:flex;flex-direction:column;gap:8px; }
.loader-title { font-family:var(--font-d);font-size:clamp(24px,4vw,32px);letter-spacing:0.05em;line-height:1.1; }
.loader-title .t-pink{color:var(--pink);}
.loader-title .t-cyan{color:var(--cyan);}
.loader-sub { font-size:13px;color:var(--text-2);letter-spacing:0.03em; }
.loader-sub::after { content:'';animation:ldots 1.4s steps(4,end) infinite; }
@keyframes ldots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}100%{content:''}}
.loader-pills { display:flex;gap:6px;flex-wrap:wrap;justify-content:center; }
.loader-pill {
  font-size:9px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  padding:4px 12px;border-radius:100px;
  border:1px solid #222;color:#333;transition:all 0.4s ease;
}
.loader-pill.active { border-color:var(--pink);color:var(--pink);background:var(--pink-dim); }
.loader-pill.done { border-color:var(--cyan);color:var(--cyan);background:var(--cyan-dim); }

/* ═══════════════════════════════════════════
   SUCCESS STATE
═══════════════════════════════════════════ */
#confettiCanvas { position:fixed;inset:0;z-index:2;pointer-events:none; }
.success-view {
  display:flex;flex-direction:column;align-items:center;gap:0;
  animation:viewIn 0.5s var(--ease) both;width:100%;
}
.success-hero {
  text-align:center;padding-bottom:32px;
  border-bottom:1px solid var(--border);
  margin-bottom:28px;width:100%;
}
.success-badge {
  display:inline-flex;align-items:center;gap:7px;
  background:var(--green-dim);border:1px solid rgba(31,217,138,0.25);
  color:var(--green);
  font-size:10px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;
  padding:5px 14px;border-radius:100px;margin-bottom:22px;
}
.success-badge-dot {
  width:6px;height:6px;border-radius:50%;
  background:var(--green);box-shadow:0 0 10px var(--green);
  animation:badgePulse 2s ease-in-out infinite;
}
.success-icon-wrap {
  position:relative;width:100px;height:100px;
  margin:0 auto 26px;
}
.success-icon-rings {
  position:absolute;inset:0;
  animation:iconPop 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes iconPop{from{transform:scale(0.2);opacity:0}to{transform:scale(1);opacity:1}}
.success-icon-glow {
  position:absolute;inset:-20px;border-radius:50%;
  background:radial-gradient(circle,rgba(31,217,138,0.2) 0%,transparent 65%);
  animation:glowBreath 2.5s ease-in-out infinite;
}
@keyframes glowBreath{0%,100%{transform:scale(1);opacity:0.6}50%{transform:scale(1.3);opacity:1}}
.success-heading {
  font-family:var(--font-d);
  font-size:clamp(36px,6.5vw,56px);
  letter-spacing:0.04em;line-height:0.95;
  margin-bottom:14px;
}
.success-heading .t-green { color:var(--green); }
.success-subtext {
  font-size:14px;color:var(--text-2);line-height:1.75;
  max-width:340px;margin:0 auto;
}
.success-subtext strong { color:var(--text);font-weight:600; }

/* Success email pill — shows the actual address */
.success-email-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(44,196,255,0.08);
  border: 1px solid rgba(44,196,255,0.2);
  border-radius: 100px;
  padding: 9px 16px 9px 10px;
  margin-top: 20px;
  max-width: 100%;
}
.sep-icon-wrap {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(44,196,255,0.15);
  border: 1px solid rgba(44,196,255,0.25);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--cyan);
}
.sep-text {
  display: flex; flex-direction: column;
  text-align: left;
  min-width: 0;
}
.sep-label {
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-3); line-height: 1;
  margin-bottom: 2px;
}
.sep-email {
  font-size: 13px; font-weight: 600; color: var(--cyan);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 260px;
}

.success-stats {
  display:grid;grid-template-columns:1fr 1fr 1fr;
  gap:10px;width:100%;margin-bottom:22px;
  animation:viewIn 0.4s var(--ease) 0.15s both;
}
.stat-card {
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:16px 12px;
  display:flex;flex-direction:column;gap:5px;text-align:center;
}
.stat-value { font-family:var(--font-d);font-size:21px;letter-spacing:0.04em; }
.stat-value.pink   { color:var(--pink); }
.stat-value.cyan   { color:var(--cyan); }
.stat-value.yellow { color:var(--yellow); }
.stat-label { font-size:9px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-3); }
.timeline {
  width:100%;background:var(--surface2);
  border:1px solid var(--border);border-radius:var(--r-md);
  overflow:hidden;margin-bottom:18px;
  animation:viewIn 0.4s var(--ease) 0.25s both;
}
.timeline-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--border);
  background:rgba(240,25,140,0.04);
}
.timeline-title {
  display:flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--pink);
}
.tl-live-dot {
  width:6px;height:6px;border-radius:50%;
  background:var(--pink);box-shadow:0 0 8px var(--pink);
  animation:badgePulse 1.3s ease-in-out infinite;
}
.timeline-eta {
  font-size:10px;font-weight:700;letter-spacing:0.08em;color:var(--yellow);
  background:rgba(245,200,0,0.1);border:1px solid rgba(245,200,0,0.2);
  padding:3px 10px;border-radius:100px;
}
.tl-rows { padding:4px 18px 6px; }
.tl-row {
  display:grid;grid-template-columns:28px 1fr auto;
  align-items:center;gap:12px;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,0.04);
}
.tl-row:last-child{border-bottom:none;}
.tl-icon {
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;flex-shrink:0;
}
.tl-icon.done    { background:rgba(31,217,138,0.12);border:1px solid rgba(31,217,138,0.2);color:var(--green); }
.tl-icon.running { background:rgba(245,200,0,0.1);border:1px solid rgba(245,200,0,0.2);animation:tl-pulse 2s ease-in-out infinite; }
.tl-icon.pending { background:rgba(255,255,255,0.04);border:1px solid var(--border);color:var(--text-3); }
@keyframes tl-pulse{0%,100%{box-shadow:0 0 0 0 rgba(245,200,0,0.2)}50%{box-shadow:0 0 0 6px rgba(245,200,0,0)}}
.tl-text { font-size:12px;color:var(--text-2);line-height:1.4; }
.tl-text.dim { color:var(--text-3); }
.tl-status { font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;white-space:nowrap; }
.tl-status.green  { color:var(--green); }
.tl-status.yellow { color:var(--yellow); }
.tl-status.muted  { color:var(--text-3); }
.tl-progress { padding:0 18px 16px; }
.progress-bar { height:3px;background:rgba(255,255,255,0.06);border-radius:100px;overflow:hidden; }
.progress-fill {
  height:100%;width:30%;
  background:linear-gradient(90deg,var(--pink),var(--cyan));
  border-radius:100px;
  animation:progAnim 4s ease-in-out infinite alternate;
}
@keyframes progAnim{from{width:24%}to{width:58%}}
.progress-meta {
  display:flex;justify-content:space-between;
  font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  margin-top:7px;color:var(--text-3);
}
.progress-meta span:last-child{color:var(--yellow);}
.close-callout {
  width:100%;display:flex;align-items:flex-start;gap:14px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border-hi);
  border-radius:var(--r-sm);padding:16px;
  animation:viewIn 0.4s var(--ease) 0.35s both;
}
.close-callout-icon {
  width:36px;height:36px;flex-shrink:0;border-radius:8px;
  background:var(--cyan-dim);border:1px solid rgba(44,196,255,0.15);
  display:flex;align-items:center;justify-content:center;font-size:17px;
}
.close-callout-title {
  font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:4px;
}
.close-callout-desc { font-size:12px;color:var(--text-3);line-height:1.65; }
.close-callout-desc strong { color:var(--text-2);font-weight:600; }
.success-footer {
  display:flex;align-items:center;gap:10px;
  font-size:11px;color:var(--text-3);
  margin-top:20px;
  animation:viewIn 0.4s var(--ease) 0.45s both;
}
.success-footer::before,.success-footer::after { content:'';flex:1;height:1px;background:var(--border); }
.success-footer-inner { display:flex;align-items:center;gap:6px;white-space:nowrap; }
.sf-dot { width:5px;height:5px;border-radius:50%;background:var(--pink);box-shadow:0 0 8px var(--pink); }
.hidden{display:none!important;}
@media(max-width:560px){
  .card{padding:32px 24px 30px;}
  .success-stats{grid-template-columns:1fr 1fr;}
  .success-stats .stat-card:last-child{grid-column:span 2;}
  .steps-nav .step-label{display:none;}
  .step-connector{margin:0 8px;}
  .tl-row{grid-template-columns:24px 1fr auto;gap:8px;}
  .sep-email { max-width: 180px; }
}

/* ── Client Type Toggle ───────────────────────────────────────────────────── */
.client-type-toggle {
  display:flex;gap:8px;margin-top:4px;
}
.ct-btn {
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 16px;border-radius:10px;border:1.5px solid var(--border);
  background:var(--surface);color:var(--text-2);font-family:inherit;
  font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s var(--ease);
}
.ct-btn:hover { border-color:var(--pink);color:var(--text-1); }
.ct-btn.ct-active {
  border-color:var(--pink);background:rgba(240,25,140,0.08);
  color:var(--text-1);box-shadow:0 0 0 3px rgba(240,25,140,0.12);
}
.ct-icon { font-size:16px;line-height:1; }

/* ── Multi-select Buttons ─────────────────────────────────────────────────── */
.multi-select {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.ms-btn {
  flex: 1;
  min-width: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.ms-btn:hover { border-color: var(--cyan); color: var(--text); }
.ms-btn.ms-active {
  border-color: var(--cyan);
  background: rgba(44,196,255,0.12);
  color: #fff;
  box-shadow: 0 0 20px rgba(44,196,255,0.25), inset 0 0 12px rgba(44,196,255,0.1);
  transform: translateY(-1px);
}

#f-instaTiktokUsernames {
  margin-top: 20px;
  padding: 20px;
  background: rgba(44,196,255,0.03);
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,0.1);
  margin-bottom: 35px;
  animation: fadeIn 0.3s ease;
  /* v15: spacing between insta/tiktok fields */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Context Status Pill ──────────────────────────────────────────────────── */
.context-status {
  display:flex;align-items:center;gap:8px;margin-top:10px;
  padding:8px 12px;border-radius:8px;
  background:rgba(31,217,138,0.07);border:1px solid rgba(31,217,138,0.2);
  font-size:12px;color:#1fd98a;font-weight:500;
}
.context-status-dot {
  width:7px;height:7px;border-radius:50%;background:#1fd98a;
  box-shadow:0 0 8px #1fd98a;flex-shrink:0;
}

/* ── Stored Context Notice ────────────────────────────────────────────────── */
.stored-context-notice {
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 16px;border-radius:10px;
  background:rgba(44,196,255,0.06);border:1px solid rgba(44,196,255,0.2);
  margin-bottom:4px;
}
.scn-icon { font-size:18px;line-height:1;color:var(--cyan);flex-shrink:0;margin-top:1px; }
.scn-title { font-size:13px;font-weight:700;color:var(--text-1);margin-bottom:4px; }
.scn-desc  { font-size:12px;color:var(--text-3);line-height:1.5; }
.scn-desc strong { color:var(--text-2); }

/* ── Optional field label hint ───────────────────────────────────────────── */
.field-optional {
  font-size:11px;font-weight:400;color:var(--text-3);
  margin-left:6px;letter-spacing:0.02em;
}

/* ── Read-only input ──────────────────────────────────────────────────────── */
.input-readonly {
  opacity:0.55;cursor:not-allowed;pointer-events:none;
}

.field-status {
  font-size: 11px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 16px;
}
.status-pill {
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.05em;
}
.status-pill.file { background: var(--cyan-dim); color: var(--cyan); border: 1px solid rgba(44,196,255,0.2); }
.status-pill.text { background: var(--pink-dim); color: var(--pink); border: 1px solid rgba(240,25,140,0.2); }
.status-msg { color: var(--text-3); font-style: italic; }