@import"https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap";:root{font-family:Noto Sans Thai,sans-serif;color:#243c38;background:#f5f7f8;font-synthesis:none;font-weight:400;--green:#113e38;--muted:#71827e;--border:#e5ebe8;--lime:#d2f58a;--shadow:0 3px 14px #123c3503}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}button{border:0}button:focus-visible,a:focus-visible{outline:3px solid #72a546;outline-offset:4px}a{color:inherit}h1,h2,h3,p{margin-top:0}h1{font-size:1.8rem;line-height:1.5;letter-spacing:-.5px;margin-bottom:5px;font-weight:600}h2{font-size:1.1rem;margin-bottom:5px;font-weight:600}h3{font-size:1rem}p{line-height:1.8;color:var(--muted)}small{font-size:.8rem}button{transition:background .15s,box-shadow .15s}svg{flex-shrink:0}input,select,textarea{width:100%;border:1px solid #dce4e1;border-radius:9px;padding:11px 12px;background:#fff;color:#243c38;outline:none;min-width:0}input:focus,select:focus,textarea:focus{border-color:#407c60;box-shadow:0 0 0 3px #407c6012}input[type=checkbox]{width:17px;height:17px;accent-color:var(--green);flex-shrink:0}label{font-size:.9rem;line-height:1.8}label>input,label>select,label>textarea{display:block;margin-top:6px}form>button{margin-top:18px}button.text-button{background:transparent}.app-shell{display:flex;min-height:100vh}.sidebar{width:250px;background:#fff;border-right:1px solid var(--border);position:fixed;top:0;bottom:0;padding:32px 20px 0;display:flex;flex-direction:column;z-index:20}.brand{text-decoration:none;display:flex;gap:12px;align-items:center;font-size:1.5rem;font-weight:700;padding:0 10px}.brand-symbol{background:var(--green);color:var(--lime);border-radius:12px;display:grid;place-items:center;width:44px;height:44px}.brand small{display:block;font-family:Outfit,sans-serif;font-size:.64rem;letter-spacing:2.7px;color:var(--muted);line-height:1.5}.school-label{display:flex;align-items:center;gap:10px;border:1px solid var(--border);padding:12px;border-radius:9px;margin:32px 0;color:#687c75;font-size:.82rem}.school-label span{overflow-wrap:anywhere}.nav-label{font-size:.73rem;letter-spacing:.7px;color:#8a9894;padding:0 14px;margin-bottom:12px}.nav-item{display:flex;align-items:center;gap:12px;border-radius:8px;width:100%;padding:14px 13px;background:none;color:#75847f;text-align:left;margin:4px 0;font-size:.9rem}.nav-item.active{background:#eef5ef;color:#235644;font-weight:600}.nav-item.active svg:last-child{margin-left:auto}.nav-item:hover{background:#f1f6f3}.sidebar-bottom{margin-top:auto;padding-top:50px}.privacy-card{background:#f8faf7;border:1px solid #e8ede2;border-radius:12px;padding:18px;color:#6a8061}.privacy-card>svg{margin-bottom:12px}.privacy-card strong{display:block;font-size:.86rem;color:#344735}.privacy-card p{font-size:.78rem;line-height:1.9;margin:6px 0 12px}.privacy-card button{background:none;padding:0;display:flex;align-items:center;gap:6px;color:#4a6445;font-size:.73rem}.profile{display:flex;gap:10px;align-items:center;border-top:1px solid var(--border);padding:22px 0;margin-top:24px}.avatar{display:grid;place-items:center;background:#f1e7d7;color:#92683c;border-radius:50%;width:35px;height:35px;font-size:.9rem}.profile>div{flex:1;min-width:0}.profile strong{display:block;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile small{color:var(--muted);font-size:.7rem}.profile button{background:none;color:var(--muted);padding:6px}.sidebar-note{padding:24px 0;text-align:center;font-size:.75rem;color:var(--muted)}main{margin-left:250px;width:calc(100% - 250px)}.topbar{height:78px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 40px}.breadcrumb{display:flex;align-items:center;gap:14px;font-size:.8rem;color:#86948e}.breadcrumb strong{font-weight:500;color:#40564c}.topbar-right{display:flex;gap:22px;align-items:center}.date-top{display:flex;gap:8px;align-items:center;font-size:.8rem;color:var(--muted)}.icon-button{background:transparent;color:#73867e;padding:6px;display:grid;place-items:center;border-radius:6px}.content{max-width:1300px;margin:auto;padding:34px 40px 0}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}.page-heading p:not(.eyebrow){font-size:.88rem;margin-bottom:0}.eyebrow{font-size:.73rem;color:#718c6a;letter-spacing:.3px;font-weight:500;margin-bottom:7px}.tag{display:inline-flex;align-items:center;gap:7px;background:#eff4ef;border:1px solid #e4ebe1;border-radius:6px;padding:5px 9px;font-size:.75rem;color:#506b4b;white-space:nowrap}.heading-icon{background:#e9f0e6;color:#6e885e;padding:16px;border-radius:14px}.card{background:#fff;border:1px solid var(--border);border-radius:13px;padding:24px;box-shadow:var(--shadow);margin-bottom:22px}.card-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:20px}.card-heading h2{margin-bottom:0}.card-heading p{font-size:.8rem;margin:5px 0 0}.card-title{display:flex;gap:9px;align-items:center}.card-title h2{margin:0}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 18px;border-radius:8px;font-size:.88rem;font-weight:500;min-height:46px}.primary{background:var(--green);color:#fff}.primary:hover:not(:disabled){background:#20574b}.secondary{background:#fff;border:1px solid #dce5e0;color:#4a6559}.secondary:hover:not(:disabled){background:#f4f8f5}.full{width:100%}.text-button{display:inline-flex;gap:5px;align-items:center;color:#557447;font-size:.8rem;padding:5px 0}.text-button:hover{text-decoration:underline}.muted{color:var(--muted);font-size:.82rem}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:2px}.stat{display:flex;gap:17px;align-items:flex-start;padding:21px}.stat-icon{background:#f3f6f2;border-radius:10px;width:42px;height:42px;display:grid;place-items:center;color:#70876a}.stat-label{font-size:.78rem;color:var(--muted);display:block;margin-bottom:4px}.stat strong{display:block;font-family:Outfit,Noto Sans Thai,sans-serif;font-weight:500;font-size:1.7rem;line-height:1.4}.stat small{font-size:.74rem;color:#88928f;display:flex;align-items:center;gap:3px;margin-top:5px}.stat .good{color:#578047}.checkin-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(270px,1fr);gap:24px}.camera-card{padding:25px}.step-count{font-family:Outfit,sans-serif;color:#8c9c95;font-size:.8rem}.method-tabs{display:flex;background:#f3f6f5;padding:5px;border-radius:9px;gap:5px;margin-bottom:18px}.method-tabs button{width:50%;padding:10px 6px;display:flex;align-items:center;justify-content:center;gap:9px;border-radius:6px;background:none;font-size:.86rem;color:#85928d}.method-tabs button.selected{background:#fff;box-shadow:0 2px 5px #00000008;color:#315645}.camera-stage{background:#f0f3f1;border:1px solid #e5eae7;border-radius:10px;min-height:325px;aspect-ratio:1.42;position:relative;display:grid;place-items:center;overflow:hidden}.camera-placeholder{text-align:center;padding:20px}.face-frame{display:grid;place-items:center;color:#789384;margin:0 auto 15px;width:106px;height:106px;border:1px dashed #adc3b4;border-radius:26px}.camera-placeholder strong{font-size:.93rem;font-weight:500}.camera-placeholder p{font-size:.77rem;margin:6px 0 17px}.camera-open{color:#45624f;border:1px solid #d0dbd2;background:#fff;font-size:.82rem;min-height:40px;padding:9px 18px}.camera-stage.live{background:#1e2d28}.camera-stage video{width:100%;height:100%;position:absolute;object-fit:cover;transform:scaleX(-1)}.live-tag{position:absolute;top:12px;left:12px;border-radius:6px;background:#143d36ce;padding:5px 9px;color:#fff;font-size:.75rem;z-index:2}.close-camera{position:absolute;right:10px;top:10px;background:#ffffffd9;border-radius:50%;padding:6px;display:grid;place-items:center}.camera-guide{width:49%;height:73%;position:absolute;border:2px dashed #ffffff91;border-radius:45%;pointer-events:none}.kind-options{display:flex;gap:12px;margin:18px 0}.kind-options button{width:50%;display:flex;justify-content:center;align-items:center;gap:9px;border:1px solid var(--border);border-radius:8px;background:#fff;color:#7c8d84;padding:12px}.kind-options button.selected{border-color:#799a6d;background:#f3f8ef;color:#456537}.camera-card>.primary{margin-top:3px}.camera-card>.primary svg:last-child{margin-left:auto}.camera-card>.primary svg:first-child{margin-right:auto}.camera-footnote{font-size:.7rem;display:flex;justify-content:center;align-items:center;gap:5px;margin:14px 0 0;color:#8a9990}.right-column .card{margin-bottom:18px}.time-card{padding:23px;background:var(--green);border-color:var(--green);color:#fff}.time-card .eyebrow{color:#acbfb2}.digital-clock{font-family:Outfit,sans-serif;font-size:2.75rem;letter-spacing:1px;font-weight:400;line-height:1.4}.time-card>p{font-size:.73rem;color:#b1c4b7;margin-bottom:21px}.time-rule{border-top:1px solid #ffffff26;display:flex;justify-content:space-between;padding-top:16px;font-size:.71rem;color:#b2c6ba}.time-rule strong{display:block;font-family:Outfit,Noto Sans Thai,sans-serif;color:#e8f0e9;font-size:.94rem;font-weight:400;margin-top:6px}.location-card>.card-title{color:#536e47}.location-card>.card-title h2{font-size:.95rem}.location-visual{height:105px;display:flex;justify-content:center;align-items:center;gap:10px;background:repeating-radial-gradient(circle at 50% 50%,transparent 0 25px,#edf1ea 26px 27px,transparent 28px 40px);border-radius:8px;margin:15px 0;background-color:#f8faf6;position:relative}.location-ring{background:#e4efd6;border:1px solid #cbdcbc;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:#6c9252;box-shadow:0 0 0 10px #ebf2e34f}.location-visual>span{position:absolute;right:10px;bottom:8px;font-size:.65rem;color:#99ac8e}.location-card>strong{font-size:.85rem;font-weight:500}.location-card>p{font-size:.74rem;line-height:1.7;margin:4px 0 15px}.location-card>.button{min-height:40px;font-size:.78rem;padding:10px 8px}.face-status{display:flex;gap:12px;padding:6px 6px 18px;color:#7a8c71}.face-status strong{font-size:.81rem;font-weight:500;color:#50634b}.face-status p{font-size:.72rem;line-height:1.7;margin:4px 0}.face-status .text-button{font-size:.72rem;display:flex}.today-history .card-heading{margin-bottom:0}.empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px 15px;color:#9baaa0}.empty strong{color:#6b8073;font-size:.86rem;font-weight:500;margin-top:12px}.empty p{font-size:.77rem;margin:5px 0 0}.today-entry{display:flex;align-items:center;gap:13px;border-top:1px solid var(--border);padding-top:16px;margin-top:16px;font-size:.86rem}.entry-icon{display:grid;place-items:center;background:#f1f6ed;color:#64834b;border-radius:50%;width:35px;height:35px}.today-entry>div{flex:1}.today-entry small{display:block;font-size:.73rem;color:var(--muted)}.today-entry>strong{font-family:Outfit,Noto Sans Thai,sans-serif;font-weight:500}.login-layout{display:grid;grid-template-columns:1.05fr 1fr;gap:26px}.welcome-panel{background:var(--green);color:#fff;border-radius:16px;padding:35px}.welcome-top{display:flex;justify-content:space-between;align-items:center;color:#c9dda8}.small-pill{border:1px solid #b0c59742;border-radius:40px;padding:6px 12px;font-size:.75rem;color:#c1d2bc}.welcome-clock{font-family:Outfit,sans-serif;font-size:5.4rem;font-weight:400;letter-spacing:-2px;margin-top:25px;line-height:1.2}.welcome-clock>span{font-family:Noto Sans Thai,sans-serif;font-size:1rem;letter-spacing:0;color:#b9cbb6;margin-left:12px}.welcome-panel>p{color:#afc5b5;font-size:.8rem;margin-top:8px}.welcome-rule{height:1px;background:#ffffff25;margin:30px 0}.welcome-panel h2{font-size:1.6rem;line-height:1.7;font-weight:500}.welcome-features{display:flex;flex-direction:column;gap:15px;margin-top:25px}.welcome-features span{display:flex;align-items:center;gap:12px;font-size:.86rem;color:#c7d9c3}.welcome-features svg{color:#c6e888}.login-card{padding:42px 32px;text-align:center;display:flex;align-items:center;flex-direction:column;justify-content:center;margin:0}.login-icon{width:62px;height:62px;display:grid;place-items:center;border-radius:16px;color:#6f8949;background:#f0f5e9;margin-bottom:22px}.login-card h2{font-size:1.3rem}.login-card>p{font-size:.85rem;margin-bottom:23px}.google-button{margin:6px 0 12px}.setup-note{display:flex;align-items:center;text-align:left;gap:12px;background:#f6f8f3;border:1px solid #e5eadd;border-radius:9px;padding:15px;font-size:.85rem;line-height:1.8}.setup-note small{font-size:.74rem;color:#829177}.login-divider{display:flex;align-items:center;gap:12px;width:100%;margin:25px 0;color:#91a086;font-size:.72rem}.login-divider:before,.login-divider:after{content:"";flex:1;height:1px;background:var(--border)}.login-card .fine-print{font-size:.71rem;margin:20px 0 8px}.notice,.demo-banner{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:9px;margin-bottom:18px;font-size:.86rem}.notice span{flex:1}.notice button{display:flex;background:none;color:inherit}.notice.error{background:#fff0ed;color:#a84333;border:1px solid #f2d2ca}.notice.success{background:#eaf5e7;color:#44693e;border:1px solid #d5e8ce}.demo-banner{justify-content:space-between;background:#fff6de;border:1px solid #f1e2b9;color:#856a2f;font-size:.8rem}.demo-banner button{display:flex;align-items:center;gap:6px;background:none;color:inherit}.busy{display:flex;align-items:center;gap:8px;color:#64844c;margin-bottom:12px;font-size:.83rem}.spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}.toolbar label{display:flex;align-items:center;gap:12px}.toolbar input{width:auto;margin-top:0}.toolbar>div{display:flex;gap:10px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:.84rem}th{font-size:.75rem;font-weight:500;color:#839487;background:#f8faf7;padding:13px 15px;white-space:nowrap}td{padding:16px 15px;border-bottom:1px solid #eef1ec;vertical-align:top}tr:last-child td{border-bottom:0}td strong{font-weight:500}td small{display:block;color:#829181;font-size:.73rem;margin-top:3px}.photo-label{color:#a17f42}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.wide{grid-column:1/-1}.form-section{margin-top:30px;padding-top:24px;border-top:1px solid var(--border)}.weekdays{display:flex;gap:14px;flex-wrap:wrap;margin:19px 0}.weekdays label{display:flex;align-items:center;gap:5px}.weekdays input{margin:0}.section-note{font-size:.82rem}.approval{padding:20px 0;border-top:1px solid var(--border)}.approval>small{display:block;color:var(--muted);margin:4px 0}.checkbox-label,.enroll-consent label{display:flex;align-items:flex-start;gap:8px;font-size:.82rem}.checkbox-label input,.enroll-consent input{margin-top:5px}.button-row{display:flex;gap:10px;margin-top:12px}.enroll-consent{margin:16px 0}.inline-note{background:#faf6e9;border-radius:7px;padding:10px 12px;font-size:.78rem;color:#8b7847;line-height:1.8}.danger{color:#b86652!important}.danger-button{background:#a64d3c;color:#fff}.audit-list{max-height:420px;overflow:auto}.audit-list>div{padding:14px 0;border-top:1px solid var(--border)}.audit-list span,.audit-list small{display:block;font-size:.75rem;color:var(--muted);overflow-wrap:anywhere}.audit-list p{font-size:.85rem;margin-bottom:0}.audit-list details{font-size:.75rem;color:#657963;margin-top:7px}.audit-list pre{white-space:pre-wrap;overflow-wrap:anywhere}footer{border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:12px;padding:23px 0;margin-top:25px;color:#96a298;font-size:.73rem}footer button{font-size:.73rem;background:none;color:inherit}.footer-dot{padding:0 5px}dialog{border:1px solid var(--border);border-radius:16px;max-width:610px;width:calc(100% - 32px);padding:26px;color:#294335;box-shadow:0 15px 70px #0002;max-height:85vh}dialog::backdrop{background:#0e2d276b;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.modal-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:20px}.modal-heading h2{margin:0}.modal-content p{font-size:.9rem}.modal-content h3{margin:23px 0 8px}.modal-content small{color:var(--muted)}.evidence-image{width:100%;border-radius:10px}.mobile-menu{display:none}@media(min-width:1450px){.content{padding-top:40px}.camera-stage{min-height:360px}.sidebar{width:265px}main{margin-left:265px;width:calc(100% - 265px)}}@media(max-width:1100px){.sidebar{width:215px;padding-left:14px;padding-right:14px}main{margin-left:215px;width:calc(100% - 215px)}.content{padding:26px 24px 0}.topbar{padding:0 24px}.checkin-layout{gap:18px;grid-template-columns:minmax(0,1.3fr) minmax(230px,1fr)}.camera-stage{min-height:290px}.camera-card,.card{padding:20px}.stat{gap:10px;padding:17px}.stat-icon{width:35px;height:35px}.stat strong{font-size:1.4rem}.digital-clock{font-size:2.3rem}.welcome-panel{padding:26px}.welcome-clock{font-size:4.1rem}.login-card{padding:28px 22px}.brand{font-size:1.3rem}.profile strong{font-size:.73rem}.date-top{display:none}}@media(max-width:820px){.sidebar{display:none;width:250px;box-shadow:15px 0 30px #0002}.sidebar.open{display:flex}.mobile-menu{display:grid}.topbar{height:65px;gap:12px}.breadcrumb{margin-right:auto}main{width:100%;margin:0}.topbar-right{gap:0}.content{padding:24px 20px 0}.page-heading{margin-bottom:22px}.page-heading h1{font-size:1.45rem}.page-heading>.tag{font-size:.65rem}.checkin-layout{grid-template-columns:minmax(0,1.3fr) minmax(225px,1fr)}.login-layout{gap:18px}.welcome-panel h2{font-size:1.35rem}}@media(max-width:600px){.content{padding:22px 16px 0}.page-heading{align-items:flex-start}.page-heading h1{font-size:1.3rem}.page-heading p:not(.eyebrow){font-size:.78rem}.page-heading>.tag{display:none}.eyebrow{font-size:.7rem}.heading-icon{display:none}.stats-grid{gap:8px}.stat{display:block;padding:13px 10px;border-radius:10px}.stat-icon{width:28px;height:28px;border-radius:7px;margin-bottom:9px}.stat-icon svg{width:16px}.stat-label{font-size:.69rem}.stat strong{font-size:1.18rem}.stat small{font-size:.65rem;gap:1px}.checkin-layout{display:flex;flex-direction:column;gap:0}.right-column{display:grid;grid-template-columns:1fr;gap:0}.time-card{display:none}.camera-stage{aspect-ratio:1.1;min-height:270px}.camera-card{padding:18px}.card-heading h2{font-size:1rem}.card-heading p{font-size:.76rem}.card{margin-bottom:16px}.camera-footnote{font-size:.65rem}.location-visual{display:none}.location-card>.card-title{margin-bottom:15px}.location-card{position:relative}.face-status{padding:3px 5px 18px}.today-history .text-button{font-size:.7rem}.today-entry{flex-wrap:wrap}.today-entry>.tag{margin-left:48px}.login-layout{grid-template-columns:1fr}.welcome-panel{padding:25px}.welcome-clock{font-size:4rem;margin-top:20px}.welcome-rule{margin:21px 0}.welcome-panel h2{font-size:1.3rem}.welcome-panel h2 br{display:none}.welcome-features{gap:10px;margin-top:16px}.welcome-features span{font-size:.8rem}.login-card{padding:28px 23px}.demo-banner{align-items:flex-start;flex-direction:column;font-size:.75rem}.demo-banner button{font-size:.75rem}.toolbar{align-items:stretch;flex-direction:column;gap:12px}.toolbar>div{justify-content:flex-end}.toolbar label{justify-content:space-between}.toolbar input{flex:1}.toolbar .button{padding:10px 13px;font-size:.8rem}.form-grid{grid-template-columns:1fr;gap:14px}.wide{grid-column:auto}.table-wrap{margin:0 -10px}th,td{padding:12px 10px;font-size:.78rem}.report-card{padding:15px}.weekdays{gap:10px}.button-row{flex-wrap:wrap}.breadcrumb{font-size:.73rem;gap:8px}.topbar{padding:0 16px}.section-note{font-size:.78rem}.modal-content p{font-size:.83rem}footer{font-size:.65rem}footer button{font-size:.65rem}.notice{font-size:.8rem;align-items:flex-start}.profile strong{font-size:.85rem}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition:none!important}}