/* css/polaroid.css  (o card, a janela da foto, a legenda, alças) */
.pol{position:relative;background:var(--cardBg,#fff);flex:none;box-sizing:border-box;
  padding:var(--frameTop,var(--frame)) var(--frame) 0 var(--frame);border-radius:var(--radius);box-shadow:var(--polShadow,none)}
.pol.sel{outline:2px solid var(--brand)!important;outline-offset:3px}
.pol .marks{position:absolute;inset:0;pointer-events:none;overflow:visible}
.win{position:relative;width:100%;aspect-ratio:var(--winAspect);overflow:hidden;background:#ececec;cursor:grab;touch-action:none}
.win.drag{cursor:grabbing}
.win img{position:absolute;left:50%;top:50%;width:100%;height:100%;object-fit:cover;
  transform:translate(-50%,-50%);user-select:none;-webkit-user-drag:none}
.win .vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 38%,rgba(0,0,0,1) 100%)}
.win--missing{background:var(--surface-2,#ececec)}
.win-missing{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:8%;color:var(--muted,#6d6a62);text-align:center}
.win-missing svg{width:26%;height:26%;max-width:34px;max-height:34px;flex:none}
.win-missing span{font-size:.72em;line-height:1.3}
/* legenda: faixa vazia no card; o texto é um <svg> da caneta do núcleo por cima (js/design.js) */
.cap{height:var(--caption);box-sizing:border-box}
.pol-txt{position:absolute;inset:0;pointer-events:none;z-index:1}
.pol-txt svg,.pg-under svg,.pg-over svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.win{z-index:0}
.pg-under,.pg-over{position:absolute;inset:0;pointer-events:none}
.pg-under{z-index:0}
.page>.grid{position:relative;z-index:1}
.pg-over{z-index:2}
.pol.sel{outline:0!important}
body.ce-editing .pol:hover .handle,body.ce-editing .pol:hover .dpi{opacity:0}
/* ferramentas da foto na barra da folha */
.ps-ptools{display:flex;flex-direction:column;gap:8px;padding:2px 0 4px}
.ps-rng{display:grid;grid-template-columns:1fr auto;gap:0 8px;align-items:center;margin:0;font-size:12.5px;color:var(--muted)}
.ps-rng span{grid-column:1/-1}
.ps-rng output{font:600 12px/1 var(--ui);color:var(--ink);min-width:44px;text-align:right;font-variant-numeric:tabular-nums}
.ps-btns{display:flex;flex-wrap:wrap;gap:6px}
.ps-btns button{flex:1;min-height:34px;padding:0 8px;font-size:12.5px}
.ps-filters{display:flex;flex-wrap:wrap;gap:5px}
.ps-filters .chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.cap-fx{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:6px}
.handle{position:absolute;left:5px;top:5px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  border-radius:6px;background:rgba(255,255,255,.94);border:1px solid var(--line);color:#666;cursor:grab;opacity:0;transition:opacity .12s;z-index:3;box-shadow:var(--sh-1)}
.handle svg{width:13px;height:13px}
.pol:hover .handle{opacity:1}
.pol .dpi{position:absolute;right:5px;top:5px;font:600 9px/1 var(--ui);padding:3px 6px;border-radius:99px;color:#fff;opacity:0;transition:opacity .12s;z-index:3}
.pol:hover .dpi{opacity:1}
.pol .dpi.ok{background:var(--ok)} .pol .dpi.warn{background:var(--warn)} .pol .dpi.bad{background:var(--danger)}
.pol.dragover{outline:2px dashed var(--brand)!important;outline-offset:4px}

/* telas iniciais: ver .ep-start em vendor/core/shell.css */
.ra-actions{display:flex;flex-direction:column;gap:9px}

/* templates: cartões com miniatura gráfica da grade resultante */
.tpl-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:11px;margin:0;text-align:left}
.tpl-card{display:flex;flex-direction:column;gap:6px;padding:8px 8px 10px;text-align:left;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);
  box-shadow:var(--sh-1);transition:border-color .15s,box-shadow .15s}
.tpl-card:hover{border-color:var(--brand);box-shadow:var(--sh-2)}
.tpl-card:focus-visible{outline:2px solid var(--brand-ring);outline-offset:2px}
.tpl-card.on{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-ring)}
.tpl-card__thumb{display:block;border-radius:var(--r-sm);overflow:hidden;box-shadow:0 1px 3px rgba(35,39,44,.14)}
.tpl-card__thumb svg{display:block;width:100%;height:auto}
.tpl-card__name{font-size:12px;font-weight:700;color:var(--ink);font-family:var(--ui);line-height:1.25}
.tpl-card__desc{font-size:10.5px;color:var(--muted);line-height:1.3}
#layoutRow .chip.on{background:var(--brand);border-color:var(--brand);color:#fff}

/* guia passo a passo (montar do zero) */
#ob_templates .wiz-start{display:block;margin:16px auto 0;background:none;border:0;color:var(--brand);
  font:700 12.5px/1 var(--ui);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px}
#ob_templates .wiz-start:hover{color:var(--brand-deep)}
#ob_wizard .wiz-head{display:flex;align-items:flex-start;gap:10px;text-align:left;margin:6px 0 16px}
#ob_wizard .wiz-back{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink)}
#ob_wizard .wiz-back:hover{border-color:var(--brand)}
#ob_wizard .wiz-back svg{width:16px;height:16px}
.wiz-step{display:block;font:700 10.5px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--brand);margin-bottom:4px}
#ob_wizTitle{margin:0 0 2px;font-family:var(--display);font-weight:500;font-size:19px;color:var(--ink)}
#ob_wizDesc{margin:0;font-size:12.5px;color:var(--muted)}
.tpl-list--format{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.tpl-list--format .tpl-card__thumb{display:flex;align-items:flex-end;justify-content:center;min-height:110px;background:var(--paper)}
.tpl-list--format .tpl-card__thumb svg{width:auto;height:100%;max-height:120px}
body.dropping #stage::after{content:"Solte as fotos aqui";position:absolute;inset:18px;border:2.5px dashed var(--brand);
  border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;color:var(--brand);font:600 18px var(--display);
  background:var(--brand-soft);pointer-events:none;z-index:6}

#zenExit{position:fixed;top:14px;right:14px;z-index:40;box-shadow:var(--sh-pop)}

#s_thumb{width:100%;height:130px;object-fit:contain;background:var(--line-2);border-radius:var(--r-sm);margin-bottom:10px;border:1px solid var(--line)}
#rightEmpty{color:var(--muted);font-size:12px;line-height:1.7}
#rightEmpty b{color:var(--ink)}
.dpibar{display:flex;align-items:center;gap:8px;font-size:11.5px;margin-bottom:12px;color:var(--muted)}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)} .dot.bad{background:var(--danger)}