:root{--bg:#0b1020;--panel:#141c33;--panel2:#182240;--text:#edf3ff;--muted:#9cb0d7;--border:#263454;--ok:#1f7a4f;--warn:#8a5a18;--paper:#1b6f57;--live:#8d2f2f}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#0a1020,#101833);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}
.app-shell{display:flex;min-height:100vh}
.sidebar{width:240px;background:#0d1327;border-right:1px solid var(--border);padding:22px;position:sticky;top:0;height:100vh}
.brand{font-size:24px;font-weight:800;margin-bottom:22px}
.sidebar nav{display:flex;flex-direction:column;gap:8px}
.sidebar a{color:var(--muted);text-decoration:none;padding:10px 12px;border-radius:12px}
.sidebar a.active,.sidebar a:hover{background:var(--panel);color:var(--text)}
.main{flex:1;padding:24px}
h1{margin:0 0 6px 0;font-size:30px} h2{margin:0 0 12px 0;font-size:18px}
.muted{color:var(--muted)}
.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap}
.grid{display:grid;gap:16px;margin-bottom:16px}
.grid-4{grid-template-columns:repeat(4,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:rgba(20,28,51,.95);border:1px solid var(--border);border-radius:20px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.stat .label{text-transform:uppercase;color:var(--muted);font-size:12px;letter-spacing:.08em;margin-bottom:8px}
.stat .value{font-size:28px;font-weight:800}.stat .small{font-size:14px;word-break:break-word}
.pill{padding:8px 14px;border-radius:999px;font-weight:700}.pill.paper{background:var(--paper)}.pill.live{background:var(--live)}
button{background:#25385f;color:var(--text);border:1px solid #385181;padding:10px 14px;border-radius:12px;cursor:pointer} button:hover{filter:brightness(1.05)}
label{display:block;font-size:13px;color:var(--muted);margin:10px 0 6px}
input,select,textarea{width:100%;background:var(--panel2);border:1px solid var(--border);color:var(--text);border-radius:12px;padding:10px}
.kv{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06)}
pre{margin:0;white-space:pre-wrap;word-break:break-word;background:var(--panel2);padding:14px;border-radius:14px}
.alert{padding:12px 14px;border-radius:14px;margin-bottom:16px}.alert.ok{background:rgba(31,122,79,.24);border:1px solid rgba(31,122,79,.5)}.alert.warn{background:rgba(138,90,24,.24);border:1px solid rgba(138,90,24,.5)}
.tablewrap{overflow:auto} table{width:100%;border-collapse:collapse;font-size:13px} th,td{padding:10px 8px;border-bottom:1px solid rgba(255,255,255,.06);text-align:left} th{position:sticky;top:0;background:var(--panel)}
.plain-list{list-style:none;padding:0;margin:0}.profile-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06)}
@media (max-width:1200px){.grid-4{grid-template-columns:repeat(2,1fr)}} @media (max-width:900px){.sidebar{display:none}.grid-3,.grid-2,.grid-4{grid-template-columns:1fr}.topbar{flex-direction:column}}

/* Order desk & cooldown queue */
.btn-danger{background:#8d2f2f;border-color:#b33a3a;font-weight:700}
.btn-danger:hover{background:#a33535;filter:brightness(1.1)}
.cooldown-row{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;margin-bottom:8px;background:rgba(138,90,24,.18);border:1px solid rgba(138,90,24,.45);border-radius:14px;animation:cooldown-pulse 1.2s ease-in-out infinite}
.cooldown-row.expired{animation:none;opacity:.5;background:rgba(31,122,79,.15);border-color:rgba(31,122,79,.4)}
.cooldown-info{display:flex;flex-direction:column;gap:4px}
.cooldown-symbol{font-weight:700;font-size:15px}
.cooldown-timer{display:flex;align-items:center;gap:12px}
.countdown{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;min-width:48px;text-align:center;color:#f0c040}
@keyframes cooldown-pulse{0%,100%{border-color:rgba(138,90,24,.45)}50%{border-color:rgba(240,192,64,.7)}}

/* Order status badges */
.order-status{display:inline-block;padding:3px 10px;border-radius:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.order-status.cooldown{background:rgba(240,192,64,.22);color:#f0c040;border:1px solid rgba(240,192,64,.4)}
.order-status.sending{background:rgba(100,160,255,.22);color:#7db8ff;border:1px solid rgba(100,160,255,.4)}
.order-status.sent{background:rgba(31,122,79,.22);color:#5dd39e;border:1px solid rgba(31,122,79,.5)}
.order-status.filled{background:rgba(31,122,79,.35);color:#5dd39e;border:1px solid rgba(31,122,79,.7)}
.order-status.failed,.order-status.rejected,.order-status.broker_rejected{background:rgba(141,47,47,.22);color:#f06060;border:1px solid rgba(141,47,47,.5)}
.order-status.cancelled{background:rgba(100,100,120,.22);color:var(--muted);border:1px solid rgba(100,100,120,.4)}
td.small,.small{font-size:12px;word-break:break-word}