:root{
    --bg:#f6f7fb; --card:#ffffff; --border:#e6e8ef; --text:#0f172a; --muted:#6b7280;
    --ok:#16a34a; --bad:#dc2626; --warn:#f59e0b; --accent:#111827;
  }
  *{box-sizing:border-box}
  body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif; background:var(--bg); color:var(--text)}
  header{
    position:sticky; top:0; z-index:20; background:var(--card); border-bottom:1px solid var(--border);
    padding:10px 16px; display:flex; gap:12px; align-items:center; justify-content:space-between;
  }
  .title{font-weight:700}
  .meta{font-size:.9rem; color:var(--muted)}
  .progress-bar{position:relative; height:8px; background:#eef1f7; border-radius:999px; overflow:hidden; margin-top:8px}
  .progress-fill{position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--accent); transition:width .25s}
  .container{max-width:900px; margin:0 auto; padding:0 16px}
  /* Páginas (1 por tela) */
  .page-wrap{min-height:calc(100svh - 128px); display:flex; align-items:stretch}
  .page{display:none; width:100%}
  .page.active{display:block}
  .area-card{
    background:var(--card); border:1px solid var(--border); border-radius:16px;
    padding:16px; box-shadow:0 1px 2px rgba(0,0,0,.04); margin:16px 0; min-height:calc(100svh - 220px);
    display:flex; flex-direction:column;
  }
  .area-title{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px}
  .area-title h2{margin:0; font-size:1.15rem}
  .count{font-size:.85rem; color:var(--muted)}
  .itens{display:flex; flex-direction:column; gap:12px; margin-top:8px; flex:1}
  .item{border:1px dashed var(--border); border-radius:12px; padding:12px; background:#fafbff}
  .item-header{display:flex; justify-content:space-between; gap:8px; align-items:center; margin-bottom:8px}
  .item-name{font-weight:600}
  .status.vertical{display:flex; flex-direction:column; gap:8px}
  .pill{
    display:flex; align-items:center; gap:8px; padding:12px; border-radius:10px; border:1px solid var(--border);
    font-size:1.05rem; background:#fff; width:100%; justify-content:flex-start;
  }
  .pill input{transform:scale(1.25)}
  .pill.ok{border-color:var(--ok)}
  .pill.bad{border-color:var(--bad)}
  .pill.re{border-color:var(--warn)}
  .field-row.vertical{display:flex; flex-direction:column; gap:8px}
  textarea, input[type="text"], input[type="date"], input[type="tel"], input[type="email"]{
    width:100%; font-size:1rem; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:white
  }
  .grid-two{display:grid; grid-template-columns:1fr 1fr; gap:10px}
  .grid-three{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px}
  .grid-auto{display:grid; grid-template-columns:1fr; gap:10px}
  @media (min-width:720px){ .grid-auto{grid-template-columns:1fr 1fr} }
  .photo{
    display:flex; flex-direction:column; align-items:flex-start; gap:6px; background:#fff;
    border:1px solid var(--border); border-radius:10px; padding:6px 8px
  }
  .photo-preview{max-height:50px; max-width:70px; border:1px solid var(--border); border-radius:6px}
  input[type="file"]{font-size:1rem}
  /* Footer de navegação */
  .footer{
    position:sticky; bottom:0; z-index:20; background:linear-gradient(180deg, rgba(246,247,251,0) 0%, var(--card) 30%);
    border-top:1px solid var(--border); padding:12px 16px
  }
  .pager{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap}
  .steps{display:flex; gap:6px; align-items:center}
  .dot{width:10px; height:10px; border-radius:50%; background:#dbe0ea}
  .dot.active{background:var(--accent)}
  .btn{font-size:1.05rem; border:none; border-radius:12px; padding:12px 16px; cursor:pointer}
  .btn.primary{background:var(--accent); color:#fff}
  .btn.ghost{background:#fff; color:var(--accent); border:1px solid var(--border)}
  .btn:disabled{opacity:.6; cursor:not-allowed}
  .hstack{display:flex; gap:8px; align-items:center}
  .helper{font-size:.9rem; color:var(--muted)}
.sig-pad { background:#fff; border:1px solid var(--border); border-radius:10px; padding:8px; }
.sig-pad canvas {
  width:100%; height:240px; touch-action:none;
  background:#fff; border:1px dashed var(--border); border-radius:8px;
}
.muted { color: var(--muted); font-size:.9rem; }
.chip { display:inline-block; padding:2px 8px; border-radius:999px; background:#eef1f7; color:#111827; font-size:.85rem; }
.chip.ok { background:#d1fae5; }
.chip.bad { background:#fee2e2; }