*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top left,rgba(37,99,235,.16),transparent 32%),linear-gradient(180deg,#eef4ff,#f8fafc 42%,#f8fafc);color:#0f172a;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.65}input,select,textarea{width:100%;border:1px solid #dbe3ef;border-radius:12px;padding:11px 12px;background:#fff;color:#0f172a;outline:none}input[type=date]{min-width:160px}input:focus,select:focus,textarea:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1f}.page{max-width:1320px;margin:0 auto;padding:30px}.top-nav{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px;padding:10px;border:1px solid rgba(148,163,184,.24);border-radius:18px;background:#ffffffd1;box-shadow:0 14px 34px #0f172a0f;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.nav-tabs{display:flex;align-items:center;gap:6px}.nav-tab{border:none;border-radius:12px;background:transparent;color:#475569;padding:10px 15px;font-weight:800}.nav-tab:hover{background:#f1f5f9;color:#1e293b}.nav-tab.active{background:#2563eb;color:#fff;box-shadow:0 10px 22px #2563eb2e}.nav-session{display:flex;align-items:center;gap:10px;min-width:0}.nav-session span{overflow:hidden;color:#475569;font-size:13px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.sub-nav{display:inline-flex;align-items:center;gap:6px;margin:0 0 18px;padding:6px;border:1px solid #dbe3ef;border-radius:14px;background:#ffffffc2}.sub-tab{border:none;border-radius:10px;background:transparent;color:#475569;padding:9px 14px;font-weight:800}.sub-tab:hover{background:#f1f5f9;color:#1e293b}.sub-tab.active{background:#0f172a;color:#fff}.page-title,.empty-page{margin-bottom:18px;padding:4px 2px}.page-title h1,.empty-page h1{margin:0;font-size:30px}.empty-page{min-height:360px}.auth-page{min-height:100vh;display:grid;place-items:center;padding:24px}.auth-card{width:min(440px,100%);padding:30px;border:1px solid rgba(148,163,184,.28);border-radius:24px;background:#ffffffe0;box-shadow:0 24px 70px #0f172a1f;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.auth-card h1{margin:0;font-size:32px}.auth-card p{margin:10px 0 22px;color:#64748b;line-height:1.65}.auth-message{margin:16px 0 0}.config-snippet{overflow-x:auto;margin:0;padding:14px;border:1px solid #dbe3ef;border-radius:14px;background:#0f172a;color:#e2e8f0;font-size:13px;line-height:1.6}.hero{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:18px;padding:26px;border:1px solid rgba(148,163,184,.22);border-radius:28px;background:#ffffffc2;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 20px 55px #0f172a14}.eyebrow{margin-bottom:8px;color:#2563eb;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.hero h1{margin:0;font-size:34px}.hero p{max-width:720px;margin:8px 0 0;color:#64748b;line-height:1.65}.session-line{margin-top:10px;color:#475569;font-size:13px;font-weight:700}.hero-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.primary{border:none;border-radius:14px;background:#2563eb;color:#fff;padding:11px 16px;font-weight:800;box-shadow:0 12px 28px #2563eb38}.primary:hover{background:#1d4ed8}.ghost{border:1px solid #dbe3ef;border-radius:12px;background:#fff;color:#334155;padding:8px 11px;font-weight:700}.ghost:hover{border-color:#94a3b8;background:#f8fafc}.danger-text{color:#dc2626}.message{margin-bottom:16px;padding:12px 14px;border:1px solid #bfdbfe;border-radius:16px;background:#dbeafed1;color:#1e3a8a;font-weight:600}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:18px 0}.stat-card{padding:18px;border:1px solid #e2e8f0;border-radius:22px;background:#ffffffe0;box-shadow:0 14px 36px #0f172a0f}.stat-card span{color:#64748b;font-size:13px;font-weight:700}.stat-card strong{display:block;margin:8px 0 4px;font-size:34px;line-height:1}.stat-card p{margin:0;color:#64748b;font-size:13px}.success-card{background:linear-gradient(135deg,#ecfdf5,#fff);border-color:#bbf7d0}.visual-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:18px;margin-bottom:18px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.card{background:#ffffffeb;border:1px solid #e2e8f0;border-radius:24px;padding:20px;box-shadow:0 14px 40px #0f172a0f}.card.wide{grid-column:1 / -1}.card h2{margin:0 0 16px;font-size:20px}.card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}.card-heading h2{margin:0}.date-control{display:grid;gap:6px;min-width:180px;color:#334155;font-size:13px;font-weight:800}.form{display:grid;gap:13px}.form label{display:grid;gap:7px;color:#334155;font-size:14px;font-weight:700}.employee-create-form{grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) auto;align-items:end}.employee-create-form .primary{min-width:120px;height:44px}.device-bind-form{grid-template-columns:minmax(180px,.9fr) minmax(240px,1.2fr) minmax(180px,1fr) auto;align-items:end}.device-bind-form .primary{min-width:120px;height:44px}.collector-create-form{grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) minmax(180px,1fr) auto;align-items:end}.collector-create-form .primary{min-width:120px;height:44px}.combo-field{position:relative}.combo-menu{position:absolute;z-index:10;top:calc(100% + 6px);right:0;left:0;overflow-y:auto;max-height:260px;border:1px solid #dbe3ef;border-radius:14px;background:#fff;box-shadow:0 18px 40px #0f172a24}.combo-option{display:grid;width:100%;gap:3px;border:none;border-bottom:1px solid #eef2f7;border-radius:0;background:#fff;color:#0f172a;padding:10px 12px;text-align:left}.combo-option:hover{background:#f8fafc}.combo-option strong{font-family:JetBrains Mono,SFMono-Regular,Consolas,monospace;font-size:13px}.combo-option span,.combo-empty{color:#64748b;font-size:12px}.combo-empty{padding:12px}.warning-copy{margin:0 0 14px;color:#92400e;font-weight:700;line-height:1.6}.token-card{border-color:#fde68a;background:#fffbeb}.token-grid{display:grid;gap:12px}.token-grid>div{display:grid;gap:5px;padding:12px;border:1px solid #fde68a;border-radius:14px;background:#fff}.token-grid span{color:#64748b;font-size:12px;font-weight:800}.token-value{overflow-wrap:anywhere}.row-actions{display:flex;flex-wrap:wrap;gap:8px}.location-list{display:grid;gap:10px}.location-item{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px;border:1px solid #e2e8f0;border-radius:14px;background:#f8fafc}.location-item>div:first-child{display:grid;gap:4px;min-width:0}.location-edit-fields{display:grid;gap:10px}.location-edit-fields label{display:grid;gap:6px;color:#334155;font-size:13px;font-weight:700}.location-edit-fields textarea{min-height:84px;resize:vertical;line-height:1.5}.location-item .row-actions{flex-shrink:0;justify-content:flex-end}.location-item span{color:#2563eb;font-size:12px;font-weight:800}.location-item p{margin:0;color:#64748b;font-size:13px}.rule-grid{display:grid;gap:12px}.rule-card{display:grid;grid-template-columns:minmax(160px,1fr) repeat(3,minmax(150px,.8fr));gap:12px;align-items:end;padding:14px;border:1px solid #e2e8f0;border-radius:16px;background:#f8fafc}.rule-card>div{display:grid;gap:5px}.rule-card span{color:#64748b;font-size:13px;font-weight:700}.rule-card label{display:grid;gap:6px;color:#334155;font-size:13px;font-weight:800}.setup-wizard{border-color:#bfdbfe}.setup-mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px}.setup-mode-card{display:grid;gap:6px;padding:15px;border:1px solid #dbe3ef;border-radius:16px;background:#fff;color:#0f172a;text-align:left;box-shadow:none}.setup-mode-card:hover{border-color:#93c5fd;background:#eff6ff}.setup-mode-card.active{border-color:#2563eb;background:#eff6ff;box-shadow:0 12px 28px #2563eb1f}.setup-mode-card span,.setup-action-panel span,.setup-status-grid span{color:#2563eb;font-size:12px;font-weight:900;text-transform:uppercase}.setup-mode-card strong{font-size:17px}.setup-mode-card small{color:#64748b;font-size:13px;line-height:1.45}.setup-status-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}.setup-status-grid>div{display:grid;gap:5px;min-width:0;padding:12px;border:1px solid #e2e8f0;border-radius:14px;background:#f8fafc}.setup-status-grid strong{overflow:hidden;color:#0f172a;font-size:14px;text-overflow:ellipsis;white-space:nowrap}.setup-action-panel,.setup-config-panel{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;padding:16px;border:1px solid #e2e8f0;border-radius:16px;background:#f8fafc}.setup-action-panel h3,.setup-config-panel h3{margin:4px 0;font-size:17px}.setup-action-panel p{margin:0;color:#64748b;font-size:13px;line-height:1.55}.setup-config-panel{display:grid}.setup-config-panel .card-heading{margin-bottom:0}.setup-footer-actions{display:flex;justify-content:flex-end}.notice-list{display:grid;gap:8px;margin-bottom:16px;padding:12px 14px;border:1px solid #bfdbfe;border-radius:14px;background:#eff6ff}.notice-list p{margin:0;color:#1e3a8a;font-size:13px;font-weight:700}.wizard-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.wizard-step{display:grid;align-content:start;gap:10px;padding:16px;border:1px solid #e2e8f0;border-radius:16px;background:#f8fafc}.wizard-step span{color:#2563eb;font-size:12px;font-weight:900;text-transform:uppercase}.wizard-step h3{margin:0;font-size:17px}.wizard-step p{margin:0;color:#64748b;font-size:13px;line-height:1.55}.wide-step{grid-column:span 3}.setup-config-form{grid-template-columns:repeat(3,minmax(0,1fr))}.compact-token-grid{margin-top:12px}.setup-message{margin:16px 0 0}.serial-log-panel{display:grid;gap:10px;margin-top:16px;padding:14px;border:1px solid #cbd5e1;border-radius:16px;background:#f8fafc}.serial-log-panel h3{margin:0;font-size:17px}.serial-log-panel p{margin:0;color:#64748b;font-size:13px;line-height:1.55}.serial-log{overflow:auto;max-height:320px;margin:0;padding:14px;border:1px solid #1e293b;border-radius:14px;background:#020617;color:#dbeafe;font-size:12px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}.hint{margin-top:-6px;color:#64748b}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:960px}.attendance-table{min-width:1380px}.link-button{border:none;border-radius:0;background:transparent;color:#2563eb;padding:0;font-weight:900;text-align:left;box-shadow:none}.link-button:hover{color:#1d4ed8;text-decoration:underline}th,td{border-bottom:1px solid #e2e8f0;padding:13px 10px;text-align:left;vertical-align:middle}th{color:#475569;font-size:13px;background:#f8fafc}td{font-size:14px}.mono{font-family:JetBrains Mono,SFMono-Regular,Consolas,monospace}.subtext{margin-top:4px;color:#64748b;font-size:12px}.badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:800;white-space:nowrap}.badge.success{background:#dcfce7;color:#166534}.badge.warning{background:#fef3c7;color:#92400e}.badge.danger{background:#fee2e2;color:#991b1b}.badge.muted{background:#f1f5f9;color:#475569}.confidence{display:flex;align-items:center;gap:8px}.confidence-bar{width:86px;height:8px;overflow:hidden;border-radius:999px;background:#e2e8f0}.confidence-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#60a5fa,#2563eb)}.detail-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:16px}.detail-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);gap:16px;margin-bottom:16px}.detail-panel{display:grid;gap:12px;min-width:0;padding:14px;border:1px solid #e2e8f0;border-radius:16px;background:#f8fafc}.detail-panel h3{margin:0;font-size:16px}.daily-bars{display:grid;grid-template-columns:repeat(auto-fit,minmax(24px,1fr));align-items:end;gap:6px;min-height:180px}.daily-bar{display:grid;grid-template-rows:1fr auto;align-items:end;gap:6px;min-width:24px;height:180px;border:1px solid #dbe3ef;border-radius:10px;background:#fff;padding:6px 4px;color:#64748b}.daily-bar:hover,.daily-bar.active{border-color:#2563eb;background:#eff6ff}.daily-bar span{display:block;width:100%;min-height:4px;border-radius:8px 8px 3px 3px;background:#2563eb}.daily-bar small{font-size:10px;font-weight:800;text-align:center}.location-distribution{display:grid;gap:12px}.location-distribution>div{display:grid;gap:7px}.location-distribution>div>div:first-child{display:flex;justify-content:space-between;gap:10px;color:#334155;font-size:13px}.daily-records{margin-top:4px}.segment-row td{background:#f8fafc}.segments-list{display:grid;gap:10px}.segment-card{display:grid;gap:8px;padding:10px 12px;border:1px solid #e2e8f0;border-radius:12px;background:#fff;min-width:0}.segment-card-header{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}.segment-card strong{color:#0f172a}.segment-card-header span,.segment-card-range,.segment-card-meta span{color:#475569;font-size:13px;overflow-wrap:anywhere}.segment-card-range{font-weight:600;color:#334155}.segment-card-meta{display:flex;flex-wrap:wrap;gap:8px 12px}.segment-card-meta span{min-width:0}.expanded-segment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.expanded-segment-panel{display:grid;gap:10px}.expanded-segment-panel h4{margin:0;font-size:14px;color:#334155}.mini-chart{display:grid;gap:14px}.mini-chart>div{display:grid;grid-template-columns:90px 1fr 38px;align-items:center;gap:12px}.mini-chart label{color:#475569;font-size:13px;font-weight:800}.bar-track{height:12px;overflow:hidden;border-radius:999px;background:#e2e8f0}.bar{height:100%;border-radius:999px}.bar.success{background:#22c55e}.bar.warning{background:#f59e0b}.bar.muted{background:#94a3b8}.donut-row{display:flex;align-items:center;gap:22px}.donut{width:118px;height:118px;display:grid;place-items:center;border-radius:999px;background:radial-gradient(circle,white 54%,transparent 55%),conic-gradient(#22c55e,#22c55e 220deg,#f59e0b 220deg,#f59e0b 310deg,#cbd5e1 310deg);box-shadow:inset 0 0 0 1px #e2e8f0}.donut span{font-size:30px;font-weight:900}.legend{display:grid;gap:8px}.legend p{display:flex;align-items:center;gap:8px;margin:0;color:#475569;font-size:14px}.dot{width:10px;height:10px;border-radius:99px}.success-dot{background:#22c55e}.warning-dot{background:#f59e0b}.muted-dot{background:#94a3b8}.employee-list{display:grid;gap:12px}.employee-card{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:16px;border:1px solid #e2e8f0;border-radius:18px;background:#f8fafc}.employee-card h3{margin:0;font-size:18px}.employee-card p{margin:4px 0 10px;color:#64748b}.device-pills{display:flex;flex-wrap:wrap;gap:8px}.device-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid #dbe3ef;border-radius:999px;background:#fff;padding:6px 7px 6px 10px;font-size:12px;font-weight:700}.device-pill button{border:none;border-radius:999px;background:#fee2e2;color:#991b1b;padding:4px 7px;font-size:12px;font-weight:800}@media (max-width: 980px){.page{padding:18px}.hero{align-items:flex-start;flex-direction:column}.top-nav,.hero-actions,.card-heading{width:100%;flex-direction:column;align-items:stretch}.nav-tabs{width:100%}.nav-tab{flex:1}.nav-session{width:100%;justify-content:space-between}.sub-nav{display:flex;width:100%}.sub-tab{flex:1}.hero-actions button,.date-control{width:100%}.stats,.visual-grid,.grid,.setup-mode-grid,.setup-status-grid,.rule-card,.wizard-steps,.setup-config-form,.detail-stats,.detail-grid,.expanded-segment-grid{grid-template-columns:1fr}.wide-step{grid-column:auto}.employee-create-form,.device-bind-form,.collector-create-form{grid-template-columns:1fr}.collector-create-form .primary,.device-bind-form .primary,.employee-create-form .primary{width:100%}.setup-action-panel{align-items:stretch;flex-direction:column}.setup-footer-actions{justify-content:stretch}.setup-footer-actions button{width:100%}.employee-card{flex-direction:column}}