:root {
    --bg-base-rgb: 8 20 35;
    --bg-start: #081423;
    --bg-end: #10203a;
    --bg-spot-a: rgb(56 189 248 / 0.16);
    --bg-spot-b: rgb(251 191 36 / 0.10);

    --surface-rgb: 16 28 49;
    --surface-2-rgb: 23 39 67;
    --surface-3-rgb: 33 55 92;
    --surface-contrast-rgb: 7 15 28;
    --line-rgb: 120 143 172;
    --shadow-rgb: 0 0 0;
    --backdrop-rgb: 6 13 25;

    --text-main: #eef6ff;
    --text-strong: #d9e8fb;
    --text-subtle: #bfd2ee;
    --text-muted: #8fa6c6;

    --surface: rgb(var(--surface-rgb));
    --surface-2: rgb(var(--surface-2-rgb));
    --surface-3: rgb(var(--surface-3-rgb));

    --overlay-soft: rgb(255 255 255 / 0.06);
    --overlay-strong: rgb(255 255 255 / 0.11);

    --border-soft: rgb(120 143 172 / 0.24);
    --border-strong: rgb(120 143 172 / 0.38);

    --primary-rgb: 56 189 248;
    --secondary-rgb: 251 191 36;
    --success-rgb: 52 211 153;
    --warning-rgb: 245 158 11;
    --danger-rgb: 248 113 113;
    --info-rgb: 96 165 250;
    --pink-rgb: 244 114 182;
    --violet-rgb: 167 139 250;
    --indigo-rgb: 129 140 248;

    --text-on-accent: #041c2c;
    --text-on-accent-rgb: 4 28 44;
    --text-on-success: #052317;
    --text-on-info: #071b37;
    --text-on-warning: #281704;
    --text-on-danger: #300a12;

    --card-shadow: 0 26px 52px -30px rgb(0 0 0 / 0.72), 0 14px 26px -18px rgb(0 0 0 / 0.42);
    --nav-surface: rgb(8 17 31 / 0.80);
    --nav-border: rgb(120 143 172 / 0.22);
    --nav-shadow: 0 16px 38px -28px rgb(0 0 0 / 0.70);

    --focus-ring: rgb(56 189 248 / 0.26);
    --focus-border: #6bd6ff;

    --tooltip-bg: rgb(8 17 31 / 0.94);
    --tooltip-border: rgb(120 143 172 / 0.18);
    --chart-grid: rgb(120 143 172 / 0.14);
    --chart-tick: #8fa6c6;
    --scrollbar-thumb: rgb(120 143 172 / 0.28);
    --scrollbar-thumb-hover: rgb(120 143 172 / 0.42);
}

html {
    color-scheme: dark;
}

html,
body {
    min-height: 100%;
}

body {
    color: var(--text-main);
    background:
        radial-gradient(1400px circle at -10% -20%, var(--bg-spot-a), transparent 56%),
        radial-gradient(1200px circle at 110% -25%, var(--bg-spot-b), transparent 52%),
        linear-gradient(165deg, var(--bg-start) 0%, var(--bg-end) 100%);
    background-attachment: fixed;
}

::selection {
    background: rgb(var(--primary-rgb) / 0.22);
    color: var(--text-on-accent);
}

.glass,
.glass-nav {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    background: var(--nav-surface) !important;
    border-color: var(--nav-border) !important;
    box-shadow: var(--nav-shadow) !important;
}

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

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

.bg-fond {
    background-color: rgb(var(--bg-base-rgb)) !important;
}

[class*="bg-surface"][class*="rounded"],
[class*="bg-surface2"][class*="rounded"],
[class*="bg-gray-900"][class*="rounded"],
[class*="bg-gray-800"][class*="rounded"],
[class*="bg-gray-950"][class*="rounded"],
[class*="bg-white"][class*="rounded"] {
    border-color: var(--border-soft) !important;
    box-shadow: var(--card-shadow) !important;
}

.border-white\/5 {
    border-color: var(--border-soft) !important;
}

.border-white\/10,
.border-gray-700\/50 {
    border-color: var(--border-strong) !important;
}

.border-white\/20 {
    border-color: rgb(var(--line-rgb) / 0.34) !important;
}

.border-gray-800,
.border-gray-700,
.border-gray-600,
.border-gray-500,
.border-gray-300 {
    border-color: var(--border-soft) !important;
}

.hover\:border-gray-500:hover,
.hover\:border-gray-600:hover,
.hover\:border-gray-700:hover,
.hover\:border-white\/10:hover,
.hover\:border-white\/20:hover {
    border-color: var(--border-strong) !important;
}

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

.bg-white\/5 {
    background-color: var(--overlay-soft) !important;
}

.bg-white\/10 {
    background-color: var(--overlay-strong) !important;
}

.bg-white\/20 {
    background-color: rgb(var(--surface-rgb) / 0.22) !important;
}

.bg-white\/30 {
    background-color: rgb(var(--surface-rgb) / 0.34) !important;
}

.hover\:bg-white\/5:hover,
.hover\:bg-white\/10:hover,
.hover\:bg-white\/\[0\.03\]:hover {
    background-color: var(--overlay-strong) !important;
}

.bg-black\/10 {
    background-color: rgb(var(--surface-contrast-rgb) / 0.08) !important;
}

.bg-black\/20 {
    background-color: rgb(var(--surface-contrast-rgb) / 0.14) !important;
}

.bg-black\/50 {
    background-color: rgb(var(--backdrop-rgb) / 0.44) !important;
}

.bg-black\/60 {
    background-color: rgb(var(--backdrop-rgb) / 0.54) !important;
}

.bg-black\/80 {
    background-color: rgb(var(--backdrop-rgb) / 0.70) !important;
}

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

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

.bg-gray-900\/90 {
    background-color: rgb(var(--surface-rgb) / 0.92) !important;
}

.bg-gray-950,
.bg-gray-950\/40 {
    background-color: rgb(var(--surface-contrast-rgb) / 0.44) !important;
}

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

.bg-gray-800\/50 {
    background-color: rgb(var(--surface-2-rgb) / 0.56) !important;
}

.bg-gray-800\/80 {
    background-color: rgb(var(--surface-2-rgb) / 0.82) !important;
}

.bg-gray-750,
.hover\:bg-gray-750:hover {
    background-color: var(--surface-3) !important;
}

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

.bg-gray-600 {
    background-color: rgb(var(--surface-3-rgb) / 0.88) !important;
}

.bg-gray-600\/50,
.bg-gray-500\/10 {
    background-color: rgb(var(--surface-3-rgb) / 0.22) !important;
}

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

.text-black,
.text-gray-900,
.hover\:text-gray-900:hover {
    color: var(--text-on-accent) !important;
}

.text-gray-200 {
    color: var(--text-strong) !important;
}

.text-gray-300 {
    color: var(--text-subtle) !important;
}

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

.text-gray-500,
.text-gray-600,
.text-gray-700 {
    color: var(--text-muted) !important;
}

.hover\:text-white:hover,
.group:hover .group-hover\:text-white {
    color: var(--text-main) !important;
}

.hover\:text-gray-300:hover,
.group:hover .group-hover\:text-gray-300 {
    color: var(--text-subtle) !important;
}

.hover\:text-gray-400:hover,
.group:hover .group-hover\:text-gray-400 {
    color: var(--text-muted) !important;
}

.text-blue-200 {
    color: rgb(var(--info-rgb) / 0.90) !important;
}

.text-blue-300,
.text-blue-400 {
    color: rgb(var(--info-rgb)) !important;
}

.text-cyan-300 {
    color: rgb(var(--primary-rgb)) !important;
}

.text-pink-400 {
    color: rgb(var(--pink-rgb)) !important;
}

.text-emerald-500,
.text-emerald-400,
.text-green-400,
.group:hover .group-hover\:text-emerald-400 {
    color: rgb(var(--success-rgb)) !important;
}

.text-emerald-200,
.text-green-800 {
    color: rgb(var(--success-rgb) / 0.88) !important;
}

.text-red-800,
.text-red-500,
.text-red-400,
.group:hover .group-hover\:text-red-400 {
    color: rgb(var(--danger-rgb)) !important;
}

.text-red-300,
.text-red-200 {
    color: rgb(var(--danger-rgb) / 0.86) !important;
}

.text-red-200\/70 {
    color: rgb(var(--danger-rgb) / 0.76) !important;
}

.text-orange-500,
.text-orange-400,
.text-orange-300,
.text-yellow-400,
.group:hover .group-hover\:text-orange-500,
.group:hover .group-hover\:text-orange-400,
.group:hover .group-hover\:text-orange-300 {
    color: rgb(var(--warning-rgb)) !important;
}

.text-orange-200,
.text-orange-100,
.text-amber-100,
.text-amber-300 {
    color: rgb(var(--warning-rgb) / 0.90) !important;
}

.text-orange-400\/80 {
    color: rgb(var(--warning-rgb) / 0.82) !important;
}

.bg-primary.text-white,
.bg-primary.text-gray-900,
.bg-primary.text-black,
.bg-secondary.text-white,
.bg-secondary.text-gray-900,
.bg-secondary.text-black {
    color: var(--text-on-accent) !important;
}

.bg-blue-500.text-white,
.bg-blue-600.text-white,
.bg-blue-700.text-white {
    color: var(--text-on-info) !important;
}

.bg-emerald-400.text-white,
.bg-emerald-500.text-white,
.bg-green-500.text-white,
.bg-green-600.text-white {
    color: var(--text-on-success) !important;
}

.bg-red-500.text-white,
.bg-red-600.text-white,
.bg-red-700.text-white {
    color: var(--text-on-danger) !important;
}

.bg-orange-500.text-white,
.bg-yellow-400.text-white,
.bg-amber-300.text-white {
    color: var(--text-on-warning) !important;
}

.peer:checked ~ .peer-checked\:text-gray-900,
.peer:checked ~ .peer-checked\:text-black {
    color: var(--text-on-accent) !important;
}

.modal-category-card {
    position: relative;
    overflow: hidden;
    transition:
        transform 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        color 180ms ease;
}

.modal-category-icon {
    transition: transform 180ms ease;
}

.modal-category-check {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    width: 1.4rem;
    height: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgb(var(--primary-rgb));
    color: var(--text-on-accent);
    box-shadow: 0 10px 24px rgb(var(--shadow-rgb) / 0.28);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 180ms ease, transform 180ms ease;
    pointer-events: none;
}

.modal-category-choice .peer:focus-visible + .modal-category-card {
    border-color: var(--focus-border) !important;
    box-shadow: 0 0 0 3px var(--focus-ring) !important;
}

.modal-category-choice .peer:checked + .modal-category-card {
    background: linear-gradient(
        135deg,
        rgb(var(--primary-rgb) / 0.26),
        rgb(var(--primary-rgb) / 0.12)
    ) !important;
    border-color: rgb(var(--primary-rgb) / 0.72) !important;
    color: var(--text-main) !important;
    box-shadow:
        0 0 0 1px rgb(var(--primary-rgb) / 0.18),
        0 14px 32px rgb(var(--shadow-rgb) / 0.24),
        0 0 18px rgb(var(--primary-rgb) / 0.16) !important;
    transform: translateY(-1px);
}

.modal-category-choice .peer:checked + .modal-category-card .modal-category-check {
    opacity: 1;
    transform: scale(1);
}

.modal-category-choice .peer:checked + .modal-category-card .modal-category-icon {
    transform: scale(1.08);
}

.bg-blue-500,
.bg-blue-600,
.bg-blue-700 {
    background-color: rgb(var(--info-rgb)) !important;
}

.hover\:bg-blue-400:hover,
.hover\:bg-blue-500:hover,
.hover\:bg-blue-700:hover {
    background-color: rgb(var(--info-rgb) / 0.90) !important;
}

.bg-green-100,
.bg-emerald-400\/10,
.bg-emerald-500\/10,
.bg-emerald-500\/15,
.bg-emerald-500\/20,
.bg-green-500\/10 {
    background-color: rgb(var(--success-rgb) / 0.12) !important;
}

.bg-emerald-400,
.bg-emerald-500,
.bg-green-500,
.bg-green-600 {
    background-color: rgb(var(--success-rgb)) !important;
}

.hover\:bg-emerald-400:hover,
.hover\:bg-emerald-500:hover,
.hover\:bg-green-500:hover,
.hover\:bg-green-600:hover {
    background-color: rgb(var(--success-rgb) / 0.90) !important;
}

.bg-red-100,
.bg-red-500\/10,
.bg-red-500\/20 {
    background-color: rgb(var(--danger-rgb) / 0.12) !important;
}

.bg-red-400,
.bg-red-500,
.bg-red-600,
.bg-red-700 {
    background-color: rgb(var(--danger-rgb)) !important;
}

.hover\:bg-red-500:hover,
.hover\:bg-red-700:hover {
    background-color: rgb(var(--danger-rgb) / 0.90) !important;
}

.bg-orange-500\/10,
.bg-orange-500\/15,
.bg-orange-500\/20,
.bg-orange-300\/30,
.bg-amber-300\/10,
.bg-amber-500\/10 {
    background-color: rgb(var(--warning-rgb) / 0.12) !important;
}

.bg-orange-500,
.bg-amber-300,
.bg-yellow-400 {
    background-color: rgb(var(--warning-rgb)) !important;
}

.hover\:bg-orange-500:hover,
.hover\:bg-yellow-400:hover {
    background-color: rgb(var(--warning-rgb) / 0.90) !important;
}

.border-blue-500,
.border-blue-500\/20 {
    border-color: rgb(var(--info-rgb) / 0.28) !important;
}

.border-green-500,
.border-green-500\/30,
.border-emerald-500,
.border-emerald-500\/20,
.border-emerald-500\/30 {
    border-color: rgb(var(--success-rgb) / 0.28) !important;
}

.border-red-500,
.border-red-500\/20,
.border-red-500\/30,
.border-red-500\/50 {
    border-color: rgb(var(--danger-rgb) / 0.28) !important;
}

.border-orange-500,
.border-orange-500\/20,
.border-orange-500\/30,
.border-orange-500\/50,
.border-amber-400,
.border-amber-400\/30 {
    border-color: rgb(var(--warning-rgb) / 0.28) !important;
}

.hover\:border-red-500:hover,
.hover\:border-red-500\/30:hover {
    border-color: rgb(var(--danger-rgb) / 0.36) !important;
}

.hover\:border-orange-500\/30:hover {
    border-color: rgb(var(--warning-rgb) / 0.36) !important;
}

.hover\:border-emerald-500\/30:hover {
    border-color: rgb(var(--success-rgb) / 0.36) !important;
}

.placeholder-gray-500::placeholder,
.placeholder-gray-600::placeholder,
.placeholder-gray-700::placeholder {
    color: var(--text-muted) !important;
}

.shadow-xl,
.shadow-2xl,
.shadow-lg {
    box-shadow: var(--card-shadow) !important;
}

input,
select,
textarea {
    color: var(--text-main);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
    background-color: var(--surface-2);
    border: 1px solid var(--border-soft);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: rgb(var(--primary-rgb));
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
    outline: none !important;
    border-color: var(--focus-border) !important;
    box-shadow: 0 0 0 3px var(--focus-ring) !important;
}

table {
    border-color: var(--border-soft);
}

table thead {
    background: var(--surface-2) !important;
}

tbody tr:hover {
    background-color: var(--overlay-soft);
}

.logo-badge {
    border: 1px solid var(--border-soft);
    box-shadow: var(--card-shadow);
    background: linear-gradient(145deg, rgb(var(--surface-2-rgb) / 0.96), rgb(var(--surface-rgb) / 0.98));
}

.logo-badge img {
    filter: saturate(1.12) contrast(1.02);
}

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

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 20px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}

/* Category name truncation with ellipsis and tooltip support */
.modal-category-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}