@layer reset, tokens, base, layout, components, states, utilities;

@layer tokens {
  :root {
    color-scheme: light dark;
    --canvas: #f4f6f8;
    --surface: #fbfcfe;
    --surface-subtle: #edf0f5;
    --surface-strong: #e2e6ed;
    --ink: #151821;
    --ink-soft: #323846;
    --muted: #5a6373;
    --placeholder: #687181;
    --line: #d8dde6;
    --line-strong: #bcc4d1;
    --control-border: #727d8f;
    --accent: #3157d5;
    --accent-hover: #2849b8;
    --accent-soft: #edf1ff;
    --accent-contrast: #f8faff;
    --positive: #08785b;
    --positive-soft: #e8f6f1;
    --negative: #b02d3f;
    --negative-soft: #fbecef;
    --warning: #8a5b08;
    --warning-soft: #fff4d7;
    --neutral-soft: #e9edf3;
    --chart-1: #3559c7;
    --chart-2: #b55d00;
    --chart-3: #087a5b;
    --chart-4: #a43f7b;
    --chart-5: #7a6800;
    --chart-6: #147998;
    --chart-7: #b23a35;
    --chart-8: #6550b8;
    --focus: #5072e7;
    --overlay: rgb(21 24 33 / 8%);
    --radius-control: 8px;
    --radius-panel: 12px;
    --radius-pill: 999px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --sidebar-width: 248px;
    --content-max: 1540px;
    --content-gutter: clamp(var(--space-4), 3vw, var(--space-6));
    --native-nav-height: calc(68px + env(safe-area-inset-bottom));
    --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --canvas: #0f1218;
      --surface: #171b23;
      --surface-subtle: #1f242e;
      --surface-strong: #292f3a;
      --ink: #f2f4f8;
      --ink-soft: #d8dde6;
      --muted: #aeb6c4;
      --placeholder: #939cab;
      --line: #303744;
      --line-strong: #46505f;
      --control-border: #748096;
      --accent: #8da2ff;
      --accent-hover: #a7b6ff;
      --accent-soft: #202947;
      --accent-contrast: #10131a;
      --positive: #62d2aa;
      --positive-soft: #16392f;
      --negative: #ff98a6;
      --negative-soft: #44232b;
      --warning: #f2c66d;
      --warning-soft: #3a301d;
      --neutral-soft: #252b35;
      --chart-1: #8da2ff;
      --chart-2: #f2a65a;
      --chart-3: #54d2a0;
      --chart-4: #e38ac4;
      --chart-5: #d8c85c;
      --chart-6: #68c7e5;
      --chart-7: #ff8a7a;
      --chart-8: #b69cff;
      --focus: #a6b5ff;
      --overlay: rgb(0 0 0 / 24%);
    }
  }
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    min-width: 320px;
    background: var(--canvas);
    -webkit-text-size-adjust: 100%;
  }

  body,
  h1,
  h2,
  h3,
  p {
    margin: 0;
  }

  button,
  input,
  select,
  textarea {
    margin: 0;
    font: inherit;
  }

  button,
  label[for],
  select {
    -webkit-tap-highlight-color: transparent;
  }

  button {
    border: 0;
  }

  img,
  svg {
    display: block;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
}

@layer base {
  body {
    min-height: 100dvh;
    overflow-x: clip;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
  }

  button,
  input,
  select,
  strong,
  td,
  .metric,
  .report-stat,
  .tax-gauge {
    font-variant-numeric: tabular-nums lining-nums;
  }

  button,
  .import-btn {
    cursor: pointer;
  }

  button:disabled,
  input:disabled,
  select:disabled {
    cursor: not-allowed;
    opacity: 0.52;
  }

  :focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
  }

  ::selection {
    background: var(--accent);
    color: var(--accent-contrast);
  }

  h1,
  h2,
  h3,
  strong {
    color: var(--ink);
  }

  h1 {
    max-width: 720px;
    font-size: clamp(2rem, 3.5vw, 3.35rem);
    font-weight: 680;
    letter-spacing: -0.045em;
    line-height: 1.02;
  }

  h2 {
    font-size: 1.08rem;
    font-weight: 680;
    letter-spacing: -0.018em;
    line-height: 1.25;
  }

  h3 {
    font-size: 0.9rem;
    font-weight: 650;
  }

  code {
    border-radius: 4px;
    background: var(--surface-subtle);
    padding: 0.15em 0.35em;
    color: var(--ink-soft);
    font-family: var(--font-mono);
    font-size: 0.9em;
  }

  p code {
    overflow-wrap: anywhere;
    white-space: normal;
  }
}

@layer layout {
  .auth-gate {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: grid;
    place-items: center;
    overflow-y: auto;
    background:
      radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 36%),
      var(--canvas);
    padding: max(var(--space-5), env(safe-area-inset-top)) max(var(--space-5), env(safe-area-inset-right)) max(var(--space-5), env(safe-area-inset-bottom)) max(var(--space-5), env(safe-area-inset-left));
  }

  .auth-gate[hidden],
  .app-startup[hidden] {
    display: none;
  }

  .auth-card {
    display: grid;
    width: min(100%, 460px);
    gap: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: 0 20px 60px var(--overlay);
    padding: clamp(var(--space-5), 6vw, var(--space-7));
  }

  .auth-card > img {
    width: 56px;
    height: 56px;
  }

  .auth-card h1 {
    margin-top: var(--space-1);
    font-size: clamp(1.55rem, 5vw, 2.15rem);
  }

  .auth-card form {
    display: grid;
    gap: var(--space-4);
  }

  .auth-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }

  .auth-card nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-size: 0.9rem;
  }

  html:not([data-auth-state="signed-in"]) .app-shell {
    visibility: hidden;
  }

  .app-startup {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    align-items: start;
    justify-items: center;
    min-height: 100dvh;
    overflow-y: auto;
    background: var(--canvas);
    padding: max(var(--space-5), env(safe-area-inset-top)) max(var(--space-5), env(safe-area-inset-right)) max(var(--space-5), env(safe-area-inset-bottom)) max(var(--space-5), env(safe-area-inset-left));
  }

  .app-startup-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4);
    align-items: center;
    width: min(100%, 480px);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    background: var(--surface);
    padding: var(--space-5);
    box-shadow: 0 18px 48px var(--overlay);
    margin-block: auto;
    overflow-wrap: anywhere;
  }

  .app-startup-card img {
    width: 52px;
    height: 52px;
  }

  .app-startup-card h2 {
    margin-top: var(--space-1);
    font-size: 1.2rem;
  }

  #appStartupMessage {
    margin-top: var(--space-2);
    color: var(--muted);
  }

  .app-startup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
  }

  .app-startup-actions > * {
    display: inline-flex;
    min-height: 44px;
    flex: 1 1 150px;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
  }

  html[data-app-state="ready"] .app-startup {
    display: none;
  }

  html[data-app-state="loading"] .app-shell,
  html[data-app-state="unavailable"] .app-shell {
    visibility: hidden;
  }

  html[data-app-state="unavailable"] .app-startup-card {
    border-color: color-mix(in srgb, var(--negative) 46%, var(--line));
  }

  html[data-app-state="unavailable"] .app-startup-card h2 {
    color: var(--negative);
  }

  .app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: 100dvh;
  }

  .authenticated-user {
    display: block;
    min-width: 0;
    color: var(--muted);
    font-size: 0.78rem;
    overflow-wrap: anywhere;
  }

  #signOutBtn {
    width: 100%;
  }

  @media (max-width: 440px) {
    .auth-actions {
      grid-template-columns: 1fr;
    }
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    height: 100dvh;
    min-height: 620px;
    border-right: 1px solid var(--line);
    background: var(--surface);
    padding-top: calc(var(--space-5) + env(safe-area-inset-top));
    padding-right: max(var(--space-4), env(safe-area-inset-right));
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
    padding-left: max(var(--space-4), env(safe-area-inset-left));
  }

  .content {
    container-name: content;
    container-type: inline-size;
    width: 100%;
    max-width: calc(var(--content-max) + 2 * var(--space-6));
    min-width: 0;
    margin-inline: auto;
    padding-top: 0;
    padding-right: max(var(--content-gutter), env(safe-area-inset-right));
    padding-bottom: var(--space-7);
    padding-left: max(var(--content-gutter), env(safe-area-inset-left));
  }

  .topbar {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(0, auto);
    gap: var(--space-6);
    align-items: end;
    border-bottom: 1px solid var(--line);
    padding: var(--space-6) 0 var(--space-5);
  }

  .page-heading {
    min-width: 0;
  }

  .page-heading h1 {
    overflow-wrap: anywhere;
  }

  .topbar-actions {
    display: none;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    max-width: 610px;
  }

  .topbar-actions.is-expanded {
    display: flex;
  }

  .topbar-tools {
    display: grid;
    gap: var(--space-2);
    justify-items: end;
  }

  .backup-encryption {
    max-width: 320px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    padding: var(--space-2) var(--space-3);
    background: var(--surface);
  }

  .backup-freshness-status {
    grid-column: 1 / -1;
    flex: 1 1 100%;
    margin: 0;
    border-left: 3px solid currentColor;
    padding: var(--space-2) var(--space-3);
    color: var(--muted);
    font-size: 0.74rem;
    overflow-wrap: anywhere;
  }

  .backup-freshness-status.success {
    color: var(--positive);
  }

  .backup-freshness-status.warning {
    color: var(--warning);
  }

  .backup-freshness-status.error {
    color: var(--negative);
  }

  .backup-verification-status {
    grid-column: 1 / -1;
    flex: 1 1 100%;
    width: 100%;
    margin: 0;
    text-align: left;
  }

  .backup-verification-status:not(:empty) {
    margin-top: 0;
  }

  .backup-encryption summary {
    min-height: 40px;
    cursor: pointer;
    font-weight: 700;
    align-content: center;
  }

  .backup-encryption[open] {
    display: grid;
    gap: var(--space-2);
    width: min(100%, 320px);
  }

  .backup-encryption label {
    display: grid;
    gap: var(--space-1);
    text-align: left;
  }

  .backup-encryption input,
  .backup-encryption button {
    width: 100%;
  }

  .tab-panel {
    display: none;
    padding-top: var(--space-5);
  }

  .tab-panel.active {
    display: block;
  }

  .metrics-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1.45fr) repeat(3, minmax(176px, 1fr));
    gap: var(--space-3);
  }

  .dashboard-flow {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-4);
  }

  .insights-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .allocation-panel {
    grid-column: span 2;
  }

  .form-grid,
  .workspace-grid {
    display: grid;
    grid-template-columns: minmax(340px, 0.78fr) minmax(0, 1.65fr);
    gap: var(--space-4);
    align-items: start;
  }

  .workspace-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.65fr);
  }

  .form-panel,
  .workspace-secondary {
    position: sticky;
    top: var(--space-4);
  }

  .reports-layout .workspace-secondary {
    align-self: start;
  }

  .field-row {
    display: grid;
    gap: var(--space-3);
  }

  .field-row.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field-row.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .field-row.four {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  }

  .list-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    min-width: 0;
  }

  .asset-catalog {
    min-width: 0;
  }

  .asset-catalog-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-3);
  }

  .asset-catalog-pagination p {
    margin: 0;
  }

  .asset-catalog-pagination button {
    min-height: 44px;
  }

  @container content (min-width: 861px) {
    #transactionForm .field-row.three {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #transactionForm .field-row.three > label:last-child {
      grid-column: 1 / -1;
    }
  }

  @container content (max-width: 1120px) {
    .metrics-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .insights-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .allocation-panel {
      grid-column: auto;
    }

    .topbar {
      grid-template-columns: 1fr;
      gap: var(--space-5);
    }

    .topbar-actions {
      justify-content: flex-start;
      max-width: none;
    }

    .topbar-tools {
      justify-items: start;
    }
  }

  @container content (max-width: 860px) {
    .form-grid,
    .workspace-grid,
    .insights-grid {
      grid-template-columns: 1fr;
    }

    .form-panel,
    .workspace-secondary {
      position: static;
    }

    .list-panel {
      grid-template-columns: 1fr;
    }

    .field-row.four {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @container content (max-width: 620px) {
    .insights-grid,
    .field-row.two,
    .field-row.three,
    .field-row.four {
      grid-template-columns: 1fr;
    }

    .panel-head {
      align-items: flex-start;
      flex-direction: column;
    }

    .allocation-layout {
      grid-template-columns: 1fr;
    }

    .metrics-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @container content (max-width: 330px) {
    .metrics-grid {
      grid-template-columns: 1fr;
    }
  }
}

@layer components {
  .skip-link {
    position: fixed;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 100;
    transform: translateY(-180%);
    border-radius: var(--radius-control);
    background: var(--ink);
    padding: var(--space-3) var(--space-4);
    color: var(--surface);
    font-weight: 700;
    text-decoration: none;
  }

  .skip-link:focus {
    transform: translateY(0);
  }

  .brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 40px;
    padding-inline: var(--space-2);
  }

  .brand-mark {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 9px;
  }

  .brand-copy {
    display: grid;
    min-width: 0;
  }

  .brand strong {
    overflow: hidden;
    font-size: 0.96rem;
    letter-spacing: -0.015em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .brand span {
    color: var(--muted);
    font-size: 0.74rem;
  }

  .nav-tabs {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .nav-tabs button {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    background: transparent;
    padding: 0 var(--space-3);
    color: var(--muted);
    text-align: left;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
  }

  .nav-icon,
  .disclosure-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  .nav-tabs button:hover {
    background: var(--surface-subtle);
    color: var(--ink);
  }

  .nav-tabs button.active {
    border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 680;
  }

  .sidebar-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    align-items: center;
    margin-top: auto;
    border-top: 1px solid var(--line);
    padding: var(--space-4) var(--space-2) 0;
  }

  .sidebar-footer > * {
    min-width: 0;
  }

  .sidebar-footer select,
  .shell-menu summary {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--control-border);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--ink-soft);
    font-size: 0.76rem;
    font-weight: 680;
  }

  .sidebar-footer select {
    padding-inline: var(--space-2);
  }

  .currency-control {
    display: block;
  }

  .shell-menu {
    position: relative;
  }

  .shell-menu summary {
    display: grid;
    cursor: pointer;
    list-style: none;
    place-items: center;
    padding-inline: var(--space-2);
    text-align: center;
  }

  .shell-menu summary::-webkit-details-marker {
    display: none;
  }

  .shell-menu[open] summary {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
  }

  .shell-menu-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + var(--space-2));
    z-index: 40;
    display: grid;
    width: max-content;
    max-width: min(300px, calc(100vw - 2 * var(--space-4)));
    gap: var(--space-1);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    background: var(--surface);
    box-shadow: 0 10px 32px var(--overlay);
    padding: var(--space-3);
    color: var(--ink-soft);
    font-size: 0.76rem;
  }

  .shell-menu-panel > span {
    color: var(--muted);
  }

  .account-menu .shell-menu-panel {
    width: min(300px, calc(100vw - 2 * var(--space-4)));
  }

  .shell-menu-action {
    width: 100%;
    margin-top: var(--space-2);
  }

  .account-profile-dialog {
    width: min(720px, calc(100vw - (2 * var(--space-4))));
    max-width: none;
    max-height: calc(100dvh - (2 * var(--space-4)));
    overflow-y: auto;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-panel);
    background: var(--surface);
    box-shadow: 0 24px 72px var(--overlay);
    padding: 0;
    color: var(--ink);
  }

  .account-profile-dialog::backdrop {
    background: color-mix(in srgb, var(--ink) 48%, transparent);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }

  .account-profile-card {
    display: grid;
    gap: var(--space-5);
    padding-top: max(var(--space-5), env(safe-area-inset-top));
    padding-right: max(var(--space-5), env(safe-area-inset-right));
    padding-bottom: max(var(--space-5), env(safe-area-inset-bottom));
    padding-left: max(var(--space-5), env(safe-area-inset-left));
  }

  .account-profile-head {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    justify-content: space-between;
  }

  .account-profile-head > div {
    min-width: 0;
  }

  .account-profile-head h2 {
    margin-top: var(--space-1);
    font-size: clamp(1.55rem, 3vw, 2.15rem);
  }

  .account-profile-head .muted {
    max-width: 62ch;
    margin-top: var(--space-2);
  }

  .account-profile-close {
    flex: 0 0 44px;
    padding: 0;
    font-size: 1.55rem;
  }

  .profile-facts,
  .profile-access {
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface-subtle);
    padding: var(--space-4);
  }

  .profile-facts h3,
  .profile-access h3 {
    font-size: 0.96rem;
  }

  .profile-facts dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin: var(--space-3) 0 0;
  }

  .profile-facts dl > div {
    min-width: 0;
  }

  .profile-facts dt {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-transform: uppercase;
  }

  .profile-facts dd {
    min-width: 0;
    margin: var(--space-1) 0 0;
    overflow-wrap: anywhere;
    color: var(--ink-soft);
    font-size: 0.82rem;
    font-weight: 650;
  }

  #accountProfileForm {
    display: grid;
    gap: var(--space-3);
  }

  #accountProfileFields {
    min-width: 0;
    border: 0;
    padding: 0;
  }

  #accountProfileFields legend {
    margin-bottom: var(--space-3);
    color: var(--ink);
    font-size: 0.96rem;
    font-weight: 720;
  }

  .profile-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .profile-form-grid label {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    min-width: 0;
  }

  .profile-form-grid small,
  .profile-privacy-note {
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.45;
  }

  .profile-field-full {
    grid-column: 1 / -1;
  }

  .profile-actions,
  .profile-access {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
  }

  .profile-actions {
    justify-content: flex-end;
  }

  .profile-access > div {
    min-width: 0;
    flex: 1 1 320px;
  }

  .profile-access .muted {
    max-width: 62ch;
    margin-top: var(--space-2);
    font-size: 0.78rem;
  }

  .profile-privacy-note {
    margin-top: calc(-1 * var(--space-2));
  }

  .purchase-lot-reconstruction-dialog {
    width: min(1040px, calc(100vw - (2 * var(--space-4))));
    max-width: none;
    max-height: calc(100dvh - (2 * var(--space-4)));
    overflow-y: auto;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-panel);
    background: var(--surface);
    box-shadow: 0 24px 72px var(--overlay);
    padding: 0;
    color: var(--ink);
  }

  .purchase-lot-reconstruction-dialog::backdrop {
    background: color-mix(in srgb, var(--ink) 52%, transparent);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }

  .purchase-lot-reconstruction-card {
    display: grid;
    gap: var(--space-5);
    padding-top: max(var(--space-5), env(safe-area-inset-top));
    padding-right: max(var(--space-5), env(safe-area-inset-right));
    padding-bottom: max(var(--space-5), env(safe-area-inset-bottom));
    padding-left: max(var(--space-5), env(safe-area-inset-left));
  }

  .purchase-lot-reconstruction-head {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    justify-content: space-between;
  }

  .purchase-lot-reconstruction-head > div {
    min-width: 0;
  }

  .purchase-lot-reconstruction-head h2 {
    margin-top: var(--space-1);
    font-size: clamp(1.55rem, 3vw, 2.15rem);
  }

  .purchase-lot-reconstruction-head .muted {
    max-width: 72ch;
    margin-top: var(--space-2);
  }

  .purchase-lot-reconstruction-close {
    flex: 0 0 44px;
    padding: 0;
    font-size: 1.55rem;
  }

  .purchase-lot-source,
  .purchase-lot-rules,
  .purchase-lot-preview {
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    padding: var(--space-4);
  }

  .purchase-lot-source {
    background: var(--surface-subtle);
  }

  .purchase-lot-source h3,
  .purchase-lot-preview h3 {
    margin-top: var(--space-1);
    font-size: 0.96rem;
  }

  .purchase-lot-source dl,
  .purchase-lot-preview-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
    margin: var(--space-4) 0 0;
  }

  .purchase-lot-source dl > div,
  .purchase-lot-preview-facts > div {
    min-width: 0;
    border-top: 1px solid var(--line);
    padding-top: var(--space-2);
  }

  .purchase-lot-source dt,
  .purchase-lot-preview-facts dt {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-transform: uppercase;
  }

  .purchase-lot-source dd,
  .purchase-lot-preview-facts dd {
    min-width: 0;
    margin: var(--space-1) 0 0;
    overflow-wrap: anywhere;
    color: var(--ink-soft);
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
    font-weight: 680;
  }

  .purchase-lot-rules {
    display: grid;
    gap: var(--space-2);
    border-color: color-mix(in srgb, var(--warning) 42%, var(--line));
    border-left: 4px solid var(--warning);
    background: color-mix(in srgb, var(--warning-soft) 52%, var(--surface));
    color: var(--ink-soft);
    font-size: 0.79rem;
  }

  .purchase-lot-rules strong {
    color: var(--warning);
  }

  #purchaseLotReconstructionForm {
    display: grid;
    gap: var(--space-4);
  }

  #purchaseLotReconstructionFields {
    display: grid;
    min-width: 0;
    gap: var(--space-3);
    border: 0;
    padding: 0;
  }

  #purchaseLotReconstructionFields > legend {
    margin-bottom: var(--space-1);
    color: var(--ink);
    font-size: 0.96rem;
    font-weight: 720;
  }

  .purchase-lot-rows {
    display: grid;
    gap: var(--space-3);
  }

  .purchase-lot-row {
    display: grid;
    gap: var(--space-3);
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-control);
    background: var(--surface-subtle);
    padding: var(--space-4);
  }

  .purchase-lot-row-head {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
  }

  .purchase-lot-row-head h3 {
    font-size: 0.88rem;
  }

  .purchase-lot-row-head .icon-btn {
    min-height: 44px;
    padding-inline: var(--space-3);
    font-size: 0.76rem;
  }

  .purchase-lot-fields {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .purchase-lot-note-field {
    grid-column: 1 / -1;
  }

  .purchase-lot-add {
    justify-self: start;
  }

  .purchase-lot-preview {
    display: grid;
    gap: var(--space-3);
    border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface));
  }

  .purchase-lot-preview-card {
    display: grid;
    gap: var(--space-3);
  }

  .purchase-lot-preview-card > div:first-child .muted {
    margin-top: var(--space-1);
    font-size: 0.76rem;
  }

  .purchase-lot-preview-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding-left: 1.35rem;
  }

  .purchase-lot-preview-list li {
    padding-left: var(--space-1);
  }

  .purchase-lot-preview-list li > span {
    display: block;
    overflow-wrap: anywhere;
    color: var(--ink-soft);
    font-size: 0.78rem;
  }

  .purchase-lot-remainder,
  .purchase-lot-preview-check {
    border-radius: var(--radius-control);
    padding: var(--space-3);
    font-size: 0.79rem;
  }

  .purchase-lot-remainder {
    border: 1px solid color-mix(in srgb, var(--warning) 38%, var(--line));
    background: var(--warning-soft);
    color: var(--ink-soft);
  }

  .purchase-lot-remainder strong {
    color: var(--warning);
  }

  .purchase-lot-preview-check {
    border: 1px solid color-mix(in srgb, var(--positive) 34%, var(--line));
    background: var(--positive-soft);
    color: var(--positive);
    font-weight: 680;
  }

  .purchase-lot-actions {
    position: sticky;
    bottom: calc(-1 * var(--space-5));
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-end;
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    padding: var(--space-3) 0 max(var(--space-3), env(safe-area-inset-bottom));
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .eyebrow {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.075em;
    text-transform: uppercase;
  }

  .section-kicker {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 680;
    letter-spacing: 0.01em;
  }

  .eyebrow {
    margin-bottom: var(--space-3);
  }

  .page-description {
    max-width: 660px;
    margin-top: var(--space-3);
    color: var(--muted);
    font-size: 0.98rem;
  }

  .ghost,
  .primary,
  .danger,
  .import-btn,
  .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 1px solid var(--control-border);
    border-radius: var(--radius-control);
    padding: 0 var(--space-4);
    font-size: 0.82rem;
    font-weight: 670;
    line-height: 1;
    white-space: nowrap;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
  }

  .ghost,
  .icon-btn,
  .import-btn.secondary {
    background: var(--surface);
    color: var(--ink-soft);
  }

  .ghost:hover,
  .icon-btn:hover,
  .import-btn.secondary:hover {
    border-color: var(--ink-soft);
    background: var(--surface-subtle);
    color: var(--ink);
  }

  .primary,
  .import-btn:not(.secondary) {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-contrast);
  }

  .primary:hover,
  .import-btn:not(.secondary):hover {
    border-color: var(--accent-hover);
    background: var(--accent-hover);
  }

  .danger {
    border-color: color-mix(in srgb, var(--negative) 35%, var(--line));
    background: var(--negative-soft);
    color: var(--negative);
  }

  .danger:hover {
    border-color: var(--negative);
  }

  #seedDataBtn {
    color: var(--negative);
  }

  .data-tools-toggle {
    display: inline-flex;
  }

.data-custody {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    padding: var(--space-3) 0;
    color: var(--muted);
    font-size: 0.74rem;
  }

  .data-custody strong {
    color: var(--ink-soft);
    font-weight: 680;
  }

  .browser-storage-durability {
    display: flex;
    flex: 1 1 28rem;
    align-items: center;
    gap: var(--space-2);
  }

  .browser-storage-status {
    margin: 0;
    overflow-wrap: anywhere;
  }

  .browser-storage-status.success {
    color: var(--positive);
  }

  .browser-storage-status.warning {
    color: var(--warning);
  }

  .browser-storage-status.error {
    color: var(--negative);
  }

  .browser-storage-durability button {
    flex: 0 0 auto;
    min-height: 44px;
  }

  .data-custody nav {
    display: flex;
    flex: 0 0 auto;
    gap: var(--space-3);
  }

  .data-custody a,
  .info-page a {
    color: var(--accent);
    font-weight: 680;
    text-underline-offset: 3px;
  }

  .info-page article a {
    position: relative;
  }

  .data-custody a,
  .info-page-header > a {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    padding-inline: var(--space-1);
  }

  .first-run-guide {
    display: flex;
    gap: var(--space-5);
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-panel);
    background: color-mix(in srgb, var(--accent-soft) 52%, var(--surface));
    padding: var(--space-5);
  }

  .first-run-guide[hidden] {
    display: none;
  }

  .first-run-guide h2 + p {
    max-width: 70ch;
    margin-top: var(--space-2);
    color: var(--muted);
    font-size: 0.84rem;
  }

  .first-run-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .csv-import-preview {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-4);
    border: 1px solid color-mix(in srgb, var(--warning) 32%, var(--line));
    border-left: 4px solid var(--warning);
    border-radius: var(--radius-panel);
    background: color-mix(in srgb, var(--warning-soft) 44%, var(--surface));
    padding: var(--space-5);
  }

  .csv-import-preview h2 {
    margin-top: var(--space-1);
    font-size: 1.05rem;
  }

  .csv-import-preview h2:focus-visible {
    border-radius: var(--radius-control);
    outline: 3px solid var(--focus);
    outline-offset: 3px;
  }

  .csv-import-preview .muted {
    max-width: 74ch;
    margin-top: var(--space-2);
  }

  .csv-import-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
  }

  .csv-import-preview-grid > div {
    min-width: 0;
    border-top: 1px solid var(--line);
    padding-top: var(--space-2);
  }

  .csv-import-preview-grid dt {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 680;
  }

  .csv-import-preview-grid dd {
    margin: var(--space-1) 0 0;
    overflow-wrap: anywhere;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
  }

  .import-btn {
    position: relative;
  }

  .import-btn input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .import-btn:focus-within {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
  }

  .metric,
  .panel,
  .account-card,
  .asset-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    background: var(--surface);
  }

  .metric {
    position: relative;
    display: grid;
    min-height: 146px;
    align-content: space-between;
    gap: var(--space-3);
    overflow: hidden;
    padding: var(--space-4);
  }

  .metric::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--line-strong);
    content: "";
  }

  .metric-total {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-contrast);
  }

  .metric-total::after {
    background: color-mix(in srgb, var(--accent-contrast) 62%, transparent);
  }

  .metric-total strong,
  .metric-total span,
  .metric-total small {
    color: inherit;
  }

  .metric-total .metric-head,
  .metric-total .metric-head span {
    color: var(--accent-contrast);
  }

  .metric-total .metric-head {
    opacity: 0.82;
  }

  .metric-unrealized.is-positive::after,
  .metric-realized.is-positive::after {
    background: var(--positive);
  }

  .metric-unrealized.is-negative::after,
  .metric-realized.is-negative::after {
    background: var(--negative);
  }

  .metric-head {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    align-items: baseline;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 640;
  }

  .metric strong {
    display: block;
    overflow-wrap: anywhere;
    font-size: clamp(1.45rem, 2.5vw, 2.2rem);
    font-weight: 690;
    letter-spacing: -0.045em;
    line-height: 1.05;
  }

  .metric-total strong {
    font-size: clamp(1.8rem, 3vw, 2.75rem);
  }

  .metric small {
    color: var(--muted);
    font-size: 0.76rem;
  }

  .metric-total > small {
    color: var(--accent-contrast);
    opacity: 0.82;
  }

  .panel {
    min-width: 0;
    padding: var(--space-5);
  }

  .quick-entry {
    margin-top: var(--space-4);
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 56%, var(--surface));
  }

  .quick-entry-summary {
    display: flex;
    min-height: 48px;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    list-style: none;
  }

  .quick-entry-summary::-webkit-details-marker {
    display: none;
  }

  .quick-entry-summary .disclosure-icon {
    color: var(--accent);
    transition: transform 140ms ease;
  }

  .quick-entry[open] .quick-entry-summary {
    margin-bottom: var(--space-5);
  }

  .quick-entry[open] .disclosure-icon {
    transform: rotate(180deg);
  }

  .quick-entry-section + .quick-entry-section {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
  }

  .quick-entry-section > h3 {
    margin-bottom: var(--space-2);
  }

  .quick-entry-section > .muted {
    margin-bottom: var(--space-4);
  }

  .panel-head {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    align-items: center;
    min-width: 0;
    margin-bottom: var(--space-5);
  }

  .panel-head h2 + p,
  .section-description {
    margin-top: var(--space-1);
  }

  .holding-controls {
    display: flex;
    min-width: 0;
    gap: var(--space-3);
    align-items: end;
  }

  .holding-sort {
    flex: 0 0 190px;
    gap: var(--space-1);
  }

  .holding-sort > span {
    color: var(--muted);
    font-size: 0.7rem;
  }

  .holding-sort select {
    min-height: 44px;
  }

  .section-heading {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
  }

  .section-kicker {
    margin-bottom: var(--space-1);
  }

  .section-description {
    color: var(--muted);
    font-size: 0.82rem;
  }

  .segmented {
    display: inline-flex;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface-subtle);
    padding: 3px;
    scrollbar-width: thin;
  }

  .segmented button {
    min-width: max-content;
    min-height: 44px;
    border-radius: 6px;
    background: transparent;
    padding: 0 var(--space-3);
    color: var(--muted);
    font-size: 0.77rem;
    font-weight: 650;
  }

  .segmented button.active {
    background: var(--surface);
    color: var(--accent);
    box-shadow: 0 1px 2px var(--overlay);
  }

  form {
    display: grid;
    gap: var(--space-4);
  }

  label {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    color: var(--ink-soft);
    font-size: 0.78rem;
    font-weight: 650;
  }

  .fx-confirmation {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface-subtle);
    padding: var(--space-4);
  }

  .fx-confirmation[hidden] {
    display: none;
  }

  .fx-confirmation legend {
    padding-inline: var(--space-2);
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 680;
  }

  .checkbox-field {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    min-height: 44px;
  }

  .checkbox-field input[type="checkbox"] {
    width: 22px;
    min-width: 22px;
    min-height: 22px;
    margin: 0;
    padding: 0;
  }

  input,
  select,
  textarea {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    border: 1px solid var(--control-border);
    border-radius: var(--radius-control);
    background: var(--surface);
    padding: 0 var(--space-3);
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 450;
    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
  }

  textarea {
    min-height: 116px;
    padding-block: var(--space-3);
    line-height: 1.5;
    resize: vertical;
  }

  input:hover,
  select:hover,
  textarea:hover {
    border-color: var(--muted);
  }

  input:focus,
  select:focus,
  textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
  }

  input[aria-invalid="true"],
  select[aria-invalid="true"],
  textarea[aria-invalid="true"] {
    border-color: var(--negative);
    background: color-mix(in srgb, var(--negative-soft) 42%, var(--surface));
  }

  input[aria-invalid="true"]:focus,
  select[aria-invalid="true"]:focus,
  textarea[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--negative) 18%, transparent);
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--placeholder);
    opacity: 1;
  }

  .form-actions,
  .inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .transaction-mobile-actions {
    display: none;
  }

  .table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface);
    scrollbar-color: var(--line-strong) transparent;
    scrollbar-width: thin;
  }

  .table-wrap:focus-visible {
    outline-offset: 2px;
  }

  .info-page-body {
    min-height: 100dvh;
    padding: max(var(--space-5), env(safe-area-inset-top))
      max(var(--space-4), env(safe-area-inset-right))
      max(var(--space-6), env(safe-area-inset-bottom))
      max(var(--space-4), env(safe-area-inset-left));
  }

  .info-page {
    width: min(100%, 760px);
    margin-inline: auto;
  }

  .info-page-header {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    padding-bottom: var(--space-5);
  }

  .info-page-header .brand {
    padding: 0;
    color: inherit;
    text-decoration: none;
  }

  .info-page article {
    display: grid;
    min-width: 0;
    gap: var(--space-5);
    padding-top: var(--space-6);
  }

  .info-page article > * {
    min-width: 0;
  }

  .info-page article > section {
    display: grid;
    gap: var(--space-2);
  }

  .info-page h1 {
    font-size: clamp(2rem, 7vw, 3.2rem);
  }

  .info-page h1,
  .info-page h2,
  .info-page p,
  .info-page li {
    overflow-wrap: anywhere;
  }

  .info-page p,
  .info-page li {
    color: var(--ink-soft);
  }

  .info-page ul,
  .info-page ol {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding-left: 1.25rem;
  }

  .info-page-meta {
    color: var(--muted) !important;
    font-size: 0.78rem;
  }

  .table-hint {
    display: none;
    margin-top: var(--space-2);
    color: var(--muted);
    font-size: 0.72rem;
  }

  .transaction-history-pagination,
  .tax-event-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-3);
  }

  .transaction-history-pagination p,
  .tax-event-pagination p {
    margin: 0;
  }

  .transaction-history-pagination button,
  .tax-event-pagination button {
    min-height: 44px;
  }

  table {
    width: 100%;
    min-width: 780px;
    background: var(--surface);
    font-size: 0.82rem;
  }

  #transactions table,
  #reports table {
    min-width: 680px;
  }

  th,
  td {
    border-bottom: 1px solid var(--line);
    padding: var(--space-3) var(--space-4);
    text-align: left;
    vertical-align: middle;
  }

  th {
    background: var(--surface-subtle);
    color: var(--muted);
    font-size: 0.71rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    white-space: nowrap;
  }

  td {
    color: var(--ink-soft);
  }

  tbody tr:last-child td {
    border-bottom: 0;
  }

  tbody tr:hover td {
    background: color-mix(in srgb, var(--accent-soft) 46%, var(--surface));
  }

  .holding-summary-row {
    cursor: pointer;
  }

  .holding-summary-row.is-expanded td {
    background: color-mix(in srgb, var(--accent-soft) 58%, var(--surface));
  }

  .holding-row-toggle {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border: 0;
    background: transparent;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .holding-row-toggle .asset-identity {
    flex: 1 1 auto;
  }

  .holding-row-toggle:focus-visible {
    border-radius: var(--radius-control);
    outline: 2px solid var(--accent);
    outline-offset: 4px;
  }

  .holding-toggle-chevron {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--accent);
    font-size: 1.1rem;
    line-height: 1;
    transition: transform 160ms ease;
  }

  .holding-row-toggle[aria-expanded="true"] .holding-toggle-chevron {
    transform: rotate(180deg);
  }

  .holding-detail-row td,
  .holding-detail-row:hover td {
    background: color-mix(in srgb, var(--accent-soft) 34%, var(--surface));
    padding: 0;
  }

  .holding-detail-panel {
    display: grid;
    gap: var(--space-3);
    border-left: 3px solid var(--accent);
    padding: var(--space-4);
  }

  .holding-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .holding-detail-fact {
    display: grid;
    min-width: 0;
    gap: 4px;
  }

  .holding-detail-fact span,
  .holding-detail-note {
    color: var(--muted);
    font-size: 0.72rem;
  }

  .holding-detail-fact strong {
    color: var(--ink);
    font-size: 0.82rem;
    overflow-wrap: anywhere;
  }

  .holding-detail-note {
    margin: 0;
  }

  .asset-identity {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 156px;
  }

  .holding-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
  }

  .holding-name {
    color: var(--ink);
    font-size: 0.91rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .holding-meta {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  .asset-avatar,
  .entity-avatar {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    border-radius: var(--radius-control);
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.67rem;
    font-weight: 750;
  }

  .asset-entity-avatar {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  .badge,
  .quality-badge,
  .transaction-kind,
  .gain-pill {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    border-radius: var(--radius-pill);
    font-size: 0.69rem;
    font-weight: 690;
    line-height: 1.2;
  }

  .badge {
    border: 1px solid var(--line);
    background: var(--surface-subtle);
    padding: 5px 9px;
    color: var(--muted);
  }

  .value-cell {
    display: grid;
    min-width: 144px;
    gap: 5px;
  }

  .value-cell small,
  .legend-item small,
  .rank-row small {
    color: var(--muted);
    font-size: 0.68rem;
  }

  .allocation-microbar,
  .legend-track,
  .rank-track {
    display: block;
    height: 3px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--surface-strong);
  }

  .allocation-microbar i,
  .legend-track i,
  .rank-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
  }

  .gain-pill {
    gap: var(--space-1);
    padding: 6px 9px;
  }

  .gain-pill.positive {
    background: var(--positive-soft);
    color: var(--positive);
  }

  .gain-pill.negative {
    background: var(--negative-soft);
    color: var(--negative);
  }

  .allocation-layout {
    display: grid;
    grid-template-columns: minmax(148px, 0.72fr) minmax(210px, 1.28fr);
    gap: var(--space-5);
    align-items: center;
  }

  .allocation-chart {
    display: grid;
    width: min(100%, 174px);
    aspect-ratio: 1;
    place-items: center;
    margin-inline: auto;
    border-radius: 50%;
    background: conic-gradient(var(--line) 0 100%);
  }

  .allocation-center {
    display: grid;
    width: 68%;
    aspect-ratio: 1;
    place-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    text-align: center;
  }

  .allocation-center span {
    color: var(--muted);
    font-size: 0.65rem;
  }

  .allocation-center strong {
    max-width: 92px;
    overflow-wrap: anywhere;
    font-size: 0.86rem;
    line-height: 1.15;
  }

  .legend,
  .compact-list,
  .ranked-list {
    display: grid;
    gap: var(--space-3);
  }

  .legend-item {
    display: grid;
    gap: 5px;
  }

  .legend-row,
  .rank-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    align-items: center;
  }

  .legend-row > span {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    min-width: 0;
    color: var(--ink-soft);
  }

  .legend-row > span > i {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 2px;
    background: var(--legend-color);
  }

  .legend-track i {
    background: var(--legend-color);
  }

  .ranked-item {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
  }

  .rank-number {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.68rem;
  }

  .rank-content {
    display: grid;
    gap: var(--space-2);
  }

  .rank-row > span:last-child {
    text-align: right;
  }

  .compact-list-item {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    align-items: flex-start;
    border-bottom: 1px solid var(--line);
    padding-bottom: var(--space-3);
    color: var(--ink-soft);
    font-size: 0.79rem;
  }

  .compact-list-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .report-quality-item {
    flex-wrap: wrap;
    align-items: center;
  }

  .report-quality-copy {
    flex: 1 1 20rem;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .report-quality-action {
    min-height: 44px;
    flex: 0 0 auto;
  }

  .report-quality-sublist {
    display: grid;
    gap: var(--space-3);
    margin-left: var(--space-4);
    border-left: 2px solid var(--line);
    padding-left: var(--space-4);
  }

  .report-quality-subitem {
    font-size: 0.76rem;
  }

  .report-quality-filter-status {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    align-items: center;
    border-bottom: 1px solid var(--line);
    padding-bottom: var(--space-3);
    color: var(--ink-soft);
    font-size: 0.78rem;
  }

  .quality-badge {
    flex: 0 0 auto;
    padding: 5px 8px;
  }

  .quality-badge.high {
    background: var(--negative-soft);
    color: var(--negative);
  }

  .quality-badge.medium {
    background: var(--warning-soft);
    color: var(--warning);
  }

  .quality-badge.low {
    background: var(--positive-soft);
    color: var(--positive);
  }

  .widget-panel > .muted {
    margin: calc(-1 * var(--space-3)) 0 var(--space-4);
  }

  .account-card,
  .asset-card {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
    padding: var(--space-4);
  }

  .entity-card-head,
  .card-head {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
  }

  .entity-title {
    display: grid;
    min-width: 0;
    margin-right: auto;
  }

  .entity-title strong,
  .entity-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .entity-title span {
    color: var(--muted);
    font-size: 0.74rem;
  }

  .entity-fact,
  .entity-price {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    align-items: baseline;
    border-top: 1px solid var(--line);
    padding-top: var(--space-3);
  }

  .entity-fact span,
  .entity-price span,
  .entity-price small,
  .card-meta {
    color: var(--muted);
    font-size: 0.74rem;
  }

  .entity-price strong {
    margin-left: auto;
    font-size: 1.05rem;
  }

  .entity-note {
    border-left: 3px solid var(--warning);
    border-radius: 0 var(--radius-control) var(--radius-control) 0;
    background: var(--warning-soft);
    padding: var(--space-2) var(--space-3);
    color: var(--warning);
    font-size: 0.74rem;
  }

  .price-editor {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .price-history-details {
    min-width: 0;
    border-top: 1px solid var(--line);
    padding-top: var(--space-3);
  }

  .price-history-details summary {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
  }

  .price-history-list,
  .price-history-anomalies {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
  }

  .price-history-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-3);
    border-bottom: 1px solid var(--line);
    padding-bottom: var(--space-2);
    font-size: 0.72rem;
  }

  .price-history-list small {
    grid-column: 1 / -1;
    color: var(--muted);
  }

  .price-history-anomalies {
    color: var(--negative);
    font-size: 0.72rem;
  }

  .icon-btn {
    min-height: 44px;
    padding-inline: var(--space-3);
    font-size: 0.76rem;
  }

  [data-delete-transaction],
  [data-delete-account],
  [data-delete-asset] {
    color: var(--negative);
  }

  .transaction-kind {
    gap: 6px;
    padding: 6px 9px;
  }

  .transaction-kind i {
    display: grid;
    width: 15px;
    height: 15px;
    place-items: center;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-style: normal;
  }

  .transaction-kind.incoming,
  .transaction-kind.income {
    background: var(--positive-soft);
    color: var(--positive);
  }

  .transaction-kind.outgoing,
  .transaction-kind.fee {
    background: var(--negative-soft);
    color: var(--negative);
  }

  .transaction-kind.transfer,
  .transaction-kind.neutral {
    background: var(--accent-soft);
    color: var(--accent);
  }

  .transaction-fx-fact {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 520;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(118px, 100%), 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
  }

  .report-stat {
    position: relative;
    display: grid;
    min-height: 112px;
    align-content: space-between;
    gap: var(--space-3);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    background: var(--surface-subtle);
    padding: var(--space-4);
  }

  .report-stat > span {
    color: var(--muted);
    font-size: 0.74rem;
  }

  .report-stat > strong {
    overflow-wrap: anywhere;
    font-size: 1.16rem;
    letter-spacing: -0.025em;
  }

  .report-stat-positive strong {
    color: var(--positive);
  }

  .report-stat-negative strong {
    color: var(--negative);
  }

  .tax-readiness-card {
    grid-row: span 1;
    place-items: center;
    padding: var(--space-3);
  }

  .tax-gauge {
    display: grid;
    width: 88px;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--tax-color, var(--positive)) var(--tax-score, 0deg), var(--surface-strong) 0);
  }

  .tax-gauge-center {
    display: grid;
    width: 72%;
    aspect-ratio: 1;
    place-content: center;
    border-radius: 50%;
    background: var(--surface);
    text-align: center;
  }

  .tax-gauge-center strong {
    font-size: 0.92rem;
  }

  .tax-score-breakdown {
    display: grid;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface-subtle);
    padding: var(--space-3) var(--space-4);
    font-size: 0.78rem;
  }

  .tax-score-breakdown p {
    margin: 0;
  }

  .tax-score-deductions {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .tax-score-deductions li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .tax-score-filter {
    display: flex;
    width: 100%;
    min-height: 44px;
    justify-content: space-between;
    gap: var(--space-3);
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    background: transparent;
    padding: var(--space-2);
    color: inherit;
    text-align: left;
  }

  .tax-score-filter:hover,
  .tax-score-filter[aria-pressed="true"] {
    border-color: var(--line-strong);
    background: var(--surface-strong);
  }

  .tax-score-formula {
    border-top: 1px solid var(--line);
    padding-top: var(--space-2);
    font-family: var(--font-mono);
    font-weight: 700;
  }

  .report-row-action {
    min-height: 44px;
    margin-top: var(--space-2);
    padding-inline: var(--space-2);
    font-size: 0.7rem;
  }

  .fifo-source-details {
    margin-top: var(--space-2);
  }

  .fifo-source-details summary {
    cursor: pointer;
    color: var(--muted);
  }

  .fifo-source-list {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
  }

  .fifo-source-item {
    display: grid;
    gap: var(--space-1);
  }

  .fifo-source-item .report-row-action {
    width: fit-content;
    margin-top: 0;
  }

  .report-evidence-head {
    margin-top: var(--space-6);
  }

  .report-evidence-head > div {
    min-width: 0;
  }

  .report-evidence-head h3 {
    overflow-wrap: anywhere;
  }

  .report-evidence-head .import-btn {
    flex: 0 1 auto;
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }

  .tax-gauge-center span {
    color: var(--muted);
    font-size: 0.61rem;
  }

  .status-message {
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    color: var(--muted);
    font-size: 0.8rem;
  }

  .status-message:not(:empty) {
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
  }

  .status-message-text {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  #dataQualityStatus {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-3);
    align-items: center;
  }

  #dataQualityStatus:not(:empty) {
    padding: var(--space-2) var(--space-3);
  }

  #dataQualityStatus.hidden {
    display: none;
  }

  #dataQualityStatus .status-message-text {
    font-weight: 680;
  }

  .status-message-expand {
    min-height: 44px;
    border: 1px solid currentColor;
    border-radius: var(--radius-control);
    background: transparent;
    padding-inline: var(--space-3);
    color: inherit;
    font-size: 0.76rem;
    font-weight: 700;
  }

  .data-quality-details {
    display: grid;
    grid-column: 1 / -1;
    gap: var(--space-3);
    border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent);
    padding-top: var(--space-3);
  }

  .data-quality-detail-text {
    max-width: 90ch;
    line-height: 1.55;
  }

  .data-quality-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .status-message-action {
    min-height: 44px;
    border: 1px solid currentColor;
    border-radius: var(--radius-control);
    background: transparent;
    padding-inline: var(--space-3);
    color: inherit;
    font-size: 0.76rem;
    font-weight: 700;
  }

  .status-message.error {
    border-color: color-mix(in srgb, var(--negative) 28%, var(--line));
    background: var(--negative-soft);
    color: var(--negative);
  }

  .status-message.success {
    border-color: color-mix(in srgb, var(--positive) 28%, var(--line));
    background: var(--positive-soft);
    color: var(--positive);
  }

  .status-message.warning {
    border-color: color-mix(in srgb, var(--warning) 28%, var(--line));
    background: var(--warning-soft);
    color: var(--warning);
  }

  #importStatus:not(:empty) {
    position: fixed;
    z-index: 80;
    right: max(var(--space-4), env(safe-area-inset-right));
    bottom: max(var(--space-4), env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: start;
    width: min(26rem, calc(100vw - (2 * var(--space-4))));
    max-height: min(45dvh, 18rem);
    overflow-y: auto;
    margin: 0;
    box-shadow: 0 16px 36px var(--overlay);
  }

  .status-message-dismiss {
    min-width: 44px;
    min-height: 44px;
    border: 1px solid currentColor;
    border-radius: var(--radius-control);
    background: transparent;
    padding-inline: var(--space-2);
    color: inherit;
    font-size: 0.76rem;
    font-weight: 700;
  }

  .empty-state {
    padding: var(--space-7) var(--space-5);
    color: var(--muted);
    text-align: center;
  }

  .muted {
    color: var(--muted);
    font-size: 0.8rem;
  }

  .code-block {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface-subtle);
    padding: var(--space-4);
    color: var(--ink-soft);
    font-family: var(--font-mono);
    font-size: 0.78rem;
  }
}

@layer states {
  [hidden] {
    display: none !important;
  }

  .positive {
    color: var(--positive) !important;
  }

  .negative {
    color: var(--negative) !important;
  }

  .hidden {
    display: none !important;
  }

  [aria-busy="true"] {
    cursor: progress;
  }

  [aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.52;
  }

  .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
}

@layer utilities {
  @media (max-width: 900px) {
    .purchase-lot-source dl,
    .purchase-lot-preview-facts,
    .purchase-lot-fields {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 620px) {
    .account-profile-dialog {
      width: calc(100vw - (2 * var(--space-2)));
      max-height: calc(100dvh - (2 * var(--space-2)));
    }

    .account-profile-card {
      gap: var(--space-4);
      padding: var(--space-4);
    }

    .profile-facts dl,
    .profile-form-grid {
      grid-template-columns: 1fr;
    }

    .profile-field-full {
      grid-column: auto;
    }

    .profile-actions {
      display: grid;
      grid-template-columns: 1fr;
    }

    .profile-actions button,
    .profile-access button {
      width: 100%;
    }

    .purchase-lot-reconstruction-dialog {
      width: calc(100vw - (2 * var(--space-2)));
      max-height: calc(100dvh - (2 * var(--space-2)));
    }

    .purchase-lot-reconstruction-card {
      gap: var(--space-4);
      padding: var(--space-4);
    }

    .purchase-lot-source dl,
    .purchase-lot-preview-facts,
    .purchase-lot-fields {
      grid-template-columns: 1fr;
    }

    .purchase-lot-note-field {
      grid-column: auto;
    }

    .purchase-lot-row {
      padding: var(--space-3);
    }

    .purchase-lot-add,
    .purchase-lot-actions button {
      width: 100%;
    }

    .purchase-lot-actions {
      bottom: calc(-1 * var(--space-4));
      display: grid;
      grid-template-columns: 1fr;
    }
  }

  @container content (max-width: 620px) {
    .panel-head {
      align-items: flex-start;
      flex-direction: column;
    }

    .allocation-layout {
      grid-template-columns: 1fr;
    }

  }

  @media (max-width: 1240px) {
    .app-shell {
      grid-template-columns: 1fr;
    }

    .sidebar {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: var(--space-4);
      align-items: center;
      min-height: 0;
      height: auto;
      border-right: 0;
      border-bottom: 1px solid var(--line);
      --shell-gutter: clamp(var(--space-4), 3vw, var(--space-6));
      padding-top: calc(var(--space-3) + env(safe-area-inset-top));
      padding-right: max(var(--shell-gutter), env(safe-area-inset-right));
      padding-bottom: var(--space-3);
      padding-left: max(var(--shell-gutter), env(safe-area-inset-left));
    }

    .nav-tabs {
      min-width: 0;
      flex-direction: row;
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      padding-bottom: 2px;
      scroll-padding-inline: var(--space-3);
      scroll-snap-type: inline proximity;
      scrollbar-color: var(--line-strong) transparent;
      scrollbar-width: thin;
    }

    .nav-tabs button {
      display: inline-flex;
      flex: 0 0 auto;
      min-width: max-content;
      scroll-snap-align: center;
    }

    .sidebar-footer {
      grid-template-columns: repeat(4, minmax(0, auto));
      margin: 0;
      border: 0;
      padding: 0;
    }

    .shell-menu-panel {
      top: calc(100% + var(--space-2));
      bottom: auto;
    }

    .content {
      max-width: none;
    }

    .form-panel,
    .workspace-secondary {
      top: 92px;
    }
  }

  @media (max-width: 760px) {
    .sidebar {
      grid-template-areas:
        "brand utilities"
        "nav nav";
      grid-template-columns: minmax(0, 1fr) auto;
      gap: var(--space-2) var(--space-3);
      --shell-gutter: var(--space-4);
    }

    .brand {
      grid-area: brand;
      padding: 0;
    }

    .nav-tabs {
      grid-area: nav;
      width: 100%;
      margin-inline: 0;
      padding: 0 0 var(--space-1);
      scrollbar-width: none;
    }

    .nav-tabs::-webkit-scrollbar {
      display: none;
    }

    .nav-tabs button {
      min-height: 44px;
      padding-inline: var(--space-4);
    }

    .sidebar-footer {
      grid-area: utilities;
      grid-template-columns: repeat(4, minmax(0, auto));
    }

    .content {
      --content-gutter: var(--space-4);
      padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
    }

    .topbar {
      gap: var(--space-4);
      padding: var(--space-5) 0 var(--space-4);
    }

    h1 {
      font-size: clamp(1.8rem, 9vw, 2.4rem);
    }

    .page-description {
      font-size: 0.9rem;
    }

    .topbar-tools {
      width: 100%;
      justify-items: stretch;
    }

    .data-tools-toggle {
      display: inline-flex;
      width: 100%;
    }

    .topbar-actions {
      display: none;
      width: 100%;
      max-width: none;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-2);
    }

    .topbar-actions.is-expanded {
      display: grid;
    }

    .topbar-actions > * {
      width: 100%;
      min-width: 0;
      padding-inline: var(--space-2);
    }

    .topbar-actions:has(#recoveryDownloadBtn:not(.hidden)) #resetDataBtn {
      grid-column: 1 / -1;
    }

    .data-custody {
      align-items: flex-start;
      flex-direction: column;
      gap: var(--space-2);
    }

    .browser-storage-durability {
      width: 100%;
      align-items: flex-start;
      flex-direction: column;
    }

    .first-run-guide {
      align-items: stretch;
      flex-direction: column;
      padding: var(--space-4);
    }

    .first-run-actions > * {
      flex: 1 1 180px;
    }

    input,
    select,
    textarea {
      font-size: 1rem;
    }

    .panel {
      padding: var(--space-4);
    }

    .metric {
      min-height: 118px;
    }

    .panel-head {
      margin-bottom: var(--space-4);
    }

    .holdings-panel .panel-head {
      gap: var(--space-3);
    }

    .holding-controls {
      width: 100%;
      align-items: stretch;
      flex-direction: column;
    }

    .holding-sort {
      width: 100%;
      flex-basis: auto;
    }

    .segmented {
      width: 100%;
    }

    .segmented button {
      flex: 1 0 auto;
      min-height: 44px;
    }

    html[data-runtime="native"] .segmented {
      display: grid;
      overflow: visible;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    html[data-runtime="native"] .segmented button {
      width: 100%;
      min-width: 0;
    }

    .report-grid {
      grid-template-columns: 1fr;
    }

    .tax-readiness-card {
      min-height: 126px;
    }

    table {
      min-width: 740px;
      font-size: 0.78rem;
    }

    .holdings-panel table {
      min-width: 680px;
    }

    #transactions table,
    #reports table {
      min-width: 650px;
    }

    #transactions .transaction-mobile-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-1);
      width: max-content;
      margin-top: var(--space-2);
    }

    #transactions .transaction-mobile-actions .icon-btn {
      min-height: 44px;
      padding-inline: var(--space-2);
    }

    #transactions th:last-child,
    #transactions td[data-label="Handlinger"] {
      display: none;
    }

    th,
    td {
      padding-inline: var(--space-3);
    }

    .asset-identity {
      min-width: 132px;
    }

    .value-cell {
      min-width: 124px;
    }

    .table-hint {
      display: block;
    }

    .table-wrap th:first-child,
    .table-wrap td:first-child {
      position: sticky;
      left: 0;
      z-index: 1;
      background: var(--surface);
      box-shadow: 1px 0 0 var(--line);
    }

    .table-wrap th:first-child {
      z-index: 2;
      background: var(--surface-subtle);
    }

    .table-wrap .holding-detail-row td:first-child {
      position: static;
      box-shadow: none;
    }

    .holding-detail-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html[data-runtime="native"] .table-wrap {
      overflow-x: visible;
      border: 0;
      background: transparent;
    }

    html[data-runtime="native"] .mobile-card-table,
    html[data-runtime="native"] #transactions .mobile-card-table,
    html[data-runtime="native"] #reports .mobile-card-table {
      display: block;
      width: 100%;
      min-width: 0;
      border-collapse: separate;
      background: transparent;
      font-size: 0.875rem;
    }

    html[data-runtime="native"] .mobile-card-table thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }

    html[data-runtime="native"] .mobile-card-table tbody {
      display: grid;
      width: 100%;
      gap: var(--space-3);
    }

    html[data-runtime="native"] .mobile-card-table tbody > tr {
      display: block;
      min-width: 0;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius-control);
      background: var(--surface);
    }

    html[data-runtime="native"] .mobile-card-table td[data-label] {
      position: static;
      display: grid;
      min-width: 0;
      grid-template-columns: minmax(7rem, 42%) minmax(0, 1fr);
      gap: var(--space-3);
      align-items: center;
      border-bottom: 1px solid var(--line);
      background: transparent;
      box-shadow: none;
      padding: var(--space-3);
      text-align: end;
      overflow-wrap: anywhere;
    }

    html[data-runtime="native"] .mobile-card-table td[data-label]::before {
      content: attr(data-label);
      color: var(--muted);
      font-size: 0.6875rem;
      font-weight: 680;
      letter-spacing: 0.02em;
      text-align: left;
    }

    html[data-runtime="native"] .mobile-card-table td[data-label="Instrument"],
    html[data-runtime="native"] .mobile-card-table td[data-label="Handlinger"] {
      grid-template-columns: 1fr;
      text-align: start;
    }

    html[data-runtime="native"] .mobile-card-table td[data-label="Instrument"] .asset-identity,
    html[data-runtime="native"] .mobile-card-table td[data-label="Instrument"] .table-cell-value,
    html[data-runtime="native"] .mobile-card-table td[data-label="Handlinger"] .inline-actions {
      justify-self: start;
      justify-content: flex-start;
      text-align: start;
    }

    html[data-runtime="native"] .mobile-card-table tbody > tr > td:last-child {
      border-bottom: 0;
    }

    html[data-runtime="native"] .mobile-card-table tbody > tr:hover td {
      background: transparent;
    }

    html[data-runtime="native"] .mobile-card-table .holding-summary-row.is-expanded {
      margin-bottom: calc(-1 * var(--space-3));
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }

    html[data-runtime="native"] .mobile-card-table .holding-detail-row {
      border-top: 0;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }

    html[data-runtime="native"] .mobile-card-table .holding-detail-row > td {
      display: block;
      width: 100%;
      border: 0;
      background: transparent;
    }

    html[data-runtime="native"] .mobile-card-table .holding-detail-panel {
      border-left: 0;
      border-top: 3px solid var(--accent);
    }

    html[data-runtime="native"] .mobile-card-table .empty-state {
      position: static;
      display: block;
      width: 100%;
      border: 0;
      box-shadow: none;
    }

    html[data-runtime="native"] .mobile-card-table .asset-identity,
    html[data-runtime="native"] .mobile-card-table .value-cell,
    html[data-runtime="native"] .mobile-card-table .table-cell-value {
      min-width: 0;
      max-width: 100%;
      justify-self: end;
      text-align: end;
    }

    html[data-runtime="native"] .mobile-card-table .gain-pill {
      max-width: 100%;
      flex-wrap: wrap;
      justify-self: end;
      justify-content: flex-end;
    }

    html[data-runtime="native"] .mobile-card-table .inline-actions {
      width: auto;
      max-width: 100%;
      justify-self: end;
      justify-content: flex-end;
    }

    html[data-runtime="native"] #transactions .transaction-mobile-actions {
      display: none;
    }

    html[data-runtime="native"] #transactions .mobile-card-table td[data-label="Handlinger"] {
      display: grid;
    }

    html[data-runtime="native"] #transactions .mobile-card-table th:last-child {
      display: table-cell;
    }

    html[data-runtime="native"] .table-hint {
      display: none;
    }
  }

  @media (max-width: 420px) {
    .brand span {
      display: none;
    }

    .brand .info-brand-copy {
      display: grid;
    }

    .info-brand-copy > span {
      display: none;
    }

    .brand-mark {
      width: 32px;
      height: 32px;
      flex-basis: 32px;
    }

    .brand strong {
      font-size: 0.9rem;
    }

    .ghost,
    .primary,
    .danger,
    .import-btn {
      min-height: 46px;
    }

    .inline-actions {
      width: 100%;
    }

    .csv-import-preview-grid {
      grid-template-columns: 1fr;
    }

    .info-page-header {
      align-items: flex-start;
      flex-direction: column;
    }
  }

  @media (max-width: 360px) {
    .topbar-actions {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 560px) {
    .sidebar {
      grid-template-areas:
        "brand"
        "utilities"
        "nav";
      grid-template-columns: minmax(0, 1fr);
    }

    .sidebar-footer {
      width: 100%;
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sidebar-footer select,
    .shell-menu summary,
    #signOutBtn {
      min-width: 0;
      padding-inline: var(--space-1);
      font-size: 0.7rem;
    }
  }

  html[data-onboarding="loading"] #dashboard > .metrics-grid,
  html[data-onboarding="loading"] #dashboard > .dashboard-flow,
  html[data-onboarding="pending"] #dashboard > .metrics-grid,
  html[data-onboarding="pending"] #dashboard > .dashboard-flow {
    display: none;
  }

  html[data-runtime="native"] .app-shell {
    grid-template-columns: 1fr;
  }

  html[data-runtime="native"] .sidebar {
    display: grid;
    grid-template-areas:
      "brand"
      "utilities";
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    align-items: center;
    width: 100%;
    min-height: 0;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding-top: calc(var(--space-3) + env(safe-area-inset-top));
    padding-right: max(var(--space-4), env(safe-area-inset-right));
    padding-bottom: var(--space-3);
    padding-left: max(var(--space-4), env(safe-area-inset-left));
  }

  html[data-runtime="native"] .brand {
    grid-area: brand;
    padding: 0;
  }

  html[data-runtime="native"] .brand-copy > span {
    display: none;
  }

  html[data-runtime="native"] .sidebar-footer {
    grid-area: utilities;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    margin: 0;
    border: 0;
    padding: 0;
  }

  html[data-runtime="native"] .nav-tabs {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    min-width: 0;
    overflow: visible;
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: 0 -8px 24px var(--overlay);
    padding-top: var(--space-2);
    padding-right: max(var(--space-2), env(safe-area-inset-right));
    padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
    padding-left: max(var(--space-2), env(safe-area-inset-left));
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    scrollbar-width: none;
  }

  html[data-runtime="native"] .nav-tabs button {
    display: flex;
    min-width: 0;
    min-height: 50px;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
    border-color: transparent;
    border-radius: var(--radius-control);
    padding: var(--space-1) 2px;
    font-size: 0.72rem;
    line-height: 1.1;
    text-align: center;
  }

  html[data-runtime="native"] .nav-tabs button:hover,
  html[data-runtime="native"] .nav-tabs button.active {
    border-color: transparent;
    background: transparent;
  }

  html[data-runtime="native"] .nav-tabs button > span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html[data-runtime="native"] .nav-icon {
    width: 21px;
    height: 21px;
    flex-basis: 21px;
  }

  html[data-runtime="native"] .content {
    max-width: none;
    padding-bottom: calc(var(--native-nav-height) + var(--space-4));
  }

  html[data-runtime="native"][data-onboarding="pending"] {
    scroll-padding-bottom: calc(var(--native-nav-height) + var(--space-5));
  }

  html[data-runtime="native"][data-onboarding="pending"] .content {
    padding-bottom: calc(var(--native-nav-height) + var(--space-6));
  }

  html[data-runtime="native"][data-onboarding="pending"] .first-run-guide {
    scroll-margin-bottom: calc(var(--native-nav-height) + var(--space-5));
  }

  html[data-runtime="native"] #importStatus:not(:empty) {
    bottom: calc(var(--native-nav-height) + var(--space-2));
  }

  html[data-runtime="native"] body {
    font-size: 16px;
  }

  html[data-runtime="native"] .eyebrow,
  html[data-runtime="native"] .section-kicker,
  html[data-runtime="native"] .data-custody,
  html[data-runtime="native"] .metric-head,
  html[data-runtime="native"] .metric small,
  html[data-runtime="native"] .table-hint,
  html[data-runtime="native"] .allocation-center span {
    font-size: 0.8125rem;
  }

  html[data-runtime="native"] .page-description {
    font-size: 1rem;
  }

  html[data-runtime="native"] .first-run-guide h2 + p {
    font-size: 0.9375rem;
  }

  html[data-runtime="native"] .first-run-actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html[data-runtime="native"] .first-run-actions > * {
    width: 100%;
    min-width: 0;
  }

  html[data-runtime="native"] .section-description {
    font-size: 0.875rem;
  }

  html[data-runtime="native"][data-text-scale="large"] .sidebar-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html[data-runtime="native"][data-text-scale="large"] .app-startup-card {
    grid-template-columns: 1fr;
    align-items: start;
  }

  html[data-runtime="native"][data-text-scale="large"] .app-startup-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  html[data-runtime="native"][data-text-scale="large"] .app-startup-actions > * {
    width: 100%;
    white-space: normal;
  }

  html[data-runtime="native"][data-text-scale="large"] .ghost,
  html[data-runtime="native"][data-text-scale="large"] .primary,
  html[data-runtime="native"][data-text-scale="large"] .danger,
  html[data-runtime="native"][data-text-scale="large"] .import-btn,
  html[data-runtime="native"][data-text-scale="large"] .icon-btn {
    height: auto;
    padding-block: var(--space-2);
    line-height: 1.25;
    white-space: normal;
  }

  html[data-runtime="native"][data-text-scale="large"] {
    --native-nav-height: calc(76px + env(safe-area-inset-bottom));
  }

  html[data-runtime="native"][data-text-scale="large"] .topbar-actions.is-expanded,
  html[data-runtime="native"][data-text-scale="large"] .metrics-grid {
    grid-template-columns: 1fr;
  }

  html[data-runtime="native"][data-text-scale="large"] .segmented {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html[data-runtime="native"][data-text-scale="large"] .mobile-card-table td[data-label] {
    grid-template-columns: 1fr;
    text-align: start;
  }

  html[data-runtime="native"][data-text-scale="large"] .holding-detail-grid {
    grid-template-columns: 1fr;
  }

  html[data-runtime="native"][data-text-scale="large"] .mobile-card-table .asset-identity,
  html[data-runtime="native"][data-text-scale="large"] .mobile-card-table .value-cell,
  html[data-runtime="native"][data-text-scale="large"] .mobile-card-table .table-cell-value,
  html[data-runtime="native"][data-text-scale="large"] .mobile-card-table .gain-pill,
  html[data-runtime="native"][data-text-scale="large"] .mobile-card-table .inline-actions {
    justify-self: start;
    justify-content: flex-start;
    text-align: start;
  }

  html[data-runtime="native"][data-text-scale="large"] .asset-card > *,
  html[data-runtime="native"][data-text-scale="large"] .entity-card-head,
  html[data-runtime="native"][data-text-scale="large"] .entity-price,
  html[data-runtime="native"][data-text-scale="large"] .entity-fact,
  html[data-runtime="native"][data-text-scale="large"] .price-editor {
    min-width: 0;
    max-width: 100%;
  }

  html[data-runtime="native"][data-text-scale="large"] .entity-card-head,
  html[data-runtime="native"][data-text-scale="large"] .entity-price,
  html[data-runtime="native"][data-text-scale="large"] .entity-fact {
    flex-wrap: wrap;
  }

  html[data-runtime="native"][data-text-scale="large"] .entity-price strong {
    margin-left: 0;
    overflow-wrap: anywhere;
  }

  html[data-runtime="native"][data-text-scale="large"] .price-editor {
    grid-template-columns: 1fr;
  }

  html[data-runtime="native"][data-text-scale="large"] .nav-tabs button {
    min-height: 58px;
  }

  html[data-runtime="native"][data-text-scale="large"] .nav-tabs button > span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: clip;
    white-space: normal;
  }

  @media (max-width: 420px) {
    html[data-runtime="native"][data-text-scale="large"] .nav-tabs button > span {
      font-size: 0.5625rem;
    }
  }

  @media (max-width: 420px) and (max-height: 740px) {
    html[data-runtime="native"] .sidebar {
      padding-top: calc(var(--space-2) + env(safe-area-inset-top));
      padding-bottom: var(--space-2);
    }

    html[data-runtime="native"] .topbar {
      gap: var(--space-3);
      padding-top: var(--space-3);
      padding-bottom: var(--space-3);
    }

    html[data-runtime="native"] .tab-panel {
      padding-top: var(--space-3);
    }

    html[data-runtime="native"] .first-run-guide {
      gap: var(--space-3);
      padding: var(--space-3);
    }

    html[data-runtime="native"] .first-run-guide h2 + p {
      margin-top: var(--space-1);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    html[data-runtime="native"] .nav-tabs {
      background: var(--surface);
      box-shadow: 0 -1px 0 var(--line);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }

  @media (pointer: coarse) {
    .info-page article a::after {
      content: "";
      position: absolute;
      top: 50%;
      right: -6px;
      left: -6px;
      height: 44px;
      transform: translateY(-50%);
    }
  }

  @media print {
    .sidebar,
    .data-custody,
    .data-tools-toggle,
    .topbar-actions,
    .quick-entry,
    .segmented,
    .inline-actions {
      display: none !important;
    }

    .app-shell {
      display: block;
    }

    .content {
      max-width: none;
      padding: 0;
    }

    .panel,
    .metric {
      break-inside: avoid;
      border-color: #aab0ba;
    }
  }
}