/* aa Variables aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa */
    :root {
      --bg:       #06080d;
      --bg2:      #0c1118;
      --bg3:      #101820;
      --border:   #182030;
      --primary:  #4db8ff;
      --ok:       #33cc77;
      --warn:     #ffaa22;
      --danger:   #ff4444;
      --lay:      #ff6680;   /* LAY side accent */
      --back:     #44aaff;   /* BACK side accent */
      --muted:    #2a4060;
      --text:     #c8d8e8;
      --dim:      #5a7a9a;
      --font:     'JetBrains Mono', monospace;
      --th:       36px;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      background: var(--bg); color: var(--text);
      font-family: var(--font); font-size: 11px;
      height: 100vh; overflow: hidden;
      display: flex; flex-direction: column;
    }
    code { color: var(--primary); }
    a { color: var(--primary); text-decoration: none; }
    ::-webkit-scrollbar { width: 3px; height: 3px; }
    ::-webkit-scrollbar-thumb { background: var(--border); }

    /* aa Topbar aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa */
    #topbar {
      height: var(--th); background: var(--bg2);
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center; padding: 0 12px; gap: 10px;
      flex-shrink: 0;
    }
    .tb-logo { font-size: 14px; font-weight: 700; color: var(--primary); letter-spacing: 3px; }
    .tb-tag  { font-size: 8px; background: var(--primary); color: var(--bg);
                padding: 1px 5px; border-radius: 2px; font-weight: 700; letter-spacing: 1px; }
    .tb-sep  { color: var(--border); }
    .tb-lbl  { font-size: 9px; text-transform: uppercase; color: var(--dim); }
    .tb-val  { font-size: 11px; color: var(--text); }
    .pill {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 2px 9px; border-radius: 3px; font-size: 10px; font-weight: 700; border: 1px solid;
    }
    .pill-ok   { color: var(--ok);    border-color: var(--ok);    background: rgba(51,204,119,.1); }
    .pill-warn { color: var(--warn);  border-color: var(--warn);  background: rgba(255,170,34,.1); }
    .pill-dim  { color: var(--dim);   border-color: var(--muted); background: transparent; }
    .pill-run  { color: var(--primary); border-color: var(--primary); background: rgba(77,184,255,.08); }
    .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
    @keyframes blink { 0%,100%{opacity:1}50%{opacity:.2} }
    .blink { animation: blink 1.5s infinite; }
    .tb-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
    #tb-clock { color: var(--dim); font-size: 10px; }
    #refresh-cd { font-size: 9px; color: var(--warn); min-width: 72px; text-align:right; }
    #btn-kill {
      background: var(--danger); color: #fff; border: none;
      padding: 3px 12px; border-radius: 2px; font-family: var(--font);
      font-size: 10px; font-weight: 700; letter-spacing: 1px; cursor: pointer;
    }
    #btn-kill:hover { background: #cc2222; }
    #btn-start {
      background: transparent; color: var(--ok); border: 1px solid var(--ok);
      padding: 3px 12px; border-radius: 2px; font-family: var(--font);
      font-size: 10px; font-weight: 700; cursor: pointer;
    }
    #btn-start:hover { background: rgba(51,204,119,.1); }

    /* aa Portfolio strip (row 2) aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa */
    #pf-strip {
      height: 44px; background: var(--bg3);
      border-bottom: 2px solid rgba(77,184,255,.35);
      display: flex; align-items: center; padding: 0 14px; gap: 11px;
      flex-shrink: 0;
    }
    .pf-title {
      font-size: 8px; font-weight: 700; letter-spacing: 1.5px;
      color: var(--primary); text-transform: uppercase; white-space: nowrap; margin-right: 2px;
    }
    .pf-lbl { color: var(--dim); text-transform: uppercase;
               letter-spacing: .8px; font-size: 8px; white-space: nowrap; }
    .pf-inp {
      background: var(--bg2); border: 1px solid var(--border); color: var(--text);
      font-family: var(--font); font-size: 10px; padding: 3px 6px; width: 66px;
      border-radius: 2px; text-align: right;
    }
    .pf-inp:focus { outline: none; border-color: var(--primary); }
    .pf-val  { font-size: 12px; font-weight: 700; }
    .pf-unit { color: var(--dim); font-size: 8px; }
    .pf-sep  { color: var(--border); font-size: 14px; margin: 0 2px; }

    /* aa Refresh bar aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa */
    #refresh-bar { height: 2px; background: var(--bg3); flex-shrink: 0; position: relative; overflow: hidden; }
    #refresh-fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--dim); width: 0%; transition: width 0.18s ease; }
    #refresh-bar.mode-idle #refresh-fill { width: 0%; background: rgba(111,122,144,.55); }
    #refresh-bar.mode-ready #refresh-fill { width: 28%; background: var(--primary); }
    #refresh-bar.mode-running #refresh-fill,
    #refresh-bar.mode-pausing #refresh-fill,
    #refresh-bar.mode-killing #refresh-fill { width: 100%; background: linear-gradient(90deg, rgba(77,184,255,.28) 0%, rgba(77,184,255,.95) 45%, rgba(77,184,255,.28) 100%); animation: runPulse 1.25s linear infinite; }
    #refresh-bar.mode-complete #refresh-fill { width: 100%; background: var(--ok); }
    #refresh-bar.mode-error #refresh-fill,
    #refresh-bar.mode-killed #refresh-fill { width: 100%; background: var(--warn); }
    @keyframes runPulse {
      0% { transform: translateX(-55%); }
      100% { transform: translateX(55%); }
    }

    /* aa Layout aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa */
    #layout { display: flex; flex: 1; overflow: hidden; }

    /* aa Sidebar sinistra: controllo run aaaaaaaaaaaaaaaaaaaaaaa */
    #sl {
      width: 200px; background: var(--bg2); border-right: 1px solid var(--border);
      overflow-y: auto; flex-shrink: 0; padding: 8px 0;
    }
    .sl-hdr {
      font-size: 8px; font-weight: 700; letter-spacing: 1.5px;
      text-transform: uppercase; color: var(--dim);
      padding: 8px 10px 4px;
    }
    .sl-sep { border-top: 1px solid var(--border); margin: 6px 0; }
    .sl-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 4px 10px; font-size: 10px;
    }
    .sl-k { color: var(--dim); }
    .sl-v { font-weight: 600; }
    .ok  { color: var(--ok); }
    .warn{ color: var(--warn); }
    .pri { color: var(--primary); }
    .lay { color: var(--lay); }
    .bk  { color: var(--back); }
    .sl-ctrl {
      padding: 6px 10px;
    }
    .ctrl-btn {
      width: 100%; padding: 5px; margin-bottom: 5px;
      font-family: var(--font); font-size: 9px; font-weight: 700;
      border-radius: 2px; cursor: pointer; letter-spacing: .5px;
    }
    .ctrl-start { background: var(--ok); color: var(--bg); border: none; }
    .ctrl-stop  { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
    .ctrl-pause { background: transparent; color: var(--warn); border: 1px solid var(--warn); }
    .ctrl-start:hover { opacity:.85; }
    .ctrl-stop:hover  { background: rgba(255,68,68,.1); }
    .ctrl-pause:hover { background: rgba(255,170,34,.1); }
    .sl-input { padding: 6px 10px; }
    .sl-input label { font-size: 8px; color: var(--dim); text-transform: uppercase; display: block; margin-bottom: 3px; }
    .sl-input input {
      width: 100%; background: var(--bg3); border: 1px solid var(--border);
      color: var(--text); font-family: var(--font); font-size: 10px;
      padding: 4px 6px; border-radius: 2px;
    }
    .sl-input input:focus { outline: none; border-color: var(--primary); }

    /* aa Main area aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa */
    #main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

    /* KPI strip */
    #kpi-strip {
      display: flex; gap: 1px; background: var(--border);
      border-bottom: 1px solid var(--border); flex-shrink: 0;
    }
    .kpi-cell {
      flex: 1; background: var(--bg2); padding: 8px 12px;
      display: flex; flex-direction: column; gap: 2px;
    }
    .kpi-lbl { font-size: 8px; text-transform: uppercase; color: var(--dim); letter-spacing: 1px; }
    .kpi-val { font-size: 18px; font-weight: 700; }
    .kpi-sub { font-size: 8px; color: var(--dim); }
    .kpi-val.ok   { color: var(--ok); }
    .kpi-val.warn { color: var(--warn); }
    .kpi-val.pri  { color: var(--primary); }
    .kpi-val.dim  { color: var(--dim); }

    /* Split body: mercati / ordini */
    #split { display: flex; flex: 1; overflow: hidden; gap: 1px; background: var(--border); }

    /* Panel generico */
    .panel { background: var(--bg); display: flex; flex-direction: column; overflow: hidden; }
    .panel-hdr {
      background: var(--bg2); border-bottom: 1px solid var(--border);
      padding: 6px 10px; display: flex; align-items: center; gap: 8px;
      font-size: 9px; font-weight: 700; letter-spacing: 1px;
      text-transform: uppercase; color: var(--dim); flex-shrink: 0;
    }
    .panel-hdr-count {
      margin-left: auto; font-size: 9px; color: var(--primary); font-weight: 600;
    }
    .panel-body { overflow-y: auto; flex: 1; }

    /* Tabelle */
    table { width: 100%; border-collapse: collapse; }
    th {
      position: sticky; top: 0; background: var(--bg3);
      font-size: 8px; text-transform: uppercase; letter-spacing: 1px;
      color: var(--dim); font-weight: 700; padding: 5px 8px; text-align: left;
      border-bottom: 1px solid var(--border);
    }
    td { padding: 5px 8px; border-bottom: 1px solid rgba(24,32,48,.7); font-size: 10px; }
    tr:hover td { background: rgba(255,255,255,.02); }
    .r  { text-align: right; }
    .c  { text-align: center; }
    .d  { color: var(--dim); }
    td.ok   { color: var(--ok); }
    td.warn { color: var(--warn); }
    td.err  { color: var(--danger); }
    td.pri  { color: var(--primary); }

    /* Side badge */
    .side-back { color: var(--bg); background: var(--back); padding: 1px 6px; border-radius: 2px; font-size: 9px; font-weight: 700; }
    .side-lay  { color: var(--bg); background: var(--lay);  padding: 1px 6px; border-radius: 2px; font-size: 9px; font-weight: 700; }

    /* State badge */
    .st-intent { color: var(--dim);    font-size: 9px; }
    .st-ack    { color: var(--warn);   font-size: 9px; }
    .st-match  { color: var(--ok);     font-size: 9px; font-weight: 700; }
    .st-cancel { color: var(--danger); font-size: 9px; }
    .st-reject { color: var(--danger); font-size: 9px; font-weight: 700; }

    /* CLV badge */
    .clv-pos { color: var(--ok);    font-weight: 700; }
    .clv-neg { color: var(--lay);   font-weight: 700; }
    .clv-nil { color: var(--dim); }

    /* aa Sidebar destra: posizioni e CLV aaaaaaaaaaaaaaaaaaaaaa */
    #sr {
      width: 220px; background: var(--bg2); border-left: 1px solid var(--border);
      overflow-y: auto; flex-shrink: 0;
    }
    .sr-s { border-bottom: 1px solid var(--border); padding: 10px; }
    .sr-hdr { font-size: 8px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
    .sr-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 10px; }
    .sr-k { color: var(--dim); }
    .sr-v { font-weight: 600; }
    .sr-v.ok   { color: var(--ok); }
    .sr-v.warn { color: var(--warn); }
    .sr-v.err  { color: var(--danger); }
    .sr-v.pri  { color: var(--primary); }

    /* Sparkline mini-chart (SVG) */
    .sparkline { display: block; width: 100%; height: 36px; margin-top: 6px; }

    /* Tooltip nuvoletta */
    [data-tip] { position: relative; cursor: default; }
    [data-tip]::after {
      content: attr(data-tip);
      position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%);
      background: var(--bg2); border: 1px solid var(--border);
      color: var(--text); font-size: 9px; line-height: 1.5;
      padding: 5px 9px; border-radius: 3px;
      white-space: nowrap; pointer-events: none;
      opacity: 0; transition: opacity 0.15s; z-index: 50;
    }
    [data-tip]:hover::after { opacity: 1; }

    /* Event log */
    #evt-log { flex: 1; overflow-y: auto; padding: 4px 0; }
    .ev { display: flex; gap: 6px; padding: 3px 10px; border-bottom: 1px solid rgba(24,32,48,.5); font-size: 9px; }
    .ev-ts { color: var(--dim); flex-shrink: 0; }
    .ev-type { font-weight: 700; flex-shrink: 0; min-width: 48px; }
    .ev-detail { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ev-match  { color: var(--ok); }
    .ev-intent { color: var(--dim); }
    .ev-ack    { color: var(--warn); }
    .ev-cancel { color: var(--danger); }

    /* aa Content row (layout + push drawer) aaaaaaaaaaaaaaaaaaa */
    #content-row { display: flex; flex: 1; overflow: hidden; }

    /* aa Combined AI + Narration Panel (push drawer) aaaaaaaaaa */
    #assist-drawer {
      width: 0; overflow: hidden; flex-shrink: 0;
      background: var(--bg2);
      display: flex; flex-direction: column;
      transition: width 0.22s cubic-bezier(.4,0,.2,1);
    }
    #assist-drawer.open { width: 380px; min-width: 380px; border-left: 1px solid var(--border); }

    /* Narration section */
    #narr-section {
      display: flex; flex-direction: column;
      flex: 0 0 42%; min-height: 0; overflow: hidden;
      border-bottom: 1px solid var(--border);
    }
    #narr-top {
      background: var(--bg3); border-bottom: 1px solid var(--border);
      padding: 6px 10px; flex-shrink: 0;
    }
    #narr-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
    #narr-step-num { font-size: 8px; color: var(--primary); font-weight: 700; min-width: 28px; }
    #narr-step-title { font-size: 10px; font-weight: 700; color: var(--text); flex: 1;
                       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #narr-btns { display: flex; gap: 4px; align-items: center; }
    #narr-btns button {
      background: transparent; border: 1px solid var(--border);
      color: var(--dim); font-family: var(--font); font-size: 12px;
      padding: 2px 8px; border-radius: 2px; cursor: pointer; line-height: 1;
    }
    #narr-btns button:hover { border-color: var(--primary); color: var(--primary); }
    #narr-play-btn {
      color: var(--ok) !important; border-color: rgba(51,204,119,.4) !important;
      min-width: 34px; font-size: 11px !important;
    }
    #narr-step-sel {
      background: var(--bg); border: 1px solid var(--border);
      color: var(--dim); font-family: var(--font); font-size: 8px;
      padding: 3px 4px; border-radius: 2px; cursor: pointer;
      width: 100%; margin-top: 5px; display: block;
    }
    #narr-search {
      flex: 1; min-width: 0;
      background: var(--bg); border: 1px solid var(--border);
      color: var(--text); font-family: var(--font); font-size: 8px;
      padding: 2px 6px; border-radius: 2px; outline: none;
    }
    #narr-search::placeholder { color: var(--dim); }
    #narr-search:focus { border-color: var(--primary); }
    #narr-search::-webkit-search-cancel-button { cursor: pointer; }
    #narr-text-wrap { flex: 1; overflow-y: auto; padding: 10px 12px; }
    #narr-text { }
    .narr-seg {
      font-size: 10px; line-height: 1.75; color: var(--dim);
      margin-bottom: 4px; padding: 3px 5px; border-radius: 2px;
      transition: background .12s, color .12s;
    }
    .narr-seg.narr-hl { color: var(--text); background: rgba(77,184,255,.09); }

    /* Panel divider (drag handle) */
    #panel-divider {
      height: 7px; background: var(--bg); border-top: 1px solid var(--border);
      cursor: row-resize; flex-shrink: 0; display: flex; align-items: center;
      justify-content: center; transition: background .15s;
    }
    #panel-divider:hover { background: rgba(77,184,255,.06); }
    #panel-divider::after { content: 'a '; font-size: 9px; color: var(--muted); letter-spacing: 3px; }

    /* AI section */
    #ai-section { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
    #assist-hdr {
      height: 34px; display: flex; align-items: center; padding: 0 10px; gap: 7px;
      border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--bg3);
    }
    #assist-hdr-title { font-size: 11px; font-weight: 700; color: var(--primary); }
    #assist-model-badge {
      font-size: 8px; padding: 1px 6px; border-radius: 2px; font-weight: 600;
      background: rgba(77,184,255,.12); color: var(--primary);
      border: 1px solid rgba(77,184,255,.25);
    }
    #assist-close-btn {
      margin-left: auto; background: none; border: none; color: var(--dim);
      cursor: pointer; font-size: 16px; font-family: var(--font); line-height: 1;
    }
    #assist-close-btn:hover { color: var(--text); }
    #assist-msgs {
      flex: 1; overflow-y: auto; padding: 10px 8px;
      display: flex; flex-direction: column; gap: 7px;
    }
    .amsg { display: flex; flex-direction: column; gap: 2px; }
    .amsg-user { align-items: flex-end; }
    .amsg-bot  { align-items: flex-start; }
    .amsg-bubble {
      max-width: 90%; font-size: 10px; line-height: 1.65; padding: 7px 10px;
      border-radius: 4px; white-space: pre-wrap; word-break: break-word;
    }
    .amsg-user .amsg-bubble {
      background: rgba(77,184,255,.13); color: var(--text);
      border: 1px solid rgba(77,184,255,.2);
    }
    .amsg-bot .amsg-bubble {
      background: var(--bg3); color: var(--text);
      border: 1px solid var(--border);
    }
    .amsg-ts { font-size: 8px; color: var(--dim); }

    /* aa Markdown rendering in bot bubbles aaaaaaaaaaaaaaaaa */
    .amsg-bubble.rendered  { white-space: normal; }
    .amsg-bubble pre.amsg-pre {
      background: var(--bg); border: 1px solid var(--border); border-radius: 3px;
      padding: 6px 8px; margin: 4px 0; overflow-x: auto;
      font-size: 9px; line-height: 1.7; white-space: pre;
    }
    .amsg-bubble code.amsg-code {
      background: rgba(77,184,255,.1); padding: 1px 4px; border-radius: 2px;
      color: var(--primary); font-size: 9px;
    }
    .amsg-bubble strong { color: var(--text); font-weight: 700; }
    /* Section labels */
    .amsg-sec {
      display: block; font-size: 8px; font-weight: 700; letter-spacing: 1.2px;
      text-transform: uppercase; margin: 7px 0 2px;
      padding: 2px 6px; border-left: 2px solid var(--border);
      border-radius: 0 2px 2px 0;
    }
    .amsg-sec-significato { color: var(--primary); border-color: var(--primary); background: rgba(77,184,255,.05); }
    .amsg-sec-calcolo     { color: var(--ok);      border-color: var(--ok);      background: rgba(51,204,119,.05); }
    .amsg-sec-tecnico, .amsg-sec-misura { color: var(--warn); border-color: var(--warn); background: rgba(255,170,34,.05); }
    /* Details toggle */
    details.amsg-details {
      margin: 5px 0; border: 1px solid var(--border); border-radius: 3px; overflow: hidden;
    }
    summary.amsg-details-sum {
      padding: 4px 8px; font-size: 9px; font-weight: 600; cursor: pointer;
      color: var(--dim); background: var(--bg3); user-select: none; list-style: none;
    }
    summary.amsg-details-sum::-webkit-details-marker { display: none; }
    summary.amsg-details-sum::before { content: "a "; font-size: 7px; opacity: .7; }
    details.amsg-details[open] > summary.amsg-details-sum::before { content: "v "; }
    summary.amsg-details-sum:hover { color: var(--text); }
    .amsg-details-body {
      padding: 6px 9px; font-size: 9px; line-height: 1.7;
      color: var(--dim); border-top: 1px solid var(--border);
    }

    #assist-status-bar {
      padding: 3px 10px; font-size: 9px; border-top: 1px solid var(--border);
      display: flex; align-items: center; gap: 5px; flex-shrink: 0;
      color: var(--dim); background: var(--bg3);
    }
    #assist-status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--dim); flex-shrink: 0; }
    #assist-status-dot.ok  { background: var(--ok); }
    #assist-status-dot.err { background: var(--danger); }
    #assist-input-row {
      display: flex; border-top: 1px solid var(--border); flex-shrink: 0;
    }
    #assist-input {
      flex: 1; background: var(--bg3); border: none; border-right: 1px solid var(--border);
      color: var(--text); font-family: var(--font); font-size: 10px;
      padding: 8px 10px; outline: none; resize: none; height: 76px;
    }
    #assist-clear-btn {
      margin-left: auto; background: none; border: none; color: var(--dim);
      cursor: pointer; font-size: 14px; font-weight: 700; line-height: 1;
      padding: 0 2px; font-family: var(--font);
    }
    #assist-clear-btn:hover { color: var(--ok); }
    #assist-send-btn {
      background: var(--primary); color: var(--bg); border: none;
      width: 44px; cursor: pointer; font-size: 16px; font-weight: 700;
    }
    #assist-send-btn:hover    { opacity: .85; }
    #assist-send-btn:disabled { opacity: .35; cursor: default; }
    #assist-shortcuts {
      padding: 4px 8px; display: flex; flex-wrap: wrap; gap: 4px;
      border-top: 1px solid var(--border); background: var(--bg3); flex-shrink: 0;
    }
    .assist-chip {
      font-size: 8px; padding: 2px 7px; border-radius: 10px;
      border: 1px solid var(--border); color: var(--dim); cursor: pointer;
      background: transparent; font-family: var(--font);
    }
    .assist-chip:hover { border-color: var(--primary); color: var(--primary); }
    #btn-assist {
      background: transparent; color: var(--primary);
      border: 1px solid rgba(77,184,255,.3); padding: 3px 10px;
      border-radius: 2px; font-family: var(--font); font-size: 10px; cursor: pointer;
    }
    #btn-assist:hover { background: rgba(77,184,255,.08); }
    #btn-warroom {
      background: transparent; color: var(--ok);
      border: 1px solid rgba(51,204,119,.35); padding: 3px 10px;
      border-radius: 2px; font-family: var(--font); font-size: 10px;
      font-weight: 700; text-decoration: none; letter-spacing: .5px;
    }
    #btn-warroom:hover { background: rgba(51,204,119,.1); }
    #btn-tipster {
      background: transparent; color: #f0c040;
      border: 1px solid rgba(240,192,64,.35); padding: 3px 10px;
      border-radius: 2px; font-family: var(--font); font-size: 10px;
      font-weight: 700; cursor: pointer; letter-spacing: .5px;
    }
    #btn-tipster:hover { background: rgba(240,192,64,.1); }

    /* aa Palinsesto date collassabili aaaaaaaaaaaaaaaaaaaaaaaa */
    #live-body details summary { outline: none; }
    #live-body details summary::-webkit-details-marker { display: none; }
    #live-body details[open] summary { border-bottom: 1px solid var(--border); }
    #live-body details summary:hover { background: var(--bg2) !important; }

    /* aa Tab navigation aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa */
    #tab-nav {
      display: flex; height: 28px; background: var(--bg2);
      border-bottom: 2px solid var(--border); flex-shrink: 0;
      overflow-x: auto; overflow-y: hidden;
    }
    #tab-nav::-webkit-scrollbar { height: 2px; }
    #tab-nav::-webkit-scrollbar-thumb { background: var(--muted); }
    .tab-btn {
      background: transparent; border: none; border-bottom: 2px solid transparent;
      color: var(--dim); font-family: var(--font); font-size: 9px; font-weight: 700;
      padding: 0 14px; cursor: pointer; letter-spacing: .7px; text-transform: uppercase;
      margin-bottom: -2px; white-space: nowrap;
    }
    .tab-btn:hover  { color: var(--text); }
    .tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
    .tab-panel      { display: none; flex: 1; flex-direction: column; overflow-y: auto; min-height: 0; }
    .tab-panel.active { display: flex; }

    /* aa Overlay kill aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa */
    #kill-ov {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,.8); z-index: 100; align-items: center; justify-content: center;
    }
    #kill-ov.show { display: flex; }
    #kill-box {
      background: var(--bg2); border: 1px solid var(--danger);
      border-radius: 4px; padding: 24px; max-width: 360px; text-align: center;
    }
    #kill-box h2 { color: var(--danger); font-size: 16px; margin-bottom: 10px; }
    #kill-box p  { color: var(--dim); font-size: 11px; line-height: 1.6; margin-bottom: 16px; }
    #kill-yes { background: var(--danger); color: #fff; border: none; padding: 8px 24px; border-radius: 2px; font-family: var(--font); font-size: 11px; font-weight: 700; cursor: pointer; margin-right: 8px; }
    #kill-no  { background: transparent; color: var(--dim); border: 1px solid var(--border); padding: 8px 24px; border-radius: 2px; font-family: var(--font); font-size: 11px; cursor: pointer; }

    /* aa Bet Registration Modal aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa */
    #bet-modal-ov {
      display: none; position: fixed; inset: 0; z-index: 300;
      background: rgba(0,0,0,.75); align-items: center; justify-content: center;
    }
    #bet-modal-ov.show { display: flex; }
    #bet-modal {
      background: var(--bg2); border: 1px solid var(--primary);
      border-radius: 4px; padding: 20px 24px; width: 340px; max-width: 94vw;
    }
    #bet-modal h3 {
      color: var(--primary); font-size: 12px; font-weight: 700;
      letter-spacing: 1px; margin-bottom: 4px;
    }
    #bet-modal .bm-match {
      color: var(--text); font-size: 11px; font-weight: 700; margin-bottom: 14px;
    }
    .bm-row { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
    .bm-lbl { font-size: 8px; text-transform: uppercase; letter-spacing: .8px; color: var(--dim); }
    .bm-inp {
      background: var(--bg3); border: 1px solid var(--border);
      color: var(--text); font-family: var(--font); font-size: 11px;
      padding: 5px 8px; border-radius: 2px; width: 100%;
    }
    .bm-inp:focus { outline: none; border-color: var(--primary); }
    .bm-row-h { display: flex; gap: 8px; }
    .bm-row-h .bm-row { flex: 1; }
    #bm-info { font-size: 9px; color: var(--ok); min-height: 14px; margin-bottom: 6px; }
    #bm-err  { font-size: 9px; color: var(--danger); min-height: 14px; margin-bottom: 6px; }
    .bm-btns { display: flex; gap: 8px; margin-top: 14px; }
    #bm-confirm { flex: 1; background: var(--ok); color: var(--bg); border: none;
                  font-family: var(--font); font-size: 10px; font-weight: 700;
                  padding: 7px; border-radius: 2px; cursor: pointer; }
    #bm-confirm:hover { opacity: .87; }
    #bm-confirm:disabled { opacity: .4; cursor: default; }
    #bm-cancel { background: transparent; color: var(--dim); border: 1px solid var(--border);
                 font-family: var(--font); font-size: 10px; padding: 7px 14px;
                 border-radius: 2px; cursor: pointer; }
    #bm-cancel:hover { color: var(--text); }

    /* aa Equity sparkline aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa */
    .equity-spark { display: block; width: 100%; height: 44px; margin-top: 4px; }
    .eq-pos { color: var(--ok); }
    .eq-neg { color: var(--lay); }

    /* aa Placed bets list aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa */
    .pb-row { display: flex; gap: 6px; padding: 5px 10px; font-size: 9px;
              border-bottom: 1px solid rgba(24,32,48,.5); align-items: flex-start; }
    .pb-match { flex: 1; min-width: 0; }
    .pb-match strong { color: var(--text); display: block; font-size: 9px; }
    .pb-match span   { color: var(--dim); font-size: 8px; }
    .pb-badge { font-size: 8px; font-weight: 700; padding: 1px 5px;
                border-radius: 2px; flex-shrink: 0; align-self: center; }
    .pb-win  { background: rgba(51,204,119,.15);  color: var(--ok);    border: 1px solid rgba(51,204,119,.3); }
    .pb-loss { background: rgba(255,68,68,.12);   color: var(--danger);border: 1px solid rgba(255,68,68,.25); }
    .pb-open { background: rgba(77,184,255,.1);   color: var(--primary);border: 1px solid rgba(77,184,255,.25); }
    .pb-stake { color: var(--warn); font-weight: 700; flex-shrink: 0; align-self: center; font-size: 9px; }
    .pb-pl    { font-weight: 700; flex-shrink: 0; align-self: center; font-size: 9px; min-width: 44px; text-align: right; }

    /* aa Responsive split aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa */
    #panel-markets { flex: 1.4; }
    #panel-orders  { flex: 1; }
    #panel-charts  { width: 280px; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
    #log-strip     { height: 140px; background: var(--bg); border-top: 1px solid var(--border);
                     display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; }