/* naonao.css · 闹闹设计系统公共件（设计源 docs/design/handoff-naonao-v1）
   含：日/夜 tokens · body 基础 · 顶栏(品牌+账户钮) · 页脚 .foot（全站统一，只有版权行）。
   页面自身样式写在各页 <style>；夜间防闪白的 data-theme 预置脚本放各页 <head>（见首页）。 */
:root{
  --bg:#FAF8F4; --bg-grad:#FAF8F4; --card:#FFFFFF; --ink:#16323F; --ink-2:#44545E; --muted:#8A97A0;
  --line:#E5DFD3; --line-soft:#EFEAE0; --primary:#0C5E5C; --accent:#F08C42; --lamp:#F4B95F; --lamp-bright:#FFD98A;
  --ok:#1B8A5A; --ok-soft:#E4F3EB; --warn:#B3261E; --warn-soft:#FBE9E7;
  --nao-sum-bg:#E9F2F1; --nao-sum-line:#D2E4E2; --nao-sum-ink:#2A4A47; --nao-sum-name:#0C5E5C;
  --btn-main-bg:#0C5E5C; --btn-main-ink:#fff; --btn-sub-line:#D8E3E1;
  --chip-bg:#fff; --chip-line:var(--line); --chip-ink:#44545E; --chip-on-bg:#0D3B41; --chip-on-ink:#fff;
  --acct-bg:#fff; --acct-line:var(--line); --search-bg:#fff; --search-line:var(--line);
  --search-shadow:0 4px 18px rgba(22,50,63,.08); --star:#16323F; --eta:#1B8A5A;
  --naoBody:#0E7C7B; --naoFace:#FAF8F4;
  --pill:999px; --radius:16px;
  --fs-12:12px; --fs-13:13px; --fs-15:15px; --fs-17:17px; --fs-20:20px; --fs-24:24px;
  --font:'Plus Jakarta Sans','Noto Sans SC','Noto Sans Thai',-apple-system,'PingFang SC',sans-serif;
  --ease:cubic-bezier(.22,.7,.3,1);
}
html[data-theme="night"]{
  --bg:#0A2E33; --bg-grad:linear-gradient(180deg,#0A2E33,#0D444A); --card:rgba(255,255,255,.05);
  --ink:#F2F0E9; --ink-2:#D8E2E0; --muted:#7FA5A2; --line:rgba(255,255,255,.16); --line-soft:rgba(255,255,255,.10);
  --ok:#6FD0A0; --ok-soft:rgba(27,138,90,.22); --warn:#F09A93; --warn-soft:rgba(213,82,76,.18);
  --nao-sum-bg:rgba(255,217,138,.10); --nao-sum-line:rgba(255,217,138,.22); --nao-sum-ink:#E8E2D2; --nao-sum-name:#FFD98A;
  --btn-main-bg:#F4B95F; --btn-main-ink:#16323F; --btn-sub-line:rgba(255,255,255,.22);
  --chip-bg:rgba(255,255,255,.06); --chip-line:rgba(255,255,255,.14); --chip-ink:#C8D8D6; --chip-on-bg:#F4B95F; --chip-on-ink:#16323F;
  --acct-bg:rgba(255,255,255,.08); --acct-line:rgba(255,255,255,.18);
  --search-bg:#FDFCF8; --search-line:transparent; --search-shadow:0 10px 36px rgba(0,0,0,.35);
  --star:#FFD98A; --eta:#6FD0A0;
  --naoBody:#FAF8F4; --naoFace:#0C5E5C;
}
*{box-sizing:border-box;}
html{height:100%;overscroll-behavior:none;}
/* 基础 body：普通滚动文档（如 /start 自带固定底 CTA）。app 锁壳改为可选 class（见下）。 */
body{margin:0;min-height:100dvh;overscroll-behavior:none;
  background:var(--bg-grad);color:var(--ink);
  font-family:var(--font);-webkit-font-smoothing:antialiased;line-height:1.5;}
/* 锁壳（app 感）：body 永不滚、唯一滚动在内容容器内部。需要的页面给 <body class="lock-shell">。 */
body.lock-shell{height:100dvh;min-height:0;overflow:hidden;display:flex;flex-direction:column;}
:lang(th) body,body :lang(th){line-height:1.6;}
a{color:var(--primary);text-decoration:none;}
html[data-theme="night"] a{color:var(--lamp);}
button{font-family:var(--font);}
@keyframes tw{0%,100%{opacity:.5;}50%{opacity:1;}}
@keyframes rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.spark{animation:tw 2.4s ease-in-out infinite;}
@media(prefers-reduced-motion:reduce){.spark{animation:none;}}

/* ===== 顶栏（公共组件）===== */
.topbar{display:flex;align-items:center;gap:10px;min-height:56px;padding:10px max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left));flex:0 0 auto;}
.brand{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--ink);}
.brand .amp{color:var(--accent);}
.topbar .sp{flex:1;}
.acct{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--acct-bg);border:1.5px solid var(--acct-line);box-shadow:0 1px 4px rgba(22,50,63,.06);cursor:pointer;padding:0;}
.acct svg{stroke:var(--ink);}
.acct .ic-x{display:none;}
body.menu-open .acct{background:var(--ink);}
body.menu-open .acct .ic-user{display:none;}
body.menu-open .acct .ic-x{display:block;stroke:var(--bg);}
html[data-theme="night"] body.menu-open .acct .ic-x{stroke:#16323F;}
html[data-theme="night"] body.menu-open .acct{background:#F2F0E9;}

/* ===== 页脚（公共组件 · 全站统一：只有版权行）===== */
.foot{flex:0 0 auto;padding:16px 22px calc(16px + env(safe-area-inset-bottom));display:flex;justify-content:center;align-items:center;font-size:13px;color:var(--muted);border-top:1px solid var(--line-soft);}

/* ===== 账户菜单（公共组件 · 由 assets/menu.js 注入）===== */
.backdrop{display:none;position:fixed;inset:0;background:rgba(22,50,63,.32);z-index:10;}
body.menu-open .backdrop{display:block;}
.menu{display:none;position:fixed;top:62px;right:16px;width:min(216px,calc(100vw - 32px));background:#fff;border-radius:16px;box-shadow:0 14px 40px rgba(22,50,63,.26);z-index:11;overflow:hidden;color:#16323F;}
body.menu-open .menu{display:block;}
.m-sec{padding:11px 14px;border-bottom:1px solid #F0EDE6;display:flex;flex-direction:column;gap:8px;}
.m-sec:last-child{border-bottom:none;}
.m-user{display:flex;align-items:center;gap:9px;}
.m-ava{width:32px;height:32px;border-radius:50%;background:#F0EDE6;display:grid;place-items:center;flex:0 0 auto;}
.m-user .nm2{font-size:13.5px;font-weight:700;}
.m-user .sub2{font-size:11.5px;color:#8A97A0;}
.m-login{display:block;background:#0C5E5C;color:#fff;font-size:13px;font-weight:700;padding:9px 0;border-radius:999px;text-align:center;text-decoration:none;}
.m-login:hover{color:#fff;}
.m-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.m-lbl{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#8A97A0;}
/* 语言下拉：计算字号保 16px（iOS 聚焦不缩放/不漂移），transform 视觉缩到 12px 与菜单一致；
   缩放是纯视觉、不改布局盒，故用负 margin 收回多占的高/宽，行内不显臃肿。 */
.m-select{appearance:none;-webkit-appearance:none;font-family:var(--font);font-size:16px;font-weight:500;color:#16323F;background:#F7F5F0 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A97A0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 9px center;border:1px solid #E8E3D8;border-radius:8px;padding:5px 24px 5px 10px;cursor:pointer;outline:none;transform:scale(.75);transform-origin:right center;margin:-4px -3px -4px 0;}
.m-select:focus{border-color:#0C5E5C;}
.seg{display:flex;background:#F0EDE6;border-radius:999px;padding:2px;}
.seg button{flex:1;font-size:13px;font-weight:600;padding:5px 10px;line-height:1.2;border-radius:999px;background:none;border:none;color:#5A6E78;cursor:pointer;white-space:nowrap;font-family:var(--font);}
.seg button.on{background:#fff;font-weight:700;color:#16323F;box-shadow:0 1px 3px rgba(22,50,63,.12);}
.m-links{padding:5px 0;}
.m-links a{display:block;padding:8px 14px;font-size:12.5px;font-weight:600;}
.m-links a:hover{background:#FAF8F4;text-decoration:none;}
/* 菜单永远是白卡片：链接色不跟夜间全局 a 走 */
.menu a,html[data-theme="night"] .menu a{color:#16323F;}
.menu a.m-login,html[data-theme="night"] .menu a.m-login{color:#fff;}
