/* ============================================================
Fansfics — интерактивная книга. Премиум-редизайн (2026-07).
Язык дизайна: тёмная «библиотека» по умолчанию + светлая тема,
золото #C7A360, Literata (проза) + Golos Text (интерфейс).
Токены 1-в-1 из design_import/Fansfics Premium.dc.html.
Mobile-first: база — телефон, min-width-медиа — планшет/десктоп.
============================================================ */
/* ------------------------------------------------------------ токены */
:root {
--bg: #141210;
--surface: #1C1916;
--raised: #26221D;
--ink: #EEE7D9;
--ink2: #B0A38D;
--ink3: #7D7261;
--line: rgba(238,231,217,.09);
--line2: rgba(238,231,217,.17);
--gold: #C7A360;
--gold-text: #D9B878;
--gold-soft: rgba(199,163,96,.13);
--on-gold: #191510;
--danger: #C4644C;
--good: #94B383;
--cover-ink: #EFE6D2;
--shadow: 0 24px 60px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.35);
--shadow-soft: 0 10px 30px rgba(0,0,0,.35);
--scrim: rgba(10,8,6,.6);
/* семантические state-цвета (чипы/бейджи/баннеры модерации, теги, поиск) —
пары для тёмной (здесь) и светлой (ниже) темы */
--state-danger-bg: rgba(196,100,76,.16);
--state-danger-ink: #E29B85;
--state-good-bg: rgba(148,179,131,.15);
--state-good-ink: #A9C79A;
--state-warn-bg: rgba(199,163,96,.15);
--state-warn-ink: #D9B878;
--state-info-bg: rgba(199,163,96,.09);
--state-info-ink: #B0A38D;
--state-neutral-bg: rgba(238,231,217,.08);
--state-neutral-ink: #B0A38D;
--font-ui: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-serif: Literata, Georgia, "Times New Roman", "PT Serif", serif;
--tap: 44px; /* минимальный тач-таргет */
/* алиасы старой палитры: их читают web/legal/*.html и возможные стилевые
хвосты — маппим на новые токены, чтобы ничего не «выцвело» */
--paper: var(--bg);
--sheet: var(--surface);
--sheet-deep: var(--raised);
--ink-soft: var(--ink2);
--line-soft: var(--line);
--accent: var(--gold);
--accent-ink: var(--gold-text);
--bad: var(--danger);
--mid: var(--gold);
--shadow-page: var(--shadow);
}
:root[data-theme="light"] {
--bg: #F3EEE2;
--surface: #FAF6EB;
--raised: #FFFDF6;
--ink: #241D12;
--ink2: #6E6350;
--ink3: #A0937B;
--line: rgba(36,29,18,.11);
--line2: rgba(36,29,18,.22);
--gold: #8F6D2E;
--gold-text: #7A5A20;
--gold-soft: rgba(143,109,46,.11);
--on-gold: #FFFBF0;
--danger: #A34832;
--good: #5E7F50;
--cover-ink: #EFE6D2;
--shadow: 0 22px 54px rgba(64,48,25,.16), 0 3px 10px rgba(64,48,25,.08);
--shadow-soft: 0 10px 26px rgba(64,48,25,.10);
--scrim: rgba(38,29,16,.45);
--state-danger-bg: #fbe0dc;
--state-danger-ink: #9a2b1f;
--state-good-bg: #e2f2e4;
--state-good-ink: #2a6b39;
--state-warn-bg: #fdf1d6;
--state-warn-ink: #8a6d1a;
--state-info-bg: #e7f0fb;
--state-info-ink: #2c4a6b;
--state-neutral-bg: #eceae6;
--state-neutral-ink: #6a6357;
}
/* ------------------------------------------------------------ база */
* { box-sizing: border-box; }
/* Скроллбар зарезервирован ВСЕГДА двумя способами (у scrollbar-gutter краевые
случаи по браузерам): overflow-y:scroll держит трек всегда на месте, поэтому
короткий вид (каталог/пустая библиотека) не убирает скроллбар и вьюпорт НЕ
прыгает по горизонтали на ~17px при возврате на вкладку (десктоп Windows). */
html { scroll-behavior: smooth; scrollbar-gutter: stable; overflow-y: scroll; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-ui);
font-size: 15.5px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
transition: background .35s ease, color .35s ease;
}
::selection { background: rgba(199,163,96,.35); }
/* тонкие полосы прокрутки под тему */
* { scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--ink3) 60%, transparent) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--ink3) 55%, transparent); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--ink3) 85%, transparent); border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: transparent; }
.hidden { display: none !important; }
.muted { color: var(--ink2); }
a { color: var(--gold-text); }
button:focus-visible, input:focus-visible + .track, [tabindex]:focus-visible {
outline: 2px solid var(--gold); outline-offset: 2px;
}
/* ------------------------------------------------------------ шапка */
.topbar {
position: sticky; top: 0; z-index: 50;
display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px;
min-height: 60px;
padding: 0 clamp(14px, 4vw, 40px);
background: var(--bg);
background: color-mix(in oklab, var(--bg) 82%, transparent);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line);
transition: transform .25s ease, background .35s ease;
}
.brand {
display: flex; align-items: center; gap: 9px;
padding: 12px 0;
font-family: var(--font-serif);
font-size: 21px; font-weight: 600; letter-spacing: .01em;
color: var(--ink); white-space: nowrap;
}
.brand-dot { color: var(--gold); font-style: italic; }
/* Знак Turnleaves: страница с загнутым золотым уголком (конструкция 1-в-1 из
design_import/naming_logo.dc.html §3a/3d). Размеры/толщины — через локальные
переменные, цвета — через токены темы (контур = --ink, загиб = --gold). */
.tl-page {
--tl-w: 14px; --tl-h: 19px; --tl-bw: 1.5px; --tl-r: 2px; --tl-fold: 7px;
position: relative; display: inline-block; flex: none;
width: var(--tl-w); height: var(--tl-h);
border: var(--tl-bw) solid var(--ink);
border-radius: var(--tl-r);
}
.tl-fold {
position: absolute;
top: calc(var(--tl-bw) * -1); right: calc(var(--tl-bw) * -1);
width: var(--tl-fold); height: var(--tl-fold);
background: var(--gold);
border-radius: 0 var(--tl-r) 0 100%;
/* живой уголок: hover родителя подращивает загиб (см. .auth-brand ниже) */
transition: width .35s cubic-bezier(.2,.8,.2,1), height .35s cubic-bezier(.2,.8,.2,1);
}
/* Глиф-лист (§3b): страница в момент переворота — тот же контур, что у уголка.
Живёт в статусах «пишется…», пустых состояниях и оверлее генерации. */
.leaf {
display: inline-block; flex: none;
width: 13px; height: 13px;
background: var(--gold);
border-radius: 0 100% 0 100%;
transform: rotate(-45deg);
}
.leaf-pulse { animation: leaf-pulse 1.6s ease-in-out infinite; }
@keyframes leaf-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.topbar nav { order: 5; width: 100%; display: flex; gap: 4px; border-top: 1px solid var(--line); }
.tab {
flex: 1; min-height: var(--tap);
font-family: var(--font-ui); font-size: 14px; font-weight: 500;
background: none; border: none; cursor: pointer;
color: var(--ink3);
padding: 13px 8px; white-space: nowrap; text-align: center;
transition: color .15s, box-shadow .15s;
}
.tab:active { color: var(--ink); }
.tab.active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--gold); }
/* «Новая история» — золотая CTA в шапке, как в макете */
.tab[data-view="new"] {
flex: none; align-self: center;
background: var(--gold); color: var(--on-gold);
border-radius: 10px; padding: 10px 16px; margin: 6px 0;
font-size: 13.5px; font-weight: 600;
transition: filter .15s, transform .15s, box-shadow .15s;
}
.tab[data-view="new"]:active { transform: translateY(1px); }
.tab[data-view="new"].active { color: var(--on-gold); box-shadow: 0 0 0 2px var(--gold-soft), 0 0 0 1px var(--gold); }
.topbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; padding: 11px 0; }
.theme-toggle {
flex: none; width: 38px; height: 38px; border-radius: 999px;
border: 1px solid var(--line2); background: transparent;
color: var(--ink2); font-size: 15px; line-height: 1; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: color .15s, border-color .15s;
}
.theme-toggle:active { color: var(--gold-text); border-color: var(--gold); }
/* #health остаётся в DOM (в него пишет loadHealth из auth.js — JS-контракт),
но в шапке по дизайну не показывается вовсе. */
#health { display: none; }
.userbox { display: flex; align-items: center; }
.header-login { min-height: 38px; padding: 8px 13px; white-space: nowrap; }
.userchip {
display: inline-flex; align-items: center;
background: none; border: none; padding: 2px; cursor: pointer;
font-family: inherit; color: var(--ink);
}
.userchip .avatar { box-shadow: 0 0 0 1px var(--gold); transition: box-shadow .15s; }
/* ≥720: ГОСТЕВАЯ шапка легковесна (бренд · Каталог · тема · «Войти») — ряд
вкладок помещается рядом с брендом уже здесь. */
@media (min-width: 720px) {
body.guest-mode .topbar nav { order: 0; width: auto; flex: 1 1 220px; min-width: 0; border-top: none; }
body.guest-mode .tab { flex: none; min-height: 0; padding: 20px 14px; }
}
/* ≥1000: АВТОРИЗОВАННАЯ шапка (бренд + вкладки + CTA + чипы искр/квоты +
профиль ≈ 910px) наконец влезает в одну строку. Скрин владельца 2026-07-26:
на 720–999px инлайн-режим включался, но не влезал — шапка рвалась на две
строки, прижатые к правому краю, с пустой левой половиной. В этом диапазоне
вкладки остаются отдельным рядом (как на телефоне), а CTA «Новая история»
живёт в этом ряду (app.js relocateNewStoryCta). */
@media (min-width: 1000px) {
.topbar nav { order: 0; width: auto; flex: 1 1 220px; min-width: 0; border-top: none; }
.tab { flex: none; min-height: 0; padding: 20px 14px; }
.tab[data-view="new"] { padding: 10px 16px; }
}
@media (min-width: 720px) and (max-width: 999.9px) {
body:not(.guest-mode) .topbar nav .tab[data-view="new"] {
flex: none; align-self: center; margin: 6px 0 6px auto;
padding: 8px 13px; font-size: 12.5px;
}
}
/* мобильный ридер: скролл вниз прячет шапку (game-bar остаётся) */
body.chrome-hidden .topbar { transform: translateY(-105%); }
body.chrome-hidden .game-bar { top: calc(env(safe-area-inset-top, 0px) + 6px); }
/* ------------------------------------------------------------ каркас */
main {
max-width: 1120px; margin: 0 auto;
padding: clamp(18px, 4vw, 44px) clamp(12px, 4vw, 40px) calc(56px + env(safe-area-inset-bottom));
/* fill-mode строго backwards: у «both/forwards» финальный кадр держит на main
identity-transform НАВСЕГДА, main становится containing block'ом и все
position:fixed внутри (tts-бар, .wiz-nav) прибивает к низу документа. */
animation: ff-fade-up .45s ease backwards;
}
@keyframes ff-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.view { display: none; }
.view.active { display: block; }
.view-title {
margin: 4px 0 22px;
font-family: var(--font-serif);
font-size: clamp(28px, 4.5vw, 40px); font-weight: 600;
letter-spacing: -.01em; line-height: 1.12;
}
/* лист (карточка-поверхность) */
.sheet {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 16px;
box-shadow: var(--shadow-soft);
}
/* ------------------------------------------------------------ кнопки */
.primary {
font-family: var(--font-ui); font-size: 15px; font-weight: 600;
background: var(--gold); color: var(--on-gold);
border: none; border-radius: 10px;
padding: 12px 24px; min-height: var(--tap); cursor: pointer;
transition: filter .15s, transform .15s;
-webkit-tap-highlight-color: transparent;
}
.primary:active { transform: translateY(1px); }
.primary:disabled { opacity: .55; cursor: default; transform: none; }
.ghost {
font-family: var(--font-ui); font-size: 13.5px;
background: transparent; color: var(--ink2);
border: 1px solid var(--line2); border-radius: 10px;
padding: 10px 14px; min-height: var(--tap); cursor: pointer;
transition: color .15s, border-color .15s, background .15s;
-webkit-tap-highlight-color: transparent;
}
.ghost:active { color: var(--ink); border-color: var(--ink3); }
/* опасная ghost-кнопка («Выйти» в профиле): нейтральна в покое, краснеет при действии */
.ghost.danger:active { color: var(--danger); border-color: var(--danger); }
.linklike {
border: none; background: none; cursor: pointer;
color: var(--ink3); font: inherit; font-size: 13px;
text-decoration: underline; text-underline-offset: 3px; padding: 4px;
}
.cta { width: 100%; min-height: 56px; font-size: 16.5px; box-shadow: var(--shadow-soft); }
.hint { font-size: 13px; font-style: italic; color: var(--ink3); }
.hint.center { display: block; text-align: center; margin: 12px 0 0; }
/* ------------------------------------------------------------ поля и формы */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span {
font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: .09em; color: var(--ink3);
}
.note { font-style: italic; font-size: 12.5px; color: var(--ink3); }
.field + .field, .field + .switch, .switch + .field { margin-top: 12px; }
.duo { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 12px; }
.duo .field + .field { margin-top: 0; }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; gap: 14px 22px; } }
input, select, textarea {
font-family: var(--font-ui); font-size: 16px; color: var(--ink);
background: var(--raised);
border: 1px solid var(--line2); border-radius: 10px;
padding: 11px 14px;
width: 100%;
min-height: 48px;
transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 0; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus {
outline: none; border-color: var(--gold);
box-shadow: 0 0 0 3px var(--gold-soft);
}
input::placeholder, textarea::placeholder { color: var(--ink3); }
select { cursor: pointer; }
select option { background: var(--raised); color: var(--ink); }
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; accent-color: var(--gold); }
input[type="range"] {
padding: 0; border: none; background: transparent;
accent-color: var(--gold); box-shadow: none;
min-height: 36px; width: 100%;
}
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* ------------------------------------------------------------ слаг */
.slug-row {
display: flex; align-items: center; gap: 8px;
margin-top: 8px; min-height: 32px; flex-wrap: wrap;
}
.slug-k { font-size: 12px; font-style: italic; color: var(--ink3); }
.slug-display {
background: none; border: none; cursor: pointer;
font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
font-size: 13px; color: var(--gold-text);
border-bottom: 1px dashed var(--line2);
padding: 6px 2px; min-height: 32px;
}
.slug-display::after { content: " ✎"; color: var(--gold); font-size: 12px; }
.slug-display.placeholder { color: var(--ink3); font-style: italic; font-family: var(--font-ui); }
.slug-input { flex: 1 1 220px; min-height: var(--tap); font-family: ui-monospace, Consolas, monospace; font-size: 16px; }
/* ------------------------------------------------------------ переключатель (switch) */
.switch {
display: flex; align-items: center; gap: 12px;
cursor: pointer; min-height: var(--tap); margin-top: 14px;
-webkit-tap-highlight-color: transparent;
}
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track {
flex: none; width: 44px; height: 26px; border-radius: 999px;
background: var(--line2); position: relative; transition: background .2s;
}
.switch .track::after {
content: ""; position: absolute; top: 3px; left: 3px;
width: 20px; height: 20px; border-radius: 50%;
background: var(--raised); box-shadow: 0 1px 3px rgba(0,0,0,.35);
transition: left .2s;
}
.switch input:checked + .track { background: var(--gold); }
.switch input:checked + .track::after { left: 21px; }
.switch input:focus-visible + .track { outline: 2px solid var(--gold); outline-offset: 2px; }
.switch-text { font-size: 14.5px; }
/* ------------------------------------------------------------ сегмент-контролы */
.seg {
display: flex; flex-wrap: wrap; gap: 6px;
padding: 5px;
background: var(--raised);
border: 1px solid var(--line); border-radius: 12px;
}
.seg label { flex: 1 1 auto; position: relative; cursor: pointer; min-width: 0; -webkit-tap-highlight-color: transparent; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
min-height: 46px; padding: 8px 8px;
font-weight: 600; font-size: 14px; text-align: center;
border-radius: 9px; color: var(--ink2);
transition: background .15s, color .15s;
}
.seg small {
font-weight: 400; font-size: 10.5px; text-transform: uppercase;
letter-spacing: .05em; color: var(--ink3); opacity: .9;
}
.seg label:active span { background: var(--gold-soft); }
.seg input:checked + span { background: var(--gold); color: var(--on-gold); }
.seg input:checked + span small { color: var(--on-gold); opacity: .7; }
.seg input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: -2px; }
.seg-wrap label { flex: 1 1 46%; }
/* тональность — карточки в сетке (по макету рейтинга), не сплошной сегмент.
2026-07-28: было .seg-rating с одной буквой (G/T/M/E) — теперь подпись словом,
поэтому колонка шире, а кегль меньше (длинное «Драматичная» не переносится). */
.seg-intensity {
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
padding: 0; background: transparent; border: none; border-radius: 0;
}
.seg-intensity span {
min-height: 74px; gap: 4px; padding: 14px 10px;
border: 1px solid var(--line2); border-radius: 12px;
}
.seg-intensity span, .seg-intensity input:checked + span {
font-family: var(--font-serif); font-size: 17px; font-weight: 600;
}
.seg-intensity input:checked + span {
background: var(--gold-soft); color: var(--gold-text); border-color: var(--gold);
}
.seg-intensity input:checked + span small { color: var(--gold-text); opacity: .8; }
.seg-intensity small { font-family: var(--font-ui); letter-spacing: .06em; }
#f-setting-text { margin-top: 10px; }
#f-setting-text:disabled { opacity: .5; background: var(--surface); }
#f-language-custom { margin-top: 10px; }
.intensity-desc {
margin: 10px 2px 0; min-height: 20px;
font-size: 13.5px; font-style: italic; color: var(--ink2);
}
/* ------------------------------------------------------------ чипы */
.chips {
border: 1px solid var(--line2); border-radius: 12px;
background: var(--raised); padding: 7px; cursor: text;
}
.chips:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.chips-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip {
display: inline-flex; align-items: center;
background: var(--gold-soft);
border: 1px solid var(--gold); color: var(--gold-text);
border-radius: 999px;
padding: 0 0 0 14px; min-height: 38px;
font-size: 13.5px; max-width: 100%;
}
.chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-x {
background: none; border: none; cursor: pointer;
color: inherit; opacity: .7; font-size: 12px;
padding: 9px 12px; min-height: 38px; min-width: 36px;
border-radius: 999px;
}
.chip-x:active { color: var(--danger); opacity: 1; }
.chips-input {
flex: 1 1 130px; width: auto; min-width: 90px;
border: none; background: transparent;
padding: 8px 6px; min-height: 38px; font-size: 15px;
}
.chips-input:focus { box-shadow: none; border: none; outline: none; }
/* подсказки-пилюли (фандомы/жанры) */
.suggest-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.suggest {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-ui); font-size: 13.5px; font-weight: 500;
background: transparent; color: var(--ink2);
border: 1px solid var(--line2); border-radius: 999px;
padding: 9px 14px; min-height: 40px; cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
-webkit-tap-highlight-color: transparent;
}
.suggest:active { transform: scale(.97); }
.suggest.on {
background: var(--gold-soft); color: var(--gold-text);
border-color: var(--gold);
}
/* сгруппированные подсказки жанров */
.suggest-grouped { margin-top: 10px; }
.sg-group { margin-top: 14px; }
.sg-group:first-child { margin-top: 0; }
.sg-label { display: block; font-size: 10.5px; font-weight: 600; text-transform: uppercase;
letter-spacing: .12em; color: var(--ink3); margin: 0 0 8px; }
.sg-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* тропы: группы + пилюли-тумблеры со звездой */
.trope-groups { margin-top: 4px; }
.trope-group { margin-top: 14px; }
.trope-group:first-child { margin-top: 0; }
.trope-group-title { display: block; font-size: 10.5px; font-weight: 600; text-transform: uppercase;
letter-spacing: .12em; color: var(--ink3); margin: 0 0 8px; }
.trope-row { display: flex; flex-wrap: wrap; gap: 8px; }
.trope-toggle {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-ui); font-size: 13.5px; font-weight: 500; cursor: pointer;
background: transparent; color: var(--ink2);
border: 1px solid var(--line2); border-radius: 999px;
padding: 9px 14px 9px 12px; min-height: 40px;
transition: background .15s, border-color .15s, color .15s;
-webkit-tap-highlight-color: transparent;
}
.trope-toggle .tr-star { opacity: .4; font-size: 11px; }
.trope-toggle.active { background: var(--gold-soft); color: var(--gold-text); border-color: var(--gold); }
.trope-toggle.active .tr-star { opacity: 1; color: var(--gold); }
/* ============================================================
МАСТЕР «Новая история»
============================================================ */
#view-new { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.wizard { max-width: 780px; margin: 0 auto; }
.wiz-kicker { text-align: center; margin: 0 0 14px; }
/* прогресс-индикатор */
.wiz-progress { display: flex; justify-content: center; margin: 0 0 24px; }
.wiz-dot {
flex: 1; max-width: 120px; position: relative;
display: flex; flex-direction: column; align-items: center; gap: 6px;
background: none; border: none; padding: 4px 0 2px;
cursor: pointer; font-family: var(--font-ui); min-height: 62px;
}
.wiz-dot::before {
content: ""; position: absolute; top: 22px; right: 50%;
width: 100%; height: 1px; background: var(--line2);
transition: background .2s;
}
.wiz-dot:first-child::before { display: none; }
.wiz-dot.lit::before { background: var(--gold); }
.wiz-dot .dot {
position: relative; z-index: 1;
width: 38px; height: 38px; border-radius: 50%;
border: 1px solid var(--line2); background: var(--bg); color: var(--ink3);
display: flex; align-items: center; justify-content: center;
font-weight: 600; font-size: 13px;
transition: background .2s, border-color .2s, color .2s;
}
/* НЕПРОЗРАЧНЫЙ фон (gold-soft полупрозрачен): иначе соединительная линия ::before
просвечивала сквозь кружок пройденного шага и «зачёркивала» цифру */
.wiz-dot.done .dot {
border-color: var(--gold);
background: linear-gradient(var(--gold-soft), var(--gold-soft)) var(--bg);
color: var(--gold-text);
}
.wiz-dot.active .dot { border-color: var(--gold); background: var(--gold); color: var(--on-gold); }
.wiz-dot:disabled { cursor: default; }
.wiz-dot:disabled .dot, .wiz-dot:disabled .dot-label { opacity: .5; }
.wiz-dot:not(:disabled):active .dot { border-color: var(--gold); }
.dot-label {
font-size: 10.5px; font-weight: 600; text-transform: uppercase;
letter-spacing: .08em; color: var(--ink3);
}
.wiz-dot.active .dot-label { color: var(--gold-text); }
/* лист с шагами */
.wiz-sheet { padding: clamp(22px, 4vw, 40px); }
.wiz-step { display: none; }
.wiz-step.active { display: block; }
.wiz-title {
font-family: var(--font-serif); font-size: clamp(24px, 4vw, 32px);
font-weight: 600; letter-spacing: -.01em; margin: 0; text-align: center;
}
.wiz-sub { margin: 6px 0 0; font-family: var(--font-serif); font-style: italic;
font-size: 15px; color: var(--ink2); text-align: center; }
.wiz-block { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.wiz-block h2 {
font-size: 11px; font-weight: 600; margin: 0 0 14px;
text-transform: uppercase; letter-spacing: .15em; color: var(--gold-text);
}
/* sticky-панель «Назад / Далее» */
.wiz-nav {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
background: var(--bg);
background: color-mix(in oklab, var(--bg) 88%, transparent);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border-top: 1px solid var(--line);
padding: 10px clamp(14px, 4vw, 40px) calc(10px + env(safe-area-inset-bottom));
}
.wiz-nav-inner { max-width: 780px; margin: 0 auto; display: flex; align-items: center; gap: 14px; }
#wiz-back { min-height: 48px; min-width: 104px; }
#wiz-back:disabled { opacity: .4; cursor: default; }
#wiz-step-label {
flex: 1; text-align: center;
font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
color: var(--ink3); white-space: nowrap;
}
#wiz-next { flex: none; min-height: 48px; min-width: 140px; font-size: 15px; }
@media (max-width: 480px) { #wiz-next { flex: 1; } }
/* необязательный блок (импорт книги) — details/summary */
.optional-block { padding: 0; }
.optional-block[open] { padding-bottom: 6px; }
.optional-summary {
list-style: none; cursor: pointer; display: flex; align-items: center;
gap: 12px; padding: 16px 2px; min-height: var(--tap); user-select: none;
-webkit-tap-highlight-color: transparent;
transition: color .15s;
}
.optional-summary::-webkit-details-marker { display: none; }
.opt-badge {
flex: none; font-size: 10px; font-weight: 600; text-transform: uppercase;
letter-spacing: .1em; color: var(--ink3);
border: 1px solid var(--line2); border-radius: 999px; padding: 3px 9px;
}
.opt-title { flex: 1; font-size: 13.5px; color: var(--ink2); }
.opt-chevron { flex: none; color: var(--gold-text); transition: transform .2s; }
.optional-block[open] .opt-chevron { transform: rotate(180deg); }
.optional-body { padding: 4px 2px 8px; }
/* ------------------------------------------------------------ галерея примеров */
.example-gallery {
display: flex; gap: 10px;
overflow-x: auto; padding-bottom: 8px; margin-bottom: 6px;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
.example-gallery > .muted { font-size: 13.5px; }
.example-card {
flex: 0 0 78%; max-width: 300px; scroll-snap-align: start;
display: flex; align-items: flex-start; gap: 12px;
text-align: left; font-family: var(--font-ui); color: var(--ink);
background: var(--raised);
border: 1px solid var(--line2);
border-radius: 12px; padding: 14px 15px; min-height: 96px;
cursor: pointer;
transition: border-color .15s, background .15s;
-webkit-tap-highlight-color: transparent;
}
.ex-swatch {
flex: none; width: 10px; height: 15px; border-radius: 2px;
margin-top: 3px; background: var(--gold);
}
.ex-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; align-self: stretch; }
.example-card strong { font-size: 14px; font-weight: 600; line-height: 1.3; }
.example-card .ex-fandoms { font-style: italic; font-size: 12px; color: var(--ink3); }
.example-card .ex-meta {
display: flex; gap: 10px; align-items: center; margin-top: auto; padding-top: 4px;
font-size: 12px; color: var(--ink3);
}
.example-card:active { transform: scale(.99); }
.example-card.selected {
border-color: var(--gold); background: var(--gold-soft);
box-shadow: 0 0 0 1px var(--gold);
}
@media (min-width: 720px) {
.example-gallery { flex-wrap: wrap; overflow: visible; }
.example-card { flex: 1 1 220px; max-width: none; }
}
/* сохранённый пресет пользователя */
.preset-card-saved { position: relative; }
.preset-del {
position: absolute; top: 6px; right: 6px; width: 24px; height: 24px;
border: none; border-radius: 50%; background: var(--gold-soft); color: var(--ink2);
cursor: pointer; line-height: 1; font-size: 12px; padding: 0;
transition: background .15s, color .15s;
}
.preset-del:active { background: var(--danger); color: #fff; }
/* ------------------------------------------------------------ канон-паки */
.packs { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 720px) { .packs { grid-template-columns: 1fr 1fr; } }
.packs .muted { margin: 0; font-size: 13.5px; }
.pack-card {
position: relative; display: flex; align-items: center; gap: 12px;
background: var(--raised);
border: 1px solid var(--line2); border-radius: 12px;
padding: 13px 15px; min-height: 58px; cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: border-color .15s, background .15s;
}
.pack-card:active { background: var(--gold-soft); }
.pack-card:has(input:checked) { border-color: var(--gold); background: var(--gold-soft); }
.pack-card input { position: absolute; opacity: 0; pointer-events: none; }
.pack-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pack-body strong { font-size: 14.5px; font-weight: 600; }
.pack-name { font-size: 12px; color: var(--ink3); font-family: ui-monospace, Consolas, monospace; }
.pick-tick {
flex: none; margin-left: auto;
width: 26px; height: 26px; border-radius: 50%;
border: 1px solid var(--line2); color: transparent;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 600;
transition: background .15s, border-color .15s, color .15s;
}
.pack-card input:checked ~ .pick-tick,
.preset-card input:checked ~ .pick-tick {
background: var(--gold); border-color: var(--gold); color: var(--on-gold);
}
/* ------------------------------------------------------------ вайбы (карточки стиля) */
.preset-cards { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 720px) { .preset-cards { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } }
.preset-card {
position: relative; display: flex; align-items: flex-start; gap: 12px;
background: transparent;
border: 1px solid var(--line2); border-radius: 12px;
padding: 15px 16px; min-height: 62px; cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: border-color .15s, background .15s;
}
.preset-card:active { background: var(--gold-soft); }
.preset-card:has(input:checked) { border-color: var(--gold); background: var(--gold-soft); }
.preset-card input { position: absolute; opacity: 0; pointer-events: none; }
.preset-card .pick-tick { align-self: center; }
.preset-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.preset-body strong { font-size: 14.5px; font-weight: 600; }
.preset-body span { font-size: 12.5px; color: var(--ink3); line-height: 1.4; }
/* цветовая точка вайба (палитра из макета) */
.vibe-dot {
flex: none; width: 12px; height: 12px; border-radius: 50%; margin-top: 4px;
background: var(--sw, var(--gold));
box-shadow: 0 0 0 3px color-mix(in oklab, var(--sw, var(--gold)) 25%, transparent);
}
.vibe-warm { --sw: #C98A4B; }
.vibe-dark { --sw: #4A4E5A; }
.vibe-witty { --sw: #B9A33B; }
.vibe-lyric { --sw: #7A6E9E; }
.vibe-cine { --sw: #A34832; }
/* ------------------------------------------------------------ тон-слайдеры */
.tone-block { margin-top: 20px; }
.tone-block:first-of-type { margin-top: 0; }
.tone-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.tone-name {
font-size: 12px; font-weight: 600; text-transform: uppercase;
letter-spacing: .08em; color: var(--ink2);
}
.tone-top b {
font-family: var(--font-serif); font-weight: 600; color: var(--gold-text);
font-variant-numeric: tabular-nums; font-size: 18px; min-width: 34px; text-align: right;
}
.tone-anchors {
display: flex; justify-content: space-between;
font-size: 11.5px; font-style: italic; color: var(--ink3);
margin-top: -2px;
}
/* дорожка с золотой заливкой до бегунка (--pct обновляет wizard.js) */
.tone-block input[type="range"] {
-webkit-appearance: none; appearance: none;
min-height: 30px; margin: 2px 0; border-radius: 2px;
background:
linear-gradient(90deg, color-mix(in oklab, var(--gold) 45%, transparent), var(--gold))
no-repeat left center / var(--pct, 40%) 3px,
linear-gradient(var(--line2), var(--line2)) no-repeat left center / 100% 3px;
}
.tone-block input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
background: var(--gold); border: 4px solid var(--surface);
box-shadow: 0 0 0 1px var(--gold); cursor: grab;
}
.tone-block input[type="range"]::-moz-range-thumb {
width: 13px; height: 13px; border-radius: 50%;
background: var(--gold); border: 3px solid var(--surface);
box-shadow: 0 0 0 1px var(--gold); cursor: grab;
}
.tone-block input[type="range"]::-moz-range-track { background: transparent; }
/* ------------------------------------------------------------ персонажи */
.char-card {
border: 1px solid var(--line); border-radius: 14px;
background: var(--raised);
padding: 16px 18px 18px; margin-bottom: 14px;
}
.char-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; cursor: pointer; }
/* Аватар персонажа в шапке карточки (2026-07-28): виден и у свёрнутой карточки.
Тот же ключ, что .rel-ava2 в панели «Отношения» и .avatar-* у пользователей. */
.char-ava {
position: relative; /* портрет ложится АБСОЛЮТОМ поверх инициала — см. ниже */
flex: none; width: 34px; height: 34px; border-radius: 50%; margin-right: 11px;
display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
color: #fff; font-family: var(--font-serif); font-size: 15px; font-weight: 600;
}
/* Инициал лежит в кружке ВСЕГДА, портрет накрывает его сверху. Портрета может
не быть (реальный человек — гард на бэке, снятый фандом, не завезённая
картинка): тогда reader.js снимает ![]()
по ошибке загрузки, и инициал уже
на месте — без прыжка вёрстки и без пустой рамки. `background: inherit`
добивает случай полупрозрачного PNG: буква не просвечивает сквозь портрет. */
.char-ava > img {
position: absolute; inset: 0; width: 100%; height: 100%;
border-radius: 50%; object-fit: cover; display: block; background: inherit;
}
.char-no {
flex: none; font-size: 10.5px; font-weight: 600; text-transform: uppercase;
letter-spacing: .12em; color: var(--gold-text);
}
.char-summary { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.char-summary .cs-name { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.char-summary .cs-role { font-size: 12px; color: var(--ink3); font-style: italic; }
.char-chevron { flex: none; color: var(--gold-text); transition: transform .2s; margin-left: 8px; }
.char-card.collapsed .char-chevron { transform: rotate(-90deg); }
.char-card.collapsed .char-grid, .char-card.collapsed .char-optional { display: none; }
.rm {
background: none; border: 1px solid var(--line2); border-radius: 8px;
color: var(--ink3); cursor: pointer; font-family: var(--font-ui);
padding: 8px 12px; font-size: 12px; min-height: 38px;
transition: color .15s, border-color .15s;
}
.rm:active { color: var(--danger); border-color: var(--danger); }
.char-grid { display: grid; grid-template-columns: 1fr; gap: 13px; }
.char-grid .full { grid-column: 1 / -1; }
.char-grid .switch { margin-top: 0; align-self: end; }
@media (min-width: 900px) { .char-grid { grid-template-columns: 1fr 1fr; gap: 13px 20px; } }
.char-canon-row {
display: flex; align-items: center; gap: 11px; margin: 0 0 14px;
padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
}
.char-canon-row .switch { margin: 0; min-height: 0; }
.char-canon-hint { font-size: 12.5px; color: var(--ink3); font-style: italic; }
.char-optional > summary {
list-style: none; cursor: pointer; font-size: 13px; font-style: italic;
color: var(--gold-text); padding: 8px 2px; min-height: 40px;
display: flex; align-items: center; gap: 6px;
}
.char-optional > summary::-webkit-details-marker { display: none; }
.char-optional[open] > summary { color: var(--ink3); }
.c-name-select { margin-bottom: 8px; font-weight: 600; }
.c-name-select.hidden { display: none; }
.add-char-btn {
width: 100%; min-height: 54px;
font-family: var(--font-ui); font-size: 14.5px; font-weight: 600;
color: var(--gold-text); background: transparent;
border: 1px dashed var(--line2); border-radius: 12px;
cursor: pointer; transition: background .15s, border-color .15s;
-webkit-tap-highlight-color: transparent;
}
.add-char-btn:active { background: var(--gold-soft); border-color: var(--gold); }
/* ------------------------------------------------------------ степперы */
.fmt-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .fmt-grid { grid-template-columns: 1fr 1fr; gap: 16px 22px; } }
.stepper {
display: flex; align-items: stretch;
border: 1px solid var(--line2); border-radius: 12px;
overflow: hidden; background: var(--raised);
}
.step-btn {
flex: none; width: 52px; min-height: 50px;
font-family: var(--font-ui); font-size: 22px; line-height: 1;
border: none; background: none; color: var(--gold-text);
cursor: pointer; transition: background .15s;
}
.step-btn:first-child { border-right: 1px solid var(--line); }
.step-btn:last-child { border-left: 1px solid var(--line); }
.step-btn:active { background: var(--gold-soft); }
.stepper input {
flex: 1; min-width: 0; min-height: 50px;
border: none; border-radius: 0; background: transparent;
text-align: center; font-family: var(--font-serif); font-size: 19px; font-weight: 600;
}
.stepper input:focus { box-shadow: inset 0 0 0 2px var(--gold-soft); }
/* ------------------------------------------------------------ итоговое резюме («титульный лист») */
.summary-card {
background: var(--raised);
border: 1px solid var(--line); border-radius: 14px;
padding: 8px 18px; margin-bottom: 18px;
}
/* «титульный лист» в начале резюме */
.sum-title-page { text-align: center; padding: 20px 0 10px; border-bottom: 1px dashed var(--line); }
.sum-kicker {
display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .2em;
text-transform: uppercase; color: var(--ink3); margin-bottom: 14px;
}
.sum-book-title { font-family: var(--font-serif); font-size: 24px; font-weight: 600; line-height: 1.25; }
.sum-book-title.untitled { font-style: italic; color: var(--ink2); }
.sum-mark { color: var(--gold); font-size: 12px; letter-spacing: .4em; padding-left: .4em; margin-top: 12px; }
.sum-sec { padding: 13px 0; border-bottom: 1px dashed var(--line); }
.sum-sec:last-child { border-bottom: none; }
.sum-head { display: flex; justify-content: space-between; align-items: center; }
.sum-head h4 {
margin: 0; font-size: 10.5px; font-weight: 600;
text-transform: uppercase; letter-spacing: .14em; color: var(--gold-text);
}
.sum-edit {
background: none; border: none; cursor: pointer;
font-family: var(--font-ui); font-size: 12.5px; font-style: italic;
color: var(--ink3); padding: 8px 6px; min-height: 36px;
transition: color .15s;
}
.sum-edit:active { color: var(--gold-text); }
.sum-line { display: flex; gap: 10px; margin-top: 7px; font-size: 13.5px; line-height: 1.5; }
.sum-k { flex: none; width: 108px; color: var(--ink3); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding-top: 2px; }
.sum-v { min-width: 0; overflow-wrap: anywhere; }
.sum-v code {
font-family: ui-monospace, Consolas, monospace; font-size: 12.5px;
background: var(--surface); border: 1px solid var(--line);
border-radius: 5px; padding: 1px 5px;
}
/* сохранить как пресет — инлайн-форма */
.preset-save { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.preset-save-btn { width: 100%; }
.preset-save-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.preset-save-form input { flex: 1 1 160px; min-width: 0; }
.preset-save-form .primary, .preset-save-form .ghost { flex: none; }
@media (min-width: 720px) { .preset-save-btn { width: auto; } }
/* ============================================================
БИБЛИОТЕКА и КАТАЛОГ — «полка»: обложки-корешки + мета
============================================================ */
/* шапка вида: киккер + заголовок слева, поиск и фильтры справа */
.view-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 28px; margin: 4px 0 28px; }
.view-head-main { flex: 1 1 240px; min-width: 0; }
.view-kicker {
font-size: 11px; font-weight: 600; letter-spacing: .16em;
text-transform: uppercase; color: var(--ink3); margin-bottom: 10px;
}
.view-head .view-title { margin: 0; }
.empty-note { font-style: italic; color: var(--ink2); }
/* лист-орнамент над текстом пустого состояния */
.empty-note .leaf { display: block; width: 12px; height: 12px; margin: 2px 0 12px 3px; opacity: .85; }
/* «Вы остановились здесь» — герой-карточка продолжения чтения (макет 153-173) */
.lib-hero {
display: flex; flex-wrap: wrap; gap: clamp(22px, 4vw, 44px);
background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
padding: clamp(22px, 3.5vw, 36px); margin: 0 0 30px;
box-shadow: var(--shadow-soft);
}
.lib-hero-cover { flex: none; width: 148px; cursor: pointer; }
.lib-hero-cover .book-cover { width: 100%; }
.lib-hero-body {
flex: 1 1 340px; min-width: 0;
display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
.lib-hero-kicker {
font-size: 11px; font-weight: 600; letter-spacing: .16em;
text-transform: uppercase; color: var(--gold-text);
}
.lib-hero-title {
font-family: var(--font-serif); font-size: clamp(22px, 3vw, 30px);
font-weight: 600; line-height: 1.2;
}
.lib-hero-fandom { color: var(--ink3); font-size: .62em; font-weight: 400; font-style: italic; }
.lib-hero-prog { display: flex; align-items: center; gap: 14px; max-width: 520px; }
.lib-hero-track { flex: 1; height: 3px; border-radius: 2px; background: var(--line2); overflow: hidden; }
.lib-hero-fill { display: block; height: 100%; border-radius: 2px; background: var(--gold); }
.lib-hero-note { font-size: 13px; color: var(--ink2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lib-hero-choice { font-family: var(--font-serif); font-style: italic; font-size: 15px; line-height: 1.5; color: var(--ink2); }
.lib-hero-choice:empty { display: none; }
.lib-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
/* полка-заголовок «Все книги · N книг · M завершены» (макет 176-180) */
.lib-shelf-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; }
.lib-shelf-head h2 { margin: 0; font-family: var(--font-serif); font-size: 20px; font-weight: 600; }
.lib-shelf-note { font-size: 13px; color: var(--ink3); white-space: nowrap; }
.lib-shelf-rule { flex: 1; height: 1px; background: var(--line); }
/* полка: сетка вертикальных книг */
.library {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: clamp(18px, 3vw, 30px) clamp(14px, 3vw, 26px);
}
@media (min-width: 720px) {
.library { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
}
/* #library-grid сам — .library, а группы кладутся вложенными .library-сетками
(renderLibrary): вложенные секции и заголовки групп занимают всю ширину */
.library > .library, .library > .lib-group-head { grid-column: 1 / -1; }
.story-card {
position: relative; /* якорь для .cover-pop (пикер цвета обложки) */
display: flex; flex-direction: column; gap: 5px;
min-width: 0; cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
/* Появление полки анимируем ТОЛЬКО при входе на вкладку (класс .cards-enter,
ставится флагом state._animateCards и гаснет первым рендером) — не на каждый
символ поиска/фильтр. Горизонтальный сдвиг от скроллбара убран отдельно
(html{overflow-y:scroll}), так что fade читается как аккуратная анимация, а не
«подрагивание». */
.library.cards-enter .story-card { animation: ff-fade-up .4s ease backwards; }
/* «Добавить к себе» на карточке каталога */
/* строка звёзд + «＋ к себе» (макет Premium: дизайн-строка line 255-259);
wrap: на узкой карточке пилюля переносится ВНИЗ, а не на соседнюю книгу */
.card-stars { display: flex; align-items: center; gap: 4px 8px; margin-top: 2px; flex-wrap: wrap; min-width: 0; }
.card-fork {
margin-left: auto; flex: none;
padding: 4px 11px; border-radius: 999px;
background: var(--gold-soft); border: 1px solid var(--gold); color: var(--gold-text);
font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; cursor: pointer;
white-space: nowrap;
transition: color .15s, border-color .15s, background .15s, filter .15s;
}
.card-fork:active { filter: brightness(1.1); }
.card-mine {
margin-left: auto; flex: none;
padding: 4px 11px; border-radius: 999px;
border: 1px solid var(--line2); color: var(--ink3);
font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
/* обложка-корешок: переплёт слева, рамка-«тиснение», заголовок и виньетка */
.book-cover {
position: relative; width: 100%; aspect-ratio: 2 / 3;
margin-bottom: 7px;
border-radius: 6px 10px 10px 6px;
background:
linear-gradient(105deg, rgba(255,255,255,.09), rgba(255,255,255,0) 26%),
var(--spine, #4C3B26);
color: var(--cover-ink);
box-shadow: var(--shadow-soft);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
padding: 16px 12px;
transition: transform .25s ease, box-shadow .25s ease;
}
.cover-frame {
position: absolute; inset: 7px;
border: 1px solid rgba(239,230,210,.28);
border-radius: 4px 7px 7px 4px; pointer-events: none;
}
.cover-title {
font-family: var(--font-serif); font-size: 17px; font-weight: 600;
line-height: 1.3; text-align: center; overflow-wrap: anywhere;
display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.cover-mark { font-size: 11px; letter-spacing: .35em; padding-left: .35em; opacity: .7; }
.story-card:active .book-cover { transform: scale(.985); }
/* мета под обложкой */
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px; }
.card-top h3 {
margin: 0; min-width: 0;
font-family: var(--font-ui); font-size: 15px; font-weight: 600; line-height: 1.35;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-top-right { flex: none; display: flex; align-items: center; gap: 6px; }
.card-fandoms {
font-style: italic; font-size: 12.5px; color: var(--ink3); padding: 0 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-prog { display: flex; align-items: center; gap: 10px; padding: 3px 2px 0; }
.prog-track { flex: 1; height: 2px; border-radius: 1px; background: var(--line2); overflow: hidden; }
.prog-fill { display: block; height: 100%; border-radius: 1px; background: var(--gold); }
.prog-fill.done { background: var(--good); }
.prog-note { font-size: 11.5px; color: var(--ink3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.card-meta {
display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center;
font-size: 12px; color: var(--ink2); padding: 2px 2px 0;
}
/* Пилюля тональности на карточке библиотеки.
2026-07-28: раньше внутри была ОДНА буква рейтинга (G/T/M/E) — под неё и был
разрежен трекинг (.06em). Теперь там слово («Драматичная»), и тот же трекинг
растягивал пилюлю на пол-строки метаданных. Ширина не фиксирована, поэтому
обрезки не было и нет, но nowrap добавлен явно: перенос «Драма-/тичная»
внутри пилюли выглядел бы поломкой. */
.rating-pill {
border: 1px solid var(--line2); border-radius: 5px; padding: 2px 6px;
font-weight: 600; font-size: 10.5px; letter-spacing: .01em; color: var(--ink3);
white-space: nowrap;
}
.done-pill { color: var(--good); font-weight: 600; }
.writing-pill { display: inline-flex; align-items: center; gap: 7px; color: var(--gold-text); font-weight: 600; }
/* статус-точка «пишется…» — пульсирующий глиф-лист Turnleaves (§3b «СТАТУС В UI») */
.writing-pill::before {
content: ""; flex: none; width: 8px; height: 8px;
border-radius: 0 100% 0 100%; transform: rotate(-45deg);
background: var(--gold); animation: leaf-pulse 1.6s ease-in-out infinite;
}
.pub-pill { color: var(--good); font-weight: 600; }
.card-del {
flex: none; display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: none; cursor: pointer;
color: var(--ink3); font-family: var(--font-ui); font-size: 13px; line-height: 1;
opacity: .75; padding: 5px 6px; border-radius: 7px;
transition: color .15s, opacity .15s;
}
.card-del:active { color: var(--danger); opacity: 1; }
.card-author { color: var(--ink3); }
.card-rating { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink2); }
/* панель управления библиотекой/каталогом (живёт в .view-head) */
.lib-toolbar { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.lib-search { width: 100%; box-sizing: border-box; }
.lib-controls { display: flex; flex-wrap: wrap; gap: 10px; }
.lib-ctl { flex: 1 1 140px; display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; }
.lib-ctl > span { font-size: 10.5px; font-weight: 600; text-transform: uppercase;
letter-spacing: .1em; color: var(--ink3); }
.lib-ctl select { width: 100%; min-height: 42px; font-size: 13.5px; color: var(--ink2); }
.lib-group-head {
margin: 12px 0 0; font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: .14em; color: var(--ink3);
display: flex; align-items: center; gap: 12px;
}
.lib-group-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
@media (min-width: 720px) {
.lib-toolbar { flex: 0 1 auto; flex-direction: row; align-items: flex-end; justify-content: flex-end; }
.lib-search { flex: 0 1 280px; width: auto; }
.lib-controls { flex: none; }
.lib-ctl { flex: none; min-width: 150px; }
}
/* рейтинг звёздами */
.stars { display: inline-flex; gap: 1px; font-size: 14px; line-height: 1; letter-spacing: .05em; }
.stars .st { color: var(--line2); }
.stars .st.on { color: var(--gold); }
.star-row { font-size: 12.5px; letter-spacing: .05em; color: var(--line2); }
.star-row .st.on { color: var(--gold); }
/* ============================================================
ЧИТАЛКА
============================================================ */
/* прогресс чтения — тонкая золотая линия под шапкой (только вид «Книга»);
ширину заполнения ведёт updateReadProgress (пассивный scroll-листенер) */
.read-progress {
position: fixed; top: var(--tb-h, 60px); left: 0; right: 0; height: 2px;
z-index: 55; pointer-events: none;
opacity: 0; transition: opacity .25s ease, top .25s ease;
}
.read-progress.on { opacity: 1; }
.read-progress-fill {
display: block; height: 100%; width: 0;
background: linear-gradient(90deg, color-mix(in oklab, var(--gold) 60%, transparent), var(--gold));
box-shadow: 0 0 6px color-mix(in oklab, var(--gold) 40%, transparent);
}
/* мобильный ридер спрятал шапку — линия поднимается к верхнему краю */
body.chrome-hidden .read-progress { top: 0; }
.book-bar {
max-width: 920px; margin: 0 auto 14px;
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
/* «＋ Добавить к себе» — золотистая пилюля (макет addLibCss) */
.add-lib-btn {
border-radius: 10px; padding: 10px 16px; min-height: var(--tap);
font-family: var(--font-ui); font-size: 13px; font-weight: 600; cursor: pointer;
background: var(--gold-soft); border: 1px solid var(--gold); color: var(--gold-text);
white-space: nowrap; transition: filter .15s;
}
.add-lib-btn:active { filter: brightness(1.1); }
/* Группа действий книги: одна рамка, кнопки через тонкие разделители (макет) */
.book-actions {
display: flex; align-items: stretch; flex-wrap: wrap; row-gap: 4px;
max-width: 100%; box-sizing: border-box;
background: var(--surface); border: 1px solid var(--line2);
border-radius: 11px; padding: 2px;
}
.ba-btn {
display: inline-flex; align-items: center; gap: 7px;
background: none; border: none; border-radius: 9px;
color: var(--ink2); padding: 9px 13px; min-height: 40px;
font-family: var(--font-ui); font-size: 13px; cursor: pointer;
position: relative; transition: color .15s, background .15s;
-webkit-tap-highlight-color: transparent;
}
.ba-btn:active { color: var(--gold-text); }
.ba-glyph { font-size: 12px; opacity: .65; }
/* разделитель — на каждом видимом соседе, кроме первого (hidden не ломает ряд) */
.book-actions > .ba-btn + .ba-btn::before,
.book-actions > * + .ba-more-wrap::before {
content: ""; position: absolute; left: 0; top: 7px; bottom: 7px;
width: 1px; background: var(--line);
}
.ba-more-wrap { position: relative; display: flex; }
.ba-more { font-size: 16px; line-height: 1; padding: 9px 14px; }
/* меню «⋯»: публикация (с подписью), поделиться, жалоба */
.book-menu {
position: absolute; right: 0; top: calc(100% + 8px); z-index: 80;
min-width: 260px; background: var(--surface); border: 1px solid var(--line);
border-radius: 12px; box-shadow: var(--shadow-soft); padding: 6px;
display: flex; flex-direction: column;
animation: ff-fade-up .2s ease both;
}
.bm-item {
display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
text-align: left; background: none; border: none; border-radius: 8px;
padding: 10px 12px; font-family: var(--font-ui); font-size: 13.5px;
color: var(--ink2); cursor: pointer; width: 100%;
transition: background .15s, color .15s;
}
.bm-item:disabled { opacity: .6; cursor: default; }
.bm-item:active:not(:disabled) { background: var(--raised); }
.bm-row { display: inline-flex; align-items: center; gap: 8px; color: inherit; }
.bm-publish .bm-row { color: var(--ink); }
.bm-glyph { font-size: 12px; opacity: .8; width: 14px; text-align: center; flex: none; }
.bm-glyph.bm-gold { color: var(--gold-text); opacity: 1; }
.bm-glyph.bm-good { color: var(--good); opacity: 1; }
.bm-glyph.bm-warn { color: var(--danger); opacity: 1; }
.bm-cap { font-size: 11.5px; color: var(--ink3); padding-left: 22px; line-height: 1.45; }
.bm-item.bm-publish:not(.hidden) + .bm-item { margin-top: 5px; border-top: 1px solid var(--line); border-radius: 0; }
.chap-nav { order: 5; width: 100%; display: flex; align-items: center; gap: 10px; }
.chap-nav select { flex: 1; min-width: 0; min-height: var(--tap); font-size: 13.5px; color: var(--ink); background: var(--surface); }
.nav-arrow {
flex: none; width: 42px; height: 42px; border-radius: 50%;
border: 1px solid var(--line2); background: transparent;
font-size: 18px; line-height: 1; color: var(--ink2); cursor: pointer;
transition: border-color .15s, color .15s;
-webkit-tap-highlight-color: transparent;
}
.nav-arrow:active:not(:disabled) { border-color: var(--gold); color: var(--gold-text); }
.nav-arrow:disabled { opacity: .35; cursor: default; }
/* ≥1000: выбор главы, «＋ Добавить к себе» и группа действий — ОДНА строка,
прижатая к правому краю. Ниже 1000px инлайн-раскладка не влезает (только
select+группа просят ≈900px) и рвала бар на две «лесенки» у правого края с
пустой левой половиной (скрин владельца 2026-07-26) — там работает мобильная
раскладка: группа действий слева, выбор главы отдельной строкой. */
@media (min-width: 1000px) {
.book-bar { margin-bottom: 20px; gap: 12px; justify-content: flex-end; flex-wrap: nowrap; }
/* select сжимаемый — стрелки не выталкиваются за края бара при нехватке места */
.chap-nav { order: 0; width: auto; flex: 0 1 auto; min-width: 0; }
.chap-nav select { flex: 1 1 auto; width: auto; min-width: 120px; max-width: 340px; }
.add-lib-btn { flex: none; }
.book-actions { flex: none; flex-wrap: nowrap; }
}
/* «Слушать» в группе: при активной озвучке — золотая подложка (макет listenCss) */
.listen-btn.playing { background: var(--gold-soft); color: var(--gold-text); }
.listen-btn.playing .ba-glyph { opacity: 1; }
.book-sheet {
max-width: 920px; margin: 0 auto;
border-radius: 18px;
padding: clamp(28px, 6vw, 72px) clamp(18px, 6vw, 84px) clamp(40px, 6vw, 72px);
}
.running-head {
display: flex; justify-content: space-between; gap: 16px;
font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em;
color: var(--ink3);
padding-bottom: 14px; margin-bottom: 34px;
border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) { .running-head { margin-bottom: 40px; } }
/* проза */
.prose {
max-width: 640px; margin: 0 auto;
font-family: var(--font-serif);
font-size: clamp(17px, 2vw, 19px); line-height: 1.78; color: var(--ink);
}
.prose h1 {
text-align: center; font-family: var(--font-serif);
font-size: clamp(24px, 3.5vw, 31px); font-weight: 600;
letter-spacing: .01em; margin: 6px 0 8px;
}
.prose h1::after {
content: "⁂"; display: block; font-size: 13px; color: var(--gold);
letter-spacing: .4em; padding-left: .4em; margin-top: 16px; font-weight: 400;
}
.prose h1 + * { margin-top: 30px; }
.prose h2 { font-size: 22px; font-weight: 600; margin: 32px 0 14px; }
.prose h3, .prose h4, .prose h5, .prose h6 { font-size: 18px; font-weight: 600; margin: 24px 0 10px; }
/* шапка главы (chapterHeadHtml в reader.js): киккер «Глава N» + заголовок;
h1 внутри наследует стиль .prose h1 (по центру, виньетка ⁂ после) */
.chap-head { margin: 6px 0 30px; text-align: center; }
.chap-kicker {
display: block; font-family: var(--font-ui);
font-size: 11px; font-weight: 600; letter-spacing: .18em;
text-transform: uppercase; color: var(--ink3); margin-bottom: 10px;
}
.prose p { margin: 0 0 .5em; text-indent: 1.5em; }
.prose h1 + p, .prose h2 + p, .prose .vignette + p, .prose .chap-head + p { text-indent: 0; }
/* буквица первого абзаца главы (реплики-диалоги без буквицы) */
.prose h1 + p:not(.dlg)::first-letter,
.prose .chap-head + p:not(.dlg)::first-letter {
float: left; font-size: 3.05em; line-height: .84;
padding: .04em .1em 0 0; color: var(--gold-text); font-weight: 500;
}
.prose p.li { text-indent: 0; margin-left: 1.2em; }
.prose blockquote {
margin: 14px 0 14px 1.5em; padding-left: 14px;
border-left: 2px solid var(--line2); color: var(--ink2); font-style: italic;
}
.vignette {
text-align: center; color: var(--ink3); font-size: 15px;
letter-spacing: .5em; padding-left: .5em; margin: 34px 0;
}
.empty-book { text-align: center; font-style: italic; color: var(--ink2); text-indent: 0 !important; padding: 40px 0; }
/* tap-to-listen: подсветка абзаца */
#view-book .prose p, #view-book .prose blockquote { cursor: pointer; }
.tts-cur {
background: var(--gold-soft) !important; border-radius: 6px;
box-shadow: 0 0 0 6px var(--gold-soft); transition: background .3s ease;
}
/* иллюстрации глав */
.chapter-art { margin: 30px auto; max-width: 640px; }
.chapter-art img { width: 100%; border-radius: 12px; display: block; box-shadow: var(--shadow-soft); cursor: zoom-in; }
/* лайтбокс: тап по иллюстрации открывает её крупно (закрыть — тап или Esc) */
.img-lightbox {
position: fixed; inset: 0; z-index: 130;
display: flex; align-items: center; justify-content: center;
background: var(--scrim);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
padding: 16px; cursor: zoom-out;
}
.img-lightbox img {
max-width: min(1280px, 96vw); max-height: 92vh;
border-radius: 10px; box-shadow: var(--shadow);
animation: ff-fade-up .22s ease both;
}
.img-lightbox-close {
position: absolute; top: 10px; right: 12px;
width: var(--tap); height: var(--tap); border-radius: 50%;
background: color-mix(in oklab, var(--bg) 55%, transparent);
border: 1px solid var(--line2); color: var(--ink2);
font-size: 16px; cursor: pointer;
transition: color .15s, border-color .15s;
}
.img-lightbox-close:active { color: var(--danger); }
/* аудио-бар главы */
.audio-bar {
display: flex; align-items: center; gap: 12px; margin: 0 0 18px;
padding: 10px 14px; border-radius: 12px;
background: var(--raised); border: 1px solid var(--line);
font-family: var(--font-ui); font-size: 13.5px; color: var(--ink2);
}
.audio-bar audio { flex: 1; height: 34px; }
.audio-bar .audio-label { flex: none; white-space: nowrap; font-weight: 600; }
.audio-running { opacity: .75; }
/* конец главы */
#chapter-end { max-width: 640px; margin: 0 auto; font-family: var(--font-ui); }
.chosen-note {
margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line);
text-align: center; font-family: var(--font-serif); font-style: italic;
font-size: 14.5px; color: var(--ink2);
}
.choices-block { margin-top: 52px; }
.choices-title {
display: flex; align-items: center; gap: 16px;
font-size: 11.5px; font-weight: 600; text-transform: uppercase;
letter-spacing: .18em; color: var(--ink2);
margin-bottom: 22px; white-space: nowrap;
}
.choices-title::before, .choices-title::after { content: ""; flex: 1; height: 1px; background: var(--line2); }
.choices { display: flex; flex-direction: column; gap: 12px; }
.choice-card {
display: flex; align-items: center; gap: 16px;
width: 100%; text-align: left;
font-family: var(--font-serif); font-size: 16px; line-height: 1.5; color: var(--ink);
background: var(--raised);
border: 1px solid var(--line2); border-radius: 12px;
padding: 16px 20px; min-height: 60px;
cursor: pointer;
transition: transform .18s ease, border-color .18s, box-shadow .18s, background .18s;
-webkit-tap-highlight-color: transparent;
}
.choice-card:active:not(:disabled) {
transform: scale(.99);
border-color: var(--gold);
background: var(--gold-soft);
}
.choice-card:disabled { opacity: .6; cursor: default; }
.choice-letter {
flex: none; width: 34px; height: 34px; border-radius: 50%;
border: 1px solid var(--gold); color: var(--gold-text);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-ui); font-size: 13px; font-weight: 600;
}
.next-block { margin-top: 42px; text-align: center; }
.next-block .primary { width: 100%; max-width: 360px; }
/* Нижняя навигация готовой главы: книжная разделительная линия и крупные
тач-таргеты, чтобы продолжить чтение можно было без возврата к шапке. */
.chapter-bottom-nav {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px;
margin-top: 46px; padding-top: 22px;
border-top: 1px solid var(--line);
}
.chapter-bottom-btn {
width: 100%; min-height: 52px;
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
line-height: 1.3; text-align: center;
-webkit-tap-highlight-color: transparent;
}
.chapter-bottom-prev:disabled { opacity: .32; }
@media (max-width: 419px) {
.chapter-bottom-nav { gap: 8px; }
.chapter-bottom-btn { min-height: 54px; padding-inline: 10px; font-size: 12.5px; }
}
/* свой вариант читателя */
.custom-choice {
margin-top: 22px;
padding: 16px 18px;
border: 1px dashed var(--line2);
border-radius: 12px;
background: transparent;
}
.custom-title { font-family: var(--font-serif); font-style: italic; font-size: 13px; color: var(--ink2); margin-bottom: 10px; }
.custom-choice textarea {
width: 100%; box-sizing: border-box; resize: none;
font-family: var(--font-ui); font-size: 14px; min-height: 64px;
padding: 12px 14px; line-height: 1.5;
background: var(--surface); border: 1px solid var(--line2); border-radius: 10px;
}
.custom-choice button {
margin-top: 10px; width: 100%; min-height: 44px;
background: transparent; border: 1px solid var(--gold); border-radius: 10px;
color: var(--gold-text); font-family: var(--font-ui);
font-size: 13.5px; font-weight: 600; cursor: pointer;
transition: background .15s;
}
.custom-choice button:active { background: var(--gold-soft); }
.custom-choice button:disabled { opacity: .55; }
@media (min-width: 720px) { .custom-choice button { width: auto; padding: 12px 18px; } }
/* финал */
.finale { margin-top: 52px; text-align: center; }
.finale .vignette { margin: 0 0 14px; }
.finale .fin {
font-family: var(--font-serif);
font-size: 21px; font-weight: 600; text-transform: uppercase;
letter-spacing: .4em; padding-left: .4em; margin-bottom: 28px;
}
.finale .primary { width: 100%; max-width: 360px; }
/* переигрывание выбора */
.replay-block { text-align: center; margin: 18px 0 0; }
.replay-btn { font-size: 13px; opacity: .85; }
.replay-panel { max-width: 640px; margin: 20px auto 0; }
.replay-warn {
background: var(--gold-soft); border: 1px solid var(--gold); border-radius: 12px;
padding: 12px 14px; font-size: 13.5px; color: var(--ink); margin: 0 0 14px;
}
.replay-choice.is-current { border-color: var(--gold); background: var(--gold-soft); }
/* обсуждение (комментарии) */
.comments-block {
max-width: 640px; margin: 40px auto 0; text-align: left;
font-family: var(--font-ui);
border-top: 1px solid var(--line); padding-top: 26px;
}
.comments-head {
display: flex; align-items: center; gap: 10px;
font-size: 11.5px; font-weight: 600; text-transform: uppercase;
letter-spacing: .18em; color: var(--ink2); margin: 0 0 16px;
}
.comments-head .count {
border: 1px solid var(--line2); border-radius: 999px; padding: 1px 9px;
font-size: 11px; letter-spacing: 0; color: var(--ink3);
font-variant-numeric: tabular-nums;
}
.comments-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* компоуз по макету: аватар слева, textarea + «Отправить» справа-снизу */
.comment-compose { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px; }
.compose-main { flex: 1; min-width: 0; }
.comment-compose textarea {
width: 100%; min-height: 48px; resize: none; padding: 12px 14px;
border: 1px solid var(--line2); border-radius: 12px;
font-family: var(--font-ui); font-size: 14px;
background: var(--raised); color: var(--ink);
}
.compose-send-row { display: flex; justify-content: flex-end; margin-top: 8px; }
.comment-send {
padding: 9px 18px; border-radius: 10px; min-height: 40px;
background: transparent; border: 1px solid var(--gold);
color: var(--gold-text); font-family: var(--font-ui);
font-size: 13px; font-weight: 600; cursor: pointer;
transition: background .15s;
}
.comment-send:active { background: var(--gold-soft); }
.comment-send:disabled { opacity: .5; cursor: default; }
.comment-item { display: flex; gap: 12px; padding: 14px 0; border-top: 1px dashed var(--line); }
.comment-body-wrap { flex: 1; min-width: 0; }
.comment-meta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.comment-author { font-weight: 600; font-size: 13.5px; }
.comment-date { font-size: 11.5px; color: var(--ink3); }
.comment-del {
margin-left: auto; font-size: 11.5px; color: var(--ink3);
background: none; border: none; cursor: pointer; transition: color .15s;
}
.comment-del:active { color: var(--danger); }
.comment-body {
margin: 5px 0 0; font-family: var(--font-serif);
font-size: 14.5px; line-height: 1.6; color: var(--ink2);
white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere;
}
.comments-empty { font-size: 13.5px; color: var(--ink3); font-style: italic; }
.comments-login { font-size: 13px; color: var(--ink3); }
/* отзывы и оценки */
.reviews-empty { font-size: 13.5px; color: var(--ink3); font-style: italic; }
.rate-widget {
margin: 26px auto 0; max-width: 640px; text-align: center; padding: 16px;
background: var(--raised); border: 1px solid var(--line); border-radius: 12px;
font-family: var(--font-ui);
}
.rate-title {
font-size: 10.5px; font-weight: 600; text-transform: uppercase;
letter-spacing: .14em; color: var(--gold-text); margin-bottom: 8px;
}
.rate-widget .rate-stars { font-size: 28px; letter-spacing: 4px; cursor: pointer; user-select: none; }
.rate-widget .rate-stars .st { color: var(--line2); transition: color .12s; }
.rate-widget .rate-stars .st.on { color: var(--gold); }
.rate-caption { font-size: 12px; color: var(--ink3); font-style: italic; margin: 6px 0 0; }
.review-input {
width: 100%; max-width: 560px; margin: 12px auto 0; display: block; min-height: 74px;
resize: vertical; padding: 12px 14px; border: 1px solid var(--line2); border-radius: 10px;
font-family: var(--font-ui); font-size: 14px; background: var(--surface); color: var(--ink);
}
.review-submit {
margin: 10px auto 0; display: inline-block; padding: 9px 18px; border-radius: 10px;
border: 1px solid var(--gold); background: transparent; color: var(--gold-text);
font-family: var(--font-ui); font-size: 13px; font-weight: 600; cursor: pointer;
transition: background .15s;
}
.review-submit:active { background: var(--gold-soft); }
.review-submit:disabled { opacity: .55; cursor: default; }
#panel-reviews .reviews-empty { padding: 8px 0; }
/* шторка «Отзывы» (по макету design_import/Fansfics Premium.dc.html):
сводка рейтинга + карточка «ваша оценка» + ряды отзывов через пунктир */
#panel-reviews { font-family: var(--font-ui); }
.rev-summary { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.rev-avg {
font-family: var(--font-serif); font-size: 44px; font-weight: 600;
line-height: 1; color: var(--ink);
}
.rev-summary-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rev-stars { font-size: 15px; letter-spacing: .12em; white-space: nowrap; }
.rev-stars .st { color: var(--line2); }
.rev-stars .st.on { color: var(--gold); }
.rev-count { font-size: 12.5px; color: var(--ink3); }
.rev-rate-card {
background: var(--raised); border: 1px solid var(--line);
border-radius: 12px; padding: 14px 16px 12px; margin-bottom: 22px;
}
.rev-rate-kicker {
font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
text-transform: uppercase; color: var(--gold-text); margin-bottom: 8px;
}
.rev-rate-stars { display: flex; gap: 2px; }
.rev-rate-stars .st {
background: none; border: none; cursor: pointer;
padding: 2px 4px; font-size: 24px; line-height: 1;
color: var(--line2); transition: color .12s, transform .12s;
}
.rev-rate-stars .st.on { color: var(--gold); }
.rev-rate-stars .st:active { transform: scale(1.12); color: var(--gold); }
.rev-rate-note { font-size: 12px; color: var(--ink3); font-style: italic; margin-top: 4px; }
.rev-item { padding: 14px 0; border-bottom: 1px dashed var(--line); }
.rev-item-top { display: flex; align-items: center; gap: 10px; }
.rev-ava {
flex: none; width: 30px; height: 30px; border-radius: 50%;
background: var(--raised); border: 1px solid var(--line2); color: var(--ink2);
display: inline-flex; align-items: center; justify-content: center;
font-size: 12.5px; font-weight: 600;
}
.avatar.rev-ava-img { width: 30px; height: 30px; }
.rev-name {
font-size: 13.5px; font-weight: 600; color: var(--ink);
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rev-stars-inline { flex: none; font-size: 11.5px; letter-spacing: .08em; white-space: nowrap; }
.rev-stars-inline .st { color: var(--line2); }
.rev-stars-inline .st.on { color: var(--gold); }
.rev-date { margin-left: auto; flex: none; font-size: 11.5px; color: var(--ink3); }
.rev-text {
margin: 9px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink2);
white-space: pre-wrap; overflow-wrap: anywhere;
}
/* ============================================================
ИГРОВОЙ РЕЖИМ (статус-строка + дневник)
============================================================ */
.game-bar {
position: sticky; top: calc(var(--tb-h, 64px) + 6px); z-index: 60;
display: flex; align-items: center; gap: 12px; width: 100%; max-width: 720px;
margin: 0 auto 14px; min-height: 44px; padding: 8px 14px;
border: 1px solid var(--line2); border-radius: 12px;
background: var(--surface); box-shadow: var(--shadow-soft);
font-family: var(--font-ui); font-size: 13.5px; color: var(--ink);
cursor: pointer; text-align: left;
transition: top .25s ease;
}
.game-bar.hidden { display: none; }
.gb-loc { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* «вы здесь» сменилось по ходу чтения — короткая золотая вспышка */
.gb-loc.gb-flash { animation: gb-loc-flash 1.1s ease; }
@keyframes gb-loc-flash { 0%, 45% { color: var(--accent-ink); } 100% { color: inherit; } }
.gb-hp { display: flex; align-items: center; gap: 8px; }
.gb-hp .hp-track { display: inline-block; width: 70px; height: 8px;
border-radius: 5px; background: var(--line2); overflow: hidden; vertical-align: middle; }
.gb-hp .hp-fill { display: block; height: 100%; border-radius: 5px; }
.gb-inv { color: var(--ink2); white-space: nowrap; }
.gb-more { font-size: 12px; color: var(--ink3); white-space: nowrap; }
@media (max-width: 719px) {
.game-bar { gap: 9px; padding: 8px 12px; font-size: 12.5px; }
.gb-hp .hp-track { width: 52px; }
}
@media (max-width: 419px) { .gb-more-w { display: none; } }
/* дельта-карточка главы (итоги, книжной виньеткой) */
.game-delta {
display: flex; align-items: center; justify-content: center;
flex-wrap: wrap; gap: 8px; margin: 24px auto 10px; max-width: 640px;
font-family: var(--font-serif); font-style: italic; font-size: 14.5px;
color: var(--ink2); text-align: center;
}
.gd-rule { flex: 1; min-width: 30px; height: 1px; background: var(--line2); }
.gd-dot { opacity: .5; }
/* дневник (панель game) — по макету Premium: секции с линейкой, карта в рамке */
.hud-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase;
letter-spacing: .14em; color: var(--ink3); margin-right: 8px; flex: none; }
.hud-sec { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.hud-rule { flex: 1; height: 1px; background: var(--line); }
.hud-hp { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 220px; }
.hud-hp b { font-size: 13px; font-variant-numeric: tabular-nums; }
.hp-track { flex: 1; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.hp-fill { height: 100%; border-radius: 999px; transition: width .8s ease; }
.hp-good { background: linear-gradient(90deg, color-mix(in oklab, var(--good) 80%, #000), var(--good)); }
.hp-mid { background: linear-gradient(90deg, color-mix(in oklab, var(--gold) 80%, #000), var(--gold)); }
.hp-low { background: linear-gradient(90deg, color-mix(in oklab, var(--danger) 80%, #000), var(--danger)); }
.hud-loc { margin: 14px 0 0; font-family: var(--font-serif); font-style: italic;
font-size: 15px; color: var(--ink); }
.hud-inv { margin-top: 18px; }
.inv-item { display: inline-block; margin: 2px 6px 4px 0; padding: 7px 13px;
border-radius: 999px; background: var(--raised); border: 1px solid var(--line2);
font-size: 12.5px; color: var(--ink2); }
.hud-map-sec, .hud-log-sec { margin-top: 18px; }
.hud-log-row { display: flex; gap: 10px; padding: 10px 0;
border-bottom: 1px dashed var(--line); font-size: 13.5px; line-height: 1.5; color: var(--ink2); }
.hud-log-ch { flex: none; min-width: 34px; font-size: 11px; color: var(--ink3);
padding-top: 2px; font-variant-numeric: tabular-nums; }
/* ============================================================
КАРТА ПУТИ v3 (ревью 2026-07-28): врезка + полный экран + жанровый скин
============================================================
Б-4: старая врезка держала viewBox шириной 476 при max-height 260px и
width:100% — в шторке (≤ min(430px,96vw)) натуральный масштаб был НЕДОСТИЖИМ,
и обещанные комментарием 10.5px рендерились как ~6.9px, а на телефоне при 24
узлах — как ~4.3px. Теперь svg отдаётся в натуральную величину (1 юнит = 1px),
а узкий экран честно скроллит карту по горизонтали.
Скин задаётся ОДНИМ токеном-семенем --map-tint; всё остальное считается от
тем-токенов (--raised/--ink3/--gold) через color-mix, поэтому один и тот же
набор правил работает и в светлой, и в тёмной теме, и в самих элементах нет
ни одного хардкод-цвета. Фактуры — только CSS-градиенты: ни внешних файлов,
ни base64-картинок (CSP self + вес страницы). Иконографии конкретных
вселенных, гербов и шрифтов-имитаций здесь нет и быть не должно (юр-риск). */
.hud-map, .map-full {
--map-tint: var(--gold);
--map-bg: color-mix(in oklab, var(--map-tint) 8%, var(--raised));
--map-frame: color-mix(in oklab, var(--map-tint) 24%, var(--line));
--map-edge: color-mix(in oklab, var(--map-tint) 30%, var(--ink3));
--map-node: var(--gold);
--map-hub: var(--gold-text);
--map-cur: var(--danger);
--map-lbl: var(--ink2);
--map-halo: var(--map-bg);
--map-tex: none;
}
/* пергамент: тёплая сепия, косая штриховка тушью и виньетка по краю */
.hud-map[data-skin="parchment"], .map-full[data-skin="parchment"] {
--map-tint: #A8752E;
--map-bg: color-mix(in oklab, var(--map-tint) 13%, var(--raised));
--map-tex:
repeating-linear-gradient(58deg, color-mix(in oklab, var(--map-tint) 10%, transparent) 0 1px, transparent 1px 7px),
radial-gradient(125% 95% at 50% 0%, transparent 42%, color-mix(in oklab, var(--map-tint) 17%, transparent) 100%);
}
/* тушь-акварель: мягкие размывы, почти без каркаса */
.hud-map[data-skin="ink"], .map-full[data-skin="ink"] {
--map-tint: #5B6E86;
--map-bg: color-mix(in oklab, var(--map-tint) 10%, var(--raised));
--map-edge: color-mix(in oklab, var(--map-tint) 46%, var(--ink3));
--map-tex:
radial-gradient(58% 46% at 22% 26%, color-mix(in oklab, var(--map-tint) 20%, transparent) 0%, transparent 70%),
radial-gradient(52% 52% at 78% 68%, color-mix(in oklab, var(--map-tint) 15%, transparent) 0%, transparent 72%),
radial-gradient(40% 42% at 55% 92%, color-mix(in oklab, var(--map-tint) 12%, transparent) 0%, transparent 70%);
}
/* звёздная карта: тёмно-синее с золотом; «звёзды» — фиксированные точки,
позиции захардкожены НАРОЧНО (разброс обязан быть одинаковым при каждой
перерисовке — то же правило, что для раскладки узлов) */
.hud-map[data-skin="stars"], .map-full[data-skin="stars"] {
--map-tint: #2E3E78;
--map-bg: color-mix(in oklab, var(--map-tint) 26%, var(--raised));
--map-edge: color-mix(in oklab, var(--gold) 38%, var(--ink3));
--map-tex:
radial-gradient(1.3px 1.3px at 11% 21%, color-mix(in oklab, var(--ink) 70%, transparent) 50%, transparent 100%),
radial-gradient(1px 1px at 27% 66%, color-mix(in oklab, var(--ink) 55%, transparent) 50%, transparent 100%),
radial-gradient(1.6px 1.6px at 44% 13%, color-mix(in oklab, var(--gold) 75%, transparent) 50%, transparent 100%),
radial-gradient(1px 1px at 61% 48%, color-mix(in oklab, var(--ink) 50%, transparent) 50%, transparent 100%),
radial-gradient(1.3px 1.3px at 79% 29%, color-mix(in oklab, var(--ink) 65%, transparent) 50%, transparent 100%),
radial-gradient(1px 1px at 88% 74%, color-mix(in oklab, var(--gold) 60%, transparent) 50%, transparent 100%),
radial-gradient(1.2px 1.2px at 35% 88%, color-mix(in oklab, var(--ink) 55%, transparent) 50%, transparent 100%),
linear-gradient(180deg, color-mix(in oklab, var(--map-tint) 20%, transparent), transparent 62%);
}
/* схема подземелья: чертёж по сетке */
.hud-map[data-skin="dungeon"], .map-full[data-skin="dungeon"] {
--map-tint: #3E6B72;
--map-bg: color-mix(in oklab, var(--map-tint) 12%, var(--raised));
--map-edge: color-mix(in oklab, var(--map-tint) 58%, var(--ink3));
--map-node: color-mix(in oklab, var(--map-tint) 42%, var(--gold));
--map-tex:
repeating-linear-gradient(0deg, color-mix(in oklab, var(--map-tint) 17%, transparent) 0 1px, transparent 1px 16px),
repeating-linear-gradient(90deg, color-mix(in oklab, var(--map-tint) 17%, transparent) 0 1px, transparent 1px 16px);
}
/* --- врезка в шторке (превью) --- */
.hud-map { position: relative; border-radius: 12px; padding: 10px 8px 6px;
background-color: var(--map-bg); background-image: var(--map-tex);
border: 1px solid var(--map-frame); }
.hud-map-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.hud-map .map-svg { display: block; margin: 0 auto; max-width: none; cursor: zoom-in; }
.hud-map-expand {
position: absolute; top: 6px; right: 6px;
display: inline-flex; align-items: center; gap: 6px;
min-height: 32px; padding: 4px 11px; cursor: pointer;
border: 1px solid var(--map-frame); border-radius: 999px;
background: color-mix(in oklab, var(--map-bg) 55%, var(--surface));
color: var(--ink2); font-family: var(--font-ui); font-size: 11.5px;
transition: color .15s, border-color .15s;
}
@media (max-width: 419px) { .hud-map-expand-w { display: none; } }
/* О-7: пустой visited больше не убирает секцию — конструктор обещал карту */
.hud-map-empty { margin: 0; padding: 24px 14px; text-align: center;
border: 1px dashed var(--line2); border-radius: 12px; color: var(--ink3);
font-family: var(--font-serif); font-style: italic; font-size: 14px; }
/* --- сама графика (общая для врезки и полного экрана) --- */
.map-svg .map-dot { fill: var(--map-node); }
/* хаб — узел с наибольшей степенью: база героя узнаётся без подписи */
.map-svg .map-hub { fill: var(--map-hub);
stroke: color-mix(in oklab, var(--map-hub) 26%, transparent); stroke-width: 5; }
/* «Вы здесь» — красная точка с мягким ореолом (просьба владельца), следует за
чтением внутри главы (_syncMapCurrent из updateRouteLoc); правило ПОСЛЕ хаба,
иначе база-и-она-же-текущая точка осталась бы золотой */
.map-svg .map-cur { fill: var(--map-cur);
stroke: color-mix(in oklab, var(--map-cur) 32%, transparent); stroke-width: 8; }
.map-svg .map-edge { fill: none; stroke: var(--map-edge); stroke-dasharray: 3 5;
stroke-linecap: round; opacity: .9; }
/* Возврат в уже известное место — золотой пунктир НАЗАД к старому узлу */
.map-svg .map-return { stroke: var(--gold); stroke-dasharray: 2 4; opacity: .95; }
/* Ореол под подписью: узлы и подписи не сливаются */
.map-svg .map-lbl { font-family: var(--font-ui); font-size: 11px; fill: var(--map-lbl);
paint-order: stroke; stroke: var(--map-halo); stroke-width: 3px; stroke-linejoin: round; }
.map-svg .map-step { font-family: var(--font-ui); font-size: 8.5px; fill: var(--ink3);
opacity: .85; font-variant-numeric: tabular-nums;
paint-order: stroke; stroke: var(--map-halo); stroke-width: 2px; stroke-linejoin: round; }
/* единственное место на карте — не точка в углу, а композиция из двух колец */
.map-svg .map-solo { fill: none; stroke: var(--map-edge); stroke-dasharray: 2 5; opacity: .5; }
.map-svg .map-solo2 { opacity: .26; }
/* --- полноэкранный вид --- */
.map-full { position: fixed; inset: 0; z-index: 135; display: flex; flex-direction: column;
background-color: var(--map-bg); background-image: var(--map-tex); }
.map-full.hidden { display: none !important; }
.map-full-head { flex: none; display: flex; align-items: center; gap: 12px;
padding: 8px 10px; padding-top: max(8px, env(safe-area-inset-top));
border-bottom: 1px solid var(--map-frame);
background: color-mix(in oklab, var(--surface) 62%, transparent); }
.map-full-head h3 { flex: 1; margin: 0; font-family: var(--font-ui); font-size: 11.5px;
font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--ink2); }
.map-full-tools { display: flex; gap: 6px; }
.map-tool { width: var(--tap); height: var(--tap); border-radius: 10px; cursor: pointer;
border: 1px solid var(--map-frame); background: transparent; color: var(--ink2);
font-family: var(--font-ui); font-size: 17px; line-height: 1;
transition: color .15s, border-color .15s; }
.map-tool-close { color: var(--ink); }
.map-full-canvas { flex: 1; min-height: 0; overflow: hidden; touch-action: none; }
.map-full-canvas .map-svg { display: block; width: 100%; height: 100%; }
/* Узлы в полном экране — кнопки с клавиатуры (tabindex=0). Общий контур
[tabindex]:focus-visible из базовых правил НЕ гасим — он и есть индикатор
фокуса; кольцо на самой точке добавляем сверху, чтобы было видно и на карте. */
.map-full .map-node { cursor: pointer; }
.map-full .map-node:focus-visible .map-dot { stroke: var(--gold); stroke-width: 4; }
/* карточка узла (О-4): глава визита, ран/находок, сделанный выбор */
.map-node-card { position: absolute; left: 50%; transform: translateX(-50%); z-index: 2;
bottom: calc(62px + env(safe-area-inset-bottom));
width: min(430px, calc(100% - 22px)); max-height: 46vh; overflow: auto;
padding: 12px 14px 14px; border-radius: 14px;
border: 1px solid var(--map-frame); background: var(--surface);
box-shadow: var(--shadow); font-size: 13.5px; color: var(--ink2); }
.map-node-card.hidden { display: none !important; }
.mnc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mnc-name { flex: 1; font-family: var(--font-serif); font-size: 16px; color: var(--ink); }
.mnc-close { flex: none; width: 32px; height: 32px; border: none; border-radius: 8px;
background: none; color: var(--ink3); font-size: 14px; cursor: pointer; }
.mnc-row { padding: 5px 0; border-bottom: 1px dashed var(--line); line-height: 1.5; }
.mnc-row:last-of-type { border-bottom: none; }
.mnc-k { color: var(--ink3); }
.mnc-go { margin-top: 10px; width: 100%; min-height: var(--tap); cursor: pointer;
border: 1px solid var(--gold); border-radius: 10px; background: var(--gold-soft);
color: var(--gold-text); font-family: var(--font-ui); font-size: 13.5px; }
/* легенда (О-5): красная точка, золотой пунктир, размер узла и цифра порядка
больше нигде не подписаны — читатель узнавал их только угадыванием */
.map-legend { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
padding: 8px 14px; padding-bottom: calc(8px + env(safe-area-inset-bottom));
border-top: 1px solid var(--map-frame); font-size: 11.5px; color: var(--ink3);
background: color-mix(in oklab, var(--surface) 62%, transparent); }
.map-legend-t { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; }
.mlg { display: inline-flex; align-items: center; gap: 7px; }
.mlg-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--map-node); }
.mlg-cur { background: var(--map-cur);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--map-cur) 30%, transparent); }
.mlg-hub { width: 15px; height: 15px; background: var(--map-hub); }
.mlg-line { width: 26px; height: 0; border-top: 2px dashed var(--gold); }
.mlg-num { padding: 0 5px; border: 1px solid var(--line2); border-radius: 4px;
font-size: 10px; font-variant-numeric: tabular-nums; }
@media (hover: hover) {
.hud-map-expand:hover { color: var(--gold-text); border-color: var(--gold); }
.map-tool:hover { color: var(--gold-text); border-color: var(--gold); }
.mnc-close:hover { color: var(--danger); }
.mnc-go:hover { filter: brightness(1.15); }
.map-full .map-node:hover .map-dot { stroke: color-mix(in oklab, var(--gold) 45%, transparent); stroke-width: 6; }
}
/* ============================================================
ПАНЕЛЬ (drawer): bottom sheet ↔ боковая
============================================================ */
.drawer-backdrop {
position: fixed; inset: 0; z-index: 65;
background: var(--scrim);
opacity: 0; pointer-events: none;
transition: opacity .3s;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
max-height: 82vh; max-height: 82dvh;
background: var(--surface);
border: 1px solid var(--line2); border-bottom: none;
border-radius: 18px 18px 0 0;
box-shadow: var(--shadow);
transform: translateY(105%);
transition: transform .3s ease;
display: flex; flex-direction: column;
padding-bottom: env(safe-area-inset-bottom);
}
.drawer.open { transform: translateY(0); }
.drawer-grip { flex: none; display: flex; justify-content: center; padding: 10px 0 4px; cursor: pointer; }
.drawer-grip span { width: 46px; height: 5px; border-radius: 999px; background: var(--line2); }
.drawer-head {
display: flex; align-items: center; justify-content: space-between;
border-bottom: 1px solid var(--line); padding: 0 8px 0 14px; flex: none;
}
.drawer-tabs { display: flex; gap: 2px; }
.drawer-tab {
font-family: var(--font-ui); font-size: 11.5px; font-weight: 600;
text-transform: uppercase; letter-spacing: .14em;
background: none; border: none; cursor: pointer; color: var(--ink3);
padding: 14px 10px 12px; min-height: 48px;
transition: color .15s, box-shadow .15s;
-webkit-tap-highlight-color: transparent;
}
.drawer-tab.active { color: var(--gold-text); box-shadow: inset 0 -2px 0 var(--gold); }
#drawer-close {
background: none; border: none; cursor: pointer;
font-size: 15px; color: var(--ink3);
padding: 12px 14px; min-height: var(--tap); min-width: var(--tap);
transition: color .15s;
}
#drawer-close:active { color: var(--danger); }
.drawer-panel { display: none; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.drawer-panel.active { display: block; }
@media (min-width: 900px) {
.drawer-backdrop { display: none; }
.drawer {
left: auto; top: 0; right: 0; bottom: 0;
width: min(430px, 96vw); max-height: none;
border-radius: 0; border: none; border-left: 1px solid var(--line2);
box-shadow: var(--shadow);
transform: translateX(105%);
padding-bottom: 0;
}
.drawer.open { transform: translateX(0); }
.drawer-grip { display: none; }
}
.pad { padding: 20px 22px calc(34px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .pad { padding: 20px 22px 34px; } }
.pad h4 {
font-size: 10.5px; font-weight: 600; text-transform: uppercase;
letter-spacing: .14em; color: var(--ink3); margin: 22px 0 8px;
display: flex; align-items: center; gap: 10px;
}
.panel-sub { font-size: 13px; color: var(--ink2); margin-bottom: 14px; }
/* память истории */
.digest {
background: var(--raised); border: 1px solid var(--line); border-radius: 12px;
padding: 15px 17px; font-size: 13.5px; margin-bottom: 8px;
}
.prose-small p { margin: 0 0 8px; text-indent: 0; font-family: var(--font-ui);
font-size: 13.5px; line-height: 1.6; color: var(--ink2); }
.prose-small b, .prose-small strong { color: var(--ink); }
.prose-small h1, .prose-small h2, .prose-small h3, .prose-small h4 {
font-family: var(--font-ui); font-size: 10.5px; font-weight: 600;
margin: 12px 0 6px; text-transform: uppercase; letter-spacing: .14em; color: var(--gold-text);
}
.prose-small h1::after { content: none; }
.prose-small .vignette { margin: 10px 0; font-size: 13px; }
.mem-group h4 .count {
display: inline-block;
border: 1px solid var(--line2);
border-radius: 999px; padding: 1px 8px; font-size: 10.5px; color: var(--ink3);
}
.mem-group h4::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.mem-entry { border-bottom: 1px dashed var(--line); padding: 12px 0; font-size: 13.5px; }
.mem-entry.inactive { opacity: .55; }
.mem-entry .mem-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.mem-entry .mem-head b { font-size: 14px; font-weight: 600; }
.mem-entry .stars { color: var(--gold); font-size: 11px; letter-spacing: .1em; white-space: nowrap; }
.mem-entry p { margin: 5px 0 4px; line-height: 1.55; color: var(--ink2); }
.mem-meta { font-size: 11.5px; color: var(--ink3); }
/* ============================================================
ОВЕРЛЕЙ ГЕНЕРАЦИИ
============================================================ */
.overlay {
position: fixed; inset: 0; z-index: 100;
background: var(--scrim);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
display: flex; align-items: center; justify-content: center;
padding: 20px;
}
.overlay-card {
background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
box-shadow: var(--shadow);
padding: 34px 24px; text-align: center; max-width: 440px; width: 100%;
}
@media (min-width: 720px) { .overlay-card { padding: 46px 54px; max-width: 480px; } }
/* орнамент оверлея: глиф-лист Turnleaves — страница, застывшая в перевороте */
.leaf-wrap { margin-bottom: 16px; }
.leaf-wrap .leaf {
width: 30px; height: 30px;
background: linear-gradient(135deg, var(--gold-text), var(--gold) 60%);
box-shadow: 0 10px 26px rgba(199,163,96,.25);
}
.leaf-wrap::after {
content: ""; display: block; margin: 12px auto 0;
height: 2px; width: 110px;
background: linear-gradient(90deg, var(--gold), transparent);
animation: inkflow 1.5s ease-in-out infinite;
}
@keyframes inkflow { 0% { transform: scaleX(.15); } 50% { transform: scaleX(1); } 100% { transform: scaleX(.15); } }
.stage { font-family: var(--font-serif); font-style: italic; font-size: 20px; margin-bottom: 4px; }
.stage-sub { font-size: 12.5px; letter-spacing: .08em; color: var(--ink3); min-height: 18px; }
.dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: dot 1.2s infinite ease-in-out; }
.dots span:nth-child(2) { animation-delay: .2s; }
.dots span:nth-child(3) { animation-delay: .4s; }
@keyframes dot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }
.overlay-error { text-align: center; }
.err-title { font-size: 18px; font-weight: 600; color: var(--danger); margin-bottom: 10px; }
#overlay-error-text {
background: color-mix(in oklab, var(--danger) 12%, transparent);
border: 1px solid var(--danger); border-radius: 10px;
color: var(--ink); font-size: 13.5px; padding: 12px 14px; margin: 0 0 18px;
text-align: left; white-space: pre-wrap;
max-height: 40vh; overflow-y: auto;
}
.err-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* карточки-факты фандома (экран ожидания) */
.fact-card {
margin: 26px auto 0; max-width: 480px; padding: 18px 22px;
border-radius: 14px; background: var(--raised);
border: 1px solid var(--line); text-align: center; position: relative; overflow: hidden;
}
.fact-card::after { content: ""; position: absolute; top: 0; left: -45%; width: 40%; height: 100%;
background: linear-gradient(100deg, transparent, rgba(255,255,255,.06), transparent);
animation: fact-shimmer 5.5s ease-in-out infinite; will-change: transform; }
@keyframes fact-shimmer { 0%, 60% { transform: translateX(0); } 100% { transform: translateX(460%); } }
.fact-kicker { display: block; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
color: var(--ink3); margin-bottom: 8px; }
.fact-kicker .leaf { width: 9px; height: 9px; margin-right: 7px; }
.fact-text { display: block; font-family: var(--font-serif); font-style: italic;
font-size: 14.5px; line-height: 1.55; color: var(--ink2); }
.fact-anim .fact-text { animation: fact-in .9s ease both; }
@keyframes fact-in { from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); } }
/* ------------ загрузочный экран главы (staging, дизайн Premium) */
.gen-staging {
display: flex; flex-direction: column; align-items: center; gap: 16px;
padding: 34px 0 8px; text-align: center;
animation: ff-fade-up .45s ease both;
}
.gen-stage-title { font-family: var(--font-serif); font-style: italic; font-size: 21px; }
.gen-progress { width: min(440px, 100%); }
.gen-progress-track { height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; }
.gen-progress-fill {
display: block; height: 100%; border-radius: 999px; background: var(--gold);
transition: width .6s ease;
}
.gen-steps { display: flex; justify-content: space-between; margin-top: 10px; padding: 0 2px; }
.gen-step { display: inline-flex; align-items: center; gap: 6px; }
.gen-step-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line2); transition: background .3s; }
.gen-step.done .gen-step-dot { background: var(--gold); }
.gen-step.current .gen-step-dot { background: var(--gold); animation: leaf-pulse 1.6s ease-in-out infinite; }
.gen-step-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); transition: color .3s; }
.gen-step.done .gen-step-label { color: var(--ink2); }
.gen-step.current .gen-step-label { color: var(--gold-text); }
.gen-caption {
font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
color: var(--ink3); font-variant-numeric: tabular-nums;
}
.gen-log { width: min(440px, 100%); margin: 0 auto; text-align: left; }
.gen-log-line {
display: flex; align-items: baseline; gap: 10px; padding: 6px 2px;
font-size: 13px; line-height: 1.5; color: var(--ink3);
}
/* Анимируется только СВЕЖАЯ строка: журнал перерисовывается целиком, и общая
анимация перезапускала бы fade-up у всех видимых строк при каждом переходе. */
.gen-log-line.current { color: var(--ink2); animation: ff-fade-up .35s ease both; }
.gen-log-icon { flex: none; font-size: 12px; color: var(--ink3); }
.gen-log-line.current .gen-log-icon { color: var(--gold-text); }
.gen-teaser {
width: min(440px, 100%); box-sizing: border-box; text-align: left;
border: 1px solid var(--gold); background: var(--gold-soft);
border-radius: 14px; padding: 15px 19px;
animation: ff-fade-up .4s ease both;
}
.gen-teaser-kicker {
font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
color: var(--gold-text); margin-bottom: 7px;
}
.gen-teaser-text {
font-family: var(--font-serif); font-style: italic;
font-size: 14.5px; line-height: 1.6; color: var(--ink);
}
.gen-fact-slot { width: min(440px, 100%); }
.gen-fact-slot .fact-card { margin-top: 0; max-width: none; }
.gen-minimize { display: flex; flex-direction: column; align-items: center; gap: 7px; margin-top: 8px; }
.gen-minimize-note { font-size: 12px; color: var(--ink3); font-style: italic; }
/* токен-стриминг (chat-bot стиль) */
.thinking { opacity: .7; font-style: italic; display: inline-flex; align-items: center; padding: .6em 0; color: var(--ink2); }
.thinking-dots { display: inline-flex; gap: .22em; margin-left: .45em; }
.thinking-dots i { width: .4em; height: .4em; border-radius: 50%; background: var(--gold); display: inline-block; animation: dot 1.2s infinite ease-in-out; }
.thinking-dots i:nth-child(2) { animation-delay: .2s; }
.thinking-dots i:nth-child(3) { animation-delay: .4s; }
.live-stage {
display: flex; width: fit-content; max-width: 100%;
margin: 22px auto 2px; padding: 8px 12px;
border: 1px solid var(--line); border-radius: 999px;
background: color-mix(in srgb, var(--paper) 88%, var(--gold) 12%);
font-size: 12.5px; line-height: 1.4;
}
.live-stage .thinking-label { white-space: normal; }
.live-stage .thinking-dots { flex: 0 0 auto; }
.type-cursor { display: inline-block; width: .5ch; height: 1.02em; margin-left: 2px; background: var(--gold); vertical-align: -.15em; animation: type-blink 1s steps(1) infinite; }
@keyframes type-blink { 50% { opacity: 0; } }
/* ============================================================
МОДАЛЬНЫЕ ОКНА (жалоба, профиль)
============================================================ */
.modal {
position: fixed; inset: 0; z-index: 120;
display: flex; align-items: center; justify-content: center;
background: var(--scrim);
padding: 16px;
}
.modal-card {
width: 100%; max-width: 560px;
max-height: calc(100vh - 32px); overflow-y: auto;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 16px;
box-shadow: var(--shadow);
padding: 20px;
}
@media (min-width: 720px) { .modal-card { padding: 24px 28px 26px; } }
.modal-head {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding-bottom: 14px; margin-bottom: 16px;
border-bottom: 1px solid var(--line);
}
.modal-head h3 { margin: 0; font-family: var(--font-serif); font-size: 20px; font-weight: 600; }
.modal-close {
flex: none; min-width: var(--tap); min-height: var(--tap);
border: none; border-radius: 10px;
background: transparent; color: var(--ink3);
font-family: var(--font-ui); font-size: 15px; cursor: pointer;
transition: color .15s;
}
.modal-close:active { color: var(--danger); }
.feedback-context { margin: 0 0 14px; color: var(--ink2); font-size: 13.5px;
font-family: var(--font-serif); font-style: italic; }
.feedback-card .field + .field { margin-top: 14px; }
.modal-actions {
display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
margin-top: 18px;
}
.modal-actions .primary, .modal-actions .ghost { min-width: 120px; }
/* «Выйти» прижат к левому краю ряда действий профиля — подальше от «Сохранить» */
.modal-actions #profile-logout { margin-right: auto; min-width: 0; }
/* ------------------------------------------------------------ профиль и достижения */
.profile-head { display: flex; align-items: center; gap: 18px; margin-bottom: 10px; }
.profile-head .avatar {
box-shadow: 0 0 0 1px var(--gold), 0 0 0 6px var(--gold-soft);
}
.profile-avatar-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.profile-avatar-actions .ghost { min-height: 38px; font-size: 12.5px; }
.profile-field { margin-top: 16px; }
.profile-field label {
display: block; font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: .08em; color: var(--ink3); margin-bottom: 6px;
}
.profile-field input, .profile-field textarea {
width: 100%; padding: 12px 14px; font-family: var(--font-ui); font-size: 14.5px;
border: 1px solid var(--line2); border-radius: 10px;
background: var(--raised); color: var(--ink);
}
.profile-field textarea { min-height: 90px; resize: vertical; line-height: 1.55; }
#profile-username { font-size: 13.5px; color: var(--ink3); }
/* достижения: витрина */
.profile-ach { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.ach-level { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-bottom: 10px; }
.ach-level-badge {
font-family: var(--font-serif); font-weight: 600; font-size: 17px;
}
.ach-level-sub { font-size: 12.5px; color: var(--ink3); font-variant-numeric: tabular-nums; margin-left: auto; }
.ach-bar { height: 3px; border-radius: 2px; background: var(--line2); overflow: hidden; margin-bottom: 16px; }
.ach-bar > span { display: block; height: 100%; border-radius: 2px; background: var(--gold); }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.ach-badge {
display: flex; flex-direction: column; align-items: center; gap: 6px;
text-align: center; padding: 16px 8px 13px; border-radius: 12px;
border: 1px solid var(--line2); background: var(--raised); position: relative;
}
.ach-badge.locked { border-style: dashed; background: transparent; opacity: .5; filter: grayscale(1); }
.ach-badge .ach-b-ico { font-size: 24px; line-height: 1; }
.ach-badge .ach-b-title { font-size: 11.5px; font-weight: 600; line-height: 1.25; }
.ach-badge .ach-b-prog { font-size: 10.5px; color: var(--ink3); font-variant-numeric: tabular-nums; }
.ach-badge.tier-silver { border-color: var(--line2); }
.ach-badge.tier-gold:not(.locked) {
border-color: color-mix(in oklab, var(--gold) 60%, transparent);
background: var(--gold-soft);
}
.ach-badge.tier-gold:not(.locked) .ach-b-ico { color: var(--gold-text); }
.ach-badge.tier-platinum:not(.locked) { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
/* ============================================================
ТОСТЫ
============================================================ */
#toasts {
position: fixed; left: 12px; right: 12px;
bottom: calc(88px + env(safe-area-inset-bottom));
z-index: 200;
display: flex; flex-direction: column; gap: 10px; align-items: stretch;
}
@media (min-width: 720px) {
#toasts { left: auto; right: 18px; bottom: 18px; max-width: 360px; }
}
.toast {
background: var(--raised); color: var(--ink);
border: 1px solid var(--line2); border-radius: 12px;
padding: 13px 16px; font-size: 13.5px; line-height: 1.45;
box-shadow: var(--shadow-soft);
cursor: pointer;
animation: toast-in .25s ease;
}
.toast.fade { opacity: 0; transition: opacity .4s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* тост-достижение */
.ach-toast {
display: flex; align-items: center; gap: 12px;
border-left: 3px solid var(--gold); max-width: 340px;
}
.ach-toast.tier-silver { border-left-color: var(--ink3); }
.ach-toast.tier-gold { border-left-color: var(--gold); }
.ach-toast .ach-ico { font-size: 28px; line-height: 1; }
.ach-toast .ach-txt { font-size: 13px; line-height: 1.4; }
.ach-toast .ach-xp { color: var(--gold-text); font-weight: 600; }
/* ============================================================
TTS-БАР (плавающий плеер озвучки)
============================================================ */
.tts-bar {
position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
transform: translateX(-50%);
z-index: 900; display: flex; align-items: center; gap: 8px;
width: min(560px, 94vw); padding: 10px 14px; border-radius: 999px;
background: var(--raised); color: var(--ink);
border: 1px solid var(--line2);
box-shadow: var(--shadow); font-size: 13px; font-family: var(--font-ui);
}
.tts-bar.hidden { display: none; }
body.tts-on #view-book { padding-bottom: 120px; }
.tts-bar button {
border: 1px solid var(--line2); background: transparent; color: var(--ink2);
width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 14px;
display: inline-flex; align-items: center; justify-content: center;
flex: none; padding: 0;
transition: border-color .15s, color .15s, background .15s;
}
.tts-bar button:active { border-color: var(--gold); color: var(--gold-text); }
.tts-bar .tts-main {
width: 42px; height: 42px;
background: var(--gold-soft); color: var(--gold-text); border-color: var(--gold);
}
/* кнопка скорости: текст «1,25×» в круг не влезает — авто-ширина, скруглённый прямоугольник */
.tts-bar .tts-rate {
width: auto; min-width: 44px; border-radius: 16px; padding: 0 10px;
font-size: 12px; font-weight: 600; color: var(--ink);
font-variant-numeric: tabular-nums;
}
.tts-bar .tts-rate:active { border-color: var(--gold); color: var(--gold-text); }
.tts-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.tts-msg {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-weight: 600; font-size: 12.5px;
}
.tts-track { display: block; padding: 4px 0; cursor: pointer; }
.tts-rail { display: block; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.tts-track-fill {
display: block; height: 100%; border-radius: 2px;
background: var(--gold); transition: width .3s ease;
}
.tts-spin {
width: 16px; height: 16px; flex: none; border-radius: 50%;
border: 2px solid var(--line2); border-top-color: var(--gold);
animation: tts-spin .8s linear infinite;
}
@keyframes tts-spin { to { transform: rotate(360deg); } }
.audio-bar .tts-spin { margin-right: 2px; }
/* ============================================================
АВАТАРКИ
============================================================ */
.avatar {
display: inline-block; width: 40px; height: 40px; border-radius: 50%;
background-size: cover; background-position: center;
flex: 0 0 auto; vertical-align: middle;
}
.avatar-sm { width: 32px; height: 32px; }
.avatar-lg { width: 76px; height: 76px; }
.avatar-ph {
display: inline-flex; align-items: center; justify-content: center; color: #fff;
font-family: var(--font-serif); font-weight: 600;
background: hsl(var(--ah, 30), 38%, 46%);
}
.avatar-sm.avatar-ph { font-size: 14px; } .avatar-lg.avatar-ph { font-size: 30px; }
/* ============================================================
AUTH-ГЕЙТ: сплит-экран (бренд-панель + карточка формы)
============================================================ */
#auth-gate {
position: fixed; inset: 0; z-index: 1000;
overflow-y: auto;
background: var(--bg);
display: grid; grid-template-columns: 1fr; align-items: stretch;
}
#auth-gate.hidden { display: none; }
.auth-brand {
display: none;
position: relative;
background: linear-gradient(160deg, #26221B, #171310 70%);
color: #EFE6D2;
flex-direction: column; justify-content: center; gap: 26px;
padding: clamp(32px, 7vw, 88px);
overflow: hidden;
}
.auth-brand::before {
content: ""; position: absolute; inset: 14px;
border: 1px solid rgba(239,230,210,.14); border-radius: 10px; pointer-events: none;
}
/* лого-лакап бренд-панели (§3hero): знак-страница 52×68 + словомарка 46px.
Панель всегда тёмная (свой градиент) — цвета знака здесь фиксированные,
как и остальные цвета панели, а не темовые токены. */
.auth-brand .tl-page {
--tl-w: 52px; --tl-h: 68px; --tl-bw: 2.5px; --tl-r: 5px; --tl-fold: 26px;
border-color: #EFE6D2;
}
.auth-brand .tl-fold { background: #C7A360; }
/* живой уголок из дизайна: наведение на панель подращивает загиб до 34px */
.auth-brand:hover .tl-fold { width: 34px; height: 34px; }
.auth-brand-logo {
font-family: var(--font-serif); font-size: clamp(34px, 3.6vw, 46px);
font-weight: 600; letter-spacing: .005em; line-height: 1.1;
}
.auth-brand-logo .brand-dot { color: #C7A360; }
.auth-brand-tagline {
margin-top: -10px;
font-family: var(--font-serif); font-style: italic;
font-size: 15px; color: rgba(239,230,210,.72);
}
.auth-brand-sub { margin: 0; font-size: 15.5px; line-height: 1.65; color: rgba(239,230,210,.72); max-width: 440px; }
.auth-brand-mark { color: #C7A360; font-size: 13px; letter-spacing: .4em; padding-left: .4em; }
.auth-pane {
display: flex; align-items: center; justify-content: center;
padding: clamp(24px, 6vw, 72px) clamp(16px, 5vw, 72px);
}
@media (min-width: 880px) {
#auth-gate { grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); }
.auth-brand { display: flex; }
.auth-card-head { display: none; }
}
.auth-card { width: min(400px, 100%); }
.auth-card-head { margin-bottom: 18px; }
.auth-card h1 { margin: 0 0 4px; font-family: var(--font-serif); font-size: 24px; font-weight: 600; }
.auth-card h1 .brand-dot { color: var(--gold); font-style: italic; }
.auth-card h1 .tl-page { --tl-w: 18px; --tl-h: 24px; --tl-fold: 9px; margin-right: 10px; vertical-align: -3px; }
.auth-card .auth-card-head .muted { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 14px; }
.auth-mode {
display: flex; gap: 6px; margin-bottom: 18px;
background: var(--surface); border: 1px solid var(--line);
border-radius: 12px; padding: 5px;
}
.auth-mode-tab {
flex: 1; min-width: 0; min-height: 44px;
border: none; border-radius: 9px; padding: 10px 8px;
background: transparent; color: var(--ink2);
font-family: var(--font-ui); font-size: 14px; font-weight: 600;
cursor: pointer; text-align: center;
transition: background .15s, color .15s;
}
.auth-mode-tab.active { background: var(--gold); color: var(--on-gold); }
.auth-card label { display: block; margin-bottom: 12px; font-size: 12px; font-weight: 600;
letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.auth-card input {
width: 100%; box-sizing: border-box; margin-top: 6px;
padding: 13px 15px; font-size: 15px; font-weight: 400;
letter-spacing: 0; text-transform: none;
background: var(--surface); border: 1px solid var(--line2); border-radius: 10px;
}
.auth-card .primary { width: 100%; margin-top: 6px; padding: 14px; font-size: 15.5px; }
.auth-card .linklike { display: block; margin: 8px auto 0; }
.auth-error { color: var(--danger); min-height: 18px; font-size: 13px; margin: 10px 0 0; }
.auth-guest { width: 100%; margin-top: 8px; min-height: 44px; }
.auth-card .fld-hint { display: block; font-size: 12px; font-weight: 400; font-style: normal;
letter-spacing: 0; text-transform: none;
color: var(--ink3); margin: 5px 0 0; line-height: 1.4;
/* резервируем 2 строки: смена текста подсказки при печати (1↔2 строки) больше
не меняет высоту карточки, иначе форма «дышит» на каждую клавишу. */
min-height: 2.4em; }
.auth-card .fld-hint.ok { color: var(--good); }
.auth-card .fld-hint.bad { color: var(--danger); }
.auth-card input.bad { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 14%, transparent); }
.auth-card input.ok { border-color: var(--good); }
.pw-strength { display: block; height: 4px; border-radius: 3px; margin-top: 8px;
background: var(--line2); overflow: hidden; }
/* место под шкалу зарезервировано ВСЕГДА: глобальный .hidden{display:none!important}
надо перебить (моё правило специфичнее) — держим box (display:block), прячем
лишь видимость. Появление шкалы при первом символе пароля больше не толкает
контент вниз, карточка не «дышит». */
.pw-strength.hidden { display: block !important; visibility: hidden; }
.pw-strength .pw-bar { display: block; height: 100%; width: 0; border-radius: 3px;
transition: width .2s, background .2s; }
.pw-weak .pw-bar { width: 33%; background: var(--danger); }
.pw-mid .pw-bar { width: 66%; background: var(--gold); }
.pw-strong .pw-bar { width: 100%; background: var(--good); }
.consent { margin: 16px 0 6px; display: flex; flex-direction: column; gap: 10px; }
.consent-row {
display: flex; gap: 10px; align-items: flex-start;
font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none;
line-height: 1.5; color: var(--ink2); margin: 0; cursor: pointer;
}
.consent-row b { color: var(--ink); }
/* Консент-чекбоксы НЕ должны наследовать стили текстового поля от .auth-card input
(padding 13px, border, border-radius, background, font-size 15px) — нативный
чекбокс с таким конфликтующим боксом перерисовывается рывком при клике (:checked/
:focus) на Windows. Сбрасываем до чистого нативного вида фиксированного размера. */
.consent-row input {
width: 17px; height: 17px; flex: none;
min-height: 0; margin: 2px 0 0; padding: 0;
border: none; border-radius: 0; background: none;
accent-color: var(--gold);
transition: none; box-shadow: none;
}
.consent-row a { color: var(--gold-text); }
.auth-legal-foot { font-size: 11.5px; color: var(--ink3); text-align: center; margin: 14px 0 0; }
.auth-legal-foot a { color: var(--gold-text); }
/* ============================================================
HOVER (только там, где есть курсор)
============================================================ */
@media (hover: hover) {
.tab:hover { color: var(--ink); }
.tab[data-view="new"]:hover { color: var(--on-gold); filter: brightness(1.08); }
.theme-toggle:hover { color: var(--gold-text); border-color: var(--gold); }
.primary:hover { filter: brightness(1.08); }
.ghost:hover { color: var(--ink); border-color: var(--ink3); }
.linklike:hover { color: var(--ink2); }
.rm:hover { color: var(--danger); border-color: var(--danger); }
.add-char-btn:hover { background: var(--gold-soft); border-color: var(--gold); }
.suggest:hover, .trope-toggle:hover { border-color: var(--gold); color: var(--gold-text); }
.suggest.on:hover, .trope-toggle.active:hover { color: var(--gold-text); }
.story-card:hover .book-cover { transform: translateY(-6px); box-shadow: var(--shadow); }
.card-del:hover { color: var(--danger); opacity: 1; }
.nav-arrow:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-text); }
.choice-card:hover:not(:disabled) {
transform: translateY(-2px);
border-color: var(--gold);
box-shadow: var(--shadow-soft);
}
.example-card:hover { border-color: var(--gold); }
.pack-card:hover, .preset-card:hover { border-color: var(--gold); }
.slug-display:hover { color: var(--gold-text); border-bottom-color: var(--gold); }
.sum-edit:hover { color: var(--gold-text); text-decoration: underline; }
.chip-x:hover { opacity: 1; }
#drawer-close:hover { color: var(--danger); }
.modal-close:hover { color: var(--danger); }
.step-btn:hover { background: var(--gold-soft); }
.wiz-dot:not(:disabled):hover .dot { border-color: var(--gold); }
.optional-summary:hover .opt-title { color: var(--ink); }
.comment-del:hover { color: var(--danger); }
.comment-send:hover, .custom-choice button:hover:not(:disabled),
.review-submit:hover:not(:disabled) { background: var(--gold-soft); }
.drawer-tab:hover { color: var(--gold-text); }
.preset-del:hover { background: var(--danger); color: #fff; }
#view-book .prose p:hover { background: var(--gold-soft); border-radius: 4px; }
.tts-bar button:hover { border-color: var(--gold); }
.userchip:hover .avatar { box-shadow: 0 0 0 2px var(--gold); }
.ghost.danger:hover { color: var(--danger); border-color: var(--danger); }
.rev-rate-stars .st:hover { color: var(--gold); }
.write-own-link:hover { color: var(--gold-text); }
.assist-hide:hover { color: var(--ink2); }
.card-fork:hover { filter: brightness(1.12); }
.create-manual-card:hover:not(:disabled) { border-color: var(--gold); background: var(--gold-soft); }
.img-lightbox-close:hover { color: var(--danger); border-color: var(--danger); }
.lib-hero-cover:hover .book-cover { transform: translateY(-5px) rotate(-.4deg); box-shadow: var(--shadow); }
.add-lib-btn:hover { filter: brightness(1.12); }
.ba-btn:hover:not(:disabled) { color: var(--gold-text); }
.bm-item:hover:not(:disabled) { background: var(--raised); }
.bm-item.bm-danger:hover { color: var(--danger); }
.assist-bar .assist-act:hover:not(:disabled) {
color: var(--gold-text); border-color: var(--gold); background: var(--gold-soft);
}
}
/* ============================================================
МОБИЛЬНЫЕ УТОЧНЕНИЯ
============================================================ */
@media (max-width: 719px) {
/* панель книги на телефоне: группа действий во всю ширину, навигация — своей строкой */
.book-actions { width: 100%; order: 0; justify-content: space-between; }
.ba-btn { font-size: 12.5px; padding: 8px 10px; }
.add-lib-btn { width: 100%; order: -1; }
.book-menu { max-width: min(280px, 88vw); }
.book-bar { margin-bottom: 10px; gap: 8px; }
.chap-nav { order: 5; }
}
@media (max-width: 700px) {
/* iOS не зумит поля при фокусе, если шрифт ≥ 16px */
input, select, textarea { font-size: 16px !important; }
}
/* ================= Модерация (Wave 1) ================= */
.view-head-actions { display: flex; gap: 8px; align-items: center; }
.mod-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.mod-empty { color: var(--ink2); padding: 24px 4px; text-align: center; }
.mod-case {
display: grid; gap: 6px; width: 100%; text-align: left; cursor: pointer;
background: var(--surface); border: 1px solid var(--line2);
border-radius: 12px; padding: 14px 16px; color: inherit; font: inherit;
transition: border-color .15s ease, box-shadow .15s ease;
}
.mod-case:hover { border-color: var(--gold); box-shadow: var(--shadow-soft); }
.mod-case-title { font-weight: 600; }
.mod-case-reason { color: var(--ink2); font-size: .9em; }
.mod-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.mod-badge {
font-size: .72em; padding: 2px 8px; border-radius: 999px;
background: var(--state-neutral-bg); color: var(--ink2); white-space: nowrap;
}
.mod-badge.s-pending, .mod-badge.risk-medium { background: var(--state-warn-bg); color: var(--state-warn-ink); }
.mod-badge.s-quarantined, .mod-badge.s-escalated,
.mod-badge.risk-high, .mod-badge.risk-critical { background: var(--state-danger-bg); color: var(--state-danger-ink); }
.mod-badge.s-approved { background: var(--state-good-bg); color: var(--state-good-ink); }
.mod-badge.s-hidden, .mod-badge.s-rejected { background: var(--state-neutral-bg); color: var(--state-neutral-ink); }
.mod-badge.cat { background: var(--state-neutral-bg); color: var(--state-neutral-ink); }
.mod-case.active { border-color: var(--gold); background: var(--gold-soft); }
/* --- рабочее место модератора v2 (2026-07-24): список слева, ревью справа --- */
.mod-split { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 18px; margin-top: 12px;
align-items: start; }
.mod-split .mod-list { margin-top: 0; max-height: calc(100vh - 220px); overflow-y: auto; padding-right: 4px; }
.mod-detail { position: sticky; top: 84px; max-height: calc(100vh - 120px); overflow-y: auto; }
.mod-detail-empty { border: 1px dashed var(--line2); border-radius: 14px; padding: 60px 24px;
text-align: center; color: var(--ink3); }
.mod-detail-empty span { font-size: 30px; display: block; margin-bottom: 12px; color: var(--gold); opacity: .6; }
.mod-detail-empty p { margin: 0; }
.mod-detail-card { border: 1px solid var(--line2); border-radius: 14px; padding: 18px 20px; background: var(--surface); }
.mod-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.mod-detail-head h3 { margin: 0; font-size: 1.15em; }
.mod-detail-head #mod-detail-close { flex: none; padding: 4px 10px; }
.mod-meta-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mod-tag { font-size: .74em; padding: 3px 9px; border-radius: 999px;
background: var(--state-neutral-bg); color: var(--ink2); white-space: nowrap; }
.mod-tag.cat { background: var(--state-neutral-bg); color: var(--state-neutral-ink); }
.mod-tag.warn { background: var(--state-warn-bg); color: var(--state-warn-ink); }
.mod-tag.risk-high, .mod-tag.risk-critical { background: var(--state-danger-bg); color: var(--state-danger-ink); }
.mod-tag.risk-medium { background: var(--state-warn-bg); color: var(--state-warn-ink); }
.mod-warn-banner { margin: 12px 0; padding: 10px 12px; border-radius: 10px;
background: var(--state-warn-bg); color: var(--state-warn-ink); font-size: .9em; }
.mod-verdict { margin: 12px 0; padding: 11px 13px; background: var(--gold-soft); border-radius: 10px; line-height: 1.5; }
.mod-verdict .note, .mod-work-note, .mod-chapter-body .mod-clip { color: var(--ink3); font-size: .85em; }
.mod-block { margin-top: 14px; }
.mod-block h4 { margin: 0 0 6px; font-size: .82em; text-transform: uppercase; letter-spacing: .06em; color: var(--ink3); }
.mod-block ul { margin: 0; padding-left: 18px; }
.mod-block li { margin: 3px 0; }
/* сама работа — читаемые главы */
.mod-work-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mod-open-book { font-size: .85em; white-space: nowrap; }
.mod-work-note { margin: 4px 0 8px; }
.mod-work-empty { color: var(--ink3); font-style: italic; padding: 8px 0; }
.mod-chapter { border: 1px solid var(--line); border-radius: 10px; margin-top: 8px; background: var(--bg); overflow: hidden; }
.mod-chapter > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; font-size: .92em;
list-style: none; display: flex; align-items: center; gap: 8px; }
.mod-chapter > summary::-webkit-details-marker { display: none; }
.mod-chapter > summary::before { content: "▸"; color: var(--gold); transition: transform .15s ease; }
.mod-chapter[open] > summary::before { transform: rotate(90deg); }
.mod-chapter-body { padding: 4px 16px 16px; font-family: var(--font-serif); font-size: 15px;
line-height: 1.72; color: var(--ink); max-height: 460px; overflow-y: auto; }
.mod-chapter-body p { margin: 0 0 .8em; }
/* решение */
.mod-decide { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.mod-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; align-items: center; }
.mod-actions-primary, .mod-actions-secondary { display: flex; flex-wrap: wrap; gap: 8px; }
.mod-actions-secondary { margin-left: auto; }
.mod-act.primary { background: var(--gold); border-color: var(--gold); color: var(--on-gold); font-weight: 600; }
.mod-act.primary:hover { filter: brightness(1.08); }
.mod-act.danger { border-color: var(--state-danger-ink); color: var(--state-danger-ink); }
.mod-act.danger:hover { background: var(--state-danger-bg); }
@media (max-width: 820px) {
.mod-split { grid-template-columns: 1fr; }
.mod-detail { position: static; max-height: none; }
.mod-split .mod-list { max-height: none; }
.mod-actions-secondary { margin-left: 0; }
}
/* Пилюля статуса модерации на карточке владельца */
.mod-pill {
font-size: .72em; padding: 2px 8px; border-radius: 999px;
background: var(--state-warn-bg); color: var(--state-warn-ink);
}
.mod-pill.s-quarantined, .mod-pill.s-hidden, .mod-pill.s-rejected {
background: var(--state-danger-bg); color: var(--state-danger-ink);
}
/* Statement of reasons + обжалование (Wave 2) — баннер владельцу снятой книги */
.mod-notice {
display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
margin: 10px 0; padding: 12px 15px; border-radius: 10px;
background: var(--state-danger-bg); border: 1px solid var(--state-danger-ink); color: var(--state-danger-ink);
}
.mod-notice-body { flex: 1 1 260px; line-height: 1.5; }
/* §9.3: инфо-вариант (правки на ре-ревью, книга опубликована) — не тревожный */
.mod-notice.info { background: var(--state-info-bg); border-color: var(--state-info-ink); color: var(--state-info-ink); }
.mod-notice-tag { font-size: .85em; opacity: .85; white-space: nowrap; }
.mod-notice .ghost { border-color: var(--state-danger-ink); color: var(--state-danger-ink); background: transparent; }
/* Редактор главы + ИИ-ассист (авторское письмо, дизайн Premium) */
.editor-card { max-width: 860px; width: min(96vw, 860px); }
.editor-card #editor-chapter-title { font-family: var(--font-serif); font-size: 16px; }
.editor-card #editor-text {
width: 100%; min-height: 40vh; resize: vertical;
font-family: var(--font-serif); font-size: 16px; line-height: 1.7;
}
.editor-card #editor-count { text-align: right; font-variant-numeric: tabular-nums; }
.editor-draft-note { margin-left: auto; flex: none; }
.assist-panel {
margin: 12px 0 4px; padding: 15px 17px;
background: var(--raised); border: 1px solid var(--line); border-radius: 14px;
}
.assist-panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.assist-glyph {
flex: none; width: 26px; height: 26px; border-radius: 50%;
background: var(--gold-soft); border: 1px solid var(--gold); color: var(--gold-text);
display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}
.assist-title { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.assist-note { font-size: 12px; color: var(--ink3); font-style: italic; }
.assist-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.assist-bar .assist-act { font-size: 12.5px; padding: 8px 14px; min-height: 36px; }
.assist-act-glyph { opacity: .65; margin-right: 7px; }
.assist-bar #assist-instruction {
flex: 1 1 190px; min-width: 150px; font-size: 12.5px;
background: var(--surface); border-radius: 999px; padding: 8px 15px; min-height: 36px;
}
.assist-status:empty { display: none; }
.assist-status { display: block; margin-top: 8px; }
.assist-preview {
margin-top: 14px; padding: 14px 18px; border-radius: 12px;
background: var(--surface); border: 1px solid var(--line2); border-left: 3px solid var(--gold);
animation: ff-fade-up .25s ease both;
}
.assist-preview-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.assist-preview-kicker { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); }
.assist-preview-note { font-size: 11.5px; color: var(--ink3); font-style: italic; }
.assist-preview-text {
font-family: var(--font-serif); font-style: italic; font-size: 15px; line-height: 1.68;
white-space: pre-wrap; max-height: 32vh; overflow-y: auto;
}
.assist-preview-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.assist-preview-actions .primary,
.assist-preview-actions .ghost { min-height: 36px; padding: 8px 16px; font-size: 12.5px; }
.assist-hide {
margin-left: auto; background: none; border: none; color: var(--ink3);
font-family: var(--font-ui); font-size: 12.5px; cursor: pointer;
text-decoration: underline; text-underline-offset: 3px; padding: 6px 4px; min-height: 36px;
}
.write-own-block { margin: 18px 0 14px; text-align: center; }
.write-own-link {
background: none; border: none; color: var(--ink3);
font-family: var(--font-ui); font-size: 13.5px; cursor: pointer;
text-decoration: underline; text-underline-offset: 4px;
padding: 10px 8px; min-height: var(--tap);
transition: color .15s;
}
.write-own-link:active { color: var(--gold-text); }
/* Финал мастера (макет, line 731-740): обе кнопки создания — одна колонка
min(420px, 100%) по центру, одинаковой высоты с карточкой (68px). */
#create.cta {
display: block; width: min(420px, 100%); margin: 0 auto;
min-height: 68px; padding: 17px 26px; border-radius: 12px;
}
#create.cta + .create-manual-card { margin-top: 10px; }
/* Карточка «первую главу напишу сам» (макет: финал мастера, ✒ + подзаголовок).
Живёт в двух местах: шаг «Итог» мастера и пустая книга (editor.js). */
.create-manual-card {
width: min(420px, 100%); box-sizing: border-box;
display: flex; align-items: center; gap: 14px; text-align: left;
background: transparent; border: 1px solid var(--line2); border-radius: 12px;
padding: 12px 18px 12px 12px; margin: 0 auto;
color: var(--ink); font-family: var(--font-ui); cursor: pointer;
transition: border-color .15s, background .15s, transform .15s;
}
.create-manual-card:active { transform: translateY(1px); }
.create-manual-card:disabled { opacity: .6; cursor: default; }
.cmc-glyph {
flex: none; width: 42px; height: 42px; border-radius: 50%;
background: var(--gold-soft); border: 1px solid var(--gold); color: var(--gold-text);
display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
}
.cmc-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cmc-title { font-size: 15px; font-weight: 600; }
.cmc-sub { font-size: 12.5px; color: var(--ink3); }
.cmc-arrow { margin-left: auto; color: var(--gold-text); font-size: 15px; }
/* Боковая панель поиска каталога (справа; запрос + include/exclude теги) */
.search-open-btn {
display: inline-flex; align-items: center; gap: 7px;
font-family: var(--font-ui); font-size: 13.5px; font-weight: 600;
padding: 10px 16px; border-radius: 10px; cursor: pointer;
border: 1px solid var(--line2); background: var(--surface); color: inherit;
transition: border-color .15s, box-shadow .15s;
}
.search-open-btn:hover { border-color: var(--gold); }
.search-badge {
min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
background: var(--gold); color: var(--on-gold);
font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.search-panel {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 80; /* НАД drawer-backdrop (65) — иначе тапы по панели ловил бэкдроп */
width: min(380px, 94vw);
background: var(--surface); border-left: 1px solid var(--line2);
box-shadow: var(--shadow);
border-radius: 14px 0 0 14px;
padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
display: flex; flex-direction: column; gap: 12px;
transform: translateX(105%); transition: transform .28s cubic-bezier(.2,.8,.25,1);
overflow-y: auto;
}
.search-panel.open { transform: none; }
.search-panel-head { display: flex; align-items: center; justify-content: space-between; }
.search-panel-head h3 { margin: 0; font-family: var(--font-serif); font-size: 20px; }
.sp-section { display: flex; flex-direction: column; gap: 8px; }
.sp-title {
font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
color: var(--ink2); display: flex; align-items: center; gap: 6px; /* «+»/«−» вплотную */
}
.sp-title .sp-mode { margin-left: auto; } /* сегмент И/ИЛИ — к правому краю */
.sp-title.inc-title::before { content: "＋"; color: var(--gold); }
.sp-title.exc-title::before { content: "−"; color: var(--state-danger-ink); }
.sp-chips { display: flex; flex-wrap: wrap; gap: 5px; min-height: 22px; }
.sp-none { font-size: 12px; color: var(--ink2); opacity: .6; }
.sp-mode { display: inline-flex; border: 1px solid var(--line2); border-radius: 999px; overflow: hidden; }
.sp-mode-btn {
font-family: var(--font-ui); font-size: 11px; font-weight: 600; text-transform: none;
letter-spacing: 0; padding: 4px 10px; border: 0; background: transparent;
color: var(--ink2); cursor: pointer;
}
.sp-mode-btn.active { background: var(--gold); color: var(--on-gold); }
.sp-tag-add { position: relative; }
.sp-tag-add input {
width: 100%; font-size: 13.5px; padding: 8px 11px;
border: 1px solid var(--line2); border-radius: 9px; background: transparent; color: inherit;
}
.sp-suggest {
position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5;
background: var(--surface); border: 1px solid var(--line2);
border-radius: 10px; box-shadow: var(--shadow-soft);
max-height: 220px; overflow-y: auto; display: flex; flex-direction: column;
}
.sp-suggest button {
text-align: left; font-family: var(--font-ui); font-size: 13px;
padding: 8px 12px; border: 0; background: transparent; color: inherit; cursor: pointer;
display: flex; justify-content: space-between; gap: 8px;
}
.sp-suggest button:hover { background: var(--gold-soft); }
.sp-tags { display: flex; flex-wrap: wrap; gap: 6px; max-height: 46vh; overflow-y: auto; padding: 2px; }
.tag-chip.sp { font-size: 12.5px; padding: 6px 11px; }
.tag-chip.sp .sp-count { opacity: .55; font-size: 10.5px; }
.tag-chip.inc, .tag-chip.sp.inc {
background: var(--gold-soft); border-color: var(--gold); color: var(--gold-text);
}
.tag-chip.inc .sp-count { opacity: .8; }
.tag-chip.exc, .tag-chip.sp.exc {
background: color-mix(in oklab, var(--danger) 10%, transparent);
border-color: color-mix(in oklab, var(--danger) 55%, transparent);
color: var(--danger);
text-decoration: line-through; text-decoration-thickness: 1px;
}
.tag-chip.excluded {
background: color-mix(in oklab, var(--danger) 10%, transparent);
border-color: color-mix(in oklab, var(--danger) 55%, transparent);
color: var(--danger);
}
.tag-chip.excluded button, .tag-chip.active button {
border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 11px; padding: 0 0 0 2px;
}
.sp-hint { margin: -4px 0 8px; font-size: 12px; color: var(--ink3); font-style: italic; }
.sp-summary { font-size: 13px; color: var(--ink2); }
.search-panel-actions { display: flex; gap: 8px; margin-top: auto; }
.search-panel-actions .primary { flex: 1; }
/* Теги из конструктора: чипы на карточках, в читалке и фильтр каталога */
.card-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 0 2px; }
/* Язык на карточке (дизайн 07-24): тонкий текст справа вместо 🌐-пилюли */
.card-lang { margin-left: auto; background: none; border: none; padding: 2px 0 2px 8px;
font-family: var(--font-ui); font-size: 11.5px; color: var(--ink3); cursor: pointer;
text-underline-offset: 3px; }
.card-lang:hover { color: var(--gold-text); text-decoration: underline dotted rgba(199,163,96,.6); }
.card-lang.static { cursor: default; }
.card-lang.static:hover { color: var(--ink3); text-decoration: none; }
.tag-chip {
display: inline-flex; align-items: center; gap: 4px;
font-family: var(--font-ui); font-size: 11.5px; line-height: 1;
padding: 5px 11px; border-radius: 999px;
background: var(--raised); color: var(--ink3);
border: 1px solid var(--line2); cursor: pointer;
transition: color .15s, border-color .15s;
}
button.tag-chip:hover { color: var(--gold-text); border-color: var(--gold); }
.tag-chip.static { cursor: default; }
/* фандом теперь кликабельный фильтр (2026-07-24): pointer наследуется от базы;
default остаётся только у некнопочных span-чипов */
.tag-chip.fandom { color: var(--ink2); }
span.tag-chip.fandom { cursor: default; }
/* Чип тональности в каталоге/профиле (класс .rating исторический — это ТОНАЛЬНОСТЬ,
а не читательские звёзды, у тех .card-rating). 2026-07-28: содержимое стало
словом вместо буквы — трекинг сжат, перенос запрещён. */
.tag-chip.rating {
background: var(--gold); border-color: var(--gold); color: var(--on-gold);
cursor: default; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
}
.tag-chip.warn {
background: transparent; color: var(--danger);
border-color: color-mix(in oklab, var(--danger) 45%, transparent); cursor: default;
}
.tag-chip.active { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-text); }
.tag-chip.active button {
border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 11px; padding: 0 0 0 2px;
}
/* Строка тегов живёт в ТОЙ ЖЕ колонке, что и лист книги (920px по центру) и
НЕ прилипает к HUD-плашке под ней: в макете между ними 16px воздуха. */
.book-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; row-gap: 9px; max-width: 920px; margin: 10px auto 16px; }
/* --- дизайн 07-24: пейринг-чип + байлайн автор/язык справа ------------------ */
.tag-chip.pairing { background: var(--raised); gap: 6px; color: var(--ink2); }
.tag-chip.pairing .pair-x { color: var(--gold); font-size: 11px; }
.tag-byline { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; white-space: nowrap; }
.byline-author { display: inline-flex; align-items: center; gap: 7px; background: none; border: none;
padding: 2px 0; font-family: var(--font-ui); font-size: 12.5px; color: var(--ink2); cursor: pointer; }
.byline-author:hover { color: var(--gold-text); }
.byline-author b { color: var(--ink); font-weight: 500; }
.byline-ava { width: 20px; height: 20px; border-radius: 50%; background: var(--gold-soft);
border: 1px solid rgba(199,163,96,.45); color: var(--gold-text); font-size: 11px; font-weight: 600;
display: inline-flex; align-items: center; justify-content: center; }
.byline-dot { color: var(--ink3); font-size: 12px; }
.byline-lang { background: none; border: none; padding: 2px 0; font-family: var(--font-ui);
font-size: 12.5px; color: var(--ink3); cursor: pointer; text-underline-offset: 3px; }
.byline-lang:hover { color: var(--gold-text); text-decoration: underline dotted rgba(199,163,96,.6); }
.cat-active-filter { margin: 4px 0 10px; font-size: 13px; color: var(--ink2); }
.mod-warn { color: var(--state-danger-ink); }
/* Переключатель режимов страницы модератора (кейсы/апелляции) */
.mod-modes { display: inline-flex; gap: 4px; }
.tab-mini {
font: inherit; font-size: .85em; padding: 5px 12px; border-radius: 999px;
border: 1px solid var(--line2); background: transparent; color: var(--ink2); cursor: pointer;
}
.tab-mini.active { border-color: var(--gold); color: inherit; font-weight: 600; }
.mod-case.appeal .mod-actions { margin-top: 4px; }
/* ------------------------------------------------------------ мобильные уточнения (2026-07-08)
Особое внимание телефону: шапка с CTA в один ряд, полноэкранная панель поиска,
тач-таргеты (--tap), полноэкранный редактор главы. */
@media (max-width: 719.9px) {
/* Авторизованная шапка: CTA остаётся рядом с профилем. */
.topbar { gap: 0 10px; }
.topbar-right { gap: 8px; }
.topbar-right .tab[data-view="new"] { margin: 0; padding: 9px 12px; font-size: 12.5px; }
.brand { font-size: 18px; }
/* Чипы биллинга компактнее — бренд и правый блок помещаются в одну строку
(скрин владельца 2026-07-18: пилюля/чипы распирали шапку). */
.billing-chips { gap: 5px; margin-right: 6px; }
.credits-chip { padding: 4px 9px; font-size: 12px; min-height: 28px; }
.quota-pill { padding: 6px 9px; font-size: 11.5px; gap: 4px; }
/* на телефоне пилюля — только цифры («Premium · »/«глав» скрыты) */
.quota-pill span { display: none; }
.theme-toggle { width: 34px; height: 34px; }
.topbar-right { padding: 8px 0; }
/* CTA «Новая история» на телефоне переезжает в ряд вкладок (app.js
relocateNewStoryCta) — справа от Библиотеки/Каталога */
.topbar nav .tab[data-view="new"] {
flex: none; align-self: center; margin: 6px 0 6px auto;
padding: 8px 13px; font-size: 12.5px;
}
/* Гостевая шапка — одна строка: бренд, каталог, тема и вход. Приватные
вкладки скрывает auth.js, поэтому здесь нет пустой второй строки. */
body.guest-mode .topbar {
flex-wrap: nowrap;
gap: 8px;
padding-inline: 12px;
}
body.guest-mode .topbar nav {
order: 0;
width: auto;
flex: 0 0 auto;
margin-left: auto;
border-top: 0;
}
body.guest-mode .topbar nav .tab {
flex: none;
min-height: var(--tap);
padding: 10px 8px;
}
body.guest-mode .topbar-right {
margin-left: 0;
gap: 6px;
padding-block: 8px;
}
body.guest-mode .theme-toggle { width: var(--tap); height: var(--tap); }
body.guest-mode .header-login { min-height: var(--tap); padding-inline: 10px; }
/* панель поиска: полноэкранный лист справа */
.search-panel { width: 100%; border-radius: 0; border-left: none; }
.search-panel-actions .primary, .search-panel-actions .ghost { min-height: var(--tap); }
.sp-suggest button { min-height: 42px; align-items: center; }
.sp-mode-btn { padding: 7px 12px; }
.search-open-btn { min-height: var(--tap); flex: 1; justify-content: center; }
/* теги: пальце-дружелюбные чипы */
.tag-chip { padding: 6px 11px; font-size: 12px; }
.tag-chip.sp { padding: 8px 12px; font-size: 13px; }
/* редактор главы: полноэкранный, текст тянется на всю высоту */
.modal:has(.editor-card) { padding: 0; align-items: stretch; }
.editor-card {
max-width: none; height: 100dvh; max-height: 100dvh;
border-radius: 0; display: flex; flex-direction: column;
}
.editor-card .editor-text-field { flex: 1; display: flex; flex-direction: column; }
.editor-card .editor-text-field span { flex: none; }
.editor-card #editor-text { flex: 1; min-height: 180px; }
.assist-panel { padding: 12px; }
.editor-draft-note { display: none; } /* на телефоне шапке модалки тесно */
/* герой «Вы остановились здесь»: кнопки в ряд на всю ширину, обложка меньше */
.lib-hero { padding: 16px; gap: 16px; }
.lib-hero-cover { width: 110px; }
.lib-hero-actions > button { flex: 1 1 auto; }
}
/* Телефоны 380–430px (Samsung/Pixel 384–412 — самая массовая полоса): слово
«Turnleaves» скрывается только с 380px, а ряд «бренд + ☾ + искры + квота +
профиль» просит ≈395px — шапка вставала в ТРИ ряда: бренд один в строке,
чипы отдельной строкой справа, вкладки третьей (скрин владельца 2026-07-26).
Ужимаем ряд на ~30px вместо того, чтобы прятать бренд. */
@media (max-width: 429.9px) {
.topbar { padding-inline: 8px; gap: 0 8px; }
.brand { font-size: 17px; gap: 6px; }
.billing-chips { gap: 4px; margin-right: 4px; }
.credits-chip { padding: 4px 7px; }
.quota-pill { padding: 6px 7px; }
.theme-toggle { width: 32px; height: 32px; }
}
/* Очень узкие экраны: у пилюли квоты остаются только цифры («глав» скрываем),
сег-контрол языка в мастере переносится аккуратно. */
@media (max-width: 480px) {
.topbar nav .tab[data-view="new"] { padding: 7px 10px; font-size: 12px; }
.seg-lang { flex-wrap: wrap; }
.seg-lang label { flex: 1 1 30%; }
}
@media (max-width: 379.9px) {
/* совсем узкие экраны: остаётся знак-страница без слова */
.brand-word { display: none; }
}
/* ============================================================
Биллинг (2026-07-17): витрина тарифов, пейволл, искры, замочки.
Токены темы — как во всём файле (gold/surface/ink).
============================================================ */
/* --- чипы в шапке ------------------------------------------------------- */
.billing-chips { display: inline-flex; align-items: center; gap: 8px; margin-right: 10px; }
.credits-chip {
border: 1px solid var(--line2); background: var(--surface); color: var(--gold-text);
border-radius: 999px; padding: 5px 12px; font: 600 13px var(--font-ui);
cursor: pointer; min-height: 30px;
}
.credits-chip:hover { border-color: var(--gold); }
.go-premium-btn {
border: none; border-radius: 999px; padding: 6px 14px; min-height: 30px;
background: linear-gradient(135deg, var(--gold), #A98443); color: var(--on-gold);
font: 700 13px var(--font-ui); cursor: pointer;
box-shadow: 0 2px 10px rgba(199,163,96,.35);
}
.go-premium-btn:hover { filter: brightness(1.07); }
.tier-chip {
border-radius: 999px; padding: 5px 12px; font: 700 12px var(--font-ui);
background: var(--gold-soft); color: var(--gold-text); border: 1px solid var(--gold);
}
.tier-chip-ultra { background: linear-gradient(135deg, var(--gold-soft), rgba(199,163,96,.28)); }
/* --- баннер «подтвердите почту» ---------------------------------------- */
.verify-banner {
display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
padding: 9px 16px; background: var(--state-warn-bg); color: var(--state-warn-ink);
border-bottom: 1px solid var(--line); font: 500 13.5px var(--font-ui);
}
.verify-banner.pulse { animation: vb-pulse 0.8s ease 2; }
@keyframes vb-pulse { 50% { background: rgba(199,163,96,.35); } }
.vb-btn {
border: 1px solid var(--gold); background: transparent; color: var(--gold-text);
border-radius: 8px; padding: 5px 12px; font: 600 12.5px var(--font-ui); cursor: pointer;
}
.vb-btn:hover { background: var(--gold-soft); }
/* --- модалка тарифов ---------------------------------------------------- */
.plans-card { max-width: 980px; width: min(980px, calc(100vw - 24px)); }
.pw-reason {
display: flex; gap: 10px; align-items: center; margin: 4px 0 16px;
background: var(--gold-soft); border: 1px solid var(--gold);
border-radius: 12px; padding: 12px 16px; color: var(--ink); font: 500 14px var(--font-ui);
}
.pw-reason-ico { font-size: 20px; }
.plans-toggle {
display: flex; gap: 6px; justify-content: center; margin: 2px 0 18px;
background: var(--raised); border-radius: 999px; padding: 4px; width: fit-content;
margin-inline: auto; border: 1px solid var(--line);
}
.pt-btn {
border: none; background: transparent; color: var(--ink2); border-radius: 999px;
padding: 7px 18px; font: 600 13.5px var(--font-ui); cursor: pointer; min-height: 34px;
}
.pt-btn.active { background: var(--gold); color: var(--on-gold); }
.pt-save { font-size: 11px; opacity: .85; margin-left: 4px; }
.plans-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px; margin-bottom: 22px;
}
/* Карточки страницы тарифов (дизайн «Fansfics Premium»: квота-бокс со шкалой) */
.plan-card {
position: relative; border: 1px solid var(--line); border-radius: 16px;
background: var(--surface); padding: 22px 20px 20px; display: flex; flex-direction: column;
}
.plan-card.hot { border-color: var(--gold); box-shadow: var(--shadow-soft); }
.plan-card.current { border-color: color-mix(in oklab, var(--good) 55%, transparent); }
.plan-ribbon {
position: absolute; top: -11px; left: 50%; transform: translateX(-50%); white-space: nowrap;
background: var(--gold); color: var(--on-gold); border-radius: 999px; padding: 4px 12px;
font: 700 10px var(--font-ui); letter-spacing: .1em; text-transform: uppercase;
}
.plan-namerow { display: flex; align-items: baseline; gap: 9px; }
.plan-name { font: 600 21px var(--font-serif); color: var(--ink); }
.plan-desc { font: 400 11.5px var(--font-ui); color: var(--ink3); line-height: 1.4; margin-top: 3px; }
.plan-price { font: 600 34px var(--font-serif); color: var(--ink); letter-spacing: -.01em; margin-top: 12px; }
.plan-permo { font: 500 13px var(--font-ui); color: var(--ink3); margin-left: 4px; }
.plan-pricenote { font: 400 11.5px var(--font-ui); color: var(--ink3); margin-top: 3px; min-height: 15px; }
.plan-quota {
margin: 16px 0 14px; padding: 12px 14px; background: var(--raised);
border: 1px solid var(--line); border-radius: 10px;
}
.pqx-top { display: flex; align-items: baseline; gap: 6px; }
.pqx-num { font: 600 21px var(--font-serif); color: var(--gold-text); }
.pqx-lbl { font: 400 12px var(--font-ui); color: var(--ink2); }
.pqx-bar { display: block; height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 8px; }
.pqx-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--gold); }
.pqx-sub { font: 400 11.5px var(--font-ui); color: var(--ink3); margin-top: 7px; }
.plan-feats2 { display: flex; flex-direction: column; gap: 8px; flex: 1; margin-bottom: 16px; }
.plan-feat { display: flex; gap: 9px; font: 400 13px var(--font-ui); line-height: 1.45; color: var(--ink2); }
.pf-check { flex: none; color: var(--gold-text); font-size: 11px; padding-top: 2px; }
.plan-cta {
border: none; border-radius: 11px; padding: 13px; font: 600 14px var(--font-ui);
background: var(--gold); color: var(--on-gold); cursor: pointer; min-height: var(--tap);
}
.plan-cta:hover { filter: brightness(1.07); }
.plan-cta[disabled] { opacity: .55; cursor: default; filter: none; }
.plan-cta-outline { background: transparent; border: 1px solid var(--gold); color: var(--gold-text); }
.plan-cta-outline:hover { filter: none; background: var(--gold-soft); }
.plan-cta-current {
text-align: center; padding: 12px; border-radius: 11px; background: transparent;
border: 1px solid color-mix(in oklab, var(--good) 55%, transparent);
color: var(--good); font: 600 14px var(--font-ui);
}
.plan-cta-ghost {
text-align: center; padding: 12px; border-radius: 11px; background: transparent;
border: 1px solid var(--line2); color: var(--ink3); font: 600 13.5px var(--font-ui);
}
/* Страница тарифов: hero + полоса использования пула */
.plans-page { width: min(1180px, 100%); margin: 0 auto; }
.plans-hero { text-align: center; max-width: 640px; margin: 0 auto 18px; }
.ph-kicker {
font: 600 11px var(--font-ui); letter-spacing: .16em; text-transform: uppercase;
color: var(--ink3); margin-bottom: 10px;
}
.ph-title {
margin: 0 0 12px; font-family: var(--font-serif); font-size: clamp(30px, 4.5vw, 44px);
font-weight: 600; letter-spacing: -.01em; line-height: 1.1;
}
.ph-sub { margin: 0; font: 400 15px var(--font-ui); line-height: 1.6; color: var(--ink2); }
.plans-usage { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 22px; }
.pu-track { width: 110px; height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; }
.pu-track > span { display: block; height: 100%; border-radius: 999px; background: var(--gold); }
.pu-note { font: 400 12.5px var(--font-ui); color: var(--ink3); font-variant-numeric: tabular-nums; }
/* Чекаут-подстраница */
.co-page { max-width: 470px; margin: 0 auto; }
.co-back { display: inline-block; margin-bottom: 10px; font-size: 13px; }
.co-h { margin: 0 0 16px; font: 600 24px var(--font-serif); }
/* Пилюля квоты в шапке */
.quota-pill {
display: inline-flex; align-items: center; gap: 5px; background: var(--surface);
border: 1px solid var(--line2); border-radius: 999px; padding: 8px 13px;
font: 600 12.5px var(--font-ui); color: var(--ink2); cursor: pointer; white-space: nowrap;
font-variant-numeric: tabular-nums; transition: border-color .15s;
}
.quota-pill:hover { border-color: var(--gold); }
.quota-pill.full { border-color: color-mix(in oklab, var(--danger) 45%, transparent); color: var(--danger); }
/* Апгрейд-хинт (80% лимита) */
.upgrade-hint {
display: flex; align-items: center; gap: 12px; justify-content: center;
background: var(--gold-soft); border-bottom: 1px solid var(--gold);
padding: 7px 14px; font: 500 12.5px var(--font-ui); color: var(--ink);
}
.uh-text span { color: var(--ink2); }
.uh-btn {
border: 1px solid var(--gold); background: transparent; color: var(--gold-text);
border-radius: 999px; padding: 4px 12px; font: 600 12px var(--font-ui); cursor: pointer;
}
.uh-btn:hover { background: var(--gold); color: var(--on-gold); }
.uh-x { border: none; background: none; color: var(--ink3); cursor: pointer; font-size: 13px; padding: 4px; }
/* Свотчи тона обложки (конструктор + поповер библиотеки) */
.cover-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.cp-swatch {
width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line2);
cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.cp-swatch:hover { transform: translateY(-2px); }
.cp-swatch.on { box-shadow: 0 0 0 2px var(--gold); border-color: var(--gold); }
.cp-auto {
height: 34px; border-radius: 8px; border: 1px dashed var(--line2); background: transparent;
color: var(--ink3); padding: 0 12px; font: 600 12px var(--font-ui); cursor: pointer;
}
.cp-auto.on { border-color: var(--gold); color: var(--gold-text); }
.cover-pop {
position: absolute; top: 44px; right: 10px; z-index: 5; display: flex; flex-wrap: wrap;
gap: 8px; max-width: 200px; background: var(--surface); border: 1px solid var(--line2);
border-radius: 12px; padding: 10px; box-shadow: var(--shadow-soft);
}
.card-cover {
border: none; background: none; cursor: pointer; font-size: 14px; opacity: .75; padding: 4px;
}
.card-cover:hover { opacity: 1; }
.packs-head { font: 700 14.5px var(--font-ui); color: var(--ink); margin: 4px 0 10px; }
.packs-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.pack-card {
display: flex; flex-direction: column; gap: 3px; align-items: center; cursor: pointer;
border: 1px solid var(--line2); border-radius: 12px; background: var(--raised);
padding: 12px 18px; min-width: 108px; min-height: var(--tap);
}
.pack-card:hover { border-color: var(--gold); }
.pack-card[disabled] { opacity: .55; cursor: default; }
.pack-amount { font: 700 15px var(--font-ui); color: var(--gold-text); }
.pack-price { font: 500 12.5px var(--font-ui); color: var(--ink2); }
.plans-foot { font: 400 12.5px var(--font-ui); color: var(--ink3); line-height: 1.5; margin: 6px 0 0; }
/* --- гейт-пейвол / пред-чекаут / успех (дизайн «Fansfics Premium») -------- */
.gate-card { max-width: 430px; text-align: center; }
.gate-ico {
display: inline-flex; align-items: center; justify-content: center;
width: 52px; height: 52px; border-radius: 50%;
background: var(--gold-soft); border: 1px solid var(--gold); font-size: 20px;
}
.gate-title { font: 600 22px var(--font-serif); line-height: 1.25; margin-top: 12px; }
.gate-desc { margin: 10px 0 4px; font-size: 13.5px; line-height: 1.6; color: var(--ink2); }
.gate-bar { display: block; height: 6px; border-radius: 999px; background: var(--line2); overflow: hidden; margin-top: 12px; }
.gate-bar > span { display: block; width: 100%; height: 100%; background: var(--danger); }
.gate-offer {
margin: 18px 0 14px; background: var(--gold-soft); border: 1px solid var(--gold);
border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; text-align: left;
}
.go-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.go-main b { font-size: 14px; }
.go-line { font-size: 12px; color: var(--ink2); }
.go-price { font: 600 18px var(--font-serif); color: var(--gold-text); white-space: nowrap; }
.gate-cta { width: 100%; }
.gate-links { display: flex; justify-content: center; gap: 18px; margin-top: 12px; }
.co-card { max-width: 470px; }
.co-sum { background: var(--raised); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.co-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.co-name { font-size: 14.5px; font-weight: 600; }
.co-chip {
font: 600 10.5px var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
color: var(--gold-text); background: var(--gold-soft);
border: 1px solid var(--gold); border-radius: 999px; padding: 2px 9px;
}
.co-total { margin-left: auto; font: 600 21px var(--font-serif); }
.co-permo { font-size: 12px; color: var(--ink3); margin-top: 5px; }
.co-alt { margin-top: 6px; font-size: 12.5px; }
.co-quota { font-size: 12px; color: var(--ink2); margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--line); }
.co-rail {
background: var(--raised); border: 1px solid var(--line); border-radius: 12px;
padding: 12px 14px; font-size: 12.5px; line-height: 1.55; color: var(--ink2); margin-bottom: 14px;
}
.co-cta { width: 100%; }
.co-foot { margin: 12px 0 0; text-align: center; font-size: 11.5px; line-height: 1.6; color: var(--ink3); }
.co-foot a { color: var(--ink3); }
.pd-wrap { text-align: center; padding: 8px 0 2px; }
.pd-check {
display: inline-flex; align-items: center; justify-content: center;
width: 56px; height: 56px; border-radius: 50%;
background: rgba(148, 179, 131, .14); border: 1px solid var(--good); color: var(--good); font-size: 24px;
}
.pd-note { margin: 8px 0 0; font-size: 13.5px; color: var(--ink2); }
.pd-quota { margin: 4px 0 0; font-size: 13.5px; color: var(--gold-text); font-weight: 600; }
#paydone-ok { width: 100%; margin-top: 16px; }
/* --- профиль: карточки подписки и языка ----------------------------------- */
.profile-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 14px 0 18px; }
.profile-cards:empty { display: none; }
.pcard {
background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.pcard-head { display: flex; align-items: center; gap: 10px; }
.pcard-kicker { font: 600 11px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.pcard-sub { font-size: 12.5px; color: var(--ink3); margin-top: -4px; }
.pq-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; font-size: 12.5px; color: var(--ink2); }
.pq-count { margin-left: auto; font-size: 12px; color: var(--ink3); font-variant-numeric: tabular-nums; }
.pq-bar { display: block; height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; }
.pq-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--gold); }
.pcard-cta { margin-top: auto; align-self: flex-start; padding: 10px 16px; font-size: 13px; }
.seg { display: flex; flex-wrap: wrap; gap: 4px; align-self: flex-start; background: var(--raised); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.seg-btn {
border: none; border-radius: 999px; padding: 7px 13px; font: 600 12.5px var(--font-ui);
cursor: pointer; background: none; color: var(--ink3); transition: background .15s, color .15s;
}
.seg-btn.on { background: var(--gold); color: var(--on-gold); }
.pcard-note { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink2); }
.pcard-fine { margin: auto 0 0; font-size: 11.5px; color: var(--ink3); font-style: italic; }
/* --- вход через Google + модалка даты рождения ---------------------------- */
.auth-google-row { margin: 12px 0 4px; }
.auth-or { display: flex; align-items: center; gap: 10px; color: var(--ink3); font-size: 12px; margin-bottom: 10px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-google-btn {
display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
min-height: var(--tap); border: 1px solid var(--line2); border-radius: 10px;
background: var(--surface); color: var(--ink); font: 600 14px var(--font-ui); text-decoration: none;
transition: border-color .15s;
}
.auth-google-btn:hover { border-color: var(--gold); }
.g-logo {
display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
border-radius: 50%; background: #fff; color: #4285F4; font: 700 12px var(--font-ui);
border: 1px solid var(--line2);
}
.bd-input {
width: 100%; margin-top: 14px; background: var(--raised); border: 1px solid var(--line2);
border-radius: 10px; color: var(--ink); padding: 12px 14px; font-size: 14.5px;
}
#bd-save { width: 100%; margin-top: 12px; }
/* --- магазин искр (отдельное окно, стиль мобильных игр) ------------------- */
.sparks-card { max-width: 560px; }
.sk-balance { text-align: center; font: 400 14px var(--font-ui); color: var(--ink2); margin-bottom: 16px; }
.sk-balance b { color: var(--gold-text); font-size: 16px; }
.sk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 14px; }
.sk-pack {
position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 22px 12px 16px; border-radius: 16px; cursor: pointer;
border: 1px solid var(--line2); background: linear-gradient(180deg, var(--raised), var(--surface));
transition: transform .15s, border-color .15s, box-shadow .15s;
}
.sk-pack:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: var(--shadow-soft); }
.sk-pack[disabled] { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.sk-pack.sk-1 { border-color: var(--gold); }
.sk-pack.sk-2 {
border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), var(--shadow-soft);
background: linear-gradient(180deg, var(--gold-soft), var(--surface));
}
.sk-badge {
position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap;
background: var(--gold); color: var(--on-gold); border-radius: 999px; padding: 3px 10px;
font: 700 9.5px var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
}
.sk-glyph { font-size: 26px; color: var(--gold-text); letter-spacing: 2px; text-shadow: 0 0 18px rgba(199, 163, 96, .45); }
.sk-amount { font: 600 26px var(--font-serif); color: var(--ink); }
.sk-sub { font: 400 12px var(--font-ui); color: var(--ink3); }
.sk-bonus { min-height: 16px; font: 700 11px var(--font-ui); color: var(--good); }
.sk-price { margin-top: 4px; background: var(--gold); color: var(--on-gold); border-radius: 999px; padding: 6px 14px; font: 700 13px var(--font-ui); }
.sk-foot { margin: 4px 0 0; text-align: center; font: 400 12px var(--font-ui); color: var(--ink3); line-height: 1.5; }
.sparks-open-btn { align-self: flex-start; margin-bottom: 14px; }
.co-rail-test { border-color: var(--good); color: var(--good); }
/* --- подтверждение искр -------------------------------------------------- */
.cc-card { max-width: 420px; }
.cc-text { font: 400 14.5px var(--font-ui); color: var(--ink2); line-height: 1.55; }
/* --- замочки (чипы «✦ Premium» по дизайну «Fansfics Premium») ------------- */
.lock-chip {
display: inline-flex; align-items: center; margin-left: 6px; vertical-align: middle;
font: 700 9.5px var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
color: var(--gold-text); background: var(--gold-soft);
border: 1px solid var(--gold); border-radius: 999px; padding: 2px 8px;
}
body.tier-free .listen-btn .ba-label::after { content: " ✦"; font-size: 11px; color: var(--gold-text); }
.chapter-art-locked {
border: 1.5px dashed var(--gold); border-radius: 14px; background: var(--gold-soft);
padding: 26px 18px; text-align: center; cursor: pointer; margin: 22px 0;
}
.chapter-art-locked:hover { background: rgba(199,163,96,.2); }
.cal-inner { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.cal-lock { font-size: 26px; }
.cal-inner b { font: 700 15px var(--font-ui); color: var(--ink); }
.cal-inner span { font: 400 13px var(--font-ui); color: var(--ink2); }
.cal-cta { color: var(--gold-text) !important; font-weight: 600 !important; margin-top: 4px; }
/* --- i18n: переключатель языка (2026-07-18) ----------------------------- */
.locale-switch {
display: inline-flex; align-items: center; gap: 5px; margin-right: 8px;
color: var(--ink2); font: 500 13px var(--font-ui);
}
.locale-switch select {
appearance: none; -webkit-appearance: none; border: 1px solid var(--line2);
background: var(--surface); color: var(--ink2); border-radius: 8px;
padding: 5px 8px; font: 500 12.5px var(--font-ui); cursor: pointer; min-height: 30px;
}
.locale-switch select:hover { border-color: var(--gold); color: var(--ink); }
.ls-glyph { font-size: 14px; opacity: .85; }
@media (max-width: 640px) { .locale-switch .ls-glyph { display: none; } }
/* --- верификация: неверифицированный = гость (только каталог) ------------ */
body.email-unverified .auth-only-nav { display: none !important; }
/* ---- публичный профиль автора: ссылки-имена + модалка (2026-07-22) ---- */
.author-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.author-link:hover { color: var(--accent); text-decoration: underline; }
.card-author.author-link { color: var(--ink3); }
.card-author.author-link:hover { color: var(--accent); }
.author-name { font-weight: 600; font-size: 17px; }
.author-bio { color: var(--ink-soft); margin: 6px 0 12px; white-space: pre-wrap; }
.author-books { display: flex; flex-direction: column; gap: 8px; max-height: 45vh; overflow-y: auto; margin-top: 8px; }
.author-book { display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.author-book:hover { border-color: var(--accent); }
.author-book .ab-title { font-weight: 600; flex: 1 1 auto; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.author-book .ab-meta { color: var(--ink-soft); font-size: 13px; white-space: nowrap;
display: inline-flex; align-items: center; gap: 4px; }
/* ---- «← Назад» на странице тарифов (возврат откуда пришли, 2026-07-22) ---- */
.plans-back { display: inline-block; margin: 2px 0 8px; font-size: 14.5px; }
/* ---- Отношения v1 (вкладка читалки, docs/RELATIONSHIPS_DESIGN.md §4) ---- */
.rel-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: var(--sheet); }
.rel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rel-ava { width: 30px; height: 30px; border-radius: 50%; background: var(--sheet-deep);
border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; flex: 0 0 auto; }
.rel-name { font-weight: 600; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rel-level { font-size: 13px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.rel-enmity .rel-level { color: #c4554d; border-color: #c4554d55; }
.rel-dislike .rel-level { color: #c07a45; border-color: #c07a4555; }
.rel-neutral .rel-level { color: var(--ink-soft); }
.rel-warmth .rel-level { color: #b98a3c; border-color: #b98a3c55; }
.rel-trust .rel-level { color: #7d9c62; border-color: #7d9c6255; }
.rel-devotion .rel-level { color: #c96a8d; border-color: #c96a8d55; }
.rel-scale { position: relative; height: 8px; border-radius: 999px; background: var(--sheet-deep);
border: 1px solid var(--line); margin: 4px 0 6px; }
.rel-zero { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--line); }
.rel-fill { position: absolute; top: 1px; bottom: 1px; border-radius: 999px;
background: linear-gradient(90deg, #b98a3c, #c96a8d); }
.rel-fill.neg { background: linear-gradient(270deg, #c07a45, #c4554d); }
.rel-dot { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%;
background: var(--accent); border: 2px solid var(--sheet); transform: translate(-50%, -50%); }
.rel-spark { display: block; width: 72px; height: 22px; margin: 2px 0; }
.rel-spark path { fill: none; stroke: var(--accent); stroke-width: 1.6; opacity: .8; }
.rel-last { font-size: 13.5px; color: var(--ink-soft); }
.rel-history { margin-top: 10px; }
.rel-history summary { cursor: pointer; font-weight: 600; }
.rel-log-line { font-size: 13px; color: var(--ink-soft); padding: 3px 0; border-bottom: 1px dashed var(--line-soft); }
.rel-delta { margin: 14px 0 4px; text-align: center; font-size: 14px; color: var(--ink-soft);
display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.rel-level-change { width: 100%; font-size: 13.5px; margin-top: 4px; }
@media (max-width: 360px) { .rel-spark { display: none; } }
/* ---- «Интуиция сердца» (Отношения, этап 2) ---- */
.rel-hints { display: inline-flex; gap: 4px; margin-left: auto; align-self: flex-start; flex: 0 0 auto; }
.rel-hint { font-size: 11px; padding: 2px 6px; border-radius: 999px; border: 1px solid var(--line);
color: var(--ink-soft); white-space: nowrap; }
.rel-hint.pos { color: #7d9c62; border-color: #7d9c6255; }
.rel-hint.neg { color: #c4554d; border-color: #c4554d55; }
.finalizing-note { font-size: 13px; color: var(--ink2); margin: 10px 0 0;
padding: 8px 12px; border: 1px dashed var(--line); border-radius: 10px; }
.rel-whose { font-size: 13px; margin: 0 0 10px; }
.rel-whose b { color: var(--ink); font-weight: 600; }
/* --- панель «Отношения» v2 (дизайн 07-24) ---------------------------------- */
/* Обёртка контента вкладки из макета: без неё карточки липнут к краям шторки. */
#panel-relations { padding: 20px 22px 34px; }
.rel-whose2 { display: flex; align-items: baseline; gap: 8px; padding-bottom: 12px;
border-bottom: 1px solid var(--line); }
.rel-whose2 .k { font-size: 10.5px; font-weight: 600; text-transform: uppercase;
letter-spacing: .14em; color: var(--ink3); }
.rel-whose2 b { font-family: var(--font-serif); font-size: 15px; font-weight: 600; color: var(--ink); }
.rel-intu-card { display: flex; align-items: center; gap: 12px; background: var(--raised);
border: 1px solid var(--line); border-radius: 12px; padding: 12px 15px; margin: 14px 0 4px; }
.rel-intu-card .txt { flex: 1; min-width: 0; }
.rel-intu-card .t { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.rel-intu-card .s { display: block; font-size: 12px; color: var(--ink3); font-style: italic; margin-top: 2px; }
.rel-sw { flex: none; position: relative; width: 38px; height: 22px; border-radius: 999px;
border: none; cursor: pointer; background: var(--line2); transition: background .2s; padding: 0; }
.rel-sw.on { background: var(--gold); }
.rel-sw .knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
background: var(--ink2); transition: left .2s, background .2s; }
.rel-sw.on .knob { left: 19px; background: var(--on-gold); }
.rel-card2 { padding: 16px 0 14px; border-bottom: 1px dashed var(--line); }
.rel-head2 { display: flex; align-items: center; gap: 10px; }
.rel-ava2 { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%;
color: #fff; font-size: 12px;
font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
/* Аватар-картинка персонажа (2026-07-28): ложится АБСОЛЮТОМ поверх цветного
кружка с инициалом. Инициал остаётся в DOM всегда — если портрет не доехал
(его нет у реального человека, фандом снят, картинку ещё не завезли, протух
токен), reader.js снимает ![]()
, и под ним уже готовая буква. `has-img` тут
только для того, чтобы это снятие было одной операцией. */
.rel-ava2.has-img { overflow: hidden; }
.rel-ava2 > img {
position: absolute; inset: 0; width: 100%; height: 100%;
border-radius: 50%; object-fit: cover; display: block; background: inherit;
}
.rel-name2 { font-size: 14px; font-weight: 600; color: var(--ink); }
.rel-pill { margin-left: auto; flex: none; font-size: 10.5px; font-weight: 600; letter-spacing: .08em;
text-transform: uppercase; border-radius: 999px; padding: 3px 9px; }
.rel-pill.warm { color: var(--gold-text); background: rgba(199,163,96,.15); border: 1px solid rgba(199,163,96,.45); }
.rel-pill.bad { color: var(--danger); background: rgba(196,100,76,.14); border: 1px solid rgba(196,100,76,.45); }
.rel-pill.neutral { color: var(--ink2); background: color-mix(in oklab, var(--ink) 6%, transparent);
border: 1px solid var(--line2); }
.rel-meter { position: relative; height: 20px; margin: 10px 1px 0; }
.rel-meter .trk { position: absolute; left: 0; right: 0; top: 8.5px; height: 3px; border-radius: 2px; background: var(--line2); }
.rel-meter .tick { position: absolute; left: 50%; top: 5px; width: 1px; height: 10px;
background: color-mix(in oklab, var(--ink) 25%, transparent); }
.rel-meter .fill { position: absolute; top: 8.5px; height: 3px; border-radius: 2px; background: var(--gold); }
.rel-meter .fill.neg { background: var(--danger); }
.rel-meter .dot { position: absolute; top: 5.5px; width: 9px; height: 9px; border-radius: 50%;
background: var(--gold); box-shadow: 0 0 0 3px rgba(199,163,96,.2); }
.rel-meter .dot.neg { background: var(--danger); box-shadow: 0 0 0 3px rgba(196,100,76,.2); }
.rel-poles { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink3);
opacity: .8; margin: 1px 1px 0; font-style: italic; }
.rel-last2 { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink3); }
.rel-last2 b.pos { color: var(--good); font-weight: 600; }
.rel-last2 b.neg { color: var(--danger); font-weight: 600; }
.rel-hist-tg { display: flex; align-items: center; gap: 10px; width: 100%; background: none;
border: none; cursor: pointer; padding: 16px 0 10px; font-family: var(--font-ui); font-size: 10.5px;
font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--ink3); }
.rel-hist-tg:hover { color: var(--gold-text); }
.rel-hist-tg .chev { display: inline-block; font-size: 11px; transition: transform .2s; }
.rel-hist-tg.open .chev { transform: rotate(90deg); }
.rel-hist-tg .rule { flex: 1; height: 1px; background: var(--line); }
.rel-tl-row { display: flex; gap: 12px; font-size: 13px; }
.rel-tl-rail { display: flex; flex-direction: column; align-items: center; width: 22px; flex: none; }
.rel-tl-rail .node { flex: none; width: 9px; height: 9px; margin-top: 4px;
border: 1.5px solid rgba(199,163,96,.55); border-radius: 50%; }
.rel-tl-rail .node.leaf { width: 11px; height: 11px; margin-top: 3px; background: var(--gold);
border: none; border-radius: 0 100% 0 100%; transform: rotate(-45deg); }
.rel-tl-rail .thread { flex: 1; width: 0; margin-top: 4px; border-left: 1px dashed var(--line2); }
.rel-tl-body { flex: 1; min-width: 0; padding-bottom: 14px; }
.rel-tl-ch { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
.rel-tl-body p { margin: 3px 0 0; line-height: 1.5; color: var(--ink2); }
.rel-tl-body b { color: var(--ink); font-weight: 600; }
.rel-tl-body b.pos { color: var(--good); }
.rel-tl-body b.neg { color: var(--danger); }
.rel-intuition-toggle { display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
padding: 9px 12px; border: 1px dashed var(--line); border-radius: 10px; cursor: pointer; }
.rel-intuition-toggle span { font-weight: 600; }
.rel-intuition-toggle .note { font-size: 12.5px; }
/* Отношения этап 3: секция пар, полка выбывших */
.rel-sec-head { padding: 18px 0 4px; font-size: 10.5px; font-weight: 600; text-transform: uppercase;
letter-spacing: .14em; color: var(--ink3); }
.rel-duo { display: inline-flex; flex: none; }
.rel-duo .rel-ava2 + .rel-ava2 { margin-left: -8px; box-shadow: 0 0 0 2px var(--surface); }
.rel-ava2.gone { opacity: .55; filter: grayscale(.4); }
.rel-gone-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0;
font-size: 13px; color: var(--ink3); }
.rel-gone-row b { color: var(--ink2); font-weight: 600; }
.rel-gone-body { line-height: 1.5; padding-top: 3px; }
/* ------------------------------------------------------------ конструктор облика
(2026-07-29, группа B). Модалка creator/creator.js: превью-канвас слева,
группы опций справа; на узком экране — столбиком. Классы .modal/.modal-card
уже дают каркас, здесь только внутренности. */
.creator-card { max-width: 880px; }
.creator-body { display: flex; gap: 22px; align-items: flex-start; }
.creator-preview { flex: none; width: 300px; max-width: 42vw; position: sticky; top: 0; }
.creator-preview canvas {
width: 100%; height: auto; display: block;
border: 1px solid var(--line); border-radius: 14px;
/* до первой отрисовки — нейтральная подложка вместо белой дыры */
background: var(--raised);
}
.creator-controls { flex: 1; min-width: 0; }
.creator-group { margin-bottom: 14px; }
.creator-group h4 {
margin: 0 0 7px; font-size: 10.5px; font-weight: 600;
text-transform: uppercase; letter-spacing: .12em; color: var(--gold-text);
}
.creator-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.creator-opt {
border: 1px solid var(--line2); border-radius: 999px;
background: var(--surface); color: var(--ink2);
font-family: var(--font-ui); font-size: 12.5px; line-height: 1;
padding: 8px 12px; min-height: 32px; cursor: pointer;
transition: border-color .15s, color .15s, background .15s;
}
.creator-opt.on {
border-color: var(--gold); color: var(--ink);
background: var(--gold-soft); font-weight: 600;
}
.creator-swatch {
width: 26px; height: 26px; border-radius: 50%;
border: 1px solid var(--line2); cursor: pointer; padding: 0;
transition: box-shadow .15s, transform .15s;
}
.creator-swatch.on {
box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--gold);
transform: scale(1.08);
}
/* кнопка «Создать облик» в карточке кастомного персонажа */
.c-creator-row .ghost { flex: none; min-height: 38px; font-size: 12.5px; }
@media (max-width: 719px) {
.creator-body { flex-direction: column; }
.creator-preview { position: static; width: 100%; max-width: 300px; margin: 0 auto; }
}