@charset "UTF-8";
/* ==========================================================================
   Core: design tokens, base and shared components. Loaded by every page, first.

   Stylesheet structure (every page loads exactly two of our files):
     css/core.css    all pages            tokens, base, shared components (this file)
     css/portal.css  admin, gaming, lms, personalcrm, businesscrm, families
     css/mobile.css  mhub, mstudents, mteachers, mattendance, mcontacts, agentqr, agentface
     css/public.css  index, links, 404, rsvp, scan
     css/game.css    live, liveplayer, spplayer
   Load order: vendor css → core.css → surface file. Page-specific rules in the shared surface
   files are scoped with :where([data-portal="…"]) (adds no specificity).
   Breakpoints: phone < 640px · tablet 640–1023px · desktop ≥ 1024px.

   Theme "Tonal": every surface is tinted from --theme-primary (set per ws by the JS), so each
   workspace gets its own palette.
   ========================================================================== */
@layer app, utilities, overrides;

@layer app {

    /* ---------- 1. Tokens ---------- */
    :root {
        color-scheme: light;
        --z-dialog: 99999;
        --z-toast: 100000;
        --m-font: 'Rubik', 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
        --theme-secondary: #7c3aed;
        --theme-success: #16a34a;
        --theme-danger: #dc2626;
        --theme-warning: #f59e0b;
        --theme-info: #0891b2;
        --theme-grey: #6b7280;
        --bg-body: color-mix(in srgb, var(--theme-primary) 6%, #fbfbfe);
        --bg-card: #ffffff;
        --bg-panel: color-mix(in srgb, var(--theme-primary) 6%, #ffffff);
        --bg-input: #ffffff;
        --text-main: #1a1b20;
        --text-muted: #5d5f6b;
        --border-color: color-mix(in srgb, var(--theme-primary) 16%, #e6e6ec);
        --border-light: color-mix(in srgb, var(--theme-primary) 9%, #f0f0f4);
        --bg-light-hover: color-mix(in srgb, var(--theme-primary) 8%, #ffffff);
        --m-tonal: color-mix(in srgb, var(--theme-primary) 13%, transparent);
        --m-tonal-strong: color-mix(in srgb, var(--theme-primary) 22%, transparent);
        --m-on-tonal: color-mix(in srgb, var(--theme-primary) 82%, #000000);
        --m-ink-mix: #000000;
        --m-ink-pct: 22%;
        --surface-glass: var(--bg-card);
        --surface-glass-border: var(--border-light);
        --surface-card-hover: var(--bg-card);
        --glass-blur: 0px;
        --shadow-sm: 0 1px 2px rgb(16 24 40 / .05);
        --shadow-md: 0 6px 18px -6px rgb(16 24 40 / .12);
        --shadow-lg: 0 28px 56px -20px color-mix(in srgb, var(--theme-primary) 40%, rgb(0 0 0 / .3));
        --shadow-glass: var(--shadow-sm);
        --shadow-glow-primary: none;
        --radius-sm: 14px;
        --radius-md: 20px;
        --radius-lg: 28px;
        --m-h: 44px;
        --i-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E");
        --i-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
        --i-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20'/%3E%3C/svg%3E");
        --i-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E");
        --i-building: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M9 22v-4h6v4M8 6h.01M12 6h.01M16 6h.01M8 10h.01M12 10h.01M16 10h.01M8 14h.01M12 14h.01M16 14h.01'/%3E%3C/svg%3E");
        --i-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='5.5'/%3E%3Cpath d='m21 2-9.6 9.6M15.5 7.5l3 3L22 7l-3-3'/%3E%3C/svg%3E");
        --i-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
        --i-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E");
        --i-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='12' cy='19' r='2'/%3E%3C/svg%3E");
        --i-filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E");
    }

    [data-theme="dark"] {
        color-scheme: dark;

        --bg-body: color-mix(in srgb, var(--theme-primary) 9%, #0f1015);
        --bg-card: color-mix(in srgb, var(--theme-primary) 7%, #17181e);
        --bg-panel: color-mix(in srgb, var(--theme-primary) 12%, #17181e);
        --bg-input: color-mix(in srgb, var(--theme-primary) 9%, #131419);
        --text-main: #e7e6ee;
        --text-muted: #a6a8b6;
        --border-color: color-mix(in srgb, var(--theme-primary) 26%, #2a2b33);
        --border-light: color-mix(in srgb, var(--theme-primary) 15%, #222329);
        --bg-light-hover: color-mix(in srgb, var(--theme-primary) 16%, #17181e);

        --m-tonal: color-mix(in srgb, var(--theme-primary) 26%, transparent);
        --m-tonal-strong: color-mix(in srgb, var(--theme-primary) 38%, transparent);
        --m-on-tonal: color-mix(in srgb, var(--theme-primary) 38%, #ffffff);
        --m-ink-mix: #ffffff;
        --m-ink-pct: 45%;

        --shadow-sm: none;
        --shadow-md: 0 8px 24px -8px rgb(0 0 0 / .6);
        --shadow-lg: 0 28px 56px -20px rgb(0 0 0 / .75);
    }

    /* Icon set (lucide-style strokes), drawn with mask so they take currentColor */

    /* ---------- 2. Base ---------- */
    body {

        font-family: var(--m-font);
        background-color: var(--bg-body);
        background-image: none;
        color: var(--text-main);
    }

    [data-theme="dark"] body {

        background-image: none;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {

        font-family: var(--m-font);
        letter-spacing: -0.015em;
    }

    button,
    input,
    select,
    textarea {

        font-family: inherit;
    }

    ::-webkit-scrollbar-thumb {

        background: var(--m-tonal-strong);
    }

    ::-webkit-scrollbar-thumb:hover {

        background: color-mix(in srgb, var(--theme-primary) 45%, transparent);
    }

    :focus-visible {

        outline: 2px solid var(--theme-primary);
        box-shadow: 0 0 0 4px var(--m-tonal);
    }

    /* Dark mode: primary-coloured text (headings etc.) is lifted so dark brand colours stay readable */
    [data-theme="dark"] :is([style*="color: var(--theme-primary)"], .u-bdc-theme-primary, .u-accent-color-theme-primary, .u-border-top-color-theme-primary, .u-c-theme-primary):not([style*="background-color: var(--theme-primary)"]),
    [data-theme="dark"] :is([style*="color:var(--theme-primary)"], .u-bdc-theme-primary, .u-accent-color-theme-primary, .u-border-top-color-theme-primary, .u-c-theme-primary):not([style*="background-color:var(--theme-primary)"]) {

        color: var(--m-on-tonal) !important;
    }

    /* ---------- 3. Preloader ---------- */
    .app-preloader {

        background: var(--bg-body) !important;
    }

    .preloader-spinner {

        border-color: var(--m-tonal) !important;
        border-top-color: var(--theme-primary) !important;
    }

    /* ---------- 4. Login ---------- */
    #login-screen.active {

        background-color: var(--bg-body);
        background-image:
            radial-gradient(60% 50% at 0% 0%, color-mix(in srgb, var(--theme-primary) 16%, transparent), transparent 70%),
            radial-gradient(50% 45% at 100% 100%, color-mix(in srgb, var(--theme-secondary) 12%, transparent), transparent 70%);
    }

    #login-error {

        color: var(--theme-danger) !important;
        font-weight: 500;
    }

    /* ---------- 5. Icon-only header buttons ----------
       Every portal marks these with data-icon="🌙|🌐|🚪|🏢|🔑". The JS writes emoji/label text
       into them; that text is hidden and an SVG icon is drawn, absolutely centred.
       Selectors: `:root .x[data-icon]` (0,3,0) beats styles.css's mobile `.header button.top-action-btn`,
       and the #id.class list beats its `#theme-toggle-btn.top-action-btn { font-size … !important }`. */
    :root .top-action-btn[data-icon],
    :root #login-theme-toggle,
    #theme-toggle-btn.top-action-btn,
    #btn-toggle-theme.top-action-btn,
    #admin-lang-toggle.top-action-btn,
    #btn-lang-toggle.top-action-btn,
    #logout-btn.top-action-btn,
    #btn-logout.top-action-btn,
    #btn-change-ws.top-action-btn,
    #btn-change-password.top-action-btn {

        font-size: 0 !important;
        line-height: 0 !important;
        color: var(--m-on-tonal) !important;
        position: relative !important;
        gap: 0 !important;
        overflow: hidden !important;
    }

    :root #login-theme-toggle {

        width: 42px;
        padding: 0 !important;
    }

    :root .top-action-btn[data-icon]::after {

        content: none !important;
        display: none !important;
    }

    :root .top-action-btn[data-icon]::before,
    :root #login-theme-toggle::before {

        content: '';
        position: absolute;
        inset: 0;
        margin: auto;
        width: 20px;
        height: 20px;
        background: currentColor;
        -webkit-mask: var(--m-icon) center / contain no-repeat;
        mask: var(--m-icon) center / contain no-repeat;
    }

    /* LMS swaps data-icon itself */
    [data-theme="dark"] .top-action-btn[data-icon="🌙"],
    [data-theme="dark"] #login-theme-toggle {

        --m-icon: var(--i-sun);
    }

    :root .top-action-btn[data-icon="🚪"],
    :root .top-action-btn.btn-danger-icon,
    #logout-btn.top-action-btn,
    #btn-logout.top-action-btn {

        color: var(--theme-danger) !important;
    }

    .header {

        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 0;
        box-shadow: none;
        border-radius: 0;
        padding: 6px 0 18px;
        margin-bottom: 8px;
    }

    .header h1,
    #ui-admin-title {

        font-size: 1.35rem;
        font-weight: 700;
        line-height: 1.15;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* JS colours ws titles with the raw brand hex; in dark mode lift them to the readable tonal ink */
    [data-theme="dark"] #ui-admin-title,
    [data-theme="dark"] #ui-ws-name,
    [data-theme="dark"] #ws-name {

        color: var(--m-on-tonal) !important;
        /* mcontacts.js sets an inline `color … !important`; text-fill-color still wins when painting */
        -webkit-text-fill-color: var(--m-on-tonal);
    }

    /* ---------- 8. Buttons ---------- */
    .btn-primary {
        background: var(--theme-primary);
        border-radius: 999px;
        box-shadow: none;
        font-weight: 600;
        font-size: .97rem;
        padding: 0 22px;
        line-height: 1.2;
    }

    .btn-primary:hover {

        transform: none;
        opacity: 1;
        box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--theme-primary) 70%, transparent);
        filter: brightness(1.06);
    }

    .btn-primary:active,
    .btn-action-sm:active {

        transform: scale(.97);
    }

    /* Secondary action (Cancel / Close / Back): the tonal pill used by core/ui-dialogs.js.
       Same size as .btn-primary so a footer row lines up. */
    .btn-secondary {
        background: var(--bg-panel);
        color: var(--m-on-tonal);
        border: 0;
        border-radius: 999px;
        box-shadow: none;
        cursor: pointer;
        font-family: inherit;
        font-weight: 600;
        font-size: .97rem;
        line-height: 1.2;
        padding: 0 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: background 0.2s var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1));
    }

    .btn-secondary:hover {
        background: var(--m-tonal);
        transform: none;
        box-shadow: none;
    }

    .btn-secondary:active {
        transform: scale(.97);
    }

    .btn-secondary:disabled {
        opacity: .6;
        cursor: not-allowed;
    }

    /* Popup header close: one round icon button (✕) on every portal. Its label is in title / aria-label. */
    .btn-close-modal {
        width: 40px;
        height: 40px;
        min-height: 40px;
        padding: 0;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 999px;
        background: var(--bg-panel);
        color: var(--text-muted);
        box-shadow: none;
        cursor: pointer;
        font-family: inherit;
        font-size: 1.1rem;
        font-weight: 600;
        line-height: 1;
        transition: background 0.2s var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1)), color 0.2s;
    }

    .btn-close-modal:hover {
        background: var(--m-tonal);
        color: var(--m-on-tonal);
        transform: none;
        box-shadow: none;
    }

    .btn-close-modal:active {
        transform: scale(.94);
    }

    .btn-close-modal:focus-visible {
        outline: 2px solid var(--theme-primary);
        outline-offset: 2px;
    }

    @media (pointer: coarse) {
        .btn-close-modal {
            width: 44px;
            height: 44px;
            min-height: 44px;
        }
    }

    /* Tonal compact pill: tinted inline action button. Reads in light and dark without utilities. */
    .btn-tonal {
        background: var(--m-tonal);
        color: var(--m-on-tonal);
        border: 0;
        border-radius: 999px;
        box-shadow: none;
        cursor: pointer;
        font-family: inherit;
        font-weight: 600;
        font-size: .85rem;
        line-height: 1.2;
        padding: 5px 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: background 0.2s var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1)), color 0.2s;
    }

    .btn-tonal:hover {
        background: var(--theme-primary);
        color: var(--basic-white, #ffffff);
        transform: none;
        box-shadow: none;
    }

    .btn-tonal:active {
        transform: scale(.97);
    }

    .btn-tonal:disabled {
        opacity: .6;
        cursor: not-allowed;
    }

    @media (pointer: coarse) {
        .btn-tonal {
            min-height: 44px;
            padding: 8px 18px;
        }
    }

    /* Tonal mapping: secondary actions rendered by the JS with inline background colours
       become soft tonal pills; primary-coloured and main actions stay filled. */
    .btn-action-sm:is([style*="--theme-secondary"], .u-bg-linear-gradient-135deg-theme-primary-0pct-theme-, .u-bg-linear-gradient-135deg-theme-primary-theme-secon, .u-bg-theme-secondary, .u-bd-1px-solid-theme-secondary, .u-bd-2px-dashed-theme-secondary, .u-bdc-theme-secondary, .u-bdl-3px-solid-theme-secondary, .u-accent-color-theme-secondary, .u-c-theme-secondary),
    .btn-action-sm:is([style*="--theme-info"], .u-bg-linear-gradient-135deg-theme-info-0pct-theme-pri, .u-bg-linear-gradient-135deg-theme-primary-0pct-theme--2, .u-bg-linear-gradient-135deg-theme-success-0pct-theme-, .u-bg-theme-info, .u-bg-var-theme-info-theme-info, .u-bd-1px-solid-theme-info, .u-bdc-theme-info, .u-c-theme-info),
    .btn-action-sm:is([style*="--theme-success"], .u-bg-linear-gradient-135deg-theme-success-0pct-theme-, .u-bg-theme-success, .u-bg-var-theme-success-theme-success, .u-bd-1px-dashed-theme-success, .u-bd-1px-solid-theme-success, .u-bdc-theme-success, .u-border-inline-start-4px-solid-theme-success, .u-c-theme-success),
    .btn-action-sm:is([style*="--theme-warning"], .u-bg-theme-warning, .u-bd-1px-dashed-theme-warning, .u-bd-1px-solid-theme-warning, .u-c-theme-warning),
    .btn-action-sm:is([style*="--theme-danger"], .u-bg-color-mix-in-srgb-theme-danger-16pct-transparent, .u-bg-theme-danger, .u-bg-var-theme-danger-theme-danger, .u-bd-1_5px-solid-theme-danger, .u-bd-1px-dashed-theme-danger, .u-bd-1px-solid-theme-danger, .u-bd-2px-solid-theme-danger, .u-bd-4px-dashed-theme-danger, .u-c-theme-danger),
    .btn-action-sm[style*="--theme-grey"],
    .btn-primary:is([style*="background: var(--theme-danger)"], .u-bg-theme-danger),
    .btn-primary:is([style*="background:var(--theme-danger)"], .u-bg-theme-danger) {

        background: color-mix(in srgb, var(--m-c) 13%, transparent) !important;
        color: color-mix(in srgb, var(--m-c), var(--m-ink-mix) var(--m-ink-pct)) !important;
    }

    .btn-action-sm:is([style*="--theme-secondary"], .u-bg-linear-gradient-135deg-theme-primary-0pct-theme-, .u-bg-linear-gradient-135deg-theme-primary-theme-secon, .u-bg-theme-secondary, .u-bd-1px-solid-theme-secondary, .u-bd-2px-dashed-theme-secondary, .u-bdc-theme-secondary, .u-bdl-3px-solid-theme-secondary, .u-accent-color-theme-secondary, .u-c-theme-secondary):hover,
    .btn-action-sm:is([style*="--theme-info"], .u-bg-linear-gradient-135deg-theme-info-0pct-theme-pri, .u-bg-linear-gradient-135deg-theme-primary-0pct-theme--2, .u-bg-linear-gradient-135deg-theme-success-0pct-theme-, .u-bg-theme-info, .u-bg-var-theme-info-theme-info, .u-bd-1px-solid-theme-info, .u-bdc-theme-info, .u-c-theme-info):hover,
    .btn-action-sm:is([style*="--theme-success"], .u-bg-linear-gradient-135deg-theme-success-0pct-theme-, .u-bg-theme-success, .u-bg-var-theme-success-theme-success, .u-bd-1px-dashed-theme-success, .u-bd-1px-solid-theme-success, .u-bdc-theme-success, .u-border-inline-start-4px-solid-theme-success, .u-c-theme-success):hover,
    .btn-action-sm:is([style*="--theme-warning"], .u-bg-theme-warning, .u-bd-1px-dashed-theme-warning, .u-bd-1px-solid-theme-warning, .u-c-theme-warning):hover,
    .btn-action-sm:is([style*="--theme-danger"], .u-bg-color-mix-in-srgb-theme-danger-16pct-transparent, .u-bg-theme-danger, .u-bg-var-theme-danger-theme-danger, .u-bd-1_5px-solid-theme-danger, .u-bd-1px-dashed-theme-danger, .u-bd-1px-solid-theme-danger, .u-bd-2px-solid-theme-danger, .u-bd-4px-dashed-theme-danger, .u-c-theme-danger):hover,
    .btn-action-sm[style*="--theme-grey"]:hover,
    .btn-primary:is([style*="--theme-danger"], .u-bg-color-mix-in-srgb-theme-danger-16pct-transparent, .u-bg-theme-danger, .u-bg-var-theme-danger-theme-danger, .u-bd-1_5px-solid-theme-danger, .u-bd-1px-dashed-theme-danger, .u-bd-1px-solid-theme-danger, .u-bd-2px-solid-theme-danger, .u-bd-4px-dashed-theme-danger, .u-c-theme-danger):hover {

        background: color-mix(in srgb, var(--m-c) 22%, transparent) !important;
        filter: none;
        box-shadow: none;
    }

    :is([style*="--theme-secondary"], .u-bg-linear-gradient-135deg-theme-primary-0pct-theme-, .u-bg-linear-gradient-135deg-theme-primary-theme-secon, .u-bg-theme-secondary, .u-bd-1px-solid-theme-secondary, .u-bd-2px-dashed-theme-secondary, .u-bdc-theme-secondary, .u-bdl-3px-solid-theme-secondary, .u-accent-color-theme-secondary, .u-c-theme-secondary) {

        --m-c: var(--theme-secondary);
    }

    :is([style*="--theme-info"], .u-bg-linear-gradient-135deg-theme-info-0pct-theme-pri, .u-bg-linear-gradient-135deg-theme-primary-0pct-theme--2, .u-bg-linear-gradient-135deg-theme-success-0pct-theme-, .u-bg-theme-info, .u-bg-var-theme-info-theme-info, .u-bd-1px-solid-theme-info, .u-bdc-theme-info, .u-c-theme-info) {

        --m-c: var(--theme-info);
    }

    :is([style*="--theme-success"], .u-bg-linear-gradient-135deg-theme-success-0pct-theme-, .u-bg-theme-success, .u-bg-var-theme-success-theme-success, .u-bd-1px-dashed-theme-success, .u-bd-1px-solid-theme-success, .u-bdc-theme-success, .u-border-inline-start-4px-solid-theme-success, .u-c-theme-success) {

        --m-c: var(--theme-success);
    }

    :is([style*="--theme-warning"], .u-bg-theme-warning, .u-bd-1px-dashed-theme-warning, .u-bd-1px-solid-theme-warning, .u-c-theme-warning) {

        --m-c: #d97706;
    }

    :is([style*="--theme-danger"], .u-bg-color-mix-in-srgb-theme-danger-16pct-transparent, .u-bg-theme-danger, .u-bg-var-theme-danger-theme-danger, .u-bd-1_5px-solid-theme-danger, .u-bd-1px-dashed-theme-danger, .u-bd-1px-solid-theme-danger, .u-bd-2px-solid-theme-danger, .u-bd-4px-dashed-theme-danger, .u-c-theme-danger) {

        --m-c: var(--theme-danger);
    }

    [style*="--theme-grey"] {

        --m-c: var(--theme-grey);
    }

    .btn-google {
        border-radius: 999px;
        border: 1.5px solid var(--border-color);
        box-shadow: none;
        font-weight: 600;
        padding: 0 18px;
    }

    .btn-google:hover {

        transform: none;
        box-shadow: none;
        background: var(--bg-panel);
        border-color: var(--border-color);
    }

    /* Neutral (grey) buttons from inline styles become neutral tonal pills */
    button:is([style*="background: var(--text-muted)"], .u-bg-text-muted),
    button:is([style*="background:var(--text-muted)"], .u-bg-text-muted),
    button:is([style*="background: var(--basic-grey"], .u-bg-basic-grey-6, .u-bg-basic-grey-7, .u-bg-basic-grey-8, .u-bg-basic-grey-9, .u-bg-basic-grey-b),
    button:is([style*="background:var(--basic-grey"], .u-bg-basic-grey-6, .u-bg-basic-grey-7, .u-bg-basic-grey-8, .u-bg-basic-grey-9, .u-bg-basic-grey-b),
    button[style*="background: var(--theme-grey)"],
    button[style*="background:var(--theme-grey)"] {

        background: color-mix(in srgb, var(--text-main) 8%, transparent) !important;
        color: var(--text-main) !important;
        box-shadow: none !important;
        border-radius: 999px;
    }

    /* ---------- 9. Forms ---------- */
    .form-control {

        height: var(--m-h);
        border: 1.5px solid var(--border-color);
        background: var(--bg-input);
        border-radius: var(--radius-sm);
        box-shadow: none;
        font-size: .96rem;
    }

    select.form-control {

        height: var(--m-h) !important;
    }

    /* Fixed height + the pages' own `padding: 15px 18px` left too little room and clipped the text
       (mstudents, mattendance…). Inputs/selects centre their text natively, so no vertical padding. */
    input.form-control,
    select.form-control {

        padding-top: 0 !important;
        padding-bottom: 0 !important;
        line-height: normal !important;
    }

    textarea.form-control {

        border-radius: var(--radius-sm);
    }

    .form-control:hover {

        border-color: color-mix(in srgb, var(--theme-primary) 35%, var(--border-color));
    }

    .form-control:focus {

        border-color: var(--theme-primary);
        background: var(--bg-input);
        box-shadow: 0 0 0 4px var(--m-tonal);
    }

    .form-control::placeholder {

        color: color-mix(in srgb, var(--text-muted) 75%, transparent);
    }

    input[type="checkbox"],
    input[type="radio"] {

        accent-color: var(--theme-primary);
    }

    /* Phone numbers & tel inputs: strict LTR bidi isolation across all portals */
    input[type="tel"],
    .u-phone {
        direction: ltr;
        unicode-bidi: isolate;
    }

    [dir="rtl"] input[type="tel"] {
        text-align: right;
    }

    /* ---------- 11. Modals ---------- */
    .modal {

        background-color: color-mix(in srgb, #0b0c10 45%, transparent);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    .close {

        width: 40px;
        height: 40px;
        top: 18px;
        font-size: 0;
        border-radius: 999px;
        background: var(--bg-panel);
        color: var(--text-muted);
        display: grid;
        place-items: center;
    }

    .close::before {

        content: '';
        width: 18px;
        height: 18px;
        background: currentColor;
        -webkit-mask: var(--i-x) center / contain no-repeat;
        mask: var(--i-x) center / contain no-repeat;
    }

    .close:hover {

        color: var(--theme-danger);
        background: color-mix(in srgb, var(--theme-danger) 12%, transparent);
        transform: none;
    }

    /* ---------- 13. Inline-style harmoniser ----------
       The HTML and the JS templates carry inline radii of 8–12px. Inside the app shell
       they are lifted to the tonal shape scale so pages and JS-built content match. */
    .dashboard-container :is([style*="border-radius: 8px"], .u-r-8px),
    .dashboard-container :is([style*="border-radius:8px"], .u-r-8px),
    .dashboard-container :is([style*="border-radius: 10px"], .u-r-10px),
    .dashboard-container :is([style*="border-radius:10px"], .u-r-10px),
    .dashboard-container :is([style*="border-radius: 12px"], .u-r-12px),
    .dashboard-container :is([style*="border-radius:12px"], .u-r-12px),
    .modal :is([style*="border-radius: 8px"], .u-r-8px),
    .modal :is([style*="border-radius:8px"], .u-r-8px),
    .modal :is([style*="border-radius: 10px"], .u-r-10px),
    .modal :is([style*="border-radius:10px"], .u-r-10px),
    .modal :is([style*="border-radius: 12px"], .u-r-12px),
    .modal :is([style*="border-radius:12px"], .u-r-12px) {

        border-radius: var(--radius-md) !important;
    }

    /* Form controls keep the input radius even when placed in a styled box */
    .dashboard-container .form-control:is([style*="border-radius"], .u-r-0, .u-r-0px, .u-r-10px, .u-r-12px, .u-r-14px, .u-r-15px, .u-r-16px, .u-r-20px, .u-r-2px, .u-r-4px, .u-r-50pct, .u-r-50px, .u-r-5px, .u-r-6px, .u-r-8px),
    .modal .form-control:is([style*="border-radius"], .u-r-0, .u-r-0px, .u-r-10px, .u-r-12px, .u-r-14px, .u-r-15px, .u-r-16px, .u-r-20px, .u-r-2px, .u-r-4px, .u-r-50pct, .u-r-50px, .u-r-5px, .u-r-6px, .u-r-8px) {

        border-radius: var(--radius-sm) !important;
    }

    [data-theme="dark"] .class-topbar h1 {

        color: var(--m-on-tonal) !important;
        text-shadow: none !important;
    }

    /* ---------- 15. Button geometry ----------
       One height scale. A <button> centres its label inside min-height on its own, even when a
       script sets style.display = 'block'. */
    .btn-primary,
    .btn-secondary,
    .btn-google {

        min-height: var(--m-h);
        text-align: center;
        text-wrap: balance;
        vertical-align: middle;
    }

    .btn-action-sm,
    .btn-edit,
    .delete-q-btn,
    .btn-upload,
    .btn-copy-modern {

        min-height: 38px;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
    }

    .btn-action-sm,
    .btn-edit,
    .delete-q-btn {

        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    @media (pointer: coarse) {

        /* Touch screens: 44px targets */
        .btn-action-sm,
        .btn-edit,
        .delete-q-btn,
        .btn-upload {

            min-height: 44px;
        }

    }

    /* ---------- 16. Badges ----------
       <span class="badge" style="--badge-c: var(--theme-success)">…</span>; badge--neutral for grey tags. */
    .badge {

        --badge-c: var(--theme-grey);
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 10px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--badge-c) 15%, transparent);
        color: color-mix(in srgb, var(--badge-c), var(--m-ink-mix) var(--m-ink-pct));
        font-size: .78rem;
        font-weight: 600;
        line-height: 1.35;
        white-space: nowrap;
        vertical-align: middle;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .badge--neutral {

        background: var(--bg-panel);
        color: var(--text-muted);
    }

    .badge--info {

        --badge-c: var(--theme-info);
        background: color-mix(in srgb, var(--theme-info) 15%, transparent);
        color: var(--theme-info);
    }

    /* Badge-like spans still styled inline: never break inside */
    td>span:is([style*="border-radius"], .u-r-0, .u-r-0px, .u-r-10px, .u-r-12px, .u-r-14px, .u-r-15px, .u-r-16px, .u-r-20px, .u-r-2px, .u-r-4px, .u-r-50pct, .u-r-50px, .u-r-5px, .u-r-6px, .u-r-8px):is([style*="padding"], .u-p-0, .u-p-0-0-calc-76px-env-safe-area-inset-bottom-0px, .u-p-0-10px, .u-p-0-12px, .u-p-0-15px, .u-p-0-15px-15px-15px, .u-p-0-15px-15px-40px, .u-p-0-16px, .u-p-0-18px, .u-p-0-20px, .u-p-0-22px, .u-p-0-25px, .u-p-0-2px, .u-p-0-4px, .u-p-0-5px, .u-p-0-8px, .u-p-10px, .u-p-10px-0, .u-p-10px-12px, .u-p-10px-14px, .u-p-10px-15px, .u-p-10px-16px, .u-p-10px-18px-20px-18px, .u-p-10px-20px, .u-p-10px-24px, .u-p-10px-30px, .u-p-12px, .u-p-12px-0, .u-p-12px-10px, .u-p-12px-14px, .u-p-12px-15px, .u-p-12px-16px, .u-p-12px-18px, .u-p-12px-20px, .u-p-12px-24px, .u-p-12px-30px, .u-p-14px, .u-p-14px-16px, .u-p-14px-18px, .u-p-14px-20px, .u-p-15px, .u-p-15px-10px, .u-p-15px-20px, .u-p-15px-20px-10px, .u-p-15px-30px, .u-p-16px, .u-p-16px-20px, .u-p-18px, .u-p-18px-20px, .u-p-1px-7px, .u-p-20px, .u-p-20px-25px-10px, .u-p-20px-30px, .u-p-22px, .u-p-24px, .u-p-25px, .u-p-25px-15px, .u-p-28px, .u-p-2px, .u-p-2px-10px, .u-p-2px-4px, .u-p-2px-6px, .u-p-2px-7px, .u-p-2px-8px, .u-p-30px, .u-p-30px-10px, .u-p-32px, .u-p-35px, .u-p-3px, .u-p-3px-10px, .u-p-3px-6px, .u-p-3px-8px, .u-p-40px, .u-p-40px-20px, .u-p-45px, .u-p-4px, .u-p-4px-10px, .u-p-4px-12px, .u-p-4px-20px, .u-p-4px-6px, .u-p-4px-8px, .u-p-4px-8px-4px-16px, .u-p-4px-8px-4px-18px, .u-p-4px-8px-4px-20px, .u-p-4px-8px-4px-24px, .u-p-50px-20px, .u-p-50px-30px, .u-p-5px, .u-p-5px-0, .u-p-5px-10px, .u-p-5px-10px-5px-24px, .u-p-5px-12px, .u-p-5px-15px, .u-p-5px-25px, .u-p-5px-6px, .u-p-5px-8px, .u-p-60px-20px, .u-p-6px, .u-p-6px-10px, .u-p-6px-10px-6px-18px, .u-p-6px-10px-6px-20px, .u-p-6px-10px-6px-24px, .u-p-6px-12px, .u-p-6px-14px, .u-p-6px-15px, .u-p-6px-4px, .u-p-6px-8px, .u-p-7px-10px, .u-p-7px-12px, .u-p-7px-16px, .u-p-7px-18px, .u-p-8px, .u-p-8px-10px, .u-p-8px-12px, .u-p-8px-14px, .u-p-8px-15px, .u-p-8px-16px, .u-p-8px-18px, .u-p-8px-20px, .u-p-8px-24px, .u-pb-10px, .u-pb-12px, .u-pb-15px, .u-pb-4px, .u-pb-5px, .u-pb-6px, .u-pb-8px, .u-pb-calc-76px-env-safe-area-inset-bottom-0px, .u-pe-30px, .u-pe-40px, .u-ps-16px, .u-ps-18px, .u-ps-20px, .u-pr-10px, .u-pr-5px, .u-pt-10px, .u-pt-12px, .u-pt-14px, .u-pt-15px, .u-pt-16px, .u-pt-20px, .u-pt-2px, .u-pt-4px, .u-pt-5px) {

        display: inline-block;
        white-space: nowrap;
    }
}

/* ==========================================================================
   Utilities — one declaration per class, generated from the inline style="" attributes that
   used to live in the HTML and JS templates (display, CSS variables and runtime values stay inline).
   This layer sits above "app", so a utility wins over component rules exactly like the inline
   style it replaced did, and loses to their !important declarations exactly like it did.
   Naming: u-<property>-<value>, e.g. u-mb-15px, u-c-text-muted, u-cols-1fr-1fr.
   ========================================================================== */
@layer utilities {
    .u-animation-spin-1s-linear-infinite {
        animation: spin 1s linear infinite;
    }

    .u-bg-1e293b {
        background: #1e293b;
    }

    .u-bg-basic-amber {
        background: var(--basic-amber);
    }

    .u-bg-basic-blue {
        background: var(--basic-blue);
    }

    .u-bg-basic-darkgreen {
        background: var(--basic-darkgreen);
    }

    .u-bg-basic-darkorange {
        background: var(--basic-darkorange);
    }

    .u-bg-basic-darkred {
        background: var(--basic-darkred);
    }

    .u-bg-basic-green {
        background: var(--basic-green);
    }

    .u-bg-basic-grey-6 {
        background: var(--basic-grey-6);
    }

    .u-bg-basic-grey-7 {
        background: var(--basic-grey-7);
    }

    .u-bg-basic-grey-8 {
        background: var(--basic-grey-8);
    }

    .u-bg-basic-grey-9 {
        background: var(--basic-grey-9);
    }

    .u-bg-basic-grey-b {
        background: var(--basic-grey-b);
    }

    .u-bg-basic-white {
        background: var(--basic-white);
    }

    .u-bg-bg-base {
        background: var(--bg-base);
    }

    .u-bg-bg-body {
        background: var(--bg-body);
    }

    .u-bg-bg-card {
        background: var(--bg-card);
    }

    .u-bg-bg-dark-panel {
        background: var(--bg-dark-panel);
    }

    .u-bg-bg-info-light {
        background: var(--bg-info-light);
    }

    .u-bg-bg-input {
        background: var(--bg-input);
    }

    .u-bg-bg-panel {
        background: var(--bg-panel);
    }

    .u-bg-bg-panel-2 {
        background: var(--bg-panel);
    }

    .u-bg-black {
        background: black;
    }

    .u-bg-color-mix-in-srgb-theme-danger-16pct-transparent {
        background: color-mix(in srgb, var(--theme-danger) 16%, transparent);
    }

    .u-bg-linear-gradient-135deg-theme-info-0pct-theme-pri {
        background: linear-gradient(135deg, var(--theme-info) 0%, var(--theme-primary) 100%);
    }

    .u-bg-linear-gradient-135deg-theme-primary-0pct-theme- {
        background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 100%);
    }

    .u-bg-linear-gradient-135deg-theme-primary-0pct-theme--2 {
        background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-info) 100%);
    }

    .u-bg-linear-gradient-135deg-theme-primary-theme-secon {
        background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    }

    .u-bg-linear-gradient-135deg-theme-success-0pct-theme- {
        background: linear-gradient(135deg, var(--theme-success) 0%, var(--theme-info) 100%);
    }

    .u-bg-none {
        background: none;
    }

    .u-bg-rgba-0-0-0-0_015 {
        background: rgba(0, 0, 0, 0.015);
    }

    .u-bg-rgba-0-0-0-0_02 {
        background: rgba(0, 0, 0, 0.02);
    }

    .u-bg-rgba-0-0-0-0_05 {
        background: rgba(0, 0, 0, 0.05);
    }

    .u-bg-rgba-0-0-0-0_1 {
        background: rgba(0, 0, 0, 0.1);
    }

    .u-bg-rgba-0-0-0-0_2 {
        background: rgba(0, 0, 0, 0.2);
    }

    .u-bg-rgba-0-0-0-0_6 {
        background: rgba(0, 0, 0, 0.6);
    }

    .u-bg-rgba-0-0-0-0_65 {
        background: rgba(0, 0, 0, 0.65);
    }

    .u-bg-rgba-0-0-0-0_75 {
        background: rgba(0, 0, 0, 0.75);
    }

    .u-bg-rgba-0-0-0-0_8 {
        background: rgba(0, 0, 0, 0.8);
    }

    .u-bg-rgba-0-0-0-0_85 {
        background: rgba(0, 0, 0, 0.85);
    }

    .u-bg-rgba-111-66-193-0_05 {
        background: rgba(111, 66, 193, 0.05);
    }

    .u-bg-rgba-111-66-193-0_1 {
        background: rgba(111, 66, 193, 0.1);
    }

    .u-bg-rgba-111-66-193-0_2 {
        background: rgba(111, 66, 193, 0.2);
    }

    .u-bg-rgba-13-110-253-0_15 {
        background: rgba(13, 110, 253, 0.15);
    }

    .u-bg-rgba-13-71-161-0_05 {
        background: rgba(13, 71, 161, 0.05);
    }

    .u-bg-rgba-13-71-161-0_08 {
        background: rgba(13, 71, 161, 0.08);
    }

    .u-bg-rgba-13-71-161-0_1 {
        background: rgba(13, 71, 161, 0.1);
    }

    .u-bg-rgba-13-71-161-0_15 {
        background: rgba(13, 71, 161, 0.15);
    }

    .u-bg-rgba-220-53-69-0_08 {
        background: rgba(220, 53, 69, 0.08);
    }

    .u-bg-rgba-220-53-69-0_1 {
        background: rgba(220, 53, 69, 0.1);
    }

    .u-bg-rgba-220-53-69-0_15 {
        background: rgba(220, 53, 69, 0.15);
    }

    .u-bg-rgba-220-53-69-0_15-2 {
        background: rgba(220, 53, 69, 0.15);
    }

    .u-bg-rgba-220-53-69-0_2 {
        background: rgba(220, 53, 69, 0.2);
    }

    .u-bg-rgba-220-53-69-0_2-2 {
        background: rgba(220, 53, 69, 0.2);
    }

    .u-bg-rgba-23-162-184-0_1 {
        background: rgba(23, 162, 184, 0.1);
    }

    .u-bg-rgba-23-162-184-0_18 {
        background: rgba(23, 162, 184, 0.18);
    }

    .u-bg-rgba-23-162-184-0_2 {
        background: rgba(23, 162, 184, 0.2);
    }

    .u-bg-rgba-239-68-68-0_1 {
        background: rgba(239, 68, 68, 0.1);
    }

    .u-bg-rgba-255-193-7-0_1 {
        background: rgba(255, 193, 7, 0.1);
    }

    .u-bg-rgba-255-193-7-0_12 {
        background: rgba(255, 193, 7, 0.12);
    }

    .u-bg-rgba-255-193-7-0_2 {
        background: rgba(255, 193, 7, 0.2);
    }

    .u-bg-rgba-255-255-255-0_06 {
        background: rgba(255, 255, 255, 0.06);
    }

    .u-bg-rgba-255-255-255-0_08 {
        background: rgba(255, 255, 255, 0.08);
    }

    .u-bg-rgba-255-255-255-0_2 {
        background: rgba(255, 255, 255, 0.2);
    }

    .u-bg-rgba-33-150-243-0_15 {
        background: rgba(33, 150, 243, 0.15);
    }

    .u-bg-rgba-40-167-69-0_1 {
        background: rgba(40, 167, 69, 0.1);
    }

    .u-bg-rgba-40-167-69-0_15 {
        background: rgba(40, 167, 69, 0.15);
    }

    .u-bg-rgba-40-167-69-0_2 {
        background: rgba(40, 167, 69, 0.2);
    }

    .u-bg-rgba-56-189-248-0_15 {
        background: rgba(56, 189, 248, 0.15);
    }

    .u-bg-rgba-59-130-246-0_08 {
        background: rgba(59, 130, 246, 0.08);
    }

    .u-bg-text-main {
        background: var(--text-main);
    }

    .u-bg-text-muted {
        background: var(--text-muted);
    }

    .u-bg-theme-danger {
        background: var(--theme-danger);
    }

    .u-bg-theme-info {
        background: var(--theme-info);
    }

    .u-bg-theme-primary {
        background: var(--theme-primary);
    }

    .u-bg-theme-secondary {
        background: var(--theme-secondary);
    }

    .u-bg-theme-success {
        background: var(--theme-success);
    }

    .u-bg-theme-warning {
        background: var(--theme-warning);
    }

    .u-bg-transparent {
        background: transparent;
    }

    .u-bg-var-bg-card-basic-white {
        background: var(--bg-card, --basic-white);
    }

    .u-bg-var-theme-danger-theme-danger {
        background: var(--theme-danger, var(--theme-danger));
    }

    .u-bg-var-theme-info-theme-info {
        background: var(--theme-info, var(--theme-info));
    }

    .u-bg-var-theme-success-theme-success {
        background: var(--theme-success, var(--theme-success));
    }

    .u-bd-0 {
        border: 0;
    }

    .u-bd-1_5px-solid-basic-grey-7 {
        border: 1.5px solid var(--basic-grey-7);
    }

    .u-bd-1_5px-solid-theme-danger {
        border: 1.5px solid var(--theme-danger);
    }

    .u-bd-10px-solid-basic-white {
        border: 10px solid var(--basic-white);
    }

    .u-bd-1px-dashed-border-color {
        border: 1px dashed var(--border-color);
    }

    .u-bd-1px-dashed-border-light {
        border: 1px dashed var(--border-light);
    }

    .u-bd-1px-dashed-theme-danger {
        border: 1px dashed var(--theme-danger);
    }

    .u-bd-1px-dashed-theme-success {
        border: 1px dashed var(--theme-success);
    }

    .u-bd-1px-dashed-theme-warning {
        border: 1px dashed var(--theme-warning);
    }

    .u-bd-1px-solid-334155 {
        border: 1px solid #334155;
    }

    .u-bd-1px-solid-basic-grey-0 {
        border: 1px solid var(--basic-grey-0);
    }

    .u-bd-1px-solid-basic-grey-5 {
        border: 1px solid var(--basic-grey-5);
    }

    .u-bd-1px-solid-basic-grey-6 {
        border: 1px solid var(--basic-grey-6);
    }

    .u-bd-1px-solid-basic-grey-7 {
        border: 1px solid var(--basic-grey-7);
    }

    .u-bd-1px-solid-basic-white {
        border: 1px solid var(--basic-white);
    }

    .u-bd-1px-solid-border-color {
        border: 1px solid var(--border-color);
    }

    .u-bd-1px-solid-border-light {
        border: 1px solid var(--border-light);
    }

    .u-bd-1px-solid-rgba-111-66-193-0_25 {
        border: 1px solid rgba(111, 66, 193, 0.25);
    }

    .u-bd-1px-solid-rgba-13-71-161-0_3 {
        border: 1px solid rgba(13, 71, 161, 0.3);
    }

    .u-bd-1px-solid-rgba-220-53-69-0_3 {
        border: 1px solid rgba(220, 53, 69, 0.3);
    }

    .u-bd-1px-solid-rgba-220-53-69-0_3-2 {
        border: 1px solid rgba(220, 53, 69, 0.3);
    }

    .u-bd-1px-solid-rgba-239-68-68-0_3 {
        border: 1px solid rgba(239, 68, 68, 0.3);
    }

    .u-bd-1px-solid-rgba-255-255-255-0_4 {
        border: 1px solid rgba(255, 255, 255, 0.4);
    }

    .u-bd-1px-solid-rgba-40-167-69-0_3 {
        border: 1px solid rgba(40, 167, 69, 0.3);
    }

    .u-bd-1px-solid-rgba-40-167-69-0_3-2 {
        border: 1px solid rgba(40, 167, 69, 0.3);
    }

    .u-bd-1px-solid-theme-danger {
        border: 1px solid var(--theme-danger);
    }

    .u-bd-1px-solid-theme-info {
        border: 1px solid var(--theme-info);
    }

    .u-bd-1px-solid-theme-primary {
        border: 1px solid var(--theme-primary);
    }

    .u-bd-1px-solid-theme-secondary {
        border: 1px solid var(--theme-secondary);
    }

    .u-bd-1px-solid-theme-success {
        border: 1px solid var(--theme-success);
    }

    .u-bd-1px-solid-theme-warning {
        border: 1px solid var(--theme-warning);
    }

    .u-bd-1px-solid-var-border-color-basic-grey-0 {
        border: 1px solid var(--border-color, var(--basic-grey-0));
    }

    .u-bd-2px-dashed-border-color {
        border: 2px dashed var(--border-color);
    }

    .u-bd-2px-dashed-theme-secondary {
        border: 2px dashed var(--theme-secondary);
    }

    .u-bd-2px-dashed-var-theme-primary-theme-primary {
        border: 2px dashed var(--theme-primary, var(--theme-primary));
    }

    .u-bd-2px-solid-basic-grey-0 {
        border: 2px solid var(--basic-grey-0);
    }

    .u-bd-2px-solid-border-color {
        border: 2px solid var(--border-color);
    }

    .u-bd-2px-solid-border-light {
        border: 2px solid var(--border-light);
    }

    .u-bd-2px-solid-theme-danger {
        border: 2px solid var(--theme-danger);
    }

    .u-bd-2px-solid-theme-primary {
        border: 2px solid var(--theme-primary);
    }

    .u-bd-3px-solid-basic-white {
        border: 3px solid var(--basic-white);
    }

    .u-bd-3px-solid-border-color {
        border: 3px solid var(--border-color);
    }

    .u-bd-4px-dashed-basic-grey-0 {
        border: 4px dashed var(--basic-grey-0);
    }

    .u-bd-4px-dashed-theme-danger {
        border: 4px dashed var(--theme-danger);
    }

    .u-bd-4px-dashed-theme-primary {
        border: 4px dashed var(--theme-primary);
    }

    .u-bd-4px-solid-basic-darkgreen-2 {
        border: 4px solid var(--basic-darkgreen-2);
    }

    .u-bd-4px-solid-basic-grey-8 {
        border: 4px solid var(--basic-grey-8);
    }

    .u-bd-4px-solid-border-color {
        border: 4px solid var(--border-color);
    }

    .u-bd-4px-solid-theme-primary {
        border: 4px solid var(--theme-primary);
    }

    .u-bd-5px-solid-loader-ring {
        border: 5px solid var(--loader-ring);
    }

    .u-bd-none {
        border: none;
    }

    .u-r-0 {
        border-radius: 0;
    }

    .u-r-0px {
        border-radius: 0px;
    }

    .u-r-10px {
        border-radius: 10px;
    }

    .u-r-12px {
        border-radius: 12px;
    }

    .u-r-14px {
        border-radius: 14px;
    }

    .u-r-15px {
        border-radius: 15px;
    }

    .u-r-16px {
        border-radius: 16px;
    }

    .u-r-20px {
        border-radius: 20px;
    }

    .u-r-2px {
        border-radius: 2px;
    }

    .u-r-4px {
        border-radius: 4px;
    }

    .u-r-50pct {
        border-radius: 50%;
    }

    .u-r-50px {
        border-radius: 50px;
    }

    .u-r-5px {
        border-radius: 5px;
    }

    .u-r-6px {
        border-radius: 6px;
    }

    .u-r-8px {
        border-radius: 8px;
    }

    .u-flex-0_8 {
        flex: 0.8;
    }

    .u-flex-0-0-30px {
        flex: 0 0 30px;
    }

    .u-flex-1 {
        flex: 1;
    }

    .u-flex-1_2 {
        flex: 1.2;
    }

    .u-flex-1_5 {
        flex: 1.5;
    }

    .u-flex-1-1-180px {
        flex: 1 1 180px;
    }

    .u-flex-1-1-230px {
        flex: 1 1 230px;
    }

    .u-flex-1-1-auto {
        flex: 1 1 auto;
    }

    .u-flex-2 {
        flex: 2;
    }

    .u-flex-2-1-200px {
        flex: 2 1 200px;
    }

    .u-flex-2-1-240px {
        flex: 2 1 240px;
    }

    .u-gap-10px {
        gap: 10px;
    }

    .u-gap-12px {
        gap: 12px;
    }

    .u-gap-12px-15px {
        gap: 12px 15px;
    }

    .u-gap-14px {
        gap: 14px;
    }

    .u-gap-15px {
        gap: 15px;
    }

    .u-gap-16px {
        gap: 16px;
    }

    .u-gap-18px {
        gap: 18px;
    }

    .u-gap-20px {
        gap: 20px;
    }

    .u-gap-24px {
        gap: 24px;
    }

    .u-gap-2px {
        gap: 2px;
    }

    .u-gap-3px {
        gap: 3px;
    }

    .u-gap-48px {
        gap: 48px;
    }

    .u-gap-4px {
        gap: 4px;
    }

    .u-gap-5px {
        gap: 5px;
    }

    .u-gap-6px {
        gap: 6px;
    }

    .u-gap-8px {
        gap: 8px;
    }

    .u-inset-0 {
        inset: 0;
    }

    .u-list-none {
        list-style: none;
    }

    .u-m-0 {
        margin: 0;
    }

    .u-m-0-0-10px-0 {
        margin: 0 0 10px 0;
    }

    .u-m-0-0-12px-0 {
        margin: 0 0 12px 0;
    }

    .u-m-0-0-15px-0 {
        margin: 0 0 15px 0;
    }

    .u-m-0-0-20px-0 {
        margin: 0 0 20px 0;
    }

    .u-m-0-0-24px-0 {
        margin: 0 0 24px 0;
    }

    .u-m-0-0-40px-0 {
        margin: 0 0 40px 0;
    }

    .u-m-0-0-5px-0 {
        margin: 0 0 5px 0;
    }

    .u-m-0-0-6px-0 {
        margin: 0 0 6px 0;
    }

    .u-m-0-0-8px-0 {
        margin: 0 0 8px 0;
    }

    .u-m-0-10px {
        margin: 0 10px;
    }

    .u-m-0-2px {
        margin: 0 2px;
    }

    .u-m-0-5px {
        margin: 0 5px;
    }

    .u-m-0-auto {
        margin: 0 auto;
    }

    .u-m-0-auto-10px {
        margin: 0 auto 10px;
    }

    .u-m-0-auto-10px-auto {
        margin: 0 auto 10px auto;
    }

    .u-m-0-auto-15px {
        margin: 0 auto 15px;
    }

    .u-m-0-auto-20px-auto {
        margin: 0 auto 20px auto;
    }

    .u-m-0-auto-30px-auto {
        margin: 0 auto 30px auto;
    }

    .u-m-10px-0 {
        margin: 10px 0;
    }

    .u-m-10px-0-0-0 {
        margin: 10px 0 0 0;
    }

    .u-m-10px-0-15px-0 {
        margin: -10px 0 15px 0;
    }

    .u-m-10px-auto-15px-auto {
        margin: 10px auto 15px auto;
    }

    .u-m-10vh-auto {
        margin: 10vh auto;
    }

    .u-m-15px-0 {
        margin: 15px 0;
    }

    .u-m-16px-0 {
        margin: 16px 0;
    }

    .u-m-18px-0-0 {
        margin: 18px 0 0;
    }

    .u-m-1px-0 {
        margin: 1px 0;
    }

    .u-m-20px-0 {
        margin: 20px 0;
    }

    .u-m-20px-auto {
        margin: 20px auto;
    }

    .u-m-20px-auto-0-auto {
        margin: 20px auto 0 auto;
    }

    .u-m-2px-0 {
        margin: 2px 0;
    }

    .u-m-2px-0-1px-0 {
        margin: 2px 0 1px 0;
    }

    .u-m-2px-0-8px-0 {
        margin: 2px 0 8px 0;
    }

    .u-m-30px-0 {
        margin: 30px 0;
    }

    .u-m-30px-auto {
        margin: 30px auto;
    }

    .u-m-3px-0-0-0 {
        margin: 3px 0 0 0;
    }

    .u-m-4px-0-0-0 {
        margin: 4px 0 0 0;
    }

    .u-m-4px-0-2px-0 {
        margin: 4px 0 2px 0;
    }

    .u-m-4px-25px-8px-0 {
        margin: 4px 25px 8px 0;
    }

    .u-m-4vh-auto {
        margin: 4vh auto;
    }

    .u-m-5px-0-0-0 {
        margin: 5px 0 0 0;
    }

    .u-m-5px-0-0-15px {
        margin: 5px 0 0 15px;
    }

    .u-m-5vh-auto {
        margin: 5vh auto;
    }

    .u-m-60px-auto {
        margin: 60px auto;
    }

    .u-m-6px {
        margin: 6px;
    }

    .u-m-6vh-auto {
        margin: 6vh auto;
    }

    .u-m-8px-0-0-0 {
        margin: 8px 0 0 0;
    }

    .u-m-auto {
        margin: auto;
    }

    .u-ol-none {
        outline: none;
    }

    .u-ov-auto {
        overflow: auto;
    }

    .u-ov-hidden {
        overflow: hidden;
    }

    .u-ov-visible {
        overflow: visible;
    }

    .u-p-0 {
        padding: 0;
    }

    .u-p-0-0-calc-76px-env-safe-area-inset-bottom-0px {
        padding: 0 0 calc(76px + env(safe-area-inset-bottom, 0px));
    }

    .u-p-0-10px {
        padding: 0 10px;
    }

    .u-p-0-12px {
        padding: 0 12px;
    }

    .u-p-0-15px {
        padding: 0 15px;
    }

    .u-p-0-15px-15px-15px {
        padding: 0 15px 15px 15px;
    }

    .u-p-0-15px-15px-40px {
        padding: 0 15px 15px 40px;
    }

    .u-p-0-16px {
        padding: 0 16px;
    }

    .u-p-0-18px {
        padding: 0 18px;
    }

    .u-p-0-20px {
        padding: 0 20px;
    }

    .u-p-0-22px {
        padding: 0 22px;
    }

    .u-p-0-25px {
        padding: 0 25px;
    }

    .u-p-0-2px {
        padding: 0 2px;
    }

    .u-p-0-4px {
        padding: 0 4px;
    }

    .u-p-0-5px {
        padding: 0 5px;
    }

    .u-p-0-8px {
        padding: 0 8px;
    }

    .u-p-10px {
        padding: 10px;
    }

    .u-p-10px-0 {
        padding: 10px 0;
    }

    .u-p-10px-12px {
        padding: 10px 12px;
    }

    .u-p-10px-14px {
        padding: 10px 14px;
    }

    .u-p-10px-15px {
        padding: 10px 15px;
    }

    .u-p-10px-16px {
        padding: 10px 16px;
    }

    .u-p-10px-18px-20px-18px {
        padding: 10px 18px 20px 18px;
    }

    .u-p-10px-20px {
        padding: 10px 20px;
    }

    .u-p-10px-24px {
        padding: 10px 24px;
    }

    .u-p-10px-30px {
        padding: 10px 30px;
    }

    .u-p-12px {
        padding: 12px;
    }

    .u-p-12px-0 {
        padding: 12px 0;
    }

    .u-p-12px-10px {
        padding: 12px 10px;
    }

    .u-p-12px-14px {
        padding: 12px 14px;
    }

    .u-p-12px-15px {
        padding: 12px 15px;
    }

    .u-p-12px-16px {
        padding: 12px 16px;
    }

    .u-p-12px-18px {
        padding: 12px 18px;
    }

    .u-p-12px-20px {
        padding: 12px 20px;
    }

    .u-p-12px-24px {
        padding: 12px 24px;
    }

    .u-p-12px-30px {
        padding: 12px 30px;
    }

    .u-p-14px {
        padding: 14px;
    }

    .u-p-14px-16px {
        padding: 14px 16px;
    }

    .u-p-14px-18px {
        padding: 14px 18px;
    }

    .u-p-14px-20px {
        padding: 14px 20px;
    }

    .u-p-15px {
        padding: 15px;
    }

    .u-p-15px-10px {
        padding: 15px 10px;
    }

    .u-p-15px-20px {
        padding: 15px 20px;
    }

    .u-p-15px-20px-10px {
        padding: 15px 20px 10px;
    }

    .u-p-15px-30px {
        padding: 15px 30px;
    }

    .u-p-16px {
        padding: 16px;
    }

    .u-p-16px-20px {
        padding: 16px 20px;
    }

    .u-p-18px {
        padding: 18px;
    }

    .u-p-18px-20px {
        padding: 18px 20px;
    }

    .u-p-1px-7px {
        padding: 1px 7px;
    }

    .u-p-20px {
        padding: 20px;
    }

    .u-p-20px-25px-10px {
        padding: 20px 25px 10px;
    }

    .u-p-20px-30px {
        padding: 20px 30px;
    }

    .u-p-22px {
        padding: 22px;
    }

    .u-p-24px {
        padding: 24px;
    }

    .u-p-25px {
        padding: 25px;
    }

    .u-p-25px-15px {
        padding: 25px 15px;
    }

    .u-p-28px {
        padding: 28px;
    }

    .u-p-2px {
        padding: 2px;
    }

    .u-p-2px-10px {
        padding: 2px 10px;
    }

    .u-p-2px-4px {
        padding: 2px 4px;
    }

    .u-p-2px-6px {
        padding: 2px 6px;
    }

    .u-p-2px-7px {
        padding: 2px 7px;
    }

    .u-p-2px-8px {
        padding: 2px 8px;
    }

    .u-p-30px {
        padding: 30px;
    }

    .u-p-30px-10px {
        padding: 30px 10px;
    }

    .u-p-32px {
        padding: 32px;
    }

    .u-p-35px {
        padding: 35px;
    }

    .u-p-3px {
        padding: 3px;
    }

    .u-p-3px-10px {
        padding: 3px 10px;
    }

    .u-p-3px-6px {
        padding: 3px 6px;
    }

    .u-p-3px-8px {
        padding: 3px 8px;
    }

    .u-p-40px {
        padding: 40px;
    }

    .u-p-40px-20px {
        padding: 40px 20px;
    }

    .u-p-45px {
        padding: 45px;
    }

    .u-p-4px {
        padding: 4px;
    }

    .u-p-4px-10px {
        padding: 4px 10px;
    }

    .u-p-4px-12px {
        padding: 4px 12px;
    }

    .u-p-4px-20px {
        padding: 4px 20px;
    }

    .u-p-4px-6px {
        padding: 4px 6px;
    }

    .u-p-4px-8px {
        padding: 4px 8px;
    }

    .u-p-4px-8px-4px-16px {
        padding: 4px 8px 4px 16px;
    }

    .u-p-4px-8px-4px-18px {
        padding: 4px 8px 4px 18px;
    }

    .u-p-4px-8px-4px-20px {
        padding: 4px 8px 4px 20px;
    }

    .u-p-4px-8px-4px-24px {
        padding: 4px 8px 4px 24px;
    }

    .u-p-50px-20px {
        padding: 50px 20px;
    }

    .u-p-50px-30px {
        padding: 50px 30px;
    }

    .u-p-5px {
        padding: 5px;
    }

    .u-p-5px-0 {
        padding: 5px 0;
    }

    .u-p-5px-10px {
        padding: 5px 10px;
    }

    .u-p-5px-10px-5px-24px {
        padding: 5px 10px 5px 24px;
    }

    .u-p-5px-12px {
        padding: 5px 12px;
    }

    .u-p-5px-15px {
        padding: 5px 15px;
    }

    .u-p-5px-25px {
        padding: 5px 25px;
    }

    .u-p-5px-6px {
        padding: 5px 6px;
    }

    .u-p-5px-8px {
        padding: 5px 8px;
    }

    .u-p-60px-20px {
        padding: 60px 20px;
    }

    .u-p-6px {
        padding: 6px;
    }

    .u-p-6px-10px {
        padding: 6px 10px;
    }

    .u-p-6px-10px-6px-18px {
        padding: 6px 10px 6px 18px;
    }

    .u-p-6px-10px-6px-20px {
        padding: 6px 10px 6px 20px;
    }

    .u-p-6px-10px-6px-24px {
        padding: 6px 10px 6px 24px;
    }

    .u-p-6px-12px {
        padding: 6px 12px;
    }

    .u-p-6px-14px {
        padding: 6px 14px;
    }

    .u-p-6px-15px {
        padding: 6px 15px;
    }

    .u-p-6px-4px {
        padding: 6px 4px;
    }

    .u-p-6px-8px {
        padding: 6px 8px;
    }

    .u-p-7px-10px {
        padding: 7px 10px;
    }

    .u-p-7px-12px {
        padding: 7px 12px;
    }

    .u-p-7px-16px {
        padding: 7px 16px;
    }

    .u-p-7px-18px {
        padding: 7px 18px;
    }

    .u-p-8px {
        padding: 8px;
    }

    .u-p-8px-10px {
        padding: 8px 10px;
    }

    .u-p-8px-12px {
        padding: 8px 12px;
    }

    .u-p-8px-14px {
        padding: 8px 14px;
    }

    .u-p-8px-15px {
        padding: 8px 15px;
    }

    .u-p-8px-16px {
        padding: 8px 16px;
    }

    .u-p-8px-18px {
        padding: 8px 18px;
    }

    .u-p-8px-20px {
        padding: 8px 20px;
    }

    .u-p-8px-24px {
        padding: 8px 24px;
    }

    .u-tr-all-0_2s {
        transition: all 0.2s;
    }

    .u-tr-all-0_3s {
        transition: all 0.3s;
    }

    .u-tr-background-0_15s {
        transition: background 0.15s;
    }

    .u-tr-background-0_15s-ease {
        transition: background 0.15s ease;
    }

    .u-tr-background-0_2s {
        transition: background 0.2s;
    }

    .u-tr-background-color-0_15s-ease {
        transition: background-color 0.15s ease;
    }

    .u-tr-color-0_2s {
        transition: color 0.2s;
    }

    .u-tr-transform-0_2s {
        transition: transform 0.2s;
    }

    .u-tr-transform-0_2s-box-shadow-0_2s {
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .u-tr-transform-0_2s-ease {
        transition: transform 0.2s ease;
    }

    .u-bdb-1px-dashed-border-color {
        border-bottom: 1px dashed var(--border-color);
    }

    .u-bdb-1px-dashed-border-light {
        border-bottom: 1px dashed var(--border-light);
    }

    .u-bdb-1px-solid-basic-grey-8 {
        border-bottom: 1px solid var(--basic-grey-8);
    }

    .u-bdb-1px-solid-border-color {
        border-bottom: 1px solid var(--border-color);
    }

    .u-bdb-1px-solid-border-light {
        border-bottom: 1px solid var(--border-light);
    }

    .u-bdb-2px-solid-border-color {
        border-bottom: 2px solid var(--border-color);
    }

    .u-bdb-2px-solid-border-light {
        border-bottom: 2px solid var(--border-light);
    }

    .u-bdc-rgba-220-53-69-0_4 {
        border-color: rgba(220, 53, 69, 0.4);
    }

    .u-bdc-theme-info {
        border-color: var(--theme-info);
    }

    .u-bdc-theme-primary {
        border-color: var(--theme-primary);
    }

    .u-bdc-theme-secondary {
        border-color: var(--theme-secondary);
    }

    .u-bdc-theme-success {
        border-color: var(--theme-success);
    }

    .u-bdl-1px-solid-border-light {
        border-left: 1px solid var(--border-light);
    }

    .u-bdl-3px-solid-theme-secondary {
        border-left: 3px solid var(--theme-secondary);
    }

    .u-bdl-4px-solid-theme-primary {
        border-left: 4px solid var(--theme-primary);
    }

    .u-bdr-1px-solid-border-light {
        border-right: 1px solid var(--border-light);
    }

    .u-bdr-2px-solid-border-color {
        border-right: 2px solid var(--border-color);
    }

    .u-bdt-1px-dashed-border-color {
        border-top: 1px dashed var(--border-color);
    }

    .u-bdt-1px-dashed-border-light {
        border-top: 1px dashed var(--border-light);
    }

    .u-bdt-1px-solid-basic-grey-7 {
        border-top: 1px solid var(--basic-grey-7);
    }

    .u-bdt-1px-solid-basic-grey-8 {
        border-top: 1px solid var(--basic-grey-8);
    }

    .u-bdt-1px-solid-border-color {
        border-top: 1px solid var(--border-color);
    }

    .u-bdt-1px-solid-border-light {
        border-top: 1px solid var(--border-light);
    }

    .u-bdt-2px-solid-border-light {
        border-top: 2px solid var(--border-light);
    }

    .u-bdt-5px-solid-basic-amber {
        border-top: 5px solid var(--basic-amber);
    }

    .u-bdt-5px-solid-theme-primary {
        border-top: 5px solid var(--theme-primary);
    }

    .u--webkit-appearance-none {
        -webkit-appearance: none;
        appearance: none;
    }

    .u--webkit-overflow-scrolling-touch {
        -webkit-overflow-scrolling: touch;
    }

    .u-accent-color-theme-primary {
        accent-color: var(--theme-primary);
    }

    .u-accent-color-theme-secondary {
        accent-color: var(--theme-secondary);
    }

    .u-ai-baseline {
        align-items: baseline;
    }

    .u-ai-center {
        align-items: center;
    }

    .u-ai-end {
        align-items: end;
    }

    .u-ai-flex-end {
        align-items: flex-end;
    }

    .u-ai-flex-start {
        align-items: flex-start;
    }

    .u-ai-start {
        align-items: start;
    }

    .u-ai-stretch {
        align-items: stretch;
    }

    .u-as-center {
        align-self: center;
    }

    .u-appearance-none {
        appearance: none;
    }

    .u-backdrop-filter-blur-4px {
        backdrop-filter: blur(4px);
    }

    .u-backdrop-filter-blur-5px {
        backdrop-filter: blur(5px);
    }

    .u-backdrop-filter-blur-6px {
        backdrop-filter: blur(6px);
    }

    .u-bgc-bg-body {
        background-color: var(--bg-body);
    }

    .u-bgc-transparent {
        background-color: transparent;
    }

    .u-border-collapse-collapse {
        border-collapse: collapse;
    }

    .u-border-inline-start-4px-solid-theme-primary {
        border-inline-start: 4px solid var(--theme-primary);
    }

    .u-border-inline-start-4px-solid-theme-success {
        border-inline-start: 4px solid var(--theme-success);
    }

    .u-border-start-end-radius-8px {
        border-start-end-radius: 8px;
    }

    .u-border-start-start-radius-8px {
        border-start-start-radius: 8px;
    }

    .u-border-top-color-theme-primary {
        border-top-color: var(--theme-primary);
    }

    .u-bottom-10px {
        bottom: 10px;
    }

    .u-sh-0-0-2px-rgba-0-0-0-0_3 {
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
    }

    .u-sh-0-10px-20px-rgba-0-0-0-0_1 {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }

    .u-sh-0-10px-25px-rgba-0-0-0-0_2 {
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    }

    .u-sh-0-10px-25px-rgba-0-0-0-0_3 {
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    }

    .u-sh-0-10px-30px-rgba-0-0-0-0_1 {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

    .u-sh-0-10px-30px-rgba-0-0-0-0_3 {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }

    .u-sh-0-10px-30px-rgba-0-0-0-0_35 {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    }

    .u-sh-0-10px-30px-rgba-0-0-0-0_5 {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

    .u-sh-0-10px-30px-rgba-0-0-0-0_6 {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    }

    .u-sh-0-10px-35px-rgba-0-0-0-0_3 {
        box-shadow: 0 10px 35px rgba(0, 0, 0, 0.3);
    }

    .u-sh-0-10px-40px-rgba-0-0-0-0_5 {
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    }

    .u-sh-0-1px-2px-rgba-0-0-0-0_05 {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .u-sh-0-20px-50px-rgba-0-0-0-0_3 {
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    }

    .u-sh-0-25px-50px-12px-rgba-0-0-0-0_5 {
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    }

    .u-sh-0-2px-10px-rgba-0-0-0-0_02 {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    }

    .u-sh-0-2px-10px-rgba-0-0-0-0_05 {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .u-sh-0-2px-4px-rgba-0-0-0-0_02 {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    }

    .u-sh-0-2px-4px-rgba-0-0-0-0_05 {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .u-sh-0-2px-4px-rgba-0-0-0-0_1 {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .u-sh-0-2px-5px-rgba-0-0-0-0_06 {
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
    }

    .u-sh-0-2px-6px-rgba-0-0-0-0_04 {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }

    .u-sh-0-2px-6px-rgba-0-0-0-0_3 {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }

    .u-sh-0-2px-8px-rgba-0-0-0-0_06 {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    .u-sh-0-4px-10px-rgba-220-53-69-0_3 {
        box-shadow: 0 4px 10px rgba(220, 53, 69, 0.3);
    }

    .u-sh-0-4px-10px-rgba-23-162-184-0_2 {
        box-shadow: 0 4px 10px rgba(23, 162, 184, 0.2);
    }

    .u-sh-0-4px-10px-rgba-40-167-69-0_2 {
        box-shadow: 0 4px 10px rgba(40, 167, 69, 0.2);
    }

    .u-sh-0-4px-12px-rgba-0-0-0-0_02 {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    }

    .u-sh-0-4px-12px-rgba-0-0-0-0_06 {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    }

    .u-sh-0-4px-12px-rgba-0-0-0-0_1 {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .u-sh-0-4px-15px-rgba-0-0-0-0_05 {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    }

    .u-sh-0-4px-16px-rgba-0-0-0-0_3 {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    }

    .u-sh-0-4px-20px-rgba-0-0-0-0_04 {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    }

    .u-sh-0-4px-6px-rgba-0-0-0-0_05 {
        box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.05);
    }

    .u-sh-0-4px-6px-rgba-0-0-0-0_05-2 {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    }

    .u-sh-0-4px-6px-rgba-0-0-0-0_1 {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .u-sh-0-6px-15px-rgba-0-0-0-0_1 {
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    }

    .u-sh-0-6px-15px-rgba-0-0-0-0_15 {
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    }

    .u-sh-0-6px-18px-rgba-0-0-0-0_12 {
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    }

    .u-sh-0-8px-0-basic-darkgreen-2-0-15px-25px-rgba-0-0-0 {
        box-shadow: 0 8px 0 var(--basic-darkgreen-2), 0 15px 25px rgba(0, 0, 0, 0.2);
    }

    .u-sh-0-8px-15px-rgba-0-0-0-0_1 {
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    }

    .u-sh-0-8px-24px-rgba-0-0-0-0_25 {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    }

    .u-sh-none {
        box-shadow: none;
    }

    .u-sh-shadow-lg {
        box-shadow: var(--shadow-lg);
    }

    .u-sh-shadow-sm {
        box-shadow: var(--shadow-sm);
    }

    .u-sh-shadow-xl {
        box-shadow: var(--shadow-xl);
    }

    .u-bs-border-box {
        box-sizing: border-box;
    }

    .u-c-94a3b8 {
        color: #94a3b8;
    }

    .u-c-basic-blue {
        color: var(--basic-blue);
    }

    .u-c-basic-darkgreen {
        color: var(--basic-darkgreen);
    }

    .u-c-basic-darkgreen-2 {
        color: var(--basic-darkgreen-2);
    }

    .u-c-basic-darkorange {
        color: var(--basic-darkorange);
    }

    .u-c-basic-grey-0 {
        color: var(--basic-grey-0);
    }

    .u-c-basic-grey-1 {
        color: var(--basic-grey-1);
    }

    .u-c-basic-grey-2 {
        color: var(--basic-grey-2);
    }

    .u-c-basic-grey-3 {
        color: var(--basic-grey-3);
    }

    .u-c-basic-grey-4 {
        color: var(--basic-grey-4);
    }

    .u-c-basic-grey-5 {
        color: var(--basic-grey-5);
    }

    .u-c-basic-grey-6 {
        color: var(--basic-grey-6);
    }

    .u-c-basic-grey-8 {
        color: var(--basic-grey-8);
    }

    .u-c-basic-grey-b {
        color: var(--basic-grey-b);
    }

    .u-c-basic-grey-w {
        color: var(--basic-grey-w);
    }

    .u-c-basic-hotpink {
        color: var(--basic-hotpink);
    }

    .u-c-basic-orange {
        color: var(--basic-orange);
    }

    .u-c-basic-purple {
        color: var(--basic-purple);
    }

    .u-c-basic-red {
        color: var(--basic-red);
    }

    .u-c-basic-white {
        color: var(--basic-white);
    }

    .u-c-black {
        color: black;
    }

    .u-c-border-color {
        color: var(--border-color);
    }

    .u-c-ef4444 {
        color: #ef4444;
    }

    .u-c-f8fafc {
        color: #f8fafc;
    }

    .u-c-red {
        color: red;
    }

    .u-c-rgba-255-255-255-0_6 {
        color: rgba(255, 255, 255, 0.6);
    }

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

    .u-c-text-danger-dark {
        color: var(--text-danger-dark);
    }

    .u-c-text-inverse {
        color: var(--text-inverse);
    }

    .u-c-text-main {
        color: var(--text-main);
    }

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

    .u-c-text-success-dark {
        color: var(--text-success-dark);
    }

    .u-c-text-warning-dark {
        color: var(--text-warning-dark);
    }

    .u-c-theme-danger {
        color: var(--theme-danger);
    }

    .u-c-theme-info {
        color: var(--theme-info);
    }

    .u-c-theme-primary {
        color: var(--theme-primary);
    }

    .u-c-theme-secondary {
        color: var(--theme-secondary);
    }

    .u-c-theme-success {
        color: var(--theme-success);
    }

    .u-c-theme-warning {
        color: var(--theme-warning);
    }

    .u-c-var-text-muted-basic-grey-5 {
        color: var(--text-muted, var(--basic-grey-5));
    }

    .u-c-var-theme-primary-theme-primary {
        color: var(--theme-primary, var(--theme-primary));
    }

    .u-c-white {
        color: white;
    }

    .u-cur-grab {
        cursor: grab;
    }

    .u-cur-not-allowed {
        cursor: not-allowed;
    }

    .u-cur-pointer {
        cursor: pointer;
    }

    .u-direction-ltr {
        direction: ltr;
    }

    .u-direction-rtl {
        direction: rtl;
    }

    .u-filter-drop-shadow-0-2px-8px-rgba-220-53-69-0_3 {
        filter: drop-shadow(0 2px 8px rgba(220, 53, 69, 0.3));
    }

    .u-dir-column {
        flex-direction: column;
    }

    .u-grow-1 {
        flex-grow: 1;
    }

    .u-shrink-0 {
        flex-shrink: 0;
    }

    .u-wrap-nowrap {
        flex-wrap: nowrap;
    }

    .u-wrap-wrap {
        flex-wrap: wrap;
    }

    .u-ff-inherit {
        font-family: inherit;
    }

    .u-ff-monospace {
        font-family: monospace;
    }

    .u-ff-sans-serif {
        font-family: sans-serif;
    }

    .u-fs-0_68rem {
        font-size: 0.68rem;
    }

    .u-fs-0_72rem {
        font-size: 0.72rem;
    }

    .u-fs-0_74rem {
        font-size: 0.74rem;
    }

    .u-fs-0_75em {
        font-size: 0.75em;
    }

    .u-fs-0_75rem {
        font-size: 0.75rem;
    }

    .u-fs-0_76rem {
        font-size: 0.76rem;
    }

    .u-fs-0_78rem {
        font-size: 0.78rem;
    }

    .u-fs-0_7rem {
        font-size: 0.7rem;
    }

    .u-fs-0_82rem {
        font-size: 0.82rem;
    }

    .u-fs-0_83rem {
        font-size: 0.83rem;
    }

    .u-fs-0_84rem {
        font-size: 0.84rem;
    }

    .u-fs-0_85rem {
        font-size: 0.85rem;
    }

    .u-fs-0_86rem {
        font-size: 0.86rem;
    }

    .u-fs-0_88rem {
        font-size: 0.88rem;
    }

    .u-fs-0_8rem {
        font-size: 0.8rem;
    }

    .u-fs-0_92rem {
        font-size: 0.92rem;
    }

    .u-fs-0_95rem {
        font-size: 0.95rem;
    }

    .u-fs-0_98rem {
        font-size: 0.98rem;
    }

    .u-fs-0_9rem {
        font-size: 0.9rem;
    }

    .u-fs-1_05rem {
        font-size: 1.05rem;
    }

    .u-fs-1_15rem {
        font-size: 1.15rem;
    }

    .u-fs-1_1rem {
        font-size: 1.1rem;
    }

    .u-fs-1_25rem {
        font-size: 1.25rem;
    }

    .u-fs-1_2rem {
        font-size: 1.2rem;
    }

    .u-fs-1_35rem {
        font-size: 1.35rem;
    }

    .u-fs-1_3rem {
        font-size: 1.3rem;
    }

    .u-fs-1_4rem {
        font-size: 1.4rem;
    }

    .u-fs-1_5rem {
        font-size: 1.5rem;
    }

    .u-fs-1_6rem {
        font-size: 1.6rem;
    }

    .u-fs-1_8rem {
        font-size: 1.8rem;
    }

    .u-fs-1rem {
        font-size: 1rem;
    }

    .u-fs-2_2rem {
        font-size: 2.2rem;
    }

    .u-fs-2_5rem {
        font-size: 2.5rem;
    }

    .u-fs-2_8rem {
        font-size: 2.8rem;
    }

    .u-fs-2rem {
        font-size: 2rem;
    }

    .u-fs-3_5rem {
        font-size: 3.5rem;
    }

    .u-fs-3rem {
        font-size: 3rem;
    }

    .u-fs-40px {
        font-size: 40px;
    }

    .u-fs-5_5rem {
        font-size: 5.5rem;
    }

    .u-fs-7rem {
        font-size: 7rem;
    }

    .u-fst-italic {
        font-style: italic;
    }

    .u-fw-500 {
        font-weight: 500;
    }

    .u-fw-600 {
        font-weight: 600;
    }

    .u-fw-700 {
        font-weight: 700;
    }

    .u-fw-800 {
        font-weight: 800;
    }

    .u-fw-900 {
        font-weight: 900;
    }

    .u-fw-bold {
        font-weight: bold;
    }

    .u-fw-normal {
        font-weight: normal;
    }

    .u-gcol-1-1 {
        grid-column: 1 / -1;
    }

    .u-gcol-1-1-2 {
        grid-column: 1/-1;
    }

    .u-gcol-span-2 {
        grid-column: span 2;
    }

    .u-cols-1_2fr-1fr {
        grid-template-columns: 1.2fr 1fr;
    }

    .u-cols-1_4fr-1fr {
        grid-template-columns: 1.4fr 1fr;
    }

    .u-cols-1fr {
        grid-template-columns: 1fr;
    }

    .u-cols-1fr-1fr {
        grid-template-columns: 1fr 1fr;
    }

    .u-cols-1fr-1fr-1fr {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .u-cols-1fr-2fr {
        grid-template-columns: 1fr 2fr;
    }

    .u-cols-1fr-340px {
        grid-template-columns: 1fr 340px;
    }

    .u-cols-2fr-1fr {
        grid-template-columns: 2fr 1fr;
    }

    .u-cols-2fr-3fr-1_5fr-auto {
        grid-template-columns: 2fr 3fr 1.5fr auto;
    }

    .u-cols-max-content-1fr {
        grid-template-columns: max-content 1fr;
    }

    .u-cols-repeat-2-1fr {
        grid-template-columns: repeat(2, 1fr);
    }

    .u-cols-repeat-3-1fr {
        grid-template-columns: repeat(3, 1fr);
    }

    .u-cols-repeat-7-1fr {
        grid-template-columns: repeat(7, 1fr);
    }

    .u-cols-repeat-auto-fill-minmax-280px-1fr {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }

    .u-cols-repeat-auto-fill-minmax-320px-1fr {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }

    .u-cols-repeat-auto-fit-minmax-130px-1fr {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    }

    .u-cols-repeat-auto-fit-minmax-140px-1fr {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

    .u-cols-repeat-auto-fit-minmax-150px-1fr {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .u-cols-repeat-auto-fit-minmax-160px-1fr {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }

    .u-cols-repeat-auto-fit-minmax-180px-1fr {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .u-cols-repeat-auto-fit-minmax-190px-1fr {
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    }

    .u-cols-repeat-auto-fit-minmax-200px-1fr {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .u-cols-repeat-auto-fit-minmax-220px-1fr {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .u-cols-repeat-auto-fit-minmax-240px-1fr {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    .u-cols-repeat-auto-fit-minmax-250px-1fr {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .u-cols-repeat-auto-fit-minmax-28pct-1fr {
        grid-template-columns: repeat(auto-fit, minmax(28%, 1fr));
    }

    .u-cols-repeat-auto-fit-minmax-300px-1fr {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .u-cols-repeat-auto-fit-minmax-400px-1fr {
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    }

    .u-h-100dvh {
        height: 100dvh;
    }

    .u-h-100pct {
        height: 100%;
    }

    .u-h-100px {
        height: 100px;
    }

    .u-h-100vh {
        height: 100vh;
    }

    .u-h-14px {
        height: 14px;
    }

    .u-h-15px {
        height: 15px;
    }

    .u-h-16px {
        height: 16px;
    }

    .u-h-180px {
        height: 180px;
    }

    .u-h-18px {
        height: 18px;
    }

    .u-h-200px {
        height: 200px;
    }

    .u-h-20px {
        height: 20px;
    }

    .u-h-240px {
        height: 240px;
    }

    .u-h-24px {
        height: 24px;
    }

    .u-h-250px {
        height: 250px;
    }

    .u-h-28px {
        height: 28px;
    }

    .u-h-300px {
        height: 300px;
    }

    .u-h-30px {
        height: 30px;
    }

    .u-h-32px {
        height: 32px;
    }

    .u-h-34px {
        height: 34px;
    }

    .u-h-36px {
        height: 36px;
    }

    .u-h-38px {
        height: 38px;
    }

    .u-h-40px {
        height: 40px;
    }

    .u-h-42px {
        height: 42px;
    }

    .u-h-43px {
        height: 43px;
    }

    .u-h-44px {
        height: 44px;
    }

    .u-h-45px {
        height: 45px;
    }

    .u-h-48px {
        height: 48px;
    }

    .u-h-50px {
        height: 50px;
    }

    .u-h-50vh {
        height: 50vh;
    }

    .u-h-55px {
        height: 55px;
    }

    .u-h-56px {
        height: 56px;
    }

    .u-h-600px {
        height: 600px;
    }

    .u-h-75px {
        height: 75px;
    }

    .u-h-80px {
        height: 80px;
    }

    .u-h-80vh {
        height: 80vh;
    }

    .u-h-80vmin {
        height: 80vmin;
    }

    .u-h-8px {
        height: 8px;
    }

    .u-h-90vh {
        height: 90vh;
    }

    .u-h-auto {
        height: auto;
    }

    .u-h-calc-100vh-280px {
        height: calc(100vh - 280px);
    }

    .u-h-fit-content {
        height: fit-content;
    }

    .u-inset-inline-end-10px {
        inset-inline-end: 10px;
    }

    .u-inset-inline-end-15px {
        inset-inline-end: 15px;
    }

    .u-jc-center {
        justify-content: center;
    }

    .u-jc-flex-end {
        justify-content: flex-end;
    }

    .u-jc-flex-start {
        justify-content: flex-start;
    }

    .u-jc-space-between {
        justify-content: space-between;
    }

    .u-left-0 {
        left: 0;
    }

    .u-left-20px {
        left: 20px;
    }

    .u-ls-0_02em {
        letter-spacing: -0.02em;
    }

    .u-ls-0_2px {
        letter-spacing: 0.2px;
    }

    .u-ls-0_5px {
        letter-spacing: 0.5px;
    }

    .u-ls-10px {
        letter-spacing: 10px;
    }

    .u-ls-1px {
        letter-spacing: 1px;
    }

    .u-ls-2px {
        letter-spacing: 2px;
    }

    .u-ls-4px {
        letter-spacing: 4px;
    }

    .u-ls-5px {
        letter-spacing: 5px;
    }

    .u-ls-normal {
        letter-spacing: normal;
    }

    .u-lh-1 {
        line-height: 1;
    }

    .u-lh-1_2 {
        line-height: 1.2;
    }

    .u-lh-1_3 {
        line-height: 1.3;
    }

    .u-lh-1_4 {
        line-height: 1.4;
    }

    .u-lh-1_5 {
        line-height: 1.5;
    }

    .u-lh-1_6 {
        line-height: 1.6;
    }

    .u-lh-24px {
        line-height: 24px;
    }

    .u-lh-42px {
        line-height: 42px;
    }

    .u-mb-0 {
        margin-bottom: 0;
    }

    .u-mb-10px {
        margin-bottom: 10px;
    }

    .u-mb-12px {
        margin-bottom: 12px;
    }

    .u-mb-14px {
        margin-bottom: 14px;
    }

    .u-mb-15px {
        margin-bottom: 15px;
    }

    .u-mb-16px {
        margin-bottom: 16px;
    }

    .u-mb-18px {
        margin-bottom: 18px;
    }

    .u-mb-20px {
        margin-bottom: 20px;
    }

    .u-mb-24px {
        margin-bottom: 24px;
    }

    .u-mb-25px {
        margin-bottom: 25px;
    }

    .u-mb-2px {
        margin-bottom: 2px;
    }

    .u-mb-30px {
        margin-bottom: 30px;
    }

    .u-mb-3px {
        margin-bottom: 3px;
    }

    .u-mb-4px {
        margin-bottom: 4px;
    }

    .u-mb-5px {
        margin-bottom: 5px;
    }

    .u-mb-6px {
        margin-bottom: 6px;
    }

    .u-mb-8px {
        margin-bottom: 8px;
    }

    .u-me-10px {
        margin-inline-end: 10px;
    }

    .u-me-4px {
        margin-inline-end: 4px;
    }

    .u-me-5px {
        margin-inline-end: 5px;
    }

    .u-me-6px {
        margin-inline-end: 6px;
    }

    .u-me-8px {
        margin-inline-end: 8px;
    }

    .u-ms-10px {
        margin-inline-start: 10px;
    }

    .u-ms-4px {
        margin-inline-start: 4px;
    }

    .u-ms-5px {
        margin-inline-start: 5px;
    }

    .u-ms-6px {
        margin-inline-start: 6px;
    }

    .u-ms-8px {
        margin-inline-start: 8px;
    }

    .u-ms-auto {
        margin-inline-start: auto;
    }

    .u-ml-10px {
        margin-left: 10px;
    }

    .u-ml-5px {
        margin-left: 5px;
    }

    .u-mr-10px {
        margin-right: 10px;
    }

    .u-mr-5px {
        margin-right: 5px;
    }

    .u-mt-0 {
        margin-top: 0;
    }

    .u-mt-10px {
        margin-top: 10px;
    }

    .u-mt-10vh {
        margin-top: 10vh;
    }

    .u-mt-12px {
        margin-top: 12px;
    }

    .u-mt-14px {
        margin-top: 14px;
    }

    .u-mt-15px {
        margin-top: 15px;
    }

    .u-mt-15vh {
        margin-top: 15vh;
    }

    .u-mt-16px {
        margin-top: 16px;
    }

    .u-mt-18px {
        margin-top: 18px;
    }

    .u-mt-20px {
        margin-top: 20px;
    }

    .u-mt-25px {
        margin-top: 25px;
    }

    .u-mt-2px {
        margin-top: 2px;
    }

    .u-mt-30px {
        margin-top: 30px;
    }

    .u-mt-3px {
        margin-top: 3px;
    }

    .u-mt-4px {
        margin-top: 4px;
    }

    .u-mt-4px-2 {
        margin-top: -4px;
    }

    .u-mt-5px {
        margin-top: 5px;
    }

    .u-mt-5vh {
        margin-top: 5vh;
    }

    .u-mt-6px {
        margin-top: 6px;
    }

    .u-mt-8px {
        margin-top: 8px;
    }

    .u-mt-8px-2 {
        margin-top: -8px;
    }

    .u-mt-8vh {
        margin-top: 8vh;
    }

    .u-mt-auto {
        margin-top: auto;
    }

    .u-maxh-100px {
        max-height: 100px;
    }

    .u-maxh-120px {
        max-height: 120px;
    }

    .u-maxh-150px {
        max-height: 150px;
    }

    .u-maxh-160px {
        max-height: 160px;
    }

    .u-maxh-180px {
        max-height: 180px;
    }

    .u-maxh-220px {
        max-height: 220px;
    }

    .u-maxh-240px {
        max-height: 240px;
    }

    .u-maxh-250px {
        max-height: 250px;
    }

    .u-maxh-25vh {
        max-height: 25vh;
    }

    .u-maxh-280px {
        max-height: 280px;
    }

    .u-maxh-300px {
        max-height: 300px;
    }

    .u-maxh-320px {
        max-height: 320px;
    }

    .u-maxh-350px {
        max-height: 350px;
    }

    .u-maxh-400px {
        max-height: 400px;
    }

    .u-maxh-40vh {
        max-height: 40vh;
    }

    .u-maxh-500px {
        max-height: 500px;
    }

    .u-maxh-50vh {
        max-height: 50vh;
    }

    .u-maxh-52vh {
        max-height: 52vh;
    }

    .u-maxh-600px {
        max-height: 600px;
    }

    .u-maxh-60vh {
        max-height: 60vh;
    }

    .u-maxh-620px {
        max-height: 620px;
    }

    .u-maxh-65vh {
        max-height: 65vh;
    }

    .u-maxh-80vh {
        max-height: 80vh;
    }

    .u-maxh-85vh {
        max-height: 85vh;
    }

    .u-maxh-88vh {
        max-height: 88vh;
    }

    .u-maxh-90vh {
        max-height: 90vh;
    }

    .u-maxh-92vh {
        max-height: 92vh;
    }

    .u-maxw-1000px {
        max-width: 1000px;
    }

    .u-maxw-100pct {
        max-width: 100%;
    }

    .u-maxw-1200px {
        max-width: 1200px;
    }

    .u-maxw-140px {
        max-width: 140px;
    }

    .u-maxw-1800px {
        max-width: 1800px;
    }

    .u-maxw-250px {
        max-width: 250px;
    }

    .u-maxw-280px {
        max-width: 280px;
    }

    .u-maxw-300px {
        max-width: 300px;
    }

    .u-maxw-320px {
        max-width: 320px;
    }

    .u-maxw-340px {
        max-width: 340px;
    }

    .u-maxw-350px {
        max-width: 350px;
    }

    .u-maxw-360px {
        max-width: 360px;
    }

    .u-maxw-380px {
        max-width: 380px;
    }

    .u-maxw-400px {
        max-width: 400px;
    }

    .u-maxw-440px {
        max-width: 440px;
    }

    .u-maxw-450px {
        max-width: 450px;
    }

    .u-maxw-460px {
        max-width: 460px;
    }

    .u-maxw-480px {
        max-width: 480px;
    }

    .u-maxw-500px {
        max-width: 500px;
    }

    .u-maxw-540px {
        max-width: 540px;
    }

    .u-maxw-550px {
        max-width: 550px;
    }

    .u-maxw-580px {
        max-width: 580px;
    }

    .u-maxw-600px {
        max-width: 600px;
    }

    .u-maxw-60px {
        max-width: 60px;
    }

    .u-maxw-650px {
        max-width: 650px;
    }

    .u-maxw-680px {
        max-width: 680px;
    }

    .u-maxw-750px {
        max-width: 750px;
    }

    .u-maxw-760px {
        max-width: 760px;
    }

    .u-maxw-780px {
        max-width: 780px;
    }

    .u-maxw-800px {
        max-width: 800px;
    }

    .u-maxw-80pct {
        max-width: 80%;
    }

    .u-maxw-850px {
        max-width: 850px;
    }

    .u-maxw-85pct {
        max-width: 85%;
    }

    .u-maxw-880px {
        max-width: 880px;
    }

    .u-maxw-900px {
        max-width: 900px;
    }

    .u-maxw-90pct {
        max-width: 90%;
    }

    .u-maxw-95pct {
        max-width: 95%;
    }

    .u-minh-100dvh {
        min-height: 100dvh;
    }

    .u-minh-100pct {
        min-height: 100%;
    }

    .u-minh-100vh {
        min-height: 100vh;
    }

    .u-minh-120px {
        min-height: 120px;
    }

    .u-minh-140px {
        min-height: 140px;
    }

    .u-minh-330px {
        min-height: 330px;
    }

    .u-minh-38px {
        min-height: 38px;
    }

    .u-minh-42px {
        min-height: 42px;
    }

    .u-minh-450px {
        min-height: 450px;
    }

    .u-minh-50px {
        min-height: 50px;
    }

    .u-minh-52px {
        min-height: 52px;
    }

    .u-minh-580px {
        min-height: 580px;
    }

    .u-minh-95px {
        min-height: 95px;
    }

    .u-minw-0 {
        min-width: 0;
    }

    .u-minw-100pct {
        min-width: 100%;
    }

    .u-minw-110px {
        min-width: 110px;
    }

    .u-minw-120px {
        min-width: 120px;
    }

    .u-minw-130px {
        min-width: 130px;
    }

    .u-minw-1350px {
        min-width: 1350px;
    }

    .u-minw-140px {
        min-width: 140px;
    }

    .u-minw-150px {
        min-width: 150px;
    }

    .u-minw-155px {
        min-width: 155px;
    }

    .u-minw-160px {
        min-width: 160px;
    }

    .u-minw-170px {
        min-width: 170px;
    }

    .u-minw-180px {
        min-width: 180px;
    }

    .u-minw-200px {
        min-width: 200px;
    }

    .u-minw-210px {
        min-width: 210px;
    }

    .u-minw-220px {
        min-width: 220px;
    }

    .u-minw-230px {
        min-width: 230px;
    }

    .u-minw-240px {
        min-width: 240px;
    }

    .u-minw-250px {
        min-width: 250px;
    }

    .u-minw-260px {
        min-width: 260px;
    }

    .u-minw-280px {
        min-width: 280px;
    }

    .u-minw-46px {
        min-width: 46px;
    }

    .u-minw-50pct {
        min-width: 50%;
    }

    .u-minw-600px {
        min-width: 600px;
    }

    .u-minw-650px {
        min-width: 650px;
    }

    .u-minw-70px {
        min-width: 70px;
    }

    .u-minw-750px {
        min-width: 750px;
    }

    .u-minw-800px {
        min-width: 800px;
    }

    .u-minw-900px {
        min-width: 900px;
    }

    .u-minw-90px {
        min-width: 90px;
    }

    .u-of-contain {
        object-fit: contain;
    }

    .u-of-cover {
        object-fit: cover;
    }

    .u-object-position-50pct-25pct {
        object-position: 50% 25%;
    }

    .u-op-0_35 {
        opacity: 0.35;
    }

    .u-op-0_5 {
        opacity: 0.5;
    }

    .u-op-0_6 {
        opacity: 0.6;
    }

    .u-op-0_8 {
        opacity: 0.8;
    }

    .u-op-0_9 {
        opacity: 0.9;
    }

    .u-ow-anywhere {
        overflow-wrap: anywhere;
    }

    .u-ovx-auto {
        overflow-x: auto;
    }

    .u-ovy-auto {
        overflow-y: auto;
    }

    .u-pb-10px {
        padding-bottom: 10px;
    }

    .u-pb-12px {
        padding-bottom: 12px;
    }

    .u-pb-15px {
        padding-bottom: 15px;
    }

    .u-pb-4px {
        padding-bottom: 4px;
    }

    .u-pb-5px {
        padding-bottom: 5px;
    }

    .u-pb-6px {
        padding-bottom: 6px;
    }

    .u-pb-8px {
        padding-bottom: 8px;
    }

    .u-pb-calc-76px-env-safe-area-inset-bottom-0px {
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }

    .u-pe-30px {
        padding-inline-end: 30px;
    }

    .u-pe-40px {
        padding-inline-end: 40px;
    }

    .u-ps-16px {
        padding-inline-start: 16px;
    }

    .u-ps-18px {
        padding-inline-start: 18px;
    }

    .u-ps-20px {
        padding-inline-start: 20px;
    }

    .u-pr-10px {
        padding-right: 10px;
    }

    .u-pr-5px {
        padding-right: 5px;
    }

    .u-pt-10px {
        padding-top: 10px;
    }

    .u-pt-12px {
        padding-top: 12px;
    }

    .u-pt-14px {
        padding-top: 14px;
    }

    .u-pt-15px {
        padding-top: 15px;
    }

    .u-pt-16px {
        padding-top: 16px;
    }

    .u-pt-20px {
        padding-top: 20px;
    }

    .u-pt-2px {
        padding-top: 2px;
    }

    .u-pt-4px {
        padding-top: 4px;
    }

    .u-pt-5px {
        padding-top: 5px;
    }

    .u-pev-none {
        pointer-events: none;
    }

    .u-pos-absolute {
        position: absolute;
    }

    .u-pos-fixed {
        position: fixed;
    }

    .u-pos-relative {
        position: relative;
    }

    .u-pos-sticky {
        position: sticky;
    }

    .u-resize-vertical {
        resize: vertical;
    }

    .u-right-0 {
        right: 0;
    }

    .u-right-20px {
        right: 20px;
    }

    .u-ta-center {
        text-align: center;
    }

    .u-ta-end {
        text-align: end;
    }

    .u-ta-left {
        text-align: left;
    }

    .u-ta-right {
        text-align: right;
    }

    .u-ta-start {
        text-align: start;
    }

    .u-td-none {
        text-decoration: none;
    }

    .u-td-underline {
        text-decoration: underline;
    }

    .u-tov-ellipsis {
        text-overflow: ellipsis;
    }

    .u-text-shadow-1px-1px-2px-rgba-0-0-0-0_05 {
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
    }

    .u-text-shadow-1px-1px-2px-rgba-0-0-0-0_2 {
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    }

    .u-text-shadow-1px-1px-3px-rgba-0-0-0-0_2 {
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    }

    .u-text-shadow-2px-2px-4px-rgba-0-0-0-0_2 {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    }

    .u-text-shadow-2px-2px-4px-rgba-0-0-0-0_3 {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }

    .u-text-shadow-2px-2px-5px-rgba-0-0-0-0_1 {
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    }

    .u-tt-uppercase {
        text-transform: uppercase;
    }

    .u-top-0 {
        top: 0;
    }

    .u-top-100pct {
        top: 100%;
    }

    .u-top-10px {
        top: -10px;
    }

    .u-top-15px {
        top: 15px;
    }

    .u-top-20px {
        top: 20px;
    }

    .u-top-50pct {
        top: 50%;
    }

    .u-top-8px {
        top: -8px;
    }

    .u-top-calc-100pct-4px {
        top: calc(100% + 4px);
    }

    .u-tf-translatey-50pct {
        transform: translateY(-50%);
    }

    .u-transform-origin-0-0 {
        transform-origin: 0 0;
    }

    .u-us-none {
        user-select: none;
    }

    .u-va-middle {
        vertical-align: middle;
    }

    .u-ws-normal {
        white-space: normal;
    }

    .u-ws-nowrap {
        white-space: nowrap;
    }

    .u-ws-pre-wrap {
        white-space: pre-wrap;
    }

    .u-w-100pct {
        width: 100%;
    }

    .u-w-100px {
        width: 100px;
    }

    .u-w-110px {
        width: 110px;
    }

    .u-w-120px {
        width: 120px;
    }

    .u-w-12pct {
        width: 12%;
    }

    .u-w-130px {
        width: 130px;
    }

    .u-w-140px {
        width: 140px;
    }

    .u-w-14px {
        width: 14px;
    }

    .u-w-150px {
        width: 150px;
    }

    .u-w-15px {
        width: 15px;
    }

    .u-w-160px {
        width: 160px;
    }

    .u-w-165px {
        width: 165px;
    }

    .u-w-16pct {
        width: 16%;
    }

    .u-w-16px {
        width: 16px;
    }

    .u-w-170px {
        width: 170px;
    }

    .u-w-180px {
        width: 180px;
    }

    .u-w-18px {
        width: 18px;
    }

    .u-w-200px {
        width: 200px;
    }

    .u-w-20px {
        width: 20px;
    }

    .u-w-22pct {
        width: 22%;
    }

    .u-w-240px {
        width: 240px;
    }

    .u-w-24pct {
        width: 24%;
    }

    .u-w-24px {
        width: 24px;
    }

    .u-w-25pct {
        width: 25%;
    }

    .u-w-26pct {
        width: 26%;
    }

    .u-w-28px {
        width: 28px;
    }

    .u-w-30pct {
        width: 30%;
    }

    .u-w-32px {
        width: 32px;
    }

    .u-w-34px {
        width: 34px;
    }

    .u-w-35pct {
        width: 35%;
    }

    .u-w-36px {
        width: 36px;
    }

    .u-w-37pct {
        width: 37%;
    }

    .u-w-38pct {
        width: 38%;
    }

    .u-w-38px {
        width: 38px;
    }

    .u-w-40px {
        width: 40px;
    }

    .u-w-42px {
        width: 42px;
    }

    .u-w-44px {
        width: 44px;
    }

    .u-w-50px {
        width: 50px;
    }

    .u-w-55px {
        width: 55px;
    }

    .u-w-60px {
        width: 60px;
    }

    .u-w-70px {
        width: 70px;
    }

    .u-w-80px {
        width: 80px;
    }

    .u-w-80vmin {
        width: 80vmin;
    }

    .u-w-8px {
        width: 8px;
    }

    .u-w-90pct {
        width: 90%;
    }

    .u-w-90px {
        width: 90px;
    }

    .u-w-92pct {
        width: 92%;
    }

    .u-w-95pct {
        width: 95%;
    }

    .u-w-auto {
        width: auto;
    }

    .u-w-fit-content {
        width: fit-content;
    }

    .u-wb-break-all {
        word-break: break-all;
    }

    .u-wb-break-word {
        word-break: break-word;
    }

    .u-ww-break-word {
        word-wrap: break-word;
    }

    .u-z-var-z-high7-7000 {
        z-index: var(--z-high7, 7000);
    }

    .u-z-var-z-high9-9999 {
        z-index: var(--z-high9, 9999);
    }

    .u-z-var-z-low-1 {
        z-index: var(--z-low, 1);
    }

    .u-z-var-z-low-2 {
        z-index: var(--z-low, 2);
    }

    .u-z-var-z-sub-2 {
        z-index: var(--z-sub, 2);
    }

    .u-z-z-base {
        z-index: var(--z-base);
    }

    .u-z-z-base1 {
        z-index: var(--z-base1);
    }

    .u-z-z-base2 {
        z-index: var(--z-base2);
    }

    .u-z-z-base3 {
        z-index: var(--z-base3);
    }

    .u-z-z-base4 {
        z-index: var(--z-base4);
    }

    .u-z-z-high7 {
        z-index: var(--z-high7);
    }

    .u-z-z-low {
        z-index: var(--z-low);
    }

    .u-z-z-low1 {
        z-index: var(--z-low1);
    }

    .u-z-z-low2 {
        z-index: var(--z-low2);
    }

    .u-z-z-low2-5 {
        z-index: var(--z-low2-5);
    }

    .u-z-z-low3 {
        z-index: var(--z-low3);
    }

    .u-z-z-low3-5 {
        z-index: var(--z-low3-5);
    }

    .u-z-z-low3-6 {
        z-index: var(--z-low3-6);
    }

    .u-z-z-max {
        z-index: var(--z-max);
    }

    .u-z-z-mid4 {
        z-index: var(--z-mid4);
    }

    .u-z-z-mid5 {
        z-index: var(--z-mid5);
    }

    .u-z-z-mid5-5 {
        z-index: var(--z-mid5-5);
    }

    .u-z-z-mid6 {
        z-index: var(--z-mid6);
    }

    .u-z-z-mid6-5 {
        z-index: var(--z-mid6-5);
    }

    .u-z-z-top {
        z-index: var(--z-top);
    }
}

@layer overrides {

    /* Workspace picker (core/ws-picker.js): one look for every portal, coloured by the page
       tokens so it follows the light or dark theme */
    .ws-picker-screen {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        min-height: 100dvh;
        padding: 24px 16px;
        overflow-y: auto;
        background: var(--bg-body);
    }

    .ws-picker {
        box-sizing: border-box;
        width: 100%;
        max-width: 460px;
        margin: auto;
        padding: 32px 28px 28px;
        border: 1px solid var(--border-color);
        border-radius: 18px;
        background: var(--bg-card);
        box-shadow: var(--shadow-md);
        color: var(--text-main);
        text-align: center;
    }

    .ws-picker__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        margin-bottom: 14px;
        border-radius: 16px;
        background: color-mix(in srgb, var(--theme-primary) 14%, transparent);
        font-size: 1.6rem;
        line-height: 1;
    }

    .ws-picker__title {
        margin: 0 0 6px;
        color: var(--text-main);
        font-size: 1.35rem;
        font-weight: 700;
        line-height: 1.3;
    }

    .ws-picker__desc {
        margin: 0 0 22px;
        color: var(--text-muted);
        font-size: .92rem;
        line-height: 1.5;
    }

    .ws-picker__list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        text-align: start;
    }

    .ws-picker__item {
        display: flex;
        align-items: center;
        gap: 14px;
        box-sizing: border-box;
        width: 100%;
        min-height: 64px;
        margin: 0;
        padding: 10px 14px;
        border: 1px solid var(--border-color);
        border-radius: 12px;
        background: var(--bg-card);
        box-shadow: var(--shadow-sm);
        color: var(--text-main);
        font: inherit;
        text-align: start;
        cursor: pointer;
        transition: border-color .15s, background-color .15s, box-shadow .15s, transform .15s;
    }

    .ws-picker__item:hover:not(:disabled) {
        border-color: var(--theme-primary);
        background: color-mix(in srgb, var(--theme-primary) 6%, var(--bg-card));
        box-shadow: var(--shadow-md);
    }

    .ws-picker__item:focus-visible {
        outline: 2px solid var(--theme-primary);
        outline-offset: 2px;
    }

    .ws-picker__item:disabled {
        opacity: .55;
        cursor: default;
    }

    .ws-picker__item.is-busy {
        opacity: 1;
        border-color: var(--theme-primary);
    }

    .ws-picker__item.is-current {
        border-color: var(--theme-primary);
    }

    .ws-picker__logo-box {
        display: flex;
        flex: none;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 44px;
        height: 44px;
        padding: 4px;
        border-radius: 10px;
        background: var(--bg-panel);
    }

    .ws-picker__logo {
        display: block;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    [data-theme="dark"] .ws-picker__logo {
        filter: drop-shadow(0 0 3px rgb(255 255 255 / .75));
    }

    .ws-picker__name {
        flex: 1;
        min-width: 0;
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .ws-picker__chevron {
        flex: none;
        width: 8px;
        height: 8px;
        border-top: 2px solid var(--text-muted);
        border-inline-end: 2px solid var(--text-muted);
        transform: rotate(45deg);
    }

    [dir="rtl"] .ws-picker__chevron {
        transform: rotate(-45deg);
    }

    .ws-picker__badge {
        flex: none;
        padding: 3px 10px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--theme-primary) 18%, transparent);
        color: color-mix(in srgb, var(--theme-primary) 55%, var(--text-main));
        font-size: .75rem;
        font-weight: 700;
    }

    .ws-picker__message {
        margin: 6px 0;
        color: var(--text-muted);
        text-align: center;
    }

    .ws-picker__message--warn,
    .ws-picker__message--error {
        padding: 14px;
        border: 1px dashed var(--theme-danger);
        border-radius: 12px;
        color: var(--theme-danger);
        font-weight: 600;
    }

    .ws-picker__actions {
        display: flex;
        gap: 10px;
        margin-top: 20px;
    }

    .ws-picker__action {
        flex: 1;
        min-height: 44px;
        margin: 0;
        padding: 0 16px;
        border: 1px solid var(--border-color);
        border-radius: 12px;
        background: transparent;
        color: var(--text-main);
        font: inherit;
        font-weight: 600;
        cursor: pointer;
    }

    .ws-picker__action:hover {
        background: var(--bg-panel);
    }

    .ws-picker__action--danger {
        color: var(--theme-danger);
    }

    @media (max-width: 639.98px) {
        .ws-picker-screen {
            justify-content: flex-start;
            padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
        }

        .ws-picker {
            padding: 24px 18px 20px;
        }

        .ws-picker__item {
            min-height: 60px;
        }
    }

    /* ---------- 19. UI Dialogs & Toasts (core/ui-dialogs.js) ---------- */
    .ui-dialog-backdrop {
        position: fixed;
        inset: 0;
        background-color: color-mix(in srgb, #0b0c10 55%, transparent);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: var(--z-dialog, 99999);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    .ui-dialog-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    .ui-dialog-card {
        background: var(--bg-card);
        color: var(--text-main);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md, 20px);
        box-shadow: var(--shadow-lg);
        width: 100%;
        max-width: 460px;
        padding: 24px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        transform: scale(0.95);
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
        box-sizing: border-box;
    }

    .ui-dialog-backdrop.is-open .ui-dialog-card {
        transform: scale(1);
    }

    .ui-dialog-header {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .ui-dialog-icon {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        flex-shrink: 0;
    }

    .ui-dialog-icon.is-info {
        background: color-mix(in srgb, var(--theme-info, #0891b2) 15%, transparent);
        color: var(--theme-info, #0891b2);
    }

    .ui-dialog-icon.is-success {
        background: color-mix(in srgb, var(--theme-success, #16a34a) 15%, transparent);
        color: var(--theme-success, #16a34a);
    }

    .ui-dialog-icon.is-warning {
        background: color-mix(in srgb, var(--theme-warning, #f59e0b) 15%, transparent);
        color: var(--theme-warning, #f59e0b);
    }

    .ui-dialog-icon.is-error,
    .ui-dialog-icon.is-danger {
        background: color-mix(in srgb, var(--theme-danger, #dc2626) 15%, transparent);
        color: var(--theme-danger, #dc2626);
    }

    .ui-dialog-title {
        margin: 0;
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--text-main);
        line-height: 1.3;
    }

    .ui-dialog-body {
        font-size: 0.95rem;
        color: var(--text-muted);
        line-height: 1.5;
        white-space: pre-line;
        word-break: break-word;
        margin: 0;
    }

    .ui-dialog-input {
        width: 100%;
        box-sizing: border-box;
        margin-top: 4px;
    }

    .ui-dialog-footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 8px;
    }

    [dir="rtl"] .ui-dialog-footer {
        flex-direction: row-reverse;
    }

    .ui-dialog-btn-danger {
        background: var(--theme-danger, #dc2626) !important;
        border-color: var(--theme-danger, #dc2626) !important;
        color: #ffffff !important;
    }

    .ui-dialog-btn-danger:hover {
        box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--theme-danger, #dc2626) 70%, transparent);
    }

    @media (max-width: 639px) {
        .ui-dialog-backdrop {
            align-items: flex-end;
            padding: 0;
        }

        .ui-dialog-card {
            max-width: 100%;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
            transform: translateY(100%);
        }

        .ui-dialog-backdrop.is-open .ui-dialog-card {
            transform: translateY(0);
        }

        .ui-dialog-footer {
            flex-direction: column-reverse;
            gap: 8px;
        }

        [dir="rtl"] .ui-dialog-footer {
            flex-direction: column-reverse;
        }

        .ui-dialog-footer .btn {
            width: 100%;
            min-height: 48px;
        }
    }

    /* Toast Notifications */
    .ui-toast-container {
        position: fixed;
        bottom: 24px;
        inset-inline-end: 24px;
        z-index: var(--z-toast, 100000);
        display: flex;
        flex-direction: column;
        gap: 8px;
        pointer-events: none;
        max-width: calc(100vw - 32px);
    }

    .ui-toast {
        pointer-events: auto;
        background: var(--bg-card);
        color: var(--text-main);
        border: 1px solid var(--border-color);
        border-inline-start: 4px solid var(--theme-primary);
        border-radius: var(--radius-sm, 14px);
        box-shadow: var(--shadow-md);
        padding: 12px 18px;
        font-size: 0.9rem;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        transition: opacity 0.25s ease, transform 0.25s ease;
        animation: uiToastSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        word-break: break-word;
    }

    .ui-toast.is-success {
        border-inline-start-color: var(--theme-success, #16a34a);
    }

    .ui-toast.is-error,
    .ui-toast.is-danger {
        border-inline-start-color: var(--theme-danger, #dc2626);
    }

    .ui-toast.is-warning {
        border-inline-start-color: var(--theme-warning, #f59e0b);
    }

    .ui-toast.is-info {
        border-inline-start-color: var(--theme-info, #0891b2);
    }

    .ui-toast-icon {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .ui-toast.is-success .ui-toast-icon {
        color: var(--theme-success, #16a34a);
    }

    .ui-toast.is-error .ui-toast-icon,
    .ui-toast.is-danger .ui-toast-icon {
        color: var(--theme-danger, #dc2626);
    }

    .ui-toast.is-warning .ui-toast-icon {
        color: var(--theme-warning, #f59e0b);
    }

    .ui-toast.is-info .ui-toast-icon {
        color: var(--theme-info, #0891b2);
    }

    @keyframes uiToastSlideIn {
        from {
            opacity: 0;
            transform: translateY(16px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ---------- Native Controls & Flatpickr Dark Mode Parity ---------- */
    select option,
    select optgroup {
        background-color: var(--bg-card);
        color: var(--text-main);
    }

    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"] {
        color-scheme: light;
    }

    [data-theme="dark"] input[type="date"],
    [data-theme="dark"] input[type="time"],
    [data-theme="dark"] input[type="datetime-local"],
    [data-theme="dark"] input[type="month"],
    [data-theme="dark"] input[type="week"] {
        color-scheme: dark;
    }

    ::-webkit-calendar-picker-indicator {
        cursor: pointer;
        opacity: 0.8;
    }

    [data-theme="dark"] ::-webkit-calendar-picker-indicator {
        filter: invert(1);
        opacity: 0.9;
    }

    /* Flatpickr dark theme & RTL parity */
    [data-theme="dark"] .flatpickr-calendar {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
        color: var(--text-main);
    }

    [data-theme="dark"] .flatpickr-day {
        color: var(--text-main);
    }

    [data-theme="dark"] .flatpickr-day:hover,
    [data-theme="dark"] .flatpickr-day:focus {
        background: var(--bg-light-hover);
        border-color: var(--border-color);
    }

    [data-theme="dark"] .flatpickr-day.selected,
    [data-theme="dark"] .flatpickr-day.startRange,
    [data-theme="dark"] .flatpickr-day.endRange {
        background: var(--theme-primary) !important;
        border-color: var(--theme-primary) !important;
        color: var(--text-inverse, #ffffff) !important;
    }

    [data-theme="dark"] .flatpickr-months .flatpickr-month,
    [data-theme="dark"] .flatpickr-current-month,
    [data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
    [data-theme="dark"] span.flatpickr-weekday {
        background: transparent;
        color: var(--text-main);
        fill: var(--text-main);
    }

    [data-theme="dark"] .flatpickr-months .flatpickr-prev-month,
    [data-theme="dark"] .flatpickr-months .flatpickr-next-month {
        color: var(--text-main);
        fill: var(--text-main);
    }
}