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

    /* ── semantic 語意色（UI 一律只引用這層；現況＝深色值原封搬入，Step 3 才填淺色） ── */
    --bg: #000000;
    --surface: rgba(28, 28, 30, 0.65);
    --surface-2: #1C1C1E;
    --glass-bg: rgba(28, 28, 30, 0.65);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-highlight: rgba(255, 255, 255, 0.18);
    --glass-inner-glow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.15);
    --text-primary: #FFFFFF;
    --text-secondary: #8E8E93;
    --text-tertiary: rgba(255, 255, 255, 0.4);
    --border: rgba(255, 255, 255, 0.08);
    --accent: var(--sys-blue);
    --buy: var(--sys-green);
    --sell: var(--sys-red);
    --buy-glow: rgba(48, 209, 88, 0.25);
    --sell-glow: rgba(255, 69, 58, 0.25);

    /* ── 舊 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: rgba(255, 255, 255, 0.12);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}
::-webkit-scrollbar-corner {
    background: transparent;
}

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

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 rgba(255, 255, 255, 0.1);
    border-top: 3px solid #3b82f6;
    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: rgba(22, 28, 44, 0.88);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 100;
    isolation: isolate;
}

.bottom-nav .nav-item {
    background: none;
    border: none;
    color: #94a3b8;
    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: 16px;
    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: #60a5fa;
    background: rgba(59, 130, 246, 0.15);
    box-shadow: inset 0 0 10px rgba(59, 130, 246, 0.1);
}

.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: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mode-paper {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #60a5fa;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.1);
}

.mode-vst {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}

.mode-live {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);
}

/* ── iPhone Liquid Glass (液態流光玻璃) 卡片樣式 ── */
/* 遵循 liquid-glass.pro 雙偽元素架構：
   ::before (z-index: 0) = inner shadow + tint
   ::after  (z-index:-1) = backdrop-filter + SVG distortion */
.glass-card {
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: var(--t-move);
    margin-bottom: 1.25rem;
    position: relative;
    background: none;
    border: none;
    isolation: isolate;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}

/* iPhone Liquid Glass ::before — 自然對稱的玻璃效果 */
.glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.20) 0%,
            rgba(255, 255, 255, 0.05) 50%,
            rgba(255, 255, 255, 0.12) 100%
        );
    box-shadow:
        inset 0 1px 2px 0 rgba(255, 255, 255, 0.30),     /* 頂部自然高光 */
        inset 0 -1px 2px 0 rgba(0, 0, 0, 0.10),          /* 底部輕微陰影 */
        inset 0 0 20px 0 rgba(255, 255, 255, 0.08),      /* 中心柔和發光 */
        0 8px 32px rgba(0, 0, 0, 0.12);                   /* 外陰影深度 */
    border: 1px solid rgba(255, 255, 255, 0.20);
    pointer-events: none;
}

/* iPhone Liquid Glass ::after — 真實玻璃模糊 + 折射效果 */
.glass-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: var(--radius-lg);
    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;
}

.glass-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--elev-3);
}

.glass-card:hover::before {
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.2) 0%,
            rgba(255, 255, 255, 0.08) 30%,
            rgba(255, 255, 255, 0.12) 70%,
            rgba(255, 255, 255, 0.18) 100%
        );
    box-shadow:
        inset 1px 1px 1px 0 rgba(255, 255, 255, 0.3),
        inset -1px -1px 1px 0 rgba(0, 0, 0, 0.1),
        inset 0 0 40px 0 rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
}

/* 按壓回饋（Apple HIG：pointer-down 立即回饋），只動 compositor 屬性 */
.glass-card:active {
    transform: scale(0.99);
    transition: var(--t-press);
}

/* ── a11y fallback（§14）：降低透明度 ── */
@media (prefers-reduced-transparency: reduce) {
    .glass-card::after {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .glass-card::before {
        background: var(--surface-2) !important;
    }
}

/* ── a11y fallback（§14）：高對比 ── */
@media (prefers-contrast: more) {
    .glass-card::before {
        border: 1px solid 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 rgba(255, 255, 255, 0.05);
    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 rgba(255, 255, 255, 0.05);
}

.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: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    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: #3b82f6;
    background: rgba(255, 255, 255, 0.08);
}

.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: #fff;
    cursor: pointer;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.btn-buy {
    background: linear-gradient(135deg, #10B981 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, #EF4444 0%, #DC2626 100%);
    box-shadow: 0 4px 15px var(--color-sell-glow);
}

.btn-sell:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

.btn-close {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 6px 12px;
    font-size: 0.8rem;
    border-radius: 8px;
}

/* 登入彈窗（玻璃擬態） */
.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, rgba(20, 27, 48, 0.96), rgba(13, 19, 39, 0.96));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 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: 11px;
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.25);
}
.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: 11px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.04);
    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: rgba(59, 130, 246, 0.55);
    background: rgba(59, 130, 246, 0.06);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.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: 11px;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
}
.auth-btn-ghost {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
}
.auth-btn-ghost:hover { background: rgba(255, 255, 255, 0.1); color: var(--text-primary); }
.auth-btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    color: #fff;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}
.auth-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(59, 130, 246, 0.45); }

.btn-close:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #f87171;
}

/* ── 表格通用樣式 ── */
.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 rgba(255, 255, 255, 0.05);
}

td {
    padding: 12px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.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: rgba(255, 255, 255, 0.03);
    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: rgba(255, 255, 255, 0.06);
}

.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: 4px;
    font-size: 0.62rem;
    font-weight: 700;
    color: #94a3b8;
}

.outcome-win { background: var(--buy-glow); color: var(--color-buy); }
.outcome-loss { background: var(--sell-glow); color: var(--color-sell); }
.outcome-open { background: rgba(10, 132, 255, 0.15); color: var(--accent); }
.outcome-cancelled { background: rgba(255, 255, 255, 0.08); 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: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    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: rgba(15, 23, 42, 0.85);
    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 rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    padding: 12px;
    font-size: 0.9rem;
    color: #fbbf24;
    text-align: center;
}

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

.confirm-btn-cancel, .confirm-btn-ok {
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.confirm-btn-cancel {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-secondary);
}

.confirm-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
    transform: translateY(-1px);
}

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

.confirm-btn-ok:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}


/* ── 響應式佈局 (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,
                rgba(255, 255, 255, 0.08) 0%,
                rgba(255, 255, 255, 0.03) 50%,
                rgba(255, 255, 255, 0.06) 100%
            );
        box-shadow:
            inset 1px 0 2px 0 rgba(255, 255, 255, 0.20),   /* 左邊高光 */
            inset 0 0 25px 0 rgba(255, 255, 255, 0.06);    /* 中心發光 */
        border-right: 1px solid rgba(255, 255, 255, 0.15);
        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: 10px;
        flex-shrink: 0;
    }

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

    .sidebar-toggle-btn {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 8px;
        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: rgba(255, 255, 255, 0.08);
        color: var(--text-primary);
        border-color: rgba(255, 255, 255, 0.15);
    }
    
    .sidebar-toggle-btn .icon {
        width: 16px;
        height: 16px;
        transition: transform 0.3s ease;
    }
    
    .sidebar-nav {
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 1;
    }
    
    .sidebar-nav .nav-item {
        background: none;
        border: none;
        color: var(--text-secondary);
        padding: 12px 16px;
        border-radius: 12px;
        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: rgba(255, 255, 255, 0.05);
        color: var(--text-primary);
    }
    
    .sidebar-nav .nav-item.active {
        background: rgba(59, 130, 246, 0.15);
        border: 1px solid rgba(59, 130, 246, 0.25);
        color: #60a5fa;
        text-shadow: 0 0 10px rgba(59, 130, 246, 0.2);
    }
    
    .sidebar-footer {
        font-size: 0.75rem;
        color: var(--text-secondary);
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
    }

    .sidebar-footer #auth-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        color: var(--text-primary);
    }
    
    .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: 12px;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.05);
        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 rgba(16, 185, 129, 0.2);
    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: rgba(255, 255, 255, 0.1);
    transition: 0.4s;
    border-radius: 34px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.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), #0ea673);
    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: 10px;
    padding: 8px 14px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.82rem;
}
.filter-controls .filter-btn:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
    color: #c7d2fe;
}

/* 訊號範圍切換（全部/個人/全域） */
.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: 10px;
    overflow: hidden;
}
.scope-toggle .scope-btn {
    background: transparent;
    border: none;
    padding: 8px 12px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.82rem;
    transition: all 0.2s ease;
}
.scope-toggle .scope-btn:hover { color: #c7d2fe; }
.scope-toggle .scope-btn.active {
    background: rgba(99, 102, 241, 0.25);
    color: #e0e7ff;
    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: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 1rem;
}

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

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

.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, #ff3333, #cc2929);
    border: none;
    border-radius: 12px;
    padding: 12px 24px;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    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: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    font-weight: 500;
}

.mode-btn.active {
    background: linear-gradient(135deg, #ff3333, #cc2929);
    border-color: #ff3333;
    color: white;
}

.api-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.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: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
}

.control-btn.close-all {
    color: var(--color-sell);
    border-color: rgba(239, 68, 68, 0.3);
}

.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: rgba(255, 255, 255, 0.1);
    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: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    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: rgba(255, 255, 255, 0.12);
}

@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: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    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;
}

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

.cal-nav-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    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: rgba(255, 255, 255, 0.08);
    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;
    grid-template-columns: repeat(7, 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-height: 64px;
    border-radius: 10px;
    padding: 6px 8px;
    display: grid;
    grid-template-rows: auto 1fr;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    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: #fff;
    border-color: transparent;
}

.cal-day.has-trades:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

/* 今天：藍色內框標示（inset 避免被裁切） */
.cal-day.today {
    box-shadow: inset 0 0 0 2px #60a5fa;
}

.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 rgba(255, 255, 255, 0.06);
}

.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;
}

.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 {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 14px;
}

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

.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 rgba(255, 255, 255, 0.05);
}

.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 rgba(255, 255, 255, 0.05);
}

.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: 4px;
    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: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    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: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

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

.buy-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.sell-btn {
    background: linear-gradient(135deg, var(--color-sell), #cc2929);
    color: white;
}

.sell-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* 槓桿控制滑桿 */
.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), #0ea673);
    border: none;
    border-radius: 6px;
    padding: 12px;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.settings-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.reset-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.reset-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--text-primary);
    transform: translateY(-1px);
}

/* 全局設定資訊區域 */
.global-settings-info {
    margin: 16px 0 20px 0;
    padding: 12px 16px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
}

.settings-description {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #60a5fa;
    font-size: 0.9rem;
    margin: 0;
}

.info-icon {
    width: 16px;
    height: 16px;
    color: #60a5fa;
}

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

.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 rgba(255, 255, 255, 0.05);
    }

    .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);
}

/* ── 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 rgba(255, 255, 255, 0.05);
}

.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: rgba(255, 255, 255, 0.1);
    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 rgba(16, 185, 129, 0.3);
}

.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 rgba(16, 185, 129, 0.3);
}

.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: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    min-width: 150px;
}

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

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

/* 數字輸入框樣式 */
.number-input {
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    width: 120px;
    text-align: right;
    font-family: var(--font-mono, monospace);
}

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

/* 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: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-secondary);
    border-radius: 6px;
    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: rgba(16, 185, 129, 0.15);
    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 rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: flex-end;
}

/* Telegram Bot 設定區塊 */
.tg-config-section {
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    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: 8px;
    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: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.02);
}

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

.source-item.secondary {
    background: rgba(59, 130, 246, 0.05);
    border-color: rgba(59, 130, 246, 0.15);
}

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

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

.source-icon.secondary {
    color: #60a5fa;
}

.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: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.source-status.active {
    background: rgba(16, 185, 129, 0.15);
    color: var(--color-buy);
}

.source-status.passive {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

/* 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: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.3s ease;
}

.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: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    width: 200px;
}

.regenerate-token-btn {
    padding: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.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 rgba(255, 255, 255, 0.05);
}

.action-btn {
    flex: 1;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.action-btn:hover {
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.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: rgba(239, 68, 68, 0.15) !important;
    animation: risk-blink 1.5s infinite alternate;
}

@keyframes risk-blink {
    0% {
        box-shadow: inset 0 0 4px rgba(239, 68, 68, 0.4);
        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: rgba(255, 255, 255, 0.12);
    border-radius: 10px;
}
.scrollable-table-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ───────────────────────── 市場監控分頁 ───────────────────────── */
.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: rgba(255, 255, 255, 0.03);
    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, rgba(59, 130, 246, 0.35), rgba(59, 130, 246, 0.18));
    color: #dbeafe;
    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.25);
}

.monitor-refresh-btn {
    height: 40px;
    padding: 0 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-family: var(--font-sans);
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.4);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.monitor-refresh-btn:hover {
    background: rgba(59, 130, 246, 0.32);
}

.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 rgba(255, 255, 255, 0.06);
    padding-bottom: 10px;
}

.monitor-card-title i {
    width: 16px;
    height: 16px;
    color: #60a5fa;
}

.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: 11px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
}

.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: 10px;
    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: 20px;
    background: rgba(255, 255, 255, 0.03); 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: 20px;
    background: rgba(15, 23, 42, 0.9); 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: #0d1327;
    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; }
.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 rgba(255, 255, 255, 0.08); 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: rgba(255, 255, 255, 0.04); color: var(--text-secondary);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: var(--transition-smooth);
}
.detail-close:hover { background: rgba(239, 68, 68, 0.2); 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: rgba(18, 25, 44, 0.88);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
    min-width: 0;            /* 防止 grid 子項撐破外層 */
}
/* 內層卡片：淡淡的磨砂層次，維持深色主題淺色文字 */
.monitor-detail-panel .glass-card {
    background: rgba(255, 255, 255, 0.06);
    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: rgba(18, 25, 44, 0.92);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px; padding: 24px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
    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 rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04); color: #94A3B8;
    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: rgba(239,68,68,0.2); color: #EF4444; }
.audit-content { display: flex; flex-direction: column; gap: 16px; }
.audit-loading { text-align: center; color: #94A3B8; 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 rgba(255,255,255,0.06);
    padding-bottom: 6px;
}
.audit-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 10px; border-radius: 8px;
    background: rgba(255,255,255,0.03); font-size: 0.82rem;
}
.audit-row .label { color: #94A3B8; }
.audit-row .value { font-weight: 600; color: #E2E8F0; }
.audit-layer {
    padding: 10px 12px; border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border-left: 3px solid rgba(255,255,255,0.1);
}
.audit-layer.pass { border-left-color: #10B981; }
.audit-layer.fail { border-left-color: #EF4444; }
.audit-layer.skip { border-left-color: #F59E0B; }
.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: #94A3B8; margin-top: 4px; }
.audit-verdict {
    text-align: center; padding: 12px; border-radius: 10px;
    font-weight: 700; font-size: 0.9rem;
}
.audit-verdict.pass { background: rgba(16,185,129,0.12); color: #10B981; }
.audit-verdict.reject { background: rgba(239,68,68,0.12); color: #EF4444; }

/* ── 設定未儲存之視覺提示 (Visual Feedback for unsaved settings) ── */
.dirty-glow {
    position: relative;
    background: linear-gradient(135deg, #f59e0b 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 rgba(245, 158, 11, 0.3); }
    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: #f59e0b;
    border-radius: 50%;
    box-shadow: 0 0 8px #f59e0b;
    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:#070c18; color:#e2e8f0; 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 rgba(239,68,68,0.3);border-radius:6px;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:#475569; padding-left:4px; border-left:1px solid rgba(255,255,255,0.08); margin-left:3px; }

  /* ── positions table ── */
  .pos-table-hdr {
    display:grid;
    grid-template-columns:124px 72px 92px 90px 1fr 68px;
    padding:6px 16px;
    background:rgba(0,0,0,0.18);
    border-bottom:1px solid rgba(255,255,255,0.04);
  }
  .pos-row {
    display:grid;
    grid-template-columns:124px 72px 92px 90px 1fr 68px;
    padding:10px 16px;
    border-bottom:1px solid rgba(255,255,255,0.04);
    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 rgba(255,255,255,0.06);
      border-radius:8px;
    }
    .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 rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        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 rgba(255, 255, 255, 0.08) !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;
    }
}

/* ══════════════════════════════════════════════
   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;
    }

    /* 未登入 CTA：在 sidebar 隱藏，固定於頂部 main-header 旁 */
    /* 行動端 header 右側放登入/登出按鈕，利用既有 auth-btn + user-card */
    /* auth-btn 在 sidebar-footer 裡，行動端加浮動定位讓它出現在 header */
    #auth-btn-mobile-cta {
        display: flex;
    }
}

/* 桌面端隱藏行動 CTA */
@media (min-width: 768px) {
    #auth-btn-mobile-cta {
        display: none;
    }
}

/* ══════════════════════════════════════════════
   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 rgba(0,0,0,0.3);
}
.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 rgba(255, 255, 255, 0.08);
        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: rgba(13, 19, 39, 0.94);
    }
    .glass-card {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(13, 19, 39, 0.85);
    }
    /* 停用所有 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: #0e1220;
    z-index: 1;
    box-shadow: 2px 0 4px rgba(0,0,0,0.4);
}

/* 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: rgba(20, 25, 40, 0.97);
        backdrop-filter: blur(20px) saturate(1.3);
        -webkit-backdrop-filter: blur(20px) saturate(1.3);
        border-top: 0.5px solid rgba(255, 255, 255, 0.14);
        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 rgba(255, 255, 255, 0.08);
        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: #3b82f6;
    }
    #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;
    }
}