:root{font-family:system-ui,'Segoe UI',sans-serif;color:#16312b;background:#f3f8f5}*{box-sizing:border-box}body{margin:0}header{background:#146b50;color:white;padding:18px 22px}header h1{margin:0;font-size:25px}header small{opacity:.9}.wrap{max-width:1100px;margin:24px auto;padding:0 16px}.card{background:white;border:1px solid #d5e7de;border-radius:15px;padding:20px;margin:16px 0;box-shadow:0 3px 12px #143b2410}h2{font-size:19px;margin:0 0 15px}h3{font-size:16px}label{display:block;margin:10px 0;font-weight:600}input,select,textarea,button{font:inherit}input,select,textarea{display:block;width:100%;padding:11px;border:1px solid #a8bdb3;border-radius:9px;margin-top:5px;background:white}button{border:0;background:#12694f;color:white;border-radius:9px;padding:11px 16px;cursor:pointer;font-weight:600;margin:3px}button:hover{background:#09563d}button:disabled{opacity:.45;cursor:not-allowed}.secondary{background:#e4eee9;color:#12543d}.danger{background:#a43b3b}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.muted{color:#61776b}.msg{padding:12px;border-radius:9px;background:#e9f5ef;margin:12px 0}.error{background:#ffe8e5;color:#9a2720}table{width:100%;border-collapse:collapse;font-size:14px}td,th{text-align:left;border-bottom:1px solid #dbe9e2;padding:9px;vertical-align:top}.table-scroll{overflow:auto}video,canvas,.preview{width:100%;max-width:380px;border-radius:12px;background:#192d25}canvas{display:none}.hero{font-size:21px;font-weight:700}.pill{display:inline-block;background:#e5f2e9;padding:5px 10px;border-radius:30px}.hide{display:none!important}@media(max-width:650px){.wrap{margin:10px auto}.card{padding:16px}button{min-height:46px}td,th{min-width:80px}}

.saved-photos{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px}.saved-photos:empty{display:none}.saved-photos figure{margin:0;max-width:280px;width:100%}.saved-photos img{display:block;width:100%;border-radius:12px;border:1px solid #d5e7de}.saved-photos figcaption{font-weight:600;margin:4px 0 8px}
/* SIHADIR KOPKARLITAN */
:root{color:#102b4f;background:#eef5fc}
header{background:#0758ad}
button{background:#0758ad}
button:hover{background:#064987}
.secondary{background:#e8f1fc;color:#0758ad}
.card{border-color:#d8e5f4;box-shadow:0 12px 34px #072b5810}
.muted{color:#526c87}
.pill{background:#eaf4ff;color:#124874}
.attendance-photo{width:72px;height:84px;object-fit:cover;object-position:center;border-radius:10px;background:#e7eff7;border:1px solid #d0dfef;display:block}
.mobile-page{min-height:100vh;background-image:linear-gradient(150deg,#e9f3fc8c,#e9f3fc66),url('/kopkarlitan-courtyard.png');background-size:cover;background-position:center;background-attachment:fixed;color:#173758}
.mobile-header{background:#0758adf0;display:flex;align-items:center;gap:12px;box-shadow:0 8px 26px #001c4040}
.mobile-header h1{font-size:22px;letter-spacing:.06em}
.mobile-header small{font-size:12px;letter-spacing:.04em}
.brand-logo{flex:none;width:68px;height:68px;border-radius:50%;background-image:url('/kopkarlitan-reference.png');background-size:720px 405px;background-position:-322px -180px;background-repeat:no-repeat;border:3px solid white;box-shadow:0 5px 18px #06254a35}
.brand-logo.large{width:90px;height:90px;margin:0 auto 18px;background-size:960px 540px;background-position:-429px -241px}
.mobile-main{max-width:520px;margin:0 auto;padding:22px 16px 60px}
.login-card{margin:clamp(30px,10vh,110px) auto 0;padding:32px 28px;border-radius:24px;background:#fffffff2;box-shadow:0 24px 70px #001d4666;backdrop-filter:blur(12px)}
.login-card h2{font-size:28px;margin:5px 0}.login-card p{color:#55708b}
.eyebrow{font-size:12px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:#1e75bd!important}
.login-card input{background:#f5f9ff;border-color:#bad0e7;padding:14px}.full{width:100%;margin:18px 0 0;padding:15px;border-radius:13px}
.mobile-page .card{border:0;border-radius:20px;padding:22px;margin:14px 0;box-shadow:0 15px 40px #001d4640}
.welcome-card{background:linear-gradient(120deg,#0758ad,#087cbb);color:white}.welcome-card .eyebrow{color:#cbeaff!important}.welcome-card .pill{margin-top:15px}.welcome-card p{margin:5px 0}
.mobile-page .hero{font-size:28px}.mobile-page video{display:block;margin:14px auto;max-width:100%}
@media(max-width:650px){.mobile-page{background-size:cover;background-position:center;background-attachment:fixed}.mobile-header{padding:12px 16px}.login-card{margin-top:40px}.attendance-photo{width:64px;height:76px}}
body:not(.mobile-page){min-height:100vh;background:#eef5fc}
.admin-header{display:flex;align-items:center;gap:14px}
/* Admin dashboard */
html{scroll-behavior:smooth}
.dashboard-nav{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 16px;margin:0 0 18px;background:#fffffff2;border:1px solid #dce9f5;border-radius:16px;box-shadow:0 10px 30px #102b4f13;backdrop-filter:blur(10px)}
.dashboard-nav>div:first-child{display:flex;flex-wrap:wrap;gap:3px}
.dashboard-nav a{padding:10px 12px;color:#1c4e7d;text-decoration:none;font-weight:700;border-radius:10px;font-size:14px}
.dashboard-nav a:hover,.dashboard-nav a:focus{background:#e7f2ff;color:#0758ad}
.dashboard-nav button{white-space:nowrap}
.dashboard-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:28px 32px;border-radius:22px;background:linear-gradient(115deg,#063b86,#087abf);color:#fff;box-shadow:0 20px 45px #0758ad35}
.dashboard-hero h2{font-size:30px;margin:4px 0}.dashboard-hero p{margin:0;color:#d7ebff}.dashboard-hero .eyebrow{color:#aedaff!important}
.dashboard-brand{font-size:16px;font-weight:800;letter-spacing:.12em;border:1px solid #ffffff73;border-radius:999px;padding:12px 18px}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:16px 0 22px}
.stat-card{display:flex;flex-direction:column;gap:8px;min-height:145px;background:#fff;border:1px solid #dce9f5;border-radius:18px;padding:20px;box-shadow:0 9px 24px #102b4f0d}
.stat-card span{color:#446887;font-weight:650}.stat-card strong{font-size:36px;line-height:1;color:#0a56a0}.stat-card small{color:#758ba1}.stat-card.late strong{color:#d06b25}
.section-heading{display:flex;justify-content:space-between;align-items:center}.section-heading .eyebrow{margin:0 0 3px}.section-heading h2{margin:0;font-size:23px}.section-heading p{margin:7px 0 0}
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin:16px 0 8px;padding:14px;background:#f3f8fe;border-radius:14px}
.filter-bar label{margin:0;min-width:150px;flex:1}.filter-bar label:first-child{flex:2;min-width:230px}.filter-bar button{margin:0;min-height:43px}
.result-count{font-size:13px;color:#5b7690;margin:8px 0 12px}
.monitoring-card th{background:#edf5fd;color:#164d7d;white-space:nowrap}.monitoring-card td{vertical-align:middle}.monitoring-card tbody tr:hover{background:#f7fbff}.monitoring-card .attendance-photo{width:76px;height:88px}
section[id]{scroll-margin-top:95px}
@media(max-width:900px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-nav{position:static;flex-direction:column;align-items:stretch}.dashboard-brand{display:none}}
@media(max-width:600px){.stats-grid{gap:8px}.stat-card{min-height:120px;padding:14px}.stat-card strong{font-size:29px}.stat-card span{font-size:13px}.stat-card small{font-size:11px}.dashboard-hero{padding:22px}.dashboard-hero h2{font-size:24px}.dashboard-nav a{font-size:12px;padding:8px}.filter-bar label:first-child{min-width:100%}}
.attendance-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.attendance-tile{display:flex;align-items:center;gap:13px;padding:12px;background:#f2f8ff;border:1px solid #dceaf8;border-radius:15px;min-height:110px}
.tile-photo{flex:none;width:76px;height:86px;border-radius:11px;background:#dcebf9;display:grid;place-items:center;color:#51708d;text-align:center;font-size:10px;overflow:hidden}
.tile-photo img{width:100%;height:100%;object-fit:cover;display:block}
.attendance-tile>div:last-child{display:flex;flex-direction:column;gap:5px;min-width:0}
.attendance-tile span{font-size:12px;color:#51708d;font-weight:700}
.attendance-tile strong{font-size:18px;color:#0c487f}
.attendance-tile small{font-size:11px;color:#627f9a}
.camera-preview{margin:12px 0 18px;padding:12px;background:#ecf6ff;border:1px solid #c9e2f7;border-radius:14px}
.camera-preview p{margin:0 0 8px}
.camera-preview video{display:block;width:100%;max-width:330px;max-height:250px;object-fit:cover;margin:auto;border-radius:12px}
@media(max-width:550px){.attendance-tiles{grid-template-columns:1fr}.attendance-tile{min-height:100px}.tile-photo{width:72px;height:78px}}
/* Foto memenuhi bidang judul tanpa terpotong; kartu ringkasan tetap biru. */
.admin-header,.mobile-header{
  display:flex;align-items:center;gap:14px;color:#fff;
  background-image:linear-gradient(90deg,rgba(3,31,63,.78),rgba(3,39,75,.08)),url('/kopkarlitan-courtyard.png');
  background-size:100% 100%;
  background-position:center;
  background-repeat:no-repeat;
}
.admin-header{min-height:300px}
.mobile-header{min-height:170px}
.admin-header h1,.admin-header small,.mobile-header h1,.mobile-header small{text-shadow:0 2px 5px #00254f}
.dashboard-hero{background:linear-gradient(115deg,#063b86,#087abf)}
.welcome-card{background:linear-gradient(120deg,#0758ad,#087cbb)}
@media(max-width:650px){.admin-header{min-height:180px}.mobile-header{min-height:150px}}