:root{
  --ink:#1C2541;
  --paper:#F7F5F0;
  --accent:#C9820B;
  --good:#2E7D32;
  --bad:#B3261E;
  --line:#DAD5C8;
  --muted:#6B6459;
  --white:#FFFFFF;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  line-height:1.5;
}
.wrap{
  max-width:480px;
  margin:0 auto;
  padding:28px 18px 60px;
}
h1{
  font-size:26px;
  font-weight:700;
  letter-spacing:-0.02em;
  margin:0 0 4px;
}
.sub{
  color:var(--muted);
  font-size:14px;
  margin:0 0 26px;
}
section{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:10px;
  padding:20px;
  margin-bottom:16px;
}
h2{
  font-size:15px;
  font-weight:700;
  margin:0 0 12px;
}
button{
  font-family:inherit;
  font-size:14.5px;
  font-weight:600;
  border:none;
  border-radius:7px;
  padding:12px 16px;
  cursor:pointer;
  width:100%;
  margin-bottom:10px;
  transition:transform .08s ease, opacity .15s ease;
}
button:active{transform:scale(0.98);}
button:disabled{opacity:0.5; cursor:not-allowed;}
.btn-google{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--white);
  color:var(--ink);
  border:1px solid var(--line);
}
.btn-primary{ background:var(--ink); color:var(--white); }
.btn-secondary{ background:var(--paper); color:var(--ink); border:1px solid var(--line); }
.btn-mark{ background:var(--accent); color:var(--white); font-size:16px; padding:15px; }
.btn-signout{
  width:auto;
  background:var(--paper);
  color:var(--muted);
  border:1px solid var(--line);
  font-size:12.5px;
  padding:8px 12px;
  margin:0;
}
.status-msg{
  font-size:13px;
  color:var(--muted);
  margin-top:4px;
  min-height:16px;
}
.warning-banner{
  background:#FBEAE9;
  color:var(--bad);
  border:1px solid #F2C9C6;
  border-radius:7px;
  padding:10px 12px;
  font-size:13px;
  margin-bottom:14px;
}
.employee-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}
.emp-name{ font-size:17px; font-weight:700; }
.emp-plant{ font-size:13px; color:var(--muted); margin-top:2px; }
.camera-box{
  width:100%;
  aspect-ratio:3/4;
  background:#000;
  border-radius:10px;
  overflow:hidden;
  margin-bottom:14px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.camera-box video, .camera-box img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.radar-box{
  display:flex;
  justify-content:center;
  padding:10px 0 4px;
}
.result{
  text-align:center;
  margin-top:6px;
}
.result .distance{ font-size:32px; font-weight:700; letter-spacing:-0.02em; }
.result .verdict{ font-size:14px; font-weight:600; margin-top:2px; }
.verdict.in{ color:var(--good); }
.verdict.out{ color:var(--bad); }
.history{ margin-top:4px; }
table{ width:100%; border-collapse:collapse; font-size:12.5px; }
th,td{ text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); }
th{ color:var(--muted); font-weight:600; font-size:11px; }
.tag{ padding:2px 8px; border-radius:20px; font-size:10.5px; font-weight:700; }
.tag.in{ background:#E7F3E8; color:var(--good); }
.tag.out{ background:#FBEAE9; color:var(--bad); }
.tag.flag{ background:#FDF1DC; color:var(--accent); }
.empty{ color:var(--muted); font-size:13px; text-align:center; padding:12px 0; }

/* ===== LANDING ===== */
.landing-buttons{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:8px;
}
.btn-mode{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:12px;
  padding:18px;
  text-align:left;
  width:100%;
}
.mode-icon{ font-size:26px; margin-bottom:4px; }
.mode-label{ font-size:16px; font-weight:700; color:var(--ink); }
.mode-sub{ font-size:12.5px; color:var(--muted); }

/* ===== TOPBAR ===== */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
}
.btn-back{
  width:auto;
  background:none;
  border:none;
  color:var(--muted);
  font-size:13px;
  padding:6px 0;
  margin:0;
}
.info-banner{
  background:#FDF1DC;
  color:var(--accent);
  border:1px solid #F0DBA8;
  border-radius:7px;
  padding:12px;
  font-size:13.5px;
  margin-bottom:14px;
}

/* ===== VIEWER DASHBOARD ===== */
.viewer-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  flex-wrap:wrap;
}
.viewer-top h1{ margin:0; font-size:22px; }
#dateFilter{
  border:1px solid var(--line);
  border-radius:7px;
  padding:8px 10px;
  font-family:inherit;
  font-size:13.5px;
  background:var(--white);
  color:var(--ink);
}
.stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:18px;
}
.stat{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px;
}
.stat .label{ color:var(--muted); font-size:12px; }
.stat .num{ font-size:24px; font-weight:800; margin-top:4px; }
.num.blue{ color:#3B67D9; }
.num.green{ color:var(--good); }
.num.red{ color:var(--bad); }

.sites{ display:flex; flex-direction:column; gap:14px; }
.site-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px;
}
.sitehead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:8px;
}
.site-title{ font-size:15.5px; font-weight:700; }
.location{ font-size:11.5px; color:var(--muted); margin-top:2px; }
.badge{
  padding:5px 10px;
  border-radius:20px;
  font-size:10.5px;
  font-weight:700;
  background:#E7F3E8;
  color:var(--good);
  white-space:nowrap;
}
.badge.warn{ background:#FDF1DC; color:var(--accent); }
.badge.bad{ background:#FBEAE9; color:var(--bad); }

.employee-row{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:10px;
  align-items:center;
  padding:10px 0;
  border-top:1px solid var(--line);
}
.empname{ font-weight:650; font-size:13.5px; }
.empmeta{ font-size:11px; color:var(--muted); margin-top:2px; }
.status{ font-size:11.5px; font-weight:700; white-space:nowrap; }
.status.green{ color:var(--good); }
.status.red{ color:var(--bad); }
.photo-btn{
  width:auto;
  margin:0;
  background:#EEF3FF;
  color:#315FD2;
  border:none;
  padding:7px 9px;
  border-radius:7px;
  font-size:11.5px;
  font-weight:700;
}
.photo-btn:disabled{ background:var(--paper); color:var(--line); }

/* ===== SELFIE MODAL ===== */
.modal{
  position:fixed;
  inset:0;
  background:rgba(28,37,65,0.7);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:100;
  padding:20px;
}
.modal-inner{
  background:var(--white);
  border-radius:12px;
  padding:16px;
  max-width:360px;
  width:100%;
  position:relative;
}
.modal-close{
  position:absolute;
  top:8px; right:8px;
  width:30px; height:30px;
  border-radius:50%;
  background:var(--paper);
  color:var(--ink);
  margin:0;
  padding:0;
  font-size:14px;
  z-index:2;
}
#modalImg{
  width:100%;
  border-radius:8px;
  display:block;
  background:var(--paper);
  min-height:200px;
}
.modal-meta{
  font-size:13px;
  color:var(--muted);
  text-align:center;
  margin-top:10px;
}

/* ===== STATUS BADGE (compact P/A) ===== */
.employee-row{
  grid-template-columns:1fr auto auto;
}
.status-badge{
  width:24px;
  height:24px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:800;
}
.status-badge.green{ background:#E7F3E8; color:var(--good); }
.status-badge.red{ background:#FBEAE9; color:var(--bad); }

.row-actions{
  display:flex;
  gap:6px;
}
.icon-btn{
  width:auto;
  margin:0;
  background:#EEF3FF;
  color:#315FD2;
  border:none;
  padding:7px 9px;
  border-radius:7px;
  font-size:13px;
}
.icon-btn:disabled{ background:var(--paper); color:var(--line); }

.modal-map-link{
  display:block;
  text-align:center;
  margin-top:10px;
  color:#315FD2;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
}

/* ===== EMBEDDED MAP ===== */
.map-frame{
  width:100%;
  height:200px;
  border:0;
  border-radius:8px;
  margin-top:10px;
  display:block;
}
.map-frame-tall{ height:320px; margin-top:0; }