:root{
  --bg:#eef3f9;--card:#ffffff;--text:#0f172a;--muted:#64748b;--primary:#2563eb;--primary-2:#1d4ed8;
  --success:#16a34a;--danger:#dc2626;--warning:#d97706;--nav:#0b1220;--border:#dbe3ef;--soft:#f8fbff
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:Arial,Helvetica,sans-serif;margin:0;background:linear-gradient(180deg,#f7fbff 0%,#eef3f9 100%);color:var(--text);font-size:16px;line-height:1.45}
a{color:inherit}
.container{max-width:1280px;margin:0 auto;padding:20px}
.card{background:var(--card);border-radius:24px;padding:20px;box-shadow:0 12px 30px rgba(15,23,42,.07);margin-bottom:18px;border:1px solid rgba(219,227,239,.9)}
.hero{display:flex;justify-content:space-between;gap:18px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 18px;min-height:50px;border:none;border-radius:16px;background:var(--primary);color:#fff;text-decoration:none;cursor:pointer;font-weight:700;font-size:16px;box-shadow:0 6px 18px rgba(37,99,235,.18)}
.btn:hover{background:var(--primary-2)}
.btn.secondary{background:#64748b}
.btn.success{background:var(--success)}
.btn.danger{background:var(--danger)}
.btn.warn{background:var(--warning)}
.btn-block{width:100%;text-align:center}
input,select,textarea{width:100%;padding:14px 14px;border:1px solid #cfd8e3;border-radius:16px;background:#fff;outline:none;font-size:16px}
input:focus,select:focus,textarea:focus{border-color:#93c5fd;box-shadow:0 0 0 4px rgba(37,99,235,.12)}
label{display:block;font-weight:700;margin:10px 0 8px}
.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
table{width:100%;border-collapse:separate;border-spacing:0}
th,td{padding:14px 12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
th{font-size:12px;color:#475569;text-transform:uppercase;letter-spacing:.06em;background:#f8fbff}
tr:hover td{background:#fcfdff}
.badge{padding:5px 10px;border-radius:999px;font-size:12px;font-weight:700;display:inline-block}
.ok{background:#dcfce7;color:#166534}.bad{background:#fee2e2;color:#991b1b}.muted{background:#e5e7eb;color:#374151}
.topnav{background:rgba(11,18,32,.96);color:#fff;padding:12px 16px;position:sticky;top:0;z-index:20;box-shadow:0 10px 22px rgba(0,0,0,.18);backdrop-filter:blur(10px)}
.topnav .nav-wrap{max-width:1280px;margin:0 auto;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.topnav .nav-links{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.topnav a{color:#fff;text-decoration:none;font-weight:700;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.06)}
.topnav a:hover{background:rgba(255,255,255,.12)}
.notice{padding:12px 14px;border-radius:14px;margin:12px 0;background:#eff6ff;color:#1d4ed8}
.warning{background:#fff7ed;color:#c2410c}.danger-box{background:#fef2f2;color:#b91c1c}
.center{max-width:540px;margin:40px auto}.small{font-size:13px;color:var(--muted)}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.mt-12{margin-top:12px}
.print-card{border:1px dashed #bbb;padding:12px;border-radius:12px;margin-bottom:12px;page-break-inside:avoid;background:#fff}
.code{font-size:24px;font-weight:800;letter-spacing:1px}.name{font-size:17px;font-weight:700;margin-top:4px}
.barcode-wrap svg{max-width:100%;height:auto;display:block;margin-top:10px}
.reader-box{background:#0b1220;border-radius:24px;padding:14px;min-height:320px;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.reader-box video{width:100%;max-width:520px;border-radius:18px;background:#000}
.stat-box{display:flex;flex-direction:column;gap:6px;align-items:flex-start;justify-content:center;min-height:120px}
.stat-box strong{font-size:36px;line-height:1}.stat-box span{font-size:14px;color:var(--muted)}
.pill{background:#f8fafc;border:1px solid var(--border);padding:12px 14px;border-radius:16px;font-weight:700}
.pill.success{background:#f0fdf4;color:#166534}.pill.warning{background:#fff7ed;color:#9a3412}.pill.danger{background:#fef2f2;color:#991b1b}
.quick-link{display:block;padding:16px;border-radius:18px;background:#f8fafc;border:1px solid var(--border);text-decoration:none;font-weight:700;min-height:76px}
.quick-link:hover{background:#eef2ff}
.table-scroll{overflow:auto;border-radius:18px;border:1px solid var(--border);background:#fff}
.device-hero{align-items:flex-end}
.device-actions{min-width:320px}
.check-grid{gap:12px}
.check-item{display:flex;align-items:flex-start;gap:10px;padding:14px;border:1px solid var(--border);border-radius:16px;background:#fbfcfe}
.check-item input[type=checkbox], .check-item input[type=radio]{width:24px;height:24px;accent-color:var(--danger);margin-top:4px}
.print-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card-card{margin:0}
.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle at top,#dbeafe 0%,#eff6ff 35%,#eef3f9 100%)}
.login-card{width:min(100%,520px);background:#fff;border-radius:30px;padding:28px;box-shadow:0 20px 50px rgba(15,23,42,.12);border:1px solid #dbe3ef}
.brand-mark{width:72px;height:72px;border-radius:22px;background:linear-gradient(135deg,#2563eb,#1d4ed8);display:flex;align-items:center;justify-content:center;color:#fff;font-size:28px;font-weight:800;box-shadow:0 14px 30px rgba(37,99,235,.28);margin-bottom:16px}
.login-card h1{font-size:34px;line-height:1.1;margin:0 0 8px}
.login-card .btn{min-height:56px;font-size:18px}
.stats-grid .card{margin-bottom:0}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.tab-link{padding:12px 16px;border-radius:16px;background:#f8fbff;border:1px solid var(--border);font-weight:700;text-decoration:none}
.tab-link.active{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}
.device-page .card{border-radius:26px}
.device-page .btn{min-height:58px;font-size:18px;padding:16px 18px}
.device-page input, .device-page select, .device-page textarea{font-size:17px;padding:15px}
.device-page .code{font-size:26px}
.device-page .name{font-size:18px}
.scan-form{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
.scan-highlight{padding:16px;border-radius:18px;background:#eff6ff;border:1px solid #bfdbfe}
.attendance-list .row-title{font-weight:800;font-size:18px}
.attendance-list .row-sub{font-size:13px;color:var(--muted);margin-top:4px}
.big-status{font-size:15px;font-weight:800;padding:7px 12px;border-radius:999px;display:inline-block}
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.filter-bar > *{flex:1 1 180px}
.table-scroll table td:first-child, .table-scroll table th:first-child{padding-left:16px}
.table-scroll table td:last-child, .table-scroll table th:last-child{padding-right:16px}
.no-print{}
@media (max-width:900px){
  .container{padding:16px}
  .hero{flex-direction:column;align-items:stretch}
  .device-actions{min-width:0}
  .scan-form{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:15px}
  .container{padding:12px}
  .card{padding:16px;border-radius:20px}
  .login-card{padding:22px;border-radius:24px}
  .login-card h1{font-size:28px}
  .topnav a{padding:9px 12px}
  .stat-box strong{font-size:30px}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .print-grid{grid-template-columns:1fr}
}
@media print{
  .no-print,.topnav{display:none!important}
  body{background:#fff}
  .container{max-width:none;padding:0}
  .card{box-shadow:none;border:none}
}

body.device-dark{background:linear-gradient(180deg,#0b1220 0%,#111827 100%);color:#e5edf7}
body.device-dark .topnav{background:rgba(2,6,23,.98)}
body.device-dark .card{background:#0f172a;border-color:#1f2d44;box-shadow:0 14px 32px rgba(0,0,0,.35)}
body.device-dark .small{color:#9fb0c9}
body.device-dark input,body.device-dark select,body.device-dark textarea{background:#0b1220;color:#e5edf7;border-color:#334155}
body.device-dark input::placeholder,body.device-dark textarea::placeholder{color:#7b8ba5}
body.device-dark label,body.device-dark h1,body.device-dark h2,body.device-dark h3,body.device-dark strong{color:#f8fbff}
body.device-dark .pill{background:#0b1220;border-color:#334155;color:#dbeafe}
body.device-dark .scan-highlight{background:#082f49;border-color:#0ea5e9;color:#e0f2fe}
body.device-dark .table-scroll{background:#0b1220;border-color:#22314b}
body.device-dark th{background:#111c31;color:#9fb0c9}
body.device-dark td{border-bottom-color:#20304a}
body.device-dark tr:hover td{background:#111827}
body.device-dark .check-item{background:#111827;border-color:#24344d}
body.device-dark .notice{background:#0f2a43;color:#cfe8ff}
body.device-dark .warning{background:#3f2a10;color:#ffddb0}
body.device-dark .danger-box{background:#3b1212;color:#fecaca}