:root{
  --bg:#f4f7f3;
  --panel:#fff;
  --line:#d8e4d6;
  --text:#17351f;
  --muted:#627466;
  --brand:#1f6d32;
  --brand-dark:#0f3e22;
  --brand-soft:#e7f4e7;
  --accent:#2f8f46;
  --ok:#087443;
  --warn:#a15c00;
  --danger:#b42318;
  --shadow:0 14px 34px rgba(15,62,34,.12)
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
button,textarea,input{font:inherit}
.app{min-height:100vh;display:grid;grid-template-columns:270px minmax(0,1fr)}
.sidebar{background:linear-gradient(180deg,#f8fbf7,#e8f2e5);color:var(--text);padding:18px 14px;border-right:1px solid var(--line)}
.brand{padding:8px 10px 18px;border-bottom:1px solid var(--line)}
.brand img{display:block;width:205px;max-width:100%;height:auto;margin-bottom:10px}
.brand span{display:block;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.2px}
.nav{display:grid;gap:6px;margin-top:16px}
.nav button{border:0;background:transparent;color:#24442b;text-align:left;padding:10px 12px;border-radius:7px;cursor:pointer;font-weight:700}
.nav button.active,.nav button:hover{background:var(--brand);color:#fff}
.main{min-width:0}
.topbar{min-height:72px;background:var(--panel);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 24px}
.topbar h1{margin:0;font-size:21px}
.topbar p{margin:4px 0 0;color:var(--muted);font-size:13px}
.top-actions{display:flex;align-items:center;gap:10px}
.user-chip{display:grid;gap:2px;background:var(--brand-soft);border:1px solid #bddcbd;border-radius:8px;padding:8px 12px;text-align:right}
.user-chip strong{font-size:13px;color:var(--brand-dark)}
.user-chip span{font-size:12px;color:var(--muted)}
.pill{background:var(--brand-soft);color:var(--brand-dark);border:1px solid #bddcbd;border-radius:999px;padding:8px 12px;font-size:13px}
.content{padding:22px 24px 30px}
.screen{display:none}
.screen.active{display:grid;gap:18px}
.metrics{display:grid;grid-template-columns:repeat(6,minmax(130px,1fr));gap:12px}
.metric,.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}
.metric{min-height:92px;padding:14px;display:grid;align-content:space-between}
.metric span{color:var(--muted);font-size:12px}
.metric strong{font-size:28px;line-height:1;color:var(--brand-dark)}
.panel{overflow:hidden}
.panel-head{min-height:58px;padding:12px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px}
.panel-head h2{margin:0;font-size:16px}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btn{height:38px;border:1px solid var(--line);background:#fff;color:var(--text);border-radius:7px;padding:0 12px;cursor:pointer}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-dark)}
.btn.small{height:32px;padding:0 9px;font-size:12px}
.pad{padding:16px}
.mt{margin-top:10px}
.split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr);gap:18px}
textarea{width:100%;border:1px solid var(--line);border-radius:7px;padding:10px;resize:vertical}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:820px}
th,td{border-bottom:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:middle;font-size:13px}
th{background:#f8fbf7;color:var(--muted);font-weight:700}
.status{display:inline-flex;min-height:24px;padding:3px 8px;border-radius:999px;font-size:12px;font-weight:700}
.status.ok{color:var(--ok);background:#eaf8ef}
.status.warn{color:var(--warn);background:#fff4df}
.status.info{color:var(--brand-dark);background:var(--brand-soft)}
.empty{padding:22px 16px;color:var(--muted);font-size:14px}
.timeline{padding:16px;display:grid;gap:12px}
.event{display:grid;grid-template-columns:145px minmax(0,1fr);gap:12px;font-size:13px}
.event time{color:var(--muted)}
.qr-input{width:100%;height:44px;border:2px solid var(--brand);border-radius:7px;padding:0 12px;margin-bottom:12px;font-size:16px}
.panel-head .qr-input{width:260px;height:38px;margin-bottom:0;border-width:1px;font-size:14px}
.camera-box{min-height:220px;background:#153d23;border-radius:8px;margin-bottom:12px;display:grid;place-items:center;position:relative;overflow:hidden;color:#e7f4e7;text-align:center}
.camera-box video{width:100%;height:100%;max-height:300px;object-fit:cover}
.camera-box span{position:absolute;padding:16px}
.file-action{height:38px;border:1px solid var(--line);background:#fff;color:var(--text);border-radius:7px;padding:0 12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.file-action input{display:none}
.toast{position:fixed;right:22px;bottom:22px;z-index:50;background:var(--brand-dark);color:#fff;border-radius:8px;box-shadow:var(--shadow);padding:12px 14px;min-width:240px;max-width:min(420px,calc(100vw - 32px));font-size:14px;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .18s ease,transform .18s ease}.toast.show{opacity:1;transform:translateY(0)}
.dialog-card{background:#fff;min-width:min(920px,calc(100vw - 30px));max-width:calc(100vw - 30px)}
dialog{border:0;border-radius:8px;padding:0;box-shadow:var(--shadow)}
.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.field{display:grid;gap:4px}
.field span{color:var(--muted);font-size:12px}
.field strong{overflow-wrap:anywhere}
.evidence-card{margin:16px 0;border:1px solid var(--line);border-radius:8px;background:#f8fbf7;overflow:hidden}
.evidence-head{min-height:54px;padding:12px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.evidence-head span{display:block;color:var(--muted);font-size:12px}
.evidence-head strong{display:block;margin-top:3px;color:var(--brand-dark)}
.evidence-photo{display:block;width:100%;max-height:520px;object-fit:contain;background:#102d1d}
.evidence-meta{padding:14px}
.empty-evidence{padding:14px;display:grid;gap:4px}
.empty-evidence strong{color:var(--brand-dark)}
.empty-evidence span{color:var(--muted);font-size:13px}
.empty.compact{padding:12px 14px}
.login-page{min-height:100vh;background:linear-gradient(135deg,#f4f7f3 0%,#e7f4e7 100%)}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:min(430px,100%);background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);padding:24px}
.login-brand{padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:18px}
.login-brand img{display:block;width:230px;max-width:100%;height:auto;margin-bottom:10px}
.login-brand span{display:block;color:var(--muted);font-size:13px;font-weight:700}
.login-form{display:grid;gap:14px}
.login-form label{display:grid;gap:6px}
.login-form label span{font-size:12px;font-weight:700;color:var(--muted)}
.login-form input{height:44px;border:1px solid var(--line);border-radius:7px;padding:0 12px}
.login-submit{width:100%;height:44px;margin-top:4px}
.login-message{min-height:20px;color:var(--danger);font-size:13px;font-weight:700}
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{border-right:0;border-bottom:1px solid var(--line)}
  .brand img{width:190px}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:1fr}
  .topbar{align-items:flex-start;flex-direction:column}
  .top-actions{width:100%;justify-content:space-between}
  .user-chip{text-align:left}
}
@media(max-width:700px){
  .detail-grid{grid-template-columns:1fr}
  .dialog-card{min-width:calc(100vw - 20px)}
}