/* =============================================================================
   SARILUX Design System v1.0
   Single source of truth — do NOT duplicate tokens or components in app.css
   ============================================================================= */

/* ── 1. PRIMITIVE TOKENS ─────────────────────────────────────────────────── */

:root {
    /* Brand (injected via layout from settings; fallbacks below) */
    --brand-primary: #c9a962;
    --brand-secondary: #8b7355;

    /* Semantic color */
    --ui-primary: var(--brand-primary);
    --ui-primary-hover: color-mix(in srgb, var(--brand-primary) 88%, #000);
    --ui-primary-subtle: color-mix(in srgb, var(--brand-primary) 14%, #fff);
    --ui-secondary: var(--brand-secondary);
    --ui-success: #059669;
    --ui-success-subtle: #ecfdf5;
    --ui-warning: #d97706;
    --ui-warning-subtle: #fffbeb;
    --ui-danger: #dc2626;
    --ui-danger-subtle: #fef2f2;
    --ui-info: #2563eb;
    --ui-info-subtle: #eff6ff;

    /* Surfaces */
    --ui-background: #f7f6f3;
    --ui-surface: #ffffff;
    --ui-surface-alt: #fafaf9;
    --ui-surface-elevated: rgba(255, 255, 255, 0.92);
    --ui-glass: rgba(255, 255, 255, 0.72);
    --ui-border: #e7e5e4;
    --ui-border-subtle: #f5f5f4;

    /* Text */
    --ui-text: #1c1917;
    --ui-text-muted: #78716c;
    --ui-text-subtle: #a8a29e;
    --ui-text-inverse: #fafaf9;

    /* Focus */
    --ui-focus-ring: color-mix(in srgb, var(--ui-primary) 24%, transparent);
    --ui-focus-outline: var(--ui-primary);

    /* Spacing — 8px grid only */
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 24px;
    --ui-space-6: 32px;
    --ui-space-7: 40px;
    --ui-space-8: 48px;
    --ui-space-9: 64px;

    /* Radius */
    --ui-radius-xs: 6px;
    --ui-radius-sm: 10px;
    --ui-radius-md: 14px;
    --ui-radius-lg: 16px;
    --ui-radius-xl: 20px;
    --ui-radius-full: 9999px;

    /* Shadows */
    --ui-shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05);
    --ui-shadow-md: 0 8px 24px rgba(28, 25, 23, 0.07);
    --ui-shadow-lg: 0 16px 48px rgba(28, 25, 23, 0.1);
    --ui-shadow-hover: 0 12px 32px rgba(28, 25, 23, 0.1);
    --ui-shadow-focus: 0 0 0 3px var(--ui-focus-ring);

    /* Typography */
    --ui-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ui-font-display: 'Cormorant Garamond', Georgia, serif;

    /* Type scale */
    --ui-text-h1: 2.25rem;
    --ui-text-h2: 1.875rem;
    --ui-text-h3: 1.5rem;
    --ui-text-h4: 1.25rem;
    --ui-text-body: 0.9375rem;
    --ui-text-small: 0.8125rem;
    --ui-text-caption: 0.75rem;

    /* Motion */
    --ui-duration-fast: 150ms;
    --ui-duration: 200ms;
    --ui-duration-slow: 350ms;
    --ui-ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* Layout */
    --ui-page-max: 88rem;
    --ui-sidebar-width: 260px;
    --ui-z-dropdown: 40;
    --ui-z-sticky: 30;
    --ui-z-modal: 50;
    --ui-z-toast: 60;
}

.dark {
    --ui-background: #0c0a09;
    --ui-surface: #1c1917;
    --ui-surface-alt: #14110f;
    --ui-surface-elevated: rgba(28, 25, 23, 0.94);
    --ui-glass: rgba(28, 25, 23, 0.78);
    --ui-border: #44403c;
    --ui-border-subtle: #292524;
    --ui-text: #fafaf9;
    --ui-text-muted: #a8a29e;
    --ui-text-subtle: #78716c;
    --ui-primary-subtle: color-mix(in srgb, var(--brand-primary) 18%, #1c1917);
    --ui-success-subtle: rgba(5, 150, 105, 0.15);
    --ui-warning-subtle: rgba(217, 119, 6, 0.15);
    --ui-danger-subtle: rgba(220, 38, 38, 0.15);
    --ui-info-subtle: rgba(37, 99, 235, 0.15);
    --ui-shadow-md: 0 8px 28px rgba(0, 0, 0, 0.35);
    --ui-shadow-lg: 0 20px 56px rgba(0, 0, 0, 0.45);
}

/* ── 2. BASE ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--ui-font-sans);
    font-size: var(--ui-text-body);
    line-height: 1.5;
    color: var(--ui-text);
    background: var(--ui-background);
}

.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;
}

/* ── 3. TYPOGRAPHY ───────────────────────────────────────────────────────── */

.ui-h1, .ui-heading-1 { font-size: var(--ui-text-h1); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--ui-text); }
.ui-h2, .ui-heading-2, .ui-title { font-size: var(--ui-text-h2); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; color: var(--ui-text); }
.ui-h3, .ui-heading-3 { font-size: var(--ui-text-h3); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--ui-text); }
.ui-h4, .ui-heading-4 { font-size: var(--ui-text-h4); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--ui-text); }
.ui-body { font-size: var(--ui-text-body); line-height: 1.55; color: var(--ui-text); }
.ui-small { font-size: var(--ui-text-small); line-height: 1.45; color: var(--ui-text-muted); }
.ui-caption { font-size: var(--ui-text-caption); line-height: 1.4; color: var(--ui-text-subtle); }
.ui-subtitle { font-size: var(--ui-text-body); line-height: 1.5; color: var(--ui-text-muted); }
.ui-eyebrow { font-size: var(--ui-text-caption); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ui-text-subtle); }
.ui-display { font-family: var(--ui-font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--ui-text); }

/* ── 4. LAYOUT ───────────────────────────────────────────────────────────── */

.ui-page { max-width: var(--ui-page-max); margin: 0 auto; }
.ui-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--ui-space-4) var(--ui-space-5); margin-bottom: var(--ui-space-5); }
.ui-page-header__actions { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); align-items: center; }
.ui-stack { display: flex; flex-direction: column; gap: var(--ui-space-4); }
.ui-stack--sm { gap: var(--ui-space-2); }
.ui-stack--md { gap: var(--ui-space-4); }
.ui-stack--lg { gap: var(--ui-space-6); }

/* ── 5. BUTTONS ──────────────────────────────────────────────────────────── */

.ui-btn, .btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-2);
    padding: 0.6875rem 1.125rem;
    font-family: inherit;
    font-size: var(--ui-text-body);
    font-weight: 600;
    line-height: 1.25;
    border-radius: var(--ui-radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform var(--ui-duration) var(--ui-ease), box-shadow var(--ui-duration) var(--ui-ease), background var(--ui-duration), border-color var(--ui-duration), color var(--ui-duration), filter var(--ui-duration);
}

.ui-btn:focus-visible, .btn-gold:focus-visible { outline: 2px solid var(--ui-focus-outline); outline-offset: 2px; }
.ui-btn--sm, .ui-btn-sm { padding: 0.5rem 0.875rem; font-size: var(--ui-text-small); border-radius: var(--ui-radius-sm); }
.ui-btn--lg { padding: 0.8125rem 1.375rem; font-size: 1rem; }
.ui-btn--icon { padding: var(--ui-space-2); width: 2.5rem; height: 2.5rem; }
.ui-btn--fab { position: fixed; right: var(--ui-space-5); bottom: var(--ui-space-5); width: 3.5rem; height: 3.5rem; border-radius: var(--ui-radius-full); box-shadow: var(--ui-shadow-lg); z-index: var(--ui-z-dropdown); }

.ui-btn--primary, .btn-gold, .ui-btn-primary {
    color: var(--ui-text);
    background: linear-gradient(135deg, var(--ui-primary) 0%, color-mix(in srgb, var(--ui-secondary) 85%, var(--ui-primary)) 100%);
    box-shadow: var(--ui-shadow-sm), 0 4px 16px color-mix(in srgb, var(--ui-primary) 28%, transparent);
}
.ui-btn--primary:hover, .btn-gold:hover, .ui-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.03); box-shadow: var(--ui-shadow-hover), 0 4px 20px color-mix(in srgb, var(--ui-primary) 34%, transparent); }

.ui-btn--secondary, .ui-btn-secondary {
    color: var(--ui-text);
    background: var(--ui-surface);
    border-color: var(--ui-border);
    box-shadow: var(--ui-shadow-sm);
}
.ui-btn--secondary:hover, .ui-btn-secondary:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--ui-primary) 35%, var(--ui-border)); }

.ui-btn--outline {
    color: var(--ui-text);
    background: transparent;
    border-color: var(--ui-border);
}
.ui-btn--outline:hover { background: var(--ui-surface-alt); border-color: color-mix(in srgb, var(--ui-primary) 40%, var(--ui-border)); }

.ui-btn--ghost, .ui-btn-ghost {
    color: var(--ui-text-muted);
    background: transparent;
    border-color: transparent;
    padding: 0.5rem 0.75rem;
}
.ui-btn--ghost:hover, .ui-btn-ghost:hover { color: var(--ui-text); background: color-mix(in srgb, var(--ui-text) 6%, transparent); }

.ui-btn--danger { color: #fff; background: var(--ui-danger); }
.ui-btn--danger:hover { filter: brightness(1.05); transform: translateY(-1px); }
.ui-btn--success { color: #fff; background: var(--ui-success); }
.ui-btn--success:hover { filter: brightness(1.05); transform: translateY(-1px); }

.ui-btn--loading, .ui-btn--disabled, .ui-btn:disabled { opacity: 0.65; cursor: not-allowed; transform: none !important; pointer-events: none; }

/* ── 6. FORMS ────────────────────────────────────────────────────────────── */

.ui-field { margin-bottom: var(--ui-space-4); }
.ui-label {
    display: block;
    margin-bottom: var(--ui-space-2);
    font-size: var(--ui-text-small);
    font-weight: 600;
    color: var(--ui-text);
}
.ui-label__required { color: var(--ui-danger); margin-left: 2px; }
.ui-field__hint { margin-top: var(--ui-space-2); font-size: var(--ui-text-caption); color: var(--ui-text-subtle); }
.ui-field__error { margin-top: var(--ui-space-2); font-size: var(--ui-text-caption); color: var(--ui-danger); font-weight: 500; }
.ui-field--error .ui-input, .ui-field--error .ui-textarea, .ui-field--error .ui-select { border-color: var(--ui-danger); }

.ui-input, .ui-select, .ui-textarea,
.ui-search__input,
.glass input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='submit']):not([type='button']):not([type='file']),
.glass select, .glass textarea,
.glass-admin input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='submit']):not([type='button']):not([type='file']),
.glass-admin select, .glass-admin textarea,
.admin-panel input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='submit']):not([type='button']):not([type='file']),
.admin-panel select, .admin-panel textarea,
.login-input {
    display: block;
    width: 100%;
    padding: 0.6875rem 0.875rem;
    font-family: inherit;
    font-size: var(--ui-text-body);
    line-height: 1.5;
    color: var(--ui-text);
    background: var(--ui-surface-alt);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    transition: border-color var(--ui-duration), box-shadow var(--ui-duration), background var(--ui-duration);
}
.ui-textarea { min-height: 6rem; resize: vertical; }
.ui-input:hover, .ui-select:hover, .ui-textarea:hover,
.glass input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='submit']):not([type='button']):hover,
.glass-admin input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='submit']):not([type='button']):hover {
    border-color: color-mix(in srgb, var(--ui-border) 70%, var(--ui-text-subtle));
    background: var(--ui-surface);
}
.ui-input:focus, .ui-select:focus, .ui-textarea:focus,
.glass input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='submit']):not([type='button']):focus,
.glass-admin input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='submit']):not([type='button']):focus,
.login-input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--ui-primary) 55%, var(--ui-border));
    box-shadow: var(--ui-shadow-focus);
    background: var(--ui-surface);
}
.ui-input::placeholder, .ui-textarea::placeholder, .login-input::placeholder { color: var(--ui-text-subtle); }
.ui-input:disabled, .ui-select:disabled, .ui-textarea:disabled { opacity: 0.6; cursor: not-allowed; }

.ui-input[type='range'] {
    padding: 0;
    height: auto;
    background: transparent;
    border: none;
    box-shadow: none;
}

.ui-input[type='range']:focus {
    box-shadow: none;
}

.ui-input[type='color'] {
    height: 2.75rem;
    padding: var(--ui-space-1);
}

.ui-checkbox-field {
    display: flex;
    align-items: flex-start;
    gap: var(--ui-space-2);
    font-size: var(--ui-text-small);
    color: var(--ui-text);
    cursor: pointer;
}

.ui-checkbox-field span { line-height: 1.45; }

.ui-checkbox, .ui-radio {
    width: 1rem;
    height: 1rem;
    accent-color: var(--ui-primary);
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.ui-field--flush { margin-bottom: 0; }

.ui-code-block {
    display: block;
    margin: 0;
    padding: var(--ui-space-3);
    font-size: var(--ui-text-caption);
    line-height: 1.5;
    overflow-x: auto;
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-alt);
    border: 1px solid var(--ui-border);
    color: var(--ui-text-muted);
    word-break: break-all;
    user-select: all;
}

.ui-brand-preview {
    padding: var(--ui-space-5);
    border-radius: var(--ui-radius-md);
    border: 1px solid color-mix(in srgb, var(--ui-primary) 25%, var(--ui-border));
    background: color-mix(in srgb, var(--ui-surface-alt) 85%, transparent);
}

.ui-settings-hours-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ui-space-2);
    align-items: center;
    padding-bottom: var(--ui-space-3);
    margin-bottom: var(--ui-space-2);
    border-bottom: 1px solid var(--ui-border-subtle);
}

.ui-settings-hours-row__day {
    font-weight: 600;
    font-size: var(--ui-text-small);
}

@media (min-width: 640px) {
    .ui-settings-hours-row {
        grid-template-columns: 8.75rem 1fr 1fr auto;
        padding-bottom: var(--ui-space-2);
        margin-bottom: 0;
    }
}

.ui-settings-form {
    width: 100%;
    max-width: 42rem;
    min-width: 0;
}

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

@media (max-width: 767px) {
    .ui-table-actions {
        justify-content: flex-start;
    }

    .ui-brand-preview {
        padding: var(--ui-space-4);
    }

    .ui-card,
    .glass-admin {
        min-width: 0;
    }
}
.ui-switch { appearance: none; width: 2.5rem; height: 1.375rem; border-radius: var(--ui-radius-full); background: var(--ui-border); position: relative; cursor: pointer; transition: background var(--ui-duration); }
.ui-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: #fff; transition: transform var(--ui-duration); box-shadow: var(--ui-shadow-sm); }
.ui-switch:checked { background: var(--ui-primary); }
.ui-switch:checked::after { transform: translateX(1.125rem); }

.ui-search { position: relative; width: 100%; }
.ui-search__icon { position: absolute; left: var(--ui-space-3); top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: var(--ui-text-subtle); pointer-events: none; }
.ui-search__input, .admin-search-input { padding-left: 2.5rem; }

/* ── 6b. WIZARD / CHOICE (booking, onboarding) ───────────────────────────── */

.ui-page--narrow { max-width: 56rem; padding-inline: var(--ui-space-3); }
@media (min-width: 640px) {
    .ui-page--narrow { padding-inline: var(--ui-space-4); }
}

.ui-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
    margin-bottom: var(--ui-space-5);
}

.ui-steps__item {
    font-size: 0.65rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--ui-radius-full);
    font-weight: 600;
    transition: background var(--ui-duration), color var(--ui-duration), box-shadow var(--ui-duration);
}

@media (min-width: 640px) {
    .ui-steps__item {
        font-size: var(--ui-text-small);
        padding: 0.25rem 0.75rem;
    }
}

.ui-steps__item--done {
    color: #fff;
    background: var(--ui-primary);
}

.ui-steps__item--active {
    color: var(--ui-text);
    background: var(--ui-primary-subtle);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-primary) 45%, transparent);
}

.ui-steps__item--pending {
    color: var(--ui-text-muted);
    background: color-mix(in srgb, var(--ui-surface-alt) 80%, var(--ui-border));
}

.ui-choice-grid {
    display: grid;
    gap: var(--ui-space-3);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .ui-choice-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ui-choice {
    display: block;
    cursor: pointer;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    padding: var(--ui-space-4);
    transition: border-color var(--ui-duration), background var(--ui-duration);
}

.ui-choice:hover {
    border-color: color-mix(in srgb, var(--ui-primary) 40%, var(--ui-border));
}

.ui-choice--selected {
    border-color: var(--ui-primary);
    background: var(--ui-primary-subtle);
}

.ui-choice--row {
    display: flex;
    align-items: center;
    gap: var(--ui-space-4);
}

.ui-choice__title { font-family: var(--ui-font-serif, Georgia, serif); font-weight: 600; }
.ui-choice__meta { display: block; font-size: var(--ui-text-small); color: var(--ui-text-muted); margin-top: 0.15rem; }

.ui-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: var(--ui-radius-full);
    background: var(--ui-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-primary) 25%, transparent);
}

.ui-avatar img { width: 100%; height: 100%; object-fit: cover; }

.ui-avatar--sm {
    width: 2.5rem;
    height: 2.5rem;
}

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

@media (min-width: 640px) {
    .ui-slot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
    .ui-slot-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.ui-slot {
    display: block;
    text-align: center;
    padding: var(--ui-space-2);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    cursor: pointer;
    font-size: var(--ui-text-small);
    transition: border-color var(--ui-duration), background var(--ui-duration), color var(--ui-duration);
}

.ui-slot:hover {
    border-color: color-mix(in srgb, var(--ui-primary) 40%, var(--ui-border));
}

.ui-slot--selected {
    background: var(--ui-primary);
    color: #fff;
    border-color: var(--ui-primary);
}

.ui-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-3);
    margin-top: var(--ui-space-5);
}

.ui-form-actions--flush {
    margin-top: 0;
}

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

@media (min-width: 640px) {
    .ui-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-grid-2__span-2 { grid-column: 1 / -1; }
}

.ui-step-title {
    font-weight: 600;
    margin-bottom: var(--ui-space-4);
}

/* ── 7. CARDS ──────────────────────────────────────────────────────────────── */

.ui-card, .glass-admin, .admin-panel {
    padding: var(--ui-space-5);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-elevated);
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow-sm), var(--ui-shadow-md);
    transition: box-shadow var(--ui-duration-slow) var(--ui-ease), transform var(--ui-duration-slow) var(--ui-ease);
}
.glass-admin, .admin-panel { padding: var(--ui-space-4); overflow: hidden; }
.ui-card:hover, .glass-admin:hover, .admin-panel:hover { box-shadow: var(--ui-shadow-sm), var(--ui-shadow-hover); }
.ui-card--glass, .glass {
    background: var(--ui-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid color-mix(in srgb, var(--ui-border) 55%, transparent);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-sm), var(--ui-shadow-md);
}

.ui-card--stat { padding: var(--ui-space-5); }
.ui-card--chart { padding: var(--ui-space-5); }
.ui-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ui-space-4); margin-bottom: var(--ui-space-4); }
.ui-card__title, .admin-panel__title { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ui-text); }
.ui-card__subtitle, .admin-panel__subtitle { margin-top: var(--ui-space-1); font-size: var(--ui-text-small); color: var(--ui-text-muted); }
.ui-card__link, .admin-panel__link { font-size: var(--ui-text-small); font-weight: 600; color: var(--ui-primary); text-decoration: none; }
.ui-card__link:hover, .admin-panel__link:hover { opacity: 0.85; }

.admin-kpi-card {
    padding: var(--ui-space-5);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-elevated);
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow-sm), var(--ui-shadow-md);
    transition: transform var(--ui-duration-slow) var(--ui-ease), box-shadow var(--ui-duration-slow) var(--ui-ease);
}
.admin-kpi-card:hover { transform: translateY(-2px); box-shadow: var(--ui-shadow-hover); }

/* ── 8. TABLES ───────────────────────────────────────────────────────────── */

.ui-table-wrap, .ui-table-wrap.table-scroll, .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ui-table, .glass-admin table { width: 100%; font-size: var(--ui-text-small); border-collapse: collapse; }
.ui-table thead th, .glass-admin thead th {
    padding: var(--ui-space-3) var(--ui-space-4);
    font-size: var(--ui-text-caption);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    color: var(--ui-text-muted);
    background: var(--ui-surface-alt);
    border-bottom: 1px solid var(--ui-border);
}
.ui-table--sticky thead th { position: sticky; top: 0; z-index: 2; }
.ui-table tbody td, .glass-admin tbody td {
    padding: 0.875rem var(--ui-space-4);
    vertical-align: middle;
    border-top: 1px solid var(--ui-border-subtle);
}
.ui-table tbody tr { transition: background var(--ui-duration); }
.ui-table tbody tr:hover td, .glass-admin tbody tr:hover td { background: var(--ui-primary-subtle); }
.ui-table--compact tbody td, .ui-table--compact thead th { padding-top: var(--ui-space-2); padding-bottom: var(--ui-space-2); }

/* ── 9. BADGES ───────────────────────────────────────────────────────────── */

.ui-badge, .admin-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    font-size: var(--ui-text-caption);
    font-weight: 700;
    border-radius: var(--ui-radius-full);
    white-space: nowrap;
}
.ui-badge--neutral { color: var(--ui-text-muted); background: var(--ui-border-subtle); }
.ui-badge--gold, .ui-badge--premium { color: color-mix(in srgb, var(--ui-primary) 70%, #000); background: var(--ui-primary-subtle); }
.ui-badge--success, .admin-badge--completed { color: var(--ui-success); background: var(--ui-success-subtle); }
.ui-badge--warning, .admin-badge--pending, .ui-badge--pending { color: var(--ui-warning); background: var(--ui-warning-subtle); }
.ui-badge--danger, .admin-badge--cancelled { color: var(--ui-danger); background: var(--ui-danger-subtle); }
.ui-badge--info, .admin-badge--confirmed { color: var(--ui-info); background: var(--ui-info-subtle); }

/* ── 10. ALERTS & TOASTS ─────────────────────────────────────────────────── */

.ui-alert, .admin-flash {
    display: flex;
    gap: var(--ui-space-3);
    padding: var(--ui-space-3) var(--ui-space-4);
    border-radius: var(--ui-radius-md);
    border: 1px solid transparent;
    font-size: var(--ui-text-small);
}
.ui-alert__title { font-weight: 600; margin-bottom: var(--ui-space-1); }
.ui-alert__message { line-height: 1.45; }
.ui-alert--success, .admin-flash--success { color: #166534; background: var(--ui-success-subtle); border-color: color-mix(in srgb, var(--ui-success) 30%, transparent); }
.ui-alert--info, .admin-flash--demo { color: #0c4a6e; background: var(--ui-info-subtle); border-color: color-mix(in srgb, var(--ui-info) 30%, transparent); }
.ui-alert--warning, .admin-flash--warning { color: #92400e; background: var(--ui-warning-subtle); border-color: color-mix(in srgb, var(--ui-warning) 30%, transparent); }
.ui-alert--danger, .admin-flash--error { color: #991b1b; background: var(--ui-danger-subtle); border-color: color-mix(in srgb, var(--ui-danger) 30%, transparent); }
.dark .ui-alert--success, .dark .admin-flash--success { color: #86efac; }
.dark .ui-alert--danger, .dark .admin-flash--error { color: #fca5a5; }
.dark .ui-alert--warning, .dark .admin-flash--warning { color: #fcd34d; }
.dark .ui-alert--info, .dark .admin-flash--demo { color: #7dd3fc; }

.ui-toast, .toast-flash {
    position: fixed;
    top: var(--ui-space-5);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--ui-z-toast);
    max-width: min(92vw, 28rem);
    padding: var(--ui-space-3) var(--ui-space-4);
    border-radius: var(--ui-radius-md);
    box-shadow: var(--ui-shadow-lg);
    font-size: var(--ui-text-small);
    animation: uiFadeIn var(--ui-duration-slow) var(--ui-ease);
}

/* ── 11. EMPTY STATES ────────────────────────────────────────────────────── */

.ui-empty, .ui-empty-state {
    padding: var(--ui-space-8) var(--ui-space-4);
    text-align: center;
}
.ui-empty-state__icon { display: flex; justify-content: center; margin-bottom: var(--ui-space-4); color: var(--ui-text-subtle); }
.ui-empty-state__svg { width: 3rem; height: 3rem; opacity: 0.7; }
.ui-empty-state__title { font-size: var(--ui-text-h4); font-weight: 600; color: var(--ui-text); margin-bottom: var(--ui-space-2); }
.ui-empty-state__description { font-size: var(--ui-text-small); color: var(--ui-text-muted); max-width: 24rem; margin: 0 auto var(--ui-space-5); }
.ui-empty-state__actions { display: flex; justify-content: center; gap: var(--ui-space-2); }

/* ── 12. LOADING ─────────────────────────────────────────────────────────── */

.ui-spinner {
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid color-mix(in srgb, var(--ui-primary) 25%, transparent);
    border-top-color: var(--ui-primary);
    border-radius: 50%;
    animation: uiSpin 0.7s linear infinite;
}
.ui-spinner--sm { width: 0.875rem; height: 0.875rem; }
.ui-spinner--lg { width: 1.5rem; height: 1.5rem; }

.ui-skeleton {
    background: linear-gradient(90deg, var(--ui-border-subtle) 25%, color-mix(in srgb, var(--ui-border) 50%, var(--ui-surface)) 50%, var(--ui-border-subtle) 75%);
    background-size: 200% 100%;
    animation: uiShimmer 1.2s ease-in-out infinite;
    border-radius: var(--ui-radius-sm);
}
.ui-skeleton--text { height: 0.875rem; margin-bottom: var(--ui-space-2); }
.ui-skeleton--title { height: 1.25rem; width: 40%; margin-bottom: var(--ui-space-3); }
.ui-skeleton--card { height: 8rem; border-radius: var(--ui-radius-lg); }

.ui-progress { height: 6px; border-radius: var(--ui-radius-full); background: var(--ui-border-subtle); overflow: hidden; }
.ui-progress__bar { height: 100%; background: var(--ui-primary); border-radius: inherit; transition: width var(--ui-duration-slow) var(--ui-ease); }

/* ── 13. NAVIGATION ─────────────────────────────────────────────────────── */

.ui-tabs, .admin-lang-switch {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-1);
    padding: var(--ui-space-1);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-alt);
    border: 1px solid var(--ui-border);
}
.ui-tab, .admin-lang-pill, .public-lang-pill, .login-lang-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.5rem 0.875rem;
    font-size: var(--ui-text-caption);
    font-weight: 600;
    color: var(--ui-text-muted);
    border-radius: var(--ui-radius-sm);
    text-decoration: none;
    transition: background var(--ui-duration), color var(--ui-duration);
    white-space: nowrap;
}
.ui-tab:hover { color: var(--ui-text); }
.ui-tab--active, .admin-lang-pill--active, .public-lang-pill--active, .login-lang-pill--active {
    color: var(--ui-text);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-sm);
}
.ui-breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); font-size: var(--ui-text-small); color: var(--ui-text-muted); }
.ui-breadcrumbs a { color: var(--ui-text-muted); text-decoration: none; }
.ui-breadcrumbs a:hover { color: var(--ui-primary); }

/* ── 14. MODALS ──────────────────────────────────────────────────────────── */

.ui-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--ui-z-modal);
    background: rgba(12, 10, 9, 0.5);
    backdrop-filter: blur(4px);
    animation: uiFadeIn var(--ui-duration) var(--ui-ease);
}
.ui-modal {
    position: fixed;
    z-index: calc(var(--ui-z-modal) + 1);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 28rem);
    max-height: min(88vh, 640px);
    overflow: auto;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-lg);
    animation: uiScaleIn var(--ui-duration-slow) var(--ui-ease);
}
.ui-modal--md { width: min(92vw, 36rem); }
.ui-modal--lg { width: min(92vw, 48rem); }
.ui-modal--fullscreen { width: 100vw; height: 100vh; max-height: none; border-radius: 0; }
.ui-modal__header { padding: var(--ui-space-5); border-bottom: 1px solid var(--ui-border-subtle); }
.ui-modal__body { padding: var(--ui-space-5); }
.ui-modal__footer { display: flex; justify-content: flex-end; gap: var(--ui-space-2); padding: var(--ui-space-4) var(--ui-space-5); border-top: 1px solid var(--ui-border-subtle); }

/* ── 15. LEGAL ───────────────────────────────────────────────────────────── */

.legal-prose { font-size: var(--ui-text-body); line-height: 1.75; color: var(--ui-text); }
.legal-prose h2 { margin-top: var(--ui-space-6); margin-bottom: var(--ui-space-3); font-size: var(--ui-text-h4); font-weight: 700; }
.legal-prose h3 { margin-top: var(--ui-space-5); margin-bottom: var(--ui-space-2); font-size: 1.0625rem; font-weight: 600; }
.legal-prose p, .legal-prose li { margin-bottom: var(--ui-space-3); color: var(--ui-text-muted); }
.legal-prose ul, .legal-prose ol { margin: var(--ui-space-3) 0 var(--ui-space-4) 1.25rem; }
.legal-prose a { color: var(--ui-primary); text-decoration: underline; text-underline-offset: 2px; }

/* ── 16. ANIMATIONS ──────────────────────────────────────────────────────── */

.ui-animate-in, .admin-animate-in, .login-animate-fade, .login-animate-slide {
    animation: uiFadeUp 0.55s var(--ui-ease) both;
    animation-delay: var(--ui-delay, var(--admin-delay, var(--login-delay, 0ms)));
}
.login-animate-slide { animation-name: uiFadeUp; }

@keyframes uiFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes uiFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes uiScaleIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes uiSpin { to { transform: rotate(360deg); } }
@keyframes uiShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── 17. LEGACY ALIASES (migrate views gradually) ─────────────────────────── */

.text-gold { color: var(--ui-primary) !important; }
.bg-gold { background-color: var(--ui-primary) !important; }

.login-label {
    display: block;
    margin-bottom: var(--ui-space-2);
    font-size: var(--ui-text-small);
    font-weight: 600;
    color: var(--ui-text);
}

.login-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.8125rem 1.25rem;
    font-weight: 600;
    border: none;
    border-radius: var(--ui-radius-md);
    color: var(--ui-text);
    cursor: pointer;
    background: linear-gradient(135deg, var(--ui-primary), color-mix(in srgb, var(--ui-secondary) 85%, var(--ui-primary)));
    box-shadow: var(--ui-shadow-sm), 0 4px 16px color-mix(in srgb, var(--ui-primary) 28%, transparent);
    transition: transform var(--ui-duration), box-shadow var(--ui-duration);
}

.login-btn-primary:hover { transform: translateY(-1px); }

/* ── 18. Design system documentation (/admin/design-system) ─────────────── */

.ui-ds-layout {
    display: grid;
    gap: var(--ui-space-6);
}

@media (min-width: 1024px) {
    .ui-ds-layout {
        grid-template-columns: 220px minmax(0, 1fr);
        align-items: start;
    }
}

.ui-ds-nav {
    position: sticky;
    top: var(--ui-space-5);
    padding: var(--ui-space-4);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-elevated);
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow-sm);
}

.ui-ds-nav__title {
    font-size: var(--ui-text-caption);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ui-text-subtle);
    margin-bottom: var(--ui-space-3);
}

.ui-ds-nav a {
    display: block;
    padding: 0.4rem 0.5rem;
    font-size: var(--ui-text-small);
    font-weight: 500;
    color: var(--ui-text-muted);
    text-decoration: none;
    border-radius: var(--ui-radius-sm);
    transition: color var(--ui-duration), background var(--ui-duration);
}

.ui-ds-nav a:hover {
    color: var(--ui-text);
    background: var(--ui-primary-subtle);
}

.ui-ds-section {
    margin-bottom: var(--ui-space-6);
}

.ui-ds-section__head {
    margin-bottom: var(--ui-space-4);
}

.ui-ds-guideline {
    margin-top: var(--ui-space-2);
    font-size: var(--ui-text-small);
    color: var(--ui-text-muted);
    line-height: 1.5;
}

.ui-ds-preview {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-3);
    align-items: center;
    padding: var(--ui-space-5);
    margin-bottom: var(--ui-space-4);
    border: 1px dashed var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-alt);
}

.ui-ds-preview--stack {
    flex-direction: column;
    align-items: stretch;
}

.ui-ds-preview--grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    width: 100%;
}

.ui-ds-preview--narrow {
    width: 100%;
    max-width: 28rem;
}

.ui-ds-preview--medium {
    width: 100%;
    max-width: 20rem;
}

.ui-ds-preview--full {
    width: 100%;
    align-items: stretch;
}

.ui-ds-swatch--primary { background: var(--ui-primary); }
.ui-ds-swatch--success { background: var(--ui-success); }
.ui-ds-swatch--warning { background: var(--ui-warning); }
.ui-ds-swatch--danger { background: var(--ui-danger); }
.ui-ds-swatch--surface { background: var(--ui-surface); }
.ui-ds-swatch--background { background: var(--ui-background); }

.ui-progress__bar--demo {
    width: 65%;
}

.ui-ds-code {
    margin: 0;
    padding: var(--ui-space-4);
    font-size: var(--ui-text-caption);
    line-height: 1.6;
    overflow-x: auto;
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-alt);
    border: 1px solid var(--ui-border);
    color: var(--ui-text-muted);
}

.ui-ds-code code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre;
}

.ui-ds-token-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--ui-space-3);
}

.ui-ds-swatch {
    padding: var(--ui-space-3);
    border-radius: var(--ui-radius-md);
    border: 1px solid var(--ui-border);
    font-size: var(--ui-text-caption);
}

.ui-ds-swatch__chip {
    height: 2.5rem;
    border-radius: var(--ui-radius-sm);
    margin-bottom: var(--ui-space-2);
    border: 1px solid var(--ui-border-subtle);
}

.ui-skeleton--text-short {
    width: 72%;
}

/* ── SYSTEM / CLOUD (RC2) ───────────────────────────────────────────────── */

.ui-kv-list { display: flex; flex-direction: column; gap: 0; }
.ui-kv-list__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--ui-space-2) var(--ui-space-4);
    padding: var(--ui-space-3) 0;
    border-bottom: 1px solid var(--ui-border-subtle);
}
.ui-kv-list__row:last-child { border-bottom: 0; }
.ui-kv-list__label {
    font-size: var(--ui-text-small);
    color: var(--ui-text-muted);
    font-weight: 500;
}
.ui-kv-list__value {
    font-size: var(--ui-text-small);
    color: var(--ui-text);
    text-align: right;
    margin: 0;
}

.ui-system-status {
    display: flex;
    align-items: flex-start;
    gap: var(--ui-space-3);
    padding: var(--ui-space-4) var(--ui-space-5);
    border-radius: var(--ui-radius-lg);
    border: 1px solid var(--ui-border);
    background: var(--ui-surface-elevated);
}
.ui-system-status__dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    margin-top: 0.35rem;
    flex-shrink: 0;
}
.ui-system-status--green .ui-system-status__dot { background: var(--ui-success, #16a34a); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-success, #16a34a) 20%, transparent); }
.ui-system-status--yellow .ui-system-status__dot { background: var(--ui-warning, #d97706); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-warning, #d97706) 20%, transparent); }
.ui-system-status--red .ui-system-status__dot { background: var(--ui-danger, #dc2626); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-danger, #dc2626) 20%, transparent); }
.ui-system-status__title { font-weight: 600; font-size: var(--ui-text-body); color: var(--ui-text); }
.ui-system-status__message { margin-top: var(--ui-space-1); font-size: var(--ui-text-small); color: var(--ui-text-muted); }

.ui-update-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--ui-space-4);
    padding: var(--ui-space-4) var(--ui-space-5);
    margin-bottom: var(--ui-space-6);
    border-radius: var(--ui-radius-lg);
    border: 1px solid color-mix(in srgb, var(--ui-primary) 35%, var(--ui-border));
    background: linear-gradient(135deg, color-mix(in srgb, var(--ui-primary) 8%, var(--ui-surface-elevated)), var(--ui-surface-elevated));
    box-shadow: var(--ui-shadow-sm);
}
.ui-update-banner__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--ui-radius-md);
    background: color-mix(in srgb, var(--ui-primary) 15%, transparent);
    color: var(--ui-primary);
    flex-shrink: 0;
}
.ui-update-banner__title { font-weight: 600; font-size: var(--ui-text-body); }
.ui-update-banner__summary { margin-top: var(--ui-space-1); font-size: var(--ui-text-small); color: var(--ui-text-muted); }
.ui-update-banner__actions { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); margin-top: var(--ui-space-3); }

.ui-progress { display: flex; flex-direction: column; gap: var(--ui-space-4); }
.ui-progress__bar {
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--ui-surface-alt);
    overflow: hidden;
}
.ui-progress__fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--ui-primary), color-mix(in srgb, var(--ui-primary) 70%, #fff));
    transition: width var(--ui-duration-slow) var(--ui-ease);
}
.ui-progress__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ui-space-2); }
.ui-progress__step { display: flex; align-items: center; gap: var(--ui-space-3); font-size: var(--ui-text-small); color: var(--ui-text-muted); }
.ui-progress__step--done { color: var(--ui-text); }
.ui-progress__step--active { color: var(--ui-primary); font-weight: 600; }
.ui-progress__step--error { color: var(--ui-danger, #dc2626); }
.ui-progress__marker {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    background: var(--ui-border);
    flex-shrink: 0;
}
.ui-progress__step--done .ui-progress__marker { background: var(--ui-success, #16a34a); }
.ui-progress__step--active .ui-progress__marker { background: var(--ui-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-primary) 20%, transparent); }
.ui-progress__step--error .ui-progress__marker { background: var(--ui-danger, #dc2626); }

.ui-release-notes { max-height: 20rem; overflow-y: auto; color: var(--ui-text); }

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