/* Lines Презентации — облик поверх редактора.

   Все правила — под :root[data-product="prez"] (пометку ставит src/product.js
   до первой отрисовки), и Tertsia их не видит.

   Основа — токены редизайна портала, как у Тетради (lines-docs/public/
   tokens.css): острова стекла поверх стола, Golos Text. Отличия от портала
   — из макета (Разборы/LINES-ПРЕЗЕНТАЦИИ-макет.html): акцент оранжевый, как
   значок (--ah:36), стол чуть тёплый (--bh:60). Светлая сторона по
   умолчанию; тёмная и «как в системе» — в настройках (`data-theme`).

   Переменные Tertsia (--bg, --panel, --text, --accent…) переопределяются
   ТОКЕНАМИ, а не пишутся заново по правилам: так весь редактор — палитра
   свойств, лента слайдов, окна, меню — меняет облик разом, а правил своих у
   Презентаций остаётся немного. */

@font-face { font-family: "Golos Text"; font-weight: 400; src: url("../assets/fonts/GolosText-Regular.ttf"); }
@font-face { font-family: "Golos Text"; font-weight: 500; src: url("../assets/fonts/GolosText-Medium.ttf"); }
@font-face { font-family: "Golos Text"; font-weight: 600; src: url("../assets/fonts/GolosText-SemiBold.ttf"); }
@font-face { font-family: "Golos Text"; font-weight: 700; src: url("../assets/fonts/GolosText-Bold.ttf"); }
/* Значки — Material Symbols Rounded, как в макете (Apache 2.0, LICENSE-material-symbols.txt) */
@font-face { font-family: "Material Symbols Rounded"; font-weight: 100 700; font-display: block; src: url("../assets/fonts/MaterialSymbolsRounded.woff2") format("woff2"); }
/* Заголовки — Geologica, как --f-head портала. Файл переменный, вес 100–900 */
@font-face { font-family: "Geologica"; font-weight: 100 900; src: url("../assets/fonts/Geologica-Var.ttf"); }

:root[data-product="prez"] {
  --f-ui: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-head: "Geologica", "Golos Text", system-ui, sans-serif;
  --bh: 60; --bc: .004; --cf: 1; --ah: 36; --ak: 1;
  --Lb: .93; --Ls: .995; --Ll: .88; --Ll2: .80; --Li: .21; --Li2: .42; --Li3: .50; --Lc: .965;
  --La: .58; --Lah: .52; --Ca: .2; --Lsoft: .95; --Csoft: .04;
  --edge: rgba(255, 255, 255, .75); --edge-2: rgba(255, 255, 255, .28);
  --sh-1: 0 0 0 .5px rgba(20, 24, 28, .06), 0 1px 2px rgba(20, 24, 28, .05), 0 2px 8px rgba(20, 24, 28, .04);
  --sh-2: 0 0 0 .5px rgba(20, 24, 28, .07), 0 2px 4px rgba(20, 24, 28, .04), 0 10px 28px rgba(20, 24, 28, .08);
  --sh-3: 0 0 0 .5px rgba(20, 24, 28, .08), 0 4px 10px rgba(20, 24, 28, .05), 0 24px 60px rgba(20, 24, 28, .14);
  --accent-ink: #fff;
  --blur: blur(30px) saturate(180%);

  --base: oklch(var(--Lb) calc(var(--bc) * var(--cf)) var(--bh));
  --solid: oklch(var(--Ls) calc(var(--bc) * var(--cf) * .5) var(--bh));
  --island: oklch(var(--Lc) calc(var(--bc) * var(--cf) * .7) var(--bh));
  --line-t: oklch(var(--Ll) calc(var(--bc) * var(--cf)) var(--bh));
  --line-2: oklch(var(--Ll2) calc(var(--bc) * var(--cf)) var(--bh));
  --ink: oklch(var(--Li) calc(var(--bc) * .6) var(--bh));
  --ink-2: oklch(var(--Li2) calc(var(--bc) * .8) var(--bh));
  --ink-3: oklch(var(--Li3) calc(var(--bc) * .8) var(--bh));
  --acc: oklch(var(--La) calc(var(--Ca) * var(--ak)) var(--ah));
  --acc-hover: oklch(var(--Lah) calc(var(--Ca) * var(--ak)) var(--ah));
  --acc-soft: oklch(var(--Lsoft) calc(var(--Csoft) * var(--ak)) var(--ah));
  --sunken: color-mix(in srgb, var(--ink) 5%, transparent);
  --hover-t: color-mix(in srgb, var(--ink) 7%, transparent);
  --hair: color-mix(in srgb, var(--ink) 8%, transparent);
  --dot: color-mix(in srgb, var(--ink) 14%, transparent);
  --in: inset 0 1px 0 var(--edge), inset 0 0 0 1px var(--edge-2);
  --glass: color-mix(in srgb, var(--solid) 80%, transparent);

  /* Переменные редактора — из токенов */
  --bg: var(--base);
  --panel: var(--solid);
  --panel-2: var(--island);
  --line: var(--line-t);
  --text: var(--ink);
  --muted: var(--ink-3);
  --stage: var(--base);
  --checker-a: var(--island);
  --checker-b: var(--line-t);
  --hover: var(--hover-t);
  --scroll: color-mix(in srgb, var(--ink) 20%, transparent);
  --scroll-hover: color-mix(in srgb, var(--ink) 34%, transparent);
  --chip-a: var(--sunken);
  --chip-b: var(--hover-t);
  --accent: var(--acc);
  --accent-2: var(--acc-hover);
  --radius: 12px;
  --fg: var(--ink);
  --sel-bg: var(--acc-soft);
  --bg-soft: var(--island);
  --danger: oklch(.58 .19 27);
  color-scheme: light;
}

/* Тёмная сторона: выбрана руками или «как в системе» при тёмной системе */
:root[data-product="prez"][data-theme="dark"] {
  --Lb: .18; --Ls: .24; --Ll: .31; --Ll2: .40; --Li: .95; --Li2: .80; --Li3: .68; --Lc: .21;
  --La: .74; --Lah: .8; --Ca: .17; --Lsoft: .30; --Csoft: .06;
  --edge: rgba(255, 255, 255, .10); --edge-2: rgba(255, 255, 255, .05);
  --sh-1: 0 0 0 .5px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3);
  --sh-2: 0 0 0 .5px rgba(0, 0, 0, .5), 0 2px 4px rgba(0, 0, 0, .25), 0 10px 28px rgba(0, 0, 0, .35);
  --sh-3: 0 0 0 .5px rgba(0, 0, 0, .5), 0 4px 10px rgba(0, 0, 0, .3), 0 24px 60px rgba(0, 0, 0, .5);
  --accent-ink: oklch(.2 .03 36);
  --dot: color-mix(in srgb, var(--ink) 10%, transparent);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-product="prez"]:not([data-theme]) {
    --Lb: .18; --Ls: .24; --Ll: .31; --Ll2: .40; --Li: .95; --Li2: .80; --Li3: .68; --Lc: .21;
    --La: .74; --Lah: .8; --Ca: .17; --Lsoft: .30; --Csoft: .06;
    --edge: rgba(255, 255, 255, .10); --edge-2: rgba(255, 255, 255, .05);
    --sh-1: 0 0 0 .5px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3);
    --sh-2: 0 0 0 .5px rgba(0, 0, 0, .5), 0 2px 4px rgba(0, 0, 0, .25), 0 10px 28px rgba(0, 0, 0, .35);
    --sh-3: 0 0 0 .5px rgba(0, 0, 0, .5), 0 4px 10px rgba(0, 0, 0, .3), 0 24px 60px rgba(0, 0, 0, .5);
    --accent-ink: oklch(.2 .03 36);
    --dot: color-mix(in srgb, var(--ink) 10%, transparent);
    color-scheme: dark;
  }
}

:root[data-product="prez"] body {
  background: var(--base);
  font-family: var(--f-ui);
  font-size: 13.5px;
}

/* Свои тонкие полосы прокрутки (решение владельца); у ленты слайдов их нет */
:root[data-product="prez"] * { scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; }
:root[data-product="prez"] ::-webkit-scrollbar { width: 10px; height: 10px; }
:root[data-product="prez"] ::-webkit-scrollbar-track { background: transparent; }
:root[data-product="prez"] ::-webkit-scrollbar-thumb {
  background: var(--scroll); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box;
}
:root[data-product="prez"] ::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-hover); }
/* ---------------------- Чего у Презентаций нет на виду ---------------------
   Не удалено, а убрано с глаз: команды живут и доступны через Ctrl+K, а
   файл из Tertsia сохраняется со всем, чего здесь не видно. Ленту слайдов
   рисует оболочка (#pz-strip), а не панель страниц редактора. */
:root[data-product="prez"] header.topbar,
:root[data-product="prez"] #tool-options,
:root[data-product="prez"] #toolbar,
:root[data-product="prez"] #statusbar,
:root[data-product="prez"] #rulers,
:root[data-product="prez"] #dock-left,
:root[data-product="prez"] #grip-left,
:root[data-product="prez"] #grip-right,
:root[data-product="prez"] .scrollbar,
:root[data-product="prez"] .quick-deck-wide { display: none !important; }

/* -------------- Разметка макета: те же правила, приставка pz- ------------- */
:root[data-product="prez"] .pz-ms {
  font-family: "Material Symbols Rounded"; font-weight: 400; font-style: normal; font-size: 20px; line-height: 1;
  letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; display: inline-block;
  font-feature-settings: "liga"; -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
}
:root[data-product="prez"] .pz-isl {
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-radius: 16px; box-shadow: var(--sh-2), var(--in);
}
/* Стол — точки поверх фона, как в макете */
:root[data-product="prez"] #app {
  background: radial-gradient(var(--dot) 1px, transparent 1.4px) 0 0 / 20px 20px, var(--base);
}
:root[data-product="prez"] .pz-top { display: flex; align-items: center; gap: 10px; padding: 10px; z-index: 30; flex: 0 0 auto; }
:root[data-product="prez"] .pz-docisl { display: flex; align-items: center; gap: 6px; padding: 5px 5px 5px 10px; min-width: 0; flex: 0 1 auto; }
:root[data-product="prez"] .pz-logo { width: 24px; height: 24px; flex: none; display: block; }
:root[data-product="prez"] .pz-docname {
  font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 260px; min-width: 0; padding: 2px 4px;
}
:root[data-product="prez"] .pz-saved { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
:root[data-product="prez"] .pz-saved.dirty { color: var(--acc-hover); }
:root[data-product="prez"] .pz-views { margin-inline: auto; flex: none; padding: 3px; }
:root[data-product="prez"] .pz-rt { display: flex; gap: 6px; align-items: center; padding: 5px; flex: none; }

:root[data-product="prez"] .pz-seg { display: inline-flex; border-radius: 12px; gap: 2px; }
:root[data-product="prez"] .pz-seg button {
  border: 0; background: transparent; color: var(--ink-2); font: 400 13px var(--f-ui); padding: 6px 10px;
  border-radius: 9px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap;
}
:root[data-product="prez"] .pz-seg button .pz-ms { font-size: 18px; }
:root[data-product="prez"] .pz-seg button:hover:not(:disabled) { color: var(--ink); }
:root[data-product="prez"] .pz-seg button:disabled { opacity: .45; cursor: default; }
:root[data-product="prez"] .pz-seg button.on { background: var(--solid); color: var(--ink); box-shadow: var(--sh-1); }

:root[data-product="prez"] .pz-btn {
  height: 32px; padding: 0 12px; border-radius: 10px; border: 0; background: var(--sunken); color: var(--ink);
  font: 500 13px var(--f-ui); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap;
}
:root[data-product="prez"] .pz-btn:hover { background: var(--hover-t); }
:root[data-product="prez"] .pz-btn.pz-pri { background: var(--acc); color: var(--accent-ink); }
:root[data-product="prez"] .pz-btn.pz-pri:hover { background: var(--acc-hover); }
:root[data-product="prez"] .pz-btn .pz-ms { font-size: 18px; }
:root[data-product="prez"] .pz-ib {
  width: 32px; height: 32px; border-radius: 10px; border: 0; background: transparent; color: var(--ink-2);
  display: grid; place-items: center; cursor: pointer; flex: none; padding: 0;
}
:root[data-product="prez"] .pz-ib:hover { background: var(--hover-t); color: var(--ink); }

:root[data-product="prez"] .pz-pop {
  position: fixed; z-index: 90; padding: 6px; border-radius: 14px; min-width: 230px;
  display: flex; flex-direction: column; gap: 1px;
}
:root[data-product="prez"] .pz-pop button {
  display: flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 7px 10px;
  border-radius: 10px; cursor: pointer; text-align: left; font: 13.5px var(--f-ui); color: var(--ink);
}
:root[data-product="prez"] .pz-pop button:hover { background: var(--hover-t); }
:root[data-product="prez"] .pz-pop button .pz-ms { font-size: 18px; color: var(--ink-2); }
:root[data-product="prez"] .pz-pop hr { border: 0; border-top: 1px solid var(--hair); margin: 4px 6px; }

/* Под верхом: лента слайдов слева, холст, свойства по кнопке справа */
:root[data-product="prez"] main { gap: 10px; padding: 0 10px 72px; background: transparent; }
:root[data-product="prez"] #app.no-doc main { padding-bottom: 10px; }
:root[data-product="prez"] .pz-strip {
  width: 118px; flex: none; overflow-y: auto; padding: 8px 6px; display: flex; flex-direction: column;
  gap: 6px; scrollbar-width: none; box-sizing: border-box;
}
:root[data-product="prez"] .pz-strip::-webkit-scrollbar { display: none; }
:root[data-product="prez"] #app.no-doc .pz-strip { display: none; }
:root[data-product="prez"] .pz-th {
  position: relative; display: flex; gap: 6px; align-items: flex-start; cursor: pointer;
  border-radius: 10px; padding: 4px 4px 4px 0; flex: none;
}
:root[data-product="prez"] .pz-th .n {
  font-size: 11px; color: var(--ink-3); width: 16px; text-align: right; padding-top: 2px;
  font-variant-numeric: tabular-nums; flex: none;
}
:root[data-product="prez"] .pz-th .thw {
  flex: 1; min-width: 0; border-radius: 6px; overflow: hidden; line-height: 0;
  box-shadow: 0 0 0 1px var(--hair), var(--sh-1); pointer-events: none;
}
:root[data-product="prez"] .pz-th .thw canvas { width: 100% !important; height: auto !important; display: block; }
:root[data-product="prez"] .pz-th.cur .thw { box-shadow: 0 0 0 2px var(--acc); }
:root[data-product="prez"] .pz-th.cur .n { color: var(--acc-hover); font-weight: 600; }
:root[data-product="prez"] .pz-th.drop::before {
  content: ""; position: absolute; background: var(--acc); border-radius: 2px; left: 18px; right: 4px; top: -4px; height: 3px;
}
:root[data-product="prez"] .pz-addsl {
  flex: none; height: 34px; border-radius: 10px; border: 1.5px dashed var(--line-2); background: transparent;
  color: var(--ink-3); display: grid; place-items: center; cursor: pointer; margin-left: 22px;
}
:root[data-product="prez"] .pz-addsl:hover { color: var(--ink); border-color: var(--ink-3); }

:root[data-product="prez"] .stagewrap,
:root[data-product="prez"] #stage { background: transparent; }
:root[data-product="prez"] .stagewrap { position: relative; }

/* Полоса вставки — остров внизу по центру холста */
:root[data-product="prez"] .pz-dock {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; align-items: center;
  gap: 2px; padding: 5px; z-index: 25; max-width: calc(100% - 20px); overflow-x: auto; scrollbar-width: none;
}
:root[data-product="prez"] .pz-dock button {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 0; border-radius: 11px;
  background: transparent; color: var(--ink); font: 13px var(--f-ui); cursor: pointer; white-space: nowrap; flex: none;
}
:root[data-product="prez"] .pz-dock button:hover,
:root[data-product="prez"] .pz-dock button.active { background: var(--hover-t); }
:root[data-product="prez"] .pz-dock .pz-props.on { background: var(--acc-soft); color: var(--acc-hover); }
:root[data-product="prez"] .pz-sep { width: 1px; height: 22px; background: var(--line-t); margin: 0 4px; flex: none; }
:root[data-product="prez"] #app.no-doc .pz-dock { display: none; }

/* Палитра свойств — островом справа */
:root[data-product="prez"] #dock-right {
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 0; border-radius: 16px; box-shadow: var(--sh-2), var(--in); overflow: hidden;
}
:root[data-product="prez"] .panel,
:root[data-product="prez"] .panel-head { background: transparent; border: 0; }

/* Полоса над выделенным — островом, как «инструменты над объектом» макета */
:root[data-product="prez"] .sel-actions {
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 0; border-radius: 13px; box-shadow: var(--sh-2), var(--in); padding: 4px;
}

/* Стартовый экран */
:root[data-product="prez"] .empty,
:root[data-product="prez"] .quick-card { color: var(--ink); }
:root[data-product="prez"] .empty-card { background: transparent; }
:root[data-product="prez"] .empty-drop { border-color: var(--line-2); border-radius: 18px; background: var(--glass); }
:root[data-product="prez"] .quick-card { background: transparent; border-radius: 14px; padding: 10px 14px; }
:root[data-product="prez"] .quick-card:hover { background: var(--hover-t); }
:root[data-product="prez"] .prez-sizes .quick-card .paper { background: var(--solid); box-shadow: var(--sh-1); border-radius: 3px; }

/* Заголовки — Geologica */
:root[data-product="prez"] .empty-title,
:root[data-product="prez"] .modal h2,
:root[data-product="prez"] .modal h3,
:root[data-product="prez"] .pp-sec h3 { font-family: var(--f-head); font-weight: 600; letter-spacing: -.01em; }
:root[data-product="prez"] .empty-title { font-size: 17px; }

/* Своё окно на Windows: системной шапки нет, от системы — три кнопки справа
   сверху (titleBarOverlay, electron/main.js). Шапка тащит окно, кнопки в ней —
   кнопки; справа поле под системные кнопки (env(titlebar-area-*) — их место) */
:root[data-product="prez"] .pz-top {
  -webkit-app-region: drag; app-region: drag; min-height: 52px; box-sizing: border-box;
  padding-right: calc(10px + 100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw));
}
:root[data-product="prez"] .pz-top > * { -webkit-app-region: no-drag; app-region: no-drag; }

/* Полоса у выделенного — остров макета (.ctx): src/prez/ctx.js */
:root[data-product="prez"] #sel-actions.pz-ctx {
  display: flex; align-items: center; gap: 1px; padding: 4px; border-radius: 13px; white-space: nowrap;
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 0; box-shadow: var(--sh-2), var(--in); color: var(--ink);
}
:root[data-product="prez"] #sel-actions.pz-ctx.hidden { display: none; }
:root[data-product="prez"] .pz-ctx .sep { width: 1px; height: 18px; background: var(--line-t); margin: 0 4px; flex: none; }
:root[data-product="prez"] .pz-ctx .ib {
  width: 30px; height: 30px; border-radius: 9px; border: 0; background: transparent; color: var(--ink-2);
  display: grid; place-items: center; cursor: pointer; flex: none; padding: 0; font: 12.5px var(--f-ui);
}
:root[data-product="prez"] .pz-ctx .ib .pz-ms { font-size: 18px; }
:root[data-product="prez"] .pz-ctx .ib:hover { background: var(--hover-t); color: var(--ink); }
:root[data-product="prez"] .pz-ctx .ib.on { background: var(--acc-soft); color: var(--acc-hover); }
:root[data-product="prez"] .pz-ctx .ib.tb { width: auto; padding: 0 9px; display: inline-flex; gap: 5px; align-items: center; }
:root[data-product="prez"] .pz-ctx .val {
  min-width: 26px; text-align: center; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ink-2);
}
:root[data-product="prez"] .pz-ctx .dot { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
:root[data-product="prez"] .pz-ctx .ib.on .dot { box-shadow: 0 0 0 2px var(--solid), 0 0 0 3.5px var(--acc); }

/* Фон — как у портала: точки стола и слабое свечение акцента из верхнего
   угла (--bg-grad портала), чтобы экран не был ровной заливкой и стекло
   островов было видно */
:root[data-product="prez"] {
  --glass: color-mix(in srgb, var(--solid) 76%, transparent);
  --glow: 16%;
}
:root[data-product="prez"][data-theme="dark"] { --glow: 22%; }
:root[data-product="prez"] #app {
  background:
    radial-gradient(var(--dot) 1px, transparent 1.4px) 0 0 / 20px 20px,
    radial-gradient(90% 65% at 8% -12%, color-mix(in srgb, var(--acc) calc(var(--glow) * .6), transparent) 0%, transparent 58%),
    var(--base);
}

/* ------------------------------ Виды ------------------------------------ */
:root[data-product="prez"] main { position: relative; }
:root[data-product="prez"] .pz-view { display: none; }
:root[data-product="prez"] #app.pz-v-toc .pz-toc,
:root[data-product="prez"] #app.pz-v-board .pz-board { display: grid; }
:root[data-product="prez"] #app.pz-v-toc .pz-strip,
:root[data-product="prez"] #app.pz-v-toc .stagewrap,
:root[data-product="prez"] #app.pz-v-toc .pz-dock,
:root[data-product="prez"] #app.pz-v-board .pz-strip,
:root[data-product="prez"] #app.pz-v-board .stagewrap,
:root[data-product="prez"] #app.pz-v-board .pz-dock { display: none !important; }
:root[data-product="prez"] #app.pz-v-toc main,
:root[data-product="prez"] #app.pz-v-board main { padding-bottom: 12px; }

/* Оглавление: слева — текст документа, справа — слайд */
:root[data-product="prez"] .pz-toc {
  flex: 1; min-width: 0; grid-template-columns: minmax(300px, 520px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr); gap: 14px;
}
:root[data-product="prez"] .pz-outline { overflow: auto; padding: 8px; }
:root[data-product="prez"] .pz-toc .sech2 { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); padding: 12px 10px 4px; }
:root[data-product="prez"] .pz-toc .oi { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 3px 10px; padding: 10px; border-radius: 12px; }
:root[data-product="prez"] .pz-toc .oi.cur { background: var(--acc-soft); }
:root[data-product="prez"] .pz-toc .oi .num {
  grid-row: span 4; width: 24px; height: 24px; border-radius: 8px; background: var(--sunken); display: grid; place-items: center;
  font-size: 12px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
:root[data-product="prez"] .pz-toc .oi.cur .num { background: var(--acc); color: var(--accent-ink); }
:root[data-product="prez"] .pz-toc .ot { font-family: var(--f-head); font-size: 17px; font-weight: 600; outline: none; line-height: 1.3; letter-spacing: -.01em; user-select: text; }
:root[data-product="prez"] .pz-toc .ob { font-size: 14px; color: var(--ink-2); outline: none; white-space: pre-wrap; line-height: 1.5; user-select: text; }
:root[data-product="prez"] .pz-toc .onote { font-size: 12.5px; color: var(--ink-3); outline: none; font-style: italic; user-select: text; }
:root[data-product="prez"] .pz-toc [data-ph]:empty::before { content: attr(data-ph); color: var(--ink-3); opacity: .7; pointer-events: none; }
:root[data-product="prez"] .pz-toc .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
:root[data-product="prez"] .tag {
  font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--sunken); color: var(--ink-2);
  display: inline-flex; gap: 4px; align-items: center;
}
:root[data-product="prez"] .tag .pz-ms { font-size: 14px; }
:root[data-product="prez"] .pz-toc .addp { margin: 8px 10px; }
:root[data-product="prez"] .pz-toc .planprev { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 0; min-width: 0; }
:root[data-product="prez"] .pz-toc .ppbox { flex: 1; width: 100%; min-height: 0; display: grid; place-items: center; }
:root[data-product="prez"] .pz-prev { border-radius: 8px; box-shadow: var(--sh-3); height: auto; display: block; }

/* Раскадровка: плитки по разделам */
:root[data-product="prez"] .pz-board { flex: 1; min-width: 0; overflow: auto; padding: 4px 18px 24px; align-content: start; }
:root[data-product="prez"] .pz-board .bsec { margin-bottom: 22px; }
:root[data-product="prez"] .pz-board .bsech { display: flex; align-items: baseline; gap: 8px; margin: 6px 2px 12px; font-family: var(--f-head); font-weight: 600; font-size: 15px; }
:root[data-product="prez"] .pz-board .bsech span { font-family: var(--f-ui); font-weight: 400; font-size: 12.5px; color: var(--ink-3); }
:root[data-product="prez"] .pz-board .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px 16px; }
:root[data-product="prez"] .pz-board .card { cursor: pointer; position: relative; min-width: 0; }
:root[data-product="prez"] .pz-board .card .thw { border-radius: 10px; overflow: hidden; line-height: 0; box-shadow: 0 0 0 1px var(--hair), var(--sh-1); }
:root[data-product="prez"] .pz-board .card .thw canvas { width: 100%; height: auto; display: block; }
:root[data-product="prez"] .pz-board .card.cur .thw { box-shadow: 0 0 0 2px var(--acc); }
:root[data-product="prez"] .pz-board .card .cap { display: flex; gap: 6px; font-size: 12.5px; margin-top: 7px; color: var(--ink-2); min-width: 0; }
:root[data-product="prez"] .pz-board .card .cap b { color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }
:root[data-product="prez"] .pz-board .card .cap span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-product="prez"] .pz-board .card.drop::before {
  content: ""; position: absolute; left: -9px; top: 0; bottom: 24px; width: 3px; background: var(--acc); border-radius: 2px;
}
:root[data-product="prez"] .pz-board .addcard {
  border: 1.5px dashed var(--line-2); border-radius: 10px; display: grid; place-items: center; color: var(--ink-3);
  cursor: pointer; background: transparent;
}
:root[data-product="prez"] .pz-board .addcard:hover { color: var(--ink); border-color: var(--ink-3); }

/* ---------------------------- Помощник ---------------------------------- */
:root[data-product="prez"] #app.pz-cl main { padding-right: 332px; }
:root[data-product="prez"] .pz-claude {
  position: absolute; right: 10px; top: 62px; bottom: 72px; width: 312px; z-index: 26;
  display: flex; flex-direction: column; overflow: hidden;
}
:root[data-product="prez"] .pz-claude[hidden] { display: none; }
:root[data-product="prez"] .pz-claude .clh { display: flex; align-items: center; gap: 8px; padding: 10px 8px 10px 14px; border-bottom: 1px solid var(--hair); }
:root[data-product="prez"] .pz-claude .clh b { font-family: var(--f-head); font-weight: 600; font-size: 15px; }
:root[data-product="prez"] .pz-claude .clh small { color: var(--ink-3); font-size: 12px; margin-right: auto; }
:root[data-product="prez"] .pz-claude .spark { width: 26px; height: 26px; border-radius: 50%; background: var(--acc); color: #fff; display: grid; place-items: center; }
:root[data-product="prez"] .pz-claude .spark .pz-ms { font-size: 16px; }
:root[data-product="prez"] .pz-claude .ptabs { padding: 8px 10px 0; }
:root[data-product="prez"] .pz-claude .ptabs .pz-seg { display: flex; background: var(--sunken); padding: 3px; }
:root[data-product="prez"] .pz-claude .ptabs .pz-seg button { flex: 1; justify-content: center; }
:root[data-product="prez"] .pz-claude .pbody { flex: 1; overflow: auto; padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 14px; }
:root[data-product="prez"] .plbl { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
:root[data-product="prez"] .ava {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  font-size: 10.5px; font-weight: 600; flex: none;
}
:root[data-product="prez"] .pz-claude .wh { display: flex; align-items: center; gap: 10px; padding: 7px 6px 7px 8px; border-radius: 12px; background: var(--sunken); margin-bottom: 6px; }
:root[data-product="prez"] .pz-claude .wh div { flex: 1; min-width: 0; }
:root[data-product="prez"] .pz-claude .wh b { font-weight: 500; font-size: 13.5px; display: block; }
:root[data-product="prez"] .pz-claude .wh small { font-size: 12px; color: var(--ink-3); }
:root[data-product="prez"] .pz-claude .fi { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 6px; border-radius: 10px; }
:root[data-product="prez"] .pz-claude .fi:hover { background: var(--hover-t); }
:root[data-product="prez"] .pz-claude .fi .ava { width: 24px; height: 24px; font-size: 9.5px; margin-top: 1px; }
:root[data-product="prez"] .pz-claude .fi p { margin: 0; font-size: 13px; line-height: 1.4; }
:root[data-product="prez"] .pz-claude .fi small { font-size: 11.5px; color: var(--ink-3); }
:root[data-product="prez"] .pz-claude .fi .pz-btn { height: 26px; padding: 0 9px; font-size: 12px; }
:root[data-product="prez"] .pz-claude .fi.off p { text-decoration: line-through; color: var(--ink-3); }
:root[data-product="prez"] .note { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; margin: 0; }
:root[data-product="prez"] .pz-claude .perm { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 12px; background: var(--sunken); }
:root[data-product="prez"] .pz-claude .perm b { display: block; font-weight: 500; font-size: 13px; }
:root[data-product="prez"] .tg { width: 36px; height: 22px; border-radius: 999px; background: var(--line-2); position: relative; flex: none; border: 0; cursor: pointer; margin-top: 1px; }
:root[data-product="prez"] .tg::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
:root[data-product="prez"] .tg.on { background: var(--acc); }
:root[data-product="prez"] .tg.on::after { left: 17px; }
:root[data-product="prez"] .pz-claude .clients { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
:root[data-product="prez"] .pz-claude .cli {
  display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid var(--line-t); border-radius: 11px;
  background: var(--solid); cursor: pointer; text-align: left; font: 12.5px var(--f-ui); color: var(--ink); min-width: 0;
}
:root[data-product="prez"] .pz-claude .cli span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-product="prez"] .pz-claude .cli .ava { width: 22px; height: 22px; font-size: 9px; }
:root[data-product="prez"] .pz-claude .cli.on { border-color: var(--acc); background: var(--acc-soft); }
:root[data-product="prez"] .pz-claude .steps { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
:root[data-product="prez"] .pz-claude .code {
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: 11.5px; line-height: 1.5; background: var(--sunken);
  border-radius: 10px; padding: 10px 12px; white-space: pre; overflow-x: auto; color: var(--ink); margin: 0 0 8px; user-select: text;
}
:root[data-product="prez"] .pz-claude .crow { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
:root[data-product="prez"] .pz-dock .clb { background: var(--acc-soft); color: var(--acc-hover); }
:root[data-product="prez"] .pz-dock .clb.on { background: var(--acc); color: var(--accent-ink); }
:root[data-product="prez"] .pz-av { display: flex; padding-left: 6px; }
:root[data-product="prez"] .pz-av[hidden] { display: none; }
:root[data-product="prez"] .pz-av .ava { width: 26px; height: 26px; border: 2px solid var(--solid); font-size: 10.5px; }

/* --------------------------- Всплывающее -------------------------------- */
:root[data-product="prez"] .pz-pop .ph { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 8px 10px 4px; }
:root[data-product="prez"] .pz-pop .chk { margin-left: auto; color: var(--acc-hover); }
:root[data-product="prez"] .pz-pop .ex { display: flex; flex-direction: column; gap: 1px; }
:root[data-product="prez"] .pz-pop .ex b { font-weight: 500; }
:root[data-product="prez"] .pz-pop .ex small { font-size: 12px; color: var(--ink-3); }
:root[data-product="prez"] .pz-pop .exr { padding: 4px 6px 8px; }
:root[data-product="prez"] .pz-pop .exr .pz-seg { background: var(--sunken); padding: 3px; display: flex; }
:root[data-product="prez"] .pz-pop .exr .pz-seg button { flex: 1; justify-content: center; }
:root[data-product="prez"] .pz-exp { width: 330px; }
:root[data-product="prez"] .pz-exp button { align-items: flex-start; }
:root[data-product="prez"] .pz-exp button > .pz-ms { margin-top: 1px; }

/* Настройки */
:root[data-product="prez"] .pz-setw {
  position: fixed; inset: 0; z-index: 95; background: color-mix(in srgb, var(--base) 45%, transparent);
  display: flex; justify-content: center; align-items: flex-start; padding-top: 8%;
}
:root[data-product="prez"] .pz-set { width: min(440px, calc(100% - 24px)); padding: 6px 18px 18px; box-sizing: border-box; color: var(--ink); }
:root[data-product="prez"] .pz-set .seth { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 6px; }
:root[data-product="prez"] .pz-set .seth b { font-family: var(--f-head); font-weight: 600; font-size: 17px; }
:root[data-product="prez"] .pz-set .srow { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--hair); }
:root[data-product="prez"] .pz-set .srow > span { font-size: 13px; color: var(--ink-2); }
:root[data-product="prez"] .pz-set .srow .pz-seg { align-self: flex-start; background: var(--sunken); padding: 3px; }
:root[data-product="prez"] .pz-set .srow small { font-size: 12px; color: var(--ink-3); }
:root[data-product="prez"] .pz-set .pz-btn { align-self: flex-start; }

/* Окно команд Ctrl+K */
:root[data-product="prez"] .pz-palw {
  position: fixed; inset: 0; z-index: 96; background: color-mix(in srgb, var(--base) 45%, transparent);
  display: flex; justify-content: center; padding-top: 10%;
}
:root[data-product="prez"] .pz-pal { width: min(560px, calc(100% - 24px)); align-self: flex-start; overflow: hidden; }
:root[data-product="prez"] .pz-pal input {
  width: 100%; height: 50px; border: 0; background: transparent; padding: 0 16px; font: 16px var(--f-ui); color: var(--ink);
  outline: none; border-bottom: 1px solid var(--hair); box-sizing: border-box; user-select: text;
}
:root[data-product="prez"] .pz-pal .pl { max-height: min(340px, 52vh); overflow: auto; padding: 6px; }
:root[data-product="prez"] .pz-pal .pi { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; font-size: 14px; color: var(--ink); }
:root[data-product="prez"] .pz-pal .pi .pz-ms { font-size: 18px; color: var(--ink-2); }
:root[data-product="prez"] .pz-pal .pi.on { background: var(--acc-soft); color: var(--acc-hover); }
:root[data-product="prez"] .pz-pal .pi.on .pz-ms { color: inherit; }
:root[data-product="prez"] .pz-pal .pi kbd {
  margin-left: auto; font: 11.5px var(--f-ui); color: var(--ink-3); border: 1px solid var(--line-t); border-radius: 6px; padding: 1px 6px; white-space: nowrap;
}
:root[data-product="prez"] .pz-pal .pempty { padding: 14px 12px; color: var(--ink-3); font-size: 13.5px; }

/* Палитры редактора у Презентаций не показываются */
:root[data-product="prez"] #dock-right { display: none !important; }

/* Всплывашки редактора — островом, как toast макета */
:root[data-product="prez"] #toast .toast,
:root[data-product="prez"] .toast-item {
  background: var(--ink); color: var(--solid); border: 0; border-radius: 12px; box-shadow: var(--sh-2); font: 13px var(--f-ui);
}

/* ---------------------------- Стартовый экран ---------------------------
   Своего в макете нет — собран в его стиле: остров стекла по центру стола,
   крупные карточки пропорций, «Открыть…». Пока документа нет, виды и
   «Экспорт» не показываются: смотреть и выводить нечего */
:root[data-product="prez"] #app.no-doc .pz-views { visibility: hidden; }
:root[data-product="prez"] #app.no-doc .pz-rt .pz-pri,
:root[data-product="prez"] #app.no-doc .pz-rt [data-cmd="present"] { display: none; }
:root[data-product="prez"] #empty-state .empty-card {
  width: min(760px, calc(100% - 40px)); padding: 26px 26px 22px; border-radius: 24px; gap: 18px;
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--sh-3), var(--in);
}
:root[data-product="prez"] #empty-state .empty-drop {
  border: 1.5px dashed var(--line-2); border-radius: 16px; background: transparent; padding: 18px 16px;
}
:root[data-product="prez"] #empty-state .empty-title { font-size: 20px; }
:root[data-product="prez"] #empty-state .empty-sub { color: var(--ink-3); }
:root[data-product="prez"] #empty-state .empty-actions .btn {
  height: 34px; padding: 0 16px; border-radius: 10px; border: 0; background: var(--acc); color: var(--accent-ink); font: 500 13.5px var(--f-ui);
}
:root[data-product="prez"] #empty-state .empty-actions .btn:hover { background: var(--acc-hover); }
:root[data-product="prez"] #empty-state .quick-head {
  font-family: var(--f-head); font-size: 15px; font-weight: 600; letter-spacing: -.01em; text-transform: none; color: var(--ink);
  text-align: left; padding: 0 2px 12px;
}
:root[data-product="prez"] .prez-sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
:root[data-product="prez"] .prez-sizes .quick-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px 14px; border-radius: 16px;
  background: var(--sunken); border: 1.5px solid transparent; cursor: pointer; min-width: 0;
}
:root[data-product="prez"] .prez-sizes .quick-card:hover { background: var(--solid); border-color: var(--acc); box-shadow: var(--sh-1); }
:root[data-product="prez"] .prez-sizes .quick-card .paper-wrap { height: 92px; display: grid; place-items: center; margin-bottom: 8px; }
:root[data-product="prez"] .prez-sizes .quick-card .paper { background: var(--paper, #fbfaf7); border-radius: 6px; box-shadow: var(--sh-2); }
:root[data-product="prez"] .prez-sizes .quick-card b { font-size: 14px; font-weight: 600; }
:root[data-product="prez"] .prez-sizes .quick-card .sub { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
:root[data-product="prez"] #empty-recent .head { font-family: var(--f-head); font-size: 15px; font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: 0; }
:root[data-product="prez"] .prez-sizes .quick-card { width: auto !important; max-width: none; flex: none; }
:root[data-product="prez"] .prez-sizes .quick-card .paper-wrap { width: 100%; }
:root[data-product="prez"] #empty-restore .notice {
  display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 10px 10px 10px 14px;
  border: 0; border-radius: 14px; background: var(--acc-soft); color: var(--ink); font: 13px var(--f-ui);
}
:root[data-product="prez"] #empty-restore .notice .btn {
  height: 30px; padding: 0 12px; border: 0; border-radius: 9px; background: var(--acc); color: var(--accent-ink); font: 500 13px var(--f-ui);
}
:root[data-product="prez"] .prez-sizes .quick-card .paper { border: 0; }