/* Moldura Eu voto 13 (brasilcomlula.com/moldura/): a foto é desenhada no próprio aparelho, nada é enviado.
   Mesmas cores e fonte do site: vermelho #ae1313 e #d91c1c, amarelo #facc15, preto #0b0b0b, branco, Archivo. */
:root { --verm: #d91c1c; --verm-esc: #ae1313; --amar: #facc15; --preto: #0b0b0b; --branco: #fff; }
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--verm-esc); }
body { min-height: 100vh; font-family: Archivo, system-ui, sans-serif; color: var(--branco); background: radial-gradient(120% 60% at 50% 0%, var(--verm) 0%, var(--verm-esc) 72%) var(--verm-esc); }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--amar); outline-offset: 3px; }
svg { display: block; flex: none; }

/* topo igual ao das páginas de caso */
.c-topo { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; background: var(--verm-esc); box-shadow: 0 1px 0 rgb(0 0 0 / .2); }
.c-marca { display: inline-flex; align-items: center; min-height: 44px; font-weight: 900; font-size: 1.05rem; color: var(--branco); }
.c-apoiar { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: 999px; font-weight: 900; font-size: .9rem; background: var(--amar); color: var(--verm-esc); white-space: nowrap; }

.m-main { max-width: 1080px; margin: 0 auto; padding: 22px 16px 36px; }
.m-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }

.m-chapeu { display: inline-block; padding: .32rem .65rem; border-radius: .3rem; font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; background: var(--amar); color: var(--verm-esc); }
h1 { margin-top: 12px; font-weight: 900; font-size: clamp(2.3rem, 10.5vw, 3.7rem); line-height: .96; letter-spacing: -.03em; }
h1 span { display: block; color: var(--amar); }
.m-sub { margin-top: 12px; max-width: 34ch; font-size: 1.05rem; line-height: 1.45; font-weight: 500; color: rgb(255 255 255 / .9); }

fieldset { min-width: 0; border: 0; }
.m-rotulo { display: block; float: left; width: 100%; margin-bottom: 8px; font-size: .78rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: rgb(255 255 255 / .85); }
.m-rotulo + * { clear: both; }

/* formato: dois botões lado a lado */
.m-segmento { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 16px; background: rgb(0 0 0 / .28); }
.m-opcao, .m-mold { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.m-opcao input, .m-mold input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.m-opcao span { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 6px 10px; border-radius: 12px; font-weight: 800; text-align: center; line-height: 1.1; transition: background-color .15s ease, color .15s ease; }
.m-opcao input:checked + span { background: var(--branco); color: var(--verm-esc); }
.m-opcao input:focus-visible + span, .m-mold input:focus-visible + .m-mold-caixa { outline: 3px solid var(--amar); outline-offset: 2px; }
.m-icone { display: block; flex: none; border: 2.5px solid currentColor; }
.m-icone-perfil { width: 17px; height: 17px; border-radius: 50%; }
.m-icone-story { width: 12px; height: 19px; border-radius: 3px; }

/* prévia */
.m-palco { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.m-quadro { position: relative; width: 300px; height: 300px; max-width: 100%; border-radius: 14px; overflow: hidden; background: #262626; box-shadow: 0 0 0 1px rgb(255 255 255 / .2), 0 26px 50px -24px rgb(0 0 0 / .75); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.m-quadro canvas { display: block; width: 100%; height: 100%; }
.m-quadro.com-foto canvas { touch-action: none; cursor: grab; }
.m-quadro.arrastando canvas { cursor: grabbing; }
.m-quadro canvas:focus-visible { outline: 3px solid var(--amar); outline-offset: -3px; }
.m-vazio { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--branco); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.m-vazio-pilula { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: 999px; font-weight: 900; font-size: 1.05rem; background: rgb(11 11 11 / .82); box-shadow: 0 0 0 2px var(--amar); transition: transform .15s ease; }
.m-vazio-pilula svg { width: 22px; height: 22px; color: var(--amar); }
.m-vazio:hover .m-vazio-pilula { transform: scale(1.04); }
.m-dica { min-height: 1.35em; font-size: .92rem; font-weight: 600; line-height: 1.35; text-align: center; color: rgb(255 255 255 / .88); }
.m-sonda { position: absolute; top: 0; left: 0; width: 0; height: 72vh; height: 72svh; visibility: hidden; pointer-events: none; }
.m-palco.soltando .m-quadro { box-shadow: 0 0 0 4px var(--amar), 0 26px 50px -24px rgb(0 0 0 / .75); }

/* zoom */
.m-zoom-linha { display: flex; align-items: center; gap: 12px; }
.m-redondo { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgb(0 0 0 / .28); color: var(--branco); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.m-redondo svg { width: 22px; height: 22px; }
.m-redondo:active { background: rgb(0 0 0 / .45); }
input[type="range"] { --p: 0%; flex: 1; min-width: 0; height: 46px; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(to right, var(--amar) var(--p), rgb(255 255 255 / .32) var(--p)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border: 3px solid var(--branco); border-radius: 50%; background: var(--amar); box-shadow: 0 2px 8px rgb(0 0 0 / .35); }
input[type="range"]::-moz-range-track { height: 8px; border-radius: 99px; background: rgb(255 255 255 / .32); }
input[type="range"]::-moz-range-progress { height: 8px; border-radius: 99px; background: var(--amar); }
input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border: 3px solid var(--branco); border-radius: 50%; background: var(--amar); }
input[type="range"]:focus-visible { outline: 3px solid var(--amar); outline-offset: 2px; border-radius: 10px; }

/* molduras */
.m-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.m-mold-caixa { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; padding: 10px 6px; border: 2px solid transparent; border-radius: 14px; background: rgb(0 0 0 / .22); transition: border-color .15s ease, background-color .15s ease; }
.m-mini { display: block; width: auto; height: 96px; max-width: 100%; border-radius: 8px; background: #262626; }
.m-mold-nome { font-size: .84rem; font-weight: 800; line-height: 1.15; text-align: center; }
.m-mold input:checked + .m-mold-caixa { border-color: var(--amar); background: rgb(0 0 0 / .42); }
.m-mold input:checked + .m-mold-caixa .m-mold-nome { color: var(--amar); }

/* ações */
.m-acoes { position: relative; }
.m-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m-botoes .m-cheio, .m-botoes.so-baixar #baixar { grid-column: 1 / -1; }
.m-escondido { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.m-botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 18px; border: 0; border-radius: 999px; font: inherit; font-size: 1.08rem; font-weight: 900; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform .12s ease, opacity .12s ease; }
.m-botao svg { width: 22px; height: 22px; }
.m-botao:active { transform: scale(.97); }
.m-botao[aria-busy="true"] { opacity: .7; cursor: progress; }
.m-botao-amarelo { background: var(--amar); color: var(--preto); box-shadow: 0 10px 24px -14px rgb(0 0 0 / .8); }
.m-botao-branco { background: var(--branco); color: var(--verm-esc); box-shadow: 0 10px 24px -14px rgb(0 0 0 / .8); }
.m-link { min-height: 44px; border: 0; background: none; font: inherit; font-weight: 800; color: var(--branco); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; touch-action: manipulation; }
.m-status { font-weight: 800; line-height: 1.4; text-align: center; }
.m-status:not(:empty) { margin-top: 12px; }
.m-status.erro { color: var(--amar); }
.m-dica-ios { margin-top: 12px; font-size: .9rem; line-height: 1.4; text-align: center; color: rgb(255 255 255 / .88); }

.m-privado { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px; font-size: .95rem; line-height: 1.45; background: rgb(0 0 0 / .24); }
.m-privado svg { width: 22px; height: 22px; margin-top: 1px; color: var(--amar); }
.m-privado strong { font-weight: 900; }

/* imagem pronta, pra navegador de aplicativo (Instagram, Facebook) que não baixa arquivo */
.m-folha { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgb(11 11 11 / .92); }
.m-folha-caixa { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 440px; max-height: 100%; }
.m-folha-titulo { font-weight: 900; font-size: 1.1rem; text-align: center; }
.m-folha img { display: block; max-width: 100%; max-height: 66vh; border-radius: 10px; -webkit-touch-callout: default; }
.m-folha .m-botao { min-width: 160px; }

.c-rodape { padding: 22px 18px 40px; text-align: center; font-size: .8rem; line-height: 1.45; color: rgb(255 255 255 / .78); }
.c-rodape-foto { margin-top: 6px; font-weight: 800; color: var(--branco); }

/* computador: prévia à esquerda, controles à direita */
@media (min-width: 880px) {
  .m-main { padding: 40px 24px 56px; }
  .m-grade { grid-template-columns: minmax(0, 560px) minmax(320px, 400px); justify-content: center; align-items: start; column-gap: 56px; row-gap: 22px; }
  .m-grade > * { grid-column: 2; }
  .m-grade > .m-palco { grid-column: 1; grid-row: 1 / span 7; position: -webkit-sticky; position: sticky; top: 84px; }
}