/* =====================================================================
   NCloud — тёмная тема.

   Подключается ПОСЛЕ cloud.css и только перекрывает цвета: сам cloud.css,
   cloud.js и cloud-core.mjs не тронуты. Чтобы вернуть прежний светлый вид,
   достаточно убрать одну строку <link> из cloud.html.

   Скевоморфная суть интерфейса сохранена: кейс, ящик, папки и бумага
   остаются на месте — но из бежево-серых становятся графитовыми, в одной
   палитре с главной страницей и панелью управления.
   ===================================================================== */

:root {
    /* Основа: вместо светло-серого — глубокий графит */
    --cloud-bg-0: #05060a;
    --cloud-bg-1: #0e1016;
    --cloud-bg-2: #171a22;

    /* Чернила и подписи */
    --cloud-ink: #eef0f6;
    --cloud-muted: #99a0b3;
    --cloud-line: rgba(255, 255, 255, 0.14);

    /* «Бумага» — тёмные листы вместо кремовых */
    --cloud-paper: #1c1f28;
    --cloud-paper-dark: #14171e;

    /* Папки */
    --cloud-folder: #3a4152;
    --cloud-folder-edge: #232936;

    /* «Пластик» корпуса */
    --cloud-plastic: #232833;
    --cloud-plastic-dark: #14171f;
    --cloud-plastic-light: #333a48;

    /* Акценты — общие с остальными страницами */
    --cloud-accent: #7c7dff;
    --cloud-accent-soft: #9db8ff;
    --cloud-danger: #ff6b6b;

    --cloud-shadow: 0 26px 70px rgba(0, 0, 0, 0.62);

    /* Свои токены темы */
    --nt-surface: rgba(255, 255, 255, 0.045);
    --nt-surface-2: rgba(255, 255, 255, 0.075);
    --nt-line: rgba(255, 255, 255, 0.10);
    --nt-line-strong: rgba(255, 255, 255, 0.17);
}

/* --------------------------------------------------------- страница --- */

.cloud-page {
    background:
        radial-gradient(46% 40% at 18% 4%, rgba(124, 125, 255, 0.14), transparent 70%),
        radial-gradient(42% 38% at 82% 0%, rgba(157, 184, 255, 0.10), transparent 72%),
        linear-gradient(180deg, #0a0c11, #05060a 60%);
    color: var(--cloud-ink);
}

.cloud-page ::selection { background: rgba(124, 125, 255, 0.32); }

/* ------------------------------------------------------------ шапка --- */

.cloud-page .topbar {
    border-color: var(--nt-line-strong);
    border-bottom-color: rgba(0, 0, 0, 0.5);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
        rgba(14, 16, 22, 0.82);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(18px) saturate(140%);
}

/* ------------------------------------------------------------ сцена --- */

.cloud-page .stage {
    border-color: var(--nt-line);
    border-bottom-color: rgba(0, 0, 0, 0.5);
    background:
        radial-gradient(ellipse at 50% 84%, rgba(124, 125, 255, 0.10), transparent 46%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012) 34%, rgba(0, 0, 0, 0.24));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.07), var(--cloud-shadow);
}

/* ------------------------------------------------- панели и карточки --- */

.cloud-page .modal-card {
    border-color: var(--nt-line-strong);
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 5px),
        linear-gradient(145deg, rgba(26, 29, 38, 0.985), rgba(17, 19, 26, 0.985));
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7), inset 0 1px rgba(255, 255, 255, 0.08);
    color: var(--cloud-ink);
}

.cloud-page .drawer-panel,
.cloud-page .case-drawer,
.cloud-page .open-container,
.cloud-page .container-lid,
.cloud-page .folder-detail,
.cloud-page .section-detail,
.cloud-page .document-preview,
.cloud-page .artifact-sleeve,
.cloud-page .usage-summary,
.cloud-page .media-player {
    border-color: var(--nt-line);
    color: var(--cloud-ink);
}

/* Светлые «бумажные» плоскости переводим в тёмные */
.cloud-page .peek-paper,
.cloud-page .artifact,
.cloud-page .document-strip,
.cloud-page .preview-text {
    color: var(--cloud-ink);
}

/* ------------------------------------------------- поля и элементы --- */

.cloud-page input,
.cloud-page textarea,
.cloud-page select {
    color: var(--cloud-ink);
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--nt-line-strong);
}
.cloud-page input::placeholder,
.cloud-page textarea::placeholder { color: rgba(153, 160, 179, 0.85); }

.cloud-page input:focus,
.cloud-page textarea:focus {
    outline: none;
    border-color: var(--cloud-accent);
    background-color: rgba(124, 125, 255, 0.09);
}

.cloud-page .status-chip {
    color: var(--cloud-ink);
    border-color: rgba(124, 125, 255, 0.34);
    background: rgba(124, 125, 255, 0.13);
}

.cloud-page .document-button,
.cloud-page .preview-action,
.cloud-page .mini-btn {
    color: var(--cloud-ink);
}

/* Полосы прогресса и заполнения */
.cloud-page .usage-track { background: rgba(255, 255, 255, 0.08); }
.cloud-page .usage-fill,
.cloud-page .media-range::-webkit-slider-thumb { background: linear-gradient(90deg, #7c7dff, #9db8ff); }

/* ------------------------------------------------------ изображения --- */

/* Фотографии кейса и блокнота сняты при светлом освещении: приглушаем их,
   чтобы они не светились белым пятном на тёмном фоне. */
.cloud-page img:not([src$=".svg"]),
.cloud-page .visual-video video,
.cloud-page .hero-folder img {
    filter: brightness(0.66) contrast(1.06) saturate(0.9);
}

/* ------------------------------------------------------- прокрутка --- */

.cloud-page *::-webkit-scrollbar { width: 10px; height: 10px; }
.cloud-page *::-webkit-scrollbar-track { background: transparent; }
.cloud-page *::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.13);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.cloud-page *::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); background-clip: content-box; }

@media (prefers-reduced-motion: reduce) {
    .cloud-page * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}