*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root {
  --black:#050505; --gold:#C9A84C; --gold-b:#F5D47A;
  --blue:#7EC8F0; --blue-b:#B3E0FF;
  --white:#F0EDE6; --dim:#555550;
  --border:rgba(201,168,76,0.15);
}
html,body { height:100%; background:var(--black); color:var(--white);
  font-family:'DM Sans',sans-serif; overflow:hidden; }
body::before { content:''; position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events:none; z-index:998; opacity:0.4; }

.screen { position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; opacity:0; pointer-events:none; transition:opacity 0.55s ease; }
.screen.active { opacity:1; pointer-events:all; }

/* ══ INTRO ══ */
#s-intro { justify-content:flex-start; overflow-y:auto; padding-bottom:40px; }
.intro-hero { width:100%; display:flex; flex-direction:column;
  align-items:center; padding:52px 28px 36px; text-align:center; position:relative; }
.intro-hero::after { content:''; position:absolute; bottom:0; left:50%;
  transform:translateX(-50%); width:1px; height:48px;
  background:linear-gradient(to bottom,var(--gold),transparent); }
.intro-glow { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:340px; height:340px;
  background:radial-gradient(circle,rgba(201,168,76,0.07) 0%,transparent 70%);
  pointer-events:none; }
.intro-logo { font-family:'Cinzel',serif; font-size:clamp(58px,17vw,92px);
  font-weight:700; line-height:0.95; letter-spacing:0.02em;
  background:linear-gradient(135deg,var(--gold-b) 0%,var(--gold) 55%,#7A5C10 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:12px; }
.intro-tag { font-size:10px; letter-spacing:0.38em; color:var(--gold);
  text-transform:uppercase; margin-bottom:8px; }
.intro-headline { font-family:'Bebas Neue',sans-serif;
  font-size:clamp(18px,4.5vw,26px); letter-spacing:0.14em;
  color:var(--white); line-height:1.2; }

.why-section { width:100%; max-width:480px; padding:48px 24px 0; display:flex;
  flex-direction:column; gap:0; }
.why-card { padding:28px 0 28px; border-bottom:1px solid rgba(255,255,255,0.05); }
.why-card:last-of-type { border-bottom:none; }
.why-num { font-family:'Cinzel',serif; font-size:11px; letter-spacing:0.3em;
  color:var(--gold); opacity:0.5; margin-bottom:10px; text-transform:uppercase; }
.why-title { font-family:'Bebas Neue',sans-serif; font-size:22px;
  letter-spacing:0.1em; color:var(--white); margin-bottom:10px; line-height:1.1; }
.why-body { font-size:14px; font-weight:300; line-height:1.8; color:rgba(240,237,230,0.65); }
.why-body strong { color:var(--blue-b); font-weight:400; }

.intro-cta-wrap { width:100%; max-width:480px; padding:40px 24px 0;
  display:flex; flex-direction:column; align-items:center; gap:12px; }
.intro-note { font-size:10px; letter-spacing:0.2em; color:var(--dim);
  text-transform:uppercase; text-align:center; }

/* ══ CAPTURE ══ */
#s-capture { justify-content:center; padding:0 28px; overflow-y:auto; }
.cap-wrap { width:100%; max-width:420px; display:flex; flex-direction:column;
  align-items:center; padding:48px 0 40px; }
.cap-logo { font-family:'Cinzel',serif; font-size:34px; font-weight:700;
  background:linear-gradient(135deg,var(--gold-b),var(--gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; margin-bottom:6px; }
.cap-title { font-family:'Bebas Neue',sans-serif; font-size:22px;
  letter-spacing:0.12em; color:var(--white); text-align:center; margin-bottom:8px; }
.cap-sub { font-size:13px; font-weight:300; line-height:1.75;
  color:var(--dim); text-align:center; max-width:300px; margin-bottom:36px; }
.cap-sub strong { color:var(--blue-b); font-weight:400; }

.field-wrap { width:100%; margin-bottom:16px; position:relative; }
.field-label { font-size:9px; letter-spacing:0.32em; color:var(--gold);
  text-transform:uppercase; display:block; margin-bottom:8px; }
.field-opt { color:var(--dim); font-size:8px; letter-spacing:0.2em; margin-left:6px; }
.field-input { width:100%; background:rgba(255,255,255,0.03);
  border:1px solid var(--border); border-radius:2px;
  padding:14px 16px; font-family:'DM Sans',sans-serif;
  font-size:15px; font-weight:300; color:var(--white);
  outline:none; transition:border-color 0.25s, background 0.25s;
  -webkit-appearance:none; appearance:none; }
.field-input::placeholder { color:var(--dim); font-size:14px; }
.field-input:focus { border-color:var(--gold); background:rgba(201,168,76,0.04); }
.field-hint { font-size:10px; color:var(--dim); margin-top:6px;
  letter-spacing:0.08em; font-weight:300; }
.cap-divider { width:100%; border:none;
  border-top:1px solid rgba(255,255,255,0.05); margin:8px 0 20px; }
.cap-agree { font-size:10px; font-weight:300; color:var(--dim);
  text-align:center; line-height:1.6; max-width:280px; margin-bottom:24px; }
.cap-agree a { color:var(--gold); text-decoration:none; }
.cap-err { font-size:11px; color:#E74C3C; text-align:center;
  min-height:16px; margin-bottom:8px; letter-spacing:0.05em; }

/* ══ PROMPT SCREEN ══ */
#s-prompt { justify-content:flex-start; overflow-y:auto; padding:0 24px 96px; }
.pr-wrap { width:100%; max-width:440px; display:flex; flex-direction:column;
  align-items:center; padding:44px 0 20px; }
.pr-eyebrow { font-size:9px; letter-spacing:0.4em; color:rgba(201,168,76,0.8);
  text-transform:uppercase; margin-bottom:12px; text-align:center; }
.pr-title { font-family:'Bebas Neue',sans-serif; font-size:26px;
  letter-spacing:0.12em; color:var(--white); text-align:center; margin-bottom:10px; }
.pr-sub { font-size:13px; font-weight:300; line-height:1.75; color:rgba(240,237,230,0.55);
  text-align:center; max-width:320px; margin-bottom:26px; }
.pr-area { width:100%; min-height:132px; resize:none;
  background:rgba(255,255,255,0.03); border:1px solid var(--border);
  border-radius:2px; padding:16px; color:var(--white);
  font-family:'DM Sans',sans-serif; font-size:15px; font-weight:300;
  line-height:1.7; outline:none; transition:border-color 0.25s,background 0.25s; }
.pr-area::placeholder { color:var(--dim); }
.pr-area:focus { border-color:var(--gold); background:rgba(201,168,76,0.04); }
.chip-row { display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  margin:18px 0 26px; width:100%; }
.chip { background:transparent; border:1px solid rgba(201,168,76,0.28);
  color:rgba(240,237,230,0.7); font-family:'DM Sans',sans-serif; font-weight:300;
  font-size:11px; letter-spacing:0.1em; padding:9px 14px; border-radius:20px;
  cursor:pointer; transition:all 0.2s; }
.chip:hover, .chip.on { border-color:var(--gold); color:var(--gold-b);
  background:rgba(201,168,76,0.08); }
.pr-loading { display:none; flex-direction:column; align-items:center; gap:14px;
  margin-top:8px; }
.pr-loading.show { display:flex; }
.pr-loading p { font-family:'Cinzel',serif; font-size:13px; font-style:italic;
  color:rgba(201,168,76,0.7); letter-spacing:0.08em; text-align:center; }

/* ══ TELEPROMPTER ══ */
#s-main { justify-content:flex-start; }
.top-bar { width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:13px 16px; flex-shrink:0; border-bottom:1px solid rgba(201,168,76,0.1);
  background:var(--black); z-index:10; }
.top-logo { font-family:'Cinzel',serif; font-size:19px; font-weight:700;
  background:linear-gradient(135deg,var(--gold-b),var(--gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.top-controls { display:flex; gap:6px; align-items:center; }
.ico-btn { width:30px; height:30px; border-radius:50%;
  background:rgba(201,168,76,0.1); border:1px solid var(--border);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background 0.2s; flex-shrink:0; }
.ico-btn:hover { background:rgba(201,168,76,0.2); }
.ico-btn svg { width:11px; height:11px; }
.spd-btn { font-family:'Bebas Neue',sans-serif; font-size:13px; letter-spacing:0.1em;
  padding:5px 11px; border:1px solid var(--border); background:transparent;
  color:var(--dim); cursor:pointer; transition:all 0.2s; border-radius:2px; height:30px; }
.spd-btn.active { background:rgba(201,168,76,0.14); color:var(--gold-b); border-color:var(--gold); }

.fade-top { position:absolute; top:56px; left:0; right:0; height:68px;
  background:linear-gradient(to bottom,var(--black),transparent); z-index:5; pointer-events:none; }
.fade-bot { position:absolute; bottom:118px; left:0; right:0; height:88px;
  background:linear-gradient(to top,var(--black),transparent); z-index:5; pointer-events:none; }
.cursor-line { position:absolute; left:50%; transform:translateX(-50%);
  top:50%; width:88%; max-width:440px; height:1px;
  background:linear-gradient(to right,transparent,rgba(126,200,240,0.15),transparent);
  z-index:6; pointer-events:none; }

.tp-window { flex:1; width:100%; overflow:hidden; position:relative; padding-bottom:68px; }
.tp-inner { width:100%; max-width:500px; margin:0 auto; padding:0 24px; will-change:transform; }
.tp-block { margin-bottom:44px; text-align:center; }
.tp-line { font-family:'Cinzel',serif; font-size:clamp(16px,4vw,22px);
  line-height:1.85; display:block; margin-bottom:2px; }
.g { color:var(--gold-b); }
.b { color:var(--blue-b); }
.w { color:rgba(240,237,230,0.8); }
.d { color:var(--dim); font-style:italic; font-size:0.74em; line-height:2.2; }
.tp-div { border:none; border-top:1px solid rgba(255,255,255,0.04); margin:0 auto 44px; width:32px; }

.rec-overlay { position:absolute; top:62px; right:14px; z-index:20;
  display:none; align-items:center; gap:6px;
  background:rgba(192,57,43,0.12); border:1px solid rgba(192,57,43,0.25);
  padding:5px 10px; border-radius:2px; }
.rec-overlay.show { display:flex; }
.rec-dot-live { width:7px; height:7px; border-radius:50%; background:#E74C3C;
  animation:blink 1s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.15} }
.rec-timer-sm { font-family:'Bebas Neue',sans-serif; font-size:13px;
  letter-spacing:0.15em; color:#E74C3C; }

.wave-overlay { position:absolute; bottom:0; left:0; right:0; height:42px;
  z-index:7; pointer-events:none; display:none; }
.wave-overlay.show { display:block; }
canvas#waveform { width:100%; height:100%; }

.bot-bar { width:100%; flex-shrink:0; padding:10px 16px 14px; padding-bottom:68px;
  border-top:1px solid rgba(201,168,76,0.08); background:var(--black); z-index:10;
  display:flex; flex-direction:column; align-items:center; gap:9px; }
.progress { width:100%; max-width:440px; height:2px;
  background:rgba(255,255,255,0.05); border-radius:1px; overflow:hidden; }
.progress-fill { height:100%; width:0%;
  background:linear-gradient(to right,var(--gold),var(--gold-b)); transition:width 0.12s linear; }
.bot-row { display:flex; align-items:center; gap:10px;
  width:100%; max-width:440px; justify-content:space-between; }
.tone-row { display:flex; align-items:center; gap:7px; }
.tone-lbl { font-size:9px; letter-spacing:0.22em; color:var(--dim); text-transform:uppercase; }
.toggle { width:36px; height:20px; background:rgba(255,255,255,0.07);
  border-radius:10px; position:relative; cursor:pointer;
  border:1px solid var(--border); transition:background 0.3s; }
.toggle.on { background:rgba(201,168,76,0.22); border-color:var(--gold); }
.toggle::after { content:''; position:absolute; top:3px; left:3px;
  width:13px; height:13px; border-radius:50%; background:var(--dim);
  transition:transform 0.3s,background 0.3s; }
.toggle.on::after { transform:translateX(16px); background:var(--gold-b); }

.rec-pill { display:flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,var(--gold-b),var(--gold));
  border:none; cursor:pointer; padding:11px 22px;
  transition:transform 0.2s,box-shadow 0.2s; border-radius:2px; }
.rec-pill:hover { transform:translateY(-1px); box-shadow:0 6px 22px rgba(201,168,76,0.28); }
.rec-pill.active { background:linear-gradient(135deg,#E74C3C,#C0392B);
  animation:rpulse 1.2s ease-in-out infinite; }
@keyframes rpulse { 0%,100%{box-shadow:0 0 0 0 rgba(192,57,43,0.4)} 50%{box-shadow:0 0 0 9px rgba(192,57,43,0)} }
.rec-dot { width:9px; height:9px; border-radius:50%; background:var(--black); flex-shrink:0; }
.rec-pill.active .rec-dot { background:var(--white); }
.rec-lbl { font-family:'Bebas Neue',sans-serif; font-size:14px; letter-spacing:0.2em; color:var(--black); }
.rec-pill.active .rec-lbl { color:var(--white); }
.bot-status { font-size:9px; letter-spacing:0.22em; color:var(--dim);
  text-transform:uppercase; text-align:center; }

/* ══ REVIEW ══ */
#s-review { justify-content:center; padding:0 24px; }

/* ══ LIBRARY ══ */
#s-library { justify-content:flex-start; overflow-y:auto; padding:0 20px 96px; }
.lib-wrap { width:100%; max-width:460px; margin:0 auto; padding:44px 0 20px; }
.lib-head { text-align:center; margin-bottom:26px; }
.lib-title { font-family:'Bebas Neue',sans-serif; font-size:26px;
  letter-spacing:0.14em; color:var(--white); margin-bottom:6px; }
.lib-sub { font-size:12px; font-weight:300; color:rgba(240,237,230,0.45);
  letter-spacing:0.06em; }
.aff-card { width:100%; background:rgba(255,255,255,0.025);
  border:1px solid rgba(201,168,76,0.14); border-radius:3px;
  padding:18px 18px 16px; margin-bottom:12px; }
.aff-title { font-family:'Cinzel',serif; font-size:16px; color:var(--gold-b);
  margin-bottom:6px; line-height:1.4; }
.aff-snippet { font-size:12px; font-weight:300; color:rgba(240,237,230,0.5);
  line-height:1.7; margin-bottom:10px; }
.aff-meta { font-size:9px; letter-spacing:0.2em; color:rgba(240,237,230,0.28);
  text-transform:uppercase; margin-bottom:14px; }
.aff-actions { display:flex; gap:10px; align-items:center; }
.aff-play { flex:1; display:flex; align-items:center; justify-content:center; gap:9px;
  background:linear-gradient(135deg,var(--gold-b),var(--gold)); color:var(--black);
  border:none; cursor:pointer; padding:12px 16px; border-radius:2px;
  font-family:'Bebas Neue',sans-serif; font-size:13px; letter-spacing:0.2em; }
.aff-del { background:transparent; border:1px solid rgba(192,57,43,0.25);
  color:rgba(192,57,43,0.7); font-family:'DM Sans',sans-serif; font-size:11px;
  letter-spacing:0.12em; padding:12px 14px; border-radius:2px; cursor:pointer;
  transition:all 0.2s; }
.aff-del:hover { border-color:rgba(192,57,43,0.7); color:#E74C3C; }
.lib-empty { text-align:center; padding:40px 10px; }
.lib-empty p { font-size:13px; font-weight:300; line-height:1.9;
  color:rgba(240,237,230,0.4); margin-bottom:22px; }

/* ══ SLEEP ══ */
#s-sleep { justify-content:center; gap:26px; }
.sleep-logo { font-family:'Cinzel',serif; font-size:clamp(52px,16vw,86px);
  font-weight:700; line-height:1;
  background:linear-gradient(135deg,var(--gold-b),var(--gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  text-align:center; animation:gpulse 4s ease-in-out infinite; }
@keyframes gpulse { 0%,100%{filter:brightness(0.58)} 50%{filter:brightness(1.28)} }
.sleep-stat { font-size:9px; letter-spacing:0.36em; color:var(--dim);
  text-transform:uppercase; text-align:center; }
.sleep-lp { font-family:'Bebas Neue',sans-serif; font-size:11px;
  letter-spacing:0.28em; color:var(--gold); opacity:0.38; text-align:center; }
.sleep-bar { width:140px; height:1px; background:rgba(201,168,76,0.1);
  position:relative; overflow:hidden; }
.sleep-bar::after { content:''; position:absolute; top:0; left:-40%; width:40%; height:100%;
  background:linear-gradient(to right,transparent,var(--gold),transparent);
  animation:sl 3s ease-in-out infinite; }
@keyframes sl { 0%{left:-40%} 100%{left:140%} }

/* ══ BUTTONS ══ */
.btn-primary { background:linear-gradient(135deg,var(--gold-b),var(--gold));
  color:var(--black); font-family:'Bebas Neue',sans-serif; font-size:14px;
  letter-spacing:0.22em; padding:14px 30px; border:none; cursor:pointer;
  width:100%; max-width:320px; border-radius:2px;
  transition:transform 0.2s,box-shadow 0.2s; }
.btn-primary:active { transform:scale(0.97); }
.btn-primary[disabled] { opacity:0.45; cursor:default; }
.btn-ghost { background:transparent; border:1px solid rgba(201,168,76,0.3);
  color:rgba(240,237,230,0.75); font-family:'Bebas Neue',sans-serif;
  font-size:14px; letter-spacing:0.22em; padding:14px 26px; cursor:pointer;
  width:100%; max-width:320px; border-radius:2px; transition:all 0.2s; }
.btn-ghost:hover { color:var(--gold-b); border-color:var(--gold); }
.btn-stop { background:transparent; border:1px solid rgba(192,57,43,0.2);
  color:rgba(192,57,43,0.58); font-family:'DM Sans',sans-serif; font-size:11px;
  letter-spacing:0.15em; padding:11px 22px; cursor:pointer; max-width:220px; width:100%;
  transition:all 0.2s; }
.btn-stop:hover { border-color:rgba(192,57,43,0.8); color:rgba(192,57,43,1); }

.spinner { width:26px; height:26px; border-radius:50%;
  border:1px solid rgba(201,168,76,0.15); border-top-color:var(--gold-b);
  animation:spin 0.9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg) } }

@keyframes brainFloat {
  0%,100%{ transform:translateY(0px) scale(1) rotate(-0.5deg); filter:brightness(0.9) saturate(1.1); }
  33%{ transform:translateY(-10px) scale(1.02) rotate(0.5deg); filter:brightness(1.05) saturate(1.25); }
  66%{ transform:translateY(-5px) scale(1.01) rotate(0deg); filter:brightness(0.95) saturate(1.15); }
}
@keyframes brainPulse {
  0%,100%{ opacity:0.5; filter:brightness(0.65) saturate(0.85); }
  50%{ opacity:0.65; filter:brightness(0.8) saturate(1.0); }
}
@keyframes bounce {
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(5px)}
}

/* ══ BOTTOM NAV ══ */
#bottom-nav { display:none; position:fixed; bottom:0; left:0; right:0; height:60px;
  background:rgba(5,5,5,0.98); border-top:1px solid rgba(201,168,76,0.1);
  align-items:center; justify-content:space-around; z-index:1000;
  padding-bottom:env(safe-area-inset-bottom); }
.nav-btn { display:flex; flex-direction:column; align-items:center; gap:3px;
  background:transparent; border:none; cursor:pointer; padding:8px 12px;
  opacity:0.4; transition:opacity 0.2s; }
.nav-btn span { font-size:8px; letter-spacing:0.18em; color:var(--gold);
  font-family:'DM Sans',sans-serif; text-transform:uppercase; }