/* Rare Education —— 共用樣式
   標題深藍 #132144 · 主色青綠 #21A4B1 · 星 #FFB400 · 劃線價 #999 · 邊框 #E2E8F0 · 容器 1200px

   ⚠️ 2026-08-31：logo 攞到手，喺 public/logo.png（黑字）同 logo-dark.png（淺字，深底用）。
      由 logo 數出嚟嘅品牌色係 **#45659E**（個 A 同底線）＋ #0E0E0E（RARE 個字）。
      **但用戶決定青綠唔改**，UI 押後傾 —— 所以而家個站係青綠、logo 係藍，
      呢個唔一致係有意嘅，唔好見到就自己去換。
      真係要換嗰日：改下面 --accent 三條（淺色 ＋ 兩份深色），
      再加 .s1/.s2/.s3、.s-h em、.t0–.t5、.crow.t0–t5 嗰啲寫死嘅漸變。 */

:root{
  /* 輪播圓點：視覺大細同撳得到嘅大細特登分開 —— 見 .c-dots */
  --dots-gap:clamp(12px,2vw,20px);--dots-dot:9px;--dots-tap:24px;
  --bg:#FFFFFF; --surface:#F6F8F9; --card:#FFFFFF; --border:#E2E8F0;
  --heading:#111111; --ink:#132144; --text:#666666; --muted:#999999;
  --accent:#21A4B1; --accent-dark:#177E89; --accent-soft:rgba(33,164,177,.10);
  --star:#FFB400; --ok:#15803D; --bad:#B91C1C;
  --shadow:0 1px 2px rgba(19,33,68,.05);
  --shadow-lift:0 8px 24px rgba(19,33,68,.10);
}
/* 2026-09-11：手機跟電話系統深色模式自動變黑，用戶要求全站淨用白色，
   移除 prefers-color-scheme 自動判斷。data-theme="dark" 呢個手動開關
   而家冇 UI 掣觸發，留低純粹俾將來要加返深色掣先用。 */
:root[data-theme="dark"]{
  --bg:#0E1418; --surface:#141C21; --card:#172128; --border:#26333B;
  --heading:#F2F6F7; --ink:#E8EEF1; --text:#A3B1B8; --muted:#78878F;
  --accent:#3DC4D2; --accent-dark:#2AA0AD; --accent-soft:rgba(61,196,210,.12);
  --star:#FFC130; --ok:#4ADE80; --bad:#F87171;
  --shadow:0 1px 2px rgba(0,0,0,.35);
  --shadow-lift:0 8px 24px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}

/* ⚠️ 呢一條唔准刪，`!important` 亦都唔准拆。2026-09-06 加，因為出咗街先發現。
 *
 * 個 `hidden` 屬性本身冇 CSS —— 佢係靠瀏覽器自己嗰份 UA stylesheet 入面
 * 一句 `[hidden]{display:none}`。而**任何一句我哋自己寫嘅 display 都贏佢**
 * （author 蓋過 UA，唔使睇 specificity）。所以 `.field{display:flex}` 一寫落去，
 * 全部 `<div class="field" hidden>` 就即刻收唔埋。
 *
 * 實際出過事：`/login` 個「稱呼」欄係註冊先要填嘅，HTML 有 `hidden`、
 * JS 亦都有 `el("namefield").hidden = !reg` —— 兩邊都啱，但個欄由頭到尾都
 * 喺登入版度企硬，人人都以為登入要填稱呼。**JS 同 HTML 都冇錯，錯喺 CSS。**
 *
 * 所以唔喺 `.field` 度補一句就算 —— 下次有人加多個 `display` 落第二個 class，
 * 同一個 bug 會喺另一版出現，而且一樣咁難察覺。 */
[hidden]{display:none!important}

a{color:var(--accent-dark)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- 頂欄 ---------- */
.demobar{background:#132144;color:#fff;font-size:13px;padding:9px 0;text-align:center}
.demobar b{font-weight:700}
/* ⚠️ .promo 之前完全冇 CSS —— 係一條貼死喺視窗左上角、冇置中冇留白嘅裸文字。
   跟 .wrap 同一組數（max-width 1200 + padding 20），唔好另開一套。 */
.promo{max-width:1200px;margin:0 auto;padding:8px 20px;font-size:13px;color:var(--muted);
  text-align:center;border-bottom:1px solid var(--border)}
.promo b{color:var(--ink);font-weight:700}
.nav{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--border)}
.nav-in{display:flex;align-items:center;gap:24px;height:64px}
/* 2026-09-03 接返真 logo。之前呢度係一個寫死「RE」嘅漸變方格 ——
   logo.png / logo-dark.png 8-31 就入咗庫，一直冇人接上去。
   ⚠️ 兩張圖都會載（共 78KB），用 CSS 揀那張——
      picture + prefers-color-scheme 搭唔到個站嘅 data-theme 手揀。
   ⚠️ width/height 一定要寫，唔寫頂欄會跳一下先定位。 */
.brand{display:flex;align-items:center;text-decoration:none}
.brand-logo{display:block;height:34px;width:auto}
.brand-logo.dark{display:none}
:root[data-theme="dark"] .brand-logo.lite{display:none}
:root[data-theme="dark"] .brand-logo.dark{display:block}
.nav-links{display:flex;gap:20px;margin-left:8px}
.nav-links a{color:var(--text);text-decoration:none;font-size:15px;white-space:nowrap}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--accent-dark)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
/* ⚠️ `.who` 2026-09-10 由 `<span>` 變咗 `<a href="/account">`。
   要自己寫返 `text-decoration:none` —— 上面第 91 行嗰句只管 `.nav-links a`，
   而佢喺 `.nav-right` 入面，接唔到，就會孤零零一條底線。 */
.nav-right .who{font-size:14px;color:var(--muted);text-decoration:none;white-space:nowrap}
.nav-right .who:hover,.nav-right .who[aria-current]{color:var(--accent-dark)}

/* ---------- 掣 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:6px;
  font-weight:700;text-decoration:none;border:1px solid transparent;cursor:pointer;
  font-family:inherit;transition:background .15s,color .15s,border-color .15s}
.btn-sm{padding:8px 16px;font-size:14px}
.btn-md{padding:12px 24px;font-size:16px}
.btn-fill{background:var(--accent);color:#fff}
.btn-fill:hover{background:var(--accent-dark)}
.btn-line{border-color:var(--border);color:var(--ink);background:var(--card)}
.btn-line:hover{border-color:var(--accent);color:var(--accent-dark)}
.btn-white{background:#fff;color:#132144}
.btn-white:hover{background:#EAF6F7}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.linkbtn{background:none;border:none;padding:0;font:inherit;color:var(--text);cursor:pointer}
.linkbtn:hover{color:var(--accent-dark)}

/* ---------- banner 輪播 ---------- */
.bannerzone{padding:24px 0 4px}
.carousel{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:1265/439;
  background:#132144;box-shadow:var(--shadow-lift)}
/* ⚠️ 個 padding-bottom 留返落面圓點行嗰條位（--dots-gap + --dots-tap）。
   2026-09-06 之前係 `padding:0 …`，即係內容置中之後可以一路落到圓點度 ——
   實測 360 / 375 / 768 三個闊度，頭兩粒圓點就係咁樣藏咗喺粒 CTA 白掣後面，
   望唔到亦都撳唔到。留咗位就唔使逐個 breakpoint 補。 */
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .55s ease;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(28px,6%,76px) calc(var(--dots-gap) + var(--dots-tap));color:#fff}
.slide.on{opacity:1;visibility:visible}
.slide::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(100deg,transparent 42%,#000 100%);
  mask-image:linear-gradient(100deg,transparent 42%,#000 100%)}
.slide>*{position:relative;z-index:1}
.s1{background:linear-gradient(105deg,#0E1B3D 0%,#123E52 52%,#21A4B1 100%)}
.s2{background:linear-gradient(105deg,#101820 0%,#1D3F49 55%,#3E8E9B 100%)}
.s3{background:linear-gradient(105deg,#0F3A42 0%,#177E89 48%,#5CC3CE 100%)}
.s4{background:linear-gradient(105deg,#141414 0%,#2A2A2E 46%,#4A4033 100%)}
.s4 .s-tag{background:rgba(255,180,0,.22);color:#FFD37A}
.s4 .s-h em{color:#FFC85C}
/* ⚠️ .slide 係直向 flex，align-items 預設 stretch —— 個掣唔寫 align-self 就會扯到成條打橫。
   .s-tag 本身有寫，個掣一路漏咗。 */
.slide .btn{align-self:flex-start}
.s-tag{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.1em;
  background:rgba(255,255,255,.16);padding:5px 11px;border-radius:4px;margin-bottom:16px}
.s-h{margin:0 0 12px;font-size:clamp(22px,3.1vw,40px);font-weight:900;line-height:1.24;
  letter-spacing:-.02em;text-wrap:balance;max-width:17em;text-shadow:0 2px 20px rgba(0,0,0,.28)}
.s-h em{font-style:normal;color:#8FE6EF}
.s-p{margin:0 0 clamp(14px,2.4vw,26px);font-size:clamp(13px,1.32vw,17px);line-height:1.65;
  color:rgba(255,255,255,.86);max-width:30em}
.c-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:40px;height:40px;
  border-radius:50%;border:none;cursor:pointer;background:rgba(255,255,255,.9);color:#132144;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.22);
  opacity:0;transition:opacity .2s}
.carousel:hover .c-arrow,.c-arrow:focus-visible{opacity:1}
.c-prev{left:16px}.c-next{right:16px}
.c-arrow svg{width:17px;height:17px}
/* 圓點：睇落係 9px，但撳得到嘅範圍係 24px。
   ⚠️ 兩個數要分開 —— 9px 嘅掣喺手機根本撳唔中（低過任何無障礙下限），
      但畫大粒圓點就會搶咗成張 banner 嘅視覺。所以個掣做 24px 透明，
      真圓點用 ::before 畫。 */
.c-dots{position:absolute;left:0;right:0;
  bottom:calc(var(--dots-gap) - (var(--dots-tap) - var(--dots-dot)) / 2);z-index:4;
  display:flex;justify-content:center;gap:2px}
.c-dots button{width:var(--dots-tap);height:var(--dots-tap);padding:0;border:none;
  cursor:pointer;background:none;display:flex;align-items:center;justify-content:center}
.c-dots button::before{content:"";display:block;
  width:var(--dots-dot);height:var(--dots-dot);border-radius:50%;
  background:rgba(255,255,255,.42);transition:background .2s,width .2s}
.c-dots button[aria-current="true"]::before{background:#fff;width:26px;border-radius:5px}

@media (max-width:760px){.carousel{aspect-ratio:4/3}.c-arrow{display:none}}

/* ⚠️ 窄過 900px 就唔再鎖死高度 —— 由**最高嗰張 slide** 撐起個 carousel。
 *
 *    點解要咁：`aspect-ratio` 係一個**寫死**嘅高度，內容高過佢就會由個盒
 *    滿瀉出去（絕對定位嘅仔唔會撐高阿爸）。768px（iPad 直度）就係咁 ——
 *    比例仲係 2.88，得 266px 高，但標題兩行 ＋ 三行字 ＋ 一粒掣裝唔落。
 *
 *    grid 疊位（全部 slide 放同一格）令個 carousel 高度 = 最高嗰張，
 *    fade 照樣行得到（唔使 display:none，所以過場冇斷）。 */
@media (max-width:900px){
  .carousel{aspect-ratio:auto;display:grid;min-height:clamp(300px,58vw,420px)}
  .slide{position:relative;inset:auto;grid-area:1/1}
}

/* ---------- 段落 ---------- */
h2.sec{color:var(--heading);font-size:24px;font-weight:700;line-height:1.3;margin:0 0 6px;
  padding-top:56px;letter-spacing:-.01em}
.sec-sub{margin:0 0 24px;font-size:15px;color:var(--muted)}

/* ---------- 課程卡 ---------- */
/* ⚠️ auto-fit 唔係 auto-fill。2026-09-03 改：四條線每條嘅啲兩個課，
   auto-fill 會保住第三條空欄 —— 四個 section 各剩一個 ~371px 嘅窩。
   auto-fit 會把空欄摺埋，兩張卡撝滿一行；有三張（內容製作線多咗張
   實體班卡）就自動變回三欄。 */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
/* 卡少過一行嗰陣唔准扯闊（2026-09-09）。
   ⚠️ `auto-fit` 會**收埋空嘅軌**，即係得一張卡就會扯到成行 1160px 闊 ——
      而封面圖真身得 704px，扯到 1160 就糊（同內頁 hero 同一個病）。
      `auto-fill` 保留住啲軌，張卡維持返正常闊度。
   ⚠️ 只落喺會出現「得一兩張」嘅格網（「我的課程」個「已購買」）。
      線頁嗰啲三四張填得滿一行，扯闊反而好睇，唔好一刀切改咗 .grid 本身。 */
.grid.grid-fill{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
/* 「查看更多」—— 一個系列超過 6 格嗰陣，首頁喺格網底下加一粒掣原地展開
   （2026-09-22；粒掣由 index.html 個 capSections() 插入）。
   ⚠️ 新名寫之前 grep 過全站：`.morebar` / `.btn-more` 一個都冇人用。
      用返現成嘅 `.btn btn-md btn-line` 做粒掣本身，所以呢度淨係管排位。
   ⚠️ 入口區（.entryzone）都有機會用到，所以唔准寫死底色／字色 ——
      `.btn-line` 自己用 --card / --ink，深色模式跟得返。 */
.morebar{display:flex;justify-content:center;margin-top:24px}
.ccard{background:var(--card);border:1px solid var(--border);border-radius:8px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow);text-decoration:none;
  transition:transform .18s,box-shadow .18s,border-color .18s}
.ccard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--accent)}
.thumb{aspect-ratio:348/182;position:relative;display:flex;align-items:flex-end;padding:14px}
.thumb .cap{color:#fff;font-size:13px;font-weight:700;letter-spacing:.04em;
  text-shadow:0 1px 6px rgba(0,0,0,.45)}
.t0{background:linear-gradient(135deg,#132144,#21A4B1)}
.t1{background:linear-gradient(135deg,#177E89,#4FC3CE)}
.t2{background:linear-gradient(135deg,#1E3A5F,#3E7C8C)}
.t3{background:linear-gradient(135deg,#0F2A33,#21A4B1)}
.t4{background:linear-gradient(135deg,#2B3A55,#6FA8B5)}
.t5{background:linear-gradient(135deg,#123A42,#8FCBD3)}
.badge{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.94);color:#132144;
  font-size:11px;font-weight:700;letter-spacing:.04em;padding:4px 8px;border-radius:4px}
.badge.free{background:#21A4B1;color:#fff}
.badge.have{background:#132144;color:#fff}
/* 網課未推出（2026-09-23）：「10 月 5 日推出」／「即將推出」 */
.badge.launch{background:#FFF4D6;color:#7A4E00}
/* 預購（2026-09-29 用戶要「大大隻字」）。⚠️ 全部 compound 喺 .badge.launch／.plab 入面，唔開裸 .pre */
.badge.launch .pre{font-size:14px;font-weight:900;letter-spacing:.06em}
.coursehead .chead-launch .pre,.pc-launch .pre{font-size:16px;font-weight:900;letter-spacing:.06em}
.pamt .pre-tag{display:inline-block;margin-right:8px;padding:3px 8px;border-radius:4px;vertical-align:2px;
  background:#FFF4D6;color:#7A4E00;font-size:15px;font-weight:900;letter-spacing:.06em;line-height:1.1}
:root[data-theme="dark"] .pamt .pre-tag{background:#3A2C0A;color:#FFC960}
/* 「已有 N 人購買」（2026-09-09）。⚠️ 靠右上 —— 左上係「已開通」／「試看」，
   左下係系列名，右下係時數。四個角唔可以撞（見《課程封面圖-規格》）。
   ⚠️ left:auto 要寫返：`.badge` 本身鎖死 left:12px，唔覆蓋就會兩個章疊埋。 */
.badge.buy{left:auto;right:12px;display:inline-flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.94);color:#132144}
.cbody{padding:16px;display:flex;flex-direction:column;gap:10px;flex:1}
.ctitle{margin:0;color:var(--ink);font-size:18px;font-weight:700;line-height:1.625;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cmeta{font-size:14px;color:var(--muted)}
.cfoot{margin-top:auto;padding-top:12px;border-top:1px solid var(--border);
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
/* ⚠️ 2026-09-29：`.dur` 唔准被壓窄。09-23 實體班卡左邊加咗「真人面授或 ZOOM」，
   `.plab` 變長，flex 預設會縮右邊，「3 小時」斷成兩行。
   而家右邊固定一行，左邊太長就由左邊自己換行（`.pcol` min-width:0 先縮得落）。 */
.pcol{display:flex;flex-direction:column;gap:2px;min-width:0}
.plab{font-size:12px;line-height:1.2;color:var(--text)}
.pamt{font-size:18px;font-weight:700;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.pamt.free{color:var(--accent-dark)}
.pamt.have{color:var(--ok)}
.dur{display:flex;align-items:center;gap:5px;font-size:14px;color:var(--text);
  font-variant-numeric:tabular-nums;flex:none;white-space:nowrap}
.dur svg{width:15px;height:15px;flex:none}

/* 實體班卡（首頁內容製作線第三格）。
   ⚠️ .onsite 一定要 compound 喺 .thumb 入面 —— 唔好開條裸嘅 .onsite。 */
.ccard-onsite{border-color:var(--accent)}
.thumb.onsite{background:linear-gradient(135deg,#132144,#0F7A6C)}
.ccard-onsite .dur{color:var(--accent-dark);font-weight:700}
/* 有封面圖嗰陣，班次狀態由 thumb 搬落卡身 —— 見 index.html onsiteCard() 抬頭。 */
.ccard-onsite .ostate{color:var(--accent-dark);font-weight:800}

/* ---------- 表單 ---------- */
.formbox{max-width:420px;margin:56px auto 80px;background:var(--card);border:1px solid var(--border);
  border-radius:10px;padding:28px;box-shadow:var(--shadow-lift)}
.formbox h1{margin:0 0 6px;color:var(--heading);font-size:24px;font-weight:900;letter-spacing:-.02em}
.formbox .lead{margin:0 0 22px;font-size:14px;color:var(--muted)}
.tabs{display:flex;gap:4px;margin-bottom:22px;background:var(--surface);padding:4px;border-radius:8px}
.tabs button{flex:1;padding:9px;border:none;border-radius:6px;background:none;cursor:pointer;
  font:inherit;font-size:14px;font-weight:700;color:var(--text)}
.tabs button[aria-selected="true"]{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:13px;font-weight:700;color:var(--ink)}
.field input{padding:11px 13px;border:1px solid var(--border);border-radius:6px;background:var(--bg);
  color:var(--ink);font:inherit;font-size:15px}
.field .hint{font-size:12px;color:var(--muted)}
.msg{margin:0 0 16px;padding:11px 13px;border-radius:6px;font-size:14px;line-height:1.6}
.msg.bad{background:rgba(185,28,28,.09);border:1px solid rgba(185,28,28,.3);color:var(--bad)}
.msg.ok{background:var(--accent-soft);border:1px solid var(--accent);color:var(--accent-dark)}

/* ---------- 播放頁 ---------- */
.player{aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;color:#9AA;font-size:14px;text-align:center;padding:24px}
/* 真係有片播嗰陣（2026-09-06 接咗 Bunny）。⚠️ 要拆走 `.player` 嗰個 padding ——
   唔拆嘅話條 iframe 四邊會留一圈黑邊，睇落似張圖擺歪咗。
   ⚠️ 個 `aspect-ratio` 由 `.player` 帶落嚟，唔好喺呢度再寫一次。 */
.player-live{padding:0;position:relative}
.player-live iframe{width:100%;height:100%;border:0;display:block}
/* 浮水印 —— 睇緊嗰個人自己個電郵，淡淡哋浮喺片上面。
   ⚠️ `pointer-events:none` 唔可以少：唔係就會食咗播放器嘅撳擊，
      個人撳暫停撳唔到，而佢唔會知係俾一層透明嘢擋住。
   ⚠️ `user-select:none` 令佢抄唔到 —— 唔係防人，係唔想有人拖選文字
      嗰陣整個藍色高光出嚟，睇落似個 bug。
   ⚠️ 位置由 JS 每 23 秒轉（見 player.html），所以呢度唔寫死 top/left。 */
.wmark{position:absolute;z-index:2;pointer-events:none;user-select:none;
  font-size:13px;font-weight:700;color:rgba(255,255,255,.34);
  text-shadow:0 1px 3px rgba(0,0,0,.55);letter-spacing:.02em;
  transition:top .8s ease,left .8s ease}
.paywall{background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:36px 28px;text-align:center;box-shadow:var(--shadow-lift)}
.paywall h2{margin:0 0 8px;color:var(--heading);font-size:22px;font-weight:900;letter-spacing:-.01em}
.paywall p{margin:0 auto 22px;max-width:30em;font-size:15px}
.paywall .cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.lesson-head{padding:36px 0 0}
.lesson-head h1{margin:0 0 8px;color:var(--heading);font-size:28px;font-weight:900;
  letter-spacing:-.02em;line-height:1.32;text-wrap:balance}
.lesson-head .crumb{font-size:14px;color:var(--muted);margin-bottom:10px}
.lesson-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--muted);margin-bottom:20px}

/* ---------- 首頁分流 ---------- */
.ask{padding:72px 0 8px;text-align:center}
.ask h1{margin:0 0 10px;color:var(--heading);font-size:clamp(26px,3.6vw,38px);
  font-weight:900;letter-spacing:-.025em;line-height:1.28;text-wrap:balance}
.ask p{margin:0 auto;max-width:32em;font-size:16px;color:var(--muted)}
.pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px;
  margin:40px 0 0}
.pickcard{display:flex;align-items:center;gap:16px;padding:22px 22px;text-decoration:none;
  background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);
  transition:transform .18s,box-shadow .18s,border-color .18s}
.pickcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--accent)}
.pickcard .em{font-size:30px;line-height:1;flex:none}
.pickcard .lab{color:var(--ink);font-size:19px;font-weight:700;letter-spacing:-.01em;flex:1}
.pickcard .go{color:var(--muted);font-size:18px;flex:none}
.pickcard:hover .go{color:var(--accent-dark)}
.askfoot{margin:38px 0 0;text-align:center;font-size:15px;color:var(--muted)}
.askfoot a{font-weight:700}

/* ---------- 課程橫列（線頁 · 我的課程） ---------- */
.crows{display:flex;flex-direction:column;gap:12px}
.crow{display:flex;align-items:center;gap:16px;padding:20px 22px;text-decoration:none;
  background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);
  border-left:4px solid var(--accent);
  transition:transform .18s,box-shadow .18s,border-color .18s}
.crow:hover{transform:translateX(3px);box-shadow:var(--shadow-lift)}
.crow-in{flex:1;min-width:0}
.crow h3{margin:0 0 7px;color:var(--ink);font-size:18px;font-weight:700;line-height:1.5;
  letter-spacing:-.01em}
.crow-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.crow-meta .dur{display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums}
.crow-meta .dur svg{width:13px;height:13px}
.crow-meta .try{background:var(--accent-soft);color:var(--accent-dark);font-weight:700;
  padding:3px 8px;border-radius:4px}
.crow-meta .price{margin-left:auto;font-size:15px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}
.crow-meta .own{margin-left:auto;font-size:13px;font-weight:700;color:var(--ok)}
.crow-go{color:var(--muted);font-size:19px;flex:none}
.crow:hover .crow-go{color:var(--accent-dark)}
.crow.t0{border-left-color:#21A4B1}.crow.t1{border-left-color:#177E89}
.crow.t2{border-left-color:#3E7C8C}.crow.t3{border-left-color:#132144}
.crow.t4{border-left-color:#6FA8B5}.crow.t5{border-left-color:#8FCBD3}

/* ---------- 線頁 ---------- */
.linehead{padding:56px 0 0}
/* ⚠️ `.linehead .em`（線頁個大 emoji）2026-09-04 拆咗 —— 用戶決定全站唔要 emoji。
   `lines.emoji` 呢條欄同後台個格冇刪，但而家全站冇一處出佢。 */
.linehead h1{margin:0 0 28px;color:var(--heading);font-size:clamp(24px,3.2vw,34px);
  font-weight:900;letter-spacing:-.025em;line-height:1.28}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;
  margin:0 0 34px;padding:22px;background:var(--surface);border:1px solid var(--border);
  border-radius:10px}
.fact .k{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--muted);
  margin-bottom:6px}
.fact .v{font-size:16px;color:var(--ink);font-weight:500;line-height:1.6}
.prereq{margin:16px 0 0;font-size:14px;color:var(--muted)}
.prereq a{font-weight:700}
.ctabar{margin:38px 0 0;padding:26px;background:var(--surface);border:1px solid var(--border);
  border-radius:10px;text-align:center}
.ctabar .sub{margin:12px 0 0;font-size:13px;color:var(--muted)}

/* ---------- 首頁底嘅入會區（2026-09-04）---------- */
/* 由一條 `.ctabar`（一粒掣 ＋ 一行細字）升做「眉題 → 標題 → 一句 → 賣點 → 掣」。
   骨架跟用戶指定嘅參考站，**字全部自己寫**（規範第一句：一個字都唔准抄）。
   ⚠️ 前綴 ju-，寫之前 grep 過全站冇 `.ju-` 同 `.joinup`。
   ⚠️ 底色用 --surface，唔用 --heading（--heading 喺深色模式係近白色）。 */
.joinup{margin:56px 0 0;padding:34px;background:var(--surface);
  border:1px solid var(--border);border-radius:12px}
.ju-kicker{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.1em;
  color:var(--accent-dark)}
.ju-h{margin:0 0 12px;color:var(--heading);font-size:clamp(21px,2.6vw,28px);
  font-weight:900;letter-spacing:-.02em;line-height:1.3;text-wrap:balance}
.ju-lead{margin:0 0 20px;max-width:46em;font-size:15px;line-height:1.75;color:var(--text)}
/* 賣點：闊就兩欄，窄就一欄。⚠️ minmax 用 min() —— 呢個盒有 34px padding，
   同 .entryzone 一樣嘅坑（見嗰段）。 */
.ju-list{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px 28px;
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.ju-list li{position:relative;padding-left:24px;font-size:15px;line-height:1.6;color:var(--ink)}
.ju-list li::before{content:"✓";position:absolute;left:0;top:0;
  color:var(--accent);font-weight:700}
.ju-note{margin:14px 0 0;font-size:13px;color:var(--muted)}
.ju-tail{margin:18px 0 0;text-align:center;font-size:13px;color:var(--muted)}
@media (max-width:640px){.joinup{padding:22px}}

/* ---------- 價目卡（plc- = plan cards） ----------
   `app.js` 個 `planCards()` 出，首頁底部同 /join 兩版共用。
   ⚠️ 前綴 plc-，寫之前 grep 過全站冇 `.plc`。app.css 好多短名已經有人用
      （.plan .tag .form .facts .grid 都係），撞咗會 DOM 啱但畫面爛。

   ⚠️ 2026-09-07：`.plc-want`（大字）由「你想解決咩」（只想解決一件事…）
      改成**直白嘅產品名**（單獨購買課程／會員／實體課／企業內訓），
      原本嗰句跌落 `.plc-what`（細字）做副題。用戶原話：「類似咁直白D」。
      ⚠️ 連 `index.html` 同 `join.html` 兩處標題一齊改咗 —— 本來嗰句
         「分級的依據不是購買數量，而是你想達成什麼」喺大字變成產品名之後
         就同版面打對台。改一半就會前言不對後語。
   ⚠️ 大字仍然喺個價上面（唔跟參考站嘅「價行先」）—— 呢一版係揀買法，
      唔係比價，人要先知每張卡係咩先睇得明個價。 */
.plc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:26px 0 0}
.plc{display:flex;flex-direction:column;gap:6px;padding:20px 18px;
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  text-decoration:none;color:inherit;box-shadow:var(--shadow);
  transition:border-color .15s,box-shadow .15s,transform .15s}
.plc:hover{border-color:var(--accent);box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.plc-want{margin:0;font-size:16px;font-weight:700;line-height:1.45;color:var(--ink)}
.plc-amt{margin:6px 0 0;font-size:28px;font-weight:900;letter-spacing:-.02em;
  line-height:1.1;color:var(--heading)}
.plc-amt small{font-size:13px;font-weight:500;color:var(--text);letter-spacing:0}
.plc-talk{font-size:20px}
.plc-what{margin:0;font-size:13px;font-weight:700;color:var(--muted)}
/* flex:1 把「撳入去睇咩」推到卡底 —— 四張卡啲字長短唔同，唔推嘅話
   四條 link 會喺四個唔同高度，成行卡即刻散。 */
.plc-note{margin:8px 0 0;flex:1;font-size:13px;line-height:1.65;color:var(--text)}
.plc-go{margin:14px 0 0;font-size:13px;font-weight:700;color:var(--accent-dark)}
.plc-go::after{content:" →"}

/* 主打嗰張。
   ⚠️ **唔准用「青綠底（--accent）＋ 白字」** —— 深色模式個 --accent 係 #3DC4D2，
      白字踩上去對比得 2.2:1，讀唔到。呢條規矩冇變。
   ⚠️ 2026-09-07 由「淺青綠底 ＋ 兩格邊框」改成**深藍實色**（#132144 ＋ 白字，
      對比約 15:1，兩個主題都讀得到）。改嘅原因唔係美觀：用戶攞咗 dotai.hk
      個價目版做參考，佢哋主推嗰張係實色 —— 一眼睇得出邊張想你揀，
      唔使讀完四張先知。同一件事 /join 個 `.buyc.best` 已經做咗，兩處要同一套色。
   ⚠️ 深藍 #132144 全站得一舊（footer、登入頁右欄、/join 年繳卡都係佢）。
      唔好開第二隻深色。 */
/* 指返當前呢一版嗰啲卡（/join 上面嘅「單獨購買」同「會員」）——
   出成 <div>，所以唔好扮撳得。 */
.plc.flat{box-shadow:none;cursor:default}
.plc.flat:hover{border-color:var(--border);box-shadow:none;transform:none}
.plc.best.flat:hover{border-color:#132144}

.plc.best{background:#132144;border-color:#132144;color:#C7D0E4}
.plc.best .plc-want{color:#fff}
.plc.best .plc-amt{color:#fff}
.plc.best .plc-amt small{color:#C7D0E4}
.plc.best .plc-what{color:#8FA3C8}
.plc.best .plc-note{color:#DCE4F2}
/* ⚠️ 「加入會員 →」喺深底要用 --accent（唔係 --accent-dark）——
   --accent-dark 係為淺底計嘅，落喺深藍度對比只有 2.9:1。 */
.plc.best .plc-go{color:var(--accent)}
.plc.best:hover{border-color:var(--accent)}

@media (max-width:1080px){.plc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.plc-grid{grid-template-columns:1fr}}

/* 卡下面嗰條 wide panel —— 收尾嗰下邀請。 */
.plc-wide{margin:18px 0 0;padding:24px;background:var(--card);
  border:1px solid var(--border);border-radius:12px;
  display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.plc-wide-main{flex:1;min-width:280px}
.plc-wide h3{margin:0 0 8px;font-size:19px;font-weight:900;color:var(--heading);
  letter-spacing:-.01em}
.plc-wide .ju-list{margin:0}
.plc-wide-act{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
@media (max-width:640px){.plc-wide{padding:20px;gap:18px}}
.cta2{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---------- 價目階梯（/join） ----------
   2026-09-06 剷走咗 .ladder / .lrow ——  /join 個階梯改咗用 .plc-* 嗰組價目卡
   （app.js 個 planCards()，首頁底部同呢一版共用）。
   ⚠️ 冇人用嘅 CSS 唔好留喺度：呢個檔已經俾人留過一次孤兒 CSS
      （.ccard 嗰組，見 app.js courseCard() 抬頭），下一手要花時間先分得出
      邊組先係行緊嗰組。要搵返舊嗰個橫行版就睇 git。 */
.picknext{margin:44px 0 0;padding:24px;border:1px dashed var(--border);border-radius:10px}
.picknext h2{margin:0 0 14px;color:var(--ink);font-size:17px;font-weight:700}
.picknext .row{display:flex;gap:10px;flex-wrap:wrap}
.picknext a{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:6px;
  border:1px solid var(--border);background:var(--card);color:var(--ink);
  text-decoration:none;font-size:14px;font-weight:500}
.picknext a:hover{border-color:var(--accent);color:var(--accent-dark)}

/* ---------- 首頁 · 入門班入口區 ---------- */
/* 2026-09-04：入門班唔再同三條線平排。
   點解：三條線（內容製作 · AI 營銷 · 一人公司）嘅 `prereq` 全部指住入門班入面
   同一個課 —— 即係唔論之後行邊條線，都建議先由呢度入。佢係**一道閘**，
   唔係第四個題目，所以版面上獨立一格、擺喺三條線上面。

   ⚠️ 底色用 --surface，**唔准用 --heading** —— --heading 喺深色模式係近白色，
      白卡疊白底就乜都睇唔到（2026-09-03 中過一次，月曆嗰粒掣）。
   ⚠️ 新 class 一律加前綴（ez-）—— app.css 好多短名（.t0 .s1 .k .v 都有人用），
      撞咗會 DOM 啱但畫面爛。呢兩個名寫之前 grep 過，全站冇。
   ⚠️ 入面用返 h2.sec，但要剷走佢個 padding-top:56px —— 嗰 56px 係俾段落之間
      留白用嘅，喺一個有 padding 嘅盒入面就變成一大截空白。 */
/* ⚠️ 2026-09-04 第三版：深藍漸變**拆咗**，改做「同頁面一樣嘅底 ＋ 一條幼框」。
   用戶原話：「呢個背景好似太深色 好搶眼」。第二版嗰條漸變（banner .s1 嗰條）
   本意係「同其他 section 唔同」，但實物出嚟成格深藍搶晒三條系列嘅注意力 ——
   入口區要嘅係「呢度係起點」，唔係「呢度最重要」。一條框已經圈得住。

   ⚠️ 底一變返淺色，第二版嗰三條白字覆寫就要一齊拆
      （`h2.sec` 個 color:#fff、`.sec-sub`、`.ez-note`）——
      唔拆就係白字疊白底。呢個坑 09-03 同 09-04 已經一人中過一次，
      兩次都係「改咗底冇改字」。**改底色嗰陣一定要一齊搵返所有寫死嘅字色。**
   ⚠️ 用 --bg ＋ --border，唔好寫死 #fff / #E2E8F0 ——
      深色模式兩個 token 自己會換，寫死就淨係淺色模式啱。
   ⚠️ `.sec-sub` 剷走覆寫之後跌返落基礎規則（第 139 行 color:var(--muted)），
      唔使喺呢度再寫一次。
   ⚠️ 入面啲 .ccard 本身有 `border:1px solid var(--border)`，
      所以白卡擺喺白底上面仍然分得出邊界，唔使另外加嘢。 */
.entryzone{margin-top:56px;padding:28px;border-radius:12px;
  border:1px solid var(--border);background:var(--bg)}
.entryzone h2.sec{padding-top:0;font-size:22px}
.ez-note{margin:24px 0 0;font-size:14px;color:var(--muted)}
/* ⚠️ 入口區多咗 2×20px padding ＋ 2×1px 邊框，所以佢入面嘅欄位窄過出面 28～42px。
   375px 手機實測：容器淨返 293px，但 .grid 個 `minmax(300px,1fr)` 硬要 300px ——
   張卡右邊爆出 7px，右邊留白由 20px 變 13px，左右唔對稱。
   `min(300px,100%)` 令 300px 呢個下限**唔會超過容器**；
   闊過 300px 嘅時候行為同以前一模一樣，所以電腦版一個 pixel 都冇郁（量過：82 / 457 / 832）。 */
.entryzone .grid{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
@media (max-width:640px){
  .entryzone{padding:20px}
}

/* ---------- 課程頁 ---------- */
.coursehead{padding:52px 0 0}
.coursehead .crumb{font-size:14px;color:var(--muted);margin-bottom:14px}
.coursehead h1{margin:0 0 10px;color:var(--heading);font-size:clamp(24px,3.4vw,36px);
  font-weight:900;letter-spacing:-.025em;line-height:1.3;text-wrap:balance;
  word-break:keep-all;overflow-wrap:anywhere}
.coursehead .oname{font-size:14px;color:var(--muted)}
/* 網課未推出（2026-09-23）：「將於 10 月 5 日推出」／「即將推出」。同課卡個 .badge.launch 同色 */
.coursehead .chead-launch{display:inline-block;margin:0 0 12px;padding:4px 10px;border-radius:4px;
  background:#FFF4D6;color:#7A4E00;font-size:13px;font-weight:700;letter-spacing:.04em}
.coursehead .chead-sub{max-width:44ch;text-wrap:balance;margin:0 0 12px;color:var(--text);
  font-size:clamp(16px,1.7vw,19px);font-weight:500;line-height:1.6}
.csum{max-width:62ch;margin:0;font-size:16px;line-height:1.85;color:var(--text)}

/* 事實條 —— 學習時數／單元／形式／期限。全部由資料計返，唔准寫死。 */
.factbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  margin:26px 0 0;background:var(--border);border:1px solid var(--border);border-radius:10px;
  overflow:hidden}
.fact-i{background:var(--card);padding:14px 16px}
.fact-i .fk{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--muted);
  margin-bottom:5px}
.fact-i .fv{font-size:15px;font-weight:700;color:var(--ink);line-height:1.5}

/* 內頁 banner（2026-09-09 加）—— 用返課程封面圖，冇圖就唔出成格。
   ⚠️ aspect-ratio 鎖 704/368：圖未到之前就已經佔咗位，唔會等圖到咗
      先「跳」一跳把落面成版推低（CLS）。
   ⚠️ 張圖真身 704px，呢個位闊 796px —— 放大 1.13 倍。唔准擺去成版闊
      （1160px ＝ 放大 1.65 倍），圖入面啲字會糊。 */
.chero{margin:26px 0 0;border:1px solid var(--border);border-radius:12px;
  overflow:hidden;background:var(--surface)}
.chero img{display:block;width:100%;height:auto;aspect-ratio:704/368;object-fit:cover}

/* 頁內導航 */
.jump{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;
  padding-bottom:14px;border-bottom:1px solid var(--border)}
.jump a{padding:7px 14px;border-radius:999px;border:1px solid var(--border);
  background:var(--card);color:var(--text);font-size:13.5px;font-weight:700;text-decoration:none}
.jump a:hover{border-color:var(--accent);color:var(--accent-dark)}

/* 關於課程／適合誰讀 */
.csec{margin:34px 0 0;scroll-margin-top:80px}
.csec > h2{margin:0 0 14px;color:var(--ink);font-size:19px;font-weight:900;letter-spacing:-.01em}
.feats{display:flex;flex-direction:column;gap:16px;margin:20px 0 0}
.feat{display:flex;gap:14px}
.feat .fn{width:26px;height:26px;border-radius:50%;background:var(--accent-soft);
  color:var(--accent-dark);display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:900;flex:none}
.feat h3{margin:2px 0 5px;color:var(--ink);font-size:16px;font-weight:700;line-height:1.5}
.feat p{margin:0;max-width:62ch;font-size:15px;line-height:1.8;color:var(--text)}
.wholist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.wholist li{display:flex;gap:11px;font-size:15.5px;line-height:1.7;color:var(--text)}
.wholist .dotb{width:6px;height:6px;border-radius:50%;background:var(--accent);
  flex:none;margin-top:10px}
.deliv{margin:34px 0 0;scroll-margin-top:80px;padding:24px;background:var(--surface);border:1px solid var(--border);
  border-radius:10px}
.deliv h2{margin:0 0 14px;color:var(--ink);font-size:17px;font-weight:700}
.deliv ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.deliv li{display:flex;gap:10px;font-size:16px;color:var(--text);line-height:1.6}
.deliv .tick{color:var(--accent);font-weight:700;flex:none}
.unitlist{margin:30px 0 0;scroll-margin-top:80px;border:1px solid var(--border);border-radius:10px;overflow:hidden;
  background:var(--card)}
.unitlist .uh{padding:14px 18px;background:var(--surface);border-bottom:1px solid var(--border);
  font-size:13px;font-weight:700;color:var(--heading);letter-spacing:.03em}
/* ⚠️ .unit 2026-08-31 由「淨一行」改成「一行標題 + 一段描述」。
   標題嗰行嘅 flex 搬咗落 .uhead —— .unit 本身而家係 block。 */
.unit{display:block;padding:14px 18px;text-decoration:none;
  border-bottom:1px solid var(--border);color:var(--text)}
.unit:last-child{border-bottom:none}
.unit .uhead{display:flex;align-items:center;gap:14px}
.unit .n{width:26px;height:26px;border-radius:50%;background:var(--surface);color:var(--muted);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none}
.unit .t{flex:1;color:var(--ink);font-size:15px;font-weight:700}
.unit .d{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
/* 描述縮入去對齊個標題（26px 圓點 + 14px gap） */
.unit .usum{margin:7px 0 0 40px;font-size:14px;line-height:1.75;color:var(--text)}
a.unit:hover{background:var(--accent-soft)}
a.unit .n{background:var(--accent);color:#fff}
.unit.lock .t{color:var(--muted)}
/* ── 播放清單（2026-09-09）─────────────────────────────────────
   ⚠️ 呢一段唔係裝飾。之前「已開通」同「未開通」兩種行，分別淨係
      個數字圈係咪 accent 色、同埋 hover 有冇底色 —— 手機根本冇 hover，
      即係實際上兩種行生得一樣；而個數字圈讀落係「第幾課」，唔係「撳我播」。
      用戶原話：「依家一眼睇 唔知係呢到播放」。所以右邊要有個一直都喺度嘅記號。
   ⚠️ 呢批名一律 `u-` 開頭 —— `.n` `.t` `.d` 呢種短名喺呢個檔已經有
      四個唔同 owner（.unit / .plan / .cal-cell / .cal-chip），再加短名遲早撞。 */
.unitlist .uh{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.unitlist .uh > span{flex:1}
/* 粒「繼續觀看」唔准撐開成行 —— 佢係標題行右邊嗰粒掣，唔係一條 banner。
   ⚠️ `letter-spacing` 要清零：`.uh` 個 .03em 係為咗嗰行細標題而設，
      跟落粒掣度就會變成一粒散開晒嘅字。 */
.resume{flex:none;letter-spacing:0}
.unit .u-play{width:26px;height:26px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;font-size:13px;font-weight:700}
.unit .u-play svg{width:14px;height:14px}
/* 睇完 —— 綠色剔。⚠️ 照樣撳得入去重看，所以整行仍然係一條 <a>，唔准變 div。 */
.unit .u-done{background:var(--ok)}
/* 未開通 —— 灰底鎖頭。⚠️ 唔用紅色：佢冇做錯嘢，只係未買。 */
.unit .u-lock{background:var(--surface);color:var(--muted)}
/* 睇到一半嗰條線。⚠️ 縮入去對齊標題（同 .usum 一樣 40px），唔好由行頭拉到行尾 ——
   拉通咗睇落係一條分隔線，唔係進度。 */
.u-bar{margin:9px 0 0 40px;height:3px;border-radius:2px;background:var(--border);overflow:hidden}
.u-bar i{display:block;height:100%;background:var(--accent)}
.previewbox{margin:26px 0 0}
.previewbox .lab{display:inline-flex;align-items:center;gap:7px;margin-bottom:10px;
  font-size:13px;font-weight:700;color:var(--accent-dark);background:var(--accent-soft);
  padding:5px 11px;border-radius:4px}

/* ---------- 會員頁 ---------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;
  margin:32px 0 0}
.plan{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:22px;
  box-shadow:var(--shadow)}
.plan.best{border-color:var(--accent);box-shadow:var(--shadow-lift)}
.plan .k{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.04em}
.plan .v{margin:8px 0 4px;font-size:32px;font-weight:900;color:var(--ink);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.plan .v small{font-size:15px;font-weight:500;color:var(--text);letter-spacing:0}
.plan .n{font-size:13px;color:var(--muted)}
.joinbox{margin:34px 0 0;padding:26px;background:var(--surface);border:1px solid var(--border);
  border-radius:10px}
.joinbox h2{margin:0 0 14px;color:var(--ink);font-size:17px;font-weight:700}
.joinbox ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.joinbox li{display:flex;gap:10px;font-size:16px;line-height:1.6}
.terms{margin:22px 0 12px;font-size:14px;color:var(--ink);font-weight:700;text-align:center}
.extras{margin:44px 0 0;padding-top:24px;border-top:1px solid var(--border);
  font-size:14px;color:var(--muted);display:flex;flex-direction:column;gap:9px}
.faq{margin:44px 0 0;scroll-margin-top:80px}
.faq h2{margin:0 0 14px;color:var(--heading);font-size:20px;font-weight:900;letter-spacing:-.01em}
.faq details{border:1px solid var(--border);border-radius:8px;margin-bottom:10px;
  background:var(--card)}
.faq summary{padding:14px 18px;cursor:pointer;font-size:15px;font-weight:700;color:var(--ink)}
.faq .a{padding:0 18px 16px;font-size:15px;line-height:1.7}

/* ---------- 工作坊 ---------- */
.livehead{padding:56px 0 0}
.livehead h1{margin:0 0 12px;color:var(--heading);font-size:clamp(24px,3.4vw,34px);
  font-weight:900;letter-spacing:-.025em}
.livefacts{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 26px}
.livefacts span{background:var(--surface);border:1px solid var(--border);border-radius:6px;
  padding:7px 12px;font-size:14px;color:var(--text)}
.demo{margin:0 0 30px;padding:22px;background:var(--surface);border:1px solid var(--border);
  border-radius:10px}
.demo h2{margin:0 0 12px;color:var(--ink);font-size:16px;font-weight:700}
.demo ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.demo li{display:flex;gap:10px;font-size:16px;line-height:1.6}

/* ---------- 雜項 ---------- */
.empty{padding:56px 20px;text-align:center;color:var(--muted);font-size:15px}
/* SSR 給爬蟲嘅落地內容。人眼唔應該見到 —— 唔係因為見不得人，
   係因為佢冇樣式，而且前台 JS 一拿到資料就會覆咗佢。
   ⚠️ `.js` 這個 class 由 src/shell.js 喺 <head> 度加 ——
      冇 JS 嘅人（同唔行 JS 嘅爬蟲）冇這個 class，照樣看得到成段。
   ⚠️ 唔好寫成無條件 display:none —— JS 挖咗就一片空白。 */
.js .seo-ssr{display:none}
.loading{padding:56px 20px;text-align:center;color:var(--muted);font-size:15px}
/* ── Footer（2026-09-06 重做）────────────────────────────
 *
 * ⚠️ 全部用 `ft-` 前綴。呢個檔已經有一堆短名（.tag .grid .head .n .t .h .bar
 *    都係），撞咗會 DOM 啱但畫面爛 —— 第 539 同 638 行嗰兩段就係前科。
 * ⚠️ 舊嗰兩條 `.foot-links` `.foot-co` 已經冇人用，刪咗。
 * ⚠️ 深藍底係寫死嘅 `#132144`，唔用 `var(--ink)` —— 深色模式之下
 *    `--ink` 會變淺色，個 footer 就會變白底白字。呢度要嘅係「一舊深藍」，
 *    唔係「文字色」。同 `.slide.has-img::before` 嗰句同一個道理。 */
footer{margin-top:80px;padding:54px 0 0;position:relative;overflow:hidden;
  background:#132144;color:#C7D0E4;font-size:14px}

/* 底嗰個大字。純裝飾，所以 aria-hidden ＋ pointer-events:none。 */
.ft-ghost{position:absolute;left:-8px;bottom:-42px;z-index:0;
  font-size:clamp(90px,13vw,170px);font-weight:900;letter-spacing:-.04em;line-height:1;
  color:rgba(255,255,255,.045);pointer-events:none;user-select:none}
footer .wrap{position:relative;z-index:1}

.ft-top{display:flex;justify-content:space-between;align-items:flex-end;gap:36px;
  padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.12)}
.ft-slogan{margin:0;font-size:clamp(22px,2.4vw,30px);font-weight:900;color:#fff;
  line-height:1.35;letter-spacing:-.01em}
.ft-slogan span{color:var(--accent)}
.ft-sub{margin:8px 0 0;font-size:14px;color:#9AA8C4}

.ft-sub-form{display:flex;gap:8px;flex:none}
.ft-sub-form input{width:230px;max-width:100%;padding:12px 14px;border-radius:8px;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);
  color:#fff;font:inherit;font-size:14px}
.ft-sub-form input::placeholder{color:#7C8AA8}
.ft-sub-form input:focus{outline:2px solid var(--accent);outline-offset:1px}
.ft-sub-form button{padding:12px 22px;border-radius:8px;border:0;background:var(--accent);
  color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}
.ft-sub-form button:disabled{opacity:.6;cursor:default}
/* Honeypot —— 望唔到嘅一格，人唔會填，簡單嘅 bot 會（見 functions/api/subscribe.js）。
   ⚠️ 唔可以用 display:none 或者 hidden —— 有啲 bot 就係專登跳過睇唔到嘅欄。
      要留喺 DOM 度、佢認得出係一格 input，但人望唔到、tab 唔到、讀屏器唔讀。
   ⚠️ .ft-sub-form 係 flex，所以一定要 position:absolute 抌出 flow 外面，
      唔係就會喺個訂閱框同粒掣中間撐開一忽空位。 */
.ft-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.ft-msg{margin:14px 0 0;font-size:14px}
.ft-msg.ok{color:#7FE3D4}
.ft-msg.bad{color:#FCA5A5}

.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding:38px 0 0}
.ft-name{margin:0 0 10px;font-size:19px;font-weight:900;color:#fff;letter-spacing:-.01em}
.ft-blurb{margin:0 0 18px;max-width:270px;font-size:14px;line-height:1.85;color:#9AA8C4}
.ft-wa{display:inline-block;background:var(--accent);color:#fff;font-size:14px;font-weight:700;
  padding:10px 18px;border-radius:999px;text-decoration:none}
.ft-wa:hover{background:var(--accent-dark)}
/* IG／FB（2026-09-09 加）。⚠️ 網址喺 company.js，未填就一個都唔出 ——
   同粒 WhatsApp 掣同一條規矩，唔好出一個撳落去去死路嘅 logo。
   ⚠️ 38 × 38 係最細嘅安全掂得到範圍；縮細個 SVG 唔好縮個掣。 */
.ft-social{display:flex;gap:10px;margin-top:16px}
.ft-social a{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:10px;color:#C7D3E8;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06)}
.ft-social a:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.ft-col h2{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.08em;color:#fff}
/* ⚠️ line-height 2.15 × 14px = 30px 高 —— 喺手機撳落去太細。
   加 padding 而唔係加 line-height：加 line-height 會把成個 footer 拉長，
   加 padding 淨係把**撳得到嘅範圍**做大，字距同排版一個字唔郁。 */
.ft-col a{display:block;font-size:14px;line-height:2.15;color:#9AA8C4;text-decoration:none}
.ft-col a:hover{color:#fff}
@media (max-width:760px){.ft-col a{padding:5px 0}}

.ft-btm{margin-top:40px;border-top:1px solid rgba(255,255,255,.12);padding:20px 0 40px}
.ft-legal{margin:0;font-size:12px;line-height:1.9;color:#7C8AA8}
.ft-legal a{color:#9AA8C4;text-decoration:none}

/* ⚠️ 手機：四欄迫成一欄嘅話個 footer 會長到誇張。
   品牌一行，三條 link 欄併成兩欄 —— 掃得快啲。 */
@media (max-width:860px){
  .ft-grid{grid-template-columns:1fr 1fr;gap:30px}
  .ft-brand{grid-column:1 / -1}
  .ft-top{flex-direction:column;align-items:stretch;gap:22px}
  .ft-sub-form{width:100%}
  .ft-sub-form input{flex:1;width:auto}
}

/* 只俾螢幕閱讀器睇嘅字。訂閱個框有 placeholder 但 placeholder 唔算 label。 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:760px){.nav-links{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- 圖位 ---------- */
/* 2026-09-03 加。點解要有：banner 同課程封面本身係漸變色，
   冇人知邊度可以放圖、放幾大。未有圖就出個框寫住尺寸，有圖（.has-img）自動唔見。

   ⚠️ 用真元素 <span class="slotmark"> 而唔用 ::after ——
      .slide::after 已經畀點陣圖案佔咗（見上面），加落去會蓋走佢。
   ⚠️ 尺寸文字由 HTML／JS 出，唔好寫死落 CSS —— 改尺寸唔想兩個檔一齊改。
   ⚠️ .slide>* 有 position:relative，所以要寫返 .slide>.slotmark 覆蓋佢，
      唔係個框會跟住 flex 排落內容度。 */
.slotmark{position:absolute;right:10px;bottom:10px;z-index:2;
  font-size:11px;font-weight:700;letter-spacing:.04em;line-height:1;
  padding:5px 8px;border-radius:5px;white-space:nowrap;pointer-events:none;
  background:rgba(0,0,0,.5);color:#fff;border:1px dashed rgba(255,255,255,.6)}
/* banner 個框搬上右上角 —— 右下角畀輪播嘅圓點佔咗，
   手機版（4:3，位更窄）會直頭壓住佢哋，撳唔到。 */
.slide>.slotmark{position:absolute;top:12px;right:12px;bottom:auto}
.has-img .slotmark{display:none}

/* 有圖：鋪滿唔變形。 */
.has-img{background-size:cover;background-position:center;background-repeat:no-repeat}
/* ⚠️ 上面壓一層紗係功能唔係裝飾 —— 白色標題直接擺喺相上面會睇唔到字。 */
.slide.has-img::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,rgba(9,17,38,.82),rgba(9,17,38,.35))}
/* ── banner：張圖自己有字（hero-baked）────────────────────
 *
 * ⚠️ **啲規矩唔喺呢度，喺 `src/hero.js` 個 `BAKED_CSS`**，由 server
 *    塞落首頁個 `<head>`。唔係擺錯地方 —— 2026-09-09 出咗街即刻中：
 *
 *      `public/_headers` 俾 `.css` 落 stale-while-revalidate=86400，
 *      即係回頭客最多食足一日舊 app.css；而個 `hero-baked` class
 *      係塞落 HTML（no-store，即刻到）。中間嗰段時間就係
 *      **class 有、規則冇** —— 張圖出到，但 HTML 嗰段字冇收埋，
 *      文字疊住張圖出兩次。用戶影咗相俾我睇先發現。
 *
 *    界線係「呢個 class 幾新」：`.has-img`（上面嗰幾條）2026-09-03
 *    就出咗街，全世界個 cache 都有，所以留喺呢度。
 *    `hero-baked` 全新，要同 class 一齊到。
 *
 *    第日出咗街夠耐（或者 app.css 加咗 hash 落檔名，見 `_headers`
 *    最尾嗰句），就搬返落嚟。 */

/* ⚠️ 張圖而家係一個真 <img>（2026-09-06，見 app.js 個 courseCard）。
   佢要鋪滿成個 .thumb 並且沉喺最底，上面嗰層紗同 .cap／.badge 疊返上去。
   `object-fit:cover` 頂返以前 `background-size:cover` 嗰個行為。 */
.thumb-img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;z-index:0}
.thumb.has-img::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.55))}
/* .cap 同 .badge 唔係定位元素，唔寫呢句就會沉喺上面嗰層紗下面 */
.thumb .cap{position:relative;z-index:2}
.thumb .badge{z-index:2}

/* ---------- 條款／私隱呢類長文頁 ---------- */
/* .doc 一定要喺 .wrap 後面 —— 兩個都係單一 class，同分數，靠次序贏。 */
.doc{max-width:760px;padding-top:42px;padding-bottom:56px}
.doc h1{margin:0 0 6px;font-size:30px;font-weight:900;letter-spacing:-.02em;color:var(--heading)}
.doc h2{margin:34px 0 10px;font-size:18px;font-weight:900;color:var(--ink)}
.doc p{margin:0 0 12px;font-size:15px;line-height:1.85}
.doc ul{margin:0 0 14px;padding-left:22px}
.doc li{margin:0 0 8px;font-size:15px;line-height:1.85}
.doc-date{margin:0 0 26px;font-size:14px;color:var(--muted)}
.doc-note{font-size:14px;color:var(--muted)}
.doc-warn{margin:0 0 24px;padding:12px 14px;border-radius:8px;
  background:#FFF4E5;border:1px solid #F0B429;color:#7A4B00;font-size:14px;font-weight:700}
/* /unsubscribe 嗰兩粒掣（確認 · 返首頁）。用 unsub- 前綴 ——
   app.css 好多短名已經有人用，撞咗會 DOM 啱但畫面爛。 */
.unsub-act{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0 28px}

/* ---------- 實體班 ---------- */
/* 2026-09-03 重排。跟返網課詳情頁嗰套（.coursehead .factbar .jump .csec
   .feats .wholist .deliv .faq 全部照用，唔另起爐灶）—— 之前實體課淨係用
   .pagetitle/.pagesub/.csec，望落似另一個網站。

   ⚠️ 新 class 一律 pc- 前綴（physical class）。app.css 好多短名已經有人用
      （.tag .form .facts .plan .grid 都係），撞咗會 DOM 啱但畫面爛。
   ⚠️ tag 嘅狀態一律用 t- 前綴 —— .ok 同 .plan 已經有人用（價目階梯五處）。 */
.pagetitle{margin:34px 0 6px;font-size:30px;font-weight:900;letter-spacing:-.02em;color:var(--heading)}
.pagesub{margin:0 0 26px;font-size:15px;color:var(--muted)}
.crumb{margin:28px 0 0;font-size:13px;color:var(--muted)}
.pill{margin-left:10px;padding:3px 9px;border-radius:99px;font-size:13px;font-weight:700;
  background:var(--accent);color:#fff;vertical-align:middle}
/* 會員折嗰粒（2026-09-22）—— 實體課列表個價後面。
   ⚠️ 特登**唔用** `.pill` 嗰隻實色：隔籬就係個價，兩粒實色撞埋
      就變咗兩個一樣重要嘅嘢。呢粒係補充，所以係淡底幼框。
   ⚠️ `color-mix` 唔用 —— 舊 Safari 唔識，會跌返冇底色。
      用 --surface 同 --accent 兩個 token，深色模式自己會換。
   ⚠️ 名 grep 過全站冇人用。 */
.pill-mem{margin-left:6px;padding:3px 9px;border-radius:99px;font-size:12px;font-weight:700;
  background:var(--surface);border:1px solid var(--accent);color:var(--accent);
  vertical-align:middle;white-space:nowrap}

/* 班次一行 */
.sesrow{display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--border)}
.sesrow:last-child{border-bottom:0}
.ses-when{font-size:15px}
.ses-where{grid-column:1;font-size:13px;color:var(--muted)}
/* ⚠️ 個 tag 一定要擺喺 .ses-act 入面。之前列表頁用咗 <div class="ses-tag">，
   而 app.css 冇呢條 rule —— 佢就跌咗落 grid 第三行，一個人霸住一行。 */
.ses-act{grid-column:2;grid-row:1/3;display:flex;gap:10px;align-items:center;justify-content:flex-end}
.tag{padding:3px 9px;border-radius:5px;font-size:12px;font-weight:700;white-space:nowrap}
.t-ok{background:#E6F6F7;color:#0F6B73}
.t-few{background:#FFF1E0;color:#8A4B00}
.t-full{background:var(--border);color:var(--muted)}
.t-plan{background:var(--border);color:var(--muted)}
.muted{color:var(--muted)}
.err{margin:10px 0;padding:10px 12px;border-radius:6px;background:#FDECEC;color:#8B1A1A;
  font-size:14px;font-weight:700}

/* 列表頁：一個課一張卡。之前係兩個課疊住一條長 list，掃落嚟分唔清邊行係邊個課。 */
.pc-card{margin:0 0 26px;border:1px solid var(--border);border-radius:12px;
  background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.pc-card-hd{padding:22px 24px 18px;border-bottom:1px solid var(--border);background:var(--surface)}
.pc-card-hd h2{margin:0;font-size:22px;font-weight:900;letter-spacing:-.01em;color:var(--heading)}
.pc-card-hd h2 a{color:inherit;text-decoration:none}
.pc-card-hd h2 a:hover{color:var(--accent-dark)}
.pc-card-sub{margin:8px 0 0;max-width:52ch;text-wrap:balance;font-size:15px;line-height:1.7;color:var(--text)}
.pc-card-meta{margin:12px 0 0;display:flex;flex-wrap:wrap;gap:6px 14px;
  font-size:13px;font-weight:700;color:var(--muted)}
.pc-card-body{padding:4px 24px 10px}
.pc-card-foot{padding:0 24px 20px}
/* 排唔到期嗰啲課（2026-09-04）。⚠️ 唔准出一個死路 —— 一句解釋 ＋ 一粒 WhatsApp 掣，
   個客撳得到，你嗰邊收到「有人想上呢班」。名前綴 pc- 跟返隔籬幾條，寫之前 grep 過冇撞。 */
.pc-nodate{padding:10px 0 6px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.pc-nodate p{margin:0;flex:1 1 22em;min-width:0;font-size:14px;color:var(--text)}

/* 詳情頁兩欄：左邊內容，右邊報名。⚠️ 320px 係鎖死嘅 —— 報名卡入面
   「09月05日（六）14:00」呢類字唔可以斷行，太窄會爆。 */
.pc-cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;
  align-items:start;margin:0 0 60px}
.pc-main{min-width:0}
/* ⚠️ margin-top:26 唔係美觀調整 —— 左欄第一件嘢（.chero / .jump）
      個個都係 margin:26px 0 0，右邊冇就會**貼死**喺 .factbar 條底線上面，
      兩個框黐埋，睇落似張卡彈咗上去。窄屏冧一欄之後要清返（見下面 900px）。 */
/* ⚠️ **2026-09-09：拆咗 `position:sticky`（本來 top:84px）。**
      加咗「相關課程」框之後量到：購買卡 400px ＋ 個框 439px ＝ 853px。
      sticky 元素一旦高過視窗，佢頂住 84px 之後**下半截永遠出唔到嚟** ——
      1280 × 800（好常見嘅手提電腦）就係咁：尾嗰兩行同埋底部粒掣睇唔到。
      即係「有幾多行」同「成條欄 sticky」係二揀一。揀咗保留行數，
      因為粒買掣本身喺版頂就見到，而且碌到最底仲有原本嗰條 CTA bar。
      要換返轉頭：加返 `position:sticky;top:84px`，同時把
      functions/api/courses/[slug].js 個 LIMIT 減到 3。 */
.pc-rail{margin-top:26px}
/* 卡頂嗰句話 —— 網課出「已有 N 人購買」，實體班出開班倒數。
   2026-09-09 用戶俾參考圖改成呢個樣（原話：「放係上面 突出D」）。
   一個殼兩邊共用，唔好各自開一套 —— 兩套一定有一日唔同樣。
   ⚠️ 冇料就連個殼都唔出（見 course-page.html 個 BUYERS_MIN 同 class-page.html
      個 rail()）—— 一個空藍框讀落似有嘢載入唔到。
   ⚠️ 個殼 18px 圓角、入面張卡 12px：入面細過外面先睇得出係「包住」，
      兩個一樣大就會兩條線黐埋，似畫錯咗。
   ⚠️ 個數字用白底藥丸（.pc-cd b）—— 淺藍底上面再落淺藍字就冇對比，
      「突出D」嗰下就係靠呢粒藥丸。 */
.pc-cdwrap{padding:8px;border-radius:18px;background:var(--accent-soft)}
.pc-cd{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:6px 9px;padding:9px 6px 13px;font-size:14px;font-weight:700;
  color:var(--accent-dark);text-align:center;line-height:1.4}
.pc-cd b{padding:4px 16px;border-radius:999px;background:var(--card);
  font-size:17px;font-weight:900;color:var(--accent-dark)}
/* 夠 200 人先出（app.js 個 BUYERS_HOT）。⚠️ 唔准落 color ——
   emoji 係彩色字形，落咗 color 喺部分平台會變返單色，個火就冇咗。 */
.pc-fire{font-size:17px;line-height:1}

/* 藥丸入面嗰幾隻字掃一下光（2026-09-09）。
 *
 * 做法：一條 90° 漸變 clip 落文字度，背景位置由 -100% 掃到 200%。
 *
 * ⚠️ **落喺 <i class="pc-sh"> 度，唔可以落喺 <b> 度。** <b> 自己畫緊
 *    白色藥丸個底，而 `background-clip:text` 係連底色一齊 clip ——
 *    落咗個藥丸就會冇咗底，剩返幾隻字浮喺淺藍度。
 *
 * ⚠️ **條漸變兩邊要實色。** 參考站嗰條兩邊係透明，即係嗰句字本身冇色，
 *    要另外疊一層實色字喺底先睇得到。少咗嗰層（或者 clip 唔支援）就變成
 *    「一句字大部分時間隱形」。我哋呢條由頭到尾都係 accent-dark，
 *    得中間一橛淺色掃過 —— 就算成個動畫死咗，句字一樣睇得清楚。
 *
 * ⚠️ 透明 fill 只准喺 @supports 入面落 —— 唔支援 background-clip:text
 *    嘅瀏覽器落咗就會得一片白。
 *
 * ⚠️ prefers-reduced-motion 要停。全站同一條規矩（首頁 banner 都係）——
 *    有人係會暈嘅，唔係喜好問題。
 */
.pc-sh{font-style:normal}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .pc-sh{
    background-image:linear-gradient(90deg,
      var(--accent-dark) 0%, var(--accent-dark) 42%,
      var(--accent) 50%,
      var(--accent-dark) 58%, var(--accent-dark) 100%);
    background-size:220% 100%;
    background-repeat:no-repeat;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
    animation:pc-shine 4.5s linear infinite;
  }
}
/* ⚠️ **0% → 100%，唔准掃出框外。**
   background-position 用百分比嗰陣，0% ＝ 靠晒左、100% ＝ 靠晒右，
   而條漸變本身闊 220% —— 即係喺 0–100% 之間，佢**永遠鋪滿成個文字框**。
   本來寫 -110% → 210%，兩頭都掃到條漸變完全離開個框，嗰一刻啲字冇背景
   可以 clip，而 text-fill 係 transparent —— 就變成隱形。
   2026-09-09 出咗街先發現：production 截圖影到「已有 ⬜ 購買」，
   中間個「218 人」唔見咗。頁面一 load 就係動畫起點，即係人人一入嚟就撞到。 */
@keyframes pc-shine{
  from{background-position:0% 50%}
  to{background-position:100% 50%}
}
@media (prefers-reduced-motion:reduce){
  .pc-sh{animation:none}
}
.pc-buy{border:1px solid var(--border);border-radius:12px;background:var(--card);
  box-shadow:var(--shadow-lift);overflow:hidden}
.pc-buy-top{padding:20px 20px 17px;border-bottom:1px solid var(--border)}
.pc-price{font-size:30px;font-weight:900;line-height:1.1;color:var(--heading)}
/* 劃線價（2026-09-22）。三個位出：課程頁大字（.pc-was）、首頁實體課卡（.pamt-was）、
   實體課列表個 pill（.pill-was）。
   ⚠️ 名一定要跟返各自嘅前綴 —— app.css 好多短名，`.was` 咁樣嘅名撞返轉頭
      會 DOM 啱但畫面爛。三個名開檔嗰陣都 grep 過，冇撞。
   ⚠️ 用 <s> 唔係 <span>：讀屏器會讀返「已刪除」，唔會當咗係現價。 */
.pc-was,.pamt-was,.pill-was{font-weight:600;color:var(--muted);text-decoration:line-through}
.pc-was{margin-left:9px;font-size:17px;line-height:1}
.pamt-was{margin-left:7px;font-size:13px}
.pill-was{margin-left:6px;font-size:11px}
.pc-price-sub{margin-top:5px;font-size:13px;color:var(--muted)}
.pc-launch{margin-top:8px;font-size:13px;font-weight:700;color:#7A4E00}
:root[data-theme="dark"] .pc-launch{color:#FFC960}
/* 會員折嗰句（2026-09-22）—— 班別頁報名卡個價下面。
   ⚠️ 新名 grep 過全站冇人用（同 .pc-was 開檔嗰陣一樣嘅規矩）。
   ⚠️ 用 --accent 唔好寫死綠色：深色模式個 token 自己會換。
   ⚠️ 唔好加底色做個 badge —— 佢上面就係個大字價錢，再加一嚿色
      就變咗兩樣嘢爭住做主角。一行字、一隻色，夠。 */
.pc-mem{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--accent)}
.pc-mem a{color:inherit;font-weight:700}
/* 報兩堂或以上嗰句（2026-09-24）—— 班別頁報名卡、會員嗰句下面。
   ⚠️ 名 grep 過全站冇人用（pc-offer · pc-offerbar）。
   ⚠️ 用 --text 唔用 --accent：上面會員嗰句已經係 accent，兩句同色就分唔出邊句係邊種折。 */
.pc-offer{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--text)}
/* 實體課列表頂嗰句（全版講一次，唔好每張卡抄）。淡底幼框，同 .pill-mem 一個語氣。 */
.pc-offerbar{margin:-10px 0 26px;padding:12px 16px;border:1px solid var(--accent);border-radius:10px;
  background:var(--surface);font-size:14px;line-height:1.7;color:var(--text)}
.pc-buy-body{padding:18px 20px 20px}
.pc-buy .btn{width:100%}
/* 兩粒 CTA 疊住：線上報名 ＋ WhatsApp 查詢。
   每粒兩行（大字動作 ＋ 細字講明付款／用途），跟參考站嘅寫法。
   ⚠️ .btn 本身冇 padding（由 .btn-sm／.btn-md 給）—— 呢度自己給。 */
.pc-cta{display:flex;flex-direction:column;gap:10px}
.pc-cta .btn{width:100%;padding:11px 14px;font-size:15px;text-align:center}
.pc-cta .btn small{display:block;margin-top:3px;font-size:11px;font-weight:400;opacity:.82}
.pc-next{margin:0 0 12px;font-size:13px;color:var(--muted);line-height:1.6}
.pc-next b{display:block;margin-bottom:2px;font-size:15px;font-weight:700;color:var(--ink)}
.pc-ticks{list-style:none;margin:16px 0 0;padding:0}
.pc-ticks li{display:flex;gap:8px;align-items:flex-start;margin:0 0 8px;
  font-size:13px;line-height:1.6;color:var(--text)}
.pc-ticks li:last-child{margin-bottom:0}
.pc-ticks .tk{flex:none;color:var(--accent-dark);font-weight:900}
.pc-more{display:block;margin:14px 0 0;font-size:13px}
.pc-none{padding:18px 20px;font-size:14px;line-height:1.7;color:var(--text)}

/* 購買卡下面嗰個「相關課程」框（2026-09-09 加）。
   點解要有：右欄係 sticky，張卡得四百幾 px 高，左欄成三千幾 px ——
   碌落去嗰陣右邊有成條空白柱一路跟住。
   ⚠️ **冇縮圖**（見 course-page.html 個 rec）—— 封面圖真身 704px，
      喺呢度得五六十 px，落載三個檔嚟縮成拇指大，又慢又糊。
   ⚠️ 前綴 pc- 跟返隔籬成家人；rec-i / rec-t / rec-m 寫之前 grep 過冇撞。 */
.pc-rec{margin-top:16px;border:1px solid var(--border);border-radius:14px;
  background:var(--card);padding:16px 14px 14px}
.pc-rec h2{margin:0 0 12px;font-size:15px;font-weight:900;color:var(--heading);
  text-align:center}
/* 一行＝縮圖 ＋ 標題 ＋ 箭咀。三欄鎖死，標題長極都唔會擠走張圖或者支箭。
   ⚠️ 每行自己一個框（唔用分隔線）—— 八行分隔線睇落似份清單，
      有框先似「一格一格撳得」，同參考圖一致。 */
.rec-i{display:grid;grid-template-columns:64px minmax(0,1fr) 10px;gap:10px;
  align-items:center;padding:7px 8px;margin:0 0 6px;border-radius:10px;
  border:1px solid var(--border);text-decoration:none;color:inherit}
.rec-i:last-of-type{margin-bottom:12px}
.rec-i:hover{background:var(--surface);border-color:var(--accent)}
.rec-i:hover .rec-t{color:var(--accent-dark)}
/* ⚠️ aspect-ratio 要同 tools/cover/出縮圖.py 個 192 × 100 對得返，
   唔係就會裁到。改邊一邊都要兩邊一齊改。 */
/* ⚠️ `height:auto` 一定要有。張 <img> 個 `height="100"` attribute 係
   presentational hint（等於 CSS height:100px）—— 淨係寫 width 同
   aspect-ratio 嘅話，個 hint 壓住個高度，張圖會變成 64 × 100 拉長咗。
   2026-09-09 量到 thH=100 先發現。 */
.rec-th{display:block;width:64px;height:auto;aspect-ratio:192/100;object-fit:cover;
  border-radius:6px;background:var(--surface)}
.rec-noth{border:1px solid var(--border)}
.rec-t{font-size:12.5px;font-weight:700;line-height:1.45;color:var(--ink)}
.rec-own{display:inline-block;margin-left:5px;padding:0 5px;border-radius:4px;
  background:var(--accent-soft);color:var(--accent-dark);font-size:10.5px;font-weight:700}
.rec-ar{font-size:17px;line-height:1;color:var(--muted);text-align:right}
/* 底部嗰粒掣 —— 撳完去邊要係一個真係列得晒課程嘅地方。 */
.rec-all{display:block;padding:9px 12px;border-radius:999px;text-align:center;
  background:var(--accent-soft);color:var(--accent-dark);
  font-size:13px;font-weight:700;text-decoration:none}
.rec-all:hover{background:var(--accent);color:#fff}

/* 報名表 */
.form{max-width:520px}
.form .field{display:block;margin:0 0 12px}
.form .field>span{display:block;margin:0 0 5px;font-size:13px;font-weight:700;color:var(--ink)}
.form input,.form select{width:100%;padding:10px 12px;font:inherit;font-size:15px;
  border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--ink)}
.refbox{margin:18px 0;padding:16px 18px;border:2px dashed var(--accent);border-radius:10px;
  text-align:center;background:var(--card)}
.ref-lbl{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--muted)}
.ref-no{margin:6px 0 4px;font-size:26px;font-weight:900;letter-spacing:.06em;color:var(--heading)}
.ref-hint{font-size:13px;color:var(--muted)}

@media (max-width:900px){
  /* ⚠️ order:-1 —— 冧成一欄之後，價錢同報名掣要留喺標題下面。
     跌咗落最底，人要碌成版先見到幾錢。 */
  .pc-cols{grid-template-columns:1fr;gap:26px}
  /* ⚠️ margin-top 要清返 —— 冧咗一欄之後行距由 grid gap 出，
     唔清就會喺事實條同報名卡中間開多 26px。 */
  .pc-rail{position:static;order:-1;margin-top:0}
}
@media (max-width:560px){
  .sesrow{grid-template-columns:1fr}
  .ses-act{grid-column:1;grid-row:auto;justify-content:flex-start;margin-top:6px}
  .pc-card-hd,.pc-card-body,.pc-card-foot{padding-left:16px;padding-right:16px}
}

/* ---------- 課程時間表 /calendar ---------- */
/* 2026-09-03 加。⚠️ 新 class 一律 cal- 前綴 —— app.css 好多短名已經有人用
   （.grid .head .n .t .h .bar 都係），撞咗會 DOM 啱但畫面爛。
   ⚠️ 例外：.tag／.btn 係照用返實體班嗰套，狀態字眼兩版要一致。 */

/* 一個課一隻色。⚠️ 揀色要「白字擺上去讀得到」——
   淺色底黑字喺月曆嗰啲細格會糊，所以四隻都係深色。
   深色模式要調淺，唔係深底疊深色。 */
:root{ --cal1:#132144; --cal2:#0F7A6C; --cal3:#8A4B00; --cal4:#4C3A8F; --calall:#111111 }
:root[data-theme="dark"]{
  --cal1:#4C6DBF; --cal2:#2FA893; --cal3:#C08334; --cal4:#8776D6; --calall:#41525E }

.cal-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;margin:0 0 18px}
.cal-nav{display:flex;align-items:center;gap:10px}
.cal-arrow{width:34px;height:34px;flex:none;border-radius:8px;cursor:pointer;
  border:1px solid var(--border);background:var(--card);color:var(--ink);
  font-size:20px;line-height:1;font-family:inherit}
.cal-arrow:hover:not([disabled]){border-color:var(--accent);color:var(--accent-dark)}
.cal-arrow[disabled]{opacity:.35;cursor:not-allowed}
.cal-ym b{display:block;font-size:19px;font-weight:900;color:var(--heading);letter-spacing:-.01em}
.cal-ym span{font-size:12px;color:var(--muted)}
.cal-views{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.cal-views button{padding:8px 16px;border:0;cursor:pointer;font-family:inherit;
  font-size:14px;font-weight:700;background:var(--card);color:var(--muted)}
.cal-views button.on{background:var(--accent);color:#fff}

/* 統計卡兼篩選掣 */
.cal-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:10px;margin:0 0 20px}
.cal-stat{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 16px;border-radius:10px;cursor:pointer;text-align:left;font-family:inherit;
  border:1px solid var(--border);background:var(--card)}
.cal-stat .k{font-size:14px;font-weight:700;color:var(--ink)}
.cal-stat .v{font-size:22px;font-weight:900;color:var(--heading);line-height:1}
.cal-stat:hover{border-color:var(--accent)}
.cal-stat.on{border-color:transparent;box-shadow:var(--shadow-lift)}
/* 「全部課程」揀中嘅底色要自己一個 token：
   ⚠️ 唔可以用 --ink（同 --cal1 一模一樣，看落像揀咗第一個課），
   ⚠️ 亦唔可以用 --heading（深色模式佢係近白色 —— 白字疊白底，
      2026-09-03 實試過，整粒揀看唔到）。 */
.cal-stat.all.on{background:var(--calall)}
.cal-stat.c1.on{background:var(--cal1)}
.cal-stat.c2.on{background:var(--cal2)}
.cal-stat.c3.on{background:var(--cal3)}
.cal-stat.c4.on{background:var(--cal4)}
.cal-stat.on .k,.cal-stat.on .v{color:#fff}

/* 月曆 */
.cal-grid{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--card)}
.cal-head{display:grid;grid-template-columns:repeat(7,1fr);background:var(--surface);
  border-bottom:1px solid var(--border)}
.cal-head div{padding:10px 0;text-align:center;font-size:12px;font-weight:700;
  letter-spacing:.14em;color:var(--muted)}
.cal-body{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border)}
.cal-cell{min-height:104px;padding:7px 7px 8px;background:var(--card)}
.cal-cell.empty{background:var(--surface)}
.cal-cell.past{background:var(--surface)}
.cal-cell.past .n{color:var(--border)}
.cal-cell .n{font-size:14px;font-weight:700;color:var(--muted);line-height:1;margin-bottom:6px}
.cal-cell.today .n{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;margin:-4px 0 4px -3px;border-radius:50%;
  background:var(--accent);color:#fff}

.cal-chip{display:block;margin:0 0 5px;padding:5px 7px;border-radius:6px;
  color:#fff;text-decoration:none;line-height:1.25}
.cal-chip:last-child{margin-bottom:0}
.cal-chip .t{display:block;font-size:12px;font-weight:700;
  /* ⚠️ 課名可以好長（AI 全自動剪片實戰班）—— 一格塞唔落就切兩行，唔好撐爆格 */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cal-chip .h{display:block;font-size:11px;font-weight:700;opacity:.85}
/* 上課地區（旺角／荃灣）。桌面同時間擺一行：「14:00 · 旺角」。
   手機格太窄，會喺點後面斷行，所以手機改做自己一行、收埋個點（見下面 @media）。
   ⚠️ 個點寫喺 HTML 唔寫 ::before —— app.css 有一日 stale-while-revalidate，
      舊 CSS 撞新 HTML 嗰陣，桌面照樣係「14:00 · 旺角」，唔會黐埋變「14:00旺角」。 */
.cal-chip:hover{filter:brightness(1.12)}
.cal-chip.off{opacity:.55}
.cal-chip.c1{background:var(--cal1)}
.cal-chip.c2{background:var(--cal2)}
.cal-chip.c3{background:var(--cal3)}
.cal-chip.c4{background:var(--cal4)}

/* 列表 */
.cal-list{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--card)}
.cal-day{display:grid;grid-template-columns:78px minmax(0,1fr);
  border-bottom:1px solid var(--border)}
.cal-day:last-child{border-bottom:0}
.cal-date{padding:16px 0 16px 18px;border-right:1px solid var(--border);background:var(--surface)}
.cal-date b{display:block;font-size:24px;font-weight:900;color:var(--heading);line-height:1.1}
.cal-date span{font-size:12px;color:var(--muted)}
.cal-items{padding:6px 0}
.cal-item{display:flex;align-items:center;gap:12px;padding:11px 18px 11px 14px}
.cal-item .bar{width:4px;align-self:stretch;border-radius:99px;flex:none}
.cal-item .bar.c1{background:var(--cal1)}
.cal-item .bar.c2{background:var(--cal2)}
.cal-item .bar.c3{background:var(--cal3)}
.cal-item .bar.c4{background:var(--cal4)}
.cal-it-main{min-width:0;flex:1}
.cal-it-name{display:block;font-size:15.5px;font-weight:700;color:var(--ink);text-decoration:none}
.cal-it-name:hover{color:var(--accent-dark)}
.cal-it-meta{margin-top:3px;font-size:13px;color:var(--muted)}
.cal-it-act{display:flex;align-items:center;gap:10px;flex:none}

.cal-note{margin:16px 0 40px;font-size:13px;line-height:1.8;color:var(--muted)}
.cal-note b{color:var(--ink)}

@media (max-width:700px){
  .cal-bar{gap:10px}
  .cal-views{margin-left:auto}
  .cal-stats{grid-template-columns:1fr 1fr}
  /* 月曆喺手機一格塞唔落個課名 —— 預設已經係列表，但有人撳返月曆都要企得住 */
  .cal-cell{min-height:74px;padding:5px 4px 6px}
  .cal-chip{padding:3px 4px}
  .cal-chip .t{font-size:10px;-webkit-line-clamp:2}
  .cal-chip .h{font-size:10px}
  .cal-chip .cal-pl{display:block}
  .cal-chip .cal-sep{display:none}
  .cal-day{grid-template-columns:62px minmax(0,1fr)}
  .cal-date{padding-left:12px}
  .cal-item{flex-wrap:wrap;padding-right:12px}
  .cal-it-act{width:100%;padding-left:16px}
}

/* ---------- 登入頁 · Google ---------- */
/* ⚠️ 寫之前 grep 過 app.css，`.orline` `.gbtn` 全站都冇 ——
   呢個檔好多短名（.t0 .s1 .k .v 都有人用），撞咗會 DOM 啱但畫面爛。 */
.orline{display:flex;align-items:center;gap:12px;margin:18px 0 14px;
  font-size:12px;color:var(--muted)}
.orline::before,.orline::after{content:"";flex:1;height:1px;background:var(--border)}
.gbtn{display:flex;align-items:center;justify-content:center;gap:9px}
/* 個 logo 喺深色模式唔使換 —— 四隻色本身就係 Google 指定嗰四隻，
   佢哋兩種底色都用同一份。 */
.gbtn svg{flex:none}

/* ── 「AI 資訊及攻略」（/ai · /ai/<slug>）2026-09-05 加 ─────────
 *
 * ⚠️ 全部用 `ar-` 前綴。呢個檔已經有一堆兩三個字母嘅短名
 *    （.tag .grid .head .n .t .h .bar 都係），撞咗會 DOM 啱但畫面爛 ——
 *    第 539 同 638 行嗰兩段就係前科。加新嘢一律加前綴。
 * ⚠️ 正文入面啲標籤（h2 h3 p ul li blockquote pre code img）
 *    由 `public/md.js` 出，冇 class 落到 —— 所以一律用 `.ar-body xxx`
 *    後代選擇器管住，唔准喺呢度改裸 h2/p，嗰啲係全站共用嘅。
 */
.ar-head{padding:56px 0 0}
.ar-head h1{margin:0 0 10px;color:var(--heading);font-size:clamp(26px,3.6vw,36px);
  font-weight:900;letter-spacing:-.02em;line-height:1.25}
.ar-meta{margin:0;font-size:14px;color:var(--muted)}
.ar-meta b{color:var(--accent-dark);font-weight:700}

/* 分類掣。撳親換一次 URL query，唔係前台自己篩 ——
   咁樣一條 /ai?tag=剪片 分享得出去，人哋撳返入嚟見到同一版。 */
.ar-tags{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 30px}
.ar-tag{padding:5px 13px;border:1px solid var(--border);border-radius:999px;
  background:var(--card);color:var(--muted);font-size:13px;font-weight:500;
  text-decoration:none;transition:border-color .15s,color .15s}
.ar-tag:hover{border-color:var(--accent);color:var(--accent-dark)}
.ar-tag[aria-current="true"]{background:var(--accent);border-color:var(--accent);color:#fff}

.ar-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:22px}
.ar-card{display:block;background:var(--card);border:1px solid var(--border);border-radius:8px;
  overflow:hidden;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s,border-color .15s}
.ar-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--accent)}
.ar-cover{aspect-ratio:348/182;background:var(--surface) center/cover no-repeat}
.ar-cbody{padding:18px 20px 20px}
.ar-ctitle{margin:0 0 8px;color:var(--heading);font-size:18px;font-weight:700;line-height:1.4}
.ar-csum{margin:0 0 12px;font-size:14px;line-height:1.7;color:var(--muted)}
.ar-cfoot{font-size:12px;color:var(--muted)}

/* 正文。⚠️ 讀嘢嘅寬度上限係 68 個中文字左右 —— 再闊眼睛跳行會跳失。 */
/* ⚠️ 用 --ink 唔用 --text。--text 係 #666，做卡片細字啱，
   但一篇兩千字嘅文用 #666 讀落好攰 —— 長文要夠實。 */
.ar-body{max-width:44rem;margin:30px 0 0;font-size:16.5px;line-height:1.95;color:var(--ink)}
.ar-body h2{margin:44px 0 14px;font-size:23px;font-weight:700;line-height:1.35;color:var(--heading)}
.ar-body h3{margin:32px 0 10px;font-size:18px;font-weight:700;line-height:1.4;color:var(--heading)}
.ar-body p{margin:0 0 20px}
.ar-body ul,.ar-body ol{margin:0 0 20px;padding-left:1.5em}
.ar-body li{margin:0 0 9px}
.ar-body a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}
.ar-body strong{font-weight:700;color:var(--heading)}
.ar-body img{display:block;max-width:100%;height:auto;margin:26px 0;border-radius:8px}
.ar-body hr{margin:36px 0;border:0;border-top:1px solid var(--border)}
.ar-body blockquote{margin:0 0 20px;padding:2px 0 2px 18px;
  border-left:3px solid var(--accent);color:var(--muted)}
.ar-body blockquote p:last-child{margin-bottom:0}
.ar-body code{padding:2px 6px;border-radius:4px;background:var(--surface);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}
/* ⚠️ code block 要自己捲，唔准由 body 橫向捲 —— 一條長指令就會拖到成版右移。 */
.ar-body pre{margin:0 0 22px;padding:16px 18px;border-radius:8px;overflow-x:auto;
  background:var(--surface);border:1px solid var(--border)}
.ar-body pre code{padding:0;background:none;font-size:13.5px;line-height:1.7}

/* ⚠️ 手機一律摺行，唔好要人打橫碌。
 *
 *    上面個 `overflow-x:auto` 喺桌面啱（一條長指令唔應該拆行），但喺手機
 *    就變成：375px 度，`<pre>` 可視闊度 333px 而內容 414px ——
 *    要側住碌先睇得晒。而 `/ai` 啲文章成篇嘅重點**就係嗰段 prompt**，
 *    偏偏就係佢要碌。（2026-09-06 巡檢實測嗰兩個數。）
 *
 * ⚠️ prompt 唔同 shell 指令：摺行唔會改變意思，所以摺得。
 *    `overflow-wrap:anywhere` 係為咗一條冇空格嘅長 URL／token 都摺得到。 */
@media (max-width:640px){
  .ar-body pre{white-space:pre-wrap;overflow-wrap:anywhere}
}

/* 「複製」掣 —— 篇文叫人照抄段 prompt，就唔應該要佢人手 select。
   ⚠️ 掣係 JS 加落去嘅（見 public/ai-page.html）；冇 JS 就冇掣，
      但段 prompt 照睇得到、照 select 得到。 */
.ar-body .prewrap{position:relative}
.ar-body .prewrap pre{margin:0}
.ar-body .precopy{position:absolute;top:8px;right:8px;z-index:1;
  font:600 12px/1 inherit;padding:7px 10px;min-height:30px;border-radius:6px;cursor:pointer;
  border:1px solid var(--border);background:var(--bg);color:var(--muted)}
.ar-body .precopy:hover{color:var(--accent-dark);border-color:var(--accent)}
.ar-body .precopy.done{color:var(--ok,#0a7d55);border-color:currentColor}
.ar-body .prewrap{margin:0 0 22px}

.ar-more{max-width:44rem;margin:52px 0 0;padding:24px 0 0;border-top:1px solid var(--border)}
.ar-more h2{margin:0 0 14px;font-size:18px;font-weight:700;color:var(--heading)}
.ar-more ul{margin:0;padding-left:1.3em}
.ar-more li{margin:0 0 8px;font-size:15px;line-height:1.7}

/* ---------- 後台：單元表摺埋 ---------- */
/* ⚠️ 個 summary 要睇落似粒掣，唔好淨係一個細三角 —— 後台一版十五個課，
   人要一眼睇得出邊度撳得開。 */
.lsn{border-top:1px solid var(--border)}
.lsn>summary{cursor:pointer;list-style:none;padding:11px 16px;
  font-size:13px;font-weight:700;color:var(--muted);user-select:none}
.lsn>summary::-webkit-details-marker{display:none}
.lsn>summary::before{content:"▸ ";display:inline-block;transition:transform .15s}
.lsn[open]>summary::before{content:"▾ "}
.lsn>summary:hover{color:var(--ink);background:var(--surface)}

/* ── 登入／註冊：滿版兩欄 ────────────────────────────────
 *
 * 2026-09-07 加。用戶攞咗 bunny.net 個登入頁做參考：左邊表單、右邊一舊深色。
 *
 * ⚠️ 呢一版**冇 nav**（`login.html` 冇叫 `mountNav()`），所以：
 *    · 頂欄嗰條「示範版本」bar 要嗰版自己收（見 `login.html` 抬頭）
 *    · footer 縮成一行 `.authlegal` —— 唔可以連法律連結一齊拆走，
 *      `app.js` 個 `mountFooter()` 抬頭寫住收單商審核要每一版搵得到
 *      服務條款同私隱政策。
 *
 * ⚠️ 深藍 `#132144` 同下面個大字**特登照抄 footer 嗰套**，唔開新色。
 *    呢個站得一舊深色，多開一隻就會有一日兩邊唔同步。
 *
 * ⚠️ 右邊嗰欄純裝飾，`aria-hidden` ＋ 手機直接唔出。裡面唔准放任何
 *    只喺嗰度出現嘅資訊 —— 手機用戶（多數）根本睇唔到。
 */
/* 左欄封頂 620px，其餘俾右欄。2026-09-07 用戶睇 2000px 闊個 mon 話「成版好空」——
   一半一半嗰陣左欄 1000px 得個 380px 表單浮喺中間。封頂之後同參考站一樣：
   表單欄係一條窄柱，深色嗰邊先係主體。1100px 以下返返一半一半，
   否則右欄窄過 480px 個標語會摺到三行。 */
.authsplit{display:grid;grid-template-columns:minmax(0,620px) 1fr;min-height:100vh;min-height:100dvh}
@media (max-width:1100px){.authsplit{grid-template-columns:1fr 1fr}}

.authform{display:flex;flex-direction:column;justify-content:center;
  padding:48px 24px;background:var(--bg)}
/* 表單本身唔好扯到成欄咁闊 —— 一行輸入框超過 30 個字闊就開始難讀。 */
/* ⚠️ 落面每一條覆寫 margin 嘅規則都要寫 `auto` 做左右值。
   用 `margin:0 0 6px` 呢種簡寫會**把 margin-left/right 重設做 0**，
   即刻蓋過呢句 auto —— 出嚟嘅樣係「輸入框置中，但標題同底部兩行貼晒左邊」。
   2026-09-07 中過：h1、lead、authswitch、authlegal 四處一齊歪。 */
.authform > *{width:100%;max-width:380px;margin-left:auto;margin-right:auto}
/* ⚠️ `.authform > *` 個 `margin-left/right:auto` 令佢同表單同一條 380px 直欄，
   所以「← 返回」會同 logo 左邊對齊，唔會飄去成欄最左。
   ⚠️ 唔准寫 `margin:0 0 10px` —— 簡寫會把左右 auto 重設做 0（呢一版中過兩次）。 */
.authback{display:block;margin:0 auto 14px;font-size:13px;color:var(--muted);
  text-decoration:none;width:100%;max-width:380px}
.authback:hover{color:var(--accent-dark)}
.authlogo{display:block;margin-bottom:28px}
.authlogo img{height:30px;width:auto;display:block}
.authform h1{margin:0 auto 6px;color:var(--heading);font-size:26px;font-weight:900;letter-spacing:-.02em}
.authform .lead{margin:0 auto 22px;font-size:14px;color:var(--muted)}

/* 「還沒有帳戶？註冊」—— 參考圖擺喺最底，唔用 tab。
   ⚠️ 兩句嘅 `hidden` 由 `paint()` 揸，唔好喺 CSS 度用 `:has()` 扮聰明：
      `:has()` 唔支援嗰陣兩句會一齊出，睇落似壞咗。 */
.authswitch{margin:22px auto 0;text-align:center;font-size:14px;color:var(--muted)}
.authswitch button{border:none;background:none;padding:0;font:inherit;font-weight:700;
  color:var(--accent-dark);cursor:pointer;text-decoration:underline}
.authswitch button:hover{color:var(--accent)}

.authlegal{margin:32px auto 0;text-align:center;font-size:12px;color:var(--muted);line-height:1.9}
.authlegal a{color:var(--muted)}

/* 右邊嗰舊深色。⚠️ `overflow:hidden` 唔可以少 —— 個大字特登爆出邊界。 */
.authside{position:relative;overflow:hidden;display:flex;flex-direction:column;
  justify-content:center;padding:56px 48px;background:#132144;color:#C7D0E4}
/* 個大字 2026-09-07 由左下角搬去正中央、放大。用戶話貼住左下角「好怪」——
   footer 嗰個貼角係因為 footer 得 200px 高，成個字出唔晒先似水印；
   呢欄成個 viewport 高，貼角就變咗一截字露出嚟。置中先係水印。 */
.authghost{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:0;
  font-size:clamp(160px,24vw,400px);font-weight:900;letter-spacing:-.04em;line-height:1;
  color:rgba(255,255,255,.05);pointer-events:none;user-select:none}
.authcopy{position:relative;z-index:1;max-width:24em;margin:0 auto;text-align:center}
.authtag{margin:0 0 14px;color:#fff;font-size:clamp(30px,2.6vw,40px);font-weight:900;letter-spacing:-.02em;line-height:1.35}
.authtag span{color:var(--accent)}
.authsub{margin:0;font-size:16px;line-height:1.9;color:#C7D0E4}

/* ⚠️ 手機：右邊嗰欄直接唔出，唔係壓落底 —— 壓落底就要人碌過一舊
   純裝飾嘢先見到表單。表單係佢入嚟做嘅事，要喺第一屏。 */
@media (max-width:820px){
  .authsplit{grid-template-columns:1fr;min-height:0}
  .authside{display:none}
  .authform{padding:32px 20px 48px}
}

/* 買法三張卡（/join）。2026-09-07 加，取代咗本來嘅月／年 radio。
 * 用戶指定參考 dotai.hk 個價目版 —— 跟結構，字自己寫。
 *
 * ⚠️ 主推嗰張（`.best`）用**實色**，唔係靠一條邊框。參考站教到嘅就係呢樣：
 *    三張卡入面邊張係我哋想你揀，要一眼睇得出，唔使讀完三張先知。
 * ⚠️ `.buyc` 用 flex column ＋ `margin-top:auto` 頂粒掣落底 ——
 *    三張卡文字長短唔一，唔咁做啲掣就會高低唔齊。
 * ⚠️ 深色實色卡入面唔准用 `var(--muted)` 呢類淺色 token：
 *    嗰啲 token 係為淺底計嘅，落喺深藍底就會讀唔到。
 * ⚠️ 個邊框 token 叫 `--border`，**唔係 `--line`** —— 呢度第一版就寫錯咗，
 *    畫面出嚟係頭兩張卡完全冇邊（唔存在嘅 var 唔會報錯，靜靜哋跌返 initial），
 *    而深色嗰張因為有底色，睇落一切正常。全份 token 表喺呢個檔頂。
 */
/* ⚠️ 2026-09-22：由 repeat(3,1fr) 改做 auto-fit —— 卡數而家會變。
   年費熄得（`member_year_cents = 0`，見 public/plans.js），熄咗 /join 剩兩張、
   /membership 剩一張。寫死三欄就會吉咗一格，睇落似有嘢載唔到。
   ⚠️ 淨得一張嗰陣唔好俾佢撐到成行闊 —— 一張成 900px 嘅價錢卡好核突。 */
.buygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:16px;margin:0 0 14px;align-items:stretch}
.buygrid:has(> .buyc:only-child){grid-template-columns:minmax(0,360px)}
.buyc{position:relative;display:flex;flex-direction:column;padding:22px 20px 20px;
  border:1px solid var(--border);border-radius:12px;background:var(--card);text-align:left;
  box-shadow:var(--shadow)}
.buyc-t{margin:0 0 6px;font-size:13px;font-weight:700;color:var(--muted)}
.buyc-a{margin:0 0 4px;font-size:30px;font-weight:900;letter-spacing:-.02em;
  color:var(--heading);line-height:1.15}
.buyc-a small{font-size:14px;font-weight:700;letter-spacing:0}
.buyc-s{margin:0 0 14px;font-size:13px;color:var(--muted);line-height:1.6}
.buyc-l{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:7px}
.buyc-l li{position:relative;padding-left:18px;font-size:13px;line-height:1.65;color:var(--text)}
.buyc-l li::before{content:"·";position:absolute;left:6px;font-weight:900;color:var(--accent)}
.buyc .btn{margin-top:auto;width:100%;text-align:center}

/* 主推：年繳 */
.buyc.best{background:#132144;border-color:#132144;color:#C7D0E4}
.buyc.best .buyc-t{color:#8FA3C8}
.buyc.best .buyc-a{color:#fff}
.buyc.best .buyc-s{color:#C7D0E4}
.buyc.best .buyc-l li{color:#DCE4F2}
.buyc.best .buyc-l li::before{color:var(--accent)}
.buyc-pill{position:absolute;top:-10px;right:16px;padding:3px 10px;border-radius:999px;
  background:var(--accent);color:#fff;font-size:11px;font-weight:800;letter-spacing:.04em}

.buynote{margin:0;text-align:center;font-size:13px;color:var(--muted)}

/* ⚠️ 三欄擠埋一齊之前就要斷 —— 一張卡窄過 ~260px，個價同副題就會摺行。 */
@media (max-width:860px){
  .buygrid{grid-template-columns:1fr;gap:14px}
  .buyc-pill{top:-9px}
}

/* ---------- 會員介紹頁（/membership）2026-09-10 ----------
   ⚠️ 全部用 `mb-` 前綴，寫之前 grep 過全站冇 `.mb`。
      價錢卡同 FAQ 用返現成嘅 `.buyc` `.faq`，唔另外砌一套。
   ⚠️ 開頭嗰格用深藍 #132144 —— 同 `.buyc.best` 係同一舊（全站唯一深色），
      唔好開第二隻。入面啲字用固定淺色，唔用 token（token 係為淺底計嘅）。 */
[id^="mb-"]{scroll-margin-top:80px}
.mb-hero{margin:28px 0 0;padding:52px 44px;border-radius:14px;background:#132144;color:#C7D0E4}
.mb-kicker{margin:0 0 12px;font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--accent)}
.mb-h1{margin:0 0 14px;color:#fff;font-size:clamp(28px,4.4vw,44px);font-weight:900;
  letter-spacing:-.025em;line-height:1.2;text-wrap:balance}
/* 每舊唔准喺中間斷 —— 窄機斷喺逗號後，唔會斷成「全／部課程」。 */
.mb-h1 span{display:inline-block}
.mb-lead{margin:0 0 26px;max-width:40em;font-size:16px;line-height:1.8;color:#DCE4F2}
.mb-act{display:flex;gap:10px;flex-wrap:wrap}
.mb-facts{display:flex;gap:8px;flex-wrap:wrap;margin:28px 0 0}
.mb-facts span{padding:6px 12px;border:1px solid rgba(255,255,255,.2);border-radius:999px;
  font-size:13px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
@media (max-width:640px){.mb-hero{padding:34px 22px}}

.mb-sec{margin:64px 0 0}
.mb-h2{margin:0 0 10px;color:var(--heading);font-size:clamp(21px,2.6vw,28px);font-weight:900;
  letter-spacing:-.02em;line-height:1.3;text-wrap:balance}
.mb-sub{margin:0 0 24px;max-width:46em;font-size:15px;line-height:1.75;color:var(--text)}
.mb-center{text-align:center}
.mb-center .mb-sub{margin-left:auto;margin-right:auto}

/* 2026-09-24 由四格變六格（加 Zoom／分享會、實體課折），所以四欄改三欄：三 × 兩行，唔會剩孤仔。 */
.mb-perks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mb-perk{padding:22px 20px;background:var(--card);border:1px solid var(--border);
  border-radius:12px;box-shadow:var(--shadow)}
.mb-ico{display:block;margin:0 0 14px;font-size:28px;line-height:1}
.mb-perk h3{margin:0 0 8px;font-size:17px;font-weight:800;color:var(--ink)}
.mb-perk p{margin:0;font-size:14px;line-height:1.75;color:var(--text)}
@media (max-width:1080px){.mb-perks{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.mb-perks{grid-template-columns:1fr}}

/* 課程清單。⚠️ `ul` 要 flex:1 —— 四條系列課程數唔同（3 至 5 個），
   唔推嘅話「看這個系列 →」會喺四個唔同高度。 */
.mb-lines{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.mb-line{display:flex;flex-direction:column;padding:22px 22px 18px;background:var(--card);
  border:1px solid var(--border);border-radius:12px}
.mb-line h3{display:flex;gap:8px;align-items:center;margin:0 0 6px;font-size:17px;
  font-weight:800;color:var(--ink)}
.mb-out{margin:0 0 12px;font-size:13px;line-height:1.7;color:var(--muted)}
.mb-line ul{flex:1;list-style:none;margin:0 0 14px;padding:0}
.mb-line li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-top:1px solid var(--border);font-size:14px}
.mb-line li a{color:var(--ink);text-decoration:none;font-weight:500}
.mb-line li a:hover{color:var(--accent-dark)}
.mb-line li span{flex:none;color:var(--muted);font-variant-numeric:tabular-nums}
.mb-more{font-size:13px;font-weight:700;color:var(--accent-dark);text-decoration:none}
.mb-more::after{content:" →"}
@media (max-width:760px){.mb-lines{grid-template-columns:1fr}}

/* 比較表。⚠️ 一定要包住 `.mb-cmpwrap`（overflow-x）—— 三欄喺手機夾唔落，
   冇佢就變成成版打橫碌。同 `.ac-scroll` 同一條理由。 */
.mb-cmpwrap{overflow-x:auto;border:1px solid var(--border);border-radius:12px;background:var(--card)}
.mb-cmp{width:100%;min-width:460px;border-collapse:collapse;font-size:15px}
.mb-cmp th,.mb-cmp td{padding:14px 18px;text-align:left;border-top:1px solid var(--border)}
.mb-cmp thead th{border-top:0;font-size:13px;font-weight:700;color:var(--muted);background:var(--surface)}
.mb-cmp thead small{display:block;font-size:12px;font-weight:500}
.mb-cmp tbody th{font-weight:700;color:var(--ink)}
.mb-cmp td{color:var(--text);font-variant-numeric:tabular-nums}
.mb-cmp td.mb-win{color:var(--accent-dark);font-weight:800;background:var(--accent-soft)}
.mb-tail{margin:14px 0 0;font-size:14px;line-height:1.7;color:var(--text)}

.mb-buy{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:760px;
  margin:0 auto 14px;text-align:left}
@media (max-width:640px){.mb-buy{grid-template-columns:1fr}}
.mb-alt{max-width:760px;margin:22px auto 0;padding:20px 22px;display:flex;gap:18px;
  align-items:center;justify-content:space-between;flex-wrap:wrap;text-align:left;
  background:var(--surface);border:1px solid var(--border);border-radius:12px}
.mb-alt p{flex:1;min-width:240px;margin:0;font-size:14px;line-height:1.7;color:var(--text)}
.mb-alt b{display:block;font-size:15px;color:var(--ink)}

.mb-end{margin:64px 0 72px;padding:40px 28px;text-align:center;background:var(--surface);
  border:1px solid var(--border);border-radius:14px}
.mb-end p{margin:0 auto 22px;max-width:36em;font-size:15px;line-height:1.75;color:var(--text)}
.mb-end .mb-act{justify-content:center}

/* ---------- 帳戶設定版（/account）2026-09-10 ---------- */
/* ⚠️ 全部用 `ac-` 前綴，一個裸名都唔加。
      呢個檔好多短名本身就係全站共用嘅（`.field` `.form` `.msg` `.hint`
      `.row` `.tag`）—— 為咗呢一版加個 `.row` 落去，就會靜靜哋改到
      報名表同課程卡：DOM 望落完全正常，畫面爛咗。落新名之前 grep 一次。 */

/* ⚠️ 封頂 720px。呢版嘅內容係一行行嘅設定，唔係卡陣 ——
   跟住 `.wrap` 扯到 1160px 闊嘅話，「登入電郵」同個電郵之間
   會隔住成尺空白，眼要行一段路先駁得返。 */
.ac-sec{max-width:720px;margin:0 0 22px;padding:22px 24px;background:var(--card);
  border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow)}
.ac-sec h2{margin:0;font-size:19px;font-weight:800;color:var(--heading);letter-spacing:-.01em}
/* 標題之後第一嚿嘢一律隔 14px —— 有冇副題都一樣，唔使兩套 margin。 */
.ac-sec>h2+*{margin-top:14px}
.ac-sub{margin:0 0 14px;font-size:13px;color:var(--muted)}
.ac-h3{margin:0 0 10px;font-size:15px;font-weight:800;color:var(--ink)}
.ac-big{margin:0 0 6px;font-size:22px;font-weight:900;color:var(--heading);letter-spacing:-.02em}
.ac-note{margin:0 0 4px;font-size:13px;line-height:1.7;color:var(--text)}
.ac-note a{color:var(--accent-dark)}
.ac-hr{margin:20px 0;border:0;border-top:1px solid var(--border)}
.ac-act{margin:14px 0 6px}

/* 一行「標籤：值」。
   ⚠️ 條間線用 `.ac-row+.ac-row`，唔用 `:first-of-type` ——
      `:first-of-type` 數嘅係「同類元素」（div），而同一格入面
      仲有 `.ac-act` 都係 div，加多一粒掣就會令條線跳咗去第二行。 */
.ac-row{display:flex;gap:14px;padding:9px 0;font-size:14px}
.ac-row+.ac-row{border-top:1px solid var(--border)}
.ac-lab{flex:0 0 108px;color:var(--muted)}
.ac-val{flex:1;min-width:0;color:var(--ink);word-break:break-word}

/* 付款紀錄。
   ⚠️ 張表一定要包住 `.ac-scroll`。三欄喺手機上夾唔落，冇佢就變成
      **成版**打橫碌 —— 打橫碌成版係最難用嗰種爛法，而且一碌走咗
      左邊條 nav 都唔見埋。 */
.ac-scroll{overflow-x:auto}
.ac-tbl{width:100%;border-collapse:collapse;font-size:14px}
.ac-tbl th{padding:0 10px 8px 0;text-align:left;font-size:12px;font-weight:700;
  color:var(--muted);border-bottom:1px solid var(--border);white-space:nowrap}
.ac-tbl td{padding:10px 10px 10px 0;border-bottom:1px solid var(--border);
  color:var(--ink);vertical-align:top}
.ac-tbl tr:last-child td{border-bottom:0}
.ac-when{white-space:nowrap;color:var(--text)}
.ac-amt{white-space:nowrap;text-align:right;font-weight:700;padding-right:0}
/* ⚠️ 退款嗰行淡啲，但**唔准隱藏**：佢張銀行紀錄度有扣過錢嗰一行，
   入嚟就係想對呢一筆。冚咗就等於「收返咗之後當冇發生過」。 */
.ac-off{opacity:.62}
.ac-tags{margin-top:4px;display:flex;flex-wrap:wrap;gap:5px}
.ac-tag{padding:2px 7px;border-radius:99px;background:var(--surface);
  border:1px solid var(--border);font-size:11px;font-weight:700;color:var(--text)}
.ac-tag.bad{background:rgba(185,28,28,.09);border-color:rgba(185,28,28,.3);color:var(--bad)}
.ac-none{margin:0;font-size:14px;color:var(--muted)}

/* 未係會員嗰陣，「帳戶狀態」入面嗰嚿入會掣。2026-09-10 加。 */
.ac-join{margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
/* ⚠️ 要 wrap —— 兩粒掣連埋個價（「按年加入 · HK$1,398／年」）好長，
   窄機唔 wrap 就會撐爆張卡，出橫向捲軸。 */
.ac-btns{display:flex;flex-wrap:wrap;gap:10px}
.ac-btns .btn{flex:1 1 auto;text-align:center;white-space:nowrap}

.ac-form{max-width:380px}
.ac-form .msg{margin:12px 0 0}
/* ⚠️ 撞名修正，唔係手多。`.form .field>span` 係報名表嗰個**欄名**
   （13px 粗體 var(--ink)），特異度 (0,2,1)，高過 `.field .hint` 嘅 (0,2,0)。
   即係話喺 `class="form"` 入面寫 `<span class="hint">`，句提示會變到同
   欄名一模一樣粗 —— 人分唔出邊句係欄名邊句係提示。要 (0,3,1) 先蓋得返。 */
.ac-form .field>span.hint{margin:5px 0 0;font-size:12px;font-weight:400;color:var(--muted)}

/* 電郵通知個關掣。 */
.ac-tog{display:flex;align-items:center;gap:10px;font-size:15px;
  font-weight:700;color:var(--ink);cursor:pointer}
.ac-tog input{width:17px;height:17px;accent-color:var(--accent);cursor:pointer}
.ac-tog+.ac-note{margin-top:10px}

@media (max-width:560px){
  .ac-sec{padding:18px 16px}
  /* ⚠️ 摺行之後個標籤要細啲、行距要收 —— 唔係「登入電郵」四個字
     佔足一行 14px，下面個值再佔一行，兩行做一件事。 */
  .ac-row{flex-direction:column;gap:3px}
  .ac-lab{flex:none;font-size:12px}
}

/* ---------- 會員每月活動（/live）2026-09-22 ----------
 *
 * 由「免費工作坊」嗰版改造而成。資料同實體班同一張表（member_only = 1），
 * 所以狀態標籤照用返 .tag／.t-ok／.t-few／.t-full —— 兩版講同一套狀態字眼，
 * 唔應該各有一套樣。
 *
 * ⚠️ 全部 mu- 前綴。呢個檔一堆短名（.tag .form .facts .plan .grid 都係），
 *    撞咗會 DOM 啱但畫面爛。開檔嗰陣 grep 過 .mu- 係零。
 */
.mu-lead{margin:14px 0 0;max-width:62ch;font-size:15px;line-height:1.8;color:var(--text)}
.mu-card{margin:0 0 14px;padding:20px;background:var(--card);
  border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}
.mu-hd{margin:0 0 14px}
.mu-when{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:13px;font-weight:700;color:var(--muted)}
.mu-topic{margin:7px 0 4px;font-size:19px;font-weight:900;line-height:1.35;color:var(--heading)}
.mu-meta{margin:0;font-size:13.5px;color:var(--muted)}
.mu-act .btn{width:100%}
.mu-note{margin:9px 0 0;font-size:13px;line-height:1.7;color:var(--muted)}
.mu-tail{margin:18px 0 60px;font-size:14px;color:var(--muted)}
.mu-form .field{margin:0 0 12px}
@media (max-width:560px){
  .mu-card{padding:16px}
  .mu-topic{font-size:17px}
}

/* 「收推廣電郵」剔格（2026-09-23）—— 註冊表同面授班報名表共用。
   ⚠️ 名 grep 過全站冇人用（`mk-` 開頭）。
   ⚠️ 成句字都包喺 <label> 入面 —— 撳字都剔到，手機上個格好細。
   ⚠️ 冇 `[hidden]` 覆寫：app.css 頂有全域 `[hidden]{display:none!important}`，
      呢度寫 display:flex 唔會令佢收唔埋。 */
.mk-opt{display:flex;gap:9px;align-items:flex-start;margin:4px 0 16px;
  font-size:13px;line-height:1.55;color:var(--text);cursor:pointer}
.mk-opt input{flex:none;width:16px;height:16px;margin:2px 0 0;accent-color:var(--accent)}