@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --bg-primary: #0a0f1a; /* Deep navy */
    --card-bg: rgba(17, 24, 39, 0.8); /* Glassmorphism */
    --card-border: #1e293b;
    --color-profit: #00d4aa; /* Green */
    --color-loss: #ff4757; /* Red */
    --color-accent: #ffd700; /* Gold */
    --color-info: #3b82f6; /* Blue */
    --text-primary: #e2e8f0;
    --border-radius-card: 12px;
    --transition-speed: 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
}

a {
    color: var(--color-info);
    text-decoration: none;
    transition: color var(--transition-speed);
}

a:hover {
    color: var(--color-accent);
}

button {
    cursor: pointer;
    border: none;
    padding: 0.75em 1.2em;
    border-radius: 8px;
    font-weight: 600;
    transition: background-color var(--transition-speed), transform 0.1s ease;
}

button:hover {
    transform: translateY(-1px);
}

input[type="text"], input[type="password"], input[type="number"], select {
    background-color: #1f2937;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--text-primary);
    transition: border-color var(--transition-speed);
}

input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, select:focus {
    outline: none;
    border-color: var(--color-info);
}

.card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-card);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.card:hover {
    transform: translateY(-2px);
}

.status-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; }
.status-dot.green { background:#00d4aa; box-shadow:0 0 6px #00d4aa; }
.status-dot.red { background:#ff4757; animation:pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes fadeInRight { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }

/* Top Bar */
.top-bar { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; background:rgba(17,24,39,.95); border-bottom:1px solid var(--card-border); position:sticky; top:0; z-index:50; backdrop-filter:blur(10px); }
.top-bar-left { display:flex; align-items:center; gap:12px; }
.top-bar-right { display:flex; align-items:center; gap:14px; }
.logo { font-size:1.4rem; font-weight:800; background:linear-gradient(135deg,#00d4aa,#ffd700); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.icon-button { background:none; border:1px solid var(--card-border); border-radius:8px; padding:8px 10px; color:#888; font-size:.9rem; }
.account-balance-display { font-family:monospace; font-weight:700; color:var(--color-profit); font-size:1rem; }

/* Dashboard Cards */
.dashboard-cards-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:16px 20px; }
.card { display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; }
.card-label { font-size:.7rem; text-transform:uppercase; letter-spacing:1px; color:#888; }
.card-value { font-size:1.3rem; font-weight:700; font-family:monospace; }

/* Main Grid */
main { padding:0 16px 100px; }
.main-content-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:12px; }
.panel { background:var(--card-bg); border:1px solid var(--card-border); border-radius:12px; padding:16px; }
.panel h2 { font-size:1rem; margin-bottom:12px; color:var(--color-accent); }

/* Full-width panels */
.full-width { grid-column: 1 / -1; }

/* Chart */
.chart-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; flex-wrap:wrap; gap:8px; }
.chart-controls { display:flex; align-items:center; gap:10px; }
.chart-header select { background:#1f2937; border:1px solid var(--card-border); border-radius:6px; padding:6px 10px; color:#e2e8f0; font-size:.8rem; }
.chart-wrapper { min-height:400px; border-radius:8px; overflow:hidden; }

/* Timeframe Buttons */
.timeframe-buttons { display:flex; gap:2px; background:#111827; border-radius:8px; padding:3px; }
.timeframe-buttons button { background:transparent; color:#888; border:none; padding:6px 12px; border-radius:6px; font-size:.75rem; font-weight:600; cursor:pointer; transition:all .2s; }
.timeframe-buttons button:hover { color:#e2e8f0; background:rgba(255,255,255,.05); }
.timeframe-buttons button.active { background:var(--color-info); color:#fff; }

/* Confidence Bars */
.confidence-bar-container { width:80px; height:8px; background:#1e293b; border-radius:4px; overflow:hidden; display:inline-block; vertical-align:middle; margin-right:6px; }
.confidence-bar { height:100%; border-radius:4px; transition:width .3s; }
.confidence-text { font-size:.75rem; font-weight:700; }

/* Trade Buttons */
.trade-button { background:var(--color-info); color:#fff; padding:5px 12px; font-size:.75rem; border-radius:6px; }
.close-button { background:var(--color-loss); color:#fff; padding:5px 12px; font-size:.75rem; border-radius:6px; }
.place-trade-button { width:100%; background:linear-gradient(135deg,#00d4aa,#3b82f6); color:#fff; padding:12px; font-size:1rem; font-weight:700; border-radius:10px; margin-top:10px; }
.green { color:var(--color-profit); }
.red { color:var(--color-loss); }

/* Buy/Sell Toggle */
.buy-sell-toggle { display:flex; gap:0; }
.buy-sell-toggle input { display:none; }
.buy-sell-toggle label { flex:1; padding:10px; text-align:center; cursor:pointer; font-weight:700; border:1px solid var(--card-border); }
.buy-sell-toggle label.buy { border-radius:8px 0 0 8px; }
.buy-sell-toggle label.sell { border-radius:0 8px 8px 0; }
.buy-sell-toggle input:checked + label.buy { background:var(--color-profit); color:#fff; border-color:var(--color-profit); }
.buy-sell-toggle input:checked + label.sell { background:var(--color-loss); color:#fff; border-color:var(--color-loss); }

/* Auto-trade toggle switch */
.switch { position:relative; display:inline-block; width:44px; height:24px; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#333; border-radius:24px; transition:.3s; }
.slider:before { content:""; position:absolute; height:18px; width:18px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.3s; }
input:checked + .slider { background:var(--color-profit); }
input:checked + .slider:before { transform:translateX(20px); }

/* Collapsible Sections */
.collapsible .collapsible-content { display:none; margin-top:12px; }
.collapsible.open .collapsible-content { display:block; }
.collapsible-header { cursor:pointer; }
.section-toggle { cursor:pointer; user-select:none; }
.section-toggle::after { content:' ▾'; font-size:.7rem; color:#555; }
.section-toggle.collapsed::after { content:' ▸'; }
.section-body { transition:max-height .3s ease; overflow:hidden; }
.section-body.collapsed { display:none; }
.checkbox-group { display:flex; flex-wrap:wrap; gap:8px; }
.checkbox-group label { font-size:.85rem; display:flex; align-items:center; gap:4px; }
.action-button { width:100%; background:linear-gradient(135deg,#ffd700,#ff6b35); color:#0a0f1a; padding:12px; font-weight:700; border-radius:10px; margin-top:12px; }

/* Form groups */
.form-group { margin-bottom:12px; }
.form-group label { display:block; font-size:.8rem; color:#888; margin-bottom:4px; }
.form-group input, .form-group select { width:100%; }
.environment-toggle { display:flex; gap:12px; }
.environment-toggle label { font-size:.85rem; display:flex; align-items:center; gap:4px; }
.save-button { width:100%; background:var(--color-info); color:#fff; padding:12px; font-weight:700; border-radius:10px; margin-top:8px; }
.google-signin-button { width:100%; background:#fff; color:#333; padding:12px; font-weight:600; border-radius:10px; display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:12px; }
.email-signin-group { display:flex; flex-direction:column; gap:8px; }
.email-signin-button { background:var(--color-info); color:#fff; padding:10px; border-radius:8px; font-weight:600; }
.error-message { color:var(--color-loss); font-size:.8rem; margin-top:8px; }

/* Auto-Trade Header Button */
.auto-trade-btn { display:flex; align-items:center; gap:6px; padding:6px 14px; border-radius:20px; font-size:.75rem; font-weight:700; border:1px solid var(--card-border); background:#111827; color:#888; cursor:pointer; transition:all .3s; }
.auto-trade-btn .auto-trade-dot { width:8px; height:8px; border-radius:50%; background:#ff4757; transition:all .3s; }
.auto-trade-btn.on { background:rgba(0,212,170,.15); border-color:var(--color-profit); color:var(--color-profit); }
.auto-trade-btn.on .auto-trade-dot { background:var(--color-profit); box-shadow:0 0 8px var(--color-profit); animation:pulse 2s infinite; }

/* Auto-Trade Control Panel */
.auto-trade-control-panel { }
.at-control-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.at-control-header h2 { display:flex; align-items:center; gap:8px; }
.at-status-badges { display:flex; gap:8px; }
.at-badge { font-size:.7rem; font-weight:700; padding:4px 12px; border-radius:20px; text-transform:uppercase; letter-spacing:.5px; }
.at-badge.off { background:rgba(255,71,87,.15); color:#ff4757; }
.at-badge.on { background:rgba(0,212,170,.15); color:#00d4aa; }
.at-badge.idle { background:rgba(59,130,246,.15); color:#3b82f6; }
.at-control-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.at-settings-col h3, .at-activity-col h3 { font-size:.85rem; color:#888; margin-bottom:12px; text-transform:uppercase; letter-spacing:.5px; }
.at-settings-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.at-start-btn { width:100%; padding:14px; border-radius:10px; font-size:.9rem; font-weight:700; border:none; cursor:pointer; margin-top:12px; transition:all .3s; }
.at-start-btn.off, .at-start-btn { background:linear-gradient(135deg,#00d4aa,#3b82f6); color:#fff; }
.at-start-btn.running { background:linear-gradient(135deg,#ff4757,#ff6b35); color:#fff; }
.at-trades-count { font-size:.7rem; font-weight:600; background:rgba(255,215,0,.15); color:#ffd700; padding:2px 8px; border-radius:10px; margin-left:8px; }
.at-activity-feed { max-height:250px; overflow-y:auto; display:flex; flex-direction:column; gap:4px; padding:4px; scrollbar-width:thin; scrollbar-color:#1e293b transparent; }
.at-activity-empty { text-align:center; color:#555; font-size:.8rem; padding:30px 0; }
.at-activity-item { display:flex; gap:8px; align-items:flex-start; font-size:.78rem; padding:6px 8px; border-radius:6px; background:rgba(30,41,59,.5); }
.at-activity-item .at-time { color:#555; font-size:.7rem; white-space:nowrap; font-family:monospace; min-width:50px; }
.at-activity-item .at-icon { font-size:.7rem; min-width:16px; text-align:center; }
.at-activity-item.trade_executed .at-icon { color:#00d4aa; }
.at-activity-item.trade_skip .at-icon, .at-activity-item.trade_failed .at-icon { color:#ff4757; }
.at-activity-item.analyzed .at-icon { color:#3b82f6; }
.at-activity-item.scan_start .at-icon, .at-activity-item.scan_done .at-icon { color:#ffd700; }
.at-activity-item.error .at-icon { color:#ff4757; }
.at-activity-item.backtest_pass .at-icon { color:#8b5cf6; }
.at-activity-item.backtest_reject .at-icon { color:#ff6b35; }
.at-activity-item.team_approve .at-icon { color:#00d4aa; }
.at-activity-item.team_reject .at-icon { color:#ff6b35; }
.at-activity-item.trailing_stop .at-icon { color:#3b82f6; }
.at-activity-item.drift_detected .at-icon { color:#ffd700; }
.at-activity-item.circuit_open .at-icon { color:#ff4757; }
.at-activity-item.recovering .at-icon { color:#ffd700; }
.at-next-scan { text-align:center; margin-top:8px; font-size:.75rem; color:#555; }

/* Full-width sections outside grid */
.full-width-section { margin:16px 0; background:var(--card-bg); border:1px solid var(--card-border); border-radius:12px; padding:16px; }

/* ─── Performance Metrics ─── */
.perf-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:8px; }
.perf-header h2 { display:flex; align-items:center; gap:8px; }
.perf-controls { display:flex; gap:8px; }
.perf-controls select { background:#1f2937; border:1px solid var(--card-border); border-radius:6px; padding:6px 10px; color:#e2e8f0; font-size:.8rem; }
.perf-controls button { background:#1e293b; border:1px solid #334155; color:#e2e8f0; padding:6px 14px; border-radius:8px; font-size:.75rem; font-weight:600; cursor:pointer; }
.perf-metrics-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-bottom:16px; }
.perf-card { background:#111827; border:1px solid #1e293b; border-radius:10px; padding:12px; text-align:center; }
.perf-label { display:block; font-size:.65rem; text-transform:uppercase; letter-spacing:.5px; color:#666; margin-bottom:4px; }
.perf-value { display:block; font-size:1.1rem; font-weight:700; font-family:monospace; }
.perf-details-grid { display:grid; grid-template-columns:1fr 1fr 2fr; gap:16px; }
.perf-breakdown h3, .perf-equity h3 { font-size:.8rem; color:#888; text-transform:uppercase; margin-bottom:8px; }
.perf-breakdown-list { font-size:.8rem; }
.perf-breakdown-item { display:flex; justify-content:space-between; align-items:center; padding:6px 8px; border-radius:6px; background:rgba(30,41,59,.5); margin-bottom:4px; }
.perf-breakdown-item .pair-name { font-weight:600; }
.perf-breakdown-item .pair-stats { font-family:monospace; font-size:.75rem; }
.perf-equity-chart { height:150px; background:#111827; border-radius:8px; position:relative; overflow:hidden; padding:8px; }
.perf-equity-svg { width:100%; height:100%; }
.perf-charts-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-top:16px; }
.perf-chart-box { }
.perf-chart-box h3 { font-size:.8rem; color:#888; text-transform:uppercase; margin-bottom:8px; }
.perf-winrate-bars { display:flex; flex-direction:column; gap:6px; }
.wr-bar-row { display:flex; align-items:center; gap:8px; font-size:.75rem; }
.wr-bar-label { min-width:60px; font-weight:600; }
.wr-bar-track { flex:1; height:16px; background:#111827; border-radius:4px; overflow:hidden; position:relative; }
.wr-bar-fill { height:100%; border-radius:4px; transition:width .5s; }
.wr-bar-value { min-width:40px; text-align:right; font-weight:700; font-family:monospace; }

/* ─── Trade History ─── */
.trade-history-scroll { max-height:400px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#1e293b transparent; }
.trade-history-panel table td { font-size:.8rem; }

/* ─── Backtesting ─── */
.bt-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.bt-header h2 { display:flex; align-items:center; gap:8px; }
.bt-badge { font-size:.65rem; background:linear-gradient(135deg,#8b5cf6,#6366f1); padding:3px 10px; border-radius:20px; font-weight:600; color:#fff; }
.bt-config-grid { display:grid; grid-template-columns:280px 1fr; gap:20px; }
.bt-config .form-group { margin-bottom:10px; }
.bt-strategy-desc { font-size:.75rem; color:#888; line-height:1.5; margin:8px 0; }
.bt-run-btn { width:100%; padding:12px; border-radius:10px; font-size:.9rem; font-weight:700; border:none; cursor:pointer; background:linear-gradient(135deg,#8b5cf6,#6366f1); color:#fff; margin-top:8px; }
.bt-run-btn:disabled { opacity:.5; cursor:not-allowed; }
.bt-ai-buttons { display:flex; gap:8px; margin-top:8px; }
.bt-optimize-btn { flex:1; padding:10px; border-radius:8px; font-size:.78rem; font-weight:700; border:none; cursor:pointer; background:linear-gradient(135deg,#ffd700,#ff6b35); color:#0a0f1a; }
.bt-ai-btn { flex:1; padding:10px; border-radius:8px; font-size:.78rem; font-weight:700; border:none; cursor:pointer; background:linear-gradient(135deg,#00d4aa,#3b82f6); color:#fff; }
.bt-optimize-btn:disabled, .bt-ai-btn:disabled { opacity:.5; cursor:not-allowed; }
.opt-result { margin-top:12px; }
.opt-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.opt-badge { font-size:.6rem; font-weight:700; padding:3px 8px; border-radius:12px; }
.opt-badge.gold { background:rgba(255,215,0,.15); color:#ffd700; }
.opt-badge.silver { background:rgba(192,192,192,.15); color:#ccc; }
.opt-badge.bronze { background:rgba(205,127,50,.15); color:#cd7f32; }
.opt-rank-list { display:flex; flex-direction:column; gap:6px; }
.opt-rank-item { display:flex; align-items:center; justify-content:space-between; padding:8px 10px; background:rgba(30,41,59,.5); border-radius:8px; font-size:.78rem; }
.opt-rank-item:first-child { background:rgba(255,215,0,.08); border:1px solid rgba(255,215,0,.2); }
.opt-rank-num { font-weight:800; font-size:.85rem; min-width:24px; }
.opt-rank-strat { font-weight:600; }
.opt-rank-stats { font-family:monospace; font-size:.72rem; display:flex; gap:12px; }
.ai-strat-result { margin-top:12px; }
.ai-strat-card { background:#111827; border:1px solid #1e293b; border-radius:10px; padding:14px; margin-bottom:10px; }
.ai-strat-card h4 { color:var(--color-accent); margin-bottom:8px; font-size:.9rem; }
.ai-strat-card p { font-size:.8rem; line-height:1.6; color:#cbd5e1; }
.ai-strat-validation { display:flex; gap:8px; margin-top:8px; }
.ai-strat-tag { font-size:.65rem; padding:3px 8px; border-radius:10px; font-weight:600; }
.bt-results { min-height:200px; }
.bt-empty { text-align:center; color:#555; padding:60px 0; font-size:.85rem; }
.bt-metrics-row { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:16px; }
.bt-metric { background:#111827; border:1px solid #1e293b; border-radius:8px; padding:10px; text-align:center; }
.bt-metric .bt-m-label { display:block; font-size:.6rem; text-transform:uppercase; color:#666; margin-bottom:2px; }
.bt-metric .bt-m-value { display:block; font-size:1rem; font-weight:700; font-family:monospace; }
.bt-equity-chart { height:120px; background:#111827; border-radius:8px; margin-bottom:12px; overflow:hidden; padding:8px; }
.bt-trades-scroll { max-height:250px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#1e293b transparent; }
.bt-trades-scroll table { font-size:.78rem; }

/* ─── News Calendar ─── */
.news-feed { max-height:300px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#1e293b transparent; }
.news-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; margin-bottom:4px; font-size:.8rem; background:rgba(30,41,59,.3); }
.news-item:hover { background:rgba(30,41,59,.6); }
.news-impact { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.news-impact.high { background:#ff4757; box-shadow:0 0 6px #ff4757; }
.news-impact.medium { background:#ffd700; }
.news-impact.low { background:#3b82f6; }
.news-time { min-width:45px; font-family:monospace; font-size:.7rem; color:#888; }
.news-currency { min-width:35px; font-weight:700; font-size:.72rem; }
.news-event { flex:1; }
.news-values { display:flex; gap:12px; font-family:monospace; font-size:.72rem; color:#888; }
.news-values .actual { color:#00d4aa; font-weight:600; }
.news-values .forecast { color:#ffd700; }
.news-warning { background:rgba(255,71,87,.08); border:1px solid rgba(255,71,87,.2); border-radius:8px; padding:10px 14px; margin-bottom:10px; display:flex; align-items:center; gap:8px; font-size:.8rem; color:#ff4757; }

/* AI Signals — reasoning column fix */
.ai-signals-panel table { table-layout:auto; }
.ai-signals-panel table td:nth-child(7),
.ai-signals-panel table th:nth-child(7) {
    min-width:280px;
    max-width:500px;
    white-space:normal;
    line-height:1.5;
    font-size:.8rem;
    color:#cbd5e1;
}

/* AI Chat Panel */
.ai-chat-panel { grid-column: 1 / -1; display:flex; flex-direction:column; }
.chat-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.chat-header h2 { display:flex; align-items:center; gap:8px; }
.chat-badge { font-size:.65rem; background:linear-gradient(135deg,#3b82f6,#8b5cf6); padding:3px 10px; border-radius:20px; font-weight:600; color:#fff; }
.chat-messages { flex:1; max-height:350px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:12px 4px; scrollbar-width:thin; scrollbar-color:#1e293b transparent; }
.chat-message { display:flex; }
.chat-message.user { justify-content:flex-end; }
.chat-message.ai { justify-content:flex-start; }
.chat-bubble { max-width:75%; padding:10px 14px; border-radius:12px; font-size:.85rem; line-height:1.6; word-wrap:break-word; white-space:pre-wrap; }
.chat-message.user .chat-bubble { background:linear-gradient(135deg,#3b82f6,#2563eb); color:#fff; border-bottom-right-radius:4px; }
.chat-message.ai .chat-bubble { background:#1e293b; color:#e2e8f0; border-bottom-left-radius:4px; }
.chat-input-row { display:flex; gap:8px; margin-top:10px; }
.chat-input-row input { flex:1; background:#111827; border:1px solid var(--card-border); border-radius:10px; padding:12px 16px; color:#e2e8f0; font-size:.85rem; }
.chat-input-row input:focus { outline:none; border-color:var(--color-info); }
.chat-input-row button { background:linear-gradient(135deg,#3b82f6,#8b5cf6); color:#fff; border:none; border-radius:10px; padding:12px 18px; font-size:.9rem; cursor:pointer; }
.chat-input-row button:disabled { opacity:.5; cursor:not-allowed; }

/* Responsive */
@media (max-width:768px) {
    .dashboard-cards-row { grid-template-columns:repeat(2,1fr); }
    .main-content-grid { grid-template-columns:1fr; }
    .timeframe-buttons button { padding:5px 8px; font-size:.7rem; }
    .chat-bubble { max-width:90%; }
    .at-control-grid { grid-template-columns:1fr; }
    .at-settings-row { grid-template-columns:1fr 1fr; }
    .perf-metrics-grid { grid-template-columns:repeat(3,1fr); }
    .perf-details-grid { grid-template-columns:1fr; }
    .bt-config-grid { grid-template-columns:1fr; }
    .bt-metrics-row { grid-template-columns:repeat(3,1fr); }
}

.profit {
    color: var(--color-profit);
}

.loss {
    color: var(--color-loss);
}

.buy-btn {
    background-color: var(--color-profit);
    color: var(--text-primary);
}

.sell-btn {
    background-color: var(--color-loss);
    color: var(--text-primary);
}

.price-display {
    font-family: monospace;
    font-weight: 600;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

table th, table td {
    padding: 12px;
    border: 1px solid var(--card-border);
    text-align: left;
}

table th {
    background-color: var(--card-bg);
    font-weight: 600;
    color: var(--text-primary);
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-content {
    background-color: var(--card-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-card);
    padding: 25px;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    position: relative;
}
.close-button { position:absolute; top:10px; right:14px; background:none; border:none; color:#888; font-size:1.6rem; cursor:pointer; }

.toggle-switch {
    appearance: none;
    width: 50px;
    height: 25px;
    background: #ccc;
    border-radius: 25px;
    position: relative;
    outline: none;
    cursor: pointer;
    transition: background var(--transition-speed);
}

.toggle-switch:checked {
    background: var(--color-profit);
}

.toggle-switch::after {
    content: '';
    position: absolute;
    width: 21px;
    height: 21px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: left var(--transition-speed);
}

.toggle-switch:checked::after {
    left: 27px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}