/* Telegram Mini App — same "ink & seal" look as the main app v50 */
:root{--bg:#f4f5f9;--card:#fff;--text:#0f1d3a;--muted:#667089;--line:#dde1ec;--blue:#1d3fbd;--onblue:#fff;--gold:#f2a900;--navy:#13245a;--panel:#eceef5;--ok:#0b7350;--okbg:#d9f2e8;--bad:#b3202e;--badbg:#fde3e5;--fz:1}
:root.dark{--bg:#0b1226;--card:#131c36;--text:#eaf0ff;--muted:#93a0c0;--line:#26325a;--blue:#7d97ff;--onblue:#0b1226;--panel:#0f1730;--ok:#6fe0aa;--okbg:rgba(40,160,110,.2);--bad:#ff9aa4;--badbg:rgba(220,70,85,.2)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Kantumruy Pro","Khmer OS",system-ui,sans-serif;font-size:calc(16px*var(--fz));line-height:1.7}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.wrap{max-width:520px;margin:0 auto;padding:12px 14px 96px}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{transform:scale(.94);opacity:0}100%{transform:none;opacity:1}}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
@keyframes spin{to{transform:rotate(360deg)}}
.view{animation:fadeIn .25s both}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* header panel: ink blue with the diamond lattice */
.lat{background-color:var(--navy);background-image:linear-gradient(45deg,rgba(255,255,255,.055) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.055) 75%),linear-gradient(-45deg,rgba(255,255,255,.055) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.055) 75%);background-size:30px 30px;color:#fff;border-bottom:4px solid var(--gold)}
.hero{border-radius:20px;padding:18px 16px}
.title{font-family:Moul,serif;font-weight:400;font-size:19px;line-height:1.9;margin:0}

/* gate screens: connect / waiting / refused */
.gate{min-height:100vh;display:flex;flex-direction:column}
.gate .lat{padding:44px 20px 30px;text-align:center;border-radius:0 0 26px 26px}
.gate .applogo{width:72px;height:72px;margin:0 auto 10px;border-radius:20px;background:#fff;display:grid;place-items:center;font-size:38px}
.gate .sub{color:#d7e0ff;font-size:14px;margin:4px 0 0}
.gbody{flex:1;padding:22px 18px 30px;max-width:460px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.who{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px}
.av{width:52px;height:52px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:20px;color:#fff;background:var(--blue);overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover}
.who b{display:block;font-size:17px;line-height:1.5}.who small{color:var(--muted)}
.steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.steps li{display:flex;gap:12px;align-items:flex-start;font-size:15px}
.steps i{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:14px;background:var(--panel);color:var(--text)}
.steps li.done i{background:var(--ok);color:#fff}
.steps li.now i{background:var(--gold);color:#2a1d00}
.state{text-align:center;padding:8px 0}
.state .big{font-size:52px;line-height:1.3}
.state b{display:block;font-size:20px;margin:4px 0}
.state p{color:var(--muted);margin:0;font-size:15px}
.spin{display:inline-block;width:18px;height:18px;border:2.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite;vertical-align:-3px}
.small{font-size:13px;color:var(--muted);text-align:center;margin:0}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;padding:12px 16px;border:0;border-radius:14px;background:var(--blue);color:var(--onblue);font-weight:700;font-size:16px}
.btn:active{transform:scale(.98)}
.btn.alt{background:var(--card);color:var(--text);border:1px solid var(--line)}
.btn.ok{background:#1f9d6b;color:#fff}.btn.no{background:var(--card);color:var(--bad);border:1px solid var(--line)}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.btn.sm{min-height:40px;padding:6px 12px;font-size:14px;border-radius:11px;width:auto}
.row2{display:flex;gap:10px}.row2 .btn{flex:1}

/* home */
.top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.top .av{width:44px;height:44px;font-size:17px;background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.4)}
.top .nm{flex:1;min-width:0}.top .nm b{display:block;font-size:16px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top .nm small{color:#d7e0ff;font-size:13px}
.ibtn{width:40px;height:40px;flex:none;border-radius:12px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;font-size:18px;display:grid;place-items:center}
.total{display:flex;align-items:baseline;gap:10px;margin:2px 0 12px}
.total b{font-size:46px;line-height:1.1;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}
.total span{color:#e6ecff;font-size:14px;line-height:1.5}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stats div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:8px 10px}
.stats b{display:block;font-size:20px;color:#fff;font-variant-numeric:tabular-nums;line-height:1.4}.stats small{font-size:12px;color:#d7e0ff}
.start{display:flex;flex-direction:column;align-items:center;width:100%;margin:16px 0 12px;padding:16px;border:0;border-radius:16px;background:var(--blue);color:var(--onblue)}
.start span{font-size:20px;font-weight:700}.start small{font-size:13px;opacity:.9}
.start:active{transform:scale(.98)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:12px 6px;border:1px solid var(--line);border-top:3px solid var(--blue);border-radius:14px;background:var(--card)}
.tile.r{border-top-color:#d9434f}.tile.g{border-top-color:var(--gold)}
.tile .e{font-size:24px;line-height:1.3}.tile b{font-size:14px;line-height:1.5}.tile small{font-size:12px;color:var(--muted)}
.tile:disabled{opacity:.55}
.sec{font-size:17px;font-weight:700;margin:22px 0 10px}
.topic{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;margin-bottom:8px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.topic .tn{flex:1;min-width:0}.topic b{display:block;font-size:16px;line-height:1.5}.topic small{color:var(--muted);font-size:13px}
.topic .pc{font-weight:700;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.bar{height:6px;border-radius:99px;background:var(--panel);overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:var(--blue);border-radius:99px}
.bar i.lo{background:#d9434f}.bar i.mid{background:var(--gold)}.bar i.hi{background:#1f9d6b}

/* quiz */
.qtop{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:0 0 14px 14px;border-bottom-width:3px}
.qtop .chip{padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.14);font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.qtop .x{border:0;background:rgba(255,255,255,.14);color:#fff;border-radius:99px;padding:6px 12px;font-weight:700;font-size:14px}
.qtop .sp{flex:1}
.prog{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin:12px 2px}
.prog i{display:block;height:100%;background:var(--blue);transition:width .3s}
.qcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;animation:fadeIn .25s both}
.qno{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:13px}
.star{border:0;background:none;font-size:22px;padding:0 4px;line-height:1}
.qt{font-size:calc(19px*var(--fz));font-weight:700;line-height:1.85;margin:6px 0 14px}
.opt{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;margin-bottom:10px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);text-align:left;font-size:calc(16px*var(--fz))}
.opt .lt{width:34px;height:34px;flex:none;border-radius:9px;display:grid;place-items:center;font-weight:700;background:var(--panel)}
.opt.right{background:var(--okbg);color:var(--ok);border-color:var(--ok);animation:pop .3s both}.opt.right .lt{background:#22a85a;color:#fff}
.opt.wrong{background:var(--badbg);color:var(--bad);border-color:var(--bad);animation:shake .35s both}.opt.wrong .lt{background:#e04848;color:#fff}
.opt.dim{opacity:.55}.opt:disabled{cursor:default}
.fb{padding:10px 14px;border-radius:12px;font-weight:700}.fb.ok{background:var(--okbg);color:var(--ok)}.fb.bad{background:var(--badbg);color:var(--bad)}
.qnav{position:sticky;bottom:0;display:flex;gap:10px;padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,transparent,var(--bg) 35%)}
.qnav .btn{flex:1}

/* result */
.res{text-align:center;padding:26px 16px 22px;border-radius:0 0 22px 22px}
.ring{position:relative;width:140px;height:140px;margin:10px auto 4px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:10;stroke-linecap:round}
.ring .rb{stroke:rgba(255,255,255,.18)}.ring .rf{stroke:var(--gold)}
.ring .rt{position:absolute;inset:0;display:grid;place-content:center}
.ring .rt b{font-size:36px;line-height:1.1}.ring .rt small{color:#d7e0ff}
.msg{color:#e6ecff;margin:6px 0 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin-top:14px}
.tpr{margin-top:10px}.tpl{display:flex;justify-content:space-between;font-size:14px}

/* bottom nav */
.bnav{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--card);border-top:1px solid var(--line);padding:6px 10px calc(6px + env(safe-area-inset-bottom,0px))}
.bnav .in{max-width:520px;margin:0 auto;display:flex}
.bnav button{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;padding:6px 2px;border:0;background:none;color:var(--muted);font-size:12px}
.bnav .bi{font-size:20px;line-height:1.3}
.bnav button.on{color:var(--blue);font-weight:700}
.bnav button.on::before{content:"";position:absolute;top:-7px;left:28%;right:28%;height:3px;border-radius:0 0 3px 3px;background:var(--blue)}
.bnav .dot{position:absolute;top:2px;right:calc(50% - 22px);min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:#d9434f;color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}

/* admin */
.ahead{padding:16px;border-radius:0 0 20px 20px}
.ahead h2{font-family:Moul,serif;font-weight:400;font-size:18px;margin:0}
.counts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.counts div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:8px;text-align:center}
.counts b{display:block;font-size:22px;line-height:1.3}.counts small{font-size:12px;color:#d7e0ff}
.tabs{display:flex;border-bottom:1px solid var(--line);margin:8px 0 12px}
.tabs button{flex:1;padding:12px 4px;border:0;background:none;color:var(--muted);font-size:14px}
.tabs button.on{color:var(--blue);font-weight:700;box-shadow:inset 0 -3px 0 var(--blue)}
.search{width:100%;padding:12px 14px;margin-bottom:12px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--text);font:inherit;outline:none}
.search:focus{border-color:var(--blue)}
.urow{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:10px}
.uh{display:flex;align-items:center;gap:12px}
.uh .av{width:44px;height:44px;font-size:17px}
.uh .ui{flex:1;min-width:0}.uh .ui b{display:block;font-size:15px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.uh .ui small{color:var(--muted);font-size:13px}
.um{font-size:12px;color:var(--muted);margin:6px 0 10px}
.tag{flex:none;font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px}
.tag.p{background:rgba(242,169,0,.18);color:#9a6a00}.tag.a{background:var(--okbg);color:var(--ok)}.tag.b{background:var(--badbg);color:var(--bad)}
:root.dark .tag.p{color:var(--gold)}
.empty{text-align:center;color:var(--muted);padding:30px 10px}
.empty .big{font-size:40px}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:10px 16px;border-radius:12px;font-size:14px;z-index:50;animation:pop .25s both}
.ans{padding:12px 14px;border-radius:12px;background:var(--okbg);color:var(--text);line-height:1.85;animation:fadeIn .25s both}
.ans small{display:block;color:var(--ok);font-weight:700;font-size:13px}
.res .state .big{font-size:56px}