/* ================================================================
   GLOBAL THEME TOKENS
================================================================ */

:root,
html[data-theme="light"] {
    /* Shared adaptive colors for component styles */
    --theme-primary: var(--primary, var(--mk-primary));
    --theme-primary-soft: var(--primary-soft, var(--mk-primary-soft));
    --theme-ink: var(--text-primary, var(--mk-ink));
    --theme-muted: var(--text-muted, var(--mk-muted));
    --theme-faint: var(--text-disabled, var(--mk-faint));
    --theme-surface: var(--surface, var(--mk-surface));
    --theme-canvas: var(--background, var(--mk-canvas));
    --theme-line: var(--border, var(--mk-line));
    --theme-deep: #102653;
    --theme-white: #ffffff;
    --theme-bronze: #315caa;
    --theme-warm-soft: #edf3ff;
    --theme-danger: #c12b45;
    --theme-danger-soft: #fdecef;
    --theme-info: #2459ad;
    --theme-info-soft: #eaf2ff;
    --theme-hero-highlight: #a9cbff;
    --theme-on-primary: #ffffff;

    color-scheme: light;

    /* App surfaces */
    --background: #f5f8fd;
    --app-background: #f5f8fd;
    --surface: #ffffff;
    --surface-soft: #fbfcff;
    --surface-muted: #edf3fc;
    --surface-hover: #e5eefb;
    --surface-elevated: #ffffff;

    /* Typography */
    --text-primary: #142341;
    --text-secondary: #3b4c69;
    --text-muted: #65758f;
    --text-disabled: #98a5b9;
    --text-inverse: #ffffff;

    /* Primary navy from the logo */
    --primary: #1c397d;
    --primary-hover: #162f6a;
    --primary-active: #102653;
    --primary-soft: #e8eefb;
    --primary-soft-hover: #d9e5fa;
    --primary-strong: #102653;

    /* Bright blue accent */
    --brand-accent: #3974dc;
    --brand-accent-hover: #2c62c4;
    --brand-accent-active: #1c397d;
    --brand-accent-soft: #eaf2ff;

    /* Secondary brand blue */
    --brand-secondary: #315caa;
    --brand-secondary-hover: #264d94;
    --brand-secondary-active: #1b3974;
    --brand-secondary-soft: #edf3ff;

    /* Brand gradients */
    --brand-gradient:
        linear-gradient(135deg, #102653 0%, #1c397d 45%, #3974dc 100%);

    --brand-gradient-hover:
        linear-gradient(135deg, #0c1f46 0%, #162f6a 45%, #2c62c4 100%);

    /* Identity / avatar */
    --avatar-bg: #1c397d;
    --avatar-bg-hover: #162f6a;
    --avatar-text: #ffffff;
    --avatar-border: rgba(28, 57, 125, 0.35);
    --avatar-ring: rgba(57, 116, 220, 0.24);

    /* Semantic */
    --success: #167447;
    --success-text: #105a36;
    --success-soft: #eaf8f0;
    --success-border: #91d5ad;

    --warning: #9a6108;
    --warning-text: #754607;
    --warning-soft: #fff6dc;
    --warning-border: #e8c464;

    --danger: #c12b45;
    --danger-hover: #a82239;
    --danger-text: #841b2e;
    --danger-soft: #fdecef;
    --danger-border: #eda0ad;

    /* Borders */
    --border: #d8e2f0;
    --border-strong: #b9cbe4;
    --border-focus: #3974dc;

    /* Overlay */
    --overlay: rgba(8, 21, 48, 0.68);

    /* Radius */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-xs: 0 1px 3px rgba(20, 45, 99, 0.08);
    --shadow-sm: 0 3px 10px rgba(20, 45, 99, 0.10);
    --shadow-md: 0 12px 32px rgba(20, 45, 99, 0.13);
    --shadow-lg: 0 20px 54px rgba(20, 45, 99, 0.17);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
}

html[data-theme="dark"] {
    /* Shared adaptive colors for component styles */
    --theme-primary: var(--primary, var(--mk-primary));
    --theme-primary-soft: var(--primary-soft, var(--mk-primary-soft));
    --theme-ink: var(--text-primary, var(--mk-ink));
    --theme-muted: var(--text-muted, var(--mk-muted));
    --theme-faint: var(--text-disabled, var(--mk-faint));
    --theme-surface: var(--surface, var(--mk-surface));
    --theme-canvas: var(--background, var(--mk-canvas));
    --theme-line: var(--border, var(--mk-line));
    --theme-deep: #080f20;
    --theme-white: #ffffff;
    --theme-bronze: #91b6ff;
    --theme-warm-soft: rgba(145, 182, 255, 0.15);
    --theme-danger: #f06a80;
    --theme-danger-soft: rgba(193, 43, 69, 0.18);
    --theme-info: #91b6ff;
    --theme-info-soft: rgba(145, 182, 255, 0.16);
    --theme-hero-highlight: #b9d4ff;
    --theme-on-primary: #08152e;

    color-scheme: dark;

    /* App surfaces */
    --background: #080f20;
    --app-background: #080f20;
    --surface: #101b31;
    --surface-soft: #14213a;
    --surface-muted: #1b2b49;
    --surface-hover: #25385b;
    --surface-elevated: #1a2a47;

    /* Typography */
    --text-primary: #f5f8ff;
    --text-secondary: #d2def2;
    --text-muted: #a5b6d0;
    --text-disabled: #7689a8;
    --text-inverse: #08152e;

    /* Primary blue */
    --primary: #91b6ff;
    --primary-hover: #aac8ff;
    --primary-active: #76a3f2;
    --primary-soft: rgba(145, 182, 255, 0.16);
    --primary-soft-hover: rgba(145, 182, 255, 0.24);
    --primary-strong: #c2d8ff;

    /* Bright blue accent */
    --brand-accent: #78a8ff;
    --brand-accent-hover: #9abfff;
    --brand-accent-active: #6296f0;
    --brand-accent-soft: rgba(120, 168, 255, 0.16);

    /* Secondary brand blue */
    --brand-secondary: #91b6ff;
    --brand-secondary-hover: #aac8ff;
    --brand-secondary-active: #76a3f2;
    --brand-secondary-soft: rgba(145, 182, 255, 0.15);

    /* Brand gradients */
    --brand-gradient:
        linear-gradient(135deg, #162f6a 0%, #1c397d 45%, #3974dc 100%);

    --brand-gradient-hover:
        linear-gradient(135deg, #1c397d 0%, #315caa 45%, #6296f0 100%);

    /* Identity / avatar */
    --avatar-bg: #1c397d;
    --avatar-bg-hover: #315caa;
    --avatar-text: #ffffff;
    --avatar-border: rgba(145, 182, 255, 0.45);
    --avatar-ring: rgba(145, 182, 255, 0.30);

    /* Semantic */
    --success: #56c98a;
    --success-text: #8ce4b2;
    --success-soft: rgba(42, 153, 94, 0.16);
    --success-border: rgba(86, 201, 138, 0.38);

    --warning: #e2aa45;
    --warning-text: #f2cb7d;
    --warning-soft: rgba(200, 137, 27, 0.16);
    --warning-border: rgba(226, 170, 69, 0.38);

    --danger: #f06a80;
    --danger-hover: #ff8295;
    --danger-text: #ff9cab;
    --danger-soft: rgba(193, 43, 69, 0.18);
    --danger-border: rgba(240, 106, 128, 0.40);

    /* Borders */
    --border: #30415f;
    --border-strong: #496184;
    --border-focus: #91b6ff;

    /* Overlay */
    --overlay: rgba(2, 7, 18, 0.82);

    /* Shadows */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.28);
    --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.34);
    --shadow-md: 0 14px 36px rgba(0, 0, 0, 0.42);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.52);

    --shadow-primary: 0 12px 32px rgba(57, 116, 220, 0.28);
}

/* ================================================================
   RESET
================================================================ */

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


html {
    min-height: 100%;

    scroll-behavior: smooth;

    background: var(--app-background);

    -webkit-text-size-adjust: 100%;
}


body {
    min-height: 100vh;

    margin: 0;
    padding: 0;

    color: var(--text-primary);

    background: var(--app-background);

    font-family: Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

    font-size: 16px;
    line-height: 1.5;

    transition: color var(--transition-base),
    background var(--transition-base);

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;
}


img,
svg,
video,
canvas {
    display: block;

    max-width: 100%;
}


button,
input,
select,
textarea {
    margin: 0;

    font: inherit;
}


button,
select {
    cursor: pointer;
}


input,
select,
textarea {
    color: var(--text-primary);
}


input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
}


button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
}


/* ================================================================
   TYPOGRAPHY
================================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;

    color: var(--text-primary);

    font-weight: 700;

    line-height: 1.2;

    transition: color var(--transition-base);
}


p {
    margin-top: 0;

    color: var(--text-secondary);
}


strong {
    font-weight: 700;
}


/* ================================================================
   LINKS
================================================================ */

a {
    color: var(--primary);

    text-decoration: none;

    transition: color var(--transition-fast),
    opacity var(--transition-fast);
}


a:hover {
    color: var(--primary-hover);
}


/* ================================================================
   ACCESSIBLE FOCUS
================================================================ */

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
    outline: none;

    box-shadow: 0 0 0 3px color-mix(
            in srgb,
            var(--primary) 20%,
            transparent
    );
}


/* ================================================================
   GENERIC FORM CONTROL
================================================================ */

.form-control {
    width: 100%;
    min-height: 48px;

    padding: 12px 14px;

    border: 1px solid var(--border);

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

    outline: none;

    color: var(--text-primary);

    background: var(--surface);

    box-shadow: var(--shadow-xs);

    transition: color var(--transition-base),
    background var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}


.form-control:hover {
    border-color: var(--border-strong);
}


.form-control:focus {
    border-color: var(--border-focus);

    box-shadow: 0 0 0 3px color-mix(
            in srgb,
            var(--primary) 14%,
            transparent
    );
}


.form-control:disabled {
    color: var(--text-disabled);

    background: var(--surface-soft);

    opacity: 0.75;
}


textarea.form-control {
    min-height: 120px;

    resize: vertical;
}


/* ================================================================
   FORM GROUP
================================================================ */

.form-group {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 8px;
}


.form-group label {
    color: var(--text-primary);

    font-size: 13px;
    font-weight: 600;
}


/* ================================================================
   BUTTON BASE
================================================================ */

.button {
    min-height: 46px;

    padding: 11px 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border: 0;

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

    font-size: 14px;
    font-weight: 700;

    line-height: 1;

    text-align: center;
    text-decoration: none;

    cursor: pointer;

    user-select: none;

    transition: background var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base),
    transform var(--transition-fast),
    box-shadow var(--transition-base),
    opacity var(--transition-base);
}


.button:hover {
    text-decoration: none;

    transform: translateY(-1px);
}


.button:active {
    transform: translateY(0);
}


.button:disabled,
.button[aria-disabled="true"] {
    cursor: not-allowed;

    opacity: 0.55;

    transform: none;

    box-shadow: none;
}


/* ================================================================
   PRIMARY BUTTON
================================================================ */

.button-primary {
    color: var(--text-inverse);

    background: linear-gradient(
            120deg,
            var(--primary),
            var(--primary-active)
    );

    box-shadow: 0 8px 20px color-mix(
            in srgb,
            var(--primary) 18%,
            transparent
    );
}


.button-primary:hover {
    color: var(--text-inverse);

    background: linear-gradient(
            120deg,
            var(--primary-hover),
            var(--primary)
    );

    box-shadow: 0 12px 26px color-mix(
            in srgb,
            var(--primary) 24%,
            transparent
    );
}


.button-primary:active {
    background: linear-gradient(
            120deg,
            var(--primary-active),
            var(--primary)
    );
}


/* ================================================================
   SECONDARY BUTTON
================================================================ */

.button-secondary {
    color: var(--text-primary);

    background: var(--surface-muted);
}


.button-secondary:hover {
    color: var(--text-primary);

    background: var(--surface-hover);
}


/* ================================================================
   OUTLINE BUTTON
================================================================ */

.button-outline {
    border: 1px solid var(--border);

    color: var(--text-primary);

    background: var(--surface);
}


.button-outline:hover {
    border-color: var(--border-strong);

    color: var(--text-primary);

    background: var(--surface-soft);
}


/* ================================================================
   DANGER BUTTON
================================================================ */

.button-danger {
    color: var(--text-inverse);

    background: var(--danger);
}


.button-danger:hover {
    color: var(--text-inverse);

    background: var(--danger-hover);
}


/* ================================================================
   BUTTON LOADING STATE
================================================================ */

.button.is-loading {
    cursor: wait;

    pointer-events: none;

    opacity: 0.9;

    transform: none;
}


.button-spinner {
    width: 18px;
    height: 18px;

    display: none;

    flex: 0 0 auto;

    border: 2px solid color-mix(
            in srgb,
            currentColor 35%,
            transparent
    );

    border-top-color: currentColor;

    border-radius: 50%;

    animation: app-spinner 0.7s linear infinite;
}


.button.is-loading
.button-spinner {
    display: inline-block;
}


@keyframes app-spinner {

    to {
        transform: rotate(360deg);
    }

}


/* ================================================================
   ERRORS
================================================================ */

.form-error {
    margin-bottom: 14px;

    color: var(--danger-text);

    font-size: 12px;
}


.field-error {
    display: block;

    margin-top: 6px;

    color: var(--danger-text);

    font-size: 12px;

    line-height: 1.4;
}


/* ================================================================
   ALERTS
================================================================ */

.alert {
    width: 100%;

    padding: 14px 16px;

    display: flex;
    align-items: flex-start;

    gap: 12px;

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

    font-size: 14px;

    line-height: 1.5;
}


.alert-icon {
    width: 24px;
    height: 24px;

    flex: 0 0 auto;

    display: grid;

    place-items: center;

    border-radius: 50%;

    font-size: 12px;
    font-weight: 800;
}


.alert-content {
    min-width: 0;

    flex: 1;
}


.alert-content p {
    margin: 0;

    color: inherit;
}


/* ================================================================
   ERROR ALERT
================================================================ */

.alert-error {
    border: 1px solid var(--danger-border);

    color: var(--danger-text);

    background: var(--danger-soft);
}


.alert-error
.alert-icon {
    color: var(--text-inverse);

    background: var(--danger);
}


/* ================================================================
   SUCCESS ALERT
================================================================ */

.alert-success {
    border: 1px solid var(--success-border);

    color: var(--success-text);

    background: var(--success-soft);
}


.alert-success
.alert-icon {
    color: var(--text-inverse);

    background: var(--success);
}


/* ================================================================
   WARNING ALERT
================================================================ */

.alert-warning {
    border: 1px solid var(--warning-border);

    color: var(--warning-text);

    background: var(--warning-soft);
}


.alert-warning
.alert-icon {
    color: var(--text-inverse);

    background: var(--warning);
}


/* ================================================================
   SURFACE UTILITIES
================================================================ */

.surface {
    border: 1px solid var(--border);

    border-radius: var(--radius-md);

    color: var(--text-primary);

    background: var(--surface);

    transition: color var(--transition-base),
    background var(--transition-base),
    border-color var(--transition-base);
}


.surface-soft {
    background: var(--surface-soft);
}


.surface-muted {
    background: var(--surface-muted);
}


.surface-elevated {
    background: var(--surface-elevated);

    box-shadow: var(--shadow-sm);
}


/* ================================================================
   SHADOW UTILITIES
================================================================ */

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


.shadow-md {
    box-shadow: var(--shadow-md);
}


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


/* ================================================================
   STATUS UTILITIES
================================================================ */

.status-success {
    color: var(--success-text);
}


.status-warning {
    color: var(--warning-text);
}


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


/* ================================================================
   SCREEN READER ONLY
================================================================ */

.sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/* ================================================================
   HIGH-CONTRAST INITIAL AVATAR
================================================================ */

.avatar-initial {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border: 1px solid var(--avatar-border);

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

    color: var(--avatar-text);

    background: var(--avatar-bg);

    font-family: inherit;

    font-weight: 800;

    line-height: 1;

    text-align: center;

    text-transform: uppercase;

    box-shadow: 0 0 0 1px var(--avatar-ring);

    user-select: none;

    -webkit-user-select: none;

    transition: background var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}


a:hover
.avatar-initial,
button:hover
.avatar-initial,
.avatar-initial:hover {
    background: var(--avatar-bg-hover);
}


a:focus-visible
.avatar-initial,
button:focus-visible
.avatar-initial,
.avatar-initial:focus-visible {
    box-shadow: 0 0 0 3px color-mix(
            in srgb,
            var(--primary) 28%,
            transparent
    );
}


/* ================================================================
   THEME TRANSITIONS
================================================================ */

html.theme-ready body,
html.theme-ready .surface,
html.theme-ready .form-control {
    transition: color var(--transition-base),
    background var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}


/* ================================================================
   REDUCED MOTION
================================================================ */

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

}


/* ================================================================
   SMALL SCREENS
================================================================ */

@media (max-width: 520px) {

    body {
        font-size: 15px;
    }


    .button {
        min-height: 44px;

        padding: 10px 16px;
    }


    .form-control {
        min-height: 46px;
    }


    .alert {
        padding: 12px 14px;

        font-size: 13px;
    }

}

/* ===================================================================
   KRAKEN ALERT STACK
=================================================================== */

.kraken-alert-stack {
    width: 100%;

    margin: 0 0 22px;

    display: flex;

    flex-direction: column;

    gap: 10px;
}


/* ===================================================================
   KRAKEN ALERT BASE
=================================================================== */

.kraken-alert {
    --kraken-alert-accent: var(--primary-strong);

    --kraken-alert-border: var(--border);

    --kraken-alert-soft: var(--primary-soft);

    position: relative;

    width: 100%;

    min-height: 58px;

    padding: 13px 14px 13px 16px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    overflow: hidden;

    border: 1px solid var(--kraken-alert-border);

    border-radius: var(--radius-md);

    color: var(--text-primary);

    background: linear-gradient(
            180deg,
            color-mix(
                    in srgb,
                    var(--kraken-alert-soft) 34%,
                    var(--surface)
            ),
            color-mix(
                    in srgb,
                    var(--kraken-alert-soft) 18%,
                    var(--surface)
            )
    );

    box-shadow: var(--shadow-sm);

    transition: color var(--transition-base),
    background var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);

    animation: kraken-alert-enter var(--transition-base) ease-out;
}


/* ===================================================================
   KRAKEN ALERT LEFT
=================================================================== */

.kraken-alert-left {
    min-width: 0;

    flex: 1;

    display: flex;

    align-items: stretch;
}


/* ===================================================================
   STATUS INDICATOR
=================================================================== */

.kraken-alert-indicator {
    width: 3px;

    min-height: 30px;

    margin-right: 14px;

    flex: 0 0 3px;

    align-self: stretch;

    border-radius: var(--radius-pill);

    background: var(--kraken-alert-accent);

    box-shadow: 0 0 10px color-mix(
            in srgb,
            var(--kraken-alert-accent) 18%,
            transparent
    );
}


/* ===================================================================
   ALERT COPY
=================================================================== */

.kraken-alert-copy {
    min-width: 0;

    flex: 1;

    display: flex;

    align-items: center;

    gap: 11px;
}


/* ===================================================================
   ALERT ICON
=================================================================== */

.kraken-alert-icon {
    width: 26px;

    height: 26px;

    flex: 0 0 26px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border: 1px solid var(--kraken-alert-border);

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

    color: var(--kraken-alert-accent);

    background: color-mix(
            in srgb,
            var(--kraken-alert-soft) 72%,
            var(--surface)
    );

    font-size: 12px;

    font-weight: 800;

    line-height: 1;
}


/* ===================================================================
   ALERT MESSAGE
=================================================================== */

.kraken-alert-message {
    min-width: 0;

    margin: 0;

    color: var(--text-primary);

    font-size: 13px;

    font-weight: 550;

    line-height: 1.55;

    overflow-wrap: anywhere;
}


/* ===================================================================
   CLOSE BUTTON
=================================================================== */

.kraken-alert-close {
    appearance: none;

    width: 30px;

    height: 30px;

    flex: 0 0 30px;

    padding: 0;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border: 1px solid transparent;

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

    color: var(--text-muted);

    background: transparent;

    font-family: inherit;

    font-size: 18px;

    font-weight: 400;

    line-height: 1;

    cursor: pointer;

    transition: color var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}


.kraken-alert-close:hover {
    border-color: var(--border);

    color: var(--text-primary);

    background: var(--surface-soft);
}


.kraken-alert-close:active {
    transform: scale(
            0.96
    );
}


.kraken-alert-close:focus-visible {
    outline: none;

    box-shadow: 0 0 0 3px color-mix(
            in srgb,
            var(--kraken-alert-accent) 20%,
            transparent
    );
}


/* ===================================================================
   SUCCESS
=================================================================== */

.kraken-alert-success {
    --kraken-alert-accent: var(--success-text);

    --kraken-alert-border: var(--success-border);

    --kraken-alert-soft: var(--success-soft);
}


/* ===================================================================
   WARNING
=================================================================== */

.kraken-alert-warning {
    --kraken-alert-accent: var(--warning-text);

    --kraken-alert-border: var(--warning-border);

    --kraken-alert-soft: var(--warning-soft);
}


/* ===================================================================
   ERROR / DANGER
=================================================================== */

.kraken-alert-error,
.kraken-alert-danger {
    --kraken-alert-accent: var(--danger-text);

    --kraken-alert-border: var(--danger-border);

    --kraken-alert-soft: var(--danger-soft);
}


/* ===================================================================
   INFO
=================================================================== */

.kraken-alert-info {
    --kraken-alert-accent: var(--primary-strong);

    --kraken-alert-border: color-mix(
            in srgb,
            var(--primary) 24%,
            var(--border)
    );

    --kraken-alert-soft: var(--primary-soft);
}


/* ===================================================================
   THEME TRANSITION
=================================================================== */

html.theme-ready
.kraken-alert,
html.theme-ready
.kraken-alert-icon,
html.theme-ready
.kraken-alert-close {
    transition: color var(--transition-base),
    background var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}


/* ===================================================================
   ENTRANCE
=================================================================== */

@keyframes kraken-alert-enter {

    from {
        opacity: 0;

        transform: translateY(
                -4px
        );
    }


    to {
        opacity: 1;

        transform: translateY(
                0
        );
    }

}


/* ===================================================================
   MOBILE
=================================================================== */

@media (
max-width: 560px
) {

    .kraken-alert-stack {
        margin-bottom: 18px;

        gap: 8px;
    }


    .kraken-alert {
        min-height: 0;

        padding: 12px 12px 12px 14px;

        align-items: flex-start;

        gap: 10px;

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


    .kraken-alert-left {
        min-width: 0;
    }


    .kraken-alert-indicator {
        min-height: 28px;

        margin-right: 11px;
    }


    .kraken-alert-copy {
        align-items: flex-start;

        gap: 9px;
    }


    .kraken-alert-icon {
        width: 25px;

        height: 25px;

        flex-basis: 25px;

        font-size: 11px;
    }


    .kraken-alert-message {
        padding-top: 3px;

        font-size: 12px;

        line-height: 1.55;
    }


    .kraken-alert-close {
        width: 27px;

        height: 27px;

        flex-basis: 27px;

        font-size: 17px;
    }

}


/* ===================================================================
   VERY SMALL MOBILE
=================================================================== */

@media (
max-width: 390px
) {

    .kraken-alert {
        padding: 11px 10px 11px 12px;
    }


    .kraken-alert-indicator {
        margin-right: 9px;
    }


    .kraken-alert-copy {
        gap: 8px;
    }


    .kraken-alert-icon {
        width: 24px;

        height: 24px;

        flex-basis: 24px;
    }


    .kraken-alert-message {
        font-size: 11px;
    }

}


/* ===================================================================
   REDUCED MOTION
=================================================================== */

@media (
prefers-reduced-motion: reduce
) {

    .kraken-alert,
    .kraken-alert-indicator,
    .kraken-alert-icon,
    .kraken-alert-close {
        transition: none;
    }


    .kraken-alert {
        animation: none;
    }

}

/* ================================================================
   PAGINATION
================================================================ */

.app-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;

    margin-top: 1.5rem;
    padding-top: 1rem;

    border-top: 1px solid var(--border);
}


.app-pagination-summary {
    font-size: 0.82rem;
    color: var(--text-secondary);
}


.app-pagination-summary strong {
    color: var(--text-primary);
    font-weight: 700;
}


.app-pagination-controls {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}


.app-pagination-link {
    min-width: 2.25rem;
    height: 2.25rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 0.7rem;

    border: 1px solid var(--border);
    border-radius: 0.55rem;

    background: var(--surface);

    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;

    text-decoration: none;

    transition: border-color 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease;
}


.app-pagination-link:hover {
    border-color: var(--primary);

    color: var(--text-primary);
}


.app-pagination-link.is-active {
    border-color: var(--primary);

    background: var(--primary);

    color: var(--text-inverse);

    pointer-events: none;
}


.app-pagination-link.is-disabled {
    opacity: 0.45;

    cursor: not-allowed;

    pointer-events: none;
}


.app-pagination-nav {
    min-width: auto;

    padding-left: 0.9rem;
    padding-right: 0.9rem;
}


.app-pagination-ellipsis {
    min-width: 1.5rem;

    display: inline-flex;
    justify-content: center;

    color: var(--text-secondary);
}


/* ================================================================
   MOBILE
================================================================ */

@media (
max-width: 640px
) {

    .app-pagination {
        flex-direction: column;
        align-items: stretch;
    }


    .app-pagination-summary {
        text-align: center;
    }


    .app-pagination-controls {
        justify-content: center;
    }


    .app-pagination-link {
        min-width: 2rem;
        height: 2rem;

        padding-left: 0.55rem;
        padding-right: 0.55rem;

        font-size: 0.75rem;
    }

}