:root{
  /* ---------- paleta ---------- */
  --primary:#2F6EA5;
  --primary-hover:#255985;
  --secondary:#1F2D3D;
  --accent:#6FA8DC;
  --bg:#F4F7FB;
  --card:#FFFFFF;
  --border:#E5ECF3;
  --line:#EDF2F7;
  --ink:#243447;
  --ink-soft:#6B7B8D;
  --ink-disabled:#9AA8B6;
  --success:#22C55E;
  --danger:#EF4444;
  --warning:#F59E0B;
  --info:#3B82F6;
  --whatsapp:#25D366;

  /* ---------- tokens auxiliares ---------- */
  --radius-container:24px;
  --radius-card:22px;
  --radius-btn:14px;
  --radius-input:14px;
  --shadow-sm:0 4px 18px rgba(15,23,42,.05);
  --shadow-md:0 8px 30px rgba(15,23,42,.06);
  --font-display:'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
[hidden]{ display:none !important; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-display);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; }
button{ font-family:inherit; }
a{ color:var(--primary); text-decoration:none; }
button:focus-visible, input:focus-visible, a:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
h1,h2,h3{ color:var(--secondary); margin:0; }

/* ---------- Faixa no topo ---------- */
.faixa-topo{
  background:var(--secondary);
  color:rgba(255,255,255,.92);
  font-size:14px;
  padding:10px 24px;
  text-align:center;
}
.faixa-topo strong{ font-weight:700; }
.faixa-topo .ponto{
  display:inline-block;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--accent);
  margin-right:10px;
  vertical-align:middle;
}

/* ---------- Navbar ---------- */
.navbar{
  background:var(--card);
  border-bottom:1px solid var(--border);
  padding:16px 24px;
}
.navbar-inner{
  max-width:1280px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.marca{ display:flex; align-items:center; }
.marca-logo{ height:32px; width:auto; display:block; }

/* ---------- Conteúdo ---------- */
main{
  max-width:1280px;
  margin:0 auto;
  padding:48px 24px 32px;
}

.cartao-principal{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-container);
  padding:40px;
  box-shadow:var(--shadow-sm);
}

.cabecalho-pagina{ margin-bottom:32px; }
.titulo{
  font-size:36px;
  font-weight:700;
  letter-spacing:-0.01em;
  color:var(--secondary);
  margin:0 0 12px;
  line-height:1.2;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.tag-plataforma{
  display:inline-flex;
  align-items:center;
  font-size:13px;
  font-weight:700;
  background:#EEF5FB;
  color:var(--primary);
  padding:6px 14px;
  border-radius:999px;
  letter-spacing:.01em;
}
.subtitulo{
  max-width:640px;
  color:var(--ink-soft);
  font-size:16px;
  line-height:1.6;
  margin:0;
}

/* ---------- Barra de busca ---------- */
.barra-controle{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:32px;
  flex-wrap:wrap;
}
.campo-busca{
  flex:1;
  min-width:220px;
  background:var(--card);
  border:1px solid #D6E2EC;
  border-radius:var(--radius-input);
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 18px;
  color:var(--ink-soft);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.campo-busca:hover{ border-color:#C4D5E3; }
.campo-busca.em-foco{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(47,110,165,.12);
}
.campo-busca svg{ color:var(--ink-disabled); flex-shrink:0; }
.campo-busca input{
  border:none;
  outline:none;
  flex:1;
  font:400 15px var(--font-display);
  background:transparent;
  color:var(--ink);
}
.contador{
  font-size:13px;
  font-weight:600;
  color:var(--ink-soft);
  white-space:nowrap;
  background:#EEF5FB;
  padding:9px 16px;
  border-radius:999px;
}

/* ---------- Grade de cores ---------- */
.grade-cores{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
  gap:14px;
}
.sem-resultado{
  text-align:center;
  color:var(--ink-soft);
  padding:40px 0;
  font-size:15px;
}
.cor-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  display:flex;
  align-items:center;
  gap:13px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cor-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:var(--accent);
}
.cor-bolinha{
  width:40px;
  height:40px;
  min-width:40px;
  border-radius:50%;
  border:2px solid rgba(15,23,42,.06);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.55);
  cursor:pointer;
  padding:0;
  transition:transform .2s ease;
}
.cor-bolinha:hover{ transform:scale(1.08); }
.cor-bolinha:active{ transform:scale(.94); }
@keyframes pulsoCopia{
  0%{ box-shadow:inset 0 0 0 3px rgba(255,255,255,.55), 0 0 0 0 rgba(47,110,165,.45); }
  100%{ box-shadow:inset 0 0 0 3px rgba(255,255,255,.55), 0 0 0 9px rgba(47,110,165,0); }
}
.cor-bolinha.copiado{ animation:pulsoCopia .55s ease-out; }

.cor-info{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.cor-nome, .cor-hex{
  background:none;
  border:none;
  text-align:left;
  padding:0;
  cursor:pointer;
  width:fit-content;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cor-nome{ font:600 14.5px var(--font-display); color:var(--ink); }
.cor-hex{ font:600 12px var(--font-mono); color:var(--ink-soft); letter-spacing:.02em; margin-top:2px; }
.cor-nome:hover, .cor-hex:hover{ color:var(--primary); }

/* ---------- Vitrines (espaços de destaque) ---------- */
.koba-vitrines{
  max-width:1280px;
  margin:32px auto 0;
  padding:0 24px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.koba-vitrine{
  border-radius:var(--radius-card);
  overflow:hidden;
  min-height:130px;
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  display:flex;
  align-items:center;
  justify-content:center;
}
.koba-vitrine img{ width:100%; height:100%; object-fit:cover; display:block; }
.koba-vitrine a{ display:block; width:100%; height:100%; }
.koba-vitrine-vazia{
  color:var(--ink-disabled);
  font-size:13px;
  border-style:dashed;
}
@media (max-width:640px){
  .koba-vitrines{ grid-template-columns:1fr; }
}

/* ---------- Rodapé ---------- */
.rodape{
  max-width:1280px;
  margin:0 auto;
  padding:40px 24px 56px;
  text-align:center;
}
.btn-relatar{
  background:var(--whatsapp);
  color:#fff;
  border:none;
  padding:14px 24px;
  height:48px;
  border-radius:var(--radius-btn);
  font:700 15px var(--font-display);
  display:inline-flex;
  align-items:center;
  gap:9px;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-relatar:hover{
  background:#1FB758;
  transform:translateY(-1px);
  box-shadow:var(--shadow-md);
}
.rodape-baixo{
  margin-top:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  font-size:13px;
  color:var(--ink-disabled);
}
.link-admin{
  background:none;
  border:none;
  color:var(--ink-disabled);
  cursor:pointer;
  font-size:13px;
  text-decoration:underline;
  text-underline-offset:3px;
  padding:0;
}
.link-admin:hover{ color:var(--primary); }

/* ---------- Toast ---------- */
.toast{
  position:fixed;
  left:50%;
  bottom:26px;
  transform:translate(-50%, 16px);
  background:var(--secondary);
  color:#fff;
  padding:12px 20px;
  border-radius:var(--radius-btn);
  font:600 14px var(--font-display);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  z-index:500;
  box-shadow:var(--shadow-md);
  max-width:90vw;
  text-align:center;
}
.toast-visivel{ opacity:1; transform:translate(-50%, 0); }

/* ---------- Cartão modal / painel admin ---------- */
.modal-fundo{
  position:fixed; inset:0;
  background:rgba(31,45,61,.5);
  backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  z-index:600;
  padding:20px;
}
.modal-caixa{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  padding:32px;
  max-width:420px;
  width:100%;
  position:relative;
  max-height:88vh;
  overflow-y:auto;
  box-shadow:var(--shadow-md);
}
.modal-fechar{
  position:absolute; top:16px; right:18px;
  border:none; background:none;
  font-size:1.5rem; line-height:1;
  cursor:pointer; color:var(--ink-disabled);
}
.modal-fechar:hover{ color:var(--ink); }
.modal-caixa h2{ margin:0 0 6px; font-size:20px; font-weight:700; }
.modal-desc{ color:var(--ink-soft); font-size:14px; line-height:1.6; margin:0 0 20px; }
#formLogin{ display:flex; flex-direction:column; gap:12px; }
.modal-caixa input[type="text"], .modal-caixa input[type="password"], .modal-caixa input[type="email"]{
  border:1px solid #D6E2EC;
  border-radius:var(--radius-input);
  padding:13px 16px;
  font:400 15px var(--font-display);
  outline:none;
  width:100%;
  color:var(--ink);
  background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.modal-caixa input::placeholder{ color:var(--ink-disabled); }
.modal-caixa input[type="text"]:hover, .modal-caixa input[type="password"]:hover, .modal-caixa input[type="email"]:hover{ border-color:#C4D5E3; }
.modal-caixa input[type="text"]:focus, .modal-caixa input[type="password"]:focus, .modal-caixa input[type="email"]:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(47,110,165,.12);
}
.modal-erro{ color:var(--danger); font-size:13.5px; margin-top:12px; }

.btn-salvar{
  background:var(--primary);
  color:#fff;
  border:none;
  height:48px;
  padding:0 24px;
  border-radius:var(--radius-btn);
  font:700 14.5px var(--font-display);
  cursor:pointer;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-salvar:hover{ background:var(--primary-hover); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.btn-pequeno{ padding:0 16px; white-space:nowrap; height:44px; }

.abas{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:20px; }
.aba-btn{
  background:none; border:none;
  padding:10px 6px;
  font:600 14px var(--font-display);
  color:var(--ink-soft);
  cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color .2s ease;
}
.aba-btn:hover{ color:var(--primary); }
.aba-btn.ativa{ color:var(--primary); border-bottom-color:var(--primary); }

.form-linha{ display:flex; gap:8px; margin-bottom:18px; }
.form-linha input[type="text"]{ flex:1; }
.form-linha input[type="color"]{ width:44px; height:44px; padding:2px; border:1px solid #D6E2EC; border-radius:var(--radius-input); cursor:pointer; }

.lista-admin-cores{ max-height:320px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; margin-bottom:18px; padding-right:4px; }
.linha-admin-cor{ display:flex; align-items:center; gap:8px; }
.mini-bolinha{ width:26px; height:26px; min-width:26px; border-radius:50%; border:2px solid rgba(15,23,42,.06); }
.linha-admin-cor input[type="text"]{ padding:9px 12px; font-size:14px; }
.linha-admin-cor input.input-hex{ width:110px; flex:none; font-family:var(--font-mono); }
.btn-remover{
  background:none;
  border:1px solid var(--border);
  color:var(--danger);
  border-radius:10px;
  padding:8px 12px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:background .2s ease, border-color .2s ease;
}
.btn-remover:hover{ background:#FEF2F2; border-color:#FCA5A5; }

.form-vitrine{ border:1px solid var(--border); border-radius:16px; padding:18px; margin-bottom:14px; }
.form-vitrine h3{ margin:0 0 12px; font-size:15px; }
.modal-caixa label{ display:block; font-size:13.5px; color:var(--ink-soft); font-weight:600; margin-bottom:14px; }
.modal-caixa label input{ margin-top:6px; }
.modal-caixa hr{ border:none; border-top:1px solid var(--line); margin:22px 0; }

.admin-status{ margin-top:16px; padding:11px 16px; border-radius:12px; font-size:14px; font-weight:600; }
.admin-status-ok{ background:#ECFDF3; color:#0F9D58; }
.admin-status-erro{ background:#FEF2F2; color:var(--danger); }

/* ---------- Overlay de bloqueio (DevTools) ---------- */
.overlay-bloqueio{
  position:fixed; inset:0;
  background:var(--secondary);
  color:#fff;
  z-index:9999;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:24px;
}
.overlay-titulo{ font-size:20px; font-weight:700; margin:0 0 8px; }
.overlay-sub{ color:rgba(255,255,255,.6); font-size:14px; margin:0; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
@media (max-width:400px){
    [hidden]{ display:none !important; }

    #overlayBloqueio {
    display: none !important;
}
    
}
@media (max-width:640px){
  main{ padding:24px 16px; }
  .cartao-principal{ padding:24px; border-radius:20px; }
  .titulo{ font-size:28px; }
  .barra-controle{ flex-wrap:wrap; }
  .contador{ order:2; }
  .campo-busca{ order:1; width:100%; }
}