:root{
  --bg:#191919;--bg2:#222;--panel:#2a2a2a;--panel2:#313131;
  --line:#615b52;--text:#ece3d8;--muted:#aea59a;
  --accent:#8d8472;--accentSoft:rgba(141,132,114,.22);
  --acc:#c8a96e;--acc2:rgba(200,169,110,.18);
  --radius:18px;
}

/* ── LIGHT THEME ── */
body.light{
  background:radial-gradient(circle at top,#f0ede8 0%,#e8e4de 42%,#ddd9d2 100%);
}
body.light .app{
  background:linear-gradient(180deg,rgba(245,242,238,.97),rgba(235,231,226,.99));
  border-color:rgba(150,135,115,.3);
  box-shadow:0 16px 48px rgba(0,0,0,.12);
}
body.light .topbar{
  background:rgba(235,230,222,.85);
  border-color:#c0b8ac;
}
body.light .tsep{background:#c0b8ac;}
body.light .lang-btn,body.light .theme-btn{
  background:rgba(215,208,198,.7);border-color:#c0b8ac;color:#6b6257;
}
body.light .lang-btn:hover,body.light .theme-btn:hover{border-color:#8d8472;color:#3a3530;}
body.light .font-select{background:rgba(215,208,198,.7);border-color:#c0b8ac;color:#2a2520;}
body.light .plus-btn{background:rgba(215,208,198,.7);border-color:#c0b8ac;color:#8d8472;}
body.light .plus-btn.on{border-color:var(--acc);color:#3a3530;background:var(--acc2);}
body.light .swap-btn{background:rgba(215,208,198,.7);border-color:#c0b8ac;color:#8d8472;}
body.light .swap-btn:hover{border-color:#8d8472;color:#2a2520;}
body.light .swap-btn:active{background:rgba(195,188,178,.85);}
body.light .rchip{border-color:rgba(150,135,115,.5);color:#8d8472;}
body.light .rchip.on{border-color:#8d8472;color:#2a2520;background:rgba(141,132,114,.15);}
body.light .info-btn{color:#8d8472;}
body.light .info-btn:hover{color:#2a2520;}
body.light .info-strip{background:rgba(230,225,218,.7);border-color:rgba(150,135,115,.4);}
body.light .ic-label{color:#8d8472;}
body.light .ic-val{color:#2a2520;}
body.light .left-panel,body.light .right-panel{
  background:rgba(228,223,216,.55);border-color:rgba(150,135,115,.3);
}
body.light .search-input,body.light .uni-input{
  background:rgba(210,204,196,.7);border-color:#c0b8ac;color:#2a2520;
}
body.light .search-input::placeholder,body.light .uni-input::placeholder{color:rgba(107,98,87,.5);}
body.light .filt{background:rgba(210,204,196,.6);border-color:rgba(150,135,115,.4);color:#8d8472;}
body.light .filt.on{border-color:#8d8472;color:#2a2520;background:rgba(141,132,114,.15);}
body.light .panel-divider{background:rgba(150,135,115,.3);}
body.light .gc{background:rgba(210,204,196,.6);border-color:#c0b8ac;color:#5a5248;}
body.light .gc.missing{border-color:rgba(180,40,40,.8) !important;box-shadow:inset 0 0 0 1px rgba(180,40,40,.25);}
body.light .gc:hover{background:rgba(195,188,178,.8);color:#2a2520;}
body.light .gc.sel{border-color:var(--acc);background:var(--acc2);color:#2a2520;}
body.light .glyph-footer{color:#8d8472;}
body.light .pg-btn{background:rgba(210,204,196,.6);border-color:rgba(150,135,115,.35);color:#8d8472;}
body.light .pg-btn:hover{border-color:#8d8472;color:#2a2520;}
body.light .pg-btn.on{border-color:var(--acc);color:var(--acc);background:var(--acc2);}
body.light .pg-dots{color:rgba(107,98,87,.4);}
body.light .strip{background:rgba(225,220,212,.6);border-color:rgba(150,135,115,.4);}
body.light .canvas-top{background:rgba(225,220,212,.6);border-color:rgba(150,135,115,.4);}
body.light .strip-noborder{background:transparent;border-color:transparent;}
body.light .cmode{background:rgba(210,204,196,.6);border-color:rgba(150,135,115,.35);color:#8d8472;}
body.light .cmode.on{border-color:#8d8472;color:#2a2520;background:rgba(141,132,114,.15);}
body.light .zoom-btn{background:rgba(210,204,196,.6);border-color:#c0b8ac;color:#8d8472;}
body.light .zoom-btn:hover{color:#2a2520;border-color:#8d8472;}
body.light .zoom-val{color:#8d8472;}
body.light .zoom-val:hover{border-color:#c0b8ac;color:#2a2520;background:rgba(210,204,196,.6);}
body.light .canvas{
  background:linear-gradient(180deg,rgba(232,228,222,.8),rgba(218,213,206,.9));
  border-color:rgba(150,135,115,.3);
}
body.light .glyph-render{color:rgba(40,35,30,.18);}
body.light .glyph-render2{color:rgba(40,35,30,.1);}
body.light .skel-svg line{stroke:rgba(180,140,80,.6);}
body.light .ocd{background:rgba(180,60,60,.5);}
body.light .coord-bar{color:rgba(107,98,87,.45);}
body.light .coord-bar.locked{color:rgba(160,110,30,.8);}
body.light .lock-dot{background:rgba(160,110,30,.8);}
body.light .scene-label{color:rgba(107,98,87,.4);}
body.light .nav-btn{background:rgba(210,204,196,.55);border-color:rgba(150,135,115,.35);color:#8d8472;}
body.light .nav-btn:hover{color:#2a2520;}
body.light .rp-section{background:rgba(220,215,207,.55);border-color:rgba(150,135,115,.3);}
body.light .rp-head:hover{background:rgba(205,199,190,.5);}
body.light .rp-title{color:#2a2520;}
body.light .rp-chevron{color:#8d8472;}
body.light .rp-body{border-color:rgba(150,135,115,.25);}
body.light .rp-opt:hover{background:rgba(205,199,190,.5);}
body.light .rp-cb{border-color:rgba(120,110,95,.5);background:rgba(255,255,255,.2);}
body.light .rp-cb.on{background:rgba(200,169,110,.2);border-color:var(--acc);}
body.light .rp-label{color:#8d8472;}
body.light .rp-label.on{color:#2a2520;}
body.light .rp-drag span{background:#8d8472;}
body.light .rp-hint{color:rgba(107,98,87,.5);}
body.light .brand-name{color:#2a2520;}
body.light ::-webkit-scrollbar-thumb{background:rgba(150,135,115,.35);}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{min-height:100%;overflow:hidden;background:radial-gradient(circle at top,#2b2a27 0%,#1d1d1d 42%,#151515 100%);color:var(--text);font-family:'SF Mono','Cascadia Code','Consolas','DejaVu Sans Mono',monospace;}

.page{min-height:100vh;padding:0px;}
.app{
  max-width:1800px;min-height:calc(100vh - 0px);margin:0 auto;
  border:1px solid rgba(210,195,172,.2);border-radius:14px;
  background:linear-gradient(180deg,rgba(40,40,40,.95),rgba(22,22,22,.98));
  box-shadow:0 16px 48px rgba(0,0,0,.4);
  padding:7px;display:grid;grid-template-rows:auto auto 1fr;gap:3px;
}

/* ── TOPBAR ── */
.topbar{
  display:flex;align-items:center;gap:0;
  padding:0 12px;height:40px;
  border:1px solid var(--line);border-radius:14px;
  background:rgba(46,46,46,.65);flex-shrink:0;
}
.brand{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.diamond{width:10px;height:10px;transform:rotate(45deg);border:1px solid #e6dbcc;border-radius:2px;background:rgba(255,255,255,.08);}
.brand-name{font-size:14px;font-weight:700;letter-spacing:.02em;}
.tsep{width:1px;height:18px;background:var(--line);margin:0 10px;flex-shrink:0;opacity:.6;}
.lang-btn{
  height:24px;padding:0 8px;border:1px solid var(--line);border-radius:6px;
  background:rgba(58,58,58,.7);font-size:11px;color:var(--muted);
  cursor:pointer;display:flex;align-items:center;flex-shrink:0;
  transition:all .15s;user-select:none;
}
.lang-btn:hover{border-color:var(--accent);color:var(--text);}
.theme-btn{
  height:24px;padding:0 8px;border:1px solid var(--line);border-radius:6px;
  background:rgba(58,58,58,.7);font-size:11px;color:var(--muted);
  cursor:pointer;display:flex;align-items:center;flex-shrink:0;
  transition:all .15s;user-select:none;letter-spacing:.02em;
}
.theme-btn:hover{border-color:var(--accent);color:var(--text);}
.font-select{
  height:28px;border:1px solid var(--line);border-radius:8px;
  background:rgba(58,58,58,.7);display:flex;align-items:center;
  padding:0 10px;font-size:12px;color:var(--text);
  cursor:pointer;white-space:nowrap;flex-shrink:0;transition:opacity .15s;
}
.font-select::after{content:'▾';font-size:9px;color:var(--muted);margin-left:7px;}
.font-select.dim{opacity:.3;pointer-events:none;}
.plus-btn{
  height:28px;padding:0 9px;border:1px solid var(--line);border-radius:8px;
  background:rgba(58,58,58,.7);font-size:12px;color:var(--muted);
  cursor:pointer;display:flex;align-items:center;margin:0 6px;
  white-space:nowrap;flex-shrink:0;transition:all .15s;user-select:none;
}
.plus-btn.on{border-color:var(--acc);color:var(--text);background:var(--acc2);}
.swap-btn{
  height:28px;min-width:28px;padding:0 9px;border:1px solid var(--line);border-radius:8px;
  background:rgba(58,58,58,.7);font-size:14px;color:var(--muted);
  cursor:pointer;display:flex;align-items:center;justify-content:center;margin-left:6px;
  white-space:nowrap;flex-shrink:0;transition:all .15s;user-select:none;
}
.swap-btn:hover{border-color:var(--accent);color:var(--text);}
.swap-btn:active{transform:translateY(1px);}
.spacer{flex:1;min-width:8px;}
.res-group{display:flex;gap:3px;flex-shrink:0;}
.rchip{
  height:24px;padding:0 9px;border:1px solid rgba(97,91,82,.5);border-radius:6px;
  font-size:11px;color:var(--muted);cursor:pointer;
  display:flex;align-items:center;white-space:nowrap;transition:all .15s;
}
.rchip.on{border-color:var(--accent);color:var(--text);background:var(--accentSoft);}
.info-btn{
  display:flex;align-items:center;gap:3px;flex-shrink:0;
  font-size:11px;color:var(--muted);cursor:pointer;user-select:none;white-space:nowrap;
  transition:color .15s;
}
.info-btn:hover{color:var(--text);}
.info-btn .arr{font-size:9px;color:rgba(174,165,154,.5);}

/* ── INFO STRIP ── */
.info-strip{
  overflow:hidden;transition:max-height .25s ease,opacity .2s;
  border:1px solid rgba(97,91,82,.4);border-radius:12px;
  background:rgba(40,38,36,.6);flex-shrink:0;
}
.info-strip.closed{max-height:0;border-color:transparent;opacity:0;}
.info-strip.open{max-height:52px;opacity:1;}
.info-strip.open.dual-info{max-height:none;}
.info-inner{display:flex;align-items:center;padding:0 10px;height:52px;}
.info-strip.dual-info .info-inner{height:auto;min-height:52px;flex-wrap:wrap;padding:5px 10px;gap:0;}
.info-cell{padding:0 10px;border-right:1px solid rgba(97,91,82,.35);display:flex;flex-direction:column;gap:1px;flex-shrink:0;}
.info-cell:first-child{padding-left:0;}
.info-cell:last-child{border-right:none;}
.ic-label{font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}
.ic-val{font-size:11px;font-weight:600;color:var(--text);}

/* имена шрифтов в info-strip */
.ic-val.ii-font1-name{color:rgba(238,231,220,0.92);}
.ic-val.ii-font2-name{color:rgba(212,132,90,0.95);}

body.light .ic-val.ii-font1-name{color:rgba(40,35,30,0.9);}
body.light .ic-val.ii-font2-name{color:rgba(160,75,20,0.9);}

.info-strip.dual-info .ic-label{font-size:8px;}
.info-strip.dual-info .ic-val{font-size:10px;}

/* dual-info: внутри одного шрифта разделители пунктирные */
.info-strip.dual-info .info-cell{
  border-right:1px dashed rgba(97,91,82,.35);
}

/* граница между 1-м и 2-м шрифтом — толще и сплошная */
.info-strip.dual-info .info-cell:nth-child(7){
  border-right:2px solid rgba(97,91,82,.55);
}

/* последняя ячейка без правой границы */
.info-strip.dual-info .info-cell:last-child{
  border-right:none;
}

/* light theme */
body.light .info-strip.dual-info .info-cell{
  border-right:1px dashed rgba(150,135,115,.45);
}
body.light .info-strip.dual-info .info-cell:nth-child(7){
  border-right:2px solid rgba(150,135,115,.65);
}
body.light .info-strip.dual-info .info-cell:last-child{
  border-right:none;
}

/* ── MAIN ── без transition: размер меняется мгновенно ── */
.main{display:grid;grid-template-columns:279px 1fr 168px;gap:10px;min-height:0;}

/* ── LEFT PANEL ── */
.left-panel{
  display:flex;flex-direction:column;gap:6px;
  border:1px dashed rgba(210,195,172,.2);border-radius:10px;
  background:rgba(28,28,28,.5);padding:10px;
  overflow:hidden;min-height:0;
  transition:transform .25s ease, opacity .25s ease;
  transform:translateX(0);
}
.left-panel.text-collapsed{
  transform:translateX(-100%);
  opacity:0;
  pointer-events:none;
}
.search-row{display:flex;gap:4px;}
.search-input{
  flex:1;height:26px;border:1px solid rgba(97,91,82,.6);border-radius:7px;
  background:rgba(42,42,42,.8);padding:0 7px;font-size:11px;
  font-family:inherit;color:var(--text);outline:none;
}
.search-input::placeholder{color:rgba(174,165,154,.45);font-size:11px;}
.search-input:focus{border-color:var(--accent);}
.uni-input{
  width:56px;height:26px;border:1px solid rgba(97,91,82,.4);border-radius:7px;
  background:rgba(42,42,42,.8);padding:0 7px;font-size:11px;
  font-family:inherit;color:var(--muted);outline:none;text-align:center;
}
.uni-input::placeholder{color:rgba(174,165,154,.35);font-size:11px;}
.uni-input:focus{border-color:var(--accent);}
.filter-row{display:flex;gap:3px;}
.filt{
  flex:1;height:22px;border:1px solid rgba(97,91,82,.4);border-radius:5px;
  font-size:9px;color:var(--muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .12s;user-select:none;background:rgba(42,42,42,.6);
}
.filt.on{border-color:var(--accent);color:var(--text);background:var(--accentSoft);}
.filt:hover{color:var(--text);}
.panel-divider{height:1px;background:rgba(97,91,82,.3);margin:1px 0;}
.gg{
  display:grid;grid-template-columns:repeat(auto-fill,23px);
  grid-auto-rows:23px;
  gap:3px;overflow-y:auto;flex:1;min-height:0;align-content:start;
  scrollbar-width:thin;scrollbar-color:rgba(97,91,82,.3) transparent;
}
.gc{
  height:23px;border:1px solid #625b50;border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:#eadfce;cursor:pointer;
  font-family:var(--glyph-grid-font, inherit);
  line-height:1;
  background:rgba(50,50,50,.52);transition:all .1s;user-select:none;
}
.gc.comb{font-size:13px;letter-spacing:-.06em;}
.gc:hover{background:rgba(60,58,54,.7);color:var(--text);}
.gc.missing{border-color:rgba(200,60,60,.85) !important;box-shadow:inset 0 0 0 1px rgba(200,60,60,.3);}
.gc.sel{
  border-color:var(--acc);color:var(--text);
  background:var(--acc2);box-shadow:0 0 0 1px var(--acc);
}
.glyph-footer{
  font-size:9px;color:var(--muted);text-align:center;
  padding-top:3px;line-height:1.4;flex-shrink:0;
  font-family:var(--glyph-ui-font, inherit);
}
#ii-glyph{font-family:var(--glyph-ui-font, inherit);}
.scene-label{font-family:var(--glyph-ui-font, inherit);}
.pagination{
  display:flex;align-items:center;justify-content:center;
  gap:2px;flex-shrink:0;padding-top:2px;
}
.pg-btn{
  min-width:20px;height:20px;padding:0 4px;
  border:1px solid rgba(97,91,82,.35);border-radius:4px;
  background:rgba(42,42,42,.6);font-size:9px;color:var(--muted);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .12s;user-select:none;
}
.pg-btn:hover{border-color:var(--accent);color:var(--text);}
.pg-btn.on{border-color:var(--acc);color:var(--acc);background:var(--acc2);}
.pg-btn.arr{font-size:10px;min-width:18px;}
.pg-btn.disabled{opacity:.25;pointer-events:none;}
.pg-dots{font-size:9px;color:rgba(174,165,154,.3);padding:0 2px;align-self:center;}

/* ── CANVAS AREA ── */
.canvas-wrap{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0;}
.strip{
  height:34px;border:1px solid rgba(97,91,82,.4);border-radius:11px;
  background:rgba(40,40,40,.55);display:flex;align-items:center;
  padding:0 8px;gap:4px;flex-shrink:0;
}
.canvas-top{
  border:1px solid rgba(97,91,82,.4);border-radius:11px;
  background:rgba(40,40,40,.55);flex-shrink:0;
}
.strip-noborder{
  border:none;background:transparent;border-radius:0;
}
#textInputRow{
  padding:4px 8px;display:flex;
}
body.light #textInputRow{background:rgba(225,220,212,.6);}
.text-panel-input{
  width:100%;height:34px;border:1px solid rgba(97,91,82,.4);border-radius:11px;
  background:rgba(40,40,40,.55);padding:0 12px;font-size:12px;box-sizing:border-box;
  font-family:inherit;color:var(--text);outline:none;
}
.text-strip-input{
  flex:1;height:22px;border:1px solid rgba(97,91,82,.35);border-radius:7px;
  background:rgba(50,50,50,.5);padding:0 10px;font-size:11px;box-sizing:border-box;
  font-family:inherit;color:var(--text);outline:none;min-width:0;
}
.text-strip-input::placeholder{color:rgba(174,165,154,.45);}
.text-strip-input:focus{border-color:var(--accent);}
body.light .text-strip-input{background:rgba(225,220,212,.6);border-color:rgba(150,135,115,.4);color:#2a2520;}
body.light .text-strip-input::placeholder{color:rgba(107,98,87,.5);}
.text-panel-input::placeholder{color:rgba(174,165,154,.45);}
.text-panel-input:focus{border-color:var(--accent);}
body.light .text-panel-input{background:rgba(225,220,212,.6);border-color:rgba(150,135,115,.4);color:#2a2520;}
body.light .text-panel-input::placeholder{color:rgba(107,98,87,.5);}
.cmode{
  height:22px;padding:0 10px;border:1px solid rgba(97,91,82,.35);border-radius:7px;
  font-size:11px;color:var(--muted);cursor:pointer;
  display:flex;align-items:center;white-space:nowrap;
  transition:all .15s;user-select:none;background:rgba(50,50,50,.5);
}
.cmode:hover{color:var(--text);}
.cmode.on{border-color:var(--accent);color:var(--text);background:var(--accentSoft);}
.strip-sep{width:1px;height:16px;background:rgba(97,91,82,.4);margin:0 2px;flex-shrink:0;}
.zoom-btn{
  height:22px;width:26px;border:1px solid rgba(97,91,82,.4);border-radius:6px;
  background:rgba(50,50,50,.6);font-size:15px;color:var(--muted);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  user-select:none;flex-shrink:0;transition:all .15s;
}
.zoom-btn:hover{color:var(--text);border-color:var(--accent);}
.zoom-btn.disabled{opacity:.25;pointer-events:none;cursor:default;}
.zoom-btn.ri-btn{width:36px;font-size:12px;letter-spacing:-.05em;}
.zoom-btn.ri-step{width:28px;font-size:10px;border-radius:50%;letter-spacing:0;}
.zoom-val{
  font-size:11px;color:var(--muted);min-width:42px;text-align:center;
  flex-shrink:0;cursor:pointer;border:1px solid transparent;
  border-radius:6px;padding:2px 4px;transition:all .15s;user-select:none;
}
.zoom-val:hover{border-color:rgba(97,91,82,.5);color:var(--text);background:rgba(50,50,50,.5);}
.zoom-val.disabled{opacity:.25;pointer-events:none;cursor:default;}
.canvas{
  flex:1;
  border:1px solid rgba(210,195,172,.22);border-radius:18px;
  background:linear-gradient(180deg,rgba(52,50,46,.65),rgba(30,30,28,.8));
  position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
  cursor:crosshair;min-height:0;
}

/* ── TEXT CANVAS ────────────────────────────────────────────────────────────
   Контейнер: position:absolute inset:0.
   Строки: position:absolute — жёсткие зоны, не зависят от flex.
   Два явных состояния: .single и .dual.
   ──────────────────────────────────────────────────────────────────────── */
.text-canvas-wrap{
  position:absolute;inset:0;z-index:20;
  display:none;
  pointer-events:none;overflow:hidden;
}

/* общие свойства строки */
.text-canvas-line{
  position:absolute;left:0;right:0;
  display:flex;align-items:center;justify-content:center;
  padding:0 24px;box-sizing:border-box;
  color:rgba(238,231,220,.92);
  line-height:1;white-space:nowrap;overflow:hidden;text-align:center;
}
.text-canvas-line.f1{ font-family:var(--glyph-ui-font, sans-serif); }
.text-canvas-line.f2{ font-family:var(--glyph-ui-font2, var(--glyph-ui-font, sans-serif)); color:rgba(212,132,90,0.85); }

/* wrap-mode: только перенос, display и position не меняем */
.text-canvas-line.wrap-mode{
  white-space:normal;
  word-break:break-word;
  overflow-wrap:break-word;
  align-items:flex-start;
  padding-top:8px;
  line-height:1.1;
  display:block;
}

/* кнопка wrap: скрыта по умолчанию, видна только в текстовом режиме */
.text-wrap-btn{ display:none; }
.text-mode-active .text-wrap-btn{ display:flex; }
.text-wrap-btn.on{ border-color:var(--acc);color:var(--text);background:var(--acc2); }

/* в текстовом режиме скрываем сетку, bbox, кнопки сближения и лишние разделители */
.text-mode-active #gridBtn,
.text-mode-active #emBtn,
.text-mode-active .ri-btn,
.text-mode-active .text-hide{ display:none; }

/* кнопка Текст синяя когда активна */
#textBtn.on{ border-color:rgba(91,141,217,0.8);color:rgba(91,141,217,1);background:rgba(91,141,217,0.12); }

/* разделитель */
.text-canvas-divider{
  position:absolute;left:0;right:0;height:1px;
  background:rgba(97,91,82,.45);
}

/* ── режим одного шрифта: f1 занимает всё поле, f2 и divider скрыты ── */
.text-canvas-wrap.single .text-canvas-line.f1{
  top:0;bottom:0;
}
.text-canvas-wrap.single .text-canvas-line.f2,
.text-canvas-wrap.single .text-canvas-divider{
  display:none;
}

/* ── режим двух шрифтов: f1 верхняя половина, f2 нижняя ── */
.text-canvas-wrap.dual .text-canvas-line.f1{
  top:0;bottom:50%;
}
.text-canvas-wrap.dual .text-canvas-divider{
  top:50%;
}
.text-canvas-wrap.dual .text-canvas-line.f2{
  top:50%;bottom:0;
}

/* light theme */
body.light .text-canvas-line{color:rgba(42,37,32,.88);}
body.light .text-canvas-line.f2{color:rgba(160,75,20,.85);}
body.light .text-canvas-divider{background:rgba(150,135,115,.45);}

.guide{display:none;}
.glabel{display:none;}
.glyph-render{
  font-size:clamp(120px,18vw,340px);line-height:1;
  color:rgba(238,231,220,.2);user-select:none;
  font-family:Georgia,'Times New Roman',serif;
  position:relative;z-index:1;
}
.glyph-render2{
  font-size:clamp(120px,18vw,340px);line-height:1;
  color:rgba(238,231,220,.1);user-select:none;
  font-family:Georgia,'Times New Roman',serif;font-style:italic;
  position:absolute;z-index:0;
}
.skel-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.18;}
.ocd{
  position:absolute;width:6px;height:6px;border-radius:50%;
  background:rgba(203,114,114,.7);transform:translate(-50%,-50%);pointer-events:none;
}
#gridOverlay{position:absolute;inset:0;pointer-events:none;z-index:5;}
#emOverlay{display:none;}
.coord-bar{
  position:absolute;bottom:8px;right:12px;font-size:10px;
  color:rgba(174,165,154,.45);font-family:inherit;
  transition:color .15s;user-select:none;
}
.coord-bar.locked{color:rgba(200,169,110,.8);}
.lock-dot{
  display:inline-block;width:5px;height:5px;border-radius:50%;
  background:rgba(200,169,110,.8);margin-right:4px;vertical-align:middle;
}
.scene-label{
  position:absolute;bottom:8px;left:0;right:0;
  text-align:center;font-size:11px;color:rgba(174,165,154,.35);letter-spacing:.02em;
}
.nav-btn{
  height:22px;padding:0 10px;border:1px solid rgba(97,91,82,.35);border-radius:7px;
  font-size:11px;color:var(--muted);cursor:pointer;
  display:flex;align-items:center;gap:3px;transition:all .15s;user-select:none;
  background:rgba(50,50,50,.5);
}
.nav-btn:hover{color:var(--text);}

/* ── RIGHT PANEL ── */
.right-panel{
  display:flex;flex-direction:column;gap:6px;
  border:1px dashed rgba(210,195,172,.2);border-radius:18px;
  background:rgba(28,28,28,.5);padding:10px;
  overflow-y:auto;min-height:0;
  scrollbar-width:thin;scrollbar-color:rgba(97,91,82,.3) transparent;
  transition:transform .25s ease, opacity .25s ease;
  transform:translateX(0);
}
.right-panel.text-collapsed{
  transform:translateX(100%);
  opacity:0;
  pointer-events:none;
}
.rp-section{
  border:1px solid rgba(97,91,82,.3);border-radius:10px;
  background:rgba(38,37,35,.5);overflow:hidden;flex-shrink:0;
}
.rp-head{
  display:flex;align-items:center;padding:6px 8px;
  cursor:pointer;user-select:none;gap:5px;
}
.rp-head:hover{background:rgba(60,58,54,.3);}
.rp-title{font-size:11px;font-weight:600;color:var(--text);flex:1;letter-spacing:.01em;}
.rp-chevron{font-size:8px;color:var(--muted);transition:transform .2s;}
.rp-chevron.up{transform:rotate(180deg);}
.rp-body{padding:4px 8px 8px;border-top:1px solid rgba(97,91,82,.25);display:flex;flex-direction:column;gap:1px;}
.rp-body.hidden{display:none;}
.rp-opt{display:flex;align-items:center;gap:7px;padding:3px 2px;cursor:pointer;border-radius:4px;}
.rp-opt:hover{background:rgba(60,58,54,.4);}
.rp-cb{
  width:11px;height:11px;border:1px solid rgba(142,130,111,.5);border-radius:3px;
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.04);
}
.rp-cb.on{background:rgba(200,169,110,.2);border-color:var(--acc);}
.rp-cb.on::after{content:'✓';font-size:7px;color:var(--acc);}
.rp-label{font-size:10px;color:var(--muted);flex:1;line-height:1.3;}
.rp-label.on{color:var(--text);}
.rp-drag{
  display:grid;grid-template-columns:repeat(2,4px);gap:3px;
  padding:4px 3px;cursor:grab;flex-shrink:0;opacity:.35;transition:opacity .15s;
}
.rp-drag:hover{opacity:.75;}
.rp-drag span{width:3px;height:3px;border-radius:50%;background:var(--muted);display:block;}
.rp-hint{font-size:8px;color:rgba(174,165,154,.35);line-height:1.3;padding:2px 2px 0;font-style:italic;}

.font-dropdown{
  position:fixed;
  background:rgba(46,46,46,.98);border:1px solid var(--line);
  border-radius:8px;margin-top:4px;z-index:1000;
  overflow:hidden;display:none;min-width:200px;
}
.font-dropdown.open{display:block;}
.font-option{
  padding:7px 12px;font-size:12px;color:var(--muted);
  cursor:pointer;white-space:nowrap;
}
.font-option:hover{background:var(--accentSoft);color:var(--text);}
.font-option.selected{color:var(--acc);}
/* расширения для загрузки шрифтов */
.font-option{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.font-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;}
.font-option-sep{
  padding:4px 12px 2px;font-size:10px;color:var(--muted);
  opacity:.5;text-transform:uppercase;letter-spacing:.06em;
  border-top:1px solid var(--line);margin-top:2px;
}
.font-option-sep:first-child{border-top:none;margin-top:0;}
.font-option-user .font-option-del{
  flex-shrink:0;width:16px;height:16px;line-height:16px;
  text-align:center;border-radius:3px;font-size:13px;
  color:var(--muted);opacity:.5;
}
.font-option-user .font-option-del:hover{
  background:rgba(220,80,60,.25);color:#e06050;opacity:1;
}
.font-option-upload{
  border-top:1px solid var(--line);margin-top:2px;
  color:var(--acc);opacity:.7;font-size:11px;
}
.font-option-upload:hover{opacity:1;background:var(--accentSoft);}
.upload-error-tip{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:#c0392b;color:#fff;padding:7px 16px;
  border-radius:6px;font-size:12px;z-index:9999;pointer-events:none;
  animation:fadeInUp .2s ease;
}
@keyframes fadeInUp{
  from{opacity:0;transform:translateX(-50%) translateY(6px);}
  to{opacity:1;transform:translateX(-50%) translateY(0);}
}

::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(97,91,82,.35);border-radius:2px;}

/* ── admin: элементы скрыты по умолчанию ───────────────────────────────────── */
.adm-only { display: none; }

/* ── панель посетителей ──────────────────────────────────────────────────────── */
.visitors-strip {
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  max-height: 200px;
  transition: max-height .2s ease;
  background: var(--bg);
}
.visitors-strip.closed { max-height: 0; border-bottom: none; }
.visitors-inner {
  padding: 6px 0;
  overflow-y: auto;
  max-height: 192px;
}
.visitors-loading {
  padding: 8px 16px;
  font-size: 12px;
  color: var(--muted);
  opacity: .5;
}
.visitor-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 16px;
  font-size: 12px;
  color: var(--muted);
  border-bottom: 1px solid transparent;
  cursor: pointer;
  transition: background .1s;
}
.visitor-row:hover { background: var(--accentSoft); }
.visitor-row-active { background: var(--accentSoft); color: var(--text); }
.visitor-row-nofont { cursor: default; opacity: .55; }
.visitor-row-nofont:hover { background: none; }
.visitor-dt  { flex-shrink: 0; width: 90px; font-variant-numeric: tabular-nums; }
.visitor-ip  { flex-shrink: 0; width: 110px; font-family: monospace; font-size: 11px; }
.visitor-geo { flex-shrink: 0; width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visitor-fonts { display: flex; flex-wrap: wrap; gap: 4px; }
.visitor-font-chip {
  background: var(--line);
  color: var(--text);
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 11px;
  white-space: nowrap;
}
.visitor-font-chip.dim { opacity: .4; }