:root{--font-title:var(--font-sora);--font-body:var(--font-poppins);--accent-light:#8f001f;--accent-light-2:#bb0032;--accent-dark:#7a0018;--accent-dark-2:#970024;--bg:#f6f8fb;--bg-soft:#eef2f8;--surface:rgba(255,255,255,0.72);--surface-strong:#ffffff;--text:#1b2533;--muted:#5f6f86;--accent:var(--accent-light);--accent-2:var(--accent-light-2);--border:#d6dfed;--danger:#b22234;--success:#1f8a55;--punch-start:#168a47;--punch-start-2:#23b35d;--punch-end:#c99b12;--punch-end-2:#e6b51f;--shadow:0 14px 36px rgba(14,30,62,0.12)}[data-theme=dark]{--bg:#0f1520;--bg-soft:#1a2433;--surface:rgba(26,36,51,0.75);--surface-strong:#1b2738;--text:#ebf1ff;--muted:#a9b7cc;--accent:var(--accent-dark);--accent-2:var(--accent-dark-2);--border:#4f1d2d;--danger:#ff8ca3;--success:#70e7a8;--punch-start:#27a45f;--punch-start-2:#3cc976;--punch-end:#b89215;--punch-end-2:#d6ad24;--shadow:0 18px 44px rgba(5,10,18,0.45)}*{box-sizing:border-box}body,html{margin:0;padding:0;min-height:100%;width:100%;max-width:100%;overflow-x:clip;background:radial-gradient(circle at 12% 18%,rgba(143,0,31,.2),transparent 36%),radial-gradient(circle at 88% 8%,rgba(187,0,50,.19),transparent 34%),var(--bg);color:var(--text);font-family:var(--font-body),"Manrope","Segoe UI",sans-serif;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior-y:auto;-webkit-tap-highlight-color:transparent}h1,h2,h3{margin:0 0 .5rem;letter-spacing:-.03em}h1,h2,h3,h4{font-family:var(--font-title),sans-serif}h4{margin:1rem 0 .5rem}p{margin:.2rem 0}.muted{color:var(--muted)}.small{font-size:.9rem}.auth-bg,.center-screen{min-height:100dvh;display:grid;place-items:center}.auth-bg{padding:calc(1rem + env(safe-area-inset-top)) 1rem calc(1rem + env(safe-area-inset-bottom))}.app-shell{height:100dvh;width:100%;max-width:100%;display:grid;grid-template-columns:280px minmax(0,1fr);gap:1rem;padding:1rem;overflow:hidden}.card,.glass,.sidebar{border:1px solid var(--border);background:var(--surface);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:18px;box-shadow:var(--shadow)}.sidebar{padding:1.2rem;display:flex;flex-direction:column;gap:.9rem;min-height:calc(100dvh - 2rem);height:calc(100dvh - 2rem);position:sticky;top:1rem;overflow-y:auto}.brand-row{display:flex;align-items:center;gap:.72rem}.auth-brand{margin-bottom:.45rem}.brand-logo{width:52px;height:52px;object-fit:cover;border-radius:999px;border:1px solid color-mix(in oklab,var(--accent) 45%,var(--border));background:#fff}.brand-logo.preview{width:86px;height:86px}.brand-preview{padding:.62rem .72rem;border:1px dashed var(--border);border-radius:12px;display:grid;gap:.45rem;justify-items:start}.sidebar-backdrop{display:none}.sidebar-nav{display:grid;gap:.5rem}.sidebar-account{margin-top:auto;padding-top:.85rem;border-top:1px solid color-mix(in oklab,var(--border) 88%,transparent);display:grid;gap:.28rem}.account-btn{border:1px solid transparent;background:transparent;color:var(--text);border-radius:10px;min-height:40px;padding:.55rem .65rem;display:flex;align-items:center;gap:.6rem;cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .16s ease}.account-btn:hover{background:color-mix(in oklab,var(--accent) 14%,transparent);border-color:color-mix(in oklab,var(--accent) 44%,transparent);transform:translateX(1px)}.account-btn.danger{color:color-mix(in oklab,var(--danger) 80%,var(--text))}.account-icon{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center}.nav-btn{border:1px solid var(--border);background:transparent;color:var(--text);border-radius:12px;padding:.65rem .8rem;text-align:left;cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease;display:flex;align-items:center;gap:.5rem}.nav-btn.active,.nav-btn:hover{background:color-mix(in oklab,var(--accent) 18%,transparent);border-color:var(--accent);transform:translateX(2px)}.content{display:flex;flex-direction:column;gap:1rem;min-width:0;min-height:0;overflow-y:auto;padding-right:.25rem}.content>*{min-width:0;max-width:100%}.topbar{border-radius:18px;border:1px solid var(--border);background:var(--surface);padding:1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}.mobile-appbar,.mobile-menu-floating{display:none}.topbar-right{display:flex;align-items:center;gap:.8rem}.install-btn{min-height:38px;padding:.45rem .68rem;font-size:.86rem}.avatar{width:44px;height:44px;border-radius:999px;border:1px solid var(--border);object-fit:cover;box-shadow:0 8px 14px rgba(18,24,35,.15)}.avatar-lg{width:54px;height:54px}.avatar-xl{width:74px;height:74px}.card-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.card-grid.single{grid-template-columns:1fr}.card,.glass{padding:1rem}.form-grid{display:grid;gap:.8rem}label{display:grid;gap:.3rem;font-weight:600}button,input,select,textarea{font-family:inherit;font-size:.95rem}input,select,textarea{border:1px solid var(--border);background:var(--surface-strong);color:var(--text);border-radius:10px;padding:.62rem .74rem;width:100%;min-width:0}textarea{width:100%;resize:vertical}.btn{border:1px solid var(--accent);background:linear-gradient(135deg,var(--accent),var(--accent-2));color:white;border-radius:10px;padding:.62rem .85rem;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.4rem}.btn:hover{transform:translateY(-1px);box-shadow:0 10px 18px rgba(143,0,31,.26)}.btn:disabled{opacity:.48;filter:grayscale(.22) brightness(.85);cursor:not-allowed;box-shadow:none;transform:none}.btn.ghost{background:transparent;color:var(--text);border-color:var(--border)}.btn.danger{background:linear-gradient(135deg,#d95b5b,#b72f2f);border-color:#b72f2f}.btn.punch-btn-start{border-color:var(--punch-start);background:linear-gradient(135deg,var(--punch-start),var(--punch-start-2))}.btn.punch-btn-end{border-color:var(--punch-end);background:linear-gradient(135deg,var(--punch-end),var(--punch-end-2));color:#1f232b}.punch-row .btn{flex:1 1;min-width:0;min-height:46px}.row{display:flex;align-items:center}.wrap-row{flex-wrap:wrap}.dual-grid{gap:.75rem}.dual-grid,.toggle-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.toggle-grid{gap:.55rem}.profile-media-row{display:flex;align-items:center;gap:.9rem}.email-box{margin-top:.8rem;padding:.75rem;border:1px dashed var(--border);border-radius:12px}.hidden-input{display:none}.color-input-row{display:grid;grid-template-columns:50px minmax(0,1fr);gap:.55rem;align-items:center}.color-input-row input[type=color]{width:50px;height:38px;padding:.1rem;border-radius:8px;cursor:pointer}.gap,.stack{gap:.6rem}.stack{display:grid}.qr{width:200px;max-width:100%;border-radius:12px;border:1px solid var(--border)}.table-wrap{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.home-punch-table{table-layout:fixed}.home-punch-table td,.home-punch-table th{word-break:break-word}.home-punch-table.compact{table-layout:auto}.home-punch-table.compact td,.home-punch-table.compact th{padding:.38rem .5rem;white-space:nowrap;line-height:1.2;vertical-align:middle}.home-punch-table.compact th{font-size:.8rem}.home-punch-table.compact td{font-size:.85rem}.home-punch-table.compact td:last-child,.home-punch-table.compact th:last-child{text-align:center}.home-punch-datetime{font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.map-wrap{margin:.8rem 0 1rem;border:1px solid var(--border);border-radius:14px;overflow:hidden}.leaflet-map{width:100%;height:360px}table{width:100%;border-collapse:collapse}td,th{text-align:left;padding:.55rem;border-bottom:1px solid var(--border);vertical-align:middle}.error,.success{border-radius:10px;padding:.7rem .8rem}.error{background:color-mix(in oklab,var(--danger) 20%,transparent);color:var(--danger)}.success{background:color-mix(in oklab,var(--success) 20%,transparent);color:var(--success)}.inline-msg{margin-top:.7rem}.punch-card{border-top:1px solid var(--border)}.punch-type{display:inline-flex;align-items:center;justify-content:center;padding:.2rem .5rem;border-radius:999px;font-size:.8rem;font-weight:700;letter-spacing:.02em;min-width:68px;text-align:center}.punch-type-start{background:color-mix(in oklab,var(--punch-start) 24%,transparent);color:color-mix(in oklab,var(--punch-start) 82%,var(--text));border:1px solid color-mix(in oklab,var(--punch-start) 48%,transparent)}.punch-type-end{background:color-mix(in oklab,var(--punch-end) 24%,transparent);color:color-mix(in oklab,var(--punch-end) 92%,#463600);border:1px solid color-mix(in oklab,var(--punch-end) 48%,transparent)}.punch-type-text{font-weight:700;letter-spacing:.02em;font-size:.84rem}.punch-type-text.punch-type-start{background:transparent;border:0;color:var(--punch-start);padding:0;min-width:0}.punch-type-text.punch-type-end{background:transparent;border:0;color:color-mix(in oklab,var(--punch-end) 84%,#7a620a);padding:0;min-width:0}.position-link{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px}.position-link:hover{color:var(--accent-2)}.quick-grid{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}.quick-link{border:1px solid var(--border);border-radius:12px;padding:.9rem;color:var(--text);text-decoration:none;background:color-mix(in oklab,var(--surface-strong) 86%,transparent);transition:transform .18s ease,border-color .18s ease,background .18s ease;display:flex;align-items:center;gap:.55rem}.quick-link:hover{border-color:var(--accent);background:color-mix(in oklab,var(--accent) 18%,var(--surface-strong));transform:translateY(-2px)}.nav-icon,.quick-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1}.fi{font-size:.95rem;line-height:1}.punch-row{margin-top:.7rem}.filters-row{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:.8rem}.row-highlight{background:color-mix(in oklab,#28a558 18%,transparent)}.row-alert{background:color-mix(in oklab,#cf3a3a 24%,transparent)}.row-alert td{border-bottom-color:color-mix(in oklab,#cf3a3a 40%,var(--border))}.pagination-row{margin-top:.85rem;display:flex;align-items:center;justify-content:space-between;gap:.7rem;flex-wrap:wrap}.server-toggles{display:grid;gap:.55rem;margin:.65rem 0 .85rem}.ntp-test-box{border:1px solid var(--border);border-radius:12px;padding:.65rem .75rem;background:color-mix(in oklab,var(--surface-strong) 90%,transparent);display:grid;gap:.25rem;font-size:.9rem}.ntp-test-box.ok{border-color:color-mix(in oklab,var(--success) 55%,var(--border))}.ntp-test-box.warning{border-color:color-mix(in oklab,#d2932f 60%,var(--border));background:color-mix(in oklab,#d2932f 14%,transparent)}.toggle-item{display:flex;align-items:center;gap:.55rem;font-weight:600}.toggle-item input[type=checkbox]{width:1rem;height:1rem}.route-page{padding:2rem;width:100%;max-width:100%;overflow-x:hidden}.route-card{min-width:min(92vw,520px);width:100%;max-width:760px}.users-mobile-list{display:none}.mobile-user-card{border:1px solid var(--border);border-radius:12px;padding:.75rem;background:color-mix(in oklab,var(--surface-strong) 90%,transparent);display:grid;gap:.6rem}.mobile-user-header{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}.gps-flag-btn{border-color:color-mix(in oklab,#d64242 42%,var(--border));color:color-mix(in oklab,#d64242 72%,var(--text))}.rfid-log{display:grid;gap:.1rem;min-width:120px}.rfid-log strong{font-size:.88rem}.rfid-log span{color:var(--muted);font-size:.78rem}.gps-check-grid{display:grid;gap:.55rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.gps-check-grid>div{border:1px solid var(--border);border-radius:10px;padding:.55rem .6rem;display:grid;gap:.2rem;font-size:.9rem}.gps-check-grid strong{font-size:.95rem}.gps-check-grid>div.gps-bad{border-color:color-mix(in oklab,#d64242 58%,var(--border));background:color-mix(in oklab,#d64242 14%,transparent);color:#b32020}.modal-overlay{position:fixed;inset:0;background:rgba(8,12,20,.56);z-index:150;display:grid;place-items:center;padding:.9rem}.modal-card{width:min(560px,100%);max-height:min(90dvh,760px);overflow-y:auto;border:1px solid var(--border);background:var(--surface-strong);border-radius:16px;box-shadow:var(--shadow);padding:1rem}.toast-container{position:fixed;right:max(.8rem,env(safe-area-inset-right));bottom:max(.8rem,env(safe-area-inset-bottom));z-index:220;display:grid;gap:.55rem;width:min(92vw,360px)}.toast{border-radius:12px;border:1px solid var(--border);background:var(--surface-strong);color:var(--text);box-shadow:var(--shadow);padding:.68rem .72rem;display:flex;align-items:flex-start;gap:.55rem;justify-content:space-between;animation:toastIn .18s ease both;transition:opacity .16s ease,transform .16s ease}.toast.success{border-color:color-mix(in oklab,var(--success) 55%,var(--border))}.toast.error{border-color:color-mix(in oklab,var(--danger) 55%,var(--border))}.toast.closing{opacity:0;transform:translateY(6px)}.toast-close{border:0;background:transparent;color:inherit;cursor:pointer;line-height:1;font-size:1rem;padding:.1rem .2rem}.gps-overlay{position:fixed;inset:0;z-index:210;display:grid;place-items:center;background:rgba(7,10,16,.28);animation:gpsOverlayIn .16s ease both}.gps-card{width:min(90vw,320px);border-radius:14px;border:1px solid var(--border);background:var(--surface-strong);box-shadow:var(--shadow);padding:1rem .9rem;display:grid;justify-items:center;text-align:center;gap:.65rem;animation:fadeUp .18s ease both}.gps-card p{margin:0}.gps-card.gps-success{border-color:color-mix(in oklab,var(--success) 55%,var(--border))}.gps-spinner{width:34px;height:34px;border-radius:999px;border:3px solid color-mix(in oklab,var(--accent) 24%,transparent);border-top-color:var(--accent);animation:spin .85s linear infinite}.gps-check{width:34px;height:34px;border-radius:999px;background:color-mix(in oklab,var(--success) 24%,transparent);color:var(--success);display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700}.custom-punch-marker{background:transparent;border:0}.custom-punch-marker .dot{width:16px;height:16px;border-radius:999px;display:inline-block;border:2px solid rgba(255,255,255,.95);box-shadow:0 0 0 3px rgba(0,0,0,.16)}.custom-punch-marker .dot.start{background:var(--punch-start)}.custom-punch-marker .dot.end{background:var(--punch-end)}.fade-up{animation:fadeUp .48s ease both}.fade-left{animation:fadeLeft .44s ease both}.delay-1{animation-delay:90ms}.delay-2{animation-delay:.17s}@keyframes fadeUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeLeft{0%{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}@keyframes toastIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(1turn)}}@keyframes gpsOverlayIn{0%{opacity:0}to{opacity:1}}@media (max-width:960px){.app-shell{display:grid;grid-template-columns:1fr;min-height:100svh;height:auto;width:100%;max-width:100%;padding:calc(.55rem + env(safe-area-inset-top)) .55rem calc(.55rem + env(safe-area-inset-bottom));gap:.5rem;overflow:visible}.sidebar{position:fixed;left:0;top:0;bottom:0;width:min(82vw,320px);z-index:70;padding:calc(.9rem + env(safe-area-inset-top)) .8rem calc(.85rem + env(safe-area-inset-bottom));border-radius:0;border:0;transform:translateX(-106%);transition:transform .24s ease;background:linear-gradient(180deg,#2f000f,#4d0017);color:#ffe5ea;box-shadow:16px 0 38px rgba(7,9,16,.55);min-height:100svh}.sidebar.open{transform:translateX(0)}.sidebar-backdrop{display:block;position:fixed;inset:0;z-index:60;background:rgba(9,11,20,.56);opacity:0;pointer-events:none;border:0;transition:opacity .22s ease}.sidebar-backdrop.show{opacity:1;pointer-events:auto}.sidebar .small,.sidebar h2{display:block;color:#ffd0da}.content{gap:.65rem;min-width:0;width:100%;max-width:100%;overflow-x:hidden;overflow-y:visible;padding-right:0}.mobile-appbar{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:.5rem;width:100%;border:1px solid var(--border);border-radius:14px;background:color-mix(in oklab,var(--surface) 88%,transparent);padding:.45rem .5rem}.mobile-appbar h2{margin:0;font-size:.95rem;text-align:center;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-appbar-btn{border:1px solid var(--border);background:color-mix(in oklab,var(--surface-strong) 94%,transparent);color:var(--text);width:40px;height:40px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:1rem}.topbar{position:static;flex-direction:row;align-items:center;justify-content:space-between;padding:.85rem;border-radius:14px}.topbar-right{margin-left:auto;justify-content:flex-end;gap:.4rem}.card,.glass{padding:.82rem;border-radius:14px}.sidebar-nav{margin-top:.6rem;gap:.35rem;overflow-y:auto;max-height:56svh;padding-right:.15rem;scroll-snap-type:none}.nav-btn{color:#ffe8ed;white-space:normal;text-align:left;min-height:44px;padding:.58rem .65rem;font-size:.9rem;border-radius:10px;border-color:rgba(255,178,196,.2);background:rgba(255,255,255,.02)}.nav-btn.active,.nav-btn:hover{background:rgba(160,20,50,.26);border-color:rgba(190,45,78,.5);transform:none}.sidebar-account{border-top-color:rgba(255,178,196,.24)}.account-btn{color:#ffe5ea;min-height:42px}.account-btn:hover{background:rgba(160,20,50,.22);border-color:rgba(190,45,78,.48);transform:none}.quick-grid{grid-template-columns:1fr 1fr;gap:.55rem}.quick-link{padding:.8rem;font-size:.95rem;text-align:center}.punch-row{flex-direction:column;align-items:stretch}.punch-row .btn{width:100%;min-height:46px;font-size:1rem}.home-punch-table{min-width:0;width:100%}.home-punch-table.compact td,.home-punch-table.compact th{font-size:.8rem;padding:.35rem .4rem}.filters-row{grid-template-columns:1fr}table td,table th{font-size:.86rem;padding:.45rem}.table-wrap .btn{width:100%}.home-punch-table .btn{width:auto;min-height:38px;font-size:.82rem;padding:.4rem .5rem;white-space:nowrap}.home-punch-table.compact td:last-child{text-align:center}.table-wrap{padding-bottom:.2rem}.users-desktop-table{display:none}.users-mobile-list{display:grid;gap:.7rem}.leaflet-map{height:300px}.profile-media-row{flex-direction:column;align-items:flex-start}.route-page{padding:calc(.8rem + env(safe-area-inset-top)) .7rem calc(.8rem + env(safe-area-inset-bottom))}}@media (max-width:560px){.auth-bg{padding:.9rem}.quick-grid{grid-template-columns:1fr}input,select,textarea{min-height:42px}.leaflet-map{height:240px}.topbar h1{font-size:1.2rem;line-height:1.2}.topbar .muted{font-size:.82rem}.topbar-right .row{display:none}.mobile-menu-floating{width:38px;height:38px}}