:root {
  color-scheme: light;
  --background: color-mix(in oklab, var(--neutral-1) 45%, var(--surface));
  --foreground: var(--neutral-2-on);
  --surface: #fff;
  --surface-foreground: var(--neutral-2-on);
  --surface-soft: color-mix(in oklab, var(--neutral-2) 55%, var(--surface));
  --surface-border: var(--neutral-3);
  --control-border: var(--neutral-5);
  --muted: var(--neutral-7);
  --accent: var(--secondary-8);
  --accent-foreground: var(--secondary-8-on);
  --tag-background: var(--secondary-2);
  --tag-foreground: var(--secondary-8);
  --danger: var(--error-7);
  --vote-dislike: var(--error-7);
  --vote-dislike-foreground: var(--error-7-on);
  --vote-neutral: var(--neutral-7);
  --vote-neutral-foreground: var(--neutral-7-on);
  --vote-like: var(--secondary-7);
  --vote-like-foreground: var(--secondary-7-on);
  --control-height: calc(var(--font-size-0) * 2.75);
  --panel-padding: max(var(--font-size-0), var(--size-2));
}

/* Palette “on” colors are text colors, not surfaces: primary-7-on stays
   white in BOTH schemes. Give dark mode its own semantic surface mapping. */
:root {
  &[data-color-scheme="dark"] {
    color-scheme: dark;
    --background: var(--neutral-1);
    --surface: var(--neutral-2);
    --surface-soft: var(--neutral-3);
    --surface-border: var(--neutral-4);
    --control-border: var(--neutral-7);
    --muted: var(--neutral-8);
    --danger: var(--error-8);
    --vote-dislike: var(--error-8);
    --vote-dislike-foreground: var(--error-8-on);
    --vote-neutral: var(--neutral-8);
    --vote-neutral-foreground: var(--neutral-8-on);
    --vote-like: var(--secondary-8);
    --vote-like-foreground: var(--secondary-8-on);
  }
}

* {
  box-sizing: border-box;
}

html {
  /* Keep the grid stable when a scrollbar appears. */
  scrollbar-gutter: stable;
  background: var(--background);
  color: var(--foreground);
  /* Use the complete local weight range, independent of optional web fonts. */
  font-family: var(--font-sans);
  line-height: 1.5;
}

body {
  min-block-size: 100vh;
  margin: 0;
}

.admin-page {
  .admin-table {
    overflow-x: auto;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    text-align: start;
  }

  th, td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--surface-border);
  }

  .admin-controls {
    display: grid;
    gap: 1rem;
    margin-block: 2rem;
  }

  fieldset {
    display: grid;
    gap: 0.75rem;
    min-inline-size: 0;
    padding: var(--panel-padding);
    border: 1px solid var(--surface-border);
    border-radius: 0.75rem;
    background: var(--surface);
  }

  input, select, button {
    min-block-size: var(--control-height);
    max-inline-size: 100%;
    padding: 0.5rem 0.75rem;
    font: inherit;
    color: var(--foreground);
    background: var(--surface);
    border: 1px solid var(--control-border);
    border-radius: 0.5rem;
  }

  button { cursor: pointer; }
  button:disabled { cursor: wait; opacity: 0.65; }
  .admin-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; }
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.login-page {
  display: grid;
  min-block-size: 100vh;
  padding: var(--panel-padding);
  place-items: center;
  background: radial-gradient(ellipse at top, var(--secondary-2), transparent 65%);

  .login-card {
    display: grid;
    gap: var(--size-2);
    inline-size: min(100%, 28rem);
    padding: max(var(--font-size-2), var(--size-5));
    color: var(--surface-foreground);
    background: var(--surface);
    border: var(--border-width-0) solid var(--surface-border);
    border-block-start: var(--border-width-2) solid var(--accent);
    border-radius: var(--border-radius-4);
    box-shadow: var(--shadow-4);

    > header {
      display: grid;
      gap: var(--size--2);

      p {
        margin: 0;
        color: var(--muted);
      }

      p:first-child {
        margin-block-end: var(--size-2);
        color: var(--accent);
        font-size: var(--font-size--1);
        font-weight: var(--font-weight-bold);
        letter-spacing: var(--font-letter-spacing-1);
        text-transform: uppercase;
      }
    }

    h1 {
      margin: 0;
      font-size: var(--font-size-5);
      letter-spacing: var(--font-letter-spacing--1);
      line-height: 1.2;
    }

    fieldset {
      display: grid;
      gap: var(--size-0);
      min-inline-size: 0;
      padding: 0;
      margin: 0;
      border: 0;

      legend {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
      }

      label {
        margin-block-start: var(--size-1);
        font-size: var(--font-size--1);
        font-weight: var(--font-weight-semi-bold);
      }

      input {
        inline-size: 100%;
        min-block-size: var(--control-height);
        padding: var(--size-0);
        color: var(--foreground);
        background: var(--surface-soft);
        border: var(--border-width-0) solid var(--control-border);
        border-radius: var(--border-radius-1);
        font: inherit;

        &:focus-visible {
          outline: var(--border-width-1) solid var(--accent);
          outline-offset: var(--border-width-1);
        }
      }
    }

    > button {
      min-block-size: var(--control-height);
      margin-block-start: var(--size-1);
      padding-inline: var(--size-2);
      color: var(--accent-foreground);
      background: var(--accent);
      border: 0;
      border-radius: var(--border-radius-1);
      font: inherit;
      font-weight: var(--font-weight-semi-bold);
      cursor: pointer;

      &:hover:not(:disabled) {
        background: var(--secondary-9);
      }

      &:disabled {
        cursor: wait;
        opacity: 0.6;
      }

      &:focus-visible {
        outline: var(--border-width-1) solid var(--accent);
        outline-offset: var(--border-width-1);
      }
    }

    #login-error {
      min-block-size: 1lh;
      color: var(--danger);
      font-size: var(--font-size--1);
    }
  }
}

/* Shared shell; Restate keeps the original Integrator layout and tokens. */
.app-page,
.properties-page {
  max-inline-size: 90rem;
  margin-inline: auto;
  padding: var(--panel-padding) var(--panel-padding) var(--size-6);

  h1, h2, h3, p, dl, dd {
    margin: 0;
  }

  > header {
    display: grid;
    gap: var(--size-1);
    padding-block-end: max(var(--font-size-3), var(--size-3));

    > p:not(.eyebrow) {
      max-inline-size: 55ch;
      color: var(--muted);
      font-size: var(--font-size-1);
      text-wrap: pretty;
    }

    .eyebrow {
      margin-block-start: max(var(--font-size-3), var(--size-2));
      color: var(--accent);
      font-size: var(--font-size--2);
      font-weight: var(--font-weight-bold);
      letter-spacing: var(--font-letter-spacing-2);
      text-transform: uppercase;
    }
  }

  .account-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--size-1);
    padding-block-end: var(--panel-padding);
    border-block-end: var(--border-width-0) solid var(--surface-border);

    .brand {
      display: grid;
      color: var(--accent);
      font-size: var(--font-size-2);
      font-weight: var(--font-weight-bold);
      letter-spacing: var(--font-letter-spacing--1);
      text-decoration: none;

      span {
        color: var(--muted);
        font-size: var(--font-size--2);
        font-weight: var(--font-weight-normal);
        letter-spacing: normal;
      }
    }

    .module-switcher {
      position: relative;
      min-inline-size: 0;

      summary {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 0.65rem;
        min-block-size: 44px;
        padding-block: 0.25rem;
        border-radius: var(--border-radius-1);
        list-style: none;
        cursor: pointer;

        &::-webkit-details-marker { display: none; }
        span { grid-column: 1 / -1; }
        &:hover { color: var(--foreground); }
      }

      &[open] .switcher-chevron { transform: rotate(180deg); }
    }

    .module-picker {
      position: absolute;
      inset-block-start: calc(100% + 0.5rem);
      inset-inline-start: 0;
      z-index: 10;
      display: grid;
      gap: 0.25rem;
      inline-size: min(19rem, calc(100vw - 2 * var(--panel-padding)));
      padding: 0.5rem;
      color: var(--foreground);
      background: var(--surface);
      border: 1px solid var(--control-border);
      border-radius: var(--border-radius-2);
      box-shadow: var(--shadow-4);

      .module-picker-label {
        padding: 0.5rem 0.75rem;
        color: var(--muted);
        font-size: var(--font-size--2);
        font-weight: var(--font-weight-semi-bold);
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      a {
        display: grid;
        gap: 0.125rem;
        min-block-size: 44px;
        padding: 0.75rem;
        color: var(--foreground);
        border-radius: var(--border-radius-1);
        text-decoration: none;

        span { color: var(--muted); font-size: var(--font-size--1); }
        &:hover { background: var(--surface-soft); }
        &[aria-current="true"] {
          color: var(--accent);
          background: var(--tag-background);
          box-shadow: inset 3px 0 var(--accent);
        }
      }

      .module-picker-home {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-block-start: 0.25rem;
        border-block-start: 1px solid var(--surface-border);
        border-radius: 0;
        color: var(--accent);
      }
    }
  }

  h1 {
    font-size: var(--font-size-7);
    letter-spacing: var(--font-letter-spacing--2);
    line-height: 1.15;
    text-wrap: balance;
  }

  > section {
    display: grid;
    gap: var(--size-2);

    > header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: var(--size-1);

      h2 {
        font-size: var(--font-size-2);
        line-height: 1.3;
        letter-spacing: var(--font-letter-spacing--1);
      }

      p {
        color: var(--muted);
        font-size: var(--font-size--1);
      }
    }
  }

  button {
    min-block-size: var(--control-height);
    padding: var(--size--2) var(--size-1);
    color: var(--accent);
    background: var(--surface);
    border: var(--border-width-0) solid var(--control-border);
    border-radius: var(--border-radius-1);
    font: inherit;
    font-size: var(--font-size--1);
    font-weight: var(--font-weight-semi-bold);
    cursor: pointer;
    transition: background var(--anim-duration-fast) var(--anim-ease-standard);

    &:hover:not(:disabled) {
      background: var(--tag-background);
    }

    &:disabled {
      cursor: wait;
    }
  }

  :is(button, a, summary):focus-visible {
    outline: var(--border-width-1) solid var(--accent);
    outline-offset: var(--border-width-1);
  }

  .request-status {
    display: block;
    min-block-size: 2lh;
    padding-block: var(--size--2);
    color: var(--muted);
    font-size: var(--font-size--1);

    /* Query progress is quiet; errors remain clearly distinguished. */
    &[data-has-error="true"] {
      color: var(--danger);
    }
  }

  .property-filters {
    padding: var(--panel-padding);
    background: var(--surface);
    border: var(--border-width-0) solid var(--surface-border);
    border-radius: var(--border-radius-3);
    box-shadow: var(--shadow-2);

    > header p {
      margin-block-start: var(--size--2);
    }

    fieldset {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--size-1);
      min-inline-size: 0;
      padding: 0;
      margin: 0;
      border: 0;
    }

    label, .filter-control {
      display: grid;
      align-content: start;
      gap: var(--size--2);
      min-inline-size: 0;
      font-size: var(--font-size--1);
      font-weight: var(--font-weight-medium);
    }

    input, select {
      min-inline-size: 0;
      inline-size: 100%;
      min-block-size: var(--control-height);
      padding: var(--size--2) var(--size-0);
      color: var(--foreground);
      background: var(--surface-soft);
      border: var(--border-width-0) solid var(--control-border);
      border-radius: var(--border-radius-1);
      font: inherit;
      font-size: var(--font-size-0);
      font-weight: var(--font-weight-normal);

      &::placeholder {
        color: var(--muted);
        opacity: 1;
      }

      &:focus-visible {
        background: var(--surface);
        outline: var(--border-width-1) solid var(--accent);
        outline-offset: var(--border-width-1);
      }
    }

    .advanced-filters {
      border-block-start: var(--border-width-0) solid var(--surface-border);

      summary {
        inline-size: fit-content;
        padding-block: var(--size-0);
        color: var(--accent);
        font-size: var(--font-size--1);
        font-weight: var(--font-weight-semi-bold);
        cursor: pointer;

        span {
          margin-inline-start: var(--size-0);
          color: var(--muted);
          font-weight: var(--font-weight-normal);
        }
      }

      &[open] summary {
        margin-block-end: var(--size-1);
      }
    }

    @media (width < 60rem) {
      fieldset {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (width < 22rem) {
      fieldset {
        grid-template-columns: minmax(0, 1fr);
      }
    }
  }

  .property-update-notice {
    /* Reserve space so live notifications never push the cards down. */
    block-size: 2lh;
    overflow: auto;
    overflow-anchor: none;
    color: var(--accent);
    font-size: var(--font-size--1);

    a {
      color: inherit;
      text-underline-offset: var(--border-width-2);
    }
  }

  .empty-state {
    display: grid;
    justify-items: center;
    gap: var(--size-1);
    padding: max(var(--font-size-4), var(--size-6)) var(--panel-padding);
    background: var(--surface);
    border: var(--border-width-0) dashed var(--control-border);
    border-radius: var(--border-radius-3);
    text-align: center;

    h3 {
      font-size: var(--font-size-2);
    }

    p {
      max-inline-size: 55ch;
      color: var(--muted);
    }
  }

  .property-pagination {
    display: grid;
    justify-items: center;
    gap: var(--size-1);
    min-block-size: var(--size-8);
    padding: var(--panel-padding);
    color: var(--muted);
    overflow-anchor: none;

    button {
      padding-inline: var(--size-3);
      color: var(--accent-foreground);
      background: var(--accent);
      border-color: var(--accent);

      &:hover:not(:disabled) {
        background: var(--secondary-9);
      }

      &:disabled {
        opacity: 0.6;
      }
    }

    p {
      min-block-size: 1lh;
      text-align: center;
      font-size: var(--font-size--1);
    }
  }

  .property-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: var(--panel-padding);
    padding: 0;
    margin: 0;
    list-style: none;

    > li {
      min-inline-size: 0;
    }
  }

  .property-card {
    display: grid;
    align-content: start;
    gap: var(--size-1);
    min-block-size: 100%;
    padding: 0 0 var(--panel-padding);
    color: var(--surface-foreground);
    background: var(--surface);
    border: var(--border-width-0) solid var(--surface-border);
    border-radius: var(--border-radius-3);
    box-shadow: var(--shadow-2);
    transition:
      border-color var(--anim-duration-fast) var(--anim-ease-standard),
      box-shadow var(--anim-duration-fast) var(--anim-ease-standard);

    .property-link {
      display: grid;
      gap: var(--size-1);
      min-inline-size: 0;
      color: inherit;
      text-decoration: none;
      border-radius: var(--border-radius-3);

      > :not(.property-preview) {
        margin-inline: var(--panel-padding);
      }

      &:hover h3 {
        color: var(--accent);
      }
    }

    .property-preview {
      display: block;
      inline-size: 100%;
      block-size: auto;
      aspect-ratio: 16 / 10;
      object-fit: cover;
      background: var(--surface-soft);
      border-radius: var(--border-radius-3) var(--border-radius-3) 0 0;
    }

    .preview-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--size--2);
      color: var(--accent);
      background: linear-gradient(135deg, var(--secondary-2), var(--surface-soft));
      font-size: var(--font-size-2);
      font-weight: var(--font-weight-semi-bold);

      span {
        color: var(--muted);
        font-size: var(--font-size--1);
        font-weight: var(--font-weight-normal);
      }
    }

    .property-link > header {
      display: grid;
      gap: var(--size--2);

      h3 {
        font-size: var(--font-size-2);
        letter-spacing: var(--font-letter-spacing--1);
        line-height: 1.3;
        /* Stable title space across live address updates. */
        block-size: 2lh;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow-wrap: anywhere;
      }

      p {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: var(--muted);
        font-size: var(--font-size--1);
      }
    }

    .property-type {
      max-inline-size: calc(100% - var(--panel-padding) * 2);
      inline-size: fit-content;
      padding: var(--border-width-2) var(--size--2);
      color: var(--tag-foreground);
      background: var(--tag-background);
      border-radius: var(--border-radius-6);
      font-size: var(--font-size--2);
      font-weight: var(--font-weight-semi-bold);
      overflow-wrap: anywhere;
    }

    .price {
      color: var(--foreground);
      font-size: var(--font-size-3);
      font-weight: var(--font-weight-bold);
      font-variant-numeric: tabular-nums;
      letter-spacing: var(--font-letter-spacing--1);
      overflow-wrap: anywhere;
    }

    dl {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--size--2);
      padding-block: var(--size-1);
      margin-inline: var(--panel-padding);
      border-block: var(--border-width-0) solid var(--surface-border);
    }

    dl > div {
      display: grid;
      gap: var(--size--2);
      overflow-wrap: anywhere;
    }

    dt {
      color: var(--muted);
      font-size: var(--font-size--2);
    }

    dd {
      font-size: var(--font-size--1);
      font-weight: var(--font-weight-semi-bold);
    }

    .property-vote {
      display: grid;
      gap: var(--size-0);
      min-inline-size: 0;
      padding: 0;
      margin: 0 var(--panel-padding);
      border: 0;

      legend {
        padding: 0 0 var(--size--2);
        font-size: var(--font-size--1);
        font-weight: var(--font-weight-semi-bold);
      }

      .vote-summary {
        display: flex;
        flex-wrap: wrap;
        gap: var(--size--2);
        color: var(--muted);
        font-size: var(--font-size--2);

        span {
          padding: var(--border-width-2) var(--size--2);
          background: var(--surface-soft);
          border-radius: var(--border-radius-1);
        }

        [data-vote="like"] {
          color: var(--vote-like);
          background: var(--secondary-1);
        }

        [data-vote="dislike"] {
          color: var(--vote-dislike);
          background: var(--error-1);
        }
      }

      .vote-pending {
        visibility: hidden;
        color: var(--muted);
        font-size: var(--font-size--2);
      }

      &.loading .vote-pending {
        visibility: visible;
      }

      .vote-options {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--size--2);
      }

      button {
        --vote-active: var(--vote-neutral);
        --vote-active-foreground: var(--vote-neutral-foreground);
        min-inline-size: 0;
        padding-inline: var(--size--2);
        color: var(--muted);
        background: var(--surface);

        &[data-vote="dislike"] {
          --vote-active: var(--vote-dislike);
          --vote-active-foreground: var(--vote-dislike-foreground);
        }

        &[data-vote="like"] {
          --vote-active: var(--vote-like);
          --vote-active-foreground: var(--vote-like-foreground);
        }

        &:hover:not(:disabled) {
          color: var(--vote-active);
          background: var(--surface-soft);
          border-color: var(--vote-active);
        }

        &[aria-pressed="true"] {
          color: var(--vote-active-foreground);
          background: var(--vote-active);
          border-color: var(--vote-active);
        }
      }
    }

    &:hover {
      /* Never transform the scroll anchor or its ancestors. */
      border-color: var(--control-border);
      box-shadow: var(--shadow-4);
    }
  }

  @media (width < 40rem) {
    .account-bar {
      .brand span {
        display: none;
      }
    }
  }

  @media (width < 30rem) {
    .account-bar {
      align-items: flex-start;
      gap: 0.75rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    button, .property-card {
      transition: none;
    }
  }
}

/* Shared apps use the same warm surfaces and olive accents as Restate. */
.app-page {
  a {
    color: var(--accent);
    text-underline-offset: 0.2em;
  }

  .module-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size--2);
    padding-block-end: var(--panel-padding);
    margin-block-end: var(--panel-padding);
    border-block-end: var(--border-width-0) solid var(--surface-border);

    a {
      display: flex;
      align-items: center;
      min-block-size: var(--control-height);
      padding: var(--size--2) var(--size-1);
      border-radius: var(--border-radius-1);
      font-size: var(--font-size--1);
      font-weight: var(--font-weight-semi-bold);
      text-decoration: none;

      &:hover {
        background: var(--tag-background);
      }

      &[aria-current="page"] {
        color: var(--accent-foreground);
        background: var(--accent);
      }
    }
  }

  .user-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--size-1);
    padding: var(--panel-padding);
    margin-block-end: var(--panel-padding);
    background: var(--surface);
    border: var(--border-width-0) solid var(--surface-border);
    border-radius: var(--border-radius-2);

    h2 { font-size: var(--font-size-1); }
    p { color: var(--muted); font-size: var(--font-size--1); }

    .account-actions {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--size--2);
    }

    .theme-control {
      display: flex;
      flex: none;
      gap: 2px;
      min-inline-size: 0;
      margin: 0;
      padding: 3px;
      background: var(--surface-soft);
      border: 1px solid var(--surface-border);
      border-radius: 999px;

      button {
        display: grid;
        place-items: center;
        inline-size: 44px;
        min-block-size: 44px;
        padding: 0;
        color: var(--muted);
        background: transparent;
        border: 0;
        border-radius: 50%;

        &[aria-pressed="true"] {
          color: var(--accent-foreground);
          background: var(--accent);
          box-shadow: var(--shadow-1);
        }

        &:hover:not(:disabled):not([aria-pressed="true"]) {
          color: var(--accent);
          background: var(--tag-background);
        }
      }

      &:disabled { opacity: 0.65; }
    }

    .theme-error {
      flex-basis: 100%;
      color: var(--danger);
      font-size: var(--font-size--1);
      &:empty { display: none; }
    }
  }

  .module-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--panel-padding);
  }

  .module-card {
    display: grid;
    gap: var(--size-1);
    padding: max(var(--panel-padding), var(--size-4));
    color: var(--foreground);
    background: var(--surface);
    border: var(--border-width-0) solid var(--surface-border);
    border-radius: var(--border-radius-3);
    box-shadow: var(--shadow-2);
    text-decoration: none;

    &:hover {
      border-color: var(--control-border);
      box-shadow: var(--shadow-4);
    }

    h2 { font-size: var(--font-size-4); }
    p { color: var(--muted); max-inline-size: 45ch; }
    .eyebrow { color: var(--accent); font-size: var(--font-size--1); }
    .module-action { margin-block-start: var(--size-2); color: var(--accent); font-weight: var(--font-weight-semi-bold); }
  }

  @media (width < 40rem) {
    .module-grid { grid-template-columns: minmax(0, 1fr); }
  }
}

.hyubucks-page {
  max-inline-size: 76rem;

  .account-overview {
    display: grid;
    gap: var(--panel-padding);
    min-inline-size: 0;
  }

  .balance-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--panel-padding);
    padding: max(var(--panel-padding), var(--size-4));
    background: linear-gradient(120deg, var(--secondary-2), var(--surface));
    border: var(--border-width-0) solid var(--surface-border);
    border-radius: var(--border-radius-3);

    > div { min-inline-size: 0; }
    h2 { color: var(--accent); font-size: var(--font-size--1); font-weight: var(--font-weight-semi-bold); }
  }

  .balance-value {
    margin-block: var(--size--2);
    color: var(--accent);
    font-size: var(--font-size-8);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--font-letter-spacing--1);
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .balance-unit { display: inline-block; margin-inline-start: 0.4em; font-size: var(--font-size-1); font-weight: var(--font-weight-medium); letter-spacing: normal; }
  .balance-note { color: var(--muted); font-size: var(--font-size--1); }
  .balance-actions { display: flex; flex-wrap: wrap; gap: var(--size--2); }
  .action-link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--control-height);
    padding: var(--size--2) var(--size-1);
    background: var(--surface);
    border: var(--border-width-0) solid var(--control-border);
    border-radius: var(--border-radius-1);
    font-size: var(--font-size--1);
    font-weight: var(--font-weight-semi-bold);
    text-decoration: none;

    &:hover { background: var(--tag-background); }
  }

  .account-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--panel-padding);
  }

  .account-panel {
    min-inline-size: 0;
    padding: var(--panel-padding);
    background: var(--surface);
    border: var(--border-width-0) solid var(--surface-border);
    border-radius: var(--border-radius-3);
    box-shadow: var(--shadow-2);
    scroll-margin-block-start: var(--panel-padding);

    > header {
      display: grid;
      gap: var(--size--2);
      padding-block-end: var(--panel-padding);
      border-block-end: var(--border-width-0) solid var(--surface-border);

      h2 { font-size: var(--font-size-2); letter-spacing: var(--font-letter-spacing--1); }
      p { color: var(--muted); font-size: var(--font-size--1); }
    }
  }

  .account-empty {
    display: grid;
    gap: var(--size--2);
    padding-block: max(var(--panel-padding), var(--size-4));
    h3 { font-size: var(--font-size-1); }
    p { color: var(--muted); font-size: var(--font-size--1); max-inline-size: 42ch; }
  }

  .activity-list {
    padding: 0;
    margin: 0;
    list-style: none;

    > li {
      display: grid;
      gap: var(--size--2);
      padding-block: var(--panel-padding);
      overflow-wrap: anywhere;
      + li { border-block-start: var(--border-width-0) solid var(--surface-border); }
    }
  }

  .activity-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--size-1);
    h3 { min-inline-size: 0; font-size: var(--font-size-0); font-weight: var(--font-weight-semi-bold); }
  }

  .activity-amount { max-inline-size: 55%; font-size: var(--font-size-1); font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; text-align: end; }
  .activity-amount[data-kind="deposit"] { color: var(--accent); }
  .activity-description { font-size: var(--font-size--1); white-space: pre-line; }
  .activity-meta { color: var(--muted); font-size: var(--font-size--2); }
  .status-badge {
    justify-self: start;
    padding: var(--border-width-2) var(--size--2);
    color: var(--muted);
    background: var(--surface-soft);
    border-radius: var(--border-radius-6);
    font-size: var(--font-size--2);
    font-weight: var(--font-weight-semi-bold);
    text-transform: capitalize;

    &[data-status="approved"], &[data-status="deposit"] { color: var(--tag-foreground); background: var(--tag-background); }
    &[data-status="rejected"] { color: var(--danger); background: var(--error-1); }
    &[data-status="pending"] { color: var(--primary-8); background: var(--primary-2); }
  }

  .request-actions, .activity-pagination, .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--size--2); }
  .request-actions { margin-block-start: var(--size--2); }
  .activity-pagination:has(button) { padding-block-start: var(--size-1); border-block-start: var(--border-width-0) solid var(--surface-border); }
  .primary-button {
    color: var(--accent-foreground);
    background: var(--accent);
    border-color: var(--accent);
    &:hover:not(:disabled) { background: var(--secondary-9); }
  }
  button:disabled { opacity: 0.6; }

  .form-panel { max-inline-size: 42rem; }
  .account-form {
    display: grid;
    gap: var(--panel-padding);
    label { display: grid; gap: var(--size--2); min-inline-size: 0; font-size: var(--font-size--1); font-weight: var(--font-weight-semi-bold); }
    .field-hint { color: var(--muted); font-size: var(--font-size--1); font-weight: var(--font-weight-normal); }
    input, textarea {
      inline-size: 100%;
      min-inline-size: 0;
      min-block-size: var(--control-height);
      padding: var(--size-0);
      color: var(--foreground);
      background: var(--surface-soft);
      border: var(--border-width-0) solid var(--control-border);
      border-radius: var(--border-radius-1);
      font: inherit;
      font-size: var(--font-size-0);
      font-weight: var(--font-weight-normal);
      &::placeholder { color: var(--muted); opacity: 1; }
      &:focus-visible { background: var(--surface); outline: var(--border-width-1) solid var(--accent); outline-offset: var(--border-width-1); }
    }
    textarea { resize: vertical; min-block-size: 7rem; }
    .form-actions { gap: var(--panel-padding); font-size: var(--font-size--1); }
    .primary-button { padding-inline: var(--size-3); }
  }

  #command-status { display: block; min-block-size: 1.5em; color: var(--accent); font-size: var(--font-size--1); overflow-wrap: anywhere; }

  @media (width < 48rem) {
    .account-columns { grid-template-columns: minmax(0, 1fr); }
  }
}