/*
 * Aeyloo UI Foundation v1
 *
 * This file is intentionally limited to tokens, accessibility utilities, and
 * reusable aeyloo-ui-* primitives. Product and domain selectors do not belong
 * here. See docs/design/aeyloo-ui-design-system.md.
 */

:root {
    /* Compatibility aliases let isolated legacy domain assets stop loading
     * the multi-product foundation while they migrate to aeyloo-ui-* names. */
    --ax-color-bg: #f6f7f7;
    --ax-color-surface: #ffffff;
    --ax-color-surface-soft: #f7f8f7;
    --ax-color-border: #e4e7ec;
    --ax-color-text: #111827;
    --ax-color-text-strong: #111827;
    --ax-color-text-secondary: #667085;
    --ax-color-brand: #15b010;
    --ax-color-brand-strong: #10860c;
    --ax-color-brand-soft: #e8f8e6;
    --ax-font-ui: "Inter", "SF Pro Text", "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --ax-font-size-small: 12px;
    --aeyloo-tooltip-padding: 6px 14px;
    --aeyloo-tooltip-font-size: 12px;
    --aeyloo-tooltip-font-weight: 500;
    --ax-font-size-body: 14px;
    --ax-font-size-h3: 18px;
    --ax-font-size-h2: 24px;
    --ax-font-size-h1: 32px;
    --ax-font-weight-body: 400;
    --ax-font-weight-heading: 600;
    --ax-radius-small: 8px;
    --ax-radius-control: 10px;
    --ax-radius-button: 10px;
    --ax-radius-card: 16px;
    --ax-radius-pill: 999px;
    --aeyloo-ui-font-sans: "Inter", "SF Pro Text", "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --aeyloo-ui-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, ui-monospace, monospace;
    --aeyloo-ui-text: var(--ax-color-text, #111827);
    --aeyloo-ui-text-strong: var(--ax-color-text-strong, #111827);
    --aeyloo-ui-text-muted: var(--ax-color-text-secondary, #667085);
    --aeyloo-ui-surface: var(--ax-color-surface, #ffffff);
    --aeyloo-ui-surface-soft: var(--ax-color-surface-soft, #f7f8f7);
    --aeyloo-ui-canvas: var(--ax-color-bg, #f6f7f7);
    --aeyloo-ui-border: var(--ax-color-border, #e4e7ec);
    --aeyloo-ui-brand: var(--ax-color-brand, #15b010);
    --aeyloo-ui-brand-strong: var(--ax-color-brand-strong, #10860c);
    --aeyloo-ui-brand-soft: var(--ax-color-brand-soft, #e8f8e6);
    --aeyloo-ui-info: #175cd3;
    --aeyloo-ui-info-soft: #eff8ff;
    --aeyloo-ui-success: #067647;
    --aeyloo-ui-success-soft: #ecfdf3;
    --aeyloo-ui-warning: #b54708;
    --aeyloo-ui-warning-soft: #fffaeb;
    --aeyloo-ui-critical: #b42318;
    --aeyloo-ui-critical-soft: #fef3f2;
    --aeyloo-ui-blocked: #6941c6;
    --aeyloo-ui-blocked-soft: #f4f3ff;
    --aeyloo-ui-disabled: #667085;
    --aeyloo-ui-disabled-soft: #f2f4f7;
    --aeyloo-ui-space-1: 4px;
    --aeyloo-ui-space-2: 8px;
    --aeyloo-ui-space-3: 12px;
    --aeyloo-ui-space-4: 16px;
    --aeyloo-ui-space-5: 20px;
    --aeyloo-ui-space-6: 24px;
    --aeyloo-ui-space-7: 32px;
    --aeyloo-ui-space-8: 40px;
    --aeyloo-ui-space-9: 48px;
    --aeyloo-ui-space-10: 64px;
    --aeyloo-ui-radius-control: 10px;
    --aeyloo-ui-radius-card: 28px;
    --aeyloo-ui-radius-panel: 20px;
    --aeyloo-ui-radius-pill: 999px;
    --aeyloo-ui-shadow-sm: 0 6px 16px rgba(15, 23, 42, 0.06);
    --aeyloo-ui-shadow-md: 0 14px 36px rgba(15, 23, 42, 0.08);
    --aeyloo-ui-shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.1);
    --aeyloo-ui-focus: 0 0 0 3px color-mix(in srgb, var(--aeyloo-ui-brand) 24%, transparent);
    --aeyloo-ui-control-height: 42px;
    --aeyloo-ui-touch-target: 44px;
    --aeyloo-ui-motion-fast: 120ms;
    --aeyloo-ui-motion-normal: 180ms;
    --aeyloo-ui-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-aeyloo-color-mode="dark"] {
    --ax-color-bg: #0c0e14;
    --ax-color-surface: #181818;
    --ax-color-surface-soft: #222222;
    --ax-color-border: #353733;
    --ax-color-text: #e8e9e7;
    --ax-color-text-strong: #ffffff;
    --ax-color-text-secondary: #a7aaa5;
    --aeyloo-ui-text: #e8e9e7;
    --aeyloo-ui-text-strong: #ffffff;
    --aeyloo-ui-text-muted: #a7aaa5;
    --aeyloo-ui-surface: #181818;
    --aeyloo-ui-surface-soft: #222222;
    --aeyloo-ui-canvas: #0c0e14;
    --aeyloo-ui-border: #353733;
    --aeyloo-ui-brand-soft: color-mix(in srgb, var(--aeyloo-ui-brand) 16%, #181818);
    --aeyloo-ui-info: #84adff;
    --aeyloo-ui-info-soft: #102a56;
    --aeyloo-ui-success: #75e0a7;
    --aeyloo-ui-success-soft: #073d2a;
    --aeyloo-ui-warning: #fec84b;
    --aeyloo-ui-warning-soft: #4e2d09;
    --aeyloo-ui-critical: #fda29b;
    --aeyloo-ui-critical-soft: #55160c;
    --aeyloo-ui-blocked: #bdb4fe;
    --aeyloo-ui-blocked-soft: #2d246b;
    --aeyloo-ui-disabled: #98a2b3;
    --aeyloo-ui-disabled-soft: #292c32;
    --aeyloo-ui-shadow-sm: 0 6px 16px rgba(0, 0, 0, 0.24);
    --aeyloo-ui-shadow-md: 0 14px 36px rgba(0, 0, 0, 0.32);
    --aeyloo-ui-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.4);
}

/* Every enabled button communicates clickability consistently. */
html button:not(:disabled):not([aria-disabled="true"]),
html input[type="button"]:not(:disabled):not([aria-disabled="true"]),
html input[type="submit"]:not(:disabled):not([aria-disabled="true"]),
html input[type="reset"]:not(:disabled):not([aria-disabled="true"]),
html [role="button"]:not([aria-disabled="true"]) {
    cursor: pointer !important;
}

html button:disabled,
html input[type="button"]:disabled,
html input[type="submit"]:disabled,
html input[type="reset"]:disabled,
html [role="button"][aria-disabled="true"] {
    cursor: not-allowed !important;
}

.aeyloo-ui-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.aeyloo-ui-skip-link {
    position: fixed;
    top: var(--aeyloo-ui-space-3);
    left: var(--aeyloo-ui-space-3);
    z-index: 10000;
    padding: 10px 14px;
    border-radius: var(--aeyloo-ui-radius-control);
    background: var(--aeyloo-ui-text-strong);
    color: var(--aeyloo-ui-surface);
    font: 600 14px/1.2 var(--aeyloo-ui-font-sans);
    transform: translateY(calc(-100% - 24px));
}

.aeyloo-ui-skip-link:focus-visible {
    outline: 3px solid var(--aeyloo-ui-brand);
    outline-offset: 2px;
    transform: translateY(0);
}

.aeyloo-ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--aeyloo-ui-space-2);
    min-height: var(--aeyloo-ui-control-height);
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--aeyloo-ui-radius-control);
    font: 600 13px/1 var(--aeyloo-ui-font-sans);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--aeyloo-ui-motion-fast) ease, border-color var(--aeyloo-ui-motion-fast) ease, color var(--aeyloo-ui-motion-fast) ease, box-shadow var(--aeyloo-ui-motion-fast) ease, transform var(--aeyloo-ui-motion-fast) ease;
}

.aeyloo-ui-button:is(:hover, :focus-visible) {
    text-decoration: none;
}

.aeyloo-ui-button:focus-visible,
.aeyloo-ui-icon-button:focus-visible,
.aeyloo-ui-tab:focus-visible,
.aeyloo-ui-pagination__link:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--aeyloo-ui-focus);
}

.aeyloo-ui-button:active:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(1px);
}

.aeyloo-ui-button:disabled,
.aeyloo-ui-button[aria-disabled="true"] {
    opacity: 0.54;
    cursor: not-allowed;
    pointer-events: none;
}

.aeyloo-ui-button--primary {
    background: var(--aeyloo-ui-brand-strong);
    color: #ffffff;
    box-shadow: 0 5px 12px color-mix(in srgb, var(--aeyloo-ui-brand) 18%, transparent);
}

.aeyloo-ui-button--primary:hover {
    background: color-mix(in srgb, var(--aeyloo-ui-brand-strong) 88%, #000000);
}

.aeyloo-ui-button--secondary {
    border-color: var(--aeyloo-ui-border);
    background: var(--aeyloo-ui-surface);
    color: var(--aeyloo-ui-text-strong);
    box-shadow: var(--aeyloo-ui-shadow-sm);
}

.aeyloo-ui-button--secondary:hover,
.aeyloo-ui-button--ghost:hover {
    background: var(--aeyloo-ui-surface-soft);
}

.aeyloo-ui-button--ghost {
    background: transparent;
    color: var(--aeyloo-ui-text);
}

.aeyloo-ui-button--danger {
    background: var(--aeyloo-ui-critical);
    color: #ffffff;
}

.aeyloo-ui-button--sm {
    min-height: 34px;
    padding-inline: 12px;
    font-size: 12px;
}

.aeyloo-ui-button--lg {
    min-height: 48px;
    padding-inline: 20px;
    font-size: 14px;
}

.aeyloo-ui-button__spinner {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: aeyloo-ui-spin 700ms linear infinite;
}

.aeyloo-ui-icon-button {
    display: inline-grid;
    width: var(--aeyloo-ui-touch-target);
    min-width: var(--aeyloo-ui-touch-target);
    height: var(--aeyloo-ui-touch-target);
    padding: 0;
    place-items: center;
    border: 1px solid var(--aeyloo-ui-border);
    border-radius: var(--aeyloo-ui-radius-control);
    background: var(--aeyloo-ui-surface);
    color: var(--aeyloo-ui-text);
    cursor: pointer;
}

.aeyloo-ui-field {
    display: grid;
    gap: 6px;
    min-width: 0;
    font-family: var(--aeyloo-ui-font-sans);
}

.aeyloo-ui-field__label {
    color: var(--aeyloo-ui-text-strong);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.aeyloo-ui-field__required {
    color: var(--aeyloo-ui-critical);
}

.aeyloo-ui-field__control,
.aeyloo-ui-field > :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    box-sizing: border-box;
    width: 100%;
    min-height: var(--aeyloo-ui-control-height);
    padding: 10px 12px;
    border: 1px solid var(--aeyloo-ui-border);
    border-radius: var(--aeyloo-ui-radius-control);
    outline: none;
    background: var(--aeyloo-ui-surface);
    color: var(--aeyloo-ui-text);
    font: 400 14px/1.45 var(--aeyloo-ui-font-sans);
    transition: border-color var(--aeyloo-ui-motion-fast) ease, box-shadow var(--aeyloo-ui-motion-fast) ease;
}

.aeyloo-ui-field > textarea {
    min-height: 108px;
    resize: vertical;
}

.aeyloo-ui-field__control:not(:disabled):is(:hover, :focus, :active),
.aeyloo-ui-field > :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):not(:disabled):is(:hover, :focus, :active) {
    border-color: var(--aeyloo-field-active-border, var(--aeyloo-ui-brand));
}

.aeyloo-ui-field__control:not(:disabled):is(:focus, :active),
.aeyloo-ui-field > :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):not(:disabled):is(:focus, :active) {
    box-shadow: var(--aeyloo-field-active-shadow, var(--aeyloo-ui-focus));
}

.aeyloo-ui-field__control[aria-invalid="true"],
.aeyloo-ui-field > [aria-invalid="true"] {
    border-color: var(--aeyloo-ui-critical);
}

.aeyloo-ui-field__control:disabled,
.aeyloo-ui-field > :is(input, select, textarea):disabled {
    background: var(--aeyloo-ui-disabled-soft);
    color: var(--aeyloo-ui-disabled);
    cursor: not-allowed;
}

.aeyloo-ui-field__help,
.aeyloo-ui-field__error {
    font-size: 12px;
    line-height: 1.45;
}

.aeyloo-ui-field__help {
    color: var(--aeyloo-ui-text-muted);
}

.aeyloo-ui-field__error {
    color: var(--aeyloo-ui-critical);
    font-weight: 500;
}

.aeyloo-ui-choice {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    min-height: var(--aeyloo-ui-touch-target);
    color: var(--aeyloo-ui-text);
    font: 400 14px/1.45 var(--aeyloo-ui-font-sans);
    cursor: pointer;
}

.aeyloo-ui-choice > input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--aeyloo-ui-brand-strong);
}

.aeyloo-ui-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: var(--aeyloo-ui-touch-target);
    cursor: pointer;
}

.aeyloo-ui-toggle > input {
    position: absolute;
    opacity: 0;
}

.aeyloo-ui-toggle__track {
    position: relative;
    width: 40px;
    height: 22px;
    border: 1px solid var(--aeyloo-ui-border);
    border-radius: var(--aeyloo-ui-radius-pill);
    background: var(--aeyloo-ui-disabled-soft);
    transition: background var(--aeyloo-ui-motion-fast) ease, border-color var(--aeyloo-ui-motion-fast) ease;
}

.aeyloo-ui-toggle__track::after {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.24);
    content: "";
    transition: transform var(--aeyloo-ui-motion-normal) var(--aeyloo-ui-ease);
}

.aeyloo-ui-toggle > input:checked + .aeyloo-ui-toggle__track {
    border-color: var(--aeyloo-ui-brand-strong);
    background: var(--aeyloo-ui-brand-strong);
}

.aeyloo-ui-toggle > input:checked + .aeyloo-ui-toggle__track::after {
    transform: translateX(18px);
}

.aeyloo-ui-toggle > input:focus-visible + .aeyloo-ui-toggle__track {
    box-shadow: var(--aeyloo-ui-focus);
}

.aeyloo-ui-card {
    min-width: 0;
    overflow: clip;
    border: 1px solid var(--aeyloo-ui-border);
    border-radius: var(--aeyloo-ui-radius-card, 28px);
    background: var(--aeyloo-ui-surface);
    color: var(--aeyloo-ui-text);
    box-shadow: none;
}

.aeyloo-ui-card__header {
    display: flex;
    min-height: 64px;
    padding: 16px 20px;
    align-items: center;
    justify-content: space-between;
    gap: var(--aeyloo-ui-space-4);
    border-bottom: 1px solid var(--aeyloo-ui-border);
}

.aeyloo-ui-card__title,
.aeyloo-ui-page-header__title,
.aeyloo-ui-metric-card__value {
    margin: 0;
    color: var(--aeyloo-ui-text-strong);
    font-family: var(--aeyloo-ui-font-sans);
    font-weight: 600;
}

.aeyloo-ui-card__title {
    font-size: 18px;
    line-height: 1.35;
}

.aeyloo-ui-card__description,
.aeyloo-ui-page-header__description {
    margin: 4px 0 0;
    color: var(--aeyloo-ui-text-muted);
    font: 400 13px/1.5 var(--aeyloo-ui-font-sans);
}

.aeyloo-ui-card__body {
    padding: 20px;
}

.aeyloo-ui-card__footer {
    display: flex;
    padding: 14px 20px;
    align-items: center;
    justify-content: flex-end;
    gap: var(--aeyloo-ui-space-2);
    border-top: 1px solid var(--aeyloo-ui-border);
}

.aeyloo-ui-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--aeyloo-ui-space-6);
}

.aeyloo-ui-page-header__title {
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.aeyloo-ui-page-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--aeyloo-ui-space-2);
    flex-wrap: wrap;
}

.aeyloo-ui-status,
.aeyloo-ui-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    min-height: 24px;
    padding: 3px 9px;
    border: 1px solid transparent;
    border-radius: var(--aeyloo-ui-radius-pill);
    font: 600 12px/1.2 var(--aeyloo-ui-font-sans);
    white-space: nowrap;
}

.aeyloo-ui-status__icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

.aeyloo-ui-status--healthy,
.aeyloo-ui-status--success {
    border-color: color-mix(in srgb, var(--aeyloo-ui-success) 22%, transparent);
    background: var(--aeyloo-ui-success-soft);
    color: var(--aeyloo-ui-success);
}

.aeyloo-ui-status--info,
.aeyloo-ui-status--pending,
.aeyloo-ui-status--not-verified {
    border-color: color-mix(in srgb, var(--aeyloo-ui-info) 20%, transparent);
    background: var(--aeyloo-ui-info-soft);
    color: var(--aeyloo-ui-info);
}

.aeyloo-ui-status--warning {
    border-color: color-mix(in srgb, var(--aeyloo-ui-warning) 22%, transparent);
    background: var(--aeyloo-ui-warning-soft);
    color: var(--aeyloo-ui-warning);
}

.aeyloo-ui-status--critical {
    border-color: color-mix(in srgb, var(--aeyloo-ui-critical) 22%, transparent);
    background: var(--aeyloo-ui-critical-soft);
    color: var(--aeyloo-ui-critical);
}

.aeyloo-ui-status--blocked {
    border-color: color-mix(in srgb, var(--aeyloo-ui-blocked) 22%, transparent);
    background: var(--aeyloo-ui-blocked-soft);
    color: var(--aeyloo-ui-blocked);
}

.aeyloo-ui-status--disabled,
.aeyloo-ui-status--neutral,
.aeyloo-ui-badge {
    border-color: var(--aeyloo-ui-border);
    background: var(--aeyloo-ui-disabled-soft);
    color: var(--aeyloo-ui-disabled);
}

.aeyloo-ui-alert {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--aeyloo-ui-border);
    border-radius: var(--aeyloo-ui-radius-control);
    background: var(--aeyloo-ui-surface-soft);
    color: var(--aeyloo-ui-text);
    font: 400 13px/1.5 var(--aeyloo-ui-font-sans);
}

.aeyloo-ui-alert--info { border-color: color-mix(in srgb, var(--aeyloo-ui-info) 26%, transparent); background: var(--aeyloo-ui-info-soft); }
.aeyloo-ui-alert--success { border-color: color-mix(in srgb, var(--aeyloo-ui-success) 26%, transparent); background: var(--aeyloo-ui-success-soft); }
.aeyloo-ui-alert--warning { border-color: color-mix(in srgb, var(--aeyloo-ui-warning) 26%, transparent); background: var(--aeyloo-ui-warning-soft); }
.aeyloo-ui-alert--critical { border-color: color-mix(in srgb, var(--aeyloo-ui-critical) 26%, transparent); background: var(--aeyloo-ui-critical-soft); }

.aeyloo-ui-tooltip {
    position: relative;
    display: inline-flex;
}

.aeyloo-ui-tooltip__content {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    z-index: 90;
    width: max-content;
    max-width: min(260px, calc(100vw - 24px));
    padding: var(--aeyloo-tooltip-padding);
    border-radius: 8px;
    background: #101828;
    color: #ffffff;
    font: var(--aeyloo-tooltip-font-weight) var(--aeyloo-tooltip-font-size)/1.35 var(--aeyloo-ui-font-sans);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity var(--aeyloo-ui-motion-fast) ease, transform var(--aeyloo-ui-motion-fast) ease;
}

.aeyloo-ui-tooltip:is(:hover, :focus-within) .aeyloo-ui-tooltip__content {
    opacity: 1;
    transform: translate(-50%, 0);
}

.aeyloo-ui-dialog {
    width: min(620px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    padding: 0;
    overflow: auto;
    border: 1px solid var(--aeyloo-ui-border);
    border-radius: var(--aeyloo-ui-radius-panel);
    background: var(--aeyloo-ui-surface);
    color: var(--aeyloo-ui-text);
    box-shadow: var(--aeyloo-ui-shadow-lg);
}

.aeyloo-ui-dialog::backdrop {
    background: rgba(15, 23, 42, 0.52);
    backdrop-filter: blur(5px);
}

.aeyloo-ui-dialog__header,
.aeyloo-ui-dialog__body,
.aeyloo-ui-dialog__footer {
    padding: 18px 20px;
}

.aeyloo-ui-dialog__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--aeyloo-ui-border);
}

.aeyloo-ui-dialog__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--aeyloo-ui-border);
}

.aeyloo-ui-dropdown {
    min-width: 200px;
    padding: 6px;
    border: 1px solid var(--aeyloo-ui-border);
    border-radius: var(--aeyloo-ui-radius-control);
    background: var(--aeyloo-ui-surface);
    box-shadow: var(--aeyloo-ui-shadow-md);
}

.aeyloo-ui-dropdown__item {
    display: flex;
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--aeyloo-ui-text);
    font: 500 13px/1.35 var(--aeyloo-ui-font-sans);
    text-decoration: none;
}

.aeyloo-ui-dropdown__item:is(:hover, :focus-visible) {
    outline: none;
    background: var(--aeyloo-ui-surface-soft);
}

.aeyloo-ui-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    overflow-x: auto;
    border: 1px solid var(--aeyloo-ui-border);
    border-radius: 12px;
    background: var(--aeyloo-ui-surface-soft);
}

.aeyloo-ui-tab {
    display: inline-flex;
    min-height: 36px;
    padding: 8px 12px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--aeyloo-ui-text-muted);
    font: 600 13px/1 var(--aeyloo-ui-font-sans);
    text-decoration: none;
    white-space: nowrap;
}

.aeyloo-ui-tab[aria-selected="true"],
.aeyloo-ui-tab.is-active {
    background: var(--aeyloo-ui-surface);
    color: var(--aeyloo-ui-text-strong);
    box-shadow: var(--aeyloo-ui-shadow-sm);
}

.aeyloo-ui-table-shell {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--aeyloo-ui-border);
    border-radius: var(--aeyloo-ui-radius-card);
    background: var(--aeyloo-ui-surface);
}

.aeyloo-ui-table {
    width: 100%;
    min-width: 680px;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--aeyloo-ui-text);
    font: 400 13px/1.45 var(--aeyloo-ui-font-sans);
}

.aeyloo-ui-table :is(th, td) {
    padding: 12px 16px;
    border-bottom: 1px solid var(--aeyloo-ui-border);
    text-align: left;
    vertical-align: middle;
}

.aeyloo-ui-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--aeyloo-ui-surface-soft);
    color: var(--aeyloo-ui-text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.aeyloo-ui-table tbody tr:hover td {
    background: color-mix(in srgb, var(--aeyloo-ui-brand-soft) 42%, transparent);
}

.aeyloo-ui-table tbody tr:last-child td {
    border-bottom: 0;
}

.aeyloo-ui-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--aeyloo-ui-text-muted);
    font: 500 13px/1.35 var(--aeyloo-ui-font-sans);
}

.aeyloo-ui-pagination__links {
    display: flex;
    gap: 4px;
}

.aeyloo-ui-pagination__link {
    display: grid;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    place-items: center;
    border: 1px solid var(--aeyloo-ui-border);
    border-radius: 8px;
    background: var(--aeyloo-ui-surface);
    color: var(--aeyloo-ui-text);
    text-decoration: none;
}

.aeyloo-ui-pagination__link[aria-current="page"] {
    border-color: var(--aeyloo-ui-brand);
    background: var(--aeyloo-ui-brand-soft);
    color: var(--aeyloo-ui-brand-strong);
}

.aeyloo-ui-empty-state {
    display: grid;
    min-height: 220px;
    padding: 32px 20px;
    place-items: center;
    align-content: center;
    gap: 10px;
    color: var(--aeyloo-ui-text-muted);
    text-align: center;
}

.aeyloo-ui-empty-state__icon {
    display: grid;
    width: 48px;
    height: 48px;
    margin-bottom: 4px;
    place-items: center;
    border-radius: 14px;
    background: var(--aeyloo-ui-brand-soft);
    color: var(--aeyloo-ui-brand-strong);
}

.aeyloo-ui-empty-state__title {
    margin: 0;
    color: var(--aeyloo-ui-text-strong);
    font: 600 16px/1.35 var(--aeyloo-ui-font-sans);
}

.aeyloo-ui-empty-state__description {
    max-width: 460px;
    margin: 0;
    font: 400 13px/1.5 var(--aeyloo-ui-font-sans);
}

.aeyloo-ui-skeleton {
    position: relative;
    display: block;
    min-height: 14px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--aeyloo-ui-disabled-soft);
}

.aeyloo-ui-skeleton::after {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    display: block;
    width: 45%;
    height: 100%;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--aeyloo-ui-surface) 72%, transparent), transparent);
    content: "";
    animation: aeyloo-ui-skeleton 1.4s ease-in-out infinite;
}

.aeyloo-ui-toast-region {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1000;
    display: grid;
    width: min(380px, calc(100vw - 32px));
    gap: 8px;
    pointer-events: none;
}

.aeyloo-ui-toast {
    padding: 14px 16px;
    border: 1px solid var(--aeyloo-ui-border);
    border-radius: 12px;
    background: var(--aeyloo-ui-surface);
    color: var(--aeyloo-ui-text);
    box-shadow: var(--aeyloo-ui-shadow-md);
    font: 500 13px/1.45 var(--aeyloo-ui-font-sans);
    pointer-events: auto;
}

.aeyloo-ui-metric-card {
    display: grid;
    min-height: 128px;
    padding: 18px;
    align-content: space-between;
    gap: 16px;
    border: 1px solid var(--aeyloo-ui-border);
    border-radius: var(--aeyloo-ui-radius-card, 28px);
    background: var(--aeyloo-ui-surface);
    box-shadow: none;
}

.aeyloo-ui-metric-card__label {
    color: var(--aeyloo-ui-text-muted);
    font: 600 12px/1.35 var(--aeyloo-ui-font-sans);
}

.aeyloo-ui-metric-card__value {
    font-size: 26px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.aeyloo-ui-metric-card__meta {
    color: var(--aeyloo-ui-text-muted);
    font: 400 12px/1.4 var(--aeyloo-ui-font-sans);
}

@keyframes aeyloo-ui-spin {
    to { transform: rotate(360deg); }
}

@keyframes aeyloo-ui-skeleton {
    from { transform: translateX(-120%); }
    to { transform: translateX(240%); }
}

@media (max-width: 720px) {
    .aeyloo-ui-page-header {
        align-items: stretch;
        flex-direction: column;
        gap: var(--aeyloo-ui-space-4);
    }

    .aeyloo-ui-page-header__actions,
    .aeyloo-ui-dialog__footer {
        align-items: stretch;
        flex-direction: column;
    }

    .aeyloo-ui-page-header__actions > .aeyloo-ui-button,
    .aeyloo-ui-dialog__footer > .aeyloo-ui-button {
        width: 100%;
    }

    .aeyloo-ui-card__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .aeyloo-ui-table-shell[data-aeyloo-ui-mobile-table="stack"] {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .aeyloo-ui-table-shell[data-aeyloo-ui-mobile-table="stack"] .aeyloo-ui-table {
        min-width: 0;
    }

    .aeyloo-ui-table-shell[data-aeyloo-ui-mobile-table="stack"] .aeyloo-ui-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .aeyloo-ui-table-shell[data-aeyloo-ui-mobile-table="stack"] .aeyloo-ui-table :is(tbody, tr, td) {
        display: block;
        width: 100%;
    }

    .aeyloo-ui-table-shell[data-aeyloo-ui-mobile-table="stack"] .aeyloo-ui-table tr {
        margin-bottom: 12px;
        overflow: hidden;
        border: 1px solid var(--aeyloo-ui-border);
        border-radius: var(--aeyloo-ui-radius-card);
        background: var(--aeyloo-ui-surface);
    }

    .aeyloo-ui-table-shell[data-aeyloo-ui-mobile-table="stack"] .aeyloo-ui-table td::before {
        display: block;
        margin-bottom: 3px;
        color: var(--aeyloo-ui-text-muted);
        font-size: 11px;
        font-weight: 600;
        content: attr(data-label);
    }
}

@media (pointer: coarse) {
    .aeyloo-ui-button,
    .aeyloo-ui-tab,
    .aeyloo-ui-dropdown__item,
    .aeyloo-ui-pagination__link {
        min-height: var(--aeyloo-ui-touch-target);
    }
}

/* Aeyloo AI persistent-header control. */
.aeyloo-ui-ai-button {
    --aeyloo-ai-mark: #159fb1;
    --aeyloo-ai-tone-1: #159fb1;
    --aeyloo-ai-tone-2: #435dcc;
    --aeyloo-ai-tone-3: #783bbb;
    --aeyloo-ai-tone-4: #b23696;
    --aeyloo-ai-tone-5: #d361ab;
    --aeyloo-ai-tone-6: #e79c62;
    --aeyloo-ai-tone-7: #d9a727;
    --aeyloo-ai-tone-8: #e68a20;
    --aeyloo-ai-tone-9: #d75029;
    --aeyloo-ai-shine-strength: .65;
    --aeyloo-ai-hover-duration: 360ms;
    --aeyloo-ai-hover-ease: cubic-bezier(.2, .8, .2, 1);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--aeyloo-ui-radius-pill);
    background: transparent;
    color: var(--aeyloo-ai-mark);
    cursor: pointer;
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
}
.aeyloo-ui-ai-approval-badge{position:absolute;top:-.2rem;right:-.2rem;display:grid;place-items:center;min-width:1.15rem;height:1.15rem;padding:0 .25rem;border:2px solid var(--aeyloo-ui-surface,#fff);border-radius:999px;background:#c63f3f;color:#fff;font-size:.62rem;font-weight:900;line-height:1;box-shadow:0 .15rem .45rem rgba(0,0,0,.18)}

.aeyloo-ui-ai-button:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--aeyloo-ui-focus);
}

.aeyloo-ui-ai-icon {
    position: relative;
    display: block;
    width: 28px;
    height: 28px;
    z-index: 1;
    transition: transform var(--aeyloo-ai-hover-duration) var(--aeyloo-ai-hover-ease);
}

.aeyloo-ui-ai-mark {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.aeyloo-ui-ai-glyph {
    fill: url("#aeylooAiMarkGradient");
    stroke: url("#aeylooAiShineGradient");
    stroke-width: 1.6;
    stroke-linejoin: round;
    stroke-opacity: var(--aeyloo-ai-shine-strength);
    transition: stroke-opacity var(--aeyloo-ai-hover-duration) var(--aeyloo-ai-hover-ease);
}

.aeyloo-ui-ai-core-stop.is-1 { stop-color: var(--aeyloo-ai-tone-1); }
.aeyloo-ui-ai-core-stop.is-2 { stop-color: var(--aeyloo-ai-tone-2); }
.aeyloo-ui-ai-core-stop.is-3 { stop-color: var(--aeyloo-ai-tone-3); }
.aeyloo-ui-ai-core-stop.is-4 { stop-color: var(--aeyloo-ai-tone-4); }
.aeyloo-ui-ai-core-stop.is-5 { stop-color: var(--aeyloo-ai-tone-5); }
.aeyloo-ui-ai-core-stop.is-6 { stop-color: var(--aeyloo-ai-tone-6); }
.aeyloo-ui-ai-core-stop.is-7 { stop-color: var(--aeyloo-ai-tone-7); }
.aeyloo-ui-ai-core-stop.is-8 { stop-color: var(--aeyloo-ai-tone-8); }
.aeyloo-ui-ai-core-stop.is-9 { stop-color: var(--aeyloo-ai-tone-9); }

@media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
    .aeyloo-ui-ai-button:is(:hover, :focus-visible):not([data-aeyloo-ai-state="error"]) .aeyloo-ui-ai-icon {
        transform: scale(1.06);
    }

    .aeyloo-ui-ai-button:is(:hover, :focus-visible):not([data-aeyloo-ai-state="error"]) .aeyloo-ui-ai-glyph {
        stroke-opacity: 1;
    }
}

.aeyloo-ui-ai-button[data-aeyloo-ai-state="working"] {
    color: var(--aeyloo-ai-mark);
}

.aeyloo-ui-ai-button[data-aeyloo-ai-state="success"] {
    color: var(--aeyloo-ui-positive);
}

.aeyloo-ui-ai-button[data-aeyloo-ai-state="error"] {
    color: var(--aeyloo-ui-critical);
    cursor: not-allowed;
}

.aeyloo-ui-ai-button[data-aeyloo-ai-state="error"] .aeyloo-ui-ai-glyph {
    fill: currentColor;
    stroke: none;
}

html[data-aeyloo-color-mode="dark"] .aeyloo-ui-ai-button {
    --aeyloo-ai-mark: #4fd1dc;
    --aeyloo-ai-tone-1: #4fd1dc;
    --aeyloo-ai-tone-2: #586be1;
    --aeyloo-ai-tone-3: #8a4fd2;
    --aeyloo-ai-tone-4: #c54aad;
    --aeyloo-ai-tone-5: #ef86c8;
    --aeyloo-ai-tone-6: #ffd0a4;
    --aeyloo-ai-tone-7: #ffe486;
    --aeyloo-ai-tone-8: #ffad43;
    --aeyloo-ai-tone-9: #f06438;
    --aeyloo-ai-shine-strength: .9;
}

@supports (transition-timing-function: linear(0, 1)) {
    .aeyloo-ui-ai-button {
        --aeyloo-ai-hover-duration: 640ms;
        --aeyloo-ai-hover-ease: linear(0, .03701, .12461, .23632, .35476, .46912, .57328, .66427, .74124, .80462, .85562, .89577, .92674, .95014, .96745, .97996, .98876, .99476, .99868, 1.00111, 1.00247, 1.00311, 1.00328, 1.00316, 1.00287, 1.00251, 1.00212, 1.00174, 1.0014, 1.0011, 1.00085, 1.00064, 1);
    }
}

@media (max-width: 900px) {
    .aeyloo-ui-ai-button {
        width: 36px;
        height: 36px;
    }

    .aeyloo-ui-ai-icon {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 560px) {
    .aeyloo-ui-ai-button {
        width: 24px;
        height: 20px;
    }

    .aeyloo-ui-ai-icon {
        width: 17px;
        height: 17px;
    }

}

/* Controlled layout helpers for values that must remain declarative in markup. */
.aeyloo-ui-pre-wrap { white-space: pre-wrap; }
.aeyloo-ui-break-anywhere { overflow-wrap: anywhere; word-break: break-word; }
.aeyloo-ui-progress-width { width: var(--aeyloo-ui-progress, 0%); }
.aeyloo-ui-shadow-none { box-shadow: none; }
.aeyloo-ui-surface-plain { padding-inline-start: 0; background: transparent; box-shadow: none; }
.aeyloo-ui-justify-start { justify-content: flex-start; }
.aeyloo-ui-m-0 { margin: 0; }
.aeyloo-ui-mt-3 { margin-block-start: 12px; }
.aeyloo-ui-mt-4 { margin-block-start: 16px; }
.aeyloo-ui-mt-5 { margin-block-start: 20px; }
.aeyloo-ui-table-min-420 { min-width: 420px; }
.aeyloo-ui-table-min-520 { min-width: 520px; }
.aeyloo-ui-table-min-680 { min-width: 680px; }

/* Persistent authenticated-shell navigation primitives. */
.aeyloo-ui-shell-route-context,
.aeyloo-ui-shell-product-state {
    display: contents;
}

.aeyloo-ui-navigation-pending {
    filter: saturate(1.08);
}

body.aeyloo-shell-is-loading .aeyloo-ui-navigation-loading-host[aria-busy="true"] {
    position: relative;
    opacity: 1;
}

.aeyloo-ui-navigation-loading-host > :not([data-aeyloo-navigation-loading]) {
    /* Keep the actual card shells/grid visible; only their contents are masked. */
    pointer-events: none !important;
}

.aeyloo-ui-navigation-loading {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: var(--aeyloo-shell-page-gap, 16px);
    overflow: auto;
    color: var(--aeyloo-ui-text);
}

.aeyloo-ui-navigation-loading > header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
}

.aeyloo-ui-navigation-loading h1 {
    margin: 0;
    font: 650 22px/1.3 var(--aeyloo-ui-font-sans);
    overflow-wrap: anywhere;
}

.aeyloo-ui-navigation-loading [role="status"] {
    color: var(--aeyloo-ui-text-muted);
    font-size: 12px;
}


.aeyloo-ui-navigation-error {
    position: fixed;
    top: 18px;
    left: 50%;
    z-index: 10050;
    display: flex;
    align-items: center;
    width: min(680px, calc(100vw - 32px));
    min-height: 56px;
    padding: 10px 12px 10px 16px;
    gap: 18px;
    border: 1px solid color-mix(in srgb, var(--aeyloo-ui-critical) 30%, var(--aeyloo-ui-border));
    border-radius: var(--aeyloo-ui-radius-card);
    background: color-mix(in srgb, var(--aeyloo-ui-surface) 94%, var(--aeyloo-ui-critical-soft));
    box-shadow: var(--aeyloo-ui-shadow-lg);
    color: var(--aeyloo-ui-text);
    transform: translateX(-50%);
}

.aeyloo-ui-navigation-error > span:first-child {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.aeyloo-ui-navigation-error > span:first-child > span {
    color: var(--aeyloo-ui-text-muted);
    font-size: 12px;
}

.aeyloo-ui-navigation-error > span:last-child {
    display: flex;
    flex: 0 0 auto;
    margin-inline-start: auto;
    gap: 8px;
}

.aeyloo-ui-navigation-error :is(button, a) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid var(--aeyloo-ui-border-strong);
    border-radius: var(--aeyloo-ui-radius-control);
    background: var(--aeyloo-ui-surface);
    color: var(--aeyloo-ui-text);
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
}

.aeyloo-ui-navigation-error button {
    border-color: var(--aeyloo-ui-brand-strong);
    background: var(--aeyloo-ui-brand-strong);
    color: #ffffff;
}

.aeyloo-ui-navigation-error :is(button, a):focus-visible {
    outline: 0;
    box-shadow: var(--aeyloo-ui-focus);
}

@media (max-width: 560px) {
    .aeyloo-ui-navigation-error {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .aeyloo-ui-navigation-error > span:last-child {
        width: 100%;
        margin-inline-start: 0;
    }

    .aeyloo-ui-navigation-error :is(button, a) {
        flex: 1 1 0;
        min-height: var(--aeyloo-ui-touch-target);
    }
}


@media (prefers-reduced-motion: reduce) {
    .aeyloo-ui-button,
    .aeyloo-ui-tooltip__content,
    .aeyloo-ui-toggle__track,
    .aeyloo-ui-toggle__track::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .aeyloo-ui-button__spinner,
    .aeyloo-ui-skeleton::after {
        animation: none !important;
    }

    .aeyloo-ui-ai-button[data-aeyloo-ai-state] .aeyloo-ui-ai-icon {
        transform: none;
        transition: none;
    }

    .aeyloo-ui-ai-button[data-aeyloo-ai-state] .aeyloo-ui-ai-glyph {
        stroke: none;
        transition: none;
    }

}

@media (forced-colors: active) {
    .aeyloo-ui-button,
    .aeyloo-ui-card,
    .aeyloo-ui-field__control,
    .aeyloo-ui-status,
    .aeyloo-ui-table-shell {
        border-color: CanvasText;
    }

    .aeyloo-ui-navigation-error {
        border-color: CanvasText;
        box-shadow: none;
    }

    .aeyloo-ui-ai-button {
        border: 1px solid ButtonText;
        color: ButtonText;
    }

    .aeyloo-ui-ai-button[data-aeyloo-ai-state] .aeyloo-ui-ai-glyph {
        fill: ButtonText;
        stroke: none;
        transition: none;
    }

    .aeyloo-ui-ai-button[data-aeyloo-ai-state] .aeyloo-ui-ai-icon {
        transform: none;
        transition: none;
    }

    .aeyloo-ui-ai-visual {
        filter: none;
    }

}