/* ================================================================
   GLOBAL THEME TOKENS — KoskodSub
================================================================ */

:root,
html[data-theme="light"] {
    --theme-primary: var(--primary);
    --theme-primary-soft: var(--primary-soft);
    --theme-ink: var(--text-primary);
    --theme-muted: var(--text-muted);
    --theme-faint: var(--text-disabled);
    --theme-surface: var(--surface);
    --theme-canvas: var(--background);
    --theme-line: var(--border);
    --theme-deep: var(--text-primary);
    --theme-white: #ffffff;
    --theme-bronze: var(--brand-secondary);
    --theme-warm-soft: var(--brand-secondary-soft);
    --theme-danger: var(--danger);
    --theme-danger-soft: var(--danger-soft);
    --theme-info: var(--brand-accent);
    --theme-info-soft: var(--brand-accent-soft);
    --theme-hero-highlight: var(--primary-strong);
    --theme-on-primary: var(--text-inverse);

    color-scheme: light;

    --background: #f8f5fc;
    --app-background: #f8f5fc;
    --surface: #ffffff;
    --surface-soft: #fcfaff;
    --surface-muted: #f1eafb;
    --surface-hover: #eee4fa;
    --surface-elevated: #ffffff;

    --text-primary: #1d1029;
    --text-secondary: #50425d;
    --text-muted: #74667f;
    --text-disabled: #a096aa;
    --text-inverse: #ffffff;

    /* Existing KoskodSub brand colours. */
    --primary: #6d15da;
    --primary-hover: #5a12a6;
    --primary-active: #460c75;
    --primary-soft: #f1e6fc;
    --primary-soft-hover: #e7d5fa;
    --primary-strong: #36058e;
    --brand-link: var(--primary-strong);
    --brand-link-hover: var(--primary-hover);

    --brand-accent: #9730f6;
    --brand-accent-hover: #8824df;
    --brand-accent-active: #6d15da;
    --brand-accent-soft: #f5eaff;

    --brand-secondary: #5a12a6;
    --brand-secondary-hover: #460c75;
    --brand-secondary-active: #2a0359;
    --brand-secondary-soft: #eee5f7;

    --brand-gradient:
        linear-gradient(135deg, #460c75 0%, #6d15da 42%, #9730f6 72%, #ca6dfb 100%);
    --brand-gradient-hover:
        linear-gradient(135deg, #36058e 0%, #5a12a6 42%, #8824df 72%, #af4bf2 100%);

    --avatar-bg: #5a12a6;
    --avatar-bg-hover: #460c75;
    --avatar-text: #ffffff;
    --avatar-border: rgba(90, 18, 166, 0.35);
    --avatar-ring: rgba(151, 48, 246, 0.24);

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

    --border: #ded4e8;
    --border-strong: #c8b8d6;
    --border-focus: #6d15da;
    --overlay: rgba(29, 8, 49, 0.62);

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

    --shadow-xs: 0 1px 3px rgba(70, 12, 117, 0.08);
    --shadow-sm: 0 3px 10px rgba(70, 12, 117, 0.10);
    --shadow-md: 0 12px 32px rgba(70, 12, 117, 0.13);
    --shadow-lg: 0 20px 54px rgba(70, 12, 117, 0.17);

    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
}

html[data-theme="dark"] {
    --theme-primary: var(--primary);
    --theme-primary-soft: var(--primary-soft);
    --theme-ink: var(--text-primary);
    --theme-muted: var(--text-muted);
    --theme-faint: var(--text-disabled);
    --theme-surface: var(--surface);
    --theme-canvas: var(--background);
    --theme-line: var(--border);
    --theme-deep: var(--text-primary);
    --theme-white: #ffffff;
    --theme-bronze: var(--brand-secondary);
    --theme-warm-soft: var(--brand-secondary-soft);
    --theme-danger: var(--danger);
    --theme-danger-soft: var(--danger-soft);
    --theme-info: var(--brand-accent);
    --theme-info-soft: var(--brand-accent-soft);
    --theme-hero-highlight: var(--primary-strong);
    --theme-on-primary: var(--text-inverse);

    color-scheme: dark;

    --background: #09040f;
    --app-background: #09040f;
    --surface: #13091d;
    --surface-soft: #190d25;
    --surface-muted: #231131;
    --surface-hover: #2c163d;
    --surface-elevated: #1d0f2a;

    --text-primary: #fffaff;
    --text-secondary: #ded2e8;
    --text-muted: #b5a5c1;
    --text-disabled: #81738d;
    --text-inverse: #1d082d;

    --primary: #af4bf2;
    --primary-hover: #ca6dfb;
    --primary-active: #9730f6;
    --primary-soft: rgba(175, 75, 242, 0.16);
    --primary-soft-hover: rgba(175, 75, 242, 0.24);
    --primary-strong: #d585fa;
    --brand-link: var(--primary-strong);
    --brand-link-hover: var(--primary-hover);

    --brand-accent: #ca6dfb;
    --brand-accent-hover: #d585fa;
    --brand-accent-active: #af4bf2;
    --brand-accent-soft: rgba(202, 109, 251, 0.15);

    --brand-secondary: #9730f6;
    --brand-secondary-hover: #af4bf2;
    --brand-secondary-active: #6d15da;
    --brand-secondary-soft: rgba(151, 48, 246, 0.16);

    --brand-gradient:
        linear-gradient(135deg, #5a12a6 0%, #6d15da 35%, #9730f6 68%, #ca6dfb 100%);
    --brand-gradient-hover:
        linear-gradient(135deg, #6d15da 0%, #8824df 35%, #af4bf2 68%, #d585fa 100%);

    --avatar-bg: #9730f6;
    --avatar-bg-hover: #af4bf2;
    --avatar-text: #ffffff;
    --avatar-border: rgba(202, 109, 251, 0.45);
    --avatar-ring: rgba(175, 75, 242, 0.30);

    --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);

    --border: #382445;
    --border-strong: #513260;
    --border-focus: #af4bf2;
    --overlay: rgba(3, 1, 7, 0.78);

    --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(151, 48, 246, 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(--brand-link);

    text-decoration: none;

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


a:hover {
    color: var(--brand-link-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(--theme-on-primary);

    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(--theme-on-primary);

    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(--theme-on-primary);

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

}