:root {
  --bg: #f6f4f0; --card: #ffffff; --linha: #e4e0d8; --texto: #24211d; --suave: #6f685e;
  --acento: #2f5d8a; --acento-2: #e7eef6; --ok: #2e7d4f; --ok-bg: #e5f3ea; --alerta: #b5651d; --alerta-bg: #fbefe2;
  --erro: #b3261e; --erro-bg: #fbe9e7; --raio: 10px; --sombra: 0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.05);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--texto);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); font-size: 15px; line-height: 1.45; }
a { color: var(--acento); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: 1.45rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; }
button, .btn { font: inherit; border: 1px solid var(--linha); background: var(--card); color: var(--texto); padding: .5em .9em; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: .4em; text-decoration: none; white-space: nowrap; }
button:hover, .btn:hover { border-color: #cfc8bc; background: #fbfaf8; }
button.primario, .btn.primario { background: var(--acento); border-color: var(--acento); color: #fff; }
button.primario:hover { filter: brightness(1.07); }
button.perigo { color: var(--erro); }
button.pequeno { padding: .25em .6em; font-size: .85rem; }
button:disabled { opacity: .55; cursor: default; }
input, select, textarea { font: inherit; padding: .5em .65em; border: 1px solid var(--linha); border-radius: 8px; background: #fff; color: var(--texto); width: 100%; }
input[type=checkbox], input[type=radio] { width: auto; }
input[type=color] { padding: 2px; height: 2.2em; }
textarea { min-height: 5em; resize: vertical; }
label { display: block; font-size: .85rem; color: var(--suave); margin-bottom: .25em; }
.campo { margin-bottom: .85em; }
.linha { display: flex; gap: .75em; align-items: flex-end; flex-wrap: wrap; }
.linha > .campo { flex: 1 1 140px; }
.card { background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.1em 1.2em; box-shadow: var(--sombra); }
.etiqueta { display: inline-block; font-size: .75rem; padding: .1em .55em; border-radius: 999px; background: var(--acento-2); color: var(--acento); font-weight: 600; }
.etiqueta.ok { background: var(--ok-bg); color: var(--ok); }
.etiqueta.alerta { background: var(--alerta-bg); color: var(--alerta); }
.etiqueta.erro { background: var(--erro-bg); color: var(--erro); }
.etiqueta.neutra { background: #eeebe5; color: var(--suave); }
.suave { color: var(--suave); }
.aviso { padding: .7em .9em; border-radius: 8px; background: var(--alerta-bg); color: #6e3d10; margin: .6em 0; font-size: .92rem; }
.aviso.ok { background: var(--ok-bg); color: #1c4d30; }
.aviso.erro { background: var(--erro-bg); color: #7a1a14; }
.oculto { display: none !important; }

/* recortador */
.recorte-fundo { position: fixed; inset: 0; background: rgba(20,18,15,.94); z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; gap: 14px; }
.recorte-area { position: relative; width: min(88vw, 420px); background: #000; touch-action: none; overflow: hidden; border-radius: 6px; cursor: grab; }
.recorte-area canvas { display: block; width: 100%; height: 100%; }
.recorte-controles { display: flex; gap: 10px; align-items: center; width: min(88vw, 420px); color: #fff; }
.recorte-controles input[type=range] { flex: 1; }
.recorte-dica { color: #ddd; font-size: .85rem; text-align: center; }

/* toast */
#toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: #2b2823; color: #fff; padding: .65em 1.1em; border-radius: 8px; z-index: 2000; box-shadow: var(--sombra); max-width: 92vw; }
#toast.erro { background: var(--erro); }
label.check, .check { display: inline-flex; gap: .45em; align-items: center; color: var(--texto); font-size: .92rem; cursor: pointer; margin: 0 1em .4em 0; }
.logo-acutis { font-weight: 800; font-size: 1.9rem; letter-spacing: -.01em; line-height: 1.1; }
.logo-acutis::after { content: ""; display: inline-block; width: .32em; height: .32em; margin-left: .12em; border-radius: 50%; background: var(--acento); vertical-align: .05em; }