:root{
  --green-dark:#1f7a4d;
  --green:#2fa66a;
  --green-light:#4fc98a;
  --navy:#132743;
  --navy-light:#1c3a5e;
  --accent:#2f8fd6;
  --bg:#eef3f7;
  --card:#ffffff;
  --text:#1b2733;
  --muted:#6b7c8c;
  --danger:#e0554f;
  --radius:14px;
}
*{box-sizing:border-box;}
body{
  font-family:'Segoe UI',Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  margin:0;
}

/* ===== PUBLIC (GUEST) THEME - GREEN ===== */
.public-wrap{max-width:520px;margin:0 auto;min-height:100vh;background:var(--card);box-shadow:0 0 30px rgba(0,0,0,.08);}
.public-header{
  background:linear-gradient(120deg,var(--green-dark),var(--green-light));
  color:#fff;padding:22px 20px;display:flex;align-items:center;justify-content:space-between;
  border-bottom-left-radius:20px;border-bottom-right-radius:20px;
}
.public-header h1{font-size:18px;margin:0;letter-spacing:.5px;}
.public-header p{margin:2px 0 0;font-size:12px;opacity:.9;}
.public-body{padding:20px;}
.form-group{margin-bottom:14px;}
.form-group label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:5px;}
.form-control, select.form-control{
  width:100%;padding:12px 14px;border:1px solid #dfe6ec;border-radius:10px;font-size:14px;background:#f8fafb;
}
.form-control:focus{outline:none;border-color:var(--green);background:#fff;}
.btn{display:inline-block;padding:12px 18px;border-radius:10px;border:none;font-weight:600;font-size:14px;cursor:pointer;text-align:center;text-decoration:none;}
.btn-green{background:var(--green);color:#fff;}
.btn-green:hover{background:var(--green-dark);}
.btn-block{width:100%;}
.btn-outline-green{background:#fff;border:1.5px solid var(--green);color:var(--green-dark);}
.photo-box{
  border:2px dashed #cfe0d6;border-radius:12px;padding:14px;text-align:center;background:#f5faf7;margin-bottom:14px;
}
.photo-box img{max-width:140px;border-radius:10px;margin-top:8px;}
.section-title{font-weight:700;color:var(--green-dark);font-size:14px;margin:18px 0 8px;text-transform:uppercase;letter-spacing:.4px;}
.alert{padding:10px 14px;border-radius:10px;font-size:13px;margin-bottom:14px;}
.alert-danger{background:#fdecea;color:var(--danger);border:1px solid #f6c8c5;}
.alert-success{background:#e7f8ee;color:var(--green-dark);border:1px solid #bfe9cf;}

/* ===== VISITOR CARD ===== */
.vcard{
  margin:20px;border-radius:18px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.12);
  background:#fff;border:1px solid #e5eaef;
}
.vcard-top{background:linear-gradient(120deg,var(--green-dark),var(--green-light));color:#fff;padding:18px 20px;text-align:center;}
.vcard-top small{opacity:.85;font-size:11px;letter-spacing:1px;}
.vcard-photo{display:flex;justify-content:center;margin-top:-38px;}
.vcard-photo img{width:76px;height:76px;border-radius:50%;object-fit:cover;border:4px solid #fff;background:#ddd;}
.vcard-body{padding:16px 22px 22px;text-align:center;}
.vcard-no{font-size:20px;font-weight:800;color:var(--green-dark);letter-spacing:1px;margin:6px 0;}
.vcard-name{font-size:17px;font-weight:700;margin:2px 0;}
.vcard-row{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;border-bottom:1px dashed #e5eaef;}
.vcard-row span:first-child{color:var(--muted);}
.vcard-qr{display:flex;justify-content:center;margin:16px 0 6px;}
.status-pill{display:inline-block;padding:4px 12px;border-radius:20px;font-size:11px;font-weight:700;}
.status-in{background:#e7f8ee;color:var(--green-dark);}
.status-out{background:#fdecea;color:var(--danger);}

/* ===== ADMIN THEME - NAVY ===== */
.admin-body{background:#eef2f6;min-height:100vh;}
.admin-shell{display:flex;min-height:100vh;}
.sidebar{
  width:230px;background:linear-gradient(180deg,var(--navy),var(--navy-light));color:#dbe6f2;flex-shrink:0;
  padding:18px 14px;
}
.sidebar h2{font-size:15px;color:#fff;margin:4px 8px 20px;letter-spacing:.4px;}
.sidebar h2 small{display:block;font-weight:400;font-size:11px;color:#9db3c9;}
.sidebar a{display:flex;align-items:center;gap:10px;color:#c4d3e2;text-decoration:none;padding:11px 12px;border-radius:9px;font-size:13.5px;margin-bottom:3px;}
.sidebar a:hover, .sidebar a.active{background:rgba(255,255,255,.12);color:#fff;}
.main{flex:1;padding:22px 26px;overflow-x:auto;}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.topbar h1{font-size:19px;margin:0;color:var(--navy);}
.topbar .who{font-size:13px;color:var(--muted);}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:22px;}
.stat-card{background:#fff;border-radius:14px;padding:16px 18px;box-shadow:0 2px 8px rgba(20,40,70,.06);}
.stat-card .num{font-size:26px;font-weight:800;color:var(--navy);}
.stat-card .lbl{font-size:12.5px;color:var(--muted);margin-top:2px;}
.panel{background:#fff;border-radius:16px;padding:20px;box-shadow:0 2px 10px rgba(20,40,70,.06);margin-bottom:20px;}
.panel h3{margin-top:0;font-size:15px;color:var(--navy);}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px;}
table.tbl th{text-align:left;color:var(--muted);font-weight:600;padding:10px 12px;border-bottom:2px solid #eef2f6;font-size:12px;text-transform:uppercase;}
table.tbl td{padding:11px 12px;border-bottom:1px solid #f0f3f6;vertical-align:middle;}
table.tbl tr:hover td{background:#f7fafc;}
.badge{padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;}
.badge-in{background:#e7f8ee;color:var(--green-dark);}
.badge-out{background:#eceff3;color:#5b6b7b;}
.thumb{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#dde5ec;}
.btn-sm{padding:7px 12px;font-size:12.5px;border-radius:8px;}
.btn-navy{background:var(--navy);color:#fff;}
.btn-blue{background:var(--accent);color:#fff;}
.btn-danger{background:var(--danger);color:#fff;}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(120deg,var(--navy),var(--navy-light));}
.login-card{background:#fff;border-radius:18px;padding:34px 30px;width:340px;box-shadow:0 20px 50px rgba(0,0,0,.25);}
.login-card h1{font-size:17px;text-align:center;color:var(--navy);margin-bottom:2px;}
.login-card p{text-align:center;color:var(--muted);font-size:12.5px;margin-top:0;margin-bottom:20px;}
.search-bar{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.search-bar input, .search-bar select{padding:9px 12px;border:1px solid #dfe6ec;border-radius:9px;font-size:13px;}
@media (max-width:800px){
  .sidebar{position:fixed;left:-230px;top:0;bottom:0;z-index:50;transition:.2s;}
  .sidebar.open{left:0;}
  .main{padding:16px;}
}