:root{--ink:#17332d;--muted:#6c7e79;--green:#0b6b57;--green2:#18a67f;--mint:#e5f6f0;--cream:#f6f5ee;--card:#fff;--coral:#e36f58;--line:#dfe8e4;--shadow:0 16px 40px rgba(28,70,60,.09)}*{box-sizing:border-box}html{background:var(--cream)}body{margin:0;color:var(--ink);background:linear-gradient(160deg,#f8faf5 0,#eff7f3 55%,#f7f2e8 100%);font-family:'Noto Sans Thai',system-ui,sans-serif;min-height:100vh}.app-shell{max-width:760px;margin:auto;min-height:100vh;background:rgba(255,255,255,.42);position:relative;padding-bottom:88px}.topbar{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid rgba(11,107,87,.08)}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:700}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;color:white;background:var(--green);box-shadow:0 6px 16px rgba(11,107,87,.25)}.text-button{border:0;background:none;color:var(--muted);font:inherit;cursor:pointer}.page{padding:24px 20px}.hero{display:flex;align-items:center;justify-content:space-between;margin:4px 2px 22px}.hero h1,.page-heading h1,.login-wrap h1{font-size:clamp(1.7rem,7vw,2.35rem);line-height:1.15;margin:5px 0}.hero p,.page-heading p,.lead{color:var(--muted);margin:5px 0}.eyebrow{font-weight:600!important;font-size:.83rem!important;letter-spacing:.04em;color:var(--green)!important}.avatar{display:grid;place-items:center;width:58px;height:58px;border-radius:19px;background:var(--mint);color:var(--green);font-size:1.45rem;font-weight:700;overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover;display:block}.card{background:var(--card);border:1px solid rgba(11,107,87,.08);border-radius:22px;box-shadow:var(--shadow)}.clock-card{padding:27px;text-align:center}.live-clock{font-size:3.8rem;line-height:1;font-weight:700;letter-spacing:-.06em}.location-state{margin:12px 0 25px;font-size:.84rem;color:var(--green)}.location-state.muted{color:var(--muted)}.clock-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:20px}.clock-grid div{padding:17px}.clock-grid div+div{border-left:1px solid var(--line)}.clock-grid span,.time-row span,.record-main span,.history-top span{display:block;color:var(--muted);font-size:.8rem}.clock-grid strong{font-size:1.25rem}.button{border:0;border-radius:14px;padding:13px 18px;text-decoration:none;font:600 .95rem inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.button.primary{background:linear-gradient(135deg,var(--green),var(--green2));color:#fff;box-shadow:0 10px 22px rgba(11,107,87,.22)}.button.coral{background:var(--coral);color:#fff}.button.subtle{background:var(--mint);color:var(--green);padding:9px 13px}.button.full{width:100%}.complete-state{padding:13px;border-radius:14px;background:var(--mint);color:var(--green);font-weight:600}.section-heading{display:flex;align-items:center;justify-content:space-between;margin:28px 3px 12px}.section-heading h2{margin:0;font-size:1.15rem}.section-heading a,.back-link{color:var(--green);text-decoration:none;font-weight:600}.record-list,.history-list{display:grid;gap:11px}.record{display:flex;align-items:center;gap:13px;padding:13px}.date-tile{width:48px;height:52px;border-radius:14px;background:var(--mint);display:grid;place-content:center;text-align:center;color:var(--green)}.date-tile strong{font-size:1.15rem;line-height:1}.date-tile span{font-size:.7rem;text-transform:uppercase}.record-main{flex:1}.record-main strong{display:block}.pill,.status{font-size:.72rem;padding:6px 9px;border-radius:999px;background:#fff2d9;color:#8d6415;white-space:nowrap}.page-heading{margin:6px 2px 22px}.history-card{padding:18px}.history-top,.history-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}.time-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:17px 0;padding:15px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.time-row div+div{border-left:1px solid var(--line);padding-left:12px}.time-row strong{font-size:.93rem}.status.present{background:var(--mint);color:var(--green)}.status.late,.status.early-leave{background:#fff2d9;color:#8d6415}.request-state{color:var(--muted);font-size:.8rem}.login-wrap{max-width:440px;margin:8vh auto 0;text-align:center}.welcome-badge{display:inline-block;padding:7px 11px;border-radius:999px;background:var(--mint);color:var(--green);font-size:.78rem;font-weight:600}.form-card{padding:22px;text-align:left;margin-top:25px}.form-card label{display:block;font-size:.85rem;font-weight:600;margin:13px 0 7px}.form-card input,.form-card textarea,.form-card select{width:100%;border:1px solid var(--line);border-radius:13px;padding:13px 14px;background:#fbfdfc;color:var(--ink);font:inherit;outline:none}.form-card input:focus,.form-card textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(11,107,87,.1)}.form-card .button{margin-top:20px}.helper{color:var(--muted);font-size:.8rem}.center{text-align:center}.alert{padding:11px 13px;border-radius:12px;margin:12px 0;font-size:.86rem}.alert.error{background:#fff0ed;color:#a53d2d}.alert.success{background:var(--mint);color:var(--green)}.alert.hidden{display:none}.field-error{display:block;color:#a53d2d;margin-top:5px}.empty{padding:28px;text-align:center;color:var(--muted)}.bottom-nav{position:fixed;z-index:10;bottom:0;left:50%;transform:translateX(-50%);width:min(760px,100%);height:72px;padding-bottom:env(safe-area-inset-bottom);display:grid;grid-template-columns:1fr 1fr;background:rgba(255,255,255,.92);backdrop-filter:blur(15px);border-top:1px solid var(--line)}.bottom-nav a{display:grid;place-content:center;text-align:center;gap:2px;color:var(--muted);font-size:.76rem;text-decoration:none}.bottom-nav a span{font-size:1.15rem}.nav-icon{position:relative;display:inline-block}.nav-badge{position:absolute;top:-6px;right:-9px;min-width:16px;height:16px;padding:0 3px;border-radius:999px;background:var(--coral);color:#fff;font-size:.62rem;line-height:16px;text-align:center;font-weight:700}.bottom-nav a.active{color:var(--green);font-weight:700}@media(min-width:640px){.page{padding:34px 44px}.clock-card{padding:34px}.record{padding:16px 18px}}.announcement-list{display:grid;gap:2px;margin-bottom:22px}.announcement-notice{display:flex;align-items:flex-start;gap:14px;padding:16px 4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.announcement-notice+.announcement-notice{border-top:0}.announcement-icon{font-size:1.4rem;line-height:1;flex-shrink:0}.announcement-notice div{display:grid;gap:4px}.announcement-notice strong{color:var(--green);font-size:1rem}.announcement-notice .announcement-date{color:var(--muted);font-size:.76rem}.announcement-notice p{margin:4px 0 0;color:var(--ink);font-size:.88rem;line-height:1.6}.confirm-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(15,35,30,.5);backdrop-filter:blur(2px)}.confirm-overlay.hidden{display:none}.confirm-modal{width:100%;max-width:340px;background:var(--card);border-radius:24px;padding:30px 26px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.28)}.confirm-icon{width:56px;height:56px;margin:0 auto 16px;border-radius:18px;background:var(--mint);color:var(--green);display:grid;place-items:center;font-size:1.6rem}.confirm-modal h2{margin:0 0 8px;font-size:1.2rem}.confirm-modal p{margin:0 0 24px;color:var(--muted);font-size:.9rem}.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.confirm-actions .button.subtle{padding:13px 18px}.view-as-banner{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:11px 22px;background:#fff2cf;color:#7a5700;font-size:.86rem;border-bottom:1px solid #f1d78a;text-align:center}.view-as-banner strong{color:#5c4300}.view-as-banner a{color:#07578f;font-weight:700;text-decoration:underline;white-space:nowrap}