@scope (.record-page) {
  :scope {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    max-width: 48rem;
    margin-inline: auto;
  }

  .record-page__back {
    margin-bottom: var(--space-sm);
    align-self: flex-start;
  }

  .record-page__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-lg);
    padding-inline: var(--space-xl);

    @media (width < 48rem) {
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-md);
      padding-inline: var(--space-md);
    }
  }

  .record-page__title {
    font-size: var(--text-heading-2);
    font-weight: var(--font-bold);
    color: var(--color-text-heading);
    display: flex;
    align-items: center;
    gap: var(--space-sm);

    @media (width < 48rem) {
      flex-wrap: wrap;
      font-size: var(--text-heading-3);
    }
  }

  .record-page__actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;

    form {
      display: inline;
    }

    @media (width < 48rem) {
      flex-wrap: wrap;
      width: 100%;

      .button {
        flex: 1;
        justify-content: center;
      }

      form {
        flex: 1;
        display: flex;

        .button {
          width: 100%;
        }
      }
    }
  }

  .record-page__card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-muted);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }

  .record-page__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg) var(--space-2xl);
    padding: var(--space-2xl) 0;

    @media (width < 48rem) {
      grid-template-columns: 1fr;
    }
  }

  .record-page__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .record-page__field--full {
    grid-column: 1 / -1;
  }

  .record-page__label {
    font-size: var(--text-label);
    font-weight: var(--font-medium);
    color: var(--color-text-secondary);
  }

  .record-page__value {
    font-size: var(--text-body);
    color: var(--color-text);
  }

  .record-page__value--empty {
    color: var(--color-text-muted);
  }

  .record-page__card-footer {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-lg) var(--space-2xl);
    border-top: 1px solid var(--color-border-muted);
    background: var(--color-surface-muted);

    form {
      display: inline;
    }
  }

  .record-page__spacer {
    margin-left: auto;
  }

  .record-page__section {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }

  .record-page__section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);

    h2 {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      font-size: var(--text-heading-4);
      font-weight: var(--font-semibold);
      color: var(--color-text-heading);
    }

    @media (width < 48rem) {
      flex-direction: row;
      align-items: center;
      gap: var(--space-sm);
      padding-inline: var(--space-xs);

      h2 {
        font-size: var(--text-heading-5);
      }
    }
  }

  .record-page__section-content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .record-page__section-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl) var(--space-lg);
    color: var(--color-text-muted);
    font-size: var(--text-body-sm);
  }

  .record-page__empty {
    color: var(--color-text-muted);
    font-size: var(--text-body-sm);
  }

  .record-page__nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .record-page__back {
      margin-bottom: 0;
    }
  }

  .record-page__nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }

  :scope.record-page--wide {
    max-width: 80rem;

    > .record-page__fields {
      grid-template-columns: repeat(4, 1fr);
      padding: 0;
      gap: var(--space-xl);

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

      @media (width < 48rem) {
        grid-template-columns: 1fr;
      }
    }
  }

  :scope.record-page--stacked {
    max-width: none;
    margin-inline: 0;
  }

  .record-page__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl) var(--space-3xl);
    padding-inline: var(--space-xl);

    @media (width < 64rem) {
      grid-template-columns: 1fr;
      padding-inline: var(--space-md);
    }
  }

  .record-page__grid .record-page__section {
    padding-bottom: var(--space-2xl);
    border-bottom: 1px solid var(--color-border);
  }

  .record-page__grid .record-page__section-header .icon {
    width: 1.25rem;
    min-width: 1.25rem;
    height: 1.25rem;
    min-height: 1.25rem;
    flex-shrink: 0;
    overflow: visible;
    color: var(--color-text-secondary);

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
  }

  .record-page__grid .record-page__fields {
    gap: var(--space-xl) var(--space-2xl);
  }

  .record-page__section--full {
    grid-column: 1 / -1;
  }

  .record-page--stacked .record-page__fields {
    padding: 0;
  }

  .record-page__header--rich {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .record-page__header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-lg);
    width: 100%;
  }

  .record-page__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-text);
    font-size: var(--text-body-sm);
  }

  .record-page__meta .badge,
  .record-page__meta .temperature-tag {
    font-size: var(--text-body-base);
    font-weight: var(--font-medium);
    padding: 0.25rem 0.75rem;
    min-height: 1.5rem;
    line-height: 1;
  }

  .record-page__meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
  }

  .record-page__meta-label {
    color: var(--color-text-secondary);
    font-weight: var(--font-medium);
  }

  .record-page__meta-icon {
    width: 1rem;
    min-width: 1rem;
    height: 1rem;
    min-height: 1rem;
    flex-shrink: 0;
    color: var(--color-text-secondary);
    overflow: visible;

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
  }

  .record-page__notes {
    color: var(--color-text);
    font-size: var(--text-body);
    line-height: 1.625;
  }

  .record-page__document-upload {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);

    .form-field__hint {
      flex-basis: 100%;
    }
  }

  .record-page__documents {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .record-page__document {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-surface-muted);
    border-radius: var(--radius-md);
    font-size: var(--text-body-sm);
  }

  .record-page__address-block {
    line-height: 1.625;
  }

  .record-page__shipping-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
  }

  .record-page__divider {
    border: none;
    border-top: 1px solid var(--color-border-muted);
  }

  .record-page__shipping-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .record-page__shipping-label {
    font-size: var(--text-body);
    font-weight: var(--font-semibold);
    color: var(--color-text-heading);
  }

  .record-page__shipping-phone {
    color: var(--color-text-secondary);
    font-size: var(--text-body-sm);
  }

  :scope.record-page--two-columns {
    .record-page__layout {
      display: grid;
      grid-template-columns: 24rem 1fr;
      gap: var(--space-2xl);
      align-items: start;

      @media (width < 64rem) {
        grid-template-columns: 1fr;
      }
    }

    .record-page__sidebar {
      display: flex;
      flex-direction: column;
      gap: var(--space-xl);
    }

    .record-page__main {
      display: flex;
      flex-direction: column;
      gap: var(--space-xl);
    }
  }

  .record-page__discard-banner {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    background: var(--color-error-muted);
    color: var(--color-error-text);
    border-radius: var(--radius-lg);
    font-size: var(--text-body);
  }

  .record-page__discard-banner .icon {
    width: 1.25rem;
    min-width: 1.25rem;
    height: 1.25rem;
    min-height: 1.25rem;
    flex-shrink: 0;
    overflow: visible;

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
  }

  .record-page__discard-banner-text {
    flex: 1;
  }

  .record-page__sale-callout {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-xl) var(--space-2xl);
    background: var(--color-success-muted);
    border-radius: var(--radius-lg);
    margin-inline: var(--space-xl);

    @media (width < 64rem) {
      margin-inline: var(--space-md);
    }

    @media (width < 48rem) {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  .record-page__sale-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .record-page__sale-amount {
    font-size: var(--text-heading-3);
    font-weight: var(--font-bold);
    color: var(--color-success-text);
    font-variant-numeric: tabular-nums;
  }

  .record-page__sale-status {
    font-size: var(--text-body-sm);
    color: var(--color-success-text);
  }

  .record-page__sale-actions {
    margin-left: auto;
    display: flex;
    gap: var(--space-sm);

    @media (width < 48rem) {
      margin-left: 0;
    }
  }

  .record-page__profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-2xl) var(--space-xl);
    border-bottom: 1px solid var(--color-border-muted);
    gap: var(--space-md);
  }

  .record-page__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border-radius: var(--radius-full);
    font-size: var(--text-heading-2);
    font-weight: var(--font-bold);
    color: var(--color-text-on-primary);
    line-height: 1;
    box-shadow: var(--shadow-sm);
    text-transform: uppercase;
  }

  .record-page__profile-name-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);

    h2 {
      font-size: var(--text-heading-4);
      font-weight: var(--font-bold);
      color: var(--color-text-heading);
      margin: 0;
      word-break: break-all;
    }

    p {
      font-size: var(--text-body-sm);
      color: var(--color-text-secondary);
      margin: 0;
      word-break: break-all;
    }
  }

  .record-page__profile-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xs);
    margin-top: var(--space-2xs);
  }

  .record-page__profile-details {
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);

    h3 {
      font-size: var(--text-caption);
      font-weight: var(--font-semibold);
      text-transform: uppercase;
      letter-spacing: var(--tracking-wide);
      color: var(--color-text-secondary);
      margin: 0;
    }

    dl {
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
      margin: 0;
    }

    .record-page__field {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);
    }

    .record-page__value {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      word-break: break-all;

      .icon {
        color: var(--color-text-secondary);
        width: 1.25rem;
        min-width: 1.25rem;
        height: 1.25rem;
        min-height: 1.25rem;
        flex-shrink: 0;
        overflow: visible;

        svg {
          width: 100%;
          height: 100%;
          overflow: visible;
        }
      }
    }
  }

  .record-page__card-footer--flex {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-lg) var(--space-2xl);
    border-top: 1px solid var(--color-border-muted);
    background: var(--color-surface-muted);
    justify-content: stretch;

    > * {
      flex: 1;
    }

    form {
      display: inline-flex;
      flex: 1;
    }
  }

  .record-page__security-summary {
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);

    h3 {
      font-size: var(--text-caption);
      font-weight: var(--font-semibold);
      text-transform: uppercase;
      letter-spacing: var(--tracking-wide);
      color: var(--color-text-secondary);
      margin: 0;
    }

    .record-page__security-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-md);
    }

    .record-page__security-stat {
      background: var(--color-surface-muted);
      padding: var(--space-md);
      border-radius: var(--radius-md);
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);

      span:first-child {
        font-size: var(--text-heading-3);
        font-weight: var(--font-bold);
        color: var(--color-text-heading);
      }

      span:last-child {
        font-size: var(--text-caption);
        color: var(--color-text-secondary);
      }
    }
  }

  .record-page__section-with-padding {
    padding: var(--space-xl);
  }

  .record-page__section-header--border {
    border-bottom: 1px solid var(--color-border-muted);
    padding-bottom: var(--space-md);
    margin-bottom: var(--space-sm);

    h2 {
      margin: 0;
      font-size: var(--text-heading-4);
    }
  }

  .record-page__subform {
    background: var(--color-surface-muted);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);

    h4 {
      font-size: var(--text-body-sm);
      font-weight: var(--font-semibold);
      margin-top: 0;
      margin-bottom: var(--space-sm);
      color: var(--color-text-heading);
    }

    .form-field__input {
      height: 2.85rem;
    }
  }
}