/* Hallmark · component: system · genre: modern-minimal · theme: Aqto default
   states: default · hover · focus · active · disabled · loading · error · success
   pre-emit critique: P5 H4 E5 S5 R5 V5 · contrast: pass */
/*
  AqtoUI Design System
  Pure CSS + semantic HTML component primitives for generated Aqto apps.
  Version: 0.1.0
*/

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Brand */
  --aq-color-brand: #007985;
  --aq-color-brand-hover: #006b75;
  --aq-color-brand-active: #005c66;
  --aq-color-brand-soft: #e6fbfd;
  --aq-color-brand-contrast: #ffffff;

  /* Neutrals */
  --aq-color-bg: #ffffff;
  --aq-color-surface: #ffffff;
  --aq-color-surface-2: #f7f8fa;
  --aq-color-surface-3: #eef1f4;
  --aq-color-border: #d9dee5;
  --aq-color-border-strong: #aeb7c2;
  --aq-color-text: #111827;
  --aq-color-heading: var(--aq-color-text);
  --aq-color-muted: #5f6b7a;
  --aq-color-subtle: #687586;
  --aq-color-inverse: #ffffff;
  --aq-color-link: var(--aq-color-brand);
  --aq-color-accent: var(--aq-color-brand);
  --aq-color-focus: #075985;

  /* Semantic */
  --aq-color-success: #0f7132;
  --aq-color-success-soft: #eaf8ef;
  --aq-color-warning: #8a4d00;
  --aq-color-warning-soft: #fff5df;
  --aq-color-danger: #c62828;
  --aq-color-danger-soft: #fff0f0;
  --aq-color-info: #155eef;
  --aq-color-info-soft: #eef4ff;

  /* Typography */
  --aq-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --aq-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --aq-text-xs: 0.75rem;
  --aq-text-sm: 0.875rem;
  --aq-text-md: 1rem;
  --aq-text-lg: 1.125rem;
  --aq-text-xl: 1.25rem;
  --aq-text-2xl: 1.5rem;
  --aq-text-3xl: 1.875rem;
  --aq-text-4xl: 2.25rem;
  --aq-text-5xl: 3rem;
  --aq-text-6xl: 3.75rem;
  --aq-leading-tight: 1.2;
  --aq-leading-normal: 1.5;
  --aq-leading-relaxed: 1.7;

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

  /* Radius / shadows */
  --aq-radius-sm: 0.375rem;
  --aq-radius-md: 0.625rem;
  --aq-radius-lg: 0.875rem;
  --aq-radius-xl: 1.25rem;
  --aq-radius-pill: 999px;
  --aq-shadow-xs: 0 1px 1px rgb(16 24 40 / 0.08);
  --aq-shadow-sm: 0 1px 2px rgb(16 24 40 / 0.08);
  --aq-shadow-md: 0 8px 24px rgb(16 24 40 / 0.12);
  --aq-shadow-lg: 0 18px 48px rgb(16 24 40 / 0.16);
  --aq-color-control-bg: #ffffff;
  --aq-color-control-bg-hover: #fcfdfe;
  --aq-color-control-bg-active: #f4f7fa;
  --aq-color-control-disabled: #eceef2;
  --aq-color-control-disabled-text: #95a1ae;

  /* Interaction */
  --aq-duration-instant: 0ms;
  --aq-duration-fast: 120ms;
  --aq-duration-moderate: 220ms;
  --aq-duration-slow: 420ms;
  --aq-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --aq-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --aq-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --aq-control-height-sm: 2.25rem;
  --aq-touch-target: 44px;
  --aq-control-height: max(2.75rem, var(--aq-touch-target));
  --aq-control-height-lg: max(3rem, var(--aq-touch-target));
  --aq-focus-width: 2px;
  --aq-focus-offset: 2px;

  /* Content patterns */
  --aq-gallery-min: 14rem;
  --aq-gallery-gap: var(--aq-space-4);
  --aq-gallery-ratio: 4 / 3;
  --aq-event-date-width: 4rem;
  --aq-calendar-min-width: 42rem;
  --aq-calendar-cell-height: 7.5rem;
  --aq-timeline-marker-size: 0.875rem;
  --aq-progress-height: 0.5rem;
  --aq-pricing-min: 16rem;
  --aq-chart-height: 20rem;
  --aq-chart-bar-height: 0.75rem;
  --aq-chart-gap: var(--aq-space-4);

  /* Layout */
  --aq-container: 72rem;
  --aq-container-gutter: clamp(2rem, 6vw, 5rem);
  --aq-focus-ring: 0 0 0 2px var(--aq-color-surface), 0 0 0 5px var(--aq-color-focus);
}

[data-theme="dark"] {
  color-scheme: dark;
  --aq-color-brand: #67e8f9;
  --aq-color-brand-hover: #a5f3fc;
  --aq-color-brand-active: #22d3ee;
  --aq-color-brand-contrast: #082f49;
  --aq-color-link: var(--aq-color-brand);
  --aq-color-accent: var(--aq-color-brand);
  --aq-color-bg: #0b1015;
  --aq-color-surface: #111821;
  --aq-color-surface-2: #17202b;
  --aq-color-surface-3: #202b38;
  --aq-color-border: #2e3a49;
  --aq-color-border-strong: #4a596b;
  --aq-color-text: #f3f6f9;
  --aq-color-heading: var(--aq-color-text);
  --aq-color-muted: #aeb8c4;
  --aq-color-subtle: #8f9aaa;
  --aq-color-brand-soft: #063f46;
  --aq-color-focus: #67e8f9;
  --aq-focus-ring: 0 0 0 2px var(--aq-color-surface), 0 0 0 5px var(--aq-color-focus);
  --aq-color-success: #6ee7a0;
  --aq-color-success-soft: #0d2d19;
  --aq-color-warning: #fbbf24;
  --aq-color-warning-soft: #352405;
  --aq-color-danger: #fca5a5;
  --aq-color-danger-soft: #3a1111;
  --aq-color-info: #93c5fd;
  --aq-color-info-soft: #101f45;
  --aq-color-control-bg: #151d26;
  --aq-color-control-bg-hover: #1d2733;
  --aq-color-control-bg-active: #242f3f;
  --aq-color-control-disabled: #1c2532;
  --aq-color-control-disabled-text: #687a8f;
  --aq-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35);
  --aq-shadow-md: 0 8px 24px rgb(0 0 0 / 0.35);
  --aq-shadow-lg: 0 18px 48px rgb(0 0 0 / 0.45);
}

/* --------------------------------------------------------------------------
   2. Reset + Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--aq-color-bg);
  color: var(--aq-color-text);
  font-family: var(--aq-font-sans);
  font-size: var(--aq-text-md);
  line-height: var(--aq-leading-normal);
  text-rendering: optimizeLegibility;
}
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
[hidden] { display: none !important; }
a { color: var(--aq-color-link); text-underline-offset: 0.18em; }
a:hover { color: var(--aq-color-brand-hover); }
:focus-visible { outline: var(--aq-focus-width) solid var(--aq-color-focus); outline-offset: var(--aq-focus-offset); }
h1, h2, h3, h4, h5, h6 { color: var(--aq-color-heading); font-style: normal; overflow-wrap: anywhere; }
select::-ms-expand { display: none; }
::selection { background: var(--aq-color-brand); color: var(--aq-color-brand-contrast); }
.aqto-dynamic-app,
[data-aqto-app-root] { min-width: 0; overflow-x: clip; }

[data-density="compact"] {
  --aq-btn-height: var(--aq-control-height-sm);
  --aq-input-height: var(--aq-control-height-sm);
  --aq-btn-padding-inline: var(--aq-space-3);
  --aq-input-padding-inline: var(--aq-space-3);
  --aq-card-padding: var(--aq-space-4);
}
[data-density="comfortable"] {
  --aq-btn-height: var(--aq-control-height-lg);
  --aq-input-height: var(--aq-control-height-lg);
  --aq-btn-padding-inline: var(--aq-space-5);
  --aq-input-padding-inline: var(--aq-space-4);
  --aq-card-padding: var(--aq-space-8);
}

/* --------------------------------------------------------------------------
   3. Layout Utilities
   -------------------------------------------------------------------------- */
.aq-container { width: min(100% - var(--aq-container-gutter), var(--aq-container)); margin-inline: auto; }
.aq-section { padding-block: var(--aq-space-12); }
.aq-stack {
  display: flex;
  flex-direction: column;
  gap: var(--aq-stack-gap, var(--aq-space-4));
  list-style: none;
  margin-block: var(--aq-stack-margin-block, 0);
  padding-inline-start: var(--aq-stack-padding-inline-start, 0);
}
.aq-stack > :where(li, .aq-stack-item, [data-aqto-stack-item]),
.aq-stack.aq-stack--presented > :where(*:not(script, style, template, .aq-card, .aq-alert, .aq-empty, .aq-dialog, .aq-toast)) {
  --_stack-item-bg: var(--aq-stack-item-bg, color-mix(in srgb, var(--aq-color-surface) 94%, var(--aq-color-brand-soft)));
  --_stack-item-border: var(--aq-stack-item-border, color-mix(in srgb, var(--aq-color-border) 82%, var(--aq-color-brand) 18%));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--aq-color-brand-soft) 42%, transparent), transparent 42%),
    var(--_stack-item-bg);
  border: 1px solid var(--_stack-item-border);
  border-radius: var(--aq-stack-item-radius, var(--aq-radius-lg));
  box-shadow: var(--aq-stack-item-shadow, var(--aq-shadow-sm));
  color: var(--aq-color-text);
  min-width: 0;
  padding: var(--aq-stack-item-padding, var(--aq-space-4));
  position: relative;
  transition: border-color var(--aq-transition, var(--aq-duration-fast) var(--aq-ease-out)), box-shadow var(--aq-transition, var(--aq-duration-fast) var(--aq-ease-out)), transform var(--aq-transition, var(--aq-duration-fast) var(--aq-ease-out)), background var(--aq-transition, var(--aq-duration-fast) var(--aq-ease-out));
}
.aq-stack > :where(li, .aq-stack-item, [data-aqto-stack-item])::before,
.aq-stack.aq-stack--presented > :where(*:not(script, style, template, .aq-card, .aq-alert, .aq-empty, .aq-dialog, .aq-toast))::before {
  background: var(--aq-stack-item-accent, var(--aq-color-brand));
  border-radius: var(--aq-radius-pill);
  content: "";
  inset-block: var(--aq-stack-item-accent-inset, var(--aq-space-3));
  inset-inline-start: 0;
  opacity: var(--aq-stack-item-accent-opacity, 0.85);
  position: absolute;
  width: var(--aq-stack-item-accent-width, 0.2rem);
}
.aq-stack > :where(li, .aq-stack-item, [data-aqto-stack-item]):hover,
.aq-stack.aq-stack--presented > :where(*:not(script, style, template, .aq-card, .aq-alert, .aq-empty, .aq-dialog, .aq-toast)):hover {
  border-color: var(--aq-stack-item-hover-border, color-mix(in srgb, var(--aq-color-brand) 38%, var(--aq-color-border)));
  box-shadow: var(--aq-stack-item-hover-shadow, var(--aq-shadow-md));
  transform: translateY(var(--aq-stack-item-hover-lift, -1px));
}
.aq-stack > :where(li, .aq-stack-item, [data-aqto-stack-item]):has(> button),
.aq-stack.aq-stack--presented > :where(*:not(script, style, template, .aq-card, .aq-alert, .aq-empty, .aq-dialog, .aq-toast)):has(> button) {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--aq-stack-item-action-gap, var(--aq-space-3));
}
.aq-stack > :where(li, .aq-stack-item, [data-aqto-stack-item]):has(> button) > :where(span, strong, p):first-child,
.aq-stack.aq-stack--presented > :where(*:not(script, style, template, .aq-card, .aq-alert, .aq-empty, .aq-dialog, .aq-toast)):has(> button) > :where(span, strong, p):first-child {
  flex: 1 1 var(--aq-stack-item-label-basis, 12rem);
  min-width: 0;
}
.aq-stack > :where(li, .aq-stack-item, [data-aqto-stack-item]) > button:not([class]),
.aq-stack.aq-stack--presented > :where(*:not(script, style, template, .aq-card, .aq-alert, .aq-empty, .aq-dialog, .aq-toast)) > button:not([class]) {
  --_bg: var(--aq-stack-item-button-bg, var(--aq-color-surface-2));
  --_border: var(--aq-stack-item-button-border, var(--aq-color-border));
  --_color: var(--aq-stack-item-button-color, var(--aq-color-text));
  align-items: center;
  background: var(--_bg);
  border: 1px solid var(--_border);
  border-radius: var(--aq-stack-item-button-radius, var(--aq-radius-md));
  color: var(--_color);
  cursor: pointer;
  display: inline-flex;
  font-weight: 650;
  gap: var(--aq-space-2);
  justify-content: center;
  line-height: 1;
  min-height: var(--aq-stack-item-button-height, 2rem);
  padding: var(--aq-stack-item-button-padding, 0.45rem 0.7rem);
  text-decoration: none;
  transition: background var(--aq-transition, var(--aq-duration-fast) var(--aq-ease-out)), border-color var(--aq-transition, var(--aq-duration-fast) var(--aq-ease-out)), color var(--aq-transition, var(--aq-duration-fast) var(--aq-ease-out)), transform var(--aq-transition, var(--aq-duration-fast) var(--aq-ease-out)), box-shadow var(--aq-transition, var(--aq-duration-fast) var(--aq-ease-out));
  user-select: none;
}
.aq-stack > :where(li, .aq-stack-item, [data-aqto-stack-item]) > button:not([class]):hover,
.aq-stack.aq-stack--presented > :where(*:not(script, style, template, .aq-card, .aq-alert, .aq-empty, .aq-dialog, .aq-toast)) > button:not([class]):hover {
  border-color: var(--aq-stack-item-button-hover-border, var(--aq-color-border-strong));
  box-shadow: var(--aq-shadow-sm);
  transform: translateY(-1px);
}
.aq-stack > :where(li, .aq-stack-item, [data-aqto-stack-item]) > button:not([class]):focus-visible,
.aq-stack.aq-stack--presented > :where(*:not(script, style, template, .aq-card, .aq-alert, .aq-empty, .aq-dialog, .aq-toast)) > button:not([class]):focus-visible {
  outline: var(--aq-focus-width) solid var(--aq-color-focus);
  outline-offset: var(--aq-focus-offset);
}
.aq-stack > :where(li, .aq-stack-item, [data-aqto-stack-item]) > button:not([class]):where([data-action*="edit"], [data-action*="update"]),
.aq-stack.aq-stack--presented > :where(*:not(script, style, template, .aq-card, .aq-alert, .aq-empty, .aq-dialog, .aq-toast)) > button:not([class]):where([data-action*="edit"], [data-action*="update"]) {
  --_bg: var(--aq-stack-item-button-secondary-bg, var(--aq-color-surface-2));
  --_border: var(--aq-stack-item-button-secondary-border, var(--aq-color-border));
}
.aq-stack > :where(li, .aq-stack-item, [data-aqto-stack-item]) > button:not([class]):where([data-action*="delete"], [data-action*="remove"], [data-action*="danger"]),
.aq-stack.aq-stack--presented > :where(*:not(script, style, template, .aq-card, .aq-alert, .aq-empty, .aq-dialog, .aq-toast)) > button:not([class]):where([data-action*="delete"], [data-action*="remove"], [data-action*="danger"]) {
  --_bg: var(--aq-stack-item-button-danger-bg, var(--aq-color-danger));
  --_border: var(--aq-stack-item-button-danger-border, var(--aq-color-danger));
  --_color: var(--aq-stack-item-button-danger-color, #ffffff);
}
.aq-stack > :where(li, .aq-stack-item, [data-aqto-stack-item]) > button:not([class]):disabled,
.aq-stack.aq-stack--presented > :where(*:not(script, style, template, .aq-card, .aq-alert, .aq-empty, .aq-dialog, .aq-toast)) > button:not([class]):disabled {
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}
.aq-stack.aq-stack--plain > :where(*) {
  background: revert;
  border: revert;
  border-radius: revert;
  box-shadow: revert;
  padding: revert;
  transform: none;
}
.aq-stack.aq-stack--plain > :where(*)::before {
  content: none;
}
.aq-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aq-row-gap, var(--aq-space-3)); }
.aq-grid { display: grid; gap: var(--aq-grid-gap, var(--aq-space-4)); }
.aq-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aq-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aq-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.aq-grid-auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--aq-grid-min, 16rem)), 1fr)); }
@media (max-width: 760px) { .aq-grid-2, .aq-grid-3, .aq-grid-4 { grid-template-columns: 1fr; } }

/* Spacing helpers */
.aq-m-0 { margin: 0; } .aq-mt-2 { margin-top: var(--aq-space-2); } .aq-mt-4 { margin-top: var(--aq-space-4); } .aq-mt-8 { margin-top: var(--aq-space-8); }
.aq-p-3 { padding: var(--aq-space-3); } .aq-p-4 { padding: var(--aq-space-4); } .aq-p-6 { padding: var(--aq-space-6); } .aq-p-8 { padding: var(--aq-space-8); }

/* --------------------------------------------------------------------------
   4. Typography Utilities
   -------------------------------------------------------------------------- */
.aq-text-xsmall { font-size: var(--aq-text-xs); }
.aq-text-small { font-size: var(--aq-text-sm); }
.aq-text-medium { font-size: var(--aq-text-md); }
.aq-text-large { font-size: var(--aq-text-lg); }
.aq-text-xlarge { font-size: var(--aq-text-xl); }
.aq-text-2xlarge { font-size: var(--aq-text-2xl); }
.aq-text-3xlarge { font-size: var(--aq-text-3xl); }
.aq-text-4xlarge { font-size: var(--aq-text-4xl); }
.aq-text-5xlarge { font-size: var(--aq-text-5xl); }
.aq-text-6xlarge { font-size: var(--aq-text-6xl); }
.text-xs { font-size: var(--aq-text-xs); }
.text-sm { font-size: var(--aq-text-sm); }
.text-md, .text-base { font-size: var(--aq-text-md); }
.text-lg { font-size: var(--aq-text-lg); }
.text-xl { font-size: var(--aq-text-xl); }
.text-2xl { font-size: var(--aq-text-2xl); }
.text-3xl { font-size: var(--aq-text-3xl); }
.text-4xl { font-size: var(--aq-text-4xl); }
.text-5xl { font-size: var(--aq-text-5xl); }
.text-6xl { font-size: var(--aq-text-6xl); }
.aq-text-muted { color: var(--aq-color-muted); }
.aq-text-subtle { color: var(--aq-color-subtle); }
.aq-text-brand { color: var(--aq-color-brand); }
.aq-font-normal { font-weight: 400; }
.aq-font-medium { font-weight: 500; }
.aq-font-semibold { font-weight: 600; }
.aq-font-bold { font-weight: 700; }
.aq-leading-tight { line-height: var(--aq-leading-tight); }
.aq-leading-relaxed { line-height: var(--aq-leading-relaxed); }
.aq-prose { max-width: 70ch; }
.aq-prose > :first-child { margin-top: 0; }
.aq-prose > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.aq-btn {
  --_bg: var(--aq-btn-bg, var(--aq-color-surface));
  --_border: var(--aq-btn-border, var(--aq-color-border));
  --_color: var(--aq-btn-color, var(--aq-color-text));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--aq-space-2);
  min-height: var(--aq-btn-height, var(--aq-control-height));
  padding: 0.55rem var(--aq-btn-padding-inline, 0.95rem);
  border: 1px solid var(--_border);
  border-radius: var(--aq-btn-radius, var(--aq-radius-md));
  background: var(--_bg);
  color: var(--_color);
  box-shadow: var(--aq-btn-shadow, none);
  font-weight: var(--aq-btn-font-weight, 650);
  line-height: 1;
  letter-spacing: 0.002em;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  transition: background-color var(--aq-transition, var(--aq-duration-fast) var(--aq-ease-out)), border-color var(--aq-transition, var(--aq-duration-fast) var(--aq-ease-out)), color var(--aq-transition, var(--aq-duration-fast) var(--aq-ease-out)), transform var(--aq-transition, var(--aq-duration-fast) var(--aq-ease-out)), box-shadow var(--aq-transition, var(--aq-duration-fast) var(--aq-ease-out));
}
.aq-btn:active,
.aq-btn[data-state="active"] { transform: translateY(1px); box-shadow: var(--aq-shadow-sm); }
.aq-btn:focus-visible {
  outline: var(--aq-focus-width) solid var(--aq-color-focus);
  outline-offset: var(--aq-focus-offset);
  box-shadow: var(--aq-btn-shadow, none);
}
.aq-btn:disabled,
.aq-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  pointer-events: none;
}
.aq-btn-primary { --_bg: var(--aq-color-brand); --_border: var(--aq-color-brand); --_color: var(--aq-color-brand-contrast); }
.aq-btn-secondary { --_bg: var(--aq-color-surface-2); --_border: var(--aq-color-border); }
.aq-btn-outline { --_bg: transparent; --_border: var(--aq-color-border-strong); }
.aq-btn-ghost { --_bg: transparent; --_border: transparent; }
.aq-btn-danger { --_bg: var(--aq-color-danger); --_border: var(--aq-color-danger); --_color: #ffffff; }
.aq-btn-sm { --aq-btn-height: var(--aq-control-height-sm); --aq-btn-padding-inline: 0.7rem; --aq-btn-radius: var(--aq-radius-sm); font-size: var(--aq-text-sm); }
.aq-btn-lg { --aq-btn-height: var(--aq-control-height-lg); --aq-btn-padding-inline: 1.15rem; --aq-btn-radius: var(--aq-radius-lg); font-size: var(--aq-text-lg); }
.aq-btn-icon { width: var(--aq-btn-height, var(--aq-control-height)); padding-inline: 0; }
.aq-btn-block { width: 100%; }
.aq-btn:is([aria-busy="true"], [data-state="loading"]) {
  cursor: progress;
  pointer-events: none;
}
.aq-btn:is([aria-busy="true"], [data-state="loading"])::before {
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  content: "";
  animation: aq-spin 800ms linear infinite;
}
.aq-btn[data-state="error"] {
  --_border: var(--aq-color-danger);
  box-shadow: inset 0 -3px var(--aq-color-danger);
}
.aq-btn[data-state="success"] {
  --_border: var(--aq-color-success);
  box-shadow: inset 0 -3px var(--aq-color-success);
}
.aq-btn[data-state="error"]::after { content: "!"; font-weight: 800; }
.aq-btn[data-state="success"]::after { content: "✓"; font-weight: 800; }
@keyframes aq-spin { to { transform: rotate(1turn); } }
@media (hover: hover) and (pointer: fine) {
  .aq-btn:hover { transform: translateY(-1px); box-shadow: var(--aq-btn-hover-shadow, var(--aq-shadow-md)); }
  .aq-btn-primary:hover { --_bg: var(--aq-color-brand-hover); --_border: var(--aq-color-brand-hover); color: var(--aq-color-brand-contrast); }
}

/* --------------------------------------------------------------------------
   6. Forms
   -------------------------------------------------------------------------- */
.aq-field { display: grid; gap: var(--aq-space-2); min-width: 0; }
.aq-label { font-size: var(--aq-text-sm); font-weight: 600; color: var(--aq-color-text); }
.aq-help,
.aq-field-note {
  font-size: var(--aq-text-sm);
  color: var(--aq-color-muted);
  line-height: 1.35;
  min-height: 1lh;
}
.aq-input, .aq-select, .aq-textarea {
  width: 100%;
  min-height: var(--aq-input-height, var(--aq-control-height));
  padding: 0.62rem var(--aq-input-padding-inline, 0.8rem);
  padding-inline-end: max(2.75rem, var(--aq-input-padding-inline, 0.8rem));
  border: 1px solid var(--aq-color-border);
  border-radius: var(--aq-input-radius, var(--aq-radius-md));
  background: var(--aq-color-control-bg);
  color: var(--aq-color-text);
  box-shadow: var(--aq-shadow-xs);
  outline: var(--aq-focus-width) solid transparent;
  outline-offset: var(--aq-focus-offset);
  transition: border-color var(--aq-transition, var(--aq-duration-fast) var(--aq-ease-out)), box-shadow var(--aq-transition, var(--aq-duration-fast) var(--aq-ease-out)), background-color var(--aq-transition, var(--aq-duration-fast) var(--aq-ease-out)), color var(--aq-transition, var(--aq-duration-fast) var(--aq-ease-out));
}
.aq-input::placeholder, .aq-textarea::placeholder { color: var(--aq-color-subtle); }
@media (hover: hover) and (pointer: fine) {
  .aq-input:hover, .aq-select:hover, .aq-textarea:hover { background: var(--aq-color-control-bg-hover); border-color: var(--aq-color-border-strong); }
}
.aq-input:focus, .aq-select:focus, .aq-textarea:focus {
  border-color: var(--aq-color-brand);
  background: var(--aq-color-control-bg-active);
  outline-color: var(--aq-color-focus);
  box-shadow: var(--aq-shadow-xs);
}
.aq-input:disabled, .aq-select:disabled, .aq-textarea:disabled {
  background: var(--aq-color-control-disabled);
  color: var(--aq-color-control-disabled-text);
  cursor: not-allowed;
  opacity: 0.6;
}
.aq-input:read-only, .aq-textarea:read-only { background: var(--aq-color-surface-2); border-style: dashed; }
.aq-textarea { min-height: 7rem; resize: vertical; }
.aq-select { appearance: none; padding-right: 2.25rem; background-image: linear-gradient(45deg, transparent 50%, var(--aq-color-muted) 50%), linear-gradient(135deg, var(--aq-color-muted) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.aq-checkbox, .aq-radio {
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  min-height: 1rem;
  accent-color: var(--aq-color-brand);
  margin-top: 0.12rem;
}
.aq-field--error .aq-input,
.aq-field--error .aq-select,
.aq-field--error .aq-textarea {
  border-color: var(--aq-color-danger);
  box-shadow: inset 3px 0 var(--aq-color-danger);
}
.aq-field--error .aq-error-text,
.aq-field--error .aq-help {
  color: var(--aq-color-danger);
}
.aq-check-row { display: flex; align-items: flex-start; gap: var(--aq-space-2); }
.aq-field-error .aq-input, .aq-field-error .aq-select, .aq-field-error .aq-textarea { border-color: var(--aq-color-danger); }
.aq-field[data-state="success"] :is(.aq-input, .aq-select, .aq-textarea) { border-color: var(--aq-color-success); box-shadow: inset 0 -2px var(--aq-color-success); }
.aq-field[data-state="loading"] :is(.aq-input, .aq-select, .aq-textarea) { cursor: progress; }
.aq-field :is(.aq-input, .aq-select, .aq-textarea)[aria-invalid="true"] { border-color: var(--aq-color-danger); box-shadow: inset 3px 0 var(--aq-color-danger); }
.aq-error-text { color: var(--aq-color-danger); font-size: var(--aq-text-sm); }
.aq-input:focus-visible, .aq-select:focus-visible, .aq-textarea:focus-visible {
  border-color: var(--aq-color-brand);
  background: var(--aq-color-control-bg-active);
  outline-color: var(--aq-color-focus);
  box-shadow: var(--aq-shadow-xs);
}
.aqto-form {
  border-radius: var(--aq-radius-xl);
  border: 1px solid var(--aq-color-border);
  background: var(--aq-color-surface);
  box-shadow: var(--aq-shadow-sm);
}
.aqto-form .aqto-form__header {
  display: grid;
  gap: var(--aq-space-2);
  margin-bottom: var(--aq-space-3);
}
.aqto-form .aqto-form__header h2 {
  margin: 0;
  font-size: var(--aq-text-lg);
  line-height: var(--aq-leading-tight);
  letter-spacing: -0.01em;
}
.aqto-form .aqto-form__form {
  gap: var(--aq-space-4);
}
.aqto-form .aqto-form__choice {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--aq-space-2);
  margin-bottom: var(--aq-space-2);
}
.aqto-form .aqto-form__choices {
  display: grid;
  gap: var(--aq-space-2);
}
.aqto-form .aqto-form__field + .aqto-form__field,
.aqto-form .aq-field + .aq-field {
  margin-top: 0;
}
.aqto-form .aqto-form__actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--aq-space-2);
}
.aqto-form .aqto-form__status {
  margin-top: var(--aq-space-2);
  min-height: 1.1em;
}

/* --------------------------------------------------------------------------
   7. Cards, Badges, Alerts
   -------------------------------------------------------------------------- */
.aq-card {
  border: 1px solid var(--aq-card-border, var(--aq-color-border));
  border-radius: var(--aq-card-radius, var(--aq-radius-xl));
  padding: var(--aq-card-padding, clamp(var(--aq-space-5), 2vw, var(--aq-space-8)));
  background: var(--aq-card-bg, var(--aq-color-surface));
  box-shadow: var(--aq-card-shadow, var(--aq-shadow-sm));
  overflow: hidden;
}
.aq-card:has(> .aq-card-header, > .aq-card-body, > .aq-card-footer) { padding: 0; }
.aq-card-header, .aq-card-body, .aq-card-footer { padding: var(--aq-space-5); }
.aq-card-header { border-bottom: 1px solid var(--aq-color-border); }
.aq-card-footer { border-top: 1px solid var(--aq-color-border); background: var(--aq-color-surface-2); }
.aq-card-title { margin: 0; font-size: var(--aq-text-xl); line-height: var(--aq-leading-tight); }
.aq-card-description { margin: var(--aq-space-1) 0 0; color: var(--aq-color-muted); }
.aq-card--compact { --aq-card-padding: var(--aq-space-4); }
.aq-card--flat { --aq-card-shadow: none; }
.aq-card--raised { --aq-card-shadow: var(--aq-shadow-md); }
.aq-card--interactive,
a.aq-card,
button.aq-card {
  color: var(--aq-color-text);
  cursor: pointer;
  text-align: start;
  text-decoration: none;
  transition: border-color var(--aq-transition, var(--aq-duration-fast) var(--aq-ease-out)), box-shadow var(--aq-transition, var(--aq-duration-fast) var(--aq-ease-out)), transform var(--aq-transition, var(--aq-duration-fast) var(--aq-ease-out));
}
.aq-card--interactive:active,
a.aq-card:active,
button.aq-card:active { transform: translateY(1px); }
.aq-card--interactive:is(:disabled, [aria-disabled="true"]),
a.aq-card[aria-disabled="true"],
button.aq-card:disabled { cursor: not-allowed; opacity: 0.5; pointer-events: none; transform: none; }
.aq-card--interactive:is([aria-busy="true"], [data-state="loading"]),
a.aq-card:is([aria-busy="true"], [data-state="loading"]),
button.aq-card:is([aria-busy="true"], [data-state="loading"]) { cursor: progress; opacity: 0.72; pointer-events: none; }
.aq-card--interactive[data-state="error"],
a.aq-card[data-state="error"],
button.aq-card[data-state="error"] { border-color: var(--aq-color-danger); border-style: double; }
.aq-card--interactive[data-state="success"],
a.aq-card[data-state="success"],
button.aq-card[data-state="success"] { border-color: var(--aq-color-success); box-shadow: inset 0 -3px var(--aq-color-success); }
.aq-card--interactive:focus-visible,
a.aq-card:focus-visible,
button.aq-card:focus-visible { outline: var(--aq-focus-width) solid var(--aq-color-focus); outline-offset: var(--aq-focus-offset); box-shadow: var(--aq-card-shadow, var(--aq-shadow-sm)); }
@media (hover: hover) and (pointer: fine) {
  .aq-card--interactive:hover,
  a.aq-card:hover,
  button.aq-card:hover { border-color: var(--aq-color-border-strong); box-shadow: var(--aq-shadow-md); transform: translateY(-1px); }
}

.aq-badge { display: inline-flex; align-items: center; gap: var(--aq-space-1); width: fit-content; border-radius: var(--aq-radius-pill); padding: 0.2rem 0.55rem; font-size: var(--aq-text-xs); font-weight: 700; background: var(--aq-color-surface-2); color: var(--aq-color-muted); border: 1px solid var(--aq-color-border); }
.aq-badge-brand { background: var(--aq-color-brand-soft); color: var(--aq-color-brand-active); border-color: transparent; }
.aq-badge-success { background: var(--aq-color-success-soft); color: var(--aq-color-success); border-color: transparent; }
.aq-badge-warning { background: var(--aq-color-warning-soft); color: var(--aq-color-warning); border-color: transparent; }
.aq-badge-danger { background: var(--aq-color-danger-soft); color: var(--aq-color-danger); border-color: transparent; }

.aq-alert { border: 1px solid var(--aq-color-border); border-radius: var(--aq-radius-lg); padding: var(--aq-space-4); background: var(--aq-color-surface-2); }
.aq-alert-info { background: var(--aq-color-info-soft); border-color: color-mix(in srgb, var(--aq-color-info) 25%, transparent); }
.aq-alert-success { background: var(--aq-color-success-soft); border-color: color-mix(in srgb, var(--aq-color-success) 25%, transparent); }
.aq-alert-warning { background: var(--aq-color-warning-soft); border-color: color-mix(in srgb, var(--aq-color-warning) 25%, transparent); }
.aq-alert-danger { background: var(--aq-color-danger-soft); border-color: color-mix(in srgb, var(--aq-color-danger) 25%, transparent); }

/* --------------------------------------------------------------------------
   8. Dialogs
   -------------------------------------------------------------------------- */
.aq-dialog {
  position: fixed;
  inset: 0;
  width: min(100% - 2rem, 34rem);
  max-height: min(80dvh, 40rem);
  margin: auto;
  border: 1px solid var(--aq-color-border);
  border-radius: var(--aq-radius-xl);
  background: var(--aq-color-surface);
  color: var(--aq-color-text);
  box-shadow: var(--aq-shadow-lg);
  padding: 0;
  overflow: auto;
}
.aq-dialog::backdrop { background: rgb(2 8 23 / 0.58); backdrop-filter: blur(4px); }
.aq-dialog-header, .aq-dialog-body, .aq-dialog-footer { padding: var(--aq-space-5); }
.aq-dialog-header { border-bottom: 1px solid var(--aq-color-border); }
.aq-dialog-footer { border-top: 1px solid var(--aq-color-border); display: flex; justify-content: flex-end; gap: var(--aq-space-3); background: var(--aq-color-surface-2); }
.aq-dialog-title { margin: 0; font-size: var(--aq-text-xl); line-height: var(--aq-leading-tight); }

/* --------------------------------------------------------------------------
   9. Tabs, Tables, Nav
   -------------------------------------------------------------------------- */
.aq-tabs { display: flex; gap: var(--aq-space-1); border-bottom: 1px solid var(--aq-color-border); max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.aq-tab { flex: 0 0 auto; min-height: var(--aq-touch-target); border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--aq-color-muted); padding: var(--aq-space-3) var(--aq-space-4); font-weight: 600; cursor: pointer; white-space: nowrap; }
.aq-tab[aria-selected="true"] { color: var(--aq-color-brand); border-bottom-color: var(--aq-color-brand); }
.aq-tab:active,
.aq-tab[data-state="active"] { background: var(--aq-color-surface-2); }
.aq-tab:disabled, .aq-tab[aria-disabled="true"] { cursor: not-allowed; opacity: 0.5; }
.aq-tab:is([aria-busy="true"], [data-state="loading"]) { cursor: progress; opacity: 0.72; pointer-events: none; }
.aq-tab[data-state="error"] { border-bottom-style: double; border-bottom-color: var(--aq-color-danger); }
.aq-tab[data-state="success"] { border-bottom-style: double; border-bottom-color: var(--aq-color-success); }
@media (hover: hover) and (pointer: fine) {
  .aq-tab:hover { background: var(--aq-color-surface-2); color: var(--aq-color-text); }
}

.aq-table-wrap { overflow-x: auto; border: 1px solid var(--aq-color-border); border-radius: var(--aq-radius-lg); }
.aq-table { width: 100%; border-collapse: collapse; background: var(--aq-color-surface); }
.aq-table th, .aq-table td { padding: var(--aq-space-3) var(--aq-space-4); border-bottom: 1px solid var(--aq-color-border); text-align: left; vertical-align: top; }
.aq-table th { background: var(--aq-color-surface-2); font-size: var(--aq-text-sm); color: var(--aq-color-muted); font-weight: 700; }
.aq-table tr:last-child td { border-bottom: 0; }

.aq-topbar { border-bottom: 1px solid var(--aq-color-border); background: color-mix(in srgb, var(--aq-color-bg) 92%, transparent); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 20; }
.aq-topbar-inner { min-height: 4rem; display: flex; align-items: center; justify-content: space-between; gap: var(--aq-space-4); }
.aq-brand { display: inline-flex; align-items: center; gap: var(--aq-space-2); color: var(--aq-color-text); text-decoration: none; font-weight: 800; }
.aq-nav { display: flex; align-items: center; gap: var(--aq-space-4); }
.aq-nav a { color: var(--aq-color-muted); text-decoration: none; font-weight: 600; }
.aq-nav a:hover { color: var(--aq-color-text); }
@media (max-width: 700px) { .aq-nav { display: none; } }

/* --------------------------------------------------------------------------
   10. App Shell / Sidebar Layouts
   -------------------------------------------------------------------------- */
.aq-app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  background: var(--aq-color-bg);
}
.aq-app-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid var(--aq-color-border);
  background: var(--aq-color-surface);
  padding: var(--aq-space-5);
}
.aq-app-main {
  min-width: 0;
  padding: var(--aq-space-6);
}
.aq-app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aq-space-4);
  margin-bottom: var(--aq-space-6);
}
.aq-sidebar-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--aq-space-2);
  color: var(--aq-color-text);
  font-weight: 800;
  text-decoration: none;
}
.aq-sidebar-nav {
  display: grid;
  gap: var(--aq-space-1);
  margin-top: var(--aq-space-6);
}
.aq-sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--aq-space-2);
  width: 100%;
  min-height: 2.5rem;
  padding: 0.55rem 0.75rem;
  border: 0;
  border-radius: var(--aq-radius-md);
  background: transparent;
  color: var(--aq-color-muted);
  font: inherit;
  font-weight: 650;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.aq-sidebar-link:hover {
  background: var(--aq-color-surface-2);
  color: var(--aq-color-text);
}
.aq-sidebar-link[aria-current="page"],
.aq-sidebar-link.is-active {
  background: var(--aq-color-brand-soft);
  color: var(--aq-color-brand-active);
}
.aq-sidebar-section {
  margin-top: var(--aq-space-6);
  padding-top: var(--aq-space-4);
  border-top: 1px solid var(--aq-color-border);
}
.aq-sidebar-label {
  margin: 0 0 var(--aq-space-2);
  color: var(--aq-color-subtle);
  font-size: var(--aq-text-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (max-width: 860px) {
  .aq-app-shell { grid-template-columns: 1fr; }
  .aq-app-sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--aq-color-border);
  }
  .aq-sidebar-nav {
    display: flex;
    gap: var(--aq-space-2);
    overflow-x: auto;
    padding-bottom: var(--aq-space-1);
  }
  .aq-sidebar-link { flex: 0 0 auto; }
  .aq-app-main { padding: var(--aq-space-4); }
  .aq-app-header { align-items: flex-start; flex-direction: column; }
}

/* --------------------------------------------------------------------------
   11. Dropdowns / Accordions
   -------------------------------------------------------------------------- */
.aq-dropdown {
  position: relative;
  display: inline-block;
}
.aq-dropdown > summary {
  list-style: none;
}
.aq-dropdown > summary::-webkit-details-marker {
  display: none;
}
.aq-dropdown-menu {
  position: absolute;
  inset-inline-end: 0;
  z-index: 30;
  width: max-content;
  min-width: min(14rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  margin-top: var(--aq-space-2);
  padding: var(--aq-space-2);
  border: 1px solid var(--aq-color-border);
  border-radius: var(--aq-radius-lg);
  background: var(--aq-color-surface);
  box-shadow: var(--aq-shadow-md);
}
.aq-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--aq-space-2);
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: var(--aq-radius-md);
  background: transparent;
  color: var(--aq-color-text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.aq-dropdown-item:hover {
  background: var(--aq-color-surface-2);
  color: var(--aq-color-text);
}
.aq-dropdown-item:disabled,
.aq-dropdown-item[aria-disabled="true"] { cursor: not-allowed; opacity: 0.5; pointer-events: none; }
.aq-dropdown-item:active,
.aq-dropdown-item[data-state="active"] { background: var(--aq-color-surface-3); }
.aq-dropdown-item:is([aria-busy="true"], [data-state="loading"]) { cursor: progress; opacity: 0.72; pointer-events: none; }
.aq-dropdown-item[data-state="error"] { box-shadow: inset 3px 0 var(--aq-color-danger); }
.aq-dropdown-item[data-state="success"] { box-shadow: inset 0 -2px var(--aq-color-success); }
.aq-dropdown-separator {
  height: 1px;
  margin: var(--aq-space-2) 0;
  background: var(--aq-color-border);
}
.aq-accordion {
  display: grid;
  gap: var(--aq-space-3);
}
.aq-accordion-item {
  border: 1px solid var(--aq-color-border);
  border-radius: var(--aq-radius-lg);
  background: var(--aq-color-surface);
  overflow: hidden;
}
.aq-accordion-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aq-space-4);
  padding: var(--aq-space-4);
  cursor: pointer;
  font-weight: 750;
}
.aq-accordion-summary::marker {
  color: var(--aq-color-brand);
}
.aq-accordion-body {
  padding: 0 var(--aq-space-4) var(--aq-space-4);
  color: var(--aq-color-muted);
}

/* --------------------------------------------------------------------------
   12. Toasts / Pagination / Breadcrumbs
   -------------------------------------------------------------------------- */
.aq-toast-region {
  position: fixed;
  right: var(--aq-space-4);
  bottom: var(--aq-space-4);
  z-index: 60;
  display: grid;
  gap: var(--aq-space-3);
  width: min(100% - 2rem, 24rem);
  pointer-events: none;
}
.aq-toast {
  display: grid;
  gap: var(--aq-space-1);
  padding: var(--aq-space-4);
  border: 1px solid var(--aq-color-border);
  border-radius: var(--aq-radius-lg);
  background: var(--aq-color-surface);
  color: var(--aq-color-text);
  box-shadow: var(--aq-shadow-lg);
  pointer-events: auto;
}
.aq-toast-title {
  margin: 0;
  font-weight: 800;
}
.aq-toast-body {
  margin: 0;
  color: var(--aq-color-muted);
  font-size: var(--aq-text-sm);
}
.aq-toast-success { border-color: color-mix(in srgb, var(--aq-color-success) 28%, var(--aq-color-border)); }
.aq-toast-warning { border-color: color-mix(in srgb, var(--aq-color-warning) 32%, var(--aq-color-border)); }
.aq-toast-danger { border-color: color-mix(in srgb, var(--aq-color-danger) 32%, var(--aq-color-border)); }
.aq-toast-info { border-color: color-mix(in srgb, var(--aq-color-info) 28%, var(--aq-color-border)); }
.aq-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--aq-space-2);
}
.aq-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--aq-color-border);
  border-radius: var(--aq-radius-md);
  background: var(--aq-color-surface);
  color: var(--aq-color-muted);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.aq-page-link:hover {
  border-color: var(--aq-color-border-strong);
  color: var(--aq-color-text);
}
.aq-page-link[aria-current="page"],
.aq-page-link.is-active {
  border-color: var(--aq-color-brand);
  background: var(--aq-color-brand);
  color: var(--aq-color-brand-contrast);
}
.aq-page-link[aria-disabled="true"],
.aq-page-link:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.aq-page-link:active,
.aq-page-link[data-state="active"] { background: var(--aq-color-surface-3); }
.aq-page-link:is([aria-busy="true"], [data-state="loading"]) { cursor: progress; opacity: 0.72; pointer-events: none; }
.aq-page-link[data-state="error"] { border-color: var(--aq-color-danger); border-style: double; }
.aq-page-link[data-state="success"] { border-color: var(--aq-color-success); box-shadow: inset 0 -2px var(--aq-color-success); }
.aq-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--aq-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--aq-color-muted);
  font-size: var(--aq-text-sm);
}
.aq-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: var(--aq-space-2);
}
.aq-breadcrumbs li + li::before {
  content: "/";
  color: var(--aq-color-subtle);
}
.aq-breadcrumbs a {
  color: var(--aq-color-muted);
  font-weight: 650;
  text-decoration: none;
}
.aq-breadcrumbs a:hover {
  color: var(--aq-color-text);
}

/* --------------------------------------------------------------------------
   13. Empty States / Loading
   -------------------------------------------------------------------------- */
.aq-empty { border: 1px dashed var(--aq-color-border-strong); border-radius: var(--aq-radius-xl); padding: var(--aq-space-8); text-align: center; background: var(--aq-color-surface-2); }
.aq-skeleton { display: block; min-height: 1rem; border-radius: var(--aq-radius-sm); background: linear-gradient(90deg, var(--aq-color-surface-2), var(--aq-color-surface-3), var(--aq-color-surface-2)); background-size: 200% 100%; animation: aq-shimmer 1.2s infinite; }
@keyframes aq-shimmer { to { background-position-x: -200%; } }

/* --------------------------------------------------------------------------
   14. Galleries / Media
   -------------------------------------------------------------------------- */
.aq-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--aq-gallery-min)), 1fr));
  gap: var(--aq-gallery-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.aq-gallery > li { min-width: 0; }
.aq-media { display: grid; gap: var(--aq-space-2); min-width: 0; margin: 0; }
.aq-media-frame {
  aspect-ratio: var(--aq-media-ratio, var(--aq-gallery-ratio));
  overflow: hidden;
  border: 1px solid var(--aq-media-border, var(--aq-color-border));
  border-radius: var(--aq-media-radius, var(--aq-radius-lg));
  background: var(--aq-media-bg, var(--aq-color-surface-2));
}
.aq-media-frame > :where(img, picture, video, svg) { width: 100%; height: 100%; object-fit: var(--aq-media-fit, cover); }
.aq-media-frame > picture > img { width: 100%; height: 100%; object-fit: var(--aq-media-fit, cover); }
.aq-media-caption { color: var(--aq-color-muted); font-size: var(--aq-text-sm); line-height: var(--aq-leading-normal); }
@media (min-width: 48rem) {
  .aq-gallery--feature { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aq-gallery--feature > li:first-child { grid-column: span 2; grid-row: span 2; }
  .aq-gallery--feature > li:first-child .aq-media-frame { height: 100%; min-height: 22rem; }
}
@media (min-width: 70rem) {
  .aq-gallery--feature { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   15. Event Lists / Cards
   -------------------------------------------------------------------------- */
.aq-event-list { display: grid; gap: var(--aq-space-4); margin: 0; padding: 0; list-style: none; }
.aq-event-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--aq-space-4);
  align-items: start;
  min-width: 0;
  padding: var(--aq-event-padding, var(--aq-space-5));
  border: 1px solid var(--aq-event-border, var(--aq-color-border));
  border-radius: var(--aq-event-radius, var(--aq-radius-xl));
  background: var(--aq-event-bg, var(--aq-color-surface));
  box-shadow: var(--aq-event-shadow, var(--aq-shadow-sm));
}
.aq-event-date { width: var(--aq-event-date-width); }
@media (min-width: 40rem) {
  .aq-event-card { grid-template-columns: minmax(3.25rem, var(--aq-event-date-width)) minmax(0, 1fr); }
}
.aq-event-card--compact { --aq-event-padding: var(--aq-space-4); --aq-event-radius: var(--aq-radius-lg); }
.aq-event-card--featured {
  --aq-event-border: var(--aq-color-brand);
  --aq-event-bg: color-mix(in srgb, var(--aq-color-surface) 88%, var(--aq-color-brand-soft));
}
.aq-event-date {
  display: grid;
  align-content: center;
  min-height: var(--aq-event-date-width);
  padding: var(--aq-space-2);
  border: 1px solid var(--aq-color-border);
  border-radius: var(--aq-radius-lg);
  background: var(--aq-color-surface-2);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.aq-event-month { color: var(--aq-color-muted); font-size: var(--aq-text-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.aq-event-day { color: var(--aq-color-heading); font-size: var(--aq-text-2xl); font-weight: 800; line-height: 1; }
.aq-event-content { display: grid; gap: var(--aq-space-2); min-width: 0; }
.aq-event-title { margin: 0; font-size: var(--aq-text-xl); line-height: var(--aq-leading-tight); }
.aq-event-meta { display: flex; flex-wrap: wrap; gap: var(--aq-space-1) var(--aq-space-3); color: var(--aq-color-muted); font-size: var(--aq-text-sm); font-variant-numeric: tabular-nums; }
.aq-event-description { margin: 0; color: var(--aq-color-muted); }
.aq-event-actions { display: flex; flex-wrap: wrap; gap: var(--aq-space-2); margin-top: var(--aq-space-2); }
.aq-event-card[data-state="cancelled"] { border-style: dashed; }
.aq-event-card[data-state="cancelled"] .aq-event-title { text-decoration: line-through; }

/* --------------------------------------------------------------------------
   16. Calendar / Agenda
   -------------------------------------------------------------------------- */
.aq-calendar-shell {
  overflow: hidden;
  border: 1px solid var(--aq-calendar-border, var(--aq-color-border));
  border-radius: var(--aq-calendar-radius, var(--aq-radius-xl));
  background: var(--aq-calendar-bg, var(--aq-color-surface));
  box-shadow: var(--aq-calendar-shadow, var(--aq-shadow-sm));
}
.aq-calendar-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--aq-space-3); padding: var(--aq-space-4); border-bottom: 1px solid var(--aq-color-border); }
.aq-calendar-title { margin: 0; font-size: var(--aq-text-xl); line-height: var(--aq-leading-tight); }
.aq-calendar-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.aq-calendar { width: 100%; min-width: var(--aq-calendar-min-width); border-collapse: separate; border-spacing: 0; table-layout: fixed; background: var(--aq-color-surface); }
.aq-calendar caption { padding: var(--aq-space-3) var(--aq-space-4); color: var(--aq-color-muted); text-align: start; }
.aq-calendar th { padding: var(--aq-space-2); border-bottom: 1px solid var(--aq-color-border); background: var(--aq-color-surface-2); color: var(--aq-color-muted); font-size: var(--aq-text-xs); font-weight: 800; letter-spacing: 0.04em; text-align: start; text-transform: uppercase; }
.aq-calendar th abbr { text-decoration: none; }
.aq-calendar td {
  height: var(--aq-calendar-cell-height);
  padding: var(--aq-space-2);
  border-inline-end: 1px solid var(--aq-color-border);
  border-block-end: 1px solid var(--aq-color-border);
  vertical-align: top;
}
.aq-calendar tr > :last-child { border-inline-end: 0; }
.aq-calendar tbody tr:last-child td { border-block-end: 0; }
.aq-calendar-day { color: var(--aq-color-text); }
.aq-calendar-day[data-outside-month="true"] { background: var(--aq-color-surface-2); color: var(--aq-color-subtle); }
.aq-calendar-day[aria-selected="true"] { background: var(--aq-color-brand-soft); box-shadow: inset 0 -3px var(--aq-color-brand); }
.aq-calendar-date { display: inline-grid; place-items: center; min-width: 1.75rem; min-height: 1.75rem; border-radius: var(--aq-radius-pill); font-size: var(--aq-text-sm); font-weight: 750; font-variant-numeric: tabular-nums; }
.aq-calendar-day[aria-current="date"] .aq-calendar-date { outline: 2px solid var(--aq-color-brand); outline-offset: 1px; }
.aq-calendar-events { display: grid; gap: var(--aq-space-1); margin: var(--aq-space-2) 0 0; padding: 0; list-style: none; }
.aq-calendar-event {
  display: block;
  overflow: hidden;
  padding: 0.25rem 0.4rem;
  border-radius: var(--aq-radius-sm);
  background: var(--aq-color-brand-soft);
  color: var(--aq-color-brand-active);
  font-size: var(--aq-text-xs);
  font-weight: 700;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aq-calendar-event:focus-visible { outline: var(--aq-focus-width) solid var(--aq-color-focus); outline-offset: 1px; }
.aq-calendar--compact { --aq-calendar-min-width: 33.25rem; --aq-calendar-cell-height: 5.5rem; }
.aq-calendar-legend { display: flex; flex-wrap: wrap; gap: var(--aq-space-2) var(--aq-space-4); margin: 0; padding: var(--aq-space-3) var(--aq-space-4); border-top: 1px solid var(--aq-color-border); list-style: none; color: var(--aq-color-muted); font-size: var(--aq-text-sm); }
@media (hover: hover) and (pointer: fine) {
  .aq-calendar-event:hover { color: var(--aq-color-brand-active); text-decoration: underline; }
}

/* --------------------------------------------------------------------------
   17. Timelines / Steps / Progress
   -------------------------------------------------------------------------- */
.aq-timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.aq-timeline-item { display: grid; grid-template-columns: var(--aq-timeline-marker-size) minmax(0, 1fr); gap: var(--aq-space-4); min-width: 0; position: relative; padding-block-end: var(--aq-space-6); }
.aq-timeline-item:not(:last-child)::before { width: 2px; background: var(--aq-color-border); content: ""; position: absolute; inset-block: var(--aq-timeline-marker-size) 0; inset-inline-start: calc((var(--aq-timeline-marker-size) - 2px) / 2); }
.aq-timeline-marker { z-index: 1; display: grid; place-items: center; width: var(--aq-timeline-marker-size); height: var(--aq-timeline-marker-size); margin-top: 0.25rem; border: 2px solid var(--aq-color-border-strong); border-radius: var(--aq-radius-pill); background: var(--aq-color-surface); }
.aq-timeline-item[data-state="complete"] .aq-timeline-marker { border-color: var(--aq-color-success); background: var(--aq-color-success); }
.aq-timeline-item[data-state="complete"] .aq-timeline-marker::after { display: grid; place-items: center; color: var(--aq-color-inverse); content: "✓"; font-size: 0.6rem; font-weight: 900; line-height: 1; }
.aq-timeline-item[aria-current="step"] .aq-timeline-marker { border-color: var(--aq-color-brand); box-shadow: 0 0 0 3px var(--aq-color-brand-soft); }
.aq-timeline-item[data-state="error"] .aq-timeline-marker { border-color: var(--aq-color-danger); }
.aq-timeline-item[data-state="error"] .aq-timeline-marker::after { display: grid; place-items: center; color: var(--aq-color-danger); content: "!"; font-size: 0.65rem; font-weight: 900; line-height: 1; }
.aq-timeline-content { display: grid; gap: var(--aq-space-1); min-width: 0; }
.aq-timeline-title { margin: 0; font-size: var(--aq-text-lg); line-height: var(--aq-leading-tight); }
.aq-timeline-meta { color: var(--aq-color-muted); font-size: var(--aq-text-sm); font-variant-numeric: tabular-nums; }
.aq-timeline-item:last-child { padding-block-end: 0; }

.aq-progress { display: grid; gap: var(--aq-space-2); max-width: var(--aq-progress-max-width, 40rem); }
.aq-progress-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--aq-space-2); }
.aq-progress-label { color: var(--aq-color-text); font-weight: 700; }
.aq-progress-value, .aq-progress-help { color: var(--aq-color-muted); font-size: var(--aq-text-sm); font-variant-numeric: tabular-nums; }
.aq-progress-bar { width: 100%; height: var(--aq-progress-height); overflow: hidden; appearance: none; border: 0; border-radius: var(--aq-radius-pill); background: var(--aq-color-surface-3); color: var(--aq-color-brand); accent-color: var(--aq-color-brand); }
.aq-progress-bar::-webkit-progress-bar { border-radius: inherit; background: var(--aq-color-surface-3); }
.aq-progress-bar::-webkit-progress-value { border-radius: inherit; background: currentColor; }
.aq-progress-bar::-moz-progress-bar { border-radius: inherit; background: currentColor; }
.aq-progress[data-state="success"] .aq-progress-bar { color: var(--aq-color-success); accent-color: var(--aq-color-success); }
.aq-progress[data-state="error"] .aq-progress-bar { color: var(--aq-color-danger); accent-color: var(--aq-color-danger); }
.aq-progress-status::before { margin-inline-end: var(--aq-space-1); font-weight: 900; }
.aq-progress[data-state="success"] .aq-progress-status::before { color: var(--aq-color-success); content: "✓"; }
.aq-progress[data-state="error"] .aq-progress-status::before { color: var(--aq-color-danger); content: "!"; }

.aq-steps { display: grid; gap: var(--aq-space-3); margin: 0; padding: 0; list-style: none; }
.aq-step { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--aq-space-3); align-items: start; min-width: 0; }
.aq-step-marker { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--aq-color-border-strong); border-radius: var(--aq-radius-pill); background: var(--aq-color-surface); color: var(--aq-color-muted); font-size: var(--aq-text-sm); font-weight: 800; font-variant-numeric: tabular-nums; }
.aq-step-content { min-width: 0; padding-top: 0.25rem; }
.aq-step-title { margin: 0; font-size: var(--aq-text-md); line-height: var(--aq-leading-tight); }
.aq-step-description { margin: var(--aq-space-1) 0 0; color: var(--aq-color-muted); font-size: var(--aq-text-sm); }
.aq-step[aria-current="step"] .aq-step-marker { border-width: 2px; border-color: var(--aq-color-brand); color: var(--aq-color-brand-active); box-shadow: 0 0 0 3px var(--aq-color-brand-soft); }
.aq-step[data-state="complete"] .aq-step-marker { border-color: var(--aq-color-success); background: var(--aq-color-success-soft); color: var(--aq-color-success); }
.aq-step[data-state="complete"] .aq-step-marker::before { content: "✓"; }
.aq-step[data-state="complete"] .aq-step-marker { font-size: 0; }
.aq-step[data-state="complete"] .aq-step-marker::before { font-size: var(--aq-text-sm); }
.aq-step[data-state="error"] .aq-step-marker { border-style: double; border-color: var(--aq-color-danger); color: var(--aq-color-danger); }

/* --------------------------------------------------------------------------
   18. Pricing
   -------------------------------------------------------------------------- */
.aq-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--aq-pricing-min)), 1fr)); gap: var(--aq-pricing-gap, var(--aq-space-4)); align-items: stretch; margin: 0; padding: 0; list-style: none; }
.aq-pricing > li { min-width: 0; }
.aq-pricing-card { display: flex; flex-direction: column; gap: var(--aq-space-4); height: 100%; min-width: 0; padding: var(--aq-pricing-padding, var(--aq-space-6)); border: 1px solid var(--aq-pricing-border, var(--aq-color-border)); border-radius: var(--aq-pricing-radius, var(--aq-radius-xl)); background: var(--aq-pricing-bg, var(--aq-color-surface)); box-shadow: var(--aq-pricing-shadow, var(--aq-shadow-sm)); }
.aq-pricing-card--compact { --aq-pricing-padding: var(--aq-space-4); --aq-pricing-radius: var(--aq-radius-lg); }
.aq-pricing-card--featured { --aq-pricing-border: var(--aq-color-brand); border-width: 2px; }
.aq-pricing-name { margin: 0; font-size: var(--aq-text-xl); line-height: var(--aq-leading-tight); }
.aq-pricing-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--aq-space-2); color: var(--aq-color-heading); font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.aq-pricing-period { color: var(--aq-color-muted); font-size: var(--aq-text-sm); font-weight: 500; }
.aq-pricing-description { margin: 0; color: var(--aq-color-muted); }
.aq-pricing-features { display: grid; gap: var(--aq-space-2); margin: 0; padding: 0; list-style: none; }
.aq-pricing-features li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: var(--aq-space-2); align-items: start; }
.aq-pricing-features li::before { color: var(--aq-color-success); content: "✓"; font-weight: 900; }
.aq-pricing-features li[data-included="false"] { color: var(--aq-color-muted); }
.aq-pricing-features li[data-included="false"]::before { color: var(--aq-color-muted); content: "—"; }
.aq-pricing-card > :is(.aq-btn, .aq-row):last-child { margin-top: auto; }

/* --------------------------------------------------------------------------
   19. Charts And Data Visualization
   -------------------------------------------------------------------------- */
.aq-chart { gap: var(--aq-space-6); min-width: 0; }
.aq-chart-header { gap: var(--aq-space-2); }
.aq-chart-title { margin: 0; font-size: var(--aq-text-2xl); line-height: var(--aq-leading-tight); }
.aq-chart-description, .aq-chart-source { margin: 0; color: var(--aq-color-muted); }
.aq-chart-source { font-size: var(--aq-text-sm); }
.aq-chart-bars { gap: var(--aq-chart-gap); margin: 0; padding: 0; list-style: none; }
.aq-chart-bar { display: grid; gap: var(--aq-space-2); min-width: 0; }
.aq-chart-bar-header { justify-content: space-between; gap: var(--aq-space-3); }
.aq-chart-bar-value { color: var(--aq-color-heading); font-variant-numeric: tabular-nums; }
.aq-chart-bar-track { display: block; height: var(--aq-chart-bar-height); overflow: hidden; border: 1px solid var(--aq-color-border); border-radius: var(--aq-radius-pill); background: var(--aq-color-surface-3); }
.aq-chart-bar-fill { display: block; width: var(--aq-chart-value, 0%); height: 100%; border-radius: inherit; background: var(--aq-color-brand); transition: width var(--aq-duration-moderate) var(--aq-ease-out); }
.aq-chart-bar-fill--accent { background: var(--aq-color-accent); background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgb(255 255 255 / 0.28) 5px 7px); }
.aq-chart-bar-fill--positive { background: var(--aq-color-success); }
.aq-chart-bar-fill--warning { background: var(--aq-color-warning); background-image: repeating-linear-gradient(90deg, transparent 0 6px, rgb(255 255 255 / 0.3) 6px 8px); }
.aq-chart-bar-fill--neutral { background: var(--aq-color-muted); }
.aq-chart-canvas-wrap, [data-chart-mount] { position: relative; width: 100%; min-height: min(var(--aq-chart-height), 70vh); }
.aq-chart-canvas-wrap canvas, canvas[data-chart-mount] { display: block; width: 100% !important; height: 100% !important; }
.aq-chart-interactive { display: grid; gap: var(--aq-space-4); min-height: min(var(--aq-chart-height), 70vh); }
.aq-chart-interactive[data-chart-engine="chartjs"] { height: min(var(--aq-chart-height), 70vh); }
.aq-chart-interactive[data-chart-engine="d3"] { min-height: 0; }
.aq-chart-interactive canvas, .aq-chart-interactive svg { display: block; height: 100%; max-width: 100%; min-height: 0; width: 100%; }
.aq-chart-interactive[data-chart-engine="d3"] svg { height: auto; }
.aq-chart-interactive .aq-chart-svg-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.aq-chart-interactive .aq-chart-svg-area { opacity: 0.18; }
.aq-chart-interactive .aq-chart-svg-grid { color: var(--aq-color-border); opacity: 0.7; }
.aq-chart-interactive .aq-chart-svg-value, .aq-chart-interactive .aq-chart-svg-axis-title { fill: var(--aq-color-heading); font: 600 var(--aq-text-xs)/1.2 var(--aq-font-sans); }
.aq-chart-status:not(.aq-sr-only) { margin: 0; border: 1px solid var(--aq-color-danger); border-radius: var(--aq-radius-md); color: var(--aq-color-danger); padding: var(--aq-space-3); }
.aq-chart-legend { display: flex; flex-wrap: wrap; gap: var(--aq-space-2) var(--aq-space-4); margin: 0; padding: 0; list-style: none; }
.aq-chart-legend li { align-items: center; display: inline-flex; gap: var(--aq-space-2); }
.aq-chart-legend li > span:first-child { border: 1px solid currentColor; border-radius: 50%; display: inline-block; height: 0.75rem; width: 0.75rem; }
.aq-chart-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.aq-chart-table :is(th, td) { padding: var(--aq-space-2) var(--aq-space-3); border-bottom: 1px solid var(--aq-color-border); text-align: start; }
.aq-chart-table thead th { color: var(--aq-color-muted); font-size: var(--aq-text-xs); letter-spacing: 0.04em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   20. Accessibility / Visibility
   -------------------------------------------------------------------------- */
.aq-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.aq-hidden { display: none !important; }

/* --------------------------------------------------------------------------
   21. Visual Storytelling
   -------------------------------------------------------------------------- */
.aq-display { min-width: 0; font-size: clamp(2.4rem, 1.2rem + 5vw, 4.5rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; margin: 0; overflow-wrap: anywhere; }
.aq-display--sub { color: var(--aq-color-muted); font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.35rem); font-weight: 500; line-height: 1.5; letter-spacing: 0; }
.aq-stat { display: grid; gap: var(--aq-space-1); }
.aq-stat-value { font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--aq-color-text); }
.aq-stat-label { color: var(--aq-color-muted); font-size: var(--aq-text-sm); font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; }
.aq-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--aq-space-6); align-items: start; }
.aq-section--shift { background: var(--aq-color-surface-2); }
.aq-section--inverse { background: var(--aq-color-text); color: var(--aq-color-inverse); }
.aq-section--inverse :is(h1, h2, h3, .aq-display) { color: inherit; }

@supports (animation-timeline: view()) {
  .aq-reveal { animation: aq-reveal-rise both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  .aq-reveal--fade { animation-name: aq-reveal-fade; }
  .aq-reveal--scale { animation-name: aq-reveal-scale; }
}
@keyframes aq-reveal-rise { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } }
@keyframes aq-reveal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes aq-reveal-scale { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :where(.aqto-dynamic-app, [data-aqto-app-root]) *,
  :where(.aqto-dynamic-app, [data-aqto-app-root]) *::before,
  :where(.aqto-dynamic-app, [data-aqto-app-root]) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
  .aq-reveal, .aq-reveal--fade, .aq-reveal--scale, .aq-skeleton { animation: none !important; }
  .aq-btn { transform: none !important; }
}

@media (pointer: coarse) {
  :where(.aq-btn, .aq-tab, .aq-page-link, .aq-sidebar-link, .aq-dropdown-item, .aq-calendar-event) {
    min-height: var(--aq-touch-target);
  }
  :where(.aq-checkbox, .aq-radio) {
    min-width: 1.25rem;
    min-height: 1.25rem;
  }
}

@media (max-width: 767.98px) {
  /* Prevent iOS focus zoom without disabling intentional pinch zoom. */
  :where(input, textarea, select) { font-size: 16px !important; }
}

@media (prefers-contrast: more) {
  :root {
    --aq-color-border: var(--aq-color-border-strong);
    --aq-focus-width: 3px;
  }
  :where(.aq-btn, .aq-input, .aq-select, .aq-textarea, .aq-card, .aq-alert, .aq-media-frame, .aq-event-card, .aq-calendar-shell, .aq-pricing-card, .aq-chart-bar-track) { border-width: 2px; }
}

@media (forced-colors: active) {
  :focus-visible { outline: 2px solid Highlight !important; outline-offset: 2px; box-shadow: none !important; }
  :where(.aq-btn, .aq-input, .aq-select, .aq-textarea, .aq-card, .aq-alert, .aq-tab, .aq-page-link, .aq-media-frame, .aq-event-card, .aq-calendar-shell, .aq-calendar-event, .aq-timeline-marker, .aq-progress-bar, .aq-step-marker, .aq-pricing-card, .aq-chart-bar-track, .aq-chart-bar-fill) {
    border-color: CanvasText;
    forced-color-adjust: auto;
  }
  :where(.aq-btn:disabled, .aq-btn[aria-disabled="true"], .aq-tab:disabled, .aq-tab[aria-disabled="true"]) {
    color: GrayText;
  }
  .aq-skeleton { background: CanvasText; opacity: 0.18; }
}