:root{--ink: #18223b;--muted: #6d7890;--line: #e9edf4;--blue: #397cf3;--pale: #f5f8fc }*{box-sizing:border-box}body{margin:0;background:#f6f8fc;color:var(--ink);font-family:DM Sans,sans-serif}h1,h2,h3,p{margin:0}button{cursor:pointer}.sidebar{position:fixed;width:256px;inset:0 auto 0 0;background:#101b33;color:#d9e2f1;padding:26px 16px;display:flex;flex-direction:column;z-index:3;overflow-x:auto}.brand{height:52px;padding:0 12px;display:flex;align-items:center;gap:10px;font-family:Manrope;font-size:19px;font-weight:600;color:#fff}.brand b{font-weight:500;color:#81aaf9;font-size:12px;letter-spacing:1.3px}.brand-mark{display:grid;place-items:center;width:31px;height:31px;background:#3d82fa;border-radius:9px;font-family:Georgia;font-size:25px;font-weight:700}.company-switch{margin:25px 4px 31px;padding:11px;display:flex;align-items:center;gap:10px;border:1px solid #31415e;border-radius:10px;background:#17243e;font-size:13px;color:#fff;cursor:pointer}.company-switch small,.user-card small{display:block;color:#8090a9;font-size:9px;letter-spacing:.7px;margin-bottom:3px}.company-icon{background:#ffcc61;color:#5b4311;width:29px;height:29px;display:grid;place-items:center;border-radius:7px;font-weight:700}.chevron{margin-left:auto;color:#8d9cb4;font-size:17px}nav{display:grid;gap:5px}nav a{color:#9eacc3;text-decoration:none;padding:11px 13px;border-radius:8px;font-size:14px;display:flex;align-items:center;gap:13px;cursor:pointer}nav a i{font-style:normal;width:16px;text-align:center;font-size:17px}nav a.active{background:#273e68;color:#fff;font-weight:600}nav a:hover{background:#1a2a49;color:#fff}.count{margin-left:auto;background:#314262;color:#d3def2;border-radius:10px;padding:1px 7px;font-size:11px}.online-dot{margin-left:auto;width:7px;height:7px;border-radius:50%;background:#48c98d}.nav-label{color:#65758f;font-size:10px;letter-spacing:1.4px;margin:31px 13px 9px}.user-card-wrapper{position:relative;margin:auto 3px 0}.user-card{padding:12px 10px;border-top:1px solid #283855;display:flex;gap:10px;align-items:center;font-size:12px;border-radius:10px;cursor:pointer;transition:background .15s}.user-card:hover,.user-card.active{background:#162442}.user-meta{flex:1;min-width:0}.user-card strong{color:#f1f4fb;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-menu-btn{margin-left:auto;color:#9aa8be;background:transparent;border:0;font-size:18px;padding:4px 6px;border-radius:6px;transition:all .15s;line-height:1}.user-menu-btn:hover,.user-card.active .user-menu-btn{color:#fff;background:#24365d}.avatar,.person{display:grid;place-items:center;border-radius:50%;font-weight:700}.avatar{height:32px;width:32px;background:linear-gradient(135deg,#e39b7b,#c77555);color:#fff;font-size:11px;letter-spacing:.5px;flex-shrink:0;box-shadow:0 2px 6px #00000040}.avatar.lg{height:40px;width:40px;font-size:13px}.avatar.sm{height:28px;width:28px;font-size:10px}.user-dropdown-menu{position:absolute;bottom:calc(100% + 10px);left:0;right:0;background:#152342;border:1px solid #2c3f68;border-radius:12px;padding:12px;box-shadow:0 14px 36px #080f218c;z-index:20;animation:popUserMenu .18s cubic-bezier(.16,1,.3,1)}@keyframes popUserMenu{0%{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}.user-dropdown-header{display:flex;gap:11px;align-items:center;padding:2px 2px 8px}.user-dropdown-info strong{color:#fff;font-size:13px;display:block}.user-dropdown-info small{color:#8ea0be;font-size:10px;display:block;margin-top:2px}.user-status-badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;color:#4ade80;font-weight:600;margin-top:4px}.user-status-badge .dot{width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 6px #4ade80}.user-dropdown-divider{height:1px;background:#24375e;margin:8px 0}.user-dropdown-nav{display:grid;gap:3px}.user-dropdown-nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:#c0d0eb;text-decoration:none;font-size:12px;font-weight:500;transition:background .15s,color .15s}.user-dropdown-nav a i{font-style:normal;font-size:14px;width:16px;text-align:center;color:#7e94bc}.user-dropdown-nav a:hover{background:#223661;color:#fff}.user-dropdown-logout{width:100%;display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:8px;background:#351a24;color:#f87171;border:1px solid #572233;font:600 12px DM Sans,sans-serif;cursor:pointer;transition:all .15s;margin-top:2px}.user-dropdown-logout i{font-style:normal;font-size:14px}.user-dropdown-logout:hover{background:#ef4444;color:#fff;border-color:#ef4444}.header-user-btn{display:inline-flex;align-items:center;gap:8px;padding:4px 10px 4px 5px;border-radius:24px;border:1px solid var(--line);background:#fff;cursor:pointer;font-family:inherit;transition:all .2s;height:41px}.header-user-btn:hover{border-color:#397cf3;background:#f5f8ff;box-shadow:0 2px 8px #397cf31f}.header-user-name{font-size:12px;font-weight:600;color:#28364e}.header-logout-tag{font-size:13px;color:#9aa7bc;margin-left:2px;padding:2px 4px;border-radius:4px;transition:all .2s}.header-user-btn:hover .header-logout-tag{color:#ef4444;background:#ffebee}main{margin-left:256px;padding:0 40px 42px;max-width:1660px}header{height:116px;display:flex;align-items:center;justify-content:space-between}.eyebrow{color:#8490a5;font-size:10px;font-weight:700;letter-spacing:1.25px;margin:0 0 7px}h1{font-family:Manrope;font-size:25px;letter-spacing:-.8px}h1 span{font-size:21px}.header-actions{display:flex;gap:12px;align-items:center}.icon-button,.sync-button,.date-select,.more,.filter{font-family:inherit;border:1px solid var(--line);background:#fff;border-radius:8px;color:#56627a}.icon-button{height:41px;width:41px;font-size:18px;position:relative}.icon-button span{position:absolute;width:7px;height:7px;border-radius:50%;background:#f15b61;right:10px;top:9px;border:1px solid white}.sync-button{height:41px;padding:0 15px;color:#fff;background:#397cf3;border-color:#397cf3;font-size:13px}.section-heading,.panel-heading{display:flex;justify-content:space-between;align-items:flex-start}.section-heading{margin:11px 0 19px}.section-heading h2,.panel h2{font-family:Manrope;font-size:17px;letter-spacing:-.4px}.section-heading p,.panel-heading p{font-size:12px;color:var(--muted);margin-top:5px}.date-select{padding:10px 11px;font-size:12px}.date-select span{margin-left:17px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.metric,.panel{background:#fff;border:1px solid var(--line);border-radius:12px}.metric{padding:19px 18px;display:flex;gap:13px;position:relative;min-height:125px}.metric-icon{min-width:38px;height:38px;display:grid;place-items:center;border-radius:9px;font-size:17px;font-weight:700}.blue{background:#e8f0ff;color:#397cf3}.green{background:#e5f8ef;color:#16a36e}.orange{background:#fff3df;color:#ed9e26}.red{background:#ffe9e9;color:#ee6267}.metric p{color:#6f7b91;font-size:12px}.metric strong{font-family:Manrope;font-size:25px;display:block;margin:4px 0}.metric small{color:#8791a3;font-size:10px}.metric small b{color:#16a36e}.metric .alert-text{color:#e18b1a}.progress{position:absolute;bottom:17px;left:18px;right:18px;background:#e9f4ee;border-radius:4px;height:4px}.progress span{display:block;height:100%;border-radius:4px;background:#18ad76}.content-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;margin-top:17px}.panel{padding:20px}.panel-heading a,.chart-summary a,.log-actions a{font-size:12px;color:#397cf3;text-decoration:none;font-weight:600;cursor:pointer}.more{border:0;font-weight:700;font-size:16px}.chart-key{display:flex;gap:20px;margin:22px 0 8px;color:#7d889b;font-size:10px}.chart-key i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}.key-present{background:#397cf3}.key-late{background:#f3ad3d}.key-absent{background:#ef6670}.chart{display:flex;height:186px}.y-labels{width:30px;display:flex;flex-direction:column;justify-content:space-between;color:#a4adbc;font-size:9px;padding-bottom:8px}.plot{position:relative;flex:1;border-bottom:1px solid #e8ecf3;background:repeating-linear-gradient(to bottom,transparent 0,transparent 34px,#edf0f5 35px)}.plot svg{position:absolute;inset:0;width:100%;height:178px}.tooltip{position:absolute;left:49%;top:31px;background:#1a2945;color:#fff;border-radius:6px;padding:7px 9px;font-size:9px;display:grid;gap:3px;transform:translate(-50%)}.tooltip:after{content:"";border:4px solid transparent;border-top-color:#1a2945;position:absolute;bottom:-8px;left:50%}.tooltip span{color:#bcc8df}.x-labels{position:absolute;display:flex;justify-content:space-between;left:0;right:0;bottom:-19px;color:#a4adbc;font-size:9px}.chart-summary{margin-top:29px;padding-top:15px;border-top:1px solid #edf0f5;display:flex;gap:24px;color:#7b879b;font-size:11px}.chart-summary b{color:#26324a}.chart-summary a{margin-left:auto}.device-score{display:flex;gap:17px;align-items:center;margin:25px 0 21px}.ring{height:75px;width:75px;border-radius:50%;display:grid;place-content:center;background:radial-gradient(white 58%,transparent 60%),conic-gradient(#20b57b 96%,#e8f2ed 0)}.ring b{font-size:21px;text-align:center}.ring span{font-size:9px;color:#8390a2;text-align:center;margin-top:-4px}.device-score h3{font-size:14px}.device-score p{font-size:11px;color:#7d899b;line-height:1.6;margin-top:4px}.device-list{border-top:1px solid #edf0f5}.device-list>div{display:flex;align-items:center;gap:8px;padding:12px 0;border-bottom:1px solid #edf0f5}.status-dot{height:7px;width:7px;border-radius:50%}.online{background:#22b97e}.warning{background:#f2a33a}.device-list p{font-size:11px;line-height:1.5}.device-list p small{display:block;color:#8792a3;font-size:9px}.device-list>div>strong{font-size:9px;color:#1eaa73;margin-left:auto}.device-list .warn{color:#e59b28}.logs-panel{margin-top:17px}.log-actions{display:flex;gap:16px;align-items:center}.filter{padding:7px 11px;font-size:11px;cursor:pointer}table{border-collapse:collapse;width:100%;margin-top:17px}th{text-align:left;color:#97a1b1;font-size:9px;letter-spacing:.6px;padding:0 9px 11px;font-weight:600}td{border-top:1px solid #eef1f5;padding:11px 9px;color:#69768c;font-size:11px}td:first-child{position:relative;padding-left:45px}td b{color:#26324a;font-size:11px}td small{display:block;color:#929bac;font-size:9px;margin-top:3px}.person{position:absolute;left:8px;top:11px;width:27px;height:27px;font-size:9px}.purple{background:#eee8ff;color:#7858bd}.yellow{background:#ffefcc;color:#b87a12}.teal{background:#dff7f2;color:#158f7c}.pink{background:#ffe5ed;color:#bf597a}.punch,.status{font-size:10px;padding:4px 7px;border-radius:5px;font-weight:600}.punch.in{background:#e4f8ee;color:#159e6c}.out{background:#ffe7e7;color:#f30000}.device .device-online{color:#159e6c}.device .device-offline{color:#f30000}.status{padding:0;background:none}.status.present{color:#1aa772}.status.late{color:#e29a27}.toast{position:fixed;bottom:25px;right:25px;background:#1a2945;color:#fff;padding:13px 17px;border-radius:9px;font-size:12px;box-shadow:0 8px 22px #16223b42;opacity:0;transform:translateY(15px);transition:.25s;pointer-events:none;z-index:20}.toast.show{opacity:1;transform:none}.mobile-menu{display:none}.page-title{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:21px}.page-title h2{font-family:Manrope;font-size:24px;letter-spacing:-.7px}.page-title p{margin-top:5px;color:#748096;font-size:12px}.primary-action{border:0;border-radius:8px;background:#397cf3;color:#fff;padding:11px 14px;font:600 12px DM Sans}.secondary-action{border:0;border-radius:8px;background:#4a4a4a;color:#fff;padding:11px 14px;font:600 12px DM Sans}.toolbar{display:flex;gap:10px;margin-bottom:16px;margin-top:16px;flex-wrap:wrap}.search-field,.select-field{border:1px solid #e5eaf2;background:#fff;border-radius:8px;height:38px;padding:0 12px;color:#33425b;font:500 12px DM Sans,sans-serif;outline:none;transition:all .2s ease}.search-field::placeholder{color:#8c97a8;font-weight:400}.search-field:focus,.select-field:focus{border-color:#397cf3;box-shadow:0 0 0 3px #397cf31f}.device-select{font-weight:600;color:#1e293b;max-width:340px}.header-actions-group{display:flex;gap:10px;align-items:center}.btn-spinner{display:inline-block;animation:spin 1s linear infinite}.spin-sm{display:inline-block;width:12px;height:12px;border:2px solid #397cf3;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite;vertical-align:middle;margin-right:4px}@keyframes spin{to{transform:rotate(360deg)}}.table-header-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.sync-timestamp{color:#8491a5;font-size:11px}.table-loading-tag{font-size:11px;color:#397cf3;font-weight:600;display:inline-flex;align-items:center}.id-badge{display:inline-block;background:#f0f4fa;color:#33425b;font-family:monospace;font-size:11px;font-weight:600;padding:2px 7px;border-radius:6px;border:1px solid #e1e7f0}.device-tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#435169;font-weight:600}.device-tag i{font-style:normal;font-size:12px;color:#397cf3}.serial-code{font-family:monospace;font-size:14px;background:#f8fafd;border:1px solid #e2e8f0;padding:2px 6px;border-radius:4px;color:#475569}.employee-active{background:#e4f8ee;border:1px solid #e4f8ee;color:#159e6c;border-radius:20px}.employee-inactive{background:#ffe7e7;border:1px solid #ffe7e7;color:#f30000;border-radius:20px}.search-field{min-width:245px}.data-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px}.data-card table{margin-top:0}.tag{font-size:10px;padding:4px 8px;border-radius:12px;font-weight:600}.tag.blue{background:#e9f0ff;color:#3972d9}.tag.green{background:#e4f7ee;color:#169d6b}.sync-layout{display:grid;grid-template-columns:1.6fr .9fr;gap:17px}.sync-hero{background:linear-gradient(125deg,#1d3767,#284d8c);color:#fff;border-radius:12px;padding:25px}.sync-hero h3{font:700 19px Manrope;margin-bottom:7px}.sync-hero p{font-size:12px;color:#c7d6f3;line-height:1.6;max-width:450px}.sync-options{display:flex;gap:10px}.sync-options button{border:1px solid #9bb9ee;background:#fff;color:#2856a2;padding:9px 12px;border-radius:7px;font:600 11px DM Sans}.sync-options button:first-child{background:#4d8df5;color:#fff;border-color:#4d8df5}.sync-status{margin-top:17px;padding:16px;border:1px solid #e7edf4;border-radius:9px;display:flex;align-items:center;gap:12px}.sync-status .spin{width:25px;height:25px;border:3px solid #dce9ff;border-top-color:#397cf3;border-radius:50%}.sync-status b{font-size:12px}.sync-status small{display:block;color:#8490a2;margin-top:3px}.download-card h3{font:700 15px Manrope}.download-card p{font-size:11px;color:#7c8799;margin:6px 0 20px;line-height:1.5}.download-row{display:flex;align-items:center;border-top:1px solid #edf0f5;padding:13px 0;gap:9px;cursor:pointer}.download-row span{font-size:18px}.download-row b{font-size:11px}.download-row small{color:#8490a2;font-size:9px;margin-left:auto}.device-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.device-card{background:#fff;border:1px solid #e7ecf4;border-radius:12px;padding:17px}.device-card .device-top{display:flex;justify-content:space-between}.device-card h3{font-size:14px;margin:16px 0 4px}.device-card p{font-size:11px;color:#7b879a}.device-card .meta{margin:17px 0 13px;border-top:1px solid #edf0f5;border-bottom:1px solid #edf0f5;padding:10px 0;display:flex;justify-content:space-between;font-size:10px;color:#8290a5}.device-card button{width:100%;background:#f5f8fc;border:0;border-radius:6px;padding:8px;color:#48617d;font:600 11px DM Sans;margin-top:7px}.device-card .delete-device{background:#fff0f1;color:#d85661}.roster{overflow:auto}.roster-grid{min-width:700px;display:grid;grid-template-columns:155px repeat(7,1fr);border-top:1px solid #e8edf4;border-left:1px solid #e8edf4}.roster-grid>div{padding:11px 9px;border-right:1px solid #e8edf4;border-bottom:1px solid #e8edf4;font-size:10px}.roster-grid .day{font-weight:700;color:#738096;text-align:center;background:#fafbfd}.roster-grid .staff{font-weight:600;color:#34425b}.shift{border-radius:5px;padding:5px!important;margin:5px;font-weight:600;text-align:center;cursor:pointer}.shift.general{background:#e7f0ff;color:#3571d0}.shift.morning{background:#e5f8ef;color:#149265}.shift.evening{background:#fff2df;color:#d78a1e}.shift.off{background:#f2f4f7;color:#9aa5b5}.report-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.report-card{background:#fff;border:1px solid #e6ebf3;border-radius:12px;padding:19px}.report-card .report-icon{font-size:22px}.report-card h3{font:700 14px Manrope;margin:18px 0 6px}.report-card p{font-size:11px;color:#798599;line-height:1.5;min-height:33px}.report-card a{display:block;border-top:1px solid #edf0f5;margin-top:17px;padding-top:12px;color:#397cf3;font-size:11px;font-weight:600;text-decoration:none;cursor:pointer}.row-action{border:0;background:#eaf1ff;color:#3973d9;border-radius:5px;padding:5px 7px;font:600 10px DM Sans;margin-right:4px}.row-action.danger{background:#fff0f1;color:#d85661}.setting-actions{display:flex;gap:8px}.setting-actions .setting-delete{background:#fff0f1;color:#d85661}.setting-header{display:flex;justify-content:space-between;align-items:center}.setting-header button{margin:0}.setting-records{margin-top:14px;border-top:1px solid #edf0f5}.setting-record{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:11px 0;border-bottom:1px solid #edf0f5}.setting-record b{display:block;font-size:11px;color:#32405a}.setting-record small{font-size:9px;color:#8491a3;display:block;margin-top:3px}.setting-record .setting-actions button{padding:6px 7px;border:0;border-radius:5px;font:600 10px DM Sans;background:#eaf1ff;color:#3973d9}.modal-backdrop{position:fixed;inset:0;background:#14213a77;display:grid;place-items:center;padding:18px;opacity:0;pointer-events:none;transition:.2s;z-index:5}.modal-backdrop.open{opacity:1;pointer-events:auto}.modal{position:relative;width:min(460px,100%);background:#fff;border-radius:14px;box-shadow:0 18px 50px #101c333d;transform:translateY(12px);transition:.2s;max-height:90vh;display:flex;flex-direction:column}.modal-backdrop.open .modal{transform:none}.modal-close{position:absolute;top:12px;right:13px;border:0;background:#f3f6fa;color:#5f6b80;width:27px;height:27px;border-radius:50%;font-size:19px}.modal h2{font:700 19px Manrope;margin-bottom:6px}.modal p{font-size:12px;color:#748096;line-height:1.6}.modal label{display:block;font-size:11px;font-weight:600;color:#41506a;margin:16px 0 6px}.modal input,.modal select{width:100%;height:39px;border:1px solid #dfe6f0;border-radius:7px;padding:0 10px;color:#56647b;font:12px DM Sans}.modal-header{padding:26px 26px 10px;flex-shrink:0}.modal-body{padding:0 26px;overflow-y:auto;flex-grow:1}.modal-body::-webkit-scrollbar{width:6px}.modal-body::-webkit-scrollbar-thumb{background-color:#cbd5e1;border-radius:4px}.modal-actions{display:flex;justify-content:flex-end;gap:9px;padding:16px 26px 26px;margin-top:10px;flex-shrink:0;border-top:1px solid #f1f5f9}.modal-actions button{border:0;border-radius:7px;padding:9px 12px;font:600 12px DM Sans}.modal-actions .cancel{background:#eff3f8;color:#5c6b82}.modal-actions .confirm{background:#397cf3;color:#fff}.results-note{font-size:11px;color:#728096;margin:0 0 11px}.device-action-list{display:grid;gap:9px;margin-top:16px}.device-action{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;align-items:center;gap:8px;border:1px solid #e6ebf3;border-radius:8px;padding:11px;font-size:11px}.device-action b{color:#293650}.device-action small{color:#8290a4}.device-action button{border:0;background:#e8f0ff;color:#3973d9;border-radius:6px;padding:7px 9px;font:600 10px DM Sans}.select-device{display:flex;gap:8px;align-items:center;border-top:1px solid #edf0f5;padding:11px 0;font-size:11px}.select-device input{width:auto}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.setting-card{background:#fff;border:1px solid #e5ebf3;border-radius:12px;padding:19px}.setting-card h3{font:700 15px Manrope}.setting-card p{font-size:11px;color:#7d899b;margin:5px 0 17px;line-height:1.5}.setting-card button{border:0;background:#edf3ff;color:#3973dc;border-radius:7px;padding:8px 10px;font:600 11px DM Sans}.login-screen{position:fixed;inset:0;z-index:10;display:grid;place-items:center;background:linear-gradient(135deg,#0d1930,#203e70);padding:20px}.login-card{width:min(410px,100%);background:#fff;border-radius:16px;padding:34px;box-shadow:0 25px 80px #09142b75}.login-brand{display:flex;align-items:center;gap:10px;font:600 19px Manrope;color:#17223c;margin-bottom:31px}.login-brand b{font-size:11px;color:#4d82e2;letter-spacing:1.4px}.login-card h2{font:700 24px Manrope}.login-card>p{color:#778399;font-size:12px;margin:7px 0 25px}.login-card>label{display:block;color:#4b5870;font-size:11px;font-weight:600;margin:14px 0 6px}.login-card>input{width:100%;height:43px;border:1px solid #dce3ee;border-radius:8px;padding:0 12px;font:13px DM Sans}.password-wrapper{position:relative;display:flex;align-items:center}.password-wrapper input{width:100%;height:43px;border:1px solid #dce3ee;border-radius:8px;padding:0 40px 0 12px;font:13px DM Sans}.password-wrapper input:focus{outline:2px solid #397cf3;border-color:transparent}.toggle-password{position:absolute;right:10px;background:none;border:none;padding:0;color:#8c97a8;display:grid;place-items:center;cursor:pointer;height:100%;transition:color .2s}.toggle-password svg{width:18px;height:18px}.toggle-password:hover{color:#397cf3}.login-row{margin:13px 0 22px;display:flex;justify-content:space-between;font-size:11px}.login-row label{color:#68758b}.login-row input{width:auto;vertical-align:middle}.login-row a{color:#397cf3;text-decoration:none}.login-card>button{width:100%;border:0;background:#397cf3;color:#fff;border-radius:8px;height:43px;font:600 13px DM Sans}.login-card>small{display:block;text-align:center;color:#94a0b2;font-size:10px;margin-top:17px}.toggle-switch{position:relative;display:inline-block;width:40px;height:22px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;inset:0;background-color:#cbd5e1;transition:.3s;border-radius:34px}.toggle-slider:before{position:absolute;content:"";height:16px;width:16px;left:3px;bottom:3px;background-color:#fff;transition:.3s;border-radius:50%;box-shadow:0 1px 3px #0003}input:checked+.toggle-slider{background-color:#10b981}input:focus+.toggle-slider{box-shadow:0 0 1px #10b981}input:checked+.toggle-slider:before{transform:translate(18px)}@media(max-width:1050px){.metrics{grid-template-columns:repeat(2,1fr)}.content-grid{grid-template-columns:1fr}.sidebar{width:220px}main{margin-left:220px;padding:0 24px}}@media(max-width:850px){.sync-layout,.device-grid,.report-cards{grid-template-columns:1fr}.select-field{margin-left:0}.toolbar{flex-wrap:wrap}}.sidebar-overlay{display:none}@media(max-width:720px){.sidebar{transform:translate(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:100}.sidebar.open{transform:translate(0)}.sidebar-overlay{display:block;position:fixed;inset:0;background:#0f172a99;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:99;opacity:0;pointer-events:none;transition:opacity .3s ease}.sidebar-overlay.open{opacity:1;pointer-events:auto}main{margin:0;padding:0 16px 25px}header{height:94px}.mobile-menu{display:block;border:0;background:none;font-size:22px;color:var(--ink);margin-right:8px}header>div:first-of-type{margin-right:auto}.header-actions{margin-left:10px}.icon-button{display:none}.sync-button{padding:0 10px}.sync-button b{display:none}.section-heading{gap:12px}.date-select{white-space:nowrap}.metrics{grid-template-columns:1fr 1fr;gap:10px}.metric{padding:14px;min-height:115px}.metric-icon{min-width:31px;height:31px}.content-grid{margin-top:10px}.panel{padding:15px}.table-wrap{overflow:auto}.chart-summary{gap:8px}.chart-summary a{white-space:nowrap}.device-list>div{padding-right:0}.modal{padding:22px 18px}.settings-grid{grid-template-columns:1fr}.device-action{grid-template-columns:1fr auto}.device-action small{display:none}}.pagination-container{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-top:1px solid var(--line);background:#fff;border-bottom-left-radius:12px;border-bottom-right-radius:12px;gap:16px;flex-wrap:wrap}.pagination-info{font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}.pagination-info b{color:var(--ink);font-weight:600}.pagination-page-indicator{color:#94a3b8;font-size:12px;margin-left:4px}.pagination-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.pagination-size-selector{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}.pagination-size-selector label{white-space:nowrap}.page-size-select{padding:6px 10px;font-size:13px;font-weight:500;border:1px solid var(--line);border-radius:6px;background-color:#fff;color:var(--ink);cursor:pointer;outline:none;transition:border-color .2s,box-shadow .2s}.page-size-select:focus{border-color:var(--blue);box-shadow:0 0 0 3px #397cf326}.pagination-nav,.page-numbers{display:flex;align-items:center;gap:4px}.page-btn{display:inline-flex;align-items:center;justify-content:center;height:34px;min-width:34px;padding:0 10px;font-size:13px;font-weight:500;color:#4b5563;background:#fff;border:1px solid #e5e7eb;border-radius:7px;cursor:pointer;transition:all .15s ease-in-out;-webkit-user-select:none;user-select:none}.page-btn.number-btn{min-width:34px;padding:0 8px}.page-btn:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1;color:#1e293b}.page-btn.active{background:var(--blue, #397cf3);border-color:var(--blue, #397cf3);color:#fff;font-weight:600;box-shadow:0 2px 4px #397cf340}.page-btn.nav-btn{padding:0 12px;font-weight:500;gap:4px}.page-current-pill{display:inline-flex;align-items:center;justify-content:center;padding:0 14px;height:34px;font-size:13px;color:#334155;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:7px;font-weight:500;white-space:nowrap}.page-current-pill b{color:var(--blue, #397cf3);margin:0 3px;font-weight:600}.page-btn:disabled{opacity:.45;cursor:not-allowed;background:#f9fafb;border-color:#e5e7eb;color:#9ca3af}.page-ellipsis{display:inline-flex;align-items:center;justify-content:center;width:28px;color:#94a3b8;font-weight:600;font-size:13px;-webkit-user-select:none;user-select:none}@media(max-width:768px){.pagination-container{flex-direction:column;align-items:stretch;gap:12px}.pagination-info{justify-content:center;text-align:center}.pagination-actions{flex-direction:column;align-items:center;gap:12px}.pagination-nav{flex-wrap:wrap;justify-content:center}}