/* Statistics workbench. All overrides stay inside its dedicated layout. */
.statistics-debug .debug-rating-editor { min-width: 185px; max-width: 310px; white-space: normal; font-weight: 400; }
.statistics-debug .debug-rating-editor input { width: 100%; max-width: 200px; font-variant-numeric: tabular-nums; }
.statistics-debug .debug-rating-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0; }
.statistics-debug .debug-rating-editor button { min-height: 30px; font-size: 11px; padding: 5px 9px; }
.statistics-debug .debug-rating-editor .debug-error { max-width: 310px; white-space: normal; margin: 5px 0; }
.statistics-debug {
    --debug-ink: #183735;
    --debug-muted: #526c6a;
    --debug-line: #dce6e4;
    --debug-green: #13795b;
    background: #f3f7f6;
    color: var(--debug-ink);
    font: 14px/1.45 "Segoe UI", Arial, sans-serif;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: left;
}
.statistics-debug *, .statistics-debug *::before, .statistics-debug *::after { box-sizing: border-box; }
.statistics-debug, .statistics-debug * { scrollbar-width: thin !important; scrollbar-color: #a5bdb6 #eef3f1 !important; }
.statistics-debug::-webkit-scrollbar, .statistics-debug *::-webkit-scrollbar { display: block !important; width: 8px; height: 8px; }
.statistics-debug::-webkit-scrollbar-thumb, .statistics-debug *::-webkit-scrollbar-thumb { background: #a5bdb6; border-radius: 6px; }
.statistics-debug h1, .statistics-debug h2, .statistics-debug h3, .statistics-debug p { font-family: inherit; color: inherit; text-transform: none; margin: 0; letter-spacing: normal; }
.statistics-debug h1 { font-size: 25px; line-height: 1.25; font-weight: 700; }
.statistics-debug h2 { font-size: 17px; font-weight: 700; }
.statistics-debug h3 { font-size: 16px; margin: 0 0 12px; }
.statistics-debug button, .statistics-debug input, .statistics-debug select { font: inherit; color: var(--debug-ink); }
.statistics-debug button, .statistics-debug select, .statistics-debug input:not([type="checkbox"]) { border: 1px solid var(--debug-line); border-radius: 8px; padding: 8px 11px; background: #fff; min-height: 36px; }
.statistics-debug button { cursor: pointer; line-height: 1.3; }
.statistics-debug button:hover { background: #edf6f2; border-color: #bad1c8; }
.statistics-debug button:disabled { opacity: .48; cursor: default; }
.statistics-debug button:focus-visible, .statistics-debug input:focus-visible, .statistics-debug select:focus-visible, .statistics-debug summary:focus-visible, .statistics-debug a:focus-visible { outline: 3px solid #52a6c2; outline-offset: 2px; }
.statistics-debug a { color: #1976a3; text-decoration: none; }
.statistics-debug .debug-header { padding: 18px 28px; border-bottom: 1px solid var(--debug-line); background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.statistics-debug .debug-header > a { font-size: 13px; font-weight: 600; }
.statistics-debug .debug-eyebrow { display: block; color: var(--debug-green); font-size: 10px; letter-spacing: .12em; font-weight: 750; margin-bottom: 5px; }
.statistics-debug .debug-workspace { max-width: 1680px; margin: 0 auto; padding: 20px 28px 40px; display: grid; gap: 14px; }
.statistics-debug .debug-sections { display: grid; gap: 12px; min-width: 0; }
.statistics-debug .debug-filters { background: #fff; border: 1px solid var(--debug-line); border-radius: 12px; padding: 16px; box-shadow: 0 4px 14px #123d3a05; }
.statistics-debug .debug-filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.statistics-debug .debug-field-label, .statistics-debug .debug-toolbar > label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 650; color: var(--debug-muted); }
.statistics-debug .debug-selected { display: flex; margin-top: 5px; }
.statistics-debug .debug-selected > button:first-child { display: block; flex: 1; min-width: 0; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.statistics-debug .debug-selected > button + button { margin-left: 5px; }
.statistics-debug .debug-entity-picker { position: relative; min-width: 0; }
.statistics-debug .debug-picker-popup { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin-top: 6px; padding: 10px; border-radius: 10px; border: 1px solid #b8d4ca; background: #fff; box-shadow: 0 14px 32px #123d3a25; }
.statistics-debug .search-container { width: 100%; display: block; margin: 0 0 7px; padding: 0; }
.statistics-debug .search-input-shell { width: 100%; }
.statistics-debug .chat-input-find { width: 100%; border-radius: 7px; color: var(--debug-ink); background: #fff; font-family: inherit; text-align: left; font-size: 14px; }
.statistics-debug .debug-search-results { list-style: none; margin: 0 0 6px; padding: 0; max-height: 260px; overflow-y: auto; }
.statistics-debug .debug-search-results button { display: block; width: 100%; text-align: left; border: 0; padding: 7px 8px; }
.statistics-debug .debug-search-results small { display: block; color: var(--debug-muted); font-size: 11px; }
.statistics-debug .debug-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.statistics-debug .debug-toolbar select { max-width: 340px; font-size: 13px; }
.statistics-debug .debug-toolbar input[type="number"] { width: 120px; }
.statistics-debug .debug-primary { color: #fff; background: var(--debug-green); border-color: var(--debug-green); font-weight: 650; }
.statistics-debug .debug-primary:hover { color: #fff; background: #0b6048; }
.statistics-debug .debug-toolbar .debug-auto { display: flex; flex-direction: row; gap: 7px; align-items: center; align-self: center; margin-top: 15px; font-size: 12px; cursor: pointer; }
.statistics-debug input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--debug-green); }
.statistics-debug .debug-updated { margin-left: auto; font-size: 11px; color: var(--debug-muted); align-self: center; text-align: right; }
.statistics-debug .debug-updated small { display: block; font-size: 10px; }
.statistics-debug .calendar-date-picker__trigger { width: auto; min-width: 130px; color: var(--debug-ink); background: #fff; border-radius: 8px; }
.statistics-debug .calendar-date-picker__label { color: var(--debug-ink); font-family: inherit; }
.statistics-debug .debug-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.statistics-debug .debug-kpi { background: #fff; border: 1px solid var(--debug-line); border-top: 3px solid #8bbfad; border-radius: 10px; padding: 12px 14px; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.statistics-debug .debug-kpi > span { font-size: 11px; font-weight: 650; color: var(--debug-muted); }
.statistics-debug .debug-kpi > strong { font-size: clamp(17px, 1.55vw, 26px); line-height: 1.5; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.statistics-debug .debug-kpi > small { font-size: 9px; color: var(--debug-muted); }
.statistics-debug .debug-panel { background: #fff; border: 1px solid var(--debug-line); border-radius: 11px; min-width: 0; overflow: clip; }
.statistics-debug .debug-panel-heading { width: 100%; border: 0; border-radius: 0; display: flex; justify-content: space-between; gap: 10px; text-align: left; color: var(--debug-ink); padding: 13px 16px; font-size: 14px; font-weight: 650; cursor: pointer; list-style-position: inside; background: #fff; }
.statistics-debug summary.debug-panel-heading { display: list-item; }
.statistics-debug .debug-panel-body { padding: 0 16px 16px; }
.statistics-debug .debug-panel-body > .debug-note, .statistics-debug .debug-panel-body > .debug-queue { margin: 10px 0; }
.statistics-debug .debug-section-title { padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.statistics-debug .debug-section-title > span { font-size: 11px; color: var(--debug-muted); }
.statistics-debug .debug-table-scroll { max-width: 100%; overflow-x: auto; }
.statistics-debug .debug-table { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.45; }
.statistics-debug .debug-table th { font-size: 10px; font-weight: 700; color: var(--debug-muted); background: #f4f8f6; white-space: nowrap; padding: 9px 13px; text-align: left; border-bottom: 1px solid var(--debug-line); }
.statistics-debug .debug-table td { padding: 9px 13px; text-align: left; vertical-align: top; border-bottom: 1px solid #ecf1ef; color: var(--debug-ink); font-variant-numeric: tabular-nums; }
.statistics-debug .debug-table tr:last-child td { border-bottom: 0; }
.statistics-debug .debug-table tbody tr:hover { background: #f7faf9; }
.statistics-debug .debug-table small { display: block; font-size: 10px; color: var(--debug-muted); overflow-wrap: anywhere; }
.statistics-debug .debug-table .debug-number { font-weight: 700; white-space: nowrap; }
.statistics-debug .debug-event-time { white-space: nowrap; }
.statistics-debug .debug-countdown { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.statistics-debug .debug-timer-visit { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; margin: 12px 0; }
.statistics-debug .debug-note { color: var(--debug-muted); font-size: 11px; line-height: 1.55; }
.statistics-debug .debug-format-panel > .debug-note { padding: 9px 16px; border-top: 1px solid var(--debug-line); background: #fafcfb; }
.statistics-debug .debug-status, .statistics-debug .debug-empty { color: var(--debug-muted); font-size: 12px; padding: 12px 0; }
.statistics-debug .debug-notice { padding: 10px 14px; background: #e8f4f8; color: #155d7a; border-radius: 8px; font-size: 12px; }
.statistics-debug .debug-error { border: 1px solid #f1c8c7; background: #fdf0ef; color: #943d3c; border-radius: 8px; padding: 10px 12px; font-size: 12px; margin: 8px 0; }
.statistics-debug .debug-warning, .statistics-debug .debug-table .debug-warning { color: #95600b; font-weight: 650; }
.statistics-debug .debug-actions { display: flex; justify-content: flex-end; gap: 7px; margin: 8px 0; }
.statistics-debug .debug-actions button { font-size: 11px; padding: 6px 9px; min-height: 30px; }
.statistics-debug .debug-chart { position: relative; height: 290px; max-width: 100%; }
.statistics-debug .debug-chart-data > summary { font-size: 12px; color: var(--debug-green); cursor: pointer; padding: 10px 0; }
.statistics-debug .debug-records { min-width: 720px; }
.statistics-debug .debug-record-fields { display: grid; grid-template-columns: minmax(120px, auto) minmax(100px, 1fr); gap: 5px 12px; margin: 10px 0 0; max-width: 650px; font: 11px/1.5 Consolas, monospace; }
.statistics-debug .debug-record-fields dt, .statistics-debug .debug-record-fields dd { margin: 0; overflow-wrap: anywhere; white-space: normal; }
.statistics-debug .debug-record-fields dd { color: #0b6048; }
.statistics-debug .debug-highlight { background: #e5f5ef; }
.statistics-debug .debug-access { padding: 40px 28px; }
.statistics-debug .debug-access > p { margin-top: 12px; }
@media (max-width: 1050px) {
    .statistics-debug .debug-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .statistics-debug .debug-updated { margin-left: 0; }
}
@media (max-width: 700px) {
    .statistics-debug .debug-header { padding: 16px; align-items: flex-start; }
    .statistics-debug h1 { font-size: 21px; }
    .statistics-debug .debug-header > a { font-size: 11px; white-space: nowrap; }
    .statistics-debug .debug-workspace { padding: 12px 10px 25px; }
    .statistics-debug .debug-filter-grid { grid-template-columns: 1fr; gap: 10px; }
    .statistics-debug .debug-filters { padding: 12px; }
    .statistics-debug .debug-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .statistics-debug .debug-section-title { align-items: flex-start; flex-direction: column; }
    .statistics-debug .debug-toolbar select { max-width: 270px; }
    .statistics-debug .debug-chart { height: 230px; }
}

/* Route snapshots contain the whole page, including its fixed header and footer. */
.route-page { min-height: 100dvh; view-transition-name: route-page; --loading-background: #7092be; }
.route-page--admin { --loading-background: var(--grey-background); }
.route-page__content--failed { visibility: hidden; pointer-events: none; }
.page-load-feedback { position: fixed; inset: 0; z-index: 100000; padding: 12px; background: var(--loading-background, #7092be); }
.page-load-feedback { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.route-page__content [tabindex="-1"]:focus { outline: none; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(route-page) { animation-duration: 280ms; }
::view-transition-old(route-page), ::view-transition-new(route-page) { animation-duration: 280ms; animation-timing-function: cubic-bezier(.2,.7,.2,1); animation-fill-mode: both; mix-blend-mode: normal; }
::view-transition-old(route-page) { animation-name: none; }
::view-transition-new(route-page) { animation-name: route-enter-right; }
html[data-page-direction="bottom"]::view-transition-new(route-page) { animation-name: route-enter-bottom; }
html[data-page-back="true"]::view-transition-new(route-page) { animation-name: none; z-index: 0; }
html[data-page-back="true"]::view-transition-old(route-page) { animation-name: route-leave-right; z-index: 1; }
html[data-page-back="true"][data-page-direction="bottom"]::view-transition-old(route-page) { animation-name: route-leave-bottom; }
@keyframes route-enter-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes route-leave-right { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes route-enter-bottom { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes route-leave-bottom { from { transform: translateY(0); } to { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* Shared application defaults (previously app.css and js/site.css). */
html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}


.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.list-eye {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    height: 100%;
    aspect-ratio: 1 / 1;
    width: auto;
    border: 2px solid #000;
    border-radius: 50%;
    object-fit: contain;
    box-sizing: border-box;
}

.delete-line-main-button {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-align: left;
}

@keyframes flash {
    0% {
        background-color: #ffff99;
    }

    50% {
        background-color: #ffcc00;
    }

    100% {
        background-color: transparent;
    }
}

.flash-highlight {
    animation: flash 1.2s ease-out;
    border: 2px solid #ffcc00;
    border-radius: 8px;
}

:root {
    --background-color: #7092be;
    --yellow-button-background: #ffc90e;
    --bs-secondary-bg-subtle: transparent;
    --screen-edge-gap: 10px;
    --top-banner-height: 82px; /* высота max-варианта верхнего баннера */
    --top-banner-offset: var(--item-gap);
    --bottom-banner-height: 82px; /* высота max-варианта нижнего баннера */
    --bottom-banner-to-footer-buttons-gap: var(--double-item-gap);
    --bottom-offset: calc(var(--fixed-footer-buttons-height) + var(--bottom-banner-to-footer-buttons-gap));
    --search-h: 0px;
    --top-ban-h: 0px;
    --bot-ban-h: 0px;
    --scroll-track: transparent;
    --scroll-width: 8px;
    --time: 10s;
    --interface-edge-gap: 16px;
    --mobile-interface-edge-gap: 4px;
    --main-menu-width: min(400px, calc(100vw - (2 * var(--interface-edge-gap))));
    --item-gap: 4px;
    --double-item-gap: calc(2 * var(--item-gap));
    --cursor-window-sentinel-height: 1px;
    --standard-contour-width: 2px;
    --contoured-item-gap: calc(var(--item-gap) + var(--standard-contour-width));
    --contoured-double-item-gap: calc(var(--double-item-gap) + var(--standard-contour-width));
    --footer-content-gap: var(--double-item-gap);
    --vertical-screen-edge-gap: var(--contoured-item-gap);
    --footer-button-desktop-size: var(--footer-button-mobile-size);
    --footer-button-mobile-size: 48px;
    --footer-gap-min: 1vw;
    --footer-gap: max(var(--footer-gap-min), 12px);
    --footer-screen-edge-gap: 2px;
    --footer-button-size: var(--footer-button-desktop-size);
    --footer-button-icon-padding: clamp(1px, calc(var(--footer-button-size) * 0.04), 3px);
    --footer-button-icon-size: calc((var(--footer-button-size) - (2 * var(--footer-button-icon-padding))) * 0.95);
    --fixed-footer-buttons-height: calc(var(--footer-button-size) + var(--item-gap));
    --blue-button-reference-height: var(--footer-button-size);
    --checkbox-with-button-size: var(--footer-button-size);
    --footer-toggle-size: var(--footer-button-size);
    --footer-buttons-height: calc(var(--footer-button-size) + (2 * var(--contoured-item-gap)));
    --cabinet-statistics-icon-height: calc(var(--footer-button-size) * 0.9);
    --cabinet-action-icon-height: var(--cabinet-statistics-icon-height);
    --book-cover-width: clamp(160px, 32.5vw, 200px);
    --book-cover-height: clamp(222.5px, 40vw, 275px);
    --readable-text-color: #101722;
    --readable-text-color-on-image: #f7fbff;
    --readable-glass-background: rgba(13, 19, 32, 0.42);
    --readable-glass-background-strong: rgba(8, 13, 23, 0.68);
    --readable-glass-background-light: rgba(247, 250, 255, 0.86);
    --readable-glass-border: rgba(255, 255, 255, 0.34);
    --readable-glass-border-strong: rgba(255, 255, 255, 0.48);
    --readable-blur-strength: 16px;
    --reader-panel-text-size: 16px;
    --admin-inactive-background: #c3c3c3;
    --author-message-bubble-background: #d4d4d4;
    --base-grey-background: #7f7f7f;
    --grey-background: var(--base-grey-background);
}

/* The administrator keeps the page canvas on the shared dark gray while every
   nested neutral surface uses the administrator's inactive gray. */
#page-container.page--admin > *,
body:has(#page-container.page--admin) > :not(#page-container):not(.route-page) {
    --grey-background: var(--admin-inactive-background);
}

.cursor-window {
    min-width: 0;
    overflow-anchor: none;
}

.cursor-window__sentinel {
    width: 100%;
    height: var(--cursor-window-sentinel-height);
    pointer-events: none;
}

.cursor-window__item {
    min-width: 0;
}

@media (max-width: 768px) {
    :root {
        --interface-edge-gap: var(--mobile-interface-edge-gap);
        --footer-screen-edge-gap: var(--interface-edge-gap);
        --footer-button-size: var(--footer-button-mobile-size);
    }
}

html, body {
    background-color: var(--background-color);
    --bs-secondary-bg-subtle: transparent;
}

html, body, * {
    scrollbar-width: none !important;
    scrollbar-color: transparent transparent !important;
    -ms-overflow-style: none !important;
    scrollbar-gutter: auto !important;
}

::-webkit-scrollbar,
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-corner,
html::-webkit-scrollbar-track,
html::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-track,
body::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-corner,
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-corner {
    background: transparent !important;
    border: 0 !important;
}

#page-container,
main,
main > article.content,
.middle-container,
.books-scroll {
    scrollbar-width: none !important;
    scrollbar-color: transparent transparent !important;
    -ms-overflow-style: none !important;
    scrollbar-gutter: auto !important;
}

#page-container::-webkit-scrollbar,
main::-webkit-scrollbar,
main > article.content::-webkit-scrollbar,
.middle-container::-webkit-scrollbar,
.books-scroll::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}
/* 1. Корневой контейнер PDF-страниц (по умолчанию Colors.Background = #181818) */
.blazorpdf-pdf {
    background-color: transparent !important; /* белый фон вместо чёрного */
}

    /* 2. Обёртка вокруг canvas (у неё тоже инлайн-style с чёрным) */
    .blazorpdf-pdf > div > div {
        background-color: transparent !important;
    }
/* 1. Верхняя управляющая панель (toolbar) */
.blazorpdf-toolbar { /* сама панель */
    display: none !important;
    height: 0 !important; /* чтобы не осталось пустого места */
    min-height: 0 !important;
}

/* 2. Боковая панель с миниатюрами */
[id$="_thumbs"], /* <div id="..._thumbs"> — одна страница */
.blazorpdf-pdf__thumbnails, /* контейнер */
.blazorpdf-pdf__thumbnails-panel { /* fallback на старые версии */
    display: none !important;
    width: 0 !important;
}

/* 3. Делаем сам PDF на всю ширину после скрытия миниатюр */
.blazorpdf-pdf,
.blazorpdf__scroll { /* режим «много страниц» */
    margin: 0 auto !important;
    width: 100% !important;
}

.full-screen-background {
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

body.chapter-view-no-scroll {
    overflow: hidden;
    width: 100vw;
    height: 100dvh;
}

/* 1. Скрываем верхнюю панель (toolbar).  
   Проверяйте через DevTools, какие именно классы отвечают за верхнюю панель. */
.bs-secondary-bg-subtle,
.bg-secondary-subtle {
    background-color: transparent !important;
}

.pdf-container .bg-body-tertiary {
    display: none !important;
}

/* Блок, в котором лежит сам pdf, делаем на всю ширину */
.pdf-container .bb-pdfviewer-document-container,
.pdf-container .bb-pdfviewer-container {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

.centered-layout {
    display: flex;
    align-items: center;
}


.pdf-container {
    position: relative;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

    /* Сам PDF (iframe / canvas / svg внутри PdfViewerEx) */
    .pdf-container iframe,
    .pdf-container canvas,
    .pdf-container svg {
        display: block;
        width: 100%;
        height: 100%;
    }


@media (max-width: 768px) {
    .pdf-container {
        width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
    }
}

@media (min-width: 769px) {
    .pdf-container {
        height: 100vh;
        max-height: 100vh;
        width: 66.6667vw;
    }
}



.middle-container.chapter-view-main {
    align-items: stretch;
    overflow: hidden;
    height: 100%;
    max-height: 100%;
    min-height: 0;
}

.chapter-book-stage {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 2400px;
    overflow: visible;
    padding: 0;
    box-sizing: border-box;
}

.chapter-book {
    position: relative;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: 100%;
    filter: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}

.chapter-book--single-page {
    width: min(100%, var(--chapter-page-width, 100%)) !important;
    max-width: var(--chapter-page-width, 100%) !important;
    height: min(100%, var(--chapter-page-height, 100%)) !important;
    max-height: 100% !important;
    overflow: visible;
}

.chapter-book--dragging {
    cursor: grabbing;
}

.chapter-custom-surface {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
    perspective: 2200px;
    transform-style: preserve-3d;
    background: #fffdf7;
    border-radius: 6px;
    isolation: isolate;
}

.chapter-book--single-page .chapter-custom-surface::after {
    content: "";
    position: absolute;
    top: 1.2%;
    bottom: 1.2%;
    right: 0;
    z-index: 7;
    width: 6px;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(255, 248, 226, 0.00) 0%,
            rgba(255, 248, 226, 0.08) 42%,
            rgba(68, 42, 24, 0.10) 100%
        );
    border-radius: 0 6px 6px 0;
    opacity: 0.5;
}


.chapter-custom-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    border-radius: 4px;
    transform: translateZ(0);
}

.chapter-custom-layer--incoming {
    z-index: 1;
}

.chapter-custom-layer--current {
    z-index: 2;
}

.chapter-book--turn-next .chapter-custom-layer--incoming {
    z-index: 1;
}

.chapter-book--turn-next .chapter-custom-layer--current {
    z-index: 2;
}

.chapter-book--turn-prev .chapter-custom-layer--incoming {
    z-index: 1;
}

.chapter-book--turn-prev .chapter-custom-layer--current {
    z-index: 2;
}

.chapter-underlay-shade {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: none;
    pointer-events: none;
    overflow: hidden;
    border-radius: 4px;
    background: transparent;
    opacity: 0;
    will-change: clip-path;
    mix-blend-mode: multiply;
}

.chapter-book--flipping .chapter-underlay-shade {
    display: block;
}

.chapter-custom-layer--jump-in {
    z-index: 3;
    animation: chapter-page-jump-in 240ms ease-out both;
}

.chapter-custom-layer--jump-out {
    z-index: 2;
    animation: chapter-page-jump-out 240ms ease-out both;
}

.chapter-custom-layer--jump-in-next {
    transform-origin: right center;
}

.chapter-custom-layer--jump-in-prev {
    transform-origin: left center;
}

.chapter-turning-page {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: none;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform-origin: center center;
    transform-style: flat;
    background: #fffdf7;
    will-change: transform, clip-path;
    border-radius: 4px;
}

.chapter-turning-page--next {
    transform-origin: center center;
}

.chapter-turning-page--prev {
    transform-origin: center center;
}

.chapter-turning-page--visible {
    display: block;
}

.chapter-turning-page__face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 4px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    opacity: 1;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 253, 244, 0.16)),
        #fffdf7;
}

.chapter-turning-page__face--back {
    opacity: 1;
    visibility: hidden;
    transform: none;
}

.chapter-turning-page__shade {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(92, 64, 34, 0.2), rgba(255, 250, 235, 0.32) 42%, rgba(0, 0, 0, 0.13) 72%, rgba(0, 0, 0, 0));
    opacity: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.chapter-turning-page__edge {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1px;
    z-index: 4;
    width: 2px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.28), rgba(255, 255, 255, 0.46), rgba(0, 0, 0, 0.18));
    opacity: 0;
    transform: translateX(-50%);
}

@keyframes chapter-page-jump-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.992);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes chapter-page-jump-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(-6px) scale(1.006);
    }
}

.chapter-flip-page {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
}

.chapter-book::before {
    content: "";
    position: absolute;
    top: 2%;
    bottom: 2%;
    left: 50%;
    width: 26px;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 20;
    background:
        radial-gradient(ellipse at center, rgba(0, 0, 0, 0.32), transparent 65%);
    opacity: 0.55;
}

.chapter-book--single-page::before {
    display: none;
}

.chapter-flip-page {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #fffdf7;
    border-radius: 4px;
    border: 0;
    box-shadow: none;
    user-select: none;
    -webkit-user-select: none;
}

.chapter-flip-page.chapter-custom-layer,
.chapter-turning-page__face.chapter-flip-page {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.chapter-flip-page::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(rgba(90, 64, 43, 0.055) 0.7px, transparent 0.7px);
    background-size: 5px 5px;
    mix-blend-mode: normal;
    opacity: 0.12;
    z-index: 2;
}

.chapter-flip-page canvas {
    position: static !important;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #fffdf7;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    user-select: none;
    -webkit-user-select: none;
}

.chapter-book--flipping .chapter-flip-page::before,
.chapter-book--flipping .chapter-flip-page::after {
    opacity: 0 !important;
}

.chapter-book--flipping .chapter-flip-page {
    will-change: transform, clip-path;
}

.chapter-flip-page--loading {
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: rgba(74, 52, 38, 0.72);
    font-family: Georgia, serif;
    font-size: 16px;
}

@media (max-width: 768px) {
    .middle-container.chapter-view-main {
        width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        flex: 0 0 100dvh;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .chapter-book-stage {
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
        width: 100vw;
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
    }

    .chapter-book {
        width: 100vw;
        max-width: none;
        height: 100%;
        max-height: none;
        filter: none;
    }

    .chapter-book.chapter-book--single-page {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        flex: 0 0 auto;
    }

    .chapter-book.chapter-book--single-page .chapter-custom-surface,
    .chapter-book.chapter-book--single-page .chapter-custom-layer,
    .chapter-book.chapter-book--single-page .chapter-turning-page,
    .chapter-book.chapter-book--single-page .chapter-turning-page__face,
    .chapter-book.chapter-book--single-page .chapter-flip-page {
        border-radius: 0;
    }

    .chapter-book.chapter-book--single-page .chapter-custom-surface {
        box-shadow: none;
    }

    .chapter-book.chapter-book--single-page .chapter-flip-page canvas {
        object-fit: fill;
    }

    .chapter-book::before {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chapter-book,
    .chapter-custom-layer,
    .chapter-turning-page,
    .chapter-flip-page {
        transition: none !important;
        animation: none !important;
    }
}

.cabinet-button {
    margin: 5px;
    height: var(--blue-button-reference-height);
    min-height: var(--blue-button-reference-height);
    background-size: auto var(--cabinet-action-icon-height);
    background-position: center;
    background-repeat: no-repeat;
}

.cabinet-button--middle {
    margin-right: 3px;
    margin-left: 3px;
}

.cabinet-button--books-listened {
    background-image: url('/icons/headphones_finger_color.svg');
}

.cabinet-button--wallpaper {
    background-image: url('/icons/house_finger_color.svg');
}

.cabinet-button--awards {
    background-image: url('/icons/medal_finger_color.svg');
}

.cabinet-button--audio-pictures {
    background-image: url('/icons/film_finger_color.svg');
}

.cabinet-button--liked-books {
    background-image: url('/icons/likes_color.svg');
}

.cabinet-button--mut-list {
    background-image: url('/icons/lock_finger_color.svg');
}

.cabinet-button--comics {
    background-image: url('/icons/picture_finger_color.svg');
}

.cabinet-button--bookmarks {
    background-image: url('/icons/flag_finger_color.svg');
}

.cabinet-button--subscribers {
    background-image: url('/icons/ear_finger_color.svg');
}

.cabinet-button--books-read {
    background-image: url('/icons/book_finger_color.svg');
}

.cabinet-button--return {
    background-image: url('/icons/book_back_color.svg');
}

.cabinet-button--chat {
    background-image: url('/icons/message_finger_color.svg');
}

.cabinet-button--chat-blocked {
    background-image: url('/icons/message_no.svg');
}

.blue-button.cabinet-button:disabled,
.blue-button.cabinet-button[disabled] {
    background-color: var(--grey-background);
    border-color: #000000;
}

.cabinet-button:disabled {
    filter: grayscale(1);
}

.cabinet-button--books-listened:disabled {
    background-image: url('/icons/headphones_finger.svg');
}

.cabinet-button--wallpaper:disabled {
    background-image: url('/icons/house_finger.svg');
}

.cabinet-button--awards:disabled {
    background-image: url('/icons/medal_finger.svg');
}

.cabinet-button--audio-pictures:disabled {
    background-image: url('/icons/film_finger.svg');
}

.cabinet-button--liked-books:disabled {
    background-image: url('/icons/likes.svg');
}

.cabinet-button--mut-list:disabled {
    background-image: url('/icons/lock_finger.svg');
}

.cabinet-button--comics:disabled {
    background-image: url('/icons/picture_finger.svg');
}

.cabinet-button--bookmarks:disabled {
    background-image: url('/icons/flag_finger.svg');
}

.cabinet-button--subscribers:disabled {
    background-image: url('/icons/ear_finger.svg');
}

.cabinet-button--books-read:disabled {
    background-image: url('/icons/book_finger.svg');
}

.cabinet-button--return:disabled {
    background-image: url('/icons/book_back.svg');
}

.cabinet-button--chat:disabled {
    background-image: url('/icons/message_finger.svg');
}

.stackpanel.user-cabinet-actions {
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    margin-top: auto;
    gap: var(--contoured-item-gap);
    box-sizing: border-box;
}

.stackpanel-horizontal.user-cabinet-action-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    justify-content: stretch;
    align-items: center;
    column-gap: max(0px, calc((100% - (6 * var(--footer-button-size))) / 2));
}

.user-cabinet-action-row .cabinet-button {
    justify-self: center;
    width: min(100%, calc(2 * var(--footer-button-size)));
    min-width: 0;
    max-width: calc(2 * var(--footer-button-size));
    height: var(--footer-button-size);
    min-height: var(--footer-button-size);
    max-height: var(--footer-button-size);
    flex: none;
    margin: 0;
    padding: 0;
}

.award-display {
    height: 68px;
    width: 42px;
    border: 1px solid black;
    margin: 6px;
    border-radius: 8px;
}

.menu-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--contoured-item-gap);
    width: min(400px, calc(100% - (2 * var(--interface-edge-gap))));
    max-width: 400px;
    margin: 0 auto;
    box-sizing: border-box;
}


.menu-with-banners {
    margin: 0 auto;
    /* «буфер» сверху и снизу */
    padding-top: calc(var(--top-banner-offset) + var(--top-banner-height) + var(--contoured-item-gap));
    padding-bottom: calc(var(--bottom-banner-height) + var(--bottom-offset) + var(--contoured-item-gap));
}

.books-scroll {
    position: fixed;
    width: 400px;
    top: calc(var(--top-banner-offset) + var(--top-ban-h) + min(var(--contoured-item-gap), var(--top-ban-h)));
    bottom: calc(var(--bot-ban-h) + var(--bottom-offset) + var(--search-h) + min(var(--contoured-item-gap), var(--bot-ban-h)));
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.select-authors-list {
    display: flex;
    flex-direction: column;
    gap: var(--contoured-item-gap);
    width: min(100%, var(--main-menu-width));
    max-width: 400px;
    margin: 0 auto;
    box-sizing: border-box;
}

.select-authors-list > .blue-button {
    margin: 0;
}

.books-scroll.showcase-books-scroll {
    gap: calc(4 * var(--item-gap));
}

.showcase-books-scroll .cursor-window__item + .cursor-window__item {
    margin-top: calc(4 * var(--item-gap));
}

.top-book-100-middle > .books-scroll {
    gap: calc(4 * var(--item-gap));
}

.new-books-middle > .new-books-list {
    gap: var(--item-gap);
}

.new-books-list > .book-title-button-wrapper + .book-title-button-wrapper {
    margin-top: calc(3 * var(--item-gap));
}

.showcase-books-scroll .book-cover {
    width: var(--book-cover-width);
    height: var(--book-cover-height);
    margin: 0 auto;
}

.showcase-books-scroll .book-cover-container,
.showcase-books-scroll .book-cover__image {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
}

.showcase-books-scroll .book-cover__image {
    box-sizing: border-box;
    object-fit: cover;
    padding: 0;
}

.orange-header {
    background-color: #ff7f27;
    width: var(--main-menu-width);
    max-width: 400px;
    margin: 0 auto;
    height: 44px;
    max-height: 44px;
    text-align: center;
    padding: 10px 0;
    box-sizing: border-box;
    border-radius: 22px 22px 0 0;
    color: black;
    font-size: 20px;
    font-weight: bold;
}

.grey-header {
    background-color: var(--grey-background);
    width: var(--main-menu-width);
    max-width: 400px;
    margin: 0 auto;
    height: 44px;
    max-height: 44px;
    text-align: center;
    padding: 10px 0;
    box-sizing: border-box;
    border-radius: 22px 22px 0 0;
    color: black;
    font-size: 20px;
    font-weight: bold;
}

:is(h1, h2, h3, h4, h5, h6, button).orange-header,
:is(h1, h2, h3, h4, h5, h6, button).grey-header {
    display: flex;
    align-items: center;
    justify-content: center;
    /* A four-pixel top inset moves the centered line box down by two pixels,
       optically centering capital letters rather than the font descent. */
    padding-block: var(--item-gap) 0;
}

/* Icon headers must override the optical text inset on heading elements. */
.grey-header.grey-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: max(44px, var(--cabinet-action-icon-height));
    max-height: none;
    padding: 0;
}

.grey-header-icon__image {
    display: block;
    width: auto;
    max-width: 100%;
    height: var(--cabinet-action-icon-height);
    max-height: 100%;
    object-fit: contain;
}

.bottom-container {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 9999;
}


/* #region ToggleButton */
.toggle-container {
    --toggle-icon-size: 60px;
    --toggle-circle-size: var(--toggle-icon-size);
    --toggle-gap: var(--double-item-gap);
    display: flex;
    align-items: center;
    column-gap: var(--toggle-gap);
    width: 100%;
    justify-items: center;
    width: fit-content;
}

.icon-left,
.icon-right {
    background-color: var(--grey-background);
    border: 2px solid #000000;
    color: white;
    width: var(--toggle-icon-size);
    height: var(--toggle-icon-size);
    font-size: var(--footer-button-icon-size);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
    z-index: 2;
    grid-row: 1;
}

.icon-left,
.icon-right {
    flex: 0 0 var(--toggle-icon-size);
}

    .icon-left img,
    .icon-right img {
        width: var(--footer-button-icon-size);
        height: var(--footer-button-icon-size);
        object-fit: contain;
        padding: 0;
        box-sizing: border-box;
    }

.switch {
    flex: 1 1 auto;
    min-width: clamp(90%, 100%, 20vw);
    height: var(--toggle-circle-size);
    background-color: var(--grey-background);
    border-radius: 25px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #000000;
    grid-column: 2;
    grid-row: 1;
}

.circle {
    background-color: #00a2e8;
    border: 2px solid #000000;
    color: white;
    width: var(--toggle-circle-size);
    height: var(--toggle-circle-size);
    font-size: var(--footer-button-icon-size);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: left 0.3s ease;
    pointer-events: none;
}

    .circle img {
        width: var(--footer-button-icon-size);
        height: var(--footer-button-icon-size);
        object-fit: contain;
        padding: 0;
        box-sizing: border-box;
    }

.slider-range {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-appearance: none;
    cursor: pointer;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}

    .slider-range::-webkit-slider-runnable-track {
        background: transparent;
        height: 4px;
    }

    .slider-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 0px;
        height: 0px;
    }

    .slider-range::-moz-range-track {
        background: transparent;
        height: 4px;
    }

    .slider-range::-moz-range-thumb {
        width: 0px;
        height: 0px;
        border: none;
    }

    .slider-range::-ms-track {
        background: transparent;
        height: 4px;
        border-color: transparent;
        color: transparent;
    }

    .slider-range::-ms-thumb {
        width: 0px;
        height: 0px;
    }

.toggle-container .icon-left.selected,
.toggle-container .icon-right.selected {
    background-color: green;
}

.toggle-container.toggle-container--disabled {
    cursor: default;
}

.toggle-container.toggle-container--disabled .icon-left,
.toggle-container.toggle-container--disabled .icon-right,
.toggle-container.toggle-container--disabled .switch,
.toggle-container.toggle-container--disabled .circle,
.toggle-container.toggle-container--disabled .icon-left.selected,
.toggle-container.toggle-container--disabled .icon-right.selected {
    background-color: var(--grey-background);
}

.toggle-container.toggle-container--disabled .slider-range {
    cursor: default;
    pointer-events: none;
}

/* #endregion */

/* #region VerticalToggleButton */
.vertical-toggle-container {
    --vertical-toggle-width: var(--footer-button-size);
    --vertical-toggle-height: calc(2 * var(--footer-button-size));
    --vertical-toggle-circle-size: var(--vertical-toggle-width);
    --vertical-toggle-border-width: 2px;
    display: flex;
    width: var(--vertical-toggle-width);
    height: var(--vertical-toggle-height);
    box-sizing: border-box;
}

.vertical-switch {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--grey-background);
    border: var(--vertical-toggle-border-width) solid #000000;
    border-radius: 9999px;
    box-sizing: border-box;
}

.vertical-toggle-hitbox {
    position: absolute;
    left: calc(var(--vertical-toggle-border-width) * -1);
    right: calc(var(--vertical-toggle-border-width) * -1);
    width: auto;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-sizing: border-box;
    cursor: pointer;
    z-index: 1;
}

.vertical-toggle-hitbox-top,
.vertical-toggle-hitbox-top-third {
    top: 0;
}

.vertical-toggle-hitbox-top,
.vertical-toggle-hitbox-bottom {
    height: 50%;
}

.vertical-toggle-hitbox-top {
    border-radius: 9999px 9999px 0 0;
}

.vertical-toggle-hitbox-bottom {
    bottom: 0;
    border-radius: 0 0 9999px 9999px;
}

.vertical-toggle-hitbox-top-third,
.vertical-toggle-hitbox-middle,
.vertical-toggle-hitbox-bottom-third {
    height: 33.333%;
}

.vertical-toggle-hitbox-middle {
    top: 33.333%;
}

.vertical-toggle-hitbox-bottom-third {
    bottom: 0;
}

.vertical-toggle-hitbox:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.vertical-circle {
    position: absolute;
    left: 50%;
    width: var(--vertical-toggle-circle-size);
    height: var(--vertical-toggle-circle-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00a2e8;
    border: var(--vertical-toggle-border-width) solid #000000;
    border-radius: 50%;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    transition: top 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
    user-select: none;
    z-index: 2;
}

.vertical-toggle-container--dragging .vertical-circle {
    cursor: grabbing;
    transition: none;
}

.vertical-circle img {
    width: var(--footer-button-icon-size);
    height: var(--footer-button-icon-size);
    object-fit: contain;
    padding: 0;
    box-sizing: border-box;
    pointer-events: none;
    user-select: none;
}

.vertical-circle-top {
    top: calc(var(--vertical-toggle-circle-size) / 2 - var(--vertical-toggle-border-width));
}

.vertical-circle-center {
    top: 50%;
}

.vertical-circle-bottom {
    top: calc(100% - var(--vertical-toggle-circle-size) / 2 + var(--vertical-toggle-border-width));
}
/* #endregion */

.header-container,
.fixed-header-container {
    position: sticky;
    top: var(--vertical-screen-edge-gap);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--contoured-item-gap);
    width: 100%;
    margin: var(--vertical-screen-edge-gap) auto var(--contoured-item-gap);
    z-index: 1000;
}

.header-center {
    display: flex;
    justify-content: center;
    width: var(--main-menu-width);
    max-width: 400px;
    box-sizing: border-box;
}

.header-center > .gray-button,
.header-center > .gray-button-for-reader,
.header-center > .grey-header,
.header-center > .orange-header,
.header-center > .silverBlue-header {
    width: 100%;
    max-width: 100%;
}

.header-container > .gray-button,
.header-container > .gray-button-for-reader,
.header-container > .grey-header,
.header-container > .orange-header,
.header-container > .silverBlue-header,
.fixed-header-container > .gray-button,
.fixed-header-container > .gray-button-for-reader,
.fixed-header-container > .grey-header,
.fixed-header-container > .orange-header,
.fixed-header-container > .silverBlue-header {
    width: var(--main-menu-width);
    max-width: 400px;
    box-sizing: border-box;
}

.header-center > .gray-button,
.header-container > .gray-button,
.fixed-header-container > .gray-button {
    height: var(--footer-button-size);
    min-height: var(--footer-button-size);
    max-height: var(--footer-button-size);
}

.silverBlue-header {
    background-color: #7092be;
    width: var(--main-menu-width);
    max-width: 400px;
    text-align: center;
    padding: 10px 0;
    border-radius: 15px 15px 0 0;
    color: black;
    font-size: 20px;
    font-weight: bold;
}

/* Общие стили для навигационных элементов на страницах просмотра глав */
.page-indicators {
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    z-index: 999;
    gap: .4rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease-in-out;
}

    .page-indicators.visible {
        opacity: 1;
    }

.circle-page {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--grey-background);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
}

.next-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #007bff;
    color: #fff;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

    @media (hover: hover) and (pointer: fine) {
        .next-button:hover {
            background-color: #0069d9;
        }
    }

    .next-button svg {
        width: 24px;
        height: 24px;
    }

.navigation-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 10px;
    z-index: 99999999;
    gap: 10px;
}

    .navigation-container .slider-wrapper {
        flex: 1;
        display: flex;
    }

.nav-button {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 8px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .nav-button svg {
        width: 24px;
        height: 24px;
        stroke: #333;
        fill: none;
    }

    .nav-button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    @media (hover: hover) and (pointer: fine) {
        .nav-button:hover:not(:disabled) {
            background-color: var(--grey-background);
        }
    }

.slider-container {
    position: relative;
    width: 100%;
}

    .slider-container .slider-progress-indicator {
        position: absolute;
        top: 40%;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #2ecc71;
        transform: translate(-50%, -50%);
        pointer-events: none;
        z-index: 2;
    }

    .slider-container input[type="range"] {
        width: 100%;
    }

        .slider-container input[type="range"]::-webkit-slider-thumb,
        .slider-container input[type="range"]::-moz-range-thumb,
        .slider-container input[type="range"]::-ms-thumb {
            opacity: 1 !important;
            -webkit-appearance: auto;
        }

.controls-wrapper {
    position: fixed;
    bottom: var(--item-gap);
    left: 0;
    z-index: 9999;
    width: 100%;
    transition: opacity .3s ease, transform .3s ease;
}

    .controls-wrapper.hidden {
        opacity: 0;
        transform: translateY(100%);
        pointer-events: none;
    }

    .controls-wrapper.visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

.top-control-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
}

.green {
    background: green;
}

.ordinary-center-text {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    text-align: center;
    padding: 10px 0;
    color: black;
    font-size: 20px;
    font-weight: bold;
}

.ordinary-center-text-yellow {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    text-align: center;
    color: var(--yellow-button-background);
    font-size: 20px;
    font-weight: bold;
    line-height: 1.15;
    /* Preserve surrounding layout while optically centering capital letters. */
    position: relative;
    top: calc(var(--item-gap) / 2);
}

.ordinary-left-text {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    text-align: left;
    padding: 10px 0;
    color: black;
    font-size: 18px;
    font-weight: bold;
}

.menu-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70vh;
}

.marquee-container {
    height: 30px;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

.marquee-inner {
    position: absolute;
    width: 300%;
    white-space: nowrap;
    animation: marquee-legacy 6s linear infinite alternate;
}

.marquee-viewport {
    --marquee-edge-inset: var(--double-item-gap);
    --marquee-edge-gutter: calc(2 * var(--marquee-edge-inset));
    display: block;
    width: max(0px, calc(100% - var(--marquee-edge-gutter)));
    min-width: 0;
    max-width: 100%;
    margin-inline: var(--marquee-edge-inset);
    overflow: hidden;
    text-align: center;
    contain: inline-size;
    box-sizing: border-box;
}

.marquee-track {
    display: block;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.marquee-text {
    display: block;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.marquee-viewport--animated {
    text-align: left;
}

.marquee-viewport.marquee-viewport--animated > .marquee-track {
    display: inline-flex;
    align-items: center;
    gap: var(--marquee-gap, 192px);
    width: max-content;
    min-width: max-content;
    max-width: none;
    text-align: left;
    animation: marquee-scroll var(--marquee-duration, 6s) linear infinite;
    will-change: transform;
}

.marquee-viewport.marquee-viewport--animated > .marquee-track > .marquee-text {
    flex: 0 0 auto;
    width: max-content;
    min-width: max-content;
    max-width: none;
    text-align: left;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(var(--marquee-start, 100%));
    }

    100% {
        transform: translateX(var(--marquee-end, -100%));
    }
}

@keyframes marquee-legacy {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}


.blue-button {
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px 0;
    height: var(--blue-button-reference-height);
    min-height: var(--blue-button-reference-height);
    background-color: #00a2e8;
    border: 2px solid black;
    color: black;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.1;
    padding: 0 10px;
    border-radius: 9999px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
}

.book-annotation-page__container {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    padding: 0;
    min-height: 0;
    overflow: hidden;
}

.book-annotation-page__content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
    gap: var(--item-gap);
    box-sizing: border-box;
    min-height: 0;
    overflow-y: auto;
}

.book-annotation-page__header {
    top: var(--contoured-item-gap);
    margin: var(--contoured-item-gap) auto var(--contoured-item-gap);
}

.book-annotation-page__header > .gray-button {
    width: var(--main-menu-width);
    max-width: 400px;
    box-sizing: border-box;
    margin: 0 auto;
}

.book-annotation-page__body {
    --book-annotation-side-width: calc(2 * var(--footer-button-size));
    --book-annotation-cover-spacing: 24px;
    --book-annotation-cover-width: clamp(
        0px,
        calc(100% - (2 * var(--book-annotation-side-width)) - var(--book-annotation-cover-spacing)),
        var(--book-cover-width)
    );
    --book-annotation-side-stack-height: calc((4 * var(--footer-button-size)) + (3 * var(--contoured-item-gap)));
    --book-annotation-layout-width: calc((2 * var(--book-annotation-side-width)) + var(--book-cover-width) + var(--book-annotation-cover-spacing));
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--item-gap);
    min-height: 0;
    width: min(100%, var(--book-annotation-layout-width));
    max-width: var(--book-annotation-layout-width);
    margin: 0 auto;
}

.book-annotation__details {
    display: flex;
    flex-direction: column;
    gap: var(--item-gap);
    width: min(100%, 400px);
    margin: 0 auto;
    flex: 0 0 auto;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    padding: 12px 16px;
    border-radius: 16px;
    box-sizing: border-box;
    color: #000;
}

.book-annotation__details--with-summary {
    flex: 1 1 auto;
}

.book-annotation__genres {
    flex: 0 0 auto;
    font-size: var(--reader-panel-text-size);
    line-height: 1.05;
}

.book-annotation__summary {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

.book-genres-display__line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.book-genres-display__line + .book-genres-display__line {
    margin-top: 2px;
}

.book-genres-display__diamond {
    width: 8px;
    height: 8px;
    margin-top: 5px;
    flex: 0 0 8px;
    transform: rotate(45deg);
    box-sizing: border-box;
}

.book-genres-display__diamond--filled {
    background-color: #000;
    border: 1px solid #000;
}

.book-genres-display__diamond--outline {
    background-color: transparent;
    border: 1px solid #000;
}

.book-genres-display__primary {
    min-width: 0;
    font-weight: 900 !important;
    word-break: break-word;
}

.book-genres-display__secondary-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
    min-width: 0;
    flex: 1 1 auto;
    font-weight: 400 !important;
}

.book-genres-display__secondary-list * {
    font-weight: 400 !important;
}

.book-genres-display__secondary-item {
    white-space: normal;
    word-break: break-word;
}

.book-annotation-page__content .summary-label {
    flex: 1;
    width: 100%;
    min-height: 0;
    max-height: none;
    height: 100%;
}

.book-annotation__summary .summary-label {
    display: block;
    width: 100%;
    border: none;
    border-radius: 0;
    padding: 0;
    color: inherit;
    background: transparent;
    font-size: var(--reader-panel-text-size);
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
}

.book-annotation__layout {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    flex-shrink: 0;
    flex-wrap: nowrap;
    min-height: 0;
    width: 100%;
    gap: 8px;
}

.book-annotation__side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: var(--contoured-item-gap);
    width: var(--book-annotation-side-width);
    min-width: var(--book-annotation-side-width);
    max-width: var(--book-annotation-side-width);
    min-height: var(--book-annotation-side-stack-height);
    align-self: stretch;
    flex: 0 0 var(--book-annotation-side-width);
}

    .book-annotation__side > * {
        width: var(--book-annotation-side-width);
        min-width: var(--book-annotation-side-width);
        max-width: var(--book-annotation-side-width);
        box-sizing: border-box;
    }

    .book-annotation__side .annotation-icon-button {
        height: var(--footer-button-size);
        min-height: var(--footer-button-size);
        max-height: var(--footer-button-size);
        padding: 0 8px;
        margin: 0;
        border-radius: 9999px;
    }

    .book-annotation__side .annotation-icon-button .button-icon {
        width: auto;
        max-width: none;
        height: calc(var(--cabinet-action-icon-height) * 1.05);
        padding: 0;
        flex: 0 0 auto;
        box-sizing: border-box;
        object-fit: contain;
    }

    .book-annotation__side .simple-dual-progress {
        height: var(--footer-button-size);
        min-height: var(--footer-button-size);
        max-height: var(--footer-button-size);
    }

.book-annotation__cover {
    display: flex;
    justify-content: center;
    width: var(--book-annotation-cover-width);
    min-width: 0;
    max-width: var(--book-cover-width);
    height: auto;
    aspect-ratio: 160 / 222.5;
    flex: 0 0 var(--book-annotation-cover-width);
    margin: 0 4px;
}

.book-annotation__cover .book-cover,
.book-annotation__cover .book-cover-container,
.book-annotation__cover .book-cover__image {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
}

.book-annotation__cover .book-cover__image {
    box-sizing: border-box;
    object-fit: cover;
    padding: 0;
}

.annotation-icon-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    min-height: 50px;
    border-radius: 9999px;
    box-sizing: border-box;
}

.book-annotation-share-host {
    position: relative;
    display: flex;
    justify-content: center;
}

@media (max-width: 768px) {
    .book-annotation-page__body {
        width: 100%;
        max-width: none;
    }

    .book-annotation__layout {
        justify-content: space-between;
        gap: var(--contoured-item-gap);
        padding-inline: var(--contoured-item-gap);
        box-sizing: border-box;
    }

    .book-annotation__cover {
        margin: 0;
    }

    .book-annotation__details {
        width: calc(100% - (2 * var(--contoured-item-gap)));
        max-width: none;
        margin-inline: var(--contoured-item-gap);
    }
}

.book-share-panel__backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    width: 100vw;
    height: 100vh;
    padding: 0;
    border: 0;
    background: transparent;
    appearance: none;
    cursor: default;
}

.book-share-panel {
    --book-share-panel-background: var(--grey-background);
    position: fixed;
    top: max(8px, env(safe-area-inset-top));
    left: 50%;
    z-index: 1000;
    width: min(330px, calc(100vw - 12px));
    padding: 6px 8px 7px;
    transform: translateX(-50%);
    border: 3px solid #000;
    border-radius: 18px;
    background-color: var(--book-share-panel-background);
    box-sizing: border-box;
}

.book-share-panel__socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 4px;
}

.book-share-panel__social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--footer-button-size);
    height: var(--footer-button-size);
    min-width: var(--footer-button-size);
    min-height: var(--footer-button-size);
    padding: 0;
    border: 3px solid #000;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    box-sizing: border-box;
}

.book-share-panel__social img {
    display: block;
    width: var(--footer-button-icon-size);
    height: var(--footer-button-icon-size);
    object-fit: contain;
}

.book-share-panel__social--x {
    background-color: #000;
}

.book-share-panel__social--x img {
    filter: invert(1);
}

.book-share-panel__social--facebook {
    background-color: #1877f2;
}

.book-share-panel__social--telegram {
    background-color: #2ca5e0;
}

.book-share-panel__social--instagram {
    background:
        radial-gradient(circle at 32% 106%, #fdf497 0 14%, #fdf497 15%, #fd5949 42%, #d6249f 67%, #285aeb 100%);
}

.book-share-panel__link-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--footer-button-size);
    align-items: center;
    gap: 5px;
}

.book-share-panel__url {
    display: flex;
    align-items: center;
    height: var(--footer-button-size);
    min-height: var(--footer-button-size);
    max-height: var(--footer-button-size);
    min-width: 0;
    padding: 0 10px;
    overflow: hidden;
    border: 3px solid #000;
    border-radius: 9999px;
    background-color: var(--book-share-panel-background);
    color: #111;
    font-size: var(--reader-panel-text-size);
    font-weight: 700;
    line-height: 1.05;
    white-space: nowrap;
    box-sizing: border-box;
}

.book-share-panel__url .marquee-viewport {
    text-align: left;
}

.book-share-panel__copy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--footer-button-size);
    height: var(--footer-button-size);
    min-width: var(--footer-button-size);
    min-height: var(--footer-button-size);
    padding: 0;
    border: 3px solid #000;
    border-radius: 50%;
    background-color: #00a2e8;
    cursor: pointer;
    box-sizing: border-box;
}

.book-share-panel__copy img {
    display: block;
    width: var(--footer-button-icon-size);
    height: var(--footer-button-icon-size);
    object-fit: contain;
}

@media (max-width: 767px) {
    .book-share-panel {
        left: var(--item-gap);
        width: calc(100vw - (2 * var(--item-gap)));
        transform: none;
    }
}

@media (max-width: 360px) {
    .book-share-panel {
        padding: 5px 6px 6px;
        border-width: 2px;
        border-radius: 16px;
    }

    .book-share-panel__socials {
        gap: 10px;
    }

    .book-share-panel__social {
        border-width: 2px;
    }

    .book-share-panel__url {
        height: var(--footer-button-size);
        min-height: var(--footer-button-size);
        max-height: var(--footer-button-size);
        border-width: 2px;
    }

    .book-share-panel__copy {
        border-width: 2px;
    }
}

.menu-wrapper.give-donate-page,
.menu-wrapper.book-donate-selection-page {
    gap: calc(4 * var(--item-gap));
}

.book-donate-selection-page {
    align-items: center;
    padding: 0;
    box-sizing: border-box;
}

.book-donate-selection-view-page .book-donate-selection-page {
    width: var(--main-menu-width);
    max-width: 400px;
    min-width: 0;
}

.book-donate-selection-view-page__body {
    padding-top: var(--item-gap);
}

.book-donate-selection-page > .gray-button {
    margin-top: 0;
    margin-bottom: 0;
}

.donate-service-selection-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: var(--contoured-item-gap);
    box-sizing: border-box;
}

.donate-service-selection-card__banner {
    width: 100%;
    height: 85px;
    overflow: hidden;
    border: 2px solid black;
    border-radius: 20px;
    background-color: #3a4db1;
    box-sizing: border-box;
}

.donate-service-selection-card__image {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: 20px;
    object-fit: cover;
}

.donate-service-selection-card__button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    margin-bottom: 0;
    min-height: var(--blue-button-reference-height);
    padding-top: var(--item-gap);
    padding-bottom: var(--item-gap);
}

.donate-service-selection-card__button img {
    width: var(--footer-button-icon-size);
    height: var(--footer-button-icon-size);
    object-fit: contain;
}

@media (hover: hover) and (pointer: fine) {
    .blue-button:hover {
        background-color: #0088cc;
    }
}

.blue-button:disabled {
    background-color: var(--grey-background);
    border-color: #666;
    color: black;
    cursor: not-allowed;
}

.blue-button:disabled .line-item__circle {
    color: black;
}

.yellow-button {
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px 0;
    height: var(--blue-button-reference-height);
    min-height: var(--blue-button-reference-height);
    background-color: var(--yellow-button-background);
    border: 2px solid black;
    color: black;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.1;
    padding: 0 10px;
    border-radius: 9999px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
}

    @media (hover: hover) and (pointer: fine) {
        .yellow-button:hover {
            background-color: #ffb000;
        }
    }

    .yellow-button:disabled {
        background-color: var(--grey-background);
        border-color: #666;
        color: black;
        cursor: not-allowed;
    }


.eye-yellow-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.eye-yellow-button__text {
    display: inline-block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    text-align: center;
}

:is(.eye-yellow-button, .eye-blue-button) {
    --eye-button-icon-content-overlap: calc(var(--footer-button-size) - var(--standard-contour-width));
}

:is(.eye-yellow-button, .eye-blue-button):not(.line-item__main):not(.chapter-raw__main):has(> :is(.eye-yellow-button__text, .eye-blue-button__text) > .marquee-viewport) {
    padding-inline: 0;
}

.eye-yellow-button--with-eye .eye-yellow-button__text {
    padding-right: var(--eye-button-icon-content-overlap);
}

.eye-yellow-button__badge {
    position: absolute;
    right: 52px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7em;
    white-space: nowrap;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eye-yellow-button__icon {
    position: absolute;
    top: 50%;
    right: -2px;
    width: var(--footer-button-size);
    min-width: var(--footer-button-size);
    max-width: var(--footer-button-size);
    height: var(--footer-button-size);
    min-height: var(--footer-button-size);
    max-height: var(--footer-button-size);
    transform: translateY(-50%);
    border: 2px solid #000;
    border-radius: 50%;
    background-color: var(--grey-background);
    object-fit: contain;
    box-sizing: border-box;
}

.yellow-button-selected {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px 0;
    height: var(--blue-button-reference-height);
    min-height: var(--blue-button-reference-height);
    background-color: #d49302;
    border: 2px solid black;
    color: black;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.1;
    padding: 0 10px;
    border-radius: 25px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gray-button {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px 0;
    height: var(--blue-button-reference-height);
    min-height: var(--blue-button-reference-height);
    background-color: var(--grey-background);
    border: 2px solid black;
    color: black;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.1;
    padding: 0 10px;
    border-radius: 9999px;
    text-align: center;
    cursor: pointer;
}

h1.gray-button,
h2.gray-button,
h3.gray-button,
h4.gray-button,
h5.gray-button,
h6.gray-button {
    height: var(--footer-button-size);
    min-height: var(--footer-button-size);
    max-height: var(--footer-button-size);
}


.gray-button-for-reader {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px 0;
    height: var(--blue-button-reference-height);
    min-height: var(--blue-button-reference-height);
    background-color: var(--grey-background);
    border: 2px solid black;
    color: black;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.1;
    padding: 0 10px;
    border-radius: 9999px;
    text-align: center;
    cursor: pointer;
}

.light-gray-button-for-moder {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px 0;
    height: var(--blue-button-reference-height);
    min-height: var(--blue-button-reference-height);
    background-color: var(--grey-background);
    border: 2px solid black;
    color: black;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.1;
    padding: 0 10px;
    border-radius: 25px;
    text-align: center;
    cursor: pointer;
}

.hourglass-logo {
    padding-left: 2px;
    padding-right: 2px;
    width: 100%;
    height: 100%;
    max-width: 26px;
    max-height: 50px;
    object-fit: contain;
    display: block;
    margin: auto;
}

.stackpanel {
    display: flex;
    flex-direction: column;
}

.stackpanel-horizontal {
    display: flex;
    flex-direction: row;
}

.photo-container {
    display: flex;
    justify-content: space-around;
    cursor: pointer;
}

.fixed-top-container,
.fixed-bottom-container {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    width: var(--main-menu-width);
}

.fixed-top-container {
    top: var(--top-banner-offset);
}

.fixed-bottom-container {
    bottom: var(--bottom-offset);
}

.photo-placeholder {
    --file-upload-corner-radius: 20px;
    --file-upload-preview-inset: 4px;
    position: relative;
    width: calc(var(--footer-button-size) * 3);
    height: calc(var(--footer-button-size) * 3);
    background-color: #ffd700;
    border: 2px solid black;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: var(--file-upload-corner-radius);
    overflow: hidden;
    cursor: pointer;
}

.photo-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

    .photo-placeholder .photo-upload .file-upload-error {
        position: absolute;
        top: auto;
        right: var(--file-upload-preview-inset);
        bottom: var(--file-upload-preview-inset);
        left: var(--file-upload-preview-inset);
        width: auto;
        max-width: none;
        margin: 0;
        padding: var(--item-gap);
        border-radius: calc(var(--file-upload-corner-radius) - var(--file-upload-preview-inset));
        background-color: var(--grey-background);
        font-size: 14px !important;
        overflow-wrap: anywhere;
        pointer-events: none;
        z-index: 2;
    }

    .photo-upload span {
        color: black;
        font-weight: bold;
        margin-top: 10px;
        text-align: center;
    }

.hidden-input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    top: 0;
    left: 0;
    z-index: 0;
}

.photo-placeholder img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    border-radius: 4px;
}

.photo-placeholder .placeholder-icon {
    width: 96%;
    height: 96%;
    max-width: 96%;
    max-height: 96%;
    object-fit: contain;
}

.language-row {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
}

.checkbox-container {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.checkbox-with-button-container {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    min-width: 0;
    height: var(--checkbox-with-button-size);
    min-height: var(--checkbox-with-button-size);
    max-height: var(--checkbox-with-button-size);
    box-sizing: border-box;
}

.checkbox-with-button {
    display: none;
}

.checkbox-with-button-icon {
    box-sizing: border-box;
    width: var(--checkbox-with-button-size);
    min-width: var(--checkbox-with-button-size);
    max-width: var(--checkbox-with-button-size);
    height: var(--checkbox-with-button-size);
    min-height: var(--checkbox-with-button-size);
    max-height: var(--checkbox-with-button-size);
    background-color: #f02d2d;
    background-image: url('/icons/x.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: var(--footer-button-icon-size) var(--footer-button-icon-size);
    border: 2px solid black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .3s ease, border-color .3s ease;
    position: absolute; /* вытаскиваем поверх кнопки */
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2; /* выше, чем у кнопки */
}

.checkbox-with-button-badge {
    box-sizing: border-box;
    width: var(--checkbox-with-button-size);
    min-width: var(--checkbox-with-button-size);
    max-width: var(--checkbox-with-button-size);
    height: var(--checkbox-with-button-size);
    min-height: var(--checkbox-with-button-size);
    max-height: var(--checkbox-with-button-size);
    background-color: var(--grey-background);
    border: 2px solid black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute; /* вытаскиваем поверх кнопки */
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2; /* выше, чем у кнопки */
    font-size: var(--footer-button-icon-size);
    line-height: 1;
}

.checkbox-with-button-badge-icon {
    width: var(--footer-button-icon-size);
    height: var(--footer-button-icon-size);
    object-fit: contain;
}

.checkbox-with-button-container > .blue-button {
    flex: 1 1 auto;
    min-width: 0;
    height: var(--checkbox-with-button-size);
    min-height: var(--checkbox-with-button-size);
    max-height: var(--checkbox-with-button-size);
    margin: 0;
    padding-left: calc(var(--checkbox-with-button-size) + 8px);
    padding-right: calc(var(--checkbox-with-button-size) + 8px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.checkbox-with-button-text {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.checkbox-with-button-text-icon {
    display: block;
    width: var(--footer-button-icon-size);
    height: var(--footer-button-icon-size);
    margin: auto;
    object-fit: contain;
}

.checkbox-with-button:checked + .checkbox-with-button-icon {
    background-color: #21c45a;
    background-image: url('/icons/v.svg');
    border-color: black;
}


.blazorise-textedit-yellow {
    width: 100%;
    background-color: #ffcc00;
    color: black;
    border: none;
    padding: 5px;
    font-size: 16px;
    box-sizing: border-box;
}

.banner-mini {
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 85px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.banner-mini:hover {
        transform: scale(1.05);
    }

.user-page-banner-container {
    z-index: 1200;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
    }

    .user-page-banner-container--top {
        align-items: flex-start;
        transform-origin: top center;
    }

    .user-page-banner-container--bottom {
        align-items: flex-end;
        transform-origin: bottom center;
    }

    .user-page-banner-container--hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

.user-page-banner__surface {
    width: 100%;
    height: 85px;
    overflow: hidden;
    border: 2px solid #000;
    border-radius: 20px;
    background-color: #3a4db1;
}


.user-page-banner__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
}

.banner-max {
    position: relative;
    width: 95svw;
    height: 50vh;
    background-color: #3a4db1;
    border: 2px solid black;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .banner-max:hover {
        transform: scale(1.02);
    }

    .banner-max img, .banner-mini img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 20px;
        padding: 0;
        display: block;
    }

.stretched-img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
    object-fit: contain;
    object-position: center;
}

.circle-indicator {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-left: 10px;
    flex-shrink: 0;
    border: 2px solid black;
}

.input-find {
    width: 40%;
    height: 50px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}



.stackpanel-horizontal {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.book-cover {
    width: var(--book-cover-width);
    height: var(--book-cover-height);
    margin: 0 auto;
}

.book-cover-container {
    --book-cover-icon-edge-offset: 5px;
    --book-cover-icon-size: var(--footer-button-size);
    position: relative;
    display: inline-block;
    width: auto;
    height: auto;
    max-width: 155px;
    max-height: 215px;
    overflow: hidden;
    border-radius: 15px;
}

.book-cover .book-cover-container,
.book-cover .book-cover__image {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
}

.book-cover .book-cover__image {
    box-sizing: border-box;
    object-fit: cover;
    padding: 0;
}

.format-icon {
    position: absolute;
    top: 50%;
    width: 32px;
    height: 32px;
    transform: translateY(-50%);
}

.format-left {
    left: 5px;
}

.format-right {
    right: 5px;
}

.icon {
    position: absolute;
    width: var(--book-cover-icon-size, 40px);
    height: var(--book-cover-icon-size, 40px);
}

.icon-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid black;
    box-sizing: border-box;
    background-color: var(--grey-background);
}

.icon-circle--gray {
    background-color: var(--grey-background);
}

.icon-circle--red {
    background-color: #c62828;
}

.icon img {
    width: auto;
    height: 100%;
    object-fit: contain;
}

/* Позиции по углам */
.icon-top-left {
    top: var(--book-cover-icon-edge-offset, 5px);
    left: var(--book-cover-icon-edge-offset, 5px);
}

.icon-top-right {
    top: var(--book-cover-icon-edge-offset, 5px);
    right: var(--book-cover-icon-edge-offset, 5px);
}

.icon-bottom-left {
    bottom: var(--book-cover-icon-edge-offset, 5px);
    left: var(--book-cover-icon-edge-offset, 5px);
}

.age-rating-icon {
    --age-rating-icon-color: #00a2e8;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    background: transparent;
    isolation: isolate;
}

.age-rating-icon::before,
.age-rating-icon::after {
    content: "";
    position: absolute;
    /* Masks keep the octagonal contour in native route snapshots. */
    -webkit-mask-image: url('/icons/age-rating-shape.svg');
    mask-image: url('/icons/age-rating-shape.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    pointer-events: none;
}

.age-rating-icon::before {
    inset: 0;
    z-index: 0;
    background: #000;
}

.age-rating-icon::after {
    inset: var(--standard-contour-width);
    z-index: 1;
    background: var(--age-rating-icon-color);
}

.age-rating-icon-glyph {
    --age-rating-icon-mask: none;
    position: relative;
    z-index: 2;
    display: block;
    width: 70%;
    height: 70%;
    background-color: #fff;
    -webkit-mask-image: var(--age-rating-icon-mask);
    mask-image: var(--age-rating-icon-mask);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.age-rating-icon--green { --age-rating-icon-color: #22b14c; }
.age-rating-icon--yellow { --age-rating-icon-color: #ffc90e; }
.age-rating-icon--orange { --age-rating-icon-color: #ff7f27; }
.age-rating-icon--red { --age-rating-icon-color: #ed1c24; }
.age-rating-icon--blue { --age-rating-icon-color: #00a2e8; }

.age-rating-icon-glyph--age0b { --age-rating-icon-mask: url('/icons/0+.svg'); }
.age-rating-icon-glyph--age6b { --age-rating-icon-mask: url('/icons/6+.svg'); }
.age-rating-icon-glyph--age12 { --age-rating-icon-mask: url('/icons/12+.svg'); }
.age-rating-icon-glyph--age16 { --age-rating-icon-mask: url('/icons/16+.svg'); }
.age-rating-icon-glyph--age18 { --age-rating-icon-mask: url('/icons/18+.svg'); }
.age-rating-icon-glyph--age21 { --age-rating-icon-mask: url('/icons/21+.svg'); }

.icon-bottom-right {
    bottom: var(--book-cover-icon-edge-offset, 5px);
    right: var(--book-cover-icon-edge-offset, 5px);
}

.book-cover__promo-timer {
    background-color: #22b14c;
}

.book-cover__promo-timer img {
    width: 100%;
}

.cover-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-weight: bold;
    font-size: 1.5rem;
}

.book-title {
    --book-title-height: var(--blue-button-reference-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: var(--book-title-height);
    min-height: var(--book-title-height);
    padding: 0;
    color: #fff;
    box-sizing: border-box;
    font-weight: bold;
    background-color: #00a2e8;
    overflow: hidden;
}

.book-title-button,
.user-line__label,
.book-button-admin {
    --book-title-height: var(--blue-button-reference-height);
    height: var(--book-title-height);
    min-height: var(--book-title-height);
}

.book-title-button-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--contoured-item-gap);
    width: 100%;
}

.book-title-button-wrapper .book-cover-container {
    --book-cover-icon-size: var(--footer-button-size);
}

.book-title-button {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.book-title-button .book-title__text {
    --book-title-text-edge-gap: 0px;
    --book-title-icon-gutter: calc(var(--book-title-height) - var(--standard-contour-width));
    --book-title-text-left-gutter: 0px;
    --book-title-text-right-gutter: 0px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    position: absolute;
    top: 0;
    right: var(--book-title-text-edge-gap);
    bottom: 0;
    left: var(--book-title-text-edge-gap);
    width: auto;
    height: 100%;
    padding-left: var(--book-title-text-left-gutter);
    padding-right: var(--book-title-text-right-gutter);
    border-radius: calc(var(--book-title-height) / 2);
    overflow: hidden;
}

.book-title-button--has-left-icon .book-title__text,
.book-title-button:has(> .book-title__icon--left) .book-title__text {
    --book-title-text-left-gutter: var(--book-title-icon-gutter);
}

.book-title-button--has-right-icon .book-title__text,
.book-title-button:has(> .book-title__icon--right) .book-title__text {
    --book-title-text-right-gutter: var(--book-title-icon-gutter);
}

.book-title-button--has-left-icon:not(.book-title-button--has-right-icon):has(> .book-title__text > .marquee-viewport:not(.marquee-viewport--animated)) .book-title__text,
.book-title-button:has(> .book-title__icon--left):not(:has(> .book-title__icon--right)):has(> .book-title__text > .marquee-viewport:not(.marquee-viewport--animated)) .book-title__text {
    --book-title-text-right-gutter: var(--book-title-icon-gutter);
}

.book-title-button--has-right-icon:not(.book-title-button--has-left-icon):has(> .book-title__text > .marquee-viewport:not(.marquee-viewport--animated)) .book-title__text,
.book-title-button:has(> .book-title__icon--right):not(:has(> .book-title__icon--left)):has(> .book-title__text > .marquee-viewport:not(.marquee-viewport--animated)) .book-title__text {
    --book-title-text-left-gutter: var(--book-title-icon-gutter);
}

.book-title-button--disabled,
.book-title-button--disabled:hover {
    background-color: var(--grey-background);
    cursor: default;
}

.book-title-button--disabled .book-title__text,
.book-title-button--disabled .book-title__icon {
    background-color: var(--grey-background);
}

.book-button__icon {
    --book-button-icon-size: var(--book-title-height, var(--book-list-row-size, 52px));
    width: var(--book-button-icon-size);
    min-width: var(--book-button-icon-size);
    height: var(--book-button-icon-size);
    min-height: var(--book-button-icon-size);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    box-sizing: border-box;
    flex-shrink: 0;
}


.book-title__icon {
    width: var(--book-title-height);
    min-width: var(--book-title-height);
    height: var(--book-title-height);
    min-height: var(--book-title-height);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 2px solid black;
    margin: 0;
    background-color: var(--grey-background);
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    box-sizing: border-box;
    flex-shrink: 0;
}


.book-title__icon--left {
    position: relative;
    left: 0;
    margin-left: -2px;
}

.book-title__icon--right {
    position: relative;
    right: 0;
    margin-right: -2px;
}

.book-title-button .book-title__icon {
    width: var(--footer-button-size);
    min-width: var(--footer-button-size);
    height: var(--footer-button-size);
    min-height: var(--footer-button-size);
    position: absolute;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
}

.book-title-button .book-title__icon--left {
    left: 0;
    right: auto;
}

.book-title-button .book-title__icon--right {
    right: 0;
    left: auto;
}

.book-title__text {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 8px;
    text-align: center;
    color: black;
}

.book-title__badges {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
}

.badge-icon {
    width: 24px;
    height: 24px;
}

.chapter-title {
    --chapter-title-icon-gutter: var(--blue-button-reference-height);
    --chapter-title-icon-offset: 7px;
    --chapter-title-icon-content-overlap: calc(var(--chapter-title-icon-gutter) + (2 * var(--standard-contour-width)) - var(--chapter-title-icon-offset));
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: var(--blue-button-reference-height);
    min-height: var(--blue-button-reference-height);
    padding: 0;
    color: #fff;
    box-sizing: border-box;
    font-weight: bold;
    background-color: #ffc90e;
}

.chapter-title--user {
    background-color: #00a2e8;
    border: 2px solid black;
    border-radius: 25px;
    color: black;
}

.chapter-title__icon {
    width: var(--blue-button-reference-height);
    min-width: var(--blue-button-reference-height);
    height: var(--blue-button-reference-height);
    min-height: var(--blue-button-reference-height);
    border-radius: 50%;
    border: 2px solid black;
    background-color: var(--grey-background);
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
}

.chapter-title__icon--left {
    position: relative;
    left: -7px;
}

.chapter-title__icon--right {
    position: relative;
    right: -7px;
}

.chapter-title__text {
    --chapter-title-text-base-left-padding: 0px;
    --chapter-title-text-base-right-padding: 0px;
    --chapter-title-text-static-left-gutter: 0px;
    --chapter-title-text-static-right-gutter: 0px;
    flex: 1;
    min-width: 0;
    max-width: 100%;
    padding-left: calc(var(--chapter-title-text-base-left-padding) + var(--chapter-title-text-static-left-gutter));
    padding-right: calc(var(--chapter-title-text-base-right-padding) + var(--chapter-title-text-static-right-gutter));
    overflow: hidden;
    text-align: center;
    color: black;
    box-sizing: border-box;
}

.chapter-title:has(> .chapter-title__icon--left) .chapter-title__text {
    margin-left: calc(-1 * var(--chapter-title-icon-offset));
}

.chapter-title:has(> .chapter-title__icon--right) .chapter-title__text {
    margin-right: calc(-1 * var(--chapter-title-icon-offset));
}

.chapter-title--user .chapter-title__text {
    --chapter-title-text-base-left-padding: 0px;
    --chapter-title-text-base-right-padding: 0px;
}

.chapter-title:has(> .chapter-title__icon--left):not(:has(> .chapter-title__icon--right)):has(> .chapter-title__text > .marquee-viewport:not(.marquee-viewport--animated)) .chapter-title__text {
    --chapter-title-text-static-right-gutter: var(--chapter-title-icon-content-overlap);
}

.chapter-title:has(> .chapter-title__icon--right):not(:has(> .chapter-title__icon--left)):has(> .chapter-title__text > .marquee-viewport:not(.marquee-viewport--animated)) .chapter-title__text {
    --chapter-title-text-static-left-gutter: var(--chapter-title-icon-content-overlap);
}

.search__text {
    flex: 1;
    text-align: center;
    color: black;
    background-color: var(--grey-background);
}



.avatar-menu {
    position: absolute;
    display: flex;
    gap: var(--chat-vertical-item-gap, calc(var(--item-gap) * 2));
    left: 50px;
    top: 0;
    background-color: #00a2e8;
    border-radius: 20px;
    padding: 5px 10px;
    z-index: 999;
    margin-bottom: 0;
    transform: translateY(0);
    transform-origin: left center;
    overflow: hidden;
    white-space: nowrap;
    will-change: clip-path, opacity;
    animation: chat-menu-unroll-from-left 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

    .avatar-menu.sent-position {
        right: 50px;
        left: auto;
        transform-origin: right center;
        animation-name: chat-menu-unroll-from-right;
    }

    .avatar-menu.received-position {
        left: 50px;
        right: auto;
        transform-origin: left center;
        animation-name: chat-menu-unroll-from-left;
    }

.chat-avatar-menu-block {
    position: relative;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    overflow: visible;
    z-index: 1;
}

.chat-avatar-menu-surface {
    display: inline-flex;
    align-items: center;
    min-width: 40px;
}

.chat-avatar-menu-block--open {
    z-index: 1000;
}

.chat-avatar-menu-block--open .avatar-container {
    display: none;
}

.chat-avatar-menu-block--open .chat-avatar-menu-surface {
    position: absolute;
    top: 0;
}

.chat-avatar-menu-block--received.chat-avatar-menu-block--open .chat-avatar-menu-surface {
    left: 0;
    flex-direction: row;
}

.chat-avatar-menu-block--sent.chat-avatar-menu-block--open .chat-avatar-menu-surface {
    right: 0;
    flex-direction: row-reverse;
}

.chat-avatar-menu-block .avatar-container {
    margin-right: 0;
}

.chat-avatar-menu-block .avatar-menu {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    flex: 0 0 auto;
    align-items: center;
    margin-bottom: 0;
    min-height: var(--message-avatar-size, 40px);
    padding: 0;
    background-color: transparent;
    box-shadow: none;
}

.chat-avatar-menu-block--received .avatar-menu {
    margin-left: 0;
    border-radius: 0 20px 20px 0;
}

.chat-avatar-menu-block--sent .avatar-menu {
    margin-right: 0;
    border-radius: 20px 0 0 20px;
}

.avatar-admin-user {
    width: 50%;
    height: 50%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

.chat-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover; /* картинка обрезается по кругу */
}

.summary-label {
    width: 400px;
    min-height: 0;
    max-height: none;
    height: 100%;
    border: 2px solid #333;
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box;
    color: black;
    font-family: sans-serif;
    overflow-wrap: break-word;
    overflow-y: auto;
    overflow-x: hidden;
}

body.book-annotation-page-body {
    overflow: hidden;
    height: 100dvh;
}

.search-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 56px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--fixed-footer-buttons-height) + var(--double-item-gap));
    margin-top: 0;
    margin-bottom: 0;
    border-radius: 10px;
    z-index: 10000;
}

.mobile-input-viewport-host-active {
    translate: 0 calc(-1 * var(--mobile-input-keyboard-lift, 0px));
    will-change: translate;
}

.keyboard-focus-proxy {
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0.01;
    pointer-events: none;
    font-size: 16px;
    caret-color: transparent;
}

.search-container--stacked {
    flex-direction: column;
    height: auto;
    gap: 6px;
    margin-bottom: 0;
}

/* An open search hides an add action and the caption that only describes that action. */
:root:has(.search-container--stacked) .yellow-button:has(img[src$="/plus.svg"]) {
    display: none;
}

:root:has(.search-container--stacked) .search-hidden-add-caption {
    display: none;
}

.list-add-action {
    --grey-background: var(--base-grey-background);
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--contoured-item-gap);
    width: 100%;
    flex: 0 0 auto;
    background-color: var(--grey-background);
}

:root:has(.search-container--stacked) .list-add-action {
    display: none;
}

.search-container--chat {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    height: auto;
    gap: var(--double-item-gap);
    margin-top: var(--double-item-gap);
    margin-bottom: 0;
    z-index: auto;
}

.search-container--chat .search-extras {
    margin-top: 0;
}

/* A keyboard lift moves this in-flow panel toward the messages. Reserve the
   translated distance as well so its visible top gap stays one double gap. */
.search-container--chat.mobile-input-viewport-host-active {
    margin-top: calc(var(--double-item-gap) + var(--mobile-input-keyboard-lift, 0px));
}

/* Fixed lower panels share one reservation, including their content-side gap. */
body {
    --fixed-search-content-bottom: 0px;
    --delete-popup-content-bottom: 0px;
    --add-line-content-bottom: 0px;
    --fixed-panel-content-bottom: max(var(--fixed-search-content-bottom), var(--delete-popup-content-bottom), var(--add-line-content-bottom));
}

body:has(.search-container:not(.search-container--chat)) {
    --fixed-search-content-bottom: calc(var(--fixed-footer-buttons-height) + var(--footer-button-size) + (2 * var(--double-item-gap)));
}

body:has(.delete-popup) {
    --delete-popup-content-bottom: calc(var(--fixed-footer-buttons-height) + var(--footer-button-size) + (2 * var(--double-item-gap)));
}

body:has(.add-line-content) {
    --add-line-content-bottom: calc(var(--item-gap) + var(--footer-button-size) + var(--double-item-gap));
}

@media (max-width: 768px) {
    .search-container--chat {
        position: relative;
        z-index: 3;
    }
}

.search-input-active .chapter-type-toggle {
    display: none !important;
}

.search-input-active .footer-btn.footer-search-toggle,
.search-input-active .footer-btn.footer-search-toggle:disabled,
.search-input-active .footer-btn.footer-search-toggle[disabled],
body:has(.search-container) .footer-btn.footer-search-toggle,
body:has(.search-container) .footer-btn.footer-search-toggle:disabled,
body:has(.search-container) .footer-btn.footer-search-toggle[disabled] {
    background-color: #d9534f;
}

.search-input-active .footer-btn.footer-search-toggle:focus,
body:has(.search-container) .footer-btn.footer-search-toggle:focus {
    background-color: #c9302c;
}

@media (hover: hover) and (pointer: fine) {
    .search-input-active .footer-btn.footer-search-toggle:hover,
    body:has(.search-container) .footer-btn.footer-search-toggle:hover {
        background-color: #c9302c;
    }
}

.chat-input-find,
.add-line-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    height: var(--footer-button-size);
    min-height: var(--footer-button-size);
    max-height: var(--footer-button-size);
    background-color: #ffffff;
    border: 2px solid black;
    color: black;
    font-size: var(--line-input-font-size);
    padding: var(--item-gap) 15px;
    border-radius: calc(var(--footer-button-size) * 0.5);
    text-align: center;
    line-height: calc(var(--footer-button-size) - (2 * (var(--standard-contour-width) + var(--item-gap))));
    cursor: text;
    box-sizing: border-box;
    resize: none;
    overflow: hidden;
}

.chat-input-find:focus {
    outline: none;
    box-shadow: none;
}

.chat-input-find--chat:disabled {
    background-color: #ffffff;
    color: #4d4d4d;
    opacity: 1;
}

.search-input-shell {
    width: min(430px, calc(100vw - (2 * var(--interface-edge-gap))));
    max-width: calc(100vw - (2 * var(--interface-edge-gap)));
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
}

.search-input-shell--chat {
    width: min(430px, calc(100vw - (2 * var(--interface-edge-gap))));
    gap: 6px;
}

.search-container--chat-admin .search-input-shell--chat {
    width: var(--main-menu-width);
    max-width: 100%;
}

.search-input-action {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #000;
    background: #00a2e8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

    @media (hover: hover) and (pointer: fine) {
        .search-input-action:hover:not(:disabled) {
            background: #0088cc;
        }
    }

    .search-input-action:disabled {
        opacity: 0.45;
        cursor: default;
    }

    .search-input-action img {
        width: 24px;
        height: 24px;
    }

.search-input-action--chat-nav {
    width: var(--footer-button-size);
    height: var(--footer-button-size);
    flex: 0 0 var(--footer-button-size);
    background: #00a2e8;
}

    .search-input-action--chat-nav:focus:not(:disabled) {
        background: #0088cc;
    }

    @media (hover: hover) and (pointer: fine) {
        .search-input-action--chat-nav:hover:not(:disabled) {
            background: #0088cc;
        }
    }

    .search-input-action--chat-nav:disabled {
        opacity: 1;
        background: var(--grey-background);
        cursor: default;
    }

    .search-input-action--chat-nav img {
        width: var(--footer-button-icon-size);
        height: var(--footer-button-icon-size);
        padding: var(--footer-button-icon-padding);
        box-sizing: content-box;
        object-fit: contain;
    }

.fvdf {
    color: #7f7f7f
}

.image-display {
    width: 100%;
    height: auto;
    cursor: pointer;
    object-fit: contain;
    border-radius: 25px;
    padding: 5px;
}

.image-fullscreen {
    position: fixed !important;
    top: var(--image-fullscreen-start-top, 0);
    left: var(--image-fullscreen-start-left, 0);
    width: var(--image-fullscreen-start-width, 100vw) !important;
    height: var(--image-fullscreen-start-height, 100vh) !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    object-fit: contain !important;
    background-color: transparent;
    z-index: 2147483647 !important;
    cursor: pointer;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: var(--image-fullscreen-start-radius, 0);
    transform-origin: center center;
    transition:
        top 0.35s ease,
        left 0.35s ease,
        width 0.35s ease,
        height 0.35s ease,
        border-radius 0.35s ease,
        transform 0.35s ease,
        opacity 0.3s ease;
}

.image-fullscreen--expanded {
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0;
}

.image-fullscreen--viewport-height {
    background-color: transparent;
    object-position: center top;
}

.image-fullscreen-page-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    background-color: var(--background-color);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: auto 100vh;
    background-size: auto 100dvh;
    pointer-events: none;
}

.image-fullscreen--viewport-height.image-fullscreen--expanded {
    left: 50%;
    width: var(--image-fullscreen-viewport-width, auto) !important;
    height: var(--image-fullscreen-viewport-height, 100vh) !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: fill !important;
    transform: translateX(-50%);
}

@supports (height: 100svh) {
    .image-fullscreen--expanded {
        width: 100svw !important;
        height: 100svh !important;
    }
}

.chat-page-layout {
    --chat-vertical-item-gap: calc(var(--item-gap) * 2);
    --chat-page-edge-gap: var(--item-gap);
}

.pinned-container {
    display: flex;
    flex-direction: column;
    gap: var(--chat-vertical-item-gap, var(--item-gap));
    margin-top: 0;
    margin-bottom: var(--chat-vertical-item-gap, var(--item-gap));
    padding-inline: var(--chat-page-edge-gap, var(--chat-vertical-item-gap, var(--item-gap)));
    box-sizing: border-box;
}

.line-item__main.eye-yellow-button--with-eye,
.line-item__main.eye-blue-button--with-eye {
    --line-item-trailing-clearance: var(--line-item-eye-clearance);
}

.chapter-raw__main.eye-yellow-button--with-eye:has(> .chapter-raw__circle--right) {
    --line-item-trailing-clearance: calc((2 * var(--blue-button-reference-height)) + var(--standard-contour-width));
}

.line-item__main.eye-yellow-button--with-eye .line-item__circle--right,
.line-item__main.eye-blue-button--with-eye .line-item__circle--right,
.chapter-raw__main.eye-yellow-button--with-eye .chapter-raw__circle--right {
    right: calc(var(--blue-button-reference-height) - 2px);
}

.line-item__main.eye-yellow-button--with-eye .eye-yellow-button__text,
.chapter-raw__main.eye-yellow-button--with-eye .eye-yellow-button__text {
    padding-right: 0;
}

.chapter-raw__main--audio-picture.eye-yellow-button--with-eye {
    --line-item-trailing-clearance: var(--line-item-eye-clearance);
}

.pinned-item {
    filter: none;
}

.chat-pin-card {
    --chat-pin-card-height: var(--footer-button-size);
    --chat-pin-card-border-width: 2px;
    --chat-pin-card-circle-size: var(--chat-pin-card-height);
    --chat-pin-card-icon-size: var(--footer-button-icon-size);
    display: flex;
    align-items: center;
    gap: var(--item-gap);
    width: calc(100% - (var(--chat-pin-card-border-width) * 4));
    margin: 0 calc(var(--chat-pin-card-border-width) * 2);
}

.chat-pin-card__main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-height: var(--chat-pin-card-height);
    height: var(--chat-pin-card-height);
    padding: 0;
    background-color: #00a2e8;
    color: #000;
    box-sizing: border-box;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    border: var(--chat-pin-card-border-width) solid #000;
    border-radius: calc(var(--chat-pin-card-height) / 2);
    cursor: pointer;
    overflow: visible;
}

.chat-pin-card__leading,
.chat-pin-card__pin {
    width: var(--chat-pin-card-circle-size);
    min-width: var(--chat-pin-card-circle-size);
    height: var(--chat-pin-card-circle-size);
    min-height: var(--chat-pin-card-circle-size);
    aspect-ratio: 1 / 1;
    flex: 0 0 var(--chat-pin-card-circle-size);
    border-radius: 50%;
    border: 2px solid #000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.chat-pin-card__leading {
    background: var(--grey-background);
    margin-left: calc(-2 * var(--chat-pin-card-border-width));
    position: relative;
    z-index: 1;
}

.chat-pin-card__pin {
    background: var(--grey-background);
    margin-right: calc(-2 * var(--chat-pin-card-border-width));
    position: relative;
    z-index: 1;
}

.chat-pin-card__leading-icon,
.chat-pin-card__pin-icon {
    width: var(--chat-pin-card-icon-size);
    height: var(--chat-pin-card-icon-size);
    object-fit: contain;
    filter: none;
}

.chat-pin-card__leading-icon,
.chat-pin-card__pin-icon {
    opacity: 0.82;
}

.chat-pin-card__sender {
    flex: 1;
    min-width: 0;
    color: #000;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-pin-card__timer-icon {
    width: var(--chat-pin-card-icon-size);
    height: var(--chat-pin-card-icon-size);
    object-fit: contain;
}

.chat-pin-card--admin .chat-pin-card__main {
    background: #00a2e8;
}

.chat-pin-card--user .chat-pin-card__main {
    background: #00a2e8;
}


.ban-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 48px;
    padding: 5px;
    box-sizing: border-box;
    font-weight: bold;
    background-color: var(--grey-background);
    border-radius: 25px;
    border: 2px solid black;
}

.ban-title__text {
    flex: 1;
    text-align: center;
    color: black;
}

.ban-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
}

.ban-title--gray {
    background-color: var(--grey-background);
    border: 2px solid black;
    border-radius: 25px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ban-dates-container {
    display: flex;
    width: 100%;
    height: 40px;
    margin-top: 6px;
    background-color: var(--grey-background);
    border-radius: 25px;
    border: 2px solid black;
}

.ban-date-cell {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    font-weight: bold;
    font-size: 14px;
}

    .ban-date-cell.left {
        border-right: 1px solid black;
        border-radius: 20px 0 0 20px;
    }

    .ban-date-cell.right {
        border-left: 1px solid black;
        border-radius: 0 20px 20px 0;
    }

.ban-title__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid black;
    background-size: var(--footer-button-icon-size) var(--footer-button-icon-size);
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    flex-shrink: 0;
}

    .ban-title__icon.right {
        border-right: 0px solid black;
    }

    .ban-title__icon.left {
        border-left: 0px solid black;
    }

.small-fotter-button {
    width: 12px;
    height: 12px;
}

@keyframes chat-message-highlight {
    0%, 16.667%, 33.333%, 50%, 66.667%, 83.333%, 100% {
        background-color: var(--message-bubble-bg);
    }

    8.333%, 25%, 41.667%, 58.333%, 75%, 91.667% {
        background-color: color-mix(in srgb, var(--message-bubble-bg) 82%, #000000);
    }
}

@keyframes service-message-highlight {
    0%, 16.667%, 33.333%, 50%, 66.667%, 83.333%, 100% {
        filter: brightness(1);
    }

    8.333%, 25%, 41.667%, 58.333%, 75%, 91.667% {
        filter: brightness(0.82);
    }
}

.message-cloud .chat-message.flash-highlight,
.message-cloud .chat-message.flash-highlight::before {
    animation: chat-message-highlight 3s ease-in-out;
}

/* Deleted messages permanently use the same darker tone as a navigation highlight. */
.message-cloud .chat-message.chat-message--deleted,
.message-cloud .chat-message.chat-message--deleted::before {
    background-color: color-mix(in srgb, var(--message-bubble-bg) 82%, #000000);
}

.message-cloud .chat-message.chat-message--deleted {
    cursor: default;
    pointer-events: none;
}

.service-message__capsules.flash-highlight {
    animation: service-message-highlight 3s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .message-cloud .chat-message.flash-highlight,
    .message-cloud .chat-message.flash-highlight::before {
        animation: none;
        background-color: color-mix(in srgb, var(--message-bubble-bg) 82%, #000000);
    }

    .service-message__capsules.flash-highlight {
        animation: none;
        filter: brightness(0.82);
    }

}

.award-container {
    width: 100%;
    aspect-ratio: 3 / 2;
    position: relative;
}

.award-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid black;
}

.award-compact-container {
    --award-compact-border-width: var(--standard-contour-width);
    --award-compact-border-radius: 26px;
    width: calc(var(--footer-button-size) * 2);
    min-width: calc(var(--footer-button-size) * 2);
    max-width: calc(var(--footer-button-size) * 2);
    height: calc(var(--footer-button-size) * 3);
    min-height: calc(var(--footer-button-size) * 3);
    max-height: calc(var(--footer-button-size) * 3);
    border: var(--award-compact-border-width) solid black;
    border-radius: var(--award-compact-border-radius);
    overflow: hidden;
    margin: 0;
    position: relative;
    box-sizing: border-box;
}

.award-compact-container > .chat-date-separator,
#page-container .award-compact-container > .chat-date-separator {
    position: absolute;
    top: 9px;
    right: 9px;
    left: auto;
    z-index: 2;
    width: max-content;
    margin: 0;
    gap: 0;
    color: #ffffff;
    text-shadow: none;
    pointer-events: none;
}

.award-compact-container > .chat-date-separator .chat-date-separator__line,
#page-container .award-compact-container > .chat-date-separator .chat-date-separator__line {
    display: none;
}

.award-compact-container > .chat-date-separator .chat-date-separator__text,
#page-container .award-compact-container > .chat-date-separator .chat-date-separator__text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 1px solid #000000;
    border-radius: 999px;
    background: var(--grey-background);
    box-shadow: none;
    color: inherit;
    line-height: 1 !important;
    box-sizing: border-box;
}

.award-compact-container > .award-stack-overflow-indicator,
#page-container .award-compact-container > .award-stack-overflow-indicator {
    position: absolute;
    top: 9px;
    right: 9px;
    z-index: 2;
    width: 18px;
    height: 18px;
    padding: 2px;
    border: 1px solid #000000;
    border-radius: 999px;
    background: var(--grey-background);
    object-fit: contain;
    pointer-events: none;
    box-sizing: border-box;
}

.award-compact-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: fill;
    cursor: pointer;
    border-radius: calc(var(--award-compact-border-radius) - var(--award-compact-border-width));
}

.menu-wrapper-awards {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.awards-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    max-width: 400px;
    margin-top: 6px;
}

.menu-wrapper-horizontal {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.awards-grid-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    row-gap: calc(var(--item-gap) * 3);
    column-gap: 0;
    width: calc(100% - (2 * var(--footer-screen-edge-gap)));
    max-width: none;
    margin: var(--item-gap) var(--footer-screen-edge-gap) 0;
    overflow-x: hidden;
    box-sizing: border-box;
}

.give-awards-user-page > .header-container,
.page-layout.awards-user-page > .header-container {
    margin-bottom: var(--double-item-gap);
}

.give-awards-user-page > .middle-container > .awards-grid-row,
.page-layout.awards-user-page > .middle-container > .awards-grid-row {
    flex-shrink: 0;
    margin-top: 0;
}

.give-awards-user-page .awards-grid-row--grant {
    column-gap: var(--double-item-gap);
}

.awards-trophy-grid-row {
    width: calc(100% - (2 * var(--footer-screen-edge-gap)));
    max-width: none;
    align-content: flex-start;
    margin-top: var(--item-gap);
}

.awards-trophy-grid-row > .cursor-window {
    flex: 0 0 100%;
    width: 100%;
}

.awards-trophy-grid-row .trophy-stack-grid__items {
    display: flex;
    flex-wrap: wrap;
    row-gap: calc((3 * var(--item-gap)) + var(--standard-contour-width));
    column-gap: 8px;
    justify-content: space-evenly;
    width: 100%;
    box-sizing: border-box;
}

/* Cursor-window rows are full-width in ordinary menu lists. Award previews are
   grid items, so retain their intrinsic width and allow the trophy grid to wrap. */
.middle-container.cabinet-list-body > .menu-wrapper.cabinet-list-menu.awards-user-page .cursor-window__item {
    width: auto;
}

@media (max-width: 768px) {
    #page-container main article.content:has(> .awards-user-page),
    #page-container main article.content:has(> .book-awards-page--standalone) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .awards-trophy-grid-row {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

.awards-trophy-grid-row .award-wrapper,
.awards-trophy-grid-row .award-compact-container {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
}

.awards-trophy-grid-row .award-button-container {
    margin-top: 0;
    gap: var(--item-gap);
}

.award-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--item-gap);
    flex: 0 0 calc(var(--footer-button-size) * 2);
    width: calc(var(--footer-button-size) * 2);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.award-button-container {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--item-gap);
}

.award-action-button {
    width: var(--footer-button-size);
    min-width: var(--footer-button-size);
    max-width: var(--footer-button-size);
    height: var(--footer-button-size);
    min-height: var(--footer-button-size);
    max-height: var(--footer-button-size);
    border-radius: 50%;
    background-color: #00a2e8;
    border: 2px solid black;
    color: black;
    font-size: var(--footer-button-icon-size);
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
}

.awards-grid-row--grant .award-action-button {
    width: var(--footer-button-size);
    min-width: var(--footer-button-size);
    max-width: var(--footer-button-size);
    height: var(--footer-button-size);
    min-height: var(--footer-button-size);
    max-height: var(--footer-button-size);
    box-sizing: border-box;
    font-size: var(--footer-button-icon-size);
}

.award-action-button:disabled {
    cursor: default;
    opacity: 1;
}

.award-action-button__icon {
    width: var(--footer-button-icon-size);
    height: var(--footer-button-icon-size);
    display: block;
    padding: 0;
    box-sizing: border-box;
    object-fit: contain;
    pointer-events: none;
}

.awards-grid-row--grant .award-action-button__icon {
    width: var(--footer-button-icon-size);
    height: var(--footer-button-icon-size);
}

.award-action-button__timer {
    font-size: var(--footer-button-icon-size);
    line-height: 1;
}

.award-action-button__timer-icon {
    width: var(--footer-button-icon-size);
    height: var(--footer-button-icon-size);
    object-fit: contain;
}

.book-awards-page {
    width: 100%;
}

.award-action-button--pending {
    background-color: #00a2e8;
}

.award-action-button--cooldown {
    background-color: var(--grey-background);
    color: black;
    font-size: var(--footer-button-icon-size);
}

.award-grant-hint {
    max-width: 96px;
    text-align: center;
    font-size: 10px;
    line-height: 1.2;
    color: #5e5e5e;
}

.award-grant-empty-state {
    width: 100%;
    margin-top: 24px;
}

.confirm-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

    .confirm-backdrop.confirm-bottom {
        align-items: flex-end;
        padding-bottom: 16px;
    }

    .confirm-backdrop.delete-popup-backdrop {
        align-items: flex-end;
        background: transparent;
        padding-bottom: calc(var(--fixed-footer-buttons-height) + var(--double-item-gap));
    }

.confirm-window {
    background: #fff;
    padding: 24px 32px;
    border-radius: 12px;
    text-align: center;
}

.ban-status-sheet-backdrop {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2500;
    padding: 0 16px calc(var(--footer-buttons-height, 80px) + 16px);
}

.ban-status-sheet {
    width: min(420px, 100%);
    background: var(--grey-background);
    border: 2px solid #000;
    border-radius: 24px;
    padding: 16px;
}

.ban-status-sheet__title {
    margin: 0 0 12px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #000;
}

    .confirm-window button {
        margin: 0 10px;
        width: 80px;
        height: 36px;
    }

.yes-btn.disabled {
    background: var(--grey-background);
    color: #fff;
    cursor: not-allowed;
}

.yes-btn.active {
    background: #e74c3c;
    color: #fff;
}

.no-btn {
    background: var(--grey-background);
    color: #fff;
}

.page-layout--event-panel > .footer-container-host {
    display: none;
}

.page-layout > .chat-event-panel-host {
    grid-row: 3;
    width: 100%;
    max-width: none;
    justify-self: stretch;
}

.chat-event-panel-host {
    width: 100%;
    min-height: var(--footer-buttons-height, 80px);
    padding: var(--screen-edge-gap) var(--interface-edge-gap);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.chat-event-panel {
    --chat-event-panel-control-size: var(--footer-button-size);
    width: min(320px, calc(100vw - (2 * var(--interface-edge-gap))));
    min-height: var(--chat-event-panel-control-size);
    display: grid;
    grid-template-columns: var(--chat-event-panel-control-size) minmax(0, 1fr) var(--chat-event-panel-control-size);
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    z-index: 1900;
}

@media (max-width: 768px) {
    .chat-event-panel {
        width: 100%;
        max-width: none;
    }
}

.chat-event-panel__icon-button {
    width: var(--chat-event-panel-control-size);
    height: var(--chat-event-panel-control-size);
    padding: 0;
    border: 2px solid #000;
    border-radius: 50%;
    background: #00a2e8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.chat-event-panel__icon-button:disabled {
    background: var(--admin-inactive-background);
    cursor: default;
    opacity: 1;
}

.chat-event-panel__label-button {
    min-width: 0;
    width: 100%;
    height: var(--chat-event-panel-control-size);
    padding: 2px 12px;
    border: 2px solid #000;
    border-radius: 25px;
    background: var(--admin-inactive-background);
    color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
    cursor: default;
    opacity: 1;
}

.chat-event-panel__label-button:disabled {
    color: #000;
    opacity: 1;
}

.chat-event-panel__next-name,
.chat-event-panel__remaining-count {
    display: block;
    min-width: 0;
    max-width: 100%;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-event-panel__next-name {
    width: 100%;
    font-size: 16px;
    font-weight: 700;
}

.chat-event-panel__remaining-count {
    font-size: 13px;
    font-weight: 700;
}

.chat-event-panel__button-icon {
    width: var(--footer-button-icon-size);
    height: var(--footer-button-icon-size);
    padding: var(--footer-button-icon-padding);
    display: block;
    object-fit: contain;
    box-sizing: content-box;
}

.date-info-range {
    display: inline-flex; /* обе половины рядом */
    margin-top: 6px;
}

.age-gate-page {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(12px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
    background: #ed1c24;
    box-sizing: border-box;
    overflow: hidden;
}

.age-gate-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(54vw, 320px);
    height: min(28dvh, 190px);
}

.age-gate-rating__glyph.age-rating-icon-glyph {
    width: 100%;
    height: 100%;
    background-color: #fff;
}

.age-gate-actions {
    position: absolute;
    right: var(--footer-screen-edge-gap);
    bottom: calc(var(--vertical-screen-edge-gap) + env(safe-area-inset-bottom, 0px));
    left: var(--footer-screen-edge-gap);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--item-gap);
    height: var(--footer-button-size);
}

.age-gate-action {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 3px solid #000;
    border-radius: calc(var(--footer-button-size) * 0.5);
    background: #00a2e8;
    cursor: pointer;
}

.age-gate-action:focus-visible {
    background: #0088cc;
}

@media (hover: hover) and (pointer: fine) {
    .age-gate-action:hover {
        background: #0088cc;
    }
}

.age-gate-action__icon {
    display: block;
    width: var(--footer-button-icon-size);
    height: var(--footer-button-icon-size);
    object-fit: contain;
    padding: var(--footer-button-icon-padding);
}

.date-filter-container {
    display: flex;
    flex-direction: column; /* ⬅ главное изменение */
    align-items: center;
    gap: 6px; /* небольшой вертикальный зазор */
}

.search-container--chat .date-filter-container,
.chat-date-filter-panel .date-filter-container {
    width: min(340px, calc(100vw - (2 * var(--interface-edge-gap))));
}

.chat-date-filter-panel {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + var(--chat-vertical-item-gap, calc(var(--item-gap) * 2)));
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    z-index: 10000;
    pointer-events: none;
}

    .chat-date-filter-panel .date-filter-container {
        pointer-events: auto;
    }

/* плашка-счётчик: такая же ширина, как MudPaper */
.date-result {
    width: 280px;
    max-width: 280px;
}

.jump-input {
    width: 280px;
    max-width: 280px;
    margin-top: 6px;
}

.search-admin-panel .jump-input {
    width: 100%;
    max-width: none;
    margin-top: 0;
}

.search__icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid black;
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    background-color: #00a2e8;
}


.search__icon--left {
    position: relative;
    left: -7px;
    background-color: #00a2e8;
}

.search__icon--right {
    position: relative;
    left: -7px;
    background-color: #00a2e8;
}

.search-extras {
    /* располагаем чётко по центру под .search-container */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* горизонтальное выравнивание */
    margin-top: 6px; /* небольшой отступ от поля поиска */
}

.search-admin-panel {
    width: var(--main-menu-width);
    max-width: 100%;
    display: grid;
    grid-template-columns: var(--footer-button-size) minmax(0, 1fr) var(--footer-button-size);
    gap: var(--contoured-item-gap);
    align-items: center;
}

.search-admin-chip {
    width: var(--footer-button-size);
    height: var(--footer-button-size);
    border: 2px solid black;
    border-radius: 50%;
    background-color: var(--admin-inactive-background);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.search-admin-chip--passive {
    pointer-events: none;
}

.search-admin-chip--inactive {
    background-color: #00a2e8;
}

.search-admin-chip:disabled {
    opacity: 1;
}

.search-admin-chip__text {
    color: #000;
    font-size: 14px;
    font-weight: 700;
}

.search-admin__icon {
    position: static;
    flex: 0 0 auto;
    width: var(--footer-button-icon-size);
    height: var(--footer-button-icon-size);
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-size: 70%;
}

.search-admin__icon--hashtag {
    background-image: url('/icons/hashtag.svg');
}

.search-admin__icon--sigma {
    background-image: url('/icons/sigma.svg');
}

.search-admin__icon--calendar {
    background-image: url('/icons/calendar.svg');
}

/* ▼ внутренняя обёртка для jump-input + подсказка */
.jump-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px; /* расстояние между input и подписью */
}

.date-filter-paper {
    max-width: 320px; /* было 280px – подберите своё значение */
}

.search-container--chat .date-filter-paper {
    width: 100%;
    max-width: none;
}

/* элементы-«спутники», чтобы остались той же ширины */
.date-result,
.jump-input {
    max-width: 320px;
}

.search-admin-index {
    width: 100%;
    height: var(--footer-button-size);
    min-height: var(--footer-button-size);
    max-height: var(--footer-button-size);
    padding: var(--item-gap) 15px;
    border-radius: calc(var(--footer-button-size) * 0.5);
    background-color: var(--admin-inactive-background);
    font-size: 18px;
    text-align: center;
    font-weight: 700;
}

.search-admin-index--locked {
    background-color: var(--admin-inactive-background);
    color: #444;
    opacity: 1;
}

.search-admin-meta {
    width: var(--main-menu-width);
    max-width: 100%;
    display: flex;
    justify-content: center;
}

.search-admin-result {
    min-height: 32px;
    padding: 6px 14px;
    border-radius: 16px;
    background-color: var(--admin-inactive-background);
    color: #000;
    font-size: 13px;
    font-weight: 700;
}

.footer-btn.chat-calendar-button--active,
.footer-btn.chat-calendar-button--active:disabled,
.footer-btn.chat-calendar-button--active[disabled],
.footer-btn.mood-statistics-calendar-button--active {
    background-color: #d9534f;
}

.footer-btn.chat-calendar-button--active:focus,
.footer-btn.mood-statistics-calendar-button--active:focus {
    background-color: #c9302c;
}

@media (hover: hover) and (pointer: fine) {
    .footer-btn.chat-calendar-button--active:hover,
    .footer-btn.mood-statistics-calendar-button--active:hover:not(:disabled):not([disabled]) {
        background-color: #c9302c;
    }
}

.chat-page-layout .footer-buttons .footer-btn.chat-search-button--active,
.chat-page-layout .footer-buttons .footer-btn.chat-search-button--active:disabled,
.chat-page-layout .footer-buttons .footer-btn.chat-search-button--active[disabled] {
    background-color: #d9534f;
}

.chat-page-layout .footer-buttons .footer-btn.chat-search-button--active:focus {
    background-color: #c9302c;
}

@media (hover: hover) and (pointer: fine) {
    .chat-page-layout .footer-buttons .footer-btn.chat-search-button--active:hover {
        background-color: #c9302c;
    }
}

.all-books-author-page {
    display: flex;
    flex-direction: column;
    gap: var(--double-item-gap);
}

.all-books-author-page--top-spaced {
    padding-top: calc(var(--double-item-gap) - var(--cursor-window-sentinel-height));
}

.all-books-author-header {
    gap: var(--double-item-gap);
    margin-bottom: calc(var(--double-item-gap) - var(--cursor-window-sentinel-height));
}

.all-books-author-title {
    width: var(--main-menu-width);
    max-width: 400px;
}

.all-books-author-group {
    display: flex;
    flex-direction: column;
    gap: var(--double-item-gap);
}

.all-books-author-group__list {
    display: flex;
    flex-direction: column;
    gap: var(--double-item-gap);
}

.books-by-author-page .cursor-window__item + .cursor-window__item {
    margin-top: var(--double-item-gap);
}

.all-books-author-page .cursor-window__item {
    display: flex;
    flex-direction: column;
    gap: var(--double-item-gap);
}

.all-books-author-page .cursor-window__item + .cursor-window__item {
    margin-top: var(--double-item-gap);
}

.all-books-author-page .blue-button,
.all-books-author-page .gray-button,
.all-books-author-header .all-books-author-title {
    margin-top: 0;
    margin-bottom: 0;
}

.all-books-author-language-pill {
    width: 100%;
    min-width: 0;
}

input[type="range"]::-webkit-slider-thumb {
    opacity: 0 !important;
}

input[type="range"]::-moz-range-thumb {
    opacity: 0 !important;
}

input[type="range"]::-ms-thumb {
    opacity: 0 !important;
}

.player-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 400px; /* например, если хотим ограничить ширину */
    margin: 0 auto;
    padding: 1rem;
    border-radius: 8px;
}

/* Большая кнопка в центре. Сам кружок + иконки Play/Pause */
.center-button {
    width: 80px;
    height: 80px;
    border: 3px solid #004466;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-bottom: 1rem;
}

.play-icon {
    width: 0;
    height: 0;
    border-left: 20px solid #004466;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

.pause-icon {
    width: 20px;
    height: 20px;
    background: #004466;
    position: relative;
}

    .pause-icon::before,
    .pause-icon::after {
        content: "";
        position: absolute;
        width: 6px;
        height: 20px;
        background: #fff;
        top: 0;
    }

    .pause-icon::before {
        left: 2px;
    }

    .pause-icon::after {
        right: 2px;
    }

/* Время (текущее / общее) */
.time-labels {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.time-separator {
    opacity: 0.8;
}

/* Блок со слайдером и кнопками перемотки */
.seekbar-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

/* Кнопки перемотки (стрелки слева/справа) */
.seek-button {
    background: #004466;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: 1.2rem;
}

/* Слайдер + надпись текущего времени на ползунке */
.slider-wrapper {
    position: relative;
    flex-grow: 1;
}

.time-slider {
    width: 100%;
}

/* Надпись поверх самого бегунка (можно настроить позиционирование) */
.slider-current-time {
    position: absolute;
    top: -1.5rem; /* сдвигаем чуть вверх над полосой */
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9rem;
    background-color: rgba(255,255,255,0.5);
    padding: 2px 5px;
    border-radius: 4px;
}


.content-container {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow: hidden;
}

.chat-messages {
    --chat-message-avatar-size: var(--footer-button-size);
    --chat-message-bubble-width: clamp(360px, 42vw, 560px);
    --chat-messages-side-padding: var(--chat-page-edge-gap, var(--chat-vertical-item-gap, var(--item-gap)));

    flex: 1 1 auto;
    min-height: 0;
    padding: 0 var(--chat-messages-side-padding) var(--chat-vertical-item-gap, var(--item-gap));
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--chat-vertical-item-gap, var(--item-gap));
    box-sizing: border-box;
}

/* The normal footer and the chat search margin each supply their own final 8px. */
.chat-page-layout:not(:has(.chat-input-wrapper, .search-container--chat)) .chat-messages,
.chat-page-layout:has(.search-container--chat) .chat-messages {
    padding-bottom: 0;
}

.chat-date-separator {
    display: flex;
    align-items: center;
    gap: var(--item-gap);
    width: 100%;
    margin: 0;
    color: #000000;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.chat-date-separator__line {
    flex: 1 1 0;
    min-width: 0;
    height: 1px;
    background: #000000;
}

.chat-date-separator__text {
    flex: 0 0 auto;
    font-size: inherit !important;
    line-height: inherit !important;
    white-space: nowrap;
    text-align: center;
    letter-spacing: 0;
}

.chat-message {
    padding: 8px 12px;
    border-radius: 16px;
    margin-bottom: 0;
    max-width: 75%;
    word-wrap: break-word;
    white-space: pre-wrap;
    position: relative;
    overflow: visible;
    z-index: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--item-gap);
}

    .chat-message::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 20px;
        height: 20px;
        background: inherit;
        border-radius: 50%;
        transform: translateY(-50%);
        z-index: -1;
        display: none;
    }

    .chat-message.received::after {
        left: -10px;
        clip-path: circle(50% at 100% 50%);
    }

    .chat-message.sent::after {
        right: -10px;
        clip-path: circle(50% at 0 50%);
    }

.service-message-row {
    width: 100%;
    margin-bottom: 0;
}

    .message-row.service-message-row--with-standalone-message {
        margin-bottom: 0;
    }

    .service-message-row.received {
        justify-content: flex-start;
    }

.service-message__stack {
    --service-message-header-background: var(--grey-background);
    --service-message-outline-width: var(--standard-contour-width);
    --service-message-item-size: var(--chat-message-avatar-size, 50px);
    --service-message-item-gap: var(--double-item-gap);

    display: flex;
    flex-direction: column;
    gap: 0;
    width: min(var(--chat-message-bubble-width), 100%);
    min-width: 0;
    max-width: min(var(--chat-message-bubble-width), 100%);
}

.service-message__capsules {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--service-message-item-gap);
    flex-wrap: nowrap;
    width: 100%;
    height: var(--chat-message-avatar-size, 50px);
    min-width: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    background-color: transparent;
    box-sizing: border-box;
    isolation: isolate;
    z-index: 2;
}

.service-message__identity {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--service-message-item-gap);
    flex: 1 1 auto;
    height: 100%;
    min-width: 0;
    max-width: 100%;
    isolation: isolate;
    z-index: 2;
}

.service-message__identity-pill,
.service-message__event-pill {
    min-height: var(--service-message-item-size);
    box-sizing: border-box;
}

.service-message__event-pill img {
    width: var(--footer-button-icon-size);
    height: var(--footer-button-icon-size);
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.service-message__shortcut img,
.service-message__identity-action img {
    width: var(--footer-button-icon-size);
    height: var(--footer-button-icon-size);
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.service-message__identity-pill {
    position: relative;
    top: 0;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    height: var(--service-message-item-size);
    min-height: var(--service-message-item-size);
    min-width: 0;
    padding: 3px 12px;
    border: var(--service-message-outline-width) solid #000000;
    border-radius: 999px;
    background: var(--service-message-header-background);
    background-color: var(--service-message-header-background);
    max-width: 100%;
    overflow: visible;
    isolation: isolate;
    z-index: 1;
}

.service-message__identity .avatar-container.service-message__rank-background,
.service-message__event-pill.service-message__rank-background {
    background-color: var(--message-reaction-background, var(--service-message-header-background));
}

.service-message__event-pill--rank.background-message-white {
    --message-reaction-background: var(--message-bubble-background);
}

.service-message__identity-pill--with-action {
    gap: 8px;
    min-height: var(--service-message-item-size);
    padding: 0 0 0 12px;
}

.service-message__stack--admin-view {
    --service-message-header-background: var(--admin-inactive-background);
}

.service-message__identity-pill--with-attention {
    --service-message-attention-indicator-size: 18px;
    --service-message-attention-indicator-offset: calc(14px - var(--service-message-outline-width));
    padding-inline: calc(var(--service-message-attention-indicator-offset) + var(--service-message-attention-indicator-size) + var(--item-gap));
}

.service-message__shortcut,
.service-message__identity-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    box-sizing: border-box;
    cursor: pointer;
    transition: filter 0.2s ease;
}

.service-message__shortcut {
    position: relative;
    z-index: 2;
    flex: 0 0 var(--service-message-item-size);
    width: var(--service-message-item-size);
    height: var(--service-message-item-size);
    min-width: var(--service-message-item-size);
    min-height: var(--service-message-item-size);
    border: 2px solid #000000;
    background-color: #00a2e8;
}

.service-message__identity-action {
    flex: 0 0 var(--service-message-item-size);
    width: var(--service-message-item-size);
    height: var(--service-message-item-size);
    min-width: var(--service-message-item-size);
    min-height: var(--service-message-item-size);
    margin-right: calc(-1 * var(--service-message-outline-width));
    border: 2px solid #000000;
    background-color: var(--service-message-header-background);
    overflow: hidden;
}

.service-message__identity-action--crossed-eye,
.service-message__event-pill--crossed-eye {
    position: relative;
    overflow: visible;
    clip-path: circle(50%);
}

.service-message__identity-action--crossed-eye::after,
.service-message__event-pill--crossed-eye::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -20%;
    z-index: 1;
    width: 140%;
    height: 3px;
    background: #000;
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .service-message__shortcut:hover,
    .service-message__identity-action:hover {
        filter: brightness(0.96);
    }
}

.service-message__shortcut:focus-visible,
.service-message__identity-action:focus-visible {
    outline: 3px solid rgba(0, 162, 232, 0.35);
    outline-offset: 2px;
}

.service-message__identity-meta {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    max-width: 100%;
    text-align: center;
}

.service-message__identity .avatar-container {
    position: relative;
    z-index: 2;
    flex: 0 0 var(--service-message-item-size);
    width: var(--service-message-item-size);
    height: var(--service-message-item-size);
    margin-right: 0;
    border: 2px solid #000000;
    background-color: var(--service-message-header-background);
    box-sizing: border-box;
}

.service-message__identity-text {
    --chat-label-max-font-size: 14;
    --chat-label-min-font-size: 8;
    display: block;
    width: 100%;
    color: #000000;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.service-message__identity-spacing {
    flex: 0 0 auto;
    white-space: pre;
}

.service-message__identity-time {
    order: -1;
    flex: 0 0 auto;
    width: 100%;
    font-size: 12px;
    line-height: 1;
    color: rgba(0, 0, 0, 0.55);
    white-space: nowrap;
    text-align: center;
}

.service-message__event-pill {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--service-message-item-size);
    width: var(--service-message-item-size);
    height: var(--service-message-item-size);
    min-width: var(--service-message-item-size);
    min-height: var(--service-message-item-size);
    padding: 0;
    border: 2px solid #000000;
    border-radius: 50%;
    background-color: var(--service-message-header-background);
    flex-shrink: 0;
    overflow: visible;
    isolation: isolate;
    z-index: 1;
}

.service-message__identity-pill > *,
.service-message__event-pill > * {
    position: relative;
    z-index: 1;
}

.service-message__identity-pill > .service-message__attention-indicator {
    position: absolute;
    top: calc(var(--item-gap) - var(--service-message-outline-width));
    right: var(--service-message-attention-indicator-offset);
    z-index: 2;
    width: var(--service-message-attention-indicator-size);
    height: var(--service-message-attention-indicator-size);
    object-fit: contain;
    pointer-events: none;
}

.service-message__event-pill--gift {
    background-color: var(--service-message-header-background);
}

.service-message__event-pill--prize {
    background-color: #fffbaa;
}

.service-message__event-pill--ban,
.service-message__event-pill--deleted,
.service-message__event-pill--muted,
.service-message__event-pill--default {
    background-color: var(--service-message-header-background);
}

.service-message__standalone-message {
    width: 100%;
}

    .service-message__standalone-message .message-row {
        margin-top: 0;
    }

@media (max-width: 768px) {
    .service-message__stack {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        flex: 0 1 auto;
        margin-left: 0;
    }

    .service-message__identity-pill--with-attention {
        --service-message-attention-indicator-offset: calc(12px - var(--service-message-outline-width));
    }

    .service-message__identity-text {
        font-size: 13px;
        --chat-label-max-font-size: 13;
    }
}

.chat-message__mention {
    font-weight: 700;
}

@media (max-width: 768px) {
    .chat-message__mention {
        font-weight: 800;
    }
}

.chat-message__search-highlight {
    background: var(--grey-background);
    color: #ffffff;
    border-radius: 6px;
    padding: 0 4px;
    font-weight: 400;
}

.chat-message--search-focus .chat-message__search-highlight {
    font-weight: 700;
}

.chat-message__time {
    font-size: 12px;
    line-height: 1;
    color: rgba(0, 0, 0, 0.55);
    flex: 0 0 auto;
    opacity: 0.72;
}

.chat-message__text {
    position: relative;
    z-index: 2;
    margin: 0;
    min-width: 0;
    line-height: 1.38;
}

.chat-message__body-row {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    min-width: 0;
}

.chat-message__sent-time {
    --chat-message-time-cutout-padding-block: 1px;
    --chat-message-time-cutout-padding-inline: 3px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    padding: var(--chat-message-time-cutout-padding-block) var(--chat-message-time-cutout-padding-inline);
    white-space: nowrap;
    text-align: right;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.4);
    opacity: 1;
    box-sizing: border-box;
}

.chat-message__sent-time::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 0;
    pointer-events: none;
    background-color: var(--page-background-color, var(--background-color));
    background-image: var(--page-wallpaper-image, none);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: auto 100vh;
    background-size: auto 100dvh;
    background-attachment: fixed;
    -webkit-mask:
        linear-gradient(#000 0 0) top / 100% 1px no-repeat,
        linear-gradient(#000 0 0) bottom / 100% 1px no-repeat,
        linear-gradient(#000 0 0) left / 1px 100% no-repeat,
        linear-gradient(#000 0 0) right / 1px 100% no-repeat;
    mask:
        linear-gradient(#000 0 0) top / 100% 1px no-repeat,
        linear-gradient(#000 0 0) bottom / 100% 1px no-repeat,
        linear-gradient(#000 0 0) left / 1px 100% no-repeat,
        linear-gradient(#000 0 0) right / 1px 100% no-repeat;
}

.message-cloud.message-cloud--sent .chat-message__body-row {
    position: relative;
    display: block;
}

.message-cloud.message-cloud--received .chat-message__body-row {
    position: relative;
    display: block;
}

.message-cloud.message-cloud--sent .chat-message__sent-time:not(.chat-message__sent-time--footer) {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
    justify-self: start;
    padding: var(--chat-message-time-cutout-padding-block) var(--chat-message-time-cutout-padding-inline);
    text-align: left;
}

.message-cloud.message-cloud--received .chat-message__sent-time:not(.chat-message__sent-time--footer) {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3;
    justify-self: end;
    padding: var(--chat-message-time-cutout-padding-block) var(--chat-message-time-cutout-padding-inline);
    text-align: right;
}

.chat-message__sent-time--footer {
    position: relative;
    z-index: 2;
    align-self: flex-end;
}

.chat-message__footer-row {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% + var(--message-content-inline-padding) + var(--message-content-inline-padding));
    min-width: 0;
    margin-inline: calc(-1 * var(--message-content-inline-padding));
    margin-top: calc(-1 * var(--message-footer-bottom-drop));
    overflow: hidden;
    white-space: normal;
    transform: translateY(var(--message-footer-bottom-drop));
}

.chat-message__footer-row:not(.chat-message__footer-row--time-only) {
    gap: 0;
}

.chat-message__footer-row:not(.chat-message__footer-row--time-only) .message-reactions-scroll {
    flex: 0 1 auto;
}

.message-cloud .chat-message > .chat-message__quote,
.message-cloud .chat-message > .image-display,
.message-cloud .chat-message > .chat-message__deleted-audit,
.message-cloud .chat-message > .chat-message__deleted-banner {
    position: relative;
    z-index: 1;
}

.chat-message__footer-row--received {
    justify-content: flex-start;
}

.chat-message__footer-row--sent {
    justify-content: flex-start;
}

.chat-message__footer-row--received .message-reactions-scroll {
    margin-right: 0;
}

.chat-message__footer-row--sent .message-reactions-scroll {
    margin-left: 0;
}

.chat-message__footer-row.chat-message__footer-row--received .chat-message__sent-time {
    align-self: flex-end;
    text-align: right;
}

.chat-message__footer-row--sent .chat-message__sent-time {
    text-align: left;
}

.chat-message__footer-row .chat-message__sent-time {
    align-self: center;
    flex: 0 0 auto;
    margin-left: auto;
    height: var(--message-footer-item-height);
    min-height: var(--message-footer-item-height);
    padding: 2px 4px;
    font-size: 14px;
    line-height: 1;
}

.chat-message__footer-row--sent .message-reactions-scroll {
    order: 2;
}

.chat-message__footer-row--sent .chat-message__sent-time {
    order: 1;
    margin-left: 0;
    margin-right: 0;
}

.message-cloud.message-cloud--sent .chat-message__sent-time--footer {
    translate: -1px 1px;
}

.message-cloud.message-cloud--received .chat-message__sent-time--footer {
    translate: 1px 1px;
}

.message-cloud.message-cloud--sent .chat-message > .chat-message__sent-time--footer {
    position: absolute;
    left: 0;
    bottom: 0;
}

.message-cloud.message-cloud--received .chat-message > .chat-message__sent-time--footer {
    position: absolute;
    right: 0;
    bottom: 0;
}

.chat-message__quote {
    position: relative;
    width: 100%;
    min-width: 0;
    margin: 0;
    border: none;
    border-radius: 8px;
    padding: 6px 9px 6px 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    box-sizing: border-box;
    overflow: hidden;
    appearance: none;
    background: var(--message-reaction-background, rgba(0, 0, 0, 0.12));
    box-shadow: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.chat-message__quote::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 6px;
    width: 2px;
    border-radius: 999px;
    background: #000000;
    opacity: 1;
}

.chat-message__quote:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.28);
    outline-offset: 2px;
}

.chat-message__quote-author {
    display: block;
    width: 100%;
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-message__quote-text {
    display: block;
    width: 100%;
    min-width: 0;
    font-size: 13px;
    line-height: 1.25;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-message .image-display {
    margin-top: 0;
}

.chat-message__deleted-audit {
    margin: 0;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.55);
    color: rgba(0, 0, 0, 0.72);
    font-size: 12px;
    font-weight: 700;
}

.chat-message__deleted-banner {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px dashed rgba(0, 0, 0, 0.25);
}

.chat-message__deleted-banner-title {
    font-size: 14px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.78);
}

.chat-message__deleted-banner-subtitle {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
}

.chat-message.sent {
    margin-left: auto; /* отталкивает сообщение вправо */
    color: black;
}

.chat-message.received strong {
    margin-right: auto; /* опционально – явно выравнивает сообщение влево */
    color: black;
}

.avatar-container {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    overflow: hidden; /* чтобы изображение не выступало за края */
    border-radius: 50%; /* круг */
    flex-shrink: 0; /* чтобы аватарка не"сжималась" в узких окнах */
}

.avatar-incognito-btn {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--grey-background);
    border: 2px solid #000000;
    border-color: #808080;
    color: #666666;
    opacity: 0.8;
    padding: 0;
    cursor: default;
}

    .avatar-incognito-btn--active {
        background: linear-gradient(180deg, #1cc8ff, #008bd4);
        border-color: #002a3f;
        opacity: 1;
        cursor: pointer;
    }

    .avatar-incognito-btn--active:focus-visible {
        filter: brightness(1.08);
        outline: none;
    }

    @media (hover: hover) and (pointer: fine) {
        .avatar-incognito-btn--active:hover {
            filter: brightness(1.08);
            outline: none;
        }
    }

    .avatar-incognito-btn--inactive {
        background: var(--grey-background);
        opacity: 0.86;
    }

    .avatar-incognito-btn img {
        width: auto;
        height: 100%;
        object-fit: contain;
    }

.message-content {
    display: flex;
    flex-direction: column; /* Имя сверху, текст снизу */
}

.received {
    align-self: flex-start;
}

.sent {
    align-self: flex-end;
}

.background-message-grey {
    --message-bubble-background: var(--author-message-bubble-background);
    --message-reaction-background: var(--grey-background);
    background: var(--message-bubble-background);
}

.background-message-withoutbackground {
    --message-bubble-background: #7092be;
    --message-reaction-background: #7092be;
    background: var(--message-bubble-background);
}

.background-message-red {
    --message-bubble-background: #fdeced;
    --message-reaction-background: #f7b3b6;
    background: var(--message-bubble-background);
}

.background-message-yellow {
    --message-bubble-background: #fffeea;
    --message-reaction-background: #fffbaa;
    background: var(--message-bubble-background);
}

.background-message-green {
    --message-bubble-background: #edfcf1;
    --message-reaction-background: #b7f2c7;
    background: var(--message-bubble-background);
}

.background-message-blue {
    --message-bubble-background: #eaf9ff;
    --message-reaction-background: #aae8ff;
    background: var(--message-bubble-background);
}

.background-message-white {
    --message-bubble-background: #ffffff;
    --message-reaction-background: var(--author-message-bubble-background);
    background: var(--message-bubble-background);
}


.chat-input-wrapper {
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    padding: var(--chat-vertical-item-gap, var(--item-gap)) var(--chat-page-edge-gap, var(--chat-vertical-item-gap, var(--item-gap))) 0;
    box-sizing: border-box;
}

.chat-input-container {
    display: flex;
    width: min(430px, calc(100vw - (2 * var(--interface-edge-gap))));
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.chat-page__main {
    width: 100%;
    align-items: stretch;
    overflow: hidden;
}

.chat-input-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--item-gap);
    width: 100%;
    box-sizing: border-box;
}

.chat-input-context {
    display: flex;
    align-items: stretch;
    column-gap: 8px;
    row-gap: var(--item-gap);
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
    box-sizing: border-box;
}

.chat-message-input {
    --chat-input-max-lines: 4;
    --chat-input-first-line-offset: calc(var(--footer-button-size) - var(--line-input-font-size) - (2 * var(--double-item-gap)) - (2 * var(--standard-contour-width)));
    width: 100%;
    max-height: calc((var(--line-input-font-size) * var(--chat-input-max-lines)) + (2 * var(--double-item-gap)) + (2 * var(--standard-contour-width)));
    padding-block-start: calc(var(--double-item-gap) + var(--chat-input-first-line-offset));
    padding-block-end: var(--double-item-gap);
    resize: none;
    overflow-y: hidden;
    line-height: 1;
    box-sizing: border-box;
}

.chat-message-input.chat-message-input--multiline {
    padding-block-start: var(--double-item-gap);
}

@media (max-width: 768px) {
    .chat-input-container {
        width: min(430px, calc(100vw - (2 * var(--double-item-gap))));
    }
}

.message-row {
    display: flex;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

.message-row--received {
    justify-content: flex-start;
}

.message-row--sent {
    justify-content: flex-end;
}

.message-cloud {
    --message-avatar-size: var(--chat-message-avatar-size, 50px);
    --message-avatar-gap: 12px;
    --message-bubble-width: var(--chat-message-bubble-width);
    --message-bubble-radius: calc(var(--footer-button-size) / 2);
    --message-tail-width: 46px;
    --message-tail-height: var(--message-avatar-size);
    --message-tail-offset: 1px;
    --message-tail-overlap: 27px;
    --message-tail-cover: 2px;
    --message-bubble-bg: var(--message-bubble-background, #c8f4d6);

    position: relative;
    display: flex;
    align-items: flex-start;
    width: min(calc(var(--message-bubble-width) + var(--message-avatar-size) + var(--message-avatar-gap)), 84%);
    max-width: none;
    min-width: 0;
    isolation: isolate;
    box-sizing: border-box;
}

.message-cloud.background-message-grey,
.message-cloud.background-message-withoutbackground,
.message-cloud.background-message-red,
.message-cloud.background-message-yellow,
.message-cloud.background-message-green,
.message-cloud.background-message-blue,
.message-cloud.background-message-white {
    --message-bubble-bg: var(--message-bubble-background);
    background: transparent;
}

.message-cloud--received {
    padding-left: calc(var(--message-avatar-size) + var(--message-avatar-gap));
}

.message-cloud--sent {
    padding-right: calc(var(--message-avatar-size) + var(--message-avatar-gap));
}

.message-cloud__avatar {
    position: absolute;
    top: auto;
    bottom: 0;
    z-index: 5;
}

.message-cloud--received .message-cloud__avatar {
    left: 0;
}

.message-cloud--sent .message-cloud__avatar {
    right: 0;
}

.message-cloud .chat-avatar-menu-block {
    width: var(--message-avatar-size);
    height: var(--message-avatar-size);
    flex: 0 0 var(--message-avatar-size);
}

.message-cloud .chat-avatar-menu-surface {
    min-width: var(--message-avatar-size);
}

.message-cloud .chat-avatar-menu-block .avatar-menu {
    height: var(--footer-button-size);
    min-height: var(--footer-button-size);
    max-height: var(--footer-button-size);
    overflow: visible;
}

.message-cloud .avatar-container {
    width: var(--message-avatar-size);
    height: var(--message-avatar-size);
    margin: 0;
    border-radius: 50%;
    border: 2px solid var(--message-bubble-bg);
    background: transparent;
    box-sizing: border-box;
}

.message-cloud.message-cloud--user-view .avatar-container {
    background-color: var(--grey-background);
}

.message-cloud.message-cloud--admin-view .avatar-container {
    background-color: var(--admin-inactive-background);
}

.message-cloud .chat-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.message-cloud .avatar-incognito-btn {
    border: none;
    background: var(--grey-background);
}

.message-cloud .avatar-incognito-btn--active {
    background: linear-gradient(180deg, #1cc8ff, #008bd4);
    cursor: pointer;
}

.message-cloud .avatar-incognito-btn--inactive {
    background: var(--grey-background);
}

/* Chat action availability uses the existing role-specific neutral surfaces. */
.message-cloud.message-cloud--user-view :is(.message-actions-button, .timed-confirm-button):disabled,
.message-cloud.message-cloud--user-view :is(.message-actions-button, .timed-confirm-button)[disabled],
.message-cloud.message-cloud--user-view .avatar-incognito-btn--inactive {
    background: var(--grey-background);
    border-color: #000000;
    color: #000000;
    opacity: 1;
}

.message-cloud.message-cloud--admin-view :is(.message-actions-button, .timed-confirm-button):disabled,
.message-cloud.message-cloud--admin-view :is(.message-actions-button, .timed-confirm-button)[disabled],
.message-cloud.message-cloud--admin-view .avatar-incognito-btn--inactive {
    background: var(--admin-inactive-background);
    border-color: #000000;
    color: #000000;
    opacity: 1;
}

.book-share-panel__copy:disabled {
    background: var(--grey-background);
    color: #000000;
    opacity: 1;
    cursor: default;
}

.message-cloud .message-actions-button.message-actions-button--copied:disabled {
    cursor: default;
}

button.clipboard-copy-button {
    transition: background-color 0.3s ease, translate 0.1s ease, filter 0.1s ease;
}

button.clipboard-copy-button:active:not(:disabled) {
    translate: 0 1px;
    filter: brightness(0.95);
}

@media (prefers-reduced-motion: reduce) {
    button.clipboard-copy-button {
        transition: none;
    }

    button.clipboard-copy-button:active:not(:disabled) {
        translate: none;
    }
}

.message-cloud .chat-message {
    --message-header-row-top: var(--item-gap);
    --message-header-row-height: 14px;
    --message-content-inline-padding: 14px;
    --message-footer-item-height: 26px;
    --message-reactions-inline-edge-gap: 2px;
    --message-footer-bottom-drop: calc(var(--message-content-inline-padding) + 13px);
    --message-content-top-padding: calc(var(--message-header-row-top) + var(--message-header-row-height) + var(--item-gap));
    position: relative;
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: var(--message-content-top-padding) var(--message-content-inline-padding) var(--message-content-inline-padding);
    border-radius: var(--message-bubble-radius);
    background: var(--message-bubble-bg, var(--message-bubble-background, #c8f4d6));
    background-color: var(--message-bubble-bg, var(--message-bubble-background, #c8f4d6));
    overflow: visible;
    white-space: pre-wrap;
    word-break: break-word;
    box-shadow: none;
    align-self: flex-start;
    box-sizing: border-box;
    isolation: isolate;
    z-index: 1;
}

.message-cloud .chat-message.chat-message--with-header-indicator {
    --message-header-row-height: 18px;
}

.message-cloud .chat-message::before,
.message-cloud .chat-message::after {
    content: "";
    position: absolute;
    top: auto;
    bottom: var(--message-tail-offset);
    width: var(--message-tail-width);
    height: var(--message-tail-height);
    pointer-events: none;
    border-radius: 0;
    clip-path: none;
    transform: none;
    z-index: 0;
}

.message-cloud .chat-message::before {
    display: block;
    background: var(--message-bubble-bg, var(--message-bubble-background, #c8f4d6));
    background-color: var(--message-bubble-bg, var(--message-bubble-background, #c8f4d6));
    background-image: none;
}

.message-cloud .chat-message::after {
    display: none;
}

.message-cloud.message-cloud--received .chat-message {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-bottom: calc(var(--message-content-inline-padding) + 13px);
}

.message-cloud.message-cloud--sent .chat-message {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    padding-bottom: calc(var(--message-content-inline-padding) + 13px);
}

.message-cloud--received .chat-message::before {
    left: calc(-1 * (var(--message-tail-overlap) - var(--message-tail-cover)));
    clip-path: path("M46 4 C37 4 31 8 29 13 C26 42 18 48 0 50 H46 Z");
}

.message-cloud--sent .chat-message::before {
    bottom: calc(var(--message-tail-offset) + 1px);
    right: calc(-1 * (var(--message-tail-overlap) - var(--message-tail-cover)));
    clip-path: path("M0 4 C9 4 15 8 17 13 C20 42 28 48 46 50 H0 Z");
}

.message-cloud .chat-message.sent,
.message-cloud .chat-message.received {
    margin-left: 0;
    margin-right: 0;
    align-self: flex-start;
}

.message-cloud .chat-message.received .message-header__sender {
    margin-right: 0;
}

.message-reactions {
    display: flex;
    gap: var(--item-gap);
    position: relative;
    z-index: 2;
    margin-top: 0;
    flex-wrap: nowrap;
    width: max-content;
    max-width: none;
}

@keyframes message-reactions-scroll-nudge {
    0%, 18%, 36%, 100% {
        transform: translateX(0);
    }

    9% {
        transform: translateX(4px);
    }

    27% {
        transform: translateX(-4px);
    }
}

.message-reactions-scroll {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    padding-inline: var(--message-reactions-inline-edge-gap);
    translate: 0 1px;
    -webkit-clip-path: inset(0 var(--message-reactions-inline-edge-gap));
    clip-path: inset(0 var(--message-reactions-inline-edge-gap));
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.32) transparent;
}

.message-reactions-scroll--scrollable .message-reactions {
    animation: message-reactions-scroll-nudge 5.5s ease-in-out 0.8s infinite;
    will-change: transform;
}

.message-reactions-scroll--scrollable:active .message-reactions {
    animation: none;
    transform: translateX(0);
}

@media (hover: hover) and (pointer: fine) {
    .message-reactions-scroll--scrollable:hover .message-reactions {
        animation: none;
        transform: translateX(0);
    }
}

.message-reactions-scroll::-webkit-scrollbar {
    height: 4px;
}

.message-reactions-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.32);
}

.message-reactions-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.message-reactions--received {
    align-self: flex-start;
}

.message-reactions--sent {
    align-self: flex-end;
}

.message-reaction {
    flex: 0 0 auto;
    min-width: 28px;
    height: calc(var(--message-footer-item-height) - 4px);
    min-height: calc(var(--message-footer-item-height) - 4px);
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--message-reaction-background, rgba(0, 0, 0, 0.12));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 17px;
    line-height: 1;
    box-sizing: border-box;
}

.message-reaction--removable {
    margin: 0;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    color: inherit;
    font-family: inherit;
    font-weight: inherit;
    cursor: pointer;
}

.message-reaction--removable:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.8);
    outline-offset: 2px;
}

.message-reaction__emoji {
    line-height: 1;
}

.message-reaction__count {
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: rgba(0, 0, 0, 0.8);
}

@media (prefers-reduced-motion: reduce) {
    .message-reactions-scroll--scrollable .message-reactions {
        animation: none;
        transform: translateX(0);
    }
}

.message-header-row {
    position: absolute;
    top: var(--message-header-row-top);
    left: var(--message-content-inline-padding);
    right: var(--message-content-inline-padding);
    display: flex;
    align-items: center;
    gap: var(--item-gap);
    min-width: 0;
    max-width: calc(100% - var(--message-content-inline-padding) - var(--message-content-inline-padding));
    min-height: var(--message-header-row-height);
    overflow: visible;
    z-index: 4;
    pointer-events: none;
}

.message-header-row--sent {
    justify-content: flex-start;
}

.message-header-row--received {
    justify-content: flex-start;
}

.message-header {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--item-gap);
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-sizing: border-box;
    overflow: visible;
    z-index: 2;
    pointer-events: auto;
}

.message-header-row--sent .message-header {
    margin-left: auto;
    align-items: center;
}

.message-header-row--sent .message-header__sender {
    margin-left: auto;
}

.message-header-row--sent .message-header__indicator {
    order: -1;
}

.message-header-row--received .message-header__indicator {
    margin-left: auto;
}

.message-header__sender {
    --chat-label-max-font-size: 14;
    --chat-label-min-font-size: 8;
    display: block;
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
}

.message-header__sender--sent {
    text-align: right;
}

.message-header__sender--received {
    text-align: left;
}

.message-header__indicator {
    width: var(--message-header-row-height);
    height: var(--message-header-row-height);
    flex: 0 0 var(--message-header-row-height);
    object-fit: contain;
    pointer-events: none;
}

.message-header-row .message-header-buttons {
    position: absolute;
    top: calc(-1 * var(--message-header-row-top));
    right: auto;
    left: auto;
    z-index: 5;
    margin: 0;
    transform: none;
    pointer-events: auto;
}

.message-header-row--sent .message-header-buttons {
    left: calc(-1 * var(--message-content-inline-padding));
    right: auto;
}

.message-header-row--received .message-header-buttons {
    right: calc(-1 * var(--message-content-inline-padding));
    left: auto;
}

@media (max-width: 768px) {
    .chat-messages {
        --chat-message-avatar-size: var(--footer-button-size);
    }

    .message-cloud {
        --message-avatar-gap: 8px;
        --message-bubble-width: clamp(260px, 76vw, 330px);
        --message-bubble-radius: calc(var(--footer-button-size) / 2);
        --message-tail-width: 40px;
        --message-tail-height: var(--message-avatar-size);
        --message-tail-offset: 1px;
        --message-tail-overlap: 23px;

        width: min(calc(var(--message-bubble-width) + var(--message-avatar-size) + var(--message-avatar-gap)), calc(100% - 4px));
    }

    .message-cloud .chat-message {
        --message-content-inline-padding: 12px;
        --message-header-row-height: 13px;
        min-width: 0;
        padding: var(--message-content-top-padding) var(--message-content-inline-padding) var(--message-content-inline-padding);
    }

    .message-cloud .chat-message::before,
    .message-cloud .chat-message::after {
        bottom: var(--message-tail-offset);
    }

    .message-cloud--received .chat-message::before {
        bottom: 0;
        clip-path: path("M40 4 C32 4 27 8 25 13 C23 42 16 48 0 50 H40 Z");
    }

    .message-cloud--sent .chat-message::before {
        bottom: 0;
        clip-path: path("M0 4 C8 4 13 8 15 13 C17 42 24 48 40 50 H0 Z");
    }

    .message-header-row {
        top: var(--message-header-row-top);
        left: var(--message-content-inline-padding);
        right: var(--message-content-inline-padding);
        align-items: flex-start;
        gap: var(--item-gap);
        max-width: calc(100% - var(--message-content-inline-padding) - var(--message-content-inline-padding));
        min-height: var(--message-header-row-height);
    }

    .message-header {
        min-height: 0;
        padding: 0;
    }

    .message-header__sender {
        max-width: 132px;
        font-size: 13px;
        --chat-label-max-font-size: 13;
    }

    .chat-message__time {
        font-size: 11px;
    }

    .chat-message__sent-time {
        font-size: 12px;
    }
}

.message-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.reaction-picker-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4000;
}

.reaction-picker-container {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    min-width: 260px;
}

    .reaction-picker-container h4 {
        margin: 0 0 12px;
        font-size: 18px;
        text-align: center;
    }

.reaction-picker-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.reaction-picker-button {
    border: none;
    background: var(--grey-background);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 20px;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.reaction-picker-backdrop--administrator-message .reaction-picker-button {
    background: var(--author-message-bubble-background);
}

    @media (hover: hover) and (pointer: fine) {
        .reaction-picker-button:hover {
            transform: scale(1.1);
        }
    }

.reaction-picker-close {
    display: block;
    margin: 0 auto;
    border: none;
    background: var(--grey-background);
    padding: 6px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 600;
}

.chat-reply-chip {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    min-height: var(--footer-button-size);
    background: transparent;
}

.chat-reply-chip__close {
    flex: 0 0 var(--footer-button-size);
    min-width: var(--footer-button-size);
    min-height: var(--footer-button-size);
}

.chat-reply-chip__close:focus-visible {
    outline: 3px solid rgba(0, 162, 232, 0.32);
    outline-offset: 2px;
}

.marquee-wrapper {
    overflow: hidden; /* чтобы текст не «выпадал» из кнопки/лейбла */
}

.delete-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--grey-background);
    padding: 12px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    transform: translateY(100%);
    transition: transform .3s ease-out;
    z-index: 3000;
}

    .delete-panel.active {
        transform: translateY(0);
    }

    .delete-panel .yes-btn {
        background: green;
        color: #fff;
    }

    .delete-panel .no-btn {
        background: red;
        color: #fff;
    }

    .delete-panel .timer {
        font-weight: bold;
    }

.delete-popup {
    --delete-popup-button-height: var(--footer-button-size);
    --delete-popup-timer-size: var(--footer-button-size);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: var(--main-menu-width);
    padding: 0;
    background: transparent;
    box-shadow: none;
    box-sizing: border-box;
}

    .delete-popup__button.rounded-box {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        max-width: none;
        height: var(--delete-popup-button-height);
        min-height: var(--delete-popup-button-height);
        margin: 0;
        padding: 0 10px;
        border: 2px solid #000;
        color: #000;
        font-size: 18px;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
    }

    .delete-popup__button.rounded-box.start {
        border-radius: calc(var(--delete-popup-button-height) / 2) 0 0 calc(var(--delete-popup-button-height) / 2);
    }

    .delete-popup__button.rounded-box.end {
        border-radius: 0 calc(var(--delete-popup-button-height) / 2) calc(var(--delete-popup-button-height) / 2) 0;
    }

    .delete-popup .delete-popup__button--yes {
        background: var(--grey-background);
    }

    .delete-popup .delete-popup__button--yes-ready {
        background: red;
    }

    .delete-popup .delete-popup__button--no {
        background: #00a2e8;
    }

        @media (hover: hover) and (pointer: fine) {
            .delete-popup .delete-popup__button--no:hover {
                background: #0088cc;
            }
        }

    .delete-popup .delete-popup__button:disabled {
        cursor: not-allowed;
    }

    .delete-popup__timer {
        width: var(--delete-popup-timer-size);
        height: var(--delete-popup-timer-size);
        min-width: var(--delete-popup-timer-size);
        min-height: var(--delete-popup-timer-size);
        border: 2px solid #000;
        border-radius: 50%;
        background: var(--admin-inactive-background);
        color: #000;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--footer-button-icon-size);
        font-weight: 700;
        line-height: 1;
    }

    .delete-popup__timer-icon {
        width: var(--footer-button-icon-size);
        height: var(--footer-button-icon-size);
        object-fit: contain;
        padding: 0;
        box-sizing: border-box;
    }

    .delete-popup__timer-countdown-icon {
        display: block;
        width: var(--footer-button-icon-size);
        height: var(--footer-button-icon-size);
        object-fit: contain;
        padding: 0;
        box-sizing: border-box;
    }

.add-line-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

.add-line-input {
    width: 100%;
    max-width: 100%;
}

.add-line-window {
    width: 400px;
}

.add-line-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: var(--item-gap);
    background: transparent;
    z-index: 10000;
}

.add-line-content {
    width: min(400px, calc(100vw - 32px));
}

.add-line-content--with-actions {
    display: flex;
    align-items: center;
    gap: var(--double-item-gap);
}

.add-line-content--with-actions > .footer-btn {
    flex-shrink: 0;
}

.add-line-content--with-actions > .add-line-input {
    margin: 0;
}

.add-line-active .chapter-type-toggle {
    display: none !important;
}

@media (min-width: 769px) {
    .add-line-active .footer-buttons,
    .add-line-active .footer-container-host,
    .add-line-active .footer-buttons-placeholder,
    .add-line-active .overlay-buttons {
        display: none !important;
    }
}

.user-line__icon {
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

@media (max-width: 768px) {
    .add-line-content {
        width: calc(100vw - (2 * var(--item-gap)));
    }

    html, body {
        overflow-x: hidden;
    }

    .menu-with-banners,
    .books-scroll,
    .ordinary-center-text,
    .ordinary-center-text-yellow,
    .ordinary-left-text {
        max-width: 100%;
        width: 100%;
        padding-left: var(--interface-edge-gap);
        padding-right: var(--interface-edge-gap);
        box-sizing: border-box;
    }

    .header-container,
    .fixed-header-container {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    .books-scroll {
        left: 0;
        transform: none;
        padding: 0 var(--contoured-item-gap);
        bottom: calc(var(--bot-ban-h) + var(--bottom-offset) + var(--search-h) + min(var(--contoured-item-gap), var(--bot-ban-h)));
    }

    .bottom-container {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px var(--interface-edge-gap);
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        left: 0;
        transform: none;
    }

    .banner-max,
    .banner-mini {
        max-width: 100%;
        width: 100%;
    }

    .annotation-icon-button {
        width: 100%;
        min-height: 48px;
    }
}

.page {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100dvh;
    overflow: hidden;
}

html.mobile-input-viewport-active .page {
    min-height: var(--mobile-input-visible-page-height, 100dvh);
    height: var(--mobile-input-visible-page-height, 100dvh);
}

.page-layout {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    width: 100%;
}

.page-layout > .header-container {
    grid-row: 1;
}

.page-layout > .footer-container-host {
    grid-row: 3;
}

.middle-container {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
}

.page-layout > .middle-container {
    grid-row: 2;
    padding-bottom: 0;
}

.middle-container > .menu-wrapper {
    width: var(--main-menu-width);
    max-width: 400px;
}

.middle-container.book-annotation-page__container,
.middle-container.chat-page__main {
    overflow-y: hidden;
}

.middle-container.chat-page__main {
    align-items: stretch;
    width: 100%;
    max-width: none;
    justify-self: stretch;
    padding-top: var(--vertical-screen-edge-gap);
    box-sizing: border-box;
}

main {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center; /* центр по горизонтали */
    align-items: stretch;
    min-height: 0;
}

main > article.content {
    width: 100%;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    box-sizing: border-box;
}


.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row {
    background-color: var(--grey-background);
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row a,
    .top-row .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

        .top-row a:hover,
        .top-row .btn-link:hover {
            text-decoration: underline;
        }

        .top-row a:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
        }

@media (max-width: 640.98px) {
    .top-row {
        justify-content: space-between;
    }

        .top-row a,
        .top-row .btn-link {
            margin-left: 0;
        }
}

@media (max-width: 768px) {
    article {
        padding: 1rem 0.85rem !important;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }

    .content {
        padding-top: 0.75rem;
    }
}

@media (min-width: 641px) {
    .page {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row {
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .top-row.auth a:first-child {
            flex: 1;
            text-align: right;
            width: 0;
        }

    .top-row,
    article {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#page-container main article.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    text-align: center;
}

#page-container main article.content:has(> .chat-page-layout) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#page-container main article.content:has(> .user-cabinet-header),
#page-container main article.content:has(> .cabinet-list-header),
#page-container main article.content:has(> .cabinet-list-body),
#page-container main article.content:has(> .chapter-view-main),
#page-container main article.content:has(> .chapter-player),
#page-container main article.content:has(> .admin-book-annotation-header) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden;
}

@media (max-width: 768px) {
    #page-container main article.content:has(> .book-author-statistic-page),
    #page-container main article.content:has(> .reader-simplified-statistics-page) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #page-container main article.content:has(> .page-layout) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

#page-container.page--with-wallpaper {
    isolation: isolate;
    background-color: var(--page-background-color, #101722);
    background-image: var(--page-wallpaper-image, none);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: auto 100vh;
    background-size: auto 100dvh;
}

#page-container.page--with-wallpaper > * {
    position: relative;
    z-index: 1;
}

.readable-surface {
}

.readable-surface--strong {
}

.readable-text {
    color: inherit;
}

.readable-text-on-image {
    color: var(--readable-text-color-on-image);
}

#page-container.page--with-wallpaper .readable-surface {
    background: var(--readable-glass-background);
    border: 1px solid var(--readable-glass-border);
    backdrop-filter: blur(var(--readable-blur-strength));
    -webkit-backdrop-filter: blur(var(--readable-blur-strength));
}

#page-container.page--with-wallpaper .readable-surface--strong {
    background: var(--readable-glass-background-strong);
    border-color: var(--readable-glass-border-strong);
}

#page-container.page--with-wallpaper .readable-text {
    color: var(--readable-text-color-on-image);
}

#page-container.page--with-wallpaper .ordinary-center-text,
#page-container.page--with-wallpaper .ordinary-left-text,
#page-container.page--with-wallpaper .marquee-text,
#page-container.page--with-wallpaper .summary-label,
#page-container.page--with-wallpaper .fvdf {
    color: var(--readable-text-color-on-image);
}

#page-container.page--with-wallpaper .ordinary-center-text-yellow {
    color: var(--yellow-button-background);
}

#page-container.page--with-wallpaper .blue-button .marquee-text,
#page-container.page--with-wallpaper .yellow-button .marquee-text,
#page-container.page--with-wallpaper .gray-button .marquee-text,
#page-container.page--with-wallpaper .gray-button-for-reader .marquee-text,
#page-container.page--with-wallpaper .book-title .marquee-text,
#page-container.page--with-wallpaper .chapter-title .marquee-text {
    color: inherit;
    text-shadow: none;
}

#page-container.page--with-wallpaper .book-annotation__summary.readable-surface--strong,
#page-container.page--with-wallpaper .summary-label.readable-surface--strong {
    border-color: var(--readable-glass-border-strong);
}

#page-container.page--with-wallpaper .book-annotation__details.readable-surface {
    margin-bottom: 0;
    box-shadow: none;
}

#page-container.page--with-wallpaper .book-annotation__genres .book-genres-display__diamond--filled {
    background-color: #ffffff;
    border-color: #ffffff;
}

#page-container.page--with-wallpaper .book-annotation__genres .book-genres-display__diamond--outline {
    border-color: rgba(255, 255, 255, 0.85);
}


#page-container.page--with-wallpaper .message-cloud .chat-message {
    box-shadow: none;
}


#page-container.page--with-wallpaper .background-message-withoutbackground {
    --message-bubble-background: #7092be;
    --message-reaction-background: #7092be;
}

#page-container.page--with-wallpaper .date-result,
#page-container.page--with-wallpaper .jump-input,
#page-container.page--with-wallpaper .date-filter-paper,
#page-container.page--with-wallpaper .chat-message__deleted-audit,
#page-container.page--with-wallpaper .chat-message__deleted-banner {
    color: var(--readable-text-color);
    background: var(--readable-glass-background-light);
    border: 1px solid rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(var(--readable-blur-strength));
    -webkit-backdrop-filter: blur(var(--readable-blur-strength));
}

#page-container.page--with-wallpaper .add-line-input {
    border: 2px solid #000000;
}

#page-container.page--with-wallpaper .service-message__identity .avatar-container,
#page-container.page--with-wallpaper .service-message__shortcut,
#page-container.page--with-wallpaper .service-message__identity-action,
#page-container.page--with-wallpaper .service-message__event-pill {
    border: 2px solid #000000;
}

#page-container.page--with-wallpaper .service-message__identity-pill,
#page-container.page--with-wallpaper .service-message__event-pill {
    background: var(--service-message-header-background);
    background-color: var(--service-message-header-background);
    background-image: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#page-container.page--with-wallpaper .service-message__identity-pill {
    border: var(--service-message-outline-width) solid #000000;
}

#page-container.page--with-wallpaper .service-message__identity .avatar-container.service-message__rank-background,
#page-container.page--with-wallpaper .service-message__event-pill.service-message__rank-background {
    background: var(--message-reaction-background, var(--service-message-header-background));
    background-color: var(--message-reaction-background, var(--service-message-header-background));
}

#page-container.page--with-wallpaper .chat-input-context {
    color: var(--readable-text-color);
}

#page-container.page--with-wallpaper .date-result {
    max-width: 320px;
}

#page-container.page--with-wallpaper .date-filter-paper {
    color: var(--readable-text-color);
}

#page-container.page--with-wallpaper .chat-message__quote {
    color: var(--readable-text-color);
    background: var(--message-reaction-background, rgba(0, 0, 0, 0.12));
    border: none;
    box-shadow: none;
    backdrop-filter: blur(var(--readable-blur-strength));
    -webkit-backdrop-filter: blur(var(--readable-blur-strength));
}

#page-container.page--with-wallpaper .chat-message__quote::before {
    background: #000000;
    opacity: 1;
}

#page-container.page--with-wallpaper .chat-message__quote-author {
    color: rgba(16, 23, 34, 0.78);
}

#page-container.page--with-wallpaper .chat-message__quote-text {
    color: #000000;
}

#page-container.page--with-wallpaper .chat-message__deleted-banner {
    border: 1px dashed rgba(16, 23, 34, 0.34);
}

#page-container.page--with-wallpaper .chat-date-separator {
    gap: 0;
    color: var(--readable-text-color-on-image);
}

#page-container.page--with-wallpaper .chat-date-separator__text {
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--readable-glass-background-strong);
    border: 1px solid var(--readable-glass-border);
    backdrop-filter: blur(var(--readable-blur-strength));
    -webkit-backdrop-filter: blur(var(--readable-blur-strength));
}

#page-container.page--with-wallpaper .chat-date-separator__line {
    background: rgba(255, 255, 255, 0.45);
}

@media (prefers-contrast: more) {
    :root {
        --readable-text-color-on-image: #ffffff;
        --readable-glass-background: rgba(5, 8, 12, 0.94);
        --readable-glass-background-strong: rgba(2, 4, 8, 0.98);
        --readable-glass-background-light: rgba(255, 255, 255, 0.97);
        --readable-glass-border: rgba(255, 255, 255, 0.9);
        --readable-glass-border-strong: rgba(255, 255, 255, 0.98);
        --readable-blur-strength: 0px;
    }

    #page-container.page--with-wallpaper .readable-surface,
    #page-container.page--with-wallpaper .date-result,
    #page-container.page--with-wallpaper .jump-input,
    #page-container.page--with-wallpaper .date-filter-paper,
    #page-container.page--with-wallpaper .chat-message__quote,
    #page-container.page--with-wallpaper .chat-message__deleted-audit,
    #page-container.page--with-wallpaper .chat-message__deleted-banner,
    #page-container.page--with-wallpaper .chat-date-separator__text {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    #page-container.page--with-wallpaper .chat-date-separator__text {
        background: rgba(0, 0, 0, 0.94);
        border-color: rgba(255, 255, 255, 0.92);
    }

    #page-container.page--with-wallpaper .chat-date-separator__line {
        background: rgba(255, 255, 255, 0.9);
    }

    #page-container.page--with-wallpaper .ordinary-center-text,
    #page-container.page--with-wallpaper .ordinary-center-text-yellow,
    #page-container.page--with-wallpaper .ordinary-left-text,
    #page-container.page--with-wallpaper .marquee-text,
    #page-container.page--with-wallpaper .summary-label,
    #page-container.page--with-wallpaper .fvdf,
    #page-container.page--with-wallpaper .readable-text {
        text-shadow: none;
    }
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* Navigation menu */
.navbar-toggler {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

    .navbar-toggler:checked {
        background-color: rgba(255, 255, 255, 0.5);
    }

.top-row.navbar {
    height: 3.5rem;
    background-color: rgba(0, 0, 0, 0.4);
}

.navbar-brand {
    font-size: 1.1rem;
}

.bi {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type {
        padding-top: 1rem;
    }

    .nav-item:last-of-type {
        padding-bottom: 1rem;
    }

    .nav-item .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

    .nav-item a.active {
        background-color: rgba(255, 255, 255, 0.37);
        color: white;
    }

    @media (hover: hover) and (pointer: fine) {
        .nav-item .nav-link:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: white;
        }
    }

.nav-scrollable {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler {
        display: none;
    }

    .nav-scrollable {
        display: block;
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}

/* Chapter player */
.chapter-player .footer-btn .button-icon[src="/icons/play.svg"] {
    transform: translateX(2px) scale(0.9);
}

.footer-btn.autoplay-button {
    background: #d9534f;
}

    .footer-btn.autoplay-button.autoplay-on {
        background: #5cb85c;
    }

    .footer-btn.autoplay-button.autoplay-off {
        background: #d9534f;
    }

    .footer-btn.autoplay-button.autoplay-on:focus {
        background: #4cae4c;
    }

    .footer-btn.autoplay-button.autoplay-off:focus {
        background: #c9302c;
    }

    @media (hover: hover) and (pointer: fine) {
        .footer-btn.autoplay-button.autoplay-on:hover {
            background: #4cae4c;
        }

        .footer-btn.autoplay-button.autoplay-off:hover {
            background: #c9302c;
        }
    }

.center-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .center-overlay > * {
        pointer-events: auto;
    }

/* Wallpaper selection */
.wallpaper-selection {
    padding-top: 0;
    width: 100%;
}

.wallpaper-selection__mode-switch {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
}

.wallpaper-selection__mode-button {
    border-radius: 30px;
    border: 2px solid #000;
    padding: 10px 18px;
    text-transform: uppercase;
    background: #b0c4de;
    color: #000;
    font-weight: bold;
}

.wallpaper-selection__mode-button--active {
    background: #00a2e8;
    color: #fff;
}

.wallpaper-selection__list {
    display: flex;
    flex-wrap: wrap;
    row-gap: calc((3 * var(--item-gap)) + var(--standard-contour-width));
    column-gap: var(--contoured-item-gap);
    justify-content: space-evenly;
    width: 100%;
    box-sizing: border-box;
}

/* Book awards */
.menu-wrapper-horizontal {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.book-awards-page__header {
    top: var(--contoured-item-gap);
    margin: var(--contoured-item-gap) auto var(--contoured-item-gap);
}

.book-awards-page__header > .gray-button-for-reader {
    margin-top: 0;
    margin-bottom: 0;
}

.book-awards-page__content {
    flex-direction: column;
    row-gap: var(--contoured-item-gap);
    column-gap: var(--contoured-item-gap);
    margin-top: 0;
    margin-bottom: 0;
}

.book-awards-page__body {
    padding-top: 0;
    padding-bottom: 0;
}

.book-awards-page__grid {
    row-gap: var(--contoured-item-gap);
    margin-top: 0;
    margin-bottom: 0;
}

/* Chapter view */
.slider-container {
    width: 200px;
}

/* User cabinet */
.hourglass {
    animation: flip var(--time) ease-in-out infinite;
    border-bottom: solid 1vmin #630;
    border-top: solid 1vmin #630;
    left: 50%;
    margin-left: -6vmin;
    margin-top: -11vmin;
    padding: 0 1vmin;
    position: fixed;
    top: 50%;
}

    .hourglass .top,
    .hourglass .bottom {
        background-color: #def;
        height: 10vmin;
        overflow: hidden;
        position: relative;
        width: 10vmin;
    }

    .hourglass .top {
        border-radius: 0 0 50% 50%;
    }

        .hourglass .top:before {
            animation: top var(--time) linear infinite;
            background-color: #fc6;
            border-radius: 50%;
            content: "";
            display: block;
            height: 10vmin;
            left: 0;
            position: absolute;
            top: 0;
            transform: translateY(50%);
            width: 10vmin;
        }

        .hourglass .top:after {
            animation: top-drip var(--time) linear infinite;
            background-color: #fc6;
            content: "";
            display: block;
            height: 100%;
            left: 45%;
            position: absolute;
            top: 0;
            transform: translateY(100%);
            width: 10%;
        }

    .hourglass .bottom {
        border-radius: 50% 50% 0 0;
    }

        .hourglass .bottom:before {
            animation: bottom var(--time) linear infinite;
            background-color: #fc6;
            border-radius: 50%;
            content: "";
            display: block;
            height: 10vmin;
            left: 0;
            position: absolute;
            top: 0;
            transform: translateY(100%);
            width: 10vmin;
        }

        .hourglass .bottom:after {
            animation: bottom-drip var(--time) linear infinite;
            background-color: #fc6;
            content: "";
            display: block;
            height: 100%;
            left: 45%;
            position: absolute;
            top: 0;
            width: 10%;
        }

@keyframes flip {
    0%, 45% {
        transform: rotate(0);
    }

    50%, 95% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes bottom {
    0% {
        transform: translateY(100%);
    }

    50% {
        transform: translateY(50%);
    }

    51% {
        transform: translateY(-50%);
    }

    100% {
        transform: translateY(-100%);
    }
}

@keyframes top {
    0% {
        transform: translateY(50%);
    }

    50% {
        transform: translateY(100%);
    }

    51% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(-50%);
    }
}

@keyframes bottom-drip {
    0% {
        left: 45%;
        transform: translateY(-100%);
        width: 10%;
    }

    5% {
        transform: translateY(0);
    }

    45%, 100% {
        left: 50%;
        transform: translateY(0);
        width: 0;
    }
}

@keyframes top-drip {
    0%, 50% {
        left: 45%;
        transform: translateY(100%);
        width: 10%;
    }

    55% {
        left: 45%;
        transform: translateY(0);
        width: 10%;
    }

    100% {
        left: 50%;
        transform: translateY(0);
        width: 0;
    }
}

/* Chat page */
.chat-page {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow: hidden;
}

/* Statistics chart */
.statistics-chart-container {
    width: 100%;
    padding: 24px 32px 140px;
    box-sizing: border-box;
}

    .statistics-chart-container canvas {
        width: 100% !important;
        height: auto !important;
    }

/* Wallpaper selector */
.wallpaper-selector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--contoured-item-gap);
    flex: 0 0 calc(var(--footer-button-size) * 2);
    width: calc(var(--footer-button-size) * 2);
    padding: 0;
    box-sizing: border-box;
}

.wallpaper-selector__preview {
    --wallpaper-selector-preview-border-width: 2px;
    --wallpaper-selector-preview-border-radius: 26px;
    width: calc(var(--footer-button-size) * 2);
    min-width: calc(var(--footer-button-size) * 2);
    max-width: calc(var(--footer-button-size) * 2);
    height: calc(var(--footer-button-size) * 3);
    min-height: calc(var(--footer-button-size) * 3);
    max-height: calc(var(--footer-button-size) * 3);
    aspect-ratio: auto;
    border-radius: var(--wallpaper-selector-preview-border-radius);
    border: var(--wallpaper-selector-preview-border-width) solid #000;
    background: rgba(255, 255, 255, 0.2);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.wallpaper-selector__preview--default {
    background: var(--background-color);
}

    .wallpaper-selector__preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        cursor: pointer;
        border-radius: calc(var(--wallpaper-selector-preview-border-radius) - var(--wallpaper-selector-preview-border-width));
        display: block;
    }

.wallpaper-selector__placeholder {
    font-size: 12px;
    text-align: center;
    padding: 12px;
    text-transform: uppercase;
    color: #333;
}

.wallpaper-select-button {
    width: var(--footer-button-size);
    min-width: var(--footer-button-size);
    max-width: var(--footer-button-size);
    height: var(--footer-button-size);
    min-height: var(--footer-button-size);
    max-height: var(--footer-button-size);
    border-radius: 50%;
    border: 2px solid #000;
    background-color: #00a2e8;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color .2s ease;
    box-sizing: border-box;
}

    .wallpaper-select-button img {
        width: auto;
        height: 100%;
        object-fit: contain;
    }

.wallpaper-select-button--selected {
    background-color: var(--grey-background);
    cursor: default;
}

.wallpaper-select-button:disabled,
.wallpaper-select-button[disabled] {
    background-color: var(--grey-background);
    cursor: default;
}

.wallpaper-select-button:disabled img,
.wallpaper-select-button[disabled] img {
    opacity: 0.55;
}

.wallpaper-selector__label {
    font-size: 14px;
    text-align: center;
    color: #fff;
    max-width: 100%;
}

/* Sortable list */
.sortable-ghost {
    visibility: hidden;
}

.sortable-fallback {
    opacity: 1 !important;
}

/* Flag with icon controls */
.grey-flag .image-container,
.light-grey-flag .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: 38px;
    border: 2px solid #000000;
    width: 100px;
    height: 50px;
}

.grey-flag .image-container {
    background-color: var(--grey-background);
}

.light-grey-flag .image-container {
    background-color: var(--grey-background);
}

.grey-flag .image-preview,
.light-grey-flag .image-preview {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

.grey-flag .main-container,
.light-grey-flag .main-container {
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.grey-counter-flag {
    --grey-counter-flag-height: var(--footer-button-size);
    --grey-counter-flag-gap: 12px;
    --grey-counter-flag-right-padding: 14px;
    display: inline-flex;
    align-items: stretch;
    width: 400px;
    max-width: 100%;
    min-height: var(--grey-counter-flag-height);
    height: var(--grey-counter-flag-height);
    padding: 0 var(--grey-counter-flag-right-padding) 0 0;
    gap: var(--grey-counter-flag-gap);
    border: 2px solid #000000;
    border-radius: 999px;
    background-color: var(--grey-background);
    box-sizing: border-box;
}

.grey-counter-flag__icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: -2px;
    right: 2px;
    width: var(--grey-counter-flag-height);
    height: var(--grey-counter-flag-height);
    min-width: var(--grey-counter-flag-height);
    flex: 0 0 var(--grey-counter-flag-height);
    border: 2px solid #000000;
    border-radius: 50%;
    background-color: var(--grey-background);
    box-sizing: border-box;
    z-index: 1;
}

.grey-counter-flag__icon {
    width: var(--footer-button-icon-size);
    height: var(--footer-button-icon-size);
    object-fit: contain;
}

.grey-counter-flag__value {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    left: calc((var(--grey-counter-flag-right-padding) - var(--grey-counter-flag-height) - var(--grey-counter-flag-gap)) / 2);
    background-color: var(--grey-background);
    text-align: center;
    color: #000000;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    z-index: 0;
}

/* Banner control */
.bunner-label {
    display: flex;
    align-items: center;
    column-gap: 8px;
    padding: 6px 16px;
    background-color: var(--admin-inactive-background);
    border-radius: 20px;
}

    .bunner-label .book-title__text {
        flex: 1;
    }

.bunner-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 44px;
    border: 2px solid #000;
    border-radius: 50%;
    box-sizing: border-box;
}

.bunner-button-save {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    padding: 0;
    outline: none;
    cursor: pointer;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60% 60%;
}

.bunner-time {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    font-size: 22px;
    color: #000;
    border: 2px solid #000;
    border-radius: 50%;
    background-color: var(--admin-inactive-background);
    box-sizing: border-box;
    margin-left: auto;
}

/* Popularity rating */
.popularity-rating {
    --bans-counter-icon-size: calc(var(--footer-button-size) * 0.98);
    --bans-counter-icon-scale: 1.28;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: var(--main-menu-width);
    max-width: 400px;
    height: var(--footer-button-size);
    min-height: var(--footer-button-size);
    max-height: var(--footer-button-size);
    padding: 0 16px;
    border-radius: calc(var(--footer-button-size) / 2);
    border: 2px solid rgb(0, 0, 0);
    background: var(--grey-background);
    cursor: pointer;
    font-family: inherit;
    box-sizing: border-box;
}

    .popularity-rating:disabled {
        opacity: 0.8;
        cursor: default;
        transform: none;
    }

.popularity-rating__content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    height: 100%;
}

.popularity-rating__title {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.popularity-rating__stars {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    width: 100%;
    height: 100%;
    column-gap: clamp(0px, calc(var(--footer-button-size) * 0.02), 1px);
    overflow: hidden;
}

.popularity-rating__star {
    display: block;
    width: min(100%, var(--bans-counter-icon-size));
    height: min(100%, var(--bans-counter-icon-size));
    object-fit: contain;
    transform: scale(var(--bans-counter-icon-scale));
    transform-origin: center;
}

.popularity-rating__value {
    font-size: 18px;
    font-weight: 700;
    min-width: 48px;
    text-align: right;
}

@media (max-width: 768px) {
    .popularity-rating {
        padding: 0 12px;
        gap: 12px;
    }

    .popularity-rating__title {
        font-size: 14px;
    }

    .popularity-rating__value {
        font-size: 16px;
    }
}

.wallpaper-mode-toggle {
    gap: 12px;
}

.footer-buttons .wallpaper-mode-toggle .icon-right img {
    width: var(--footer-button-icon-size);
    height: var(--footer-button-icon-size);
    padding: var(--footer-button-icon-padding);
    box-sizing: content-box;
}


.chapter-bottom-container {
    flex-direction: column;
    gap: var(--contoured-item-gap);
    width: 100%;
    min-width: 0;
    max-width: min(420px, 100vw);
    padding: 0 14px;
    box-sizing: border-box;
    align-items: stretch;
    overflow-x: hidden;
}

    .chapter-bottom-container .stackpanel {
        gap: var(--contoured-item-gap);
    }

    .chapter-bottom-container .top-control-buttons {
        width: 100%;
        gap: var(--contoured-item-gap);
        margin-bottom: 0;
    }

    .chapter-bottom-container .chapter-vote-top-control-buttons {
        justify-content: center;
    }

    .chapter-bottom-container .chapter-vote-actions {
        display: grid;
        grid-template-columns: repeat(3, var(--footer-button-size));
        align-items: center;
        justify-content: space-evenly;
        width: 100%;
    }

    .chapter-bottom-container .footer-btn .button-icon {
        width: var(--footer-button-size);
        height: var(--footer-button-size);
        padding: 0;
        box-sizing: border-box;
    }

    .chapter-bottom-container .footer-btn .button-icon[src^="/icons/arrow_back.svg"] {
        transform: none;
    }

    .chapter-bottom-container .page-indicators {
        position: static;
        bottom: auto;
        left: auto;
        transform: none;
        opacity: 1;
        pointer-events: auto;
        width: 100%;
        justify-content: center;
        gap: var(--contoured-item-gap);
    }

        .chapter-bottom-container .page-indicators .date-info-range {
            flex: 1 1 auto;
        }

    .chapter-bottom-container .navigation-container {
        width: 100%;
        justify-content: space-between;
        margin-top: 0;
        margin-bottom: 0;
        gap: var(--double-item-gap);
    }

        .chapter-bottom-container .navigation-container > span {
            display: flex;
            align-items: center;
            min-width: 0;
        }

        .chapter-bottom-container .navigation-container > span.chapter-hold-control,
        .chapter-bottom-container .navigation-container > span.chapter-hold-control .footer-btn {
            touch-action: none;
            user-select: none;
            -webkit-user-select: none;
            -webkit-touch-callout: none;
        }

            .chapter-bottom-container .navigation-container > span.chapter-hold-control img {
                pointer-events: none;
            }

        .chapter-bottom-container .navigation-container > span:nth-child(2) {
            flex: 1 1 auto;
        }

        .chapter-bottom-container .navigation-container > span:first-child,
        .chapter-bottom-container .navigation-container > span:last-child {
            flex: 0 0 var(--footer-button-size);
            justify-content: center;
        }

        .chapter-player .navigation-container > .chapter-hold-control:last-child .button-icon,
        .controls-wrapper:not(.admin-info-viewer) .chapter-view-bottom-container .navigation-container > .chapter-hold-control:last-child .button-icon {
            width: calc(var(--footer-button-size) * 0.95);
            height: calc(var(--footer-button-size) * 0.95);
        }

        .chapter-player .navigation-container > .chapter-hold-control:last-child .button-icon[src="/icons/arrow2_right.svg"],
        .controls-wrapper:not(.admin-info-viewer) .chapter-view-bottom-container .navigation-container > .chapter-hold-control:last-child .button-icon[src="/icons/arrow2_right.svg"] {
            width: calc(var(--footer-button-size) * 0.855);
            height: calc(var(--footer-button-size) * 0.855);
        }

        .chapter-bottom-container .navigation-container .slider-wrapper {
            min-width: 0;
            height: var(--footer-button-size);
        }

        .chapter-bottom-container .navigation-container .slider-container {
            --chapter-slider-thumb-size: var(--footer-button-size);
            --chapter-slider-track-height: max(4px, calc(var(--footer-button-size) * 0.1));
            width: 100%;
            height: var(--footer-button-size);
            display: flex;
            align-items: center;
        }

            /* Align the track ends with the outer edges of the thumb's end positions. */
            .chapter-bottom-container .navigation-container .slider-container::before {
                content: "";
                position: absolute;
                inset-inline: 0;
                top: 50%;
                height: var(--chapter-slider-track-height);
                transform: translateY(-50%);
                border-radius: 9999px;
                background: var(--grey-background);
                pointer-events: none;
            }

            .chapter-bottom-container .navigation-container .slider-container .slider-progress-indicator {
                display: none;
            }

            .chapter-bottom-container .navigation-container .slider-container input[type="range"] {
                position: relative;
                z-index: 1;
                width: 100%;
                height: var(--chapter-slider-thumb-size);
                margin: 0;
                padding: 0;
                border: 0;
                background: transparent;
                cursor: pointer;
                pointer-events: auto;
                touch-action: none;
                appearance: none;
                -webkit-appearance: none;
            }

                .chapter-bottom-container .navigation-container .slider-container input[type="range"]::-webkit-slider-runnable-track {
                    height: var(--chapter-slider-track-height);
                    background: transparent;
                    border: 0;
                    border-radius: 9999px;
                }

                .chapter-bottom-container .navigation-container .slider-container input[type="range"]::-webkit-slider-thumb {
                    width: var(--chapter-slider-thumb-size);
                    height: var(--chapter-slider-thumb-size);
                    margin-top: calc((var(--chapter-slider-track-height) - var(--chapter-slider-thumb-size)) / 2);
                    border: 2px solid #000;
                    border-radius: 50%;
                    box-sizing: border-box;
                    background: #00a2e8;
                    opacity: 1 !important;
                    appearance: none;
                    -webkit-appearance: none;
                }

                .chapter-bottom-container .navigation-container .slider-container input[type="range"]::-moz-range-track {
                    height: var(--chapter-slider-track-height);
                    background: transparent;
                    border: 0;
                    border-radius: 9999px;
                }

                .chapter-bottom-container .navigation-container .slider-container input[type="range"]::-moz-range-progress {
                    height: var(--chapter-slider-track-height);
                    background: transparent;
                    border-radius: 9999px;
                }

                .chapter-bottom-container .navigation-container .slider-container input[type="range"]::-moz-range-thumb {
                    width: var(--chapter-slider-thumb-size);
                    height: var(--chapter-slider-thumb-size);
                    border: 2px solid #000;
                    border-radius: 50%;
                    box-sizing: border-box;
                    background: #00a2e8;
                    opacity: 1 !important;
                }

                .chapter-bottom-container .navigation-container .slider-container input[type="range"]::-ms-track {
                    height: var(--chapter-slider-track-height);
                    border-color: transparent;
                    color: transparent;
                    background: transparent;
                }

                .chapter-bottom-container .navigation-container .slider-container input[type="range"]::-ms-fill-lower,
                .chapter-bottom-container .navigation-container .slider-container input[type="range"]::-ms-fill-upper {
                    background: transparent;
                    border-radius: 9999px;
                }

                .chapter-bottom-container .navigation-container .slider-container input[type="range"]::-ms-thumb {
                    width: var(--chapter-slider-thumb-size);
                    height: var(--chapter-slider-thumb-size);
                    border: 2px solid #000;
                    border-radius: 50%;
                    box-sizing: border-box;
                    background: #00a2e8;
                    opacity: 1 !important;
                }

    .chapter-bottom-container .date-info-range {
        width: 100%;
        display: flex;
        margin-top: 0;
    }

@media (max-width: 768px) {
    .chapter-player .chapter-bottom-container,
    .chapter-view-bottom-container {
        width: 100vw;
        max-width: none;
        padding-inline: var(--contoured-item-gap);
    }

    .chapter-player .chapter-bottom-container .top-control-buttons {
        display: grid;
        grid-template-columns: repeat(4, var(--footer-button-size));
        justify-content: space-between;
        gap: 0;
        min-width: 0;
    }

    .chapter-player .chapter-bottom-container .top-control-buttons.chapter-vote-top-control-buttons {
        display: flex;
        justify-content: center;
    }

    .chapter-screen-title .marquee-text {
        font-size: 30px !important;
    }

    .chapter-view-bottom-container .top-control-buttons {
        justify-content: center;
    }

    .chapter-player .chapter-bottom-container .page-indicators .info-pill-group,
    .chapter-view-bottom-container .page-indicators .info-pill-group {
        display: flex;
        width: 100%;
        margin-top: 0;
    }

    .chapter-player .chapter-bottom-container .page-indicators .info-pill,
    .chapter-view-bottom-container .page-indicators .info-pill {
        flex: 1 1 0;
        min-width: 0;
        box-sizing: border-box;
    }
}

.book-editor-upload-center {
    display: flex;
    justify-content: center;
}

.book-editor-cover-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 4px solid #ffc90e;
    outline: 1px solid #000;
    border-radius: 8px;
    margin: 0 auto;
    max-width: 280px;
}

    .book-editor-cover-wrap .photo-placeholder {
        border: none;
        outline: none;
    }


.footer-btn.book-editor-footer-pill {
    width: calc(var(--footer-button-size) * 2);
    height: var(--footer-button-size);
    border-radius: 999px;
    padding: 0;
    display: inline-flex;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    background-color: var(--yellow-button-background);
}
.footer-btn.book-editor-footer-pill-blue {
    width: calc(var(--footer-button-size) * 2);
    height: var(--footer-button-size);
    border-radius: 999px;
    padding: 0;
    display: inline-flex;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    background-color: #00a2e8;
}

    @media (hover: hover) and (pointer: fine) {
        .footer-btn.book-editor-footer-pill:hover:not(:disabled):not([disabled]) {
            background-color: #ffbf00;
        }
    }

.book-editor-footer-pill .button-icon,
.book-editor-footer-pill-blue .button-icon {
    width: auto;
    max-width: none;
    height: var(--footer-button-icon-size);
    object-fit: contain;
    padding: 0;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* AdminPages styles extracted from Razor components */
/* AdminInfoEditor.razor */
.info-editor-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
}

    .info-editor-item .language-button {
        width: 100%;
        max-width: 260px;
        font-weight: 700;
        text-transform: uppercase;
    }

/* AdminInfo.razor */
.chapter-title-wrapper.admin-info-viewer {
    display: flex;
    justify-content: center;
    padding-top: calc(var(--vertical-screen-edge-gap) + var(--item-gap));
    box-sizing: border-box;
}

.admin-info-viewer__title {
    margin: 0;
    color: #000000;
    font-size: clamp(16px, 6vw, 24px) !important;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}

.chapter-view-bottom-container .navigation-center-control {
    display: flex;
    align-items: center;
    justify-content: center;
}

.controls-wrapper.admin-info-viewer .chapter-view-bottom-container {
    max-width: 400px;
}

.controls-wrapper.admin-info-viewer .navigation-container {
    display: grid;
    grid-template-columns: repeat(3, var(--footer-button-size));
    justify-content: space-evenly;
    gap: 0;
}

.controls-wrapper.admin-info-viewer .navigation-container > * {
    justify-self: center;
}

/* AuthorEditor.razor */
.author-editor-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--double-item-gap);
    width: min(100%, 400px);
    margin: 0 auto;
}

.author-editor-photo-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

.author-editor-language-chip {
    width: 100%;
}

.author-editor-line-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--contoured-item-gap);
}

.author-editor-main-button {
    flex: 1 1 auto;
    min-width: 0;
}

.author-editor-footer-actions-slot {
    width: 100%;
}

.delete-button,
.circle-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--blue-button-reference-height);
    width: var(--blue-button-reference-height);
    min-width: var(--blue-button-reference-height);
    height: var(--blue-button-reference-height);
    min-height: var(--blue-button-reference-height);
    padding: 0;
    border-radius: 50%;
    border: 2px solid black;
}

.delete-button {
    background-color: #00a2e8;
}

.delete-button:disabled,
.delete-button[disabled] {
    background-color: var(--admin-inactive-background);
    cursor: not-allowed;
    opacity: 0.8;
}

/* BookFormatsEditor.razor */
.middle-container.book-formats-editor__body {
    align-items: stretch;
    overflow: hidden;
}

.middle-container.book-formats-editor__body > .book-formats-editor__menu {
    height: 100%;
    min-height: 0;
}

.book-formats-editor__menu > :not(.book-formats-editor__voice-list) {
    flex-shrink: 0;
}

.book-formats-editor__voice-list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--admin-page-item-gap);
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.formats-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.format-btn {
    flex: 1 1 auto;
    min-width: 120px;
    padding: 10px;
    border: 2px solid #000;
    border-radius: 8px;
    background: var(--admin-inactive-background);
    cursor: pointer;
}

.format-btn--green {
    background: #2e7d32;
    color: #fff;
}

.format-btn--red {
    background: #c62828;
    color: #fff;
}

.format-badge {
    font-size: 0.85em;
    margin-left: 4px;
}

/* BooksList.razor */
.books-list-view {
    --books-list-row-height: var(--blue-button-reference-height);
}

    .books-list-view .gray-button.books-list-row-height {
        height: var(--books-list-row-height);
        min-height: var(--books-list-row-height);
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .books-list-view .book-list-row {
        min-height: var(--books-list-row-height);
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    .books-list-view .cursor-window__item + .cursor-window__item {
        margin-top: var(--double-item-gap);
    }

    .books-list-view .books-list-add-button {
        height: var(--books-list-row-height);
        min-height: var(--books-list-row-height);
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* BookLimitationsEditor.razor */
.book-limitations-menu {
    align-items: stretch;
}

.book-limitations-options {
    display: flex;
    flex-direction: column;
    gap: var(--contoured-item-gap);
    width: 100%;
}

    .book-limitations-options .checkbox-with-button-container {
        display: flex;
        width: 100%;
        min-width: 0;
    }

        .book-limitations-options .checkbox-with-button-container .blue-button {
            flex: 1 1 auto;
            min-width: 0;
            margin: 0;
        }

        .book-limitations-options .checkbox-with-button-badge {
            color: black;
        }

 .footer-btn.footer-btn-yellow {
    background-color: var(--yellow-button-background);
}

    @media (hover: hover) and (pointer: fine) {
        .footer-btn.footer-btn-yellow:hover:not(:disabled):not([disabled]) {
            background-color: #ffb000;
        }
    }

.footer-btn:disabled,
.footer-btn[disabled] {
    background-color: var(--grey-background);
    border-color: #000000;
    color: black;
    opacity: 1;
    border: 2px solid #000000;
    cursor: default;
    pointer-events: none;
    transition: none;
}

/* ChapterListEditor.razor */
.blue-button-with-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: var(--blue-button-reference-height);
    min-height: var(--blue-button-reference-height);
    padding: 8px 12px;
    background: var(--blue-button-bg, #1a3a5c);
    color: #fff;
    border: none;
    border-radius: 8px;
    gap: 8px;
}

.blue-button-with-badge__badge {
    font-size: 0.85em;
    opacity: 0.9;
}

/* UserOverview.razor */
.user-overview-header.header-container {
    width: min(400px, calc(100% - (2 * var(--interface-edge-gap))));
    max-width: 400px;
}

.user-overview-header > .gray-button-for-reader {
    width: 100%;
    background-color: var(--admin-inactive-background);
}

.middle-container.user-overview-body {
    overflow: hidden;
}

.middle-container.user-overview-body > .user-overview-menu {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    flex: 1 1 auto;
    min-height: 0;
}

.user-overview-statistics-scroll {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: var(--contoured-item-gap);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

.user-overview-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 340px;
    gap: 12px;
}

.user-overview-bans {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.user-overview-profile {
    --user-cabinet-avatar-size: min(200px, 60vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 5px;
}

.user-overview-profile > .user-cabinet-registration-date {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--admin-inactive-background);
}

.admin-page-layout .user-overview-menu .statistics-line .left-oval,
.admin-page-layout .user-overview-menu .statistics-line .left-icon {
    background-color: var(--admin-inactive-background);
}

.user-overview-avatar {
    --user-overview-avatar-size: var(--user-cabinet-avatar-size);
    --avatar-toggle-gap: max(0px, min(64px, calc(((var(--main-menu-width) - var(--user-overview-avatar-size)) / 2) - var(--footer-button-size))));
    position: relative;
    display: block;
    width: var(--user-overview-avatar-size);
    height: var(--user-overview-avatar-size);
    margin: 0 auto;
}

.user-overview-avatar .avatar-admin-user {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 50%;
    object-fit: cover;
    padding: 0;
    box-sizing: border-box;
}

.user-cabinet-avatar {
    display: flex;
    justify-content: center;
    width: 100%;
}

.middle-container.user-cabinet-body {
    width: var(--main-menu-width);
    max-width: 400px;
    margin: 0 auto;
    container-type: size;
    overflow-x: hidden;
    overflow-y: auto;
    direction: rtl;
    scrollbar-width: none !important;
    scrollbar-color: transparent transparent !important;
}

.middle-container.user-cabinet-body::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.middle-container.user-cabinet-body > .user-cabinet-menu {
    --user-cabinet-menu-top-padding: 0px;
    --user-cabinet-control-size: min(
        var(--footer-button-mobile-size),
        max(0px, calc((100cqh - (6 * var(--contoured-item-gap)) - var(--user-cabinet-menu-top-padding)) / 6))
    );
    --footer-button-size: var(--user-cabinet-control-size);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding-top: var(--user-cabinet-menu-top-padding);
    gap: var(--contoured-item-gap);
    direction: ltr;
}

.user-cabinet-header {
    gap: var(--contoured-item-gap);
    margin-bottom: var(--contoured-item-gap);
}

/* Keep the lower cabinet actions one double standard gap above the Back footer. */
.footer-container-host.user-cabinet-footer {
    margin-top: var(--double-item-gap);
}

.user-cabinet-header > *,
.user-cabinet-menu > *,
.user-cabinet-profile > * {
    margin-top: 0;
    margin-bottom: 0;
}

.user-cabinet-profile {
    --user-cabinet-avatar-width-limit: max(0px, calc(var(--main-menu-width) - (2 * var(--footer-button-size)) - (2 * var(--item-gap))));
    --user-cabinet-avatar-height-limit: max(
        0px,
        calc(
            100cqh
            - (6 * var(--footer-button-size))
            - (6 * var(--contoured-item-gap))
            - var(--user-cabinet-menu-top-padding)
        )
    );
    --user-cabinet-avatar-size: min(280px, var(--user-cabinet-avatar-width-limit), var(--user-cabinet-avatar-height-limit));
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: var(--contoured-item-gap);
}

.user-cabinet-avatar-row {
    position: relative;
    display: block;
    width: var(--user-cabinet-avatar-size);
    height: var(--user-cabinet-avatar-size);
    margin: 0 auto;
}

.user-overview-avatar > .vertical-toggle-container {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(calc(-100% - var(--avatar-toggle-gap)), 0);
    z-index: 3;
}

.user-cabinet-avatar-row > .vertical-toggle-container {
    position: absolute;
    top: 0;
    left: calc((var(--user-cabinet-avatar-size) - var(--main-menu-width)) / 2);
    transform: none;
    z-index: 3;
}

.user-cabinet-avatar-shell {
    width: var(--user-cabinet-avatar-size);
    height: var(--user-cabinet-avatar-size);
    border-radius: 50%;
    overflow: hidden;
}

.user-cabinet-avatar-shell .avatar-admin-user {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 50%;
    object-fit: cover;
    padding: 0;
    box-sizing: border-box;
}

.user-cabinet-profile-meter {
    height: var(--footer-button-size);
    min-height: var(--footer-button-size);
    max-height: var(--footer-button-size);
    width: var(--user-cabinet-avatar-size);
    max-width: 100%;
    box-sizing: border-box;
}

.user-cabinet-profile-meter .social-progress {
    width: 100%;
    max-width: none;
    height: var(--footer-button-size);
    min-height: var(--footer-button-size);
    max-height: var(--footer-button-size);
    padding: 0;
}

.bans-counter {
    --bans-counter-icon-size: calc(var(--blue-button-reference-height) * 1.05);
    --bans-counter-icon-scale: 1.22;
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    column-gap: clamp(1px, calc(var(--blue-button-reference-height) * 0.04), 4px);
    box-sizing: border-box;
    overflow: hidden;
}

.bans-counter .bans-counter__icon {
    display: block;
    width: min(100%, var(--bans-counter-icon-size));
    height: min(100%, var(--bans-counter-icon-size));
    max-width: none;
    max-height: none;
    padding: 0;
    margin: 0;
    object-fit: contain;
    transform: scale(var(--bans-counter-icon-scale));
    transform-origin: center;
}

.bans-counter .bans-counter__icon--pending {
    transform: scale(var(--bans-counter-icon-scale)) rotate(180deg);
}

.user-cabinet-bans-counter {
    --bans-counter-icon-size: calc(var(--footer-button-size) * 0.98);
    --bans-counter-icon-scale: 1.28;
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    align-items: center;
    width: 100%;
    height: var(--footer-button-size);
    min-height: var(--footer-button-size);
    max-height: var(--footer-button-size);
    padding: clamp(1px, calc(var(--footer-button-size) * 0.04), 3px) clamp(4px, calc(var(--footer-button-size) * 0.16), 10px);
    column-gap: clamp(0px, calc(var(--footer-button-size) * 0.02), 1px);
    box-sizing: border-box;
    overflow: hidden;
}

.user-cabinet-bans-counter .hourglass-logo {
    display: block;
    width: min(100%, var(--bans-counter-icon-size));
    height: min(100%, var(--bans-counter-icon-size));
    max-width: none;
    max-height: none;
    padding: 0;
    margin: 0 auto;
}

.bans-counter--disabled {
    filter: none;
}

.user-cabinet-registration-date {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: var(--footer-button-size);
    min-height: var(--footer-button-size);
    max-height: var(--footer-button-size);
}

.avatar-toggle-shell {
    position: relative;
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    padding-left: 0;
}

.avatar-toggle-shell .avatar-admin-user {
    width: min(200px, 60vw);
    height: auto;
    margin: 0;
}

.avatar-toggle-shell .vertical-toggle-container {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-100%, 0);
    z-index: 3;
}

.avatar-vertical-toggle {
    --vertical-toggle-width: var(--footer-button-size);
    --vertical-toggle-height: calc(2 * var(--footer-button-size));
}

.user-overview-avatar-shell .vertical-toggle-container {
    transform: translate(calc(-100% + 10px), 0);
}

.user-overview-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.user-overview-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.info-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    gap: 4px;
    text-transform: uppercase;
}

.info-pill--stat {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 6px 18px;
}

    .info-pill--stat .info-pill__value {
        font-size: 18px;
        font-weight: 600;
    }

.info-pill__label {
    font-size: 12px;
    font-weight: 600;
}

.info-pill__value {
    font-size: 16px;
}

.info-pill__icon {
    width: 28px;
    height: 28px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.user-overview-awards {
    width: 100%;
    margin-inline: 0;
}

.user-overview-awards .trophy-stack-grid__items > .cursor-window__item {
    width: auto;
}

.admin-page-layout .user-overview-awards .trophy-stack-grid__items > .cursor-window__item + .cursor-window__item {
    margin-top: 0;
}



.admin-position-relative {
    position: relative;
}

.admin-justify-center {
    justify-content: center;
}

.admin-flex-column-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.admin-flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.admin-vertical-margin {
    margin: var(--item-gap) 0;
}

.admin-justify-space-between {
    justify-content: space-between;
}

.admin-flex-direction-column {
    flex-direction: column;
}

.admin-flex-column-center-items {
    flex-direction: column;
    align-items: center;
}

.admin-icon-size {
    width: 30px;
    height: 30px;
}

.admin-width-full {
    width: 100%;
}

#page-container main article.content:has(> .admin-page-layout > .admin-cabinet-body) {
    padding-top: var(--item-gap) !important;
}

.admin-cabinet-menu .mood-statistics-progress,
.mood-statistics-progress--cabinet-size {
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--footer-button-size);
    min-height: var(--footer-button-size);
    max-height: var(--footer-button-size);
    box-sizing: border-box;
}

.admin-cabinet-menu .smile-progress,
.mood-statistics-progress--cabinet-size .smile-progress {
    height: var(--footer-button-size);
    min-height: var(--footer-button-size);
    max-height: var(--footer-button-size);
    box-sizing: border-box;
}

.admin-cabinet-menu .smile,
.mood-statistics-progress--cabinet-size .smile {
    width: min(calc(var(--footer-button-size) * 0.8), calc((100% - 12px) / 10));
    height: auto;
    flex: 0 0 auto;
    transform: scale(1.1);
}

.middle-container.admin-cabinet-body > .admin-cabinet-menu {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    min-height: 100%;
    margin: 0;
}

.admin-cabinet-site-pill {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--footer-button-size);
    min-height: var(--footer-button-size);
    max-height: var(--footer-button-size);
    box-sizing: border-box;
    cursor: default;
    white-space: nowrap;
}

.admin-cabinet-site-pill--launch-date {
    align-self: center;
    width: min(200px, 60vw);
}

.stackpanel.admin-cabinet-actions {
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    margin-top: auto;
    gap: var(--contoured-item-gap);
    box-sizing: border-box;
}

.stackpanel-horizontal.admin-cabinet-action-row {
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: max(0px, calc((100% - (6 * var(--footer-button-size))) / 2));
}

.admin-cabinet-action-row .cabinet-button {
    flex: 0 0 calc(2 * var(--footer-button-size));
    width: calc(2 * var(--footer-button-size));
    min-width: calc(2 * var(--footer-button-size));
    max-width: calc(2 * var(--footer-button-size));
    height: var(--footer-button-size);
    min-height: var(--footer-button-size);
    max-height: var(--footer-button-size);
    margin: 0;
    padding: 0;
}

.admin-cabinet-top100 {
    background-image: url('/icons/top_100.svg');
}

.admin-cabinet-feedback {
    background-image: url('/icons/diagram_umbrella.svg');
    margin-right: 3px;
    margin-left: 3px;
}

.admin-cabinet-followers {
    background-image: url('/icons/diagram_smiley.svg');
}

.admin-cabinet-bookmarks {
    background-image: url('/icons/flag_finger.svg');
}

.admin-cabinet-blacklist {
    background-image: url('/icons/lock_finger.svg');
    margin-right: 3px;
    margin-left: 3px;
}

.admin-cabinet-subscribers {
    background-image: url('/icons/ear_finger.svg');
}

.admin-cabinet-showcase {
    background-image: url('/icons/sigma_shelf.svg');
}

.admin-cabinet-user-list {
    background-image: url('/icons/umbrella_bust.svg');
    margin-right: 3px;
    margin-left: 3px;
}

.admin-cabinet-chat {
    background-image: url('/icons/message_finger.svg');
}

/* Controls inline style migration */
.icon-size-30 {
    width: var(--footer-button-icon-size);
    height: var(--footer-button-icon-size);
    padding: 0;
    box-sizing: border-box;
    object-fit: contain;
}
.spacer-width-8 {
    flex: 0 0 var(--double-item-gap);
    width: var(--double-item-gap);
    min-width: var(--double-item-gap);
}
.photo-container-column-center { flex-direction: column; align-items: center; gap: var(--item-gap); }
.photo-container-column-center-relative { flex-direction: column; align-items: center; gap: var(--item-gap); position: relative; }
.hourglass-logo-inline { display: inline; }
.chapter-icon-film { background-image: url('/icons/film.svg'); }
.chapter-icon-headphones { background-image: url('/icons/headphones.svg'); }
.chapter-icon-picture { background-image: url('/icons/picture.svg'); }
.chapter-icon-book { background-image: url('/icons/book.svg'); }
.message-highlight__icon-umbrella { background-image: url('/icons/umbrella.svg'); }
.pin-remove-button-icon { background-image: url('/icons/pin.svg'); }
.chat-jump__prefix-icon { background-image: url('/icons/hashtag.svg'); }
.chat-jump__suffix-icon { background-image: url('/icons/n.svg'); }
.book-icon-film { background-image: url('/icons/film.svg'); }
.book-icon-headphones { background-image: url('/icons/headphones.svg'); }
.book-icon-picture { background-image: url('/icons/picture.svg'); }
.book-icon-book { background-image: url('/icons/book.svg'); }

.book-icon-film,
.book-icon-headphones,
.book-icon-picture,
.book-icon-book {
    background-size: var(--footer-button-icon-size) var(--footer-button-icon-size);
}

.book-icon-v { background-image: url('/icons/v.svg'); }
.chapter-title__icon--other-voice { opacity: 0.5; }
.book-icon-arrow-up { background-image: url('/icons/top_time.svg'); }
.book-icon-top100 { background-image: url('/icons/top100.svg'); }

.message-row-relative { position: relative; }
.marquee-text-nowrap { white-space: nowrap; }
.ban-title-icon-left-offset { margin-left: -5px; }
.ban-title-icon-right-offset { margin-right: -5px; }
.ban-title-icon-right-offset { object-fit: contain; }
.user-line-avatar {
    width: var(--blue-button-reference-height);
    height: var(--blue-button-reference-height);
    min-width: var(--blue-button-reference-height);
    min-height: var(--blue-button-reference-height);
    flex: 0 0 var(--blue-button-reference-height);
    box-sizing: border-box;
    object-fit: cover;
}

.user-line__label {
    position: relative;
    justify-content: center;
    border-radius: calc(var(--blue-button-reference-height) / 2);
    overflow: hidden;
}

.user-line__label .user-line-avatar {
    position: absolute;
    top: 50%;
    left: -2px;
    z-index: 2;
    transform: translateY(-50%);
    margin-left: 0;
}

.user-line__label:not(.user-line__label--marquee) .book-title__text {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 calc(var(--blue-button-reference-height) + 8px);
    background-color: inherit;
    border-radius: calc(var(--blue-button-reference-height) / 2);
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Keep the Top100 marquee viewport stable while its state changes. The track
   reserves the mirrored avatar width only while static, so short names remain
   centered in the complete button without restarting long-name animation. */
.book-title-button.user-line__label--marquee.book-title-button--has-left-icon:not(.book-title-button--has-right-icon):has(> .book-title__text > .marquee-viewport) .book-title__text {
    --book-title-text-right-gutter: 0px;
}

.user-line__label--marquee .marquee-viewport {
    --marquee-overflow-reserve: var(--book-title-icon-gutter);
}

.user-line__label--marquee .marquee-viewport:not(.marquee-viewport--animated) > .marquee-track {
    width: max(0px, calc(100% - var(--marquee-overflow-reserve)));
}

.age-limit-button-red {
    --age-rating-button-color: #ed1c24;
    background-color: #ed1c24;
}

.age-limit-button-yellow {
    --age-rating-button-color: #ffc90e;
    background-color: #ffc90e;
}

.age-limit-button-orange {
    --age-rating-button-color: #ff7f27;
    background-color: #ff7f27;
}

.age-limit-button-green {
    --age-rating-button-color: #22b14c;
    background-color: #22b14c;
}

.age-limit-button-blue {
    --age-rating-button-color: #00a2e8;
    background-color: #00a2e8;
}

.age-option-button-active {
    background-color: var(--grey-background);
}

.age-option-button-default {
    background-color: #00a2e8;
}
.toggle-circle-left { left: calc(0% + var(--toggle-circle-size) / 2.1); }
.toggle-circle-center { left: 50%; }
.toggle-circle-right { left: calc(100% - var(--toggle-circle-size) / 2.1); }
.left-oval-gray { background-color: var(--grey-background); }
.left-oval-silver { background-color: var(--grey-background); }
.left-oval-steel { background-color: #7092be; }
.left-oval-pink { background-color: #f7b3b6; }
.left-oval-yellow { background-color: #fffbaa; }
.left-oval-green { background-color: #b7f2c7; }
.left-oval-blue { background-color: #aae8ff; }
.left-oval-white { background-color: #ffffff; }

/* Audio/Chapter row controls */
.audio-line,
.chapter-raw {
    width: 100%;
    align-items: center;
    margin: 2px 0;
}

.line-item__main,
.chapter-raw__main {
    --line-item-circle-clearance: calc(var(--blue-button-reference-height) + var(--standard-contour-width));
    --line-item-eye-clearance: calc(var(--blue-button-reference-height) - var(--standard-contour-width));
    --line-item-leading-clearance: 0px;
    --line-item-trailing-clearance: 0px;
    position: relative;
    width: 100%;
    padding: 0 var(--line-item-trailing-clearance) 0 var(--line-item-leading-clearance);
    text-transform: uppercase;
    font-weight: normal;
    height: var(--blue-button-reference-height);
    min-height: var(--blue-button-reference-height);
    margin: 0;
    box-sizing: border-box;
}

.line-item__main:has(> .line-item__circle--left),
.chapter-raw__main:has(> .chapter-raw__circle--left) {
    --line-item-leading-clearance: var(--line-item-circle-clearance);
}

.line-item__main:has(> .line-item__circle--right),
.chapter-raw__main:not(.eye-yellow-button--with-eye):has(> .chapter-raw__circle--right) {
    --line-item-trailing-clearance: var(--line-item-circle-clearance);
}

.line-item__text,
.chapter-raw__text {
    width: 100%;
}

.line-item__circle,
.chapter-raw__circle {
    height: var(--blue-button-reference-height);
    min-height: var(--blue-button-reference-height);
    width: var(--blue-button-reference-height);
    min-width: var(--blue-button-reference-height);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 2px solid #111;
    background-color: var(--grey-background);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
}

.chapter-raw__circle {
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--footer-button-icon-size) var(--footer-button-icon-size);
}

.line-item__circle img,
.chapter-raw__circle img {
    width: var(--footer-button-icon-size);
    height: var(--footer-button-icon-size);
    padding: 0;
    box-sizing: border-box;
    object-fit: contain;
}

.line-item__circle--left,
.chapter-raw__circle--left {
    left: -2px;
}

.line-item__circle--right,
.chapter-raw__circle--right {
    right: -2px;
    font-size: var(--footer-button-icon-size);
    line-height: 1;
}

.prize-language-row {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 10px;
}

.prize-language-caption {
    margin-top: 4px;
}

.prize-language-button {
    flex: 1;
    text-align: left;
}

.localized-media-editor-control {
    width: var(--blue-button-reference-height);
    height: var(--blue-button-reference-height);
    flex: 0 0 var(--blue-button-reference-height);
}

.localized-media-editor-control--unavailable {
    display: block;
    position: relative;
    background-color: var(--admin-inactive-background);
    border: 2px solid #000;
    border-radius: 50%;
    object-fit: contain;
    box-sizing: border-box;
}

.localized-media-editor-control--delete {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 2px solid #000;
    border-radius: 50%;
    background-color: #00a2e8;
}

.footer-btn.prize-return-button,
.footer-btn.prize-return-button:disabled,
.footer-btn.prize-return-button[disabled] {
    background-color: #00a2e8;
    border-color: #000;
    color: #000;
    opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
    .footer-btn.prize-return-button:hover {
        background-color: #0088cc;
    }
}
/* ===== Inline Razor styles moved to mainstyle.css ===== */
/* Shared Inline Style Refactor */
.circle-icon-button--primary {
    background-color: #00a2e8;
}

.circle-icon-button--neutral {
    background-color: var(--admin-inactive-background);
}

.circle-icon-button--success {
    background-color: #00aa00;
}

.circle-icon-button--danger {
    background-color: #ff0000;
}

.delete-button-pending {
    background-color: #cc0000;
    border-color: #990000;
}

.delete-button--inactive {
    background-color: var(--admin-inactive-background);
}

.editor-row {
    width: 100%;
    align-items: center;
}

.delete-line-row {
    justify-content: flex-start;
}

.delete-line-row .editor-row-button {
    flex: 1 1 0;
}

.editor-row--spaced {
    margin-bottom: 10px;
}

.editor-row-button {
    position: relative;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-align: left;
}

.delete-line-text-button {
    padding-left: 0;
    padding-right: 0;
    cursor: default;
    pointer-events: none;
}

.author-editor-main-button.gray-button:not(button) {
    cursor: default;
    pointer-events: none;
}

.delete-line-text-button .marquee-text {
    width: 100%;
    text-align: center;
}

.wallpaper-line .circle-icon-button {
    overflow: hidden;
}

.editor-row-button--raised {
    margin-top: 8px;
}

.editor-row-eye {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    height: 100%;
    aspect-ratio: 1 / 1;
    width: auto;
    border: 2px solid #000;
    border-radius: 50%;
    object-fit: contain;
    box-sizing: border-box;
}

.editor-row-eye--muted {
    background-color: var(--admin-inactive-background);
}

.editor-list-add-button {
    width: 100%;
    max-width: 420px;
}

.header-container.reader-action-list-header {
    width: min(400px, 100%);
    padding: 0 4px 2px;
    box-sizing: border-box;
}

.reader-action-list-header .main-container.grey-flag {
    width: 100%;
}

.reader-action-list-header .grey-flag .image-container {
    width: 100%;
    height: 36px;
    padding: 5px 12px;
    border: none;
    border-radius: 14px 14px 10px 10px;
    box-sizing: border-box;
}

.reader-action-list-header .grey-flag .image-preview {
    width: 53px;
    height: 25px;
    max-width: 53px;
    object-fit: contain;
}

.middle-container.reader-action-list-body {
    align-items: center;
}

.reader-action-list-menu {
    width: min(400px, 100%);
    max-width: 400px;
    gap: var(--contoured-item-gap);
    padding: 0 var(--contoured-item-gap);
    box-sizing: border-box;
}

.reader-action-line {
    width: 100%;
    min-height: var(--blue-button-reference-height);
    height: var(--blue-button-reference-height);
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    box-sizing: border-box;
}

.reader-action-line__icon {
    width: var(--blue-button-reference-height);
    height: var(--blue-button-reference-height);
    min-width: var(--blue-button-reference-height);
    margin: 0;
    padding: 0;
    background: #00a2e8;
    border: 2px solid #000000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    appearance: none;
    box-sizing: border-box;
}

.reader-action-line__icon:focus-visible {
    background: #0088cc;
}

@media (hover: hover) and (pointer: fine) {
    .reader-action-line__icon:hover {
        background: #0088cc;
    }
}

.reader-action-line__icon img {
    width: calc(var(--blue-button-reference-height) * 0.65);
    height: calc(var(--blue-button-reference-height) * 0.65);
    object-fit: contain;
}

.reader-action-line--mut .reader-action-line__icon img,
.reader-action-line--subscription .reader-action-line__icon img {
    width: var(--footer-button-icon-size);
    height: var(--footer-button-icon-size);
}

.reader-action-line--subscription .reader-action-line__icon {
    overflow: hidden;
}

.reader-action-line--subscription .reader-action-line__icon img {
    width: calc(var(--blue-button-reference-height) * 0.78);
    height: calc(var(--blue-button-reference-height) * 0.78);
    transform: scale(1.09);
}

.reader-action-line__label {
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--blue-button-reference-height);
    height: var(--blue-button-reference-height);
    background: var(--grey-background);
    border: 2px solid #000000;
    color: #000000;
    padding: 0 2px;
    border-radius: 999px;
    font-size: 18px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.reader-action-line__label .marquee-text,
#page-container.page--with-wallpaper .reader-action-line__label .marquee-text {
    color: #000000;
    text-shadow: none;
}

.header-container.cabinet-list-header {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    /* `hidden` on one axis promotes the other axis to `auto`, which clips the
       plate exactly at the container's lower edge. */
    overflow-x: clip;
    overflow-y: visible;
}

.header-container.cabinet-list-header > .header-center {
    width: var(--main-menu-width);
    max-width: 400px;
    min-width: 0;
}

.header-container.user-book-collection-header {
    margin-bottom: calc(var(--double-item-gap) - var(--cursor-window-sentinel-height));
}

.header-container.chapter-screen-header {
    box-sizing: border-box;
    padding-inline: var(--contoured-item-gap);
}

.header-container.chapter-screen-header > .header-center {
    width: min(100%, var(--main-menu-width));
    min-width: 0;
}

.chapter-screen-title {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding-inline: clamp(8px, calc(var(--footer-button-size) * 0.18), 12px);
    overflow: hidden;
    cursor: default;
    letter-spacing: 0;
}

.chapter-screen-title .marquee-viewport {
    line-height: 1.1;
}

.middle-container.cabinet-list-body {
    align-items: stretch;
    width: var(--main-menu-width);
    max-width: 400px;
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: auto;
}

.middle-container.cabinet-list-body > .menu-wrapper.cabinet-list-menu {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    gap: var(--contoured-item-gap);
    overflow-x: hidden;
}

.middle-container.cabinet-list-body > .menu-wrapper.cabinet-list-menu > * {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.middle-container.cabinet-list-body > .menu-wrapper.cabinet-list-menu > .chat-date-separator,
.middle-container.cabinet-list-body > .menu-wrapper.cabinet-list-menu > .dated-book-list-row,
.middle-container.cabinet-list-body > .menu-wrapper.cabinet-list-menu > .book-title-button-wrapper,
.middle-container.cabinet-list-body > .menu-wrapper.cabinet-list-menu > .reader-action-line,
.middle-container.cabinet-list-body > .menu-wrapper.cabinet-list-menu > .search-container--stacked {
    margin-top: 0;
    margin-bottom: 0;
}

.middle-container.cabinet-list-body > .menu-wrapper.cabinet-list-menu .book-title-button {
    margin-top: 0;
    margin-bottom: 0;
}

.user-book-collection-list {
    display: flex;
    flex-direction: column;
    row-gap: var(--double-item-gap);
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.user-book-collection-list > .chat-date-separator,
.user-book-collection-list > .user-book-collection-row {
    margin-top: 0;
    margin-bottom: 0;
}

.user-book-collection-row {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.chapter-list-book-title {
    min-width: 0;
    overflow: hidden;
    cursor: default;
}

.chapter-list-book-title .marquee-viewport {
    line-height: 1.1;
}

.chapter-list-menu .chapter-title--user {
    --chapter-title-icon-gutter: var(--footer-button-size);
    --chapter-title-icon-offset: var(--standard-contour-width);
    --chapter-title-icon-content-overlap: calc(var(--chapter-title-icon-gutter) - var(--chapter-title-icon-offset));
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: var(--footer-button-size);
    min-height: var(--footer-button-size);
    max-height: var(--footer-button-size);
    margin: 0;
    overflow: hidden;
    border-radius: calc(var(--footer-button-size) / 2);
}

.chapter-list-menu .chapter-title--user .chapter-title__icon {
    width: var(--footer-button-size);
    min-width: var(--footer-button-size);
    height: var(--footer-button-size);
    min-height: var(--footer-button-size);
    flex: 0 0 var(--footer-button-size);
    box-sizing: border-box;
}

.chapter-list-menu .chapter-title--user .chapter-title__icon--left {
    left: -2px;
}

.chapter-list-menu .chapter-title--user .chapter-title__text {
    --chapter-title-text-base-left-padding: 0px;
    --chapter-title-text-base-right-padding: 0px;
    line-height: 1;
}

@media (max-width: 768px) {
    .header-container.chapter-list-header > .header-center,
    .middle-container.chapter-list-body {
        width: calc(100vw - (2 * var(--contoured-item-gap)));
        max-width: none;
    }

    .chapter-list-menu {
        width: 100%;
        max-width: 100%;
    }

    .chapter-list-menu .chapter-title--user .marquee-text {
        font-size: 26px !important;
        line-height: 1;
    }
}

.header-container.user-genres-header {
    margin-bottom: var(--contoured-item-gap);
}

.middle-container.user-genres-body > .menu-wrapper.user-genres-menu {
    --checkbox-with-button-size: var(--footer-button-size);
    --user-genres-checkbox-text-clearance: calc(var(--checkbox-with-button-size) + 14px);
    gap: var(--contoured-item-gap);
}

.middle-container.user-genres-body > .menu-wrapper.user-genres-menu > .checkbox-with-button-container,
.middle-container.user-genres-body > .menu-wrapper.user-genres-menu > .checkbox-with-button-container > .blue-button {
    margin-top: 0;
    margin-bottom: 0;
}

.middle-container.user-genres-body > .menu-wrapper.user-genres-menu .checkbox-with-button-icon {
    background-size: var(--footer-button-icon-size) var(--footer-button-icon-size);
}

.middle-container.user-genres-body > .menu-wrapper.user-genres-menu > .checkbox-with-button-container > .blue-button {
    padding-left: var(--user-genres-checkbox-text-clearance);
    padding-right: var(--user-genres-checkbox-text-clearance);
}

.user-genres-footer .age-panel {
    bottom: calc(100% + var(--contoured-item-gap));
    gap: var(--contoured-item-gap);
}

.reader-action-list-menu.cabinet-list-menu {
    padding-left: 0;
    padding-right: 0;
}

.reader-action-line {
    min-width: 0;
}

.book-title-button-wrapper,
.dated-book-list-row,
.checkbox-with-button-container,
.search-container--stacked {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.dated-book-list-row {
    --dated-book-list-action-size: var(--blue-button-reference-height);
    display: flex;
    align-items: center;
    width: 100%;
}

.dated-book-list-row .book-title-button-wrapper {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.dated-book-list-row__action {
    width: var(--dated-book-list-action-size);
    height: var(--dated-book-list-action-size);
    min-width: var(--dated-book-list-action-size);
    min-height: var(--dated-book-list-action-size);
    flex: 0 0 var(--dated-book-list-action-size);
    border: 2px solid #000;
    border-radius: 50%;
    padding: 0;
    background-color: #00a2e8;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 72%;
    box-sizing: border-box;
    cursor: pointer;
    z-index: 1;
}

.dated-book-list-row__action:disabled {
    cursor: not-allowed;
    opacity: 1;
    background-color: var(--grey-background);
}

.bookmark-remove-button {
    background-image: url('/icons/flag_no.svg');
    background-size: var(--footer-button-icon-size) var(--footer-button-icon-size);
}

.wallpaper-selection.cabinet-list-menu {
    width: calc(100% - (2 * var(--footer-screen-edge-gap)));
    max-width: none;
    margin-inline: var(--footer-screen-edge-gap);
    box-sizing: border-box;
}

.wallpaper-selection__list {
    max-width: 100%;
    overflow-x: hidden;
}

.footer-popup-control {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.footer-popup-control--footer {
    width: 60px;
    z-index: 20;
}

.footer-popup-panel {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transform: translate(-50%, 16px);
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
}

.footer-popup-panel.is-open {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}

.footer-popup-option-button {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.footer-popup-option-button:disabled {
    cursor: default;
}

.footer-popup-option-button img {
    object-fit: contain;
}

.footer-popup-overlay {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 5;
}

.age-limit-button {
    background-color: #00a2e8;
}

.age-panel {
    gap: var(--contoured-item-gap);
}

.age-panel .footer-popup-option-button {
    width: var(--footer-button-size);
    height: var(--footer-button-size);
}

.age-option-button img {
    width: var(--footer-button-icon-size);
    height: var(--footer-button-icon-size);
}

.footer-btn.promo-main-button,
.footer-btn.promo-main-button.active {
    background-color: #00a2e8;
}

@media (hover: hover) and (pointer: fine) {
    .footer-btn.promo-main-button:hover,
    .footer-btn.promo-main-button.active:hover {
        background-color: #0088cc;
    }
}

.promo-duration-control.footer-popup-control--footer,
.promo-panel .footer-popup-option-button {
    width: var(--footer-button-size);
    height: var(--footer-button-size);
}

.promo-option-button {
    background-color: #00a2e8;
}

.promo-option-button img {
    width: 36px;
    height: 36px;
}

@media (hover: hover) and (pointer: fine) {
    .promo-option-button:not(:disabled):hover {
        transform: translateY(-4px);
    }
}

.promo-option-button--selected {
    background-color: var(--grey-background);
    box-shadow: none;
}

.promo-reset-button {
    background-color: #00a2e8;
}

.promo-reset-button img {
    width: 36px;
    height: 36px;
}

@media (hover: hover) and (pointer: fine) {
    .promo-reset-button:not(:disabled):hover {
        transform: translateY(-4px);
    }
}

.eye-blue-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.eye-blue-button__text {
    display: inline-block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    text-align: center;
}

.eye-blue-button--with-eye:not(.line-item__main) .eye-blue-button__text {
    padding-right: var(--eye-button-icon-content-overlap);
}

.eye-blue-button__badge {
    position: absolute;
    right: 52px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7em;
    white-space: nowrap;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eye-blue-button__icon {
    position: absolute;
    top: 50%;
    right: -2px;
    width: var(--footer-button-size);
    min-width: var(--footer-button-size);
    max-width: var(--footer-button-size);
    height: var(--footer-button-size);
    min-height: var(--footer-button-size);
    max-height: var(--footer-button-size);
    transform: translateY(-50%);
    border: 2px solid #000;
    border-radius: 50%;
    background-color: var(--admin-inactive-background);
    object-fit: contain;
    box-sizing: border-box;
}

.crossed-eye-icon {
    border-color: transparent;
    clip-path: circle(50%);
    isolation: isolate;
}

.crossed-eye-icon__image {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: 50%;
    box-sizing: border-box;
    object-fit: contain;
}

.crossed-eye-icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -20%;
    z-index: 1;
    width: 140%;
    height: 3px;
    background: #000;
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
}

.crossed-eye-icon::after {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: 2;
    border: 2px solid #000;
    border-radius: 50%;
    box-sizing: border-box;
    pointer-events: none;
}

.eye-blue-button__icon-text {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    background-color: #1f8f2e;
    color: #000;
}

.eye-blue-button__number-icon {
    background-color: #1f8f2e;
}

.avatar-sex-columns {
    display: flex;
    justify-content: center;
    gap: 24px;
    width: 100%;
    align-items: flex-start;
}

.avatar-sex-columns--with-margin {
    margin-bottom: 10px;
}

.avatar-sex-icon {
    width: 24px;
    height: 24px;
}

.avatar-sex-button {
    width: 42px;
    height: 42px;
    border-radius: 9999px;
    background: var(--admin-inactive-background);
    border: 2px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 8px;
}

.avatar-sex-button--complete {
    background: #32a852;
}

.avatar-sex-columns .admin-flex-column-center {
    gap: 10px;
}

.info-pill-group {
    display: inline-flex;
    margin-top: 6px;
}

.info-pill {
    background: var(--grey-background);
    border: 2px solid #000;
    min-width: 110px;
    padding: 4px 6px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
}

.info-pill--start {
    border-radius: 22px 0 0 22px;
    border-right: 0;
}

.info-pill--end {
    position: relative;
    border-radius: 0 22px 22px 0;
    border-left: 0;
}

/* Draw one shared contour centered on the join, not two touching borders. */
.info-pill--end::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--standard-contour-width) / -2);
    width: var(--standard-contour-width);
    background: #000;
    pointer-events: none;
}

.info-pill > span {
    margin: 0;
}

.visibility-toggle-button {
    --visibility-toggle-size: var(--visibility-toggle-height, var(--visibility-toggle-width, var(--footer-button-size)));
    width: var(--visibility-toggle-size);
    height: var(--visibility-toggle-size);
    min-width: var(--visibility-toggle-size);
    min-height: var(--visibility-toggle-size);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 2px solid #000;
    background-image: url('/icons/on.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 65%;
    cursor: pointer;
    padding: 0;
    box-sizing: border-box;
    flex: 0 0 var(--visibility-toggle-size);
    flex-shrink: 0;
}

.visibility-toggle-button:disabled {
    cursor: not-allowed;
    opacity: 1;
}

.visibility-toggle-button--gray {
    background-color: var(--admin-inactive-background);
}

.visibility-toggle-button--visible {
    background-color: green;
}

.visibility-toggle-button--hidden {
    background-color: red;
}

.visibility-order-button {
    width: var(--visibility-order-width, 44px);
    height: var(--visibility-order-height, 44px);
    min-width: var(--visibility-order-width, 44px);
    min-height: var(--visibility-order-height, 44px);
    flex: 0 0 var(--visibility-order-width, 44px);
    border-radius: 50%;
    border: 2px solid #000;
    background-color: #00a2e8;
    background-image: url('/icons/slider.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 65%;
    cursor: grab;
    padding: 0;
}

.visibility-sortable-line {
    --visibility-toggle-width: var(--blue-button-reference-height);
    --visibility-toggle-height: var(--blue-button-reference-height);
    --visibility-order-width: var(--blue-button-reference-height);
    --visibility-order-height: var(--blue-button-reference-height);
    display: flex;
    align-items: center;
    gap: 1px;
}

.visibility-sortable-line .yellow-button {
    flex: 1 1 auto;
    min-width: 0;
}

.book-list-row-control {
    --book-list-row-size: var(--books-list-row-height, var(--footer-button-size));
    --visibility-toggle-width: var(--book-list-row-size);
    --visibility-toggle-height: var(--book-list-row-size);
    align-items: center;
    flex: 1;
    min-width: 0;
}

.book-list-row-control__title {
    flex: 1;
    min-width: 0;
    height: var(--book-list-row-size);
    min-height: var(--book-list-row-size);
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    overflow: hidden;
}

.book-list-row-control__title .book-title__text {
    --book-list-row-title-base-inline-padding: 0px;
    --book-list-row-title-icon-gutter: calc(var(--book-list-row-size) - var(--standard-contour-width));
    --book-list-row-title-static-left-gutter: 0px;
    --book-list-row-title-static-right-gutter: 0px;
    padding-left: calc(var(--book-list-row-title-base-inline-padding) + var(--book-list-row-title-static-left-gutter));
    padding-right: calc(var(--book-list-row-title-base-inline-padding) + var(--book-list-row-title-static-right-gutter));
}

.book-list-row-control__title:has(> .book-title__icon--left):not(:has(> .book-title__icon--right)):has(> .book-title__text > .marquee-viewport:not(.marquee-viewport--animated)) .book-title__text {
    --book-list-row-title-static-right-gutter: var(--book-list-row-title-icon-gutter);
}

.book-list-row-control__title:has(> .book-title__icon--right):not(:has(> .book-title__icon--left)):has(> .book-title__text > .marquee-viewport:not(.marquee-viewport--animated)) .book-title__text {
    --book-list-row-title-static-left-gutter: var(--book-list-row-title-icon-gutter);
}

.book-list-row-control__slider {
    width: var(--book-list-row-size);
    height: var(--book-list-row-size);
    min-width: var(--book-list-row-size);
    min-height: var(--book-list-row-size);
    border-radius: 50%;
    padding: 0;
    background-image: url('/icons/slider.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 65%;
    flex-shrink: 0;
}

.book-list-row-control .book-title__icon {
    width: var(--book-list-row-size);
    height: var(--book-list-row-size);
    min-width: var(--book-list-row-size);
    min-height: var(--book-list-row-size);
}

.rating-split-progress {
    --rating-split-progress-height: var(--footer-button-size);
    display: flex;
    width: 100%;
    border-radius: calc(var(--rating-split-progress-height) / 2);
    height: var(--rating-split-progress-height);
    min-height: var(--rating-split-progress-height);
    max-height: var(--rating-split-progress-height);
    background-color: var(--grey-background);
    overflow: hidden;
    position: relative;
    border: 2px solid #000;
}

.rating-split-progress__lane {
    display: flex;
    flex: 0 0 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
}

.rating-split-progress__segment {
    height: 100%;
    font-weight: bold;
    color: black;
    line-height: 20px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    flex: 0 0 auto;
    min-width: 0;
}

.rating-split-progress__segment--red {
    background-color: red;
    justify-content: flex-end;
}

.rating-split-progress__segment--green {
    background-color: green;
    justify-content: flex-start;
}

.rating-split-progress__segment--empty {
    background-color: var(--grey-background);
}

.rating-split-progress__segment--relative {
    position: relative;
}

.rating-split-progress__divider {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: black;
    transform: translateX(-50%);
}

.rating-split-progress__lane--right {
    position: relative;
    text-align: right;
}

.rating-split-progress__lane--left {
    position: relative;
    text-align: left;
}

.rating-split-progress__text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: black;
    font-weight: bold;
}

.rating-split-progress__text--right {
    right: 10px;
}

.rating-split-progress__text--left {
    left: 10px;
}

.simple-dual-progress {
    display: flex;
    width: 100%;
    height: 50px;
    background-color: var(--grey-background);
    border-radius: 9999px;
    overflow: hidden;
    position: relative;
    border: 2px solid #000;
    box-sizing: border-box;
}

.simple-dual-progress--disabled {
    background-color: var(--grey-background);
    border-color: #000;
    cursor: not-allowed;
    opacity: 1;
}

.simple-dual-progress__segment {
    height: 100%;
    text-align: center;
    font-weight: bold;
    color: black;
    line-height: 20px;
}

.simple-dual-progress__segment--red {
    background-color: red;
}

.simple-dual-progress__segment--green {
    background-color: green;
}

.social-progress {
    --social-progress-track-size: var(--footer-button-size);
    --social-progress-radius: calc(var(--social-progress-track-size) / 2);
    width: 100%;
    max-width: 500px;
    height: var(--footer-button-size);
    min-height: var(--footer-button-size);
    max-height: var(--footer-button-size);
    padding: 0 5px;
    box-sizing: border-box;
}

.social-progress__track {
    position: relative;
    height: var(--social-progress-track-size);
}

.social-progress__bar {
    --social-progress-current-color: #ccc;
    --social-progress-next-color: #ccc;
    appearance: none;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--social-progress-radius);
    border: 2px solid #333;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    background-color: var(--social-progress-current-color);
}

.social-progress__bar::-webkit-progress-bar {
    background-color: var(--social-progress-current-color);
    border-radius: var(--social-progress-radius);
}

.social-progress__bar::-webkit-progress-value {
    background-color: var(--social-progress-next-color);
    border-radius: var(--social-progress-radius);
    transition: width 0.3s ease;
}

.social-progress__bar::-moz-progress-bar {
    background-color: var(--social-progress-next-color);
    border-radius: var(--social-progress-radius);
}

.social-progress__bar--current-author {
    --social-progress-current-color: #d4d4d4;
}

.social-progress__bar--next-author {
    --social-progress-next-color: #d4d4d4;
}

.social-progress__bar--current-stranger {
    --social-progress-current-color: #7092be;
}

.social-progress__bar--current-pioneer {
    --social-progress-current-color: #f7b3b6;
}

.social-progress__bar--current-inhabitant {
    --social-progress-current-color: #fffbaa;
}

.social-progress__bar--current-veteran {
    --social-progress-current-color: #b7f2c7;
}

.social-progress__bar--current-hero {
    --social-progress-current-color: #aae8ff;
}

.social-progress__bar--current-god {
    --social-progress-current-color: #ffffff;
}

.social-progress__bar--next-stranger {
    --social-progress-next-color: #7092be;
}

.social-progress__bar--next-pioneer {
    --social-progress-next-color: #f7b3b6;
}

.social-progress__bar--next-inhabitant {
    --social-progress-next-color: #fffbaa;
}

.social-progress__bar--next-veteran {
    --social-progress-next-color: #b7f2c7;
}

.social-progress__bar--next-hero {
    --social-progress-next-color: #aae8ff;
}

.social-progress__bar--next-god {
    --social-progress-next-color: #ffffff;
}

.social-progress__rating {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    pointer-events: none;
}

.social-progress__icon {
    position: absolute;
    width: var(--social-progress-track-size);
    height: var(--social-progress-track-size);
    border-radius: 50%;
    border: 2px solid #333;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 3;
    box-sizing: border-box;
}

.social-progress__icon--left {
    left: -2px;
}

.social-progress__icon--right {
    right: -1px;
}

/* Components/Controls/FileUpload.razor */
.photo-placeholder.disabled {
        background-color: var(--grey-background);
    }
    .photo-placeholder.disabled label {
        pointer-events: none;
    }
    .photo-placeholder.has-file {
        border: 2px solid #000000;
    }

    .photo-placeholder.is-dragging {
        transform: scale(1.05);
    }

    .photo-placeholder .image-display {
        width: auto;
        height: auto;
        max-width: calc(100% - (var(--file-upload-preview-inset) * 2));
        max-height: calc(100% - (var(--file-upload-preview-inset) * 2));
        object-fit: contain;
        border-radius: var(--file-upload-corner-radius);
        padding: 0;
    }

    .photo-placeholder .photo-upload > span {
        width: 100%;
        height: 100%;
        margin-top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .photo-placeholder .audio-preview {
        display: none;
    }

    .photo-placeholder .audio-preview-controls {
        display: flex;
        align-items: center;
        width: 100%;
        height: 32px;
        min-height: 32px;
        max-height: 32px;
        position: absolute;
        left: 0;
        bottom: 0;
        border-radius: var(--file-upload-corner-radius);
        background-color: var(--grey-background);
        overflow: hidden;
        z-index: 1;
    }

    .photo-placeholder .audio-preview-toggle {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .photo-placeholder .audio-preview-toggle img {
        width: 20px;
        height: 20px;
    }

    .photo-placeholder .audio-preview-seek {
        flex: 1;
        min-width: 0;
        width: 0;
        height: 24px;
        margin: 0 10px 0 0;
        padding: 0;
        accent-color: black;
        cursor: pointer;
    }

    .photo-placeholder .audio-preview-seek:focus-visible {
        outline: 2px solid black;
        outline-offset: 2px;
        border-radius: 4px;
    }

    .photo-placeholder .audio-preview-seek::-webkit-slider-thumb {
        opacity: 1 !important;
    }

    .photo-placeholder .audio-preview-seek::-moz-range-thumb {
        opacity: 1 !important;
    }

    .photo-placeholder .audio-upload-preview {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        position: relative;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: calc(var(--double-item-gap) / 2) 0;
    }

    .photo-placeholder .audio-upload-preview .placeholder-icon {
        width: calc(var(--footer-button-size) * 3);
        height: calc(var(--footer-button-size) * 3);
        max-width: calc(var(--footer-button-size) * 3);
        max-height: calc(var(--footer-button-size) * 3);
        transform: translateY(var(--item-gap));
    }

    .photo-placeholder .pdf-preview {
        width: calc(100% - (var(--file-upload-preview-inset) * 2));
        height: calc(100% - (var(--file-upload-preview-inset) * 2));
        border: 0;
        border-radius: var(--file-upload-corner-radius);
        overflow: hidden;
    }

    .photo-placeholder .pdf-preview-fallback {
        padding: 8px;
        text-align: center;
        font-size: 0.9rem;
    }

    .photo-placeholder .pdf-preview-fallback a {
        color: #f39c12;
        text-decoration: underline;
    }

/* Components/Controls/BannerControl.razor */
.banners-editor-page .banner-position-label {
    --app-large-control-text-size: var(--app-large-compact-control-text-size);
}

.banner-cooldown-row {
        justify-content: space-evenly;
        flex-wrap: nowrap;
        width: 100%;
    }

    .gift-cooldown-row {
        justify-content: center;
        flex-wrap: nowrap;
        width: 100%;
    }

    .banner-dates-row {
        display: flex;
        width: 100%;
    }

    .banner-cooldown-button {
        width: var(--footer-button-size);
        min-width: var(--footer-button-size);
        max-width: var(--footer-button-size);
        height: var(--footer-button-size);
        min-height: var(--footer-button-size);
        max-height: var(--footer-button-size);
        flex: 0 0 var(--footer-button-size);
        padding: 0;
        margin: 0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        line-height: 1;
        
    }

    .banner-cooldown-button__icon {
        width: var(--footer-button-icon-size);
        height: var(--footer-button-icon-size);
        object-fit: contain;
    }

    .gray-button-right-square{
        margin: 5px 0;
        background-color: var(--admin-inactive-background);
        border: 2px solid black;
        color: black;
        font-size: 18px;
        font-weight: bold;
        padding: 10px;
        border-radius: 25px 0 0 25px;
        text-align: center;
        flex: 1;
        margin-right: 0;
    }

    .gray-button-left-square {
        margin: 5px 0;
        background-color: var(--admin-inactive-background);
        border: 2px solid black;
        border-left: 0;
        color: black;
        font-size: 18px;
        font-weight: bold;
        padding: 10px;
        border-radius: 0 25px 25px 0;
        text-align: center;
        flex: 1;
        margin-left: 0;
    }

/* Components/Controls/MessageHeaderButtons.razor */
.avatar-menu,
.message-header-buttons {
        --chat-menu-train-distance: calc(var(--footer-button-size) + var(--chat-vertical-item-gap, calc(var(--item-gap) * 2)));
        --chat-menu-train-slide: calc(-1 * var(--chat-menu-train-distance));
    }

.avatar-menu.sent-position,
.message-header-buttons--from-right {
        --chat-menu-train-slide: var(--chat-menu-train-distance);
    }

.message-header-buttons {
        display: inline-flex;
        align-items: center;
        gap: var(--chat-vertical-item-gap, calc(var(--item-gap) * 2));
        margin: 0 6px;
        flex-shrink: 0;
        overflow: hidden;
        white-space: nowrap;
        will-change: clip-path, opacity;
        animation: chat-menu-unroll-from-left 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }

    .message-header-buttons--from-left {
        transform-origin: left center;
        animation-name: chat-menu-unroll-from-left;
    }

    .message-header-buttons--from-right {
        transform-origin: right center;
        animation-name: chat-menu-unroll-from-right;
    }

.avatar-menu > *,
.message-header-buttons > * {
        animation: chat-menu-car-emerge 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }

.avatar-menu > .keyboard-focus-trigger-wrapper {
        display: inline-flex;
    }

.avatar-menu > :nth-child(1),
.message-header-buttons > :nth-child(1) {
        animation-delay: 0.04s;
    }

.avatar-menu > :nth-child(2),
.message-header-buttons > :nth-child(2) {
        animation-delay: 0.09s;
    }

.avatar-menu > :nth-child(3),
.message-header-buttons > :nth-child(3) {
        animation-delay: 0.14s;
    }

.avatar-menu > :nth-child(4),
.message-header-buttons > :nth-child(4) {
        animation-delay: 0.19s;
    }

.avatar-menu > :nth-child(5),
.message-header-buttons > :nth-child(5) {
        animation-delay: 0.24s;
    }

.avatar-menu > :nth-child(6),
.message-header-buttons > :nth-child(6) {
        animation-delay: 0.29s;
    }

.avatar-menu > :nth-child(7),
.message-header-buttons > :nth-child(7) {
        animation-delay: 0.34s;
    }

.avatar-menu > :nth-child(8),
.message-header-buttons > :nth-child(8) {
        animation-delay: 0.39s;
    }

.avatar-menu > :nth-child(9),
.message-header-buttons > :nth-child(9) {
        animation-delay: 0.44s;
    }

.avatar-menu > :nth-child(10),
.message-header-buttons > :nth-child(10) {
        animation-delay: 0.49s;
    }

.avatar-menu > :nth-child(11),
.message-header-buttons > :nth-child(11) {
        animation-delay: 0.54s;
    }

.avatar-menu > :nth-child(12),
.message-header-buttons > :nth-child(12) {
        animation-delay: 0.59s;
    }

.avatar-menu.sent-position > :nth-last-child(1),
.message-header-buttons--from-right > :nth-last-child(1) {
        animation-delay: 0.04s;
    }

.avatar-menu.sent-position > :nth-last-child(2),
.message-header-buttons--from-right > :nth-last-child(2) {
        animation-delay: 0.09s;
    }

.avatar-menu.sent-position > :nth-last-child(3),
.message-header-buttons--from-right > :nth-last-child(3) {
        animation-delay: 0.14s;
    }

.avatar-menu.sent-position > :nth-last-child(4),
.message-header-buttons--from-right > :nth-last-child(4) {
        animation-delay: 0.19s;
    }

.avatar-menu.sent-position > :nth-last-child(5),
.message-header-buttons--from-right > :nth-last-child(5) {
        animation-delay: 0.24s;
    }

.avatar-menu.sent-position > :nth-last-child(6),
.message-header-buttons--from-right > :nth-last-child(6) {
        animation-delay: 0.29s;
    }

.avatar-menu.sent-position > :nth-last-child(7),
.message-header-buttons--from-right > :nth-last-child(7) {
        animation-delay: 0.34s;
    }

.avatar-menu.sent-position > :nth-last-child(8),
.message-header-buttons--from-right > :nth-last-child(8) {
        animation-delay: 0.39s;
    }

.avatar-menu.sent-position > :nth-last-child(9),
.message-header-buttons--from-right > :nth-last-child(9) {
        animation-delay: 0.44s;
    }

.avatar-menu.sent-position > :nth-last-child(10),
.message-header-buttons--from-right > :nth-last-child(10) {
        animation-delay: 0.49s;
    }

.avatar-menu.sent-position > :nth-last-child(11),
.message-header-buttons--from-right > :nth-last-child(11) {
        animation-delay: 0.54s;
    }

.avatar-menu.sent-position > :nth-last-child(12),
.message-header-buttons--from-right > :nth-last-child(12) {
        animation-delay: 0.59s;
    }

@keyframes chat-menu-unroll-from-left {
    from {
        clip-path: inset(-2px calc(100% + 2px) -2px -2px round 20px);
        opacity: 0;
    }

    to {
        clip-path: inset(-2px -2px -2px -2px round 20px);
        opacity: 1;
    }
}

@keyframes chat-menu-unroll-from-right {
    from {
        clip-path: inset(-2px -2px -2px calc(100% + 2px) round 20px);
        opacity: 0;
    }

    to {
        clip-path: inset(-2px -2px -2px -2px round 20px);
        opacity: 1;
    }
}

@keyframes chat-menu-car-emerge {
    from {
        opacity: 0;
        transform: translateX(var(--chat-menu-train-slide)) scale(0.94);
    }

    72% {
        opacity: 1;
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .avatar-menu,
    .message-header-buttons {
        animation: none;
        clip-path: inset(0);
        opacity: 1;
    }

    .avatar-menu > *,
    .message-header-buttons > * {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

    .message-attachment-button {
        display: inline-flex;
    }

    .message-attachment-button .photo-placeholder {
        width: var(--footer-button-size);
        min-width: var(--footer-button-size);
        max-width: var(--footer-button-size);
        height: var(--footer-button-size);
        min-height: var(--footer-button-size);
        max-height: var(--footer-button-size);
        background-color: #00a2e8;
        border: 2px solid #000000;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color 0.3s ease;
        overflow: hidden;
    }

    .message-attachment-button .photo-placeholder .photo-upload {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .message-attachment-button .photo-placeholder img,
    .message-attachment-button .photo-placeholder .image-display img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .message-attachment-button .photo-placeholder .placeholder-icon {
        width: var(--footer-button-icon-size);
        height: var(--footer-button-icon-size);
        max-width: var(--footer-button-icon-size);
        max-height: var(--footer-button-icon-size);
        padding: var(--footer-button-icon-padding);
    }

    .message-attachment-button .photo-placeholder.disabled {
        background-color: var(--grey-background);
        border-color: #808080;
        cursor: not-allowed;
    }

    .message-attachment-button .photo-placeholder.disabled label {
        pointer-events: none;
    }

/* Components/Controls/FooterButton/FooterContainer.razor */
.footer-container-host {
    width: var(--main-menu-width);
    max-width: 400px;
    margin-inline: auto;
    margin-top: var(--footer-content-gap);
    box-sizing: border-box;
}

/* Keep the page content one double standard gap above fixed lower actions. */
.page-layout > .footer-container-host {
    margin-top: var(--double-item-gap);
}

.footer-buttons {
    min-height: var(--footer-buttons-height, 80px);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    margin: 0;
    padding: var(--contoured-item-gap) 0;
    background: transparent;
    column-gap: 0;
    z-index: 9999;
    box-sizing: border-box;
}

.footer-buttons.fixed {
    position: fixed;
    bottom: 0;
    left: 50%;
    right: auto;
    width: var(--main-menu-width);
    max-width: 400px;
    height: var(--fixed-footer-buttons-height);
    min-height: var(--fixed-footer-buttons-height);
    margin: 0;
    padding: 0 0 var(--item-gap);
    transform: translateX(-50%);
}

@media (max-width: 768px) {
    html.mobile-input-keyboard-visible .footer-container-host:not(.footer-container-host--fixed) {
        position: fixed;
        left: 50%;
        right: auto;
        bottom: 0;
        margin: 0;
        translate: -50% var(--mobile-input-footer-offset, 0px);
        z-index: 9999;
    }

    html.mobile-input-keyboard-visible .footer-container-host--fixed {
        height: 0;
        min-height: 0;
        margin-top: 0;
    }

    html.mobile-input-keyboard-visible .footer-container-host--fixed > .footer-buttons-placeholder {
        height: 0;
        min-height: 0;
    }

    html.mobile-input-keyboard-visible .footer-container-host--fixed > .footer-buttons.fixed,
    html.mobile-input-keyboard-visible .footer-container-host--fixed > .overlay-buttons {
        translate: 0 var(--mobile-input-footer-offset, 0px);
    }

    html.mobile-input-keyboard-visible .search-container:not(.search-container--chat) {
        bottom: var(--item-gap);
    }

    /* A fixed search field sits above the keyboard, so do not retain the hidden footer's space. */
    html.mobile-input-keyboard-visible body:has(.search-container:not(.search-container--chat)) .books-scroll {
        bottom: calc(var(--search-h) + var(--item-gap));
    }

    html.mobile-input-viewport-active:not(.mobile-input-keyboard-visible) .add-line-overlay {
        padding-bottom: calc(var(--fixed-footer-buttons-height) + var(--item-gap));
    }
}

.keyboard-focus-trigger-wrapper {
    display: contents;
}

.footer-button-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 0;
}

.footer-button-item--contents {
    display: contents;
}

.chat-page-layout > .footer-container-host {
    --chat-footer-buttons-height: calc(var(--footer-button-size) + (2 * var(--contoured-item-gap)));
    width: var(--main-menu-width);
    max-width: 400px;
    margin-top: max(0px, calc(var(--double-item-gap) - var(--contoured-item-gap)));
    justify-self: center;
}

.chat-page-layout > .footer-container-host > .footer-buttons {
    height: var(--chat-footer-buttons-height);
    min-height: var(--chat-footer-buttons-height);
    padding: var(--contoured-item-gap) 0;
}

.footer-buttons-placeholder {
    width: 100%;
    height: var(--footer-buttons-height, 80px);
    flex-shrink: 0;
}

.footer-container-host--fixed .footer-buttons-placeholder {
    height: var(--fixed-footer-buttons-height);
}

    /*  ------ 2. Базовый стиль кнопок ------ */
    .footer-btn {
        width: var(--footer-button-size);
        height: var(--footer-button-size);
        font-size: 24px;
        border-radius: 50%;
        border: 2px solid #000;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        overflow: hidden;
        background: #00a2e8;
        color: #000;
        cursor: pointer;
        transition: background-color .3s;
    }

        @media (hover: hover) and (pointer: fine) {
            .footer-btn:hover:not(:disabled):not([disabled]) {
                background: #0088cc;
            }
        }

    .left-center-green,
    .right-green {
        background: green;
    }

    .right-red {
        background: red;
    }

    .footer-btn.vote-footer-button--active,
    .footer-btn.vote-footer-button--active:disabled,
    .footer-btn.vote-footer-button--active[disabled] {
        opacity: 1;
        border-color: #000;
    }

    .footer-btn.vote-footer-button--like-active,
    .footer-btn.vote-footer-button--like-active:disabled,
    .footer-btn.vote-footer-button--like-active[disabled] {
        background: green;
    }

    .footer-btn.vote-footer-button--dislike-active,
    .footer-btn.vote-footer-button--dislike-active:disabled,
    .footer-btn.vote-footer-button--dislike-active[disabled] {
        background: red;
    }

      /*  ------ 4. Overlay-кнопки ------ */

    .button-icon {
        justify-self: center;
        width: var(--footer-button-icon-size);
        height: var(--footer-button-icon-size);
        object-fit: contain;
        padding: var(--footer-button-icon-padding);
        box-sizing: content-box;
    }

    /* Let the crossed message stroke meet the button contour. */
    button:has(> img[src$="/icons/message_no.svg"]) > img[src$="/icons/message_no.svg"] {
        width: auto;
        height: calc(100% + (2 * var(--standard-contour-width)));
        max-width: none;
        max-height: none;
        padding: 0;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    .footer-btn .button-icon[src^="/icons/arrow_back.svg"] {
        padding: 0;
        transform: scale(1.05);
        transform-origin: center;
    }

    .button-icon[src^="/icons/bust.svg"],
    .icon-left img[src^="/icons/bust.svg"],
    .icon-right img[src^="/icons/bust.svg"],
    .footer-buttons .icon-left img[src^="/icons/bust.svg"],
    .footer-buttons .icon-right img[src^="/icons/bust.svg"] {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center bottom;
        border-radius: 50%;
        clip-path: circle(50% at 50% 50%);
        padding: 0;
    }

    .footer-btn.showcase-cabinet-footer-button .button-icon[src^="/icons/bust.svg"] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: none;
    }

    .footer-btn.fab-main,
    .footer-btn.download {
        position: fixed;
        right: 50px;
        bottom: 15px;
        z-index: 100;
    }

    .overlay-buttons {
        position: fixed;
        bottom: 85px;
        right: 50px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        z-index: 99;
    }

    .overlay-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .user-genres-format-selector {
        display: contents;
    }

    .user-genres-footer .user-genres-format-button {
        width: var(--footer-button-size);
        min-width: var(--footer-button-size);
        max-width: var(--footer-button-size);
    }

    .footer-btn.user-genres-format-button--unselected {
        background: #ed1c24;
    }

    .footer-btn.user-genres-format-button--selected {
        background: #22b14c;
    }

    .footer-btn.user-genres-format-button--selected:active:not(:disabled):not([disabled]) {
        background: #1c8f3d;
    }

    .footer-btn.user-genres-format-button--unselected:active:not(:disabled):not([disabled]) {
        background: #c9302c;
    }

    @media (hover: hover) and (pointer: fine) {
        .footer-btn.user-genres-format-button--selected:hover:not(:disabled):not([disabled]) {
            background: #1c8f3d;
        }

        .footer-btn.user-genres-format-button--unselected:hover:not(:disabled):not([disabled]) {
            background: #c9302c;
        }
    }

    /* #region ToggleButton overrides */
    /* ============================= */
    /* ToggleButton — Footer version */
    /* ============================= */

    .footer-buttons .toggle-container {
        position: static;
        transform: none;
        display: flex;
        flex-direction: row;
        column-gap: var(--toggle-gap);
        width: var(--footer-toggle-total-width);
        max-width: 100%;
        align-items: center;
        justify-content: center;
        align-self: center;
        --toggle-icon-size: var(--footer-button-size);
        --footer-toggle-switch-width: calc(var(--footer-button-size) * 2);
        --footer-toggle-total-width: calc((var(--footer-button-size) * 4) + (var(--toggle-gap) * 2));
        --toggle-icon-img-width: calc(var(--footer-button-size) * 0.62);
        --toggle-icon-img-height: calc(var(--footer-button-size) * 0.62);
        --toggle-circle-size: var(--toggle-icon-size);
        --toggle-circle-img-width: var(--toggle-icon-img-width);
        --toggle-circle-img-height: var(--toggle-icon-img-height);
        height: var(--footer-button-size);
        max-height: var(--footer-button-size);
        padding: 0;
        margin: 0;
        flex: 0 0 var(--footer-toggle-total-width);
        box-sizing: border-box;
    }

    .footer-buttons .icon-left,
    .footer-buttons .icon-right {
        width: var(--footer-button-size);
        height: var(--footer-button-size);
        border-radius: 50%;
        border: 2px solid #000;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        flex-shrink: 0;
    }

        .footer-buttons .icon-left img,
        .footer-buttons .icon-right img {
            width: var(--footer-button-icon-size);
            height: var(--footer-button-icon-size);
            object-fit: contain;
            padding: 0;
            box-sizing: border-box;
        }

    .footer-buttons .switch {
        flex: 0 0 var(--footer-toggle-switch-width);
        width: var(--footer-toggle-switch-width);
        min-width: var(--footer-toggle-switch-width);
        max-width: var(--footer-toggle-switch-width);
        height: var(--footer-button-size);
        margin: 0;
        border-radius: 999px;
        border: 2px solid #000;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .footer-buttons .circle {
        height: var(--toggle-circle-size);
        width: var(--toggle-circle-size);
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        transition: left 0.3s ease;
        pointer-events: none;
    }

    .footer-buttons .slider-range {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }
    /* #endregion */

    .message-actions-button {
        width: var(--footer-button-size);
        min-width: var(--footer-button-size);
        max-width: var(--footer-button-size);
        height: var(--footer-button-size);
        min-height: var(--footer-button-size);
        max-height: var(--footer-button-size);
        flex: 0 0 var(--footer-button-size);
        background-color: #00a2e8;
        border: 2px solid #000000;
        color: white;
        font-size: 24px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: background-color 0.3s ease;
        padding: 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    .message-actions-button img {
        width: var(--footer-button-icon-size);
        height: var(--footer-button-icon-size);
        padding: var(--footer-button-icon-padding);
        object-fit: contain;
    }

    .avatar-menu .message-actions-button--share-donate .button-icon {
        transform: scale(1.38);
        transform-origin: center;
    }

    .avatar-menu .message-actions-button--share-donate .button-icon[src^="/icons/transition.svg"] {
        transform: translateY(-1px) scale(1.45);
    }

    .message-actions-button--icon {
        padding: 0;
    }

    .timed-confirm-button {
        min-width: var(--footer-button-size);
        min-height: var(--footer-button-size);
        background-color: #00a2e8;
        border: 2px solid #000000;
        color: #ffffff;
        border-radius: 9999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-weight: 700;
        line-height: 1;
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
        padding: 0 14px;
    }

    .timed-confirm-button.message-actions-button {
        padding: 0;
    }

    .timed-confirm-button img {
        width: var(--footer-button-icon-size);
        height: var(--footer-button-icon-size);
        padding: var(--footer-button-icon-padding);
        object-fit: contain;
    }

    .timed-confirm-button .timed-confirm-button__countdown-icon {
        padding: 0;
    }

    .timed-confirm-button--countdown {
        background-color: var(--grey-background);
        color: #ffffff;
    }

    .timed-confirm-button--ready {
        background-color: #32a852;
        border-color: #006400;
        color: #ffffff;
    }

    .timed-confirm-button:disabled,
    .timed-confirm-button[disabled] {
        background-color: var(--grey-background);
        border-color: #808080;
        color: #666666;
        cursor: not-allowed;
    }

    .message-actions-button--delete {
        font-size: 16px;
        font-weight: 700;
        line-height: 1;
    }

    .message-actions-button.chat-timed-confirm-button.timed-confirm-button--countdown,
    .message-actions-button.chat-timed-confirm-button.timed-confirm-button--countdown:disabled {
        border-color: #000000;
        color: #666666;
        cursor: not-allowed;
    }

    .message-actions-button.chat-timed-confirm-button.timed-confirm-button--ready {
        background-color: #32a852;
        border-color: #006400;
        color: #ffffff;
    }

        .message-actions-button:disabled,
        .message-actions-button[disabled] {
            width: var(--footer-button-size);
            min-width: var(--footer-button-size);
            max-width: var(--footer-button-size);
            height: var(--footer-button-size);
            min-height: var(--footer-button-size);
            max-height: var(--footer-button-size);
            flex: 0 0 var(--footer-button-size);
            background-color: var(--grey-background);
            border-color: #808080;
            border: 2px solid #000000;
            color: #666666;
            font-size: 24px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

/* Components/Pages/AdminPages/AvatarEditor.razor */
.admin-page-layout :is(.avatar-editor-page, .avatar-group-editor-page) .avatar-sex-columns {
    --avatar-sex-columns-min-gap: max(var(--double-item-gap), var(--admin-page-item-gap));
    --avatar-sex-column-max-width: calc(150px + (2 * var(--standard-contour-width)));
    --avatar-sex-column-width: min(
        var(--avatar-sex-column-max-width),
        max(0px, calc((100% - (3 * var(--avatar-sex-columns-min-gap))) / 2))
    );
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    column-gap: 0;
    row-gap: var(--admin-page-item-gap);
    width: 100%;
    padding-inline: 0;
    box-sizing: border-box;
}

.admin-page-layout :is(.avatar-editor-page, .avatar-group-editor-page) .avatar-sex-columns > .admin-flex-column-center {
    flex: 0 0 var(--avatar-sex-column-width);
    min-width: 0;
}

.admin-page-layout :is(.avatar-editor-page, .avatar-group-editor-page) .avatar-sex-columns > .admin-flex-column-center :is(
    .header-center,
    .admin-flex-column-center
) {
    width: 100%;
    min-width: 0;
}

.admin-page-layout :is(.avatar-editor-page, .avatar-group-editor-page) .avatar-sex-columns .photo-placeholder {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1;
    box-sizing: border-box;
}

.avatar-editor-group-name-wrap {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 4px;
        margin-bottom: 10px;
    }

    .avatar-editor-group-name-button {
        width: 100%;
        min-width: 0;
        background: var(--admin-inactive-background);
        color: #000;
        border: 2px solid #000;
        border-radius: 9999px;
        padding: 8px 18px;
        box-sizing: border-box;
        font-size: 1rem;
        text-transform: lowercase;
        opacity: 1;
    }

/* Components/Pages/AdminPages/PresentAccessEditor.razor */
.present-exclusive-plus {
        margin-bottom: 12px;
        flex: 1;
    }

    .present-exclusive-marquee {
        width: 100%;
    }

/* Components/Controls/RoundedBox.razor */
.date-range {
        display: flex;
        width: 100%;
        margin-top: 0;
        gap: 0;
    }

    .rounded-box {
        --rounded-box-icon-size: 20px;
        --rounded-box-icon-circle-size: 32px;
        --rounded-box-icon-circle-background: var(--grey-background);
        flex: 1 1 0;
        background: var(--grey-background);
        border: 2px solid #000;
        min-width: 110px;
        padding: 4px 6px;
        font-weight: 600;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4px;
    }

    .rounded-box.start {
        border-radius: 22px 0 0 22px;
    }

    .rounded-box.end {
        border-radius: 0 22px 22px 0;
    }

    .date-range > .rounded-box.end {
        border-left: 0;
    }

    .box-text {
        flex: 1 1 auto;
        font-size: 18px;
        text-align: center;
        margin: 0;
    }

    .rounded-box__icon {
        width: var(--rounded-box-icon-size);
        height: var(--rounded-box-icon-size);
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 var(--rounded-box-icon-size);
        object-fit: contain;
    }

    .rounded-box__icon-circle {
        width: var(--rounded-box-icon-circle-size);
        height: var(--rounded-box-icon-circle-size);
        min-width: var(--rounded-box-icon-circle-size);
        min-height: var(--rounded-box-icon-circle-size);
        border-radius: 50%;
        border: 2px solid #000;
        background: var(--rounded-box-icon-circle-background);
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 var(--rounded-box-icon-circle-size);
    }

    .rounded-box.start .rounded-box__icon-circle--left {
        margin-left: -9px;
    }

    .rounded-box.end .rounded-box__icon-circle--right {
        margin-right: -9px;
    }

/* Components/Controls/AuthorEditorFooterActions.razor */
.author-editor-footer-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .author-editor-footer-action-button {
        width: calc(var(--footer-button-size) * 2);
        height: var(--footer-button-size);
        border-radius: 24px;
        border: 2px solid #000;
        background: #00a2e8;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
    }

    .author-editor-footer-action-button img {
        width: auto;
        height: 100%;
        object-fit: contain;
    }

    .author-editor-footer-action-button:disabled {
        background-color: var(--admin-inactive-background);
        cursor: not-allowed;
        opacity: 0.8;
    }

/* Components/Controls/BlackListControl.razor */
.black-list-control {
        --ban-title-height: var(--blue-button-reference-height);
        --ban-card-padding: 10px;
        --ban-card-blue: #00a2e8;
        --ban-card-light: var(--grey-background);
        --ban-card-gray: var(--grey-background);
        --ban-card-red: #ff4b4b;
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        margin-bottom: 12px;
        padding: var(--ban-card-padding);
        background: transparent;
        border: 2px solid #000;
        border-radius: 22px;
        box-sizing: border-box;
        color: #000;
    }


    .black-list-control--panel {
        margin-bottom: 0;
    }

    .black-list-control__reason {
        margin: 0;
        border-radius: 16px;
        background: var(--ban-card-light);
        font-size: 16px;
        font-weight: 700;
        line-height: 1.25;
    }

    .black-list-control__counter {
        margin: 0;
        min-height: var(--blue-button-reference-height);
        height: var(--blue-button-reference-height);
        display: grid;
        grid-template-columns: repeat(10, minmax(0, 1fr));
        align-items: center;
        justify-items: center;
        column-gap: clamp(1px, calc(var(--blue-button-reference-height) * 0.04), 4px);
        padding: 1px 8px;
        box-sizing: border-box;
    }

    .black-list-control__title {
        margin: 0;
        overflow: hidden;
        padding: 0;
    }

    .black-list-control__mode-badge {
        background: var(--ban-card-light);
        border: 2px solid #000;
        margin-left: -2px;
    }

    .black-list-control__mode-icon {
        width: 24px;
        height: 24px;
        object-fit: contain;
    }

    .black-list-control__status-badge {
        margin-right: 0;
        border-left: 2px solid #000;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--ban-card-red);
    }

    .black-list-control__status-badge--temp {
        background: var(--ban-card-red);
    }

    .black-list-control__status-badge--indefinite,
    .black-list-control__status-badge--permanent {
        background: var(--ban-card-red);
    }

    .black-list-control__status-value {
        color: #000;
        font-size: 18px;
        font-weight: 800;
        line-height: 1;
    }

    .black-list-control__status-value-icon {
        width: calc(var(--ban-title-height) * 0.75);
        height: calc(var(--ban-title-height) * 0.75);
        object-fit: contain;
    }

    .ban-title.blue-button {
        height: var(--ban-title-height);
    }

    .ban-title.blue-button .ban-title__icon {
        width: var(--ban-title-height);
        height: var(--ban-title-height);
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 var(--ban-title-height);
    }

    .ban-rounded-box {
        height: var(--ban-title-height);
    }

    .black-list-control__dates {
        margin-top: 0;
    }

    .ban-rounded-box .rounded-box {
        height: 100%;
        box-sizing: border-box;
        --rounded-box-icon-size: 26px;
        --rounded-box-icon-circle-size: var(--ban-title-height);
        --rounded-box-icon-circle-background: var(--ban-card-light);
    }

    .black-list-control__dates .rounded-box {
        background: var(--ban-card-light);
    }

    .black-list-control__dates .box-text {
        font-size: 16px;
        font-weight: 700;
        text-align: center;
    }

    .ban-status-sheet .black-list-control__dates .rounded-box {
        --rounded-box-icon-size: var(--footer-button-icon-size);
        min-width: 0;
    }

    .ban-status-sheet .black-list-control__dates .box-text {
        font-size: 16px !important;
    }

.black-list-control__feedback {
    margin: var(--vertical-item-gap) 0;
    font-size: 16px !important;
    text-align: center;
    overflow-wrap: anywhere;
}

.black-list-control--foyer .box-text,
.black-list-control--foyer .calendar-date-picker__label {
    font-size: 16px !important;
}

.black-list-control__feedback--error {
    color: #8b0000;
}

.site-blocked-header .grey-header,
.middle-container > .site-blocked-page {
    width: min(400px, 100%);
    min-width: 0;
}

.site-blocked-page .ban-reason {
    background: var(--grey-background);
    color: black;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

    .calendar-date-picker__trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--item-gap);
        width: 100%;
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: #000;
        font-family: inherit;
        font-size: clamp(13px, 4.2vw, 16px);
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
    }

    .calendar-date-picker__value {
        flex: 1 1 auto;
        min-width: 0;
        text-align: center;
    }

    .calendar-date-picker__label {
        display: block;
        white-space: nowrap;
    }

    .calendar-date-picker__trigger--field {
        --rounded-box-icon-size: calc(var(--footer-button-size) * 0.65);
        --rounded-box-icon-circle-size: var(--footer-button-size);
        --rounded-box-icon-circle-background: #00a2e8;
        min-height: calc(var(--footer-button-size) + (2 * var(--item-gap)));
        padding: var(--item-gap) var(--item-gap) var(--item-gap) var(--double-item-gap);
        border: var(--standard-contour-width) solid #000;
        border-radius: 999px;
        background: var(--grey-background);
        box-sizing: border-box;
        touch-action: manipulation;
    }

    .calendar-date-picker__trigger--field .calendar-date-picker__value {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--double-item-gap);
    }

    .calendar-date-picker__caption {
        text-transform: uppercase;
    }

    .calendar-date-picker__trigger--field .calendar-date-picker__caption,
    .calendar-date-picker__trigger--field .calendar-date-picker__label {
        font-size: clamp(22px, 6.5vw, 28px) !important;
    }

    .calendar-date-picker__trigger:focus-visible {
        outline: 2px solid #000;
        outline-offset: 2px;
        border-radius: 4px;
    }

    .calendar-date-picker__trigger:disabled {
        cursor: wait;
        opacity: 0.75;
    }

/* Components/Controls/CalendarDatePicker.razor */
.app-calendar__overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: grid;
    place-items: center;
    padding: max(var(--interface-edge-gap), env(safe-area-inset-top))
        max(var(--interface-edge-gap), env(safe-area-inset-right))
        max(var(--interface-edge-gap), env(safe-area-inset-bottom))
        max(var(--interface-edge-gap), env(safe-area-inset-left));
    box-sizing: border-box;
}

.app-calendar__scrim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.58);
    cursor: default;
    touch-action: none;
}

.app-calendar__focus-trap {
    display: block;
    position: relative;
    width: min(400px, 100%);
    min-width: 0;
}

.app-calendar__dialog {
    position: relative;
    width: 100%;
    max-height: calc(100dvh - max(var(--interface-edge-gap), env(safe-area-inset-top))
        - max(var(--interface-edge-gap), env(safe-area-inset-bottom)));
    overflow-y: auto;
    overscroll-behavior: contain;
    border: var(--standard-contour-width) solid #000;
    border-radius: 22px;
    background: var(--grey-background);
    color: #000;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
}

.app-calendar__dialog:focus {
    outline: none;
}

.app-calendar__heading {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--double-item-gap);
    padding: var(--double-item-gap);
    border-bottom: var(--standard-contour-width) solid #000;
    background: #00a2e8;
}

.app-calendar__eyebrow,
.app-calendar__selected-date {
    display: block;
}

.app-calendar__eyebrow {
    margin-bottom: var(--item-gap);
    font-size: 14px !important;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.app-calendar__selected-date {
    font-size: 26px !important;
    line-height: 1.1;
}

.app-calendar__close,
.app-calendar__nav-button {
    display: grid;
    place-items: center;
    width: var(--footer-button-size);
    height: var(--footer-button-size);
    flex: 0 0 var(--footer-button-size);
    padding: 0;
    border: var(--standard-contour-width) solid #000;
    border-radius: 50%;
    background: var(--grey-background);
    color: #000;
    font-size: 30px !important;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-sizing: border-box;
    touch-action: manipulation;
}

.app-calendar__body {
    padding: var(--double-item-gap);
}

.app-calendar__navigation {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: var(--item-gap);
    justify-items: center;
    margin-bottom: var(--double-item-gap);
}

.app-calendar__month {
    min-width: 0;
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: center;
    text-transform: uppercase;
    font-size: 20px !important;
    font-weight: 800;
    line-height: 1.1;
}

.app-calendar__nav-button {
    background: #00a2e8;
}

.app-calendar__nav-button:disabled {
    background: var(--admin-inactive-background);
    color: #555;
    cursor: not-allowed;
}

.app-calendar__weekdays,
.app-calendar__days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: calc(var(--item-gap) / 2);
}

.app-calendar__weekdays {
    margin-bottom: var(--double-item-gap);
    text-align: center;
    font-size: 14px !important;
    font-weight: 800;
}

.app-calendar__weekdays > span {
    font-size: inherit !important;
}

.app-calendar__day {
    display: grid;
    place-items: center;
    min-height: var(--footer-button-size);
    min-width: 0;
    padding: 0;
    border: var(--standard-contour-width) solid transparent;
    border-radius: 50%;
    background: transparent;
    color: #000;
    font-size: 20px !important;
    font-weight: 700;
    cursor: pointer;
    box-sizing: border-box;
    touch-action: manipulation;
}

.app-calendar__day--today {
    border-color: #000;
}

.app-calendar__day--selected {
    border-color: #000;
    background: var(--yellow-button-background);
}

.app-calendar__day:disabled {
    color: #555;
    opacity: 0.55;
    cursor: not-allowed;
}

.app-calendar__close:focus-visible,
.app-calendar__nav-button:focus-visible,
.app-calendar__day:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .app-calendar__close:hover,
    .app-calendar__nav-button:not(:disabled):hover {
        background: var(--yellow-button-background);
    }

    .app-calendar__day:not(:disabled):hover {
        border-color: #000;
        background: #00a2e8;
    }
}

    .ban-lock-icon, .ban-unlock-icon {
        width: 24px;
        height: 24px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .ban-reason {
        padding: 12px 16px;
        background: var(--ban-card-light);
        border: 2px solid #000;
        border-radius: 12px;
        color: #000;
        font-size: 16px;
        line-height: 1.4;
        word-break: break-word;
        text-align: center;
    }

    .black-list-control__actions {
        display: grid;
        grid-template-columns: repeat(4, var(--footer-button-size));
        justify-content: space-evenly;
        width: calc(100% + (2 * var(--ban-card-padding)));
        margin-inline: calc(-1 * var(--ban-card-padding));
        column-gap: 0;
    }

    .timed-confirm-button.black-list-control__action-button {
        width: var(--footer-button-size);
        min-width: var(--footer-button-size);
        max-width: var(--footer-button-size);
        height: var(--footer-button-size);
        min-height: var(--footer-button-size);
        max-height: var(--footer-button-size);
        box-sizing: border-box;
        border-radius: 50%;
        padding: 0;
        flex: 0 0 var(--footer-button-size);
        font-size: 24px;
        font-weight: 700;
        line-height: 1;
        color: #000;
        background: var(--ban-card-blue);
    }

    .timed-confirm-button.black-list-control__action-button img {
        width: calc(var(--footer-button-size) * 0.62);
        height: calc(var(--footer-button-size) * 0.62);
        object-fit: contain;
        padding: 0;
    }

    .timed-confirm-button.black-list-control__action-button--site img {
        width: calc(var(--footer-button-size) - (2 * var(--standard-contour-width)));
        height: calc(var(--footer-button-size) - (2 * var(--standard-contour-width)));
        clip-path: circle(50% at center);
    }

    .black-list-control__action-button--site {
        background: #00a2e8;
    }

    .black-list-control__action-button--indefinite {
        background: #00a2e8;
    }

    .black-list-control__action-button--temp {
        background: var(--ban-card-gray);
    }

    .black-list-control__action-button--unblock {
        background: #00a2e8;
    }

    .timed-confirm-button.timed-confirm-button--countdown {
        background-color: #00a2e8;
        border-color: #000;
        color: #fff;
    }

    .timed-confirm-button.timed-confirm-button--ready {
        background-color: #22b14c;
        border-color: #000;
        color: #fff;
    }

    .timed-confirm-button.black-list-control__action-button:disabled,
    .timed-confirm-button.black-list-control__action-button[disabled] {
        background-color: var(--admin-inactive-background);
        border-color: #000;
        color: #4f4f4f;
        cursor: not-allowed;
        opacity: 1;
    }

/* Components/Controls/BookAuthorStatisticLine.razor */
.book-author-statistic-line {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--footer-button-size);
    min-height: var(--footer-button-size);
    max-height: var(--footer-button-size);
    margin: 0;
    color: #111;
}

.book-author-statistic-line__oval {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    height: var(--footer-button-size);
    min-height: var(--footer-button-size);
    max-height: var(--footer-button-size);
    background: var(--grey-background);
    border: 2px solid #000;
    border-radius: calc(var(--footer-button-size) / 2);
    box-sizing: border-box;
    overflow: hidden;
}

.book-author-statistic-line__value {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    max-width: calc(100% - (var(--footer-button-size) * 2.4));
    padding: 0 8px;
    overflow: hidden;
    color: #202020;
    font-size: clamp(20px, calc(var(--footer-button-size) * 0.52), 32px);
    font-weight: 900;
    line-height: 1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

.book-author-statistic-line__icon {
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--footer-button-size) * 2);
    min-width: 52px;
    max-width: calc(var(--footer-button-size) * 2);
    height: var(--footer-button-size);
    min-height: var(--footer-button-size);
    max-height: var(--footer-button-size);
    background: var(--grey-background);
    border: 2px solid #000;
    border-radius: calc(var(--footer-button-size) / 2);
    box-sizing: border-box;
    overflow: hidden;
}

.book-author-statistic-line__icon-image {
    width: 85%;
    height: 85%;
    object-fit: contain;
}

.book-author-statistic-line__icon-text {
    max-width: 100%;
    padding-inline: 4px;
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Components/Controls/FormatLine.razor */
.format-line {
        --format-line-size: var(--footer-button-size);
        --format-line-border-width: 2px;
        --format-line-icon-size: var(--footer-button-icon-size);
        --format-line-circle-icon-size: var(--footer-button-icon-size);
        width: 100%;
        height: var(--format-line-size);
        min-height: var(--format-line-size);
        max-height: var(--format-line-size);
        border-radius: calc(var(--format-line-size) / 2);
        border: var(--format-line-border-width) solid #111;
        background: #00a2e8;
        color: #111;
        font-weight: 900;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 calc(var(--format-line-size) + 8px);
        box-sizing: border-box;
        margin: 3px 0;
    }

    .format-line--disabled {
        background: var(--admin-inactive-background);
    }

    .format-line__icon {
        width: var(--format-line-icon-size);
        min-width: var(--format-line-icon-size);
        max-width: var(--format-line-icon-size);
        height: var(--format-line-icon-size);
        min-height: var(--format-line-icon-size);
        max-height: var(--format-line-icon-size);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .format-line__icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .format-line__circle {
        width: var(--format-line-size);
        min-width: var(--format-line-size);
        max-width: var(--format-line-size);
        height: var(--format-line-size);
        min-height: var(--format-line-size);
        max-height: var(--format-line-size);
        box-sizing: border-box;
        border-radius: 50%;
        border: var(--format-line-border-width) solid #111;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .format-line__circle img {
        width: var(--format-line-circle-icon-size);
        min-width: var(--format-line-circle-icon-size);
        max-width: var(--format-line-circle-icon-size);
        height: var(--format-line-circle-icon-size);
        min-height: var(--format-line-circle-icon-size);
        max-height: var(--format-line-circle-icon-size);
        padding: 0;
        box-sizing: border-box;
        object-fit: contain;
    }

    .format-line__circle--left {
        left: calc(0px - var(--format-line-border-width));
    }

    .format-line__circle--right {
        right: calc(0px - var(--format-line-border-width));
    }

    .format-line__circle--ok {
        background: #45ba27;
    }

    .format-line__circle--bad {
        background: #ff2f2f;
    }

    .format-line__circle--content {
        background: var(--admin-inactive-background);
    }

/* Components/Controls/ImageFrameControl.razor */
.time-control {
        display: flex;
        align-items: center;
        width: 100%;
    }

    .time-control .yellow-button {
        flex: 1;
    }

    .time-control .delete-button {
        width: 54px;
        height: 44px;
        border-radius: 50%;
        border: 2px solid black;
        background-color: #00a2e8;
    }

/* Components/Controls/SmileProgressBar.razor */
.smile-progress {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        max-width: 400px;
        padding: 4px 6px;
        background: var(--grey-background);
        border-radius: 9999px;
        border: 2px solid #000;
    }

    .smile {
        width: 26px;
        height: 26px;
    }

/* Components/Controls/StatisticsLine.razor */
/* Контейнер всего компонента */
    .statistics-line {
        position: relative;
        display: flex;
        align-items: center;
        color: #000000;
        height: var(--footer-button-size);
        min-height: var(--footer-button-size);
        max-height: var(--footer-button-size);
        margin: 5px 0 0 0;
        gap: 4px; /* Разрыв между левой областью и кнопкой */
    }

    /* Левая "овальная" область, занимает всю возможную ширину */
        .statistics-line .left-oval {
            display: flex;
            align-items: center;
            flex-grow: 1; /* ВАЖНО: позволяет растягиваться */
            background: var(--grey-background);
            border: 2px solid #000;
            border-radius: calc(var(--footer-button-size) / 2);
            min-height: var(--footer-button-size);
            height: var(--footer-button-size);
            width: calc(var(--footer-button-size) * 2);
            box-sizing: border-box;
            overflow: hidden; /* если вдруг текст или иконка больше */
        }

        .statistics-line .left-oval.left-oval-gray {
            background: var(--grey-background);
        }

        .statistics-line .left-oval.left-oval-silver {
            background: var(--grey-background);
        }

        .statistics-line .left-oval.left-oval-steel {
            background: #7092be;
        }

        .statistics-line .left-oval.left-oval-pink {
            background: #f7b3b6;
        }

        .statistics-line .left-oval.left-oval-yellow {
            background: #fffbaa;
        }

        .statistics-line .left-oval.left-oval-green {
            background: #b7f2c7;
        }

        .statistics-line .left-oval.left-oval-blue {
            background: #aae8ff;
        }

        .statistics-line .left-oval.left-oval-white {
            background: #ffffff;
        }

    /* Иконка слева */
        .statistics-line .left-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: calc(var(--footer-button-size) / 2);
            border: 2px solid #000;
            width: calc(var(--footer-button-size) * 2);
            min-height: var(--footer-button-size);
            height: var(--footer-button-size);
            margin: -1px;
            flex-shrink: 0; /* фиксированная ширина, не сжимать */
            background-color: white;
            box-sizing: border-box;
        }

        .admin-page-layout .statistics-line .left-icon {
            background-color: inherit;
        }

    /* Число по центру */
    .statistics-line .center-value {
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 1;
        transform: translate(-50%, -50%);
        flex-grow: 0;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        padding: 0 8px;
        min-width: 0; /* важно для правильного сжатия, если мало места */
        max-width: calc(100% - (var(--footer-button-size) * 4));
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        pointer-events: none;
    }

    /* Кнопка справа (синяя овальная) */
        .statistics-line .right-button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: calc(var(--footer-button-size) * 2);
            min-width: 52px;
            min-height: var(--footer-button-size);
            height: var(--footer-button-size);
            background: #00a2e8;
            border: 2px solid #000;
            border-radius: calc(var(--footer-button-size) / 2);
            padding: 0;
            flex-shrink: 0;
            cursor: pointer;
            box-sizing: border-box;
            font: inherit;
        }

        @media (hover: hover) and (pointer: fine) {
            .statistics-line .right-button:hover:not(:disabled) {
                background-color: #0088cc;
            }
        }

        .statistics-line .right-button:disabled,
        .statistics-line .right-button[disabled] {
            background-color: var(--grey-background);
            border-color: #666;
            color: #ccc;
            cursor: not-allowed;
        }

    /* Универсальный стиль для иконок */
    .statistics-line .icon-img {
        width: auto;
        max-width: none;
        height: var(--cabinet-statistics-icon-height);
        max-height: var(--cabinet-statistics-icon-height);
        object-fit: contain;
    }

    .statistics-line .right-button__icon {
        width: auto;
        height: var(--cabinet-statistics-icon-height);
    }

/* Responsive simplified-statistics pages. */
.book-author-statistic-page,
.reader-simplified-statistics-page {
    justify-content: flex-start;
    padding-bottom: calc(var(--footer-buttons-height) + var(--contoured-item-gap));
    box-sizing: border-box;
}

.book-author-statistic-page__menu,
.reader-simplified-statistics-page__menu {
    gap: var(--contoured-item-gap);
    padding-bottom: var(--contoured-item-gap);
}

.reader-simplified-statistics-page__menu > .awards-grid-row,
.user-info-page__menu > .awards-grid-row {
    margin-top: 0;
    row-gap: var(--contoured-item-gap);
}

.book-author-statistic-page .book-author-statistic-line,
.reader-simplified-statistics-page .book-author-statistic-line {
    width: 100%;
    margin: 0;
}

.reader-simplified-statistics-page .book-author-statistic-line__icon-image {
    width: auto;
    max-width: none;
    height: var(--cabinet-action-icon-height);
    padding: 0;
    flex: 0 0 auto;
    object-fit: contain;
}

@media (max-width: 768px) {
    .book-author-statistic-page,
    .reader-simplified-statistics-page {
        padding-bottom: calc(var(--footer-buttons-height) + env(safe-area-inset-bottom, 0px) + var(--contoured-item-gap));
    }

    .book-author-statistic-page {
        padding-left: var(--contoured-item-gap);
        padding-right: var(--contoured-item-gap);
    }

    .reader-simplified-statistics-page {
        padding-left: 0;
        padding-right: 0;
    }

    .middle-container.book-author-statistic-page > .book-author-statistic-page__menu,
    .middle-container.reader-simplified-statistics-page > .reader-simplified-statistics-page__menu {
        max-width: 100%;
        min-width: 0;
        gap: var(--contoured-item-gap);
    }

    .middle-container.book-author-statistic-page > .book-author-statistic-page__menu {
        width: 100%;
    }

    .middle-container.reader-simplified-statistics-page > .reader-simplified-statistics-page__menu {
        width: var(--main-menu-width);
    }

    .book-author-statistic-page .book-author-statistic-line__value,
    .reader-simplified-statistics-page .book-author-statistic-line__value {
        font-size: calc(var(--footer-button-size) * 0.56);
    }

    .reader-simplified-statistics-page__header > .gray-button-for-reader {
        width: var(--main-menu-width);
        max-width: 400px;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Components/Pages/AdminPages/AdminBookAnnotation.razor */
.admin-book-annotation-header,
.admin-book-annotation-menu,
.admin-book-annotation-menu .menu-wrapper-horizontal {
    gap: var(--contoured-item-gap);
}

/* Components/Pages/AdminPages/AdminShowcase.razor */
.admin-showcase-menu .cursor-window__item + .cursor-window__item {
    margin-top: var(--double-item-gap);
}

.admin-book-annotation-menu .awards-grid-row {
    row-gap: var(--contoured-item-gap);
    column-gap: 0;
}

.admin-book-annotation-menu {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    box-sizing: border-box;
}

.admin-book-annotation-header .popularity-rating,
.admin-book-annotation-header .popularity-rating__content,
.admin-book-annotation-header .popularity-rating__stars,
.admin-book-annotation-menu .statistics-line {
    gap: var(--contoured-item-gap);
}

.admin-book-annotation-menu .statistics-line,
.admin-book-annotation-menu .rating-split-progress {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.admin-book-annotation-menu .statistics-line .left-oval {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.admin-book-annotation-header .book-title-button,
.admin-book-annotation-header .header-center > *,
.admin-book-annotation-menu > *,
.admin-book-annotation-menu .statistics-line,
.admin-book-annotation-menu .awards-grid-row {
    margin-top: 0;
    margin-bottom: 0;
}

/* Components/Controls/VoiceLine.razor */
.voice-line {
        --voice-line-circle-size: 52px;
        position: relative;
        display: inline-flex;
        align-items: center;
        width: 100%;
    }

    .voice-line .status-circle,
    .voice-line .id-circle {
        width: var(--voice-line-circle-size);
        height: var(--voice-line-circle-size);
        border-radius: 50%;
            background-color: var(--grey-background);
        border: 2px solid black;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
    }

    .voice-line .status-circle {
        left: 0;
    }

    .voice-line .id-circle {
        right: 0;
        font-size: var(--footer-button-icon-size);
        line-height: 1;
    }

    .voice-line :is(.status-circle, .id-circle) img {
        width: var(--footer-button-icon-size);
        height: var(--footer-button-icon-size);
        padding: 0;
        box-sizing: border-box;
        object-fit: contain;
    }

    .voice-line .no-icon {
        font-weight: bold;
        font-size: var(--footer-button-icon-size);
        line-height: 1;
    }

    .voice-line .voice-line-main-button {
        width: 100%;
        padding-inline: var(--voice-line-circle-size);
    }

/* Components/Pages/AdminPages/AvatarsList.razor */
.avatars-list-group-row {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .avatars-list-group-delete {
        width: 48px;
        min-width: 48px;
        padding: 8px;
        margin: 5px 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .avatars-list-group-open {
        margin: 5px 0;
        flex: 1;
    }

/* Components/Pages/AdminPages/GiftEditor.razor */
.gift-editor-page > .header-container,
.banners-editor-page > .header-container,
.prize-editor-page > .header-container {
    margin-bottom: var(--double-item-gap);
}

.gift-editor-page > .middle-container > .menu-wrapper,
.banners-editor-page > .middle-container > .menu-wrapper,
.prize-editor-page > .middle-container > .menu-wrapper,
.banners-editor-page > .middle-container > .menu-wrapper > .stackpanel {
    gap: var(--double-item-gap);
}

.gift-editor-page .photo-container,
.banners-editor-page .photo-container,
.prize-editor-page .photo-container {
    justify-content: center;
    gap: var(--double-item-gap);
}

.gift-editor-page .gift-cooldown-row {
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--double-item-gap);
    width: 100%;
}

.gift-editor-page .gift-cooldown-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--footer-button-size);
    min-width: var(--footer-button-size);
    max-width: var(--footer-button-size);
    height: var(--footer-button-size);
    min-height: var(--footer-button-size);
    max-height: var(--footer-button-size);
    flex: 0 0 var(--footer-button-size);
    margin: 0;
    padding: 0;
    border-radius: 50%;
}

.gift-editor-page .gift-cooldown-button__icon {
    display: block;
    width: var(--footer-button-icon-size);
    height: var(--footer-button-icon-size);
    object-fit: contain;
}

.gift-editor-page .gift-cooldown-button--infinite .gift-cooldown-button__icon {
    width: var(--footer-button-size);
    height: var(--footer-button-size);
}

.gift-editor-page .present-language-button {
    width: 100%;
    text-align: left;
}

.prize-editor-page .prize-language-caption,
.prize-editor-page .prize-language-row {
    margin-top: 0;
}

.prize-editor-page .prize-language-row {
    gap: var(--double-item-gap);
}

    .footer-btn.present-groups-footer-pill {
        background-color: var(--yellow-button-background);
    }

    .footer-btn.present-groups-footer-pill:disabled,
    .footer-btn.present-groups-footer-pill[disabled] {
        background-color: var(--admin-inactive-background);
    }

    @media (hover: hover) and (pointer: fine) {
        .footer-btn.present-groups-footer-pill:hover {
            background-color: #e6ad00;
        }
    }

/* Components/Pages/AdminPages/MoodStatistics.razor */
.header-container.mood-statistics-header {
    margin-bottom: var(--double-item-gap);
}

    .mood-statistics-date-filter {
        width: 100%;
        min-width: 0;
        margin-bottom: var(--double-item-gap);
    }

    .mood-statistics-date-paper {
        display: grid;
        gap: var(--double-item-gap);
        width: 100%;
        min-width: 0;
    }

    .mood-statistics-progress {
        margin-top: 5px;
    }

    .mood-statistics-date-range .box-text {
        color: #000000;
    }

    .mood-statistics-header-icon {
        display: block;
        padding: 0;
        object-fit: contain;
    }

/* Components/Pages/AdminPages/StatisticsChart.razor */
.statistics-chart-page {
        width: 100%;
    }

    .statistics-chart-page > .statistics-chart-main {
        overflow: hidden;
        padding-bottom: 0 !important;
    }

    .statistics-chart-page .statistics-chart-container {
        width: 100%;
        max-width: none;
        align-self: stretch;
        height: 100%;
        min-height: 0;
        padding: 12px 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }

    .statistics-chart-page .statistics-chart-scroll {
        --statistics-chart-column-width: 44px;
        flex: 1 1 auto;
        width: 100%;
        min-height: 0;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior: contain;
        touch-action: none;
        -webkit-overflow-scrolling: touch;
        padding: 0 var(--interface-edge-gap) 12px;
        box-sizing: border-box;
    }

    .statistics-chart-page .statistics-chart-surface {
        height: 100%;
        min-height: 100%;
        position: relative;
        cursor: grab;
    }

    .statistics-chart-page .statistics-chart-scroll.is-dragging .statistics-chart-surface {
        cursor: grabbing;
    }

    .statistics-chart-page .statistics-chart-surface > :not(.statistics-chart-y-axis) {
        width: 100%;
        height: 100%;
    }

    .statistics-chart-page .statistics-chart-plot canvas {
        width: 100% !important;
        max-width: none;
        height: 100% !important;
        min-height: 100% !important;
    }

    .statistics-chart-page .statistics-chart-y-axis {
        position: sticky;
        left: 0;
        z-index: 2;
        align-self: stretch;
        justify-self: start;
        width: 0;
        height: 100%;
        max-width: none;
        overflow: hidden;
        pointer-events: none;
        transform: translateX(calc(-1 * var(--interface-edge-gap)));
    }

    .statistics-chart-page .statistics-chart-y-axis canvas {
        display: block;
        width: 100%;
        max-width: none;
        height: 100%;
    }

/* Components/Pages/AdminPages/Top100.razor */
.top100-page {
        gap: 12px;
    }

    .top100-icon-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px 10px;
        padding: 0 8px;
        justify-items: center;
        align-items: center;
    }

    .top100-icon-image {
        display: block;
        width: auto;
        max-width: none;
        height: var(--cabinet-statistics-icon-height);
        max-height: var(--cabinet-statistics-icon-height);
        object-fit: contain;
    }

    /* In the 53x25 SVGs, bust bases span x=28..47 on the right and x=6..25 on the left. */
    .top100-icon-grid .cabinet-button:has(> .top100-icon-image[src$="_bust.svg"])::after,
    .top100-icon-grid .cabinet-button:has(> .top100-icon-image[src*="/bust_"])::after {
        content: "";
        position: absolute;
        bottom: 2px;
        width: calc(var(--cabinet-statistics-icon-height) * 0.76);
        height: 4px;
        background-color: black;
        pointer-events: none;
    }

    .top100-icon-grid .cabinet-button:has(> .top100-icon-image[src$="_bust.svg"])::after {
        left: calc(50% + var(--cabinet-statistics-icon-height) * 0.06);
    }

    .top100-icon-grid .cabinet-button:has(> .top100-icon-image[src*="/bust_"])::after {
        left: calc(50% - var(--cabinet-statistics-icon-height) * 0.82);
    }

    .top100-footer-mode-inactive {
        background-color: var(--grey-background);
    }

/* Components/Pages/AdminPages/Top100Statistics.razor */
.top100-statistics-menu .top100-voice-name {
    cursor: default;
}

.admin-page-layout .top100-statistics-menu .cursor-window__item + .cursor-window__item {
    margin-top: calc(4 * var(--item-gap));
}

.top100-statistics-header-icon {
        display: block;
        padding: 0;
        object-fit: contain;
    }

/* Components/Pages/AdminPages/AwardsOptions.razor */
.awards-options-menu {
    margin-top: var(--contoured-item-gap);
}

/* Components/Pages/SmileProgressBarTest.razor */
.smile-progress-demo {
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: center;
        max-width: 320px;
        margin-top: 16px;
    }

    .smile-progress-value {
        font-size: 1.25rem;
        font-weight: 600;
    }

/* Components/Pages/UserPages/ChapterPlayer.razor */
/* Тот же единый фон, что и у просмотра PDF */
.chapter-player {
        position: relative;
        min-height: 100vh;
        width: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background-color: #7092be;
    }

    .chapter-player-background {
        position: absolute;
        inset: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        pointer-events: none;
    }

    .chapter-player > .chapter-title-wrapper,
    .chapter-player > .content-wrapper {
        position: relative;
        z-index: 1;
    }

    .chapter-player .content-wrapper {
        flex: 1;
    }

.chapter-title-wrapper {
        width: 100%;
        transition: opacity .3s ease, transform .3s ease;
        will-change: opacity, transform;
    }

/* Components/Pages/UserPages/ChapterView.razor */
#page-container main article.content:has(> .chapter-view-title-wrapper) {
    position: relative;
}

.chapter-view-title-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
}

    .chapter-title-wrapper.hidden {
        opacity: 0;
        transform: translateY(-100%);
        pointer-events: none;
    }

    .chapter-title-wrapper.visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

/* Components/Pages/UserPages/AuthorView.razor, BooksLikeAndDislake.razor, BookDonateSelection.razor, VoiceActingList.razor, ReviewView.razor, CriticView.razor */
.reader-detail-page {
    width: 100%;
    min-width: 0;
}

.critic-view-page {
    padding-inline: var(--contoured-item-gap);
    box-sizing: border-box;
}

.reader-detail-page > .header-container,
.reader-detail-page > .middle-container,
.reader-detail-page > .footer-container-host {
    min-width: 0;
}

.critic-view-page > .reader-detail-page__header {
    top: var(--contoured-item-gap);
    margin: var(--contoured-item-gap) auto var(--contoured-item-gap);
}

.critic-view-page .reader-detail-page__header .header-center,
.critic-view-page .reader-detail-page__menu {
    width: 100%;
    max-width: none;
}

.reader-detail-page__header {
    width: 100%;
    box-sizing: border-box;
}

.reader-detail-page__header .header-center {
    width: var(--main-menu-width);
    max-width: 400px;
    min-width: 0;
}

.reader-detail-page__header .gray-button {
    min-width: 0;
    height: var(--footer-button-size);
    min-height: var(--footer-button-size);
    max-height: var(--footer-button-size);
    padding: 6px 12px;
    overflow-wrap: anywhere;
    white-space: normal;
}

.reader-detail-page .reader-detail-page__marquee-button {
    overflow: hidden;
    overflow-wrap: normal;
    white-space: nowrap;
}

.reader-detail-page .reader-detail-page__marquee-button .marquee-viewport {
    line-height: 1.1;
}

.reader-detail-page__body {
    align-items: center;
    box-sizing: border-box;
    overflow-y: auto;
}

.reader-detail-page__menu {
    align-items: center;
    width: var(--main-menu-width);
    max-width: 400px;
    min-width: 0;
    box-sizing: border-box;
}

.reader-detail-page__menu > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.reader-detail-page__image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

.author-view-page .reader-detail-page__image,
.critic-view-page .reader-detail-page__image {
    aspect-ratio: 1 / 1;
    cursor: default;
    object-fit: cover;
    object-position: center;
}

.reader-detail-page__summary {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    text-align: center;
    overflow-wrap: anywhere;
}

#page-container.page--with-wallpaper .reader-detail-page__summary.readable-surface--strong {
    background: var(--readable-glass-background);
    border-color: var(--readable-glass-border);
}

.book-rating-page__menu {
    align-items: stretch;
}

.book-rating-page__menu .rating-split-progress {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.book-vote-icons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    height: var(--footer-button-size);
    border: 2px solid #000;
    border-radius: calc(var(--footer-button-size) / 2);
    background: var(--grey-background);
    overflow: hidden;
    box-sizing: border-box;
    pointer-events: none;
}

.book-vote-icons__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.book-vote-icons__item + .book-vote-icons__item {
    border-left: 2px solid #1b1b1b;
}

.book-vote-icons__item img {
    width: var(--footer-button-icon-size);
    height: var(--footer-button-icon-size);
    object-fit: contain;
}

.review-view-page__menu {
    align-items: stretch;
}

.review-view-page__body {
    padding-top: var(--item-gap);
}

.review-view-page {
    --review-view-edge-gap: var(--contoured-item-gap);
}

.review-view-page > .reader-detail-page__header,
.review-view-page > .reader-detail-page__body,
.review-view-page > .reader-detail-page__footer {
    width: calc(100% - (2 * var(--review-view-edge-gap)));
    margin-inline: var(--review-view-edge-gap);
}

.review-view-page .reader-detail-page__header .header-center,
.review-view-page .reader-detail-page__menu {
    width: 100%;
    max-width: none;
}

.review-view-page .review-critic-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--blue-button-reference-height);
    align-items: center;
    gap: var(--review-view-edge-gap);
    width: 100%;
    min-width: 0;
}

.voice-acting-list-page__menu {
    align-items: stretch;
}

.voice-acting-list-page .reader-detail-page__header .header-center,
.voice-acting-list-page .reader-detail-page__menu {
    width: var(--main-menu-width);
    max-width: 400px;
    margin-inline: auto;
}

.voice-acting-list-page__button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
}

.voice-acting-select-button {
    height: var(--footer-button-size);
    min-height: var(--footer-button-size);
    max-height: var(--footer-button-size);
}

.voice-acting-select-button .line-item__circle {
    width: var(--footer-button-size);
    min-width: var(--footer-button-size);
    height: var(--footer-button-size);
    min-height: var(--footer-button-size);
    background-color: var(--grey-background);
}

.voice-acting-select-button .line-item__circle--left {
    font-size: var(--footer-button-icon-size);
    line-height: 1;
}

.voice-acting-select-button .line-item__circle img {
    width: var(--footer-button-icon-size);
    height: var(--footer-button-icon-size);
    padding: var(--footer-button-icon-padding);
    box-sizing: content-box;
    object-fit: contain;
}

.button-critic-flex {
        display: flex;
        align-items: center;
        justify-content: center;
        height: var(--blue-button-reference-height);
        min-height: var(--blue-button-reference-height);
        margin-right: 0;
        font-size: 16px;
        flex-grow: 1; /* ВОТ ЭТО главное: растягиваться на всё свободное пространство */
        box-sizing: border-box;
    }

.review-critic-row {
        align-items: center;
        gap: 10px;
    }

.review-critic-info-button {
        width: var(--blue-button-reference-height);
        min-width: var(--blue-button-reference-height);
        height: var(--blue-button-reference-height);
        min-height: var(--blue-button-reference-height);
        flex: 0 0 var(--blue-button-reference-height);
        box-sizing: border-box;
    }

.review-view-page .button-critic-flex {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    min-height: var(--blue-button-reference-height);
    margin: 0;
    padding: 6px 10px;
    overflow: hidden;
    overflow-wrap: normal;
    white-space: nowrap;
}

.review-view-page .review-critic-info-button {
    justify-self: center;
    margin: 0;
}

@media (max-width: 768px), (max-aspect-ratio: 3 / 4) {
    .author-view-page,
    .critic-view-page {
        width: 100vw;
        max-width: 100vw;
        margin-inline: calc((100% - 100vw) / 2);
    }

    .author-view-page .reader-detail-page__menu,
    .critic-view-page .reader-detail-page__menu {
        width: calc(100% - (2 * var(--item-gap)));
    }

    .author-view-page .reader-detail-page__image,
    .critic-view-page .reader-detail-page__image {
        padding-inline: 0;
    }

    .reader-detail-page__header .header-center,
    .reader-detail-page__menu {
        width: calc(100% - (2 * var(--interface-edge-gap)));
    }

    .voice-acting-list-page .reader-detail-page__header .header-center,
    .voice-acting-list-page .reader-detail-page__menu {
        width: calc(100% - (2 * var(--contoured-item-gap)));
        max-width: none;
        margin-inline: var(--contoured-item-gap);
    }

    .reader-detail-page__summary {
        padding: 16px;
    }

    .review-view-page .review-critic-row {
        gap: 4px;
    }
}

@media (max-width: 360px) {
    .reader-detail-page__header .gray-button {
        font-size: 16px;
        padding-inline: 8px;
    }

    .review-view-page .button-critic-flex {
        font-size: 15px;
    }

    .reader-detail-page__summary {
        padding: 12px;
    }

    .book-rating-page .rating-split-progress__text--right {
        right: 6px;
    }

    .book-rating-page .rating-split-progress__text--left {
        left: 6px;
    }
}

.author-view-page > .reader-detail-page__header {
    top: var(--contoured-item-gap);
    margin: var(--contoured-item-gap) auto var(--contoured-item-gap);
}

.author-view-page .reader-detail-page__header .gray-button {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.author-view-page .reader-detail-page__body {
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
}

.author-view-page .reader-detail-page__menu {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    gap: var(--contoured-item-gap);
}

.author-view-page .reader-detail-page__image {
    flex: 0 0 auto;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.author-view-page .reader-detail-page__summary {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: var(--item-gap);
    padding-bottom: var(--item-gap);
}

.critic-view-page .reader-detail-page__body {
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
}

.critic-view-page .reader-detail-page__menu {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    gap: var(--contoured-item-gap);
}

.critic-view-page .reader-detail-page__image {
    flex: 0 0 auto;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.critic-view-page .reader-detail-page__summary {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: var(--item-gap);
    padding-bottom: var(--item-gap);
}

/* Keep desktop reader-detail views on the same centered content column as AuthorView. */
@media (min-width: 769px) and (min-aspect-ratio: 3 / 4) {
    .critic-view-page {
        padding-inline: 0;
    }

    .critic-view-page .reader-detail-page__header .header-center,
    .critic-view-page .reader-detail-page__menu,
    .review-view-page .reader-detail-page__header .header-center,
    .review-view-page .reader-detail-page__menu {
        width: var(--main-menu-width);
        max-width: 400px;
    }

    .review-view-page > .reader-detail-page__header,
    .review-view-page > .reader-detail-page__body,
    .review-view-page > .reader-detail-page__footer {
        width: 100%;
        margin-inline: 0;
    }
}

/* Unified vertical rhythm for menu-style screens */
.menu-wrapper > *,
.menu-wrapper > .header-center > *,
.header-container > *,
.fixed-header-container > *,
.header-center > * {
    margin-top: 0;
    margin-bottom: 0;
}

/* Components/Pages/UserPages/SelectLanguages.razor */
.select-languages-splash {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.select-languages-splash__image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.language-selector-bottom {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 4px);
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 1;
    transition: transform 0.4s ease;
}

.language-selector-bottom .menu-wrapper {
    gap: var(--contoured-item-gap);
}

.language-selector-bottom .blue-button {
    margin: 0;
}

@media (max-width: 768px) {
    .language-selector-bottom .menu-wrapper {
        width: calc(100% - (2 * var(--interface-edge-gap)));
    }
}

.language-selector-bottom.panel-hidden {
    transform: translateY(120%);
}

/* Global large typography */
:root {
    --app-large-universal-text-size: 32px;
    --app-large-text-size: var(--app-large-universal-text-size);
    --app-large-control-text-size: var(--app-large-universal-text-size);
    --app-large-heading-text-size: var(--app-large-universal-text-size);
    --app-large-compact-control-text-size: 30px;
    --line-input-font-size: var(--app-large-text-size);
}

html,
body,
body *:not(:where(
    .statistics-debug,
    .statistics-debug *,
    .chat-page-layout,
    .chat-page-layout *,
    .chat-date-filter-panel,
    .chat-date-filter-panel *,
    .reaction-picker-backdrop,
    .reaction-picker-backdrop *
)) {
    font-weight: 700 !important;
}

html,
body,
#page-container {
    font-size: var(--app-large-text-size);
}

body :where(
    p,
    span,
    label,
    a,
    li,
    dt,
    dd,
    th,
    td,
    output,
    legend,
    summary,
    figcaption,
    small,
    [class*="text"],
    [class*="Text"],
    [class*="label"],
    [class*="Label"],
    [class*="title"],
    [class*="Title"],
    [class*="caption"],
    [class*="Caption"],
    [class*="value"],
    [class*="Value"]
):not(:where(
    .statistics-debug,
    .statistics-debug *,
    .chat-page-layout,
    .chat-page-layout *,
    .chat-date-filter-panel,
    .chat-date-filter-panel *,
    .reaction-picker-backdrop,
    .reaction-picker-backdrop *
)) {
    font-size: var(--app-large-text-size) !important;
    line-height: 1.15;
}

body :where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .grey-header,
    .orange-header,
    .silverBlue-header
):not(:where(
    .statistics-debug,
    .statistics-debug *,
    .chat-page-layout,
    .chat-page-layout *,
    .chat-date-filter-panel,
    .chat-date-filter-panel *,
    .reaction-picker-backdrop,
    .reaction-picker-backdrop *
)) {
    font-size: var(--app-large-heading-text-size) !important;
    line-height: 1.1;
}

body :where(
    button,
    .btn,
    .btn-link,
    [class*="button"],
    [class*="Button"],
    [class*="btn"],
    [class*="Btn"]
):not(:where(
    .statistics-debug,
    .statistics-debug *,
    .chat-page-layout,
    .chat-page-layout *,
    .chat-date-filter-panel,
    .chat-date-filter-panel *,
    .reaction-picker-backdrop,
    .reaction-picker-backdrop *
)) {
    font-size: var(--app-large-control-text-size) !important;
    line-height: 1;
}

body :where(
    .footer-btn,
    .award-action-button,
    .message-actions-button,
    .timed-confirm-button,
    [class*="icon-button"],
    [class*="IconButton"]
):not(:where(
    .statistics-debug,
    .statistics-debug *,
    .chat-page-layout,
    .chat-page-layout *,
    .chat-date-filter-panel,
    .chat-date-filter-panel *,
    .reaction-picker-backdrop,
    .reaction-picker-backdrop *
)) {
    font-size: var(--app-large-compact-control-text-size) !important;
}

/* A fitted size is assigned only when this specific header overflows. */
:is(.orange-header, .grey-header) {
    font-size: var(--header-fitted-font-size, var(--app-large-heading-text-size)) !important;
    padding-inline: 2px;
    white-space: nowrap;
    overflow: hidden;
}

body :where(
    button,
    .btn,
    [class*="button"],
    [class*="Button"],
    [class*="btn"],
    [class*="Btn"]
):not(:where(
    .statistics-debug,
    .statistics-debug *,
    .chat-page-layout *,
    .chat-date-filter-panel *,
    .reaction-picker-backdrop *
)) :where(
    .marquee-text,
    [class*="text"],
    [class*="Text"]
) {
    font-size: var(--app-large-control-text-size) !important;
    line-height: 1;
}

body :where(
    .footer-btn,
    .award-action-button,
    .message-actions-button,
    .timed-confirm-button,
    [class*="icon-button"],
    [class*="IconButton"]
):not(:where(
    .statistics-debug,
    .statistics-debug *,
    .chat-page-layout *,
    .chat-date-filter-panel *,
    .reaction-picker-backdrop *
)) :where(
    .marquee-text,
    [class*="text"],
    [class*="Text"]
) {
    font-size: var(--app-large-compact-control-text-size) !important;
}

body :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea
):not(:where(
    .statistics-debug,
    .statistics-debug *,
    .chat-page-layout *,
    .chat-date-filter-panel *,
    .reaction-picker-backdrop *
)) {
    font-size: var(--app-large-text-size) !important;
    font-weight: 700 !important;
    line-height: 1.2;
}

.book-annotation__genres,
.book-annotation__genres *,
.book-annotation__summary .summary-label,
.book-annotation__summary .summary-label *,
.book-share-panel__url,
.book-share-panel__url *,
.summary-label.readable-surface--strong.readable-text,
.summary-label.readable-surface--strong.readable-text * {
    font-size: var(--reader-panel-text-size) !important;
}

/* Chat typography keeps the compact chat-specific sizing. */
.chat-page-layout,
.chat-date-filter-panel,
.reaction-picker-backdrop {
    font-size: 16px !important;
    font-weight: 400 !important;
}

.chat-page-layout {
    --line-input-font-size: 16px;
}

body:has(.chat-page-layout) :where(.delete-popup, .ban-status-sheet, .confirm-window, .add-line-content) {
    font-size: 16px !important;
    font-weight: 400 !important;
}

body:has(.chat-page-layout) :where(.delete-popup__button.rounded-box, .delete-popup__timer) {
    font-weight: 700 !important;
    line-height: 1 !important;
}

body:has(.chat-page-layout) .delete-popup__button.rounded-box {
    font-size: 18px !important;
}

body:has(.chat-page-layout) .delete-popup__timer {
    font-size: var(--footer-button-icon-size) !important;
}

body:has(.chat-page-layout) .ban-status-sheet__title {
    font-size: 20px !important;
    font-weight: 700 !important;
}

body:has(.chat-page-layout) .add-line-input {
    font-weight: 400 !important;
}

body .chat-input-find,
body .add-line-input,
body:has(.chat-page-layout) .add-line-input {
    font-size: var(--line-input-font-size) !important;
}

button:disabled,
button[disabled],
button.disabled,
button[class*="--disabled"],
button[class*="--inactive"],
[role="button"][aria-disabled="true"],
[class*="button"][aria-disabled="true"],
[class*="Button"][aria-disabled="true"],
[class*="btn"][aria-disabled="true"],
[class*="Btn"][aria-disabled="true"] {
    border-color: #000000 !important;
}

/* Shared responsive shell for Components/Pages/AdminPages. */
.admin-page-layout {
    --admin-page-item-gap: var(--double-item-gap);
    --admin-media-object-gap: calc(4 * var(--item-gap));
    --admin-yellow-caption-gap-adjustment: calc(var(--item-gap) - var(--admin-page-item-gap));
    --grey-background: var(--admin-inactive-background);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Administrative neutral surfaces use the lighter gray palette without
   changing shared controls on user and author pages. */
.admin-page-layout button:disabled:not(.award-action-button--pending):not(.timed-confirm-button--ready),
.admin-page-layout button.disabled:not(.award-action-button--pending):not(.timed-confirm-button--ready),
.admin-page-layout button[class*="--disabled"]:not(.award-action-button--pending):not(.timed-confirm-button--ready),
.admin-page-layout button[class*="--inactive"]:not(.award-action-button--pending):not(.timed-confirm-button--ready) {
    background-color: var(--admin-inactive-background);
    color: #000000;
}

.admin-page-layout :is(
    .grey-header,
    .gray-button,
    .gray-button-for-reader,
    .light-gray-button-for-moder,
    .icon-circle--gray,
    .wallpaper-select-button--selected,
    .age-option-button-active,
    .reader-action-line__label,
    .promo-option-button--selected,
    .visibility-toggle-button--gray,
    .photo-placeholder.disabled,
    .timed-confirm-button--countdown,
    .format-line--disabled,
    .statistics-line .right-button:disabled,
    .statistics-line .right-button[disabled]
) {
    background-color: var(--admin-inactive-background);
    color: #000000;
}

.admin-page-layout .grey-header .marquee-text,
#page-container.page--with-wallpaper .admin-page-layout .grey-header .marquee-text {
    color: #000000;
    text-shadow: none;
}

.admin-page-layout > .page-layout {
    grid-row: 1 / -1;
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    box-sizing: border-box;
}

.admin-page-layout .footer-container-host {
    margin-top: var(--double-item-gap);
}

.admin-page-layout :where(
    .header-container,
    .fixed-header-container,
    .middle-container,
    .footer-container-host,
    .header-center,
    .menu-wrapper,
    .menu-wrapper-horizontal,
    .stackpanel,
    .stackpanel-horizontal,
    .photo-container,
    .editor-row
) {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.admin-page-layout :where(.header-container, .fixed-header-container, .menu-wrapper, .stackpanel),
.admin-page-layout :where(.admin-flex-column-center, .admin-flex-column-center-items) {
    gap: var(--admin-page-item-gap);
}

/* CursorWindow wraps editor rows in its own item containers, so the parent
   menu gap cannot separate consecutive delete lines. */
.admin-page-layout .cursor-window__item + .cursor-window__item {
    margin-top: var(--admin-page-item-gap);
}

/* Keep the final orange page header one double standard gap above its content. */
.admin-page-layout :is(.header-container, .fixed-header-container):has(> .orange-header:last-child),
.admin-page-layout :is(.header-container, .fixed-header-container):has(> .header-center:last-child > .orange-header:last-child) {
    margin-bottom: var(--double-item-gap);
}

.admin-page-layout :where(.menu-wrapper-horizontal, .stackpanel-horizontal, .photo-container, .editor-row) {
    row-gap: var(--admin-page-item-gap);
}

/* Keep the existing spacing inside one media editor object while separating
   consecutive logical objects by four standard gaps (16px). */
.admin-page-layout .admin-media-object {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.admin-page-layout .admin-media-object-sequence > .admin-media-object + .admin-media-object {
    margin-top: calc(var(--admin-media-object-gap) - var(--admin-page-item-gap));
}

/* Yellow captions are optically shifted down and use a negative block margin.
   Neutralize that adjustment only at an inter-object boundary so the measured
   distance from the previous control remains exactly 16px. */
.admin-page-layout .admin-media-object-sequence > .admin-media-object + .admin-media-object
    .admin-media-object-start-caption {
    margin-top: calc(0px - (var(--item-gap) / 2));
}

.admin-page-layout .ordinary-center-text-yellow.admin-media-following-caption {
    margin-top: calc(var(--admin-media-object-gap) - var(--admin-page-item-gap) - (var(--item-gap) / 2));
}

/* Keep eight visible pixels around the rental caption at the large heading size. */
.admin-page-layout .ordinary-center-text-yellow.banner-rental-caption {
    margin-top: calc(0px - var(--admin-page-item-gap));
    margin-bottom: calc((var(--item-gap) / 2) - var(--double-item-gap));
}

.admin-page-layout .admin-media-following-control {
    margin-top: calc(var(--admin-media-object-gap) - var(--admin-page-item-gap));
}

/* Nested administrative sections that are block containers in their base styles
   still participate in the same vertical rhythm as menu-wrapper. */
.admin-page-layout :where(
    .audio-picture-creator-editor-center,
    .books-list-view,
    .language-selector
) {
    display: flex;
    flex-direction: column;
    row-gap: var(--admin-page-item-gap);
    width: 100%;
    min-width: 0;
}

/* Yellow captions have no contour, so their separation uses the base vertical
   gap while stacked administrative controls retain the full administrative gap. */
.admin-page-layout .ordinary-center-text-yellow {
    margin-block: var(--admin-yellow-caption-gap-adjustment);
}

.admin-page-layout :is(.orange-header, .ordinary-center-text-yellow) {
    text-transform: uppercase;
}

/* These editor sections use the full administrative gap around their primary
   captions while nested rating captions keep the standard yellow-caption rhythm. */
.admin-page-layout :is(
    .author-editor-page,
    .avatar-editor-page,
    .avatar-group-editor-page
) > .header-container {
    margin-bottom: var(--double-item-gap);
}

.admin-page-layout :is(
    .avatar-editor-page,
    .avatar-group-editor-page
) > .middle-container > .menu-wrapper > .header-center > .ordinary-center-text-yellow {
    margin-block: 0;
}

/* An orange header followed by a yellow caption uses the double standard gap. */
.header-container > .header-center:has(> .orange-header) + .header-center > .ordinary-center-text-yellow {
    margin-top: calc(var(--double-item-gap) - var(--contoured-item-gap));
}

.admin-page-layout .header-container > .header-center:has(> .orange-header) + .header-center > .ordinary-center-text-yellow {
    /* The label line box has a six-pixel top inset. Leave a two-pixel box gap
       after the header so the visible text starts eight pixels below it. */
    margin-top: calc(var(--standard-contour-width) - var(--admin-page-item-gap));
}

.admin-page-layout .header-container:has(> .header-center:has(> .orange-header) + .header-center > .ordinary-center-text-yellow) {
    margin-bottom: calc(var(--admin-page-item-gap) - var(--item-gap) + var(--double-item-gap));
}

.admin-page-layout :where(
    .blue-button,
    .yellow-button,
    .yellow-button-selected,
    .gray-button,
    .gray-button-for-reader,
    .light-gray-button-for-moder,
    .statistics-line,
    .format-line,
    .language-row
) {
    margin-top: 0;
    margin-bottom: 0;
}

.admin-page-layout :where(
    .info-editor-item,
    .photo-container-column-center,
    .photo-container-column-center-relative
) {
    gap: var(--admin-page-item-gap);
}

.admin-page-layout .avatar-sex-columns .admin-flex-column-center {
    gap: var(--admin-page-item-gap);
}

/* Multi-part administrative controls follow the same rhythm as stacked page items. */
.admin-page-layout :where(
    .formats-toggles,
    .avatar-sex-columns,
    .prize-language-row,
    .avatars-list-group-row,
    .top100-icon-grid,
    .wallpaper-selection__mode-switch,
    .author-editor-footer-actions,
    .black-list-control,
    .time-control,
    .statistics-line,
    .rounded-box,
    .user-overview-wrapper,
    .user-overview-bans,
    .user-overview-profile,
    .user-overview-grid,
    .user-overview-row,
    .info-pill,
    .info-pill--stat
) {
    gap: var(--admin-page-item-gap);
}

.admin-page-layout .stackpanel-horizontal.admin-justify-space-between,
.admin-page-layout .photo-container:not(.photo-container-column-center):not(.photo-container-column-center-relative) {
    justify-content: center;
    gap: var(--admin-page-item-gap);
}

.admin-page-layout .spacer-width-8 {
    flex: 0 0 var(--admin-page-item-gap);
    width: var(--admin-page-item-gap);
    min-width: var(--admin-page-item-gap);
}

.admin-page-layout .visibility-sortable-line {
    gap: 0;
}

.admin-page-layout .info-editor-item,
.admin-page-layout .editor-row--spaced,
.admin-page-layout .avatar-sex-columns--with-margin,
.admin-page-layout .present-exclusive-plus,
.admin-page-layout .mood-statistics-date-filter {
    margin-bottom: 0;
}

.admin-page-layout .editor-row-button--raised,
.admin-page-layout .avatar-editor-group-name-wrap,
.admin-page-layout .avatar-sex-button,
.admin-page-layout .present-language-caption,
.admin-page-layout .present-language-button,
.admin-page-layout .mood-statistics-progress,
.admin-page-layout .awards-options-menu {
    margin-top: 0;
}

.admin-page-layout .avatar-editor-group-name-wrap,
.admin-page-layout .avatar-sex-button {
    margin-bottom: 0;
}

.admin-page-layout .admin-vertical-margin {
    display: flex;
    flex-direction: column;
    gap: var(--admin-page-item-gap);
    margin-top: 0;
    margin-bottom: 0;
}

.admin-page-layout .formats-toggles,
.admin-page-layout .avatar-sex-columns,
.admin-page-layout .top100-page,
.admin-page-layout .top100-icon-grid {
    row-gap: var(--admin-page-item-gap);
}

.admin-page-layout .statistics-chart-container {
    padding-top: var(--admin-page-item-gap);
    padding-bottom: var(--admin-page-item-gap);
}

.admin-page-layout .admin-panel-body {
    padding-top: var(--item-gap);
}

.admin-page-layout .admin-panel-body .menu-wrapper {
    gap: var(--admin-page-item-gap);
}

.admin-page-layout :where(
    button,
    input,
    select,
    textarea,
    img,
    video,
    canvas,
    svg
) {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Keep every administrative action icon aligned with the footer-button standard. */
.admin-page-layout {
    --admin-round-icon-inset: max(
        0px,
        calc(
            (var(--footer-button-size) - var(--footer-button-icon-size) - (2 * var(--standard-contour-width))) / 2
        )
    );
}

.admin-page-layout button:not(.black-list-control__action-button--site) > img:not(.button-icon):not(.editor-row-eye):not(.eye-blue-button__icon):not(.eye-yellow-button__icon):not(.right-button__icon):not(.top100-icon-image),
.admin-page-layout :is(
    .avatar-sex-button,
    .ban-title__icon,
    .format-line__circle,
    .grey-counter-flag__icon-circle,
    .icon-circle,
    .line-item__circle,
    .rounded-box__icon-circle,
    .vertical-circle,
    .voice-line .status-circle
) > img {
    width: var(--footer-button-icon-size);
    min-width: var(--footer-button-icon-size);
    max-width: var(--footer-button-icon-size);
    height: var(--footer-button-icon-size);
    min-height: var(--footer-button-icon-size);
    max-height: var(--footer-button-icon-size);
    padding: 0;
    box-sizing: border-box;
    object-fit: contain;
}

.admin-page-layout :is(
    img.editor-row-eye,
    img.eye-blue-button__icon
) {
    width: var(--footer-button-size);
    min-width: var(--footer-button-size);
    max-width: var(--footer-button-size);
    height: var(--footer-button-size);
    min-height: var(--footer-button-size);
    max-height: var(--footer-button-size);
    padding: var(--admin-round-icon-inset);
    box-sizing: border-box;
    object-fit: contain;
}

.admin-page-layout .crossed-eye-icon__image {
    padding: var(--admin-round-icon-inset);
}

.admin-page-layout .avatar-sex-button {
    width: var(--footer-button-size);
    min-width: var(--footer-button-size);
    height: var(--footer-button-size);
    min-height: var(--footer-button-size);
    flex: 0 0 var(--footer-button-size);
}

.admin-page-layout .book-cover .icon {
    --book-cover-icon-size: var(--footer-button-size);
}

.admin-page-layout .cabinet-button {
    background-size: auto var(--footer-button-icon-size);
}

.admin-page-layout :is(
    .book-button__icon,
    .book-list-row-control__slider,
    .chapter-raw__circle,
    .checkbox-with-button-icon,
    .social-progress__icon,
    .visibility-order-button,
    .visibility-toggle-button
) {
    background-size: var(--footer-button-icon-size) var(--footer-button-icon-size);
}

.admin-page-layout .statistics-chart-page .statistics-chart-surface {
    display: grid;
    grid-template-areas: "chart";
    width: max-content;
    min-width: max(100%, 320px);
    max-width: none;
    overflow: visible;
}

.admin-page-layout .statistics-chart-width-track {
    grid-area: chart;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--statistics-chart-column-width);
    align-self: start;
    width: max-content;
    height: 1px;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

.admin-page-layout .statistics-chart-plot {
    grid-area: chart;
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    contain: size layout;
}

.admin-page-layout .statistics-chart-y-axis {
    grid-area: chart;
}

.admin-page-layout .statistics-chart-page .statistics-chart-surface > .statistics-chart-width-track {
    height: 1px;
}

.admin-page-layout .statistics-chart-page .statistics-chart-surface > .statistics-chart-plot,
.admin-page-layout .statistics-chart-page .statistics-chart-plot > * {
    width: 100%;
    height: 100%;
}

@media (max-width: 768px) {
    #page-container main article.content:has(> .admin-page-layout) {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: hidden;
    }

    .admin-page-layout,
    .admin-page-layout > .page-layout,
    .admin-page-layout :where(.header-container, .fixed-header-container, .middle-container) {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .admin-page-layout .footer-container-host {
        width: var(--main-menu-width);
        max-width: 400px;
        min-width: 0;
        margin-inline: auto;
    }

    .admin-page-layout .menu-wrapper {
        width: min(400px, calc(100% - (2 * var(--interface-edge-gap))));
        max-width: 400px;
        min-width: 0;
    }

    .admin-page-layout .genres-list-language-item {
        width: 100%;
    }

    .admin-page-layout :where(.header-center, .grey-header, .orange-header, .silverBlue-header) {
        width: var(--main-menu-width);
        max-width: 400px;
        min-width: 0;
    }

    .admin-page-layout :where(.editor-row, .author-editor-line-row, .prize-language-row, .avatars-list-group-row) {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .admin-page-layout :where(.editor-row-button, .author-editor-main-button, .prize-language-button, .avatars-list-group-open) {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        max-width: 100%;
    }

    .admin-page-layout .formats-toggles {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        column-gap: var(--admin-page-item-gap);
    }

    .admin-page-layout .format-btn {
        width: 100%;
        min-width: 0;
    }

    .admin-page-layout :where(.avatar-sex-columns, .photo-container) {
        flex-wrap: wrap;
    }

    .admin-page-layout .avatar-sex-columns {
        column-gap: var(--admin-page-item-gap);
    }

    .admin-page-layout :where(.statistics-chart-container, .statistics-chart-scroll, .awards-grid-row, .top100-icon-grid) {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .admin-page-layout .statistics-chart-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
    }
}

/* Text-entry controls do not use the Bootstrap focus ring. */
body :where(
    input:not([type="button"]):not([type="checkbox"]):not([type="color"]):not([type="file"]):not([type="image"]):not([type="radio"]):not([type="range"]):not([type="reset"]):not([type="submit"]),
    textarea
):focus {
    outline: none;
    box-shadow: none !important;
}

/* Keep ordinary menu content within the same responsive boundary as menu-wrapper. */
.menu-wrapper > * {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.menu-wrapper :is(
    .cursor-window,
    .cursor-window__item,
    .books-list-view,
    .book-list-row,
    .book-list-row-control,
    .book-title-button-wrapper,
    .dated-book-list-row
) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Showcase and Top-100 catalog controls use the same width and centering as menu-wrapper. */
.books-scroll {
    left: 50%;
    right: auto;
    width: var(--main-menu-width);
    max-width: 400px;
    min-width: 0;
    box-sizing: border-box;
    transform: translateX(-50%);
}

/* At the desktop menu width, four or more actions align with the menu edges. */
@media (min-width: 432px) {
    .footer-buttons.fixed:has(> .footer-button-item:nth-child(4)) {
        justify-content: space-between;
    }
}

@media (max-width: 768px) {
    .books-scroll {
        padding-left: 0;
        padding-right: 0;
    }
}

.avatar-audience-menu {
    min-height: 100%;
}

.avatar-audience-user {
    min-width: 0;
}

.avatar-audience-sentinel {
    height: 1px;
    min-height: 1px;
    pointer-events: none;
}

.avatar-audience-list-state {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: var(--item-gap);
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: center;
}

button.avatar-audience-list-state {
    cursor: pointer;
}

/* Keep the scroll viewport above fixed search, deletion and add-input panels. The footer
   already occupies part of this space; overlapping panels must not add it twice. */
body:has(.search-container:not(.search-container--chat), .delete-popup, .add-line-content) .footer-container-host--fixed {
    margin-top: max(var(--double-item-gap), calc(var(--fixed-panel-content-bottom) - var(--fixed-footer-buttons-height)));
}

body:has(.delete-popup, .add-line-content) .chat-page-layout > .footer-container-host {
    margin-top: max(calc(var(--double-item-gap) - var(--contoured-item-gap)), calc(var(--fixed-panel-content-bottom) - var(--chat-footer-buttons-height)));
}

body:has(.search-container:not(.search-container--chat), .delete-popup, .add-line-content) .books-scroll {
    bottom: max(
        calc(var(--bot-ban-h) + var(--bottom-offset) + var(--search-h) + min(var(--contoured-item-gap), var(--bot-ban-h))),
        var(--fixed-panel-content-bottom));
}

.editable-list-header > .menu-wrapper {
    width: var(--main-menu-width);
    flex-shrink: 0;
}

/* AddLineInput hides the desktop footer, so the body owns its reservation. */
@media (min-width: 769px) {
    body.add-line-active:has(.add-line-content) .middle-container {
        margin-bottom: var(--fixed-panel-content-bottom);
    }
}

@media (max-width: 768px) {
    html.mobile-input-viewport-active:not(.mobile-input-keyboard-visible) body:has(.add-line-content) {
        --add-line-content-bottom: calc(var(--fixed-footer-buttons-height) + var(--item-gap) + var(--footer-button-size) + var(--double-item-gap));
    }

    html.mobile-input-keyboard-visible body:has(.search-container:not(.search-container--chat)) {
        --fixed-search-content-bottom: calc(var(--item-gap) + var(--footer-button-size) + var(--double-item-gap));
    }

    html.mobile-input-keyboard-visible body:has(.delete-popup) {
        --delete-popup-content-bottom: max(0px, calc(var(--fixed-footer-buttons-height) + var(--footer-button-size) + (2 * var(--double-item-gap)) - var(--mobile-input-footer-offset, 0px)));
    }

    html.mobile-input-keyboard-visible body:has(.search-container:not(.search-container--chat), .delete-popup, .add-line-content) .footer-container-host--fixed {
        margin-top: var(--fixed-panel-content-bottom);
    }

    html.mobile-input-keyboard-visible body:has(.search-container:not(.search-container--chat), .add-line-content) .books-scroll {
        bottom: calc(var(--mobile-input-footer-offset, 0px) + var(--fixed-panel-content-bottom));
    }

    /* The chat footer leaves normal flow while the keyboard is open. */
    html.mobile-input-keyboard-visible body:has(.add-line-content) .middle-container.chat-page__main {
        margin-bottom: var(--fixed-panel-content-bottom);
    }
}

/* Every shared Marquee owns the same eight-pixel safe zone. Remove horizontal
   host padding where it would otherwise be added on top of that inset. */
:is(
    .blue-button,
    .yellow-button,
    .gray-button,
    .gray-button-for-reader,
    .grey-header
):has(> .marquee-viewport) {
    padding-inline: 0;
}

:is(
    .book-share-panel__url,
    .reader-action-line__label
):has(> .marquee-viewport),
.present-exclusive-plus:has(.present-exclusive-marquee > .marquee-viewport) {
    padding-inline: 0;
}

.present-exclusive-marquee:has(> .marquee-viewport) {
    display: block;
    width: 100%;
    min-width: 0;
}

/* The checkbox circle overlays the button. Marquee supplies the extra 8px;
   the button therefore reserves only the occupied circular area. */
.checkbox-with-button-container:has(.checkbox-with-button-text > .marquee-viewport) > .blue-button {
    padding-left: calc(var(--checkbox-with-button-size) - var(--standard-contour-width));
    padding-right: 0;
}

.checkbox-with-button-container:has(> .checkbox-with-button-badge):has(.checkbox-with-button-text > .marquee-viewport) > .blue-button,
.checkbox-with-button-container:not(:has(> .checkbox-with-button-badge)):has(.checkbox-with-button-text > .marquee-viewport:not(.marquee-viewport--animated)) > .blue-button {
    padding-right: calc(var(--checkbox-with-button-size) - var(--standard-contour-width));
}

/* Keep the viewport stable across marquee states. The static track mirrors the
   trailing icon so short labels stay centered without changing overflow width. */
:is(.eye-yellow-button--with-eye, .eye-blue-button--with-eye):not(.line-item__main)
    > :is(.eye-yellow-button__text, .eye-blue-button__text) > .marquee-viewport {
    --marquee-overflow-reserve: var(--eye-button-icon-content-overlap);
}

:is(.eye-yellow-button--with-eye, .eye-blue-button--with-eye):not(.line-item__main)
    > :is(.eye-yellow-button__text, .eye-blue-button__text)
    > .marquee-viewport:not(.marquee-viewport--animated) > .marquee-track {
    width: max(0px, calc(100% - var(--marquee-overflow-reserve)));
    margin-left: var(--marquee-overflow-reserve);
}

/* VoiceLine circles are overlaid on both ends of the yellow button. */
.voice-line .voice-line-main-button:has(> .marquee-viewport) {
    padding-inline: calc(var(--voice-line-circle-size) + var(--standard-contour-width));
}


/* The wallpaper remains behind the page without inline styles. */
#page-container.page--with-wallpaper { background-color: #7092be; }
#page-container.page--admin { background-color: var(--grey-background); }
#page-container.page--with-wallpaper > .page-wallpaper { position: absolute; inset: 0; height: 100dvh; overflow: hidden; pointer-events: none; z-index: 0; }
.page-wallpaper > img { position: absolute; left: 50%; transform: translateX(-50%); height: 100dvh; width: auto; max-width: none; }