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

:root,
html[data-theme="light"] {
    color-scheme: light;


    /* ------------------------------------------------------------
       App surfaces
    ------------------------------------------------------------ */

    --background: #f5f7f4;

    --app-background: #f5f7f4;

    --surface: #ffffff;

    --surface-soft: #f8faf7;

    --surface-muted: #eef2ec;

    --surface-hover: #f1f4ef;

    --surface-elevated: #ffffff;


    /* ------------------------------------------------------------
       Typography — high contrast
    ------------------------------------------------------------ */

    --text-primary: #101712;

    --text-secondary: #3f4942;

    --text-muted: #5f6962;

    --text-disabled: #858e87;

    --text-inverse: #ffffff;


    /* ------------------------------------------------------------
       Brand
    ------------------------------------------------------------ */

    --primary: #188a28;

    --primary-hover: #147522;

    --primary-active: #105f1c;

    --primary-soft: #e5f4e7;

    --primary-soft-hover: #d8eedb;

    --primary-strong: #0b5c18;


    --brand-accent: #a6d92d;

    --brand-accent-hover: #95c525;

    --brand-accent-soft: #f1f8db;


    --brand-secondary: #7a4b16;

    --brand-secondary-hover: #653d12;

    --brand-secondary-soft: #f5ece2;


    /* ------------------------------------------------------------
       High-contrast identity / avatar
    ------------------------------------------------------------ */

    --avatar-bg: #194a22;

    --avatar-bg-hover: #123b1a;

    --avatar-text: #ffffff;

    --avatar-border: rgba(
            20,
            70,
            30,
            0.34
    );

    --avatar-ring: rgba(
            24,
            138,
            40,
            0.24
    );


    /* ------------------------------------------------------------
       Semantic
    ------------------------------------------------------------ */

    --success: #126b31;

    --success-text: #0f5428;

    --success-soft: #ebf8ef;

    --success-border: #8fd9aa;


    --warning: #94600b;

    --warning-text: #713d08;

    --warning-soft: #fff6d9;

    --warning-border: #e8c45f;


    --danger: #b9273b;

    --danger-hover: #9f2032;

    --danger-text: #7c151b;

    --danger-soft: #fdeced;

    --danger-border: #ee9ca7;


    /* ------------------------------------------------------------
       Borders — stronger separation
    ------------------------------------------------------------ */

    --border: #cfd8cd;

    --border-strong: #b7c3b4;

    --border-focus: #188a28;


    /* ------------------------------------------------------------
       Overlay
    ------------------------------------------------------------ */

    --overlay: rgba(
            8,
            18,
            10,
            0.56
    );


    /* ------------------------------------------------------------
       Radius
    ------------------------------------------------------------ */

    --radius-xs: 6px;

    --radius-sm: 10px;

    --radius-md: 14px;

    --radius-lg: 20px;

    --radius-xl: 28px;

    --radius-pill: 999px;


    /* ------------------------------------------------------------
       Shadows — stronger depth
    ------------------------------------------------------------ */

    --shadow-xs: 0 1px 3px rgba(
            16,
            42,
            20,
            0.08
    );

    --shadow-sm: 0 3px 10px rgba(
            16,
            42,
            20,
            0.10
    );

    --shadow-md: 0 12px 32px rgba(
            16,
            42,
            20,
            0.13
    );

    --shadow-lg: 0 20px 54px rgba(
            16,
            42,
            20,
            0.16
    );


    /* ------------------------------------------------------------
       Transitions
    ------------------------------------------------------------ */

    --transition-fast: 0.15s ease;

    --transition-base: 0.2s ease;
}


/* ================================================================
   DARK THEME
================================================================ */

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


    /* ------------------------------------------------------------
       App surfaces
    ------------------------------------------------------------ */

    --background: #08100a;

    --app-background: #08100a;

    --surface: #0d1710;

    --surface-soft: #111c14;

    --surface-muted: #17241a;

    --surface-hover: #18261b;

    --surface-elevated: #121e15;


    /* ------------------------------------------------------------
       Typography — high contrast
    ------------------------------------------------------------ */

    --text-primary: #f8fbf8;

    --text-secondary: #cbd4cd;

    --text-muted: #a2aca4;

    --text-disabled: #7d877f;

    --text-inverse: #0b120d;


    /* ------------------------------------------------------------
       Brand
    ------------------------------------------------------------ */

    --primary: #8fd22c;

    --primary-hover: #a6e03a;

    --primary-active: #73b421;

    --primary-soft: rgba(
            143,
            210,
            44,
            0.16
    );

    --primary-soft-hover: rgba(
            143,
            210,
            44,
            0.23
    );

    --primary-strong: #b9ef52;


    --brand-accent: #d6ff72;

    --brand-accent-hover: #e0ff8d;


    --brand-secondary: #d09a57;

    --brand-secondary-hover: #dda965;

    --brand-secondary-soft: rgba(
            208,
            154,
            87,
            0.16
    );


    /* ------------------------------------------------------------
       High-contrast identity / avatar
    ------------------------------------------------------------ */

    --avatar-bg: #91d532;

    --avatar-bg-hover: #a1e13f;

    --avatar-text: #08100a;

    --avatar-border: rgba(
            255,
            255,
            255,
            0.22
    );

    --avatar-ring: rgba(
            143,
            210,
            44,
            0.38
    );


    /* ------------------------------------------------------------
       Semantic
    ------------------------------------------------------------ */

    --success: #56e389;

    --success-text: #b3f6c9;

    --success-soft: rgba(
            22,
            101,
            52,
            0.22
    );

    --success-border: rgba(
            86,
            227,
            137,
            0.36
    );


    --warning: #ffc85a;

    --warning-text: #ffe3a6;

    --warning-soft: rgba(
            146,
            94,
            14,
            0.22
    );

    --warning-border: rgba(
            255,
            200,
            90,
            0.36
    );


    --danger: #ff7f91;

    --danger-hover: #ff5f76;

    --danger-text: #ffc4cc;

    --danger-soft: rgba(
            127,
            29,
            29,
            0.22
    );

    --danger-border: rgba(
            255,
            127,
            145,
            0.36
    );


    /* ------------------------------------------------------------
       Borders — stronger separation
    ------------------------------------------------------------ */

    --border: rgba(
            226,
            244,
            229,
            0.16
    );

    --border-strong: rgba(
            226,
            244,
            229,
            0.26
    );

    --border-focus: #8fd22c;


    /* ------------------------------------------------------------
       Overlay
    ------------------------------------------------------------ */

    --overlay: rgba(
            0,
            0,
            0,
            0.76
    );


    /* ------------------------------------------------------------
       Shadows
    ------------------------------------------------------------ */

    --shadow-xs: 0 1px 3px rgba(
            0,
            0,
            0,
            0.30
    );

    --shadow-sm: 0 4px 12px rgba(
            0,
            0,
            0,
            0.34
    );

    --shadow-md: 0 14px 36px rgba(
            0,
            0,
            0,
            0.42
    );

    --shadow-lg: 0 24px 64px rgba(
            0,
            0,
            0,
            0.50
    );
}


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

/* ================================================================
   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;
    }

}