/* ===== Блок «Схема» (14.10, спека docs/superpowers/specs/2026-10-14-diagram-design.md; diagram.js). Сапфір — як у макеті, Графіт — сірий, Світла — світла. ===== */
:root{--dg-canvas:#080d15;--dg-node:#0d1420;--dg-ink:#eef3fa;--dg-muted:#8290a6;--dg-bar:rgba(19,27,40,.88);--dg-panel:rgba(17,25,37,.96);--dg-field:#0b111b;--dg-line:rgba(190,215,255,.08);--dg-line2:rgba(190,215,255,.14);--dg-line3:rgba(190,215,255,.3);--dg-hover:rgba(190,215,255,.08);--dg-on:rgba(190,215,255,.13);--dg-text2:#aab5c5;--dg-text3:#9aa7ba;--dg-sel:rgba(232,238,247,.6);--dg-grid1:rgba(120,170,255,.07);--dg-grid2:rgba(120,170,255,.15);--dg-scrim:rgba(4,8,14,.55);--dg-glow:.38;--dg-glow-hit:1;--dg-track:#1a2435}
:root[data-theme="graphite"]{--dg-canvas:#0d0d0d;--dg-node:#151515;--dg-ink:#f0f0f0;--dg-muted:#8f8f8f;--dg-bar:rgba(30,30,30,.9);--dg-panel:rgba(27,27,27,.96);--dg-field:#141414;--dg-line:rgba(230,230,230,.08);--dg-line2:rgba(230,230,230,.14);--dg-line3:rgba(230,230,230,.3);--dg-hover:rgba(230,230,230,.08);--dg-on:rgba(230,230,230,.13);--dg-text2:#bdbdbd;--dg-text3:#a3a3a3;--dg-sel:rgba(240,240,240,.6);--dg-grid1:rgba(255,255,255,.05);--dg-grid2:rgba(255,255,255,.11);--dg-scrim:rgba(0,0,0,.55);--dg-track:#2a2a2a}
:root[data-theme="light"]{--dg-canvas:#fbfaf6;--dg-node:#ffffff;--dg-ink:#1b1a16;--dg-muted:#85827a;--dg-bar:rgba(255,254,250,.92);--dg-panel:rgba(255,254,250,.97);--dg-field:#f3f1ea;--dg-line:rgba(30,28,20,.08);--dg-line2:rgba(30,28,20,.15);--dg-line3:rgba(30,28,20,.3);--dg-hover:rgba(30,28,20,.06);--dg-on:rgba(30,28,20,.09);--dg-text2:#55524a;--dg-text3:#6b685f;--dg-sel:rgba(27,26,22,.45);--dg-grid1:rgba(30,28,20,.05);--dg-grid2:rgba(30,28,20,.11);--dg-scrim:rgba(30,28,20,.25);--dg-glow:.16;--dg-glow-hit:.55;--dg-track:#e6e2d8}
.t-dg{display:block}
.dgmount{flex:1;min-width:0}
.dgmount>p.muted{aspect-ratio:4/3;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:18px}
.dgw{position:relative;width:100%}
.dgbox{position:relative;aspect-ratio:4/3;border:1px solid var(--dg-line2);border-radius:18px;overflow:hidden;background:var(--dg-canvas);touch-action:none;user-select:none;-webkit-user-select:none;outline:none}
.dgbox:fullscreen{border-radius:0;border:0}
.dgbox:not(.live){touch-action:pan-y} /* глядач на телефоні: пальцем угору-вниз — гортається сторінка; вбік і щипок — схема */
.dgbox.dgfs{position:fixed;inset:0;z-index:400;aspect-ratio:auto;border-radius:0;border:0;touch-action:none} /* «весь екран» там, де системного немає (iPhone) */
html.dgfsopen,html.dgfsopen body{overflow:hidden}
.dgbox svg.dgsv{display:block;width:100%;height:100%;cursor:grab}
.dgbox svg.dgsv.pan{cursor:grabbing}
.dgbox svg.dgfxl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;will-change:transform} /* шар руху: точки, спалахи, мітки — окремо від світіння фігур */
.dgsv .dggr1{stroke:var(--dg-grid1);stroke-width:1}.dgsv .dggr2{stroke:var(--dg-grid2);stroke-width:1}
.dgw [fill="#0d1420"],.dgmw [fill="#0d1420"],.dgw .dgnodebg,.dgmw .dgnodebg{fill:var(--dg-node)}
.dgw .dgbdgring{stroke:var(--dg-canvas)}
.dgw .dgtrack{fill:var(--dg-track)}
.dgw .dgcanline,.dgmw .dgcanline{stroke:var(--dg-canvas)} /* «подвійна» лінія — вузька смуга кольору поля всередині */
.dgw .dlt,.dgmw .dlt{font:700 13px var(--f-ui);fill:var(--dg-ink)}
.dgw .dct,.dgmw .dct{font:700 14px var(--f-ui)}
.dgw .dpill text{font:600 11.5px var(--f-ui);font-variant-numeric:tabular-nums}
.dgw .dtok text{font:700 10.5px var(--f-ui);font-variant-numeric:tabular-nums}
.dgw .delbg,.dgmw .delbg{fill:var(--dg-canvas);pointer-events:none}
/* рамки «Схеми» (15.10): підпис зверху зліва, тягнуть за підпис, розмір — кружок у куті */
.dgw .dfrt{font:600 13px var(--f-ui);letter-spacing:.02em;pointer-events:none}
.dgw .dfr>rect:first-child{pointer-events:none}
.dgbox.live :is(.dfrh,.dfrb){cursor:move}
.dgw .dfrz{display:none;cursor:nwse-resize}
.dgbox.live .dfr.sel .dfrz{display:inline} /* кружок розміру — лише в автора й лише у вибраної рамки */
.dgbox:not(.live) :is(.dfrh,.dfrb){display:none}
.dgw .dfr.sel>rect:first-child{stroke-opacity:.95;stroke-dasharray:7 5}
.dgfrnote{margin:0;font-size:12px;line-height:1.45;color:var(--dg-muted)}
.dgw .delab,.dgmw .delab{font:500 10.5px var(--f-mono);letter-spacing:.02em;paint-order:stroke;stroke:var(--dg-canvas);stroke-width:7px;stroke-linejoin:round;pointer-events:none}
.dgw .ded,.dgmw .ded{fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.dgw .ded.dash,.dgmw .ded.dash{stroke-dasharray:9 7}
.dgw .ded.dots,.dgmw .ded.dots{stroke-dasharray:.5 7}
.dgw .ded.flow{stroke-dasharray:7 9}
.dhit{fill:none;stroke:transparent;stroke-width:16;pointer-events:none}
.dgbox.live .dhit{pointer-events:stroke;cursor:pointer}
.dgbox.live .dnd{cursor:move}
.dgw .dselr{fill:none;stroke:var(--dg-sel);stroke-width:1.4;stroke-dasharray:4 4;opacity:0;pointer-events:none}
.dgw .dnd.sel .dselr{opacity:1}
.dgw .dnd.tgt .dselr{opacity:1;stroke:var(--dg-ink);stroke-dasharray:none}
.dgw .dport{opacity:0;transition:opacity .15s;cursor:crosshair;display:none}
.dgbox.live .dport{display:inline}
.dgw .dport .dpd{fill:var(--dg-canvas);stroke:var(--dg-ink);stroke-width:1.6}
.dgbox.live .dnd:hover .dport,.dgw .dnd.sel .dport{opacity:1}
.dgw .dport:hover .dpd{fill:var(--dg-ink)}
.dgw .dtmp{fill:none;stroke:var(--dg-ink);stroke-width:1.6;stroke-dasharray:5 5;pointer-events:none}
.dgw .dpill,.dgw .dtok{pointer-events:none}
.dgbar{position:absolute;top:10px;display:flex;gap:2px;padding:3px;border-radius:13px;background:var(--dg-bar);border:1px solid var(--dg-line2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:4}
.dgbar.dgr{right:10px}.dgbar.dgl{left:10px}
.dgbar button{height:30px;min-width:32px;padding:0 7px;border-radius:9px;display:flex;align-items:center;justify-content:center;gap:7px;color:var(--dg-text2);font:500 12px var(--f-mono);white-space:nowrap}
.dgbar button.dgtxt{font:600 13px var(--f-ui);padding:0 12px 0 9px}
.dgbar button:hover{background:var(--dg-hover);color:var(--dg-ink)}
.dgbar button.on{color:#3fb2ff}
.dgbar button:disabled{opacity:.35;cursor:default;background:none}
.dgbar svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dgw svg.fill,.dgmw svg.fill{fill:currentColor;stroke:none}
.dgw .fill{fill:currentColor}
.dgbar i{width:1px;margin:6px 3px;background:var(--dg-line2)}
.dgbox:not(.live) .dgl,.dgbox:not(.live) .dgep,.dgbox:not(.live) .dghint{display:none!important}
.dghint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);font-size:12px;color:var(--dg-muted);background:var(--dg-bar);border:1px solid var(--dg-line);padding:4px 12px;border-radius:8px;white-space:nowrap;pointer-events:none;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}
.dgins{position:absolute;left:10px;top:54px;width:288px;max-height:calc(100% - 64px);overflow:auto;padding:12px;border-radius:14px;background:var(--dg-panel);border:1px solid var(--dg-line2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:12px;z-index:3;scrollbar-width:thin;cursor:default}
.dgih{display:flex;align-items:center;gap:2px}
.dgih b{flex:1;color:var(--dg-ink);font-size:14px}
.dgib{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--dg-text3)}
.dgib:hover{background:var(--dg-hover);color:var(--dg-ink)}
.dgib.danger:hover{color:#ff5a6e}
.dgib svg,.dgseg svg,.dgicons svg,.dgeb svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dgib svg{width:17px;height:17px}
.dgil{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:600;color:var(--dg-muted);text-transform:uppercase;letter-spacing:.06em}
.dgil input,.dgins>.dgil>input{font:500 14px var(--f-ui);text-transform:none;letter-spacing:0;color:var(--dg-ink);background:var(--dg-field);border:1px solid var(--dg-line2);border-radius:9px;padding:7px 10px;outline:none;width:100%}
.dgil input:focus{border-color:#3fb2ff}
.dgseg{display:flex;gap:2px;padding:3px;border-radius:10px;background:var(--dg-field);border:1px solid var(--dg-line)}
.dgseg button{flex:1;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;gap:5px;color:var(--dg-text3);font:600 12px var(--f-ui);text-transform:none;letter-spacing:0}
.dgseg button:hover{color:var(--dg-ink)}
.dgseg button.on{background:var(--dg-on);color:var(--dg-ink)}
.dgseg svg{width:22px;height:22px}
.dgdots{display:flex;gap:8px;flex-wrap:wrap;padding:2px}
.dgdots button{width:20px;height:20px;border-radius:50%;box-shadow:0 0 0 2px var(--dg-panel),0 0 0 3px transparent}
.dgdots button.on{box-shadow:0 0 0 2px var(--dg-panel),0 0 0 4px var(--dg-ink)}
.dgdots .auto{background:conic-gradient(#3fb2ff,#2fdc98,#ffc940,#ff9330,#ff5a6e,#a885ff,#3fb2ff)}
.dgicons{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.dgicons button{aspect-ratio:1;border-radius:7px;display:grid;place-items:center;color:var(--dg-text3);font-size:13px}
.dgicons button:hover{color:var(--dg-ink);background:var(--dg-hover)}
.dgicons button.on{background:var(--dg-on);color:var(--dg-ink)}
.dgicons svg{width:17px;height:17px}
.dgmore{margin-top:2px;padding:6px 8px;border-radius:8px;border:1px dashed var(--dg-line2);color:var(--dg-text2);font:600 12px var(--f-ui);text-transform:none;letter-spacing:0}
.dgmore:hover{color:var(--dg-ink);border-color:var(--dg-line3)}
.dgchips{display:flex;flex-wrap:wrap;gap:5px}
.dgchips button{padding:4px 10px;border-radius:8px;border:1px solid var(--dg-line2);font:600 12px var(--f-ui);text-transform:none;letter-spacing:0;color:var(--dg-text2)}
.dgchips button:hover{color:var(--dg-ink)}
.dgchips button.on{color:var(--dg-panel);background:var(--dg-ink);border-color:var(--dg-ink)}
.dgcap{margin-top:8px;text-align:center;color:var(--muted);font-size:calc(var(--fs) - 2px);line-height:1.45;outline:none;min-height:1.45em;overflow-wrap:anywhere}
.dgcap[contenteditable="plaintext-only"]:empty::before{content:attr(data-ph);color:var(--muted);opacity:.6}
.dgcap[hidden]{display:none}
.dgexp{position:absolute;left:10px;top:54px;z-index:5;display:flex;flex-direction:column;gap:4px;padding:6px;border-radius:12px;background:var(--dg-panel);border:1px solid var(--dg-line2);min-width:220px}
.dgexp button{display:flex;flex-direction:column;align-items:flex-start;padding:7px 10px;border-radius:8px;text-align:left}
.dgexp button:hover{background:var(--dg-hover)}
.dgexp b{color:var(--dg-ink);font-size:13px}.dgexp small{color:var(--dg-muted);font-size:11.5px}
.dgexpst{padding:4px 10px 6px;font-size:12px;color:var(--dg-text2);font-variant-numeric:tabular-nums}
/* вікно «Заготовки» */
.dgmw{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:var(--dg-scrim);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.dgmp{width:min(820px,calc(100vw - 32px));max-height:min(640px,calc(100vh - 48px));display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--dg-line2);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden}
.dgmh,.dgtabs,.dgsearch{flex:none}
.dgmh{display:flex;align-items:center;gap:12px;padding:14px 14px 0 22px}
.dgmh b{font-size:18px;color:var(--text);flex:1}
.dgsearch{margin:14px 22px 6px;padding:8px 12px;border-radius:9px;border:1px solid var(--dg-line2);background:var(--dg-field);color:var(--text);outline:none}
.dgsearch:focus{border-color:#3fb2ff}
.dgtabs{display:flex;flex-wrap:wrap;gap:6px;padding:14px 22px 12px} /* 11 вкладок — у два ряди, а не за край */
.dgtabs button{flex:none;display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:8px;font:600 13px var(--f-ui);color:var(--dg-text3);border:1px solid transparent}
.dgtabs button:hover{color:var(--text)}
.dgtabs button.on{color:var(--text);background:var(--dg-hover);border-color:var(--dg-line2)}
.dgmb{overflow:auto;padding:4px 22px 22px}
.dggal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.dgtc{display:flex;flex-direction:column;text-align:left;border-radius:14px;border:1px solid var(--dg-line2);background:var(--bg);overflow:hidden;transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s}
.dgtc:hover{transform:translateY(-2px);border-color:var(--dg-line3)}
.dgtc svg{display:block;width:100%;height:auto;aspect-ratio:16/10;background:linear-gradient(var(--dg-grid1) 1px,transparent 1px) 0 0/16px 16px,linear-gradient(90deg,var(--dg-grid1) 1px,transparent 1px) 0 0/16px 16px,var(--dg-canvas)}
.dgtc div{padding:10px 13px 12px}
.dgtc b{display:block;font-size:14px;color:var(--text);line-height:1.3}
.dgtc small{display:block;margin-top:3px;font-size:12px;line-height:1.4;color:var(--muted)}
.dgtc .dgph{stroke:var(--muted)}
.dgcols{display:flex;gap:8px;margin:2px 0 16px;align-items:center;flex-wrap:wrap}
.dgcols span{font-size:13px;color:var(--muted);margin-right:4px}
.dgcols button{width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 2px var(--panel),0 0 0 3px transparent}
.dgcols button.on{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--text)}
.dggrp{font:600 12px var(--f-ui);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:6px 0 10px}
.dgels{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px;margin-bottom:18px}
.dgeb{display:flex;flex-direction:column;align-items:center;gap:7px;padding:10px 4px 8px;border-radius:12px;font-size:12px;color:var(--text);text-align:center;line-height:1.25}
.dgeb:hover{background:var(--dg-hover)}
.dgeb span{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;border:2px solid var(--c);background:color-mix(in srgb,var(--c) 12%,var(--dg-node));box-shadow:0 0 14px color-mix(in srgb,var(--c) calc(var(--dg-glow) * 90%),transparent);color:var(--c)}
.dgeb span.chip{width:auto;height:30px;padding:0 10px;font:700 12px var(--f-ui);border-radius:10px}
.dgeb svg{width:22px;height:22px}
.dgempty{color:var(--muted);padding:20px 0}
/* панелі «Фігура / Зв'язок» (14.10): вкладки, ряди «назва — вибір», плитки з картинками */
.dgins{gap:10px}
.dgin{font:500 14px var(--f-ui);color:var(--dg-ink);background:var(--dg-field);border:1px solid var(--dg-line2);border-radius:9px;padding:7px 10px;outline:none;width:100%;min-width:0}
.dgin:focus{border-color:#3fb2ff}
.dgtb{display:flex;gap:2px;padding:3px;border-radius:10px;background:var(--dg-field);border:1px solid var(--dg-line)}
.dgtb button{flex:1;height:28px;border-radius:7px;font:600 12.5px var(--f-ui);color:var(--dg-text3)}
.dgtb button.on{background:var(--dg-on);color:var(--dg-ink)}
.dgpane{display:flex;flex-direction:column;gap:9px}
.dgrow{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;gap:8px}
.dgrow>span{font-size:11.5px;font-weight:600;color:var(--dg-muted)}
.dgrow .dgseg{padding:2px}
.dgrow .dgseg button{height:28px;min-width:0;padding:0 2px;font-size:11.5px}
.dgrow .dgseg svg{width:20px;height:20px}
.dgrow .dgdots{gap:6px}
.dgrow .dgdots{display:grid;grid-template-columns:repeat(9,16px);justify-content:space-between;gap:7px 0}.dgrow .dgdots button{width:16px;height:16px} /* 17 кольорів — два ряди по 9 (у лінії + «авто») */
.dgsub{font-size:11px;font-weight:600;color:var(--dg-muted);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.dgtiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.dgtiles button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px 6px;border-radius:9px;border:1px solid transparent;color:var(--dg-text2);font:600 11px var(--f-ui);line-height:1.15;text-align:center;min-width:0}
.dgtiles button span{overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap}
.dgtiles button:hover{background:var(--dg-hover);color:var(--dg-ink)}
.dgtiles button.on{background:var(--dg-on);border-color:var(--dg-line2);color:var(--dg-ink)}
.dgtiles svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dgtiles button.on svg{color:#3fb2ff}
.dgicobtn{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px 0 4px;border-radius:9px;border:1px solid var(--dg-line2);background:var(--dg-field);color:var(--dg-text2);font:600 12.5px var(--f-ui)}
.dgicobtn:hover{color:var(--dg-ink);border-color:var(--dg-line3)}
.dgicobtn i{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-style:normal;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);border:1.5px solid var(--c)}
.dgicobtn i svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dgseg svg .fill,.dgtiles svg .fill{fill:currentColor;stroke:none}
/* каталог значків на одному екрані (14.10) */
.dgmp.cat{width:min(960px,calc(100vw - 32px));height:min(680px,calc(100vh - 48px));max-height:none}
.dgmp.cat .dgmb{flex:1;min-height:0;padding:0;overflow:hidden;display:flex}
.dgcat{flex:1;min-height:0;display:grid;grid-template-columns:200px minmax(0,1fr);border-top:1px solid var(--dg-line)}
.dgcatnav{overflow:auto;padding:10px 8px 16px 14px;border-right:1px solid var(--dg-line);scrollbar-width:thin}
.dgcath{font:600 11px var(--f-ui);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:10px 6px 6px}
.dgcath:first-child{margin-top:4px}
.dgcatnav button{display:block;width:100%;text-align:left;padding:5px 8px;border-radius:7px;font:500 13px var(--f-ui);color:var(--dg-text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dgcatnav button:hover{color:var(--text);background:var(--dg-hover)}
.dgcatnav button.on{color:var(--text);background:var(--dg-on)}
.dgcatmain{min-width:0;min-height:0;display:flex;flex-direction:column}
.dgcattop{display:flex;align-items:center;gap:14px;padding:12px 18px 8px;flex-wrap:wrap}
.dgcatq{flex:1;min-width:180px;padding:8px 12px;border-radius:9px;border:1px solid var(--dg-line2);background:var(--dg-field);color:var(--text);outline:none;font:500 14px var(--f-ui)}
.dgcatq:focus{border-color:#3fb2ff}
.dgcattop .dgcols{margin:0;display:grid;grid-template-columns:repeat(9,18px);gap:8px}.dgcattop .dgcols button{width:18px;height:18px}
.dgcatsh{display:flex;align-items:center;gap:10px;padding:0 18px 10px;font-size:12px;color:var(--muted)}
.dgcatsh .dgseg{width:auto}
.dgcatsh .dgseg button{width:36px;flex:none}
.dgcatsh .dgseg svg{width:20px;height:20px}
.dgcatbody{flex:1;min-height:0;overflow:auto;padding:4px 18px 22px;scrollbar-width:thin}
.dgcatbody .dgels{grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px;margin-bottom:14px}
.dgcatbody .dgeb{padding:8px 2px 6px;font-size:11.5px}
.dgcatbody .dgeb span{width:42px;height:42px;border-radius:12px}
.dgcatbody .dgeb svg{width:20px;height:20px}
.dgcatbody section:first-child .dggrp{margin-top:2px}
.dgcat[data-sh="circle"] .dgeb span{border-radius:50%}
.dgcat[data-sh="diamond"] .dgeb span{transform:rotate(45deg) scale(.8);border-radius:9px}.dgcat[data-sh="diamond"] .dgeb span svg{transform:rotate(-45deg)}
.dgcat[data-sh="chip"] .dgeb span{width:56px;height:30px;border-radius:9px}
@media (max-width:860px){
  .dgbar{top:8px}
  .dgbar.dgr{right:8px}
  .dgbar button{min-width:30px;padding:0 5px}
}
@media (prefers-reduced-motion:reduce){.dgtc{transition:none}}

/* «Схема»: бічна панель «Елементи» (15.10, превʼю eng-sym): не закривається, пошук, нещодавні, розділи, плитки по 3, вигляд/обрис/колір знизу */
.dlb{position:absolute;left:10px;top:54px;bottom:10px;width:272px;display:flex;flex-direction:column;border-radius:14px;background:var(--dg-panel);border:1px solid var(--dg-line2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:4;cursor:default;overflow:hidden}
.dlb[hidden]{display:none}
.dgbox.libon .dgins{left:auto;right:10px}
.dgbox.libon .dghint{display:none}
.dlbhd{display:flex;align-items:center;gap:6px;padding:8px 8px 0 8px}
.dlb button.xbtn.xbtn.xbtn{width:30px;height:30px}
.dlbq{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:0 10px;height:34px;border-radius:10px;background:var(--dg-field);border:1px solid var(--dg-line2);color:var(--dg-muted)}
.dlbq svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.dlbq input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--dg-ink);font:inherit;font-size:13px}
.dlbq:focus-within{border-color:var(--dg-line3)}
.dlbh{font-size:11.5px;color:var(--dg-muted);margin:8px 12px 4px;letter-spacing:.02em}
.dlbrec{display:flex;gap:5px;margin:0 10px;flex-wrap:wrap}
.dlbr{width:34px;height:34px;border-radius:9px;border:1px solid var(--dg-line2);background:var(--dg-field);display:grid;place-items:center}
.dlbr:hover{border-color:var(--dg-line3)}
.dlbr i,.dlbt i{display:grid;place-items:center;color:var(--c)}
.dlbr svg{width:20px;height:20px}
.dlbch{display:flex;flex-wrap:wrap;gap:4px;margin:8px 8px 2px}
.dlbch button{height:25px;padding:0 5px;border-radius:7px;border:1px solid var(--dg-line2);color:var(--dg-text2);font-size:11px;white-space:nowrap}
.dlbch button:hover{background:var(--dg-hover);color:var(--dg-ink)}
.dlbch button.on{color:var(--dg-panel);background:var(--dg-ink);border-color:var(--dg-ink)}
.dlbb{flex:1;min-height:60px;overflow:auto;padding-bottom:8px;scrollbar-width:thin}
.dlbg{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin:0 6px}
.dlbt{display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 1px 6px;border-radius:10px;color:var(--dg-text2);font-size:10.5px;line-height:1.2;text-align:center;touch-action:none}
.dlbt:hover{background:var(--dg-hover);color:var(--dg-ink)}
.dlbt i{width:38px;height:38px}
.dlbt svg{width:30px;height:30px}
.dlbr svg,.dlbt svg,.dlbgh svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dlbt span{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:normal}
.dlbe{color:var(--dg-muted);font-size:12.5px;margin:14px}
.dlbf{border-top:1px solid var(--dg-line2);padding:7px 8px 8px;display:flex;flex-direction:column;gap:7px}
.dlbv{display:flex;gap:6px;align-items:center}
.dlbv .dgseg button{height:24px;padding:0 6px}
.dlbv .dgseg svg{width:18px;height:18px}
.dlbvn{font-size:12px;color:var(--dg-muted);margin-left:4px}
.dlbdots{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;justify-items:center}
.dlbdots button{width:15px;height:15px}
.dlbdots button.auto{background:conic-gradient(#ffd23f,#2fe39a,#3aa8ff,#a98bff,#ff5a6e,#ffd23f)}
.dlbgh{position:fixed;left:0;top:0;width:48px;height:48px;display:grid;place-items:center;border-radius:12px;background:var(--dg-panel);border:1px solid var(--dg-line3);pointer-events:none;z-index:1000;opacity:.9}
.dlbgh i{display:grid;place-items:center;color:var(--c)}
.dlbgh svg{width:30px;height:30px}
.dgbar button.on[data-dg="add"]{background:var(--dg-on);color:var(--dg-ink)}
.dgtc em.dgtsz{display:inline-block;margin-top:6px;font:600 11px var(--f-ui);font-style:normal;color:var(--muted);border:1px solid var(--dg-line2);border-radius:6px;padding:1px 6px} /* «Середня · 13» / «Велика · 26» на картці заготовки */

/* «Схема» → «Текст» (15.10, Денис: «шрифтом як на кресленнях»): свої шрифти — креслярський osifont (ISO 3098) і технічний Jura; моноширинний — як підписи ліній */
@font-face{font-family:'SpDraft';src:url(/assets/fonts/osifont.woff2) format('woff2');font-display:swap} /* одна товщина — «Ж» браузер домальовує сам */
@font-face{font-family:'SpTech';src:url(/assets/fonts/jura.woff2) format('woff2');font-weight:300 700;font-display:swap}
.dtx-osi{font-family:'SpDraft',var(--f-ui)}.dtx-jura{font-family:'SpTech',var(--f-ui)}.dtx-mono{font-family:var(--f-mono)}
.dgw .dtx{letter-spacing:.02em}
textarea.dgin.dgtxa{resize:none;font-size:16px;line-height:1.3;font-weight:400}
.dgins .dgseg .dtx-osi,.dgins .dgseg .dtx-jura{font-size:16px}.dgins .dgseg .dtx-mono{font-size:14px}
.dgtagnote{margin:-2px 0 6px;font-size:11.5px;line-height:1.35;color:var(--dg-muted)} /* де видно мітку фігури (QA П52) */
/* Кружок розміру фігури (QA П78) — лише в автора й лише у вибраної фігури */
.dgw .dnz{display:none;fill:var(--dg-canvas);stroke:var(--accent);stroke-width:2;cursor:nwse-resize}
.dgbox.live .dnd.sel .dnz{display:inline}
.dgszh{display:block;margin-top:4px;color:var(--muted);font-size:11px}