/* NeevStep app — one stylesheet. Brand: /brand (Violet + Sunshine). hCDN ignores ?v=, so rename (app-2.css) + NS_CSS on every change. */
:root{
  --vio:#5B3DF5;--vio-d:#4527D6;--lil:#8C75FF;--vio-s:#EEEAFF;
  --sun:#FFC83D;--sun-ink:#3B2A00;--sun-d:#D9A21C;--sun-s:#FFF1C7;
  --mint:#14B879;--mint-ink:#0B6B45;--mint-s:#E3F9EF;
  --coral:#FF5A5F;--coral-ink:#B3262B;--coral-s:#FFE8E8;
  --sky-ink:#1D5FD6;--sky-s:#E4EDFF;
  --ink:#17153A;--muted:#5C5A7A;--bg:#F6F5FF;--card:#fff;--line:#E4E0FA;--line2:#D3CDF5;
  --r:18px;--sh:0 1px 2px rgba(23,21,58,.05),0 4px 16px rgba(23,21,58,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:16px/1.55 "Lexend",system-ui,sans-serif;min-height:100vh;min-height:100dvh}
a{color:var(--vio-d)}
h1,h2,h3{letter-spacing:-.02em;line-height:1.15}
h1{font-size:clamp(26px,4vw,36px);font-weight:800}
h2{font-size:21px;font-weight:700}
h3{font-size:17px;font-weight:700}
.muted{color:var(--muted)}.small{font-size:13.5px}
.sp{flex:1;min-width:0}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--vio-d)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:22px}
.narrow{width:100%;max-width:420px}
.center{min-height:100vh;display:grid;place-items:center;padding:20px}
.wrap{max-width:1180px;margin:0 auto;padding:26px 16px 60px}

/* logo */
.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:700;font-size:21px;letter-spacing:-.02em;color:var(--ink)}
.logo b{color:var(--vio)}
.logo.on{color:#fff}.logo.on b{color:var(--sun)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 15px/1 "Lexend",sans-serif;padding:13px 20px;border-radius:14px;border:0;background:var(--vio);color:#fff;text-decoration:none;cursor:pointer;min-height:48px;box-shadow:0 3px 0 var(--vio-d);transition:transform .1s,box-shadow .1s,background .15s;-webkit-tap-highlight-color:transparent;user-select:none}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--vio-d)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.sun{background:var(--sun);color:var(--sun-ink);box-shadow:0 3px 0 var(--sun-d)}
.btn.sun:active{box-shadow:0 1px 0 var(--sun-d)}
.btn.ghost{background:#fff;color:var(--ink);border:2px solid var(--line2);box-shadow:0 3px 0 var(--line2)}
.btn.sm{min-height:36px;padding:8px 13px;font-size:13.5px;border-radius:11px}
.btn.big{min-height:58px;font-size:18px;padding:16px 28px;border-radius:16px}
.btn.wide{width:100%}
.linkish{background:none;border:0;color:var(--vio-d);font:600 14px "Lexend",sans-serif;cursor:pointer;padding:4px 0}

/* forms */
label{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
.in{width:100%;font:16px "Lexend",sans-serif;padding:12px 14px;border:2px solid var(--line2);border-radius:12px;background:#fff;color:var(--ink)}
.in:focus{outline:none;border-color:var(--vio)}
textarea.in{resize:vertical}
.flash{padding:12px 16px;border-radius:12px;margin-bottom:16px;font-size:15px}
.flash.ok{background:var(--mint-s);color:var(--mint-ink)}.flash.err{background:var(--coral-s);color:var(--coral-ink)}
.err{color:var(--coral-ink);font-size:14.5px;margin-top:10px}

/* chips, bars */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px;white-space:nowrap}
.c-neev{background:var(--vio-s);color:var(--vio-d)}.c-step{background:var(--sun-s);color:#6B4A00}.c-check{background:var(--sky-s);color:var(--sky-ink)}
.c-done{background:var(--mint-s);color:var(--mint-ink)}.c-retry{background:var(--coral-s);color:var(--coral-ink)}
.bar{display:block;height:9px;background:var(--vio-s);border-radius:9px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--vio);border-radius:9px;transition:width .4s ease}
.subj-dot{display:inline-block;width:12px;height:12px;border-radius:4px;flex:none;margin-right:6px;vertical-align:-1px}
.pill{font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}.p-lo{background:var(--coral-s);color:var(--coral-ink)}

/* door (home / login / join) */
body.door,body.tab:not(.learn){background:var(--vio)}
.door-w{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.door-top{padding:20px 22px}
.door-in{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 16px 60px;gap:28px}
.door-in>h1{color:#fff;text-align:center;font-size:clamp(30px,5vw,52px);max-width:16ch;letter-spacing:-.035em}
.door-in>h1 em{font-style:normal;color:var(--sun)}
.door-pick{display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:16px;width:100%;justify-content:center}
.door-card{background:#fff;border-radius:24px;padding:26px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:6px;box-shadow:0 6px 0 var(--vio-d);transition:transform .1s}
.door-card:active{transform:translateY(4px);box-shadow:0 2px 0 var(--vio-d)}
.door-card b{font-size:22px;margin-top:8px}.door-card span{color:var(--muted);font-size:15px}
.door-card.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.35);box-shadow:none}
.door-card.ghost span{color:#E4DEFF}
.door-ic{height:48px;display:flex;align-items:center}
@media(max-width:620px){.door-pick{grid-template-columns:1fr}}

/* join */
.join h1{font-size:28px}
.code-in{display:block;width:100%;margin:18px 0 6px;font:700 52px/1 "Lexend",sans-serif;letter-spacing:.3em;text-align:center;padding:16px 0 16px .3em;border:3px solid var(--line2);border-radius:18px;color:var(--ink)}
.code-in:focus{outline:none;border-color:var(--vio)}
.code-in+.err+.btn,.code-in~.btn{margin-top:14px}
.wide-card{width:100%;max-width:980px}
.names{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:18px}
.names button{font:600 17px "Lexend",sans-serif;text-align:left;padding:16px;border-radius:16px;border:2px solid var(--line2);background:#fff;color:var(--ink);cursor:pointer;display:flex;gap:10px;align-items:center;min-height:64px}
.names button:active{border-color:var(--vio);background:var(--vio-s)}
.names button small{font-size:13px;color:var(--muted);min-width:24px}
.names button:disabled{opacity:.4;cursor:not-allowed}
.names button:disabled::after{content:"Joined";margin-left:auto;font-size:11px;font-weight:700;text-transform:uppercase;color:var(--muted)}

/* teacher top bar */
.top{background:var(--vio);color:#fff;position:sticky;top:0;z-index:20}
.top-in{max-width:1180px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.tabs{display:flex;gap:4px}
.tabs a{text-decoration:none;color:#E4DEFF;font-weight:500;font-size:14.5px;padding:8px 13px;border-radius:10px}
.tabs a:hover{background:var(--vio-d);color:#fff}.tabs a.on{background:#fff;color:var(--ink)}
.me{margin-left:auto;display:flex;align-items:center;gap:9px}
.av{width:34px;height:34px;border-radius:50%;background:var(--sun);color:var(--sun-ink);display:grid;place-items:center;font-weight:700}
.me-t{display:flex;flex-direction:column;line-height:1.2}.me-t b{font-size:14px}.me-t small{font-size:12px;color:#CFC6FF}
.out{font-size:13px;color:#E4DEFF;text-decoration:none;padding:6px 10px;border:1px solid #7C63F7;border-radius:9px}
@media(max-width:760px){.me-t{display:none}.tabs{order:3;width:100%;overflow-x:auto}.tabs a{white-space:nowrap}}

.hello{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.hello p{margin-top:6px}
.sec{font-size:18px;margin:24px 0 12px}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.pick{position:relative;display:block;cursor:pointer;text-decoration:none;color:var(--ink)}
.pick input{position:absolute;opacity:0}
.pick>span{display:flex;flex-direction:column;background:#fff;border:2px solid var(--line);border-radius:16px;padding:14px 16px}
.pick b{font-size:22px}.pick small{color:var(--muted);font-size:13px}
.pick input:checked+span,.pick.on>span{border-color:var(--vio);background:var(--vio-s);box-shadow:0 3px 0 var(--vio)}
.pick input:focus-visible+span{outline:3px solid var(--sun)}
.lesson-list,.list{display:flex;flex-direction:column;gap:8px}
.lrow{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid var(--line);border-radius:14px;padding:13px 16px;cursor:pointer;text-decoration:none;color:var(--ink)}
.lrow input{accent-color:var(--vio);width:20px;height:20px;flex:none}
.lrow b{display:block;font-size:15.5px}.lrow small{color:var(--muted);font-size:13px}
.lrow:has(input:checked){border-color:var(--vio);background:var(--vio-s)}
.lrow .go{font-weight:600;font-size:14px;color:var(--vio-d)}
.list-card{padding:6px}.list-card .lrow{border:0;cursor:default}
.start-go{position:sticky;bottom:0;padding:16px 0;background:linear-gradient(transparent,var(--bg) 30%);display:flex;justify-content:flex-end}
.live-strip{display:flex;align-items:center;gap:14px;background:var(--ink);color:#fff;border-radius:18px;padding:14px 18px;text-decoration:none;margin-bottom:12px}
.live-strip b{display:block}.live-strip small{color:#CFC6FF}
.dot-live{width:12px;height:12px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px rgba(255,90,95,.3);animation:pulse 1.4s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(255,90,95,0)}}
.empty{text-align:center;padding:40px 20px}.empty .btn{margin-top:14px}
.two{display:grid;grid-template-columns:1fr 1.4fr;gap:26px;align-items:start}
@media(max-width:860px){.two{grid-template-columns:1fr}}
.kid{display:flex;align-items:center;gap:12px;padding:9px 18px;border-bottom:1px solid var(--line)}
.kid:last-child{border-bottom:0}
.roll{width:30px;height:30px;border-radius:9px;background:var(--vio-s);color:var(--vio-d);display:grid;place-items:center;font-size:13px;font-weight:700;flex:none}
.x{background:none;border:0;color:var(--muted);font:500 13px "Lexend",sans-serif;cursor:pointer;padding:6px}
.x:hover{color:var(--coral-ink)}
.stats{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin-bottom:8px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.stat b{display:block;font-size:32px;font-weight:800;line-height:1.1}.stat span{font-size:13.5px;color:var(--muted)}
.tbl-w{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th{text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:12px 14px;border-bottom:1px solid var(--line);background:#FAF9FF}
.tbl td{padding:11px 14px;border-bottom:1px solid #EFECFC;vertical-align:middle}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl tr.dim td{color:var(--muted)}

/* ================= live panel (interactive board) ================= */
body.panel{background:#EFECFC;overflow:hidden}
.pn{height:100vh;height:100dvh;display:flex;flex-direction:column}
.pn-top{background:var(--vio);color:#fff;display:flex;align-items:center;gap:18px;padding:12px 20px;flex:none;flex-wrap:wrap}
.pn-what{flex:1;min-width:200px;line-height:1.25}
.pn-what b{display:block;font-size:19px}.pn-what small{color:#E4DEFF;font-size:14px}
.pn-code{background:#fff;color:var(--ink);border-radius:16px;padding:6px 18px 8px;text-align:center;line-height:1.1}
.pn-code small{display:block;font-size:12px;color:var(--muted)}
.pn-code span{font-size:40px;font-weight:800;letter-spacing:.14em;color:var(--vio)}
.pn-freeze{background:var(--sun);color:var(--sun-ink);box-shadow:0 3px 0 var(--sun-d);min-height:54px;font-size:16px}
.pn-freeze[data-on="1"]{background:var(--coral);color:#fff;box-shadow:0 3px 0 var(--coral-ink)}
.pn-end{min-height:54px;background:transparent;color:#fff;border-color:#7C63F7;box-shadow:none}
.pn-sum{display:flex;gap:8px;align-items:center;padding:10px 20px;background:#fff;border-bottom:1px solid var(--line);flex:none;flex-wrap:wrap}
.sum{font-size:14px;padding:6px 12px;border-radius:999px;background:var(--bg);color:var(--muted);font-weight:500}
.sum b{font-size:16px;color:var(--ink);margin-right:2px}
.sum.stuck{background:var(--coral-s)}.sum.hand{background:var(--sun-s)}.sum.away{background:#FFE4F0}.sum.done{background:var(--mint-s)}
.conn{font-size:13px;color:var(--muted)}.conn.bad{color:var(--coral-ink);font-weight:600}
.pn-main{flex:1;display:grid;grid-template-columns:1fr 360px;min-height:0}
.pn-grid{overflow:auto;padding:16px 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;align-content:start}
.tile{background:#fff;border:3px solid transparent;border-radius:18px;padding:12px 14px;text-align:left;font:inherit;color:inherit;cursor:pointer;display:flex;flex-direction:column;gap:6px;box-shadow:var(--sh);transition:border-color .2s,transform .1s;min-height:112px}
.tile:active{transform:scale(.98)}
.tile .nm{display:flex;gap:8px;align-items:center}
.tile .nm b{font-size:17px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .st{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.tile .wh{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .bar{height:8px;margin-top:auto}
.tile.ok .st{color:var(--vio-d)}
.tile.done{border-color:var(--mint)}.tile.done .st{color:var(--mint-ink)}.tile.done .bar i{background:var(--mint)}
.tile.stuck{border-color:var(--coral);background:#FFF6F6}.tile.stuck .st{color:var(--coral-ink)}
.tile.hand{border-color:var(--sun);background:#FFFBEF;animation:wave 1.6s ease-in-out infinite}.tile.hand .st{color:#6B4A00}
.tile.away{border-color:#E44C95;background:#FFF3F9}.tile.away .st{color:#A3195B}
.tile.idle{opacity:.6}.tile.idle .st{color:var(--muted)}
@keyframes wave{50%{box-shadow:0 0 0 6px rgba(255,200,61,.35)}}
@media(prefers-reduced-motion:reduce){.tile.hand,.dot-live{animation:none}}
.pn-side{background:#fff;border-left:1px solid var(--line);overflow:auto;padding:16px 18px}
.pn-side h2{font-size:17px;display:flex;gap:8px;align-items:center}
.pn-side h2 span{font-size:13px;background:var(--sun);color:var(--sun-ink);border-radius:999px;padding:1px 9px}
.pn-side h2 span:empty{display:none}
.doubts{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.dq{border:2px solid var(--sun);background:#FFFBEF;border-radius:16px;padding:12px}
.dq.coming{border-color:var(--line2);background:var(--bg)}
.dq b{font-size:15.5px}.dq .meta{font-size:12.5px;color:var(--muted)}
.dq p{margin:6px 0 10px;font-size:15px}
.dq .acts{display:flex;gap:6px;flex-wrap:wrap}
.dq .in{padding:9px 11px;font-size:14px;margin-bottom:6px}
.nj{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.nj span{font-size:13px;background:var(--bg);border-radius:999px;padding:4px 10px;color:var(--muted)}
@media(max-width:1000px){.pn-main{grid-template-columns:1fr}.pn-side{border-left:0;border-top:1px solid var(--line);max-height:40vh}body.panel{overflow:auto}}

/* sheets */
.sheet-bg{position:fixed;inset:0;background:rgba(23,21,58,.5);display:grid;place-items:end center;z-index:50;padding:16px}
.sheet-bg[hidden]{display:none}
.sheet{position:relative;background:#fff;border-radius:24px;padding:24px;width:100%;max-width:560px;max-height:90vh;overflow:auto;align-self:center}
.sheet-x{position:absolute;top:12px;right:12px;width:42px;height:42px;border-radius:50%;border:0;background:var(--bg);font-size:24px;cursor:pointer;color:var(--ink)}
.sh-stats{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.quick button{font:500 14.5px "Lexend",sans-serif;padding:10px 14px;border-radius:12px;border:2px solid var(--line2);background:#fff;color:var(--ink);cursor:pointer}
.quick button:active,.quick button.on{border-color:var(--vio);background:var(--vio-s)}

/* ================= tablet player ================= */
body.learn{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
.lr-top{background:var(--vio);color:#fff;display:flex;align-items:center;gap:14px;padding:10px 16px;flex:none}
.lr-top .logo{font-size:18px}
.lr-what{flex:1;min-width:0;line-height:1.25}
.lr-what b{display:block;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lr-what small{color:#E4DEFF;font-size:13px}
.lr-me{background:var(--sun);color:var(--sun-ink);font-weight:700;font-size:14px;padding:6px 12px;border-radius:999px;white-space:nowrap}
.lr-prog{display:flex;align-items:center;gap:12px;padding:10px 16px;background:#fff;border-bottom:1px solid var(--line);flex:none}
.lr-prog .bar{flex:1;height:10px}.lr-prog small{font-size:13px;color:var(--muted);white-space:nowrap}
.lr-main{flex:1;overflow:auto;padding:22px 16px 30px;-webkit-overflow-scrolling:touch}
.lr-step{max-width:760px;margin:0 auto;animation:rise .3s ease}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.lr-step .chip{margin-bottom:12px}
.lr-step h1{font-size:clamp(24px,3.6vw,32px);margin-bottom:14px}
.lr-step p{font-size:19px;line-height:1.65;margin-bottom:14px}
.lr-step p b{color:var(--vio-d)}
.lr-step .box{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 18px;margin:6px 0 16px;font-size:18px}
.lr-step .box.neev{background:var(--vio-s);border-color:#D9D1FF}
.lr-step .eq{font-size:24px;font-weight:700;text-align:center;background:#fff;border:2px dashed var(--line2);border-radius:16px;padding:16px;margin:10px 0 16px;color:var(--ink)}
.lr-step .q{font-size:21px;font-weight:600;margin-bottom:16px}
.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.opt{font:600 19px "Lexend",sans-serif;text-align:left;padding:18px;border-radius:16px;border:3px solid var(--line2);background:#fff;color:var(--ink);cursor:pointer;display:flex;gap:12px;align-items:center;min-height:70px;box-shadow:0 3px 0 var(--line2)}
.opt i{font-style:normal;width:32px;height:32px;border-radius:10px;background:var(--vio-s);color:var(--vio-d);display:grid;place-items:center;font-size:15px;flex:none}
.opt:active{transform:translateY(2px)}
.opt.right{border-color:var(--mint);background:var(--mint-s);color:var(--mint-ink);box-shadow:0 3px 0 var(--mint)}
.opt.right i{background:var(--mint);color:#fff}
.opt.wrong{border-color:var(--coral);background:var(--coral-s);color:var(--coral-ink);box-shadow:0 3px 0 var(--coral);animation:shake .35s}
.opt.wrong i{background:var(--coral);color:#fff}
.opt:disabled{cursor:default}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media(max-width:560px){.opts{grid-template-columns:1fr}}
.fb{margin-top:16px;padding:14px 16px;border-radius:16px;font-size:18px;font-weight:500}
.fb.right{background:var(--mint-s);color:var(--mint-ink)}.fb.wrong{background:var(--coral-s);color:var(--coral-ink)}
.fb .btn{margin-top:10px}
.done-card{text-align:center;padding:30px 10px}
.done-card .mark{width:90px;height:90px}
.done-card h1{margin-top:14px}
.lr-foot{display:flex;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);flex:none}
.lr-foot .btn{min-height:56px;font-size:17px}
.lr-foot #next{flex:1;max-width:320px;margin-left:auto}
.btn.doubt{background:#fff;color:#6B4A00;border:2px solid var(--sun);box-shadow:0 3px 0 var(--sun-d)}
.btn.doubt.on{background:var(--sun);color:var(--sun-ink)}
@media(max-width:560px){.lr-foot #prev{padding:0 14px}.btn.doubt{font-size:14px;padding:0 12px}}
.toast-msg{position:fixed;left:50%;top:76px;transform:translateX(-50%);z-index:60;background:var(--ink);color:#fff;border-radius:18px;padding:14px 16px;display:flex;gap:12px;align-items:center;max-width:min(560px,calc(100% - 24px));box-shadow:0 10px 30px rgba(23,21,58,.3);animation:rise .3s}
.toast-msg[hidden]{display:none}
.toast-msg b{color:var(--sun);font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.toast-msg span{flex:1;font-size:16px}
.freeze{position:fixed;inset:0;z-index:70;background:var(--vio);color:#fff;display:grid;place-items:center;text-align:center;padding:24px}
.freeze[hidden]{display:none}
.freeze h1{font-size:clamp(30px,5vw,48px);margin:18px 0 8px}.freeze p{color:#E4DEFF;font-size:18px;margin-bottom:20px}
.freeze .mark{animation:bob 2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}