:root {
    --ink: #121926;
    --panel: #1a2333;
    --panel-2: #212c40;
    --line: #2a3548;
    --text: #dce3f0;
    --muted: #7c89a3;
    --buy: #4cc38a;
    --sell: #f2555a;
    --flash: #f0b429;
    --radius: 6px;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--ink);
    color: var(--text);
    font: 15px/1.5 "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
    font-variant-numeric: tabular-nums;
  }
  button, input, select { font: inherit; color: inherit; }
  button {
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 7px 14px;
    cursor: pointer;
  }
  button:hover { background: #2a3752; }
  button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--flash); outline-offset: 1px;
  }
  input, select {
    background: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 7px 10px;
    width: 100%;
  }

  .shell { display: grid; grid-template-columns: 370px 1fr; min-height: 100vh; }
  .side { border-right: 1px solid var(--line); padding: 20px; overflow-y: auto; }
  .main { padding: 20px 24px; display: flex; flex-direction: column; min-width: 0; }

  h1 { font-size: 19px; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.01em; }
  h2 { font-size: 14px; font-weight: 600; color: var(--muted); margin: 26px 0 10px; }
  .sub { color: var(--muted); font-size: 13px; margin: 0 0 20px; }
  .hint { color: var(--muted); font-size: 12.5px; margin: 8px 0 0; }

  .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
  .card + .card { margin-top: 10px; }
  .wide { width: 100%; margin-top: 8px; }

  .tick {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--line); background: var(--panel-2);
    border-radius: 20px; padding: 4px 6px 4px 12px; font-size: 13.5px; font-weight: 600;
  }
  .tick small { color: var(--muted); font-weight: 400; }
  .tick button { background: none; border: none; color: var(--muted); padding: 0 4px; line-height: 1; }
  .tick button:hover { color: var(--sell); background: none; }

  .chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .chip {
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    border-radius: 20px;
    padding: 3px 11px;
    font-size: 12.5px;
  }
  .chip[aria-pressed="true"] { background: var(--panel-2); color: var(--text); border-color: #3d4c6b; }
  .chip .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); margin-right: 6px; vertical-align: 1px; }
  .chip[data-live="1"] .dot { background: var(--buy); }
  .chip[data-live="0"] .dot { background: var(--sell); }

  .row { display: flex; gap: 8px; align-items: center; }
  .two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .grid2 { display: grid; grid-template-columns: 1fr 108px; gap: 8px; align-items: center; margin-bottom: 8px; }
  .grid2 span { color: var(--muted); font-size: 13px; }
  .off span { color: #5b6580; }
  .own input { border-color: #4a5a80; }
  .label { color: var(--muted); font-size: 13px; margin: 12px 0 6px; }
  .check { display: flex; align-items: center; gap: 7px; }
  .check input { width: auto; }

  .empty { color: var(--muted); font-size: 13px; padding: 6px 0; }
  .pair {
    display: grid; grid-template-columns: 10px 1fr auto; gap: 9px; align-items: center;
    padding: 7px 8px; border-radius: var(--radius); cursor: pointer; width: 100%;
    background: none; border: 1px solid transparent; text-align: left;
  }
  .pair:hover { background: var(--panel-2); }
  .pair.picked { border-color: #3d4c6b; background: var(--panel-2); }
  .pair .led { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
  .pair.live .led { background: var(--buy); }
  .pair.dead .led { background: var(--sell); }
  .pair .who { font-size: 13.5px; }
  .pair .who small { display: block; color: var(--muted); font-size: 12px; }
  .pair .num { text-align: right; font-size: 12px; color: var(--muted); }
  .pair .num b { display: block; color: var(--text); font-size: 13px; font-weight: 600; }
  .tg {
    display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
    color: #7aa2f7; border: 1px solid #35507f; border-radius: 4px;
    padding: 0 4px; margin-left: 6px; vertical-align: 1px;
  }
  .pair.quiet .num b { color: var(--muted); }
  .warn { color: var(--flash); font-size: 13px; margin-top: 8px; }
  .saved { color: var(--buy); font-size: 13px; margin: 8px 0 0; }
  .voice-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; }
  .voice-row .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .voice-row button { padding: 3px 9px; font-size: 12.5px; }

  .tape-head { display: flex; align-items: center; gap: 8px 14px; margin-bottom: 14px; flex-wrap: wrap; }
  .tape-head h1 { margin: 0; }
  .live { color: var(--muted); font-size: 13px; margin-left: auto; }

  .tape { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
  .sig {
    display: grid;
    grid-template-columns: 118px 1fr auto;
    gap: 14px;
    align-items: center;
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 3px solid var(--line);
    border-radius: var(--radius);
    padding: 12px 14px;
  }
  .sig.buy { border-left-color: var(--buy); }
  .sig.sell { border-left-color: var(--sell); }
  .sig .tkr { font-size: 17px; font-weight: 600; }
  .sig .dir { font-size: 12.5px; font-weight: 600; }
  .sig.buy .dir { color: var(--buy); }
  .sig.sell .dir { color: var(--sell); }
  .sig .where { color: var(--muted); font-size: 13px; }
  .sig .times { color: var(--muted); font-size: 12.5px; }
  .sig .amt { font-size: 17px; font-weight: 600; text-align: right; }
  .sig.buy .amt { color: var(--buy); }
  .sig.sell .amt { color: var(--sell); }
  .sig .det { color: var(--muted); font-size: 12px; text-align: right; }
  .sig .running { color: var(--flash); }
  @keyframes land { from { border-left-color: var(--flash); background: #232f45; } }
  .sig.fresh { animation: land 1.2s ease-out; }
  @media (prefers-reduced-motion: reduce) { .sig.fresh { animation: none; } }

  .sig { cursor: pointer; }
  .sig:hover { border-color: #3d4c6b; }

  .modal {
    position: fixed; inset: 0; background: rgba(9, 13, 22, 0.82);
    display: none; align-items: center; justify-content: center; padding: 24px; z-index: 20;
  }
  .modal.open { display: flex; }
  .sheet {
    background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
    width: min(1100px, 100%); max-height: 92vh; display: flex; flex-direction: column; padding: 18px;
  }
  .sheet h3 { margin: 0; font-size: 17px; font-weight: 600; }
  .sheet .bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
  .sheet .bar .close { margin-left: auto; }
  .tf { padding: 5px 11px; font-size: 13px; }
  .tf[aria-pressed="true"] { background: #34456b; border-color: #4a5c88; }
  #chartCanvas { width: 100%; height: 460px; display: block; }
  .legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
  .legend i { display: inline-block; width: 10px; height: 3px; margin-right: 6px; vertical-align: 3px; }
  .tf[aria-pressed="true"], .tool[aria-pressed="true"] { background: #34456b; border-color: #4a5c88; }
  .tool { padding: 5px 11px; font-size: 13px; }
  .detail { width: 100%; border-collapse: collapse; font-size: 13px; }
  .detail th { text-align: right; color: var(--muted); font-weight: 500; padding: 6px 10px; position: sticky; top: 0; background: var(--panel); }
  .detail th:first-child, .detail td:first-child { text-align: left; }
  .detail td { text-align: right; padding: 5px 10px; border-top: 1px solid var(--line); }
  .detail tr.slow td { color: var(--flash); }
  .scroll { overflow-y: auto; max-height: 56vh; }
  .totals { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
  .totals b { color: var(--text); font-size: 15px; display: block; font-weight: 600; }
  .sig .more { background: none; border: 1px solid var(--line); color: var(--muted); font-size: 12px; padding: 3px 9px; margin-top: 4px; }
  .sig .more:hover { color: var(--text); }
  .sig .kill {
    background: none; border: none; color: var(--muted); font-size: 16px;
    padding: 0 4px; line-height: 1; opacity: 0; margin-left: 8px;
  }
  .sig:hover .kill { opacity: 1; }
  .sig .kill:hover { color: var(--sell); background: none; }
  .head-actions { display: flex; gap: 8px; margin-left: auto; align-items: center; }
  #chartVenues .chip { cursor: pointer; opacity: 0.45; border-color: var(--line); }
  #chartVenues .chip .dot { background: currentColor; width: 8px; height: 8px; }
  #chartVenues .chip[aria-pressed="true"] {
    opacity: 1; border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor;
    background: var(--panel-2); font-weight: 600;
  }

  /* ---------- вкладки настроек в левой панели ---------- */
  .side-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px; }
  .side-tabs button {
    background: transparent; border: 1px solid transparent; color: var(--muted);
    border-radius: var(--radius); padding: 5px 10px; font-size: 13px;
  }
  .side-tabs button:hover { background: var(--panel-2); color: var(--text); }
  .side-tabs button[aria-pressed="true"] {
    background: var(--panel-2); color: var(--text); border-color: #3d4c6b; font-weight: 600;
  }
  .pane { display: none; }
  .pane.on { display: block; }
  .pane > h2:first-child { margin-top: 0; }

  /* ---------- арбитраж ---------- */
  .arb-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
  .arb-bar input, .arb-bar select { width: auto; min-width: 150px; }
  .arb-bar .spacer { margin-left: auto; color: var(--muted); font-size: 13px; }
  .arb-wrap { flex: 1; overflow: auto; min-width: 0; max-width: 100%;
    border: 1px solid var(--line); border-radius: var(--radius); }
  table.arb { width: 100%; border-collapse: collapse; font-size: 13px; }
  table.arb th {
    position: sticky; top: 0; z-index: 1; background: var(--panel); text-align: right;
    color: var(--muted); font-weight: 500; padding: 9px 12px; white-space: nowrap;
    border-bottom: 1px solid var(--line);
  }
  table.arb th:first-child, table.arb td:first-child { text-align: left; }
  table.arb th.l, table.arb td.l { text-align: left; }
  table.arb td { padding: 9px 12px; border-top: 1px solid var(--line); text-align: right; white-space: nowrap; }
  table.arb tbody tr { cursor: pointer; }
  table.arb tbody tr:hover { background: var(--panel-2); }
  .arb-coin { font-weight: 600; font-size: 14px; }
  .arb-coin small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 400; }
  .leg { display: flex; align-items: center; gap: 8px; line-height: 1.35; }
  .leg + .leg { margin-top: 3px; }
  .leg .tagv {
    font-size: 10px; font-weight: 700; border-radius: 3px; padding: 1px 5px;
    border: 1px solid var(--line); color: var(--muted);
  }
  .leg .tagv.s { color: #7aa2f7; border-color: #35507f; }
  .leg .tagv.f { color: #f0b429; border-color: #6b551b; }
  .leg .who { color: var(--muted); }
  .leg .px { color: var(--text); }
  .pos { color: var(--buy); font-weight: 600; }
  .neg { color: var(--sell); font-weight: 600; }
  .big { font-size: 15px; font-weight: 700; }
  .arb-status { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .vst { font-size: 12px; border: 1px solid var(--line); border-radius: 20px; padding: 2px 10px; color: var(--muted); }
  .vst.ok { color: var(--buy); border-color: #2f5f49; }
  .vst.bad { color: var(--sell); border-color: #6b3034; }

  /* карточка связки */
  .arb-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
  .vcard { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
  .vcard h4 { margin: 0 0 10px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
  .vcard .side-tag { font-size: 10.5px; font-weight: 700; border-radius: 3px; padding: 2px 7px; }
  .vcard .side-tag.buy { background: rgba(76,195,138,.15); color: var(--buy); }
  .vcard .side-tag.sell { background: rgba(242,85,90,.15); color: var(--sell); }
  .vrow { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 13px; }
  .vrow span { color: var(--muted); }
  #arbChart { width: 100%; height: 420px; display: block; }
  .arb-sum { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
  .arb-sum b { display: block; color: var(--text); font-size: 17px; font-weight: 700; }
  @media (max-width: 760px) { .arb-cards { grid-template-columns: 1fr; } }

  /* ---------- значки бирж ---------- */
  .vi { display: inline-block; width: 16px; height: 16px; border-radius: 4px; flex: none; vertical-align: -3px; }
  .vi.big { width: 22px; height: 22px; border-radius: 6px; vertical-align: -5px; }
  .vname { display: inline-flex; align-items: center; gap: 7px; }

  /* ---------- выбор бирж над таблицей ---------- */
  /* ключи бирж в настройках */
  .keyrow { border-top: 1px solid var(--line); padding: 10px 0; }
  .keyrow:first-child { border-top: 0; }
  .keyrow .top { display: flex; align-items: center; gap: 8px; }
  .keyrow .top .st { margin-left: auto; font-size: 11px; color: var(--muted); }
  .keyrow .top .st.on { color: var(--buy); }
  .keyrow .fields { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .keyrow .fields input { flex: 1 1 140px; min-width: 120px; }
  .keyrow .fields button { flex: 0 0 auto; }
  .keyrow .note { font-size: 11px; color: var(--muted); margin-top: 6px; }
  /* моя позиция под графиком */
  .posbox { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
            margin-top: 10px; background: var(--panel-2); }
  .poshead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .poshead .lbl { color: var(--muted); font-size: 12px; }
  .posgrid { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 8px; }
  .posgrid div { display: flex; flex-direction: column; gap: 2px; }
  .posgrid span { color: var(--muted); font-size: 11px; }
  .posgrid b { font-size: 15px; }
  .posnote { color: var(--muted); font-size: 12px; margin-top: 6px; }
  /* звёздочка избранного прямо в строке */
  .star { cursor: pointer; color: #43506b; font-size: 15px; line-height: 1;
          background: none; border: 0; padding: 2px 4px; }
  .star:hover { color: #ffb648; }
  .star.on { color: #ffb648; }
  /* полоска избранного над таблицей */
  .favbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; align-items: center; }
  .favbar .lbl { color: var(--muted); font-size: 12px; margin-right: 2px; }
  .favbar button.fav {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
    border-radius: 999px; padding: 4px 10px; font-size: 12px;
  }
  .favbar button.fav b { font-weight: 700; }
  .favbar button.fav .sp { color: var(--buy); font-weight: 700; }
  .favbar button.fav .x { color: var(--muted); font-weight: 700; }
  .favbar button.fav:hover { border-color: #3d4c6b; }
  /* баннер сработавшего алерта */
  .ringbar { display: none; flex-direction: column; gap: 6px; margin-bottom: 12px; }
  .ringbar.on { display: flex; }
  .ring {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    border: 1px solid var(--sell); border-radius: 8px; padding: 9px 12px;
    background: rgba(242,85,90,.12); animation: ringPulse 1.1s ease-in-out infinite;
  }
  .ring b { font-size: 15px; }
  .ring .grow { margin-left: auto; }
  .ring button {
    cursor: pointer; border-radius: 6px; padding: 5px 12px; font-size: 12px;
    border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  }
  .ring button.off { border-color: var(--sell); color: #ffd9da; }
  @keyframes ringPulse { 0%,100% { background: rgba(242,85,90,.10); }
                         50% { background: rgba(242,85,90,.24); } }
  /* алерты в карточке связки */
  .alertrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0 4px; }
  .alertrow input[type="number"] { width: 90px; }
  .alertrow select { width: auto; min-width: 120px; }
  .alertlist { display: flex; flex-direction: column; gap: 4px; }
  .alertlist .it { display: flex; gap: 8px; align-items: center; font-size: 12px;
                   color: var(--muted); }
  .alertlist .it b { color: var(--text); }
  .alertlist .it button { cursor: pointer; background: none; border: 0;
                          color: var(--muted); font-size: 12px; text-decoration: underline; }
  .vpick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
  .vpick button {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px;
    border-radius: 20px; font-size: 12.5px; background: transparent;
    border: 1px solid var(--line); color: var(--muted); opacity: 0.5;
  }
  .vpick button[aria-pressed="true"] { opacity: 1; color: var(--text); border-color: #3d4c6b; background: var(--panel-2); }
  .vpick .k { font-size: 10px; font-weight: 700; opacity: 0.75; }
  .vpick-all { margin-left: 4px; }

  /* ---------- свечи ---------- */
  .tfrow { display: flex; align-items: center; gap: 6px; margin: 4px 0 8px; flex-wrap: wrap; }
  .tfrow .lbl { color: var(--muted); font-size: 12.5px; margin-right: 4px; }
  .tfrow button { padding: 3px 10px; font-size: 12.5px; }
  img.vi { width: 16px; height: 16px; border-radius: 4px; object-fit: contain;
           vertical-align: -3px; flex: none; background: #ffffff10; }
  img.vi.big { width: 22px; height: 22px; border-radius: 6px; }
  .live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--buy); margin-right: 6px; }
  .live-dot.stale { background: var(--flash); }
  @keyframes tick { from { background: rgba(240,180,41,.16); } }
  tr.tickup td { animation: tick .6s ease-out; }
  @media (prefers-reduced-motion: reduce) { tr.tickup td { animation: none; } }

  @media (max-width: 900px) {
    .shell { grid-template-columns: 1fr; }
    .side { border-right: none; border-bottom: 1px solid var(--line); }
    .sig { grid-template-columns: 1fr auto; }
    .sig .where { grid-column: 1 / -1; }
  }