/*
 * POSM Design System
 * Canonical visual tokens and reusable primitives for the public portal and admin area.
 * Page styles may define layout, but shared colors, spacing, type, controls and elevation
 * must come from this file. See assets/css/DESIGN_SYSTEM.md.
 */

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/InterVariable.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    color-scheme: light;

    /* Typography */
    --ds-font-ui: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont,
        "Helvetica Neue", Arial, sans-serif;
    --ds-font-mono: var(--ds-font-ui);
    --ds-font-size-xs: 0.75rem;
    --ds-font-size-sm: 0.8125rem;
    --ds-font-size-label: 0.875rem;
    --ds-font-size-body: 1rem;
    --ds-font-size-md: 1.125rem;
    --ds-font-size-lg: 1.25rem;
    --ds-font-size-xl: 1.5rem;
    --ds-font-size-title: clamp(1.625rem, 2vw, 2.25rem);
    --ds-line-tight: 1.2;
    --ds-line-body: 1.5;
    --ds-weight-medium: 500;
    --ds-weight-semibold: 600;
    --ds-weight-bold: 700;
    --ds-weight-extrabold: 800;

    /* Core palette */
    --ds-color-canvas: #edf1f4;
    --ds-color-surface: #ffffff;
    --ds-color-surface-subtle: #f7f9fb;
    --ds-color-surface-raised: #ffffff;
    --ds-color-field: #fbfcfd;
    --ds-color-field-disabled: #f1f4f6;
    --ds-color-text: #172b3d;
    --ds-color-text-muted: #607286;
    --ds-color-text-faint: #7b8c9e;
    --ds-color-border: #d7e0e7;
    --ds-color-border-strong: #c8d3dc;
    --ds-media-surface: #ffffff;
    --ds-row-hover: #f1e8cf;
    --ds-chart-grid: rgba(45, 48, 45, 0.16);
    --ds-chart-series-1: #111311;
    --ds-chart-series-2: #dda326;
    --ds-chart-series-3: #777a73;
    --ds-chart-series-4: #c8c5ba;

    /* Industrial interface palette. Alternate themes override these tokens as one unit. */
    --ds-industrial-black: #0b0d0d;
    --ds-industrial-panel: #f7f5ee;
    --ds-industrial-panel-alt: #ece9df;
    --ds-industrial-canvas: #e9e6dc;
    --ds-industrial-field: #fffef9;
    --ds-industrial-line: #2d302d;
    --ds-industrial-line-soft: #c9c6bc;
    --ds-industrial-text: #171917;
    --ds-industrial-muted: #686b65;
    --ds-industrial-header-text: #f0efe8;
    --ds-industrial-accent: #e0a424;
    --ds-industrial-accent-strong: #946304;
    --ds-industrial-success: #316b47;
    --ds-industrial-danger: #9f3934;

    /* Actions */
    --ds-color-primary: #2b76b9;
    --ds-color-primary-hover: #205f98;
    --ds-color-primary-soft: #e5effb;
    --ds-color-success: #27ae60;
    --ds-color-success-hover: #1f8f4c;
    --ds-color-warning: #c78506;
    --ds-color-danger: #de4b4b;
    --ds-color-info: #3498db;
    --ds-color-teal: #1ea58a;
    --ds-color-purple: #6a7ca0;
    --ds-color-on-accent: #ffffff;
    --ds-color-on-success: #0b0d0d;
    --ds-color-on-danger: #0b0d0d;
    --ds-industrial-on-success: #ffffff;
    --ds-industrial-on-danger: #ffffff;

    /* Semantic surfaces */
    --ds-color-success-bg: #e9f7ef;
    --ds-color-success-text: #1f8f4c;
    --ds-color-success-border: #b9e3c9;
    --ds-color-warning-bg: #fff2d7;
    --ds-color-warning-text: #8e5d0c;
    --ds-color-warning-border: #efd6a5;
    --ds-color-danger-bg: #fff0ef;
    --ds-color-danger-text: #9c302c;
    --ds-color-danger-border: #efc4c2;
    --ds-color-info-bg: #e8f1fc;
    --ds-color-info-text: #285f9e;
    --ds-color-info-border: #bfd5ee;
    --ds-color-neutral-bg: #eef3f7;

    /* Spacing rhythm: multiples of four */
    --ds-space-0: 0;
    --ds-space-1: 0.25rem;
    --ds-space-2: 0.5rem;
    --ds-space-3: 0.75rem;
    --ds-space-4: 1rem;
    --ds-space-5: 1.25rem;
    --ds-space-6: 1.5rem;
    --ds-space-8: 2rem;
    --ds-space-10: 2.5rem;
    --ds-space-12: 3rem;

    /* Shape and elevation */
    --ds-radius-sm: 0.5rem;
    --ds-radius-md: 0.625rem;
    --ds-radius-lg: 0.75rem;
    --ds-radius-xl: 0.875rem;
    --ds-radius-pill: 999px;
    --ds-shadow-soft: 0 1px 3px rgba(10, 30, 50, 0.08);
    --ds-shadow-card: 0 2px 8px rgba(10, 30, 50, 0.1);
    --ds-shadow-lift: 0 8px 24px rgba(10, 30, 50, 0.14);
    --ds-shadow-dialog: 0 24px 70px rgba(10, 20, 31, 0.28);
    --ds-focus-ring: 0 0 0 4px rgba(43, 118, 185, 0.2);

    /* Layout */
    /* One outer desktop shell for the portal and the administration area. */
    --ds-page-max-width: 70rem;
    --ds-admin-max-width: var(--ds-page-max-width);
    --ds-reading-max-width: 56.25rem;
    --ds-page-gutter: clamp(0.75rem, 2vw, 1.25rem);
    --ds-page-bottom-space: 4.5rem;
    --ds-shell-header-height: 3.75rem;
    --ds-shell-brand-width: 11.875rem;
    --ds-shell-account-width: 26rem;
    --ds-shell-mark-size: 2rem;
    --ds-mobile-nav-height: 4rem;

    /* Controls */
    --ds-control-radius: var(--ds-radius-md);
    --ds-control-height-sm: 2.25rem;
    --ds-control-height-md: 2.75rem;
    --ds-control-height-lg: 3rem;
    --ds-transition-fast: 140ms ease;
    --ds-transition-normal: 220ms ease;

    /* Layering */
    --ds-z-sticky: 120;
    --ds-z-dropdown: 700;
    --ds-z-floating: 850;
    --ds-z-suggestions: 900;
    --ds-z-notification: 1200;
    --ds-z-modal: 2000;

    /* Compatibility aliases. New styles should use --ds-* directly. */
    --font-ui: var(--ds-font-ui);
    --bg: var(--ds-color-canvas);
    --surface: var(--ds-color-surface);
    --surface-2: var(--ds-color-surface-subtle);
    --text: var(--ds-color-text);
    --muted: var(--ds-color-text-muted);
    --border: var(--ds-color-border);
    --accent: var(--ds-color-primary);
    --accent-2: var(--ds-color-primary-hover);
    --primary: var(--ds-color-primary);
    --success: var(--ds-color-success);
    --warning: var(--ds-color-warning);
    --danger: var(--ds-color-danger);
    --purple: var(--ds-color-purple);
    --teal: var(--ds-color-teal);
    --shadow: var(--ds-shadow-card);
    --radius: var(--ds-radius-md);

    --color-bg: var(--ds-color-canvas);
    --color-surface: var(--ds-color-surface-subtle);
    --color-card: var(--ds-color-surface-raised);
    --color-border: var(--ds-color-border);
    --color-text: var(--ds-color-text);
    --color-muted: var(--ds-color-text-muted);
    --color-primary: var(--ds-color-primary);
    --color-primary-strong: var(--ds-color-primary-hover);
    --color-success: var(--ds-color-success);
    --color-success-strong: var(--ds-color-success-hover);
    --color-danger: var(--ds-color-danger);
    --color-warning: var(--ds-color-warning);

    --sg-font: var(--ds-font-ui);
    --sg-bg: var(--ds-color-canvas);
    --sg-surface: var(--ds-color-surface);
    --sg-surface-2: var(--ds-color-surface-subtle);
    --sg-text: var(--ds-color-text);
    --sg-muted: var(--ds-color-text-muted);
    --sg-border: var(--ds-color-border);
    --sg-border-strong: var(--ds-color-border-strong);
    --sg-shadow: var(--ds-shadow-card);
    --sg-shadow-soft: var(--ds-shadow-soft);
    --sg-accent: var(--ds-color-primary);
    --sg-accent-2: var(--ds-color-primary-hover);
    --sg-success: var(--ds-color-success);
    --sg-danger: var(--ds-color-danger);
    --sg-warning: var(--ds-color-warning);
    --sg-info: var(--ds-color-info);
    --sg-radius-lg: var(--ds-radius-xl);
    --sg-radius-md: var(--ds-radius-md);
    --sg-field-bg: var(--ds-color-field);

    --rp-bg: var(--ds-color-canvas);
    --rp-card: var(--ds-color-surface-raised);
    --rp-text: var(--ds-color-text);
    --rp-muted: var(--ds-color-text-muted);
    --rp-border: var(--ds-color-border);
    --rp-primary: var(--ds-color-primary);
    --rp-success: var(--ds-color-success);
    --rp-danger: var(--ds-color-danger);
    --rp-warning: var(--ds-color-warning);
    --rp-shadow: var(--ds-shadow-card);
    --rp-focus: rgba(43, 118, 185, 0.2);
    --rp-input: var(--ds-color-field);
    --rp-input-focus: var(--ds-color-surface);
    --rp-input-disabled: var(--ds-color-field-disabled);
    --rp-image-bg: var(--ds-media-surface);
}

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

    --ds-color-canvas: #101310;
    --ds-color-surface: #181c18;
    --ds-color-surface-subtle: #1e231e;
    --ds-color-surface-raised: #222722;
    --ds-color-field: #121612;
    --ds-color-field-disabled: #292e29;
    --ds-color-text: #f2f0e8;
    --ds-color-text-muted: #b7b9b1;
    --ds-color-text-faint: #969a92;
    --ds-color-border: #3f453f;
    --ds-color-border-strong: #626962;
    --ds-media-surface: #f7f5ee;
    --ds-row-hover: #29271f;
    --ds-chart-grid: rgba(225, 228, 220, 0.18);
    --ds-chart-series-1: #f2f0e8;
    --ds-chart-series-2: #e0a424;
    --ds-chart-series-3: #9da199;
    --ds-chart-series-4: #646b64;

    --ds-industrial-black: #090b0a;
    --ds-industrial-panel: #181b18;
    --ds-industrial-panel-alt: #20241f;
    --ds-industrial-canvas: #111411;
    --ds-industrial-field: #121612;
    --ds-industrial-line: #686f68;
    --ds-industrial-line-soft: #3b403b;
    --ds-industrial-text: #f4f1e8;
    --ds-industrial-muted: #b8bab2;
    --ds-industrial-header-text: #f4f1e8;
    --ds-industrial-accent: #e0a424;
    --ds-industrial-accent-strong: #f0bd4a;
    --ds-industrial-success: #70bd88;
    --ds-industrial-danger: #ef857d;

    --ds-color-primary: #75afe0;
    --ds-color-primary-hover: #9ac7eb;
    --ds-color-primary-soft: #1a3041;
    --ds-color-success: #70bd88;
    --ds-color-success-hover: #8fd0a1;
    --ds-color-warning: #e0a424;
    --ds-color-danger: #ef857d;
    --ds-color-info: #75afe0;
    --ds-color-teal: #63b9aa;
    --ds-color-purple: #a99cda;
    --ds-color-on-accent: #0b0d0d;
    --ds-color-on-success: #0b0d0d;
    --ds-color-on-danger: #0b0d0d;
    --ds-industrial-on-success: #0b0d0d;
    --ds-industrial-on-danger: #0b0d0d;

    --ds-color-success-bg: #173522;
    --ds-color-success-text: #9bdbad;
    --ds-color-success-border: #39704b;
    --ds-color-warning-bg: #392b12;
    --ds-color-warning-text: #f1ca72;
    --ds-color-warning-border: #76591f;
    --ds-color-danger-bg: #3b1e1c;
    --ds-color-danger-text: #f2a49e;
    --ds-color-danger-border: #81423e;
    --ds-color-info-bg: #172e42;
    --ds-color-info-text: #9acbef;
    --ds-color-info-border: #386181;
    --ds-color-neutral-bg: #272c27;

    --ds-shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.34);
    --ds-shadow-card: 0 2px 10px rgba(0, 0, 0, 0.42);
    --ds-shadow-lift: 0 12px 30px rgba(0, 0, 0, 0.5);
    --ds-shadow-dialog: 0 24px 70px rgba(0, 0, 0, 0.62);
    --ds-focus-ring: 0 0 0 4px rgba(224, 164, 36, 0.3);
    --rp-focus: rgba(224, 164, 36, 0.3);
}

/* Stable global defaults. Deliberately low-specificity to preserve page layouts. */
:where(html) {
    font-family: var(--ds-font-ui);
    background-color: var(--ds-industrial-canvas);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

:where(body, button, input, select, textarea) {
    font-family: var(--ds-font-ui);
}

.posm-theme-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-2);
    padding: 0 var(--ds-space-3);
    color: var(--ds-color-text);
    background: var(--ds-color-surface);
    border: 1px solid var(--ds-color-border-strong);
    border-radius: var(--ds-control-radius);
    font: inherit;
    font-size: var(--ds-font-size-sm);
    font-weight: var(--ds-weight-semibold);
    line-height: var(--ds-line-tight);
    cursor: pointer;
}

.posm-theme-toggle:hover {
    background: var(--ds-color-surface-subtle);
}

.posm-theme-toggle:focus-visible {
    outline: 2px solid var(--ds-color-primary);
    outline-offset: 2px;
}

.posm-theme-toggle__icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border: 2px solid currentColor;
    border-radius: 50%;
    background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}

.posm-theme-toggle[data-theme-preference="light"] .posm-theme-toggle__icon {
    background: transparent;
    box-shadow: inset 0 0 0 3px var(--ds-color-surface);
}

.posm-theme-toggle[data-theme-preference="dark"] .posm-theme-toggle__icon {
    background: currentColor;
}

.posm-theme-toggle--compact {
    width: 44px;
    min-width: 44px;
    padding: 0;
    border-radius: 0;
}

:where(button, input, select, textarea) {
    font-size: inherit;
}

:where(button, a, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--ds-color-primary);
    outline-offset: 2px;
}

:where(button, input, select, textarea):disabled,
:where([aria-disabled="true"]) {
    cursor: not-allowed;
}

/* Reusable primitives for new and gradually migrated screens. */
.ds-page {
    width: min(100%, var(--ds-page-max-width));
    margin-inline: auto;
    padding-inline: var(--ds-page-gutter);
    padding-bottom: var(--ds-page-bottom-space);
}

.ds-page--admin {
    max-width: var(--ds-admin-max-width);
}

.ds-page--reading {
    max-width: var(--ds-reading-max-width);
}

.ds-surface {
    color: var(--ds-color-text);
    background: var(--ds-color-surface);
    border: 1px solid var(--ds-color-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-soft);
}

.ds-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-4);
}

.ds-cluster {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ds-space-2);
}

.ds-button {
    min-height: var(--ds-control-height-md);
    padding: 0 var(--ds-space-4);
    border: 1px solid transparent;
    border-radius: var(--ds-control-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-2);
    color: var(--ds-color-on-accent);
    background: var(--ds-color-primary);
    font: inherit;
    font-weight: var(--ds-weight-bold);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--ds-transition-fast),
        border-color var(--ds-transition-fast), color var(--ds-transition-fast),
        opacity var(--ds-transition-fast);
}

.ds-button:hover:not(:disabled) {
    background: var(--ds-color-primary-hover);
}

.ds-button--secondary {
    color: var(--ds-color-primary);
    background: var(--ds-color-surface);
    border-color: var(--ds-color-primary);
}

.ds-button--secondary:hover:not(:disabled) {
    color: var(--ds-color-text);
    background: var(--ds-color-primary-soft);
}

.ds-button--danger {
    color: var(--ds-color-on-danger);
    background: var(--ds-color-danger);
}

.ds-button--quiet {
    color: var(--ds-color-text-muted);
    background: var(--ds-color-surface-subtle);
    border-color: var(--ds-color-border);
}

.ds-button:disabled {
    opacity: 0.55;
}

.ds-field {
    display: grid;
    gap: var(--ds-space-2);
    min-width: 0;
}

.ds-label {
    color: var(--ds-color-text-muted);
    font-size: var(--ds-font-size-label);
    font-weight: var(--ds-weight-bold);
}

.ds-input {
    width: 100%;
    min-height: var(--ds-control-height-md);
    padding: 0 var(--ds-space-3);
    color: var(--ds-color-text);
    background: var(--ds-color-field);
    border: 1px solid var(--ds-color-border-strong);
    border-radius: var(--ds-control-radius);
}

textarea.ds-input {
    min-height: 7rem;
    padding-block: var(--ds-space-3);
    resize: vertical;
}

.ds-input:focus {
    outline: none;
    border-color: var(--ds-color-primary);
    box-shadow: var(--ds-focus-ring);
}

.ds-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0 var(--ds-space-3);
    border-radius: var(--ds-radius-pill);
    color: var(--ds-color-text-muted);
    background: var(--ds-color-neutral-bg);
    font-size: var(--ds-font-size-sm);
    font-weight: var(--ds-weight-bold);
}

.ds-badge--success {
    color: var(--ds-color-success-text);
    background: var(--ds-color-success-bg);
}

.ds-badge--warning {
    color: var(--ds-color-warning-text);
    background: var(--ds-color-warning-bg);
}

.ds-badge--danger {
    color: var(--ds-color-danger-text);
    background: var(--ds-color-danger-bg);
}

.ds-alert {
    padding: var(--ds-space-3) var(--ds-space-4);
    border: 1px solid var(--ds-color-info-border);
    border-radius: var(--ds-radius-md);
    color: var(--ds-color-info-text);
    background: var(--ds-color-info-bg);
}

.ds-alert--success {
    color: var(--ds-color-success-text);
    background: var(--ds-color-success-bg);
    border-color: var(--ds-color-success-border);
}

.ds-alert--warning {
    color: var(--ds-color-warning-text);
    background: var(--ds-color-warning-bg);
    border-color: var(--ds-color-warning-border);
}

.ds-alert--danger {
    color: var(--ds-color-danger-text);
    background: var(--ds-color-danger-bg);
    border-color: var(--ds-color-danger-border);
}

.ds-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.ds-access-denied {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: var(--ds-space-6);
    display: grid;
    place-items: center;
    color: var(--ds-color-text);
    background: var(--ds-color-canvas);
}

.ds-access-denied__panel {
    width: min(100%, 28rem);
    padding: var(--ds-space-8);
    text-align: center;
}

.ds-access-denied__code {
    margin: 0;
    color: var(--ds-color-danger);
    font-size: clamp(3rem, 14vw, 5rem);
    line-height: 1;
}

.ds-access-denied__text {
    margin: var(--ds-space-5) 0;
    color: var(--ds-color-text-muted);
}

.ds-access-denied__link {
    color: var(--ds-color-primary);
    font-weight: var(--ds-weight-bold);
}

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

/* Shared modal confirmation and autocomplete controls. */
.ds-dialog {
    width: min(calc(100% - 2rem), 32rem);
    max-width: 32rem;
    margin: auto;
    padding: 0;
    color: var(--ds-industrial-text);
    background: var(--ds-industrial-panel);
    border: 1px solid var(--ds-industrial-line);
    border-radius: 0;
    box-shadow: var(--ds-shadow-dialog);
}

.ds-dialog:not([open]) { display: none; }

.ds-dialog::backdrop {
    background: rgb(5 8 8 / 72%);
    backdrop-filter: blur(2px);
}

.ds-dialog__panel { padding: var(--ds-space-6); }

.ds-dialog__eyebrow {
    margin-bottom: var(--ds-space-2);
    color: var(--ds-industrial-accent-strong);
    font-size: var(--ds-font-size-xs);
    font-weight: var(--ds-weight-extrabold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ds-dialog__title {
    margin: 0;
    color: inherit;
    font-size: var(--ds-font-size-xl);
    line-height: var(--ds-line-tight);
}

.ds-dialog__message {
    margin: var(--ds-space-4) 0 0;
    color: var(--ds-industrial-muted);
    font-size: var(--ds-font-size-body);
    line-height: var(--ds-line-body);
    white-space: pre-line;
}

.ds-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--ds-space-3);
    margin-top: var(--ds-space-6);
    padding-top: var(--ds-space-4);
    border-top: 1px solid var(--ds-industrial-line-soft);
}

.ds-dialog__button {
    min-height: var(--ds-control-height-lg);
    padding: 0 var(--ds-space-5);
    border: 1px solid var(--ds-industrial-line);
    border-radius: 0;
    font: inherit;
    font-size: var(--ds-font-size-label);
    font-weight: var(--ds-weight-extrabold);
    cursor: pointer;
}

.ds-dialog__button--secondary {
    color: var(--ds-industrial-text);
    background: transparent;
}

.ds-dialog__button--primary {
    color: var(--ds-industrial-black);
    background: var(--ds-industrial-accent);
}

.ds-dialog__button--danger {
    color: var(--ds-industrial-on-danger);
    background: var(--ds-industrial-danger);
}

.ds-autocomplete {
    position: absolute;
    z-index: var(--ds-z-suggestions);
    top: calc(100% + 0.25rem);
    right: 0;
    left: 0;
    max-height: min(19rem, 44dvh);
    overflow-y: auto;
    padding: var(--ds-space-1);
    color: var(--ds-industrial-text);
    background: var(--ds-industrial-field);
    border: 1px solid var(--ds-industrial-line);
    box-shadow: var(--ds-shadow-lift);
}

.ds-autocomplete[hidden] { display: none; }

.ds-autocomplete__option {
    display: block;
    width: 100%;
    min-height: var(--ds-control-height-lg);
    padding: var(--ds-space-3);
    color: inherit;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--ds-industrial-line-soft);
    border-radius: 0;
    font: inherit;
    line-height: var(--ds-line-body);
    text-align: left;
    cursor: pointer;
}

.ds-autocomplete__option:last-child { border-bottom: 0; }
.ds-autocomplete__option:hover,
.ds-autocomplete__option.is-active {
    color: var(--ds-industrial-black);
    background: var(--ds-industrial-accent);
}

@media (max-width: 640px) {
    .ds-dialog { width: calc(100% - 1.5rem); }
    .ds-dialog__panel { padding: var(--ds-space-5); }
    .ds-dialog__actions { display: grid; grid-template-columns: 1fr 1fr; }
    .ds-dialog__button:only-child { grid-column: 1 / -1; }
}

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