@layer organisms {
  .app-page {
    background:
      radial-gradient(circle at top left, rgb(255 255 255 / 0.28), transparent 18rem),
      radial-gradient(circle at bottom right, rgb(255 255 255 / 0.18), transparent 24rem),
      var(--color-brand-gradient-soft),
      var(--color-surface-muted);
  }

  .app-page__shell {
    min-height: calc(100dvh - 4.5rem);
  }

  .app-page__content {
    width: min(100% - 2rem, 94rem);
    margin: 0 auto;
    padding: clamp(var(--space-4), 2vw, var(--space-7));
  }

  .app-page__stack {
    display: grid;
    gap: clamp(var(--space-4), 2vw, var(--space-6));
  }

  .app-page__hero,
  .app-page__section,
  .app-page__panel {
    background:
      radial-gradient(circle at top right, rgb(255 255 255 / 0.38), transparent 24rem),
      linear-gradient(180deg, rgb(255 255 255 / 0.94), rgb(255 255 255 / 0.88));
  }

  .app-page__hero {
    display: grid;
    gap: var(--space-4);
  }

  .app-page__eyebrow {
    margin: 0;
    color: var(--color-brand-secondary);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .app-page__hero h1,
  .app-page__section h2,
  .app-page__panel h2 {
    margin: var(--space-2) 0 var(--space-3);
  }

  .app-page__hero h1 {
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1;
  }

  .app-page__hero p,
  .app-page__section p,
  .app-page__panel p {
    margin: 0;
    color: var(--color-text-muted);
  }

  .app-page__hero-grid,
  .app-page__split,
  .app-page__grid {
    display: grid;
    gap: clamp(var(--space-4), 2vw, var(--space-5));
  }

  .app-page__hero-grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(18rem, 0.7fr);
    align-items: start;
  }

  .app-page__split {
    grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr);
    align-items: start;
  }

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

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

  .app-page__stats {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  }

  .app-page__stat {
    display: grid;
    gap: var(--space-1);
    border: var(--border-width) solid rgb(51 204 204 / 0.16);
    border-radius: 1rem;
    background: rgb(255 255 255 / 0.88);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
  }

  .app-page__stat span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .app-page__stat strong {
    font-size: clamp(1.4rem, 2vw, 2rem);
    line-height: 1;
  }

  .app-page__section,
  .app-page__panel {
    display: grid;
    gap: var(--space-4);
    padding: clamp(var(--space-4), 2vw, var(--space-6));
  }

  .app-page__section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .app-page__section-head h2,
  .app-page__section-head h3 {
    margin: var(--space-1) 0 0;
  }

  .app-page__section-head h3 {
    font-size: clamp(1.15rem, 2vw, 1.5rem);
  }

  .app-page__card-list {
    display: grid;
    gap: var(--space-3);
  }

  .app-page__card {
    display: grid;
    gap: var(--space-3);
    border: var(--border-width) solid color-mix(in srgb, var(--color-brand-secondary) 14%, white);
    border-radius: 1rem;
    background: color-mix(in srgb, white 88%, var(--color-brand-primary) 12%);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
  }

  .app-page__card h3,
  .app-page__card h4 {
    margin: 0;
  }

  .app-page__card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .app-page__form {
    display: grid;
    gap: var(--space-4);
  }

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

  .app-page__actions,
  .app-header-actions,
  .app-inline-actions,
  .app-table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .app-page__actions {
    align-items: center;
  }

  .app-page__note {
    border-left: 4px solid var(--color-brand-secondary);
    border-radius: 0 1rem 1rem 0;
    background: color-mix(in srgb, white 80%, var(--color-brand-primary) 20%);
    color: var(--color-text-muted);
    padding: var(--space-4);
  }

  .app-page__empty {
    display: grid;
    gap: var(--space-3);
    align-content: start;
    border: var(--border-width) dashed var(--color-border-strong);
    border-radius: 1rem;
    background: rgb(255 255 255 / 0.72);
    color: var(--color-text-muted);
    padding: var(--space-5);
  }

  .app-page__results {
    display: grid;
    gap: var(--space-4);
  }

  .app-page__results table {
    margin-top: 0;
  }

  .app-page__chip {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-brand-primary) 16%, white);
    color: var(--color-brand-secondary);
    font-size: var(--font-size-sm);
    font-weight: 700;
    padding-inline: var(--space-3);
  }

  .app-user-menu {
    position: relative;
  }

  .app-user-menu__button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 3rem;
    border: var(--border-width) solid var(--ui-header-control-border);
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / 0.14);
    backdrop-filter: blur(10px);
    color: var(--ui-header-text);
    padding: 0.4rem 0.85rem 0.4rem 0.4rem;
  }

  .app-user-menu__button svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .app-user-menu__button:focus-visible,
  .app-user-menu__panel a:focus-visible,
  .app-header-actions .ui-button:focus-visible {
    outline: 2px solid #8a3b00;
    outline-offset: 3px;
    box-shadow:
      0 0 0 3px rgb(255 255 255 / 0.92),
      0 0 0 6px rgb(138 59 0 / 0.22);
  }

  .app-user-menu__badge {
    display: inline-grid;
    place-items: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 50%;
    background: var(--color-brand-primary);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: 800;
  }

  .app-user-menu__meta {
    display: grid;
    justify-items: start;
    gap: 0.1rem;
  }

  .app-user-menu__meta strong {
    color: var(--ui-header-text);
  }

  .app-user-menu__meta small {
    color: var(--ui-header-muted-text);
    font-size: var(--font-size-xs);
  }

  .app-user-menu__panel {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: var(--z-dropdown);
    min-width: 12rem;
    padding: var(--space-2);
  }

  .app-user-menu__panel a {
    display: block;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    padding: 0.7rem 0.85rem;
    text-decoration: none;
  }

  .app-user-menu__panel a:is(:hover, :focus-visible) {
    background: var(--color-surface-muted);
  }

  @media (max-width: 900px) {
    .app-page__hero-grid,
    .app-page__split,
    .app-page__grid--two,
    .app-page__grid--three,
    .app-page__form-grid {
      grid-template-columns: 1fr;
    }
  }
}