/*
 * Generated by scripts/build-styles.mjs.
 * Runtime bundle. Edit frontend/css/*.css source sections, not this file directly.
 */
/* ===== tokens.css ===== */
@font-face {
    font-family: 'montserrat-black';
    src: url('../assets/fonts/Montserrat/Montserrat-Black.woff2') format('woff2');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'montserrat-bold';
    src: url('../assets/fonts/Montserrat/Montserrat-Bold.woff2') format('woff2');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'montserrat-semibold';
    src: url('../assets/fonts/Montserrat/Montserrat-SemiBold.woff2') format('woff2');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'montserrat-medium';
    src: url('../assets/fonts/Montserrat/Montserrat-Medium.woff2') format('woff2');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'montserrat-regular';
    src: url('../assets/fonts/Montserrat/Montserrat-Regular.woff2') format('woff2');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'montserrat-light';
    src: url('../assets/fonts/Montserrat/Montserrat-Light.woff2') format('woff2');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'atkinson-hyperlegible';
    src: url('../assets/fonts/Atkinson_Hyperlegible_Mono/AtkinsonHyperlegibleMono-VariableFont_wght.ttf') format('opentype');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'michroma-regular';
    src: url('../assets/fonts/Michroma/Michroma-Regular.ttf') format('opentype');
    font-style: normal;
    font-display: swap;
}

:root {
    /* ===== Tipografías ===== */
    --font-size-xl: 1.5rem;
    --font-size-lg: 1.25rem;
    --font-size-md: 1rem;
    --font-size-sm: 0.875rem;
    --font-size-xs: 0.75rem;

    --font-primary-black: 'montserrat-black';
    --font-primary-bold: 'montserrat-bold';
    --font-primary-semibold: 'montserrat-semibold';
    --font-primary-medium: 'montserrat-medium';
    --font-primary-regular: 'montserrat-regular';
    --font-primary-light: 'montserrat-light';

    --font-secondary-bold: 'atkinson-hyperlegible';
    --font-secondary-semibold: 'atkinson-hyperlegible';
    --font-secondary-medium: 'atkinson-hyperlegible';
    --font-secondary-regular: 'atkinson-hyperlegible';
    --font-secondary-light: 'atkinson-hyperlegible';

    /* ===== Valores generales ===== */
    --general-padding: 0.75rem;
    --general-margin: 0.75rem;
    --general-gap: 0.75rem;
    --general-radius: 0.75rem;
    --general-blur: blur(10px);
    --general-transition: background-color 250ms ease-in-out, border-color 250ms ease-in-out, box-shadow 250ms ease-in-out, color 250ms ease-in-out, opacity 250ms ease-in-out, transform 250ms ease-in-out;

    /* ===== Colors ===== */
    --color-white: #EEEEEE;
    --color-black: #101010;
    --color-violet: #6501a3;
    --color-violet-header: #441461;
    --color-aqua: #3bc78d;
    --color-aqua-header: #2da473;
    --color-grey: #909090;
    --color-lightgrey: #c0c0c0;
    --color-orange: #FFA500;
    --color-red: #FF0000;
    --color-green: #00FF00;
    --color-blue: #0000FF;

    /* ===== Light variants (rgba) ===== */
    --color-white-10: rgba(255, 255, 255, 0.10);
    --color-white-20: rgba(255, 255, 255, 0.20);
    --color-white-30: rgba(255, 255, 255, 0.30);
    --color-white-40: rgba(255, 255, 255, 0.40);
    --color-white-50: rgba(255, 255, 255, 0.50);
    --color-white-60: rgba(255, 255, 255, 0.60);
    --color-white-70: rgba(255, 255, 255, 0.70);

    --color-grey-10: rgba(144, 144, 144, 0.10);
    --color-grey-20: rgba(144, 144, 144, 0.20);
    --color-grey-30: rgba(144, 144, 144, 0.30);
    --color-grey-40: rgba(144, 144, 144, 0.40);
    --color-grey-50: rgba(144, 144, 144, 0.50);
    --color-grey-60: rgba(144, 144, 144, 0.60);
    --color-grey-70: rgba(144, 144, 144, 0.70);

    --color-black-10: rgba(0, 0, 0, 0.10);
    --color-black-20: rgba(0, 0, 0, 0.20);
    --color-black-30: rgba(0, 0, 0, 0.30);
    --color-black-40: rgba(0, 0, 0, 0.40);
    --color-black-50: rgba(0, 0, 0, 0.50);
    --color-black-60: rgba(0, 0, 0, 0.60);
    --color-black-70: rgba(0, 0, 0, 0.70);

    --color-green-10: rgba(14, 220, 14, 0.10);
    --color-green-20: rgba(14, 220, 14, 0.20);
    --color-green-30: rgba(14, 220, 14, 0.30);
    --color-green-40: rgba(14, 220, 14, 0.40);
    --color-green-50: rgba(14, 220, 14, 0.50);
    --color-green-60: rgba(14, 220, 14, 0.60);
    --color-green-70: rgba(14, 220, 14, 0.70);

    --color-blue-10: rgba(0, 0, 255, 0.10);
    --color-blue-20: rgba(0, 0, 255, 0.20);
    --color-blue-30: rgba(0, 0, 255, 0.30);
    --color-blue-40: rgba(0, 0, 255, 0.40);
    --color-blue-50: rgba(0, 0, 255, 0.50);
    --color-blue-60: rgba(0, 0, 255, 0.60);
    --color-blue-70: rgba(0, 0, 255, 0.70);

    --color-red-10: rgba(255, 0, 0, 0.10);
    --color-red-20: rgba(255, 0, 0, 0.20);
    --color-red-30: rgba(255, 0, 0, 0.30);
    --color-red-40: rgba(255, 0, 0, 0.40);
    --color-red-50: rgba(255, 0, 0, 0.50);
    --color-red-60: rgba(255, 0, 0, 0.60);
    --color-red-70: rgba(255, 0, 0, 0.70);

    --color-orange-10: rgba(255, 165, 0, 0.10);
    --color-orange-20: rgba(255, 165, 0, 0.20);
    --color-orange-30: rgba(255, 165, 0, 0.30);
    --color-orange-40: rgba(255, 165, 0, 0.40);
    --color-orange-50: rgba(255, 165, 0, 0.50);
    --color-orange-60: rgba(255, 165, 0, 0.60);
    --color-orange-70: rgba(255, 165, 0, 0.70);

    --color-violet-10: rgba(112, 1, 181, 0.10);
    --color-violet-20: rgba(112, 1, 181, 0.20);
    --color-violet-30: rgba(112, 1, 181, 0.30);
    --color-violet-40: rgba(112, 1, 181, 0.40);
    --color-violet-50: rgba(112, 1, 181, 0.50);
    --color-violet-60: rgba(112, 1, 181, 0.60);
    --color-violet-70: rgba(112, 1, 181, 0.70);

    --color-aqua-10: rgba(59, 199, 141, 0.10);
    --color-aqua-20: rgba(59, 199, 141, 0.20);
    --color-aqua-30: rgba(59, 199, 141, 0.30);
    --color-aqua-40: rgba(59, 199, 141, 0.40);
    --color-aqua-50: rgba(59, 199, 141, 0.50);
    --color-aqua-60: rgba(59, 199, 141, 0.60);
    --color-aqua-70: rgba(59, 199, 141, 0.70);

    /* ===== Icons ===== */
    --icon-xs: 0.5rem;
    --icon-sm: 1rem;
    --icon-md: 1.5rem;
    --icon-lg: 2rem;
    --icon-xl: 3rem;

    --icon-white: invert(99%) sepia(57%) saturate(0%) hue-rotate(221deg) brightness(111%) contrast(100%);
    --icon-orange: invert(69%) sepia(67%) saturate(2934%) hue-rotate(0deg) brightness(103%) contrast(104%);
    --icon-grey: invert(68%) sepia(19%) saturate(0%) hue-rotate(165deg) brightness(82%) contrast(84%);
    --icon-red: invert(13%) sepia(99%) saturate(6635%) hue-rotate(360deg) brightness(97%) contrast(111%);
    --icon-green: invert(74%) sepia(69%) saturate(5528%) hue-rotate(82deg) brightness(110%) contrast(104%);
    --icon-blue: invert(8%) sepia(100%) saturate(6984%) hue-rotate(248deg) brightness(105%) contrast(144%);

    /* ===== Gradients ===== */
    --gradient-primary: linear-gradient(60deg, var(--color-violet-header) 0%, color-mix(in srgb, var(--color-violet-header) 65%, var(--color-black)) 18%, color-mix(in srgb, var(--color-violet-header) 25%, var(--color-black)) 32%, var(--color-black) 44.07%, var(--color-black) 52.93%, color-mix(in srgb, var(--color-aqua-header) 12%, var(--color-black)) 61%, color-mix(in srgb, var(--color-aqua-header) 28%, var(--color-black)) 70%, color-mix(in srgb, var(--color-aqua-header) 50%, var(--color-black)) 79%, color-mix(in srgb, var(--color-aqua-header) 72%, var(--color-black)) 89%, var(--color-aqua-header) 100%);
    --gradient-grey-orange: linear-gradient(60deg, var(--color-grey) 0%, var(--color-orange) 100%);
    --gradient-orange-black: linear-gradient(60deg, var(--color-orange-50) 0%, var(--color-black) 100%);
    --gradient-grey-violet: linear-gradient(60deg, var(--color-grey) 0%, var(--color-violet) 100%);

    /* ===== Buttons ===== */
    --button-padding: 0.25rem 0.75rem 0.28rem 0.75rem;
    --button-gap: 0.3rem;
    --button-radius: 0.5rem;
    --button-scale: 0.97;
    --button-transition: background-color 100ms linear, border-color 100ms linear, box-shadow 100ms linear, color 100ms linear, filter 100ms linear, left 100ms linear, opacity 100ms linear, scale 100ms linear, transform 100ms linear;
    --focus-ring: 0 0 0 3px var(--color-orange-30);

    /* ===== Inputs ===== */
    --input-padding: 0.5rem 0.75rem;
    --input-gap: 0.8rem;
    --input-radius: 0.5rem;
    --input-transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out, box-shadow 150ms ease-in-out, color 150ms ease-in-out, filter 150ms ease-in-out, opacity 150ms ease-in-out;

    /* ===== Header ===== */
    --header-height: 3.5rem;
    --header-padding: 0 1rem;

    /* ===== Sidebar ===== */
    --sidebar-ol-bg: var(--color-black-30);
    --sidebar-ol-blur: blur(10px);
    --sidebar-bg: var(--color-black);
    --sidebar-color: var(--color-white);
    --sidebar-border: 1px solid var(--color-white-30);
    --sidebar-shadow: 0 5px 20px var(--color-white-20);
    --sidebar-width: 90%;
    --sidebar-max-width: 17rem;
    --sidebar-zindex: 1500;

    /* ===== Modals ===== */
    --modal-overlay-bg: var(--color-black-30);
    --modal-overlay-blur: blur(10px);
    --modal-bg: var(--color-black);
    --modal-color: var(--color-white);
    --modal-border: 1px solid var(--color-white-30);
    --modal-shadow: 0 5px 20px var(--color-white-20);
    --modal-padding: 1.5rem;
    --modal-margin: 1.25rem;
    --modal-gap: 1.25rem;
    --modal-radius: 1rem;
    --modal-width: 90%;
    --modal-max-width: 28rem;
    --modal-transition: background-color 200ms ease-in-out, border-color 200ms ease-in-out, box-shadow 200ms ease-in-out, opacity 200ms ease-in-out, transform 200ms ease-in-out, visibility 200ms ease-in-out;
    --modal-zindex: 1300;
    --modal-title: 1.25rem;
}

/* ===== utils.css ===== */
/* GENERAL ============================================================== */
* {
    box-sizing: border-box;

}

html,
body {
    font-size: 16px;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    margin: 0;
    padding: 0;
}

p {
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
}

a {
    text-decoration: none;
    color: inherit;
}

.display-none {
    display: none;
}

.display-inline {
    display: inline;
}

.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}

.cursor-pointer {
    cursor: pointer;
}

.container {
    width: 100%;
    max-width: 82.5rem;
    margin: 0 auto;
    padding: 0 1rem;
}

@media screen and (max-width: 1400px) {
    .container {
        max-width: 1200px;
    }
}

@media screen and (max-width: 1200px) {
    .container {
        max-width: 992px;
    }
}

@media screen and (max-width: 992px) {
    html {
        font-size: 14px;
    }

    .container {
        max-width: 768px;
    }
}

@media screen and (max-width: 768px) {

    .container {
        max-width: 100%;
    }
}

@media screen and (max-width: 576px) {
    html {
        font-size: 12px;
    }

    .container {
        max-width: 100%;
    }
}

/* FLEX ============================================================================ */

.display-flex {
    display: flex;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.row-col-lg {
    display: flex;
    flex-direction: row;
}

.row-col-md {
    display: flex;
    flex-direction: row;
}

.row-col-sm {
    display: flex;
    flex-direction: row;
}

.col-row-lg {
    display: flex;
    flex-direction: column;
}

.col-row-md {
    display: flex;
    flex-direction: column;
}

.col-row-sm {
    display: flex;
    flex-direction: column;
}

.hide-in-lg {
    display: inherit;
}

.hide-in-md {
    display: inherit;
}

.hide-in-sm {
    display: inherit;
}

.show-in-lg {
    display: none;
}

.show-in-md {
    display: none;
}

.show-in-sm {
    display: none;
}

@media screen and (max-width: 992px) {
    .row-col-lg {
        display: flex;
        flex-direction: column;
    }

    .col-row-lg {
        display: flex;
        flex-direction: row;
    }

    .hide-in-lg {
        display: none;
    }

    .show-in-lg {
        display: inherit;
    }
}

@media screen and (max-width: 768px) {
    .row-col-md {
        display: flex;
        flex-direction: column;
    }

    .col-row-md {
        display: flex;
        flex-direction: row;
    }

    .hide-in-md {
        display: none;
    }

    .show-in-md {
        display: inherit;
    }
}

@media screen and (max-width: 576px) {
    .row-col-sm {
        display: flex;
        flex-direction: column;
    }

    .col-row-sm {
        display: flex;
        flex-direction: row;
    }

    .hide-in-sm {
        display: none;
    }

    .show-in-sm {
        display: inherit;
    }
}

.justify-content-center {
    justify-content: center;
}

.justify-content-start {
    justify-content: flex-start;
}

.justify-content-end {
    justify-content: flex-end;
}

.justify-content-around {
    justify-content: space-around;
}

.justify-content-between {
    justify-content: space-between;
}

.align-items-center {
    align-items: center;
}

.align-items-start {
    align-items: flex-start;
}

.align-items-end {
    align-items: flex-end;
}

.align-items-stretch {
    align-items: stretch;
}

.align-self-start {
    align-self: flex-start;
}

.align-self-center {
    align-self: center;
}

.align-self-end {
    align-self: flex-end;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-justify {
    text-align: justify;
}

.text-wrap {
    white-space: normal;
    word-wrap: break-word;
}

.flex-90 {
    flex: 0 0 90%;
}

.flex-80 {
    flex: 0 0 80%;
}

.flex-70 {
    flex: 0 0 70%;
}

.flex-60 {
    flex: 0 0 60%;
}

.flex-50 {
    flex: 0 0 50%;
}

.flex-40 {
    flex: 0 0 40%;
}

.flex-30 {
    flex: 0 0 30%;
}

.flex-20 {
    flex: 0 0 20%;
}

.flex-10 {
    flex: 0 0 10%;
}

/* SCROLL / OVERFLOW ===================================================== */

.overflow-hidden {
    overflow: hidden;
}

.scroll-x {
    overflow-x: scroll;
}

.scroll-y {
    overflow-y: scroll;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* IMG ============================================== */

.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* WIDTH / HEIGHT =================================== */

.w-100 {
    width: 100%;
}

.w-90 {
    width: 90%;
}

.w-80 {
    width: 80%;
}

.w-70 {
    width: 70%;
}

.w-60 {
    width: 60%;
}

.w-50 {
    width: 50%;
}

.w-40 {
    width: 40%;
}

.w-30 {
    width: 30%;
}

.w-20 {
    width: 20%;
}

.w-10 {
    width: 10%;
}

.w-3rem {
    width: 3rem;
    min-width: 3rem;
    max-width: 100%;
}

.w-6rem {
    width: 6rem;
    min-width: 6rem;
    max-width: 100%;
}

.w-9rem {
    width: 9rem;
    min-width: 9rem;
    max-width: 100%;
}

.w-12rem {
    width: 12rem;
    min-width: 12rem;
    max-width: 100%;
}

.w-15rem {
    width: 15rem;
    min-width: 15rem;
    max-width: 100%;
}

.w-18rem {
    width: 18rem;
    min-width: 18rem;
    max-width: 100%;
}

.w-21rem {
    width: 21rem;
    min-width: 21rem;
    max-width: 100%;
}

.w-24rem {
    width: 24rem;
    min-width: 24rem;
    max-width: 100%;
}

.w-27rem {
    width: 27rem;
    min-width: 27rem;
    max-width: 100%;
}

.w-30rem {
    width: 30rem;
    min-width: 30rem;
    max-width: 100%;
}

.w-33rem {
    width: 33rem;
    min-width: 33rem;
    max-width: 100%;
}

.w-36rem {
    width: 36rem;
    min-width: 36rem;
    max-width: 100%;
}

.w-39rem {
    width: 39rem;
    min-width: 39rem;
    max-width: 100%;
}

.w-42rem {
    width: 42rem;
    min-width: 42rem;
    max-width: 100%;
}

.w-45rem {
    width: 45rem;
    min-width: 45rem;
    max-width: 100%;
}

.w-fit,
.w-fit-content {
    width: fit-content;
}

.h-100 {
    height: 100%;
}

.h-90 {
    height: 90%;
}

.h-80 {
    height: 80%;
}

.h-70 {
    height: 70%;
}

.h-60 {
    height: 60%;
}

.h-50 {
    height: 50%;
}

.h-40 {
    height: 40%;
}

.h-30 {
    height: 30%;
}

.h-20 {
    height: 20%;
}

.h-10 {
    height: 10%;
}

.h-fit,
.h-fit-content {
    height: fit-content;
}

.h-1rem {
    height: 1rem;
    min-height: 1rem;
    max-height: 1rem;
}

.h-2rem {
    height: 2rem;
    min-height: 2rem;
    max-height: 2rem;
}

.h-3rem {
    height: 3rem;
    min-height: 3rem;
    max-height: 3rem;
}

.h-6rem {
    height: 6rem;
    min-height: 6rem;
    max-height: 6rem;
}

.h-9rem {
    height: 9rem;
    min-height: 9rem;
    max-height: 9rem;
}

.h-12rem {
    height: 12rem;
    min-height: 12rem;
    max-height: 12rem;
}

.h-15rem {
    height: 15rem;
    min-height: 15rem;
    max-height: 15rem;
}

.h-18rem {
    height: 18rem;
    min-height: 18rem;
    max-height: 18rem;
}

.h-21rem {
    height: 21rem;
    min-height: 21rem;
    max-height: 21rem;
}

.h-24rem {
    height: 24rem;
    min-height: 24rem;
    max-height: 24rem;
}

.h-27rem {
    height: 27rem;
    min-height: 27rem;
    max-height: 27rem;
}

.h-30rem {
    height: 30rem;
    min-height: 30rem;
    max-height: 30rem;
}

.h-33rem {
    height: 33rem;
    min-height: 33rem;
    max-height: 33rem;
}

.h-36rem {
    height: 36rem;
    min-height: 36rem;
    max-height: 36rem;
}

.h-39rem {
    height: 39rem;
    min-height: 39rem;
    max-height: 39rem;
}

.h-42rem {
    height: 42rem;
    min-height: 42rem;
    max-height: 42rem;
}

.h-45rem {
    height: 45rem;
    min-height: 45rem;
    max-height: 45rem;
}

/* ======================================== GRIDS GENERICAS =================================== */

.grid-2-col {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
}

.grid-3-col {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
}

.grid-4-col {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
}

.grid-5-col {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
}

.grid-6-col {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr);
}

.element-2-col {
    grid-column: span 2;
}

.element-3-col {
    grid-column: span 3;
}

.element-4-col {
    grid-column: span 4;
}

.element-5-col {
    grid-column: span 5;
}

.element-6-col {
    grid-column: span 6;
}

@media screen and (max-width: 1200px) {

    .grid-5-col,
    .grid-6-col {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .element-3-col,
    .element-4-col {
        grid-column: span 2;
    }

    .element-5-col,
    .element-6-col {
        grid-column: span 3;
    }
}

@media screen and (max-width: 992px) {

    .grid-3-col,
    .grid-4-col,
    .grid-5-col,
    .grid-6-col {
        grid-template-columns: 1fr 1fr;
    }

    .element-2-col,
    .element-3-col,
    .element-4-col {
        grid-column: span 1;
    }

    .element-5-col,
    .element-6-col {
        grid-column: span 2;
    }
}

@media screen and (max-width: 576px) {

    .grid-2-col,
    .grid-3-col,
    .grid-4-col,
    .grid-5-col,
    .grid-6-col {
        grid-template-columns: 1fr;
    }

    .element-2-col,
    .element-3-col,
    .element-4-col,
    .element-5-col,
    .element-6-col {
        grid-column: span 1;
    }
}

/* ====================================== POSITION =================================== */

.position-absolute {
    position: absolute;
}

.position-relative {
    position: relative;
}

.position-fixed {
    position: fixed;
}

.position-sticky {
    position: sticky;
}

.position-center-x {
    left: 50%;
    transform: translateX(-50%);
}

.position-center-y {
    top: 50%;
    transform: translateY(-50%);
}

.top-0 {
    top: 0;
}

.top-1 {
    top: 0.25rem;
}

.top-2 {
    top: 0.5rem;
}

.top-3 {
    top: 0.75rem;
}

.top-4 {
    top: 1rem;
}

.top-5 {
    top: 1.25rem;
}

.top-6 {
    top: 1.5rem;
}

.top-7 {
    top: 2rem;
}

.top-8 {
    top: 3rem;
}

.top-50 {
    top: 50%;
}

.bot-0 {
    bottom: 0;
}

.bot-1 {
    bottom: 0.25rem;
}

.bot-2 {
    bottom: 0.5rem;
}

.bot-3 {
    bottom: 0.75rem;
}

.bot-4 {
    bottom: 1rem;
}

.bot-5 {
    bottom: 1.25rem;
}

.bot-6 {
    bottom: 1.5rem;
}

.bot-7 {
    bottom: 2rem;
}

.bot-8 {
    bottom: 3rem;
}

.bot-50 {
    bottom: 50%;
}

.left-0 {
    left: 0;
}

.left-1 {
    left: 0.25rem;
}

.left-2 {
    left: 0.5rem;
}

.left-3 {
    left: 0.75rem;
}

.left-4 {
    left: 1rem;
}

.left-5 {
    left: 1.25rem;
}

.left-6 {
    left: 1.5rem;
}

.left-7 {
    left: 2rem;
}

.left-8 {
    left: 3rem;
}

.left-50 {
    left: 50%;
}

.right-0 {
    right: 0;
}

.right-1 {
    right: 0.25rem;
}

.right-2 {
    right: 0.5rem;
}

.right-3 {
    right: 0.75rem;
}

.right-4 {
    right: 1rem;
}

.right-5 {
    right: 1.25rem;
}

.right-6 {
    right: 1.5rem;
}

.right-7 {
    right: 2rem;
}

.right-8 {
    right: 3rem;
}

.right-50 {
    right: 50%;
}

.z-10 {
    z-index: 10;
}

.z-20 {
    z-index: 20;
}

.z-30 {
    z-index: 30;
}

.z-40 {
    z-index: 40;
}

.z-50 {
    z-index: 50;
}

/* BORDER =================================== */
.border-1 {
    border: 1px solid;
}

/* RADIUS =================================== */

.r-1 {
    border-radius: 0.25rem;
}

.r-2 {
    border-radius: 0.5rem;
}

.r-3 {
    border-radius: 0.75rem;
}

.r-4 {
    border-radius: 1rem;
}

.r-5 {
    border-radius: 1.25rem;
}

.r-6 {
    border-radius: 1.5rem;
}

.r-7 {
    border-radius: 2rem;
}

.r-8 {
    border-radius: 3rem;
}

/* GAP ========================================== */
.g-1 {
    gap: 0.25rem;
}

.g-2 {
    gap: 0.5rem;
}

.g-3 {
    gap: 0.75rem;
}

.g-4 {
    gap: 1rem;
}

.g-5 {
    gap: 1.25rem;
}

.g-6 {
    gap: 1.5rem;
}

.g-7 {
    gap: 2rem;
}

.g-8 {
    gap: 3rem;
}

/* PADDING ========================================== */
.p-0 {
    padding: 0rem;
}

.p-1 {
    padding: 0.25rem;
}

.p-2 {
    padding: 0.5rem;
}

.p-3 {
    padding: 0.75rem;
}

.p-4 {
    padding: 1rem;
}

.p-5 {
    padding: 1.25rem;
}

.p-6 {
    padding: 1.5rem;
}

.p-7 {
    padding: 2rem;
}

.p-8 {
    padding: 3rem;
}

.px-0 {
    padding-left: 0rem !important;
    padding-right: 0rem !important;
}

.px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.px-7 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.px-8 {
    padding-left: 3rem;
    padding-right: 3rem;
}

.py-0 {
    padding-top: 0rem !important;
    padding-bottom: 0rem !important;
}

.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.py-7 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.py-8 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.pt-0 {
    padding-top: 0rem;
}

.pt-1 {
    padding-top: 0.25rem;
}

.pt-2 {
    padding-top: 0.5rem;
}

.pt-3 {
    padding-top: 0.75rem;
}

.pt-4 {
    padding-top: 1rem;
}

.pt-5 {
    padding-top: 1.25rem;
}

.pt-6 {
    padding-top: 1.5rem;
}

.pt-7 {
    padding-top: 2rem;
}

.pt-8 {
    padding-top: 3rem;
}

.pb-0 {
    padding-bottom: 0rem;
}

.pb-1 {
    padding-bottom: 0.25rem;
}

.pb-2 {
    padding-bottom: 0.5rem;
}

.pb-3 {
    padding-bottom: 0.75rem;
}

.pb-4 {
    padding-bottom: 1rem;
}

.pb-5 {
    padding-bottom: 1.25rem;
}

.pb-6 {
    padding-bottom: 1.5rem;
}

.pb-7 {
    padding-bottom: 2rem;
}

.pb-8 {
    padding-bottom: 3rem;
}

.pl-0 {
    padding-left: 0rem;
}

.pl-1 {
    padding-left: 0.25rem;
}

.pl-2 {
    padding-left: 0.5rem;
}

.pl-3 {
    padding-left: 0.75rem;
}

.pl-4 {
    padding-left: 1rem;
}

.pl-5 {
    padding-left: 1.25rem;
}

.pl-6 {
    padding-left: 1.5rem;
}

.pl-7 {
    padding-left: 2rem;
}

.pl-8 {
    padding-left: 3rem;
}

.pr-0 {
    padding-right: 0rem;
}

.pr-1 {
    padding-right: 0.25rem;
}

.pr-2 {
    padding-right: 0.5rem;
}

.pr-3 {
    padding-right: 0.75rem;
}

.pr-4 {
    padding-right: 1rem;
}

.pr-5 {
    padding-right: 1.25rem;
}

.pr-6 {
    padding-right: 1.5rem;
}

.pr-7 {
    padding-right: 2rem;
}

.pr-8 {
    padding-right: 3rem;
}

/* MARGIN ========================================== */
.m-auto {
    margin: auto;
}

.m-1 {
    margin: 0.25rem;
}

.m-2 {
    margin: 0.5rem;
}

.m-3 {
    margin: 0.75rem;
}

.m-4 {
    margin: 1rem;
}

.m-5 {
    margin: 1.25rem;
}

.m-6 {
    margin: 1.5rem;
}

.m-7 {
    margin: 2rem;
}

.m-8 {
    margin: 3rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.mx-1 {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

.mx-2 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.mx-3 {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
}

.mx-4 {
    margin-left: 1rem;
    margin-right: 1rem;
}

.mx-5 {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
}

.mx-6 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

.mx-7 {
    margin-left: 2rem;
    margin-right: 2rem;
}

.mx-8 {
    margin-left: 3rem;
    margin-right: 3rem;
}

.my-auto {
    margin-top: auto;
    margin-bottom: auto;
}

.my-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

.my-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.my-3 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.my-5 {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}

.my-6 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.my-7 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.my-8 {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.mt-auto {
    margin-top: auto;
}

.mt-1 {
    margin-top: 0.25rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-3 {
    margin-top: 0.75rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-5 {
    margin-top: 1.25rem;
}

.mt-6 {
    margin-top: 1.5rem;
}

.mt-7 {
    margin-top: 2rem;
}

.mt-8 {
    margin-top: 3rem;
}

.mb-auto {
    margin-bottom: auto;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-5 {
    margin-bottom: 1.25rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.mb-7 {
    margin-bottom: 2rem;
}

.mb-8 {
    margin-bottom: 3rem;
}

.mr-auto {
    margin-right: auto;
}

.mr-1 {
    margin-right: 0.25rem;
}

.mr-2 {
    margin-right: 0.5rem;
}

.mr-3 {
    margin-right: 0.75rem;
}

.mr-4 {
    margin-right: 1rem;
}

.mr-5 {
    margin-right: 1.25rem;
}

.mr-6 {
    margin-right: 1.5rem;
}

.mr-7 {
    margin-right: 2rem;
}

.mr-8 {
    margin-right: 3rem;
}

.ml-auto {
    margin-left: auto;
}

.ml-1 {
    margin-left: 0.25rem;
}

.ml-2 {
    margin-left: 0.5rem;
}

.ml-3 {
    margin-left: 0.75rem;
}

.ml-4 {
    margin-left: 1rem;
}

.ml-5 {
    margin-left: 1.25rem;
}

.ml-6 {
    margin-left: 1.5rem;
}

.ml-7 {
    margin-left: 2rem;
}

.ml-8 {
    margin-left: 3rem;
}

/* ===== base.css ===== */
/* ======================================== GENERAL =================================== */
body {
    height: 100dvh;
    width: 100%;
    font-family: var(--font-primary-regular);
    color: var(--color-white);
    background-color: var(--color-black);
    overflow: hidden;
}

/* Shell viewport: the root owns the usable area below the fixed header. */
#module-root {
    position: fixed;
    inset: var(--header-height) 0 0 0;
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Each module host receives exactly the shell viewport and owns internal scroll. */
.module-host {
    position: relative;
    height: 100%;
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.module-host[hidden] {
    display: none !important;
}

main {
    padding: 0;
}

.hidden,
.hidden-view,
.hidden-element {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 200ms;
}


/* Scrollbar ======================== */
::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-grey);
    border-radius: 10px;
    cursor: pointer;
}

/* ===== texts.css ===== */
/* Texts =================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
    margin: 0;
    margin-block: 0;
    margin-inline: 0;
}

:where(span, p) {
    color: var(--color-white);
    margin: 0;
    font-size: var(--font-size-sm);
}

h1 {
    font-family: var(--font-primary-bold);
    font-size: 3rem;
    color: var(--color-white);
}

h2 {
    font-family: var(--font-primary-bold);
    font-size: 2.5rem;
    color: var(--color-white);
}

h3 {
    font-family: var(--font-primary-medium);
    font-size: 1.5rem;
    color: var(--color-grey);
}

h4 {
    font-family: var(--font-primary-regular);
    font-size: 1.25rem;
    color: var(--color-grey);
}

.text-xl {
    font-size: var(--font-size-xl);
}

.text-lg {
    font-size: var(--font-size-lg);
}

.text-md {
    font-size: var(--font-size-md);
}

.text-sm {
    font-size: var(--font-size-sm);
}

.text-xs {
    font-size: var(--font-size-xs);
}

.primary-bold {
    font-family: var(--font-primary-bold);
}

.primary-semibold {
    font-family: var(--font-primary-semibold);
}

.primary-medium {
    font-family: var(--font-primary-medium);
}

.primary-regular {
    font-family: var(--font-primary-regular);
}

.primary-light {
    font-family: var(--font-primary-light);
}

/* ===== colors.css ===== */
/* ======================================== COLORS =================================== */
.color-black {
    color: var(--color-black);
}

.color-white {
    color: var(--color-white);
}

.color-orange {
    color: var(--color-orange);
}

.color-green {
    color: var(--color-green);
}

.color-red {
    color: var(--color-red);
}

.color-grey {
    color: var(--color-grey);
}

.color-violet {
    color: var(--color-violet);
}

.color-aqua {
    color: var(--color-aqua);
}

.bg-black {
    background-color: var(--color-black);
}

.bg-white {
    background-color: var(--color-white);
}

.bg-white-10 {
    background-color: var(--color-white-10);
}

.bg-orange {
    background-color: var(--color-orange);
}

.bg-green {
    background-color: var(--color-green);
}

.bg-red {
    background-color: var(--color-red);
}

.bg-grey {
    background-color: var(--color-grey);
}

.bg-violet {
    background-color: var(--color-violet);
}

.bg-aqua {
    background-color: var(--color-aqua);
}

/* ======================================== ICON COLORS =================================== */

.icon-white {
    filter: var(--icon-white);
}

.icon-orange {
    filter: var(--icon-orange);
}

.icon-red {
    filter: var(--icon-red);
}

.icon-blue {
    filter: var(--icon-blue);
}

.icon-green {
    filter: var(--icon-green);
}

/* ======================================== ICONS =================================== */

.icon-xl {
    width: var(--icon-xl);
    height: var(--icon-xl);
}

.icon-lg {
    width: var(--icon-lg);
    height: var(--icon-lg);
}

.icon-md {
    width: var(--icon-md);
    height: var(--icon-md);
}

.icon-sm {
    width: var(--icon-sm);
    height: var(--icon-sm);
}

.icon-xs {
    width: var(--icon-xs);
    height: var(--icon-xs);
}

/* BORDERS ============================================================== */
.border-violet {
    border: 1px solid var(--color-violet);
}

.border-aqua {
    border: 1px solid var(--color-aqua);
}

.border-orange {
    border: 1px solid var(--color-orange);
}

/* ===== buttons.css ===== */
/* BUTTONS ============================================================== */
a,
button {
    display: flex;
    align-items: center;
    gap: var(--button-gap);
    padding: var(--button-padding);
    border-radius: var(--button-radius);
    font-family: var(--font-primary-regular);
    font-size: var(--font-size-sm);
    line-height: 1;
    transition: var(--button-transition);
    color: var(--color-white);
    background: transparent;
    border: 1px solid var(--color-grey);
    width: fit-content;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

button img {
    width: var(--icon-md);
    height: var(--icon-md);
    filter: var(--icon-white);
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

:is(a, button):focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 2px;
    box-shadow: var(--focus-ring);
}

.btn-rounded {
    border-radius: 5rem;
}

.close-btn {
    width: var(--icon-md);
    height: var(--icon-md);
    filter: var(--icon-red);
    background-color: var(--color-red-20);
    border: 1px solid var(--color-red);
    cursor: pointer;
    user-select: none;
    padding: 0.15rem;
    border-radius: 100px;
    transition: var(--button-transition);
}

.close-btn img {
    width: 100%;
    height: 100%;
    filter: var(--icon-red);
}

.close-btn:hover {
    background-color: var(--color-red-30);
    box-shadow: 0 0 15px var(--color-red-50);
}

.close-btn:active,
.close-btn.pressed {
    scale: 0.95;
}

.btn-icon {
    border: none;
    background: transparent;
    padding: 0;
    width: fit-content;
}

.btn-icon img {
    width: fit-content;
    height: calc(var(--icon-lg) + 0px);
    filter: var(--icon-white);
}

.btn-icon.btn-icon-sm img {
    width: var(--icon-sm);
    height: var(--icon-sm);
}

.btn-circle {
    border: none;
    padding: 0;
    border-radius: 50%;
    background-color: var(--color-white-30);
    box-shadow: 0 0 10px var(--color-white-30);
}

.btn-circle:hover {
    background-color: var(--color-orange-50);
    box-shadow: 0 0 15px var(--color-orange-50);
    transform: rotate(10deg);
}

.btn-circle:active,
.btn-circle.pressed {
    scale: 0.97;
}

.btn-circle img {
    width: var(--icon-lg);
    height: var(--icon-lg);
}

/* btn-filled ------------------------ */
.btn-filled-violet {
    color: var(--color-white);
    background: var(--color-violet-40);
    border: 1px solid var(--color-violet);
    box-shadow: 0 0 15px 5px var(--color-violet-50);
}

.btn-filled-violet img {
    filter: var(--icon-white);
}

.btn-filled-violet:hover {
    background-color: var(--color-violet);
    box-shadow: 0 0 20px 8px var(--color-violet-50);
}

.btn-filled-violet:active,
.btn-filled-violet.active,
.btn-filled-violet.pressed {
    scale: 0.97;
    background-color: var(--color-violet);
    box-shadow: 0 0 20px 8px var(--color-violet-50);
}

.btn-filled-aqua {
    color: var(--color-white);
    background: var(--color-aqua-40);
    border: 1px solid var(--color-aqua);
    box-shadow: 0 0 15px 3px var(--color-aqua-50);
}

.btn-filled-aqua img {
    filter: var(--icon-white);
}

.btn-filled-aqua:hover {
    background-color: var(--color-aqua);
    box-shadow: 0 0 20px 5px var(--color-aqua-50);
}

.btn-filled-aqua:active,
.btn-filled-aqua.active,
.btn-filled-aqua.pressed {
    scale: 0.97;
    background-color: var(--color-aqua);
    box-shadow: 0 0 20px 5px var(--color-aqua-50);
}

.btn-filled-blue {
    color: var(--color-white);
    background: var(--color-blue-40);
    border: 1px solid var(--color-blue);
    box-shadow: 0 0 15px 1px var(--color-blue-50);
}

.btn-filled-blue img {
    filter: var(--icon-white);
}

.btn-filled-blue:hover {
    background-color: var(--color-blue);
    box-shadow: 0 0 25px 4px var(--color-blue-50);
}

.btn-filled-blue:active,
.btn-filled-blue.active,
.btn-filled-blue.pressed {
    scale: 0.97;
    background-color: var(--color-blue);
    box-shadow: 0 0 25px 4px var(--color-blue-50);
}

.btn-filled-green {
    color: var(--color-white);
    background: var(--color-green-40);
    border: 1px solid var(--color-green);
    box-shadow: 0 0 15px 1px var(--color-green-50);
}

.btn-filled-green img {
    filter: var(--icon-white);
}

.btn-filled-green:hover {
    background-color: var(--color-green);
    box-shadow: 0 0 25px 4px var(--color-green-50);
}

.btn-filled-green:active,
.btn-filled-green.active,
.btn-filled-green.pressed {
    scale: 0.97;
    background-color: var(--color-green);
    box-shadow: 0 0 25px 4px var(--color-green-50);
}

.btn-filled-red {
    color: var(--color-white);
    background: var(--color-red-40);
    border: 1px solid var(--color-red);
    box-shadow: 0 0 15px 1px var(--color-red-50);
}

.btn-filled-red img {
    filter: var(--icon-white);
}

.btn-filled-red:hover {
    background-color: var(--color-red);
    box-shadow: 0 0 25px 4px var(--color-red-50);
}

.btn-filled-red:active,
.btn-filled-red.active,
.btn-filled-red.pressed {
    scale: 0.97;
    background-color: var(--color-red);
    box-shadow: 0 0 25px 4px var(--color-red-50);
}

.btn-filled-orange {
    color: var(--color-white);
    background: var(--color-orange-40);
    border: 1px solid var(--color-orange);
    box-shadow: 0 0 15px 1px var(--color-orange-50);
}

.btn-filled-orange img {
    filter: var(--icon-white);
}

.btn-filled-orange:hover {
    background-color: var(--color-orange);
    box-shadow: 0 0 25px 4px var(--color-orange-50);
}

.btn-filled-orange:active,
.btn-filled-orange.active,
.btn-filled-orange.pressed {
    scale: 0.97;
    background-color: var(--color-orange);
    box-shadow: 0 0 25px 4px var(--color-orange-50);
}

.btn-filled-grey {
    color: var(--color-white);
    background: var(--color-grey-40);
    border: 1px solid var(--color-grey);
    box-shadow: 0 0 15px 1px var(--color-grey-50);
}

.btn-filled-grey img {
    filter: var(--icon-white);
}

.btn-filled-grey:hover {
    background-color: var(--color-grey);
    box-shadow: 0 0 25px 4px var(--color-grey-50);
}

.btn-filled-grey:active,
.btn-filled-grey.active,
.btn-filled-grey.pressed {
    scale: 0.97;
    background-color: var(--color-grey);
    box-shadow: 0 0 25px 4px var(--color-grey-50);
}

/* btn-neon ------------------------ */
.btn-neon-orange {
    color: var(--color-white);
    border: 1px solid var(--color-orange);
    box-shadow: 0 0 10px var(--color-orange-50);
}

.btn-neon-orange:hover {
    background-color: var(--color-orange-20);
    box-shadow: 0 0 20px var(--color-orange-50);
}

.btn-neon-orange img {
    filter: var(--icon-white);
}

.btn-neon-orange:active,
.btn-neon-orange.active,
.btn-neon-orange.pressed {
    scale: 0.97;
    background-color: var(--color-orange-20);
    box-shadow: 0 0 20px var(--color-orange-50);
}

.btn-neon-white {
    color: var(--color-white);
    border: 1px solid var(--color-white);
    box-shadow: 0 0 10px var(--color-white-30);
}

.btn-neon-white img {
    filter: var(--icon-white);
}

.btn-neon-white:hover {
    background-color: var(--color-white-30);
    box-shadow: 0 0 12px var(--color-white-40);
}

.btn-neon-white:active,
.btn-neon-white.active,
.btn-neon-white.pressed {
    scale: 0.97;
    background-color: var(--color-white-30);
    box-shadow: 0 0 12px var(--color-white-40);
}

.btn-neon-grey {
    color: var(--color-white);
    border: 1px solid var(--color-grey);
    box-shadow: 0 0 10px var(--color-white-30);
}

.btn-neon-grey img {
    filter: var(--icon-white);
}

.btn-neon-grey:hover {
    background-color: var(--color-white-30);
    box-shadow: 0 0 12px var(--color-white-40);
}

.btn-neon-grey:active,
.btn-neon-grey.active,
.btn-neon-grey.pressed {
    scale: 0.97;
    background-color: var(--color-white-30);
    box-shadow: 0 0 12px var(--color-white-40);
}

.btn-neon-violet {
    color: var(--color-violet);
    border: 1px solid var(--color-violet);
    box-shadow: 0 0 10px var(--color-violet-50);
}

.btn-neon-violet:hover {
    background-color: var(--color-violet-20);
    box-shadow: 0 0 20px var(--color-violet-50);
}

.btn-neon-violet img {
    filter: var(--icon-white);
}

.btn-neon-violet:active,
.btn-neon-violet.active,
.btn-neon-violet.pressed {
    scale: 0.97;
    background-color: var(--color-violet-20);
    box-shadow: 0 0 20px var(--color-violet-50);
}

.btn-neon-aqua {
    color: var(--color-white);
    border: 1px solid var(--color-aqua);
    box-shadow: 0 0 10px var(--color-aqua-50);
}

.btn-neon-aqua:hover {
    background-color: var(--color-aqua-30);
    box-shadow: 0 0 20px var(--color-aqua-50);
}

.btn-neon-aqua img {
    filter: var(--icon-white);
}

.btn-neon-aqua:active,
.btn-neon-aqua.active,
.btn-neon-aqua.pressed {
    scale: 0.97;
    background-color: var(--color-aqua-30);
    box-shadow: 0 0 20px var(--color-aqua-50);
}

/* MULTISELECT ====================================================================== */
.btn-multiselect {
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid var(--color-grey);
    border-radius: 999px;
    box-shadow: 0 0 10px var(--color-white-30);
    width: fit-content;
    overflow: hidden;
}

.btn-multiselect[hidden] {
    display: none !important;
}

.btn-multiselect button {
    border: none;
    border-right: 1px solid var(--color-grey);
    background-color: var(--color-black-60);
    border-radius: 0;
    color: var(--color-white);
    cursor: pointer;
    padding: 0.25rem 0.75rem;
}

.btn-multiselect button:hover {
    background-color: var(--color-grey-40);
}

.btn-multiselect button.active {
    background-color: var(--color-orange-60);
}

.btn-multiselect button:last-child {
    border-right: none;
}

.btn-multiselect button img {
    width: var(--icon-md);
    height: var(--icon-md);
    filter: var(--icon-white);
}

:is(a, button):is(:disabled, [disabled], [aria-disabled="true"], .disabled),
:is(.close-btn, .btn-icon, .btn-circle, .btn-filled-violet, .btn-filled-aqua, .btn-filled-blue, .btn-filled-green, .btn-filled-red, .btn-filled-orange, .btn-filled-grey, .btn-neon-orange, .btn-neon-white, .btn-neon-grey, .btn-neon-violet, .btn-neon-aqua):is(:disabled, [disabled], [aria-disabled="true"], .disabled),
.btn-multiselect:is([disabled], [aria-disabled="true"], .disabled),
.btn-multiselect button:is(:disabled, [disabled], [aria-disabled="true"], .disabled),
.btn-multiselect:is([disabled], [aria-disabled="true"], .disabled) button,
:is(a, button):is(:disabled, [disabled], [aria-disabled="true"], .disabled):is(:hover, :active, .active, .pressed),
:is(.close-btn, .btn-icon, .btn-circle, .btn-filled-violet, .btn-filled-aqua, .btn-filled-blue, .btn-filled-green, .btn-filled-red, .btn-filled-orange, .btn-filled-grey, .btn-neon-orange, .btn-neon-white, .btn-neon-grey, .btn-neon-violet, .btn-neon-aqua):is(:disabled, [disabled], [aria-disabled="true"], .disabled):is(:hover, :active, .active, .pressed),
.btn-multiselect:is([disabled], [aria-disabled="true"], .disabled):is(:hover, :active, .active, .pressed),
.btn-multiselect button:is(:disabled, [disabled], [aria-disabled="true"], .disabled):is(:hover, :active, .active, .pressed),
.btn-multiselect:is([disabled], [aria-disabled="true"], .disabled) button:is(:hover, :active, .active, .pressed) {
    color: var(--color-white-30);
    background-color: var(--color-grey-10);
    border-color: var(--color-white-20);
    box-shadow: none;
    cursor: not-allowed;
    scale: 1;
    transform: none;
}

:is(a, button):is(:disabled, [disabled], [aria-disabled="true"], .disabled) *,
:is(.close-btn, .btn-icon, .btn-circle, .btn-filled-violet, .btn-filled-aqua, .btn-filled-blue, .btn-filled-green, .btn-filled-red, .btn-filled-orange, .btn-filled-grey, .btn-neon-orange, .btn-neon-white, .btn-neon-grey, .btn-neon-violet, .btn-neon-aqua):is(:disabled, [disabled], [aria-disabled="true"], .disabled) *,
.btn-multiselect:is([disabled], [aria-disabled="true"], .disabled) *,
.btn-multiselect button:is(:disabled, [disabled], [aria-disabled="true"], .disabled) *,
:is(a, button):is(:disabled, [disabled], [aria-disabled="true"], .disabled):is(:hover, :active, .active, .pressed) *,
:is(.close-btn, .btn-icon, .btn-circle, .btn-filled-violet, .btn-filled-aqua, .btn-filled-blue, .btn-filled-green, .btn-filled-red, .btn-filled-orange, .btn-filled-grey, .btn-neon-orange, .btn-neon-white, .btn-neon-grey, .btn-neon-violet, .btn-neon-aqua):is(:disabled, [disabled], [aria-disabled="true"], .disabled):is(:hover, :active, .active, .pressed) *,
.btn-multiselect:is([disabled], [aria-disabled="true"], .disabled):is(:hover, :active, .active, .pressed) *,
.btn-multiselect button:is(:disabled, [disabled], [aria-disabled="true"], .disabled):is(:hover, :active, .active, .pressed) *,
.btn-multiselect:is([disabled], [aria-disabled="true"], .disabled) button:is(:hover, :active, .active, .pressed) * {
    color: inherit;
}

:is(a, button):is(:disabled, [disabled], [aria-disabled="true"], .disabled) img,
:is(.close-btn, .btn-icon, .btn-circle, .btn-filled-violet, .btn-filled-aqua, .btn-filled-blue, .btn-filled-green, .btn-filled-red, .btn-filled-orange, .btn-filled-grey, .btn-neon-orange, .btn-neon-white, .btn-neon-grey, .btn-neon-violet, .btn-neon-aqua):is(:disabled, [disabled], [aria-disabled="true"], .disabled) img,
.btn-multiselect:is([disabled], [aria-disabled="true"], .disabled) img,
.btn-multiselect button:is(:disabled, [disabled], [aria-disabled="true"], .disabled) img,
:is(a, button):is(:disabled, [disabled], [aria-disabled="true"], .disabled):is(:hover, :active, .active, .pressed) img,
:is(.close-btn, .btn-icon, .btn-circle, .btn-filled-violet, .btn-filled-aqua, .btn-filled-blue, .btn-filled-green, .btn-filled-red, .btn-filled-orange, .btn-filled-grey, .btn-neon-orange, .btn-neon-white, .btn-neon-grey, .btn-neon-violet, .btn-neon-aqua):is(:disabled, [disabled], [aria-disabled="true"], .disabled):is(:hover, :active, .active, .pressed) img,
.btn-multiselect:is([disabled], [aria-disabled="true"], .disabled):is(:hover, :active, .active, .pressed) img,
.btn-multiselect button:is(:disabled, [disabled], [aria-disabled="true"], .disabled):is(:hover, :active, .active, .pressed) img,
.btn-multiselect:is([disabled], [aria-disabled="true"], .disabled) button:is(:hover, :active, .active, .pressed) img {
    filter: var(--icon-white);
    opacity: 0.3;
}

/* ===== surfaces.css ===== */
/* Shared visual surfaces: cards, panels and selectable tiles. */
.surface {
    --surface-bg: var(--color-white-10);
    --surface-border: var(--color-white-20);
    --surface-radius: var(--general-radius);
    --surface-shadow: none;

    box-sizing: border-box;
    color: var(--color-white);
    background: var(--surface-bg);
    border: 1px solid var(--surface-border);
    border-radius: var(--surface-radius);
    box-shadow: var(--surface-shadow);
}

.surface-muted {
    --surface-bg: var(--color-black-30);
}

.surface-strong {
    --surface-border: var(--color-white-30);
}

.surface-emphasis {
    --surface-bg: var(--color-white-20);
    --surface-border: var(--color-white-30);
    --surface-shadow: 0 0 0.75rem var(--color-white-40);
}

.surface-gradient {
    --surface-bg: linear-gradient(180deg, var(--color-white-10) 0%, var(--color-black) 100%);
}

.surface-raised {
    --surface-shadow: 0 0 10px var(--color-white-20);
}

.surface-selectable {
    cursor: pointer;
    transition: var(--general-transition);
}

.surface-selectable:hover {
    border-color: var(--surface-hover-border, var(--color-orange));
    box-shadow: var(--surface-hover-shadow, 0 0 12px var(--color-orange-50));
}

.surface-selectable.selected,
.surface-selectable[aria-checked="true"] {
    border-color: var(--surface-selected-border, var(--color-orange));
    background: var(--surface-selected-bg, var(--color-orange-20));
    box-shadow: var(--surface-selected-shadow, 0 0 14px var(--color-orange-50));
}

.surface-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: 1rem;
}

.surface-card__media {
    display: block;
    width: 100%;
    object-fit: cover;
}

.surface-card__media--wide {
    aspect-ratio: 16 / 9;
}

.surface-card__media--square {
    aspect-ratio: 1 / 1;
}

.surface-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--surface-card-gap, var(--general-gap));
    padding: var(--surface-card-padding, var(--general-padding));
}

.surface-card__title {
    margin: 0;
    color: var(--color-white);
    font-family: var(--font-primary-medium);
    font-size: var(--surface-card-title-size, var(--font-size-lg));
    line-height: 1.2;
}

.surface-card__copy {
    margin: 0;
    color: var(--surface-card-copy-color, var(--color-white-70));
    font-size: var(--surface-card-copy-size, var(--font-size-md));
    line-height: 1.55;
}

.icon-box {
    --icon-box-size: 3rem;
    --icon-box-icon-size: 1.5rem;
    --icon-box-bg: var(--color-white-10);
    --icon-box-border: var(--color-white-30);
    --icon-box-shadow: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-box-size);
    min-width: var(--icon-box-size);
    height: var(--icon-box-size);
    border: 1px solid var(--icon-box-border);
    border-radius: var(--general-radius);
    background: var(--icon-box-bg);
    box-shadow: var(--icon-box-shadow);
}

.icon-box img {
    width: var(--icon-box-icon-size);
    height: var(--icon-box-icon-size);
    filter: var(--icon-box-filter, var(--icon-white));
}

.icon-box.aqua {
    --icon-box-bg: var(--color-aqua-30);
    --icon-box-border: var(--color-aqua);
    --icon-box-shadow: 0 0 12px var(--color-aqua-50);
}

.icon-box.violet {
    --icon-box-bg: var(--color-violet-30);
    --icon-box-border: var(--color-violet);
    --icon-box-shadow: 0 0 12px var(--color-violet-50);
}

.icon-box.orange {
    --icon-box-bg: var(--color-orange-30);
    --icon-box-border: var(--color-orange);
    --icon-box-shadow: 0 0 12px var(--color-orange-50);
}

.icon-box.grey {
    --icon-box-bg: var(--color-white-10);
    --icon-box-border: var(--color-white-20);
}

.empty-state {
    box-sizing: border-box;
    border: 1px dashed var(--empty-state-border, var(--color-white-30));
    border-radius: var(--empty-state-radius, var(--general-radius));
    background: var(--empty-state-bg, var(--color-black-30));
    color: var(--empty-state-color, var(--color-grey));
    padding: var(--empty-state-padding, var(--general-padding));
}

.empty-state > :first-child {
    margin-top: 0;
}

.empty-state > :last-child {
    margin-bottom: 0;
}

/* ===== view-layouts.css ===== */
/* Shared layouts for static views and module landing screens. */
.static-view {
    --static-view-padding: 1rem;
    --static-view-gap: 1.5rem;
    --static-view-copy-gap: 0.5rem;
    --static-view-grid-gap: 1rem;
    --static-view-grid-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));

    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    gap: var(--static-view-gap);
    padding: var(--static-view-padding);
    color: var(--color-white);
    background: var(--static-view-bg, var(--color-black));
    overflow: hidden;
    outline: none;
}

.static-view--scroll {
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.static-view--center-when-fit > .static-view__header {
    margin-top: auto;
}

.static-view--center-when-fit > .static-view__body {
    flex: 0 0 auto;
    margin-bottom: auto;
}

.static-view__header {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--static-view-header-gap, var(--static-view-gap));
    min-width: 0;
}

.static-view__copy {
    display: flex;
    flex-direction: column;
    gap: var(--static-view-copy-gap);
    min-width: 0;
    max-width: var(--static-view-copy-max-width, none);
}

.static-view__title,
.static-view__subtitle {
    margin: 0;
}

.static-view__title {
    color: var(--color-white);
    font-family: var(--font-primary-bold);
    font-size: var(--static-view-title-size, 2.5rem);
    line-height: 1.15;
    text-wrap: balance;
}

.static-view__subtitle {
    color: var(--static-view-subtitle-color, var(--color-grey));
    font-size: var(--static-view-subtitle-size, var(--font-size-md));
    line-height: 1.5;
}

.static-view__body {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.static-view__body--scroll {
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.static-view__grid {
    display: grid;
    grid-template-columns: var(--static-view-grid-columns);
    gap: var(--static-view-grid-gap);
    align-content: start;
    min-width: 0;
}

@media screen and (max-width: 768px) {
    .static-view__header {
        flex-direction: column;
    }
}

/* ===== forms.css ===== */
/* INPUTS =========================================================================== */
.input-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.input-container input {
    width: 100%;
    color: var(--color-white);
    background: var(--color-black);
    padding: var(--input-padding);
    font-family: var(--font-primary-regular);
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-grey);
    box-shadow: none;
    border-radius: var(--input-radius);
    outline: none;
    transition: var(--input-transition);
}

.input-container input:focus {
    border: 1px solid var(--color-orange);
}

.input-container input:focus-visible {
    box-shadow: var(--focus-ring);
}

.input-container input:disabled,
.input-container input[aria-disabled="true"],
.input-container input.disabled {
    color: var(--color-white-30);
    background-color: var(--color-grey-10);
    border-color: var(--color-white-20);
    box-shadow: none;
    cursor: not-allowed;
}


/*Radio styles ======================*/
.radio-container {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.radio-container input[type="radio"] {
    appearance: none;
    margin: 0;
    width: calc(var(--icon-md) - 2px);
    height: calc(var(--icon-md) - 2px);
    border-radius: 50%;
    background-color: var(--color-black);
    border: 2px solid var(--color-grey);
    cursor: pointer;
    user-select: none;
    transition: var(--input-transition);
}

.radio-container label {
    margin-left: var(--input-gap);
    margin-bottom: 2px;
    color: var(--color-white);
    font-size: var(--font-size-sm);
    cursor: pointer;
    user-select: none;
    transition: var(--input-transition);
}

.radio-container input[type="radio"]:checked {
    border: 4px solid var(--color-orange);
    background-color: var(--color-orange-40);
    filter: drop-shadow(0 0 15px 3px var(--color-orange-50));
}

.radio-container input[type="radio"]:checked+label {
    color: var(--color-orange);
}

.radio-container input[type="radio"]:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 3px;
    box-shadow: var(--focus-ring);
}

.radio-container input[type="radio"]:disabled {
    border: 2px solid var(--color-white-20);
    cursor: not-allowed;
}

.radio-container input[type="radio"]:disabled+label {
    color: var(--color-white-30);
    cursor: not-allowed;
}

/*Select styles ======================*/
select {
    width: 100%;
    color: var(--color-white);
    background-color: var(--color-black-60);
    padding: var(--input-padding);
    font-family: var(--font-primary-regular);
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-grey);
    box-shadow: none;
    border-radius: var(--input-radius);
    outline: none;
    transition: var(--input-transition);
    cursor: pointer;
}

select:focus {
    border-color: var(--color-orange);
}

select:focus-visible {
    box-shadow: var(--focus-ring);
}

select:disabled,
select[aria-disabled="true"],
select.disabled {
    color: var(--color-white-30);
    background-color: var(--color-grey-10);
    border-color: var(--color-white-20);
    box-shadow: none;
    cursor: not-allowed;
}

select option {
    color: var(--color-white);
    background-color: var(--color-black);
}

.select-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.select-container select {
    appearance: none;
    padding-right: calc(var(--icon-md) + 1rem);
}

.select-container svg {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    width: var(--icon-md);
    height: var(--icon-sm);
    filter: var(--icon-white);
    transition: var(--button-transition);
    cursor: pointer;
    pointer-events: none;
}

.select-container select:focus+svg {
    transform: translateY(-50%) rotate(180deg);
    filter: var(--icon-orange);
}

.select-container select:disabled+svg,
.select-container select[aria-disabled="true"]+svg,
.select-container select.disabled+svg {
    filter: var(--icon-white);
    opacity: 0.3;
}

/* Switch ======================================== */

.switch-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    --switch-width: 56px;
    --switch-height: 30px;
    --switch-padding: 3px;
    --switch-thumb-size: 22px;
    --switch-border-size: 1px;
}

.switch-text {
    font-size: var(--font-size-sm);
    color: var(--color-white);
    cursor: pointer;
    user-select: none;
    transition: var(--button-transition);
}

.switch-container input[type="checkbox"]:checked~.switch-text {
    color: var(--color-aqua);
    text-shadow: 0 0 0.625rem var(--color-blue-50);
}

.switch-container input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

.switch-label {
    position: relative;
    box-sizing: border-box;
    display: block;
    width: var(--switch-width);
    height: var(--switch-height);
    background: var(--color-black);
    border-radius: 999px;
    cursor: pointer;
    border: var(--switch-border-size) solid var(--color-white-30);
    transition: var(--button-transition);
}

.switch-slider {
    position: absolute;
    top: var(--switch-padding);
    left: var(--switch-padding);
    width: var(--switch-thumb-size);
    height: var(--switch-thumb-size);
    background: linear-gradient(145deg, var(--color-white-30), var(--color-white-20));
    border-radius: 50%;
    transition: var(--button-transition);
}

.switch-container input[type="checkbox"]:checked+.switch-label {
    border-color: var(--color-aqua);
    box-shadow:
        inset 0 0 0.625rem var(--color-aqua-30),
        0 0 0.625rem var(--color-aqua-50);
}

.switch-container input[type="checkbox"]:checked+.switch-label .switch-slider {
    left: calc(var(--switch-width) - var(--switch-thumb-size) - var(--switch-padding) - (var(--switch-border-size) * 2));
    background-color: var(--color-aqua);
    box-shadow: 0 0 0.625rem var(--color-aqua-50);
}

.switch-container input[type="checkbox"]:focus-visible+.switch-label {
    outline: 2px solid var(--color-orange);
    outline-offset: 3px;
    box-shadow: var(--focus-ring);
}

.switch-container input[type="checkbox"]:checked:focus-visible+.switch-label {
    box-shadow:
        inset 0 0 0.625rem var(--color-aqua-30),
        0 0 0.625rem var(--color-aqua-50),
        var(--focus-ring);
}

.switch-container input[type="checkbox"]:disabled+.switch-label,
.switch-container input[type="checkbox"][aria-disabled="true"]+.switch-label {
    border-color: var(--color-white-20);
    box-shadow: none;
    cursor: not-allowed;
}

.switch-container input[type="checkbox"]:disabled+.switch-label .switch-slider,
.switch-container input[type="checkbox"][aria-disabled="true"]+.switch-label .switch-slider {
    opacity: 0.3;
}

.switch-container input[type="checkbox"]:disabled~.switch-text,
.switch-container input[type="checkbox"][aria-disabled="true"]~.switch-text {
    color: var(--color-white-30);
    cursor: not-allowed;
    text-shadow: none;
}

@media screen and (max-width: 768px) {
    .switch-container {
        --switch-width: 48px;
        --switch-height: 26px;
        --switch-padding: 2px;
        --switch-thumb-size: 18px;
    }

    .switch-text {
        font-size: var(--font-size-xs);
    }
}

/* ===== feedback.css ===== */
/* Tabs ============================================== */
.tabs-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    border-bottom: 1px solid var(--color-white-30);
}

.tabs-container .tab {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-white-30);
    background: var(--color-white-10);
    color: var(--color-white);
    border-radius: var(--button-radius) var(--button-radius) 0 0;
    padding: var(--button-padding);
    white-space: nowrap;
    cursor: pointer;
    transition: var(--button-transition);
}

.tabs-container .tab[aria-selected="true"] {
    border-color: var(--color-orange);
    background: var(--color-orange-20);
    color: var(--color-white);
    box-shadow: 0 0 10px var(--color-orange-50);
}

.tabs-container .tab:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 2px;
    box-shadow: var(--focus-ring);
}

@media screen and (max-width: 576px) {
    .tabs-container .tab {
        flex: 1 1 100%;
        justify-content: flex-start;
        border-radius: var(--button-radius);
    }
}

/* Pill ======================================== */
.pill {
    display: flex;
    align-items: center;
    font-family: var(--font-primary-regular);
    font-size: calc(var(--font-size-xs) * 0.8);
    line-height: 1.6;
    color: var(--color-white);
    background-color: var(--color-grey-30);
    border: 1px solid var(--color-grey);
    border-radius: 999px;
    box-shadow: 0 0 10px var(--color-grey-50);
    padding: 0.25em 0.75em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pill.default {
    color: var(--color-white);
    background-color: var(--color-grey-30);
    border-color: var(--color-grey);
    box-shadow: 0 0 10px var(--color-grey-50);
}

.pill.success {
    color: var(--color-white);
    background-color: var(--color-green-30);
    border-color: var(--color-green);
    box-shadow: 0 0 10px var(--color-green-50);
}

.pill.warn {
    color: var(--color-white);
    background-color: var(--color-orange-30);
    border-color: var(--color-orange);
    box-shadow: 0 0 10px var(--color-orange-50);
}

.pill.error {
    color: var(--color-white);
    background-color: var(--color-red-30);
    border-color: var(--color-red);
    box-shadow: 0 0 10px var(--color-red-50);
}

.pill.running {
    color: var(--color-white);
    background-color: var(--color-violet-30);
    border-color: var(--color-violet);
    box-shadow: 0 0 10px var(--color-violet-50);
}

.pill.info {
    color: var(--color-white);
    background-color: var(--color-blue-30);
    border-color: var(--color-blue);
    box-shadow: 0 0 10px var(--color-blue-50);
}

/* ===== modals.css ===== */
/* Shared modal tokens are defined in tokens.css as --modal-*. */
:host {
    box-sizing: border-box;
}

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

:host {
    display: none;
}

:host([open]) {
    display: block;
}

.overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--modal-overlay-bg);
    backdrop-filter: var(--modal-overlay-blur);
    transition: var(--modal-transition);
    z-index: var(--modal-zindex);
    opacity: 0;
    pointer-events: none;
}

:host([open]) .overlay {
    opacity: 1;
    pointer-events: auto;
}

.modal {
    display: flex;
    flex-direction: column;
    gap: var(--modal-gap);
    color: var(--modal-color);
    background: var(--modal-bg);
    border: var(--modal-border);
    border-radius: var(--modal-radius);
    padding: var(--modal-padding);
    box-shadow: var(--modal-shadow);
    width: var(--modal-width);
    max-width: var(--modal-max-width);
    max-height: min(90vh, 720px);
    overflow: auto;
    outline: none;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--modal-gap);
}

.modal-header h2,
.modal-header h3,
.modal-title {
    margin: 0;
    min-height: var(--icon-md);
    display: flex;
    align-items: center;
    font-family: var(--font-primary-semibold);
    font-size: var(--modal-title);
    font-weight: 600;
    line-height: 1;
}

.modal-title ::slotted(*) {
    line-height: 1;
}

.modal-body {
    display: flex;
    flex-direction: column;
    gap: var(--modal-gap);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--modal-gap);
    flex-wrap: wrap;
}

.modal-actions {
    display: flex;
    gap: var(--modal-gap);
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.modal-actions-centered {
    justify-content: center;
}

/* ===== runtime.css ===== */
/* Scroll to Top Button */
.scroll-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    border-radius: 5rem;
    opacity: 0;
    pointer-events: none;
    z-index: 999;
}

.scroll-top.visible {
    opacity: 1;
    pointer-events: all;
}

/* Parallax Elements */
.parallax-element {
    position: absolute;
    pointer-events: none;
    opacity: 0.1;
}

/* Fade In Animations */
.anim-clip {
    overflow: hidden;
}

.fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.slide-in-top {
    opacity: 0;
    transform: translateY(-50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-in-top.visible {
    opacity: 1;
    transform: translateY(0);
}

.slide-in-bottom {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-in-bottom.visible {
    opacity: 1;
    transform: translateY(0);
}

.slide-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Shell placeholder ============================================== */
.shell-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    height: 60vh;
    color: var(--color-grey);
    font-family: var(--font-primary-regular);
}

.shell-placeholder__title {
    margin: 0;
    font-size: 1.5rem;
}

.shell-placeholder__copy {
    margin: 0;
    opacity: 0.7;
}