:root {
  --bg:#0f1117;--surface:#1a1d27;--surface2:#242836;--border:#2d3248;
  --text:#e8eaed;--text2:#9aa0b4;--accent:#4fc3f7;--accent2:#81d4fa;
  --green:#66bb6a;--red:#ef5350;--yellow:#ffd54f;--radius:12px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.6}
#app{max-width:1400px;margin:0 auto;padding:0 20px 40px}

.hero{background:linear-gradient(135deg,#17324d 0%,#254966 60%,#8f5a2a 100%);border-radius:18px;padding:24px 28px;margin:20px 0;box-shadow:0 14px 34px rgba(23,50,77,.3)}
.hero h1{font-size:1.6rem;font-weight:700;color:#f7f1e8;margin-bottom:4px}
.hero p{color:#e6ddcf;font-size:.9rem}

.controls{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:20px;padding:16px 20px;background:var(--surface);border-radius:var(--radius);border:1px solid var(--border)}
.control-group{display:flex;align-items:center;gap:8px}
.control-group label{font-size:.75rem;font-weight:600;text-transform:uppercase;color:var(--text2);letter-spacing:.4px}
.control-group input[type=range]{width:140px;accent-color:var(--accent)}
#threshold-val{font-weight:700;color:var(--accent);min-width:28px}
.update-time{margin-left:auto;color:var(--text2);font-size:.8rem}

.btn-primary{padding:10px 20px;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;border:none;background:linear-gradient(135deg,var(--accent),#29b6f6);color:#000;transition:all .2s}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(79,195,247,.3)}
.btn-primary:disabled{opacity:.4;cursor:not-allowed}

.status{padding:12px 20px;border-radius:8px;margin-bottom:16px;font-size:.9rem;display:flex;align-items:center;gap:10px}
.status.loading{background:rgba(79,195,247,.1);border:1px solid rgba(79,195,247,.3);color:var(--accent)}
.status.error{background:rgba(239,83,80,.1);border:1px solid rgba(239,83,80,.3);color:var(--red)}
.status.success{background:rgba(102,187,106,.1);border:1px solid rgba(102,187,106,.3);color:var(--green)}
.hidden{display:none!important}
.spinner{width:18px;height:18px;border:2px solid transparent;border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.metrics-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
@media(max-width:768px){.metrics-row{grid-template-columns:1fr 1fr}}
.metric-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px}
.metric-label{font-size:.7rem;color:var(--text2);text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px}
.metric-value{font-size:1.3rem;font-weight:700}

.section{margin-bottom:24px}
.section h2{font-size:1.1rem;color:var(--accent);margin-bottom:12px}

.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border)}
table{width:100%;border-collapse:collapse;font-size:.8rem}
thead th{position:sticky;top:0;background:var(--surface2);padding:10px 10px;text-align:left;font-weight:600;color:var(--accent);border-bottom:2px solid var(--border);white-space:nowrap}
tbody td{padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
tbody tr:hover{background:rgba(79,195,247,.05)}

.buy{color:var(--green);font-weight:700}
.sell{color:var(--red);font-weight:700}
.hold{color:var(--text2)}
.strength-high{color:var(--green);font-weight:700}
.strength-med{color:var(--yellow);font-weight:700}
.strength-low{color:var(--text2)}
.pnl-pos{color:var(--green);font-weight:700}
.pnl-neg{color:var(--red);font-weight:700}
.pnl-flat{color:var(--text2)}

.pnl-row{display:flex;gap:20px;margin-bottom:12px}
.pnl-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px 16px}
.pnl-card .label{font-size:.7rem;color:var(--text2);text-transform:uppercase}
.pnl-card .value{font-size:1.1rem;font-weight:700}

.help-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px}
.help-section summary{padding:12px 16px;cursor:pointer;font-weight:600;font-size:.9rem;color:var(--text2)}
.help-section.danger summary{color:var(--red)}
.help-content{padding:0 16px 16px;font-size:.85rem;color:var(--text2);line-height:1.8}
.help-content p{margin-bottom:8px}
.help-content strong{color:var(--text)}

.footer{text-align:center;padding:24px 0;color:var(--text2);font-size:.8rem;border-top:1px solid var(--border);margin-top:32px}