*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{font-family:"Kanit","Comic Sans MS","Tahoma",sans-serif;background:linear-gradient(160deg,#a8e6ff,#ffd6f2 60%,#fff3b0);
min-height:100vh;display:flex;justify-content:center;padding:14px;color:#333}
.app{width:100%;max-width:660px}
.card{background:#fff;border-radius:26px;padding:20px;box-shadow:0 10px 26px rgba(0,0,0,.14)}
h1{font-size:24px;text-align:center;color:#ff5aa7;line-height:1.4}
h3{font-size:17px;margin-top:16px}
.sub{text-align:center;color:#777;margin:6px 0 14px;font-size:14px;line-height:1.6}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;color:#666;font-weight:bold;margin-bottom:10px;flex-wrap:wrap}

.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.tile{position:relative;border:none;border-radius:20px;padding:15px 8px;font-size:16px;font-weight:bold;color:#fff;
cursor:pointer;transition:.15s;font-family:inherit;text-shadow:0 1px 3px rgba(0,0,0,.28);line-height:1.5}
.tile:active{transform:scale(.95)}
.tile .ic{display:block;font-size:28px}
.tile.wide{grid-column:span 2}
.badge{display:inline-block;margin-top:5px;background:rgba(255,255,255,.92);color:#444;font-size:12px;border-radius:20px;padding:2px 10px;text-shadow:none}

.bar{height:13px;background:#eee;border-radius:10px;overflow:hidden;margin-bottom:12px}
.fill{height:100%;background:linear-gradient(90deg,#4ade80,#22c55e);width:0;transition:.3s}
.tbar{height:9px;background:#f1f1f1;border-radius:10px;overflow:hidden;margin-bottom:12px}
.tfill{height:100%;background:linear-gradient(90deg,#38bdf8,#0ea5e9);width:100%;transition:1s linear}
.tbar.warn .tfill{background:linear-gradient(90deg,#fb923c,#ef4444)}

.q{font-size:23px;text-align:center;margin:14px 0 12px;line-height:1.6;font-weight:bold}
.parent{background:#fff7ed;border:2px dashed #fbbf24;border-radius:14px;padding:9px;text-align:center;font-size:13px;color:#92400e;margin-bottom:12px}
.opts{display:grid;gap:11px}
.opts.two{grid-template-columns:1fr 1fr}
.opt{border:3px solid #e6e6e6;background:#fafafa;border-radius:20px;padding:14px;font-size:19px;cursor:pointer;
font-family:inherit;transition:.15s;font-weight:bold;line-height:1.5}
.opt:active{transform:scale(.97)}
.opt.color{height:88px}
.opt.ok{background:#d9f7dd;border-color:#22c55e}
.opt.no{background:#ffdddd;border-color:#ef4444}
.fb{text-align:center;font-size:20px;margin-top:12px;min-height:30px;font-weight:bold}

.btn{display:block;width:100%;margin-top:11px;border:none;border-radius:20px;padding:14px;font-size:17px;
font-weight:bold;color:#fff;background:linear-gradient(90deg,#7b5cff,#ff5aa7);cursor:pointer;font-family:inherit}
.btn:active{transform:scale(.98)}
.btn.grey{background:linear-gradient(90deg,#64748b,#94a3b8)}
.btn.gold{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.btn.teal{background:linear-gradient(90deg,#06b6d4,#22d3ee)}
.mini{background:#eee;border:none;border-radius:14px;padding:6px 11px;font-size:12px;cursor:pointer;font-family:inherit;font-weight:bold;color:#555}
.mini.on{background:#ffe27a;color:#92400e}
.spk{background:#ffe27a;border:none;border-radius:50%;width:50px;height:50px;font-size:23px;cursor:pointer;
display:block;margin:0 auto;box-shadow:0 3px 8px rgba(0,0,0,.15)}
.spk:active{transform:scale(.9)}
.spk.mine{background:#bbf7d0}

.score{text-align:center;font-size:50px;color:#ff5aa7;font-weight:bold}
.stars{text-align:center;font-size:38px;margin:4px 0}
.new{display:inline-block;background:#ff5aa7;color:#fff;border-radius:20px;padding:4px 13px;font-size:13px}
.rev{background:#fff7f7;border-left:6px solid #ef4444;border-radius:12px;padding:11px;margin-top:9px;font-size:15px;line-height:1.7}
.rev b{color:#ef4444}
.good{background:#f1fff4;border-left-color:#22c55e}
.good b{color:#16a34a}
.sw{display:inline-block;width:24px;height:24px;border-radius:7px;vertical-align:-6px;border:2px solid #ccc}

.inp{width:100%;border:3px solid #ffd6f2;border-radius:18px;padding:13px;font-size:19px;font-family:inherit;text-align:center;outline:none}
.inp:focus{border-color:#ff5aa7}
table{width:100%;border-collapse:collapse;margin-top:9px;font-size:14px}
th,td{padding:8px 6px;border-bottom:1px solid #eee;text-align:left}
th{background:#faf5ff;color:#7b5cff}
td.r{text-align:right;font-weight:bold}
.panel{background:#f7f7ff;border-radius:16px;padding:12px;margin-top:12px;font-size:13px;line-height:1.9}
.warn{background:#fffbea;border:2px dashed #f59e0b;border-radius:14px;padding:10px;font-size:13px;margin-top:10px;color:#92400e}
.recitem{border:2px solid #eee;border-radius:14px;padding:10px;margin-top:8px;font-size:14px;line-height:1.6}
.recitem.has{border-color:#22c55e;background:#f6fffa}
.recbtns{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}
.rec{background:#ef4444;color:#fff}
.rec.live{animation:pulse .8s infinite}
@keyframes pulse{50%{opacity:.45}}
select,input[type=range]{font-family:inherit;padding:5px;border-radius:10px;max-width:100%}