@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#070710;
  --surface:#0e0e1c;
  --surface2:#141428;
  --surface3:#1a1a35;
  --border:#222240;
  --accent:#818cf8;
  --accent2:#a5b4fc;
  --accent-glow:rgba(129,140,248,0.1);
  --green:#22c55e;
  --green-bg:rgba(34,197,94,0.08);
  --red:#ef4444;
  --red-bg:rgba(239,68,68,0.1);
  --amber:#f59e0b;
  --amber-bg:rgba(245,158,11,0.08);
  --text:#eeeeff;
  --text2:#8888aa;
  --text3:#444466;
  --radius:16px;
  --radius-sm:10px;
}

body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.6;max-width:560px;margin:0 auto;padding:0 16px}

/* EMERGENCY GATE */
.emergency-gate{background:var(--red-bg);border:2px solid var(--red);border-radius:var(--radius);padding:20px;margin:20px 0}
.emergency-gate h2{font-size:16px;font-weight:800;color:var(--red);margin-bottom:10px;text-transform:uppercase;letter-spacing:0.5px}
.emergency-gate p{font-size:14px;color:#fca5a5;line-height:1.6;margin-bottom:14px}
.emergency-list{list-style:none;padding:0;margin-bottom:14px}
.emergency-list li{font-size:13px;color:#fca5a5;padding:4px 0;padding-left:16px;position:relative}
.emergency-list li::before{content:"•";position:absolute;left:0;color:var(--red)}
.emergency-btn{display:block;background:var(--red);color:#fff;text-align:center;padding:14px;border-radius:var(--radius-sm);font-size:15px;font-weight:800;text-decoration:none;margin-bottom:8px}
.continue-btn{display:block;background:var(--surface2);border:1px solid var(--border);color:var(--text2);text-align:center;padding:12px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;width:100%}
.continue-btn:hover{border-color:var(--accent);color:var(--accent2)}

/* HERO */
.hero{text-align:center;padding:32px 0 20px}
.hero-time{font-size:13px;color:var(--text3);font-family:monospace;margin-bottom:8px}
.hero h1{font-size:26px;font-weight:800;line-height:1.2;margin-bottom:8px}
.hero h1 span{color:var(--accent2)}
.hero-sub{font-size:14px;color:var(--text2);margin-bottom:4px}
.hero-calm{font-size:13px;color:var(--text3);font-style:italic}

/* LIMIT */
.limit-bar{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:14px}
.limit-dots{display:flex;gap:4px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);transition:all 0.3s}
.dot.used{background:var(--surface3);border:1px solid var(--border)}
.limit-text{font-size:11px;color:var(--text2)}

/* FORM */
.form-section{margin-bottom:14px}
.q-label{font-size:12px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:10px;display:block}
.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opt-btn{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-sm);padding:12px 10px;cursor:pointer;text-align:center;transition:all 0.2s;font-family:'Inter',sans-serif}
.opt-btn:hover{border-color:var(--accent)}
.opt-btn.active{border-color:var(--accent);background:var(--accent-glow)}
.opt-icon{font-size:20px;display:block;margin-bottom:4px}
.opt-text{font-size:12px;font-weight:600;color:var(--text)}
.opt-sub{font-size:10px;color:var(--text2);margin-top:2px;display:block}

/* LIMIT WARNING */
.limit-warning{display:none;background:var(--red-bg);border:1px solid rgba(239,68,68,0.3);border-radius:var(--radius);padding:16px;text-align:center;margin-bottom:14px}
.limit-warning p{color:#fca5a5;font-size:14px}

/* GENERATE BTN */
.generate-btn{width:100%;padding:18px;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:none;border-radius:var(--radius);font-size:17px;font-weight:800;cursor:pointer;margin-bottom:24px;font-family:'Inter',sans-serif;transition:all 0.2s}
.generate-btn:hover{opacity:0.9}
.generate-btn:disabled{opacity:0.5;cursor:not-allowed}

/* LOADING */
.loading{display:none;text-align:center;padding:40px 0}
.loading-moon{font-size:40px;animation:pulse 1.5s ease-in-out infinite;margin-bottom:12px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
.loading h3{font-size:16px;font-weight:700;color:var(--text);margin-bottom:6px}
.loading p{font-size:13px;color:var(--text2)}

/* RESULT */
.result-section{display:none}

/* STATUS */
.status-safe{background:var(--green-bg);border:2px solid rgba(34,197,94,0.3);border-radius:var(--radius);padding:16px;margin-bottom:14px;text-align:center}
.status-safe-text{font-size:13px;font-weight:700;color:var(--green)}
.status-callnow{background:var(--amber-bg);border:2px solid rgba(245,158,11,0.3);border-radius:var(--radius);padding:16px;margin-bottom:14px}
.status-callnow-text{font-size:13px;font-weight:700;color:var(--amber)}

/* BEST GUESS */
.best-guess{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:14px}
.guess-label{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px}
.guess-text{font-size:16px;font-weight:700;color:var(--text);margin-bottom:6px;line-height:1.4}
.guess-note{font-size:12px;color:var(--text3);font-style:italic}

/* FIRST ACTION */
.first-action{background:var(--accent-glow);border:2px solid var(--accent);border-radius:var(--radius);padding:20px;margin-bottom:14px}
.action-label{font-size:10px;font-weight:800;color:var(--accent2);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.action-main{font-size:20px;font-weight:800;color:var(--text);margin-bottom:8px}
.action-sub{font-size:14px;color:var(--text2);line-height:1.6}

/* LADDER */
.ladder-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:14px}
.ladder-title{font-size:13px;font-weight:700;color:var(--text2);margin-bottom:12px;text-transform:uppercase;letter-spacing:0.5px}
.ladder-step{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.ladder-step:last-child{border:none}
.step-num{width:24px;height:24px;border-radius:50%;background:var(--accent-glow);border:1px solid var(--accent);color:var(--accent2);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.step-text{font-size:13px;color:var(--text2);line-height:1.5}
.step-text strong{color:var(--text)}

/* SAFETY BREAK */
.safety-break{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:14px;border-left:3px solid var(--red)}
.safety-title{font-size:12px;font-weight:800;color:var(--red);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px}
.safety-text{font-size:13px;color:var(--text2);line-height:1.6}

/* PURPLE PHASE */
.purple-card{background:rgba(168,85,247,0.08);border:1px solid rgba(168,85,247,0.3);border-radius:var(--radius);padding:16px;margin-bottom:14px}
.purple-title{font-size:13px;font-weight:800;color:#c084fc;margin-bottom:6px}
.purple-text{font-size:13px;color:var(--text2);line-height:1.6}

/* REASSURANCE */
.reassurance{text-align:center;padding:16px;margin-bottom:14px}
.reassurance-text{font-size:14px;color:var(--text2);font-style:italic;line-height:1.7}

/* DISCLAIMER */
.disclaimer{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:14px;font-size:11px;color:var(--text3);line-height:1.6}

/* NEW BTN */
.new-btn{width:100%;background:var(--surface2);border:1px solid var(--border);color:var(--text2);padding:12px;border-radius:var(--radius-sm);cursor:pointer;font-size:14px;font-weight:600;font-family:'Inter',sans-serif;margin-bottom:20px}
.new-btn:hover{border-color:var(--accent);color:var(--accent2)}

/* TOAST */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--surface2);border:1px solid var(--accent);color:var(--text);padding:10px 18px;border-radius:var(--radius);font-size:13px;opacity:0;transition:opacity 0.2s;pointer-events:none;z-index:999}
.toast.show{opacity:1}

/* FOOTER */
.footer{text-align:center;padding:20px 0;border-top:1px solid var(--border);color:var(--text3);font-size:11px;margin-top:20px}
.footer a{color:var(--accent2);text-decoration:none}

@media(max-width:400px){
  .options-grid{grid-template-columns:1fr}
}