:root{
  --bg:#05070a; --bg2:#0a0e14; --card:#0e141d; --card2:#121a26;
  --ink:#eaf2f8; --muted:#8294a8; --line:#1d2a3a;
  --green:#7ef7c6; --greenink:#05251b; --cyan:#6ad9ff; --blue:#9db4ff;
  --pink:#ff8fb1; --amber:#ffb86b; --lime:#c3f584; --red:#ff6b7a; --gold:#ffd36b;
  --glow:0 0 24px rgba(126,247,198,.22);
  --mono:'JetBrains Mono',ui-monospace,monospace; --sans:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --maxw:560px;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:
  radial-gradient(900px 500px at 80% -10%,rgba(106,217,255,.07),transparent 60%),
  radial-gradient(700px 500px at 0% 0%,rgba(126,247,198,.06),transparent 55%),
  var(--bg);
  color:var(--ink);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;line-height:1.15;letter-spacing:-.02em}
p{margin:.4em 0}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}
button{font-family:inherit}

.app{max-width:var(--maxw);margin:0 auto;min-height:100%;position:relative;
  padding-top:calc(var(--safe-t));padding-bottom:calc(84px + var(--safe-b))}
.app.no-nav{padding-bottom:var(--safe-b)}

.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;
  padding:calc(var(--safe-t) + 10px) 16px 10px;background:linear-gradient(180deg,var(--bg) 70%,rgba(5,7,10,.6));
  backdrop-filter:blur(10px)}
.topbar .brand{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-weight:800;font-size:1rem}
.brand .mk{color:var(--green);text-shadow:var(--glow)}
.brand b{color:var(--green)}
.stat-pills{margin-left:auto;display:flex;gap:10px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-weight:700;font-size:.9rem;
  padding:5px 10px;border-radius:30px;background:var(--card);border:1px solid var(--line)}
.pill.streak{color:var(--amber)} .pill.xp{color:var(--green)} .pill.hearts{color:var(--pink)}

.wrap{padding:8px 16px 20px}

.botnav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:var(--maxw);z-index:40;
  display:flex;justify-content:space-around;align-items:center;gap:2px;
  padding:8px 8px calc(8px + var(--safe-b));background:rgba(10,14,20,.92);backdrop-filter:blur(14px);
  border-top:1px solid var(--line)}
.botnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:14px;
  color:var(--muted);font-size:.68rem;font-weight:600}
.botnav a .ic{font-size:1.35rem;line-height:1}
.botnav a.on{color:var(--green)}
.botnav a.on .ic{filter:drop-shadow(0 0 8px rgba(126,247,198,.6))}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  font-weight:800;font-size:1rem;padding:15px 18px;border-radius:16px;border:0;cursor:pointer;
  letter-spacing:.01em;transition:transform .05s, filter .15s;text-transform:none}
.btn:active{transform:translateY(2px)}
.btn-primary{background:var(--green);color:var(--greenink);box-shadow:0 5px 0 #4bbf95}
.btn-primary:active{box-shadow:0 2px 0 #4bbf95}
.btn-cyan{background:var(--cyan);color:#042430;box-shadow:0 5px 0 #389fc2}
.btn-ghost{background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:0 4px 0 #0a0e14}
.btn-ghost:active{box-shadow:0 1px 0 #0a0e14}
.btn-danger{background:var(--red);color:#2a0810;box-shadow:0 5px 0 #c24e5a}
.btn-sm{width:auto;padding:10px 16px;font-size:.9rem;border-radius:12px}
.btn[disabled]{opacity:.5;filter:grayscale(.3)}

.inline-link{color:var(--green);font-weight:700}

.card{background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--line);
  border-radius:20px;padding:18px}
.card + .card{margin-top:12px}
.section-title{font-family:var(--mono);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:22px 4px 10px}

.hero{padding:40px 20px 10px;text-align:center}
.hero .logo{font-family:var(--mono);font-weight:800;font-size:1.1rem}
.hero h1{font-size:2.2rem;margin:18px 0 10px}
.hero h1 .g{background:linear-gradient(120deg,var(--green),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted);font-size:1.05rem;max-width:30ch;margin:0 auto 22px}
.hero .mascot{font-size:4.5rem;margin:6px 0 2px}
.hero-cta{display:flex;flex-direction:column;gap:10px;padding:0 24px;margin-top:8px}
.feat{display:flex;gap:13px;align-items:flex-start;text-align:left;padding:14px 4px}
.feat .fi{font-size:1.7rem;flex:none;width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.feat h3{font-size:1.02rem}
.feat p{margin:2px 0 0;font-size:.9rem}
.install-tip{margin:18px 16px;padding:14px 16px;border:1px dashed var(--line);border-radius:16px;font-size:.88rem;color:var(--muted)}
.install-tip b{color:var(--ink)}

.goal-card{display:flex;align-items:center;gap:16px}
.ring{--p:0;width:64px;height:64px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--green) calc(var(--p)*1%), #15202e 0);}
.ring i{width:52px;height:52px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-size:1.3rem;font-style:normal}
.branch{display:flex;align-items:center;gap:14px;padding:16px;border-radius:20px;border:1px solid var(--line);
  background:linear-gradient(180deg,var(--card),var(--bg2));margin-bottom:12px;position:relative;overflow:hidden}
.branch .em{font-size:2rem;width:58px;height:58px;flex:none;display:grid;place-items:center;border-radius:16px;background:#0b111a;border:1px solid var(--line)}
.branch h3{font-size:1.1rem}
.branch p{margin:3px 0 0;font-size:.85rem;color:var(--muted)}
.branch .prog{margin-top:8px;height:8px;border-radius:20px;background:#0a121b;overflow:hidden}
.branch .prog i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--cyan))}
.branch.soon{opacity:.6}
.soon-tag{position:absolute;top:10px;right:12px;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--amber);border:1px solid #3a2e18;background:#1a1408;padding:3px 8px;border-radius:20px}

.branch-head{text-align:center;padding:18px 16px 6px}
.branch-head .big{font-size:3rem}
.path{position:relative;padding:20px 0 10px;display:flex;flex-direction:column;align-items:center;gap:4px}
.node{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;margin:6px 0}
.node .bubble{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;font-size:1.7rem;
  background:linear-gradient(180deg,#16212f,#0d141d);border:2px solid var(--line);box-shadow:0 6px 0 #0a0e14;cursor:pointer}
.node.done .bubble{background:linear-gradient(180deg,var(--green),#53d3a6);border-color:#53d3a6;color:var(--greenink);box-shadow:0 6px 0 #3a9d7a}
.node.current .bubble{border-color:var(--green);box-shadow:0 6px 0 #3a9d7a, var(--glow)}
.node.locked .bubble{opacity:.4;cursor:not-allowed}
.node .lbl{font-size:.8rem;color:var(--muted);max-width:150px;text-align:center}
.node.done .lbl,.node.current .lbl{color:var(--ink)}
.node:nth-child(odd){transform:translateX(-46px)}
.node:nth-child(even){transform:translateX(46px)}
.unit-banner{margin:10px 16px;padding:12px 16px;border-radius:16px;background:var(--card);border:1px solid var(--line);
  font-family:var(--mono);font-size:.82rem;color:var(--green);text-align:center}

.lesson{min-height:100dvh;display:flex;flex-direction:column;max-width:var(--maxw);margin:0 auto;
  padding:calc(var(--safe-t) + 10px) 16px calc(16px + var(--safe-b))}
.lesson-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.lesson-top .x{font-size:1.5rem;color:var(--muted);background:none;border:0;cursor:pointer;flex:none}
.pbar{flex:1;height:14px;border-radius:20px;background:#15202e;overflow:hidden}
.pbar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--cyan));transition:width .3s;border-radius:20px}
.lesson-top .hp{color:var(--pink);font-weight:800;font-family:var(--mono);display:flex;align-items:center;gap:3px;flex:none}
.ex-q{font-size:1.3rem;font-weight:700;margin:12px 4px 20px}
.opts{display:flex;flex-direction:column;gap:12px}
.opt{display:flex;align-items:center;gap:12px;padding:16px;border-radius:16px;border:2px solid var(--line);
  background:var(--card);cursor:pointer;font-size:1.02rem;font-weight:600;box-shadow:0 4px 0 #0a0e14;transition:transform .05s}
.opt:active{transform:translateY(2px);box-shadow:0 2px 0 #0a0e14}
.opt.sel{border-color:var(--cyan);background:rgba(106,217,255,.08)}
.opt.ok{border-color:var(--green);background:rgba(126,247,198,.12)}
.opt.bad{border-color:var(--red);background:rgba(255,107,122,.12)}
.opt .k{font-family:var(--mono);font-size:.8rem;color:var(--muted);border:1px solid var(--line);border-radius:8px;width:26px;height:26px;display:grid;place-items:center;flex:none}
.tf-row{display:flex;gap:12px}
.tf-row .opt{flex:1;justify-content:center}
.order-list{display:flex;flex-direction:column;gap:10px}
.order-item{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:14px;border:2px solid var(--line);background:var(--card);cursor:grab;box-shadow:0 4px 0 #0a0e14}
.order-item .grip{color:var(--muted);font-family:var(--mono)}
.order-item.drag{opacity:.4}
.ex-input{width:100%;background:#05080c;border:2px solid var(--line);color:var(--ink);font-family:var(--mono);
  font-size:1.05rem;padding:14px 16px;border-radius:14px}
.ex-input:focus{outline:none;border-color:var(--cyan)}
.lesson-foot{margin-top:auto;padding-top:16px}
.feedback{border-radius:16px;padding:14px 16px;margin-bottom:12px;font-weight:700;display:none}
.feedback.show{display:block}
.feedback.ok{background:rgba(126,247,198,.12);color:var(--green)}
.feedback.bad{background:rgba(255,107,122,.12);color:var(--red)}

.case-card{display:flex;gap:14px;align-items:flex-start}
.case-card .em{font-size:2.2rem;width:58px;height:58px;flex:none;display:grid;place-items:center;border-radius:16px;background:#0b111a;border:1px solid var(--line)}
.case-card h3{font-size:1.1rem}
.case-card p{margin:3px 0 0;font-size:.86rem;color:var(--muted)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chip{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  border:1px solid var(--line);border-radius:8px;padding:2px 7px}
.chip.real{color:var(--amber);border-color:#3a2e18}
.chip.done{color:var(--green);border-color:#1d3a30}
.dots{display:flex;gap:3px}
.dots i{width:7px;height:7px;border-radius:2px;background:var(--line)}
.dots i.on{background:var(--amber)}

.case-hero{padding:16px}
.case-hero .em{font-size:3rem}
.case-hero h1{font-size:1.6rem;margin:8px 0}
.brief{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--green);border-radius:14px;padding:14px 16px;color:#cdd9e6;font-size:.95rem;margin:12px 0}
.mode-switch{display:flex;gap:6px;background:#05080c;border:1px solid var(--line);border-radius:14px;padding:4px;margin-top:6px}
.mode-switch a{flex:1;text-align:center;font-family:var(--mono);font-size:.82rem;padding:9px;border-radius:10px;color:var(--muted)}
.mode-switch a.on{background:rgba(126,247,198,.12);color:var(--green)}
.flagbox{border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:10px;background:var(--card)}
.flagbox.ok{border-color:var(--green);background:rgba(126,247,198,.06)}
.flagbox .lab{font-weight:700;font-size:.92rem;display:flex;justify-content:space-between;gap:8px}
.flagbox .lab .ok-tag{color:var(--green);font-family:var(--mono);font-size:.72rem;opacity:0}
.flagbox.ok .lab .ok-tag{opacity:1}
.flagrow{display:flex;gap:8px;margin-top:9px}
.flagrow input{flex:1;background:#05080c;border:1px solid var(--line);color:var(--ink);font-family:var(--mono);padding:11px 12px;border-radius:12px;min-width:0}
.flagrow input:focus{outline:none;border-color:var(--green)}
.task{border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:10px;background:var(--card)}
.task.ok{border-color:var(--green)}
.task .n{font-family:var(--mono);font-weight:800;color:var(--green)}
.task .teach{font-size:.92rem;color:#cdd9e6;margin:8px 0}
.task input{width:100%;background:#05080c;border:1px solid var(--line);color:var(--ink);font-family:var(--mono);padding:11px 12px;border-radius:12px;margin-top:4px}

.device{background:#070b11;border:1px solid var(--line);border-radius:22px;overflow:hidden}
.bank-top{background:linear-gradient(120deg,#123,#0b2436);padding:16px;color:#dff}
.bank-top .nm{font-weight:800;letter-spacing:.02em}
.bank-bal{font-size:2rem;font-weight:800;margin-top:8px;font-family:var(--mono)}
.bank-body{padding:14px}
.bank-field{margin:10px 0}
.bank-field label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:5px;font-family:var(--mono)}
.bank-field input{width:100%;background:#0a0f16;border:1px solid var(--line);color:var(--ink);padding:12px;border-radius:12px;font-family:var(--mono)}
.acct-row{display:flex;justify-content:space-between;padding:12px 14px;border:1px solid var(--line);border-radius:12px;margin:8px 0;font-family:var(--mono);font-size:.9rem}
.acct-row.vault{border-color:#3a2e18;color:var(--amber)}
.inspector{margin-top:12px;border:1px dashed var(--line);border-radius:12px;overflow:hidden}
.inspector summary{padding:10px 12px;cursor:pointer;font-family:var(--mono);font-size:.82rem;color:var(--cyan)}
.inspector .body{padding:0 12px 12px}
.inspector .req{background:#05080c;border-radius:10px;padding:10px;font-family:var(--mono);font-size:.82rem;color:#bcd;white-space:pre-wrap}
.inspector .req b{color:var(--amber)}
.tabs{display:flex;gap:6px;margin:10px 0}
.tabs button{flex:1;font-family:var(--mono);font-size:.8rem;padding:9px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--muted);cursor:pointer}
.tabs button.on{border-color:var(--cyan);color:var(--cyan)}
.result{font-family:var(--mono);font-size:.85rem;padding:10px 12px;border-radius:10px;margin-top:10px;white-space:pre-wrap}
.result.good{background:rgba(126,247,198,.1);color:var(--green)}
.result.bad{background:rgba(255,107,122,.1);color:var(--red)}

.email{border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:8px;background:var(--card)}
.email .from{font-family:var(--mono);font-size:.78rem;color:var(--cyan)}
.email .subj{font-weight:700;margin:3px 0}
.email .body{display:none;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);font-size:.9rem;color:#cdd9e6}
.email.open .body{display:block}
.email .sim{color:var(--pink);text-decoration:underline}
.email .att{font-family:var(--mono);font-size:.78rem;color:var(--amber);margin-top:6px}
.verdict{display:flex;gap:8px;margin-top:10px}
.verdict button{flex:1;font-family:var(--mono);font-size:.8rem;padding:8px;border-radius:10px;border:1px solid var(--line);background:none;color:var(--muted);cursor:pointer}
.verdict button.g.sel{border-color:var(--green);color:var(--green)}
.verdict button.b.sel{border-color:var(--pink);color:var(--pink)}

.learned{margin-top:14px}
.learned h4{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin:14px 0 6px}
.learned.def h4{color:var(--cyan)}
.learned ul{margin:0;padding-left:18px;color:#cdd9e6;font-size:.9rem}
.learned li{margin:5px 0}

.rank{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.rank .pos{font-family:var(--mono);width:28px;color:var(--muted);font-weight:700}
.rank:nth-child(1) .pos{color:var(--gold)}.rank:nth-child(2) .pos{color:#cdd9e6}.rank:nth-child(3) .pos{color:var(--amber)}
.rank .xp{margin-left:auto;font-family:var(--mono);color:var(--green);font-weight:700}

.profile-head{display:flex;align-items:center;gap:16px}
.avatar{width:72px;height:72px;border-radius:22px;flex:none;box-shadow:inset 0 0 0 2px var(--line)}
.xp-bar{height:12px;border-radius:20px;background:#0a121b;overflow:hidden;margin-top:8px;border:1px solid var(--line)}
.xp-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--cyan))}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0}
.stat-box{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;text-align:center}
.stat-box .big{font-family:var(--mono);font-size:1.6rem;font-weight:800;color:var(--green)}
.stat-box.amber .big{color:var(--amber)}
.stat-box .lb{font-size:.78rem;color:var(--muted)}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.bdg{border:1px solid var(--line);border-radius:16px;padding:12px;text-align:center;background:var(--card)}
.bdg.locked{opacity:.3;filter:grayscale(1)}
.bdg .ic{font-size:1.8rem}.bdg .nm{font-size:.78rem;font-weight:700;margin-top:4px}
.avatar-pick{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.avatar-pick .av{width:46px;height:46px;border-radius:14px;cursor:pointer;border:2px solid transparent}
.avatar-pick .av.on{border-color:var(--green)}
.av{background:#1b2636 center/60% no-repeat;display:inline-block}
.av-zorro{background-color:#ff8f5e}.av-buho{background-color:#9db4ff}.av-gato{background-color:#c3f584}
.av-lobo{background-color:#8be9fd}.av-cuervo{background-color:#b58bff}.av-tejon{background-color:#ffd36b}

.field{margin-bottom:14px}
.field label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:6px;font-family:var(--mono)}
.field input{width:100%;background:#05080c;border:2px solid var(--line);color:var(--ink);padding:14px;border-radius:14px;font-size:16px;font-family:var(--mono)}
.field input:focus{outline:none;border-color:var(--green)}
.form-err{background:rgba(255,107,122,.1);border:1px solid rgba(255,107,122,.4);color:var(--red);padding:11px 13px;border-radius:12px;margin-bottom:14px;font-size:.9rem}
.form-ok{background:rgba(126,247,198,.1);border:1px solid rgba(126,247,198,.4);color:var(--green);padding:11px 13px;border-radius:12px;margin-bottom:14px;font-size:.9rem}
.tabs-auth{display:flex;gap:8px;margin-bottom:18px}
.tabs-auth button{flex:1;padding:12px;border-radius:12px;border:1px solid var(--line);background:none;color:var(--muted);font:inherit;cursor:pointer}
.tabs-auth button.on{border-color:var(--green);color:var(--green)}
.phrase{background:#05080c;border:1px dashed var(--green);border-radius:14px;padding:16px;font-family:var(--mono);font-size:1.1rem;color:var(--green);text-align:center;letter-spacing:.04em;margin:12px 0}

.toast{position:fixed;left:50%;bottom:calc(96px + var(--safe-b));transform:translateX(-50%) translateY(140%);z-index:70;
  background:var(--card2);border:1px solid var(--green);border-radius:14px;padding:12px 18px;box-shadow:var(--glow);
  transition:transform .35s;max-width:90vw;font-size:.92rem}
.toast.show{transform:translateX(-50%) translateY(0)}
.sheet{position:fixed;inset:0;z-index:80;display:none;align-items:flex-end;justify-content:center;background:rgba(3,5,8,.7);backdrop-filter:blur(4px)}
.sheet.show{display:flex}
.sheet-card{width:100%;max-width:var(--maxw);background:linear-gradient(180deg,var(--card2),var(--bg2));
  border-top-left-radius:26px;border-top-right-radius:26px;border:1px solid var(--line);
  padding:26px 22px calc(26px + var(--safe-b));text-align:center;animation:up .35s}
@keyframes up{from{transform:translateY(100%)}}
.sheet-card .big{font-family:var(--mono);font-size:2.4rem;color:var(--green);text-shadow:var(--glow)}
.reward-badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:14px 0}
.reward-badges .b{background:rgba(126,247,198,.08);border:1px solid var(--line);border-radius:14px;padding:10px;min-width:84px}
.reward-badges .b .ic{font-size:1.6rem}
.shake{animation:shk .4s}
@keyframes shk{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

@media(min-width:640px){
  body::before{content:"";position:fixed;inset:0;z-index:-1;
    background:radial-gradient(1200px 700px at 50% -10%,rgba(126,247,198,.05),transparent 60%)}
  .app{box-shadow:0 0 0 1px var(--line);min-height:100dvh;border-radius:0}
}