/* ER.IIIBA.RU — дизайн-система.
*
* Язык взят у Dragons Heaven / BaxiCommunity: семантические токены в духе shadcn/ui,
* монохромный primary (белый на тёмном, почти чёрный на светлом), «стеклянные» карточки,
* Golos Text для интерфейса и Literata для читаемого текста.
*
* Тема: [data-theme="dark"|"light"] на ; без атрибута — по системной настройке.
* Файл подключается последним и перекрывает Bootstrap 2 и старые v3*.css,
* поэтому легаси-страницы получают тот же вид без переписывания разметки.
*/
@font-face { font-family: "Golos Text"; src: url("/fonts/golos-latin.woff2") format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Golos Text"; src: url("/fonts/golos-cyrillic.woff2") format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Literata"; src: url("/fonts/literata-latin.woff2") format("woff2"); font-weight: 200 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Literata"; src: url("/fonts/literata-cyrillic.woff2") format("woff2"); font-weight: 200 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* PERF: знак «ER» в шапке (.nb-logo-mark) — те же пробел, E и R из literata-latin.woff2 (контуры, метрики строки, оси wght/opsz, хинтинг),
2,7 КБ вместо 110 КБ: страницам без текста Literata больше не нужен весь латинский файл. Пробел обязателен: по U+0020 браузер выбирает
шрифт, от которого считает высоту строки, — без него знак сдвигался. Пересобрать: pyftsubset literata-latin.woff2 --unicodes=U+20,U+45,U+52
--layout-features='*' --hinting --flavor=woff2 --output-file=literata-mark.woff2 (docs/PERFORMANCE.md) */
@font-face { font-family: "Literata Mark"; src: url("/fonts/literata-mark.woff2") format("woff2"); font-weight: 200 900; font-display: swap; unicode-range: U+0020, U+0045, U+0052; }
/* ------------------------------------------------------------ токены */
:root {
/* острые углы: большие скругления убраны по просьбе заказчика */
--radius: 4px;
--radius-sm: 2px;
--radius-lg: 6px;
--radius-pill: 4px;
--font-sans: "Golos Text", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-serif: "Literata", Georgia, "Times New Roman", serif;
--container: 1280px;
/* светлая палитра */
--background: oklch(0.985 0.002 250);
--foreground: oklch(0.22 0 0);
--card: oklch(1 0 0 / 0.78);
--card-solid: oklch(1 0 0);
--popover: oklch(1 0 0);
--primary: oklch(0.18 0 0);
--primary-foreground: oklch(0.99 0 0);
--secondary: oklch(0 0 0 / 0.06);
--muted: oklch(0 0 0 / 0.045);
--muted-foreground: oklch(0.47 0 0);
--accent: oklch(0 0 0 / 0.07);
--border: oklch(0 0 0 / 0.1);
--input: oklch(0 0 0 / 0.18);
--ring: oklch(0.35 0 0);
--destructive: oklch(0.55 0.21 25);
--success: oklch(0.52 0.14 152);
--warning: oklch(0.58 0.13 78);
--rating: oklch(0.75 0.15 78);
--rating-text: oklch(0.52 0.12 78);
--translator: oklch(0.5 0.1 195);
--link: oklch(0.42 0.09 250);
--elev-1: 0 1px 2px -1px oklch(0 0 0 / 0.12);
--elev-2: 0 6px 16px -6px oklch(0 0 0 / 0.14), 0 2px 6px -3px oklch(0 0 0 / 0.1), 0 0 0 1px oklch(0 0 0 / 0.05);
--elev-3: 0 24px 56px -20px oklch(0 0 0 / 0.2), 0 8px 18px -10px oklch(0 0 0 / 0.12), 0 0 0 1px oklch(0 0 0 / 0.06);
--glow: radial-gradient(120ch 60ch at 50% -20%, oklch(0 0 0 / 0.045), transparent 70%);
color-scheme: light;
}
:root[data-theme="dark"] {
--background: oklch(0.16 0 0);
--foreground: oklch(0.95 0 0);
--card: oklch(1 0 0 / 0.05);
--card-solid: oklch(0.2 0 0);
--popover: oklch(0.22 0 0);
--primary: oklch(1 0 0);
--primary-foreground: oklch(0.13 0 0);
--secondary: oklch(1 0 0 / 0.09);
--muted: oklch(1 0 0 / 0.06);
--muted-foreground: oklch(0.72 0 0);
--accent: oklch(1 0 0 / 0.09);
--border: oklch(1 0 0 / 0.11);
--input: oklch(1 0 0 / 0.16);
--ring: oklch(0.85 0 0);
--destructive: oklch(0.68 0.19 25);
--success: oklch(0.76 0.14 152);
--warning: oklch(0.8 0.13 78);
--rating: oklch(0.83 0.14 78);
--rating-text: oklch(0.83 0.14 78);
--translator: oklch(0.76 0.1 195);
--link: oklch(0.82 0.07 250);
--elev-1: 0 1px 2px oklch(0 0 0 / 0.4);
--elev-2: 0 8px 24px -8px oklch(0 0 0 / 0.6), 0 0 0 1px oklch(1 0 0 / 0.06);
--elev-3: 0 28px 64px -20px oklch(0 0 0 / 0.75), 0 0 0 1px oklch(1 0 0 / 0.08);
--glow: radial-gradient(120ch 60ch at 50% -20%, oklch(1 0 0 / 0.07), transparent 70%);
color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--background: oklch(0.16 0 0);
--foreground: oklch(0.95 0 0);
--card: oklch(1 0 0 / 0.05);
--card-solid: oklch(0.2 0 0);
--popover: oklch(0.22 0 0);
--primary: oklch(1 0 0);
--primary-foreground: oklch(0.13 0 0);
--secondary: oklch(1 0 0 / 0.09);
--muted: oklch(1 0 0 / 0.06);
--muted-foreground: oklch(0.72 0 0);
--accent: oklch(1 0 0 / 0.09);
--border: oklch(1 0 0 / 0.11);
--input: oklch(1 0 0 / 0.16);
--ring: oklch(0.85 0 0);
--destructive: oklch(0.68 0.19 25);
--success: oklch(0.76 0.14 152);
--warning: oklch(0.8 0.13 78);
--rating: oklch(0.83 0.14 78);
--rating-text: oklch(0.83 0.14 78);
--translator: oklch(0.76 0.1 195);
--link: oklch(0.82 0.07 250);
--elev-1: 0 1px 2px oklch(0 0 0 / 0.4);
--elev-2: 0 8px 24px -8px oklch(0 0 0 / 0.6), 0 0 0 1px oklch(1 0 0 / 0.06);
--elev-3: 0 28px 64px -20px oklch(0 0 0 / 0.75), 0 0 0 1px oklch(1 0 0 / 0.08);
--glow: radial-gradient(120ch 60ch at 50% -20%, oklch(1 0 0 / 0.07), transparent 70%);
color-scheme: dark;
}
}
/* ------------------------------------------------------------ база */
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--background) var(--glow) no-repeat;
background-attachment: fixed;
color: var(--foreground);
font: 400 14px/1.55 var(--font-sans);
letter-spacing: -0.011em;
-webkit-font-smoothing: antialiased;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
body, label, input, button, select, textarea, h1, h2, h3, h4, h5, h6, .navbar, .btn, table { font-family: var(--font-sans); }
h1, h2, h3, h4, h5, h6 { color: var(--foreground); font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; text-rendering: optimizeLegibility; }
h1 { font-size: 30px; margin: 0 0 14px; }
h2 { font-size: 22px; margin: 26px 0 12px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5, h6 { font-size: 13px; }
p { margin: 0 0 10px; }
a { color: var(--link); text-decoration: none; }
a:hover, a:focus { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }
small, .small, .muted, .help-block, .help-inline { color: var(--muted-foreground); }
code, pre { background: var(--muted); color: var(--foreground); border: 1px solid var(--border); border-radius: var(--radius-sm); }
blockquote { border-left: 3px solid var(--border); padding-left: 14px; color: var(--muted-foreground); }
img { max-width: 100%; }
::selection { background: color-mix(in oklab, var(--primary) 22%, transparent); }
.container, .container-fluid, .nb-container { width: auto; max-width: var(--container); margin: 0 auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
.container-fluid { max-width: none; }
.row { margin-left: -20px; }
.row::before, .row::after { display: table; content: ""; }
.row::after { clear: both; }
.nb-main { padding-top: 28px; padding-bottom: 64px; min-height: calc(100vh - 260px); }
/* Колонки Bootstrap 2 в резиновом контейнере: основная .row раскладывается флексом */
@media (min-width: 980px) {
.nb-main > .row, .nb-main .row.nb-cols { display: flex; gap: 32px; margin-left: 0; }
.nb-main > .row::before, .nb-main > .row::after { display: none; }
.nb-main > .row > [class*="span"] { float: none; margin-left: 0; min-width: 0; width: auto; }
.nb-main > .row > .span8 { flex: 2 1 0; }
.nb-main > .row > .span4 { flex: 1 1 0; max-width: 380px; }
.nb-main > .row > .span9 { flex: 3 1 0; }
.nb-main > .row > .span3 { flex: 1 1 0; }
.nb-main > .row > .span6 { flex: 1 1 0; }
.nb-main > .row > .span12 { flex: 1 1 100%; }
}
@media (max-width: 979px) {
.nb-main .row { margin-left: 0; }
.nb-main .row > [class*="span"] { float: none; width: auto; margin-left: 0; display: block; }
.nb-main .row > .sr { margin-top: 28px; }
}
/* ------------------------------------------------------------ шапка */
.nb-header {
position: sticky; top: 0; z-index: 1030;
background: color-mix(in oklab, var(--background) 82%, transparent);
backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
border-bottom: 1px solid var(--border);
}
.nb-header-inner { display: flex; align-items: center; gap: 20px; height: 60px; }
.nb-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--foreground); font-weight: 750; letter-spacing: 0.08em; font-size: 13px; text-transform: uppercase; white-space: nowrap; }
.nb-logo:hover { text-decoration: none; color: var(--foreground); }
/* Знак ER.IIIBA.RU — «ER» (Literata): ER; padding-bottom поднимает прописные к оптическому центру */
.nb-logo-mark { width: 30px; height: 30px; box-sizing: border-box; padding-bottom: 2px; border-radius: var(--radius); background: var(--primary); color: var(--primary-foreground); display: grid; place-items: center; font-size: 14px; line-height: 1; letter-spacing: -0.02em; font-family: "Literata Mark", Georgia, "Times New Roman", serif; font-weight: 700; } /* без "Literata" в запасных: пока грузится знак, браузер начал бы качать весь literata-latin */
.nb-nav { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nb-nav a { display: block; padding: 7px 11px; border-radius: var(--radius); color: var(--muted-foreground); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.nb-nav a:hover { color: var(--foreground); background: var(--muted); text-decoration: none; }
.nb-nav a.active { color: var(--foreground); background: var(--secondary); }
.nb-search { flex: 1; max-width: 360px; margin-left: auto; position: relative; }
.nb-search input[type="search"] {
width: 100%; height: 36px; box-sizing: border-box; margin: 0;
padding: 0 12px 0 34px; border-radius: var(--radius-pill); border: 1px solid var(--border);
background: var(--muted); color: var(--foreground); font-size: 13.5px; box-shadow: none;
}
.nb-search input[type="search"]:focus { border-color: var(--ring); background: var(--card-solid); outline: none; box-shadow: none; }
.nb-search svg { position: absolute; left: 11px; top: 10px; color: var(--muted-foreground); pointer-events: none; }
.nb-actions { display: flex; align-items: center; gap: 6px; }
.nb-icon-btn {
position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius);
border: 0; background: transparent; color: var(--muted-foreground); cursor: pointer; padding: 0;
}
.nb-icon-btn:hover { background: var(--muted); color: var(--foreground); text-decoration: none; }
.nb-count { position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: var(--destructive); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.nb-avatar { width: 32px; height: 32px; border-radius: 999px; background: var(--secondary); color: var(--foreground); display: inline-grid; place-items: center; font-weight: 700; font-size: 13px; overflow: hidden; flex: none; object-fit: cover; }
.nb-avatar-lg { width: 96px; height: 96px; font-size: 34px; }
.nb-menu { position: relative; }
.nb-menu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; border-radius: var(--radius-pill); padding: 2px; }
.nb-menu > summary::-webkit-details-marker { display: none; }
.nb-menu > summary:hover .nb-avatar { box-shadow: 0 0 0 2px var(--border); }
.nb-dropdown {
position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; z-index: 1040;
background: var(--popover); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elev-3); padding: 6px;
}
.nb-dropdown a, .nb-dropdown button { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: var(--radius); color: var(--foreground); font-size: 13.5px; background: none; border: 0; text-align: left; cursor: pointer; }
.nb-dropdown a:hover, .nb-dropdown button:hover { background: var(--muted); text-decoration: none; }
.nb-dropdown .sep { height: 1px; background: var(--border); margin: 6px 4px; }
.nb-dropdown .head { padding: 8px 10px 10px; }
.nb-dropdown .head b { display: block; font-size: 14px; }
.nb-dropdown .head span { color: var(--muted-foreground); font-size: 12px; }
.nb-dropdown .badge-inline { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--destructive); }
.nb-login-form { padding: 10px; display: grid; gap: 8px; }
.nb-login-form input[type="text"], .nb-login-form input[type="password"] { width: 100%; box-sizing: border-box; height: 36px; margin: 0; }
.nb-burger { display: none; }
@media (max-width: 1100px) { .nb-nav .opt { display: none; } }
@media (max-width: 860px) {
.nb-nav { display: none; }
.nb-header-inner { gap: 10px; }
.nb-search { max-width: none; }
.nb-logo-text { display: none; }
}
/* нижняя панель на телефонах */
.nb-tabbar { display: none; }
@media (max-width: 860px) {
.nb-tabbar {
display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
background: color-mix(in oklab, var(--background) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom, 0px);
}
.nb-tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 7px; font-size: 10.5px; color: var(--muted-foreground); }
.nb-tabbar a.active, .nb-tabbar a:hover { color: var(--foreground); text-decoration: none; }
body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
.nb-footer { display: none; }
}
/* ------------------------------------------------------------ подвал */
.nb-footer { border-top: 1px solid var(--border); padding: 36px 0 44px; color: var(--muted-foreground); font-size: 13px; }
.nb-footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 28px; }
.nb-footer h6 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--foreground); }
.nb-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nb-footer a { color: var(--muted-foreground); }
.nb-footer a:hover { color: var(--foreground); }
.nb-footer-dev { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.nb-footer-dev b { color: var(--foreground); font-weight: 600; margin-right: 2px; }
.nb-footer-dev a { display: inline-flex; align-items: center; gap: 4px; }
/* ------------------------------------------------------------ примитивы */
.nb-card, .tools, .well, .hero-unit {
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--elev-1);
}
.nb-card { padding: 20px; }
.nb-card + .nb-card { margin-top: 16px; }
.nb-card > h3:first-child, .nb-card > h2:first-child, .nb-card > h4:first-child { margin-top: 0; }
.nb-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); margin: 0 0 6px; }
.nb-muted { color: var(--muted-foreground); }
.nb-serif { font-family: var(--font-serif); }
.nb-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.nb-page-head h1 { margin: 0; }
.nb-page-head p { margin: 6px 0 0; color: var(--muted-foreground); }
.nb-section { margin-top: 40px; }
.nb-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.nb-section-head h2 { margin: 0; font-size: 20px; }
.nb-section-head a { font-size: 13px; color: var(--muted-foreground); }
.nb-grid { display: grid; gap: 18px; }
.nb-grid-covers { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
.nb-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nb-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .nb-grid-2, .nb-grid-3 { grid-template-columns: 1fr; } .nb-grid-covers { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px; } }
.nb-stack { display: grid; gap: 10px; }
.nb-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nb-spacer { flex: 1; }
.nb-empty { text-align: center; padding: 48px 20px; color: var(--muted-foreground); border: 1px dashed var(--border); border-radius: var(--radius-lg); }
.nb-empty h3 { margin: 0 0 6px; }
/* кнопки */
.nb-btn, .btn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; box-sizing: border-box;
border-radius: var(--radius); border: 1px solid var(--border); background: var(--card-solid); color: var(--foreground);
font-size: 13.5px; font-weight: 550; line-height: 1; text-shadow: none; box-shadow: var(--elev-1); cursor: pointer; white-space: nowrap;
background-image: none; filter: none; vertical-align: middle; transition: background .15s, border-color .15s, color .15s;
}
.nb-btn:hover, .btn:hover, .btn:focus { background: var(--muted); color: var(--foreground); text-decoration: none; background-image: none; }
.nb-btn-primary, .btn-primary, .btn-inverse, .btn-info, .btn-success {
background: var(--primary) !important; color: var(--primary-foreground) !important; border-color: transparent !important;
}
.nb-btn-primary:hover, .btn-primary:hover, .btn-inverse:hover, .btn-info:hover, .btn-success:hover { opacity: .88; }
.btn-danger, .nb-btn-danger { background: var(--destructive) !important; color: #fff !important; border-color: transparent !important; }
.btn-warning { background: var(--warning) !important; color: #fff !important; border-color: transparent !important; }
.nb-btn-ghost, .btn-link { background: transparent; box-shadow: none; border-color: transparent; }
.nb-btn-sm, .btn-small, .btn-mini { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: var(--radius); }
.btn-mini { height: 24px; padding: 0 7px; font-size: 11.5px; }
.nb-btn-lg, .btn-large { height: 44px; padding: 0 20px; font-size: 15px; border-radius: var(--radius-lg); }
.btn.disabled, .btn[disabled], .nb-btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.active, .btn:active { background: var(--secondary); color: var(--foreground); box-shadow: none; }
/* переключатели-радиогруппы (например, «О | П» и сортировка в окне закладок): выбранная кнопка видна в обеих темах */
.btn-group[data-toggle] > .btn.active { background: var(--secondary); color: var(--foreground); border-color: var(--foreground); box-shadow: inset 0 0 0 1px var(--foreground); font-weight: 700; z-index: 2; }
.btn-group > .btn { border-radius: 0; margin-left: -1px; }
.btn-group > .btn:first-child { border-radius: var(--radius) 0 0 var(--radius); margin-left: 0; }
.btn-group > .btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.btn-group > .btn:only-child { border-radius: var(--radius); }
.btn-toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.btn .caret { border-top-color: currentColor; }
[class^="icon-"], [class*=" icon-"] { opacity: .75; }
:root[data-theme="dark"] [class^="icon-"]:not(.icon-white), :root[data-theme="dark"] [class*=" icon-"]:not(.icon-white) { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [class^="icon-"]:not(.icon-white), :root:not([data-theme="light"]) [class*=" icon-"]:not(.icon-white) { filter: invert(1); } }
.nb-btn-primary [class^="icon-"], .btn-primary [class^="icon-"], .btn-inverse [class^="icon-"] { filter: none; }
/* чипы и бейджи */
.nb-chip, .label, .badge {
display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 600;
background: var(--secondary); color: var(--foreground); text-shadow: none; line-height: 1.6; white-space: nowrap;
}
a.nb-chip:hover { background: var(--accent); text-decoration: none; color: var(--foreground); }
.nb-chip.is-active { background: var(--primary); color: var(--primary-foreground); }
.label-success, .badge-success, .nb-chip-success { background: color-mix(in oklab, var(--success) 18%, transparent); color: var(--success); }
.label-warning, .badge-warning, .nb-chip-warning { background: color-mix(in oklab, var(--warning) 18%, transparent); color: var(--warning); }
.label-important, .badge-important, .nb-chip-danger { background: color-mix(in oklab, var(--destructive) 16%, transparent); color: var(--destructive); }
.label-info, .badge-info, .nb-chip-info { background: color-mix(in oklab, var(--translator) 18%, transparent); color: var(--translator); }
.label-inverse, .badge-inverse { background: var(--primary); color: var(--primary-foreground); }
.nb-rating { color: var(--rating-text); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.nb-rating svg { color: var(--rating); fill: var(--rating); }
/* формы */
input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="url"], input[type="date"], input[type="tel"], textarea, select, .uneditable-input {
background: var(--card-solid); color: var(--foreground); border: 1px solid var(--input); border-radius: var(--radius);
box-shadow: none; font-size: 14px; min-height: 34px; padding: 6px 10px; box-sizing: border-box; height: auto; transition: border-color .15s, box-shadow .15s;
}
select { padding: 5px 8px; }
textarea { line-height: 1.55; }
input:focus, textarea:focus, select:focus {
border-color: var(--ring) !important; outline: none !important;
box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 22%, transparent) !important;
}
input::placeholder, textarea::placeholder { color: var(--muted-foreground); opacity: .8; }
label { color: var(--foreground); font-size: 13px; font-weight: 550; }
.control-group.error input, .control-group.error textarea, .control-group.error select { border-color: var(--destructive); }
.control-group.error .help-inline, .control-group.error .help-block, .errorMessage, .control-group.error label { color: var(--destructive); }
.errorSummary { border: 1px solid color-mix(in oklab, var(--destructive) 40%, transparent); background: color-mix(in oklab, var(--destructive) 8%, transparent); color: var(--destructive); border-radius: var(--radius); padding: 12px 16px; }
.form-actions { background: transparent; border-top: 1px solid var(--border); padding: 18px 0 0; margin-top: 18px; }
legend { color: var(--foreground); border-bottom: 1px solid var(--border); font-weight: 650; }
.input-prepend .add-on, .input-append .add-on { background: var(--muted); border-color: var(--input); color: var(--muted-foreground); text-shadow: none; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }
/* таблицы */
table.table, .grid-view table.items, .nb-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.table th, .table td, .grid-view table.items th, .grid-view table.items td, .nb-table th, .nb-table td { border-top: 1px solid var(--border); padding: 10px 12px; vertical-align: middle; color: var(--foreground); background: transparent; }
.table thead th, .grid-view table.items th, .nb-table thead th { border-top: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground); background: var(--muted); }
.grid-view table.items th a { color: var(--muted-foreground); }
.table tbody tr:hover td, .nb-table tbody tr:hover td, .grid-view table.items tr:hover td { background: var(--muted); }
.table-striped tbody tr:nth-child(odd) td, .grid-view table.items tr.odd td { background: transparent; }
.table-bordered { border-collapse: separate; }
.grid-view table.items tr.even td { background: transparent; }
.nb-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); }
/* вкладки, пилюли, хлебные крошки, пагинация */
.nav-tabs { border-bottom: 1px solid var(--border); display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 20px; }
.nav-tabs > li { float: none; margin-bottom: -1px; }
.nav-tabs > li > a { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--muted-foreground); padding: 9px 12px; margin: 0; font-weight: 550; background: none; line-height: 1.4; }
.nav-tabs > li > a:hover { background: none; color: var(--foreground); border-color: var(--border); text-decoration: none; }
.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus { color: var(--foreground); background: none; border: 0; border-bottom: 2px solid var(--primary); }
.nav-pills > li > a { border-radius: var(--radius-pill); color: var(--muted-foreground); }
.nav-pills > li > a:hover { background: var(--muted); color: var(--foreground); }
.nav-pills > .active > a, .nav-pills > .active > a:hover { background: var(--primary); color: var(--primary-foreground); }
.nav-list > li > a { color: var(--foreground); border-radius: var(--radius); text-shadow: none; }
.nav-list > .active > a { background: var(--primary); color: var(--primary-foreground); text-shadow: none; }
.nav-header { color: var(--muted-foreground); text-shadow: none; }
.breadcrumb, .breadcrumbs { background: none; padding: 0; margin: 0 0 14px; box-shadow: none; border: 0; color: var(--muted-foreground); font-size: 13px; }
.breadcrumb > li { text-shadow: none; }
.breadcrumb a, .breadcrumbs a { color: var(--muted-foreground); }
.pagination ul, .pager { box-shadow: none; display: inline-flex; gap: 4px; flex-wrap: wrap; }
.pagination ul > li > a, .pagination ul > li > span, ul.yiiPager li a, .pager li > a, .pager li > span {
border: 1px solid var(--border) !important; border-radius: var(--radius) !important; background: var(--card-solid); color: var(--foreground); margin: 0; float: none; display: inline-block; min-width: 34px; text-align: center; box-sizing: border-box; padding: 5px 10px; line-height: 1.5; font-weight: 550;
}
.pagination ul > li > a:hover, ul.yiiPager li a:hover { background: var(--muted); text-decoration: none; }
.pagination ul > .active > a, .pagination ul > .active > span, ul.yiiPager .selected a { background: var(--primary) !important; color: var(--primary-foreground) !important; border-color: transparent !important; }
.pagination ul > .disabled > a, .pagination ul > .disabled > span { color: var(--muted-foreground); background: transparent; }
ul.yiiPager { display: inline-flex; gap: 4px; flex-wrap: wrap; }
ul.yiiPager li { display: inline-block; }
ul.yiiPager .hidden a { display: none; }
/* алерты, модалки, выпадашки, поповеры */
.alert { border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); color: var(--foreground); text-shadow: none; padding: 12px 38px 12px 16px; box-shadow: var(--elev-1); }
.alert-success { border-color: color-mix(in oklab, var(--success) 40%, transparent); background: color-mix(in oklab, var(--success) 10%, var(--card-solid)); }
.alert-error, .alert-danger { border-color: color-mix(in oklab, var(--destructive) 40%, transparent); background: color-mix(in oklab, var(--destructive) 9%, var(--card-solid)); }
.alert-info { border-color: color-mix(in oklab, var(--translator) 40%, transparent); background: color-mix(in oklab, var(--translator) 9%, var(--card-solid)); }
.alert .close { color: var(--foreground); opacity: .5; text-shadow: none; }
.modal { background: var(--popover); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elev-3); color: var(--foreground); }
.modal-header { border-bottom: 1px solid var(--border); }
.modal-footer { background: transparent; border-top: 1px solid var(--border); box-shadow: none; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.modal-backdrop, .modal-backdrop.fade.in { background: #000; opacity: .55; }
.close { color: var(--foreground); text-shadow: none; }
.dropdown-menu { background: var(--popover); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elev-3); padding: 6px; }
.dropdown-menu li > a { color: var(--foreground); border-radius: var(--radius); padding: 6px 10px; }
.dropdown-menu li > a:hover, .dropdown-menu .active > a { background: var(--muted); color: var(--foreground); background-image: none; }
.dropdown-menu .divider { background: var(--border); border: 0; }
.popover, .tooltip-inner { background: var(--popover); color: var(--foreground); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--elev-3); }
.popover-title { background: var(--muted); border-bottom: 1px solid var(--border); }
.progress { background: var(--muted); border-radius: var(--radius-pill); box-shadow: none; height: 8px; overflow: hidden; }
.progress .bar { background: var(--primary); background-image: none; box-shadow: none; border-radius: var(--radius-pill); }
.progress-success .bar { background: var(--success); }
.nb-progress { height: 6px; border-radius: var(--radius-pill); background: var(--muted); overflow: hidden; }
.nb-progress > i { display: block; height: 100%; background: var(--primary); border-radius: inherit; }
/* ------------------------------------------------------------ старые боковые блоки (.tools) */
.sr .tools, .tools { padding: 18px 20px; margin: 0 0 18px; }
.tools > h5, .tools h5:first-child { margin: 0 0 12px; padding: 0; background: none !important; color: var(--muted-foreground); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; height: auto; line-height: 1.4; border: 0; }
.tools > h5 + * { margin-top: 0; }
.tools dl dt { color: var(--muted-foreground); font-weight: 600; font-size: 12px; }
.tools dl dd { margin: 2px 0 10px; }
.tools ul { margin-left: 18px; }
/* ------------------------------------------------------------ обложки и карточки книг */
.nb-cover { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(135deg, var(--secondary), var(--muted)); border: 1px solid var(--border); }
.nb-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nb-cover .ph { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-serif); font-size: 42px; font-weight: 700; color: var(--muted-foreground); padding: 10px; text-align: center; }
.nb-cover .ph small { display: block; font-family: var(--font-sans); font-size: 11px; font-weight: 600; line-height: 1.3; margin-top: 8px; color: var(--muted-foreground); }
.nb-cover .corner { position: absolute; left: 8px; top: 8px; }
.nb-cover .corner-r { position: absolute; right: 8px; top: 8px; }
.nb-cover .ready { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: oklch(0 0 0 / .35); }
.nb-cover .ready i { display: block; height: 100%; background: var(--success); }
/* IMG: обложка с картинкой — без «стекла»: подложка-градиент не заходит под полупрозрачную рамку (раньше в тёмной теме
светлая подложка просвечивала сквозь светлую рамку — вокруг каждой маленькой обложки светлый контур), а рамка в тёмной
теме — тёмная, чистый край. Заглушки без картинки (буква, цветной фон) — как были. */
.nb-cover:has(> img, > picture) { background-clip: padding-box; }
:root[data-theme="dark"] .nb-cover:has(> img, > picture) { border-color: oklch(0 0 0 / .4); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nb-cover:has(> img, > picture) { border-color: oklch(0 0 0 / .4); } }
.nb-book-card { display: block; color: var(--foreground); min-width: 0; }
.nb-book-card:hover { text-decoration: none; color: var(--foreground); }
.nb-book-card:hover .nb-cover { box-shadow: var(--elev-2); transform: translateY(-2px); }
.nb-book-card .nb-cover { transition: transform .2s, box-shadow .2s; }
.nb-book-card .t { margin-top: 9px; font-weight: 600; font-size: 13.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nb-book-card .m { margin-top: 3px; font-size: 12px; color: var(--muted-foreground); display: flex; gap: 8px; flex-wrap: wrap; }
.nb-list-row { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: var(--radius-lg); color: var(--foreground); }
.nb-list-row:hover { background: var(--muted); text-decoration: none; color: var(--foreground); }
.nb-list-row .nb-cover { width: 54px; flex: none; border-radius: var(--radius); }
.nb-list-row .nb-cover .ph { font-size: 20px; }
.nb-list-row .body { min-width: 0; flex: 1; }
.nb-list-row .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-list-row .m { font-size: 12.5px; color: var(--muted-foreground); }
.nb-rank { width: 30px; flex: none; text-align: center; font-weight: 800; font-size: 18px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.nb-rank.top { color: var(--foreground); }
/* ------------------------------------------------------------ главная */
.nb-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: center; padding: 22px 0 8px; }
.nb-hero h1 { font-size: clamp(30px, 4.4vw, 50px); line-height: 1.04; letter-spacing: -0.035em; margin: 0 0 14px; }
.nb-hero h1 em { font-family: var(--font-serif); font-weight: 500; font-style: italic; }
.nb-hero p.lead { font-size: 16px; color: var(--muted-foreground); max-width: 52ch; }
.nb-hero-stats { display: flex; gap: 26px; margin-top: 22px; flex-wrap: wrap; }
.nb-hero-stats b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; }
.nb-hero-stats span { font-size: 12px; color: var(--muted-foreground); }
.nb-hero-covers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; transform: rotate(-3deg); }
.nb-hero-covers > :nth-child(2) { transform: translateY(-18px); }
@media (max-width: 860px) { .nb-hero { grid-template-columns: 1fr; } .nb-hero-covers { display: none; } }
.nb-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(140px, 158px); gap: 16px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.nb-rail > * { scroll-snap-align: start; }
.nb-feature-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.nb-feature-list .nb-card h4 { margin: 8px 0 6px; }
.nb-feature-list .nb-card p { color: var(--muted-foreground); margin: 0; font-size: 13.5px; }
@media (max-width: 860px) { .nb-feature-list { grid-template-columns: 1fr; } }
/* ------------------------------------------------------------ страница книги */
.nb-book-hero { display: grid; grid-template-columns: 210px 1fr; gap: 30px; margin-bottom: 26px; }
.nb-book-hero .nb-cover { box-shadow: var(--elev-3); }
.nb-book-hero h1 { font-size: clamp(24px, 3.2vw, 36px); margin: 4px 0 6px; }
.nb-book-hero .orig { color: var(--muted-foreground); font-size: 14px; margin-bottom: 12px; }
.nb-book-hero .descr { font-family: var(--font-serif); font-size: 15px; line-height: 1.7; margin: 14px 0; max-width: 72ch; }
.nb-stats { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.nb-stat { padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); min-width: 96px; }
.nb-stat b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.nb-stat span { font-size: 11.5px; color: var(--muted-foreground); }
@media (max-width: 700px) { .nb-book-hero { grid-template-columns: 120px 1fr; gap: 16px; } .nb-book-hero .descr { grid-column: 1 / -1; } }
/* звёзды оценки 1–10 */
.nb-stars { display: inline-flex; gap: 2px; direction: rtl; }
.nb-stars button { background: none; border: 0; padding: 1px; cursor: pointer; color: var(--border); line-height: 0; }
.nb-stars button svg { width: 18px; height: 18px; fill: currentColor; }
.nb-stars button:hover, .nb-stars button:hover ~ button, .nb-stars button.on { color: var(--rating); }
/* ------------------------------------------------------------ читалка */
.nb-reader { --reader-size: 19px; --reader-width: 720px; --reader-leading: 1.75; --reader-bg: var(--background); --reader-fg: var(--foreground); }
.nb-reader-surface { background: var(--reader-bg); color: var(--reader-fg); }
.nb-reader.theme-sepia { --reader-bg: #f4ecd8; --reader-fg: #3b2f22; }
.nb-reader.theme-paper { --reader-bg: #fbfaf7; --reader-fg: #26221d; }
.nb-reader.theme-grey { --reader-bg: #3a3b3d; --reader-fg: #e4e4e4; }
.nb-reader.theme-night { --reader-bg: #121212; --reader-fg: #cfcfcf; }
.nb-reader.theme-ink { --reader-bg: #0f1623; --reader-fg: #d6dde8; }
.nb-reader-text { max-width: var(--reader-width); margin: 0 auto; font-family: var(--font-serif); font-size: var(--reader-size); line-height: var(--reader-leading); }
.nb-reader.font-sans .nb-reader-text { font-family: var(--font-sans); }
.nb-reader.align-justify .nb-reader-text p { text-align: justify; hyphens: auto; }
.nb-reader-text p { margin: 0 0 1em; }
.nb-reader-bar { position: sticky; top: 60px; z-index: 20; display: flex; align-items: center; gap: 8px; padding: 10px 0; background: color-mix(in oklab, var(--reader-bg) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); margin-bottom: 26px; }
.nb-reader-progress { position: fixed; left: 0; top: 0; height: 3px; background: var(--primary); z-index: 2000; width: 0; transition: width .1s; }
.nb-reader-settings { position: absolute; right: 0; top: calc(100% + 6px); width: 300px; background: var(--popover); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elev-3); padding: 14px; z-index: 50; color: var(--foreground); }
.nb-reader-settings .grp { margin-bottom: 12px; }
.nb-reader-settings .grp:last-child { margin-bottom: 0; }
.nb-reader-settings .lbl { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 6px; }
.nb-swatches { display: flex; gap: 8px; }
.nb-swatches button { width: 34px; height: 34px; border-radius: 999px; border: 2px solid var(--border); cursor: pointer; }
.nb-swatches button.on { border-color: var(--primary); }
.nb-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.nb-seg button { border: 0; background: transparent; color: var(--foreground); padding: 6px 12px; cursor: pointer; font-size: 13px; }
.nb-seg button.on { background: var(--primary); color: var(--primary-foreground); }
.nb-chapter-nav { display: flex; justify-content: space-between; gap: 12px; margin: 40px auto 0; max-width: var(--reader-width); }
.nb-reactions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 36px 0 10px; }
.nb-reactions button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--card); color: var(--foreground); border-radius: var(--radius-pill); padding: 6px 12px; font-size: 14px; cursor: pointer; }
.nb-reactions button.on { border-color: var(--primary); background: var(--secondary); }
.nb-reactions button b { font-size: 12.5px; font-variant-numeric: tabular-nums; }
/* ------------------------------------------------------------ профиль */
.nb-profile-head { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.nb-level { display: inline-flex; align-items: center; gap: 8px; }
.nb-level .nb-progress { width: 160px; }
.nb-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.nb-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: var(--radius-pill); background: var(--card); border: 1px solid var(--border); font-size: 12.5px; font-weight: 600; }
.nb-badge .ico { width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; background: var(--secondary); font-size: 14px; }
.nb-badge.locked { opacity: .45; }
/* ------------------------------------------------------------ уведомления, лента */
.nb-feed-item { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--radius-lg); }
.nb-feed-item + .nb-feed-item { border-top: 1px solid var(--border); border-radius: 0; }
.nb-feed-item .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--destructive); margin-top: 7px; flex: none; }
.nb-feed-item .dot.seen { background: transparent; }
/* ------------------------------------------------------------ легаси-переопределения */
header#legacy-hidden, #header-logo, #header-menu, #header-submenu { display: none; }
.sr { font-size: 13.5px; }
.book-title, h1.book-title { font-size: 30px; }
#Tr, table.translator, #Tr td, #Tr th { color: var(--foreground); }
#Tr tr:hover td { background: var(--muted); }
.comments .comment, .comment { border-color: var(--border); }
.comment .info, .comment .author { color: var(--muted-foreground); }
div.grid-view { padding-top: 0; }
div.grid-view .summary { color: var(--muted-foreground); font-size: 12.5px; margin-bottom: 8px; }
.grid-view-loading { background-color: transparent; }
.bookmark, .bookmarks .item { color: var(--foreground); }
.book-cover, .cover img { border-radius: var(--radius); }
.tabbable .tab-content { color: var(--foreground); }
.search-query { border-radius: var(--radius-pill) !important; }
.navbar .navbar-inner { background: var(--card); background-image: none; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none; filter: none; }
.navbar .nav > li > a { color: var(--muted-foreground); text-shadow: none; }
.navbar .nav > .active > a { background: var(--secondary); color: var(--foreground); box-shadow: none; }
.hero-unit { padding: 28px; }
.thumbnail { border-color: var(--border); background: var(--card); border-radius: 12px; box-shadow: none; }
dl.dl-horizontal dt { color: var(--muted-foreground); }
.grid-view table.items td.r, .grid-view table.items th.r { background: var(--muted) !important; }
@media print {
.nb-header, .nb-footer, .nb-tabbar, .nb-reader-bar { display: none !important; }
body { background: #fff; color: #000; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
/* старые v3*.css стилизуют header/footer/h3 глобально — возвращаем своё */
header.nb-header { height: auto; margin: 0; }
footer.nb-footer { border-bottom: 0; margin: 0; }
nav ul.nb-nav { margin: 0; }
h3 { border-bottom: 0; }
h1 { margin-left: 0; }
a.ajax { color: var(--muted-foreground); border-bottom-color: var(--muted-foreground); }
a.act { color: var(--link); }
.access-denied { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; }
.shl { background: color-mix(in oklab, var(--warning) 35%, transparent); color: inherit; }
.negative { color: var(--destructive); }
/* легаси-компоненты: сайдбар, рейтинговалка, комментарии, посты, анонсы */
.sr .tools { position: relative; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); color: var(--foreground); margin: 0 0 18px; font-size: 13px; }
.sr .tools * { font-size: inherit; }
.sr h5, .sr .tools h5 { position: static; height: auto; padding: 0; margin: 0 0 12px; background: none !important; color: var(--muted-foreground); font: 700 11px/1.4 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; text-align: left; }
.sr dl.info dt { color: var(--muted-foreground); font-weight: 500; font-size: 12px; }
.sr dl.info dd { font-weight: 600; border-bottom-color: var(--border); }
.rate { background: var(--secondary); color: var(--foreground); border-radius: var(--radius-sm); }
.rater .p, .rater .m { background: var(--primary); color: var(--primary-foreground); border-radius: var(--radius-sm); }
.rater .m:hover, .rater .p:hover { background: var(--foreground); }
.comments .comment.new { background: color-mix(in oklab, var(--translator) 14%, transparent); border-radius: var(--radius); }
.comments .comment.new .meta, .comments .comment.new .meta a { color: var(--muted-foreground); }
.comments .comment.highlighted { border-color: var(--ring); border-radius: var(--radius); }
.comments .scroll-top:hover { background: var(--muted); }
.comments-nav-box div { border-color: var(--border); background: var(--popover); color: var(--foreground); border-radius: var(--radius); }
.comments .cmt_0_btn a { color: var(--muted-foreground); }
.post { margin: 0 0 28px; padding: 20px 22px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.post h2 { margin: 0 0 8px; }
.post .body { margin: 12px 0; font-family: var(--font-serif); font-size: 15px; line-height: 1.7; }
.post .img img { border: 1px solid var(--border); border-radius: var(--radius); }
.post .info { background: transparent; border-bottom: 0; border-top: 1px solid var(--border); padding: 10px 0 0; font-size: 12.5px; color: var(--muted-foreground); }
.post .info .cmt .new { color: var(--destructive); }
.post.topic-70 h2 a { color: var(--success); }
.post.topic-64 h2 a { color: var(--destructive); }
.announce .a .img { background-color: var(--muted); border-radius: var(--radius); }
.announce .b .msg { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.announce .b .msg .v { display: none; }
#bookmarks-list > li > div:hover { background: var(--muted); }
.table-striped tbody > tr:nth-child(odd) > td, .table-striped tbody > tr:nth-child(odd) > th { background-color: transparent; }
.table-hover tbody tr:hover > td { background-color: var(--muted); }
table.t td, table.t th { color: var(--foreground); }
/* ------------------------------------------------------------ вход и регистрация */
.nb-auth { display: grid; place-items: center; padding: 24px 0 40px; }
.nb-auth-card { width: 100%; max-width: 420px; padding: 32px; box-shadow: var(--elev-3); }
.nb-auth-card h1 { text-align: center; font-size: 26px; margin-bottom: 8px; }
.nb-auth-card > p.nb-muted { text-align: center; margin-bottom: 22px; }
.nb-auth-card label { display: grid; gap: 6px; }
.nb-auth-card input[type="text"], .nb-auth-card input[type="password"], .nb-auth-card input[type="email"] { width: 100%; height: 42px; margin: 0; }
.nb-auth-card label.nb-row { display: flex; }
.nb-auth-card > .nb-logo { display: flex; }
/* заглушки обложек: у каждой книги свой оттенок */
.nb-cover[style*="--ph-h"] { background: linear-gradient(160deg, oklch(0.72 0.09 var(--ph-h)) 0%, oklch(0.45 0.1 calc(var(--ph-h) + 40)) 100%); border-color: transparent; }
.nb-cover .ph.ph-tinted { color: oklch(0.98 0.01 var(--ph-h)); text-shadow: 0 1px 12px oklch(0 0 0 / .25); align-content: center; }
.nb-cover .ph.ph-tinted small { color: oklch(0.97 0.02 var(--ph-h) / .9); font-size: 12px; max-width: 90%; margin-inline: auto; }
.nb-hero-covers a { display: block; }
.nb-hero-covers .nb-cover { box-shadow: var(--elev-3); }
/* облако популярных запросов */
.cloud { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; line-height: 1.2; }
.cloud a { color: var(--foreground); opacity: .85; }
.cloud a:hover { opacity: 1; }
.nb-grid > .nb-card + .nb-card, .nb-feature-list > .nb-card + .nb-card { margin-top: 0; }
/* страница книги */
.nb-book-descr { font-size: 15.5px; line-height: 1.75; margin: 0 0 22px; max-width: 72ch; }
.nb-book-descr p:last-child { margin-bottom: 0; }
#Chapters td.t a { font-weight: 550; color: var(--foreground); }
#Chapters td.t a:hover { color: var(--link); }
#Chapters td.r { text-align: right; white-space: nowrap; }
#Chapters .nb-ready-cell { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-variant-numeric: tabular-nums; }
#Chapters .nb-ready-cell .nb-progress { width: 56px; height: 5px; }
#Chapters td.r small { display: block; font-size: 11px; }
#Chapters tr.is-current td { background: color-mix(in oklab, var(--translator) 8%, transparent); }
#Chapters td.editing { border-top: 2px solid var(--primary); border-bottom: 2px solid var(--primary); background: var(--card-solid); }
#Chapters td.loading { padding: 40px; color: var(--muted-foreground); background: var(--muted); }
#Chapters .disabled { text-decoration: line-through; color: var(--muted-foreground); }
#Chapters td, #Chapters th { white-space: nowrap; }
#Chapters td.t { white-space: normal; }
#Status_Dropdown { position: absolute; width: 170px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--popover); box-shadow: var(--elev-3); padding: 6px 14px; z-index: 7; }
#Status_Dropdown ul { margin: 8px 0; padding: 0; }
#Status_Dropdown ul li { list-style: none; margin: 5px 0; }
.nb-book-hero .nb-stats { align-items: stretch; }
/* ------------------------------------------------------------ каталог */
.nb-catalog { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; }
.nb-catalog-side { position: sticky; top: 76px; display: grid; gap: 14px; max-height: calc(100vh - 92px); overflow: auto; padding-right: 4px; scrollbar-width: thin; }
.nb-filters { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; }
.nb-filters > summary { cursor: pointer; font-weight: 650; display: flex; align-items: center; gap: 8px; list-style: none; }
.nb-filters > summary::-webkit-details-marker { display: none; }
.nb-filters .grp { margin-top: 14px; }
.nb-filters .lbl { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 8px; }
.nb-filters select { width: 100%; margin: 4px 0 8px; }
.nb-filters label { display: block; }
.nb-opt { display: block; padding: 6px 10px; border-radius: var(--radius); color: var(--foreground); font-size: 13.5px; }
.nb-opt:hover { background: var(--muted); text-decoration: none; color: var(--foreground); }
.nb-opt.on { background: var(--secondary); font-weight: 650; }
.nb-tree { list-style: none; margin: 4px 0 0; padding: 0; }
.nb-tree.sub { margin: 2px 0 2px 12px; padding-left: 8px; border-left: 1px solid var(--border); }
.nb-tree a { display: flex; justify-content: space-between; gap: 8px; padding: 5px 10px; border-radius: var(--radius); color: var(--foreground); font-size: 13.5px; }
.nb-tree a:hover { background: var(--muted); text-decoration: none; color: var(--foreground); }
.nb-tree a small { color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.nb-tree li.current > a { background: var(--primary); color: var(--primary-foreground); }
.nb-tree li.current > a small { color: inherit; opacity: .75; }
.nb-catalog-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.nb-seg a { display: inline-grid; place-items: center; width: 34px; height: 30px; color: var(--muted-foreground); }
.nb-seg a.on { background: var(--primary); color: var(--primary-foreground); }
.nb-seg a:hover { text-decoration: none; }
.nb-catalog-search { position: relative; width: min(100%, 360px); }
.nb-catalog-search svg { position: absolute; left: 12px; top: 12px; color: var(--muted-foreground); }
.nb-catalog-search input[type="search"] { width: 100%; height: 40px; margin: 0; padding-left: 36px; border-radius: var(--radius-lg); }
.nb-list-side { text-align: right; flex: none; }
.nb-list-side b { display: block; font-variant-numeric: tabular-nums; }
.nb-list-side span { font-size: 12px; color: var(--muted-foreground); }
.nb-clamp-1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-pager { margin-top: 26px; display: flex; justify-content: center; }
.nb-pager ul.yiiPager { margin: 0; padding: 0; list-style: none; }
.nb-pager ul.yiiPager .first, .nb-pager ul.yiiPager .last { display: none; }
@media (max-width: 900px) {
.nb-catalog { grid-template-columns: 1fr; }
.nb-catalog-side { position: static; max-height: none; }
.nb-filters:not([open]) { padding-bottom: 14px; }
}
.nb-list-row .nb-cover .ph small { display: none; }
/* ------------------------------------------------------------ страница тайтла (3 колонки) */
html, body { overflow-x: clip; }
.nb-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nb-novel { position: relative; }
.nb-novel-backdrop {
position: absolute; z-index: -1; left: calc(50% - 50vw); right: calc(50% - 50vw); top: -28px; height: 420px;
background: linear-gradient(160deg, oklch(0.7 0.1 var(--ph-h, 250)), oklch(0.45 0.1 calc(var(--ph-h, 250) + 40)));
background-size: cover; background-position: center 30%;
filter: blur(48px) saturate(1.2); opacity: .35; pointer-events: none;
-webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
}
:root[data-theme="dark"] .nb-novel-backdrop { opacity: .28; }
.nb-novel-tabs {
position: sticky; top: 60px; z-index: 30; display: flex; gap: 2px; align-items: center; overflow-x: auto; scrollbar-width: none;
margin: 0 0 26px; padding: 6px; border-radius: var(--radius-lg); border: 1px solid var(--border);
background: color-mix(in oklab, var(--background) 80%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.nb-novel-tabs::-webkit-scrollbar { display: none; }
.nb-novel-tabs a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: var(--radius); color: var(--muted-foreground); font-weight: 550; font-size: 13.5px; white-space: nowrap; }
.nb-novel-tabs a:hover { background: var(--muted); color: var(--foreground); text-decoration: none; }
.nb-novel-tabs a.active { background: var(--primary); color: var(--primary-foreground); }
.nb-novel-tabs a small { font-size: 11px; opacity: .7; font-variant-numeric: tabular-nums; }
.nb-novel-tabs a.end { margin-left: auto; }
.nb-novel-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr) 290px; gap: 30px; align-items: start; }
.nb-novel-left, .nb-novel-right { position: sticky; top: 126px; display: grid; gap: 16px; }
.nb-novel-left { max-height: calc(100vh - 140px); overflow: auto; scrollbar-width: none; }
.nb-novel-left::-webkit-scrollbar { display: none; }
.nb-novel-cover .nb-cover { box-shadow: var(--elev-3); border-radius: var(--radius-lg); }
.nb-novel-actions { display: grid; gap: 8px; }
.nb-novel-actions > .nb-btn, .nb-novel-actions > * > .nb-btn { width: 100%; }
.nb-novel-actions .nb-btn-lg { height: 46px; }
.nb-facts { margin: 0; padding: 14px 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px 14px; font-size: 13px; }
.nb-facts dt { color: var(--muted-foreground); font-weight: 500; }
.nb-facts dd { margin: 0; font-weight: 550; min-width: 0; overflow-wrap: anywhere; }
.nb-facts dd .nb-chip { font-size: 11px; }
.nb-novel-links { display: grid; gap: 6px; font-size: 13px; padding: 0 4px; }
.nb-novel-links a { color: var(--muted-foreground); display: inline-flex; align-items: center; gap: 7px; }
.nb-novel-links a:hover { color: var(--foreground); }
.nb-novel-title h1 { font-size: clamp(26px, 3vw, 38px); line-height: 1.1; letter-spacing: -0.03em; margin: 12px 0 6px; }
.nb-novel-chips { gap: 6px; }
.nb-novel-alt { color: var(--muted-foreground); font-size: 14px; }
.nb-novel-author { margin-top: 6px; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.nb-novel-rating { margin: 16px 0 12px; }
.nb-novel-stats { display: flex; flex-wrap: wrap; margin: 18px 0 8px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); overflow: hidden; }
.nb-novel-stats > div { flex: 1 1 110px; padding: 12px 16px; border-right: 1px solid var(--border); min-width: 0; }
.nb-novel-stats > div:last-child { border-right: 0; }
.nb-novel-stats b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.nb-novel-stats span { font-size: 12px; color: var(--muted-foreground); }
.nb-novel-stats .ready-stat { flex-basis: 150px; }
.nb-novel-stats .nb-progress { margin-top: 6px; height: 5px; }
.nb-novel-section { margin-top: 30px; scroll-margin-top: 130px; }
.nb-book-descr.nb-collapsible[data-collapsed] { max-height: 11.5em; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
.nb-more-btn { margin-top: 4px; }
/* global: the hidden attribute always hides (component display rules like .nb-btn { display:inline-flex } must not override it) */
[hidden] { display: none !important; }
.nb-toc-filter { height: 32px !important; min-height: 0 !important; width: 180px; border-radius: var(--radius-pill) !important; font-size: 13px !important; }
/* оглавление — строки-карточки */
.nb-toc #Chapters { border: 0; background: transparent; border-collapse: separate; border-spacing: 0 6px; overflow: visible; }
.nb-toc #Chapters thead th { background: transparent; border: 0; padding: 0 12px 2px; font-size: 10.5px; }
.nb-toc #Chapters tbody td { background: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 12px; }
.nb-toc #Chapters tbody td:first-child { border-left: 1px solid var(--border); border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.nb-toc #Chapters tbody td:last-child { border-right: 1px solid var(--border); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.nb-toc #Chapters tbody tr:hover td { background: var(--muted); }
.nb-toc #Chapters tr.is-current td { background: color-mix(in oklab, var(--translator) 10%, var(--card)); border-color: color-mix(in oklab, var(--translator) 35%, transparent); }
#Chapters td.t .num { display: inline-grid; place-items: center; min-width: 26px; height: 26px; margin-right: 10px; border-radius: var(--radius); background: var(--secondary); color: var(--muted-foreground); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; vertical-align: middle; }
#Chapters td.t .ttl { vertical-align: middle; }
#Chapters td.t .ac i { margin-left: 2px; }
#Chapters .nb-ready-cell { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; }
#Chapters .nb-ready-cell span { min-width: 38px; text-align: right; font-size: 12.5px; }
#Chapters td.empty a { color: var(--link); }
#Chapters td.e a { color: var(--muted-foreground); }
/* правая колонка */
.nb-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; }
.nb-panel-head { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 10px; display: flex; justify-content: space-between; }
.nb-panel-head small { font-size: 11px; letter-spacing: 0; }
.nb-panel-more { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 13px; color: var(--muted-foreground); }
.nb-team { display: grid; gap: 2px; }
.nb-team-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin: 0 -8px; border-radius: var(--radius); color: var(--foreground); }
.nb-team-row:hover { background: var(--muted); text-decoration: none; color: var(--foreground); }
.nb-team-row .who { display: grid; min-width: 0; }
.nb-team-row .who b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.nb-team-row .who small { font-size: 11.5px; color: var(--muted-foreground); }
.nb-similar { display: grid; gap: 2px; margin: 0 -8px; }
.nb-similar .nb-list-row { padding: 6px 8px; }
.nb-similar .nb-list-row .nb-cover { width: 42px; }
.nb-ring-row { display: flex; gap: 14px; align-items: center; }
.nb-ring { --p: 0; width: 72px; height: 72px; flex: none; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--success) calc(var(--p) * 1%), var(--muted) 0); }
.nb-ring span { width: 56px; height: 56px; border-radius: 50%; background: var(--card-solid); display: grid; place-items: center; font-weight: 750; font-size: 14px; font-variant-numeric: tabular-nums; }
@media (max-width: 1180px) {
.nb-novel-grid { grid-template-columns: 230px minmax(0, 1fr); }
.nb-novel-right { grid-column: 2; position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 760px) {
.nb-novel-grid { grid-template-columns: 1fr; gap: 20px; }
.nb-novel-left, .nb-novel-right { position: static; max-height: none; grid-column: auto; }
.nb-novel-left { grid-template-columns: 130px minmax(0, 1fr); align-items: start; }
.nb-novel-cover { grid-row: span 2; }
.nb-facts, .nb-novel-links { grid-column: 1 / -1; }
#Chapters .dat, #Chapters .st { display: none; }
}
.nb-novel-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
/* на широком экране все цифры — одной строкой, сколько бы их ни было (6 у читателя, 7 у команды) */
@media (min-width: 761px) {
.nb-novel-stats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.nb-novel-stats > div { padding-left: 12px; padding-right: 10px; }
}
/* телефон, 3 колонки: одинокая последняя клетка — на всю строку */
@media (max-width: 760px) { .nb-novel-stats > div:last-child:nth-child(3n+1) { grid-column: 1 / -1; } }
.nb-novel-stats > div { border-right: 1px solid var(--border); padding: 12px 14px; }
.nb-novel-stats b { font-size: 18px; }
.nb-novel-actions .nb-btn-primary { background-image: none !important; }
/* баннер объявлений сайта и переключатель языка */
.nb-site-banner { font-size: 13px; padding: 8px 0; text-align: center; background: color-mix(in oklab, var(--translator) 14%, var(--background)); border-bottom: 1px solid var(--border); }
.nb-site-banner.is-warning { background: color-mix(in oklab, var(--warning) 18%, var(--background)); }
.nb-lang-code { font-size: 11.5px; font-weight: 750; letter-spacing: .04em; }
.nb-lang > summary { list-style: none; }
.nb-lang > summary::-webkit-details-marker { display: none; }
/* ------------------------------------------------------------ читалка */
.nb-reader { --reader-bg: var(--background); --reader-fg: var(--foreground); --reader-muted: var(--muted-foreground); color: var(--reader-fg); position: relative; margin-top: -28px; padding-bottom: 20px; }
.nb-reader[class*="theme-"] { background: var(--reader-bg); box-shadow: 0 0 0 100vmax var(--reader-bg); clip-path: inset(0 -100vmax); }
.nb-reader.theme-paper { --reader-bg: #fbfaf7; --reader-fg: #26221d; --reader-muted: #6f675d; }
.nb-reader.theme-sepia { --reader-bg: #f4ecd8; --reader-fg: #3b2f22; --reader-muted: #7a6852; }
.nb-reader.theme-grey { --reader-bg: #34363a; --reader-fg: #e2e2e2; --reader-muted: #a8abb0; }
.nb-reader.theme-night { --reader-bg: #111111; --reader-fg: #c9c9c9; --reader-muted: #8a8a8a; }
.nb-reader.theme-ink { --reader-bg: #0f1623; --reader-fg: #d6dde8; --reader-muted: #8d9bb0; }
.nb-reader[class*="theme-"] .nb-reader-bar { background: color-mix(in oklab, var(--reader-bg) 90%, transparent); color: var(--reader-fg); }
.nb-reader[class*="theme-"] .nb-icon-btn, .nb-reader[class*="theme-"] .nb-reader-bar .nb-btn-ghost { color: var(--reader-muted); }
.nb-reader[class*="theme-"] .nb-reader-head h1, .nb-reader[class*="theme-"] .nb-reader-text { color: var(--reader-fg); }
.nb-reader-progress { position: fixed; left: 0; top: 0; height: 3px; width: 0; background: var(--primary); z-index: 2000; transition: width .12s linear; }
.nb-reader-bar { position: sticky; top: 60px; z-index: 40; display: flex; align-items: center; gap: 8px; padding: 8px 0; margin-bottom: 8px; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--background) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nb-reader-nav { display: flex; align-items: center; gap: 4px; flex: 0 1 460px; min-width: 0; margin-left: 8px; }
.nb-reader-select { flex: 1; min-width: 0; height: 34px !important; min-height: 0 !important; border-radius: var(--radius) !important; font-size: 13.5px !important; background: var(--card-solid); }
.nb-icon-btn.is-disabled { opacity: .35; cursor: default; }
.nb-reader-settings { position: absolute; right: 0; top: calc(100% + 8px); width: 330px; max-height: calc(100vh - 140px); overflow: auto; background: var(--popover); color: var(--foreground); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elev-3); padding: 16px; z-index: 60; }
.nb-reader-settings .grp { margin-bottom: 14px; }
.nb-reader-settings .grp:last-child { margin-bottom: 0; }
.nb-reader-settings .lbl { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 8px; }
.nb-reader-settings .nb-seg button { padding: 6px 10px; font-size: 12.5px; min-width: 34px; }
.nb-reader-settings .nb-seg button[disabled] { opacity: 1; font-variant-numeric: tabular-nums; cursor: default; }
.nb-swatches button { width: 32px; height: 32px; border-radius: 999px; border: 2px solid var(--border); cursor: pointer; padding: 0; }
.nb-swatches button.on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--primary); }
.nb-swatches .sw-paper { background: #fbfaf7; } .nb-swatches .sw-sepia { background: #f4ecd8; } .nb-swatches .sw-grey { background: #34363a; } .nb-swatches .sw-night { background: #111; } .nb-swatches .sw-ink { background: #0f1623; }
.nb-reader-build { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.nb-reader-build select { width: 100%; margin: 0; }
.nb-reader-surface { padding: 36px 0 10px; }
.nb-reader-head { max-width: var(--reader-width); margin: 0 auto 34px; text-align: center; }
.nb-reader-head .nb-eyebrow { display: inline-block; color: var(--reader-muted); }
.nb-reader-head h1 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(26px, 3.6vw, 38px); letter-spacing: -0.015em; margin: 8px 0 12px; }
.nb-reader-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--reader-muted); }
.nb-reader-text { max-width: var(--reader-width); margin: 0 auto; font-family: var(--font-serif); font-size: var(--reader-size); line-height: var(--reader-leading); overflow-wrap: break-word; }
.nb-reader.font-sans .nb-reader-text { font-family: var(--font-sans); }
.nb-reader.align-justify .nb-reader-text p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.nb-reader-text p { margin: 0 0 1em; }
.nb-reader-note { max-width: var(--reader-width); margin: 28px auto 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-radius: var(--radius-lg); border: 1px dashed var(--border); color: var(--reader-muted); font-size: 13.5px; }
.nb-reader .nb-chapter-nav { max-width: var(--reader-width); display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; margin: 30px auto 0; align-items: center; }
.nb-reader .nb-chapter-nav .nb-btn { height: auto; min-height: 52px; padding: 8px 16px; }
.nb-reader .nb-chapter-nav .nb-btn span { display: grid; text-align: left; line-height: 1.25; }
.nb-reader .nb-chapter-nav .nb-btn small { font-size: 11px; opacity: .7; font-weight: 500; }
.nb-reader .nb-chapter-nav > :last-child { justify-self: end; }
.nb-reader .nb-chapter-nav > :last-child span { text-align: right; }
.nb-reader-credits { max-width: var(--reader-width); margin: 22px auto 0; text-align: center; font-size: 13px; color: var(--reader-muted); }
.nb-reader-comments { max-width: 820px; margin: 48px auto 0; padding-top: 10px; scroll-margin-top: 130px; }
.nb-reader .nb-reactions { margin-top: 36px; }
@media (max-width: 700px) {
.nb-reader-bar .hide-sm { display: none; }
.nb-reader-settings { position: fixed; left: 8px; right: 8px; top: auto; bottom: 72px; width: auto; }
.nb-reader .nb-chapter-nav { grid-template-columns: 1fr 1fr; }
.nb-reader .nb-chapter-nav > .nb-btn-ghost { display: none; }
}
/* мобильная раскладка: ничего не должно распирать экран */
.nb-search { min-width: 0; }
.nb-section-head { flex-wrap: wrap; }
.nb-grid-2, .nb-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nb-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) {
.nb-grid-2, .nb-grid-3 { grid-template-columns: minmax(0, 1fr); }
.nb-header-inner { gap: 8px; }
.nb-actions { gap: 2px; }
.nb-actions .nb-btn-sm .lbl { display: none; }
.nb-actions summary.nb-btn-sm { width: 36px; padding: 0; justify-content: center; }
.nb-container, .container { padding-left: 16px; padding-right: 16px; }
.nb-hero-stats { gap: 18px; }
.nb-page-head { flex-direction: column; align-items: stretch; }
}
@media (max-width: 760px) {
.nb-novel-grid { grid-template-columns: minmax(0, 1fr); }
.nb-novel-left { grid-template-columns: 120px minmax(0, 1fr); }
.nb-novel-right { grid-template-columns: minmax(0, 1fr); }
.nb-novel-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nb-toc #Chapters td { padding: 10px 8px; }
.nb-reader-nav { flex: 1 1 auto; margin-left: 0; }
}
/* Roboto Serif (Google Fonts, раздаётся локально из /fonts) — дополнительный шрифт для чтения */
@font-face { font-family: "Roboto Serif"; font-style: italic; font-weight: 100 900; font-stretch: 100%; font-display: swap; src: url("/fonts/roboto-serif-cyrillic-italic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Roboto Serif"; font-style: italic; font-weight: 100 900; font-stretch: 100%; font-display: swap; src: url("/fonts/roboto-serif-latin-ext-italic.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto Serif"; font-style: italic; font-weight: 100 900; font-stretch: 100%; font-display: swap; src: url("/fonts/roboto-serif-latin-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto Serif"; font-style: normal; font-weight: 100 900; font-stretch: 100%; font-display: swap; src: url("/fonts/roboto-serif-cyrillic-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Roboto Serif"; font-style: normal; font-weight: 100 900; font-stretch: 100%; font-display: swap; src: url("/fonts/roboto-serif-latin-ext-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto Serif"; font-style: normal; font-weight: 100 900; font-stretch: 100%; font-display: swap; src: url("/fonts/roboto-serif-latin-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root { --font-serif-roboto: "Roboto Serif", Georgia, "Times New Roman", serif; }
.nb-reader.font-roboto .nb-reader-text, .nb-reader.font-roboto .nb-reader-head h1 { font-family: var(--font-serif-roboto); font-optical-sizing: auto; }
/* левая колонка тайтла: без внутренней прокрутки (она обрезала выпадающие меню) */
.nb-novel-left { position: static; max-height: none; overflow: visible; }
.nb-novel-actions > .nb-btn, .nb-novel-actions > * > .nb-btn { width: auto; }
.nb-novel-actions > a.nb-btn, .nb-novel-actions > button.nb-btn { width: 100%; }
.nb-novel-actions .nb-shelf { display: grid; grid-template-columns: minmax(0, 1fr) 40px 40px; gap: 8px; width: 100%; }
.nb-novel-actions .nb-shelf.is-guest { grid-template-columns: minmax(0, 1fr); }
.nb-novel-actions .nb-shelf > .nb-menu, .nb-novel-actions .nb-shelf > .nb-btn:first-child { min-width: 0; }
.nb-novel-actions .nb-shelf .nb-shelf-main { width: 100%; height: 40px; justify-content: space-between; }
.nb-novel-actions .nb-shelf .nb-shelf-main [data-lib-label] { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-novel-actions .nb-shelf .nb-shelf-toggle { width: 40px; height: 40px; padding: 0; justify-content: center; }
.nb-novel-actions .nb-shelf.is-guest > .nb-btn { width: 100%; height: 40px; }
.nb-novel-actions .nb-shelf .nb-dropdown { left: 0; right: auto; width: 100%; min-width: 220px; }
/* тень обложки (у .nb-cover position: relative) рисовалась поверх кнопок под ней */
.nb-novel-actions, .nb-facts, .nb-novel-links { position: relative; z-index: 1; }
/* Bootstrap 2 даёт всем формам margin-bottom — поиск в шапке съезжал вверх */
form.nb-search, .nb-header form, .nb-catalog-search { margin: 0; }
.nb-search { display: flex; align-items: center; }
.nb-search svg { top: 50%; transform: translateY(-50%); }
/* витрина главной — карусель карточек: /css/modules/carousel.css (views/site/_showcase.php) */
.nb-intro-band { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 24px; align-items: center; margin-top: 18px; padding: 18px 22px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.nb-intro-band .nb-eyebrow { margin-bottom: 4px; }
.nb-intro-band h1 { margin: 0; font-size: 22px; letter-spacing: -0.02em; }
.nb-intro-band h1 em { font-family: var(--font-serif); font-weight: 500; }
.nb-intro-band .nb-hero-stats { margin: 0; gap: 22px; }
.nb-intro-band .nb-hero-stats b { font-size: 18px; }
@media (max-width: 1100px) {
.nb-intro-band { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
/* сетки с неявной колонкой растягивались по длинным названиям (min-content) — ограничиваем */
.nb-novel-left, .nb-novel-right, .nb-similar, .nb-team, .nb-stack, .nb-novel-actions, .nb-catalog-side { grid-template-columns: minmax(0, 1fr); }
.nb-novel-grid > *, .nb-catalog > *, .nb-grid > * { min-width: 0; }
.nb-list-row, .nb-team-row, .nb-book-card, .nb-panel { min-width: 0; max-width: 100%; }
.nb-list-row .t, .nb-team-row .who b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-novel-title h1 { overflow-wrap: anywhere; }
.nb-toc #Chapters td.t .ttl a { overflow-wrap: anywhere; }
.nb-intro-band { grid-template-columns: minmax(0, 1fr) auto; }
/* ленты карточек на десктопе — ровная строка без обрезанных карточек (лишние скрываются); на телефоне — горизонтальная прокрутка */
@media (min-width: 861px) {
.nb-rail { display: grid; grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); grid-template-rows: auto; grid-auto-rows: 0; grid-auto-columns: unset; column-gap: 16px; row-gap: 0; overflow: hidden; padding-bottom: 0; scroll-snap-type: none; }
.nb-rail > * { min-width: 0; min-height: 0; overflow: hidden; }
}
.nb-header form.nb-search { margin: 0 0 0 auto; }
/* вход/регистрация: колонка сетки брала ширину по содержимому и карточка вылезала за экран */
.nb-auth { grid-template-columns: minmax(0, 1fr); }
/* v3*.css задают всем высоту 130px — у новых компонентов (настройки тайтла, глава, панели) шапки переносятся и наезжали на следующий блок */
.nb-main header:not(.nb-header) { height: auto; }
/* ============================================================ MOBILE (телефоны и планшеты)
* Шапка: логотип со словом, поиск свёрнут в иконку и раскрывается на всю ширину при фокусе,
* у вошедших смена темы переезжает в меню пользователя (.nb-hide-m / .nb-show-m в v3.php).
* Поля ввода ≥16px (иначе iOS увеличивает страницу при фокусе), кнопки шапки 40px,
* подвал снова виден (иначе справка, правила, заявки и анонсы недоступны с телефона), тосты над нижней панелью. */
.nb-show-m { display: none !important; }
@media (max-width: 860px) {
.nb-hide-m { display: none !important; }
.nb-dropdown .nb-show-m { display: flex !important; }
/* bootstrap-responsive.css даёт body отступы по 20px (≤767px): шапка не доходила до краёв, а поля страницы были 36px */
body { padding-left: 0; padding-right: 0; }
.nb-header-inner { position: relative; gap: 6px; }
.nb-logo { gap: 9px; min-width: 0; margin-right: auto; }
.nb-logo-mark { flex: none; }
.nb-logo-text { display: inline; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; letter-spacing: 0.04em; } /* «ER.IIIBA.RU» целиком влезает на 390 px */
.nb-header form.nb-search { flex: none; width: 40px; max-width: none; margin: 0; }
.nb-header .nb-search input[type="search"] {
width: 40px; height: 40px; padding: 0 0 0 40px; border-color: transparent; background: transparent; color: transparent;
cursor: pointer; -webkit-appearance: none; appearance: none; transition: none;
}
.nb-header .nb-search input[type="search"]::placeholder { color: transparent; }
.nb-header .nb-search input[type="search"]::-webkit-search-cancel-button { display: none; }
.nb-header .nb-search svg { left: 11px; width: 18px; height: 18px; color: var(--muted-foreground); }
.nb-header .nb-search:hover input[type="search"] { background: var(--muted); }
.nb-header .nb-search:focus-within { position: absolute; left: 16px; right: 16px; top: 10px; width: auto; z-index: 3; }
.nb-header .nb-search:focus-within input[type="search"] { width: 100%; padding: 0 12px 0 40px; border-color: var(--ring); background: var(--card-solid); color: var(--foreground); cursor: text; }
.nb-header .nb-search:focus-within input[type="search"]::placeholder { color: var(--muted-foreground); }
.nb-header .nb-search:focus-within input[type="search"]::-webkit-search-cancel-button { display: block; }
.nb-header .nb-search:focus-within svg { color: var(--foreground); }
.nb-actions { gap: 0; }
.nb-actions .nb-icon-btn { width: 40px; height: 40px; }
.nb-actions > .nb-menu > summary:not(.nb-btn) { padding: 4px; }
.nb-actions summary.nb-btn-sm { width: auto; height: 36px; padding: 0 12px; margin-left: 4px; }
.nb-actions .nb-btn-sm .lbl { display: inline; }
.nb-actions .nb-count { top: 4px; right: 3px; }
/* выпадающие меню шапки: не выше экрана, пункты под палец */
.nb-header .nb-dropdown { max-width: calc(100vw - 32px); max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); overflow-y: auto; overscroll-behavior: contain; }
.nb-header .nb-dropdown .head b { overflow-wrap: anywhere; }
.nb-header .nb-dropdown a, .nb-header .nb-dropdown button { min-height: 42px; }
.nb-header .nb-dropdown .nb-login-form button { min-height: 44px; }
.nb-header .nb-dropdown .nb-login-form input[type="text"], .nb-header .nb-dropdown .nb-login-form input[type="password"] { height: 44px; }
.nb-header .nb-dropdown .nb-login-form .nb-row { flex-wrap: nowrap; }
.nb-header .nb-dropdown .nb-login-form .nb-row a { width: auto; padding: 0 2px; color: var(--link); }
/* подвал: компактно в две колонки над нижней панелью */
.nb-footer { display: block; padding: 26px 0 20px; }
.nb-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
.nb-footer-grid > :first-child { grid-column: 1 / -1; }
.nb-footer-grid > :first-child p { margin-bottom: 4px; }
.nb-footer ul { gap: 0; }
.nb-footer li a { display: inline-block; padding: 7px 0; }
.nb-tabbar { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.nb-tabbar a { min-height: 40px; }
/* заголовок страницы: блоки друг под другом, одиночные кнопки — своей ширины, слева */
.nb-page-head { gap: 12px; }
.nb-page-head > * { flex: none; max-width: 100%; }
.nb-page-head > .nb-btn, .nb-page-head > a:only-child { align-self: flex-start; }
.nb-page-head h1 { font-size: 26px; overflow-wrap: anywhere; }
/* вкладки Bootstrap: одна строка с прокруткой вместо переноса */
.nav-tabs, .nav-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.nav-tabs::-webkit-scrollbar, .nav-pills::-webkit-scrollbar { display: none; }
.nav-tabs > li, .nav-pills > li { flex: none; }
/* модалки Bootstrap 2: крестик под палец, тело не выше экрана */
.modal-header .close { display: inline-grid; place-items: center; width: 40px; height: 40px; margin: -8px -10px 0 0; font-size: 26px; opacity: .6; }
.modal { max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow: auto; }
/* тосты nbToast (стили заданы инлайном): во всю ширину над нижней панелью */
#nb-toasts { left: 16px !important; right: 16px !important; max-width: none !important; bottom: calc(64px + 12px + env(safe-area-inset-bottom, 0px)) !important; }
/* вход и регистрация: карточка по ширине экрана с обычными полями */
.nb-auth { padding: 8px 0 24px; }
.nb-auth-card { box-sizing: border-box; padding: 24px 20px; box-shadow: var(--elev-2); }
.nb-auth-card h1 { font-size: 24px; }
/* старые формы Bootstrap (form-horizontal): поля по ширине экрана, а не 206px */
.form-horizontal .controls > :is(input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="number"], select, textarea) { width: 100%; max-width: 100%; box-sizing: border-box; }
/* полоса цифр на главной: цифры в ряд, кнопки под ними (колонка «auto» съедала всю ширину, кнопки наезжали на цифры) */
.nb-intro-band { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; }
.nb-intro-band .nb-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.nb-intro-band > .nb-row { flex-wrap: nowrap; }
.nb-intro-band > .nb-row > .nb-btn { flex: 1 1 auto; min-width: 0; height: 42px; }
/* кнопки и чипы под палец: 40 / 36 / 30px, кликабельные чипы не ниже 28px */
.nb-btn, .btn { height: 40px; }
.nb-btn-sm, .btn-small { height: 36px; padding: 0 12px; }
.btn-mini { height: 30px; padding: 0 9px; }
.nb-btn-lg, .btn-large { height: 46px; }
a.nb-chip, button.nb-chip, label.nb-chip { min-height: 28px; box-sizing: border-box; }
/* выпадающие меню Bootstrap (инструменты оглавления и т. п.) не шире экрана, у правых групп — от правого края */
.dropdown-menu { max-width: calc(100vw - 32px); }
.dropdown-menu li > a { white-space: normal; padding-top: 9px; padding-bottom: 9px; }
#moderator-toolbar .btn-group:not(:first-child) .dropdown-menu { left: auto; right: 0; }
/* длинные слова и ссылки не распирают экран */
.nb-main { overflow-wrap: break-word; }
.nb-main pre { max-width: 100%; overflow-x: auto; }
}
/* поля ≥16px на телефонах и сенсорных экранах (кроме рабочего места перевода и rich-редактора — их вёрстка своя) */
@media (max-width: 860px), (pointer: coarse) {
body:not(.route-chapter-index) :is(input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="url"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"], input:not([type]), select, textarea):not(.nbed *) { font-size: 16px !important; }
}
@media (max-width: 380px) {
.nb-actions summary.nb-btn-sm .lbl { display: none; }
.nb-actions summary.nb-btn-sm { width: 40px; padding: 0; justify-content: center; }
}
@media (max-width: 359px) {
.nb-header-inner:has(.nb-avatar) .nb-logo-text { display: none; }
}
@media (max-width: 480px) {
.nb-header-inner:has(.nb-coins-chip) .nb-logo-text { display: none; }
}
/* ------------------------------------------------------------ MOBILE: каталог и поиск
* Фильтры и разделы на телефоне — свёрнутые блоки-кнопки (catalog.php / search/index_side.php закрывают их скриптом),
* сортировки — одна строка с прокруткой. На десктопе «Разделы» — заголовок-переключатель, как раньше. */
.nb-sections > summary { list-style: none; cursor: pointer; }
.nb-sections > summary::-webkit-details-marker { display: none; }
.nb-filters-fold > summary { display: none; }
.nb-m-only { display: none !important; }
@media (max-width: 900px) {
.nb-catalog { gap: 14px; }
.nb-catalog-side { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: start; overflow: visible; padding: 0; }
.nb-catalog-side > details.nb-filters { min-width: 0; padding: 0 14px; }
.nb-catalog-side > details.nb-filters[open] { grid-column: 1 / -1; padding-bottom: 14px; }
.nb-catalog-side > details.nb-filters > summary, .nb-filters-fold > summary {
display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 -14px; padding: 0 14px; box-sizing: border-box;
font: 650 14px/1.2 var(--font-sans); letter-spacing: -0.01em; text-transform: none; color: var(--foreground); list-style: none; cursor: pointer;
}
.nb-filters-fold > summary::-webkit-details-marker { display: none; }
.nb-catalog-side > details > summary::after, .nb-filters-fold > summary::after {
content: ""; flex: none; width: 7px; height: 7px; margin-left: auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
transform: translateY(-2px) rotate(45deg); opacity: .6; transition: transform .15s;
}
.nb-catalog-side > details[open] > summary::after, .nb-filters-fold[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.nb-catalog-side > details > summary .nb-chip { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nb-m-only { display: inline-flex !important; }
.nb-sections nav { padding-top: 4px; }
.nb-filters-fold { grid-column: 1 / -1; min-width: 0; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.nb-filters-fold[open] { padding-bottom: 2px; }
.nb-filters-fold > .nb-filters { padding: 0 0 12px; border: 0; background: transparent; }
.nb-filters-fold > .nb-filters > .grp:first-of-type { margin-top: 6px; }
.nb-filters-fold .nb-filters-title { display: none !important; }
.nb-filters .nb-check { display: flex; align-items: center; gap: 8px; min-height: 34px; margin: 0; }
.nb-catalog-bar { flex-wrap: nowrap; gap: 10px; margin-bottom: 14px; }
.nb-catalog-bar > .nb-row { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 16px 2px 0; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); }
.nb-catalog-bar > .nb-row::-webkit-scrollbar { display: none; }
.nb-catalog-bar > .nb-row > * { flex: none; }
.nb-catalog-bar .nb-chip { min-height: 32px; padding: 0 12px; }
.nb-catalog-bar .nb-seg { flex: none; }
.nb-catalog-bar .nb-seg a { width: 40px; height: 34px; }
.nb-catalog-bar h2 { font-size: 18px; margin: 0; }
}
/* ------------------------------------------------------------ MOBILE: страница тайтла
* Три колонки складываются в одну: обложка рядом с названием, под ними кнопки, оценка, теги, цифры, описание,
* сведения, оглавление, рецензии, комментарии, ссылки, затем команда и похожие (левая и центральная колонки — display: contents). */
/* планшет (две колонки): оглавление не влезало в центральную колонку на ~30px — колонку «Активность» прячем */
@media (min-width: 761px) and (max-width: 1180px) { #Chapters .dat { display: none; } }
/* выпадающее меню полки («В библиотеку») рисовалось под блоком сведений: у обоих z-index 1 */
.nb-novel-actions { z-index: 5; }
@media (max-width: 760px) {
.nb-novel-grid { grid-template-columns: 108px minmax(0, 1fr); column-gap: 16px; row-gap: 0; }
.nb-novel-left, .nb-novel-main { display: contents; }
.nb-novel-left > *, .nb-novel-main > *, .nb-novel-grid > .nb-novel-right { grid-column: 1 / -1; min-width: 0; }
.nb-novel-left > .nb-novel-cover { grid-column: 1; grid-row: 1; align-self: start; }
.nb-novel-main > .nb-novel-title { grid-column: 2; grid-row: 1; align-self: center; margin: 0; }
.nb-novel-cover .nb-cover { box-shadow: var(--elev-2); }
.nb-novel-title .nb-novel-chips { gap: 4px; }
.nb-novel-title .nb-novel-chips .nb-chip { font-size: 11px; padding: 1px 7px; }
.nb-novel-title h1 { font-size: 22px; line-height: 1.15; margin: 8px 0 4px; }
.nb-novel-alt, .nb-novel-author { font-size: 13px; }
.nb-novel-actions { order: 1; margin-top: 16px; }
.nb-novel-rating { order: 2; margin: 16px 0 4px; }
.nb-novel-main > .dc-book-tags { order: 3; margin-top: 10px; }
.nb-novel-stats { order: 4; margin: 16px 0 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nb-novel-stats > div { padding: 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: -1px; }
.nb-novel-stats > div:nth-child(3n) { border-right: 0; }
.nb-novel-stats b { font-size: 17px; }
.nb-novel-main > #about { order: 5; margin-top: 22px; }
.nb-novel-left > .nb-facts { order: 6; margin-top: 18px; }
.nb-novel-main > #toc { order: 7; }
.nb-novel-main > #reviews { order: 8; }
.nb-novel-main > #comments { order: 9; }
.nb-novel-left > .nb-novel-links { order: 10; margin-top: 26px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
.nb-novel-links a { min-height: 32px; }
.nb-novel-grid > .nb-novel-right { order: 11; margin-top: 28px; }
.nb-novel-section { scroll-margin-top: 116px; }
.nb-novel-tabs { margin: 0 -16px 18px; padding: 5px 16px; border-width: 0 0 1px; border-radius: 0; }
.nb-novel-tabs a { padding: 8px 11px; }
.nb-novel-tabs a.end { margin-left: 0; }
.nb-novel-backdrop { height: 300px; }
.nb-novel-actions .nb-btn-lg { height: 48px; }
.nb-novel-actions .nb-shelf { grid-template-columns: minmax(0, 1fr) 44px 44px; }
.nb-novel-actions .nb-shelf .nb-shelf-main, .nb-novel-actions .nb-shelf .nb-shelf-toggle, .nb-novel-actions .nb-shelf.is-guest > .nb-btn { height: 44px; }
.nb-novel-actions .nb-shelf .nb-shelf-toggle { width: 44px; }
.nb-novel-actions > button.nb-btn { height: 44px; }
/* оглавление: номер и название в одной строке, прогресс — только цифрой */
.nb-toc #Chapters thead { display: none; }
.nb-toc #Chapters { border-spacing: 0 6px; }
.nb-toc #Chapters tbody td { padding: 10px 6px; }
.nb-toc #Chapters tbody td:first-child { padding-left: 10px; }
.nb-toc #Chapters tbody td:last-child { padding-right: 10px; }
#Chapters td.t { display: table-cell; }
#Chapters td.t .num { float: left; margin-right: 10px; }
#Chapters td.t .ttl { display: block; overflow: hidden; padding-top: 3px; line-height: 1.35; }
#Chapters .nb-ready-cell .nb-progress { display: none; }
#Chapters .nb-ready-cell span { min-width: 0; font-size: 12px; color: var(--muted-foreground); }
#Chapters td.act-cell .nb-btn-sm { height: 34px; padding: 0 12px; }
.nb-toc-filter { width: 100%; height: 40px !important; }
}
/* ------------------------------------------------------------ MOBILE pass 2: small shared links on touch screens
* "All updates" / "Full ranking" next to section titles and "Whole team" under a panel were 20 px lines: the hit area
* grows to 40 px without moving anything. Popular searches on the home page (10-12 px words) become 36 px chips. */
@media (max-width: 760px), (pointer: coarse) {
.nb-section-head a { padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px; }
.nb-panel-more { padding: 10px 0; margin: 0 0 -10px; }
.nb-novel-links a, .nb-novel-links .nb-report-link { min-height: 36px; }
.cloud { gap: 8px 6px; align-items: center; }
.cloud a {
display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; box-sizing: border-box;
border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); font-size: 13.5px !important; opacity: 1;
}
/* page links 40 px; Bootstrap's fixed 36 px height of .pagination let a second row of links spill over what follows */
.pagination { height: auto; }
.pagination ul > li > a, .pagination ul > li > span, ul.yiiPager li a { display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; padding: 0 8px; }
.pagination ul > li.disabled { display: none; }
}
/* tablets (two columns, the main one ~470-650 px wide): chapter status and progress bar give way to the title, which
wrapped to 5-6 lines (phones hide them too, "37%" still shows progress); the numbers under the title broke inside
"139,595" */
@media (min-width: 761px) and (max-width: 1000px) {
#Chapters .st, #Chapters .nb-ready-cell .nb-progress { display: none; }
.nb-novel-stats > div { padding: 10px 12px; }
.nb-novel-stats b { font-size: clamp(14px, 1.9vw, 18px); white-space: nowrap; }
}