/* Themes: light by default; dark when chosen with the moon button, or by the system
     unless light was chosen. --ak-* colour the dark-styled parts (task form, wallet panel).
     --accent is the brand colour, teal (owner, 21 Oct 2026: a competitor uses green): buttons,
     switches, active tabs, links, focus. --green / --red stay for meaning only: gains and
     losses, buys and sells, landed and failed. */
  :root {
    color-scheme: light;
    --bg: #f6f7f9; --panel: #ffffff; --border: #e3e6eb; --text: #1b1f24; --muted: #6a7380;
    --accent: #0d9488; --on-accent: #ffffff; --accent-weak: color-mix(in srgb, var(--accent) 14%, transparent); --green: #1f9d55; --red: #d64545; --amber: #c27c0e; --violet: #7c5cd6;
    --chip: #eef1f5;
    --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
    --ak-bg: #ffffff; --ak-panel: #ffffff; --ak-card: #ffffff; --ak-line: #e3e6eb; --ak-input: #ffffff;
    --ak-text: #1b1f24; --ak-muted: #6a7380; --ak-switch-off: #cfd4da;
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0e1116; --panel: #181d26; --border: #2a313c; --text: #e6e9ee; --muted: #8b95a3;
    --accent: #14b8a6; --on-accent: #06211d; --accent-weak: color-mix(in srgb, var(--accent) 14%, transparent); --green: #3ccf7e; --red: #ff6b6b; --amber: #f2b33d; --violet: #a68bff;
    --chip: #222934;
    --ak-bg: #0e1217; --ak-panel: #151a22; --ak-card: #181e27; --ak-line: #2a313c; --ak-input: #0f141b;
    --ak-text: #e8eaed; --ak-muted: #8a929c; --ak-switch-off: #3a3f47;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --bg: #0e1116; --panel: #181d26; --border: #2a313c; --text: #e6e9ee; --muted: #8b95a3;
      --accent: #14b8a6; --on-accent: #06211d; --accent-weak: color-mix(in srgb, var(--accent) 14%, transparent); --green: #3ccf7e; --red: #ff6b6b; --amber: #f2b33d; --violet: #a68bff;
      --chip: #222934;
      --ak-bg: #0e1217; --ak-panel: #151a22; --ak-card: #181e27; --ak-line: #2a313c; --ak-input: #0f141b;
      --ak-text: #e8eaed; --ak-muted: #8a929c; --ak-switch-off: #3a3f47;
    }
  }
  .theme-btn { background: none; border: 1px solid var(--border); color: var(--text); border-radius: 8px; width: 30px; height: 26px; cursor: pointer; font-size: var(--fs-s); line-height: 1; }
  * { box-sizing: border-box; }
  /* Thin, unobtrusive scrollbars (owner, 25 Oct 2026): a scrollbar shows only when the content
     overflows (every scroll area uses overflow:auto), and then it is a slim, subtle thumb with no
     track chrome, in both themes. */
  * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 24%, transparent) transparent; }
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 22%, transparent); border-radius: 8px; }
  ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text) 40%, transparent); }
  ::-webkit-scrollbar-corner { background: transparent; }
  body { margin: 0; background: var(--bg); color: var(--text);
         font: var(--fs-s)/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
  .wrap { max-width: 1200px; margin: 0 auto; padding: 20px 16px 40px; }
  /* Chain scope (owner, 25 Oct 2026): the header chain selection scopes the whole app. On a
     non-Solana chain, Solana-only content (.sol-only) hides and the chain's own (.evm-only)
     content shows. Solana is the default (body[data-chain="solana"]) and never hides anything. */
  /* One task form for every chain (owner, 30 Oct 2026: strictly no separate/individual per-chain
     view): the form's Solana-only rows show on EVM too (JS setFormChain controls them). Only the
     NON-form Solana-only areas (wallet box, holdings hub, wallet tab) still hide per chain. */
  body[data-chain="rh"] .sol-only:not(#task-form *),
  body[data-chain="bsc"] .sol-only:not(#task-form *),
  body[data-chain="eth"] .sol-only:not(#task-form *),
  body[data-chain="base"] .sol-only:not(#task-form *) { display: none !important; }
  /* Sniper tab: hide fields that are moot for a snipe — First Purchase (always forced on) and Token
     Limit (first purchase already caps a coin at one buy). Copy/Tasks tab keeps them (owner, 3 Nov 2026). */
  body.snipe-tab #task-form .copy-only { display: none !important; }
  .evm-only { display: none; }
  body[data-chain="rh"] .evm-only,
  body[data-chain="bsc"] .evm-only,
  body[data-chain="eth"] .evm-only,
  body[data-chain="base"] .evm-only { display: block; }
  /* Logo hover preview (owner, 25 Oct 2026): hovering the brand shows a larger logo that
     auto-hides when the mouse leaves. Pure CSS. */
  .brand { position: relative; margin: 0; }
  .brand-pop { position: absolute; top: 100%; left: 0; margin-top: 8px; padding: 12px; z-index: 200;
    background: var(--panel, #11161c); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .4); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.96);
    transition: opacity .15s ease, transform .15s ease, visibility .15s; pointer-events: none; }
  .brand:hover .brand-pop, .brand:focus-within .brand-pop { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
  .brand-pop img { width: 180px; max-width: 60vw; height: auto; display: block; border-radius: 12px; }
  header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; }
  h1 { font-size: var(--fs-l); margin: 0; font-weight: 650; }
  .badge { padding: 3px 10px; border-radius: 999px; font-size: var(--fs-s); font-weight: 700; letter-spacing: .03em; }
  .badge.dry { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); }
  .badge.live { background: var(--red); color: #fff; }
  .conn { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-s); }
  .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); }
  .dot.on { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
  .spacer { flex: 1; }
  .muted { color: var(--muted); }
  .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
  .tile { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
  .tile .label { color: var(--muted); font-size: var(--fs-s); text-transform: uppercase; letter-spacing: .04em; }
  .tile .value { font-size: var(--fs-l); font-weight: 650; margin-top: 2px; font-variant-numeric: tabular-nums; }
  .tile .sub { color: var(--muted); font-size: var(--fs-s); margin-top: 2px; }
  .grid { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
  @media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }
  .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
  .panel h2 { font-size: var(--fs-s); margin: 0; padding: 12px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .filters { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
  .filters button { border: 1px solid var(--border); background: var(--chip); color: var(--text); border-radius: 999px;
                    padding: 3px 10px; font-size: var(--fs-s); cursor: pointer; }
  .filters button.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  .feed { max-height: 640px; overflow-y: auto; }
  .row { display: grid; grid-template-columns: 74px 78px 1fr; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--border); align-items: start; }
  .row:last-child { border-bottom: 0; }
  .time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: var(--fs-s); padding-top: 2px; }
  .kind { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; border-radius: 6px; padding: 2px 6px; text-align: center; }
  .k-trade { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
  .k-copy { color: var(--violet); background: color-mix(in srgb, var(--violet) 14%, transparent); }
  .k-landed { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
  .k-failed, .k-error { color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); }
  .k-skipped { color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); }
  .k-info { color: var(--muted); background: var(--chip); }
  .text { word-break: break-all; font-family: var(--mono); font-size: var(--fs-xs); }
  .text a { color: var(--accent); text-decoration: none; margin-left: 6px; font-family: system-ui, sans-serif; white-space: nowrap; }
  .text a:hover { text-decoration: underline; }
  .hl-buy { color: var(--green); font-weight: 700; }
  .hl-sell { color: var(--red); font-weight: 700; }
  .hl-good { color: var(--green); font-weight: 600; }
  .hl-warn { color: var(--amber); font-weight: 600; }
  .hl-bad { color: var(--red); font-weight: 700; }
  .hl-sent { color: var(--violet); font-weight: 600; }
  .hl-ms { color: var(--muted); }
  .hl-task { color: var(--violet); }
  .hl-venue { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 6px; padding: 0 5px; font-weight: 600; }
  .hl-same { color: #fff; background: var(--green); border-radius: 6px; padding: 1px 7px; font-weight: 800; letter-spacing: .04em; }
  .row.k-row-landed { background: color-mix(in srgb, var(--green) 5%, transparent); }
  .row.k-row-failed, .row.k-row-error { background: color-mix(in srgb, var(--red) 6%, transparent); }
  .row.k-row-skipped { opacity: .75; }
  .tx-panel { margin-bottom: 16px; }
  /* Wallet hub in two columns: wallets left, rewards + change wallet right; one column when narrow. */
  .whub-2col { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; align-items: start; margin-bottom: 16px; }
  .whub-2col > .tx-panel, .whub-col2 > .tx-panel { margin-bottom: 0; }
  .whub-col2 { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  @media (max-width: 760px) { .whub-2col { grid-template-columns: 1fr; } }
  .tx-scroll { max-height: 360px; overflow-y: auto; }
  table.txs { width: 100%; border-collapse: collapse; min-width: 860px; font-size: var(--fs-s); }
  table.txs th { position: sticky; top: 0; background: var(--panel); text-align: center; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; padding: 8px 12px; border-bottom: 1px solid var(--border); }
  table.txs td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
  table.txs tr:nth-child(even) td { background: color-mix(in srgb, var(--chip) 45%, transparent); }
  table.txs a { color: var(--accent); text-decoration: none; }
  .tx-status { font-size: var(--fs-xs); font-weight: 700; border-radius: 6px; padding: 2px 7px; }
  .st-landed { color: var(--green); background: color-mix(in srgb, var(--green) 15%, transparent); }
  .st-sent { color: var(--violet); background: color-mix(in srgb, var(--violet) 15%, transparent); }
  .st-failed, .st-expired, .st-sim-failed { color: var(--red); background: color-mix(in srgb, var(--red) 15%, transparent); }
  /* A copy that didn't go out (owner, 26 Oct 2026): a fixable miss (amber) vs a by-design filter (muted). */
  .st-skipped { color: var(--amber); background: color-mix(in srgb, var(--amber) 15%, transparent); }
  .st-filtered { color: var(--muted); background: color-mix(in srgb, var(--muted) 15%, transparent); }
  .st-sim-ok { color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); }
  .tx-detail { color: var(--red); font-size: var(--fs-xs); margin-top: 2px; white-space: normal; }
  /* Suggestion to land a failed copy next time (owner, 26 Oct 2026). */
  .tx-suggest { color: var(--accent); font-size: var(--fs-xs); margin-top: 3px; white-space: normal; font-weight: 600; }
  .empty { padding: 30px 14px; text-align: center; color: var(--muted); }
  dl { margin: 0; padding: 6px 14px 12px; }
  dt { color: var(--muted); font-size: var(--fs-s); margin-top: 10px; }
  dd { margin: 2px 0 0; word-break: break-all; font-family: var(--mono); font-size: var(--fs-xs); }
  .note { padding: 0 14px 14px; color: var(--muted); font-size: var(--fs-s); }
  .offline { display: none; background: var(--red); color: #fff; padding: 8px 12px; border-radius: 8px; margin-bottom: 14px; }
  .live-toggle { display: flex; align-items: center; gap: 8px; font-size: var(--fs-s); color: var(--muted); }
  .live-toggle input:checked + span { background: var(--red); }
  /* Tabs */
  .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
  .tabs a { padding: 8px 14px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; font-weight: 600; }
  .tabs a.active { color: var(--text); border-bottom-color: var(--accent); }
  .view { display: none; }
  .view.active { display: block; }
  /* Tasks table */
  .toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
  .btn { border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 8px; padding: 7px 14px; font: inherit; cursor: pointer; }
  .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
  .btn.danger { color: var(--red); }
  .btn.task-del { padding: 3px 10px; margin-inline-start: 6px; font-size: var(--fs-s); border-color: var(--red); }
  .btn:disabled { opacity: .6; cursor: default; }
  .table-wrap { overflow-x: auto; }
  table.tasks { width: 100%; border-collapse: collapse; min-width: 720px; }
  table.tasks th { text-align: center; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--border); }
  table.tasks td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
  table.tasks tr:last-child td { border-bottom: 0; }
  .task-name { font-weight: 650; }
  .task-sub { color: var(--muted); font-size: var(--fs-s); }
  /* Executed-count bubble by the task name: how many buys fired (and, with a Follow Count, how many
     of its limit). Turns red once the limit is reached and the task has turned itself off. */
  .task-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 7px; margin-left: 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-size: var(--fs-xs); font-weight: 700; line-height: 1; vertical-align: middle; }
  .task-count.full { background: color-mix(in srgb, var(--red) 20%, transparent); color: var(--red); }
  .mono { font-family: var(--mono); font-size: var(--fs-xs); }
  .pnl { display: grid; grid-template-columns: auto auto auto; gap: 1px 10px; font-variant-numeric: tabular-nums; font-size: var(--fs-s); align-items: baseline; }
  .pnl .l { font-size: var(--fs-s); }
  .pnl .n { text-align: right; font-weight: 600; }
  .pnl .c { color: var(--muted); font-size: var(--fs-s); }
  .pos { color: var(--green); } .neg { color: var(--red); }
  .chip { display: inline-block; font-size: var(--fs-xs); padding: 1px 7px; border-radius: 999px; background: var(--chip); color: var(--muted); margin: 2px 4px 0 0; }
  .icon-btn { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 4px 6px; border-radius: 6px; font-size: var(--fs-s); }
  .icon-btn:hover { background: var(--chip); color: var(--text); }
  /* Toggle switch */
  .switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; }
  .switch input { opacity: 0; width: 0; height: 0; }
  .switch span { position: absolute; inset: 0; background: var(--border); border-radius: 999px; cursor: pointer; transition: .15s; }
  .switch span::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .15s; }
  .switch input:checked + span { background: var(--accent); }
  .switch input:checked + span::before { transform: translateX(18px); }
  .switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
  /* Modal form */
  .modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: none; align-items: center; justify-content: center; padding: 16px; z-index: 10; }
  .modal-bg.open { display: flex; }
  /* Compact: never taller than the screen; only the fields scroll, the title and buttons stay. */
  .modal { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; width: 100%; max-width: 520px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
  .modal-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
  .modal-close { background: none; border: 0; color: var(--muted); font-size: var(--fs-l); cursor: pointer; padding: 8px 14px; }
  .modal-close:hover { color: var(--text); }
  .modal h3 { margin: 0; padding: 10px 14px; font-size: var(--fs-s); }
  .form { padding: 10px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; overflow-y: auto; min-height: 0; }
  .modal .input input, .modal .input textarea { padding: 6px 8px; font-size: var(--fs-s); }
  .modal .input textarea { min-height: 44px; }
  .modal .switch-row { padding: 6px 8px; font-size: var(--fs-s); }
  .modal .field .hint { font-size: var(--fs-xs); margin-top: 2px; }
  .form .full { grid-column: 1 / -1; }
  @media (max-width: 560px) { .form { grid-template-columns: 1fr; } }
  .field label { display: block; font-size: var(--fs-s); color: var(--muted); margin-bottom: 5px; font-weight: 600; }
  .field .hint { font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; }
  .input { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
  .input input, .input textarea { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; padding: 8px 10px; outline: none; }
  .input textarea { resize: vertical; min-height: 64px; font-family: var(--mono); font-size: var(--fs-xs); }
  .input .unit { color: var(--muted); padding-right: 10px; font-size: var(--fs-s); }
  .input:focus-within { border-color: var(--accent); }
  .switch-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
  .modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--border); align-items: center; }
  .form-saved { color: var(--green); font-size: var(--fs-s); margin-right: auto; }
  .form-error { color: var(--red); font-size: var(--fs-s); margin-right: auto; }
  .dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
  .dex-grid label { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; cursor: pointer; font-size: var(--fs-s); }
  .dex-grid input { accent-color: var(--accent); width: 16px; height: 16px; }
  .dex-actions { float: right; font-weight: 400; }
  .phases { display: flex; flex-direction: column; gap: 6px; }
  .phase { display: grid; grid-template-columns: 70px repeat(auto-fit, minmax(110px, 1fr)) 28px; gap: 6px; align-items: center; font-size: var(--fs-xs); }
  .phase .input { margin: 0; }
  .phase .phase-del { cursor: pointer; color: var(--muted); text-align: center; }
  @media (max-width: 600px) { .phase { grid-template-columns: 1fr 1fr; } }
  .dex-actions a { color: var(--accent); cursor: pointer; margin-left: 10px; }
  /* Task form in the reference layout: dark, wide, three columns, labels left of their values. */
  .modal.ak {
    background: var(--ak-bg); color: var(--ak-text); border-color: var(--ak-line);
    max-width: min(1880px, 97vw); max-height: calc(100vh - 24px); font-size: var(--fs-xs);
  }
  .modal.ak .modal-head { border-color: var(--ak-line); }
  .modal.ak h3 { font-size: var(--fs-s); padding: 8px 14px; }
  .ak-cols { display: grid; grid-template-columns: 1.05fr 1fr 1fr; gap: 0; overflow-y: auto; min-height: 0;
    /* The task form scrolls without a visible scrollbar (owner, 25 Oct 2026). */
    scrollbar-width: none; }
  .ak-cols::-webkit-scrollbar { width: 0; height: 0; display: none; }
  .ak-col { padding: 10px 14px; display: flex; flex-direction: column; gap: 9px; border-right: 1px solid var(--ak-line); min-width: 0; }
  .ak-col:last-child { border-right: 0; }
  .ak-card { background: var(--ak-card); border: 1px solid var(--ak-line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
  .ak-row { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; }
  .ak-row.top { align-items: flex-start; }
  .ak-label { width: 104px; flex: none; font-size: var(--fs-xs); color: var(--ak-text); line-height: 1.25; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
  .ak-label2 { width: auto; margin-left: auto; }
  .ak-label .req { color: var(--red); }
  .ak-grow { flex: 1; min-width: 0; }
  .ak-pair { display: flex; align-items: center; gap: 10px; }
  .ak-pair .input { flex: 1; min-width: 0; }
  .ak-dash { color: var(--ak-muted); }
  .ak-small { width: 120px; flex: none; }
  /* Help on the label itself (owner, 21 Oct 2026): no "?" marks; a label with a tooltip wears a
     faint dotted underline and the help cursor, and the themed .tip box shows its text on hover. */
  .has-help { text-decoration: none; cursor: help; transition: color .12s; }
  .modal.ak .input { background: var(--ak-input); border-color: var(--ak-line); border-radius: 6px; }
  .modal.ak .input input, .modal.ak .input textarea { color: var(--ak-text); font-size: var(--fs-xs); padding: 4px 6px; }
  .modal.ak .input input[type=number] { text-align: center; width: 100%; }
  .modal.ak .input textarea { min-height: 72px; background: var(--ak-input); color: var(--ak-text); border-radius: 6px;
    /* Wrap long addresses instead of a horizontal scrollbar (owner, 25 Oct 2026). */
    white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: hidden; }
  .modal.ak .input:has(textarea) { background: var(--ak-input); }
  .modal.ak .input .unit { color: var(--ak-text); font-size: var(--fs-xs); }
  .modal.ak .input:focus-within { border-color: var(--accent); }
  .modal.ak .switch input:checked + span { background: var(--accent); }
  .modal.ak .switch span { background: var(--ak-switch-off); }
  .modal.ak .hint { font-size: var(--fs-xs); color: var(--ak-muted); margin-top: 4px; }
  /* DEX list: two plain columns, one line each, no boxes (owner, 19 Oct 2026). */
  .modal.ak .dex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; }
  .modal.ak .dex-grid label { border: 0; background: none; color: var(--ak-text); font-size: var(--fs-xs); padding: 4px 2px; gap: 7px; border-radius: 6px; white-space: nowrap; }
  .modal.ak .dex-grid label span { overflow: hidden; text-overflow: ellipsis; }
  .modal.ak .dex-grid label:hover { background: var(--ak-card); }
  .modal.ak .dex-grid input { width: 13px; height: 13px; }
  .modal.ak .dex-actions a { color: var(--accent); font-size: var(--fs-s); }
  .ak-tabs { display: flex; }
  .ak-tab { border: 1px solid var(--ak-line); padding: 4px 12px; font-size: var(--fs-s); border-radius: 6px; }
  .ak-tab.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
  .ak-fees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  /* Priority-Fee row aligns under the Gas and Tip columns of the row above (owner, 21 Oct 2026). */
  .ak-fees-2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ak-fees-2 > div:first-child { grid-column: 2; }
  .ak-mode { margin: 10px 0 6px; font-size: var(--fs-s); }
  .ak-mode-title { font-weight: 700; }
  .ak-fees > div { min-width: 0; }
  .ak-cap { text-align: center; font-size: var(--fs-xs); margin-top: 4px; border: 1px solid var(--ak-line); border-radius: 6px; padding: 3px; }
  .ak-card-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--ak-line); padding-bottom: 12px; }
  /* Collapsible card (owner, 25 Oct 2026): DEX and the advanced filters. Collapsed by default; a
     CSS chevron rotates when open, no bottom rule while collapsed, the content spaced when open. */
  /* Modern expander (owner, 25 Oct 2026): a clickable header row that lights up on hover, a chevron
     that rotates from right (closed) to down (open). Used by DEX and Advanced. */
  .ak-exp > summary { cursor: pointer; list-style: none; border-radius: 8px; transition: background .12s; }
  .ak-exp > summary:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
  .ak-exp > summary::-webkit-details-marker { display: none; }
  .ak-exp:not([open]) > summary.ak-card-head { border-bottom: 0; padding-bottom: 0; }
  .ak-exp[open] > summary.ak-card-head { margin-bottom: 12px; }
  /* Expander toggle as a clear accent badge so it reads as an expander (owner, 25 Oct 2026). */
  .ak-exp .ak-chev { display: inline-flex; align-items: center; justify-content: center; margin-right: 9px; width: 22px; height: 22px; border-radius: 7px; color: var(--accent); background: var(--accent-weak); flex: none; }
  .ak-exp > summary:hover .ak-chev { background: color-mix(in srgb, var(--accent) 26%, transparent); }
  .ak-exp .ak-chev svg { width: 15px; height: 15px; transform: rotate(-90deg); transition: transform .18s ease; }
  .ak-exp[open] .ak-chev svg { transform: rotate(0deg); }
  /* The advanced card's rows are spaced like a normal ak-card's. */
  .ak-exp[open] > .ak-row + .ak-row { margin-top: 9px; }
  .dex-sum { color: var(--ak-muted); font-weight: 400; font-size: var(--fs-xs); }
  /* Buy Mode row's wallet selector (owner, 25 Oct 2026): the segmented control on the left, the
     wallet picker pushed to the right with a small wallet icon. */
  .bm-grow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .bm-grow .seg { flex: none; }
  /* Styled wallet pill (owner, 25 Oct 2026): the icon, the name and a custom chevron inside one
     rounded control; the native select's chrome is removed and the pill lights up on hover/focus. */
  /* Full-width so it lines up with the Smart Wallet and Remark boxes below it (owner, 3 Nov 2026). */
  .bm-wallet { position: relative; display: flex; width: 100%; align-items: center; gap: 6px;
    background: var(--ak-input); border: 1px solid var(--ak-line); border-radius: 8px; padding: 3px 9px; min-height: 30px;
    transition: border-color .12s, box-shadow .12s; cursor: pointer; }
  .bm-wallet:hover, .bm-wallet:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-weak); }
  .bm-wicon { width: 15px; height: 15px; flex: none; color: var(--accent); display: inline-flex; }
  .bm-wicon svg { width: 15px; height: 15px; }
  /* Custom themed wallet dropdown (owner, 25 Oct 2026): a button + themed popup, not the native
     select whose popup can't be themed. */
  .wsel-btn { border: 0; background: transparent; color: var(--ak-text); font: inherit; font-weight: 600;
    cursor: pointer; padding: 0; min-width: 0; flex: 1 1 auto; text-align: left;
    display: flex; align-items: center; gap: 8px; }
  .wsel-btn:focus { outline: none; }
  .wsel-chev { display: inline-flex; align-items: center; color: var(--ak-muted); flex: none; }
  .wsel-chev svg { width: 13px; height: 13px; transition: transform .15s; }
  .wsel-btn[aria-expanded="true"] + .wsel-chev svg { transform: rotate(180deg); }
  /* The collapsed button shows the wallet name and then its coin balances (owner, 3 Nov 2026):
     the name sits left, the coins fill the rest of the full-width box and may wrap so none is clipped. */
  /* A long wallet label is trimmed with an ellipsis (owner, 3 Nov 2026) so the coins stay on the
     same line beside it instead of being pushed down. */
  .wsel-btn .wsel-lbl-nm { font-weight: 600; flex: 0 1 auto; min-width: 0; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wsel-btn .wsel-lbl-bal { display: inline-flex; align-items: center; flex-wrap: nowrap; gap: 9px; font-weight: 400; font-size: var(--fs-xs); color: var(--ak-muted); flex: 1 1 auto; min-width: 0; overflow: hidden; }
  .wsel-btn .wsel-lbl-bal .cb { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
  .wsel-btn .wsel-lbl-bal .sol-ico, .wsel-btn .wsel-lbl-bal .coin-ico { width: 12px; height: 12px; flex: none; }
  .wsel-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 300px; max-height: 240px;
    overflow-y: auto; background: var(--ak-input, var(--panel)); border: 1px solid var(--ak-line);
    border-radius: 11px; box-shadow: 0 14px 36px rgba(0, 0, 0, .42); padding: 5px; z-index: 300; }
  .wsel-opt { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: transparent;
    color: var(--ak-text); font: inherit; font-size: var(--fs-s); text-align: left; padding: 8px 10px;
    border-radius: 8px; cursor: pointer; white-space: nowrap; }
  .wsel-opt:hover { background: color-mix(in srgb, var(--accent) 13%, transparent); }
  .wsel-opt.on { background: var(--accent-weak); color: var(--accent); font-weight: 600; }
  .wsel-opt svg { width: 15px; height: 15px; flex: none; opacity: .8; }
  .wsel-opt .wsel-nm { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wsel-opt { flex-wrap: nowrap; }
  /* Wallet icon + name + all four coins on one row (owner, 25 Oct 2026). */
  .wsel-opt .wsel-bal { flex: none; width: auto; display: flex; flex-wrap: nowrap; align-items: center; gap: 3px 8px; color: var(--ak-muted); font-size: var(--fs-xs); }
  .wsel-bal .cb { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
  .wsel-bal .sol-ico, .wsel-bal .coin-ico { width: 13px; height: 13px; flex: none; opacity: 1; }
  /* A task buying from a deleted wallet (owner, 25 Oct 2026): the chip turns red; it falls back to main. */
  /* A small gap between the wallet icon and its name (owner, 25 Oct 2026). */
  .wallet-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 160px; overflow: hidden; }
  .wallet-chip .wc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wallet-chip.missing { color: var(--red); border-color: color-mix(in srgb, var(--red) 55%, transparent); }
  .wallet-chip.missing svg { color: var(--red); }
  .ak-title { font-weight: 700; font-size: var(--fs-s); }
  .ak-title.up { color: var(--ak-text); } .ak-title.up::first-letter { color: var(--accent); }
  .ak-title.down::first-letter { color: var(--red); }
  .ak-add { background: none; border: 1px dashed var(--accent); color: var(--accent); border-radius: 8px; padding: 3px 9px; font: inherit; font-size: var(--fs-s); cursor: pointer; }
  .ak-note { margin: 0; font-size: var(--fs-xs); color: var(--ak-text); line-height: 1.45; }
  .modal.ak .phases { gap: 12px; }
  /* Each phase as a tidy bordered row: pill | fields | bin, labels and boxes on one column
     (owner, 21 Oct 2026). */
  .ak-phase { display: grid; grid-template-columns: 62px minmax(0, 1fr) 24px; gap: 6px 10px; align-items: center;
    border: 1px solid var(--ak-line); border-radius: 8px; padding: 8px 10px;
    background: color-mix(in srgb, var(--accent) 3%, transparent); }
  .ak-phase .ak-pill { grid-column: 1; grid-row: 1; justify-self: start; }
  .ak-phase .ak-del { grid-column: 3; grid-row: 1; justify-self: end; }
  .ak-phase .ak-pairs { grid-column: 2; grid-row: 1; }
  .ak-phase .ak-timeout { grid-column: 2; grid-row: 2; }
  .ak-phase .ak-timeout > span:first-child { width: 92px; flex: none; }
  .ak-phase .ak-pill { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); border-radius: 6px; padding: 3px 7px; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
  .ak-phase .ak-del { color: var(--red); cursor: pointer; font-size: var(--fs-s); }
  .ak-phase .ak-pairs { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; min-width: 0; }
  /* Uniform phase fields (owner, 25 Oct 2026): every key/value is a fixed 92px label + 112px
     input grid, so the columns line up across Take Profit and Stop Loss phases; they wrap
     together when the column is narrow. */
  .ak-kv { display: grid; grid-template-columns: 92px 112px; align-items: center; gap: 8px; flex: 0 0 auto; min-width: 0; }
  .ak-kv > span { white-space: nowrap; color: var(--ak-muted); overflow: hidden; text-overflow: ellipsis; }
  .ak-kv .input { width: 112px; flex: none; }

  .ak-phase .ak-pairs span { font-size: var(--fs-xs); }
  .ak-phase .ak-timeout { grid-column: 3; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-xs); }
  .ak-phase .ak-timeout .input { width: 56px; }
  /* Modern accent (owner, 25 Oct 2026): a green left edge on Take Profit phases, red on Stop Loss. */
  #f-tp .ak-phase, #bs-tp .ak-phase { border-left: 3px solid color-mix(in srgb, var(--green) 65%, transparent); }
  #f-sl .ak-phase, #bs-sl .ak-phase { border-left: 3px solid color-mix(in srgb, var(--red) 60%, transparent); }
  /* Take Profit green, Stop Loss red; a bigger minus by Price Drop (owner, 26 Oct 2026). */
  .ak-phase.tp .ak-pill { background: color-mix(in srgb, var(--green) 20%, transparent); color: var(--green); }
  .ak-phase.sl .ak-pill { background: color-mix(in srgb, var(--red) 20%, transparent); color: var(--red); }
  .ak-phase.sl .ak-del { color: var(--red); }
  .sl-neg { font-size: 1.3em; font-weight: 800; color: var(--red); line-height: 1; }
  .modal.ak .modal-foot { border-color: var(--ak-line); }
  .modal.ak .btn { background: transparent; color: var(--ak-text); border: 1px solid var(--ak-line); }
  .modal.ak .btn.ak-save { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
  @media (max-width: 1100px) { .ak-cols { grid-template-columns: 1fr; } .ak-col { border-right: 0; border-bottom: 1px solid var(--ak-line); } }
  @media (max-width: 560px) { .ak-label { width: 104px; font-size: var(--fs-s); } .ak-fees { grid-template-columns: 1fr; } }
  /* Global Settings panel (wallet) and the Import Wallet window, same dark style. */
  .ak-global { background: var(--ak-bg); color: var(--ak-text); border: 1px solid var(--ak-line); border-radius: 10px; padding: 14px 18px; margin-bottom: 14px; }
  .ak-global-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
  .fee-detail { margin-top: 12px; }
  .fee-detail summary { cursor: pointer; font-size: var(--fs-m); }
  .fee-table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: var(--fs-m); }
  .fee-table th, .fee-table td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--ak-line); }
  .fee-table th { color: var(--ak-muted); font-weight: 500; text-align: center; }
  #fee-box .note { padding: 0; color: var(--ak-muted); }
  .ak-gtitle { font-weight: 700; font-size: var(--fs-s); }
  .ak-global-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; text-align: center; }
  .ak-bal-row { margin-top: 10px; }
  .ak-sell-row { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border, rgba(127,127,127,.2)); align-items: end; }
  .ak-sell-row .input { max-width: 170px; margin: 0 auto; }
  .ak-glabel { font-weight: 700; font-size: var(--fs-xs); margin-bottom: 4px; }
  .ak-gvalue { font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ak-global .btn.ak-save { background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); }
  .modal.ak.ak-narrow { max-width: 620px; }
  /* Bulk "Edit field": the list of optional fields, scrollable so many fit (owner, 26 Oct 2026). */
  .bulk-fields { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; padding-right: 4px; }
  .bulk-fields .ak-row { align-items: center; }
  .ak-cols.ak-one { grid-template-columns: 1fr; }
  .ak-wallet-result { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--ak-line); padding-top: 12px; }
  .ak-wallet-result .mono { word-break: break-all; font-size: var(--fs-s); }
  .modal.ak .btn:disabled { opacity: .45; cursor: not-allowed; }
.race-sub { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }  .race-same { color: var(--green); }  .race-ours a, .race-ours a.mono { color: var(--green) !important; font-weight: 700; }
.pf-sell { white-space: nowrap; } .pf-sell .btn { padding: 4px 10px; margin-right: 4px; font-size: var(--fs-s); }
.task-search { width: 340px; max-width: 100%; } .task-search input { padding: 6px 9px; font-size: var(--fs-s); }  mark.hit { background: color-mix(in srgb, var(--amber) 35%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }
.modal.ak .input textarea.ak-blacklist { min-height: 38px; background: var(--ak-input); color: var(--ak-text); }
/* Number fields: typed by hand, no up/down arrows. */  input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }  input[type=number] { -moz-appearance: textfield; appearance: textfield; }
  .rh-form { display: grid; gap: 10px; max-width: 560px; }
  .rh-form label { display: grid; gap: 4px; font-size: 0.95em; }
  .rh-form label.rh-live { display: flex; align-items: center; gap: 8px; }
  .rh-form textarea, .rh-form input[type=number] { font: inherit; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: inherit; }
  .rh-form textarea { font-family: var(--mono); }
  .rh-form textarea:focus-visible, .rh-form input[type=number]:focus-visible { outline: none; border-color: var(--accent); }
  .rh-kind-copy { color: var(--green); } .rh-kind-error { color: var(--red); }
  .chain-select { font: inherit; padding: 4px 8px; border-radius: 6px; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); background: transparent; color: inherit; }

/* Global Settings and the fee comparison side by side, compact. */
.top-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; align-items: stretch; }
.top-row .ak-global { margin-bottom: 0; padding: 10px 14px; }
.top-row .ak-global-head { margin-bottom: 8px; }
.top-row .ak-sell-row { margin-top: 8px; }
.top-row .fee-detail { margin-top: 6px; }
@media (max-width: 900px) { .top-row { grid-template-columns: 1fr; } }

/* Shorter task rows. */
table.tasks td { padding: 6px 12px; }
table.tasks .task-name { line-height: 1.25; }
table.tasks .task-sub { font-size: var(--fs-xs); line-height: 1.2; white-space: nowrap; }
table.tasks .chip { margin: 1px 3px 0 0; padding: 0 6px; line-height: 1.6; }
.pnl { line-height: 1.2; gap: 0 8px; }
.pnl .c { white-space: nowrap; }
.br-summary { padding: 0 14px 8px; font-size: var(--fs-m); }
.br-yes { color: var(--green); font-weight: 700; }
.br-no { color: var(--muted); font-weight: 600; }
  .ak-hold { margin-top: 10px; }
  .ak-hold .fee-table { margin: 4px 0 8px; }
  .ak-hold select { margin-left: 4px; }
.race-head td { background: var(--panel-2, rgba(127,127,127,.08)); font-weight: 600; padding-top: 10px; border-top: 2px solid var(--border, rgba(127,127,127,.3)); }
.race-target td { color: var(--muted); }
.race-note { font-size: var(--fs-s); margin: -4px 0 8px; }
tr.race-ours td { background: rgba(34,197,94,.07); }
.race-why td { font-size: var(--fs-m); padding-top: 2px; }
.race-why ul { margin: 2px 0 0 16px; padding: 0; }
.race-why-total { margin: 0 0 6px; font-size: var(--fs-m); }
.race-lang { float: right; margin-top: -30px; }
.race-lang button { font-size: var(--fs-m); padding: 3px 10px; margin-left: 4px; border-radius: 6px; border: 1px solid var(--border, rgba(127,127,127,.3)); background: transparent; color: inherit; cursor: pointer; }
.race-lang button.active { background: var(--accent, #3b82f6); color: #fff; border-color: transparent; }

/* ---- Layout: full screen width, one type scale that grows with the screen ----
   Every font size above uses these four steps, so the whole dashboard (and the BSC / ETH /
   Robinhood pages, which share this file) scales together. */
:root {
  --fs-xs: clamp(11.5px, 0.7vw, 13px);
  --fs-s: clamp(12.5px, 0.78vw, 14.5px);
  --fs-m: clamp(13.5px, 0.85vw, 15.5px);
  --fs-l: clamp(16px, 1.05vw, 19px);
}
.wrap { max-width: none; padding: 18px clamp(16px, 2.2vw, 44px) 40px; }
header { margin-bottom: 14px; }
.tabs { gap: 2px; overflow-x: auto; scrollbar-width: none; }
.tabs a { padding: 10px 16px; font-size: var(--fs-m); white-space: nowrap; }
.panel h2 { font-size: var(--fs-m); padding: 12px 16px; }
.tile { padding: 14px 16px; }
.tile .value { font-size: var(--fs-l); }
.grid { grid-template-columns: minmax(0, 1fr) clamp(300px, 22vw, 420px); }
.feed { max-height: calc(100vh - 230px); }
.tx-scroll { max-height: calc(100vh - 300px); min-height: 280px; }
table.txs td, table.txs th { padding: 9px 14px; }
table.tasks td, table.tasks th { padding-top: 10px; padding-bottom: 10px; }
.chip { padding: 2px 8px; }
.switch { width: 44px; height: 24px; }
.switch span::before { width: 18px; height: 18px; }
.btn { padding: 8px 16px; }
.theme-btn { width: 34px; height: 30px; }
.race-lang { float: none; margin: 0 0 0 auto; display: flex; gap: 4px; }
.race-lang button { font-size: var(--fs-xs); margin: 0; }
.race-why td { font-size: var(--fs-s); }
.race-why-total { font-size: var(--fs-m); padding: 10px 16px 0; }
.race-note { font-size: var(--fs-xs); padding: 4px 16px 8px; margin: 0; }
@media (max-width: 700px) {
  .tabs a { padding: 9px 11px; }
  .wrap { padding: 12px 12px 32px; }
}
.switch input:checked + span::before { transform: translateX(20px); }
.mono, .text, dd { font-size: var(--fs-s); }
#hold-body .input { max-width: 320px; }

/* Top bar balances, one chip per coin with its logo, the wallet, Import. */
.bal-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bal-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--chip); white-space: nowrap; }
/* A small "updating balances" spinner in the top bar (owner, 26 Oct 2026). */
.wb-busy { display: inline-block; width: 12px; height: 12px; flex: none; border: 2px solid color-mix(in srgb, var(--accent) 28%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: wb-spin .7s linear infinite; }
.wb-busy[hidden] { display: none; }
@keyframes wb-spin { to { transform: rotate(360deg); } }
.bal-chip svg { width: 18px; height: 18px; flex: none; }
.bal-chip b { font-weight: 650; font-variant-numeric: tabular-nums; }

.bal-addr { border: 1px solid var(--border); background: var(--panel); color: var(--muted); border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.bal-addr:hover { color: var(--text); }
.btn.bal-import { padding: 4px 14px; border-radius: 999px; background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 650; }
/* With the compared fees in their own tab, Global Settings stands alone and stays narrow. */
.top-row { grid-template-columns: minmax(0, 560px); }
#view-fees .ak-global { max-width: 820px; }
@media (max-width: 720px) {
  .bal-bar { width: 100%; }
  .top-row { grid-template-columns: minmax(0, 1fr); }
}
.bal-chip svg { border-radius: 50%; box-shadow: 0 0 0 1px var(--border); }

/* Dropdowns: one look in both themes (the chain picker here and on the EVM pages, the
   holdings unit pickers). The arrow is drawn, so every browser shows the same. */
.chain-select, #hold-body select {
  appearance: none; -webkit-appearance: none;
  background: var(--chip) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238b95a3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center / 10px 6px;
  border: 1px solid var(--border); color: var(--text); font: inherit; cursor: pointer;
}
.chain-select { border-radius: 999px; padding: 5px 30px 5px 12px; font-weight: 600; }
#hold-body select { border-radius: 6px; padding: 3px 24px 3px 8px; background-position: right 7px center; }
.chain-select:hover, #hold-body select:hover { border-color: var(--muted); }
.chain-select:focus-visible, #hold-body select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.chain-select option, #hold-body select option { background: var(--panel); color: var(--text); }

/* Top right: theme, then the round Settings button. */
.theme-btn, .user-btn { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.user-btn { border: 1px solid var(--border); background: var(--chip); color: var(--text); cursor: pointer; }
.user-btn:hover, .theme-btn:hover { border-color: var(--muted); }
.user-btn svg { width: 18px; height: 18px; }
/* Live trading next to Import: a compact switch (red when on, as before). */
.bal-bar .live-toggle { gap: 6px; padding: 2px 4px 2px 8px; border: 1px solid var(--border); border-radius: 999px; }
.bal-bar .live-toggle .switch { width: 34px; height: 20px; }
.bal-bar .live-toggle .switch span::before { width: 14px; height: 14px; }
.bal-bar .live-toggle .switch input:checked + span::before { transform: translateX(14px); }

/* New task and the task search in the top bar, after the chain picker. */
.btn.head-new { padding: 5px 14px; border-radius: 999px; }
.head-search { width: 210px; }
.head-search input { border-radius: 999px; padding: 5px 12px; }
.toolbar:has(#tasks-summary:empty) { display: none; }
@media (max-width: 720px) { .head-search { width: 100%; } }
/* The feed status as a dot only in the top bar (its words are in the tooltip), and a narrower
   search, so the whole bar fits one line on a laptop screen. */
header .conn #conn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.head-search { width: 170px; }
.race-why-list { margin: 4px 0 0; padding-left: 16px; font-size: var(--fs-xs); color: var(--muted); }

/* The user icon's menu (top right): Settings, Users, Sign out. */
.user-menu { position: fixed; top: 48px; right: 12px; z-index: 50; display: flex; flex-direction: column; min-width: 150px;
  background: var(--panel, #fff); border: 1px solid var(--border, #ddd); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.15); overflow: hidden; }
.user-menu[hidden] { display: none; }
.user-menu button { background: none; border: 0; text-align: left; padding: 10px 14px; cursor: pointer; color: inherit; font: inherit; }
.user-menu button:hover { background: color-mix(in srgb, currentColor 8%, transparent); }

/* Tasks page, cleaner (owner, 19 Oct 2026): running tasks as cards, the rest in one folded list. */
.tabs-more { position: relative; display: inline-flex; }
.more-btn { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 14px; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.more-btn.active { color: var(--text); border-bottom-color: var(--accent); }
.more-menu { position: absolute; top: 100%; left: 0; z-index: 20; display: grid; min-width: 170px; padding: 6px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.more-menu[hidden] { display: none; }
.tabs .more-menu a { border-bottom: 0; padding: 8px 10px; border-radius: 6px; }
.tabs .more-menu a:hover, .tabs .more-menu a.active { background: var(--chip); color: var(--text); }
.tasks-view { display: grid; gap: 10px; }
.tasks-h { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 8px 2px 0; font-weight: 600; }
.task-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) auto; gap: 12px 22px; align-items: center; background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 12px; padding: 14px 16px; }
.task-list { padding: 0; overflow: hidden; }
/* The targets chip sits on one column across every card: the name gets a fixed
   minimum width (owner, 21 Oct 2026). */
.task-card .task-name-text { display: inline-block; min-width: 150px; }

/* The three exit rows share one grid: label | % box, 0 = off (owner, 21 Oct 2026). */
.ak-exit3 { display: grid !important; grid-template-columns: minmax(0, 1fr) 108px; gap: 10px; align-items: center; }
.ak-exit3 .input.ak-small { width: 108px; }
/* The Sell exit rows in two columns (owner, 25 Oct 2026): a narrower value box and a clipped label
   so the long names fit a half-column; the full name stays in the ? tooltip. Follow Sell is above,
   full-width. */
.ak-exit-two .ak-exit3 { grid-template-columns: minmax(0, 1fr) 72px; gap: 8px; }
.ak-exit-two .ak-exit3 .input.ak-small { width: 72px; }
.ak-exit-two .ak-exit3 > .ak-label { width: auto; min-width: 0; overflow: hidden; }
.ak-exit-two .ak-exit3 > .ak-label > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* An off task: the same card, its edge red and its text muted (owner, 21 Oct 2026). */
.task-card.off { border-left-color: var(--red); background: var(--panel); }
.task-card.off .task-name { color: var(--muted); }
.run-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 8px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); vertical-align: middle; }
.task-chips { min-width: 0; }
.task-chips .chip { margin: 2px 4px 2px 0; }
.chip-more { background: none; border: 1px dashed var(--border); border-radius: 999px; padding: 0 8px; font: inherit; font-size: var(--fs-xs); color: var(--muted); cursor: pointer; }
.chip-more:hover { color: var(--text); }
.task-end { display: flex; align-items: center; gap: 16px; justify-content: flex-end; flex-wrap: wrap; }
.task-pnl { display: grid; text-align: right; font-variant-numeric: tabular-nums; }
.task-pnl .net { font-weight: 650; font-size: var(--fs-m); }
.task-pnl small { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.task-actions { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.task-actions .switch { margin-right: 6px; }
.del-ask { display: inline-flex; align-items: center; gap: 6px; color: var(--red); font-size: var(--fs-s); margin-left: 6px; }
.del-ask .task-del { margin-left: 0; }
.task-fold { display: flex; justify-content: center; padding: 8px; border-top: 1px solid var(--border); }
.task-fold button { background: none; border: 0; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
/* Tile view: one card per task in a responsive grid (owner, 27 Oct 2026, as the EVM grid). */
.task-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 10px; align-items: start; }
.task-tile { display: flex; flex-direction: column; gap: 11px; background: var(--panel); border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: 12px; padding: 13px 15px; cursor: pointer; }
.task-tile.off { border-top-color: var(--red); }
.task-tile.off .tile-name { color: var(--muted); }
/* Two rows (owner, 27 Oct 2026): top = checkbox + the controls; second = task name (left) and the
   wallet (right). */
.tile-top { display: flex; align-items: center; gap: 8px; }
.tile-top .tile-sp { flex: 1 1 auto; }
.tile-top .task-actions { gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.tile-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tile-head .tile-name { min-width: 0; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-head .tile-sp { flex: 1 1 auto; min-width: 8px; }
.tile-head .chip { margin: 0; }
.tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.tile-cell { display: flex; flex-direction: column; gap: 3px; background: var(--chip); border-radius: 8px; padding: 8px 10px; min-width: 0; }
.tile-cell .tc-k { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.tile-cell .tc-v { font-weight: 600; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-foot { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; font-size: var(--fs-s); border-top: 1px solid var(--border); padding-top: 10px; }
.tile-foot .tile-status { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.tile-foot .tile-stat { color: var(--muted); }
.tile-foot .task-pnl { margin-left: auto; }
.tile-foot .tile-upd { flex-basis: 100%; font-size: var(--fs-xs); color: var(--muted); }
/* A tiered task's per-tier lines on the tile (owner, 3 Nov 2026): the Market Cap stays in a wide
   cell above, then one row per tier with its amount · slippage · tip · gas. */
.tile-cell-wide { grid-column: 1 / -1; }
.tile-tiers { display: flex; flex-direction: column; gap: 5px; }
.tile-tiers .tt-row { display: flex; align-items: baseline; gap: 8px; background: var(--chip); border-radius: 8px; padding: 6px 10px; font-size: var(--fs-s); min-width: 0; }
.tile-tiers .tt-n { font-weight: 650; color: var(--accent); flex: none; }
.tile-tiers .tt-v { font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 860px) {
  .task-card { grid-template-columns: 1fr; }
  .task-end { justify-content: flex-start; }
  .task-pnl { text-align: left; }
}

.mode-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.mode-dot.live { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.mode-dot.dry { background: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 25%, transparent); }
.bin-btn { display: inline-flex; align-items: center; justify-content: center; margin-inline-start: 6px; padding: 4px 6px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--red) 60%, transparent); background: none; color: var(--red); cursor: pointer; }
.bin-btn:hover { background: color-mix(in srgb, var(--red) 12%, transparent); }
.bin-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* Race filters: side buttons and region checkboxes. */
.race-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 8px 14px; }
.race-filters .seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.race-filters .seg button { background: none; border: 0; padding: 5px 12px; font: inherit; color: var(--muted); cursor: pointer; }
.race-filters .seg button + button { border-left: 1px solid var(--border); }
.race-filters .seg button.active { background: var(--chip); color: var(--text); font-weight: 600; }
.race-regions { display: inline-flex; flex-wrap: wrap; gap: 12px; color: var(--muted); }
.race-regions label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }

/* Race: tips and bot exec over the races shown; each copy's steps. */
.race-stats { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 14px 10px; }
.race-stats .rs-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
.race-stats .rs-h { width: 100%; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.race-stats .rs-total { color: var(--text); }
.race-steps { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 3px; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.race-steps b { color: var(--text); font-weight: 600; }

/* Venue logos in the task form's DEX list. */
.dex-grid .dex-logo { width: 18px; height: 18px; flex: none; }
.dex-grid .dex-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 10%, transparent); }
.dex-grid label span { min-width: 0; }

/* Off tasks: a red dot (owner, 19 Oct 2026: a dot, no On/Off text; on = accent). */
.run-dot.off { background: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 25%, transparent); }
.tgt-count { font-size: var(--fs-xs); color: var(--muted); cursor: pointer; list-style: none; }
.tgt-count::-webkit-details-marker { display: none; }
.tgt[open] .tgt-count { margin-bottom: 3px; }
.tgt a { margin-right: 6px; }
.tgt-count.hit { color: var(--text); background: color-mix(in srgb, var(--amber) 30%, transparent); border-radius: 4px; padding: 0 4px; }

/* Wallet tab: each coin with its logo. */
.coin-cell { display: inline-flex; align-items: center; gap: 8px; }
.coin-cell svg { width: 20px; height: 20px; flex: none; }

/* Wallet tab: a coin back to SOL (its % and button on one line). */
.to-sol { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* Wallet tab sliders: the % and its amount beside each. */
.slide { display: inline-flex; align-items: center; gap: 8px; }
.slide input[type=range] { width: 140px; accent-color: var(--accent); }
.slide output { min-width: 120px; font-size: var(--fs-s); font-variant-numeric: tabular-nums; color: var(--muted); }

/* Tabs taken off the bar (owner, 20 Oct 2026): their pages still open by address. */
.tabs a[hidden], .tabs-more[hidden] { display: none; }

/* A very light tint by state (owner, 20 Oct 2026): running accent, off red. */
.task-card { background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.task-row { background: color-mix(in srgb, var(--red) 4%, var(--panel)); }

/* Global switch (owner, 20 Oct 2026): accent when on, yellow when off, and a yellow notice under the bar. */
.bal-bar .live-toggle input:checked + span { background: var(--accent); }
.bal-bar .live-toggle.off .switch span { background: var(--amber); }
.bal-bar .live-toggle.off > span:first-child { color: var(--amber); font-weight: 600; }
.global-off { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 16px 0; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--amber) 55%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--amber) 16%, var(--panel)); color: var(--text); font-size: var(--fs-m); }
.global-off[hidden] { display: none; }
.global-off .go-icon { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--amber); color: #1b1300; font-weight: 800; font-size: var(--fs-xs); flex: none; }

/* A task's key numbers, small and right-aligned (owner, 20 Oct 2026). */
.task-info { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-family: var(--mono, ui-monospace, monospace); font-size: var(--fs-xs); color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.task-info b { font-family: inherit; font-size: var(--fs-m); color: var(--text); font-weight: 600; }
/* Every cell reads the same way: the label words muted, the values in full text colour. */
.task-info span { color: var(--muted); opacity: 1; font-weight: 400; }

/* The Global pill: accent Running, yellow Stopped. */
.global-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 8px; cursor: pointer; font-size: var(--fs-s); font-weight: 600; user-select: none;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.global-pill.off { color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, var(--panel)); border-color: color-mix(in srgb, var(--amber) 50%, transparent); }
.global-pill svg { width: 16px; height: 16px; }
.global-pill:has(input:disabled) { opacity: .6; cursor: progress; }

/* Index viewer. */
.ix-search { display: flex; gap: 8px; padding: 14px; }
.ix-search input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; font-family: var(--mono, ui-monospace, monospace); }
.ix-summary { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 14px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; font-size: var(--fs-s); color: var(--muted); }
.ix-summary b { color: var(--text); }
.ix-summary .ix-me { color: var(--green); }
.ix-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; flex-wrap: wrap; }
.ix-ok { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-s); color: var(--muted); }
.ix-side { font-size: var(--fs-xs); font-weight: 700; padding: 2px 8px; border-radius: 4px; }
.ix-side.buy { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.ix-side.sell { color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); }
.ix-row-me td { background: color-mix(in srgb, var(--green) 16%, transparent); }
.ix-me-tag { font-size: var(--fs-xs); font-weight: 700; color: var(--green); background: color-mix(in srgb, var(--green) 20%, transparent); padding: 1px 7px; border-radius: 999px; }
.ix-failed td { opacity: .55; }
.ix-side.fail { color: var(--muted); background: color-mix(in srgb, var(--muted) 16%, transparent); }
.ix-tag { font-size: var(--fs-xs); font-weight: 700; padding: 1px 7px; border-radius: 999px; color: var(--violet); background: color-mix(in srgb, var(--violet) 16%, transparent); }
.ix-tag.me { color: var(--green); background: color-mix(in srgb, var(--green) 20%, transparent); }

/* Settings opens under the round button, top right (owner, 20 Oct 2026). */
#user-bg { align-items: flex-start; justify-content: flex-end; padding: 64px max(16px, env(safe-area-inset-right, 0px)) 16px 16px; background: rgba(0, 0, 0, .25); }
#user-bg .modal { max-width: 460px; box-shadow: 0 12px 32px rgba(0, 0, 0, .35); }

/* Coins held, under the tabs: green gain, red loss. */
.pf-strip { display: flex; gap: 6px 18px; overflow-x: auto; white-space: nowrap; padding: 8px 2px; margin-bottom: 8px; border-bottom: 1px solid var(--border); font-size: var(--fs-s); scrollbar-width: thin; }
.pf-strip[hidden] { display: none; }
.pf-coin { color: var(--muted); text-decoration: none; font-variant-numeric: tabular-nums; }
.pf-coin b { color: var(--text); margin-inline-end: 4px; }
.pf-coin .up { color: var(--green); font-weight: 600; }
.pf-coin .down { color: var(--red); font-weight: 600; }
.pf-coin:hover b { text-decoration: underline; }

/* Market prices along the bottom. */
.price-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; gap: 6px 20px; align-items: center; overflow-x: auto; white-space: nowrap;
  padding: 6px max(16px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: var(--panel); border-top: 1px solid var(--border); font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
.price-bar[hidden] { display: none; }
.pb-coin { display: inline-flex; align-items: center; gap: 5px; }
.pb-coin i { font-style: normal; font-weight: 700; }
.pb-coin .up { color: var(--green); font-size: var(--fs-xs); }
.pb-coin .down { color: var(--red); font-size: var(--fs-xs); }
body:has(.price-bar:not([hidden])) { padding-bottom: 40px; }

/* Rewards: the three amounts side by side. */
.rw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.rw-grid > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-right: 1px solid var(--border); }
.rw-grid > div:last-child { border-right: 0; }
.rw-grid span { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.rw-grid b { font-family: var(--mono, ui-monospace, monospace); font-size: var(--fs-l, 16px); }
.rw-grid .rw-total { color: var(--green); }

/* The search box ("/" focuses it; no key hint drawn: owner, 20 Oct 2026). */
.head-search { position: relative; }
.head-search input { padding-right: 14px; }

/* Task form (owner, 20 Oct 2026): switches and short numbers two to a row; themed boxes; Add buttons with an icon. */
.ak-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 14px; }
.ak-two .ak-row { min-width: 0; }
.ak-two .ak-label { width: 112px; }
.ak-two .ak-small { width: 100%; max-width: 120px; }
@media (max-width: 640px) { .ak-two { grid-template-columns: 1fr; } }
/* Two-up rows: the label takes the space it needs (wraps if long) and the control sits at the
   right, so a long label never overlaps its toggle or input (owner, 24 Oct 2026). */
.modal.ak .ak-two .ak-row { display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; }
.modal.ak .ak-two .ak-row > .ak-label { width: auto; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak-add { display: inline-flex; align-items: center; gap: 6px; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent); border-radius: 8px; padding: 5px 12px; font-weight: 600; border-style: solid; }
.ak-add:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.ak-add svg { width: 16px; height: 16px; }

/* Race tab: the compared bots' wallets, folded. */
.race-compare { margin: 0 14px 10px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.race-compare summary { cursor: pointer; font-weight: 600; font-size: var(--fs-s); }
.race-compare p { font-size: var(--fs-xs); margin: 8px 0; }
.race-compare textarea { width: 100%; min-height: 84px; resize: vertical; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font: var(--fs-s) var(--mono, ui-monospace, monospace); box-sizing: border-box; }
.race-compare .rc-foot { margin-top: 8px; display: flex; align-items: center; gap: 10px; }

/* The search box: a rounded pill, a magnifier on the left. */
.head-search { border-radius: 999px; padding-left: 12px; }
.head-search .search-icon { width: 16px; height: 16px; flex: none; color: var(--text); position: absolute; left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; display: inline-grid; place-items: center; }
.head-search .search-icon .ico { width: 16px; height: 16px; }
.head-search input { padding-left: 36px; border-radius: 999px; }
/* The search box's clear (×) button, shown only while it has text (owner, 21 Oct 2026). */
.head-search .search-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.head-search .search-clear:hover { color: var(--text); background: color-mix(in srgb, var(--text) 12%, transparent); }
.head-search .search-clear svg { width: 14px; height: 14px; }
.head-search:has(.search-clear:not([hidden])) input { padding-right: 30px; }
[dir="rtl"] .head-search .search-clear { right: auto; left: 6px; }

/* The sound switch: dimmed when off. */
.sound-btn.off { opacity: .55; }
.task-bell.off { opacity: .5; }

/* With the price bar along the bottom, the scrolling lists end above it (owner, 20 Oct 2026: the Race table's last rows were under it). */
body:has(.price-bar:not([hidden])) .tx-scroll { max-height: calc(100vh - 350px); }
body:has(.price-bar:not([hidden])) .feed { max-height: calc(100vh - 280px); }

/* The top bar, tabs and coin strip stay at the top while the page scrolls under them. */
.top-sticky { position: sticky; top: 0; z-index: 8; background: var(--bg); padding-top: env(safe-area-inset-top, 0px); }

/* Owner, 20 Oct 2026: the dots off the bar, a wider search box, the race summary on the right. */
header .mode-dot[hidden], header .conn[hidden] { display: none; }
.task-search.head-search { width: 460px; }
.race-filters .race-why-total { margin-left: auto; padding: 0; text-align: right; }
.race-stats[hidden] { display: none; }

/* Wallet tab, owner 20 Oct 2026: sliders with a filled track and a value pill; accent buttons. */
.slide input[type=range], .amt input[type=range] { -webkit-appearance: none; appearance: none; width: 170px; height: 6px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(to right, var(--accent) var(--p, 0%), color-mix(in srgb, var(--muted) 28%, transparent) var(--p, 0%)); }
.slide input[type=range]::-webkit-slider-thumb, .amt input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.slide input[type=range]::-moz-range-thumb, .amt input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.slide output { min-width: 128px; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); font-size: var(--fs-s); text-align: center; }
#view-holdings td { vertical-align: middle; }
#view-holdings td .to-sol { flex-wrap: wrap; }
#hold-convert, #rw-claim { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; padding: 7px 18px; }
#hold-convert:disabled, #rw-claim:disabled { opacity: .45; }
#hold-body [data-to-sol] { border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); font-weight: 600; }
#hold-body [data-to-sol]:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.pf-sell-dust { border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent) !important; color: var(--accent) !important; background: color-mix(in srgb, var(--accent) 10%, transparent) !important; }
.slide .sol-amt { width: 110px; flex: none; }
.slide .sol-amt input { width: 100%; text-align: right; }
.slide { flex-wrap: wrap; }

/* Shorter task cards (owner, 20 Oct 2026): the key numbers on one line, less padding.
   Fixed grid columns (owner, 21 Oct 2026) so buys / Buy / Tip / PF line up down every row,
   a missing part (e.g. no Priority Fee) simply leaving its column empty. */
.task-info { display: grid; grid-template-columns: 84px 190px 200px 180px; align-items: baseline; gap: 2px 16px; }
.task-info > div:nth-child(1) { text-align: right; }
.task-info > div:nth-child(n+2) { text-align: start; }
@media (max-width: 1100px) { .task-info { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.icon-slot { display: inline-block; width: 28px; }
.task-info b { font-size: var(--fs-s); }
.task-card { padding: 8px 14px; }
.task-row { padding: 6px 14px; }
.task-card .task-name { font-size: var(--fs-m); }

/* Task buttons as one set of icons (owner, 20 Oct 2026): same size, quiet until hovered. */
.task-actions { display: flex; align-items: center; gap: 6px; }
.task-actions .icon-btn, .task-actions .bin-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 8px;
  border: 1px solid var(--border); background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--muted); cursor: pointer; }
.task-actions .icon-btn:hover { color: var(--text); border-color: color-mix(in srgb, var(--text) 30%, transparent); }
.task-actions .bin-btn { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); background: color-mix(in srgb, var(--red) 8%, transparent); }
.task-actions .bin-btn:hover { background: color-mix(in srgb, var(--red) 18%, transparent); }
.task-actions .task-bell.off { color: var(--muted); opacity: .6; }
.task-actions .switch { margin-right: 4px; }

/* Language picker (owner, 20 Oct 2026): a globe and the language code, like the round top-bar
   buttons; its menu lists the ten languages in their own names. */
.lang-pick { position: relative; display: inline-flex; }
.lang-btn { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--chip); color: var(--text); cursor: pointer; font: 600 var(--fs-xs)/1 var(--mono, ui-monospace, monospace); }
.lang-btn:hover { border-color: var(--muted); }
.lang-btn svg { width: 16px; height: 16px; flex: none; }
.lang-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; display: flex; flex-direction: column; min-width: 170px; padding: 4px 0;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.15); }
.lang-menu[hidden] { display: none; }
.lang-menu button { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: none; border: 0; padding: 8px 14px;
  cursor: pointer; color: var(--text); font: inherit; text-align: start; }
.lang-menu button small { color: var(--muted); font-family: var(--mono, ui-monospace, monospace); font-size: var(--fs-xs); }
.lang-menu button:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.lang-menu button.active { color: var(--accent); font-weight: 600; }
/* Other languages' labels are often longer: the task form's labels may take two lines. */
html:not([lang="en"]) .ak-label { white-space: normal; }

/* Right to left (Arabic, Urdu): the same layout, mirrored where a side is fixed. */
[dir="rtl"] .fee-table td { text-align: right; }
[dir="rtl"] .head-search .search-icon { left: auto; right: 12px; }
[dir="rtl"] .head-search input { padding-left: 14px; padding-right: 36px; }
[dir="rtl"] .head-search { padding-left: 0; padding-right: 12px; }
[dir="rtl"] .filters { margin-left: 0; margin-right: auto; }
[dir="rtl"] .user-menu { right: auto; left: 12px; }
[dir="rtl"] .user-menu button { text-align: right; }
[dir="rtl"] .lang-menu { right: auto; left: 0; }
[dir="rtl"] .form-saved, [dir="rtl"] .form-error { margin-right: 0; margin-left: auto; }
[dir="rtl"] .race-filters .race-why-total { margin-left: 0; margin-right: auto; text-align: left; }
[dir="rtl"] .task-pnl, [dir="rtl"] .task-info { text-align: left; }
[dir="rtl"] .task-info { align-items: flex-start; }
[dir="rtl"] .rw-grid > div { border-right: 0; border-left: 1px solid var(--border); }
[dir="rtl"] .rw-grid > div:last-child { border-left: 0; }
[dir="rtl"] .run-dot { margin-right: 0; margin-left: 8px; }
[dir="rtl"] .dex-actions a { margin-left: 0; margin-right: 10px; }
[dir="rtl"] .race-lang button { margin-left: 0; margin-right: 4px; }
[dir="rtl"] .pf-sell .btn { margin-right: 0; margin-left: 4px; }
[dir="rtl"] .tgt a { margin-right: 0; margin-left: 6px; }
/* Addresses, signatures and numbers keep their left-to-right order inside right-to-left text. */
[dir="rtl"] a.mono, [dir="rtl"] span.mono, [dir="rtl"] b.mono, [dir="rtl"] .bal-bar, [dir="rtl"] .price-bar { direction: ltr; unicode-bidi: isolate; }

/* ===================== Polish pass (owner, 20 Oct 2026): clean, aligned, dark ===================== */

/* 1. The top bar, tabs and coin strip: a direct child of <body> (nothing above it scrolls or clips),
   full width with its own gutters, so it is pinned at the top while the page scrolls under it. */
.top-sticky { position: sticky; top: 0; z-index: 9; background: var(--bg);
  padding: calc(10px + env(safe-area-inset-top, 0px)) clamp(16px, 2.2vw, 44px) 0;
  border-bottom: 1px solid var(--border); box-shadow: 0 8px 18px -14px rgba(0, 0, 0, .55); }
.top-sticky header { margin-bottom: 6px; }
.top-sticky .tabs { margin-bottom: 0; border-bottom: 0; }
.top-sticky .pf-strip { margin: 0; padding: 7px 2px; border-bottom: 0; border-top: 1px solid var(--border); }
.top-sticky .global-off { margin: 4px 0 8px; }
.wrap { padding-top: 16px; }
@media (max-width: 700px) {
  .top-sticky { padding-left: 12px; padding-right: 12px; }
  .wrap { padding-top: 12px; }
}
/* On a phone the bar wraps to several lines (a third of the screen): there it scrolls away. */
@media (max-width: 600px) { .top-sticky { position: relative; } }

/* Shared small parts. */
.side-badge { display: inline-block; min-width: 44px; text-align: center; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; padding: 2px 8px; border-radius: 6px; }
.side-badge.buy { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.side-badge.sell { color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); }
.panel-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); }
.panel h2 .filters.pf-actions button, #view-holdings .panel h2 .filters button {
  display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border-radius: 8px; font-weight: 600;
  background: var(--chip); border: 1px solid var(--border); color: var(--text); }
.panel h2 .filters.pf-actions button:hover, #view-holdings .panel h2 .filters button:hover { border-color: var(--muted); }
.panel h2 .filters.pf-actions button:disabled { opacity: .5; cursor: progress; }
#pf-dust { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 50%, transparent); background: color-mix(in srgb, var(--amber) 10%, transparent); }
table.txs td.num, table.txs th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* 3. Index tab. The summary and the slot buttons stay hidden until a search. */
.ix-summary[hidden], .ix-nav[hidden] { display: none; }
.ix-search { padding: 14px 16px; gap: 10px; align-items: center; }
.ix-search input { height: 34px; padding: 0 16px; border-radius: 999px; background: var(--bg); }
.ix-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.ix-search .btn { height: 34px; padding: 0 20px; border-radius: 999px; }
.ix-summary { margin: 0 16px; padding: 0; border: 0; gap: 8px; align-items: center; }
.ix-summary > span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--chip); white-space: nowrap; }
.ix-summary a { color: var(--accent); text-decoration: none; }
.ix-summary > span:has(.ix-me) { border-color: color-mix(in srgb, var(--green) 50%, transparent); background: color-mix(in srgb, var(--green) 10%, transparent); }
.ix-nav { padding: 12px 16px 10px; }
.ix-nav .btn { height: 28px; padding: 0 14px; border-radius: 999px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--chip); }
.ix-nav .btn:hover { border-color: var(--muted); }
.ix-ok { gap: 8px; cursor: pointer; color: var(--text); font-weight: 600; user-select: none; }
.ix-ok .switch { width: 36px; height: 20px; }
.ix-ok .switch span::before { width: 14px; height: 14px; }
.ix-ok .switch input:checked + span::before { transform: translateX(16px); }
table.txs.ix-table td { padding: 8px 14px; }
table.txs.ix-table a { color: var(--accent); }
.ix-side { display: inline-block; min-width: 46px; text-align: center; border-radius: 6px; letter-spacing: .04em; }
table.txs.ix-table tr.ix-row-me td { background: color-mix(in srgb, var(--green) 13%, transparent); }
table.txs.ix-table tr.ix-row-me td:first-child { box-shadow: inset 3px 0 0 var(--green); }
table.txs.ix-table tr.ix-row-me a { color: var(--green); font-weight: 700; }
.ix-tag { margin-left: 4px; }

/* 4. Market prices along the bottom: a logo, the symbol, the price, the 24 h change. */
.price-bar { gap: 0; padding-top: 7px; padding-bottom: calc(7px + env(safe-area-inset-bottom, 0px)); }
.pb-coin { gap: 7px; padding: 0 18px; }
.pb-coin:first-child { padding-inline-start: 0; }
.pb-coin + .pb-coin { border-inline-start: 1px solid var(--border); }
.pb-coin svg { width: 18px; height: 18px; flex: none; border-radius: 50%; }
.pb-sym { color: var(--muted); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .04em; }
.pb-coin b { color: var(--text); font-weight: 650; }
.pb-chg { font-size: var(--fs-xs); font-weight: 650; }

/* 5. Race tab: the compared bots as a list; "+" opens the add form. */
.race-compare { margin: 6px 16px 10px; padding: 0; background: var(--panel); }
.race-compare summary { display: flex; align-items: center; gap: 8px; padding: 9px 12px; list-style: none; user-select: none; }
.race-compare summary::-webkit-details-marker { display: none; }
.race-compare summary::before { content: ""; width: 6px; height: 6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; margin: 0 2px; }
.race-compare[open] summary::before { transform: rotate(45deg); }
.rc-count { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); background: var(--chip); border: 1px solid var(--border); border-radius: 999px; padding: 0 8px; }
.rc-count:empty { display: none; }
.race-compare > p { margin: 0 12px 8px; }
.rc-list { list-style: none; margin: 0 12px; padding: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; max-width: 640px; }
.rc-list li { display: grid; grid-template-columns: minmax(90px, 180px) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 6px 8px 6px 12px; border-top: 1px solid var(--border); }
.rc-list li:first-child { border-top: 0; }
.rc-list li.rc-empty { display: block; padding: 10px 12px; text-align: center; }
.rc-bot { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-wallet { color: var(--accent); text-decoration: none; }
.rc-wallet:hover { text-decoration: underline; }
.rc-del { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--muted); cursor: pointer; font-size: var(--fs-xs); }
.rc-del:hover { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); background: color-mix(in srgb, var(--red) 10%, transparent); }
.rc-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 12px 0; max-width: 640px; }
.rc-form[hidden] { display: none; }
.rc-form .rc-name { flex: 0 1 170px; }
.rc-form .rc-addr { flex: 1 1 280px; }
.rc-form input { padding: 6px 10px; }
.race-compare .rc-foot { margin: 0; padding: 8px 12px 10px; display: flex; align-items: center; gap: 10px; }
.rc-plus { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 8px; cursor: pointer;
  border: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.rc-plus:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.rc-plus svg { width: 16px; height: 16px; transition: transform .15s; }
.rc-plus.open svg { transform: rotate(45deg); }
#rc-add, #rc-save { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; padding: 6px 16px; }

/* 6. Race rows: same columns, easier to read. */
table.txs.race td { padding: 7px 12px; vertical-align: top; }
table.txs.race tr:nth-child(even) td { background: transparent; }
table.txs.race td:first-child { width: 30px; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
table.txs.race tr.race-head td { padding: 10px 12px 6px; text-align: start; color: var(--text); background: color-mix(in srgb, var(--chip) 75%, transparent); border-top: 2px solid var(--border); font-weight: 500; }
table.txs.race tr.race-head.race-fast td { border-top-color: color-mix(in srgb, var(--green) 60%, var(--border)); }
table.txs.race tr.race-head.race-slow td { border-top-color: color-mix(in srgb, var(--amber) 60%, var(--border)); }
table.txs.race tr.race-head.race-miss td { border-top-color: color-mix(in srgb, var(--red) 45%, var(--border)); }
.rh-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; white-space: normal; }
.rh-time { color: var(--muted); }
.race-verdict { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .06em; padding: 2px 10px; border-radius: 999px; text-transform: uppercase; }
.race-verdict.fast { color: #fff; background: var(--green); }
.race-verdict.slow { color: #1b1300; background: var(--amber); }
.race-verdict.miss { color: var(--red); background: color-mix(in srgb, var(--red) 15%, transparent); }
.rh-said { color: var(--text); font-weight: 600; }
.rh-kv a { color: var(--accent); text-decoration: none; }
.rh-line .chip { margin: 0; }
table.txs.race tr.race-why td { padding: 0 12px 8px; background: color-mix(in srgb, var(--chip) 75%, transparent); }
.race-reasons { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: var(--fs-xs); color: var(--muted); white-space: normal; }
.race-reasons li { position: relative; padding-left: 12px; }
.race-reasons li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 4px; height: 4px; border-radius: 50%; background: var(--muted); }
.race-reasons b { color: var(--text); font-weight: 600; }
table.txs.race tr.race-target td { color: var(--muted); }
table.txs.race tr.race-ours td { background: color-mix(in srgb, var(--green) 9%, transparent); }
table.txs.race tr.race-ours td:first-child { box-shadow: inset 3px 0 0 var(--green); color: var(--green); font-weight: 700; }
table.txs.race tr.race-more td { padding-top: 4px; padding-bottom: 8px; font-size: var(--fs-xs); }
table.txs.race .race-sub { font-size: var(--fs-xs); color: var(--muted); font-weight: 400; }
table.txs.race a { text-decoration: none; }
.race-steps { gap: 0; max-width: 360px; white-space: normal; margin-top: 2px; }
.race-steps span { white-space: nowrap; }
.race-steps span + span::before { content: "\00b7"; margin: 0 5px; color: var(--muted); }

/* 7. Transactions: status badges, slot gap badge, block position on one line. */
table.txs.tx-table td { padding: 8px 12px; }
.tx-status { display: inline-block; min-width: 70px; text-align: center; letter-spacing: .04em; border-radius: 999px; padding: 2px 9px; }
.st-sent { color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); }
.st-expired { color: var(--amber); background: color-mix(in srgb, var(--amber) 15%, transparent); }
.gap-badge { display: inline-block; font-size: var(--fs-xs); font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; letter-spacing: .02em; }
.gap-badge.same { color: #fff; background: var(--green); }
.gap-badge.one { color: var(--green); background: color-mix(in srgb, var(--green) 15%, transparent); }
.gap-badge.late { color: var(--amber); background: color-mix(in srgb, var(--amber) 15%, transparent); }
.bpos { font-size: var(--fs-xs); white-space: nowrap; cursor: help; }
.bpos b { color: var(--text); }
.tx-detail { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; color: color-mix(in srgb, var(--red) 80%, var(--muted)); }
.tx-task { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
/* The Tx cell's "open in Solscan" button: a round chip with the Solscan mark (owner, 27 Oct 2026). */
.tx-solscan { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--green) 10%, var(--panel, #11201d)); border: 1px solid var(--border); transition: background .15s, transform .1s; }
.tx-solscan:hover { background: color-mix(in srgb, var(--green) 20%, transparent); transform: scale(1.08); }
.tx-solscan img { width: 16px; height: 16px; border-radius: 50%; display: block; }
/* Accent colour themes (owner, 27 Oct 2026): pick a brand colour; the default teal is unset. These
   come after the light/dark :root rules so they override --accent in either theme; --accent-weak is
   color-mix(var(--accent)…) so it follows automatically. */
/* The BoltBot mark is a crisp inline SVG (header) whose tile is var(--accent) and bolt
   var(--on-accent), so it matches whichever accent theme is picked exactly — no hue-rotate of a
   raster logo (owner, 30 Oct 2026). */
:root[data-accent="blue"]   { --accent: #3b82f6; --on-accent: #ffffff; }
:root[data-accent="purple"] { --accent: #8b5cf6; --on-accent: #ffffff; }
:root[data-accent="green"]  { --accent: #22c55e; --on-accent: #05210f; }
:root[data-accent="pink"]   { --accent: #ec4899; --on-accent: #ffffff; }
:root[data-accent="orange"] { --accent: #f59e0b; --on-accent: #241a05; }
.bb-logo rect, .bb-logo path { transition: fill .25s ease; }
.accent-pick { position: relative; display: inline-flex; }
.accent-btn .accent-dot { width: 15px; height: 15px; border-radius: 50%; display: block; background: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.accent-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 6px; box-shadow: 0 12px 30px rgba(0,0,0,.4); min-width: 148px; }
.accent-menu[hidden] { display: none; }
.accent-opt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px; border: 0; background: none; color: var(--text); border-radius: 7px; cursor: pointer; font: inherit; text-align: left; }
.accent-opt:hover { background: var(--chip); }
.accent-opt.on { background: var(--accent-weak); color: var(--accent); font-weight: 600; }
.accent-opt .accent-dot { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; }

/* 8. Portfolio. */
table.txs.pf-table td { padding: 9px 14px; }
table.txs.pf-table th:nth-child(n+2):nth-child(-n+8) { text-align: right; }
table.txs .pf-coin-cell a { color: var(--text); text-decoration: none; }
#pf-note { padding-top: 10px; }
/* Portfolio cards (owner, 27 Oct 2026): a card per open position with an embedded Dexscreener chart. */
.pf-view-tabs { margin-inline-end: auto; }
.pf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-top: 4px; }
.pf-card { border: 1px solid var(--ak-line); border-radius: 12px; padding: 12px; background: var(--panel, rgba(255,255,255,.02)); display: flex; flex-direction: column; gap: 10px; }
.pf-card-head { display: flex; align-items: center; gap: 8px; }
.pf-card-mcap { font-variant-numeric: tabular-nums; font-size: var(--fs-s); color: var(--muted); }
.pf-card-mcap b { color: var(--text); }
.pf-card-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--fs-s); }
.pf-card-row .muted { color: var(--muted); }
.pf-card-chart { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: rgba(0,0,0,.25); }
.pf-card-chart iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pf-card-chart .pf-chart-msg { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-size: var(--fs-xs); text-align: center; padding: 0 12px; }
.pf-card-sell { display: flex; gap: 8px; }
.pf-card-sell .btn { flex: 1; }
.pf-view-btn { opacity: .7; }
.pf-view-btn:hover { opacity: 1; color: var(--accent); }
/* Position chart & trade modal: quick (small) and full (large) sizes. */
#cm.cm-quick { width: min(440px, 94vw); }
#cm.cm-full { width: min(1040px, 96vw); max-width: 96vw; }
.cm-sub { margin-inline-start: 10px; font-size: var(--fs-s); color: var(--muted); font-variant-numeric: tabular-nums; display: inline-flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cm-sub .up { color: var(--green); }
.cm-sub .down { color: var(--red); }
.cm-sub b { color: var(--text); }
.cm-body { padding: 14px; }
.cm-full .cm-body { display: grid; grid-template-columns: 1fr 300px; gap: 14px; align-items: start; }
@media (max-width: 760px) { .cm-full .cm-body { grid-template-columns: 1fr; } #cm.cm-full { width: 96vw; } }
.cm-chart { position: relative; width: 100%; border-radius: 10px; overflow: hidden; background: rgba(0,0,0,.25); }
.cm-quick .cm-chart { aspect-ratio: 16 / 10; }
.cm-full .cm-chart { min-height: 460px; }
.cm-chart iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cm-chart .pf-chart-msg { position: static; display: flex; align-items: center; justify-content: center; min-height: 200px; height: 100%; color: var(--muted); font-size: var(--fs-s); }
.cm-trade { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.cm-full .cm-trade { margin-top: 0; }
.cm-trade h4 { margin: 0; font-size: var(--fs-s); color: var(--muted); font-weight: 600; }
.cm-pcts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cm-pcts .btn { padding: 8px 0; }
.cm-amt { display: flex; gap: 8px; align-items: center; }
.cm-amt input { flex: 1; min-width: 0; }
.cm-sell-btn { width: 100%; padding: 11px; font-weight: 700; }
.pf-coin-cell a:hover b, .pf-coin-cell a:hover .mono { text-decoration: underline; }
.pf-coin-cell .mono { color: var(--accent); }
.pf-coin-cell b + .mono { color: var(--muted); margin-left: 4px; }
.pnl-pill { direction: ltr; unicode-bidi: isolate; display: inline-block; font-weight: 700; padding: 2px 9px; border-radius: 999px; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.pnl-pill.up { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.pnl-pill.down { color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); }
.btn-group { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; vertical-align: middle; }
.pf-sell .btn-group .btn { margin: 0; border: 0; border-radius: 0; padding: 5px 13px; font-size: var(--fs-xs); font-weight: 650; background: var(--panel); color: var(--text); }
.pf-sell .btn-group .btn + .btn { border-left: 1px solid var(--border); }
.pf-sell .btn-group .btn:last-child { color: var(--red); }
.pf-sell .btn-group .btn:hover:not(:disabled) { background: color-mix(in srgb, var(--red) 12%, var(--panel)); color: var(--red); }

/* 9. Wallet tab: the holdings columns line up; nothing wraps. */
table.txs.hold-table { table-layout: auto; min-width: 0; width: auto; }
.hold-table col.hc-coin { width: auto; }
.hold-table col.hc-hold { width: auto; }
.hold-table col.hc-in { width: 300px; }
.hold-table col.hc-out { width: 300px; }
.hold-table td { white-space: nowrap; }
.hold-table td:nth-child(2) { font-weight: 650; font-variant-numeric: tabular-nums; }
.coin-cell b { font-weight: 650; }
/* Convert panel (wallet hub): compact, left-aligned controls — a fixed-width amount box next to
   its own Convert button, nothing stretched across the column (owner, 26 Oct 2026). No sliders. */
.whub-conv-inner .hold-table col.hc-in, .whub-conv-inner .hold-table col.hc-out { width: auto; }
.whub-conv-inner .hold-table th, .whub-conv-inner .hold-table td { text-align: left; }
.whub-conv-inner .amt { width: auto; max-width: none; }
.whub-conv-inner .amt-top { justify-content: flex-start; }
.whub-conv-inner .amt-box { flex: 0 0 150px; width: 150px; }
.whub-conv-inner .ctl-est { text-align: left; }
#view-holdings #hold-body .slide, #view-holdings #hold-body .to-sol { flex-wrap: nowrap; gap: 10px; }
#view-holdings #hold-body .slide input[type=range] { width: 130px; flex: none; }
#view-holdings #hold-body .slide output { width: 140px; min-width: 0; flex: none; padding: 3px 8px; font-size: var(--fs-xs); font-weight: 600; }
#view-holdings #hold-body .sol-amt { width: 112px; max-width: 112px; }
#view-holdings #hold-body .sol-amt input { padding: 5px 8px; }
#view-holdings #hold-body [data-to-sol] { flex: none; height: 28px; padding: 2px 10px; font-size: var(--fs-xs); line-height: 1; white-space: nowrap; border-radius: 6px; }
/* Amount control (owner, 20 Oct 2026; amountCtl() in ui.html and
   me.html): the amount box (unit at its right, an optional button beside it) over a slider with
   0-100% ticks, at most 300px wide. Holdings, the task form's Buy amount and each tier's. */
#view-holdings #hold-body td { padding: 6px 10px; vertical-align: top; }
.amt { display: flex; flex-direction: column; gap: 0; min-width: 0; width: 100%; max-width: 300px; }
.amt-top { display: flex; align-items: center; gap: 6px; }
.amt .amt-box, .modal.ak .amt .amt-box { flex: 1; min-width: 0; width: auto; max-width: none; height: 28px; min-height: 0; border-radius: 6px; }
.amt .amt-box input[type=number], .modal.ak .amt .amt-box input[type=number] { width: 100%; min-width: 0; height: 26px; border: 0; background: none; text-align: start; padding: 0 8px; font-size: var(--fs-xs); }
.amt .amt-box .unit, .modal.ak .amt .amt-box .unit { font-size: var(--fs-xs); color: var(--muted); padding-inline-end: 8px; }
.amt input[type=range] { width: 100%; height: 4px; margin: 4px 0 0; }
.amt input[type=range]::-webkit-slider-thumb { width: 12px; height: 12px; border-width: 2px; }
.amt input[type=range]::-moz-range-thumb { width: 8px; height: 8px; border-width: 2px; }
.amt .ticks { position: relative; height: 15px; margin: 2px 6px 0; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.amt .ticks span { position: absolute; top: 0; transform: translateX(-50%); padding-top: 4px; line-height: 1; }
.amt .ticks span::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 3px; background: var(--muted); opacity: .7; }
.amt .ticks span:nth-child(1) { left: 0; }
.amt .ticks span:nth-child(2) { left: 25%; }
.amt .ticks span:nth-child(3) { left: 50%; }
.amt .ticks span:nth-child(4) { left: 75%; }
.amt .ticks span:nth-child(5) { left: 100%; }
#view-holdings td { vertical-align: top; }
.rw-grid { gap: 12px; padding: 14px 16px; border: 0; }
.rw-grid > div, .rw-grid > div:last-child, [dir="rtl"] .rw-grid > div, [dir="rtl"] .rw-grid > div:last-child { border: 1px solid var(--border); border-radius: 10px; background: var(--bg); padding: 12px 14px; }
.rw-grid > div:has(.rw-total) { border-color: color-mix(in srgb, var(--green) 45%, transparent); background: color-mix(in srgb, var(--green) 7%, var(--bg)); }
/* Rewards on one compact row (owner, 20 Oct 2026): the three figures as small tiles (~70px, the
   compact Holdings look) with Claim beside them; the heading keeps its accent. */
.rw-grid.rw-row { grid-template-columns: repeat(3, minmax(150px, 230px)) auto; align-items: stretch; padding: 12px 16px; }
.rw-grid.rw-row > div { height: 70px; box-sizing: border-box; padding: 10px 14px; justify-content: center; gap: 3px; }
.rw-grid.rw-row > .rw-act, [dir="rtl"] .rw-grid.rw-row > .rw-act { flex-direction: row; align-items: center; gap: 10px; border: 0; background: none; padding: 0 2px; min-width: 0; justify-content: flex-start; }
.rw-grid.rw-row > .rw-act .muted { font-size: var(--fs-xs); }
@media (max-width: 760px) { .rw-grid.rw-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .rw-grid.rw-row > .rw-act { height: auto; } }
.cw-body { display: flex; flex-direction: column; gap: 12px; padding: 4px 16px 16px; }
.cw-addr { max-width: 620px; }
.cw-addr input { width: 100%; }
.cw-steps { display: flex; flex-wrap: wrap; gap: 10px; }
.cw-step { font-weight: 600; border-color: color-mix(in srgb, var(--amber) 50%, transparent); background: color-mix(in srgb, var(--amber) 9%, transparent); }
.cw-step:hover { background: color-mix(in srgb, var(--amber) 18%, transparent); }
.cw-status { font-size: var(--fs-s); line-height: 1.6; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 8px; max-width: 900px; word-break: break-all; }
.cw-status:empty { display: none; }

/* 10. Task form: section titles, cards, one label width, one input height. */
.modal.ak .ak-col { gap: 10px; padding: 12px 14px; }
.ak-sec { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ak-muted); padding: 0 2px; text-align: center; }
/* Task form head (owner, 25 Oct 2026): the three column titles live in the head row, aligned
   over their columns (same track widths as .ak-cols); the close button floats at the top-right. */
.modal.ak .modal-head.ak-head { display: grid; grid-template-columns: 1.05fr 1fr 1fr; align-items: center; position: relative; padding: 11px 14px; }
.modal.ak .modal-head.ak-head .ak-sec { padding: 0; }
.modal.ak .modal-head.ak-head .modal-close { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
@media (max-width: 1100px) {
  .modal.ak .modal-head.ak-head { grid-template-columns: 1fr; }
  .modal.ak .modal-head.ak-head .ak-sec { display: none; }
  .modal.ak .modal-head.ak-head #form-title { display: block; }
}
.modal.ak .ak-card { gap: 10px; padding: 12px; }
/* Taller background on the collapsible expanders (DEX, Advanced) so the header reads clearly
   (owner, 25 Oct 2026). */
.modal.ak .ak-card.ak-exp { padding: 16px 13px; }
.modal.ak .ak-exp > summary.ak-card-head { padding-top: 2px; padding-bottom: 2px; }
.modal.ak .ak-exp:not([open]) > summary.ak-card-head { padding-top: 2px; padding-bottom: 2px; }
.modal.ak .ak-label, .modal.ak .ak-two .ak-label { width: 118px; }
.modal.ak .input { min-height: 30px; }
.modal.ak .input input:not([type=checkbox]) { height: 28px; }
.modal.ak .ak-small { width: 112px; max-width: 112px; }
.modal.ak .ak-two .ak-label { width: 118px; flex: 0 0 118px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal.ak .ak-two .ak-small { width: 80px; flex: 0 0 80px; min-width: 0; max-width: 80px; }
/* Two columns for both Advanced and Sell & Exit (owner, 25 Oct 2026). minmax(0,1fr) columns, a
   fixed-width clipped label and a small input that sits right after the label (never pushed to the
   cell edge), plus a wide column gap, keep a cell's input + unit from running under the next
   column's label (the overlap bug). */
.modal.ak .ak-two { gap: 12px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
/* Rows may wrap a trailing control to a second line (indented under the label) rather than let it
   run under the next column — no overlap even when a cell is tight (owner, 26 Oct 2026). */
.modal.ak .ak-two .ak-row { display: flex; align-items: center; justify-content: flex-start; gap: 6px 8px; min-height: 30px; flex-wrap: wrap; }
/* A wrapped control lines up under the controls, not the label. */
.modal.ak .ak-two .ak-row > .ak-label { margin-bottom: 0; }
/* Sell & Exit rows use auto-width labels (they vary a lot), so push the input to the cell's right
   edge — otherwise it sits right after each label at a different x and the column looks ragged
   (owner, 26 Oct 2026). Advanced keeps flex-start because its labels are a fixed width. */
.modal.ak .ak-exit-two .ak-row { justify-content: space-between; flex-wrap: nowrap; }
/* Separate the two-column grid from the full-width textareas above it. */
.ak-exp[open] > .ak-row + .ak-two { margin-top: 10px; }
/* Controls sit right after the fixed-width label (never pushed to the cell's right edge), so a
   cell's input never reaches the next column's label (owner, 25 Oct 2026). */
.modal.ak .ak-card-head { padding-bottom: 8px; }
.ak-dex-card .dex-actions { float: none; display: inline-flex; gap: 14px; }
.ak-dex-card .dex-actions a { margin: 0; }
.modal.ak .ak-dex-card .dex-grid { gap: 2px 12px; }
.modal.ak .ak-fees { gap: 8px; }
.modal.ak .ak-mode { margin: 4px 0 0; }
.modal.ak .ak-cap { border: 0; padding: 2px 0 0; color: var(--ak-muted); }
/* Icon on the fee labels, akbot-style (owner, 25 Oct 2026): small glyph beside the centered text. */
.ak-cap { display: flex; align-items: center; justify-content: center; gap: 4px; }
.ak-cap svg { width: 13px; height: 13px; opacity: .75; flex: none; }

/* 11. Task cards: the switch, the icon buttons and the P/L on one centre line. */
.task-end { align-items: center; }
.task-actions .switch, .task-actions .bin-btn { margin: 0; }
.task-actions .switch { align-self: center; }
.task-pnl { align-self: center; line-height: 1.2; }

/* Right to left for the parts above. */
[dir="rtl"] table.txs.ix-table tr.ix-row-me td:first-child, [dir="rtl"] table.txs.race tr.race-ours td:first-child { box-shadow: inset -3px 0 0 var(--green); }
[dir="rtl"] .pf-sell .btn-group .btn { margin: 0; }
[dir="rtl"] .pf-sell .btn-group .btn + .btn { border-left: 0; border-right: 1px solid var(--border); }
[dir="rtl"] table.txs.pf-table th:nth-child(n+2):nth-child(-n+8), [dir="rtl"] table.txs td.num { text-align: left; }
[dir="rtl"] .rc-list li { padding: 6px 12px 6px 8px; }
[dir="rtl"] .race-reasons li { padding-left: 0; padding-right: 12px; }
[dir="rtl"] .race-reasons li::before { left: auto; right: 2px; }
[dir="rtl"] .ix-tag { margin-left: 0; margin-right: 4px; }
/* Small icon buttons stay tappable on a touch screen (>= 24px hit area). */
@media (pointer: coarse) {
  .icon-btn, .wb-copy, .pf-copy, .rc-del, .phase-del, .ak-del, .tier-btn, .chip-more, .pf-strip-sell, .modal-close { min-width: 24px; min-height: 24px; }
}
[dir="rtl"] .pf-coin-cell b + .mono { margin-left: 0; margin-right: 4px; }
.coin-cell { vertical-align: middle; }

/* Coin strip: each coin with a small red Sell (asks once on the button), and an unknown P/L in amber. */
.pf-coin { display: inline-flex; align-items: center; gap: 8px; }
.pf-coin a { color: inherit; text-decoration: none; }
.pf-coin a:hover b { text-decoration: underline; }
.pf-strip-sell { font: inherit; font-size: var(--fs-xs); font-weight: 650; line-height: 1.4; padding: 1px 8px; border-radius: 6px; cursor: pointer;
  color: var(--red); border: 1px solid color-mix(in srgb, var(--red) 45%, transparent); background: color-mix(in srgb, var(--red) 10%, transparent); }
.pf-strip-sell:hover { background: color-mix(in srgb, var(--red) 20%, transparent); }
.pf-strip-sell.ask { color: #fff; background: var(--red); border-color: var(--red); }
.pf-strip-sell.done { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); background: color-mix(in srgb, var(--green) 10%, transparent); }
.pf-strip-sell.err { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 50%, transparent); background: color-mix(in srgb, var(--amber) 10%, transparent); }
.pf-strip-sell:disabled { cursor: progress; }
.pf-val-unknown { color: var(--amber); }
.pnl-unknown { display: inline-block; font-size: var(--fs-xs); font-weight: 700; padding: 0 7px; border-radius: 999px; cursor: help; white-space: nowrap;
  color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); }

/* A task's settings, read only (click a task card or row). */
.task-card[data-task-id], .task-row[data-task-id] { cursor: pointer; }
.task-card[data-task-id]:hover, .task-row[data-task-id]:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.modal.td-modal { max-width: min(1100px, 96vw); }
/* The detail header puts the task name, on/off and targets on one row (owner, 24 Oct 2026). */
.td-headline { flex: 1; min-width: 0; margin: 0 16px; display: flex; align-items: center; }
/* The detail modal opens at the top of the screen (owner, 24 Oct 2026). */
#td-bg { align-items: flex-start; padding-top: 32px; }
.td-body { overflow-y: auto; min-height: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.td-head { display: flex; flex-wrap: wrap; gap: 8px; }
.td-state { display: inline-flex; align-items: center; gap: 2px; padding: 3px 12px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .03em; border: 1px solid var(--border); }
.td-state.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.td-state.off { color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.td-state.live { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.td-state.paper { color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); }
/* Masonry columns: short and tall cards pack without empty space (owner, 20 Oct 2026). */
.td-cols { columns: 2; column-gap: 12px; }
.td-cols > .td-card { break-inside: avoid; margin-bottom: 12px; }
@media (max-width: 760px) { .td-cols { columns: 1; } }
.td-card { border: 1px solid var(--border); border-radius: 10px; background: var(--bg); padding: 12px 14px; min-width: 0; }
.td-card h4 { margin: 0 0 10px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.td-grid { display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr); gap: 6px 16px; align-items: baseline; font-size: var(--fs-s); }
.td-k { color: var(--muted); }
.td-v { min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.td-v a, .td-targets a { color: var(--accent); text-decoration: none; }
.td-yes { color: var(--green); font-weight: 600; }
.td-up { color: var(--green); font-weight: 700; } .td-down { color: var(--red); font-weight: 700; }
/* Wallet icon + targets on one row, not stacked (owner, 25 Oct 2026). */
.td-targets { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.td-targets svg { flex: none; }
/* ...but many targets (the expander) list one per line, not all on one row (owner, 25 Oct 2026). */
.td-targets-exp .td-targets { flex-direction: column; align-items: flex-start; gap: 4px; }
/* Hand cursor on the status toggle and on a clickable task row/card (owner, 25 Oct 2026). */
.td-state, .td-onoff, .task-card { cursor: pointer; }
.td-targets a { overflow-wrap: anywhere; }
.td-sub { margin: 12px 0 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--text); }
.td-dexes { display: flex; flex-wrap: wrap; gap: 6px; }
.td-dex { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--chip); font-size: var(--fs-xs); }
.td-dex svg, .td-table svg { width: 16px; height: 16px; flex: none; vertical-align: middle; }
.td-phases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-s); }
.td-phases .ak-pill { display: inline-block; font-size: var(--fs-xs); padding: 1px 7px; border-radius: 6px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.td-none { font-size: var(--fs-s); }
.td-table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.td-table th { text-align: center; color: var(--muted); font-weight: 600; padding: 4px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.td-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.td-table tr:last-child td { border-bottom: 0; }

/* A panel heading right above its own form (me.html, rh.html): no divider, the form follows. */
.panel h2.bare { padding: 12px 14px 0; margin: 0; border-bottom: 0; }

/* Coin strip title. */
.pf-strip { align-items: center; }
.pf-strip-h { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); flex: none; }

/* Global off: a slim amber bar with a pause icon, a title, a muted line and Start trading. */
.global-off { max-width: 980px; margin-left: auto; margin-right: auto; justify-content: flex-start; gap: 12px; padding: 7px 8px 7px 12px;
  border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); border-left: 4px solid var(--amber); border-radius: 10px;
  background: color-mix(in srgb, var(--amber) 9%, var(--panel)); font-size: var(--fs-s); }
.top-sticky .global-off { margin: 2px auto 8px; }
.global-off .go-icon { width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--amber) 22%, transparent); color: var(--amber); }
.global-off .go-icon svg { width: 14px; height: 14px; }
.go-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; flex: 1; }
.go-text b { color: var(--text); font-weight: 700; }
.go-text span { color: var(--muted); }
.go-start { flex: none; font: inherit; font-size: var(--fs-xs); font-weight: 700; padding: 5px 12px; border-radius: 8px; cursor: pointer;
  color: var(--on-accent); background: var(--accent); border: 1px solid var(--accent); }
.go-start:hover { filter: brightness(1.08); }
[dir="rtl"] .global-off { border-left-width: 1px; border-right: 4px solid var(--amber); padding: 7px 12px 7px 8px; }

/* In-page confirm (no browser dialogs) and notices. */
/* The hidden attribute must always win, even over a class that sets display (owner, 25 Oct 2026:
   the hidden Change-wallet CU button and the Add-a-wallet box were still showing). */
[hidden] { display: none !important; }
/* Hand cursor on everything clickable: expander headers, the wallet selector, segmented buttons
   and switches (owner, 25 Oct 2026). */
.ak-exp > summary, .ak-card.ak-exp > summary, .bm-wallet, .wsel-btn, .seg button, .switch, .switch span, .global-pill, .chain-pill { cursor: pointer; }
/* Native select popups follow the dark task form / wallet panels, not the page theme, so their
   option list is dark too (owner, 25 Oct 2026). */
.modal.ak select, .unit-select, .ak-select, .tx-panel select, .hold-table select { color-scheme: dark; cursor: pointer; }
.modal.ak select option, .unit-select option, .ak-select option, .tx-panel select option { background: var(--ak-input); color: var(--ak-text); }
/* Small alpha/beta tag on the chain pills (owner, 25 Oct 2026): Solana alpha, the rest beta. */
.head-chain .chain-tag { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-left: 4px; padding: 1px 4px; border-radius: 4px; vertical-align: super; line-height: 1; }
.head-chain .chain-tag.alpha { background: color-mix(in srgb, var(--accent) 24%, transparent); color: var(--accent); }
.head-chain .chain-tag.beta { background: color-mix(in srgb, var(--amber) 24%, transparent); color: var(--amber); }
.ask-pop { position: fixed; z-index: 80; width: min(360px, calc(100vw - 16px)); padding: 12px; border-radius: 10px; background: var(--panel); color: var(--text);
  border: 1px solid var(--border); box-shadow: 0 12px 32px rgba(0, 0, 0, .35); display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-s); }
.ask-pop.danger { border-color: color-mix(in srgb, var(--red) 45%, var(--border)); }
.ask-text { white-space: pre-line; line-height: 1.45; overflow-wrap: anywhere; }
.ask-input { font: inherit; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); outline: none; }
.ask-input:focus { border-color: var(--accent); }
.ask-btns { display: flex; justify-content: flex-end; gap: 8px; }
.ask-btns .btn { padding: 5px 14px; font-size: var(--fs-s); }
.ask-btns .ask-ok { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.ask-pop.danger .ask-ok { background: var(--red); border-color: var(--red); }
/* Centered confirmation modal (owner, 26 Oct 2026): a dim backdrop and a larger box in the middle
   of the screen, instead of a small popover by the button. */
.ask-backdrop { position: fixed; inset: 0; z-index: 79; background: rgba(0, 0, 0, .5); backdrop-filter: blur(2px); }
.ask-pop.ask-modal { top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - 32px)); padding: 24px 24px 18px; border-radius: 14px; gap: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .55); }
.ask-pop.ask-modal .ask-text { font-size: var(--fs-m); line-height: 1.5; }
.ask-pop.ask-modal .ask-input { padding: 9px 12px; font-size: var(--fs-m); }
.ask-pop.ask-modal .ask-btns { gap: 10px; margin-top: 4px; }
.ask-pop.ask-modal .ask-btns .btn { padding: 9px 20px; }
/* One-time new-wallet private-key reveal (owner, 25 Oct 2026): masked field + eye toggle + copy. */
.key-pop { width: min(460px, calc(100vw - 16px)); }
.key-pop .key-addr { font-size: var(--fs-xs); color: var(--muted); word-break: break-all; }
.key-pop .key-row { display: flex; align-items: center; gap: 6px; }
.key-pop .key-field { flex: 1; min-width: 0; font: inherit; font-size: var(--fs-s); padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); outline: none; }
.key-pop .key-field:focus { border-color: var(--accent); }
.key-pop .key-row .icon-btn { flex: none; }
.notices { position: fixed; right: 16px; bottom: 52px; z-index: 85; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.notice { padding: 10px 14px; border-radius: 10px; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--red);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3); font-size: var(--fs-s); cursor: pointer; overflow-wrap: anywhere; white-space: pre-line; }
.notice.warn { border-left-color: var(--amber); }
.notice.ok { border-left-color: var(--green); }
[dir="rtl"] .notices { right: auto; left: 16px; }
[dir="rtl"] .notice { border-left-width: 1px; border-right: 4px solid var(--red); }
[dir="rtl"] .notice.warn { border-right-color: var(--amber); }
[dir="rtl"] .notice.ok { border-right-color: var(--green); }

/* Task targets: a wallet badge beside the name; a click shows the addresses below it. */
.task-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.task-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-name .tgt { position: relative; display: inline-block; font-weight: 400; }
.task-name .tgt-count { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 6px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--chip); color: var(--muted); font-size: var(--fs-xs); line-height: 1.6; cursor: pointer; user-select: none; }
.task-name .tgt-count:hover, .task-name .tgt[open] .tgt-count { color: var(--text); border-color: var(--muted); }
.task-name .tgt-count svg { width: 14px; height: 14px; flex: none; }
.task-name .tgt-count b { color: var(--text); font-weight: 650; }
.task-name .tgt-count.hit { background: color-mix(in srgb, var(--amber) 22%, var(--chip)); color: var(--text); padding: 1px 8px 1px 6px; }
.task-name .tgt[open] .tgt-count { margin-bottom: 0; }
.tgt-list { position: absolute; top: calc(100% + 6px); left: 0; z-index: 6; display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; min-width: 220px;
  max-width: calc(100vw - 32px); background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.tgt-list a { margin: 0; color: var(--accent); text-decoration: none; white-space: nowrap; }
/* On a phone the full addresses wrap instead of running past the edge. */
@media (max-width: 600px) { .tgt-list a { white-space: normal; overflow-wrap: anywhere; } }
[dir="rtl"] .tgt-list { left: auto; right: 0; }

/* Top right (owner, 20 Oct 2026): the wallet in one rounded box; Import small; every control 34 px high. */
.bal-bar { gap: 8px; flex-wrap: nowrap; align-items: center; }
.wallet-box { position: relative; display: inline-flex; align-items: center; gap: 2px; height: 34px; padding: 0 6px 0 4px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--panel); min-width: 0; }
.wb-addr { display: inline-flex; align-items: center; gap: 0; }
.wallet-box .bal-addr { border: 0; background: none; padding-block: 4px; padding-inline: 8px 4px; border-radius: 8px; font-size: var(--fs-xs); color: var(--muted); }
.wallet-box .bal-addr:hover { color: var(--text); }
.wb-copy { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.wb-copy:hover { color: var(--text); background: var(--chip); }
.wb-copy svg { width: 14px; height: 14px; }
.wb-div { width: 1px; height: 20px; background: var(--border); margin: 0 6px; flex: none; }
.wallet-box .bal-chip { border: 0; background: none; padding: 2px 6px; gap: 5px; border-radius: 8px; box-shadow: none; }
.wallet-box .bal-chip[hidden] { display: none; }
.wallet-box .bal-chip svg { width: 16px; height: 16px; box-shadow: none; }
.wallet-box .bal-chip b { font-size: var(--fs-s); }
.wallet-box .wb-main svg { width: 20px; height: 20px; }
.wallet-box .wb-main b { font-size: var(--fs-m); font-weight: 750; }
.wb-usd { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; margin-inline-start: 2px; }
.wb-usd[hidden] { display: none; }
.wb-coins { display: inline-flex; align-items: center; min-width: 0; }
.wb-coins .bal-chip { position: relative; }
.wb-coins .bal-chip::before { content: ""; width: 1px; height: 16px; background: var(--border); margin-inline-end: 6px; }
.wb-coins .bal-chip b { color: color-mix(in srgb, var(--text) 85%, var(--muted)); font-weight: 600; }
.wb-more { display: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: var(--chip); color: var(--text); cursor: pointer; font-weight: 700; line-height: 1; }
.btn.bal-import { height: 34px; padding: 0 12px; border-radius: 10px; background: transparent; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); font-weight: 650; font-size: var(--fs-s); }
.btn.bal-import:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.global-pill { height: 34px; padding: 0 12px; border-radius: 10px; box-sizing: border-box; }
header .lang-btn { height: 34px; border-radius: 10px; }
header .theme-btn, header .user-btn { width: 34px; height: 34px; border-radius: 10px; }
header { row-gap: 8px; }
@media (max-width: 1600px) {
  /* The "⋯" more-coins toggle was removed (owner, 27 Oct 2026): the coins stay inline, wrapping if needed. */
  .wb-coins { display: inline-flex; flex-wrap: wrap; }
}
@media (max-width: 720px) {
  .bal-bar { flex-wrap: wrap; }
  .wallet-box { max-width: 100%; }
  .wb-usd { display: none; }
}
/* The search box gives way first, so the top bar stays on one line on wide screens. */
.task-search.head-search { width: auto; flex: 1 1 220px; min-width: 150px; max-width: 460px; }
@media (max-width: 720px) { .task-search.head-search { flex-basis: 100%; max-width: none; } }

/* Help tab (owner, 20 Oct 2026): a search box and one folded answer per question (help.js). */
.help-panel { max-width: 880px; margin: 0 auto; }
.help-search { padding: 14px 14px 6px; }
.help-search input { width: 100%; padding: 10px 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text); font: inherit; font-size: var(--fs-m); outline: none; }
.help-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.help-note { padding: 0 16px; font-size: var(--fs-s); }
.help-note:not(:empty) { padding: 6px 16px; }
.help-list { padding: 8px 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.help-item { border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.help-item[open] { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.help-item summary { cursor: pointer; padding: 11px 14px; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 12px; }
.help-item summary::-webkit-details-marker { display: none; }
.help-item summary::after { content: ""; margin-inline-start: auto; flex: none; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
.help-item[open] summary::after { transform: rotate(225deg); }
.help-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 10px; }
.help-item ol { margin: 0; padding-block: 0 12px; padding-inline: 34px 14px; display: flex; flex-direction: column; gap: 5px; line-height: 1.55; color: var(--text); }

/* Task form, Tiered buy mode (owner, 20 Oct 2026): Universal / Tiered tabs, then one box per tier. */
.ak-tabs { gap: 6px; }
button.ak-tab { background: transparent; color: var(--ak-text); font: inherit; font-size: var(--fs-s); cursor: pointer; }
button.ak-tab:not(.on):hover { border-color: var(--accent); }
button.ak-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ak-tabs[hidden] { display: none; }
.ak-uni { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.ak-uni[hidden] { display: none; }
.tier-list { display: flex; flex-direction: column; gap: 10px; }
.ak-tier { border: 1px solid var(--ak-line); border-radius: 8px; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px; background: var(--ak-bg); min-width: 0; }
/* Tier (akbot-style, owner 24 Oct 2026): a label on the left and the control on the right, every
   row aligned to one column; Market Cap and Amount Filter are stacked (not side by side); the fee
   grids line up under the input column so every box shares one left edge. */
.modal.ak .ak-tier .ak-row > .ak-label, .ak-tier .tr-grid2 .ak-label { margin: 0; font-size: var(--fs-xs); }
.modal.ak .ak-tier .ak-row > .ak-grow, .modal.ak .ak-tier .tr-buy-ctl { width: 100%; }
.ak-tier .ak-mode { margin: 2px 0 0; }
/* Tip Mode / Priority Fee Mode on one row each: the label on the left, the fee boxes on the right. */
/* Two rows (owner, 26 Oct 2026): the label + its toggle on their own full-width row, the fee fields
   on the row below — so the toggle never overlaps the inputs and both toggles line up at the right. */
.ak-tier .tr-feerow { display: flex; flex-direction: column; align-items: stretch; gap: 7px; }
/* Tip Mode + High Gas, Low Tip wrapped in one bordered box (owner, 25 Oct 2026). */
.ak-tier .tr-feebox { border: 1px solid var(--ak-line); border-radius: 7px; background: var(--ak-input); padding: 9px 11px; display: flex; flex-direction: column; gap: 9px; margin-top: 2px; }
.ak-tier .tr-feelabel { font-size: var(--fs-xs); color: var(--ak-muted); font-weight: 600; display: flex; align-items: center; gap: 4px; }
/* High Gas, Low Tip merged into one fee row (owner, 25 Oct 2026): label + its toggle on the left
   (wraps), the Priority Fee / Tip boxes on the right — one row, like akbot. */
.ak-tier .tr-feerow-hg .tr-feelabel { white-space: nowrap; line-height: 1.25; }
/* Tip Mode and High Gas toggles sit at the right edge of the label column, so they line up under
   each other no matter how long the label is (owner, 26 Oct 2026). */
.ak-tier .tr-feelabel .mode-switch { margin-left: auto; }
/* Smaller, shorter toggles on the task edit/create form only (owner, 25 Oct 2026): the tier High
   Gas switch and the Wallets & Filters switches (Buy only once, Anti-MEV …). */
.modal.ak .switch { width: 34px; height: 18px; }
.modal.ak .switch span::before { width: 12px; height: 12px; top: 3px; left: 3px; }
.modal.ak .switch input:checked + span::before { transform: translateX(16px); }
/* High Gas, Low Tip off: hide its slippage/gas/tip boxes, leaving only the label + switch on one
   clean row; the boxes appear only when it is switched on (owner, 25 Oct 2026). */
.ak-tier .tr-feerow-hg:has(.tr-hglt:not(:checked)) .ak-fees { display: none; }
@media (min-width: 561px) { .modal.ak .ak-tier .tr-feerow .ak-fees, .modal.ak .ak-tier .tr-feerow .ak-fees-2 { margin-left: 0; } }
@media (min-width: 561px) {
  .modal.ak .ak-tier .ak-row { display: grid; grid-template-columns: 118px 1fr; align-items: center; gap: 8px; }
  .modal.ak .ak-tier .ak-row > .ak-label { margin: 0; white-space: nowrap; }
  .ak-tier .tr-grid2 { display: contents; }
  .modal.ak .ak-tier .ak-fees, .modal.ak .ak-tier .ak-fees-2 { margin-left: 126px; }
}
/* A tier's Advanced part (Amount Filter, Priority Fee Mode) behind a small muted toggle (owner, 21 Oct 2026). */
.tier-adv-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; padding: 2px 4px 2px 2px; border: 0; background: transparent; color: var(--ak-muted); font: inherit; font-size: var(--fs-xs); cursor: pointer; border-radius: 4px; }
.tier-adv-btn:hover { color: var(--ak-text); }
.tier-adv-btn:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
.tier-adv-caret { display: grid; place-items: center; transition: transform .15s; }
.tier-adv-caret .ico { width: 14px; height: 14px; }
.tier-adv-btn[aria-expanded="true"] .tier-adv-caret { transform: rotate(180deg); }
.tier-adv { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; border-top: 1px dashed var(--ak-line); min-width: 0; }
.tier-adv[hidden] { display: none; }
.ak-tier-head { display: flex; align-items: center; gap: 6px; }
.ak-tier-pill { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); border-radius: 6px; padding: 3px 8px; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
/* A tier's DEX filter: a dropdown button, its menu a checkbox per venue. */
.tr-dd { position: relative; flex: 1; min-width: 0; display: flex; }
.tr-dd-btn { display: flex; align-items: center; gap: 6px; cursor: pointer; text-align: start; }
.tr-dd-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-dd-caret { flex: none; opacity: .7; }
.tr-dd.open .tr-dd-btn { border-color: var(--accent); }
.tr-dd-menu { position: absolute; top: calc(100% + 4px); inset-inline-start: 0; z-index: 5; min-width: 100%; max-height: 260px; overflow: auto; background: var(--panel); border: 1px solid var(--ak-line); border-radius: 8px; padding: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); display: flex; flex-direction: column; gap: 1px; }
.tr-dd-menu[hidden] { display: none; }
.tr-dd-menu label { display: flex; align-items: center; gap: 7px; padding: 4px 8px; border-radius: 6px; font-size: var(--fs-xs); color: var(--ak-text); cursor: pointer; white-space: nowrap; }
.tr-dd-menu label:hover { background: var(--ak-card); }
.tr-dd-menu input { width: 13px; height: 13px; margin: 0; accent-color: var(--accent); }
.tr-dd-menu .dex-logo { width: 16px; height: 16px; flex: none; }
/* The selected DEXes' icons shown in the dropdown button itself (owner, 3 Nov 2026): 16px like the
   menu, nudged to sit on the text line; a small gap before each label / between icons. */
.tr-dd-text .dex-logo { width: 16px; height: 16px; vertical-align: -3px; margin-inline-end: 3px; }
.ak-select { flex: 1; min-width: 0; background: var(--ak-input); color: var(--ak-text); border: 1px solid var(--ak-line); border-radius: 6px; padding: 4px 6px; min-height: 30px; font: inherit; font-size: var(--fs-xs); }
.ak-select:focus { outline: none; border-color: var(--accent); }
.ak-select option, .unit-select option { background: var(--panel); color: var(--text); }
.tier-btn { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--ak-line); background: transparent; color: var(--ak-text); border-radius: 6px; cursor: pointer; font-size: var(--fs-s); line-height: 1; padding: 0; }
.tier-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.ak-tier-head .tier-btn.del { margin-left: auto; }
.tier-btn.del { color: var(--red); }
.tier-btn.del:hover { border-color: var(--red); color: var(--red); }
.tier-btn:disabled { opacity: .35; cursor: default; }
.unit-select { border: 0; background: transparent; color: var(--ak-text); font: inherit; font-size: var(--fs-xs); padding: 0 2px 0 0; cursor: pointer; flex: none; }
.unit-select:focus-visible { outline: 1px solid var(--accent); }
.modal.ak .input:has(input:disabled) { opacity: .5; }

/* Settings: quote coins on / off for every task. */
.ak-gsep { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--ak-line); }
.quote-toggles { display: flex; flex-direction: column; gap: 4px; }
.quote-row { justify-content: space-between; padding: 6px 8px; border: 1px solid var(--ak-line); border-radius: 8px; cursor: pointer; }
.quote-row .ak-label { width: auto; flex: 1; gap: 8px; font-size: var(--fs-s); }

/* Tooltips (owner, 20 Oct 2026): the one .tip box the pages' scripts show for an element's title. */
.tip { position: fixed; z-index: 1000; max-width: 320px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); font-size: var(--fs-xs); line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); pointer-events: none; opacity: 0; transition: opacity .1s; }
.tip.on { opacity: 1; }

/* Icons (owner, 20 Oct 2026): the one outline set; 16px in buttons, 18px in the top bar. */
.ico { width: 16px; height: 16px; flex: none; vertical-align: -0.2em; }
.has-ico { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.icon-btn .ico, .bin-btn .ico, .tier-btn .ico, .rc-del .ico, .modal-close .ico, .ak-del .ico { display: block; }
header .theme-btn .ico, header .user-btn .ico, header .lang-btn .ico, .head-new .ico { width: 18px; height: 18px; }
.ak-del { display: inline-grid; place-items: center; }
.tr-dd-caret .ico { width: 14px; height: 14px; }
.ak-mode-title .ico, .ak-title .ico { width: 16px; height: 16px; }
.icon-btn.del { color: var(--red); }
.ico.ok { color: var(--green); }
/* Icon-only buttons (owner, 20 Oct 2026): Refresh everywhere is the icon alone, 28x28, its name in the tooltip. */
#view-holdings .panel h2 .filters button.icon-only, .panel h2 .filters.pf-actions button.icon-only, .filters button.icon-only, button.icon-only { width: 28px; height: 28px; min-width: 0; min-height: 0; padding: 0; box-sizing: border-box; display: inline-grid; place-items: center; border-radius: 8px; }
/* Wallet tab section headings (Holdings, Rewards, Change wallet) and me.html's Rewards (owner,
   20 Oct 2026): the title in the accent colour, the subtitle in a lighter mix of it. */
#view-holdings .panel h2, .panel h2.accent-h { color: var(--accent); }
#view-holdings .panel h2 .muted, .panel h2.accent-h .muted { color: color-mix(in srgb, var(--accent) 75%, transparent); }
/* Portfolio (owner, 20 Oct 2026): live rows with the coin's logo, name and symbol in the accent.
   Scoped to table cells: the coin strip under the tabs uses the same class name. */
td .pf-coin { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pf-strip .pf-coin { flex: none; }
.pf-logo { width: 28px; height: 28px; border-radius: 50%; flex: none; object-fit: cover; background: var(--chip); box-shadow: 0 0 0 1px var(--border); }
.pf-letter { display: inline-grid; place-items: center; font-weight: 700; font-size: var(--fs-xs); color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.pf-coin-text { min-width: 0; }
.pf-coin-text a { text-decoration: none; color: inherit; }
.pf-name { color: var(--accent); font-weight: 650; font-size: var(--fs-s); }
.pf-sym { display: inline-block; margin-inline-start: 6px; padding: 0 6px; border-radius: 6px; font-size: 10px; font-weight: 700; line-height: 16px; vertical-align: 1px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.pf-coin-sub { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: var(--fs-xs); }
.pf-copy { padding: 1px 3px; }
.pf-copy .ico { width: 14px; height: 14px; }
.pf-copy.done { color: var(--green); }
.pf-coin-sub .chip { font-size: 10px; padding: 1px 6px; }
.pf-coin-sub .chip.pf-on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pf-sub { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.pf-delta { font-size: var(--fs-xs); margin-top: 2px; font-weight: 600; }
.pf-delta.up { color: var(--green); } .pf-delta.down { color: var(--red); }
.pf-venue { display: inline-grid; place-items: center; }
.pf-venue .dex-logo { width: 16px; height: 16px; }
table.txs.pf-table td { padding: 7px 12px; height: 56px; vertical-align: middle; }
table.txs.pf-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--text) 2.5%, transparent); }
table.txs.pf-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
table.txs.pf-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
#view-portfolio .note, #pf-note { font-size: var(--fs-xs); color: var(--muted); }
.pf-pnl-sol { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; margin-top: 2px; }
.pf-pnl-sol.up { color: var(--green); } .pf-pnl-sol.down { color: var(--red); }
.pf-sell-th { white-space: nowrap; } .pf-sell-th .icon-btn { padding: 2px 4px; margin-inline-start: 4px; vertical-align: middle; }
.pf-live { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: 10px; font-size: var(--fs-xs); font-weight: 600; color: var(--accent); }
.pf-live[hidden] { display: none; }
.pf-live .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
/* Transactions filters (owner, 20 Oct 2026): a bar above the table; the venue chips carry the logo. */
.tx-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--border); font-size: var(--fs-xs); color: var(--muted); }
/* Each group in its own rounded box (owner, 20 Oct 2026); the Clear link outside, far right. */
.txf { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 10px; padding: 4px 8px; }
.txf > span:first-child { text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.txf .ak-select { flex: none; min-height: 26px; padding: 2px 8px; font-size: var(--fs-xs); background: var(--chip); color: var(--text); border: 1px solid var(--border); }
.txf-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.txf-chips button { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--chip); color: var(--text); font: inherit; font-size: var(--fs-xs); cursor: pointer; }
.txf-chips button:hover { border-color: var(--muted); }
.txf-chips button.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.txf-chips .dex-logo { width: 16px; height: 16px; flex: none; }
.txf-clear { cursor: pointer; color: var(--muted); text-decoration: underline; margin-inline-start: auto; }
.tx-filters.active .txf-clear { color: var(--accent); }
.hl-venue { display: inline-flex; align-items: center; gap: 5px; }
.hl-venue .dex-logo { width: 16px; height: 16px; flex: none; }
/* Stats popup (owner, 20 Oct 2026): a task's trades, round trips and totals. */
.st-modal { width: min(880px, calc(100vw - 24px)); }
.st-periods { margin-inline-start: auto; margin-inline-end: 6px; }
.st-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; margin-bottom: 12px; }
.st-tile { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.st-tile .label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.st-tile .value { font-size: var(--fs-m); font-weight: 650; margin-top: 2px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.st-tile .value.up, .st-v-pnl.up, .st-tile .value .up { color: var(--green); }
.st-tile .value.down, .st-v-pnl.down, .st-tile .value .down { color: var(--red); }
.st-venues { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.st-v { display: grid; grid-template-columns: minmax(70px, auto) 1fr auto auto auto; align-items: center; gap: 10px; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.st-v-name { display: inline-flex; align-items: center; gap: 5px; }
.st-v-name .dex-logo, .st-row-venue .dex-logo { width: 16px; height: 16px; flex: none; }
.st-v-bar { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 22%, transparent); overflow: hidden; min-width: 60px; }
.st-v-bar i { display: block; height: 100%; border-radius: 999px; background: var(--green); }
/* The Holdings heading carries each coin's amount with its logo (owner, 20 Oct 2026). */
#hold-sol { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#hold-sol .hold-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
  font-size: var(--fs-xs); font-weight: 500; color: var(--text); line-height: 1.5; }
#hold-sol .hold-chip svg { width: 14px; height: 14px; flex: none; }
#hold-sol .hold-chip b { color: var(--accent); font-variant-numeric: tabular-nums; margin-inline-start: 2px; }

/* The table fits the dialog: fixed column widths, the coin cell gives way, nothing is
   clipped at the edge (owner, 21 Oct 2026). */
.st-modal .table-wrap { overflow-x: hidden; }
.st-table { min-width: 0; width: 100%; table-layout: fixed; }
.st-table th { padding: 8px 8px; }
.st-table th:nth-child(1) { width: 124px; }
.st-table th:nth-child(3) { width: 170px; }
.st-table th:nth-child(4) { width: 150px; }
.st-table th:nth-child(5) { width: 80px; }
.st-table th:nth-child(6) { width: 76px; }
.st-table th:nth-child(7) { width: 108px; }
.st-table td { overflow: hidden; text-overflow: ellipsis; }
.st-table td { padding: 6px 8px; vertical-align: middle; }
.st-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.st-row-venue { display: inline-flex; align-items: center; vertical-align: middle; margin-inline-start: 4px; }
/* On a phone the dialog's table keeps its natural widths and scrolls inside its wrap. */
@media (max-width: 700px) {
  .st-modal .table-wrap { overflow-x: auto; }
  .st-table { table-layout: auto; min-width: 640px; }
}
/* Sniper tab (owner, 20 Oct 2026, like XT's): filters, search and "+" in one bar; launchpads and
   switches not built yet shown greyed with "soon". */
.sn-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 4px 0 10px; }
.sn-toolbar .seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.sn-toolbar .seg button { background: none; border: 0; padding: 5px 12px; font: inherit; color: var(--muted); cursor: pointer; }
.sn-toolbar .seg button + button { border-left: 1px solid var(--border); }
.sn-toolbar .seg button.active { background: var(--chip); color: var(--text); font-weight: 600; }
.sn-toolbar .task-search { width: 260px; }
.btn.sn-new { padding: 4px 14px; border-radius: 999px; font-size: 16px; line-height: 1; }
.sn-soon { opacity: .5; cursor: not-allowed; }
.btn.danger.sn-del { border-color: color-mix(in srgb, var(--red) 60%, transparent); margin-left: 6px; }
.btn.danger.sn-del:hover { background: color-mix(in srgb, var(--red) 12%, transparent); }

/* ---------- The user's own sections on the one dashboard (owner, 21 Oct 2026) ---------- */
.me-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.me-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; padding: 12px 14px; }
.me-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-s); color: var(--muted); }
.me-form input[type=text], .me-form input[type=number], .me-form input[type=password], .me-form select, .me-form textarea {
  width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; }
.me-form .wide { grid-column: 1 / -1; }
.me-actions { padding: 0 14px 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* A hidden task-form row stays hidden although .ak-row sets a display. */
#task-form [hidden] { display: none !important; }
/* Fields the user's copies don't use yet ("soon"). */
#task-form .soon-off, #task-form .soon-off:disabled, #sniper-form .soon-off { opacity: .45; cursor: not-allowed; }
#sniper-form .dex-grid label.soon-off:hover { background: none; }

.ctl-est { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; min-height: 14px; }

/* ===========================================================================================
   Modern layer (owner, 23 Oct 2026: modern GUI, proper spacing, proper alignment, nothing
   hidden, one theme for all). One spacing / radius / elevation scale and ONE look for cards,
   buttons, inputs, tables and tabs, applied over the rules above. Layout only: every control
   and column stays where it was and stays usable.
   =========================================================================================== */
:root {
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --r-s: 8px; --r-m: 12px; --r-l: 16px;
  --shadow-1: 0 1px 2px rgb(16 24 40 / .05), 0 1px 3px rgb(16 24 40 / .06);
  --shadow-2: 0 4px 12px rgb(16 24 40 / .08), 0 2px 4px rgb(16 24 40 / .05);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
  --hover: color-mix(in srgb, var(--text) 5%, transparent);
}
:root[data-theme="dark"] {
  --shadow-1: 0 1px 2px rgb(0 0 0 / .35);
  --shadow-2: 0 6px 18px rgb(0 0 0 / .45);
  --hover: color-mix(in srgb, var(--text) 7%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shadow-1: 0 1px 2px rgb(0 0 0 / .35);
    --shadow-2: 0 6px 18px rgb(0 0 0 / .45);
    --hover: color-mix(in srgb, var(--text) 7%, transparent);
  }
}

/* Surfaces: one radius, one border, one soft elevation. */
.panel, .tile, .modal, .task-card, .task-row { border-radius: var(--r-m); box-shadow: var(--shadow-1); }
.modal { border-radius: var(--r-l); box-shadow: var(--shadow-2); }
.tile { padding: var(--sp-3) var(--sp-4); }
.tiles { gap: var(--sp-3); }
.panel h2 { padding: var(--sp-3) var(--sp-4); }

/* The top bar stays in view while scrolling; the tab strip scrolls sideways on a narrow screen
   instead of wrapping or dropping tabs. */
header { position: sticky; top: 0; z-index: 5; padding-block: var(--sp-2);
         background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(8px); }
.tabs { overflow-x: auto; scrollbar-width: none; gap: var(--sp-1); }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { white-space: nowrap; border-radius: var(--r-s) var(--r-s) 0 0; transition: color .15s, background .15s; }
.tabs a:hover { color: var(--text); background: var(--hover); }
.tabs a.active { border-bottom-width: 2px; }

/* Buttons: one height, one radius, a visible hover and a keyboard focus ring. */
.btn { min-height: 34px; border-radius: 10px; padding: 0 var(--sp-4); display: inline-flex; align-items: center; justify-content: center; gap: 6px;
       transition: background .15s, border-color .15s, box-shadow .15s, filter .15s; }
.btn:hover:not(:disabled) { background: var(--hover); }
.btn.primary:hover:not(:disabled) { background: var(--accent); filter: brightness(1.07); }
.btn:focus-visible, .icon-btn:focus-visible, .bin-btn:focus-visible, .tabs a:focus-visible { outline: none; box-shadow: var(--ring); }

/* Inputs: one height, one radius, the focus ring on the whole field. */
.input { border-radius: 10px; min-height: 36px; transition: border-color .15s, box-shadow .15s; }
.input:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.input input, .input textarea, .input select { outline: none; }
select:focus-visible, input:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--ring); }
.field label { margin-bottom: 6px; }

/* Tables: a hover row, and wide tables scroll inside their own box (no column is ever cut). */
.table-wrap { overflow-x: auto; }
table.txs tbody tr:hover td, table.tasks tbody tr:hover td { background: var(--hover); }

/* Task list: the four facts in fixed proportions so every row lines up, and the PnL a fixed
   width so the actions start at the same place on every row; nothing overlaps (the "PF tip ·
   gas" line used to run under the PnL figure). */
.task-card { grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto; gap: var(--sp-3) var(--sp-5); padding: 10px var(--sp-4); }
.task-info > div { min-width: 0; overflow-wrap: anywhere; white-space: nowrap; }
/* A tiered task uses the SAME columns as a plain one (owner, 26 Oct 2026): buys in column 1, then
   each tier is its own row — amount·slippage in column 2, tip·gas in column 3 — so every tier lines
   up under the plain task's Buy / Tip columns and the card reads uniformly. */
.task-info.tiered .ti-tamt { grid-column: 2; }
.task-info.tiered .ti-ttg { grid-column: 3 / span 2; }
.task-pnl { min-width: 104px; }
@media (max-width: 1100px) { .task-info { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .task-card { grid-template-columns: 1fr; } .task-pnl { min-width: 0; } }
.tasks-h { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-4) 2px var(--sp-1); }
.task-card + .task-card, .task-card + .tasks-h { margin-top: var(--sp-2); }

/* Chips and badges share the pill radius. */
.chip { border-radius: 999px; }
/* The name and its wallet badge on one line, so every task row has the same height. */
.task-card { grid-template-columns: minmax(200px, 300px) minmax(0, 1fr) auto; }
.task-card .task-name { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: nowrap; min-width: 0; }
.task-card .task-name-text { min-width: 0; white-space: nowrap; }
.task-card .task-name .tgt { flex: none; }
/* Uniform task-card leading columns (owner, 25 Oct 2026): a fixed-width target pill and a
   min-width name so the names line up and the wallet badge sits at a consistent x down the list. */
.task-card .task-name .tgt-count { min-width: 48px; justify-content: center; }
.task-card .task-name-text { flex: 0 1 auto; width: auto; min-width: 104px; max-width: 240px; }
/* Table headers sit over their cells: start-aligned like the cells (they were centred while
   the cells were start-aligned, so every column looked offset); right-aligned numeric cells
   keep a right-aligned header. */
table th { text-align: start; }
table th.num, table td.num, table th[data-num] { text-align: end; }
table.txs th, table.tasks th, .td-table th { text-align: start; }
table.txs.pf-table th:nth-child(n+2):nth-child(-n+8) { text-align: end; }
[dir="rtl"] table.txs.pf-table th:nth-child(n+2):nth-child(-n+8) { text-align: left; }

/* Controls pass (owner, 23 Oct 2026: good GUI controls). */
/* A mode heading (Tip / Priority Fee Mode): title and note on the left, its switch at the end of
   the same row, the same for every mode. */
.ak-mode { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-3) 0 var(--sp-2); }
.ak-mode .mode-switch { margin-inline-start: auto; }
/* A take-profit phase: the Timeout row sits under Price Increase / Instant Sell, its label in
   the same column as theirs (it was pushed into the 24 px delete column). */
.ak-phase .ak-timeout { grid-column: 2; grid-row: 2; justify-content: flex-start; }
/* Wallet lists: one address per line, never broken in the middle (scroll sideways if long). */
/* Wrap long addresses so the box scrolls vertically only — no horizontal scrollbar (owner, 25 Oct 2026). */
#f-targets, #sn-targets, textarea.addr-list { white-space: pre-wrap; overflow-x: hidden; overflow-y: auto; overflow-wrap: anywhere; word-break: break-all; }
/* DEX names in full (they were cut with "…"). */
.modal.ak .dex-grid label { white-space: normal; align-items: flex-start; }
.modal.ak .dex-grid label span { overflow: visible; text-overflow: clip; }
/* The footer's actions: full-size buttons with a capitalised label. */
.modal-foot .btn { min-width: 104px; min-height: 36px; text-transform: capitalize; font-weight: 600; }
/* Switches: one size and a visible keyboard focus everywhere. */
.switch { width: 42px; height: 24px; }
.switch span::before { width: 18px; height: 18px; }
.switch input:checked + span::before { transform: translateX(18px); }
.switch input:focus-visible + span { outline: none; box-shadow: var(--ring); }
/* Checkboxes in the accent colour. */
input[type="checkbox"]:not(.switch input) { accent-color: var(--accent); width: 16px; height: 16px; }
/* Selects: the same height and radius as inputs. */
select { min-height: 34px; border-radius: 10px; }
/* Icon buttons: one size and a hover. */
.icon-btn { transition: background .15s, border-color .15s, color .15s; }
.icon-btn:hover { background: var(--hover); }
/* Notices span the page like the panels under them (a 980 px centred bar sat offset from the
   panels' left edge). */
.view > .global-off { max-width: none; margin: var(--sp-3) 0; }
/* The convert table fills its panel (it used half of it). */
table.txs.hold-table { width: 100%; }
.hold-table col.hc-in, .hold-table col.hc-out { width: 38%; }

/* − / + steppers on the exit phases' % boxes (owner, 23 Oct 2026). */
.ak-phase .input.has-steps { padding-left: 2px; padding-right: 2px; }
.ak-phase .input .step { flex: none; width: 22px; height: 22px; border: 0; border-radius: 6px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 700; line-height: 1; cursor: pointer; }
.ak-phase .input .step:hover { background: color-mix(in srgb, var(--accent) 26%, transparent); }


/* The task form's segmented choices (Buy Mode, Buy on 100% sell) and the amount radio (owner, 24 Oct 2026). */
.ak .seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.ak .seg button { background: none; border: 0; padding: 5px 12px; font: inherit; color: var(--muted); cursor: pointer; }
.ak .seg button + button { border-left: 1px solid var(--border); }
.ak .seg button.active { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-weight: 600; }
/* The Dev|Normal (Buy on 100% sell) toggle in the Advanced two-column grid: keep it off the right
   edge so it never overlaps the next column / the card edge, and let it wrap below the label on a
   tight cell (owner, 26 Oct 2026). */
.modal.ak .ak-two .ak-row > .ak-grow { min-width: 0; }
.modal.ak .ak-two .seg-multi { margin-right: 10px; flex: 0 1 auto; }
.modal.ak .ak-two .seg-multi button { padding: 5px 11px; }
.ak .amt-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.ak .amt-mode label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.ak .amt-mode label.soon-off { opacity: .5; cursor: not-allowed; }
.ak .tier-list.amt-capped .tr-buy-ctl { opacity: .75; }


/* Many tasks at once (owner, 24 Oct 2026): the tick boxes, the toolbar and the bottom bar. */
.toolbar .pick-all { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.toolbar .spacer { flex: 1; }
.task-name .task-pick { margin: 0 8px 0 0; flex: none; cursor: pointer; accent-color: var(--accent); }
/* One row, a clear accent border so it stands out as the bulk-action bar (owner, 26 Oct 2026). */
.bulk-bar { position: fixed; left: 50%; bottom: 52px; transform: translateX(-50%); z-index: 40; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px;
  padding: 8px 12px; border: 2px solid var(--accent); border-radius: 12px; background: color-mix(in srgb, var(--accent) 9%, var(--panel));
  box-shadow: 0 12px 36px rgba(0,0,0,.5), 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
  max-width: calc(100vw - 20px); overflow-x: auto;
  /* Breathe the accent ring in and out so the selection toolbar draws the eye (owner, 27 Oct 2026). */
  animation: bulk-pulse 1.5s ease-in-out infinite; }
@keyframes bulk-pulse {
  0%, 100% { box-shadow: 0 12px 36px rgba(0,0,0,.5), 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent); }
  50% { box-shadow: 0 12px 36px rgba(0,0,0,.5), 0 0 0 9px color-mix(in srgb, var(--accent) 30%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .bulk-bar { animation: none; } }
.bulk-bar[hidden] { display: none; }
.bulk-bar > b { padding: 0 6px 0 2px; white-space: nowrap; color: var(--accent); }
.bulk-bar button { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 8px; padding: 5px 9px; font: inherit; cursor: pointer; white-space: nowrap; flex: none; }
.bulk-bar button:hover { background: var(--chip); }
.bulk-bar button.danger { color: var(--red); }
.bulk-bar kbd { font: inherit; font-size: var(--fs-xs); color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; }
.bulk-bar .bulk-x { border: 0; color: var(--muted); }

/* Compact task list (owner, 24 Oct 2026): one row a task. */
.toolbar .seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.toolbar .seg button { background: none; border: 0; padding: 5px 12px; font: inherit; color: var(--muted); cursor: pointer; }
.toolbar .seg button + button { border-left: 1px solid var(--border); }
.toolbar .seg button.active { background: var(--chip); color: var(--text); font-weight: 600; }
/* Task status filter (Running / Stopped / All) count badges (owner, 27 Oct 2026). */
.task-status-seg button { display: inline-flex; align-items: center; gap: 6px; }
.task-status-seg .ts-count { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 9px; font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; }
/* Running count in the accent (highlight), Stopped count in red (owner, 27 Oct 2026). */
.task-status-seg .ts-count.run { background: var(--accent-weak); color: var(--accent); }
.task-status-seg .ts-count.stop { background: color-mix(in srgb, var(--red) 20%, transparent); color: var(--red); }
/* A pulsing dot on each — shrink and expand (owner, 27 Oct 2026). */
.task-status-seg .st-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; animation: st-pulse 1.4s ease-in-out infinite; }
.task-status-seg .st-dot.run { background: var(--green); box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 50%, transparent); }
.task-status-seg .st-dot.stop { background: var(--red); }
@keyframes st-pulse { 0%, 100% { transform: scale(.7); opacity: .6; } 50% { transform: scale(1.2); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .task-status-seg .st-dot { animation: none; } }
/* The layout toggle shows icons, not words (owner, 27 Oct 2026). */
.task-view-seg button { display: inline-grid; place-items: center; padding: 6px 10px; }
.task-view-seg button svg { width: 15px; height: 15px; display: block; }
/* Chain tabs in the header (owner, 24 Oct 2026): a clean segmented pill, active chain in accent. */
.head-chain { display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--chip); }
.head-chain button { background: none; border: 0; padding: 6px 14px; font: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; transition: color .12s, background .12s; }
.head-chain button + button { border-left: 1px solid var(--border); }
.head-chain button:hover:not(.active) { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.head-chain button.active { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); font-weight: 700; }
.task-table td { vertical-align: middle; }
.task-table tr { cursor: pointer; }
.task-table tr.tr-off { opacity: .6; }
.task-table .task-actions { flex-wrap: nowrap; }

/* The Tasks tab's own bar (owner, 24 Oct 2026): chain, its Running pill, New task. */
.toolbar.tasks-head { gap: 10px; flex-wrap: wrap; }
.chain-pill { cursor: pointer; }
.chain-pill.held { opacity: .6; }

/* The bell's menu (owner, 24 Oct 2026): all sounds, then each type with a preview. */
.sound-menu { position: fixed; z-index: 60; width: 220px; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); box-shadow: 0 8px 28px rgba(0,0,0,.35); }
.sound-menu .sm-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.sound-menu .sm-row:hover { background: var(--chip); }
.sound-menu .sm-row:first-child { border-bottom: 1px solid var(--border); border-radius: 6px 6px 0 0; margin-bottom: 4px; font-weight: 600; }
.sound-menu .sm-row span { flex: 1; }
.sound-menu .sm-play { border: 0; background: none; color: var(--accent); cursor: pointer; font-size: var(--fs-xs); }

/* Solana wallets (owner, 24 Oct 2026): the slots table and the form's per-target picker. */
.sw-empty td { opacity: .7; }
.sw-act { white-space: nowrap; text-align: right; }
/* Unified wallet hub (owner, 26 Oct 2026): a card per wallet — its coins on the head row, a
   per-wallet Convert panel that drops down below. */
.whub { display: flex; flex-direction: column; gap: 10px; }
.whub-card { border: 1px solid var(--border); border-radius: 12px; background: var(--chip); overflow: hidden; }
.whub-head { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 10px 14px; }
.whub-n { font-variant-numeric: tabular-nums; color: var(--muted); font-size: var(--fs-xs); min-width: 14px; }
.whub-name { font-weight: 650; display: inline-flex; align-items: center; gap: 6px; }
.whub-addr { color: var(--accent); text-decoration: none; }
/* Coin balances sit right after the address (owner, 26 Oct 2026), not pushed to the far right. */
.whub-coins { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 3px 10px;
  color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.whub-coins .cb { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.whub-coins .sol-ico, .whub-coins .coin-ico { width: 14px; height: 14px; flex: none; }
/* The actions (Convert / edit / delete) are what goes to the far right instead. */
.whub-act { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin-inline-start: auto; }
/* Convert button stands out so it is easy to find; when open it is filled in the accent, and the
   panel below it is clearly set off (owner, 26 Oct 2026). */
.whub-conv-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; font-weight: 600;
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, transparent); }
.whub-conv-btn:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.whub-conv-btn svg { width: 13px; height: 13px; transition: transform .15s; }
.whub-conv-btn.on { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.whub-conv-btn.on svg { transform: rotate(180deg); }
.whub-conv { border-top: 2px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  padding: 14px; background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.whub-conv[hidden] { display: none; }
/* The open card is highlighted so the expanded convert area is obvious. */
.whub-card:has(.whub-conv-btn.on) { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); }
.whub-empty .whub-name { font-weight: 400; }
.tw-list { margin-top: 8px; display: grid; gap: 6px; }
/* "This wallet already has a task" warning under the Smart Wallet field (owner, 26 Oct 2026). */
.tgt-dup { margin-top: 7px; display: flex; flex-direction: column; gap: 4px; }
.tgt-dup div { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-xs); line-height: 1.35;
  color: color-mix(in srgb, var(--amber) 85%, var(--text)); }
.tgt-dup svg { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--amber); }
.tw-head { font-size: var(--fs-xs); }
.tw-row { display: flex; align-items: center; gap: 10px; }
.tw-row .mono { min-width: 110px; }
.tw-row select { flex: 1; min-width: 0; }