/* No inline styles anywhere: the server sends a strict CSP
   (style-src 'self'), so every rule lives in this file. */
:root {
  --bg:#0e1116; --panel:#161b22; --panel2:#1c232c; --line:#2a323d;
  --text:#e6edf3; --muted:#8b97a6; --dim:#5b6673;
  --up:#2ea043; --down:#f2545b; --warn:#d29922; --accent:#4a9eff; --violet:#c98bdb;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
h1{font-size:15px;margin:0;font-weight:600;letter-spacing:.2px}
h2{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);
  margin:0 0 12px;font-weight:600}
a{color:var(--accent);text-decoration:none}
.dim{color:var(--dim);font-weight:400}
.muted{color:var(--muted)}
.grow{flex:1}
.grow2{flex:2}
.mono{font-family:var(--mono)}
.up{color:var(--up)} .down{color:var(--down)} .warn{color:var(--warn)}

header{display:flex;align-items:center;gap:16px;padding:13px 22px;background:var(--panel);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;flex-wrap:wrap}
nav{display:flex;gap:6px}
nav a{padding:5px 12px;border-radius:6px;color:var(--muted);font-size:13px}
nav a:hover{background:var(--panel2);color:var(--text)}
nav a.active{background:var(--panel2);color:var(--text)}

.page{display:none;padding:18px 22px 60px;max-width:1500px;margin:0 auto}
.page.active{display:block}

.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;margin-bottom:14px}
.grid{display:grid;gap:14px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(380px,1fr))}
.grid.four{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid .card{margin-bottom:0}
.tile .big{font-size:25px;font-weight:600;font-family:var(--mono);line-height:1.2}
.big{font-size:25px;font-weight:600;font-family:var(--mono)}
.sub{color:var(--muted);font-size:12px;margin-top:4px}
.note{color:var(--muted);font-size:12px;margin:0 0 10px}
.empty{color:var(--dim);font-size:13px;text-align:center;padding:24px 0;margin:0}

.row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:10px}
.row:last-child{margin-bottom:0}
.field{display:flex;flex-direction:column;gap:5px;min-width:130px}
.field>span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
input,select{font:inherit;font-size:13px;padding:7px 9px;border-radius:7px;
  border:1px solid var(--line);background:var(--bg);color:var(--text);width:100%}
input[type=file]{padding:5px;font-size:12px}
button{font:inherit;font-size:13px;font-weight:500;padding:8px 15px;border-radius:7px;
  border:1px solid var(--line);background:var(--panel2);color:var(--text);cursor:pointer}
button:hover:not(:disabled){border-color:var(--accent)}
button:disabled{opacity:.4;cursor:not-allowed}
button.primary{background:var(--accent);border-color:var(--accent);color:#04121f}
button.danger{color:var(--down)}
button.ghost{background:transparent}
button.link{background:none;border:none;color:var(--accent);padding:2px 4px}

.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;
  font-size:12px;font-weight:600;background:var(--panel2);color:var(--muted);
  border:1px solid var(--line)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.on{color:var(--up);border-color:rgba(46,160,67,.4)}
.pill.off{color:var(--dim)}
.pill.err{color:var(--down);border-color:rgba(242,84,91,.4)}
.pill.warn{color:var(--warn);border-color:rgba(210,153,34,.4)}

.gauge{position:relative;height:9px;background:var(--bg);border:1px solid var(--line);
  border-radius:5px;overflow:hidden;margin-top:9px}
.gauge-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);
  transition:width .3s}
.gauge-mark{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--warn)}

table{width:100%;border-collapse:collapse;font-size:12.5px}
th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted);font-weight:600;padding:6px 9px;border-bottom:1px solid var(--line)}
td{padding:6px 9px;border-bottom:1px solid rgba(42,50,61,.5);font-family:var(--mono)}
tbody tr:last-child td{border-bottom:none}
tr.pick{cursor:pointer}
tr.pick:hover td{background:var(--panel2)}
tr.sel td{background:var(--panel2)}
.scroll{overflow-x:auto}

.kv{display:flex;justify-content:space-between;gap:12px;padding:5px 0;
  border-bottom:1px solid rgba(42,50,61,.45);font-size:12.5px}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--muted)}
.kv .v{font-family:var(--mono);text-align:right}

.chart-wrap{width:100%;overflow-x:auto}
svg.chart{display:block;width:100%;height:auto}

.banner{padding:9px 14px;border-radius:8px;font-size:12.5px;margin:0 22px 12px;
  border:1px solid rgba(210,153,34,.35);background:rgba(210,153,34,.08);color:var(--warn)}
.banner.error{border-color:rgba(242,84,91,.35);background:rgba(242,84,91,.08);color:var(--down)}
.banner.info{border-color:rgba(74,158,255,.3);background:rgba(74,158,255,.07);color:var(--accent)}
#alerts:empty{display:none}
#alerts{padding-top:12px}

.costs{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:10px}
.costs summary{cursor:pointer;font-size:12px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.5px}
.costs[open] summary{margin-bottom:10px}

.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:50;
  align-items:center;justify-content:center;padding:20px}
.modal-backdrop.open{display:flex}
.modal{max-width:480px;width:100%;margin:0}
.tag{display:inline-block;padding:1px 7px;border-radius:5px;font-size:10.5px;
  font-weight:600;letter-spacing:.4px;text-transform:uppercase;border:1px solid var(--line);
  color:var(--muted)}
.tag.synthetic{color:var(--warn);border-color:rgba(210,153,34,.4)}
.tag.running{color:var(--accent);border-color:rgba(74,158,255,.4)}
.tag.completed{color:var(--up);border-color:rgba(46,160,67,.4)}
.tag.failed{color:var(--down);border-color:rgba(242,84,91,.4)}
.hidden{display:none}
.legend{display:flex;gap:16px;font-size:11.5px;color:var(--muted);margin-top:8px;flex-wrap:wrap}
.legend i{display:inline-block;width:11px;height:2.5px;vertical-align:middle;margin-right:5px}
.fold{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:8px}
.fold h3{font-size:12px;margin:0 0 8px;color:var(--muted);font-weight:600}

/* Separate, persistent live-paper defaults. */
#paper-parameters { margin-top: 20px; border-top: 1px solid var(--border, #334155); padding-top: 16px; }
#paper-parameters summary { cursor: pointer; font-size: 16px; }
#paper-settings-fields { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.paper-group { margin: 20px 0; }
.paper-group h3 { font-size: 15px; margin-bottom: 12px; }
.paper-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.paper-grid .field span { font-size: 14px; }
.paper-grid input, .paper-grid select { font-size: 16px; width: 100%; }
#paper-settings-fields:disabled { opacity: .65; }
#paper-settings-status { display: inline-block; margin: 10px; font-size: 14px; }

/* Trading workspace: graphite surfaces, mint actions, generous data hierarchy. */
:root { --bg:#0b1014; --panel:#121a20; --panel2:#1a252d; --line:#29353e; --text:#e9f1f3; --muted:#a0b1bd; --dim:#82939f; --accent:#74e2c1; --up:#74e2c1; --down:#ff8392; --warn:#f1c578; }
body { font-size:16px; line-height:1.55; padding-left:232px; background:radial-gradient(ellipse at 90% 0%,#17282b 0,transparent 50%),var(--bg); }
header { position:fixed; inset:0 auto 0 0; width:232px; padding:32px 20px 24px; flex-direction:column; align-items:stretch; gap:18px; border-right:1px solid var(--line); border-bottom:0; background:#0e161b; flex-wrap:nowrap; }
.brand { display:flex; gap:12px; align-items:center; color:var(--text); font-size:23px; font-weight:650; letter-spacing:-.6px; margin-bottom:38px; }
.brand small { display:block; font-size:10px; letter-spacing:1.5px; color:var(--muted); margin-top:2px; }
.brand-mark { display:flex; align-items:center; justify-content:center; width:40px; height:42px; background:var(--accent); border-radius:12px; color:#102923; font-size:26px; }
.brand-mark span { font-size:18px; margin-left:-4px; }
nav { flex-direction:column; gap:8px; }
nav a { padding:13px 14px; font-size:15px; border:1px solid transparent; border-radius:9px; display:flex; gap:13px; align-items:center; }
nav a.active { background:#1c3331; color:var(--accent); border-color:#2e5049; }
.nav-icon { font-size:23px; width:23px; line-height:1; }
.sidebar-note { display:flex; flex-direction:column; gap:9px; padding:22px 8px; margin-top:28px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
.sidebar-note strong { color:var(--text); font-size:16px; }.sidebar-note .tag { align-self:flex-start; margin-top:8px; }
.page { padding:36px 36px 64px; max-width:1640px; }
.page-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:28px; }
.page-heading h1 { font-size:30px; font-weight:600; letter-spacing:-1px; }
.page-heading p:not(.eyebrow) { font-size:14px; color:var(--muted); margin:7px 0 0; }
.eyebrow { color:var(--muted); font-size:12px; font-weight:600; letter-spacing:1.7px; margin:0 0 9px; }
.workspace-badge { white-space:nowrap; font-size:13px; padding:8px 12px; border:1px solid var(--line); border-radius:8px; }.workspace-badge span { border-left:1px solid var(--line); margin-left:10px; padding-left:10px; color:var(--muted); }
.card { border-radius:14px; padding:22px; margin-bottom:20px; box-shadow:0 4px 16px #0000000c; }
h2 { font-size:14px; letter-spacing:.2px; text-transform:none; color:var(--text); margin-bottom:18px; font-weight:600; }
.grid { gap:20px; margin-bottom:20px; }.grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }.grid.four { grid-template-columns:repeat(4,minmax(0,1fr)); }.grid>* { min-width:0; }
.tile { position:relative; padding-top:24px; background:linear-gradient(135deg,#1a252a,#121a20); }
.tile h2 { color:var(--muted); font-size:14px; font-weight:400; }.tile .big { font-family:inherit; font-variant-numeric:tabular-nums; font-size:30px; letter-spacing:-1px; font-weight:550; }.tile .sub { margin-top:12px; }
.sub,.note { font-size:14px; }.empty { font-size:14px; color:var(--muted); padding:44px 18px; border:1px dashed var(--line); border-radius:10px; margin:10px 0; }
.field { min-width:0; }.field>span { text-transform:none; letter-spacing:0; font-size:14px; }.row { gap:16px; margin-bottom:20px; }.row .field { flex:1 1 150px; }.row .grow2 { flex-grow:2; }
input,select { padding:10px 12px; font-size:16px; border-radius:8px; min-height:44px; }button { min-height:42px; padding:10px 16px; font-size:14px; border-radius:8px; transition:background .15s,border-color .15s; }button.primary { color:#092b22; font-weight:650; }button.primary:hover:not(:disabled) { background:#9cebd2; }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }input:focus,select:focus { border-color:var(--accent); }button:disabled { opacity:.5; }
.pill { font-size:13px; padding:6px 10px; }.pill.on { border-color:#355e50; }.pill.off { color:var(--muted); }.tag { font-size:12px; padding:3px 8px; }
.market-heading { display:flex; justify-content:space-between; gap:20px; margin-bottom:20px; }.market-heading h2 { font-size:22px; letter-spacing:-.5px; margin:0; }.market-heading h2 .dim { display:block; font-size:13px; letter-spacing:0; margin-top:5px; }.market-price { text-align:right; display:flex; flex-direction:column; }.market-price strong { font-size:30px; font-weight:550; font-variant-numeric:tabular-nums; letter-spacing:-.7px; }.market-price span { font-size:13px; color:var(--muted); }
#live-chart .empty { min-height:240px; display:grid; place-content:center; background:repeating-linear-gradient(0deg,transparent,transparent 59px,#24313a66 60px); }
svg.chart { min-height:180px; }.chart-wrap { margin-top:8px; }
table { font-size:14px; }th { font-size:12px; padding:12px 10px; background:#0e161b; }td { padding:13px 10px; font-size:13px; }tbody tr:hover { background:#ffffff03; }.kv { font-size:14px; padding:10px 0; }.kv .v { overflow-wrap:anywhere; min-width:0; }.scroll { scrollbar-width:thin; }.legend { font-size:13px; }
#live-setup { border-top:2px solid #48776b; }#live-setup h2 { margin-bottom:8px; }#live-help { margin-bottom:20px; }.costs { padding:16px; margin:20px 0; }.costs summary { font-size:14px; text-transform:none; }.fold { padding:18px; }.fold h3 { font-size:14px; }
.banner { font-size:14px; margin:0 36px 12px; }.modal { padding:30px; border-color:#40555e; box-shadow:0 24px 100px #0009; }.modal-backdrop { backdrop-filter:blur(6px); }.hidden { display:none; }
.skip-link { position:fixed; top:-100px; left:250px; z-index:100; background:var(--panel); padding:12px; }.skip-link:focus { top:12px; }
@media(min-width:1250px) { #page-signals.active { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:0 24px; }#page-signals>.page-heading,#page-signals>.grid { grid-column:1/-1; }#live-tiles { grid-row:2; }#live-setup { grid-column:2; grid-row:3; align-self:start; }#page-signals>.market-panel { grid-column:1; grid-row:3; align-self:start; }#live-setup .row { align-items:stretch; }#live-setup .row .field { flex-basis:100%; }#live-setup #live-status { align-self:center; }#live-setup:has(details[open]) { grid-column:1/-1; grid-row:3; }#live-setup:has(details[open])~.market-panel { grid-column:1/-1; grid-row:4; } }
@media(max-width:1100px) { body { padding-left:190px; }header { width:190px; padding:26px 14px; }.brand { font-size:20px; }.page { padding:28px 22px; }.grid.four { grid-template-columns:repeat(2,minmax(0,1fr)); }.grid.two { grid-template-columns:1fr; }.workspace-badge { display:none; } }
@media(max-width:700px) { body { padding-left:0; }header { position:relative; width:auto; padding:16px; flex-direction:row; flex-wrap:wrap; align-items:center; gap:12px; }.brand { margin:0 auto 0 0; }.brand small,.sidebar-note,header>.grow { display:none; }header nav { flex-direction:row; order:3; width:100%; }nav a { flex:1; justify-content:center; padding:10px 5px; font-size:14px; gap:7px; }.nav-icon { font-size:19px; }#conn-pill { display:none; }.page { padding:24px 16px; }.page-heading h1 { font-size:27px; }.card { padding:18px; }.grid { gap:12px; }.tile .big { font-size:25px; }.tile .sub { font-size:13px; }.market-heading h2 { font-size:19px; }.market-price strong { font-size:24px; }.banner { margin:0 16px 12px; }.skip-link { left:16px; } }
@media(prefers-reduced-motion:reduce) { * { transition:none!important; } }
.login-page { padding:24px; min-height:100vh; display:grid; place-items:center; }
.login-card { width:100%; max-width:440px; padding:38px; box-shadow:0 24px 100px #0004; }
.login-card .brand { margin-bottom:40px; }.login-card h1 { font-size:30px; letter-spacing:-1px; margin-bottom:10px; }
.login-card form { margin-top:28px; }.login-card button { width:100%; }.login-foot { margin:24px 0 0; font-size:13px; color:var(--muted); text-align:center; }
#login-error { font-size:14px; color:var(--down); }#logout-btn { margin-top:4px; }