/* WaveTrader — assets/css/app.css */
:root {
  --bg0:#0a0b0e; --bg1:#111318; --bg2:#181c22; --bg3:#1e2330;
  --border:rgba(255,255,255,0.07); --border2:rgba(255,255,255,0.12);
  --accent:#c8a84b; --accent2:#e8c87a;
  --green:#3ddc97; --red:#f05a5a; --blue:#4a9eff; --purple:#a78bfa;
  --text:#e2e4e9; --muted:#5a6070; --muted2:#8a92a0;
  --w1:#f05a5a; --w2:#5a7ff0; --w3:#3ddc97; --w4:#f0a05a; --w5:#c8a84b;
}
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--bg0); color:var(--text); font-family:'JetBrains Mono',monospace; font-size:13px; line-height:1.5; min-height:100vh; }

/* ── HEADER ── */
.header { background:var(--bg1); border-bottom:1px solid var(--border2); padding:10px 20px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; }
.logo { font-family:'Syne',sans-serif; font-size:16px; font-weight:800; letter-spacing:0.08em; color:var(--accent); text-transform:uppercase; }
.logo span { color:var(--text); }
.logo-ver { font-size:10px; color:var(--muted); font-family:'JetBrains Mono',monospace; font-weight:400; margin-left:6px; vertical-align:middle; }
.hdr-right { display:flex; align-items:center; gap:12px; }
.hdr-info { font-size:11px; color:var(--muted2); }
.hdr-info b { color:var(--accent2); }

/* ── TABS ── */
.tabs { background:var(--bg1); border-bottom:1px solid var(--border); display:flex; padding:0 18px; gap:2px; position:sticky; top:45px; z-index:99; }
.tab { padding:9px 16px; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; transition:all 0.15s; user-select:none; white-space:nowrap; }
.tab:hover { color:var(--text); }
.tab.active { color:var(--accent); border-bottom-color:var(--accent); }

/* ── LAYOUT ── */
.main-wrap { padding:14px 18px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.col-gap { display:flex; flex-direction:column; gap:12px; }
.mt0 { margin-top:0; }
.mt8 { margin-top:8px; }
.mt12 { margin-top:12px; }
.flex-row { display:flex; gap:8px; align-items:center; }
.flex-between { justify-content:space-between; }
.w100 { width:100%; }

/* ── PANELS ── */
.panel { background:var(--bg1); border:1px solid var(--border); border-radius:6px; overflow:hidden; }
.panel-header { padding:9px 13px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; background:var(--bg2); }
.panel-title { font-family:'Syne',sans-serif; font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); }
.panel-body { padding:13px; }

/* ── STATS ROW ── */
.stats-row { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:12px; }
.stat-box { background:var(--bg2); border:1px solid var(--border); border-radius:4px; padding:9px 11px; }
.stat-label { font-size:10px; color:var(--muted); letter-spacing:0.06em; text-transform:uppercase; margin-bottom:3px; }
.stat-value { font-size:18px; font-weight:600; color:var(--text); }
.stat-value.green { color:var(--green); }
.stat-value.red { color:var(--red); }
.stat-value.gold { color:var(--accent2); }

/* ── FORMS ── */
label { display:block; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted2); margin-bottom:4px; }
input, select, textarea { width:100%; background:var(--bg0); border:1px solid var(--border2); border-radius:4px; color:var(--text); font-family:'JetBrains Mono',monospace; font-size:13px; padding:7px 10px; outline:none; transition:border-color 0.15s; }
input:focus, select:focus, textarea:focus { border-color:var(--accent); }
select option { background:var(--bg1); }
textarea { resize:vertical; min-height:50px; }
.input-group { margin-bottom:9px; }

/* ── BUTTONS ── */
.btn { padding:7px 15px; border-radius:4px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; border:none; font-weight:600; transition:all 0.15s; display:inline-block; }
.btn-primary { background:var(--accent); color:#0a0b0e; }
.btn-primary:hover { background:var(--accent2); }
.btn-secondary { background:var(--bg3); color:var(--text); border:1px solid var(--border2); }
.btn-secondary:hover { border-color:var(--accent); color:var(--accent); }
.btn-danger { background:rgba(240,90,90,0.15); color:var(--red); border:1px solid rgba(240,90,90,0.3); }
.btn-sm { padding:5px 10px; font-size:10px; }

/* ── DIVIDER ── */
.divider { border:none; border-top:1px solid var(--border); margin:11px 0; }

/* ── INFO BOX ── */
.info-box { background:rgba(200,168,75,0.08); border:1px solid rgba(200,168,75,0.2); border-radius:4px; padding:9px 11px; font-size:11px; color:var(--muted2); line-height:1.6; margin-bottom:11px; }
.info-box b { color:var(--accent); }

/* ── TIMEFRAME ── */
.tf-row { display:flex; gap:5px; }
.tf-btn { padding:6px 14px; border-radius:4px; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; cursor:pointer; border:1px solid var(--border2); background:var(--bg0); color:var(--muted2); transition:all 0.15s; }
.tf-btn:hover { color:var(--text); border-color:var(--muted2); }
.tf-btn.active { background:rgba(200,168,75,0.15); border-color:var(--accent); color:var(--accent); }

/* ── SIGNAL BOX ── */
.signal-box { border-radius:6px; padding:13px 15px; border:1px solid; }
.sig-title { font-family:'Syne',sans-serif; font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:8px; }
.sig-score { font-size:30px; font-weight:800; font-family:'Syne',sans-serif; line-height:1; }
.sig-label { font-size:11px; margin-top:3px; font-weight:600; letter-spacing:0.05em; }
.sig-desc { font-size:10px; margin-top:7px; line-height:1.6; opacity:0.82; }
.sig-bar { height:5px; border-radius:3px; margin-top:9px; background:rgba(255,255,255,0.1); }
.sig-fill { height:100%; border-radius:3px; transition:width 0.5s; }
.sig-neutral { background:rgba(90,96,112,0.1); border-color:rgba(90,96,112,0.3); color:#8a92a0; }
.sig-1 { background:rgba(240,90,90,0.1); border-color:rgba(240,90,90,0.3); color:#f05a5a; }
.sig-2 { background:rgba(240,130,90,0.1); border-color:rgba(240,130,90,0.3); color:#f08a5a; }
.sig-3 { background:rgba(200,168,75,0.1); border-color:rgba(200,168,75,0.3); color:#c8a84b; }
.sig-4 { background:rgba(61,180,120,0.1); border-color:rgba(61,180,120,0.3); color:#3db47a; }
.sig-5 { background:rgba(61,220,151,0.1); border-color:rgba(61,220,151,0.35); color:#3ddc97; }

/* ── CANVAS ── */
#ew-canvas-wrap, #fractal-canvas-wrap { background:var(--bg0); border:1px solid var(--border); border-radius:4px; overflow:hidden; }
#ew-canvas, #fractal-canvas { display:block; width:100%; }

/* ── WAVE TABLE ── */
.wave-table { width:100%; border-collapse:collapse; font-size:12px; }
.wave-table th { padding:6px 9px; text-align:left; font-size:10px; letter-spacing:0.07em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--border); font-weight:500; }
.wave-table td { padding:6px 9px; border-bottom:1px solid var(--border); vertical-align:middle; }
.wave-table tr:last-child td { border-bottom:none; }
.wave-table tr:hover td { background:rgba(255,255,255,0.02); }

/* ── FIB ROW ── */
.fib-row { display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:1px solid var(--border); font-size:12px; }
.fib-row:last-child { border-bottom:none; }
.fib-level { color:var(--muted2); min-width:52px; }
.fib-price { color:var(--accent2); font-weight:600; min-width:85px; text-align:right; }
.fib-desc { font-size:10px; color:var(--muted); text-align:right; flex:1; padding-left:8px; }

/* ── TRADE ROW ── */
.trade-row { display:grid; grid-template-columns:90px 70px 55px 85px 85px 75px 90px 1fr; gap:5px; padding:7px 10px; border-bottom:1px solid var(--border); font-size:11px; align-items:center; transition:background 0.1s; }
.trade-row:hover { background:rgba(255,255,255,0.02); }
.trade-row.header { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; background:var(--bg2); }
.badge-long { color:var(--green); font-weight:600; }
.badge-short { color:var(--red); font-weight:600; }

/* ── PAGES ── */
.page { display:none; }
.page.active { display:block; }

/* ── NEWS ── */
.news-search-bar { display:flex; gap:8px; margin-bottom:10px; }
.news-search-bar input { flex:1; }
.news-ticker-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(200,168,75,0.12); border:1px solid rgba(200,168,75,0.25); border-radius:4px; padding:4px 10px; font-size:12px; color:var(--accent2); font-weight:600; }
.news-item { padding:11px 13px; border-bottom:1px solid var(--border); transition:background 0.12s; }
.news-item:last-child { border-bottom:none; }
.news-item:hover { background:rgba(255,255,255,0.025); }
.news-meta { display:flex; gap:10px; align-items:center; margin-bottom:5px; flex-wrap:wrap; }
.news-source { font-size:10px; color:var(--accent); letter-spacing:0.05em; text-transform:uppercase; font-weight:600; }
.news-date { font-size:10px; color:var(--muted); }
.news-sentiment { font-size:10px; padding:2px 7px; border-radius:3px; font-weight:600; }
.sent-pos { background:rgba(61,220,151,0.12); color:var(--green); }
.sent-neg { background:rgba(240,90,90,0.12); color:var(--red); }
.sent-neu { background:rgba(90,96,112,0.12); color:var(--muted2); }
.news-title { font-size:12px; color:var(--text); line-height:1.5; margin-bottom:3px; font-weight:500; }
.news-summary { font-size:11px; color:var(--muted2); line-height:1.5; }
.news-loading { padding:20px; text-align:center; color:var(--muted); font-size:11px; }
.news-spinner { display:inline-block; width:14px; height:14px; border:2px solid var(--border2); border-top-color:var(--accent); border-radius:50%; animation:spin 0.7s linear infinite; margin-right:8px; vertical-align:middle; }
@keyframes spin { to { transform:rotate(360deg); } }
.scroll-y { overflow-y:auto; max-height:500px; }
.empty-state { padding:36px 20px; text-align:center; color:var(--muted); font-size:11px; line-height:2; }

/* ── HISTORY LIST ── */
.history-item { padding:10px 13px; border-bottom:1px solid var(--border); cursor:pointer; transition:background 0.12s; display:flex; justify-content:space-between; align-items:center; }
.history-item:hover { background:rgba(255,255,255,0.03); }
.history-item.active { background:rgba(200,168,75,0.08); border-left:2px solid var(--accent); }
.history-item .hi-ticker { font-weight:600; color:var(--text); }
.history-item .hi-meta { font-size:10px; color:var(--muted); margin-top:2px; }
.history-item .hi-score { font-size:12px; color:var(--accent2); font-weight:600; }

/* ── MODAL ── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:200; display:none; align-items:center; justify-content:center; }
.modal-overlay.open { display:flex; }
.modal { background:var(--bg1); border:1px solid var(--border2); border-radius:8px; width:480px; max-width:90vw; max-height:85vh; overflow-y:auto; }
.modal-header { padding:14px 16px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.modal-body { padding:16px; }

/* ── TOAST ── */
.toast { position:fixed; bottom:24px; right:24px; background:var(--bg2); border:1px solid var(--border2); border-radius:6px; padding:10px 18px; font-size:12px; color:var(--text); z-index:300; opacity:0; transform:translateY(8px); transition:all 0.25s; pointer-events:none; max-width:320px; }
.toast.show { opacity:1; transform:translateY(0); }
.toast.success { border-color:rgba(61,220,151,0.4); color:var(--green); }
.toast.error { border-color:rgba(240,90,90,0.4); color:var(--red); }

/* ── TEXT HELPERS ── */
.text-muted { color:var(--muted2); }
.text-green { color:var(--green); }
.text-red { color:var(--red); }
.text-gold { color:var(--accent2); }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .grid-2 { grid-template-columns:1fr; }
  .stats-row { grid-template-columns:repeat(3,1fr); }
  .trade-row { grid-template-columns:80px 60px 50px 1fr 1fr 1fr; }
  .trade-row > span:nth-child(8) { display:none; }
  .tabs { overflow-x:auto; }
}