:root{
  --brand:#1d4ed8;
  --brand-600:#2563eb;
  --brand-100:#e0e7ff;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  display:flex;                 /* empurra o footer p/ o fim */
  flex-direction:column;
  min-height:100vh;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  background:#f7f9fc;
  color:#0f172a;
  line-height:1.45;
}
a{color:var(--brand-600);text-decoration:none}
a:hover{opacity:.9}

/* Navbar / cards / botões */
.navbar{background:linear-gradient(90deg,var(--brand),var(--brand-600));}
.navbar .navbar-brand,.navbar .nav-link,.navbar a{color:#fff !important}
.card{border:0;box-shadow:0 6px 20px rgba(0,0,0,.08);border-radius:16px}
.btn-brand{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
.btn-brand:hover{filter:brightness(.95)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.badge-brand{background:var(--brand-100);color:var(--brand-600)}
.form-control:focus{border-color:var(--brand-600);box-shadow:0 0 0 .2rem rgba(37,99,235,.25)}
.form-range{accent-color:var(--brand-600)}

/* ===== Palco do editor com réguas/viewport ===== */
.editor-stage{
  position:relative;
  padding-left:28px;     /* espaço régua vertical */
  padding-top:28px;      /* espaço régua horizontal */
  background:#f8fafc;
  border:1px dashed #cbd5e1;
  border-radius:12px;
}

/* Réguas */
.ruler.horizontal{
  position:absolute;left:28px;top:0;right:0;height:28px;
  background:#eef2ff;border-bottom:1px solid #c7d2fe;
  border-top-left-radius:12px;border-top-right-radius:12px;
}
.ruler.vertical{
  position:absolute;top:28px;left:0;bottom:0;width:28px;
  background:#eef2ff;border-right:1px solid #c7d2fe;
  border-top-left-radius:12px;border-bottom-left-radius:12px;
}
#rulerH,#rulerV{width:100%;height:100%;display:block}

/* ==== PREVIEW COM TRANSPARÊNCIA (xadrez visual, não grava) ==== */
.stage-viewport{
  position:relative;
  overflow:auto;
  max-height:70vh;
  min-height:320px;
  border-radius:12px;
  background:
    conic-gradient(#eee 25%, #fff 0 50%, #eee 0 75%, #fff 0) 0 0/16px 16px;
}

/* Canvas principal SEM FUNDO */
.stage-viewport canvas#canvas{
  display:block;
  background:transparent !important;  /* garante fundo transparente */
  border:1px dashed #cbd5e1;
  border-radius:12px;
  margin:12px;
  max-width:100%;
}

/* Overlay SEM FUNDO (cursor/guia/pincel) */
.stage-viewport canvas#overlay{
  position:absolute;
  left:12px; top:12px;               /* alinha com a margin do canvas */
  pointer-events:auto;
  background:transparent !important;
  border:0;
}

/* Z-index correto: overlay acima do canvas */
.stage-viewport > #canvas{ position:relative; z-index:1; }
.stage-viewport > #overlay{ z-index:2; }

/* Infos pequenas abaixo do preview */
.small.text-muted{color:#64748b !important}

/* Inputs pequenos do X/Y da marca d’água */
#wmx,#wmy{font-variant-numeric:tabular-nums}

/* ===== Footer ===== */
footer{
  background:linear-gradient(90deg,var(--brand-600),var(--brand));
  color:#fff;
  padding:24px 0;
  margin-top:48px;
  flex-shrink:0;
}
footer .container-footer{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-block:18px;
}
footer .brand{font-weight:600;letter-spacing:.2px}
footer .small-quiet{color:rgba(255,255,255,.9)}
footer .links{display:flex;gap:18px;flex-wrap:wrap}
footer .links a{color:#fff;text-decoration:none;font-weight:500;opacity:.95}
footer .links a:hover, footer .links a:focus{opacity:1;text-decoration:underline}

/* Layout base: empurra o footer pro fim */
main.container{flex:1 0 auto}

/* Espaçamento telas grandes */
@media (min-width:992px){
  main.container{padding-top:1rem;padding-bottom:2rem}
}

/* Ajustes responsivos do footer */
@media (max-width:768px){
  footer .container-footer{flex-direction:column;text-align:center}
}

/* Vídeo (prévia do editor de vídeo) */
.preview-card video{
  width:100%;
  height:min(65vh,800px);
  max-height:800px;
  border-radius:12px;
  background:#0b1220;
}

/* Toolbar da prévia */
.preview-actions .btn{min-width:84px}
@media (max-width:576px){
  .preview-actions{gap:.25rem}
  .preview-actions .btn{min-width:auto}
}

/* Multi-trechos (visual) */
.seg-badge{padding:.2rem .45rem;border-radius:999px;background:#0ea5e9;color:#fff;font-size:.75rem}
.seg-badge.gray{background:#64748b}
.seg-mini{font-variant-numeric:tabular-nums;font-size:.9rem}

/* FAB de ajuda (exemplo) */
.help-fab{
  position:fixed; right:1rem; bottom:1rem;
  width:3rem; height:3rem; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; line-height:1; z-index:1055;
}

/* Ícones nos botões */
.btn svg{display:block;width:1rem;height:1rem}

/* Painel do auto-recorte */
#btnBgRemove .bg-icon{filter:grayscale(100%)}
#btnBgRemove:disabled{cursor:progress}