:root{
  --bg:#05060a; --ink:#eef1f8; --dim:#9aa3b8; --line:rgba(255,255,255,.10);
  --glass:rgba(18,22,38,.55); --glass2:rgba(28,33,55,.6);
  --gold:#ffd9a0; --cyan:#bfe3ff; --violet:#b9a8ff;
  --good:#7fe0a8; --hard:#ffd28a; --again:#ff9d9d; --easy:#8fd0ff;
  --r:20px;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease:cubic-bezier(.4,0,.2,1);
  --shadow:0 24px 60px -28px rgba(0,0,0,.8);
  --shadow-lift:0 32px 72px -26px rgba(0,0,0,.85);
  --hi:inset 0 1px 0 rgba(255,255,255,.07);
}
*{box-sizing:border-box} html,body{margin:0;height:100%} html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Spline Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:rgba(191,227,255,.25)}
:focus-visible{outline:2px solid rgba(191,227,255,.7);outline-offset:2px}
#starfield{position:fixed;inset:0;z-index:0;display:block}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.045;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#screen{position:relative;z-index:2;min-height:100vh}
button,input,select,textarea{font-family:inherit;color:inherit}
.glass{
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 42%),var(--glass);
  backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow),var(--hi);
}

/* ---- motion primitives ---- */
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes growx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes shimmer{to{background-position:-220% center}}
@keyframes breathe{0%,100%{transform:translateX(-50%) scale(1);opacity:.6}50%{transform:translateX(-50%) scale(1.12);opacity:1}}

/* ---- gate / login ---- */
.gate-wrap{min-height:100vh;display:grid;place-items:end center;padding:0 18px 9vh}
.gate{padding:28px 30px;max-width:440px;width:100%;text-align:center;transition:opacity .6s var(--ease),transform .6s var(--ease-out);animation:rise .75s var(--ease-out) backwards}
.gate.login{place-self:center;margin-top:0}
.gate-wrap:has(.login){place-items:center}
.gate.fade{opacity:0;transform:translateY(16px);pointer-events:none}
.gate.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.gate-q{font-family:'Fraunces',serif;font-size:1.9rem;font-style:italic;font-weight:500;letter-spacing:.2px}
.gate-sub{color:var(--dim);margin:.3rem 0 1.1rem;font-size:.92rem}
.gate-row{display:flex;gap:8px;margin-top:1rem}
.gate-input{flex:1;width:100%;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:12px;padding:.7rem .9rem;font-size:1rem;margin-top:.5rem;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.gate-input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(191,227,255,.15)}
.gate-btn{background:linear-gradient(180deg,var(--gold),#e9b877);color:#1a1407;border:none;border-radius:12px;padding:.7rem 1.2rem;font-weight:600;cursor:pointer;margin-top:.5rem;transition:transform .18s var(--ease-out),box-shadow .25s var(--ease)}
.gate-btn:hover{transform:translateY(-1px);box-shadow:0 12px 30px -12px rgba(255,217,160,.55)}
.gate-btn:active{transform:translateY(0) scale(.985)}
.gate-btn.wide{width:100%}
.gate-msg{min-height:1.2em;margin-top:.7rem;color:var(--again);font-style:italic;font-family:'Fraunces',serif;opacity:0;transition:opacity .3s}
.gate-msg.show{opacity:1}

/* ---- app shell ---- */
.app{max-width:920px;margin:0 auto;padding:14px 16px 80px}
.topbar{display:flex;align-items:center;gap:14px;padding:10px 14px;position:sticky;top:10px;z-index:5;margin-bottom:16px;animation:rise .6s var(--ease-out) backwards}
.brand{font-family:'Fraunces',serif;font-style:italic;font-weight:600;font-size:1.25rem;padding-right:4px}
.navlinks{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.navlink{background:transparent;border:1px solid transparent;border-radius:999px;padding:.4rem .8rem;color:var(--dim);cursor:pointer;text-transform:capitalize;font-size:.9rem;transition:color .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease)}
.navlink:hover{color:var(--ink)}
.navlink.on{color:var(--ink);background:rgba(255,255,255,.07);border-color:var(--line)}
.quickadd{background:rgba(255,217,160,.14);border:1px solid rgba(255,217,160,.3);color:var(--gold);border-radius:999px;padding:.4rem .85rem;cursor:pointer;font-weight:500;transition:transform .2s var(--ease-out),background .25s var(--ease)}
.quickadd:hover{transform:translateY(-1px);background:rgba(255,217,160,.2)}

.view{display:flex;flex-direction:column;gap:14px}
.view>*{animation:rise .6s var(--ease-out) backwards}
.view>*:nth-child(1){animation-delay:0s} .view>*:nth-child(2){animation-delay:.05s}
.view>*:nth-child(3){animation-delay:.1s} .view>*:nth-child(4){animation-delay:.15s}
.view>*:nth-child(5){animation-delay:.2s} .view>*:nth-child(6){animation-delay:.25s}
.view>*:nth-child(7){animation-delay:.3s} .view>*:nth-child(n+8){animation-delay:.35s}

.hero{position:relative;overflow:hidden;padding:34px;text-align:center;background:radial-gradient(120% 140% at 50% -20%,rgba(185,168,255,.16),transparent 60%),var(--glass)}
.hero::before{content:"";position:absolute;left:50%;top:-12%;width:140%;aspect-ratio:1/1;transform:translateX(-50%);background:radial-gradient(circle at 50% 40%,rgba(185,168,255,.2),rgba(143,208,255,.06) 40%,transparent 60%);animation:breathe 16s ease-in-out infinite;pointer-events:none}
.hero>*{position:relative}
.hero-num{font-family:'Fraunces',serif;font-size:4.6rem;line-height:1;font-weight:600;letter-spacing:-1px;background:linear-gradient(110deg,#fff 10%,var(--cyan) 40%,var(--violet) 60%,#fff 90%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:shimmer 9s linear infinite}
.hero-label{color:var(--dim);margin-top:.4rem;letter-spacing:.3px}
.banner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px}
.banner.calm{justify-content:center;color:var(--dim)}

.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stat{padding:16px;text-align:center}
.stat.click{cursor:pointer;transition:transform .3s var(--ease-out),box-shadow .3s var(--ease)} .stat.click:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift),var(--hi)}
.stat-n{font-family:'Spline Sans Mono',monospace;font-size:1.9rem} .stat-l{color:var(--dim);font-size:.8rem;margin-top:.2rem}
.stat.warn .stat-n{color:var(--hard)} .stat.bad .stat-n{color:var(--again)}
@media(max-width:620px){.stat-grid{grid-template-columns:repeat(2,1fr)}}

.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:620px){.row2{grid-template-columns:1fr}}
.pad{padding:18px}
.mini-h{font-family:'Fraunces',serif;font-style:italic;font-size:1.05rem;margin-bottom:.6rem}
.dim{color:var(--dim);font-size:.86rem}
.habit{display:flex;align-items:center;gap:14px} .big{font-size:1.15rem;font-weight:500}
.ring{position:relative;width:64px;height:64px} .ring svg{transform:rotate(-90deg)} .ring .rb{fill:none;stroke:rgba(255,255,255,.1);stroke-width:6} .ring .rf{fill:none;stroke:var(--gold);stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset 1s var(--ease-out)}
.ring span{position:absolute;inset:0;display:grid;place-items:center;font-family:'Spline Sans Mono';font-size:.8rem}
.xpbar{height:8px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden;margin:.3rem 0} .xpbar span{display:block;height:100%;background:linear-gradient(90deg,var(--violet),var(--cyan));transition:width .6s var(--ease-out);transform-origin:left;animation:growx 1.1s var(--ease-out) backwards}
.goalset{display:block;margin-top:.7rem;color:var(--dim);font-size:.82rem} .goalset input{width:64px;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:8px;padding:.2rem .4rem;margin-left:.3rem}
.constel{width:100%;height:auto;display:block} .constel line{stroke:rgba(191,227,255,.25);stroke-width:.2} .constel circle{fill:var(--gold);filter:drop-shadow(0 0 2px var(--gold))}
.reminders .btn{margin-top:.6rem}

/* ---- buttons ---- */
.btn{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:12px;padding:.6rem 1rem;color:var(--ink);cursor:pointer;font-size:.92rem;transition:background .25s var(--ease),transform .18s var(--ease-out),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.btn:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)} .btn:active{transform:translateY(0) scale(.985)}
.btn.primary{background:linear-gradient(180deg,var(--gold),#e9b877);color:#1a1407;border:none;font-weight:600}
.btn.primary:hover{box-shadow:0 12px 30px -12px rgba(255,217,160,.5)}
.btn.easy{background:rgba(143,208,255,.16);border-color:rgba(143,208,255,.4);color:var(--easy)}
.btn.bad{background:rgba(255,157,157,.14);border-color:rgba(255,157,157,.4);color:var(--again)}
.btn.ghost{background:transparent} .btn.wide{width:100%}

/* ---- dictionary ---- */
.dict-controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:.4rem}
.in{background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:10px;padding:.55rem .7rem;font-size:.92rem;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.in:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(191,227,255,.12)}
select.in{cursor:pointer}
.dict-list{display:flex;flex-direction:column;gap:10px}
.alpha{display:flex;flex-wrap:wrap;gap:4px;margin-top:.6rem}
.ab{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:8px;min-width:30px;padding:.3rem .4rem;color:var(--ink);cursor:pointer;font-size:.78rem;font-family:'Spline Sans Mono';transition:background .2s var(--ease),border-color .2s var(--ease),transform .15s var(--ease-out)}
.ab:hover{background:rgba(255,255,255,.12)}
.ab.on{background:linear-gradient(180deg,var(--cyan),var(--violet));color:#0c1020;border-color:transparent;font-weight:600}
.ab.off{opacity:.28;pointer-events:none}
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px;color:var(--dim);font-family:'Spline Sans Mono';font-size:.82rem}
.pager .btn:disabled{opacity:.4;cursor:default;transform:none}
.tag.click{cursor:pointer} .tag.click:hover{color:var(--cyan);border-color:var(--cyan)}
.card{display:flex;justify-content:space-between;gap:12px;padding:14px 16px;transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .3s var(--ease)}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift),var(--hi);border-color:rgba(255,255,255,.16)}
.card.susp{opacity:.55}
.term{font-family:'Fraunces',serif;font-size:1.2rem;font-weight:600;display:flex;align-items:center;gap:8px}
.meaning{color:var(--cyan);font-size:.95rem;margin-top:.1rem}
.ex{color:var(--dim);font-style:italic;font-size:.86rem;margin-top:.3rem;font-family:'Fraunces',serif}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:.5rem}
.tag{font-size:.7rem;background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:99px;padding:.12rem .5rem;color:var(--dim)}
.tag.soft{font-family:'Spline Sans Mono'} .tag.bad{color:var(--again);border-color:rgba(255,157,157,.4)}
.card-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.ic{background:transparent;border:1px solid var(--line);border-radius:8px;padding:.25rem .55rem;font-size:.74rem;color:var(--dim);cursor:pointer;transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)} .ic:hover{color:var(--ink);background:rgba(255,255,255,.06)} .ic.bad:hover{color:var(--again);border-color:rgba(255,157,157,.4)}

/* ---- modal ---- */
.modal-back{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);display:grid;place-items:center;padding:18px;animation:fade .3s var(--ease-out)}
.modal{padding:22px;max-width:480px;width:100%;max-height:90vh;overflow:auto;display:flex;flex-direction:column;gap:10px;animation:rise .45s var(--ease-out) backwards}
.fl{display:flex;flex-direction:column;gap:.3rem;font-size:.82rem;color:var(--dim)} .fl .in{color:var(--ink)}
textarea.in{resize:vertical;min-height:60px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:.4rem}

/* ---- quiz ---- */
.quiz{padding:26px;max-width:560px;width:100%;margin:0 auto;align-self:center}
.quiz.center{text-align:center}
.q-head{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:.8rem;margin-bottom:18px}
.q-track{text-transform:uppercase;letter-spacing:1px;background:rgba(255,255,255,.06);border-radius:99px;padding:.15rem .6rem}
.q-count{margin-left:auto;font-family:'Spline Sans Mono'} .q-combo{color:var(--gold)}
.q-prompt{font-family:'Fraunces',serif;font-size:2rem;font-weight:500;line-height:1.2;text-align:center}
.q-sub{text-align:center;color:var(--dim);margin:.4rem 0 1.2rem;font-size:.85rem}
.q-inrow{display:flex;gap:8px} .q-in{flex:1;font-size:1.05rem;text-align:center}
.q-tools{display:flex;gap:8px;justify-content:center;margin-top:.7rem}
.mc-grid{display:grid;gap:8px} .mc{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;padding:.8rem;cursor:pointer;text-align:left;transition:background .25s var(--ease),transform .25s var(--ease-out),border-color .25s var(--ease)} .mc:hover{background:rgba(255,255,255,.1);transform:translateY(-1px);border-color:rgba(191,227,255,.35)}
.q-reveal:empty{display:none} .q-reveal{margin-top:18px;text-align:center;animation:fade .45s var(--ease-out)}
.verdict{font-family:'Fraunces',serif;font-style:italic;font-size:1.2rem} .verdict.ok{color:var(--good)} .verdict.no{color:var(--again)}
.answer{font-size:1.15rem;margin:.4rem 0;font-weight:500}
.grade-row{display:flex;gap:8px;justify-content:center;margin-top:1.2rem;flex-wrap:wrap}
.summary{display:flex;justify-content:center;gap:26px;margin:1rem 0}
.sum-n{font-family:'Spline Sans Mono';font-size:1.8rem} .sum-l{color:var(--dim);font-size:.8rem}

/* ---- stats ---- */
.stat-wins{display:flex;gap:6px;justify-content:center}
.bars{display:flex;flex-direction:column;gap:8px;margin-top:.4rem}
.bar-row{display:flex;align-items:center;gap:10px} .bar-l{width:140px;font-size:.82rem;color:var(--dim)} .bar-n{font-family:'Spline Sans Mono';font-size:.82rem;width:30px;text-align:right}
.bar{flex:1;height:10px;background:rgba(255,255,255,.07);border-radius:99px;overflow:hidden} .bar-f{display:block;height:100%;border-radius:99px;transition:width .6s var(--ease-out);transform-origin:left;animation:growx .9s var(--ease-out) backwards}
.bar-f.easy{background:var(--easy)} .bar-f.good{background:var(--good)} .bar-f.hard{background:var(--hard)} .bar-f.again{background:var(--again)}

/* ---- toast ---- */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:40;background:var(--glass2);border:1px solid var(--line);border-radius:12px;padding:.7rem 1.1rem;backdrop-filter:blur(10px);opacity:0;transition:opacity .35s var(--ease),transform .35s var(--ease-out);pointer-events:none;font-size:.9rem;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---- data panel ---- */
.data-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:.6rem}

/* ---- practice (flip cards) ---- */
.practice{padding:30px;max-width:520px;width:100%;margin:0 auto;align-self:center;text-align:center;cursor:pointer}
.practice.center{cursor:default}
.p-count{color:var(--dim);font-family:'Spline Sans Mono';font-size:.78rem;margin-bottom:16px}
.p-inner{position:relative;min-height:120px;display:flex;align-items:center;justify-content:center}
.p-face{transition:opacity .4s var(--ease-out),transform .4s var(--ease-out);width:100%}
.p-back{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;opacity:0;transform:translateY(10px);pointer-events:none}
.p-inner.show-back .p-front{opacity:0;transform:translateY(-10px)}
.p-inner.show-back .p-back{opacity:1;transform:none}
.p-term{font-family:'Fraunces',serif;font-size:2.4rem;font-weight:600;line-height:1.1}
.p-hint{margin-top:.6rem;font-size:.8rem}
.p-meaning{font-family:'Fraunces',serif;font-size:1.6rem;color:var(--cyan)}
.p-controls{display:flex;gap:8px;justify-content:center;margin-top:18px}

/* ---- activity sparkline ---- */
.spark{display:flex;gap:6px;align-items:flex-end;height:96px;margin-top:.3rem}
.spark-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:5px}
.spark-bar{width:100%;background:linear-gradient(180deg,var(--cyan),var(--violet));border-radius:6px 6px 0 0;min-height:3px;transform-origin:bottom;animation:growy .8s var(--ease-out) backwards}
@keyframes growy{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.spark-d{font-size:.6rem;color:var(--dim);font-family:'Spline Sans Mono'}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.05s!important}
  .hero::before{animation:none}
}