.mf-root{display:flex;flex-direction:column;height:100%}
.mf-tabs{display:flex;gap:6px;margin-bottom:10px}
.mf-t{min-height:34px;padding:6px 14px;border:1px solid rgba(var(--acc-rgb),.2);background:var(--card);color:inherit;border-radius:999px;font-size:13px;cursor:pointer}
.mf-t.on{background:var(--acc);color:var(--on-acc);font-weight:700;border-color:var(--acc)}
.mf-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:0 2px 12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.mf-nav{display:flex;align-items:center;gap:6px}
.mf-b{min-width:38px;min-height:38px;background:var(--card);border:1px solid var(--line);color:inherit;border-radius:9px;font-size:15px;cursor:pointer}
.mf-b:disabled{opacity:.35;cursor:default}
.mf-pos{font-size:12px;opacity:.7;min-width:80px;text-align:center}
.mf-data{font-weight:700;color:var(--acc)}
.mf-ger{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.mf-btn{min-height:38px;padding:8px 14px;border-radius:9px;border:1px solid var(--acc);background:var(--acc);color:var(--on-acc);font-weight:700;font-size:13px;cursor:pointer}
.mf-tbtn{min-height:38px;padding:8px 14px;border:1px solid rgba(var(--acc-rgb),.2);background:var(--card);color:inherit;border-radius:9px;font-size:13px;cursor:pointer}
.mf-tbtn:hover{border-color:var(--acc)}
.mf-tbtn:disabled{opacity:.4;cursor:default}
.mf-up{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 12px}
.mf-body{overflow:hidden;flex:1;min-height:0}
.mf-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mf-grid.mf-album{height:100%;grid-template-rows:repeat(3,minmax(0,1fr))}
/* álbum 4×3 (desktop) */
.mf-tile{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);cursor:pointer;display:flex;flex-direction:column;min-height:0}
.mf-tile:hover{border-color:var(--acc)}
.mf-thumb{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;font-size:40px;background:var(--visor-bg);overflow:hidden}
.mf-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.mf-thumb.rot90 img{transform:rotate(90deg)}.mf-thumb.rot180 img{transform:rotate(180deg)}.mf-thumb.rot270 img{transform:rotate(270deg)}
.mf-cap{flex:none;padding:5px 9px;font-size:12px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-moremenu{position:relative}
.mf-menu{position:absolute;top:44px;right:0;z-index:20;display:flex;flex-direction:column;gap:6px;padding:8px;background:var(--panel);border:1px solid rgba(var(--acc-rgb),.28);border-radius:10px;min-width:190px;box-shadow:0 8px 24px rgba(var(--shade-rgb),.5)}
.mf-menu[hidden]{display:none}
/* menu da VAGA (quadro vazio): fixed no body porque .mf-body/.mf-tile são
   overflow:hidden — um popover absoluto dentro do quadro seria cortado na
   última linha/coluna do álbum. Nomes longos de propósito: nomes curtos já
   colidiram entre as cascas mobile/desktop. */
.mf-vagamenu{position:fixed;z-index:9998;display:flex;flex-direction:column;gap:6px;padding:8px;background:var(--panel);border:1px solid rgba(var(--acc-rgb),.28);border-radius:10px;min-width:200px;box-shadow:0 8px 24px rgba(var(--shade-rgb),.5)}
.mf-vagatit{font-size:12px;opacity:.7;padding:0 2px 2px}
.mf-vagabtn{min-height:38px;padding:8px 14px;border:1px solid rgba(var(--acc-rgb),.2);background:var(--card);color:inherit;border-radius:9px;font-size:13px;cursor:pointer;text-align:left}
.mf-vagabtn:hover{border-color:var(--acc)}
/* celular: o MESMO nó vira faixa no rodapé — a diferença é só CSS */
@media (max-width:520px){
  .mf-vagamenu{left:0!important;right:0;top:auto!important;bottom:0;min-width:0;border-radius:14px 14px 0 0;padding:12px}
  .mf-vagabtn{min-height:46px}
}
.mf-badge{font-size:11px;color:var(--acc);border:1px solid rgba(var(--acc-rgb),.3);border-radius:999px;padding:1px 8px}
.mf-tb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.mf-item{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:11px 2px;border-bottom:1px solid var(--line)}
.mf-item .g{flex:1;min-width:180px}
.mf-chip{min-height:34px;padding:6px 12px;border:1px solid rgba(var(--acc-rgb),.22);background:var(--card);color:inherit;border-radius:8px;font-size:12px;cursor:pointer}
.mf-chip.tem{border-color:var(--acc);color:var(--acc);font-weight:700;background:rgba(var(--acc-rgb),.1)}
.mf-env{margin:6px 0 12px;padding:12px;border:1px solid rgba(var(--acc-rgb),.22);border-radius:10px;background:var(--card)}
.mf-env input{width:100%;margin:4px 0;padding:9px 11px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--txt)}
.mf-env label{font-size:13px;display:flex;gap:6px;align-items:center;margin:6px 0}
.mf-lb{position:fixed;inset:0;background:rgba(var(--shade-rgb),.92);display:flex;align-items:center;justify-content:center;z-index:9999;cursor:zoom-out;padding:2vh}
.mf-lbinner{display:flex;flex-direction:column;gap:10px;align-items:center;max-width:96vw;max-height:96vh;cursor:default}
.mf-lbinner img{max-width:96vw;max-height:82vh;object-fit:contain;border-radius:6px;cursor:zoom-out}
/* miolo do visor quando o slot NÃO é imagem (PDF/vídeo/arquivo): ocupa o lugar do
   <img>, e a faixa de baixo continua a MESMA (legenda/copiar/abrir). */
.mf-lbfile{display:flex;flex-direction:column;align-items:center;gap:12px;padding:44px 68px;font-size:72px;color:var(--sobre-veu);border:1px solid rgba(var(--sobre-veu-rgb),.25);border-radius:12px}
.mf-lbfnome{font-size:15px;letter-spacing:.04em}
.mf-lbcap{width:100%;max-width:900px}
.mf-lbrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
.mf-lbtext{color:var(--sobre-veu);font-size:14px}
.mf-lbinput{flex:1;min-width:220px;padding:9px 11px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--txt)}
/* A faixa da legenda flutua SOBRE o véu preto do visor, não sobre a superfície da
   página — então --txt/--card/--mut (que invertem no tema DIA) davam preto no
   preto e a legenda sumia. Dentro do .mf-lb vale o trio --sobre-veu, que não
   inverte. O botão .mf-btn (Salvar) fica fora: ele já tem fundo de acento. */
.mf-lb .muted{color:var(--sobre-veu-mut)}
.mf-lb .mf-chip{background:rgba(var(--sobre-veu-rgb),.14);border-color:rgba(var(--sobre-veu-rgb),.3);color:var(--sobre-veu)}
.mf-lb .mf-badge{color:var(--sobre-veu);border-color:rgba(var(--sobre-veu-rgb),.35)}
/* o Apagar destoa dos outros chips de propósito: --danger-fg INVERTE no tema dia e
   ficaria vinho sobre o véu preto, então vale o vermelho da noite nos dois temas */
.mf-lb .mf-chipdel{color:var(--sobre-veu-perigo);border-color:var(--sobre-veu-perigo)}
.mf-lb .mf-lbinput{background:rgba(var(--sobre-veu-rgb),.1);border-color:rgba(var(--sobre-veu-rgb),.3);color:var(--sobre-veu)}
.mf-edtop{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:12px}
.mf-hnav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:12px}
.mf-hpos{font-size:12px;opacity:.85;min-width:92px;text-align:center;font-weight:700}
.mf-hwhen{font-size:12px;opacity:.85;margin-left:auto}
.mf-hsnap{overflow:auto}
.mf-hrow{padding:6px 0;border-bottom:1px solid var(--line);font-size:14px}
.mf-hgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.mf-htile{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.mf-hthumb{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;font-size:30px;background:var(--visor-bg);overflow:hidden}
.mf-hthumb img{width:100%;height:100%;object-fit:cover;display:block}
.mf-hcap{padding:6px 8px;font-size:12px;display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap}
.mf-litem{border-bottom:1px solid var(--line);padding:10px 2px}
.mf-lhead{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.mf-lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px}
.mf-lthumb{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;font-size:22px;background:var(--visor-bg);border-radius:8px;overflow:hidden}
.mf-lthumb img{width:100%;height:100%;object-fit:cover;display:block}
.mf-selbar{align-items:center}
.mf-tile.mf-selected{outline:3px solid var(--acc);outline-offset:-3px}
.mf-grid.mf-selmode .mf-tile{cursor:pointer}
.mf-grid.mf-reorder{user-select:none}
.mf-grid.mf-reorder .mf-tile{cursor:grab;touch-action:none}
.mf-grid.mf-reorder .mf-thumb img{pointer-events:none}
.mf-tile.mf-empty .mf-thumb{color:rgba(var(--tint-rgb),.3);font-size:22px}
.mf-album .mf-tile.mf-empty{opacity:.5;border-style:dashed;border-color:var(--line)}
.mf-tile.mf-dragging{opacity:.45}
.mf-tile.mf-drop{outline:3px dashed var(--acc);outline-offset:-3px}
.mf-cam{position:fixed;inset:0;background:rgba(var(--shade-rgb),.92);display:flex;align-items:center;justify-content:center;z-index:10000}
.mf-cambox{display:flex;flex-direction:column;gap:12px;align-items:center;max-width:96vw}
.mf-camvid{max-width:92vw;max-height:72vh;border-radius:10px;background:var(--visor-bg)}
.mf-camst{font-size:13px;min-height:16px;text-align:center}
.mf-cambtns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.mf-tile.mf-cmpsel{outline:3px solid var(--warn-fg);outline-offset:-3px}
.mf-cmp{position:fixed;inset:0;background:rgba(var(--shade-rgb),.94);z-index:10001;display:flex;flex-direction:column}
.mf-cmpbar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;color:var(--txt)}
.mf-cmprow{flex:1;display:flex;gap:10px;padding:0 14px 14px;min-height:0}
.mf-cmpcol{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.mf-cmpimg{flex:1;width:100%;object-fit:contain;min-height:0;border-radius:8px;background:var(--visor-bg);color:var(--visor-mut);display:flex;align-items:center;justify-content:center}
img.mf-cmpimg{object-fit:contain}
.mf-cmpcap{color:var(--txt);text-align:center;font-size:14px;min-height:18px}