/* 客戶後台 —— 視覺跟公司網（company-site/public/app.css）。
 *
 * ⚠️ 顏色一個都唔係新諗嘅：藍 #2472BC、炭黑、灰階、深色嗰套，
 *    全部由公司網抄過嚟。上次盲試咗 8 張全部唔合格，所以呢度唔創作，
 *    淨係把一套已經批准咗嘅語言用喺一個 app 介面度。
 *
 *    公司網冇而 app 一定要有嘅（ok／bad／warn、surface、shadow）
 *    先至係新加，而且盡量由現有色推出嚟。
 *
 * ⚠️ radius 由公司網嘅 18px 收窄到 12px。18 係 marketing 卡片嘅圓角，
 *    落喺一個密密麻麻嘅資料介面度會好似一堆藥丸。
 */

:root{
  --bg:#f7f8fa;
  --surface:#ffffff;
  --card:#ffffff;
  --ink:#222222;
  --muted:#5b6169;
  --faint:#8b929b;
  --line:#e3e6ea;
  --line-2:#eef0f3;
  --accent:#2472BC;
  --accent-ink:#ffffff;
  --accent-soft:rgba(36,114,188,.10);
  --ok:#1f8f4e;
  --ok-soft:rgba(31,143,78,.12);
  --warn:#b8720a;
  --warn-soft:rgba(184,114,10,.12);
  --bad:#c0392b;
  --bad-soft:rgba(192,57,43,.12);
  --shadow:0 1px 2px rgba(34,38,43,.05);
  --radius:12px;
  --radius-s:8px;
  --side:236px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#15181c; --surface:#1d2127; --card:#1d2127;
    --ink:#f2f4f7; --muted:#aab2bd; --faint:#7c8591;
    --line:#2b3038; --line-2:#252a31;
    --accent:#4a8fd6; --accent-soft:rgba(74,143,214,.16);
    --ok:#4cc27a; --ok-soft:rgba(76,194,122,.14);
    --warn:#e0a34e; --warn-soft:rgba(224,163,78,.14);
    --bad:#f0655a; --bad-soft:rgba(240,101,90,.14);
    --shadow:0 1px 2px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#15181c; --surface:#1d2127; --card:#1d2127;
  --ink:#f2f4f7; --muted:#aab2bd; --faint:#7c8591;
  --line:#2b3038; --line-2:#252a31;
  --accent:#4a8fd6; --accent-soft:rgba(74,143,214,.16);
  --ok:#4cc27a; --ok-soft:rgba(76,194,122,.14);
  --warn:#e0a34e; --warn-soft:rgba(224,163,78,.14);
  --bad:#f0655a; --bad-soft:rgba(240,101,90,.14);
  --shadow:0 1px 2px rgba(0,0,0,.35);
}

*{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{
  min-height:100%;background:var(--bg);color:var(--ink);
  font-family:"Noto Sans TC",-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;
  font-size:14px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
[hidden]{display:none!important}
.num{font-variant-numeric:tabular-nums}

/* ── 骨架：左邊欄 ＋ 主區 ────────────────────────── */
.app{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}
.side{
  background:var(--surface);border-right:1px solid var(--line);
  padding:20px 14px;display:flex;flex-direction:column;gap:22px;
  position:sticky;top:0;height:100vh;
}
.brand{display:flex;align-items:center;gap:10px;padding:2px 8px}
.brand-mark{
  width:30px;height:30px;border-radius:9px;background:var(--accent);
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px;letter-spacing:.02em;
}
.brand-name{font-weight:700;font-size:14px;line-height:1.2}
.brand-sub{font-size:11.5px;color:var(--faint);line-height:1.2;margin-top:2px}

.nav{display:flex;flex-direction:column;gap:2px}
.nav a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 10px;border-radius:var(--radius-s);color:var(--muted);font-weight:500;
  transition:background .15s,color .15s;
}
.nav a:hover{background:var(--line-2);color:var(--ink)}
.nav a.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.nav .cnt{
  font-size:11.5px;font-weight:700;min-width:20px;height:20px;padding:0 6px;
  border-radius:10px;display:grid;place-items:center;
  background:var(--bad);color:#fff;
}
.nav a.on .cnt{background:var(--accent);color:var(--accent-ink)}
/* ── 側邊欄額度 ─────────────────────────────────────
   ⚠️ `margin-top:auto` 由呢舊嘢攞去，跟住要即刻幫 .side-foot 取消返 ——
   兩個都 auto 嘅話，flex 會把剩餘空間**平均分**俾兩個，於是額度飄咗喺
   半空、下面吊住個戶口。冇額度（無上限／攞唔到）嗰陣呢舊唔會 render，
   .side-foot 就攞返自己嗰個 auto，位置同以前一樣。 */
.quota{
  margin-top:auto;display:block;padding:10px;border-radius:var(--radius-s);
  background:var(--line-2);transition:background .15s;
}
.quota:hover{background:var(--line)}
.quota-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--muted)}
.quota-h b{color:var(--ink);font-weight:600}
.quota-h span{font-size:15px;font-weight:700;color:var(--ok)}
.quota.warn .quota-h span{color:var(--warn)}
.quota.bad .quota-h span{color:var(--bad)}
.quota-bar{height:5px;border-radius:3px;background:var(--line);overflow:hidden;margin:7px 0 6px}
.quota-bar i{display:block;height:100%;background:var(--ok);border-radius:3px;transition:width .4s}
.quota.warn .quota-bar i{background:var(--warn)}
.quota.bad .quota-bar i{background:var(--bad)}
.quota-f{font-size:11.5px;color:var(--faint);line-height:1.5}
.quota-f em{display:block;font-style:normal;color:var(--accent);font-weight:600;margin-top:2px}
.quota + .side-foot{margin-top:0}

.side-foot{margin-top:auto;padding:8px 10px;border-top:1px solid var(--line-2);font-size:12.5px;color:var(--muted)}
.side-foot b{display:block;color:var(--ink);font-weight:600}
.side-foot button{color:var(--faint);margin-top:6px;font-size:12px}
.side-foot button:hover{color:var(--accent)}

.main{min-width:0;padding:28px 32px 48px}
.top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}
h1{font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.top p{color:var(--muted);margin-top:3px}

/* ── 狀態燈：條線 ＋ 個腦 ───────────────────────── */
.lights{display:flex;gap:8px;flex-wrap:wrap}
.light{
  display:inline-flex;align-items:center;gap:7px;padding:6px 11px;
  border:1px solid var(--line);border-radius:999px;background:var(--card);
  font-size:12.5px;font-weight:600;color:var(--muted);box-shadow:var(--shadow);
}
.light i{width:8px;height:8px;border-radius:50%;background:var(--faint)}
.light.ok i{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.light.bad i{background:var(--bad);box-shadow:0 0 0 3px var(--bad-soft)}
.light.warn i{background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}
.light small{font-weight:500;color:var(--faint)}

/* ── 卡 ─────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-h{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--line-2);
}
.card-h h2{font-size:14.5px;font-weight:700}
.card-h .more{font-size:12.5px;color:var(--accent);font-weight:600}
.card-b{padding:6px 0}

/* 數字格 */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.stat{padding:16px 18px}
.stat .k{font-size:12.5px;color:var(--muted);font-weight:500}
.stat .v{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-top:4px}
.stat .d{font-size:12px;color:var(--faint);margin-top:4px}
.stat.hot .v{color:var(--bad)}
.stat.good .v{color:var(--ok)}

.grid-2{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}

/* ── 清單行 ─────────────────────────────────────── */
.row{
  display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:center;
  padding:12px 18px;border-bottom:1px solid var(--line-2);
  transition:background .12s;cursor:pointer;
}
.row:last-child{border-bottom:0}
.row:hover{background:var(--line-2)}
.row.on{background:var(--accent-soft)}
/* ⚠️ 每格都要寫明 column。有定 row 冇定 column 嘅元素（.when）會喺
   auto-placement 度**先擺**，霸咗 (1,1)，跟住 .t 就被推去第二欄 ——
   出嚟係時間喺左、標題喺右。第一次 render 就係咁樣。 */
.row .t{grid-column:1;grid-row:1;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .s{grid-column:1;grid-row:2;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .when{grid-column:2;grid-row:1/3;font-size:12px;color:var(--faint);text-align:right;white-space:nowrap}
.row .when b{display:block;color:var(--warn);font-weight:700}
/* 分類標籤。⚠️ 照上面嗰段：一定要寫明 grid-column，唔寫就會被
   auto-placement 擺去第二欄，同 .when 迫埋一齊。 */
.row .tg{grid-column:1;grid-row:3;display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}

/* 標籤 */
.tag{
  display:inline-block;font-size:11.5px;font-weight:700;padding:1px 8px;border-radius:6px;
  vertical-align:middle;margin-right:6px;
}
.tag.auto{background:var(--ok-soft);color:var(--ok)}
.tag.draft{background:var(--bad-soft);color:var(--bad)}
.tag.sent{background:var(--accent-soft);color:var(--accent)}
.tag.dismissed{background:var(--line-2);color:var(--faint)}

.empty{padding:36px 18px;text-align:center;color:var(--faint)}
.empty b{display:block;color:var(--muted);font-weight:600;margin-bottom:2px}

/* ── 對話：左清單、右詳情 ──────────────────────── */
.chat-wrap{display:grid;grid-template-columns:340px 1fr;gap:18px;min-height:560px}
.chat-list{overflow:auto;max-height:calc(100vh - 140px)}
.chat-head{padding:14px 20px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;justify-content:space-between}
.chat-head b{font-size:15px}
.chat-head span{font-size:12.5px;color:var(--muted);margin-left:8px}
.thread{padding:18px 20px;display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 220px);overflow:auto}
.msg{max-width:74%;padding:9px 13px;border-radius:14px;line-height:1.55;position:relative;white-space:pre-wrap;word-break:break-word}
.msg.in{align-self:flex-start;background:var(--line-2);border-bottom-left-radius:4px}
.msg.out{align-self:flex-end;background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:4px}
.msg.out.human{background:var(--ok)}
.msg .meta{display:block;font-size:11px;opacity:.7;margin-top:4px}
.msg .meta.human{font-weight:600}
.pending{
  align-self:stretch;margin:2px 0;padding:10px 13px;border-radius:10px;
  background:var(--bad-soft);border:1px dashed var(--bad);color:var(--bad);font-size:12.5px;
}
.pending b{font-weight:700}
.pending span{color:var(--muted);display:block;margin-top:2px}

/* ── 等緊人手 ───────────────────────────────────── */
.wait{padding:14px 18px;border-bottom:1px solid var(--line-2);display:grid;grid-template-columns:1fr auto;gap:6px 16px}
.wait:last-child{border-bottom:0}
.wait .q{grid-column:1;grid-row:1;font-weight:600;font-size:14.5px}
.wait .why{grid-column:1;grid-row:2;font-size:12.5px;color:var(--muted)}
.wait .why i{font-style:normal;color:var(--bad);font-weight:600}
.wait .who{grid-column:1;grid-row:3;font-size:12px;color:var(--faint)}
.wait .age{grid-column:2;grid-row:1/4;text-align:right;font-size:12px;color:var(--faint);white-space:nowrap}
.wait .age b{display:block;font-size:20px;font-weight:700;color:var(--bad);letter-spacing:-.01em}
.wait .age b.calm{color:var(--warn)}
.wait .age b.fresh{color:var(--muted)}

/* ── 登入 ───────────────────────────────────────── */
.login{min-height:100vh;display:grid;place-items:center;padding:24px}
.login .card{width:100%;max-width:380px;padding:30px 30px 26px}
.login .brand{padding:0;margin-bottom:22px}
.login h1{font-size:19px;margin-bottom:4px}
.login p{color:var(--muted);margin-bottom:20px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:5px}
/* ⚠️ 唔可以淨係 `.field input` —— 設定版啲輸入框唔喺 `.field` 入面，
   收窄咗個 selector 就會跌返做瀏覽器預設（2px inset、白底）。
   淺色模式勉強睇得出，**深色模式就係一格白**，而冇人會為咗一個
   輸入框去開深色模式試。所以呢度一次過寫齊。 */
.field input,.set input,.set textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-s);
  background:var(--bg);color:var(--ink);font:inherit;outline:0;transition:border-color .15s,box-shadow .15s;
}
.field input:focus,.set input:focus,.set textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 16px;border-radius:var(--radius-s);font-weight:600;
  background:var(--accent);color:var(--accent-ink);width:100%;transition:filter .15s;
}
.btn:hover{filter:brightness(1.06)}
.btn[disabled]{opacity:.6;cursor:default}
.err{color:var(--bad);font-size:12.5px;margin-top:10px;min-height:1.4em}

/* ── 資料庫（期 3）──────────────────────────────── */
/* ⚠️ overflow-y 一定要 hidden：入面啲 a 用 margin-bottom:-1px 疊住條底線，
   淨係 overflow-x:auto 嘅話呢 1px 會令佢生一條直向 scrollbar 出嚟。 */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.tabs a{
  padding:9px 14px;color:var(--muted);font-weight:500;white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s;
}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.tabs a small{margin-left:5px;font-size:11px;color:var(--faint);font-weight:600}

.kb-hint{
  padding:10px 14px;border-radius:var(--radius-s);background:var(--accent-soft);
  color:var(--ink);font-size:13px;margin-bottom:14px;line-height:1.6;
}
.kb-hint.bad{background:var(--bad-soft)}
.kb-hint.ok{background:var(--ok-soft);color:var(--ok);font-weight:600}
.kb-hint code{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:0 6px;font-weight:700;margin-right:2px}
.kb-hint small{color:var(--muted);margin-right:8px}
.faint{color:var(--faint)}

.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:12px;color:var(--muted);font-weight:600;padding:11px 16px;border-bottom:1px solid var(--line-2);white-space:nowrap}
.tbl td{padding:12px 16px;border-bottom:1px solid var(--line-2);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.off td{color:var(--faint)}
.tbl td.act,.faq .act{text-align:right;white-space:nowrap}
.tbl button,.faq .act button,.hist button{
  font-size:12.5px;font-weight:600;color:var(--accent);padding:4px 9px;border-radius:6px;
}
.tbl button:hover,.faq .act button:hover,.hist button:hover{background:var(--accent-soft)}
button.ghost{color:var(--muted)}
.card-foot{padding:12px 18px;border-top:1px solid var(--line-2);display:flex;align-items:center}
.btn.sm{width:auto;padding:7px 14px;font-size:13px}
/* ⚠️ 上面個 `button.ghost` 綁死咗 button 標籤 —— <a class="btn ghost">
   食唔到，兩粒掣會一樣咁實色。呢條係俾 <a> 用嘅。 */
.btn.ghost{background:var(--line-2);color:var(--ink)}
.btn.ghost:hover{background:var(--line)}

.frm{margin-top:14px}
.frm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px 16px;padding:16px 18px 4px}
.frm-grid.one{grid-template-columns:1fr}
.frm .field{margin:0}
.frm .field span{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:5px}
.frm .field small{display:block;font-size:11.5px;color:var(--faint);margin-top:4px;line-height:1.4}
.frm .err{padding:0 18px}
textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-s);
  background:var(--bg);color:var(--ink);font:inherit;line-height:1.6;resize:vertical;outline:0;
  transition:border-color .15s,box-shadow .15s;
}
textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
textarea[readonly]{opacity:.8}
.soft{margin-bottom:14px}

.faq{padding:14px 18px;border-bottom:1px solid var(--line-2);display:grid;grid-template-columns:1fr auto;gap:4px 16px}
.faq:last-child{border-bottom:0}
.faq .q{grid-column:1;font-weight:600}
.faq .a{grid-column:1;color:var(--muted);font-size:13px;white-space:pre-wrap}
.faq .act{grid-column:2;grid-row:1/3}
.faq.off .q,.faq.off .a{color:var(--faint)}

.hist{padding:13px 18px;border-bottom:1px solid var(--line-2);display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.hist:last-child{border-bottom:0}
.diff{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:12.5px}
.diff span{color:var(--muted)}
.diff i{font-style:normal;color:var(--faint);margin-right:4px}

/* ── 設定 ───────────────────────────────────────── */
/* ⚠️ `.card-b` 特登係 `padding: 6px 0` —— 左右零。現有嘅 `.faq` `.hist`
   各自帶住 `padding: … 18px`，所以新加嘅行都要自己補返，唔係啲輸入框
   就會爆到貼住張卡個邊（第一版就係咁，量到 input 269–1392 對住
   card 268–1393，即係成個貼晒邊）。 */
.sets .set,.card-b > .kv,.card-b > .pw,.card-b .acct{padding-left:18px;padding-right:18px}
.sets .set{padding-top:14px;padding-bottom:14px;border-bottom:1px solid var(--line-2)}
.sets .set:first-child{padding-top:6px}
.sets .set:last-child{border-bottom:0;padding-bottom:6px}
.set b{font-weight:600}
.set p{color:var(--muted);font-size:13px;line-height:1.6;margin-top:4px}
.set.off b{color:var(--muted)}
.set.col{display:flex;flex-direction:column;gap:8px}
.set.col p{margin:0}
.set .tag{margin-left:8px;vertical-align:2px}

/* 開關掣。⚠️ 用 <label> 包住個 checkbox，唔用 JS 砌 —— 咁樣鍵盤同
   螢幕閱讀器都用得，而且撳字都 toggle 到。 */
.sw{display:inline-block;vertical-align:-6px;margin-right:9px;cursor:pointer}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw i{
  display:block;width:38px;height:22px;border-radius:11px;background:var(--line);
  position:relative;transition:background .18s;
}
.sw i::after{
  content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .18s;
}
.sw input:checked + i{background:var(--accent)}
.sw input:checked + i::after{transform:translateX(16px)}
.sw input:focus-visible + i{box-shadow:0 0 0 3px var(--accent-soft)}
.sw input:disabled + i{opacity:.45;cursor:not-allowed}

.kv{display:grid;gap:12px}
.kv > div{display:grid;grid-template-columns:150px 1fr;gap:4px 12px;align-items:baseline}
.kv span{color:var(--muted);font-size:13px}
.kv small{grid-column:2;color:var(--faint);font-size:12px;line-height:1.5}

.pw{margin-top:18px;padding-top:18px;border-top:1px solid var(--line-2);display:flex;flex-direction:column;gap:8px}
.pw p{color:var(--muted);font-size:13px}
.pw .frm-grid{padding:6px 0 0}

@media (max-width:600px){
  .kv > div{grid-template-columns:1fr}
  .kv small{grid-column:1}
}

/* ── 額度 ───────────────────────────────────────── */
.use{padding:16px 18px;margin-bottom:18px;display:flex;flex-direction:column;gap:9px}
.use-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.use-n{display:flex;align-items:baseline;gap:8px}
.use-n b{font-size:26px;line-height:1}
.use-bar{height:7px;border-radius:4px;background:var(--line);overflow:hidden}
.use-bar i{display:block;height:100%;background:var(--ok);border-radius:4px;transition:width .4s}
.use.warn .use-bar i{background:var(--warn)}
.use.bad .use-bar i{background:var(--bad)}
.use.bad{border-color:var(--bad)}
/* ── 額度版 ─────────────────────────────────────── */
.kv-r{display:flex;align-items:baseline;gap:10px;padding:11px 20px;border-bottom:1px solid var(--line-2)}
.kv-r:last-child{border-bottom:0}
.kv-r b{min-width:120px}
.kv-r span{color:var(--muted);font-size:13px;flex:1}
.kv-r em{font-style:normal;font-size:12px;font-weight:600;color:var(--accent);
  background:var(--accent-soft);padding:3px 9px;border-radius:99px}
.kv-r.on{background:var(--accent-soft)}
.topup .card-b{padding:16px 20px 18px}
.topup p{line-height:1.7;margin-bottom:8px}
.topup-a{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.topup-a .btn{width:auto;padding:10px 18px}

.use-msg{font-size:13px;line-height:1.65;color:var(--ink);background:var(--accent-soft);
  padding:9px 12px;border-radius:var(--radius-s);margin-top:2px}
.use.bad .use-msg{background:var(--bad-soft)}
.use.warn .use-msg{background:var(--warn-soft)}

/* ── 答唔到啲乜 ─────────────────────────────────── */
.unans{display:grid;grid-template-columns:26px 1fr auto;gap:4px 12px;align-items:center;
  padding:12px 18px;border-bottom:1px solid var(--line-2)}
.unans:last-child{border-bottom:0}
.unans .rank{width:24px;height:24px;border-radius:50%;background:var(--accent-soft);
  color:var(--accent);font-size:12px;font-weight:700;display:grid;place-items:center}
.unans b{font-weight:600}
.unans .btn{white-space:nowrap}
.kws{display:flex;flex-wrap:wrap;gap:7px}
.kw{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:99px;
  background:var(--surface);border:1px solid var(--line);font-size:13px}
.kw i{font-style:normal;color:var(--muted);font-size:11.5px;font-weight:700}
.hours{display:flex;align-items:flex-end;gap:3px;height:92px}
.hr{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:4px}
.hr i{display:block;background:var(--accent);border-radius:2px;min-height:2px;opacity:.85}
.hr span{font-size:9.5px;color:var(--faint);text-align:center;height:12px}

/* ── 客人 ───────────────────────────────────────── */
.per{display:grid;grid-template-columns:1fr auto auto;gap:6px 14px;align-items:center;
  padding:12px 18px;border-bottom:1px solid var(--line-2)}
.per:last-child{border-bottom:0}
.per-note{font-size:12.5px;color:var(--muted);margin-top:4px;
  padding-left:9px;border-left:2px solid var(--line)}
.per-t{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end;max-width:260px}
.per-a{display:flex;gap:6px;align-items:center;white-space:nowrap}
.kw.sm{padding:3px 8px;font-size:11.5px}
.kw.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600}
.kw.t-ok{border-color:var(--ok);color:var(--ok)}
.kw.t-warn{border-color:var(--warn);color:var(--warn)}
.kw.t-bad{border-color:var(--bad);color:var(--bad)}
.kw.t-accent{border-color:var(--accent);color:var(--accent)}
#pq input{width:220px;padding:7px 11px;font-size:13px}
@media (max-width:760px){
  .per{grid-template-columns:1fr}
  .per-t{justify-content:flex-start;max-width:none}
  .per-a{justify-content:flex-start}
  #pq input{width:100%}
}

/* ── 細屏 ───────────────────────────────────────── */
@media (max-width:980px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .grid-2,.chat-wrap{grid-template-columns:1fr}
}
@media (max-width:760px){
  .app{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;align-items:center;gap:12px;padding:12px 14px;border-right:0;border-bottom:1px solid var(--line)}
  .nav{flex-direction:row;flex:1;overflow:auto}
  .nav a{white-space:nowrap;padding:7px 10px}
  .side-foot{display:none}
  .main{padding:18px 16px 40px}
  .top{flex-direction:column}
  .msg{max-width:88%}
}