/* js/tools/photo-mark/photo-mark.css — o editor de foto marcada (v381, esboco F4): por cima da tela (z acima do visualizador), a barra de cima
   (✕ Cancel · o titulo · Done), o palco escuro com a foto (o canvas de baixo = foto + borroes; o canvas da lupa; o SVG de cima = as marcas), o campo
   do valor, as 9 ferramentas (quebram linha, sem rolar: 2 linhas no telefone, 1 no PC), as cores e as espessuras, Undo e Clear; a folha do More, as
   alcas, a barra flutuante e a pilula da lupa. O zoom vai por variaveis CSS no .pm-wrap; a cor de cada amostra vem do data-pm-color (nada de style=).
   Tokens do style/tokens.css (--accent, --ink).
   v478 (conserto apos a verificacao): a barra flutuante numa fileira (uma espessura so, data-pm-fw); a cor das alcas aqui (antes no ui.js). */
.pm-editor{position:fixed;inset:0;z-index:140;background:#111;color:#fff;display:flex;flex-direction:column;font-family:Archivo,sans-serif;user-select:none;-webkit-user-select:none}
.pm-bar{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#1c1c1c;flex:0 0 auto}
.pm-title{flex:1;text-align:center;font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-cancel,.pm-done{border:0;border-radius:8px;padding:8px 12px;font:700 13px Archivo,sans-serif;cursor:pointer;touch-action:manipulation}
.pm-cancel{background:#333;color:#fff} .pm-done{background:var(--accent);color:var(--on-acc)}
.pm-stage{flex:1;min-height:0;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none;background:#000}
.pm-wrap{position:relative;width:100%;transform:translate(var(--pm-x,0px),var(--pm-y,0px)) scale(var(--pm-zoom,1));transform-origin:0 0}
.pm-base{display:block;width:100%;height:auto}
.pm-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pm-lens{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} /* v478 Z: o conteudo das lupas, entre a foto e as marcas */
.pm-shp{cursor:move} .pm-handles .pm-h{cursor:pointer;fill:#fff;stroke:var(--accent)} .pm-handles .pm-hrot{fill:var(--accent);stroke:#fff} .pm-selbox{fill:none;stroke:#fff} .pm-stem{stroke:#fff} .pm-softbox{fill:none;stroke:#fff;opacity:.8;pointer-events:none} /* v478 V1: a caixa de leve da marca recem-desenhada */
.pm-value{display:flex;align-items:center;gap:8px;padding:6px 10px;background:#1c1c1c;font-size:12px;color:#ccc;flex:0 0 auto} .pm-value[hidden]{display:none}
.pm-value input{flex:1;min-width:0;height:34px;padding:0 10px;border:1px solid #444;border-radius:8px;background:#222;color:#fff;font:600 16px Archivo,sans-serif}
.pm-tools{display:flex;flex-wrap:wrap;gap:4px;padding:8px 8px 4px;flex:0 0 auto} /* v478: 9 ferramentas — no telefone quebram em 2 linhas (o esboco; cabe ate com "Double arrow" no More), no PC uma */
.pm-tools .pm-tl{padding:6px;gap:3px;font-size:11.5px} @media (max-width:379px){ .pm-tools{gap:3px} .pm-tools .pm-tl{padding:6px 5px} }
@media (max-width:339px){ .pm-tools{gap:2px;padding:6px 4px 4px} .pm-tools .pm-tl{padding:6px 3px;gap:2px;font-size:11px} .pm-tools .pm-g{font-size:13px} } /* v478 V2: o 320 tambem em 2 linhas */ .pm-tools .pm-tl[aria-expanded="true"]{border-color:var(--accent)}
.pm-tl{flex:0 0 auto;border:1px solid #444;background:#222;color:#fff;border-radius:8px;padding:7px 10px;font:600 12px Archivo,sans-serif;display:inline-flex;gap:6px;align-items:center;cursor:pointer;touch-action:manipulation}
.pm-tl[aria-pressed="true"]{background:var(--accent);border-color:var(--accent)}
.pm-g{font-size:15px;line-height:1}
.pm-style{display:flex;align-items:center;gap:6px;padding:4px 10px 10px;flex:0 0 auto;flex-wrap:wrap}
.pm-colors,.pm-widths{display:flex;gap:6px;align-items:center} .pm-esp{flex:1}
.pm-sw{width:26px;height:26px;border-radius:7px;border:2px solid #111;box-shadow:0 0 0 1px #555;cursor:pointer;padding:0;touch-action:manipulation} .pm-sw[aria-pressed="true"]{box-shadow:0 0 0 2px #fff}
.pm-sw[data-pm-color="#ee7d21"]{background:#ee7d21} .pm-sw[data-pm-color="#a32b28"]{background:#a32b28} .pm-sw[data-pm-color="#186b3f"]{background:#186b3f} .pm-sw[data-pm-color="#245c8f"]{background:#245c8f} .pm-sw[data-pm-color="#ffffff"]{background:#fff} .pm-sw[data-pm-color="#141a21"]{background:#141a21}
.pm-w{width:30px;height:26px;border:1px solid #444;border-radius:7px;background:#222;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;touch-action:manipulation} .pm-w[aria-pressed="true"]{background:var(--accent);border-color:var(--accent)}
/* v478 S3: a barra flutuante da marca selecionada e Z3: a pilula da lupa — no palco, posicionadas por --pm-fx/--pm-fy; alvos de 36 px */
.pm-fbar,.pm-zpill{position:absolute;left:0;top:0;z-index:3;transform:translate(var(--pm-fx,0px),var(--pm-fy,0px));background:rgba(24,28,35,.95);box-shadow:0 4px 14px rgba(0,0,0,.45)}
.pm-fbar{display:flex;flex-wrap:wrap;gap:4px;align-items:center;max-width:calc(100% - 8px);padding:5px;border-radius:12px;box-sizing:border-box} .pm-fbar[hidden],.pm-zpill[hidden]{display:none}
.pm-frow{display:flex;flex-wrap:wrap;gap:4px;align-items:center} .pm-frow[hidden]{display:none}
.pm-fbar .pm-sw,.pm-fbar .pm-w{width:36px;height:36px}
/* v478 (2o conserto, V2): abaixo de 375 px a fileira de 9 alvos de 36 px nao cabia com 4 px de vao (366 px > 352 no 360) — o vao cai para 2 px (350 px; os
   alvos continuam 36). Abaixo de 340 (o 320, 312 px de barra) nove alvos de 36 nao cabem numa fileira: ali o alvo fica 34 de largura (44 de altura) sem vao,
   e a barra continua numa fileira (o texto em 2) em vez de 2 (o texto em 4, quase metade do palco) */
@media (max-width:374px){ .pm-fbar,.pm-fbar .pm-frow{gap:2px} .pm-fbar .pm-fb{padding:0 6px} }
@media (max-width:339px){ .pm-fbar{padding:2px} .pm-fbar,.pm-fbar .pm-frow{gap:0} .pm-fbar .pm-sw,.pm-fbar .pm-w{width:34px} .pm-fbar .pm-fb{min-width:34px;padding:0 4px} .pm-fbar .pm-fb[data-pm-st]{font-size:12px} }
.pm-fb{min-width:36px;height:36px;border:1px solid #444;border-radius:8px;background:#222;color:#fff;padding:0 8px;font:600 13px Archivo,sans-serif;cursor:pointer;touch-action:manipulation} .pm-fb[aria-pressed="true"]{background:var(--accent);border-color:var(--accent)}
.pm-fb[data-pm-fs="0"]{font-size:11px} .pm-fb[data-pm-fs="1"]{font-size:15px} .pm-fb[data-pm-fs="2"]{font-size:20px} .pm-fbold{font-weight:900}
.pm-zpill{display:flex;align-items:center;gap:4px;padding:3px;border-radius:21px} .pm-zpill .pm-fb{border-radius:18px;font-size:18px}
.pm-zval{min-width:40px;text-align:center;font:700 14px Archivo,sans-serif}
/* v478 M1: a folha "More shapes" embaixo de tudo (o palco encolhe) */
.pm-sheet{flex:0 0 auto;background:#f7f7f5;color:#141a21;padding:10px 12px 12px;border-top:3px solid var(--accent)} .pm-sheet[hidden]{display:none}
.pm-sheet-t{font-weight:700;font-size:13px;margin-bottom:6px}
.pm-sheet-g{display:flex;flex-wrap:wrap;gap:6px}
.pm-sheet .pm-tl{min-height:36px;background:#fff;color:#141a21;border:1.5px solid #d1d5db} .pm-sheet .pm-tl[aria-pressed="true"]{background:var(--accent);color:var(--on-acc);border-color:var(--accent)}
.pm-wdot{display:block;border-radius:50%;background:#fff} .pm-w[data-pm-width="3"] .pm-wdot,.pm-w[data-pm-fw="3"] .pm-wdot{width:6px;height:6px} .pm-w[data-pm-width="5"] .pm-wdot,.pm-w[data-pm-fw="5"] .pm-wdot{width:10px;height:10px} .pm-w[data-pm-width="8"] .pm-wdot,.pm-w[data-pm-fw="8"] .pm-wdot{width:15px;height:15px}