.kiosk-root{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;background:#fff;font-family:var(--kiosk-sans);overflow:hidden;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.k-header{display:flex;align-items:center;justify-content:space-between;padding:clamp(12px,2.2vh,22px) clamp(16px,3vw,32px) clamp(12px,2.2vh,22px) clamp(60px,8vw,80px);background:#fff;flex-shrink:0;z-index:2}.k-brand{display:flex;align-items:center;gap:14px}.k-logo{width:clamp(44px,6vw,64px);height:clamp(44px,6vw,64px);border-radius:10px;object-fit:contain;flex-shrink:0}.k-logo-placeholder{width:clamp(44px,6vw,64px);height:clamp(44px,6vw,64px);border-radius:10px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:var(--primary);flex-shrink:0}.k-school-name{font-size:clamp(18px,2.4vw,26px);font-weight:800;color:var(--primary);letter-spacing:-.01em;line-height:1.1}.k-welcome{font-size:clamp(16px,2vw,22px);font-weight:600;color:#3a3f47;text-align:right}.k-middle{position:relative;flex:1;overflow:hidden}.k-bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}.k-bg img{width:100%;height:100%;object-fit:cover;display:block}.k-bg-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#141c2d1f;pointer-events:none}.k-prompt{position:absolute;top:clamp(8px,1.5vh,16px);left:0;right:0;z-index:2;text-align:center;font-size:clamp(14px,1.8vw,18px);font-weight:700;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5);pointer-events:none}.k-tiles{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:grid;grid-template-columns:repeat(2,minmax(0,480px));grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(12px,1.8vw,20px);justify-content:center;align-content:center;padding:clamp(40px,6vh,60px) clamp(16px,4vw,48px) clamp(16px,2vh,28px)}.k-tile{position:relative;border-radius:6px;background:var(--tile-colour, var(--primary));box-shadow:0 2px 8px #00000040;cursor:pointer;transition:filter .15s,transform .12s;min-height:clamp(120px,22vh,240px);overflow:hidden}.k-tile:hover{filter:brightness(1.08);transform:translateY(-2px)}.k-tile:active{transform:translateY(0);filter:brightness(.96)}.k-tile-label{position:absolute;top:clamp(14px,2.5vh,24px);left:clamp(16px,2.5vw,26px);font-size:clamp(18px,2.4vw,28px);font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.2}.k-tile-sub{position:absolute;top:clamp(36px,5.5vh,56px);left:clamp(16px,2.5vw,26px);font-size:clamp(12px,1.4vw,16px);font-weight:500;color:#ffffffb3}.k-tile-icon{position:absolute;bottom:clamp(12px,2vh,20px);right:clamp(14px,2vw,22px);font-size:clamp(42px,6vw,64px);color:#ffffffe6;line-height:1}.k-footer{display:flex;align-items:center;justify-content:space-between;padding:clamp(8px,1.2vh,14px) clamp(16px,3vw,28px);background:#fff;flex-shrink:0;z-index:2;min-height:50px}.k-onsite{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-soft);font-weight:500}.k-dot{width:8px;height:8px;border-radius:50%;background:#15803d;flex-shrink:0}.k-status-icons{display:flex;align-items:center;gap:clamp(12px,2vw,22px)}.k-status-icon{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-faint)}.k-status-icon i{font-size:clamp(18px,2.2vw,24px)}.k-status-icon.ok i{color:#15803d}.k-status-icon.warn i{color:#b45309}.k-status-icon.off i{color:#d1d5db}.k-fs-btn{border:1px solid var(--line);background:transparent;border-radius:7px;padding:5px 10px;font-size:12px;font-weight:500;color:var(--ink-faint);cursor:pointer;display:flex;align-items:center;gap:5px}.k-fs-btn:hover{color:var(--ink);background:var(--line-soft)}.k-view{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;background:#fff;z-index:10}.k-view-header{display:flex;align-items:center;gap:14px;padding:clamp(12px,2vh,20px) clamp(16px,3vw,28px);border-bottom:1px solid var(--line);flex-shrink:0}.k-back{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-soft);flex-shrink:0}.k-back:hover{background:var(--line-soft);color:var(--ink)}.k-view-title{font-size:clamp(18px,2.2vw,26px);font-weight:700;color:var(--ink)}.k-view-sub{font-size:14px;color:var(--ink-soft);margin-top:2px}.k-search-wrap{padding:clamp(12px,1.5vh,18px) clamp(16px,3vw,28px);flex-shrink:0}.k-search{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:12px;padding:12px 16px;background:var(--surface)}.k-search input{border:0;outline:0;font-family:var(--kiosk-sans);font-size:clamp(16px,2vw,22px);flex:1;color:var(--ink);background:transparent}.k-search input::placeholder{color:var(--ink-faint)}.k-search i{font-size:22px;color:var(--ink-faint)}.k-name-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(160px,18vw,220px),1fr));gap:clamp(8px,1.2vw,14px);padding:0 clamp(16px,3vw,28px) clamp(16px,2vh,24px);overflow-y:auto;flex:1;align-content:start}.k-namecard{border:1.5px solid var(--line);border-radius:12px;padding:clamp(12px,1.4vw,16px);cursor:pointer;display:flex;align-items:center;gap:12px;background:var(--surface);transition:.12s;min-height:clamp(60px,8vh,80px)}.k-namecard:hover{border-color:var(--primary);background:var(--primary-light);transform:translateY(-1px)}.k-namecard .av{width:clamp(36px,4.5vw,50px);height:clamp(36px,4.5vw,50px);border-radius:10px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:clamp(13px,1.5vw,17px);font-weight:800;color:var(--primary);flex-shrink:0}.k-namecard .nm{font-size:clamp(14px,1.6vw,18px);font-weight:700;line-height:1.2}.k-namecard .role{font-size:12px;color:var(--ink-faint);font-weight:500}.k-namecard .in-badge{font-size:11px;font-weight:700;color:#15803d}.k-action-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(16px,2.5vh,28px);padding:24px}.k-action-person{text-align:center;margin-bottom:8px}.k-action-person .av-lg{width:clamp(64px,8vw,88px);height:clamp(64px,8vw,88px);border-radius:18px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:clamp(22px,3vw,32px);font-weight:800;color:var(--primary);margin:0 auto 14px}.k-action-person .name{font-size:clamp(22px,2.8vw,32px);font-weight:800;color:var(--ink)}.k-action-person .sub{font-size:15px;color:var(--ink-soft);margin-top:4px}.k-action-btns{display:flex;flex-direction:column;gap:14px;width:100%;max-width:480px}.k-action-btn{border:0;border-radius:14px;padding:clamp(18px,2.5vh,26px) 24px;font-family:var(--kiosk-sans);font-size:clamp(18px,2.2vw,24px);font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:14px;transition:.14s}.k-action-btn:hover{filter:brightness(1.06);transform:translateY(-2px)}.k-btn-in{background:var(--primary);color:#fff}.k-btn-out{background:#f0f2f5;color:var(--ink);border:1.5px solid var(--line)}.k-btn-abs{background:#fff7ed;color:#92400e;border:1.5px solid #fed7aa}.k-btn-late{background:#fef3c7;color:#92400e;border:1.5px solid #fde68a}.k-confirm{position:fixed;top:0;right:0;bottom:0;left:0;background:#1a1f2e66;display:flex;align-items:center;justify-content:center;z-index:50;padding:32px}.k-confirm-card{background:#fff;border-radius:20px;padding:clamp(28px,5vw,52px);text-align:center;max-width:440px;width:100%;box-shadow:0 24px 60px #0003}.k-confirm-icon{width:clamp(64px,8vw,88px);height:clamp(64px,8vw,88px);border-radius:50%;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;font-size:clamp(28px,3.5vw,40px)}.k-confirm-icon.in{background:#dcfce7;color:#15803d}.k-confirm-icon.out{background:#fee2e2;color:#991b1b}.k-confirm-icon.abs{background:#fef3c7;color:#92400e}.k-confirm-ttl{font-size:clamp(22px,2.8vw,32px);font-weight:800;margin-bottom:6px}.k-confirm-who{font-size:clamp(16px,2vw,22px);font-weight:600;margin-bottom:4px}.k-confirm-meta{color:var(--ink-soft);font-size:clamp(13px,1.5vw,16px)}.k-confirm-auto{margin-top:14px;font-size:13px;color:var(--ink-faint)}.k-emergency{position:fixed;top:0;right:0;bottom:0;left:0;background:#7f1d1d;z-index:50;display:flex;flex-direction:column;padding:clamp(16px,3vw,32px)}.k-emergency-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.k-emergency-title{font-size:clamp(20px,3vw,32px);font-weight:800;color:#fff}.k-emergency-sub{font-size:14px;color:#ffffffb3;margin-top:3px}.k-emergency-stats{display:flex;gap:14px;margin-bottom:18px}.k-estat{background:#ffffff1f;border-radius:12px;padding:14px 20px;flex:1;text-align:center}.k-estat-num{font-size:clamp(28px,4.5vw,48px);font-weight:800;color:#fff}.k-estat-lbl{font-size:13px;color:#ffffffb3}.k-estat.ok{background:#15803d66;border:1px solid rgba(255,255,255,.3)}.k-elist{flex:1;overflow-y:auto;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(clamp(180px,22vw,260px),1fr));align-content:start}.k-eperson{background:#ffffff1f;border-radius:12px;padding:14px 16px;cursor:pointer;display:flex;align-items:center;gap:12px;border:2px solid transparent;transition:.15s}.k-eperson.ticked{background:#15803d66;border-color:#fff6}.k-eperson .av{width:36px;height:36px;border-radius:9px;background:#fff3;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff;flex-shrink:0}.k-eperson .nm{font-size:14px;font-weight:700;color:#fff;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.k-eperson .tp{font-size:11px;color:#fff9;text-transform:capitalize}.k-form-wrap{flex:1;overflow-y:auto;padding:clamp(16px,2.5vw,28px) clamp(16px,3vw,32px);display:flex;flex-direction:column;gap:14px}.k-field label{display:block;font-size:13px;font-weight:700;color:var(--ink-soft);margin-bottom:7px;letter-spacing:.02em;text-transform:uppercase}.k-field input,.k-field select,.k-field textarea{width:100%;border:1.5px solid var(--line);border-radius:11px;padding:clamp(13px,1.8vh,18px) clamp(14px,1.8vw,18px);font-family:var(--kiosk-sans);font-size:clamp(16px,1.9vw,20px);color:var(--ink);background:var(--surface);outline:0}.k-field input:focus,.k-field select:focus{border-color:var(--primary)}.k-cta{width:100%;border:0;border-radius:12px;padding:clamp(16px,2.2vh,22px);font-family:var(--kiosk-sans);font-size:clamp(16px,2vw,22px);font-weight:700;cursor:pointer;color:#fff;background:var(--primary);display:flex;align-items:center;justify-content:center;gap:10px;transition:.14s;flex-shrink:0}.k-cta:hover{filter:brightness(1.07)}.k-cta:disabled{opacity:.4;cursor:default}.k-reason-list{display:flex;flex-direction:column;gap:10px;flex:1;overflow-y:auto}.k-reason-opt{border:1.5px solid var(--line);border-radius:13px;padding:clamp(14px,2vh,20px) 18px;cursor:pointer;display:flex;align-items:center;gap:14px;background:var(--surface);transition:.12s;font-size:clamp(15px,1.8vw,20px);font-weight:600;color:var(--ink)}.k-reason-opt.selected{border-color:var(--primary);background:var(--primary-light);color:var(--primary)}.k-reason-opt i{font-size:24px;flex-shrink:0}.k-abs-list{display:flex;flex-direction:column;gap:10px;flex:1;overflow-y:auto}.k-abs-opt{border:1.5px solid var(--line);border-radius:13px;padding:clamp(14px,2vh,20px) 18px;cursor:pointer;display:flex;align-items:center;gap:12px;background:var(--surface);transition:.12s;font-size:clamp(15px,1.8vw,20px);font-weight:600;color:var(--ink)}.k-abs-opt.selected{border-color:var(--primary);background:var(--primary-light)}.k-login{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:var(--canvas)}.k-login-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:36px;width:100%;max-width:380px}.k-login-card h1{font-size:22px;font-weight:800;margin-bottom:4px;color:var(--primary)}.k-login-card p{font-size:14px;color:var(--ink-soft);margin-bottom:22px}.k-loading{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--ink-soft);font-size:16px;gap:12px}:root{--primary: #1e4d9b;--primary-dark: #163a75;--primary-light: #e8eef8;--sidebar: #1e4d9b;--sidebar-text: #ffffff;--tile-visitor: #1e4d9b;--tile-staff: #1e4d9b;--tile-dbs: #1e4d9b;--tile-late: #1e4d9b;--ink: #1a1f2e;--ink-soft: #5a6070;--ink-faint: #9aa0a8;--line: #e5e7eb;--line-soft: #f3f4f6;--canvas: #f5f6f8;--surface: #ffffff;--warn: #b91c1c;--ok: #15803d;--amber: #b45309;--r: 10px;--r-lg: 16px;--r-sm: 6px;--sans: "Inter", "Open Sans", system-ui, sans-serif;--kiosk-sans: "Open Sans", system-ui, sans-serif;--shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.06)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:var(--sans);color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased}button{font-family:inherit}a{color:var(--primary);text-decoration:none}.shell{min-height:100%;display:grid;grid-template-columns:240px 1fr}.shell-side{background:var(--sidebar);display:flex;flex-direction:column;padding:0;min-height:100vh}.shell-logo{display:flex;align-items:center;gap:12px;padding:20px 20px 16px;border-bottom:1px solid rgba(255,255,255,.1)}.shell-logo img{width:36px;height:36px;border-radius:8px;object-fit:contain;background:#ffffff26}.shell-logo .mark{width:36px;height:36px;border-radius:8px;background:#ffffff26;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}.shell-logo .org{font-size:14px;font-weight:700;color:#ffffffe6;line-height:1.2}.shell-nav-list{padding:12px 10px;flex:1;display:flex;flex-direction:column;gap:2px}.shell-nav{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:8px;color:#ffffffa6;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;transition:.12s}.shell-nav:hover{background:#ffffff1a;color:#fff}.shell-nav.active{background:#ffffff2e;color:#fff}.shell-nav i{font-size:18px;flex-shrink:0}.shell-foot{padding:14px 16px;border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:10px;font-size:13px;color:#ffffff80}.shell-main{padding:28px 32px;overflow-y:auto}.page-title{font-size:26px;font-weight:700;color:var(--ink);margin-bottom:20px}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}.err{background:#fee2e2;color:#991b1b;border-radius:8px;padding:10px 14px;font-size:14px;margin-bottom:14px}.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600}.badge-green{background:#dcfce7;color:#15803d}.badge-red{background:#fee2e2;color:#991b1b}.badge-amber{background:#fef3c7;color:#92400e}.badge-blue{background:#dbeafe;color:#1d4ed8}.badge-grey{background:var(--line-soft);color:var(--ink-soft)}.btn{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:9px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:.12s}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark)}.btn-secondary{background:var(--surface);color:var(--ink);border:1px solid var(--line)}.btn-secondary:hover{background:var(--line-soft)}.btn-danger{background:var(--warn);color:#fff}.btn:disabled{opacity:.5;cursor:default}.field{margin-bottom:16px}.field label{display:block;font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:6px}.field input,.field select,.field textarea{width:100%;border:1.5px solid var(--line);border-radius:9px;padding:10px 13px;font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--surface);outline:0}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary)}.tbl{width:100%;border-collapse:collapse;font-size:14px}.tbl th{padding:10px 14px;text-align:left;font-size:11px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--line);background:var(--canvas)}.tbl td{padding:11px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle}.tbl tr:last-child td{border-bottom:none}.tbl tr:hover td{background:var(--line-soft)}.spinner{width:22px;height:22px;border:2.5px solid var(--line);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.modal-bg{position:fixed;top:0;right:0;bottom:0;left:0;background:#1a1f2e73;display:flex;align-items:center;justify-content:center;z-index:100;padding:24px}.modal-box{background:var(--surface);border-radius:var(--r-lg);box-shadow:0 20px 60px #0003;width:100%;padding:24px}.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.modal-head h2{font-size:18px;font-weight:700}.modal-close{border:0;background:var(--line-soft);border-radius:8px;width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink-soft)}.modal-close:hover{background:var(--line)}