:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:#eaf5f3;background:#091a20}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% 0,#173f45 0,#0a1e25 55%,#08171d 100%);display:flex;justify-content:center;align-items:center;padding:24px}
main{width:min(100%,620px);background:#102930;border:1px solid #285158;border-radius:24px;padding:clamp(22px,5vw,40px);box-shadow:0 20px 70px #0006}

.brand{display:flex;justify-content:space-between;align-items:center;gap:12px}
.logo{font-size:25px;font-weight:800;letter-spacing:-1px}
.logo i{color:#6ccec1;font-style:normal}
.tag{color:#8cb3b5;font-size:12px}

.progress{display:flex;gap:6px;margin:24px 0 12px}
.progress span{height:5px;flex:1;border-radius:8px;background:#29454b}
.progress span.active{background:#62c8bc}

.eyebrow{color:#91b8b9;font-size:12px;font-weight:700;letter-spacing:1.5px;margin-bottom:18px}
h1{font-size:clamp(27px,5vw,38px);line-height:1.17;letter-spacing:-1px;margin:0 0 15px}
h2{font-size:18px;margin:26px 0 10px;letter-spacing:-.3px}
p{color:#b7cdd0;line-height:1.65;margin:0 0 22px}

.options{display:grid;gap:10px;margin:22px 0}
.option{appearance:none;background:#17343b;border:1px solid #35535a;border-radius:13px;padding:16px;text-align:left;color:#e6f3f1;font:inherit;cursor:pointer;display:flex;justify-content:space-between;gap:10px;align-items:center;min-height:56px}
.option:hover,.option:focus-visible{border-color:#71d4c7;outline:none}
.option.selected{background:#1b4c50;border-color:#6bcebf}
.option .check{color:#6bcebf;font-weight:bold}

.actions{display:flex;gap:10px;margin-top:25px;flex-wrap:wrap}
.btn{font:inherit;font-weight:700;border-radius:12px;padding:14px 18px;cursor:pointer;border:1px solid transparent}
.primary{background:#67d0c2;color:#082329;flex:1}
.primary:hover{background:#89e1d6}
.primary:disabled{opacity:.6;cursor:default}
.secondary{background:transparent;border-color:#44656a;color:#d9efec}
.secondary:hover{border-color:#71d4c7}

.note{font-size:12px;color:#8eaaaf;margin-top:16px;line-height:1.6}
.summary{background:#16383e;border:1px solid #305a5e;border-radius:14px;padding:18px;margin:20px 0}
.summary div{color:#bfe0dc;line-height:1.7}
.summary b{color:#eaf5f3}

textarea{width:100%;min-height:110px;background:#17343b;border:1px solid #35535a;border-radius:13px;color:#e6f3f1;font:inherit;padding:14px;line-height:1.6;resize:vertical}
textarea:focus{outline:none;border-color:#71d4c7}

/* mode picker */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}
.mcard{appearance:none;background:#17343b;border:1px solid #35535a;border-radius:16px;padding:20px;text-align:left;color:#e6f3f1;font:inherit;cursor:pointer;display:flex;flex-direction:column;gap:8px;transition:border-color .15s}
.mcard:hover,.mcard:focus-visible{border-color:#71d4c7;outline:none}
.mcard .mtitle{font-size:17px;font-weight:800;letter-spacing:-.3px}
.mcard .mtime{font-size:11px;color:#6bcebf;font-weight:700;letter-spacing:1px}
.mcard .mdesc{font-size:13px;color:#a9c6c4;line-height:1.55}
@media (max-width:480px){.modes{grid-template-columns:1fr}}

/* learn card */
.learn h3{margin:18px 0 8px;font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:#8cb3b5}
.learn h3:first-child{margin-top:0}
.say{border-left:3px solid #6bcebf;background:#122f36;border-radius:0 10px 10px 0;padding:12px 14px;color:#d9efec;line-height:1.65;font-style:italic}
ul.strategies{margin:8px 0 0;padding-left:0;list-style:none;display:grid;gap:8px}
ul.strategies li{background:#122f36;border:1px solid #2b4a50;border-radius:10px;padding:10px 14px;color:#c8e0dd;line-height:1.55;font-size:14px}

/* AI bits */
.aiwrap{margin-top:22px}
.ai-note{font-size:11.5px;color:#8eaaaf;margin-top:10px;line-height:1.6}
.ai-out{margin-top:16px}
.ai-card{background:#142f38;border:1px solid #3a7a74;border-radius:14px;padding:18px;animation:fadein .25s ease}
.ai-card .ai-tag{font-size:11px;letter-spacing:1.5px;color:#6bcebf;font-weight:700;margin-bottom:10px}
.ai-card h3{margin:14px 0 6px;font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:#8cb3b5}
.ai-card h3:first-of-type{margin-top:4px}
.ai-card p{margin:0 0 6px;color:#c8e0dd;font-size:15px}
.ai-card .ai-plain{white-space:pre-wrap;color:#c8e0dd;line-height:1.65;font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{background:#1b4c50;border:1px solid #6bcebf;color:#d9efec;border-radius:999px;padding:7px 13px;font-size:13px}
.ai-loading{color:#8cb3b5;font-size:14px;padding:14px;background:#142f38;border:1px solid #2b4a50;border-radius:14px;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.55}}
@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1}}

/* safety panel — calm, not alarming */
.safety{background:#211f16;border:1px solid #b08d57;border-radius:14px;padding:18px;margin-top:16px;animation:fadein .3s ease}
.safety h3{margin:0 0 8px;color:#e8c98f;font-size:15px;letter-spacing:-.2px}
.safety p{margin:0 0 10px;color:#cfc4a8;font-size:14px;line-height:1.65}
.safety ul{margin:0;padding-left:18px;color:#cfc4a8;font-size:14px;line-height:1.8}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#1b4c50;border:1px solid #6bcebf;color:#eaf5f3;padding:11px 18px;border-radius:12px;font-size:14px;box-shadow:0 8px 30px #0008;opacity:0;pointer-events:none;transition:opacity .25s;max-width:90vw;text-align:center}
.toast.show{opacity:1}

.footer{margin-top:26px;padding-top:16px;border-top:1px solid #1e3d43;font-size:11.5px;color:#739498;line-height:1.7;text-align:center}