/* Noto Sans Lao 可变字重子集，仅覆盖老挝文码位；自托管是为了离线也能显示。*/
@font-face{font-family:'Noto Sans Lao';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/NotoSansLao.woff2) format('woff2');unicode-range:U+0E81-0EDF,U+200C-200D,U+25CC}
/* 使用场景：户外、强光、单手、可能戴着手套或急着用。
   因此：高对比、超大点击区、零动画干扰、不做暗色（强光下白底黑字最好认）。 */
:root{
  --bg:#f4f5f7; --card:#fff; --ink:#111318; --sub:#5b6270; --line:#e3e6ec;
  --accent:#0b62d6; --accent-ink:#fff; --warn:#b23c17;
  --lao:"Noto Sans Lao","Lao Sangam MN","Lao UI",system-ui,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.5 system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  overscroll-behavior-y:none}
header{position:sticky;top:0;z-index:5;background:var(--bg);
  padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 6px;
  border-bottom:1px solid var(--line)}
.bar{position:relative}
#q{width:100%;height:48px;padding:0 40px 0 14px;border:1px solid var(--line);
  border-radius:12px;background:var(--card);font-size:17px;color:var(--ink)}
#q:focus{outline:2px solid var(--accent);outline-offset:-1px}
#clear{position:absolute;right:6px;top:6px;width:36px;height:36px;border:0;
  background:transparent;font-size:24px;color:var(--sub)}
.cats{display:flex;gap:8px;overflow-x:auto;padding:10px 0 4px;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cats button{flex:0 0 auto;height:36px;padding:0 14px;border:1px solid var(--line);
  border-radius:18px;background:var(--card);color:var(--sub);font-size:15px}
.cats button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);
  border-color:var(--accent);font-weight:600}

main{padding:10px 12px calc(72px + var(--safe-b))}
.row{display:block;width:100%;text-align:left;margin:0 0 10px;padding:14px 16px;
  min-height:76px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;color:inherit;font:inherit}
.row:active{background:#e8effb;border-color:var(--accent)}
.row .zh{font-size:20px;font-weight:600;letter-spacing:.01em}
.row .t{font-family:var(--lao);font-size:19px;color:var(--accent);margin-top:4px;
  line-height:1.6}
.row .x{font-size:13px;color:var(--sub);margin-top:2px}
.empty{padding:48px 8px;text-align:center;color:var(--sub)}
.gtitle{margin:14px 2px 8px;font-size:13px;color:var(--sub);font-weight:600;
  letter-spacing:.08em}

footer{position:fixed;left:0;right:0;bottom:0;display:flex;gap:8px;
  padding:8px 12px calc(8px + var(--safe-b));background:rgba(244,245,247,.94);
  backdrop-filter:blur(8px);border-top:1px solid var(--line);font-size:12px}
.pill{padding:4px 10px;border-radius:10px;background:var(--card);
  border:1px solid var(--line);color:var(--sub)}
.pill.ok{color:#0a7a3d;border-color:#bfe6cf;background:#eefaf2}
.pill.bad{color:var(--warn);border-color:#f0cfc2;background:#fdf1ec}
.pill.muted{margin-left:auto}

/* 大字卡：核心不是给自己看，是把屏幕转过去给对方看 */
.sheet{position:fixed;inset:0;z-index:20;background:#fff;display:flex;
  align-items:center;justify-content:center;padding:24px}
/* 必须显式压过 display:flex —— 否则藏起来的大字卡会挡住整屏，全站点不动 */
.sheet[hidden]{display:none}
.sheet-inner{width:100%;max-width:640px;text-align:center}
.sheet-zh{font-size:15px;color:var(--sub);margin-bottom:20px}
.sheet-t{font-family:var(--lao);font-weight:700;line-height:1.45;
  font-size:clamp(30px,8.2vw,60px);word-break:break-word}
.sheet-r{margin-top:18px;font-size:16px;color:var(--sub);letter-spacing:.02em}
.sheet-x{margin-top:4px;font-size:15px;color:var(--sub)}
.sheet-btns{display:flex;gap:12px;margin-top:32px}
.big{flex:1;height:60px;border:0;border-radius:14px;background:var(--accent);
  color:#fff;font-size:18px;font-weight:600}
.big.alt{background:#eef1f6;color:var(--ink)}
.big:active{opacity:.75}
.sheet-hint{margin-top:20px;font-size:12px;color:#9aa1af}