/*
 * Advertisement Intelligence canonical design system
 * Baseline: CHG-010 with CHG-013 browser-access extension
 *
 * This is the only approved source for product UI tokens and primitive styles.
 * Read ../DESIGN.md and ../AGENTS.md before changing this file.
 */

@layer ai-reset, ai-tokens, ai-base, ai-layout, ai-components, ai-utilities, ai-responsive;

@layer ai-tokens {
  :root {
    color-scheme: light;

    /* Brand and neutral colors */
    --ai-canvas: #f5f1e8;
    --ai-surface: #fffdf8;
    --ai-surface-subtle: #ece5d9;
    --ai-surface-strong: #d8d0c2;
    --ai-ink: #171614;
    --ai-ink-soft: #24211d;
    --ai-text-muted: #625d55;
    --ai-border: #d8d0c2;
    --ai-border-strong: #b5aa9a;
    --ai-brand-gold: #9b681d;
    --ai-brand-gold-text: #71480d;
    --ai-on-dark: #fffdf8;
    --ai-on-dark-muted: #d8d0c2;
    --ai-nav-surface: #24211d;
    --ai-nav-text: #fffdf8;
    --ai-nav-muted: #d8d0c2;
    --ai-nav-active-surface: #fffdf8;
    --ai-nav-active-text: #171614;
    --ai-selection-bg: #71480d;
    --ai-selection-text: #fffdf8;

    /* Semantic colors */
    --ai-success: #526156;
    --ai-success-surface: #e7eee8;
    --ai-success-border: #9eaea1;
    --ai-warning: #7a4c00;
    --ai-warning-surface: #fff0cf;
    --ai-warning-border: #d5aa58;
    --ai-danger: #a5362e;
    --ai-danger-strong: #7d251f;
    --ai-danger-surface: #f9e3df;
    --ai-danger-border: #d99a92;
    --ai-info: #335d7e;
    --ai-info-surface: #e3edf4;
    --ai-info-border: #9bb5c8;
    --ai-estimated: #5c4b7d;
    --ai-estimated-surface: #ece7f4;
    --ai-estimated-border: #b9acd0;
    --ai-unavailable: #625d55;
    --ai-unavailable-surface: #ece9e3;
    --ai-unavailable-border: #c9c1b6;

    /* Data visualization */
    --ai-chart-1: #24211d;
    --ai-chart-2: #9b681d;
    --ai-chart-3: #335d7e;
    --ai-chart-4: #526156;
    --ai-chart-5: #5c4b7d;
    --ai-chart-6: #8b4b32;
    --ai-chart-grid: #d8d0c2;

    /* Typography */
    --ai-font-display: "Iowan Old Style", Baskerville, "Palatino Linotype",
      "Book Antiqua", "Times New Roman", serif;
    --ai-font-body: Inter, "Avenir Next", "Segoe UI", "Helvetica Neue", Arial,
      sans-serif;
    --ai-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo,
      monospace;
    --ai-text-display: clamp(2.5rem, 5vw, 4.75rem);
    --ai-text-h1: clamp(2rem, 3vw, 3rem);
    --ai-text-h2: clamp(1.5rem, 2vw, 2rem);
    --ai-text-h3: 1.25rem;
    --ai-text-body-lg: 1.125rem;
    --ai-text-body: 1rem;
    --ai-text-small: 0.875rem;
    --ai-text-caption: 0.75rem;
    --ai-leading-tight: 1.08;
    --ai-leading-heading: 1.2;
    --ai-leading-body: 1.6;
    --ai-leading-compact: 1.4;

    /* Spacing */
    --ai-space-1: 0.25rem;
    --ai-space-2: 0.5rem;
    --ai-space-3: 0.75rem;
    --ai-space-4: 1rem;
    --ai-space-5: 1.25rem;
    --ai-space-6: 1.5rem;
    --ai-space-8: 2rem;
    --ai-space-10: 2.5rem;
    --ai-space-12: 3rem;
    --ai-space-16: 4rem;
    --ai-space-20: 5rem;
    --ai-space-24: 6rem;

    /* Shape and depth */
    --ai-radius-xs: 0.375rem;
    --ai-radius-sm: 0.75rem;
    --ai-radius-md: 1.25rem;
    --ai-radius-lg: 1.875rem;
    --ai-radius-pill: 999px;
    --ai-shadow-sm: 0 10px 30px rgb(23 22 20 / 8%);
    --ai-shadow-md: 0 24px 64px rgb(23 22 20 / 13%);
    --ai-shadow-lg: 0 32px 80px rgb(23 22 20 / 20%);
    --ai-scrim: rgb(23 22 20 / 58%);

    /* Motion */
    --ai-duration-fast: 140ms;
    --ai-duration: 180ms;
    --ai-duration-enter: 240ms;
    --ai-ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* Layout */
    --ai-sidebar-width: 17rem;
    --ai-sidebar-collapsed-width: 4.5rem;
    --ai-topbar-height: 4.5rem;
    --ai-container: 90rem;
    --ai-reading: 47.5rem;
    --ai-control-height: 2.75rem;
    --ai-touch-target: 2.75rem;
    --ai-gutter: 1rem;

    /* Layers */
    --ai-z-base: 0;
    --ai-z-raised: 10;
    --ai-z-sticky: 20;
    --ai-z-dropdown: 40;
    --ai-z-overlay: 80;
    --ai-z-toast: 100;
    --ai-z-skip: 1000;

    accent-color: var(--ai-ink);
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --ai-canvas: #171614;
    --ai-surface: #24211d;
    --ai-surface-subtle: #302c27;
    --ai-surface-strong: #443e37;
    --ai-ink: #fffdf8;
    --ai-ink-soft: #f5f1e8;
    --ai-text-muted: #d8d0c2;
    --ai-border: #514a42;
    --ai-border-strong: #756b60;
    --ai-brand-gold: #d1a45d;
    --ai-brand-gold-text: #e7c48b;
    --ai-on-dark: #171614;
    --ai-on-dark-muted: #625d55;
    --ai-success: #b5ccb9;
    --ai-success-surface: #29352c;
    --ai-success-border: #526156;
    --ai-warning: #f2c875;
    --ai-warning-surface: #3b2e17;
    --ai-warning-border: #7a4c00;
    --ai-danger: #f1aaa2;
    --ai-danger-strong: #ffd0ca;
    --ai-danger-surface: #43221f;
    --ai-danger-border: #a5362e;
    --ai-info: #b6d2e6;
    --ai-info-surface: #1d303e;
    --ai-info-border: #335d7e;
    --ai-estimated: #d5c8eb;
    --ai-estimated-surface: #2f2840;
    --ai-estimated-border: #5c4b7d;
    --ai-unavailable: #d8d0c2;
    --ai-unavailable-surface: #302c27;
    --ai-unavailable-border: #625d55;
    --ai-chart-1: #fffdf8;
    --ai-chart-2: #d1a45d;
    --ai-chart-3: #8fc1e1;
    --ai-chart-4: #a9c5ae;
    --ai-chart-5: #c6b4e3;
    --ai-chart-6: #dc9b7d;
    --ai-chart-grid: #514a42;
    --ai-selection-bg: #e7c48b;
    --ai-selection-text: #171614;
    --ai-shadow-sm: 0 10px 30px rgb(0 0 0 / 25%);
    --ai-shadow-md: 0 24px 64px rgb(0 0 0 / 35%);
    --ai-shadow-lg: 0 32px 80px rgb(0 0 0 / 48%);
    --ai-scrim: rgb(0 0 0 / 68%);
    accent-color: var(--ai-brand-gold);
  }
}

@layer ai-responsive {
  @media (min-width: 48rem) {
    .ai-access__status,
    .ai-access__footer {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
      justify-content: space-between;
      column-gap: var(--ai-space-8);
    }

    .ai-access__status > :last-child,
    .ai-access__footer > :last-child {
      text-align: end;
    }
  }

  @media (min-width: 64rem) {
    .ai-access__main {
      grid-template-columns: minmax(0, 1.2fr) minmax(22rem, 0.8fr);
      gap: var(--ai-space-16);
      padding-block: var(--ai-space-16) var(--ai-space-20);
    }
  }

  @media (max-width: 29.99rem) {
    .ai-access__topbar {
      align-items: start;
      flex-direction: column;
      padding-block: var(--ai-space-4);
    }

    .ai-access__trust-list li {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--ai-space-1);
    }

    .ai-language-switcher {
      inline-size: 100%;
    }

    .ai-language-switcher a {
      flex: 1;
      justify-content: center;
    }
  }
}

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

  html {
    min-width: 20rem;
    scroll-behavior: smooth;
    text-size-adjust: 100%;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  ul[role="list"],
  ol[role="list"] {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  img,
  picture,
  svg,
  canvas {
    display: block;
    max-inline-size: 100%;
  }

  img,
  picture {
    block-size: auto;
  }

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

  button,
  [role="button"],
  summary {
    touch-action: manipulation;
  }

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

  [hidden] {
    display: none !important;
  }
}

@layer ai-base {
  body {
    min-block-size: 100dvh;
    overflow-x: hidden;
    background: var(--ai-canvas);
    color: var(--ai-ink);
    font-family: var(--ai-font-body);
    font-size: var(--ai-text-body);
    line-height: var(--ai-leading-body);
    text-rendering: optimizeLegibility;
  }

  ::selection {
    background: var(--ai-selection-bg);
    color: var(--ai-selection-text);
  }

  :where(a) {
    color: var(--ai-brand-gold-text);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
  }

  :where(a:hover) {
    text-decoration-thickness: 0.12em;
  }

  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--ai-info);
    outline-offset: 3px;
  }

  h1,
  .ai-heading-1 {
    max-inline-size: 22ch;
    font-family: var(--ai-font-display);
    font-size: var(--ai-text-h1);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: var(--ai-leading-tight);
    text-wrap: balance;
  }

  h2,
  .ai-heading-2 {
    max-inline-size: 30ch;
    font-family: var(--ai-font-display);
    font-size: var(--ai-text-h2);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: var(--ai-leading-heading);
    text-wrap: balance;
  }

  h3,
  .ai-heading-3 {
    font-size: var(--ai-text-h3);
    font-weight: 700;
    line-height: var(--ai-leading-heading);
  }

  h4,
  .ai-heading-4 {
    font-size: 1rem;
    font-weight: 700;
    line-height: var(--ai-leading-heading);
  }

  p,
  li,
  dd {
    max-inline-size: 75ch;
  }

  small {
    font-size: var(--ai-text-small);
  }

  code,
  kbd,
  samp,
  .ai-mono {
    font-family: var(--ai-font-mono);
    font-size: 0.92em;
  }

  code,
  .ai-code-value {
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius-xs);
    background: var(--ai-surface-subtle);
    padding: 0.1em 0.35em;
    overflow-wrap: anywhere;
  }

  hr {
    border: 0;
    border-block-start: 1px solid var(--ai-border);
    margin-block: var(--ai-space-8);
  }

  .ai-skip-link {
    position: fixed;
    z-index: var(--ai-z-skip);
    inset-block-start: var(--ai-space-3);
    inset-inline-start: var(--ai-space-3);
    translate: 0 -180%;
    border-radius: var(--ai-radius-pill);
    background: var(--ai-ink);
    color: var(--ai-on-dark);
    padding: var(--ai-space-3) var(--ai-space-5);
    font-weight: 700;
  }

  .ai-skip-link:focus {
    translate: 0;
  }
}

@layer ai-layout {
  .ai-app {
    min-block-size: 100dvh;
  }

  .ai-sidebar {
    position: relative;
    display: none;
    background: var(--ai-nav-surface);
    color: var(--ai-nav-text);
  }

  .ai-sidebar__inner {
    display: flex;
    block-size: 100%;
    flex-direction: column;
    gap: var(--ai-space-5);
    padding: var(--ai-space-5) var(--ai-space-4);
  }

  .ai-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ai-space-3);
  }

  .ai-sidebar__collapse {
    display: inline-grid;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgb(255 253 248 / 16%);
    border-radius: var(--ai-radius-sm);
    background: transparent;
    color: var(--ai-nav-muted);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    transition:
      background-color var(--ai-duration) var(--ai-ease),
      color var(--ai-duration) var(--ai-ease),
      border-color var(--ai-duration) var(--ai-ease);
  }

  .ai-sidebar__collapse:hover,
  .ai-sidebar__collapse:focus-visible {
    border-color: rgb(255 253 248 / 42%);
    background: rgb(255 253 248 / 10%);
    color: var(--ai-nav-text);
  }

  .ai-sidebar__collapse:focus-visible,
  .ai-sidebar__resize-handle:focus-visible {
    outline: 3px solid var(--ai-info);
    outline-offset: 2px;
  }

  .ai-sidebar__resize-handle {
    position: absolute;
    z-index: 2;
    inset-block: 0;
    inset-inline-end: -0.35rem;
    inline-size: 0.7rem;
    cursor: col-resize;
    touch-action: none;
  }

  .ai-sidebar__resize-handle::after {
    position: absolute;
    inset-block: 0.75rem;
    inset-inline: 0.3rem;
    border-inline-start: 1px solid transparent;
    content: "";
    transition: border-color var(--ai-duration) var(--ai-ease);
  }

  .ai-sidebar__resize-handle:hover::after,
  .ai-sidebar__resize-handle:focus-visible::after,
  .ai-sidebar__resize-handle.is-resizing::after {
    border-inline-start-color: var(--ai-border-strong);
  }

  .ai-brand {
    display: flex;
    min-block-size: 3rem;
    align-items: center;
    gap: var(--ai-space-3);
    color: var(--ai-nav-text);
    text-decoration: none;
  }

  .ai-brand__mark {
    display: grid;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgb(255 253 248 / 35%);
    border-radius: 50%;
    font-family: var(--ai-font-display);
    font-size: 1.25rem;
  }

  .ai-brand__text {
    display: grid;
    line-height: 1.2;
  }

  .ai-brand__text strong {
    font-size: 1rem;
  }

  .ai-brand__text span {
    color: var(--ai-nav-muted);
    font-size: var(--ai-text-caption);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .ai-tenant-context {
    display: grid;
    gap: var(--ai-space-1);
    border: 1px solid rgb(255 253 248 / 18%);
    border-radius: var(--ai-radius-sm);
    background: rgb(255 253 248 / 6%);
    padding: var(--ai-space-3);
  }

  .ai-tenant-context__label {
    color: var(--ai-nav-muted);
    font-size: var(--ai-text-caption);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .ai-nav {
    display: grid;
    gap: var(--ai-space-1);
  }

  .ai-nav__group + .ai-nav__group {
    border-block-start: 1px solid rgb(255 253 248 / 16%);
    margin-block-start: var(--ai-space-4);
    padding-block-start: var(--ai-space-4);
  }

  .ai-nav__label {
    margin: 0 var(--ai-space-3) var(--ai-space-2);
    color: var(--ai-nav-muted);
    font-size: var(--ai-text-caption);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .ai-nav__section-summary {
    display: flex;
    min-block-size: var(--ai-touch-target);
    align-items: center;
    justify-content: space-between;
    gap: var(--ai-space-3);
    border-radius: var(--ai-radius-xs);
    cursor: pointer;
    list-style: none;
    padding-inline: var(--ai-space-3);
    transition:
      background-color var(--ai-duration) var(--ai-ease),
      color var(--ai-duration) var(--ai-ease);
  }

  .ai-nav__section-summary::-webkit-details-marker {
    display: none;
  }

  .ai-nav__section-summary .ai-nav__label {
    margin: 0;
    padding: 0;
  }

  .ai-nav__section-summary:hover,
  .ai-nav__section-summary:focus-visible {
    background: var(--ai-ink);
    color: var(--ai-nav-text);
  }

  .ai-nav__section-summary:focus-visible {
    outline: 3px solid var(--ai-info);
    outline-offset: 2px;
  }

  .ai-nav__section-marker {
    position: relative;
    inline-size: var(--ai-space-4);
    block-size: var(--ai-space-4);
    flex: 0 0 auto;
  }

  .ai-nav__section-marker::before,
  .ai-nav__section-marker::after {
    position: absolute;
    inset-block-start: calc(50% - 1px);
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 2px;
    border-radius: var(--ai-radius-pill);
    background: currentColor;
    content: "";
    transition: scale var(--ai-duration) var(--ai-ease);
  }

  .ai-nav__section-marker::after {
    rotate: 90deg;
  }

  .ai-nav__section[open] > .ai-nav__section-summary .ai-nav__section-marker::after {
    scale: 1 0;
  }

  .ai-nav__section-items {
    display: grid;
    gap: var(--ai-space-1);
  }

  .ai-nav__link {
    display: flex;
    min-block-size: var(--ai-touch-target);
    align-items: center;
    gap: var(--ai-space-3);
    border: 1px solid transparent;
    border-radius: var(--ai-radius-sm);
    color: var(--ai-nav-muted);
    padding: var(--ai-space-2) var(--ai-space-3);
    font-size: var(--ai-text-small);
    font-weight: 650;
    text-decoration: none;
    transition:
      background-color var(--ai-duration) var(--ai-ease),
      color var(--ai-duration) var(--ai-ease),
      border-color var(--ai-duration) var(--ai-ease);
  }

  .ai-nav__label-text {
    display: block;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ai-nav__label-text:hover,
  .ai-nav__label-text:focus-visible {
    text-overflow: clip;
    animation: ai-sidebar-marquee 5.5s ease-in-out infinite alternate;
  }

  .ai-nav__link:hover {
    background: rgb(255 253 248 / 8%);
    color: var(--ai-nav-text);
  }

  .ai-nav__link[aria-current="page"] {
    border-color: rgb(255 253 248 / 16%);
    background: var(--ai-nav-active-surface);
    color: var(--ai-nav-active-text);
  }

  .ai-nav__icon {
    position: relative;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    flex: 0 0 auto;
    border: 1.5px solid currentColor;
    border-radius: var(--ai-radius-xs);
    opacity: 0.9;
  }

  .ai-nav__icon::after {
    position: absolute;
    inset-inline: 0.25rem;
    inset-block-end: 0.25rem;
    block-size: 0.25rem;
    border-block-start: 1.5px solid currentColor;
    border-inline-start: 1.5px solid currentColor;
    content: "";
    rotate: 45deg;
  }

  .ai-nav__icon--accounts {
    border-radius: 50%;
  }

  .ai-nav__icon--accounts::after {
    inset-inline: 0.2rem;
    inset-block-end: 0.2rem;
    block-size: 0.3rem;
    border-block-start: 0;
    border-inline-start: 0;
    border-radius: 50%;
    box-shadow: 0 -0.25rem 0 -0.05rem currentColor;
    rotate: 0deg;
  }

  .ai-nav__icon--connect {
    border-radius: 50%;
  }

  .ai-nav__icon--connect::after {
    inset: 0.27rem;
    border-block-end: 1.5px solid currentColor;
    border-inline-end: 1.5px solid currentColor;
    border-block-start: 0;
    border-inline-start: 0;
    rotate: -45deg;
  }

  .ai-nav__icon--campaigns::after {
    inset: 0.22rem;
    block-size: auto;
    border: 0;
    border-block-end: 1.5px solid currentColor;
    box-shadow: 0 -0.28rem 0 -0.05rem currentColor;
    rotate: 0deg;
  }

  .ai-nav__icon--settings {
    border-radius: 50%;
  }

  .ai-nav__icon--settings::before {
    position: absolute;
    inset: 0.3rem;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    content: "";
  }

  .ai-nav__icon--settings::after {
    inset: -0.18rem 0.42rem;
    block-size: auto;
    border-block: 0.18rem solid currentColor;
    border-inline: 0;
    rotate: 0deg;
  }

  .ai-nav__label--secondary {
    margin-block-start: var(--ai-space-4);
    padding-block-start: var(--ai-space-4);
    border-block-start: 1px solid var(--ai-border);
  }

  .ai-nav__mark {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    flex: 0 0 auto;
    border: 1px solid currentColor;
    border-radius: 50%;
  }

  .ai-amazon-tree {
    display: grid;
    gap: var(--ai-space-1);
    border-radius: var(--ai-radius-sm);
  }

  .ai-amazon-tree__summary {
    display: flex;
    min-block-size: var(--ai-touch-target);
    align-items: stretch;
    justify-content: space-between;
    gap: var(--ai-space-2);
  }

  .ai-amazon-tree__toggle {
    display: inline-flex;
    min-block-size: var(--ai-touch-target);
    min-inline-size: var(--ai-touch-target);
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--ai-radius-sm);
    background: transparent;
    color: var(--ai-nav-muted);
    cursor: pointer;
    font: inherit;
    margin-inline-start: auto;
    order: 2;
  }

  .ai-amazon-tree__toggle:hover,
  .ai-amazon-tree__toggle:focus-visible {
    border-color: rgb(255 253 248 / 16%);
    background: rgb(255 253 248 / 8%);
    color: var(--ai-nav-text);
  }

  .ai-amazon-tree__name {
    display: inline-flex;
    min-block-size: var(--ai-touch-target);
    align-items: center;
    color: var(--ai-nav-text);
    font-size: var(--ai-text-small);
    font-weight: 650;
    line-height: 1.3;
    text-align: start;
  }

  .ai-amazon-tree__icon,
  .ai-amazon-tree__link-icon,
  .ai-amazon-profile-icon {
    display: none;
    flex: 0 0 auto;
  }

  .ai-amazon-tree__icon--amazon {
    position: relative;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    border: 1.5px solid currentColor;
    border-radius: var(--ai-radius-xs);
  }

  .ai-amazon-tree__icon--amazon::after {
    position: absolute;
    inset-inline: 0.2rem;
    inset-block-end: 0.2rem;
    block-size: 0.35rem;
    border-block-start: 1.5px solid currentColor;
    border-radius: 50%;
    content: "";
  }

  .ai-amazon-tree__link-icon--accounts {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    border: 1.5px solid currentColor;
    border-radius: 50%;
  }

  .ai-amazon-tree__link-icon--accounts::after {
    display: block;
    inline-size: 0.35rem;
    block-size: 0.35rem;
    margin: 0.32rem auto;
    border: 1px solid currentColor;
    border-radius: 50%;
    content: "";
  }

  .ai-amazon-tree__link-icon--connect {
    position: relative;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    border: 1.5px solid currentColor;
    border-radius: 50%;
  }

  .ai-amazon-tree__link-icon--connect::after {
    position: absolute;
    inset-inline-start: 0.25rem;
    inset-block-start: 0.25rem;
    inline-size: 0.45rem;
    block-size: 0.45rem;
    border-block-start: 1.5px solid currentColor;
    border-inline-end: 1.5px solid currentColor;
    content: "";
    rotate: 45deg;
  }

  .ai-amazon-tree__marker {
    inline-size: auto;
    line-height: 1;
    font-size: var(--ai-text-body);
    font-weight: 800;
  }

  .ai-amazon-tree__children {
    display: grid;
    gap: var(--ai-space-1);
    margin-inline-start: var(--ai-space-2);
    padding-inline-start: var(--ai-space-2);
    border-inline-start: 1px solid var(--ai-border);
  }

  .ai-amazon-tree__link {
    font-size: var(--ai-text-caption);
  }

  .ai-amazon-account-tree {
    display: grid;
    gap: var(--ai-space-1);
  }

  .ai-amazon-account-tree__summary {
    display: flex;
    min-block-size: var(--ai-touch-target);
    align-items: center;
    justify-content: space-between;
    gap: var(--ai-space-1);
  }

  .ai-amazon-account-list {
    flex: 1 1 auto;
    min-inline-size: 0;
    order: 1;
  }

  .ai-amazon-account-list[aria-current="page"],
  .ai-amazon-tree__link[aria-current="page"] {
    border-color: rgb(255 253 248 / 20%);
    background: var(--ai-nav-active-surface);
    color: var(--ai-nav-active-text);
  }

  .ai-amazon-account-children {
    display: grid;
    gap: var(--ai-space-1);
    margin-inline-start: var(--ai-space-2);
    padding-inline-start: var(--ai-space-2);
    border-inline-start: 1px solid var(--ai-border);
  }

  .ai-amazon-profile-row {
    display: flex;
    min-block-size: 2rem;
    align-items: center;
    gap: var(--ai-space-2);
    min-inline-size: 0;
    color: var(--ai-nav-muted);
    font-size: var(--ai-text-caption);
  }

  .ai-amazon-profile-name:hover,
  .ai-amazon-profile-name:focus-visible {
    border-radius: var(--ai-radius-xs);
    background: rgb(255 253 248 / 8%);
    color: var(--ai-nav-text);
    outline: none;
    text-overflow: clip;
    animation: ai-sidebar-marquee 5.5s ease-in-out infinite alternate;
  }

  .ai-amazon-profile-bullet {
    inline-size: 0.35rem;
    block-size: 0.35rem;
    flex: 0 0 auto;
    border: 1px solid currentColor;
    border-radius: 50%;
  }

  .ai-amazon-profile-icon {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    align-items: center;
    justify-content: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    color: var(--ai-nav-muted);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
  }

  .ai-amazon-profile-name {
    display: block;
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
  }

  .ai-amazon-profile-editor {
    display: inline-flex;
    min-inline-size: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--ai-space-1);
  }

  .ai-amazon-profile-name[hidden],
  .ai-amazon-profile-editor[hidden] {
    display: none !important;
  }

  .ai-amazon-profile-input {
    min-block-size: 1.9rem;
    min-inline-size: 0;
    inline-size: 100%;
    border: 1px solid var(--ai-border-strong);
    border-radius: var(--ai-radius-sm);
    background: var(--ai-surface-subtle);
    color: var(--ai-ink);
    padding: var(--ai-space-1) var(--ai-space-2);
    font: inherit;
  }

  .ai-amazon-profile-input:focus-visible {
    outline: 3px solid var(--ai-info);
    outline-offset: 1px;
  }

  .ai-amazon-profile-save {
    display: inline-grid;
    min-block-size: 1.9rem;
    min-inline-size: 1.9rem;
    place-items: center;
    border: 1px solid var(--ai-border-strong);
    border-radius: var(--ai-radius-sm);
    background: var(--ai-surface);
    color: var(--ai-success);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
  }

  .ai-amazon-profile-save:hover,
  .ai-amazon-profile-save:focus-visible {
    background: var(--ai-surface-subtle);
  }

  .ai-amazon-account-empty {
    margin: 0;
    color: var(--ai-nav-muted);
    font-size: var(--ai-text-caption);
  }

  @keyframes ai-sidebar-marquee {
    from {
      text-indent: 0;
    }
    to {
      text-indent: -35%;
    }
  }

  /*
   * M016 provisional sidebar visual proposal v1: Precision Ledger.
   * Presentation only; behavior and data contracts remain owned by ui/sidebar.py.
   * See docs/design-proposals/M016-sidebar-visual-proposal-v1.md.
   */
  .ai-sidebar {
    border-inline-end: 1px solid var(--ai-text-muted);
  }

  .ai-sidebar__inner {
    gap: 0;
    padding: 0 var(--ai-space-4) var(--ai-space-6);
  }

  .ai-sidebar__header {
    min-block-size: 5rem;
    border-block-end: 1px solid var(--ai-text-muted);
    margin-block-end: var(--ai-space-4);
  }

  .ai-brand {
    min-inline-size: 0;
    gap: var(--ai-space-3);
  }

  .ai-brand__mark {
    inline-size: var(--ai-space-10);
    block-size: var(--ai-space-10);
    border-color: var(--ai-brand-gold);
    border-radius: var(--ai-radius-sm);
    background: var(--ai-ink);
    color: var(--ai-on-dark);
    font-size: var(--ai-text-body-lg);
  }

  .ai-brand__text {
    min-inline-size: 0;
    gap: var(--ai-space-1);
  }

  .ai-brand__text span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ai-brand__text strong {
    color: var(--ai-nav-text);
    font-size: var(--ai-text-small);
    letter-spacing: -0.01em;
    line-height: 1.15;
    text-wrap: balance;
  }

  .ai-brand__text span {
    color: var(--ai-nav-muted);
    font-size: var(--ai-text-caption);
    letter-spacing: 0.12em;
  }

  .ai-sidebar__collapse {
    inline-size: var(--ai-touch-target);
    block-size: var(--ai-touch-target);
    border-color: var(--ai-text-muted);
    border-radius: var(--ai-radius-pill);
    background: var(--ai-ink);
  }

  .ai-sidebar__collapse:hover,
  .ai-sidebar__collapse:focus-visible {
    border-color: var(--ai-brand-gold);
    background: var(--ai-nav-surface);
    color: var(--ai-nav-text);
  }

  .ai-tenant-context {
    gap: var(--ai-space-1);
    border-color: var(--ai-text-muted);
    border-inline-start: 2px solid var(--ai-brand-gold);
    border-radius: var(--ai-radius-xs);
    background: var(--ai-ink);
    padding: var(--ai-space-3);
  }

  .ai-tenant-context strong {
    min-inline-size: 0;
    overflow: hidden;
    color: var(--ai-nav-text);
    font-size: var(--ai-text-small);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ai-tenant-context .ai-badge {
    inline-size: fit-content;
    margin-block-start: var(--ai-space-1);
  }

  .ai-nav {
    gap: var(--ai-space-1);
    margin-block-start: var(--ai-space-5);
  }

  .ai-nav__label {
    margin: 0 0 var(--ai-space-2);
    padding-inline: var(--ai-space-3);
    color: var(--ai-nav-muted);
    letter-spacing: 0.12em;
  }

  .ai-nav__link {
    position: relative;
    gap: var(--ai-space-3);
    border-radius: var(--ai-radius-xs);
    padding-inline: var(--ai-space-3);
    font-weight: 600;
  }

  .ai-nav__link::before {
    position: absolute;
    inset-block: var(--ai-space-2);
    inset-inline-start: 0;
    inline-size: 2px;
    border-radius: var(--ai-radius-pill);
    background: transparent;
    content: "";
  }

  .ai-nav__link:hover {
    background: var(--ai-ink);
  }

  .ai-nav__link[aria-current="page"]::before {
    background: var(--ai-brand-gold);
  }

  .ai-nav__icon {
    border-radius: var(--ai-radius-xs);
  }

  .ai-amazon-tree {
    gap: var(--ai-space-2);
    border-block-start: 1px solid var(--ai-text-muted);
    border-radius: 0;
    margin-block-start: var(--ai-space-3);
    padding-block-start: var(--ai-space-4);
  }

  .ai-amazon-tree__summary {
    min-block-size: var(--ai-touch-target);
    align-items: center;
    padding-inline: var(--ai-space-3);
  }

  .ai-amazon-tree__name {
    min-inline-size: 0;
    border-inline-start: 2px solid var(--ai-brand-gold);
    padding-inline-start: var(--ai-space-3);
    font-family: var(--ai-font-display);
    font-size: var(--ai-text-body);
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  .ai-amazon-tree__children {
    gap: var(--ai-space-2);
    border-inline-start: 0;
    margin-inline-start: 0;
    padding-inline-start: 0;
  }

  .ai-amazon-account-tree {
    gap: var(--ai-space-1);
    border: 1px solid var(--ai-text-muted);
    border-radius: var(--ai-radius-sm);
    background: var(--ai-ink);
    padding: var(--ai-space-1);
  }

  .ai-amazon-account-tree__summary {
    gap: 0;
  }

  .ai-amazon-account-list {
    border-radius: var(--ai-radius-xs);
  }

  .ai-amazon-tree__toggle {
    border-radius: var(--ai-radius-xs);
  }

  .ai-amazon-tree__toggle:hover,
  .ai-amazon-tree__toggle:focus-visible {
    border-color: var(--ai-text-muted);
    background: var(--ai-nav-surface);
  }

  .ai-amazon-tree__marker {
    color: var(--ai-brand-gold);
    font-family: var(--ai-font-display);
    font-weight: 700;
  }

  .ai-amazon-account-children {
    gap: var(--ai-space-1);
    border-inline-start: 0;
    margin-inline-start: 0;
    padding: 0 var(--ai-space-2) var(--ai-space-2);
  }

  .ai-amazon-account-children[hidden] {
    display: none;
  }

  .ai-amazon-profile-row {
    min-block-size: var(--ai-touch-target);
    border-radius: var(--ai-radius-xs);
    padding-inline: var(--ai-space-2);
  }

  .ai-amazon-profile-row:hover,
  .ai-amazon-profile-row:focus-within {
    background: var(--ai-nav-surface);
    color: var(--ai-nav-text);
  }

  .ai-amazon-profile-name:hover,
  .ai-amazon-profile-name:focus-visible {
    background: transparent;
  }

  .ai-amazon-profile-bullet {
    display: none;
  }

  .ai-amazon-profile-input,
  .ai-amazon-profile-save {
    min-block-size: var(--ai-touch-target);
  }

  .ai-amazon-account-tree + .ai-amazon-tree__link {
    margin-block-start: var(--ai-space-1);
  }

  .ai-amazon-rename {
    padding: var(--ai-space-2);
    border-radius: var(--ai-radius-sm);
    background: rgb(255 253 248 / 6%);
  }

  .ai-amazon-rename > summary {
    min-block-size: var(--ai-touch-target);
    cursor: pointer;
    color: var(--ai-nav-muted);
    font-size: var(--ai-text-caption);
    font-weight: 650;
    line-height: 1.3;
  }

  .ai-amazon-rename form {
    display: grid;
    gap: var(--ai-space-2);
    padding-block-start: var(--ai-space-2);
  }

  .ai-definition-list {
    display: grid;
    gap: var(--ai-space-2);
    margin: 0;
  }

  .ai-definition-list > div {
    display: grid;
    grid-template-columns: minmax(8rem, 0.8fr) minmax(0, 1.2fr);
    gap: var(--ai-space-3);
    border-block-end: 1px solid var(--ai-border);
    padding-block-end: var(--ai-space-2);
  }

  .ai-definition-list dt {
    color: var(--ai-text-muted);
    font-size: var(--ai-text-caption);
    font-weight: 700;
  }

  .ai-definition-list dd {
    overflow-wrap: anywhere;
    margin: 0;
    font-size: var(--ai-text-small);
  }

  .ai-topbar {
    position: sticky;
    z-index: var(--ai-z-sticky);
    inset-block-start: 0;
    display: flex;
    min-block-size: var(--ai-topbar-height);
    align-items: center;
    justify-content: space-between;
    gap: var(--ai-space-4);
    border-block-end: 1px solid var(--ai-border);
    background: var(--ai-canvas);
    padding: var(--ai-space-3) var(--ai-gutter);
  }

  :root[data-theme="dark"] .ai-topbar {
    background: var(--ai-canvas);
  }

  .ai-topbar__context {
    min-inline-size: 0;
  }

  .ai-topbar__title {
    overflow: hidden;
    font-size: var(--ai-text-small);
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ai-topbar__meta {
    color: var(--ai-text-muted);
    font-size: var(--ai-text-caption);
  }

  .ai-topbar__meta-value {
    color: var(--ai-text);
    font-weight: 700;
  }

  .ai-topbar__actions,
  .ai-action-row,
  .ai-inline-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ai-space-2);
  }

  .ai-signout-form {
    margin: 0;
  }

  .ai-mobile-nav {
    position: relative;
  }

  .ai-mobile-nav > summary {
    display: grid;
    inline-size: var(--ai-touch-target);
    block-size: var(--ai-touch-target);
    cursor: pointer;
    list-style: none;
    place-items: center;
    border: 1px solid var(--ai-border-strong);
    border-radius: 50%;
    background: var(--ai-surface);
  }

  .ai-mobile-nav > summary::-webkit-details-marker {
    display: none;
  }

  .ai-mobile-nav__glyph,
  .ai-mobile-nav__glyph::before,
  .ai-mobile-nav__glyph::after {
    inline-size: 1.125rem;
    block-size: 2px;
    background: currentColor;
    content: "";
  }

  .ai-mobile-nav__glyph {
    position: relative;
  }

  .ai-mobile-nav__glyph::before {
    position: absolute;
    inset-block-start: -0.375rem;
    inset-inline-start: 0;
  }

  .ai-mobile-nav__glyph::after {
    position: absolute;
    inset-block-start: 0.375rem;
    inset-inline-start: 0;
  }

  .ai-mobile-nav__panel {
    position: absolute;
    z-index: var(--ai-z-dropdown);
    inset-block-start: calc(100% + var(--ai-space-2));
    inset-inline-start: 0;
    inline-size: min(21rem, calc(100vw - 2 * var(--ai-gutter)));
    max-block-size: calc(100dvh - var(--ai-topbar-height) - var(--ai-space-6));
    overflow: auto;
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius-md);
    background: var(--ai-nav-surface);
    box-shadow: var(--ai-shadow-md);
    color: var(--ai-nav-text);
    padding: var(--ai-space-4);
  }

  .ai-main {
    min-inline-size: 0;
    overflow-x: clip;
  }

  .ai-page {
    inline-size: min(100%, var(--ai-container));
    margin-inline: auto;
    padding: var(--ai-space-6) var(--ai-gutter) var(--ai-space-16);
  }

  .ai-page-header {
    display: grid;
    gap: var(--ai-space-4);
    margin-block-end: var(--ai-space-8);
  }

  .ai-page-header > * {
    min-inline-size: 0;
  }

  .ai-page-header__copy {
    display: grid;
    gap: var(--ai-space-3);
  }

  .ai-page-header__summary {
    max-inline-size: var(--ai-reading);
    color: var(--ai-text-muted);
    font-size: var(--ai-text-body-lg);
  }

  .ai-page-header__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ai-space-2) var(--ai-space-4);
    color: var(--ai-text-muted);
    font-size: var(--ai-text-small);
  }

  .ai-page-title--single-line {
    max-inline-size: 100%;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ai-page-section {
    display: grid;
    gap: var(--ai-space-4);
    margin-block-start: var(--ai-space-10);
  }

  .ai-section-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--ai-space-4);
  }

  .ai-section-header__copy {
    display: grid;
    gap: var(--ai-space-2);
  }

  .ai-section-header__copy p {
    color: var(--ai-text-muted);
  }

  .ai-reading {
    inline-size: min(100%, var(--ai-reading));
  }

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

  .ai-grid--2,
  .ai-grid--3,
  .ai-grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .ai-stack {
    display: grid;
    gap: var(--ai-space-4);
  }

  .ai-stack--tight {
    gap: var(--ai-space-2);
  }

  .ai-split {
    display: grid;
    gap: var(--ai-space-6);
  }
}

@layer ai-components {
  .ai-button {
    display: inline-flex;
    min-block-size: var(--ai-control-height);
    max-inline-size: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: var(--ai-space-2);
    border: 1px solid transparent;
    border-radius: var(--ai-radius-pill);
    padding: var(--ai-space-2) var(--ai-space-5);
    font-size: var(--ai-text-small);
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition:
      background-color var(--ai-duration) var(--ai-ease),
      border-color var(--ai-duration) var(--ai-ease),
      color var(--ai-duration) var(--ai-ease),
      box-shadow var(--ai-duration) var(--ai-ease),
      opacity var(--ai-duration) var(--ai-ease);
  }

  .ai-button:hover {
    box-shadow: var(--ai-shadow-sm);
  }

  .ai-button:active {
    box-shadow: none;
    opacity: 0.84;
  }

  .ai-button--primary {
    background: var(--ai-ink);
    color: var(--ai-on-dark);
  }

  .ai-button--secondary {
    border-color: var(--ai-border-strong);
    background: var(--ai-surface);
    color: var(--ai-ink);
  }

  .ai-button--ghost {
    border-color: transparent;
    background: transparent;
    color: var(--ai-ink);
  }

  .ai-button--danger {
    background: var(--ai-danger);
    color: #fff;
  }

  .ai-button--danger:hover {
    background: var(--ai-danger-strong);
  }

  .ai-button--link {
    min-block-size: var(--ai-touch-target);
    border-radius: var(--ai-radius-xs);
    background: transparent;
    color: var(--ai-brand-gold-text);
    padding-inline: var(--ai-space-2);
    text-decoration: underline;
    text-underline-offset: 0.18em;
  }

  .ai-button--small {
    min-block-size: var(--ai-touch-target);
    padding-inline: var(--ai-space-4);
  }

  .ai-button[disabled],
  .ai-button[aria-disabled="true"] {
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.45;
  }

  .ai-button[aria-busy="true"]::before {
    inline-size: 1rem;
    block-size: 1rem;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: ai-spin 700ms linear infinite;
    content: "";
  }

  .ai-icon-button {
    display: inline-grid;
    inline-size: var(--ai-touch-target);
    block-size: var(--ai-touch-target);
    cursor: pointer;
    place-items: center;
    border: 1px solid var(--ai-border);
    border-radius: 50%;
    background: var(--ai-surface);
    color: var(--ai-ink);
  }

  .ai-icon-button > svg {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    stroke-width: 1.75;
  }

  .ai-card {
    min-inline-size: 0;
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius-md);
    background: var(--ai-surface);
    padding: var(--ai-space-5);
  }

  .ai-card--compact {
    border-radius: var(--ai-radius-sm);
    padding: var(--ai-space-4);
  }

  .ai-card--featured {
    border-radius: var(--ai-radius-lg);
    padding: var(--ai-space-6);
    box-shadow: var(--ai-shadow-sm);
  }

  .ai-card--dark {
    border-color: transparent;
    background: var(--ai-nav-surface);
    color: var(--ai-nav-text);
  }

  .ai-card--interactive {
    transition:
      border-color var(--ai-duration) var(--ai-ease),
      box-shadow var(--ai-duration) var(--ai-ease),
      translate var(--ai-duration) var(--ai-ease);
  }

  .ai-card--interactive:hover,
  .ai-card--interactive:focus-within {
    border-color: var(--ai-border-strong);
    box-shadow: var(--ai-shadow-sm);
    translate: 0 -2px;
  }

  .ai-card__header {
    display: flex;
    min-inline-size: 0;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-between;
    gap: var(--ai-space-4);
    margin-block-end: var(--ai-space-4);
  }

  .ai-card__header > * {
    min-inline-size: 0;
  }

  .ai-card__title {
    font-size: 1rem;
    font-weight: 750;
  }

  .ai-card__meta {
    color: var(--ai-text-muted);
    font-size: var(--ai-text-small);
  }

  .ai-kpi {
    display: grid;
    align-content: start;
    gap: var(--ai-space-3);
  }

  .ai-kpi__label {
    color: var(--ai-text-muted);
    font-size: var(--ai-text-small);
    font-weight: 650;
  }

  .ai-kpi__value {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-variant-numeric: tabular-nums;
    font-weight: 720;
    letter-spacing: -0.04em;
    line-height: 1;
  }

  .ai-kpi__value--campaign {
    font-size: clamp(1.375rem, 2.25vw, 2rem);
  }

  .ai-kpi__unit {
    margin-inline-start: var(--ai-space-1);
    font-size: 0.5em;
    font-weight: 650;
    letter-spacing: normal;
  }

  .ai-kpi__context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ai-space-2);
    color: var(--ai-text-muted);
    font-size: var(--ai-text-caption);
  }

  .ai-badge {
    display: inline-flex;
    max-inline-size: 100%;
    min-block-size: 1.75rem;
    align-items: center;
    gap: var(--ai-space-2);
    border: 1px solid var(--ai-unavailable-border);
    border-radius: var(--ai-radius-pill);
    background: var(--ai-unavailable-surface);
    color: var(--ai-unavailable);
    padding: var(--ai-space-1) var(--ai-space-3);
    font-size: var(--ai-text-caption);
    font-weight: 750;
    line-height: 1.2;
    overflow-wrap: anywhere;
    text-align: start;
  }

  .ai-badge::before {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    flex: 0 0 auto;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: currentColor;
    content: "";
  }

  .ai-badge--success {
    border-color: var(--ai-success-border);
    background: var(--ai-success-surface);
    color: var(--ai-success);
  }

  .ai-badge--warning {
    border-color: var(--ai-warning-border);
    background: var(--ai-warning-surface);
    color: var(--ai-warning);
  }

  .ai-badge--danger {
    border-color: var(--ai-danger-border);
    background: var(--ai-danger-surface);
    color: var(--ai-danger);
  }

  .ai-badge--info {
    border-color: var(--ai-info-border);
    background: var(--ai-info-surface);
    color: var(--ai-info);
  }

  .ai-badge--estimated {
    border-color: var(--ai-estimated-border);
    background: var(--ai-estimated-surface);
    color: var(--ai-estimated);
  }

  .ai-badge--neutral {
    border-color: var(--ai-unavailable-border);
    background: var(--ai-unavailable-surface);
    color: var(--ai-unavailable);
  }

  .ai-alert {
    display: grid;
    grid-template-columns: 0.375rem minmax(0, 1fr);
    gap: var(--ai-space-4);
    border: 1px solid var(--ai-info-border);
    border-radius: var(--ai-radius-sm);
    background: var(--ai-info-surface);
    color: var(--ai-ink);
    padding: var(--ai-space-4);
  }

  .ai-alert::before {
    block-size: 100%;
    min-block-size: 2rem;
    border-radius: var(--ai-radius-pill);
    background: var(--ai-info);
    content: "";
  }

  .ai-alert--success {
    border-color: var(--ai-success-border);
    background: var(--ai-success-surface);
  }

  .ai-alert--success::before {
    background: var(--ai-success);
  }

  .ai-alert--warning {
    border-color: var(--ai-warning-border);
    background: var(--ai-warning-surface);
  }

  .ai-alert--warning::before {
    background: var(--ai-warning);
  }

  .ai-alert--danger {
    border-color: var(--ai-danger-border);
    background: var(--ai-danger-surface);
  }

  .ai-alert--danger::before {
    background: var(--ai-danger);
  }

  .ai-alert__content {
    display: grid;
    gap: var(--ai-space-2);
  }

  .ai-alert__title {
    font-weight: 750;
  }

  .ai-alert__meta {
    color: var(--ai-text-muted);
    font-size: var(--ai-text-small);
  }

  .ai-breadcrumb {
    margin-block-end: var(--ai-space-4);
    color: var(--ai-text-muted);
    font-size: var(--ai-text-small);
  }

  .ai-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ai-space-2);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .ai-breadcrumb li + li::before {
    margin-inline-end: var(--ai-space-2);
    color: var(--ai-border-strong);
    content: "/";
  }

  [dir="rtl"] .ai-breadcrumb li + li::before {
    content: "\\";
  }

  .ai-tabs {
    display: flex;
    max-inline-size: 100%;
    gap: var(--ai-space-1);
    overflow-x: auto;
    border-block-end: 1px solid var(--ai-border);
    scrollbar-width: thin;
  }

  .ai-tabs--wrap {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .ai-campaign-editor [data-editor-loading] progress.ai-progress {
    inline-size: 100%;
  }

  .ai-editor-panel {
    min-inline-size: 0;
    padding-block-start: var(--ai-space-4);
  }

  .ai-editor-panel[hidden] {
    display: none;
  }

  .ai-campaign-editor .ai-table .ai-input,
  .ai-campaign-editor .ai-table .ai-select {
    min-inline-size: 7rem;
  }

  .ai-tab {
    display: inline-flex;
    min-block-size: var(--ai-touch-target);
    flex: 0 0 auto;
    align-items: center;
    border: 0;
    border-block-end: 3px solid transparent;
    background: transparent;
    color: var(--ai-text-muted);
    padding: var(--ai-space-2) var(--ai-space-4);
    font-size: var(--ai-text-small);
    font-weight: 700;
    text-decoration: none;
  }

  .ai-tab[aria-selected="true"],
  .ai-tab[aria-current="page"] {
    border-block-end-color: var(--ai-brand-gold);
    color: var(--ai-ink);
  }

  .ai-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--ai-space-3);
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius-md);
    background: var(--ai-surface);
    padding: var(--ai-space-4);
  }

  .ai-filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ai-space-2);
  }

  .ai-chip {
    display: inline-flex;
    min-block-size: 2rem;
    align-items: center;
    gap: var(--ai-space-2);
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius-pill);
    background: var(--ai-surface-subtle);
    color: var(--ai-ink);
    padding: var(--ai-space-1) var(--ai-space-3);
    font-size: var(--ai-text-caption);
    font-weight: 700;
  }

  .ai-field {
    display: grid;
    gap: var(--ai-space-2);
  }

  .ai-field__label,
  .ai-fieldset > legend {
    color: var(--ai-ink);
    font-size: var(--ai-text-small);
    font-weight: 750;
  }

  .ai-field__required {
    color: var(--ai-danger);
    font-size: var(--ai-text-caption);
    font-weight: 650;
  }

  .ai-field__help,
  .ai-field__counter {
    color: var(--ai-text-muted);
    font-size: var(--ai-text-caption);
  }

  .ai-field__error {
    color: var(--ai-danger);
    font-size: var(--ai-text-small);
    font-weight: 650;
  }

  .ai-field__error[hidden] {
    display: none;
  }

  .ai-input,
  .ai-select,
  .ai-textarea {
    inline-size: 100%;
    min-block-size: var(--ai-control-height);
    border: 1px solid var(--ai-border-strong);
    border-radius: var(--ai-radius-sm);
    background: var(--ai-surface);
    color: var(--ai-ink);
    padding: var(--ai-space-2) var(--ai-space-3);
    line-height: 1.4;
  }

  .ai-textarea {
    min-block-size: 8rem;
    resize: vertical;
  }

  .ai-input::placeholder,
  .ai-textarea::placeholder {
    color: var(--ai-text-muted);
    opacity: 0.8;
  }

  .ai-input[aria-invalid="true"],
  .ai-select[aria-invalid="true"],
  .ai-textarea[aria-invalid="true"] {
    border-color: var(--ai-danger);
    box-shadow: 0 0 0 1px var(--ai-danger);
  }

  .ai-input:read-only,
  .ai-textarea:read-only {
    border-style: dashed;
    background: var(--ai-surface-subtle);
  }

  .ai-input:disabled,
  .ai-select:disabled,
  .ai-textarea:disabled {
    cursor: not-allowed;
    background: var(--ai-surface-strong);
    opacity: 0.65;
  }

  .ai-fieldset {
    display: grid;
    gap: var(--ai-space-4);
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius-md);
    margin: 0;
    padding: var(--ai-space-5);
  }

  .ai-fieldset > legend {
    padding-inline: var(--ai-space-2);
  }

  .ai-check {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    align-items: start;
    gap: var(--ai-space-3);
    min-block-size: var(--ai-touch-target);
    cursor: pointer;
    padding-block: var(--ai-space-2);
  }

  .ai-check input {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    margin-block-start: 0.1rem;
  }

  .ai-auth-remember > span {
    display: grid;
    gap: var(--ai-space-1);
  }

  .ai-auth-remember small {
    color: var(--ai-text-muted);
    line-height: var(--ai-leading-normal);
  }

  .ai-error-summary {
    border: 2px solid var(--ai-danger);
    border-radius: var(--ai-radius-sm);
    background: var(--ai-danger-surface);
    padding: var(--ai-space-5);
  }

  .ai-error-summary ul {
    margin-block-end: 0;
  }

  .ai-settings-header {
    align-items: start;
  }

  .ai-campaign-center__header {
    align-items: start;
  }

  .ai-campaign-filters {
    display: grid;
    gap: var(--ai-space-3);
    inline-size: min(100%, 52rem);
  }

  .ai-campaign-filters .ai-field {
    gap: var(--ai-space-1);
  }

  .ai-campaign-table {
    min-inline-size: 76rem;
  }

  .ai-date-range {
    position: relative;
  }

  .ai-date-range__trigger {
    justify-content: space-between;
    inline-size: 100%;
  }

  .ai-date-range__popover {
    position: absolute;
    z-index: var(--ai-z-dropdown);
    inset-block-start: calc(100% + var(--ai-space-2));
    inset-inline-end: 0;
    display: grid;
    gap: var(--ai-space-4);
    inline-size: min(30rem, calc(100vw - (2 * var(--ai-space-4))));
    padding: var(--ai-space-4);
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius-sm);
    background: var(--ai-surface);
    box-shadow: var(--ai-shadow-md);
  }

  .ai-date-range__popover[hidden] {
    display: none;
  }

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

  .ai-segmented button {
    min-block-size: 2.75rem;
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius-xs);
    background: var(--ai-surface-subtle);
    color: var(--ai-ink);
    font: inherit;
    cursor: pointer;
  }

  .ai-segmented button:hover,
  .ai-segmented button:focus-visible {
    border-color: var(--ai-border-strong);
    background: var(--ai-surface-strong);
  }

  .ai-analysis-summary {
    border-inline-start: 0.375rem solid var(--ai-brand-gold);
  }

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

  .ai-tool-grid {
    display: grid;
    gap: var(--ai-space-4);
  }

  .ai-tool-card {
    align-content: start;
  }

  .ai-tool-card > p {
    color: var(--ai-text-muted);
  }

  .ai-tool-card > :last-child {
    margin-block-start: auto;
  }

  .ai-status-list {
    display: grid;
    gap: var(--ai-space-3);
    padding: 0;
    list-style: none;
  }

  .ai-status-list li {
    display: flex;
    align-items: start;
    gap: var(--ai-space-2);
  }

  .ai-settings-save-status {
    display: inline-flex;
    min-block-size: 2rem;
    align-items: center;
    gap: var(--ai-space-2);
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius-pill);
    background: var(--ai-surface);
    color: var(--ai-text-muted);
    padding: var(--ai-space-1) var(--ai-space-3);
    font-size: var(--ai-text-caption);
    font-weight: 750;
    white-space: nowrap;
  }

  .ai-settings-save-status::before {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background: currentColor;
    content: "";
  }

  .ai-settings-save-status[data-state="success"] {
    border-color: var(--ai-success-border);
    background: var(--ai-success-surface);
    color: var(--ai-success);
  }

  .ai-settings-save-status[data-state="info"] {
    border-color: var(--ai-info-border);
    background: var(--ai-info-surface);
    color: var(--ai-info);
  }

  .ai-settings-save-status[data-state="warning"] {
    border-color: var(--ai-warning-border);
    background: var(--ai-warning-surface);
    color: var(--ai-warning);
  }

  .ai-settings-save-status[data-state="danger"] {
    border-color: var(--ai-danger-border);
    background: var(--ai-danger-surface);
    color: var(--ai-danger);
  }

  .ai-settings-scope {
    display: grid;
    gap: var(--ai-space-2);
    border: 1px solid var(--ai-info-border);
    border-radius: var(--ai-radius-md);
    background: var(--ai-info-surface);
    margin-block-end: var(--ai-space-6);
    padding: var(--ai-space-5);
  }

  .ai-settings-scope h2,
  .ai-settings-scope p,
  .ai-settings-readonly p {
    margin: 0;
  }

  .ai-settings {
    display: grid;
    gap: var(--ai-space-5);
  }

  .ai-settings-panel {
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius-md);
    background: var(--ai-surface);
    padding: var(--ai-space-5);
  }

  .ai-settings-panel > form {
    display: grid;
    gap: var(--ai-space-6);
  }

  .ai-settings-grid {
    display: grid;
    gap: var(--ai-space-5);
  }

  .ai-settings-readonly {
    display: grid;
    align-content: start;
    gap: var(--ai-space-2);
    border: 1px dashed var(--ai-border-strong);
    border-radius: var(--ai-radius-sm);
    background: var(--ai-surface-subtle);
    padding: var(--ai-space-4);
  }

  .ai-settings-readonly > span {
    color: var(--ai-text-muted);
    font-size: var(--ai-text-small);
    font-weight: 750;
  }

  .ai-settings-readonly > p {
    color: var(--ai-text-muted);
    font-size: var(--ai-text-caption);
  }

  .ai-settings[data-enhanced="true"] .ai-settings-panel[hidden] {
    display: none;
  }

  .ai-settings[data-enhanced="true"] [data-progressive-save] {
    display: none;
  }

  .ai-table-region {
    contain: inline-size;
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow: auto;
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius-md);
    background: var(--ai-surface-subtle);
    scrollbar-gutter: stable;
  }

  .ai-table {
    inline-size: 100%;
    min-inline-size: 44rem;
    font-size: var(--ai-text-small);
    line-height: var(--ai-leading-compact);
    background: var(--ai-surface);
  }

  .ai-table--executive {
    inline-size: max-content;
    min-inline-size: 68rem;
  }

  .ai-table--compact {
    min-inline-size: 30rem;
  }

  .ai-table--amazon-changes {
    min-inline-size: 62rem;
    table-layout: auto;
  }

  .ai-cell-primary,
  .ai-cell-secondary,
  .ai-date-time__date,
  .ai-date-time__time {
    display: block;
  }

  .ai-cell-primary {
    font-weight: 700;
  }

  .ai-cell-secondary,
  .ai-date-time__time {
    color: var(--ai-text-muted);
    font-size: var(--ai-text-caption);
  }

  .ai-date-time,
  .ai-change-history__initiator,
  .ai-change-history__status,
  .ai-change-history__details,
  .ai-change-history__reverse {
    white-space: nowrap;
  }

  .ai-change-history__tenant {
    inline-size: 11rem;
  }

  .ai-change-history__when {
    inline-size: 9.5rem;
  }

  .ai-change-history__action {
    inline-size: 10.5rem;
  }

  .ai-change-history__target {
    min-inline-size: 13rem;
  }

  .ai-change-history__initiator {
    inline-size: 7.25rem;
  }

  .ai-change-history__status {
    inline-size: 6.75rem;
  }

  .ai-change-history__attempts,
  .ai-change-history__reverse {
    inline-size: 6.5rem;
  }

  .ai-search-term-comparison {
    align-items: stretch;
  }

  .ai-search-term-comparison > .ai-stack {
    display: flex;
    min-block-size: 100%;
    flex-direction: column;
  }

  .ai-search-term-comparison > .ai-stack > .ai-table-region {
    flex: 1 1 auto;
  }

  .ai-analysis-title {
    max-inline-size: none;
    font-size: clamp(1.25rem, 4.5vw, 3rem);
    text-wrap: nowrap;
    white-space: nowrap;
  }

.ai-analysis-async {
  min-block-size: 12rem;
}

.ai-input-group {
  display: flex;
  align-items: center;
  gap: var(--ai-space-2);
}

.ai-input-group .ai-input {
  flex: 1 1 auto;
  min-inline-size: 0;
}

  .ai-table-heading {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--ai-space-1);
  }

  .ai-info-tip {
    display: inline-grid;
    min-inline-size: 2.75rem;
    min-block-size: 2.75rem;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--ai-info);
    cursor: help;
    font: inherit;
    font-weight: 800;
  }

  .ai-info-tip::before {
    position: absolute;
    inline-size: 1.15rem;
    block-size: 1.15rem;
    border: 1px solid currentColor;
    border-radius: var(--ai-radius-pill);
    content: "";
  }

  .ai-info-tip__content,
  .ai-window-value::after {
    position: absolute;
    z-index: var(--ai-z-dropdown);
    inset-block-start: calc(100% + var(--ai-space-2));
    inset-inline-start: 0;
    inline-size: min(20rem, 80vw);
    border: 1px solid var(--ai-border-strong);
    border-radius: var(--ai-radius-sm);
    background: var(--ai-ink);
    box-shadow: var(--ai-shadow-md);
    color: var(--ai-nav-text);
    font-size: var(--ai-text-caption);
    font-weight: 500;
    line-height: var(--ai-leading-body);
    opacity: 0;
    padding: var(--ai-space-3);
    pointer-events: none;
    text-align: start;
    visibility: hidden;
    white-space: normal;
  }

  .ai-info-tip:hover + .ai-info-tip__content,
  .ai-info-tip:focus-visible + .ai-info-tip__content {
    opacity: 1;
    visibility: visible;
  }

  .ai-window-value {
    position: relative;
    display: inline-block;
    cursor: help;
  }

  .ai-window-value::after {
    content: attr(data-tooltip);
  }

  .ai-window-value:hover::after,
  .ai-window-value:focus-visible::after {
    opacity: 1;
    visibility: visible;
  }

  .ai-dialog output {
    overflow-wrap: anywhere;
    font-weight: 700;
  }

  .ai-table caption {
    padding: var(--ai-space-4);
    color: var(--ai-text-muted);
    font-weight: 650;
    text-align: start;
  }

  .ai-table th,
  .ai-table td {
    border-block-end: 1px solid var(--ai-border);
    padding: var(--ai-space-3) var(--ai-space-4);
    text-align: start;
    vertical-align: top;
  }

  .ai-table th {
    position: relative;
    background: var(--ai-surface-subtle);
    color: var(--ai-ink);
    font-size: var(--ai-text-caption);
    font-weight: 750;
    letter-spacing: 0.03em;
  }

.ai-table tbody tr:hover {
    background: var(--ai-surface-subtle);
  }

  .ai-table tbody tr:last-child td {
    border-block-end: 0;
  }

  .ai-table__numeric {
    font-variant-numeric: tabular-nums;
    text-align: end !important;
    white-space: nowrap;
  }

  .ai-table__sort {
    display: inline-flex;
    min-block-size: var(--ai-touch-target);
    align-items: center;
    gap: var(--ai-space-2);
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    font: inherit;
    font-weight: inherit;
  }

  .ai-table-header {
    display: flex;
    min-inline-size: max-content;
    align-items: center;
    justify-content: space-between;
    gap: var(--ai-space-2);
  }

  .ai-table-header__controls {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.125rem;
  }

  .ai-table-header__control {
    display: inline-grid;
    inline-size: 1.375rem;
    block-size: 1.375rem;
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--ai-radius-xs);
    background: transparent;
    color: var(--ai-text-muted);
    padding: 0;
    cursor: pointer;
  }

  .ai-table-header__control:hover,
  .ai-table-header__control:focus-visible,
  .ai-table-header__control.is-active {
    border-color: var(--ai-border-strong);
    background: var(--ai-surface);
    color: var(--ai-ink);
  }

  .ai-table-header__control--sort::before {
    content: "↕";
    font-size: 0.75rem;
    line-height: 1;
  }

  th[aria-sort="ascending"] .ai-table-header__control--sort::before {
    content: "↑";
  }

  th[aria-sort="descending"] .ai-table-header__control--sort::before {
    content: "↓";
  }

  .ai-table-header__control--filter::before {
    inline-size: 0;
    block-size: 0;
    border-inline: 0.25rem solid transparent;
    border-block-start: 0.375rem solid currentColor;
    content: "";
  }

  .ai-table-filter-panel {
    position: fixed;
    z-index: var(--ai-z-dropdown);
    inset: auto;
    top: var(--ai-table-filter-top, var(--ai-gutter));
    left: var(--ai-table-filter-left, var(--ai-gutter));
    margin: 0;
    display: grid;
    inline-size: min(18rem, calc(100vw - 2 * var(--ai-gutter)));
    gap: var(--ai-space-3);
    border: 1px solid var(--ai-border-strong);
    border-radius: var(--ai-radius-md);
    background: var(--ai-surface);
    box-shadow: var(--ai-shadow-md);
    color: var(--ai-ink);
    padding: var(--ai-space-3);
    font-size: var(--ai-text-small);
    font-weight: 500;
    letter-spacing: normal;
  }

  .ai-table-row--link {
    cursor: pointer;
  }

  .ai-table-row--link:hover > * {
    background: var(--ai-surface-subtle);
  }

  .ai-table-filter-panel__choices {
    display: grid;
    max-block-size: 14rem;
    gap: var(--ai-space-1);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .ai-table-filter-panel__choice {
    display: flex;
    min-block-size: 2rem;
    align-items: center;
    gap: var(--ai-space-2);
    border-radius: var(--ai-radius-xs);
    padding-inline: var(--ai-space-2);
  }

  .ai-table-filter-panel__choice:hover {
    background: var(--ai-surface-subtle);
  }

  .ai-table-filter-panel__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--ai-space-2);
  }

  .ai-report-period {
    display: grid;
    gap: var(--ai-space-1);
    white-space: nowrap;
  }

  .ai-report-period__separator {
    color: var(--ai-text-muted);
    font-size: var(--ai-text-caption);
  }

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

  .ai-pagination__summary {
    margin: 0;
    color: var(--ai-text-muted);
    font-size: var(--ai-text-small);
    font-variant-numeric: tabular-nums;
  }

  .ai-pagination__actions {
    display: flex;
    gap: var(--ai-space-2);
  }

  .ai-progress {
    display: grid;
    gap: var(--ai-space-2);
  }

  progress.ai-progress {
    display: block;
    inline-size: 100%;
    block-size: 0.75rem;
    overflow: hidden;
    border: 0;
    border-radius: var(--ai-radius-pill);
    appearance: none;
    background: var(--ai-surface-strong);
  }

  progress.ai-progress::-webkit-progress-bar {
    background: var(--ai-surface-strong);
  }

  progress.ai-progress::-webkit-progress-value,
  progress.ai-progress::-moz-progress-bar {
    background: var(--ai-success);
  }

  .ai-progress__track {
    position: relative;
    block-size: 0.75rem;
    overflow: hidden;
    border-radius: var(--ai-radius-pill);
    background: var(--ai-surface-strong);
  }

  .ai-progress__native {
    inline-size: 100%;
    block-size: 0.75rem;
    overflow: hidden;
    border: 0;
    border-radius: var(--ai-radius-pill);
    appearance: none;
    background: var(--ai-surface-strong);
  }

  .ai-progress__native::-webkit-progress-bar {
    border-radius: var(--ai-radius-pill);
    background: var(--ai-surface-strong);
  }

  .ai-progress__native::-webkit-progress-value {
    border-radius: var(--ai-radius-pill);
    background: var(--ai-success);
  }

  .ai-progress__native::-moz-progress-bar {
    border-radius: var(--ai-radius-pill);
    background: var(--ai-success);
  }

  .ai-progress__bar {
    block-size: 100%;
    inline-size: var(--ai-progress, 0%);
    max-inline-size: 100%;
    border-radius: inherit;
    background: var(--ai-success);
  }

  .ai-progress[data-state="warning"] .ai-progress__bar {
    background: var(--ai-warning);
  }

  .ai-progress[data-state="danger"] .ai-progress__bar {
    background: var(--ai-danger);
  }

  .ai-progress__meta {
    display: flex;
    justify-content: space-between;
    gap: var(--ai-space-3);
    color: var(--ai-text-muted);
    font-size: var(--ai-text-caption);
    font-variant-numeric: tabular-nums;
  }

  .ai-chart {
    display: grid;
    gap: var(--ai-space-4);
  }

  .ai-chart__canvas {
    min-block-size: 18rem;
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius-sm);
    background:
      linear-gradient(to bottom, transparent 24%, var(--ai-chart-grid) 25%, transparent 26%),
      linear-gradient(to bottom, transparent 49%, var(--ai-chart-grid) 50%, transparent 51%),
      linear-gradient(to bottom, transparent 74%, var(--ai-chart-grid) 75%, transparent 76%);
    background-color: var(--ai-surface);
  }

  .ai-chart__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ai-space-3) var(--ai-space-5);
    font-size: var(--ai-text-small);
  }

  .ai-chart__legend-item {
    display: inline-flex;
    min-block-size: var(--ai-touch-target);
    align-items: center;
    gap: var(--ai-space-2);
  }

  .ai-chart__swatch {
    inline-size: 1rem;
    block-size: 0.25rem;
    border-radius: var(--ai-radius-pill);
    background: var(--ai-series-color, var(--ai-chart-1));
  }

  .ai-chart__summary {
    max-inline-size: var(--ai-reading);
    color: var(--ai-text-muted);
    font-size: var(--ai-text-small);
  }

  .ai-timeline {
    display: grid;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .ai-timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: var(--ai-space-4);
    padding-block-end: var(--ai-space-6);
  }

  .ai-timeline__item::before {
    position: absolute;
    inset-block: 1.25rem 0;
    inset-inline-start: 0.59375rem;
    inline-size: 1px;
    background: var(--ai-border);
    content: "";
  }

  .ai-timeline__item:last-child::before {
    display: none;
  }

  .ai-timeline__marker {
    position: relative;
    z-index: 1;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    border: 4px solid var(--ai-surface);
    border-radius: 50%;
    background: var(--ai-info);
    box-shadow: 0 0 0 1px var(--ai-info);
  }

  .ai-timeline__content {
    display: grid;
    gap: var(--ai-space-2);
  }

  .ai-timeline__time {
    color: var(--ai-text-muted);
    font-size: var(--ai-text-caption);
    font-variant-numeric: tabular-nums;
  }

  .ai-proposal {
    display: grid;
    gap: var(--ai-space-5);
    border: 1px solid var(--ai-estimated-border);
    border-radius: var(--ai-radius-md);
    background: var(--ai-estimated-surface);
    padding: var(--ai-space-5);
  }

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

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

  .ai-proposal__value {
    border: 1px solid var(--ai-estimated-border);
    border-radius: var(--ai-radius-sm);
    background: var(--ai-surface);
    padding: var(--ai-space-4);
  }

  .ai-proposal__value dt {
    color: var(--ai-text-muted);
    font-size: var(--ai-text-caption);
    font-weight: 750;
    text-transform: uppercase;
  }

  .ai-proposal__value dd {
    margin-block-start: var(--ai-space-1);
    font-variant-numeric: tabular-nums;
    font-weight: 750;
  }

  .ai-dialog {
    inline-size: min(36rem, calc(100% - 2 * var(--ai-gutter)));
    max-block-size: calc(100dvh - 2 * var(--ai-space-6));
    overflow: auto;
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius-md);
    background: var(--ai-surface);
    box-shadow: var(--ai-shadow-lg);
    color: var(--ai-ink);
    padding: 0;
  }

  .ai-dialog--wide {
    inline-size: min(64rem, calc(100% - 2 * var(--ai-gutter)));
  }

  .ai-dialog::backdrop {
    background: var(--ai-scrim);
  }

  .ai-dialog__content {
    display: grid;
    gap: var(--ai-space-5);
    padding: var(--ai-space-6);
  }

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

  .ai-dialog__header > div {
    min-inline-size: 0;
  }

  .ai-dialog__header .ai-icon-button {
    flex: 0 0 auto;
  }

  .ai-change-details__metadata {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ai-space-1) var(--ai-space-5);
    margin: 0;
  }

  .ai-change-details__metadata dt {
    color: var(--ai-text-muted);
    font-size: var(--ai-text-caption);
    font-weight: 750;
  }

  .ai-change-details__metadata dd {
    min-inline-size: 0;
    margin: 0 0 var(--ai-space-3);
    overflow-wrap: anywhere;
  }

  .ai-change-details__json {
    max-block-size: 24rem;
    overflow: auto;
    direction: ltr;
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius-sm);
    background: var(--ai-surface-subtle);
    color: var(--ai-ink);
    margin: 0;
    padding: var(--ai-space-4);
    font-family: var(--ai-font-mono);
    font-size: var(--ai-text-caption);
    line-height: var(--ai-leading-body);
    text-align: start;
    white-space: pre;
  }

  .ai-dialog__actions {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--ai-space-2);
  }

  .ai-toast-region {
    position: fixed;
    z-index: var(--ai-z-toast);
    inset-block-end: var(--ai-space-4);
    inset-inline-end: var(--ai-space-4);
    display: grid;
    inline-size: min(24rem, calc(100% - 2 * var(--ai-space-4)));
    gap: var(--ai-space-2);
  }

  .ai-toast {
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius-sm);
    background: var(--ai-ink-soft);
    box-shadow: var(--ai-shadow-md);
    color: var(--ai-on-dark);
    padding: var(--ai-space-4);
  }

  .ai-state {
    display: grid;
    place-items: center;
    min-block-size: 16rem;
    border: 1px dashed var(--ai-border-strong);
    border-radius: var(--ai-radius-md);
    padding: var(--ai-space-8);
    text-align: center;
  }

  .ai-state__content {
    display: grid;
    max-inline-size: 34rem;
    justify-items: center;
    gap: var(--ai-space-3);
  }

  .ai-state__content p {
    color: var(--ai-text-muted);
  }

  .ai-preview-hero {
    border-block-end: 1px solid var(--ai-border);
    background: var(--ai-canvas);
    padding: var(--ai-space-16) var(--ai-gutter);
  }

  .ai-preview-hero__inner {
    display: grid;
    inline-size: min(100%, var(--ai-container));
    margin-inline: auto;
    gap: var(--ai-space-5);
  }

  .ai-preview-hero__inner > p {
    max-inline-size: var(--ai-reading);
    color: var(--ai-text-muted);
    font-size: var(--ai-text-body-lg);
  }

  .ai-preview-display {
    max-inline-size: 18ch;
    font-family: var(--ai-font-display);
    font-size: var(--ai-text-display);
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 0.98;
    text-wrap: balance;
  }

  .ai-preview-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--ai-space-4);
  }

  .ai-preview-swatch {
    display: grid;
    gap: var(--ai-space-2);
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius-sm);
    background: var(--ai-surface);
    padding: var(--ai-space-3);
  }

  .ai-preview-swatch__sample {
    display: block;
    block-size: 5rem;
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius-xs);
    background: var(--ai-preview-color, var(--ai-surface));
  }

  .ai-preview-swatch--canvas {
    --ai-preview-color: var(--ai-canvas);
  }

  .ai-preview-swatch--surface {
    --ai-preview-color: var(--ai-surface);
  }

  .ai-preview-swatch--ink {
    --ai-preview-color: var(--ai-ink);
  }

  .ai-preview-swatch--gold {
    --ai-preview-color: var(--ai-brand-gold);
  }

  .ai-preview-swatch--success {
    --ai-preview-color: var(--ai-success);
  }

  .ai-preview-swatch--warning {
    --ai-preview-color: var(--ai-warning);
  }

  .ai-preview-swatch--danger {
    --ai-preview-color: var(--ai-danger);
  }

  .ai-preview-swatch--estimated {
    --ai-preview-color: var(--ai-estimated);
  }

  .ai-skeleton {
    position: relative;
    overflow: hidden;
    border-radius: var(--ai-radius-xs);
    background: var(--ai-surface-strong);
  }

  .ai-skeleton::after {
    position: absolute;
    inset: 0;
    translate: -100% 0;
    background: linear-gradient(
      90deg,
      transparent,
      rgb(255 253 248 / 55%),
      transparent
    );
    animation: ai-shimmer 1.4s infinite;
    content: "";
  }

  .ai-skeleton--text {
    inline-size: min(100%, 24rem);
    block-size: 1rem;
  }

  .ai-skeleton--title {
    inline-size: min(70%, 16rem);
    block-size: 2rem;
  }

  .ai-skeleton--card {
    min-block-size: 10rem;
  }

  @keyframes ai-spin {
    to {
      rotate: 1turn;
    }
  }

  @keyframes ai-shimmer {
    to {
      translate: 100% 0;
    }
  }
}

.ai-table-row--interactive {
  cursor: pointer;
}

.ai-table-row--interactive:focus-visible {
  outline: var(--ai-focus-ring);
  outline-offset: calc(var(--ai-space-1) * -1);
}

@layer ai-components {
  .ai-access {
    display: grid;
    min-block-size: 100dvh;
    grid-template-rows: auto 1fr auto auto;
    background:
      radial-gradient(
        circle at 12% 12%,
        var(--ai-surface) 0,
        var(--ai-surface) 12rem,
        transparent 12.1rem
      ),
      var(--ai-canvas);
  }

  .ai-access__topbar,
  .ai-access__main,
  .ai-access__status,
  .ai-access__footer {
    inline-size: min(100%, 80rem);
    margin-inline: auto;
    padding-inline: var(--ai-gutter);
  }

  .ai-access__topbar {
    display: flex;
    min-block-size: var(--ai-topbar-height);
    align-items: center;
    justify-content: space-between;
    gap: var(--ai-space-4);
    padding-block: var(--ai-space-3);
  }

  .ai-access__brand {
    display: grid;
    color: var(--ai-ink);
    line-height: var(--ai-leading-compact);
    text-decoration: none;
  }

  .ai-access__brand strong {
    font-size: var(--ai-text-small);
    font-weight: 800;
  }

  .ai-access__brand span {
    color: var(--ai-text-muted);
    font-size: var(--ai-text-caption);
  }

  .ai-language-switcher {
    display: flex;
    align-items: center;
    gap: var(--ai-space-1);
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius-pill);
    background: var(--ai-surface);
    padding: var(--ai-space-1);
  }

  .ai-language-switcher a {
    display: inline-flex;
    min-block-size: var(--ai-touch-target);
    align-items: center;
    border-radius: var(--ai-radius-pill);
    color: var(--ai-text-muted);
    padding-inline: var(--ai-space-3);
    font-size: var(--ai-text-small);
    font-weight: 700;
    text-decoration: none;
  }

  .ai-language-switcher a[aria-current="page"] {
    background: var(--ai-ink);
    color: var(--ai-on-dark);
  }

  .ai-access__main {
    display: grid;
    align-items: center;
    gap: var(--ai-space-8);
    padding-block: var(--ai-space-10) var(--ai-space-16);
  }

  .ai-access__intro {
    display: grid;
    max-inline-size: 42rem;
    gap: var(--ai-space-5);
  }

  .ai-access__intro h1 {
    max-inline-size: 16ch;
    font-size: clamp(2.5rem, 7vw, 5rem);
  }

  .ai-access__summary {
    max-inline-size: 40rem;
    color: var(--ai-text-muted);
    font-size: var(--ai-text-body-lg);
  }

  .ai-access__trust-list {
    display: grid;
    gap: var(--ai-space-3);
    list-style: none;
    margin: var(--ai-space-3) 0 0;
    padding: 0;
  }

  .ai-access__trust-list li {
    display: grid;
    grid-template-columns: minmax(7.5rem, 0.4fr) minmax(0, 1fr);
    gap: var(--ai-space-4);
    border-block-start: 1px solid var(--ai-border);
    padding-block-start: var(--ai-space-3);
  }

  .ai-access__trust-list strong {
    font-size: var(--ai-text-small);
  }

  .ai-access__trust-list span {
    color: var(--ai-text-muted);
    font-size: var(--ai-text-small);
  }

  .ai-access-panel {
    display: grid;
    gap: var(--ai-space-5);
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius-lg);
    background: var(--ai-surface);
    box-shadow: var(--ai-shadow-md);
    padding: clamp(var(--ai-space-5), 4vw, var(--ai-space-8));
  }

  .ai-access-panel__header,
  .ai-access-panel__secondary {
    display: grid;
    gap: var(--ai-space-3);
  }

  .ai-access-panel__header .ai-badge {
    justify-self: start;
  }

  .ai-access-panel__header p,
  .ai-access-panel__secondary p {
    color: var(--ai-text-muted);
  }

  .ai-access-panel__action {
    inline-size: 100%;
  }

  .ai-access__status {
    display: grid;
    gap: var(--ai-space-4);
    border-block: 1px solid var(--ai-border);
    padding-block: var(--ai-space-5);
    color: var(--ai-text-muted);
    font-size: var(--ai-text-small);
  }

  .ai-access__status > div {
    display: grid;
    gap: var(--ai-space-1);
  }

  .ai-access__status-label {
    color: var(--ai-ink);
    font-weight: 800;
  }

  .ai-access__footer {
    display: grid;
    gap: var(--ai-space-2);
    padding-block: var(--ai-space-6);
    color: var(--ai-text-muted);
    font-size: var(--ai-text-caption);
  }

  .ai-public {
    grid-template-rows: auto 1fr auto;
  }

  .ai-public-nav-group,
  .ai-public-nav,
  .ai-public-footer-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ai-space-2);
  }

  .ai-public-nav-group {
    justify-content: flex-end;
  }

  .ai-public-nav a,
  .ai-public-footer-nav a {
    min-block-size: var(--ai-touch-target);
    display: inline-flex;
    align-items: center;
    border-radius: var(--ai-radius-pill);
    color: var(--ai-text-muted);
    padding-inline: var(--ai-space-3);
    font-size: var(--ai-text-small);
    font-weight: 700;
    text-decoration: none;
  }

  .ai-public-nav a[aria-current="page"] {
    color: var(--ai-ink);
    text-decoration: underline;
    text-decoration-color: var(--ai-brand-gold);
    text-decoration-thickness: 0.125rem;
    text-underline-offset: 0.4em;
  }

  .ai-public__main {
    inline-size: min(100%, 80rem);
    margin-inline: auto;
    padding: var(--ai-space-8) var(--ai-gutter) var(--ai-space-16);
  }

  .ai-public-hero {
    display: grid;
    align-items: center;
    gap: var(--ai-space-8);
    min-block-size: min(42rem, calc(100dvh - var(--ai-topbar-height)));
    padding-block: var(--ai-space-8) var(--ai-space-12);
  }

  .ai-public-hero--compact {
    min-block-size: auto;
  }

  .ai-public-hero__copy {
    display: grid;
    max-inline-size: 46rem;
    gap: var(--ai-space-5);
  }

  .ai-public-kicker {
    color: var(--ai-brand-gold-text);
    font-size: var(--ai-text-caption);
    font-weight: 800;
    letter-spacing: 0.04em;
  }

  .ai-public-hero h1 {
    max-inline-size: 17ch;
    font-size: clamp(2.5rem, 6vw, 4.75rem);
  }

  .ai-public-hero--compact h1 {
    max-inline-size: 20ch;
    font-size: clamp(2.25rem, 5vw, 4rem);
  }

  .ai-public-hero__summary {
    max-inline-size: 42rem;
    color: var(--ai-text-muted);
    font-size: var(--ai-text-body-lg);
  }

  .ai-public-card {
    display: grid;
    align-content: start;
    gap: var(--ai-space-3);
  }

  .ai-public-card p:last-child,
  .ai-public-scope p:last-child,
  .ai-public-steps p,
  .ai-public-cta p {
    color: var(--ai-text-muted);
  }

  .ai-public-scope {
    display: grid;
    gap: var(--ai-space-3);
  }

  .ai-public-scope p:last-child {
    color: var(--ai-nav-muted);
  }

  .ai-public-process {
    border-block: 1px solid var(--ai-border);
    padding-block: var(--ai-space-10);
  }

  .ai-public-steps {
    display: grid;
    gap: var(--ai-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ai-public-steps li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--ai-space-4);
    align-items: start;
  }

  .ai-public-steps li > div {
    display: grid;
    gap: var(--ai-space-1);
    padding-block-start: var(--ai-space-1);
  }

  .ai-public-steps__number {
    display: grid;
    inline-size: var(--ai-touch-target);
    block-size: var(--ai-touch-target);
    place-items: center;
    border: 1px solid var(--ai-border-strong);
    border-radius: 50%;
    background: var(--ai-surface);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }

  .ai-public-cta {
    display: grid;
    align-items: center;
    gap: var(--ai-space-5);
    margin-block-start: var(--ai-space-12);
    border-radius: var(--ai-radius-lg);
    background: var(--ai-surface-subtle);
    padding: clamp(var(--ai-space-5), 5vw, var(--ai-space-10));
  }

  .ai-public-cta > div {
    display: grid;
    gap: var(--ai-space-2);
  }

  .ai-public-footer-nav {
    justify-content: flex-end;
  }

  .ai-privacy {
    display: grid;
    gap: var(--ai-space-8);
  }

  .ai-privacy__header {
    padding-block-end: 0;
  }

  .ai-privacy__header .ai-page-header__copy {
    max-inline-size: 56rem;
  }

  .ai-privacy-highlights {
    align-items: stretch;
  }

  .ai-privacy-toc {
    display: grid;
    gap: var(--ai-space-4);
  }

  .ai-privacy-toc ol {
    display: grid;
    gap: var(--ai-space-2) var(--ai-space-6);
    margin: 0;
    padding-inline-start: var(--ai-space-6);
  }

  .ai-privacy-toc a {
    color: var(--ai-link);
    text-underline-offset: 0.2em;
  }

  .ai-privacy-grid {
    display: grid;
    gap: var(--ai-space-5);
  }

  .ai-privacy-section {
    align-content: start;
    scroll-margin-block-start: var(--ai-space-6);
  }

  .ai-privacy-section p {
    max-inline-size: 72ch;
    color: var(--ai-text-muted);
  }
}

@layer ai-utilities {
  .ai-visually-hidden {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  .ai-text-muted {
    color: var(--ai-text-muted);
  }

  .ai-text-danger {
    color: var(--ai-danger);
  }

  .ai-text-success {
    color: var(--ai-success);
  }

  .ai-tabular {
    font-variant-numeric: tabular-nums;
  }

  .ai-align-end {
    text-align: end;
  }

  .ai-nowrap {
    white-space: nowrap;
  }

  .ai-break-anywhere {
    overflow-wrap: anywhere;
  }

  .ai-divider {
    border-block-start: 1px solid var(--ai-border);
    margin-block: var(--ai-space-5);
  }
}

@layer ai-responsive {
  @media (min-width: 30rem) {
    :root {
      --ai-gutter: 1.25rem;
    }

    .ai-dialog__actions {
      flex-direction: row;
      justify-content: end;
    }

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

  @media (min-width: 48rem) {
    :root {
      --ai-gutter: 1.5rem;
    }

    .ai-public-cta {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .ai-public-steps {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ai-privacy-toc ol {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ai-page {
      padding-block-start: var(--ai-space-8);
    }

    .ai-change-details__metadata {
      grid-template-columns: minmax(9rem, 0.3fr) minmax(0, 1fr);
    }

    .ai-page-header {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
    }

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

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

    .ai-campaign-filters {
      grid-template-columns: minmax(14rem, 2fr) minmax(10rem, 1fr);
    }

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

    .ai-split {
      grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
    }

    .ai-preview-hero {
      padding-block: var(--ai-space-24);
    }
  }

  @media (min-width: 64rem) {
    :root {
      --ai-gutter: 2rem;
    }

    .ai-public-hero {
      grid-template-columns: minmax(0, 1.25fr) minmax(21rem, 0.75fr);
      gap: var(--ai-space-16);
    }

    .ai-privacy-toc ol {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

    .ai-app {
      display: grid;
      block-size: 100dvh;
      min-block-size: 0;
      grid-template-columns: var(--ai-sidebar-width) minmax(0, 1fr);
      overflow: hidden;
    }

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

    .ai-app[data-sidebar-collapsed="true"] {
      grid-template-columns: var(--ai-sidebar-collapsed-width) minmax(0, 1fr);
    }

    .ai-sidebar {
      position: relative;
      inset-block-start: 0;
      display: block;
      block-size: 100dvh;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
    }

    .ai-main {
      block-size: 100dvh;
      min-block-size: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
    }

    .ai-app[data-sidebar-collapsed="true"] .ai-sidebar__inner {
      gap: var(--ai-space-4);
      padding-inline: var(--ai-space-2);
    }

    .ai-app[data-sidebar-collapsed="true"] .ai-sidebar__header {
      flex-direction: column;
      gap: var(--ai-space-2);
    }

    .ai-app[data-sidebar-collapsed="true"] .ai-brand {
      justify-content: center;
    }

    .ai-app[data-sidebar-collapsed="true"] .ai-brand__text,
    .ai-app[data-sidebar-collapsed="true"] .ai-tenant-context,
    .ai-app[data-sidebar-collapsed="true"] .ai-nav__label,
    .ai-app[data-sidebar-collapsed="true"] .ai-nav__label-text,
    .ai-app[data-sidebar-collapsed="true"] .ai-amazon-tree__name,
    .ai-app[data-sidebar-collapsed="true"] .ai-amazon-profile-name,
    .ai-app[data-sidebar-collapsed="true"] .ai-amazon-profile-editor,
    .ai-app[data-sidebar-collapsed="true"] .ai-amazon-account-empty {
      display: none !important;
    }

    .ai-app[data-sidebar-collapsed="true"] .ai-nav__section-summary {
      display: none;
    }

    .ai-app[data-sidebar-collapsed="true"]
      .ai-nav__section:not([open])
      > .ai-nav__section-items {
      display: grid;
    }

    .ai-app[data-sidebar-collapsed="true"] .ai-nav__link {
      justify-content: center;
      gap: 0;
      padding-inline: var(--ai-space-2);
    }

    .ai-app[data-sidebar-collapsed="true"] .ai-nav__icon {
      margin-inline: auto;
    }

    .ai-app[data-sidebar-collapsed="true"] .ai-amazon-tree__summary,
    .ai-app[data-sidebar-collapsed="true"] .ai-amazon-account-tree__summary {
      justify-content: center;
    }

    .ai-app[data-sidebar-collapsed="true"] .ai-amazon-tree__icon,
    .ai-app[data-sidebar-collapsed="true"] .ai-amazon-tree__link-icon,
    .ai-app[data-sidebar-collapsed="true"] .ai-amazon-profile-icon {
      display: inline-flex;
    }

    .ai-app[data-sidebar-collapsed="true"] .ai-amazon-profile-bullet {
      display: none;
    }

    .ai-app[data-sidebar-collapsed="true"] .ai-amazon-profile-row {
      justify-content: center;
      gap: 0;
    }

    .ai-app[data-sidebar-collapsed="true"] .ai-sidebar__inner {
      padding-inline: var(--ai-space-3);
      padding-block-end: var(--ai-space-5);
    }

    .ai-app[data-sidebar-collapsed="true"] .ai-sidebar__header {
      min-block-size: auto;
      border-block-end-color: var(--ai-text-muted);
      padding-block: var(--ai-space-4);
    }

    .ai-app[data-sidebar-collapsed="true"] .ai-brand__mark {
      inline-size: var(--ai-space-10);
      block-size: var(--ai-space-10);
      border-radius: var(--ai-radius-sm);
    }

    .ai-app[data-sidebar-collapsed="true"] .ai-nav {
      gap: var(--ai-space-2);
      margin-block-start: 0;
    }

    .ai-app[data-sidebar-collapsed="true"] .ai-nav__link,
    .ai-app[data-sidebar-collapsed="true"] .ai-amazon-tree__summary,
    .ai-app[data-sidebar-collapsed="true"] .ai-amazon-tree__toggle,
    .ai-app[data-sidebar-collapsed="true"] .ai-amazon-profile-row {
      min-inline-size: var(--ai-touch-target);
      min-block-size: var(--ai-touch-target);
    }

    .ai-app[data-sidebar-collapsed="true"] .ai-amazon-tree {
      gap: var(--ai-space-2);
      margin-block-start: var(--ai-space-2);
      padding-block-start: var(--ai-space-3);
    }

    .ai-app[data-sidebar-collapsed="true"] .ai-amazon-tree__summary {
      padding-inline: 0;
    }

    .ai-app[data-sidebar-collapsed="true"] .ai-amazon-tree__children {
      gap: var(--ai-space-2);
    }

    .ai-app[data-sidebar-collapsed="true"] .ai-amazon-account-tree {
      border: 0;
      background: transparent;
      padding: 0;
    }

    .ai-app[data-sidebar-collapsed="true"] .ai-amazon-account-tree__summary {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      justify-items: center;
      gap: var(--ai-space-1);
    }

    .ai-app[data-sidebar-collapsed="true"] .ai-amazon-account-list {
      inline-size: var(--ai-touch-target);
      flex: 0 0 auto;
      padding-inline: 0;
    }

    .ai-app[data-sidebar-collapsed="true"] .ai-amazon-tree__toggle {
      inline-size: var(--ai-touch-target);
      border-color: var(--ai-text-muted);
      border-radius: var(--ai-radius-pill);
      background: var(--ai-ink);
      margin-inline-start: 0;
    }

    .ai-app[data-sidebar-collapsed="true"] .ai-amazon-tree__marker {
      font-size: var(--ai-text-body-lg);
    }

    .ai-app[data-sidebar-collapsed="true"] .ai-amazon-account-children {
      margin-inline-start: 0;
      padding: 0;
    }

    .ai-app[data-sidebar-collapsed="true"] .ai-amazon-profile-icon {
      inline-size: var(--ai-space-8);
      block-size: var(--ai-space-8);
      border-color: var(--ai-text-muted);
      background: var(--ai-ink);
      color: var(--ai-nav-text);
    }

    .ai-mobile-nav {
      display: none;
    }

    .ai-topbar {
      padding-inline: var(--ai-gutter);
    }

    .ai-page {
      padding-block-start: var(--ai-space-10);
    }

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

  @media (min-width: 80rem) {
    .ai-grid--4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ai-tool-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (max-width: 29.99rem) {
    .ai-topbar__context {
      display: none;
    }

    .ai-topbar__meta {
      display: none;
    }

    .ai-topbar__actions {
      flex: 1;
      flex-wrap: nowrap;
      gap: var(--ai-space-1);
      justify-content: flex-end;
      min-inline-size: 0;
    }

    .ai-topbar__actions > .ai-badge {
      display: none;
    }

    .ai-topbar .ai-language-switcher {
      flex: 0 0 auto;
      inline-size: auto;
    }

    .ai-topbar .ai-language-switcher a {
      flex: 0 0 auto;
      padding-inline: var(--ai-space-2);
    }

    .ai-topbar .ai-button--small {
      padding-inline: var(--ai-space-2);
    }

    .ai-page-header .ai-action-row,
    .ai-page-header .ai-button {
      inline-size: 100%;
    }

    .ai-section-header {
      align-items: start;
      flex-direction: column;
    }

    .ai-toolbar {
      align-items: stretch;
      flex-direction: column;
    }

    .ai-definition-list > div {
      grid-template-columns: 1fr;
      gap: var(--ai-space-1);
    }
  }

  .ai-whatsapp-number {
    display: grid;
    gap: var(--ai-space-4);
    padding: var(--ai-space-5);
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius-lg);
    background: var(--ai-surface);
  }

  .ai-whatsapp-number__header,
  .ai-whatsapp-code,
  .ai-whatsapp-message footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ai-space-3);
  }

  .ai-whatsapp-code {
    padding: var(--ai-space-4);
    border-inline-start: 4px solid var(--ai-brand-gold);
    background: var(--ai-surface-subtle);
  }

  .ai-whatsapp-code__value,
  .ai-whatsapp-code__timer {
    font-variant-numeric: tabular-nums;
  }

  .ai-whatsapp-code__value {
    font-size: var(--ai-text-h2);
    font-weight: 700;
    letter-spacing: 0.12em;
  }

  .ai-whatsapp-admin {
    display: grid;
    grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr);
    gap: var(--ai-space-5);
    min-block-size: 32rem;
  }

  .ai-whatsapp-title {
    white-space: nowrap;
  }

  .ai-whatsapp-conversations,
  .ai-whatsapp-chat {
    min-inline-size: 0;
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius-lg);
    background: var(--ai-surface);
  }

  .ai-whatsapp-conversations {
    display: flex;
    flex-direction: column;
    padding: var(--ai-space-2);
  }

  .ai-whatsapp-conversation-list {
    display: flex;
    flex-direction: column;
    max-block-size: min(58vh, 42rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .ai-whatsapp-conversation {
    display: grid;
    gap: var(--ai-space-1);
    min-block-size: 3rem;
    padding: var(--ai-space-3);
    border-radius: var(--ai-radius-md);
    color: var(--ai-ink);
    text-decoration: none;
  }

  .ai-whatsapp-conversation:hover,
  .ai-whatsapp-conversation:focus-visible,
  .ai-whatsapp-conversation[aria-current="page"] {
    background: var(--ai-surface-subtle);
  }

  .ai-whatsapp-chat {
    display: flex;
    flex-direction: column;
    gap: var(--ai-space-5);
    padding: var(--ai-space-5);
  }

  .ai-whatsapp-message-list {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--ai-space-3);
    max-block-size: min(58vh, 42rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-inline-end: var(--ai-space-2);
  }

  .ai-whatsapp-message {
    inline-size: min(80%, 42rem);
    padding: var(--ai-space-4);
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius-lg);
    overflow-wrap: anywhere;
  }

  .ai-whatsapp-message--inbound {
    align-self: flex-start;
    background: var(--ai-surface-subtle);
  }

  .ai-whatsapp-message--outbound {
    align-self: flex-end;
    border-color: var(--ai-info-border);
    background: var(--ai-info-surface);
  }

  .ai-whatsapp-message footer {
    margin-block-start: var(--ai-space-3);
    color: var(--ai-text-muted);
    font-size: var(--ai-text-small);
  }

  .ai-whatsapp-composer {
    display: grid;
    gap: var(--ai-space-4);
    padding-block-start: var(--ai-space-5);
    border-block-start: 1px solid var(--ai-border);
  }

  .ai-whatsapp-composer__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ai-space-3);
  }

  .ai-whatsapp-composer__message {
    min-block-size: 2.75rem;
    resize: none;
    overflow-y: hidden;
  }

  .ai-whatsapp-composer__message--scroll {
    overflow-y: auto;
  }

  .ai-optimizer-group > summary {
    cursor: pointer;
  }

  .ai-optimizer-suggestion-list {
    display: grid;
    min-inline-size: 0;
    overflow: hidden;
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius-md);
  }

  .ai-optimizer-subgroup h3 {
    margin: 0;
    color: var(--ai-text-muted);
    font-size: var(--ai-text-body);
  }

  .ai-optimizer-suggestion {
    display: grid;
    grid-template-columns: minmax(7rem, 9rem) 3rem minmax(0, 1fr);
    align-items: start;
    gap: var(--ai-space-3);
    padding: var(--ai-space-4);
    border-block-end: 1px solid var(--ai-border);
    background: var(--ai-surface);
  }

  .ai-optimizer-suggestion:last-child {
    border-block-end: 0;
  }

  .ai-optimizer-suggestion--header {
    color: var(--ai-text-muted);
    background: var(--ai-surface-subtle);
    font-size: var(--ai-text-small);
    font-weight: var(--ai-weight-semibold);
  }

  .ai-optimizer-suggestion__status {
    min-inline-size: 0;
  }

  .ai-optimizer-suggestion__select {
    display: flex;
    min-block-size: 2rem;
    align-items: center;
  }

  .ai-optimizer-suggestion__body {
    display: grid;
    min-inline-size: 0;
    gap: var(--ai-space-2);
    overflow-wrap: anywhere;
  }

  .ai-optimizer-suggestion__body small {
    color: var(--ai-text-muted);
  }

  .ai-inline-amount {
    display: flex;
    min-inline-size: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ai-space-2);
  }

  .ai-inline-amount__label {
    color: var(--ai-text-muted);
    font-size: var(--ai-text-small);
    font-weight: var(--ai-weight-semibold);
  }

  .ai-inline-amount__value {
    min-block-size: 2.75rem;
    padding-inline: var(--ai-space-3);
    border: 1px dashed var(--ai-border-strong);
    border-radius: var(--ai-radius-sm);
    color: var(--ai-info);
    background: var(--ai-surface-subtle);
    font: inherit;
    font-variant-numeric: tabular-nums;
    cursor: text;
  }

  .ai-inline-amount__value:hover,
  .ai-inline-amount__value:focus-visible {
    border-style: solid;
    outline: 3px solid var(--ai-info);
    outline-offset: 3px;
  }

  .ai-inline-amount__field {
    display: grid;
    gap: var(--ai-space-1);
    color: var(--ai-text-muted);
    font-size: var(--ai-text-small);
    font-weight: var(--ai-weight-semibold);
  }

  .ai-inline-amount__field[hidden],
  .ai-inline-amount__value[hidden] {
    display: none;
  }

  .ai-inline-amount__field .ai-input {
    inline-size: min(10rem, 45vw);
    font-variant-numeric: tabular-nums;
  }

  .ai-inline-amount > small,
  .ai-inline-amount > .ai-field__help {
    flex-basis: 100%;
  }

  @media (max-width: 767px) {
    .ai-whatsapp-admin {
      grid-template-columns: 1fr;
    }

    .ai-whatsapp-title {
      font-size: var(--ai-text-h2);
    }

    .ai-whatsapp-message {
      inline-size: 100%;
    }

    .ai-optimizer-suggestion {
      grid-template-columns: minmax(6.5rem, auto) 2.5rem minmax(0, 1fr);
      gap: var(--ai-space-2);
      padding: var(--ai-space-3);
    }

  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }

    .ai-card--interactive:hover,
    .ai-card--interactive:focus-within {
      translate: 0;
    }

    .ai-skeleton::after {
      display: none;
    }
  }

  @media (forced-colors: active) {
    :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
      outline: 3px solid Highlight;
    }

    .ai-badge::before,
    .ai-alert::before,
    .ai-progress__bar,
    .ai-timeline__marker {
      forced-color-adjust: none;
    }

    .ai-card,
    .ai-alert,
    .ai-table-region,
    .ai-toolbar,
    .ai-input,
    .ai-select,
    .ai-textarea {
      border-color: CanvasText;
    }
  }

  @media print {
    :root {
      color-scheme: light;
      --ai-canvas: #fff;
      --ai-surface: #fff;
      --ai-ink: #000;
      --ai-text-muted: #333;
      --ai-border: #aaa;
    }

    .ai-sidebar,
    .ai-topbar,
    .ai-button,
    .ai-toast-region,
    .ai-mobile-nav {
      display: none !important;
    }

    .ai-app {
      display: block;
    }

    .ai-page {
      max-inline-size: none;
      padding: 0;
    }

    .ai-card,
    .ai-table-region {
      break-inside: avoid;
      box-shadow: none;
    }

    a {
      color: #000;
    }
  }
}