:root { color-scheme: dark; --bg:#080b10; --panel:#10151d; --panel-2:#141b25; --line:#26303e; --muted:#8691a2; --text:#f1f5f9; --green:#43d19e; --amber:#f2b84b; --red:#fb7185; --blue:#60a5fa; }
* { box-sizing: border-box; }
body { margin:0; background:radial-gradient(circle at 80% -20%,#14253a 0,transparent 34rem),var(--bg); color:var(--text); font:14px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,select { font:inherit; }
.topbar { min-height:124px; padding:28px clamp(20px,4vw,64px); display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
.eyebrow { color:var(--green); font-size:11px; font-weight:800; letter-spacing:.18em; margin:0 0 4px; }
h1 { font-size:clamp(26px,3vw,38px); letter-spacing:-.035em; margin:0; }
.subtitle { color:var(--muted); margin:5px 0 0; }
.toolbar,.connection,.view-bar,.filters,.tabs,.contract-title,.head-status { display:flex; align-items:center; }
.toolbar { gap:18px; }.connection { gap:8px; color:var(--muted); }
#connection-dot { width:8px; height:8px; border-radius:50%; background:var(--amber); box-shadow:0 0 12px currentColor; }
#connection-dot.online { background:var(--green); } #connection-dot.offline { background:var(--red); }
button { color:var(--text); background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:9px 14px; cursor:pointer; }
button:hover { border-color:#435166; } button:disabled { opacity:.5; cursor:wait; }
main { max-width:1680px; margin:0 auto; padding:28px clamp(16px,3vw,48px) 80px; }
.summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.summary-card { background:linear-gradient(145deg,var(--panel-2),var(--panel)); border:1px solid var(--line); border-radius:12px; padding:15px 18px; display:flex; justify-content:space-between; align-items:baseline; }
.summary-card span { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }.summary-card strong { font-size:24px; }.summary-card.accent strong { color:var(--green); }
.view-bar { justify-content:space-between; margin:30px 0 18px; border-bottom:1px solid var(--line); }.tabs { gap:4px; }
.tab { border:0; border-bottom:2px solid transparent; background:none; border-radius:0; padding:11px 14px; color:var(--muted); }.tab.active { color:var(--text); border-bottom-color:var(--green); }
.filters { gap:16px; padding-bottom:8px; }.search { display:flex; align-items:center; width:240px; border:1px solid var(--line); border-radius:8px; padding:0 10px; background:var(--panel); color:var(--muted); }
.search input { width:100%; padding:8px; color:var(--text); border:0; outline:0; background:transparent; }.auto-refresh { color:var(--muted); font-size:12px; white-space:nowrap; }
.best-filters { display:flex; align-items:center; gap:9px; }.best-filters label { display:flex; align-items:center; gap:5px; color:var(--muted); font-size:11px; white-space:nowrap; }.best-filters select,.best-filters input { height:32px; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:7px; padding:4px 7px; }.best-filters input { width:58px; }
.section-intro { display:flex; align-items:end; justify-content:space-between; margin:22px 0 14px; }.section-intro h2 { margin:0; font-size:19px; }.section-intro p { color:var(--muted); margin:4px 0 0; }
.freshness { color:var(--muted); font:12px ui-monospace,SFMono-Regular,Menlo,monospace; }.operator-rows { display:grid; gap:12px; }
.operator-row { overflow:hidden; background:linear-gradient(110deg,#111822,#0f141c); border:1px solid var(--line); border-radius:12px; }.operator-row:hover { border-color:#3a485b; }
.row-head { min-height:58px; display:flex; align-items:center; justify-content:space-between; padding:11px 16px; border-bottom:1px solid var(--line); }.contract-title,.head-status { gap:10px; }
.ticker { color:var(--green); font-size:19px; font-weight:850; letter-spacing:.03em; }.contract { font-size:15px; }.age { color:var(--muted); font:12px ui-monospace,SFMono-Regular,Menlo,monospace; }
.badge { display:inline-flex; border:1px solid #384557; border-radius:99px; padding:3px 8px; color:#b8c2d0; background:#18202b; font-size:10px; font-weight:750; letter-spacing:.05em; }
.actionability[data-tone="manage"],.actionability[data-tone="queued"] { color:var(--green); border-color:#265e4d; background:#102a23; }
.actionability[data-tone="working"],.actionability[data-tone="filled"] { color:var(--blue); border-color:#274d77; background:#102238; }.actionability[data-tone="blocked"] { color:var(--red); border-color:#6e3040; background:#30151c; }
.lifecycle { padding:9px 16px; display:flex; gap:0; border-bottom:1px solid var(--line); overflow-x:auto; }.lifecycle span { position:relative; min-width:94px; color:#586577; font:10px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.04em; }
.lifecycle span:not(:last-child)::after { content:"→"; position:absolute; right:15px; color:#3c4857; }.lifecycle .complete { color:#638d80; }.lifecycle .current { color:var(--green); font-weight:800; }
.row-grid { display:grid; grid-template-columns:1.05fr 1.25fr 1.25fr 1.2fr; }.data-group { min-width:0; padding:14px 16px 16px; }.data-group + .data-group { border-left:1px solid var(--line); }
.data-group h3 { color:#aeb8c6; font-size:11px; letter-spacing:.09em; text-transform:uppercase; margin:0 0 11px; } dl { margin:0; } dl div { min-height:25px; display:grid; grid-template-columns:105px minmax(0,1fr); gap:8px; align-items:baseline; }
dt { color:var(--muted); font-size:11px; } dd { min-width:0; margin:0; font:12px ui-monospace,SFMono-Regular,Menlo,monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.reason-row dd { color:#fda4af; }.positive { color:var(--green); }.negative { color:var(--red); }
.loading,.empty-state,.error-banner { padding:38px; text-align:center; border:1px dashed var(--line); border-radius:12px; color:var(--muted); }.empty-state { display:flex; flex-direction:column; gap:4px; }.error-banner { color:#fecdd3; background:#2b141b; border-style:solid; border-color:#632c3a; }
.best-trades { background:linear-gradient(110deg,#111822,#0f141c); border:1px solid var(--line); border-radius:12px; overflow:hidden; }.table-scroll { overflow-x:auto; }.best-trades table { width:100%; min-width:1520px; border-collapse:collapse; }.best-trades th { position:sticky; top:0; padding:0; color:var(--muted); background:#121923; border-bottom:1px solid var(--line); font-size:10px; letter-spacing:.06em; text-align:left; text-transform:uppercase; white-space:nowrap; }.sort-heading { width:100%; min-height:38px; display:flex; align-items:center; gap:5px; padding:9px 10px; color:inherit; background:transparent; border:0; border-radius:0; font-size:inherit; font-weight:inherit; letter-spacing:inherit; text-align:left; text-transform:inherit; white-space:nowrap; }.sort-heading:hover { color:var(--text); background:#192331; border-color:transparent; }.sort-heading:focus-visible { outline:2px solid var(--blue); outline-offset:-2px; }.sort-heading span { min-width:9px; color:var(--green); font-size:8px; }.best-trades th[aria-sort="ascending"] .sort-heading,.best-trades th[aria-sort="descending"] .sort-heading { color:var(--text); }.best-trades td { padding:11px 10px; border-bottom:1px solid #202936; font:12px ui-monospace,SFMono-Regular,Menlo,monospace; vertical-align:top; white-space:nowrap; }.best-trades tbody tr:last-child td { border-bottom:0; }.best-trades tbody tr:hover { background:#151e29; }.best-ticker { color:var(--green); font-weight:850 !important; font-size:14px !important; }.execution-reason { max-width:230px; margin-top:4px; overflow:hidden; color:#fda4af; font-size:10px; text-overflow:ellipsis; }.execution-state[data-tone="fresh"],.execution-state[data-tone="intent-created"],.execution-state[data-tone="already-open"] { color:var(--green); border-color:#265e4d; background:#102a23; }.execution-state[data-tone="order-working"],.execution-state[data-tone="filled"] { color:var(--blue); border-color:#274d77; background:#102238; }.execution-state[data-tone="failed-stale"],.execution-state[data-tone="failed"],.execution-state[data-tone="cancelled"],.execution-state[data-tone="stale"] { color:var(--red); border-color:#6e3040; background:#30151c; }
[hidden] { display:none !important; }
@media (max-width:1350px) { .view-bar { align-items:flex-start; }.filters { flex-wrap:wrap; justify-content:flex-end; }.best-filters { flex-wrap:wrap; justify-content:flex-end; } }
@media (max-width:1100px) { .row-grid { grid-template-columns:1fr 1fr; }.data-group:nth-child(3) { border-left:0; border-top:1px solid var(--line); }.data-group:nth-child(4) { border-top:1px solid var(--line); } }
@media (max-width:720px) { .topbar,.view-bar,.section-intro { align-items:flex-start; flex-direction:column; gap:16px; }.summary-grid { grid-template-columns:1fr 1fr; }.summary-card { flex-direction:column; }.filters { width:100%; flex-wrap:wrap; }.search { width:100%; }.row-head { align-items:flex-start; gap:10px; }.head-status { flex-direction:column; align-items:flex-end; }.row-grid { grid-template-columns:1fr; }.data-group + .data-group { border-left:0; border-top:1px solid var(--line); } }

.login-page { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card { width:100%; max-width:420px; padding:32px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.login-card form,.login-card label { display:grid; gap:10px; }
.login-card form { gap:20px; margin-top:28px; }
.login-card input { width:100%; padding:12px; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:8px; }
.login-card input:focus-visible { outline:2px solid var(--blue); }
#login-error { margin:0; color:var(--red); }