:root{--primary:#1a6b42;--primary-mid:#1e8050;--primary-light:#25a060;--primary-pale:#e8f5ee;--primary-border:#b0d9c1;--danger:#c0392b;--danger-mid:#e74c3c;--surface:#ffffff;--bg:#eef5f1;--text-dark:#1a2e22;--text-muted:#6b7c73;--radius-card:22px;--radius-item:14px;--shadow:0 24px 64px rgba(26,107,66,0.14)}*,::after,::before{box-sizing:border-box;margin:0;padding:0}body{font-family:Sarabun,sans-serif;background:var(--bg);min-height:100dvh;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.app-wrap{max-width:430px;margin:0 auto;padding:14px 14px 36px}.clock-card{background:var(--surface);border-radius:var(--radius-card);box-shadow:var(--shadow);overflow:hidden}.card-header-grad{background:linear-gradient(145deg,#0f3d24 0,var(--primary) 45%,var(--primary-light) 100%);padding:24px 20px 36px;text-align:center;color:#fff;position:relative}.card-header-grad::after{content:'';position:absolute;bottom:0;left:0;right:0;height:28px;background:var(--surface);border-radius:28px 28px 0 0}.header-logo{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);border:2px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-size:1.7rem;margin:0 auto 10px}.header-school{font-size:1.1rem;font-weight:800;letter-spacing:.3px}.header-sub{font-size:.8rem;opacity:.8;margin-top:2px}.card-body{padding:18px 20px 22px}.clock-box{text-align:center;margin-bottom:18px}.clock-time{font-size:3.4rem;font-weight:800;color:var(--primary);line-height:1;letter-spacing:3px;text-shadow:0 2px 8px rgba(26,107,66,.15)}.clock-date{font-size:.88rem;color:var(--text-muted);margin-top:5px}.camera-section{text-align:center;margin-bottom:14px}.camera-ring{width:190px;height:190px;border-radius:50%;margin:0 auto;position:relative;border:4px solid var(--primary);box-shadow:0 0 0 8px rgba(26,107,66,.08),0 8px 32px rgba(26,107,66,.2);background:#111;overflow:hidden}.camera-ring video{width:100%;height:100%;object-fit:cover;display:block;transform:scaleX(-1)}.face-guide-ring{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2}.face-guide-ring::before{content:'';display:block;width:105px;height:130px;border:2px dashed rgba(255,255,255,.55);border-radius:50%}.camera-loading-overlay{position:absolute;inset:0;background:#0d0d0d;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;z-index:3;transition:opacity .5s}.camera-loading-overlay.fade-out{opacity:0;pointer-events:none}.camera-loading-overlay i{font-size:2rem;color:rgba(255,255,255,.4)}.camera-loading-overlay span{font-size:.78rem;color:rgba(255,255,255,.5)}.status-row{display:flex;gap:8px;margin-bottom:16px}.status-pill{flex:1;display:flex;align-items:center;gap:6px;padding:9px 12px;border-radius:50px;font-size:.8rem;font-weight:600;transition:.35s;background:#fff8e1;color:#856404}.status-pill i{font-size:.85rem;flex-shrink:0}.status-pill.ready{background:#d1f0e2;color:#155724}.status-pill.err{background:#fde8ea;color:#842029}.status-pill.clickable{cursor:pointer}.id-label{font-size:.82rem;font-weight:700;color:var(--text-muted);margin-bottom:7px;display:flex;align-items:center;justify-content:space-between;gap:5px}.id-label-text{display:flex;align-items:center;gap:5px}.id-input-wrap{display:flex;align-items:stretch;border:2px solid #d0ddd7;border-radius:var(--radius-item);overflow:hidden;transition:border-color .2s,box-shadow .2s}.id-input-wrap:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px rgba(26,107,66,.1)}.id-input-icon{padding:0 15px;background:var(--primary-pale);display:flex;align-items:center;color:var(--primary);font-size:1.05rem;border-right:2px solid #d0ddd7}.id-input-field{border:none!important;outline:0!important;box-shadow:none!important;flex:1;padding:13px 14px;font-family:Sarabun,monospace;font-size:1.2rem;font-weight:700;letter-spacing:3px;color:var(--text-dark);background:0 0}.id-input-field::placeholder{font-size:1rem;font-weight:400;letter-spacing:2px;color:#ccc}.id-input-field[readonly]{background:#f8faf9;color:var(--text-muted)}.id-input-field.is-name-display{font-family:Sarabun,sans-serif;letter-spacing:normal}.id-input-field.is-name-display.name-length-medium{font-size:1.08rem}.id-input-field.is-name-display.name-length-long{font-size:.98rem}.id-input-field.is-name-display.name-length-xlong{font-size:.9rem}.form-check-label{font-size:.8rem}.btn-change-user{background:0 0;border:none;padding:0;font-family:Sarabun,sans-serif;font-size:.8rem;color:var(--danger);cursor:pointer;text-decoration:underline;font-weight:600}.btn-change-user:hover{color:var(--danger-mid)}.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.btn-stamp{border:none;border-radius:var(--radius-item);min-height:78px;padding:14px 10px;font-family:Sarabun,sans-serif;font-size:1.2rem;font-weight:800;cursor:pointer;transition:.2s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.btn-stamp i{font-size:1.5rem}.btn-stamp:hover{transform:translateY(-3px)}.btn-stamp:active{transform:translateY(0);opacity:.9}.btn-stamp:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}.btn-in{background:linear-gradient(135deg,var(--primary) 0,var(--primary-light) 100%);color:#fff;box-shadow:0 8px 20px rgba(26,107,66,.35);animation:2.5s infinite pulse-btn}.btn-out{background:linear-gradient(135deg,var(--danger) 0,var(--danger-mid) 100%);color:#fff;box-shadow:0 8px 20px rgba(192,57,43,.3)}@keyframes pulse-btn{0%,100%{box-shadow:0 8px 20px rgba(26,107,66,.35)}50%{box-shadow:0 8px 32px rgba(26,107,66,.55)}}.btn-in:disabled{animation:none}.time-window-box{background:var(--primary-pale);border:1.5px solid var(--primary-border);border-radius:var(--radius-item);padding:13px 16px;margin-bottom:18px}.time-window-head{font-size:.8rem;font-weight:700;color:var(--primary);margin-bottom:10px;display:flex;align-items:center;gap:6px}.time-window-row{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;padding:5px 0}.time-window-row+.time-window-row{border-top:1px dashed var(--primary-border)}.tw-label{color:var(--text-muted);display:flex;align-items:center;gap:7px}.tw-value{font-weight:700;color:var(--text-dark)}.badge-dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex-shrink:0}.dot-green{background:#22a060}.dot-red{background:var(--danger-mid)}.sect-divider{border:none;height:1px;background:linear-gradient(90deg,transparent,#dde8e3,transparent);margin:18px 0}.nav-links{display:flex;flex-direction:column;gap:9px;margin-bottom:18px}.nav-link-item{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:var(--radius-item);border:1.5px solid;text-decoration:none;font-family:Sarabun,sans-serif;font-size:.9rem;font-weight:600;transition:.2s}.nav-link-item:hover{transform:translateX(4px);text-decoration:none}.nav-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}.nav-text{flex:1;line-height:1.3}.nav-arrow{opacity:.3;font-size:.75rem}.nav-green{color:var(--primary);border-color:var(--primary-border)}.nav-green:hover{background:var(--primary-pale);border-color:var(--primary);color:var(--primary)}.nav-green .nav-icon{background:#c8ebda;color:var(--primary)}.nav-blue{color:#0058cc;border-color:#b3cfff}.nav-blue:hover{background:#eff4ff;border-color:#0058cc;color:#0058cc}.nav-blue .nav-icon{background:#d6e4ff;color:#0058cc}.nav-gray{color:#4a5568;border-color:#c8d0cc}.nav-gray:hover{background:#f5f7f6;border-color:#768089;color:#4a5568}.nav-gray .nav-icon{background:#e4e9e6;color:#5a6872}.admin-box{text-align:center}.btn-admin{display:inline-flex;align-items:center;gap:8px;padding:11px 28px;border-radius:50px;border:1.5px solid #88d8f0;background:#f0faff;color:#0086a8;font-family:Sarabun,sans-serif;font-size:.88rem;font-weight:700;text-decoration:none;transition:.2s}.btn-admin:hover{background:#0dcaf0;color:#fff;border-color:#0dcaf0;transform:translateY(-1px);box-shadow:0 6px 16px rgba(13,202,240,.3)}.admin-note{font-size:.72rem;color:var(--text-muted);margin-top:6px}.pwa-install-box{border-radius:var(--radius-item);margin-bottom:16px;overflow:hidden;display:none;animation:.35s slideDown}@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.pwa-install-box.android-variant{background:linear-gradient(135deg,#fffbea 0,#fff3cd 100%);border:1.5px solid #ffc107}.pwa-install-box.android-variant .pwa-icon-bg{background:#ffc107;color:#5a3e00}.pwa-install-box.android-variant .step-num{background:#d97706}.pwa-install-box.android-variant .step-icon{background:#fef3c7;color:#92400e}.pwa-install-box.ios-variant{background:linear-gradient(135deg,#f0f4ff 0,#e8efff 100%);border:1.5px solid #93b4ff}.pwa-install-box.ios-variant .pwa-icon-bg{background:#3b82f6;color:#fff}.pwa-install-box.ios-variant .step-num{background:#3b82f6}.pwa-install-box.ios-variant .step-icon{background:#e2e8ff;color:#3b82f6}.pwa-install-box.desktop-variant{background:linear-gradient(135deg,#f0fdf4 0,#dcfce7 100%);border:1.5px solid #86efac}.pwa-install-box.desktop-variant .pwa-icon-bg{background:var(--primary);color:#fff}.pwa-header{display:flex;align-items:center;gap:12px;padding:13px 14px 10px}.pwa-icon-bg{width:40px;height:40px;flex-shrink:0;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem}.pwa-header-text{flex:1;min-width:0}.pwa-header-text strong{display:block;font-size:.88rem;color:var(--text-dark);line-height:1.3}.pwa-header-text span{font-size:.76rem;color:var(--text-muted)}.pwa-close-btn{background:0 0;border:none;cursor:pointer;color:var(--text-muted);font-size:1rem;padding:4px;line-height:1;border-radius:50%;transition:background .15s,color .15s;flex-shrink:0}.pwa-close-btn:hover{background:rgba(0,0,0,.07);color:var(--text-dark)}.pwa-body{padding:0 14px 14px}.pwa-steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}.pwa-steps li{display:flex;align-items:flex-start;gap:10px;font-size:.82rem;color:var(--text-dark);line-height:1.45}.step-num{width:22px;height:22px;flex-shrink:0;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;margin-top:1px}.step-icon{display:inline-flex;align-items:center;gap:4px;border-radius:6px;padding:1px 7px;font-size:.78rem;font-weight:700}.pwa-state-button{display:none;margin-top:10px}.btn-install{width:100%;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border:none;border-radius:50px;padding:12px 0;font-family:Sarabun,sans-serif;font-size:.92rem;font-weight:700;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center;gap:8px}.btn-install:hover{box-shadow:0 4px 14px rgba(245,158,11,.5);transform:translateY(-1px)}.desktop-variant .btn-install{background:linear-gradient(135deg,var(--primary),var(--primary-light))}#canvasElement{display:none}.swal2-popup,.swal2-popup *{font-family:Sarabun,sans-serif!important}@keyframes spin{to{transform:rotate(360deg)}}.fa-spin{animation:1s linear infinite spin}