:root{
  --bg-page:#E6E9E2;
  --phone-bg:#FBFAF7;
  --ink:#1C2621;
  --ink-soft:#4B5751;
  --muted:#7C877F;
  --primary:#0D3B2E;
  --primary-dark:#092C22;
  --primary-tint:#E9F3EF;
  --accent:#F57C00;
  --accent-tint:#FCE7CF;
  --whatsapp:#25D366;
  --whatsapp-dark:#1DA851;
  --card-border:#DEDACD;
  --danger:#C1552F;
  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:9px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  min-height:100vh;
  background:var(--bg-page);
  background-image:
    radial-gradient(circle at 15% 10%, rgba(31,92,79,0.06) 0, transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(228,151,46,0.08) 0, transparent 45%);
  font-family:'Inter',sans-serif;
  color:var(--ink);
}
*{-webkit-font-smoothing:antialiased;}
button{font-family:inherit;}
.hidden{display:none !important;}
:focus-visible{outline:2px solid var(--primary); outline-offset:2px;}

main#app{max-width:480px; margin:0 auto; padding-bottom:40px;}

/* App header / "nameplate" */
.app-header{
  max-width:480px; margin:0 auto;
  padding:18px 20px 16px;
  background:var(--phone-bg);
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:9px;}
.brand-mark{
  width:36px;height:36px; border-radius:10px; overflow:hidden; flex:0 0 auto;
}
.brand-mark img{ width:100%; height:100%; object-fit:contain; display:block; }
.brand-name{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:20px; letter-spacing:-0.01em;}
.brand-tag{font-size:12.5px; color:var(--muted); margin-top:1px;}
.link-btn{background:none; border:none; color:var(--primary-dark); font-weight:600; font-size:13px; text-decoration:underline; cursor:pointer; padding:8px;}

.screen-title-row{
  display:flex; align-items:center; gap:10px;
  padding:14px 20px 12px; max-width:480px; margin:0 auto;
}
.back-btn{
  width:32px;height:32px; border-radius:9px; border:1px solid var(--card-border);
  background:#fff; display:flex;align-items:center;justify-content:center; cursor:pointer; flex:0 0 auto; color:var(--ink);
}
.back-btn:hover{border-color:var(--primary);}
.screen-title{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px;}
.screen-sub{font-size:13px; color:var(--muted); margin-top:1px;}

.scroll-area{max-width:480px; margin:0 auto; padding:8px 20px 24px;}

/* Home */
.eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--accent); font-weight:500; margin:10px 0 4px;
}
.home-heading{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:22px; line-height:1.3; margin:0 0 22px;}
.cat-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.cat-card{
  position:relative; background:#fff; border:1px solid var(--card-border);
  border-radius:var(--radius-md); padding:16px 14px 14px; cursor:pointer;
  text-align:left; transition:transform .12s ease;
}
.cat-card:hover{transform:translateY(-1px); border-color:var(--primary);}
.cat-card::after{
  content:""; position:absolute; left:14px; right:14px; bottom:0; height:3px;
  background:var(--primary); border-radius:3px 3px 0 0; opacity:0.12;
}
.cat-icon{
  width:40px;height:40px; border-radius:11px; background:var(--primary-tint);
  display:flex;align-items:center;justify-content:center; color:var(--primary-dark); margin-bottom:12px;
}
.cat-name{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14.5px; line-height:1.25; margin-bottom:3px;}
.cat-count{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted);}

.home-footer-link{
  text-align:center; font-size:13.5px; color:var(--primary-dark); font-weight:600;
  margin-top:26px; padding:16px; border-top:1px dashed var(--card-border); cursor:pointer;
}
.home-footer-link:hover{color:var(--primary);}

/* Professional list */
.loading, .empty-state{color:var(--ink-soft); padding:20px 4px;}
.empty-sub{font-size:0.92rem;}
.pro-list{display:flex;flex-direction:column;gap:11px;}
.pro-card{
  display:flex; align-items:center; gap:13px; background:#fff; border:1px solid var(--card-border);
  border-radius:var(--radius-md); padding:12px 13px; cursor:pointer; transition:transform .12s ease;
}
.pro-card:hover{border-color:var(--primary);}
.avatar{
  width:46px;height:46px; border-radius:50%; background:var(--primary); color:#fff;
  display:flex;align-items:center;justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px; flex:0 0 auto;
}
.pro-info{flex:1 1 auto; min-width:0;}
.pro-name{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px;}
.pro-meta{font-size:12.5px; color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.chevron{color:var(--muted); flex:0 0 auto;}

/* Professional detail */
.detail-hero{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:10px 8px 24px; border-bottom:1px solid var(--card-border); margin-bottom:18px;
}
.avatar-lg{
  width:80px;height:80px; border-radius:50%; background:var(--primary); color:#fff;
  display:flex;align-items:center;justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:28px; margin-bottom:14px;
}
.detail-name{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:21px;}
.detail-cat{font-size:13px; color:var(--primary-dark); background:var(--primary-tint); padding:4px 12px; border-radius:20px; margin-top:9px; font-weight:600;}
.info-row{display:flex; justify-content:space-between; align-items:center; padding:13px 2px; border-bottom:1px solid var(--card-border); font-size:14.5px;}
.info-label{color:var(--muted);}
.info-value{font-family:'JetBrains Mono',monospace; font-weight:500; font-size:13.5px; text-align:right;}
.cta-wrap{margin-top:24px;}
.wa-btn{
  width:100%; background:var(--whatsapp); color:#fff; border:none; border-radius:14px; padding:16px 18px;
  font-family:'Inter',sans-serif; font-weight:700; font-size:16px; display:flex; align-items:center; justify-content:center;
  gap:9px; cursor:pointer; box-shadow:0 8px 18px -6px rgba(37,211,102,0.55); text-decoration:none;
}
.wa-btn:hover{background:var(--whatsapp-dark);}
.tel-fallback{
  display:block; width:100%; text-align:center; background:var(--bg-page); color:var(--primary-dark);
  font-weight:700; padding:15px; border-radius:14px; text-decoration:none; margin-top:10px; border:1px solid var(--card-border);
}
.cta-note{text-align:center; font-size:12.5px; color:var(--muted); margin-top:10px; line-height:1.4;}
.detail-warning{color:var(--danger); font-size:13px; margin-top:14px; text-align:center;}

/* Forms */
.form-field{margin-bottom:16px; position:relative;}
.form-label{display:block; font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:7px;}
.form-input, .form-select{
  width:100%; border:1px solid var(--card-border); background:#fff; border-radius:11px;
  padding:13px 14px; font-family:'Inter',sans-serif; font-size:15px; color:var(--ink);
}
.form-input:focus, .form-select:focus{outline:2px solid var(--primary); outline-offset:1px;}
.form-btn{
  width:100%; background:var(--primary); color:#fff; border:none; border-radius:14px; padding:15px 18px;
  font-family:'Inter',sans-serif; font-weight:700; font-size:15.5px; cursor:pointer; margin-top:8px;
}
.form-btn:hover{background:var(--primary-dark);}
.form-btn:disabled{background:#AEBDB6; cursor:not-allowed;}
.field-error{color:var(--danger); font-size:13.5px; margin:-6px 0 12px;}
.field-hint{font-size:12.5px; color:var(--muted); margin-top:7px; line-height:1.4;}

.suggestions{
  list-style:none; margin:6px 0 0; padding:6px; background:#fff; border:1px solid var(--card-border);
  border-radius:11px; position:absolute; width:100%; max-height:240px; overflow-y:auto; z-index:10;
}
.suggestions li{padding:12px; border-radius:8px; cursor:pointer; font-size:14.5px;}
.suggestions li:hover{background:var(--primary-tint);}

/* Dias e horários */
.repeat-row{display:flex; gap:8px; margin-bottom:12px;}
.repeat-input{flex:1;}
.repeat-btn{
  flex:0 0 auto; background:var(--accent-tint); color:var(--accent); border:1px solid var(--accent);
  border-radius:11px; padding:0 16px; font-family:'Inter',sans-serif; font-weight:700; font-size:13.5px; cursor:pointer;
}
.days-list{display:flex; flex-direction:column; gap:8px;}
.day-row{display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--card-border); border-radius:11px; padding:10px 11px;}
.day-check{display:flex; align-items:center; gap:8px; width:72px; flex:0 0 auto; cursor:pointer;}
.day-check input{width:17px; height:17px; accent-color:var(--primary); cursor:pointer;}
.day-check span{font-size:13.5px; font-weight:600;}
.day-time-input{
  flex:1; border:1px solid var(--card-border); border-radius:9px; padding:9px 10px;
  font-family:'Inter',sans-serif; font-size:13.5px; background:var(--phone-bg);
}
.day-time-input:disabled{opacity:0.45; background:#F2F0EA;}
.day-row.active{border-color:var(--primary);}

/* Toast */
.toast{
  position:fixed; left:16px; right:16px; top:16px; max-width:452px; margin:0 auto;
  background:var(--ink); color:#fff; border-radius:12px; padding:13px 15px;
  display:flex; align-items:flex-start; gap:10px; font-size:13px; line-height:1.4;
  box-shadow:0 12px 24px -8px rgba(0,0,0,0.35);
  transform:translateY(-140%); opacity:0;
  transition:transform .35s cubic-bezier(.2,.9,.3,1.2), opacity .3s ease;
  z-index:200;
}
.toast.show{transform:translateY(0); opacity:1;}
.toast-icon{flex:0 0 auto; margin-top:1px;}
.toast b{color:var(--accent);}

/* Painel do profissional */
.pro-header{
  max-width:480px; margin:0 auto; padding:18px 20px 14px;
  display:flex; align-items:center; justify-content:space-between;
}
.pro-header-name{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px;}
.pro-header-tag{font-size:12.5px; color:var(--muted); margin-top:1px;}
.pro-avatar-sm{
  width:38px;height:38px; border-radius:50%; background:var(--primary); color:#fff;
  display:flex;align-items:center;justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13px;
}
.stat-row{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px;}
.stat-card{background:#fff; border:1px solid var(--card-border); border-radius:14px; padding:16px;}
.stat-num{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:26px; color:var(--primary-dark);}
.stat-num.accent{color:var(--accent);}
.stat-label{font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.3;}
.section-label{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--muted); margin:6px 0 11px;
}
.bar-chart{
  display:flex; align-items:flex-end; gap:9px; height:96px; background:#fff;
  border:1px solid var(--card-border); border-radius:14px; padding:15px 15px 11px; margin-bottom:22px;
}
.bar-col{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:6px;}
.bar{width:100%; max-width:24px; background:var(--primary); border-radius:5px 5px 0 0; min-height:2px;}
.bar-tick{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--muted);}
.req-item{display:flex; align-items:flex-start; gap:10px; padding:11px 0; border-bottom:1px solid var(--card-border);}
.req-item:last-child{border-bottom:none;}
.req-dot{width:8px;height:8px; border-radius:50%; background:var(--whatsapp); margin-top:5px; flex:0 0 auto;}
.req-dot.view{background:var(--muted);}
.req-text{font-size:13.5px; line-height:1.45;}
.req-time{font-size:11.5px; color:var(--muted); margin-top:1px;}
.req-empty{color:var(--muted); font-size:13.5px; padding:14px 0;}
.completed-card{
  background:var(--primary-tint); border-radius:14px; padding:16px;
  display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;
}
.completed-text{font-size:13px; color:var(--primary-dark); line-height:1.4;}
.completed-text b{display:block; font-size:20px; font-family:'Space Grotesk',sans-serif;}
.completed-btn{background:var(--primary); color:#fff; border:none; border-radius:10px; padding:10px 14px; font-size:12.5px; font-weight:700; cursor:pointer;}
.edit-link{
  font-size:12px; font-weight:700; color:var(--primary-dark); background:var(--primary-tint);
  border-radius:20px; padding:8px 13px; cursor:pointer;
}

.app-screen{display:none;}
.app-screen.active{display:block;}

/* Cartão de aprovação (painel admin) */
.pending-card{
  background:#fff; border:1px solid var(--card-border); border-radius:var(--radius-md);
  padding:13px; margin-bottom:11px;
}
.pending-top{display:flex; align-items:center; gap:12px; margin-bottom:11px;}
.pending-info{flex:1; min-width:0;}
.pending-name{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px;}
.pending-meta{font-size:12.5px; color:var(--muted); margin-top:1px;}
.pending-actions{display:flex; gap:8px;}
.pending-btn{
  flex:1; border:none; border-radius:10px; padding:10px; font-weight:700; font-size:13px; cursor:pointer;
}
.pending-btn.approve{background:var(--primary); color:#fff;}
.pending-btn.reject{background:var(--bg-page); color:var(--danger); border:1px solid var(--danger);}

/* Avaliação por estrelas */
.rating-section{text-align:center; margin-top:10px; padding-top:12px; border-top:1px dashed var(--card-border);}
.rating-avg{font-size:12.5px; color:var(--muted); margin-bottom:4px;}
.rating-stars{font-size:26px; letter-spacing:4px;}
.rating-stars .star{cursor:pointer; color:var(--card-border); transition:transform .1s ease;}
.rating-stars .star.filled{color:var(--accent);}
.rating-stars .star:hover{transform:scale(1.15);}
.rating-hint{font-size:12px; color:var(--muted); margin-top:4px;}

/* Escolha de perfil (cliente/profissional) */
.role-card{
  background:#fff; border:1px solid var(--card-border); border-radius:var(--radius-md);
  padding:20px; margin-bottom:14px; cursor:pointer; transition:transform .12s ease;
}
.role-card:hover{border-color:var(--primary); transform:translateY(-1px);}
.role-icon{font-size:28px; margin-bottom:8px;}
.role-title{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px; margin-bottom:4px;}
.role-desc{font-size:13px; color:var(--muted); line-height:1.4;}

/* Barra de alternância cliente/profissional */
.mode-nav{
  display:flex; gap:6px; background:var(--phone-bg); border:1px solid var(--card-border);
  border-radius:12px; padding:4px; margin-bottom:18px;
}
.mode-btn{
  flex:1; background:none; border:none; border-radius:9px; padding:10px 8px;
  font-family:'Inter',sans-serif; font-weight:700; font-size:12.5px; color:var(--muted); cursor:pointer;
}
.mode-btn.active{background:var(--primary); color:#fff;}

/* Aviso de vencimento do teste grátis */
.trial-reminder{
  background:var(--accent-tint); border:1px solid var(--accent); color:#6B4A12;
  border-radius:12px; padding:13px 15px; font-size:13px; line-height:1.4; margin-bottom:18px;
}

/* Botão de câmera e prévia de foto */
.camera-btn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:9px;
  background:var(--primary-tint); color:var(--primary-dark); border:1.5px dashed var(--primary);
  border-radius:11px; padding:16px 14px; font-family:'Inter',sans-serif; font-weight:700; font-size:14.5px; cursor:pointer;
}
.camera-btn:hover{background:#CFE3DD;}
.camera-preview{position:relative; border-radius:11px; overflow:hidden; border:1px solid var(--card-border);}
.camera-preview img{display:block; width:100%; max-height:220px; object-fit:cover;}
.retake-btn{
  position:absolute; bottom:8px; right:8px; background:rgba(28,38,33,0.75); color:#fff; border:none;
  border-radius:8px; padding:7px 11px; font-family:'Inter',sans-serif; font-weight:600; font-size:12px; cursor:pointer;
}

/* ---- Conferência de identidade (selfie x documento) ---- */
.idv-block{
  background:var(--bg-page); border:1px solid var(--card-border); border-radius:12px;
  padding:11px; margin-bottom:11px;
}
.idv-title{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13px; color:var(--primary-dark); margin-bottom:8px;}
.idv-photos{display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:9px;}
.idv-photo{
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:0; border:none; background:none;
  cursor:pointer; font-family:inherit;
}
.idv-photo img{
  width:100%; aspect-ratio:1/1; object-fit:contain; border-radius:9px; border:1px solid var(--card-border); background:#fff; display:block;
}
.idv-photo span{font-size:10.5px; color:var(--ink-soft); font-weight:600; text-align:center; line-height:1.2;}
.idv-photo.missing{cursor:default;}
.idv-missing{
  width:100%; aspect-ratio:1/1; border-radius:9px; border:1px dashed var(--danger); color:var(--danger);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; background:#fff;
}
.idv-compare{
  width:100%; background:#fff; color:var(--primary-dark); border:1px solid var(--primary); border-radius:10px;
  padding:9px; font-size:12.5px; font-weight:700; cursor:pointer; margin-bottom:10px;
}
.idv-compare:disabled{opacity:.45; cursor:not-allowed;}
.idv-question{font-size:13px; font-weight:600; color:var(--ink); margin-bottom:7px;}
.idv-choices{display:flex; gap:8px;}
.idv-btn{
  flex:1; border-radius:10px; padding:10px 6px; font-weight:700; font-size:12.5px; cursor:pointer;
  background:#fff; border:1.5px solid var(--card-border); color:var(--ink-soft);
}
.idv-btn.yes.selected{background:var(--primary); border-color:var(--primary); color:#fff;}
.idv-btn.no.selected{background:var(--danger); border-color:var(--danger); color:#fff;}
.idv-btn:disabled{opacity:.5; cursor:not-allowed;}
.idv-result{font-size:12px; margin-top:8px; line-height:1.4; color:var(--muted);}
.idv-result.ok{color:var(--primary-dark); font-weight:600;}
.idv-result.bad{color:var(--danger); font-weight:600;}
.pending-btn:disabled{opacity:.45; cursor:not-allowed;}

/* Selo de identidade verificada (visto pelo cliente) */
.detail-badges{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:8px;}
.verified-pill{
  font-size:11.5px; font-weight:700; color:#fff; background:var(--primary);
  padding:3px 10px; border-radius:20px; display:inline-block;
}
.verified-check{
  display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; margin-left:4px;
  border-radius:50%; background:var(--primary); color:#fff; font-size:10px; font-weight:700; vertical-align:middle;
}

/* Aviso de identidade no painel do profissional */
.idv-banner{border-radius:12px; padding:13px 15px; font-size:13px; line-height:1.4; margin-bottom:18px; border:1px solid;}
.idv-banner.ok{background:var(--primary-tint); border-color:var(--primary); color:var(--primary-dark);}
.idv-banner.pending{background:var(--accent-tint); border-color:var(--accent); color:#6B4A12;}
.idv-banner.bad{background:#F8E3DB; border-color:var(--danger); color:#8A3416;}

/* Visualizador de fotos em tela cheia */
.photo-viewer{
  position:fixed; inset:0; z-index:300; background:#0c120f;
  display:flex; flex-direction:column; padding:16px;
}
.pv-top{display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:720px; width:100%; margin:0 auto 12px;}
.pv-title{color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px;}
.pv-close{background:#fff; color:var(--ink); border:none; border-radius:10px; padding:9px 14px; font-weight:700; font-size:13px; cursor:pointer;}
.pv-body{flex:1; min-height:0; max-width:720px; width:100%; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:10px; overflow:auto;}
.pv-item{margin:0; flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:8px;}
.pv-item img{max-width:100%; max-height:72vh; object-fit:contain; border-radius:10px; background:#fff;}
.pv-item figcaption{color:#fff; font-size:12.5px; font-weight:600;}

/* Comparação: uma foto embaixo da outra no celular (rosto maior); lado a lado em tela larga */
.pv-body.pv-two{flex-direction:column; justify-content:flex-start; overflow-y:auto;}
.pv-body.pv-two .pv-item{flex:0 0 auto; width:100%;}
.pv-body.pv-two .pv-item img{max-height:40vh;}
@media (min-width:640px){
  .pv-body.pv-two{flex-direction:row; align-items:center; justify-content:center;}
  .pv-body.pv-two .pv-item{flex:1 1 0; width:auto;}
  .pv-body.pv-two .pv-item img{max-height:72vh;}
}

/* Selo "disponível agora" (na lista e no detalhe do profissional) */
.now-badge{
  display:inline-block; font-size:11px; font-weight:700; color:var(--primary-dark);
  background:var(--primary-tint); padding:2px 9px; border-radius:20px; margin-top:4px;
}