/* ===== GOD MODE ULTIMATE CSS v2.0 ===== */

/* ===== ORDER BOOK / DOM — Binance Style ===== */
.dom-panel { display:flex; flex-direction:column; height:100%; gap:0; }
.dom-header { font-family:var(--font-display); font-size:0.5rem; letter-spacing:1px; color:var(--text-muted); text-align:center; padding:3px; background:var(--void); }
.dom-row { display:flex; align-items:center; justify-content:space-between; padding:1px 8px; font-family:var(--font-mono); font-size:0.65rem; position:relative; height:22px; transition:background 0.15s ease; }
.dom-row:hover { background:rgba(255,255,255,0.04); }
.dom-row .dom-bar { position:absolute; top:0; bottom:0; border-radius:0; opacity:0.12; z-index:0; transition:width 0.3s ease; }
.dom-row.bid .dom-bar { right:0; background:var(--buy); }
.dom-row.ask .dom-bar { right:0; background:var(--sell); }
.dom-row span { position:relative; z-index:1; }
.dom-row .dom-price { font-weight:600; }
.dom-row.bid .dom-price { color:var(--buy); }
.dom-row.ask .dom-price { color:var(--sell); }
.dom-row .dom-qty { color:var(--text-secondary); font-size:0.6rem; }
.dom-row .dom-total { color:var(--text-muted); font-size:0.55rem; }
.dom-spread { text-align:center; padding:6px; font-family:var(--font-mono); font-size:0.65rem; color:var(--accent); border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:rgba(0,212,255,0.03); font-weight:600; }
.dom-col-header { display:flex; justify-content:space-between; padding:2px 8px; font-family:var(--font-display); font-size:0.4rem; letter-spacing:1px; color:var(--text-muted); border-bottom:1px solid var(--border); }

/* ===== TAB BAR — Bigger + Scrollable ===== */
.tab-bar { display:flex; gap:3px; padding:4px 6px; background:rgba(5,5,10,0.95); border-radius:var(--radius) var(--radius) 0 0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; flex-shrink:0; }
.tab-bar::-webkit-scrollbar { display:none; }
.tab-btn { flex:0 0 auto; padding:10px 12px; background:transparent; border:1px solid transparent; border-radius:var(--radius-xs); color:var(--text-muted); font-family:var(--font-display); font-size:0.55rem; letter-spacing:0.5px; cursor:pointer; transition:all 0.2s; text-align:center; white-space:nowrap; }
.tab-btn:hover { color:var(--text-secondary); background:rgba(255,255,255,0.04); }
.tab-btn.active { color:var(--accent); background:var(--accent-dim); border-color:rgba(0,212,255,0.25); }

/* ===== CRYPTO HEAT MAP ===== */
.heatmap-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:2px; padding:4px; }
.heat-cell { padding:4px 2px; text-align:center; border-radius:4px; cursor:pointer; transition:all 0.2s; font-family:var(--font-mono); position:relative; overflow:hidden; min-height:36px; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.heat-cell:hover { transform:scale(1.08); z-index:2; box-shadow:0 0 12px rgba(0,0,0,0.6); }
.heat-sym { font-size:0.55rem; font-weight:700; color:rgba(255,255,255,0.9); text-shadow:0 1px 2px rgba(0,0,0,0.5); }
.heat-pct { font-size:0.5rem; font-weight:600; color:rgba(255,255,255,0.85); }

/* ===== FEAR GAUGE SPEEDOMETER ===== */
.gauge-wrap { display:flex; flex-direction:column; align-items:center; padding:8px 0; }
.gauge-svg { width:140px; height:80px; }
.gauge-label { font-family:var(--font-display); font-size:0.55rem; letter-spacing:1px; color:var(--text-muted); margin-top:4px; }
.gauge-value { font-family:var(--font-mono); font-size:1.2rem; font-weight:800; margin-top:2px; }
.gauge-class { font-family:var(--font-mono); font-size:0.6rem; font-weight:600; margin-top:2px; }

/* ===== SMART MONEY FLOW ===== */
.smart-money-bar { display:flex; height:20px; border-radius:10px; overflow:hidden; background:var(--void-card); border:1px solid var(--border); margin:4px 0; }
.sm-buy { background:linear-gradient(90deg,#00FF88,#00CC66); transition:width 0.5s ease; }
.sm-sell { background:linear-gradient(90deg,#FF3366,#CC0033); transition:width 0.5s ease; }
.sm-labels { display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:0.55rem; margin-top:2px; }

/* ===== COOLDOWN TIMER ===== */
.cooldown-text { font-family:var(--font-mono); font-size:0.55rem; color:var(--accent); }

/* ===== KEYBOARD SHORTCUTS ===== */
.kbd-hint { position:fixed; bottom:70px; left:50%; transform:translateX(-50%); background:rgba(10,10,18,0.95); backdrop-filter:blur(16px); border:1px solid var(--border-glow); border-radius:var(--radius); padding:12px 20px; display:none; z-index:9999; font-family:var(--font-mono); font-size:0.65rem; color:var(--text-secondary); max-width:600px; }
.kbd-hint.show { display:flex; gap:16px; flex-wrap:wrap; animation:fadeIn 0.2s ease; }
.kbd-key { display:inline-block; background:var(--void-hover); border:1px solid var(--border); border-radius:4px; padding:2px 6px; font-weight:600; color:var(--accent); margin-right:4px; min-width:20px; text-align:center; }
@keyframes fadeIn { from{opacity:0;transform:translateX(-50%) translateY(10px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }

/* ===== MARKET REGIME BADGE ===== */
.regime-badge { display:inline-block; padding:3px 8px; border-radius:4px; font-family:var(--font-display); font-size:0.5rem; letter-spacing:1px; font-weight:700; animation:pulse 2s infinite; }
.regime-trending { background:rgba(0,255,136,0.15); color:var(--buy); border:1px solid rgba(0,255,136,0.3); }
.regime-ranging { background:rgba(0,212,255,0.15); color:var(--accent); border:1px solid rgba(0,212,255,0.3); }
.regime-volatile { background:rgba(255,51,102,0.15); color:var(--sell); border:1px solid rgba(255,51,102,0.3); }
.regime-choppy { background:rgba(240,185,11,0.15); color:var(--gold); border:1px solid rgba(240,185,11,0.3); }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.7;} }

/* ===== NOTIFICATION SYSTEM ===== */
.notif-permission { background:var(--accent-dim); border:1px solid rgba(0,212,255,0.2); border-radius:var(--radius-xs); padding:8px 12px; text-align:center; cursor:pointer; font-family:var(--font-mono); font-size:0.6rem; color:var(--accent); transition:all 0.2s; flex:1; }
.notif-permission:hover { background:rgba(0,212,255,0.2); }

/* ===== AI VALIDATOR ===== */
.validator-grid { display:grid; grid-template-columns:1fr 1fr; gap:3px; margin:6px 0; }
.val-item { display:flex; justify-content:space-between; align-items:center; padding:3px 6px; background:var(--void-card); border:1px solid var(--border); border-radius:3px; font-family:var(--font-mono); font-size:0.55rem; }
.val-item .val-label { color:var(--text-muted); }
.val-check { font-weight:700; }
.val-pass { color:var(--buy); }
.val-warn { color:var(--gold); }
.val-fail { color:var(--sell); }
.val-score { text-align:center; padding:6px; font-family:var(--font-display); font-size:0.8rem; font-weight:700; }

/* ===== PORTFOLIO TRACKER ===== */
.port-row { display:grid; grid-template-columns:60px 1fr 1fr 1fr; gap:4px; align-items:center; padding:4px 6px; border-bottom:1px solid var(--border); font-family:var(--font-mono); font-size:0.6rem; color:var(--text-primary); }
.port-row:last-child { border-bottom:none; }
.port-header { color:var(--text-muted); font-size:0.5rem; font-family:var(--font-display); letter-spacing:1px; }
.port-total { display:flex; justify-content:space-between; padding:6px; background:var(--void-card); border:1px solid var(--border); border-radius:var(--radius-xs); margin-top:4px; font-family:var(--font-mono); font-size:0.7rem; font-weight:700; }
.add-pos-btn { width:100%; padding:6px; background:var(--accent-dim); border:1px dashed rgba(0,212,255,0.3); border-radius:var(--radius-xs); color:var(--accent); font-family:var(--font-mono); font-size:0.6rem; cursor:pointer; margin-top:4px; transition:all 0.2s; }
.add-pos-btn:hover { background:rgba(0,212,255,0.2); }

/* ===== EXPORT/IMPORT ===== */
.export-btns { display:flex; gap:4px; margin:4px 0; }
.export-btns button { flex:1; padding:6px; font-family:var(--font-mono); font-size:0.55rem; border-radius:var(--radius-xs); cursor:pointer; border:1px solid var(--border); background:var(--void-card); color:var(--text-primary); transition:all 0.2s; }
.export-btns button:hover { border-color:var(--accent); color:var(--accent); }

/* ===== CANDLESTICK PATTERN MARKERS ===== */
.pattern-markers { display:flex; flex-wrap:wrap; gap:3px; margin:4px 0; }
.pattern-tag { font-family:var(--font-mono); font-size:0.5rem; padding:2px 6px; border-radius:3px; font-weight:600; }
.pattern-bull { background:rgba(0,255,136,0.15); color:var(--buy); border:1px solid rgba(0,255,136,0.2); }
.pattern-bear { background:rgba(255,51,102,0.15); color:var(--sell); border:1px solid rgba(255,51,102,0.2); }
.pattern-neutral { background:rgba(0,212,255,0.1); color:var(--accent); border:1px solid rgba(0,212,255,0.2); }

/* ===== DRAWING TOOLS TOOLBAR ===== */
.draw-toolbar { display:flex; gap:2px; margin-left:auto; }
.draw-btn { background:var(--void-card); border:1px solid var(--border); border-radius:var(--radius-xs); padding:4px 8px; color:var(--text-muted); font-size:0.7rem; cursor:pointer; transition:all 0.2s; line-height:1; }
.draw-btn:hover { color:var(--text-primary); border-color:var(--text-muted); }
.draw-btn.active { color:var(--accent); border-color:var(--accent); background:var(--accent-dim); }

/* ===== CHART LINE LABELS ===== */
.chart-line-label { font-family:var(--font-mono); font-size:0.55rem; }

/* Mobile styles are now in mobile.css */