/* js/tools/window-editor/window-editor.css — saiu do <style> do index.html no corte de CSS (v302). 166 regra(s), na ordem original; os @media reabertos onde o contexto muda. Seletor com mais de um dono fica na casca. */
/* v309 (commit 1 do novo layout do MZ): o #mz saiu do shell.css e virou COLUNA FLEX. v311 (commit 3): os blocos na ordem do
   prototipo — B1 .mzh, B2 .mzdraw (o que sobrar; v390: com as etiquetas .mztags dentro — B3 .mzcells e B4 .mzctx sairam), B5 .mzf (altura fixa), B6 .mzn (v389: as abas rolam em .mzn-tabs e o fim fixo .mzn-end tem Done e Save & new; o rodape B7 .mza saiu).
   v387: a composicao e' FIXA (o antigo Padrão) — sairam os prontos, as alturas em unidades de 50 px, o valor grande por
   altura do campo, as celulas em 2 colunas, as etiquetas do preset E e a faixa "nao cabe". Do mr.mzlayout ficam a fonte
   (--mzfs), o escurecer (--mzdim) e a mao (body[data-hand]). Se nao couber (fonte grande), o #mz rola: nada fica fora de alcance. */
#mz{position:fixed;inset:0;z-index:1900;background:var(--paper);display:flex;flex-direction:column;gap:6px;padding-bottom:env(safe-area-inset-bottom);color:var(--ink);overflow-y:auto}
#mz[hidden]{display:none}
#mz>*{flex:none}
#mz>.mzdraw{flex:1 1 0px;min-height:calc(var(--u-draw,2)*50px);margin:2px 10px 0} /* v397: unidades de 50 px do mr.mzlayout v4 */
#mz>.mzf{height:calc(var(--u-fields,8)*50px)} /* v397: o campo em unidades (Campo grande = 8 u = 400 px, ~metade da tela; Desenho grande = 4 u, os 200 px da v391) */
/* --mzfs multiplica todo texto; --mzdim escurece por uma camada ::after acima de tudo no #mz e abaixo do #mzpick (z 1960) */
#mz[data-dim]::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--mzdim,0);pointer-events:none;z-index:1000} /* so existe com dim > 0: a camada vazia mudava 1 tom nos pills sobre o canvas 3-D */
/* B2 — as etiquetas (v390): pilulas sob a janela, dentro do cartao; a cor vem do data-mzt (--mzc/--mzs). Obrigatoria vazia tracejada
   laranja; opcional vazia tracejada cinza; a do campo ativo com contorno. */
#mz .mztags{display:flex;flex-wrap:wrap;gap:3px;margin:0 10px;flex:none;justify-content:flex-start} /* v396: gap 3 px e o padding minimo (Rafael); v397: um bloco proprio, fora do cartao do desenho — ordem e 👁 pela folha do ◑ */
#mz .mztags .tg{border-radius:999px;padding:0 6px;min-height:0;font:inherit;font-weight:700;font-size:calc(11px*var(--mzfs,1));line-height:1.45;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;border:1.5px solid transparent;background:var(--mzs);color:var(--mzt,var(--mzc));text-align:left}
#mz .mztags .tg[aria-pressed="true"]{border-color:var(--mzc);box-shadow:0 0 0 1.5px var(--mzc)}
#mz .mztags .tg.empty{background:#fff;border:1.5px dashed var(--warn);color:var(--warn)}
#mz .mztags .tg.bad{background:#fff;border:1.5px solid var(--bad);color:var(--bad)} /* v408 (M3): medida impossivel para a forma */
.mzdraw .mzdim.bad{color:var(--bad);white-space:normal} /* v408: o motivo embaixo do desenho */
#mz .mztags .tg.opt{background:#fff;border:1.5px dashed var(--line);color:var(--muted);font-weight:500}
body[data-hand="left"] #mz .mztags{justify-content:flex-end}
/* B5 — a guia (a esquerda quando o 🎮 esta desligado) e o ⅛″/standard */
.mzf .guide{border:2px solid var(--mzc,var(--line));border-radius:16px;background:var(--mzs,#fff);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--mzt,var(--mzc,var(--ink)));text-align:center;overflow:hidden;min-height:0;padding:6px}
.mzf .guide svg{width:34px;height:34px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mzf .guide b{font-size:calc(16px*var(--mzfs,1));font-family:Archivo,sans-serif;text-transform:capitalize}
.mzf .guide small{color:var(--ink2);font-size:calc(11px*var(--mzfs,1))}
.mzf .guide small.hint{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:calc(10.5px*var(--mzfs,1));line-height:1.2} /* v390: a dica que era a faixa de contexto */
.mzf .guide .dots{display:flex;gap:4px;flex-wrap:wrap;justify-content:center} .mzf .guide .dots i{width:6px;height:6px;border-radius:50%;background:var(--line)} .mzf .guide .dots i.on{background:var(--mzc)}
.mzf .mzseg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;flex:none;margin-top:2px}
.mzf .mzseg button{border:none;background:#fff;font:inherit;font-size:calc(11px*var(--mzfs,1));padding:4px 8px;min-height:26px;color:var(--ink2)}
.mzf .mzseg button[aria-pressed="true"]{background:var(--acc2);color:var(--accent);font-weight:700}
/* B5 — a rodinha com anterior / valor / proximo, e o digitar no lugar do valor */
.mzf .fld .pv{display:var(--mzpv,block);font-size:calc(13px*var(--mzfs,1));color:var(--muted);line-height:1.1;height:calc(15px*var(--mzfs,1));overflow:hidden;white-space:nowrap;max-width:100%;text-overflow:ellipsis}
.mzf .fld>small{font-size:calc(11px*var(--mzfs,1));line-height:1.1}
/* v392: uma roda por campo — o rotulo vira o seletor do passo (width | height, leg | top) e o botao de teclado abre o digitar */
.mzf .fld .mzsub{display:inline-flex;gap:3px;margin-bottom:2px}
.mzf .fld .mzsub button{border:1px solid var(--line);border-radius:999px;background:#fff;font:inherit;font-size:calc(11px*var(--mzfs,1));padding:2px 9px;min-height:24px;color:var(--ink2)}
.mzf .fld .mzsub button[aria-pressed="true"]{background:var(--mzs,#fff);color:var(--mzt,var(--mzc,var(--ink)));border-color:var(--mzc,var(--line));font-weight:700}
.mzf .fld .kbd{position:absolute;left:8px;top:6px;min-height:28px;min-width:32px;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit;font-size:calc(14px*var(--mzfs,1));color:var(--ink2);padding:0 5px;line-height:1}
.mzf .fld.typing input{width:100%;max-width:150px;font-size:calc(18px*var(--mzfs,1))!important;text-align:center;min-height:40px}
.mzf .fld.typing .mzfr{gap:3px} .mzf .fld.typing .mzfr button{min-height:30px;min-width:34px;font-size:calc(13px*var(--mzfs,1))}
.mzf .fld b.tick{animation:mztick .12s ease-out}
/* a mao esquerda: campo a esquerda e guia a direita, abas e acoes invertidas, a borda das celulas a direita. O desenho nao espelha. */
body[data-hand="left"] .mzf:not(.one){direction:rtl} body[data-hand="left"] .mzf>*{direction:ltr}
body[data-hand="left"] .mzn,body[data-hand="left"] .mzn-tabs{flex-direction:row-reverse}
.mzn-tabs button i.rq{left:6px;right:auto;background:var(--warn)}
.wincard .mini{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font-family:"IBM Plex Mono",Consolas,monospace;font-size:11.5px}
.wincard .mini span:nth-child(odd){color:var(--muted);font-family:"Source Sans 3",sans-serif}
.wincard .act{display:flex;gap:6px;justify-content:flex-end;margin-top:10px}
.wincard .act button{font:inherit;font-size:12px;border:1px solid var(--line);background:#fff;border-radius:8px;padding:5px 12px;cursor:pointer}
.wincard .act button.pri{background:var(--accent);color:var(--on-acc);border-color:var(--accent);font-weight:700}
.gpop .gp{border-left:1px solid var(--line);padding-left:10px;min-width:190px;display:flex;flex-direction:column;align-items:center}
.gpop .gn{font-family:Archivo,sans-serif;font-weight:700;font-size:12.5px;margin-top:4px}
body:is([data-theme="dark"],[data-theme="hud"],[data-theme="holo"],[data-theme="sketchdark"]) .pill{color:var(--ink2)}
body:is([data-theme="dark"],[data-theme="hud"],[data-theme="holo"],[data-theme="sketchdark"]) #mapsvg,body:is([data-theme="dark"],[data-theme="hud"],[data-theme="holo"],[data-theme="sketchdark"]) #applymap,body:is([data-theme="dark"],[data-theme="hud"],[data-theme="holo"],[data-theme="sketchdark"]) .mdp svg,body:is([data-theme="dark"],[data-theme="hud"],[data-theme="holo"],[data-theme="sketchdark"]) .gpop .gp svg{background:var(--soft)!important}
.ctag{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12.5px;font-weight:600;border:1px solid rgba(0,0,0,.2);border-radius:999px;padding:4px 12px;cursor:pointer;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.ctag.dflt{background:var(--soft);color:var(--ink2);font-weight:400;border-style:dashed}
.ctag small{font-weight:400;opacity:.8;font-size:10.5px}
.ctag.on{outline:2px solid var(--accent);outline-offset:2px}
.ctag:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.grp .ctag,#trim-colors .ctag{width:100%;justify-content:space-between}
.pk .opt .ctag{cursor:default;pointer-events:none}
.cpop .ctag{justify-content:space-between}
.notest{font-size:11.5px;color:var(--muted);margin-bottom:6px;padding-bottom:6px;border-bottom:1px dashed var(--line);white-space:normal}
.notest div{margin:1px 0}
.cam{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:5px;margin-left:4px;vertical-align:middle;cursor:pointer;border:1px solid var(--line);background:#fff;color:#9aa3b2}
.cam svg{width:12px;height:12px}
.cam.part{color:#b7690a;border-color:#f0c48a;background:#fff7e6}
.cam.done{color:#fff;border-color:#1a6b3c;background:#1a6b3c}
.campop .cs{display:flex;gap:8px;flex-wrap:wrap}
.campop .cl{text-align:center;color:var(--muted);margin-top:3px}
.lines input.tin{width:78px;font:inherit;font-size:12px;border:none;border-bottom:1px dashed #bbb;background:transparent;padding:1px 3px}
@media (max-width:640px){
.lines .del,.lines .cam,.lines button{min-width:44px}
}
.mzripple{position:fixed;width:20px;height:20px;border-radius:50%;border:3px solid var(--accent);pointer-events:none;z-index:1850;transform:translate(-50%,-50%);animation:mzr .45s ease-out forwards}
.mzn-tabs button[data-mzt][aria-pressed="true"]{color:var(--mzt,var(--mzc));background:var(--mzs)}
.mzn-tabs button[data-mzt="size"] svg{stroke-width:2.6}
.mzn-tabs button.bump svg{animation:mzpop .5s ease-out}
.mzf[data-mzt] .fld.on{border-color:var(--mzc);background:var(--mzs)}
.mzf[data-mzt] .fld.on .arrows{color:var(--mzt,var(--mzc))}
.mzf[data-mzt] .tags button[aria-pressed="true"],.mzf[data-mzt] .az button[aria-pressed="true"]{background:var(--mzt,var(--mzc));border-color:var(--mzt,var(--mzc))}
.mzf[data-mzt="size"] .fld b,.mzf[data-mzt="leg"] .fld b{font-size:calc((var(--mzf-v,26px) + 4px)*var(--mzfs,1))} /* v397: cresce com o campo */
.mztags .tg.flash,.mzdraw.flash{animation:mzflash .7s ease-out}
.mzdraw{--mzc:#d9640f;--mzs:#fdebdc;--mzt:#ae500c}
.mzdraw.ghost svg{opacity:.6}
.mzdraw{flex-direction:column;gap:4px}
.mzdraw .mzvw{position:absolute;right:6px;top:6px;font:inherit;font-size:calc(11px*var(--mzfs,1));font-weight:700;min-height:26px;padding:0 9px;border:1px solid var(--line);background:#fff;color:var(--ink2);border-radius:999px;z-index:2}
.mzdraw .mzvw[aria-pressed="true"]{background:var(--accent);color:var(--on-acc);border-color:var(--accent)}
.mzdraw svg[data-dhphoto]{border-radius:8px}
.mzdraw>svg,.mzdraw>canvas{max-height:100%}
.mzdraw svg:not([data-dhphoto]){max-height:calc(100% - 20px)}
.mzdraw canvas{display:block;border-radius:8px;max-width:100%;touch-action:none}
.mzdraw .ghostlab{position:absolute;top:4px;left:0;right:0;pointer-events:none;text-align:center;font-size:calc(11px*var(--mzfs,1));color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.mzdraw{position:relative}
/* v310: o lado 2-D — grade com as medidas em volta do desenho (largura em cima, altura a esquerda girada, perna embaixo) */
/* v391: uma coluna so — a linha das medidas (.mzsize) em cima, o desenho no meio, a perna embaixo; a medida deitada na lateral saiu */
.mzdraw .mz2d{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:2px;width:100%;flex:1 1 0px;min-height:0}
.mzdraw .mzdim{font-size:calc(12px*var(--mzfs,1));font-weight:700;color:var(--ink);text-align:center;align-self:center;justify-self:center;line-height:1;white-space:nowrap}
.mzdraw .mzdim.miss{color:var(--mzk,var(--mzt,var(--mzc)))}
.mzdraw .mzdim.l{grid-area:3/1}
.mzdraw .mzsize{grid-area:1/1;border:none;background:transparent;font:inherit;padding:2px 44px 2px;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:0 7px;font-weight:800;font-size:calc(22px*var(--mzfs,1));line-height:1.1;color:var(--mzk,var(--mzt,var(--mzc)));font-family:Archivo,sans-serif;min-height:0;min-width:0;cursor:pointer}
.mzdraw .mzsize .mzdim{font-size:inherit;color:inherit;font-weight:inherit;line-height:inherit}
.mzdraw .mzsize .mzdim.miss{color:var(--warn)}
.mzdraw .mzsize .x{font-weight:600}
.mzdraw .mzsize small{flex:0 0 100%;text-align:center;font-size:calc(9.5px*var(--mzfs,1));letter-spacing:.14em;font-weight:700;color:var(--mzk,var(--mzt,var(--mzc)));text-transform:uppercase;line-height:1.2;font-family:"Source Sans 3",sans-serif}
.mzdraw .mzsvg{grid-area:2/1;display:flex;align-items:center;justify-content:center;min-height:0;min-width:0}
.mzdraw .mzsvg svg{max-height:100%}
/* v739 — o recorte do motor 3-D do site no lugar do desenho: sem palco (o fundo do cartao aparece em todos os temas), do tamanho da caixa; o toque passa
   para o cartao (o duplo toque abre o look) */
.mzdraw .mzsvg img.mzsnap{display:block;width:100%;height:100%;min-height:0;object-fit:contain;-webkit-user-drag:none;-webkit-user-select:none;user-select:none;pointer-events:none}
/* v766 — enquanto o recorte nao chega: o espaco vazio (sem o SVG antigo), ou o recorte anterior da mesma janela apagado (a roda do tamanho andando) */
.mzdraw .mzsvg img.mzsnap.was{opacity:.35}
.mzdraw .mzsvg .mzsnap-wait{display:block;width:100%;height:100%;min-height:96px}
.mzdraw .mzvw.mzsp{right:auto;left:6px}
.mzdraw .mz2d~.ghostlab{left:8px;right:auto;text-align:left}
.mzh button[data-mztheme]{font-size:calc(22px*var(--mzfs,1));padding:0 6px;min-width:40px}
.mzh button[data-mzgame]{font-size:calc(22px*var(--mzfs,1));padding:0 6px;opacity:.55}
.mzh button[data-mzgame][aria-pressed="true"]{opacity:1;background:var(--acc2);border-radius:10px}
.mzf .mzgr{display:grid;grid-auto-rows:minmax(0,1fr);gap:6px;min-height:0}
.mzf .mzgr .tags{padding:4px;gap:6px}
.mzf .mzgr .tags button{min-height:40px;min-width:48px;font-size:calc(15px*var(--mzfs,1))}
.mzf .scrub{border:2px solid var(--mzc,var(--line));background:var(--mzs,#fff);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--mzt,var(--mzc,var(--ink)));text-align:center;position:relative;overflow:hidden;min-height:0;padding:6px}
.mzf .scrub svg{width:44px;height:44px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mzf .scrub b{font-size:calc(20px*var(--mzfs,1));font-family:Archivo,sans-serif;text-transform:capitalize}
.mzf .scrub small{color:var(--muted);font-size:calc(12px*var(--mzfs,1))}
.mzf .scrub .dots{display:flex;gap:5px}
.mzf .scrub .dots i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.mzf .scrub .dots i.on{background:var(--mzc)}
.mzf .scrub .side{position:absolute;left:0;right:0;display:flex;justify-content:center;font-size:calc(18px*var(--mzfs,1));color:var(--mzc);opacity:.5;pointer-events:none}
.mzf .scrub .side.t{top:6px}
.mzf .scrub .side.b{bottom:6px}
.mzh{display:flex;align-items:center;gap:6px;padding:6px 8px;border-bottom:1px solid var(--line);min-height:52px}
.mzh button{min-height:44px;border:none;background:transparent;font:inherit;font-size:calc(16px*var(--mzfs,1));color:var(--accent);padding:0 8px;font-weight:600}
.mzh b{flex:1;text-align:center;font-size:calc(16px*var(--mzfs,1));font-family:Archivo,sans-serif;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mzdraw{border:1px solid var(--line);border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--muted);font-size:calc(14px*var(--mzfs,1));text-align:center;padding:8px}
.mzdraw svg{max-width:100%;max-height:100%;width:auto!important;height:auto!important;min-height:0;flex:0 1 auto}
.mzfr{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.mzfr button{min-height:40px;min-width:42px;padding:0 6px;border-radius:10px;border:1px solid var(--line);background:#fff;font:inherit;font-size:calc(15px*var(--mzfs,1))}
/* B6 (v389): .mzn = a zona das abas (.mzn-tabs, rola na horizontal, sem barra) + o fim fixo (.mzn-end: ✓ Done e + Save & new, sempre visiveis) */
.mzn{display:flex;align-items:stretch;gap:4px;padding:4px 6px;border-top:1px solid var(--line)}
.mzn-tabs{flex:1 1 auto;min-width:0;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.mzn-tabs::-webkit-scrollbar{display:none}
.mzn-end{flex:none;display:flex;gap:6px;padding-left:6px;border-left:1px solid var(--line)}
body[data-hand="left"] .mzn-end{flex-direction:row-reverse;padding-left:0;padding-right:6px;border-left:0;border-right:1px solid var(--line)}
.mzn-end button{min-height:50px;border-radius:12px;font:inherit;font-weight:700;padding:0 10px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:calc(13px*var(--mzfs,1));line-height:1.05;white-space:nowrap}
.mzn-end button.ok{background:var(--accent);color:var(--on-acc);border-color:var(--accent);font-size:calc(14px*var(--mzfs,1))}
.mzn-end button.new{border:2px solid var(--accent);color:var(--accent);text-align:center;padding:0 8px}
.mzn-end button.off{opacity:.45}
.mzn-tabs button{flex:1 0 auto;min-width:46px;min-height:50px;border:none;background:transparent;font:inherit;font-size:calc(13px*var(--mzfs,1));color:var(--ink2);display:flex;align-items:center;justify-content:center;gap:6px;border-radius:12px;padding:4px 8px;position:relative}
.mzn-tabs button svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mzn-tabs button span{display:none}
.mzn-tabs button{touch-action:manipulation} /* v465: o navegador nunca troca o 2o toque rapido por zoom (iPad e telefone deitado, acima de 640 px: sem body[data-phone] nem a regra de botao do shell.css); os dois cliques chegam ao trilho e o duplo toque e' contado no onclick (window-editor.js mzBind) */
.mzn-tabs button[aria-pressed="true"]{color:var(--accent);background:var(--acc2);font-weight:700}
.mzn-tabs button[aria-pressed="true"] span{display:inline;animation:mzb .35s ease-out}
.mzn-tabs button i{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--good)}
.mzf{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-auto-rows:minmax(0,1fr);gap:8px;padding:0 10px;touch-action:none;-webkit-user-select:none;user-select:none;min-height:0;overflow:hidden;align-items:stretch}
.mzf>*{min-height:0;max-height:100%}
.mzf.one{grid-template-columns:1fr}
.mzf .fld{border:2px solid var(--line);border-radius:16px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:calc(14px*var(--mzfs,1));color:var(--muted);position:relative;overflow:hidden;min-height:0;text-align:center;padding:6px}
.mzf .fld b{font-size:calc(var(--mzf-v,26px)*var(--mzfs,1));color:var(--ink);font-family:Archivo,sans-serif;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mzf .fld.on{border-color:var(--accent);background:var(--acc2)}
.mzf .fld.big{font-size:calc(21px*var(--mzfs,1));color:var(--ink);font-weight:600}
/* v393: as setas sao botoes (passam o valor); o toque no valor confirma e avanca */
.mzf .fld .arrows{position:absolute;right:6px;top:6px;bottom:6px;display:flex;flex-direction:column;justify-content:space-between;gap:4px}
.mzf .fld .arrows button{border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit;font-size:calc(14px*var(--mzfs,1));color:var(--mzk,var(--mzt,var(--mzc,var(--ink2))));min-width:36px;min-height:36px;padding:0;line-height:1}
.mzn-end button.pulse{animation:mzpulse .8s ease-out 2}
@keyframes mzpulse{0%{box-shadow:0 0 0 0 rgba(31,95,168,.6)}100%{box-shadow:0 0 0 14px rgba(31,95,168,0)}}
.mzf .fld.on .arrows{color:var(--accent)}
.mzf .fld svg{width:34px;height:34px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mzf .tags{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;justify-content:center;padding:8px;overflow:auto} /* v398: flex-start — com center, a lista maior que a caixa comecava acima da borda e o topo nunca aparecia (Rafael) */
.mzf .tags button{min-height:48px;min-width:56px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:#fff;font:inherit;font-size:calc(17px*var(--mzfs,1))}
.mzf .tags button[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:var(--accent)}
/* v548: a nota da linha com a barra de formato (tn-tpl-editor; a barra e a paleta estao no job-screen.css) — ocupa o campo inteiro, como o textarea */
.mzf .mz-notes{width:100%;height:100%;min-height:0}
.mzf .tn-ed{height:100%;display:flex;flex-direction:column;border-width:2px;border-radius:16px}
.mzf .tn-area,.mzf .tn-area:focus{flex:1;min-height:0;overflow:auto;padding:12px;font-size:calc(16px*var(--mzfs,1));touch-action:auto;-webkit-user-select:text;user-select:text}
.mzf textarea,.mzf input[type=text]{width:100%;height:100%;min-height:100px;border:2px solid var(--line);border-radius:16px;padding:12px;font:inherit;font-size:calc(16px*var(--mzfs,1))!important;resize:none;touch-action:auto;-webkit-user-select:text;user-select:text}
.mzf .pics{display:flex;flex-wrap:wrap;gap:6px;padding:8px;align-content:flex-start;overflow:auto;justify-content:center}
.mzf .pics img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.mzf .pics .none{color:var(--muted);align-self:center;width:100%;text-align:center}
.mzh b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:calc(15px*var(--mzfs,1))}
.mzpick .mzlh{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.mzpick .mzlh h4{margin:0}
.mzpick .mzlh button{min-height:44px;border:none;background:var(--accent);color:var(--on-acc);border-radius:12px;font:inherit;font-size:15px;font-weight:700;padding:0 18px}
.mzpick .lk{margin:10px 0}
.mzpick .lk>small{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.mzpick .lk>small b{color:var(--ink);text-transform:none;letter-spacing:0}
.mzpick .opts4{display:flex;flex-wrap:wrap;gap:6px}
.mzpick .opts4 button{min-height:40px;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit;font-size:14px;padding:0 12px;color:var(--ink)}
.mzpick .opts4 button[aria-pressed="true"]{border-color:var(--accent);background:var(--acc2);color:var(--accent);font-weight:700}
.mzpick .sws{display:flex;flex-wrap:wrap;gap:6px}
.mzpick .lkprev{display:flex;justify-content:center;padding:6px 0 0}
.mzpick .lkprev svg{max-width:150px;height:auto}
/* v315: o painel do layout na folha do ◑ (K1-K8). Alvos de 44 px; sem arrasto. */
.mzpick .sheet.lay{max-height:88dvh;overflow:auto}
.mzpick .vista{display:grid;grid-template-columns:minmax(0,1fr) 44px 64px 44px;gap:4px;align-items:center;margin:4px 0}
.mzpick .vista span{font-size:14px} .mzpick .vista b{text-align:center;font-size:14px}
.mzpick .vista button{min-height:44px;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit;font-size:17px;color:var(--ink2)}
.mzpick .vista button[disabled]{opacity:.3}
.mzf .az{display:flex;flex-direction:column;gap:4px;overflow:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch;padding:4px}
.mzf .az button{min-height:44px;flex:none;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit;font-size:calc(16px*var(--mzfs,1));text-align:left;padding:6px 12px}
.mzf .az button[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:var(--accent)}
.mzf .az small{color:var(--muted);text-align:center;padding:2px 0;font-size:calc(11px*var(--mzfs,1));text-transform:uppercase;letter-spacing:.05em;position:sticky;top:0;background:var(--paper)}
.mzf .tags.std button{min-width:64px}
.mzf .tags button small{display:block;font-size:calc(10px*var(--mzfs,1));color:inherit;opacity:.7}
.mzf .typein{display:flex;flex-direction:column;gap:8px;padding:6px}
.mzf .typein label{font-size:calc(13px*var(--mzfs,1));color:var(--muted)}
.mzf .typein input{width:100%;font-size:calc(18px*var(--mzfs,1))!important}
.mzf .typein .mzfr{justify-content:flex-start}
.mzn-tabs button::after{content:"";position:absolute;left:50%;bottom:3px;width:4px;height:4px;border-radius:50%;background:transparent;transform:translateX(-50%)}
.mzn-tabs button[data-pickst]:not([data-pickst="wheel"])::after{background:var(--accent)}
#mzloupe .ml{position:absolute;left:0;top:0;transform-origin:0 0}
#mzloupe .cross{position:absolute;left:50%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%);border:2px solid var(--good);border-radius:50%;box-shadow:0 0 0 2px #fff}
#mzlist{margin:0 0 14px;border:1px solid var(--line);border-radius:14px;padding:10px;background:var(--panel,#fff)}
#mzlist h3{margin:0 0 8px;font-size:14px;display:flex;justify-content:space-between;align-items:baseline}
#mzlist h3 small{color:var(--muted);font-weight:400}
#mzlist button{display:grid;grid-template-columns:32px auto 1fr auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;width:100%;min-height:56px;border:1px solid var(--line);border-radius:12px;background:#fff;font:inherit;font-size:15px;color:var(--ink);text-align:left;padding:6px 10px;margin:0 0 6px}
#mzlist button .no{grid-row:1/3;width:28px;height:28px;border-radius:50%;color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
#mzlist button b{font-size:16px}
#mzlist button .rm{color:var(--ink2);text-align:right}
#mzlist button small{grid-column:2/5;color:var(--muted);font-size:12px}
/* v395 — temper por caixilho, um campo so (a coluna inteira da grade): None · All · um botao por caixilho em cima; a soma e o OK no pe */
.mzf .fld.mztemp{justify-content:flex-start;padding:6px 4px 4px} .mzf .fld.mztemp .tags{padding:4px;gap:6px;flex:1;min-height:0;align-content:flex-start}
.mzf .fld.mztemp .mztfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:2px 4px 0;box-sizing:border-box}
.mzf .fld.mztemp .mztok{border:2px solid var(--mzc,var(--accent));background:var(--mzt,var(--mzc,var(--accent)));color:#fff;border-radius:10px;font:inherit;font-weight:700;font-size:calc(14px*var(--mzfs,1));padding:6px 16px;min-height:36px;flex:none}
.mzf .fld.mztemp .tags button{min-height:34px;min-width:44px;padding:0 10px;font-size:calc(12.5px*var(--mzfs,1));border-radius:10px}
.mzf .fld.mztemp .mztsum{font-size:calc(11px*var(--mzfs,1));color:var(--mzk,var(--mzt,var(--mzc,var(--ink))));font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body[data-mz] .mzdraw [data-sash]{cursor:pointer}
/* v397 — a faixa "nao cabe" (K7 da v314), os prontos e os blocos da folha do ◑ (K1/K2 da v315), o Done no pe quando o trilho sobe */
.mzfit{flex:none;margin:0 10px;background:#fde3e3;border:1px solid #f0a3a3;color:#7a2020;border-radius:8px;padding:4px 10px;font-size:calc(12px*var(--mzfs,1));font-weight:600;text-align:center;line-height:1.3}
.mzpick .warnbox{font-size:13px;border:1px solid #f0a3a3;background:#fde3e3;border-radius:10px;padding:8px 12px;color:#7a2020;margin:0 0 10px} .mzpick .warnbox b{color:#5c1616}
.mzpick .opts4 button.zerar{border-color:var(--bad);color:var(--bad)}
.mzpick .blks{display:flex;flex-direction:column;gap:4px}
.mzpick .blk{display:grid;grid-template-columns:minmax(0,1fr) 44px 44px 44px 50px 44px 44px;gap:2px;align-items:center;border:1px solid var(--line);border-radius:10px;background:#fff;padding:2px 4px 2px 10px}
.mzpick .blk.off{opacity:.5;background:var(--soft)}
.mzpick .blk .nm{font-size:14px;font-weight:600;min-width:0;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.mzpick .blk .nm i{font-size:9px;font-style:normal;font-weight:700;color:#fff;background:var(--warn);border-radius:999px;padding:1px 6px;width:max-content;text-transform:uppercase;letter-spacing:.04em}
.mzpick .blk button{min-height:44px;min-width:44px;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit;font-size:15px;color:var(--ink2);padding:0} .mzpick .blk button[disabled]{opacity:.3} .mzpick .blk b{text-align:center;font-size:13px}
.mzpick .lk .nota{display:block;color:var(--muted);font-size:12px;margin-top:6px}
.mzn.mzn-mid{border-bottom:1px solid var(--line)} /* v736: o trilho no meio (entre o desenho e o campo) separa os dois com linha em cima e embaixo */
/* v398 — em size com o estilo tags, width e height lado a lado numa vista so, uma coluna quase transparente no meio (Rafael) */
.mzf .fld.sizes{flex-direction:row;align-items:stretch;justify-content:stretch;padding:0;gap:0}
.mzf .fld.sizes .col{flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:stretch}
.mzf .fld.sizes .col>small{text-align:center;padding:4px 0 2px;flex:none}
.mzf .fld.sizes .col>b{text-align:center;font-size:calc(22px*var(--mzfs,1));color:var(--ink);font-family:Archivo,sans-serif;padding:8px 0}
.mzf .fld.sizes .col .tags{flex:1 1 0;min-height:0;overflow:auto;padding:2px 4px 6px;gap:5px;justify-content:center;touch-action:pan-y}
.mzf .fld.sizes .col .tags button{width:100%;min-width:0;min-height:38px;padding:0 6px;font-size:calc(15px*var(--mzfs,1))}
.mzf .fld.sizes .sep{flex:none;width:1px;margin:10px 0;background:var(--line);opacity:.5}
/* v400 (M1): tres ou quatro colunas (perna, top) — botoes e letra menores para caber */
.mzf .fld.sizes.c3 .col .tags{padding:2px 2px 6px;gap:4px} .mzf .fld.sizes.c3 .col .tags button{padding:0 3px;font-size:calc(13.5px*var(--mzfs,1))}
.mzf .fld.sizes.c4 .col .tags{padding:2px 1px 6px;gap:4px} .mzf .fld.sizes.c4 .col .tags button{padding:0 2px;font-size:calc(12px*var(--mzfs,1))} .mzf .fld.sizes.c4 .col>small{font-size:calc(10px*var(--mzfs,1))}
.mzf .fld.sizes.c3 .col>b,.mzf .fld.sizes.c4 .col>b{font-size:calc(17px*var(--mzfs,1))}
/* v403 — T1-T3: o titulo do campo (listas tags, A–Z e as colunas de Size) vira uma faixa na cor do campo, fixa no topo; na roda, o rotulo ganha a cor e o peso */
.mzf .fld .mzft{position:sticky;top:0;z-index:2;align-self:stretch;display:block;margin:-6px -6px 4px;padding:5px 8px 5px 10px;background:var(--mzs,#eef2f7);border-left:4px solid var(--mzc,var(--accent));color:var(--mzt,var(--mzc,var(--ink)));font-size:calc(13px*var(--mzfs,1));font-weight:800;text-transform:uppercase;letter-spacing:.05em;text-align:left;line-height:1.2}
.mzf .fld.sizes .col>.mzft{margin:0;padding:5px 6px;text-align:center;font-size:calc(12px*var(--mzfs,1))} .mzf .fld.sizes.c4 .col>.mzft{font-size:calc(10.5px*var(--mzfs,1));padding:5px 2px;letter-spacing:.02em}
.mzf .az>.mzft{margin:0 0 4px;background:var(--mzs,#eef2f7)}
/* v518: Qty > 1 — juntas ou separadas no mapa, embaixo dos numeros (o mesmo campo: rola junto com eles) */
.mzf .mzapart{flex:none;align-self:stretch;margin:6px 4px 4px;padding-top:8px;border-top:1px solid var(--line)}
.mzf .mzapart>small{display:block;margin:0 0 6px;text-align:center;color:var(--muted);font-size:calc(11px*var(--mzfs,1));font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.mzf .mzapart-b{display:flex;gap:6px}
.mzf .mzapart-b button{flex:1 1 0;min-height:44px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:inherit;font-size:calc(14px*var(--mzfs,1));font-weight:700}
.mzf .mzapart-b button[aria-pressed="true"]{background:var(--mzt,var(--mzc,var(--accent)));border-color:var(--mzt,var(--mzc,var(--accent)));color:#fff}
.mzf[data-mzt] .fld>small:not(.mzft){color:var(--mzk,var(--mzt,var(--mzc,var(--ink2))));font-weight:800;font-size:calc(12px*var(--mzfs,1));text-transform:uppercase;letter-spacing:.05em}
/* v403 — J1-J4: o par desenho + etiquetas. A linha das medidas na largura toda; a janela na coluna da esquerda (60 %); as etiquetas empilhadas a direita (40 %), uma por linha. O .mz2d some como caixa (display:contents) para os filhos dele entrarem na grade do cartao. */
.mzdraw.pair{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);grid-template-rows:auto minmax(0,1fr) auto;column-gap:8px;row-gap:2px;align-items:center;justify-items:stretch}
.mzdraw.pair .mz2d{display:contents}
.mzdraw.pair .mzsize{grid-area:1/1;justify-self:center;padding:2px 0} .mzdraw.pair .mzvw.mzsp{top:auto;bottom:6px} /* v409: com a medida centrada na janela, o ⟳ still (lado 3-D) desce para o canto de baixo — em cima ele cobria a largura */ /* v409 (Rafael): width × height centrado na janela (a coluna do desenho), nao no cartao */
.mzdraw.pair .mzsvg{grid-area:2/1;align-self:stretch;justify-self:stretch;min-width:0;min-height:0} .mzdraw.pair .mzsvg svg{max-width:100%;max-height:100%} /* a caixa ocupa a celula: com align center ela ficava 0 x 0 (o max-height:100% do svg contra uma altura de conteudo) */
.mzdraw.pair>canvas{grid-area:2/1;justify-self:center}
.mzdraw.pair .mzdim.l,.mzdraw.pair>.mzdim{grid-area:3/1;justify-self:center}
.mzdraw.pair .mztags{grid-area:2/2/4/3;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;justify-content:center;margin:0;gap:4px;min-width:0;overflow:hidden;align-self:stretch}
.mzdraw.pair .mztags .tg{max-width:100%}
body[data-hand="left"] .mzdraw.pair .mztags{align-items:flex-start}

/* v411 — o editor de portas: as cores das abas novas, o campo com grupos de etiquetas, as bolinhas de cor, o desenho da porta */
#mz [data-mzt="style"]{--mzc:#8a3b2a;--mzs:#f6e4df;--mzt:#8a3b2a} #mz [data-mzt="glass"]{--mzc:#0e7c86;--mzs:#ddf1f2;--mzt:#0d7781} #mz [data-mzt="swing"]{--mzc:#2f7d32;--mzs:#e3f2e4;--mzt:#2e7b31}
#mz [data-mzt="sides"]{--mzc:#a14d8c;--mzs:#f6e5f1;--mzt:#9e4b89} #mz [data-mzt="transom"]{--mzc:#c0392b;--mzs:#fbe3e1;--mzt:#bc382a} #mz [data-mzt="frame"]{--mzc:#5d6d7e;--mzs:#e8ecef;--mzt:#5b6b7b} #mz [data-mzt="op"]{--mzc:#00838f;--mzs:#dff4f6;--mzt:#007984}
.mzf .fld.mzporta{justify-content:flex-start;align-items:stretch;overflow:auto;touch-action:pan-y;gap:4px;padding:2px 0 8px}
.mzf .fld.mzporta .mzdg{display:flex;flex-direction:column;align-items:stretch;min-height:0;flex:none}
.mzf .fld.mzporta .mzdg .tags{padding:4px 6px}
#mz .mzf .mzsw .sw{width:30px;height:30px;min-height:0;padding:0;border-radius:50%;background:var(--sw);border:1.5px solid var(--line)}
#mz .mzf .mzsw .sw[aria-pressed="true"]{background:var(--sw);outline:3px solid var(--mzc);outline-offset:1px}
.mzf .fld.mzporta .mzdnote{display:block;text-align:center;color:var(--muted);font-size:calc(12px*var(--mzfs,1))}
.mzdraw .mzporta-d{display:flex;justify-content:center;align-items:center;width:100%;height:100%} .mzdraw .mzporta-d svg{max-width:100%;max-height:100%;height:auto}
/* v412 — o filtro kind e a cor personalizada da porta */
#mz [data-mzt="kind"]{--mzc:#37474f;--mzs:#e6eaed;--mzt:#37474f}
#mz .mzf .fld.mzporta .mzdcor{width:56px;height:32px;padding:0;border:1.5px solid var(--line);border-radius:8px;background:none}
/* v413 (Rafael, testando no iPhone): nada encostado nas bordas — as etiquetas ao lado da janela quebram a linha em vez de cortar com …; a faixa de
   titulo dos campos (WIDTH / HEIGHT / TYPE…) fica 4 px para dentro e com os cantos redondos, para o canto do campo nao comer a ponta colorida; as colunas
   do size com folga dos lados; o cabecalho e a barra de baixo com 14 px nas laterais — os cantos da tela do iPhone sao redondos e cortavam o primeiro e o
   ultimo botao. */
#mz .mzdraw.pair .mztags .tg{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25;padding:1px 6px;border-radius:10px;overflow-wrap:anywhere}
/* v741 — o cartao baixo (mzTagsFit): as etiquetas nao cabem uma por linha → em linhas que quebram, as duas colunas meio a meio e a medida grande na
   largura toda (em cima das duas); tight=2 = a letra um pouco menor. Nenhuma etiqueta fica cortada */
#mz .mzdraw.pair[data-tight]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#mz .mzdraw.pair[data-tight] .mzsize{grid-area:1/1/2/3}
#mz .mzdraw.pair[data-tight] .mztags{flex-direction:row;flex-wrap:wrap;align-content:center;align-items:center;justify-content:flex-start;column-gap:4px;row-gap:3px}
#mz .mzdraw.pair[data-tight="2"] .mztags .tg{font-size:calc(10px*var(--mzfs,1));padding:0 5px;line-height:1.3}
.mzf .fld .mzft{margin:-2px -2px 4px;border-radius:11px 11px 6px 6px}
.mzf .fld.sizes{padding:4px 6px 4px 4px}
.mzf .fld.sizes .col>.mzft{border-radius:10px 10px 4px 4px}
.mzf .fld.sizes .col .tags{padding-right:6px}
.mzf .az>.mzft{border-radius:8px}
.mzh{padding-left:14px;padding-right:14px}
.mzn{padding-left:14px;padding-right:14px}
/* v414 — o size em ⅛″ steps (S2 fracoes, S3 inteiros + a regua), S1 os botoes ⅛ / standard maiores, S4 os titulos das colunas */
.mzf .guide .mzseg,.mzf .scrub .mzseg{flex-direction:column;align-self:stretch;margin:8px 10px 0;border-radius:12px}
.mzf .guide .mzseg button,.mzf .scrub .mzseg button{min-height:44px;font-size:calc(14px*var(--mzfs,1));padding:6px 10px}
.mzf .guide .mzseg button+button,.mzf .scrub .mzseg button+button{border-top:1px solid var(--line)}
.mzf .fld.sizes .col>.mzft{border-left:none;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 4px 5px;border-radius:10px 10px 4px 4px;box-shadow:inset 0 -2px 0 var(--mzc)}
.mzf .fld.sizes .col>.mzft b{font-family:Archivo,sans-serif;font-size:calc(15px*var(--mzfs,1));font-weight:800;letter-spacing:0;text-transform:none;line-height:1.1}
.mzf .fld.sizes .col.oit{gap:4px}
.mzf .fld.sizes .col.oit .oitf{flex:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(26px,1fr));gap:3px;padding:2px 3px;overflow:visible;touch-action:pan-y}
.mzf .fld.sizes .col.oit .oiti{flex:1 1 0;min-height:0;display:flex;gap:3px;padding-right:2px}
.mzf .fld.sizes .col.oit .oitn{flex:1 1 auto;min-width:0;min-height:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(28px,1fr));align-content:start;gap:3px;padding:2px 2px 6px 3px;overflow:auto;touch-action:none;overscroll-behavior:contain;scrollbar-width:none}
.mzf .fld.sizes .col.oit .oitn::-webkit-scrollbar{display:none}
.mzf .fld.sizes .col.oit .oitf button,.mzf .fld.sizes .col.oit .oitn button{min-height:34px;min-width:0;padding:0 1px}
.mzf .fld.sizes .col.oit .oitr{flex:none;width:22px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:3px 0;border-radius:10px;background:var(--mzs);color:var(--mzt,var(--mzc));font-size:8.5px;font-weight:800;touch-action:none;user-select:none;-webkit-user-select:none;cursor:ns-resize}
.mzf .fld.sizes .col.oit .oitr i{font-style:normal;line-height:1}
/* v416 — os campos da patio: as cores das abas novas e a bolinha de cor nas etiquetas */
#mz [data-mzt="series"]{--mzc:#6a1b9a;--mzs:#f1e6f7;--mzt:#6a1b9a} #mz [data-mzt="color"]{--mzc:#ad1457;--mzs:#fbe4ee;--mzt:#ad1457} #mz [data-mzt="hardware"]{--mzc:#455a64;--mzs:#e6ebee;--mzt:#455a64}
#mz .mzf .fld.mzporta .mzpt i{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--sw);border:1px solid var(--line);margin-right:6px;vertical-align:-1px}
/* v418 — a etiqueta de cor: o nome na propria cor (a letra clara ou escura pelo fundo); marcada = o contorno na cor do campo */
#mz .mzf .tags button.cortag{background:var(--sw);color:var(--swt);border:1.5px solid rgba(0,0,0,.18);font-weight:600}
#mz .mzf .tags button.cortag[aria-pressed="true"]{background:var(--sw);color:var(--swt);outline:3px solid var(--mzc);outline-offset:1px;font-weight:800}
/* v571 — a janela sem troca no editor do telefone (js/job/keep.js): a aba replace (a chave New window | Keep it e as fichas), a etiqueta do topo e o aviso
   das abas grids / temper. As cores pelos tokens; o #fff segue o padrao das outras fichas do editor (o tema escuro as troca). */
#mz .mztags .tg.keep{display:inline-flex;align-items:center;gap:4px;background:#fff;border:1.5px solid var(--ink);color:var(--ink)}
#mz .kp-ic{width:16px;height:16px;flex:none}
#mz .mztags .tg.keep .kp-not{color:var(--bad);font-weight:800} /* o caractere, nao um svg: o .mzdraw svg forca width:auto !important */
#mz [data-mzt="replace"]{--mzc:#1c2430;--mzs:#eceef2;--mzt:#1c2430} /* a cor da aba replace (o trilho e a ficha apertada) */
#mz .kp-no{color:var(--bad)}
.mzf .mzkeep{display:flex;flex-direction:column;gap:10px;justify-content:flex-start;padding:10px;overflow:auto}
.mzkseg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mzkseg button{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:72px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font:inherit;font-weight:700;font-size:calc(15px*var(--mzfs,1));color:var(--ink);padding:8px}
.mzkseg button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.mzkseg button[aria-pressed="true"] .kp-no{color:#ff8a80}
.mzkseg button i{font-style:normal;font-weight:500;font-size:calc(12px*var(--mzfs,1));opacity:.8}
.mzf .mzkworks{padding:0;justify-content:flex-start}
.mzf .mzkworks button{display:inline-flex;align-items:center;gap:6px}
.mzf .mzkworks button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.mzkworks .kp-mat{font:700 9px/1 Archivo,sans-serif;font-style:normal;letter-spacing:.06em;text-transform:uppercase;background:#e4f2e9;color:#1a6b3c;border-radius:4px;padding:3px 4px}
.mzknote{font:inherit;font-size:calc(16px*var(--mzfs,1));border:1px solid var(--line);border-radius:10px;padding:10px;background:#fff;color:var(--ink)}
.mzf .mzknot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;color:var(--muted)}
.mzf .mzknot b{color:var(--ink);font-size:calc(18px*var(--mzfs,1))}
/* v806 (contraste dos temas, T3 + T6; esboco aprovado 04/11 "Aprovo, D1-D3 em a"): o editor de janela nos 4 escuros — o desenho, os campos, a nota e as
   setas no painel do tema (eram #fff com o texto claro do tema: 1,0:1 no HUD e no Holo). O que e' da aba (o pastel do campo ligado, o guia, a aba e as etiquetas)
   continua o pastel com o texto --mzt. O texto colorido sobre o painel usa --mzk: a cor da aba misturada meio a meio com branco (6:1 ou mais). */
body:is([data-theme="dark"],[data-theme="hud"],[data-theme="holo"],[data-theme="sketchdark"]) .mzdraw{background:var(--panel)} body:is([data-theme="dark"],[data-theme="hud"],[data-theme="holo"],[data-theme="sketchdark"]) .mzf .fld{background:var(--panel)} body:is([data-theme="dark"],[data-theme="hud"],[data-theme="holo"],[data-theme="sketchdark"]) .mzknote{background:var(--panel)}
body:is([data-theme="dark"],[data-theme="hud"],[data-theme="holo"],[data-theme="sketchdark"]) :is(.mzdraw,#mz [data-mzt]){--mzk:color-mix(in srgb,var(--mzc) 50%,#fff)}
body:is([data-theme="dark"],[data-theme="hud"],[data-theme="holo"],[data-theme="sketchdark"]) .mzf[data-mzt] .fld.on:not(#jv-x){--mzk:var(--mzt,var(--mzc))}
body:is([data-theme="dark"],[data-theme="hud"],[data-theme="holo"],[data-theme="sketchdark"]) .mzf .guide{background:var(--mzs,var(--panel))} body:is([data-theme="dark"],[data-theme="hud"],[data-theme="holo"],[data-theme="sketchdark"]) .mzf .scrub{background:var(--mzs,var(--panel))}
body:is([data-theme="dark"],[data-theme="hud"],[data-theme="holo"],[data-theme="sketchdark"]) .mzf .guide :is(small,.hint){color:var(--mzt,var(--mzc,var(--ink2)))}
body:is([data-theme="dark"],[data-theme="hud"],[data-theme="holo"],[data-theme="sketchdark"]) .mzf .fld .mzft{background:var(--mzs,var(--soft))} body:is([data-theme="dark"],[data-theme="hud"],[data-theme="holo"],[data-theme="sketchdark"]) .mzf .fld .mzft b{color:var(--mzt,var(--mzc,var(--ink)))}
body:is([data-theme="dark"],[data-theme="hud"],[data-theme="holo"],[data-theme="sketchdark"]) .mzf .guide .mzseg button:not([aria-pressed="true"]):not(#sheetload):not(#jv-x){background:transparent;color:var(--mzt,var(--mzc,var(--ink)))}
body:is([data-theme="dark"],[data-theme="hud"],[data-theme="holo"],[data-theme="sketchdark"]) .mzf[data-mzt] .guide .mzseg button[aria-pressed="true"]:not(#sheetload):not(#jv-x){background:var(--mzt,var(--mzc));color:#fff}