/* ===== APP TOÁN THẦY TRUNG SN — Math360Skill ===== */
:root{
  /* Bảng màu HỒNG TƯƠI + NỀN SÁNG — thương hiệu Thầy Trung SN (hồng tươi · vàng nhạt) */
  --red:#FF1F8F; --red-dark:#D6006F; --gold:#E8A100; --gold-light:#FFE7A8;
  --navy:#A4126E; --navy-dark:#7C0A52; --cream:#FFF6FB; --paper:#FFFFFF;
  --ink:#33202C; --muted:#8A6E7E; --green:#12A554; --line:#F6D3E6;
  --radius:16px; --shadow:0 4px 18px rgba(255,31,143,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:"Segoe UI","Be Vietnam Pro",system-ui,sans-serif;background:var(--cream);color:var(--ink);min-height:100vh}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:50;background:linear-gradient(135deg,#FF6AB5 0%,#FF1F8F 55%,#D6006F 100%);color:#fff;box-shadow:0 3px 14px rgba(214,0,111,.35)}
.hd-in{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:10px 16px}
.hd-in img.logo{width:52px;height:52px;border-radius:12px;background:#fff;padding:3px;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.hd-title{flex:1;min-width:0}
.hd-title h1{font-size:1.15rem;letter-spacing:.4px;color:#FFF6C8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(160,0,80,.4)}
.hd-title small{display:block;font-size:.72rem;color:#FFDCEE;letter-spacing:.6px}
.hd-badge{background:#fff;color:var(--red);font-size:.68rem;font-weight:800;padding:4px 10px;border-radius:999px;letter-spacing:.5px;white-space:nowrap;box-shadow:0 2px 6px rgba(160,0,80,.3)}

/* ---------- Nav ---------- */
nav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:72px;z-index:40}
.nav-in{max-width:1100px;margin:0 auto;display:flex;overflow-x:auto}
.nav-in button{flex:1;min-width:92px;border:0;background:none;font:inherit;font-weight:600;color:var(--muted);padding:12px 8px;cursor:pointer;border-bottom:3px solid transparent;transition:.15s}
/* Icon nhiều màu kiểu iOS: mỗi tab một màu --tc, ô vuông bo góc nền nhạt cùng tông */
.nav-in button .ic{display:flex;justify-content:center;align-items:center;margin:0 auto 4px;width:34px;height:34px;border-radius:11px;background:color-mix(in srgb, var(--tc, #FF1F8F) 14%, #fff);transition:.18s}
.nav-in button .ic svg{width:20px;height:20px;stroke-width:2;stroke:var(--tc, #FF1F8F)}
.nav-in button.on{color:var(--tc);border-bottom-color:var(--tc);background:color-mix(in srgb, var(--tc) 7%, #fff)}
.nav-in button.on .ic{background:var(--tc);box-shadow:0 3px 10px color-mix(in srgb, var(--tc) 45%, transparent);transform:translateY(-1px)}
.nav-in button.on .ic svg{stroke:#fff}
.sic{display:inline-flex;vertical-align:-3px;margin-right:2px}
.sic svg{width:17px;height:17px}
.chip.tab-chip{flex:1;min-width:130px;padding:12px 8px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-color:var(--tc, var(--navy));color:var(--tc, var(--navy))}
.chip.tab-chip .sic svg{width:18px;height:18px;stroke:var(--tc, currentColor)}
.chip.tab-chip.on{background:var(--tc, var(--navy));color:#fff;border-color:var(--tc, var(--navy))}
.chip.tab-chip.on .sic svg{stroke:#fff}
.nav-in button.on{color:var(--red);border-bottom-color:var(--red);background:#FFF6F0}

main{max-width:1100px;margin:0 auto;padding:18px 14px 80px}

/* ---------- Cards / common ---------- */
.card{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:16px;border:1px solid #F0E8D8}
.card h2{color:var(--navy);font-size:1.15rem;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.card h2::before{content:"";width:6px;height:22px;border-radius:3px;background:linear-gradient(var(--red),var(--gold))}
.grid{display:grid;gap:12px}
.grid.g2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid.g3{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;font:inherit;font-weight:700;cursor:pointer;border-radius:12px;padding:11px 18px;transition:.15s;text-decoration:none}
.btn.red{background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff;box-shadow:0 3px 10px rgba(200,16,46,.35)}
.btn.red:hover{transform:translateY(-1px)}
.btn.navy{background:var(--navy);color:#fff}
.btn.ghost{background:#fff;border:2px solid var(--navy);color:var(--navy)}
.btn.gold{background:linear-gradient(135deg,var(--gold),#C98F12);color:#fff}
.chip{display:inline-block;border:1.5px solid var(--navy);color:var(--navy);background:#fff;border-radius:999px;padding:6px 14px;font-weight:700;font-size:.85rem;cursor:pointer;transition:.15s}
.chip.on{background:var(--navy);color:#fff}
.pill{display:inline-block;background:var(--gold-light);color:#7A5A00;font-size:.72rem;font-weight:700;border-radius:999px;padding:2px 10px}

/* ---------- Home ---------- */
.hero{background:linear-gradient(120deg,#FF4DA3 0%,#FF1F8F 55%,#E00078 100%);color:#fff;border-radius:20px;padding:24px;display:flex;gap:20px;align-items:center;margin-bottom:16px;box-shadow:var(--shadow);flex-wrap:wrap}
.hero img{width:110px;height:110px;object-fit:cover;border-radius:50%;border:4px solid #FFE7A8;background:#fff}
.hero h2{font-size:1.45rem;color:#FFF6C8;margin-bottom:6px}
.hero p{color:#FFE4F2;font-size:.95rem;line-height:1.5}
.hero .flex1{flex:1;min-width:230px}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:16px}
.stat{background:#fff;border-radius:14px;padding:14px;text-align:center;box-shadow:var(--shadow);border-top:4px solid var(--gold)}
.stat b{display:block;font-size:1.6rem;color:var(--red)}
.stat span{font-size:.8rem;color:var(--muted);font-weight:600}
.grade-btn{background:#fff;border:2px solid var(--line);border-radius:14px;padding:16px 8px;text-align:center;cursor:pointer;font:inherit;transition:.15s;box-shadow:var(--shadow)}
.grade-btn:hover{border-color:var(--red);transform:translateY(-2px)}
.grade-btn b{display:block;font-size:1.5rem;color:var(--navy)}
.grade-btn span{font-size:.78rem;color:var(--muted);font-weight:600}

/* ---------- Quiz ---------- */
.topic-btn{background:#fff;border:2px solid var(--line);border-radius:14px;padding:14px;cursor:pointer;font:inherit;text-align:left;transition:.15s;display:flex;align-items:center;gap:10px}
.topic-btn:hover{border-color:var(--gold);transform:translateY(-2px)}
.topic-btn .tic{font-size:1.4rem}
.topic-btn b{color:var(--navy)}
.qbox{background:#FFFBEE;border:2.5px solid var(--red);border-radius:var(--radius);padding:18px;margin-bottom:14px;font-size:1.12rem;line-height:2;overflow-x:auto}
.qbox .qtag{display:inline-block;background:var(--red);color:#fff;font-size:.75rem;font-weight:800;padding:3px 12px;border-radius:999px;margin-bottom:8px;letter-spacing:.5px}
.opts{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.opt{background:#fff;border:2px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;font:inherit;font-size:1.05rem;text-align:left;display:flex;gap:10px;align-items:center;transition:.12s}
.opt .lab{width:30px;height:30px;flex:0 0 30px;border-radius:50%;background:var(--gold-light);color:#7A5A00;display:flex;align-items:center;justify-content:center;font-weight:800}
.opt:hover{border-color:var(--navy)}
.opt.right{border-color:var(--green);background:#EDFBF2}
.opt.right .lab{background:var(--green);color:#fff}
.opt.wrong{border-color:var(--red);background:#FFF1F2}
.opt.wrong .lab{background:var(--red);color:#fff}
.opt:disabled{cursor:default;opacity:.92}
.verdict{font-weight:800;font-size:1.05rem;margin:12px 0 6px}
.verdict.ok{color:var(--green)} .verdict.no{color:var(--red)}
.solbox{background:#FFF4FA;border-left:5px solid var(--red);border-radius:10px;padding:14px 16px;margin-top:10px;line-height:2.15;font-size:1.05rem;overflow-x:auto}
.solbox .sol-t{font-weight:800;color:var(--navy);margin-bottom:4px}
.quiz-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.score-line{margin-left:auto;font-weight:700;color:var(--navy);font-size:.9rem}

/* ---------- Math bits (frac/vin cũ giữ cho tương thích) ---------- */
.frac{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;margin:0 3px;line-height:1.15}
.frac>span{padding:0 5px}
.frac>span:first-child{border-bottom:1.6px solid currentColor}
.vin{border-top:1.6px solid currentColor;padding:0 2px}
.hl{color:var(--red);font-weight:700}

/* ---------- Formulas ---------- */
.f-card{background:#fff;border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.f-card h3{background:linear-gradient(90deg,#FF1F8F,#FF6AB5);color:#FFF6C8;padding:10px 14px;font-size:1rem}
.f-card .fb{padding:12px 16px;line-height:2.3;font-size:1.02rem;overflow-x:auto}

/* ---------- Tools ---------- */
.tool input,.tool select{font:inherit;font-size:1.05rem;padding:9px 12px;border:2px solid var(--line);border-radius:10px;width:100%;background:#fff}
.tool input:focus{outline:none;border-color:var(--navy)}
.tool label{font-weight:700;color:var(--navy);font-size:.85rem;display:block;margin:8px 0 4px}
.tool .row{display:flex;gap:10px;flex-wrap:wrap}
.tool .row>div{flex:1;min-width:90px}
.result{background:#F4F8FF;border-left:5px solid var(--navy);border-radius:10px;padding:12px 16px;margin-top:12px;line-height:2}
canvas#graph{width:100%;max-width:680px;background:#fff;border:1px solid var(--line);border-radius:12px;display:block;margin-top:12px}

/* ---------- Video ---------- */
.v-search{width:100%;font:inherit;font-size:1rem;padding:11px 16px;border:2px solid var(--line);border-radius:999px;margin:10px 0}
.v-search:focus{outline:none;border-color:var(--red)}
.v-list{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.v-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;display:flex;gap:10px;align-items:flex-start;transition:.12s;box-shadow:var(--shadow)}
.v-item:hover{border-color:var(--red)}
.v-item .v-ic{flex:0 0 42px;height:42px;border-radius:10px;background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.15rem}
.v-item b{font-size:.88rem;line-height:1.45;color:var(--ink);display:block}
.v-item small{color:var(--muted);font-weight:600}
.v-modal{position:fixed;inset:0;background:rgba(8,20,40,.85);z-index:100;display:flex;align-items:center;justify-content:center;padding:16px}
.v-modal .vm-in{width:min(920px,100%);background:#000;border-radius:14px;overflow:hidden;box-shadow:0 10px 50px rgba(0,0,0,.6)}
.v-modal iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.v-modal .vm-bar{background:var(--navy);color:#fff;padding:10px 14px;display:flex;gap:10px;align-items:center}
.v-modal .vm-bar b{flex:1;font-size:.9rem}
.v-modal .vm-bar button{border:0;background:var(--red);color:#fff;font:inherit;font-weight:700;border-radius:8px;padding:6px 14px;cursor:pointer}

/* ---------- Hồ sơ ---------- */
.bar-chart{display:flex;gap:10px;align-items:flex-end;padding:8px 4px 0}
.bar-col{flex:1;text-align:center}
.bar-col .bar{background:linear-gradient(180deg,var(--gold),var(--red));border-radius:6px 6px 0 0;min-height:3px;margin:0 auto;width:70%}
.bar-col small{display:block;color:var(--muted);font-weight:600;margin-top:4px}
.bar-col b{color:var(--navy);font-size:.85rem}
.rp-table{width:100%;border-collapse:collapse}
.rp-table th{background:var(--navy);color:#fff;padding:8px;font-size:.85rem}
.rp-table td{border:1px solid var(--line);padding:8px;text-align:center}

/* ---------- Footer ---------- */
footer{position:fixed;bottom:0;left:0;right:0;background:linear-gradient(90deg,var(--red),var(--red-dark));color:#fff;text-align:center;padding:8px 10px;font-size:.78rem;font-weight:600;letter-spacing:.3px;z-index:45}
footer b{color:var(--gold-light)}

/* ---------- Toast + huy hiệu + tra cứu ---------- */
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#fff;font-weight:700;padding:12px 22px;border-radius:99px;box-shadow:0 6px 24px rgba(0,0,0,.3);z-index:300;opacity:0;transition:.35s;max-width:92vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.badge{background:#F6F2F4;border:2px solid var(--line);border-radius:14px;padding:12px 8px;text-align:center;filter:grayscale(1);opacity:.55}
.badge.got{background:#FFFBEE;border-color:var(--gold);filter:none;opacity:1;box-shadow:var(--shadow)}
.badge span{font-size:1.8rem;display:block}
.badge b{display:block;font-size:.82rem;color:var(--navy);margin:4px 0 2px}
.badge small{color:var(--muted);font-size:.68rem;line-height:1.3;display:block}
.sr-h{color:var(--red);margin:16px 0 8px}
.sr-item{width:100%;margin-bottom:8px}

/* ---------- Pháo hoa ---------- */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:200;overflow:hidden}
.confetti span{position:absolute;top:-40px;animation:conf-fall 3s ease-in forwards}
@keyframes conf-fall{
  0%{transform:translateY(0) rotate(0deg);opacity:1}
  100%{transform:translateY(105vh) rotate(540deg);opacity:.4}
}

/* ---------- Cộng đồng hỏi bài ---------- */
.cd-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.cd-head small{color:var(--muted)}
.cd-badge{background:#EDFBF2;color:var(--green);border:1.5px solid var(--green);font-size:.72rem;font-weight:800;border-radius:999px;padding:2px 10px}
.cd-content{font-size:1.05rem;line-height:2;background:#FFFBEE;border:1.5px solid var(--gold);border-radius:12px;padding:10px 14px;overflow-x:auto}
.cd-reply{margin:10px 0 0 18px;padding:8px 12px;border-left:3px solid var(--line);border-radius:8px;background:#FFF8FB;line-height:1.9;overflow-x:auto}
.cd-reply.vrf{border-left-color:var(--green);background:#F2FBF5}
.cd-reply small{color:var(--muted)}
.cd-replybar{display:flex;gap:8px;margin-top:10px;align-items:center}
.cd-like{display:inline-flex;align-items:center;gap:5px;border:2px solid var(--line);background:#fff;border-radius:999px;padding:7px 13px;cursor:pointer;font:inherit;font-weight:700;color:var(--muted);transition:.15s}
.cd-like svg{width:17px;height:17px}
.cd-like.on{border-color:var(--red);color:var(--red);background:#FFF0F7}
.cd-like.on svg{fill:var(--red)}
.ar-bar{height:22px;background:#FDE3F0;border-radius:99px;overflow:hidden;margin:10px 0 14px}
.ar-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--red));border-radius:99px;transition:width 1s linear;display:flex;align-items:center;justify-content:flex-end;padding-right:10px}
.ar-fill span{color:#fff;font-weight:800;font-size:.8rem}
.cd-replybar input{flex:1;font:inherit;padding:9px 12px;border:2px solid var(--line);border-radius:10px}
.cd-replybar input:focus{outline:none;border-color:var(--red)}

/* ---------- Phòng thi thử ---------- */
.ex-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.ex-timer{margin-left:auto;background:var(--navy);color:#fff;font-weight:800;font-size:1.15rem;padding:8px 16px;border-radius:12px;letter-spacing:1px;transition:.3s}
.ex-grid{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.ex-chip{width:38px;height:38px;border-radius:10px;border:2px solid var(--line);background:#fff;font:inherit;font-weight:800;color:var(--muted);cursor:pointer;position:relative}
.ex-chip.did{background:var(--gold-light);border-color:var(--gold);color:#7A5A00}
.ex-chip.cur{border-color:var(--red);color:var(--red);box-shadow:0 0 0 2px rgba(255,31,143,.25)}
.ex-chip.flg::after{content:"🚩";position:absolute;top:-9px;right:-7px;font-size:.7rem}
.opt.sel{border-color:var(--red);background:#FFF0F7}
.opt.sel .lab{background:var(--red);color:#fff}
.ex-score{font-size:4rem;font-weight:900;line-height:1.2}
select{font:inherit;font-size:1.05rem;padding:9px 12px;border:2px solid var(--line);border-radius:10px;width:100%;background:#fff}

/* ---------- Công thức KaTeX ---------- */
.katex{font-size:1.08em}
.qbox .katex{font-size:1.18em}
.opt .katex{font-size:1.06em}
.boxed{display:inline-block;border:2px solid var(--red);border-radius:8px;padding:2px 10px;color:var(--red);font-weight:800;background:#FFFBEE;margin:2px 0}
.boxed .katex{color:var(--red)}
.opt{overflow-x:auto}

/* ---------- ĐIỆN THOẠI: thanh điều hướng DƯỚI ĐÁY như app chuyên nghiệp ---------- */
/* ---------- Nút đổi sáng/tối ---------- */
.theme-btn{border:0;background:rgba(255,255,255,.22);border-radius:50%;width:38px;height:38px;font-size:1.15rem;cursor:pointer;transition:.15s}
.theme-btn:hover{background:rgba(255,255,255,.38)}

/* ---------- BẢN IN ĐỀ (print-sheet) ---------- */
.print-sheet{position:fixed;inset:0;background:#fff;color:#111;z-index:400;overflow-y:auto;padding:20px}
.pr-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;max-width:800px;margin:0 auto 14px}
.pr-page{max-width:800px;margin:0 auto 30px;background:#fff;color:#111;font-size:15px;line-height:1.9}
.pr-head{text-align:center;border-bottom:2px solid #111;padding-bottom:8px;margin-bottom:14px}
.pr-brand{font-size:.85rem}
.pr-head h1{font-size:1.25rem;margin:6px 0}
.pr-meta{font-size:.9rem}
.pr-hs{text-align:left;margin-top:10px;font-size:.95rem}
.pr-q{margin-bottom:12px;break-inside:avoid}
.pr-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:2px 14px;margin:4px 0 0 18px}
.pr-sol{margin:4px 0 0 18px;border-left:2.5px solid #888;padding-left:10px}
.pr-danap{border-collapse:collapse;margin:0 auto 18px}
.pr-danap th,.pr-danap td{border:1.2px solid #111;padding:4px 9px;text-align:center;font-size:.9rem}
.pr-h2{text-align:center;margin:8px 0 12px;font-size:1.05rem}
.pr-foot{text-align:center;margin-top:18px;font-weight:700}
.print-sheet .katex{color:#111}
.print-sheet .boxed{border-color:#111;color:#111;background:none}
@media print{
  body>*:not(.print-sheet){display:none!important}
  .print-sheet{position:static;overflow:visible;padding:0}
  .no-print{display:none!important}
  .pr-page{page-break-after:always;max-width:none}
  header,nav,footer{display:none!important}
}

/* ---------- CHẾ ĐỘ TỐI ---------- */
html[data-theme="dark"]{
  --cream:#171114; --paper:#231A20; --ink:#F2E7ED; --muted:#B79CA9;
  --line:#4A3340; --gold-light:#6B5320; --shadow:0 4px 18px rgba(0,0,0,.45);
}
html[data-theme="dark"] body{background:var(--cream)}
html[data-theme="dark"] nav,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .grade-btn,
html[data-theme="dark"] .topic-btn,
html[data-theme="dark"] .opt,
html[data-theme="dark"] .chip,
html[data-theme="dark"] .v-item,
html[data-theme="dark"] .f-card,
html[data-theme="dark"] .ex-chip,
html[data-theme="dark"] .cd-like,
html[data-theme="dark"] .tool input,html[data-theme="dark"] .tool select,html[data-theme="dark"] select,
html[data-theme="dark"] .v-search,html[data-theme="dark"] textarea,html[data-theme="dark"] .cd-replybar input,
html[data-theme="dark"] canvas#graph{background:#231A20;color:var(--ink)}
html[data-theme="dark"] .card{border-color:#3A2833}
html[data-theme="dark"] .qbox,html[data-theme="dark"] .cd-content{background:#2A2018;color:var(--ink)}
html[data-theme="dark"] .solbox,html[data-theme="dark"] .result{background:#2B1B26;color:var(--ink)}
html[data-theme="dark"] .cd-reply{background:#241C22}
html[data-theme="dark"] .cd-reply.vrf{background:#15291D}
html[data-theme="dark"] .opt.right{background:#15351F}
html[data-theme="dark"] .opt.wrong,html[data-theme="dark"] .opt.sel{background:#3A1626}
html[data-theme="dark"] .badge{background:#2A2027}
html[data-theme="dark"] .badge.got{background:#2E2410}
html[data-theme="dark"] .nav-in button.on{background:#2A2027}
html[data-theme="dark"] .nav-in button .ic{background:color-mix(in srgb, var(--tc, #FF1F8F) 22%, #231A20)}
html[data-theme="dark"] .boxed{background:#2A2018}
html[data-theme="dark"] .opt .lab,html[data-theme="dark"] .pill{color:#FFDf9E}
html[data-theme="dark"] .qtag{color:#fff}
html[data-theme="dark"] .ex-chip.did{color:#FFDF9E}
html[data-theme="dark"] .grade-btn b,html[data-theme="dark"] .topic-btn b{color:var(--ink)}
html[data-theme="dark"] .rp-table td{border-color:#4A3340}
html[data-theme="dark"] .bar-chart .bar-col small{color:var(--muted)}
html[data-theme="dark"] .hero p{color:#FFE4F2}
html[data-theme="dark"] .print-sheet{background:#fff;color:#111}

@media(max-width:640px){
  .hd-title h1{font-size:.95rem}
  .hero{padding:18px}
  .hero img{width:84px;height:84px}
  nav{position:fixed;bottom:0;top:auto;left:0;right:0;z-index:60;border-bottom:none;border-top:1px solid var(--line);box-shadow:0 -4px 18px rgba(214,0,111,.15);padding-bottom:env(safe-area-inset-bottom)}
  .nav-in button{flex:1 1 0;min-width:0;padding:6px 1px 5px;font-size:.55rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:none;border-top:3px solid transparent}
  .nav-in button.on{border-top-color:var(--tc, var(--red));border-bottom:none}
  .nav-in button .ic{width:30px;height:30px;border-radius:9px;margin:0 auto 2px}
  .nav-in button .ic svg{width:18px;height:18px}
  footer{display:none}
  main{padding-bottom:96px}
  .qbox{font-size:1.05rem;padding:14px}
  .opts{grid-template-columns:1fr}
  .btn{padding:12px 16px}
}