/* frontend/styles.css */
/* ── 設計系統變數 ── */
:root {
    /* ── primitive 品牌色（不隨主題變，Step 3 淺色會另配對應變體） ── */
    --sys-blue: #0A84FF;
    --sys-green: #30D158;
    --sys-red: #FF453A;
    --sys-orange: #FF9F0A;

    /* ── semantic 語意色 ──
       2026-09-09：這裡原本自己定義了一整套深色值，蓋掉 tokens.css 的同名 token，
       所以 data-theme 切到淺色時背景變白、文字仍是白的（實測 1.06:1）。
       bg / surface / surface-2 / border 現在完全交給 tokens.css 供應（那邊深淺兩套齊全），
       這裡只保留 styles.css 專用的舊名，指向語意層。 */
    --glass-bg: var(--surface);
    --glass-border: var(--border);
    --glass-highlight: var(--white-a18);
    --glass-inner-glow: var(--inner-hl);
    --text-primary: var(--text);
    --text-secondary: var(--muted);
    --text-tertiary: var(--text-3);
    --buy: var(--up);
    --sell: var(--down);
    --buy-glow: color-mix(in srgb, var(--up) 25%, transparent);
    --sell-glow: color-mix(in srgb, var(--down) 25%, transparent);

    /* ── 舊 token 名 alias（保留給既有引用，避免全檔炸掉） ── */
    --bg-dark: var(--bg);
    --color-buy: var(--buy);
    --color-buy-glow: var(--buy-glow);
    --color-sell: var(--sell);
    --color-sell-glow: var(--sell-glow);
    --color-neutral: var(--text-secondary);
    --color-system-blue: var(--sys-blue);
    --color-system-gray6: var(--surface-2);
    /* 既有 #7c6ef7 為 settings-link 專用強調色，非系統藍，維持原值避免變色 */
    --accent-color: #7c6ef7;

    /* ── 幾何 token 階梯（圓角） ── */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* ── 間距階梯（rem，隨 Dynamic Type 縮放） ── */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;

    /* ── 材質三層 elevation（越大越厚） ── */
    --elev-1: 0 2px 8px rgba(0, 0, 0, 0.18);
    --elev-2: 0 6px 24px rgba(0, 0, 0, 0.22);
    --elev-3: 0 20px 60px rgba(0, 0, 0, 0.40);

    /* ── Spring 過場（只動 compositor 屬性，可打斷） ── */
    --spring: cubic-bezier(0.16, 1, 0.3, 1);
    --spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --t-press: transform 120ms var(--spring), box-shadow 120ms var(--spring);
    --t-move: transform 340ms var(--spring), box-shadow 340ms var(--spring), opacity 340ms var(--spring);

    /* ── 字距 tracking 隨字級 ── */
    --tracking-display: -0.02em;
    --tracking-title: -0.01em;
    --tracking-body: 0;
    --tracking-caption: 0.01em;

    /* ── 補既有未定義 token（原本靠 CSS fallback 靜默生效，此處明確定義） ── */
    --ease-out-expo: var(--spring);
    --font-mono: 'SF Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ── 自定義 iOS 極簡玻璃質感滾動條 ── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--white-a12);
    border-radius: var(--radius-sm);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--white-a25);
}
::-webkit-scrollbar-corner {
    background: transparent;
}

/* ── 基本重設 ── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    border: none;
    outline: none;
    box-sizing: border-box;
}

button {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* 持倉列表「全部平倉」按鈕強化樣式 */
#btn-close-all-positions,
.btn-close-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 12px;
    background: var(--red-a15);
    border: 1px solid var(--red-a40);
    border-radius: var(--radius-8);
    color: #fca5a5;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

#btn-close-all-positions:hover,
.btn-close-all:hover {
    background: rgba(239, 68, 68, 0.28);
    border-color: rgba(239, 68, 68, 0.6);
    color: var(--text-primary);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.25);
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-dark);
    color: var(--text-primary);
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    justify-content: center;
}


/* ── 加載畫面 ── */
.loading-screen {
    position: fixed;
    inset: 0;
    background-color: var(--bg-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 999;
    gap: 1.5rem;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid var(--white-a10);
    border-top: 3px solid var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.hidden {
    display: none !important;
}

/* ── PWA 容器自適應佈局 ── */
.app {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ── 底部導航列 (iOS Human Interface Guidelines 風格 Tab Bar)
   預設行動端顯示，電腦端隱藏。
   採高不透明度純色 + 輕量 backdrop-filter（monitor 頁效能敏感，
   捨棄先前的 SVG turbulence 濾鏡與雙層 liquid-glass 偽元素）。 ── */
/* ── 底部導航列 (懸浮大圓角不貼邊 Liquid Glass Tab Bar) ── */
.bottom-nav {
    position: fixed;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    right: 12px;
    width: calc(100% - 24px);
    max-width: 480px;
    margin: 0 auto;
    height: 62px;
    padding: 0 6px;
    background: color-mix(in srgb, var(--surface-2) 88%, transparent);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--white-a15);
    border-radius: 24px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), inset 0 1px 1px var(--white-a20);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 100;
    isolation: isolate;
}

.bottom-nav .nav-item {
    background: none;
    border: none;
    color: var(--color-muted-gray);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    height: 48px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.bottom-nav .nav-item .icon {
    width: 22px;
    height: 22px;
    stroke-width: 2px;
}

.bottom-nav .nav-item.active {
    color: var(--color-info-blue);
    background: var(--blue-a15);
    box-shadow: inset 0 0 10px color-mix(in srgb, var(--info) 10%, transparent);
}

.bottom-nav .nav-item.active .icon {
    stroke-width: 2.5px;
}

.bottom-nav .nav-item.active .label {
    font-weight: 700;
}

.bottom-nav .nav-item.active svg.lucide-zap,
.bottom-nav .nav-item.active svg.lucide-user {
    fill: currentColor;
    fill-opacity: 0.25;
}

@media (prefers-reduced-motion: no-preference) {
    .bottom-nav .nav-item {
        transition: color 0.2s ease-out;
    }
}

/* ── 電腦端側邊導航欄 (Sidebar)（預設行動端隱藏） ── */
.sidebar {
    display: none;
}

/* ── 主內容區域 ── */
.main-content {
    flex: 1;
    padding: 1.25rem;
    padding-bottom: calc(56px + 24px + env(safe-area-inset-bottom, 0px)); /* G2: 留給 iOS 風格底部 tab bar (56px) + 安全區 */
    max-width: 100%;
}

/* 行動端無固定頂欄，內容區直接延伸到瀏海/靈動島之後，
   加頂部安全區位移避免第一列文字被遮住（無瀏海機型 env()=0，不多留白）。
   桌面版 (min-width:768px 覆寫規則) 不受影響。 */
@media (max-width: 767px) {
    .main-content {
        padding-top: calc(1.25rem + env(safe-area-inset-top, 0px));
    }
}

.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.main-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.mode-badge {
    padding: 6px 12px;
    border-radius: var(--radius-lg);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mode-paper {
    background: var(--blue-a15);
    border: 1px solid color-mix(in srgb, var(--info) 30%, transparent);
    color: var(--color-info-blue);
    box-shadow: 0 0 10px color-mix(in srgb, var(--info) 10%, transparent);
}

.mode-vst {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid var(--amber-a30);
    color: var(--warn);
}

.mode-live {
    background: var(--red-a15);
    border: 1px solid var(--red-a30);
    color: var(--down);
    box-shadow: 0 0 15px var(--red-a20);
}

/* ── iPhone Liquid Glass (液態流光玻璃) 卡片樣式 ── */
/* 遵循 liquid-glass.pro 雙偽元素架構：
   ::before (z-index: 0) = inner shadow + tint
   ::after  (z-index:-1) = backdrop-filter + SVG distortion */
/* 2026-09-09：卡片改為實心表面，對齊手機設計線（proto.artifact.html .card）。
   原本是 iOS Liquid Glass —— ::before 疊一層純白 alpha 漸層（a20→a05→a12）加白色
   高光，在深底上讀起來是一片漸變灰白，蓋掉了整站配色。玻璃層（::before/::after 與
   對應的 prefers-reduced-transparency 降級）沒有其他使用端，一併移除。 */
.glass-card {
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    margin-bottom: 1.25rem;
    position: relative;
    background: var(--surface-2);
    border: 1px solid var(--border);
    isolation: isolate;
    box-shadow: var(--inner-hl), var(--card-shadow);
}



.glass-card:hover {
    /* 移除懸浮位移與縮放，避免滑鼠進入或按鈕點擊時卡片晃動影響座標判斷 */
    border-color: var(--border-strong);
    box-shadow: var(--inner-hl), var(--card-shadow);
}


/* 點擊反饋：移除 scale 避免按鈕判定偏移 */
.glass-card:active {
}

/* ── a11y fallback（§14）：高對比 ── */
@media (prefers-contrast: more) {
    /* 邊框在卡片本體上，不再是偽元素 */
    .glass-card {
        border-color: var(--text-primary);
    }
}

/* ── a11y fallback（§14）：減少動態，glass-card 去位移 ── */
@media (prefers-reduced-motion: reduce) {
    .glass-card {
        transition: none;
    }
    .glass-card:hover,
    .glass-card:active {
        transform: none;
    }
}

.card-header {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--white-a05);
    padding-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ── 頁面顯示切換 ── */
.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

/* ── 資訊數據看板佈局 ── */
.dashboard-grid {
    display: flex;
    flex-direction: column;
}

/* ── 帳戶統計 ── */
.account-stats {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 0.5rem 0;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--white-a05);
}

.stat-item:last-child {
    border-bottom: none;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text-primary);
}

.pnl-buy { color: var(--color-buy); text-shadow: 0 0 10px var(--color-buy-glow); }
.pnl-sell { color: var(--color-sell); text-shadow: 0 0 10px var(--color-sell-glow); }
.pnl-neutral { color: var(--text-primary); }

/* 帳戶資訊卡片特殊樣式 */
.account-info-card {
    padding: 2rem 1.5rem;
}

.account-info-card .card-header {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    font-weight: 600;
}

/* ── 手動交易控制台 ── */
.order-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.order-form select,
.order-form input {
    background: var(--white-a05);
    border: 1px solid var(--white-a10);
    border-radius: var(--radius-12);
    padding: 10px 14px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    transition: var(--transition-smooth);
    outline: none;
}

.order-form select:focus,
.order-form input:focus {
    border-color: var(--accent);
    background: var(--white-a08);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 0.5rem;
}

/* ── 奢華漸層按鈕 ── */
.btn {
    border: none;
    border-radius: 14px;
    padding: 12px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.btn-buy {
    background: linear-gradient(135deg, var(--color-success-green) 0%, #059669 100%);
    box-shadow: 0 4px 15px var(--color-buy-glow);
}

.btn-buy:hover {
    /* transform: scale(1.03); 已移除跳動縮放 */
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.btn-sell {
    background: linear-gradient(135deg, var(--color-danger-red) 0%, #DC2626 100%);
    box-shadow: 0 4px 15px var(--color-sell-glow);
}

.btn-sell:hover {
    /* transform: scale(1.03); 已移除跳動縮放 */
    box-shadow: 0 6px 20px var(--red-a40);
}

.btn-close {
    background: var(--white-a08);
    border: 1px solid var(--white-a15);
    padding: 6px 12px;
    font-size: 0.8rem;
    border-radius: var(--radius-8);
}

/* 登入彈窗（玻璃擬態） */
.auth-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(5, 7, 12, 0.6);
    backdrop-filter: blur(6px) saturate(140%);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
}
.auth-modal.hidden { display: none; }
.auth-card {
    width: 100%;
    max-width: 340px;
    padding: 26px 24px;
    border-radius: 18px;
    border: 1px solid var(--glass-highlight);
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 96%, transparent), color-mix(in srgb, var(--bg) 96%, transparent));
    box-shadow: 0 24px 60px var(--black-a55), var(--glass-inner-glow);
    color: var(--text-primary);
    font-family: var(--font-sans);
}
.auth-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.auth-head .icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    padding: 8px;
    border-radius: var(--radius-11);
    color: var(--color-info-blue);
    background: var(--blue-a15);
    border: 1px solid var(--blue-a25);
}
.auth-head h3 { margin: 0; font-size: 1.15rem; font-weight: 700; }
.auth-sub { margin: 2px 0 0; font-size: 0.78rem; color: var(--text-secondary); }
#auth-password {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border-radius: var(--radius-11);
    border: 1px solid var(--glass-border);
    background: var(--white-a04);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    transition: var(--transition-smooth);
}
#auth-password::placeholder { color: var(--text-secondary); }
#auth-password:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--info) 55%, transparent);
    background: color-mix(in srgb, var(--info) 6%, transparent);
    box-shadow: 0 0 0 3px var(--blue-a15);
}
.auth-error { color: var(--color-sell); font-size: 0.8rem; min-height: 18px; margin: 8px 2px 0; }
.auth-actions { display: flex; gap: 10px; margin-top: 18px; }
.auth-btn {
    flex: 1;
    padding: 11px;
    border-radius: var(--radius-11);
    font-family: var(--font-sans);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
}
.auth-btn-ghost {
    background: var(--white-a05);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
}
.auth-btn-ghost:hover { background: var(--white-a10); color: var(--text-primary); }
.auth-btn-primary {
    background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 70%, black) 100%);
    border: none;
    color: var(--text-primary);
    box-shadow: 0 4px 15px color-mix(in srgb, var(--info) 30%, transparent);
}
.auth-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px color-mix(in srgb, var(--info) 45%, transparent); }

.btn-close:hover {
    background: var(--red-a15);
    border-color: var(--red-a40);
    color: var(--down);
}

/* ── 表格通用樣式 ── */
.table-container {
    width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    text-align: left;
}

th {
    color: var(--text-secondary);
    font-weight: 500;
    padding: 10px;
    border-bottom: 1px solid var(--white-a05);
}

td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--white-a03);
}

.empty-state {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem 0;
}

/* ── 即時訊號串流面板 ── */
.live-pulse {
    width: 8px;
    height: 8px;
    background-color: var(--color-buy);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--color-buy-glow);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(2.2); opacity: 0; }
}

.signals-stream {
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 訊號卡片樣式 */
.signal-item {
    background: var(--white-a03);
    border-left: 4px solid var(--color-neutral);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    font-size: 0.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: slide-in 340ms var(--spring);
    cursor: pointer;
    transition: var(--t-move);
}

.signal-item:hover {
    transform: translateX(4px);
    background: var(--white-a06);
}

.signal-item:active {
    transform: translateX(4px) scale(0.985);
    transition: var(--t-press);
}

.signal-item.buy { border-left-color: var(--color-buy); }
.signal-item.sell { border-left-color: var(--color-sell); }

.sig-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sig-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sig-source {
    font-weight: 700;
    color: var(--accent);
    letter-spacing: var(--tracking-caption);
}

.sig-action {
    font-weight: 700;
    letter-spacing: var(--tracking-caption);
}

.sig-action.buy { color: var(--color-buy); }
.sig-action.sell { color: var(--color-sell); }

.sig-detail {
    color: var(--text-secondary);
    letter-spacing: var(--tracking-caption);
}

.sig-outcome {
    padding: 4px 8px;
    border-radius: var(--radius-xs);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caption);
}

.sig-tp1-badge {
    padding: 1px 6px;
    background: rgba(148, 163, 184, 0.10);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: var(--radius-4);
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--color-muted-gray);
}

.outcome-win { background: var(--buy-glow); color: var(--color-buy); }
.outcome-loss { background: var(--sell-glow); color: var(--color-sell); }
.outcome-open { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.outcome-cancelled { background: var(--white-a08); color: var(--text-secondary); }

@keyframes slide-in {
    0% { transform: translateY(-10px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .signal-item {
        animation: none;
        transition: none;
    }
    .signal-item:hover,
    .signal-item:active {
        transform: none;
    }
}

/* ── 效能分析分頁 ── */
.stats-overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.stat-box {
    background: var(--white-a02);
    border: 1px solid var(--white-a05);
    border-radius: var(--radius-md);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.box-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.box-value {
    font-size: 1.25rem;
    font-weight: 700;
}

.txt-buy { color: var(--color-buy); }
.txt-sell { color: var(--color-sell); }

.chart-wrapper {
    position: relative;
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
}

.equity-chart-wrapper {
    height: 300px;
}

/* ── Toast 訊息提示 ── */
.toast {
    position: fixed;
    top: calc(20px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    background: color-mix(in srgb, var(--surface-2) 85%, transparent);
    border: 1px solid var(--glass-highlight);
    backdrop-filter: blur(15px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 0.9rem;
    z-index: 9999;
    transition: opacity 0.3s ease;
    text-align: center;
}

/* ── 確認對話框 ── */
.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.confirm-overlay.show {
    opacity: 1;
}

.confirm-dialog {
    width: 90%;
    max-width: 450px;
    padding: 2rem;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.confirm-overlay.show .confirm-dialog {
    transform: scale(1) translateY(0);
}

.confirm-header {
    margin-bottom: 1.5rem;
    text-align: center;
}

.confirm-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.confirm-body {
    margin-bottom: 2rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.confirm-details {
    margin-bottom: 1rem;
}

.confirm-details p {
    margin: 0.5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.confirm-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid var(--amber-a30);
    border-radius: var(--radius-8);
    padding: 12px;
    font-size: 0.9rem;
    color: var(--warn);
    text-align: center;
}

.confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.confirm-actions > :only-child {
    grid-column: 1 / -1;
}

.confirm-btn-cancel, .confirm-btn-ok {
    padding: 12px 24px;
    border-radius: var(--radius-8);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition-default);
    border: none;
}

.confirm-btn-cancel {
    background: var(--white-a08);
    border: 1px solid var(--white-a15);
    color: var(--text-secondary);
}

.confirm-btn-cancel:hover {
    background: var(--white-a12);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.confirm-btn-ok {
    background: linear-gradient(135deg, var(--color-buy), var(--color-buy-gradient-end));
    color: white;
}

.confirm-btn-ok:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-buy-sm);
}


/* ── 響應式佈局 (Responsive Layout: 電腦端適配) ── */
@media (min-width: 768px) {
    /* 1. 導航切換：隱藏行動端底部導航，顯示電腦端側邊欄 */
    .bottom-nav,
    #nav-more-sheet,
    #nav-more-backdrop {
        display: none !important;
    }

    /* 桌面版改為左欄 + 主內容的彈性橫向排版，主內容會自動填滿剩餘空間。
       側邊欄收合時，主內容透過 flex 自動回流，無需手動算寬度或位移。 */
    .app {
        flex-direction: row;
        align-items: flex-start;
    }

    .sidebar {
        display: flex;
        flex-direction: column;
        position: fixed; /* fixed 而非 sticky：避免 sticky 受父層 flex/scroll 容器影響而失效，捲動時導覽恆在 */
        top: 0;
        left: 0;
        width: 240px;
        flex-shrink: 0;
        height: 100vh;
        background: transparent;
        z-index: 100;
        padding: 2rem 1.5rem;
        border: none;
        isolation: isolate;
        transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1), padding 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* iPhone-style Liquid Glass ::before — 自然對稱的側邊欄發光 */
    .sidebar::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        background:
            linear-gradient(90deg,
                var(--white-a08) 0%,
                var(--white-a03) 50%,
                var(--white-a06) 100%
            );
        box-shadow:
            inset 1px 0 2px 0 var(--white-a20),   /* 左邊高光 */
            inset 0 0 25px 0 var(--white-a06);    /* 中心發光 */
        border-right: 1px solid var(--white-a15);
        pointer-events: none;
    }

    /* iPhone-style Liquid Glass ::after — 精確玻璃模糊效果 */
    .sidebar::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        backdrop-filter:
            blur(0.25px)
            contrast(1.2)
            brightness(1.05)
            saturate(1.1);
        -webkit-backdrop-filter:
            blur(0.25px)
            contrast(1.2)
            brightness(1.05)
            saturate(1.1);
        filter: url(#glass-distortion);
        -webkit-filter: url("#glass-distortion");
        isolation: isolate;
        pointer-events: none;
    }
    
    .brand {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 10px;
        margin-bottom: 2.5rem;
        transition: margin-bottom 0.3s ease;
    }
    
    .brand-info {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        overflow: hidden;
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
        flex: 1;
    }

    .brand-info .logo {
        width: 36px;
        height: 36px;
        border-radius: var(--radius-sm);
        flex-shrink: 0;
    }

    .brand-info .title {
        font-size: 1.05rem;
        font-weight: 700;
        background: linear-gradient(135deg, var(--text-primary) 30%, var(--color-muted-gray) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        white-space: nowrap;
    }

    .sidebar-toggle-btn {
        background: var(--white-a03);
        border: 1px solid var(--white-a08);
        border-radius: var(--radius-8);
        color: var(--text-secondary);
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 0;
        flex-shrink: 0;
        z-index: 10;
    }

    .sidebar-toggle-btn:hover {
        background: var(--white-a08);
        color: var(--text-primary);
        border-color: var(--white-a15);
    }
    
    .sidebar-toggle-btn .icon {
        width: 16px;
        height: 16px;
        transition: transform 0.3s ease;
    }
    
    .sidebar-nav {
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 1;
        overflow-y: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .sidebar-nav::-webkit-scrollbar {
        display: none;
    }
    
    .sidebar-nav .nav-item {
        background: none;
        border: none;
        color: var(--text-secondary);
        padding: 12px 16px;
        border-radius: var(--radius-12);
        font-family: var(--font-sans);
        font-size: 0.95rem;
        font-weight: 500;
        text-align: left;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 12px;
        transition: var(--transition-smooth);
    }
    
    .sidebar-nav .nav-item .icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .sidebar-nav .nav-item:hover {
        background: var(--white-a05);
        color: var(--text-primary);
    }
    
    .sidebar-nav .nav-item.active {
        background: var(--blue-a15);
        border: 1px solid var(--blue-a25);
        color: var(--color-info-blue);
        text-shadow: 0 0 10px var(--blue-a20);
    }
    
    .sidebar-footer {
        font-size: 0.75rem;
        color: var(--text-secondary);
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        width: 100%;
        box-sizing: border-box;
    }

    .sidebar-footer #auth-btn:hover {
        background: var(--white-a10);
        color: var(--text-primary);
    }

    #user-card {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .status-indicator {
        width: 6px;
        height: 6px;
        border-radius: 50%;
    }
    
    .status-indicator.online {
        background-color: var(--color-buy);
        box-shadow: 0 0 8px var(--color-buy-glow);
    }

    /* 2. 主內容：彈性填滿側邊欄以外的空間，內容置中且設可讀上限，
          超寬螢幕兩側留白對稱，不再出現右側大片空白。 */
    .main-content {
        flex: 1 1 auto;
        min-width: 0;            /* 允許內部表格/圖表正確縮小，避免溢出 */
        padding: 2rem clamp(1.5rem, 3vw, 3.5rem);
        padding-bottom: 2rem;    /* 桌面版無底部導航，移除避讓空間 */
        width: auto;
        max-width: 1440px;
        margin-left: 240px;      /* sidebar 改 position:fixed 脫離文件流後，改由此保留版位，避免內容被遮擋 */
        margin-right: auto;
        transition: margin-left 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* sidebar 收合時（body.sidebar-collapsed，由 legacy.js 的 sidebar-toggle 切換）同步收窄留白 */
    body.sidebar-collapsed .main-content {
        margin-left: 76px;
    }
    
    .main-header h1 {
        font-size: 2rem;
    }
    
    /* 3. 網格卡片並排佈局（minmax(0,1fr) 允許欄位收縮，避免內容撐破版面溢出） */
    .dashboard-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }
    
    .full-width {
        grid-column: span 2;
    }
    
    /* 帳戶統計改用自動換行網格：空間足夠時三欄並排，
       空間不足時自動換成兩欄／單欄，避免數字相互重疊。 */
    .account-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
        align-items: stretch;
        gap: 1rem;
        padding: 1.5rem 0;
    }

    .account-stats .stat-item {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        min-width: 0;
        padding: 20px 14px;
        border-bottom: none;
        border-radius: var(--radius-12);
        background: var(--white-a02);
        border: 1px solid var(--white-a05);
        text-align: center;
        min-height: 80px;
    }
    
    /* 效能分析排版 */
    .stats-overview-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        height: 100%;
        align-items: center;
    }
    
    .chart-wrapper {
        height: 250px;
    }

    .nav-text {
        display: inline-block;
        white-space: nowrap;
        transition: opacity 0.2s ease 0.08s;
        opacity: 1;
    }

    /* ── 電腦端收起狀態 ── */
    .sidebar.collapsed {
        width: 76px;
        padding: 2rem 0.75rem;
    }

    /* 收合時品牌列只保留置中的展開按鈕 */
    .sidebar.collapsed .brand {
        justify-content: center;
        margin-bottom: 2rem;
    }

    .sidebar.collapsed .brand-info {
        width: 0;
        opacity: 0;
        pointer-events: none;
        flex: 0;
    }

    /* 收合時切換鈕的箭頭轉向（指向右＝展開）。
       由 CSS 控制方向最可靠：Lucide 初始渲染後 <i> 已變成 <svg>，JS 換 icon 會失效。 */
    .sidebar.collapsed .sidebar-toggle-btn .icon {
        transform: rotate(180deg);
    }

    /* 收合時隱藏文字標籤（不佔位、淡出） */
    .sidebar.collapsed .nav-text,
    .sidebar.collapsed .footer-text {
        opacity: 0;
        width: 0;
        overflow: hidden;
        transition: opacity 0.12s ease;
    }

    /* 收合時導航項目變為置中的方形圖示按鈕 */
    .sidebar.collapsed .sidebar-nav {
        align-items: center;
        gap: 10px;
    }

    .sidebar.collapsed .nav-item {
        justify-content: center;
        gap: 0;
        padding: 0;
        width: 44px;
        height: 44px;
    }

    .sidebar.collapsed .nav-item .icon {
        margin: 0;
    }

    .sidebar.collapsed .sidebar-footer {
        justify-content: center;
    }

    /* 收合時的狀態點維持可見，作為連線指示 */
    .sidebar.collapsed .status-indicator {
        width: 8px;
        height: 8px;
    }

    /* 收合時的用戶卡片樣式：只保留頭像置中，隱藏文字與登出按鈕 */
    .sidebar.collapsed #user-card {
        justify-content: center !important;
        padding: 4px 0 !important;
        background: none !important;
        border: none !important;
    }
    .sidebar.collapsed #user-card #logout-btn,
    .sidebar.collapsed #user-card #user-email-display,
    .sidebar.collapsed #user-card #user-mode-status {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════════ */
/* ── 新版布局樣式 (基於 Liquid Glass 設計參考) ── */
/* ══════════════════════════════════════════════════════════════════════════════════ */

/* ── Dashboard 專用佈局 ── */
.status-control-card {
    background: linear-gradient(135deg, var(--glass-bg) 0%, rgba(13, 39, 19, 0.45) 100%);
    border: 1px solid var(--emerald-a20);
    margin-bottom: 20px;
}

.status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-buy);
}

.status-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--white-a10);
    transition: 0.4s;
    border-radius: 34px;
    border: 1px solid var(--white-a20);
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

input:checked + .toggle-slider {
    background: linear-gradient(45deg, var(--color-buy), var(--color-buy-gradient-end));
    border-color: var(--color-buy);
}

input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

/* PnL 卡片樣式（材質 Tier 2：繼承 .glass-card 的 --elev-2/--radius-lg，本卡只補排版與內層實色） */
.pnl-summary-card {
    text-align: left;
}

.pnl-header {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
    letter-spacing: var(--tracking-caption);
    text-transform: uppercase;
}

/* 主數字：一卡一焦點，大字級+收緊字距 */
.pnl-amount {
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--color-buy);
    letter-spacing: var(--tracking-display);
    margin-bottom: var(--space-4);
}

.loss-limit-section {
    margin-top: var(--space-4);
}

.limit-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-secondary);
    letter-spacing: var(--tracking-caption);
    margin-bottom: var(--space-2);
}

.limit-percentage {
    color: var(--sys-orange);
    font-weight: 600;
}

/* 巢狀內塊：實色 --surface-2，不玻璃疊玻璃 */
.progress-bar {
    width: 100%;
    height: 4px;
    background: var(--surface-2);
    border-radius: var(--radius-xs);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--sys-orange), color-mix(in srgb, var(--sys-orange) 65%, white));
    border-radius: var(--radius-xs);
    transition: width 0.3s ease;
}

/* 統計網格 */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin: var(--space-5) 0;
}

.stat-card {
    text-align: center;
    padding: var(--space-5) var(--space-4);
}

.stat-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
    letter-spacing: var(--tracking-caption);
    text-transform: uppercase;
}

.stat-value {
    font-size: clamp(1.05rem, 0.45rem + 1.45vw, 1.8rem);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: var(--tracking-title);
    white-space: nowrap;
}

.risk-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3) var(--space-4);
    padding: var(--space-1) 0;
}

.risk-summary-item {
    text-align: center;
}

.risk-summary-item .stat-value {
    font-size: clamp(0.9rem, 0.6rem + 0.8vw, 1.15rem);
}

.settings-link {
    font-size: 0.75rem;
    color: var(--accent-color, #7c6ef7);
    text-decoration: none;
    opacity: 0.8;
}

.settings-link:hover {
    opacity: 1;
    text-decoration: underline;
}

.stat-success {
    color: var(--color-buy);
}

/* 勝率分佈卡片（材質 Tier 2） */
.win-rate-card .source-rates {
    margin-top: var(--space-4);
}

.rate-item {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-3);
}

.rate-source {
    width: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: var(--tracking-body);
}

/* 巢狀進度條：實色 --surface-2，不玻璃疊玻璃 */
.rate-bar {
    flex: 1;
    height: 6px;
    background: var(--surface-2);
    border-radius: var(--radius-xs);
    margin: 0 var(--space-3);
    overflow: hidden;
}

.rate-fill {
    height: 100%;
    border-radius: var(--radius-xs);
    transition: width 0.5s ease;
}

.crt-rate {
    background: linear-gradient(90deg, var(--color-buy), color-mix(in srgb, var(--color-buy) 75%, black));
}

.rate-percentage {
    width: 40px;
    text-align: right;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.rate-note {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-2);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
    border-radius: var(--radius-xs);
    font-size: 0.75rem;
    letter-spacing: var(--tracking-caption);
    color: var(--accent);
}

.note-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.rate-note-single {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-3);
    background: color-mix(in srgb, var(--color-buy) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-buy) 20%, transparent);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--color-buy);
    text-align: center;
}

/* ── Signals 頁面佈局 ── */
.signals-container {
    max-width: 100%;
    padding: 0 4px;
}

.signals-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.signals-header h2 {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 4px;
    font-weight: 600;
}

.header-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.filter-controls .filter-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
    font-size: 0.82rem;
}
.filter-controls .filter-btn:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    color: color-mix(in srgb, var(--accent) 55%, white);
}

/* 訊號範圍切換（全部/個人/全域） */
.scope-toggle-row {
    margin-top: 4px;
    margin-bottom: 16px;
}
.scope-toggle {
    display: inline-flex;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.scope-toggle .scope-btn {
    background: transparent;
    border: none;
    padding: 8px 12px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.82rem;
    transition: var(--transition-fast);
}
.scope-toggle .scope-btn:hover { color: color-mix(in srgb, var(--accent) 55%, white); }
.scope-toggle .scope-btn.active {
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
}

.search-section {
    margin-bottom: 20px;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 12px;
    z-index: 1;
    font-size: 1.1rem;
}

.search-input {
    width: 100%;
    padding: 12px 12px 12px 40px;
    background: var(--black-a30);
    border: 1px solid var(--white-a22);
    border-radius: var(--radius-8);
    color: var(--text-primary);
    font-size: 1rem;
    transition: var(--transition-input);
}

.search-input::placeholder {
    color: var(--text-secondary);
}

.search-input:hover {
    border-color: var(--white-a35);
    background: var(--black-a40);
}

.search-input:focus {
    border-color: var(--color-buy);
    outline: none;
    background: var(--black-a40);
    box-shadow: var(--shadow-buy-ring);
}

.signals-stream-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Trading 頁面佈局 ── */
.trading-container {
    max-width: 100%;
    padding: 0 4px;
}

.emergency-controls {
    margin-bottom: 20px;
    text-align: center;
}

.emergency-stop-btn {
    background: linear-gradient(135deg, var(--color-delete-red), var(--color-delete-red-dark));
    border: none;
    border-radius: var(--radius-12);
    padding: 12px 24px;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-default);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto;
}

.emergency-stop-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 51, 51, 0.3);
}

/* 帳戶餘額卡（材質 Tier 2，繼承 .glass-card） */
.balance-card {
    text-align: center;
    margin-bottom: var(--space-5);
}

.balance-header {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caption);
}

/* 一卡一焦點：主數字放大、收緊字距 */
.balance-amount {
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--color-buy);
    letter-spacing: var(--tracking-display);
    margin-bottom: var(--space-3);
}

.available-margin {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}

.margin-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caption);
}

.margin-amount {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: var(--tracking-title);
}

.execution-mode-card .mode-header {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.execution-mode-card .mode-selector {
    display: flex;
    gap: 8px;
    margin: 16px 0;
}

.mode-btn {
    flex: 1;
    padding: 10px;
    background: var(--white-a05);
    border: 1px solid var(--white-a10);
    border-radius: var(--radius-xs);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-default);
    font-size: 0.9rem;
    font-weight: 500;
}

.mode-btn.active {
    background: linear-gradient(135deg, var(--color-delete-red), var(--color-delete-red-dark));
    border-color: var(--color-delete-red);
    color: white;
}

.api-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--white-a10);
}

.status-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.status-value {
    font-size: 0.9rem;
    font-weight: 600;
}

.status-good {
    color: var(--color-buy);
}

.positions-overview .positions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.positions-header h3 {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin: 0;
}

.positions-controls {
    display: flex;
    gap: 8px;
}

.control-btn {
    padding: 6px 12px;
    background: var(--white-a05);
    border: 1px solid var(--white-a10);
    border-radius: var(--radius-4);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
}

.control-btn.close-all {
    color: var(--color-sell);
    border-color: var(--red-a30);
}

.system-status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 20px;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

.status-icon {
    font-size: 1.5rem;
}

.status-info {
    flex: 1;
}

.status-value.connected, .status-value.active {
    color: var(--color-buy);
    font-weight: 600;
}

/* ── Account 頁面佈局 ── */
.account-container {
    max-width: 100%;
    padding: 0 4px;
}

.profile-card .profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.profile-avatar {
    width: 50px;
    height: 50px;
    background: var(--white-a10);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.profile-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
}

.profile-type {
    font-size: 0.9rem;
    color: var(--color-buy);
}

/* 帳戶頁頁首入口（設定/後台）— 僅行動端顯示，桌面版已有 sidebar 對應項 */
.profile-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.profile-header-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--white-a06);
    border: 1px solid var(--white-a10);
    border-radius: var(--radius-12);
    color: var(--text-primary);
    cursor: pointer;
}

.profile-header-icon-btn .icon {
    width: 20px;
    height: 20px;
    stroke-width: 2px;
}

@media (prefers-reduced-motion: no-preference) {
    .profile-header-icon-btn {
        transition: background-color 0.2s ease-out, opacity 0.2s ease-out;
    }
}

.profile-header-icon-btn:hover,
.profile-header-icon-btn:active {
    background: var(--white-a12);
}

@media (min-width: 768px) {
    .profile-header-actions {
        display: none;
    }
}

/* 損益總覽卡（材質 Tier 2，繼承 .glass-card） */
.profit-summary-card {
    text-align: center;
    margin-bottom: var(--space-5);
}

.profit-header {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caption);
}

/* 一卡一焦點：主數字放大、收緊字距 */
.profit-amount.positive {
    color: var(--color-buy);
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: var(--tracking-display);
    margin: var(--space-2) 0;
}

.profit-amount.negative {
    color: var(--color-sell);
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: var(--tracking-display);
    margin: var(--space-2) 0;
}

.change-indicator.positive {
    color: var(--color-buy);
    font-size: 0.85rem;
    letter-spacing: var(--tracking-caption);
}

.change-indicator.negative {
    color: var(--color-sell);
    font-size: 0.85rem;
    letter-spacing: var(--tracking-caption);
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.time-filters {
    display: flex;
    gap: 8px;
}

.time-btn {
    padding: 6px 12px;
    background: var(--white-a05);
    border: 1px solid var(--white-a10);
    border-radius: var(--radius-4);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
}

.time-btn.active {
    background: var(--color-buy);
    border-color: var(--color-buy);
    color: white;
}

/* ── 交易月曆 ── */
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.calendar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cal-export-btn {
    font-size: 0.78rem;
    padding: 4px 8px;
}

.cal-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cal-nav-btn {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-8);
    background: var(--white-a04);
    border: 1px solid var(--white-a08);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cal-nav-btn:hover:not(:disabled) {
    background: var(--white-a08);
    color: var(--text-primary);
}

.cal-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.cal-nav-btn svg,
.cal-nav-btn i {
    width: 16px;
    height: 16px;
}

.cal-month-label {
    font-size: 0.95rem;
    font-weight: 600;
    min-width: 96px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* 月曆主體：7 欄填滿整個卡片寬度 */
.calendar-grid {
    display: grid;
    /* minmax(0,1fr)：預設 1fr 的最小值是 min-content，格內金額字串不縮就會把頁面撐寬 */
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    margin: 16px 0 0;
}

.cal-weekday {
    text-align: center;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 4px 0 6px;
}

/* 對齊用的空白格 */
.cal-pad {
    min-height: 64px;
}

/* 每日格：填滿欄寬的矩形，日期置左上、金額置中 */
.cal-day {
    min-width: 0;
    overflow: hidden;
    min-height: 64px;
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    display: grid;
    grid-template-rows: auto 1fr;
    background: var(--white-a03);
    border: 1px solid var(--white-a05);
    color: var(--text-secondary);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cal-day .cal-date {
    font-size: 0.78rem;
    opacity: 0.8;
    font-variant-numeric: tabular-nums;
}

.cal-day .cal-pnl {
    place-self: center;
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cal-day.has-trades {
    cursor: pointer;
    color: var(--text-primary);
    border-color: transparent;
}

.cal-day.has-trades:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px var(--black-a40);
}

/* 今天：藍色內框標示（inset 避免被裁切） */
.cal-day.today {
    box-shadow: inset 0 0 0 2px var(--color-info-blue);
}

/* CAL-1a：超出資金流水保留期，與「這天沒交易」的空白格區分（斜紋 + ?） */
.cal-day.cal-out-of-window {
    background: repeating-linear-gradient(
        45deg,
        var(--white-a02),
        var(--white-a02) 6px,
        var(--white-a05) 6px,
        var(--white-a05) 12px
    );
    opacity: 0.6;
}

.cal-day.cal-out-of-window .cal-pnl {
    font-size: 0.85rem;
    opacity: 0.6;
}

.cal-error {
    grid-column: 1 / -1;
    color: var(--text-secondary);
    font-size: 0.85rem;
    padding: 8px 0;
}

.calendar-legend {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.legend-keys {
    display: flex;
    gap: 16px;
}

.legend-item {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.legend-item::before {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
}

.legend-item.profit::before {
    background: rgba(16, 185, 129, 0.85);
}

.legend-item.loss::before {
    background: rgba(239, 68, 68, 0.85);
}

.cal-hint {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

/* 月度交易量明細（併入月曆卡片） */
.cal-volume {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--white-a06);
}

.cal-volume-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
    font-weight: 600;
}

.cal-volume-total {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 400;
}

/* 月度交易量與幣種績效明細：資料列的 td 內嵌 text-align:right（見 calendar.js
   renderMonthlyVolume），但 th 吃瀏覽器預設靠左，於是除了第一欄「幣種」之外
   標題與數字全部對不上。`.history-table` 本身沒有任何 CSS 規則，所以這裡
   只針對本表補上，**不做全域規則**——admin.html:554 與 admin-panel.js:1296
   也用同一個 class，那兩張是文字表，右對齊反而是錯的。 */
.cal-volume .history-table th:not(:first-child) {
    text-align: right;
}

.cal-note {
    color: var(--text-secondary);
    font-size: 0.72rem;
    padding: 8px 2px 0;
}

/* 當日明細彈窗 */
.day-detail-dialog {
    width: 92%;
    max-width: 560px;
    padding: 1.75rem;
}

.day-detail-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    column-gap: 8px;
    row-gap: 4px;
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 14px;
}

.day-detail-item {
    white-space: nowrap;
}

.day-detail-sep {
    color: var(--text-secondary);
    opacity: 0.5;
}

.day-detail-fee {
    color: var(--text-secondary);
}

.day-detail-count {
    width: 100%;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.day-detail-count .txt-buy {
    color: var(--color-buy);
    font-weight: 600;
}

.day-detail-count .txt-sell {
    color: var(--color-sell);
    font-weight: 600;
}

@media (max-width: 480px) {
    .day-detail-summary {
        font-size: 0.85rem;
    }
    .day-detail-sep {
        display: none;
    }
}

.day-detail-table {
    max-height: 52vh;
    overflow-y: auto;
}

/* 倉位歷史拉取失敗/不完整（逾時、部分幣種例外）時的提示，
   避免使用者把「拉不到」誤讀成「這天沒有倉位」 */
.day-detail-incomplete-warning {
    background: rgba(240, 173, 78, 0.12);
    border: 1px solid rgba(240, 173, 78, 0.4);
    color: #f0ad4e;
    border-radius: var(--radius-8);
    padding: 8px 12px;
    margin-bottom: 12px;
    font-size: 0.85rem;
    text-align: center;
}

.ta-r {
    text-align: right;
}

/* 窄螢幕縮小月曆格與字級 */
@media (max-width: 640px) {
    .cal-day,
    .cal-pad {
        min-height: 52px;
    }
    .cal-day {
        padding: 4px 5px;
    }
    .cal-day .cal-date {
        font-size: 0.66rem;
    }
    .cal-day .cal-pnl {
        font-size: 0.72rem;
    }
}

.alerts-list {
    margin-top: 16px;
}

.alert-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--white-a05);
}

.alert-item:last-child {
    border-bottom: none;
}

.alert-title {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 500;
}

.alert-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.preferences-list, .connections-list {
    margin-top: 16px;
}

.preference-item, .connection-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--white-a05);
}

.preference-item:last-child, .connection-item:last-child {
    border-bottom: none;
}

.pref-label {
    font-size: 1rem;
    color: var(--text-primary);
}

.pref-value {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.connection-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.connection-icon {
    font-size: 1.5rem;
}

.connection-name {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 500;
}

.connection-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.connection-status.connected {
    color: var(--color-buy);
    font-weight: 600;
}

.connection-status.disconnected {
    color: var(--color-sell);
    font-weight: 600;
}

.edit-btn, .connect-btn {
    padding: 6px 12px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-4);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
}

.connect-btn {
    background: var(--color-buy);
    border-color: var(--color-buy);
    color: white;
}

/* ── Lucide 圖標樣式 ── */
[data-lucide] {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 2;
    color: inherit;
}

.nav-item [data-lucide] {
    width: 1.1rem;
    height: 1.1rem;
}

.header-icon {
    width: 1rem;
    height: 1rem;
    margin-right: 8px;
    color: var(--text-secondary);
}

.status-icon[data-lucide] {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-buy);
}

.connection-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--text-secondary);
}

.avatar-icon {
    width: 2rem;
    height: 2rem;
    color: var(--text-secondary);
}

.search-icon {
    width: 1rem;
    height: 1rem;
    color: var(--text-secondary);
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.stop-icon {
    width: 1.1rem;
    height: 1.1rem;
    margin-right: 8px;
}

/* 槓桿與保證金設定表單樣式 */
.leverage-settings-card .settings-form {
    margin-top: 16px;
}

.form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.form-row label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    width: 30%;
}

.form-input {
    width: 65%;
    padding: 8px 12px;
    background: var(--black-a30);
    border: 1px solid var(--white-a10);
    border-radius: var(--radius-4);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.form-input:focus {
    border-color: var(--color-buy);
    outline: none;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1);
}

.form-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 20px;
}

.order-btn {
    padding: 12px;
    border: none;
    border-radius: var(--radius-xs);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition-default);
}

.buy-btn {
    background: linear-gradient(135deg, var(--color-buy), var(--color-buy-gradient-end));
    color: white;
}

.buy-btn:hover {
    transform: none;
    box-shadow: var(--shadow-buy-sm);
}

.sell-btn {
    background: linear-gradient(135deg, var(--color-sell), var(--color-delete-red-dark));
    color: white;
}

.sell-btn:hover {
    transform: none;
    box-shadow: 0 4px 12px var(--red-a30);
}

/* 槓桿控制滑桿 */
.leverage-control {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 65%;
}

.leverage-control .range-input {
    flex: 1;
}

/* 設定按鈕樣式 */
.settings-btn {
    background: linear-gradient(135deg, var(--color-buy), var(--color-buy-gradient-end));
    border: none;
    border-radius: var(--radius-xs);
    padding: 12px;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition-default);
}

.settings-btn:hover {
    transform: none;
    box-shadow: var(--shadow-buy-sm);
}

.reset-btn {
    background: var(--white-a08);
    border: 1px solid var(--white-a15);
    border-radius: var(--radius-xs);
    padding: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition-default);
}

.reset-btn:hover {
    background: var(--white-a12);
    border-color: var(--white-a25);
    color: var(--text-primary);
    transform: translateY(-1px);
}

/* 全局設定資訊區域 */
.global-settings-info {
    margin: 16px 0 20px 0;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--info) 8%, transparent);
    border: 1px solid var(--blue-a20);
    border-radius: var(--radius-8);
}

.settings-description {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-info-blue);
    font-size: 0.9rem;
    margin: 0;
}

.info-icon {
    width: 16px;
    height: 16px;
    color: var(--color-info-blue);
}

/* 當前設定預覽區域 */
.current-settings-preview {
    margin: 20px 0;
    padding: 16px;
    background: rgba(16, 185, 129, 0.05);
    border: 1px solid var(--emerald-a15);
    border-radius: var(--radius-12);
}

.preview-header {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-buy);
    margin-bottom: 12px;
    text-align: center;
}

.preview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.preview-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.preview-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.preview-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.global-scope {
    color: var(--color-buy) !important;
    font-weight: 700;
}

/* 響應式調整 */
@media (max-width: 768px) {
    .preview-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .preview-item {
        padding: 6px 0;
        border-bottom: 1px solid var(--white-a05);
    }

    .preview-item:last-child {
        border-bottom: none;
    }
}

/* 統計概覽網格 */
.stats-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 16px;
}

.stat-box {
    text-align: center;
    padding: 16px;
}

.box-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
    display: block;
}

.box-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.txt-buy {
    color: var(--color-buy);
}

.txt-sell {
    color: var(--color-sell);
}

/* ── 自訂略過規則卡片 ── */
.skip-rules-empty {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-style: italic;
    padding: 8px 0;
}

.skip-rule-row {
    width: 100%;
    box-sizing: border-box;
    background: var(--white-a05);
    border: 1px solid var(--white-a08);
    border-radius: var(--radius-md);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease !important;
}

.skip-rule-row:hover {
    border-color: rgba(124, 110, 247, 0.6) !important;
    background: var(--white-a08) !important;
    box-shadow: 0 0 0 1px rgba(124, 110, 247, 0.25) !important;
}

.skip-rule-row[data-collapsed="1"] {
    padding: 10px 12px;
    gap: 6px;
    background: rgba(255, 255, 255, 0.03);
}

.skip-rule-row[data-collapsed="1"]:hover {
    border-color: rgba(124, 110, 247, 0.6) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 0 0 1px rgba(124, 110, 247, 0.25) !important;
}

.skip-rule-drag-handle {
    cursor: grab;
    color: var(--text-secondary, #9CA3AF);
    font-size: 1.15rem;
    padding: 0 4px;
    line-height: 1;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease !important;
}

.skip-rule-drag-handle:hover,
.skip-rule-drag-handle:active {
    color: var(--text-primary, #fff);
    cursor: grabbing;
}

.skip-rule-order-btns {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

.skip-rule-order-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary, #9CA3AF);
    border-radius: 4px;
    padding: 3px 5px;
    font-size: 0.62rem;
    line-height: 1;
    cursor: pointer;
    transform: none !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}

.skip-rule-order-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary, #fff);
    border-color: rgba(255, 255, 255, 0.25);
}

.skip-rule-order-btn:disabled {
    opacity: 0.2;
    cursor: not-allowed;
    border-color: transparent;
}

.skip-rule-row.is-dragging {
    opacity: 0.45;
    border: 1px dashed rgba(124, 110, 247, 0.8) !important;
}

.skip-rule-row.drag-over {
    border-color: rgba(16, 185, 129, 0.9) !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.35) !important;
}

.skip-rule-collapse-toggle {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-secondary, #9CA3AF);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.76rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
    transform: none !important;
}

.skip-rule-collapse-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary, #fff);
    border-color: rgba(255, 255, 255, 0.25);
}

.skip-rule-summary-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 2px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.skip-rule-summary-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.skip-rule-summary-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary, #E5E7EB);
    user-select: none;
    transform: none !important;
}

.skip-rule-summary-pill .pill-label {
    color: var(--text-secondary, #9CA3AF);
    font-size: 0.7rem;
}

.skip-rule-summary-pill.tone-blue {
    background: rgba(59, 130, 246, 0.14);
    border-color: rgba(59, 130, 246, 0.35);
    color: #93C5FD;
}

.skip-rule-summary-pill.tone-green {
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(16, 185, 129, 0.35);
    color: #6EE7B7;
}

.skip-rule-summary-pill.tone-red {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.35);
    color: #FCA5A5;
}

.skip-rule-summary-pill.tone-purple {
    background: rgba(139, 92, 246, 0.14);
    border-color: rgba(139, 92, 246, 0.35);
    color: #C4B5FD;
}

.skip-rule-summary-pill.tone-yellow {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.35);
    color: #FCD34D;
}

.skip-rule-summary-pill.tone-muted {
    opacity: 0.65;
    border-style: dashed;
}

.skip-rule-summary-empty {
    font-size: 0.78rem;
    color: var(--text-secondary, #9CA3AF);
    font-style: italic;
    padding: 2px 0;
}

.skip-rule-batch-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    padding: 0 4px;
}

.skip-rule-batch-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary, #9CA3AF);
    font-size: 0.76rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    text-decoration: underline;
    text-underline-offset: 3px;
    transform: none !important;
    transition: color 0.15s ease !important;
}

.skip-rule-batch-btn:hover {
    color: var(--text-primary, #fff);
}

.skip-rule-row-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.skip-rule-name-input {
    flex: 1;
    min-width: 0;
}

.skip-rule-delete-btn {
    flex-shrink: 0;
}

.skip-rule-groups {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skip-rule-group-label {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.skip-rule-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.skip-rule-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    background: var(--white-a08);
    border: 1px solid var(--white-a08);
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    transition: var(--transition-smooth);
}

.skip-rule-chip:has(input:checked) {
    background: color-mix(in srgb, var(--accent-color) 25%, transparent);
    border-color: var(--accent-color);
    color: var(--text-primary);
}

.skip-rule-chip input {
    accent-color: var(--accent-color);
    margin: 0;
}

.skip-rule-symbols-error,
.skip-rule-symbols-empty {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
}

.skip-rule-error {
    color: var(--color-danger-red, #DC2626);
    font-size: 0.8rem;
}

.skip-rule-advanced {
    margin-top: 10px;
    border-top: 1px dashed var(--border-color, #333);
    padding-top: 8px;
}

.skip-rule-advanced-toggle {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 4px 0;
}

.skip-rule-advanced-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.skip-rule-advanced-body[hidden],
.skip-rule-advanced[data-expanded="0"] .skip-rule-advanced-body {
    display: none !important;
}

.skip-rule-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-style: italic;
}

.skip-rules-limit-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-secondary, #9CA3AF);
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.16);
    user-select: none;
    white-space: nowrap;
    transform: none !important;
}

.skip-rules-limit-hint .limit-count {
    color: #FCD34D;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
    .skip-rule-row-header {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ── Settings 設定頁面樣式 ── */
.settings-container {
    max-width: 100%;
    padding: 0 4px;
}

.settings-group {
    margin-top: 16px;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--white-a05);
}

.setting-item:last-child {
    border-bottom: none;
}

.setting-info {
    flex: 1;
    margin-right: 16px;
}

.setting-label {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 500;
}

.setting-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

.setting-control {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 120px;
}

/* 滑桿樣式 */
.range-input {
    width: 100px;
    height: 4px;
    background: var(--white-a10);
    border-radius: 2px;
    outline: none;
    -webkit-appearance: none;
}

.range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-buy);
    cursor: pointer;
    box-shadow: 0 2px 6px var(--emerald-a30);
}

.range-input::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-buy);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px var(--emerald-a30);
}

.range-value {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 600;
    min-width: 45px;
    text-align: right;
}

/* 選擇框樣式 */
.select-input {
    padding: 8px 12px;
    background: var(--black-a30);
    border: 1px solid var(--white-a22);
    border-radius: var(--radius-xs);
    color: var(--text-primary);
    font-size: 0.9rem;
    min-width: 150px;
    transition: var(--transition-input);
}

.select-input:hover {
    border-color: var(--white-a35);
    background: var(--black-a40);
}

.select-input:focus {
    border-color: var(--color-buy);
    outline: none;
    background: var(--black-a40);
    box-shadow: var(--shadow-buy-ring);
}

/* 修復所有的下拉選單選項在深色模式下背景變白導致字看不見的問題 */
select option, .select-input option {
    background-color: var(--bg-dark);
    color: var(--text-primary);
}

/* 數字輸入框樣式 */
.number-input {
    padding: 8px 12px;
    background: var(--black-a30);
    border: 1px solid var(--white-a22);
    border-radius: var(--radius-xs);
    color: var(--text-primary);
    font-size: 0.9rem;
    width: 120px;
    text-align: right;
    font-family: var(--font-mono, monospace);
    transition: var(--transition-input);
}

.number-input:hover {
    border-color: var(--white-a35);
    background: var(--black-a40);
}

.number-input:focus {
    border-color: var(--color-buy);
    outline: none;
    background: var(--black-a40);
    box-shadow: var(--shadow-buy-ring);
}

/* TP 平倉模式設定卡片 */
.tp-mode-card {
    margin-top: 20px;
}

.tp-template-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px 24px 8px;
}

.tp-template-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    white-space: nowrap;
    min-width: 56px;
}

.tp-template-btns {
    display: grid;
    /* minmax(0,1fr)：允許軌道縮小於按鈕文字 min-content，避免窄螢幕撐出容器 */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 767px) {
    .tp-template-btns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    /* 小倉位整倉平倉目標：TP1-4 文字短，手機維持一排四顆水平排列 */
    #fallback-tp-btns {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: 100%;
        gap: 8px;
    }
}

/* TP 快捷模板按鈕 */
.tp-template-btn {
    padding: 8px 10px;
    background: var(--white-a05);
    border: 1px solid var(--white-a15);
    color: var(--text-secondary);
    border-radius: var(--radius-xs);
    font-size: 0.9rem;
    font-family: monospace;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.tp-template-btn:hover,
.tp-template-btn.active {
    background: var(--emerald-a15);
    border-color: var(--color-buy);
    color: var(--color-buy);
}

/* TP 比例輸入格線 */
.tp-pct-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 8px 24px 20px;
}

.tp-pct-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tp-pct-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.tp-pct-item .number-input {
    width: 100%;
    font-size: 1rem;
    padding: 10px 12px;
}

/* card footer row */
.card-footer-row {
    padding: 15px 24px;
    border-top: 1px solid var(--white-a05);
    display: flex;
    justify-content: flex-end;
}

/* Telegram Bot 設定區塊 */
.tg-config-section {
    padding: 14px 20px;
    border-bottom: 1px solid var(--white-a05);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tg-config-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tg-configured-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.tg-chat-id-preview {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-family: monospace;
}
.btn-link {
    background: none;
    border: none;
    color: var(--color-buy);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}
.btn-link.danger { color: var(--color-sell); }
.tg-form-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 480px;
}
.tg-input { font-family: monospace; font-size: 0.85rem; }
.tg-save-btn {
    height: 36px;
    border-radius: var(--radius-8);
    padding: 0 16px;
    width: fit-content;
    font-size: 0.85rem;
}

/* 複選框組 */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text-primary);
    cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-buy);
    cursor: pointer;
}

/* 交易來源資訊 */
.trading-source-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.source-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-8);
    border: 1px solid var(--white-a05);
    background: var(--white-a02);
}

.source-item.primary {
    background: rgba(16, 185, 129, 0.08);
    border-color: var(--emerald-a20);
}

.source-item.secondary {
    background: color-mix(in srgb, var(--info) 5%, transparent);
    border-color: var(--blue-a15);
}

.source-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.source-icon.primary {
    color: var(--color-buy);
}

.source-icon.secondary {
    color: var(--color-info-blue);
}

.source-details {
    flex: 1;
}

.source-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.source-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.source-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: var(--radius-4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.source-status.active {
    background: var(--emerald-a15);
    color: var(--color-buy);
}

.source-status.passive {
    background: var(--blue-a15);
    color: var(--color-info-blue);
}

/* API 狀態 */
.api-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-buy);
}

.status-text {
    font-size: 0.9rem;
    color: var(--color-buy);
    font-weight: 500;
}

.test-connection-btn {
    padding: 6px 12px;
    background: var(--white-a05);
    border: 1px solid var(--white-a10);
    border-radius: var(--radius-4);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
    transition: var(--transition-default);
}

.test-connection-btn:hover {
    border-color: var(--color-buy);
    color: var(--color-buy);
}

/* Token 輸入組 */
.token-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.token-input {
    padding: 8px 12px;
    background: var(--black-a30);
    border: 1px solid var(--white-a10);
    border-radius: var(--radius-xs);
    color: var(--text-primary);
    font-size: 0.9rem;
    width: 200px;
}

.regenerate-token-btn {
    padding: 8px;
    background: var(--white-a05);
    border: 1px solid var(--white-a10);
    border-radius: var(--radius-4);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: var(--transition-default);
}

.regenerate-token-btn:hover {
    border-color: var(--color-buy);
    color: var(--color-buy);
    transform: rotate(180deg);
}

/* 系統資訊網格 */
.system-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 16px;
    padding: 16px 0;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 500;
}

.info-value.status-good {
    color: var(--color-buy);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 操作按鈕 */
.action-buttons {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--white-a05);
}

.action-btn {
    flex: 1;
    padding: 10px 16px;
    background: var(--white-a05);
    border: 1px solid var(--white-a10);
    border-radius: var(--radius-8);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: var(--transition-default);
}

.action-btn:hover {
    border-color: var(--white-a20);
    color: var(--text-primary);
    transform: none;
}

.action-btn.reset-btn:hover {
    border-color: var(--color-sell);
    color: var(--color-sell);
}

@media (max-width: 768px) {
    .setting-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .setting-control {
        align-self: stretch;
        justify-content: space-between;
    }

    .system-info-grid {
        grid-template-columns: 1fr;
    }

    .action-buttons {
        flex-direction: column;
    }

    .scanner-body-layout {
        grid-template-columns: 1fr !important;
    }
}

/* 強平警報紅色高亮閃爍動畫 */
.risk-warning-blink {
    background-color: var(--red-a15) !important;
    animation: risk-blink 1.5s infinite alternate;
}

@keyframes risk-blink {
    0% {
        box-shadow: inset 0 0 4px var(--red-a40);
        background-color: rgba(239, 68, 68, 0.12);
    }
    100% {
        box-shadow: inset 0 0 15px rgba(239, 68, 68, 0.7);
        background-color: rgba(239, 68, 68, 0.35);
    }
}

/* ── 限制表格高度與客製化滾動條樣式 ── */
.scrollable-table-container {
    max-height: 320px;
    overflow-y: auto;
}
.scrollable-table-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.scrollable-table-container::-webkit-scrollbar-track {
    background: transparent;
}
.scrollable-table-container::-webkit-scrollbar-thumb {
    background: var(--white-a12);
    border-radius: var(--radius-sm);
}
.scrollable-table-container::-webkit-scrollbar-thumb:hover {
    background: var(--white-a25);
}

/* ───────────────────────── 市場監控分頁 ───────────────────────── */
.monitor-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.monitor-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
}

.monitor-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.monitor-header .header-subtitle {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.monitor-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.monitor-symbol-pills {
    display: flex;
    gap: 6px;
    background: var(--white-a03);
    border: 1px solid var(--glass-border);
    border-radius: 22px;
    padding: 4px;
}

.monitor-pill {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.82rem;
    padding: 7px 16px;
    border-radius: 18px;
    cursor: pointer;
    transition: var(--transition-smooth);
    white-space: nowrap;
}

.monitor-pill:hover {
    color: var(--text-primary);
}

.monitor-pill.active {
    background: linear-gradient(135deg, color-mix(in srgb, var(--info) 35%, transparent), color-mix(in srgb, var(--info) 18%, transparent));
    color: #dbeafe;
    box-shadow: 0 2px 10px var(--blue-a25);
}

.monitor-refresh-btn {
    height: 40px;
    padding: 0 16px;
    border-radius: var(--radius-lg);
    font-size: 0.85rem;
    font-family: var(--font-sans);
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--blue-a20);
    color: var(--color-info-blue);
    border: 1px solid color-mix(in srgb, var(--info) 40%, transparent);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.monitor-refresh-btn:hover {
    background: color-mix(in srgb, var(--info) 32%, transparent);
}

.monitor-refresh-btn i {
    width: 14px;
    height: 14px;
}

/* 指標卡 grid */
.monitor-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.monitor-metric {
    margin-bottom: 0;
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.monitor-metric .metric-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.monitor-metric .metric-label i {
    width: 14px;
    height: 14px;
}

.monitor-metric .metric-value {
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.monitor-metric .metric-sub {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.metric-sub.pos, .metric-value.pos { color: var(--color-buy); }
.metric-sub.neg, .metric-value.neg { color: var(--color-sell); }

/* 圖表列 */
.monitor-chart-row,
.monitor-liq-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.monitor-chart-card,
.monitor-liq-summary,
.monitor-liq-list-card {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.monitor-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--white-a06);
    padding-bottom: 10px;
}

.monitor-card-title i {
    width: 16px;
    height: 16px;
    color: var(--color-info-blue);
}

.monitor-chart-wrap {
    position: relative;
    height: 240px;
    width: 100%;
}

/* 清算彙總 bar */
.liq-bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
    flex: 1;
}

.liq-bar {
    display: flex;
    width: 100%;
    height: 22px;
    border-radius: var(--radius-11);
    overflow: hidden;
    background: var(--white-a05);
}

.liq-bar-long {
    background: linear-gradient(90deg, var(--color-buy), rgba(16, 185, 129, 0.6));
    transition: width 0.5s var(--ease-out-expo, ease);
    min-width: 0;
}

.liq-bar-short {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.6), var(--color-sell));
    transition: width 0.5s var(--ease-out-expo, ease);
    min-width: 0;
}

.liq-bar-legend {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.liq-bar-legend b { font-weight: 700; }
.liq-long-legend b { color: var(--color-buy); }
.liq-short-legend b { color: var(--color-sell); }

/* 最近清算列表 */
.monitor-liq-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
}

.liq-item {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.025);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    border-left: 2px solid transparent;
}

.liq-item.long { border-left-color: var(--color-sell); }  /* 多頭被清算 = SELL */
.liq-item.short { border-left-color: var(--color-buy); }   /* 空頭被清算 = BUY */

.liq-item .liq-sym { font-weight: 600; }
.liq-item .liq-side-long { color: var(--color-sell); font-weight: 600; }
.liq-item .liq-side-short { color: var(--color-buy); font-weight: 600; }
.liq-item .liq-usd { text-align: right; font-weight: 600; }
.liq-item .liq-time { color: var(--text-secondary); text-align: right; font-size: 0.75rem; }

/* 響應式 */
@media (max-width: 1100px) {
    .monitor-metric-grid { grid-template-columns: repeat(2, 1fr); }
    .monitor-chart-row,
    .monitor-liq-row { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .monitor-metric-grid { grid-template-columns: 1fr; }
    .monitor-header { align-items: flex-start; }
    .monitor-controls { width: 100%; justify-content: space-between; }
}

/* 全市場總表佈局 */
.monitor-search-wrap { position: relative; min-width: 200px; }
.monitor-search-wrap .search-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; color: var(--text-secondary); pointer-events: none;
}
.monitor-search {
    height: 40px; width: 100%; padding: 0 14px 0 38px; border-radius: var(--radius-lg);
    background: var(--white-a03); border: 1px solid var(--glass-border);
    color: var(--text-primary); font-family: var(--font-sans); outline: none;
    transition: var(--transition-smooth);
}
.monitor-search:focus { border-color: rgba(96, 165, 250, 0.6); }
.monitor-sort {
    height: 40px; padding: 0 30px 0 14px; border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface-2) 90%, transparent); border: 1px solid var(--glass-border);
    color: var(--text-primary); font-family: var(--font-sans); outline: none; cursor: pointer;
}

.monitor-body-layout { display: block; }
.monitor-overview-card { margin-bottom: 0; }
.monitor-table-scroll { max-height: 680px; overflow-y: auto; overflow-x: auto; }
.monitor-container { width: 100%; }

.monitor-table { width: 100%; }
.monitor-table thead th {
    position: sticky; top: 0; z-index: 2; background: var(--bg);
    font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.4px;
}
.monitor-table tbody tr { cursor: pointer; transition: background 0.15s ease; }
.monitor-table tbody tr:hover { background: rgba(96, 165, 250, 0.08); }
.monitor-table td { font-variant-numeric: tabular-nums; font-size: 0.85rem; }
.monitor-table .mt-sym { font-weight: 700; }
/* 幣種圖示：圓形底圖先畫字母，圖載入成功再疊上去。
   圖拿不到（對照表沒收錄 / onerror）就只剩字母，不會留破圖或空洞。 */
.monitor-table .mt-coin {
  position: relative; overflow: hidden; display: inline-flex;
  align-items: center; justify-content: center; vertical-align: middle;
  width: 20px; height: 20px; margin-right: 6px; border-radius: 50%;
  background: var(--bg-tertiary, #262b36); font-size: 9px; font-weight: 800;
}
.monitor-table .mt-coin .coin-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.coin-cat { font-size: 12px; line-height: 1; }
.monitor-table .mt-sym small { color: var(--text-secondary); font-weight: 500; font-size: 0.72rem; }
.mt-pos { color: var(--color-buy); }
.mt-neg { color: var(--color-sell); }
.mt-muted { color: var(--text-secondary); }
.mt-apr { color: var(--text-secondary); font-size: 0.72rem; }

.monitor-liq-feed-card .monitor-liq-list { max-height: 590px; }

/* 單幣細節 Modal */
.monitor-detail-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(5, 7, 12, 0.45); backdrop-filter: blur(2px);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 4vh 1rem; overflow-y: auto;
    opacity: 1; transition: opacity 0.2s ease;
}
.monitor-detail-overlay.hidden { display: none; opacity: 0; }
.monitor-detail-panel {
    width: min(1040px, 96vw); margin-bottom: 0;
    display: flex; flex-direction: column; gap: 1rem;
    animation: detailPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes detailPop {
    from { transform: translateY(14px) scale(0.98); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
.detail-header {
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--white-a08); padding-bottom: 12px;
}
.detail-header h3 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.5px; }
.detail-close {
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--glass-border);
    background: var(--white-a04); color: var(--text-secondary);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: var(--transition-smooth);
}
.detail-close:hover { background: var(--red-a20); color: var(--color-sell); }
.detail-close i { width: 18px; height: 18px; }

@media (max-width: 1100px) {
    .monitor-body-layout { grid-template-columns: 1fr; }
}

/* 單幣細節 Modal：深色磨砂玻璃（半透明深底 + backdrop blur），不用 url(#glass-distortion) 扭曲 */
.monitor-detail-panel {
    background: color-mix(in srgb, var(--surface-2) 88%, transparent);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid var(--white-a14);
    box-shadow: 0 24px 70px var(--black-a55);
    min-width: 0;            /* 防止 grid 子項撐破外層 */
}
/* 內層卡片：淡淡的磨砂層次，維持深色主題淺色文字 */
.monitor-detail-panel .glass-card {
    background: var(--white-a06);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: none;
    min-width: 0;
}
.monitor-detail-panel::before,
.monitor-detail-panel::after,
.monitor-detail-panel .glass-card::before,
.monitor-detail-panel .glass-card::after {
    display: none !important;   /* 移除 ::before 斜向漸層 + ::after url(#glass-distortion) 扭曲 */
}

/* 防止圖表 canvas 超出卡片（grid 子項預設 min-width:auto 會被 canvas 撐破）*/
.monitor-detail-panel .monitor-metric-grid > *,
.monitor-detail-panel .monitor-chart-row > *,
.monitor-detail-panel .monitor-liq-row > * { min-width: 0; }
.monitor-chart-wrap { overflow: hidden; }
.monitor-chart-wrap canvas { max-width: 100% !important; }

/* ═══ Audit Modal ═══ */
.audit-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(5, 7, 12, 0.6); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 2vh 1rem; overflow-y: auto;
    opacity: 1; transition: opacity 0.2s ease;
}
.audit-overlay.hidden { display: none; opacity: 0; }
.audit-panel {
    position: relative;
    width: min(520px, 94vw); max-height: 90vh; overflow-y: auto;
    background: color-mix(in srgb, var(--surface-2) 92%, transparent);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid var(--white-a14);
    border-radius: var(--radius-md); padding: 24px;
    box-shadow: 0 24px 70px var(--black-a55);
    animation: detailPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.audit-close {
    position: absolute; top: 12px; right: 12px;
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid var(--white-a12);
    background: var(--white-a04); color: var(--color-muted-gray);
    font-size: 1.2rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.audit-close:hover { background: var(--red-a20); color: var(--color-danger-red); }
.audit-content { display: flex; flex-direction: column; gap: 16px; }
.audit-loading { text-align: center; color: var(--color-muted-gray); padding: 40px 0; }
.audit-section { display: flex; flex-direction: column; gap: 8px; }
.audit-section-title {
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: #64748B;
    border-bottom: 1px solid var(--white-a06);
    padding-bottom: 6px;
}
.audit-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 10px; border-radius: var(--radius-8);
    background: var(--white-a03); font-size: 0.82rem;
}
.audit-row .label { color: var(--color-muted-gray); }
.audit-row .value { font-weight: 600; color: var(--text); }
.audit-layer {
    padding: 10px 12px; border-radius: var(--radius-sm);
    background: var(--white-a03);
    border-left: 3px solid var(--white-a10);
}
.audit-layer.pass { border-left-color: var(--color-success-green); }
.audit-layer.fail { border-left-color: var(--color-danger-red); }
.audit-layer.skip { border-left-color: var(--color-warning-amber); }
.audit-layer-head {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.8rem; font-weight: 600;
}
.audit-layer-detail { font-size: 0.72rem; color: var(--color-muted-gray); margin-top: 4px; }
.audit-verdict {
    text-align: center; padding: 12px; border-radius: var(--radius-sm);
    font-weight: 700; font-size: 0.9rem;
}
.audit-verdict.pass { background: rgba(16,185,129,0.12); color: var(--color-success-green); }
.audit-verdict.reject { background: rgba(239,68,68,0.12); color: var(--color-danger-red); }

/* ── 設定未儲存之視覺提示 (Visual Feedback for unsaved settings) ── */
.dirty-glow {
    position: relative;
    background: linear-gradient(135deg, var(--color-warning-amber) 0%, #d97706 100%) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.45) !important;
    animation: dirty-pulse 2s infinite alternate !important;
}

@keyframes dirty-pulse {
    0% { box-shadow: 0 0 8px var(--amber-a30); }
    100% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.6); }
}

.input-dirty {
    border-color: rgba(245, 158, 11, 0.6) !important;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.25) !important;
    background: rgba(245, 158, 11, 0.03) !important;
    transition: all 0.25s ease-in-out;
}

.nav-dirty-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background-color: var(--color-warning-amber);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--color-warning-amber);
    pointer-events: none;
    animation: dot-pulse 1.5s infinite alternate;
}

@keyframes dot-pulse {
    0% { transform: scale(0.9); opacity: 0.8; }
    100% { transform: scale(1.2); opacity: 1; }
}



/* --- DASHBOARD V2 MIGRATED STYLES --- */

  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.28} }
  @keyframes ring  { 0%{transform:scale(1);opacity:.5} 100%{transform:scale(2.5);opacity:0} }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
  /* dashboard 橫向布局覆蓋 */
  #app.app { min-height: 100vh; }
  @media (min-width: 768px) { #app.app { flex-direction: row; } }
  .btn-close { padding:3px 10px;background:rgba(239,68,68,0.1);border:1px solid var(--red-a30);border-radius:var(--radius-xs);color:#fca5a5;font-size:0.69rem;font-weight:600;cursor:pointer; }
  .btn-close:hover { background:rgba(239,68,68,0.18); }

  /* ── layout ── */
  .main-pad { padding:10px 22px 14px; max-width:1600px; margin:0 auto; }
  .grid-account { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:8px; }
  .grid-middle  { display:grid; grid-template-columns:1fr 352px; gap:8px; margin-bottom:8px; }
  .grid-stats   { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .hdr-sub { font-size:0.72rem; color:var(--text-3); padding-left:4px; border-left:1px solid var(--white-a08); margin-left:3px; }

  /* ── positions table ── */
  .pos-table-hdr {
    display:grid;
    grid-template-columns:minmax(124px,1.05fr) minmax(72px,0.8fr) minmax(92px,1.05fr) minmax(90px,1.05fr) minmax(96px,1.05fr) 68px;
    padding:6px 16px;
    background:rgba(0,0,0,0.18);
    border-bottom:1px solid var(--white-a04);
  }
  .pos-row {
    display:grid;
    grid-template-columns:minmax(124px,1.05fr) minmax(72px,0.8fr) minmax(92px,1.05fr) minmax(90px,1.05fr) minmax(96px,1.05fr) 68px;
    padding:10px 16px;
    border-bottom:1px solid var(--white-a04);
    align-items:center;
  }

  /* ── tablet ── */
  @media (max-width:1023px) {
    .grid-middle { grid-template-columns:1fr 290px; }
  }


  /* ── mobile ── */
  @media (max-width:767px) {
    .main-pad { padding:8px 10px 12px; }
    .hdr-sub { display:none; }
    .grid-account { grid-template-columns:1fr; }
    .grid-middle  { grid-template-columns:1fr; }
    .grid-stats   { grid-template-columns:1fr; }

    .pos-table-hdr { display:none; }
    .pos-row {
      display:grid;
      grid-template-columns:1fr 1fr;
      grid-template-areas:
        "sym  side"
        "pnl  pnl"
        "qty  entry"
        "act  act";
      gap:6px;
      padding:12px 12px;
      margin:4px 0;
      border:1px solid var(--white-a06);
      border-radius:var(--radius-8);
    }
    .pos-row > .pc-sym   { grid-area:sym; }
    .pos-row > .pc-side  { grid-area:side; justify-self:end; }
    .pos-row > .pc-qty   { grid-area:qty; }
    .pos-row > .pc-entry { grid-area:entry; justify-self:end; }
    .pos-row > .pc-pnl   { grid-area:pnl; }
    .pos-row > .pc-act   { grid-area:act; justify-self:end; }
  }

/* === DASHBOARD V2 MIN HEIGHT FIXES === */
#balance-total, #unrealized-pnl, #today-pnl {
    min-height: 32px;
}
.stat-card-v2 {
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* stat-card-v2 loading/空狀態：純樣式佔位，不接 JS */
.stat-card-v2 .stat-value:empty::before,
.stat-card-v2 .stat-value[data-loading="true"]::before {
    content: '--';
    color: var(--text-secondary);
    opacity: 0.5;
}
#dashboard-positions-list {
    min-height: 150px;
}
#signals-stream-container {
    min-height: 200px;
}

/* ══════════════════════════════════════════════
   G3：全站小按鈕 mobile 觸控目標 ≥ 44×44px
   ══════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* 撤單/平倉/篩選 chip 等小按鈕最小觸控高度 */
    .btn-close,
    .control-btn,
    .filter-btn,
    .sig-tab,
    .scope-btn,
    .monitor-refresh-btn,
    button.btn-close,
    #btn-refresh-account,
    #btn-apply-settings,
    #btn-reset-settings,
    #sidebar-toggle {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* 底部 nav 按鈕已有 height:100%，確保不小於 44px */
    .bottom-nav .nav-item {
        min-height: 44px;
    }
}

/* ══════════════════════════════════════════════
   T9：trading 分頁 — 持倉/掛單 table → mobile 卡片
   ══════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* 隱藏 table 表頭（monitor-table 例外：市場監控總表仍需橫滑表格） */
    .positions-table:not(.monitor-table) thead {
        display: none;
    }
    /* tbody → flex 卡片堆疊 */
    .positions-table:not(.monitor-table) tbody {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 4px 0;
    }
    /* 每列 tr → 卡片 */
    .positions-table:not(.monitor-table) tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px 12px;
        padding: 12px;
        background: rgba(255, 255, 255, 0.015);
        border: 1px solid var(--white-a05);
        border-radius: var(--radius-12);
        margin: 0;
        transition: background 0.2s ease;
    }
    /* 空白提示列不加突兀白背景與硬框線，自然融入外層卡片 */
    .positions-table:not(.monitor-table) tbody tr:has(.empty-state) {
        display: block;
        background: transparent !important;
        border: 1px dashed var(--white-a08) !important;
        padding: 8px 12px;
    }
    /* 第 1 欄（商品/Symbol）— 佔整列 */
    .positions-table:not(.monitor-table) tbody tr td:first-child {
        grid-column: 1 / -1;
        font-size: 0.95rem;
        font-weight: 700;
    }
    /* 最後一欄（撤單/平倉鈕）— 佔整列靠右 */
    .positions-table:not(.monitor-table) tbody tr td:last-child {
        grid-column: 1 / -1;
        display: flex;
        justify-content: flex-end;
        margin-top: 4px;
    }
    /* 各 td 字級 */
    .positions-table:not(.monitor-table) tbody tr td {
        font-size: 0.82rem;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    /* 撤單按鈕在卡片內拉寬一點 */
    .positions-table:not(.monitor-table) tbody tr td:last-child .btn-close {
        padding: 8px 18px;
        font-size: 0.82rem;
    }
}

/* ══════════════════════════════════════════════
   訊號卡片 — 變體 C3「展開層」定案設計
   （.scratch/vue-migration/mockups/SIGNAL-CARD.md §6-§7、
   signal-card-variants.html 為權威來源；渲染邏輯在
   frontend/js/signal-audit.js buildRichSignalCard()）
   本站僅深色模式，無淺色主題。
   ══════════════════════════════════════════════ */
.rich-signal-card {
    --rsc-buy: var(--color-buy);
    --rsc-sell: var(--color-sell);
    --rsc-muted: var(--text-secondary, var(--color-muted-gray));
    position: relative;
    cursor: pointer;
    background: linear-gradient(180deg, rgba(20, 26, 42, 0.78), rgba(14, 18, 30, 0.78));
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    padding: 14px 16px 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 6px 20px var(--black-a30);
    overflow: hidden;
}
/* REJECTED 系列：卡片整體降低視覺權重（未進場，不是需要盯著的持倉） */
.rich-signal-card.rsc-rejected { opacity: 0.75; }
/* scope 編碼：跟單副本用極淡藍色調底取代文字膠囊（SIGNAL-CARD.md §3 變體 C） */
.rich-signal-card.rsc-scoped {
    background: linear-gradient(180deg, rgba(30, 40, 70, 0.5), rgba(14, 18, 30, 0.78));
}

.rsc-dirbar {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
}
.rsc-dirbar-buy { background: var(--rsc-buy); }
.rsc-dirbar-sell { background: var(--rsc-sell); }
.rsc-dirbar-reject { background: var(--rsc-sell); }
/* 結構性跳過（IGNORED / MODE_NOT_TRADABLE）：不是風控拒絕，不染紅。 */
.rsc-dirbar-neutral { background: var(--rsc-muted, #64748B); }

.rsc-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.rsc-dirlabel {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.rsc-dirlabel-buy { color: var(--rsc-buy); }
.rsc-dirlabel-sell { color: var(--rsc-sell); }
.rsc-dirlabel-muted { color: var(--rsc-muted); }
.rsc-symbol {
    font-weight: 800;
    font-size: 1.05rem;
    overflow-wrap: anywhere;
}
/* 激進模式標示：icon 取代 badge（SIGNAL-CARD.md §6.2 定案，send icon） */
.rsc-aggr-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--color-warning-amber);
    filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.5));
}
.rsc-status-icon {
    margin-left: auto;
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
    flex-shrink: 0;
}
.rsc-status-win { background: rgba(16, 185, 129, 0.18); color: var(--rsc-buy); }
.rsc-status-loss { background: rgba(239, 68, 68, 0.18); color: var(--rsc-sell); }
.rsc-status-neutral { background: rgba(148, 163, 184, 0.15); color: var(--rsc-muted); }
.rsc-status-pending { background: rgba(148, 163, 184, 0.15); color: var(--rsc-muted); }

.rsc-pnl-big { font-weight: 800; font-size: 1.3rem; }
.rsc-pnl-pos { color: var(--rsc-buy); }
.rsc-pnl-neg { color: var(--rsc-sell); }
.rsc-pnl-label { font-size: 0.68rem; font-weight: 600; color: var(--rsc-muted); }
.rsc-meta-rr { font-size: 0.72rem; font-weight: 600; color: var(--rsc-buy); }

.rsc-scope-chip {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 5px;
    line-height: 1.4;
    white-space: nowrap;
}
/* 跟單副本＝真的花了錢，視覺權重高於只是理論績效的全域母列。 */
.rsc-scope-mine {
    background: rgba(56, 189, 248, 0.18);
    color: #7DD3FC;
    border: 1px solid rgba(56, 189, 248, 0.35);
}
.rsc-scope-global {
    background: var(--white-a05);
    color: var(--rsc-muted);
    border: 1px solid rgba(255, 255, 255, 0.09);
}

.rsc-time-row {
    font-size: 0.72rem;
    color: var(--rsc-muted);
    letter-spacing: 0.02em;
}

.rsc-meta-row {
    font-size: 0.75rem;
    color: var(--rsc-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.rsc-meta-row > span:not(:first-child)::before { content: '·'; opacity: 0.6; margin-right: 8px; }
.rsc-meta-row > span:last-child { margin-left: auto; }

/* 交易所平倉列：自己一行，盈虧放大＋上色（訊號卡最重要的數字，不與其他 meta 擠同一行） */
.rsc-close-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--white-a06);
}
.rsc-close-label {
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    color: var(--rsc-muted);
}
.rsc-close-time { font-size: 0.72rem; color: var(--rsc-muted); }
.rsc-close-pnl {
    margin-left: auto;
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.rsc-close-pnl.win { color: var(--rsc-buy); }
.rsc-close-pnl.loss { color: var(--rsc-sell); }
.rsc-settle-win { color: var(--rsc-buy); }
.rsc-settle-loss { color: var(--rsc-sell); }

/* 展開層：原生 <details>/<summary>，每張卡各自獨立，無手風琴（SIGNAL-CARD.md §7.1/§7.4） */
.rsc-details {
    border-top: 1px solid var(--white-a06);
    padding-top: 8px;
}
.rsc-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    list-style: none;
    padding: 6px 2px;
    min-height: 32px;
    border-radius: var(--radius-xs);
}
.rsc-summary::-webkit-details-marker { display: none; }
.rsc-summary::marker { content: ''; }
.rsc-summary:focus-visible {
    outline: 2px solid var(--accent, #7DD3FC);
    outline-offset: 3px;
}
.rsc-tp-label { font-size: 0.68rem; color: var(--rsc-muted); }
.rsc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--white-a14); flex-shrink: 0; }
.rsc-dot.on { background: var(--rsc-buy); }
/* 影子訊號（未真的下單）的 TP 點：空心，與真實成交區分 */
.rsc-dot.on.sim { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rsc-buy); }
.rsc-sim-tag { opacity: .7; font-style: italic; }
/* R3：模擬結算的收尾方式（止損 / TP4 止盈 / TPn 後止損 / 保本）。
   沿用 rsc-sim-tag 的「斜體＋降透明＝沒真的成交」語彙，只多疊一個收尾色與
   虛線外框；實線膠囊留給真實成交（.rsc-close-row / .rsc-status-*），兩者不會混。 */
.rsc-sim-tag[class*="rsc-sim-"] {
    opacity: 1;
    padding: 1px 7px;
    border-radius: 6px;
    border: 1px dashed currentColor;
    font-weight: 600;
    letter-spacing: .01em;
}
.rsc-sim-loss { color: var(--rsc-sell); background: rgba(239, 68, 68, 0.10); }
.rsc-sim-win { color: var(--rsc-buy); background: rgba(16, 185, 129, 0.10); }
.rsc-sim-neutral { color: var(--rsc-muted); background: rgba(148, 163, 184, 0.10); }
/* TPn 是真的摸到的停利點（好事），後面回打止損是壞事——同一個紅標籤裡
   把 TPn 這幾個字單獨標綠，整體 tone 仍是 loss。 */
.rsc-tp-hi { color: var(--rsc-buy); }

/* 分頁列右側的範圍揭露：數字只是最近 N 筆內的分布，不是全時期總數 */
.sig-tab-scope {
    margin-left: auto;
    align-self: center;
    font-size: 0.76rem;
    color: var(--text-secondary, #94A3B8);
    opacity: .8;
    white-space: nowrap;
}
/* 當前分頁的精確筆數與收尾組成（分頁列下方、卡片列表上方） */
.sig-filter-summary {
    margin: -4px 0 14px;
    padding: 8px 12px;
    border-left: 2px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0 8px 8px 0;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-secondary, #94A3B8);
}
.sig-filter-summary:empty { display: none; }
@media (max-width: 720px) {
    .sig-tab-scope { margin-left: 0; width: 100%; white-space: normal; }
}
/* TD-92：方向解析錯誤的訊號，數據不可信，必須醒目 */
.rsc-misparsed { color: #F59E0B; font-weight: 600; }

.rsc-sl-mini { color: var(--rsc-sell); font-weight: 700; }
.rsc-sl-mini-muted { color: var(--rsc-muted); font-weight: 600; }
.rsc-chevron {
    margin-left: auto;
    color: var(--rsc-muted);
    font-size: 0.68rem;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}
.rsc-chevron svg { width: 11px; height: 11px; transition: transform 0.18s ease; }
.rich-signal-card details[open] .rsc-chevron svg { transform: rotate(180deg); }
.rich-signal-card details[open] .rsc-summary { margin-bottom: 2px; }

.rsc-detail {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--white-a08);
    margin-top: 4px;
}
.rsc-detail-row { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; }
.rsc-detail-row .rsc-label { width: 34px; font-size: 0.66rem; color: var(--rsc-muted); flex-shrink: 0; }
.rsc-detail-row .rsc-val { font-weight: 600; color: var(--rsc-muted); }
.rsc-detail-row.reached .rsc-val { color: var(--rsc-buy); font-weight: 800; }
.rsc-detail-row.sl .rsc-val { color: var(--rsc-sell); font-weight: 700; }
.rsc-detail-row.sl-muted .rsc-val { color: var(--rsc-muted); font-weight: 600; }
.rsc-detail-row .rsc-rr { font-size: 0.66rem; color: var(--rsc-muted); margin-left: auto; }
/* RR 只在該層 TP 真的達標時轉綠：未達標的 RR 是預期值，不該長得像已入袋。 */
.rsc-detail-row.reached .rsc-rr { color: var(--rsc-buy); font-weight: 600; }
.rsc-note {
    font-size: 0.72rem;
    color: var(--rsc-muted);
    padding-top: 4px;
    border-top: 1px dashed var(--white-a08);
    margin-top: 4px;
    line-height: 1.5;
    word-break: break-all;
    overflow-wrap: break-word;
}

/* ══════════════════════════════════════════════
   T10：signals 公開頁 mobile
   ══════════════════════════════════════════════ */

/* 篩選 chip 列 — 橫滑，不換行 */
@media (max-width: 767px) {
    /* 時間篩選下拉彈出層橫滑 */
    #date-filter-popover {
        min-width: 160px !important;
        max-width: 90vw;
    }

    /* 訊號分類 Tab 橫滑 */
    #signal-filter-tabs {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    #signal-filter-tabs::-webkit-scrollbar { display: none; }
    #signal-filter-tabs .sig-tab {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* 範圍切換（全部/個人/全域）橫滑 */
    .scope-toggle {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 訊號卡 320px 單欄滿版 */
    .signals-stream-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    /* 統計卡格線 320px 單欄 */
    .signals-stats-grid {
        grid-template-columns: 1fr !important;
    }

    /* 標題列：標題 + 篩選鈕在窄螢幕改直排，避免擠壓 */
    .signals-header {
        flex-wrap: wrap;
        row-gap: 10px;
        margin-bottom: 16px;
    }
    .signals-header h2 {
        font-size: 1.25rem;
    }

    /* 篩選/日期彈出層內的日期輸入 → 觸控目標 ≥44px */
    #filter-month-date,
    #filter-custom-date {
        min-height: 44px !important;
        box-sizing: border-box;
    }

    /* 搜尋欄 → 觸控目標 ≥44px，節奏與訊號卡對齊 */
    .search-input {
        min-height: 44px;
        box-sizing: border-box;
        font-size: 0.95rem;
    }
    .search-section {
        margin-bottom: 16px;
    }

    /* 訊號卡片：320px 內距收斂、節奏加密，維持可讀而不擁擠 */
    .rich-signal-card {
        padding: 12px 12px 12px 14px !important;
        gap: 8px !important;
        border-radius: 12px !important;
    }
    /* 頂列（方向/幣種/激進icon/狀態圖示）允許換行，避免橫向溢出裁切 */
    .rsc-head {
        row-gap: 6px !important;
    }
    .rsc-symbol {
        font-size: 0.98rem !important;
        min-width: 0;
    }
    /* 狀態圖示靠右：方向/幣種/scope 膠囊/激進 icon 是一組識別資訊，
       狀態是另一組。全部左靠會擠成一團、右側留大片空白。 */
    .rsc-head .rsc-status-icon {
        margin-left: auto !important;
    }
    .rsc-meta-row {
        row-gap: 4px !important;
    }
    .rsc-meta-row > span:last-child {
        margin-left: 0 !important;
    }
    /* 展開摘要列觸控目標 ≥44px，與其餘卡片節奏對齊 */
    .rsc-summary {
        min-height: 44px !important;
    }
}

/* ══════════════════════════════════════════════
   Monitor：sticky 首欄 + mobile 欄位精簡
   ══════════════════════════════════════════════ */

/* 首欄（幣種）固定，讓橫滑時仍看得到幣種 */
.monitor-table th:first-child,
.monitor-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bg-dark);
    /* 稍微加右側陰影做視覺分隔 */
    box-shadow: 2px 0 6px var(--black-a30);
}
.monitor-table thead th:first-child {
    z-index: 3; /* thead 要比 tbody 高 */
}

/* mobile：改為全欄位顯示，靠表格自身橫向捲動（非精簡欄位），
   sticky 首欄仍固定，其餘欄位靠 .monitor-table-scroll 橫滑看到 */
@media (max-width: 767px) {
    .monitor-table th,
    .monitor-table td {
        white-space: nowrap;
        padding: 8px 6px; /* 收斂 padding，讓橫滑欄位不被撐寬 */
    }

    /* sticky 首欄瘦身：只留幣種簡稱，避免佔掉近半畫面寬 */
    .monitor-table th:first-child,
    .monitor-table td:first-child {
        max-width: 92px;
        min-width: 72px;
        width: 84px;
        padding: 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        /* 不透明背景，避免橫滑時底下文字透出重疊 */
        background: var(--bg-dark);
        /* 右緣分隔線，提示使用者可橫滑 */
        border-right: 1px solid var(--white-a08);
        box-shadow: 3px 0 8px rgba(0, 0, 0, 0.35);
    }
    .monitor-table td.mt-sym {
        font-size: 0.8rem;
        white-space: normal; /* 允許簡稱與 /USDT 換行，避免橫向撐寬 */
    }
    .monitor-table td.mt-sym small {
        display: block; /* /USDT 換到次行，字級已較小 */
        font-size: 0.68rem;
        line-height: 1.1;
    }

    /* 確保 monitor 表格橫滑（表內滑動，非整頁滑動） */
    .monitor-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 單幣細節 Modal → mobile 全螢幕 bottom-sheet */
    .monitor-detail-overlay {
        align-items: flex-end !important;
    }
    .monitor-detail-panel {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 85vh;
        overflow-y: auto;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    }
}

/* ══════════════════════════════════════════════
   G4：liquid-glass mobile 降級
   中低階 Android (prefers-reduced-motion / <768px)
   ══════════════════════════════════════════════ */

/* 低效能裝置：關閉 backdrop-filter，改用純半透明背景 */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    /* 只在確認不需要 reduced-motion 時才輕量保留 */
}

@media (max-width: 767px) {
    /* glass-card 在 mobile 降低 backdrop-filter 強度（保留但減少層數） */
    .glass-card {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

/* prefers-reduced-motion：完全停用動畫與 backdrop 重渲染 */
@media (prefers-reduced-motion: reduce) {
    .bottom-nav {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background-color: color-mix(in srgb, var(--surface-2) 94%, transparent);
    }
    .glass-card {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: color-mix(in srgb, var(--surface-2) 85%, transparent);
    }
    /* 停用所有 CSS transition/animation */
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* ══════════════════════════════════════════════
   Admin：12 張 table 橫滑包裹 + KPI 卡格線
   ══════════════════════════════════════════════ */

/* 批次為所有未加 overflow 的 admin 表格加橫滑 */
#admin-page table,
.admin-section table {
    min-width: 600px; /* 確保橫滑空間 */
}

#admin-page .table-wrapper,
#admin-page .card table,
#admin-page section > table,
#admin-page > table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
}

/* 首欄 sticky（幣種/ID/用戶等識別欄） */
#admin-page table th:first-child,
#admin-page table td:first-child {
    position: sticky;
    left: 0;
    background: var(--bg);
    z-index: 1;
    box-shadow: 2px 0 4px var(--black-a40);
}

/* admin KPI 卡 auto-fit */
.kpi-grid,
.admin-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

@media (max-width: 767px) {
    /* admin table 讓每欄稍縮，維持橫滑可用 */
    #admin-page table th,
    #admin-page table td {
        white-space: nowrap;
        font-size: 0.78rem;
        padding: 6px 8px;
    }
}

/* ══════════════════════════════════════════════
   T11：settings 分頁 mobile — 禁止整頁橫向滑動
   （html/body 雙層保險 + 內部元素強制不超過視窗寬）
   ══════════════════════════════════════════════ */
html {
    overflow-x: hidden;
}

@media (max-width: 767px) {
    #tab-settings,
    #tab-settings * {
        max-width: 100%;
    }
    #tab-settings img {
        height: auto;
    }
    /* 綁定卡片內的橫排 row 在極窄螢幕改為換行，避免子元素被擠出視窗 */
    #google-profile-card {
        min-width: 0;
    }
    .mode-selector,
    .execution-mode-card .mode-selector {
        flex-wrap: wrap;
    }
}

/* ══════════════════════════════════════════════
   底部導航 — 精簡為 4 主分頁 + 更多
   ══════════════════════════════════════════════ */
#nav-more-sheet,
#nav-more-backdrop {
    display: none;
}

@media (max-width: 767px) {
    .bottom-nav .nav-item {
        width: auto;
        flex: 1;
    }
    #nav-more-btn {
        position: relative;
    }

    /* iOS 風格 bottom sheet：圓角頂部 + grabber + 大行項目列表 */
    #nav-more-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: color-mix(in srgb, var(--surface-2) 97%, transparent);
        backdrop-filter: blur(20px) saturate(1.3);
        -webkit-backdrop-filter: blur(20px) saturate(1.3);
        border-top: 0.5px solid var(--white-a14);
        border-radius: 16px 16px 0 0;
        display: flex;
        flex-direction: column;
        padding: 8px 0 calc(56px + 8px + env(safe-area-inset-bottom, 0px)); /* 底部留給 tab bar，不重疊 */
        z-index: 99;
        max-height: 70vh;
        overflow-y: auto;
        transform: translateY(100%);
        pointer-events: none;
        /* compositor-friendly：只動 transform，iOS 慣用彈性曲線 */
        transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    }
    #nav-more-sheet::before {
        content: '';
        display: block;
        width: 36px;
        height: 5px;
        border-radius: 3px;
        background: rgba(255, 255, 255, 0.3);
        margin: 8px auto 6px;
        flex-shrink: 0;
    }
    #nav-more-sheet.open {
        transform: translateY(0);
        pointer-events: auto;
    }
    #nav-more-sheet .nav-more-item {
        display: flex;
        align-items: center;
        gap: 14px;
        min-height: 52px;
        padding: 0 20px;
        background: none;
        border: none;
        border-bottom: 0.5px solid var(--white-a08);
        color: var(--text-primary);
        font-size: 17px;
        font-weight: 400;
        cursor: pointer;
        width: 100%;
        text-align: left;
    }
    #nav-more-sheet .nav-more-item:last-child {
        border-bottom: none;
    }
    #nav-more-sheet .nav-more-item .icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }
    #nav-more-sheet .nav-more-item.active {
        color: var(--accent);
    }
    #nav-more-backdrop {
        position: fixed;
        inset: 0;
        z-index: 98;
        background: rgba(0, 0, 0, 0.35);
        opacity: 0;
        display: none;
        transition: opacity 0.32s ease;
    }
    #nav-more-backdrop.open {
        display: block;
        opacity: 1;
    }
}

/* ── 倉位歷史卡片與保證金變動紀錄彈窗 UI ── */
.pos-dialog-custom {
    max-width: 580px;
    width: 95%;
}

.pos-dialog-body-scroll {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 4px;
}

.pos-history-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 10px;
}

.pos-history-card {
    background: var(--white-a03);
    border: 1px solid var(--white-a08);
    border-radius: var(--radius-12);
    padding: 14px 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.pos-history-card:hover {
    border-color: var(--white-a18);
    background: var(--white-a05);
}

.pos-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed var(--white-a10);
    padding-bottom: 8px;
    margin-bottom: 10px;
}

.pos-card-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pos-card-title .symbol-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary, #ffffff);
}

.pos-badge {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: var(--radius-4);
    font-weight: 600;
}

.tag-long {
    background: var(--emerald-a20);
    color: var(--up);
}

.tag-short {
    background: var(--red-a20);
    color: var(--down);
}

.tag-mode, .tag-lev {
    background: var(--white-a08);
    color: rgba(255, 255, 255, 0.7);
}

.pos-card-status {
    font-size: 0.82rem;
    font-weight: 600;
}

.pos-card-status.status-closed {
    color: var(--color-buy);
}

.pos-card-status.status-liquidated {
    color: var(--color-sell);
}

.pos-card-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    font-size: 0.85rem;
}

.pos-metric-row {
    display: flex;
    flex-direction: column;
}

.metric-label {
    color: var(--text-secondary, #9ca3af);
    font-size: 0.75rem;
    margin-bottom: 2px;
}

.metric-val {
    font-weight: 600;
    color: var(--text-primary, #ffffff);
}

.metric-val.txt-buy {
    color: var(--color-buy);
}

.metric-val.txt-sell {
    color: var(--color-sell);
}

.pos-card-footer {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--white-a08);
    text-align: right;
}

.margin-link-btn,
.trade-detail-link-btn {
    color: var(--color-accent-blue);
    font-size: 0.82rem;
    cursor: pointer;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s ease;
}

.margin-link-btn:hover,
.trade-detail-link-btn:hover {
    color: var(--color-info-blue);
    text-decoration: underline;
}

/* ── 交易明細與保證金變更紀錄彈窗 UI ── */
.trade-detail-dialog,
.margin-detail-dialog {
    max-width: 520px;
    width: 92%;
    padding: 1.75rem;
}

.day-detail-dialog .confirm-actions,
.trade-detail-dialog .confirm-actions,
.margin-detail-dialog .confirm-actions {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
    width: 100%;
}

.day-detail-dialog .confirm-btn-ok,
.trade-detail-dialog .confirm-btn-ok,
.margin-detail-dialog .confirm-btn-ok {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trade-detail-dialog .confirm-header,
.margin-detail-dialog .confirm-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 0.5rem;
    padding: 0 36px;
}

.trade-back-btn,
.margin-back-btn {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    background: var(--white-a05);
    border: 1px solid var(--white-a10);
    color: var(--text-primary, #ffffff);
    font-size: 1.1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
    padding: 0;
    margin: 0;
}

.trade-back-btn:hover,
.margin-back-btn:hover {
    background: var(--white-a15);
    border-color: var(--white-a25);
    color: var(--text);
    transform: translateY(-50%) scale(1.05);
}

.trade-dialog-title,
.margin-dialog-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary, #ffffff);
    margin: 0;
}

.trade-subtitle,
.margin-subtitle {
    text-align: center;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary, #ffffff);
    margin-bottom: 12px;
    letter-spacing: 0.03em;
}

.trade-body-scroll,
.margin-body-scroll {
    max-height: 55vh;
    overflow-y: auto;
    padding-right: 4px;
}

.trade-records-list,
.margin-records-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.trade-record-item,
.margin-record-item {
    background: var(--white-a03);
    border: 1px solid var(--white-a08);
    border-radius: var(--radius-12);
    padding: 12px 16px;
    transition: var(--transition-fast);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.trade-record-item:hover,
.margin-record-item:hover {
    background: var(--white-a06);
    border-color: var(--white-a18);
    transform: translateY(-1px);
}

.trade-item-header,
.margin-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.trade-title-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.trade-record-item .reason-title,
.margin-record-item .reason-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary, #ffffff);
}

.trade-record-item .change-amt,
.margin-record-item .change-amt {
    font-weight: 700;
    font-size: 1rem;
    font-family: var(--font-mono, monospace);
}

.trade-item-sub,
.margin-item-sub {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--text-secondary, #9ca3af);
    margin-top: 4px;
}

.trade-item-sub,
.margin-item-sub:first-of-type {
    border-top: 1px dashed var(--white-a08);
    padding-top: 8px;
    margin-top: 6px;
}

.trade-item-sub .sub-label,
.margin-item-sub .sub-label {
    color: var(--text-secondary, #9ca3af);
}

.trade-item-sub .time-val,
.margin-item-sub .time-val,
.margin-item-sub .after-val {
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-mono, monospace);
    font-size: 0.82rem;
}

/* ── 帳戶進階績效指標卡片 (Performance Metrics) ── */
.performance-metrics-card {
    margin-bottom: 20px;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    padding: 12px 4px 4px;
}

.metric-box {
    background: var(--white-a02);
    border: 1px solid var(--white-a06);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.metric-box:hover {
    background: var(--white-a05);
    border-color: var(--white-a12);
}

.metric-box .m-title {
    font-size: 0.76rem;
    color: var(--text-secondary, #9ca3af);
}

.metric-box .m-val {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary, #ffffff);
}

/* 次要指標（如觸價率對照實際勝率）：視覺層級明顯低於主位，避免與 LIVE 帳本數字混淆
   （工單見 DECISIONS-2026-08-23.md §2） */
.metric-box.metric-box-secondary {
    background: transparent;
    border-style: dashed;
    opacity: 0.7;
}

.metric-box .m-val-secondary {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary, #9ca3af);
}

/* ══════════════════════════════════════════════
   行動端頂列與卡片溢出防護
   ══════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* .main-header 原本 nowrap，分頁標題較長時（例如「歷史交易績效」）
       會把右側的 VST badge 與登入 CTA 擠到畫面外 —— 按鈕還在 DOM 裡、
       事件也綁著，但手指點不到，症狀就是「點了沒跳出登入視窗」。 */
    .main-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .main-header h1 {
        min-width: 0;
        flex: 1 1 auto;
    }
    .main-header .header-right {
        flex: 0 0 auto;
        margin-left: auto;
    }

    /* 卡片內的寬內容（統計網格、熱力圖 24 根 bar）自己橫捲，
       不得把整頁撐寬。ponytail: 只擋溢出，不改版面。 */
    .glass-card { max-width: 100%; }
    .metrics-grid,
    .heatmap-bars {
        max-width: 100%;
        overflow-x: auto;
    }

    /* 標題與圖例在窄螢幕換行，否則兩段文字並排會把卡片撐寬 */
    .heatmap-head {
        flex-wrap: wrap;
        gap: 4px;
    }

}

/* ══════════════════════════════════════════════
   24 小時時段勝率熱力圖（原本靠 inline style，
   改成 class 才能在行動端被 media query 覆寫）
   ══════════════════════════════════════════════ */
.heatmap-head {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.heatmap-legend {
    font-size: 0.72rem;
    color: var(--up);
}

.heatmap-bars {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    padding: 6px 0;
}

.heat-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

@media (max-width: 767px) {
    /* 24 根 bar 若平分寬度，每根只剩約 12px，但欄內的「100%」字樣有自己的最小寬度
       而不會縮，於是整列把頁面撐寬。改為固定寬度 + 整列橫捲：數字維持看得清楚，
       溢出留在自己的容器裡。此區塊必須排在上面 .heat-col 基準宣告「之後」，
       同分特異性由後者勝出。 */
    .heat-col { flex: 0 0 30px; }
}

/* ══════════════════════════════════════════════
   行動端登入 CTA
   桌面版側邊欄已有登入按鈕，這顆只在手機出現；
   顯示與否只由 .hidden 決定，絕不寫 inline display
   （inline 蓋過 media query，會讓桌面版出現兩個登入入口）。
   ══════════════════════════════════════════════ */
.auth-cta-mobile {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    min-height: 40px;
    border: none;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.auth-cta-mobile i {
    width: 15px;
    height: 15px;
}

.auth-cta-mobile:hover {
    filter: brightness(1.08);
    box-shadow: 0 6px 18px rgba(79, 70, 229, 0.45);
}

.auth-cta-mobile:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35);
}

@media (max-width: 767px) {
    .auth-cta-mobile:not(.hidden) {
        display: inline-flex;
    }

    /* 登入鍵與 VST 標籤擠在一起不好看：標籤留在標題那一列，
       CTA 推到最右側自成一格。 */
    .main-header .header-right {
        width: 100%;
        justify-content: space-between;
    }
}

/* 手機端月曆：7 欄擠不下時縮字級 + 收窄間距（必須排在基準宣告之後才會生效） */
@media (max-width: 767px) {
    .calendar-grid {
        gap: 3px;
    }

    .cal-day,
    .cal-pad {
        min-height: 48px;
    }

    .cal-day {
        padding: 4px 3px;
        border-radius: var(--radius-8);
    }

    .cal-day .cal-date {
        font-size: 0.62rem;
    }

    .cal-day .cal-pnl {
        font-size: 0.66rem;
    }

    .cal-weekday {
        font-size: 0.62rem;
    }
}

/* ── 清單排序列（倉位歷史 / 交易明細彈窗） ── */
.list-sort-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 2px 12px;
    background: transparent;
    border: none;
}
.list-sort-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-right: 4px;
    letter-spacing: 0.02em;
}
.list-sort-btn {
    height: 30px;
    padding: 0 13px;
    border-radius: var(--radius-pill);
    background: var(--white-a04);
    border: 1px solid var(--white-a10);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    transition: var(--transition-fast);
}
.list-sort-btn:hover {
    color: var(--text-primary);
    background: var(--white-a08);
    border-color: var(--white-a20);
}
.list-sort-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.list-sort-btn.active {
    color: var(--info);
    background: var(--blue-a20);
    border-color: color-mix(in srgb, var(--info) 55%, transparent);
    font-weight: 600;
    box-shadow: 0 2px 8px var(--blue-a15);
}
.list-sort-arrow {
    font-size: 0.75rem;
    font-weight: 700;
    margin-left: 2px;
    opacity: 0.95;
}

/* 回手機版入口：只在窄螢幕出現（真的坐在桌機前的人不需要這一列）。
   display 一律由這裡決定，index.html 那顆不可以帶 inline style:display。 */
.sidebar-mobile-link {
    display: none;
    flex: 0 0 100%;
    margin-top: 10px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--white-a05);
    border: 1px solid var(--white-a12);
    color: var(--text-primary);
    padding: 9px 12px;
    border-radius: 10px;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    text-decoration: none;
}
@media (max-width: 900px) {
    .sidebar-mobile-link { display: flex; }
}


/* ==========================================================================
   全局卡片防懸浮與按鈕防跳動規則（徹底移除所有 hover / active 位移與縮放）
   ========================================================================== */
div.glass-card,
div.glass-card:hover,
div.glass-card:active,
.skip-rules-card,
.skip-rules-card:hover,
.skip-rules-card:active,
.skip-rule-row,
.skip-rule-row:hover,
.skip-rule-row:active {
    transform: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

button,
button:hover,
button:active,
.btn,
.btn:hover,
.btn:active,
.action-btn,
.action-btn:hover,
.action-btn:active,
.btn-buy,
.btn-buy:hover,
.btn-buy:active,
.buy-btn,
.buy-btn:hover,
.buy-btn:active,
.sell-btn,
.sell-btn:hover,
.sell-btn:active,
.settings-btn,
.settings-btn:hover,
.settings-btn:active,
.reset-btn,
.reset-btn:hover,
.reset-btn:active,
.custom-rules-mode-btn,
.custom-rules-mode-btn:hover,
.custom-rules-mode-btn:active,
.skip-rule-chip,
.skip-rule-chip:hover,
.skip-rule-chip:active,
.skip-rules-add-btn,
.skip-rules-add-btn:hover,
.skip-rules-add-btn:active,
.skip-rules-save-btn,
.skip-rules-save-btn:hover,
.skip-rules-save-btn:active,
.skip-rule-collapse-toggle,
.skip-rule-collapse-toggle:hover,
.skip-rule-collapse-toggle:active,
.skip-rule-batch-btn,
.skip-rule-batch-btn:hover,
.skip-rule-batch-btn:active,
.skip-rule-summary-pill,
.skip-rule-summary-pill:hover,
.skip-rule-summary-pill:active,
.skip-rule-order-btn,
.skip-rule-order-btn:hover,
.skip-rule-order-btn:active,
.skip-rule-drag-handle,
.skip-rule-drag-handle:hover,
.skip-rule-drag-handle:active,
.skip-rules-limit-hint,
.skip-rules-limit-hint:hover,
.skip-rules-limit-hint:active {
    transform: none !important;
}


    /* ─── 滑鼠懸停邊框清晰高亮（科技感外框，清晰分明且無位移跳動） ─── */
    div.glass-card:hover {
        border-color: rgba(124, 110, 247, 0.75) !important;
        box-shadow: 0 0 0 1px rgba(124, 110, 247, 0.4), var(--inner-hl), 0 8px 24px rgba(0, 0, 0, 0.45) !important;
    }

    .skip-rule-row:hover,
    .skip-rule-row[data-collapsed="1"]:hover {
        border-color: rgba(124, 110, 247, 0.6) !important;
        box-shadow: 0 0 0 1px rgba(124, 110, 247, 0.25) !important;
    }

    .skip-rule-row:hover {
        background: var(--white-a08) !important;
    }

    .skip-rule-row[data-collapsed="1"]:hover {
        background: rgba(255, 255, 255, 0.06) !important;
    }