.tbv[hidden]{display:none}.tbv{position:fixed;inset:0;z-index:1600;background:color-mix(in srgb,#08120f 72%,transparent);backdrop-filter:blur(16px);display:grid;place-items:center;padding:18px}.tbv__panel{width:min(1500px,100%);height:min(940px,100%);background:var(--paper,#fff);color:var(--ink,#17201d);border:1px solid var(--line,#dce4df);border-radius:24px;box-shadow:0 28px 90px #0006;display:grid;grid-template-rows:auto 1fr;overflow:hidden}.tbv__bar{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line,#dce4df);background:color-mix(in srgb,var(--paper,#fff) 88%,var(--accent,#22935c) 12%)}.tbv__title{font-weight:760;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:auto}.tbv__bar button{min-width:42px;min-height:42px;border:1px solid var(--line,#dce4df);border-radius:12px;background:var(--paper,#fff);color:inherit;font:inherit;cursor:pointer}.tbv__page{font-variant-numeric:tabular-nums;white-space:nowrap}.tbv__layout{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 290px}.tbv__stage{min-width:0;min-height:0;overflow:auto;background:#dfe4e1;padding:28px;display:grid;place-items:start center}.tbv__sheet{position:relative;background:#fff;box-shadow:0 8px 32px #17201d30;touch-action:none}.tbv__sheet canvas{display:block;max-width:none}.tbv__marks{position:absolute;inset:0}.tbv__mark{position:absolute;border:2px solid #d89b00;background:#ffd84d42;border-radius:5px;box-shadow:0 0 0 2px #fff9;animation:tbv-focus 1.2s ease-out}.tbv__mark--draft{border-style:dashed;background:#ffd84d66}.tbv__side{min-height:0;overflow:auto;border-left:1px solid var(--line,#dce4df);padding:18px;background:var(--paper,#fff)}.tbv__side h3{margin:0 0 8px;font-size:1rem}.tbv__note{white-space:pre-wrap;color:var(--ink-soft,#66706c);font-size:.9rem;line-height:1.5}.tbv__hint{font-size:.82rem;color:var(--ink-soft,#66706c);line-height:1.45}.tbv__list{display:grid;gap:8px;margin:14px 0}.tbv__jump{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;border:1px solid var(--line,#dce4df);border-radius:12px;background:transparent;color:inherit;text-align:left;cursor:pointer}.tbv__jump span{margin-right:auto}.tbv__drop{border:0;background:transparent;color:#b13b38;font-size:1.1rem;cursor:pointer}.tbv__save{width:100%;min-height:44px;border:0;border-radius:13px;background:var(--accent,#22935c);color:white;font:inherit;font-weight:700;cursor:pointer}.tbv__empty{color:var(--ink-soft,#66706c);font-size:.88rem}.tbv__loading{margin:auto;color:#43504a}.tbv__counter{font-size:.82rem;color:var(--ink-soft,#66706c)}@keyframes tbv-focus{0%{box-shadow:0 0 0 10px #ffd84d80}100%{box-shadow:0 0 0 2px #fff9}}@media(max-width:760px){.tbv{padding:0}.tbv__panel{height:100%;border-radius:0}.tbv__layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}.tbv__stage{padding:14px}.tbv__side{border-left:0;border-top:1px solid var(--line,#dce4df);max-height:230px;padding:12px 14px}.tbv__bar{gap:6px;padding:8px}.tbv__title{font-size:.9rem}.tbv__bar button{min-width:38px;min-height:38px}}
@media(prefers-reduced-motion:reduce){.tbv__mark{animation:none}}
.tbv__bar button[hidden]{display:none}.tbv__stage{place-items:safe center}.tbv--embedded .tbv__bar{flex-wrap:wrap;gap:7px;padding:9px 12px}.tbv--embedded .tbv__bar button{min-width:34px;min-height:34px;border-radius:9px;font-size:14px}.tbv--embedded .tbv__title{font-size:14px}.tbv--embedded .tbv__page{font-size:14px}.tbv--embedded .tbv__stage{padding:16px}.tbv__layout:has(.tbv__side:empty){grid-template-columns:1fr;grid-template-rows:minmax(0,1fr)}.tbv__side:empty{display:none}

.tbv__panel{position:relative}.tbv__bar{flex-wrap:wrap}.tbv__bar button{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;width:38px;min-width:38px!important;padding:0}.tbv__bar button:hover,.tbv__bar button:focus-visible{background:#f2c94c!important;color:#193727!important;border-color:#e8b933!important}.tbv__bar button[aria-pressed=true]{background:#237a56;color:#fff}.tbv__bar [data-close]{order:10;background:var(--paper,#1b2c24);color:var(--ink,#edf3eb);border-color:var(--line,#35473d);margin-left:3px}.tbv__bar [data-zoom]{width:58px;font-size:13px}.tbv__title{font-size:16px!important;cursor:pointer;padding:8px 4px}.tbv__info[hidden],.tbv__thumbs[hidden]{display:none!important}.tbv__info{position:absolute;z-index:5;top:65px;left:18px;width:min(330px,calc(100% - 36px));padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--paper,#193127);box-shadow:0 12px 40px #0005;font-size:15px}.tbv__info img{width:65px;max-height:100px;object-fit:contain;float:left;margin:0 14px 10px 0}.tbv__info h3{font-size:18px;margin:0 0 10px}.tbv__thumbs{overflow:auto;min-height:0;padding:12px;background:var(--paper,#193127);display:flex;flex-direction:column;gap:12px}.tbv__thumbs button{border:1px solid var(--line);border-radius:8px;background:transparent;color:inherit;flex-shrink:0;min-height:125px;padding:6px;cursor:pointer}.tbv__thumbs canvas{width:100px;display:block;margin:0 auto 5px}.tbv__thumbs button[aria-current=true]{border:2px solid #dda928;background:#f2c94c20}.tbv__layout:has(.tbv__thumbs:not([hidden])){grid-template-columns:132px minmax(0,1fr) 290px}.tbv__layout:has(.tbv__thumbs:not([hidden])):has(.tbv__side:empty){grid-template-columns:132px minmax(0,1fr)}.tbv__stage--continuous{display:flex!important;flex-direction:column;align-items:safe center;gap:22px;scroll-behavior:auto}.tbv__stage--continuous .tbv__sheet{flex-shrink:0}.tbv__marks{touch-action:none}.tbv__bar button[hidden]{display:none!important}@media(max-width:760px){.tbv__layout:has(.tbv__thumbs:not([hidden])):has(.tbv__side:empty){grid-template-columns:105px minmax(0,1fr)}.tbv__thumbs canvas{width:75px}.tbv__title{flex-basis:calc(100% - 50px);white-space:nowrap}.tbv__bar{gap:4px!important}.tbv__info{top:110px}.tbv__layout:has(.tbv__thumbs:not([hidden])):not(:has(.tbv__side:empty)){grid-template-columns:105px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}.tbv__side:not(:empty){grid-column:1/-1}}

.tbv__bar [data-close]:hover{background:#8e3030!important;color:#fff!important;border-color:#b94545!important}

/* Узкая панель: всё в одну строку, без переноса на третий ряд. Что не
   помещается, уезжает в меню «Ещё» (tbv__more), а не за край экрана. */
.tbv__bar, .tbv--embedded .tbv__bar { flex-wrap: nowrap; overflow: visible; min-width: 0; }
.tbv__panel { min-width: 0; max-width: 100%; }
.tbv__title { flex: 0 1 auto; min-width: 0; }
.tbv__bar button { flex: none; }
.tbv__more[hidden] { display: none !important; }
.tbv__menu {
  position: absolute; top: 58px; right: 10px; z-index: 30;
  display: grid; gap: 2px; min-width: 232px; padding: 6px;
  border: 1px solid var(--line, #dce4df); border-radius: 14px;
  background: var(--paper, #fff); box-shadow: 0 18px 44px #0003;
}
.tbv__menu[hidden] { display: none; }
.tbv__menu button {
  display: flex !important; align-items: center; gap: 10px;
  width: 100% !important; min-width: 0 !important; height: auto !important;
  padding: 9px 11px !important; border: 0 !important; border-radius: 9px !important;
  background: transparent !important; color: var(--ink, #17201d) !important;
  justify-content: flex-start !important; font: inherit;
}
.tbv__menu button { font-size: 0 !important; }
.tbv__menu button::after { content: attr(data-label); flex: 1; font-size: 14px; text-align: left; }
.tbv__menu button svg { flex: none; }
.tbv__menu button:hover { background: color-mix(in srgb, var(--ink, #17201d) 8%, transparent) !important; }
/* Миниатюра страницы не вылезает за рамку выделения: у выбранной страницы
   рамка толще, и без border-box холст выезжал за неё. */
.tbv__thumbs button { box-sizing: border-box; width: 100%; }
.tbv__thumbs canvas { width: 100%; max-width: 100px; height: auto; }

@media (max-width: 760px) {
  /* На телефоне названия в панели нет: место нужно кнопкам, а сведения о
     материале открываются строкой «О книге» в меню «…». */
  .tbv__title { display: none; }
  .tbv__menu { right: 6px; left: 6px; min-width: 0; }
}