:root {
    color-scheme: dark;

    --font-family-base: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-family-heading: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-family-mono: "Cascadia Code", "Consolas", "Courier New", monospace;

    --size-0: 0;
    --size-xs: 0.25rem;
    --size-s: 0.5rem;
    --size-md: 0.75rem;
    --size-lg: 1rem;
    --size-xl: 1.5rem;
    --size-2xl: 2rem;
    --size-3xl: 3rem;
    --size-4xl: 4rem;
    --size-5xl: 6rem;

    --radius-0: 0;
    --radius-xs: 0.25rem;
    --radius-s: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-2xl: 2rem;
    --radius-3xl: 3rem;
    --radius-4xl: 4rem;
    --radius-5xl: 6rem;
    --radius-full: 9999px;

    --font-size-xs: 0.75rem;
    --font-size-s: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.75rem;
    --font-size-5xl: 4rem;

    --line-height-tight: 1.15;
    --line-height-snug: 1.35;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.85;

    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.16);
    --shadow-s: 0 8px 24px rgb(0 0 0 / 0.16);
    --shadow-md: 0 16px 36px rgb(0 0 0 / 0.22);
    --shadow-lg: 0 22px 52px rgb(0 0 0 / 0.28);
    --shadow-xl: 0 28px 72px rgb(0 0 0 / 0.34);

    --container-xs: 24rem;
    --container-s: 32rem;
    --container-md: 48rem;
    --container-lg: 64rem;
    --container-xl: 75rem;
    --container-2xl: 88rem;
    --wrapper-fluid-padding: 1rem;
    --wrapper-adaptive-width: 100%;

    --color-white-rgb: 255 255 255;
    --color-black-rgb: 0 0 0;

    --color-accent: #ffedb3;
    --color-accent-very-dark: color-mix(in srgb, var(--color-accent) 24%, black);
    --color-accent-dark: color-mix(in srgb, var(--color-accent) 46%, black);
    --color-accent-light: color-mix(in srgb, var(--color-accent) 82%, white);
    --color-accent-very-light: color-mix(in srgb, var(--color-accent) 58%, white);
    --color-accent-super-light: color-mix(in srgb, var(--color-accent) 28%, white);

    --color-accent-transparent: color-mix(in srgb, var(--color-accent) 18%, transparent);
    --color-accent-very-dark-transparent: color-mix(in srgb, var(--color-accent-very-dark) 18%, transparent);
    --color-accent-dark-transparent: color-mix(in srgb, var(--color-accent-dark) 18%, transparent);
    --color-accent-light-transparent: color-mix(in srgb, var(--color-accent-light) 18%, transparent);
    --color-accent-very-light-transparent: color-mix(in srgb, var(--color-accent-very-light) 20%, transparent);
    --color-accent-super-light-transparent: color-mix(in srgb, var(--color-accent-super-light) 20%, transparent);

    --color-white: rgb(var(--color-white-rgb));
    --color-black: rgb(var(--color-black-rgb));
    --color-white-transparent: rgb(var(--color-white-rgb) / 0.16);
    --color-black-transparent: rgb(var(--color-black-rgb) / 0.16);
    --color-white-soft: rgb(var(--color-white-rgb) / 0.76);
    --color-black-soft: rgb(var(--color-black-rgb) / 0.72);

    --color-background: #0a0f19;
    --color-background-soft: color-mix(in srgb, var(--color-background) 82%, white);
    --color-surface: #0f172a;
    --color-surface-soft: color-mix(in srgb, var(--color-surface) 70%, white);
    --color-background-transparent: color-mix(in srgb, var(--color-background) 72%, transparent);
    --color-background-soft-transparent: color-mix(in srgb, var(--color-background-soft) 72%, transparent);
    --color-surface-transparent: color-mix(in srgb, var(--color-surface) 48%, transparent);
    --color-surface-soft-transparent: color-mix(in srgb, var(--color-surface-soft) 40%, transparent);
    --color-border: rgb(var(--color-white-rgb) / 0.12);
    --color-border-strong: rgb(var(--color-white-rgb) / 0.24);
    --color-text: rgb(240 244 248);
    --color-text-muted: rgb(226 233 243 / 0.76);
    --color-success: #22c55e;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;
    --color-info: #38bdf8;

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

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

html {
    margin: 0;
    padding: 0;
    min-height: 100svh;
    min-width: 100svw;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100svh;
    font-family: var(--font-family-base), sans-serif;
    color: var(--text);
    background:
        linear-gradient(180deg, rgb(7 12 21 / 0.62) 0%, rgb(8 14 25 / 0.68) 28%, rgb(10 19 34 / 0.72) 100%),
        radial-gradient(circle at top left, rgb(80 130 255 / 0.14), transparent 32%),
        radial-gradient(circle at top right, rgb(134 212 255 / 0.10), transparent 24%),
        url("/Media/Images/Backgrounds/phMonitor-bg.webp") center top / cover fixed no-repeat;
    line-height: var(--line-height-normal);
}
.main {
    min-height: 60svh;
    padding-top: 5svh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 var(--size-lg);
    font-family: var(--font-family-heading);
    font-weight: 700;
    line-height: var(--line-height-tight);
    color: var(--color-white);
    text-wrap: balance;
}

h1 {
    font-size: var(--font-size-5xl);
    letter-spacing: -0.03em;
}

h2 {
    font-size: var(--font-size-4xl);
    letter-spacing: -0.025em;
}

h3 {
    font-size: var(--font-size-3xl);
    letter-spacing: -0.02em;
}

h4 {
    font-size: var(--font-size-2xl);
}

h5 {
    font-size: var(--font-size-xl);
}

h6 {
    font-size: var(--font-size-lg);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

p,
li,
blockquote,
label,
input,
textarea,
select,
button {
    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
}

p,
ul,
ol,
blockquote {
    margin: 0 0 var(--size-lg);
}

p,
li {
    color: var(--color-text-muted);
}

small {
    font-size: var(--font-size-s);
    line-height: var(--line-height-snug);
    color: var(--color-text-muted);
}

strong,
b {
    font-weight: 700;
    color: var(--color-white);
}

ul,
ol {
    padding-left: var(--size-xl);
}

blockquote {
    padding-left: var(--size-lg);
    border-left: 3px solid var(--color-accent);
    color: var(--color-white-soft);
}

img,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}


.tile {
    padding: var(--size-md);
    border-radius: var(--radius-lg);
    background: var(--color-surface-soft);
    box-shadow: var(--shadow-md);
}

.bg-texture {
    background: url(/Media/Images/Backgrounds/container-texture.webp);
}

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

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

.bg-glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.bg-glass-dark {
    background: var(--color-background-transparent);
    backdrop-filter: blur(10px);
}

.header-user-menu {
    position: relative;
}

.header-user-menu-wrap {
    min-width: 0;
}

.header-remote-menu {
    position: relative;
}

.header-username {
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-remote-menu-trigger,
.header-user-menu-trigger {
    background: rgb(var(--color-white-rgb) / 0.04);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.header-user-menu-trigger {
    width: 46px;
    height: 46px;
    padding: 0;
}

.header-remote-menu-trigger {
    min-height: 46px;
    font-size: var(--font-size-s);
    font-weight: 600;
    white-space: nowrap;
}

.header-remote-menu-trigger i {
    color: var(--color-accent);
}

.header-remote-menu-trigger span {
    line-height: 1;
}

.header-remote-menu-trigger:hover,
.header-remote-menu-trigger:focus-visible,
.header-user-menu-trigger:hover,
.header-user-menu-trigger:focus-visible {
    background: var(--color-surface-soft-transparent);
    border-color: var(--color-border-strong);
    color: var(--color-accent);
    outline: none;
}

.header-user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 12.5rem;
    padding: var(--size-s);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-surface) 82%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--shadow-lg);
    z-index: 180;
}

.header-user-dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 30px;
}

.header-remote-dropdown {
    min-width: 16.5rem;
}

.header-user-dropdown-link {
    display: flex;
    align-items: center;
    gap: var(--size-md);
    width: 100%;
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: var(--font-size-s);
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.header-remote-dropdown-link {
    justify-content: space-between;
    gap: var(--size-lg);
}

.header-remote-dropdown-main {
    display: inline-flex;
    align-items: center;
    gap: var(--size-md);
    min-width: 0;
}

.header-remote-dropdown-main span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-user-dropdown-link i {
    width: 1rem;
    text-align: center;
    color: var(--color-text-muted);
    transition: color 0.18s ease;
}

.header-user-dropdown-link:hover,
.header-user-dropdown-link:focus-visible {
    background: var(--color-surface-soft-transparent);
    color: var(--color-accent);
    outline: none;
}

.header-user-dropdown-link:hover i,
.header-user-dropdown-link:focus-visible i {
    color: var(--color-accent);
}

.header-user-dropdown-link--danger:hover,
.header-user-dropdown-link--danger:focus-visible {
    background: rgb(239 68 68 / 0.14);
    color: #ffb4b4;
}

.header-user-dropdown-link--danger:hover i,
.header-user-dropdown-link--danger:focus-visible i {
    color: #ffb4b4;
}

.header-remote-version-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-full);
    background: var(--color-accent-transparent);
    color: var(--color-accent-light);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}

.header-shell {
    position: relative;
}

.header-desktop-nav,
.header-mobile-actions {
    flex-shrink: 0;
}

.header-mobile-menu-toggle {
    width: 46px;
    height: 46px;
    padding: 0;
    background: rgb(var(--color-white-rgb) / 0.04);
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.header-mobile-menu-toggle:hover,
.header-mobile-menu-toggle:focus-visible {
    background: var(--color-surface-soft-transparent);
    border-color: var(--color-border-strong);
    color: var(--color-accent);
    outline: none;
}

.header-mobile-menu {
    padding: 0 var(--wrapper-fluid-padding) var(--size-md);
}

.header-mobile-menu-inner {
    display: flex;
    justify-content: flex-end;
}

.header-mobile-menu-panel {
    width: min(100%, 24rem);
    padding: var(--size-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-surface) 86%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--shadow-lg);
}

.header-mobile-nav,
.header-mobile-account-links {
    display: grid;
    gap: var(--size-xs);
}

.header-mobile-remote-group {
    display: grid;
    gap: var(--size-xs);
}

.header-mobile-remote-title {
    padding: 0.35rem 0.9rem 0.15rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.header-mobile-menu-divider {
    height: 1px;
    margin: var(--size-md) 0;
    background: var(--color-border);
}

.header-mobile-nav-link {
    display: flex;
    align-items: center;
    gap: var(--size-md);
    width: 100%;
    padding: 0.8rem 0.9rem;
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: var(--font-size-s);
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.header-mobile-nav-link i {
    width: 1rem;
    text-align: center;
    color: var(--color-text-muted);
    transition: color 0.18s ease;
}

.header-mobile-nav-link:hover,
.header-mobile-nav-link:focus-visible {
    background: var(--color-surface-soft-transparent);
    color: var(--color-accent);
    outline: none;
}

.header-mobile-nav-link:hover i,
.header-mobile-nav-link:focus-visible i,
.header-mobile-nav-link--accent,
.header-mobile-nav-link--accent i {
    color: var(--color-accent);
}

.header-mobile-remote-link {
    justify-content: space-between;
}

.header-mobile-remote-link span:nth-child(2) {
    margin-right: auto;
}

.header-mobile-nav-link--danger:hover,
.header-mobile-nav-link--danger:focus-visible {
    background: rgb(239 68 68 / 0.14);
    color: #ffb4b4;
}

.header-mobile-nav-link--danger:hover i,
.header-mobile-nav-link--danger:focus-visible i {
    color: #ffb4b4;
}

.hidden,
.d-none {
    display: none !important;
}

.mobile-hide,
.tablet-hide,
.desktop-hide {
    display: inherit;
}

.d-block {
    display: block !important;
}

.d-inline {
    display: inline !important;
}

.d-inline-block {
    display: inline-block !important;
}

.d-flex {
    display: flex !important;
}

.d-grid {
    display: grid !important;
}

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

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

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

.flex-nowrap {
    flex-wrap: nowrap !important;
}

.flex-1 {
    flex: 1 1 0% !important;
}

.flex-auto {
    flex: 1 1 auto !important;
}

.grow {
    flex-grow: 1 !important;
}

.grow-0 {
    flex-grow: 0 !important;
}

.shrink {
    flex-shrink: 1 !important;
}

.shrink-0 {
    flex-shrink: 0 !important;
}

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

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

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

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

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

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

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

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

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

.justify-evenly {
    justify-content: space-evenly !important;
}

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

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

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

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.position-static {
    position: static !important;
}

.position-relative {
    position: relative !important;
}

.position-absolute {
    position: absolute !important;
}

.position-fixed {
    position: fixed !important;
}

.position-sticky {
    position: sticky !important;
}

.top-0 {
    top: 0 !important;
}

.right-0 {
    right: 0 !important;
}

.bottom-0 {
    bottom: 0 !important;
}

.left-0 {
    left: 0 !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

.overflow-auto {
    overflow: auto !important;
}

.overflow-x-auto {
    overflow-x: auto !important;
}

.overflow-y-auto {
    overflow-y: auto !important;
}

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

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

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

.text-uppercase {
    text-transform: uppercase !important;
}

.text-lowercase {
    text-transform: lowercase !important;
}

.text-capitalize {
    text-transform: capitalize !important;
}

.text-nowrap {
    white-space: nowrap !important;
}

.text-break {
    word-break: break-word !important;
}

.font-base {
    font-family: var(--font-family-base) !important;
}

.font-heading {
    font-family: var(--font-family-heading) !important;
}

.font-mono {
    font-family: var(--font-family-mono) !important;
}

.font-light {
    font-weight: 300 !important;
}

.font-normal {
    font-weight: 400 !important;
}

.font-medium {
    font-weight: 500 !important;
}

.font-semibold {
    font-weight: 600 !important;
}

.font-bold {
    font-weight: 700 !important;
}

.font-extrabold {
    font-weight: 800 !important;
}

.lh-tight {
    line-height: var(--line-height-tight) !important;
}

.lh-snug {
    line-height: var(--line-height-snug) !important;
}

.lh-normal {
    line-height: var(--line-height-normal) !important;
}

.lh-relaxed {
    line-height: var(--line-height-relaxed) !important;
}

.fs-xs {
    font-size: var(--font-size-xs) !important;
}

.fs-s {
    font-size: var(--font-size-s) !important;
}

.fs-md {
    font-size: var(--font-size-md) !important;
}

.fs-lg {
    font-size: var(--font-size-lg) !important;
}

.fs-xl {
    font-size: var(--font-size-xl) !important;
}

.fs-2xl {
    font-size: var(--font-size-2xl) !important;
}

.fs-3xl {
    font-size: var(--font-size-3xl) !important;
}

.fs-4xl {
    font-size: var(--font-size-4xl) !important;
}

.fs-5xl {
    font-size: var(--font-size-5xl) !important;
}

.text-white {
    color: var(--color-white) !important;
}

.text-black {
    color: var(--color-black) !important;
}

.text-accent {
    color: var(--color-accent) !important;
}

.text-muted {
    color: var(--color-text-muted) !important;
}

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

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

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

.transition-color {
    transition: color 0.2s ease !important;
}

.transition-bg {
    transition: background-color 0.2s ease, background 0.2s ease !important;
}

.transition-border {
    transition: border-color 0.2s ease !important;
}

.transition-transform {
    transition: transform 0.2s ease !important;
}

.transition-shadow {
    transition: box-shadow 0.2s ease !important;
}

.transition-all {
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease !important;
}

.hover-color-text,
.hover-color-muted,
.hover-color-accent,
.hover-color-accent-dark,
.hover-color-accent-light,
.hover-color-white,
.hover-color-black {
    transition: color 0.2s ease !important;
}

.hover-color-text:hover {
    color: var(--color-text) !important;
}

.hover-color-muted:hover {
    color: var(--color-text-muted) !important;
}

.hover-color-accent:hover {
    color: var(--color-accent) !important;
}

.hover-color-accent-dark:hover {
    color: var(--color-accent-dark) !important;
}

.hover-color-accent-light:hover {
    color: var(--color-accent-light) !important;
}

.hover-color-white:hover {
    color: var(--color-white) !important;
}

.hover-color-black:hover {
    color: var(--color-black) !important;
}

.hover-bg-accent,
.hover-bg-surface,
.hover-bg-surface-soft,
.hover-bg-accent-transparent {
    transition: background-color 0.2s ease, background 0.2s ease !important;
}

.hover-bg-accent:hover {
    background: var(--color-accent) !important;
}

.hover-bg-surface:hover {
    background: var(--color-surface) !important;
}

.hover-bg-surface-soft:hover {
    background: var(--color-surface-soft) !important;
}

.hover-bg-accent-transparent:hover {
    background: var(--color-accent-transparent) !important;
}

.hover-border-accent,
.hover-border-strong,
.hover-border-white {
    transition: border-color 0.2s ease !important;
}

.hover-border-accent:hover {
    border-color: var(--color-accent) !important;
}

.hover-border-strong:hover {
    border-color: var(--color-border-strong) !important;
}

.hover-border-white:hover {
    border-color: var(--color-white-transparent) !important;
}

.hover-shadow-s,
.hover-shadow-md,
.hover-shadow-lg {
    transition: box-shadow 0.2s ease !important;
}

.hover-shadow-s:hover {
    box-shadow: var(--shadow-s) !important;
}

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

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

.hover-lift {
    transition: transform 0.2s ease !important;
}

.hover-lift:hover {
    transform: translateY(-2px);
}

.focus-color-text,
.focus-color-muted,
.focus-color-accent,
.focus-color-accent-dark,
.focus-color-accent-light,
.focus-color-white,
.focus-color-black {
    transition: color 0.2s ease !important;
}

.focus-color-text:focus,
.focus-color-text:focus-visible {
    color: var(--color-text) !important;
}

.focus-color-muted:focus,
.focus-color-muted:focus-visible {
    color: var(--color-text-muted) !important;
}

.focus-color-accent:focus,
.focus-color-accent:focus-visible {
    color: var(--color-accent) !important;
}

.focus-color-accent-dark:focus,
.focus-color-accent-dark:focus-visible {
    color: var(--color-accent-dark) !important;
}

.focus-color-accent-light:focus,
.focus-color-accent-light:focus-visible {
    color: var(--color-accent-light) !important;
}

.focus-color-white:focus,
.focus-color-white:focus-visible {
    color: var(--color-white) !important;
}

.focus-color-black:focus,
.focus-color-black:focus-visible {
    color: var(--color-black) !important;
}

.focus-bg-accent,
.focus-bg-surface,
.focus-bg-surface-soft,
.focus-bg-accent-transparent {
    transition: background-color 0.2s ease, background 0.2s ease !important;
}

.focus-bg-accent:focus,
.focus-bg-accent:focus-visible {
    background: var(--color-accent) !important;
}

.focus-bg-surface:focus,
.focus-bg-surface:focus-visible {
    background: var(--color-surface) !important;
}

.focus-bg-surface-soft:focus,
.focus-bg-surface-soft:focus-visible {
    background: var(--color-surface-soft) !important;
}

.focus-bg-accent-transparent:focus,
.focus-bg-accent-transparent:focus-visible {
    background: var(--color-accent-transparent) !important;
}

.focus-border-accent,
.focus-border-strong,
.focus-border-white {
    transition: border-color 0.2s ease !important;
}

.focus-border-accent:focus,
.focus-border-accent:focus-visible {
    border-color: var(--color-accent) !important;
}

.focus-border-strong:focus,
.focus-border-strong:focus-visible {
    border-color: var(--color-border-strong) !important;
}

.focus-border-white:focus,
.focus-border-white:focus-visible {
    border-color: var(--color-white-transparent) !important;
}

.focus-shadow-s,
.focus-shadow-md,
.focus-shadow-lg {
    transition: box-shadow 0.2s ease !important;
}

.focus-shadow-s:focus,
.focus-shadow-s:focus-visible {
    box-shadow: var(--shadow-s) !important;
}

.focus-shadow-md:focus,
.focus-shadow-md:focus-visible {
    box-shadow: var(--shadow-md) !important;
}

.focus-shadow-lg:focus,
.focus-shadow-lg:focus-visible {
    box-shadow: var(--shadow-lg) !important;
}

.focus-lift,
.focus-scale-sm,
.focus-scale-md {
    transition: transform 0.2s ease !important;
}

.focus-lift:focus,
.focus-lift:focus-visible {
    transform: translateY(-2px);
}

.focus-scale-sm:focus,
.focus-scale-sm:focus-visible {
    transform: scale(1.02);
}

.focus-scale-md:focus,
.focus-scale-md:focus-visible {
    transform: scale(1.04);
}

.focus-ring-accent,
.focus-ring-white,
.focus-ring-none {
    transition: box-shadow 0.2s ease, outline-color 0.2s ease !important;
}

.focus-ring-accent:focus,
.focus-ring-accent:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 30%, transparent) !important;
}

.focus-ring-white:focus,
.focus-ring-white:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgb(var(--color-white-rgb) / 0.22) !important;
}

.focus-ring-none:focus,
.focus-ring-none:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.active-color-text:active,
.active-color-muted:active,
.active-color-accent:active,
.active-color-accent-dark:active,
.active-color-accent-light:active,
.active-color-white:active,
.active-color-black:active {
    transition: color 0.12s ease !important;
}

.active-color-text:active {
    color: var(--color-text) !important;
}

.active-color-muted:active {
    color: var(--color-text-muted) !important;
}

.active-color-accent:active {
    color: var(--color-accent) !important;
}

.active-color-accent-dark:active {
    color: var(--color-accent-dark) !important;
}

.active-color-accent-light:active {
    color: var(--color-accent-light) !important;
}

.active-color-white:active {
    color: var(--color-white) !important;
}

.active-color-black:active {
    color: var(--color-black) !important;
}

.active-bg-accent,
.active-bg-surface,
.active-bg-surface-soft,
.active-bg-accent-transparent {
    transition: background-color 0.12s ease, background 0.12s ease !important;
}

.active-bg-accent:active {
    background: var(--color-accent) !important;
}

.active-bg-surface:active {
    background: var(--color-surface) !important;
}

.active-bg-surface-soft:active {
    background: var(--color-surface-soft) !important;
}

.active-bg-accent-transparent:active {
    background: var(--color-accent-transparent) !important;
}

.active-border-accent,
.active-border-strong,
.active-border-white {
    transition: border-color 0.12s ease !important;
}

.active-border-accent:active {
    border-color: var(--color-accent) !important;
}

.active-border-strong:active {
    border-color: var(--color-border-strong) !important;
}

.active-border-white:active {
    border-color: var(--color-white-transparent) !important;
}

.active-shadow-s,
.active-shadow-md,
.active-shadow-lg {
    transition: box-shadow 0.12s ease !important;
}

.active-shadow-s:active {
    box-shadow: var(--shadow-s) !important;
}

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

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

.active-lift,
.active-scale-down,
.active-scale-up {
    transition: transform 0.12s ease !important;
}

.active-lift:active {
    transform: translateY(-1px);
}

.active-scale-down:active {
    transform: scale(0.98);
}

.active-scale-up:active {
    transform: scale(1.02);
}

.interactive {
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease !important;
}

.disabled,
.is-disabled {
    opacity: 0.5 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}

.bg-transparent {
    background: transparent !important;
}

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

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

.bg-accent {
    background: var(--color-accent) !important;
}

.bg-accent-dark {
    background: var(--color-accent-dark) !important;
}

.bg-accent-light {
    background: var(--color-accent-light) !important;
}

.bg-accent-transparent {
    background: var(--color-accent-transparent) !important;
}

.bg-surface {
    background: var(--color-surface) !important;
}

.bg-surface-soft {
    background: var(--color-surface-soft) !important;
}

.border-0 {
    border: 0 !important;
}

.border-accent {
    border: 1px solid var(--color-accent) !important;
}

.border-white {
    border: 1px solid var(--color-white-transparent) !important;
}

.border-strong {
    border-color: var(--color-border-strong) !important;
}

.shadow-xs {
    box-shadow: var(--shadow-xs) !important;
}

.shadow-s {
    box-shadow: var(--shadow-s) !important;
}

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

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

.shadow-xl {
    box-shadow: var(--shadow-xl) !important;
}

.rounded-0 {
    border-radius: var(--radius-0) !important;
}

.rounded-xs {
    border-radius: var(--radius-xs) !important;
}

.rounded-s {
    border-radius: var(--radius-s) !important;
}

.rounded-md {
    border-radius: var(--radius-md) !important;
}

.rounded-lg {
    border-radius: var(--radius-lg) !important;
}

.rounded-xl {
    border-radius: var(--radius-xl) !important;
}

.rounded-2xl {
    border-radius: var(--radius-2xl) !important;
}

.rounded-3xl {
    border-radius: var(--radius-3xl) !important;
}

.rounded-4xl {
    border-radius: var(--radius-4xl) !important;
}

.rounded-5xl {
    border-radius: var(--radius-5xl) !important;
}

.rounded-full {
    border-radius: var(--radius-full) !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

.cursor-default {
    cursor: default !important;
}

.pointer-events-none {
    pointer-events: none !important;
}

.pointer-events-auto {
    pointer-events: auto !important;
}

.w-auto {
    width: auto !important;
}

.w-full {
    width: 100% !important;
}

.h-auto {
    height: auto !important;
}

.h-full {
    height: 100% !important;
}

.min-h-screen {
    min-height: 100svh !important;
}

.max-w-xs {
    max-width: var(--container-xs) !important;
}

.max-w-s {
    max-width: var(--container-s) !important;
}

.max-w-md {
    max-width: var(--container-md) !important;
}

.max-w-lg {
    max-width: var(--container-lg) !important;
}

.max-w-xl {
    max-width: var(--container-xl) !important;
}

.max-w-2xl {
    max-width: var(--container-2xl) !important;
}

.wrapper-adaptive {
    width: min(100% - (var(--wrapper-fluid-padding) * 2), var(--wrapper-adaptive-width)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.w-5p { width: 5% !important; }
.w-10p { width: 10% !important; }
.w-15p { width: 15% !important; }
.w-20p { width: 20% !important; }
.w-25p { width: 25% !important; }
.w-30p { width: 30% !important; }
.w-33p { width: 33.3333% !important; }
.w-40p { width: 40% !important; }
.w-50p { width: 50% !important; }
.w-60p { width: 60% !important; }
.w-66p { width: 66.6666% !important; }
.w-70p { width: 70% !important; }
.w-75p { width: 75% !important; }
.w-80p { width: 80% !important; }
.w-90p { width: 90% !important; }
.w-95p { width: 95% !important; }
.w-100p { width: 100% !important; }

.h-5p { height: 5% !important; }
.h-10p { height: 10% !important; }
.h-15p { height: 15% !important; }
.h-20p { height: 20% !important; }
.h-25p { height: 25% !important; }
.h-30p { height: 30% !important; }
.h-33p { height: 33.3333% !important; }
.h-40p { height: 40% !important; }
.h-50p { height: 50% !important; }
.h-60p { height: 60% !important; }
.h-66p { height: 66.6666% !important; }
.h-70p { height: 70% !important; }
.h-75p { height: 75% !important; }
.h-80p { height: 80% !important; }
.h-90p { height: 90% !important; }
.h-95p { height: 95% !important; }
.h-100p { height: 100% !important; }

.m-0 { margin: 0 !important; }
.m-xs { margin: var(--size-xs) !important; }
.m-s { margin: var(--size-s) !important; }
.m-md { margin: var(--size-md) !important; }
.m-lg { margin: var(--size-lg) !important; }
.m-xl { margin: var(--size-xl) !important; }
.m-2xl { margin: var(--size-2xl) !important; }
.m-3xl { margin: var(--size-3xl) !important; }
.m-4xl { margin: var(--size-4xl) !important; }
.m-5xl { margin: var(--size-5xl) !important; }

.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-xs { margin-left: var(--size-xs) !important; margin-right: var(--size-xs) !important; }
.mx-s { margin-left: var(--size-s) !important; margin-right: var(--size-s) !important; }
.mx-md { margin-left: var(--size-md) !important; margin-right: var(--size-md) !important; }
.mx-lg { margin-left: var(--size-lg) !important; margin-right: var(--size-lg) !important; }
.mx-xl { margin-left: var(--size-xl) !important; margin-right: var(--size-xl) !important; }
.mx-2xl { margin-left: var(--size-2xl) !important; margin-right: var(--size-2xl) !important; }
.mx-3xl { margin-left: var(--size-3xl) !important; margin-right: var(--size-3xl) !important; }
.mx-4xl { margin-left: var(--size-4xl) !important; margin-right: var(--size-4xl) !important; }
.mx-5xl { margin-left: var(--size-5xl) !important; margin-right: var(--size-5xl) !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-xs { margin-top: var(--size-xs) !important; margin-bottom: var(--size-xs) !important; }
.my-s { margin-top: var(--size-s) !important; margin-bottom: var(--size-s) !important; }
.my-md { margin-top: var(--size-md) !important; margin-bottom: var(--size-md) !important; }
.my-lg { margin-top: var(--size-lg) !important; margin-bottom: var(--size-lg) !important; }
.my-xl { margin-top: var(--size-xl) !important; margin-bottom: var(--size-xl) !important; }
.my-2xl { margin-top: var(--size-2xl) !important; margin-bottom: var(--size-2xl) !important; }
.my-3xl { margin-top: var(--size-3xl) !important; margin-bottom: var(--size-3xl) !important; }
.my-4xl { margin-top: var(--size-4xl) !important; margin-bottom: var(--size-4xl) !important; }
.my-5xl { margin-top: var(--size-5xl) !important; margin-bottom: var(--size-5xl) !important; }

.mt-0 { margin-top: 0 !important; }
.mt-xs { margin-top: var(--size-xs) !important; }
.mt-s { margin-top: var(--size-s) !important; }
.mt-md { margin-top: var(--size-md) !important; }
.mt-lg { margin-top: var(--size-lg) !important; }
.mt-xl { margin-top: var(--size-xl) !important; }
.mt-2xl { margin-top: var(--size-2xl) !important; }
.mt-3xl { margin-top: var(--size-3xl) !important; }
.mt-4xl { margin-top: var(--size-4xl) !important; }
.mt-5xl { margin-top: var(--size-5xl) !important; }

.mr-0 { margin-right: 0 !important; }
.mr-xs { margin-right: var(--size-xs) !important; }
.mr-s { margin-right: var(--size-s) !important; }
.mr-md { margin-right: var(--size-md) !important; }
.mr-lg { margin-right: var(--size-lg) !important; }
.mr-xl { margin-right: var(--size-xl) !important; }
.mr-2xl { margin-right: var(--size-2xl) !important; }
.mr-3xl { margin-right: var(--size-3xl) !important; }
.mr-4xl { margin-right: var(--size-4xl) !important; }
.mr-5xl { margin-right: var(--size-5xl) !important; }
.mr-auto { margin-right: auto !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-xs { margin-bottom: var(--size-xs) !important; }
.mb-s { margin-bottom: var(--size-s) !important; }
.mb-md { margin-bottom: var(--size-md) !important; }
.mb-lg { margin-bottom: var(--size-lg) !important; }
.mb-xl { margin-bottom: var(--size-xl) !important; }
.mb-2xl { margin-bottom: var(--size-2xl) !important; }
.mb-3xl { margin-bottom: var(--size-3xl) !important; }
.mb-4xl { margin-bottom: var(--size-4xl) !important; }
.mb-5xl { margin-bottom: var(--size-5xl) !important; }

.ml-0 { margin-left: 0 !important; }
.ml-xs { margin-left: var(--size-xs) !important; }
.ml-s { margin-left: var(--size-s) !important; }
.ml-md { margin-left: var(--size-md) !important; }
.ml-lg { margin-left: var(--size-lg) !important; }
.ml-xl { margin-left: var(--size-xl) !important; }
.ml-2xl { margin-left: var(--size-2xl) !important; }
.ml-3xl { margin-left: var(--size-3xl) !important; }
.ml-4xl { margin-left: var(--size-4xl) !important; }
.ml-5xl { margin-left: var(--size-5xl) !important; }
.ml-auto { margin-left: auto !important; }

.p-0 { padding: 0 !important; }
.p-xs { padding: var(--size-xs) !important; }
.p-s { padding: var(--size-s) !important; }
.p-md { padding: var(--size-md) !important; }
.p-lg { padding: var(--size-lg) !important; }
.p-xl { padding: var(--size-xl) !important; }
.p-2xl { padding: var(--size-2xl) !important; }
.p-3xl { padding: var(--size-3xl) !important; }
.p-4xl { padding: var(--size-4xl) !important; }
.p-5xl { padding: var(--size-5xl) !important; }

.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-xs { padding-left: var(--size-xs) !important; padding-right: var(--size-xs) !important; }
.px-s { padding-left: var(--size-s) !important; padding-right: var(--size-s) !important; }
.px-md { padding-left: var(--size-md) !important; padding-right: var(--size-md) !important; }
.px-lg { padding-left: var(--size-lg) !important; padding-right: var(--size-lg) !important; }
.px-xl { padding-left: var(--size-xl) !important; padding-right: var(--size-xl) !important; }
.px-2xl { padding-left: var(--size-2xl) !important; padding-right: var(--size-2xl) !important; }
.px-3xl { padding-left: var(--size-3xl) !important; padding-right: var(--size-3xl) !important; }
.px-4xl { padding-left: var(--size-4xl) !important; padding-right: var(--size-4xl) !important; }
.px-5xl { padding-left: var(--size-5xl) !important; padding-right: var(--size-5xl) !important; }

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-xs { padding-top: var(--size-xs) !important; padding-bottom: var(--size-xs) !important; }
.py-s { padding-top: var(--size-s) !important; padding-bottom: var(--size-s) !important; }
.py-md { padding-top: var(--size-md) !important; padding-bottom: var(--size-md) !important; }
.py-lg { padding-top: var(--size-lg) !important; padding-bottom: var(--size-lg) !important; }
.py-xl { padding-top: var(--size-xl) !important; padding-bottom: var(--size-xl) !important; }
.py-2xl { padding-top: var(--size-2xl) !important; padding-bottom: var(--size-2xl) !important; }
.py-3xl { padding-top: var(--size-3xl) !important; padding-bottom: var(--size-3xl) !important; }
.py-4xl { padding-top: var(--size-4xl) !important; padding-bottom: var(--size-4xl) !important; }
.py-5xl { padding-top: var(--size-5xl) !important; padding-bottom: var(--size-5xl) !important; }

.pt-0 { padding-top: 0 !important; }
.pt-xs { padding-top: var(--size-xs) !important; }
.pt-s { padding-top: var(--size-s) !important; }
.pt-md { padding-top: var(--size-md) !important; }
.pt-lg { padding-top: var(--size-lg) !important; }
.pt-xl { padding-top: var(--size-xl) !important; }
.pt-2xl { padding-top: var(--size-2xl) !important; }
.pt-3xl { padding-top: var(--size-3xl) !important; }
.pt-4xl { padding-top: var(--size-4xl) !important; }
.pt-5xl { padding-top: var(--size-5xl) !important; }

.pr-0 { padding-right: 0 !important; }
.pr-xs { padding-right: var(--size-xs) !important; }
.pr-s { padding-right: var(--size-s) !important; }
.pr-md { padding-right: var(--size-md) !important; }
.pr-lg { padding-right: var(--size-lg) !important; }
.pr-xl { padding-right: var(--size-xl) !important; }
.pr-2xl { padding-right: var(--size-2xl) !important; }
.pr-3xl { padding-right: var(--size-3xl) !important; }
.pr-4xl { padding-right: var(--size-4xl) !important; }
.pr-5xl { padding-right: var(--size-5xl) !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-xs { padding-bottom: var(--size-xs) !important; }
.pb-s { padding-bottom: var(--size-s) !important; }
.pb-md { padding-bottom: var(--size-md) !important; }
.pb-lg { padding-bottom: var(--size-lg) !important; }
.pb-xl { padding-bottom: var(--size-xl) !important; }
.pb-2xl { padding-bottom: var(--size-2xl) !important; }
.pb-3xl { padding-bottom: var(--size-3xl) !important; }
.pb-4xl { padding-bottom: var(--size-4xl) !important; }
.pb-5xl { padding-bottom: var(--size-5xl) !important; }

.pl-0 { padding-left: 0 !important; }
.pl-xs { padding-left: var(--size-xs) !important; }
.pl-s { padding-left: var(--size-s) !important; }
.pl-md { padding-left: var(--size-md) !important; }
.pl-lg { padding-left: var(--size-lg) !important; }
.pl-xl { padding-left: var(--size-xl) !important; }
.pl-2xl { padding-left: var(--size-2xl) !important; }
.pl-3xl { padding-left: var(--size-3xl) !important; }
.pl-4xl { padding-left: var(--size-4xl) !important; }
.pl-5xl { padding-left: var(--size-5xl) !important; }

.gap-0 { gap: 0 !important; }
.gap-xs { gap: var(--size-xs) !important; }
.gap-s { gap: var(--size-s) !important; }
.gap-md { gap: var(--size-md) !important; }
.gap-lg { gap: var(--size-lg) !important; }
.gap-xl { gap: var(--size-xl) !important; }
.gap-2xl { gap: var(--size-2xl) !important; }
.gap-3xl { gap: var(--size-3xl) !important; }
.gap-4xl { gap: var(--size-4xl) !important; }
.gap-5xl { gap: var(--size-5xl) !important; }

body .popup-wrapper {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 2vw, 2rem);
    overflow-y: auto;
    background: rgb(var(--color-black-rgb) / 0.32);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

body .popup {
    position: relative;
    width: min(100%, 42rem);
    padding: clamp(1.25rem, 2vw, 2rem);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-2xl);
    background:
        linear-gradient(180deg, rgb(255 255 255 / 0.03), rgb(255 255 255 / 0.01)),
        linear-gradient(145deg, var(--color-background) 0%, var(--color-surface) 100%);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

body .popup::before {
    content: "";
    position: absolute;
    inset: auto auto -15% -10%;
    width: 14rem;
    height: 14rem;
    border-radius: 50%;
    background: var(--color-accent-transparent);
    filter: blur(40px);
    pointer-events: none;
}

body .popup > c-m-s {
    position: relative;
    z-index: 1;
    display: block;
    margin-bottom: var(--size-xl);
    color: var(--color-text);
}

body .popup > c-m-s > *:last-child,
body .popup > c-m-s p:last-child {
    margin-bottom: 0;
}

body .popup-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--size-md);
    margin-top: var(--size-xl);
}

body .popup-actions sub {
    margin-right: auto;
    color: var(--color-text-muted);
}

body .popup-actions .btn-semi,
body .popup-actions .btn-light,
body .popup-actions button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.875rem 1.25rem !important;
    border-radius: var(--radius-full) !important;
    cursor: pointer;
    text-decoration: none;
}

body .popup-actions .btn-semi,
body .popup-actions button {
    background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent)) !important;
    color: var(--color-black) !important;
    border-color: transparent !important;
}

body .popup-actions .btn-light {
    background: rgb(var(--color-white-rgb) / 0.04) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

body .cookies-screen-background {
    position: fixed;
    inset: 0;
    z-index: 8998;
    background:
        linear-gradient(180deg, rgb(4 9 18 / 0.84), rgb(4 9 18 / 0.92)),
        radial-gradient(circle at top left, rgb(118 162 255 / 0.18), transparent 28%),
        radial-gradient(circle at top right, rgb(255 237 179 / 0.14), transparent 24%);
    backdrop-filter: blur(14px);
}

body .cookies-wrapper {
    z-index: 8999;
}

body .cookies-wrapper .popup {
    width: min(100%, 70rem);
    padding: clamp(1rem, 1.8vw, 1.5rem);
}

body .cookies-shell {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--size-lg);
}

body .cookies-content {
    display: grid;
    gap: var(--size-md);
}

body .cookies-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--size-s);
    width: fit-content;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: rgb(var(--color-white-rgb) / 0.04);
    color: var(--color-accent-light);
    font-size: var(--font-size-s);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body .cookies-headline {
    display: flex;
    align-items: center;
    gap: var(--size-md);
    margin: 0;
    color: var(--color-white);
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    font-weight: 700;
    line-height: var(--line-height-tight);
}

body .cookies-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-accent-transparent);
    color: var(--color-accent);
    font-size: 1.1rem;
}

body .cookies-text {
    max-width: 48rem;
    margin: 0;
    color: var(--color-text-muted);
}

body .cookies-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--size-md);
}

body .cookies-summary-item {
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: rgb(var(--color-white-rgb) / 0.03);
}

body .cookies-summary-label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--color-white);
    font-size: var(--font-size-s);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

body .cookies-summary-item span:last-child {
    color: var(--color-text-muted);
    font-size: var(--font-size-s);
}

body .cookies-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--size-lg);
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: rgb(var(--color-white-rgb) / 0.025);
}

body .cookie-settings {
    display: inline-flex;
    align-items: center;
    gap: var(--size-s);
    color: var(--color-accent-light);
    font-size: var(--font-size-s);
    font-weight: 700;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}

body .cookie-settings:hover {
    color: var(--color-accent);
    transform: translateX(2px);
}

body .cookie-settings i {
    font-size: 0.85em;
}

body #cookies_description,
body #cookies_list {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease, padding 0.3s ease;
}

body #cookies_description {
    max-height: 32rem;
}

body .cookies-list {
    max-height: 0;
    opacity: 0.72;
}

body .cookies-categories {
    display: grid;
    gap: var(--size-lg);
}

body .cookies-category {
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    background:
        linear-gradient(180deg, rgb(255 255 255 / 0.03), rgb(255 255 255 / 0.01)),
        rgb(255 255 255 / 0.02);
}

body .cookies-category-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--size-md);
    margin-bottom: var(--size-md);
}

body .cookies-category-title {
    color: var(--color-white);
    font-size: var(--font-size-lg);
    font-weight: 700;
}

body .cookies-category-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.65rem;
    border-radius: var(--radius-full);
    background: var(--color-accent-transparent);
    color: var(--color-accent-light);
    font-size: var(--font-size-s);
    font-weight: 700;
}

body .cookies-category-items {
    display: grid;
    gap: var(--size-md);
}

body .cookie-info-elem {
    padding: 1rem;
    border: 1px solid rgb(var(--color-white-rgb) / 0.06);
    border-radius: var(--radius-xl);
    background: rgb(var(--color-black-rgb) / 0.16);
}

body .cookie-item-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--size-md);
    margin-bottom: var(--size-s);
}

body .cookie-name {
    color: var(--color-white);
    font-size: var(--font-size-md);
    font-weight: 700;
}

body .cookie-purpose,
body .cookie-keys,
body .cookie-description {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-s);
}

body .cookie-purpose {
    margin-bottom: var(--size-s);
    color: var(--color-accent-light);
    font-weight: 600;
}

body .cookie-retention {
    display: inline-flex;
    align-items: center;
    gap: var(--size-xs);
    padding: 0.35rem 0.65rem;
    border-radius: var(--radius-full);
    background: rgb(var(--color-white-rgb) / 0.06);
    color: var(--color-white-soft);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body .cookies-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--size-md);
}

body .cookies-navigation-hint {
    width: 100%;
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-s);
    text-align: right;
}

@media (max-width: 960px) {
    .tablet-hide {
        display: none !important;
    }

    .header-remote-menu-trigger {
        min-height: 42px;
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
        font-size: var(--font-size-xs);
    }

    .header-brand-text {
        margin-left: var(--size-md) !important;
        font-size: var(--font-size-lg) !important;
    }

    .header-shell {
        gap: var(--size-md) !important;
    }

    .grid-cols-4,
    .grid-cols-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .fs-4xl {
        font-size: 2.25rem !important;
    }

    .fs-5xl {
        font-size: 3rem !important;
    }

    body .cookies-summary {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .mobile-hide {
        display: none !important;
    }

    .header-username,
    .header-remote-menu {
        display: none !important;
    }

    .header-brand img {
        height: 38px !important;
    }

    .header-brand-text {
        margin-left: var(--size-s) !important;
        font-size: var(--font-size-md) !important;
    }

    .header-mobile-menu {
        padding-left: var(--size-md);
        padding-right: var(--size-md);
    }

    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .grid-cols-5 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    .w-50p,
    .w-60p,
    .w-66p,
    .w-70p,
    .w-75p,
    .w-80p,
    .w-90p,
    .w-95p {
        width: 100% !important;
    }

    body .popup {
        padding: 1rem;
        border-radius: var(--radius-xl);
    }

    body .popup-actions,
    body .cookies-nav {
        justify-content: stretch;
    }

    body .popup-actions .btn-semi,
    body .popup-actions .btn-light,
    body .popup-actions button,
    body .cookies-nav .btn-semi,
    body .cookies-nav .btn-light,
    body .cookies-nav button {
        width: 100%;
    }

    body .cookies-toggle-row,
    body .cookie-item-top,
    body .cookies-category-head {
        align-items: flex-start;
        flex-direction: column;
    }

    body .cookies-navigation-hint {
        text-align: left;
    }
}

@media (min-width: 961px) {
    .desktop-hide {
        display: none !important;
    }
}

@media (min-width: 1280px) {
    :root {
        --wrapper-adaptive-width: 1040px;
        --wrapper-fluid-padding: 1.25rem;
    }
}

@media (min-width: 1500px) {
    :root {
        --wrapper-adaptive-width: 1440px;
        --wrapper-fluid-padding: 1.5rem;
    }
}

@media (min-width: 3440px) {
    :root {
        --wrapper-adaptive-width: 1920px;
        --wrapper-fluid-padding: 2rem;
    }
}