* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg:#0d1117; --bg2:#161b22; --bg3:#1c2333;
  --fg:#e6edf3; --fg2:#8b949e;
  --green:#3fb950; --red:#f85149; --yellow:#d29922;
  --blue:#58a6ff; --purple:#bc8cff;
  --border:#30363d; --radius:6px;
  --font:system-ui,-apple-system,sans-serif;
  --mono:'SF Mono','Cascadia Code','Fira Code',monospace;
}
body { background:var(--bg); color:var(--fg); font-family:var(--font); }
#app { display:flex; min-height:100vh; }

/* Sidebar */
#sidebar {
  width:300px; min-width:300px;
  background:var(--bg2); border-right:1px solid var(--border);
  padding:16px; overflow-y:auto;
  display:flex; flex-direction:column; gap:16px;
}
.sidebar-header { display:flex; align-items:center; gap:8px; }
.sidebar-header h1 { font-size:16px; }
.env-badge {
  font-size:11px; padding:2px 8px; border-radius:10px;
  background:var(--yellow); color:#000; font-weight:600;
}
.env-badge.live { background:var(--red); }

.signal-form { display:flex; flex-direction:column; gap:8px; }
.signal-form select,.signal-form input {
  background:var(--bg3); color:var(--fg); border:1px solid var(--border);
  padding:8px; border-radius:var(--radius); font-size:13px;
}

.btn-primary,.btn-secondary,.btn-exec,.btn-danger,.btn-small {
  padding:8px 16px; border:none; border-radius:var(--radius);
  font-size:13px; font-weight:600; cursor:pointer; transition:.15s;
}
.btn-primary { background:var(--blue); color:#fff; }
.btn-secondary { background:var(--bg3); color:var(--fg); border:1px solid var(--border); }
.btn-exec { background:var(--green); color:#000; width:100%; }
.btn-danger { background:var(--red); color:#fff; width:100%; }
.btn-small { padding:4px 10px; font-size:11px; background:var(--bg3); color:var(--fg); border:1px solid var(--border); cursor:pointer; border-radius:var(--radius); }
.btn-primary:hover,.btn-exec:hover,.btn-danger:hover { filter:brightness(1.15); }

.trade-panel { background:var(--bg3); border-radius:var(--radius); padding:12px; }
.trade-panel h3 { font-size:13px; margin-bottom:8px; }
.btn-group { display:flex; gap:4px; }
.trade-btn {
  flex:1; padding:8px; border:none; border-radius:var(--radius);
  font-size:12px; font-weight:600; cursor:pointer; transition:.15s;
}
.trade-btn.long { background:#1a3a2a; color:var(--green); }
.trade-btn.long.active { background:var(--green); color:#000; }
.trade-btn.short { background:#3a1a1a; color:var(--red); }
.trade-btn.short.active { background:var(--red); color:#fff; }
.trade-panel input { width:100%; margin-top:4px; }

.account-info { background:var(--bg3); border-radius:var(--radius); padding:12px; }
.account-info h3 { font-size:13px; }
#accountBalance { font-size:22px; font-weight:700; font-family:var(--mono); }

/* Main */
#main { flex:1; padding:16px; display:flex; flex-direction:column; gap:12px; overflow-y:auto; }
.card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:16px; }
.card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.card-header h2 { font-size:15px; }
.ts { color:var(--fg2); font-size:12px; font-family:var(--mono); }
.status-badge { font-size:11px; padding:3px 10px; border-radius:10px; background:var(--bg3); }
.status-badge.long { background:#1a3a2a; color:var(--green); }
.status-badge.short { background:#3a1a1a; color:var(--red); }
.status-badge.entry { background:var(--yellow); color:#000; }

.signal-metrics { display:flex; gap:16px; flex-wrap:wrap; }
.metric { display:flex; flex-direction:column; min-width:80px; }
.metric label { font-size:11px; color:var(--fg2); text-transform:uppercase; letter-spacing:.5px; }
.val-lg { font-size:20px; font-weight:700; font-family:var(--mono); }

.tf-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(70px,1fr)); gap:6px; }
.tf-cell {
  padding:6px 4px; text-align:center; border-radius:var(--radius);
  font-size:11px; border:1px solid var(--border);
}
.tf-cell .tf-name { font-weight:600; color:var(--fg2); }
.tf-cell .tf-dir { font-size:13px; margin-top:2px; }
.tf-cell.long { border-color:var(--green); background:#1a3a2a22; }
.tf-cell.short { border-color:var(--red); background:#3a1a1a22; }
.tf-cell.neutral { border-color:var(--border); }

.entry-details { display:flex; gap:16px; flex-wrap:wrap; }
.entry-reason { margin-top:8px; font-size:12px; color:var(--blue); font-family:var(--mono); }

.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:12px; }
th { text-align:left; padding:8px; color:var(--fg2); border-bottom:1px solid var(--border); font-weight:600; }
td { padding:8px; border-bottom:1px solid var(--border); font-family:var(--mono); }
tr:hover td { background:var(--bg3); }

.log-wrap {
  background:#000; border-radius:var(--radius); padding:12px;
  max-height:300px; overflow-y:auto; font-size:11px; line-height:1.5;
}
#logContent { color:var(--fg2); font-family:var(--mono); white-space:pre-wrap; word-break:break-all; }

select,input { font-family:var(--font); }