/*
 * app.css — smm.vksy.shop 設計系統
 * 純 CSS，無框架、無建置流程、無 CDN。單檔管理，以區段註解分段。
 * Owner: frontend-designer（UI-SPEC §C.2）。後台也共用本檔的 token 與元件 class。
 *
 * 硬規則（UI-SPEC §A4.2）：除 :root 與深色 media query 外，不得出現硬編碼色碼。
 */

/* ===== 1. 設計 Token ===== */
:root {
  /* 品牌 */
  --brand-50:#eef2ff; --brand-100:#e0e7ff; --brand-500:#6366f1;
  --brand-600:#4f46e5; --brand-700:#4338ca; --brand-900:#312e81;
  /* 品牌色（brand-500~900）與 err-fg 在深色模式下維持不變，故其上文字色是固定常數而非隨主題切換的 token；
     仍集中宣告於此以滿足「顏色一律經由 token」的規則，不得在元件規則中散落硬編碼色碼。 */
  --on-brand:#fff; --on-brand-a40:rgb(255 255 255 / .4);

  /* 語意色（狀態） */
  --ok-bg:#dcfce7;   --ok-fg:#15803d;   --ok-bd:#86efac;
  --warn-bg:#fef3c7; --warn-fg:#b45309; --warn-bd:#fcd34d;
  --err-bg:#fee2e2;  --err-fg:#b91c1c;  --err-bd:#fca5a5;
  --info-bg:#dbeafe; --info-fg:#1d4ed8; --info-bd:#93c5fd;

  /* 中性（介面骨架） */
  --bg:#f8fafc; --surface:#ffffff; --surface-2:#f1f5f9;
  --text:#0f172a; --text-2:#475569; --text-3:#94a3b8;
  --border:#e2e8f0; --border-strong:#cbd5e1;

  /* 字級（1.200 Minor Third，基準 16px） */
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-base:1rem;
  --fs-lg:1.125rem; --fs-xl:1.375rem; --fs-2xl:1.75rem; --fs-3xl:2.125rem;
  --lh-tight:1.25; --lh-base:1.6;

  /* 間距（4px 基準） */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;

  /* 圓角／陰影／動效 */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-full:999px;
  --sh-1:0 1px 2px rgb(15 23 42 / .06);
  --sh-2:0 4px 12px rgb(15 23 42 / .08);
  --sh-3:0 12px 32px rgb(15 23 42 / .12);
  --ease:cubic-bezier(.4,0,.2,1); --dur:.18s;

  /* 版面 */
  --container:1200px; --header-h:56px;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI",
               "PingFang TC", "Noto Sans TC", "Microsoft JhengHei",
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* 深色模式：跟隨系統。手動切換（data-theme）P1 預留，不需重寫本區塊之外的 CSS。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0b1120; --surface:#111827; --surface-2:#1f2937;
    --text:#f1f5f9; --text-2:#94a3b8; --text-3:#64748b;
    --border:#1f2937; --border-strong:#334155;
    --brand-50:#1e1b4b; --brand-100:#312e81;
    --ok-bg:#052e16; --ok-fg:#4ade80; --ok-bd:#166534;
    --warn-bg:#422006; --warn-fg:#fbbf24; --warn-bd:#854d0e;
    --err-bg:#450a0a;  --err-fg:#f87171; --err-bd:#991b1b;
    --info-bg:#172554; --info-fg:#60a5fa; --info-bd:#1e40af;
    --sh-1:0 1px 2px rgb(0 0 0 / .4);
    --sh-2:0 4px 12px rgb(0 0 0 / .5);
    --sh-3:0 12px 32px rgb(0 0 0 / .6);
  }
}
:root[data-theme="dark"] {
  --bg:#0b1120; --surface:#111827; --surface-2:#1f2937;
  --text:#f1f5f9; --text-2:#94a3b8; --text-3:#64748b;
  --border:#1f2937; --border-strong:#334155;
  --brand-50:#1e1b4b; --brand-100:#312e81;
  --ok-bg:#052e16; --ok-fg:#4ade80; --ok-bd:#166534;
  --warn-bg:#422006; --warn-fg:#fbbf24; --warn-bd:#854d0e;
  --err-bg:#450a0a;  --err-fg:#f87171; --err-bd:#991b1b;
  --info-bg:#172554; --info-fg:#60a5fa; --info-bd:#1e40af;
  --sh-1:0 1px 2px rgb(0 0 0 / .4);
  --sh-2:0 4px 12px rgb(0 0 0 / .5);
  --sh-3:0 12px 32px rgb(0 0 0 / .6);
}

/* ===== 2. Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base);
  overflow-x: hidden;
}
h1,h2,h3,h4 { line-height: var(--lh-tight); margin: 0 0 var(--s-3); font-weight: 700; }
h1 { font-size: var(--fs-2xl); } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--s-3); }
a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
ul, ol { padding-left: 1.2em; }
.mono, .money, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.overflow-wrap { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--s-4); }

/* ===== 3. 頁首 / 導覽 ===== */
header.site {
  position: sticky; top: 0; z-index: 40;
  background: var(--surface); border-bottom: 1px solid var(--border);
  box-shadow: var(--sh-1);
}
.site-bar {
  height: var(--header-h); max-width: var(--container); margin: 0 auto; padding: 0 var(--s-4);
  display: flex; align-items: center; gap: var(--s-4);
}
.site-bar .brand { font-weight: 800; font-size: var(--fs-lg); color: var(--text); white-space: nowrap; }
.site-bar .brand:hover { text-decoration: none; }
.site-nav { display: none; align-items: center; gap: var(--s-4); flex: 1; }
.site-nav a { color: var(--text-2); font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; }
.site-nav a.active, .site-nav a:hover { color: var(--brand-600); }
.site-search-inline { display: none; flex: 1; max-width: 360px; }
.site-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
.site-balance { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; }
.bell { position: relative; display: inline-flex; padding: var(--s-2); border-radius: var(--r-full); color: var(--text-2); }
.bell:hover { background: var(--surface-2); }
.bell .dot {
  position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--err-fg); border: 2px solid var(--surface);
}

/* 漢堡選單：純 CSS <details>，不寫 JS（UI-SPEC §A5.1） */
.nav-toggle { display: inline-flex; }
.nav-toggle > summary { list-style: none; cursor: pointer; padding: var(--s-2); border-radius: var(--r-sm); color: var(--text); }
.nav-toggle > summary::-webkit-details-marker { display: none; }
.nav-toggle > summary .icon-bars { display: block; width: 22px; height: 2px; background: currentColor; position: relative; }
.nav-toggle > summary .icon-bars::before, .nav-toggle > summary .icon-bars::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor;
}
.nav-toggle > summary .icon-bars::before { top: -7px; }
.nav-toggle > summary .icon-bars::after { top: 7px; }
.nav-drawer {
  position: fixed; inset: var(--header-h) 0 0 0; background: var(--surface); z-index: 39;
  padding: var(--s-4); overflow-y: auto;
}
.nav-drawer a { display: block; padding: var(--s-3) var(--s-2); font-weight: 600; color: var(--text); border-bottom: 1px solid var(--border); }
.nav-drawer .site-search-inline { display: block; margin-bottom: var(--s-4); }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-nav { display: flex; }
  .site-search-inline { display: block; }
}

/* 全站橫幅（維護 / 停單 / 公告，UI-SPEC §A6.1） */
.site-banner { padding: var(--s-2) var(--s-4); text-align: center; font-size: var(--fs-sm); font-weight: 600; }
.site-banner-warn { background: var(--warn-bg); color: var(--warn-fg); }
.site-banner-info { background: var(--info-bg); color: var(--info-fg); }

main.container { padding-top: var(--s-5); padding-bottom: var(--s-8); }
footer.site { border-top: 1px solid var(--border); padding: var(--s-6) var(--s-4); color: var(--text-3); font-size: var(--fs-sm); text-align: center; }

/* ===== 4. 按鈕 ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: 40px; padding: 0 var(--s-4); border-radius: var(--r-md); border: 1px solid transparent;
  font-weight: 600; font-size: var(--fs-sm); cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  text-decoration: none; font-family: inherit;
}
.btn:hover { text-decoration: none; }
.btn-sm { height: 32px; padding: 0 var(--s-3); font-size: var(--fs-xs); }
.btn-lg { height: 48px; padding: 0 var(--s-5); font-size: var(--fs-base); }
.btn-block { display: flex; width: 100%; }
.btn-primary { background: var(--brand-600); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-700); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { background: var(--err-fg); color: var(--on-brand); }
.btn-danger:hover { opacity: .9; }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn .spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--on-brand-a40); border-top-color: var(--on-brand); animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== 5. 表單元件 ===== */
.field { margin-bottom: var(--s-4); }
.field label, label.field-label { display: block; font-weight: 600; font-size: var(--fs-sm); margin-bottom: var(--s-2); color: var(--text); }
.field label .req { color: var(--err-fg); }
.field-hint { font-size: var(--fs-xs); color: var(--text-2); margin-top: var(--s-1); }
.field-error { font-size: var(--fs-xs); color: var(--err-fg); margin-top: var(--s-1); font-weight: 600; }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--err-bd); background: var(--err-bg); }

.input, .select, .textarea {
  width: 100%; height: 44px; padding: 0 var(--s-3); border-radius: var(--r-md);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font-size: 1rem; font-family: inherit;
  transition: border-color var(--dur) var(--ease), outline var(--dur) var(--ease);
}
.textarea { height: auto; min-height: 110px; padding: var(--s-3); resize: vertical; line-height: var(--lh-base); }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--brand-500); outline-offset: 1px; border-color: var(--brand-500); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--err-bd); }
select.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%2394a3b8' d='M5.5 7.5l4.5 4.5 4.5-4.5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; }
.checkbox-row, .radio-row { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); margin-bottom: var(--s-2); }
.checkbox-row input, .radio-row input { width: 18px; height: 18px; flex-shrink: 0; }

.qty-quick { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-2); }
.qty-quick button {
  height: 32px; padding: 0 var(--s-3); border-radius: var(--r-full); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text-2); font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
}
.qty-quick button:hover { border-color: var(--brand-500); color: var(--brand-600); }

.password-field { position: relative; }
.password-field .input { padding-right: 44px; }
.password-toggle {
  position: absolute; right: var(--s-1); top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: var(--s-2); color: var(--text-3);
}

/* ===== 6. 卡片 ===== */
.card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: var(--s-5); margin-bottom: var(--s-4); }
.card-hover { transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.card-hover:hover { box-shadow: var(--sh-2); transform: translateY(-1px); }
.card-flat { background: var(--surface-2); box-shadow: none; }
.card-title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }

/* ===== 7. 服務卡 ===== */
.svc-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media (min-width: 640px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }

.svc-card {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: var(--s-4); gap: var(--s-2);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
  position: relative;
}
.svc-card:hover { box-shadow: var(--sh-2); transform: translateY(-1px); border-color: var(--border-strong); }
.svc-card-title {
  font-weight: 700; font-size: var(--fs-base); color: var(--text); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
.svc-card-badges { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.svc-card-meta { color: var(--text-2); font-size: var(--fs-xs); }
.svc-card-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-2); }
.svc-card-price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 800; font-size: var(--fs-lg); color: var(--text); }
.svc-card-price small { display: block; font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-xs); color: var(--text-3); }
.svc-card-note { font-size: var(--fs-xs); color: var(--text-3); }
.svc-card-original {
  margin-top: var(--s-2); border-top: 1px dashed var(--border); padding-top: var(--s-2);
}
.svc-card-original summary { cursor: pointer; font-size: var(--fs-xs); color: var(--text-3); }
.svc-card-original p { margin: var(--s-1) 0 0; font-size: var(--fs-xs); color: var(--text-3); overflow-wrap: anywhere; }

/* ===== 8. 徽章 / 提示 ===== */
.badge {
  display: inline-flex; align-items: center; gap: 4px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 700; padding: 2px 10px; border: 1px solid transparent; white-space: nowrap;
}
.badge-neutral, .badge-submitting { background: var(--surface-2); color: var(--text-2); border-color: var(--border); }
.badge-pending, .badge-processing, .badge-in_progress, .badge-info { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-bd); }
.badge-completed, .badge-approved, .badge-active, .badge-ok { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-bd); }
.badge-partial, .badge-awaiting_reconcile, .badge-warn { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bd); }
.badge-canceled, .badge-failed, .badge-rejected, .badge-error, .badge-suspended, .badge-err { background: var(--err-bg); color: var(--err-fg); border-color: var(--err-bd); }
.badge-brand { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }

.alert { display: flex; gap: var(--s-3); align-items: flex-start; border-left: 3px solid; border-radius: var(--r-md); padding: var(--s-4); margin-bottom: var(--s-4); background: var(--surface-2); }
.alert-icon { flex-shrink: 0; font-size: var(--fs-lg); line-height: 1; }
.alert-body { flex: 1; min-width: 0; }
.alert-title { font-weight: 700; margin-bottom: 2px; }
.alert-text { font-size: var(--fs-sm); color: var(--text-2); }
.alert-actions { margin-top: var(--s-3); display: flex; gap: var(--s-2); flex-wrap: wrap; }
.alert-ok { border-color: var(--ok-bd); background: var(--ok-bg); } .alert-ok .alert-title { color: var(--ok-fg); }
.alert-warn { border-color: var(--warn-bd); background: var(--warn-bg); } .alert-warn .alert-title { color: var(--warn-fg); }
.alert-err { border-color: var(--err-bd); background: var(--err-bg); } .alert-err .alert-title { color: var(--err-fg); }
.alert-info { border-color: var(--info-bd); background: var(--info-bg); } .alert-info .alert-title { color: var(--info-fg); }
.alert.fade-out { animation: fadeout .4s var(--ease) 3s forwards; }
@keyframes fadeout { to { opacity: 0; height: 0; padding: 0; margin: 0; overflow: hidden; border: 0; } }

/* 舊 flash class 映射到新 alert 視覺，避免尚未改完的頁面樣式跑掉 */
.flash { border-left: 3px solid; border-radius: var(--r-md); padding: var(--s-4); margin-bottom: var(--s-4); font-size: var(--fs-sm); }
.flash-success { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-bd); }
.flash-error { background: var(--err-bg); color: var(--err-fg); border-color: var(--err-bd); }
.flash-warning { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bd); }
.flash-info { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-bd); }

/* ===== 9. 分面 / Chips ===== */
.chip-row { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; }
.chip-row::-webkit-scrollbar { display: none; }

/* 桌面版直接換行攤開，不要橫捲。
   橫捲在手機上是對的（籤多、螢幕窄），但在桌面上沒有捲軸提示，
   使用者根本不知道右邊還有 Threads / Discord —— 等於那兩個平台不存在。 */
@media (min-width: 900px) {
  .chip-row { flex-wrap: wrap; overflow-x: visible; }
  .chip { flex-shrink: 1; }
}
.chip {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; border-radius: var(--r-full);
  padding: var(--s-2) var(--s-4); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-2);
  text-decoration: none; cursor: pointer;
}
.chip:hover { border-color: var(--brand-500); color: var(--brand-600); text-decoration: none; }
.chip-active, .chip[aria-current="true"] { background: var(--brand-600); border-color: var(--brand-600); color: var(--on-brand); }
.chip .chip-n { opacity: .75; font-family: var(--font-mono); }
.chip-active .chip-n { opacity: .9; }

.platform-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
@media (min-width: 640px) { .platform-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .platform-grid { grid-template-columns: repeat(5, 1fr); } }
.platform-tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-2); color: var(--text); text-decoration: none;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.platform-tile:hover { box-shadow: var(--sh-2); transform: translateY(-1px); text-decoration: none; }
.platform-tile .icon { font-size: var(--fs-2xl); }
.platform-tile .name { font-weight: 700; font-size: var(--fs-sm); }
.platform-tile .count { font-size: var(--fs-xs); color: var(--text-3); font-family: var(--font-mono); }

/* 篩選面板：手機為抽屜（<details> 或 dialog 皆可，此處用固定定位覆蓋層 + checkbox 無 JS 版） */
.facet-bar { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-4); }
.facet-toggle-btn { display: inline-flex; }
.facet-count-dot { background: var(--brand-600); color: var(--on-brand); border-radius: var(--r-full); font-size: var(--fs-xs); padding: 0 6px; margin-left: 4px; font-family: var(--font-mono); }
.facet-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s-4); margin-bottom: var(--s-4);
}
.facet-panel[hidden] { display: none; }
.facet-group { margin-bottom: var(--s-4); }
.facet-group:last-child { margin-bottom: 0; }
.facet-group h4 { font-size: var(--fs-sm); margin-bottom: var(--s-2); color: var(--text-2); }
.facet-options { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.facet-actions { display: flex; gap: var(--s-2); margin-top: var(--s-4); border-top: 1px solid var(--border); padding-top: var(--s-4); }
.result-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); font-size: var(--fs-sm); color: var(--text-2); }
.applied-filters { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.applied-filters .clear-all { color: var(--err-fg); font-size: var(--fs-xs); font-weight: 600; }

@media (min-width: 900px) {
  .services-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--s-5); align-items: start; }
  .facet-panel { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
  .facet-toggle-btn { display: none; }
}

/* ===== 10. 表格 ===== */
.table-scroll { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; background: var(--surface); }
table.table th, table.table td { padding: var(--s-3); border-bottom: 1px solid var(--border); text-align: left; font-size: var(--fs-sm); }
table.table th { background: var(--surface-2); position: sticky; top: 0; font-weight: 700; color: var(--text-2); }
table.table tbody tr:nth-child(even) { background: var(--surface-2); }
table.table td.num, table.table th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

@media (max-width: 899px) {
  table.table-cards, table.table-cards thead, table.table-cards tbody, table.table-cards th, table.table-cards td, table.table-cards tr { display: block; }
  table.table-cards thead { display: none; }
  table.table-cards tr { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: var(--s-3); padding: var(--s-3); }
  table.table-cards td { border: none; padding: var(--s-1) 0; display: flex; justify-content: space-between; gap: var(--s-3); text-align: right; }
  table.table-cards td::before { content: attr(data-label); font-weight: 600; color: var(--text-2); text-align: left; }
}

/* dl 垂直條列（手機訂單明細取代多欄表格） */
dl.dl-rows { margin: 0; }
dl.dl-rows > div { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--border); }
dl.dl-rows > div:last-child { border-bottom: none; }
dl.dl-rows dt { color: var(--text-2); font-size: var(--fs-sm); }
dl.dl-rows dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }

/* ===== 11. 骨架 / 空狀態 ===== */
.skel { background: linear-gradient(90deg, var(--surface-2), var(--border), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--r-sm); color: transparent !important; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skel-line { height: 14px; margin-bottom: 8px; }
.skel-card { height: 160px; border-radius: var(--r-lg); }

.empty { text-align: center; padding: var(--s-7) var(--s-4); color: var(--text-2); }
.empty .icon { font-size: 2.5rem; margin-bottom: var(--s-3); }
.empty p { margin-bottom: var(--s-4); }

/* ===== 12. 底部固定列 / 對話框 ===== */
.sticky-bar {
  position: sticky; bottom: 0; z-index: 30; background: var(--surface); border-top: 1px solid var(--border);
  box-shadow: var(--sh-3); padding: var(--s-3) var(--s-4); padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.sticky-bar .amount { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 800; font-size: var(--fs-lg); }
@media (min-width: 900px) { .sticky-bar-mobile-only { display: none; } }
.desktop-only { display: none; }
@media (min-width: 900px) { .desktop-only { display: flex; } }

dialog.modal { border: none; border-radius: var(--r-lg); padding: 0; box-shadow: var(--sh-3); max-width: 420px; width: calc(100% - 32px); color: var(--text); background: var(--surface); }
dialog.modal::backdrop { background: rgb(0 0 0 / .5); }
.modal-body { padding: var(--s-5); }
.modal-actions { display: flex; gap: var(--s-2); margin-top: var(--s-5); }
.modal-actions .btn { flex: 1; }
@media (max-width: 639px) {
  dialog.modal { position: fixed; margin: 0; left: 0; right: 0; bottom: 0; top: auto; max-width: none; width: 100%; border-radius: var(--r-lg) var(--r-lg) 0 0; }
}

/* ===== 13. 進度條 ===== */
.progress { height: 8px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--brand-600); border-radius: var(--r-full); transition: width var(--dur) var(--ease); }
.progress-label { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-2); margin-top: var(--s-1); font-family: var(--font-mono); }

/* 狀態時間軸 */
.timeline { display: flex; align-items: center; margin: var(--s-4) 0; }
.timeline-step { flex: 1; text-align: center; position: relative; font-size: var(--fs-xs); color: var(--text-3); }
.timeline-step .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--border-strong); margin: 0 auto 6px; }
.timeline-step.done .dot { background: var(--brand-600); }
.timeline-step.current .dot { background: var(--brand-600); box-shadow: 0 0 0 4px var(--brand-100); }
.timeline-step::before { content: ""; position: absolute; top: 6px; left: -50%; width: 100%; height: 2px; background: var(--border-strong); z-index: -1; }
.timeline-step:first-child::before { display: none; }
.timeline-step.done::before { background: var(--brand-600); }

/* ===== 14. 首頁 Hero / 區塊 ===== */
.hero { text-align: center; padding: var(--s-7) var(--s-3) var(--s-6); }
.hero h1 { font-size: var(--fs-2xl); margin-bottom: var(--s-2); }
@media (min-width: 640px) { .hero h1 { font-size: var(--fs-3xl); } }
.hero .stat-line { color: var(--text-2); font-size: var(--fs-sm); margin-bottom: var(--s-5); }
.hero .stat-line .num { color: var(--text); font-weight: 700; }
.search-box { position: relative; max-width: 560px; margin: 0 auto var(--s-4); }
.search-box .input { height: 52px; padding-left: 44px; border-radius: var(--r-full); font-size: var(--fs-base); box-shadow: var(--sh-1); }
.search-box .icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.section { margin: var(--s-7) 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s-4); }
.steps { display: grid; grid-template-columns: 1fr; gap: var(--s-4); text-align: center; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--brand-600); color: var(--on-brand); font-weight: 700; margin-bottom: var(--s-2); }
.faq details { border-bottom: 1px solid var(--border); padding: var(--s-3) 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq p { margin-top: var(--s-2); color: var(--text-2); font-size: var(--fs-sm); }

/* ===== 15. 錢包 / 儲值 ===== */
.balance-card { background: linear-gradient(135deg, var(--brand-600), var(--brand-700)); color: var(--on-brand); }
.btn-on-brand { background: var(--on-brand); color: var(--brand-700); }
.btn-on-brand:hover { background: var(--brand-50); }
.balance-card .balance-amount { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-3xl); font-weight: 800; }
.balance-card .muted-on-brand { color: rgb(255 255 255 / .8); font-size: var(--fs-sm); }
.tier-strip { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2); color: var(--text-2); font-size: var(--fs-sm); padding: var(--s-3) 0; }

.amount-presets { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-3); }
.amount-presets button {
  flex: 1; min-width: 80px; height: 44px; border-radius: var(--r-md); border: 1px solid var(--border-strong);
  background: var(--surface); font-weight: 700; font-family: var(--font-mono); cursor: pointer; color: var(--text);
}
.amount-presets button.active, .amount-presets button:hover { border-color: var(--brand-500); background: var(--brand-50); color: var(--brand-700); }

.copy-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px dashed var(--border); }
.copy-row:last-child { border-bottom: none; }
.copy-row dt { color: var(--text-2); font-size: var(--fs-sm); }
.copy-row dd { margin: 0; font-weight: 700; font-family: var(--font-mono); }
.copy-btn { border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--r-sm); padding: 4px 10px; font-size: var(--fs-xs); cursor: pointer; color: var(--text-2); }
.copy-btn:hover { border-color: var(--brand-500); color: var(--brand-600); }
.copy-btn.copied { border-color: var(--ok-bd); background: var(--ok-bg); color: var(--ok-fg); }

.steps-flow { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media (min-width: 900px) { .steps-flow { grid-template-columns: repeat(3, 1fr); } }
.steps-flow .card { height: 100%; }

/* ===== 16. 下單頁 ===== */
.order-layout { display: block; }
@media (min-width: 900px) {
  .order-layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--s-5); align-items: start; }
  .order-quote-col { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
}
.order-step-label { display: flex; align-items: center; gap: var(--s-2); font-weight: 700; color: var(--text-2); font-size: var(--fs-sm); margin-bottom: var(--s-3); text-transform: none; }
.order-step-label .n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-100); color: var(--brand-700); font-size: var(--fs-xs); }
.svc-summary-card { display: flex; flex-direction: column; gap: var(--s-1); }
.quote-panel dl.dl-rows dd { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.quote-state { font-weight: 700; }
.quote-state.state-loading { color: var(--text-3); }
.quote-state.state-ready { color: var(--text); font-size: var(--fs-xl); }
.quote-state.state-error { color: var(--err-fg); }
.quote-state.state-warn { color: var(--warn-fg); }
picker-results, .picker-results { display: flex; flex-direction: column; gap: var(--s-2); }
.picker-item { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); text-decoration: none; color: var(--text); }
.picker-item:hover { border-color: var(--brand-500); background: var(--brand-50); text-decoration: none; }
.picker-item .name { font-weight: 600; font-size: var(--fs-sm); }
.picker-item .price { font-family: var(--font-mono); font-weight: 700; white-space: nowrap; }

/* ===== 17. 訂單卡片 ===== */
.order-card { display: block; text-decoration: none; color: inherit; }
.order-card:hover { text-decoration: none; }
.order-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-2); }
.order-card-no { font-family: var(--font-mono); font-weight: 700; }
.order-card-link { font-size: var(--fs-xs); color: var(--text-2); overflow-wrap: anywhere; margin-bottom: var(--s-2); }
.order-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--text-2); }
.order-card-foot .money { font-weight: 700; color: var(--text); }
.order-filter-chips { margin-bottom: var(--s-4); }

/* ===== 18. 其他工具 class ===== */
.muted { color: var(--text-2); }
.text-3 { color: var(--text-3); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; }
.gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); }
.stack { display: flex; flex-direction: column; gap: var(--s-3); }
.max-w-sm { max-width: 420px; margin-left: auto; margin-right: auto; }
.pagination { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-5); flex-wrap: wrap; font-size: var(--fs-sm); }
.pagination a, .pagination span.current {
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px;
  padding: 0 var(--s-2); border: 1px solid var(--border-strong); border-radius: var(--r-md); color: var(--text-2);
}
.pagination a:hover { border-color: var(--brand-500); color: var(--brand-600); text-decoration: none; }
.pagination span.current { background: var(--brand-600); border-color: var(--brand-600); color: var(--on-brand); font-weight: 700; }
.pagination .pg-info { color: var(--text-3); }

/* ===== 19. 認證頁 ===== */
.auth-wrap { display: flex; flex-direction: column; align-items: center; padding-top: var(--s-6); }
.auth-card { width: 100%; max-width: 400px; }
.trust-list { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-4); font-size: var(--fs-xs); color: var(--text-2); }
.trust-list span { display: flex; align-items: center; gap: 6px; }

/* ===== 20. 結果頁（下單逾時等獨立頁面） ===== */
.result-page { max-width: 560px; margin: var(--s-6) auto; text-align: center; }
.result-page .icon { font-size: 3rem; margin-bottom: var(--s-3); }
.result-page .order-no { font-family: var(--font-mono); font-weight: 700; background: var(--surface-2); padding: var(--s-1) var(--s-3); border-radius: var(--r-sm); display: inline-block; }

/* ===== 21. 響應式硬規則 ===== */
* { min-width: 0; }
.card, .svc-card, table, pre { max-width: 100%; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ── 通知中心（UI-SPEC §B5.1 N4）────────────────────────────── */
.notif-list { display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.notif-item { padding: var(--space-4, 16px); }
.notif-unread { border-left: 3px solid var(--brand, #4f46e5); }
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 12px); flex-wrap: wrap; }
.notif-body { margin: var(--space-3, 12px) 0 0; color: var(--text, #222); line-height: 1.6; }
.notif-actions { margin-top: var(--space-3, 12px); }