/* ═══════════════════════════════════════════════════════════════
   OpenClaw-ZFX — Ultra Premium Trading Terminal
   Compact · Gradient Flow · Neon Glass · Rich Colors
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg-body: #060a14;
    --bg-card: rgba(14,19,32,0.92);
    --bg-card-alt: rgba(22,28,44,0.95);
    --bg-input: rgba(8,12,22,0.9);
    --border: rgba(42,52,80,0.55);
    --accent: #00D4FF;
    --accent2: #00FFB9;
    --purple: #a855f7;
    --gold: #FFD700;
    --gradient: linear-gradient(135deg, #00D4FF 0%, #00FFB9 50%, #a855f7 100%);
    --gradient-card: linear-gradient(135deg, rgba(20,26,42,0.95) 0%, rgba(14,19,32,0.98) 100%);
    --gradient-header: linear-gradient(135deg, rgba(10,16,30,0.98) 0%, rgba(16,22,38,0.95) 50%, rgba(12,18,32,0.98) 100%);
    --green: #00FFB9;
    --red: #FF4757;
    --text: #E8EAED;
    --text-sub: #8B92A8;
    --text-muted: #5A6275;
    --radius: 10px;
    --radius-sm: 6px;
    --radius-pill: 16px;
    --transition: 0.25s cubic-bezier(.4,0,.2,1);
    --glow-cyan: 0 0 12px rgba(0,212,255,0.12), 0 0 30px rgba(0,212,255,0.04);
    --glow-green: 0 0 12px rgba(0,255,185,0.12);
    --glow-purple: 0 0 12px rgba(168,85,247,0.12);
}

/* ═══════ Aurora Background ═══════ */
@keyframes borderFlow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes auroraPulse {
    0%   { opacity: 0.5; transform: scale(1); }
    50%  { opacity: 1; transform: scale(1.1); }
    100% { opacity: 0.5; transform: scale(1); }
}
html, body {
    height: 100%;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-body);
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
    overflow-x: hidden;
}
body::before {
    content: '';
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background:
        radial-gradient(ellipse 70% 50% at 15% 25%, rgba(0,212,255,0.06) 0%, transparent 55%),
        radial-gradient(ellipse 50% 45% at 85% 75%, rgba(168,85,247,0.055) 0%, transparent 55%),
        radial-gradient(ellipse 60% 35% at 50% 10%, rgba(0,255,185,0.04) 0%, transparent 50%),
        radial-gradient(ellipse 40% 30% at 70% 50%, rgba(255,107,0,0.02) 0%, transparent 50%);
    animation: auroraPulse 8s ease-in-out infinite;
    pointer-events: none; z-index: 0;
}
body > .container { position: relative; z-index: 1; }
a { color: var(--accent); text-decoration: none; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.18); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,212,255,0.35); }

/* ═══════ Container (Compact) ═══════ */
.container { max-width: 1580px; margin: 0 auto; padding: 10px 14px; }

/* ═══════ Header (Compact + Gradient Glass + Flow Line) ═══════ */
header {
    background: var(--gradient-header);
    backdrop-filter: blur(20px) saturate(1.4);
    padding: 14px 22px;
    border-radius: var(--radius);
    margin-bottom: 10px;
    border: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: visible;
    z-index: 1000;
}
header::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent 5%, #00D4FF 20%, #a855f7 40%, #FFD700 55%, #00FFB9 75%, transparent 95%);
    background-size: 300% 100%;
    animation: borderFlow 3s linear infinite;
}
header::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, #00FFB9 25%, #a855f7 50%, #00D4FF 75%, transparent);
    background-size: 300% 100%;
    animation: borderFlow 4s linear infinite reverse;
    opacity: 0.6;
}
/* ═══ Header Brand: Horse + Neon Text ═══ */
.header-brand { display: flex; align-items: center; gap: 10px; }
.header-horse {
    width: 46px; height: 46px; object-fit: contain;
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 6px rgba(0,140,255,0.5));
    animation: horseGlow 3s ease-in-out infinite alternate;
    flex-shrink: 0;
}
@keyframes horseGlow {
    0%   { filter: drop-shadow(0 0 4px rgba(0,140,255,0.3)); }
    100% { filter: drop-shadow(0 0 10px rgba(0,180,255,0.6)) drop-shadow(0 0 20px rgba(168,85,247,0.25)); }
}
.header-titles { display: flex; flex-direction: column; gap: 1px; }
.header-neon {
    font-size: 1.55em; font-weight: 900; letter-spacing: 1.5px; margin: 0;
    color: #00FFB9;
    text-shadow:
        0 0 7px rgba(0,255,185,0.7),
        0 0 20px rgba(0,255,185,0.4),
        0 0 40px rgba(0,212,255,0.2),
        0 0 2px rgba(255,255,255,0.3);
    animation: neonPulse 3s ease-in-out infinite alternate;
}
.header-neon-accent {
    color: #00D4FF;
    margin-left: 6px;
    text-shadow:
        0 0 7px rgba(0,212,255,0.7),
        0 0 20px rgba(0,212,255,0.4),
        0 0 40px rgba(168,85,247,0.25),
        0 0 2px rgba(255,255,255,0.3);
}
@keyframes neonPulse {
    0%   { text-shadow: 0 0 5px rgba(0,255,185,0.5), 0 0 15px rgba(0,255,185,0.25), 0 0 30px rgba(0,212,255,0.1); }
    100% { text-shadow: 0 0 10px rgba(0,255,185,0.8), 0 0 25px rgba(0,255,185,0.5), 0 0 50px rgba(0,212,255,0.3), 0 0 3px rgba(255,255,255,0.4); }
}
.header-neon:hover, .header-neon:hover .header-neon-accent {
    text-shadow:
        0 0 12px rgba(0,255,185,0.9),
        0 0 30px rgba(0,255,185,0.6),
        0 0 60px rgba(0,212,255,0.4),
        0 0 4px rgba(255,255,255,0.5);
}
.subtitle { color: var(--text-sub); font-size: 0.85em; }
.header-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.status-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 12px;
    background: rgba(0,255,185,0.07);
    border: 1px solid rgba(0,255,185,0.22);
    border-radius: var(--radius-pill);
    color: var(--green); font-size: 0.8em; font-weight: 600;
    backdrop-filter: blur(8px);
}
.status-badge.offline {
    background: rgba(255,71,87,0.07);
    border-color: rgba(255,71,87,0.25);
    color: var(--red);
}
.header-info { color: var(--text-muted); font-size: 0.78em; }
.header-balance { color: var(--accent2); font-weight: 800; font-size: 1.05em; text-shadow: 0 0 14px rgba(0,255,185,0.35), 0 0 28px rgba(0,255,185,0.1); }

/* ═══════ Tab Navigation (Compact + Underline Glow) ═══════ */
.tabs {
    display: flex; gap: 4px;
    margin-bottom: 10px;
    background: linear-gradient(160deg, rgba(14,19,32,0.9), rgba(10,16,28,0.95));
    backdrop-filter: blur(16px) saturate(1.3);
    padding: 5px 8px;
    border-radius: var(--radius);
    border: 1px solid rgba(0,212,255,0.06);
    overflow-x: auto;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.02);
    position: relative;
}
.tab {
    padding: 7px 16px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-sub);
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    font-size: 12px; font-weight: 600;
    position: relative;
}
.tab:hover { color: var(--accent); background: rgba(0,212,255,0.05); }
.tab.active {
    background: linear-gradient(135deg, rgba(0,212,255,0.15), rgba(168,85,247,0.08), rgba(0,255,185,0.1));
    color: #fff;
    border-color: rgba(0,212,255,0.3);
    box-shadow: 0 0 15px rgba(0,212,255,0.12), 0 0 30px rgba(0,212,255,0.04), inset 0 1px 0 rgba(255,255,255,0.06);
    text-shadow: 0 0 10px rgba(0,212,255,0.4);
}
.tab.active::after {
    content: '';
    position: absolute; bottom: -1px; left: 10%; right: 10%;
    height: 2px;
    background: linear-gradient(90deg, #00D4FF, #a855f7, #00FFB9);
    background-size: 200% 100%;
    animation: borderFlow 3s linear infinite;
    border-radius: 1px;
    box-shadow: 0 0 12px rgba(0,212,255,0.6), 0 0 24px rgba(168,85,247,0.2);
}

/* ═══════ Tab Content ═══════ */
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.25s ease; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ═══════ Cards (Neon Glass + Animated Border) ═══════ */
.card {
    background: linear-gradient(160deg, rgba(14,19,32,0.94), rgba(10,16,28,0.97));
    backdrop-filter: blur(16px) saturate(1.3);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid rgba(0,212,255,0.08);
    position: relative;
    transition: all var(--transition);
    box-shadow: 0 2px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.02);
}
.card:hover {
    border-color: rgba(0,212,255,0.22);
    box-shadow: 0 4px 20px rgba(0,0,0,0.35), 0 0 20px rgba(0,212,255,0.06), inset 0 1px 0 rgba(255,255,255,0.03);
}
.card-title {
    font-size: 0.95em;
    margin-bottom: 8px;
    font-weight: 700;
    display: flex; align-items: center; gap: 6px;
    letter-spacing: 0.2px;
    color: var(--accent);
    text-shadow: 0 0 10px rgba(0,212,255,0.25), 0 0 20px rgba(0,212,255,0.08);
}
.card-title > span, .card-title > button {
    -webkit-text-fill-color: initial;
    text-shadow: none;
}

/* ═══════ Stats Grid (Neon Gradient Cards) ═══════ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}
.stat-card {
    background: linear-gradient(160deg, rgba(16,22,38,0.95), rgba(10,16,28,0.98));
    backdrop-filter: blur(10px);
    border-radius: var(--radius);
    padding: 12px 14px;
    border: 1px solid rgba(0,212,255,0.06);
    transition: all var(--transition);
    position: relative; overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.02);
}
.stat-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, #00D4FF, #a855f7, #00FFB9);
    background-size: 200% 100%;
    animation: borderFlow 4s linear infinite;
    opacity: 0.6;
}
.stat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0,212,255,0.2);
    box-shadow: 0 6px 24px rgba(0,0,0,0.3), 0 0 20px rgba(0,212,255,0.08);
}
.stat-card:hover::before { opacity: 1; }
.stat-label { color: var(--text-sub); font-size: 0.75em; margin-bottom: 3px; letter-spacing: 0.5px; text-transform: uppercase; }
.stat-value { color: var(--accent2); font-size: 1.5em; font-weight: 800; text-shadow: 0 0 10px rgba(0,255,185,0.25); }
.stat-change { font-size: 0.75em; margin-top: 2px; }
.positive { color: var(--green); }
.negative { color: var(--red); }

/* ═══════ Layout Grids ═══════ */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
.grid-2-wide { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 10px; align-items: stretch; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.grid-stretch > * { display: flex; flex-direction: column; }
.grid-stretch .card { flex: 1; display: flex; flex-direction: column; }
.grid-stretch .card > .table-container,
.grid-stretch .card > .chart-box,
.grid-stretch .card > div[id] { flex: 1; }
.oc-grow { flex: 1; }

/* ═══════ Inputs (Neon Focus Ring) ═══════ */
input, select {
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(42,52,80,0.4);
    background: rgba(8,12,22,0.85);
    color: var(--text);
    font-size: 12px;
    outline: none;
    transition: all var(--transition);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}
input:focus, select:focus {
    border-color: rgba(0,212,255,0.5);
    box-shadow: 0 0 0 2px rgba(0,212,255,0.1), 0 0 12px rgba(0,212,255,0.08), inset 0 1px 3px rgba(0,0,0,0.15);
}

/* ═══════ Buttons (Neon Glow) ═══════ */
button { cursor: pointer; border: none; outline: none; font-family: inherit; }
.btn {
    padding: 6px 14px; border-radius: var(--radius-sm);
    font-weight: 600; font-size: 12px;
    transition: all var(--transition);
}
.btn-primary {
    background: linear-gradient(135deg, #00D4FF, #00FFB9);
    color: var(--bg-body); border: none;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 18px rgba(0,212,255,0.3); }
.btn-green { background: linear-gradient(135deg, #00E676, #00FFB9); color: var(--bg-body); }
.btn-green:hover { transform: translateY(-1px); box-shadow: 0 4px 18px rgba(0,255,185,0.3); }
.btn-red { background: linear-gradient(135deg, #FF4757, #FF6B6B); color: #fff; }
.btn-red:hover { transform: translateY(-1px); box-shadow: 0 4px 18px rgba(255,71,87,0.3); }
.btn-outline {
    background: transparent; border: 1px solid var(--border);
    color: var(--text); padding: 6px 14px;
    border-radius: var(--radius-sm); font-weight: 500;
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); box-shadow: var(--glow-cyan); }
.btn-sm { padding: 4px 10px; font-size: 11px; }
.btn-toggle {
    padding: 5px 12px;
    background: linear-gradient(135deg, #00D4FF, #00FFB9);
    color: var(--bg-body); border: none;
    border-radius: var(--radius-sm);
    font-weight: 700; font-size: 11px;
    transition: all var(--transition);
}
.btn-toggle:hover { box-shadow: 0 4px 18px rgba(0,212,255,0.25); transform: translateY(-1px); }

/* ═══════ Tables (Compact + Gradient Header) ═══════ */
.table-container {
    background: linear-gradient(160deg, rgba(10,14,26,0.6), rgba(8,12,22,0.7));
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid rgba(0,212,255,0.06);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.01);
}
table { width: 100%; border-collapse: collapse; }
th {
    background: linear-gradient(135deg, rgba(0,212,255,0.06), rgba(168,85,247,0.03), rgba(0,255,185,0.04));
    padding: 7px 10px;
    text-align: left;
    color: var(--accent); font-weight: 700;
    font-size: 0.75em;
    border-bottom: 1px solid rgba(0,212,255,0.12);
    letter-spacing: 0.5px; text-transform: uppercase;
    text-shadow: 0 0 8px rgba(0,212,255,0.2);
}
td {
    padding: 6px 10px;
    border-bottom: 1px solid rgba(42,52,80,0.25);
    font-size: 0.82em;
}
tr:hover td { background: linear-gradient(90deg, rgba(0,212,255,0.025), rgba(168,85,247,0.015)); }

.text-green { color: var(--green); }
.text-red { color: var(--red); }
.text-muted { color: var(--text-muted); }
.tc { text-align: center; }

/* ═══════ Trading Layout ═══════ */
.trading-layout { display: grid; grid-template-columns: 1fr 280px; gap: 10px; }
.quotes-panel { max-height: calc(100vh - 180px); overflow-y: auto; }
.order-panel { position: sticky; top: 0; }

.order-tabs { display: flex; gap: 0; margin-bottom: 8px; }
.order-tab {
    flex: 1; padding: 7px; text-align: center;
    font-weight: 700; font-size: 12px;
    border-radius: var(--radius-sm);
    cursor: pointer; transition: all var(--transition);
}
.order-tab.buy { background: rgba(0,255,185,0.06); color: var(--green); }
.order-tab.buy.active { background: linear-gradient(135deg, #00C853, #00FFB9); color: var(--bg-body); box-shadow: 0 4px 18px rgba(0,255,185,0.25); }
.order-tab.sell { background: rgba(255,71,87,0.06); color: var(--red); }
.order-tab.sell.active { background: linear-gradient(135deg, #FF1744, #FF4757); color: #fff; box-shadow: 0 4px 18px rgba(255,71,87,0.25); }

.form-group { margin-bottom: 7px; }
.form-group label { display: block; font-size: 10px; color: var(--text-sub); margin-bottom: 2px; }
.form-group input, .form-group select { width: 100%; }
.order-submit {
    width: 100%; padding: 9px; font-size: 12px; font-weight: 800;
    border-radius: var(--radius-sm); transition: all var(--transition);
    letter-spacing: 0.5px;
}
.order-submit.buy-btn { background: linear-gradient(135deg, #00C853, #00FFB9); color: var(--bg-body); }
.order-submit.buy-btn:hover { box-shadow: 0 4px 24px rgba(0,255,185,0.4); transform: translateY(-1px); }
.order-submit.sell-btn { background: linear-gradient(135deg, #FF1744, #FF4757); color: #fff; }
.order-submit.sell-btn:hover { box-shadow: 0 4px 24px rgba(255,71,87,0.4); transform: translateY(-1px); }

/* ═══════ Quote Rows ═══════ */
.quote-row {
    display: grid;
    grid-template-columns: 110px 90px 90px 75px 55px 60px 30px;
    align-items: center;
    padding: 5px 8px;
    border-bottom: 1px solid rgba(42,52,80,0.2);
    cursor: pointer; transition: all var(--transition);
    font-size: 11.5px; border-radius: 4px; margin-bottom: 1px;
}
.quote-row:hover { background: linear-gradient(90deg, rgba(0,212,255,0.04), rgba(168,85,247,0.02)); }
.quote-row.pinned { border-left: 2px solid var(--accent); background: rgba(0,212,255,0.025); }
.quote-row .sym { font-weight: 700; color: var(--text); }
.quote-row .price { font-family: 'JetBrains Mono', 'Courier New', monospace; font-weight: 600; }

.rec-tag { font-size: 10px; padding: 2px 6px; border-radius: 3px; font-weight: 700; }
.rec-tag.buy { background: rgba(0,255,185,0.1); color: var(--green); }
.rec-tag.sell { background: rgba(255,71,87,0.1); color: var(--red); }
.rec-tag.hold { background: rgba(139,146,168,0.08); color: var(--text-sub); }

.pin-star { cursor: pointer; opacity: 0.2; transition: all var(--transition); font-size: 12px; }
.pin-star:hover, .pin-star.on { opacity: 1; color: #FFD700; text-shadow: 0 0 8px rgba(255,215,0,0.5), 0 0 16px rgba(255,215,0,0.25); }

.tf-btn {
    padding: 4px 9px; border-radius: 4px;
    background: rgba(22,28,44,0.5); color: var(--text-sub);
    border: 1px solid var(--border); cursor: pointer;
    font-size: 10.5px; font-weight: 600; transition: all var(--transition);
}
.tf-btn:hover { border-color: var(--accent); color: var(--accent); }
.tf-btn.active { background: linear-gradient(135deg, #00D4FF, #00FFB9); color: var(--bg-body); border-color: transparent; box-shadow: 0 0 8px rgba(0,212,255,0.2); }

/* ═══════ Chart ═══════ */
.chart-container { position: relative; height: 340px; margin-top: 6px; }
.chart-box {
    background: rgba(8,12,22,0.75);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px; position: relative;
}
.chart-box canvas { width: 100% !important; height: 100% !important; }

/* ═══════ Settings ═══════ */
.setting-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 0; border-bottom: 1px solid rgba(42,52,80,0.25);
}
.setting-row:last-child { border-bottom: none; }

/* ═══════ Toast (Glass + Neon) ═══════ */
.toast-container { position: fixed; top: 12px; right: 12px; z-index: 9999; }
.toast {
    padding: 8px 16px; border-radius: var(--radius-sm);
    margin-bottom: 5px; font-size: 11.5px;
    animation: slideIn 0.3s cubic-bezier(.4,0,.2,1);
    backdrop-filter: blur(16px) saturate(1.4);
    font-weight: 700;
}
.toast.success {
    background: linear-gradient(135deg, rgba(0,255,185,0.88), rgba(0,230,118,0.82));
    color: var(--bg-body);
    box-shadow: 0 4px 24px rgba(0,255,185,0.25), 0 0 40px rgba(0,255,185,0.08);
}
.toast.error {
    background: linear-gradient(135deg, rgba(255,71,87,0.88), rgba(255,23,68,0.82));
    color: #fff;
    box-shadow: 0 4px 24px rgba(255,71,87,0.25), 0 0 40px rgba(255,71,87,0.08);
}
.toast.info {
    background: linear-gradient(135deg, rgba(0,212,255,0.88), rgba(168,85,247,0.82));
    color: #fff;
    box-shadow: 0 4px 24px rgba(0,212,255,0.25), 0 0 40px rgba(168,85,247,0.08);
}
@keyframes slideIn {
    from { transform: translateX(60px) scale(0.92); opacity: 0; }
    to { transform: translateX(0) scale(1); opacity: 1; }
}

/* ═══════ Modal (Glass + Glow) ═══════ */
.modal-overlay {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6); z-index: 1000;
    align-items: center; justify-content: center;
    backdrop-filter: blur(6px) saturate(1.2);
}
.modal-overlay.show { display: flex; }
.modal {
    background: var(--bg-card);
    backdrop-filter: blur(16px) saturate(1.3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    min-width: 380px; max-width: 560px;
    max-height: 80vh; overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(0,212,255,0.04);
}
.modal-title { font-size: 1.1em; font-weight: 800; margin-bottom: 12px; color: var(--text); }

/* ═══════════════════════════════════════
   ANIMATIONS & EFFECTS (Ultra Premium)
   ═══════════════════════════════════════ */

@keyframes gradientFlow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* Profit/Loss pulse glow */
@keyframes pulse-green {
    0%, 100% { box-shadow: 0 2px 8px rgba(0,200,83,0.3); }
    50% { box-shadow: 0 4px 20px rgba(0,255,185,0.55), 0 0 40px rgba(0,255,185,0.12); }
}
@keyframes pulse-red {
    0%, 100% { box-shadow: 0 2px 8px rgba(255,71,87,0.25); }
    50% { box-shadow: 0 4px 20px rgba(255,71,87,0.5), 0 0 40px rgba(255,71,87,0.12); }
}
@keyframes glow-green {
    0%, 100% { text-shadow: 0 0 6px rgba(0,230,118,0.35); }
    50% { text-shadow: 0 0 16px rgba(0,255,185,0.85), 0 0 32px rgba(0,255,185,0.25); }
}
@keyframes glow-red {
    0%, 100% { text-shadow: 0 0 6px rgba(255,71,87,0.35); }
    50% { text-shadow: 0 0 16px rgba(255,71,87,0.85), 0 0 32px rgba(255,71,87,0.25); }
}
.pnl-glow-green { animation: glow-green 2s ease-in-out infinite; }
.pnl-glow-red { animation: glow-red 2s ease-in-out infinite; }
.pulse-green { animation: pulse-green 2s ease-in-out infinite; }
.pulse-red { animation: pulse-red 2s ease-in-out infinite; }
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 8px rgba(16,185,129,0.3), 0 0 16px rgba(16,185,129,0.1); }
    50% { box-shadow: 0 0 16px rgba(16,185,129,0.6), 0 0 32px rgba(16,185,129,0.25); }
}

/* Price direction arrows */
@keyframes price-arrow-up {
    0%   { opacity:0; transform:scale(0.3) translateY(6px); }
    30%  { opacity:1; transform:scale(1.5) translateY(-2px); }
    60%  { transform:scale(1.0) translateY(0); }
    80%  { transform:scale(1.2) translateY(-1px); }
    100% { transform:scale(1.0) translateY(0); opacity:1; }
}
@keyframes price-arrow-down {
    0%   { opacity:0; transform:scale(0.3) translateY(-6px); }
    30%  { opacity:1; transform:scale(1.5) translateY(2px); }
    60%  { transform:scale(1.0) translateY(0); }
    80%  { transform:scale(1.2) translateY(1px); }
    100% { transform:scale(1.0) translateY(0); opacity:1; }
}
.oc-arrow-up {
    display:inline-block; color:var(--green); font-size:12px; margin-left:3px;
    text-shadow: 0 0 8px rgba(0,255,185,0.8), 0 0 20px rgba(0,255,136,0.35);
    animation: price-arrow-up 0.6s ease-out;
    vertical-align: middle;
}
.oc-arrow-down {
    display:inline-block; color:var(--red); font-size:12px; margin-left:3px;
    text-shadow: 0 0 8px rgba(255,71,87,0.8), 0 0 20px rgba(255,0,0,0.35);
    animation: price-arrow-down 0.6s ease-out;
    vertical-align: middle;
}

/* Price flash */
@keyframes flash-green { 0%{color:var(--green);text-shadow:0 0 8px rgba(0,255,185,0.5);} 100%{color:inherit;text-shadow:none;} }
@keyframes flash-red   { 0%{color:var(--red);text-shadow:0 0 8px rgba(255,71,87,0.5);} 100%{color:inherit;text-shadow:none;} }
.oc-price-up   { animation: flash-green 0.8s ease-out; }
.oc-price-down { animation: flash-red 0.8s ease-out; }

/* Signal dot pulse */
@keyframes signal-dot-pulse {
    0%   { transform:scale(1.0); opacity:1; }
    25%  { transform:scale(1.5); opacity:0.85; }
    50%  { transform:scale(1.0); opacity:1; }
    75%  { transform:scale(1.3); opacity:0.9; }
    100% { transform:scale(1.0); opacity:1; }
}
@keyframes signal-dot-glow-green {
    0%, 100% { box-shadow: 0 0 4px rgba(0,255,185,0.4), inset 0 -1px 3px rgba(0,0,0,0.3); }
    50%      { box-shadow: 0 0 10px rgba(0,255,185,0.85), 0 0 20px rgba(0,255,136,0.3), inset 0 -1px 3px rgba(0,0,0,0.3); }
}
@keyframes signal-dot-glow-red {
    0%, 100% { box-shadow: 0 0 4px rgba(255,71,87,0.4), inset 0 -1px 3px rgba(0,0,0,0.3); }
    50%      { box-shadow: 0 0 10px rgba(255,71,87,0.85), 0 0 20px rgba(255,0,0,0.3), inset 0 -1px 3px rgba(0,0,0,0.3); }
}
.signal-dot {
    width: 9px; height: 9px; border-radius: 50%;
    display: inline-block; vertical-align: middle; margin-right: 4px;
}
.signal-dot.long {
    background: radial-gradient(circle at 35% 35%, #5FFFDD, #00FFB9);
    animation: signal-dot-pulse 1.5s ease-in-out infinite, signal-dot-glow-green 1.5s ease-in-out infinite;
}
.signal-dot.short {
    background: radial-gradient(circle at 35% 35%, #FF8A95, #FF4757);
    animation: signal-dot-pulse 1.5s ease-in-out infinite, signal-dot-glow-red 1.5s ease-in-out infinite;
}
.signal-dot.neutral {
    background: radial-gradient(circle at 35% 35%, #B0B8CC, #8B92A8);
    box-shadow: 0 0 5px rgba(139,146,168,0.5), 0 0 10px rgba(139,146,168,0.15);
}

/* Table status dots — bright & glowing */
.status-dot {
    width: 10px; height: 10px; border-radius: 50%;
    display: inline-block; vertical-align: middle; cursor: help;
}
.status-dot.buy {
    background: radial-gradient(circle at 35% 35%, #5FFFDD, #00FFB9);
    box-shadow: 0 0 6px rgba(0,255,185,0.7), 0 0 14px rgba(0,255,185,0.3);
    animation: signal-dot-pulse 1.8s ease-in-out infinite, signal-dot-glow-green 1.8s ease-in-out infinite;
}
.status-dot.sell {
    background: radial-gradient(circle at 35% 35%, #FF8A95, #FF4757);
    box-shadow: 0 0 6px rgba(255,71,87,0.7), 0 0 14px rgba(255,71,87,0.3);
    animation: signal-dot-pulse 1.8s ease-in-out infinite, signal-dot-glow-red 1.8s ease-in-out infinite;
}
.status-dot.danger {
    background: radial-gradient(circle at 35% 35%, #c084fc, #a855f7);
    box-shadow: 0 0 6px rgba(168,85,247,0.7), 0 0 14px rgba(168,85,247,0.3);
    animation: signal-dot-pulse 1.8s ease-in-out infinite, signal-dot-glow-purple 1.8s ease-in-out infinite;
}
.status-dot.hold {
    background: radial-gradient(circle at 35% 35%, #FFE566, #FFD700);
    box-shadow: 0 0 4px rgba(255,215,0,0.5), 0 0 8px rgba(255,215,0,0.2);
}
.status-dot.enabled {
    background: radial-gradient(circle at 35% 35%, #5FFFDD, #00FFB9);
    box-shadow: 0 0 6px rgba(0,255,185,0.6), 0 0 12px rgba(0,255,185,0.25);
}
.status-dot.disabled {
    background: radial-gradient(circle at 35% 35%, #6B7280, #4B5563);
    box-shadow: 0 0 4px rgba(75,85,99,0.5);
}
@keyframes signal-dot-glow-yellow {
    0%, 100% { box-shadow: 0 0 4px rgba(255,215,0,0.4), inset 0 -1px 3px rgba(0,0,0,0.3); }
    50%      { box-shadow: 0 0 10px rgba(255,215,0,0.85), 0 0 20px rgba(255,215,0,0.3), inset 0 -1px 3px rgba(0,0,0,0.3); }
}
@keyframes signal-dot-glow-purple {
    0%, 100% { box-shadow: 0 0 4px rgba(168,85,247,0.4), inset 0 -1px 3px rgba(0,0,0,0.3); }
    50%      { box-shadow: 0 0 10px rgba(168,85,247,0.85), 0 0 20px rgba(168,85,247,0.3), inset 0 -1px 3px rgba(0,0,0,0.3); }
}

/* Connection status dot */
.conn-dot {
    width: 8px; height: 8px; border-radius: 50%;
    display: inline-block; margin-right: 4px;
}
.conn-dot.online {
    background: radial-gradient(circle at 35% 35%, #5FFFDD, #00FFB9);
    box-shadow: 0 0 6px var(--green), 0 0 14px rgba(0,255,185,0.25);
    animation: signal-dot-pulse 2s ease-in-out infinite;
}
.conn-dot.offline { background: var(--red); box-shadow: 0 0 4px rgba(255,71,87,0.35); }

/* Shimmer */
@keyframes shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}
.loading-shimmer {
    background: linear-gradient(90deg, var(--bg-card) 0%, rgba(0,212,255,0.04) 50%, var(--bg-card) 100%);
    background-size: 200px 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

/* SKILL status badges */
.skill-badge {
    padding: 3px 9px; border-radius: var(--radius-pill);
    font-size: 10.5px; font-weight: 700;
}
.skill-badge.running {
    background: linear-gradient(135deg, rgba(0,255,185,0.12), rgba(0,212,255,0.08));
    color: var(--green);
    border: 1px solid rgba(0,255,185,0.25);
    box-shadow: 0 0 8px rgba(0,255,185,0.12), 0 0 20px rgba(0,255,185,0.04);
    text-shadow: 0 0 6px rgba(0,255,185,0.3);
}
.skill-badge.stopped {
    background: rgba(90,98,117,0.08);
    color: var(--text-sub);
    border: 1px solid rgba(90,98,117,0.15);
}

/* Progress bar */
.progress-bar {
    height: 3px; background: rgba(42,52,80,0.4);
    border-radius: 2px; overflow: hidden; margin-top: 5px;
}
.progress-bar .fill {
    height: 100%; background: var(--gradient);
    border-radius: 2px; transition: width 0.6s ease;
    box-shadow: 0 0 6px rgba(0,212,255,0.25);
}

/* PnL badge */
.pnl-badge {
    font-weight: 700; font-size: 11px;
    padding: 3px 8px; border-radius: 4px;
    min-width: 60px; text-align: center;
}
.pnl-badge.profit {
    background: linear-gradient(135deg, rgba(0,255,185,0.08), rgba(0,230,118,0.04));
    border: 1px solid rgba(0,255,185,0.2);
    color: var(--green); box-shadow: 0 0 6px rgba(0,255,185,0.06);
}
.pnl-badge.loss {
    background: linear-gradient(135deg, rgba(255,71,87,0.08), rgba(255,23,68,0.04));
    border: 1px solid rgba(255,71,87,0.2);
    color: var(--red); box-shadow: 0 0 6px rgba(255,71,87,0.06);
}

/* Controls bar */
.controls {
    background: linear-gradient(160deg, rgba(14,19,32,0.9), rgba(10,16,28,0.95));
    backdrop-filter: blur(16px) saturate(1.3);
    padding: 8px 12px;
    border-radius: var(--radius);
    margin-bottom: 10px;
    display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
    border: 1px solid rgba(0,212,255,0.06);
    box-shadow: 0 2px 10px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.02);
}

/* Code editor */
.code-area {
    width: 100%; min-height: 160px;
    background: rgba(8,12,22,0.85);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px; color: var(--accent2);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 11.5px; line-height: 1.5; resize: vertical;
}
.code-area:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px rgba(0,212,255,0.08); }

/* ═══════ Modal Zoom Bar ═══════ */
.oc-mz-bar {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 4px; background: rgba(42,52,80,0.35);
    border-radius: 4px; margin-right: 5px; vertical-align: middle;
}
.oc-mz-bar button {
    width: 18px; height: 18px; border: none; background: rgba(30,36,51,0.7);
    color: var(--text-sub); border-radius: 3px; cursor: pointer; font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.oc-mz-bar button:hover { background: rgba(42,52,80,0.7); color: var(--accent); }
.oc-mz-bar input[type=range] {
    width: 55px; height: 3px; -webkit-appearance: none; appearance: none;
    background: rgba(42,52,80,0.5); border-radius: 2px; outline: none; cursor: pointer;
}
.oc-mz-bar input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%;
    background: linear-gradient(135deg, #00D4FF, #00FFB9); cursor: pointer;
    box-shadow: 0 0 6px rgba(0,212,255,0.4);
}
.oc-mz-pct {
    font-size: 9px; color: var(--text-sub); min-width: 26px; text-align: center; font-weight: 700;
}

/* ═══════ Modal Draggable ═══════ */
.oc-modal-draggable { transition: box-shadow 0.2s; }
.oc-modal-draggable:hover { box-shadow: 0 0 0 2px rgba(0,212,255,0.12), 0 20px 60px rgba(0,0,0,0.5); }
.oc-dragging { box-shadow: 0 0 0 3px rgba(0,212,255,0.3), 0 25px 70px rgba(0,0,0,0.6) !important; cursor: move !important; user-select: none; }

/* ═══════ K-line Chart ═══════ */
.kline-chart-container { position: relative; }
.kline-chart-container canvas { width: 100% !important; height: 100% !important; }

/* ═══════════════════════════════════════════════════════
   FUTURISTIC COMPONENT SYSTEM — Buttons / Layout / Icons
   ═══════════════════════════════════════════════════════ */

/* ── Base Button ── */
.oc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    padding: 7px 16px; border-radius: 7px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
    border: none; cursor: pointer; position: relative;
    transition: all 0.2s cubic-bezier(.4,0,.2,1);
    overflow: hidden; white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.oc-btn::before {
    content: '';
    position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    transition: left 0.5s ease;
}
.oc-btn:hover::before { left: 100%; }
.oc-btn:hover { transform: translateY(-1px); }
.oc-btn:active { transform: translateY(0) scale(0.98); }

/* ── Button Colors ── */
.oc-btn-cyan {
    background: linear-gradient(135deg, #00B8E6, #00D4FF, #00E5FF);
    color: #060a14; box-shadow: 0 2px 10px rgba(0,212,255,0.25);
}
.oc-btn-cyan:hover { box-shadow: 0 4px 20px rgba(0,212,255,0.4), 0 0 30px rgba(0,212,255,0.12); }

.oc-btn-green {
    background: linear-gradient(135deg, #00C853, #00E676, #00FFB9);
    color: #060a14; box-shadow: 0 2px 10px rgba(0,255,185,0.2);
}
.oc-btn-green:hover { box-shadow: 0 4px 20px rgba(0,255,185,0.4), 0 0 30px rgba(0,255,185,0.1); }

.oc-btn-red {
    background: linear-gradient(135deg, #E91E3C, #FF4757, #FF6B6B);
    color: #fff; box-shadow: 0 2px 10px rgba(255,71,87,0.2);
}
.oc-btn-red:hover { box-shadow: 0 4px 20px rgba(255,71,87,0.4), 0 0 30px rgba(255,71,87,0.1); }

.oc-btn-purple {
    background: linear-gradient(135deg, #7C3AED, #a855f7, #C084FC);
    color: #fff; box-shadow: 0 2px 10px rgba(168,85,247,0.2);
}
.oc-btn-purple:hover { box-shadow: 0 4px 20px rgba(168,85,247,0.4), 0 0 30px rgba(168,85,247,0.1); }

.oc-btn-orange {
    background: linear-gradient(135deg, #E65100, #FF6B00, #FF9500);
    color: #fff; box-shadow: 0 2px 10px rgba(255,107,0,0.2);
}
.oc-btn-orange:hover { box-shadow: 0 4px 20px rgba(255,107,0,0.4), 0 0 30px rgba(255,107,0,0.1); }

.oc-btn-gold {
    background: linear-gradient(135deg, #F9A825, #FFD600, #FFEE58);
    color: #1a1000; box-shadow: 0 2px 10px rgba(255,214,0,0.2);
}
.oc-btn-gold:hover { box-shadow: 0 4px 20px rgba(255,214,0,0.4), 0 0 30px rgba(255,214,0,0.1); }

.oc-btn-teal {
    background: linear-gradient(135deg, #009688, #00BFA5, #00D4AA);
    color: #fff; box-shadow: 0 2px 10px rgba(0,191,165,0.2);
}
.oc-btn-teal:hover { box-shadow: 0 4px 20px rgba(0,191,165,0.4), 0 0 30px rgba(0,191,165,0.1); }

/* Ghost / Outline */
.oc-btn-ghost {
    background: rgba(14,19,32,0.6); color: var(--text-sub);
    border: 1px solid var(--border);
    box-shadow: none; text-shadow: none;
    backdrop-filter: blur(4px);
}
.oc-btn-ghost:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 12px rgba(0,212,255,0.1); }

.oc-btn-ghost-red {
    background: rgba(14,19,32,0.6); color: var(--red);
    border: 1px solid rgba(255,71,87,0.3); box-shadow: none; text-shadow: none;
}
.oc-btn-ghost-red:hover { border-color: var(--red); box-shadow: 0 0 12px rgba(255,71,87,0.15); }

/* Sizes */
.oc-btn-xs { padding: 3px 8px; font-size: 10px; border-radius: 4px; gap: 3px; }
.oc-btn-sm { padding: 5px 12px; font-size: 11px; border-radius: 5px; }
.oc-btn-lg { padding: 10px 24px; font-size: 14px; border-radius: 9px; }
.oc-btn-xl { padding: 14px 36px; font-size: 16px; border-radius: 11px; letter-spacing: 0.5px; }
.oc-btn-block { width: 100%; }

/* ── Mode Toggle Buttons ── */
.oc-mode-btn {
    padding: 5px 12px; border-radius: 6px;
    border: 1.5px solid var(--border); background: rgba(14,19,32,0.7);
    color: var(--text-sub); cursor: pointer; font-size: 11px; font-weight: 600;
    transition: all 0.2s; backdrop-filter: blur(4px);
}
.oc-mode-btn:hover { border-color: var(--accent); color: var(--accent); }
.oc-mode-btn.active {
    border-color: var(--accent);
    background: linear-gradient(135deg, rgba(0,212,255,0.12), rgba(0,255,185,0.08));
    color: #fff; box-shadow: 0 0 10px rgba(0,212,255,0.12);
}

/* ── Toolbar ── */
.oc-toolbar {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap; padding: 8px 0;
}
.oc-toolbar-dense {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap;
}
.oc-toolbar-spread {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap; justify-content: space-between;
}
.oc-spacer { flex: 1; }

/* ── Flex utilities ── */
.oc-flex { display: flex; }
.oc-flex-center { display: flex; align-items: center; }
.oc-flex-col { display: flex; flex-direction: column; }
.oc-gap-4 { gap: 4px; } .oc-gap-6 { gap: 6px; } .oc-gap-8 { gap: 8px; }
.oc-gap-10 { gap: 10px; } .oc-gap-12 { gap: 12px; }

/* ── Section / Card overrides for tight layout ── */
.oc-section { margin-bottom: 8px; }
.oc-card-flush { padding: 10px 12px; margin-bottom: 8px; }
.oc-no-mb { margin-bottom: 0 !important; }

/* ── Form row ── */
.oc-form-row {
    display: flex; align-items: end; gap: 10px; flex-wrap: wrap;
}
.oc-form-group {
    display: flex; flex-direction: column; gap: 3px;
}
.oc-form-group label {
    font-size: 10px; color: var(--text-sub); font-weight: 600;
    letter-spacing: 0.5px; text-transform: uppercase;
}
.oc-form-group input, .oc-form-group select {
    padding: 7px 10px; font-size: 12px;
}

/* ── Quick lot/multiplier selector ── */
.oc-chip-group {
    display: flex; gap: 4px; align-items: center;
}
.oc-chip {
    padding: 4px 12px; border-radius: 5px;
    border: 1.5px solid var(--border); background: rgba(14,19,32,0.7);
    color: var(--text-sub); cursor: pointer; font-size: 11px; font-weight: 700;
    transition: all 0.15s;
}
.oc-chip:hover { border-color: var(--accent); color: var(--accent); }
.oc-chip.active { border-color: var(--purple); background: var(--purple); color: #fff; }
.oc-chip.active-orange { border-color: #FF6B00; background: #FF6B00; color: #fff; }

/* ── Signal legend ── */
.oc-legend {
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
    font-size: 10.5px; color: var(--text-sub);
}
.oc-legend-dot {
    width: 8px; height: 8px; border-radius: 50%;
    display: inline-block; margin-right: 4px; vertical-align: middle;
}
.oc-legend-dot.status-dot {
    width: 8px; height: 8px;
    animation: none;
}

/* ── Summary badge bar ── */
.oc-summary-bar {
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(160deg, rgba(10,14,26,0.88), rgba(16,22,38,0.92));
    border: 1px solid rgba(0,212,255,0.08);
    border-radius: 8px; padding: 8px 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02), 0 2px 10px rgba(0,0,0,0.25), 0 0 15px rgba(0,212,255,0.03);
}
.oc-summary-item {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.oc-summary-label { font-size: 9px; color: var(--text-sub); letter-spacing: 1px; text-transform: uppercase; }
.oc-summary-value { font-size: 16px; font-weight: 800; }
.oc-summary-divider { width: 1px; height: 24px; background: rgba(139,146,168,0.15); }

/* ── Card section titles ── */
.oc-section-title {
    font-size: 10px; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
    margin-bottom: 8px; padding-bottom: 5px;
    background: linear-gradient(135deg, #8B92A8, #00D4FF);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    border-bottom: 1px solid rgba(0,212,255,0.08);
}

/* ── Neon border card variant ── */
.oc-card-neon {
    position: relative; overflow: hidden;
    border-color: rgba(0,212,255,0.12);
}
.oc-card-neon::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, #00D4FF, #a855f7, #FFD700, #00FFB9, #FF6B00, #00D4FF);
    background-size: 400% 100%;
    animation: borderFlow 4s linear infinite;
}
.oc-card-neon::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,212,255,0.15), rgba(168,85,247,0.1), transparent);
    background-size: 200% 100%;
    animation: borderFlow 6s linear infinite reverse;
}

/* ── Hero button (for main CTAs) ── */
.oc-hero-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 40px; border-radius: 12px;
    font-size: 15px; font-weight: 800; letter-spacing: 0.5px;
    border: none; cursor: pointer; position: relative;
    transition: all 0.25s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}
.oc-hero-btn::before {
    content: '';
    position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: conic-gradient(transparent, rgba(255,255,255,0.08), transparent, transparent);
    animation: heroSpin 4s linear infinite;
}
@keyframes heroSpin { 100% { transform: rotate(360deg); } }
.oc-hero-btn:hover { transform: translateY(-2px) scale(1.02); }

/* ── Stats card with left accent ── */
.oc-stat-accent {
    border-left: 3px solid var(--accent) !important;
}
.oc-stat-accent-green { border-left: 3px solid var(--green) !important; }
.oc-stat-accent-purple { border-left: 3px solid var(--purple) !important; }
.oc-stat-accent-red { border-left: 3px solid var(--red) !important; }

/* ── Collapsible arrow ── */
.oc-collapse-arrow {
    font-size: 11px; color: var(--accent);
    transition: transform 0.25s; display: inline-block;
}
.oc-collapse-arrow.open { transform: rotate(90deg); }

/* ═══════ Responsive ═══════ */
@media (max-width: 1200px) {
    .grid-2 { grid-template-columns: 1fr; }
    .grid-3 { grid-template-columns: 1fr 1fr; }
}
/* ── Strategy Card Flowing Borders ── */
@keyframes strat-border-flow {
    0%   { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}
@keyframes strat-glow-pulse {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

/* ── V6.1 Compact Strategy Table ── */
.strat-group-hdr {
    display: flex; align-items: center; gap: 6px; padding: 5px 8px; cursor: pointer;
    border-radius: 6px; font-size: 11px; font-weight: 700; color: #8B92A8;
    background: rgba(255,255,255,0.03); margin-bottom: 2px; user-select: none;
    transition: background 0.2s;
}
.strat-group-hdr:hover { background: rgba(255,255,255,0.06); }
.strat-group-hdr .sg-arrow { font-size: 9px; transition: transform 0.25s; color: #5A6275; }
.strat-group-hdr .sg-count { font-size: 9px; color: #5A6275; font-weight: 400; margin-left: auto; }
.strat-group-body { overflow: hidden; transition: max-height 0.3s ease; }
.strat-group-body.sg-collapsed { max-height: 0 !important; }

.strat-row {
    display: flex; align-items: center; gap: 6px; padding: 4px 8px;
    border-radius: 5px; font-size: 11px; transition: background 0.15s;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.strat-row:hover { background: rgba(255,255,255,0.04); }
.strat-row.sr-active { background: rgba(0,255,185,0.04); }

.strat-row .sr-name {
    font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-width: 0; flex: 1;
}
.strat-row.sr-bull .sr-name   { color: #00FFB9; }
.strat-row.sr-bear .sr-name   { color: #FF6B6B; }
.strat-row.sr-range .sr-name  { color: #FFD700; }
.strat-row.sr-all .sr-name    { color: #00D4FF; }
.strat-row.sr-custom .sr-name { color: #c084fc; }
.strat-row.sr-active .sr-name { color: #00FFB9; text-shadow: 0 0 6px rgba(0,255,185,0.3); }

.strat-mkt-tag {
    font-size: 9px; font-weight: 700; padding: 1px 5px;
    border-radius: 3px; letter-spacing: 0.3px; flex-shrink: 0;
}
.strat-mkt-tag.mkt-bull  { background: rgba(0,255,185,0.12); color: #00FFB9; border: 1px solid rgba(0,255,185,0.2); }
.strat-mkt-tag.mkt-bear  { background: rgba(255,71,87,0.12); color: #FF6B6B; border: 1px solid rgba(255,71,87,0.2); }
.strat-mkt-tag.mkt-range { background: rgba(255,215,0,0.12); color: #FFD700; border: 1px solid rgba(255,215,0,0.2); }
.strat-mkt-tag.mkt-all   { background: rgba(0,212,255,0.12); color: #00D4FF; border: 1px solid rgba(0,212,255,0.2); }

.sr-actions { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.sr-actions button {
    width: 22px; height: 22px; border: none; border-radius: 4px;
    cursor: pointer; font-size: 11px; transition: all 0.15s; padding: 0;
}
.sr-btn-param { background: rgba(168,85,247,0.12); color: #a855f7; }
.sr-btn-param:hover { background: rgba(168,85,247,0.25); }
.sr-btn-edit  { background: rgba(255,165,0,0.12); color: #FFA500; }
.sr-btn-edit:hover  { background: rgba(255,165,0,0.25); }
.sr-btn-del   { background: rgba(255,71,87,0.12); color: #FF4757; }
.sr-btn-del:hover   { background: rgba(255,71,87,0.25); }

.sr-toggle { display: flex; align-items: center; cursor: pointer; flex-shrink: 0; }
.sr-toggle input { accent-color: #00FFB9; width: 14px; height: 14px; cursor: pointer; }

/* ── V6.0 Profile Buttons ── */
.profile-btn {
    padding: 5px 14px; border-radius: 8px; font-size: 11px; font-weight: 700;
    border: 1px solid #2A3142; background: #131824; color: #8B92A8;
    cursor: pointer; transition: all 0.25s ease; white-space: nowrap;
}
.profile-btn:hover { border-color: #3A4152; background: #1A2030; color: #C0C8D8; }
.profile-btn.profile-active[id$="smart"]        { border-color: #00D4FF; background: rgba(0,212,255,0.10); color: #00D4FF; box-shadow: 0 0 10px rgba(0,212,255,0.15); }
.profile-btn.profile-active[id$="conservative"] { border-color: #00FFB9; background: rgba(0,255,185,0.10); color: #00FFB9; box-shadow: 0 0 10px rgba(0,255,185,0.15); }
.profile-btn.profile-active[id$="aggressive"]   { border-color: #FFD700; background: rgba(255,215,0,0.10); color: #FFD700; box-shadow: 0 0 10px rgba(255,215,0,0.15); }
.profile-btn.profile-active[id$="high_return"]  { border-color: #FF4757; background: rgba(255,71,87,0.10); color: #FF4757; box-shadow: 0 0 10px rgba(255,71,87,0.15); }

/* ── SKILL Status Enhanced ── */
@keyframes skill-row-flow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
.skill-row-enhanced {
    position: relative;
    transition: all 0.3s ease;
}
.skill-row-enhanced.skill-running {
    background: rgba(0, 255, 185, 0.03);
}
.skill-row-enhanced.skill-running td {
    border-bottom-color: rgba(0, 255, 185, 0.1) !important;
}
.skill-row-enhanced::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--skill-line-color, transparent), transparent);
    background-size: 200% 100%;
    animation: skill-row-flow 3s linear infinite;
}
.skill-row-enhanced.skill-running::after { --skill-line-color: rgba(0,255,185,0.4); }
.skill-row-enhanced.skill-stopped::after { --skill-line-color: rgba(90,98,117,0.15); }

.skill-badge.running {
    animation: strat-glow-pulse 2s ease-in-out infinite;
}

.skill-id { font-weight: 800; font-size: 15px; }
.skill-id-12 { color: #00D4FF; text-shadow: 0 0 8px rgba(0,212,255,0.3); }
.skill-id-13 { color: #FF8C00; text-shadow: 0 0 8px rgba(255,140,0,0.3); }
.skill-id-14 { color: #a855f7; text-shadow: 0 0 8px rgba(168,85,247,0.3); }

.skill-desc { color: #C0C8E0; font-weight: 600; }

.skill-toggle-btn {
    padding: 4px 14px; border-radius: 6px; font-size: 11px;
    font-weight: 700; cursor: pointer; border: 1.5px solid;
    transition: all 0.25s ease;
}
.skill-toggle-btn.toggle-running {
    background: rgba(255,71,87,0.08); border-color: rgba(255,71,87,0.3);
    color: #FF4757;
}
.skill-toggle-btn.toggle-running:hover {
    background: rgba(255,71,87,0.15); box-shadow: 0 0 12px rgba(255,71,87,0.2);
}
.skill-toggle-btn.toggle-stopped {
    background: rgba(0,255,185,0.08); border-color: rgba(0,255,185,0.3);
    color: #00FFB9;
}
.skill-toggle-btn.toggle-stopped:hover {
    background: rgba(0,255,185,0.15); box-shadow: 0 0 12px rgba(0,255,185,0.2);
}

/* ── Market Table Enhanced ── */
@keyframes mkt-row-flow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
@keyframes mkt-btn-pulse {
    0%, 100% { box-shadow: 0 0 4px var(--btn-glow-color); }
    50%      { box-shadow: 0 0 12px var(--btn-glow-color), 0 0 20px var(--btn-glow-color); }
}

.mkt-row {
    position: relative;
    transition: background 0.3s ease;
}
.mkt-row:hover { background: rgba(0,212,255,0.03); }
.mkt-row::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--mkt-line-color, rgba(42,52,80,0.3)), transparent);
    background-size: 200% 100%;
    animation: mkt-row-flow 4s linear infinite;
}
.mkt-row.mkt-up::after    { --mkt-line-color: rgba(0,255,185,0.25); }
.mkt-row.mkt-down::after  { --mkt-line-color: rgba(255,71,87,0.25); }
.mkt-row.mkt-flat::after  { --mkt-line-color: rgba(42,52,80,0.3); }

/* Symbol name by asset class */
.sym-name { font-weight: 800; font-size: 13px; }
.sym-forex  { color: #00D4FF; text-shadow: 0 0 6px rgba(0,212,255,0.15); }
.sym-metal  { color: #FFD700; text-shadow: 0 0 6px rgba(255,215,0,0.2); }
.sym-crypto { color: #a855f7; text-shadow: 0 0 6px rgba(168,85,247,0.2); }
.sym-index  { color: #FF8C00; text-shadow: 0 0 6px rgba(255,140,0,0.2); }
.sym-energy { color: #00E676; text-shadow: 0 0 6px rgba(0,230,118,0.15); }

/* Signal badges */
.sig-badge {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px; border-radius: 4px;
    font-size: 10px; font-weight: 800; letter-spacing: 0.3px;
    white-space: nowrap;
}
@keyframes sig-glow-green {
    0%, 100% { box-shadow: 0 0 4px rgba(0,255,185,0.2), inset 0 0 4px rgba(0,255,185,0.05); }
    50%      { box-shadow: 0 0 10px rgba(0,255,185,0.4), inset 0 0 8px rgba(0,255,185,0.1); }
}
@keyframes sig-glow-red {
    0%, 100% { box-shadow: 0 0 4px rgba(255,71,87,0.2), inset 0 0 4px rgba(255,71,87,0.05); }
    50%      { box-shadow: 0 0 10px rgba(255,71,87,0.4), inset 0 0 8px rgba(255,71,87,0.1); }
}
.sig-badge.sig-buy {
    background: linear-gradient(135deg, rgba(0,255,185,0.15), rgba(0,212,255,0.08));
    color: #00FFB9; border: 1px solid rgba(0,255,185,0.35);
    text-shadow: 0 0 8px rgba(0,255,185,0.4);
    animation: sig-glow-green 2.5s ease-in-out infinite;
}
.sig-badge.sig-sell {
    background: linear-gradient(135deg, rgba(255,71,87,0.15), rgba(255,215,0,0.06));
    color: #FF6B6B; border: 1px solid rgba(255,71,87,0.35);
    text-shadow: 0 0 8px rgba(255,71,87,0.4);
    animation: sig-glow-red 2.5s ease-in-out infinite;
}
.sig-badge.sig-hold {
    background: rgba(90,98,117,0.06);
    color: #5A6275; border: 1px solid rgba(90,98,117,0.15);
}

/* Enhanced buy/sell buttons — flowing neon style */
@keyframes btn-flow-buy {
    0%   { background-position: 0% 50%; box-shadow: 0 0 8px rgba(0,255,185,0.15); }
    50%  { background-position: 100% 50%; box-shadow: 0 0 16px rgba(0,255,185,0.3); }
    100% { background-position: 0% 50%; box-shadow: 0 0 8px rgba(0,255,185,0.15); }
}
@keyframes btn-flow-sell {
    0%   { background-position: 0% 50%; box-shadow: 0 0 8px rgba(255,71,87,0.15); }
    50%  { background-position: 100% 50%; box-shadow: 0 0 16px rgba(255,71,87,0.3); }
    100% { background-position: 0% 50%; box-shadow: 0 0 8px rgba(255,71,87,0.15); }
}
@keyframes btn-sig-glow {
    0%   { box-shadow: 0 0 6px var(--sg), 0 0 16px var(--sg); }
    50%  { box-shadow: 0 0 12px var(--sg), 0 0 30px var(--sg), inset 0 0 8px var(--sg); }
    100% { box-shadow: 0 0 6px var(--sg), 0 0 16px var(--sg); }
}

.mkt-btn {
    padding: 5px 14px; border: 1.5px solid; border-radius: 6px;
    font-size: 11px; font-weight: 800; cursor: pointer; letter-spacing: 0.5px;
    transition: all 0.3s cubic-bezier(.4,0,.2,1); position: relative;
    overflow: hidden;
}
.mkt-btn::after {
    content: ''; position: absolute; top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 60%);
    opacity: 0; transition: opacity 0.3s ease;
    pointer-events: none;
}
.mkt-btn:hover::after { opacity: 1; }

.mkt-btn-buy {
    background: linear-gradient(135deg, rgba(0,255,185,0.08), rgba(0,212,255,0.04), rgba(0,255,185,0.08));
    background-size: 200% 200%;
    border-color: rgba(0,255,185,0.35); color: #00FFB9;
    animation: btn-flow-buy 3s ease-in-out infinite;
}
.mkt-btn-buy:hover {
    background: linear-gradient(135deg, rgba(0,255,185,0.25), rgba(0,212,255,0.15), rgba(0,255,185,0.25));
    background-size: 200% 200%;
    border-color: rgba(0,255,185,0.7);
    box-shadow: 0 0 20px rgba(0,255,185,0.35), 0 0 40px rgba(0,255,185,0.1);
    transform: translateY(-2px) scale(1.05);
    text-shadow: 0 0 8px rgba(0,255,185,0.5);
}
.mkt-btn-buy:active { transform: translateY(0) scale(0.97); }

.mkt-btn-sell {
    background: linear-gradient(135deg, rgba(255,71,87,0.08), rgba(255,140,0,0.03), rgba(255,71,87,0.08));
    background-size: 200% 200%;
    border-color: rgba(255,71,87,0.35); color: #FF4757;
    animation: btn-flow-sell 3s ease-in-out infinite;
}
.mkt-btn-sell:hover {
    background: linear-gradient(135deg, rgba(255,71,87,0.25), rgba(255,140,0,0.12), rgba(255,71,87,0.25));
    background-size: 200% 200%;
    border-color: rgba(255,71,87,0.7);
    box-shadow: 0 0 20px rgba(255,71,87,0.35), 0 0 40px rgba(255,71,87,0.1);
    transform: translateY(-2px) scale(1.05);
    text-shadow: 0 0 8px rgba(255,71,87,0.5);
}
.mkt-btn-sell:active { transform: translateY(0) scale(0.97); }

/* Signal-linked: stronger glow pulse when strategy recommends this direction */
.mkt-btn-buy.sig-linked {
    --sg: rgba(0,255,185,0.35);
    border-color: rgba(0,255,185,0.6);
    animation: btn-flow-buy 3s ease-in-out infinite, btn-sig-glow 1.8s ease-in-out infinite;
    background: linear-gradient(135deg, rgba(0,255,185,0.15), rgba(0,212,255,0.08), rgba(0,255,185,0.15));
    background-size: 200% 200%;
}
.mkt-btn-sell.sig-linked {
    --sg: rgba(255,71,87,0.35);
    border-color: rgba(255,71,87,0.6);
    animation: btn-flow-sell 3s ease-in-out infinite, btn-sig-glow 1.8s ease-in-out infinite;
    background: linear-gradient(135deg, rgba(255,71,87,0.15), rgba(255,140,0,0.06), rgba(255,71,87,0.15));
    background-size: 200% 200%;
}

/* 24H change glow */
.chg-cell { font-weight: 700; font-size: 12px; }
.chg-up   { color: #00FFB9; text-shadow: 0 0 6px rgba(0,255,185,0.2); }
.chg-down { color: #FF4757; text-shadow: 0 0 6px rgba(255,71,87,0.2); }
.chg-flat { color: #5A6275; }

/* Price columns */
.price-bid { color: #00FFB9; font-family: monospace; font-weight: 600; }
.price-ask { color: #FF6B6B; font-family: monospace; font-weight: 600; }
.price-last { color: #C0C8E0; font-family: monospace; }

/* Pin star */
.pin-star.on { color: #FFD700; text-shadow: 0 0 8px rgba(255,215,0,0.3); filter: drop-shadow(0 0 3px rgba(255,215,0,0.2)); }

/* ── Bottom Auto-Trade Status Bar ── */
@keyframes atbar-flow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.at-bar {
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 999;
    background: rgba(10, 12, 22, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(42, 52, 80, 0.4);
    transition: height 0.35s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}
.at-bar::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1.5px;
    background: linear-gradient(90deg, #00D4FF, #a855f7, #FFD700, #00FFB9, #FF6B00, #00D4FF);
    background-size: 400% 100%;
    animation: atbar-flow 4s linear infinite;
}
.at-bar.collapsed { height: 34px; }
.at-bar.expanded  { height: 300px; }

.at-bar-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 16px; cursor: pointer; height: 34px; box-sizing: border-box;
    user-select: none;
}
.at-bar-header:hover { background: rgba(0,212,255,0.03); }

.at-bar-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 700; color: #C0C8E0;
}
.at-bar-icon {
    font-size: 14px;
}

.at-bar-latest {
    font-size: 11px; color: #8B92A8; font-weight: 600;
    display: flex; align-items: center; gap: 6px;
    flex: 1; margin-left: 16px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.at-bar-summary {
    display: flex; align-items: center; gap: 12px;
    font-size: 10px; font-weight: 700;
}
.at-sum-trades { color: #00D4FF; }
.at-sum-wr     { color: #a78bfa; font-weight: 800; }
.at-sum-wins   { color: #00FFB9; }
.at-sum-wins small, .at-sum-losses small { opacity: 0.6; margin-left: 2px; }
.at-sum-losses { color: #FF4757; }
.at-sum-pnl    { padding: 2px 8px; border-radius: 4px; font-size: 11px; }
.at-sum-pnl.profit { background: rgba(0,255,185,0.08); color: #00FFB9; border: 1px solid rgba(0,255,185,0.2); }
.at-sum-pnl.loss   { background: rgba(255,71,87,0.08); color: #FF4757; border: 1px solid rgba(255,71,87,0.2); }
.at-sum-pnl.zero   { background: rgba(90,98,117,0.08); color: #8B92A8; border: 1px solid rgba(90,98,117,0.15); }
.at-sum-rr   { color: #FFD700; font-weight: 700; }
.at-sum-hold { color: #a78bfa; }

.at-bar-toggle {
    font-size: 10px; color: #5A6275; transition: transform 0.3s ease;
    margin-left: 8px;
}
.at-bar.expanded .at-bar-toggle { transform: rotate(180deg); }

/* Activity log list */
.at-log {
    height: calc(100% - 34px); overflow-y: auto; padding: 0 8px 8px;
}
.at-log::-webkit-scrollbar { width: 4px; }
.at-log::-webkit-scrollbar-track { background: transparent; }
.at-log::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.15); border-radius: 2px; }

/* ── AT Table (Professional Redesign) ── */
.at-table {
    width: 100%; border-collapse: collapse;
    font-size: 11px; table-layout: fixed;
}
.at-thead {
    position: sticky; top: 0; z-index: 2;
    background: rgba(6, 8, 18, 0.98);
}
.at-th {
    padding: 5px 6px;
    text-align: left; font-size: 10px; font-weight: 700;
    letter-spacing: 0.5px; text-transform: uppercase;
    color: #3D4560;
    border-bottom: 1px solid rgba(0,212,255,0.15);
    white-space: nowrap; overflow: hidden;
}

/* Column widths */
.at-td-time   { width: 46px; }
.at-td-sym    { width: 80px; }
.at-td-dir    { width: 46px; }
.at-td-lot    { width: 38px; }
.at-td-entry  { width: 70px; }
.at-td-exit   { width: 70px; }
.at-td-delta  { width: 50px; }
.at-td-pnl    { width: 66px; }
.at-td-hold   { width: 48px; }
.at-td-status { width: 66px; }
.at-td-del    { width: 22px; }

.at-tr {
    cursor: pointer;
    transition: background 0.12s;
    border-bottom: 1px solid rgba(42,52,80,0.12);
}
.at-tr:hover { background: rgba(255,255,255,0.025) !important; }
.at-tr-win  { background: rgba(0,255,185,0.02); }
.at-tr-win  td:first-child { box-shadow: inset 2px 0 0 #00FFB9; }
.at-tr-loss { background: rgba(255,71,87,0.02); }
.at-tr-loss td:first-child { box-shadow: inset 2px 0 0 #FF4757; }
.at-tr-open { background: rgba(0,212,255,0.02); animation: atOpenPulse 2.5s ease-in-out infinite; }
.at-tr-open td:first-child { box-shadow: inset 2px 0 0 #00D4FF; }
@keyframes atOpenPulse {
    0%,100% { background: rgba(0,212,255,0.02); }
    50%      { background: rgba(0,212,255,0.055); }
}

.at-table td {
    padding: 5px 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    vertical-align: middle;
}
.at-td-time   { color: #5A6275; font-family: monospace; font-size: 10px; }
.at-td-entry, .at-td-exit { color: #8B92A8; font-family: monospace; font-size: 10px; }
.at-td-lot    { color: #8B92A8; font-size: 10px; }

/* Direction badge */
.at-dir-badge {
    display: inline-block;
    padding: 1px 5px; border-radius: 3px;
    font-size: 9px; font-weight: 800; letter-spacing: 0.6px;
}
.at-dir-badge.at-dir-buy  { background: rgba(0,212,255,0.12); color: #00D4FF; border: 1px solid rgba(0,212,255,0.28); }
.at-dir-badge.at-dir-sell { background: rgba(255,71,87,0.12);  color: #FF6B6B; border: 1px solid rgba(255,71,87,0.28); }

/* Delta column */
.at-delta-win  { color: #00FFB9; font-weight: 700; font-family: monospace; font-size: 10px; }
.at-delta-loss { color: #FF4757; font-weight: 700; font-family: monospace; font-size: 10px; }

/* P&L */
.at-pnl-win  { color: #00FFB9; font-weight: 800; font-family: monospace; }
.at-pnl-loss { color: #FF4757; font-weight: 800; font-family: monospace; }
.at-pnl-zero { color: #5A6275; font-family: monospace; }

/* Duration */
.at-hold      { color: #a78bfa; font-size: 10px; }
.at-hold-live { color: #00D4FF; font-size: 10px; animation: atPulse 1.5s infinite; }

/* Status badges */
.at-status-win     { display:inline-block; padding:1px 5px; border-radius:3px; font-size:9px; font-weight:700;
                     background:rgba(0,255,185,0.1); color:#00FFB9; border:1px solid rgba(0,255,185,0.22); }
.at-status-loss    { display:inline-block; padding:1px 5px; border-radius:3px; font-size:9px; font-weight:700;
                     background:rgba(255,71,87,0.1); color:#FF4757; border:1px solid rgba(255,71,87,0.22); }
.at-status-open    { display:inline-block; padding:1px 5px; border-radius:3px; font-size:9px; font-weight:700;
                     background:rgba(0,212,255,0.1); color:#00D4FF; border:1px solid rgba(0,212,255,0.22);
                     animation: atPulse 1.5s infinite; }
.at-status-neutral { color: #8B92A8; font-size: 10px; }

/* Exit price / holding tag */
.at-exit-price  { color: #8B92A8; font-family: monospace; }
.at-holding-tag { color: #00D4FF; font-size: 9px; animation: atPulse 1.5s infinite; }
.at-muted       { color: #3A4255; }

/* Detail expand row */
.at-detail-tr { background: rgba(8,11,20,0.9) !important; cursor: default; }
.at-detail-td {
    padding: 3px 8px 5px 14px !important;
    font-size: 9px; color: #5A6275;
    border-bottom: 1px solid rgba(42,52,80,0.2);
    display: flex !important; flex-wrap: wrap; gap: 6px; align-items: center;
}

/* Hold (legacy compat) */
.at-holding      { color: #00D4FF; font-size: 10px; animation: atPulse 1.5s infinite; }
.at-holding-mini { color: #00D4FF; font-size: 9px; animation: atPulse 1.5s infinite; }
@keyframes atPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.at-result-win, .at-result-loss, .at-result-open { font-size: 12px; flex-shrink: 0; }
.at-tag-manual { font-size: 9px; background: rgba(255,159,67,0.2); color: #FF9F43; padding: 1px 4px; border-radius: 3px; margin-left: 3px; }

.at-delete {
    color: #5A6275; font-size: 14px; font-weight: 700; opacity: 0;
    transition: opacity 0.15s, color 0.15s; margin-left: auto; flex-shrink: 0;
    padding: 0 4px; line-height: 1;
}
.at-card:hover .at-delete { opacity: 0.6; }
.at-delete:hover { opacity: 1 !important; color: #FF4757; }

/* Expandable detail row */
.at-detail-row {
    display: flex; align-items: center; gap: 10px;
    padding: 3px 8px 5px 14px; font-size: 9px; color: #5A6275;
    border-top: 1px solid rgba(42,52,80,0.15);
}
.at-detail-item { background: rgba(42,52,80,0.3); padding: 1px 6px; border-radius: 3px; }
.at-reason { color: #FF9F43; background: rgba(255,159,67,0.1); padding: 1px 6px; border-radius: 3px; }

/* Empty state */
.at-empty {
    text-align: center; padding: 30px; color: #5A6275; font-size: 12px;
}

/* Pad body so content isn't hidden behind bar */
body { padding-bottom: 38px; }

@media (max-width: 768px) {
    .container { padding: 6px 8px; }
    header { padding: 10px 14px; flex-direction: column; gap: 8px; text-align: center; }
    header h1 { font-size: 1.3em; }
    .header-right { align-items: center; }
    .tabs { flex-wrap: wrap; gap: 3px; padding: 4px; }
    .tab { padding: 5px 10px; font-size: 11px; }
    .grid-3 { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
}

/* ═══════════ Cooldown Controller (V4.3.14) ═══════════ */
@keyframes cd-pulse-border {
    0%, 100% { border-color: rgba(255,71,87,0.3); box-shadow: 0 0 8px rgba(255,71,87,0.1); }
    50%      { border-color: rgba(255,71,87,0.6); box-shadow: 0 0 16px rgba(255,71,87,0.2); }
}
.cd-panel {
    background: linear-gradient(135deg, rgba(255,71,87,0.06), rgba(14,19,32,0.95));
    border: 1px solid rgba(255,71,87,0.3); border-radius: 8px;
    padding: 10px 14px; margin-bottom: 8px;
    animation: cd-pulse-border 3s ease-in-out infinite;
}
.cd-panel-inner { display: flex; flex-direction: column; gap: 8px; }
.cd-status-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cd-icon { font-size: 16px; }
.cd-status-text { color: #FF6B6B; font-weight: 800; font-size: 12px; }
.cd-timer {
    font-family: 'Courier New', monospace; font-size: 18px; font-weight: 900;
    color: #FF4757; text-shadow: 0 0 10px rgba(255,71,87,0.5);
    letter-spacing: 1px; min-width: 50px;
}
.cd-progress-row { display: flex; align-items: center; gap: 6px; }
.cd-config-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cd-label { color: #8B92A8; font-size: 10px; font-weight: 700; white-space: nowrap; }
.cd-dots { display: flex; gap: 3px; align-items: center; }
.cd-dot {
    width: 8px; height: 8px; border-radius: 50%;
    transition: all 0.3s ease;
}
.cd-dot.active {
    background: radial-gradient(circle at 35% 35%, #FF8A95, #FF4757);
    box-shadow: 0 0 6px rgba(255,71,87,0.7);
}
.cd-dot.inactive {
    background: rgba(90,98,117,0.25);
    border: 1px solid rgba(90,98,117,0.15);
}
.cd-dot.threshold {
    border: 1.5px solid rgba(255,215,0,0.5);
}
.cd-loss-count { color: #FF6B6B; font-size: 11px; font-weight: 800; }

/* Cooldown buttons */
.cd-btn {
    padding: 3px 10px; border-radius: 5px; font-size: 10px; font-weight: 800;
    cursor: pointer; border: 1.5px solid; transition: all 0.25s ease;
    white-space: nowrap;
}
.cd-btn-skip {
    background: linear-gradient(135deg, rgba(255,215,0,0.1), rgba(255,140,0,0.05));
    border-color: rgba(255,215,0,0.4); color: #FFD700;
}
.cd-btn-skip:hover {
    background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,140,0,0.1));
    box-shadow: 0 0 12px rgba(255,215,0,0.3); transform: translateY(-1px);
}
.cd-btn-reset {
    background: linear-gradient(135deg, rgba(168,85,247,0.1), rgba(139,92,246,0.05));
    border-color: rgba(168,85,247,0.4); color: #a855f7;
}
.cd-btn-reset:hover {
    background: linear-gradient(135deg, rgba(168,85,247,0.2), rgba(139,92,246,0.1));
    box-shadow: 0 0 12px rgba(168,85,247,0.3); transform: translateY(-1px);
}
.cd-btn-set {
    background: rgba(0,212,255,0.08); border-color: rgba(0,212,255,0.3); color: #00D4FF;
}
.cd-btn-set:hover { background: rgba(0,212,255,0.15); box-shadow: 0 0 8px rgba(0,212,255,0.2); }
.cd-btn-expand {
    background: transparent; border-color: rgba(90,98,117,0.3); color: #8B92A8; font-size: 9px;
}
.cd-btn-expand:hover { border-color: rgba(0,212,255,0.4); color: #00D4FF; }

/* Preset buttons */
.cd-preset {
    padding: 2px 8px; border-radius: 4px; font-size: 9px; font-weight: 700;
    cursor: pointer; border: 1px solid rgba(90,98,117,0.25);
    background: rgba(14,19,32,0.6); color: #8B92A8;
    transition: all 0.2s ease;
}
.cd-preset:hover { border-color: rgba(0,212,255,0.4); color: #00D4FF; }
.cd-preset.active {
    border-color: rgba(0,255,185,0.5); color: #00FFB9;
    background: rgba(0,255,185,0.08);
    box-shadow: 0 0 6px rgba(0,255,185,0.15);
}

.cd-custom-input {
    padding: 2px 6px; border-radius: 4px; font-size: 10px;
    border: 1px solid rgba(90,98,117,0.25); background: rgba(14,19,32,0.8);
    color: #C0C8E0; text-align: center;
}
.cd-custom-input:focus { border-color: rgba(0,212,255,0.5); outline: none; }
.cd-current-cfg { font-size: 9px; margin-left: 4px; }

/* Mini bar (no cooldown active) */
.cd-mini {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 12px; margin-bottom: 6px;
    background: rgba(14,19,32,0.4); border: 1px solid rgba(42,52,80,0.25);
    border-radius: 6px; font-size: 10px;
}
.cd-mini-icon { font-size: 12px; opacity: 0.6; }
.cd-mini-text { color: #5A6275; font-weight: 600; }
.cd-mini-loss { color: #FF6B6B; font-weight: 800; font-size: 10px; }

/* ═══════════ SL/TP Percentage Panel (V4.3.14) ═══════════ */
.pct-gear-btn {
    width: 32px; height: 32px; border-radius: 6px; font-size: 16px;
    background: rgba(14,19,32,0.6); border: 1.5px solid rgba(90,98,117,0.3);
    color: #8B92A8; cursor: pointer; transition: all 0.25s ease;
    display: flex; align-items: center; justify-content: center;
    align-self: flex-end; margin-bottom: 2px;
}
.pct-gear-btn:hover {
    border-color: rgba(0,212,255,0.5); color: #00D4FF;
    box-shadow: 0 0 10px rgba(0,212,255,0.2);
    transform: rotate(45deg);
}
.pct-gear-btn.active {
    border-color: rgba(0,255,185,0.5); color: #00FFB9;
    background: rgba(0,255,185,0.08);
}

/* ═══════════ Signal Indicator Bar ═══════════ */
.signal-bar {
    display: flex; align-items: center; gap: 8px;
    margin-top: 8px; padding: 8px 14px;
    background: linear-gradient(135deg, rgba(14,19,32,0.95), rgba(8,12,22,0.9));
    border: 1px solid rgba(0,212,255,0.1); border-radius: 8px;
    font-size: 12px;
}
.signal-bar-icon { font-size: 14px; animation: sigDotPulse 1.8s ease-in-out infinite; }
@keyframes sigDotPulse {
    0%, 100% { filter: drop-shadow(0 0 2px currentColor); opacity: 0.7; }
    50% { filter: drop-shadow(0 0 10px currentColor) drop-shadow(0 0 20px currentColor); opacity: 1; }
}
.signal-bar-divider { color: #2A3142; margin: 0 2px; }
.signal-dir-buy { color: #00FFB9; text-shadow: 0 0 8px rgba(0,255,185,0.5); }
.signal-dir-sell { color: #FF4757; text-shadow: 0 0 8px rgba(255,71,87,0.5); }
.signal-dir-hold { color: #8B92A8; }
.signal-market-bull { color: #00FFB9; }
.signal-market-bear { color: #FF4757; }
.signal-market-range { color: #FFD700; }
/* Buy/Sell button glow when signal matches */
#btnBuy.signal-active {
    animation: pulseGreen 1.5s ease-in-out infinite !important;
    border: 2px solid #00FFB9 !important;
}
#btnSell.signal-active {
    animation: pulseRed 1.5s ease-in-out infinite !important;
    border: 2px solid #FF4757 !important;
}
#btnBuy:not(.signal-active), #btnSell:not(.signal-active) {
    animation: none !important;
}
@keyframes pulseGreen {
    0%, 100% { box-shadow: 0 0 8px rgba(0,255,185,0.3), inset 0 0 6px rgba(0,255,185,0.1); }
    50% { box-shadow: 0 0 24px rgba(0,255,185,0.7), 0 0 48px rgba(0,255,185,0.25), inset 0 0 10px rgba(0,255,185,0.15); }
}
@keyframes pulseRed {
    0%, 100% { box-shadow: 0 0 8px rgba(255,71,87,0.3), inset 0 0 6px rgba(255,71,87,0.1); }
    50% { box-shadow: 0 0 24px rgba(255,71,87,0.7), 0 0 48px rgba(255,71,87,0.25), inset 0 0 10px rgba(255,71,87,0.15); }
}
/* Follow signal button styles */
#btnFollowSignal.sig-buy { background: linear-gradient(135deg, #00C853, #00FFB9); color: #0C101A; }
#btnFollowSignal.sig-sell { background: linear-gradient(135deg, #E91E3C, #FF4757); color: #fff; }
#btnFollowSignal.sig-hold { background: #2A3142; color: #8B92A8; cursor: not-allowed; }

/* V6.4: ⚡ Signal quick-trade inline buttons */
.sig-quick-btn {
    display: inline-flex; align-items: center;
    padding: 2px 8px; margin-left: 4px; border-radius: 4px;
    font-size: 10px; font-weight: 900; cursor: pointer;
    border: 1.5px solid; letter-spacing: 0.5px;
    transition: all 0.2s ease;
    animation: sig-quick-pulse 2s ease-in-out infinite;
}
.sig-quick-buy {
    background: linear-gradient(135deg, rgba(0,255,185,0.2), rgba(0,200,83,0.15));
    border-color: rgba(0,255,185,0.6); color: #00FFB9;
    text-shadow: 0 0 6px rgba(0,255,185,0.5);
}
.sig-quick-buy:hover {
    background: linear-gradient(135deg, rgba(0,255,185,0.4), rgba(0,200,83,0.3));
    transform: scale(1.1); box-shadow: 0 0 12px rgba(0,255,185,0.5);
}
.sig-quick-sell {
    background: linear-gradient(135deg, rgba(255,71,87,0.2), rgba(233,30,60,0.15));
    border-color: rgba(255,71,87,0.6); color: #FF4757;
    text-shadow: 0 0 6px rgba(255,71,87,0.5);
}
.sig-quick-sell:hover {
    background: linear-gradient(135deg, rgba(255,71,87,0.4), rgba(233,30,60,0.3));
    transform: scale(1.1); box-shadow: 0 0 12px rgba(255,71,87,0.5);
}
@keyframes sig-quick-pulse {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 1; filter: brightness(1.2); }
}

/* V6.4: Signal row hover + clickable */
.mkt-signal-row:hover {
    background: rgba(0,212,255,0.06) !important;
    outline: 1px solid rgba(0,212,255,0.15);
}

/* V6.4: Flash animation for buy/sell buttons when signal synced */
@keyframes signal-flash-anim {
    0% { transform: scale(1); }
    20% { transform: scale(1.15); box-shadow: 0 0 20px rgba(0,212,255,0.6); }
    40% { transform: scale(1.05); }
    60% { transform: scale(1.12); box-shadow: 0 0 16px rgba(0,212,255,0.4); }
    100% { transform: scale(1); }
}
.signal-flash {
    animation: signal-flash-anim 0.8s ease-out !important;
}

.pct-panel {
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(10,14,28,0.98), rgba(14,19,36,0.99));
    border: 1px solid rgba(0,212,255,0.22); border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,212,255,0.08);
    backdrop-filter: blur(12px);
    animation: pct-slide-in 0.2s ease-out;
}
@keyframes pct-slide-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.pct-row {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 0; flex-wrap: wrap;
}
.pct-title { color: #C0C8E0; font-size: 11px; font-weight: 800; flex: 1; }
.pct-base-price { color: #00D4FF; font-size: 11px; font-weight: 700; font-family: 'Courier New', monospace; }
.pct-close-btn {
    width: 20px; height: 20px; border-radius: 4px; font-size: 11px;
    background: transparent; border: 1px solid rgba(90,98,117,0.2);
    color: #5A6275; cursor: pointer; transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
}
.pct-close-btn:hover { border-color: rgba(255,71,87,0.4); color: #FF6B6B; }

.pct-label { color: #8B92A8; font-size: 10px; font-weight: 700; min-width: 60px; }
.pct-presets { display: flex; gap: 4px; }
.pct-chip {
    padding: 3px 8px; border-radius: 4px; font-size: 9px; font-weight: 700;
    cursor: pointer; border: 1px solid rgba(90,98,117,0.25);
    background: rgba(14,19,32,0.6); color: #8B92A8;
    transition: all 0.2s ease;
}
.pct-chip:hover { border-color: rgba(0,212,255,0.4); color: #00D4FF; }
.pct-chip.active-sl {
    border-color: rgba(255,71,87,0.5); color: #FF6B6B;
    background: rgba(255,71,87,0.08); box-shadow: 0 0 6px rgba(255,71,87,0.15);
}
.pct-chip.active-tp {
    border-color: rgba(0,255,185,0.5); color: #00FFB9;
    background: rgba(0,255,185,0.08); box-shadow: 0 0 6px rgba(0,255,185,0.15);
}

.pct-input {
    width: 65px; padding: 3px 6px; border-radius: 4px; font-size: 10px;
    border: 1px solid rgba(90,98,117,0.25); background: rgba(14,19,32,0.8);
    color: #C0C8E0; text-align: center;
}
.pct-input:focus { border-color: rgba(0,212,255,0.5); outline: none; }

.pct-arrow { color: #5A6275; font-size: 12px; }
.pct-preview { font-size: 11px; font-weight: 800; font-family: 'Courier New', monospace; min-width: 75px; }
.pct-sl-color { color: #FF6B6B; }
.pct-tp-color { color: #00FFB9; }

.pct-action-row { margin-top: 4px; padding-top: 6px; border-top: 1px solid rgba(42,52,80,0.25); }
.pct-apply-btn {
    padding: 5px 14px; border-radius: 5px; font-size: 10px; font-weight: 800;
    cursor: pointer; border: 1.5px solid rgba(0,255,185,0.4);
    background: linear-gradient(135deg, rgba(0,255,185,0.08), rgba(0,200,150,0.04));
    color: #00FFB9; transition: all 0.25s ease;
}
.pct-apply-btn:hover { background: rgba(0,255,185,0.15); box-shadow: 0 0 10px rgba(0,255,185,0.2); }
.pct-apply-sell {
    border-color: rgba(255,71,87,0.4); color: #FF6B6B;
    background: linear-gradient(135deg, rgba(255,71,87,0.08), rgba(200,50,60,0.04));
}
.pct-apply-sell:hover { background: rgba(255,71,87,0.15); box-shadow: 0 0 10px rgba(255,71,87,0.2); }
.pct-clear-btn {
    padding: 5px 12px; border-radius: 5px; font-size: 10px; font-weight: 700;
    cursor: pointer; border: 1px solid rgba(90,98,117,0.25);
    background: transparent; color: #5A6275; transition: all 0.2s;
}
.pct-clear-btn:hover { border-color: rgba(90,98,117,0.5); color: #8B92A8; }

/* ═══════════ Position Row Buttons ═══════════ */
.pos-btn {
    padding: 3px 8px; border: none; border-radius: 4px;
    cursor: pointer; font-size: 11px; font-weight: 600;
    transition: all 0.2s ease; margin-right: 2px;
}
.pos-btn-hedge {
    background: rgba(0,212,255,0.12); color: #00D4FF; font-size: 13px; padding: 2px 6px;
}
.pos-btn-hedge:hover { background: rgba(0,212,255,0.25); box-shadow: 0 0 8px rgba(0,212,255,0.3); }
.pos-btn-close { background: rgba(255,71,87,0.15); color: #FF4757; }
.pos-btn-close:hover { background: rgba(255,71,87,0.3); }
.pos-btn-add { background: rgba(167,139,250,0.15); color: #A78BFA; }
.pos-btn-add:hover { background: rgba(167,139,250,0.3); box-shadow: 0 0 8px rgba(167,139,250,0.3); }

/* ═══════════ Hedge Modal (V4.3.14) ═══════════ */
.hedge-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.7); z-index: 9999;
    justify-content: center; align-items: center;
    backdrop-filter: blur(4px);
}
.hedge-modal {
    background: #0e1320; border-radius: 14px; padding: 20px;
    max-width: 480px; width: 92%;
    border: 1px solid rgba(0,212,255,0.2);
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(0,212,255,0.06);
    animation: hedge-slide-in 0.3s ease-out;
}
@keyframes hedge-slide-in {
    from { opacity: 0; transform: translateY(-20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.hedge-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.hedge-title { color: #00D4FF; margin: 0; font-size: 16px; font-weight: 800; }
.hedge-close {
    width: 28px; height: 28px; border-radius: 6px; font-size: 18px;
    background: transparent; border: 1px solid rgba(90,98,117,0.2);
    color: #5A6275; cursor: pointer; transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
}
.hedge-close:hover { border-color: rgba(255,71,87,0.4); color: #FF6B6B; }

.hedge-pos-info {
    padding: 10px 12px; margin-bottom: 14px;
    background: rgba(8,12,22,0.8); border-radius: 8px;
    border-left: 3px solid #00D4FF;
    font-size: 12px; color: #C0C8E0;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.hedge-pos-symbol { font-weight: 800; font-size: 14px; color: #E8EAED; }
.hedge-pos-dir-buy { color: #00FFB9; font-weight: 700; }
.hedge-pos-dir-sell { color: #FF4757; font-weight: 700; }
.hedge-pos-lot { color: #C0C8E0; }
.hedge-pos-pnl { font-weight: 800; font-family: 'Courier New', monospace; }

.hedge-section {
    padding: 10px 12px; margin-bottom: 8px;
    background: rgba(14,19,32,0.6); border-radius: 8px;
    border: 1px solid rgba(42,52,80,0.3);
    transition: border-color 0.2s;
}
.hedge-section:hover { border-color: rgba(0,212,255,0.2); }
.hedge-section-close { background: transparent; border: none; text-align: center; padding: 8px 0; }

.hedge-section-title {
    font-size: 12px; font-weight: 800; color: #E8EAED;
    margin-bottom: 4px; display: flex; align-items: center; gap: 8px;
}
.hedge-badge {
    font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 3px;
}
.hedge-badge-safe { background: rgba(0,255,185,0.12); color: #00FFB9; border: 1px solid rgba(0,255,185,0.3); }
.hedge-badge-warn { background: rgba(255,215,0,0.1); color: #FFD700; border: 1px solid rgba(255,215,0,0.3); }

.hedge-desc { font-size: 10px; color: #5A6275; margin-bottom: 8px; }

.hedge-action-btn {
    padding: 7px 18px; border-radius: 6px; font-size: 12px; font-weight: 800;
    cursor: pointer; border: 1.5px solid; transition: all 0.25s ease;
}
.hedge-btn-lock {
    background: linear-gradient(135deg, rgba(0,212,255,0.1), rgba(0,180,220,0.05));
    border-color: rgba(0,212,255,0.4); color: #00D4FF;
}
.hedge-btn-lock:hover {
    background: rgba(0,212,255,0.2); box-shadow: 0 0 14px rgba(0,212,255,0.3);
    transform: translateY(-1px);
}
.hedge-btn-close {
    background: rgba(255,71,87,0.08); border-color: rgba(255,71,87,0.3); color: #FF4757;
}
.hedge-btn-close:hover {
    background: rgba(255,71,87,0.18); box-shadow: 0 0 12px rgba(255,71,87,0.25);
}

.hedge-partial-row {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.hedge-partial-btn {
    padding: 5px 12px; border-radius: 5px; font-size: 11px; font-weight: 700;
    cursor: pointer; border: 1px solid rgba(90,98,117,0.3);
    background: rgba(14,19,32,0.8); color: #C0C8E0;
    transition: all 0.2s ease;
}
.hedge-partial-btn:hover {
    border-color: rgba(0,212,255,0.4); color: #00D4FF;
    box-shadow: 0 0 8px rgba(0,212,255,0.15);
}
.hedge-partial-go {
    border-color: rgba(0,255,185,0.4); color: #00FFB9;
    background: rgba(0,255,185,0.06);
}
.hedge-partial-go:hover { background: rgba(0,255,185,0.15); }

.hedge-custom-input {
    width: 80px; padding: 4px 8px; border-radius: 5px; font-size: 11px;
    border: 1px solid rgba(90,98,117,0.25); background: rgba(14,19,32,0.8);
    color: #C0C8E0; text-align: center;
}
.hedge-custom-input:focus { border-color: rgba(0,212,255,0.5); outline: none; }

.hedge-mult-label { color: #8B92A8; font-size: 11px; font-weight: 700; }

/* ═══════════ Position Status Dot ═══════════ */
.pos-status-dot {
    display: inline-block;
    width: 12px; height: 12px; border-radius: 50%;
    transition: all 0.3s ease;
    cursor: help;
}

/* ═══════════ Trade History Page ═══════════ */

/* Stats Row */
.th-stats-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}
@media (max-width: 900px) { .th-stats-row { grid-template-columns: repeat(3, 1fr); } }

.th-stat-card {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; border-radius: 10px;
    background: rgba(14,19,32,0.85);
    border: 1px solid rgba(0,212,255,0.08);
    transition: all 0.3s ease;
}
.th-stat-card:hover {
    border-color: rgba(0,212,255,0.2);
    box-shadow: 0 4px 20px rgba(0,212,255,0.06);
    transform: translateY(-1px);
}
.th-stat-icon { font-size: 22px; }
.th-stat-label { font-size: 10px; color: #5A6275; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.th-stat-value { font-size: 18px; font-weight: 800; color: #E8EAED; margin-top: 2px; }

.th-stat-profit .th-stat-value { color: #00FFB9; }
.th-stat-fee .th-stat-value { color: #FF9F43; }
.th-stat-winrate .th-stat-value { color: #00D4FF; }
.th-stat-best .th-stat-value { color: #00E676; font-size: 14px; }
.th-stat-worst .th-stat-value { color: #FF4757; font-size: 14px; }
.th-stat-trades .th-stat-value { color: #A78BFA; }

/* Filter Bar */
.th-filter-bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.th-filter-group {
    display: flex; align-items: center; gap: 4px;
}
.th-filter-group label {
    font-size: 10px; color: #5A6275; font-weight: 600; white-space: nowrap;
}
.th-filter-group select {
    padding: 5px 8px; font-size: 11px; border-radius: 6px;
    background: rgba(8,12,22,0.8); color: #C0C8E0;
    border: 1px solid rgba(90,98,117,0.25);
    cursor: pointer; min-width: 80px;
}
.th-filter-group select:focus { border-color: rgba(0,212,255,0.4); outline: none; }

/* Day Group Header */
.th-day-header {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(8,12,22,0.9), rgba(14,19,32,0.8));
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid rgba(0,212,255,0.06);
    transition: all 0.25s ease;
    user-select: none;
}
.th-day-header:hover {
    border-color: rgba(0,212,255,0.15);
    background: linear-gradient(135deg, rgba(12,16,28,0.95), rgba(18,24,38,0.85));
}
.th-day-arrow {
    display: inline-block; font-size: 10px; color: #00D4FF;
    transition: transform 0.3s ease;
    width: 16px; text-align: center;
}
.th-day-arrow.open { transform: rotate(90deg); color: #00FFB9; }
.th-fold-hint {
    font-size: 9px; color: #5A6275; font-weight: 500;
    opacity: 0; transition: opacity 0.2s ease;
    white-space: nowrap;
}
.th-day-header:hover .th-fold-hint { opacity: 1; }
.th-day-label { font-size: 13px; font-weight: 700; color: var(--text); }
.th-day-date { font-size: 10px; color: #5A6275; }
.th-day-count {
    font-size: 9px; padding: 2px 7px; border-radius: 10px;
    background: rgba(167,139,250,0.12); color: #A78BFA; font-weight: 600;
}
.th-day-pnl { font-size: 13px; font-weight: 800; }
.th-day-pnl-bar {
    height: 3px; border-radius: 2px; flex: 1; max-width: 120px;
    background: rgba(90,98,117,0.15); overflow: hidden;
    position: relative;
}
.th-day-pnl-fill {
    height: 100%; border-radius: 2px;
    transition: width 0.5s ease;
}

/* Trade Table inside day group */
.th-day-body {
    overflow: hidden;
    transition: max-height 0.35s ease;
}
.th-day-body .table-container {
    border-radius: 0 0 8px 8px;
    border-top: none;
    margin: 0;
}
.th-day-body table { margin: 0; }
.th-day-body table thead th {
    font-size: 9px; padding: 6px 8px; white-space: nowrap;
    background: rgba(8,12,22,0.6);
}
.th-day-body table tbody td {
    font-size: 11px; padding: 7px 8px;
    border-bottom: 1px solid rgba(90,98,117,0.06);
}
.th-day-body table tbody tr:hover {
    background: rgba(0,212,255,0.03);
}

/* Entry badge */
.th-entry-badge {
    display: inline-block; padding: 1px 6px; border-radius: 3px;
    font-size: 9px; font-weight: 700; letter-spacing: 0.3px;
}
.th-entry-in { background: rgba(0,212,255,0.1); color: #00D4FF; }
.th-entry-out { background: rgba(255,159,67,0.1); color: #FF9F43; }

/* Type badge */
.th-type-buy { background: rgba(0,255,185,0.1); color: #00FFB9; }
.th-type-sell { background: rgba(255,71,87,0.1); color: #FF4757; }

/* Loading shimmer */
.th-loading {
    text-align: center; padding: 40px; color: #5A6275;
}
.th-loading-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: #00D4FF; margin: 0 3px;
    animation: th-pulse 1.4s infinite ease-in-out both;
}
.th-loading-dot:nth-child(1) { animation-delay: 0s; }
.th-loading-dot:nth-child(2) { animation-delay: 0.16s; }
.th-loading-dot:nth-child(3) { animation-delay: 0.32s; }
@keyframes th-pulse {
    0%, 80%, 100% { transform: scale(0.4); opacity: 0.3; }
    40% { transform: scale(1); opacity: 1; }
}

/* ═══════════════════════════════════════════
   V5.0 音符驱动·音乐辅助仪表盘
   ═══════════════════════════════════════════ */

/* Toggle switch */
.oc-switch { position: relative; display: inline-block; width: 36px; height: 20px; }
.oc-switch input { opacity: 0; width: 0; height: 0; }
.oc-switch-slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(42,52,80,0.8); border-radius: 20px; transition: 0.3s;
}
.oc-switch-slider::before {
    content: ''; position: absolute; height: 14px; width: 14px; left: 3px; bottom: 3px;
    background: #8892b0; border-radius: 50%; transition: 0.3s;
}
.oc-switch input:checked + .oc-switch-slider { background: rgba(0,212,255,0.4); box-shadow: 0 0 8px rgba(0,212,255,0.3); }
.oc-switch input:checked + .oc-switch-slider::before { transform: translateX(16px); background: #00D4FF; }

/* Music note bars */
.music-note-row {
    display: flex; align-items: center; gap: 8px;
}
.music-note-label {
    font-size: 11px; color: #8892b0; min-width: 95px; white-space: nowrap;
}
.music-note-bar {
    flex: 1; height: 8px; background: rgba(42,52,80,0.6); border-radius: 4px; overflow: hidden;
}
.music-note-fill {
    height: 100%; border-radius: 4px; transition: width 0.6s ease, background 0.4s;
    background: linear-gradient(90deg, #00D4FF, #00FFB9);
}
.music-note-fill.low { background: linear-gradient(90deg, #FF4757, #FF9F43); }
.music-note-fill.mid { background: linear-gradient(90deg, #FFD700, #00FFB9); }
.music-note-fill.high { background: linear-gradient(90deg, #00D4FF, #a855f7); }
.music-note-score {
    font-size: 10px; color: #64ffda; min-width: 35px; text-align: right; font-weight: 600;
}

/* Score list items */
.music-score-item {
    display: flex; align-items: center; gap: 6px; padding: 5px 8px;
    border-radius: 6px; margin-bottom: 3px; transition: background 0.2s;
    border-left: 3px solid transparent;
}
.music-score-item:hover { background: rgba(0,212,255,0.05); }
.music-score-item.can-trade { border-left-color: #00FFB9; }
.music-score-item.blocked { border-left-color: #FF4757; opacity: 0.6; }
.music-score-item .sym { color: #E8EAED; font-weight: 600; min-width: 70px; }
.music-score-item .dir { font-size: 10px; font-weight: 700; min-width: 40px; }
.music-score-item .dir.long { color: #00FFB9; }
.music-score-item .dir.short { color: #FF4757; }
.music-score-item .dir.none { color: #5A6275; }
.music-score-item .score-pill {
    padding: 1px 8px; border-radius: 10px; font-size: 10px; font-weight: 700;
    min-width: 36px; text-align: center;
}
.music-score-item .score-pill.noise { background: rgba(90,98,117,0.3); color: #5A6275; }
.music-score-item .score-pill.weak { background: rgba(255,71,87,0.15); color: #FF4757; }
.music-score-item .score-pill.medium { background: rgba(255,215,0,0.15); color: #FFD700; }
.music-score-item .score-pill.strong { background: rgba(0,255,185,0.15); color: #00FFB9; }
.music-score-item .strat { color: #8892b0; font-size: 10px; flex: 1; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Score glow animation */
@keyframes music-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(0,212,255,0.1); }
    50% { box-shadow: 0 0 15px rgba(0,212,255,0.3), 0 0 30px rgba(168,85,247,0.1); }
}
#musicDashboard.active { animation: music-glow 3s infinite; }

/* ═══════ SL/TP Manager Modal ═══════ */
.sltp-mgr-btn {
    background: linear-gradient(135deg, #0D47A1, #1565C0);
    color: #E0F7FA;
    border: 1px solid #1976D2;
    border-radius: 6px;
    padding: 4px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
}
.sltp-mgr-btn:hover { background: linear-gradient(135deg, #1565C0, #1E88E5); box-shadow: 0 0 10px rgba(25,118,210,.4); }

.sltp-modal-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(0,0,0,.65);
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(3px);
}
.sltp-modal {
    background: #151A2E;
    border: 1px solid #2A3050;
    border-radius: 12px;
    width: 580px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 8px 40px rgba(0,0,0,.6);
}
.sltp-modal-header {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid #2A3050;
    font-size: 15px; font-weight: 700; color: #E0E6F0;
}
.sltp-modal-body { padding: 12px 18px 18px; }

.sltp-badge {
    font-size: 10px; font-weight: 700;
    padding: 2px 8px; border-radius: 10px;
}
.sltp-badge-on { background: rgba(0,255,185,.15); color: #00FFB9; }
.sltp-badge-off { background: rgba(255,71,87,.15); color: #FF4757; }

.sltp-section {
    background: #1A2038;
    border: 1px solid #252D48;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
}
.sltp-section-title {
    font-size: 13px; font-weight: 700; color: #A0AEC0;
    margin-bottom: 8px;
}
.sltp-grid {
    display: grid;
    grid-template-columns: 80px 1fr 80px 1fr;
    gap: 6px 10px;
    align-items: center;
}
.sltp-grid label { font-size: 12px; color: #8892b0; text-align: right; }
.sltp-input {
    background: #0D1225; border: 1px solid #2A3050; border-radius: 5px;
    color: #E0E6F0; padding: 4px 8px; font-size: 12px; width: 100%;
    box-sizing: border-box;
}
.sltp-input:focus { border-color: #1976D2; outline: none; }
.sltp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sltp-toggle-label { font-size: 12px; color: #8892b0; display: flex; align-items: center; gap: 4px; cursor: pointer; }
.sltp-toggle-label input[type="checkbox"] { accent-color: #00FFB9; }

.sltp-btn {
    background: #252D48; color: #A0AEC0; border: 1px solid #2A3050;
    border-radius: 5px; padding: 5px 12px; font-size: 11px; font-weight: 600;
    cursor: pointer; transition: all .15s;
}
.sltp-btn:hover { background: #2D3660; color: #E0E6F0; }
.sltp-btn-save { background: #0D47A1; color: #E0F7FA; border-color: #1565C0; }
.sltp-btn-save:hover { background: #1565C0; }
.sltp-btn-add { background: #1B5E20; color: #A5D6A7; border-color: #2E7D32; }
.sltp-btn-add:hover { background: #2E7D32; }
.sltp-btn-scan { background: #0D47A1; color: #90CAF9; border-color: #1565C0; }
.sltp-btn-scan:hover { background: #1565C0; }
.sltp-btn-apply { background: #1B5E20; color: #A5D6A7; border-color: #2E7D32; }
.sltp-btn-apply:hover { background: #2E7D32; }
.sltp-btn-force { background: #B71C1C; color: #FFCDD2; border-color: #C62828; }
.sltp-btn-force:hover { background: #C62828; }

.sltp-override-list { max-height: 120px; overflow-y: auto; }
.sltp-override-row {
    display: flex; align-items: center; gap: 8px;
    padding: 3px 0; font-size: 12px; color: #A0AEC0;
    border-bottom: 1px solid #1E2540;
}
.sltp-override-row .sym { color: #E0E6F0; font-weight: 600; width: 80px; }
.sltp-override-row .val { color: #8892b0; }
.sltp-override-row .del-btn {
    margin-left: auto; color: #FF4757; cursor: pointer;
    background: none; border: none; font-size: 14px;
}

.sltp-scan-table { max-height: 200px; overflow-y: auto; font-size: 11px; }
.sltp-scan-table table { width: 100%; border-collapse: collapse; }
.sltp-scan-table th {
    text-align: left; padding: 4px 6px;
    color: #5A6275; font-weight: 600; font-size: 10px;
    border-bottom: 1px solid #252D48;
    position: sticky; top: 0; background: #1A2038;
}
.sltp-scan-table td { padding: 3px 6px; color: #A0AEC0; border-bottom: 1px solid #1E2540; }
.sltp-scan-table .status-missing { color: #FF4757; font-weight: 700; }
.sltp-scan-table .status-narrow { color: #FFD700; font-weight: 600; }
.sltp-scan-table .status-locked { color: #00FFB9; }
.sltp-scan-table .status-ok { color: #5A6275; }
.sltp-scan-table .arrow { color: #42A5F5; }
.sltp-scan-stats { font-size: 11px; color: #5A6275; font-weight: 400; margin-left: 8px; }

.sltp-info {
    font-size: 11px; color: #5A6275; margin-top: 6px;
    padding: 6px 8px; background: #0D1225; border-radius: 4px;
    border-left: 3px solid #1976D2;
}

/* ═══ 策略参数面板 ═══ */
.sp-mode-btn{padding:4px 12px;border:1px solid rgba(168,85,247,.2);border-radius:6px;background:rgba(14,19,32,.6);color:#5A6275;cursor:pointer;font-size:10px;font-weight:700;transition:all .15s;}
.sp-mode-btn:hover{color:#a855f7;border-color:rgba(168,85,247,.4);}
.sp-mode-btn.sp-mode-active{color:#fff;background:linear-gradient(135deg,#7c3aed,#a855f7);border-color:#a855f7;box-shadow:0 0 6px rgba(168,85,247,.25);}
.sp-row{display:flex;align-items:center;gap:6px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.03);}
.sp-row:last-child{border-bottom:none;}
.sp-label{width:70px;font-size:10px;color:#8B92A8;flex-shrink:0;font-weight:600;}
.sp-slider{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:rgba(168,85,247,.15);outline:none;transition:background .2s;}
.sp-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#a855f7);cursor:pointer;box-shadow:0 0 6px rgba(168,85,247,.4);transition:transform .15s;}
.sp-slider::-webkit-slider-thumb:hover{transform:scale(1.3);}
.sp-slider:disabled{opacity:.4;cursor:default;}
.sp-slider:disabled::-webkit-slider-thumb{cursor:default;transform:none;}
.sp-val{width:42px;text-align:right;font-size:10px;color:#a855f7;font-weight:700;font-family:'Consolas',monospace;}
.sp-auto-hint{font-size:9px;color:#3D4355;margin-left:2px;}

/* ═══ 信号周期切换按钮 ═══ */
.tf-btn{padding:2px 8px;border:1px solid rgba(168,85,247,.25);border-radius:4px;background:rgba(14,19,32,.6);color:#5A6275;cursor:pointer;font-size:10px;font-weight:700;transition:all .15s;line-height:1.4;}
.tf-btn:hover{color:#a855f7;border-color:rgba(168,85,247,.5);background:rgba(168,85,247,.08);}
.tf-btn.tf-active{color:#fff;background:linear-gradient(135deg,#7c3aed,#a855f7);border-color:#a855f7;box-shadow:0 0 8px rgba(168,85,247,.3);}

/* ═══ Radial Quick Menu (圆盘快捷键) ═══ */
#rdm-panel{position:fixed;z-index:8500;width:300px;height:300px;display:none;transition:opacity .3s;}
#rdm-panel svg{position:relative;z-index:1;}
#rdm-panel.rdm-active{display:block;animation:rdmIn .28s cubic-bezier(.34,1.56,.64,1) both;}
#rdm-panel.rdm-out{animation:rdmOut .18s ease-in forwards;}
.rdm-sector{cursor:pointer;transition:fill .12s,filter .15s;}
.rdm-lbl{pointer-events:none;fill:#d1d5db;font-weight:700;font-size:10px;font-family:system-ui,sans-serif;text-anchor:middle;dominant-baseline:central;}
.rdm-ico{pointer-events:none;font-size:17px;text-anchor:middle;dominant-baseline:central;}
.rdm-ctrl{position:absolute;top:-2px;right:-2px;display:flex;gap:2px;z-index:10;pointer-events:auto;}
.rdm-ctrl button{background:rgba(14,19,32,.8);border:1px solid rgba(168,85,247,.25);color:#5A6275;cursor:pointer;font-size:11px;padding:1px 5px;border-radius:4px;line-height:1.2;backdrop-filter:blur(4px);}
.rdm-ctrl button:hover{color:#a855f7;border-color:rgba(168,85,247,.5);}
.rdm-sub{position:absolute;background:rgba(14,19,32,.97);border:1px solid rgba(168,85,247,.3);border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.6);padding:6px;display:none;min-width:130px;font-size:11px;color:#E8EAED;z-index:8520;backdrop-filter:blur(8px);}
.rdm-sub button{display:block;width:100%;padding:5px 10px;margin:2px 0;border:none;border-radius:4px;cursor:pointer;font-size:11px;font-weight:600;color:#E8EAED;text-align:left;transition:background .12s,filter .12s;}
.rdm-sub button:hover{filter:brightness(1.3);}
@keyframes rdmIn{0%{transform:scale(0);opacity:0}70%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
@keyframes rdmOut{to{transform:scale(0);opacity:0}}
/* V6.1 流光环旋转 */
@keyframes rdmRingFlow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes rdmRingFlowRev{from{transform:rotate(360deg)}to{transform:rotate(0deg)}}
@keyframes rdmCenterPulse{0%,100%{stroke-opacity:0.2;stroke-width:2}50%{stroke-opacity:0.7;stroke-width:4}}
.rdm-ring-anim{transform-origin:150px 150px;animation:rdmRingFlow 5s linear infinite;}
.rdm-ring-anim-rev{transform-origin:150px 150px;animation:rdmRingFlowRev 7s linear infinite;}
.rdm-center-pulse{animation:rdmCenterPulse 2.5s ease-in-out infinite;}
.rdm-sector{transition:filter 0.15s ease;}
.rdm-lbl{fill:#e2e8f0;}

/* 音乐冲突闪烁 */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ═══════ Analytics Tab V6.4 ═══════ */
.an-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px;}
@media(max-width:900px){.an-kpi-row{grid-template-columns:repeat(2,1fr);}}
.an-kpi{background:rgba(14,19,32,0.9);border:1px solid var(--border);border-radius:10px;padding:12px 14px;text-align:center;position:relative;overflow:hidden;}
.an-kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:10px 10px 0 0;}
.an-kpi-pnl::before{background:linear-gradient(90deg,#00E676,#00BFA5);}
.an-kpi-sharpe::before{background:linear-gradient(90deg,#00D4FF,#2979FF);}
.an-kpi-winrate::before{background:linear-gradient(90deg,#FFD600,#FF9100);}
.an-kpi-pf::before{background:linear-gradient(90deg,#A855F7,#7C3AED);}
.an-kpi-dd::before{background:linear-gradient(90deg,#FF4757,#D63031);}
.an-kpi-trades::before{background:linear-gradient(90deg,#00B894,#00CEC9);}
.an-kpi-expect::before{background:linear-gradient(90deg,#FDCB6E,#E17055);}
.an-kpi-hold::before{background:linear-gradient(90deg,#74B9FF,#0984E3);}
.an-kpi-label{font-size:10px;color:#5A6275;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px;}
.an-kpi-value{font-size:18px;font-weight:800;color:#E8EAED;}

.an-strat-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid rgba(42,49,66,0.3);font-size:11px;transition:background 0.15s;}
.an-strat-item:hover{background:rgba(42,49,66,0.2);}
.an-strat-rank{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:10px;flex-shrink:0;}
.an-strat-rank.gold{background:linear-gradient(135deg,#FFD600,#FF9100);color:#000;}
.an-strat-rank.silver{background:linear-gradient(135deg,#B0BEC5,#78909C);color:#fff;}
.an-strat-rank.bronze{background:linear-gradient(135deg,#D7A86E,#A1887F);color:#fff;}
.an-strat-rank.normal{background:#1a2235;color:#5A6275;}
.an-strat-name{flex:1;font-weight:700;color:#E8EAED;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.an-strat-pnl{font-weight:800;min-width:60px;text-align:right;}
.an-strat-meta{font-size:10px;color:#5A6275;min-width:100px;text-align:right;}

.an-bar{height:6px;border-radius:3px;background:#1a2235;overflow:hidden;margin-top:2px;}
.an-bar-fill{height:100%;border-radius:3px;transition:width 0.5s ease;}

.an-sym-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid rgba(42,49,66,0.3);font-size:11px;}
.an-sym-name{font-weight:700;color:#00D4FF;min-width:70px;}
.an-sym-bar{flex:1;}

.an-daily-item{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid rgba(42,49,66,0.2);font-size:11px;}
.an-daily-date{font-weight:600;color:#8B92A8;min-width:80px;}
.an-daily-bar{flex:1;height:16px;position:relative;background:#1a2235;border-radius:3px;overflow:hidden;}
.an-daily-fill{height:100%;border-radius:3px;transition:width 0.4s;}
.an-daily-val{min-width:60px;text-align:right;font-weight:700;}

.an-hour-item{display:flex;align-items:center;gap:6px;padding:4px 10px;font-size:11px;}
.an-hour-label{min-width:30px;color:#5A6275;font-weight:600;font-size:10px;}
.an-hour-bar{flex:1;height:14px;background:#1a2235;border-radius:3px;overflow:hidden;}
.an-hour-fill{height:100%;border-radius:3px;}

.an-table{width:100%;border-collapse:collapse;font-size:11px;}
.an-table th{padding:6px 8px;text-align:left;font-size:10px;color:#5A6275;font-weight:700;border-bottom:1px solid #1a2235;text-transform:uppercase;letter-spacing:0.5px;position:sticky;top:0;background:#0e1320;}
.an-table td{padding:5px 8px;border-bottom:1px solid rgba(42,49,66,0.2);color:#E8EAED;}
.an-table tr:hover td{background:rgba(42,49,66,0.15);}

/* ═══ Analytics Fold Sections ═══ */
.an-fold-section { padding-bottom: 0 !important; }
.an-fold-header {
    display: flex; align-items: center; gap: 8px;
    cursor: pointer; user-select: none; padding: 2px 0;
    transition: background 0.15s;
}
.an-fold-header:hover { background: rgba(0,212,255,0.03); border-radius: 6px; }
.an-fold-chevron {
    display: inline-block; font-size: 13px; color: #5A6275;
    transition: transform 0.25s ease; flex-shrink: 0;
}
.an-fold-chevron.collapsed { transform: rotate(-90deg); }
.an-fold-body {
    overflow: hidden; max-height: 800px;
    transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.3s ease;
    opacity: 1; padding-top: 8px; padding-bottom: 10px;
}
.an-fold-body.collapsed {
    max-height: 0 !important; opacity: 0;
    padding-top: 0 !important; padding-bottom: 0 !important;
}

/* ═══ Analytics Merged Toolbar ═══ */
.an-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.an-toolbar-left { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.an-toolbar-left label {
    font-size: 10px; font-weight: 700; color: #5A6275;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.an-toolbar-left select, .an-toolbar-left input {
    padding: 4px 8px; font-size: 11px; background: #0e1320;
    border: 1px solid #2A3142; border-radius: 6px; color: #E8EAED;
    outline: none; transition: border-color 0.15s;
}
.an-toolbar-left select:focus, .an-toolbar-left input:focus { border-color: #00D4FF; }
.an-toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ── Symbol Detail Popover ── */
.sym-popover {
    position: fixed;
    z-index: 9000;
    width: 300px;
    background: #13161E;
    border: 1px solid #2A3142;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 1px rgba(0,212,255,0.15);
    padding: 0;
    font-size: 12px;
    overflow: hidden;
    animation: spFadeIn 0.15s ease-out;
}
@keyframes spFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.sym-pop-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px 6px;
    background: linear-gradient(135deg, rgba(0,212,255,0.06), transparent);
}
.sym-pop-name { font-size: 15px; font-weight: 800; color: #E8EAED; letter-spacing: 0.5px; }
.sym-pop-close {
    background: none; border: none; color: #5A6275; font-size: 14px;
    cursor: pointer; padding: 2px 6px; border-radius: 4px; transition: all 0.15s;
}
.sym-pop-close:hover { color: #FF4757; background: rgba(255,71,87,0.1); }
.sym-pop-prices {
    padding: 0 14px 8px;
    font-family: 'Cascadia Code', 'SF Mono', monospace;
    font-size: 12px; color: #8B92A8;
    display: flex; gap: 10px; align-items: center;
}
.sym-pop-divider { height: 1px; background: linear-gradient(90deg, transparent, #2A3142, transparent); margin: 0 10px; }
.sym-pop-section { padding: 10px 14px; min-height: 40px; }
.sym-pop-no-pos { color: #5A6275; font-size: 11px; text-align: center; padding: 12px 0; }
.sym-pop-pos-card {
    background: rgba(42,49,66,0.15);
    border-radius: 6px; padding: 8px 10px; margin-bottom: 6px;
}
.sym-pop-pos-card:last-child { margin-bottom: 0; }
.sym-pop-pos-dir { font-weight: 800; font-size: 12px; }
.sym-pop-pos-dir.buy { color: #00FFB9; }
.sym-pop-pos-dir.sell { color: #FF4757; }
.sym-pop-pos-prices { font-family: monospace; font-size: 11px; color: #8B92A8; margin: 3px 0; }
.sym-pop-pos-pnl { font-weight: 800; font-size: 16px; }
.sym-pop-pos-pnl.profit { color: #00FFB9; text-shadow: 0 0 8px rgba(0,255,185,0.2); }
.sym-pop-pos-pnl.loss { color: #FF4757; text-shadow: 0 0 8px rgba(255,71,87,0.2); }
.sym-pop-close-btn {
    display: inline-block; margin-top: 6px; padding: 3px 12px;
    background: rgba(255,71,87,0.12); color: #FF4757;
    border: 1px solid rgba(255,71,87,0.25); border-radius: 4px;
    font-size: 11px; font-weight: 700; cursor: pointer; transition: all 0.15s;
}
.sym-pop-close-btn:hover { background: rgba(255,71,87,0.25); }
.sym-pop-acct {
    padding: 8px 14px;
    display: flex; gap: 12px; flex-wrap: wrap;
    font-size: 10px; color: #5A6275;
}
.sym-pop-acct-item { display: flex; gap: 4px; align-items: baseline; }
.sym-pop-acct-val { color: #8B92A8; font-weight: 600; font-family: monospace; }

/* ── Bottom Bar Account Summary ── */
.acct-summary-bar {
    display: inline-flex; gap: 10px; align-items: center;
    font-size: 10px; color: #5A6275; margin-left: auto; padding-left: 8px;
    border-left: 1px solid rgba(42,49,66,0.4);
}
.acct-summary-bar .acct-s-item { white-space: nowrap; }
.acct-summary-bar .acct-s-val { color: #8B92A8; font-weight: 600; font-family: monospace; }

/* Price cell clickable for popover */
.price-bid-click { cursor: pointer; position: relative; }
.price-bid-click::after {
    content: '▾'; position: absolute; right: -2px; top: 50%; transform: translateY(-50%);
    font-size: 8px; color: #3A3F4B; transition: color 0.15s;
}
.price-bid-click:hover::after { color: #00D4FF; }
.price-bid-click:hover { color: #00D4FF !important; }

/* ── TF Buttons ── */
.tf-btn {
    padding: 4px 10px; font-size: 11px; font-weight: 700;
    background: rgba(42,49,66,0.4); color: #8B92A8; border: 1px solid rgba(42,49,66,0.6);
    border-radius: 4px; cursor: pointer; transition: all 0.15s;
}
.tf-btn:hover { background: rgba(0,212,255,0.1); color: #00D4FF; border-color: rgba(0,212,255,0.3); }
.tf-btn.active { background: rgba(0,212,255,0.15); color: #00D4FF; border-color: #00D4FF; box-shadow: 0 0 8px rgba(0,212,255,0.2); }

/* ── Chart LIVE Indicator ── */
.chart-live-dot { font-size: 10px; color: #FF4757; animation: livePulse 1.5s infinite; font-weight: 700; }
.chart-live-dot.connected { color: #00FFB9; }
@keyframes livePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ── Signal Pill (collapsed state) ── */
.sig-pill {
    position: absolute; top: 8px; right: 8px; z-index: 101;
    padding: 4px 10px; border-radius: 20px; cursor: pointer;
    background: rgba(11,14,23,0.55); backdrop-filter: blur(8px);
    border: 1px solid rgba(0,212,255,0.2);
    font-size: 11px; font-weight: 700; color: #E8EAED;
    transition: all 0.2s; user-select: none;
    display: flex; align-items: center; gap: 4px;
}
.sig-pill:hover { background: rgba(11,14,23,0.85); border-color: rgba(0,212,255,0.5); }
.sig-pill.sig-pill-buy { border-color: rgba(0,255,185,0.4); }
.sig-pill.sig-pill-sell { border-color: rgba(255,71,87,0.4); }
.sig-pill.sig-pill-hold { border-color: rgba(255,215,0,0.3); }

/* ── Signal Overlay Panel (expanded state) ── */
.sig-overlay {
    position: absolute; top: 8px; right: 8px; z-index: 100;
    width: 200px; padding: 8px 10px;
    background: rgba(11,14,23,0.45); backdrop-filter: blur(12px);
    border: 1px solid rgba(0,212,255,0.15); border-radius: 8px;
    font-size: 11px; color: #E8EAED;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transition: opacity 0.25s, transform 0.25s, background 0.2s;
    pointer-events: auto;
}
.sig-overlay:hover { background: rgba(11,14,23,0.88); }
.sig-overlay-collapsed { opacity: 0; transform: translateY(-8px) scale(0.95); pointer-events: none; display: none !important; }
.sig-overlay-expanded { opacity: 1; transform: translateY(0) scale(1); }
.sig-ov-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.sig-ov-title { font-size: 10px; color: #00D4FF; font-weight: 700; letter-spacing: 0.5px; }
.sig-ov-close { cursor: pointer; color: #5A6275; font-size: 13px; padding: 0 2px; transition: color 0.15s; }
.sig-ov-close:hover { color: #FF4757; }
.sig-ov-dir { font-size: 13px; font-weight: 800; }
.sig-ov-dir.long { color: #00FFB9; }
.sig-ov-dir.short { color: #FF4757; }
.sig-ov-dir.hold { color: #FFD700; }
.sig-ov-row { display: flex; justify-content: space-between; padding: 2px 0; font-size: 10px; color: #8B92A8; }
.sig-ov-row .sig-ov-val { color: #E8EAED; font-weight: 600; }
.sig-ov-action {
    margin-top: 5px; padding: 4px 0; text-align: center;
    background: rgba(0,255,185,0.1); border: 1px solid rgba(0,255,185,0.25);
    border-radius: 4px; color: #00FFB9; font-weight: 700; font-size: 11px;
    cursor: pointer; transition: all 0.15s;
}
.sig-ov-action:hover { background: rgba(0,255,185,0.2); }
.sig-ov-action.sell-action { background: rgba(255,71,87,0.1); border-color: rgba(255,71,87,0.25); color: #FF4757; }
.sig-ov-action.sell-action:hover { background: rgba(255,71,87,0.2); }

/* ── Chart Price Bar (bottom of chart) ── */
.chart-price-bar {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 90;
    display: flex; gap: 16px; align-items: center; justify-content: center;
    padding: 4px 12px;
    background: linear-gradient(0deg, rgba(11,14,23,0.9), rgba(11,14,23,0.5));
    font-size: 11px; font-family: 'Cascadia Code', monospace; color: #8B92A8;
}

/* ── Floating Order Panel ── */
.float-order-panel {
    position: absolute; bottom: 30px; right: 10px; z-index: 200;
    width: 300px;
    background: rgba(11,14,23,0.92); backdrop-filter: blur(16px);
    border: 1px solid rgba(0,212,255,0.12); border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    font-size: 12px; overflow: hidden;
    animation: spFadeIn 0.15s ease-out;
}
.fop-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; cursor: move;
    background: linear-gradient(135deg, rgba(0,212,255,0.08), transparent);
    font-weight: 700; color: #E8EAED; font-size: 12px;
    border-bottom: 1px solid rgba(42,49,66,0.4);
    user-select: none;
}
.fop-mode-btn {
    background: none; border: none; color: #5A6275; font-size: 12px;
    cursor: pointer; padding: 2px 5px; border-radius: 3px; transition: all 0.15s;
}
.fop-mode-btn:hover { color: #00D4FF; background: rgba(0,212,255,0.1); }
.fop-body { padding: 8px 12px; }
.fop-prices {
    display: flex; gap: 8px; align-items: center; justify-content: center;
    font-family: 'Cascadia Code', monospace; font-size: 16px; font-weight: 800;
    padding: 4px 0 8px;
}
.fop-bid { color: #00FFB9; }
.fop-ask { color: #FF4757; }
.fop-row {
    display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 11px; color: #8B92A8;
}
.fop-row label { min-width: 28px; font-weight: 600; }
.fop-row input {
    background: rgba(42,49,66,0.3); border: 1px solid rgba(42,49,66,0.6);
    color: #E8EAED; padding: 4px 6px; border-radius: 4px; font-size: 11px;
    font-family: monospace;
}
.fop-row input:focus { border-color: #00D4FF; outline: none; }
.fop-lot-btns { display: flex; gap: 2px; }
.fop-lot-btns button {
    padding: 3px 8px; font-size: 10px; background: rgba(42,49,66,0.4);
    color: #8B92A8; border: 1px solid rgba(42,49,66,0.6); border-radius: 3px;
    cursor: pointer; transition: all 0.12s;
}
.fop-lot-btns button:hover { color: #00D4FF; border-color: rgba(0,212,255,0.3); }
.fop-actions { display: flex; gap: 6px; margin-top: 6px; }
.fop-buy, .fop-sell {
    flex: 1; padding: 8px 0; border: none; border-radius: 6px;
    font-weight: 800; font-size: 12px; cursor: pointer; transition: all 0.15s;
}
.fop-buy {
    background: linear-gradient(135deg, rgba(0,255,185,0.2), rgba(0,230,118,0.15));
    color: #00FFB9; border: 1px solid rgba(0,255,185,0.3);
}
.fop-buy:hover { background: linear-gradient(135deg, rgba(0,255,185,0.35), rgba(0,230,118,0.25)); box-shadow: 0 0 12px rgba(0,255,185,0.3); }
.fop-sell {
    background: linear-gradient(135deg, rgba(255,71,87,0.2), rgba(239,83,80,0.15));
    color: #FF4757; border: 1px solid rgba(255,71,87,0.3);
}
.fop-sell:hover { background: linear-gradient(135deg, rgba(255,71,87,0.35), rgba(239,83,80,0.25)); box-shadow: 0 0 12px rgba(255,71,87,0.3); }
.fop-buy.signal-flash { animation: buyFlash 0.6s ease 3; }
.fop-sell.signal-flash { animation: sellFlash 0.6s ease 3; }
@keyframes buyFlash { 0%,100% { box-shadow: none; } 50% { box-shadow: 0 0 20px rgba(0,255,185,0.6); } }
@keyframes sellFlash { 0%,100% { box-shadow: none; } 50% { box-shadow: 0 0 20px rgba(255,71,87,0.6); } }
.fop-signal {
    margin-top: 6px; padding: 4px 8px; font-size: 10px; color: #8B92A8;
    background: rgba(42,49,66,0.15); border-radius: 4px; text-align: center;
}

/* ── Floating Order Mini Bar ── */
.fop-mini-bar {
    position: absolute; bottom: 30px; right: 10px; z-index: 200;
    display: flex; align-items: center; gap: 8px;
    padding: 5px 12px;
    background: rgba(11,14,23,0.88); backdrop-filter: blur(12px);
    border: 1px solid rgba(0,212,255,0.1); border-radius: 20px;
    font-size: 11px; font-weight: 700; color: #E8EAED;
    cursor: pointer; transition: all 0.15s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.fop-mini-bar:hover { border-color: rgba(0,212,255,0.3); }
.fop-mini-buy, .fop-mini-sell {
    padding: 3px 10px; border: none; border-radius: 10px; font-size: 10px;
    font-weight: 800; cursor: pointer; transition: all 0.12s;
}
.fop-mini-buy { background: rgba(0,255,185,0.2); color: #00FFB9; }
.fop-mini-buy:hover { background: rgba(0,255,185,0.35); }
.fop-mini-sell { background: rgba(255,71,87,0.2); color: #FF4757; }
.fop-mini-sell:hover { background: rgba(255,71,87,0.35); }

/* ═══ Music Panel Collapse ═══ */
.music-collapse-header:hover { background: rgba(0,212,255,0.04); border-radius: 8px; }
.music-collapse-chevron {
    display: inline-block; font-size: 14px; color: #5A6275;
    transition: transform 0.25s ease;
}
.music-collapse-chevron.collapsed { transform: rotate(-90deg); }
.music-collapse-body {
    overflow: hidden;
    max-height: 600px;
    transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.3s ease;
    opacity: 1;
}
.music-collapse-body.collapsed {
    max-height: 0 !important;
    opacity: 0;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ═══ Zoom Capture Layer (intercepts mouse during zoom mode) ═══ */
.zoom-capture-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 45; cursor: crosshair;
    background: transparent;
}

/* ═══ Zoom Box (rubber-band selection) ═══ */
.zoom-box {
    position: absolute; pointer-events: none; z-index: 50;
    border: 2px dashed rgba(0,212,255,0.7);
    background: rgba(0,212,255,0.06);
    border-radius: 3px;
    box-shadow: 0 0 12px rgba(0,212,255,0.15);
}
.zoom-mode-hint {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    z-index: 60; padding: 4px 14px; border-radius: 16px;
    background: rgba(0,212,255,0.15); border: 1px solid rgba(0,212,255,0.3);
    color: #00D4FF; font-size: 12px; font-weight: 700;
    backdrop-filter: blur(6px); animation: zoomHintPulse 1.5s infinite;
}
@keyframes zoomHintPulse {
    0%,100% { box-shadow: 0 0 6px rgba(0,212,255,0.2); }
    50%     { box-shadow: 0 0 16px rgba(0,212,255,0.5); }
}

/* ═══ Hotkey Hint Badge ═══ */
.hotkey-hint {
    position: absolute; bottom: 28px; right: 8px; z-index: 30;
    padding: 3px 10px; border-radius: 10px;
    background: rgba(11,14,23,0.75); border: 1px solid rgba(42,52,80,0.4);
    color: #5A6275; font-size: 9px; backdrop-filter: blur(4px);
    opacity: 0.6; transition: opacity 0.2s;
}
.hotkey-hint:hover { opacity: 1; color: #8B92A8; }
.hotkey-hint span {
    display: inline-block; padding: 0 3px; margin: 0 1px;
    background: rgba(42,52,80,0.5); border-radius: 3px;
    color: #00D4FF; font-weight: 700; font-family: monospace;
}

/* ═══ Grab cursor for Space+drag pan ═══ */
#klineContainer.grab-mode { cursor: grab !important; }
#klineContainer.grabbing-mode { cursor: grabbing !important; }
#klineContainer.zoom-cursor { cursor: crosshair !important; }

/* ═══ Chart Widget: fill available widget-body height via flex ═══ */
[gs-id="w-chart"] .widget-body {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
[gs-id="w-chart"] .widget-body > .card {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
[gs-id="w-chart"] .oc-toolbar { flex-shrink: 0; }
[gs-id="w-chart"] #chartWrapper {
    flex: 1;
    min-height: 200px;
    height: auto !important;
}
[gs-id="w-chart"] #klineContainer {
    width: 100%;
    height: 100%;
}

/* ═══ Quick trade flash ═══ */
@keyframes quickTradeFlash {
    0%   { box-shadow: 0 0 0 rgba(0,255,185,0); }
    30%  { box-shadow: 0 0 30px rgba(0,255,185,0.6); }
    100% { box-shadow: 0 0 0 rgba(0,255,185,0); }
}
@keyframes quickSellFlash {
    0%   { box-shadow: 0 0 0 rgba(255,71,87,0); }
    30%  { box-shadow: 0 0 30px rgba(255,71,87,0.6); }
    100% { box-shadow: 0 0 0 rgba(255,71,87,0); }
}
.quick-buy-flash { animation: quickTradeFlash 0.5s ease-out; }
.quick-sell-flash { animation: quickSellFlash 0.5s ease-out; }

/* ═══ Risk Level Button + Panel (V6.7) ═══ */
.risk-level-wrapper { position: relative; }
.risk-level-btn {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 14px; border-radius: var(--radius-pill);
    border: 1px solid rgba(34,197,94,0.5);
    background: rgba(34,197,94,0.12);
    color: #22c55e; font-size: 12px; font-weight: 700;
    cursor: pointer; transition: var(--transition);
    white-space: nowrap;
}
.risk-level-btn:hover {
    background: rgba(34,197,94,0.22);
    box-shadow: 0 0 12px rgba(34,197,94,0.25);
}
.risk-level-btn[data-level="lockdown"] { border-color: rgba(239,68,68,0.6); background: rgba(239,68,68,0.15); color: #ef4444; }
.risk-level-btn[data-level="strict"]   { border-color: rgba(249,115,22,0.6); background: rgba(249,115,22,0.15); color: #f97316; }
.risk-level-btn[data-level="normal"]   { border-color: rgba(34,197,94,0.5);  background: rgba(34,197,94,0.12);  color: #22c55e; }
.risk-level-btn[data-level="relaxed"]  { border-color: rgba(59,130,246,0.6); background: rgba(59,130,246,0.15); color: #3b82f6; }
.risk-level-btn[data-level="off"]      { border-color: rgba(168,85,247,0.6); background: rgba(168,85,247,0.15); color: #a855f7; }

.risk-level-panel {
    display: none; position: absolute; top: calc(100% + 8px); right: 0;
    width: 320px; z-index: 999;
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), var(--glow-cyan);
    padding: 0; overflow: hidden;
}
.risk-level-panel.open { display: block; animation: rlpSlideIn 0.2s ease-out; }
@keyframes rlpSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.rlp-header {
    padding: 12px 16px; font-size: 13px; font-weight: 700;
    color: var(--text); border-bottom: 1px solid var(--border);
    background: rgba(0,212,255,0.04);
}
.rlp-levels { padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.rlp-level-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: var(--radius-sm);
    cursor: pointer; transition: var(--transition);
    border: 1px solid transparent;
}
.rlp-level-item:hover { background: rgba(255,255,255,0.04); }
.rlp-level-item.active {
    border-color: var(--accent);
    background: rgba(0,212,255,0.06);
}
.rlp-level-dot {
    width: 10px; height: 10px; border-radius: 50%;
    flex-shrink: 0; box-shadow: 0 0 6px currentColor;
}
.rlp-level-info { flex: 1; min-width: 0; }
.rlp-level-name { font-size: 13px; font-weight: 700; color: var(--text); }
.rlp-level-desc { font-size: 10px; color: var(--text-sub); margin-top: 1px; }
.rlp-level-check {
    font-size: 14px; opacity: 0; transition: opacity 0.15s;
}
.rlp-level-item.active .rlp-level-check { opacity: 1; }

.rlp-info {
    padding: 10px 16px; border-top: 1px solid var(--border);
    font-size: 10px; color: var(--text-muted); line-height: 1.6;
}
.rlp-info-row { display: flex; justify-content: space-between; }
.rlp-info-val { color: var(--text-sub); font-weight: 600; }
.rlp-footer {
    padding: 8px 12px; border-top: 1px solid var(--border);
    display: flex; justify-content: center;
}
.rlp-restore {
    font-size: 11px !important; padding: 4px 12px !important;
    color: var(--text-sub) !important;
}
.rlp-restore:hover { color: var(--accent) !important; }

@keyframes rlpPulse {
    0%, 100% { box-shadow: 0 0 0 0 currentColor; }
    50%      { box-shadow: 0 0 8px 2px currentColor; }
}
.risk-level-btn.pulse { animation: rlpPulse 1.5s ease-in-out 3; }

/* ═══ User Menu Button + Panel ═══ */
.user-menu-wrapper { position: relative; }
.user-menu-btn {
    display: flex; align-items: center; gap: 4px;
    padding: 5px 12px; border-radius: var(--radius-pill);
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: var(--text-sub); font-size: 12px; font-weight: 600;
    cursor: pointer; transition: var(--transition);
    white-space: nowrap;
}
.user-menu-btn:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text);
}
.user-menu-panel {
    display: none; position: absolute; top: calc(100% + 8px); right: 0;
    width: 200px; z-index: 999;
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    overflow: hidden;
}
.user-menu-panel.open { display: block; animation: rlpSlideIn 0.2s ease-out; }
.ump-user {
    padding: 12px 16px;
    font-size: 13px; font-weight: 700;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}
.ump-info {
    padding: 8px 16px;
    font-size: 10px;
    color: var(--text-muted);
}
.ump-logout {
    padding: 10px 16px;
    font-size: 12px;
    color: #ef4444;
    cursor: pointer;
    border-top: 1px solid var(--border);
    transition: var(--transition);
}
.ump-logout:hover {
    background: rgba(239,68,68,0.08);
}

/* ═══════════════════════════════════════════════════════════════
   Gridstack — Draggable Modular Layout
   ═══════════════════════════════════════════════════════════════ */

/* ── Layout Toolbar ── */
.layout-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 10px;
    background: linear-gradient(135deg, rgba(10,16,30,0.97) 0%, rgba(16,22,38,0.95) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 8px;
    flex-wrap: wrap;
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 900;
}
.lt-left, .lt-right {
    display: flex;
    align-items: center;
    gap: 4px;
}
.lt-sep {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 4px;
}
.lt-group {
    display: flex;
    align-items: center;
    gap: 4px;
}
.lt-divider {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 4px;
}
.lt-label {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
    margin-right: 2px;
}
.lt-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-sub);
    background: rgba(8,12,22,0.6);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.lt-btn:hover {
    color: var(--accent);
    border-color: rgba(0,212,255,0.4);
    background: rgba(0,212,255,0.06);
    box-shadow: 0 0 10px rgba(0,212,255,0.08);
}
.lt-btn.active, .lt-btn.lt-btn-active {
    color: var(--accent);
    border-color: rgba(0,212,255,0.5);
    background: rgba(0,212,255,0.1);
    box-shadow: 0 0 12px rgba(0,212,255,0.1);
}
.lt-btn svg, .lt-btn i {
    width: 14px;
    height: 14px;
}
.lt-btn-danger:hover {
    color: var(--red);
    border-color: rgba(255,71,87,0.4);
    background: rgba(255,71,87,0.06);
}
.lt-btn-tidy {
    color: var(--green);
    border-color: rgba(0,255,185,0.3);
}
.lt-btn-tidy:hover {
    color: var(--green);
    border-color: rgba(0,255,185,0.5);
    background: rgba(0,255,185,0.08);
}
.lt-btn-green:hover {
    color: var(--green);
    border-color: rgba(0,255,185,0.4);
    background: rgba(0,255,185,0.06);
}
.lt-spacer { flex: 1; }

/* ── Gridstack Container Overrides ── */
.grid-stack {
    min-height: 400px;
}
.grid-stack-item {
    transition: none !important;
}
.grid-stack-item.ui-draggable-dragging {
    z-index: 9000 !important;
    opacity: 0.92;
}
.grid-stack-item > .grid-stack-item-content {
    overflow: hidden;
    border-radius: var(--radius);
}
.grid-stack-placeholder > .placeholder-content {
    border: 2px dashed rgba(0,212,255,0.35) !important;
    border-radius: var(--radius) !important;
    background: rgba(0,212,255,0.04) !important;
}
.grid-stack-item > .ui-resizable-handle {
    opacity: 0;
    transition: opacity 0.2s;
}
.grid-stack-item:hover > .ui-resizable-handle {
    opacity: 0.6;
}

/* ── Widget Panel ── */
.widget-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3), var(--glow-cyan);
    transition: box-shadow var(--transition);
}
.widget-panel:hover {
    box-shadow: 0 6px 28px rgba(0,0,0,0.4), 0 0 16px rgba(0,212,255,0.08);
}

/* ── Widget Header ── */
.widget-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    min-height: 34px;
    background: linear-gradient(135deg, rgba(10,16,30,0.95) 0%, rgba(20,26,42,0.9) 100%);
    border-bottom: 1px solid var(--border);
    user-select: none;
    flex-shrink: 0;
}

/* Header color variants — top border accent */
.widget-header.wh-cyan    { border-top: 2px solid var(--accent); }
.widget-header.wh-green   { border-top: 2px solid var(--green); }
.widget-header.wh-purple  { border-top: 2px solid var(--purple); }
.widget-header.wh-yellow  { border-top: 2px solid var(--gold); }
.widget-header.wh-red     { border-top: 2px solid var(--red); }

/* ── Widget Drag Handle ── */
.widget-drag-handle {
    cursor: grab;
    display: flex;
    align-items: center;
    padding: 2px;
    border-radius: 3px;
    transition: var(--transition);
    color: var(--text-muted);
}
.widget-drag-handle:hover {
    color: var(--accent);
    background: rgba(0,212,255,0.08);
}
.widget-drag-handle:active {
    cursor: grabbing;
}
.wh-grip {
    width: 14px !important;
    height: 14px !important;
}

/* ── Widget Title ── */
.widget-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* ── Widget Header Icon (Lucide) ── */
.wh-icon {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
}

/* Neon glow icon effects */
.icon-glow-cyan {
    color: var(--accent);
    filter: drop-shadow(0 0 4px rgba(0,212,255,0.5)) drop-shadow(0 0 8px rgba(0,212,255,0.2));
}
.icon-glow-green {
    color: var(--green);
    filter: drop-shadow(0 0 4px rgba(0,255,185,0.5)) drop-shadow(0 0 8px rgba(0,255,185,0.2));
}
.icon-glow-purple {
    color: var(--purple);
    filter: drop-shadow(0 0 4px rgba(168,85,247,0.5)) drop-shadow(0 0 8px rgba(168,85,247,0.2));
}
.icon-glow-yellow {
    color: var(--gold);
    filter: drop-shadow(0 0 4px rgba(255,215,0,0.5)) drop-shadow(0 0 8px rgba(255,215,0,0.2));
}
.icon-glow-red {
    color: var(--red);
    filter: drop-shadow(0 0 4px rgba(255,71,87,0.5)) drop-shadow(0 0 8px rgba(255,71,87,0.2));
}

/* ── Widget Controls (minimize / maximize) ── */
.widget-controls {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}
.wctl-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
}
.wctl-btn:hover {
    color: var(--text);
    background: rgba(255,255,255,0.06);
}
.wctl-btn svg, .wctl-btn i {
    width: 13px !important;
    height: 13px !important;
}

/* ── Widget Body ── */
.widget-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
}
/* Remove card margin inside widget body */
.widget-body > .card {
    border-radius: 0;
    border: none;
    box-shadow: none;
}
.widget-body > .card:first-child {
    margin-top: 0;
}

/* Widget body scrollbar */
.widget-body::-webkit-scrollbar { width: 4px; }
.widget-body::-webkit-scrollbar-track { background: transparent; }
.widget-body::-webkit-scrollbar-thumb {
    background: rgba(0,212,255,0.15);
    border-radius: 4px;
}
.widget-body::-webkit-scrollbar-thumb:hover {
    background: rgba(0,212,255,0.3);
}

/* ── Widget Picker Panel ── */
.widget-picker {
    display: none;
    position: fixed;
    top: 80px;
    right: 20px;
    width: 260px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 20px rgba(0,212,255,0.05);
    backdrop-filter: blur(16px);
    z-index: 9500;
    padding: 8px;
}
.widget-picker.open { display: block; animation: rlpSlideIn 0.15s ease-out; }
.wp-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    font-size: 11px;
    color: var(--text-sub);
}
.wp-item:hover {
    background: rgba(0,212,255,0.06);
    color: var(--text);
}
.wp-item svg, .wp-item i {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.wp-item-name { flex: 1; font-weight: 600; }
.wp-item-toggle {
    width: 28px; height: 16px;
    border-radius: 8px;
    background: var(--border);
    position: relative;
    transition: var(--transition);
}
.wp-item-toggle.on {
    background: var(--accent);
}
.wp-item-toggle::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #fff;
    transition: var(--transition);
}
.wp-item-toggle.on::after {
    left: 14px;
}

/* ── Smart Edge Resize Visual Feedback ── */
/* Resize handle areas — visible on hover */
.grid-stack-item > .ui-resizable-handle,
.grid-stack-item > .ui-resizable-e,
.grid-stack-item > .ui-resizable-w,
.grid-stack-item > .ui-resizable-n,
.grid-stack-item > .ui-resizable-s,
.grid-stack-item > .ui-resizable-se,
.grid-stack-item > .ui-resizable-sw,
.grid-stack-item > .ui-resizable-ne,
.grid-stack-item > .ui-resizable-nw {
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 10;
}
.grid-stack-item:hover > .ui-resizable-handle,
.grid-stack-item:hover > .ui-resizable-e,
.grid-stack-item:hover > .ui-resizable-w,
.grid-stack-item:hover > .ui-resizable-n,
.grid-stack-item:hover > .ui-resizable-s {
    opacity: 1;
}
/* East/West edge indicators */
.grid-stack-item > .ui-resizable-e,
.grid-stack-item > .ui-resizable-w {
    width: 6px !important;
    background: linear-gradient(to bottom, transparent 20%, rgba(0,212,255,0.3) 50%, transparent 80%);
    cursor: col-resize !important;
}
.grid-stack-item > .ui-resizable-e { right: -3px !important; }
.grid-stack-item > .ui-resizable-w { left: -3px !important; }
/* North/South edge indicators */
.grid-stack-item > .ui-resizable-n,
.grid-stack-item > .ui-resizable-s {
    height: 6px !important;
    background: linear-gradient(to right, transparent 20%, rgba(0,212,255,0.3) 50%, transparent 80%);
    cursor: row-resize !important;
}
.grid-stack-item > .ui-resizable-n { top: -3px !important; }
.grid-stack-item > .ui-resizable-s { bottom: -3px !important; }
/* Corner handles */
.grid-stack-item > .ui-resizable-se,
.grid-stack-item > .ui-resizable-sw,
.grid-stack-item > .ui-resizable-ne,
.grid-stack-item > .ui-resizable-nw {
    width: 10px !important;
    height: 10px !important;
    background: rgba(0,212,255,0.4);
    border-radius: 2px;
}
.grid-stack-item > .ui-resizable-se { right: -3px !important; bottom: -3px !important; cursor: se-resize !important; }
.grid-stack-item > .ui-resizable-sw { left: -3px !important; bottom: -3px !important; cursor: sw-resize !important; }
.grid-stack-item > .ui-resizable-ne { right: -3px !important; top: -3px !important; cursor: ne-resize !important; }
.grid-stack-item > .ui-resizable-nw { left: -3px !important; top: -3px !important; cursor: nw-resize !important; }
/* Hover: edges glow brighter */
.grid-stack-item > .ui-resizable-e:hover,
.grid-stack-item > .ui-resizable-w:hover {
    background: linear-gradient(to bottom, transparent 10%, rgba(0,212,255,0.6) 50%, transparent 90%);
    box-shadow: 0 0 8px rgba(0,212,255,0.4);
}
.grid-stack-item > .ui-resizable-n:hover,
.grid-stack-item > .ui-resizable-s:hover {
    background: linear-gradient(to right, transparent 10%, rgba(0,212,255,0.6) 50%, transparent 90%);
    box-shadow: 0 0 8px rgba(0,212,255,0.4);
}
/* Active resizing state — widget border glows */
.grid-stack-item.gs-resizing > .grid-stack-item-content {
    border-color: var(--accent) !important;
    box-shadow: 0 0 12px rgba(0,212,255,0.4), 0 0 24px rgba(0,212,255,0.15) !important;
}
/* Coupled neighbor flash — brief glow when neighbor is adjusted */
.grid-stack-item.gs-coupled-flash > .grid-stack-item-content {
    border-color: var(--accent) !important;
    box-shadow: 0 0 16px rgba(0,212,255,0.5), 0 0 30px rgba(0,212,255,0.2) !important;
    transition: box-shadow 0.15s ease-out, border-color 0.15s ease-out;
}

/* ── Lucide Inline Icon Utilities ── */
.lc { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 3px; flex-shrink: 0; }
.lc-sm { width: 12px; height: 12px; }
.lc-lg { width: 18px; height: 18px; }
.lc-xl { width: 22px; height: 22px; }
/* Neon glow color variants */
.lc-cyan   { color: var(--accent); filter: drop-shadow(0 0 4px rgba(0,212,255,0.6)); }
.lc-green  { color: #00FFB9; filter: drop-shadow(0 0 4px rgba(0,255,185,0.6)); }
.lc-red    { color: #FF4757; filter: drop-shadow(0 0 4px rgba(255,71,87,0.6)); }
.lc-yellow { color: #FFD700; filter: drop-shadow(0 0 4px rgba(255,215,0,0.6)); }
.lc-purple { color: #c084fc; filter: drop-shadow(0 0 4px rgba(192,132,252,0.6)); }
.lc-orange { color: #FF9F43; filter: drop-shadow(0 0 4px rgba(255,159,67,0.6)); }
.lc-pink   { color: #f472b6; filter: drop-shadow(0 0 4px rgba(244,114,182,0.6)); }
.lc-teal   { color: #5FFFDD; filter: drop-shadow(0 0 4px rgba(95,255,221,0.6)); }
.lc-blue   { color: #60a5fa; filter: drop-shadow(0 0 4px rgba(96,165,250,0.6)); }
.lc-white  { color: #E8EAED; filter: drop-shadow(0 0 3px rgba(232,234,237,0.4)); }

/* ── Widget Detach & Float ── */
/* Floating state */
.grid-stack-item.gs-float-detached {
    position: fixed !important;
    z-index: 9999 !important;
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 16px rgba(0,212,255,0.15);
    transition: box-shadow 0.2s ease;
    min-width: 200px;
    min-height: 120px;
}
.gs-float-detached > .grid-stack-item-content {
    border: 1.5px solid var(--accent) !important;
    box-shadow: inset 0 0 12px rgba(0,212,255,0.06);
}
/* Detached header — show dock button, change cursor */
.gs-float-detached .widget-header {
    cursor: move !important;
}
.gs-float-detached .widget-dock-btn { display: inline-flex !important; }
.gs-float-detached .widget-drag-handle { display: none; }
/* Dock button (hidden by default) */
.widget-dock-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border: none; background: rgba(0,212,255,0.12);
    color: var(--accent); border-radius: 4px;
    cursor: pointer; font-size: 13px;
    transition: var(--transition);
    margin-right: 4px;
}
.widget-dock-btn:hover { background: rgba(0,212,255,0.25); }
/* Float resize handles (CSS native) */
.gs-float-detached > .grid-stack-item-content {
    resize: both;
    overflow: auto;
}
/* Corner resize grips */
.gs-float-grip {
    position: absolute; width: 14px; height: 14px;
    background: rgba(0,212,255,0.3); border-radius: 2px;
    z-index: 10; opacity: 0; transition: opacity 0.2s;
}
.gs-float-detached:hover .gs-float-grip { opacity: 1; }
.gs-float-grip-nw { top: -4px; left: -4px; cursor: nw-resize; }
.gs-float-grip-ne { top: -4px; right: -4px; cursor: ne-resize; }
.gs-float-grip-sw { bottom: -4px; left: -4px; cursor: sw-resize; }
.gs-float-grip-se { bottom: -4px; right: -4px; cursor: se-resize; }
/* Edge resize strips */
.gs-float-edge {
    position: absolute; z-index: 9; opacity: 0; transition: opacity 0.2s;
    background: transparent;
}
.gs-float-detached:hover .gs-float-edge { opacity: 1; }
.gs-float-edge-n { top: -4px; left: 14px; right: 14px; height: 8px; cursor: n-resize; }
.gs-float-edge-s { bottom: -4px; left: 14px; right: 14px; height: 8px; cursor: s-resize; }
.gs-float-edge-w { left: -4px; top: 14px; bottom: 14px; width: 8px; cursor: w-resize; }
.gs-float-edge-e { right: -4px; top: 14px; bottom: 14px; width: 8px; cursor: e-resize; }
/* Long-press pulse hint */
@keyframes gs-longpress-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(0,212,255,0.3); }
    50% { box-shadow: 0 0 0 6px rgba(0,212,255,0); }
}
.gs-longpress-hint .widget-header {
    animation: gs-longpress-pulse 0.6s ease-in-out;
}
/* Detach pop animation */
@keyframes gs-float-pop {
    0% { transform: scale(0.95); opacity: 0.8; }
    60% { transform: scale(1.02); }
    100% { transform: scale(1); opacity: 1; }
}
.gs-float-popping { animation: gs-float-pop 0.25s ease-out; }
/* Dock-back animation */
@keyframes gs-float-dock {
    0% { transform: scale(1); }
    100% { transform: scale(0.96); opacity: 0.7; }
}
.gs-float-docking { animation: gs-float-dock 0.2s ease-in forwards; }

/* ── Widget Popout State ── */
.gs-popped-out {
    position: relative;
}
.gs-popped-out > .grid-stack-item-content {
    opacity: 0.35;
    pointer-events: none;
    filter: grayscale(0.5);
    transition: opacity 0.3s, filter 0.3s;
}
.gs-popped-out::after {
    content: '⧉ 已弹出到外部窗口';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(15, 23, 42, 0.85);
    color: #67E8F9;
    border: 1px solid rgba(103, 232, 249, 0.25);
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    z-index: 10;
    pointer-events: none;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.widget-popout-btn {
    background: rgba(103, 232, 249, 0.08);
    color: #67E8F9;
    border: 1px solid rgba(103, 232, 249, 0.2);
    border-radius: 5px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    line-height: 1.4;
    letter-spacing: 0.3px;
}
.widget-popout-btn:hover {
    background: rgba(103, 232, 249, 0.18);
    border-color: #67E8F9;
    color: #fff;
    box-shadow: 0 0 10px rgba(103, 232, 249, 0.2);
    transform: scale(1.05);
}
/* Float button — amber/orange to distinguish from cyan popout */
.widget-float-btn {
    background: rgba(251, 191, 36, 0.07) !important;
    color: #FBB724 !important;
    border-color: rgba(251, 191, 36, 0.2) !important;
    padding: 2px 6px !important;
}
.widget-float-btn:hover {
    background: rgba(251, 191, 36, 0.2) !important;
    border-color: #FBB724 !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.25) !important;
    transform: scale(1.05);
}
/* Hide float btn in popup window mode */
.widget-float-btn { display: inline-flex; align-items: center; gap: 2px; }

/* ══ Widget Button Group (float / popout / dock) ══
   Injected by JS into every widget header flex row.
   Uses inline SVGs — no Lucide dependency.
════════════════════════════════════════════════════ */
.wg-btn-group {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    padding: 0 2px;
}
.wg-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    height: 20px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    line-height: 1;
    user-select: none;
}
.wg-btn svg {
    flex-shrink: 0;
    opacity: 0.8;
}
.wg-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.25);
}
/* Float — amber */
.wg-btn-float {
    background: rgba(251,191,36,0.08);
    color: #F59E0B;
    border-color: rgba(251,191,36,0.2);
}
.wg-btn-float:hover {
    background: rgba(251,191,36,0.22);
    border-color: #F59E0B;
    color: #fff;
    box-shadow: 0 0 8px rgba(251,191,36,0.3);
}
/* Popout — cyan */
.wg-btn-pop {
    background: rgba(103,232,249,0.08);
    color: #67E8F9;
    border-color: rgba(103,232,249,0.2);
}
.wg-btn-pop:hover {
    background: rgba(103,232,249,0.22);
    border-color: #67E8F9;
    color: #fff;
    box-shadow: 0 0 8px rgba(103,232,249,0.3);
}
/* Combo (chart+positions) — green */
.wg-btn-combo {
    background: rgba(52,211,153,0.08);
    color: #34D399;
    border-color: rgba(52,211,153,0.2);
}
.wg-btn-combo:hover {
    background: rgba(52,211,153,0.22);
    border-color: #34D399;
    color: #fff;
    box-shadow: 0 0 8px rgba(52,211,153,0.3);
}
/* Dock — hidden by default, shown only when floating */
.wg-btn-dock {
    display: none;
    background: rgba(103,232,249,0.08);
    color: #67E8F9;
    border-color: rgba(103,232,249,0.2);
}
.gs-float-detached .wg-btn-dock {
    display: inline-flex;
}
/* Hide float/popout when detached */
.gs-float-detached .wg-btn-float,
.gs-float-detached .wg-btn-pop,
.gs-float-detached .wg-btn-combo {
    display: none;
}

/* ── Chart Fullscreen Mode ── */
/* Container clips any partial-row overflow at bottom */
.gs-chart-fullscreen {
    overflow: hidden !important;
}
.chart-fs-exit-btn {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 10000;
    background: rgba(15, 23, 42, 0.92);
    color: #67e8f9;
    border: 1px solid rgba(103, 232, 249, 0.3);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 12px rgba(103,232,249,0.15);
    transition: all 0.2s;
    animation: chartFsExitIn 0.3s ease-out;
}
.chart-fs-exit-btn:hover {
    background: rgba(103, 232, 249, 0.15);
    color: #fff;
    border-color: #67e8f9;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5), 0 0 20px rgba(103,232,249,0.3);
    transform: scale(1.05);
}
@keyframes chartFsExitIn {
    0% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ── Hide old tab elements (safety fallback) ── */
.tabs, .tab, .tab-content {
    display: none !important;
}

/* ══════════════════════════════════════
   SEE 结构入场引擎 Widget
   ══════════════════════════════════════ */
.see-mode-btn {
    padding: 4px 10px; border-radius: 12px; font-size: 10px; font-weight: 700;
    background: rgba(88,101,127,0.15); color: #8892b0;
    border: 1px solid rgba(88,101,127,0.3); cursor: pointer;
    transition: all 0.15s;
}
.see-mode-btn:hover { background: rgba(0,212,255,0.12); color: #00D4FF; border-color: rgba(0,212,255,0.35); }
.see-mode-btn.active { background: rgba(0,230,118,0.15); color: #00E676; border-color: rgba(0,230,118,0.4); }

.see-intent-row {
    display: flex; align-items: center; gap: 8px; padding: 6px 8px;
    border-radius: 6px; background: rgba(0,212,255,0.04);
    border: 1px solid rgba(0,212,255,0.1); margin-bottom: 4px;
    font-size: 11px;
}
.see-intent-sym  { font-weight: 800; color: #00D4FF; min-width: 72px; }
.see-intent-dir  { padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 700; }
.see-intent-dir.buy  { background: rgba(0,230,118,0.15); color: #00E676; border: 1px solid rgba(0,230,118,0.3); }
.see-intent-dir.sell { background: rgba(255,71,87,0.15);  color: #FF4757; border: 1px solid rgba(255,71,87,0.3); }
.see-intent-price { color: #FFD700; font-family: monospace; min-width: 68px; }
.see-intent-time  { color: #5A6275; font-size: 10px; flex: 1; }
.see-intent-actions { display: flex; gap: 4px; }
.see-intent-approve { padding: 2px 7px; border-radius: 4px; font-size: 9px; font-weight: 700;
    background: rgba(0,230,118,0.15); color: #00E676; border: 1px solid rgba(0,230,118,0.3); cursor: pointer; }
.see-intent-cancel  { padding: 2px 7px; border-radius: 4px; font-size: 9px; font-weight: 700;
    background: rgba(255,71,87,0.12); color: #FF4757; border: 1px solid rgba(255,71,87,0.3); cursor: pointer; }

/* ── Pan / Zoom Shortcut System ── */
body.oc-panning        { cursor: grab !important; }
body.oc-panning *      { cursor: grab !important; }
body.oc-panning-active { cursor: grabbing !important; }
body.oc-panning-active * { cursor: grabbing !important; }
body.oc-zoom-mode      { cursor: crosshair !important; }
body.oc-zoom-mode *    { cursor: crosshair !important; }

.oc-select-rect {
    position: fixed; border: 2px dashed #00D4FF; background: rgba(0,212,255,0.08);
    pointer-events: none; z-index: 99998; border-radius: 3px;
    box-shadow: 0 0 12px rgba(0,212,255,0.25), inset 0 0 20px rgba(0,212,255,0.05);
    display: none;
}

.oc-zoom-hud {
    position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
    background: rgba(10,16,30,0.92); border: 1px solid rgba(0,212,255,0.3);
    border-radius: 20px; padding: 6px 18px; font-size: 12px; font-weight: 700;
    color: #00D4FF; z-index: 99999; pointer-events: none;
    backdrop-filter: blur(8px); box-shadow: 0 0 16px rgba(0,212,255,0.15);
    transition: opacity 0.3s, transform 0.3s;
    font-family: 'JetBrains Mono', monospace;
    display: flex; align-items: center; gap: 10px;
}
.oc-zoom-hud.hidden { opacity: 0; transform: translateX(-50%) translateY(10px); pointer-events: none; }
.oc-zoom-hud .oc-zh-key { background: rgba(0,212,255,0.15); border: 1px solid rgba(0,212,255,0.3);
    border-radius: 4px; padding: 1px 6px; font-size: 10px; color: #00FFB9; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .layout-toolbar { gap: 4px; padding: 4px 6px; }
    .lt-btn { padding: 3px 6px; font-size: 10px; }
    .lt-divider { display: none; }
    .widget-header { padding: 4px 8px; min-height: 30px; }
    .widget-title { font-size: 11px; }
}