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

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

    /* ============================================================
       RECHARGEFALCON BRAND PALETTE
    ============================================================ */

    --rf-purple-50: #f7f4ff;
    --rf-purple-100: #f1ebff;
    --rf-purple-200: #e5d9ff;
    --rf-purple-300: #cfb9fb;
    --rf-purple-400: #a982f2;
    --rf-purple-500: #8251e8;
    --rf-purple-600: #682be0;
    --rf-purple-700: #5721c8;
    --rf-purple-800: #4619aa;
    --rf-purple-900: #431793;
    --rf-purple-950: #260b59;

    /* App surfaces */
    --background: #fbfafd;
    --app-background: #fbfafd;
    --surface: #ffffff;
    --surface-soft: #fdfcff;
    --surface-muted: #f5f1fc;
    --surface-hover: #eee8f8;
    --surface-elevated: #ffffff;

    /* Typography */
    --text-primary: #18131f;
    --text-secondary: #51495b;
    --text-muted: #746c7d;
    --text-disabled: #a59eac;
    --text-inverse: #ffffff;

    /* Primary brand */
    --primary: #682be0;
    --primary-hover: #5721c8;
    --primary-active: #4619aa;
    --primary-soft: #f1ebff;
    --primary-soft-hover: #e5d9ff;
    --primary-strong: #431793;

    /* Bright purple accent */
    --brand-accent: #8251e8;
    --brand-accent-hover: #7139e2;
    --brand-accent-active: #682be0;
    --brand-accent-soft: #f5f0ff;

    /* Deep purple */
    --brand-secondary: #5721c8;
    --brand-secondary-hover: #4619aa;
    --brand-secondary-active: #431793;
    --brand-secondary-soft: #eee8fb;

    /* RechargeFalcon gradients */
    --brand-gradient:
        linear-gradient(
            135deg,
            #431793 0%,
            #5721c8 32%,
            #682be0 65%,
            #a982f2 100%
        );

    --brand-gradient-hover:
        linear-gradient(
            135deg,
            #351174 0%,
            #4619aa 32%,
            #5721c8 65%,
            #8251e8 100%
        );

    /* Identity / avatar */
    --avatar-bg: #682be0;
    --avatar-bg-hover: #5721c8;
    --avatar-text: #ffffff;
    --avatar-border: rgba(104, 43, 224, 0.34);
    --avatar-ring: rgba(104, 43, 224, 0.20);

    /* Semantic colors */
    --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: #e8e3ed;
    --border-strong: #d9d2e1;
    --border-focus: #682be0;

    /* Overlay */
    --overlay: rgba(24, 19, 31, 0.64);

    /* 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(67, 23, 147, 0.06);

    --shadow-sm:
        0 4px 12px rgba(67, 23, 147, 0.09);

    --shadow-md:
        0 12px 32px rgba(67, 23, 147, 0.12);

    --shadow-lg:
        0 22px 56px rgba(67, 23, 147, 0.16);

    --shadow-primary:
        0 12px 30px rgba(104, 43, 224, 0.24);

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

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

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

    /* Brand palette */
    --rf-purple-50: #f7f4ff;
    --rf-purple-100: #f1ebff;
    --rf-purple-200: #e5d9ff;
    --rf-purple-300: #cfb9fb;
    --rf-purple-400: #a982f2;
    --rf-purple-500: #8251e8;
    --rf-purple-600: #682be0;
    --rf-purple-700: #5721c8;
    --rf-purple-800: #4619aa;
    --rf-purple-900: #431793;
    --rf-purple-950: #260b59;

    /* App surfaces */
    --background: #0d0912;
    --app-background: #0d0912;
    --surface: #17111f;
    --surface-soft: #1c1525;
    --surface-muted: #251b30;
    --surface-hover: #30223e;
    --surface-elevated: #20172b;

    /* Typography */
    --text-primary: #fcfaff;
    --text-secondary: #ddd6e5;
    --text-muted: #afa5b9;
    --text-disabled: #7f7588;
    --text-inverse: #18131f;

    /* Primary brand */
    --primary: #a982f2;
    --primary-hover: #bea0f7;
    --primary-active: #8251e8;
    --primary-soft: rgba(104, 43, 224, 0.18);
    --primary-soft-hover: rgba(104, 43, 224, 0.27);
    --primary-strong: #cfb9fb;

    /* Bright purple accent */
    --brand-accent: #bea0f7;
    --brand-accent-hover: #cfb9fb;
    --brand-accent-active: #a982f2;
    --brand-accent-soft: rgba(169, 130, 242, 0.16);

    /* Deep purple */
    --brand-secondary: #8251e8;
    --brand-secondary-hover: #a982f2;
    --brand-secondary-active: #682be0;
    --brand-secondary-soft: rgba(104, 43, 224, 0.18);

    /* RechargeFalcon gradients */
    --brand-gradient:
        linear-gradient(
            135deg,
            #4619aa 0%,
            #5721c8 32%,
            #682be0 65%,
            #a982f2 100%
        );

    --brand-gradient-hover:
        linear-gradient(
            135deg,
            #5721c8 0%,
            #682be0 32%,
            #8251e8 65%,
            #bea0f7 100%
        );

    /* Identity / avatar */
    --avatar-bg: #8251e8;
    --avatar-bg-hover: #a982f2;
    --avatar-text: #ffffff;
    --avatar-border: rgba(190, 160, 247, 0.42);
    --avatar-ring: rgba(169, 130, 242, 0.28);

    /* Semantic colors */
    --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: #382d43;
    --border-strong: #50405e;
    --border-focus: #a982f2;

    /* Overlay */
    --overlay: rgba(5, 3, 8, 0.80);

    /* 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 14px 34px rgba(104, 43, 224, 0.34);
}

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

}