/* BiostatKit shared styles. Colour tokens: Apple system (DESIGN.md, 0.Dieu hanh/13.Cac phong/07.Thiet ke/04.Tai san).
   Light: white / #f5f5f7 / #0066cc.  Dark: black page, #1d1d1f card (the block that holds the buttons), #272729 inner, #2997ff links. */
:root{
  --bg:#ffffff; --surface:#ffffff; --surface-2:#f5f5f7; --surface-3:#fafafc;
  --ink:#1d1d1f; --ink-2:#333333; --muted:#6a6a6f;
  --line:#e0e0e0; --field-line:#86868b;
  --accent:#0066cc; --accent-strong:#0052a3; --accent-soft:#e8f1fb; --focus:#0071e3;
  --btn:#0066cc; --btn-hover:#0052a3; --btn-ink:#ffffff;
  --invite-bg:#f5f5f7; --warn-bg:#fff3d6; --warn-ink:#7a4b00; --err:#b3261e;
  --code-bg:#f5f5f7; --code-ink:#1d1d1f; --code-key:#0052a3; --code-com:#6a6a6f;
  --sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;
}
[data-theme=dark]{
  --bg:#000000; --surface:#1d1d1f; --surface-2:#272729; --surface-3:#2a2a2c;
  --ink:#ffffff; --ink-2:#cccccc; --muted:#a1a1a6;
  --line:#3a3a3c; --field-line:#86868b;
  --accent:#2997ff; --accent-strong:#8ec5ff; --accent-soft:#0a2540; --focus:#2997ff;
  --btn:#0066cc; --btn-hover:#0071e3; --btn-ink:#ffffff;
  --invite-bg:#1d1d1f; --warn-bg:#272729; --warn-ink:#f5d38a; --err:#ff9f8a;
  --code-bg:#272729; --code-ink:#ffffff; --code-key:#8ec5ff; --code-com:#a1a1a6;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--sans);overflow-wrap:anywhere}
a{color:var(--accent);text-underline-offset:3px}
code{font-family:var(--mono);font-size:.9em}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--btn);color:var(--btn-ink);padding:8px 12px;border-radius:8px;z-index:9}
.skip:focus{left:8px}

/* header */
header.top{border-bottom:1px solid var(--line);background:var(--bg)}
.bar{display:flex;align-items:center;gap:16px;min-height:60px;flex-wrap:wrap;padding-block:8px}
.brand{display:flex;align-items:center;gap:10px;font:700 1.15rem/1 var(--sans);color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.brand svg{flex:none}
.brand b{color:var(--accent)}
nav.main{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap;align-items:center}
nav.main a{color:var(--ink-2);text-decoration:none;padding:8px 12px;border-radius:999px;font-size:.95rem}
nav.main a:hover{background:var(--surface-2);color:var(--ink)}
nav.main a[aria-current]{color:var(--accent-strong);font-weight:600;background:var(--accent-soft)}
.theme{min-width:44px;min-height:44px;border:1.5px solid var(--field-line);background:var(--surface-3);color:var(--ink);border-radius:12px;cursor:pointer;font:inherit;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 12px}
.theme:hover{background:var(--surface-2)}

/* hero */
.hero{padding:40px 0 24px}
.crumbs{font-size:.88rem;color:var(--muted);margin:0 0 12px}
.crumbs a{color:var(--muted)}
h1{font:700 clamp(1.9rem,4.6vw,2.75rem)/1.18 var(--sans);margin:0 0 12px;letter-spacing:-.02em}
.lead{font-size:1.1875rem;color:var(--ink-2);max-width:62ch;margin:0 0 16px}
.privacy{display:inline-flex;gap:8px;align-items:center;background:var(--accent-soft);color:var(--ink);border:0;padding:6px 12px;border-radius:999px;font-size:.92rem}
.privacy svg{flex:none;color:var(--accent)}

/* tool */
.tool{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:20px;align-items:start;margin-bottom:28px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;min-width:0}
.card h2{font:600 1.1875rem/1.3 var(--sans);margin:0 0 4px}
.card .sub{margin:0 0 16px;color:var(--ink-2);font-size:.93rem}
.grid2{display:grid;grid-template-columns:minmax(76px,.9fr) repeat(2,minmax(0,1fr)) minmax(44px,.5fr);gap:8px;align-items:center}
.grid2 > *{min-width:0}
.gridk{display:grid;grid-template-columns:minmax(58px,.9fr) repeat(var(--k,2),minmax(0,1fr)) minmax(36px,.5fr);gap:6px;align-items:center;margin-top:12px}
.gridk > *{min-width:0}
.gridk input.cell{font-size:1.1rem;min-height:46px;padding:6px 2px}
.gridk .colh,.gridk .rowh{font-size:.78rem}
.colh{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:center;line-height:1.25}
.rowh{font-weight:600;font-size:.95rem;line-height:1.25}
.rowh small{display:block;font-weight:400;color:var(--muted)}
.rowh.dim{color:var(--muted)}
.tot{text-align:center;color:var(--muted);font-variant-numeric:tabular-nums;font-size:.95rem}
.corner{font-size:.78rem;color:var(--muted)}
input.cell,input.num,select.num{width:100%;min-height:52px;font:600 1.3rem/1 var(--sans);font-variant-numeric:tabular-nums;text-align:center;background:var(--surface);color:var(--ink);border:1.5px solid var(--field-line);border-radius:8px;padding:8px 4px}
input.num,select.num{font-size:1.1rem;text-align:left;padding:8px 12px}
input.cell:focus,input.num:focus,select.num:focus{border-color:var(--focus);outline:3px solid var(--accent-soft);outline-offset:0}
input[aria-invalid=true]{border-color:var(--err)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fld{min-width:0}
.fld label{display:block;font-weight:600;font-size:.93rem;margin-bottom:4px}
.fld small{display:block;color:var(--muted);font-size:.85rem;margin-top:4px;line-height:1.35}
.fld.wide{grid-column:1 / -1}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
button.btn{min-height:44px;padding:0 18px;border-radius:12px;font:600 .9375rem var(--sans);cursor:pointer;border:1.5px solid var(--btn);background:var(--btn);color:var(--btn-ink);transition:transform .12s ease-out,background-color .12s}
button.btn:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
button.btn:active,.invite .go:active{transform:scale(.97)}
button.btn.ghost{background:var(--surface-3);color:var(--ink);border-color:var(--field-line)}
button.btn.ghost:hover{background:var(--surface-2);border-color:var(--field-line)}
.msg{min-height:0;margin:12px 0 0;font-size:.95rem}
.msg.err{color:var(--err);font-weight:600}
.note{background:var(--warn-bg);color:var(--warn-ink);border-radius:12px;padding:10px 12px;font-size:.92rem;margin:12px 0 0}
.note[hidden]{display:none}

/* results */
.bignum{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:6px 0 2px}
.bignum .big{font:700 clamp(2.6rem,6vw,3.5rem)/1 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--accent)}
.bignum .lab{color:var(--muted);font-weight:600}
.ci{font-size:1.05rem;margin:0 0 14px;font-variant-numeric:tabular-nums}
.ci strong{font-weight:700}
table.res{width:100%;border-collapse:collapse;font-size:.95rem;font-variant-numeric:tabular-nums}
table.res th,table.res td{text-align:left;padding:8px 6px;border-top:1px solid var(--line);vertical-align:top}
table.res th{font-weight:600;color:var(--muted);width:44%}
table.res td{font-weight:600}
table.res td .aside{font-weight:400;color:var(--muted)}
.forest{margin:14px 0 4px}
.forest svg{display:block;width:100%;height:auto}
.forest .cap{font-size:.85rem;color:var(--muted);margin:4px 0 0}
.empty{color:var(--muted);padding:20px 0}

/* sections */
section.block{margin:0 0 28px}
section.block > h2{font:700 clamp(1.375rem,1.1rem + 1.1vw,1.75rem)/1.22 var(--sans);margin:0 0 6px}
section.block > .sub{color:var(--ink-2);margin:0 0 14px;max-width:70ch}
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.quote{font:1.0625rem/1.65 var(--sans);background:var(--surface-2);border-left:3px solid var(--accent);border-radius:8px;padding:14px 16px;margin:0 0 12px}
.row-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.copied{font-size:.9rem;color:var(--accent);font-weight:600}
.check{margin:0;padding-left:1.2em}
.check li{margin:4px 0}
h3.mini{font:700 1.05rem/1.3 var(--sans);margin:0 0 6px}
.cite{font-size:.92rem;color:var(--muted);background:var(--surface-2);border-radius:8px;padding:10px 12px;margin:12px 0 0}
pre.code{margin:0;background:var(--code-bg);color:var(--code-ink);border-radius:12px;padding:16px;overflow:auto;font:.86rem/1.6 var(--mono);max-width:100%;tab-size:2}
pre.code .c{color:var(--code-com)}
pre.code .k{color:var(--code-key)}
.codehead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.chip{font-size:.8125rem;font-weight:600;border:1px solid var(--line);border-radius:999px;padding:3px 10px;color:var(--ink-2);background:var(--surface-3)}
.explain h3{font:700 1.05rem/1.3 var(--sans);margin:18px 0 4px}
.explain p,.explain ul{margin:0 0 8px;max-width:70ch}
details.faq{border-top:1px solid var(--line);padding:2px 0}
details.faq:last-of-type{border-bottom:1px solid var(--line)}
details.faq summary{cursor:pointer;font-weight:600;padding:12px 4px;min-height:44px}
details.faq p{margin:0 0 12px 4px;max-width:70ch;color:var(--ink-2)}
.formula{font-family:var(--mono);font-size:.9rem;background:var(--surface-2);padding:2px 6px;border-radius:4px;white-space:normal}
.refs{font-size:.92rem;color:var(--ink-2);padding-left:1.4em;margin:0}
.refs li{margin:4px 0}
.verify{font-size:.92rem;color:var(--ink-2);margin:10px 0 0}

/* PaperStat invitation */
.invite{background:var(--invite-bg);border:1px solid var(--line);border-radius:16px;padding:24px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:center;margin-bottom:28px}
.invite h2{font:700 1.375rem/1.25 var(--sans);margin:0 0 8px}
.invite p{margin:0 0 8px;color:var(--ink-2)}
.invite ul{margin:0;padding-left:1.2em}
.invite .go{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:12px;background:var(--btn);color:var(--btn-ink);font-weight:600;text-decoration:none;text-align:center;transition:transform .12s ease-out,background-color .12s}
.invite .go:hover{background:var(--btn-hover)}
.invite small{display:block;margin-top:8px;color:var(--muted)}
.inline-invite{background:var(--accent-soft);border-radius:12px;padding:10px 14px;font-size:.93rem;margin:12px 0 0;color:var(--ink)}
.inline-invite a{font-weight:600}

/* index */
.cat{margin:0 0 28px}
.cat > h2{font:700 clamp(1.375rem,1.1rem + 1.1vw,1.75rem)/1.22 var(--sans);margin:0 0 4px}
.cat > .sub{color:var(--ink-2);margin:0 0 12px}
.toolgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin:0;padding:0;list-style:none}
.tcard{display:flex;flex-direction:column;gap:6px;height:100%;min-height:128px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;text-decoration:none;color:var(--ink)}
a.tcard:hover{border-color:var(--accent);background:var(--surface-2)}
.tcard h3{font:600 1.1rem/1.3 var(--sans);margin:0;color:var(--ink)}
.tcard p{margin:0;color:var(--ink-2);font-size:.92rem}
.tcard .tag{margin-top:auto;font-size:.8125rem;font-weight:600;color:var(--accent-strong);background:var(--accent-soft);align-self:flex-start;border-radius:999px;padding:2px 10px}
.tcard.soon{background:var(--surface-2);border-style:dashed}
.tcard.soon h3{color:var(--ink-2)}
.tcard.soon .tag{color:var(--muted);background:var(--surface-3);border:1px solid var(--line)}

footer.foot{border-top:1px solid var(--line);background:var(--surface-2);margin-top:40px;padding:24px 0 40px;color:var(--muted);font-size:.92rem}
footer.foot p{margin:0 0 8px;max-width:80ch}
footer.foot a{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:860px){
  .tool,.cols,.invite{grid-template-columns:minmax(0,1fr)}
  .hero{padding-top:24px}
}
@media (max-width:480px){
  .wrap{width:calc(100% - 24px)}
  .card{padding:16px;border-radius:14px}
  .grid2{grid-template-columns:minmax(62px,.9fr) repeat(2,minmax(0,1fr)) 50px;gap:6px}
  .colh{font-size:.7rem;letter-spacing:.02em}
  input.cell{font-size:1.15rem;min-height:48px}
  select.num{font-size:1rem;padding:8px}
  .fields{grid-template-columns:minmax(0,1fr)}
  nav.main{margin-left:0;width:100%;order:3}
  .bar{gap:8px}
  .theme .tl{display:none}
  .theme{margin-left:auto}
  .toolgrid{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (forced-colors:active){.card,.tcard,.invite{border:1px solid CanvasText}}
textarea.ta{display:block;width:100%;min-height:200px;resize:vertical;font:500 1rem/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;background:var(--surface);color:var(--ink);border:1.5px solid var(--field-line);border-radius:8px;padding:10px 12px}
textarea.ta:focus{border-color:var(--focus);outline:3px solid var(--accent-soft);outline-offset:0}
textarea[aria-invalid=true]{border-color:var(--err)}

/* ---- bản Việt (GV-3726): nút chuyển ngôn ngữ ở thanh trên, khối "Học tiếp" ---- */
.langsw{min-width:44px;min-height:44px;border:1.5px solid var(--field-line);background:var(--surface-3);color:var(--ink);border-radius:12px;font:inherit;font-size:.95rem;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;text-decoration:none}
.langsw:hover{background:var(--surface-2)}
.langsw:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.invite .golist{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
@media (max-width:640px){.langsw{margin-left:auto}.langsw+.theme{margin-left:0}}