body{margin:0;font-family:Arial;background:#f4f4f4}
    header{background:#ffcc00;padding:15px;text-align:center;border-bottom:5px solid #d40511}
    header h1{margin:0;font-size:18px;color:#d40511}
    .page{display:none;max-width:520px;margin:auto;background:#fff;min-height:calc(100vh - 80px);padding:20px}
    .page.active{display:block}
    h2{color:#d40511;font-size:18px}
    label{font-weight:bold;margin-top:12px;display:block}
    input,select{width:100%;padding:10px;font-size:15px;margin-top:5px}
    canvas{
      width:100%;
      height:180px;
      border:2px solid #d40511;
      margin-top:10px;
      touch-action:none;
      border-radius:6px;
      background:#fff;
      display:block;
    }
    button{width:100%;padding:12px;margin-top:12px;font-size:16px;background:#d40511;color:#fff;border:none;border-radius:4px}
    button.secondary{background:#666}
    .photo-actions{display:flex;gap:10px;margin-top:8px}
    .photo-actions button{flex:1;font-size:14px}
    img.preview{width:100%;margin-top:10px;border:1px solid #ccc;display:none}
    .info{font-size:13px;color:#555;margin-top:8px}
    .pausas{display:flex;gap:20px;margin-top:10px}
    .pausas label{font-weight:normal;margin-top:0}

/* extras */
.status{margin:8px 0 12px;font-size:12px;color:#666}


/* --- Extras: retroativo + relatórios --- */
.retro, .relatorios{
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #fff;
}
.relatorios h3{
  margin: 0 0 10px 0;
  font-size: 14px;
}
.row{display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap;}
.col{flex:1; min-width:140px;}
.check{display:flex; gap:8px; align-items:center;}
small{display:block; color:#666; margin-top:4px;}
.tempo{font-weight:700; color:#666; margin-left:6px;}