:root{
  /* Valores padrão — sobrescritos em runtime pelo core.js com as cores do candidato */
  --cor-primaria:#0b2a4a;
  --cor-secundaria:#1f5a94;
  --cor-destaque:#f4b400;

  --branco:#ffffff;
  --cinza-100:#f4f6f8;
  --cinza-300:#dbe1e8;
  --cinza-600:#5c6b7a;
  --sombra: 0 10px 30px rgba(11,42,74,0.15);
  --radius: 18px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: linear-gradient(180deg, var(--cor-primaria) 0%, var(--cor-secundaria) 260px, var(--cinza-100) 260px);
  color: var(--cor-primaria);
  min-height:100vh;
}

.container{ max-width: 620px; margin: 0 auto; padding: 0 20px 60px; }

/* HEADER */
header{ text-align:center; padding: 28px 0 20px; color:#fff; }
header .badge-topo{
  width: 96px; height: 96px; margin: 0 auto 14px;
  border-radius: 50%; background: var(--cor-destaque);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  border: 4px solid #fff; overflow:hidden;
}
header .badge-topo img{ width:100%; height:100%; object-fit: cover; }
header h1{ font-size: 1.5rem; margin: 0 0 4px; letter-spacing: 0.3px; }
header p.sub{ margin:0; font-size: 0.95rem; color: #d9e6f2; }

/* CARD PRINCIPAL */
.card{
  background: var(--branco); border-radius: var(--radius);
  box-shadow: var(--sombra); padding: 20px; margin-top: -10px;
  position: relative; z-index: 2;
}

.upload-zone{
  border: 2px dashed var(--cinza-300); border-radius: 14px;
  padding: 30px 16px; text-align:center; cursor:pointer;
  transition: border-color .2s, background .2s; color: var(--cinza-600);
}
.upload-zone:hover{ border-color: var(--cor-secundaria); background: var(--cinza-100); }
.upload-zone svg{ width:40px;height:40px; margin-bottom:8px; opacity:.6;}
.upload-zone strong{ color: var(--cor-primaria); }
#inputFoto{ display:none; }

/* EDITOR */
.editor-wrap{ display:none; }
.editor-wrap.ativo{ display:block; }

.canvas-stage{
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  background: repeating-conic-gradient(#eef1f4 0% 25%, #e4e8ec 0% 50%) 50% / 20px 20px;
  border-radius: 14px; overflow: hidden; touch-action: none; margin-top: 14px;
}
.canvas-stage canvas{ position:absolute; top:0; left:0; width:100%; height:100%; }
#canvasFinal{ cursor: grab; }
#canvasFinal:active{ cursor: grabbing; }

#stampHandle{
  position:absolute; border: 2px dashed var(--cor-destaque);
  cursor: grab; touch-action:none;
}
#stampHandle:active{ cursor: grabbing; }
#stampHandle .resize-dot{
  position:absolute; width:22px; height:22px; right:-11px; bottom:-11px;
  background: var(--cor-destaque); border: 3px solid #fff; border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3); cursor: nwse-resize; touch-action:none;
}

.controles{ display:flex; align-items:center; gap:12px; margin-top: 16px; }
.controles label{ font-size:0.85rem; color: var(--cinza-600); white-space:nowrap; }
.controles input[type=range]{ flex:1; accent-color: var(--cor-secundaria); }

.dica-enquadrar{ text-align:center; font-size: 0.78rem; color: var(--cinza-600); margin: 6px 0 0; }

.btn-trocar{
  display:block; margin: 12px auto 0; background:none; border:none;
  color: var(--cor-secundaria); font-size:0.85rem; text-decoration:underline; cursor:pointer;
}

.acoes{ display:flex; gap:12px; margin-top: 20px; }
.btn{
  flex:1; padding: 14px 10px; border-radius: 12px; border:none;
  font-size: 0.95rem; font-weight:600; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition: transform .1s, filter .15s;
}
.btn:active{ transform: scale(0.97); }
.btn-salvar{ background: var(--cor-secundaria); color:#fff; }
.btn-salvar:hover{ filter: brightness(1.08); }
.btn-compartilhar{ background: var(--cor-destaque); color: var(--cor-primaria); }
.btn-compartilhar:hover{ filter: brightness(1.05); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* MENSAGEM CTA */
.mensagem{ text-align:center; padding: 30px 10px 6px; }
.mensagem h2{ font-size: 1.15rem; color: var(--cor-primaria); margin: 0 0 6px; }
.mensagem p{ color: var(--cinza-600); font-size: 0.92rem; margin:0; }

/* EXEMPLOS */
.exemplos{ margin-top: 30px; }
.exemplos h3{ text-align:center; font-size: 1rem; color: var(--cor-secundaria); margin-bottom: 14px; }
.exemplos-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.exemplo-item{ border-radius: 12px; overflow:hidden; aspect-ratio: 1/1; box-shadow: 0 4px 12px rgba(11,42,74,0.12); background: var(--cinza-100); }
.exemplo-item canvas{ width:100%; height:100%; display:block; }

footer{ text-align:center; color: var(--cinza-600); font-size: 0.78rem; margin-top: 34px; }

.toast{
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  background: var(--cor-primaria); color:#fff; padding: 12px 20px; border-radius: 10px;
  font-size: 0.88rem; opacity:0; pointer-events:none; transition: opacity .25s, transform .25s; z-index: 50;
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

.erro-candidato{
  min-height: 100vh; display:flex; align-items:center; justify-content:center;
  text-align:center; padding: 30px; color: var(--cor-primaria);
}