.kriolu-shell{
  --blue:#14532d; --blue-dark:#0e3d17; --sky:#58cc02; --sky-dark:#46a302;
  --green:#58cc02; --green-dark:#46a302; --yellow:#ffc800; --yellow-dark:#e0a800;
  --red:#ff4b4b; --red-dark:#d33131; --purple:#a560e8; --purple-dark:#8b46cf;
  --pink:#ff86d0; --orange:#ff9600; --orange-dark:#e08600;
  --ink:#1f2a44; --muted:#7a8699; --line:#e5e7eb; --bg:#fff;
  --radius:16px; --shadow:0 2px 0 var(--line);
}.kriolu-shell *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}.kriolu-shell{scroll-behavior:smooth}.kriolu-shell{margin:0;font-family:"Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:#fff;color:var(--ink);font-weight:700}.kriolu-shell button{font-family:inherit;cursor:pointer}.kriolu-shell button:active{transform:translateY(1px)}/* ---------- Top app bar ---------- */ .kriolu-shell .topbar{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}.kriolu-shell .topbar-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:10px 16px}.kriolu-shell .logo{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:900;color:var(--blue);letter-spacing:-.5px;white-space:nowrap}.kriolu-shell .logo-badge{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--sky));display:grid;place-items:center;color:#fff;font-size:22px;box-shadow:0 2px 8px rgba(2,110,166,.30)}.kriolu-shell .logo small{display:block;font-size:10px;letter-spacing:.14em;color:var(--muted);font-weight:800}.kriolu-shell .top-stats{margin-left:auto;display:flex;gap:8px;align-items:center}.kriolu-shell .pill{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font-weight:900;font-size:15px}.kriolu-shell .pill.streak{color:var(--orange)}.kriolu-shell .pill.xp{color:#b78a00;background:#fff7d6}.pill.gems{color:#6d28d9;background:#f3e8ff}.kriolu-shell .pill.hearts{color:var(--red)}.kriolu-shell .pill:hover{background:#f4f6fb}/* ---------- Layout ---------- */ .kriolu-shell .layout{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:220px 1fr;gap:26px;padding:22px 16px 110px}.kriolu-shell .sidebar{position:sticky;top:78px;height:fit-content;display:flex;flex-direction:column;gap:6px}.kriolu-shell .navbtn{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid transparent;background:none;border-radius:14px;font-size:15px;font-weight:800;color:#52607a;text-align:left}.kriolu-shell .navbtn .ic{font-size:21px;width:28px;text-align:center}.kriolu-shell .navbtn:hover{background:#f4f8ff}.kriolu-shell .navbtn.active{background:#eefbcc;border-color:#cdea7d;color:var(--blue)}.kriolu-shell .side-card{margin-top:18px;border:1px solid var(--line);border-radius:var(--radius);padding:16px}.kriolu-shell .side-card h4{margin:0 0 8px;font-size:13px;letter-spacing:.08em;color:var(--muted)}.kriolu-shell .quest{display:flex;gap:10px;align-items:center;font-size:14px;margin:10px 0}.kriolu-shell .bar{height:12px;background:#eef1f6;border-radius:99px;overflow:hidden;flex:1}.kriolu-shell .bar i{display:block;height:100%;background:var(--yellow);border-radius:99px;transition:width .5s}/* ---------- Main / screens ---------- */ .kriolu-shell .screen{display:none}.kriolu-shell .screen.active{display:block;animation:fade .25s ease}@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.kriolu-shell .unit-banner{border-radius:16px;color:#fff;padding:20px 22px;display:flex;justify-content:space-between;align-items:center;gap:14px;margin:26px 0 8px;border-left:3px solid rgba(0,0,0,.8);box-shadow:0 3px 12px rgba(16,24,40,.18)}.kriolu-shell .unit-banner:first-child{margin-top:0}.kriolu-shell .unit-banner h2{margin:2px 0 4px;font-size:22px}.kriolu-shell .unit-banner p{margin:0;opacity:.92;font-weight:700;font-size:14px}.kriolu-shell .unit-banner .guide{background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.55);color:#fff;border-radius:12px;padding:10px 14px;font-weight:900;white-space:nowrap}.kriolu-shell .u-blue{background:var(--sky);box-shadow:0 2px 8px rgba(2,110,166,.30)}.kriolu-shell .u-green{background:var(--green);box-shadow:0 2px 8px rgba(77,146,8,.30)}.kriolu-shell .u-orange{background:var(--orange);box-shadow:0 2px 8px rgba(16,24,40,.22)}.kriolu-shell .u-purple{background:var(--purple);box-shadow:0 2px 8px rgba(16,24,40,.22)}.kriolu-shell .u-red{background:#ff6b6b;box-shadow:0 2px 8px rgba(184,42,42,.30)}.kriolu-shell .path{display:flex;flex-direction:column;align-items:center;padding:18px 0 6px}.kriolu-shell .node-wrap{display:flex;flex-direction:column;align-items:center;margin:7px 0;position:relative}.kriolu-shell .node{width:74px;height:64px;border:none;border-radius:50%;font-size:29px;color:#fff;display:grid;place-items:center;position:relative;transition:transform .15s;box-shadow:0 2px 8px rgba(16,24,40,.14)}.kriolu-shell .node::after{content:none}.kriolu-shell .node:hover{transform:scale(1.06)}.kriolu-shell .node.locked{background:#e5e7eb;color:#aeb6c2;cursor:not-allowed}.kriolu-shell .node.done{background:var(--yellow)!important;color:#fff}
.kriolu-shell .node.boss{width:84px;height:84px;font-size:38px;border:3px solid #fff;box-shadow:0 8px 22px rgba(16,24,40,.22)}
.kriolu-shell .node.boss.current{outline:4px solid rgba(166,242,10,.55)}
.kriolu-shell .node.boss.legend{border-color:#ffb020;box-shadow:0 8px 24px rgba(255,176,32,.5)}
.kriolu-shell .uchip{display:inline-block;background:#0b0d08;color:var(--brand);font-size:11px;font-weight:900;letter-spacing:.06em;border-radius:999px;padding:4px 11px;margin:10px 6px 0 0}
.kriolu-shell .testout-btn{background:var(--brand);color:#0b0d08;border:2px solid #0b0d08;border-radius:999px;padding:8px 14px;font-weight:900;font-size:12px;cursor:pointer;margin-right:8px;letter-spacing:.04em}.kriolu-shell .node.current{animation:bounce 1.6s infinite}@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}.kriolu-shell .node-label{margin-top:14px;font-size:13px;color:var(--muted);max-width:150px;text-align:center}.kriolu-shell .start-tag{position:absolute;top:-32px;background:#fff;border:1px solid var(--line);color:var(--sky-dark);font-weight:900;font-size:12px;letter-spacing:.08em;padding:5px 10px;border-radius:10px;animation:bob 1.6s infinite;z-index:2}@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}/* ---------- Right rail ---------- */ .kriolu-shell .rail-card{border:1px solid var(--line);border-radius:var(--radius);padding:18px}.kriolu-shell .rail-card h3{margin:0 0 6px;font-size:17px}.kriolu-shell .rail-card p{color:var(--muted);font-size:14px;line-height:1.5;margin:4px 0}.kriolu-shell .avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:18px;color:#fff;flex:none}.kriolu-shell .progress-ring{text-align:center;padding:6px 0}.kriolu-shell .ring-num{font-size:34px;font-weight:900;color:var(--blue)}/* ---------- Cards / phrases / practice ---------- */ .kriolu-shell .hero-card{border:1px solid var(--line);border-radius:20px;padding:22px;margin-bottom:16px;background:linear-gradient(135deg,#f0f8ff,#fff)}.kriolu-shell .hero-card h2{margin:4px 0}.kriolu-shell .hero-card p{color:var(--muted);line-height:1.55}.kriolu-shell .tag{font-size:12px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--sky-dark)}.kriolu-shell .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}.kriolu-shell .mini-card{border:1px solid var(--line);border-radius:var(--radius);padding:18px;background:#fff}.kriolu-shell .mini-card h3{margin:6px 0}.kriolu-shell .mini-card p{color:var(--muted);font-size:14px;line-height:1.55}.kriolu-shell .btn{border:none;border-radius:13px;padding:13px 20px;font-weight:900;font-size:15px;color:#fff;background:var(--sky);box-shadow:0 2px 8px rgba(2,110,166,.30);letter-spacing:.02em}.kriolu-shell .btn.green{background:var(--green);box-shadow:0 2px 8px rgba(77,146,8,.30)}.kriolu-shell .btn.yellow{background:var(--yellow);color:#5c4300;box-shadow:0 2px 8px rgba(151,107,0,.30)}.kriolu-shell .btn.red{background:var(--red);box-shadow:0 2px 8px rgba(184,42,42,.30)}.kriolu-shell .btn.ghost{background:#fff;color:var(--sky-dark);border:1px solid var(--line);box-shadow:0 2px 8px rgba(16,24,40,.14)}.kriolu-shell .btn:disabled{opacity:.45;cursor:not-allowed}.kriolu-shell input.search{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:14px;font-size:16px;font-family:inherit;font-weight:700;background:#fbfcfe}.kriolu-shell .wordrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 2px;border-bottom:1px solid #f0f2f6}.kriolu-shell .wordrow>div{flex:1;min-width:0}.kriolu-shell .wordrow .iconbtn{flex:none}.kriolu-shell .kri{font-size:18px;font-weight:900}.kriolu-shell .en{color:var(--muted);font-size:14px}.kriolu-shell .iconbtn{border:1px solid var(--line);background:#fff;color:#0b0d08;width:42px;height:42px;border-radius:50%;font-size:17px;flex:none;display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1}.kriolu-shell .iconbtn:hover{background:#eefbcc}/* flashcard */ .kriolu-shell .flash{perspective:1000px;max-width:540px;margin:20px auto;cursor:pointer}.kriolu-shell .flash-inner{position:relative;height:290px;transition:transform .55s;transform-style:preserve-3d}.kriolu-shell .flash.flipped .flash-inner{transform:rotateY(180deg)}.kriolu-shell .face{position:absolute;inset:0;backface-visibility:hidden;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center}.kriolu-shell .face.front{background:linear-gradient(135deg,var(--blue),var(--sky));color:#fff;box-shadow:0 2px 18px rgba(2,110,166,.30)}.kriolu-shell .face.back{background:#fff;border:1px solid var(--line);transform:rotateY(180deg);box-shadow:0 2px 18px rgba(16,24,40,.14)}.kriolu-shell .face .big{font-size:clamp(30px,7vw,48px);font-weight:900}.kriolu-shell .center{text-align:center}.kriolu-shell .rowbtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}/* ---------- Lesson player ---------- */ .kriolu-shell .player{position:fixed;inset:0;background:#fff;z-index:100;display:none;flex-direction:column}.kriolu-shell .player.open{display:flex}.kriolu-shell .player-top{max-width:820px;width:100%;margin:0 auto;display:flex;align-items:center;gap:14px;padding:18px 16px}.kriolu-shell .close-x{background:none;border:none;font-size:26px;color:var(--muted);font-weight:900}.kriolu-shell .player .bar{height:16px}.kriolu-shell .hearts-display{color:var(--red);font-weight:900;font-size:18px;white-space:nowrap}.kriolu-shell .player-body{flex:1;max-width:640px;width:100%;margin:0 auto;padding:10px 20px;overflow:auto}.kriolu-shell .player-body h2{font-size:25px;margin:10px 0 18px}.kriolu-shell .speak-row{display:flex;align-items:center;gap:12px;margin:8px 0 18px}.kriolu-shell .speak-btn{width:58px;height:58px;border-radius:16px;border:none;background:var(--sky);color:#fff;font-size:25px;box-shadow:0 2px 8px rgba(2,110,166,.30)}.kriolu-shell .prompt-word{font-size:21px;background:#f2f8ff;border:1px solid #cfeaff;padding:10px 16px;border-radius:14px}.kriolu-shell .opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin:10px 0;padding:16px;border:1px solid var(--line);background:#fff;border-radius:16px;font-size:17px;font-weight:800;color:var(--ink);box-shadow:0 2px 8px rgba(16,24,40,.14)}.kriolu-shell .opt .key{width:30px;height:30px;border:1px solid var(--line);border-radius:9px;display:grid;place-items:center;font-size:13px;color:var(--muted);flex:none}.kriolu-shell .opt.selected{border-color:var(--sky);background:#eefbcc;color:var(--blue)}.kriolu-shell .opt.correct{border-color:var(--green);background:#d7ffb8;color:#256b00}.kriolu-shell .opt.wrong{border-color:var(--red);background:#ffdfe0;color:#8f1d1d}.kriolu-shell .wordbank{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}.kriolu-shell .chip{border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 15px;font-size:16px;font-weight:800;box-shadow:0 2px 8px rgba(16,24,40,.14)}.kriolu-shell .chip.used{opacity:.25;pointer-events:none}.kriolu-shell .answer-line{min-height:58px;border-bottom:3px solid var(--line);display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 2px;font-size:18px;font-weight:900}.kriolu-shell .type-input{width:100%;padding:15px;border:1px solid var(--line);border-radius:14px;font-size:17px;font-family:inherit;font-weight:700;background:#fbfcfe}.kriolu-shell .player-foot{border-top:2px solid var(--line);padding:16px}.kriolu-shell .foot-in{max-width:820px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:12px}.kriolu-shell .player-foot.good{background:#d7ffb8;border-color:#a5e075}.kriolu-shell .player-foot.bad{background:#ffdfe0;border-color:#f2a6a6}.kriolu-shell .feedback{font-weight:900;font-size:18px;display:none}.kriolu-shell .player-foot.good .feedback, .kriolu-shell .player-foot.bad .feedback{display:block}.kriolu-shell .player-foot.good .feedback{color:#256b00}.kriolu-shell .player-foot.bad .feedback{color:#8f1d1d}.kriolu-shell .feedback small{display:block;font-weight:700;font-size:14px;opacity:.85}/* complete / modal */ .kriolu-shell .overlay{position:fixed;inset:0;background:rgba(20,30,55,.5);z-index:120;display:none;place-items:center;padding:16px}.kriolu-shell .overlay.open{display:grid}.kriolu-shell .modal{background:#fff;border-radius:24px;max-width:430px;width:100%;padding:32px 26px;text-align:center;animation:pop .3s ease}@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.kriolu-shell .modal .trophy{font-size:70px}.kriolu-shell .modal h2{margin:8px 0}.kriolu-shell .modal p{color:var(--muted);line-height:1.5}.kriolu-shell .reward-row{display:flex;gap:10px;justify-content:center;margin:18px 0}.kriolu-shell .reward{border-radius:14px;padding:12px 18px;font-weight:900}.kriolu-shell .reward.xp{background:#fff3bf;color:#8a6d00;border:1px solid var(--yellow)}.kriolu-shell .reward.acc{background:#ffe3f3;color:#a1006b;border:1px solid var(--pink)}/* bottom nav (mobile) */ .kriolu-shell .bottomnav{display:none;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:2px solid var(--line);z-index:60;padding:6px 4px calc(6px + env(safe-area-inset-bottom))}.kriolu-shell .bottomnav button{flex:1;background:none;border:none;font-size:23px;padding:7px 0;color:var(--muted);border-radius:12px}.kriolu-shell .bottomnav button span{display:block;font-size:10px;font-weight:900;letter-spacing:.05em}
.kriolu-shell .more-sheet{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:2px solid var(--line);border-radius:22px 22px 0 0;z-index:80;padding:10px 16px calc(18px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .25s ease;box-shadow:0 -8px 30px rgba(0,0,0,.12)}
.kriolu-shell .more-sheet.open{transform:none}
.kriolu-shell .more-grip{width:44px;height:5px;border-radius:99px;background:var(--line);margin:2px auto 12px}
.kriolu-shell .more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kriolu-shell .more-grid button{border:1px solid var(--line);border-radius:16px;background:#fff;padding:14px 6px;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--ink)}
.kriolu-shell .more-grid button span{font-size:11px;font-weight:900;letter-spacing:.06em;color:var(--muted)}
.kriolu-shell .more-grid button.active{background:#eefbcc;border-color:#cdea7d}
.kriolu-shell .more-veil{position:fixed;inset:0;background:rgba(11,13,8,.45);z-index:70;opacity:0;pointer-events:none;transition:opacity .25s}
.kriolu-shell .more-veil.open{opacity:1;pointer-events:auto}
.kriolu-shell @media(min-width:981px){.more-sheet,.more-veil{display:none!important}}
.kriolu-shell .bottomnav button.active{color:var(--blue);background:#eefbcc}/* ---------- Landing / Courses / Dictionary / Stories ---------- */ .kriolu-shell .landing-hero{background:linear-gradient(100deg,rgba(11,13,8,.84) 0%,rgba(11,13,8,.5) 45%,rgba(11,13,8,.18) 100%),url(../img/hero-bg.jpg) center 35%/cover no-repeat;color:#fff;border-radius:24px;padding:38px 30px;position:relative;overflow:hidden}.kriolu-shell .landing-hero h1{font-size:clamp(30px,5vw,46px);margin:8px 0;line-height:1.12;letter-spacing:-.5px;text-shadow:0 2px 18px rgba(0,0,0,.65)}.kriolu-shell .landing-hero p{opacity:.93;line-height:1.6;max-width:560px;font-size:16px;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.6)}.kriolu-shell .landing-hero .cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.kriolu-shell .btn.white{background:#fff;color:var(--blue);box-shadow:0 2px 8px rgba(16,24,40,.22)}.kriolu-shell .btn.outline-w{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.7);box-shadow:none}.kriolu-shell .trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:20px;font-size:13px;opacity:.95}.kriolu-shell .how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:16px 0}.kriolu-shell .how-card{border:1px solid var(--line);border-radius:18px;padding:20px;background:#fff}.kriolu-shell .how-card .ic{font-size:32px}.kriolu-shell .how-card h3{margin:8px 0}.kriolu-shell .how-card p{color:var(--muted);font-size:14px;line-height:1.55}.kriolu-shell .course-body h3{margin:0;font-size:19px}.kriolu-shell .course-body p{color:var(--muted);font-size:14px;line-height:1.55;flex:1}.kriolu-shell .tabs{display:flex;gap:8px;margin:14px 0;flex-wrap:wrap}.kriolu-shell .tabs button{border:1px solid var(--line);background:#fff;padding:10px 18px;border-radius:999px;font-weight:900;color:var(--muted)}.kriolu-shell .tabs button.active{background:var(--blue);color:#fff;border-color:var(--blue)}.kriolu-shell .pill-toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}.kriolu-shell .pill-toggle button{border:0;background:#fff;padding:9px 16px;font-weight:900;color:var(--muted)}.kriolu-shell .pill-toggle button.active{background:var(--sky);color:#fff}.kriolu-shell .wotd{background:linear-gradient(135deg,#fff7d6,#fff);border:1px solid var(--yellow);border-radius:18px;padding:20px;margin:14px 0}.kriolu-shell .expr-card{border:1px solid var(--line);border-radius:16px;padding:16px;margin:10px 0;background:#fff}.kriolu-shell .expr-card .kri{font-size:19px}.kriolu-shell .expr-card p{color:var(--muted);font-size:14px;line-height:1.55;margin:6px 0}.kriolu-shell .story-card{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff}.kriolu-shell .story-cover{height:110px;display:grid;place-items:center;font-size:48px}.kriolu-shell .story-body{padding:16px}.kriolu-shell .story-body h3{margin:4px 0}.kriolu-shell .story-body p{color:var(--muted);font-size:14px;line-height:1.55}.kriolu-shell .testi{border:1px solid var(--line);border-radius:18px;padding:20px;background:#fff}.kriolu-shell .testi p{line-height:1.6;color:#3c4a63}.kriolu-shell .testi .who{display:flex;gap:10px;align-items:center;margin-top:12px}.kriolu-shell .section-title{margin:28px 0 6px;font-size:24px}.kriolu-shell .section-sub{color:var(--muted);line-height:1.55;margin:0 0 8px}.kriolu-shell label.f{display:block;font-size:13px;font-weight:900;color:var(--muted);margin:12px 0 5px}.kriolu-shell .textin{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-family:inherit;font-weight:700;font-size:15px}.kriolu-shell .reader-page{font-size:19px;line-height:1.75}.kriolu-shell .reader-page .en{color:var(--muted);font-size:16px;margin-top:12px}@media(max-width:640px){.kriolu-shell .landing-hero{padding:26px 18px}}/* ---------- Paywall / Ads / Premium ---------- */ .kriolu-shell .btn.premium{background:linear-gradient(135deg,#ffc800,#ff9600);color:#4a3200;box-shadow:0 2px 8px rgba(16,24,40,.22)}.kriolu-shell .stage-lock{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.kriolu-shell .stage-lock button{background:#fff;color:var(--blue);border:1px solid rgba(255,255,255,.7);border-radius:12px;padding:10px 14px;font-weight:900}.kriolu-shell .ad-box{background:linear-gradient(135deg,#0b2810,#14532d);color:#fff;border-radius:18px;padding:28px 20px;text-align:center;margin:14px 0}.kriolu-shell .ad-box .sponsor{font-size:12px;letter-spacing:.15em;opacity:.7;font-weight:900}.kriolu-shell .ad-box h3{font-size:24px;margin:10px 0}.kriolu-shell .ad-box p{opacity:.85;line-height:1.55}.kriolu-shell .ad-count{font-size:44px;font-weight:900;color:var(--yellow)}.kriolu-shell .price-card{border:1px solid var(--line);border-radius:16px;padding:16px;margin:10px 0;text-align:left}.kriolu-shell .price-card.popular{border-color:var(--yellow);background:#fffdf0;position:relative}.kriolu-shell .price-card .amount{font-size:26px;font-weight:900;color:var(--blue)}.kriolu-shell .progress-dots{display:flex;gap:8px;justify-content:center;margin:12px 0}.kriolu-shell .progress-dots i{width:16px;height:16px;border-radius:50%;background:#e5e7eb;display:block}.kriolu-shell .progress-dots i.on{background:var(--green)}.kriolu-shell footer{max-width:1180px;margin:0 auto;padding:0 16px 40px;color:var(--muted);font-size:13px;line-height:1.6}.kriolu-shell .toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:99px;font-weight:900;opacity:0;pointer-events:none;transition:.3s;z-index:200}.kriolu-shell .toast.show{opacity:1;transform:translateX(-50%)}@media(max-width:980px){.kriolu-shell .layout{grid-template-columns:1fr}.kriolu-shell .sidebar{display:none}.kriolu-shell .bottomnav{display:flex};.kriolu-shell footer{padding-bottom:calc(104px + env(safe-area-inset-bottom))}}/* ---------- Real-time Translator ---------- */ .kriolu-shell .trans-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch;margin-top:14px}.kriolu-shell .trans-box{border:1px solid var(--line);border-radius:18px;padding:16px;background:#fff;display:flex;flex-direction:column}.kriolu-shell .trans-box.out{background:#0b0d08;color:#fff;border-color:#0b0d08}.kriolu-shell .trans-box label{font-size:12px;font-weight:900;letter-spacing:.09em;color:var(--muted)}.kriolu-shell .trans-box.out label{color:var(--brand)}.kriolu-shell .trans-box textarea{border:0;resize:vertical;min-height:110px;font-family:inherit;font-size:18px;font-weight:600;margin-top:10px;background:transparent;color:inherit;width:100%}.kriolu-shell .trans-box textarea:focus{outline:none}.kriolu-shell .trans-out{font-size:21px;font-weight:800;line-height:1.5;min-height:110px;margin-top:10px;white-space:pre-wrap}.kriolu-shell .swap-btn{align-self:center;width:52px;height:52px;border-radius:50%;border:0;background:var(--brand);color:#0b0d08;box-shadow:0 2px 8px rgba(109,179,0,.32);display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1}.kriolu-shell .chip-ex{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 13px;font-weight:800;font-size:13px;color:#52607a}.kriolu-shell .chip-ex:hover{border-color:#84d604;background:#f7fee0}.kriolu-shell .reftable{width:100%;border-collapse:collapse;font-size:14px}
.kriolu-shell .reftable th{background:#eefbcc;text-align:left}
.kriolu-shell .reftable th,.reftable td{border:1px solid var(--line);padding:8px 10px}
.kriolu-shell .ref-cols{columns:2;column-gap:26px}
.kriolu-shell @media(max-width:760px){.ref-cols{columns:1}}
.kriolu-shell .gloss{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.kriolu-shell .gloss span{border-radius:10px;padding:7px 10px;font-size:13px;font-weight:800;background:#f0f7e0;border:1px solid #d9f99d}.kriolu-shell .gloss span.unknown{background:#fff1f1;border-color:#fecaca;color:#991b1b}@media(max-width:700px){.kriolu-shell .trans-grid{grid-template-columns:1fr}.kriolu-shell .swap-btn{transform:rotate(90deg)}}/* ---------- Voice input ---------- */ .kriolu-shell .mic-btn{width:52px;height:52px;border-radius:50%;border:0;background:var(--brand);color:#0b0d08;font-size:24px;box-shadow:0 2px 8px rgba(109,179,0,.32);cursor:pointer;flex-shrink:0;transition:transform .12s;display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1}.kriolu-shell .mic-btn:active{transform:translateY(2px)}.kriolu-shell .mic-btn.listening{background:#ff4d4d;color:#fff;box-shadow:0 2px 8px rgba(16,24,40,.22);animation:micpulse 1.3s infinite}@keyframes micpulse{0%{box-shadow:0 2px 8px rgba(16,24,40,.22)}70%{box-shadow:0 2px 8px rgba(16,24,40,.22)}100%{box-shadow:0 2px 8px rgba(16,24,40,.22)}}.kriolu-shell .autospeak{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 12px;font-weight:800;font-size:12px;color:#52607a;cursor:pointer}.kriolu-shell .autospeak.on{background:var(--brand-soft);border-color:#cdea7d;color:#3f6212}
.kriolu-shell .pbchips{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 2px}
.kriolu-shell .pb-cat{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 12px;font:inherit;font-weight:800;font-size:12px;color:#52607a;cursor:pointer}
.kriolu-shell .pb-cat.on{background:var(--brand-soft);border-color:#cdea7d;color:#3f6212}
.kriolu-shell .pbchip{color:#3f6212;background:var(--brand-soft);border-radius:6px;padding:1px 6px;font-size:11px;font-weight:800;white-space:nowrap}
.kriolu-shell .auth-tabs{display:flex;gap:8px;margin:16px 0 4px}
.kriolu-shell .auth-tab{flex:1;border:1px solid var(--line);background:#f5f7f0;border-radius:999px;padding:9px 10px;font:inherit;font-weight:800;font-size:13px;color:#52607a;cursor:pointer}
.kriolu-shell .auth-tab.on{background:var(--brand-soft);border-color:#cdea7d;color:#3f6212}
.kriolu-shell .auth-err{color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;padding:8px 10px;font-size:13px;font-weight:700;display:none;margin-top:10px}/* ---------- Conversation mode ---------- */ .kriolu-shell .conv-ov{position:fixed;inset:0;background:#f5f7f0;display:none;flex-direction:column;z-index:1200}.kriolu-shell .conv-ov.open{display:flex}.kriolu-shell .conv-head{background:var(--black);color:#fff;padding:14px 18px;display:flex;align-items:center;gap:12px}.kriolu-shell .conv-head h2{margin:0;font-size:18px;flex:1}.kriolu-shell .conv-chat{flex:1;overflow-y:auto;padding:18px;max-width:760px;margin:0 auto;width:100%}.kriolu-shell .conv-pair{margin-bottom:14px;display:flex;flex-direction:column;gap:6px}.kriolu-shell .bub{max-width:80%;padding:12px 16px;border-radius:18px;font-weight:700;line-height:1.45;box-shadow:0 2px 8px rgba(0,0,0,.08)}.kriolu-shell .bub.in{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:6px}.kriolu-shell .bub.out{align-self:flex-end;background:var(--brand);color:#0b0d08;border-bottom-right-radius:6px;cursor:pointer}.kriolu-shell .bub .flag{margin-right:8px}.kriolu-shell .conv-live{padding:8px 18px;color:var(--muted);font-style:italic;min-height:36px;max-width:760px;margin:0 auto;width:100%}.kriolu-shell .conv-bar{background:#fff;border-top:2px solid var(--line);padding:12px 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}.kriolu-shell .conv-pill{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font-weight:800;font-size:13px;color:#52607a;cursor:pointer}.kriolu-shell .conv-pill.on{background:var(--brand-soft);border-color:#cdea7d;color:#3f6212}/* ================= BRAND · LearnPass palette (black + electric lime) ================= */ .kriolu-shell{
  --brand:#a6f20a; --brand-soft:#eefbcc; --brand-dark:#6db300; --black:#0b0d08;
  --sky:#84d604; --sky-dark:#5da300; --blue:#101408;
}.kriolu-shell{background:#f5f7f0}.kriolu-shell ::selection{background:var(--brand)}/* Top bar = black brand bar */ .kriolu-shell .topbar{background:var(--black);border-bottom:1px solid #1d2412;padding-top:env(safe-area-inset-top,0px)}.kriolu-shell .logo{color:#fff}.kriolu-shell .logo small{color:#a9b39a}.kriolu-shell .logo-badge{background:#fff;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.30)}.kriolu-shell .topbar .pill{background:rgba(255,255,255,.10);color:#fff}.kriolu-shell .pill.streak{color:#ffb84d}.kriolu-shell .pill.xp{color:var(--brand);background:rgba(166,242,10,.15)}.pill.gems{color:#c4b5fd;background:rgba(139,92,246,.18)}.kriolu-shell .pill.hearts{color:#ff7b7b}.kriolu-shell .topbar .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35);box-shadow:none}/* Primary buttons = lime on black text */ .kriolu-shell .btn{background:var(--brand);color:#0b0d08;box-shadow:0 2px 8px rgba(109,179,0,.32)}.kriolu-shell .btn.green{background:var(--brand);color:#0b0d08;box-shadow:0 2px 8px rgba(109,179,0,.32)}.kriolu-shell .btn.premium{background:var(--brand);color:#0b0d08;box-shadow:0 2px 8px rgba(109,179,0,.32);border:1px solid #d8ff8a}.kriolu-shell .btn.yellow{background:#0b0d08;color:var(--brand);box-shadow:0 2px 8px rgba(11,13,8,.30)}.kriolu-shell .btn.ghost{background:#fff;color:#3f6212;box-shadow:0 2px 8px rgba(16,24,40,.14)}.kriolu-shell .btn.white{background:var(--brand);color:#0b0d08;box-shadow:0 2px 8px rgba(109,179,0,.32)}.kriolu-shell .btn.outline-w{border-color:rgba(255,255,255,.65);color:#fff;background:transparent}.kriolu-shell .checkBtn, .kriolu-shell #checkBtn{background:var(--brand)}.kriolu-shell .landing-hero h1{color:#fff!important}.kriolu-shell .landing-hero .pill{background:rgba(166,242,10,.16);border-color:rgba(166,242,10,.55);color:var(--brand)}.kriolu-shell .unit-banner.u-blue{background:var(--brand);color:#0b0d08;box-shadow:0 3px 14px rgba(109,179,0,.35)}.kriolu-shell .unit-banner.u-blue p, .kriolu-shell .unit-banner.u-blue h2{color:#0b0d08}.kriolu-shell .unit-banner.u-blue .guide{background:rgba(0,0,0,.14);border-color:rgba(0,0,0,.35);color:#0b0d08}/* Navigation accents */ .kriolu-shell .navbtn.active{background:var(--brand-soft);border-color:#cdea7d;color:#274d00}.kriolu-shell .bottomnav button.active{color:#3f6212;background:var(--brand-soft)}.kriolu-shell .tag{color:#5da300}/* Flashcard front = lime phone-screen look */ .kriolu-shell .face.front{background:var(--brand);color:#0b0d08;box-shadow:0 2px 18px rgba(109,179,0,.32)}.kriolu-shell .face.front .tag{color:#3f6212}/* Lesson player */ .kriolu-shell .speak-btn{background:var(--brand);color:#0b0d08;box-shadow:0 2px 8px rgba(109,179,0,.32)}.kriolu-shell .opt.selected{border-color:#84d604;background:var(--brand-soft);color:#274d00}.kriolu-shell .prompt-word{background:#f7fee0;border-color:#d9f99d}.kriolu-shell .player .bar i{background:var(--brand)!important}/* WOTD + stage banners keep identity, primary stage = lime */ .kriolu-shell .wotd{border-color:var(--brand);background:linear-gradient(135deg,#f7fee0,#fff)}.kriolu-shell .node.current{outline:4px solid rgba(166,242,10,.35)}.kriolu-shell .reward.xp{border-color:var(--brand);background:#f7fee0;color:#3f6212}.reward.gems{border-color:#a78bfa;background:#f5f3ff;color:#5b21b6}.kriolu-shell input.search:focus, .kriolu-shell .textin:focus, .kriolu-shell .type-input:focus{outline:3px solid rgba(166,242,10,.45);border-color:#84d604}.kriolu-shell .tabs button.active{background:#0b0d08;border-color:#0b0d08;color:var(--brand)}.kriolu-shell .pill-toggle button.active{background:var(--brand);color:#0b0d08}.kriolu-shell .quest .bar i{background:var(--brand)}.kriolu-shell .ad-box{background:radial-gradient(600px 300px at 80% 0%,rgba(166,242,10,.4),transparent 60%),var(--black)}.kriolu-shell .ad-count{color:var(--brand)}.kriolu-shell .progress-dots i.on{background:var(--brand)}.kriolu-shell footer a{color:#3f6212}/* ================= Typography · Roboto ================= */ .kriolu-shell h1, .kriolu-shell h2, .kriolu-shell h3, .kriolu-shell .logo, .kriolu-shell .kri, .kriolu-shell .face .big{font-family:"Roboto",system-ui,sans-serif;letter-spacing:-.01em}.kriolu-shell h1{font-weight:900}.kriolu-shell h2, .kriolu-shell h3{font-weight:700}.kriolu-shell button, .kriolu-shell input, .kriolu-shell select, .kriolu-shell textarea{font-family:"Roboto",system-ui,sans-serif}.kriolu-shell{font-weight:500}.kriolu-shell .opt, .kriolu-shell .chip, .kriolu-shell .navbtn, .kriolu-shell .node-label, .kriolu-shell .course-meta{font-family:"Roboto",system-ui,sans-serif}/* ================= RESPONSIVE · mobile / tablet / desktop ================= */ .kriolu-shell{overflow-x:clip}.kriolu-shell .course-meta{flex-wrap:wrap}.kriolu-shell .unit-banner{flex-wrap:wrap}/* --- Tablet (981–1024px): keep sidebar, tuck the right rail away --- */ @media(max-width:1024px) and (min-width:981px){.kriolu-shell .layout{grid-template-columns:200px 1fr;gap:20px}
}/* --- Phones & small tablets (≤760px) --- */ @media(max-width:760px){.kriolu-shell .topbar-in{flex-wrap:wrap;gap:8px 10px;padding:8px 12px}.kriolu-shell .logo{font-size:20px;gap:8px}.kriolu-shell .logo-badge{width:32px;height:32px;border-radius:10px;font-size:18px}.kriolu-shell .top-stats{order:1;gap:6px}.kriolu-shell .pill{padding:4px 9px;font-size:12.5px;gap:4px}.kriolu-shell #loginBtn{order:3;flex:1 1 auto;margin-left:0!important;padding:9px 10px!important;font-size:13px}.kriolu-shell .hero-card{padding:16px}.kriolu-shell .mini-card{padding:14px}.kriolu-shell .unit-banner{padding:16px}.kriolu-shell .tabs button{flex:1 1 45%}.kriolu-shell .textin{font-size:16px}/* 16px+ stops iOS focus-zoom */ .kriolu-shell .landing-hero .cta-row .btn{flex:1 1 100%}.kriolu-shell .landing-hero h1{font-size:clamp(26px,7.5vw,34px)}.kriolu-shell .modal{padding:22px 16px;border-radius:18px}.kriolu-shell .layout{padding-bottom:120px}
}/* --- Small phones (≤480px) --- */ @media(max-width:480px){.kriolu-shell .bottomnav button{font-size:20px;padding:6px 0}.kriolu-shell .bottomnav button span{font-size:8.5px;letter-spacing:.02em}.kriolu-shell .grid{grid-template-columns:1fr}.kriolu-shell .how-grid{grid-template-columns:1fr}.kriolu-shell .wordrow .kri{font-size:17px}.kriolu-shell h2{font-size:22px}.kriolu-shell .conv-bar{gap:8px}.kriolu-shell .conv-pill{padding:6px 10px;font-size:12px}.kriolu-shell .price-card{padding:12px}.kriolu-shell .trans-grid{gap:8px}.kriolu-shell .pill{font-size:12px;padding:4px 8px}.kriolu-shell .logo{font-size:19px}
}/* --- Big desktops (≥1280px): more room to breathe --- */ @media(min-width:1280px){.kriolu-shell .layout{max-width:1240px;grid-template-columns:240px 1fr;gap:32px}.kriolu-shell .topbar-in, .kriolu-shell footer{max-width:1240px}.kriolu-shell .landing-hero{padding:46px 40px}
}/* --- Short landscape phones: tighten conversation view --- */ @media(max-height:560px){.kriolu-shell .conv-ov > p{display:none}.kriolu-shell .conv-live{min-height:22px;padding:4px 18px}
}
/* ================= DARK MODE ================= */
.kriolu-shell.dark{--ink:#edf2e0;--muted:#9ca987;--line:#2b3221;--sky-dark:#9ed44e;--brand-soft:#232b10;--bg:#151a0e;background:#0d100a;color:var(--ink)}
.kriolu-shell.dark .mini-card,.kriolu-shell.dark .how-card,.kriolu-shell.dark .expr-card,.kriolu-shell.dark .story-card,.kriolu-shell.dark .testi,.kriolu-shell.dark .trans-box,.kriolu-shell.dark .modal,.kriolu-shell.dark .price-card,.kriolu-shell.dark .side-card,.kriolu-shell.dark .rail-card{background:#161b0f}
.kriolu-shell.dark .hero-card{background:linear-gradient(135deg,#181e0f,#141810)}
.kriolu-shell.dark .iconbtn{background:#1e2413;color:var(--brand)}
.kriolu-shell.dark .iconbtn:hover{background:#273016}
.kriolu-shell.dark .btn.ghost{background:#1c2212;color:#c9f24b}
.kriolu-shell.dark .player{background:#0f130a}
.kriolu-shell.dark .opt,.kriolu-shell.dark .chip{background:#1c2212}
.kriolu-shell.dark .opt.selected{background:#232b10;border-color:var(--sky);color:#c9f24b}
.kriolu-shell.dark .face.back{background:#161b0f}
.kriolu-shell.dark .search,.kriolu-shell.dark .textin{background:#12160d;color:var(--ink)}
.kriolu-shell.dark .tabs button,.kriolu-shell.dark .pill-toggle button{background:#1c2212}
.kriolu-shell.dark .navbtn{color:#aab68f}
.kriolu-shell.dark .navbtn:hover{background:#1a2010}
.kriolu-shell.dark .navbtn.active{background:#232b10;border-color:#4a5526;color:#c9f24b}
.kriolu-shell.dark .pill:hover{background:rgba(255,255,255,.14)}
.kriolu-shell.dark .pill.xp{background:#33290d;color:#ffd83d}
.kriolu-shell.dark .wordrow{border-bottom:1px solid #262c1b}
.kriolu-shell.dark .wotd{background:linear-gradient(135deg,#232b10,#161b0f)}
.kriolu-shell.dark .node.locked{background:#242a18;color:#6e7a58}
.kriolu-shell.dark .node.locked::after{background:#39422a}
.kriolu-shell.dark .bar{background:#242a18}
.kriolu-shell.dark .progress-dots i{background:#2a3220}
.kriolu-shell.dark .start-tag{background:#1c2212;color:#c9f24b}
.kriolu-shell.dark .ring-num,.kriolu-shell.dark .price-card .amount{color:#c9f24b}
.kriolu-shell.dark .stage-lock button{background:#1c2212;color:#c9f24b}
.kriolu-shell.dark .chip-ex,.kriolu-shell.dark .autospeak,.kriolu-shell.dark .conv-pill{background:#1c2212;color:#aab68f}
.kriolu-shell.dark .chip-ex:hover{background:#242c14}
.kriolu-shell.dark .chip-ex.on{background:#28320f;border-color:#84d604;color:#c9f24b}
.kriolu-shell.dark .autospeak.on{background:#232b10;border-color:#4a5526;color:#c9f24b}
.kriolu-shell.dark .pb-cat{background:#1c2212;color:#aab68f;border-color:#2b3221}
.kriolu-shell.dark .pb-cat.on{background:#232b10;border-color:#4a5526;color:#c9f24b}
.kriolu-shell.dark .pbchip{color:#c9f24b;background:#232b10}
.kriolu-shell.dark .auth-tab{background:#1c2212;color:#aab68f;border-color:#2b3221}
.kriolu-shell.dark .auth-tab.on{background:#232b10;border-color:#4a5526;color:#c9f24b}
.kriolu-shell.dark .auth-err{background:#2a1210;border-color:#5c1f1a;color:#ff9d9d}
/* ===== v1.7.3 dark readability pass ===== */
.kriolu-shell.dark{--green-dark:#9ed44e;--orange-dark:#ffc46b;--purple-dark:#c4a8ff}
.kriolu-shell.dark .lvl-tint{background:#1a2211 !important;border:1px solid #262c1b}
.kriolu-shell.dark .testi p{color:#c7d3b8}
.kriolu-shell.dark .story-cover{background:#161b0f !important}
.kriolu-shell.dark .face.back .big{color:var(--ink) !important}
.kriolu-shell.dark .pill-toggle button.active{background:#232b10;border-color:#4a5526;color:#c9f24b}
.kriolu-shell.dark .price-card .amount,.kriolu-shell.dark .ring-num{color:#c9f24b}
.kriolu-shell.dark .stage-lock button{background:#1c2212;color:#c9f24b;border-color:#2b3221}
.kriolu-shell.dark .conv-ov{background:#0d100a}
.kriolu-shell.dark .conv-bar{background:#12160d}
.kriolu-shell.dark .bub.in{background:#1c2212}
.kriolu-shell.dark .gloss span{background:#1f2a10;border-color:#3f4d1c}
.kriolu-shell.dark .gloss span.unknown{background:#38150f;border-color:#7a2f24;color:#fca5a5}
.kriolu-shell.dark .price-card.popular{background:#26240f}
.kriolu-shell.dark .testi p{color:#c4cdb2}
.kriolu-shell.dark .toast{background:var(--brand);color:#0b0d08}
.kriolu-shell.dark footer a{color:#c9f24b}
.kriolu-shell.dark .reftable th{background:#232b10}
.kriolu-shell.dark .bottomnav{background:#12160d}
.kriolu-shell.dark .bottomnav button.active{color:#c9f24b;background:#232b10}
.kriolu-shell.dark .more-sheet{background:#161b0f}
.kriolu-shell.dark .more-grid button{background:#1c2212}
.kriolu-shell.dark .more-grid button.active{background:#28320f;border-color:#4a5526}
@media(max-width:760px){.kriolu-shell #themeBtn{order:2;flex:0 0 auto;margin-left:0!important;padding:9px 10px!important}}

/* ===== ALPHABET (v1.3.0) ===== */
.az-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.az-tile{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 6px 11px;text-align:center;cursor:pointer;transition:transform .12s ease,border-color .12s ease}
.az-tile:hover{transform:translateY(-2px);border-color:var(--brand)}
.az-tile .az-l{font-size:26px;font-weight:900;color:var(--brand-dark);line-height:1.05}
.az-tile .az-w{font-size:13px;font-weight:700;margin-top:6px}
.az-tile .az-e{font-size:11px;color:var(--muted);margin-top:2px}
.az-tile.dg{border-color:var(--brand);background:var(--brand-soft)}
.az-detail{display:none;margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px}
.az-detail.on{display:block}
.az-big{font-size:54px;font-weight:900;color:var(--brand-dark);line-height:1}
.az-lab{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:16px 0 6px}
.az-row{display:flex;align-items:center;gap:12px}
.az-row>div:first-child{flex:1}
.az-cred{margin-top:14px;font-size:12px;color:var(--muted);text-align:center}
.az-cred a{color:var(--brand-dark);font-weight:700;text-decoration:none}
.kriolu-shell.dark .az-tile{background:#161b0f}
.kriolu-shell.dark .az-tile.dg{background:#1c2212}
.kriolu-shell.dark .az-detail{background:#161b0f}
.kriolu-shell.dark .az-big,.kriolu-shell.dark .az-tile .az-l{color:#c9f24b}
.kriolu-shell.dark .az-cred a{color:#c9f24b}

/* ===== DESKTOP POLISH (v1.3.5) ===== */
.kriolu-shell button{cursor:pointer}
.kriolu-shell :focus-visible{outline:3px solid var(--brand);outline-offset:2px}
@media(min-width:981px){
  .kriolu-shell .layout{max-width:1280px;padding:30px 28px 70px;gap:32px}
  .kriolu-shell .topbar-in,.kriolu-shell footer{max-width:1280px}
  .kriolu-shell .sidebar{top:88px;gap:8px}
  .kriolu-shell .navbtn{padding:13px 16px;transition:background .15s ease,transform .12s ease}
  .kriolu-shell .navbtn:hover{background:var(--brand-soft)}
  .kriolu-shell .navbtn:active{transform:scale(.98)}
  .kriolu-shell .rail-card{padding:22px;border-radius:18px}
  .kriolu-shell .mini-card{padding:22px;border-radius:18px;transition:box-shadow .18s ease,transform .18s ease}
  .kriolu-shell .mini-card:hover{box-shadow:0 12px 32px rgba(11,13,8,.09);transform:translateY(-2px)}
  .kriolu-shell .hero-card{padding:26px}
  .kriolu-shell .wordrow{padding:13px 12px;border-radius:12px;transition:background .14s ease}
  .kriolu-shell .wordrow:hover{background:#f4f8e6}
  .kriolu-shell.dark .wordrow:hover{background:#1a2010}
  .kriolu-shell .btn{transition:transform .12s ease,filter .12s ease}
  .kriolu-shell .btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
  .kriolu-shell .btn:active{transform:translateY(1px)}
  .kriolu-shell .iconbtn{transition:border-color .14s ease,transform .12s ease}
  .kriolu-shell .iconbtn:hover{border-color:var(--brand);transform:scale(1.06)}
  .kriolu-shell .chip:hover{border-color:var(--brand)}
  .kriolu-shell .landing-hero{min-height:400px;display:flex;flex-direction:column;justify-content:center;padding:60px 52px;border-radius:28px}
  .kriolu-shell .landing-hero h1{font-size:clamp(36px,3.4vw,52px)}
  .kriolu-shell .landing-hero p{font-size:17.5px;max-width:640px}
  .kriolu-shell .landing-hero .cta-row{margin-top:24px}
  .kriolu-shell .landing-hero .cta-row .btn{padding:15px 28px;font-size:16px}
  .kriolu-shell .grid{gap:16px}
  .kriolu-shell .section-title{font-size:21px}
  .kriolu-shell .az-grid{gap:12px}
  .kriolu-shell #phraseList{columns:2;column-gap:26px}
  .kriolu-shell .sidebar .rail-card{margin-top:4px}
}
@media(min-width:1440px){
  .kriolu-shell .layout{max-width:1360px}
  .kriolu-shell .topbar-in,.kriolu-shell footer{max-width:1360px}
}


/* ---------- Install app (A2HS) ---------- */
.a2hs-ov{position:fixed;inset:0;background:rgba(11,13,8,.62);z-index:1100;display:grid;place-items:center;padding:20px;animation:a2hsIn .25s}
@keyframes a2hsIn{from{opacity:0}to{opacity:1}}
.a2hs-card{width:100%;max-width:400px;background:#fff;border:1px solid #e3e7ea;border-radius:20px;padding:20px;position:relative;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.a2hs-head{display:flex;align-items:flex-start;justify-content:space-between}
.a2hs-badge{width:52px;height:52px;border-radius:14px;background:#0b0d08;color:#a6f20a;display:grid;place-items:center;margin-bottom:12px}
.a2hs-badge svg{width:28px;height:28px}
.a2hs-close{background:none;border:0;padding:6px;color:#8a93a0;cursor:pointer;line-height:0;border-radius:8px}
.a2hs-close:hover{color:#0b0d08;background:#eef1f4}
.a2hs-card h3{margin:0 0 4px;font-size:20px}
.a2hs-sub{color:#5b6472;font-size:13.5px;line-height:1.55;margin:0 0 14px}
.a2hs-steps{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.a2hs-step{display:flex;gap:12px;align-items:center;font-size:14px;line-height:1.45}
.a2hs-ic{flex:0 0 44px;width:44px;height:44px;border-radius:12px;background:#f2fccf;border:1px solid #cdea7d;color:#3f6212;display:grid;place-items:center}
.a2hs-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.a2hs-go{flex:1;background:#a6f20a;color:#0b0d08;border:0;border-radius:12px;padding:13px 16px;font:inherit;font-weight:900;font-size:15px;cursor:pointer;box-shadow:0 2px 8px rgba(109,179,0,.32)}
.a2hs-go:active{transform:translateY(2px);box-shadow:0 2px 8px rgba(109,179,0,.32)}
.a2hs-later{flex:1;background:none;border:0;color:#5b6472;font:inherit;font-weight:800;font-size:13.5px;cursor:pointer;text-decoration:underline;padding:8px}
.a2hs-never{display:block;margin:12px auto 0;background:none;border:0;color:#9aa3ad;font:inherit;font-size:12px;cursor:pointer;text-decoration:underline}
.a2hs-ov.a2hs-dark .a2hs-card{background:#141a0e;border-color:#2a331a}
.a2hs-ov.a2hs-dark .a2hs-card h3{color:#fff}
.a2hs-ov.a2hs-dark .a2hs-sub{color:#a9b39a}
.a2hs-ov.a2hs-dark .a2hs-step{color:#e7ecd9}
.a2hs-ov.a2hs-dark .a2hs-ic{background:#1d2612;border-color:#3c4d1a;color:#a6f20a}
.a2hs-ov.a2hs-dark .a2hs-close{color:#a9b39a}
.a2hs-ov.a2hs-dark .a2hs-close:hover{color:#fff;background:#232b16}
.a2hs-ov.a2hs-dark .a2hs-later{color:#a9b39a}
.a2hs-ov.a2hs-dark .a2hs-never{color:#9ca987}

.kriolu-shell .kri-motto{color:var(--brand);font-weight:900;font-size:14px;letter-spacing:.16em;text-transform:uppercase;margin:10px 0 6px;text-shadow:0 1px 10px rgba(0,0,0,.55)}

/* Motto visible on mobile too */
@media(max-width:760px){.kriolu-shell .logo small{font-size:8.5px;letter-spacing:.1em;margin-top:1px}}

.kriolu-shell{position:relative}
/* ======= SPLASH · logo boot animation ======= */
.kriolu-shell .splash{position:fixed;inset:0;z-index:9999;background:radial-gradient(720px 520px at 50% 32%,#171f0e 0%,#0b0d08 72%);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:opacity .45s ease,visibility .45s}
.kriolu-shell .splash.splash-out{opacity:0;visibility:hidden;pointer-events:none}
.kriolu-shell .splash-in{text-align:center;position:relative;z-index:1}
.kriolu-shell .splash-badge{width:112px;height:112px;margin:0 auto 16px;border-radius:28px;background:#fff;overflow:hidden;box-shadow:0 22px 55px rgba(0,0,0,.65);animation:splashPop .9s cubic-bezier(.18,.89,.32,1.28) both,splashRing 1.5s ease-out .5s 4}
.kriolu-shell .splash-badge img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes splashPop{0%{transform:scale(.35) rotate(-10deg);opacity:0}55%{transform:scale(1.07) rotate(2deg);opacity:1}100%{transform:scale(1) rotate(0)}}
@keyframes splashRing{0%{box-shadow:0 0 0 0 rgba(166,242,10,.55),0 22px 55px rgba(0,0,0,.65)}100%{box-shadow:0 0 0 38px rgba(166,242,10,0),0 22px 55px rgba(0,0,0,.65)}}
.kriolu-shell .splash-name{font-size:34px;font-weight:900;color:#fff;letter-spacing:-.5px;animation:splashUp .55s ease .7s both}
.kriolu-shell .splash-name span{color:var(--brand)}
@keyframes splashUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.kriolu-shell .splash-motto{color:var(--brand);font-weight:900;font-size:12px;letter-spacing:.24em;text-transform:uppercase;margin-top:8px;animation:splashUp .55s ease 1.3s both}
.kriolu-shell .splash-bar{width:150px;height:5px;border-radius:99px;background:rgba(255,255,255,.14);margin:26px auto 0;overflow:hidden;animation:splashUp .5s ease 1.7s both}
.kriolu-shell .splash-bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--brand);animation:splashLoad 4.7s cubic-bezier(.45,.1,.3,1) 1.7s forwards}
@keyframes splashLoad{to{width:100%}}
.kriolu-shell .splash-powered{margin-top:22px;font-size:11px;font-weight:700;letter-spacing:.14em;color:rgba(255,255,255,.38);text-transform:uppercase;animation:splashUp .6s ease 2.2s both}
.kriolu-shell .splash-words{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.kriolu-shell .splash-word{position:absolute;transform:translate(-50%,-50%) rotate(var(--r,0deg));font-weight:900;letter-spacing:.05em;color:rgba(255,255,255,.13);white-space:nowrap;animation:splashWordIn .9s ease var(--dl,0s) both,splashFloat var(--d,5s) ease-in-out calc(var(--dl,0s) + .9s) infinite alternate}
.kriolu-shell .splash-word.lime{color:rgba(166,242,10,.3)}
@keyframes splashWordIn{from{opacity:0}to{opacity:1}}
@keyframes splashFloat{from{transform:translate(-50%,-50%) rotate(var(--r,0deg)) translateY(-7px)}to{transform:translate(-50%,-50%) rotate(var(--r,0deg)) translateY(7px)}}
@media(prefers-reduced-motion:reduce){.kriolu-shell .splash-badge{animation:splashPop .01s both}.kriolu-shell .splash-name,.kriolu-shell .splash-motto,.kriolu-shell .splash-bar,.kriolu-shell .splash-powered{animation-duration:.01s;animation-delay:0s}.kriolu-shell .splash-bar i{animation-duration:.01s;animation-delay:0s}.kriolu-shell .splash-word{animation:splashWordIn .01s both}}


/* ===== v1.7.0 professional pass ===== */
.kriolu-shell .unit-ring{flex:none;width:46px;height:46px;border-radius:50%;border:2.5px solid rgba(0,0,0,.8);background:rgba(255,255,255,.35);display:grid;place-items:center;font-weight:900;font-size:12px;color:inherit}
.kriolu-shell .mini-card,.kriolu-shell .hero-card,.kriolu-shell .rail-card,.kriolu-shell .side-card,.kriolu-shell .testi,.kriolu-shell .price-card,.kriolu-shell .trans-box{box-shadow:0 1px 2px rgba(16,24,40,.05),0 4px 12px rgba(16,24,40,.05)}
.kriolu-shell .fact-c{padding:0;overflow:hidden}
.kriolu-shell .fact-c .fc-b{padding:18px}
.kriolu-shell .fact-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#0b0d08}


/* ---------- Chat ku Max (v1.26.0) ---------- */
.kriolu-shell .chat-msgs{max-height:44vh;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:4px 2px}
.kriolu-shell .chat-msg{display:flex;flex-direction:column;max-width:88%}
.kriolu-shell .chat-msg.max{align-self:flex-start}
.kriolu-shell .chat-msg.me{align-self:flex-end}
.kriolu-shell .chat-bubble{border:1px solid var(--line);border-radius:16px;padding:10px 14px;background:#fff}
.kriolu-shell .chat-msg.me .chat-bubble{background:#eefbcc;border-color:#cbe98a}
.kriolu-shell .chat-bubble .kri{font-size:17px;font-weight:900}
.kriolu-shell .chat-bubble .en{display:block;color:var(--muted);font-size:13px;margin-top:3px}
.kriolu-shell .chat-bubble .chat-spk{width:32px;height:32px;font-size:14px;border-radius:50%;margin-right:8px;vertical-align:middle}
.kriolu-shell .chat-hint{color:var(--muted);font-size:13px;margin:10px 0 6px;font-weight:700}
.kriolu-shell .chat-chips{display:flex;flex-wrap:wrap;gap:8px}
.kriolu-shell .chat-chip{cursor:pointer}
.kriolu-shell .chat-chip:hover{border-color:var(--brand);background:#f7fee0}
.kriolu-shell.dark .chat-bubble{background:#161b0f}
.kriolu-shell.dark .chat-msg.me .chat-bubble{background:#232b12;border-color:#43531c}
.kriolu-shell.dark .chat-chip{background:#161b0f;color:var(--ink)}
.kriolu-shell.dark .chat-chip:hover{background:#20260f}


/* ---------- Ouve Kriolu (v1.27.0) ---------- */
.kriolu-shell .ep-transcript{border:1px solid var(--line);border-radius:16px;padding:18px 16px;background:#fff;text-align:center;min-height:96px;display:flex;flex-direction:column;justify-content:center;cursor:pointer}
.kriolu-shell .ep-transcript:hover{border-color:var(--brand);background:#f7fee0}
.kriolu-shell .ep-transcript .kri{font-size:19px;font-weight:900}
.kriolu-shell .ep-transcript .en{color:var(--muted);font-size:14px;margin-top:6px}
.kriolu-shell .ep-transport{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:14px;flex-wrap:wrap}
.kriolu-shell .ep-speed{cursor:pointer;border-radius:999px;font-weight:900}
.kriolu-shell.dark .ep-transcript{background:#161b0f}
.kriolu-shell.dark .ep-speed{background:#161b0f;color:var(--ink)}
.kriolu-shell.dark .ep-transcript:hover{background:#20260f}

/* ---- v1.28.0 · Translator 2.0 ---- */
.kriolu-shell .lang-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.kriolu-shell .lang-lab{font-weight:900;font-size:12px;color:var(--muted);letter-spacing:.06em}
.kriolu-shell .tr-pills button{padding:7px 12px;font-size:13px}
.kriolu-shell .tr-detected{font-size:12px;color:var(--muted);font-weight:700}
.kriolu-shell .tr-variant{margin-top:10px;padding:10px 12px;border-radius:12px;background:#f3fee0;border:1px dashed #9ad628;font-size:15px;line-height:1.5}
.kriolu-shell .tr-note{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.5}
.kriolu-shell .tr-fb.voted{border:2px solid var(--brand);background:#f3fee0}
.kriolu-shell .tr-hist{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kriolu-shell.dark .tr-variant{background:#161b0f;color:var(--ink);border-color:#3d5c00}
.kriolu-shell.dark .tr-fb.voted{background:#161b0f}
.lang-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.lang-lab{font-weight:900;font-size:12px;color:var(--muted);letter-spacing:.06em}
.tr-pills button{padding:7px 12px;font-size:13px}
.tr-detected{font-size:12px;color:var(--muted);font-weight:700}
.tr-variant{margin-top:10px;padding:10px 12px;border-radius:12px;background:#f3fee0;border:1px dashed #9ad628;font-size:15px;line-height:1.5}
.tr-note{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.5}
.tr-fb.voted{border:2px solid var(--brand);background:#f3fee0}
.tr-hist{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- v1.29.0 · KrioluBridge Live ---- */
.kriolu-shell .dash-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.kriolu-shell .live-band{margin-top:14px;background:var(--black);border-radius:20px;padding:20px;color:#fff}
.kriolu-shell .live-band-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.kriolu-shell .live-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:10px}
.kriolu-shell .live-tool{background:#161b0f;border:1px solid #2b3221;border-radius:14px;padding:14px 12px;text-align:left;cursor:pointer;color:#fff;font-family:inherit;font-weight:700;font-size:14px;transition:transform .12s,border-color .12s}
.kriolu-shell .live-tool:hover{transform:translateY(-2px);border-color:var(--brand)}
.kriolu-shell .live-tool .lt-ic{font-size:24px}
.kriolu-shell .live-tool b{display:block;margin:6px 0 4px;font-size:14px}
.kriolu-shell .live-tool small{color:#aab68f;font-weight:500;font-size:12px;line-height:1.45;display:block}
.kriolu-shell .live-tool.big small{font-size:13px}
.kriolu-shell .live-chip{display:inline-block;margin-top:8px;font-size:10px;font-weight:900;letter-spacing:.06em;border-radius:999px;padding:3px 8px}
.kriolu-shell .live-chip.on{background:var(--brand);color:#0b0d08}
.kriolu-shell .live-chip.android{background:#232b10;color:#c9f24b;border:1px dashed #4a5526}
.kriolu-shell .quick-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.kriolu-shell .quick-chip{flex:1;min-width:130px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;font-weight:800;font-family:inherit;cursor:pointer;color:inherit;font-size:14px}
.kriolu-shell .live-body{flex:1;overflow-y:auto;padding:18px;max-width:640px;margin:0 auto;width:100%}
.kriolu-shell .img-drop{border:2px dashed var(--line);border-radius:14px;padding:26px 14px;text-align:center;color:var(--muted);font-weight:700;cursor:pointer;background:#fff;line-height:1.6}
.kriolu-shell.dark .quick-chip{background:#161b0f;color:var(--ink)}
.kriolu-shell.dark .img-drop{background:#12160d;color:var(--muted)}
@media(max-width:700px){.kriolu-shell .dash-row{grid-template-columns:1fr}.kriolu-shell .live-band-head{flex-direction:column;align-items:flex-start}.kriolu-shell .live-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}}
.dash-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.live-band{margin-top:14px;background:var(--black);border-radius:20px;padding:20px;color:#fff}
.live-band-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.live-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:10px}
.live-tool{background:#161b0f;border:1px solid #2b3221;border-radius:14px;padding:14px 12px;text-align:left;cursor:pointer;color:#fff;font-family:inherit;font-weight:700;font-size:14px;transition:transform .12s,border-color .12s}
.live-tool:hover{transform:translateY(-2px);border-color:var(--brand)}
.live-tool .lt-ic{font-size:24px}
.live-tool b{display:block;margin:6px 0 4px;font-size:14px}
.live-tool small{color:#aab68f;font-weight:500;font-size:12px;line-height:1.45;display:block}
.live-tool.big small{font-size:13px}
.live-chip{display:inline-block;margin-top:8px;font-size:10px;font-weight:900;letter-spacing:.06em;border-radius:999px;padding:3px 8px}
.live-chip.on{background:var(--brand);color:#0b0d08}
.live-chip.android{background:#232b10;color:#c9f24b;border:1px dashed #4a5526}
.quick-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.quick-chip{flex:1;min-width:130px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;font-weight:800;font-family:inherit;cursor:pointer;color:inherit;font-size:14px}
.live-body{flex:1;overflow-y:auto;padding:18px;max-width:640px;margin:0 auto;width:100%}
.img-drop{border:2px dashed var(--line);border-radius:14px;padding:26px 14px;text-align:center;color:var(--muted);font-weight:700;cursor:pointer;background:#fff;line-height:1.6}
body.dark .quick-chip{background:#161b0f;color:var(--ink)}
body.dark .img-drop{background:#12160d;color:var(--muted)}
@media(max-width:700px){.dash-row{grid-template-columns:1fr}.live-band-head{flex-direction:column;align-items:flex-start}.live-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}}

/* ---- v1.30.0 · Voice Translator (boka a boka) ---- */
.kriolu-shell .conv-setup{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:10px 12px 6px;background:#fff;border-bottom:2px solid var(--line)}
.kriolu-shell .conv-side{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:999px;border:2px solid transparent}
.kriolu-shell .conv-side.turn{border-color:var(--brand);background:var(--brand-soft)}
.kriolu-shell .conv-lab{font-weight:900;font-size:12px;color:var(--muted)}
.kriolu-shell .conv-sel{padding:8px 10px;border:1px solid var(--line);border-radius:999px;font-family:inherit;font-weight:800;background:#fff;color:inherit;font-size:13px}
.kriolu-shell .conv-turn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font-weight:800;font-size:13px;color:#52607a;cursor:pointer}
.kriolu-shell .conv-act{border:1px solid var(--line);background:#fff;border-radius:999px;min-width:40px;height:40px;font-size:15px;cursor:pointer;color:inherit;font-family:inherit}
.kriolu-shell .bub-copy{border:none;background:rgba(0,0,0,.14);border-radius:8px;padding:2px 7px;margin-left:8px;font-size:12px;cursor:pointer;color:inherit;font-family:inherit}
.kriolu-shell .bub-copy:hover{background:rgba(0,0,0,.26)}
.kriolu-shell.dark .conv-setup{background:#0f130a}
.kriolu-shell.dark .conv-sel,.kriolu-shell.dark .conv-turn,.kriolu-shell.dark .conv-act{background:#1c2212;color:var(--ink)}
.conv-setup{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:10px 12px 6px;background:#fff;border-bottom:2px solid var(--line)}
.conv-side{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:999px;border:2px solid transparent}
.conv-side.turn{border-color:var(--brand);background:var(--brand-soft)}
.conv-lab{font-weight:900;font-size:12px;color:var(--muted)}
.conv-sel{padding:8px 10px;border:1px solid var(--line);border-radius:999px;font-family:inherit;font-weight:800;background:#fff;color:inherit;font-size:13px}
.conv-turn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font-weight:800;font-size:13px;color:#52607a;cursor:pointer}
.conv-act{border:1px solid var(--line);background:#fff;border-radius:999px;min-width:40px;height:40px;font-size:15px;cursor:pointer;color:inherit;font-family:inherit}
.bub-copy{border:none;background:rgba(0,0,0,.14);border-radius:8px;padding:2px 7px;margin-left:8px;font-size:12px;cursor:pointer;color:inherit;font-family:inherit}
.bub-copy:hover{background:rgba(0,0,0,.26)}
body.dark .conv-setup{background:#0f130a}
body.dark .conv-sel,body.dark .conv-turn,body.dark .conv-act{background:#1c2212;color:var(--ink)}