/* Свой цвет оформления (theme-colors.js) и окно «Настроить».
   В светлой и тёмных темах theme-colors.js сам ставит готовые значения
   переменных (--blue, --bg и т. д.). В Cosmic цвета многих элементов
   заданы напрямую, поэтому для Cosmic со своим цветом и для Cosmo cats
   ниже — раскладка из переменных --cats-*: тройки «R G B», чтобы
   прозрачность задавалась прямо в правилах. Значения по умолчанию —
   фиолетовый Cosmic (так выглядит Cosmo cats без своего цвета).
   Яркость ролей одинакова при любом цвете: --cats-accent — фон кнопок
   под белым текстом, --cats-accent-light — надписи и значки. */

:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) {
    --cats-accent: 136 93 235;
    --cats-accent-strong: 92 31 230;
    --cats-accent-light: 175 144 246;
    --cats-accent-pale: 220 206 252;
    --cats-ink: 244 239 254;
    --cats-accent-alt: 87 111 231;
    --cats-accent-alt-light: 163 177 248;
    --cats-bg-1: 9 5 20;
    --cats-bg-2: 16 9 34;
    --cats-bg-3: 34 19 66;
    --cats-glow: 99 41 231;

    --bg: rgb(var(--cats-bg-1));
    --surface: rgb(var(--cats-bg-1) / 0.84);
    --surface-soft: rgb(var(--cats-bg-2) / 0.72);
    --ink: rgb(var(--cats-ink));
    --muted: rgb(var(--cats-accent-pale) / 0.72);
    --line: rgb(var(--cats-accent-light) / 0.28);
    --blue: rgb(var(--cats-accent-light));
    --blue-dark: rgb(var(--cats-accent));
    --blue-soft: rgb(var(--cats-accent) / 0.22);
    --surface-translucent: rgb(var(--cats-bg-1) / 0.86);
    --surface-muted-translucent: rgb(var(--cats-bg-2) / 0.8);
    --panel-tint: rgb(var(--cats-bg-3) / 0.45);
    --focus-ring: rgb(var(--cats-accent-light) / 0.35);
    --accent-shadow: rgb(var(--cats-accent) / 0.28);
    --body-glow: rgb(var(--cats-glow) / 0.22);
    --workspace-line: rgb(var(--cats-accent-light) / 0.22);
    --accent-line: rgb(var(--cats-accent-light) / 0.45);
    --field-line: rgb(var(--cats-accent-light) / 0.32);
    --drop-line: rgb(var(--cats-accent) / 0.38);
    --detail-line: rgb(var(--cats-accent-light) / 0.28);
    --passport-row: rgb(var(--cats-bg-2) / 0.85);
    --passport-row-alt: rgb(var(--cats-bg-3) / 0.7);
    --cosmic-glow-violet: rgb(var(--cats-accent) / 0.38);
    --cosmic-glow-cyan: rgb(var(--cats-accent-alt) / 0.3);
}

/* Кнопки и метки, залитые акцентом под белым текстом. В остальных темах
   у них фон var(--blue), но здесь --blue светлый — для надписей. */
:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .upload-icon:not(.is-custom),
:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .display-mode-button[aria-pressed="true"],
:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .passport-type-filter[aria-pressed="true"],
:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .verification-filter-button[aria-pressed="true"],
:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .admin-tab[aria-selected="true"],
:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .support-inbox-tab[aria-selected="true"],
:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .support-inbox-button:hover,
:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .scroll-top-button:hover,
:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .quick-remark-order,
:root[data-theme="cosmic"][data-layout="focus"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .focus-chip.is-download {
    border-color: rgb(var(--cats-accent));
    background: rgb(var(--cats-accent));
    color: #fff;
}

/* --- Элементы, у которых в Cosmic цвета заданы напрямую ---------------- */

:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .theme-toggle {
    background: rgb(var(--cats-bg-1) / 0.55);
}

:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .theme-toggle:hover {
    box-shadow: 0 0 20px rgb(var(--cats-accent-light) / 0.25);
}

:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .cosmic-toggle {
    border-color: rgb(var(--cats-accent-light) / 0.35);
    background: linear-gradient(135deg, rgb(var(--cats-bg-3) / 0.55), rgb(var(--cats-bg-1) / 0.75));
    color: rgb(var(--cats-accent-pale));
    box-shadow: 0 0 24px rgb(var(--cats-accent) / 0.15);
}

:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .cosmic-toggle:hover {
    border-color: rgb(var(--cats-accent-light) / 0.75);
    color: rgb(var(--cats-ink));
    box-shadow: 0 0 32px rgb(var(--cats-accent-light) / 0.24);
}

:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .cosmic-toggle.is-active {
    border-color: rgb(var(--cats-accent-alt) / 0.55);
    color: rgb(var(--cats-ink));
    background: linear-gradient(135deg, rgb(var(--cats-accent-strong) / 0.65), rgb(var(--cats-bg-2) / 0.85));
    box-shadow:
        0 0 28px rgb(var(--cats-accent) / 0.26),
        0 0 48px rgb(var(--cats-accent-alt) / 0.08);
}

:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .cosmic-toggle-icon {
    text-shadow: 0 0 12px rgb(var(--cats-accent-light) / 0.6);
}

:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .hero,
:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .section-heading,
:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .drop-zone,
:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .check-scope,
:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .manual-card,
:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .auth-card,
:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .admin-panel,
:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .support-dialog,
:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .results-panel,
:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .history-panel,
:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .vor-final-table-wrap,
:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .database-card {
    border-color: rgb(var(--cats-accent-light) / 0.22);
}

:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .hero h1,
:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .section-heading h2 {
    text-shadow: 0 0 40px rgb(var(--cats-accent-light) / 0.16);
}

:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .primary-button {
    background: linear-gradient(
        135deg,
        rgb(var(--cats-accent-strong)),
        rgb(var(--cats-accent)) 55%,
        rgb(var(--cats-accent-alt))
    );
    box-shadow:
        0 10px 26px rgb(var(--cats-accent) / 0.24),
        0 0 18px rgb(var(--cats-accent-strong) / 0.14);
}

:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .primary-button:hover:not(:disabled) {
    box-shadow:
        0 14px 32px rgb(var(--cats-accent) / 0.32),
        0 0 24px rgb(var(--cats-accent-alt) / 0.14);
}

:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .text-button {
    color: rgb(var(--cats-accent-pale));
}

:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .text-button:hover {
    color: rgb(var(--cats-accent-alt-light));
    text-shadow: 0 0 16px rgb(var(--cats-accent-alt-light) / 0.22);
}

:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) input,
:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) textarea,
:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) select {
    background: rgb(var(--cats-bg-1) / 0.65);
    border-color: rgb(var(--cats-accent-light) / 0.28);
}

:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) input:focus,
:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) textarea:focus,
:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) select:focus {
    border-color: rgb(var(--cats-accent-alt) / 0.55);
    box-shadow: 0 0 0 3px rgb(var(--cats-accent-alt) / 0.12);
}

:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .drop-zone:hover,
:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .drop-zone:focus,
:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .drop-zone.is-dragging {
    border-color: rgb(var(--cats-accent-alt) / 0.55);
    box-shadow: 0 0 40px rgb(var(--cats-accent) / 0.14);
}

:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) table th {
    background: rgb(var(--cats-bg-3) / 0.55);
}

:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .scroll-top-button {
    background: rgb(var(--cats-bg-2) / 0.75);
    border-color: rgb(var(--cats-accent-light) / 0.35);
    box-shadow: 0 0 24px rgb(var(--cats-accent) / 0.16);
}

:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .user-bar {
    border-color: rgb(var(--cats-accent-light) / 0.2);
    background: rgb(var(--cats-bg-1) / 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 28px rgb(var(--cats-accent) / 0.14);
}

:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .user-bar > a:hover,
:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .user-bar > button:hover:not(:disabled) {
    background: rgb(var(--cats-accent) / 0.2);
    color: rgb(var(--cats-ink));
    text-shadow: 0 0 14px rgb(var(--cats-accent-light) / 0.28);
}

:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .result-card:hover,
:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .history-item:hover,
:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .manual-card:hover {
    border-color: rgb(var(--cats-accent-light) / 0.4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 18px 40px -16px rgba(0, 0, 0, 0.8),
        0 0 28px rgb(var(--cats-accent) / 0.12);
}

:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .secondary-button {
    background: rgb(var(--cats-bg-2) / 0.6);
    box-shadow:
        0 0 0 1px rgb(var(--cats-accent-light) / 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .secondary-button:hover:not(:disabled) {
    background: rgb(var(--cats-accent) / 0.18);
    box-shadow:
        0 0 0 1px rgb(var(--cats-accent-light) / 0.5),
        0 0 24px rgb(var(--cats-accent) / 0.14);
}

:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) h1 span {
    background: linear-gradient(120deg, rgb(var(--cats-accent-light)), rgb(var(--cats-accent-alt-light)));
    -webkit-background-clip: text;
    background-clip: text;
}

:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) :focus-visible {
    outline-color: rgb(var(--cats-accent-alt-light));
}

:root[data-theme="cosmic"]:is([data-cosmic-variant="cats"], [data-custom-colors]) .manual-card-download {
    background: linear-gradient(135deg, rgb(var(--cats-accent-strong)), rgb(var(--cats-accent)));
}

/* --- Карточка «Настроить» рядом с «Как пользоваться» --------------------- */

.manual-downloads.has-theme-colors {
    grid-template-columns: repeat(3, minmax(118px, 132px));
}

@media (max-width: 760px) {
    .manual-downloads.has-theme-colors {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.theme-colors-card .manual-card-download {
    border: 0;
    font-family: inherit;
    cursor: pointer;
}

/* --- Окно «Настроить» ---------------------------------------------------- */

.theme-colors-dialog {
    width: min(30rem, calc(100% - 32px));
}

/* Фон за окном почти не затемняется: смену цвета видно сразу. */
.theme-colors-dialog::backdrop {
    background: rgba(0, 0, 0, 0.12);
}

.theme-colors-scope {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 650;
}

.theme-colors-scope label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.theme-colors-swatches {
    margin-bottom: 14px;
}

.theme-colors-swatch {
    width: 30px;
    height: 30px;
}

.theme-colors-swatch.is-selected {
    border-color: var(--ink);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

.theme-colors-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-bottom: 14px;
}

.theme-colors-custom {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}

.theme-colors-current {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0 0 18px;
    font-size: 13px;
}

.theme-colors-current div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-colors-current dt {
    color: var(--muted);
    font-weight: 650;
}

.theme-colors-current dd {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.theme-colors-chip {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid var(--line);
    border-radius: 5px;
}