:root{--forest:#07594b;--forest-2:#0d7a65;--forest-3:#e5f7f2;--lime:#b9df54;--amber:#ffb52e;--coral:#ff6b58;--violet:#7057d9;--ink:#14231e;--muted:#65756e;--line:#dfe9e4;--canvas:#f3f8f6;--danger:#c7443b;--blue:#3978c5;--shadow:0 18px 55px rgba(7,89,75,.12)}
.login-screen{background:radial-gradient(circle at 12% 15%,#ffbe3d33,transparent 28%),radial-gradient(circle at 44% 84%,#64d6b52b,transparent 30%),linear-gradient(120deg,#064a3e 0 49%,#f3f8f6 49%)}
.login-brand,.side-brand,.camera-panel{overflow:hidden}.login-brand img,.side-brand img,.camera-panel img{transform:scale(1.7)}
.login-card{border:1px solid #fff;border-radius:30px;padding:34px;box-shadow:0 30px 80px #063a2e35}
.sidebar{background:linear-gradient(180deg,#064d41,#04362e)}
.page-content{background:radial-gradient(circle at 100% 0,#ffb52e12,transparent 28%)}
.hero-strip{background:linear-gradient(115deg,#076957,#0c8a72 55%,#2e9b75);border-radius:24px;padding:26px 28px;box-shadow:0 15px 36px #0d7a6528}
.metric-card{background:linear-gradient(145deg,#fff,#f7fffc);border-radius:20px;padding:19px;box-shadow:0 8px 25px #07594b0b}.metric-card:nth-child(2){background:linear-gradient(145deg,#fff9e8,#fff)}.metric-card:nth-child(3){background:linear-gradient(145deg,#fff0ed,#fff)}.metric-card:nth-child(4){background:linear-gradient(145deg,#f1efff,#fff)}
.metric-card.warning .metric-icon{background:#ffe9e4;color:var(--coral)}.metric-card.blue .metric-icon{background:#eeeaff;color:var(--violet)}
.panel,.settings-card,.report-card,.shift-card{border-radius:21px;box-shadow:0 10px 32px #07594b0a}
.employee-card{background:linear-gradient(160deg,#fff 72%,#effaf6);border-radius:20px;padding:18px;box-shadow:0 10px 30px #07594b0a;transition:.2s}.employee-card:hover{transform:translateY(-2px);box-shadow:0 16px 36px #07594b16}
.staff-banner{background:linear-gradient(120deg,#076957,#0d8d73 65%,#50a864);box-shadow:0 15px 36px #0d7a6528}
.button.primary{background:linear-gradient(135deg,#076957,#0d856d);box-shadow:0 7px 18px #07594b25}.button.primary:hover{background:linear-gradient(135deg,#054c40,#08715e)}
.property-badge{background:linear-gradient(135deg,#ffbd39,#ff8a37)}
.nav-item.active span{background:linear-gradient(135deg,#ffbd39,#ff8a37)}
.camera-panel{background:radial-gradient(circle at 50% 15%,#39a985,#075044 70%)}
@media(max-width:760px){.login-screen{background:radial-gradient(circle at 95% 0,#ffb52e25,transparent 35%),var(--canvas)}.login-card{padding:24px 20px}.hero-strip{padding:20px}.page-content{background:radial-gradient(circle at 100% 0,#ffb52e10,transparent 22%)}}
.login-brand,.side-brand,.camera-panel{overflow:visible}.login-brand img,.side-brand img,.camera-panel img{transform:none!important;background:transparent!important;border-radius:0!important;object-fit:contain}.login-brand img{width:104px;height:66px;margin:-8px -18px -8px -15px}.side-brand img{width:104px;height:62px;margin:-8px -22px -8px -18px}.camera-panel img{width:150px;height:92px}
.filter-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px}.filter-bar .filter-pill{border:1px solid var(--line);background:#fff;border-radius:99px;padding:9px 14px;font-size:.78rem;font-weight:800;color:var(--muted)}.filter-bar .filter-pill.active{background:var(--forest);color:#fff;border-color:var(--forest)}.filter-bar input{width:auto;padding:9px 11px;border:1px solid var(--line);border-radius:11px}.duration-live{font-variant-numeric:tabular-nums;color:var(--forest);font-weight:900}.camera-live{width:100%;max-height:330px;object-fit:cover;border-radius:16px;background:#071a14;transform:scaleX(-1)}.selfie-preview{width:100%;border-radius:16px}.geo-alert{padding:11px 13px;border-radius:12px;background:#fff3d8;color:#8b5b09;font-size:.78rem;font-weight:800}.note-box{margin-top:10px;padding:11px 13px;border-radius:12px;background:#f3f7f5;color:#44524b;font-size:.78rem}.detail-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}.detail-summary div{background:#f4f8f6;border-radius:13px;padding:12px}.detail-summary span{display:block;font-size:.68rem;color:var(--muted)}.detail-summary b{display:block;margin-top:4px}.working-strip{display:grid;gap:8px;margin-top:15px}.working-person{display:flex;justify-content:space-between;align-items:center;padding:11px 13px;border:1px solid #ffffff24;background:#ffffff0d;border-radius:13px}.working-person small{color:#c5d8cf}.working-person .duration-live{color:#fff}
@media(max-width:760px){.filter-bar{overflow:auto;flex-wrap:nowrap;padding-bottom:5px}.filter-bar input{min-width:145px}.detail-summary{grid-template-columns:1fr 1fr}.side-brand img{width:80px}.camera-live{max-height:280px}}
.live-working-panel{margin:18px 0;border:1px solid #a8dfc9;background:linear-gradient(135deg,#effbf6,#fff)}.working-person{display:grid;grid-template-columns:auto 1fr auto;gap:12px}.live-selfie-thumb{width:48px;height:48px;border-radius:14px;object-fit:cover;transform:scaleX(-1);border:2px solid #fff}.live-worker-copy,.live-worker-time{display:grid}.live-worker-copy small,.live-worker-time span{font-size:.72rem}.live-worker-time{text-align:right}.camera-panel.has-selfie{display:block}.active-selfie{width:100%!important;height:100%!important;position:absolute;inset:0;object-fit:cover!important;transform:scaleX(-1)!important;border-radius:20px!important}.selfie-proof{position:absolute;top:15px;left:15px;z-index:2;background:#0b392dcf;color:#fff;padding:7px 10px;border-radius:99px;font-size:.67rem;font-weight:900;letter-spacing:.08em}.camera-panel.has-selfie:after{display:none}@media(max-width:760px){.working-person{grid-template-columns:auto 1fr}.live-worker-time{grid-column:2;text-align:left}.active-selfie{min-height:240px}.live-working-panel{margin-top:14px}}
.selfie-proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.selfie-proof-grid>div{display:grid;gap:9px}.selfie-proof-grid img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:16px;transform:scaleX(-1);background:#edf3f0}@media(max-width:560px){.selfie-proof-grid{grid-template-columns:1fr}}