/* ============ Layout & component styles ============ */

/* ---------- App shell ---------- */
.shell { display: flex; height: 100%; overflow: hidden; }

.sidebar {
  width: var(--sidebar-w); flex: none; height: 100%;
  background: var(--paper-2); border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  transition: width .22s cubic-bezier(.4,0,.2,1);
}
.sidebar__brand { display: flex; align-items: center; gap: 11px; padding: 18px 18px 14px; }
.logo-btn { border: none; background: none; padding: 0; cursor: pointer; border-radius: 12px; flex: none; transition: transform .15s; }
.logo-btn:hover { transform: scale(1.05); }
.logo-btn:active { transform: scale(.95); }
.sidebar__logo { width: 38px; height: 38px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-sm); }
.sidebar__brand h1 { font-size: 15px; line-height: 1.15; font-weight: 400; white-space: nowrap; }
.sidebar__brand p { font-size: 11px; color: var(--ink-3); margin: 1px 0 0; font-weight: 400; white-space: nowrap; }

.sidebar__nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 12px 16px; }
.navsec { font-size: 10.5px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); padding: 14px 12px 6px; white-space: nowrap; }
.nav-divider { height: 1px; background: var(--line); margin: 12px 10px; }
.navitem {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 12px; border-radius: 11px; border: none; background: transparent;
  color: var(--ink-2); font-size: 13.5px; font-weight: 400; text-align: left;
  transition: background .13s, color .13s; position: relative; margin-bottom: 1px;
}
.navitem .nav-lbl { white-space: nowrap; overflow: hidden; }
.navitem svg { color: var(--ink-3); transition: color .13s; flex: none; }
.navitem:hover { background: #E2E2E2; color: var(--ink); }
.navitem:hover svg { color: var(--ink-2); }
.navitem.active { background: var(--pri-soft); color: var(--pri-ink); }
.navitem.active svg { color: var(--pri); }
.navitem .nav-count { margin-left: auto; font-size: 11px; font-weight: 400; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); border-radius: 99px; padding: 1px 7px; }
.navitem.active .nav-count { background: var(--surface); border-color: var(--pri-soft-2); color: var(--pri-ink); }
.navsub { margin: 1px 0 4px 34px; display: flex; flex-direction: column; gap: 1px; }
.navsub button { text-align: left; background: none; border: none; padding: 7px 12px; border-radius: 9px; font-size: 13px; font-weight: 400; color: var(--ink-3); }
.navsub button:hover { background: #E2E2E2; color: var(--ink); }
.navsub button.active { color: var(--pri-ink); background: var(--pri-soft); }

.sidebar__user { border-top: 1px solid var(--line); padding: 12px; display: flex; align-items: center; gap: 10px; }
.sidebar__user .ava { width: 34px; height: 34px; }
.sidebar__user .nm { font-size: 13px; font-weight: 400; }
.sidebar__user .rl { font-size: 11px; color: var(--ink-3); }
.sidebar-balance {
  margin: 0 12px 10px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 13px;
  background: var(--surface); color: var(--ink);
  display: flex; align-items: center; gap: 10px;
  text-align: left; box-shadow: var(--sh-xs);
}
.sidebar-balance:hover { background: var(--paper-2); border-color: #C8C8C8; }
.sidebar-balance > svg { color: var(--pri); flex: none; }
.sidebar-balance__txt { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.sidebar-balance__txt span { font-size: 11px; color: var(--ink-3); }
.sidebar-balance__txt b { font-size: 14px; font-weight: 400; color: var(--ink); }

/* ---------- Collapsed sidebar (mini rail) ---------- */
.sidebar.collapsed { width: var(--sidebar-w-collapsed); }
.sidebar.collapsed .sidebar__brand { justify-content: center; padding: 18px 0 14px; }
.sidebar.collapsed .sidebar__nav { padding: 6px 14px 16px; }
.sidebar.collapsed .navitem { justify-content: center; padding: 11px 0; gap: 0; }
.sidebar.collapsed .navitem .nav-lbl,
.sidebar.collapsed .navitem .nav-count { display: none; }
.sidebar.collapsed .sidebar-balance { width: 48px; height: 48px; margin: 0 auto 10px; justify-content: center; padding: 0; }
.sidebar.collapsed .sidebar__user { justify-content: center; padding: 12px 0; }

/* ---------- Main column ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; }
.topbar {
  height: var(--topbar-h); flex: none; border-bottom: 1px solid var(--line);
  background: rgba(250,249,244,0.82); backdrop-filter: blur(8px);
  display: flex; align-items: center; gap: 16px; padding: 0 26px; z-index: 5;
}
.topbar__title h2 { font-size: 18px; font-weight: 400; }
.topbar__title .crumb { font-size: 12px; color: var(--ink-3); font-weight: 400; }
.topbar__spacer { flex: 1; }
.topbar__order { display: flex; align-items: center; gap: 10px; margin-right: 2px; padding-right: 14px; border-right: 1px solid var(--line); }
.topbar__ring { flex: none; display: flex; }
/* дублирующий ряд этапов заказа в topbar */
.topbar-otabs { display: flex; align-items: center; gap: 2px; max-width: 100%; overflow-x: auto; padding: 2px; }
.topbar-otab { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border: none; background: transparent;
  border-radius: 8px; font-size: 12.5px; font-weight: 400; color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.topbar-otab svg { color: var(--ink-4); }
.topbar-otab:hover { background: var(--paper-2); color: var(--ink); }
.topbar-otab.active { background: var(--pri-soft); color: var(--pri-ink); }
.topbar-otab.active svg { color: var(--pri); }
/* поиск в сайдбаре */
.sidebar-search { position: relative; padding: 0 12px 6px; }
.sidebar-search .searchbox--side { width: 100%; max-width: 100%; box-sizing: border-box; padding: 9px 12px; box-shadow: none; border-radius: 10px; background: var(--surface-sunk, #f1f1f4); }
.sidebar-search .searchbox--side input { min-width: 0; }
/* Страница результатов поиска */
.search-page__head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.search-page__title { font-size: 20px; font-weight: 600; }
.searchbox--page { width: 100%; max-width: 560px; padding: 11px 16px; border-radius: 12px; }
.searchbox--page input { font-size: 14px; }
.searchbox__x { border: none; background: none; cursor: pointer; color: var(--ink-3); display: inline-flex; padding: 0; }
.searchbox__x:hover { color: var(--ink); }
.search-page__meta { font-size: 12.5px; color: var(--ink-3); }
.search-page__hint { color: var(--ink-3); font-size: 13px; padding: 24px 2px; display: flex; align-items: center; gap: 8px; }
.search-page__groups { display: flex; flex-direction: column; gap: 22px; max-width: 760px; }
.search-group__h { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin-bottom: 8px; }
.search-group__n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--paper-2); font-size: 11px; color: var(--ink-2); }
.search-group__list { display: flex; flex-direction: column; gap: 6px; }
.search-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; color: var(--ink); }
.search-row:hover { border-color: var(--pri); background: var(--pri-soft); }
.search-row > svg { color: var(--ink-3); flex: none; }
.search-row span { display: flex; flex-direction: column; min-width: 0; }
.search-row b { font-size: 13.5px; font-weight: 600; }
.search-row small { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-results--side { position: absolute; left: 12px; right: 12px; top: calc(100% - 2px); z-index: 30; }
.searchbox { display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 8px 15px; width: 290px; color: var(--ink-3); box-shadow: var(--sh-xs); }
.searchbox input { border: none; background: none; outline: none; flex: 1; color: var(--ink); font-size: 13px; }
.iconbtn { width: 40px; height: 40px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-xs); position: relative; }
.iconbtn:hover { background: var(--paper-2); color: var(--ink); }
.iconbtn .ping { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 99px; background: var(--red); border: 2px solid var(--surface); }

.page { flex: 1; overflow-y: auto; }
.page__inner { padding: 26px 30px 60px; max-width: 1320px; margin: 0 auto; }
.page__inner--wide { max-width: 1600px; }

/* section heads */
.shead { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.shead h3 { font-size: 16px; font-weight: 400; }
.shead .sub { color: var(--ink-3); font-size: 13px; }

/* ---------- Login ---------- */
.login { height: 100%; display: grid; grid-template-columns: 1.05fr 0.95fr; }
.login__art { position: relative; overflow: hidden; background: var(--dark); display: flex; flex-direction: column; justify-content: space-between; padding: 46px; color: #fff; }
.login__art .lbrand { display: flex; align-items: center; gap: 13px; position: relative; z-index: 2; }
.login__art .lbrand .lm { width: 46px; height: 46px; border-radius: 14px; background: var(--lime); display: flex; align-items: center; justify-content: center; }
.login__art .lbrand h1 { font-size: 18px; font-weight: 400; }
.login__art .lbrand p { font-size: 12px; opacity: .65; }
.login__art .ltag { position: relative; z-index: 2; max-width: 440px; }
.login__art .ltag h2 { font-size: 36px; line-height: 1.1; font-weight: 400; letter-spacing: -0.02em; }
.login__art .ltag h2 .hl { color: var(--lime); }
.login__art .ltag p { font-size: 15px; opacity: .72; margin-top: 16px; line-height: 1.55; }
.login__art .lfeat { display: flex; gap: 22px; position: relative; z-index: 2; flex-wrap: wrap; }
.login__art .lfeat div { font-size: 12.5px; opacity: .8; display: flex; align-items: center; gap: 7px; }
.login__art .lfeat div svg { color: var(--lime); }
.login__form { display: flex; align-items: center; justify-content: center; padding: 40px; background: var(--paper); }
.login__card { width: 100%; max-width: 376px; }
.login__card h3 { font-size: 23px; font-weight: 400; }
.login__card .lsub { color: var(--ink-3); margin: 6px 0 26px; font-size: 14px; }

.fio-select { position: relative; }
.fio-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-lg); z-index: 10; overflow: hidden; padding: 6px; }
.fio-list button { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 9px 10px; border: none; background: none; border-radius: 9px; }
.fio-list button:hover { background: var(--paper-2); }
.fio-list .nm { font-weight: 400; font-size: 13.5px; }
.fio-list .rl { font-size: 11.5px; color: var(--ink-3); }

.pin-row { display: flex; gap: 10px; justify-content: space-between; }
.pin-cell { width: 100%; aspect-ratio: 1 / 1.12; max-width: 54px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 22px; font-weight: 400; transition: all .14s; }
.pin-cell.filled { border-color: var(--pri); background: var(--pri-soft); color: var(--pri-ink); }
.pin-cell.cursor { border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri-soft); }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.keypad button { aspect-ratio: 1.7/1; border: 1px solid var(--line); background: var(--surface); border-radius: 14px; font-family: var(--display); font-size: 20px; font-weight: 400; color: var(--ink); box-shadow: var(--sh-xs); transition: all .1s; }
.keypad button:hover { background: var(--paper-2); }
.keypad button:active { background: var(--pri-soft); transform: scale(.96); }
.keypad button.fn { font-size: 14px; color: var(--ink-3); }

/* ---------- Stat cards / dashboard ---------- */
.grid { display: grid; gap: 16px; }
.statcard { padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.statcard .top { display: flex; align-items: center; justify-content: space-between; }
.statcard .ic { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.statcard .val { font-family: var(--display); font-size: 30px; font-weight: 400; letter-spacing: -0.02em; line-height: 1; }
.statcard .lbl { font-size: 13px; color: var(--ink-2); font-weight: 400; }
.statcard .trend { font-size: 12px; font-weight: 400; }

.workload-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.workload-row:last-child { border-bottom: none; }
.workbar { flex: 1; height: 9px; border-radius: 99px; background: var(--surface-sunk); overflow: hidden; display: flex; }
.workbar > span { height: 100%; }

/* ---------- Kanban ---------- */
.kanban { display: flex; gap: 14px; padding: 4px 30px 30px; overflow-x: auto; height: 100%; align-items: flex-start; }
.kcol { width: 286px; flex: none; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; max-height: 100%; }
.kcol__head { display: flex; align-items: center; gap: 9px; padding: 13px 14px 10px; position: sticky; top: 0; }
.kcol__head .kdot { width: 9px; height: 9px; border-radius: 99px; flex: none; }
.kcol__head .knm { font-weight: 400; font-size: 13.5px; }
.kcol__head .kct { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--ink-3); background: var(--surface); border: 1px solid var(--line); border-radius: 99px; padding: 1px 8px; }
.kcol__body { padding: 4px 10px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; }
.kcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 11px 12px 12px; box-shadow: var(--sh-xs); cursor: pointer; transition: box-shadow .15s, transform .15s, border-color .15s; }
.kcard:hover { box-shadow: var(--sh); border-color: #DDE1E7; transform: translateY(-1px); }
.kcard.dragging { opacity: .45; }
.kcard__top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.kcard__num { font-family: var(--mono); font-size: 11px; color: var(--ink-3); font-weight: 400; }
.kcard__cover { width: 46px; height: 58px; border-radius: 8px; overflow: hidden; flex: none; box-shadow: var(--sh-xs); }
.kcard__body { display: flex; gap: 11px; }
.kcard__name { font-weight: 400; font-size: 14.5px; line-height: 1.1; }
.kcard__meta { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.kcard__foot { display: flex; align-items: center; gap: 8px; margin-top: 11px; }
.kdrop { outline: 1.5px dashed var(--pri); outline-offset: -4px; border-radius: var(--r); background: var(--pri-soft); }

/* ---------- Table ---------- */
.tablewrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl thead th { text-align: left; font-size: 11.5px; font-weight: 400; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; padding: 12px 14px; background: var(--surface-sunk); border-bottom: 1px solid var(--line); white-space: nowrap; }
table.tbl tbody td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.tbl tbody tr { transition: background .12s; cursor: pointer; }
table.tbl tbody tr:hover { background: var(--paper-2); }
table.tbl tbody tr:last-child td { border-bottom: none; }
.cell-num { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.cell-strong { font-weight: 400; }

.filterbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 16px; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 400; color: var(--ink-2); box-shadow: var(--sh-xs); }
.chip:hover { background: var(--paper-2); }
.chip.active { background: var(--pri-soft); border-color: var(--pri-soft-2); color: var(--pri-ink); }
.chip svg { width: 15px; height: 15px; color: var(--ink-3); }
.chip select { border: none; background: none; outline: none; font: inherit; color: inherit; font-weight: 400; }

.stage-select { min-width: 148px; padding: 7px 11px; border-radius: var(--r-pill); font-size: 12.5px; }
.stage-select--head { width: auto; min-width: 176px; background: var(--surface); }
.template-card h4 { line-height: 1.25; }
.template-prompt-builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 12px;
}
.template-prompt-builder__editor textarea {
  min-height: 312px;
  resize: vertical;
  line-height: 1.55;
}
.crm-fields {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper-2);
  padding: 12px;
  max-height: 336px;
  overflow-y: auto;
}
.crm-fields__title {
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 9px;
}
.crm-fields__group + .crm-fields__group { margin-top: 12px; }
.crm-fields__group-title {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
  margin-bottom: 7px;
}
.crm-fields__list { display: flex; flex-direction: column; gap: 6px; }
.crm-field-chip {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-2);
  padding: 7px 9px;
  display: flex;
  align-items: center;
  gap: 7px;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.2;
  cursor: grab;
  user-select: none;
  transition: border-color .13s, background .13s, color .13s;
}
.crm-field-chip:active { cursor: grabbing; }
.crm-field-chip:focus { outline: none; border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri-soft); }
.crm-field-chip:hover {
  border-color: var(--pri-soft-2);
  background: var(--pri-soft);
  color: var(--pri-ink);
}
.crm-field-chip svg { flex: none; color: var(--ink-3); }
.crm-field-chip:hover svg { color: var(--pri); }
@media (max-width: 760px) {
  .template-prompt-builder { grid-template-columns: 1fr; }
  .crm-fields { max-height: none; }
}

/* ---------- Order card ---------- */
.ocard-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 18px; }
.ocard-cover { width: 84px; height: 106px; border-radius: 12px; overflow: hidden; flex: none; box-shadow: var(--sh); }
.ocard-title h2 { font-size: 23px; font-weight: 400; }
.ocard-title .sub { color: var(--ink-3); font-size: 13.5px; margin-top: 3px; }
.ocard-metarow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.otabs { display: flex; gap: 3px; border-bottom: 1px solid var(--line); margin-bottom: 22px; overflow-x: auto; }
.otab { padding: 11px 15px; border: none; background: none; font-size: 13.5px; font-weight: 400; color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: flex; align-items: center; gap: 7px; transition: color .13s; }
.otab svg { width: 16px; height: 16px; }
.otab:hover { color: var(--ink); }
.otab.active { color: var(--ink); border-bottom-color: var(--pri); }
.otab .tb { font-size: 10.5px; background: var(--surface-sunk); color: var(--ink-2); border-radius: 99px; padding: 1px 7px; font-weight: 400; }
.otab.active .tb { background: var(--pri-soft); color: var(--pri-ink); }

.two-col { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .two-col { grid-template-columns: 1fr; } }

/* CTA «Утвердить текст» — заметный блок в иерархии страницы */
.approve-cta { border: 1px solid var(--pri); background: var(--pri-soft); border-radius: var(--r-lg);
  padding: 16px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--sh-xs); }
.approve-cta__head { display: flex; gap: 11px; align-items: flex-start; }
.approve-cta__head > svg { color: var(--pri); flex: none; margin-top: 1px; }
.approve-cta__title { font-size: 15px; font-weight: 500; color: var(--ink); }
.approve-cta__sub { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.45; }
.approve-cta__btn { width: 100%; height: 44px; font-size: 14.5px; }
.approve-cta--done { border-color: var(--green, #16a34a); background: rgba(22,163,74,.08); }
.approve-cta--done .approve-cta__head > svg { color: var(--green, #16a34a); }

/* ===== Анкета ребёнка — компактный секционный интерфейс ===== */
.brief2 { display: flex; flex-direction: column; gap: 14px; max-width: 1080px; }
.brief2-head { display: flex; align-items: center; gap: 12px; }
.brief2-head__txt h3 { font-size: 19px; font-weight: 500; line-height: 1.1; }
.brief2-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.brief2-status svg { color: var(--ink-4); }
.brief2-status--warn { display: inline-flex; align-items: center; gap: 5px; color: var(--amber, #b7791f); }
.brief2-status--warn svg { color: var(--amber, #b7791f); }
/* верхняя панель глобальных настроек */
.brief2-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 12px 14px; box-shadow: var(--sh-xs); }
/* сегментированная навигация секций */
.brief2-nav { display: flex; gap: 6px; background: var(--surface-sunk, #f1f1f4); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.brief2-nav__btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; border: none; background: transparent;
  border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); cursor: pointer; }
.brief2-nav__btn:hover { color: var(--ink); }
.brief2-nav__btn.on { background: var(--surface); color: var(--pri-ink); box-shadow: var(--sh-xs); }
.brief2-nav__n { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--line); color: var(--ink-2); font-size: 11px; font-weight: 600; }
.brief2-nav__btn.on .brief2-nav__n { background: var(--pri); color: #fff; }
/* карточка секции */
.brief2-card { padding: 16px 18px; }
.brief2-card__h { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink);
  margin-bottom: 14px; }
.brief2-card__h svg { color: var(--pri); }
.brief2-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px; }
.brief2-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
@media (max-width: 900px) { .brief2-grid3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .brief2-grid3, .brief2-grid2 { grid-template-columns: 1fr; } }
.brief2-field { display: flex; flex-direction: column; }
.brief2-field .label { display: inline-flex; align-items: center; gap: 5px; }
.brief2-field .label svg { color: var(--ink-4); }
.brief2-field__head { display: flex; align-items: center; justify-content: space-between; }
.brief2-counter { font-size: 11px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.brief2-divider { height: 1px; background: var(--line); margin: 14px 0; }
/* «Сюжет»: крупные текстовые поля одинаковой высоты */
.brief2-grid3--tall { margin-top: 14px; align-items: start; }
.brief2-grid3--tall textarea.field { min-height: 92px; resize: vertical; }
/* карточки загрузки фото — одинаковой ширины и высоты */
.ref-card { min-height: 158px; padding: 16px 12px; }
.ref-card__up { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--pri); margin-top: 1px; }
.ref-card__up svg { color: var(--pri); }
.ref-card__hint { line-height: 1.35; }
/* компактный размер полей */
.field--sm { min-height: 36px; height: 36px; padding: 6px 11px; font-size: 13.5px; }
textarea.field--sm { height: auto; min-height: 54px; }
/* карточки загрузки референсов */
.ref-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 980px) { .ref-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ref-cards { grid-template-columns: 1fr; } }
.ref-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 116px; padding: 16px 12px; text-align: center; cursor: pointer;
  border: 1.5px dashed var(--line); border-radius: 12px; background: var(--paper, #fafafa); transition: border-color .15s, background .15s; }
.ref-card:hover { border-color: var(--pri); background: var(--pri-soft); }
.ref-card.is-over { border-color: var(--pri); background: var(--pri-soft); box-shadow: 0 0 0 3px var(--pri-soft); }
.ref-card__icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line); color: var(--pri); }
.ref-card__title { font-size: 13px; font-weight: 500; color: var(--ink); }
.ref-card__hint { font-size: 11px; color: var(--ink-4); }
.ref-card__count { position: absolute; top: 8px; right: 8px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--pri); color: #fff; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); }
.panel__h { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--line-2); }
.panel__h h4 { font-size: 14px; font-weight: 400; }
.panel__h .sp { flex: 1; }
.panel__b { padding: 18px; }

.model-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line-2);
  cursor: pointer;
}
.model-row:last-child { border-bottom: none; }
.model-row input { width: 16px; height: 16px; accent-color: var(--pri); }
.model-row span span { display: block; }

.asset-list { display: flex; flex-direction: column; gap: 10px; }
.drop-hint {
  display: flex; align-items: center; gap: 8px;
  color: var(--ink-3); font-size: 12.5px; line-height: 1.35;
  padding: 9px 10px; border: 1px dashed var(--line);
  border-radius: var(--r); background: var(--paper-2);
  margin-bottom: 12px;
}
.drop-hint svg { flex: none; color: var(--pri); }
.attach-queue {
  border: 1px solid var(--pri-soft-2);
  background: var(--pri-soft);
  border-radius: var(--r);
  padding: 12px;
  margin-bottom: 12px;
}
.pending-image {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 0; border-top: 1px solid rgba(74,127,248,.18);
}
.pending-image__preview {
  width: 76px; height: 76px; border-radius: 10px; overflow: hidden;
  background: var(--surface); flex: none; box-shadow: var(--sh-xs);
}
.pending-image__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset-item {
  display: flex; gap: 10px; padding: 10px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper-2);
}
.asset-preview {
  width: 74px; height: 74px; border-radius: 10px; overflow: hidden;
  background: var(--surface-sunk); flex: none;
  display: flex; align-items: center; justify-content: center; color: var(--ink-3);
  border: 0; padding: 0;
}
.asset-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset-preview--clickable { cursor: zoom-in; }
.asset-preview:disabled { cursor: default; }
.order-drop-overlay {
  position: fixed; inset: var(--topbar-h) 0 0 var(--sidebar-w);
  z-index: 45; background: rgba(74, 127, 248, .16);
  border: 2px dashed var(--pri);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; color: var(--pri-ink); font-size: 18px;
  backdrop-filter: blur(2px); pointer-events: none;
}
.sidebar.collapsed ~ .main .order-drop-overlay { left: var(--sidebar-w-collapsed); }

.character-main-preview {
  width: 96px; height: 96px; border-radius: 12px; overflow: hidden;
  background: var(--surface-sunk); flex: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); box-shadow: var(--sh-xs);
  border: 0; padding: 0; cursor: pointer;
}
.character-main-preview:disabled { cursor: default; }
.character-main-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-image-btn {
  width: 60px; height: 60px; border-radius: 10px; overflow: hidden;
  box-shadow: var(--sh-xs); border: 1px solid var(--line);
  background: var(--surface); padding: 0; display: block;
}
.mini-image-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ref-cell {
  width: 96px; height: 96px; border-radius: 12px; overflow: hidden; flex: none;
  background: var(--surface-sunk); box-shadow: var(--sh-xs); border: 1px solid var(--line);
  padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink-3);
}
.reference-picker {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper-2);
  padding: 12px;
  margin-top: 14px;
}
.reference-spoiler {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper-2);
  overflow: hidden;
}
.reference-spoiler > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  cursor: pointer;
  list-style: none;
  color: var(--ink-2);
  font-size: 13px;
}
.reference-spoiler > summary::-webkit-details-marker { display: none; }
.reference-spoiler__title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.reference-spoiler__title svg { color: var(--ink-3); flex: none; }
.reference-picker--inside {
  margin-top: 0;
  border: 0;
  border-top: 1px solid var(--line-2);
  border-radius: 0;
  background: transparent;
}
.reference-picker__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; font-size: 13px; font-weight: 400; margin-bottom: 10px;
}
.reference-picker__empty { height: 116px; background: var(--surface); border-radius: 10px; }
.reference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 9px;
}
.reference-card {
  position: relative; display: flex; flex-direction: column; gap: 5px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--surface); padding: 7px; text-align: left;
  color: var(--ink); min-width: 0;
}
.reference-card:hover { border-color: #C8C8C8; background: #fff; }
.reference-card.selected { border-color: var(--pri); box-shadow: 0 0 0 2px var(--pri-soft); }
.reference-card__img {
  aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden;
  background: var(--surface-sunk); display: block;
}
.reference-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reference-card__label {
  font-size: 12px; line-height: 1.2; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.reference-card__meta {
  font-size: 10.5px; color: var(--ink-3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.reference-card__check {
  position: absolute; top: 12px; right: 12px;
  width: 22px; height: 22px; border-radius: 99px;
  background: rgba(28,32,40,.5); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.reference-card:not(.selected) .reference-card__check { opacity: 0; }
.reference-card__zoom {
  position: absolute; top: 12px; left: 12px;
  width: 24px; height: 24px; border-radius: 99px;
  background: rgba(28,32,40,.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .13s;
}
.reference-card:hover .reference-card__zoom { opacity: 1; }
.result-card { gap: 8px; }
.result-card__preview {
  display: flex; flex-direction: column; gap: 5px;
  background: transparent; border: 0; color: inherit; padding: 0; text-align: left;
}
.result-card__approve { width: 100%; justify-content: center; }
.image-viewer {
  width: 100%; max-height: min(70vh, 720px); border-radius: var(--r);
  overflow: hidden; background: var(--surface-sunk);
  display: flex; align-items: center; justify-content: center;
}
.image-viewer img { width: 100%; height: 100%; object-fit: contain; display: block; }
.image-fallback {
  width: 100%; height: 100%; min-height: 48px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-4); background: var(--surface-sunk);
}

/* checkpoint list */
.cp-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.cp-item:last-child { border-bottom: none; }
.cp-check { width: 22px; height: 22px; border-radius: 99px; flex: none; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--line); color: transparent; }
.cp-check.done { background: var(--green); border-color: var(--green); color: #fff; }
.cp-nm { font-weight: 400; font-size: 13.5px; }
.cp-meta { font-size: 11.5px; color: var(--ink-3); }
.cp-wt { margin-left: auto; font-family: var(--display); font-weight: 400; font-size: 13px; color: var(--ink-3); }

/* version history */
.version-list {
  padding-top: 8px; padding-bottom: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.version-item {
  width: 100%; min-height: 58px;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
  font: inherit; text-align: left;
  box-shadow: var(--sh-xs);
  cursor: pointer;
  transition: background .13s, border-color .13s, box-shadow .13s, transform .13s;
}
.version-item:hover {
  background: var(--paper-2);
  border-color: #C8C8C8;
  box-shadow: var(--sh-sm);
}
.version-item:active { transform: translateY(1px); }
.version-item:focus-visible {
  outline: none;
  border-color: var(--pri);
  box-shadow: 0 0 0 3px var(--pri-soft);
}
.version-item.is-active {
  background: var(--pri-soft);
  border-color: var(--pri-soft-2);
  box-shadow: inset 0 0 0 1px rgba(122, 98, 52, .08);
}
.version-item__body { flex: 1; min-width: 0; }
.version-item__title {
  font-size: 13px; font-weight: 400; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.version-item__meta { margin-top: 3px; font-size: 11.5px; color: var(--ink-3); }
.version-item__badges {
  display: flex; align-items: center; justify-content: flex-end; gap: 5px;
  flex-wrap: wrap; max-width: 128px;
}

/* info rows */
.inforow { display: flex; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px; gap: 12px; }
.inforow:last-child { border-bottom: none; }
.inforow .k { color: var(--ink-3); width: 150px; flex: none; font-weight: 400; }
.inforow .v { font-weight: 400; flex: 1; }

/* spreads grid */
.spread-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.spread-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-xs); transition: box-shadow .15s, border-color .15s; }
.spread-card:hover { box-shadow: var(--sh); border-color: #DAD9CE; }
.spread-img { aspect-ratio: 2/1; position: relative; background: var(--surface-sunk); }
.spread-img--clickable { cursor: zoom-in; }
.spread-img--clickable:focus-visible { outline: 2px solid var(--pri); outline-offset: -2px; }
.thumb-button {
  border: 0; padding: 0; background: transparent; flex: none; cursor: zoom-in;
}
.final-thumb--clickable { cursor: zoom-in; }
.final-thumb--clickable:focus-visible { outline: 2px solid var(--pri); outline-offset: -2px; }
.spread-img .sp-no { position: absolute; top: 8px; left: 8px; background: rgba(28,32,40,.55); color: #fff; font-family: var(--mono); font-size: 11px; padding: 2px 8px; border-radius: 7px; backdrop-filter: blur(3px); }
/* Подложка номера разворота в миниатюрах (контейнер .final-thumb, а не .spread-img). */
.final-thumb .sp-no { background: rgba(28,32,40,.55); color: #fff; font-family: var(--mono); font-size: 11px; line-height: 1.2; padding: 2px 8px; border-radius: 7px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 2; }
.spread-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; color: var(--ink-4); }
.spread-body { padding: 11px 12px 12px; }
.spread-body .txt { font-size: 12px; color: var(--ink-2); line-height: 1.45; margin-bottom: 10px; min-height: 34px; }

/* comments */
.cmt { display: flex; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.cmt:last-child { border-bottom: none; }
.cmt .bd { flex: 1; }
.cmt .hd { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.cmt .hd .nm { font-weight: 400; font-size: 13px; }
.cmt .hd .at { font-size: 11px; color: var(--ink-4); }
.cmt .tx { font-size: 13px; color: var(--ink-2); line-height: 1.5; }

/* timeline */
.tl { position: relative; padding-left: 30px; }
.tl::before { content: ''; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding: 9px 0; }
.tl-dot { position: absolute; left: -30px; top: 8px; width: 24px; height: 24px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--ink-3); box-shadow: var(--sh-xs); }
.tl-item .ttxt { font-size: 13px; }
.tl-item .tat { font-size: 11.5px; color: var(--ink-4); margin-top: 1px; }

/* generator panel */
.genbox { background: #F4F7FE; border: 1px solid var(--pri-soft-2); border-radius: var(--r-lg); padding: 18px; }
.job-inline {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12.5px;
}
.job-inline span { flex: 1; min-width: 0; }
.job-state {
  margin-top: 10px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12.5px;
}
.job-state--blue { border-color: var(--pri-soft-2); background: #F4F7FE; }
.job-state--green { border-color: rgba(22, 163, 74, .25); background: #F3FAF6; }
.job-state--red { border-color: rgba(220, 38, 38, .24); background: #FFF5F5; }
.job-state b { color: var(--ink); font-weight: 400; }
.job-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--pri-soft-2);
  border-radius: var(--r);
  background: #F4F7FE;
  color: var(--ink-2);
  font-size: 13px;
}
.job-banner span { flex: 1; }
.job-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  padding: 10px;
  text-align: left;
}
.job-row:hover { border-color: var(--line); background: var(--surface-sunk); }
.seg { display: inline-flex; background: var(--surface-sunk); border-radius: var(--r-pill); padding: 3px; gap: 2px; }
.seg button { border: none; background: none; padding: 7px 16px; border-radius: var(--r-pill); font-size: 13px; font-weight: 400; color: var(--ink-2); }
.seg button.active { background: var(--surface); color: var(--ink); box-shadow: var(--sh-xs); }

/* progress ring */
.ring { transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 7; }

/* modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(30,24,16,.42); backdrop-filter: blur(3px); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--sh-pop); width: 100%; max-width: 460px; overflow: hidden; }
.modal__h { padding: 20px 22px 0; }
.modal__h h3 { font-size: 18px; font-weight: 400; }
.modal__b { padding: 16px 22px 22px; }
.modal__f { padding: 16px 22px; background: var(--paper-2); border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; }

/* toast */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px; box-shadow: var(--sh-pop); z-index: 80; font-size: 13.5px; font-weight: 400; display: flex; align-items: center; gap: 10px; }
.toast svg { color: #7ee0a8; }
.toast--error { background: #3A2020; }
.toast--error svg { color: #ff8a8a; }

/* empty stub */
.stub { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 80px 20px; color: var(--ink-3); gap: 14px; }
.stub .si { width: 64px; height: 64px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-sm); }
.stub h3 { font-size: 18px; color: var(--ink); }

/* book cover & child photo */
.bookcover { position: relative; overflow: hidden; background: var(--surface-sunk); }
.bookcover__band { position: absolute; left: 8px; right: 8px; bottom: 8px; background: rgba(255,255,255,.82); backdrop-filter: blur(4px); border-radius: 8px; padding: 5px 9px; text-align: center; }
.bookcover__band span { font-family: var(--display); font-weight: 400; font-size: clamp(10px, 3.5cqw, 15px); color: var(--ink); }
.childphoto { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.childphoto__lbl { position: absolute; bottom: 6px; font-size: 10px; color: rgba(40,48,60,.5); }
.mono { font-family: var(--mono); }

/* misc helpers */
.row { display: flex; align-items: center; }
.searchbox { position: relative; }
.search-results,
.notif-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  width: min(420px, 90vw);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-pop);
  padding: 8px;
}
.search-results button,
.notif-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: transparent;
  color: var(--ink);
  padding: 10px;
  border-radius: 10px;
  text-align: left;
}
.search-results button:hover,
.notif-item:hover { background: var(--surface-sunk); }
.search-results span,
.notif-item { min-width: 0; }
.search-results b,
.notif-item span { display: block; font-size: 13px; font-weight: 400; }
.search-results small,
.notif-item small { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-empty { padding: 14px; color: var(--ink-3); font-size: 12px; text-align: center; }
.notif-wrap { position: relative; }
.notif-menu { right: 0; }
.notif-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 6px;
}
.notif-menu__head b { font-size: 13px; font-weight: 400; }
.notif-menu__head button {
  border: none;
  background: transparent;
  color: var(--pri);
  font-size: 12px;
}
.gap6{gap:6px}.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}.gap16{gap:16px}
.muted { color: var(--ink-3); }
.tiny { font-size: 11.5px; }
.sect-gap { margin-top: 26px; }

/* ---------- Auth screen (Sber-style card + realistic time-of-day sky) ---------- */
.auth { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; overflow: hidden;
  --sky: linear-gradient(180deg, #5BA8EC 0%, #8FC6F0 42%, #CDE8F8 78%, #ECF6FC 100%);
  --glow: rgba(255,241,196,0.8); --glow-size: 580px;
  --orb: radial-gradient(circle at 38% 36%, #FFFBE9, #FFE57A 58%, #FFD23A);
  --orb-x: 15%; --orb-y: 12%; --orb-size: 132px;
  --cloud: rgba(255,255,255,0.95); --cloud-blur: 9px;
  --haze: rgba(255,255,255,0.5); }

/* ---- time-of-day themes (пасхалка по времени суток) ---- */
.auth.t-morning {
  --sky: linear-gradient(180deg, #FAD9B0 0%, #F3C9C2 22%, #BFD8F0 62%, #E8F1F8 100%);
  --glow: rgba(255,196,138,0.9); --glow-size: 560px;
  --orb: radial-gradient(circle at 40% 38%, #FFF1D6, #FFC98A 62%, #FFB36B);
  --orb-x: 12%; --orb-y: 58%; --orb-size: 144px;
  --cloud: rgba(255,250,244,0.92); --haze: rgba(255,238,214,0.55); }
.auth.t-day {
  --sky: linear-gradient(180deg, #5BA8EC 0%, #8FC6F0 42%, #CDE8F8 78%, #ECF6FC 100%);
  --glow: rgba(255,241,196,0.8); --glow-size: 560px;
  --orb: radial-gradient(circle at 38% 36%, #FFFBE9, #FFE57A 58%, #FFD23A);
  --orb-x: 15%; --orb-y: 12%; --orb-size: 130px;
  --cloud: rgba(255,255,255,0.95); --haze: rgba(255,255,255,0.5); }
.auth.t-evening {
  --sky: linear-gradient(180deg, #2A2E63 0%, #6B3F86 30%, #C25E83 58%, #F0975A 84%, #F7C06A 100%);
  --glow: rgba(255,150,90,0.85); --glow-size: 640px;
  --orb: radial-gradient(circle at 42% 42%, #FFE6C0, #FF9E5A 60%, #F4733E);
  --orb-x: 16%; --orb-y: 60%; --orb-size: 158px;
  --cloud: rgba(214,150,170,0.5); --cloud-blur: 12px; --haze: rgba(247,170,110,0.5); }
.auth.t-night {
  --sky: linear-gradient(180deg, #070B22 0%, #111A40 42%, #1E2A55 74%, #2C3A66 100%);
  --glow: rgba(150,180,255,0.45); --glow-size: 480px;
  --orb: radial-gradient(circle at 40% 38%, #FBFCFF, #D9E2F2 58%, #AEBBD6);
  --orb-x: 78%; --orb-y: 12%; --orb-size: 108px;
  --cloud: rgba(40,52,92,0.5); --cloud-blur: 14px; --haze: rgba(20,28,60,0.5); }

.auth__scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.auth__bg { position: absolute; inset: -2px; background: var(--sky); transition: background 1.2s ease; }

/* atmospheric light glow around sun/moon */
.auth__glow { position: absolute; left: var(--orb-x); top: var(--orb-y); width: var(--glow-size); height: var(--glow-size);
  transform: translate(-30%, -30%); border-radius: 50%;
  background: radial-gradient(circle, var(--glow) 0%, rgba(255,255,255,0) 68%);
  animation: authGlow 7s ease-in-out infinite; will-change: transform, opacity; }
@keyframes authGlow { 0%,100% { opacity: .82; transform: translate(-30%,-30%) scale(1); }
  50% { opacity: 1; transform: translate(-30%,-30%) scale(1.07); } }

/* sun / moon disc */
.auth__orb { position: absolute; left: var(--orb-x); top: var(--orb-y); width: var(--orb-size); height: var(--orb-size);
  border-radius: 50%; background: var(--orb); box-shadow: 0 0 60px 10px rgba(255,255,255,0.16);
  animation: authOrb 9s ease-in-out infinite; will-change: transform; }
@keyframes authOrb { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.auth__orb--moon::after { content: ''; position: absolute; inset: 0; border-radius: 50%; opacity: .8;
  background:
    radial-gradient(circle at 64% 30%, rgba(150,165,195,.55) 0 6%, transparent 7%),
    radial-gradient(circle at 36% 60%, rgba(150,165,195,.45) 0 9%, transparent 10%),
    radial-gradient(circle at 72% 68%, rgba(150,165,195,.4) 0 5%, transparent 6%); }

/* realistic soft drifting clouds */
.auth__cloud { --s: 1; position: absolute; left: 0; width: 340px; height: 120px;
  background: radial-gradient(ellipse 50% 50% at 50% 60%, var(--cloud) 0%, rgba(255,255,255,0) 70%);
  filter: blur(var(--cloud-blur)); will-change: transform;
  animation-name: authDrift; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes authDrift { from { transform: translateX(-30vw) scale(var(--s)); } to { transform: translateX(134vw) scale(var(--s)); } }

/* stars (evening / night) */
.auth__star { position: absolute; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px rgba(255,255,255,0.7);
  animation-name: authStar; animation-timing-function: ease-in-out; animation-iteration-count: infinite; will-change: opacity, transform; }
@keyframes authStar { 0%,100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }

/* shooting star (night) */
.auth__shoot { position: absolute; top: 16%; left: 6%; width: 150px; height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff); border-radius: 2px;
  filter: drop-shadow(0 0 6px #fff); opacity: 0; transform: rotate(16deg); animation: authShoot 11s ease-in infinite; }
@keyframes authShoot { 0%,84% { opacity: 0; transform: translate(0,0) rotate(16deg); }
  87% { opacity: 1; } 97% { opacity: 0; transform: translate(58vw, 20vh) rotate(16deg); } 100% { opacity: 0; } }

/* floating dust motes (живость) */
.auth__mote { position: absolute; bottom: -20px; border-radius: 50%; background: rgba(255,255,255,0.6); filter: blur(1px);
  animation-name: authMote; animation-timing-function: linear; animation-iteration-count: infinite; will-change: transform, opacity; }
@keyframes authMote { 0% { transform: translateY(0) translateX(0); opacity: 0; }
  12% { opacity: .8; } 88% { opacity: .5; } 100% { transform: translateY(-104vh) translateX(38px); opacity: 0; } }

/* horizon haze */
.auth__haze { position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--haze) 100%); }

@media (prefers-reduced-motion: reduce) {
  .auth__glow, .auth__orb, .auth__cloud, .auth__star, .auth__shoot, .auth__mote { animation: none; } }

/* ---- Sber-style card ---- */
.auth__card { position: relative; z-index: 2; width: 100%; max-width: 444px; text-align: center;
  aspect-ratio: 5 / 4.3; display: flex; flex-direction: column; justify-content: center;
  padding: 34px 34px; border-radius: 28px;
  background: rgba(221, 220, 221, 0.80); backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2);
  border: 1px solid #FFFFFF; box-shadow: 0 30px 90px rgba(20,30,60,0.30); }
.auth__logo { display: block; width: 72px; height: 72px; object-fit: contain; margin: 0 auto 18px; }
.auth__hi { font-family: var(--display, inherit); font-size: 26px; font-weight: 600; letter-spacing: -0.01em;
  color: #1A1A1A; margin: 0 0 22px; line-height: 1.2; }
.auth__label { font-size: 15px; color: #6B7280; margin-bottom: 16px; }

.auth__field { margin-bottom: 18px; }
.auth__input { width: 100%; padding: 13px 16px; border: 1px solid rgba(0,0,0,0.10); border-radius: 14px;
  background: #F3F4F7; font-size: 15px; color: var(--ink); text-align: center; transition: border-color .15s; }
.auth__input::placeholder { color: #9CA3AF; }
.auth__input:focus { outline: none; border-color: #038984; box-shadow: none; }

.auth__pin { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 11px; width: 100%; margin: 0 auto; flex: none; }
.auth__pin .pin-cell { aspect-ratio: 1 / 1.08; max-width: none; min-width: 0; border-radius: 12px; border: 1px solid rgba(0,0,0,0.07);
  background: #F3F4F7; box-shadow: inset 0 1px 2px rgba(0,0,0,0.04); color: #1FA471; font-size: 26px; }
.auth__pin .pin-cell.filled { border-color: #1FA471; background: #F3F4F7; }
.auth__pin .pin-cell.cursor { border-color: #038984; box-shadow: none; background: #F3F4F7; }
.auth__pin-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; cursor: pointer; font-size: 16px; }

.auth__err { margin-top: 16px; color: var(--red-ink); font-size: 12.5px; display: flex; gap: 6px; align-items: center; justify-content: center; }
.auth__switch { margin-top: 22px; background: none; border: none; color: #1F1F7F; font-size: 14px; font-weight: 500; cursor: pointer; transition: opacity .15s; }
.auth__switch:hover { opacity: 0.7; }

/* ---- Окно авторизации (центрирование карточки) ---- */
.auth__window { position: relative; width: 100%; max-width: 444px; }
.auth__window .auth__card { max-width: none; }

/* ---------- История изменений (changelog) ---------- */
.changelog { max-width: 880px; }
.changelog__intro { margin-bottom: 16px; }
.cl-day + .cl-day { margin-top: 28px; }
.cl-day__head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.cl-day__date { display: inline-flex; align-items: center; gap: 7px; font-family: var(--display, inherit); font-size: 18px; font-weight: 500; color: var(--ink); }
.cl-day__date svg { color: var(--ink-3); }
.cl-day__summary { font-size: 13px; color: var(--ink-3); }
.cl-day__groups { display: flex; flex-direction: column; gap: 14px; }
.cl-tag { font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 999px;
  color: var(--cl-tag, var(--pri)); background: color-mix(in srgb, var(--cl-tag, var(--pri)) 14%, transparent); }
.cl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.cl-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.cl-list li svg { flex: none; margin-top: 3px; color: var(--green); }

/* changelog: лента авто-записей деплоя */
.cl-feed { display: flex; flex-direction: column; gap: 2px; margin-bottom: 18px; }
.cl-entry { display: grid; grid-template-columns: 168px 1fr; gap: 14px; padding: 11px 14px; border-radius: 12px; }
.cl-entry:hover { background: var(--paper-2); }
.cl-entry__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cl-entry__time { font-size: 12.5px; color: var(--ink-3); }
.cl-entry__ver { font-size: 11px; color: var(--ink-3); background: var(--surface-sunk); border-radius: 6px; padding: 1px 6px; }
.cl-entry__body { min-width: 0; }
.cl-entry__msg { font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.cl-entry__files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cl-entry__files code { font-size: 11px; color: var(--ink-2); background: var(--surface-sunk); border-radius: 6px; padding: 1px 7px; font-family: var(--mono, monospace); }
@media (max-width: 620px) { .cl-entry { grid-template-columns: 1fr; gap: 6px; } }

/* логотип в сайдбаре — изображение */
.sidebar__logo-img { border-radius: 11px; object-fit: contain; display: block; flex: none; }

/* ---------- Редактор макета разворота (текст поверх иллюстрации) ---------- */
.spread-layout-frame { position: relative; width: 100%; border-radius: 0; overflow: hidden; container-type: inline-size;
  background: var(--surface-sunk); user-select: none; box-shadow: inset 0 0 0 1px var(--line); }
.spread-layout-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Декоративный книжный слой (fairy_classic): фактура, рамка, виньетки, номера страниц. */
.spv-decor { position: absolute; inset: 0; pointer-events: none; }
.spv-decor__paper { position: absolute; inset: 0; background-repeat: repeat; background-size: 26cqw 26cqw; opacity: 0.07; mix-blend-mode: multiply; }
.spv-decor__frame { position: absolute; top: 4%; bottom: 4%; left: 2.2%; right: 2.2%; border: 1px solid rgba(194,160,90,0.5); border-radius: 1cqw; }
.spv-decor__frame::after { content: ''; position: absolute; inset: 0.5cqw; border: 1px solid rgba(194,160,90,0.34); border-radius: 0.7cqw; }
.spv-decor__corner { position: absolute; width: 6cqw; height: 6cqw; }
.spv-decor__corner--tl { top: 4%; left: 2.2%; }
.spv-decor__corner--tr { top: 4%; right: 2.2%; transform: scaleX(-1); }
.spv-decor__corner--bl { bottom: 4%; left: 2.2%; transform: scaleY(-1); }
.spv-decor__corner--br { bottom: 4%; right: 2.2%; transform: scale(-1, -1); }
.spv-decor__pageno { position: absolute; bottom: 4.6%; transform: translateX(-50%); display: flex; align-items: center; gap: 0.7cqw; }
.spv-decor__pageno--l { left: 25%; }
.spv-decor__pageno--r { left: 75%; }
.spv-decor__tick { width: 1.6cqw; height: 0.12cqw; background: rgba(194,160,90,0.8); border-radius: 1px; }
.spv-decor__medal { display: inline-flex; align-items: center; justify-content: center; min-width: 4cqw; height: 2.8cqw; padding: 0 1cqw;
  border-radius: 999px; background: rgba(251,246,234,0.92); border: 0.18cqw solid rgba(194,160,90,0.85);
  color: #6b5836; font-family: Georgia, 'PT Serif', 'Times New Roman', serif; font-size: 1.5cqw; line-height: 1; }
/* Декоративные слои (через «+»): рамка, подложка, медальон-номер, орнамент. */
.spv-deco-block { cursor: move; }
.slb-frame { position: absolute; inset: 0; border-style: solid; border-width: 0; }
.slb-frame--bare { border: none; }
.slb-frame__in { position: absolute; inset: 5px; border-style: solid; border-width: 1px; display: block; }
.slb-panel { position: absolute; inset: 0; }
.slb-panel__in { position: absolute; inset: 5px; border-style: solid; border-width: 1px; border-radius: inherit; display: block; }
.slb-panel__ribbon { position: absolute; left: 8%; right: 8%; top: 0; height: 0.7cqw; border-radius: 0 0 1cqw 1cqw; }
.slb-medal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(251,246,234,0.92); border-style: solid; border-width: 0.16cqw; color: #6b5836;
  font-family: Georgia, 'PT Serif', 'Times New Roman', serif; font-size: 1.6cqw; line-height: 1; }
.slb-medal--oval, .slb-medal--circle { border-radius: 50%; }
.slb-medal--pill { border-radius: 1.3cqw; }
.slb-medal--double { border-radius: 50%; box-shadow: inset 0 0 0 0.12cqw rgba(194,160,90,0.55); }
.slb-medal--plain { background: transparent; border-width: 0; }
.slb-medal--ul { background: transparent; border-width: 0; border-bottom-width: 0.18cqw; border-radius: 0; }
.slb-medal--dots { background: transparent; border-width: 0; gap: 0.9cqw; }
.slb-mdot { width: 0.6cqw; height: 0.6cqw; border-radius: 50%; display: inline-block; }
.slb-pcorner { position: absolute; width: 3.4cqw; height: 3.4cqw; }
.slb-pcorner--tl { top: 0.5cqw; left: 0.5cqw; }
.slb-pcorner--tr { top: 0.5cqw; right: 0.5cqw; transform: scaleX(-1); }
.slb-pcorner--bl { bottom: 0.5cqw; left: 0.5cqw; transform: scaleY(-1); }
.slb-pcorner--br { bottom: 0.5cqw; right: 0.5cqw; transform: scale(-1, -1); }
.slb-orn { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Справка по горячим клавишам */
.hk-help { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; }
.hk-group__h { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 600; margin-bottom: 7px; }
.hk-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 3px 0; }
.hk-keys { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.hk-kbd { font-family: ui-monospace, Menlo, monospace; font-size: 11px; background: var(--paper-2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: 2px 6px; color: var(--ink); white-space: nowrap; }
.hk-plus { color: var(--ink-4); font-size: 11px; }
.hk-desc { font-size: 12.5px; color: var(--ink-2); text-align: right; }
@media (max-width: 640px) { .hk-help { grid-template-columns: 1fr; } }
/* Smart guides и измерения (только в редакторе, не в PDF) */
.spv-smart { position: absolute; inset: 0; pointer-events: none; z-index: 40; }
.spv-sg { position: absolute; background: #f0398b; }
.spv-sg--v { top: 0; bottom: 0; width: 1px; }
.spv-sg--h { left: 0; right: 0; height: 1px; }
.spv-meas { position: absolute; display: flex; align-items: center; justify-content: center; }
.spv-meas--h { height: 0; border-top: 1px dashed rgba(74,127,248,0.9); }
.spv-meas--v { width: 0; border-left: 1px dashed rgba(74,127,248,0.9); }
.spv-meas__b { background: rgb(74,127,248); color: #fff; font-size: 10px; line-height: 1; padding: 2px 4px; border-radius: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Контекстное меню редактора */
.spv-ctx { z-index: 80; min-width: 180px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.18); padding: 5px; display: flex; flex-direction: column; }
.spv-ctx button { text-align: left; background: none; border: none; padding: 7px 10px; border-radius: 7px; font-size: 12.5px; color: var(--ink); cursor: pointer; }
.spv-ctx button:hover { background: var(--paper-2); }
.spv-ctx button:disabled { color: var(--ink-4); cursor: default; }
.spv-ctx button:disabled:hover { background: none; }
.spv-ctx__sep { height: 1px; background: var(--line); margin: 4px 6px; }
.spv-menu__sep { height: 1px; background: var(--line); margin: 4px 6px; }
.spv-ctx__danger { color: var(--red-ink, #c0392b); }
/* Множественное выделение: рамка-marquee и плашка «Выбрано N» */
.spv-marquee { border: 1px solid rgb(74,127,248); background: rgba(74,127,248,0.12); border-radius: 2px; z-index: 60; pointer-events: none; }
.spv-selbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--ink-2); padding: 5px 9px; margin-bottom: 5px; background: var(--pri-soft); border-radius: 6px; }
.spv-selbar__x { border: none; background: none; color: var(--pri); cursor: pointer; font-size: 11px; padding: 0; }
.spv-selbar__x:hover { text-decoration: underline; }
/* Прогресс-бар генерации разворотов */
.genbar { margin: 0 0 10px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.genbar__row { display: flex; align-items: center; gap: 10px; }
.genbar__title { font-size: 13px; font-weight: 500; color: var(--ink); }
.genbar__count { font-size: 12px; color: var(--ink-3); }
.genbar__pct { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.genbar__track { height: 6px; border-radius: 999px; background: var(--paper-2); margin-top: 9px; overflow: hidden; }
.genbar__fill { height: 100%; background: rgb(74,127,248); border-radius: 999px; transition: width .4s ease; }
.genbar__step { font-size: 11.5px; color: var(--ink-4); margin-top: 6px; }
.genbar--warn { display: flex; align-items: center; gap: 10px; background: #fff7e6; border-color: #f0d28a; color: #8a6d2b; }
.genbar--warn svg { color: #b7791f; }
.spv-addmenu__sep { height: 1px; background: var(--line); margin: 5px 6px; }
.spv-addmenu__cap { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-4); padding: 3px 10px 4px; }
.spread-layout-bg--empty { display: flex; align-items: center; justify-content: center; color: var(--ink-4); }
.spread-layout-block { position: absolute; min-height: 26px; border: 1px dashed transparent; border-radius: 8px; box-sizing: border-box; }
.spread-layout-block:not(.editing) { cursor: move; }
.spread-layout-block.editing { cursor: text; }
.spread-layout-block:hover { border-color: rgba(74,127,248,.45); }
/* Выделение НЕ меняет ширину рамки (1px), иначе при box-sizing:border-box контент слоя
   смещается при активации. Акцент даём цветом рамки + кольцом box-shadow (не влияет на раскладку). */
.spread-layout-block.selected { border: 1px solid var(--pri); box-shadow: 0 0 0 1px var(--pri); }
/* Figma-style: квадратные ручки по углам + бейдж размера */
.slb-handle { position: absolute; width: 9px; height: 9px; background: #fff; border: 1.5px solid var(--pri); border-radius: 2px; z-index: 3; }
.slb-handle--tl { left: -5px; top: -5px; cursor: nwse-resize; }
.slb-handle--tr { right: -5px; top: -5px; cursor: nesw-resize; }
.slb-handle--bl { left: -5px; bottom: -5px; cursor: nesw-resize; }
.slb-handle--br { right: -5px; bottom: -5px; cursor: nwse-resize; }
.slb-size { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); white-space: nowrap;
  background: var(--pri); color: #fff; font-size: 11px; font-weight: 500; line-height: 1; padding: 4px 8px; border-radius: 6px;
  font-variant-numeric: tabular-nums; pointer-events: none; z-index: 3; }
/* ручка поворота */
.slb-rotate { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--pri); cursor: grab; z-index: 3; }
.slb-rotate::before { content: ''; position: absolute; left: 50%; top: 11px; width: 1px; height: 10px; background: var(--pri); transform: translateX(-50%); }
/* box-слои (изображение / фигура / комментарий) */
.spread-layout-block--box { overflow: visible; }
.slb-img { width: 100%; height: 100%; display: block; }
.slb-img--empty { display: flex; align-items: center; justify-content: center; background: var(--surface-sunk); color: var(--ink-4); }
.slb-shape { width: 100%; height: 100%; }
/* комментарий-стикер */
.spv-comment__inner { width: 100%; height: 100%; border-radius: 8px; box-shadow: 0 3px 10px rgba(0,0,0,.18); display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(0,0,0,.08); }
.spv-comment__head { display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 500; color: rgba(0,0,0,.55); padding: 5px 8px 2px; }
.spv-comment__text { flex: 1; border: none; background: transparent; resize: none; outline: none; padding: 2px 8px 8px; font-size: 12px; color: #333; font-family: inherit; }
.spv-comment.resolved .spv-comment__inner { opacity: .6; }
/* меню нижней панели */
.spv-dockwrap { position: relative; display: inline-flex; }
.spv-dockmenu { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 9; min-width: 200px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 10px 34px rgba(20,30,60,.2); padding: 5px; display: flex; flex-direction: column; }
.spv-dockmenu button { display: flex; align-items: center; gap: 8px; text-align: left; background: none; border: none; padding: 9px 11px; border-radius: 8px; font-size: 13px; color: var(--ink); cursor: pointer; }
.spv-dockmenu button:hover { background: var(--paper-2); }
.spv-composite__layer { position: absolute; display: block; }
.spread-layout-block__drag { position: absolute; top: -12px; left: -12px; width: 22px; height: 22px; border-radius: 6px;
  background: var(--pri); color: #fff; align-items: center; justify-content: center; cursor: grab; z-index: 3; display: none; box-shadow: var(--sh-sm); }
.spread-layout-block:hover .spread-layout-block__drag, .spread-layout-block.selected .spread-layout-block__drag { display: flex; }
.spread-layout-block__drag:active { cursor: grabbing; }
.spread-layout-block__text { width: 100%; background: transparent; border: none; resize: none; outline: none;
  font-family: var(--display, inherit); line-height: 1.42; overflow: hidden; padding: 6px 9px; min-height: 26px;
  text-shadow: 0 1px 2px rgba(255,255,255,.35); }
.spread-layout-block__resize { position: absolute; right: -6px; bottom: -6px; width: 14px; height: 14px; border-radius: 4px;
  background: var(--pri); border: 2px solid #fff; cursor: ew-resize; z-index: 3; display: none; box-shadow: var(--sh-xs); }
.spread-layout-block.selected .spread-layout-block__resize { display: block; }

/* ============ Редактор генерации разворотов (spv) ============ */
.spv { display: flex; flex-direction: column; gap: 0; }
.spv-toolbar { position: relative; z-index: 40; display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
.spv-toolbar .btn { height: 40px; }
.spv-moremenu { width: 40px; height: 40px; }
.spv-zoom { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); padding: 2px; }
.spv-zoom--lg { padding: 3px; border-radius: 11px; height: 40px; }
.spv-zoom--lg .spv-zoom__btn { width: 34px; height: 34px; font-size: 19px; border-radius: 8px; }
.spv-zoom--lg .spv-zoom__val { min-width: 58px; height: 34px; font-size: 14px; border-radius: 8px; }
.spv-zoom__btn { width: 26px; height: 26px; border: none; background: transparent; border-radius: 7px; font-size: 15px; color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.spv-zoom__btn:hover { background: var(--paper-2); color: var(--ink); }
.spv-zoom__val { min-width: 44px; text-align: center; font-size: 12.5px; color: var(--ink-2); border: none; background: transparent; cursor: pointer; padding: 0; height: 26px; border-radius: 6px; }
.spv-zoom__val:hover { background: var(--paper-2); color: var(--ink); }
.spv-tbactions { display: inline-flex; align-items: center; gap: 8px; padding-left: 8px; margin-left: 2px; border-left: 1px solid var(--line); }
/* круглая кнопка «+» добавления слоя */
.spv-addwrap { position: relative; display: inline-flex; margin: 0 14px 0 4px; }
.spv-addbtn { width: 40px; height: 40px; border-radius: 50%; border: none; background: rgb(74,127,248); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(74,127,248,.35); }
.spv-addbtn:hover { filter: brightness(1.06); }
.spv-addmenu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; min-width: 180px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 10px 34px rgba(20,30,60,.2); padding: 5px; display: flex; flex-direction: column; }
.spv-addmenu button { display: flex; align-items: center; gap: 9px; text-align: left; background: none; border: none; padding: 9px 11px; border-radius: 8px; font-size: 13px; color: var(--ink); cursor: pointer; }
.spv-addmenu button:hover { background: var(--paper-2); }
.spv-addmenu button svg { color: var(--ink-3); }
.spv-tbtools { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 14px; padding: 6px; background: var(--surface); box-shadow: none; }
.spv-tbtool { width: 38px; height: 38px; border-radius: 10px; }
.spv-tbtool.on { background: rgb(74,127,248); color: #fff; }
.spv-toolbar__title h3 { font-size: 16px; font-weight: 500; line-height: 1.1; }
.spv-toolbar__title .spv-save { font-size: 11.5px; color: var(--ink-3); }
.spv-progress { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--pri-ink);
  background: var(--pri-soft); border-radius: 999px; padding: 4px 11px; }
.spv-menuwrap { position: relative; margin: 0 8px 0 2px; }
.spv-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 230px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--sh-lg); padding: 6px; display: flex; flex-direction: column; }
.spv-menu button { text-align: left; background: none; border: none; padding: 9px 11px; border-radius: 8px; font-size: 13px; color: var(--ink); }
.spv-menu button:hover:not(:disabled) { background: var(--paper-2); }
.spv-menu button:disabled { color: var(--ink-4); }
.spv-warn { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--amber-ink, #8a5a00);
  background: var(--amber-soft, #fdf2dc); border: 1px solid var(--amber-soft, #f3e2bf); border-radius: 10px; padding: 9px 13px; }

/* Рабочая область-редактор: большой холст + плавающие панели поверх него. */
.spv-stage-area { position: relative; flex: 1; height: calc(100vh - 196px); min-height: 460px;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #CCCCCC; }

/* На этапе «Развороты» редактор раскрывается на всю высоту экрана. */
.page--editor { overflow: hidden; }
.page--editor .page__inner--wide { display: flex; flex-direction: column; height: 100%; max-width: none; padding: 0; }
.page--editor .otabs { margin-bottom: 0; flex: none; }
.page--editor .spv-stage-area { border-radius: 0; border-left: none; border-right: none; border-bottom: none; }
.page--editor .fade { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.page--editor .spv { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.page--editor .spv-stage-area { flex: 1; height: auto; min-height: 0; }

/* холст занимает всю рабочую область */
.spv-canvas { position: absolute; inset: 0; display: flex; flex-direction: column; background: #CCCCCC; overflow: hidden; }
.spv-canvas.is-pan, .spv-canvas.is-pan .spv-stage { cursor: grab; }
.spv-canvas.is-pan:active, .spv-canvas.is-pan .spv-stage:active { cursor: grabbing; }
.spv-left__title { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 300; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-3); margin-bottom: 12px; }
.spv-left__title svg { color: var(--pri); }
/* холст — большая прокручиваемая рабочая область (3× по ширине, 5× по высоте) */
.spv-stage { flex: 1; overflow: auto; }
.spv-canvasbig { width: 300%; height: 500%; display: flex; align-items: center; justify-content: center; }

/* плавающие панели поверх холста */
.spv-float { position: absolute; z-index: 6; background: var(--surface); border: 1px solid var(--line);
  border-radius: 3px; box-shadow: none; }
.spv-float--tools { top: 27px; right: 10px; bottom: 10px; width: 320px; box-sizing: border-box; padding: 5px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; display: flex; flex-direction: column;
  background: rgba(230,230,230,0.9); border: none; border-radius: 5px; }
/* Скрываем полосу прокрутки: padding остаётся ровно 5px слева/справа, ширина панели не «прыгает»
   при появлении/исчезновении скроллбара у разных типов слоёв. Прокрутка колесом/трекпадом сохраняется. */
.spv-float--tools::-webkit-scrollbar { width: 0; height: 0; }
.spv-float--spreads { top: 10px; left: 10px; bottom: 10px; width: 220px; }
/* левая панель LAYERS / РАЗВОРОТЫ (стиль Tilda) */
.spv-float--layers { top: 10px; left: 10px; bottom: 10px; width: 230px; display: flex; flex-direction: column; overflow: hidden;
  background: rgba(230,230,230,0.9); border: none; border-radius: 5px; }
.spv-lpanel__tabs { display: flex; align-items: center; gap: 16px; padding: 14px 16px 12px; }
.spv-lpanel__tab { border: none; background: transparent; padding: 0; font-size: 12px; font-weight: 300;
  text-transform: uppercase; letter-spacing: .06em; color: #b8b8bd; cursor: pointer; }
.spv-lpanel__tab.on { color: #1a1a1a; }
.spv-panel-x { margin-left: auto; width: 18px; height: 18px; border: none; border-radius: 50%; background: #4a4a4f; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.spv-panel-x:hover { background: #2b2b2f; }
.spv-lpanel__body { flex: 1; overflow-y: auto; padding: 0 8px 8px; min-height: 0; display: flex; flex-direction: column; gap: 2px; }
.spv-layer { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 3px 0 9px; border-radius: 3px; cursor: pointer; background: #f5f5f5; }
.spv-layer:hover { background: #efefef; }
.spv-layer.active { background: #c3c3c3; }
.spv-layer > svg { color: #2a2a2a; flex: none; }
.spv-layer__name { flex: 1; min-width: 0; font-size: 12px; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spv-layer__x, .spv-layer__eye { border: none; background: none; color: var(--ink-3); cursor: pointer; opacity: 0; padding: 2px; display: inline-flex; }
.spv-layer:hover .spv-layer__x, .spv-layer:hover .spv-layer__eye { opacity: 1; }
.spv-layer.hidden { background: #ededf0; }
.spv-layer.hidden .spv-layer__eye { opacity: 1; color: var(--ink-3); }
.spv-layer.hidden .spv-layer__name, .spv-layer.hidden > svg { color: #b8b8bd; }
.spv-layer__x:hover { color: #dc2626; }
/* кнопка повторного раскрытия панели */
.spv-reopen { position: absolute; z-index: 6; top: 10px; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.spv-reopen--l { left: 10px; }
.spv-reopen--r { right: 10px; }
/* заголовок правой панели */
.spv-rtitle { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 400;
  text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
/* подпись контейнера, секции, футер свойств */
.tx-chint { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; padding: 6px 0 10px; }
.tx-sec { font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin: 14px 0 8px; }
.spv-bigup { width: 100%; height: 48px; border: none; border-radius: 5px; background: rgb(74,127,248); color: #fff; font-size: 14px; cursor: pointer; }
.spv-bigup:hover { filter: brightness(1.06); }
/* выбор цвета с HEX-вводом */
.tx-color { display: flex; align-items: center; gap: 8px; position: relative; }
/* собственный попап выбора цвета (HEX по умолчанию) */
.cp-pop { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; width: 188px; padding: 11px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.18); }
.cp-sv { position: relative; width: 100%; height: 128px; border-radius: 8px; cursor: crosshair; }
.cp-svdot { position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35); transform: translate(-50%, -50%); pointer-events: none; }
.cp-hue { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; margin: 14px 0 12px; border-radius: 999px; outline: none; cursor: pointer;
  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); }
.cp-hue::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 1px solid rgba(0,0,0,.25); box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: pointer; }
.cp-hue::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 1px solid rgba(0,0,0,.25); box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: pointer; }
.cp-bottom { display: flex; align-items: center; gap: 8px; }
.cp-prev { width: 30px; height: 30px; flex: none; border-radius: 7px; border: 1px solid rgba(0,0,0,.15); }
.cp-hex { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 7px; padding: 7px 8px; font-size: 13px; color: #000; text-transform: uppercase; }
.cp-hex:focus { outline: none; border-color: var(--pri); }
.tx-hex--input { width: 92px; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 4px 7px; font-size: 12.5px; color: #000; text-transform: uppercase; }
.tx-hex--input:focus { outline: none; border-color: var(--pri); }
/* модалка изображения: ссылка-пилюля с кнопкой внутри */
.mp-urlwrap { position: relative; }
.mp-url { width: 100%; height: 46px; border: 1px solid var(--line); border-radius: 999px; padding: 0 120px 0 18px; font-size: 13px; color: var(--ink); background: var(--surface); }
.mp-url:focus { outline: none; border-color: var(--pri); }
.mp-urlbtn { position: absolute; right: 4px; top: 4px; bottom: 4px; padding: 0 20px; border: none; border-radius: 999px; background: rgb(74,127,248); color: #fff; font-size: 13px; cursor: pointer; }
.mp-urlbtn:disabled { opacity: .45; cursor: default; }
/* квадратное модальное окно изображения */
.mp-modal { width: 624px; height: 624px; max-width: calc(100vw - 48px); max-height: calc(100vh - 48px); display: flex; flex-direction: column; }
.mp-modal .modal__b { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 18px; }
.mp-modal .mp-drop { flex: 1; justify-content: center; }
.mp-title { display: flex; align-items: center; gap: 10px; }
.mp-star { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink-3); cursor: pointer; transition: all .12s; }
.mp-star:hover { color: #c2a05a; border-color: #c2a05a; }
.mp-star.is-on { color: #fff; background: #c2a05a; border-color: #c2a05a; }
.mp-presets { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.mp-presets__msg { text-align: center; color: var(--ink-4); font-size: 13px; padding: 24px; }
.mp-presets__back { align-self: flex-start; }
.mp-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 2px; }
.mp-cell { aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: 10px; background: #faf7f0 repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 50% / 16px 16px; padding: 0; overflow: hidden; cursor: pointer; transition: border-color .12s, transform .12s; }
.mp-cell:hover { border-color: #c2a05a; transform: translateY(-1px); }
.mp-cell img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mp-uploading { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--ink-3); padding: 40px 20px; }
.mp-uploading__t { font-size: 14px; }
.mp-progress { width: 100%; max-width: 360px; height: 8px; border-radius: 99px; background: var(--surface-sunk, #eee); overflow: hidden; }
.mp-progress__bar { height: 100%; background: var(--pri); border-radius: 99px; transition: width .15s ease; min-width: 2px; }
.mp-progress__pct { font-size: 13px; font-weight: 600; color: var(--pri); }
.tx-footer { background: #F5F5F5; border-radius: 5px; margin-top: 12px; padding: 6px 16px; }
.tx-act-del { background: #fff; }
.tx-act-del:hover { background: #fff; }
.tx-ord { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tx-ord:hover { background: var(--paper-2); color: var(--ink); }
.tx-swatch--round { border-radius: 50%; width: 36px; height: 36px; }
/* нижняя панель: активная кнопка-курсор и шеврон */
.spv-dock__btn.active { background: rgb(74,127,248); color: #fff; }
.spv-dock__cv { margin-left: -2px; opacity: .5; }
.spv-layer__eye:hover { color: var(--ink); }
/* нижняя плавающая панель инструментов (как в Tilda) */
.spv-dock { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 7; display: flex; align-items: center; gap: 4px;
  padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: none; }
.spv-dock__btn { width: 38px; height: 38px; border: none; background: transparent; border-radius: 10px; color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.spv-dock__btn:hover { background: var(--paper-2); color: var(--ink); }
.spv-dock__btn.on { background: var(--pri-soft); color: var(--pri-ink); }
.spv-dock__sep { width: 1px; height: 22px; background: var(--line); margin: 0 2px; }
/* подпись grid container */
.spv-cglabel { position: absolute; left: 4px; bottom: 3px; font-size: 10px; color: rgba(74,127,248,.7); pointer-events: none; }
.spv-sheet { position: relative; background: #fff; border-radius: 0; overflow: visible; box-shadow: 0 18px 50px rgba(20,30,60,.22), 0 0 0 1px rgba(0,0,0,.05); flex: none; }
/* Направляющие внутри листа: привязаны к макету, тянутся за его пределы */
.spv-frame-guides { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.spv-frame-guides .spv-uguide { pointer-events: auto; }
.spv-frame-guides .spv-guide--v { top: -3000px; bottom: -3000px; }
.spv-frame-guides .spv-guide--h { left: -3000px; right: -3000px; }
.spv-frame-guides .spv-spine-band { top: -3000px; bottom: -3000px; }
.spv-frame-guides .spv-uguide--v { top: -3000px; bottom: -3000px; }
.spv-frame-guides .spv-uguide--h { left: -3000px; right: -3000px; }
.spv-emptystate { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--ink-3); text-align: center; }
.spv-emptystate p { font-size: 14px; }
.spv-emptystate svg { color: var(--ink-4); }

.spv-zoombar { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 8px; background: var(--surface); border-top: 1px solid var(--line); }
.spv-zoombtn { min-width: 32px; height: 30px; padding: 0 9px; border: 1px solid var(--line); background: var(--surface); border-radius: 8px;
  font-size: 14px; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; }
.spv-zoombtn--wide { font-size: 12.5px; }
.spv-zoombtn:hover:not(:disabled) { background: var(--paper-2); color: var(--ink); }
.spv-zoombtn:disabled { opacity: .45; }
.spv-zoomval { min-width: 48px; text-align: center; font-size: 12.5px; color: var(--ink-2); }
.spv-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 12px; background: var(--surface); border-top: 1px solid var(--line); }

/* правая колонка «Развороты» — стиль панели слоёв */
.spv-right { width: 220px; flex: none; order: 0; display: flex; flex-direction: column; background: var(--surface-sunk, #ececef);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: none; overflow: hidden; padding: 6px; }
.spv-right__head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 10px; }
.spv-right__title { font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2); }
.spv-right__count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(0,0,0,.06);
  color: var(--ink-3); font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.spv-right__list { flex: 1; overflow-y: auto; background: var(--surface); border-radius: 11px; box-shadow: none; }
.spv-item { display: flex; align-items: center; gap: 11px; padding: 9px 11px; background: transparent; cursor: pointer; position: relative;
  border-bottom: 1px solid var(--line-2, #eee); transition: background .12s; }
.spv-item:last-child { border-bottom: none; }
.spv-item:first-child { border-top-left-radius: 11px; border-top-right-radius: 11px; }
.spv-item:hover { background: var(--paper-2, #f6f6f8); }
.spv-item.active { background: rgba(0,0,0,.07); }
.spv-item.active .spv-item__no { color: var(--ink); }
.spv-item__thumb { width: 26px; height: 26px; flex: none; border-radius: 6px; overflow: hidden; background: var(--surface-sunk);
  display: flex; align-items: center; justify-content: center; color: var(--ink-4); border: 1px solid var(--line); }
.spv-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spv-item__no { flex: 1; min-width: 0; font-size: 10px; font-weight: 400; font-family: 'Lato', system-ui, sans-serif; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spv-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--ink-4); }
.spv-dot--green { background: #16a34a; } .spv-dot--amber { background: #d99a16; } .spv-dot--blue { background: var(--pri); }
.spv-dot--red { background: #dc2626; } .spv-dot--violet { background: #7c3aed; } .spv-dot--gray { background: var(--ink-4); }
.spv-item__menu { position: relative; flex: none; }
.spv-item__dots { opacity: 0; }
.spv-item:hover .spv-item__dots, .spv-item.active .spv-item__dots { opacity: 1; }
.spv-rowmenu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 15; min-width: 190px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--sh-lg); padding: 5px; display: flex; flex-direction: column; }
.spv-rowmenu button { text-align: left; background: none; border: none; padding: 8px 10px; border-radius: 7px; font-size: 12.5px; color: var(--ink); }
.spv-rowmenu button:hover { background: var(--paper-2); }
.spv-add { margin: 10px; }

/* адаптив */
@media (max-width: 1100px) {
  .spv-left { width: 280px; }
  .spv-right { width: 200px; }
}
@media (max-width: 820px) {
  .spv-body { flex-direction: column; height: auto; }
  .spv-left, .spv-right { width: 100%; }
  .spv-canvas { min-height: 360px; }
  .spv-right__list { max-height: 320px; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; }
  .spv-item { min-width: 200px; }
}

/* ---- Инлайн-редактор макета внутри разворота ---- */
.spv-le { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.spv-le__bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; background: var(--surface); }
.spv-le__title { font-size: 13px; font-weight: 500; margin-right: 4px; }
.spv-le__props { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line);
  flex-wrap: wrap; background: var(--paper-2); }
.spv-le__props--hint { padding: 10px 12px; }
.field--xs { height: 30px; padding: 2px 6px; width: auto; min-width: 64px; font-size: 12.5px; border-radius: 8px; }
.spv-le__color { display: inline-flex; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; cursor: pointer; }
.spv-le__color input { width: 150%; height: 150%; margin: -25%; border: none; padding: 0; background: none; cursor: pointer; }
.spv-le__seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.spv-le__segbtn { width: 32px; height: 30px; border: none; background: var(--surface); color: var(--ink-2); font-size: 12.5px; font-weight: 500; border-left: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; }
.spv-le__segbtn:first-child { border-left: none; }
.spv-le__segbtn.on { background: var(--pri-soft); color: var(--pri-ink); }
.spv-le__num { display: inline-flex; align-items: center; gap: 3px; height: 30px; padding: 0 7px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 11.5px; color: var(--ink-3); }
.spv-le__num input { width: 46px; border: none; outline: none; background: none; font-size: 12.5px; color: var(--ink); }
.spv-le__stage { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 26px; background: #ECECEF; }
.spv-le__stage .spread-layout-frame { width: 100%; max-width: 880px; }

/* левая панель работы с текстом */
.spv-textpanel { width: 320px; display: flex; flex-direction: column; }
.spv-textpanel__add { display: flex; gap: 8px; margin-bottom: 8px; }
.spv-textpanel__add .btn { flex: 1; justify-content: center; }
.spv-textpanel__guides { width: 100%; justify-content: center; margin-bottom: 12px; }
.spv-guidebar { display: flex; gap: 6px; margin-bottom: 12px; }
.spv-guidebar .btn:first-child { flex: 1; justify-content: center; }
.spv-guidebar .btn { font-weight: 400; }
.spv-textpanel__props { display: flex; flex-direction: column; gap: 4px; }
.spv-textpanel__props .label { margin-top: 8px; }
.spv-textpanel__props .label:first-child { margin-top: 0; }
.spv-textpanel__color { width: 100%; height: 34px; border: 1px solid var(--line); border-radius: 8px; padding: 2px; background: var(--surface); cursor: pointer; }
.spv-textpanel__color--sm { width: 34px; height: 30px; flex: none; }
.spv-textpanel__fx { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.spv-textpanel__fxnum { width: 56px; }
.spv-textpanel__hint { margin-top: 4px; line-height: 1.5; }
.spv-textpanel__save { width: 100%; justify-content: center; margin-top: 12px; }
@media (max-width: 1180px) { .spv-float--tools { width: 300px; } .spv-stage { padding-right: 324px; } }

/* Панель свойств текста — строки «метка слева / контрол справа» (минималистичный стиль). */
.tx { display: flex; flex-direction: column; font-weight: 300; }
.tx .tx-num, .tx .tx-hex, .tx .tx-select, .tx select, .tx input { font-weight: 300; color: #000000; opacity: 1; }
.tx-row { display: grid; grid-template-columns: minmax(0, 1fr) 160px; align-items: center; gap: 15px; min-height: 46px; padding: 7px 0; }
.tx-row--top { align-items: start; }
.tx-row--nolabel { grid-template-columns: 1fr; }
/* карточная компоновка панели фигуры */
.tx-card { background: #F5F5F5; border-radius: 5px; padding: 14px 15px; margin-bottom: 12px; }
.tx-card:last-child { margin-bottom: 0; }
/* Мультивыделение: полноширинный ряд иконок выравнивания + вертикальные radio + выпадашка «распределить». */
.msel-align { display: flex; align-items: center; gap: 6px; margin: 4px 0 14px; }
.msel-align .tx-ord { flex: 1; min-width: 0; }
.msel-dist__btn { gap: 1px; }
.msel-dist { position: absolute; z-index: 40; top: 100%; right: 0; margin-top: 4px; min-width: 170px; padding: 4px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.16); }
.msel-dist button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 9px; border: none; border-radius: 6px;
  background: none; cursor: pointer; font-size: 13px; color: var(--ink); text-align: left; }
.msel-dist button:hover { background: var(--paper-2); }
.msel-radio { display: flex; flex-direction: column; gap: 11px; }
.msel-rb { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: var(--ink); }
.msel-rb input { width: 18px; height: 18px; accent-color: var(--pri); cursor: pointer; margin: 0; flex: none; }
.tx-card .tx-row { min-height: 42px; }
.tx-card--align { padding: 12px 14px; }
.tx-align { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tx-align__g { display: flex; gap: 4px; }
.tx-align__b { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: 8px; color: #1a1a1a; cursor: pointer; }
.tx-align__b:hover { background: rgba(0,0,0,.07); }
.tx-pair { display: flex; gap: 30px; margin-bottom: 16px; padding-right: 12px; }
.tx-pair:last-of-type { margin-bottom: 0; }
.tx-fld { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 10px; }
.tx-fld__l { font-size: 12px; color: var(--ink-3); padding-top: 5px; flex: none; }
.tx-fld__c { width: 74px; flex: none; min-width: 0; display: flex; flex-direction: column; }
.tx-fld__r { display: flex; align-items: baseline; gap: 8px; border-bottom: 1px solid var(--line); }
.tx-fld__r .tx-num--input { border: none; border-radius: 0; background: transparent; font-size: 16px; font-weight: 300; width: 100%; min-width: 0; padding: 4px 0; }
.tx-fld__r .tx-num--input:hover, .tx-fld__r .tx-num--input:focus { background: transparent; }
.tx-unit { font-size: 13px; color: var(--ink-4); flex: none; }
/* Поле «Расширить на»: фикс. ширина числа, чтобы знак % всегда был виден рядом со значением. */
.tx-fld__r--pct { width: auto; flex: none; gap: 2px; }
.tx-fld__r--pct .tx-num--input { width: 40px; flex: none; }
/* ползунок Ш/В стоит под полем ввода. У полей со слайдером (Ш/В) убираем нижнюю линию —
   её визуально заменяет сам ползунок; ползунок поднят ближе к числу. */
.tx-fld .tx-range { width: 100%; margin-top: 6px; flex: none; height: 1px; }
.tx-fld--sl .tx-fld__r { border-bottom: none; }
.tx-fld--sl .tx-range { margin-top: 2px; }
.tx-card .tx-chint { margin-top: 16px; padding: 0; }
.tx-row--top .tx-row__label { padding-top: 7px; }
.tx-row__label { font-size: 12px; font-weight: 300; text-transform: uppercase; letter-spacing: .05em; color: #000000; opacity: .8; }
.tx-row__ctl { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
/* Жёсткое правило: никакие элементы панели свойств не выходят за её границы.
   Всплывающие подсказки при наведении не в потоке (position: fixed) и под правило не попадают. */
.spv-float--tools { overflow-x: hidden; }
.spv-float--tools .tx, .spv-float--tools .tx-card, .spv-float--tools .tx-row,
.spv-float--tools .tx-row__ctl, .spv-float--tools .tx-pair, .spv-float--tools .tx-fld { min-width: 0; max-width: 100%; box-sizing: border-box; }
.tx-row__ctl--two { gap: 14px; }
.tx-chk { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #6b7280; cursor: pointer; user-select: none; white-space: nowrap; }
.tx-chk input { margin: 0; cursor: pointer; }

/* Карточки шаблонов */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.tpl-card { border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.tpl-card__prev { position: relative; width: 100%; background: #faf7f0; border-bottom: 1px solid var(--line); overflow: hidden; }
.tpl-card__prev .spv-composite { width: 100%; height: 100%; }
.tpl-card__del { position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,.9); border-radius: 8px; }
.tpl-card__del:hover { color: var(--red-ink, #d23); }
.tpl-card__body { padding: 10px 12px; }
.tpl-card__name { font-weight: 600; font-size: 13px; margin-bottom: 2px; }

/* Анкета книги пожеланий */
.wb { display: flex; flex-direction: column; gap: 14px; max-width: 880px; }
.wb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.wb-title { font-size: 18px; font-weight: 600; margin: 0 0 2px; }
.wb-mode { display: inline-flex; gap: 6px; }
.wb-mode__b { padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 12px; cursor: pointer; color: var(--ink-3); }
.wb-mode__b.is-on { background: var(--pri); border-color: var(--pri); color: #fff; }
.wb-mode__b:disabled { opacity: .55; cursor: default; }
.gen-keep__opt { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; margin-top: 6px; }
.gen-keep__opt input { margin-top: 2px; }
.gen-keep__opt.is-on { border-color: var(--pri); background: #faf6ec; }
.gen-keep__opt b { font-size: 13px; }
.wb-card { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 14px 16px; }
.wb-card__h { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; margin-bottom: 12px; }
.wb-grid { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: start; }
.wb-fields { display: flex; flex-direction: column; min-width: 0; }
.wb-photo { display: flex; flex-direction: column; gap: 8px; }
.wb-photo__img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; background: #faf7f0; }
.wb-photo__empty { width: 100%; aspect-ratio: 2 / 1; border-radius: 10px; border: 1px dashed var(--line); display: flex; align-items: center; justify-content: center; color: var(--ink-4); background: #faf7f0; }
.wb-photo__btns { display: flex; gap: 6px; }
.wb-lib { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; padding: 2px 7px; border: 1px solid var(--line); border-radius: 7px; background: #fff; font-size: 11px; color: #c2a05a; cursor: pointer; }
.wb-lib:hover { border-color: #c2a05a; }
.wb-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }
@media (max-width: 640px) { .wb-grid { grid-template-columns: 1fr; } }

.field--error { border-color: var(--red) !important; box-shadow: 0 0 0 3px var(--red-soft); }

/* Массовое выделение заказов в таблице. */
.tbl .tbl-check { width: 34px; }
.tbl .tbl-check input { cursor: pointer; width: 15px; height: 15px; }
.tbl tr.is-selected td { background: var(--pri-soft); }

/* Скачивание одного разворота на этапе «Сборка»: кнопка поверх миниатюры + меню вариантов. */
.final-cell { min-width: 0; }
.dl-btn { position: absolute; top: 6px; right: 6px; z-index: 4; width: 28px; height: 28px; border: none; border-radius: 8px;
  background: rgba(19,19,19,.62); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.dl-btn:hover { background: rgba(19,19,19,.82); }
.dl-menu { position: absolute; top: 38px; right: 6px; z-index: 20; min-width: 176px; padding: 5px; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--sh-pop); }
.dl-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 9px; border: none; border-radius: 7px;
  background: none; cursor: pointer; font-size: 13px; color: var(--ink); text-align: left; }
.dl-menu button:hover:not(:disabled) { background: var(--paper-2); }
.dl-menu button:disabled { opacity: .45; cursor: default; }

/* ================= Энциклопедия — замена ребёнка (современный SaaS-редизайн) ================= */
.enc { --enc-bg:#F6F7FB; --enc-card:#FFFFFF; --enc-line:#E5E7EB; --enc-t1:#111827; --enc-t2:#6B7280; --enc-t3:#9CA3AF; --enc-blue:var(--pri,#2563EB); --enc-blue-soft:#EEF4FF; --enc-blue-ink:#2A55C0; --enc-warn:#F59E0B; --enc-warn-bg:#FFF7ED; --enc-warn-ink:#B45309;
  background: transparent; padding: 0; display: flex; flex-direction: column; gap: 20px; position: relative; }
.enc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.enc-title { font-size: 20px; font-weight: 700; color: var(--enc-t1); margin: 0 0 6px; letter-spacing: -.01em; }
.enc-sub { font-size: 13px; line-height: 1.5; color: var(--enc-t2); margin: 0; max-width: 720px; }
.enc-mode { display: inline-flex; gap: 6px; background: #fff; border: 1px solid var(--enc-line); border-radius: 12px; padding: 4px; flex: none; }
.enc-mode__b { padding: 7px 14px; border: none; border-radius: 9px; background: transparent; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--enc-t2); }
.enc-mode__b.is-on { background: var(--enc-blue); color: #fff; }

.enc-grid { display: grid; grid-template-columns: 384px minmax(0, 1fr); gap: 24px; align-items: start; }
.enc-side { position: sticky; top: 12px; }

.enc-card { background: var(--enc-card); border: 1px solid var(--enc-line); border-radius: 18px; padding: 22px; box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 1px 3px rgba(17,24,39,.03); }
.enc-card__h { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.enc-card__ic { width: 34px; height: 34px; border-radius: 10px; background: var(--enc-blue-soft); color: var(--enc-blue); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.enc-card__title { font-size: 15px; font-weight: 600; color: var(--enc-t1); }
.enc-card__hint { font-size: 12px; color: var(--enc-t3); margin-top: 2px; line-height: 1.4; }

.enc-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.enc-ph { position: relative; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; background: #F3F4F6; }
.enc-ph__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.enc-ph__del { position: absolute; top: 7px; right: 7px; width: 26px; height: 26px; border: none; border-radius: 8px; background: rgba(17,24,39,.62); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(2px); }
.enc-ph__del:hover { background: rgba(17,24,39,.82); }
.enc-ph__add { width: 100%; height: 100%; border: 1.5px dashed #CBD5E1; border-radius: 14px; background: #FBFCFE; color: var(--enc-t2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font-size: 12px; }
.enc-ph__add:hover { border-color: var(--enc-blue); color: var(--enc-blue); background: var(--enc-blue-soft); }
.enc-ph__add.is-loading { cursor: default; color: var(--enc-blue); }

.enc-vald { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px; color: var(--enc-warn-ink); background: var(--enc-warn-bg); border: 1px solid #FCD9A8; padding: 7px 10px; border-radius: 10px; }

.enc-field { margin-top: 16px; }
.enc-field__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.enc-lab, .enc-field__row label { font-size: 12.5px; font-weight: 500; color: #374151; display: block; margin-bottom: 7px; }
.enc-field__row label { margin-bottom: 0; }
.enc-req { color: #EF4444; }
.enc-help { border: none; background: none; color: var(--enc-blue); font-size: 12px; cursor: pointer; padding: 0; }
.enc-input { width: 100%; height: 42px; border: 1px solid var(--enc-line); border-radius: 11px; padding: 0 13px; font-size: 14px; color: var(--enc-t1); background: #fff; box-sizing: border-box; transition: border-color .12s, box-shadow .12s; font-family: inherit; }
.enc-input:focus { outline: none; border-color: var(--enc-blue); box-shadow: 0 0 0 3px var(--enc-blue-soft); }
.enc-input.is-empty { border-color: #FBBF24; }
.enc-textarea { height: auto; min-height: 78px; padding: 10px 13px; resize: vertical; line-height: 1.5; }
.enc-field__help { font-size: 11.5px; color: var(--enc-t3); margin-top: 6px; }
.enc-tokens { margin-top: 8px; font-size: 11.5px; color: var(--enc-blue-ink); background: var(--enc-blue-soft); border-radius: 9px; padding: 8px 10px; line-height: 1.6; word-break: break-word; }
.enc-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.enc-row2 .enc-field { margin-top: 16px; }

.enc-gal { padding-bottom: 22px; }
.enc-gal__h { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.enc-count { font-size: 12px; font-weight: 600; color: var(--enc-blue-ink); background: var(--enc-blue-soft); border-radius: 99px; padding: 3px 10px; }
.enc-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.enc-search { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; border: 1px solid var(--enc-line); border-radius: 10px; background: #fff; color: var(--enc-t3); }
.enc-search input { border: none; outline: none; background: none; font-size: 13px; width: 92px; color: var(--enc-t1); }
.enc-selfilter { height: 34px; border: 1px solid var(--enc-line); border-radius: 10px; background: #fff; padding: 0 10px; font-size: 13px; color: var(--enc-t1); cursor: pointer; }
.enc-viewtog { display: inline-flex; border: 1px solid var(--enc-line); border-radius: 10px; overflow: hidden; }
.enc-viewtog button { width: 34px; height: 34px; border: none; background: #fff; color: var(--enc-t2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.enc-viewtog button.on { background: var(--enc-blue-soft); color: var(--enc-blue); }

.enc-note { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 10px 12px; border-radius: 12px; margin-bottom: 14px; line-height: 1.4; }
.enc-note--warn { background: var(--enc-warn-bg); border: 1px solid #FCD9A8; color: var(--enc-warn-ink); }

.enc-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 56px 20px; color: var(--enc-t3); border: 1.5px dashed #D8DEE9; border-radius: 16px; background: #FBFCFE; }
.enc-empty__t { font-size: 14px; font-weight: 600; color: var(--enc-t2); }
.enc-empty span { font-size: 12.5px; }
.enc-empty--sm { padding: 34px 20px; }

.enc-cards--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.enc-cards--list { display: flex; flex-direction: column; gap: 12px; }
.enc-scard { border: 1px solid var(--enc-line); border-radius: 16px; overflow: hidden; background: #fff; transition: box-shadow .14s, border-color .14s, transform .14s; min-width: 0; }
.enc-scard:hover { box-shadow: 0 8px 22px rgba(17,24,39,.09); border-color: #CBD5E1; }
.enc-scard__img { position: relative; aspect-ratio: 4 / 3; background: #F3F4F6; }
.enc-scard__i { width: 100%; height: 100%; object-fit: cover; display: block; }
.enc-scard__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--enc-t3); font-size: 12px; }
.enc-scard__num { position: absolute; top: 8px; left: 8px; font-size: 11px; font-weight: 600; color: #fff; background: rgba(17,24,39,.6); padding: 3px 9px; border-radius: 8px; backdrop-filter: blur(2px); }
.enc-scard__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 11px; }
.enc-scard__foot .enc-pill { max-width: 100%; overflow: hidden; }
.enc-scard__foot .enc-mini--pri { margin-left: auto; }
.enc-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 99px; white-space: nowrap; border: none; font-family: inherit; }
button.enc-pill { cursor: pointer; }
button.enc-pill--blue:hover { background: #E0EAFF; }
button.enc-pill--warn:hover { background: #FEEFD5; }
.enc-pill--blue { background: var(--enc-blue-soft); color: var(--enc-blue-ink); }
.enc-pill--warn { background: var(--enc-warn-bg); color: var(--enc-warn-ink); }
.enc-pill--muted { background: #F3F4F6; color: var(--enc-t2); }
.enc-mini { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border: 1px solid var(--enc-line); border-radius: 9px; background: #fff; color: var(--enc-t1); font-size: 12.5px; font-weight: 500; cursor: pointer; flex: none; }
.enc-mini:hover { background: #F9FAFB; border-color: #CBD5E1; }
.enc-mini--pri { border-color: var(--enc-blue); color: var(--enc-blue); }
.enc-mini--pri:hover { background: var(--enc-blue-soft); }

.enc-cards--list .enc-scard { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: stretch; }
.enc-cards--list .enc-scard__img { aspect-ratio: auto; }
.enc-cards--list .enc-scard__foot { align-items: center; }

.enc-footer { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 2px 2px 0; }
.enc-footer__hint { font-size: 12.5px; color: var(--enc-t2); min-width: 0; }
.enc-warn { display: inline-flex; align-items: center; gap: 6px; color: var(--enc-warn-ink); }
.enc-nextlbl { color: var(--enc-t3); }
.enc-footer__acts { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.enc-footer .enc-cta { height: 44px; padding: 0 20px; font-weight: 600; box-shadow: 0 6px 18px rgba(74,127,248,.32); }
.enc-footer .enc-next { color: var(--enc-t2); }

@media (max-width: 1100px) {
  .enc-grid { grid-template-columns: 1fr; }
  .enc-side { position: static; }
}
@media (max-width: 720px) {
  .enc-cards--grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .enc-cards--list .enc-scard { grid-template-columns: 120px minmax(0, 1fr); }
  .enc-footer__acts { width: 100%; }
  .enc-footer .enc-cta { flex: 1; justify-content: center; }
}
.tx-row__ctl--wrap { flex-wrap: wrap; gap: 6px; padding: 5px 0; }
/* сегменты (выравнивание, регистр) */
.tx-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.tx-seg__btn { min-width: 30px; height: 28px; padding: 0 7px; border: none; background: var(--surface); color: var(--ink-2);
  font-size: 12px; font-weight: 400; border-left: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tx-seg__btn:first-child { border-left: none; }
.tx-seg__btn:hover { background: var(--paper-2); }
.tx-seg__btn.on { background: var(--pri-soft); color: var(--pri-ink); }
/* цветовой образец */
.tx-swatch { width: 30px; height: 30px; flex: none; border-radius: 999px; border: 1px solid rgba(0,0,0,.15); overflow: hidden; cursor: pointer; position: relative; box-shadow: inset 0 0 0 2px #fff; }
.tx-swatch--sm { width: 26px; height: 26px; border-radius: 7px; }
.tx-swatch input { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); border: none; padding: 0; background: none; cursor: pointer; opacity: 0; }
.tx-hex { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* числовое значение слева от ползунка */
.tx-num { font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 30px; }
/* редактируемое числовое значение */
.tx-num--input { width: 42px; min-width: 42px; flex: none; font-size: 16px; color: #000; font-variant-numeric: tabular-nums; text-align: left;
  border: 1px solid transparent; background: transparent; border-radius: 5px; padding: 2px 4px; -moz-appearance: textfield; }
.tx-num--input::-webkit-outer-spin-button, .tx-num--input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tx-num--input:hover { background: var(--paper-2); }
.tx-num--input:focus { outline: none; border-color: var(--pri); background: #fff; }
.tx-wh { display: flex; align-items: center; gap: 6px; flex: 1; }
.tx-wh__l { font-size: 11px; color: var(--ink-4); flex: none; }
.tx-wh .tx-num--input { flex: 1; width: auto; border: 1px solid var(--line); background: var(--surface); }
/* грани-ручки box-слоёв */
.slb-edge { position: absolute; z-index: 3; }
.slb-edge--t { top: -4px; left: 9px; right: 9px; height: 8px; cursor: ns-resize; }
.slb-edge--b { bottom: -4px; left: 9px; right: 9px; height: 8px; cursor: ns-resize; }
.slb-edge--l { left: -4px; top: 9px; bottom: 9px; width: 8px; cursor: ew-resize; }
.slb-edge--r { right: -4px; top: 9px; bottom: 9px; width: 8px; cursor: ew-resize; }
/* модалка выбора изображения */
.mp-drop { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 20px; border: 2px dashed var(--line); border-radius: 12px; color: var(--ink-3); cursor: pointer; text-align: center; }
.mp-drop.over { border-color: var(--pri); background: var(--pri-soft); color: var(--pri-ink); }
.mp-drop__t { font-size: 13px; }
.mp-or { text-align: center; color: var(--ink-4); font-size: 12px; margin: 14px 0 8px; }
/* перетаскивание слоёв + ховер-иконки */
.spv-layer__grip { color: var(--ink-4); flex: none; cursor: grab; opacity: 0; }
.spv-layer:hover .spv-layer__grip { opacity: .55; }
.spv-layer__hov { opacity: 0; }
.spv-layer:hover .spv-layer__hov { opacity: 1; }
.spv-layer.locked .spv-layer__hov { opacity: 1; }
/* ползунок */
.tx-range { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 1px; border-radius: 1px; background: var(--line); outline: none; }
.tx-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0,0,0,.16); cursor: pointer; }
.tx-range::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0,0,0,.16); cursor: pointer; }
.tx-mini { display: flex; flex-direction: column; align-items: stretch; gap: 3px; flex: 1; min-width: 0; }
.tx-mini .tx-num--input { text-align: center; }
.tx-mini .tx-range { flex: none; height: 1px; }
/* Окно позиционирования изображения (fit=cover): масштаб + перемещение внутри области. */
.spv-crop { position: fixed; inset: 0; z-index: 200; background: rgba(20,20,22,.93); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 28px; }
.spv-crop__stage { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.spv-crop__frame { height: 70vh; max-width: 82vw; overflow: hidden; background: #111; border: 2px solid var(--pri, #4a7ff8); cursor: grab; }
.spv-crop__frame img { pointer-events: none; user-select: none; -webkit-user-drag: none; display: block; }
.spv-crop__bar { display: flex; align-items: center; gap: 14px; background: #2b2b2e; border-radius: 14px; padding: 10px 16px; }
.spv-crop__range { width: 200px; flex: none; height: 3px; }
.spv-crop__zbtn { width: 28px; height: 28px; border: none; border-radius: 7px; background: transparent; color: #e6e6e6; font-size: 20px; line-height: 1; cursor: pointer; }
.spv-crop__zbtn:hover { background: rgba(255,255,255,.12); }
.spv-crop__reset { border: none; background: transparent; color: #b9b9bd; font-size: 13px; letter-spacing: .04em; cursor: pointer; padding: 8px 12px; }
.spv-crop__reset:hover { color: #fff; }
.spv-crop__cancel { border: 1px solid rgba(255,255,255,.28); background: transparent; color: #eee; font-size: 13px; letter-spacing: .04em; cursor: pointer; padding: 9px 18px; border-radius: 9px; }
.spv-crop__cancel:hover { background: rgba(255,255,255,.1); }
.spv-crop__save { border: none; background: #fff; color: #111; font-size: 13px; font-weight: 600; letter-spacing: .04em; cursor: pointer; padding: 9px 20px; border-radius: 9px; }
.spv-crop__save:hover { filter: brightness(.94); }
/* выпадающий список без рамки, с нижней линией */
.tx-select { width: 100%; border: none; border-bottom: 1px solid var(--line); background: transparent; padding: 5px 18px 5px 2px; font-size: 13px; color: var(--ink); cursor: pointer;
  appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' fill='none' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; }
.tx-select:focus { outline: none; border-bottom-color: var(--pri); }
/* чипы эффектов */
.tx-chip { height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2);
  font-size: 12px; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.tx-chip:hover { background: var(--paper-2); }
.tx-chip.on { background: var(--pri-soft); color: var(--pri-ink); border-color: var(--pri); }
.tx-fxnum { width: 52px; height: 28px; border: 1px solid var(--line); border-radius: 7px; padding: 0 6px; font-size: 12px; background: var(--surface); color: var(--ink); }
/* компактный переключатель эффекта (вкл/выкл) рядом с ползунком */
.tx-toggle { width: 28px; height: 28px; flex: none; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tx-toggle:hover { background: var(--paper-2); color: var(--ink-2); }
.tx-toggle.on { background: var(--pri-soft); border-color: var(--pri); color: var(--pri-ink); }
.tx-range:disabled { opacity: .45; cursor: default; }
.tx-range:disabled::-webkit-slider-thumb { cursor: default; }

/* направляющие (сетка) */
.spv-guides { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.spv-guide { position: absolute; background: rgba(74,127,248,.4); }
.spv-guide--v { top: 0; bottom: 0; width: 1px; }
.spv-guide--h { left: 0; right: 0; height: 1px; }
.spv-guide--h[style*="50%"] { background: rgba(74,127,248,.7); }
/* центральная вертикаль — выделяется насыщенностью, толщина 1px как у горизонтальных */
.spv-guide--center { width: 1px; background: rgba(74,127,248,.95); }

/* пользовательские направляющие (перетаскиваемые), красные */
.spv-uguide { position: absolute; z-index: 5; }
.spv-uguide--v { top: 0; bottom: 0; width: 11px; margin-left: -5px; cursor: ew-resize;
  background: linear-gradient(90deg, transparent 5px, #ef3b3b 5px, #ef3b3b 6px, transparent 6px); }
.spv-uguide--h { left: 0; right: 0; height: 11px; margin-top: -5px; cursor: ns-resize;
  background: linear-gradient(180deg, transparent 5px, #ef3b3b 5px, #ef3b3b 6px, transparent 6px); }
.spv-uguide:hover { background-color: rgba(239,59,59,.08); }
/* бейдж с координатой при наведении */
.spv-uguide__badge { display: none; position: absolute; align-items: center; gap: 5px; height: 22px; padding: 0 4px 0 6px;
  background: #ef3b3b; color: #fff; font-size: 11px; font-weight: 500; border-radius: 999px; white-space: nowrap;
  font-variant-numeric: tabular-nums; box-shadow: 0 2px 6px rgba(0,0,0,.2); z-index: 6; }
.spv-uguide:hover .spv-uguide__badge { display: inline-flex; }
.spv-uguide--v .spv-uguide__badge { top: 6px; left: 50%; transform: translateX(-50%); }
.spv-uguide--h .spv-uguide__badge { left: 6px; top: 50%; transform: translateY(-50%); }
.spv-uguide__x { width: 15px; height: 15px; border: none; border-radius: 50%; background: rgba(255,255,255,.28); color: #fff;
  font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.spv-uguide__x:hover { background: rgba(255,255,255,.5); }
.spv-uguide__inp { width: 38px; border: none; background: rgba(255,255,255,.18); color: #fff; font-size: 11px; font-weight: 500;
  border-radius: 5px; padding: 1px 4px; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.spv-uguide__inp::-webkit-outer-spin-button, .spv-uguide__inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.spv-uguide__inp:focus { outline: none; background: rgba(255,255,255,.32); }

/* стабильный курсор при перетаскивании блока / панорамировании */
body.spv-grabbing-move, body.spv-grabbing-move * { cursor: move !important; }
body.spv-grabbing, body.spv-grabbing * { cursor: grabbing !important; }
/* при перетаскивании рамка блока остаётся видимой */
.spread-layout-block.dragging { border-color: var(--pri) !important; border-style: solid !important; box-shadow: 0 0 0 1px var(--pri); }

/* композит «изображение + текст макета» (миниатюры с текстом, 2:1) */
.spv-composite { position: relative; width: 100%; aspect-ratio: 2 / 1; container-type: inline-size; overflow: hidden; background: var(--surface-sunk); }
.spv-composite__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; align-items: center; justify-content: center; color: var(--ink-4); }
.spv-composite__block { position: absolute; white-space: pre-wrap; overflow: hidden; padding: 0.6cqw 0.9cqw; box-sizing: border-box; }

/* Кнопка «Далее» по этапам заказа */
.stage-next { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 18px; padding: 14px 2px 6px; border-top: 1px solid var(--border, #e7e3da); }
.stage-next__hint { color: var(--ink-3); font-size: 13px; }
.page--editor .stage-next { padding-left: 14px; padding-right: 14px; }
.stage-miss { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.stage-miss li { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.stage-miss li svg { color: #d98c1a; flex: none; }

/* Сортируемые/перетаскиваемые столбцы таблицы заказов */
.tbl thead th.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.tbl thead th.th-sort:hover { color: var(--ink-1, #1b1b1b); }
.tbl thead th.th-drag { opacity: .45; }
.th-sort__in { display: inline-flex; align-items: center; gap: 4px; }
.th-sort__arrow { color: var(--pri); font-size: 9px; line-height: 1; }

/* Направляющие обложки: загиб 15мм + безопасная зона */
.spv-cover-guides { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.spv-cg { position: absolute; }
.spv-cg--fold { border: 1.5px dashed rgba(224,80,80,0.9); }
.spv-cg--safe { border: 1.5px dashed rgba(74,127,248,0.85); }
.spv-cg__label { position: absolute; top: 4px; left: 6px; font-size: 10px; line-height: 1; background: rgba(0,0,0,0.55); color: #fff; padding: 3px 6px; border-radius: 4px; white-space: nowrap; }

/* Дизайн-сетка: загиб / текстовая зона / корешок */
.spv-guide--fold { background: rgba(74,127,248,.8); }
.spv-guide--safe { background: rgba(74,127,248,.45); }
.spv-guide--spine { background: rgba(74,127,248,.6); }

/* Бейдж размера обложки/разворота */
.spv-size-badge { position: absolute; top: 6px; left: 6px; z-index: 5; font-size: 11px; line-height: 1; background: rgba(0,0,0,0.6); color: #fff; padding: 4px 8px; border-radius: 5px; white-space: nowrap; pointer-events: none; }

/* Корешок (полоса 6мм) + центр разворота */
.spv-spine-band { position: absolute; top: 0; bottom: 0; z-index: 1; background: rgba(74,127,248,.14); border-left: 1px solid rgba(74,127,248,.85); border-right: 1px solid rgba(74,127,248,.85); pointer-events: none; }
.spv-guide--spreadcenter { width: 2px; margin-left: -1px; background: rgba(74,127,248,.95); }

.spv--loading { display: flex; align-items: center; justify-content: center; min-height: 60vh; }

/* Линейки редактора (мм) — оверлей по верхнему и левому краю рабочей области */
.spv-ruler { position: absolute; z-index: 30; background: rgba(248,247,243,.92); pointer-events: none; overflow: hidden; }
.spv-ruler--h { top: 0; left: 0; right: 0; height: 17px; border-bottom: 1px solid rgba(0,0,0,.18); }
.spv-ruler--v { top: 0; left: 0; bottom: 0; width: 17px; border-right: 1px solid rgba(0,0,0,.18); }
.spv-ruler-corner { position: absolute; top: 0; left: 0; width: 17px; height: 17px; background: rgba(236,235,230,.98); z-index: 31; pointer-events: none; border-right: 1px solid rgba(0,0,0,.18); border-bottom: 1px solid rgba(0,0,0,.18); }
.spv-rtick { position: absolute; }
.spv-ruler--h .spv-rtick { bottom: 0; width: 1px; height: 4px; background: rgba(0,0,0,.28); }
.spv-ruler--h .spv-rtick--major { height: 9px; background: rgba(0,0,0,.5); }
.spv-ruler--v .spv-rtick { right: 0; height: 1px; width: 4px; background: rgba(0,0,0,.28); }
.spv-ruler--v .spv-rtick--major { width: 9px; background: rgba(0,0,0,.5); }
.spv-rnum { position: absolute; font-style: normal; color: rgba(0,0,0,.72); font-size: 9px; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.spv-ruler--h .spv-rnum { bottom: 8px; left: 2px; }
.spv-ruler--v .spv-rnum { left: 1px; top: 2px; font-size: 8px; }
.spv-vp-guides { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.spv-vp-guides .spv-uguide { pointer-events: auto; }

.spv-uguide__unit { color: rgba(255,255,255,.85); font-size: 11px; font-weight: 500; padding-right: 4px; }

/* Подписи ручных направляющих — у края макета (линия тянется на 3000px за пределы) */
.spv-frame-guides .spv-uguide--v .spv-uguide__badge { top: 3000px; }
.spv-frame-guides .spv-uguide--h .spv-uguide__badge { left: 3000px; }

/* ===== Этап «Персонажи и обложка»: рабочая область персонажа ===== */
.vs-thumb { flex: none; width: 56px; height: 40px; border-radius: 9px; overflow: hidden; background: var(--surface-sunk); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--ink-4); }
.vs-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cw { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(220px, 1.7fr) minmax(150px, 1fr); gap: 14px; align-items: start; }
.cw__col { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cw__coltitle { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; font-weight: 500; }
.cw__variant-list { display: flex; flex-direction: column; gap: 8px; max-height: 380px; overflow-y: auto; padding-right: 2px; }
.cw__variant { position: relative; display: flex; gap: 9px; align-items: center; padding: 7px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.cw__variant:hover { border-color: #c8c8c8; background: var(--paper-2); }
.cw__variant.selected { border-color: var(--pri); box-shadow: 0 0 0 2px var(--pri-soft); }
.cw__variant-img { flex: none; width: 52px; height: 52px; border-radius: 9px; overflow: hidden; background: var(--surface-sunk); display: flex; align-items: center; justify-content: center; color: var(--ink-4); }
.cw__variant-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cw__variant-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cw__variant-name { font-size: 12.5px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw__variant-sub { font-size: 10.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw__variant-check { position: absolute; top: 7px; right: 7px; width: 20px; height: 20px; border-radius: 50%; background: var(--pri); color: #fff; display: flex; align-items: center; justify-content: center; }
.cw__main { gap: 10px; }
.cw__preview { width: 100%; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-sunk); padding: 0; cursor: zoom-in; display: block; }
.cw__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cw__preview--empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--ink-4); cursor: default; text-align: center; padding: 16px; }
.cw__empty-t { font-size: 13px; color: var(--ink-2); }
.cw__gen { width: 100%; }
.cw__hint { margin: 0; }
.cw__empty--list { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 120px; color: var(--ink-4); border: 1px dashed var(--line); border-radius: 12px; }
.cw__dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 18px 12px; min-height: 160px; border: 1.5px dashed var(--line); border-radius: 14px; background: var(--paper-2); color: var(--ink-4); }
.cw__dropzone--active { border-style: solid; border-color: var(--pri-soft-2); background: var(--pri-soft); color: var(--pri-ink); }
.cw__dropzone b { font-size: 15px; color: var(--pri-ink); }
@media (max-width: 1280px) { .cw { grid-template-columns: 1fr 1fr; } .cw__work { grid-column: 1 / -1; } }
@media (max-width: 720px) { .cw { grid-template-columns: 1fr; } .cw__work { grid-column: auto; } }

/* Карточка обложки */
.cover-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.cover-thumb { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); padding: 0; background: transparent; cursor: zoom-in; transition: border-color .15s, box-shadow .15s; }
.cover-thumb:hover { border-color: #c8c8c8; }
.cover-thumb.selected { outline: 1.5px solid var(--pri); border-color: var(--pri); }
.cover-thumb img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; display: block; }
.cover-thumb__badge { position: absolute; bottom: 8px; left: 8px; }

/* ===== Этап «Персонаж и обложка»: 3 колонки (Фото · Персонажи · Обложка) ===== */
.pc3 { display: grid; grid-template-columns: minmax(220px, 1.15fr) minmax(300px, 1.9fr) minmax(220px, 1fr); gap: 18px; align-items: stretch; }
.pc4 { display: grid; grid-template-columns: repeat(4, minmax(200px, 1fr)); gap: 18px; align-items: stretch; }
/* Колонки-панели — флекс по высоте, чтобы кнопки действий прижать к низу и выровнять в один ряд. */
.pc4 > .panel { display: flex; flex-direction: column; }
.pc4 > .panel > .panel__b { display: flex; flex-direction: column; flex: 1 1 auto; }
.pc4-action { width: 100%; margin-top: auto; }
@media (max-width: 1280px) { .pc4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .pc4 { grid-template-columns: 1fr; } }
.vs-thumb--wide { width: 100%; height: auto; aspect-ratio: 16 / 9; }
@media (max-width: 1100px) { .pc3 { grid-template-columns: 1fr 1.5fr; } .pc3 > :nth-child(3) { grid-column: 1 / -1; } }
@media (max-width: 700px) { .pc3 { grid-template-columns: 1fr; } .pc3 > :nth-child(3) { grid-column: auto; } }

/* Пустая карточка загрузки фото */
.reference-card--add { border-style: dashed; cursor: pointer; }
.reference-card--add:hover { border-color: var(--pri); background: var(--pri-soft); }
.reference-card__img--add { display: flex; align-items: center; justify-content: center; color: var(--ink-4); }

/* Карточки персонажей в ряд */
.char-row { display: flex; flex-direction: column; gap: 12px; }
.char-card { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.char-card__img { position: relative; width: 100%; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-sunk); padding: 0; cursor: zoom-in; display: flex; align-items: center; justify-content: center; color: var(--ink-4); transition: border-color .15s, box-shadow .15s; }
.char-card__img:hover { border-color: #c8c8c8; }
.char-card.selected .char-card__img { border-color: var(--pri); box-shadow: 0 0 0 2px var(--pri-soft); }
.char-card__img img { width: 100%; height: auto; display: block; }
.char-card__check { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--pri); color: #fff; display: flex; align-items: center; justify-content: center; }
.char-card__badge { position: absolute; bottom: 8px; left: 8px; }
.char-card__foot { display: flex; justify-content: center; }

/* Комментарии арт-директора внутри колонки обложки */
.cover-comments { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.cover-comments__h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
.cover-comments__h svg { color: var(--ink-3); }