/* 頁殼：左側邊欄（可收起）＋頂欄＋內容；電話用抽屜選單；登入／註冊／忘記密碼；共用組件。 */
*{box-sizing:border-box}
html{height:100%}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:var(--fs-md);line-height:1.5}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
button,select,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand-green-deep);outline-offset:2px}
.hidden{display:none!important}
h1,h2,h3{font-family:var(--sans);font-weight:700;margin:0;text-wrap:balance}
svg.i{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* 例外：第三方品牌標誌（例如 Love Encore）係填色圖形，唔係本站嗰套 stroke line icon。
   未選中時保留品牌色（同 assets/logos/ 嗰批保險公司標誌同一個道理：外部品牌唔跟 --brand-*）；
   選中嗰下側欄係品牌深色底白字，品牌色會睇唔清，所以跟返 currentColor 變白色剪影。
   #178086 係 Love Encore 品牌 teal 調深一級後嘅值：喺側欄底（--bg2 #F4F5F2）實測 4.29，
   選中態白剪影喺 --primary 上 14.68，兩者都過（非文字圖形只需 3.0）。
   官方原色 #239CA4 喺同一個底得 3.02，貼住閘，所以調深。 */
svg.i.solid{fill:#178086;stroke:none}
.th-side a.item.on svg.i.solid,.side-min .th-side .group.has-on .parent svg.i.solid{fill:currentColor}

/* ── 佈局 ── */
.th-layout{display:grid;grid-template-columns:var(--side-w) 1fr;min-height:100vh;transition:grid-template-columns .18s ease}
.th-layout.side-min{grid-template-columns:var(--side-w-min) 1fr}
.th-content{display:flex;flex-direction:column;min-width:0;min-height:100vh}

/* ── 側邊欄 ── */
.th-side{position:sticky;top:0;height:100vh;height:100dvh;background:var(--bg2);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:var(--sp-3h) var(--sp-3);gap:var(--sp-1h);overflow:hidden}
/* ⚠️ 導覽要自己捲：唔捲嘅話矮芒（低階 iPad）會將「收起」掣推出視窗外，點都撳唔到 */
.th-side .nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:var(--sp-1h);margin-right:-4px;padding-right:var(--sp-1)}
/* 捲得郁先出嘅上下陰影 —— 唔出嘅話用戶唔知道下面仲有嘢（矮芒先會見到） */
.th-side .nav{background:linear-gradient(var(--bg2) 30%,rgba(244,245,242,0)) top/100% 16px no-repeat,linear-gradient(rgba(244,245,242,0),var(--bg2) 70%) bottom/100% 16px no-repeat,radial-gradient(farthest-side at 50% 0,rgba(20,33,27,.12),rgba(20,33,27,0)) top/100% 7px no-repeat,radial-gradient(farthest-side at 50% 100%,rgba(20,33,27,.12),rgba(20,33,27,0)) bottom/100% 7px no-repeat;background-attachment:local,local,scroll,scroll}
.th-side .nav::-webkit-scrollbar{width:6px}
.th-side .nav::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r-sm)}
.th-side .nav::-webkit-scrollbar-track{background:transparent}
.th-side>.brand,.th-side>.user{flex:none}
.th-side .brand{display:flex;align-items:center;gap:var(--sp-2h);padding:var(--sp-1h) var(--sp-2) var(--sp-4);border-bottom:1px solid var(--line);margin-bottom:var(--sp-2);color:inherit;white-space:nowrap}
.th-side .brand:hover{text-decoration:none}
.th-side .brand img{width:36px;height:36px;flex:none;object-fit:contain;background:transparent}
.th-side .brand b{display:block;font-size:var(--fs-md);line-height:1.2}
.th-side .brand span{display:block;font-size:var(--fs-2xs);color:var(--muted);letter-spacing:.04em;line-height:1.2}
.th-side a.item{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2h) var(--sp-2h);border-radius:var(--r-sm);color:var(--ink2);font-weight:500;white-space:nowrap}
.th-side a.item:hover{background:var(--line2);text-decoration:none;color:var(--ink)}
.th-side a.item.on{background:var(--primary);color:var(--primary-ink);font-weight:700}
.th-side .group{display:flex;flex-direction:column;gap:var(--sp-1)}
.th-side .group .parent{justify-content:flex-start}
.th-side .group .parent .caret{margin-left:auto;width:16px;height:16px;transition:transform .15s;color:var(--muted)}
.th-side .group.open .parent .caret{transform:rotate(90deg)}
.th-side .group.has-on .parent{color:var(--ink);font-weight:700}
.th-side .children{display:none;flex-direction:column;gap:var(--sp-1);padding-left:var(--sp-2h)}
.th-side .group.open .children{display:flex}
.th-side a.item.child{padding:var(--sp-2) var(--sp-2h) var(--sp-2) var(--sp-3);font-size:var(--fs-sm)}
.th-side a.item.child svg.i{width:17px;height:17px}
.side-min .th-side .children{display:none!important}
.side-min .th-side .group .parent .caret{display:none}
.side-min .th-side .group.has-on .parent{background:var(--primary);color:var(--primary-ink)}
.th-side a.item .badge{margin-left:auto;min-width:18px;height:18px;padding:0 var(--sp-1h);border-radius:var(--r-md);background:var(--bad);color:#fff;font-family:var(--mono);font-size:var(--fs-2xs);line-height:18px;text-align:center;display:none}
.th-side a.item .badge.on{display:block}
.th-side a.item.on .badge{background:#fff;color:var(--bad)}
.side-min .th-side a.item .badge{display:none!important}
/* 大類分隔線：每個頂層大類之間一條，收起側邊欄時照樣分組 */
.th-side .nav-sep{height:1px;background:var(--line);margin:var(--sp-1h) var(--sp-1);flex:none}
.side-min .th-side .nav-sep{margin:var(--sp-1h) 2px}
/* 管理員專用標籤：主題色底、白字、一行過，唔換行 */
.th-side .tag-admin{margin-left:auto;flex:none;background:var(--primary);color:var(--primary-ink);font-size:var(--fs-3xs);font-weight:700;line-height:16px;height:16px;padding:0 var(--sp-1h);border-radius:var(--r-pill);letter-spacing:.02em;white-space:nowrap}
.th-side a.item.on .tag-admin,.th-side .group.has-on .parent .tag-admin{background:var(--primary-ink);color:var(--primary)}
.th-side .tag-admin + .badge{margin-left:var(--sp-1h)}
.th-side .group .parent .tag-admin + .caret{margin-left:var(--sp-1h)}
.side-min .th-side .tag-admin{display:none!important}
.th-side .user{border-top:1px solid var(--line);padding-top:var(--sp-2h);display:flex;flex-direction:column;gap:var(--sp-1h)}
.th-side .user .email{font-size:var(--fs-xs);color:var(--muted);padding:0 var(--sp-2h);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.th-side .user .me{display:flex;align-items:center;gap:var(--sp-2h);padding:var(--sp-1h) var(--sp-2);border-radius:var(--r-md);color:inherit;text-decoration:none;min-width:0}
.th-side .user .me:hover{background:var(--neutral-soft)}
.th-side .user .av{flex:none;width:32px;height:32px;border-radius:50%;background:var(--brand-green-deep);color:#fff;font-size:var(--fs-xs);font-weight:700;display:flex;align-items:center;justify-content:center;overflow:hidden}
.th-side .user .av img{width:100%;height:100%;object-fit:cover;display:block}
.th-side .user .who{display:flex;flex-direction:column;min-width:0}
.th-side .user .who b{font-size:var(--fs-sm);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.th-side .user .who .email{padding:0;display:block}
.side-min .th-side .user .who{display:none}
.side-min .th-side .user .me{padding:var(--sp-1h);justify-content:center}
.th-side button.item{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2h) var(--sp-2h);border:0;background:transparent;border-radius:var(--r-sm);color:var(--ink2);font-weight:500;cursor:pointer;white-space:nowrap;width:100%;text-align:left}
.th-side button.item:hover{background:var(--line2);color:var(--ink)}
.side-min .th-side{padding:var(--sp-3h) var(--sp-2h)}
.side-min .th-side .brand{justify-content:center;padding:var(--sp-1h) 0 var(--sp-3h)}
.side-min .th-side .brand div,.side-min .th-side .label,.side-min .th-side .email{display:none}
.side-min .th-side a.item,.side-min .th-side button.item{justify-content:center;padding:var(--sp-2h) 0}
.th-side .collapse svg.i{transition:transform .18s}
.side-min .th-side .collapse svg.i{transform:rotate(180deg)}

/* ── 頂欄 ── */
.th-top{position:sticky;top:0;z-index:20;height:calc(var(--topbar-h) + env(safe-area-inset-top,0px));background:var(--bg);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:var(--sp-3h);padding:env(safe-area-inset-top,0px) var(--sp-5) 0}
/* 「加到主畫面」全屏開嗰陣，頂欄同 iPhone 狀態欄重疊，☰ 掣貼住頂難撳（同事 09-03 備忘錄 #1）——
   頂欄留返安全區，掣本身 44×44（Apple 最細可撳尺寸） */
.th-top .menu{display:none;border:1px solid var(--line);background:var(--card);border-radius:var(--r-sm);width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;color:var(--ink2);touch-action:manipulation}
.th-top .title{font-size:var(--fs-lg);font-weight:700}
.th-top .spacer{flex:1}
.th-top .fresh{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.th-main{flex:1;padding:var(--sp-5);width:100%}
.th-foot{border-top:1px solid var(--line);background:var(--card2);color:var(--muted);font-size:var(--fs-xs);padding:var(--sp-3) var(--sp-5);display:flex;gap:var(--sp-5);flex-wrap:wrap;justify-content:space-between}
.th-foot b{color:var(--ink2);font-weight:500}

/* ── 開機載入畫面（中性，唔似登入頁） ── */
.th-boot{position:fixed;inset:0;background:var(--bg);z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-4)}
.th-boot img{width:64px;height:64px;object-fit:contain;opacity:.9}
.th-boot .sp{width:22px;height:22px;border:2px solid var(--line);border-top-color:var(--brand-green-deep);border-radius:50%;animation:spin .8s linear infinite}
.th-boot .msg{font-size:var(--fs-sm);color:var(--muted);min-height:18px;text-align:center;padding:0 var(--sp-5)}
.th-boot{transition:opacity .26s ease}
.th-boot.fade{opacity:0;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* 桌面唔出頂欄（只係浪費空間）；電話先要佢放選單掣 */
@media (min-width:901px){.th-top{display:none}:root{--topbar-h:0px}
  /* 過場只蓋內容區 —— 電腦／iPad 唔應該連側邊欄都閃走。body.th-chrome＝已經入咗 App（見 shell.js） */
  body.th-chrome .th-boot{left:var(--side-w)}
  body.th-chrome.th-min .th-boot{left:var(--side-w-min)}
  body.th-chrome .th-boot img{width:48px;height:48px}
}

/* 矮芒（低階 iPad 橫向得 ~690px 可用高度）：收緊行高，令成條側邊欄唔使捲都見到底 */
@media (min-width:901px) and (max-height:780px){
  .th-side{padding:var(--sp-2h) var(--sp-3)}
  .th-side .brand{padding:var(--sp-1) var(--sp-2) var(--sp-2h);margin-bottom:var(--sp-1h)}
  .th-side .nav{gap:var(--sp-1)}
  .th-side .nav-sep{margin:var(--sp-1h) var(--sp-1)}
  .th-side a.item,.th-side button.item{padding:var(--sp-1h) var(--sp-2h)}
  .th-side a.item.child{padding:var(--sp-1h) var(--sp-2h) var(--sp-1h) var(--sp-3)}
  .th-side .user{padding-top:var(--sp-2);gap:var(--sp-1)}
}

/* ── 電話：抽屜 ── */
.th-scrim{position:fixed;inset:0;background:rgba(20,33,27,.35);z-index:29;display:none}
@media (max-width:900px){
  .th-layout,.th-layout.side-min{grid-template-columns:1fr}
  .th-side{position:fixed;left:0;top:0;bottom:0;width:min(300px,84vw);z-index:30;transform:translateX(-102%);transition:transform .2s ease;box-shadow:0 12px 40px rgba(0,0,0,.25);height:100vh;height:100dvh}
  .th-layout.drawer-open .th-side{transform:none}
  .th-layout.drawer-open .th-scrim{display:block}
  .side-min .th-side .brand div,.side-min .th-side .label,.side-min .th-side .email{display:block}
  .side-min .th-side a.item,.side-min .th-side button.item{justify-content:flex-start;padding:var(--sp-2h) var(--sp-2h)}
  .side-min .th-side .group.open .children{display:flex!important}
  .side-min .th-side .group .parent .caret{display:block}
  .side-min .th-side .tag-admin{display:block!important}
  .side-min .th-side .group.has-on .parent{background:transparent;color:var(--ink)}
  .th-side button.collapse{display:none}
  .th-top{padding:0 var(--sp-3)}
  .th-top .menu{display:inline-flex}
  .th-top .fresh{display:none}
  .th-main{padding:var(--sp-3)}
}

/* ── 登入／註冊／忘記密碼 ── */
.th-auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
/* ⚠️ 登入頁左右兩欄嘅頁面級水槽（呢行 56px 64px、h2 margin-top:44px、900px 以下 .pane 嘅 64px）
   保留寫死值：間距梯階最大只到 --sp-7（48px），換上去左右會窄 16px。
   2026-09-02 用 harness.html 實渲染對照過兩個版本：48px 版嘅品牌區貼住視窗邊，
   成條左欄水槽失衡，所以唔換 token。 */
.th-auth .side{background:var(--bg2);border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;padding:56px 64px}
.th-auth .side .brand{display:flex;align-items:center;gap:var(--sp-3h)}
.th-auth .side .brand img{width:56px;height:56px;object-fit:contain}
.th-auth .side .brand b{display:block;font-size:var(--fs-xl)}
.th-auth .side .brand span{display:block;font-size:var(--fs-xs);color:var(--muted);letter-spacing:.04em}
.th-auth .side h2{font-size:var(--fs-3xl);line-height:1.3;margin-top:44px}
.th-auth .side p{margin:var(--sp-3) 0 0;font-size:var(--fs-md);line-height:1.7;color:var(--ink2);max-width:40ch}
.th-auth .side ul{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3h);max-width:44ch}
.th-auth .side li{position:relative;padding-left:var(--sp-4);font-size:var(--fs-md);color:var(--ink2);line-height:1.5}
.th-auth .side li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:var(--r-sm);background:var(--brand-green)}
.th-auth .side li b{display:block;font-size:var(--fs-md);font-weight:700;color:var(--ink)}
.th-auth .side li s{display:block;text-decoration:none;font-size:var(--fs-xs);color:var(--muted);margin-top:2px}
.th-auth .side li s em{font-style:normal;color:var(--ink2);font-weight:500}
.th-auth .side p.asof{margin-top:var(--sp-5);font-size:var(--fs-xs);color:var(--faint);max-width:44ch}
.th-auth .side .foot{font-size:var(--fs-2xs);line-height:1.7;color:var(--faint);max-width:46ch}
.th-auth .pane{display:flex;align-items:center;justify-content:center;padding:var(--sp-7) var(--sp-5)}
.th-form{width:100%;max-width:400px;display:flex;flex-direction:column;gap:var(--sp-4)}
.th-form .mbrand{display:none;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-2)}
.th-form .mbrand img{width:48px;height:48px;object-fit:contain}
.th-form .mbrand b{display:block;font-size:var(--fs-lg)}
.th-form .mbrand span{display:block;font-size:var(--fs-2xs);color:var(--muted);letter-spacing:.04em}
.th-form h1{font-size:var(--fs-2xl)}
.th-form p.sub{margin:var(--sp-1h) 0 0;color:var(--muted);font-size:var(--fs-md)}
.th-field{display:flex;flex-direction:column;gap:var(--sp-2)}
.th-field .lbl{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-sm);font-weight:500;color:var(--ink2)}
.th-field .lbl a{font-size:var(--fs-sm)}
.th-field input{height:46px;border:1px solid var(--line);background:var(--card);border-radius:var(--r-md);padding:0 14px;font-size:var(--fs-md);width:100%}
.th-field input:focus{border-color:var(--brand-green-deep);outline:none;box-shadow:0 0 0 3px var(--focus)}
.th-field .pw{position:relative}
.th-field .pw input{padding-right:46px}
.th-field .eye{position:absolute;right:4px;top:4px;width:38px;height:38px;border:0;background:transparent;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer}
.th-field .eye:hover{color:var(--ink);background:var(--line2)}
.th-field .hint{font-size:var(--fs-xs);color:var(--muted)}
.th-row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
/* 登入頁主掣 —— 對齊 .btn.lg.primary（原本 48px／700／寫死 8px 圓角，同全站對唔上） */
.th-primary{height:44px;border:1px solid var(--primary);background:var(--primary);color:var(--primary-ink);
  border-radius:var(--r-sm);font-family:inherit;font-weight:600;font-size:var(--fs-md);cursor:pointer;margin-top:var(--sp-1)}
.th-primary:hover{background:var(--brand-deeper);border-color:var(--brand-deeper)}
.th-primary:disabled{opacity:.6;cursor:default}
.th-error{display:none;background:var(--bad-soft);color:var(--bad);border-radius:var(--r-md);padding:var(--sp-2h) var(--sp-3);font-size:var(--fs-sm)}
.th-ok{display:none;background:var(--ok-soft);color:var(--ok);border-radius:var(--r-md);padding:var(--sp-2h) var(--sp-3);font-size:var(--fs-sm)}
.th-note{font-size:var(--fs-xs);line-height:1.7;color:var(--muted)}
.th-switch{font-size:var(--fs-sm);color:var(--muted);text-align:center;margin-top:var(--sp-1)}
.th-state{width:100%;max-width:440px;text-align:center;color:var(--ink2);line-height:1.8;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-6)}
.th-state strong{display:block;font-size:var(--fs-xl);color:var(--ink);margin-bottom:var(--sp-1h)}
.th-state .th-primary{width:100%;margin-top:var(--sp-4)}
/* 登出永遠唔係主要動作 —— 唔好同「提交」爭同一個深綠掣 */
.th-state #thStateOut{background:transparent;color:var(--ink2);border:1px solid var(--line)}
.th-state #thStateOut:hover{border-color:var(--brand-green-deep);color:var(--brand-green-deep)}
.th-state .th-form.th-cp{margin-top:var(--sp-4);text-align:left;gap:var(--sp-3h)}
.th-state .th-form.th-cp .th-error{display:none}
.th-state .th-error{margin-top:var(--sp-3)}
@media (max-width:900px){
  .th-auth{grid-template-columns:1fr}
  .th-auth .side{display:none}
  .th-auth .pane{align-items:flex-start;padding:64px var(--sp-5) var(--sp-6)}
  .th-form .mbrand{display:flex}
  .th-form h1{font-size:var(--fs-xl)}
  .th-field input{height:48px;font-size:var(--fs-lg)}
  .th-row2{grid-template-columns:1fr}
}

/* ── 共用組件 ── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow)}
.scroll{overflow-x:auto}
.seg{display:inline-flex;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-sm);padding:3px;gap:3px}
/* ⚠️ 切換掣內距係元件規格，唔准換間距 token：呢度 7px 14px、.st-head 11px 22px、.f-card h2 5px 11px、
   .v-profile 5px 12px —— 四個尺寸各自調過，snap 落 6px 階梯會迫死個字（原因見 notify.css 頂嗰段註釋）。 */
.seg button{border:0;background:transparent;border-radius:var(--r-sm);padding:7px 14px;font-size:var(--fs-md);font-weight:700;color:var(--ink2);cursor:pointer;white-space:nowrap}
.seg button:hover{background:var(--neutral-soft)}
/* 資料未夠嘅期間掣：灰、唔准撳（aria-disabled，唔用 disabled 以保留 hover 提示） */
.seg button.na{opacity:.38;cursor:not-allowed}
.seg button.na:hover{background:transparent}
.seg button.on{background:var(--accent);color:var(--accent-ink)}
/* 主場公司置頂開關（team.js homeCompany）：亮起＝而家置頂緊 */
.pinchk{display:inline-flex;align-items:center;gap:var(--sp-1h);border:1px solid var(--line);background:var(--card);border-radius:var(--r-pill);padding:var(--sp-1h) var(--sp-3);font-size:var(--fs-sm);font-weight:500;color:var(--ink2);white-space:nowrap;cursor:pointer}
.pinchk:hover{border-color:var(--brand-green-deep)}
.pinchk input{accent-color:var(--brand-gold-deep);margin:0;cursor:pointer}
.pinchk.on{background:var(--accent-soft);border-color:var(--brand-gold-deep);color:var(--brand-deeper);font-weight:700}
/* 按鈕 —— 全站唯一一套（2026-09-02 合併）。
   之前有三套並存：.btn（7/12、500）、.th-primary（48px、700、寫死 8px 圓角）、
   .mr-btn（8/12、700、藍主色）。三個規格冇一個一樣。而家全部由呢度出。
   三個尺寸：.btn.sm ／ 預設 ／ .btn.lg；四個變體：primary ／ 預設 ／ ghost ／ danger。 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1h);
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:var(--r-sm);padding:8px 14px;font-family:inherit;
  font-size:var(--fs-sm);font-weight:600;line-height:1.15;cursor:pointer;white-space:nowrap;
  transition:background .14s,border-color .14s,color .14s}
.btn:hover{border-color:var(--brand-green-deep);color:var(--brand-green-deep)}
.btn:focus-visible{outline:2px solid var(--brand-green-deep);outline-offset:2px}
.btn.sm{padding:5px 10px;font-size:var(--fs-xs)}
.btn.lg{padding:13px 20px;font-size:var(--fs-md)}
.btn.primary,.btn.pri{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.btn.primary:hover,.btn.pri:hover{background:var(--brand-deeper);border-color:var(--brand-deeper);color:var(--primary-ink)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink2)}
.btn.ghost:hover{background:var(--bg2);border-color:transparent;color:var(--ink)}
.btn.danger{background:var(--card);border-color:rgba(180,35,35,.35);color:var(--bad)}
.btn.danger:hover{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.btn:disabled,.btn.off{opacity:.42;cursor:not-allowed}
.btn:disabled:hover,.btn.off:hover{border-color:var(--line);color:var(--ink);background:var(--card)}
.btn.primary:disabled:hover,.btn.pri:disabled:hover{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}

/* Hero —— 主內容區最頂嘅品牌區。一版最多一個，擺「呢版最重要嗰個數」。
   「睇狀況」嘅版先用（主頁／業績／RADAR／日曆）；「做嘢」嘅版唔用（客戶／設定／資料庫）。 */
.hero{background:var(--primary);color:#fff;border-radius:var(--r-md);
  padding:var(--sp-5);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;
  border-radius:50%;background:radial-gradient(circle,rgba(52,211,153,.16),transparent 68%);
  pointer-events:none}
.hero>*{position:relative;z-index:1}
.hero .hlabel{font-size:var(--fs-xs);color:rgba(255,255,255,.62);font-weight:500}
.hero .hval{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--fs-2xl);
  font-weight:500;letter-spacing:-.02em;margin-top:2px}
.hero .hsub{font-size:var(--fs-2xs);color:rgba(255,255,255,.5);margin-top:3px}
.hero .hrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:var(--sp-5)}
.hero .lead .hval{font-size:var(--fs-3xl)}
.hero .div{border-left:1px solid rgba(255,255,255,.14);padding-left:var(--sp-5)}
.hero .pos{color:var(--brand-green)} .hero .neg{color:#FF9B9B}
.hero .pill.ok{background:rgba(52,211,153,.2);color:var(--brand-green)}
.hero .pill.warn{background:rgba(255,255,255,.14);color:#F3D9A8}
.hero .pill.info{background:rgba(255,255,255,.14);color:#BBD3EE}
.hero .pill.bad{background:rgba(255,155,155,.18);color:#FF9B9B}   /* 09-15 主頁管理員欄「待批核／已終止」—— 深底上 --bad 字冇對比，跟 .hero .neg 同色 */
.hero .tbl th{background:transparent;color:rgba(255,255,255,.5);border-bottom-color:rgba(255,255,255,.14)}
.hero .tbl td{border-bottom-color:rgba(255,255,255,.09);color:rgba(255,255,255,.92)}
.pill{display:inline-block;padding:2px var(--sp-2h);border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:700;white-space:nowrap;line-height:1.5}
.pill.ok{background:var(--ok-soft);color:var(--ok)}.pill.bad{background:var(--bad-soft);color:var(--bad)}.pill.warn{background:var(--warn-soft);color:var(--warn)}.pill.info{background:var(--info-soft);color:var(--info)}.pill.neutral{background:var(--neutral-soft);color:var(--ink2)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.pos{color:var(--ok)}.neg{color:var(--bad)}.flat{color:var(--muted)}
.muted{color:var(--muted)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
table.tbl{border-collapse:collapse;width:100%}
.tbl th,.tbl td{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--line2);vertical-align:middle;white-space:nowrap;text-align:left}
.tbl thead th{background:var(--card2);font-size:var(--fs-xs);font-weight:700;color:var(--ink2);position:sticky;top:0;z-index:1}
.tbl th.num,.tbl td.num{text-align:right}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr.link{cursor:pointer}
.tbl tbody tr.link:hover td{background:var(--accent-soft)}
.tbl th.sortable{cursor:pointer;user-select:none}
.tbl th.sortable:hover{color:var(--ink)}
.tbl th.sorted{color:var(--brand-green-deep)}
/* 分批渲染嘅「顯示更多」行（TH.tableRows）：置中一個次要掣，唔似數據行 */
.tbl tr.th-more td{text-align:center;padding:var(--sp-3) var(--sp-3);background:var(--card2)}
.tbl tr.th-more td .btn{min-width:200px}
.tbl th.sorted::after{content:" ▾";font-size:var(--fs-3xs)}
.tbl th.sorted.asc::after{content:" ▴"}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-3)}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-3h)}
.kpi .l{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.kpi .v{font-family:var(--mono);font-size:var(--fs-xl);font-weight:500;font-variant-numeric:tabular-nums;margin-top:2px}
.kpi .s{font-size:var(--fs-xs);color:var(--muted);margin-top:2px}
/* 標準提示：底部置中、深色底、左邊色條分辨成功／錯誤 */
.th-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(8px);background:var(--ink);color:#fff;padding:var(--sp-2h) var(--sp-4) var(--sp-2h) var(--sp-4);border-left:4px solid var(--brand-green);border-radius:var(--r-md);font-size:var(--fs-sm);font-weight:500;line-height:1.4;max-width:min(520px,calc(100vw - 32px));box-shadow:0 8px 24px rgba(0,0,0,.18);z-index:120;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.th-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.th-toast.err{border-left-color:#E5484D}
/* 浮動提示（省略文字全名／data-tip）：淺底深字（09-21 由深底白字改 —— 用戶 Winston：「指住基金百分比出嘅提示太深色，根本睇唔到字」）、細字、最多 360px、可摺行；z-index 高過彈出層；同圖表資料卡 .chart-tip 一款 */
.th-tip{position:fixed;z-index:1200;max-width:min(360px,calc(100vw - 16px));background:var(--card);color:var(--ink);border:1px solid var(--line);padding:var(--sp-1h) var(--sp-2h);border-radius:var(--r-sm);font-size:var(--fs-xs);line-height:1.45;box-shadow:0 6px 20px rgba(0,0,0,.22);opacity:0;pointer-events:none;transition:opacity .12s;white-space:normal;word-break:break-word}
.th-tip.on{opacity:1}
.th-toast.info{border-left-color:var(--brand-gold)}
/* 標準確認對話框：畫面正中，闊 420，標題／說明／（提示）／右下兩個掣 */
.th-dlg{position:fixed;inset:0;z-index:110;display:flex;align-items:center;justify-content:center;padding:var(--sp-5);background:rgba(20,33,27,.45);opacity:0;transition:opacity .16s}
.th-dlg.on{opacity:1}
.th-dlg .box{width:100%;max-width:420px;background:var(--card);border-radius:var(--r-lg);box-shadow:0 20px 50px rgba(0,0,0,.25);padding:var(--sp-5) var(--sp-5) var(--sp-5);transform:translateY(6px) scale(.98);transition:transform .16s}
.th-dlg.on .box{transform:none}
.th-dlg h2{font-size:var(--fs-lg);font-weight:700;margin:0 0 var(--sp-2)}
.th-dlg p{margin:0;font-size:var(--fs-md);line-height:1.6;color:var(--ink2)}
.th-dlg .note{margin-top:var(--sp-3);padding:var(--sp-2h) var(--sp-3);border-radius:var(--r-md);background:var(--bg2);font-size:var(--fs-xs);line-height:1.5;color:var(--ink2)}
.th-dlg .note.warn{background:var(--warn-soft);color:var(--warn)}
.th-dlg .list{margin:var(--sp-3) 0 0;padding:var(--sp-2h) var(--sp-3h);list-style:none;max-height:180px;overflow:auto;background:var(--bg2);border-radius:var(--r-md);font-size:var(--fs-sm);line-height:1.7;color:var(--ink2)}
.th-dlg .inp{display:flex;flex-direction:column;gap:var(--sp-1h);margin-top:var(--sp-3h);font-size:var(--fs-xs);font-weight:500;color:var(--ink2)}
.th-dlg .inp input{height:40px;border:1px solid var(--line);border-radius:var(--r-md);padding:0 12px;font-size:var(--fs-md);font-family:'IBM Plex Mono',monospace}
.th-dlg .inp input:focus{border-color:var(--brand-green-deep);outline:none;box-shadow:0 0 0 3px var(--focus)}
.th-dlg .acts .btn[disabled]{opacity:.45;cursor:not-allowed}
.th-dlg .acts{display:flex;justify-content:flex-end;gap:var(--sp-2);margin-top:var(--sp-5)}
.th-dlg .acts .btn{padding:9px 16px;font-size:var(--fs-md);min-width:88px}
.th-dlg .acts .btn.danger{background:#B3261E;border-color:#B3261E;color:#fff}
.th-dlg .acts .btn.danger:hover{background:#9A1F19}
.th-dlg .acts .btn:focus-visible{outline:2px solid var(--brand-green-deep);outline-offset:2px}
@media (max-width:640px){.th-dlg{align-items:center}.th-dlg .acts{flex-direction:column-reverse}.th-dlg .acts .btn{width:100%}}
.skel{background:linear-gradient(90deg,var(--card2) 25%,var(--line2) 50%,var(--card2) 75%);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:var(--r-sm);min-height:14px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* 加入主畫面／開啟提醒 橫額 */
.th-pwa{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:45;display:none;
  align-items:center;gap:var(--sp-3);background:var(--primary);color:var(--primary-ink);
  border-radius:var(--r-lg);box-shadow:0 8px 28px rgba(20,33,27,.28);padding:var(--sp-3) var(--sp-3h);
  width:min(540px,calc(100vw - 28px))}
.th-pwa.on{display:flex}
.th-pwa .ic{flex:none;width:34px;height:34px;border-radius:var(--r-md);background:rgba(255,255,255,.16);display:grid;place-items:center}
.th-pwa .ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.th-pwa .t{flex:1;min-width:0}
.th-pwa .t b{display:block;font-size:var(--fs-md)}
.th-pwa .t s{display:block;text-decoration:none;font-size:var(--fs-2xs);opacity:.8;margin-top:2px;line-height:1.5}
.th-pwa .go{flex:none;border:0;background:var(--primary-ink);color:var(--primary);border-radius:var(--r-sm);
  padding:var(--sp-2) var(--sp-4);font-size:var(--fs-sm);font-weight:700;cursor:pointer}
.th-pwa .go:disabled{opacity:.6}
.th-pwa .x{flex:none;border:0;background:none;color:var(--primary-ink);opacity:.6;font-size:var(--fs-xl);line-height:1;cursor:pointer;padding:0 2px}
.th-pwa .x:hover{opacity:1}
/* ⚠️ 手機先係最需要解釋「點解要加」嗰度，所以副標題唔可以喺細螢幕收起 */
@media (max-width:520px){.th-pwa{bottom:10px;padding:var(--sp-2h) var(--sp-3);gap:var(--sp-2h)}
  .th-pwa .t b{font-size:var(--fs-sm)}.th-pwa .t s{font-size:var(--fs-2xs)}
  .th-pwa .go{padding:var(--sp-2) var(--sp-3h);font-size:var(--fs-xs)}}

/* 說明底片 */
.th-sheet{position:fixed;inset:0;z-index:60;display:none}
.th-sheet.on{display:block}
.th-sheet .scrim{position:absolute;inset:0;background:rgba(20,33,27,.42)}
.th-sheet .box{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(520px,100vw);
  background:var(--bg);border-radius:var(--r-lg) var(--r-lg) 0 0;padding:var(--sp-5) var(--sp-5) calc(22px + env(safe-area-inset-bottom));
  max-height:86vh;overflow:auto}
@media (min-width:560px){.th-sheet .box{bottom:auto;top:50%;transform:translate(-50%,-50%);border-radius:var(--r-lg)}}
.th-sheet h3{font-size:var(--fs-xl);margin-bottom:var(--sp-3h)}
.pwa-steps{margin:0 0 var(--sp-4);padding-left:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2h)}
.pwa-steps li{font-size:var(--fs-md);line-height:1.7}
.pwa-steps .sq{display:inline-block;border:1px solid var(--line);border-radius:var(--r-sm);padding:0 var(--sp-1h);font-size:var(--fs-sm)}
.pwa-why{font-size:var(--fs-xs);color:var(--muted);line-height:1.9;background:var(--card2);border-radius:var(--r-sm);padding:var(--sp-2h) var(--sp-3h);margin:0 0 var(--sp-4)}
.pwa-why b{color:var(--ink2)}
.th-sheet .btn.primary{width:100%;padding:11px}

/* 代看模式橫額 —— 系統管理員用其他用戶角度睇 */
.th-viewbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:var(--sp-3h);flex-wrap:wrap;
  padding:var(--sp-2h) var(--sp-4);background:#8a6508;color:#fff;font-size:var(--fs-sm);line-height:1.5}
.th-viewbar b{flex:none;font-weight:700;border:1px solid rgba(255,255,255,.55);border-radius:var(--r-pill);padding:2px var(--sp-2h)}
.th-viewbar span{flex:1;min-width:220px}
.th-viewbar button{flex:none;border:0;border-radius:var(--r-sm);background:#fff;color:#8a6508;
  font-weight:700;font-size:var(--fs-sm);padding:var(--sp-1h) var(--sp-3h);cursor:pointer}
.th-viewbar button:hover{background:#fff8e6}
body.view-as .th-side{border-top:3px solid #8a6508}

/* ── 全站防「撐爆版面」（2026-09-01）──
   CSS grid 同 flex 嘅格仔預設 min-width:auto，意思係「唔准縮到細過入面嘅內容」。
   所以一遇到長字串（客戶名單、報表句子、長標題），格仔就會頂大自己、連帶成版向右飄，
   或者反過嚟迫窄旁邊嗰欄，令中文變成一個字一行（中文嘅 min-content 就係一個字）。
   統一喺呢度准許縮 —— 長內容由各自嘅 ellipsis 或者 .scroll（overflow-x:auto）處理。 */
.th-layout>*,.home-grid>*,.pf-grid>*,.f-grid>*,.rd-grid>*,.cm-grid>*,.pk-grid>*,
.th-row2>*,.pr-grid>*,.mr-2>*,.pf-kpis>*,.hk>*,.mods>*,.tiles>*,.pk-dkpi>*{min-width:0}

/* 09-14 客戶脈絡帶：由客戶檔出去嘅頁（理財需要分析／醫療儲備／保障一覽表）頂部一條，同一個樣 */
.th-cbar{position:sticky;top:calc(var(--topbar-h) + env(safe-area-inset-top,0px));z-index:19;display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;padding:8px var(--sp-5);background:var(--brand-deep);color:var(--brand-hero-ink);font-size:var(--fs-xs);border-bottom:1px solid rgba(255,255,255,.12)}
.th-cbar .back{color:inherit;text-decoration:none;white-space:nowrap}
.th-cbar .back:hover{text-decoration:underline}
.th-cbar .back b{color:var(--brand-gold)}
.th-cbar .sub{opacity:.75;white-space:nowrap}
.th-cbar .sp{flex:1}
/* iOS 式返回列（只有 nav:'ios' 租戶會 render；其他隊冇呢個元素）：hub 子頁「‹ 量化分析」任何闊度；.narrow（返首頁）只喺側欄收埋嘅闊度出 */
.th-back{position:sticky;top:calc(var(--topbar-h) + env(safe-area-inset-top,0px));z-index:19;display:flex;align-items:center;padding:4px var(--sp-5);background:var(--bg);border-bottom:1px solid var(--line)}
.th-back .back{display:inline-flex;align-items:center;gap:2px;min-height:36px;padding:0 var(--sp-2) 0 0;margin-left:-6px;color:var(--brand-deep);text-decoration:none;font-size:var(--fs-md);font-weight:600;border-radius:var(--r-sm)}
.th-back .back:hover{text-decoration:underline}
.th-back .back svg.i{width:22px;height:22px;stroke-width:2.2}
@media (min-width:901px){.th-back.narrow{display:none}}
.th-cbar .act{color:inherit;text-decoration:none;border:1px solid rgba(255,255,255,.3);border-radius:var(--r-sm);padding:3px 10px;white-space:nowrap}
.th-cbar .act:hover{background:rgba(255,255,255,.12)}
@media print{.th-cbar{display:none}}

/* ═══ 租戶皮：html[data-theme="ios"]（trinity，2026-09-16 一期）═══
   跟 Trinity iOS 御典：側欄墨綠三段漸變＋金 2.5px 選中線＋淺金字（TrinitySidebarView.swift:99-129）、
   主 CTA 綠→金水平漸變 radius 12（ButtonStyles.swift PrimaryButton）、seg／篩選 pill 選中＝墨綠底淺金字
   （ClientManagementHub.swift:1155-1167）、tag 金邊 capsule（ClientIdentityBand.swift:78-90）、
   hero 金髮絲線＋radius 20（TeamHomeComponents.swift PerfHeroCard）、卡象牙底沙金邊（.homeCard）、標題 serif。
   ⚠️ 每條 selector 一定要以 html[data-theme="ios"] 開頭 —— 其他租戶一個 byte 都唔准變（tools/tenant-theme.test.js）。 */
html[data-theme="ios"]{--side-ink:#FBF7EC;--side-ink2:#C9C2B0;--side-line:rgba(198,161,91,.28);--gold-lite:#D9C08A}
html[data-theme="ios"] .th-side{background:linear-gradient(180deg,#24463B 0%,#183028 55%,#0F2019 100%);border-right:0;color:var(--side-ink)}
html[data-theme="ios"] .th-side .nav{background:none}
html[data-theme="ios"] .th-side .nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)}
html[data-theme="ios"] .th-side .brand{border-bottom-color:var(--side-line)}
html[data-theme="ios"] .th-side .brand b{font-family:var(--serif);font-size:var(--fs-lg);letter-spacing:.08em;color:var(--side-ink)}
html[data-theme="ios"] .th-side .brand span{color:var(--side-ink2)}
html[data-theme="ios"] .th-side a.item,html[data-theme="ios"] .th-side button.item{color:rgba(251,247,236,.8)}
html[data-theme="ios"] .th-side a.item:hover,html[data-theme="ios"] .th-side button.item:hover{background:rgba(255,255,255,.06);color:var(--side-ink)}
html[data-theme="ios"] .th-side a.item.on{background:rgba(217,192,138,.13);color:var(--gold-lite);box-shadow:inset 2.5px 0 0 var(--brand-gold);font-weight:700}
html[data-theme="ios"] .th-side .group.has-on .parent{color:var(--side-ink)}
html[data-theme="ios"] .side-min .th-side .group.has-on .parent{background:rgba(217,192,138,.13);color:var(--gold-lite)}
html[data-theme="ios"] .th-side .group .parent .caret{color:var(--side-ink2)}
html[data-theme="ios"] .th-side .nav-sep{background:var(--side-line)}
html[data-theme="ios"] .th-side .tag-admin{background:var(--brand-gold);color:var(--brand-deeper)}
html[data-theme="ios"] .th-side .user{border-top-color:var(--side-line)}
html[data-theme="ios"] .th-side .user .me:hover{background:rgba(255,255,255,.06)}
html[data-theme="ios"] .th-side .user .av{background:linear-gradient(135deg,var(--gold-lite),var(--brand-gold-deep));color:var(--brand-deeper);border:1.5px solid var(--brand-gold)}
html[data-theme="ios"] .th-side .user .who b{color:var(--side-ink)}
html[data-theme="ios"] .th-side .user .email{color:var(--side-ink2)}
html[data-theme="ios"] .th-side a.item .badge{background:#E87722}
/* 主 CTA：綠→金漸變、radius 12（iOS PrimaryButton）；其餘掣 radius 8 */
html[data-theme="ios"] .btn{border-radius:var(--r-sm)}
html[data-theme="ios"] .btn.primary,html[data-theme="ios"] .btn.pri{background:linear-gradient(90deg,var(--brand-deep) 0%,var(--brand-green) 55%,var(--brand-gold-deep) 100%);border-color:transparent;border-radius:var(--r-md)}
html[data-theme="ios"] .btn.primary:hover,html[data-theme="ios"] .btn.pri:hover{background:linear-gradient(90deg,var(--brand-deeper) 0%,var(--brand-deep) 55%,var(--brand-gold) 100%);border-color:transparent}
html[data-theme="ios"] .btn:hover{border-color:var(--brand-gold-deep);color:var(--brand-deep)}
html[data-theme="ios"] .btn:focus-visible{outline-color:var(--brand-gold)}
/* seg：選中＝墨綠底淺金字（iOS 篩選 pill）；容器沙金邊 */
html[data-theme="ios"] .seg{border-color:var(--line);background:var(--bg2);border-radius:var(--r-pill);padding:3px}
html[data-theme="ios"] .seg button{border-radius:var(--r-pill)}
html[data-theme="ios"] .seg button.on{background:var(--brand-deep);color:var(--gold-lite)}
/* tag／pill：金邊 capsule 淺金底（iOS 階段 pill） */
html[data-theme="ios"] .pill.neutral,html[data-theme="ios"] .ccy-tag:not(.st):not(.gap):not(.ok):not(.dm):not(.rider):not(.pro):not(.suspect){background:rgba(217,192,138,.12);color:var(--brand-gold-deep);border:.5px solid rgba(198,161,91,.55);border-radius:var(--r-pill)}
html[data-theme="ios"] .pinchk{border-radius:var(--r-pill)}
html[data-theme="ios"] .pinchk.on{background:var(--brand-deep);color:var(--gold-lite);border-color:var(--brand-deep)}
/* hero：三段漸變、金髮絲線、radius 20（PerfHeroCard） */
html[data-theme="ios"] .hero{background:linear-gradient(160deg,#24463B 0%,#183028 58%,#0F2019 100%);border-radius:20px;color:var(--side-ink);box-shadow:0 10px 24px rgba(15,32,25,.22)}
html[data-theme="ios"] .hero::before{content:"";position:absolute;left:0;right:0;top:0;height:1.5px;background:linear-gradient(90deg,transparent 0%,var(--brand-gold) 50%,transparent 100%);z-index:2}
html[data-theme="ios"] .hero::after{background:radial-gradient(circle,rgba(198,161,91,.18),transparent 68%)}
html[data-theme="ios"] .hero .hlabel{color:var(--brand-gold);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:var(--fs-2xs)}
html[data-theme="ios"] .hero .hsub{color:var(--side-ink2)}
html[data-theme="ios"] .hero h1,html[data-theme="ios"] .hero .hval{font-family:var(--serif);font-weight:600}
html[data-theme="ios"] .hero .hval.num,html[data-theme="ios"] .hero .num{font-family:var(--mono)}
/* 卡：象牙底、沙金邊、radius 16、輕陰影（.homeCard） */
html[data-theme="ios"] .card{border-radius:var(--r-lg);box-shadow:var(--shadow)}
html[data-theme="ios"] .kpi{border-radius:var(--r-lg)}
html[data-theme="ios"] .tbl thead th{background:var(--card2);color:var(--muted);letter-spacing:.04em}
html[data-theme="ios"] .tbl th.sorted{color:var(--brand-gold-deep)}
html[data-theme="ios"] .tbl tbody tr.link:hover td{background:rgba(217,192,138,.12)}
/* 標題 serif（姓名／大標／hero 數字），內文照 sans */
html[data-theme="ios"] h1,html[data-theme="ios"] .page-h1,html[data-theme="ios"] .th-top .title{font-family:var(--serif);font-weight:600;letter-spacing:.01em}
html[data-theme="ios"] .th-field input:focus{border-color:var(--brand-gold-deep);box-shadow:0 0 0 3px rgba(198,161,91,.22)}
html[data-theme="ios"] a{color:var(--brand-deep)}
/* 登入牆（th-auth）左欄 */
html[data-theme="ios"] .th-auth .side{background:linear-gradient(180deg,#24463B 0%,#183028 55%,#0F2019 100%);color:var(--side-ink)}
html[data-theme="ios"] .th-auth .side{border-right:0}
html[data-theme="ios"] .th-auth .side .brand b{font-family:var(--serif);color:var(--side-ink)}
html[data-theme="ios"] .th-auth .side .brand span,html[data-theme="ios"] .th-auth .side li,html[data-theme="ios"] .th-auth .side p,html[data-theme="ios"] .th-auth .side li s em{color:var(--side-ink2)}
html[data-theme="ios"] .th-auth .side h2{font-family:var(--serif);color:var(--side-ink)}
html[data-theme="ios"] .th-auth .side li b{color:var(--side-ink)}
html[data-theme="ios"] .th-auth .side li s,html[data-theme="ios"] .th-auth .side p.asof,html[data-theme="ios"] .th-auth .side .foot{color:rgba(201,194,176,.72)}
html[data-theme="ios"] .th-auth .side li::before{background:var(--brand-gold)}
html[data-theme="ios"] .th-form h1,html[data-theme="ios"] .th-form h2{font-family:var(--serif)}

/* ═══ 租戶皮：html[data-theme="p100"]（P100 英國保誠團隊，2026-09-21）═══
   設計規範 docs/p100/DESIGN.md。C 皇家紫做結構＋動作（走 --primary／--brand-green-deep 預設，唔使覆寫掣同連結）；
   橙做選中；紅只留喺 logo 同 hero 頂線。每條 selector 以 html[data-theme="p100"] 開頭，其他六隊零變化（閘 tools/tenant-theme.test.js）。 */
/* 質感：hero 唔用平色，用 deep→deeper 斜向漸變（135°），加頂線同橙光暈 —— 三樣都係「面」，唔加字唔加圖 */
html[data-theme="p100"] .hero,html[data-theme="p100"] .mpf-head.hero{background:linear-gradient(135deg,var(--brand-deep) 0%,var(--brand-deeper) 100%)}
/* hero 頂一條 logo 漸變線 —— 同漸變底一齊構成品牌嘅「裝飾」，一版一條 */
html[data-theme="p100"] .hero::before,html[data-theme="p100"] .mpf-head.hero::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#E70012 0%,#EB6714 45%,#F7AF27 100%);z-index:2}
html[data-theme="p100"] .mpf-head.hero{position:relative;overflow:hidden}
html[data-theme="p100"] .hero::after{background:radial-gradient(circle,rgba(247,175,39,.20),transparent 68%)}
/* 側欄選中項：黑底白字之外，左邊一條橙線（同 hero 線同一語言） */
html[data-theme="p100"] .th-side a.item.on{box-shadow:inset 3px 0 0 var(--brand-gold)}
/* 登入頁左欄要點：圓點跟品牌橙 */
html[data-theme="p100"] .th-auth .side li::before{background:var(--brand-gold)}
/* 主頁「今日事項」行嘅「去 ›」：橙（原本 brand-green 係綠，喺紫底上同品牌唔夾） */
html[data-theme="p100"] .home-hero .rows .go{color:var(--brand-gold)}
/* 側欄 logo：P100 係 2:1 橫向字標，塞落 36×36 得 18px 高睇唔清 —— 改 72×36（登入頁 56px 嗰個唔使改，本身夠大） */
html[data-theme="p100"] .th-side .brand img{width:72px;height:36px}
html[data-theme="p100"] .side-min .th-side .brand img{width:36px;height:36px}