:root{--navy:#0b365f;--blue:#176ab5;--bg:#f3f6fa;--text:#16283d;--muted:#6e7d8e;--line:#dce4ed;--green:#15906a}*{box-sizing:border-box}body{margin:0;font-family:Inter,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text)}button,input,select{font:inherit}.shell{min-height:100vh;display:grid;grid-template-columns:250px 1fr}.shell aside{background:linear-gradient(180deg,#082947,var(--navy));color:#fff;padding:25px 18px;display:flex;flex-direction:column}.brand{display:flex;gap:11px;align-items:center}.logo{width:43px;height:43px;border-radius:12px;background:#fff;color:var(--navy);display:grid;place-items:center;font-weight:900}.brand span b,.brand span small,.profile b,.profile small{display:block}.brand small,.profile small{color:#acc4da;font-size:11px}.shell nav{display:grid;gap:6px;margin-top:35px}.shell nav a{color:#c8d9e9;text-decoration:none;padding:12px;border-radius:9px}.shell nav a.active,.shell nav a:hover{background:#ffffff18;color:#fff}.profile{margin-top:auto;border-top:1px solid #ffffff20;padding-top:16px}.profile a{display:inline-block;margin-top:12px;color:#fff;font-size:12px}.shell main header,.simple header{height:88px;background:#fff;border-bottom:1px solid var(--line);padding:17px 30px;display:flex;align-items:center;justify-content:space-between}.shell h1,.simple h1{font-size:22px;margin:0}.shell header p,.simple header p{margin:5px 0 0;color:var(--muted);font-size:12px}.private{background:#eaf7f2;color:var(--green);border-radius:50px;padding:8px 11px;font-size:12px}.content{padding:27px 30px}.attendance-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:22px}.panel,.stats article,.table-wrap{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 30px #173c6610;padding:22px}.panel label,.login-card label{font-size:11px;letter-spacing:.1em;color:var(--blue);font-weight:800}.panel h2{font-size:21px;margin:6px 0 17px}.camera{height:340px;background:#071722;border-radius:14px;position:relative;overflow:hidden;display:grid;place-items:center}.camera video{width:100%;height:100%;object-fit:cover}.camera #placeholder{position:absolute;text-align:center;color:#d5e5f1}.camera #placeholder i,.camera #placeholder b,.camera #placeholder small{display:block}.camera #placeholder i{font-style:normal;font-size:70px}.camera #placeholder small{color:#849bad}.oval{position:absolute;width:185px;height:235px;border:2px solid #64c5ff;border-radius:45%;opacity:0}.scan{position:absolute;width:180px;height:2px;background:#64c5ff;opacity:0}.camera.live .oval,.camera.live .scan{opacity:1}.camera.live .scan{animation:scan 2s infinite}@keyframes scan{0%,100%{transform:translateY(-85px)}50%{transform:translateY(85px)}}#cameraStatus{position:absolute;bottom:12px;background:#071722cc;color:#d7e7f3;padding:7px 11px;border-radius:50px;font-size:11px}.panel>button,.login-card button,.modal button,.filter button{width:100%;border:0;background:linear-gradient(135deg,#1675c8,#174d8d);color:#fff;border-radius:9px;padding:12px;font-weight:700;margin-top:12px}.panel>button:disabled{opacity:.5}.note{text-align:center;color:var(--muted);font-size:11px}.shift{display:grid;gap:13px}.clock{background:linear-gradient(135deg,#082947,var(--navy));color:#fff;border-radius:13px;padding:18px;text-align:center}.clock small,.clock b{display:block}.clock small{color:#aac5dd;font-size:10px}.clock b{font-size:30px;margin:5px}.shift-card,.attendance-state{border:1px solid var(--line);border-radius:13px;padding:17px}.shift-card>div:first-child{display:flex;justify-content:space-between}.shift-card strong{display:block;margin-top:5px}.shift-card em{background:#e9f4ff;color:var(--blue);font-style:normal;padding:8px;border-radius:8px;height:max-content}.shift-card dl{margin:0}.shift-card dl div{display:flex;justify-content:space-between;padding:5px 0;font-size:12px}.shift-card dt{color:var(--muted)}.shift-card dd{font-weight:700}.attendance-state p{display:flex;gap:10px}.attendance-state i{width:28px;height:28px;border-radius:50%;background:#e4f7ef;color:var(--green);display:grid;place-items:center;font-style:normal}.attendance-state i.pending{background:#edf1f4;color:#8a97a3}.attendance-state small,.attendance-state b{display:block}.attendance-state small{font-size:10px;color:var(--muted)}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:20px}.stats article small,.stats article b{display:block}.stats article small{color:var(--muted);font-size:11px}.stats article b{font-size:20px;margin-top:7px}.login-bg{min-height:100vh;display:grid;place-items:center;background:linear-gradient(145deg,#071f36,#0b4f85)}.login-card{width:min(420px,92%);background:#fff;border-radius:18px;padding:30px;box-shadow:0 30px 80px #0005}.login-card .logo{background:var(--navy);color:#fff}.login-card h1{margin-bottom:5px}.login-card p,.login-card>small{color:var(--muted)}.login-card label{display:block;margin:15px 0 5px}.login-card input{width:100%;border:1px solid var(--line);border-radius:9px;padding:11px}.alert,.success{padding:10px;border-radius:8px;font-size:12px}.alert{background:#ffeaea;color:#a4373f}.success{background:#e5f7ef;color:#126c51}.simple{padding-bottom:30px}.simple header a{color:var(--blue)}.filter{display:flex;gap:10px;margin:22px 30px}.filter input,.filter select{border:1px solid var(--line);border-radius:8px;padding:9px}.filter button{width:auto;margin:0}.table-wrap{margin:0 30px;padding:0;overflow:auto}table{width:100%;border-collapse:collapse;white-space:nowrap}th,td{text-align:left;padding:12px 15px;border-bottom:1px solid #e7edf3;font-size:12px}th{background:#f7f9fb;color:#657789;font-size:10px}.badge{background:#edf3f8;border-radius:50px;padding:5px 8px}.modal{display:none;position:fixed;inset:0;background:#061827bb;place-items:center}.modal.open{display:grid}.modal>div{background:#fff;border-radius:18px;padding:28px;text-align:center;width:min(380px,92%)}.modal>div>i{font-style:normal;width:65px;height:65px;border-radius:50%;display:grid;place-items:center;margin:auto;background:#e3f8ef;color:var(--green);font-size:30px}
@media(max-width:800px){.shell{display:block}.shell aside{height:auto}.shell nav{grid-template-columns:repeat(3,1fr);margin-top:15px}.profile{margin-top:15px}.attendance-grid,.stats{grid-template-columns:1fr}.content{padding:18px 13px}.camera{height:300px}.simple header{padding:15px}.filter{margin:15px;flex-wrap:wrap}.table-wrap{margin:0 15px}}@media print{.shell aside,.shell header,.filter{display:none}.shell{display:block}.table-wrap{margin:0;box-shadow:none}}