*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0a0a0a;--card:#111;--hover:#1a1a1a;--border:#222;--text:#fff;--text2:#888;--accent:#3b82f6;--green:#22c55e;--red:#ef4444;--yellow:#f59e0b;--font:SF Mono,Consolas,monospace}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.5;padding-top:48px;padding-bottom:48px}
.header{position:fixed;top:0;left:0;right:0;height:48px;background:var(--card);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:center;z-index:1000}
.header-brand{display:none}
.header-nav{display:flex;gap:4px}
.header-link{color:var(--text2);text-decoration:none;font-size:12px;letter-spacing:1px;padding:6px 16px;border:1px solid var(--border);cursor:pointer}
.header-link:hover,.header-link.active{color:var(--text);border-color:var(--accent);background:rgba(59,130,246,0.1)}
.main{padding:20px;max-width:1400px;margin:0 auto}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);border:1px solid var(--border)}
.card{background:var(--card);padding:20px}
.card:hover{background:var(--hover)}
.card-wide{grid-column:span 2}
.card-header{font-size:11px;letter-spacing:1px;color:var(--text2);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.card-body{min-height:80px}
.price-display{display:flex;align-items:baseline;gap:8px}
.price-value{font-size:28px;font-weight:700}
.price-change{font-size:12px}
.price-change.positive{color:var(--green)}
.price-change.negative{color:var(--red)}
.predict-display{text-align:center;padding:8px 0}
.predict-direction{display:block;font-size:20px;font-weight:700;letter-spacing:2px;margin-bottom:4px}
.predict-direction.buy{color:var(--green)}
.predict-direction.sell{color:var(--red)}
.predict-direction.hold{color:var(--yellow)}
.predict-reason{font-size:10px;color:var(--text2)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:8px;text-align:left;font-size:11px;border-bottom:1px solid var(--border)}
.table th{color:var(--text2);letter-spacing:1px}
.table tbody tr{cursor:pointer;transition:background 0.15s}
.table tbody tr:hover{background:var(--hover)}
.alert-item{padding:4px 8px;margin-bottom:4px;font-size:10px;letter-spacing:1px;border:1px solid}
.alert-danger{color:var(--red);border-color:var(--red);background:rgba(239,68,68,0.1)}
.alert-warning{color:var(--yellow);border-color:var(--yellow);background:rgba(245,158,11,0.1)}
.alert-info{color:var(--accent);border-color:var(--accent);background:rgba(59,130,246,0.1)}
.status-bar{position:fixed;bottom:0;left:0;right:0;height:28px;background:var(--card);border-top:1px solid var(--border);display:flex;align-items:center;padding:0 20px;gap:10px}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--red)}
.status-dot.connected{background:var(--green)}
.status-text{font-size:10px;color:var(--text2)}
.status-time{margin-left:auto;font-size:10px;color:var(--text2)}
#klineCanvas{width:100%;height:300px;background:var(--bg);border:1px solid var(--border)}
.form-input{padding:4px 8px;font-size:11px;background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:var(--font)}
.btn{padding:4px 12px;font-size:11px;cursor:pointer;font-family:var(--font);letter-spacing:1px;border:none}
.btn-buy{background:var(--accent);color:#fff}
@media(max-width:768px){.grid{grid-template-columns:1fr}.card-wide{grid-column:span 1}.price-value{font-size:22px}.predict-direction{font-size:18px}#klineCanvas{height:200px}}
.positive{color:var(--green)}
.negative{color:var(--red)}