:root{
  --bg:#0e1418; --panel:#151d23; --panel2:#1b252c; --line:#26333c;
  --ink:#e8eef2; --dim:#9cadb8; --sky:#74b9e7; --sky-d:#4a93c9;
  --sun:#f2c14e; --good:#7fc99a; --warn:#e88f6a; --bad:#e0756b;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;font-size:19px}
body{margin:0;background:var(--bg);color:var(--ink);
  font:1rem/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:1000px;margin:0 auto;padding:0 24px 130px}
.hidden{display:none !important}
a{color:var(--sky)}
button{font-family:inherit}

.flagbar{display:flex;height:6px;width:126px;border-radius:3px;overflow:hidden;margin-bottom:24px}
.flagbar i{flex:1}
.flagbar i:nth-child(1),.flagbar i:nth-child(3){background:var(--sky)}
.flagbar i:nth-child(2){background:#dfe9ee}

/* gate */
.gate{max-width:520px;margin:0 auto;padding:15vh 26px 0}
.gate h1{font-size:3rem;margin:0 0 12px;letter-spacing:-.025em}
.gate p{color:var(--dim);margin:0 0 30px;font-size:1.1rem}
.gate .fine{font-size:.85rem;margin-top:26px;opacity:.85}

.btn{display:inline-block;background:var(--sky);color:#08131c;border:none;border-radius:10px;
  padding:14px 26px;font-size:1rem;font-weight:650;cursor:pointer;text-decoration:none}
.btn:hover{background:#8fc7ef}
.btn:disabled{opacity:.5;cursor:default}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn.big{font-size:1.1rem;padding:16px 34px;width:100%}

header{padding:58px 0 28px;border-bottom:1px solid var(--line)}
.hrow{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
h1{font-size:clamp(2rem,5vw,2.9rem);line-height:1.05;margin:0 0 10px;letter-spacing:-.025em;font-weight:650}
.sub{color:var(--dim);margin:0;font-size:1.05rem}
.stats{display:flex;gap:26px}
.stat{text-align:right}
.stat b{display:block;font-size:1.7rem;color:var(--sky);line-height:1.15}
.stat span{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

nav{position:sticky;top:0;z-index:40;background:rgba(14,20,24,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);margin-bottom:38px}
nav .wrap{padding-bottom:0}
nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
nav ul::-webkit-scrollbar{display:none}
nav a{display:block;padding:16px 15px;color:var(--dim);text-decoration:none;font-size:.92rem;
  white-space:nowrap;border-bottom:2px solid transparent}
nav a:hover{color:var(--ink)}
nav a.on{color:var(--ink);border-bottom-color:var(--sky)}

section{padding:12px 0 44px}
h2{font-size:.76rem;letter-spacing:.17em;text-transform:uppercase;color:var(--sky);margin:0 0 10px;font-weight:650}
h3{font-size:1.65rem;margin:0 0 16px;letter-spacing:-.015em;font-weight:620}
h4{font-size:1.08rem;margin:0;font-weight:620}
.lead{font-size:1.05rem;color:var(--dim);max-width:700px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px 26px;margin:18px 0}

/* log-a-session card */
.logcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:24px 26px;margin:26px 0 22px}
.hint{font-size:.85rem;color:var(--dim);margin:14px 0 0;text-align:center}
.modepick{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:20px}
.modepick span{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin-right:6px}
.modepick button{background:var(--bg);border:1px solid var(--line);color:var(--dim);
  border-radius:100px;padding:8px 18px;font:600 .78rem/1 var(--mono);cursor:pointer;letter-spacing:.06em}
.modepick button:hover{border-color:var(--sky-d);color:var(--ink)}
.modepick button.on{background:var(--sky);border-color:var(--sky);color:#08131c}

/* session grid */
.grid90{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:7px}
.day{aspect-ratio:1;border:1px solid var(--line);background:var(--panel);border-radius:7px;
  display:flex;align-items:center;justify-content:center;font:600 .72rem/1 var(--mono);
  color:var(--dim);cursor:pointer;user-select:none;transition:.12s}
.day:hover{border-color:var(--sky-d)}
.day.on{background:var(--sky);border-color:var(--sky);color:#08131c}
.day.busy{opacity:.45;pointer-events:none}

/* modes */
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:13px}
.mode{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:20px}
.mode .name{font:650 .88rem/1 var(--mono);letter-spacing:.07em;margin-bottom:10px;color:var(--sky)}
.mode p{font-size:.92rem;color:var(--dim);margin:0}

/* stages */
.stage{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--line);
  border-radius:13px;padding:22px 24px;margin-top:15px}
.stage.now{border-left-color:var(--sky);background:var(--panel2)}
.stage .hd{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.stage .range{font:.78rem/1 var(--mono);color:var(--dim)}
.stage .body{color:var(--dim);font-size:1rem;margin:0 0 16px}
.mstone{display:flex;gap:13px;align-items:flex-start;width:100%;text-align:left;
  background:var(--bg);border:1px solid var(--line);border-radius:11px;
  padding:15px 17px;cursor:pointer;color:var(--dim);font-size:.95rem;line-height:1.5}
.mstone:hover{border-color:var(--sky-d)}
.mstone .box{flex:0 0 auto;width:20px;height:20px;border:2px solid var(--line);
  border-radius:5px;margin-top:2px}
.mstone.done{color:var(--good);border-color:rgba(127,201,154,.4)}
.mstone.done .box{background:var(--good);border-color:var(--good);position:relative}
.mstone.done .box::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid #08131c;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* drill */
.drillcard{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:40px 30px;margin-top:20px;text-align:center}
.drillcard .en{font-size:1.6rem;font-weight:620;margin-bottom:8px}
.drillcard .cat{font:.68rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--dim);margin-bottom:22px}
.drillcard .es{font-size:2rem;font-weight:650;color:var(--sky);letter-spacing:-.02em}
.drillcard .ph{font:.9rem/1.6 var(--mono);color:var(--sun);margin-top:8px}
.drillcard .prompt{color:var(--dim);font-size:.95rem;margin-top:22px}
.reveal{margin-top:24px}
.grades{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:10px;margin-top:26px}
.grades button{border:1px solid var(--line);background:var(--panel2);color:var(--ink);
  border-radius:11px;padding:15px 10px;font-size:.95rem;font-weight:600;cursor:pointer}
.grades button:hover{border-color:var(--sky-d)}
.grades button[data-g="0"]{color:var(--bad)}
.grades button[data-g="1"]{color:var(--warn)}
.grades button[data-g="2"]{color:var(--sky)}
.grades button[data-g="3"]{color:var(--good)}
.queuemeta{display:flex;justify-content:space-between;font-size:.85rem;color:var(--dim);
  margin-top:18px;flex-wrap:wrap;gap:10px}
.empty{background:var(--panel);border:1px dashed var(--line);border-radius:14px;
  padding:46px 26px;text-align:center;color:var(--dim);margin-top:20px;font-size:1.02rem}

/* log */
.frow{display:flex;gap:16px;flex-wrap:wrap}
.frow label{flex:1;min-width:130px}
label{display:block;font-size:.82rem;color:var(--dim);margin-bottom:16px}
input,select{width:100%;margin-top:6px;background:var(--bg);border:1px solid var(--line);
  color:var(--ink);border-radius:9px;padding:12px 14px;font-size:1rem;font-family:inherit}
input:focus,select:focus{outline:none;border-color:var(--sky-d)}
.logrow{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:17px 20px;margin-top:11px}
.logrow .top{display:flex;gap:13px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px}
.logrow .d{font:650 .85rem/1 var(--mono);color:var(--sky)}
.logrow .m{font:.7rem/1 var(--mono);letter-spacing:.1em;color:var(--sun)}
.logrow .line{font-size:.95rem;color:var(--dim);margin:4px 0}
.logrow .line b{color:var(--ink);font-weight:600}
.logrow .say{color:var(--sky);font-style:italic}
.logrow .del{background:none;border:none;color:var(--dim);cursor:pointer;font-size:.78rem;padding:0;margin-top:8px}
.logrow .del:hover{color:var(--bad)}

/* reference */
.promptbox{position:relative;background:#0a1015;border:1px solid var(--line);border-radius:14px;padding:22px}
.promptbox pre{margin:0;max-height:400px;overflow:auto;font:.83rem/1.7 var(--mono);
  color:#c8d6e0;white-space:pre-wrap}
.copybtn{position:absolute;top:16px;right:16px;background:var(--sky);color:#08131c;border:none;
  border-radius:8px;padding:9px 18px;font-size:.85rem;font-weight:650;cursor:pointer}
.copybtn.done{background:var(--good)}
.sound{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.srow{display:grid;grid-template-columns:165px 1fr;gap:22px;padding:19px 22px;border-bottom:1px solid var(--line)}
.srow:last-child{border-bottom:none}
.srow .k{font:650 .95rem/1.5 var(--mono);color:var(--sun)}
.srow .v{font-size:1rem;color:var(--dim)}
.srow .v em{color:var(--ink);font-style:normal;font-weight:600}
.sayit{display:block;color:var(--sky);font-family:var(--mono);font-size:.85rem;margin:9px 0}
.res{display:grid;gap:11px}
.rlink{display:block;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:18px 22px;text-decoration:none;color:inherit}
.rlink:hover{border-color:var(--sky-d)}
.rlink .n{font-weight:620;font-size:1.05rem;margin-bottom:4px}
.rlink .n span{color:var(--sky);font-size:.72rem;font-family:var(--mono);margin-left:10px;
  text-transform:uppercase;letter-spacing:.08em}
.rlink .d{color:var(--dim);font-size:.92rem}
.signout{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;gap:24px;font-size:.9rem}
.signout a{color:var(--dim)}
.signout a:hover{color:var(--bad)}

/* toast */
.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,80px);
  background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  padding:14px 26px;border-radius:100px;font-size:.95rem;opacity:0;
  transition:.25s;pointer-events:none;z-index:80;max-width:90vw}
.toast.show{transform:translate(-50%,0);opacity:1}
.toast.bad{border-color:var(--bad);color:var(--bad)}

@media(max-width:700px){
  html{font-size:18px}
  .srow{grid-template-columns:1fr;gap:7px}
  .hrow{align-items:flex-start}
  .stats{gap:20px}
  .drillcard{padding:32px 20px}
  .drillcard .es{font-size:1.65rem}
  .grid90{grid-template-columns:repeat(auto-fill,minmax(36px,1fr))}
}


/* ===== curriculum UI ===== */
.now{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:30px 30px 26px}
.kicker{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.klabel{font:650 .68rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:#08131c;background:var(--sky);padding:6px 11px;border-radius:5px}
.kunit{font-size:.86rem;color:var(--dim)}
.nowtitle{font-size:1.9rem;line-height:1.15;margin:0 0 14px;letter-spacing:-.02em;font-weight:640;
  color:var(--ink);text-transform:none}
.modetag{display:flex;align-items:center;gap:11px;margin-bottom:26px}
.mt{font:650 .72rem/1 var(--mono);letter-spacing:.1em;padding:6px 11px;border-radius:5px;
  border:1px solid var(--line);color:var(--dim)}
.mt.NUEVO{color:var(--sky);border-color:rgba(116,185,231,.45)}
.mt.CHARLA{color:var(--sun);border-color:rgba(242,193,78,.45)}
.mt.REPASO{color:var(--good);border-color:rgba(127,201,154,.45)}
.mt.ESCUCHA{color:var(--warn);border-color:rgba(232,143,106,.45)}
.mth{font-size:.9rem;color:var(--dim)}

.plabel{font:650 .68rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--dim);margin-bottom:12px}
.plist{background:var(--bg);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:28px}
.plist .prow{display:grid;grid-template-columns:1fr .85fr .85fr;gap:14px;padding:12px 18px;
  border-bottom:1px solid var(--line);align-items:baseline;font-size:.98rem}
.plist .prow:last-child{border-bottom:none}
.plist .es{font-weight:640}
.plist .ph{font:.78rem/1.5 var(--mono);color:var(--sun)}
.plist .en{color:var(--dim);font-size:.9rem}

.steps{list-style:none;counter-reset:s;margin:0;padding:0}
.steps li{counter-increment:s;display:flex;align-items:center;gap:15px;flex-wrap:wrap;
  padding:15px 0;border-top:1px solid var(--line)}
.steps li::before{content:counter(s);flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  background:var(--panel2);border:1px solid var(--line);color:var(--dim);
  display:flex;align-items:center;justify-content:center;font:650 .78rem/1 var(--mono)}
.stxt{flex:1;min-width:190px;font-size:1rem}
.btn.small{padding:10px 20px;font-size:.9rem;border-radius:8px}
.btn.small.done{background:var(--good)}

.nudge{display:block;width:100%;margin-top:16px;background:var(--panel2);
  border:1px solid var(--line);color:var(--sky);border-radius:12px;padding:16px;
  font-size:.98rem;cursor:pointer;font-weight:600}
.nudge:hover{border-color:var(--sky-d)}

.unit{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:20px 22px;margin-top:13px}
.unit.complete{border-color:rgba(127,201,154,.35)}
.uhead{display:flex;gap:16px;align-items:flex-start}
.unum{flex:0 0 auto;width:32px;height:32px;border-radius:9px;background:var(--panel2);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  font:650 .85rem/1 var(--mono);color:var(--dim)}
.uhead h4{margin:0 0 4px;font-size:1.08rem}
.uhead p{margin:0;color:var(--dim);font-size:.9rem}
.ucount{margin-left:auto;font:650 .8rem/1 var(--mono);color:var(--dim);white-space:nowrap;padding-top:9px}
.ulessons{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;padding-left:48px}
.lchip{width:42px;height:42px;border-radius:9px;background:var(--bg);border:1px solid var(--line);
  color:var(--dim);font:650 .82rem/1 var(--mono);cursor:pointer}
.lchip:hover{border-color:var(--sky-d);color:var(--ink)}
.lchip.on{background:var(--sky);border-color:var(--sky);color:#08131c}
.lchip.next{box-shadow:0 0 0 2px var(--sun)}

@media(max-width:700px){
  .now{padding:24px 20px}
  .nowtitle{font-size:1.5rem}
  .plist .prow{grid-template-columns:1fr;gap:3px;padding:13px 16px}
  .ulessons{padding-left:0}
}

/* ===== audio ===== */
.noscroll{overflow:hidden}

.play{flex:0 0 auto;width:30px;height:30px;border-radius:50%;cursor:pointer;
  background:var(--panel2);border:1px solid var(--line);position:relative;padding:0}
.play::after{content:"";position:absolute;left:11px;top:8px;
  border-left:9px solid var(--sky);border-top:6px solid transparent;border-bottom:6px solid transparent}
.play:hover{border-color:var(--sky-d);background:var(--bg)}
.play.ping{background:var(--sky);border-color:var(--sky)}
.play.ping::after{border-left-color:#08131c}

.plist .prow{grid-template-columns:1.15fr .8fr .8fr}
.pes{display:flex;align-items:center;gap:11px;min-width:0}
.pes .es{font-weight:640}

.steps li small{display:block;color:var(--dim);font-size:.82rem;margin-top:3px;line-height:1.45}
.nowfoot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.linky{background:none;border:none;color:var(--dim);font-size:.85rem;cursor:pointer;
  text-decoration:underline;padding:0}
.linky:hover{color:var(--sky)}
.nowfoot .warn{font-size:.8rem;color:var(--warn)}

/* shadow overlay */
.shadow{position:fixed;inset:0;z-index:100;background:rgba(10,16,21,.97);
  display:flex;align-items:center;justify-content:center;padding:26px}
.sinner{text-align:center;max-width:620px;width:100%}
.scount{font:.72rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);margin-bottom:28px}
.sphrase{font-size:clamp(2rem,7vw,3.1rem);font-weight:650;color:var(--sky);
  letter-spacing:-.02em;line-height:1.15;margin-bottom:14px}
.sphon{font:1rem/1.5 var(--mono);color:var(--sun);margin-bottom:10px}
.seng{font-size:1.05rem;color:var(--dim);margin-bottom:34px}
.scue{font:.72rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--dim);margin-bottom:34px;opacity:.75}

/* drill tools */
.esline{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.tools{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.tool{background:var(--panel2);border:1px solid var(--line);color:var(--dim);
  border-radius:100px;padding:9px 18px;font-size:.85rem;font-weight:600;cursor:pointer}
.tool:hover{border-color:var(--sky-d);color:var(--ink)}
.tool.primary{color:var(--sky);border-color:rgba(116,185,231,.45)}
.tool.rec{color:var(--bad);border-color:var(--bad)}
.compare{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;
  width:100%;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.scue{transition:color .2s}
.scue.yours{color:var(--sun);opacity:1}

/* ===== phone / home-screen app ===== */
body{
  padding-top:env(safe-area-inset-top);
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
nav{top:env(safe-area-inset-top)}
.shadow{padding-top:calc(26px + env(safe-area-inset-top));
        padding-bottom:calc(26px + env(safe-area-inset-bottom))}
@media(max-width:700px){
  header{padding-top:34px}
  .wrap{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
  .steps li{align-items:flex-start}
  .steps li .btn.small{width:100%;text-align:center;margin-top:6px}
  .stats{width:100%;justify-content:space-between;gap:12px}
  .stat{text-align:left}
}

.sbanner{font-size:.92rem;color:var(--dim);background:var(--panel);
  border:1px solid var(--line);border-radius:100px;padding:11px 22px;
  display:inline-block;margin-bottom:30px;transition:opacity .8s}
.sbanner.fade{opacity:0}
.quit{margin-top:8px;display:inline-block}
.scue{min-height:1.2em}

/* ===== drill direction ===== */
.dirbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.dirbtn{background:var(--panel);border:1px solid var(--line);color:var(--dim);
  border-radius:100px;padding:8px 16px;font-size:.82rem;font-weight:600;cursor:pointer}
.dirbtn:hover{border-color:var(--sky-d);color:var(--ink)}
.dirbtn.on{background:var(--sky);border-color:var(--sky);color:#08131c}
.hearblock{display:flex;flex-direction:column;align-items:center;gap:16px;margin:10px 0 8px}
.bigplay{width:88px;height:88px;border-radius:50%;background:var(--panel2);
  border:1px solid var(--line);cursor:pointer;position:relative}
.bigplay::after{content:"";position:absolute;left:35px;top:26px;
  border-left:26px solid var(--sky);border-top:18px solid transparent;border-bottom:18px solid transparent}
.bigplay:hover{border-color:var(--sky-d);background:var(--bg)}
.hearhint{color:var(--dim);font-size:1rem}

/* ===== checkpoints ===== */
.ucheck:empty{display:none}
.chk{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:16px 0 0 48px;
  padding:15px 18px;background:var(--bg);border:1px solid var(--line);border-radius:12px}
.chk.passed{border-color:rgba(127,201,154,.4)}
.chk.passed .chktxt div:first-child{color:var(--good)}
.chktxt{flex:1;min-width:200px;font-size:.95rem}
.chktxt small{display:block;color:var(--dim);font-size:.8rem;margin-top:3px;line-height:1.45}

/* ===== phrasebook ===== */
.bookbar{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:18px 0 22px}
#booksearch{flex:1;min-width:220px;margin-top:0}
.onlylearned{display:flex;align-items:center;gap:9px;margin:0;font-size:.88rem;white-space:nowrap}
.onlylearned input{width:auto;margin:0}
.bgroup{font:650 .68rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--sky);margin:26px 0 10px}
.plist.book{margin-bottom:0}
.plist.book .prow.locked{opacity:.38}
.plist.book .prow.locked .play{visibility:hidden}
.bcount{margin-top:24px;font-size:.85rem;color:var(--dim);text-align:center}