/* MSquare America — Institutional Trading Terminal theme (see DESIGN.md) */
:root{   /* light theme (default) */
  --bg:#F6F7F9; --bg2:#F8FAFC; --bg3:#F1F5F9; --panel:#FFFFFF;
  --sidebar:#FFFFFF; --header:#F8FAFC; --border:#E2E6EC; --border-hi:#CBD5E1;
  --accent:#047857; --accent2:#1D4ED8; --red:#B91C1C; --warn:#B45309;
  --text:#0F172A; --dim:#64748B; --mid:#475569; --row-alt:#FAFBFC; --sel-bg:#E8EFFE;
  --r:10px; --r-sm:6px; --shadow:0 1px 2px rgba(15,23,42,.06);
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Roboto Mono",Menlo,monospace;
}
html[data-theme="dark"]{   /* dark theme (per-user choice) */
  --bg:#080B12; --bg2:#0C111B; --bg3:#131A28; --panel:#0F1622;
  --sidebar:#0B111C; --header:#0C111B; --border:#1C2942; --border-hi:#2A3C5C;
  --accent:#00C896; --accent2:#2E7DFF; --red:#FF4D64; --warn:#FFB020;
  --text:#E6EDF6; --dim:#5A6B85; --mid:#93A3BC; --row-alt:#0B1220; --sel-bg:#12233F;
  --shadow:0 1px 2px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px; line-height:1.45;
}
a{color:var(--accent2); text-decoration:none}

/* ── app shell: left sidebar + main ──────────────────────── */
.shell{display:flex; min-height:100vh}
.sidebar{
  width:240px; flex:0 0 240px; background:var(--sidebar);
  border-right:1px solid var(--border); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.side-brand{font-size:19px; font-weight:700; color:var(--accent2);
  padding:18px 20px; border-bottom:1px solid var(--border); white-space:nowrap}
.side-brand sup{font-size:11px}
.side-brand .ver{font-size:11px; font-weight:400; color:var(--dim); margin-left:6px}
.side-nav{display:flex; flex-direction:column; padding:10px 0; flex:1; overflow-y:auto}
.side-nav a{
  color:var(--mid); font-weight:500; font-size:13.5px;
  padding:10px 20px; border-left:3px solid transparent;
}
.side-nav a:hover{color:var(--text); background:var(--bg3)}
.side-nav a.active{color:var(--accent2); background:var(--bg2); border-left-color:var(--accent2); font-weight:600}
.side-sep{height:1px; background:var(--border); margin:8px 16px}
.side-group{font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--dim); padding:10px 20px 4px; font-weight:600}
.app-footer{margin-top:32px; padding:16px 0; border-top:1px solid var(--border);
  color:var(--dim); font-size:12px; text-align:center}
.app-footer a{color:var(--dim); text-decoration:underline; margin-left:6px}
.side-foot{border-top:1px solid var(--border); padding:12px 20px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:var(--mid); font-size:12px}
.side-foot .clock{color:var(--dim); font-size:11px; width:100%}
.main{flex:1; min-width:0; display:flex; flex-direction:column}

.wrap{padding:22px 26px; max-width:100%; margin:0 auto; width:100%}
h1.page-title{font-size:20px; margin:0 0 18px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
h1.page-title small{color:var(--dim); font-size:12px; font-weight:400}

/* ── tabs (Positions / Order Book) ───────────────────────── */
.tabs{display:flex; gap:6px; margin:0 0 16px; flex-wrap:wrap}
.tab{padding:7px 16px; border-radius:var(--r-sm); border:1px solid var(--border);
  background:var(--panel); color:var(--mid); font-size:13px; font-weight:600; cursor:pointer}
.tab:hover{color:var(--text); border-color:var(--border-hi)}
.tab.active{background:var(--accent2); border-color:var(--accent2); color:#fff}

/* numbers, symbols and prices use the mono/tabular stack */
.num,.sym,td.sym,.card .big,.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* ── cards row ───────────────────────────────────────────── */
.cards{display:flex; flex-wrap:wrap; gap:16px; margin-bottom:20px}
.card{
  flex:1 1 200px; min-width:0;
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:18px 20px; text-align:center;
}
.card .label{color:var(--dim); font-size:11px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px}
.card .big{font-size:30px; font-weight:700}
.card .sub{color:var(--dim); font-size:12px; margin-top:4px}

/* ── panels / tables ─────────────────────────────────────── */
.panel{background:var(--panel); border:1px solid var(--border); border-radius:10px; margin-bottom:20px; overflow:hidden}
.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--border); background:var(--header);
}
.panel-head h2{font-size:15px; margin:0; font-weight:600}
.panel-head .hint{color:var(--dim); font-size:11px; font-weight:400}
/* A panel that contains a table lets the table scroll sideways within it,
   so wide tables stay fully reachable on narrow/mobile screens instead of
   being clipped by the panel's overflow:hidden. Covers tables that are direct
   children of a panel and tables wrapped in a scroll div. */
.panel > table,
.panel > div > table{display:block; overflow-x:auto; white-space:nowrap;
  -webkit-overflow-scrolling:touch; max-width:100%}
table{width:100%; border-collapse:collapse}
th{
  text-align:left; color:var(--accent2); font-size:11px; letter-spacing:.05em;
  text-transform:uppercase; padding:11px 18px; background:var(--bg2); font-weight:600;
}
td{padding:11px 18px; border-top:1px solid var(--border); font-size:13px}
tbody tr:nth-child(even){background:var(--row-alt)}
tbody tr:hover{background:var(--bg3)}
td.sym,th.sym{font-weight:600}
.empty{padding:28px; text-align:center; color:var(--dim)}
.num{text-align:right; font-variant-numeric:tabular-nums}

/* ── mobile / narrow screens ─────────────────────────────── */
@media(max-width:760px){
  .wrap{padding:14px 12px}
  .panel-head{padding:12px 14px}
  th{padding:9px 12px; font-size:10px}
  td{padding:9px 12px; font-size:12px}
  /* Stat cards (P&L summary) stack instead of squashing */
  .summary3{flex-wrap:wrap}
  .summary3 .b{flex:1 1 100%}
  .cards .card{flex:1 1 100%}
  .card .big{font-size:26px}
}
@media(max-width:460px){
  .wrap{padding:10px 8px}
  th{padding:8px 10px}
  td{padding:8px 10px}
}

/* ── sidebar collapses to a horizontal bar on narrow screens ─ */
@media(max-width:900px){
  .shell{flex-direction:column}
  .sidebar{width:100%; flex:none; height:auto; position:static;
    border-right:none; border-bottom:1px solid var(--border)}
  .side-brand{border-bottom:none; padding:12px 16px}
  .side-nav{flex-direction:row; overflow-x:auto; padding:0 8px; white-space:nowrap}
  .side-nav a{border-left:none; border-bottom:3px solid transparent; padding:10px 14px}
  .side-nav a.active{border-left:none; border-bottom-color:var(--accent2); background:transparent}
  .side-sep{display:none}
  .side-foot{border-top:none}
}

/* ── colours ─────────────────────────────────────────────── */
.pos{color:var(--accent)} .neg{color:var(--red)} .flat{color:var(--mid)}

/* ── pills / badges ──────────────────────────────────────── */
.pill{display:inline-block; padding:3px 10px; border-radius:6px; font-size:11px; font-weight:600; letter-spacing:.03em}
.pill.green{background:#0c2e22; color:var(--accent); border:1px solid #15503b}
.pill.blue{background:#0c2236; color:#3aa0ff; border:1px solid #14507f}
.pill.red{background:#2e0f15; color:var(--red); border:1px solid #5a1f29}
.pill.warn{background:#2e2606; color:var(--warn); border:1px solid #5a4a14}
.pill.grey{background:var(--bg3); color:var(--mid); border:1px solid var(--border-hi)}
.pill.solid-green{background:var(--accent); color:#03251b}
.pill.solid-blue{background:var(--accent2); color:#021326}
.pill.ce{background:#0c2e22; color:var(--accent); border:1px solid #15503b}
.pill.pe{background:#2e0f15; color:var(--red); border:1px solid #5a1f29}
.tag{display:inline-block; padding:2px 8px; border-radius:5px; font-size:11px; background:var(--bg3); color:var(--mid)}

/* ── buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-block; padding:7px 14px; border-radius:6px; border:1px solid var(--border-hi);
  background:var(--bg3); color:var(--text); font-size:13px; cursor:pointer; font-weight:500;
}
.btn:hover{border-color:var(--accent2)}
.btn.primary{background:var(--accent2); border-color:var(--accent2); color:#fff}
.btn.green{background:var(--accent); border-color:var(--accent); color:#03251b}
.btn.red{background:var(--red); border-color:var(--red); color:#fff}
.btn.warn{background:var(--warn); border-color:var(--warn); color:#1a1500}
.btn.teal{background:#0d9488; border-color:#14b8a6; color:#ffffff}
.btn.teal:hover{background:#0f766e}
.btn.ghost{background:transparent}
.btn.sm{padding:4px 10px; font-size:12px}
.btn-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

/* ── bot status bar ──────────────────────────────────────── */
.statusbar{height:30px; border-radius:6px; display:flex; align-items:center; justify-content:center;
  font-weight:700; letter-spacing:.05em; margin:6px 0 10px}
.statusbar.on{background:var(--accent); color:#03251b}
.statusbar.off{background:var(--bg3); color:var(--mid); border:1px solid var(--border-hi)}
.dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px}
.dot.on{background:var(--accent)} .dot.off{background:var(--dim)}

/* ── forms ───────────────────────────────────────────────── */
.form-section{background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:20px; margin-bottom:18px}
.form-section h3{font-size:13px; color:var(--accent2); text-transform:uppercase; letter-spacing:.05em; margin:0 0 16px}
.field{margin-bottom:16px}
.field label{display:block; color:var(--dim); font-size:11px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px}
.field .help{color:var(--dim); font-size:11px; margin-top:4px}
input[type=text],input[type=password],input[type=number],input[type=date],select,textarea{
  width:100%; background:var(--bg2); border:1px solid var(--border); border-radius:6px;
  color:var(--text); padding:9px 11px; font-size:13px;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent2)}
textarea{min-height:64px; resize:vertical; font-family:ui-monospace,Menlo,monospace}
.grid2{display:flex; flex-wrap:wrap; gap:16px}
.grid2 > *{flex:1 1 200px; min-width:0}
.grid3{display:flex; flex-wrap:wrap; gap:16px}
.grid3 > *{flex:1 1 220px; min-width:0}
.exit-cols{display:flex; flex-wrap:wrap; gap:18px; align-items:flex-start}
.exit-cols > .form-section{flex:1 1 420px; min-width:0}
.check{display:flex; align-items:center; gap:8px; color:var(--text)}
.check input{width:auto}
.compound-box{border:1px solid #15503b; background:#0a1f18; border-radius:8px; padding:12px; margin-bottom:14px}
@media(max-width:760px){.exit-cols > .form-section{flex:1 1 100%}}

/* ── logs ────────────────────────────────────────────────── */
.logbox{background:#070b12; border:1px solid var(--border); border-radius:8px; padding:12px 14px;
  font-family:ui-monospace,Menlo,monospace; font-size:12px; max-height:70vh; overflow:auto; white-space:pre-wrap}
.logline.ok{color:var(--accent)} .logline.alert{color:#3aa0ff} .logline.trade{color:#b98bff}
.logline.warn{color:var(--warn)} .logline.err{color:var(--red)} .logline.info{color:var(--mid)}
.logline.dim{color:var(--dim)}
.legend{display:flex; gap:16px; flex-wrap:wrap; font-size:11px; color:var(--dim); margin:8px 0}
.legend .sw{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px}

/* ── two-column tracker (MSquare) ────────────────────────── */
.two-col{display:flex; flex-wrap:wrap; gap:18px; align-items:flex-start}
.two-col > *{flex:1 1 460px; min-width:0}
@media(max-width:820px){.two-col > *{flex:1 1 100%}}
.mini-head{font-size:13px; font-weight:600; padding:10px 14px; border-bottom:1px solid var(--border); background:var(--header); display:flex; justify-content:space-between}
.scroll-160{max-height:180px; overflow:auto}
.banner{background:#2e2606; border:1px solid #5a4a14; color:var(--warn); padding:9px 14px; border-radius:8px; font-size:12px; margin-bottom:16px}
.banner.err{background:#2e0f15; border-color:#5a1f29; color:var(--red)}
.summary3{display:flex; gap:12px; padding:14px}
.summary3 .b{flex:1 1 0; min-width:0; background:var(--bg2); border:1px solid var(--border); border-radius:8px; padding:14px; text-align:center}
.summary3 .b .label{color:var(--dim); font-size:10px; text-transform:uppercase}
.summary3 .b .big{font-size:24px; font-weight:700}
.filters{display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; margin-bottom:18px;
  background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:16px 18px}
.filters .field{flex:1 1 170px; margin-bottom:0}
.filters .btn{flex:0 0 auto}
@media(max-width:760px){.filters .field{flex:1 1 100%}}

/* ── per-account selector bar ────────────────────────────── */
.acct-bar{display:flex; align-items:center; gap:10px; margin:0 0 16px}
.acct-bar label{color:var(--dim); font-size:11px; text-transform:uppercase; letter-spacing:.04em}
.acct-bar select{max-width:280px; width:auto}

/* Channel & Instruments section (v9) */
.ci-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:10px 0;border-bottom:1px solid var(--border)}
.ci-row:last-of-type{border-bottom:none}
.ci-label{min-width:110px;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim);font-weight:600}
.ci-row .check{margin:0}

/* ── Auth: nav user box + flash messages ─────────────────────────────── */
.user-box { display:flex; align-items:center; gap:10px; margin-left:14px; }
.user-name { font-size:13px; color: var(--muted,#8a93a6); }
.user-link { text-decoration:none; font-size:15px; opacity:.8; }
.user-link:hover { opacity:1; }
.logout-link{display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--mid)}
.logout-link:hover{color:var(--red)}
.welcome{font-size:15px; color:var(--mid); margin:0 0 16px}
.welcome b{color:var(--text); font-weight:600}
.flash { padding:12px 16px; border-radius:8px; margin-bottom:16px; font-size:14px; border:1px solid transparent; transition:opacity .5s; }
.flash-ok, .flash-success { background: rgba(0,200,150,.12); border-color:#1E6B4F; color:#00C896; }
.flash-error, .flash-err { background: rgba(255,69,96,.12); border-color:#7A2230; color:#FF4560; }
.flash-info    { background: rgba(59,130,246,.15); color:#93c5fd; }

/* ── light theme: replaces the dark-only tints above ───────────────────── */
html:not([data-theme="dark"]) .pill.green,html:not([data-theme="dark"]) .pill.ce{background:#ECFDF5;color:#047857;border-color:#A7F3D0}
html:not([data-theme="dark"]) .pill.blue{background:#EFF6FF;color:#1D4ED8;border-color:#BFDBFE}
html:not([data-theme="dark"]) .pill.red,html:not([data-theme="dark"]) .pill.pe{background:#FEF2F2;color:#B91C1C;border-color:#FECACA}
html:not([data-theme="dark"]) .pill.warn{background:#FFFBEB;color:#B45309;border-color:#FDE68A}
html:not([data-theme="dark"]) .pill.solid-green{background:#047857;color:#fff}
html:not([data-theme="dark"]) .pill.solid-blue{background:#1D4ED8;color:#fff}
html:not([data-theme="dark"]) .btn:not([class*="btn-"]){background:#FFFFFF}
html:not([data-theme="dark"]) .btn.primary{background:var(--accent2);color:#fff}
html:not([data-theme="dark"]) .btn.green{background:#047857;color:#fff}
html:not([data-theme="dark"]) .btn.red{background:#B91C1C;color:#fff}
html:not([data-theme="dark"]) .btn.warn{background:#B45309;color:#fff}
html:not([data-theme="dark"]) .btn.ghost{background:transparent}
html:not([data-theme="dark"]) .statusbar.on{background:#047857;color:#fff}
html:not([data-theme="dark"]) .compound-box{border-color:#A7F3D0;background:#ECFDF5}
html:not([data-theme="dark"]) .logbox{background:#F8FAFC}
html:not([data-theme="dark"]) .logline.alert{color:#1D4ED8} html:not([data-theme="dark"]) .logline.trade{color:#6D28D9}
html:not([data-theme="dark"]) .banner{background:#FFFBEB;border-color:#FDE68A;color:#B45309}
html:not([data-theme="dark"]) .banner.err{background:#FEF2F2;border-color:#FECACA;color:#B91C1C}
html:not([data-theme="dark"]) .flash-ok,html:not([data-theme="dark"]) .flash-success{background:#ECFDF5;border-color:#A7F3D0;color:#047857}
html:not([data-theme="dark"]) .flash-error,html:not([data-theme="dark"]) .flash-err{background:#FEF2F2;border-color:#FECACA;color:#B91C1C}
html:not([data-theme="dark"]) .flash-info{background:#EFF6FF;border-color:#BFDBFE;color:#1E40AF}

/* ── universal pages (3.1) ─────────────────────────────────────────────── */
.u-topbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end;margin:0 0 16px}
.u-switch{display:flex;align-items:center;gap:8px;margin-right:auto}
.u-switch label,.u-lbl{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.u-switch select{width:260px}
.u-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;margin:0 0 18px}
.u-head h1{margin:0;font-size:22px} .u-head .sub{color:var(--mid);font-size:13px;margin-top:2px}
.u-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:18px}
.u-kpi{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow)}
.u-kpi .big{font-family:var(--mono);font-size:22px;font-weight:600;margin-top:6px}
.u-kpi .big2{font-family:var(--mono);font-size:17px;font-weight:600}
.u-kpi .sub{font-size:12px;color:var(--mid);margin-top:4px}
.u-cols{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.u-cols>.wide{flex:999 1 620px;min-width:0}.u-cols>.side{flex:1 1 300px;min-width:0}
.u-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:18px}
.u-card .hd{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border)}
.u-card .hd h2{margin:0;font-size:15px} .u-card .bd{padding:16px 18px}
.u-box{overflow-x:auto}
.u-table{width:100%;border-collapse:collapse;font-size:13px}
.u-table th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);padding:10px 14px;background:var(--bg2);border-bottom:1px solid var(--border);white-space:nowrap}
.u-table td{padding:10px 14px;border-bottom:1px solid var(--border);white-space:nowrap;vertical-align:middle}
.u-table tr:last-child td{border-bottom:0}
.u-table .r{text-align:right} .num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.u-empty{padding:26px;text-align:center;color:var(--mid)}
.u-seg{display:inline-flex;border:1px solid var(--border-hi);border-radius:8px;overflow:hidden;background:var(--panel)}
.u-seg a{padding:7px 12px;font-size:13px;font-weight:600;color:var(--mid);border-right:1px solid var(--border-hi)}
.u-seg a:last-child{border-right:0} .u-seg a.on{background:var(--sel-bg);color:var(--accent2)}
.chip{display:inline-block;padding:2px 8px;border-radius:6px;background:var(--bg3);color:var(--mid);font-size:12px;font-weight:600}
.u-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px}
.u-row:last-child{border-bottom:0}
.u-bars{display:flex;gap:6px;align-items:stretch;min-height:200px}
.u-bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.u-bar .up,.u-bar .dn{height:90px;width:70%;display:flex;flex-direction:column}
.u-bar .up{justify-content:flex-end} .u-bar .dn{justify-content:flex-start;border-top:1px solid var(--border-hi)}
.u-bar .p{background:var(--accent2);border-radius:4px 4px 0 0} .u-bar .n{background:#EA580C;border-radius:0 0 4px 4px}
.u-bar span{font-size:11px;color:var(--dim)}
.u-brokers{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-bottom:22px}
.u-broker{display:flex;flex-direction:column;gap:6px;background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;color:var(--text)}
.u-broker:hover{border-color:var(--accent2)} .u-broker b{font-size:16px}
.u-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.u-form label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--mid)}
.u-checks{display:flex;flex-wrap:wrap;gap:14px;font-size:13px}
.u-checks label{display:flex;align-items:center;gap:6px;font-weight:500;color:var(--text)}
.u-checks input{width:auto}
.u-note{padding:12px 14px;border-radius:8px;font-size:13px;border:1px solid var(--border);background:var(--bg2)}
.u-note.ok{background:#ECFDF5;border-color:#A7F3D0;color:#065F46} .u-note.bad{background:#FEF2F2;border-color:#FECACA;color:#991B1B}
html[data-theme="dark"] .u-note.ok{background:#0c2e22;border-color:#15503b;color:var(--accent)}
html[data-theme="dark"] .u-note.bad{background:#2e0f15;border-color:#5a1f29;color:var(--red)}
.side-foot form{margin:0}

/* menu icons (3.3) */
.side-nav a{display:flex;align-items:center;gap:10px}
.side-nav a svg{flex:none;opacity:.85}

/* Accounts: More ▾ menu + balance strip (3.4) */
.u-more{position:relative}
.u-more>summary{list-style:none;cursor:pointer}
.u-more>summary::-webkit-details-marker{display:none}
.u-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:20;min-width:190px;background:var(--panel);border:1px solid var(--border-hi);
  border-radius:8px;box-shadow:0 8px 24px rgba(15,23,42,.14);padding:6px;display:flex;flex-direction:column}
.u-menu form{margin:0}
.u-menu a,.u-menu button{display:block;width:100%;text-align:left;padding:8px 10px;border:0;background:none;border-radius:6px;
  font:500 13px/1.3 var(--sans,inherit);color:var(--text);cursor:pointer}
.u-menu a:hover,.u-menu button:hover{background:var(--bg3)}
.u-menu .danger{color:var(--red)}
.u-strip td{background:var(--bg2);font-size:13px}
.u-strip td b{margin-left:12px}
/* light theme: teal buttons (Test & balance, Share) were white-on-white */
html:not([data-theme="dark"]) .btn.teal{background:#0F766E;border-color:#0F766E;color:#fff}

/* Logs: picked lines (3.6.3) */
.logline{cursor:pointer}
.logline.picked{background:var(--sel-bg)!important;outline:1px solid var(--accent2)}

/* 3.6.5: long alert texts wrap; tables fit the screen */
.u-table.u-fit{table-layout:auto}
.u-table .u-msg{white-space:normal!important;overflow-wrap:anywhere;word-break:break-word;min-width:260px;line-height:1.45}
.u-table .u-wrapcell{white-space:normal}
.u-actions{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.u-actions form{margin:0}.u-actions .btn{width:100%}
.u-table .u-time{white-space:normal;font-size:12px;min-width:150px;line-height:1.5}

/* 3.7: paper trading */
.pill.orange{background:#ffedd5;color:#9a3412}
.pill.blue-solid{background:#1d4ed8;color:#fff}
.u-paperbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 16px;border-radius:10px;background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a;font-size:14px;margin-bottom:16px}
.u-paperrow{background:#f8faff}
.u-mode{margin-left:8px}
.u-cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.u-cmpcell{border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.u-cmpcell.live{background:#fff7ed;border:1px solid #fed7aa}.u-cmpcell.paper{background:#eff6ff;border:1px solid #bfdbfe}
.u-journey{margin-top:6px}.u-journey summary{cursor:pointer;font-size:12px;color:#1d4ed8}
.u-journey ol{margin:6px 0 0;padding-left:18px;font-size:12px;line-height:1.55;color:#334155}
.u-journey .t{font-family:var(--mono,monospace);color:#475569;margin-right:6px}
[data-theme="dark"] .u-paperbar{background:#0b1f3a;border-color:#1e3a8a;color:#bfdbfe}
[data-theme="dark"] .u-cmpcell.live{background:#2a1a0c;border-color:#7c2d12}[data-theme="dark"] .u-cmpcell.paper{background:#0b1f3a;border-color:#1e3a8a}
[data-theme="dark"] .u-paperrow{background:#0f1a2e}
.u-cmpcell .pill{align-self:flex-start}
/* 3.8: format options */
.u-editrow{background:#eff6ff;outline:2px solid #1d4ed8;outline-offset:-2px}
.u-warnrow{background:#fff7ed}
.u-fname{font-weight:700;color:var(--text,#0f172a);text-decoration:underline dotted;text-underline-offset:3px}
.u-fname:hover{color:#1d4ed8}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
[data-theme="dark"] .u-editrow{background:#0b1f3a}[data-theme="dark"] .u-warnrow{background:#2a1a0c}

.u-optgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;flex:1 1 100%}
.u-optcard{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line,#e2e8f0);border-radius:10px;cursor:pointer}
.u-optcard input{width:18px;height:18px;margin-top:2px;flex:none}
.u-optfm{display:block;font-size:12px;color:var(--text-dim,#475569);line-height:1.45;margin-top:2px}
.u-table .u-actions{white-space:normal;min-width:170px;max-width:240px}
.u-table .u-actions .sub{white-space:normal}
.u-table .u-actions select,.u-table .u-actions input{width:100%;box-sizing:border-box}
/* 3.9: live prices */
.u-livebar{display:inline-flex;flex-wrap:wrap;align-items:center;gap:10px}
.u-liveind{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:#f0fdf4;border:1px solid #bbf7d0;color:#166534;font-size:13px;font-weight:600}
.u-liveind .dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#16a34a;animation:lvpulse 1.4s infinite}
.u-liveind.paused{background:#f1f5f9;border-color:#cbd5e1;color:#334155}.u-liveind.paused .dot{background:#64748b;animation:none}
.u-src{font-size:11px;color:var(--text-dim,#475569);margin-top:2px;white-space:nowrap}
@keyframes lvpulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes lvup{0%{background:#bbf7d0}100%{background:transparent}}
@keyframes lvdown{0%{background:#fed7aa}100%{background:transparent}}
.lv-up{animation:lvup 1.2s ease-out}.lv-down{animation:lvdown 1.2s ease-out}
[data-theme="dark"] .u-liveind{background:#052e16;border-color:#166534;color:#bbf7d0}
@media (prefers-reduced-motion: reduce){.lv-up,.lv-down,.u-liveind .dot{animation:none}}

/* 3.11: filters, sortable headers, pages */
.u-filters{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;padding:14px 16px;margin-bottom:16px}
.u-fsel{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim,#475569)}
.u-fsel select{min-width:170px;height:40px;text-transform:none;letter-spacing:0;font-weight:400;font-size:14px}
.u-sorttable th{padding:0}
.u-sort{display:flex;align-items:center;gap:4px;min-height:44px;padding:0 12px;color:inherit;text-decoration:none;white-space:nowrap}
th.r .u-sort{justify-content:flex-end}
.u-sort.on{color:#1d4ed8}
.u-pager{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid var(--line,#e2e8f0)}
.u-pages{display:flex;flex-wrap:wrap;gap:6px}
.u-pg{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;border:1px solid var(--line,#cbd5e1);border-radius:8px;text-decoration:none;color:inherit}
.u-pg.on{background:#1d4ed8;border-color:#1d4ed8;color:#fff;font-weight:600}
.u-pg.gap{border:0}
.u-grp{text-align:center;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:#eef2ff;color:#1e3a8a;padding:8px 12px}
.u-grp2{background:#f0fdf4;color:#14532d}.u-sep{border-left:2px solid var(--line,#e2e8f0)}
.u-legend{display:flex;flex-wrap:wrap;gap:18px;padding:12px 16px;font-size:12px;color:var(--text-dim,#475569);border-top:1px solid var(--line,#e2e8f0)}
[data-theme="dark"] .u-grp{background:#1e293b;color:#c7d2fe}[data-theme="dark"] .u-grp2{background:#052e16;color:#bbf7d0}

/* 3.12: broker sync */
.u-sync{margin-bottom:16px}
.u-syncgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px;padding:0 16px 16px}
.u-syncline{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line,#e2e8f0);border-radius:10px}
.u-syncline .dot{width:9px;height:9px;border-radius:50%;margin-top:5px;flex:none;background:#94a3b8}
.u-sync-green .dot{background:#16a34a}.u-sync-orange{background:#fff7ed;border-color:#fed7aa}.u-sync-orange .dot{background:#ea580c}
.u-sync-red{background:#fef2f2;border-color:#fecaca}.u-sync-red .dot{background:#dc2626}
[data-theme="dark"] .u-sync-orange{background:#2a1a0c}[data-theme="dark"] .u-sync-red{background:#2a0c0c}

/* 3.13: What happened on the Signal tracker */
.u-msgswitch label{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;border:1px solid var(--line,#cbd5e1);border-radius:10px;font-size:14px;cursor:pointer}
.u-msgswitch input{width:18px;height:18px}
.u-whbtn{margin-top:6px}
.u-whrow td{background:#eff6ff;padding:12px}
.u-whgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px}
.u-whcard{background:var(--card,#fff);border:1px solid var(--line,#e2e8f0);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;white-space:normal}
.u-whhead{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.u-journey2 ol{margin:6px 0 0;padding-left:18px;font-size:13px;line-height:1.55}
.u-journey2 .t{font-family:var(--mono,monospace);color:var(--text-dim,#475569);margin-right:10px}
.u-msgtext{font-family:var(--mono,monospace);font-size:12px;white-space:normal;display:inline-block;max-width:420px}
[data-theme="dark"] .u-whrow td{background:#0b1f3a}
.u-total td{border-top:2px solid var(--line,#cbd5e1);background:var(--card-2,#f8fafc)}
/* 3.19: Strategy lab */
.u-field{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--text-dim,#475569)}
.u-field input,.u-field select{height:44px;box-sizing:border-box;padding:0 12px;border:1px solid var(--line,#cbd5e1);border-radius:8px;font:inherit;font-size:14px;font-weight:400;color:var(--text,#0f172a);background:var(--card,#fff)}
details.u-card>summary{list-style:none}details.u-card>summary::-webkit-details-marker{display:none}
details.u-card>summary::before{content:"▸ ";color:var(--text-dim,#475569)}details.u-card[open]>summary::before{content:"▾ "}
/* 3.19.1: Strategy lab — PDF (print) layout: results only, every pattern expanded */
@media print{
  .sidebar,.side,nav,.topbar,.u-top,.lab-noprint,.btn,.u-acct,form{display:none!important}
  body,main,.u-main{background:#fff!important;margin:0!important;padding:0!important}
  .u-card{break-inside:avoid-page;box-shadow:none!important;border-color:#cbd5e1!important}
  details.u-card>summary::before{content:""}
  .u-box{overflow:visible!important}
  .u-table{font-size:10px}
  a{color:#0f172a;text-decoration:none}
}