/* (owner 26 Oct 23:30) Vego CAD keeps to black, white, green, lime green and grey; a mistake stays red */
.vc-drawing-actions { flex-wrap: wrap; gap: 8px; }
.vc-drawing-actions .btn { white-space: normal; }
#vc-name { display: block; width: 100%; margin-top: 8px; }
@media (max-width: 520px) {
  .vc-drawing-actions .grow { display: none; }
  .vc-drawing-actions .btn { flex: 1 1 42%; font-size: 13px; }
}

/* 5.9.30: long runs drawn in sections — the title above each section's sheet */
.vcssec{display:block;margin:14px 0 6px;font-size:14px;font-weight:600;color:var(--brand-fg)}
.vcssec:first-child{margin-top:0}

/* 5.9.105: Vego CAD — a glass partition from a site sketch (tap entry, no AI) */
.vsk{display:flex;flex-direction:column;gap:12px}
.vsk>*{flex-shrink:0} /* the sheet body is a flex column: the photo box must not be squeezed to nothing */
.vsk-addph{display:flex;flex-direction:column;gap:2px;padding:14px;border:1.5px dashed #C4C9CF;border-radius:14px;background:#F9FAFB;color:#0A0A0A;cursor:pointer;text-align:center}
.vsk-addph small{color:#6B7280}
/* the photo and the pieces stay at the top while the keypad and the details scroll under them */
.vsk-top{position:sticky;top:0;z-index:2;display:flex;flex-direction:column;gap:8px;margin:-4px -4px 0;padding:4px 4px 6px;background:var(--bg,#fff);box-shadow:0 6px 10px -8px rgba(20,33,95,.25)}
.vsk-photo{border:1px solid #E5E7EB;border-radius:12px;overflow:hidden;background:#fff;cursor:zoom-in;flex-shrink:0}
.vsk-photo img{display:block;width:100%;height:22vh;object-fit:contain}
.vsk-photo.zoom{cursor:zoom-out}.vsk-photo.zoom img{height:50vh}
.vsk-pact{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.vsk-pact small{color:#6B7280;font-size:12px}
.vsk-strip{display:flex;gap:6px;overflow-x:auto;padding:2px 0 6px;min-height:58px;align-items:stretch}
.vsk-empty{margin:0;font-size:13px;color:#6B7280;align-self:center}
.vsk-c{flex:0 0 auto;min-width:62px;padding:8px 8px;border:1.5px solid #D1D5DB;border-radius:10px;background:#F3F4F6;color:#0A0A0A;font:inherit;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer}
.vsk-c b{font-size:13px;white-space:nowrap}.vsk-c small{font-size:11.5px;color:#3C4250;white-space:nowrap}
.vsk-c.door{background:#fff;border-style:dashed}
.vsk-c.sum{background:#FFF7D6;border-color:#F2D36B}
.vsk-c.ch{background:#F3F4F6;border-color:#C9CED6}
.vsk-c.cor{background:#F0F1F5;border-color:#C9CDD8}
.vsk-c.on{border-color:#08B932;box-shadow:0 0 0 2px rgba(17,19,21,.18)}
.vsk-c.bad{border-color:#D33A3D;background:#FDECEC}
.vsk-sel{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border-radius:12px;background:#F4F5F6}
.vsk-sel>span:first-child{font-weight:600;color:#0A0A0A}
.vsk-step{display:inline-flex;align-items:center;gap:6px}.vsk-step small{color:#6B7280}
.vsk-bad,.vsk-ok{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:12px;font-size:13px}
.vsk-bad{background:#FDECEC;color:#9B1C1F}
.vsk-ok{background:#EEFBF5;color:#0A7A3C}.vsk-ok .warn{color:#0B5C3B}
.vsk-pad{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid #E5E7EB;border-radius:16px;background:#fff}
.vsk-disp{display:flex;align-items:center;justify-content:space-between;gap:8px}
/* the number being typed in a small LCD window, like the speed read-out in the owner's picture */
.vsk-disp b{font-size:26px;letter-spacing:.04em;color:#0A0A0A;min-width:110px;padding:4px 12px;border-radius:10px;border:1.5px solid #DBDEE8;background:#F6F7F9;font-variant-numeric:tabular-nums;text-align:end}
.vsk-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.vsk-k{padding:12px 0;border:1px solid #E5E7EB;border-radius:10px;background:#F9FAFB;font:inherit;font-size:20px;color:#0A0A0A;cursor:pointer}
.vsk-acts{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.vsk-a{display:flex;flex-direction:column;align-items:center;gap:1px;padding:9px 2px;border-radius:10px;border:1.5px solid #0A0A0A;background:#0A0A0A;color:#fff;font:inherit;cursor:pointer}
.vsk-a b{font-size:14px}.vsk-a small{font-size:10.5px;opacity:.9}
.vsk-a.door{background:#fff;color:#0A0A0A}
.vsk-a.sum{background:#FFF7D6;border-color:#F2D36B;color:#6E5600}
.vsk-a.ch{background:#F3F4F6;border-color:#9CA3AF;color:#222}
.vsk-a.cor{background:#F0F1F5;border-color:#C9CDD8;color:#3B4150}
.vsk-more{gap:10px}
.vsk-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vsk-k{padding:10px 0}
@media (max-width:359px){.vsk-acts{grid-template-columns:repeat(3,1fr)}}
@media (max-width:420px){.vsk-a{padding:9px 1px}.vsk-a small{font-size:9px}.vsk-a b{font-size:12px}}
.vsk-ai{border-color:#08B932;color:#0A7A3C}
.vsk-airead{margin:0;padding:8px 12px;border-radius:10px;background:#FFF7D6;color:#6E5600;font-size:12.5px}
/* 5.9.105 From a photo — Vego's own furniture models (furniture-entry.js) */
.vf-top{display:grid;grid-template-columns:1fr;gap:8px}
.vf-top.two{grid-template-columns:1fr 1fr}
.vf-top.two .vsk-photo img{height:20vh}
.vf-top .vsk-photo.zoom{grid-column:1/-1}
.vf-model{position:relative;display:block;padding:0;border:1px solid #E5E7EB;border-radius:12px;background:#fff;cursor:pointer;font:inherit}
.vf-model svg{display:block;width:100%;height:20vh}
.vf-top:not(.two) .vf-model svg{height:24vh}
.vf-model small{position:absolute;right:8px;bottom:5px;font-size:11px;color:#6B7280}
.vf-q{margin:2px 0 0;font-size:17px;font-weight:700;color:#0A0A0A}
.vf-gh{font-size:12.5px;font-weight:600;color:#6B7280;margin:6px 0 -4px}
.vf-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.vf-tile{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;text-align:left;padding:10px;border:1px solid #E5E7EB;border-radius:12px;background:#fff;color:#0A0A0A;font:inherit;cursor:pointer}
.vf-tile .vf-ti{grid-row:1/3}
.vf-tile b{font-size:14px}.vf-tile small{font-size:11.5px;color:#6B7280;line-height:1.25}
.vf-ti{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:10px;background:#F3F4F6;color:#0A7A3C}
.vf-ti svg{width:22px;height:22px}
.vf-fam{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vf-fam b{font-size:16px;color:#0A0A0A}.vf-fam small{color:#6B7280;flex:1}
.vf-opts .vc-row{flex-wrap:wrap}
.vf-st b{min-width:22px;text-align:center}
.vf-sh{display:flex;align-items:center;justify-content:space-between;gap:8px}
.vf-sz.start input::placeholder{color:#9CA3AF}
.vf-sz.req span::after{content:" *";color:#B91C1C}
.vf-note{color:#6B7280;font-size:12px}
.vsk-bad.vf-miss{background:#F4F5F6;color:#0A0A0A}
@media (max-width:359px){.vf-grid{grid-template-columns:1fr}}
/* 5.9.105 Read the outline (no AI) */
.vf-ol{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vf-olb{border-color:#08B932;color:#0A7A3C}
.vf-olv{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}.vf-olv small{color:#6B7280;font-size:12px}
.vf-olnote{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:12px;background:#EEFBF5;color:#0A7A3C;font-size:13px}
.vf-olnote small{color:#4B5563}.vf-tips{display:flex;gap:6px;flex-wrap:wrap}
.vf-sz.photo input{background:#EEFBF5}
.vf-sz em{font-style:normal;font-size:11px;color:#0A7A3C;font-weight:600}
.vf-nomodel{display:flex;align-items:center;justify-content:center;min-height:20vh;padding:10px;text-align:center}.vf-nomodel small{position:static;color:#9B1C1F;font-size:12.5px}

/* Vego CAD → Glass & aluminium pack (glass-pack.js) */
.gpk{display:flex;flex-direction:column;gap:12px}
.gpk-tabs{position:sticky;top:0;z-index:2;background:var(--pane,#fff);padding:4px 0}
.gpk-note{margin:0;font-size:13px;line-height:1.45;color:#5B6170}
.gpk-sum{display:flex;flex-wrap:wrap;gap:6px}
.gpk-st{flex:none;display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap}
.gpk-st.drawn{background:#EDEEF1;color:#0A7A3C}.gpk-st.partly{background:#FFF4D6;color:#8A5A00}.gpk-st.later{background:#EEF0F3;color:#5B6170}
.gpk-list{display:flex;flex-direction:column;gap:6px}
.gpk-f{border:1px solid #E5E7EB;border-radius:14px;background:#fff;padding:0}
.gpk-f>summary{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;list-style:none}
.gpk-f>summary::-webkit-details-marker{display:none}
.gpk-id{flex:none;min-width:40px;font-size:12px;font-weight:700;color:#0A7A3C}
.gpk-n{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.gpk-n b{font-size:14px;font-weight:600;line-height:1.3}
.gpk-n small{font-size:12px;line-height:1.35;color:#6B7280}
.gpk-d{padding:0 12px 4px 62px;display:flex;flex-direction:column;gap:6px}
.gpk-d p{margin:0;font-size:12.5px;line-height:1.45;color:#374151}
.gpk-d b{font-weight:600;color:#0A0A0A}
.gpk-gap{color:#8A5A00!important}
.gpk-go{margin:4px 12px 12px 62px}
.gpk-h{font-size:15px;font-weight:600}
.gpk-res{display:flex;flex-direction:column}
.gpk-small{margin:6px 0 0;font-size:12px;line-height:1.45;color:#6B7280}
.gpk-tbl{display:flex;flex-direction:column;gap:8px}
.gpk-tr{display:flex;flex-direction:column;gap:1px;padding-bottom:8px;border-bottom:1px solid #EEF0F3}
.gpk-tr b{font-size:13px}.gpk-tr span{font-size:12.5px;color:#0A7A3C}.gpk-tr small{font-size:12px;color:#6B7280}
.gpk-rule{border:1px solid #E5E7EB;border-radius:12px;padding:10px 12px;background:#fff}
.gpk-rule b{font-size:13px}.gpk-rule p{margin:4px 0 0;font-size:12.5px;line-height:1.45;color:#374151}
.gpk-rule a{display:inline-block;margin-top:4px;font-size:12px;color:#0A7A3C;word-break:break-all}
html[dir="rtl"] .gpk-d{padding:0 62px 4px 12px}html[dir="rtl"] .gpk-go{margin:4px 62px 12px 12px}

/* the glass & aluminium pack from the shop-drawing screen (Windows, Doors, Joinery, Handrails on the Vego CAD page) */
.vcs-pack{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 10px;padding:8px 12px;border:1px solid #E5E7EB;border-radius:14px;background:#fff;text-align:start;color:inherit}
.vcs-pack .vcs-pki{flex:none;width:34px;height:34px}.vcs-pack .vcs-pki svg{width:100%;height:100%}
.vcs-pack span{flex:1;min-width:0;display:flex;flex-direction:column}.vcs-pack b{font-size:14px}.vcs-pack small{font-size:12px;color:#6B7280;line-height:1.35}
.vcs-pack>svg{flex:none;width:16px;height:16px;color:#9CA3AF}html[dir="rtl"] .vcs-pack>svg{transform:scaleX(-1)}
[data-theme="dark"] .vcs-pack{background:#1F2430;border-color:#2F3646}
/* the shop-drawing screen's groups (Glass & aluminium, Joinery & stone, Interiors, Buildings & façades, Decor & signs) */
.vcsgrps{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;margin:0 0 6px;padding:2px 0;scrollbar-width:none}.vcsgrps::-webkit-scrollbar{display:none}
.vcsgrps .chip{flex:none}
.vcsnote2{margin:8px 0 0;font-size:12.5px;line-height:1.45;color:#5B6170}
/* Vego CAD → Materials (the owner's 200 materials catalogue): four swatches a row like his catalogue */
.vmat-cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 0 8px}.vmat-cats::-webkit-scrollbar{display:none}.vmat-cats .chip{flex:none}
.vmat-q{margin:0 0 10px}.vmat-q small{color:#6B7280;font-weight:500}
.vmat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 8px}
.vmat-t{display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:0;border:0;background:none;text-align:start;color:inherit;min-width:0}
.vmat-t img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:6px;background:#F3F4F6;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.vmat-t b{font-size:10.5px;color:#0A7A3C;letter-spacing:.02em;margin-top:3px}.vmat-t small{font-size:11px;line-height:1.25;color:#374151;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.vmat-big img{display:block;width:100%;max-width:420px;height:auto;aspect-ratio:1;margin:0 auto;border-radius:12px}
.vmat-dt{display:flex;flex-direction:column;gap:2px;margin:12px 0 6px}.vmat-id{color:#0A7A3C;font-size:13px}.vmat-nm{font-size:18px}.vmat-dt small{color:#6B7280;font-size:13px}
.vmat-blank{display:flex;flex-direction:column;gap:2px;margin:8px 0;padding:10px 12px;border:1px dashed #D1D5DB;border-radius:12px}.vmat-blank b{font-size:13px}.vmat-blank span{font-size:12.5px;color:#6B7280}
.vmat-note{margin:6px 0 0;font-size:12.5px;line-height:1.45;color:#5B6170}
[data-theme="dark"] .vmat-t small{color:#C9CED8}[data-theme="dark"] .vmat-blank{border-color:#3A4152}
/* the floor plan's Fill → Material */
.fpmatcats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:min(320px,calc(100vw - 60px))}.fpmatcats::-webkit-scrollbar{display:none}.fpmatcats button{flex:none}
.fpmats{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px;max-height:150px;overflow-y:auto;max-width:min(300px,calc(100vw - 60px))}
.fpmats button{width:100%;aspect-ratio:1;height:auto;padding:0;border:0;border-radius:8px;overflow:hidden;background:#F3F4F6;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.fpmats button img{display:block;width:100%;height:100%;object-fit:cover}
.fpmats button.on{box-shadow:0 0 0 3px #3461DC}
.fpmatnm{font-weight:600;color:#1F2633}
/* the shop-drawing screen's bill of quantities and workshop plans (DSYN Pro engine 1.1.0) */
.vcsboq,.vcswork{margin:10px 0 0;padding:10px 12px;border:1px solid #E5E7EB;border-radius:14px;background:#fff}
.vcsboq summary,.vcswork summary{font-weight:700;font-size:14px;cursor:pointer}.vcsboq summary small{font-weight:500;color:#6B7280;margin-inline-start:6px}
.vcsboq-g{display:block;margin:10px 0 2px;font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:#0A7A3C}
.vcsboq .btn,.vcswork .btn{margin-top:8px}
.vcswork .vsk-grid{margin-top:6px}
[data-theme="dark"] .vcsboq,[data-theme="dark"] .vcswork{background:#1F2430;border-color:#2F3646}
/* the joinery card's cabinets (floor cabinets white, wall cabinets light green, tall cabinets grey) */
.vcj-strip{display:flex;gap:6px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}.vcj-strip::-webkit-scrollbar{display:none}
.vcj-strip .vc-p{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-height:50px}
.vcj-strip .vc-p b{font-size:13px}.vcj-strip .vc-p small{font-size:11.5px;color:var(--c);opacity:.8}
.vc-p.k-base{--c:#B45309;--bg:#F9F1EB;--bd:#E5C3A9}.vc-p.k-wall{--c:#0F766E;--bg:#ECF4F3;--bd:#ABCFCC}.vc-p.k-tall{--c:#4338CA;--bg:#F0EFFB;--bd:#BDB9EC}
.vcj-strip .vc-p.on{box-shadow:0 0 0 2px var(--c)}
.vcj-t{font-size:14px}
.vcj-more summary{font-weight:700;font-size:14px;cursor:pointer;padding:2px 0}
.vcc-acc{gap:6px}.vcc-acc .vc-num{flex:1 1 0;min-width:0}.vcc-acc .vc-num input{width:100%}
.vc-txt input{width:100%}
/* a card's change that waits for more (the engine's words) */
.vcs-draft{display:flex;flex-direction:column;gap:4px;margin:0 0 8px;padding:10px 12px;border:1.5px dashed #F59E0B;border-radius:12px;background:#FFFBEB}
.vcs-draft b{font-size:13px;color:#92400E}.vcs-draft span{font-size:12.5px;color:#78350F;line-height:1.4}.vcs-draft .btn{align-self:flex-start}
[data-theme="dark"] .vcs-draft{background:#2A2312;border-color:#B7791F}
/* the curtain wall card's map of cells (top row first) */
.vcf-map{display:flex;flex-direction:column;gap:3px;margin:0 0 10px;padding:6px;border-radius:10px;background:#F3F4F6;overflow-x:auto}
.vcf-r{display:flex;gap:3px}
.vcf-c{flex:1 0 34px;min-width:34px;height:34px;border:1.5px solid #D1D5DB;border-radius:6px;background:#fff;font:600 12px/1 inherit;color:#374151;padding:0}
.vcf-c.k-vision{background:#E5F5FF;border-color:#9FDBFF;color:#0B5C91}.vcf-c.k-spandrel{background:#E5E7EB;border-color:#9CA3AF;color:#1F2937}
.vcf-c.k-vent{background:#EDEEF1;border-color:#A7CFCB;color:#0A7A3C}.vcf-c.k-door{background:#0A0A0A;border-color:#0A0A0A;color:#5EEAD4}
.vcf-c.k-louvre{background:#FEF3C7;border-color:#FCD34D;color:#92400E}.vcf-c.k-panel{background:#F5F5F4;border-color:#A8A29E;color:#44403C}
.vcf-c.on{box-shadow:0 0 0 2.5px #0A0A0A}
[data-theme="dark"] .vcf-map{background:#1F2430}
.vcf-key{display:flex;flex-wrap:wrap;gap:4px 12px;margin:-4px 0 10px;font-size:12px;color:#4B5563}
.vcf-key span{display:inline-flex;align-items:center;gap:5px}
.vcf-key .vcf-c{display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;min-width:20px;height:20px;font-size:10px;border-radius:4px}
.vcpf-tabs{margin:0 0 8px;flex-wrap:wrap}
.vcs-figs{margin:0 0 10px;padding:8px 10px;border-radius:8px;background:#F3F4F6;font-size:13px;font-weight:600;color:#1F2937}
[data-theme="dark"] .vcs-figs{background:#1F2430;color:#E5E7EB}
/* the workshop's own CNC standards (not the starting values) */
.vcs-own input{border-color:#08B932;background:#EDEEF1}
[data-theme="dark"] .vcs-own input{background:#12372A}
#vcs-work .vcs-own input{border:1.5px solid #08B932;background:#EDEEF1}
[data-theme="dark"] #vcs-work .vcs-own input{background:#12372A}
/* the boxes line up when a label takes two lines */
#vcs-work .vsk-grid .adf-f{display:flex;flex-direction:column;justify-content:flex-end}
/* site measurement on the shop-drawing screen (DSYN Pro stage 5) */
.vcssite{margin:10px 0 0;padding:10px 12px;border:1px solid #E5E7EB;border-radius:14px;background:#fff}
.vcssite>summary{font-weight:700;font-size:14px;cursor:pointer}
.vcssite .vsk-grid{margin-top:4px}
.vcssite .vsk-grid .adf-f{display:flex;flex-direction:column;justify-content:flex-end}
.vcssite .adf-f.full{grid-column:1/-1}
.vsk-g3{grid-template-columns:1fr 1fr 1fr}
.vcs-site-r{margin-top:8px}
.vcs-make b{color:#0A7A3C;font-size:15px}
.vcssite .vc-acts{margin-top:8px}
[data-theme="dark"] .vcssite{background:#1F2430;border-color:#2F3646}
/* Straighten a photo (over the screen it was opened from) */
.vps-layer{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;background:#F5F6F8;color:#111827}
.vps-head{display:flex;align-items:center;gap:8px;padding:calc(10px + env(safe-area-inset-top)) 12px 10px;background:#fff;border-bottom:1px solid #E5E7EB;font-size:16px}
.vps-head .grow{flex:1}
.vps-body{flex:1;overflow:auto;padding:12px 16px calc(16px + env(safe-area-inset-bottom))}
.vps-pick{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:200px;border:2px dashed #9CA3AF;border-radius:16px;background:#fff;text-align:center;padding:20px;cursor:pointer}
.vps-pick input{position:absolute;opacity:0;width:1px;height:1px}
.vps-pick b{font-size:16px}.vps-pick small{color:#6B7280}
.vps-stage{position:relative;margin:8px auto;touch-action:none;user-select:none}
.vps-stage canvas{display:block;width:100%;height:100%;border-radius:8px}
.vps-stage svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.vps-h{position:absolute;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:3px solid #fff;background:rgba(19,148,95,.85);box-shadow:0 1px 6px rgba(0,0,0,.35);touch-action:none;padding:0}
.vps-h i{font:700 13px/1 inherit;color:#fff;font-style:normal}
.vps-res img{display:block;max-width:100%;max-height:60vh;margin:0 auto;border-radius:8px;background:#fff}
[data-theme="dark"] .vps-layer{background:#111522;color:#E5E7EB}
[data-theme="dark"] .vps-head,[data-theme="dark"] .vps-pick{background:#1F2430;border-color:#2F3646}
/* the 3D view of a design (DSYN Pro stage 7) */
.vcs-viewtabs{margin:10px 0 6px}
.vcs3d{margin:0 0 6px;padding:8px;border:1px solid #E5E7EB;border-radius:14px;background:linear-gradient(#FFFFFF,#F1F4F7)}
.vcs3d svg{display:block;width:100%;height:min(62vh,420px);touch-action:none;cursor:grab}
.vcs3d-views{justify-content:center;margin-top:4px}
.vcs3d-open{display:flex;align-items:center;gap:10px;margin:6px 4px 0;font-size:13px}
.vcs3d-open input{flex:1}
[data-theme="dark"] .vcs3d{background:linear-gradient(#232A36,#1A1F29);border-color:#2F3646}
.vcs-viewtabs{align-items:center}.vcs-viewtabs .grow{flex:1}
.vcs-sec{margin:8px 0;padding:8px 0;border-top:1px solid #E5E7EB}
.vcs-sec .vcssheet{margin-top:6px}
/* title block and revisions (cad-title.js) */
.vct-grid{margin:6px 0}
.vct-grid .wide{grid-column:1/-1}
.vct-h{display:block;margin:10px 0 4px;font-size:13px}
.vct-rev{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid #E5E7EB;font-size:13px}
.vct-rev b{flex:none;min-width:28px;height:24px;display:grid;place-items:center;border-radius:8px;background:#EEF2FF;color:#3461DC}
.vct-rev span{flex:1;min-width:0}
.vct-new{padding-top:8px;border-top:1px dashed #D9DEEA}
:root[data-theme="dark"] .vct-rev{border-color:#2A2F3A}:root[data-theme="dark"] .vct-rev b{background:#24305A;color:#C9D6FF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vct-rev{border-color:#2A2F3A}:root:not([data-theme="light"]) .vct-rev b{background:#24305A;color:#C9D6FF}}
/* glass cutting plan (cad/cut-plan.js) */
.cutplan .cp-box{margin:0 0 12px;padding:10px 12px;border:1px solid var(--line,#E3E4EE);border-radius:12px;background:var(--pane,#fff)}
.cutplan .cp-box summary{font-weight:600;cursor:pointer}
.cutplan .cp-src{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line,#E3E4EE)}
.cutplan .cp-src span{display:flex;flex-direction:column}
.cutplan .cp-src small{color:var(--muted,#5F6378)}
.cutplan .cp-g h4{margin:14px 0 2px}
.cutplan .cp-sum{margin:0 0 8px;color:var(--muted,#5F6378)}
.cutplan .cp-sheet{margin:0 0 12px}
.cutplan .cp-svg{width:100%;height:auto;display:block;border-radius:8px;background:#fff}
.cutplan .cp-sheet figcaption{font-size:12.5px;color:var(--muted,#5F6378);margin-top:4px}
/* hardware library (hardware-library.js) */
.hwlib .hw-h{margin:16px 0 6px;font-size:13px;letter-spacing:.02em;color:var(--mut,#6B6F80)}
.hwlib .hw-row{display:flex;justify-content:space-between;gap:12px;width:100%;padding:10px 12px;margin:0 0 6px;border:1px solid var(--line,#E3E4EE);border-radius:12px;background:var(--pane,#fff);color:inherit;font:inherit;text-align:start;cursor:pointer}
.hwlib .hw-row span{display:flex;flex-direction:column;min-width:0}
.hwlib .hw-row small{color:var(--mut,#6B6F80);font-size:12px;overflow-wrap:anywhere}
.hwlib .hw-row .hw-prod{align-items:flex-end;text-align:end;max-width:55%}
.hwlib .hw-row.set{border-color:var(--pri,#4F46E5)}
@media (max-width:420px){.hwlib .hw-row{flex-direction:column}.hwlib .hw-row .hw-prod{align-items:flex-start;text-align:start;max-width:none}}
/* 3D view (model3d.js, shared/ui/view3d.js) */
.v3sheet .v3box{height:min(62vh,520px);min-height:280px;border:1px solid var(--line,#E3E4EE);border-radius:14px;background:linear-gradient(180deg,var(--pane,#fff),var(--bg,#F4F5F8));overflow:hidden}
.v3sheet .v3views{display:flex;gap:8px;margin:10px 0 4px;flex-wrap:wrap}
/* full size for a drawnut window on a tablet or a computer (vego-cad-page.js dnFullSync): a button before the window's ×,
   only on wide screens; full size fills the screen with a small margin */
.dnfull{display:none}
@media (min-width:820px){
  #sheet .shead .dnfull{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;margin:0 4px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
  #sheet .shead .dnfull:hover{background:rgba(16,24,40,.06)}
  #sheet .shead .dnfull:focus-visible{outline:2px solid #08B932;outline-offset:2px}
  .dnfull svg{width:18px;height:18px}
  .dnfull .dnf-off,#sheet.dn-full .dnfull .dnf-on{display:none}
  #sheet.dn-full .dnfull .dnf-off{display:block}
  #sheet.sheet.dn-full{left:12px!important;right:12px!important;top:12px!important;bottom:12px!important;width:auto!important;height:auto!important;max-height:none!important;transform:none!important;border-radius:16px}
}
/* drawnut's client card (drawnut-client.js) */
.dnclient .dnc-acts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.dnclient .dnc-h{display:flex;align-items:center;gap:8px;margin:18px 0 8px;font-size:14px}
.dnclient .dnc-h span{font-size:12px;font-weight:600;color:var(--muted,#6B6F80)}
.dnclient .dnc-row{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:10px 12px;margin:0 0 6px;border:1px solid var(--line,#E3E4EE);border-radius:12px;background:var(--pane,#fff);color:inherit;font:inherit;text-align:start;cursor:pointer}
.dnclient .dnc-row small{color:var(--muted,#6B6F80);font-size:12px}
/* ---------- the drawing screen shows only the chosen kind (owner 28 Oct 13:51; cad-systems.js vcsKindPaint / vcsPickOpen /
   vcsTplsToggle) ----------
   At the top the kind and its group with Change → the picker (groups = category, kinds = sub category, the reference
   packs); the designs show the chosen one until "All designs"; sections with a small heading. On a phone: the design, then
   the drawing, then the sizes and the options. On a computer (from 900 px): a wide window, the choices on the left and the
   drawing on the right, each scrolling on its own, so the drawing is always in sight; the buttons in one row at the top. */
.vcs-kind{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.vcs-kh{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.vcs-kh small{font-size:12px;color:#6B7280}
.vcs-kh b{font-size:17px;color:#111827;overflow-wrap:anywhere}
.vcs-kind .vcs-chg{flex:none}
.vcs-pick{margin:0 0 14px;padding:12px;border:1px solid #E5E7EB;border-radius:16px;background:#F7F9F8}
.vcs-pick .vcsgrps{flex-wrap:wrap;overflow:visible;margin:0 0 10px}
.vcs-pick .vcscats{flex-wrap:wrap;overflow:visible;padding:0 0 10px;margin:0 0 10px;border-bottom:1px solid #E5E7EB}
.vcs-packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px}
.vcs-packs .vcs-pack{margin:0}
.vcs-sec{margin:0 0 14px}
.vcs-sh{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px;margin:0 0 8px}
.vcs-sh b{font-size:13px;font-weight:700;color:#374151}
.vcs-more{border:0;background:none;padding:2px 0;color:#0A7A3C;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.vcs-more:focus-visible{outline:2px solid #08B932;outline-offset:2px;border-radius:6px}
.vcstpls.vcstpls{margin-bottom:0}
.vcstpls:not(.open){grid-template-columns:1fr}
.vcstpls:not(.open) .vcstpl:not(.on){display:none}
/* phone order: design, drawing, sizes, options (the two panes give their parts to one column) */
.vcs-split{display:flex;flex-direction:column}
.vcs-side,.vcs-stage{display:contents}
.vcs-dsec{order:1}#vcs-view{order:2}#vcs-prev{order:3}#vcs-3d{order:4}.vcs-ssec{order:5}#vcs-panels{order:6}#vcs-site{order:7}#vcs-sum{order:8}
#vcs-secs{order:9}#vcs-title{order:10}#vcs-boq{order:11}#vcs-work{order:12}#vcs-saved{order:13}.vcs-side>.vcsnote{order:14}
.vcs-ssec{margin-top:6px}
/* the options of a design: their rows side by side where they fit, a row of choices across */
.vcs2 .vcspanels .vc-card{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;align-items:end}
.vcs2 .vcspanels .vc-card>:not(.vc-row),.vcs2 .vcspanels .vc-card>.vc-row:has(.vc-chips,.vc-strip,.vsk-step,textarea,.vcs-wide){grid-column:1/-1}
.vcs2 .vcspanels .vc-card>summary{grid-column:1/-1}
.vcs2 .vcspanels .vc-row .vc-num input{width:100%;box-sizing:border-box}
[data-theme="dark"] .vcs-pick{background:#161B24;border-color:#2F3646}
[data-theme="dark"] .vcs-kh b{color:#F3F4F6}
[data-theme="dark"] .vcs-sh b{color:#D1D5DB}
@media (min-width:900px){
  #sheet.sheet[data-mode="cadsys"]{width:min(1320px,calc(100vw - 48px));height:calc(100vh - 48px);max-height:none}
  #sheet[data-mode="cadsys"]>.shead{order:0}
  #sheet[data-mode="cadsys"]>.vcsfoot{order:1;display:flex!important;flex-wrap:wrap;justify-content:flex-end;gap:8px;padding-top:0;border-top:0}
  #sheet[data-mode="cadsys"]>.sbody{order:2}
  #sheet[data-mode="cadsys"] .vcsbody.vcs2{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
  #sheet[data-mode="cadsys"] .vcs-split{display:grid;grid-template-columns:minmax(340px,420px) minmax(0,1fr);gap:20px;flex:1;min-height:0}
  #sheet[data-mode="cadsys"] .vcs-side,#sheet[data-mode="cadsys"] .vcs-stage{display:block;min-height:0;overflow:auto;overscroll-behavior:contain}
  #sheet[data-mode="cadsys"] .vcs-side{grid-column:1;grid-row:1;padding:0 6px 16px 0}
  #sheet[data-mode="cadsys"] .vcs-stage{grid-column:2;grid-row:1;padding:0 4px 16px 0}
  #sheet[data-mode="cadsys"] .vcs-stage .vcsprev{margin-top:10px}
  #sheet[data-mode="cadsys"] .vcs-pick{max-height:46vh;overflow:auto}
}
/* "Options" over a design's own card, only while it has one */
.vcs-osh{order:6;display:none!important;margin-top:6px}
.vcs-side .vcs-osh:has(+ .vcspanels:not([hidden])){display:flex!important}
/* tap a part on the drawing (cad-systems.js vcsPrevTap / vcsPrevMarkSel): the parts show they can be tapped; the chosen one
   outlined in drawnut's dark green */
#vcs-prev.vcs-tap .vcssheet [data-k]{cursor:pointer}
#vcs-prev .vcs-hit{fill:rgba(9,112,72,.16);stroke:#097048;stroke-width:1.1;pointer-events:none}
#vcs-prev .vcs-taphint{display:block;margin:6px 0 0;font-size:12.5px;font-weight:600;color:#097048}
/* the drawing screen's icons (owner 28 Oct 15:21, cad-systems.js vcsToolbar): ‹ › | ↶ ↷ | PDF ⬇ share, in one row — at the
   foot on a phone, at the top on a computer; a thin line between the groups; greyed when there is nothing to go to */
#sheet[data-mode="cadsys"] .vcs-tb{display:flex;align-items:center;justify-content:space-between;gap:2px;min-width:0;padding:2px;border:1px solid #E3E6EA;border-radius:14px;background:#fff}
#sheet[data-mode="cadsys"] .vcs-ib{display:grid;flex:1 1 0;place-items:center;min-width:38px;max-width:52px;height:40px;padding:0;border:0;border-radius:11px;background:none;color:#1F2937;cursor:pointer;-webkit-tap-highlight-color:transparent}
#sheet[data-mode="cadsys"] .vcs-ib svg{width:22px;height:22px}
#sheet[data-mode="cadsys"] .vcs-ib:hover:not(:disabled){background:#EEF7F2;color:#097048}
#sheet[data-mode="cadsys"] .vcs-ib:active:not(:disabled){transform:scale(.94)}
#sheet[data-mode="cadsys"] .vcs-ib:focus-visible{outline:2px solid #08B932;outline-offset:1px}
#sheet[data-mode="cadsys"] .vcs-ib:disabled{color:#C3C8CF;cursor:default}
#sheet[data-mode="cadsys"] .vcs-tsep{flex:none;width:1px;height:22px;background:#E3E6EA}
html[dir="rtl"] #sheet[data-mode="cadsys"] .vcs-ib.flip svg{transform:scaleX(-1)}
[data-theme="dark"] #sheet[data-mode="cadsys"] .vcs-tb{background:#161B24;border-color:#2F3646}
[data-theme="dark"] #sheet[data-mode="cadsys"] .vcs-ib{color:#E5E7EB}
[data-theme="dark"] #sheet[data-mode="cadsys"] .vcs-ib:disabled{color:#4B5563}
[data-theme="dark"] #sheet[data-mode="cadsys"] .vcs-tsep{background:#2F3646}
@media (min-width:900px){
  #sheet[data-mode="cadsys"] .vcs-ib{flex:none;width:44px;max-width:none}
}
/* Drawing | 3D view | Presentation: one row, three buttons of the same height and width (owner 28 Oct 15:21 "it should
   aligned") */
#vcs-view.vcs-viewtabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-items:stretch;overflow:visible;flex-wrap:nowrap}
#vcs-view.vcs-viewtabs .vcs-vt{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;min-width:0;height:40px;margin:0;padding:0 8px;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#vcs-view.vcs-viewtabs .vcs-vt svg{flex:none;width:16px;height:16px}
#vcs-view.vcs-viewtabs:has(> .vcs-vt:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
/* the PDF icon is Vego's red PDF file (file-share.js pdfMark); here it keeps the toolbar's size */
#sheet[data-mode="cadsys"] .vcs-ib.pdfbtn:not(#_){flex:1 1 0!important;width:auto!important;min-width:38px!important;max-width:52px!important;height:40px!important}
#sheet[data-mode="cadsys"] .vcs-ib.pdfbtn:not(#_) svg.ipdf{width:20px;height:24px}
@media (min-width:900px){#sheet[data-mode="cadsys"] .vcs-ib.pdfbtn:not(#_){flex:none!important;width:44px!important;max-width:none!important}}
/* the drawing's checks (cad-checks.js) */
.vckbox summary b.vck-st{color:#B45309}.vckbox summary b.vck-st.ok{color:#0B7F5A}
.vck-s{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:9px 0;border-top:1px solid #E5E7EB;font-size:13px}
.vck-s > i{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid #CBD5E1;display:grid;place-items:center;font-style:normal;font-size:12px;color:#fff}
.vck-s.ok > i{background:#0B7F5A;border-color:#0B7F5A}
.vck-s > span{flex:1;min-width:160px}.vck-s > span b{display:block}.vck-s > span small{display:block;color:#64748B;font-size:12px;margin-top:1px}
.vck-s select{max-width:100%;font-size:13px}