/* portal main 樣式 — 對齊 App 設計語彙 (2026-09-09 改版, 設計稿 = claude artifact 3d4bf69e)
   token 鏡像 SSOT: app/.../ui/theme/PageAccent.kt + AppShapes.kt + colors.xml
   - 色: L1 四主色 (青=儲值/能量 / 金=收入 / 藍=AI·知識 / 紫=軌跡), 淺色 tonal 分版, 深色亮版
   - 形: 可點鈕與卡 12px / 小件 6px / 膠囊只給不可點標記 / 圓形只給圖示
   - 入口色載體: 區塊 = 標題下 1px 分隔線; 列表項 = 1px 身份色卡框 (本站 = 青) */
:root {
  --bg: #F5F5F5; --surface: #FFFFFF; --ink: #333333; --ink2: #666666;
  --outline: #CCCCCC; --outline2: #E0E0E0;
  --cyan: #00838F; --cyan-tint: rgba(0, 131, 143, 0.12);
  --gold: #B8860B; --gold-tint: rgba(184, 134, 11, 0.12);
  --blue: #2979FF; --violet: #8B5CF6;
  --red: #F44336; --green: #4CAF50;
  --on-accent: #1A1A1A;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212; --surface: #1E1E1E; --ink: #E5E5E5; --ink2: #B0B0B0;
    --outline: #4A4A4A; --outline2: #363636;
    --cyan: #45D5DB; --cyan-tint: rgba(69, 213, 219, 0.12);
    --gold: #FFD60A; --gold-tint: rgba(255, 214, 10, 0.12);
    --violet: #A78BFA;
  }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  color: var(--ink); background: var(--bg); line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--cyan); }

/* 頭列: 品牌雙弧 + 站名; 底線 = 入口色 1px */
.site-header {
  display: flex; align-items: center; gap: 12px; padding: 14px 20px;
  background: var(--surface); border-bottom: 1px solid var(--cyan);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 40px; height: 40px; }
.brand-name { font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: 0.15px; }

main { max-width: 640px; margin: 0 auto; padding: 0 0 40px; }

/* hero */
.hero { display: flex; flex-direction: column; gap: 12px; padding: 40px 24px 28px; }
.hero h1 { font-size: 28px; line-height: 36px; font-weight: 700; text-wrap: pretty; }
.hero p { font-size: 16px; line-height: 24px; color: var(--ink2); text-wrap: pretty; }

/* 區塊標題 + 入口色分隔線 */
.section { display: flex; flex-direction: column; gap: 12px; padding: 8px 20px 24px; }
.section-head { display: flex; flex-direction: column; gap: 6px; }
.section-head h2 { font-size: 22px; line-height: 28px; font-weight: 600; }
.section-head .rule { height: 1px; background: var(--cyan); }
.section-head .sub { font-size: 14px; line-height: 20px; color: var(--ink2); }

/* 方案卡 (js/plans.js 動態渲染): 1px 青框 + 12px, 內容置中 */
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.tier-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 20px 12px; background: var(--surface);
  border: 1px solid var(--cyan); border-radius: 12px; text-align: center;
}
.tier-card:hover { background: var(--cyan-tint); }
/* 方案卡四行同 16px (2026-09-15 USER 定案): 付出的 (方案名/價格) = ink 400, 得到的 (購買點/贈點) = cyan 600;
   語意分組靠顏色, 不靠字級; 無贈點行為 ink2 (非贈點) */
.tier-card h3 { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--ink); }
.tier-price { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--ink); }
.tier-points { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--cyan); }
.tier-note { font-size: 16px; line-height: 24px; color: var(--ink2); }
.tier-note.bonus { font-weight: 600; color: var(--cyan); }
.tier-featured { border-width: 2px; }
/* 未開放方案 (available=false): 全數揭露但不可點; 沙箱期 = 天天跑/全職跑 */
.tier-card.unavailable { border-style: dashed; opacity: 0.7; cursor: default; pointer-events: none; }
.tier-tag, .plan-tag { font-size: 12px; line-height: 16px; color: var(--ink2); }

/* 不可點文字標記 = 膠囊 */
.pill {
  display: inline-block; font-size: 12px; line-height: 16px; padding: 3px 10px;
  border-radius: 999px; background: var(--gold-tint); color: var(--gold); font-weight: 600;
}
.tiers-note:empty { display: none; }

/* 儲值頁 (topup.html) */
.page { display: flex; flex-direction: column; gap: 16px; padding: 24px 20px; }
.banner {
  padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 20px;
  background: var(--gold-tint); border: 1px solid var(--gold); color: var(--gold);
}
.notice {
  padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 20px;
  background: var(--surface); border: 1px solid var(--outline); color: var(--ink2);
}
.card { padding: 20px 16px; background: var(--surface); border: 1px solid var(--outline2); border-radius: 12px; }
/* tinted 儀表 (AppPageFrame dashboard 語彙): 青 tint 底 + 大數字 = App P chip 同源 */
.dashboard {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 20px;
  border-radius: 12px; background: var(--cyan-tint); border: 1px solid var(--cyan);
}
.dashboard .who { font-size: 14px; line-height: 20px; color: var(--ink2); }
.balance-line { display: flex; align-items: baseline; gap: 8px; }
.balance-line .label { font-size: 14px; line-height: 20px; color: var(--ink2); }
.balance-line b { font-size: 32px; line-height: 40px; font-weight: 700; color: var(--cyan); }
.balance-line .unit { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--cyan); }
.signin-hint { font-size: 14px; line-height: 20px; color: var(--ink2); margin-bottom: 12px; }

/* 方案選擇鈕: 可點矩形 12px; 選中 = 青框 + tint 底 (FilterChip 語彙) */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.plan-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 44px;
  padding: 16px 12px; background: var(--surface); border: 1px solid var(--outline);
  border-radius: 12px; cursor: pointer; font: inherit; color: inherit;
}
.plan-btn:hover, .plan-btn.selected { border-color: var(--cyan); background: var(--cyan-tint); }
/* 儲值頁方案鈕四行同 16px (2026-09-15 USER 定案, 同 .tier-* 語意分組) */
.plan-label { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--ink); }
.plan-amount { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--ink); }
.plan-points { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--cyan); }
.plan-note { font-size: 16px; line-height: 24px; color: var(--ink2); }
.plan-note.bonus { font-weight: 600; color: var(--cyan); }
.plan-btn.unavailable { border-style: dashed; opacity: 0.7; cursor: default; }
.plan-btn.unavailable:hover { border-color: var(--outline); background: var(--surface); }
/* 點數規則三行 (方案格下、付款鈕上): 不可點說明, 同 .notice 色階 */
.points-terms { margin: 0; padding: 0 4px; list-style: none; font-size: 13px; line-height: 20px; color: var(--ink2); }
.points-terms li::before { content: "・"; }
.plan-summary { font-weight: 600; color: var(--cyan); }

/* 可點文字鈕: 12px, 48 高; 主 = 青實底深字 / 副 = 青框空心 */
button.primary {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 48px;
  border: none; border-radius: 12px; background: var(--cyan); color: var(--on-accent);
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
}
button.primary:disabled { opacity: 0.5; cursor: default; }
button.primary.alt { background: var(--surface); color: var(--cyan); border: 1px solid var(--cyan); }
.actions { display: flex; flex-direction: column; gap: 10px; }
.form-status { font-size: 12px; line-height: 16px; color: var(--ink2); text-align: center; }
.form-status:empty { display: none; }
.form-status.error { color: var(--red); }
.form-status.ok { color: var(--green); }
.result-card { text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.result-card h3 { font-size: 22px; line-height: 28px; font-weight: 600; }
.result-detail { font-size: 16px; line-height: 24px; color: var(--ink2); }

/* footer: 文字連結 (合規成本守恆律: 支援站入口非 CTA) */
.site-footer {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px;
  padding: 20px 24px 28px; border-top: 1px solid var(--outline2);
  font-size: 14px; line-height: 20px; color: var(--ink2);
}
.footer-sep { color: var(--outline); }

/* 2026-09-16 USER 揪 (示範影片錄製): ① .result-card / .plan-grid 等自帶 display 的區塊會蓋掉 UA 的 [hidden]
   (topup.html result-block 未進結果態即顯「返回儲值」卡) → 作者層 !important 兜底 ② 閘門態付款鈕 disabled 只 0.5 透明,
   深底上與可用態幾乎同色 → 去彩度 + 更淡, 一眼可辨 */
[hidden] { display: none !important; }
button.primary:disabled, button.primary.alt:disabled { opacity: 0.35; filter: grayscale(1); }