:root{--bg-primary: #0f0f1a;--bg-secondary: #1a1a2e;--bg-tertiary: #16213e;--text-primary: #e0e0e0;--text-secondary: #a0a0b0;--accent: #4ecdc4;--negative: #ff6b6b;--positive: #4ecdc4;--warning: #ffb224;--border: #2a2a3e}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,monospace;background:var(--bg-primary);color:var(--text-primary);min-height:100vh}#root{display:flex;flex-direction:column;height:100vh;padding:12px;gap:12px}.header{position:relative;text-align:center;padding:8px 0}.header h1{font-size:1.2rem;font-weight:600;color:var(--text-primary)}.header span{font-size:.75rem;color:var(--text-secondary)}.stats-bar{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;padding:10px 16px;background:var(--bg-secondary);border-radius:8px;border:1px solid var(--border)}.stat{display:flex;flex-direction:column;align-items:center;gap:2px}.stat-exchange{font-size:.7rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.stat-value{font-size:.95rem;font-weight:600;font-variant-numeric:tabular-nums}.stat-value.positive{color:var(--positive)}.stat-value.negative{color:var(--negative)}.controls{display:flex;justify-content:center;gap:24px;flex-wrap:wrap}.toggle-group,.interval-group{display:flex;gap:4px}.controls button{background:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border);padding:6px 14px;font-size:.8rem;cursor:pointer;border-radius:4px;transition:all .15s}.controls button:hover{background:var(--bg-tertiary);color:var(--text-primary)}.controls button.active{background:var(--accent);color:#0f0f1a;border-color:var(--accent);font-weight:600}.chart{border-radius:6px;overflow:hidden}.spread-chart{flex:1;min-height:300px}.sub-charts{display:flex;gap:12px;min-height:200px}.price-chart-wrapper{flex:1;display:flex;flex-direction:column}.chart-title{font-size:.75rem;color:var(--text-secondary);padding:4px 8px;background:var(--bg-secondary);border-radius:6px 6px 0 0;border:1px solid var(--border);border-bottom:none}.price-chart{flex:1;min-height:180px}.error-banner{background:#ff6b6b26;border:1px solid var(--negative);color:var(--negative);padding:8px 16px;border-radius:6px;text-align:center;font-size:.85rem}.loading{display:flex;align-items:center;justify-content:center;flex:1;color:var(--text-secondary);font-size:.9rem}.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;padding:8px 0}.dashboard-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;padding:20px;text-decoration:none;color:var(--text-primary);transition:border-color .15s,background .15s}.dashboard-card:hover{border-color:var(--accent);background:var(--bg-tertiary)}.dashboard-card h2{font-size:1rem;font-weight:600;margin-bottom:6px}.dashboard-card p{font-size:.8rem;color:var(--text-secondary);line-height:1.4}.back-link{position:absolute;left:0;top:8px;color:var(--text-secondary);text-decoration:none;font-size:.8rem;transition:color .15s}.back-link:hover{color:var(--accent)}.header .address{display:block;font-family:monospace;font-size:.7rem;color:var(--text-secondary);margin-top:2px}.header-status{position:absolute;right:0;top:8px;display:flex;align-items:center;gap:8px;font-size:.75rem;color:var(--text-secondary)}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--positive)}.status-dot.error{background:var(--negative)}.status-dot.loading{background:var(--warning);animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.refresh-btn{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border);padding:4px 10px;font-size:.75rem;cursor:pointer;border-radius:4px;transition:background .15s}.refresh-btn:hover{background:var(--bg-tertiary)}.weeth-content{display:flex;flex-direction:column;gap:12px;overflow-y:auto}.metrics-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.metric-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;padding:12px 14px}.metric-label{font-size:.7rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}.metric-value{font-size:1.4rem;font-weight:700;font-variant-numeric:tabular-nums;font-family:monospace}.metric-sub{font-size:.7rem;color:var(--text-secondary);margin-top:3px;font-family:monospace}.metric-value.accent{color:var(--accent)}.metric-value.warning{color:var(--warning)}.metric-value.positive{color:var(--positive)}.metric-value.negative{color:var(--negative)}.price-bar{display:flex;gap:20px;flex-wrap:wrap;padding:10px 14px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;font-size:.8rem}.price-item{display:flex;gap:6px}.price-label{color:var(--text-secondary)}.price-val{font-family:monospace;font-weight:600}.panel{background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;padding:14px 16px}.panel-title{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border)}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}.pos-table{width:100%;border-collapse:collapse;font-size:.8rem}.pos-table th{text-align:left;padding:6px 8px;color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);font-size:.65rem;text-transform:uppercase;letter-spacing:.5px}.pos-table td{padding:8px;font-family:monospace;border-bottom:1px solid rgba(255,255,255,.03)}.pos-table tr:last-child td{border-bottom:none}.pos-table .venue{color:var(--accent);font-family:-apple-system,sans-serif;font-weight:500}.pos-table .long{color:var(--positive)}.pos-table .short{color:var(--negative)}.pos-table .total-row td{border-top:1px solid var(--border);font-weight:700;padding-top:10px;font-family:-apple-system,sans-serif;text-transform:uppercase;font-size:.65rem;letter-spacing:.5px;color:var(--text-secondary)}.cell-sub{color:var(--text-secondary);font-size:.65rem;margin-top:2px}.dim{color:var(--text-secondary)}.mono{font-family:monospace}.positive{color:var(--positive)}.negative{color:var(--negative)}.warning{color:var(--warning)}.positive-bg{background:#4ecdc41f;color:var(--positive)}.warning-bg{background:#ffb2241f;color:var(--warning)}.negative-bg{background:#ff6b6b1f;color:var(--negative)}.delta-row{display:flex;justify-content:space-between;font-size:.8rem;padding:4px 0}.delta-bar{position:relative;height:28px;background:#ffffff08;border-radius:6px;overflow:hidden;margin:10px 0}.delta-bar-left,.delta-bar-right{position:absolute;top:0;height:100%}.delta-bar-left{right:50%;background:linear-gradient(90deg,transparent,var(--positive));border-radius:6px 0 0 6px}.delta-bar-right{left:50%;background:linear-gradient(90deg,var(--negative),transparent);border-radius:0 6px 6px 0}.delta-bar-center{position:absolute;left:50%;top:0;height:100%;width:2px;background:var(--text-secondary);transform:translate(-50%)}.delta-bar-marker{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;border:2px solid var(--text-primary);transform:translate(-50%,-50%);z-index:2}.delta-status{text-align:center;font-size:.8rem;font-weight:700;padding:8px;border-radius:6px;margin-top:10px}.section-label{font-size:.65rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin:10px 0 4px}.section-label:first-child{margin-top:0}.pnl-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.03);font-size:.8rem}.pnl-row:last-child{border-bottom:none}.pnl-row.faded{opacity:.7}.pnl-row.pnl-row-divider{border-top:1px solid var(--border);margin-top:4px}.pnl-total{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;margin-top:10px;border-radius:6px;background:#ffffff08;font-weight:700;font-size:.85rem}.risk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.risk-item{padding:10px 12px;border-radius:6px;background:#ffffff05}.risk-label{font-size:.65rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.risk-val{font-family:monospace;font-weight:600;font-size:1rem}.risk-sub{font-size:.65rem;color:var(--text-secondary);margin-top:2px;font-family:monospace}@media(max-width:1100px){.metrics-grid,.risk-grid{grid-template-columns:repeat(2,1fr)}.two-col{grid-template-columns:1fr}}
