:root{
  --primary:#0f5c8c; --primary-dark:#0b4468; --accent:#f39c12;
  --green:#1e8e5a; --red:#c0392b; --gray:#6b7280; --bg:#f4f6f8;
  --card:#ffffff; --border:#e2e6ea; --text:#1f2937;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--text);
  direction:ltr; text-align:left; font-size:15px;
}
a{color:var(--primary); text-decoration:none}
.topbar{
  background:var(--primary-dark); color:#fff; padding:12px 16px; display:flex;
  justify-content:space-between; align-items:center; position:sticky; top:0; z-index:50;
}
.topbar .brand{font-weight:700; font-size:16px}
.topbar .user{font-size:13px; display:flex; gap:10px; align-items:center}
.topbar a{color:#fff; opacity:.9}
.nav{
  display:flex; gap:6px; flex-wrap:wrap; background:#fff; padding:8px 12px; border-bottom:1px solid var(--border);
  position:sticky; top:48px; z-index:40; overflow-x:auto;
}
.nav a{
  padding:8px 12px; border-radius:8px; font-size:13.5px; white-space:nowrap; color:var(--text);
}
.nav a.active, .nav a:hover{background:var(--primary); color:#fff}
.container{max-width:960px; margin:0 auto; padding:16px}
.card{background:var(--card); border:1px solid var(--border); border-radius:10px; padding:16px; margin-bottom:14px}
h1{font-size:19px; margin:0 0 14px}
h2{font-size:16px; margin:0 0 10px}
.btn{
  display:inline-block; background:var(--primary); color:#fff; border:none; padding:10px 16px;
  border-radius:8px; font-size:14px; cursor:pointer;
}
.btn:hover{background:var(--primary-dark)}
.btn.secondary{background:#fff; color:var(--primary); border:1px solid var(--primary)}
.btn.danger{background:var(--red)}
.btn.green{background:var(--green)}
.btn.small{padding:6px 10px; font-size:12.5px}
.btn:disabled{opacity:.5; cursor:not-allowed}
table{width:100%; border-collapse:collapse; font-size:13.5px}
th,td{padding:9px 8px; border-bottom:1px solid var(--border); text-align:left}
th{background:#f0f3f6; font-weight:700}
tr:hover td{background:#fafcfe}
.form-row{margin-bottom:14px}
label{display:block; font-size:13.5px; font-weight:600; margin-bottom:5px}
input[type=text],input[type=password],input[type=number],input[type=date],
select,textarea{
  width:100%; padding:10px; border:1px solid var(--border); border-radius:8px; font-size:14.5px;
  font-family:inherit; background:#fff;
}
textarea{min-height:80px}
.hint{color:var(--gray); font-size:12px; margin-top:4px}
.badge{display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600}
.badge-gray{background:#e5e7eb; color:#374151}
.badge-blue{background:#dbeafe; color:#1d4ed8}
.badge-green{background:#d1fae5; color:#047857}
.badge-red{background:#fde2e1; color:#b91c1c}
.flash{padding:12px 14px; border-radius:8px; margin-bottom:14px; font-size:14px}
.flash-success{background:#d1fae5; color:#065f46}
.flash-error{background:#fde2e1; color:#991b1b}
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px}
.login-card{width:100%; max-width:360px; background:#fff; border-radius:14px; padding:28px; box-shadow:0 6px 24px rgba(0,0,0,.08)}
.login-card h1{text-align:center; margin-bottom:4px}
.login-card p.sub{text-align:center; color:var(--gray); font-size:13px; margin-bottom:20px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px}
@media (max-width:640px){ .grid-2,.grid-3{grid-template-columns:1fr} }
.toolbar{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap}
.field-box{border:1px solid var(--border); border-radius:8px; padding:12px; margin-bottom:10px; background:#fafbfc}
.field-box .field-head{display:flex; justify-content:space-between; align-items:center; gap:8px}
.actions-row{display:flex; gap:8px; flex-wrap:wrap}
.photo-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; margin-top:8px}
.photo-grid img{width:100%; height:110px; object-fit:cover; border-radius:8px; border:1px solid var(--border)}
.pass-fail-btns{display:flex; gap:8px}
.pass-fail-btns label{
  flex:1; text-align:center; border:1px solid var(--border); border-radius:8px; padding:9px; cursor:pointer; font-weight:600;
}
.pass-fail-btns input{display:none}
.pass-fail-btns input:checked + span{display:block}
.pf-pass:has(input:checked){background:#d1fae5; border-color:var(--green)}
.pf-fail:has(input:checked){background:#fde2e1; border-color:var(--red)}
.pf-na:has(input:checked){background:#e5e7eb; border-color:var(--gray)}
.muted{color:var(--gray); font-size:13px}
.required{color:var(--red)}
.empty-state{text-align:center; color:var(--gray); padding:30px 10px}