:root{
  --verde-escuro:#222E1B; --verde:#2f3a29; --verde-claro:#485342;
  --dourado:#99815d; --ouro:#B89A6A; --bege:#C0B099; --bege-claro:#EEE4D0;
  --texto:#222; --erro:#b3261e;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{max-width:100%;overflow-x:hidden;overscroll-behavior-y:none}
body{margin:0;font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--texto);background:#faf8f4;line-height:1.5;-webkit-tap-highlight-color:transparent}
img{max-width:100%;height:auto;display:block}
a{color:var(--verde-claro);text-decoration:none}
.header{background:var(--verde);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:14px 24px}
.brand{font-family:Georgia,'Times New Roman',serif;font-size:22px;letter-spacing:.5px;color:#fff}
.brand b{color:var(--ouro)}
.nav a{color:#fff;margin-left:18px;font-size:14px}
.footer{background:var(--verde-escuro);color:#cdd3c6;text-align:center;padding:24px;margin-top:40px;font-size:13px}
.container{max-width:1100px;margin:0 auto;padding:24px}
.btn{cursor:pointer;border:none;border-radius:10px;padding:10px 16px;font-weight:600;background:var(--ouro);color:#1c160c;text-decoration:none;display:inline-block}
.btn.outline{background:transparent;border:1px solid var(--ouro);color:var(--verde)}
.btn.sm{padding:5px 10px;font-size:12px}
.btn.danger{background:transparent;border:1px solid var(--erro);color:var(--erro)}
.card{background:#fff;border:1px solid #e7ddc9;border-radius:14px;padding:18px;margin-bottom:16px}
.title{font-family:Georgia,serif;font-size:26px;color:var(--verde)}
.title b{color:var(--ouro)}
label{display:block;font-size:12px;color:#6b6b6b;margin:10px 0 4px;text-transform:uppercase;letter-spacing:.06em}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid #d9ceb6;border-radius:9px;font:inherit;background:#fff}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#8a8a8a;border-bottom:1px solid #e7ddc9;padding:8px}
td{border-bottom:1px solid #efe7d6;padding:8px;vertical-align:middle}
.muted{color:#8a8a8a;font-size:13px}
.flash{background:#fff7e6;border:1px solid var(--ouro);border-radius:10px;padding:10px;margin:10px 0}
.err{color:var(--erro)}
.center{min-height:60vh;display:flex;align-items:center;justify-content:center}
.inline{display:flex;gap:8px;align-items:end}

/* ====== MOBILE (perfeito, fácil, simples) ====== */
@media (max-width: 720px){
  .container{padding:16px}
  .header{padding:12px 16px}
  .brand{font-size:20px}
  .nav a{margin-left:12px;font-size:13px}
  .title{font-size:22px}

  /* grelhas empilham numa coluna */
  .row, .row3{grid-template-columns:1fr}

  /* botões grandes e fáceis de tocar */
  .btn{padding:13px 16px;font-size:15px;width:100%;text-align:center}
  .btn.sm{width:auto;padding:9px 12px;font-size:13px}
  .inline{flex-direction:column;align-items:stretch}

  /* inputs maiores (não dão zoom no iOS) */
  input,select,textarea{font-size:16px;padding:12px}

  /* tabelas viram cartões: cada linha é um bloco, cada célula com rótulo */
  table, thead, tbody, tr, th, td{display:block}
  thead{display:none}
  tr{border:1px solid #e7ddc9;border-radius:12px;padding:8px;margin-bottom:10px;background:#fff}
  td{border:none;border-bottom:1px solid #f1ead9;padding:8px 6px;display:flex;justify-content:space-between;gap:10px;align-items:center}
  td:last-child{border-bottom:none}
  td[data-label]::before{content:attr(data-label);color:#8a8a8a;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
  /* célula de ações: botões lado a lado e largos */
  td.actions{flex-wrap:wrap;justify-content:flex-start}
  td.actions .btn{flex:1;min-width:120px}
}

/* ====== Cliente: hero + lista de propriedades ====== */
.hero{background:linear-gradient(180deg,var(--bege-claro),#faf8f4);border-bottom:1px solid #ece2cd}
.hero .container{padding-top:28px;padding-bottom:20px}
.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;min-height:120px}
.prop{display:block;background:#fff;border:1px solid #e7ddc9;border-radius:14px;padding:16px;color:inherit}
.prop:active{transform:scale(.99)}
.prop-name{font-family:Georgia,serif;font-size:18px;color:var(--verde)}
.prop-sub{margin-top:4px;font-size:14px}
.skeleton{height:84px;border-radius:14px;background:linear-gradient(90deg,#f0e9da,#f7f1e4,#f0e9da);background-size:200% 100%;animation:sk 1.2s ease-in-out infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

@media (max-width:720px){
  .hero .container{padding-top:20px;padding-bottom:16px}
  .list{grid-template-columns:1fr;gap:12px}
  .prop{padding:14px}
  .prop-name{font-size:17px}
}