:root{
  --bg:#eef7ff;--bg2:#f7fbff;--surface:#fff;--surface2:#f4f8ff;--text:#13233a;--muted:#66778f;--line:#dbe8f6;
  --primary:#139ee8;--primary2:#27d5cf;--secondary:#ff7a00;--purple:#6d5dfc;--green:#20b86e;--danger:#ef4565;--warning:#ffb020;
  --shadow:0 18px 46px rgba(25,73,118,.12);--soft:0 12px 28px rgba(25,73,118,.08);--radius:24px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:linear-gradient(180deg,#f4fbff 0%,#eef7ff 42%,#f9fbff 100%);color:var(--text);min-height:100vh;letter-spacing:.005em}.bg-bubbles{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}.bg-bubbles span{position:absolute;border-radius:999px;background:linear-gradient(135deg,rgba(39,213,207,.25),rgba(19,158,232,.15));filter:blur(.2px)}.bg-bubbles span:nth-child(1){width:420px;height:420px;left:-160px;top:120px}.bg-bubbles span:nth-child(2){width:360px;height:360px;right:-130px;top:340px;background:linear-gradient(135deg,rgba(109,93,252,.18),rgba(39,213,207,.17))}.bg-bubbles span:nth-child(3){width:240px;height:240px;left:8%;bottom:5%;background:linear-gradient(135deg,rgba(255,122,0,.12),rgba(19,158,232,.12))}
a{color:var(--primary);text-decoration:none}.topbar{position:sticky;top:0;z-index:80;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px clamp(16px,4vw,58px);background:rgba(255,255,255,.9);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);box-shadow:0 10px 32px rgba(22,73,120,.07)}.brand{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;min-width:max-content}.brand-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:17px;color:#fff;font-weight:1000;background:linear-gradient(135deg,var(--primary),var(--primary2));box-shadow:0 14px 25px rgba(19,158,232,.25)}.brand strong{display:block;font-size:18px;line-height:1}.brand small{display:block;color:var(--muted);font-size:12px;margin-top:4px}.nav,.main-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.nav a,.main-nav a{font-weight:800;color:#3f526d;padding:10px 12px;border-radius:999px}.nav a:hover,.main-nav a:hover{background:#eef7ff;color:var(--primary)}.mobile-menu-toggle{display:none;border:0;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;width:44px;height:44px;border-radius:16px;font-size:26px;font-weight:1000;box-shadow:var(--soft);cursor:pointer}.top-actions{display:flex;align-items:center;gap:12px}.user-chip{display:flex;flex-direction:column;align-items:flex-end}.user-chip b{font-size:14px}.user-chip small{font-size:11px;color:var(--muted);text-transform:capitalize}.container{width:min(1180px,92vw);margin:0 auto;padding:36px 0 70px}.app-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;width:min(1440px,96vw);margin:24px auto 0}.app-main{width:100%;padding-top:0}.sidebar{position:sticky;top:88px;height:calc(100vh - 112px);overflow:auto;border-radius:28px;background:rgba(255,255,255,.94);border:1px solid var(--line);box-shadow:var(--shadow);padding:18px}.sidebar-head{display:grid;gap:8px;padding:8px 8px 14px}.sidebar-head strong{font-size:18px}.sidebar-nav{display:grid;gap:6px}.sidebar-nav a{display:flex;align-items:center;gap:10px;color:#344860;font-weight:800;padding:12px 13px;border-radius:16px}.sidebar-nav a:hover{background:linear-gradient(135deg,rgba(19,158,232,.12),rgba(39,213,207,.12));color:var(--primary)}.footer{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;text-align:center;color:var(--muted);padding:28px;border-top:1px solid var(--line);background:#fff}.footer strong{color:var(--text)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:12px 18px;font-weight:900;text-decoration:none;cursor:pointer;transition:.18s transform,.18s box-shadow,.18s filter;white-space:nowrap}.btn:hover{transform:translateY(-1px);filter:brightness(1.03)}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;box-shadow:0 14px 26px rgba(19,158,232,.23)}.btn-secondary{background:linear-gradient(135deg,#ff8a00,#ff5d2a);color:#fff;box-shadow:0 14px 26px rgba(255,122,0,.22)}.btn-light{background:#fff;color:var(--primary);box-shadow:var(--soft);border:1px solid rgba(19,158,232,.14)}.btn-ghost{background:#f1f7ff;color:#25506f;border:1px solid var(--line)}.btn-small{padding:8px 11px;font-size:13px}.btn.full{width:100%}.pill{display:inline-flex;align-items:center;width:max-content;gap:7px;padding:8px 13px;border-radius:999px;background:#e8f8ff;color:#0c82c2;font-weight:900;text-transform:uppercase;letter-spacing:.06em;font-size:12px}.pill-warm{background:#fff1df;color:#da5e00}.pill-light{background:rgba(255,255,255,.22);color:#fff;border:1px solid rgba(255,255,255,.25)}
.card,.auth-card,.filter-card,.game-card,.stat-card,.product-card{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}.card h3,.auth-card h2{margin-top:0}.grid{display:grid;gap:20px;margin:24px 0}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(330px,.95fr);gap:34px;align-items:center;min-height:580px}.edutech-hero{position:relative;margin-top:12px;padding:44px;border-radius:38px;background:radial-gradient(circle at 12% 10%,rgba(255,255,255,.28),transparent 28%),linear-gradient(135deg,#078ee2 0%,#22c8d1 48%,#6d5dfc 100%);box-shadow:0 22px 60px rgba(17,120,196,.22);overflow:hidden}.edutech-hero:after{content:"";position:absolute;right:-90px;bottom:-100px;width:360px;height:360px;border-radius:999px;background:rgba(255,255,255,.16)}.hero-copy{position:relative;z-index:2}.hero-copy h1{font-size:clamp(34px,5.8vw,72px);line-height:1.02;margin:18px 0 16px;letter-spacing:-.055em;color:#fff;text-wrap:balance}.hero-copy p{font-size:18px;line-height:1.75;color:rgba(255,255,255,.9);max-width:760px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0}.demo-accounts{width:min(620px,100%);color:#24445f;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.5);padding:14px 16px;border-radius:20px;line-height:1.6;box-shadow:var(--soft)}.demo-accounts summary{font-weight:900;cursor:pointer}.learning-visual{position:relative;z-index:2;padding:0;min-height:410px;border:0;background:transparent;box-shadow:none}.mascot-card{position:relative;min-height:410px;border-radius:36px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(10px);overflow:hidden;box-shadow:0 22px 55px rgba(16,73,129,.24)}.mascot-orbit{position:absolute;inset:42px;border-radius:42px;border:2px dashed rgba(255,255,255,.36);transform:rotate(-7deg)}.typing-device{position:absolute;left:12%;right:12%;top:20%;height:210px;border-radius:30px;background:#fff;box-shadow:0 24px 60px rgba(8,52,96,.25);padding:18px}.device-screen{height:126px;border-radius:22px;background:linear-gradient(135deg,#12325e,#1a8bc8);color:#fff;padding:18px;display:grid;gap:8px}.device-screen b{font-size:30px}.device-screen span{font-weight:800}.device-keyboard{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-top:14px}.device-keyboard i{height:22px;border-radius:8px;background:#e8f2ff}.floating-badge{position:absolute;padding:11px 14px;border-radius:18px;background:#fff;color:#17324d;font-weight:1000;box-shadow:var(--shadow)}.badge-one{right:20px;top:24px}.badge-two{left:22px;bottom:42px;color:#ff6a00}.badge-three{right:36px;bottom:88px;color:var(--primary)}.quick-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:-26px auto 36px;position:relative;z-index:3}.quick-strip a{display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;padding:15px;border-radius:18px;font-weight:900;color:#304961;border:1px solid var(--line);box-shadow:var(--soft)}.quick-strip span{font-size:20px}.section-head{text-align:center;margin:46px auto 22px;max-width:760px}.section-head h2,.faq-section h2{font-size:clamp(28px,4vw,46px);line-height:1.08;margin:14px 0 10px;letter-spacing:-.04em}.section-head p{color:var(--muted);font-size:17px}.product-grid{align-items:stretch}.product-card{position:relative;overflow:hidden;min-height:250px}.product-card:before{content:"";position:absolute;right:-55px;top:-55px;width:150px;height:150px;border-radius:999px;background:rgba(255,255,255,.35)}.product-card h3{font-size:21px;margin:14px 0 8px}.product-card p{color:#466078;line-height:1.6}.product-card a{font-weight:1000}.card-cyan{background:linear-gradient(180deg,#e9fbff,#fff)}.card-orange{background:linear-gradient(180deg,#fff2e2,#fff)}.card-purple{background:linear-gradient(180deg,#f0edff,#fff)}.card-green{background:linear-gradient(180deg,#e9fff4,#fff)}.feature-icon{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:18px;background:#fff;box-shadow:var(--soft);font-size:24px}.promo-banner{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:42px 0;padding:32px;border-radius:30px;background:linear-gradient(135deg,#04a7db,#6a4df7);color:#fff;box-shadow:0 22px 58px rgba(68,80,220,.22);overflow:hidden}.promo-banner h2{margin:12px 0 0;font-size:clamp(24px,3vw,38px);line-height:1.14;max-width:780px}.feature-blocks .card{min-height:260px}.live-mini-card{background:linear-gradient(135deg,#102c54,#0ca7d3);color:#fff}.live-mini-card p{color:rgba(255,255,255,.83)}.flow-steps{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.flow-steps span{padding:11px 14px;border-radius:999px;background:#eef7ff;color:#21516d;font-weight:900}.faq-section{margin:54px auto 10px;max-width:860px}.faq-section details{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--soft);margin:12px 0;padding:16px}.faq-section summary{font-weight:900;cursor:pointer}.faq-section p{color:var(--muted);line-height:1.6}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px;padding:26px;border-radius:30px;background:linear-gradient(135deg,#fff,#f0f8ff);border:1px solid var(--line);box-shadow:var(--shadow)}.page-head h1{font-size:clamp(30px,4vw,48px);line-height:1.05;margin:10px 0 0;letter-spacing:-.04em}.page-head p,.muted{color:var(--muted);line-height:1.65}.stat-card{background:linear-gradient(135deg,#fff,#e9f8ff)}.stat-card strong{display:block;font-size:40px;color:var(--primary)}.stat-card span{color:var(--muted);font-weight:800}.auth-wrap{display:grid;place-items:center;min-height:68vh}.auth-card{width:min(460px,100%)}.auth-card.wide{width:min(820px,100%)}label{display:block;margin:14px 0 7px;color:#263b55;font-weight:900}input,select,textarea{width:100%;border:1px solid var(--line);background:#fff;color:var(--text);padding:13px 14px;border-radius:16px;outline:0;font:inherit}textarea{resize:vertical;line-height:1.6}input:focus,select:focus,textarea:focus{border-color:rgba(19,158,232,.65);box-shadow:0 0 0 4px rgba(19,158,232,.12)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.soft-separator{border:0;border-top:1px solid var(--line);margin:20px 0}.region-helper{border:1px dashed rgba(19,158,232,.38);background:#e9f8ff;color:#2c5770;border-radius:18px;padding:12px 14px;margin:10px 0 14px;line-height:1.55}.filter-card{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:20px}.filter-card label{margin:0;color:var(--muted);font-size:12px}.filter-card select{min-width:170px}.inline-form{display:inline-flex;gap:8px;align-items:center}.button-row{display:flex;gap:8px;flex-wrap:wrap}.table-wrap{overflow:auto}.table-wrap table{width:100%;border-collapse:separate;border-spacing:0 9px;min-width:760px}.table-wrap th{padding:12px;color:#60738b;text-transform:uppercase;letter-spacing:.06em;font-size:12px}.table-wrap td{padding:14px 12px;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);vertical-align:top}.table-wrap td:first-child{border-left:1px solid var(--line);border-radius:16px 0 0 16px}.table-wrap td:last-child{border-right:1px solid var(--line);border-radius:0 16px 16px 0}.table-wrap small{display:block;color:var(--muted);margin-top:4px}.badge{display:inline-flex;align-items:center;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900;background:#e8f8ff;color:#0b83c1;border:1px solid rgba(19,158,232,.22)}.badge.warn,.badge-warning{background:#fff4df!important;color:#b96a00!important;border-color:#ffd291!important}.alert{margin:18px 0;padding:14px 18px;border-radius:18px;border:1px solid var(--line);font-weight:800;background:#fff;box-shadow:var(--soft)}.alert-success{background:#eafaf2;color:#0f814b}.alert-error{background:#fff0f3;color:#bd2445}.alert-info{background:#edf7ff;color:#076fb0}.clean-list{padding-left:18px;color:var(--muted);line-height:1.8}.lesson-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.lesson-list{display:grid;gap:10px;margin-top:16px}.lesson-list a{display:flex;justify-content:space-between;gap:14px;color:var(--text);border:1px solid var(--line);border-radius:16px;padding:12px 14px;background:#fff}.level-no{display:inline-block;margin-bottom:8px;color:var(--primary);font-weight:1000}
.arena-shell{min-height:calc(100vh - 150px)}.arena-hud{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px}.arena-hud h1{margin:12px 0 0;font-size:clamp(28px,4vw,46px)}.timer{font-size:42px;font-weight:1000;padding:12px 18px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:var(--soft);font-variant-numeric:tabular-nums}.race-track{position:relative;height:112px;border-radius:28px;background:linear-gradient(90deg,#dff7ff,#e7fff8);border:1px solid var(--line);overflow:hidden;margin-bottom:18px}.track-line{position:absolute;left:30px;right:100px;top:55px;height:4px;background:repeating-linear-gradient(90deg,rgba(19,158,232,.45) 0 30px,transparent 30px 46px)}.player-runner{position:absolute;left:24px;top:28px;width:58px;height:58px;border-radius:20px;background:linear-gradient(135deg,var(--primary),var(--primary2));display:grid;place-items:center;color:#fff;font-weight:1000;box-shadow:0 18px 30px rgba(19,158,232,.25);transition:left .35s cubic-bezier(.2,.8,.2,1)}.player-runner.running{animation:bob .45s infinite alternate}.finish-flag{position:absolute;right:24px;top:34px;font-size:36px}@keyframes bob{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-8px) rotate(2deg)}}.typing-panel{border-radius:28px;background:#fff;border:1px solid var(--line);padding:22px;box-shadow:var(--shadow)}.target-text{line-height:1.9;font-size:20px;background:#f5f9ff;border:1px solid var(--line);padding:20px;border-radius:22px;max-height:220px;overflow:auto}.target-text span.ok{color:#0c9a56}.target-text span.bad{color:#de3659;text-decoration:underline}.target-text span.current{background:#dceeff;border-radius:5px}#typingInput{margin-top:16px;min-height:160px;font-size:20px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0}.metrics div{padding:16px;border-radius:18px;background:#f5f9ff;border:1px solid var(--line);text-align:center}.metrics b{display:block;font-size:26px;color:var(--primary)}.metrics span{display:block;color:var(--muted);font-size:12px;font-weight:900;text-transform:uppercase}.keyboard-visual{display:grid;gap:8px;margin-top:16px}.key-row{display:flex;gap:8px;justify-content:center}.key-row span{min-width:38px;padding:10px;border-radius:10px;background:#fff;border:1px solid var(--line);box-shadow:var(--soft);text-align:center;font-weight:900}.key-row span.active{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff}.error-box{background:#fff0f3;border:1px solid #ffd1d9;color:#b91c3c;border-radius:18px;padding:14px;margin-top:14px}.page-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* Live Race */
.live-hero{background:linear-gradient(135deg,#142b52,#0b9cca 56%,#604feb);color:#fff}.live-hero p{color:rgba(255,255,255,.83)}.live-race-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;min-height:650px;padding:22px;border-radius:34px;background:radial-gradient(circle at 18% 10%,rgba(39,213,207,.25),transparent 28%),linear-gradient(180deg,#152b52,#091b35);box-shadow:0 25px 70px rgba(10,36,70,.28);overflow:hidden;color:#fff}.race-camera{position:relative;min-height:590px;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.14);padding:18px;overflow:hidden;perspective:1000px}.stadium-lights{position:absolute;inset:0;background:radial-gradient(circle at 18% 18%,rgba(255,255,255,.18),transparent 14%),radial-gradient(circle at 82% 18%,rgba(39,213,207,.18),transparent 14%);pointer-events:none}.race-skyline{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.race-skyline h2{margin:6px 0;font-size:clamp(26px,3vw,42px)}.race-lanes{position:relative;z-index:3;display:grid;gap:14px;transform:rotateX(7deg);transform-origin:center top}.finish-gate{position:absolute;right:26px;top:112px;bottom:24px;width:5px;background:repeating-linear-gradient(0deg,#fff 0 18px,#17233a 18px 36px);border-radius:999px;z-index:5}.finish-gate span{position:absolute;right:-17px;top:-34px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.18);font-size:12px;font-weight:1000}.live-lane{position:relative;display:grid;grid-template-columns:210px minmax(260px,1fr) 150px;align-items:center;gap:16px;min-height:74px;padding:12px 82px 12px 14px;border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.055));border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 44px rgba(0,0,0,.22);transition:transform .45s ease,box-shadow .45s ease}.live-lane.trend-up{box-shadow:0 18px 44px rgba(39,213,207,.2),0 0 0 1px rgba(39,213,207,.26)}.live-lane.trend-down{box-shadow:0 18px 44px rgba(239,69,101,.18),0 0 0 1px rgba(239,69,101,.22)}.lane-meta strong{display:block;color:#fff}.lane-meta small{display:block;color:rgba(255,255,255,.66);margin-top:5px}.lane-road{position:relative;height:40px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(0,0,0,.22));border:1px solid rgba(255,255,255,.13);box-shadow:inset 0 7px 16px rgba(0,0,0,.28);overflow:visible}.lane-depth{position:absolute;left:8px;right:8px;top:18px;height:4px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 28px,transparent 28px 42px);opacity:.55}.lane-progress{position:absolute;left:0;top:0;bottom:0;width:calc(var(--progress)*1%);border-radius:999px;background:linear-gradient(90deg,rgba(39,213,207,.2),rgba(19,158,232,.38));transition:width .8s cubic-bezier(.2,.8,.2,1)}.lane-avatar{position:absolute;left:calc((100% - 46px) * var(--progress) / 100);top:-7px;width:54px;height:54px;border-radius:19px;display:grid;place-items:center;background:linear-gradient(145deg,#fff,#27d5cf);box-shadow:0 18px 36px rgba(39,213,207,.32),inset 0 -10px 18px rgba(0,0,0,.18);transition:left .9s cubic-bezier(.2,.85,.2,1),transform .35s ease;transform:translateZ(30px)}.lane-avatar span{color:#071a2c;font-weight:1000}.trend-up .lane-avatar{animation:boost .9s ease}.trend-down .lane-avatar{animation:errorShake .55s ease}@keyframes boost{40%{transform:translateZ(45px) scale(1.12);filter:brightness(1.2)}}@keyframes errorShake{20%,60%{transform:translateX(-5px) translateZ(28px)}40%,80%{transform:translateX(5px) translateZ(28px)}}.lane-stats{text-align:right}.lane-stats b{display:block;color:#b9fff2}.lane-stats span{display:block;color:rgba(255,255,255,.66);font-size:12px;margin-top:5px}.lane-color-blue .lane-avatar{background:linear-gradient(145deg,#fff,#78b7ff)}.lane-color-gold .lane-avatar{background:linear-gradient(145deg,#fff,#ffcf66)}.lane-color-pink .lane-avatar{background:linear-gradient(145deg,#fff,#ff7cab)}.lane-color-violet .lane-avatar{background:linear-gradient(145deg,#fff,#b78cff)}.lane-color-lime .lane-avatar{background:linear-gradient(145deg,#fff,#8dff8a)}.lane-color-orange .lane-avatar{background:linear-gradient(145deg,#fff,#ff9a62)}.lane-color-cyan .lane-avatar{background:linear-gradient(145deg,#fff,#78f3ff)}.live-sideboard{position:relative;z-index:2;border-radius:28px;padding:20px;background:rgba(0,0,0,.20);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 0 40px rgba(255,255,255,.025)}.live-sideboard h3{margin-top:0}.live-rank-list{display:grid;gap:10px}.rank-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px;border-radius:17px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10);animation:rowIn .35s ease both}.rank-row span{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;background:rgba(39,213,207,.17);font-weight:1000}.rank-row b{display:block}.rank-row small{display:block;color:rgba(255,255,255,.66);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}.rank-row strong{color:#b9fff2}@keyframes rowIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.empty-live{min-height:330px;display:grid;place-items:center;text-align:center;border:1px dashed rgba(255,255,255,.22);border-radius:24px;color:#fff;background:rgba(255,255,255,.05)}.empty-live span{display:block;color:rgba(255,255,255,.7);margin-top:8px}.live-note{margin-top:18px;color:#dcefff}.live-filter{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}.leaderboard-podium{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.podium-card{border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--soft);padding:20px}.podium-card h3{margin:0 0 8px}.rank-1{border-color:#ffd36b}.rank-2{border-color:#bcc7d7}.rank-3{border-color:#d7a06a}.certificate{background:#fff;border-radius:28px;padding:34px;box-shadow:var(--shadow)}.cert-border{border:5px solid #1d9cd8;border-radius:24px;padding:38px;text-align:center}.cert-foot{display:flex;justify-content:space-between;gap:20px;margin-top:40px}.print-toolbar{margin-bottom:18px}.card-grid-print{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.print-sheet{background:#fff;padding:16px}
@media (max-width:1180px){.grid.four{grid-template-columns:repeat(2,1fr)}.quick-strip{grid-template-columns:repeat(3,1fr)}.live-race-stage{grid-template-columns:1fr}.live-sideboard{order:2}.app-layout{grid-template-columns:240px 1fr}.live-lane{grid-template-columns:180px minmax(220px,1fr) 130px}.race-camera{min-height:520px}}
@media (max-width:900px){.mobile-menu-toggle{display:grid;place-items:center}.topbar{padding:12px 16px}.main-nav,.sidebar{display:none}.main-nav.is-open{display:grid;position:absolute;right:14px;top:68px;width:min(320px,calc(100vw - 28px));background:#fff;padding:12px;border-radius:22px;border:1px solid var(--line);box-shadow:var(--shadow);z-index:100}.main-nav.is-open a,.main-nav.is-open .btn{justify-content:flex-start;width:100%}.sidebar.is-open{display:block;position:fixed;left:12px;right:12px;top:76px;z-index:120;height:auto;max-height:calc(100vh - 96px)}.app-layout{display:block;width:min(1180px,94vw);margin:18px auto 0}.container{width:min(1180px,94vw);padding:26px 0 60px}.hero{grid-template-columns:1fr;min-height:auto}.edutech-hero{padding:28px;border-radius:30px}.learning-visual{min-height:330px}.mascot-card{min-height:330px}.hero-copy h1{font-size:clamp(34px,10vw,52px)}.hero-actions{display:grid;grid-template-columns:1fr;gap:10px}.quick-strip{grid-template-columns:1fr 1fr;margin-top:18px}.grid.two,.grid.three,.grid.four,.lesson-grid,.region-admin-grid{grid-template-columns:1fr!important}.promo-banner{display:grid}.page-head{display:grid;border-radius:22px;padding:20px}.form-row{grid-template-columns:1fr}.table-wrap table,.table-wrap thead,.table-wrap tbody,.table-wrap th,.table-wrap td,.table-wrap tr{display:block;min-width:0}.table-wrap thead{display:none}.table-wrap tbody tr{background:#fff;border:1px solid var(--line);border-radius:18px;margin-bottom:12px;padding:10px}.table-wrap tbody td{border:0!important;border-radius:0!important;padding:8px 10px}.button-row,.inline-form{display:grid;grid-template-columns:1fr;gap:8px}.button-row .btn,.inline-form .btn,.inline-form input,.inline-form select{width:100%}.metrics{grid-template-columns:repeat(2,1fr)}.leaderboard-podium,.card-grid-print{grid-template-columns:1fr}.cert-foot{display:grid}.top-actions .user-chip{display:none}}
@media (max-width:640px){.brand-mark{width:42px;height:42px}.brand strong{font-size:15px}.brand small{font-size:11px}.quick-strip{grid-template-columns:1fr}.hero-copy p{font-size:16px}.mascot-card{min-height:280px}.typing-device{left:8%;right:8%;top:18%;height:190px}.device-screen b{font-size:24px}.floating-badge{font-size:12px}.badge-three{right:18px}.live-race-stage{padding:14px;border-radius:24px;min-height:0}.race-camera{padding:14px;border-radius:22px;min-height:0}.race-skyline{flex-direction:column;align-items:flex-start}.race-lanes{transform:none}.finish-gate{display:none}.live-lane{grid-template-columns:1fr;gap:8px;padding:12px;min-height:126px}.lane-stats{text-align:left}.lane-road{height:36px}.lane-avatar{width:48px;height:48px;border-radius:17px}.live-sideboard{padding:14px}.rank-row{grid-template-columns:38px 1fr auto}.live-filter{display:grid;grid-template-columns:1fr}.filter-card.live-filter select{min-width:0}.page-actions{display:grid;grid-template-columns:1fr}.page-actions .btn{width:100%}.timer{font-size:34px}.target-text{font-size:17px;max-height:270px}.metrics{grid-template-columns:1fr 1fr}.metrics div{padding:12px}.metrics b{font-size:22px}.keyboard-visual{overflow:auto}.key-row{min-width:max-content}}
@media print{.topbar,.sidebar,.footer,.print-toolbar,.bg-bubbles{display:none!important}.app-layout{display:block}.container{width:100%;padding:0}.card,.certificate{box-shadow:none}.print-sheet{padding:0}.cert-border{min-height:90vh}}

/* v7 spacious admin polish */
body{font-size:14px}.container{padding-top:28px}.card,.auth-card,.filter-card,.game-card,.stat-card,.product-card{padding:20px}.page-head h1{font-size:clamp(26px,3.2vw,42px)}.page-head p,.card p,.muted{font-size:14px}.sidebar{padding:14px;border-radius:24px}.sidebar-head strong{font-size:16px}.sidebar-nav a{position:relative;padding:10px 11px;font-size:13px}.sidebar-nav a b{font-size:13px;font-weight:850}.sidebar-badge{margin-left:auto;min-width:22px;height:22px;border-radius:999px;background:linear-gradient(135deg,#ff7a00,#ef4565);color:#fff;font-style:normal;font-size:11px;font-weight:1000;display:inline-grid;place-items:center;padding:0 6px;box-shadow:0 8px 18px rgba(239,69,101,.24)}
.table-wrap table{font-size:13px}.table-wrap th{font-size:12px;letter-spacing:.03em}.btn{padding:10px 15px;font-size:13px}.btn-small{padding:7px 10px;font-size:12px}.pill{padding:7px 11px;font-size:10.5px}.form label{font-size:12px}input,select,textarea{font-size:13px}.hero-copy p{font-size:16px}.hero-copy h1{font-size:clamp(32px,5.2vw,64px)}.quick-strip a{font-size:13px}.product-card h3{font-size:18px}.product-card p{font-size:13.5px}.alert{font-size:13px}.person-cell{display:flex;align-items:center;gap:10px}.person-cell span{display:grid;gap:2px}.avatar-sm{width:38px;height:38px;border-radius:14px;object-fit:cover;background:#eaf4ff;border:2px solid #fff;box-shadow:0 8px 18px rgba(24,87,136,.12)}.avatar-lg{width:86px;height:86px;border-radius:24px;object-fit:cover;background:#eaf4ff;border:3px solid #fff;box-shadow:var(--soft)}.profile-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px;border-radius:20px;background:#f5fbff;border:1px solid var(--line)}.profile-row input[type=file]{background:#fff}.stat-card strong{font-size:32px}.lesson-card .lesson-list a{font-size:13px}.auth-card.wide{max-width:860px}.auth-card{max-width:560px}.grid.three .form textarea{min-height:100px}
@media(max-width:900px){body{font-size:13px}.card,.auth-card,.filter-card,.game-card,.stat-card,.product-card{padding:16px}.sidebar-nav a b{font-size:13px}.sidebar-badge{position:absolute;right:10px}.profile-row{align-items:flex-start}.avatar-lg{width:76px;height:76px}.table-wrap tbody td{font-size:13px}.hero-copy h1{font-size:clamp(30px,9vw,48px)}}

/* v12: Professional A4 login-card print layout */
.card-print-options{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:18px 20px;border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:var(--soft);margin-bottom:20px}.card-print-options h1{margin:6px 0 6px;font-size:24px}.card-print-options p{margin:0;color:var(--muted)}.print-option-form{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;justify-content:flex-end}.print-option-form label{font-size:12px;font-weight:800;color:var(--muted)}.print-option-form input,.print-option-form select{min-height:42px;border:1px solid var(--line);border-radius:14px;padding:0 12px;background:#fff}.check-inline{display:flex!important;align-items:center;gap:7px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:#f8fbff;color:#21354b!important}.check-inline input{min-height:auto}.print-pages{display:grid;gap:24px;justify-content:center}.a4-card-sheet{width:210mm;min-height:297mm;box-sizing:border-box;padding:12mm 10mm;background:#fff;border:1px solid #d9e5f3;box-shadow:0 16px 45px rgba(18,43,77,.14);display:grid;grid-template-columns:repeat(2,90mm);grid-auto-rows:55mm;gap:6mm 8mm;align-content:start;justify-content:center;page-break-after:always}.a4-card-sheet:last-child{page-break-after:auto}.print-login-card{position:relative;box-sizing:border-box;width:90mm;height:55mm;padding:5mm;border:1px dashed #72869e;border-radius:3mm;background:linear-gradient(135deg,#ffffff 0%,#f3fbff 58%,#ecf6ff 100%);overflow:hidden;color:#0b1d33;break-inside:avoid;page-break-inside:avoid}.print-login-card:before{content:"";position:absolute;right:-17mm;top:-18mm;width:45mm;height:45mm;border-radius:50%;background:rgba(29,172,225,.13)}.print-login-card:after{content:"";position:absolute;left:-20mm;bottom:-24mm;width:52mm;height:52mm;border-radius:50%;background:rgba(255,136,28,.10)}.cut-corner{position:absolute;width:5mm;height:5mm;z-index:4;opacity:.82}.cut-tl{left:-1px;top:-1px;border-left:1.4px solid #111;border-top:1.4px solid #111}.cut-tr{right:-1px;top:-1px;border-right:1.4px solid #111;border-top:1.4px solid #111}.cut-bl{left:-1px;bottom:-1px;border-left:1.4px solid #111;border-bottom:1.4px solid #111}.cut-br{right:-1px;bottom:-1px;border-right:1.4px solid #111;border-bottom:1.4px solid #111}.card-login-head{position:relative;z-index:2;display:flex;align-items:center;gap:2.8mm;margin-bottom:3.5mm}.mini-logo{width:10mm;height:10mm;border-radius:3mm;display:grid;place-items:center;background:linear-gradient(135deg,#16c7c9,#159ce5);color:#fff;font-size:10px;font-weight:1000;box-shadow:0 5px 12px rgba(21,156,229,.22)}.card-login-head strong{display:block;font-size:12px;line-height:1.05}.card-login-head small{display:block;font-size:8px;color:#5d728b;margin-top:1px}.card-login-body{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 24mm;gap:4mm;align-items:start}.print-login-card.has-photo .card-login-body{grid-template-columns:18mm minmax(0,1fr) 24mm}.card-photo-wrap{position:relative;width:18mm;height:24mm;border:1px solid #d7e3f0;border-radius:2.5mm;overflow:hidden;background:#e9f5ff;display:grid;place-items:center}.card-photo-wrap span{font-size:18px;font-weight:1000;color:#159ce5}.card-student-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fff}.card-login-info h3{margin:0 0 1.8mm;font-size:13px;line-height:1.12;max-height:8mm;overflow:hidden}.card-login-info p{margin:0 0 1.2mm;font-size:8.5px;line-height:1.2;color:#445a73}.login-code-box,.login-pin-box{display:grid;grid-template-columns:1fr;gap:.4mm;margin-top:1.2mm;padding:1.5mm 2mm;border-radius:2mm;background:#fff;border:1px solid #dbe8f5}.login-code-box span,.login-pin-box span{font-size:7px;text-transform:uppercase;letter-spacing:.08em;color:#6b7d91;font-weight:800}.login-code-box b,.login-pin-box b{font-size:10px;line-height:1;color:#071b31;letter-spacing:.02em}.card-qr{text-align:center}.card-qr img{width:24mm;height:24mm;display:block;border:1px solid #cdddeb;border-radius:2mm;padding:1mm;background:#fff}.card-qr small{display:block;margin-top:1mm;font-size:6.8px;color:#61768f}.no-photo .card-login-info h3{font-size:14px}.no-photo .login-code-box b,.no-photo .login-pin-box b{font-size:11px}
@media (max-width:900px){.card-print-options{display:grid}.print-option-form{display:grid;grid-template-columns:1fr}.print-option-form .btn,.print-option-form input,.print-option-form select{width:100%}.a4-card-sheet{width:100%;min-height:auto;padding:12px;grid-template-columns:1fr;grid-auto-rows:auto;gap:12px}.print-login-card{width:100%;height:auto;min-height:180px}}
@page{size:A4 portrait;margin:0}
@media print{html,body{background:#fff!important;width:210mm;min-height:297mm}.topbar,.sidebar,.footer,.print-toolbar,.bg-bubbles,.alert{display:none!important}.admin-shell,.has-sidebar,.app-layout,.container,.app-main{display:block!important;width:210mm!important;max-width:none!important;margin:0!important;padding:0!important;background:#fff!important;box-shadow:none!important}.print-pages{display:block!important;gap:0!important}.a4-card-sheet{width:210mm!important;height:297mm!important;min-height:297mm!important;padding:12mm 10mm!important;margin:0!important;border:0!important;box-shadow:none!important;grid-template-columns:repeat(2,90mm)!important;grid-auto-rows:55mm!important;gap:6mm 8mm!important;align-content:start!important;justify-content:center!important;page-break-after:always!important;break-after:page!important}.a4-card-sheet:last-child{page-break-after:auto!important;break-after:auto!important}.print-login-card{width:90mm!important;height:55mm!important;border:1px dashed #4b5d73!important;box-shadow:none!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}.card-login-head strong{font-size:12px!important}.card-login-info h3{font-size:13px!important}.card-login-info p{font-size:8.5px!important}.card-qr img{width:24mm!important;height:24mm!important}}

/* v13: Portrait student-card style inspired by modern edutech ID cards */
.card-print-options p strong{color:var(--ink)}
.a4-card-sheet{width:210mm;min-height:297mm;box-sizing:border-box;padding:8mm 13mm;background:#fff;border:1px solid #d9e5f3;box-shadow:0 16px 45px rgba(18,43,77,.14);display:grid;grid-template-columns:repeat(3,55mm);grid-auto-rows:90mm;gap:4mm 5.5mm;align-content:start;justify-content:center;page-break-after:always}.a4-card-sheet:last-child{page-break-after:auto}
.print-login-card{position:relative;box-sizing:border-box;width:55mm;height:90mm;padding:0;border:1px dashed #6f8198;border-radius:4mm;background:linear-gradient(160deg,#16d3b8 0%,#00aebf 46%,#0794c9 100%);overflow:hidden;color:#073051;break-inside:avoid;page-break-inside:avoid;box-shadow:0 8px 18px rgba(12,57,90,.16)}
.print-login-card:before{content:"";position:absolute;left:-17mm;top:-17mm;width:32mm;height:32mm;border-radius:50%;background:#ffc400;box-shadow:48mm 21mm 0 -8mm #ff8a00,56mm 70mm 0 -6mm #ffc400,4mm 84mm 0 -3mm #ff8a00;z-index:0}.print-login-card:after{content:"";position:absolute;right:-20mm;top:10mm;width:44mm;height:44mm;border:1.4mm solid rgba(255,255,255,.2);border-radius:50%;z-index:0}.card-pattern{position:absolute;z-index:0;pointer-events:none}.card-pattern-a{left:4mm;top:17mm;width:19mm;height:10mm;background:repeating-linear-gradient(135deg,rgba(255,255,255,.25) 0 1px,transparent 1px 3px);border-radius:4mm;transform:rotate(-8deg)}.card-pattern-b{right:4mm;bottom:15mm;width:15mm;height:6mm;border-top:1mm dotted rgba(255,255,255,.26)}.card-pattern-c{right:4mm;top:39mm;width:9mm;height:9mm}.card-pattern-c:before,.card-pattern-c:after{content:"";position:absolute;background:rgba(255,255,255,.22);border-radius:2px}.card-pattern-c:before{left:4mm;top:0;width:1mm;height:9mm}.card-pattern-c:after{left:0;top:4mm;width:9mm;height:1mm}
.print-login-card .cut-corner{position:absolute;width:4.5mm;height:4.5mm;z-index:7;opacity:.78}.print-login-card .cut-tl{left:-1px;top:-1px;border-left:1px solid #233850;border-top:1px solid #233850}.print-login-card .cut-tr{right:-1px;top:-1px;border-right:1px solid #233850;border-top:1px solid #233850}.print-login-card .cut-bl{left:-1px;bottom:-1px;border-left:1px solid #233850;border-bottom:1px solid #233850}.print-login-card .cut-br{right:-1px;bottom:-1px;border-right:1px solid #233850;border-bottom:1px solid #233850}
.card-login-head{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:2mm;padding-top:5.3mm;margin:0;color:#fff;text-align:left}.card-login-head .mini-logo{width:8.5mm;height:8.5mm;border-radius:2.4mm;background:#fff;color:#0c9bd0;font-size:8px;font-weight:1000;box-shadow:0 4px 10px rgba(0,0,0,.15)}.card-login-head strong{display:block;color:#fff;font-size:9.2px;line-height:1;text-transform:uppercase;letter-spacing:.02em}.card-login-head small{display:block;color:rgba(255,255,255,.9);font-size:6.8px;margin-top:.8mm;text-transform:uppercase;letter-spacing:.06em}
.card-photo-stage{position:relative;z-index:2;display:grid;place-items:center;margin-top:5mm}.card-photo-ring{width:38mm;height:38mm;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#ffce00,#ff8500);box-shadow:0 5px 12px rgba(0,0,0,.18)}.card-photo-wrap{position:relative;width:34mm;height:34mm;border:1.6mm solid #fff;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#e9f8ff,#fff);display:grid;place-items:center}.card-photo-wrap span{position:relative;z-index:1;display:grid;place-items:center;width:100%;height:100%;font-size:42px;font-weight:1000;color:#0b9cca;background:linear-gradient(135deg,#f0fbff,#fff)}.card-student-photo{position:absolute;z-index:2;inset:0;width:100%;height:100%;object-fit:cover;background:#fff}.no-photo .card-student-photo{display:none}
.student-nameplate{position:relative;z-index:3;margin:4mm auto 0;width:43mm;min-height:14.5mm;text-align:center;background:linear-gradient(90deg,#ffd21e 0%,#ffb600 34%,#ff7a00 100%);border-radius:1.2mm;box-shadow:0 3px 0 rgba(255,255,255,.82),0 9px 18px rgba(0,0,0,.15);display:grid;align-content:center;padding:1.6mm 2mm}.student-nameplate:before,.student-nameplate:after{content:"";position:absolute;top:50%;width:12mm;height:.85mm;background:#fff;transform:translateY(-50%)}.student-nameplate:before{left:-13mm}.student-nameplate:after{right:-13mm}.student-nameplate h3{margin:0;color:#fff;font-size:12px;line-height:1.05;letter-spacing:.03em;max-height:8mm;overflow:hidden;text-shadow:0 1px 2px rgba(0,0,0,.16)}.student-nameplate span{display:block;color:#fff;font-weight:1000;font-size:7.6px;letter-spacing:.13em;margin-top:.8mm;text-transform:uppercase}
.card-login-meta{position:relative;z-index:3;margin:2.8mm auto 0;width:45mm;text-align:center;color:#fff}.card-login-meta strong{display:block;font-size:7.3px;line-height:1.16;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-login-meta span{display:block;margin-top:.7mm;font-size:7px;color:rgba(255,255,255,.9);font-weight:800;text-transform:uppercase;letter-spacing:.05em}.card-login-bottom{position:absolute;z-index:4;left:4mm;right:4mm;bottom:4mm;display:grid;grid-template-columns:1fr 16mm;align-items:center;gap:2.3mm;padding:2mm;border-radius:3mm;background:rgba(255,255,255,.92);box-shadow:0 6px 15px rgba(0,0,0,.13)}.login-credentials{display:grid;grid-template-columns:1fr;gap:.6mm}.login-credentials span{font-size:5.8px;line-height:1;text-transform:uppercase;letter-spacing:.08em;color:#5e6f83;font-weight:900}.login-credentials b{font-size:8.4px;line-height:1;color:#062746;letter-spacing:.03em}.card-qr{text-align:center}.card-qr img{width:14.5mm;height:14.5mm;display:block;border:0;border-radius:1.4mm;padding:.7mm;background:#fff}.card-qr small{display:block;margin-top:.4mm;font-size:5.4px;line-height:1;color:#52677d;font-weight:900;text-transform:uppercase}.login-code-box,.login-pin-box,.card-login-body,.card-login-info{all:unset}
@media (max-width:900px){.a4-card-sheet{width:100%;min-height:auto;padding:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));grid-auto-rows:auto;gap:12px}.print-login-card{width:100%;max-width:220px;height:360px;margin:auto}.card-photo-ring{width:148px;height:148px}.card-photo-wrap{width:132px;height:132px}.student-nameplate{width:170px}.card-login-bottom{grid-template-columns:1fr 58px}.card-qr img{width:54px;height:54px}}
@media print{html,body{background:#fff!important;width:210mm;min-height:297mm}.topbar,.sidebar,.footer,.print-toolbar,.bg-bubbles,.alert{display:none!important}.admin-shell,.has-sidebar,.app-layout,.container,.app-main{display:block!important;width:210mm!important;max-width:none!important;margin:0!important;padding:0!important;background:#fff!important;box-shadow:none!important}.print-pages{display:block!important;gap:0!important}.a4-card-sheet{width:210mm!important;height:297mm!important;min-height:297mm!important;padding:8mm 13mm!important;margin:0!important;border:0!important;box-shadow:none!important;grid-template-columns:repeat(3,55mm)!important;grid-auto-rows:90mm!important;gap:4mm 5.5mm!important;align-content:start!important;justify-content:center!important;page-break-after:always!important;break-after:page!important}.a4-card-sheet:last-child{page-break-after:auto!important;break-after:auto!important}.print-login-card{width:55mm!important;height:90mm!important;border:1px dashed #4b5d73!important;box-shadow:none!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}.card-photo-ring{width:38mm!important;height:38mm!important}.card-photo-wrap{width:34mm!important;height:34mm!important}.student-nameplate{width:43mm!important}.card-login-bottom{left:4mm!important;right:4mm!important;bottom:4mm!important;grid-template-columns:1fr 16mm!important}.card-qr img{width:14.5mm!important;height:14.5mm!important}}


/* v21: refined portrait login card - smaller photo, clean identity, separated credential panel */
.print-login-card{border-radius:4mm;background:linear-gradient(160deg,#14d7b9 0%,#00adc0 46%,#078fc8 100%)}
.print-login-card:before{left:-16mm;top:-16mm;width:31mm;height:31mm;box-shadow:47mm 19mm 0 -8mm #ff8a00,55mm 69mm 0 -7mm #ffc400,4mm 84mm 0 -4mm #ff8a00}.print-login-card:after{right:-22mm;top:8mm;width:42mm;height:42mm}
.card-pattern-a{top:15mm}.card-pattern-b{bottom:18mm}.card-pattern-c{top:34mm}
.card-login-head{padding-top:4.4mm;gap:1.8mm}.card-login-head .mini-logo{width:8mm;height:8mm;border-radius:2.2mm;font-size:7.4px}.card-login-head strong{font-size:8.8px}.card-login-head small{font-size:6.2px;margin-top:.6mm}
.card-photo-stage{margin-top:2.6mm}.card-photo-ring{width:31.5mm;height:31.5mm;box-shadow:0 4px 10px rgba(0,0,0,.15)}.card-photo-wrap{width:28mm;height:28mm;border:1.25mm solid #fff}.card-photo-wrap span{font-size:32px}
.student-nameplate{margin:2.2mm auto 0;width:44mm;min-height:11.4mm;padding:1mm 1.7mm;border-radius:1.3mm;box-shadow:0 2px 0 rgba(255,255,255,.88),0 6px 13px rgba(0,0,0,.13)}.student-nameplate:before,.student-nameplate:after{height:.7mm;width:9mm}.student-nameplate:before{left:-10mm}.student-nameplate:after{right:-10mm}.student-nameplate h3{font-size:9.8px;line-height:1.04;max-height:6.2mm}.student-nameplate span{font-size:5.9px;letter-spacing:.11em;margin-top:.45mm}
.card-login-meta{margin:1.15mm auto 0;width:47mm;min-height:7.2mm;text-shadow:0 1px 2px rgba(0,0,0,.18)}.card-login-meta strong{font-size:6.4px;line-height:1.08}.card-login-meta span{font-size:6px;margin-top:.35mm;color:rgba(255,255,255,.94)}
.card-login-bottom{left:3.4mm;right:3.4mm;bottom:3.2mm;grid-template-columns:1fr 16.5mm;gap:1.45mm;padding:1.55mm 1.7mm;border-radius:2.7mm;background:rgba(255,255,255,.94);min-height:17.6mm;align-items:center}.login-credentials{gap:.45mm}.login-credentials span{font-size:5.05px;letter-spacing:.07em}.login-credentials b{font-size:7.7px;line-height:.98;letter-spacing:.02em}.card-qr img{width:15mm;height:15mm;padding:.5mm;border-radius:1.2mm}.card-qr small{font-size:4.8px;margin-top:.25mm}
@media (max-width:900px){.print-login-card{max-width:220px;height:360px}.card-photo-ring{width:126px!important;height:126px!important}.card-photo-wrap{width:112px!important;height:112px!important}.card-photo-wrap span{font-size:34px}.student-nameplate{width:176px}.student-nameplate h3{font-size:12px}.card-login-bottom{grid-template-columns:1fr 62px}.card-qr img{width:58px!important;height:58px!important}}
@media print{.card-photo-ring{width:31.5mm!important;height:31.5mm!important}.card-photo-wrap{width:28mm!important;height:28mm!important}.student-nameplate{width:44mm!important;min-height:11.4mm!important;margin-top:2.2mm!important}.student-nameplate h3{font-size:9.8px!important}.student-nameplate span{font-size:5.9px!important}.card-login-meta{margin-top:1.15mm!important;width:47mm!important;min-height:7.2mm!important}.card-login-meta strong{font-size:6.4px!important}.card-login-meta span{font-size:6px!important}.card-login-bottom{left:3.4mm!important;right:3.4mm!important;bottom:3.2mm!important;grid-template-columns:1fr 16.5mm!important;min-height:17.6mm!important;padding:1.55mm 1.7mm!important}.login-credentials span{font-size:5.05px!important}.login-credentials b{font-size:7.7px!important}.card-qr img{width:15mm!important;height:15mm!important}}

/* v14: Live Race photo avatars use student thumbnails, with initial fallback */
.lane-avatar{overflow:visible;padding:0;background:transparent!important;box-shadow:none!important;border-radius:999px}.lane-avatar>span{color:inherit}.avatar-photo-frame{position:relative;display:grid;place-items:center;border-radius:999px;overflow:hidden;background:linear-gradient(145deg,#fff,#dff9ff);box-shadow:0 18px 36px rgba(39,213,207,.32),inset 0 -10px 18px rgba(0,0,0,.10);border:4px solid rgba(255,255,255,.94);isolation:isolate}.avatar-photo-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.avatar-photo-frame b{position:relative;z-index:1;color:#071a2c;font-weight:1000;letter-spacing:.04em}.avatar-photo-frame:not(.avatar-initial) b{opacity:0}.avatar-broken b,.avatar-initial b{opacity:1}.avatar-large{width:58px;height:58px}.avatar-small{width:38px;height:38px;border-width:2px;box-shadow:0 8px 18px rgba(0,0,0,.18)}.avatar-small b{font-size:12px}.lane-color-blue .avatar-photo-frame{box-shadow:0 18px 36px rgba(120,183,255,.32);border-color:#cfe6ff}.lane-color-gold .avatar-photo-frame{box-shadow:0 18px 36px rgba(255,207,102,.32);border-color:#ffe39e}.lane-color-pink .avatar-photo-frame{box-shadow:0 18px 36px rgba(255,124,171,.32);border-color:#ffd3e3}.lane-color-violet .avatar-photo-frame{box-shadow:0 18px 36px rgba(183,140,255,.32);border-color:#eadcff}.lane-color-lime .avatar-photo-frame{box-shadow:0 18px 36px rgba(141,255,138,.32);border-color:#d9ffd7}.lane-color-orange .avatar-photo-frame{box-shadow:0 18px 36px rgba(255,154,98,.32);border-color:#ffe0cf}.lane-color-cyan .avatar-photo-frame{box-shadow:0 18px 36px rgba(120,243,255,.32);border-color:#d7fbff}.trend-up .avatar-photo-frame{animation:photoBoost .9s ease}.trend-down .avatar-photo-frame{animation:photoError .55s ease}@keyframes photoBoost{40%{transform:scale(1.16);filter:brightness(1.18) saturate(1.08)}}@keyframes photoError{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}.rank-row{grid-template-columns:44px 42px minmax(0,1fr) auto}.rank-row .avatar-photo-frame{justify-self:center}.rank-row>span:first-child{width:38px;height:38px}.live-lane::after{content:'';position:absolute;left:calc(226px + (100% - 226px - 232px) * var(--progress) / 100);top:8px;width:74px;height:74px;border-radius:999px;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 62%);opacity:.75;pointer-events:none;transition:left .9s cubic-bezier(.2,.85,.2,1)}
@media (max-width:640px){.avatar-large{width:50px;height:50px}.avatar-small{width:34px;height:34px}.rank-row{grid-template-columns:38px 36px 1fr auto}.live-lane::after{display:none}}

/* v15: Live Race compact responsive layout + fullscreen display mode */
.live-hero .page-actions{align-items:center}.btn-small{padding:8px 12px;font-size:12px;border-radius:14px}.live-race-stage.live-race-compact{grid-template-columns:minmax(0,1fr) clamp(230px,23vw,300px);gap:14px;min-height:560px;padding:18px;border-radius:30px}.live-race-stage .race-camera{min-width:0;min-height:520px;padding:16px}.live-race-stage .live-sideboard{min-width:0;padding:16px;border-radius:24px}.live-race-stage .race-skyline{margin-bottom:12px}.live-race-stage .race-lanes{gap:9px}.live-race-stage .live-lane{grid-template-columns:minmax(118px,160px) minmax(160px,1fr) minmax(72px,96px);gap:10px;min-height:54px;padding:8px 50px 8px 12px;border-radius:18px}.live-race-stage .lane-meta strong{font-size:13px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.live-race-stage .lane-meta small{font-size:10.5px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.live-race-stage .lane-road{height:30px}.live-race-stage .lane-stats b{font-size:12px;line-height:1.1}.live-race-stage .lane-stats span{font-size:10px;line-height:1.15}.live-race-stage .lane-avatar{width:46px;height:46px;top:-8px;left:calc((100% - 46px) * var(--progress) / 100)}.live-race-stage .avatar-large{width:46px;height:46px;border-width:3px}.live-race-stage .avatar-large b{font-size:13px}.live-race-stage .finish-gate{right:18px;top:88px;bottom:20px}.live-race-stage .finish-gate span{right:-14px;font-size:10px;padding:6px 8px}.live-race-stage .live-lane::after{left:calc(160px + (100% - 160px - 126px) * var(--progress) / 100);top:6px;width:46px;height:46px}.live-stage-toolbar{position:absolute;right:16px;top:16px;z-index:20;display:flex;gap:8px;align-items:center}.live-exit-btn{display:none}.live-race-stage .rank-row{grid-template-columns:34px 36px minmax(0,1fr) auto;gap:8px;padding:8px;border-radius:14px}.live-race-stage .rank-row>span:first-child{width:32px;height:32px;border-radius:11px;font-size:12px}.live-race-stage .avatar-small{width:32px;height:32px;border-width:2px}.live-race-stage .rank-row b{font-size:12px;line-height:1.05}.live-race-stage .rank-row small{font-size:10px;max-width:120px}.live-race-stage .rank-row strong{font-size:12px;white-space:nowrap}.live-race-stage.density-medium .race-lanes{gap:7px}.live-race-stage.density-medium .live-lane{min-height:48px;padding-top:7px;padding-bottom:7px}.live-race-stage.density-medium .lane-road{height:26px}.live-race-stage.density-medium .lane-avatar,.live-race-stage.density-medium .avatar-large{width:40px;height:40px}.live-race-stage.density-medium .lane-avatar{top:-7px;left:calc((100% - 40px) * var(--progress) / 100)}.live-race-stage.density-medium .lane-stats span{display:none}.live-race-stage.density-high .race-lanes{gap:6px}.live-race-stage.density-high .live-lane{grid-template-columns:minmax(105px,142px) minmax(140px,1fr) 58px;min-height:42px;padding:6px 40px 6px 10px;border-radius:15px}.live-race-stage.density-high .lane-meta strong{font-size:11.5px}.live-race-stage.density-high .lane-meta small{font-size:9.5px}.live-race-stage.density-high .lane-road{height:22px}.live-race-stage.density-high .lane-avatar,.live-race-stage.density-high .avatar-large{width:34px;height:34px}.live-race-stage.density-high .lane-avatar{top:-6px;left:calc((100% - 34px) * var(--progress) / 100)}.live-race-stage.density-high .lane-stats b{font-size:11px}.live-race-stage.density-high .lane-stats span{display:none}.live-race-stage.density-high .live-lane::after{display:none}.live-race-stage.density-high .rank-row{padding:7px;grid-template-columns:30px 32px minmax(0,1fr) auto}.live-race-stage.density-high .rank-row small{display:none}.live-race-stage.density-high .rank-row b{font-size:11.5px}.live-race-stage.density-high .rank-row strong{font-size:11.5px}.live-race-stage.density-high .avatar-small{width:30px;height:30px}.live-race-stage.density-ultra .live-sideboard .rank-row:nth-child(n+16){display:none}.live-race-stage.density-ultra .race-lanes{gap:4px}.live-race-stage.density-ultra .live-lane{min-height:36px;padding:5px 34px 5px 9px;grid-template-columns:minmax(92px,126px) minmax(120px,1fr) 46px}.live-race-stage.density-ultra .lane-meta strong{font-size:10.5px}.live-race-stage.density-ultra .lane-meta small{display:none}.live-race-stage.density-ultra .lane-road{height:18px}.live-race-stage.density-ultra .lane-avatar,.live-race-stage.density-ultra .avatar-large{width:28px;height:28px;border-width:2px}.live-race-stage.density-ultra .lane-avatar{top:-5px;left:calc((100% - 28px) * var(--progress) / 100)}.live-race-stage.density-ultra .lane-stats b{font-size:10px}.live-race-stage.density-ultra .lane-stats span{display:none}
.live-race-stage:fullscreen,.live-race-stage.is-fullscreen{width:100vw!important;height:100vh!important;min-height:100vh!important;max-width:none!important;margin:0!important;border-radius:0!important;padding:18px!important;grid-template-columns:minmax(0,1fr) clamp(220px,22vw,330px)!important;gap:14px!important;background:radial-gradient(circle at 15% 8%,rgba(44,223,210,.28),transparent 30%),linear-gradient(135deg,#081d38,#073e67 54%,#3c41d6)!important}.live-race-stage:fullscreen .live-stage-toolbar,.live-race-stage.is-fullscreen .live-stage-toolbar{right:18px;top:18px}.live-race-stage:fullscreen .live-exit-btn,.live-race-stage.is-fullscreen .live-exit-btn{display:inline-flex}.live-race-stage:fullscreen .race-camera,.live-race-stage.is-fullscreen .race-camera{height:calc(100vh - 36px)!important;min-height:0!important;border-radius:26px!important;overflow:hidden!important}.live-race-stage:fullscreen .live-sideboard,.live-race-stage.is-fullscreen .live-sideboard{height:calc(100vh - 36px)!important;min-height:0!important;overflow:hidden!important}.live-race-stage:fullscreen .race-skyline,.live-race-stage.is-fullscreen .race-skyline{padding-right:160px}.live-race-stage:fullscreen .race-lanes,.live-race-stage.is-fullscreen .race-lanes{gap:7px}.live-race-stage:fullscreen .live-lane,.live-race-stage.is-fullscreen .live-lane{min-height:44px}.live-race-stage:fullscreen.density-ultra .live-lane,.live-race-stage.is-fullscreen.density-ultra .live-lane{min-height:34px}.live-race-stage:fullscreen.density-ultra .race-lanes,.live-race-stage.is-fullscreen.density-ultra .race-lanes{gap:3px}.live-race-stage:fullscreen .finish-gate,.live-race-stage.is-fullscreen .finish-gate{top:74px;bottom:18px}.live-race-stage:fullscreen .live-sideboard .rank-row:nth-child(n+22),.live-race-stage.is-fullscreen .live-sideboard .rank-row:nth-child(n+22){display:none}body.live-fullscreen-active{overflow:hidden}.live-fullscreen-fallback{position:fixed!important;inset:0!important;z-index:9999!important}
@media (max-width:1180px){.live-race-stage.live-race-compact{grid-template-columns:1fr}.live-race-stage .live-sideboard{order:2}.live-race-stage .live-lane{grid-template-columns:minmax(120px,170px) minmax(160px,1fr) minmax(66px,90px)}}
@media (max-width:760px){.live-race-stage.live-race-compact{padding:12px;border-radius:22px}.live-stage-toolbar{position:static;margin:0 0 10px auto;justify-content:flex-end}.live-race-stage .race-camera{padding:12px;border-radius:20px}.live-race-stage .race-lanes{transform:none}.live-race-stage .live-lane{grid-template-columns:1fr;gap:8px;min-height:112px;padding:10px}.live-race-stage .lane-stats{text-align:left}.live-race-stage .lane-stats span{display:block}.live-race-stage .lane-road{height:30px}.live-race-stage .finish-gate,.live-race-stage .live-lane::after{display:none}.live-race-stage .live-sideboard .rank-row{grid-template-columns:34px 34px 1fr auto}}

/* v16: Live Race practice focus mode - one active student uses a spacious focus card */
.live-race-stage.focus-mode{
  grid-template-columns:minmax(0,1fr) clamp(240px,22vw,320px);
}
.live-race-stage.focus-mode .race-camera{
  display:grid;
  grid-template-rows:auto 1fr;
  overflow:hidden;
}
.live-race-stage.focus-mode .race-lanes{
  display:grid;
  place-items:center;
  min-height:420px;
  transform:none;
}
.live-race-stage.focus-mode .finish-gate{display:none}
.focus-racer-card{
  width:min(760px,100%);
  border-radius:34px;
  padding:28px;
  background:
    radial-gradient(circle at 18% 12%,rgba(52,221,211,.30),transparent 32%),
    radial-gradient(circle at 84% 28%,rgba(255,152,43,.18),transparent 28%),
    linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 28px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.20);
  color:#fff;
}
.focus-racer-hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;margin-bottom:22px}.focus-racer-avatar{position:relative}.avatar-focus{width:132px;height:132px;border-width:7px;box-shadow:0 26px 70px rgba(43,225,210,.35),0 0 0 12px rgba(255,255,255,.08)}.avatar-focus b{font-size:38px}.focus-kicker{display:inline-flex;border-radius:999px;padding:7px 11px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.20);font-weight:1000;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#bffcff}.focus-racer-main h2{margin:10px 0 4px;font-size:clamp(28px,4.5vw,48px);line-height:1.02;letter-spacing:-.04em}.focus-racer-main p{margin:0 0 8px;color:rgba(255,255,255,.75);font-weight:800}.focus-racer-main b{display:block;color:#fff;font-size:16px}.focus-progress-wrap{margin:12px 0 22px}.focus-progress-label{display:flex;justify-content:space-between;gap:12px;margin-bottom:9px;font-weight:1000}.focus-progress-label span{color:rgba(255,255,255,.72)}.focus-progress{height:24px;border-radius:999px;background:rgba(3,17,39,.42);border:1px solid rgba(255,255,255,.14);overflow:hidden;box-shadow:inset 0 10px 22px rgba(0,0,0,.16)}.focus-progress i{display:block;width:calc(var(--progress) * 1%);height:100%;border-radius:inherit;background:linear-gradient(90deg,#25ded3,#87f7ff,#ffb03a);box-shadow:0 0 28px rgba(43,225,210,.48);transition:width .9s cubic-bezier(.2,.85,.2,1)}.focus-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.focus-stats div{border-radius:20px;padding:15px 12px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);text-align:center}.focus-stats b{display:block;font-size:24px;line-height:1;color:#bffcff}.focus-stats span{display:block;margin-top:6px;color:rgba(255,255,255,.68);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.07em}.focus-waiting{margin-top:16px;border-radius:18px;padding:12px 14px;background:rgba(255,255,255,.10);border:1px dashed rgba(255,255,255,.24);color:rgba(255,255,255,.78);font-weight:800;text-align:center}.rank-row.focus-single{background:linear-gradient(135deg,rgba(44,223,210,.18),rgba(255,255,255,.08));border-color:rgba(44,223,210,.34)}.live-race-stage:fullscreen.focus-mode .race-lanes,.live-race-stage.is-fullscreen.focus-mode .race-lanes{min-height:calc(100vh - 120px)}.live-race-stage:fullscreen.focus-mode .focus-racer-card,.live-race-stage.is-fullscreen.focus-mode .focus-racer-card{width:min(980px,100%);padding:34px}.live-race-stage:fullscreen.focus-mode .avatar-focus,.live-race-stage.is-fullscreen.focus-mode .avatar-focus{width:150px;height:150px}
@media (max-width:900px){.live-race-stage.focus-mode{grid-template-columns:1fr}.focus-racer-card{padding:22px}.focus-racer-hero{grid-template-columns:1fr;text-align:center}.focus-racer-avatar{display:grid;place-items:center}.focus-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.avatar-focus{width:104px;height:104px}.focus-racer-main h2{font-size:28px}.focus-stats{gap:8px}.focus-stats div{padding:12px 8px}.focus-stats b{font-size:20px}}

/* v17 Practice Reports */
.report-filter{grid-template-columns:repeat(6,minmax(120px,1fr)) auto auto;align-items:end;gap:12px}
.report-stats .stat-card small{font-size:.72em;font-weight:800;opacity:.8;margin-left:4px}.compact-stats .stat-card{min-height:92px}.accent-blue{background:linear-gradient(135deg,#e0f7ff,#fff)}.accent-green{background:linear-gradient(135deg,#dfffee,#fff)}.accent-orange{background:linear-gradient(135deg,#fff0d7,#fff)}.accent-purple{background:linear-gradient(135deg,#efe5ff,#fff)}
.report-card{min-height:210px}.top-lesson-list li{display:flex;justify-content:space-between;gap:12px;align-items:center}.top-lesson-list span{font-weight:800;color:#0891b2;background:#e0f7ff;border-radius:999px;padding:5px 10px;font-size:12px}.status-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}.status-dot{border-radius:14px;padding:10px 12px;font-weight:800;font-size:12px;display:block}.report-status{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:900;white-space:nowrap}.status-very-active{background:#dcfce7;color:#166534}.status-active{background:#e0f2fe;color:#075985}.status-watch{background:#fef3c7;color:#92400e}.status-empty{background:#fee2e2;color:#991b1b}.section-title-row{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:12px}.card table small{display:block;color:#6b7b93;font-size:11px;margin-top:3px;line-height:1.25}.card table b{font-weight:900}
@media (max-width:1200px){.report-filter{grid-template-columns:repeat(3,minmax(0,1fr))}.report-filter .btn{width:100%}}
@media (max-width:720px){.report-filter{grid-template-columns:1fr}.status-legend{grid-template-columns:1fr}.section-title-row{display:block}.report-stats{grid-template-columns:1fr 1fr}.compact-stats{grid-template-columns:1fr!important}}
@media print{.topbar,.sidebar,.footer,.filter-card,.page-actions,.bg-bubbles{display:none!important}.app-layout{display:block!important}.app-main,.container{max-width:100%!important;margin:0!important;padding:0!important}.card{box-shadow:none!important;border:1px solid #d7e3f0!important;page-break-inside:avoid}.page-head{box-shadow:none!important;background:#fff!important;color:#111!important}.table-wrap{overflow:visible!important}body{background:#fff!important}}

/* v18 Typing Experience: tutor UI, sound control, result overlay */
.arena-hud-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}.sound-toggle{border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 14px;font-weight:900;color:var(--text);box-shadow:var(--soft);cursor:pointer}.sound-toggle[aria-pressed="true"]{background:linear-gradient(135deg,#fff7de,#eafffb);border-color:#ffd777;color:#845500}.track-progress{position:absolute;left:30px;top:55px;height:4px;width:0;background:linear-gradient(90deg,#ffb020,#21c4a7,#139ee8);border-radius:999px;box-shadow:0 0 16px rgba(19,158,232,.28);transition:width .28s ease}.tutor-strip{display:grid;grid-template-columns:180px 210px 1fr;gap:12px;margin-bottom:14px}.tutor-strip>div{background:linear-gradient(135deg,#f8fbff,#eefcff);border:1px solid var(--line);border-radius:18px;padding:12px 14px}.mini-label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:1000;margin-bottom:5px}.tutor-strip strong{font-size:15px;color:var(--text)}#nextKeyHint{display:inline-flex;min-width:46px;min-height:34px;padding:5px 10px;border-radius:12px;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);box-shadow:var(--soft);font-size:22px}.typing-progress{height:11px;background:#edf4ff;border-radius:999px;overflow:hidden;margin-top:13px;border:1px solid var(--line)}.typing-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#139ee8,#21c4a7,#ffb020);border-radius:999px;transition:width .25s ease}.target-text span{display:inline-block;min-width:.25em;transition:background .12s,color .12s,transform .12s}.target-text span.ok{background:rgba(33,196,167,.13);border-radius:5px;color:#0a8755}.target-text span.bad{background:rgba(222,54,89,.13);border-radius:5px;color:#c51f46;text-decoration:none;animation:keyMistake .15s ease}.target-text span.current{background:#ffe8a8;color:#5f4100;box-shadow:0 0 0 2px rgba(255,176,32,.25);border-radius:6px}@keyframes keyMistake{0%,100%{transform:translateX(0)}35%{transform:translateX(-2px)}70%{transform:translateX(2px)}}.player-runner.runner-error{animation:runnerError .28s ease!important}@keyframes runnerError{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px) rotate(-6deg);filter:drop-shadow(0 0 8px rgba(222,54,89,.55))}60%{transform:translateX(4px) rotate(5deg)}}.keyboard-visual{background:linear-gradient(135deg,#ffffff,#f5f9ff);border:1px solid var(--line);border-radius:24px;padding:16px;box-shadow:var(--soft)}.key-row span{position:relative;transition:transform .18s ease, box-shadow .18s ease, background .18s ease}.key-row span.active{transform:translateY(-4px) scale(1.08);box-shadow:0 14px 26px rgba(19,158,232,.24)}.key-space{min-width:260px!important}.finger-lp{--finger:#ff7b9c}.finger-lr{--finger:#ffb020}.finger-lm{--finger:#8b5cf6}.finger-li{--finger:#139ee8}.finger-thumb{--finger:#21c4a7}.finger-ri{--finger:#06b6d4}.finger-rm{--finger:#6366f1}.finger-rr{--finger:#f97316}.finger-rp{--finger:#ef4444}.key-row span[class*="finger-"]{border-bottom:4px solid var(--finger)}.key-row span.active[class*="finger-"]{background:linear-gradient(135deg,var(--finger),#139ee8);color:#fff;border-color:transparent}.finger-legend{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:10px}.finger-legend span{font-size:10px;font-weight:900;border-radius:999px;color:#0f172a;padding:6px 9px;background:color-mix(in srgb,var(--finger) 18%,#fff);border:1px solid color-mix(in srgb,var(--finger) 35%,#fff)}.arena-result-modal{position:fixed;inset:0;background:rgba(15,23,42,.35);backdrop-filter:blur(8px);display:grid;place-items:center;z-index:9999;padding:20px}.arena-result-modal[hidden]{display:none}.arena-result-card{width:min(520px,92vw);background:#fff;border-radius:32px;padding:28px;text-align:center;box-shadow:0 28px 90px rgba(15,23,42,.25);border:1px solid rgba(255,255,255,.8)}.result-stars{font-size:42px;margin-bottom:8px;letter-spacing:6px}.arena-result-card h2{margin:0 0 8px;font-size:30px}.arena-result-card p{color:var(--muted);line-height:1.55}.result-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}.result-mini span{background:#f5f9ff;border:1px solid var(--line);border-radius:18px;padding:12px;font-size:12px;color:var(--muted);font-weight:900}.result-mini b{display:block;color:var(--primary);font-size:24px;margin-bottom:3px}@media(max-width:900px){.arena-hud{align-items:flex-start}.arena-hud-actions{width:100%;justify-content:space-between}.sound-toggle{padding:9px 12px}.tutor-strip{grid-template-columns:1fr}.key-space{min-width:160px!important}.finger-legend{justify-content:flex-start}.result-mini{grid-template-columns:1fr}}

/* v19: Password/PIN eye toggle + typing focus/fullscreen mode */
.password-field{position:relative;display:flex;align-items:center;width:100%}.password-field input{width:100%;padding-right:52px!important}.password-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:14px;background:#eef7ff;color:#214d6b;font-size:17px;display:grid;place-items:center;cursor:pointer;box-shadow:none}.password-eye:hover{background:#dff4ff}.password-eye:focus{outline:3px solid rgba(19,158,232,.22);outline-offset:2px}.focus-toggle{border:1px solid var(--line);background:linear-gradient(135deg,#fff,#eefcff);border-radius:999px;padding:10px 14px;font-weight:900;color:#17445f;box-shadow:var(--soft);cursor:pointer}.focus-toggle[aria-pressed="true"]{background:linear-gradient(135deg,#13335d,#139ee8);color:#fff;border-color:rgba(255,255,255,.25)}.arena-shell:fullscreen,.arena-shell.arena-focus-fallback{width:100vw!important;height:100vh!important;min-height:100vh!important;max-width:none!important;margin:0!important;padding:18px clamp(14px,2vw,28px)!important;background:linear-gradient(180deg,#eefbff,#f8fbff)!important;overflow:auto!important}.arena-shell:fullscreen .arena-hud,.arena-shell.arena-focus-fallback .arena-hud{position:sticky;top:0;z-index:10;margin:-18px calc(clamp(14px,2vw,28px) * -1) 14px;padding:14px clamp(14px,2vw,28px);background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}.arena-shell:fullscreen .arena-hud h1,.arena-shell.arena-focus-fallback .arena-hud h1{font-size:clamp(22px,2.4vw,36px)}.arena-shell:fullscreen .timer,.arena-shell.arena-focus-fallback .timer{font-size:clamp(30px,4vw,50px);padding:10px 16px}.arena-shell:fullscreen .race-track,.arena-shell.arena-focus-fallback .race-track{height:92px;margin-bottom:12px}.arena-shell:fullscreen .typing-panel,.arena-shell.arena-focus-fallback .typing-panel{padding:18px;border-radius:24px}.arena-shell:fullscreen .target-text,.arena-shell.arena-focus-fallback .target-text{font-size:clamp(19px,2.05vw,28px);line-height:1.95;max-height:32vh;padding:18px}.arena-shell:fullscreen #typingInput,.arena-shell.arena-focus-fallback #typingInput{min-height:120px;font-size:clamp(18px,1.7vw,24px)}.arena-shell:fullscreen .keyboard-visual,.arena-shell.arena-focus-fallback .keyboard-visual{padding:12px;margin-top:12px}.arena-shell:fullscreen .key-row span,.arena-shell.arena-focus-fallback .key-row span{min-width:clamp(34px,3.3vw,52px);padding:9px 10px}.arena-shell:fullscreen .metrics,.arena-shell.arena-focus-fallback .metrics{margin:12px 0}.arena-shell:fullscreen .metrics div,.arena-shell.arena-focus-fallback .metrics div{padding:12px}.arena-shell:fullscreen .metrics b,.arena-shell.arena-focus-fallback .metrics b{font-size:clamp(22px,2.2vw,34px)}.arena-shell:fullscreen .tutor-strip,.arena-shell.arena-focus-fallback .tutor-strip{grid-template-columns:160px 190px 1fr;margin-bottom:10px}.arena-shell:fullscreen .footer,.arena-shell.arena-focus-fallback .footer{display:none}@media(max-width:760px){.password-eye{width:42px;height:42px;right:6px}.password-field input{padding-right:56px!important}.arena-shell:fullscreen,.arena-shell.arena-focus-fallback{padding:12px!important}.arena-shell:fullscreen .arena-hud,.arena-shell.arena-focus-fallback .arena-hud{margin:-12px -12px 12px;padding:12px}.arena-hud-actions{gap:8px}.focus-toggle,.sound-toggle{padding:9px 10px;font-size:12px}.arena-shell:fullscreen .tutor-strip,.arena-shell.arena-focus-fallback .tutor-strip{grid-template-columns:1fr}.arena-shell:fullscreen .target-text,.arena-shell.arena-focus-fallback .target-text{max-height:36vh}.arena-shell:fullscreen .key-row span,.arena-shell.arena-focus-fallback .key-row span{min-width:34px;font-size:12px}.arena-shell:fullscreen .key-space,.arena-shell.arena-focus-fallback .key-space{min-width:150px!important}}

/* v20: Fit-to-screen focus mode for typing arena. The fullscreen view is a dedicated compact 100vh layout with no page scroll. */
html.arena-focus-page,
html.arena-focus-page body{overflow:hidden!important;height:100%!important}
.arena-shell:fullscreen,
.arena-shell.arena-focus-fallback{
  position:relative!important;
  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;
  min-height:0!important;
  max-width:none!important;
  margin:0!important;
  padding:clamp(6px,1.1vh,12px) clamp(8px,1.4vw,18px)!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-rows:auto clamp(38px,8vh,68px) minmax(0,1fr) clamp(72px,18vh,138px)!important;
  gap:clamp(4px,.9vh,10px)!important;
  background:linear-gradient(180deg,#eefbff,#f8fbff)!important;
}
.arena-shell.arena-focus-fallback{position:fixed!important;inset:0!important;z-index:99990!important}
.arena-shell:fullscreen *,.arena-shell.arena-focus-fallback *{box-sizing:border-box}
.arena-shell:fullscreen .arena-hud,
.arena-shell.arena-focus-fallback .arena-hud{
  position:static!important;
  top:auto!important;
  z-index:auto!important;
  margin:0!important;
  min-height:0!important;
  padding:clamp(6px,1vh,10px) clamp(8px,1vw,12px)!important;
  border-radius:18px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;
  background:rgba(255,255,255,.94)!important;
  border:1px solid var(--line)!important;
  box-shadow:0 10px 28px rgba(15,23,42,.08)!important;
  overflow:hidden!important;
}
.arena-shell:fullscreen .arena-hud .muted,
.arena-shell.arena-focus-fallback .arena-hud .muted{display:none!important}
.arena-shell:fullscreen .arena-hud h1,
.arena-shell.arena-focus-fallback .arena-hud h1{
  font-size:clamp(15px,1.65vw,24px)!important;
  line-height:1.08!important;
  margin:3px 0 0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.arena-shell:fullscreen .pill,
.arena-shell.arena-focus-fallback .pill{font-size:9px!important;padding:5px 8px!important}
.arena-shell:fullscreen .arena-hud-actions,
.arena-shell.arena-focus-fallback .arena-hud-actions{gap:6px!important;flex-wrap:nowrap!important;justify-content:flex-end!important}
.arena-shell:fullscreen .focus-toggle,
.arena-shell:fullscreen .sound-toggle,
.arena-shell.arena-focus-fallback .focus-toggle,
.arena-shell.arena-focus-fallback .sound-toggle{
  padding:7px 10px!important;
  font-size:12px!important;
  line-height:1!important;
  box-shadow:none!important;
}
.arena-shell:fullscreen .timer,
.arena-shell.arena-focus-fallback .timer{
  font-size:clamp(22px,3vw,36px)!important;
  padding:6px 12px!important;
  min-width:92px!important;
  text-align:center!important;
  line-height:1!important;
}
.arena-shell:fullscreen .race-track,
.arena-shell.arena-focus-fallback .race-track{
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  border-radius:18px!important;
  overflow:hidden!important;
}
.arena-shell:fullscreen .finish-flag,
.arena-shell.arena-focus-fallback .finish-flag{font-size:20px!important;right:10px!important;top:8px!important}
.arena-shell:fullscreen .track-line,
.arena-shell.arena-focus-fallback .track-line{left:18px!important;right:42px!important;top:50%!important}
.arena-shell:fullscreen .track-progress,
.arena-shell.arena-focus-fallback .track-progress{left:18px!important;right:auto!important;top:50%!important}
.arena-shell:fullscreen .player-runner,
.arena-shell.arena-focus-fallback .player-runner{width:38px!important;height:38px!important;top:50%!important;margin-top:-19px!important}
.arena-shell:fullscreen .player-runner span,
.arena-shell.arena-focus-fallback .player-runner span{font-size:14px!important}
.arena-shell:fullscreen .typing-panel,
.arena-shell.arena-focus-fallback .typing-panel{
  min-height:0!important;
  height:100%!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr) minmax(70px,22vh,150px) auto auto!important;
  gap:clamp(5px,.9vh,9px)!important;
  padding:clamp(8px,1.1vh,14px)!important;
  border-radius:20px!important;
}
.arena-shell:fullscreen .tutor-strip,
.arena-shell.arena-focus-fallback .tutor-strip{
  display:grid!important;
  grid-template-columns:112px 142px minmax(0,1fr)!important;
  gap:6px!important;
  margin:0!important;
  min-height:0!important;
}
.arena-shell:fullscreen .tutor-strip>div,
.arena-shell.arena-focus-fallback .tutor-strip>div{
  padding:6px 8px!important;
  border-radius:12px!important;
  overflow:hidden!important;
  min-width:0!important;
}
.arena-shell:fullscreen .mini-label,
.arena-shell.arena-focus-fallback .mini-label{font-size:8px!important;margin-bottom:3px!important;letter-spacing:.05em!important;white-space:nowrap!important}
.arena-shell:fullscreen .tutor-strip strong,
.arena-shell.arena-focus-fallback .tutor-strip strong{font-size:12px!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.arena-shell:fullscreen #nextKeyHint,
.arena-shell.arena-focus-fallback #nextKeyHint{min-width:30px!important;min-height:24px!important;font-size:17px!important;padding:2px 7px!important;border-radius:8px!important}
.arena-shell:fullscreen .target-text,
.arena-shell.arena-focus-fallback .target-text{
  height:100%!important;
  max-height:none!important;
  min-height:0!important;
  overflow:hidden!important;
  font-size:clamp(14px,1.35vw,21px)!important;
  line-height:1.52!important;
  padding:clamp(8px,1.1vh,14px)!important;
  border-radius:16px!important;
}
.arena-shell:fullscreen #typingInput,
.arena-shell.arena-focus-fallback #typingInput{
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  resize:none!important;
  font-size:clamp(14px,1.2vw,20px)!important;
  line-height:1.42!important;
  padding:10px 12px!important;
  border-radius:16px!important;
}
.arena-shell:fullscreen .typing-progress,
.arena-shell.arena-focus-fallback .typing-progress{height:8px!important;margin:0!important}
.arena-shell:fullscreen .metrics,
.arena-shell.arena-focus-fallback .metrics{
  margin:0!important;
  gap:6px!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
.arena-shell:fullscreen .metrics div,
.arena-shell.arena-focus-fallback .metrics div{padding:6px 7px!important;border-radius:13px!important}
.arena-shell:fullscreen .metrics b,
.arena-shell.arena-focus-fallback .metrics b{font-size:clamp(16px,1.8vw,26px)!important;line-height:1!important}
.arena-shell:fullscreen .metrics span,
.arena-shell.arena-focus-fallback .metrics span{font-size:9px!important;margin-top:3px!important;letter-spacing:.05em!important}
.arena-shell:fullscreen .arena-actions,
.arena-shell.arena-focus-fallback .arena-actions{margin:0!important;gap:6px!important}
.arena-shell:fullscreen .arena-actions .btn,
.arena-shell.arena-focus-fallback .arena-actions .btn{padding:8px 12px!important;font-size:12px!important;border-radius:14px!important;min-height:0!important}
.arena-shell:fullscreen .keyboard-visual,
.arena-shell.arena-focus-fallback .keyboard-visual{
  min-height:0!important;
  height:100%!important;
  overflow:hidden!important;
  padding:clamp(5px,.9vh,8px)!important;
  margin:0!important;
  border-radius:18px!important;
  display:grid!important;
  align-content:center!important;
  gap:3px!important;
}
.arena-shell:fullscreen .key-row,
.arena-shell.arena-focus-fallback .key-row{display:flex!important;justify-content:center!important;gap:4px!important;margin:0!important;min-height:0!important}
.arena-shell:fullscreen .key-row span,
.arena-shell.arena-focus-fallback .key-row span{
  min-width:clamp(24px,2.55vw,42px)!important;
  padding:5px 7px!important;
  font-size:clamp(10px,1vw,13px)!important;
  border-radius:10px!important;
  border-bottom-width:3px!important;
}
.arena-shell:fullscreen .key-space,
.arena-shell.arena-focus-fallback .key-space{min-width:clamp(110px,20vw,210px)!important}
.arena-shell:fullscreen .finger-legend,
.arena-shell.arena-focus-fallback .finger-legend{display:none!important}

/* Automatic density classes from arena.js */
.arena-shell.focus-compact:fullscreen,
.arena-shell.focus-compact.arena-focus-fallback{grid-template-rows:auto 38px minmax(0,1fr) 96px!important;gap:5px!important;padding:6px 10px!important}
.arena-shell.focus-compact:fullscreen .tutor-strip,
.arena-shell.focus-compact.arena-focus-fallback .tutor-strip{grid-template-columns:92px 128px minmax(0,1fr)!important}
.arena-shell.focus-compact:fullscreen .target-text,
.arena-shell.focus-compact.arena-focus-fallback .target-text{font-size:clamp(13px,1.15vw,18px)!important;line-height:1.42!important;padding:8px!important}
.arena-shell.focus-compact:fullscreen #typingInput,
.arena-shell.focus-compact.arena-focus-fallback #typingInput{font-size:clamp(13px,1.05vw,17px)!important;padding:8px!important}
.arena-shell.focus-compact:fullscreen .keyboard-visual,
.arena-shell.focus-compact.arena-focus-fallback .keyboard-visual{padding:5px!important}
.arena-shell.focus-compact:fullscreen .key-row span,
.arena-shell.focus-compact.arena-focus-fallback .key-row span{min-width:clamp(22px,2.1vw,34px)!important;padding:3px 5px!important;font-size:11px!important;border-bottom-width:2px!important}
.arena-shell.focus-compact:fullscreen .key-space,
.arena-shell.focus-compact.arena-focus-fallback .key-space{min-width:clamp(90px,16vw,160px)!important}
.arena-shell.focus-tight:fullscreen,
.arena-shell.focus-tight.arena-focus-fallback{grid-template-rows:auto 30px minmax(0,1fr) 68px!important;gap:4px!important;padding:5px 8px!important}
.arena-shell.focus-tight:fullscreen .arena-hud,
.arena-shell.focus-tight.arena-focus-fallback .arena-hud{padding:5px 7px!important;border-radius:14px!important}
.arena-shell.focus-tight:fullscreen .arena-hud h1,
.arena-shell.focus-tight.arena-focus-fallback .arena-hud h1{font-size:14px!important;margin:0!important}
.arena-shell.focus-tight:fullscreen .pill,
.arena-shell.focus-tight.arena-focus-fallback .pill{display:none!important}
.arena-shell.focus-tight:fullscreen .timer,
.arena-shell.focus-tight.arena-focus-fallback .timer{font-size:20px!important;min-width:72px!important;padding:5px 8px!important}
.arena-shell.focus-tight:fullscreen .focus-toggle,
.arena-shell.focus-tight:fullscreen .sound-toggle,
.arena-shell.focus-tight.arena-focus-fallback .focus-toggle,
.arena-shell.focus-tight.arena-focus-fallback .sound-toggle{font-size:11px!important;padding:6px 8px!important}
.arena-shell.focus-tight:fullscreen .player-runner,
.arena-shell.focus-tight.arena-focus-fallback .player-runner{width:28px!important;height:28px!important;margin-top:-14px!important}
.arena-shell.focus-tight:fullscreen .typing-panel,
.arena-shell.focus-tight.arena-focus-fallback .typing-panel{grid-template-rows:auto minmax(0,1fr) minmax(58px,20vh,110px) auto auto!important;padding:6px!important;gap:4px!important;border-radius:16px!important}
.arena-shell.focus-tight:fullscreen .tutor-strip,
.arena-shell.focus-tight.arena-focus-fallback .tutor-strip{grid-template-columns:76px 112px!important;gap:4px!important}
.arena-shell.focus-tight:fullscreen .tutor-strip>div:nth-child(3),
.arena-shell.focus-tight.arena-focus-fallback .tutor-strip>div:nth-child(3){display:none!important}
.arena-shell.focus-tight:fullscreen .tutor-strip>div,
.arena-shell.focus-tight.arena-focus-fallback .tutor-strip>div{padding:4px 6px!important;border-radius:10px!important}
.arena-shell.focus-tight:fullscreen .target-text,
.arena-shell.focus-tight.arena-focus-fallback .target-text{font-size:12.5px!important;line-height:1.33!important;padding:6px!important;border-radius:12px!important}
.arena-shell.focus-tight:fullscreen #typingInput,
.arena-shell.focus-tight.arena-focus-fallback #typingInput{font-size:13px!important;line-height:1.3!important;padding:6px 8px!important;border-radius:12px!important}
.arena-shell.focus-tight:fullscreen .metrics div,
.arena-shell.focus-tight.arena-focus-fallback .metrics div{padding:4px!important;border-radius:10px!important}
.arena-shell.focus-tight:fullscreen .metrics b,
.arena-shell.focus-tight.arena-focus-fallback .metrics b{font-size:16px!important}
.arena-shell.focus-tight:fullscreen .metrics span,
.arena-shell.focus-tight.arena-focus-fallback .metrics span{font-size:8px!important}
.arena-shell.focus-tight:fullscreen .arena-actions .btn,
.arena-shell.focus-tight.arena-focus-fallback .arena-actions .btn{padding:6px 9px!important;font-size:11px!important}
.arena-shell.focus-tight:fullscreen .key-row,
.arena-shell.focus-tight.arena-focus-fallback .key-row{gap:3px!important}
.arena-shell.focus-tight:fullscreen .key-row span,
.arena-shell.focus-tight.arena-focus-fallback .key-row span{min-width:20px!important;padding:2px 4px!important;font-size:10px!important;border-radius:7px!important}
.arena-shell.focus-tight:fullscreen .key-space,
.arena-shell.focus-tight.arena-focus-fallback .key-space{min-width:86px!important}
.arena-shell.focus-ultra:fullscreen,
.arena-shell.focus-ultra.arena-focus-fallback{grid-template-rows:auto 22px minmax(0,1fr) 48px!important}
.arena-shell.focus-ultra:fullscreen .race-track,
.arena-shell.focus-ultra.arena-focus-fallback .race-track{opacity:.86;border-radius:12px!important}
.arena-shell.focus-ultra:fullscreen .target-text,
.arena-shell.focus-ultra.arena-focus-fallback .target-text{font-size:11.5px!important;line-height:1.25!important}
.arena-shell.focus-ultra:fullscreen .keyboard-visual,
.arena-shell.focus-ultra.arena-focus-fallback .keyboard-visual{padding:3px!important;border-radius:12px!important}
.arena-shell.focus-ultra:fullscreen .key-row span,
.arena-shell.focus-ultra.arena-focus-fallback .key-row span{min-width:18px!important;padding:1px 3px!important;font-size:9px!important;border-bottom-width:1px!important}
.arena-shell.focus-ultra:fullscreen .key-row:last-of-type,
.arena-shell.focus-ultra.arena-focus-fallback .key-row:last-of-type{display:none!important}

@media(max-width:760px){
  .arena-shell:fullscreen,.arena-shell.arena-focus-fallback{grid-template-rows:auto minmax(0,1fr) clamp(54px,13vh,90px)!important;gap:6px!important;padding:8px!important}
  .arena-shell:fullscreen .arena-hud,.arena-shell.arena-focus-fallback .arena-hud{grid-template-columns:1fr!important;gap:6px!important;margin:0!important;padding:8px!important}
  .arena-shell:fullscreen .arena-hud-actions,.arena-shell.arena-focus-fallback .arena-hud-actions{width:100%!important;display:grid!important;grid-template-columns:1fr 1fr auto!important;gap:6px!important}
  .arena-shell:fullscreen .race-track,.arena-shell.arena-focus-fallback .race-track{display:none!important}
  .arena-shell:fullscreen .typing-panel,.arena-shell.arena-focus-fallback .typing-panel{grid-template-rows:auto minmax(0,1fr) minmax(78px,22vh,130px) auto auto!important;padding:8px!important;gap:6px!important}
  .arena-shell:fullscreen .tutor-strip,.arena-shell.arena-focus-fallback .tutor-strip{grid-template-columns:1fr 1fr!important}
  .arena-shell:fullscreen .tutor-strip>div:nth-child(3),.arena-shell.arena-focus-fallback .tutor-strip>div:nth-child(3){display:none!important}
  .arena-shell:fullscreen .target-text,.arena-shell.arena-focus-fallback .target-text{font-size:13px!important;line-height:1.35!important}
  .arena-shell:fullscreen #typingInput,.arena-shell.arena-focus-fallback #typingInput{font-size:14px!important}
  .arena-shell:fullscreen .keyboard-visual,.arena-shell.arena-focus-fallback .keyboard-visual{padding:4px!important}
  .arena-shell:fullscreen .key-row,.arena-shell.arena-focus-fallback .key-row{gap:2px!important}
  .arena-shell:fullscreen .key-row span,.arena-shell.arena-focus-fallback .key-row span{min-width:18px!important;padding:2px 3px!important;font-size:9px!important;border-radius:6px!important}
  .arena-shell:fullscreen .key-space,.arena-shell.arena-focus-fallback .key-space{min-width:92px!important}
}

/* v22: bulk delete safety panel */
.btn-danger{background:linear-gradient(135deg,var(--danger),#ff7a00);color:#fff;box-shadow:0 14px 26px rgba(239,69,101,.22)}
.danger-zone{border:1px solid rgba(239,69,101,.22)!important;background:linear-gradient(135deg,#fff,#fff7f9)!important;box-shadow:0 18px 38px rgba(239,69,101,.08)!important}
.danger-zone h3{color:#bd2445}.danger-code{display:inline-flex;align-items:center;gap:6px;padding:9px 12px;border-radius:999px;background:#fff0f3;color:#bd2445;border:1px solid rgba(239,69,101,.24);font-weight:900;white-space:nowrap}.danger-code b{letter-spacing:.08em}.bulk-delete-form{margin-top:14px}.check-inline{display:flex!important;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:16px;background:#fff;border:1px solid var(--line);line-height:1.45}.check-inline input{width:auto;margin-top:2px}
@media(max-width:720px){.danger-code{width:100%;justify-content:center}.bulk-delete-form .form-row{grid-template-columns:1fr}}

/* v24: halaman kelola siswa lebih ringkas + pagination */
.student-tool-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 18px;padding:14px;background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:22px;box-shadow:var(--soft)}
.student-tool-actions .btn.is-active{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;box-shadow:0 12px 24px rgba(19,158,232,.20)}
.toggle-panel{display:none;margin-bottom:18px}
.toggle-panel.is-open{display:block;animation:panelOpen .18s ease-out}
@keyframes panelOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.student-list-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.student-list-head h3{margin:0}.student-list-head .muted{margin:0;font-size:13px}
.pagination-wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:16px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--soft)}
.pagination-info{color:var(--muted);font-weight:800;font-size:13px}.pagination-links{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.page-num,.page-dots{min-width:34px;height:34px;display:inline-grid;place-items:center;border-radius:12px;text-decoration:none;font-weight:900}.page-num{background:#f1f7ff;color:#25506f;border:1px solid var(--line)}.page-num.active{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;border-color:transparent}.page-dots{color:var(--muted)}
.filter-card.student-filter{align-items:flex-end}.filter-card.student-filter input{min-width:180px}.filter-card.student-filter select{min-width:150px}.filter-card.student-filter .filter-grow{min-width:220px;flex:1}.filter-card.student-filter .btn{margin-top:0}
@media(max-width:900px){.student-tool-actions{display:grid;grid-template-columns:1fr 1fr}.student-tool-actions .btn{width:100%}.pagination-wrap{align-items:flex-start}.pagination-links{width:100%}.filter-card.student-filter{display:grid}.filter-card.student-filter input,.filter-card.student-filter select,.filter-card.student-filter .btn{width:100%;min-width:0}.toggle-panel .grid.two{grid-template-columns:1fr}}

/* v28 Update Center */
.update-card input[type="file"] {
  padding: 14px;
  background: #fff;
  border: 1px dashed #a9d8f7;
  border-radius: 18px;
}
.update-guide .code-sample,
.code-sample {
  white-space: pre-wrap;
  background: #0f2442;
  color: #dff9ff;
  border-radius: 18px;
  padding: 16px;
  font-size: 12px;
  line-height: 1.55;
  overflow: auto;
}
.danger-note {
  border: 1px solid rgba(255, 124, 42, .35);
  background: rgba(255, 124, 42, .08);
  color: #8a3c08;
  border-radius: 16px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
  margin: 10px 0 14px;
}
.section-head.compact { margin: 0 0 16px; }
.section-head.compact h2 { margin: 4px 0 0; font-size: 22px; }

/* v29 installer */
.installer-body{min-height:100vh;background:linear-gradient(135deg,#e9f8ff 0%,#f8fcff 45%,#eaf2ff 100%);color:#15243b;}
.installer-page{width:min(1180px,94vw);margin:0 auto;padding:28px 0 48px;}
.installer-hero{display:flex;gap:18px;align-items:center;background:linear-gradient(135deg,#1fb6df,#33d4c7 55%,#5c6df6);border-radius:28px;color:#fff;padding:28px 30px;margin-bottom:22px;box-shadow:0 24px 55px rgba(38,153,207,.22);}
.installer-hero .brand-mark{width:58px;height:58px;border-radius:18px;background:#fff;color:#1599c7;display:grid;place-items:center;font-weight:900;box-shadow:0 12px 28px rgba(0,0,0,.12);}
.installer-hero h1{margin:6px 0 4px;font-size:clamp(32px,5vw,56px);line-height:1;}
.installer-hero p{margin:0;color:rgba(255,255,255,.9);max-width:760px;}
.installer-grid{align-items:start;}
.installer-form .checkline{display:flex;gap:10px;align-items:center;margin:14px 0;font-weight:800;}
.requirement-list{display:grid;gap:10px;margin-top:18px;}
.requirement-row{display:flex;gap:12px;align-items:flex-start;border:1px solid #d7e7f5;background:#fff;border-radius:18px;padding:12px;}
.requirement-row>span{width:28px;height:28px;border-radius:10px;display:grid;place-items:center;font-weight:900;color:#fff;flex:0 0 auto;}
.requirement-row.ok>span{background:#25c7a2;}.requirement-row.bad>span{background:#f25d72;}
.requirement-row small{display:block;color:#6b7c96;margin-top:3px;}
.install-warning{border:1px solid #ffd4a4;background:#fff6e9;color:#92580c;border-radius:18px;padding:12px 14px;margin:14px 0;font-size:13px;line-height:1.45;}
.installer-success{max-width:720px;margin:30px auto;text-align:center;}
.installer-result{display:inline-flex;background:#eef9ff;border:1px solid #cfeeff;border-radius:16px;padding:12px 16px;margin:8px 0 16px;}
.alert{border-radius:18px;padding:14px 16px;margin:14px 0;font-weight:800;}.alert.error{background:#fff1f3;border:1px solid #ffc9d2;color:#bf2443;}.alert.success{background:#ecfff7;border:1px solid #b8f2d8;color:#0f8b61;}
.small-text{font-size:13px;}
@media(max-width:760px){.installer-hero{align-items:flex-start;padding:22px;border-radius:22px}.installer-grid{grid-template-columns:1fr!important}.installer-page{width:min(94vw,520px)}}

/* v31.2 - Refinement khusus kartu login guru pembimbing */
.teacher-login-card .card-photo-stage{margin-top:3mm!important}
.teacher-login-card .card-photo-ring{width:31.5mm!important;height:31.5mm!important}
.teacher-login-card .card-photo-wrap{width:27.8mm!important;height:27.8mm!important;border-width:1.35mm!important}
.teacher-login-card .card-photo-wrap span{font-size:32px!important}
.teacher-login-card .teacher-nameplate{width:43.5mm!important;min-height:11.5mm!important;margin-top:2.4mm!important;padding:1.25mm 1.8mm!important;border-radius:1.4mm!important}
.teacher-login-card .teacher-nameplate h3{font-size:9.1px!important;line-height:1.06!important;max-height:6.2mm!important;letter-spacing:.02em!important}
.teacher-login-card .teacher-nameplate span{font-size:5.7px!important;margin-top:.45mm!important;letter-spacing:.12em!important}
.teacher-login-card .card-login-meta{width:46mm!important;margin-top:1.45mm!important;color:#fff!important}
.teacher-login-card .card-login-meta strong{font-size:5.8px!important;line-height:1.05!important;max-height:3.5mm!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.teacher-login-card .card-login-meta span{font-size:5.3px!important;line-height:1!important;margin-top:.45mm!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.teacher-login-card .teacher-login-bottom{left:3mm!important;right:3mm!important;bottom:3mm!important;grid-template-columns:minmax(0,1fr) 13mm!important;gap:1.25mm!important;align-items:center!important;padding:1.45mm!important;border-radius:2.7mm!important;background:rgba(255,255,255,.94)!important}
.teacher-login-card .teacher-login-bottom .login-credentials{min-width:0!important;display:grid!important;grid-template-columns:1fr!important;gap:.28mm!important;overflow:hidden!important}
.teacher-login-card .teacher-login-bottom .login-credentials span{font-size:4.65px!important;line-height:1!important;letter-spacing:.06em!important;color:#617085!important;font-weight:1000!important}
.teacher-login-card .teacher-login-bottom .login-credentials b{font-size:5.9px!important;line-height:1.04!important;color:#062746!important;letter-spacing:0!important;min-width:0!important;max-width:100%!important;display:block!important;overflow:hidden!important;text-overflow:ellipsis!important}
.teacher-login-card .teacher-login-bottom .credential-url{font-size:5.25px!important;line-height:1.05!important;white-space:normal!important;word-break:break-word!important;overflow-wrap:anywhere!important;max-height:5.8mm!important;text-overflow:clip!important}
.teacher-login-card .teacher-login-bottom .credential-email{font-size:5.45px!important;line-height:1.05!important;white-space:normal!important;word-break:break-word!important;overflow-wrap:anywhere!important;max-height:4.9mm!important;text-overflow:clip!important}
.teacher-login-card .teacher-login-bottom .card-qr{width:13mm!important;text-align:center!important;justify-self:end!important}
.teacher-login-card .teacher-login-bottom .card-qr img{width:12.5mm!important;height:12.5mm!important;padding:.55mm!important;border-radius:1.2mm!important}
.teacher-login-card .teacher-login-bottom .card-qr small{font-size:4.8px!important;margin-top:.2mm!important;line-height:1!important}

@media (max-width:900px){
  .teacher-login-card .card-photo-ring{width:126px!important;height:126px!important}
  .teacher-login-card .card-photo-wrap{width:112px!important;height:112px!important}
  .teacher-login-card .teacher-nameplate{width:174px!important}
  .teacher-login-card .teacher-login-bottom{grid-template-columns:1fr 50px!important}
  .teacher-login-card .teacher-login-bottom .card-qr{width:50px!important}
  .teacher-login-card .teacher-login-bottom .card-qr img{width:46px!important;height:46px!important}
}

@media print{
  .teacher-login-card .card-photo-stage{margin-top:3mm!important}
  .teacher-login-card .card-photo-ring{width:31.5mm!important;height:31.5mm!important}
  .teacher-login-card .card-photo-wrap{width:27.8mm!important;height:27.8mm!important}
  .teacher-login-card .teacher-nameplate{width:43.5mm!important;min-height:11.5mm!important;margin-top:2.4mm!important;padding:1.25mm 1.8mm!important}
  .teacher-login-card .teacher-nameplate h3{font-size:9.1px!important;max-height:6.2mm!important}
  .teacher-login-card .card-login-meta strong{font-size:5.8px!important}
  .teacher-login-card .card-login-meta span{font-size:5.3px!important}
  .teacher-login-card .teacher-login-bottom{left:3mm!important;right:3mm!important;bottom:3mm!important;grid-template-columns:minmax(0,1fr) 13mm!important;padding:1.45mm!important;gap:1.25mm!important}
  .teacher-login-card .teacher-login-bottom .login-credentials span{font-size:4.65px!important}
  .teacher-login-card .teacher-login-bottom .login-credentials b{font-size:5.9px!important}
  .teacher-login-card .teacher-login-bottom .credential-url{font-size:5.25px!important;white-space:normal!important;word-break:break-word!important;overflow-wrap:anywhere!important;max-height:5.8mm!important;text-overflow:clip!important}
  .teacher-login-card .teacher-login-bottom .credential-email{font-size:5.45px!important;white-space:normal!important;word-break:break-word!important;overflow-wrap:anywhere!important;max-height:4.9mm!important;text-overflow:clip!important}
  .teacher-login-card .teacher-login-bottom .card-qr img{width:12.5mm!important;height:12.5mm!important}
}


/* v31.4 - Teacher login card switched to clean landscape layout for long login data */
.teacher-card-sheet{grid-template-columns:repeat(2,90mm)!important;grid-auto-rows:55mm!important;gap:6mm 8mm!important;padding:12mm 10mm!important;align-content:start!important;justify-content:center!important}.teacher-print-card{position:relative;box-sizing:border-box;width:90mm!important;height:55mm!important;border:1px dashed #4b5d73!important;border-radius:4mm!important;padding:3.4mm!important;display:grid!important;grid-template-columns:31mm minmax(0,1fr)!important;gap:3mm!important;overflow:hidden!important;break-inside:avoid!important;page-break-inside:avoid!important;background:linear-gradient(145deg,#16d3b8 0%,#00aebf 45%,#078fc9 100%)!important;color:#073051!important;box-shadow:0 8px 18px rgba(12,57,90,.16)!important}.teacher-print-card:before{content:"";position:absolute;left:-11mm;top:-14mm;width:27mm;height:27mm;border-radius:50%;background:#ffc400;box-shadow:69mm 9mm 0 -4mm #ff8a00,72mm 42mm 0 -7mm #ffc400,2mm 48mm 0 -5mm #ff8a00;z-index:0}.teacher-print-card:after{content:"";position:absolute;right:-13mm;bottom:-15mm;width:34mm;height:34mm;border:1.2mm solid rgba(255,255,255,.18);border-radius:50%;z-index:0}.teacher-print-card .card-pattern-a{left:7mm!important;top:21mm!important;width:20mm!important;height:8mm!important}.teacher-print-card .card-pattern-b{right:6mm!important;bottom:7mm!important}.teacher-print-card .card-pattern-c{right:30mm!important;top:32mm!important}.teacher-card-left,.teacher-card-right{position:relative;z-index:2}.teacher-card-left{display:flex;flex-direction:column;align-items:center;min-width:0;color:#fff}.teacher-mini-head{width:100%;display:flex;align-items:center;gap:1.6mm;margin-bottom:1.4mm}.teacher-mini-head .mini-logo{width:8mm!important;height:8mm!important;border-radius:2.4mm!important;background:#fff!important;color:#0794c9!important;font-size:7px!important;box-shadow:none!important;flex:0 0 auto}.teacher-mini-head strong{display:block;text-transform:uppercase;font-size:8px!important;line-height:1!important;color:#fff!important;font-weight:1000}.teacher-mini-head small{display:block;font-size:5.5px!important;line-height:1.05!important;color:rgba(255,255,255,.95)!important;text-transform:uppercase;font-weight:900}.teacher-photo-mini{width:21mm;height:21mm;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#ffce00,#ff8500);box-shadow:0 3px 8px rgba(0,0,0,.18);margin:0 auto 1.4mm}.teacher-photo-wrap{position:relative;width:18mm;height:18mm;border-radius:50%;border:1mm solid #fff;background:linear-gradient(135deg,#e9f8ff,#fff);overflow:hidden;display:grid;place-items:center}.teacher-photo-wrap span{font-size:19px;font-weight:1000;color:#0b9cca}.teacher-photo-wrap .card-student-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;background:#fff}.teacher-name-box{width:28mm;border-radius:1.8mm;background:linear-gradient(135deg,#ffce00,#ff8400);color:#fff;text-align:center;padding:1.3mm 1.2mm;box-shadow:0 3px 7px rgba(0,0,0,.13);min-height:8.5mm;display:flex;flex-direction:column;align-items:center;justify-content:center}.teacher-name-box h3{margin:0;font-size:7.6px!important;line-height:1.03!important;font-weight:1000;text-transform:uppercase;max-height:5mm;overflow:hidden;text-wrap:balance}.teacher-name-box span{font-size:4.9px!important;line-height:1!important;font-weight:1000;letter-spacing:.08em;margin-top:.45mm}.teacher-school-line{width:30mm;text-align:center;color:#fff;margin-top:1mm;min-height:6mm}.teacher-school-line strong{display:block;font-size:5.7px!important;line-height:1.05!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.teacher-school-line span{display:block;font-size:5.2px!important;line-height:1!important;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.95}.teacher-card-right{background:rgba(255,255,255,.94);border-radius:3mm;padding:2.4mm 2.6mm;display:flex;flex-direction:column;min-width:0;box-shadow:0 6px 15px rgba(0,0,0,.12)}.teacher-login-title{font-size:8px;line-height:1;font-weight:1000;color:#078fc9;text-transform:uppercase;letter-spacing:.07em;margin-bottom:1.3mm}.teacher-field{min-width:0;margin-bottom:1.25mm}.teacher-field span{display:block;font-size:5.5px;line-height:1;text-transform:uppercase;letter-spacing:.08em;color:#60748b;font-weight:1000;margin-bottom:.45mm}.teacher-field b{display:block;font-size:7.2px;line-height:1.08;color:#062746;font-weight:1000;letter-spacing:0;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.teacher-field-url b{font-size:6.35px;line-height:1.05;max-height:7mm;overflow:hidden}.teacher-bottom-row{display:grid;grid-template-columns:minmax(0,1fr) 16mm;gap:2mm;align-items:end;margin-top:auto}.teacher-field-password{margin-bottom:0}.teacher-field-password b{font-size:8.2px}.teacher-qr-box{width:16mm;text-align:center}.teacher-qr-box img{width:15mm;height:15mm;display:block;border-radius:1.4mm;background:#fff;padding:.55mm;border:1px solid #d2dfec}.teacher-qr-box small{display:block;margin-top:.2mm;font-size:4.8px;font-weight:1000;text-transform:uppercase;color:#596b7e;line-height:1}.teacher-print-card .cut-corner{position:absolute;width:4.5mm;height:4.5mm;z-index:7;opacity:.78}.teacher-print-card .cut-tl{left:-1px;top:-1px;border-left:1px solid #233850;border-top:1px solid #233850}.teacher-print-card .cut-tr{right:-1px;top:-1px;border-right:1px solid #233850;border-top:1px solid #233850}.teacher-print-card .cut-bl{left:-1px;bottom:-1px;border-left:1px solid #233850;border-bottom:1px solid #233850}.teacher-print-card .cut-br{right:-1px;bottom:-1px;border-right:1px solid #233850;border-bottom:1px solid #233850}
@media (max-width:900px){.teacher-card-sheet{grid-template-columns:1fr!important;grid-auto-rows:auto!important;width:100%!important;min-height:auto!important;padding:12px!important}.teacher-print-card{width:100%!important;max-width:360px!important;height:220px!important;margin:auto!important;grid-template-columns:120px 1fr!important}.teacher-mini-head strong{font-size:8px!important}.teacher-photo-mini{width:80px!important;height:80px!important}.teacher-photo-wrap{width:68px!important;height:68px!important}.teacher-name-box{width:110px!important}.teacher-name-box h3{font-size:8px!important}.teacher-school-line{width:110px!important}.teacher-field b{font-size:8px!important}.teacher-field-url b{font-size:7px!important}.teacher-qr-box{width:58px!important}.teacher-qr-box img{width:54px!important;height:54px!important}}
@media print{.a4-card-sheet.teacher-card-sheet{width:210mm!important;height:297mm!important;min-height:297mm!important;padding:12mm 10mm!important;margin:0!important;border:0!important;box-shadow:none!important;grid-template-columns:repeat(2,90mm)!important;grid-auto-rows:55mm!important;gap:6mm 8mm!important;align-content:start!important;justify-content:center!important;page-break-after:always!important;break-after:page!important}.a4-card-sheet.teacher-card-sheet:last-child{page-break-after:auto!important;break-after:auto!important}.teacher-print-card{width:90mm!important;height:55mm!important;padding:3.4mm!important;grid-template-columns:31mm minmax(0,1fr)!important;gap:3mm!important;box-shadow:none!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}.teacher-photo-mini{width:21mm!important;height:21mm!important}.teacher-photo-wrap{width:18mm!important;height:18mm!important}.teacher-name-box{width:28mm!important}.teacher-name-box h3{font-size:7.6px!important}.teacher-card-right{padding:2.4mm 2.6mm!important}.teacher-login-title{font-size:8px!important}.teacher-field span{font-size:5.5px!important}.teacher-field b{font-size:7.2px!important}.teacher-field-url b{font-size:6.35px!important}.teacher-qr-box img{width:15mm!important;height:15mm!important}}