/* ============================================================
   KLASHRAICK STORAGE — LIQUID GLASS THEME (DARK)
   Портирован из проекта Ozon v2 (frontend/static/css/grainy-theme.css)
   Цель: FileBrowser (filebrowser/filebrowser)
   Палитра: тёмный фиолетово-сливовый фон + frosted glass
   ============================================================ */

/* ---------- CSS-переменные FileBrowser → Liquid Glass (DARK) ---------- */
:root,
:root.dark {
    /* Акценты — лавандово-фиолетовая палитра, усилена для тёмного фона */
    --blue:          #9b8cf5;
    --dark-blue:     #7b6fe8;
    --red:           #e05674;
    --dark-red:      #c0284a;
    --moon-grey:     rgba(255, 255, 255, 0.10);

    --icon-red:      #e05674;
    --icon-orange:   #f0944a;
    --icon-yellow:   #f0c850;
    --icon-green:    #4ad296;
    --icon-blue:     #9b8cf5;
    --icon-violet:   #c090ff;

    --input-red:     rgba(224, 86, 116, 0.22);
    --input-green:   rgba(74, 210, 150, 0.22);

    /* Текст */
    --textPrimary:   rgba(220, 214, 248, 0.62);
    --textSecondary: #f0ecff;

    /* Поверхности — тёмные полупрозрачные панели */
    --background:       #130d26;
    --surfacePrimary:   rgba(255, 255, 255, 0.06);
    --surfaceSecondary: rgba(255, 255, 255, 0.10);
    --item-selected:    rgba(155, 140, 245, 0.22);

    /* Разделители и границы */
    --divider:           rgba(255, 255, 255, 0.08);
    --borderPrimary:     rgba(255, 255, 255, 0.14);
    --borderSecondary:   rgba(255, 255, 255, 0.22);
    --dividerPrimary:    rgba(255, 255, 255, 0.10);
    --dividerSecondary:  rgba(255, 255, 255, 0.18);

    /* Иконки */
    --iconPrimary:   #9b8cf5;
    --iconSecondary: #ffffff;
    --iconTertiary:  rgba(220, 214, 248, 0.48);

    /* Hover / action */
    --action: #9b8cf5;
    --hover:  rgba(155, 140, 245, 0.22);

    /* Фирменная геометрия */
    --kr-radius:     20px;
    --kr-radius-sm:  12px;
    --kr-radius-xs:  8px;
    --kr-blur:       blur(22px) saturate(160%);
    --kr-blur-soft:  blur(14px) saturate(140%);

    /* Blob-палитра — насыщенные глубокие тона для тёмного фона */
    --kr-blob1:      rgba(123, 111, 232, 0.55);
    --kr-blob2:      rgba(200, 90,  160, 0.48);
    --kr-blob3:      rgba(230, 140, 90,  0.34);
    --kr-blob4:      rgba(150, 112, 224, 0.50);
    --kr-blob5:      rgba(70,  45,  120, 0.55);
}

/* ============================================================
   БАЗОВЫЙ ФОН — blob mesh + декоративные узоры
   ============================================================ */
html, body {
    min-height: 100vh;
    color: var(--textSecondary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
body {
    background-color: var(--background);
    background-image:
        /* Верхний левый — кластер точек-кружков (тёплый белый при низкой непрозрачности) */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Ccircle cx='30' cy='40' r='18' fill='none' stroke='rgba(255,255,255,0.10)' stroke-width='1.5'/%3E%3Ccircle cx='70' cy='20' r='10' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='1.2'/%3E%3Ccircle cx='110' cy='50' r='22' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1.5'/%3E%3Ccircle cx='55' cy='80' r='14' fill='none' stroke='rgba(255,255,255,0.09)' stroke-width='1.2'/%3E%3Ccircle cx='20' cy='110' r='8' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1'/%3E%3Ccircle cx='90' cy='115' r='18' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1.2'/%3E%3Ccircle cx='140' cy='90' r='12' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='1'/%3E%3Ccircle cx='45' cy='150' r='20' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1.5'/%3E%3Ccircle cx='120' cy='155' r='9' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1'/%3E%3Ccircle cx='170' cy='130' r='16' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1'/%3E%3C/svg%3E"),
        /* Правый верх — диагональные штрихи */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='200'%3E%3Cg stroke='rgba(255,255,255,0.06)' stroke-width='1.2' stroke-linecap='round'%3E%3Cline x1='20' y1='0' x2='0' y2='20'/%3E%3Cline x1='50' y1='0' x2='0' y2='50'/%3E%3Cline x1='80' y1='0' x2='0' y2='80'/%3E%3Cline x1='110' y1='0' x2='0' y2='110'/%3E%3Cline x1='140' y1='0' x2='0' y2='140'/%3E%3Cline x1='170' y1='0' x2='0' y2='170'/%3E%3Cline x1='200' y1='0' x2='30' y2='170'/%3E%3Cline x1='220' y1='10' x2='60' y2='170'/%3E%3Cline x1='220' y1='40' x2='90' y2='170'/%3E%3Cline x1='220' y1='70' x2='120' y2='170'/%3E%3Cline x1='220' y1='100' x2='150' y2='170'/%3E%3Cline x1='220' y1='130' x2='180' y2='170'/%3E%3C/g%3E%3C/svg%3E"),
        /* Нижний правый — сетка точек */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Ccircle cx='20' cy='180' r='2.5' fill='rgba(255,255,255,0.10)'/%3E%3Ccircle cx='50' cy='190' r='1.8' fill='rgba(255,255,255,0.08)'/%3E%3Ccircle cx='80' cy='175' r='2.2' fill='rgba(255,255,255,0.09)'/%3E%3Ccircle cx='110' cy='188' r='1.5' fill='rgba(255,255,255,0.07)'/%3E%3Ccircle cx='140' cy='178' r='2.8' fill='rgba(255,255,255,0.10)'/%3E%3Ccircle cx='170' cy='192' r='1.8' fill='rgba(255,255,255,0.08)'/%3E%3Ccircle cx='35' cy='160' r='1.8' fill='rgba(255,255,255,0.07)'/%3E%3Ccircle cx='65' cy='150' r='2.5' fill='rgba(255,255,255,0.09)'/%3E%3Ccircle cx='95' cy='162' r='1.5' fill='rgba(255,255,255,0.06)'/%3E%3Ccircle cx='125' cy='155' r='2' fill='rgba(255,255,255,0.08)'/%3E%3Ccircle cx='155' cy='165' r='2.5' fill='rgba(255,255,255,0.07)'/%3E%3Ccircle cx='185' cy='158' r='1.8' fill='rgba(255,255,255,0.06)'/%3E%3C/svg%3E"),
        /* Левый низ — крупные кольца */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Ccircle cx='60' cy='200' r='55' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1.5'/%3E%3Ccircle cx='60' cy='200' r='38' fill='none' stroke='rgba(255,255,255,0.04)' stroke-width='1'/%3E%3Ccircle cx='60' cy='200' r='22' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1.2'/%3E%3Ccircle cx='180' cy='80' r='40' fill='none' stroke='rgba(255,255,255,0.04)' stroke-width='1'/%3E%3Ccircle cx='180' cy='80' r='24' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1'/%3E%3C/svg%3E"),
        /* Blob mesh gradient — глубокие сливово-фиолетовые тона */
        radial-gradient(ellipse 75% 65% at 10% 10%, var(--kr-blob1) 0%, transparent 52%),
        radial-gradient(ellipse 62% 58% at 90% 6%,  var(--kr-blob2) 0%, transparent 50%),
        radial-gradient(ellipse 68% 72% at 75% 82%, var(--kr-blob3) 0%, transparent 55%),
        radial-gradient(ellipse 60% 55% at 15% 85%, var(--kr-blob4) 0%, transparent 50%),
        radial-gradient(ellipse 95% 95% at 50% 45%, var(--kr-blob5) 0%, transparent 70%);
    background-size:
        260px 260px, 220px 200px, 200px 200px, 240px 240px,
        cover, cover, cover, cover, cover;
    background-position:
        -20px -20px,
        calc(100% + 10px) -10px,
        calc(100% + 10px) calc(100% + 10px),
        -20px calc(100% + 20px),
        center, center, center, center, center;
    background-repeat:
        no-repeat, no-repeat, no-repeat, no-repeat,
        no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-attachment: fixed;
}

/* Принудительно прозрачный #app */
#app {
    background: transparent !important;
}

/* ============================================================
   HEADER — frosted glass top bar
   ============================================================ */
header {
    background: rgba(25, 18, 50, 0.55) !important;
    backdrop-filter: var(--kr-blur-soft) !important;
    -webkit-backdrop-filter: var(--kr-blur-soft) !important;
    border-bottom: 1px solid var(--borderPrimary) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08),
        0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

header .title,
header > div > a {
    color: var(--textSecondary) !important;
    font-weight: 700;
    letter-spacing: -0.01em;
}

header img {
    filter: drop-shadow(0 2px 10px rgba(155, 140, 245, 0.45));
}

/* Поиск */
#search {
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(10px);
    border: 1px solid var(--borderPrimary) !important;
    border-radius: 999px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
    transition: background 0.18s, box-shadow 0.18s, border-color 0.18s;
    color: var(--textSecondary);
}
#search.active,
#search:focus-within {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(155, 140, 245, 0.45) !important;
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.30),
        0 0 0 3px rgba(155, 140, 245, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
#search input {
    background: transparent !important;
    color: var(--textSecondary) !important;
    border: none !important;
}
#search input::placeholder {
    color: var(--textPrimary);
}
#search #result {
    background: rgba(25, 18, 50, 0.85) !important;
    backdrop-filter: var(--kr-blur) !important;
    -webkit-backdrop-filter: var(--kr-blur) !important;
    border-radius: var(--kr-radius-sm) !important;
    border: 1px solid var(--borderSecondary) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}
#search .boxes {
    background: transparent !important;
    color: var(--textSecondary) !important;
}
#search .boxes h3 {
    color: var(--textPrimary) !important;
}

/* ============================================================
   NAV / SIDEBAR — frosted glass
   ============================================================ */
nav {
    background: rgba(20, 14, 42, 0.55) !important;
    backdrop-filter: var(--kr-blur-soft) !important;
    -webkit-backdrop-filter: var(--kr-blur-soft) !important;
    border-right: 1px solid var(--borderPrimary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

nav .action {
    color: var(--textSecondary) !important;
    border-radius: var(--kr-radius-sm) !important;
    margin: 2px 8px;
    padding: 0.5em 0.9em;
    transition: background 0.15s, color 0.15s, transform 0.12s;
}
nav .action:hover {
    background: rgba(155, 140, 245, 0.18) !important;
    color: var(--blue) !important;
}
nav .action i {
    color: var(--iconTertiary);
}
nav .action:hover i {
    color: var(--blue);
}

nav p {
    color: var(--textPrimary) !important;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-left: 1.2em;
}

nav .credits {
    color: var(--textPrimary) !important;
    opacity: 0.7;
}
nav .credits a { color: var(--blue) !important; }

/* ============================================================
   BREADCRUMBS — frosted pill
   ============================================================ */
.breadcrumbs {
    background: rgba(25, 18, 50, 0.45) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--borderPrimary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.breadcrumbs a {
    color: var(--textPrimary) !important;
    font-weight: 500;
    transition: color 0.15s, background 0.15s;
    border-radius: var(--kr-radius-xs);
    padding: 0.25em 0.6em;
}
.breadcrumbs a:hover {
    color: var(--blue) !important;
    background: rgba(155, 140, 245, 0.14) !important;
}
.breadcrumbs a:last-child {
    color: var(--textSecondary) !important;
    font-weight: 600;
}
.breadcrumbs .chevron {
    color: var(--textPrimary);
    opacity: 0.55;
}

/* ============================================================
   ACTION BUTTONS (header + nav иконки)
   ============================================================ */
.action {
    color: var(--textSecondary) !important;
    border-radius: 50% !important;
    transition: background 0.15s, transform 0.12s;
}
.action:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    transform: scale(1.04);
}
.action .counter {
    background: linear-gradient(135deg, var(--blue) 0%, var(--dark-blue) 100%) !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(155, 140, 245, 0.55);
}

/* ============================================================
   LISTING — файлы и папки
   ============================================================ */
#listing {
    background: transparent !important;
}

#listing .item {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: var(--kr-blur) !important;
    -webkit-backdrop-filter: var(--kr-blur) !important;
    border: 1px solid var(--borderPrimary) !important;
    border-radius: var(--kr-radius-sm) !important;
    color: var(--textSecondary) !important;
    transition: background 0.18s, box-shadow 0.18s, transform 0.12s, border-color 0.18s;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    margin-bottom: 6px;
}

#listing .item:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: var(--borderSecondary) !important;
    box-shadow:
        0 8px 24px rgba(155, 140, 245, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transform: translateY(-1px);
}

#listing .item[aria-selected="true"] {
    background: linear-gradient(135deg, rgba(155, 140, 245, 0.28) 0%, rgba(192, 144, 255, 0.20) 100%) !important;
    border-color: rgba(155, 140, 245, 0.65) !important;
    color: var(--textSecondary) !important;
    box-shadow:
        0 6px 20px rgba(155, 140, 245, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

/* Заголовок колонок в list-режиме */
#listing.list .item.header {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(8px);
    border: 1px solid var(--divider) !important;
    color: var(--textPrimary) !important;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-shadow: none;
}
#listing.list .item.header:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.06) !important;
}

#listing .item .name {
    color: var(--textSecondary) !important;
    font-weight: 500;
}
#listing .item .size,
#listing .item .modified {
    color: var(--textPrimary) !important;
    font-size: 0.82rem;
}

/* Mosaic / grid view */
#listing.mosaic .item,
#listing.gallery .item {
    background: rgba(255, 255, 255, 0.07) !important;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* Иконки в listing */
#listing .item i {
    color: var(--blue);
    filter: drop-shadow(0 1px 4px rgba(155, 140, 245, 0.40));
}
#listing .item .material-icons {
    color: var(--blue);
}

/* Пустое состояние */
#listing .message {
    color: var(--textPrimary) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(14px);
    border: 1px solid var(--borderPrimary);
    border-radius: var(--kr-radius);
    padding: 2em;
}

/* Multi-select панель внизу */
#multiple-selection {
    background: rgba(20, 14, 42, 0.85) !important;
    backdrop-filter: blur(22px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
    color: #fff !important;
    border-radius: 999px !important;
    border: 1px solid var(--borderSecondary);
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
#multiple-selection p { color: #fff !important; }
#multiple-selection .action { color: #fff !important; }
#multiple-selection .action:hover { background: rgba(255, 255, 255, 0.12) !important; }

/* ============================================================
   BUTTONS — liquid pill
   ============================================================ */
.button {
    border-radius: 999px !important;
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.01em;
    padding: 0.55em 1.3em;
    transition: all 0.18s !important;
    border: 1px solid transparent;
    backdrop-filter: blur(8px);
}

/* Основная (primary) */
.button--blue,
.button.button--flat:not(.button--grey):not(.button--red) {
    background: linear-gradient(135deg, rgba(155, 140, 245, 0.95) 0%, rgba(105, 90, 220, 1) 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow:
        0 4px 16px rgba(155, 140, 245, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
}
.button--blue:hover,
.button.button--flat:not(.button--grey):not(.button--red):hover {
    background: linear-gradient(135deg, rgba(170, 155, 250, 1) 0%, rgba(125, 110, 235, 1) 100%) !important;
    box-shadow:
        0 6px 22px rgba(155, 140, 245, 0.60),
        inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
    transform: translateY(-1px);
}

/* Опасная */
.button--red {
    background: linear-gradient(135deg, rgba(224, 86, 116, 0.92) 0%, rgba(180, 40, 70, 1) 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow:
        0 4px 16px rgba(224, 86, 116, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}
.button--red:hover {
    background: linear-gradient(135deg, rgba(238, 105, 135, 1) 0%, rgba(200, 50, 80, 1) 100%) !important;
    box-shadow:
        0 6px 22px rgba(224, 86, 116, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    transform: translateY(-1px);
}

/* Плоская / вторичная */
.button--flat.button--grey,
.button--flat {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--textSecondary) !important;
    border: 1px solid var(--borderPrimary) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}
.button--flat.button--grey:hover,
.button--flat:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    transform: translateY(-1px);
}

.button[disabled],
.button--flat[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.button--block { width: 100%; }

/* ============================================================
   CARDS (модалки, промпты)
   ============================================================ */
.card,
.prompt {
    background: rgba(28, 20, 55, 0.82) !important;
    backdrop-filter: blur(28px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(170%) !important;
    border: 1px solid var(--borderSecondary) !important;
    border-radius: var(--kr-radius) !important;
    color: var(--textSecondary) !important;
    box-shadow:
        0 28px 72px rgba(0, 0, 0, 0.55),
        0 8px 24px rgba(155, 140, 245, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

.card h3,
.prompt h3 {
    color: var(--textSecondary) !important;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.card-title,
.card > div:first-child {
    border-bottom: 1px solid var(--divider);
}

.card-content,
.card-wrapper {
    color: var(--textSecondary) !important;
}

.card-action {
    border-top: 1px solid var(--divider);
    padding-top: 0.8em;
}

/* Модалка-затемнение позади */
#modal-backdrop,
.modal-backdrop,
.overlay {
    background: rgba(8, 4, 20, 0.55) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ============================================================
   INPUTS / FORMS
   ============================================================ */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="search"],
textarea,
select {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--borderPrimary) !important;
    border-radius: var(--kr-radius-sm) !important;
    color: var(--textSecondary) !important;
    font-family: inherit;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
    padding: 0.55em 0.85em;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: rgba(155, 140, 245, 0.75) !important;
    background: rgba(255, 255, 255, 0.10) !important;
    box-shadow:
        0 0 0 3px rgba(155, 140, 245, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
input::placeholder,
textarea::placeholder {
    color: var(--textPrimary);
    opacity: 0.85;
}

/* Стилизация date/time picker иконки */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.9) sepia(0.1) hue-rotate(220deg);
    cursor: pointer;
    opacity: 0.7;
}

/* Select со светлой стрелкой */
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='none' stroke='rgba(220,214,248,0.7)' stroke-width='1.6' stroke-linecap='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.85em center !important;
    padding-right: 2em !important;
}
select option {
    background: #1a1335;
    color: var(--textSecondary);
}

/* Checkbox / toggle */
input[type="checkbox"] {
    accent-color: var(--blue);
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
#login {
    background: transparent !important;
}
#login form {
    background: rgba(28, 20, 55, 0.78) !important;
    backdrop-filter: blur(28px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(170%) !important;
    border: 1px solid var(--borderSecondary) !important;
    border-radius: var(--kr-radius) !important;
    box-shadow:
        0 28px 72px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
    padding: 2em 1.8em;
    width: min(92vw, 360px);
}
#login h1 {
    color: var(--textSecondary) !important;
    font-weight: 700;
    letter-spacing: -0.01em;
}
#login img {
    filter: drop-shadow(0 4px 18px rgba(155, 140, 245, 0.55));
}
#login p { color: var(--blue) !important; }
#login .wrong {
    background: rgba(224, 86, 116, 0.20) !important;
    color: #ffb0c0 !important;
    border: 1px solid rgba(224, 86, 116, 0.40);
    border-radius: var(--kr-radius-sm);
    backdrop-filter: blur(8px);
}
#login .logout-message {
    background: rgba(240, 148, 74, 0.20) !important;
    color: #ffd0a0 !important;
    border: 1px solid rgba(240, 148, 74, 0.40);
    border-radius: var(--kr-radius-sm);
    backdrop-filter: blur(8px);
}

/* ============================================================
   DASHBOARD (настройки пользователя)
   ============================================================ */
.dashboard {
    background: transparent !important;
}
.dashboard #nav {
    background: rgba(28, 20, 55, 0.65) !important;
    backdrop-filter: var(--kr-blur) !important;
    -webkit-backdrop-filter: var(--kr-blur) !important;
    border: 1px solid var(--borderPrimary) !important;
    border-radius: var(--kr-radius) !important;
    box-shadow:
        0 12px 36px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
.dashboard #nav a {
    color: var(--textSecondary) !important;
    border-radius: var(--kr-radius-sm);
    margin: 2px 6px;
}
.dashboard #nav a:hover {
    background: rgba(155, 140, 245, 0.16) !important;
    color: var(--blue) !important;
}
.dashboard #nav a.active,
.dashboard #nav a.router-link-active {
    background: linear-gradient(135deg, rgba(155, 140, 245, 0.30) 0%, rgba(192, 144, 255, 0.22) 100%) !important;
    color: #fff !important;
    font-weight: 600;
}

.dashboard h2,
.dashboard h3 { color: var(--textSecondary) !important; }

/* ============================================================
   PREVIEWER — лайтбокс для файлов
   ============================================================ */
#previewer {
    background: rgba(8, 4, 20, 0.88) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
#previewer .title {
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(12px);
    color: #fff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
#previewer .action { color: #fff !important; }
#previewer .action:hover { background: rgba(255, 255, 255, 0.12) !important; }

/* ============================================================
   UPLOAD PROGRESS
   ============================================================ */
#upload-files {
    background: rgba(28, 20, 55, 0.82) !important;
    backdrop-filter: blur(22px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(170%) !important;
    border: 1px solid var(--borderSecondary) !important;
    border-radius: var(--kr-radius) !important;
    box-shadow:
        0 14px 38px rgba(0, 0, 0, 0.50),
        inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
    color: var(--textSecondary) !important;
}
#upload-files .file-upload {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: var(--kr-radius-sm);
    border: 1px solid var(--borderPrimary);
}
#upload-files .file-upload-progress {
    background: linear-gradient(135deg, rgba(155, 140, 245, 0.95) 0%, rgba(105, 90, 220, 1) 100%) !important;
}
.progress {
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 999px;
    overflow: hidden;
}
.progress > div {
    background: linear-gradient(90deg, var(--blue) 0%, var(--dark-blue) 100%) !important;
}

/* ============================================================
   CONTEXT MENU
   ============================================================ */
.context-menu,
#context-menu {
    background: rgba(28, 20, 55, 0.85) !important;
    backdrop-filter: var(--kr-blur) !important;
    -webkit-backdrop-filter: var(--kr-blur) !important;
    border: 1px solid var(--borderSecondary) !important;
    border-radius: var(--kr-radius-sm) !important;
    box-shadow:
        0 16px 44px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
    padding: 6px;
}
.context-menu .action,
#context-menu .action {
    border-radius: var(--kr-radius-xs) !important;
    color: var(--textSecondary) !important;
}
.context-menu .action:hover,
#context-menu .action:hover {
    background: rgba(155, 140, 245, 0.22) !important;
    color: #fff !important;
}

/* ============================================================
   TOASTS / NOTIFICATIONS
   ============================================================ */
.Vue-Toastification__toast {
    background: rgba(28, 20, 55, 0.92) !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: var(--kr-radius-sm) !important;
    color: #fff !important;
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}
.Vue-Toastification__toast--success {
    background: rgba(74, 210, 150, 0.22) !important;
    border-color: rgba(74, 210, 150, 0.45) !important;
}
.Vue-Toastification__toast--error {
    background: rgba(224, 86, 116, 0.22) !important;
    border-color: rgba(224, 86, 116, 0.45) !important;
}
.Vue-Toastification__toast--warning {
    background: rgba(240, 148, 74, 0.22) !important;
    border-color: rgba(240, 148, 74, 0.45) !important;
}

/* ============================================================
   PROGRESS BAR (топ страницы)
   ============================================================ */
#progress {
    background: linear-gradient(90deg, var(--blue) 0%, #c090ff 50%, var(--blue) 100%) !important;
    box-shadow: 0 0 10px rgba(155, 140, 245, 0.65);
}

/* ============================================================
   LINKS
   ============================================================ */
a {
    color: var(--blue);
    transition: color 0.15s;
}
a:hover {
    color: #c090ff;
}

/* ============================================================
   ЗАГОЛОВКИ
   ============================================================ */
h1, h2, h3, h4, h5 {
    color: var(--textSecondary) !important;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* ============================================================
   SCROLLBAR (Webkit)
   ============================================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(155, 140, 245, 0.30);
    border-radius: 4px;
    backdrop-filter: blur(4px);
    transition: background 0.15s;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(155, 140, 245, 0.55);
}

/* ============================================================
   ANIMATIONS / МИКРО-ВЗАИМОДЕЙСТВИЯ
   ============================================================ */
@keyframes kr-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(155, 140, 245, 0); }
    50% { box-shadow: 0 0 16px 2px rgba(155, 140, 245, 0.40); }
}

/* Spinner с акцентным цветом */
.spinner > div {
    background-color: var(--blue) !important;
}