:root {
  color-scheme: light dark;
  /* 淺色模式背景與面板都是白色，輸入框只能靠框線辨認，所以表單控制項用比 --line 深的 --control-line（對白底至少 3:1） */
  --bg: #fff; --surface: #fff; --text: #1d1d1b; --muted: #6b6b66; --line: #f0e3e8; --control-line: #a8808f;
  --accent: #c92a68; --accent-text: #fff; --bad: #b3261e; --ok: #2e7d4f; --note-bg: #fdf2f5;
  --vip-solid: #d9a63c; --on-vip: #1d1d1b;
  /* 頁尾的官方品牌圖示（AUR-287）：品牌色不隨深色模式改變，白色是圖示內的字／紙飛機 */
  --line-brand: #06c755; --telegram-brand: #26a5e4; --on-brand: #fff;
  --accent-soft: #fdf2f5; --accent-line: #f3d3de; --accent-ink: #a11f54;
  /* 收款地址 QR Code（AUR-366）：深色主題也維持淺底深碼，掃描器才讀得到 */
  --qr-paper: #fff; --qr-ink: #000;
  font-family: system-ui, -apple-system, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  font-size: 16px; line-height: 1.6;
}
/* 淺色是預設；「跟隨系統」由 media 覆寫（AUR-320）。:not([data-theme="light"])
   讓手動選的淺色在系統深色下仍然保持淺色。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #171314; --surface: #201a1c; --text: #ecebe6; --muted: #a2a19b; --line: #3a2f33; --control-line: #806a74;
    --accent: #f48fb1; --accent-text: #171314; --bad: #f08a80; --ok: #7cc79a; --note-bg: #2e2528;
    /* VIP 金色在深色模式維持同一個值；明列才能讓淺色／深色的 token 集合一致 */
    --vip-solid: #d9a63c; --on-vip: #161615;
    --line-brand: #06c755; --telegram-brand: #26a5e4; --on-brand: #fff;
    --accent-soft: #2e2528; --accent-line: #5a3c47; --accent-ink: #f48fb1;
    --qr-paper: #fff; --qr-ink: #000;
  }
}
/* 手動深色：系統淺色時也適用；值和上面的系統深色逐字相同，測試會比對。 */
:root[data-theme="dark"] {
  --bg: #171314; --surface: #201a1c; --text: #ecebe6; --muted: #a2a19b; --line: #3a2f33; --control-line: #806a74;
  --accent: #f48fb1; --accent-text: #171314; --bad: #f08a80; --ok: #7cc79a; --note-bg: #2e2528;
  --vip-solid: #d9a63c; --on-vip: #161615;
  --line-brand: #06c755; --telegram-brand: #26a5e4; --on-brand: #fff;
  --accent-soft: #2e2528; --accent-line: #5a3c47; --accent-ink: #f48fb1;
  --qr-paper: #fff; --qr-ink: #000;
}
/* 表單控制項與捲軸跟著手動選的主題；跟隨系統時維持上面的 light dark。 */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
/* 內容卡片與導覽列用 margin: 0 auto 置中：不保留捲軸寬度時，短頁面與長頁面
   （例如沒有活動的 /events 與 /pricing）切換會左右跳半個捲軸（AUR-229）。
   stable 讓有無捲軸的頁面都停在同一個位置；沒有捲軸的頁面會固定留一條空白。 */
html { scrollbar-gutter: stable; }
/* 版型的 <head> 在 web.css 到之前先藏起 body（AUR-95），這裡把它顯示出來並取消備援的計時動畫 */
body { margin: 0; background: var(--bg); color: var(--text); visibility: visible; animation: none; }
/* 加到主畫面的 PWA 是全螢幕（standalone），內容要避開瀏海與手勢條（AUR-246）。
   env() 在一般瀏覽器與沒有 viewport-fit=cover 的頁面都是 0，所以這裡不需要另外判斷 */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.topbar, .site-top { padding-top: env(safe-area-inset-top); }
a { color: var(--accent); }
.box { max-width: 420px; margin: 48px auto; padding: 32px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
@media (max-width: 480px) { .box { margin: 0; min-height: 100vh; border: 0; border-radius: 0; padding: 24px 16px; } }
.brand { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 20px; font-size: 18px; line-height: 1; color: var(--text); text-decoration: none; }
/* 品牌標記「M」（templates/_logo_mark.html，AUR-395）用品牌色，深色模式跟著 --accent 換成淺粉 */
.brand-mark { flex: none; width: 28px; height: 28px; color: var(--accent); }
/* 手寫字標（templates/_logo_wordmark.html，AUR-395）跟著 .brand 的文字色。高度用 em 跟著 .brand 的
   font-size：viewBox 從 M 的頂端包到 g 的下緣，1.6em 時 M 的高度約是 1em。
   width: auto 讓寬度照 viewBox 的比例算，蓋過 svg 上的 width 屬性 */
.brand-wordmark { flex: none; display: block; width: auto; height: 1.6em; }
.topbar { background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar-inner { max-width: 960px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.topbar .brand { margin: 0; }
/* app 頂部列在桌面只放字標（AUR-395）；M 標記只在 760px 以下字標藏起來時出現。
   預設藏起來、窄螢幕再打開，不寫 min-width：761 與 760 之間的小數寬度也不會兩個都出現 */
.topbar.with-menu .brand-mark { display: none; }
.nav { display: flex; gap: 16px; flex: 1; flex-wrap: wrap; }
.nav a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; padding: 4px 0; }
/* 公開頁面的導覽列先留一條透明底線（AUR-129）：aria-current 的 2px 底線是畫在框線上，
   沒有預留的話只有「目前所在頁」那一項會高 2px，整條 bar 跟著長高，切換頁面時會跳一下 */
.site-nav a { border-bottom: 2px solid transparent; }
/* 圖示（AUR-99）：inline SVG 線稿，尺寸寫在 svg 上，這裡只管對齊與顏色 */
.icon { flex: none; }
.icon-link { display: inline-flex; align-items: center; gap: 4px; }
.empty-icon { display: block; margin: 0 auto 8px; color: var(--muted); }
.nav a[aria-current] { color: var(--text); font-weight: 600; border-bottom: 2px solid var(--accent); }
.topbar button { padding: 6px 12px; font-size: 14px; }
.app { max-width: 960px; margin: 32px auto; padding: 0 24px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.card { padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.card h2 { margin-bottom: 4px; }
.stat { font-size: 24px; font-weight: 700; margin: 0; }
.back { margin: 0 0 12px; font-size: 14px; }
@media (max-width: 480px) {
  .topbar-inner { padding: 12px 16px; gap: 12px; }
  .nav { order: 3; flex-basis: 100%; gap: 12px; }
  .app { margin: 24px auto; padding: 0 16px; }
}
/* 帳號選單：主導覽只放首頁與訊息，其餘個人功能收在右上角（AUR-60）。
   浮在內容上，用 --control-line 邊框區隔，不加陰影 */
.account-menu { position: relative; margin-left: auto; }
.account-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; max-width: 240px; padding: 3px 12px 3px 3px; border: 1px solid var(--control-line); border-radius: 999px; font-size: 14px; color: var(--text); cursor: pointer; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu > summary::after { content: ""; flex: none; width: 6px; height: 6px; margin-left: 2px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-2px) rotate(45deg); }
.account-menu[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.account-menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 頭像要一直是正圓（AUR-205）：照片是 3:4，只寫 img 的 height: 100% 在 inline-grid 裡解不出來
   （列高按內容算，退回 auto＝39px），會凸出膠囊。所以圖片改用絕對定位填滿這個 30px 的框，
   overflow: hidden 再由容器保證圓形裁切。 */
.account-menu .avatar { position: relative; flex: none; width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--note-bg); color: var(--muted); font-size: 13px; font-weight: 700; overflow: hidden; }
.account-menu .who-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 10; width: 260px; padding: 8px; background: var(--surface); border: 1px solid var(--control-line); border-radius: 12px; }
.menu-head { display: grid; gap: 2px; padding: 8px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.menu-head span { font-size: 13px; color: var(--muted); }
.menu-head strong { overflow-wrap: anywhere; }
.menu a, .menu button { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 15px; font-weight: 400; text-align: left; text-decoration: none; cursor: pointer; }
.menu a:hover, .menu button:hover { background: var(--note-bg); }
.menu a:focus-visible, .menu button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.menu a[aria-current] { color: var(--accent); font-weight: 600; }
.menu .sep { height: 1px; margin: 6px 0; background: var(--line); }
.account-menu .menu a, .account-menu .menu button { display: flex; align-items: center; gap: 10px; }
.account-menu .menu .icon { color: var(--muted); }
.account-menu .menu a[aria-current] .icon { color: inherit; }
@media (max-width: 480px) {
  /* 手機寬度：首頁、訊息、通知只留圖示（文字給螢幕閱讀器），品牌、導覽、通知、帳號選單要擠在同一列，
     所以間距縮到 8px；導覽連結的點擊區 40×44。更窄的螢幕見下面 420px、374px 與 359px 幾段 */
  .topbar.with-menu .topbar-inner { gap: 8px; }
  .topbar.with-menu .nav { order: 0; flex-basis: auto; gap: 4px; }
  .nav .label, .notify-menu .label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .nav a { position: relative; justify-content: center; min-width: 40px; min-height: 44px; }
  .nav .count { position: absolute; top: 4px; right: 0; }
  .account-menu .who-name { display: none; }
  .account-menu > summary { padding-right: 10px; }
  .menu { width: min(280px, calc(100vw - 32px)); }
}
/* 站內通知（AUR-64）：鈴鐺＋「通知」（AUR-99），面板與帳號選單一樣用 <details>、不加陰影。
   未讀的一則用淡粉底與右側圓點，另有給螢幕閱讀器的「未讀」文字，不只靠顏色 */
.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; }
.notify-menu { position: relative; margin-left: auto; }
.notify-menu + .account-menu { margin-left: 0; }
.notify-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--control-line); border-radius: 999px; font-size: 14px; color: var(--text); cursor: pointer; }
.notify-menu > summary::-webkit-details-marker { display: none; }
.notify-menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 導覽列「訊息」的未讀數（AUR-252）和鈴鐺用同一個數字樣式；手機寬度疊在圖示右上角，不把導覽撐寬 */
.notify-menu .count, .nav .count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-size: 12px; font-weight: 700; line-height: 18px; text-align: center; }
.notify-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 10; width: 360px; background: var(--surface); border: 1px solid var(--control-line); border-radius: 12px; overflow: hidden; }
.notify-panel > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.notify-panel > header h2 { margin: 0; font-size: 16px; }
.notify-panel > footer { padding: 10px 16px; border-top: 1px solid var(--line); text-align: center; font-size: 14px; }
.link-button { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 13px; font-weight: 400; text-decoration: underline; cursor: pointer; }
.notice-list { list-style: none; margin: 0; padding: 0; }
.notice { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 12px 36px 12px 16px; }
.notice + .notice { border-top: 1px solid var(--line); }
.notice.is-unread { background: var(--note-bg); }
.notice.is-unread::after { content: ""; position: absolute; top: 20px; right: 16px; width: 8px; height: 8px; border-radius: 999px; background: var(--accent); }
.notice-mark { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; background: var(--note-bg); color: var(--muted); font-size: 13px; font-weight: 700; }
.notice.is-unread .notice-mark { background: var(--surface); }
.notice-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.notice-body p { margin: 0; font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.notice-body .notice-detail { color: var(--muted); }
.notice-body time { font-size: 12px; color: var(--muted); }
a.notice-link { color: inherit; text-decoration: none; }
a.notice-link:hover { text-decoration: underline; }
.notice-empty { padding: 32px 16px; text-align: center; }
.notice-empty strong { display: block; margin-bottom: 4px; }
.notice-empty p { margin: 0; font-size: 14px; color: var(--muted); }
.notice-page { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.notice-group { margin: 20px 0 8px; font-size: 14px; font-weight: 600; color: var(--muted); }
.page-head .link-button { margin-left: auto; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; padding: 0; list-style: none; }
.chip { display: inline-block; padding: 4px 12px; border: 1px solid var(--control-line); border-radius: 999px; color: var(--text); font-size: 14px; text-decoration: none; }
.chip[aria-current] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
@media (max-width: 480px) {
  .notify-menu > summary { padding: 5px 10px; }
  /* 面板寬度跟著螢幕，不會超出右邊。定位在頂部列（.topbar-inner）而不是通知按鈕或固定的高度：
     頂部列變高或換行時（AUR-97 加了蜜蜂圖示後就換過行），面板仍在整個頂部列下方，不會蓋住帳號選單 */
  .topbar.with-menu .topbar-inner { position: relative; }
  .notify-menu { position: static; }
  .notify-panel { top: calc(100% + 4px); right: 16px; left: 16px; width: auto; max-height: calc(100vh - 80px); overflow-y: auto; }
}
/* 沒有暱稱時帳號選單顯示 email，760–880px 會把導覽擠成兩行：880px 以下只留頭像。
   暱稱與 email 在選單頂端仍看得到，summary 本身有 aria-label，螢幕閱讀器不受影響。
   放在 420px 那段前面，讓更窄時的 padding 覆蓋這裡 */
@media (max-width: 880px) {
  .topbar.with-menu .account-menu .who-name { display: none; }
  .topbar.with-menu .account-menu > summary { padding-right: 10px; }
}
/* 頂部列在 375px（iPhone SE／mini）有未讀數字時會把帳號選單擠到第二列（AUR-99）：
   420px 以下間距再收、圖示縮小（四個導覽圖示＋「99+」在 401–420px 也會換列） */
@media (max-width: 420px) {
  .topbar.with-menu .topbar-inner { gap: 8px; }
  .topbar.with-menu .nav { gap: 0; }
  .nav a { min-width: 32px; }
  .notify-menu > summary { padding: 5px 8px; gap: 4px; }
  .account-menu > summary { gap: 6px; padding-right: 8px; }
  .account-menu .avatar { width: 28px; height: 28px; }
}
/* 400px 以下字標與 M 標記縮小；公開頁面（_site_nav.html）也共用這條，所以門檻維持 400px */
@media (max-width: 400px) {
  .topbar .brand { font-size: 16px; }
  .topbar .brand-mark { width: 24px; height: 24px; }
}
/* 直播入口（AUR-221）讓主導覽多一格：品牌字、導覽與通知的文字都顯示時，手機與小平板（760px 以下）
   會把帳號選單擠到第二列，所以品牌只留 M 標記、導覽與通知只留圖示，文字留給螢幕閱讀器。
   這幾條不分 480px 上下寫在同一段：桌面瀏覽器縮放時寬度可能是 480.8px 這種小數，
   落在 max-width: 480px 與 min-width: 481px 之間 */
@media (max-width: 760px) {
  .topbar.with-menu .brand-name,
  .topbar.with-menu .nav .label,
  .topbar.with-menu .notify-menu .label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  /* 字標藏起來後由 M 標記代表品牌（桌面的預設是藏起來，見 .topbar.with-menu .brand-mark） */
  .topbar.with-menu .brand-mark { display: block; }
}
/* 481–760px（大手機橫放、小平板）：間距與點擊區照 480px 以下的版本，只是間距寬一點 */
@media (min-width: 481px) and (max-width: 760px) {
  .topbar.with-menu .topbar-inner { gap: 16px; }
  .topbar.with-menu .nav { gap: 4px; }
  .topbar.with-menu .nav a { justify-content: center; min-width: 40px; min-height: 44px; }
}
/* 只留圖示時，M 標記、導覽與通知鈴鐺的圖示放大（AUR-261）：svg 上寫的 28／20px 是桌面的尺寸，
   這裡只改手機的。圖示變大後，四個導覽圖示（百家樂與直播都開）＋「99+」要把點擊寬與間距收回來
   才放得進同一列：421–480px 點擊寬 36px、420px 以下 32px、374px 以下品牌與導覽之間 4px。
   導覽只有三格以下時空間夠，見下面 :has() 那幾段 */
@media (max-width: 760px) {
  .topbar.with-menu .brand-mark { width: 32px; height: 32px; }
  .topbar.with-menu .nav .icon, .topbar.with-menu .notify-menu .icon { width: 24px; height: 24px; }
}
@media (max-width: 480px) {
  .topbar.with-menu .nav a { min-width: 36px; }
}
@media (max-width: 420px) {
  .topbar.with-menu .nav a { min-width: 32px; }
}
@media (max-width: 400px) {
  .topbar.with-menu .brand-mark { width: 28px; height: 28px; }
}
@media (max-width: 374px) {
  .topbar.with-menu .topbar-inner { gap: 4px; }
}
/* 導覽三格以下（沒開百家樂或直播）時圖示之間拉開：點擊寬多 4px、導覽間距 8px。
   不支援 :has() 的瀏覽器整條規則無效，維持上面四格的版本，只是比較擠，不會換列 */
@media (max-width: 760px) {
  .topbar.with-menu .nav:not(:has(> a:nth-child(4))) { gap: 8px; }
  .topbar.with-menu .nav:not(:has(> a:nth-child(4))) a { min-width: 40px; }
}
@media (max-width: 420px) {
  .topbar.with-menu .nav:not(:has(> a:nth-child(4))) { gap: 0; }
  .topbar.with-menu .nav:not(:has(> a:nth-child(4))) a { min-width: 36px; }
}
@media (max-width: 374px) {
  .topbar.with-menu .topbar-inner:not(:has(.nav > a:nth-child(4))) { gap: 8px; }
}
/* 359px 以下（320px 的舊手機）四個導覽圖示＋通知數字仍差十幾 px：左右留白、間距、M 標記與導覽點擊寬再收一點 */
@media (max-width: 359px) {
  .topbar.with-menu .topbar-inner { padding-left: 12px; padding-right: 12px; }
  .topbar.with-menu .topbar-inner:not(:has(.nav > a:nth-child(4))) { gap: 4px; }
  .topbar.with-menu .brand-mark { width: 24px; height: 24px; }
  .nav a, .topbar.with-menu .nav a { min-width: 28px; }
  .topbar.with-menu .nav:not(:has(> a:nth-child(4))) a { min-width: 32px; }
  .notify-menu > summary { padding: 5px 6px; }
}
/* 訊息頁：左邊對話列表、右邊對話內容（AUR-118）。窄螢幕一次只顯示一邊：
   還沒選房間時是列表，選了之後是對話內容，左上角有返回鍵 */
.page-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.page-head h1 { margin: 0; }
/* 版面（AUR-265）：沒有頁首標題，桌機撐滿導覽列以下的高度；用細線分欄，不用卡片與底色堆層次 */
.split { display: grid; grid-template-columns: 320px 1fr; min-height: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.chat-layout { height: calc(100dvh - 140px); min-height: 480px; }
.convo-pane { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.convo-list { flex: 1; min-height: 0; margin: 0; padding: 8px 0; overflow-y: auto; list-style: none; }
.convo-empty { flex: 1; margin: 0; padding: 16px; font-size: 14px; color: var(--muted); }
.convo-empty[hidden] { display: none; }
/* 對話列：整列可點，目前的房間左側一條品牌色細條 */
.convo-item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; font-weight: 400; text-align: left; cursor: pointer; }
.convo-item:hover { background: var(--note-bg); }
.convo-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.convo-item[aria-current="true"] { background: var(--note-bg); }
.convo-item[aria-current="true"]::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 0; width: 2px; background: var(--accent); }
.convo-avatar, .chat-avatar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 999px; background: var(--note-bg); color: var(--muted); font-size: 15px; font-weight: 700; }
.convo-avatar img, .chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.convo-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.convo-name { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; font-size: 15px; font-weight: 600; white-space: nowrap; }
.convo-name .chat-nick { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.convo-name .vip-badge, .convo-name .official-badge { flex: none; }
.convo-note { overflow: hidden; font-size: 13px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.convo-note:empty { display: none; }
.convo-note.is-typing { color: var(--accent); }
.convo-side { flex: none; display: grid; justify-items: end; gap: 4px; }
.convo-side time { font-size: 12px; color: var(--muted); white-space: nowrap; }
/* 有未讀訊息的對話（AUR-252）：說明改成「有新訊息」並用正文色、右側加圓點，另有給螢幕閱讀器的
   「未讀」文字，不只靠顏色。「輸入中」優先，維持 accent 色 */
.convo-item.is-unread .convo-note:not(.is-typing) { color: var(--text); font-weight: 600; }
.convo-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); }
.convo-tag { padding: 0 6px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; color: var(--muted); }
.lounge-entry, .outreach-entry { display: grid; gap: 2px; flex: none; width: calc(100% - 24px); margin: 8px 12px 12px; padding: 12px; text-align: left; font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.outreach-entry { margin-top: 0; }
.lounge-entry span, .outreach-entry span { font-size: 13px; color: var(--muted); }
.lounge-entry:hover, .outreach-entry:hover { border-color: var(--accent); }
.lounge-entry:focus-visible, .outreach-entry:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.outreach-meta { display: flex; justify-content: space-between; gap: 12px; margin: -8px 0 12px; font-size: 12px; color: var(--muted); }
.outreach-dialog textarea { min-height: 120px; resize: vertical; }
.convo-pane .form-error { margin: 0 16px 12px; }
.verify-dialog { max-width: 420px; width: calc(100% - 32px); padding: 24px; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.verify-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.verify-dialog h2 { margin: 0 0 8px; }
.verify-dialog p { margin: 0 0 16px; color: var(--muted); }
.verify-dialog select, .verify-dialog textarea { width: 100%; }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.chat-pane { display: grid; min-width: 0; min-height: 0; }
.chat-empty, .chat-blocked { place-content: center; justify-items: center; gap: 4px; padding: 32px 24px; text-align: center; }
.chat-empty h2, .chat-blocked h2 { margin: 0; }
.chat-empty p, .chat-blocked p { margin: 0; color: var(--muted); }
.chat-blocked[hidden], .chat-empty[hidden], .chat-room[hidden] { display: none; }
/* 直向 flex：AI 提示、唯讀、VIP 提示出現與否都只有訊息區伸縮（grid 固定列數時，多出來的一列會搶走 1fr） */
.chat-room { position: relative; display: flex; flex-direction: column; min-height: 0; }
.chat-head { flex: none; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 12px 8px 20px; border-bottom: 1px solid var(--line); }
/* 無框圖示鈕：返回、選單（AUR-265 拿掉外框圓圈）。svg 用 block，避免行內基線讓圖示偏下 */
.chat-back, .chat-menu > summary { display: none; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.chat-back svg, .chat-menu > summary svg, .composer-gift svg, .composer-send svg { display: block; }
.chat-back:hover, .chat-menu > summary:hover, .chat-menu[open] > summary { background: var(--note-bg); color: var(--text); }
.chat-back:focus-visible, .chat-menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.chat-avatar { width: 40px; height: 40px; }
.chat-peer { flex: 1; min-width: 0; display: grid; line-height: 1.35; }
.chat-peer strong { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; font-size: 16px; white-space: nowrap; }
.chat-peer span { font-size: 12px; color: var(--muted); }
.chat-peer span:empty, .chat-peer span[hidden] { display: none; }
.chat-peer .chat-typing { color: var(--accent); }
/* VIP 標章在標題列：蓋掉上面的 span 字級與顏色（AUR-303） */
.chat-peer strong .chat-nick { min-width: 0; overflow: hidden; font-size: 16px; color: inherit; text-overflow: ellipsis; }
.chat-peer strong .vip-badge { flex: none; font-size: 12px; color: var(--on-vip); }
.chat-peer strong .official-badge { flex: none; font-size: 12px; color: var(--accent-ink); }
.chat-conn { font-size: 12px; color: var(--muted); text-align: right; }
.chat-conn:empty { display: none; }
.chat-menu { position: relative; flex: none; }
.chat-menu > summary { display: grid; list-style: none; }
.chat-menu > summary::-webkit-details-marker { display: none; }
.chat-menu .menu { top: calc(100% + 6px); width: 210px; }
.chat-log { flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 16px 24px; overflow-y: auto; overscroll-behavior: contain; }
.load-older { align-self: center; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 400; }
.load-older:hover { background: var(--note-bg); color: var(--text); }
.load-older:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.load-older[hidden], .new-messages[hidden] { display: none; }
/* 日期分隔（AUR-257）：跨日時插在第一則前面；左右細線、中間文字（AUR-265） */
.day-sep { align-self: stretch; display: flex; align-items: center; gap: 12px; margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.day-sep::before, .day-sep::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 72%; }
.msg.is-mine { align-self: flex-end; align-items: flex-end; }
/* 同一人 5 分鐘內的連續訊息：間距縮小，只有最後一則顯示時間 */
.msg.is-cont { margin-top: -8px; }
.msg-sender { margin: 0 0 4px 4px; font-size: 12px; color: var(--muted); }
.msg.is-cont .msg-sender { display: none; }
.msg-row { display: flex; align-items: center; gap: 4px; max-width: 100%; }
.msg.is-mine .msg-row { flex-direction: row-reverse; }
/* 訊息（AUR-265）：細框與淡底，不用飽和的實心色；靠說話者那一側的角較小，連續訊息看起來是同一串 */
.bubble { min-width: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px 12px 12px 6px; background: var(--surface); font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.msg.is-cont .bubble { border-top-left-radius: 6px; }
.bubble p { margin: 0; white-space: pre-wrap; }
.msg.is-mine .bubble { border-color: var(--accent-line); border-radius: 12px 12px 6px 12px; background: var(--accent-soft); color: var(--accent-ink); }
.msg.is-mine.is-cont .bubble { border-top-right-radius: 6px; }
.msg-meta { display: flex; align-items: center; gap: 8px; margin: 4px 4px 0; font-size: 11px; color: var(--muted); }
.msg.has-next .msg-meta { display: none; }
.msg.show-actions .msg-meta { display: flex; }
/* 已讀雙勾（AUR-383）：一個勾＝已送出（灰），兩個勾＝對方已讀（主色）；只在自己的訊息、時間旁邊 */
.msg-receipt { display: inline-flex; align-items: center; color: var(--muted); }
.msg-receipt svg { width: 14px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.msg-receipt.is-read { color: var(--accent); }
.msg-receipt.is-read svg { width: 20px; }
/* 檢舉（AUR-257）：平常藏起來，滑過、鍵盤 focus 或手機點一下訊息才出現；藏起來時仍保留位置，不會讓版面跳動 */
.msg-report, .msg-recall { flex: none; min-height: 40px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 400; opacity: 0; pointer-events: none; }
.msg:hover .msg-report, .msg:focus-within .msg-report, .msg.show-actions .msg-report,
.msg:hover .msg-recall, .msg:focus-within .msg-recall, .msg.show-actions .msg-recall { opacity: 1; pointer-events: auto; }
.msg-report:hover, .msg-recall:hover { background: var(--note-bg); color: var(--text); }
.msg-report:focus-visible, .msg-recall:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.msg-deleted { margin: 0; color: var(--muted); font-style: italic; }
/* 收回（AUR-385）：只剩一行提示，不是泡泡；對方的那一側仍保留檢舉 */
.msg-recalled { margin: 0; padding: 6px 12px; border: 1px dashed var(--line); border-radius: 999px; color: var(--muted); font-size: 13px; }
/* VIP 失效（AUR-382）：伺服器只給假字，這裡模糊成看得出是訊息、讀不出內容；不能選取複製 */
.msg.is-locked .bubble p { filter: blur(5px); user-select: none; -webkit-user-select: none; }
.new-messages { position: absolute; left: 50%; bottom: 76px; z-index: 2; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; font-size: 13px; }
.chat-read-only, .vip-notice { flex: none; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 14px; }
.chat-read-only { color: var(--muted); }
.chat-read-only[hidden], .vip-notice[hidden] { display: none; }
.chat-ai-note { flex: none; margin: 0; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; }
.chat-ai-note[hidden] { display: none; }
.vip-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; background: var(--note-bg); }
.vip-notice p { margin: 0; }
.vip-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.vip-notice .button, .vip-notice button { padding: 6px 12px; font-size: 14px; }
/* 輸入列（AUR-257）：送禮、輸入框、送出一行；輸入框由 web.js 依內容長高到 max-height。
   AUR-265：三者收在同一個框裡，框聚焦時變品牌色（取代輸入框自己的 outline）；送出是圖示鈕，不用實心圓 */
.composer { flex: none; display: grid; gap: 4px; padding: 12px 16px 16px; }
.composer[hidden] { display: none; }
.composer .form-error { padding: 0 4px; }
.composer-row { display: flex; align-items: flex-end; gap: 4px; padding: 0 4px; border: 1px solid var(--control-line); border-radius: 12px; background: var(--surface); }
.composer-row:focus-within { border-color: var(--accent); }
/* 輸入框的 focus 畫在外框上：2px 疊在 1px 框線上（offset -1px），不另外多一圈 */
.composer-row:has(> textarea:focus-visible) { outline: 2px solid var(--accent); outline-offset: -1px; }
.composer textarea { flex: 1; min-width: 0; width: auto; height: 44px; min-height: 44px; max-height: 132px; padding: 10px 8px; border: 0; border-radius: 0; background: transparent; resize: none; overflow-y: auto; }
.composer textarea:focus-visible { outline: none; }
.composer-send { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--accent); }
.composer-send:hover:not(:disabled) { background: var(--accent-soft); }
.composer-send:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.composer-send:disabled { cursor: default; color: var(--muted); opacity: .6; }
.composer-count { justify-self: end; padding: 0 4px; font-size: 12px; color: var(--muted); }
.composer-count[hidden] { display: none; }
.composer-count.over { color: var(--bad); }
@media (max-width: 720px) {
  .split { grid-template-columns: 1fr; min-height: 280px; }
  .chat-layout { height: calc(100dvh - 160px); min-height: 360px; }
  .split:not(.chat-layout) .convo-pane { display: none; }
  .chat-layout:not(.chat-open) .chat-pane { display: none; }
  .chat-layout.chat-open .convo-pane { display: none; }
  .chat-layout.chat-open .chat-pane { display: grid; }
  /* 手機開房時佔滿畫面（AUR-257）：高度與位置跟著 visualViewport（web.js 設 --chat-vv-*），
     鍵盤打開時整個聊天室縮到鍵盤上方，標題列與輸入框都看得到 */
  .chat-layout.chat-open { position: fixed; left: 0; right: 0; top: var(--chat-vv-top, 0px); z-index: 30; height: var(--chat-vv-height, 100dvh); min-height: 0; border: 0; border-radius: 0; }
  html:has(.chat-layout.chat-open) { overflow: hidden; scrollbar-gutter: auto; }
  body:has(.chat-layout.chat-open) .chat-notice { position: fixed; top: calc(var(--chat-vv-top, 0px) + 64px); left: 16px; right: 16px; z-index: 31; margin: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
  .chat-layout.chat-open .chat-head { padding-top: max(8px, env(safe-area-inset-top)); }
  .chat-layout.chat-open .composer { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .chat-back { display: grid; }
  .chat-head { padding-left: 4px; }
  .chat-log { padding: 12px; }
  .composer { padding: 8px 12px; }
  .msg { max-width: 85%; }
}
/* 觸控裝置沒有滑過：檢舉不佔位置，點一下訊息（.show-actions）才出現 */
@media (hover: none) {
  .msg-report, .msg-recall { display: none; }
  .msg.show-actions .msg-report, .msg.show-actions .msg-recall { display: block; }
}

/* 一對一語音通話（AUR-313）：標題列的通話鍵、聊天室裡的通話事件與來電卡片。
   通話卡片固定在畫面下方，不用全頁遮罩，使用者仍看得到聊天內容。 */
.chat-call { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--accent); cursor: pointer; }
.chat-call svg { display: block; }
.chat-call:hover { background: var(--note-bg); }
.chat-call:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.chat-call[hidden] { display: none; }
.msg-call { align-self: center; max-width: 80%; margin: 4px 0; color: var(--muted); font-size: 12px; text-align: center; }
.msg-call p { margin: 0; }
.voice-overlay { position: fixed; inset: auto 0 0 0; z-index: 30; display: flex; justify-content: center; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.voice-overlay[hidden] { display: none; }
.voice-overlay audio { display: none; }
.call-card { display: grid; justify-items: center; gap: 8px; width: min(420px, 100%); padding: 20px; border: 1px solid var(--control-line); border-radius: 12px; background: var(--surface); }
.call-avatar { display: grid; place-items: center; width: 64px; height: 64px; overflow: hidden; border-radius: 999px; background: var(--note-bg); color: var(--muted); font-size: 24px; font-weight: 700; }
.call-avatar img { width: 100%; height: 100%; object-fit: cover; }
.call-card strong { font-size: 18px; text-align: center; overflow-wrap: anywhere; }
.call-status { margin: 0; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; text-align: center; }
.call-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.call-actions button { min-width: 92px; padding: 8px 16px; border: 1px solid var(--control-line); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.call-actions button:hover { background: var(--note-bg); }
.call-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.call-actions .call-answer { border-color: var(--accent); background: var(--accent); color: var(--accent-text); }
.call-actions .call-answer:hover { background: var(--accent); opacity: .9; }
.call-actions .call-end, .call-actions .call-decline { color: var(--bad); border-color: var(--bad); }
.call-actions button[hidden] { display: none; }
.call-actions button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-line); }
@media (max-width: 480px) {
  .voice-overlay { padding: 12px; }
  .call-card { padding: 16px; }
  .call-actions button { min-width: 84px; }
}

h1 { font-size: 24px; margin: 0 0 20px; }
h2 { font-size: 18px; margin: 0 0 8px; }
form { display: grid; gap: 14px; }
label { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
label small { font-size: 12px; }
input[type=email], input[type=password], input[type=tel], input[type=text] { font: inherit; color: var(--text); background: var(--bg); padding: 10px 12px; border: 1px solid var(--control-line); border-radius: 8px; }
input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
input[type=date] { font: inherit; color: var(--text); background: var(--bg); padding: 10px 12px; border: 1px solid var(--control-line); border-radius: 8px; }
select { font: inherit; color: var(--text); background: var(--bg); padding: 10px 12px; border: 1px solid var(--control-line); border-radius: 8px; }
/* 勾選框與單選鈕跟著主色，不用瀏覽器預設的藍色 */
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
label.check { display: flex; gap: 8px; align-items: flex-start; color: var(--text); }
label.check input { margin-top: 5px; }
button, .button { font: inherit; font-weight: 600; padding: 10px 16px; border: 0; border-radius: 8px; background: var(--accent); color: var(--accent-text); cursor: pointer; text-align: center; text-decoration: none; display: inline-block; }
button.secondary, .button.secondary { background: transparent; color: var(--text); border: 1px solid var(--control-line); }
button:disabled { opacity: .6; cursor: wait; }
/* 按鈕的 display 會蓋過 hidden 屬性，要明寫 */
button[hidden] { display: none; }
.row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.form-error { color: var(--bad); margin: 0; min-height: 1.6em; font-size: 14px; }
.form-error:empty { min-height: 0; }
.form-status { color: var(--ok); margin: 8px 0 0; font-size: 14px; }
.form-status.error { color: var(--bad); }
/* 配對成功（AUR-201）：沒有訊息時不佔位；首頁卡牌有自己的內距 */
.heart-status { color: var(--ok); margin: 8px 0 0; font-size: 14px; }
.heart-status:empty { display: none; }
.gcard .heart-status { margin: 8px 12px 12px; }
.panel { margin-top: 8px; }
.panel[hidden], form[hidden] { display: none; }
/* 帳號頁的更換 email／手機：表單和登入頁一樣窄，手機寬度時佔滿 */
.settings { max-width: 420px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
/* 個人設定頁（AUR-225）：摘要卡片（頭像、方案、鑽石、愛心）加上一組一組的設定清單，
   敏感操作一列一列收起，點標題才展開。桌機寬度摘要固定在左欄、設定在右欄；
   手機只有一欄。分層只用 1px 框線與 --surface，深淺色都沿用同一組變數。 */
.account-page { max-width: 720px; }
.account-side, .account-main { min-width: 0; }
@media (min-width: 880px) {
  .account-page { max-width: none; display: grid; grid-template-columns: 288px minmax(0, 1fr); gap: 0 32px; align-items: start; }
  .account-page > h1 { grid-column: 1 / -1; }
  .account-side { position: sticky; top: 24px; }
  .account-main > .account-heading:first-child, .account-main > .account-notice:first-child { margin-top: 0; }
  /* 刪除帳號後左欄收起，剩下的說明回到一欄 */
  .account-page:has(> .account-side[hidden]) { display: block; }
}
.account-card { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.account-hero { display: grid; gap: 20px; }
.account-head { display: grid; justify-items: center; gap: 12px; text-align: center; }
.account-head .account-face { width: 88px; height: 88px; font-size: 32px; outline: 1px solid var(--accent-line); outline-offset: 4px; }
.account-id { display: grid; justify-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.account-id strong { font-size: 20px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.account-id > span { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.account-edit { padding: 8px 16px; font-size: 14px; }
.account-edit:hover { border-color: var(--accent); color: var(--accent); }
.account-edit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.account-stats { display: grid; grid-template-columns: none; gap: 0; border-top: 1px solid var(--line); }
.account-stats > div { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; padding: 12px 0; }
.account-stats > div + div { border-top: 1px solid var(--line); }
.account-stats > div:last-child { padding-bottom: 0; }
.account-stats dt { font-size: 14px; color: var(--muted); }
.account-stats dd { margin: 0; text-align: right; font-size: 14px; }
.account-stats .stat-num { font-size: 20px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.account-stats .stat-note { grid-column: 1 / -1; text-align: left; font-size: 12px; line-height: 1.5; color: var(--muted); }
.plan-chip { display: inline-block; padding: 0 12px; border: 1px solid var(--accent-line); border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 14px; font-weight: 600; line-height: 28px; }
.account-callout { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 12px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 8px; }
.account-callout p { display: grid; margin: 0; min-width: 0; }
.account-callout strong { font-size: 14px; color: var(--accent-ink); }
.account-callout p span { font-size: 13px; color: var(--muted); }
.account-callout .row-icon { background: var(--surface); }
.account-callout .button { grid-column: 1 / -1; padding: 8px 16px; font-size: 14px; }
.account-callout .button:hover { filter: brightness(.94); }
.account-callout .button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.account-notice { margin: 24px 0 0; }
.account-heading { margin: 32px 0 8px; padding: 0 4px; font-size: 14px; font-weight: 600; color: var(--muted); }
/* 一組設定是一個框，裡面一列一項、用分隔線隔開（不是每一項各一張卡片） */
.account-group { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.account-group > * + * { border-top: 1px solid var(--line); }
.account-foot { margin: 0; padding: 12px 16px; font-size: 13px; color: var(--muted); }
.account-facts { display: block; }
.account-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 16px; }
.account-facts > div + div { border-top: 1px solid var(--line); }
.account-facts dt { flex: none; color: var(--muted); }
.account-facts dd { margin: 0; min-width: 0; text-align: right; }
.row-icon { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); }
.row-icon.brand { background: none; }
.row-icon.brand svg { width: 32px; height: 32px; }
.account-links a, .account-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; color: var(--text); text-decoration: none; }
.account-links a:hover, .account-row:hover, .fold > summary:hover { background: var(--note-bg); }
.account-links a:focus-visible, .account-row:focus-visible, .fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.link-text { display: grid; min-width: 0; }
.link-text strong { font-size: 15px; font-weight: 600; }
.link-text span { font-size: 13px; color: var(--muted); }
.chev { flex: none; width: 8px; height: 8px; margin: 0 4px 0 auto; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); }
/* [hidden] 要蓋得過上面的 display：刪除帳號成功後會把其餘區塊全部收起來 */
.account-group[hidden], .sanction-list[hidden] { display: none; }
.account-danger { margin-top: 32px; }
.fold { background: var(--surface); }
.fold > summary { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; list-style: none; font-weight: 600; cursor: pointer; }
.fold > summary::-webkit-details-marker { display: none; }
.fold[open] > summary { border-bottom: 1px solid var(--line); }
.fold-title { margin-right: auto; font-size: 15px; }
.fold-hint { max-width: 50%; overflow: hidden; font-size: 13px; font-weight: 400; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.fold > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-2px) rotate(45deg); }
.fold[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
/* 展開的內容和標題的文字對齊（16 + 36 圖示 + 12 間距） */
.fold-body { padding: 20px 24px 24px 64px; }
.fold-body > :first-child { margin-top: 0; }
.fold-body .muted { margin: 0 0 12px; font-size: 14px; }
.fold-body form { max-width: 480px; margin: 0; }
.fold-body .row { margin-top: 0; }
/* 推播設定（AUR-246）：兩個時間選單並排，窄螢幕自動換行；裝置按鈕和上面的偏好分開 */
.push-quiet { display: flex; gap: 16px; flex-wrap: wrap; }
.push-quiet label { display: flex; align-items: center; gap: 8px; }
.push-device { display: grid; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.push-device .muted { margin: 0; font-size: 14px; }
.push-device button { justify-self: start; }
/* 加到主畫面（AUR-334）：只有手機由 web.js 顯示，桌機保持 hidden；standalone 由 JS
   換成完成訊息。卡片用 12px 圓角、8px 內嵌區塊，間距照 DESIGN.md 的級距。 */
.account-install[hidden] { display: none; }
.install-card { padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.install-card p { margin: 0 0 12px; }
.install-card p:last-child { margin-bottom: 0; }
.install-card .muted { font-size: 14px; }
.install-steps { display: grid; gap: 8px; margin: 0 0 12px; padding-left: 20px; }
.install-steps li { padding-left: 4px; }
.install-url { margin: 0 0 12px; padding: 8px 12px; background: var(--note-bg); border-radius: 8px; overflow-wrap: anywhere; }
.install-url code { font-size: 14px; }
.install-card .form-status { margin: 8px 0 0; }
.fold-danger .fold-title { color: var(--bad); }
.fold-danger .row-icon { color: var(--bad); }
/* 我的檢舉：表格放在設定框裡，窄螢幕可以左右捲動表格本身，頁面不會橫向捲動 */
.account-reports .table-scroll { overflow-x: auto; }
.account-reports table { width: 100%; margin: 0; border-collapse: collapse; font-size: 14px; }
.account-reports th, .account-reports td { padding: 12px 16px; text-align: left; white-space: nowrap; }
.account-reports th { font-size: 13px; font-weight: 600; color: var(--muted); }
.account-reports tbody tr { border-top: 1px solid var(--line); }
@media (max-width: 480px) {
  .account-card { padding: 20px 16px; }
  .account-links a, .account-row, .fold > summary { padding: 12px; }
  .fold-body { padding: 16px 12px 20px; }
  .fold-hint { display: none; }
}
.note { background: var(--note-bg); padding: 12px 14px; border-radius: 8px; }
.muted { color: var(--muted); }
.links { margin-top: 24px; font-size: 14px; color: var(--muted); }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
dt { color: var(--muted); }
dd { margin: 0; overflow-wrap: anywhere; }
.box.wide { max-width: 960px; }
/* 性別：兩顆左右並排的按鈕，各自獨立、互斥。radio 用 1px 藏起來但保留焦點與鍵盤操作，
   外觀由相鄰的 span 畫出來——選中的那顆用 accent 底色，沒選的是線框。 */
fieldset.gender { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.gender legend { padding: 0; margin-bottom: 4px; color: var(--muted); font-size: 14px; }
fieldset.gender small { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.gender-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gender-options input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.gender-options span { display: block; padding: 10px 12px; border: 1px solid var(--control-line); border-radius: 8px; background: var(--bg); color: var(--text); font-size: 16px; text-align: center; cursor: pointer; }
.gender-options input:checked + span { border-color: var(--accent); background: var(--accent); color: var(--accent-text); font-weight: 600; }
.gender-options input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 高對比模式下背景與文字色會被系統值覆寫，改用框線粗細與勾號表示選中 */
@media (forced-colors: active) {
  .gender-options span { border-width: 1px; }
  .gender-options input:checked + span { border-width: 3px; }
  .gender-options input:checked + span::after { content: " ✓"; }
}
.small { font-size: 13px; }
/* VIP 標章：金色只用在 VIP，一定帶 VIP 這個字（金色對白底只有 2.2:1，意思靠字不靠顏色） */
.vip-badge { display: inline-block; vertical-align: middle; font-size: 12px; font-weight: 700; line-height: 1.6; letter-spacing: .04em; padding: 1px 8px; border-radius: 999px; background: var(--vip-solid); color: var(--on-vip); }
/* 官方帳號標章（AUR-387）：小編與管理長，和 VIP 的金色分開，用品牌色的淡底 */
.official-badge { display: inline-block; vertical-align: middle; font-size: 12px; font-weight: 700; line-height: 1.6; letter-spacing: .04em; padding: 0 7px; border-radius: 999px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }
/* 定價頁（AUR-59）：三個方案權益相同、只差續訂週期，所以權益只列一次，期間用整張卡片當 radio。
   radio 保持可見，選取狀態不只靠邊框顏色；付款列重述選擇與下次扣款日 */
.perks { display: grid; gap: 8px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.perks h2 { display: flex; gap: 8px; align-items: center; margin: 0; }
.perks ul { margin: 0; padding-left: 20px; }
.perks p { margin: 0; }
.plan-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding-top: 14px; }
/* 五張方案卡（AUR-333）：整張卡是 radio，預設選 1 個月；底部付款列重述選擇。
   資格不符的卡片仍顯示，讓使用者知道有這個方案，但不能選。 */
label.plan { position: relative; display: grid; gap: 4px; align-content: start; padding: 20px 16px 16px; background: var(--surface); border: 1px solid var(--control-line); border-radius: 12px; color: var(--text); font-size: 16px; cursor: pointer; }
label.plan:hover { border-color: var(--accent-line); }
label.plan:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
label.plan:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
label.plan:has(input:disabled) { border-color: var(--line); color: var(--muted); cursor: default; background: var(--surface); }
label.plan > input { position: absolute; top: 14px; right: 14px; width: 18px; height: 18px; margin: 0; }
.plan-badge { justify-self: start; padding: 1px 8px; border: 1px solid var(--accent-line); border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 600; line-height: 1.6; }
label.plan:has(.plan-perk) .plan-badge { border-color: var(--vip-solid); background: var(--vip-solid); color: var(--on-vip); }
.plan-term { margin-top: 6px; padding-right: 24px; font-size: 17px; font-weight: 700; }
.plan-price { margin-top: 4px; font-size: 22px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-charge { font-size: 14px; }
.plan-saving { font-size: 13px; font-weight: 600; color: var(--ok); }
.plan-renew { font-size: 13px; color: var(--muted); }
.plan-perk { justify-self: start; margin-top: 4px; padding: 1px 8px; border-radius: 999px; background: var(--vip-solid); color: var(--on-vip); font-size: 12px; font-weight: 700; line-height: 1.6; }
.plan-unavailable { font-size: 13px; color: var(--bad); }
/* 復訂方案橫跨一整列：方案名在左、價格在右，下面接扣款與續訂說明 */
label.plan.plan-promo { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; }
label.plan.plan-promo .plan-badge { grid-column: 1; }
label.plan.plan-promo .plan-term { grid-column: 1; margin-top: 0; }
label.plan.plan-promo .plan-price { grid-column: 2; grid-row: 1 / span 3; margin: 0; padding-right: 32px; font-size: 24px; text-align: right; }
label.plan.plan-promo .plan-charge, label.plan.plan-promo .plan-renew, label.plan.plan-promo .plan-saving, label.plan.plan-promo .plan-unavailable { grid-column: 1; }
.country-picker { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; margin: 16px 0 8px; }
/* 可搜尋的國家選單（AUR-338）：有 JS 時原生 select 會隱藏，換成 input + listbox；
   沒有 JS 時 input 是 hidden，原生 select 照常可用。 */
.country-field { position: relative; flex: 1 1 240px; display: grid; gap: 4px; min-width: 0; }
.country-field > label { font-size: 14px; color: var(--muted); }
.country-field select, .country-search { width: 100%; min-height: 44px; font: inherit; color: var(--text); background: var(--bg); padding: 10px 12px; border: 1px solid var(--control-line); border-radius: 8px; }
.country-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--control-line); border-radius: 8px; }
.country-list li { padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.country-list li:hover, .country-list li[data-active="true"] { background: var(--note-bg); }
.country-list li[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.country-list li.country-empty { color: var(--muted); cursor: default; }
.country-error { margin: 0; }
.country-picker button { min-height: 44px; align-self: end; }

section.plans { margin: 28px 0 0; }
section.plans h2 { margin: 0 0 2px; font-size: 18px; font-weight: 700; color: var(--text); }
.crypto-option { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 16px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.crypto-option h2 { flex-basis: 100%; margin: 0; font-size: 16px; }
.crypto-option form { margin: 0; }
/* 付款頁（AUR-366）：三個步驟，數量與地址都是點一下複製的按鈕，明細收在 details */
.pay-steps { display: grid; gap: 20px; margin: 8px 0; padding: 0; list-style: none; counter-reset: pay-step; }
.pay-steps > li { display: grid; gap: 8px; min-width: 0; counter-increment: pay-step; }
.pay-steps h3 { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 16px; font-weight: 600; }
.pay-steps h3::before { content: counter(pay-step); display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-size: 14px; font-weight: 700; }
.pay-steps p { margin: 0; }
.crypto-copy { display: block; width: 100%; min-width: 0; padding: 12px 16px; background: var(--surface); border: 1px solid var(--control-line); border-radius: 8px; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.crypto-copy:hover, .crypto-copy:focus-visible { border-color: var(--accent); }
.crypto-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.crypto-copy code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; user-select: all; }
.crypto-copy .copy-hint { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.crypto-copy.copied { border-color: var(--ok); }
.crypto-amount { font-size: 24px; font-weight: 700; }
.crypto-amount code { font-size: inherit; }
.crypto-address code { font-size: 15px; }
/* 卡片不寬，QR 和地址上下排，地址才不會擠成好幾行。電腦上 QR 在前（用手機掃）；
   手機上多半是在同一台裝置複製，地址放前面 */
.crypto-address-row { display: grid; gap: 12px; }
.crypto-qr { display: grid; gap: 4px; justify-self: center; justify-items: center; margin: 0; }
.crypto-qr svg { display: block; width: 160px; height: 160px; border-radius: 8px; background: var(--qr-paper); fill: var(--qr-ink); }
.crypto-qr figcaption { font-size: 12px; color: var(--muted); }
@media (max-width: 560px) {
  .crypto-qr { order: 1; }
}
.crypto-details summary { width: fit-content; color: var(--muted); font-size: 14px; cursor: pointer; }
.crypto-details summary:hover { color: var(--text); }
.crypto-details summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.crypto-summary { margin: 8px 0 0; }
.crypto-summary dt { font-size: 14px; }
.crypto-summary dd { font-weight: 600; }
label.plan .tag { position: absolute; top: -11px; left: 14px; padding: 0 8px; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-size: 12px; font-weight: 700; line-height: 20px; }
label.plan .tag.current { background: var(--surface); color: var(--text); border: 1px solid var(--control-line); line-height: 18px; }
.checkout { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 16px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.checkout p { flex: 1 1 280px; display: grid; gap: 2px; margin: 0; }
.checkout p span { font-size: 14px; color: var(--muted); }
.checkout .button, .checkout button { min-width: 160px; min-height: 48px; }
.plan-fine { margin: 16px 0 0; display: grid; gap: 4px; }
.plan-fine p { margin: 0; }
#pricing > .form-error:not(:empty) { margin-top: 12px; }
/* 中等寬度先排兩欄；手機改成一列一張，付款列貼在畫面底部，選完不用往下找按鈕 */
@media (max-width: 900px) {
  .plan-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .plan-options { grid-template-columns: 1fr; gap: 14px; }
  label.plan { padding: 16px 14px; }
  label.plan.plan-promo { grid-template-columns: minmax(0, 1fr) auto; }
  label.plan.plan-promo .plan-price { font-size: 22px; padding-right: 28px; }
  .perks { padding: 16px; }
  .checkout { position: sticky; bottom: 0; margin: 16px -16px 0; padding: 12px 16px 16px; border-width: 1px 0 0; border-radius: 0; }
  .checkout p { flex-basis: 100%; }
  .checkout .button, .checkout button { width: 100%; }
  .country-picker { align-items: stretch; }
  .country-picker button { width: 100%; }
  .country-list { max-height: 260px; }
}
/* 全站頁尾（AUR-153）：品牌＋兩組連結，下面一條細線與版權列。
   登入／註冊的窄卡片、landing 與 app 共用同一份 markup，寬度交給外層容器；
   不加陰影，顏色一律走 CSS 變數，深淺色都適用。 */
.site-footer { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.site-footer-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.site-footer-brand { max-width: 300px; }
.site-footer-brand .brand { margin: 0 0 8px; font-size: 16px; }
.site-footer-brand p { margin: 0; }
.site-footer-nav { display: flex; gap: 40px; }
.site-footer-col { display: grid; align-content: start; gap: 2px; }
.site-footer-col h2 { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--muted); }
.site-footer-col a { padding: 2px 0; color: var(--text); text-decoration: none; }
.site-footer-col a:hover { color: var(--accent); }
.site-footer-col a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.site-footer-base { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; }
.site-footer-age { margin-left: auto; padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; }
/* 頁尾的客服與頻道入口（AUR-287）：放在版權列，登入／註冊頁也看得到；圖示＋文字，
   點擊區至少 40px，手機寬度會自己換行，不另外開第三個連結欄（375px 會擠出右緣） */
.site-footer-contact { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 20px; }
.site-footer-contact > span { white-space: nowrap; }
.site-footer-channel { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--text); text-decoration: none; }
.site-footer-channel:hover { color: var(--accent); }
.site-footer-channel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.site-footer-channel svg { flex: none; }
/* 官方品牌色（AUR-287）：品牌色在兩個主題固定，圖示內的白色也不跟著深色模式反轉 */
.site-footer-line-mark { fill: var(--line-brand); }
.site-footer-telegram-mark { fill: var(--telegram-brand); }
.site-footer-mark-on { fill: var(--on-brand); }
/* 登入、忘記密碼與重設密碼的卡片頂端已經有品牌，頁尾不再重複一顆（AUR-153 審查意見） */
.box.auth .site-footer-brand { display: none; }
.box.auth .site-footer-nav { width: 100%; justify-content: space-between; gap: 24px; }
@media (max-width: 480px) {
  .site-footer { margin-top: 32px; }
  .site-footer-main { flex-direction: column; gap: 24px; }
  .site-footer-brand { max-width: none; }
  .site-footer-nav { width: 100%; justify-content: space-between; gap: 24px; }
}
.legal h2 { margin-top: 28px; }
.legal ol { padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 14px; display: block; overflow-x: auto; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.legal th { color: var(--muted); font-weight: 600; white-space: nowrap; }

.appeal-message { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--note-bg); padding: 12px 14px; border-radius: 8px; }
textarea { font: inherit; color: var(--text); background: var(--bg); padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; width: 100%; box-sizing: border-box; resize: vertical; }
.sanction-list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; }
.sanction-list li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
/* 邀請朋友（AUR-102）：代碼放大、等寬，複製按鈕在下面 */
.invite-card { max-width: 520px; margin-top: 20px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; }
.invite-card p { margin: 0; }
.invite-card .invite-code { margin: 8px 0 0; }
.invite-code code { font-size: 34px; font-weight: 700; letter-spacing: .18em; color: var(--accent); background: var(--note-bg); padding: 6px 14px; border-radius: 8px; }
.invite-count { font-size: 30px; color: var(--accent); }
.invite-card .invite-link { margin-top: 12px; overflow-wrap: anywhere; }
/* LINE 客服與 Telegram 綁定（AUR-240、AUR-277）：綁定代碼要看得清楚、好抄 */
.line-code, .telegram-code { margin: 12px 0 8px; }
.line-code code, .telegram-code code { display: inline-block; font-size: 34px; font-weight: 700; letter-spacing: .18em; color: var(--accent); background: var(--note-bg); padding: 6px 14px; border-radius: 8px; font-variant-numeric: tabular-nums; }
.line-steps, .telegram-steps { margin: 0 0 16px; padding-left: 20px; color: var(--muted); }
.line-steps li + li, .telegram-steps li + li { margin-top: 6px; }
.line-steps a, .telegram-steps a { color: var(--accent); }
.telegram-unbind { margin-top: 12px; }
/* 成功邀請與獎勵說明的寬度和上面的代碼卡一致，不要突然縮成 420px */
.invite-card ~ .settings { max-width: 520px; }
.panel.note p + p { margin-top: 8px; }
button.danger { background: var(--bad); color: var(--bg); }
/* 註冊流程（AUR-74）：分欄版面、三步進度、加大的表單。
   人體工學：控制項至少 48px 高、輸入框字 16px（iOS 不會自動放大）、單欄、標籤在上方、主按鈕全寬；
   心理學：讓人看到只有三步、說明為什麼要這筆資料、欄位離開時才提醒，而且說怎麼改 */
.box.signup { max-width: 880px; padding: 0; display: grid; grid-template-columns: 320px minmax(0, 1fr); align-content: start; overflow: hidden; }
.box.signup > noscript, .box.signup > .site-footer { grid-column: 1 / -1; margin: 0; padding: 20px 28px; }
.signup-aside { display: grid; align-content: start; gap: 20px; padding: 32px 28px; background: var(--note-bg); }
.signup-aside .brand { margin: 0; }
.signup-aside h2 { margin: 0; font-size: 22px; line-height: 1.4; }
.signup-aside ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 14px; }
.signup-aside li { display: flex; gap: 8px; align-items: baseline; }
.signup-aside li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); transform: translateY(-2px); }
.signup-main { padding: 32px 36px; min-width: 0; }
.signup-main h1 { margin: 0 0 4px; }
.signup-main h1:focus { outline: none; }
.signup-main .lead { margin: 0 0 20px; color: var(--muted); font-size: 15px; }
.signup-main .links { text-align: center; }
/* 註冊流程的登出（AUR-220）：收在內容區最下面的折疊選項。原本是一顆置中的框線按鈕，就貼在主按鈕
   正下方，誤按會結束 session、得重新登入才回得到這一步；現在預設只有一行灰字，點開才看到按鈕。 */
.signup-leave { margin: 32px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); text-align: center; }
.signup-leave summary { cursor: pointer; }
.signup-leave[open] summary { margin-bottom: 10px; }
.signup-leave p { margin: 0 0 10px; }
.signup-leave button { font-size: 13px; padding: 7px 14px; }
.steps { display: flex; gap: 6px; margin: 0 0 20px; padding: 0; list-style: none; }
.steps li { flex: 1; display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.steps li::before { content: ""; height: 4px; border-radius: 999px; background: var(--line); }
.steps li[aria-current], .steps li.done { color: var(--text); }
.steps li[aria-current] { font-weight: 600; }
.steps li[aria-current]::before, .steps li.done::before { background: var(--accent); }
.form-lg { gap: 18px; }
.form-lg label, .form-lg .field > label { font-size: 15px; color: var(--text); font-weight: 600; }
.form-lg label small, .form-lg .hint { font-weight: 400; color: var(--muted); font-size: 13px; }
.form-lg input[type=email], .form-lg input[type=password], .form-lg input[type=text] { min-height: 48px; font-size: 16px; font-weight: 400; }
.form-lg label.check { font-weight: 400; font-size: 14px; }
.form-lg label.check input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.form-lg button[type=submit] { width: 100%; min-height: 48px; font-size: 16px; }
/* Google 登入（AUR-195）：和主按鈕同寬同高，但用外框樣式；「或」只是分隔 */
.google-start { display: block; width: 100%; min-height: 48px; }
.line-start { display: block; width: 100%; min-height: 48px; margin-top: 8px; }
.or { margin: 16px 0 8px; color: var(--muted); font-size: 14px; text-align: center; }
/* 登入、忘記密碼、重設密碼（AUR-82）：面板在 form 外，手機寬度時按鈕跟表單的主按鈕一樣加大、全寬 */
@media (max-width: 480px) {
  .box.auth .panel button, .box.auth .panel .button { min-height: 48px; width: 100%; }
}
.field { display: grid; gap: 6px; }
/* 密碼：「顯示」取代「再輸入一次」，少打一次、看得到自己打了什麼。
   按鈕是眼睛圖示（AUR-96）：隱藏時是眼睛，顯示明碼後換成劃掉的眼睛 */
.password-field { position: relative; display: block; }
.password-field input { width: 100%; padding-right: 48px; }
.password-field .reveal { position: absolute; top: 4px; right: 4px; bottom: 4px; width: 40px; padding: 0; display: grid; place-items: center; border-radius: 6px; background: transparent; color: var(--muted); }
.password-field .reveal:hover { background: var(--note-bg); color: var(--accent); }
.password-field .reveal:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.password-field .reveal svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.password-field .reveal[aria-pressed=true] { color: var(--accent); }
.password-field .reveal[aria-pressed=true] .icon-show, .password-field .reveal[aria-pressed=false] .icon-hide { display: none; }
.req { display: flex; gap: 6px; align-items: center; margin: 0; font-size: 13px; color: var(--muted); }
.req::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 999px; border: 2px solid var(--control-line); }
.req[data-met=true] { color: var(--ok); }
.req[data-met=true]::before { border-color: var(--ok); background: var(--ok); }
/* 欄位錯誤：離開欄位才檢查；紅框加粗、欄位下方一句「怎麼改」，不只靠顏色 */
.form-lg input[aria-invalid=true] { border-color: var(--bad); border-width: 2px; padding: 9px 11px; }
.form-lg .password-field input[aria-invalid=true] { padding-right: 47px; }
.form-lg fieldset[aria-invalid=true] .gender-options span { border-color: var(--bad); }
.field-error { margin: 0; font-size: 13px; color: var(--bad); }
.field-error::before { content: "需要修正："; font-weight: 600; }
.field-error[hidden], .suggest[hidden], .field-warn[hidden] { display: none; }
.field-warn { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--note-bg); font-size: 13px; color: var(--text); }
.field-warn strong { color: var(--bad); }
/* 常見網域打錯（gmial.com、yahoo.com.t）時給建議，按一下就改好；只是建議，不擋送出 */
.suggest { margin: 0; font-size: 13px; color: var(--text); }
.suggest button { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
/* 出生日期：年、月、日三格數字，比原生日曆往回翻二十幾年快 */
fieldset.date-parts { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 6px; }
fieldset.date-parts legend, .form-lg fieldset.gender legend { padding: 0; margin-bottom: 6px; font-size: 15px; font-weight: 600; color: var(--text); }
.date-parts .parts { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; }
.date-parts .parts label { font-size: 13px; font-weight: 400; color: var(--muted); }
.date-parts input { width: 100%; min-height: 48px; font: inherit; font-size: 16px; color: var(--text); background: var(--bg); padding: 10px 12px; border: 1px solid var(--control-line); border-radius: 8px; font-variant-numeric: tabular-nums; }
.date-parts input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.date-parts input[aria-invalid=true] { border-color: var(--bad); border-width: 2px; padding: 9px 11px; }
.date-parts small, .form-lg fieldset.gender small { font-size: 13px; color: var(--muted); }
.form-lg .gender-options span { min-height: 56px; display: grid; place-items: center; font-size: 17px; }
.rule-hint { margin: 6px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--note-bg); font-size: 13px; color: var(--text); }
/* 驗證信頁（註冊第二步） */
.mail-sent { display: grid; gap: 14px; }
.mail-sent p { margin: 0; }
.mail-sent .addr { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--note-bg); font-weight: 600; overflow-wrap: anywhere; }
.mail-sent ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.mail-sent .resend { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.mail-sent .resend button { padding: 8px 14px; font-size: 14px; }
.mail-sent .form-status { margin: 0; }
@media (max-width: 720px) {
  .box.signup { grid-template-columns: 1fr; }
  .signup-aside { padding: 20px 16px 16px; gap: 8px; }
  .signup-aside h2, .signup-aside ul { display: none; }
  .signup-main { padding: 8px 16px 24px; }
  .box.signup > noscript, .box.signup > .site-footer { padding: 16px; }
}
/* 註冊第 4、5 步（AUR-77、AUR-41）：暱稱、2 到 6 張照片（第一張是頭像），再錄一段自拍影片給人工審核。
   樣式照設計系統的 PhotoUploader、SelfieVerify、VerificationStatus；淺色的底用 --note-bg */
.avail { margin: 0; font-size: 13px; display: flex; gap: 6px; align-items: center; }
.avail[hidden] { display: none; }
.avail::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 999px; background: currentColor; }
.avail[data-state=ok] { color: var(--ok); }
.avail[data-state=taken] { color: var(--bad); }
.avail[data-state=checking] { color: var(--muted); }
.photo-field { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 10px; }
.photo-field legend { padding: 0; margin-bottom: 6px; font-size: 15px; font-weight: 600; color: var(--text); }
.photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.photo-slot { position: relative; aspect-ratio: 4 / 5; border-radius: 12px; background: var(--note-bg); display: grid; place-items: center; color: var(--muted); }
.photo-slot img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.photo-slot .tag { position: absolute; top: 8px; left: 8px; padding: 0 8px; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-size: 12px; font-weight: 700; line-height: 22px; }
.photo-slot .num { position: absolute; top: 8px; left: 8px; min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--surface); color: var(--text); font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; }
/* 每格只放一顆「編輯」，選單裡才是設為頭像、往前移、移除：窄螢幕一格約 100px，放不下兩顆按鈕 */
.slot-menu { position: absolute; right: 6px; bottom: 6px; }
.slot-menu > summary { list-style: none; padding: 4px 10px; border: 1px solid var(--control-line); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; }
.slot-menu > summary::-webkit-details-marker { display: none; }
.slot-menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.slot-menu .menu { top: auto; bottom: calc(100% + 6px); width: 160px; padding: 6px; }
.slot-menu .menu button { width: 100%; text-align: left; font-size: 14px; padding: 8px 10px; }
button.photo-slot.add { width: 100%; padding: 0; border: 1px dashed var(--control-line); border-radius: 12px; background: var(--surface); color: var(--accent); font-size: 14px; }
button.photo-slot.add:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.photo-slot.uploading { font-size: 13px; font-weight: 600; }
.photo-slot .bar { position: absolute; left: 10px; right: 10px; bottom: 12px; height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; }
.photo-slot .bar span { display: block; width: 0; height: 100%; background: var(--accent); }
.photo-meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0; font-size: 13px; color: var(--muted); }
.avatar-preview { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.avatar-preview .who { display: grid; gap: 2px; min-width: 0; }
.avatar-preview .who strong { font-size: 15px; color: var(--text); overflow-wrap: anywhere; }
.avatar-preview .who span { font-size: 13px; color: var(--muted); }
/* 個人檔案設定頁（AUR-216）：先看到自己的頭像與照片，再編輯選填資料 */
.profile-preview { display: grid; gap: 10px; margin-bottom: 20px; }
.photo-strip { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; overflow-x: auto; }
.photo-strip li { flex: none; width: 56px; height: 70px; overflow: hidden; border-radius: 10px; background: var(--note-bg); }
.photo-strip img { display: block; width: 100%; height: 100%; object-fit: cover; }
.face { flex: none; width: 56px; height: 56px; border-radius: 999px; background: var(--note-bg); color: var(--muted); display: grid; place-items: center; font-weight: 700; overflow: hidden; }
.face img { width: 100%; height: 100%; object-fit: cover; }
.photo-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; font-size: 13px; }
.photo-rules > div { padding: 12px 14px; border-radius: 12px; background: var(--note-bg); }
.photo-rules h3 { margin: 0 0 6px; font-size: 13px; }
.photo-rules ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
/* 真人驗證：隨機的動作與數字，舊影片不能重複用；預覽框不加陰影，用臉部橢圓提示位置 */
.challenge { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--accent); border-radius: 12px; background: var(--surface); }
.challenge p { margin: 0; font-size: 14px; }
.challenge .code { font-size: 28px; font-weight: 700; letter-spacing: .3em; font-variant-numeric: tabular-nums; color: var(--accent); }
.challenge small { font-size: 12px; color: var(--muted); }
.verify-stack { display: grid; gap: 14px; }
.selfie-frame { position: relative; width: 100%; max-width: 340px; aspect-ratio: 3 / 4; margin: 0 auto; border-radius: 16px; overflow: hidden; background: var(--note-bg); display: grid; place-items: center; }
.selfie-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.selfie-frame video[hidden] { display: none; }
/* 自己的鏡頭預覽左右相反，比較好對位置；錄好的影片照原樣播放 */
.selfie-frame video.live { transform: scaleX(-1); }
.selfie-frame .oval { position: relative; width: 62%; aspect-ratio: 3 / 4; border: 3px dashed var(--accent); border-radius: 50%; }
/* 提示字壓在鏡頭畫面上，加底色才看得清楚 */
.selfie-frame .frame-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 2px 10px; border-radius: 999px; background: var(--surface); white-space: nowrap; font-size: 13px; color: var(--text); }
.selfie-frame .rec { position: absolute; top: 12px; left: 12px; display: inline-flex; gap: 6px; align-items: center; padding: 2px 10px; border-radius: 999px; background: var(--surface); color: var(--bad); font-size: 13px; font-weight: 700; }
.selfie-frame .rec[hidden], .selfie-frame .oval[hidden], .selfie-frame .frame-hint[hidden] { display: none; }
.selfie-frame .rec::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--bad); }
.verify-stack .row { margin-top: 0; justify-content: center; }
.verify-stack progress { width: 100%; accent-color: var(--accent); }
.tips { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
/* 審核狀態：審核中（note-bg）、通過、需要重錄（bad 邊框），都有完整的一句話 */
.status-card { display: grid; gap: 8px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.status-card h2 { margin: 0; font-size: 18px; }
.status-card p { margin: 0; font-size: 14px; }
.status-card.pending { background: var(--note-bg); border-color: var(--note-bg); }
.status-card.rejected { border-color: var(--bad); }
.status-card .reason { padding: 8px 10px; border-radius: 8px; background: var(--note-bg); }
.status-card .row { margin-top: 4px; }
/* 重大條款修訂的獨立同意頁（AUR-105）：說明這次新增的蒐集與保存方式 */
.consent-page { max-width: 720px; }
.consent-changes { display: grid; gap: 8px; margin: 0; padding-left: 20px; font-size: 14px; }
.consent-changes li { overflow-wrap: anywhere; }
.verified-badge { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; padding: 0 8px; border: 1px solid var(--ok); border-radius: 999px; color: var(--ok); font-size: 12px; font-weight: 700; line-height: 20px; }
.verified-badge::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--ok); }
.pending-bar { background: var(--note-bg); border-bottom: 1px solid var(--line); }
.pending-bar .inner { max-width: 960px; margin: 0 auto; padding: 10px 24px; display: flex; gap: 4px 12px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.pending-bar a { margin-left: auto; }
.account-menu .avatar img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 999px; object-fit: cover; }
@media (max-width: 480px) {
  .photo-grid { gap: 8px; }
  .selfie-frame { aspect-ratio: 1; }
  .selfie-frame .oval { width: 46%; }
  .photo-rules { grid-template-columns: 1fr; }
  .pending-bar .inner { padding: 10px 16px; }
}
.narrow { max-width: 560px; }
/* ===== 部落格（AUR-83、AUR-322）===== */
/* 列表頁：大標題、分類膠囊、最新一篇精選大卡，其餘排成卡片網格。
   顏色全部走主題 token，深色模式不需要另外覆寫。 */
.blog-hero { padding: 8px 0 32px; border-bottom: 1px solid var(--line); }
.blog-hero h1 { margin: 0; font-size: clamp(32px, 5vw, 48px); font-weight: 700; line-height: 1.2; }
.blog-intro { max-width: 40em; margin: 16px 0 0; color: var(--muted); font-size: 17px; line-height: 1.7; }
.blog-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; }
.blog-cats a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 14px; text-decoration: none; }
.blog-cats a:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }
.blog-cats a[aria-current="page"] { border-color: var(--accent); background: var(--accent); color: var(--accent-text); font-weight: 600; }
.blog-cats a:focus-visible, .blog-tag:focus-visible, .blog-featured h2 a:focus-visible, .blog-card h2 a:focus-visible, .blog-featured-more a:focus-visible, .blog-post-foot a:focus-visible, .breadcrumb a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.blog-list { margin-top: 32px; }
/* 精選大卡：桌機左圖右文，窄螢幕上下堆疊 */
.blog-featured { display: grid; grid-template-columns: 1fr; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.blog-featured-cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.blog-featured-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-featured-text { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; }
.blog-tag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 600; text-decoration: none; }
a.blog-tag:hover { background: var(--accent-line); }
.blog-featured h2 { margin: 0; font-size: clamp(24px, 3vw, 32px); line-height: 1.3; }
.blog-featured h2 a { color: var(--text); text-decoration: none; }
.blog-featured h2 a:hover { color: var(--accent); text-decoration: underline; }
.blog-featured-text > .blog-summary { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.blog-featured-text > .blog-featured-more { margin-top: auto; padding-top: 4px; }
.blog-featured-more a { color: var(--accent); font-size: 15px; font-weight: 600; text-decoration: none; }
.blog-featured-more a:hover { text-decoration: underline; }
.blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--muted); font-size: 13px; }
/* Unsplash 封面的出處（AUR-324）：API 條款要求標註攝影師，留成小字不搶版面 */
.blog-credit { margin: 0; color: var(--muted); font-size: 12px; }
.blog-credit a { color: inherit; }
.blog-credit a:hover { color: var(--accent); text-decoration: underline; }
/* 其餘文章：卡片網格，摘要與時間靠下對齊 */
.blog-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 20px; }
.blog-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.blog-card:hover, .blog-card:focus-within { border-color: var(--accent-line); }
.blog-card-cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--accent-soft); }
.blog-card-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 封面缺席時用淡粉底與點陣，不留下空白破版；中間放品牌的 M 標記。
   要放在封面規則後面，才能蓋掉 display: block 與 background 簡寫。 */
.blog-cover-empty { display: grid; place-items: center; background-color: var(--accent-soft); background-image: radial-gradient(var(--accent-line) 1px, transparent 1px); background-size: 18px 18px; color: var(--accent); }
.blog-cover-empty .brand-mark { width: 40px; height: 40px; opacity: .8; }
.blog-card-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; }
.blog-card h2 { margin: 0; font-size: 19px; line-height: 1.45; }
.blog-card h2 a { color: var(--text); text-decoration: none; }
.blog-card h2 a:hover { color: var(--accent); text-decoration: underline; }
.blog-card-body > .blog-summary { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.blog-card .blog-meta { margin-top: auto; padding-top: 4px; }
.blog-empty { margin-top: 32px; padding: 48px 20px; background: var(--surface); border: 1px dashed var(--control-line); border-radius: 12px; text-align: center; }
.blog-empty p { margin: 0; color: var(--muted); }
.blog-empty .button { margin-top: 16px; }
/* 分頁（AUR-323）：沒有 JS 時是普通連結；有 JS 時自動載入並整列藏起來 */
.blog-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 48px; }
.blog-pager .button { display: inline-flex; align-items: center; min-height: 44px; }
/* 有 JS 時整列藏起來（AUR-323 修正）：作者樣式的 display 會蓋過 [hidden]，要明寫 */
.blog-pager[hidden] { display: none; }
.blog-sentinel { height: 1px; }
.blog-status { margin: 16px 0 0; color: var(--muted); font-size: 14px; text-align: center; }
.blog-status:empty { display: none; }
@media (min-width: 720px) {
  .blog-featured { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .blog-featured-cover { height: 100%; aspect-ratio: auto; }
  .blog-featured-text { padding: 32px; }
  .blog-cover-empty .brand-mark { width: 48px; height: 48px; }
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 980px) {
  .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 文章頁：麵包屑與內文收在 760px，長文比較好讀 */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 16px; font-size: 14px; color: var(--muted); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--text); }
.blog-post .breadcrumb, .blog-article { max-width: 760px; margin-left: auto; margin-right: auto; }
.blog-post .breadcrumb { margin-bottom: 24px; }
.blog-post-head { margin-bottom: 24px; }
.blog-post-head h1 { margin: 12px 0 0; font-size: clamp(30px, 4.4vw, 42px); line-height: 1.3; }
.blog-post-lede { margin: 16px 0 0; color: var(--muted); font-size: 18px; line-height: 1.75; }
.blog-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 16px 0 0; color: var(--muted); font-size: 14px; }
.blog-post-cover { margin: 0 0 32px; overflow: hidden; border-radius: 12px; }
.blog-post-cover img { display: block; width: 100%; max-height: 420px; object-fit: cover; }
.blog-post-cover figcaption { padding: 8px 4px 0; color: var(--muted); font-size: 13px; }
.blog-post-cover figcaption a { color: inherit; }
.blog-post-cover figcaption a:hover { color: var(--accent); text-decoration: underline; }
.blog-post-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
/* 活動與文章共用的舊 .post-body 樣式，保留給活動／線下活動頁 */
.post-cover { width: 100%; max-height: 360px; object-fit: cover; border-radius: 8px; margin: 8px 0 20px; display: block; }
.post-body img { max-width: 100%; height: auto; border-radius: 8px; }
.post-body h2, .post-body h3 { margin: 24px 0 8px; }
.post-body code { background: var(--note-bg); padding: 1px 6px; border-radius: 6px; font-size: 0.9em; }
.post-body pre { background: var(--note-bg); padding: 12px; border-radius: 8px; overflow-x: auto; font-size: 0.9em; }
.post-body blockquote { border-left: 3px solid var(--control-line); margin: 8px 0; padding: 2px 14px; color: var(--muted); }
.post-body table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 14px; display: block; overflow-x: auto; }
.post-body th, .post-body td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); }
/* 文章頁的長文排版（AUR-322）：比共用內文大一點、行距寬一點 */
.blog-article .post-body { font-size: 18px; line-height: 1.85; overflow-wrap: anywhere; }
.blog-article .post-body > :first-child { margin-top: 0; }
.blog-article .post-body p { margin: 0 0 1.4em; }
.blog-article .post-body h1, .blog-article .post-body h2 { margin: 40px 0 16px; font-size: 28px; line-height: 1.4; }
.blog-article .post-body h3 { margin: 32px 0 12px; font-size: 21px; line-height: 1.45; }
.blog-article .post-body h4 { margin: 24px 0 8px; font-size: 18px; line-height: 1.5; }
.blog-article .post-body ul, .blog-article .post-body ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.blog-article .post-body li + li { margin-top: 6px; }
.blog-article .post-body a { text-underline-offset: 3px; }
.blog-article .post-body img { display: block; margin: 8px auto 24px; border-radius: 12px; }
.blog-article .post-body blockquote { margin: 24px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--accent); color: var(--muted); font-size: 1.05em; }
.blog-article .post-body blockquote p:last-child { margin-bottom: 0; }
.blog-article .post-body code { padding: 2px 6px; border-radius: 6px; }
.blog-article .post-body pre { margin: 0 0 1.4em; padding: 16px; border-radius: 12px; line-height: 1.6; }
.blog-article .post-body pre code { padding: 0; background: transparent; font-size: inherit; }
.blog-article .post-body table { margin: 0 0 24px; font-size: 15px; }
.blog-article .post-body th { background: var(--note-bg); font-weight: 600; }
.blog-article .post-body hr { margin: 32px 0; border: 0; border-top: 1px solid var(--line); }
.blog-article .post-body strong { font-weight: 600; }
/* 後台預覽（AUR-302）：直接沿用公開文章頁，上方加一條只有預覽看得到的提示 */
.preview-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; padding: 10px 24px; background: var(--accent-soft); border-bottom: 1px solid var(--accent-line); color: var(--accent-ink); font-size: 14px; }
.preview-bar a { color: inherit; font-weight: 600; text-decoration: underline; }
.preview-bar a:hover { color: var(--accent); }
.preview-bar a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
@media (max-width: 480px) {
  .blog-hero { padding-bottom: 24px; }
  .blog-featured-text, .blog-card-body { padding: 20px 16px; }
  .blog-post-head h1 { font-size: 30px; }
  .blog-post-lede { font-size: 16px; }
  .blog-post-cover img { max-height: 260px; }
  .blog-article .post-body { font-size: 17px; }
  .blog-article .post-body h1, .blog-article .post-body h2 { font-size: 24px; }
  .blog-article .post-body h3 { font-size: 20px; }
  .preview-bar { padding: 10px 16px; }
}
/* 訪客介紹頁（AUR-98）：頂部導覽固定在上方；窄螢幕把導覽與登入收進「選單」，「免費註冊」留在列上 */
.site-top { position: sticky; top: 0; z-index: 20; }
/* 主題切換（AUR-320）：導覽列、手機「選單」與頁尾共用。
   導覽列只留圖示（文字給螢幕閱讀器），其餘兩處圖示＋文字；按鈕至少 36px 高。 */
.theme-switch { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.theme-switch button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 4px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; line-height: 1.4; text-align: center; white-space: nowrap; cursor: pointer; }
.theme-switch button:hover { background: var(--note-bg); color: var(--text); }
.theme-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.theme-switch button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); }
.theme-switch svg { flex: none; }
.site-actions > .theme-switch .theme-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.site-actions > .theme-switch button { min-width: 34px; padding: 4px 8px; }
.site-menu .theme-switch { display: flex; width: 100%; margin: 2px 0; }
.site-menu .theme-switch button { flex: 1 1 auto; padding: 6px 4px; }
.site-menu .theme-switch .theme-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-footer-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-left: auto; }
.site-footer-tools .site-footer-age { margin-left: 0; }
.site-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.site-actions .button { padding: 6px 14px; font-size: 14px; }
.site-login { color: var(--text); text-decoration: none; font-size: 15px; }
.site-login:hover, .site-nav a:hover { color: var(--accent); }
.site-menu { position: relative; display: none; }
.site-menu > summary { list-style: none; padding: 5px 12px; border: 1px solid var(--control-line); border-radius: 999px; font-size: 14px; color: var(--text); cursor: pointer; }
.site-menu > summary::-webkit-details-marker { display: none; }
.site-menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.site-menu .menu { width: 240px; }
@media (max-width: 720px) {
  .site-nav, .site-login { display: none; }
  /* 窄螢幕把主題切換收進「選單」，避免和註冊鈕擠在同一列 */
  .site-actions > .theme-switch { display: none; }
  .site-menu { display: block; }
}
@media (max-width: 480px) {
  .site-actions { gap: 8px; }
}

/* ===== 訪客介紹頁（AUR-98；版面 AUR-245，參考 sugarbee.vip 的淺色粉色卡片風）=====
   整頁是白底＋淡粉色的段落，內容寬度交給 .lp-wrap。顏色只在這一頁用，所以變數掛在 .landing 上；
   深色模式換成同色系較暗的版本，文字對比在兩種模式都至少 4.5:1。
   大字用粗體無襯線字，和站內表單的節奏一致；卡片用 1px 邊框與留白建立層次，不用陰影。 */
.landing {
  --lp-paper: #fff; --lp-soft: #fdf7fa; --lp-card: #fff;
  --lp-ink: #241a1e; --lp-ink-soft: #6b5b63; --lp-line: #f0e3e8;
  --lp-accent: #c92a68; --lp-accent-soft: #fdf2f5; --lp-accent-line: #f3d3de; --lp-on-accent: #fff;
  --lp-deep: #5e1433; --lp-on-deep: #fdf2f5;
  --lp-on-photo: #fff; --lp-on-photo-soft: #f8e9ef; --lp-on-photo-ink: #241a1e;
  --lp-photo-line: rgba(255, 255, 255, .42); --lp-photo-pill: rgba(28, 10, 18, .58);
  --lp-photo-shadow: 0 2px 12px rgba(0, 0, 0, .35);
  --lp-veil: linear-gradient(90deg, rgba(20, 8, 14, .78) 0%, rgba(20, 8, 14, .5) 46%, rgba(20, 8, 14, .18) 100%), linear-gradient(180deg, rgba(20, 8, 14, .2) 0%, rgba(20, 8, 14, .38) 52%, rgba(20, 8, 14, .72) 100%);
  background: var(--lp-paper);
  color: var(--lp-ink);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .landing {
    --lp-paper: #171314; --lp-soft: #201a1c; --lp-card: #201a1c;
    --lp-ink: #ecebe6; --lp-ink-soft: #a2a19b; --lp-line: #3a2f33;
    --lp-accent: #f48fb1; --lp-accent-soft: #2e2528; --lp-accent-line: #5a3c47; --lp-on-accent: #171314;
    --lp-deep: #33101f; --lp-on-deep: #ecebe6;
    --lp-on-photo: #fff; --lp-on-photo-soft: #efe3e7; --lp-on-photo-ink: #241a1e;
    --lp-photo-line: rgba(255, 255, 255, .38); --lp-photo-pill: rgba(10, 6, 8, .62);
    --lp-photo-shadow: 0 2px 12px rgba(0, 0, 0, .35);
    --lp-veil: linear-gradient(90deg, rgba(8, 4, 6, .82) 0%, rgba(8, 4, 6, .55) 46%, rgba(8, 4, 6, .22) 100%), linear-gradient(180deg, rgba(8, 4, 6, .25) 0%, rgba(8, 4, 6, .42) 52%, rgba(8, 4, 6, .78) 100%);
  }
}
/* 手動深色（AUR-320）：值和上面的系統深色逐字相同 */
html[data-theme="dark"] .landing {
  --lp-paper: #171314; --lp-soft: #201a1c; --lp-card: #201a1c;
  --lp-ink: #ecebe6; --lp-ink-soft: #a2a19b; --lp-line: #3a2f33;
  --lp-accent: #f48fb1; --lp-accent-soft: #2e2528; --lp-accent-line: #5a3c47; --lp-on-accent: #171314;
  --lp-deep: #33101f; --lp-on-deep: #ecebe6;
  --lp-on-photo: #fff; --lp-on-photo-soft: #efe3e7; --lp-on-photo-ink: #241a1e;
  --lp-photo-line: rgba(255, 255, 255, .38); --lp-photo-pill: rgba(10, 6, 8, .62);
  --lp-photo-shadow: 0 2px 12px rgba(0, 0, 0, .35);
  --lp-veil: linear-gradient(90deg, rgba(8, 4, 6, .82) 0%, rgba(8, 4, 6, .55) 46%, rgba(8, 4, 6, .22) 100%), linear-gradient(180deg, rgba(8, 4, 6, .25) 0%, rgba(8, 4, 6, .42) 52%, rgba(8, 4, 6, .78) 100%);
}
.landing .topbar-inner { max-width: 1280px; padding-left: 40px; padding-right: 40px; }
.lp-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
/* 導覽列是 sticky，捲動時要蓋住底下的內容，所以用和頁面一樣的底色而不是透明 */
.landing .site-top { background: var(--lp-paper); border-bottom-color: var(--lp-line); }

/* hero：滿版照片、底部漸層，文字壓在左下角 */
.lp-hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(560px, 76vh, 780px); overflow: hidden; background: var(--lp-deep); }
.lp-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-hero::after { content: ""; position: absolute; inset: 0; background: var(--lp-veil); }
.lp-hero-inner { position: relative; z-index: 1; padding-top: 96px; padding-bottom: 80px; color: var(--lp-on-photo); }
.lp-hero-pill { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; padding: 6px 14px; border: 1px solid var(--lp-photo-line); border-radius: 999px; background: var(--lp-photo-pill); font-size: 13px; letter-spacing: .04em; color: var(--lp-on-photo); }
.lp-hero-pill span { flex: none; width: 6px; height: 6px; border-radius: 999px; background: var(--lp-accent); }
.lp-hero h1 { margin: 0; max-width: 16em; text-shadow: var(--lp-photo-shadow); text-wrap: balance; font-size: clamp(40px, 6.2vw, 80px); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; }
.lp-hero-lead { max-width: 34em; margin: 22px 0 0; font-size: clamp(16px, 1.7vw, 20px); line-height: 1.7; color: var(--lp-on-photo-soft); text-shadow: var(--lp-photo-shadow); text-wrap: pretty; }
.lp-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.lp-hero .button { padding: 14px 30px; border-radius: 12px; }
.lp-hero .button.secondary { background: var(--lp-on-photo); border-color: transparent; color: var(--lp-on-photo-ink); }
/* landing 的按鈕都用自己的圓角與 hover；focus ring 跟著所在底色換色 */
.lp-hero .button:hover, .lp-band .button:hover, .lp-role .button:hover, .lp-more .button:hover, .lp-final .button:hover { filter: brightness(.94); }
.lp-hero .button:focus-visible { outline: 2px solid var(--lp-on-photo); outline-offset: 3px; }
.lp-band .button:focus-visible, .lp-role .button:focus-visible, .lp-more .button:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 3px; }
.lp-final .button:focus-visible { outline: 2px solid var(--lp-on-deep); outline-offset: 3px; }
.lp-hero-note { margin: 18px 0 0; font-size: 14px; color: var(--lp-on-photo-soft); }
.lp-hero-note a { margin-left: 10px; color: var(--lp-on-photo); text-decoration: underline; text-underline-offset: 3px; }
.lp-hero-note a:hover { text-decoration-thickness: 2px; }
.lp-hero-note a:focus-visible { outline: 2px solid var(--lp-on-photo); outline-offset: 3px; border-radius: 2px; }
.lp-event { padding-top: 32px; }
.lp-event .event-banner { margin: 0; }

/* 段落：白底與淡粉底交錯；標題置中，卡片維持 1px 邊框 */
.lp-section { padding: 96px 0; }
.lp-section.soft { background: var(--lp-soft); }
.lp-sec-head { max-width: 920px; margin: 0 auto 48px; text-align: center; }
.lp-eyebrow { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--lp-accent); }
.lp-sec-head h2 { margin: 0; font-size: clamp(32px, 4.2vw, 52px); font-weight: 800; line-height: 1.16; letter-spacing: -.03em; text-wrap: balance; }
.lp-sec-head > p:last-child:not(.lp-eyebrow) { margin: 16px 0 0; color: var(--lp-ink-soft); font-size: 17px; }
.lp-grid { display: grid; gap: 20px; }
.lp-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp-card { min-width: 0; padding: 28px; background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: 12px; }
.lp-card h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.35; }
.lp-card p { margin: 0; color: var(--lp-ink-soft); font-size: 15.5px; line-height: 1.7; }
.lp-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 999px; background: var(--lp-accent-soft); color: var(--lp-accent); }
.lp-icon svg { width: 22px; height: 22px; }
.lp-pains-foot { margin: 40px 0 0; text-align: center; font-weight: 600; }
.lp-diff-card { border-top: 3px solid var(--lp-accent); }
.lp-index { display: block; margin-bottom: 28px; font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--lp-accent); }

/* 中間的 CTA 色帶 */
.lp-band { padding: 72px 0; background: var(--lp-accent-soft); border-top: 1px solid var(--lp-accent-line); border-bottom: 1px solid var(--lp-accent-line); text-align: center; }
.lp-band h2 { margin: 0; font-size: clamp(30px, 4vw, 48px); font-weight: 800; line-height: 1.16; letter-spacing: -.03em; text-wrap: balance; }
.lp-band p:not(.lp-eyebrow) { max-width: 40em; margin: 16px auto 0; color: var(--lp-ink-soft); font-size: 17px; }
.lp-band .button { margin-top: 26px; padding: 14px 30px; border-radius: 12px; }

/* 三段比較 */
.lp-compare { display: grid; gap: 16px; }
.lp-compare-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; padding: 28px 32px; background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: 12px; }
.lp-compare-item .lp-index { margin: 0; font-size: 24px; letter-spacing: 0; line-height: 1.2; }
.lp-compare-item h3 { margin: 0 0 8px; font-size: 21px; line-height: 1.4; }
.lp-compare-item p { margin: 0; color: var(--lp-ink-soft); font-size: 15.5px; line-height: 1.75; }

/* 會員角色：照片在上、說明在下 */
.lp-role { padding: 0; overflow: hidden; }
.lp-role > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; }
.lp-role-body { padding: 28px; }
.lp-role-tag { display: inline-block; margin-bottom: 14px; padding: 4px 12px; border-radius: 999px; background: var(--lp-accent-soft); color: var(--lp-accent); font-size: 13px; font-weight: 700; }
.lp-role h3 { margin: 0 0 10px; font-size: 24px; line-height: 1.35; }
.lp-role ul { display: grid; gap: 10px; margin: 20px 0 24px; padding: 0; list-style: none; }
.lp-role li { display: flex; align-items: flex-start; gap: 10px; color: var(--lp-ink-soft); font-size: 15px; line-height: 1.6; }
.lp-check { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--lp-accent); }
.lp-role .button { padding: 12px 22px; border-radius: 12px; }

/* 部落格卡片 */
.lp-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lp-post { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.lp-post-cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--lp-accent-soft); }
.lp-post-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-post-cover-empty { display: grid; place-items: center; background-color: var(--lp-accent-soft); background-image: radial-gradient(var(--lp-accent-line) 1px, transparent 1px); background-size: 18px 18px; color: var(--lp-accent); }
.lp-post-cover-empty .brand-mark { width: 44px; height: 44px; opacity: .72; }
.lp-post-body { display: flex; flex: 1; flex-direction: column; padding: 24px; }
.lp-post-body h3 { margin: 0 0 10px; font-size: 19px; line-height: 1.45; }
.lp-post-body h3 a { color: var(--lp-ink); text-decoration: none; }
.lp-post-body h3 a:hover { color: var(--lp-accent); text-decoration: underline; }
.lp-post-body h3 a:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 3px; border-radius: 2px; }
.lp-post-meta { margin: auto 0 0; padding-top: 18px; color: var(--lp-ink-soft); font-size: 13px; }
.lp-post-credit { margin: 6px 0 0; color: var(--lp-ink-soft); font-size: 12px; }
.lp-post-credit a { color: inherit; }
.lp-post-credit a:hover { color: var(--lp-accent); text-decoration: underline; }
.lp-more { margin: 32px 0 0; text-align: center; }
.lp-more .button { border-radius: 12px; }

/* 加入流程：CSS counter 畫圓形步驟號碼 */
.lp-step-list { counter-reset: lp-step; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; margin: 0; padding: 0; }
.lp-step-list li { padding: 28px 24px; background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: 12px; }
.lp-step-list li::before { counter-increment: lp-step; content: counter(lp-step); display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 20px; border-radius: 999px; background: var(--lp-accent); color: var(--lp-on-accent); font-size: 16px; font-weight: 700; }
.lp-step-list strong { display: block; margin-bottom: 6px; font-size: 17px; }
.lp-step-list span { color: var(--lp-ink-soft); font-size: 14.5px; }

/* 誠實的數字列：只用查得到的事實 */
.lp-facts { padding: 0 0 96px; }
.lp-facts-inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lp-fact { padding: 32px 24px; background: var(--lp-soft); border: 1px solid var(--lp-line); border-radius: 12px; text-align: center; }
.lp-fact strong { display: block; font-size: clamp(28px, 3.4vw, 44px); font-weight: 800; line-height: 1.2; color: var(--lp-accent); letter-spacing: -.02em; }
.lp-fact span { display: block; margin-top: 8px; color: var(--lp-ink-soft); font-size: 14px; }

/* FAQ：<details> 手風琴，不靠 JS */
.lp-faq-list { max-width: 880px; margin: 0 auto; border-top: 1px solid var(--lp-line); }
.lp-faq-list details { border-bottom: 1px solid var(--lp-line); }
.lp-faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; font-size: 17px; font-weight: 600; cursor: pointer; list-style: none; }
.lp-faq-list summary::-webkit-details-marker { display: none; }
.lp-faq-list summary::after { content: "+"; flex: none; color: var(--lp-accent); font-size: 24px; font-weight: 400; line-height: 1; }
.lp-faq-list details[open] summary::after { content: "−"; }
.lp-faq-list summary:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; border-radius: 2px; }
.lp-faq-list p { margin: 0 0 22px; padding-right: 44px; color: var(--lp-ink-soft); font-size: 15.5px; line-height: 1.75; }
.lp-faq-list p a { color: var(--lp-accent); }

/* 頁尾前的最後 CTA */
.lp-final { padding: 96px 0; background: var(--lp-deep); color: var(--lp-on-deep); text-align: center; }
.lp-final h2 { margin: 0; font-size: clamp(36px, 5vw, 60px); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
.lp-final p { max-width: 36em; margin: 16px auto 0; color: var(--lp-on-deep); }
.lp-final-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.lp-final .button { padding: 14px 30px; border-radius: 12px; background: var(--lp-on-deep); color: var(--lp-deep); }
.lp-final .button.secondary { background: transparent; border-color: var(--lp-on-deep); color: var(--lp-on-deep); }
.lp-footer { background: var(--lp-soft); border-top: 1px solid var(--lp-line); }
.lp-footer .site-footer { margin: 0; padding: 56px 0 32px; border-top: 0; }

@media (max-width: 1024px) {
  .lp-grid-3, .lp-grid-4, .lp-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .lp-grid-2, .lp-posts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .landing .topbar-inner, .lp-wrap { padding-left: 16px; padding-right: 16px; }
  .landing .topbar-inner { padding-top: 12px; padding-bottom: 12px; }
  .lp-hero { min-height: 620px; }
  .lp-hero-inner { padding-top: 72px; padding-bottom: 56px; }
  .lp-hero h1 { font-size: clamp(36px, 10vw, 52px); }
  .lp-hero-actions .button { flex: 1 1 100%; }
  .lp-hero-note a { display: inline-block; margin: 8px 0 0; }
  .lp-section { padding: 64px 0; }
  .lp-sec-head { margin-bottom: 32px; }
  .lp-sec-head h2 { font-size: 30px; }
  .lp-band h2 { font-size: 28px; }
  .lp-grid-3, .lp-grid-4, .lp-facts-inner { grid-template-columns: minmax(0, 1fr); }
  .lp-card, .lp-role-body { padding: 24px; }
  .lp-role { padding: 0; }
  .lp-compare-item { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 24px; }
  .lp-band { padding: 56px 0; }
  .lp-band .button { width: 100%; }
  .lp-facts { padding-bottom: 64px; }
  .lp-faq-list p { padding-right: 0; }
  .lp-final { padding: 64px 0; }
  .lp-final .button { flex: 1 1 100%; }
  .lp-footer .site-footer { padding: 40px 0 24px; }
}
@media (max-width: 480px) {
  .lp-hero h1 { font-size: 36px; }
  .lp-step-list { grid-template-columns: minmax(0, 1fr); }
}

/* 首頁女神卡牌（AUR-113）：寬度走 auto-fill 的建議值，高度拉到 3:4 以上，頭像 cover 填滿 */
.home-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 16px; }
.home-head h1 { margin: 0; }
.gcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.gcard { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
/* 照片高度固定的關鍵（AUR-151）：.gcard 是 flex 直排，照片是 flex item。flex item 的 flex-basis 是 auto，
   會拿圖片本身的內在高度當基礎，aspect-ratio 就醫不住——直式照片會把卡牌抽高，同一排就高矮不一。
   所以照片不吃 flex 的高度（flex: none），圖片改絕對定位，盒子高度只能由 aspect-ratio 決定 */
.gcard-photo { position: relative; display: block; flex: none; aspect-ratio: 3 / 4; background: var(--note-bg); }
/* 頭框（AUR-353）：照片容器上的 9-slice SVG；pointer-events:none，不擋照片連結與按鈕。
   border-image 的角落固定、邊緣拉伸，160px 卡牌到全螢幕探索都不會把角落拉變形。
   z-index 設在照片與按鈕之間；按鈕、在線標籤與 focus ring 要在更上層。 */
.avatar-frame {
  --frame-width: clamp(5px, 1.5vw, 8px);
  --frame-url: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  border: var(--frame-width) solid transparent;
  border-image-source: var(--frame-url);
  border-image-slice: 24;
  border-image-width: var(--frame-width);
  border-image-repeat: stretch;
  border-radius: inherit;
  pointer-events: none;
}
/* 照片載入前的 BlurHash 底色（AUR-186）：web.js 把 hash 解成 32×32 的圖當背景，圖片到了自然蓋住。
   刻意不加 blur() 濾鏡與放大，捲動時沒有額外的合成成本；沒有 JS 時維持原本的 --note-bg 灰底 */
.gcard-blur { position: absolute; inset: 0; background-position: center; background-size: cover; }
.gcard-photo img, .gcard-photo video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* 照片是連到個人頁的連結；愛心與播放鍵（AUR-167）疊在上面，所以連結用絕對定位鋪滿底層 */
.gcard-link { position: absolute; inset: 0; display: block; }
.gcard-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* 框疊在照片上時，把 focus ring 畫在卡牌外框，鍵盤使用者才看得到 */
.gcard:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.gcard-initial { position: absolute; inset: 0; display: grid; place-items: center; font-size: 56px; font-weight: 700; color: var(--muted); }
/* 卡片上只有照片（AUR-176）：沒有錯誤訊息時就只佔照片的高度，整排卡牌才會一樣高 */
.gcard > .form-error { margin: 8px 12px 12px; }
/* 照片左下角的資訊（AUR-176）：名字＋徽章、年齡/縣市、第三行。
   文字貼齊照片底部（AUR-181：愛心與語音移到右上，不再需要墊高），右側留出 56px 給
   右下角的愛心（AUR-348），名字、年齡與第三行都不會被按鈕蓋住；整塊不吃滑鼠，
   點空白處仍走照片連結 */
.gcard-overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; gap: 2px; padding: 36px 56px 12px 10px; background: linear-gradient(to top, rgba(17, 17, 17, .82), rgba(17, 17, 17, .45) 55%, transparent); color: #fff; pointer-events: none; }
.gcard-overlay .gcard-name { pointer-events: auto; }
.gcard-overlay .gcard-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.gcard-meta { margin: 0; font-size: 12px; color: rgba(255, 255, 255, .86); font-variant-numeric: tabular-nums; }
/* 跑馬燈：文字比格子寬時才由 web.js 加上 .is-scrolling；兩份同樣的文字接續捲動 */
.gcard-bio { margin: 0; overflow: hidden; font-size: 12px; color: rgba(255, 255, 255, .82); }
/* 技能標籤（AUR-332）：接在 bio 跑馬燈後面，不新增第四行；實心表面在照片上才讀得清楚 */
.gcard-skill {
  display: inline-block;
  width: max-content;
  justify-self: start;
  margin-left: 8px;
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
  vertical-align: 1px;
}
.gcard-bio-track { display: flex; width: max-content; }
/* 每一份複本自己帶尾端間距：track 寬度剛好是兩份，translateX(-50%) 才會無縫接回去 */
.gcard-bio-track > span { padding-right: 24px; }
.gcard-bio-track > span + span { display: none; }
.gcard-bio.is-scrolling .gcard-bio-track > span + span { display: inline; }
.gcard-bio.is-scrolling .gcard-bio-track { animation: gcard-bio-scroll var(--bio-duration, 12s) linear infinite; }
.gcard:hover .gcard-bio.is-scrolling .gcard-bio-track,
.gcard:focus-within .gcard-bio.is-scrolling .gcard-bio-track { animation-play-state: paused; }
@keyframes gcard-bio-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* 名字在照片上（AUR-176）：卡牌只剩照片一段，所有卡牌高度才會一致 */
.gcard-name { display: flex; align-items: center; gap: 4px; min-width: 0; font-weight: 600; color: #fff; text-decoration: none; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.gcard-nick { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge-verified { display: inline-flex; flex: none; color: var(--accent); }
/* 照片上的符號改成白色，深色漸層上才看得清楚（AUR-176） */
.gcard-overlay .badge-verified { color: #fff; }
/* 在線：綠點加文字（不只靠顏色辨認） */
.presence { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.presence .dot { width: 9px; height: 9px; border-radius: 999px; background: var(--ok); box-shadow: 0 0 0 2px var(--surface); }
.gcard-photo .presence { position: absolute; left: 10px; top: 10px; padding: 3px 8px 3px 6px; border-radius: 999px; background: var(--surface); color: var(--text); pointer-events: none; }
/* 卡牌右上角的語音播放鍵（AUR-167、AUR-181）：疊在照片上，不佔卡牌高度，整排卡牌的高度才一致。
   在線標籤在左上，兩者不會重疊；z-index 比左下角的文字區高，按鈕才不會被漸層蓋住 */
.gcard-actions { position: absolute; right: 10px; top: 10px; z-index: 3; display: flex; align-items: center; gap: 6px; }
/* 卡牌右下角的愛心（AUR-348）：文字區右側已留白，按鈕不會蓋住名字、年齡與第三行 */
.gcard-heart { position: absolute; right: 10px; bottom: 10px; z-index: 3; }
/* 窄卡（≤380px）時在線標籤只留綠點（文字仍給螢幕閱讀器；AUR-181） */
@media (max-width: 380px) {
  .gcard-photo .presence-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.gcard-heart, .gcard-voice { flex: none; width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 999px; background: rgba(17, 17, 17, .55); color: #fff; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.gcard-heart:hover, .gcard-voice:hover { background: rgba(17, 17, 17, .74); }
.gcard-heart:focus-visible, .gcard-voice:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gcard-heart:disabled, .gcard-voice:disabled { opacity: .6; cursor: not-allowed; }
.gcard-heart svg, .gcard-voice svg { width: 18px; height: 18px; }
.gcard-heart.is-liked { background: var(--accent); color: var(--accent-text); }
.gcard-heart.is-liked .heart-icon { fill: currentColor; animation: heart-pop .32s ease; }
.gcard-voice .i-pause { display: none; }
.gcard-voice.is-playing .i-play { display: none; }
.gcard-voice.is-playing .i-pause { display: block; }
/* 錯誤訊息只在有內容時出現，避免空白的 <p> 把卡牌多撐出一行 */
.gcard .form-error:empty { display: none; }
.gcard-error { font-size: 12px; }
.more-row { display: flex; justify-content: center; margin: 24px 0 8px; }
.empty-state { text-align: center; }
/* 個人頁（AUR-130、AUR-140）：左邊照片輪播＋dot＋縮圖＋動作列，右邊資訊卡；手機寬度照片先、資訊卡後 */
.profile-page { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, .95fr); gap: 32px; align-items: start; }
/* 自己的個人頁（AUR-216）：說清楚這是預覽，動作改成編輯入口 */
.self-note { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--accent-line); border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); font-size: 14px; }
.self-note strong { color: var(--text); }
.actions .self-edit { flex: 0 0 auto; }
.media { min-width: 0; }
.photo-carousel { position: relative; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; background: var(--note-bg); border: 1px solid var(--line); }
.photo-carousel .gcard-initial { position: absolute; inset: 0; display: grid; place-items: center; font-size: 56px; font-weight: 700; color: var(--muted); }
.photo-track { position: absolute; inset: 0; display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.photo-track::-webkit-scrollbar { display: none; }
.photo-track:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* 框疊在照片上時，把 focus ring 畫在輪播外框 */
.photo-carousel:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.photo-slide { flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.photo-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 動態頭像（AUR-149）：和照片一樣填滿第一格，沒有控制列（循環短片、無聲） */
.photo-slide video { display: block; width: 100%; height: 100%; object-fit: cover; background: #111; }
.photo-count { position: absolute; top: 12px; right: 12px; z-index: 3; padding: 4px 10px; border-radius: 999px; background: rgba(17, 17, 17, .58); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; backdrop-filter: blur(6px); }
.photo-presence { position: absolute; left: 12px; top: 12px; z-index: 3; padding: 4px 10px 4px 8px; border-radius: 999px; background: var(--surface); color: var(--text); }
.photo-nav { position: absolute; top: 50%; z-index: 3; width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 999px; background: rgba(17, 17, 17, .52); color: #fff; cursor: pointer; opacity: 0; transform: translateY(-50%); transition: opacity .18s ease; }
.photo-nav.prev { left: 12px; }
.photo-nav.next { right: 12px; }
.photo-carousel:hover .photo-nav:not(:disabled), .photo-nav:not(:disabled):focus-visible { opacity: 1; }
.photo-nav:disabled { opacity: 0; pointer-events: none; }
.photo-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.photo-dots { display: flex; align-items: center; justify-content: center; gap: 2px; margin-top: 8px; }
.photo-dot { width: 26px; height: 26px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 999px; background: transparent; cursor: pointer; }
.photo-dot::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--accent-line); transition: width .18s ease, background .18s ease; }
.photo-dot.is-active::before { width: 20px; background: var(--accent); }
.photo-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
@media (max-width: 760px), (hover: none) { .photo-nav { display: none; } }
.thumbs { display: flex; gap: 10px; margin-top: 12px; }
.thumb { flex: none; position: relative; width: 64px; height: 80px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 12px; background: var(--note-bg); opacity: .72; cursor: pointer; }
/* 動態頭像那一格（AUR-173）：縮圖上放播放圖示，和重複出現的第一張照片區分 */
.thumb-play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(17, 17, 17, .32); color: #fff; pointer-events: none; }
.thumb-play svg { width: 20px; height: 20px; }
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { opacity: 1; }
.thumb.is-active { border-color: var(--accent); opacity: 1; }
.thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.profile-card { position: sticky; top: 20px; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.eyebrow { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.profile-card h1 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 34px; line-height: 1.15; letter-spacing: -.02em; }
.profile-card h1 .badge-verified svg { width: 22px; height: 22px; }
.meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.meta-sep { color: var(--line); }

/* 技能標籤（AUR-332）：不標價，只顯示技能、說明與進行方式；CTA 開既有聊天室 */
.skill-card { margin-top: 20px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--note-bg); }
.skill-card h2 { margin: 0; font-size: 18px; line-height: 1.3; }
.skill-desc { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.skill-card .chips { margin: 12px 0 0; }
.skill-card .chat-cta { margin-top: 12px; }
.skill-card .link-button { margin-top: 10px; }
/* 技能自我介紹：只有女生有 ready 錄音時才 render */
.voice-card { position: relative; margin-top: 20px; padding: 16px; border: 1px solid var(--accent-line); border-radius: 16px; background: var(--accent-soft); overflow: hidden; }
.voice-card::after { content: ""; position: absolute; top: -56px; right: -44px; width: 132px; height: 132px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 70%); pointer-events: none; }
.voice-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; }
.voice-mic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--accent-line); border-radius: 50%; background: var(--surface); color: var(--accent); }
.voice-copy { flex: 1; min-width: 0; }
.voice-kicker { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--accent-ink); }
.voice-title { margin: 2px 0 0; font-size: 15px; font-weight: 600; color: var(--text); }
.voice-duration { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.voice-player { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.voice-play { flex: none; width: 48px; height: 48px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--accent); color: var(--accent-text); cursor: pointer; }
.voice-play:hover { filter: brightness(1.05); }
.voice-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.voice-play svg { width: 22px; height: 22px; }
.voice-play .i-pause { display: none; }
.voice-card.is-playing .voice-play .i-play { display: none; }
.voice-card.is-playing .voice-play .i-pause { display: block; }
.wave { flex: 1; min-width: 0; height: 34px; display: flex; align-items: center; gap: 3px; }
.wave span { flex: 1; max-width: 4px; min-width: 2px; border-radius: 999px; background: var(--accent-line); }
.wave span.on { background: var(--accent); }
.voice-time { flex: none; min-width: 32px; text-align: right; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.voice-track { height: 3px; margin-top: 12px; border-radius: 999px; background: var(--accent-line); overflow: hidden; }
.voice-track span { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--accent); }
.voice-error { margin: 8px 0 0; font-size: 12px; }
/* 動作列固定在畫面底部（AUR-266）：照片比一個畫面高，桌機在左欄 sticky，捲動時貼著畫面底部，捲到原位就回去；手機見下面的 760px 區塊 */
.profile-cta { position: sticky; bottom: 0; z-index: 2; margin-top: 8px; padding: 12px 0; background: var(--bg); }
.actions { display: flex; align-items: stretch; gap: 10px; margin-top: 22px; }
.profile-cta .actions { margin-top: 0; }
.actions .voice-quick { flex: 0 0 48px; }
.actions .chat-cta { flex: 1 1 auto; width: auto; min-width: 0; }
.actions .heart { flex: 0 0 56px; width: 56px; min-width: 56px; min-height: 48px; margin-left: auto; padding: 0; }
.voice-quick { width: 48px; min-height: 48px; padding: 0; display: grid; place-items: center; border: 1px solid var(--accent-line); border-radius: 12px; background: var(--surface); color: var(--accent); cursor: pointer; }
.voice-quick:hover { background: var(--accent-soft); }
.voice-quick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.voice-quick svg { width: 20px; height: 20px; }
.voice-quick .i-pause { display: none; }
.voice-quick.is-playing .i-play { display: none; }
.voice-quick.is-playing .i-pause { display: block; }
.voice-quick:disabled { opacity: .5; cursor: not-allowed; }
.chat-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 18px; border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-text); font-size: 16px; font-weight: 600; text-align: center; cursor: pointer; }
.chat-cta:hover { filter: brightness(1.05); }
.chat-cta:focus-visible, .heart:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.heart { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 64px; padding: 13px 16px; border: 1px solid var(--accent-line); border-radius: 12px; background: var(--surface); color: var(--accent); font-size: 16px; font-weight: 700; cursor: pointer; }
.heart:hover { background: var(--accent-soft); }
.heart.is-liked { border-color: var(--accent); background: var(--accent); color: var(--accent-text); }
.heart-icon { width: 22px; height: 22px; }
.heart.is-liked .heart-icon { fill: currentColor; animation: heart-pop .32s ease; }
@keyframes heart-pop { 0% { transform: scale(.78); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .photo-dot::before, .photo-nav { transition: none; }
  .heart.is-liked .heart-icon, .gcard-heart.is-liked .heart-icon { animation: none; }
  /* 跑馬燈（AUR-176）：JS 不會加 .is-scrolling，這裡再擋一層，殘留的 class 也不動 */
  .gcard-bio.is-scrolling .gcard-bio-track { animation: none; }
}

/* 個人頁的選填資料（AUR-130）：自我介紹、興趣、身高；留空的整段不 render */
.profile-facts { margin-top: 16px; display: grid; gap: 12px; }
.profile-bio { margin: 0; font-size: 15px; line-height: 1.7; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.profile-height { margin: 0; font-size: 14px; color: var(--muted); }
.profile-height strong { color: var(--text); font-variant-numeric: tabular-nums; }
.profile-page .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.profile-page .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--accent-line); border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; font-weight: 600; }
.profile-page .chips .chip { background: var(--surface); color: var(--text); border-color: var(--line); font-weight: 500; }
/* 站方標記（後台設成公開的標籤，例如「放鳥仔」）：用警示色和興趣區分 */
.profile-page .chips.site-tags .chip { border-color: var(--bad); color: var(--bad); font-weight: 600; }

/* 個人檔案設定頁 */
.profile-fields { display: grid; gap: 20px; }
.profile-fields label { display: grid; gap: 6px; font-weight: 600; }
.profile-fields small { font-weight: 400; font-size: 12px; color: var(--muted); }
.profile-fields textarea, .profile-fields input[type="number"] { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); }
.profile-fields textarea { resize: vertical; min-height: 132px; }
.profile-fields .interests { margin: 0; padding: 0; border: 0; }
.profile-fields legend { padding: 0 0 10px; font-weight: 600; }
.profile-fields .chips { margin: 0; }
.profile-fields .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--accent-line); border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; }
.profile-fields .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.profile-fields .chip:has(input:checked) { border-color: var(--accent); background: var(--accent); color: var(--accent-text); }
.profile-fields .chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 技能標籤設定（AUR-332）：section 內再一個 form，欄位間距與既有表單一致 */
.skill-settings { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.skill-settings form { display: grid; gap: 20px; }
.skill-settings select { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); }
.skill-settings label.check { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; font-size: 13px; line-height: 1.5; }
.skill-settings .skill-status { margin: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 13px; color: var(--text); }
.skill-settings h2 { margin: 0; font-size: 22px; }
.card-foot { display: flex; flex-wrap: wrap; gap: 6px; margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }

/* 語音設定頁 */
.voice-editor { display: grid; gap: 16px; }
.voice-current, .voice-record { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.voice-current-label { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.voice-current audio, .voice-record audio { width: 100%; }
.voice-record-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.voice-timer { color: var(--muted); font-variant-numeric: tabular-nums; }
.voice-upload { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.voice-upload input { font: inherit; color: var(--text); }
.voice-upload small { font-size: 12px; }

/* 動態頭像設定頁（AUR-149）：和語音同一個排版，影片用 3:4 直立預覽 */
.motion-editor { display: grid; gap: 16px; }
.motion-current, .motion-upload { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.motion-current video, .motion-upload video { width: 100%; max-width: 320px; aspect-ratio: 3 / 4; border-radius: 12px; background: #111; object-fit: cover; }
.motion-buy { display: grid; gap: 10px; justify-items: start; margin-top: 16px; padding: 16px; border: 1px solid var(--accent-line); border-radius: 12px; background: var(--accent-soft); }
.motion-buy p { margin: 0; }
.motion-buy button { min-width: 220px; }

@media (max-width: 640px) {
  .gcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 760px) {
  .profile-page { grid-template-columns: 1fr; gap: 20px; }
  .profile-card { position: static; padding: 20px; border-radius: 16px; }
  .photo-carousel { border-radius: 16px; }
  .thumbs { overflow-x: auto; padding: 2px 0 4px; }
  .thumb { width: 56px; height: 70px; }
  .profile-card h1 { font-size: 28px; }
  .actions { gap: 8px; }
  .chat-cta { padding: 12px 14px; }
  /* 單欄時資訊卡在左欄之後，sticky 會在看資訊卡時離開畫面，所以改成固定在畫面底部；頁尾留出同樣高度不被擋住。
     留白算進一行錯誤或配對訊息（動作列會跟著長高）；scroll-padding 讓 Tab 移到的元素不會停在動作列後面 */
  .profile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; margin: 0; padding: 12px max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); border-top: 1px solid var(--line); background: var(--surface); }
  body:has(.profile-cta) .app { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
  html:has(.profile-cta) { scroll-padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
}

/* ===== 活動專區（AUR-135）===== */
/* 首頁、會員大廳與定價頁共用的橫幅；沒有圖時只顯示文字，不留下半個空格 */
.event-banner {
  margin: 0 0 28px; padding: 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
}
.event-banner.has-image { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.event-banner-media { min-height: 100%; background: var(--note-bg); }
.event-banner-media img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.event-banner-body { display: grid; align-content: start; gap: 8px; padding: 24px; }
.event-kicker { margin: 0; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.event-banner-body h2 { margin: 0; font-size: 22px; line-height: 1.35; }
.event-banner-body h2 a { color: var(--text); text-decoration: none; }
.event-banner-body h2 a:hover { color: var(--accent); text-decoration: underline; }
.event-banner-body .button { justify-self: start; margin-top: 6px; }
.event-banner-body p { margin: 0; }
.event-summary { color: var(--muted); font-size: 14.5px; }
.event-when { color: var(--muted); font-size: 13px; }
.event-status {
  display: inline-block; justify-self: start; margin: 0;
  padding: 1px 9px; border-radius: 999px;
  background: var(--note-bg); color: var(--muted);
  font-size: 12px; font-weight: 700; line-height: 20px;
}
.event-status.is-active { color: var(--accent); }
.event-status.is-upcoming { color: var(--ok); }
.event-section { margin: 0 0 36px; }
.event-section > h2 { margin: 0 0 14px; font-size: 20px; }
.event-list { display: grid; gap: 16px; }
.event-card { display: grid; grid-template-columns: 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.event-card.has-image { grid-template-columns: 240px 1fr; align-items: stretch; }
.event-card-cover { display: block; background: var(--note-bg); }
.event-card-cover img { display: block; width: 100%; height: 100%; min-height: 150px; object-fit: cover; }
.event-card-body { display: grid; gap: 6px; padding: 16px; align-content: start; }
.event-card-body p { margin: 0; }
.event-card h3 { margin: 0; font-size: 18px; line-height: 1.4; }
.event-card h3 a { color: var(--text); text-decoration: none; }
.event-card h3 a:hover { color: var(--accent); text-decoration: underline; }
.event-cta { margin: 24px 0 8px; }
@media (max-width: 640px) {
  .event-banner.has-image { grid-template-columns: 1fr; }
  .event-banner-media img { aspect-ratio: 16 / 7; }
  .event-banner-body { padding: 18px; }
  .event-card.has-image { grid-template-columns: 1fr; }
  .event-card-cover img { aspect-ratio: 16 / 7; min-height: 0; }
}

/* ===== 線下活動（AUR-160）===== */
/* 歷年活動回顧：列表依年份分組，卡片固定封面比例；詳情頁的重點資訊列沿用 --note-bg，不加陰影 */
.activity-year { margin: 0 0 36px; }
.activity-year > h2 { margin: 0 0 14px; font-size: 20px; }
.activity-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.activity-card { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.activity-cover { display: block; background: var(--note-bg); }
.activity-cover img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.activity-card-body { display: grid; gap: 6px; padding: 16px; align-content: start; }
.activity-card-body p { margin: 0; }
.activity-date { margin: 0; color: var(--accent); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.activity-card h3 { margin: 0; font-size: 18px; line-height: 1.4; }
.activity-card h3 a { color: var(--text); text-decoration: none; }
.activity-card h3 a:hover { color: var(--accent); text-decoration: underline; }
.activity-summary { color: var(--muted); font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.activity-meta { color: var(--muted); font-size: 13px; }
.activity-head { margin-bottom: 18px; }
.activity-head h1 { margin: 4px 0 8px; }
.activity-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 0 0 20px; padding: 14px 16px; background: var(--note-bg); border-radius: 12px; }
.activity-facts div { display: grid; gap: 2px; }
.activity-facts dt { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.activity-facts dd { margin: 0; font-size: 15px; }
.activity-photos { margin-top: 32px; }
.activity-photos > h2 { margin: 0 0 12px; font-size: 20px; }
.activity-gallery { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.activity-photo { display: block; overflow: hidden; border-radius: 10px; background: var(--note-bg); }
.activity-photo img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.activity-photos .hint { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
@media (max-width: 640px) {
  .activity-grid { grid-template-columns: 1fr; }
  .activity-gallery { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}

/* ===== 每日轉盤（AUR-169、AUR-178、AUR-189、AUR-219、AUR-260、AUR-311）===== */
/* 首頁沒有卡片：每天第一次進首頁時由 wheel.js 自動開對話框（一天一次），
   之後只留小入口讓使用者自己打開；轉到獎勵後自動關閉，再於畫面正中央顯示結果 toast。
   AUR-260 簡潔現代版：品牌粉外圈＋燈點、扇區切兩半做出切面感、第一格金色、品牌 M 標記中心、pin 指標。
   轉盤用色是這個區塊專用的 scoped token（--wheel-*），深色模式只覆寫 token。 */
.wheel-entry, .wheel-dialog {
  --wheel-a1: #fff7fa; --wheel-a2: #fdf0f5; --wheel-b1: #f8d3e0; --wheel-b2: #f5cadb;
  --wheel-gold1: #fbd877; --wheel-gold2: #f3c04f;
  --wheel-rim: var(--accent); --wheel-bulb: #fff4c7; --wheel-bulb-dim: #e7739f;
  --wheel-ink: var(--accent-ink); --wheel-pointer: var(--accent-ink);
  --wheel-glow: rgb(255 255 255 / .6);
}
.wheel-entry { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin: 0 0 16px; padding: 6px 16px 6px 8px;
  border: 1px solid var(--accent-line); border-radius: 999px; background: var(--surface); color: var(--text);
  font: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer; }
.wheel-entry:hover { background: var(--accent-soft); }
.wheel-entry:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 迷你轉盤圖示：hover 時轉 45 度 */
.wheel-entry-icon { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--wheel-rim);
  background: conic-gradient(var(--wheel-gold2) 0 90deg, var(--wheel-b1) 90deg 180deg, var(--wheel-a2) 180deg 270deg, var(--wheel-b1) 270deg);
  transition: transform .3s ease; }
.wheel-entry:hover .wheel-entry-icon { transform: rotate(45deg); }
.wheel-entry-note { color: var(--muted); font-weight: 400; }
.wheel-dialog { width: min(400px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 12px 20px 20px; color: var(--text);
  background: radial-gradient(120% 55% at 50% 0%, var(--accent-soft), transparent 75%), var(--surface);
  border: 1px solid var(--line); border-radius: 12px; }
.wheel-dialog[open] { animation: wheel-in .28s cubic-bezier(.2, .8, .2, 1); }
.wheel-dialog::backdrop { background: rgb(0 0 0 / .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@keyframes wheel-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }
/* sticky：手機橫向時對話框會捲動，關閉鈕要一直看得到；負的下邊距讓標題不被往下推 */
.wheel-close { position: sticky; top: 0; z-index: 4; width: 40px; height: 40px; margin: 0 -8px -24px auto; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 999px; background: var(--surface); color: var(--muted); cursor: pointer; }
.wheel-close svg { width: 20px; height: 20px; }
.wheel-close:hover { background: var(--accent-soft); color: var(--text); }
.wheel-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wheel-title { display: grid; gap: 4px; justify-items: center; padding: 0 40px; text-align: center; line-height: 1.25; }
.wheel-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--accent); }
.wheel-title h2 { margin: 0; font-size: 22px; letter-spacing: .02em; }
.wheel-title p { margin: 0; font-size: 13px; color: var(--muted); }
/* 外圈 --wheel-rim-w 寬，轉盤本體在裡面；標籤與燈點都用尺寸算位置，手機上一起縮 */
.wheel-stage { --wheel-size: min(320px, 76vw); --wheel-rim-w: 14px; --wheel-disc: calc(var(--wheel-size) - var(--wheel-rim-w) * 2);
  position: relative; width: var(--wheel-size); height: var(--wheel-size); margin: 24px auto 8px; }
.wheel-rim { position: absolute; inset: 0; border-radius: 50%; background: var(--wheel-rim); }
.wheel-bulb { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--wheel-bulb);
  transform: translate(-50%, -50%) rotate(calc(var(--i) * 22.5deg)) translateY(calc(var(--wheel-size) / -2 + var(--wheel-rim-w) / 2));
  animation: wheel-bulb 1.6s steps(1) infinite; }
.wheel-bulb:nth-child(even) { animation-delay: -.8s; }
.wheel-stage.is-spinning .wheel-bulb { animation-duration: .36s; }
.wheel-stage.is-spinning .wheel-bulb:nth-child(even) { animation-delay: -.18s; }
.wheel-stage.is-won .wheel-bulb { animation: wheel-bulb .3s steps(1) infinite; animation-delay: 0s; }
@keyframes wheel-bulb { 50% { background: var(--wheel-bulb-dim); } }
/* 圓盤旋轉後的外接矩形比圓盤本身寬（45° 時 292px 會變成約 413px），直接讓它溢出會在
   對話框的 overflow: auto 產生水平捲軸。這一層和圓盤同大小、圓形裁切，把旋轉的溢出留在
   裡面；.wheel-stage 本身不裁切，上方的指標才不會被切掉。 */
.wheel-disc-clip { position: absolute; inset: var(--wheel-rim-w); overflow: hidden; border-radius: 50%; }
.wheel { position: absolute; inset: 0; overflow: hidden; border-radius: 50%;
  /* 八格、每格切成亮暗兩半；第一格（VIP 或女生的 100 鑽石）金色。0 度是正上方，和 wheel.js 的旋轉方向一致 */
  background:
    conic-gradient(var(--wheel-gold1) 0 22.5deg, var(--wheel-gold2) 22.5deg 45deg, transparent 45deg),
    repeating-conic-gradient(var(--wheel-a1) 0 22.5deg, var(--wheel-a2) 22.5deg 45deg, var(--wheel-b1) 45deg 67.5deg, var(--wheel-b2) 67.5deg 90deg);
  /* 3.5 秒要跟 wheel.js 的 SPIN_MS 一致 */
  transition: transform 3.5s cubic-bezier(.15, .75, .2, 1); }
/* 扇區之間的細分隔線 */
.wheel::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from -.6deg, var(--surface) 0 1.2deg, transparent 1.2deg 45deg); }
.wheel-label { position: absolute; top: 50%; left: 50%; z-index: 1; display: grid; justify-items: center; gap: 2px; line-height: 1; white-space: nowrap; color: var(--wheel-ink);
  transform: translate(-50%, -50%) rotate(calc(var(--i) * 45deg + 22.5deg)) translateY(calc(var(--wheel-disc) * -0.32)); }
.wheel-label b { font-size: calc(var(--wheel-disc) * .072); font-weight: 800; letter-spacing: -.01em; }
.wheel-label small { font-size: 11px; font-weight: 600; opacity: .8; }
.wheel-label:first-of-type { color: var(--on-vip); }
/* 得獎格的閃光：停住後得獎格一定在正上方，所以是固定在上面的一片扇形，不跟著轉 */
.wheel-win { position: absolute; inset: var(--wheel-rim-w); z-index: 1; border-radius: 50%; opacity: 0; pointer-events: none;
  background: conic-gradient(from -22.5deg, var(--wheel-glow) 0 45deg, transparent 45deg); }
.wheel-stage.is-won .wheel-win { animation: wheel-win .6s ease-in-out 3; }
@keyframes wheel-win { 50% { opacity: 1; } }
/* 中心的品牌 M 標記：放在 .wheel 外面，轉盤旋轉時不會跟著轉 */
.wheel-hub { position: absolute; top: 50%; left: 50%; z-index: 2; width: 64px; height: 64px; display: grid; place-items: center;
  transform: translate(-50%, -50%); border-radius: 50%; background: var(--surface); border: 4px solid var(--wheel-rim); color: var(--accent); }
.wheel-hub .brand-mark { width: 38px; height: 38px; }
.wheel-pointer { position: absolute; top: -12px; left: 50%; z-index: 3; width: 28px; height: 36px; transform: translateX(-50%); transform-origin: 50% 35%; color: var(--wheel-pointer); }
.wheel-pointer svg { display: block; width: 100%; height: 100%; overflow: visible; }
.wheel-pointer path { stroke: var(--surface); stroke-width: 2.5; stroke-linejoin: round; paint-order: stroke; }
.wheel-pointer-dot { fill: var(--surface); }
.wheel-stage.is-won .wheel-pointer { animation: wheel-pop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes wheel-pop { 40% { transform: translateX(-50%) translateY(-4px) scale(1.12); } }
.wheel-result { min-height: 1.5em; margin: 4px 0 0; font-size: 16px; font-weight: 700; text-align: center; }
.wheel-actions { margin-top: 8px; }
.wheel-actions button { width: 100%; height: 48px; border-radius: 999px; font-size: 17px; letter-spacing: .2em; transition: filter .15s ease, transform .15s ease; }
.wheel-actions button:hover:not(:disabled) { filter: brightness(1.08); }
.wheel-actions button:active:not(:disabled) { transform: scale(.98); }
.wheel-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wheel-balance { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.wheel-balance strong { color: var(--text); }
.wheel-drop { width: 14px; height: 14px; color: var(--vip-solid); }
.wheel-drop svg { display: block; width: 100%; height: 100%; }
.wheel-note { margin: 8px 4px 0; line-height: 1.55; text-align: center; }
/* 一般提示（例如 crypto-pay.js 的複製結果）：固定在畫面下方，不擋操作；文字用背景色的反差 */
.toast { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); left: 16px; z-index: 100; max-width: 420px; margin: 0 auto; padding: 12px 16px; border-radius: 12px; background: var(--text); color: var(--bg); font-size: 14px; font-weight: 600; text-align: center; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.toast.is-shown { opacity: 1; transform: translateY(0); }
.toast.error { background: var(--bad); }
@media (min-width: 481px) {
  .toast { right: 24px; bottom: 24px; left: auto; width: auto; max-width: 380px; margin: 0; }
}
/* 轉盤結果（AUR-311）：對話框關閉後在畫面正中央顯示，不沿用右下角的位置。
   只給 wheel.js 使用；crypto-pay.js 的 .toast 維持原本的右下角。 */
.toast-center { top: 50%; right: auto; bottom: auto; left: 50%; width: max-content; max-width: min(420px, calc(100vw - 32px)); margin: 0; transform: translate(-50%, calc(-50% + 8px)); }
.toast-center.is-shown { transform: translate(-50%, -50%); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .wheel-entry, html:not([data-theme="light"]) .wheel-dialog {
    --wheel-a1: #2c2125; --wheel-a2: #291f23; --wheel-b1: #44293a; --wheel-b2: #3f2636;
    --wheel-gold1: #e2b24a; --wheel-gold2: #cf9c34;
    --wheel-rim: #7d2b4f; --wheel-bulb: #ffe7a6; --wheel-bulb-dim: #a84a73;
    --wheel-ink: var(--accent-ink); --wheel-pointer: var(--accent);
    --wheel-glow: rgb(255 236 179 / .3);
  }
}
/* 手動深色（AUR-320）：值和上面的系統深色逐字相同 */
html[data-theme="dark"] .wheel-entry, html[data-theme="dark"] .wheel-dialog {
  --wheel-a1: #2c2125; --wheel-a2: #291f23; --wheel-b1: #44293a; --wheel-b2: #3f2636;
  --wheel-gold1: #e2b24a; --wheel-gold2: #cf9c34;
  --wheel-rim: #7d2b4f; --wheel-bulb: #ffe7a6; --wheel-bulb-dim: #a84a73;
  --wheel-ink: var(--accent-ink); --wheel-pointer: var(--accent);
  --wheel-glow: rgb(255 236 179 / .3);
}
@media (prefers-reduced-motion: reduce) {
  .wheel, .toast, .wheel-entry-icon { transition: none; }
  .wheel-dialog[open], .wheel-bulb, .wheel-win, .wheel-pointer, .wheel-stage.is-won .wheel-bulb, .wheel-stage.is-won .wheel-win, .wheel-stage.is-won .wheel-pointer { animation: none; }
}

/* ===== 送禮（AUR-180）===== */
/* 聊天室的送禮鈕：圖示按鈕，放在送出旁邊；禮物沒開、唯讀或官方帳號時隱藏 */
.composer-gift { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); }
.composer-gift:hover { background: var(--accent-soft); color: var(--accent); }
.composer-gift:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.composer-gift[hidden] { display: none; }
/* 禮物圖示（AUR-326）：symbol sprite 不佔版面；外層 svg 只繼承顏色與線條 */
.gift-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.gift-icon { width: 22px; height: 22px; flex: none; }
/* 禮物清單：圖示、名稱、價格、送出 */
.gift-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gift-dialog-head h2 { margin: 0; }
.gift-balance { margin: 6px 0 10px; color: var(--muted); font-size: 14px; }
.gift-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 2px; max-height: 46vh; overflow: auto; }
.gift-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.gift-list li:last-child { border-bottom: 0; }
.gift-list strong { font-size: 15px; }
.gift-list-icon { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
.gift-price { color: var(--muted); font-size: 13px; white-space: nowrap; }
.gift-list button { padding: 6px 12px; }
/* 對話裡的禮物訊息 */
.gift-bubble { display: flex; align-items: center; gap: 10px; }
/* 照片訊息（AUR-388）：泡泡只留一圈細邊，圖片照比例縮到 260px 寬以內；長寬由 HTML 屬性先留位置 */
.photo-bubble { padding: 4px; line-height: 0; }
.photo-bubble a { display: block; border-radius: 8px; }
.photo-bubble a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.photo-bubble img { display: block; max-width: 100%; height: auto; border-radius: 8px; background: var(--note-bg); }
/* 舊資料沒有長寬時（不會發生在新訊息）才靠這兩個上限 */
.photo-bubble img:not([width]) { max-width: min(260px, 100%); max-height: 320px; }
/* 語音訊息（AUR-393）：瀏覽器內建播放器加上錄音時的長度；手機寬度時播放器跟著縮 */
.voice-bubble { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; }
.voice-bubble audio { display: block; width: 240px; max-width: 100%; height: 40px; }
.voice-length { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* 錄音中：輸入框、送出與其他按鈕先藏起來，換成錄音列 */
.composer.is-recording .composer-row > :not(.voice-bar) { display: none; }
.voice-bar { flex: 1; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px 0 8px; }
.voice-bar[hidden] { display: none; }
.voice-dot { flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--bad); animation: voice-blink 1s ease-in-out infinite; }
.voice-time { flex: 1; font-size: 14px; font-variant-numeric: tabular-nums; }
.voice-bar button { flex: none; min-height: 36px; padding: 0 12px; }
@keyframes voice-blink { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .voice-dot { animation: none; } }
.composer-gift:disabled { opacity: .5; cursor: progress; }
.gift-bubble-icon { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
.gift-bubble-icon .gift-icon { width: 24px; height: 24px; }
.msg.is-mine .gift-bubble-icon { background: var(--surface); color: var(--accent); }
.gift-bubble-text { display: grid; gap: 1px; line-height: 1.3; }
.gift-bubble-text strong { font-size: 15px; }
.gift-bubble-text span { font-size: 12px; opacity: .8; }

/* ===== 百家樂練習桌（AUR-190）===== */
/* hidden 要贏過 button／flex 的 display，不然隱藏的按鈕還是會出現 */
[data-baccarat] [hidden] { display: none !important; }
.bac-status { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; margin: 18px 0 6px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.bac-stat { display: grid; gap: 1px; min-width: 110px; }
.bac-stat span { color: var(--muted); font-size: 12.5px; }
.bac-stat strong { font-size: 22px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.bac-stat small { color: var(--muted); font-size: 12px; }
.bac-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.bac-actions button { min-height: 40px; }
.bac-notice { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin: 12px 0; padding: 12px 16px; background: var(--note-bg); border: 1px solid var(--accent-line); border-radius: 12px; font-size: 14px; }
.bac-notice strong { color: var(--accent-ink); }
.bac-notice span { flex: 1 1 240px; }
.bac-notice button { padding: 6px 12px; font-size: 13px; }

.bac-table { margin: 16px 0; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
/* 虛擬荷官（AUR-191）：插畫的顏色是這個區塊專用的 scoped token；桌布用品牌的淡粉，不用賭場綠。
   SVG 是 240×180、桌緣在 y=160（高度的 2/3 寬），和 ::before 的桌布上緣對齊，看起來是荷官坐在桌子後面 */
.bac-stage {
  --dealer-skin: #f3d2b8; --dealer-skin-shade: #e0b494; --dealer-hair: #1f1a1d; --dealer-hair-shine: #4a3f45;
  --dealer-shirt: #fffdfb; --dealer-vest: #3a2f3d; --dealer-ink: #2a1f24; --dealer-blush: #f2a3b5;
  --dealer-halo: var(--accent-soft); --dealer-line: var(--accent-line); --dealer-w: 300px;
  position: relative; display: grid; justify-items: center;
}
.bac-stage::before { content: ""; position: absolute; inset: calc(var(--dealer-w) * 2 / 3) 0 0; background: var(--note-bg); border-top: 2px solid var(--dealer-line); border-radius: 0 0 12px 12px; }
.bac-dealer { position: relative; width: var(--dealer-w); height: calc(var(--dealer-w) * .75); }
.bac-dealer-art { display: block; width: 100%; height: 100%; overflow: visible; }
.bac-dealer-art .d-halo { fill: var(--dealer-halo); }
.bac-dealer-art .d-hair { fill: var(--dealer-hair); }
.bac-dealer-art .d-hair-shine { fill: none; stroke: var(--dealer-hair-shine); stroke-width: 3; stroke-linecap: round; }
.bac-dealer-art .d-skin { fill: var(--dealer-skin); }
.bac-dealer-art .d-skin-shade { fill: var(--dealer-skin-shade); }
.bac-dealer-art .d-shirt { fill: var(--dealer-shirt); }
.bac-dealer-art .d-vest { fill: var(--dealer-vest); }
.bac-dealer-art .d-bow { fill: var(--accent); }
.bac-dealer-art .d-bow-knot { fill: var(--accent-ink); }
.bac-dealer-art .d-badge { fill: var(--vip-solid); }
.bac-dealer-art .d-blush { fill: var(--dealer-blush); opacity: .55; }
.bac-dealer-art .d-ink { fill: var(--dealer-ink); }
.bac-dealer-art .d-line { fill: none; stroke: var(--dealer-ink); stroke-width: 1.6; stroke-linecap: round; }
.bac-dealer-art .d-sleeve { fill: none; stroke: var(--dealer-shirt); stroke-width: 13; stroke-linecap: round; }
.bac-dealer-art .d-card { fill: var(--accent); stroke: var(--dealer-shirt); stroke-width: 1.2; }
.bac-dealer-art .d-rim { fill: var(--note-bg); }
/* 桌緣線不隨插畫縮放，才會和 ::before 的 2px 上框一樣粗 */
.bac-dealer-art .d-rim-line { stroke: var(--dealer-line); stroke-width: 2; vector-effect: non-scaling-stroke; }
.bac-dealer-art .d-shoe { fill: var(--dealer-vest); }
/* 眨眼與發牌手臂；transform-box 用 view-box，旋轉中心才會是 SVG 座標裡的肩膀 */
.bac-dealer-art .d-eyes { transform-box: view-box; transform-origin: 120px 70px; animation: dealer-blink 5s infinite; }
.bac-dealer-art .d-arm { transform-box: view-box; transform-origin: 168px 134px; }
.bac-stage.is-dealing .d-arm { animation: dealer-reach 420ms ease-in-out var(--n, 4); }
@keyframes dealer-blink { 0%, 95%, 100% { transform: none; } 97% { transform: scaleY(.1); } }
@keyframes dealer-reach { 0%, 100% { transform: none; } 45% { transform: rotate(32deg) translateY(4px); } }
/* 對話框：發牌前「請下注」、發牌中「發牌中…」、結束時說出結果 */
.bac-bubble { position: absolute; top: calc(var(--dealer-w) / 12); left: calc(50% + var(--dealer-w) * .29); z-index: 1; margin: 0; padding: 4px 12px; border: 1px solid var(--dealer-line); border-radius: 12px; background: var(--surface); color: var(--accent-ink); font-size: 14px; font-weight: 700; white-space: nowrap; }
.bac-bubble::before { content: ""; position: absolute; top: 14px; left: -6px; width: 10px; height: 10px; border-bottom: 1px solid var(--dealer-line); border-left: 1px solid var(--dealer-line); background: var(--surface); transform: rotate(45deg); }
.bac-bubble.is-pop { animation: bac-pop .32s ease; }
@keyframes bac-pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.bac-felt { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; padding: 12px 16px 0; }
.bac-felt .bac-hand { padding: 12px 8px; border: 1px dashed var(--dealer-line); border-radius: 12px; }
.bac-dealer-name { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 8px; margin: 12px 0; color: var(--muted); font-size: 13px; }
.bac-dealer-name span::before { content: "·"; margin-right: 8px; }
/* 發牌：從荷官手上飛到牌位，先看到牌背、翻面後才看到點數；--i 是發牌順序（閒1、莊1、閒2、莊2、補牌） */
.bac-felt .pcard { animation: bac-deal-in 520ms ease-out both; animation-delay: calc(var(--i, 0) * 420ms); }
.bac-hand.is-player .pcard { --from-x: 90px; }
.bac-hand.is-banker .pcard { --from-x: -90px; }
.bac-table.is-instant .bac-felt .pcard { animation: none; }
@keyframes bac-deal-in {
  0% { opacity: 0; transform: translate(var(--from-x, 0), -130px) rotate(-14deg) scale(.5); color: transparent; background-image: repeating-linear-gradient(45deg, var(--accent) 0 4px, var(--accent-ink) 4px 8px); }
  55% { opacity: 1; transform: none; color: transparent; background-image: repeating-linear-gradient(45deg, var(--accent) 0 4px, var(--accent-ink) 4px 8px); }
  75% { transform: scaleX(0); color: transparent; background-image: repeating-linear-gradient(45deg, var(--accent) 0 4px, var(--accent-ink) 4px 8px); }
  76% { transform: scaleX(0); color: var(--card-ink); background-image: none; }
  100% { opacity: 1; transform: none; background-image: none; }
}
.bac-motion { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 16px; margin: -4px 0 12px; color: var(--muted); font-size: 13px; }
.bac-motion label { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; cursor: pointer; }
.bac-motion input { width: 18px; height: 18px; accent-color: var(--accent); }
.bac-motion .link-button { min-height: 40px; }
.bac-motion input:focus-visible, .bac-motion .link-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bac-hand { text-align: center; }
.bac-hand h2 { margin: 0 0 8px; font-size: 15px; letter-spacing: .18em; color: var(--muted); }
.bac-hand .total { margin-left: 6px; font-size: 20px; letter-spacing: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.bac-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 84px; }
.pcard { display: inline-grid; place-items: center; width: 58px; height: 82px; border: 1px solid #d8d0cb; border-radius: 9px; background: #fffefb; --card-ink: #1d1d1b; color: var(--card-ink); box-shadow: 0 2px 6px rgba(29, 29, 27, .12); font-size: 22px; font-weight: 700; line-height: 1; animation: bac-deal .28s ease both; }
/* 牌面字色放在 --card-ink：發牌動畫翻面那一格要直接設回這個顏色，不能從透明慢慢淡入 */
.pcard.red { --card-ink: #b3261e; }
.pcard.small { width: 30px; height: 42px; border-radius: 5px; font-size: 13px; box-shadow: none; }
@keyframes bac-deal { from { opacity: 0; transform: translateY(-10px) rotate(-4deg); } to { opacity: 1; transform: none; } }
.bac-outcome { min-height: 1.7em; margin: 12px 0; font-weight: 700; text-align: center; }
.bac-outcome.win { color: var(--ok); }
.bac-outcome.lose { color: var(--bad); }
.bac-bets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.bac-bets label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.bac-bets input { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--control-line); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; font-size: 16px; font-variant-numeric: tabular-nums; }
.bac-hint { margin: 10px 0 12px; font-size: 13px; }
.bac-table > button { min-width: 160px; }
.bac-fair { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; }
.bac-fair summary { cursor: pointer; color: var(--muted); }
.bac-fair code, .bac-round code { word-break: break-all; font-size: 12px; }

.bac-history { margin: 24px 0; }
.bac-rounds { list-style: none; margin: 0; padding: 0; }
.bac-round { padding: 12px 0; border-bottom: 1px solid var(--line); }
.bac-round:first-child { border-top: 1px solid var(--line); }
.bac-round-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; }
.bac-round-head strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.bac-tag { padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; }
.bac-round-cards { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 8px 0 4px; font-size: 13px; }
.bac-round-cards .sep { margin: 0 6px; color: var(--muted); }
.bac-round-bets { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font-size: 12.5px; }
.bac-round details { margin-top: 6px; font-size: 12.5px; }
.bac-round details summary { cursor: pointer; color: var(--muted); }
.bac-round.is-void { opacity: .65; }
.win { color: var(--ok); }
.lose { color: var(--bad); }

.bac-rules { margin: 24px 0; }
.bac-rules ul { padding-left: 20px; }
.bac-rules li { margin-bottom: 6px; }

.bac-dialog { width: min(360px, calc(100vw - 32px)); padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); }
.bac-dialog::backdrop { background: rgba(29, 29, 27, .45); }
.bac-dialog h2 { margin: 0 0 6px; font-size: 18px; }
.bac-dialog p { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.bac-dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 480px) {
  .bac-actions { margin-left: 0; width: 100%; }
  .bac-actions button { flex: 1 1 0; }
  .bac-bets { grid-template-columns: 1fr; }
  .bac-table > button { width: 100%; }
  .bac-table { padding: 16px 12px; }
  .bac-stage { --dealer-w: 240px; }
  .bac-dealer-name { flex-direction: column; align-items: center; }
  .bac-dealer-name span::before { content: none; }
  .bac-bubble { left: calc(50% + 56px); }
  .bac-felt { gap: 8px; padding: 12px 8px 0; }
  .bac-felt .bac-hand { padding: 8px 4px; }
  .bac-felt .bac-cards { gap: 4px; min-height: 52px; }
  .bac-felt .pcard { width: 36px; height: 50px; border-radius: 6px; font-size: 15px; }
}
/* 深色：背心與頭髮貼近深色底會糊在一起，背心調亮、光暈用比 surface 亮一階的底 */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .bac-stage { --dealer-vest: #5a4a60; --dealer-hair-shine: #6a5a63; --dealer-halo: #3a2e33; }
}
/* 手動深色（AUR-320）：值和上面的系統深色逐字相同 */
html[data-theme="dark"] .bac-stage { --dealer-vest: #5a4a60; --dealer-hair-shine: #6a5a63; --dealer-halo: #3a2e33; }
@media (prefers-reduced-motion: reduce) {
  .pcard, .bac-felt .pcard, .bac-bubble.is-pop, .bac-dealer-art .d-eyes, .bac-stage.is-dealing .d-arm { animation: none; }
}

/* 全螢幕探索（AUR-247）：一次一位會員，照片滿版、資訊壓在照片下緣。
   手機滿版、桌機固定寬度置中；垂直捲動照常（stage 的 touch-action: pan-y） */
.discover { width: 100%; max-width: 430px; margin: 0 auto; }
.discover-head { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.discover-head h1 { margin: 0; font-size: 22px; }
.discover-back { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; color: var(--text); }
.discover-back:hover { background: var(--note-bg); }
.discover-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.discover-count { margin: 0 0 0 auto; min-width: 0; overflow: hidden; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.discover-stage { position: relative; height: calc(100dvh - 236px); min-height: 380px; max-height: 720px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.discover-cards { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
/* 一次只顯示一張：其他卡片留在 DOM 裡（往回滑不用重新載入），但看不到也點不到 */
.discover-card { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; background: var(--note-bg); opacity: 0; pointer-events: none; transform: scale(.98); transition: opacity .18s ease, transform .18s ease; }
.discover-card.is-current { opacity: 1; pointer-events: auto; transform: none; }
/* 框疊在照片上時，把 focus ring 畫在卡片外框 */
.discover-card:focus-within { outline: 2px solid var(--accent); outline-offset: -2px; }
.discover-photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.discover-initial { position: absolute; inset: 0; display: grid; place-items: center; font-size: 96px; font-weight: 700; color: var(--muted); }
/* 文字壓在照片下緣；整塊不吃滑鼠，滑動與點照片都走得到，只有連結自己吃事件 */
.discover-overlay { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 4px; padding: 64px 18px 18px; background: linear-gradient(to top, rgba(17, 17, 17, .88), rgba(17, 17, 17, .5) 55%, transparent); color: #fff; pointer-events: none; }
.discover-name { display: flex; align-items: center; gap: 6px; width: max-content; max-width: 100%; font-size: 24px; font-weight: 700; color: #fff; text-decoration: none; pointer-events: auto; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.discover-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.discover-nick { min-width: 0; overflow-wrap: anywhere; }
.discover-overlay .badge-verified { color: #fff; }
.discover-meta { margin: 0; font-size: 15px; color: rgba(255, 255, 255, .88); font-variant-numeric: tabular-nums; }
.discover-online { color: rgba(255, 255, 255, .95); }
.discover-bio { display: -webkit-box; margin: 0; overflow: hidden; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .86); -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.discover-open { width: max-content; margin-top: 4px; font-size: 13px; color: rgba(255, 255, 255, .92); text-decoration: underline; pointer-events: auto; }
.discover-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.discover-card-actions { position: absolute; right: 12px; top: 12px; z-index: 3; display: flex; gap: 8px; }
.discover-actions { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 16px 0 10px; }
.discover-actions[hidden] { display: none; }
.discover-arrow { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); cursor: pointer; }
.discover-arrow:hover:not(:disabled) { background: var(--note-bg); }
.discover-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.discover-arrow:disabled { opacity: .4; cursor: not-allowed; }
.discover-heart { display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-text); cursor: pointer; }
.discover-heart:hover:not(:disabled) { opacity: .9; }
.discover-heart:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.discover-heart:disabled { opacity: .5; cursor: not-allowed; }
.discover-heart:not(:disabled):active .heart-icon { transform: scale(.9); }
.discover-heart .heart-icon { transition: transform .12s ease; }
/* 愛心動效（AUR-344）：圖示填滿後彈一下，外圈同時擴散；JS 等動畫播完才換下一位 */
.discover-heart.is-liked { animation: discover-heart-pulse .38s ease; }
.discover-heart.is-liked:disabled { opacity: 1; }
.discover-heart.is-liked .heart-icon { fill: currentColor; animation: heart-pop .38s ease; }
@keyframes discover-heart-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); box-shadow: 0 0 0 16px color-mix(in srgb, var(--accent) 0%, transparent); }
}
.discover-hint { margin: 0; color: var(--muted); font-size: 12.5px; text-align: center; }
.discover-error { margin: 8px 0 0; text-align: center; }
.discover-empty { max-width: 430px; margin: 0 auto; text-align: center; }
.discover-end { position: absolute; inset: 0; display: grid; place-content: center; gap: 8px; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--muted); text-align: center; }
.discover-end[hidden] { display: none; }
.discover-end a { color: var(--accent); }
/* 配對成功（AUR-247）：不自動跳走，使用者自己決定去聊天或繼續看 */
.discover-match { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; background: rgba(17, 17, 17, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.discover-match[hidden] { display: none; }
.discover-match-box { width: min(340px, 100%); padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: center; }
.discover-match-box h2 { margin: 0 0 8px; }
.discover-match-box p { margin: 0 0 18px; color: var(--muted); }
.discover-match-box .form-error:empty { display: none; }
.discover-match-box .form-error { color: var(--bad); }
.discover-match-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
@media (max-width: 480px) {
  .discover-stage { height: calc(100dvh - 216px); }
}
@media (prefers-reduced-motion: reduce) {
  .discover-card { transition: none; }
  .discover-heart.is-liked, .discover-heart.is-liked .heart-icon { animation: none; }
}

/* 找不到頁面（404）：沿用公開頁的卡片與導覽，用品牌圖示、簡短說明與兩個明確的下一步，
   不要把使用者留在空白的頁面上。掃描器由 meta robots noindex 處理，狀態碼仍是 404。 */
.not-found { padding: 48px 0 16px; text-align: center; }
.not-found .brand-mark { width: 56px; height: 56px; margin-bottom: 16px; }
.not-found-code { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .16em; }
.not-found h1 { margin: 8px 0 0; font-size: 28px; line-height: 1.3; }
.not-found-copy { max-width: 480px; margin: 12px auto 0; color: var(--muted); }
.not-found-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
@media (max-width: 480px) {
  .not-found { padding-top: 32px; }
  .not-found h1 { font-size: 24px; }
  .not-found-actions .button { flex: 1 1 100%; }
}

/* 鑽石商店（AUR-336）：兌換商品、禮物目錄與兌換紀錄。
   沿用首頁的卡片與按鈕；商品卡用 1px 邊框與留白分層，不加陰影。 */
.shop-head { align-items: flex-start; }
.shop-balance { margin: 0 0 0 auto; color: var(--muted); font-size: 14px; }
.shop-balance .stat-num { color: var(--text); font-size: 20px; }
.shop-notice { margin-bottom: 16px; }
.shop-notice p { margin: 0; }
.shop-error { border-color: var(--bad); }
.shop-section { margin: 0 0 32px; }
.shop-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.shop-section-head h2 { margin: 0; font-size: 20px; }
.shop-section-head .muted { font-size: 13px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.shop-gift-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shop-item { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.shop-item-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
.shop-item-icon.gift { color: var(--accent); }
/* 頭框商品預覽：3:4 的小卡，框用和卡牌同一個 .avatar-frame，只是邊框比較細 */
.shop-item-icon.shop-frame-preview { position: relative; display: block; width: 56px; height: 74px; padding: 0; overflow: hidden; background: linear-gradient(135deg, var(--accent-soft), var(--note-bg)); }
.shop-frame-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shop-frame-preview .avatar-frame { --frame-width: 6px; }
.shop-item-body { display: grid; gap: 4px; }
.shop-item-body h3 { margin: 0; font-size: 16px; }
.shop-item-body p { margin: 0; color: var(--muted); font-size: 14px; }
.shop-item-body p.shop-item-meta { display: flex; align-items: baseline; gap: 8px; color: var(--text); font-size: 13px; }
.shop-item-meta strong { color: var(--text); font-size: 15px; font-variant-numeric: tabular-nums; }
.shop-item-meta span { color: var(--muted); }
.shop-item-note { margin: 0; color: var(--muted); font-size: 12px; }
.shop-buy { margin-top: auto; }
.shop-buy button { width: 100%; }
.shop-footnote { margin: 12px 0 0; color: var(--muted); font-size: 12.5px; }
.shop-empty { text-align: left; }
.shop-empty strong { display: block; margin-bottom: 4px; }
.shop-empty p { margin: 0; color: var(--muted); font-size: 14px; }
.shop-dialog { width: min(480px, calc(100vw - 32px)); padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); }
.shop-dialog-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.shop-dialog-head h2 { margin: 0; font-size: 18px; }
.shop-dialog-summary { margin: 12px 0 4px; }
.shop-dialog-summary strong { color: var(--text); }
.shop-dialog-empty { margin: 12px 0; color: var(--muted); font-size: 14px; }
.shop-dialog .muted { font-size: 13px; }
.shop-room-list { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; max-height: 44vh; overflow: auto; }
.shop-room { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.shop-room:hover:not(:disabled) { background: var(--note-bg); }
.shop-room:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.shop-room:disabled { opacity: .6; cursor: wait; }
.shop-room-face { width: 36px; height: 36px; font-size: 14px; }
.shop-dialog .form-error { margin: 12px 0 0; }
.shop-dialog .form-error:empty { display: none; }
.shop-section .num { text-align: right; font-variant-numeric: tabular-nums; }
/* 頭框設定（AUR-353）：卡片是 radio，預覽用會員自己的第一張照片 */
.frame-form { display: grid; gap: 20px; max-width: 760px; }
.frame-fieldset { margin: 0; padding: 0; border: 0; }
.frame-legend { padding: 0; margin: 0 0 10px; font-weight: 600; }
.frame-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.frame-card { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; }
.frame-card:hover { background: var(--note-bg); }
.frame-card:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.frame-card.is-active { border-color: var(--accent); background: var(--accent-soft); }
.frame-card input, .frame-none input { accent-color: var(--accent); }
.frame-preview { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 8px; background: linear-gradient(135deg, var(--accent-soft), var(--note-bg)); }
.frame-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame-preview .avatar-frame { --frame-width: 7px; }
.frame-name { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.frame-until { color: var(--muted); font-size: 12px; }
.frame-active { justify-self: start; padding: 1px 8px; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-size: 11px; font-weight: 700; }
.frame-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.frame-none { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.frame-none:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
@media (max-width: 720px) {
  .shop-gift-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .shop-head { display: block; }
  .shop-balance { margin: 8px 0 0; }
  .shop-grid, .shop-gift-grid { grid-template-columns: 1fr; }
  .shop-item { padding: 16px; }
  .frame-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .frame-card { padding: 10px; }
}