:root{
  --ink:#12150F;
  --ink-soft:#1e231a;
  --paper:#F4F5F1;
  --paper-dim:#E6E8E1;
  --gold:#1E6B45;
  --gold-bright:#278A59;
  --chalk:#8A6D1F;
  --chalk-bright:#B08C2A;
  --measure:#E8B10A;
  --alert:#B03A22;
  --line:rgba(18,21,15,0.15);
  --line-dark:rgba(244,245,241,0.16);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  overflow-x:hidden;
  background:var(--paper-dim);
  color:var(--ink);
  font-family:'Public Sans', sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Archivo', sans-serif;
  text-transform:uppercase;
  letter-spacing:-0.02em;
  font-weight:800;
  line-height:1.04;
}
.mono{font-family:'IBM Plex Mono', monospace;}
a{color:inherit;}

/* App bar shared across logged-in pages */
.appbar{
  background:var(--ink); color:var(--paper); padding:0 24px; height:60px;
  display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:30;
  border-bottom:1px solid var(--line-dark);
}
.appbar .logo{font-family:'Archivo',sans-serif; font-weight:800; font-size:19px; text-transform:uppercase; letter-spacing:-0.01em; text-decoration:none; color:var(--paper);}
.appbar .logo .dot{color:var(--measure);}
.appbar nav{display:flex; gap:4px; background:#161c14; border-radius:6px; padding:4px;}
.appbar nav a{padding:9px 15px; font-size:13px; border-radius:4px; color:rgba(244,245,241,0.65); text-decoration:none; transition:all .15s;}
.appbar nav a:hover{color:var(--paper);}
.appbar nav a.active{background:var(--gold); color:#fff; font-weight:600;}
.appbar .user{display:flex; align-items:center; gap:12px; font-size:13px; color:rgba(244,245,241,0.55);}
.appbar .user button{
  background:transparent; border:1px solid var(--line-dark); color:var(--paper); font-size:12.5px;
  padding:7px 12px; border-radius:4px; cursor:pointer;
}
.appbar .user button:hover{border-color:var(--paper);}

/* Menu hambúrguer — garante acesso a todas as páginas em qualquer tamanho de tela.
   O <nav> nunca fica inacessível: em telas largas aparece na barra, em telas
   estreitas vira um menu suspenso acionado por este botão. */
.hamburger{
  display:none; background:none; border:1px solid var(--line-dark); color:var(--paper);
  font-size:18px; line-height:1; width:38px; height:38px; border-radius:5px; cursor:pointer;
  align-items:center; justify-content:center; flex-shrink:0;
}
@media (max-width:820px){
  .appbar{flex-wrap:wrap; position:relative;}
  .appbar nav{display:none;}
  .hamburger{display:flex;}
  .appbar.menu-open nav{
    display:flex; flex-direction:column; gap:2px;
    position:absolute; top:60px; left:0; right:0; z-index:45;
    background:#161c14; border-bottom:1px solid var(--line-dark);
    padding:8px; box-shadow:0 8px 20px rgba(0,0,0,0.25);
  }
  .appbar.menu-open nav a{padding:13px 14px; border-radius:5px;}
}

.ruler{
  height:22px; background:var(--paper); border-bottom:1px solid var(--line);
  background-image:
    repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(18,21,15,0.35) 0 1px, transparent 1px 8px);
  background-size:100% 13px, 100% 7px;
}
.ruler.dark{
  background-color:var(--ink); border-bottom:1px solid var(--line-dark);
  background-image:
    repeating-linear-gradient(90deg, var(--measure) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(244,245,241,0.3) 0 1px, transparent 1px 8px);
}

.page{max-width:1100px; margin:0 auto; padding:40px 22px 80px;}
.page-narrow{max-width:440px; margin:0 auto; padding:52px 22px 80px;}
.eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--chalk); display:flex; align-items:center; gap:9px; margin-bottom:10px;
}
.eyebrow::before{content:""; width:18px; height:2px; background:var(--chalk); display:inline-block;}

.card{background:#fff; border:1px solid var(--line); border-radius:9px; padding:26px;}
.card + .card{margin-top:18px;}

label.fl{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(18,21,15,0.5); margin-bottom:6px;
}
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], select, textarea{
  width:100%; border:1px solid var(--line); background:var(--paper); padding:11px 12px; border-radius:5px;
  font-size:14.5px; font-family:'Public Sans',sans-serif; outline:none; transition:border-color .15s;
}
input:focus, select:focus, textarea:focus{border-color:var(--gold);}
.field{margin-bottom:16px;}
.frow2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}

.btn{
  background:var(--gold); color:#fff; font-weight:700; font-size:14.5px; padding:13px;
  border:none; border-radius:6px; cursor:pointer; width:100%; transition:background .15s;
}
.btn:hover{background:var(--gold-bright);}
.btn:disabled{background:#9aa89e; cursor:not-allowed;}
.btn-secondary{background:var(--ink); color:var(--paper);}
.btn-ghost{
  background:transparent; border:1px dashed var(--line); color:var(--chalk); font-weight:600; font-size:13px;
  padding:9px; border-radius:6px; cursor:pointer; width:100%;
}
.btn-danger-outline{
  background:transparent; border:1px solid var(--alert); color:var(--alert); font-weight:600; font-size:13px;
  padding:8px 12px; border-radius:5px; cursor:pointer;
}

.msg{border-radius:7px; padding:12px 14px; font-size:13.5px; margin-bottom:16px; display:none;}
.msg.show{display:block;}
.msg.error{background:rgba(176,58,34,0.09); border:1px solid rgba(176,58,34,0.3); color:#8a2c19;}
.msg.success{background:rgba(30,107,69,0.09); border:1px solid rgba(30,107,69,0.3); color:var(--gold);}
.msg.info{background:rgba(138,109,31,0.08); border:1px solid rgba(138,109,31,0.28); color:var(--chalk);}

.spinner{
  display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,0.4);
  border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; vertical-align:-2px; margin-right:6px;
}
@keyframes spin{to{transform:rotate(360deg);}}

.badge{
  display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.05em; padding:3px 8px; border-radius:3px; font-weight:700;
}
.badge.ativo{background:rgba(30,107,69,0.12); color:var(--gold);}
.badge.vendido{background:rgba(138,109,31,0.14); color:var(--chalk);}
.badge.expirado{background:rgba(18,21,15,0.1); color:rgba(18,21,15,0.5);}

.skeleton{background:linear-gradient(90deg, var(--paper-dim) 25%, #ddd6c4 37%, var(--paper-dim) 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:6px;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

footer.site-footer{background:#141210; color:rgba(244,245,241,0.42); padding:26px 0; font-size:13px; text-align:center;}

/* Autocompletar (cidade, acabamento) */
.ac-wrap{position:relative;}
.ac-list{
  display:none; position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:40;
  background:#fff; border:1px solid var(--line); border-radius:6px; overflow:hidden;
  box-shadow:0 8px 20px rgba(18,21,15,0.12); max-height:260px; overflow-y:auto;
}
.ac-list.open{display:block;}
.ac-item{
  padding:10px 12px; font-size:14px; cursor:pointer; display:flex; justify-content:space-between;
  align-items:center; gap:10px; border-bottom:1px solid var(--line);
}
.ac-item:last-child{border-bottom:none;}
.ac-item:hover, .ac-item.ativo{background:var(--paper-dim);}
.ac-item small{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:rgba(18,21,15,0.45); flex-shrink:0;}
input.invalido{border-color:var(--alert); background:rgba(176,58,34,0.04);}

/* Rede de segurança pra telas muito estreitas (celulares antigos, ~320-360px) */
img{max-width:100%;}
@media (max-width:380px){
  .frow2{grid-template-columns:1fr; gap:0;}
  .page-narrow{padding-left:16px; padding-right:16px;}
  .page{padding-left:16px; padding-right:16px;}
}