/* ══════════════════════════════════════════════════════════════
   theme.css — 單一主題來源（取代所有先前 Phase 1-12 CSS）
   - :root[data-theme="dark"]  / :root[data-theme="light"] 兩組 token
   - 所有元件只用 var(--…)；不得在此檔以外寫死色碼
   - 相容別名讓舊 style.css 的 var(--bg) var(--card) 等繼續運作
   ══════════════════════════════════════════════════════════════ */

/* ── 深色主題 ── */
:root[data-theme="dark"] {
  --bg:             #0a0a0a;
  --bg-card:        #111111;
  --bg-hover:       #1a1a1a;
  --bg-input:       #1a1a1a;
  --border:         #1f1f1f;
  --border-strong:  #2a2a2a;
  --border-hover:   #3a3a3a;
  --text-primary:   #ffffff;
  --text-secondary: #9ca3af;
  --text-muted:     #666666;
  --accent:         #ffffff;
  --accent-fg:      #000000;
  --accent-soft:    rgba(255,255,255,0.08);
  --pill-bg:        #1f1f1f;
  --hero-bg:        linear-gradient(135deg, #1a1f2e 0%, #1a1a2e 50%, #2a1f1a 100%);
  --success:        #22c55e;
  --danger:         #ef4444;
  --warn:           #eab308;
  --overlay:        rgba(0,0,0,0.7);
  --card-shadow:    none;
  --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.4);
}

/* ── 淺色主題 ── */
:root[data-theme="light"] {
  --bg:             #fafaf8;
  --bg-card:        #ffffff;
  --bg-hover:       #f9f9fb;
  --bg-input:       #ffffff;
  --border:         #f0f0f0;
  --border-strong:  #e5e7eb;
  --border-hover:   #d4d4d4;
  --text-primary:   #1a1a1a;
  --text-secondary: #6b7280;
  --text-muted:     #9ca3af;
  --accent:         #1a1a1a;
  --accent-fg:      #ffffff;
  --accent-soft:    rgba(0,0,0,0.04);
  --pill-bg:        #f3f4f6;
  --hero-bg:        linear-gradient(135deg, #eef2ff 0%, #faf5ff 50%, #fefce8 100%);
  --success:        #16a34a;
  --danger:         #dc2626;
  --warn:           #d97706;
  --overlay:        rgba(0,0,0,0.4);
  --card-shadow:    0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.08);
}

/* ── 相容別名（舊 style.css 用的變數名） ── */
:root[data-theme="dark"],
:root[data-theme="light"] {
  --text:          var(--text-primary);
  --muted:         var(--text-secondary);
  --card:          var(--bg-card);
  --card2:         var(--bg-hover);
  --green:         var(--success);
  --red:           var(--danger);
  --accent-light:  var(--accent);
}

/* ── Typography tokens ── */
:root {
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans TC', sans-serif;
  --font-num:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── 全域基礎 ── */
html, body {
  background: var(--bg);
  color: var(--text-primary);
}

body {
  font-family: var(--font-body);
  min-height: 100vh;
  font-size: 14px;
  font-weight: 400;
}

/* ── 確保管理頁表格內一般文字走 DM Sans（body 預設）── */
.data-table td,
.data-table th {
  font-family: var(--font-body);
}

/* ── 數字字型：KPI / 金額 / 百分比統一 Inter + tabular-nums ── */
.kpi-value,
.kpi-sub,
.section-total,
.total-val,
.amt,
.sidebar-rate b,
.rate-badge b,
.asset-card-pct,
.rwd-total-twd,
.rwd-detail,
.rwd-twd,
.rwd-price,
.rwd-month-label,
.budget-cat-total,
.mono,
.num,
[data-num] {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'cv11' 1;
}

/* KPI 大數字權重 + 字距 */
.kpi-value {
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

/* 標籤、說明文字 */
.kpi-label {
  font-weight: 400;
  color: var(--text-secondary);
}
.kpi-sub {
  font-weight: 400;
  color: var(--text-secondary);
}

/* ── 強制統一主要 KPI 卡背景（不讓 style.css --card2 壓過）── */
:root[data-theme="dark"] .kpi-primary,
:root[data-theme="light"] .kpi-primary {
  background: var(--bg-card);
}

/* 卡片標題 */
.chart-card h3,
.section-card h3,
.section-header,
.chart-title-row h3,
.card-title,
.panel-title,
h3 {
  font-weight: 500;
}

/* ── 桌面：100vh 固定、外層不滾動，主內容區內部可滾 ── */
@media (min-width: 769px) {
  html, body {
    height: 100vh !important;
    overflow: hidden !important;
  }
}

/* 移除舊設計任何毛玻璃背景光球殘留 */
.ap-orb { display: none !important; }

/* ── Card 通用外觀（雙主題一致）── */
.kpi-card,
.chart-card,
.section-card,
.mgmt-section,
.mgmt-card,
.overview-card,
.panel,
.dwz-card,
.budget-card,
.income-card,
.exp-plan-card,
.asset-card,
.roi-card,
.other-item-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  transition: border-color .15s ease, box-shadow .2s ease;
}
.kpi-card:hover,
.chart-card:hover,
.section-card:hover,
.mgmt-section:hover,
.mgmt-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--card-shadow-hover);
}

/* ═══════════════════════════════════════════════════════════════
   Desktop Layout V2 — 1440×900 單屏全覽（B2C app 質感）
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  /* App 外層 — 已移除 sidebar，全寬使用 */
  #app {
    margin-left: 0 !important;
    height: 100vh !important;
    overflow: hidden !important;
  }
  #app-content {
    padding: 0 !important;
    height: calc(100vh - 56px) !important;
    overflow-y: auto !important;
    max-width: none !important;
    background: var(--bg) !important;
  }
  #tab-management, #tab-dwz {
    max-width: 1440px;
    margin: 0 auto;
    padding: 16px 24px;
  }
  #tab-overview { padding: 0 !important; }
  #tab-overview .overview-grid {
    max-width: 1440px;
    margin: 0 auto;
    padding: 16px 24px;
  }

  /* ── KPI row：6 張 × 80px，8px gap ── */
  .kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }
  .kpi-card {
    min-width: 0 !important;
    height: 100px !important;
    padding: 14px 16px !important;
    border-radius: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow: visible !important;
  }
  .kpi-label {
    font-size: 11px !important;
    color: var(--text-secondary) !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    margin-bottom: 2px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .kpi-label-dot { display: none !important; }
  .kpi-value {
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    color: var(--text-primary) !important;
    white-space: nowrap !important;
    overflow: visible !important;
    margin: 0 !important;
    background: transparent !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
  }
  .kpi-card.kpi-primary .kpi-value { font-size: 26px !important; }
  .kpi-value.pos     { color: var(--success) !important; }
  .kpi-value.neg     { color: var(--danger) !important; }
  .kpi-value.neutral { color: var(--text-secondary) !important; }
  .kpi-sub {
    font-size: 10px !important;
    color: var(--text-muted) !important;
    margin-top: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
  }
  .kpi-card.kpi-gain { border-left: 3px solid var(--success) !important; }
  .kpi-card.kpi-loss { border-left: 3px solid var(--danger) !important; }

  /* ── Overview 2-column 55/45 ── */
  .overview-grid {
    display: grid !important;
    grid-template-columns: 55% 45% !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
    align-items: start !important;
  }
  .overview-main,
  .overview-side {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* ── Chart 卡片 ── */
  .chart-card {
    padding: 10px 14px !important;
    border-radius: 10px !important;
  }
  .chart-card h3,
  .chart-title-row h3 {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    margin: 0 0 6px 0 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
  .chart-title-row { margin-bottom: 6px !important; }

  /* 固定 chart 高度 — 一頁看完不滾動 */
  #daily-trend-wrap { height: 200px !important; }
  #trend-wrap       { height: 200px !important; }
  #monthly-wrap     { height: 180px !important; }
  #pie-wrap         { height: auto !important; min-height: 240px !important; }

  /* 所有圓角統一 10px */
  .kpi-card,
  .chart-card,
  .section-card,
  .panel,
  .mgmt-section,
  .mgmt-card {
    border-radius: 10px !important;
  }
}

/* ── Sidebar ── */
#sidebar,
.sidebar {
  background: var(--bg-card);
  border-right: 1px solid var(--border);
}
.sidebar-logo,
.sidebar-logo-text {
  color: var(--text-primary);
  font-weight: 700;
}
.sidebar-nav-item,
.snav-item,
.nav-item {
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-left: none;
  border-radius: 8px;
  padding: 0 12px;
  height: 36px;
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  transition: background .12s ease, color .12s ease;
}
.sidebar-nav-item:hover,
.snav-item:hover,
.nav-item:hover {
  background: var(--accent-soft);
  color: var(--text-primary);
}
.sidebar-nav-item.active,
.snav-item.active,
.nav-item.active {
  background: var(--accent-soft);
  color: var(--text-primary);
  font-weight: 600;
}
.sidebar-nav-item.active::before,
.sidebar-nav-item.active::after,
.snav-item.active::before,
.nav-item.active::before { display: none; content: none; }

.sidebar-footer,
.sidebar-info-block,
.sb-rates,
.sb-build {
  color: var(--text-muted);
  background: transparent;
  border: none;
  font-size: 10px;
}
.sidebar-footer .sidebar-rate,
.sidebar-footer .sidebar-update,
.sidebar-footer .sidebar-build-badge,
.sidebar-footer #sidebar-rate-val,
.sidebar-footer #sidebar-build-label {
  font-size: 10px !important;
}
.sidebar-info-block {
  padding: 6px 8px !important;
  gap: 2px !important;
}

/* ── 按鈕 ── */
button.btn-primary,
.btn.primary,
button.primary,
.btn-save {
  background: var(--accent);
  color: var(--accent-fg);
  border: 1px solid var(--accent);
  border-radius: 8px;
  font-weight: 500;
  box-shadow: none;
  transition: all .15s ease;
}
button.btn-primary:hover,
.btn.primary:hover,
button.primary:hover,
.btn-save:hover {
  filter: brightness(0.9);
}

button:not(.btn-primary):not(.primary):not(.btn-save):not(.btn-danger):not(.sidebar-nav-item):not(.snav-item):not(.nav-item):not(.tab-btn):not(.filter-btn),
.btn:not(.primary):not(.btn-save):not(.btn-danger) {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-weight: 500;
  transition: all .15s ease;
}
button:not(.btn-primary):not(.primary):not(.btn-save):not(.btn-danger):not(.sidebar-nav-item):not(.snav-item):not(.nav-item):not(.tab-btn):not(.filter-btn):hover,
.btn:not(.primary):not(.btn-save):not(.btn-danger):hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}

button.btn-danger,
.btn-danger {
  background: var(--bg-card);
  color: var(--danger);
  border: 1px solid var(--border);
  border-radius: 8px;
}
button.btn-danger:hover {
  background: var(--accent-soft);
  border-color: var(--danger);
}

/* ── 輸入框 ── */
input, select, textarea {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  transition: border-color .15s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--border-hover); }
input:focus, select:focus, textarea:focus {
  border-color: var(--text-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
::placeholder { color: var(--text-muted); }

/* ── 表格 ── */
table {
  background: transparent;
  border-collapse: separate;
  border-spacing: 0;
}
table th {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
  background: transparent;
}
table td {
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
}
table tr:hover,
.list-row:hover,
.income-row:hover {
  background: var(--bg-hover);
}

/* ── pill / badge ── */
.pill, .badge, .chip {
  background: var(--accent-soft);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
}

/* ── Modal / Drawer ── */
.modal-overlay, .overlay {
  background: var(--overlay);
}
.modal-box, .modal, .drawer {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--card-shadow-hover);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-hover);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Skeleton（讀取中）── */
.skel {
  background: var(--accent-soft);
  background-image: none;
  color: transparent !important;
  animation: skel-pulse 1.4s ease-in-out infinite;
  border-radius: 6px;
}
@keyframes skel-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.9; }
}
.skel * { visibility: hidden; }

/* ── Filter / tab 按鈕 ── */
.filter-btn, .tab-btn {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  transition: all .12s ease;
}
.filter-btn:hover, .tab-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.filter-btn.active, .tab-btn.active {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}

/* ── 進度條 ── */
.budget-progress, .progress-bar {
  background: var(--accent-soft);
  border-radius: 999px;
}
.budget-progress-fill, .progress-fill {
  background: var(--text-primary);
  border-radius: 999px;
}

/* ── 連結 ── */
a { color: var(--text-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── canvas 透明 ── */
canvas { background: transparent !important; }

/* ── 價格列 dots ── */
.dot.ok   { background: var(--success); }
.dot.err  { background: var(--danger); }
.dot.spin { background: var(--text-primary); }

/* ── 個股/幣日漲跌標示 ── */
.sym-change {
  font-size: 12px;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.sym-change.pos  { color: var(--success); }
.sym-change.neg  { color: var(--danger); }
.sym-change.zero { color: var(--text-muted); }
.sym-change.none { color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════
   Navbar v2 — 取代 sidebar
   ═══════════════════════════════════════════════════════════════ */
#app-header {
  display: flex !important;
  height: 56px !important;
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 0 32px !important;
  gap: 32px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  align-items: center !important;
}
#app-header h1 { display: none !important; }

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
}
.nav-logo {
  width: 32px; height: 32px;
  background: var(--accent);
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--accent-fg);
  font-weight: 700;
  font-size: 16px;
  font-family: var(--font-num);
}

/* 中間導覽 — 膠囊外框 */
#app-header .tab-nav {
  display: flex !important;
  gap: 2px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 999px !important;
  padding: 4px !important;
  background: var(--bg-card) !important;
}
#app-header .tab-btn {
  padding: 6px 16px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  background: transparent !important;
  border: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: all .15s !important;
}
#app-header .tab-btn:hover {
  background: var(--pill-bg) !important;
  color: var(--text-primary) !important;
}
#app-header .tab-btn.active {
  background: var(--accent) !important;
  color: var(--accent-fg) !important;
  border: none !important;
}

/* 右側 */
.header-right {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.header-right .update-badge {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-size: 11px !important;
  color: var(--text-muted) !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.header-right .rate-badge {
  padding: 6px 12px !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
}
.header-right .btn-theme {
  width: 32px !important; height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid var(--border-strong) !important;
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  font-size: 14px !important;
  display: grid !important;
  place-items: center !important;
  transition: background .15s !important;
}
.header-right .btn-theme:hover {
  background: var(--pill-bg) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}
.header-right .btn-signout {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-size: 13px !important;
  color: var(--text-secondary) !important;
}
.header-right .btn-signout:hover {
  color: var(--text-primary) !important;
  border: none !important;
}

/* 隱藏舊 mobile menu btn (HTML 已移除) */
.mobile-menu-btn { display: none !important; }

/* 隱藏舊 sidebar (HTML 已移除，但保險起見) */
#sidebar { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   Hero — KPI 區漸層背景
   ═══════════════════════════════════════════════════════════════ */
.app-hero {
  position: relative;
  background: var(--hero-bg);
  border-bottom: 1px solid var(--border-strong);
  overflow: hidden;
}
.app-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding: 32px 24px;
}
.app-hero-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.app-hero-blob-1 {
  width: 320px; height: 320px;
  background: rgba(148,163,184,0.12);
  right: -200px; top: -80px;
}
.app-hero-blob-2 {
  width: 160px; height: 160px;
  background: rgba(148,163,184,0.08);
  right: 120px; top: -50px;
}
:root[data-theme="dark"] .app-hero-blob-1 { background: rgba(148,163,184,0.06); }
:root[data-theme="dark"] .app-hero-blob-2 { background: rgba(148,163,184,0.04); }

/* Hero 內 KPI grid 不需要外距（hero 自己有 padding） */
.app-hero .kpi-grid { margin-bottom: 0 !important; }

/* Hero 內 KPI 卡片 — 白底浮在漸層上 */
.app-hero .kpi-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04) !important;
  transition: box-shadow .2s ease !important;
}
.app-hero .kpi-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
  border-color: var(--border) !important;
}
:root[data-theme="dark"] .app-hero .kpi-card {
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   Page footer — 版本號（桌面 + 手機都顯示）
   ═══════════════════════════════════════════════════════════════ */
.page-footer {
  max-width: 1440px;
  margin: 0 auto;
  padding: 16px 24px 24px;
  font-size: 11px;
  color: var(--text-muted);
}
.page-footer-build { font-family: var(--font-num); }

/* 隱藏 mobile-only footer，改用統一 page-footer */
.mobile-footer { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   手機版：直接顯示橫向 tab，不再用漢堡選單
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #app-header {
    padding: 0 12px !important;
    gap: 12px !important;
    height: auto !important;
    min-height: 56px !important;
    flex-wrap: wrap;
  }
  #app-header .nav-brand-text { display: none; }
  #app-header .tab-nav {
    order: 3;
    flex-basis: 100%;
    justify-content: center;
    margin: 0 -12px 8px;
    border-radius: 0 !important;
    border: none !important;
    border-top: 1px solid var(--border) !important;
    padding: 8px !important;
    background: var(--bg-card) !important;
  }
  #app-header .header-right {
    gap: 8px !important;
  }
  #app-header .header-right .update-badge { display: none; }
  .app-hero-inner { padding: 16px !important; }
  .app-hero .kpi-grid { gap: 8px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   Holdings Hero — 管理頁頂部 4 張類別卡（可內嵌展開明細）
   ═══════════════════════════════════════════════════════════════ */
.holdings-hero {
  margin: 0 auto 16px;
  max-width: 1440px;
  padding: 16px 24px 0;
}
.holdings-hero-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px 4px;
}
.holdings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-items: start;
}
.holding-block {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  transition: grid-column .2s ease;
}
.holding-block.expanded {
  grid-column: 1 / -1;
}
.holding-block-full { grid-column: 1 / -1 !important; }
.holding-card-split .hc-amount { font-size: 30px !important; }
.extras-hero { margin-top: 8px; }
.extras-hero .holdings-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

.holding-card {
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: 20px;
  padding: 22px 26px 20px;
  min-height: 180px;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  transition: transform .15s ease, box-shadow .2s ease, border-radius .2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  width: 100%;
}
.holding-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.holding-block.expanded .holding-card {
  border-radius: 20px 20px 0 0;
  transform: none;
}

.holding-card .hc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 12px;
  font-weight: 500;
  z-index: 1;
  position: relative;
}
.holding-card .hc-label {
  letter-spacing: 0.02em;
  opacity: 0.75;
}
.holding-card .hc-count {
  opacity: 0.55;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}
.holding-card .hc-amount {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: auto;
  padding-top: 16px;
  z-index: 1;
  position: relative;
}
.holding-card .hc-change {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  margin-top: 4px;
  opacity: 0.85;
  z-index: 1;
  min-height: 16px;
  position: relative;
}
.holding-card .hc-change.pos { color: #4ade80; }
.holding-card .hc-change.neg { color: #f87171; }
.holding-card .hc-symbols {
  font-family: var(--font-num);
  font-size: 11px;
  letter-spacing: 0.04em;
  opacity: 0.55;
  margin-top: 12px;
  z-index: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}
.hc-arrow {
  position: absolute;
  bottom: 14px;
  right: 18px;
  font-size: 14px;
  opacity: 0.45;
  transition: transform .2s ease, opacity .2s ease;
  z-index: 1;
  line-height: 1;
}
.holding-card:hover .hc-arrow { opacity: 0.8; }
.holding-block.expanded .hc-arrow { transform: rotate(180deg); opacity: 0.9; }

/* ── 卡片配色 (用 !important 蓋過 theme.css 的通用 button 規則) ── */
.holding-card.hc-crypto { background: #111111 !important; color: #ffffff !important; }
.holding-card.hc-us     { background: #1e3a5f !important; color: #ffffff !important; }
.holding-card.hc-tw     { background: #f5f0e8 !important; color: #1a1a1a !important; }
.holding-card.hc-cash   { background: #1a3d2b !important; color: #ffffff !important; }
.holding-card.hc-other-assets { background: #2d1a4a !important; color: #ffffff !important; }
.holding-card.hc-rewards      { background: #3d1a1a !important; color: #ffffff !important; }

/* 合併卡（資產+負債）內部左右分欄 */
.holding-card-split { padding: 22px 24px 20px !important; }
.holding-card-split .hc-split-body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  margin-top: auto;
  padding-top: 16px;
  align-items: end;
  z-index: 1;
  position: relative;
}
.holding-card-split .hc-split-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.holding-card-split .hc-split-right {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: right;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.hc-side-row {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 8px;
}
.hc-side-label {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  font-family: var(--font-body);
}
.hc-side-val {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.hc-side-debt .hc-side-val { color: #f87171; }
.hc-side-net .hc-side-val  { color: #4ade80; }
.holding-card.hc-crypto:hover,
.holding-card.hc-us:hover,
.holding-card.hc-tw:hover,
.holding-card.hc-cash:hover,
.holding-card.hc-other-assets:hover,
.holding-card.hc-rewards:hover { border-color: transparent !important; }

/* 深色卡（黑/藍/綠/紫/紅褐/墨綠）：標題、標的、可用 用半透明白 */
.hc-crypto .hc-label, .hc-us .hc-label, .hc-cash .hc-label,
.hc-other-assets .hc-label, .hc-rewards .hc-label,
.hc-crypto .hc-count, .hc-us .hc-count, .hc-cash .hc-count,
.hc-other-assets .hc-count, .hc-rewards .hc-count { color: rgba(255,255,255,0.6); }
.hc-crypto .hc-amount, .hc-us .hc-amount, .hc-cash .hc-amount,
.hc-other-assets .hc-amount, .hc-rewards .hc-amount { color: #ffffff !important; }
.hc-crypto .hc-symbols, .hc-us .hc-symbols, .hc-cash .hc-symbols,
.hc-other-assets .hc-symbols, .hc-rewards .hc-symbols,
.hc-crypto .hc-avail, .hc-us .hc-avail, .hc-cash .hc-avail,
.hc-other-assets .hc-avail, .hc-rewards .hc-avail { color: rgba(255,255,255,0.7); }

/* 米白卡（台股）：標題 #666、數字 #1a1a1a、標的 #888 */
.hc-tw .hc-label, .hc-tw .hc-count { color: #666666; }
.hc-tw .hc-amount { color: #1a1a1a !important; }
.hc-tw .hc-symbols, .hc-tw .hc-avail { color: #888888; }
.hc-tw .hc-change.pos { color: #16a34a !important; }
.hc-tw .hc-change.neg { color: #dc2626 !important; }

/* 邊框：deep cards 內框透明 */
.holding-card { border: none !important; }

/* 可用現金小字 */
.hc-avail {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  margin-top: 4px;
  z-index: 1;
  position: relative;
  min-height: 16px;
}

/* ── 裝飾元素 ── */
.hc-deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.hc-deco-rings {
  top: -40px; right: -40px;
  width: 220px; height: 220px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.06);
}
.hc-deco-rings::before,
.hc-deco-rings::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.06);
}
.hc-deco-rings::before {
  inset: 30px;
}
.hc-deco-rings::after {
  inset: 60px;
}
.hc-deco-stars {
  top: 0; right: 0; bottom: 0; width: 55%;
  background-image:
    radial-gradient(rgba(255,255,255,0.18) 1px, transparent 1.2px),
    radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.08) 0.8px, transparent 1px);
  background-size: 38px 32px, 24px 28px, 16px 20px;
  background-position: 4px 8px, 14px 6px, 8px 18px;
  opacity: 0.55;
}
.hc-deco-stripes {
  top: 0; right: 0; bottom: 0; width: 45%;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent 14px,
    rgba(0,0,0,0.06) 14px,
    rgba(0,0,0,0.06) 15px
  );
}
.hc-deco-dollar {
  top: 50%; right: -30px;
  transform: translateY(-50%);
  font-family: var(--font-num);
  font-size: 220px;
  font-weight: 800;
  color: rgba(255,255,255,0.07);
  line-height: 1;
}

/* ── 內嵌明細展開 ── */
.holding-detail {
  display: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 20px 20px;
  padding: 20px 24px;
  animation: hd-expand .3s ease;
  overflow: hidden;
}
.holding-block.expanded .holding-detail { display: block; }
@keyframes hd-expand {
  from { opacity: 0; transform: translateY(-6px); max-height: 0; }
  to   { opacity: 1; transform: translateY(0);     max-height: 1500px; }
}

/* 移除展開後的 section-card 邊框/背景，避免雙層 */
.holding-detail .section-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.holding-detail .section-card .section-header { display: none !important; }
.holding-detail .section-body {
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
}

/* 手機 1 欄 */
@media (max-width: 768px) {
  .holdings-grid,
  .extras-hero .holdings-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .holdings-hero { padding: 12px 12px 0; }
  .holding-card { min-height: 160px; padding: 18px 20px; }
  .holding-card .hc-amount,
  .holding-card-split .hc-amount { font-size: 28px !important; padding-top: 12px !important; }
  .holding-block.expanded { grid-column: 1 / -1; }
  .holding-detail { padding: 14px 12px; }

  /* 手機版隱藏卡片標題的英文後綴 */
  .hc-label-en { display: none; }

  /* 合併卡 split body：手機改成上下排列 */
  .holding-card-split .hc-split-body {
    grid-template-columns: 1fr;
    padding-top: 12px;
    gap: 8px;
  }
  .holding-card-split .hc-split-right {
    flex-direction: row;
    justify-content: flex-start;
    gap: 16px;
    text-align: left;
  }
  .hc-side-row { justify-content: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════
   Reward 行 — 手機版改為 ⋯ + Action Sheet
   ═══════════════════════════════════════════════════════════════ */
.rwd-more { display: none; }

/* Reward 行內配色 */
.rwd-qty   { color: #16a34a !important; font-weight: 600 !important; }
.rwd-twd   { color: var(--text-primary) !important; font-weight: 700 !important; }
.rwd-price { color: var(--text-muted) !important; }
.rwd-sym {
  background: rgba(245,158,11,0.15) !important;
  color: #d97706 !important;
  border-color: rgba(245,158,11,0.25) !important;
}
:root[data-theme="dark"] .rwd-sym {
  background: rgba(245,158,11,0.18) !important;
  color: #fbbf24 !important;
  border-color: rgba(245,158,11,0.3) !important;
}
.reward-sheet-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1100;
  align-items: flex-end;
  justify-content: center;
}
.reward-sheet-overlay.open { display: flex; }
.reward-sheet {
  width: 100%;
  max-width: 480px;
  background: var(--bg-card);
  border-radius: 16px 16px 0 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: rs-slide-up .22s ease;
  margin-bottom: env(safe-area-inset-bottom, 0);
}
@keyframes rs-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.rs-btn {
  width: 100%;
  padding: 14px;
  font-size: 15px;
  font-weight: 500;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  background: var(--bg-hover);
  color: var(--text-primary);
}
.rs-btn.rs-edit { color: var(--text-primary); }
.rs-btn.rs-del  { color: var(--danger); }
.rs-btn.rs-cancel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  margin-top: 4px;
  font-weight: 600;
}

@media (max-width: 768px) {
  .rwd-actions { display: none !important; }
  .rwd-more {
    display: flex !important;
    flex: 0 0 28px;
    width: 28px; height: 28px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    margin-left: 4px;
    line-height: 1;
  }
  .rwd-more:hover { background: var(--bg-hover); border-radius: 6px; }
}

/* ═══════════════════════════════════════════════════════════════
   Asset card 列（管理頁展開明細）— 細線分隔 + 三欄
   ═══════════════════════════════════════════════════════════════ */
#cash-cards, #tw-cards, #us-cards, #crypto-cards { display: block !important; }
#cash-table-wrap, #crypto-table-wrap, #tw-table-wrap, #us-table-wrap { display: none !important; }
#cash-cards .asset-card,
#tw-cards .asset-card,
#us-cards .asset-card,
#crypto-cards .asset-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  background: var(--bg-card) !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  transition: background .15s !important;
  grid-template-columns: none !important;
  grid-template-areas: none !important;
}
#cash-cards .asset-card:hover,
#tw-cards .asset-card:hover,
#us-cards .asset-card:hover,
#crypto-cards .asset-card:hover {
  background: var(--bg-hover) !important;
}
#cash-cards .asset-card:last-child,
#tw-cards .asset-card:last-child,
#us-cards .asset-card:last-child,
#crypto-cards .asset-card:last-child { border-bottom: none !important; }

#cash-cards .asset-card-pct,
#tw-cards .asset-card-pct,
#us-cards .asset-card-pct,
#crypto-cards .asset-card-pct {
  flex: 0 0 48px !important;
  width: 48px !important; height: 48px !important;
  border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  color: #fff !important;
  font-size: 13px !important; font-weight: 700 !important;
  letter-spacing: 0 !important;
  font-family: var(--font-num) !important;
  grid-area: auto !important;
  padding: 0 !important;
}
#crypto-cards .asset-card-pct { background: #f59e0b !important; }
#us-cards     .asset-card-pct { background: #3b82f6 !important; }
#tw-cards     .asset-card-pct { background: #1a1a1a !important; }
#cash-cards   .asset-card-pct { background: #16a34a !important; }
.asset-card.err .asset-card-pct {
  background: rgba(239,68,68,0.18) !important; color: var(--danger) !important;
}

.asset-card-info {
  flex: 1 1 auto !important;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.asset-card-sym {
  font-family: 'Inter', var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.asset-card-sub {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.4;
}
.asset-card-right {
  flex: 0 0 auto !important;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.asset-card-twd {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
}
.asset-card-change {
  font-size: 12px !important;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}
.asset-card-change .sym-change { font-size: 12px !important; }

@media (max-width: 768px) {
  #cash-cards .asset-card,
  #tw-cards .asset-card,
  #us-cards .asset-card,
  #crypto-cards .asset-card {
    padding: 10px 12px !important;
    gap: 10px !important;
  }
  #cash-cards .asset-card-pct,
  #tw-cards .asset-card-pct,
  #us-cards .asset-card-pct,
  #crypto-cards .asset-card-pct {
    flex: 0 0 40px !important;
    width: 40px !important; height: 40px !important;
    font-size: 11px !important;
  }
  .asset-card-sym { font-size: 14px !important; }
  .asset-card-twd { font-size: 15px !important; }
  .asset-card-sub { white-space: normal !important; }
}

/* ═══════════════════════════════════════════════════════════════
   圓餅圖 — 圓餅左 + 圖例右（垂直）
   ═══════════════════════════════════════════════════════════════ */
.pie-wrap {
  display: flex;
  align-items: center;
  gap: 0;
}
.pie-wrap .pie-canvas {
  flex: 1 1 50%;
  position: relative;
  height: 220px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pie-wrap .pie-canvas canvas {
  max-width: 220px !important;
  max-height: 220px !important;
  width: auto !important;
  height: auto !important;
}
.pie-legend {
  flex: 1 1 50%;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  font-size: 13px;
  min-width: 0;
}
.pie-legend li {
  display: grid;
  grid-template-columns: 1fr 60px 90px;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
}
.pie-legend .pl-name-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.pie-legend .pl-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.pie-legend .pl-name {
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pie-legend .pl-pct {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--text-primary);
  text-align: right;
}
.pie-legend .pl-amt {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--text-secondary);
  white-space: nowrap;
}

@media (max-width: 768px) {
  /* 總覽右欄手機版：強制垂直堆疊，無重疊 */
  .overview-grid,
  .overview-side,
  .overview-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  .overview-side .chart-card,
  .overview-main .chart-card {
    position: relative !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
  }
  /* 資產組成卡片：簡化為 block 流，避免 flex 計算高度錯誤 */
  #pie-wrap,
  .pie-wrap {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .pie-wrap .pie-canvas {
    display: block !important;
    width: 240px !important;
    max-width: 100% !important;
    height: 240px !important;
    margin: 0 auto 12px !important;
    position: relative !important;
    flex: none !important;
  }
  .pie-wrap .pie-canvas canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: block !important;
  }
  .pie-legend {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
    max-height: none !important;
    overflow: visible !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 4px !important;
  }
  /* 手機版資產卡片：代號 + 小標籤百分比 + 現值；下方詳情 */
  .asset-card {
    display: grid !important;
    grid-template-columns: auto auto 1fr auto !important;
    grid-template-areas:
      "sym pct . twd"
      "detail detail detail detail" !important;
    gap: 2px 8px !important;
    align-items: center !important;
  }
  .asset-card-sym {
    grid-area: sym !important;
    flex: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
  .asset-card-pct {
    grid-area: pct !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-self: center !important;
    letter-spacing: 0 !important;
  }
  .asset-card.err .asset-card-pct {
    background: transparent !important;
    color: var(--danger) !important;
  }
  .asset-card-mid { display: contents !important; }
  .asset-card-twd {
    grid-area: twd !important;
    font-size: 15px !important;
    white-space: nowrap !important;
  }
  .asset-card-detail {
    grid-area: detail !important;
    margin-top: 0 !important;
    font-size: 11px !important;
  }

  /* 手機版圓餅圖圖例：縮小欄寬避免被切 */
  .pie-legend {
    padding: 0 4px !important;
  }
  .pie-legend li {
    grid-template-columns: minmax(0, 1fr) 50px 80px !important;
    gap: 6px !important;
    font-size: 12px !important;
  }
  .pie-legend .pl-amt { font-size: 12px !important; }
  .pie-legend .pl-pct { font-size: 12px !important; }
}