/* ═══════════════════════════════════════════════════════════════════════
   brand.css — единое оформление сайта и программы озвучки (тёмная тема).
   Подключается в index.html ПОСЛЕ style.css. Только оформление: логика не затрагивается.
   Откат: удалить строку <link ... brand.css> в index.html.
   Селекторы начинаются с «html body», чтобы перекрыть стили, которые script.js и settings.js
   добавляют в страницу сами.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --b-bg:#2a2a2a; --b-bar:#232323; --b-bar2:#1e1e1e; --b-line:#3d3d3d;
  --b-text:#e6e6e6; --b-dim:#a9a9a9; --b-field:#2f2f2f; --b-field-line:#4a4a4a;
  --b-accent:#b5412c; --b-accent-text:#e8795f; --b-paper:#ece3cf;
  --b-font:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --b-bar-h:64px;
}
html body{font-family:var(--b-font);color:var(--b-text)}

/* ── верхняя панель: логотип, красная линия, путь ── */
html body .top-bar{height:var(--b-bar-h);padding:0 14px 0 16px;background:var(--b-bar);border-bottom:3px solid var(--b-accent)!important}
html body .top-bar-left{display:flex;align-items:center;min-width:0;flex:1}
html body .brand{display:flex;align-items:center;gap:10px;padding-right:18px;margin-right:18px;border-right:1px solid var(--b-line);flex-shrink:0;color:var(--b-text);text-decoration:none}
html body .brand svg{width:36px;height:36px;display:block}
html body .breadcrumbs{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden;font-size:15px;font-weight:400;color:var(--b-dim)}
html body .breadcrumb-count{color:#777;font-size:12px;margin-left:8px}
/* название серии — в рамке на красноватом фоне, место фиксированной ширины */
html body .breadcrumbs .cr-ser{display:inline-block;flex:0 1 auto;min-width:150px;max-width:60vw;overflow:hidden;text-overflow:ellipsis;color:#fff;font-weight:600;background:rgba(181,65,44,.30);box-shadow:inset 0 0 0 1px rgba(232,121,95,.55);border-radius:5px;padding:4px 12px}
html body .breadcrumbs .cr-count{color:#8f8f8f;font-size:12px;margin-left:10px;flex-shrink:0}
html body .top-bar .top-btn{font-size:12px;color:#d0d0d0;background:var(--b-field);border:1px solid var(--b-field-line);border-radius:4px;padding:4px 11px}
html body .top-bar .top-btn:hover{color:#fff;border-color:var(--b-accent-text)}
html body .top-bar .top-btn-cabinet{color:var(--b-accent-text);border-color:#7a3a2c}
html body .top-bar .top-btn-cabinet:hover{color:#fff;border-color:var(--b-accent-text)}
html body #btn-settings{color:#d0d0d0;background:var(--b-field);border-color:var(--b-field-line)}
html body #btn-settings:hover{color:#fff;border-color:var(--b-accent-text)}
html body #btn-settings.active{color:var(--b-accent-text);border-color:var(--b-accent-text);background:rgba(181,65,44,.18)}

/* ── дерево ── */
html body .folder-tree{background:var(--b-bar2);border-right:1px solid var(--b-line)}
html body .tree-header{height:var(--b-bar-h);display:flex;align-items:center;padding:0 16px;background:var(--b-bar);border-bottom:3px solid var(--b-accent);font-size:16px;font-weight:600;color:var(--b-text)}
html body .tree-content{padding:8px 0}
html body .tree-item{padding:6px 10px 6px 14px;font-size:14px;color:var(--b-dim)}
html body .tree-item:hover{background:#2a2a2a;color:#fff}
html body .tree-item.active{background:var(--b-accent);color:#fff}
html body .tree-item .arrow{color:inherit}
html body .tree-item .icon{display:inline-flex;align-items:center;justify-content:center}
html body .tree-item .icon svg{width:18px;height:18px}

/* ── рабочее окно: тёмный фон со слабой штриховкой ── */
html body .gallery-container{background-color:var(--b-bg)!important;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.018) 0 2px,rgba(0,0,0,0) 2px 6px)!important}
html body .cat_item{background:#555;border:1px solid #666;border-radius:7px}
html body .cat_item:hover{border-color:#888}
/* ── квадрат раздела/года: веер из трёх превью, плотно по границам (как в narrator) ── */
html body .subfolder-card .fc{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:8px;border:0;background:linear-gradient(165deg,#3b3b3b 0%,#2e2e2e 60%,#262626 100%);box-shadow:0 3px 10px rgba(0,0,0,.35);transition:border-color .15s,box-shadow .25s}
html body .subfolder-card:hover .fc{box-shadow:0 9px 20px rgba(0,0,0,.55)}
html body .subfolder-card .fan{position:absolute;inset:0 0 26px 0;--fw:58%;--fh:90%;--sp:21%;background:radial-gradient(ellipse at 50% 40%,rgba(236,227,207,.08),rgba(0,0,0,0) 70%)}
html body .subfolder-card .ft{position:absolute;top:calc(50% - var(--fh) / 2);width:var(--fw);height:var(--fh);display:flex;align-items:center;justify-content:center;transition:transform .35s cubic-bezier(.2,.8,.25,1)}
html body .subfolder-card .ft::after{content:"";width:86%;height:86%;background:var(--b-paper,#ece3cf);opacity:.22;border-radius:2px}
html body .subfolder-card .ft.has::after{display:none}
html body .subfolder-card .ft img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:2px;box-shadow:0 3px 8px rgba(0,0,0,.6)}
html body .subfolder-card .ft:not(.has) img{position:absolute;opacity:0}
html body .subfolder-card .ft.f0{left:calc(50% - var(--fw) / 2 - var(--sp));transform:rotate(-9deg);z-index:1}
html body .subfolder-card .ft.f1{left:calc(50% - var(--fw) / 2);z-index:3}
html body .subfolder-card .ft.f2{left:calc(50% - var(--fw) / 2 + var(--sp));transform:rotate(8deg);z-index:2}
html body .subfolder-card:hover .ft.f0{transform:translateX(-5px) rotate(-13deg)}
html body .subfolder-card:hover .ft.f1{transform:translateY(-4px)}
html body .subfolder-card:hover .ft.f2{transform:translateX(5px) rotate(12deg)}
html body .subfolder-card .cap{position:absolute;left:0;right:0;bottom:0;z-index:5;height:26px;display:flex;align-items:center;justify-content:center;padding:0 6px;background:none;box-sizing:border-box}
html body .subfolder-card .cap .n{font-size:15px;font-weight:700;line-height:1;color:#c9a46a;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.9)}
html body .subfolder-card .cap .n.long{font-size:11px;font-weight:600;white-space:normal;text-align:center}
html body .cat_item_title{color:#f7f7f7!important}

/* ── пагинация ── */
html body .pagination{background:var(--b-bar);border-top:1px solid var(--b-line)}
html body .pg-btn{background:var(--b-field);border-color:var(--b-field-line);color:#d0d0d0}
html body .pg-btn:hover{background:#3a3a3a;color:#fff}
html body .pg-btn.active{background:var(--b-accent);border-color:var(--b-accent);color:#fff}
html body .pg-info{color:#8f8f8f}

/* ── страница серии: название уже в верхней панели, этикетки по центру окна с минимальным отступом сверху ── */
html body .series-frame-title{display:none}
html body .series-outer{padding:40px 0 40px}
html body .series-frame{margin-block:auto;padding-top:0;padding-bottom:0}
html body .series-nav-btn{background:rgba(35,35,35,.7);border-color:var(--b-field-line)}

/* ── окна, меню и подсказки ── */
html body .reg-dialog,
html body .ctx-menu,
html body .trade-drop,
html body .series-trade-drop{background:var(--b-bar);border-color:var(--b-line);color:var(--b-text)}
html body .reg-dialog h3{color:#fff}
html body .reg-dialog p{color:var(--b-dim)}
html body .reg-dialog button{background:var(--b-accent)}
html body .ctx-menu-title{color:#8f8f8f;border-bottom-color:var(--b-line)}
html body .ctx-menu-item,
html body .trade-drop-item,
html body .series-trade-drop-item{color:#d0d0d0}
html body .ctx-menu-item:hover,
html body .trade-drop-item:hover,
html body .series-trade-drop-item:hover{background:#2f2f2f;color:#fff}

/* ── панель настроек ── */
html body #settings-panel{background:var(--b-bar);border-color:var(--b-line);color:#d0d0d0;font-family:var(--b-font)}
html body .sp-header{border-bottom-color:var(--b-line)}
html body .sp-title{color:#fff}
html body .sp-close{color:#8f8f8f}
html body .sp-close:hover{color:#fff}
html body .sp-section-label{color:#8f8f8f}
html body .sp-row-label{color:#d0d0d0}
html body .sp-slider{background:#444}
html body .sp-slider::-webkit-slider-thumb{background:var(--b-accent-text)}
html body .sp-slider::-moz-range-thumb{background:var(--b-accent-text)}
html body .sp-val{color:var(--b-accent-text)}
html body .sp-seg{border-color:var(--b-field-line)}
html body .sp-seg-btn{background:var(--b-field);color:#a9a9a9;border-right-color:var(--b-field-line)}
html body .sp-seg-btn:hover{background:#3a3a3a;color:#fff}
html body .sp-seg-btn.active{background:var(--b-accent);color:#fff}
html body .sp-toggle-track{background:#4a4a4a}
html body .sp-toggle input:checked + .sp-toggle-track{background:var(--b-accent)}
html body .sp-footer{border-top-color:var(--b-line)}
html body .sp-reset{color:#8f8f8f}
html body .sp-reset:hover{color:#fff}
/* тема одна — тёмная: переключатель тем скрыт */
html body .sp-section:has(#sp-theme) .sp-row:has(#sp-theme){display:none}

/* ── полосы прокрутки ── */
html body ::-webkit-scrollbar-thumb{background:#555}
html body ::-webkit-scrollbar-thumb:hover{background:#777}

/* ── дерево каталога: видно всегда (ширину можно менять за правый край) ── */
html body .folder-tree{position:relative}
html body .folder-tree > .tree-header,
html body .folder-tree > .sidemenu,
html body .folder-tree > .tree-sep,
html body .folder-tree > .tree-content{min-width:260px}
html body .folder-tree .tree-content{overflow-x:hidden}

/* ── «Альбом» в строке пути ── */
html body .breadcrumbs .cr-alb{cursor:default;color:var(--b-dim);flex-shrink:0}
html body .breadcrumbs .cr-sep{color:#6c6c6c;margin:0 8px;flex-shrink:0}
html body .top-bar .brand{cursor:pointer}

/* ── логотип в верхней панели (две строки) ── */
html body .brand .bt{display:flex;flex-direction:column;line-height:1.1;white-space:nowrap}
html body .brand .b1{font-size:23px;font-weight:700;letter-spacing:.01em;color:var(--b-accent-text)}
html body .brand .b2{font-size:11.5px;font-weight:600;letter-spacing:.09em;color:#e6e6e6;margin-top:4px}
html body.is-splash:not(.home-ready) .top-bar .brand .bt,
html body.is-splash:not(.home-ready) .top-bar .brand svg{opacity:0}
html body .brand{cursor:pointer}

/* ── боковое меню (в левой панели) ── */
html body .sidemenu{padding:8px 0 6px;flex-shrink:0}
html body .sidemenu .mi{padding:8px 16px 8px 20px;font-size:14px;color:var(--b-dim);cursor:pointer}
html body .sidemenu .mi:hover{background:#2a2a2a;color:#fff}
html body .sidemenu .mi-off{opacity:.4;cursor:default}
html body .sidemenu .mi-off:hover{background:none;color:var(--b-dim)}
html body .tree-sep{flex-shrink:0;padding:10px 16px 4px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8f8f8f;border-top:1px solid var(--b-line)}
html body .breadcrumbs .cr-home{color:var(--b-dim)}

/* ── заставка и главная ── */
html body .main-content{position:relative}
html body #splash{position:absolute;left:0;right:0;bottom:0;top:calc(var(--b-bar-h) + 3px);z-index:20;overflow:visible;
  background-color:var(--b-bg);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.018) 0 2px,rgba(0,0,0,0) 2px 6px);
  opacity:0;pointer-events:none;transition:opacity .5s,right .28s cubic-bezier(.2,.8,.25,1)}
html body.is-splash #splash{opacity:1;pointer-events:auto}
html body #splash .sp-titles{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
html body #splash .big{font-weight:600;line-height:1.12;color:#f0f0f0;white-space:nowrap}
html body #splash .big.site{font-size:clamp(30px,5.2vw,88px);font-weight:700;color:var(--b-accent-text);letter-spacing:.01em}
html body #splash .big.caps{font-size:clamp(22px,3.5vw,62px);letter-spacing:.09em}
html body #splash .or{font-size:clamp(20px,3.1vw,54px);color:#a9a9a9;margin:.4em 0 .35em;transition:opacity .4s}
html body.home-go #splash .big{transition:transform 1s cubic-bezier(.5,.1,.2,1)}
html body.home-go #splash .or{opacity:0}
html body.home-ready #splash .sp-titles{visibility:hidden}

html body #splash .home{position:absolute;inset:0;overflow-y:auto;padding:40px 60px 36px;opacity:0;pointer-events:none;transition:opacity .6s}
html body.home-go #splash .home{opacity:1;transition-delay:.55s}
html body.home-ready #splash .home{opacity:1;pointer-events:auto;transition-delay:0s}
html body .home-head{display:flex;align-items:center;justify-content:space-between;background:#3b3b3b;border-radius:4px;padding:9px 14px;margin-bottom:18px;font-size:14px;font-weight:600;color:#e6e6e6}
html body .home-head button{background:var(--b-field);color:#d0d0d0;border:1px solid var(--b-field-line);border-radius:4px;padding:4px 12px;font-size:12px;cursor:pointer;font-family:inherit}
html body .home-head button:hover{color:#fff;border-color:var(--b-accent-text)}
html body .home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
html body .home-grid .cat_item_wrap{cursor:pointer}
html body .home-grid .cat_item{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}
html body .home-grid .cat_item img{max-width:88%;max-height:88%;object-fit:contain;display:block}
html body .home-grid .cat_item_wrap:not(.ok){visibility:hidden}
html body.is-splash .series-nav-btn{display:none!important}
html body .home-head .home-stat{margin-left:auto;margin-right:16px;font-weight:400;font-size:13px;color:#a9a9a9}

/* пустые разделы каталога */
html body .tree-item.tree-off{opacity:.42}
html body .tree-item.tree-off:hover{background:none;color:var(--b-dim)}
html body .home-head,html body .home-grid{max-width:1320px;margin-left:auto;margin-right:auto}
html body .home-head{box-sizing:border-box}
html body .home-head > span:first-child{white-space:nowrap}
html body .home-head .home-stat{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .home-head{gap:12px}

/* заставка/главная после ухода с неё: прячем полностью — иначе невидимые карточки главной
   перехватывали клики (открывались чужие серии, не работало увеличение) */
html body:not(.is-splash) #splash{visibility:hidden;transition:opacity .5s,right .28s cubic-bezier(.2,.8,.25,1),visibility 0s linear .5s}
html body:not(.is-splash) #splash *{pointer-events:none!important}

/* кнопка «Ссылка на эту серию» в шапке, рядом со значком обмена */
html body #topbar-trade-slot{display:flex;align-items:center;gap:6px}
html body .series-link-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:6px;cursor:pointer;color:#bdbdbd;opacity:.8;transition:opacity .15s,color .15s,background .15s}
html body .series-link-btn:hover{opacity:1;color:#fff;background:rgba(255,255,255,.08)}
html body .series-link-btn svg{width:20px;height:20px;display:block}
/* «Справка» — у самого правого края шапки */
html body .top-bar #btn-help{text-decoration:none;margin-left:10px}
/* разделитель меню и дерева без надписи — только линия */
html body .tree-sep:empty{padding:0;height:8px}

/* ── режим «Рынок» ── */
html body .top-bar #btn-market{cursor:pointer;margin-right:6px}
html body .top-bar #btn-market.on{color:#fff;background:#2f7d4f;border-color:#2f7d4f}
/* кружки на превью: красный (левый верх) — предлагают, зелёный (правый низ) — ищут */
html body .cat_item b.mk{position:absolute;z-index:6;min-width:22px;height:22px;padding:0 6px;border-radius:11px;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;line-height:1;color:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.45);pointer-events:none}
html body .cat_item b.mk-s{left:5px;top:5px;background:#c0392b}
html body .cat_item b.mk-b{right:5px;bottom:5px;background:#2f8a4f}
html body .cat_item b.mk-go{cursor:pointer;pointer-events:auto}
html body .cat_item b.mk-go:hover{filter:brightness(1.15);box-shadow:0 0 0 2px rgba(255,255,255,.6),0 1px 3px rgba(0,0,0,.45)}
html body .cat_item b.mk-on{box-shadow:0 0 0 2px #fff,0 1px 3px rgba(0,0,0,.45)}   /* уже отложено в кабинет */
/* окошко по щелчку на кружке выпуска */
html body .mk-pop{position:fixed;z-index:3000;background:#fff;color:#222;border-radius:6px;padding:8px 10px;
  box-shadow:0 4px 18px rgba(0,0,0,.45);font-size:13px;min-width:170px;text-align:center}
html body .mk-pop-h{font-weight:700;margin-bottom:7px}
html body .mk-pop-s .mk-pop-h{color:#c0392b}
html body .mk-pop-b .mk-pop-h{color:#2f8a4f}
html body .mk-pop button{width:100%;border:0;border-radius:4px;padding:7px 10px;font:inherit;font-weight:600;color:#fff;cursor:pointer}
html body .mk-pop-s button{background:#c0392b}
html body .mk-pop-b button{background:#2f8a4f}
html body .mk-pop button:hover{filter:brightness(1.1)}
/* при тесной шапке сжимается сначала путь (раздел - год), название выпуска остаётся видно */
html body .breadcrumbs .cr-back{min-width:48px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 3 auto}
/* средняя ширина экрана: надпись у логотипа убираем, чтобы в шапке хватило места пути и названию выпуска */
@media (min-width:761px) and (max-width:1199px){
  html body .brand .bt{display:none}
  html body .brand{padding-right:12px;margin-right:12px}
}

/* ── «О выпуске»: кнопка в шапке выпуска и карточка поверх правой части окна ── */
#about-btn{position:fixed;z-index:870;display:none;align-items:center;gap:7px;height:32px;padding:0 13px 0 10px;cursor:pointer;
  font:600 13px/1 var(--b-font);color:#2b2620;background:var(--b-paper,#ece3cf);border:0;border-top:3px solid var(--b-accent,#b5412c);
  border-radius:2px 2px 6px 6px;box-shadow:0 6px 18px rgba(0,0,0,.45);opacity:.92;transition:opacity .15s,transform .15s}
#about-btn.show{display:inline-flex}
#about-btn:hover{opacity:1;transform:translateY(1px)}
#about-btn svg{width:17px;height:17px;color:#9a3a26}
#about-card{position:fixed;z-index:880;display:flex;flex-direction:column;overflow:hidden;
  background:var(--b-paper,#ece3cf);color:#2b2620;border-top:4px solid var(--b-accent,#b5412c);border-radius:3px 3px 8px 8px;
  box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.25);
  opacity:0;visibility:hidden;transform:translateX(24px);transition:opacity .22s ease,transform .26s cubic-bezier(.2,.8,.25,1),visibility 0s linear .26s}
#about-card.open{opacity:1;visibility:visible;transform:none;transition:opacity .22s ease,transform .26s cubic-bezier(.2,.8,.25,1),visibility 0s}
#about-card .ab-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 0 22px;flex-shrink:0}
#about-card .ab-kick{font:600 11px/1 var(--b-font);letter-spacing:.16em;text-transform:uppercase;color:#9a3a26}
#about-card .ab-x{width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:#6b6152;font-size:15px;cursor:pointer}
#about-card .ab-x:hover{background:rgba(43,38,32,.08);color:#2b2620}
#about-card .ab-body{overflow-y:auto;padding:6px 26px 18px 22px;min-height:0}
#about-card .ab-title{margin:0;font:600 23px/1.25 Georgia,"PT Serif","Times New Roman",serif;color:#221e19}
#about-card .ab-meta{margin:8px 0 14px;padding-bottom:12px;font:13px/1.4 var(--b-font);color:#6b6152;
  border-bottom:3px double rgba(43,38,32,.25)}
#about-card .ab-dot{margin:0 7px;color:#b5a88f}
#about-card .ab-text{font:16px/1.65 Georgia,"PT Serif","Times New Roman",serif;color:#2b2620}
#about-card .ab-text p{margin:0 0 .8em}
#about-card .ab-text p:last-child{margin-bottom:0}
#about-card .ab-text p:first-child::first-letter{font-size:1.9em;line-height:1;float:left;margin:.06em .08em 0 0;color:#9a3a26;font-weight:600}
#about-card .ab-foot{flex-shrink:0;padding:9px 22px 11px;border-top:1px solid rgba(43,38,32,.12);background:rgba(43,38,32,.04);font:13px/1.3 var(--b-font)}
#about-card .ab-foot a{color:#9a3a26;text-decoration:none}
#about-card .ab-foot a:hover{text-decoration:underline}
#about-card .ab-body::-webkit-scrollbar-track{background:transparent}
#about-card .ab-body::-webkit-scrollbar-thumb{background:rgba(43,38,32,.25)}
/* ссылка «Все разделы» в шапке главной (обычная ссылка на /katalog — для поисковиков и для людей) */
html body .home-head .home-all{font-weight:400;font-size:13px;color:#a9a9a9;text-decoration:none;white-space:nowrap;margin-right:6px}
html body .home-head .home-all:hover{color:#fff;text-decoration:underline}
/* заставка — h1 (для поисковиков); вид прежний */
html body #splash h1.sp-titles{margin:0;font-size:inherit;font-weight:inherit}
/* заставка: «СПИЧЕЧНЫХ ЭТИКЕТОК» мельче прежнего «СПИЧЕЧНЫЕ ЭТИКЕТКИ» */
html body #splash .big.caps{font-size:clamp(18px,2.8vw,48px)}