/* ============================================================
   Components — Button / Badge / Card / Table / Form / Modal
                Timeline / Progress / Alert / Stat / Tabs

   淺色主題原則：
   - 卡片、彈窗用陰影浮起，不用邊框
   - 表格列分隔用 --divider（極淡），header 用背景色差
   - Alert / Badge 用柔和底色，不加邊框
   - 只有表單控件保留邊框（互動 affordance 需要）
   ============================================================ */

/* ── Button ────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--ctl-h);
  padding: 0 var(--sp-4);
  border: 0;
  border-radius: var(--r-sm);
  background: var(--bg-panel);
  color: var(--text);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border);
  font-size: var(--fs-base);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, box-shadow .15s;
}
.btn:hover { background: var(--bg-panel-hover); box-shadow: var(--shadow), inset 0 0 0 1px var(--border-input); }
.btn:focus-visible { outline: 0; box-shadow: var(--ring), inset 0 0 0 1px var(--accent); }

.btn-primary {
  background: var(--accent); color: #fff;
  box-shadow: 0 1px 2px rgba(59, 91, 219, .28);
}
.btn-primary:hover { background: var(--accent-hover); box-shadow: 0 3px 10px rgba(59, 91, 219, .30); }

.btn-danger { background: var(--danger-soft); color: var(--danger); box-shadow: none; }
.btn-danger:hover { background: var(--danger); color: #fff; box-shadow: 0 2px 8px rgba(201, 58, 58, .25); }

.btn-ghost { background: transparent; box-shadow: none; color: var(--text-muted); }
.btn-ghost:hover { background: var(--bg-sunken); color: var(--text); box-shadow: none; }

.btn-sm  { min-height: var(--ctl-h-sm); padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.btn-lg  { min-height: var(--ctl-h-lg); padding: 0 var(--sp-6); font-size: var(--fs-md); }
.btn-block { width: 100%; }

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; pointer-events: none;
}

/* ── Badge ─────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.6;
}
.badge-ok      { background: var(--ok-soft);     color: var(--ok); }
.badge-warn    { background: var(--warn-soft);   color: var(--warn); }
.badge-danger  { background: var(--danger-soft); color: var(--danger); }
.badge-info    { background: var(--info-soft);   color: var(--info); }
.badge-neutral { background: var(--bg-sunken);   color: var(--text-muted); }

/* 狀態圓點 */
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* 資產類別標籤 */
.tag-asset { font-size: var(--fs-xs); font-weight: 600; padding: 1px 6px; border-radius: var(--r-sm); }
.tag-fiat       { background: var(--asset-fiat-soft);   color: var(--asset-fiat); }
.tag-stablecoin { background: var(--asset-stable-soft); color: var(--asset-stablecoin); }
.tag-crypto     { background: var(--asset-crypto-soft); color: var(--asset-crypto); }

/* ── Card：陰影浮起，無邊框 ────────────────────── */
.card {
  background: var(--bg-panel);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
}
.card-head {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.card-title { font-size: var(--fs-md); font-weight: 600; }
.card-head-actions { margin-left: auto; }
.card-flush { padding: 0; overflow: hidden; }

/* ── Stat（數據卡）────────────────────────────── */
.stat-label {
  font-size: var(--fs-sm);
  color: var(--text-subtle);
  margin-bottom: var(--sp-2);
}
.stat-value { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.02em; }
.stat-value-lg { font-size: var(--fs-3xl); }
.stat-sub { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-1); }
.delta-up   { color: var(--ok); }
.delta-down { color: var(--danger); }

/* ── Table：header 用背景色差，列分隔用極淡線 ──── */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.table th {
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-subtle);
  background: var(--bg-sunken);
  padding: var(--sp-3) var(--sp-4);
  white-space: nowrap;
}
.table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--divider);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--bg-panel-hover); }
.table .cell-right { text-align: right; }
.table .cell-actions { text-align: right; white-space: nowrap; }
.table-clickable tbody tr { cursor: pointer; }

.cell-primary { font-weight: 500; }
.cell-sub { font-size: var(--fs-sm); color: var(--text-subtle); }

/* 空狀態 */
.empty {
  padding: var(--sp-10) var(--sp-6);
  text-align: center;
  color: var(--text-subtle);
  font-size: var(--fs-base);
}

/* ── Form：唯一保留邊框的地方 ──────────────────── */
.field { margin-bottom: var(--sp-5); }
.field-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  margin-bottom: var(--sp-2);
}
.field-label .req { color: var(--danger); margin-left: 2px; }
.field-hint { font-size: var(--fs-sm); color: var(--text-subtle); margin-top: var(--sp-2); }
.field-error { font-size: var(--fs-sm); color: var(--danger); margin-top: var(--sp-2); }

.input, .textarea {
  width: 100%;
  min-height: var(--ctl-h-lg);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-panel);
  border: 1px solid var(--border-input);
  border-radius: var(--r-sm);
  outline: 0;
  transition: border-color .15s, box-shadow .15s;
}
.input:hover, .textarea:hover { border-color: var(--border-strong); }
.input:focus, .textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.input::placeholder { color: var(--text-subtle); }
/* 鎖住的欄位：唯讀 persona 與「沿用上層設定」都會用到，要一眼看出不能改 */
.input:disabled, .textarea:disabled {
  background: var(--bg-sunken);
  color: var(--text-muted);
  cursor: not-allowed;
}
.input:disabled:hover, .textarea:disabled:hover { border-color: var(--border-input); }
.textarea { min-height: 90px; resize: vertical; }

/* 輸入框 + 後綴（幣種）*/
.input-group { display: flex; }
.input-group .input { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.input-group .input-suffix {
  display: flex; align-items: center;
  padding: 0 var(--sp-3);
  background: var(--bg-sunken);
  border: 1px solid var(--border-input);
  border-left: 0;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ── Dropdown：自訂下拉選單 ─────────────────────
   DS 裡沒有原生 <select>：它的展開選單無法設樣式，字級、圓角、
   hover 全部由 OS 決定，同一份設計在 mac / Windows 長得不一樣，
   也放不進「雙行 + 右側金額」這類內容。純文字選項也走這支元件，
   只是少給 label / desc / meta 而已。
   markup 建議用 App.dropdownHtml() 產生，行為由 App.initDropdowns()
   接管（鍵盤操作、外點關閉、change 事件）。
   ------------------------------------------------ */
.dropdown { position: relative; display: inline-block; }

.dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: var(--ctl-h);
  padding: 0 var(--sp-3);
  background: var(--bg-panel);
  border: 0;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border);
  font-size: var(--fs-base);
  text-align: left;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.dropdown-trigger:hover { background: var(--bg-panel-hover); box-shadow: var(--shadow), inset 0 0 0 1px var(--border-input); }
.dropdown-trigger:focus-visible { outline: 0; box-shadow: var(--ring), inset 0 0 0 1px var(--accent); }
.dropdown-trigger:disabled { opacity: .45; cursor: not-allowed; }

.dropdown-label { color: var(--text-subtle); font-size: var(--fs-sm); }
.dropdown-value { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 箭頭用 CSS 繪製，展開時翻轉 */
.dropdown-caret {
  flex: 0 0 auto;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--text-subtle);
  border-bottom: 1.5px solid var(--text-subtle);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .15s;
}
.dropdown.is-open .dropdown-caret { transform: translateY(1px) rotate(225deg); }

.dropdown-menu {
  position: absolute;
  z-index: var(--z-dropdown);
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  max-height: 320px;
  overflow-y: auto;
  padding: var(--sp-1);
  background: var(--bg-panel);
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
}
.dropdown-menu[hidden] { display: none; }
.dropdown-menu-right { left: auto; right: 0; }
.dropdown-menu-wide  { min-width: 320px; }

/* 尺寸與版面變體 */
.dropdown-block { display: block; width: 100%; }          /* 表單欄位用，撐滿整行 */
.dropdown-sm .dropdown-trigger { min-height: var(--ctl-h-sm); padding: 0 var(--sp-3); font-size: var(--fs-sm); }
/* 表單欄位裡的 dropdown 要和 .input 對齊：一樣的實線邊框與內距 */
.dropdown-field .dropdown-trigger {
  min-height: var(--ctl-h-lg);
  padding: 0 var(--sp-3);
  box-shadow: inset 0 0 0 1px var(--border-input);
}
.dropdown-field .dropdown-trigger:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
.dropdown-field .dropdown-trigger:focus-visible { box-shadow: var(--ring), inset 0 0 0 1px var(--accent); }
.dropdown-field .dropdown-value { font-weight: 400; }

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  position: relative;
  width: 100%;
  padding: var(--sp-2) var(--sp-3) var(--sp-2) calc(var(--sp-3) + 18px);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: var(--fs-base);
  text-align: left;
  cursor: pointer;
}
.dropdown-item:hover,
.dropdown-item.is-focus { background: var(--bg-sunken); }
.dropdown-item.is-selected { color: var(--accent-text); }
/* 勾選記號用 CSS 繪製（旋轉的兩條邊），不使用 emoji */
.dropdown-item.is-selected::before {
  content: '';
  position: absolute;
  left: var(--sp-3);
  top: 50%;
  width: 5px; height: 9px;
  border: 1.8px solid var(--accent);
  border-top: 0; border-left: 0;
  transform: translateY(-70%) rotate(40deg);
}
.dropdown-item:disabled { opacity: .4; cursor: not-allowed; }

/* 標題與說明各佔一行，且不得換行擠壓右側數值 */
.dropdown-item-main  { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dropdown-item-title { font-weight: 500; }
.dropdown-item-title,
.dropdown-item-desc  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-item-desc  { font-size: var(--fs-sm); color: var(--text-subtle); }
.dropdown-item-meta  { flex: 0 0 auto; font-size: var(--fs-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }

.dropdown-group-label {
  padding: var(--sp-3) var(--sp-3) var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.dropdown-sep { height: 1px; background: var(--divider); margin: var(--sp-1) 0; }

/* 選項卡（幣種、網路、流程類型）*/
.radio-cards { display: grid; gap: var(--sp-2); }
.radio-card {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-panel);
  border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--border);
  cursor: pointer;
  transition: box-shadow .15s, background .15s;
}
.radio-card:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
/* 卡片本身就是選項外觀，原生 radio 只負責鍵盤操作與表單語意 —— 隱形但仍可聚焦。
   （被禁的是 <select>，radio 沒有樣式失控的問題）*/
.radio-card { position: relative; }
.radio-card input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.radio-card:has(input[type="radio"]:focus-visible) { box-shadow: var(--ring), inset 0 0 0 2px var(--accent); }
.radio-card.is-selected {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.radio-card-title { font-weight: 500; }
.radio-card-desc { font-size: var(--fs-sm); color: var(--text-subtle); }
.radio-card-right { margin-left: auto; text-align: right; }

/* 摘要列（確認頁）— 用交錯底色，不用格線 */
.summary {
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-panel);
  box-shadow: var(--shadow-sm);
}
.summary-row {
  display: flex; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
}
.summary-row:nth-child(odd) { background: var(--bg-sunken); }
.summary-key { flex: 0 0 160px; color: var(--text-subtle); font-size: var(--fs-sm); }
.summary-val { flex: 1; min-width: 0; word-break: break-all; }
.summary-row-total {
  background: var(--accent-soft) !important;
  font-weight: 600;
  color: var(--accent-text);
}

/* ── Alert：柔和底色 + 左側色條，無外框 ────────── */
.alert {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r);
  border-left: 3px solid;
  font-size: var(--fs-base);
  margin-bottom: var(--sp-4);
}
/* 語意標記用 CSS 圓點，不使用 emoji；嚴重度由左側色條與底色承載 */
.alert-icon {
  flex: 0 0 6px;
  width: 6px; height: 6px;
  margin-top: 6px;
  border-radius: 50%;
  background: currentColor;
}
.alert-title { font-weight: 600; margin-bottom: 2px; }
.alert-body { font-size: var(--fs-sm); color: var(--text-muted); }
/* 警示裡的動作（例如「看原單」）：按鈕不繼承警示的語意色，維持一般按鈕外觀 */
.alert-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); color: var(--text); }
.alert-warn   { background: var(--warn-soft);   border-color: var(--warn);   color: var(--warn); }
.alert-danger { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.alert-info   { background: var(--info-soft);   border-color: var(--info);   color: var(--info); }
.alert-ok     { background: var(--ok-soft);     border-color: var(--ok);     color: var(--ok); }

/* ── Timeline（審核歷程）───────────────────────── */
.timeline { position: relative; padding-left: var(--sp-6); }
.timeline::before {
  content: '';
  position: absolute; left: 7px; top: 6px; bottom: 6px;
  width: 2px; background: var(--border);
}
.tl-item { position: relative; padding-bottom: var(--sp-5); }
.tl-item:last-child { padding-bottom: 0; }
/* 節點狀態用「外環 + 內實心點」表示，不放任何字元或 emoji */
.tl-dot {
  position: absolute; left: calc(var(--sp-6) * -1); top: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg-panel);
  box-shadow: inset 0 0 0 2px var(--border-strong);
  display: grid; place-items: center;
}
.tl-dot::after {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: transparent;
}
.tl-item.is-done    .tl-dot { box-shadow: inset 0 0 0 2px var(--ok); }
.tl-item.is-done    .tl-dot::after { background: var(--ok); }
.tl-item.is-current .tl-dot { box-shadow: inset 0 0 0 2px var(--warn); }
.tl-item.is-current .tl-dot::after { background: var(--warn); }
.tl-item.is-reject  .tl-dot { box-shadow: inset 0 0 0 2px var(--danger); }
.tl-item.is-reject  .tl-dot::after { background: var(--danger); }
.tl-title { font-weight: 500; display: flex; align-items: center; gap: var(--sp-2); }
.tl-meta { font-size: var(--fs-sm); color: var(--text-subtle); margin-top: 2px; }
.tl-note {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-sunken);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ── Progress（confirmations / 報價倒數）───────── */
.progress {
  height: 6px;
  background: var(--bg-sunken);
  border-radius: 3px;
  overflow: hidden;
}
.progress-bar { height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s linear; }
.progress-bar-ok   { background: var(--ok); }
.progress-bar-warn { background: var(--warn); }

.confirm-steps { display: flex; gap: 4px; }
.confirm-step {
  flex: 1; height: 4px; border-radius: 2px;
  background: var(--bg-sunken);
}
.confirm-step.is-on { background: var(--ok); }

/* ── Modal ─────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(2px);
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--sp-6);
}
.modal-backdrop[hidden] { display: none; }
.modal {
  width: 100%;
  max-width: 440px;
  background: var(--bg-panel);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
/* 需要並排內容的彈窗（文件預覽 + 驗證標記）用寬版，440px 擺不下兩欄 */
.modal-lg { max-width: 880px; }
.modal-lg .modal-body { max-height: 72vh; overflow: auto; }
.modal-head {
  padding: var(--sp-5) var(--sp-5) 0;
  display: flex; align-items: flex-start; gap: var(--sp-3);
}
.modal-title { font-size: var(--fs-lg); font-weight: 600; }
.modal-desc { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-1); }
/* 關閉鈕的叉號用兩條 CSS 線段繪製，markup 不需放字元 */
.modal-close {
  position: relative;
  margin-left: auto; flex: 0 0 24px;
  width: 24px; height: 24px;
  background: none; border: 0; border-radius: var(--r-sm);
  color: var(--text-subtle); cursor: pointer;
}
.modal-close::before, .modal-close::after {
  content: '';
  position: absolute; left: 6px; top: 11px;
  width: 12px; height: 1.5px;
  background: currentColor;
}
.modal-close::before { transform: rotate(45deg); }
.modal-close::after  { transform: rotate(-45deg); }
.modal-close:hover { color: var(--text); background: var(--bg-sunken); }
.modal-body { padding: var(--sp-5); }
.modal-foot {
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-sunken);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  display: flex; gap: var(--sp-2); justify-content: flex-end;
}

/* OTP 輸入格 */
.otp-input {
  display: flex; gap: var(--sp-2); justify-content: center;
  margin: var(--sp-5) 0;
}
.otp-cell {
  width: 44px; height: 52px;
  text-align: center;
  font-size: var(--fs-xl);
  font-family: var(--font-mono);
  background: var(--bg-panel);
  border: 1px solid var(--border-input);
  border-radius: var(--r-sm);
  outline: 0;
  transition: border-color .15s, box-shadow .15s;
}
.otp-cell:focus { border-color: var(--accent); box-shadow: var(--ring); }

/* ── Tabs ──────────────────────────────────────── */
.tabs {
  display: flex; gap: var(--sp-1);
  box-shadow: inset 0 -1px 0 var(--border);
  margin-bottom: var(--sp-5);
}
.tab {
  padding: var(--sp-3) var(--sp-4);
  color: var(--text-muted);
  font-size: var(--fs-base);
  box-shadow: inset 0 -2px 0 transparent;
  cursor: pointer;
}
.tab:hover { color: var(--text); }
.tab.is-active {
  color: var(--accent-text);
  box-shadow: inset 0 -2px 0 var(--accent);
  font-weight: 600;
}
.tab-count { color: var(--text-subtle); margin-left: 5px; font-weight: 400; }

/* ── 篩選列 ────────────────────────────────────── */
.filters {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
/* 篩選列的控件一律 --ctl-h，和同列的 dropdown、按鈕同高 */
.filters .input { width: auto; min-width: 140px; min-height: var(--ctl-h); padding: 0 var(--sp-3); }
.filters .dropdown-trigger { min-width: 140px; }
.filters .input-search { min-width: 220px; }

/* ── 其他 ──────────────────────────────────────── */
.addr {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  background: var(--bg-sunken);
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: var(--r-sm);
}
.divider { height: 1px; background: var(--border); margin: var(--sp-5) 0; }
.risk-score { font-family: var(--font-mono); font-weight: 600; }
.risk-low  { color: var(--ok); }
.risk-mid  { color: var(--warn); }
.risk-high { color: var(--danger); }

.text-muted  { color: var(--text-muted); }
.text-subtle { color: var(--text-subtle); }
.text-sm { font-size: var(--fs-sm); }
.text-right { text-align: right; }
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mb-4 { margin-bottom: var(--sp-4); }
.flex { display: flex; align-items: center; gap: var(--sp-3); }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.spacer { flex: 1; }