/* Colors and base styles shared by dashboard, report and backtest page. */
:root { --bg:#f6f7f9; --card:#fff; --text:#16181d; --muted:#6b7280; --line:#e5e7eb; --grid:#eef0f3;
        --up:#0f9d58; --down:#d93025; --accent:#2563eb;
        --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --hold:#8b8f97; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#0f1115; --card:#181b21; --text:#e8eaed; --muted:#9aa0a6; --line:#2a2e36; --grid:#22262d;
          --up:#34c37a; --down:#ff6b5e; --accent:#6ea8ff;
          --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --hold:#80858e; }
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text);
       font:15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width:900px; margin:0 auto; padding:16px; }
header { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
h1 { font-size:20px; margin:0; }
a { color:var(--accent); text-decoration:none; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; margin-top:12px; }
.k { color:var(--muted); font-size:12px; }
.muted { color:var(--muted); font-size:12px; }
.note { font-size:13px; color:var(--muted); margin-top:8px; }
.scroll { overflow-x:auto; }
.up { color:var(--up); } .down { color:var(--down); }
.hidden { display:none !important; }
table { width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
th, td { padding:6px 5px; border-bottom:1px solid var(--line); text-align:right; }
th:first-child, td:first-child { text-align:left; }
th { color:var(--muted); font-weight:500; }
.badge { font-size:12px; padding:2px 10px; border-radius:99px; border:1px solid var(--line); color:var(--muted);
         background:transparent; }
button.badge { cursor:pointer; }
button.badge:hover { border-color:var(--accent); color:var(--accent); }
.msg { margin-top:10px; padding:10px 12px; border-radius:10px; font-size:14px; display:none; }
.msg.ok { display:block; background:color-mix(in srgb, var(--up) 14%, transparent); }
.msg.err { display:block; background:color-mix(in srgb, var(--down) 14%, transparent); }
.msg.busy { display:block; background:color-mix(in srgb, var(--muted) 14%, transparent); }
.msg.warn { display:block; background:color-mix(in srgb, #e8a400 18%, transparent); }

/* header, numbers, forms */
.hdr { display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; font-size:14px; }
.navlink { font-size:13px; }
.navlink:hover { text-decoration:underline; }
.badge.live { color:#fff; background:var(--down); border-color:var(--down); }
.price { font-size:34px; font-weight:650; font-variant-numeric:tabular-nums; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.v { font-size:17px; font-variant-numeric:tabular-nums; }
.big { font-size:24px; font-weight:650; font-variant-numeric:tabular-nums; }
button { flex:1; min-width:90px; padding:12px; border-radius:10px; border:1px solid var(--line);
         background:var(--card); color:var(--text); font-size:15px; cursor:pointer; }
button.danger { border-color:var(--down); color:var(--down); }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
button.small { flex:none; min-width:0; padding:4px 10px; font-size:13px; border-radius:8px; }
button:disabled { opacity:.5; cursor:wait; }
.row { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.row label { flex:1 1 160px; display:flex; flex-direction:column; gap:4px; }
input, select { width:100%; padding:11px 12px; border-radius:10px; border:1px solid var(--line);
                background:var(--bg); color:var(--text); font-size:16px; font-variant-numeric:tabular-nums; }
.state { font-size:17px; font-weight:600; display:flex; align-items:center; gap:8px; }
.dot { display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--muted); flex:none; }
.dot.running { background:var(--up); } .dot.paused { background:#e8a400; } .dot.waiting { background:var(--accent); }
details.fold { margin-top:12px; border:1px solid var(--line); border-radius:10px; padding:8px 12px; }
details.fold > summary { cursor:pointer; font-size:14px; color:var(--muted); list-style:none; }
details.fold > summary::-webkit-details-marker { display:none; }
details.fold > summary::before { content:'▸'; display:inline-block; width:1.1em; transition:transform .15s; }
details.fold[open] > summary::before { transform:rotate(90deg); }
details.fold[open] > summary { color:var(--text); }
label.check { display:flex; flex-direction:row; gap:8px; align-items:flex-start; font-size:13px; margin-top:10px;
              color:var(--muted); cursor:pointer; }
label.check input { width:auto; margin-top:2px; }
.msg.warn button { display:block; margin-top:8px; flex:none; }

/* "back to the overview" on every sub-page: top left, above the title, always in the same place */
a.back { display:inline-flex; align-items:center; gap:6px; margin-bottom:10px; padding:5px 14px;
         border:1px solid var(--line); border-radius:99px; background:var(--card); color:var(--text);
         font-size:14px; text-decoration:none; }
a.back:hover { border-color:var(--accent); color:var(--accent); }

/* viewers see the data, but no controls that change anything (the server refuses them anyway) */
body.role-viewer .needs-trader { display:none !important; }
.card.narrow { max-width:440px; margin-left:auto; margin-right:auto; }
code.secret { display:block; font-size:18px; letter-spacing:2px; padding:10px; background:var(--bg);
              border:1px solid var(--line); border-radius:8px; word-break:break-all; user-select:all; }

/* line chart (lineChart in common.js) */
.legend { display:flex; gap:16px; flex-wrap:wrap; font-size:13px; margin:6px 0 4px; }
.key { display:inline-block; width:14px; height:3px; border-radius:2px; vertical-align:middle; margin-right:6px; }
.key.dash { background:none !important; border-top:2px dashed var(--hold); height:0; }
.chartwrap { position:relative; }
.chartwrap svg { width:100%; height:auto; display:block; }
.ctip { position:absolute; pointer-events:none; background:var(--card); border:1px solid var(--line);
        border-radius:8px; padding:8px 10px; font-size:12px; box-shadow:0 6px 18px rgba(0,0,0,.15);
        display:none; white-space:nowrap; font-variant-numeric:tabular-nums; }