:root{--green:#075a46;--green2:#0e8965;--mint:#e4f5eb;--paper:#fff;--bg:#eff6f2;--ink:#113b33;--muted:#687d76;--line:#dceae3;--warn:#b97424;--red:#b94f4a;--shadow:0 15px 50px rgba(5,72,52,.07)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'IBM Plex Sans Thai',system-ui,sans-serif;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.43;cursor:not-allowed}a{color:inherit}h1,h2,h3,p{margin-top:0}h1,h2{font-family:Kanit,'IBM Plex Sans Thai',sans-serif;line-height:1.28}h1{font-size:clamp(28px,3.3vw,40px);font-weight:600;margin-bottom:10px}h2{font-size:22px;font-weight:600;margin-bottom:5px}.attendance-app{max-width:1440px;margin:0 auto;min-height:100vh}.topbar{background:var(--paper);padding:12px clamp(16px,3vw,32px);display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.home-link{display:grid;place-items:center;width:41px;height:41px;border-radius:13px;background:#e5f3ec;color:var(--green);font-size:26px;text-decoration:none}.top-brand{display:flex;align-items:center;gap:12px;min-width:0;flex:1}.brand-logo{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#086548;color:#fff;font-size:26px}.top-brand b{font-size:16px;display:block}.top-brand em{color:#10885c;font-style:normal}.top-brand small{display:block;color:var(--muted);font-size:11px}.operator{color:var(--green);border:1px solid #d9ebe0;border-radius:999px;background:#eaf7ef;padding:8px 12px;font-size:12px;font-weight:600;text-align:center;white-space:nowrap}main{padding:26px clamp(14px,3vw,38px) 45px}.hero{background:linear-gradient(117deg,#083d33 0%,#096b50 64%,#148a66 100%);color:#fff;border-radius:26px;padding:32px;display:flex;align-items:center;justify-content:space-between;gap:20px;box-shadow:var(--shadow)}.hero p{color:#bfe4d4;margin:0;line-height:1.8;max-width:700px;font-size:14px}.overline{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#279977;margin-bottom:7px}.hero .overline{color:#97d8c2}.hero-count{display:grid;place-items:center;min-width:112px;min-height:112px;border:1px solid #63af95;border-radius:20px;background:#ffffff12}.hero-count b{font-size:43px;line-height:1}.hero-count small{font-size:12px;opacity:.8}.notice{padding:13px 16px;margin:18px 0;border-radius:13px;background:#e1f5e9;color:var(--green);border:1px solid #b8e5c8;font-size:13px;line-height:1.6}.notice.error{background:#fff1ee;color:#a6392f;border-color:#f2c7bf}.access-gate{margin:24px auto;max-width:600px;border:1px solid var(--line);background:#fff;border-radius:20px;text-align:center;padding:38px 25px}.access-mark{font-size:40px;margin-bottom:10px}.access-gate p{color:var(--muted)}.btn{min-height:43px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:11px 16px;font-weight:700;line-height:1.3;font-size:13px;text-decoration:none;transition:transform .16s ease,background .16s ease}.btn:active,.status-btn:active{transform:scale(.97)}.btn.primary{background:#0b865e;color:#fff}.btn.primary:hover{background:#08754f}.btn.outline{background:#ecf5f0;border:1px solid #c9e5d6;color:#08674b}.btn.outline:hover{background:#e0efe6}.activity-panel,.roster-panel,.officer-panel{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;margin-top:23px;box-shadow:var(--shadow)}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}.section-head h2{margin:0}.section-head p{color:var(--muted);font-size:13px;margin:4px 0 0}.count-pill{color:var(--green);background:#e5f6ed;border-radius:99px;padding:8px 14px;font-size:12px;font-weight:700}.activity-switcher{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}.activity-tab{min-width:0;text-align:left;display:flex;gap:12px;align-items:flex-start;padding:17px 18px;border:1.5px solid var(--line);border-radius:17px;background:#f7faf8;color:var(--ink);transition:background .2s,border .2s}.activity-tab:hover{background:#edf7f1}.activity-tab.active{border-color:#139a71;background:#e9f8ee;box-shadow:0 0 0 2px #16876716}.tab-number{display:grid;place-items:center;border-radius:12px;background:#dcf0e4;color:var(--green);font-weight:800;width:36px;height:36px;flex:none}.activity-tab.active .tab-number{background:#137d5d;color:#fff}.tab-copy{min-width:0}.tab-copy b{font-size:15px;display:block;margin-bottom:3px}.tab-copy small{color:#67837a;font-size:12px;line-height:1.5;display:block}.activity-detail{border-radius:17px;background:#f6faf8;border:1px solid #e2eee8;padding:20px}.activity-detail-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.activity-detail-top h2{margin:0}.pill{font-weight:700;font-size:12px;border-radius:20px;white-space:nowrap;padding:6px 12px}.pill.planned{background:#fff3e1;color:#9d6624}.pill.open{background:#d8f5e8;color:#0b7652}.pill.closed{background:#eceff1;color:#50656c}.activity-info{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:19px 0}.activity-info>div{display:flex;flex-direction:column;gap:5px}.activity-info span{color:var(--muted);font-size:12px}.activity-info strong{font-size:14px;line-height:1.65}.activity-description{font-size:13px;color:var(--muted);line-height:1.75;margin:0}.activity-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:20px}.info-chip{font-size:12px;color:#5e756c}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:20px}.stat{background:#fff;border:1px solid var(--line);border-radius:19px;padding:17px 18px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--shadow)}.stat span{color:var(--muted);font-size:12px}.stat strong{font-family:Kanit,system-ui,sans-serif;font-size:36px;font-weight:600;line-height:1.2;letter-spacing:-1px}.stat small{color:#81958c;font-size:11px}.stat.total strong{color:#2d6653}.stat.present strong{color:#08845d}.stat.waiting strong{color:#b58434}.stat.absent strong{color:#c15a50}.progress-card{background:#fff;border:1px solid var(--line);padding:17px 20px;border-radius:17px;margin-top:14px}.progress-top{display:flex;justify-content:space-between;font-size:13px}.progress-top span{color:#13805d;font-weight:700}.progress-track{background:#e5ede8;height:10px;border-radius:15px;margin:12px 0;overflow:hidden}.progress-track>div{height:100%;background:linear-gradient(90deg,#15a978,#3ac496);border-radius:15px;width:0%;transition:width .32s}.sync-line{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:11px;color:var(--muted)}.live-dot{display:inline-block;width:8px;height:8px;background:#27aa77;border-radius:50%;margin-right:6px;vertical-align:middle}.filters{display:flex;gap:12px;align-items:end}.search-box,.filter-box{display:flex;gap:10px;align-items:center;border:1px solid #d7e7de;border-radius:13px;background:#f8fbf9;padding:0 12px;height:47px}.search-box{flex:1;min-width:0}.search-box span{font-size:27px;color:#78a291}.search-box input{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:14px}.filter-box{font-size:12px;color:var(--muted)}.filter-box select{border:0;background:transparent;color:var(--green);font-weight:600;outline:0;font-size:13px}.roster-total{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:12px;padding:15px 3px 11px}.roster-list{display:grid;gap:8px}.person{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;background:#fff;border:1px solid #e3ece7;border-radius:15px;padding:13px 16px}.person:hover{border-color:#b3dcca;background:#fbfefc}.person-number{width:34px;height:34px;border-radius:11px;background:#eaf4ed;color:#1d8a62;display:grid;place-items:center;font-weight:700;font-size:12px}.person-name{font-weight:700;font-size:14px;margin-bottom:3px}.person-code{font-size:12px;color:#71867e}.person-code .timestamp{margin-left:8px;font-size:11px;color:#95a8a1}.person-control{display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap}.person-pill{border-radius:999px;padding:6px 10px;font-size:11px;white-space:nowrap;font-weight:700}.person-pill.unmarked{background:#edf1ee;color:#73867c}.person-pill.present{background:#d9f4e7;color:#0e865b}.person-pill.late{background:#fff1d9;color:#aa7324}.person-pill.absent{background:#ffedeb;color:#bd514b}.person-pill.excused{background:#eaf0ff;color:#496ea9}.status-btn{border:1px solid #c5e5d5;background:#ebf8f0;color:#0a7651;padding:8px 11px;font-size:12px;border-radius:10px;font-weight:700;min-height:37px}.status-btn:hover{background:#d9f1e3}.status-btn.secondary{background:#f5f7f5;color:#546d62;border-color:#e2eae5}.person-actions{display:flex;gap:6px}.list-empty{padding:42px;text-align:center;color:var(--muted);border:1px dashed #ccded4;border-radius:15px;font-size:14px}.officer-panel{margin-top:23px}.officer-list{display:grid;gap:8px}.officer-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);padding:12px 15px;border-radius:13px}.officer-row b{font-size:13px}.officer-row small{display:block;color:var(--muted);font-size:12px}.subtle{color:var(--muted);font-size:12px;margin-top:12px}.page-footer{text-align:center;font-size:11px;color:#729184;margin:30px 0 6px}.modal{border:none;outline:none;border-radius:23px;width:min(560px,calc(100vw - 26px));max-height:min(90vh,900px);padding:0;box-shadow:0 25px 100px #143a3080;color:var(--ink)}.modal::backdrop{background:#08281eb5;backdrop-filter:blur(3px)}.modal form{padding:25px;max-height:90vh;overflow:auto}.modal-top{margin-bottom:18px}.modal-top h2{font-size:24px;margin:0 0 7px}.modal-top p{color:var(--muted);font-size:13px;margin:0;line-height:1.7}.modal label{display:block;font-size:13px;font-weight:700;margin:13px 0}.modal label input,.modal label select,.modal label textarea{margin-top:6px;display:block;width:100%;border:1px solid #cfdfd5;border-radius:12px;outline:none;background:#f9fcfa;padding:12px;color:var(--ink);font-size:14px}.modal input:focus,.modal textarea:focus,.modal select:focus{border-color:#16a377;box-shadow:0 0 0 3px #16a37716}.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.modal-actions{display:flex;gap:12px;margin-top:19px;justify-content:flex-end}.warning-note{background:#fff7e9;color:#86682e;border-radius:12px;padding:12px;font-size:12px;line-height:1.7;margin-bottom:0}
@media(max-width:800px){main{padding:18px 15px 30px}.hero{padding:23px;border-radius:20px}.hero-count{min-width:78px;min-height:84px}.hero-count b{font-size:31px}.activity-panel,.roster-panel,.officer-panel{padding:17px;border-radius:19px}.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.stat strong{font-size:31px}.activity-switcher{gap:9px}.activity-tab{padding:13px;gap:9px}.activity-info{grid-template-columns:1fr}.person{grid-template-columns:auto minmax(0,1fr)}.person-control{grid-column:1/-1;justify-content:space-between;padding-top:7px;border-top:1px solid #edf4ef}}
@media(max-width:480px){.operator{font-size:10px;padding:7px 8px;max-width:120px;white-space:normal;line-height:1.4}.brand-logo{width:34px;height:34px}.top-brand{gap:7px}.top-brand b{font-size:12px}.top-brand small{font-size:9px}.topbar{gap:7px;padding:10px}.home-link{width:34px;height:34px;flex:none}.hero{padding:21px 18px}.hero h1{font-size:26px}.hero p{font-size:12px}.hero-count{display:none}.activity-switcher{grid-template-columns:1fr}.activity-tab{padding:13px}.activity-detail{padding:16px}.activity-detail-top h2{font-size:20px}.activity-detail-top{flex-wrap:wrap}.activity-actions .btn{width:100%}.section-head{align-items:flex-start}.section-head h2{font-size:20px}.count-pill{padding:7px 9px;white-space:nowrap}.stats{gap:8px}.stat{padding:14px 12px}.stat strong{font-size:29px}.filters{flex-direction:column;align-items:stretch}.search-box,.filter-box{width:100%}.person{padding:12px}.person-name{font-size:13px}.person-code .timestamp{display:block;margin-left:0}.person-actions{flex:1;justify-content:flex-end}.status-btn{font-size:12px}.modal-grid{grid-template-columns:1fr}.modal-actions .btn{flex:1;padding:11px 7px}.operator{max-width:90px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

.notice:not([hidden]){position:fixed;z-index:80;bottom:calc(18px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(600px,calc(100vw - 30px));margin:0;box-shadow:0 12px 36px rgba(1,54,37,.18)}