:root {
    --paper: #f4f5f2;
    --surface: #ffffff;
    --surface-raised: #fbfcfa;
    --sunk: #e9ece8;
    --ink: #182027;
    --ink-2: #5c6872;
    --ink-3: #87929a;
    --rule: #dbe1dc;
    --accent: #286c67;
    --accent-soft: #e0efeb;
    --flag: #9a6612;
    --flag-bg: #f7eedb;
    --gain: #187457;
    --loss: #b84b46;
    --sans: 'Avenir Next', Avenir, 'Segoe UI', system-ui, sans-serif;
    --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --paper: #101619; --surface: #172024; --surface-raised: #1c292d; --sunk: #202d31;
      --ink: #e8eeec; --ink-2: #a3b1b2; --ink-3: #728184; --rule: #2c3b3e;
      --accent: #78b9ae; --accent-soft: #1c3d3b; --flag: #e0b760; --flag-bg: #2c2518;
      --gain: #5bc19a; --loss: #ed7c73;
    }
  }
  :root[data-theme="dark"] {
    --paper: #101619; --surface: #172024; --surface-raised: #1c292d; --sunk: #202d31;
    --ink: #e8eeec; --ink-2: #a3b1b2; --ink-3: #728184; --rule: #2c3b3e;
    --accent: #78b9ae; --accent-soft: #1c3d3b; --flag: #e0b760; --flag-bg: #2c2518;
    --gain: #5bc19a; --loss: #ed7c73;
  }
  :root[data-theme="light"] {
    --paper: #f4f5f2; --surface: #ffffff; --surface-raised: #fbfcfa; --sunk: #e9ece8;
    --ink: #182027; --ink-2: #5c6872; --ink-3: #87929a; --rule: #dbe1dc;
    --accent: #286c67; --accent-soft: #e0efeb; --flag: #9a6612; --flag-bg: #f7eedb;
    --gain: #187457; --loss: #b84b46;
  }

  /* A display value on a collapsed element silently defeats [hidden]; this keeps
     the attribute authoritative wherever it is used. */
  [hidden] { display: none !important; }

  body { margin: 0; background: var(--paper); color: var(--ink);
         font-family: var(--sans); font-size: 15px; line-height: 1.55;
         -webkit-text-size-adjust: 100%; }
  .wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px 72px; }
  .page-content { display: flex; flex-direction: column; gap: 24px; }
  h1, h2, h3 { font-weight: 650; margin: 0; text-wrap: balance; letter-spacing: -0.035em; }
  h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.02; }
  h2 { font-size: 1.35rem; line-height: 1.15; }
  h3 { font-size: 1rem; line-height: 1.2; }
  p { margin: 0; }
  a { color: var(--accent); text-underline-offset: 3px; }
  a:hover { color: var(--ink); }
  .num, .a-val, .a-pnl, dd, .fills { font-family: var(--mono); font-variant-numeric: tabular-nums; }

  /* The chrome is intentionally quiet. It keeps the product anchored while
     the page body gives the accounting data the visual priority. */
  .app-header { min-height: 72px; display: flex; align-items: center; justify-content: space-between;
                gap: 24px; border-bottom: 1px solid var(--rule); margin-bottom: 24px; }
  .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700;
           text-decoration: none; letter-spacing: -0.02em; }
  .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
                border-radius: 8px; background: var(--ink); color: var(--paper); font-size: .78rem; }
  .app-nav { display: flex; align-items: center; gap: 6px; }
  .app-nav a { padding: 8px 11px; border-radius: 8px; color: var(--ink-2); font-size: .82rem;
               font-weight: 600; text-decoration: none; }
  .app-nav a:hover, .app-nav a[aria-current="page"] { background: var(--sunk); color: var(--ink); }

  /* masthead */
  .mast { display: flex; flex-direction: column; gap: 9px;
          border-bottom: 1px solid var(--rule); padding-bottom: 22px; }
  .mast-compact { padding-bottom: 18px; }
  .mast .muted { max-width: 650px; margin: 0; }
  .kicker { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em;
            color: var(--accent); font-weight: 700; }
  .taken { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); }

  /* summary */
  .summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
             background: var(--rule); border: 1px solid var(--rule); border-radius: 12px;
             overflow: hidden; }
  .cell { background: var(--surface); padding: 16px 17px; display: flex;
          flex-direction: column; gap: 3px; }
  .cell dt { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em;
             color: var(--ink-2); }
  .cell dd { margin: 0; font-size: clamp(1.05rem, 2.5vw, 1.35rem); font-weight: 650; letter-spacing: -0.04em; }
  @media (min-width: 620px) { .summary { grid-template-columns: repeat(4, 1fr); } }

  /* Keep the live total outside the replaceable history fragment, so a period
     switch cannot replace today's value with an older observation. */
  .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .portfolio-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
  .portfolio-toolbar .wallet-filter { grid-row: 1; grid-column: 1; justify-self: start; max-width: 100%; }
  .portfolio-toolbar .taken { grid-column: 1 / -1; }
  .privacy-form { margin: 0; grid-row: 1; grid-column: 2; }
  .privacy-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: .78rem; cursor: pointer; }
  .privacy-toggle svg { width: 18px; height: 18px; }
  .privacy-toggle[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); }
  .privacy-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  /* A server-rendered attribute hides amounts before paint, including newly
     inserted history fragments and secondary values that reveal the total. */
  [data-private-amounts="true"] :is(.overview-metrics dd, .a-val, .a-pnl, .g-val) { visibility: hidden; position: relative; }
  [data-private-amounts="true"] :is(.overview-metrics dd, .a-val, .a-pnl, .g-val)::after { content: '••••'; visibility: visible; position: absolute; left: 0; top: 0; color: var(--ink-2); }
  [data-private-amounts="true"] .detail { display: none; }
  .portfolio-toolbar .taken { line-height: 1.9; }
  .portfolio-overview { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
  .overview-status { padding: 10px 22px 0; font-size: .75rem; }
  .overview-status a { color: var(--flag); }
  .overview-metrics { margin: 0; border: 0; border-radius: 0; background: none; gap: 0; align-items: center; padding: 22px 6px; }
  .overview-metrics .cell { padding: 4px 16px; min-width: 0; }
  .overview-metrics .cell dt { text-transform: none; letter-spacing: 0; font-size: .75rem; }
  .overview-metrics .cell dd { font-size: clamp(1rem, 2vw, 1.2rem); }
  .overview-metrics .overview-value dd { font-size: clamp(1.6rem, 3.3vw, 2.25rem); line-height: 1.3; }
  @media (min-width: 620px) { .overview-metrics { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
  @media (max-width: 619px) {
    .app-header { flex-wrap: wrap; column-gap: 12px; row-gap: 8px; padding: 12px 0; }
    .app-nav { order: 3; width: 100%; }
    .overview-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; padding: 18px 2px; }
    .overview-metrics .overview-value { grid-column: 1 / -1; }
    .overview-metrics .cell { padding: 0 10px; }
    .overview-metrics .cell dd { font-size: .9rem; }
    .overview-metrics .overview-value dd { font-size: 2rem; }
  }

  .up { color: var(--gain); } .down { color: var(--loss); }

  .positions { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--rule);
               border-radius: 12px; overflow: hidden; font-size: .86rem; }
  .positions th, .positions td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--rule); }
  .positions th { color: var(--ink-2); font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; }
  .positions td.num, .positions th.num { text-align: right; }
  .positions tr:last-child td { border-bottom: 0; }
  .positions tbody tr:hover { background: var(--surface-raised); }

  /* banners: this tool's whole point is saying what it cannot vouch for */
  .banner { background: var(--flag-bg); border-left: 3px solid var(--flag);
            border-radius: 0 8px 8px 0; padding: 10px 14px; font-size: 0.86rem;
            color: var(--ink); }
  .banner strong { color: var(--flag); }
  .diagnostics { border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); }
  .diagnostics-summary { display: flex; align-items: center; gap: 8px; padding: 9px 12px;
                         cursor: pointer; list-style: none; font-size: 0.8rem; font-weight: 600;
                         color: var(--flag); }
  .diagnostics-summary::-webkit-details-marker { display: none; }
  .diagnostics[open] > .diagnostics-summary { border-bottom: 1px solid var(--rule); }
  .diagnostics[open] > .diagnostics-summary .tick { transform: rotate(90deg); }
  .diagnostics-count { margin-left: auto; font-family: var(--mono); font-size: 0.72rem; }
  .diagnostics-body { display: flex; flex-direction: column; gap: 10px; padding: 10px; }

  .meta { font-size: 0.8rem; color: var(--ink-2); font-family: var(--mono); }

  /* groups + asset rows */
  .group { display: flex; flex-direction: column; }
  .g-head { display: flex; align-items: baseline; gap: 10px; padding: 4px 2px 6px;
            border-bottom: 1px solid var(--ink); }
  .g-head h3 { font-size: 0.95rem; flex: 1; }
  .g-share, .g-val { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-2); }
  .g-val { font-weight: 600; color: var(--ink); }
  .protocol-card { background: var(--surface); border: 1px solid var(--rule); border-top: 0; border-radius: 0 0 10px 10px; }
  .protocol-note { display: flex; align-items: center; gap: 8px; padding: 10px 12px; color: var(--ink-2); font-size: .78rem; }
  .protocol-note .flag { margin-left: auto; white-space: nowrap; }
  .protocol-rows { display: flex; flex-direction: column; }
  .protocol-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr .7fr; gap: 12px; padding: 12px; border-top: 1px solid var(--rule); align-items: center; }
  .protocol-row > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .protocol-row > div:first-child { gap: 0; }
  .protocol-row span { color: var(--ink-2); font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; }
  .protocol-row strong { overflow-wrap: anywhere; }
  .protocol-row small { color: var(--ink-2); font-family: var(--mono); font-size: .72rem; }
  @media (max-width: 620px) {
    .protocol-row { grid-template-columns: 1fr 1fr; }
    .protocol-row > div:first-child { grid-column: 1 / -1; }
  }

  /* The hidden section is a disclosure, so its header needs the affordance the
     asset rows have and none of the marker the browser adds. */
  .hidden-group > .g-head { cursor: pointer; list-style: none; align-items: center; }
  .hidden-group > .g-head::-webkit-details-marker { display: none; }
  .hidden-group[open] > .g-head .tick { transform: rotate(90deg); }

  .asset { border-bottom: 1px solid var(--rule); }
  .row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 15px 2px;
         background: none; border: 0; color: inherit; font: inherit; text-align: left;
         cursor: pointer; min-height: 58px; }
  .row:hover { background: var(--surface-raised); }
  .row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
  .tick { width: 0; height: 0; border-left: 5px solid var(--ink-3);
          border-top: 4px solid transparent; border-bottom: 4px solid transparent;
          flex: none; transition: transform .15s ease; }
  details[open] > .row .tick { transform: rotate(90deg); }
  .row::-webkit-details-marker, .t-toggle::-webkit-details-marker { display: none; }
  .row, .t-toggle { list-style: none; }
  .asset-link { display: flex; align-items: center; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
  /* Busy feedback belongs to the row that caused it, so a slow detail fetch
     cannot make the whole private report look unavailable. */
  .asset[aria-busy="true"] > .row { opacity: .72; }
  .asset-loader { width: 16px; height: 16px; margin-right: 15px; flex: 0 0 auto;
                  border: 2px solid var(--rule); border-top-color: var(--accent);
                  border-radius: 50%; font-size: 0; animation: asset-loader-spin .7s linear infinite; }
  @keyframes asset-loader-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    .asset-loader { animation: none; border-top-color: var(--rule); background: var(--accent); }
  }
  .a-name { flex: 1; min-width: 0; font-weight: 600; display: flex; align-items: center;
            gap: 9px; flex-wrap: wrap; overflow-wrap: anywhere; }
  /* Fixed box whether the image arrives, fails, or never existed: the icon is
     fetched after the row is painted, and a collapsing placeholder would shift
     every ticker sideways as they land. */
  .logo { width: 26px; height: 26px; border-radius: 50%; flex: none;
          object-fit: cover; background: var(--rule); }
  .logo.ph { display: inline-flex; align-items: center; justify-content: center;
             font-family: var(--sans); font-size: 0.62rem; font-weight: 700;
             letter-spacing: 0.02em; color: var(--ink-2); }
  /* URL-backed switches keep the filters shareable and usable without JavaScript. */
  .display-switch { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2);
                    text-decoration: none; white-space: nowrap; }
  .display-switch:hover { color: var(--ink); }
  .switch-track { width: 22px; height: 13px; padding: 2px; display: inline-flex;
                  align-items: center; border-radius: 99px; background: var(--ink-3); }
  .switch-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--surface);
                  transition: transform .15s ease; }
  .display-switch[aria-checked="true"] .switch-track { background: var(--accent); }
  .display-switch[aria-checked="true"] .switch-thumb { transform: translateX(9px); }
  .display-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
  /* Low-contrast by default: address selection is useful audit context, not the
     page's primary action, so it stays available without taking over the masthead. */
  .wallet-filter { align-self: flex-start; border: 1px solid var(--rule); border-radius: 9px; background: var(--surface); }
  .wallet-filter > summary { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer;
                              list-style: none; color: var(--ink-2); font-size: .78rem; }
  .wallet-filter > summary::-webkit-details-marker { display: none; }
  .wallet-filter > summary strong { color: var(--ink); font-weight: 600; }
  .wallet-filter > summary .tick { margin-left: 2px; }
  .wallet-filter[open] > summary .tick { transform: rotate(90deg); }
  .wallet-filter-form { display: flex; flex-direction: column; gap: 10px; padding: 10px; border-top: 1px solid var(--rule); min-width: min(320px, 78vw); }
  .wallet-filter-form fieldset { display: flex; flex-direction: column; gap: 7px; border: 0; margin: 0; padding: 0; }
  .wallet-filter-form legend { margin-bottom: 2px; color: var(--ink-2); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
  .wallet-option { display: grid; grid-template-columns: 18px 1fr auto; gap: 7px; align-items: center; font-size: .82rem; }
  .wallet-option small { color: var(--ink-3); font-family: var(--mono); }
  .wallet-filter-actions { display: flex; align-items: center; gap: 12px; }
  .wallet-filter-actions button { padding: 6px 10px; }
  .filter-note { color: var(--ink-2); font-size: .78rem; }
  .a-fig { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto;
           grid-template-areas: "price value" "price pnl"; column-gap: 16px;
           align-items: baseline; flex: none; line-height: 1.25; }
  /* Price is deliberately quieter than the position total, but comes first so
     each collapsed row reads as “unit price, then amount held”. Keeping it in
     its own column makes the relationship legible without another stacked line. */
  .a-px { grid-area: price; align-self: center; font-size: 0.76rem; color: var(--ink-2); white-space: nowrap; }
  .a-val { grid-area: value; font-weight: 600; font-size: 0.95rem; white-space: nowrap; }
  .a-pnl { grid-area: pnl; justify-self: end; font-size: 0.8rem; color: var(--ink-2); white-space: nowrap; }
  .a-pnl.up { color: var(--gain); } .a-pnl.down { color: var(--loss); }

  .flag, .chip { font-family: var(--sans); font-size: 0.62rem; font-weight: 600;
                 text-transform: uppercase; letter-spacing: 0.06em;
                 padding: 2px 6px; border-radius: 3px; }
  .flag { background: var(--flag-bg); color: var(--flag); }
  .chip { background: var(--sunk); color: var(--ink-2); }

  /* expanded detail */
  .detail { padding: 2px 2px 18px; display: flex; flex-direction: column; gap: 14px; }
  .facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
           background: var(--rule); border: 1px solid var(--rule); border-radius: 8px;
           overflow: hidden; margin: 0; }
  .facts > div { background: var(--surface); padding: 8px 11px; }
  .facts dt { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.07em;
              color: var(--ink-2); }
  .facts dd { margin: 0; font-size: 0.9rem; }
  .facts dd.flagged { color: var(--flag); font-weight: 600; }
  @media (min-width: 560px) { .facts { grid-template-columns: repeat(3, 1fr); } }

  .notes { font-size: 0.82rem; background: var(--sunk); border-radius: 10px; padding: 8px 12px; }
  .notes summary { cursor: pointer; color: var(--flag); font-weight: 600; }
  .notes ul { margin: 8px 0 0; padding-left: 18px; color: var(--ink-2); }
  .notes li { margin-bottom: 6px; }

  /* Second-level disclosure: reads as a control, not as a heading, so it is
     obvious there is something behind it. */
  .trades { display: flex; flex-direction: column; }
  .t-toggle { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 8px; width: 100%;
              min-height: 44px; padding: 9px 12px; cursor: pointer;
              background: var(--sunk); border: 1px solid var(--rule);
              border-radius: 8px; color: var(--ink); font: inherit; text-align: left; }
  .t-toggle:hover { border-color: var(--ink-3); }
  .t-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  details[open] > .t-toggle { border-radius: 8px 8px 0 0; border-bottom-color: transparent; }
  .t-label { font-size: 0.8rem; font-weight: 600; text-transform: uppercase;
             letter-spacing: 0.07em; }
  .t-split { margin-left: auto; font-family: var(--mono); font-size: 0.75rem;
             color: var(--ink-2); }
  .trades[open] > .fills-wrap { border: 1px solid var(--rule); border-top: 0;
                                border-radius: 0 0 8px 8px; padding: 0 12px 6px; }
  .fills { list-style: none; margin: 0; padding: 0; font-size: 0.8rem;
           display: flex; flex-direction: column; }
  /* Stacked records, not a wide table: a 9-column grid on a phone is unreadable
     and would scroll the page sideways. */
  .fill { display: grid; grid-template-columns: auto auto 1fr; gap: 2px 7px;
          padding: 8px 2px; border-top: 1px dotted var(--rule); align-items: baseline; }
  /* Phone: three deliberate lines — what & when / at what price / provenance —
     rather than letting seven fields wrap wherever they land. */
  .f-side { grid-column: 1; grid-row: 1; }
  .f-date { grid-column: 2; grid-row: 1; }
  .f-qty  { grid-column: 3; grid-row: 1; }
  .f-at   { display: none; }
  .f-px   { grid-column: 1 / 3; grid-row: 2; }
  .f-px::before { content: '@ '; color: var(--ink-3); }
  .f-val  { grid-column: 3; grid-row: 2; }
  .f-bal { grid-column: 3; grid-row: 3; text-align: right; }
  .f-bal::before { content: 'held '; color: var(--ink-3); }
  .f-meta { grid-column: 1 / 3; grid-row: 3; }
  .f-side { font-family: var(--sans); font-size: 0.6rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 5px;
            border-radius: 3px; }
  .f-side.buy { background: color-mix(in srgb, var(--gain) 15%, transparent); color: var(--gain); }
  .f-side.sell { background: color-mix(in srgb, var(--loss) 15%, transparent); color: var(--loss); }
  .f-date { color: var(--ink-2); }
  .f-qty { text-align: right; }
  .f-at { color: var(--ink-3); }
  .f-px { }
  .f-val { text-align: right; color: var(--ink-2); }
  /* The running holding. Bolder than the value beside it: this is the column a
     reader follows down the list to see where a position was built and unwound. */
  .f-bal { color: var(--ink); font-weight: 600; }
  .f-meta { grid-column: 1 / -1; font-family: var(--sans); font-size: 0.7rem;
            color: var(--ink-3); }
  .unres { color: var(--flag); }
  .tx { text-decoration: none; }
  .empty { color: var(--ink-3); font-size: 0.82rem; margin: 0; }
  @media (min-width: 560px) {
    .fill { grid-template-columns: auto auto auto auto auto auto auto 1fr; }
    .f-side { grid-column: auto; grid-row: auto; }
    .f-date, .f-qty, .f-px, .f-val, .f-bal, .f-meta { grid-column: auto; grid-row: auto; }
    .f-bal::before { content: none; }
    .f-at { display: inline; }
    .f-px::before { content: none; }
    .f-meta { text-align: right; }
  }

  /* A dedicated quantity column keeps long nicknames from running into balances. */
  .holding-list { list-style: none; padding: 0; margin: 12px 0; }
  .holding-row { display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(7ch, auto); align-items: center; gap: 8px 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .holding-location { min-width: 0; overflow-wrap: anywhere; }
  .holding-location strong { font-weight: 500; }
  .holding-location small { color: var(--ink-2); white-space: nowrap; }
  .network-icon { display: inline-flex; align-items: center; }
  .holding-qty { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .brokerage-row .holding-location { grid-column: 1 / 3; }
  .holding-mark { grid-column: 1 / -1; color: var(--ink-2); }
  @media (max-width: 420px) { .holding-location small { display: block; } .holding-row { column-gap: 8px; } }

  /* wallets */
  .wallets { list-style: none; margin: 0; padding: 0; display: flex;
             flex-direction: column; gap: 8px; }
  .wallets li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center;
                gap: 14px; background: var(--surface); border: 1px solid var(--rule);
                border-radius: 12px; padding: 14px 16px; }
  .wallet-main { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
  .w-label { font-weight: 600; font-size: 0.85rem; }
  .w-addr { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-2);
            word-break: break-all; }
  .status { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px;
            border-radius: 999px; font-size: .68rem; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
  .status-ready { background: var(--accent-soft); color: var(--accent); }
  .status-progress { background: var(--flag-bg); color: var(--flag); }
  /* The indexing line: state, then the bar, then the estimate under both. The
     status pill keeps its own line because the headline now carries a count, a
     rate and a date rather than two words. */
  .wallet-progress { display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
                     min-width: 0; }
  .wallet-progress .status { white-space: normal; text-align: left; letter-spacing: 0; }
  .wallet-bar { appearance: none; -webkit-appearance: none; width: min(260px, 100%); height: 5px;
                border: 0; border-radius: 999px; background: var(--flag-bg); overflow: hidden; }
  .wallet-bar::-webkit-progress-bar { background: var(--flag-bg); border-radius: 999px; }
  .wallet-bar::-webkit-progress-value { background: var(--flag); border-radius: 999px; }
  .wallet-bar::-moz-progress-bar { background: var(--flag); border-radius: 999px; }
  .wallet-detail { font-size: .7rem; line-height: 1.45; max-width: 62ch; }
  .wallet-detail:empty { display: none; }

  /* configuration */
  .settings-grid { display: flex; flex-direction: column; gap: 14px; }
  .setting-field { background: var(--surface); border: 1px solid var(--rule);
                   border-radius: 12px; padding: 14px 16px; display: flex;
                   flex-direction: column; gap: 8px; align-items: flex-start; }
  .setting-field .field { width: 100%; }
  .setting-field input { width: 100%; }
  .setting-label { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  /* Provenance, not decoration: three places can supply a value, and a field
     that does not say which one is winning is how an edit lands nowhere. */
  .setting-source { font-size: .62rem; font-weight: 700; letter-spacing: .04em;
                    text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
  .setting-source-database { background: var(--accent-soft); color: var(--accent); }
  .setting-source-variable { background: var(--flag-bg); color: var(--flag); }
  .setting-source-default { background: var(--rule); color: var(--ink-3); }
  .setting-help { font-size: .7rem; line-height: 1.45; max-width: 68ch; margin: 0; }

  footer { border-top: 1px solid var(--rule); padding-top: 14px;
           font-size: 0.78rem; color: var(--ink-3); display: flex;
           flex-direction: column; gap: 6px; }
  @media (max-width: 700px) {
    .wrap { padding-left: 16px; padding-right: 16px; }
    .app-header { min-height: 64px; margin-bottom: 36px; }
    .brand { font-size: .9rem; }
    .brand-mark { width: 26px; height: 26px; }
    .app-nav { gap: 0; }
    .app-nav a { padding: 7px 8px; font-size: .76rem; }
    .wallets li { grid-template-columns: 1fr auto; }
    .wallet .status { width: fit-content; white-space: normal; }
    .wallet-progress { grid-column: 1 / -1; grid-row: 2; }
    .wallet form { grid-column: 2; grid-row: 1; }
    .section-heading { gap: 12px; }
    .investment-form .field { flex-basis: calc(50% - 8px); }
    .investment-form button { width: 100%; }
    .g-head { align-items: flex-start; flex-direction: column; gap: 3px; }
    .g-share { font-size: .72rem; }
  }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

  /* Settings treats configuration as a sequence of focused work areas rather
     than one long form. The labels stay visible so values are never inferred
     from placeholder text. */
  .setting-section { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
  .setting-section + .setting-section { border-top: 1px solid var(--rule); padding-top: 28px; }
  .setting-section-scan { padding-bottom: 8px; }
  .section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
  .section-heading .muted { max-width: 650px; margin: 6px 0 0; }
  .section-index { font-family: var(--mono); color: var(--ink-3); font-size: .75rem; }
  .field { display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); font-size: .75rem; font-weight: 700; }
  .field input, .field select { width: 100%; box-sizing: border-box; background: var(--surface); color: var(--ink);
                                border: 1px solid var(--rule); border-radius: 8px; padding: 10px 11px;
                                font: inherit; font-weight: 500; min-height: 42px; }
  .field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
  .addwallet { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-top: 2px; }
  .addwallet input, .addwallet select { background: var(--surface); color: var(--ink); border: 1px solid var(--rule);
                                         border-radius: 8px; padding: 10px 11px; font: inherit; min-height: 42px; }
  .wallet-form .field { flex: 0 1 210px; }
  .wallet-form .field-address { flex: 1 1 360px; }
  .empty-panel { margin: 0; padding: 18px; border: 1px dashed var(--rule); border-radius: 10px; color: var(--ink-2); }
  .investments { list-style: none; margin: 0; padding: 0; display: flex;
                 flex-direction: column; gap: 10px; }
  .investment { background: var(--surface); border: 1px solid var(--rule);
                border-radius: 12px; overflow: hidden; }
  .investment details > summary { list-style: none; cursor: pointer; }
  .investment details > summary::-webkit-details-marker { display: none; }
  .investment details[open] > summary { border-bottom: 1px solid var(--rule); background: var(--surface-raised); }
  .investment-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
                        align-items: center; gap: 16px; padding: 14px 16px; }
  .investment-summary-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .investment-meta { font-size: .75rem; line-height: 1.35; }
  .investment-total { color: var(--ink-2); font-family: var(--mono); font-size: .78rem;
                      text-align: right; white-space: nowrap; }
  .investment-action { color: var(--ink-3); font-size: .68rem; font-weight: 700;
                       letter-spacing: .05em; text-transform: uppercase; }
  .investment-close-label { display: none; }
  .investment details[open] .investment-edit-label { display: none; }
  .investment details[open] .investment-close-label { display: inline; }
  .investment-body { padding: 0 16px 16px; }
  .investment p { margin: 4px 0 0; }
  .investment-form { margin-top: 14px; }
  .investment-form label { display: flex; flex: 1 1 120px; flex-direction: column;
                            gap: 6px; color: var(--ink-2); font-size: .75rem; font-weight: 700; }
  .investment-form input { min-width: 0; flex: 1 1 120px; }
  .investment-form select { flex: 0 0 auto; }
  .inline-form { margin-top: 8px; }
  .investment-create { border-top: 1px dashed var(--rule); padding-top: 12px; }
  .investment-create > summary { color: var(--ink-2); font-size: .78rem; font-weight: 700;
                                 cursor: pointer; list-style: none; }
  .investment-create > summary::-webkit-details-marker { display: none; }
  .investment-create > summary::before { content: '+'; display: inline-block; margin-right: 6px;
                                         color: var(--accent); font-size: 1rem; line-height: .7; }
  .investment-create[open] > summary::before { content: '−'; }
  .investment-create .investment-form { margin-top: 12px; }
  button { background: var(--sunk); color: var(--ink); border: 1px solid var(--rule);
           border-radius: 8px; padding: 9px 14px; font: inherit; cursor: pointer; min-height: 42px; font-weight: 700; }
  button:hover { border-color: var(--accent); transform: translateY(-1px); }
  button:active { transform: translateY(0); }
  button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .button-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .button-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
  .button-secondary { background: var(--accent); color: #fff; border-color: var(--accent); }
  .button-quiet { padding: 6px 10px; min-height: 34px; background: transparent; color: var(--ink-2); }
  .wallet { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .wallet .label { font-weight: 600; }
  .wallet form { margin-left: auto; }
  /* Renaming stays on its own row so the remove control cannot overlap its input. */
  .wallet-main { overflow-wrap: anywhere; }
  .wallet > form[action="/wallets/remove"] { grid-column: 3; grid-row: 1; }
  .wallet .wallet-nickname-form { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: end; gap: 10px; width: 100%; margin: 0; }
  .wallet-nickname-form .field { flex: 1; min-width: 0; }
  .wallet-nickname-form button { flex: 0 0 auto; min-height: 42px; }
  #stock-holdings .investment > details > summary { padding: 14px 16px; font-weight: 600; overflow-wrap: anywhere; }
  #stock-holdings .investment > details > summary::after { content: 'Edit'; float: right; margin-left: 12px; color: var(--ink-2); font-size: .75rem; }
  #stock-holdings .investment > details[open] > summary::after { content: 'Close'; }
  #stock-holdings .investment > details > p, #stock-holdings .investment > details > form { margin-left: 16px; margin-right: 16px; }
  #stock-holdings .investment > details > form:last-child { margin-bottom: 16px; }
  #stock-holdings .field small { font-weight: 400; line-height: 1.4; }
  #stock-holdings .investment-form .field { flex: 1 1 210px; min-width: 0; }
  #stock-holdings .investment-form input { flex: 0 0 auto; }
  @media (max-width: 700px) {
    .wallet > form[action="/wallets/remove"] { grid-column: 2; grid-row: 1; }
    .wallet .wallet-nickname-form { grid-column: 1 / -1; grid-row: 3; }
  }
  @media (max-width: 420px) {
    .wallet .wallet-nickname-form { flex-wrap: wrap; }
    .wallet-nickname-form .field { flex-basis: 100%; }
    #stock-holdings .investment-form .field { flex-basis: 100%; }
  }

  .muted { color: var(--ink-2); font-size: 0.86rem; }
  .mono { font-family: var(--mono); }
  .notice { background: var(--flag-bg); border-left: 3px solid var(--flag);
            border-radius: 0 8px 8px 0; padding: 10px 14px; font-size: 0.86rem; }
  /* Per-row hide control: a button that must not look like the asset's name. */
  .hide-form { display: inline; }
  .hide-form button { background: none; border: 0; color: var(--ink-3); font-size: 0.68rem;
                      text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 4px;
                      min-height: 0; }
  .hide-form button:hover { color: var(--accent); }
  /* The gap page. One card per asset, one record per event — the same stacked
     shape as a fill, because it is read the same way: down the list, on a
     phone. */
  .gap-asset { display: flex; flex-direction: column; gap: 12px;
               padding: 18px 0 28px; border-bottom: 1px solid var(--rule); }
  .gap-events { list-style: none; margin: 0; padding: 0; display: flex;
                flex-direction: column; gap: 8px; }
  .gap-event { background: var(--surface); border: 1px solid var(--rule);
               border-radius: 10px; padding: 12px 14px; display: flex;
               flex-direction: column; gap: 5px; }
  .ge-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .ge-kind { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
             color: var(--ink-2); }
  /* The two kinds that actually left or entered the portfolio read as findings;
     the rest are context and must not compete with them. */
  .ge-transfer-out, .ge-transfer-in { color: var(--flag); }
  .ge-date { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3); }
  .ge-qty { margin-left: auto; font-family: var(--mono); font-weight: 600;
            font-variant-numeric: tabular-nums; }
  .ge-body { display: flex; flex-direction: column; gap: 3px; }
  .ge-note { font-size: 0.8rem; color: var(--ink-2); }
  .ge-foot { display: flex; align-items: baseline; gap: 10px;
             font-family: var(--mono); font-size: 0.7rem; color: var(--ink-3); }
  .ge-contrib { margin-left: auto; }
  .gap-internal summary { font-size: 0.8rem; color: var(--ink-2); cursor: pointer;
                          padding: 4px 0; }
  .pager { display: flex; gap: 12px; align-items: center; padding: 8px 2px;
           font-family: var(--mono); font-size: 0.75rem; color: var(--ink-2); }
  .pager a { text-decoration: none; }

  .portfolio-history { padding: 18px 22px 14px; border-top: 1px solid var(--rule); }
  .history-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 9px; }
  .history-heading h2 { font-size: .9rem; letter-spacing: -.02em; }
  .history-periods { display: flex; flex-wrap: wrap; gap: 3px; padding: 3px; background: var(--paper); border-radius: 9px; }
  .history-periods a { padding: 7px 11px; text-decoration: none; color: var(--ink-2); font-size: .78rem; font-weight: 650; border-radius: 6px; }
  .history-periods a:hover { background: var(--sunk); }
  .history-periods a[aria-current="true"] { color: var(--accent); background: var(--accent-soft); }
  .history-periods a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .history-note, .history-change, .history-warning { font-size: .78rem; color: var(--ink-2); }
  .history-change { margin-top: 3px; }
  .history-plot { position: relative; }
  /* Vertical page scrolling stays native while horizontal dragging inspects values. */
  .history-plot .history-svg { touch-action: pan-y; cursor: crosshair; user-select: none; }
  .history-svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
  .history-cursor { stroke: var(--ink-3); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
  .history-tooltip { position: absolute; top: 0; right: 0; z-index: 1; max-width: min(260px, 75%); padding: 8px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); box-shadow: 0 3px 12px #00000014; pointer-events: none; }
  .history-tooltip-date, .history-tooltip-quality { display: block; font-size: .72rem; color: var(--ink-2); }
  .history-tooltip-value { display: block; font-family: var(--mono); font-size: .95rem; }
  .history-svg { display: block; width: 100%; height: auto; max-height: 200px; margin: 12px 0; overflow: visible; }
  .history-grid { stroke: var(--rule); stroke-width: 1; }
  .history-axis { font-family: var(--mono); fill: var(--ink-2); font-size: 12px; }
  .history-line { stroke: var(--accent); stroke-width: 2.5; fill: none; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .history-private { display: none; padding: 35px 0; color: var(--ink-2); text-align: center; }
  [data-private-amounts="true"] .history-private { display: block; }
  [data-private-amounts="true"] :is(.history-plot, .history-change) { display: none; }
  .history-empty { padding: 32px 0; color: var(--ink-2); font-size: .9rem; }
  .history-warning { color: var(--flag); margin: 10px 0; }
  .portfolio-history[aria-busy="true"] .history-periods { opacity: .6; }
  @media (max-width: 520px) {
    .portfolio-history { padding: 16px 12px; }
    .history-periods a { padding: 7px 10px; }
    .history-svg { min-height: 110px; }
    .history-axis { font-size: 24px; }
  }