*{box-sizing:border-box}
html,body{height:100%;overscroll-behavior:none}
body{margin:0;display:flex;overflow:hidden;background:var(--bg);color:var(--fg);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}

button,input{font:inherit;color:var(--fg)}
button{cursor:pointer;border:1px solid var(--bd);background:var(--card);border-radius:10px;
  padding:6px 14px;min-height:40px}
button:hover{border-color:var(--mut)}
button:focus-visible,input:focus-visible{outline:3px solid var(--c-blue);outline-offset:2px}
button:disabled{opacity:.35;cursor:default}
input{background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:8px 10px}

/* ===== меню ===== */
#menu{width:264px;flex:none;display:flex;flex-direction:column;gap:12px;
  padding:16px 14px calc(16px + env(safe-area-inset-bottom,0px));
  border-right:1px solid var(--bd);background:var(--card);overflow:auto}
#menu h1{margin:0;font:700 18px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
#find{width:100%}
#mlist{display:flex;flex-direction:column;gap:6px}
.mod{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;
  width:100%;min-height:0;padding:10px 12px;border-radius:12px;background:var(--bg)}
.mod:hover{border-color:var(--c-blue)}
.mod-t{font-weight:600}
.mod-d{font:13px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--mut)}
/* группа панелей одного движка: заголовок и «＋ новая группа» */
.mgroup{display:flex;flex-direction:column;gap:4px;margin:2px 0 6px}
.mgroup-h{display:flex;align-items:center;gap:6px;padding:2px 4px;
  color:var(--mut);font:600 12.5px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.mgroup-t{flex:1}
.mgroup-new{min-height:26px;width:28px;padding:0;border-radius:8px;font-size:15px;line-height:1}
.mgroup-all{min-height:26px;padding:0 8px;border-radius:8px;
  font:600 12px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.mod-sub{padding:7px 10px 7px 20px}
/* ярлык группы в шапке окна: КУ-1, КУ-2 */
.win-g{flex:none;padding:2px 6px;border-radius:6px;background:var(--card);
  border:1px solid var(--bd);color:var(--mut);
  font:600 11px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.menu-foot{margin:auto 0 0;font:12.5px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--mut)}

/* Меню — выезжающая панель поверх доски, а не колонка: иначе оно отнимает
   у холста четверть ширины. Открывается кнопкой «Модули». */
#menu{position:absolute;z-index:70;left:0;top:0;bottom:0;width:280px;
  transform:translateX(-100%);transition:transform .18s ease;
  box-shadow:6px 0 24px color-mix(in srgb,var(--fg) 18%,transparent)}
#menu.open{transform:none}
/* кнопка живёт в панели инструментов, чтобы не накрывать окна модулей */
#menutoggle{opacity:.85;font-weight:600}
#menutoggle:hover{opacity:1}
/* состояние комнаты: маленькая плашка в углу, не мешает работе */
.roomstat{display:inline-flex;align-items:center;gap:6px;
  padding:2px 8px;border-radius:999px;background:var(--bg);border:1px solid var(--bd);
  color:var(--mut);font:11.5px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  pointer-events:auto;user-select:none;white-space:normal;
  max-width:calc(100vw - 24px)}
.roomstat .rs-text{min-width:0;text-align:left}
.roomstat .rs-link{flex:none;min-height:22px;padding:0 8px;border-radius:999px;
  font:inherit;line-height:1.2;background:var(--bg);border:1px solid var(--bd);
  color:var(--mut)}
.roomstat .rs-link:hover{color:var(--fg);border-color:var(--mut)}
.roomstat .rs-link[hidden]{display:none!important}
.roomstat::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--mut)}
.roomstat.home::before{background:var(--c-green)}
.roomstat.internet::before{background:var(--c-blue)}
.roomstat.offline::before{background:var(--mut)}
.roomstat.off{color:var(--c-red);border-color:var(--c-red)}
.roomstat.off::before{background:var(--c-red)}
.roomstat.wait{color:var(--c-orange);border-color:var(--c-orange)}
.roomstat.wait::before{background:var(--c-orange)}

/* ===== поле ===== */
#board{position:relative;flex:1;min-width:0;overflow:hidden;background:var(--bg);
  touch-action:none;overscroll-behavior:none;user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none}
/* Сцена — прямоугольник урока. Размер задаёт stage.js: пока в комнате один
   человек, это всё поле; когда заходит участник с меньшим экраном — его
   размер, а у остальных картинка растягивается. */
#stage{position:absolute;left:0;top:0;transform-origin:0 0;
  background:var(--bg);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--bd)}
/* Чернила — верхний слой по картинке, но не по кликам: указатель проходит
   сквозь них к окнам. Решение «рисовать или нажимать» принимает доска. */
/* размер задаём явно: у canvas есть собственная ширина 300×150, и одного
   inset:0 мало — элемент остался бы в этих размерах */
#ink{position:absolute;inset:0;width:100%;height:100%;z-index:50;pointer-events:none;touch-action:none}
/* курсоры участников — отдельный слой: они двигаются 20 раз в секунду,
   и перерисовывать из-за них все чернила было бы расточительно */
#cursors{position:absolute;inset:0;width:100%;height:100%;z-index:55;pointer-events:none;touch-action:none}
#wins{position:absolute;inset:0}
/* длинный лист: кнопка «наверх» */
#scrolltop{position:absolute;right:18px;bottom:18px;z-index:59;min-height:34px;width:34px;
  padding:0;border-radius:10px;font-size:16px;display:none}
#scrolltop.on{display:grid;place-items:center}
html[data-role="student"] #scrolltop,
html[data-role="student"] #railscroll{display:none!important}
/* плашка расписания: крохотный таймер урока, только у учителя */
#lessonplaque{position:relative;display:inline-flex;align-items:center;gap:7px;
  padding:2px 9px;border-radius:999px;
  border:1px solid var(--bd);background:var(--bg);color:var(--fg);
  font:600 11.5px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  white-space:nowrap;pointer-events:none;user-select:none}
#lessonplaque[hidden]{display:none!important}
#lessonplaque .lp-code{display:inline-flex;align-items:center;gap:5px;letter-spacing:.03em}
#lessonplaque .lp-code::before{content:"";width:5px;height:5px;border-radius:50%;
  background:currentColor;opacity:.5}
#lessonplaque .lp-text{font-weight:500;color:var(--mut)}
#lessonplaque.live .lp-text{color:var(--fg)}
#lessonplaque.live .lp-code::before{animation:lpPulse 1.6s ease-in-out infinite}
@keyframes lpPulse{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
html[data-role="student"] #lessonplaque{display:none!important}
/* Плашка урока теперь часть общего статусбара. */
#lessonplaque{display:none!important}

/* Панель настроек: маленький поповер под верхней панелью. */
#settings{position:absolute;right:calc(6px + var(--railw, 120px) + 10px);
  top:calc(8px + var(--barh,56px) + 10px + env(safe-area-inset-top,0px));
  z-index:63;width:min(286px,calc(100% - 28px));padding:11px 12px 10px;
  max-height:calc(100% - 96px);overflow:auto;
  border:1px solid var(--bd);border-radius:14px;background:var(--card);
  box-shadow:0 10px 30px color-mix(in srgb,var(--fg) 16%,transparent);
  font:12.5px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--fg)}
#settings[hidden]{display:none!important}
#settings .set-title{margin:0 0 8px;color:var(--mut);font-size:11px;
  font-weight:650;letter-spacing:.06em;text-transform:uppercase}
#settings .set-row{display:flex;align-items:center;gap:10px;min-height:32px;
  cursor:pointer;user-select:none}
#settings .set-name{flex:1;font-size:13px;font-weight:600}
#settings .set-row input{position:absolute;width:1px;height:1px;
  opacity:0;pointer-events:none}
#settings .set-switch{position:relative;flex:none;width:34px;height:20px;
  border-radius:999px;border:1px solid var(--bd);
  background:color-mix(in srgb,var(--fg) 16%,var(--bg));
  transition:background .15s,border-color .15s}
#settings .set-switch i{position:absolute;left:2px;top:2px;width:14px;height:14px;
  border-radius:50%;background:var(--fg);transition:transform .15s,background .15s}
#settings .set-row input:checked + .set-switch{background:var(--fg);border-color:var(--fg)}
#settings .set-row input:checked + .set-switch i{background:var(--bg);
  transform:translateX(14px)}
#settings .set-row input:focus-visible + .set-switch{outline:3px solid var(--fg);
  outline-offset:2px}
#settings .set-row.off{opacity:.5;cursor:default}
#settings .set-row.off .set-switch{filter:grayscale(1)}
#settings .set-note{margin:8px 0 0;color:var(--mut);font-size:11.5px;line-height:1.4}
#settings .set-action{width:100%;min-height:32px;margin-top:12px;padding:5px 10px;
  border:1px solid var(--bd);border-radius:8px;background:var(--bg);color:var(--fg);
  font:600 12px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;cursor:pointer}
#settings .set-action:hover{border-color:var(--fg)}
#settings .set-title-sub{margin:14px 0 6px;padding-top:11px;border-top:1px solid var(--bd)}
#settings .set-row-view{min-height:0;margin:4px 0 5px;cursor:default}
#settings .set-seg{display:flex;gap:2px;padding:2px;border:1px solid var(--bd);
  border-radius:10px;background:var(--bg)}
#settings .set-seg button{flex:1;min-height:30px;padding:0 5px;border:0;border-radius:7px;
  background:transparent;color:var(--mut);font:600 11.5px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
#settings .set-seg button:hover{color:var(--fg)}
#settings .set-seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
/* знаки «=» между панелями одной формулы: живут в промежутках, кликов не ловят */
#eqs{position:absolute;inset:0;pointer-events:none;z-index:40}
.eq-sign{position:absolute;transform:translate(-50%,-50%);line-height:1;
  font-family:Georgia,"Cambria Math",serif;font-weight:600;color:var(--fg);
  opacity:.85;pointer-events:auto;cursor:pointer;user-select:none;white-space:nowrap;
  padding:.08em .18em;border-radius:6px;transition:background .12s}
.eq-sign:hover{opacity:1;background:color-mix(in srgb,var(--fg) 10%,transparent)}

/* ===== окно модуля ===== */
.win{position:absolute;z-index:1;display:flex;flex-direction:column;background:var(--bg);
  border:1px solid var(--bd);border-radius:14px;overflow:hidden;
  box-shadow:0 8px 30px color-mix(in srgb,var(--fg) 14%,transparent);
  max-width:calc(100% - 32px);max-height:calc(100% - 32px)}
.win-h{display:flex;align-items:center;gap:8px;
  padding:5px 8px 5px 12px;background:var(--card);border-bottom:1px solid var(--bd);
  cursor:grab;touch-action:none;user-select:none}
.win-h:active{cursor:grabbing}
/* цепочка форм ведёт себя как один модуль: одна кнопка закрытия и один уголок */
.win.eq-unit:not(.eq-last) .win-x,
.win.eq-unit:not(.eq-last) .win-rz{display:none}
.win-h h2{margin:0;flex:1;min-width:0;font:600 14px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-x{min-height:30px;width:30px;padding:0;display:grid;place-items:center;
  font-size:18px;line-height:1;border-radius:8px}
/* доля холста и соотношение сторон окна (показываются у параболы) */
.win-area,.win-aspect{flex:none;padding:0 4px;color:var(--mut);white-space:nowrap;
  font:600 12px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.win-aspect{padding-left:0}
/* кнопка «склеить виды»: живёт в шапке каждой формы, общая на цепочку */
.win-link{min-height:30px;width:32px;padding:0;display:grid;place-items:center;
  font:700 18px/1 Georgia,"Cambria Math",serif;border-radius:8px}
.win-link.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.win-link:disabled{opacity:.4;cursor:default}
/* ученик только смотрит: окна не ловят клики, перо проходит сквозь них */
.win.win-ro{pointer-events:none}
.win.win-ro .win-x,
.win.win-ro .win-rz,
.win.win-ro .win-link{display:none}
html[data-role="student"] #menutoggle,
html[data-role="student"] #menu,
html[data-role="student"] #imgbtn,
html[data-role="student"] #imgplace,
html[data-role="student"] #clear,
html[data-role="student"] #theme,
html[data-role="student"] #quad-mode{display:none!important}
html[data-role="student"] #settings .set-teacher{display:none!important}
/* уголок для изменения размера: тянется мышью, перо по нему не рисует */
.win-rz{position:absolute;right:0;bottom:0;width:18px;height:18px;z-index:5;
  cursor:nwse-resize;touch-action:none;user-select:none;
  background:
    linear-gradient(135deg,transparent 0 45%,var(--mut) 45% 55%,transparent 55%),
    linear-gradient(135deg,transparent 0 68%,var(--mut) 68% 78%,transparent 78%);
  opacity:.65}
.win-rz:hover{opacity:1}
.win-b{position:relative;flex:1;min-height:0;overflow:auto;padding:12px;user-select:none}

/* ===== панель инструментов =====
   Общая панель живёт справа в буфере, учительская — сверху.
   #bar растянут на всё поле, но сам кликов не ловит: только панели. */
#bar{position:absolute;inset:0;z-index:60;pointer-events:none}
#bar .bar-panel{pointer-events:auto;
  display:flex;gap:6px;align-items:center;padding:6px 10px;
  background:var(--card);border:1px solid var(--bd);border-radius:14px;
  box-shadow:0 6px 24px color-mix(in srgb,var(--fg) 18%,transparent)}
#bar .bar-teacher{
  position:absolute;left:50%;top:calc(8px + env(safe-area-inset-top,0px));
  transform:translateX(-50%);flex-wrap:wrap;justify-content:center;
  width:max-content;max-width:calc(100% - 20px)}
html[data-role="student"] #bar .bar-teacher{display:none!important}
#bar .bar-common{
  position:absolute;right:6px;
  top:calc(8px + env(safe-area-inset-top,0px));
  bottom:calc(8px + env(safe-area-inset-bottom,0px));width:max-content;max-width:calc(100% - 20px);
  flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;
  overflow:hidden;gap:6px;touch-action:none}
/* Всё, кроме палитры, держит свой размер. Палитра — единственный
   сжимаемый блок, поэтому панель гарантированно влезает по высоте. */
#bar .bar-common > *{flex:0 0 auto}
#bar .bar-common > .swgrid{flex:1 1 auto;min-height:0}
#bar .bar-common .toolbtn{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%}
#bar .bar-common .tool-lbl{
  font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden}
#bar .bar-common .dd-caret{font-size:10px;opacity:.55;margin-left:auto;line-height:1}
#bar .bar-common.mini .toolbtn{display:grid;place-items:center;width:38px;justify-content:center}
#bar .bar-common.mini .tool-lbl{display:none}
#bar .bar-common.mini .dd-caret{display:none}
#bar .bar-common .lwbtn-main{display:flex;align-items:center;justify-content:center;gap:6px;width:100%}
#bar .bar-common.mini .lwbtn-main{width:38px}
#lwbtn i{display:block;width:16px;border-radius:2px;background:var(--fg)}
#bar .bar-common .lws{justify-content:center;flex-wrap:wrap}
#bar .bar-common .swgrid{
  display:flex;flex-direction:column;flex-wrap:nowrap;gap:3px;align-items:center;
  justify-content:flex-start;min-height:0;overflow:hidden}
#bar .bar-common .sw{box-sizing:border-box;width:34px;height:34px;min-height:34px;min-width:0;padding:0;border-radius:8px;
  flex:0 1 auto}
#bar .bar-common .sw.ink{width:34px;height:34px;min-height:34px;margin-bottom:2px;flex:0 1 auto}
#bar .bar-common:not(.mini) .swgrid{align-items:stretch;width:100%}
#bar .bar-common:not(.mini) .sw,
#bar .bar-common:not(.mini) .sw.ink{width:100%}
#bar .bar-common.mini .sw{width:34px;height:34px;min-height:34px;border-radius:8px}
#bar .bar-common.mini .sw.ink{width:34px;height:34px;min-height:34px}
/* во время свайпа по панели не подсвечиваем кнопки под пальцем */
#bar .bar-common.rail-clear-hover button{pointer-events:none!important}
@media (hover:none){
  #bar .bar-common button:not(.on):hover{
    background:var(--card);border-color:var(--bd);filter:none}
  html[data-bar="icons"] #bar .bar-common button:not(.on):hover{
    background:transparent;border-color:transparent}
  #bar .bar-common .sw:not(.on):hover{
    border-color:color-mix(in srgb,var(--fg) 30%,transparent);outline:none}
}
.rail-menu{
  position:fixed;z-index:70;display:flex;flex-direction:column;gap:4px;
  min-width:138px;padding:6px;border:1px solid var(--bd);border-radius:10px;
  background:var(--card);box-shadow:0 6px 24px color-mix(in srgb,var(--fg) 18%,transparent)}
.rail-menu[hidden]{display:none!important}
.rail-menu button{
  display:flex;align-items:center;gap:8px;width:100%;min-height:32px;padding:4px 8px;
  border:1px solid transparent;border-radius:7px;background:none;color:var(--fg);
  font:12.5px/1.2 inherit;text-align:left;cursor:pointer}
.rail-menu button:hover{background:color-mix(in srgb,var(--fg) 9%,transparent)}
.rail-menu button.on{background:var(--fg);color:var(--bg)}
.rail-menu button i{display:block;width:16px;border-radius:2px;background:currentColor}
.rail-menu .ic{width:16px;height:16px}
#bar .bar-common > .ibtn{align-self:center}
#bar .bar-common > .toolbtn{align-self:stretch}
#railscroll{
  position:absolute;left:1px;right:auto;top:10px;bottom:10px;width:2px;border-radius:1px;
  background:color-mix(in srgb,var(--fg) 14%,transparent);
  pointer-events:none;overflow:hidden}
#railscroll i{
  position:absolute;left:0;width:2px;border-radius:1px;background:var(--mut);opacity:.8}
html[data-bar="bare"] #bar .bar-panel,
html[data-bar="icons"] #bar .bar-panel{
  background:none;border-color:transparent;box-shadow:none}
html[data-bar="icons"] #bar button:not(.sw){
  background:none;border-color:transparent;box-shadow:none;opacity:.6}
html[data-bar="icons"] #bar button:not(.sw):hover,
html[data-bar="icons"] #bar button.on:not(.sw){opacity:1}
html[data-bar="icons"] #bar button.on:not(.sw){background:none;color:var(--fg)}
html[data-bar="icons"] #bar button:not(.sw):hover{
  background:var(--card);border-color:var(--bd);opacity:1}
html[data-bar="icons"] #bar .lwbtn.on i{background:var(--fg)}
@media (max-height:760px){
  #bar .bar-common{gap:4px;padding:5px 8px}
  #bar .bar-common .ibtn{min-height:30px;height:30px}
  #bar .bar-common .sw,
  #bar .bar-common .sw.ink{width:26px;height:26px;min-height:26px}
  #bar .bar-common .swgrid{gap:2px}
}
@media (max-height:640px){
  #bar .bar-common .ibtn{min-height:26px;height:26px}
  #bar .bar-common .sw,
  #bar .bar-common .sw.ink{width:22px;height:22px;min-height:22px}
  #bar .bar-common .tool-lbl{font-size:11px}
}
@media (max-height:560px){
  #bar .bar-common{gap:3px;padding:4px 6px}
  #bar .bar-common .ibtn{min-height:22px;height:22px}
  #bar .bar-common .sw,
  #bar .bar-common .sw.ink{width:18px;height:18px;min-height:18px}
}
@media (max-height:420px){
  #bar .bar-common{gap:2px;padding:3px 5px}
  #bar .bar-common .tool-lbl,
  #bar .bar-common .dd-caret{display:none}
  #bar .bar-common .toolbtn{justify-content:center;width:38px}
  #bar .bar-common .sw,
  #bar .bar-common .sw.ink{width:14px;height:14px;min-height:10px}
}
/* Кнопка «Экран» идёт в потоке после «Отменить»: палитра сжимается,
   поэтому нижние кнопки не наезжают друг на друга. */
#bar .bar-common > #undo{margin-bottom:8px}
#bar .bar-common > #fsbtn{flex:0 0 auto}
#bar button{padding:4px 10px;min-height:36px;font-size:14px}
/* кнопки-значки: один размер, без подписей, подсказка в title */
#bar button.ibtn{width:38px;padding:0;display:grid;place-items:center}
#bar .ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
#bar .mode-txt{font-weight:700;font-size:14px;letter-spacing:.4px}
#bar #fsbtn.fail{color:var(--c-red);border-color:var(--c-red)}
#logbtn.ok{color:var(--c-green);border-color:var(--c-green)}
#bar button.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
/* действия над выделением и областью: появляются у рамки */
.swgrid{display:flex;gap:6px;margin:0}
.sw{width:38px;height:36px;min-height:36px;padding:0;border-radius:10px;
  flex:none;
  border:1px solid color-mix(in srgb,var(--fg) 30%,transparent)}
.sw:hover{border-color:var(--fg);
  outline:2px solid var(--fg);outline-offset:2px}
.sw.on{box-shadow:inset 0 0 0 3px var(--fg)}
.sw.ink{background:var(--fg)}
.sw.ink.on{box-shadow:inset 0 0 0 3px var(--bg)}

/* Вставка картинки: превью и две галочки */
#imgprep{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:16px;
  background:color-mix(in srgb, var(--fg) 38%, transparent)}
#imgprep.on{display:grid}
.prep-card{width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;
  background:var(--bg);border:1px solid var(--bd);border-radius:16px;padding:14px;
  box-shadow:0 24px 70px color-mix(in srgb, var(--fg) 32%, transparent);
  display:flex;flex-direction:column;gap:10px}
.prep-card h2{margin:0;font:600 16px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.prep-view{display:grid;place-items:center;min-height:120px;max-height:46vh;overflow:hidden;
  border-radius:12px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--bd)}
.prep-view canvas{display:block;max-width:100%;max-height:46vh;width:auto;height:auto}
.prep-opt{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:10px;
  background:var(--card);cursor:pointer}
.prep-opt input[type="checkbox"]{appearance:auto;flex:none;width:20px;height:20px;
  margin:2px 0 0;padding:0;border:0;background:none;border-radius:0;accent-color:var(--fg)}
.prep-opt b{display:block;font:600 14px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.prep-opt small{display:block;color:var(--mut);font:12px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.prep-size{margin:0;min-height:1.2em;color:var(--mut);font:12px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.prep-actions{display:flex;gap:8px;justify-content:flex-end}
.prep-actions button{min-height:42px;padding:0 18px;font-size:14px}
#prep-ok{background:var(--fg);color:var(--bg);border-color:var(--fg)}
#prep-ok:disabled{opacity:.45}

/* Картинка перед постановкой: её можно оттащить, не задев то, что уже есть. */
#imgplace{position:absolute;z-index:62;display:flex;flex-direction:column;gap:8px;
  max-width:min(320px,calc(100% - 12px));padding:10px;border-radius:14px;
  background:var(--card);border:1px solid var(--bd);
  box-shadow:0 10px 30px color-mix(in srgb,var(--fg) 18%,transparent);
  font:12.5px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
#imgplace[hidden]{display:none!important}
#imgplace .place-hint{margin:0;color:var(--mut)}
#imgplace .place-actions{display:flex;gap:8px;justify-content:flex-end}
#imgplace button{min-height:34px;padding:0 14px;font-size:13px}
#place-ok{background:var(--fg);color:var(--bg);border-color:var(--fg)}



/* ===== единое выделение: рамка, споты, панели ===== */
#selzone{position:absolute;z-index:56;pointer-events:none;display:none}
#selzone.on{display:block}
#selframe{position:absolute;inset:0;pointer-events:none}
#selframe i{position:absolute;display:block;pointer-events:none}
#selframe .egh{border-top:1.5px dashed var(--fg);opacity:.45;transform:translateY(-50%)}
#selframe .egv{border-left:1.5px dashed var(--fg);opacity:.45;transform:translateX(-50%)}

/* 16 маркеров: по часовой — «Выделить», против — «Масштабировать». */
#spot-dots{position:absolute;inset:0;z-index:57;pointer-events:none}
#spot-dots[hidden]{display:none}
#spot-dots > [hidden]{display:none!important}
.spot-area,.spot-scale{position:absolute;border-radius:50%;color:var(--fg);opacity:.55;
  filter:drop-shadow(0 0 1.2px var(--bg))}
.spot-area{width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border:2px dashed currentColor;
  animation:selSpotSpin 2.6s linear infinite}
.spot-scale{width:13px;height:13px;margin:-6.5px 0 0 -6.5px;background:currentColor;
  animation:selSpotBreathe 1.2s ease-in-out infinite}
.spot-area.is-active,.spot-scale.is-active{opacity:1;filter:drop-shadow(0 0 3px var(--fg))}
#spot-dots.icons{z-index:62}
#spot-dots.icons .spot-area.handle,
#spot-dots.icons .spot-scale.handle{width:30px;height:30px;margin:-15px 0 0 -15px;opacity:1}
#spot-dots.icons .spot-scale.handle{animation:selSpotBreatheBig 1.2s ease-in-out infinite}
#spot-dots .handle{pointer-events:auto;cursor:grab;touch-action:none}
#spot-dots .handle:active{cursor:grabbing}
#spot-dots .handle::before{content:'';position:absolute;inset:-8px;border-radius:50%}
/* Планшет: 8 крупных живых ручек, по одной на точку. */
#spot-dots.tablet .spot-area.handle,
#spot-dots.tablet .spot-scale.handle{
  width:34px;height:34px;margin:-17px 0 0 -17px;opacity:1}
#spot-dots.tablet .spot-scale.handle{animation:selSpotBreatheBig 1.2s ease-in-out infinite}
@keyframes selSpotSpin{to{transform:rotate(360deg)}}
@keyframes selSpotBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}
@keyframes selSpotBreatheBig{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* Панели живут у точек и граней; сами по себе кликов не ловят. */
#sel-pair,#sel-solo,#sel-arc{position:absolute;z-index:61;pointer-events:none}
#sel-pair{display:flex;flex-direction:column;align-items:flex-start;gap:11px}
#sel-pair.is-row{flex-direction:row;gap:8px}
#sel-pair.is-row .sel-act{width:auto;flex:0 0 auto}
#sel-solo{position:absolute}
#sel-arc{display:flex;flex-direction:column;gap:6px;align-items:stretch}
#sel-arc .sel-act{width:100%}
#sel-pair[hidden],#sel-solo[hidden],#sel-arc[hidden]{display:none!important}

/* Тоггл режима для планшета: два этажа или одна кнопка. */
#mode-toggle{display:flex;flex-direction:column;gap:6px;align-self:stretch}
#mode-toggle[hidden]{display:none!important}
#mode-toggle .mode-seg-group{
  display:flex;flex-direction:column;gap:0;
  border:0;border-radius:22px;overflow:hidden;
  background:var(--bg);box-shadow:0 5px 18px color-mix(in srgb,var(--fg) 18%,transparent);
}
#mode-toggle .mode-seg{
  height:38px;min-height:38px;padding:6px 13px;
  border:0;border-radius:0;box-shadow:none;background:var(--bg);color:var(--fg);
}
#mode-toggle .mode-seg:first-child{border-radius:22px 22px 0 0}
#mode-toggle .mode-seg + .mode-seg{
  border:0;border-radius:0 0 22px 22px;
  background:transparent;color:var(--bg);overflow:hidden;
}
#mode-toggle .mode-seg + .mode-seg::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:var(--fg);border-radius:inherit;transform-origin:center;
}
#mode-toggle .mode-seg + .mode-seg > .lbl,
#mode-toggle .mode-seg + .mode-seg > .ico{position:relative;z-index:1}
#mode-toggle .mode-seg.on[data-mode="area"] .ants path{animation:selAnts .5s linear infinite}
#mode-toggle .mode-seg.on[data-mode="scale"]::before{animation:modeBreath 1.2s ease-in-out infinite}
@keyframes modeBreath{0%,100%{transform:scale(.95)}50%{transform:scale(1)}}
#mode-toggle .mode-single{border:0;background:var(--bg);color:var(--fg)}
#mode-toggle .mode-single[data-mode="scale"]{background:var(--fg);color:var(--bg);overflow:hidden}
#mode-toggle .mode-single .ants{display:none}
#mode-toggle .mode-single[data-mode="area"] .ants{display:block}
#mode-toggle .mode-single[data-mode="area"] .ants path,
#mode-toggle .mode-single[data-mode="area"] .ants rect{animation:selAnts .5s linear infinite}
#mode-toggle .mode-single[data-mode="scale"]{animation:selBreathe 1.2s ease-in-out infinite}
#mode-toggle .ants{
  position:absolute;left:0;top:0;width:100%;height:100%;
  pointer-events:none;overflow:visible;color:currentColor;
}
#mode-toggle.design-segments .mode-single{display:none}
#mode-toggle.design-single .mode-seg-group{display:none}
.icons #mode-toggle .lbl{display:none}
.icons #mode-toggle .mode-seg .lbl{display:none}
.icons #mode-toggle .mode-seg .ico{display:none}
.icons #mode-toggle .mode-seg .ants{display:block}
.icons #mode-toggle .mode-single[data-mode="area"]{border:2px solid var(--fg)}


#area-btn{pointer-events:auto;touch-action:manipulation;
  /* пустая внутри; рамкой служит анимированный пунктир */
  background:var(--bg);color:var(--fg);border:0;font-weight:600}
#area-btn .ants{position:absolute;left:-5px;top:-5px;width:calc(100% + 10px);
  height:calc(100% + 10px);color:var(--fg);pointer-events:none;overflow:visible}
#area-btn .ants rect{animation:selAnts .5s linear infinite}
@keyframes selAnts{to{stroke-dashoffset:-22}}

.sel-act{position:relative;min-height:32px;height:32px;padding:5px 11px;border-radius:999px;
  border:1px solid var(--fg);background:var(--fg);color:var(--bg);
  font-size:11.5px;font-weight:600;text-align:left;white-space:nowrap;pointer-events:auto;
  touch-action:manipulation;box-shadow:0 5px 18px color-mix(in srgb,var(--fg) 18%,transparent)}
.sel-act:hover{filter:brightness(1.06)}
.sel-act:disabled{opacity:1;cursor:default;filter:none}
.sel-act:disabled:hover{filter:none}
.sel-act > .lbl{position:relative;z-index:1;display:block}
.sel-act[data-act="scale"],.sel-act[data-act="move"],.sel-act[data-act="copy"]{
  cursor:grab;touch-action:none}
.sel-act[data-act="scale"].dragging,.sel-act[data-act="move"].dragging,
.sel-act[data-act="copy"].dragging{cursor:grabbing}
.sel-act[data-act="scale"]{animation:selBreathe 1.2s ease-in-out infinite}
.sel-act[data-act="move"]{animation:selSway 1.3s ease-in-out infinite}
.sel-act[data-act="scale"].dragging,.sel-act[data-act="move"].dragging{animation:none!important}
@keyframes selBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes selSway{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}

/* «Отменить»: надпись стирается посимвольно, курсор стоит у края. */
.sel-act[data-act="undo"]{--undo-pad:11px;position:relative}
.sel-act[data-act="undo"] .lbl{display:inline-block;position:relative;
  animation:selUndoErase 3.4s steps(8,end) infinite}
.sel-act[data-act="undo"]::after{content:"";position:absolute;top:50%;width:2px;height:14px;
  margin-top:-7px;left:calc(100% - var(--undo-pad));background:currentColor;border-radius:1px;
  pointer-events:none;opacity:0;animation:selUndoCaret 3.4s steps(8,end) infinite}
.icons .sel-act[data-act="undo"]::after{display:none}
@keyframes selUndoErase{
  0%,10%{clip-path:inset(0 0 0 0)}
  48%,62%{clip-path:inset(0 100% 0 0)}
  63%,100%{clip-path:inset(0 0 0 0)}
}
@keyframes selUndoCaret{
  0%,10%{left:calc(100% - var(--undo-pad));opacity:1}
  48%,62%{left:var(--undo-pad);opacity:1}
  63%,100%{left:calc(100% - var(--undo-pad));opacity:0}
}

/* hoctr-mode: на паузе всё, кроме кнопки рядом с курсором. */
html.hoctr-mode .sel-act,
html.hoctr-mode .sel-act::before,
html.hoctr-mode .sel-act::after,
html.hoctr-mode .sel-act .lbl,
html.hoctr-mode .sel-act .ico,
html.hoctr-mode .copy-ghost,
html.hoctr-mode .sel-act .ants rect{animation-play-state:paused!important}
html.hoctr-mode .sel-act.hoctr-near:not(.empty-run):not(.dragging),
html.hoctr-mode .sel-act.hoctr-near:not(.empty-run):not(.dragging)::before,
html.hoctr-mode .sel-act.hoctr-near:not(.empty-run):not(.dragging)::after,
html.hoctr-mode .sel-act.hoctr-near:not(.empty-run):not(.dragging) .lbl,
html.hoctr-mode .sel-act.hoctr-near:not(.empty-run):not(.dragging) .ico,
html.hoctr-mode .sel-act.hoctr-near:not(.empty-run):not(.dragging) .copy-ghost,
html.hoctr-mode .sel-act.hoctr-near:not(.empty-run):not(.dragging) .ants rect{
  animation-play-state:running!important}

/* «Скопировать»: верхний слой с той же подписью уезжает, под ним остаётся кнопка. */
.sel-act[data-act="copy"]{overflow:visible;z-index:0}
.sel-act[data-act="copy"].dragging .copy-ghost{display:none}
.copy-ghost{position:absolute;inset:-1px;display:flex;align-items:center;padding:0 11px;
  border-radius:inherit;background:var(--fg);border:1px solid var(--fg);color:var(--bg);
  box-shadow:0 5px 18px color-mix(in srgb,var(--fg) 18%,transparent);pointer-events:none;
  z-index:2;opacity:0;will-change:transform,opacity;animation:selCopyPeel 2.6s ease-in-out infinite}
.copy-ghost .lbl{display:block;white-space:nowrap}
@keyframes selCopyPeel{
  0%,12%{transform:translate(0,0) rotate(0);opacity:1}
  34%{transform:translate(16px,-14px) rotate(-2.5deg);opacity:1}
  52%,100%{transform:translate(26px,-22px) rotate(-4deg);opacity:0}
}

.sel-act[data-act="del"]{overflow:visible;animation:selScared 1.1s linear infinite;
  will-change:transform}
@keyframes selScared{
  0%{transform:translate(0,0) rotate(0)}
  5%{transform:translate(-2px,-1px) rotate(-2deg)}
  10%{transform:translate(2px,-1.5px) rotate(2deg)}
  15%{transform:translate(1.5px,2px) rotate(1.5deg)}
  20%{transform:translate(-2px,1.5px) rotate(-2deg)}
  25%{transform:translate(-1px,-2px) rotate(-1deg)}
  30%{transform:translate(2px,1px) rotate(2deg)}
  35%{transform:translate(1px,-1.5px) rotate(1deg)}
  40%{transform:translate(-1.5px,2px) rotate(-1.5deg)}
  45%{transform:translate(2px,-2px) rotate(1.8deg)}
  50%{transform:translate(-2px,-.5px) rotate(-1.8deg)}
  55%{transform:translate(.5px,2px) rotate(.8deg)}
  60%{transform:translate(-1.5px,-1.5px) rotate(-1.2deg)}
  65%{transform:translate(2px,1.5px) rotate(1.6deg)}
  70%{transform:translate(-1px,2px) rotate(-.8deg)}
  75%{transform:translate(1.5px,-2px) rotate(1.2deg)}
  80%{transform:translate(-2px,1px) rotate(-1.6deg)}
  85%{transform:translate(1px,-1px) rotate(.9deg)}
  90%{transform:translate(-1px,-2px) rotate(-1deg)}
  95%{transform:translate(2px,.5px) rotate(1.4deg)}
  100%{transform:translate(0,0) rotate(0)}
}

.sel-act[data-act="fill"]{background:var(--bg);color:var(--fg);
  border-color:color-mix(in srgb,var(--sel-ink,var(--fg)) 35%,transparent);
  overflow:hidden;animation:selFillText 1.5s ease-in-out infinite}
.sel-act[data-act="fill"]::before{content:"";position:absolute;left:0;right:0;bottom:0;height:0;
  background:var(--sel-ink,var(--fg));z-index:0;pointer-events:none;
  animation:selFillLiquid 1.5s ease-in-out infinite}
@keyframes selFillLiquid{0%,15%{height:0}50%,78%{height:100%}100%{height:0}}
@keyframes selFillText{0%,42%{color:var(--fg)}50%,82%{color:var(--sel-on,var(--bg))}90%,100%{color:var(--fg)}}

.sel-act[data-act="frame"]{background:var(--bg);color:var(--fg);
  border-color:color-mix(in srgb,var(--sel-ink,var(--fg)) 24%,transparent)}
.sel-act[data-act="frame"]::after{content:"";position:absolute;inset:-4px;border-radius:inherit;
  border:2px solid var(--sel-ink,var(--fg));clip-path:inset(0 100% 0 0);
  animation:selOutline 1.3s ease-in-out infinite;pointer-events:none}
@keyframes selOutline{0%,8%{clip-path:inset(0 100% 0 0)}42%,66%{clip-path:inset(0 0 0 0)}86%,100%{clip-path:inset(0 0 0 100%)}}

.sel-act[data-act="shot"]{background:var(--mono-fg);color:var(--mono-bg);border-color:var(--mono-fg)}
html[data-theme="dark"] .sel-act[data-act="shot"]{border-color:var(--mono-bg)}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .sel-act[data-act="shot"]{border-color:var(--mono-bg)}
}
.sel-act[data-act="shot"]::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:var(--mono-bg);opacity:0;pointer-events:none;
  animation:selFlash 2s ease-out infinite}
@keyframes selFlash{0%,68%,100%{opacity:0}72%{opacity:.95}74%{opacity:.08}76%{opacity:.82}82%{opacity:0}}

/* «… нечего»: фраза уезжает влево, ждёт и возвращается. */
.sel-act.empty-run{overflow:hidden}
.empty-phrase{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;
  padding:0 11px;white-space:nowrap;pointer-events:none;color:inherit;font:inherit;opacity:0}
.sel-act.empty-run > .lbl{opacity:0}
.sel-act.empty-run > .empty-phrase{opacity:1;animation:selPhraseRun 2.4s ease-in-out forwards}
.sel-act.empty-run,.sel-act.empty-run::before,.sel-act.empty-run::after{
  animation-play-state:paused!important}
.sel-act[data-act="copy"].empty-run .copy-ghost{display:none}
.sel-act[data-act="shot"].empty-run::after{animation:none!important;opacity:0!important}

@keyframes selPhraseRun{
  0%{transform:translateX(0)}
  28%{transform:translateX(var(--empty-shift,-102px))}
  68%{transform:translateX(var(--empty-shift,-102px))}
  100%{transform:translateX(0)}
}
@keyframes selPhraseRunEn{
  0%,100%{transform:translateX(var(--empty-start,-72px))}
  28%,68%{transform:translateX(0)}
}
.sel-act.empty-run.empty-run-en > .empty-phrase{
  animation:selPhraseRunEn 2.4s ease-in-out forwards
}

/* Иконки: подписи прячутся, у «Залить»/«Обвести» остаётся только анимация. */
.ico{display:none;position:relative;z-index:1;align-items:center;justify-content:center}
.icons .lbl{display:none}
.icons .sel-act[data-act="undo"] .lbl{display:none}
.icons .ico{display:inline-flex;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}
.icons .sel-act{min-width:34px;padding-left:8px;padding-right:8px}
.icons #area-btn{min-width:34px}
.icons #area-btn > .ico,.icons .sel-act[data-act="scale"] > .ico{
  width:14px;height:14px;border-radius:50%;font-size:0;color:currentColor}
.icons #area-btn > .ico{border:2px dashed currentColor;animation:selSpotSpin 2.6s linear infinite}
.icons .sel-act[data-act="scale"] > .ico{background:currentColor;
  animation:selSpotBreathe 1.2s ease-in-out infinite}
.icons .sel-act[data-act="fill"] > .ico,
.icons .sel-act[data-act="frame"] > .ico{display:none}
.icons .sel-act[data-act="copy"] .ico{display:block;width:15px;height:15px;font-size:0}
.icons .sel-act[data-act="copy"] .ico::before,
.icons .sel-act[data-act="copy"] .ico::after{content:"";position:absolute;width:9px;height:9px;
  border:1.5px solid currentColor;border-radius:2px}
.icons .sel-act[data-act="copy"] .ico::before{left:5px;top:0;opacity:.6}
.icons .sel-act[data-act="copy"] .ico::after{left:0;top:5px;background:var(--fg)}
.icons .sel-act.empty-run > .ico{display:none}
.sel-act .ico svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

/* Тост и служебное состояние измерения. */
#seltoast{position:absolute;left:50%;bottom:18px;z-index:64;transform:translate(-50%,8px);
  padding:7px 13px;border-radius:999px;background:var(--fg);color:var(--bg);
  font:12.5px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;opacity:0;
  pointer-events:none;transition:.18s;
  box-shadow:0 5px 18px color-mix(in srgb,var(--fg) 25%,transparent)}
#seltoast.on{opacity:1;transform:translate(-50%,0)}
html.measuring .sel-act{animation:none!important;transform:none!important}

@media (prefers-reduced-motion: reduce){
  #area-btn .ants rect,
  .spot-area,.spot-scale,.icons #area-btn > .ico,
  .icons .sel-act[data-act="scale"] > .ico,.copy-ghost,.sel-act,
  .sel-act::before,.sel-act::after,.sel-act .lbl{animation:none!important}
  .copy-ghost{display:none}
  .sel-act[data-act="frame"]::after{clip-path:none;opacity:0}
  .sel-act[data-act="shot"]::after{opacity:0}
}