/* ============================================================
   src/theme/themes/skins.css — скин-темы рабочего стола (набор «Штрих»)
   Автор: Штрих (strikh), 16.10.2026. Приказ Мити: «разные, красивые темы, не только тёмная».

   ЧТО ЭТО. Та же ось, что у темы ГРАФФИТИ (Фрэдди): дополнительный «скин» поверх
   светлой/тёмной оси Adwaita. Включается АТРИБУТОМ на <html>, без атрибута всё как было.

        <html data-skin="aurora-light">     «Северное сияние», ледяной рассвет
        <html data-skin="aurora-dark">      «Северное сияние», полярная ночь
        <html data-skin="sumi-light">       «Тушь и бумага», рисовая бумага
        <html data-skin="sumi-dark">        «Тушь и бумага», ночная тушь
        <html data-skin="bauhaus-light">    «Модерн», костяной лист
        <html data-skin="bauhaus-dark">     «Модерн», графит
        <html data-skin="crt-amber">        «Фосфор», янтарный терминал
        <html data-skin="crt-phosphor">     «Фосфор», зелёный терминал
        <html data-skin="anime-light">      «Сэйю», день
        <html data-skin="anime-dark">       «Сэйю», ночь
        <html data-skin="pixel">            «Восемь бит», сетка 12px
        <html data-skin="cyber">            «Неоновая ночь»
        <html data-skin="postpunk-light">   «Ксерокс», лист
        <html data-skin="postpunk-dark">    «Ксерокс», инверсия
        <html data-skin="alchemy-light">    «Герметика», пергамент
        <html data-skin="alchemy-dark">     «Герметика», ночная лаборатория
        <html data-skin="friday13">         «Пятница, 13-е»

   КОНТРАКТ (как в graffiti.css). Имена переменных из tokens.css НЕ переименовываем и не
   удаляем — только переопределяем ЗНАЧЕНИЯ. Свои переменные — с префиксом --skin-*,
   читает их только этот файл. Каждый скин самодостаточен: aurora-dark не требует
   data-theme="dark" (но и не спорит с ним).

   ЧИТАЕМОСТЬ. Эффекты живут на слое обоев (#wallpaper, z-index 0) и на границах окон.
   Текст интерфейса остаётся на плотной подложке: --window-fg подобран так, чтобы
   контраст к --window-bg был ≥ 7:1 в каждом скине. Свечение/развёртка НЕ накладываются
   поверх контента.

   ОБОИ. Чистый вектор, свои, ноль растра: src/theme/wallpapers/skin-*.svg,
   генератор — src/theme/wallpapers/gen_skins.py.
   ============================================================ */

/* ═══════════════════════════════ 1. AURORA — «Северное сияние» ═══════════════ */

html[data-skin="aurora-light"] {
  --skin-wall:      #e4eff7;
  --skin-ink:       #0a2634;

  --accent:         #0e6f81;   /* глубокий морской teal — читается на льду */
  --accent-hover:   #0b5d6d;
  --accent-active:  #094c5a;
  --accent-fg:      #ffffff;
  --accent-bg:      rgba(14,111,129,.14);

  --window-bg:      #f5fafd;               /* льдистая бумага */
  --window-fg:      rgb(6 26 36 / 88%);
  --window-border:  rgba(8,32,44,.16);
  --radius-window:  14px;

  --headerbar-bg:      #ffffff;
  --headerbar-bg-back: #eff6fa;
  --headerbar-fg:      rgb(6 26 36 / 88%);
  --headerbar-border:  rgb(8 32 44 / 12%);

  --panel-bg:  rgba(245,250,253,.92);
  --panel-fg:  rgb(6 26 36 / 88%);
  --dock-bg:   rgba(245,250,253,.88);

  --shadow-window:   0 6px 24px rgba(8,32,44,.14), 0 1px 4px rgba(8,32,44,.08);
  --shadow-focus:    0 16px 44px rgba(8,32,44,.24), 0 3px 8px rgba(8,32,44,.12);
  --shadow-backdrop: 0 3px 10px rgba(8,32,44,.10);
  --focus-ring:      rgba(14,111,129,.60);
}

html[data-skin="aurora-dark"] {
  --skin-wall:      #040a12;
  --skin-ink:       #e9f4f9;

  --accent:         #3fd68a;   /* полярный зелёный */
  --accent-hover:   #55e09a;
  --accent-active:  #2ec27e;
  --accent-fg:      #04231a;   /* тёмный текст на зелёном — контраст выше белого */
  --accent-bg:      rgba(63,214,138,.22);

  --window-bg:      #0f1720;
  --window-fg:      #e9f4f9;
  --window-border:  rgba(233,244,249,.14);
  --radius-window:  14px;

  --headerbar-bg:      #16212c;
  --headerbar-bg-back: #0f1720;
  --headerbar-fg:      #e9f4f9;
  --headerbar-border:  rgb(0 0 6 / 38%);

  --panel-bg:  rgba(15,23,32,.92);
  --panel-fg:  #e9f4f9;
  --dock-bg:   rgba(15,23,32,.88);

  --shadow-window:   0 6px 22px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.35);
  --shadow-focus:    0 16px 44px rgba(0,0,0,.70), 0 3px 9px rgba(0,0,0,.45);
  --shadow-backdrop: 0 3px 10px rgba(0,0,0,.35);
  --focus-ring:      rgba(63,214,138,.60);

  --destructive: #c01c28;
  --success:     #26a269;
  --warning:     #cd9309;
}

/* ═══════════════════════════════ 2. SUMI — «Тушь и бумага» ═══════════════════ */

html[data-skin="sumi-light"] {
  --skin-wall:      #f2ebdc;
  --skin-ink:       #1e2330;

  --accent:         #b8352a;   /* суми-красный, печать ханко */
  --accent-hover:   #a22d23;
  --accent-active:  #8d271e;
  --accent-fg:      #ffffff;
  --accent-bg:      rgba(184,53,42,.13);

  --window-bg:      #f8f3e8;               /* рисовая бумага */
  --window-fg:      rgb(30 35 48 / 88%);
  --window-border:  rgba(30,35,48,.18);
  --radius-window:  8px;                   /* бумага режется прямее льда */

  --headerbar-bg:      #fffdf6;
  --headerbar-bg-back: #f3ece0;
  --headerbar-fg:      rgb(30 35 48 / 88%);
  --headerbar-border:  rgb(30 35 48 / 12%);

  --panel-bg:  rgba(248,243,232,.92);
  --panel-fg:  rgb(30 35 48 / 88%);
  --dock-bg:   rgba(248,243,232,.88);

  --shadow-window:   0 5px 20px rgba(30,35,48,.16), 0 1px 3px rgba(30,35,48,.10);
  --shadow-focus:    0 14px 40px rgba(30,35,48,.26), 0 3px 8px rgba(30,35,48,.13);
  --shadow-backdrop: 0 3px 9px rgba(30,35,48,.10);
  --focus-ring:      rgba(184,53,42,.60);
}

html[data-skin="sumi-dark"] {
  --skin-wall:      #12141c;
  --skin-ink:       #ece7dd;

  --accent:         #e58ba1;   /* сакура на ночной бумаге */
  --accent-hover:   #ef9fb2;
  --accent-active:  #d8798f;
  --accent-fg:      #34101a;
  --accent-bg:      rgba(229,139,161,.20);

  --window-bg:      #14161e;
  --window-fg:      #ece7dd;
  --window-border:  rgba(236,231,221,.16);
  --radius-window:  8px;

  --headerbar-bg:      #1c1f29;
  --headerbar-bg-back: #14161e;
  --headerbar-fg:      #ece7dd;
  --headerbar-border:  rgb(0 0 6 / 36%);

  --panel-bg:  rgba(20,22,30,.92);
  --panel-fg:  #ece7dd;
  --dock-bg:   rgba(20,22,30,.88);

  --shadow-window:   0 5px 20px rgba(0,0,0,.60), 0 1px 3px rgba(0,0,0,.40);
  --shadow-focus:    0 14px 40px rgba(0,0,0,.72), 0 3px 8px rgba(0,0,0,.46);
  --shadow-backdrop: 0 3px 9px rgba(0,0,0,.36);
  --focus-ring:      rgba(229,139,161,.60);

  --destructive: #c01c28;
  --success:     #26a269;
  --warning:     #cd9309;
}

/* ═══════════════════════════════ 3. BAUHAUS — «Модерн» ═══════════════════════ */

html[data-skin="bauhaus-light"] {
  --skin-wall:      #efe9db;
  --skin-ink:       #16161a;

  --accent:         #d51820;   /* первичный красный */
  --accent-hover:   #bd131a;
  --accent-active:  #a40f16;
  --accent-fg:      #ffffff;
  --accent-bg:      rgba(213,24,32,.12);

  --window-bg:      #f4f1e8;               /* костяной лист */
  --window-fg:      rgb(20 20 24 / 90%);
  --window-border:  rgba(22,22,26,.85);    /* прямые чернильные рамки */
  --radius-window:  0px;                   /* Баухаус не знает радиусов */

  --headerbar-bg:      #fbf9f3;
  --headerbar-bg-back: #efeade;
  --headerbar-fg:      rgb(20 20 24 / 90%);
  --headerbar-border:  rgb(22 22 26 / 70%);

  --panel-bg:  rgba(244,241,232,.92);
  --panel-fg:  rgb(20 20 24 / 90%);
  --dock-bg:   rgba(244,241,232,.88);

  --shadow-window:   0 5px 0 rgba(22,22,26,.85);   /* жёсткая тень-оттиск, не размытие */
  --shadow-focus:    0 7px 0 rgba(22,22,26,.90);
  --shadow-backdrop: 0 3px 0 rgba(22,22,26,.45);
  --focus-ring:      rgba(213,24,32,.65);
}

html[data-skin="bauhaus-dark"] {
  --skin-wall:      #15161a;
  --skin-ink:       #f2f1ec;

  --accent:         #ff4b3e;
  --accent-hover:   #ff655a;
  --accent-active:  #e83a2e;
  --accent-fg:      #1a0a08;
  --accent-bg:      rgba(255,75,62,.20);

  --window-bg:      #17181c;
  --window-fg:      #f2f1ec;
  --window-border:  rgba(242,241,236,.60);
  --radius-window:  0px;

  --headerbar-bg:      #202127;
  --headerbar-bg-back: #17181c;
  --headerbar-fg:      #f2f1ec;
  --headerbar-border:  rgb(242 241 236 / 34%);

  --panel-bg:  rgba(23,24,28,.92);
  --panel-fg:  #f2f1ec;
  --dock-bg:   rgba(23,24,28,.88);

  --shadow-window:   0 5px 0 rgba(0,0,0,.75);
  --shadow-focus:    0 7px 0 rgba(0,0,0,.85);
  --shadow-backdrop: 0 3px 0 rgba(0,0,0,.50);
  --focus-ring:      rgba(255,75,62,.65);

  --destructive: #c01c28;
  --success:     #26a269;
  --warning:     #cd9309;
}

/* ═══════════════════════════════ 4. CRT — «Фосфор» ═══════════════════════════ */

html[data-skin="crt-amber"] {
  --skin-wall:      #1a1206;
  --skin-ink:       #ffb000;

  --accent:         #ffb000;   /* янтарь, 1970-е */
  --accent-hover:   #ffc033;
  --accent-active:  #e59a00;
  --accent-fg:      #1a1206;
  --accent-bg:      rgba(255,176,0,.18);

  --window-bg:      #1a1206;
  --window-fg:      #ffcf7a;               /* не чистый янтарь: текст читается, свечение — в обоях */
  --window-border:  rgba(255,176,0,.30);
  --radius-window:  4px;

  --headerbar-bg:      #241806;
  --headerbar-bg-back: #1a1206;
  --headerbar-fg:      #ffcf7a;
  --headerbar-border:  rgba(255,176,0,.26);

  --panel-bg:  rgba(26,18,6,.90);
  --panel-fg:  #ffcf7a;
  --dock-bg:   rgba(26,18,6,.86);

  --shadow-window:   0 0 0 1px rgba(255,176,0,.22), 0 6px 26px rgba(0,0,0,.70), 0 0 26px rgba(255,176,0,.12);
  --shadow-focus:    0 0 0 1px rgba(255,176,0,.40), 0 8px 30px rgba(0,0,0,.78), 0 0 40px rgba(255,176,0,.22);
  --shadow-backdrop: 0 0 0 1px rgba(255,176,0,.12), 0 3px 12px rgba(0,0,0,.60);
  --focus-ring:      rgba(255,176,0,.65);

  --destructive: #c01c28;
  --success:     #26a269;
  --warning:     #cd9309;
}

html[data-skin="crt-phosphor"] {
  --skin-wall:      #04120a;
  --skin-ink:       #33ff88;

  --accent:         #33ff88;   /* фосфорный зелёный терминал */
  --accent-hover:   #5cffa1;
  --accent-active:  #19d96e;
  --accent-fg:      #04210f;
  --accent-bg:      rgba(51,255,136,.16);

  --window-bg:      #061410;
  --window-fg:      #b6ffd4;
  --window-border:  rgba(51,255,136,.28);
  --radius-window:  4px;

  --headerbar-bg:      #0a1f16;
  --headerbar-bg-back: #061410;
  --headerbar-fg:      #b6ffd4;
  --headerbar-border:  rgba(51,255,136,.24);

  --panel-bg:  rgba(6,20,16,.90);
  --panel-fg:  #b6ffd4;
  --dock-bg:   rgba(6,20,16,.86);

  --shadow-window:   0 0 0 1px rgba(51,255,136,.20), 0 6px 26px rgba(0,0,0,.72), 0 0 26px rgba(51,255,136,.14);
  --shadow-focus:    0 0 0 1px rgba(51,255,136,.38), 0 8px 30px rgba(0,0,0,.80), 0 0 40px rgba(51,255,136,.24);
  --shadow-backdrop: 0 0 0 1px rgba(51,255,136,.10), 0 3px 12px rgba(0,0,0,.62);
  --focus-ring:      rgba(51,255,136,.62);

  --destructive: #c01c28;
  --success:     #26a269;
  --warning:     #cd9309;
}

/* ═══════════════════════════════ ОБОИ СКИНОВ ═══════════════════════════════ */

html[data-skin="aurora-light"] #wallpaper,
html[data-skin="aurora-dark"] #wallpaper,
html[data-skin="sumi-light"] #wallpaper,
html[data-skin="sumi-dark"] #wallpaper,
html[data-skin="bauhaus-light"] #wallpaper,
html[data-skin="bauhaus-dark"] #wallpaper,
html[data-skin="crt-amber"] #wallpaper,
html[data-skin="crt-phosphor"] #wallpaper {
  background-color: var(--skin-wall);      /* фолбэк: дыр в рабочем столе не бывает */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

html[data-skin="aurora-light"]     #wallpaper { background-image: url("../wallpapers/skin-aurora-light.svg"); }
html[data-skin="aurora-dark"]      #wallpaper { background-image: url("../wallpapers/skin-aurora-dark.svg"); }
html[data-skin="sumi-light"]       #wallpaper { background-image: url("../wallpapers/skin-sumi-light.svg"); }
html[data-skin="sumi-dark"]        #wallpaper { background-image: url("../wallpapers/skin-sumi-dark.svg"); }
html[data-skin="bauhaus-light"]    #wallpaper { background-image: url("../wallpapers/skin-bauhaus-light.svg"); }
html[data-skin="bauhaus-dark"]     #wallpaper { background-image: url("../wallpapers/skin-bauhaus-dark.svg"); }
html[data-skin="crt-amber"]        #wallpaper { background-image: url("../wallpapers/skin-crt-amber.svg"); }
html[data-skin="crt-phosphor"]     #wallpaper { background-image: url("../wallpapers/skin-crt-phosphor.svg"); }

/* ═══════════════════════════════ ХРОМ — характер скина ═══════════════════════════════ */

/* AURORA: тонкая светящаяся кромка окна — как линия горизонта */
html[data-skin="aurora-dark"] .win {
  border-color: color-mix(in srgb, var(--accent) 26%, var(--window-border));
}
html[data-skin="aurora-light"] .win {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--window-border));
}

/* BAUHAUS: прямые углы не только у окна — у контролов тоже; рамка чернильная, 2px */
html[data-skin="bauhaus-light"] .win,
html[data-skin="bauhaus-dark"] .win { border-width: 2px; }
html[data-skin="bauhaus-light"] .tb-btn,
html[data-skin="bauhaus-dark"] .tb-btn,
html[data-skin="bauhaus-light"] .dock-icon,
html[data-skin="bauhaus-dark"] .dock-icon,
html[data-skin="bauhaus-light"] .dock,
html[data-skin="bauhaus-dark"] .dock { border-radius: 0 !important; }

/* SUMI: хедербар отделён тонкой линией туши, заголовок — разрежённее */
html[data-skin="sumi-light"] .titlebar,
html[data-skin="sumi-dark"] .titlebar { letter-spacing: .02em; }

/* CRT: развёртка на панелях (только фон панели, не текст), свечение акцента */
html[data-skin="crt-amber"] #topbar,
html[data-skin="crt-phosphor"] #topbar,
html[data-skin="crt-amber"] .dock,
html[data-skin="crt-phosphor"] .dock {
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,.22) 0 1px,
    transparent 1px 3px
  );
}
html[data-skin="crt-amber"] .dock-icon.running,
html[data-skin="crt-phosphor"] .dock-icon.running {
  box-shadow: 0 0 8px currentColor;
}
html[data-skin="crt-amber"] .win.focused,
html[data-skin="crt-phosphor"] .win.focused {
  box-shadow: var(--shadow-focus);
}

/* ═══════════════════════════════ ИКОНКИ ═══════════════════════════════
   ФОРМА иконок задаётся наборами в src/theme/icons/sets.js и выбирается скином
   автоматически (data-skin → набор). Здесь — только то, что набор задать не может:
   свечение и «ступенчатость» как эффект поверхности. Толщину штриха и торцы
   НЕ переопределяем: иначе набор спорит сам с собой. */

/* AURORA — ореол цвета сияния вокруг тонкой линии */
html[data-skin="aurora-light"] .icon {
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 70%, transparent));
}
html[data-skin="aurora-dark"] .icon {
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 75%, transparent));
}

/* CRT — монохромный люминофор: иконка горит, запущенное приложение — сильнее */
html[data-skin="crt-amber"] .icon { filter: drop-shadow(0 0 3px rgba(255,176,0,.55)); }
html[data-skin="crt-phosphor"] .icon { filter: drop-shadow(0 0 3px rgba(51,255,136,.50)); }
html[data-skin="crt-amber"] .dock-icon.running .icon { filter: drop-shadow(0 0 5px rgba(255,176,0,.85)); }
html[data-skin="crt-phosphor"] .dock-icon.running .icon { filter: drop-shadow(0 0 5px rgba(51,255,136,.80)); }
html[data-skin="aurora-dark"] .dock-icon.running .icon { filter: drop-shadow(0 0 5px var(--accent)); }

/* Запущенное приложение в доке: иконка подмешивает акцент скина, а не только точка под ней */
html[data-skin] .dock-icon.running { color: color-mix(in srgb, var(--panel-fg) 72%, var(--accent)); }

/* ═══════════════════════════════ ДОСТУПНОСТЬ ═══════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  html[data-skin] .win,
  html[data-skin] .tb-btn,
  html[data-skin] .dock-icon { transition-duration: 1ms !important; }
}

/* ═══════════════════════════════ ПИКЕР В SETTINGS → APPEARANCE ═══════════════════════════════
   Классы .theme-opts/.theme-opt ставит src/apps/settings.js (разметка Кодди).
   Здесь — только свотчи новых скинов: два-три цвета, читаемые как миниатюра обоев. */

.theme-opt-swatch { position: relative; overflow: hidden; }
/* AURORA: лента сияния по ночному небу */
.theme-opt[data-skin="aurora-light"] .theme-opt-swatch {
  background: linear-gradient(150deg, #cfe6f4 0%, #8fc4dc 42%, #3fd68a 74%, #6f7fd8 100%);
}
.theme-opt[data-skin="aurora-dark"] .theme-opt-swatch {
  background: linear-gradient(150deg, #0a1a27 0%, #1f6f6a 46%, #3fd68a 72%, #9141ac 100%);
}
/* SUMI: бумага + красная печать */
.theme-opt[data-skin="sumi-light"] .theme-opt-swatch {
  background: linear-gradient(150deg, #f8f3e8 0%, #efe6d4 66%, #b8352a 100%);
}
.theme-opt[data-skin="sumi-dark"] .theme-opt-swatch {
  background: linear-gradient(150deg, #14161e 0%, #33343f 58%, #e58ba1 100%);
}
/* BAUHAUS: три первичных цвета на костяном */
.theme-opt[data-skin="bauhaus-light"] .theme-opt-swatch {
  background: linear-gradient(135deg, #e01b24 0%, #e5a50a 50%, #1c71d8 100%);
}
.theme-opt[data-skin="bauhaus-dark"] .theme-opt-swatch {
  background: linear-gradient(135deg, #ff4b3e 0%, #f2b31a 50%, #3b8bf0 100%);
}
/* CRT: монохром + строка развёртки */
.theme-opt[data-skin="crt-amber"] .theme-opt-swatch {
  background: repeating-linear-gradient(to bottom, #ffb000 0 2px, #6b4a00 2px 4px);
}
.theme-opt[data-skin="crt-phosphor"] .theme-opt-swatch {
  background: repeating-linear-gradient(to bottom, #33ff88 0 2px, #0d5a30 2px 4px);
}


/* ═══════════════════════════ 5–10. ВТОРАЯ ВОЛНА: ANIME / PIXEL / CYBER / POST-PUNK / ALCHEMY / FRIDAY 13 ═══════════════════════════
   Приказ Мити (17.10.2026): «сделай ещё темы: аниме стиль, пиксель стиль, кибер-панк, пост-панк,
   алхимия, пятница 13». Каждый стиль — со своей ФОРМОЙ хрома (радиус, толщина рамки, тип тени),
   а не только с другой палитрой: скин должен читаться без обоев.

        <html data-skin="anime-light">       «Сэйю», день   — cel-shading: плоскость + чернильный контур
        <html data-skin="anime-dark">        «Сэйю», ночь
        <html data-skin="pixel">             «Восемь бит»   — сетка 12px, ноль сглаживания
        <html data-skin="cyber">             «Неоновая ночь» — неон, скан-линия, свечение
        <html data-skin="postpunk-light">    «Ксерокс», лист — чёрное на бумаге, сдвиг приводки
        <html data-skin="postpunk-dark">     «Ксерокс», инверсия
        <html data-skin="alchemy-light">     «Герметика», пергамент — тёплый лист, золото, печать
        <html data-skin="alchemy-dark">      «Герметика», ночная лаборатория
        <html data-skin="friday13">          «Пятница, 13-е» — пепел и кровь, трещины

   КОНТРАСТ. --window-fg к --window-bg у каждого скина ≥ 7:1 (замерено, см. tools/strikh/measure_skins.py).
   Эффекты (свечение, развёртка, зерно) живут на обоях и на границах окон/панелей — НИКОГДА поверх
   текста. Текст читается при любом эффекте: правило Архитектора.  */

/* ─────────── 5. ANIME — «Сэйю» ─────────── */

html[data-skin="anime-light"] {
  --skin-wall: #bfe3f8;
  --skin-ink:  #241c33;

  --accent:        #d6206e;   /* сюжетный розовый: цвет акцента аниме-кадра */
  --accent-hover:  #ef3781;
  --accent-active: #b91a5e;
  --accent-fg:     #ffffff;
  --accent-bg:     rgba(214,32,110,.14);

  --window-bg:     #fdfbfe;
  --window-fg:     rgb(28 22 42 / 90%);
  --window-border: rgba(36,28,51,.55);
  --radius-window: 16px;

  --headerbar-bg:      #ffffff;
  --headerbar-bg-back: #f6f0fa;
  --headerbar-fg:      rgb(28 22 42 / 90%);
  --headerbar-border:  rgba(36,28,51,.42);

  --panel-bg: rgba(253,251,254,.94);
  --panel-fg: rgb(28 22 42 / 90%);
  --dock-bg:  rgba(253,251,254,.90);

  --shadow-window:   0 6px 22px rgba(36,28,51,.18), 0 1px 3px rgba(36,28,51,.10);
  --shadow-focus:    0 14px 40px rgba(36,28,51,.26), 0 3px 8px rgba(36,28,51,.14);
  --shadow-backdrop: 0 3px 10px rgba(36,28,51,.10);
  --focus-ring:      rgba(214,32,110,.60);

  --destructive: #c01c28; --success: #26a269; --warning: #cd9309;
}

html[data-skin="anime-dark"] {
  --skin-wall: #171334;
  --skin-ink:  #f4eeff;

  --accent:        #ff86b0;
  --accent-hover:  #ffa0c2;
  --accent-active: #f0709c;
  --accent-fg:     #2a0a18;   /* тёмный текст на светлом акценте: контраст выше белого */
  --accent-bg:     rgba(255,134,176,.20);

  --window-bg:     #1b1733;
  --window-fg:     #f4eeff;
  --window-border: rgba(244,238,255,.42);
  --radius-window: 16px;

  --headerbar-bg:      #241d3f;
  --headerbar-bg-back: #1b1733;
  --headerbar-fg:      #f4eeff;
  --headerbar-border:  rgba(244,238,255,.22);

  --panel-bg: rgba(27,23,51,.92);
  --panel-fg: #f4eeff;
  --dock-bg:  rgba(27,23,51,.88);

  --shadow-window:   0 6px 22px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.35);
  --shadow-focus:    0 14px 44px rgba(0,0,0,.70), 0 0 34px rgba(255,134,176,.18);
  --shadow-backdrop: 0 3px 10px rgba(0,0,0,.35);
  --focus-ring:      rgba(255,134,176,.65);

  --destructive: #c01c28; --success: #26a269; --warning: #cd9309;
}

/* ─────────── 6. PIXEL — «Восемь бит» ─────────── */

html[data-skin="pixel"] {
  --skin-wall: #101636;
  --skin-ink:  #e8eeff;

  --accent:        #ffe08a;   /* звезда-пиксель */
  --accent-hover:  #fff0b8;
  --accent-active: #e6c46f;
  --accent-fg:     #221a04;
  --accent-bg:     rgba(255,224,138,.18);

  --window-bg:     #131a3d;
  --window-fg:     #e8eeff;
  --window-border: rgba(143,164,230,.55);
  --radius-window: 0px;       /* 8 бит не знает скруглений */

  --headerbar-bg:      #1b2450;
  --headerbar-bg-back: #131a3d;
  --headerbar-fg:      #e8eeff;
  --headerbar-border:  rgba(143,164,230,.45);

  --panel-bg: rgba(19,26,61,.94);
  --panel-fg: #e8eeff;
  --dock-bg:  rgba(19,26,61,.92);

  --shadow-window:   4px 4px 0 #05070f;    /* жёсткий сдвиг, не размытие: пиксель */
  --shadow-focus:    4px 4px 0 #05070f, 0 0 0 2px #8fa4e6;
  --shadow-backdrop: 2px 2px 0 #05070f;
  --focus-ring:      rgba(255,224,138,.70);

  --destructive: #c01c28; --success: #26a269; --warning: #cd9309;
}

/* ─────────── 7. CYBERPUNK — «Неоновая ночь» ─────────── */

html[data-skin="cyber"] {
  --skin-wall: #160430;
  --skin-ink:  #eae4ff;

  --accent:        #ff2d95;
  --accent-hover:  #ff57ab;
  --accent-active: #e01a80;
  --accent-fg:     #14001f;   /* на магента тёмный текст читается, белый — нет */
  --accent-bg:     rgba(255,45,149,.22);

  --window-bg:     #170a2e;
  --window-fg:     #eae4ff;
  --window-border: rgba(255,45,149,.42);
  --radius-window: 4px;

  --headerbar-bg:      #22103f;
  --headerbar-bg-back: #170a2e;
  --headerbar-fg:      #eae4ff;
  --headerbar-border:  rgba(0,229,255,.30);

  --panel-bg: rgba(23,10,46,.92);
  --panel-fg: #eae4ff;
  --dock-bg:  rgba(23,10,46,.88);

  --shadow-window:   0 0 0 1px rgba(255,45,149,.35), 0 8px 30px rgba(0,0,0,.75), 0 0 30px rgba(255,45,149,.16);
  --shadow-focus:    0 0 0 1px rgba(0,229,255,.55), 0 10px 36px rgba(0,0,0,.82), 0 0 44px rgba(0,229,255,.22);
  --shadow-backdrop: 0 0 0 1px rgba(255,45,149,.18), 0 4px 14px rgba(0,0,0,.65);
  --focus-ring:      rgba(0,229,255,.70);

  --destructive: #ff3b30; --success: #00e5a0; --warning: #ffb300;
}

/* ─────────── 8. POST-PUNK — «Ксерокс» ─────────── */

html[data-skin="postpunk-light"] {
  --skin-wall: #f2f0ea;
  --skin-ink:  #0d0d0d;

  --accent:        #c8402f;   /* промах приводки печатающей машины */
  --accent-hover:  #d95440;
  --accent-active: #ab3325;
  --accent-fg:     #fbfaf6;
  --accent-bg:     rgba(200,64,47,.14);

  --window-bg:     #fbfaf6;
  --window-fg:     rgb(13 13 13 / 94%);
  --window-border: rgba(13,13,13,.88);
  --radius-window: 0px;

  --headerbar-bg:      #ffffff;
  --headerbar-bg-back: #f2f0ea;
  --headerbar-fg:      rgb(13 13 13 / 94%);
  --headerbar-border:  rgb(13 13 13 / 80%);

  --panel-bg: rgba(251,250,246,.95);
  --panel-fg: rgb(13 13 13 / 94%);
  --dock-bg:  rgba(251,250,246,.92);

  --shadow-window:   3px 3px 0 rgba(13,13,13,.85);
  --shadow-focus:    4px 4px 0 rgba(13,13,13,.90), 0 0 0 2px rgba(200,64,47,.35);
  --shadow-backdrop: 2px 2px 0 rgba(13,13,13,.40);
  --focus-ring:      rgba(200,64,47,.65);

  --destructive: #b3151f; --success: #1d6b3a; --warning: #8a6100;
}

html[data-skin="postpunk-dark"] {
  --skin-wall: #0c0c0c;
  --skin-ink:  #f2f0ea;

  --accent:        #e2543c;
  --accent-hover:  #f06a52;
  --accent-active: #c4422c;
  --accent-fg:     #140604;
  --accent-bg:     rgba(226,84,60,.20);

  --window-bg:     #0f0f0f;
  --window-fg:     #f2f0ea;
  --window-border: rgba(242,240,234,.72);
  --radius-window: 0px;

  --headerbar-bg:      #161616;
  --headerbar-bg-back: #0f0f0f;
  --headerbar-fg:      #f2f0ea;
  --headerbar-border:  rgb(242 240 234 / 55%);

  --panel-bg: rgba(15,15,15,.94);
  --panel-fg: #f2f0ea;
  --dock-bg:  rgba(15,15,15,.92);

  --shadow-window:   3px 3px 0 rgba(242,240,234,.30);
  --shadow-focus:    4px 4px 0 rgba(242,240,234,.42), 0 0 0 2px rgba(226,84,60,.35);
  --shadow-backdrop: 2px 2px 0 rgba(242,240,234,.16);
  --focus-ring:      rgba(226,84,60,.65);

  --destructive: #c01c28; --success: #26a269; --warning: #cd9309;
}

/* ─────────── 9. ALCHEMY — «Герметика» ─────────── */

html[data-skin="alchemy-light"] {
  --skin-wall: #efe3c8;
  --skin-ink:  #2a2118;

  --accent:        #8c2f22;   /* сургучная печать */
  --accent-hover:  #a33a2a;
  --accent-active: #75261b;
  --accent-fg:     #f8efdb;
  --accent-bg:     rgba(140,47,34,.13);

  --window-bg:     #f7efdc;
  --window-fg:     rgb(42 33 24 / 92%);
  --window-border: rgba(42,33,24,.38);
  --radius-window: 10px;

  --headerbar-bg:      #fbf5e6;
  --headerbar-bg-back: #f0e6cd;
  --headerbar-fg:      rgb(42 33 24 / 92%);
  --headerbar-border:  rgba(184,135,59,.55);

  --panel-bg: rgba(247,239,220,.94);
  --panel-fg: rgb(42 33 24 / 92%);
  --dock-bg:  rgba(247,239,220,.90);

  --shadow-window:   0 6px 24px rgba(60,44,24,.22), 0 1px 4px rgba(60,44,24,.14);
  --shadow-focus:    0 14px 40px rgba(60,44,24,.34), 0 3px 8px rgba(60,44,24,.18);
  --shadow-backdrop: 0 3px 10px rgba(60,44,24,.16);
  --focus-ring:      rgba(140,47,34,.60);

  --destructive: #8c2f22; --success: #3f6b3a; --warning: #8a6100;
}

html[data-skin="alchemy-dark"] {
  --skin-wall: #14110c;
  --skin-ink:  #efe6d2;

  --accent:        #d9a63c;   /* золото герметики */
  --accent-hover:  #e8b954;
  --accent-active: #c1932c;
  --accent-fg:     #2a1e07;
  --accent-bg:     rgba(217,166,60,.18);

  --window-bg:     #191510;
  --window-fg:     #efe6d2;
  --window-border: rgba(217,166,60,.38);
  --radius-window: 10px;

  --headerbar-bg:      #221b12;
  --headerbar-bg-back: #191510;
  --headerbar-fg:      #efe6d2;
  --headerbar-border:  rgba(217,166,60,.32);

  --panel-bg: rgba(25,21,16,.94);
  --panel-fg: #efe6d2;
  --dock-bg:  rgba(25,21,16,.90);

  --shadow-window:   0 6px 24px rgba(0,0,0,.62), 0 0 26px rgba(217,166,60,.10);
  --shadow-focus:    0 14px 42px rgba(0,0,0,.75), 0 0 40px rgba(217,166,60,.18);
  --shadow-backdrop: 0 3px 10px rgba(0,0,0,.42);
  --focus-ring:      rgba(217,166,60,.62);

  --destructive: #c0563f; --success: #46a06a; --warning: #cd9309;
}

/* ─────────── 10. FRIDAY 13 — «Пятница, 13-е» ─────────── */

html[data-skin="friday13"] {
  --skin-wall: #07070b;
  --skin-ink:  #cfc9df;

  --accent:        #b3122b;   /* кровь — акцент, а не заливка */
  --accent-hover:  #cc1834;
  --accent-active: #960e23;
  --accent-fg:     #ffffff;
  --accent-bg:     rgba(179,18,43,.18);

  --window-bg:     #0c0c10;
  --window-fg:     #e8e6f0;
  --window-border: rgba(207,201,223,.24);
  --radius-window: 3px;

  --headerbar-bg:      #111116;
  --headerbar-bg-back: #0c0c10;
  --headerbar-fg:      #e8e6f0;
  --headerbar-border:  rgba(207,201,223,.18);

  --panel-bg: rgba(12,12,16,.94);
  --panel-fg: #e8e6f0;
  --dock-bg:  rgba(12,12,16,.92);

  --shadow-window:   0 0 0 1px rgba(179,18,43,.22), 0 8px 30px rgba(0,0,0,.80);
  --shadow-focus:    0 0 0 1px rgba(179,18,43,.45), 0 12px 38px rgba(0,0,0,.86), 0 0 34px rgba(179,18,43,.14);
  --shadow-backdrop: 0 0 0 1px rgba(179,18,43,.12), 0 4px 14px rgba(0,0,0,.65);
  --focus-ring:      rgba(179,18,43,.65);

  --destructive: #d81b32; --success: #26a269; --warning: #cd9309;
}

/* ═══════════════════ ОБОИ ВТОРОЙ ВОЛНЫ ═══════════════════ */

html[data-skin^="anime-"] #wallpaper,
html[data-skin="pixel"] #wallpaper,
html[data-skin="cyber"] #wallpaper,
html[data-skin^="postpunk-"] #wallpaper,
html[data-skin^="alchemy-"] #wallpaper,
html[data-skin="friday13"] #wallpaper {
  background-color: var(--skin-wall);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

html[data-skin="anime-light"]    #wallpaper { background-image: url("../wallpapers/skin-anime-light.svg"); }
html[data-skin="anime-dark"]     #wallpaper { background-image: url("../wallpapers/skin-anime-dark.svg"); }
html[data-skin="pixel"]          #wallpaper { background-image: url("../wallpapers/skin-pixel.svg"); }
html[data-skin="cyber"]          #wallpaper { background-image: url("../wallpapers/skin-cyber.svg"); }
html[data-skin="postpunk-light"] #wallpaper { background-image: url("../wallpapers/skin-postpunk-light.svg"); }
html[data-skin="postpunk-dark"]  #wallpaper { background-image: url("../wallpapers/skin-postpunk-dark.svg"); }
html[data-skin="alchemy-light"]  #wallpaper { background-image: url("../wallpapers/skin-alchemy-light.svg"); }
html[data-skin="alchemy-dark"]   #wallpaper { background-image: url("../wallpapers/skin-alchemy-dark.svg"); }
html[data-skin="friday13"]       #wallpaper { background-image: url("../wallpapers/skin-friday13.svg"); }

/* ═══════════════════ ФОРМА ХРОМА ВТОРОЙ ВОЛНЫ ═══════════════════
   Скин узнаётся по хрому, даже если обои закрыты окном: радиус, толщина рамки, тип тени. */

/* ANIME: плашка с чернильным контуром — cadr cel-shading */
html[data-skin^="anime-"] .win { border-width: 2px; }
html[data-skin^="anime-"] .titlebar { letter-spacing: .01em; }
html[data-skin="anime-light"] .dock,
html[data-skin="anime-light"] .dock-icon { border-radius: 18px; }
html[data-skin="anime-light"] .dock { box-shadow: 0 6px 20px rgba(36,28,51,.18), 0 0 0 2px rgba(36,28,51,.35); }
html[data-skin="anime-dark"] .dock { box-shadow: 0 8px 26px rgba(0,0,0,.55), 0 0 0 2px rgba(244,238,255,.18); }

/* PIXEL: ничего не круглится, панели — «ступеньки», развёртки нет */
html[data-skin="pixel"] .win,
html[data-skin="pixel"] .dock,
html[data-skin="pixel"] .dock-icon,
html[data-skin="pixel"] .tb-btn { border-radius: 0 !important; }
html[data-skin="pixel"] .win { border-width: 2px; }
html[data-skin="pixel"] .titlebar,
html[data-skin="pixel"] .dock { font-family: var(--font-mono); letter-spacing: .04em; }
html[data-skin="pixel"] #topbar,
html[data-skin="pixel"] .dock {
  background-image: repeating-linear-gradient(to right, rgba(143,164,230,.10) 0 3px, transparent 3px 6px);
}
html[data-skin="pixel"] .dock-icon.running { box-shadow: 3px 3px 0 #05070f, 0 0 0 2px var(--accent); }

/* CYBERPUNK: скан-линия и неон по границам, текст не трогаем */
html[data-skin="cyber"] #topbar,
html[data-skin="cyber"] .dock {
  background-image: repeating-linear-gradient(to bottom, rgba(0,229,255,.10) 0 1px, transparent 1px 4px);
}
html[data-skin="cyber"] .titlebar {
  font-family: var(--font-mono); letter-spacing: .05em; text-transform: uppercase;
  border-bottom: 1px solid rgba(0,229,255,.35);
}
html[data-skin="cyber"] .dock-icon.running { box-shadow: 0 0 10px var(--accent); }
html[data-skin="cyber"] .win.focused { box-shadow: var(--shadow-focus); }

/* POST-PUNK: чернильная рамка, жёсткий оттиск, заголовок как шапка зина */
html[data-skin^="postpunk-"] .win { border-width: 2px; }
html[data-skin^="postpunk-"] .titlebar {
  text-transform: uppercase; letter-spacing: .10em; font-weight: 800;
  border-bottom: 2px solid currentColor;
}
html[data-skin^="postpunk-"] .dock,
html[data-skin^="postpunk-"] .dock-icon,
html[data-skin^="postpunk-"] .tb-btn { border-radius: 0 !important; }

/* ALCHEMY: заголовок антиквой, золотая линия под хедербаром, тёплая тень */
html[data-skin^="alchemy-"] .titlebar {
  font-family: Georgia, "Times New Roman", serif; letter-spacing: .03em;
  border-bottom: 1px solid rgba(184,135,59,.55);
}
html[data-skin^="alchemy-"] .dock-icon.running { color: var(--accent); }
html[data-skin="alchemy-dark"] .dock-icon.running .icon { filter: drop-shadow(0 0 5px rgba(217,166,60,.75)); }

/* FRIDAY 13: тонкая рама, царапина по панели, кровь только в акценте */
html[data-skin="friday13"] #topbar,
html[data-skin="friday13"] .dock {
  background-image: repeating-linear-gradient(to bottom, rgba(207,201,223,.05) 0 2px, transparent 2px 5px);
}
html[data-skin="friday13"] .titlebar { letter-spacing: .04em; border-bottom: 1px solid rgba(179,18,43,.35); }
html[data-skin="friday13"] .dock-icon.running { box-shadow: 0 0 9px rgba(179,18,43,.65); }

/* ═══════════════════ ИКОНКИ ВТОРОЙ ВОЛНЫ ═══════════════════
   Форма набора — из sets.js (скин → набор); здесь только свечение/поверхность. */

html[data-skin="anime-dark"] .icon   { filter: drop-shadow(0 0 3px rgba(255,134,176,.55)); }
html[data-skin="cyber"] .icon        { filter: drop-shadow(0 0 4px rgba(0,229,255,.60)); }
html[data-skin="cyber"] .dock-icon.running .icon { filter: drop-shadow(0 0 7px rgba(255,45,149,.85)); }
html[data-skin="pixel"] .icon        { image-rendering: pixelated; }
html[data-skin="postpunk-light"] .icon,
html[data-skin="postpunk-dark"] .icon { filter: contrast(1.08); }
html[data-skin="alchemy-dark"] .icon { filter: drop-shadow(0 0 3px rgba(217,166,60,.45)); }
html[data-skin="friday13"] .icon     { filter: drop-shadow(0 0 3px rgba(179,18,43,.45)); }

/* ═══════════════════ СВОТЧИ В SETTINGS → APPEARANCE ═══════════════════ */

/* ANIME: небо кадра + розовый акцент */
.theme-opt[data-skin="anime-light"] .theme-opt-swatch {
  background: linear-gradient(165deg, #a9d8f5 0%, #ffd9c7 58%, #ffcf4d 78%, #d6206e 100%);
}
.theme-opt[data-skin="anime-dark"] .theme-opt-swatch {
  background: linear-gradient(165deg, #0b1030 0%, #31204d 60%, #6b2e63 82%, #ff86b0 100%);
}
/* PIXEL: дискретные ступени, без плавного перехода */
.theme-opt[data-skin="pixel"] .theme-opt-swatch {
  background: linear-gradient(180deg, #101636 0 25%, #23305e 25% 50%, #46599f 50% 75%, #8fa4e6 75% 100%);
}
/* CYBER: магента × циан */
.theme-opt[data-skin="cyber"] .theme-opt-swatch {
  background: linear-gradient(150deg, #0a0618 0%, #25073a 42%, #ff2d95 72%, #00e5ff 100%);
}
/* POST-PUNK: чёрно-белый зин + промах приводки */
.theme-opt[data-skin="postpunk-light"] .theme-opt-swatch {
  background: linear-gradient(150deg, #f2f0ea 0%, #0d0d0d 62%, #c8402f 100%);
}
.theme-opt[data-skin="postpunk-dark"] .theme-opt-swatch {
  background: linear-gradient(150deg, #0c0c0c 0%, #f2f0ea 62%, #e2543c 100%);
}
/* ALCHEMY: пергамент + золото + печать */
.theme-opt[data-skin="alchemy-light"] .theme-opt-swatch {
  background: linear-gradient(150deg, #efe3c8 0%, #d9c191 58%, #b8873b 80%, #8c2f22 100%);
}
.theme-opt[data-skin="alchemy-dark"] .theme-opt-swatch {
  background: linear-gradient(150deg, #14110c 0%, #3a2f1c 58%, #d9a63c 88%, #8c2f22 100%);
}
/* FRIDAY 13: пепел и кровь */
.theme-opt[data-skin="friday13"] .theme-opt-swatch {
  background: linear-gradient(150deg, #07070b 0%, #2c2a38 48%, #cfc9df 74%, #b3122b 100%);
}