*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f3f6fa;color:#172033}.topbar{background:#0b1f3a;color:#fff;min-height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;gap:15px}.brand{font-size:22px;font-weight:800}.brand span{font-size:14px;font-weight:400;opacity:.8}.topbar nav{display:flex;gap:8px;flex-wrap:wrap}.topbar a{color:#fff;text-decoration:none;padding:9px 11px;border-radius:8px}.topbar a:hover{background:#173b68}.container{max-width:1200px;margin:25px auto;padding:0 16px}.card{background:#fff;border-radius:16px;padding:20px;box-shadow:0 5px 20px #17203314;margin-bottom:18px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.stat{padding:22px;border-radius:14px;background:#fff;box-shadow:0 5px 20px #17203312}.stat b{font-size:30px;display:block;margin-top:8px}.btn{border:0;border-radius:9px;padding:11px 16px;background:#0d6efd;color:#fff;text-decoration:none;cursor:pointer;display:inline-block}.btn.green{background:#16a34a}.btn.red{background:#dc2626}.btn.gray{background:#64748b}.btn.yellow{background:#d89b00}.btn:disabled{opacity:.5;cursor:not-allowed}.input,select{width:100%;padding:11px;border:1px solid #cbd5e1;border-radius:9px;background:#fff}.label{display:block;font-weight:700;margin:0 0 6px}.row{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin-bottom:15px}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:10px;border-bottom:1px solid #e2e8f0;text-align:left;white-space:nowrap}.table th{background:#f8fafc}.photo{width:60px;height:60px;border-radius:50%;object-fit:cover}.photo.big{width:150px;height:150px}.center{text-align:center}.clock{font-size:48px;font-weight:800}.muted{color:#64748b}.alert{padding:12px;border-radius:10px;background:#fee2e2;color:#991b1b;margin-bottom:15px}.ok{padding:12px;border-radius:10px;background:#dcfce7;color:#166534;margin-bottom:15px}.footer{text-align:center;padding:30px;color:#64748b}.camera{width:100%;max-width:520px;background:#111;border-radius:15px;overflow:hidden;margin:auto}.camera video{width:100%;display:block}.camera canvas{display:none}.preview{width:130px;height:130px;border-radius:50%;object-fit:cover;border:4px solid #e2e8f0}.login{max-width:420px;margin:70px auto}.badge{padding:5px 9px;border-radius:20px;font-size:12px;background:#e2e8f0}.inside{background:#dcfce7;color:#166534}.outside{background:#fee2e2;color:#991b1b}@media(max-width:800px){.grid,.grid2,.row{grid-template-columns:1fr}.topbar{align-items:flex-start;flex-direction:column;padding:15px}.clock{font-size:36px}}
@media print{.topbar,.no-print,.footer{display:none!important}.container{margin:0;max-width:none}.card{box-shadow:none}}