:root{--wrat-ink:#24141e;--wrat-muted:#756873;--wrat-rose:#d70b65;--wrat-plum:#5a1236;--wrat-soft:#fff5f9;--wrat-line:#eadfe5;--wrat-green:#137a57;--wrat-amber:#a46108;--wrat-danger:#b3263e;--wrat-shadow:0 18px 50px rgba(77,18,50,.09)}
*{box-sizing:border-box}body:has(.wrat-app),body:has(.wrat-login-shell){margin:0;background:#fbfafb;color:var(--wrat-ink);font-family:"Noto Sans Thai","Leelawadee UI",Tahoma,sans-serif}.wrat-app button,.wrat-app input,.wrat-app select,.wrat-app textarea,.wrat-login-shell input{font:inherit}.wrat-app{min-height:100dvh;display:grid;grid-template-columns:264px minmax(0,1fr)}.wrat-sidebar{position:sticky;top:0;height:100dvh;padding:30px 22px;background:#fff;border-right:1px solid var(--wrat-line);display:flex;flex-direction:column;z-index:20}.wrat-logo{display:flex;align-items:center;gap:12px;padding:0 10px 28px}.wrat-logo span,.wrat-brand-mark{display:grid;place-items:center;width:48px;height:48px;background:linear-gradient(145deg,var(--wrat-rose),var(--wrat-plum));color:#fff;font-weight:900;border-radius:14px}.wrat-logo small{font-weight:700;color:var(--wrat-plum)}.wrat-nav{display:grid;gap:5px}.wrat-nav button,.wrat-logout{border:0;background:transparent;color:var(--wrat-muted);text-align:left;padding:12px 14px;border-radius:10px;cursor:pointer;text-decoration:none;font-weight:650}.wrat-nav button:hover,.wrat-nav button.is-active{background:var(--wrat-soft);color:var(--wrat-rose)}.wrat-logout{margin-top:auto}.wrat-main{min-width:0}.wrat-topbar{min-height:98px;padding:20px clamp(20px,4vw,54px);display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.94);border-bottom:1px solid var(--wrat-line);position:sticky;top:0;z-index:15}.wrat-topbar h1{font-size:1.35rem;margin:2px 0}.wrat-kicker{margin:0;text-transform:uppercase;letter-spacing:.09em;font-size:.72rem;font-weight:800;color:var(--wrat-rose)}.wrat-profile{display:flex;align-items:center;gap:10px}.wrat-profile>span{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--wrat-soft);color:var(--wrat-rose);font-weight:800}.wrat-profile div{display:grid}.wrat-profile small{color:var(--wrat-muted)}.wrat-menu{display:none;border:0;background:transparent;font-size:1.5rem}.wrat-content{padding:34px clamp(20px,4vw,54px) 60px;max-width:1500px;margin:0 auto}.wrat-hero{min-height:260px;border-radius:28px;background:linear-gradient(115deg,#fff 10%,#fff2f7 100%);border:1px solid #f2dce6;padding:clamp(26px,5vw,56px);display:flex;align-items:center;justify-content:space-between;overflow:hidden}.wrat-hero h2{font-size:clamp(2rem,5vw,4.4rem);line-height:1.05;margin:10px 0}.wrat-hero>div:first-child{max-width:670px}.wrat-time-orbit{width:210px;height:210px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background:#fff;box-shadow:0 0 0 14px rgba(215,11,101,.08),0 0 0 28px rgba(215,11,101,.035);position:relative}.wrat-time-orbit strong{font-size:2rem}.wrat-time-orbit span{color:var(--wrat-muted)}.wrat-time-orbit button,.wrat-primary{border:0;background:var(--wrat-rose);color:#fff;border-radius:11px;padding:12px 20px;font-weight:800;cursor:pointer;box-shadow:0 8px 22px rgba(215,11,101,.23)}.wrat-time-orbit button:active,.wrat-primary:active{transform:scale(.98)}.wrat-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}.wrat-stat,.wrat-card,.wrat-clock-card{background:#fff;border:1px solid var(--wrat-line);border-radius:18px;padding:22px;box-shadow:0 8px 30px rgba(77,18,50,.04)}.wrat-stat{display:flex;align-items:end;justify-content:space-between}.wrat-stat span{color:var(--wrat-muted)}.wrat-stat strong{font-size:2rem}.wrat-stat--present strong{color:var(--wrat-green)}.wrat-stat--late strong{color:var(--wrat-amber)}.wrat-stat--pending strong{color:var(--wrat-rose)}.wrat-grid-2,.wrat-attendance-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:18px}.wrat-card header{display:flex;align-items:center;justify-content:space-between;gap:18px}.wrat-card h3,.wrat-clock-card h3{margin-top:0}.wrat-card--quiet{background:#fffafd}.wrat-details{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.wrat-details div{padding:16px;background:#fcfafb;border-radius:12px}.wrat-details dt{color:var(--wrat-muted);font-size:.85rem}.wrat-details dd{margin:6px 0 0;font-weight:700}.wrat-actions{display:flex;flex-wrap:wrap;gap:8px}.wrat-actions button,.wrat-filter button,.wrat-inline-actions button,.wrat-text-button{border:1px solid var(--wrat-line);background:#fff;color:var(--wrat-plum);padding:9px 13px;border-radius:9px;cursor:pointer}.wrat-status{display:inline-flex;padding:5px 9px;border-radius:8px;background:#f1eef0;color:var(--wrat-muted);font-size:.78rem;font-weight:800}.wrat-status.ok,.wrat-status.approved{background:#e7f7f0;color:var(--wrat-green)}.wrat-status.pending{background:#fff2dc;color:var(--wrat-amber)}.wrat-status.rejected{background:#fde9ed;color:var(--wrat-danger)}.wrat-attendance-layout{align-items:start}.wrat-clock-card{text-align:center;padding:clamp(28px,5vw,56px)}.wrat-live-time{font-size:clamp(3rem,8vw,6rem);font-weight:900;letter-spacing:-.06em;margin:18px 0;color:var(--wrat-plum)}.wrat-location{margin:20px 0;padding:12px;background:var(--wrat-soft);border-radius:11px;color:var(--wrat-plum)}.wrat-selfie{display:grid;gap:10px;text-align:left;margin:18px 0}.wrat-selfie input{border:1px dashed #d7bbc9;padding:18px;border-radius:12px;background:#fff}.wrat-selfie img{width:100%;max-height:300px;object-fit:cover;border-radius:14px}.wrat-primary{width:100%}.wrat-primary--small{width:auto}.wrat-primary:disabled{opacity:.5;cursor:not-allowed}.wrat-clock-card>small{display:block;color:var(--wrat-muted);margin-top:12px}.wrat-checklist{padding-left:1.2rem;line-height:2}.wrat-list{display:grid;gap:10px;margin-top:16px}.wrat-list-item{display:flex;justify-content:space-between;gap:18px;border-top:1px solid var(--wrat-line);padding:15px 0}.wrat-list-item small,.wrat-list-item p{display:block;color:var(--wrat-muted);margin:4px 0}.wrat-inline-actions{display:flex;gap:6px;margin-top:7px}.wrat-form{display:grid;gap:14px}.wrat-form label{display:grid;gap:6px;color:var(--wrat-muted);font-size:.88rem;font-weight:700}.wrat-form input,.wrat-form select,.wrat-form textarea,.wrat-filter input{width:100%;border:1px solid #d9cbd2;border-radius:10px;padding:11px 12px;background:#fff;color:var(--wrat-ink)}.wrat-form input:focus,.wrat-form select:focus,.wrat-form textarea:focus{outline:3px solid rgba(215,11,101,.12);border-color:var(--wrat-rose)}.wrat-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.wrat-table-wrap{overflow:auto;margin-top:16px}table{width:100%;border-collapse:collapse;min-width:760px}th,td{text-align:left;padding:13px;border-bottom:1px solid var(--wrat-line)}th{font-size:.78rem;text-transform:uppercase;color:var(--wrat-muted)}td small{display:block;color:var(--wrat-muted)}.wrat-filter{display:flex;gap:8px;align-items:center}.wrat-settings{max-width:760px}dialog{border:0;border-radius:18px;box-shadow:var(--wrat-shadow);padding:0;width:min(92vw,520px)}dialog::backdrop{background:rgba(36,20,30,.48)}dialog form{padding:24px}dialog header button{border:0;background:transparent;font-size:1.5rem}.wrat-alert{margin:12px clamp(20px,4vw,54px) 0;padding:12px 16px;border-radius:10px;background:#e7f7f0;color:var(--wrat-green);font-weight:700}.wrat-alert--danger{background:#fde9ed;color:var(--wrat-danger)}.wrat-loading,.wrat-empty{padding:50px;text-align:center;color:var(--wrat-muted)}.wrat-login-shell{min-height:100dvh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 70% 20%,#ffeaf3,transparent 40%),#fbfafb}.wrat-login-card{width:min(100%,440px);background:#fff;border:1px solid var(--wrat-line);border-radius:24px;padding:clamp(28px,6vw,48px);box-shadow:var(--wrat-shadow)}.wrat-brand-mark{margin-bottom:24px}.wrat-login-card h1{font-size:2rem;margin:8px 0}.wrat-muted,.wrat-login-help{color:var(--wrat-muted)}.wrat-login-card form{display:grid;gap:14px;margin-top:24px}.wrat-login-card label{display:grid;gap:7px;font-weight:700}.wrat-login-card input[type=text],.wrat-login-card input[type=password]{width:100%;border:1px solid #d9cbd2;border-radius:10px;padding:12px}.wrat-login-card .login-remember label{display:flex;align-items:center}.wrat-login-card .button-primary{width:100%;border:0;border-radius:11px;padding:13px;background:var(--wrat-rose);color:#fff;font-weight:800}.wrat-login-help{text-align:center;font-size:.85rem;margin-top:20px}
@media(max-width:900px){.wrat-app{grid-template-columns:1fr}.wrat-sidebar{position:fixed;left:0;transform:translateX(-105%);transition:transform .22s ease;width:280px;box-shadow:var(--wrat-shadow)}.wrat-app.menu-open .wrat-sidebar{transform:translateX(0)}.wrat-menu{display:block}.wrat-topbar{justify-content:flex-start;gap:16px}.wrat-profile{margin-left:auto}.wrat-stats{grid-template-columns:1fr 1fr}.wrat-grid-2,.wrat-attendance-layout{grid-template-columns:1fr}.wrat-hero{align-items:flex-start}.wrat-time-orbit{width:170px;height:170px;flex:none}}
@media(max-width:620px){.wrat-content{padding:20px 16px 40px}.wrat-topbar{padding:15px 16px}.wrat-topbar .wrat-kicker,.wrat-profile div{display:none}.wrat-hero{padding:26px 20px;display:block}.wrat-hero h2{font-size:2.25rem}.wrat-time-orbit{margin:32px auto 10px}.wrat-stats{grid-template-columns:1fr 1fr}.wrat-stat{display:grid}.wrat-details,.wrat-field-row{grid-template-columns:1fr}.wrat-filter{display:grid;grid-template-columns:1fr 1fr}.wrat-card header{align-items:flex-start}.wrat-list-item{display:grid}.wrat-live-time{font-size:3.3rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Approved WR mockup baseline — white-led employee app + plum HR console. */
body.wrat-standalone{background:#f7f4f6}.wrat-standalone .wrat-app{grid-template-columns:168px minmax(0,1fr);background:#f7f4f6}.wrat-standalone .wrat-sidebar{width:168px;padding:0;background:linear-gradient(180deg,#6b153c 0%,#3b1028 100%);border:0;color:#fff}.wrat-standalone .wrat-logo{height:112px;padding:18px 16px;background:#fff;justify-content:center}.wrat-standalone .wrat-logo img{display:block;width:130px;height:auto;mix-blend-mode:multiply}.wrat-standalone .wrat-nav{padding:12px 10px;gap:3px}.wrat-standalone .wrat-nav button{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.82);padding:11px 12px;border-radius:6px;font-size:.88rem}.wrat-standalone .wrat-nav button i{width:20px;font-style:normal;text-align:center;font-size:1rem}.wrat-standalone .wrat-nav button:hover,.wrat-standalone .wrat-nav button.is-active{background:linear-gradient(90deg,#d51a68,#c61059);color:#fff}.wrat-standalone .wrat-logout{margin:0 10px 18px;color:#fff;border:1px solid rgba(255,255,255,.18);text-align:center}.wrat-standalone .wrat-topbar{height:64px;min-height:64px;padding:0 28px;justify-content:flex-start;gap:24px;box-shadow:0 1px 0 var(--wrat-line);background:#fff}.wrat-topbar-title{min-width:210px}.wrat-topbar-title p{margin:0;color:var(--wrat-muted);font-size:.78rem}.wrat-topbar-title h1{display:none}.wrat-search{height:34px;width:min(420px,38vw);display:flex;align-items:center;gap:8px;border:1px solid #d9cdd3;border-radius:7px;padding:0 10px;color:var(--wrat-muted)}.wrat-search input{border:0;outline:0;width:100%;background:transparent}.wrat-bell{margin-left:auto;position:relative;border:0;background:transparent;color:var(--wrat-plum);font-size:1.1rem}.wrat-bell b{position:absolute;width:6px;height:6px;background:var(--wrat-rose);border-radius:50%;right:2px;top:2px}.wrat-mobile-logo,.wrat-bottom-nav{display:none}.wrat-standalone .wrat-content{max-width:none;margin:0;padding:22px 24px 50px}.wrat-page-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.wrat-page-heading h2{margin:0 0 3px;font-size:1.55rem;color:var(--wrat-plum)}.wrat-page-heading p{margin:0;color:var(--wrat-muted);font-size:.85rem}.wrat-outline{border:1px solid var(--wrat-rose);background:#fff;color:var(--wrat-rose);padding:9px 14px;border-radius:7px;font-weight:750}.wrat-hr-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}.wrat-hr-stats .wrat-stat{height:80px;border:0;border-radius:8px;box-shadow:none;padding:14px 18px;background:#fff}.wrat-hr-stats .wrat-stat--people{background:#fff4f8}.wrat-hr-stats .wrat-stat--present{background:#eefaf4}.wrat-hr-stats .wrat-stat--late{background:#fff7ea}.wrat-hr-stats .wrat-stat--pending{background:#fff0f5}.wrat-hr-stats .wrat-stat strong{font-size:1.8rem}.wrat-hr-dashboard-grid{display:grid;grid-template-columns:minmax(0,2.25fr) minmax(250px,.75fr);gap:14px}.wrat-hr-main-column,.wrat-hr-side-column{display:grid;align-content:start;gap:14px}.wrat-standalone .wrat-card{border:1px solid #e4d8de;border-radius:9px;box-shadow:none;padding:16px}.wrat-card h3{font-size:1rem;margin:0}.wrat-card header>span{color:var(--wrat-muted);font-size:.75rem}.wrat-summary-card{min-height:150px}.wrat-progress{height:26px;background:#f2edf0;border-radius:6px;margin:22px 0 8px;overflow:hidden}.wrat-progress span{display:block;height:100%;background:linear-gradient(90deg,#3baf71,#82d59f)}.wrat-progress-label{display:flex;gap:22px;align-items:center;font-size:.78rem}.wrat-progress-label b{color:var(--wrat-green)}.wrat-mini-search{display:flex;align-items:center;border:1px solid var(--wrat-line);border-radius:6px;padding:5px 8px;color:var(--wrat-muted)}.wrat-mini-search input{border:0;outline:0}.wrat-people-table{margin-top:12px}.wrat-people-row{display:grid;grid-template-columns:30px 2fr 1fr 1fr .8fr;align-items:center;gap:10px;padding:9px 4px;border-top:1px solid var(--wrat-line);font-size:.78rem}.wrat-people-head{color:var(--wrat-muted);background:#fbf5f8;font-weight:750}.wrat-person{display:flex;align-items:center;gap:8px}.wrat-person i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#f6dfe9;color:var(--wrat-plum);font-style:normal}.wrat-person b{display:grid}.wrat-person small{font-weight:400;color:var(--wrat-muted)}.wrat-chip{font-style:normal;background:#fff4da;color:#9a6300;padding:4px 8px;border-radius:12px}.wrat-count{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--wrat-rose);color:#fff!important}.wrat-approval-shortcuts{display:grid;margin:12px 0}.wrat-approval-shortcuts button{display:flex;justify-content:space-between;border:0;border-bottom:1px solid var(--wrat-line);background:#fff;padding:11px 2px;text-align:left;color:var(--wrat-ink)}.wrat-approval-shortcuts button b{color:var(--wrat-rose)}.wrat-wide-link{width:100%;border:0;border-radius:6px;background:linear-gradient(90deg,var(--wrat-plum),var(--wrat-rose));color:#fff;padding:10px;font-weight:700}.wrat-daily-summary{padding:0;margin:10px 0 0;list-style:none}.wrat-daily-summary li{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--wrat-line);font-size:.85rem}.wrat-profile-card{max-width:620px;text-align:center;margin:auto}.wrat-profile-avatar{margin:auto;width:90px;height:90px;border-radius:50%;display:grid;place-items:center;background:var(--wrat-soft);color:var(--wrat-rose);font-size:2rem;font-weight:900}.wrat-logout-mobile{display:block;text-decoration:none;margin-top:18px}.wrat-employee-home{display:none}

@media(max-width:959px){body.wrat-standalone{background:#fff}.wrat-standalone .wrat-app{display:block;min-height:100dvh;padding-bottom:74px;background:#fff}.wrat-standalone .wrat-sidebar{display:none}.wrat-standalone .wrat-topbar{height:82px;min-height:82px;padding:12px 18px;position:sticky;top:0;gap:0;border-bottom:0}.wrat-menu,.wrat-topbar-title,.wrat-search,.wrat-profile{display:none!important}.wrat-mobile-logo{display:block;width:118px;height:auto;mix-blend-mode:multiply}.wrat-bell{display:block;margin-left:auto;font-size:1.2rem}.wrat-standalone .wrat-content{padding:10px 20px 28px}.wrat-bottom-nav{position:fixed;z-index:30;left:0;right:0;bottom:0;height:70px;padding-bottom:env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-top:1px solid #e7dce1}.wrat-bottom-nav button{border:0;background:#fff;color:#2f2229;display:grid;place-items:center;align-content:center;gap:2px;font-size:.68rem}.wrat-bottom-nav button i{font-size:1.25rem;font-style:normal;line-height:1}.wrat-bottom-nav button.is-active{color:var(--wrat-rose)}.wrat-bottom-nav button.is-active:before{content:"";position:absolute;top:0;width:42px;height:3px;background:var(--wrat-rose);border-radius:0 0 3px 3px}.wrat-employee-home{display:block}.wrat-mobile-greeting p{font-size:1.45rem;margin:8px 0 0;color:var(--wrat-plum)}.wrat-mobile-greeting span{font-size:.85rem}.wrat-mobile-time{font-size:2.8rem;line-height:1.05;font-weight:900;color:#53112f;margin:14px 0 12px}.wrat-mobile-status{display:flex;align-items:center;gap:12px;background:#fbf0f4;border-radius:9px;padding:11px 14px;color:#5b1d38}.wrat-mobile-status i{font-style:normal;font-size:1.3rem}.wrat-mobile-location{display:flex;justify-content:center;align-items:center;gap:8px;margin:12px 0;color:#20201e;font-size:.83rem}.wrat-mobile-location i{font-style:normal;color:#43bb65}.wrat-pulse-clock{width:176px;height:176px;margin:12px auto 22px;border-radius:50%;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,#a21e55,#d50b64);box-shadow:0 0 0 10px #f9dce8,0 0 0 20px #fcebf2;color:#fff}.wrat-pulse-clock i{font-style:normal;font-size:2.8rem;line-height:1}.wrat-pulse-clock strong{font-size:1.15rem}.wrat-shift-strip{background:#fbf0f4;color:#5d213c;border-radius:9px;text-align:center;padding:10px}.wrat-mobile-shortcuts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}.wrat-mobile-shortcuts button{height:68px;border:0;border-radius:9px;background:#fbf4f7;color:#5c1737;display:grid;place-items:center;align-content:center;gap:3px}.wrat-mobile-shortcuts i{font-style:normal;font-size:1.2rem}.wrat-today-card{border:1px solid #eddee5;border-radius:9px;padding:12px;margin-top:8px}.wrat-today-card h3{margin:0 0 8px}.wrat-today-card>div{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:8px;color:#5c1737}.wrat-today-card strong{font-size:.85rem}.wrat-hr-stats{grid-template-columns:1fr 1fr}.wrat-hr-dashboard-grid{grid-template-columns:1fr}.wrat-people-row{grid-template-columns:24px 2fr 1fr}.wrat-people-row>*:nth-child(4),.wrat-people-row>*:nth-child(5){display:none}.wrat-page-heading{align-items:flex-start}.wrat-page-heading h2{font-size:1.25rem}.wrat-outline{display:none}.wrat-hr-stats .wrat-stat{display:grid;height:84px}.wrat-hr-side-column{grid-template-columns:1fr}.wrat-attendance-layout,.wrat-grid-2{grid-template-columns:1fr}.wrat-clock-card{border:0;box-shadow:none;padding:14px 0}.wrat-live-time{font-size:3.5rem}.wrat-card{padding:14px}.wrat-alert{margin:8px 20px}.wrat-form{font-size:.9rem}.wrat-list-item{display:grid}.wrat-table-wrap{margin-left:-14px;margin-right:-14px}.wrat-topbar+.wrat-alert{} }

.wrat-mobile-flow{max-width:520px;margin:0 auto}.wrat-flow-heading{display:flex;align-items:center;gap:12px}.wrat-flow-heading button{border:0;background:transparent;color:var(--wrat-plum);font-size:2rem;line-height:1}.wrat-flow-heading h2{font-size:1.35rem;margin:0;color:var(--wrat-plum)}.wrat-flow-heading p{margin:2px 0 0;color:var(--wrat-muted);font-size:.8rem}.wrat-step-line{height:6px;border-radius:8px;background:#eadfe5;margin:12px 0 16px;overflow:hidden}.wrat-step-line span{display:block;width:50%;height:100%;background:linear-gradient(90deg,var(--wrat-plum),var(--wrat-rose))}.wrat-step-line.is-complete span{width:100%}.wrat-map-card{height:260px;position:relative;overflow:hidden;border-radius:14px;background:#f2efee;background-image:linear-gradient(28deg,transparent 46%,#fff 47%,#fff 52%,transparent 53%),linear-gradient(108deg,transparent 43%,#fff 44%,#fff 49%,transparent 50%),linear-gradient(0deg,transparent 48%,#e0ead9 49%,#e0ead9 57%,transparent 58%)}.wrat-map-card:after{content:"";position:absolute;inset:18% 23%;border:2px dashed #e0568c;border-radius:50%;background:rgba(255,235,244,.45)}.wrat-map-radius{position:absolute;z-index:2;inset:24% 26%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.wrat-map-radius b{background:#fff;padding:5px 8px;border-radius:5px;font-size:.72rem;box-shadow:0 2px 8px rgba(0,0,0,.1)}.wrat-map-radius i{font-style:normal;color:var(--wrat-rose);font-size:2rem;line-height:1}.wrat-map-radius small{background:#fff;padding:3px 7px;border-radius:8px}.wrat-locate{position:absolute;z-index:3;right:12px;top:12px;width:36px;height:36px;border:0;border-radius:50%;background:#fff;color:var(--wrat-plum);box-shadow:0 4px 12px rgba(0,0,0,.12)}.wrat-gps-result{margin:10px 0;display:grid;text-align:center;padding:10px;border-radius:9px;background:#f7f4f6}.wrat-gps-result strong{color:var(--wrat-plum)}.wrat-gps-result strong.is-inside{color:var(--wrat-green)}.wrat-gps-result strong.is-outside{color:var(--wrat-danger)}.wrat-gps-result span{font-size:.78rem;color:var(--wrat-muted)}.wrat-location-facts{margin:0 0 10px}.wrat-location-facts div{display:flex;gap:12px;padding:10px 8px;border-bottom:1px solid var(--wrat-line)}.wrat-location-facts dt{color:var(--wrat-rose)}.wrat-location-facts dd{margin:0;display:grid}.wrat-location-facts dd span{font-size:.8rem;color:var(--wrat-muted)}.wrat-secondary{width:100%;border:1px solid #d8c2cd;background:#fff;color:#816878;border-radius:10px;padding:11px;margin-top:8px;font-weight:750}.wrat-secondary.is-ready{border-color:var(--wrat-rose);color:var(--wrat-rose)}.wrat-privacy-note{text-align:center;color:var(--wrat-muted);font-size:.76rem}.wrat-camera-frame{height:420px;display:grid;place-items:center;position:relative;overflow:hidden;border-radius:18px;background:linear-gradient(160deg,#736d70,#30282c);cursor:pointer}.wrat-camera-frame input{position:absolute;opacity:0;pointer-events:none}.wrat-camera-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.wrat-face-guide{position:absolute;z-index:2;width:62%;height:72%;border:4px solid rgba(255,255,255,.9);border-radius:48% 48% 44% 44%;box-shadow:0 0 0 999px rgba(0,0,0,.12)}#wrat-camera-placeholder{display:grid;place-items:center;color:#fff;gap:8px;text-align:center;z-index:3}#wrat-camera-placeholder i{font-size:3rem;font-style:normal}#wrat-camera-placeholder small{opacity:.8}.wrat-selfie-guide{text-align:center;margin:12px 0;display:grid}.wrat-selfie-guide span{font-size:.78rem;color:var(--wrat-muted)}.wrat-verified-strip{text-align:center;background:#fff2f7;padding:9px;border-radius:8px;margin-bottom:10px;color:var(--wrat-plum);font-size:.82rem}.wrat-success-screen{max-width:520px;margin:20px auto;text-align:center}.wrat-success-orbit{width:108px;height:108px;margin:10px auto 18px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,var(--wrat-rose),var(--wrat-plum));box-shadow:0 0 0 10px #f8dbe7,0 0 0 19px #fcecf3;color:#7cff73;font-size:3.5rem;font-weight:900}.wrat-success-screen h2{margin:24px 0 0;color:var(--wrat-plum)}.wrat-success-time{font-size:2.6rem;font-weight:900;color:var(--wrat-plum)}.wrat-success-screen>p{margin:0 0 12px}.wrat-success-screen dl{background:#fbf4f7;border-radius:10px;margin:18px 0;padding:8px 14px;text-align:left}.wrat-success-screen dl div{display:grid;grid-template-columns:110px 1fr;padding:9px 0;border-bottom:1px solid var(--wrat-line)}.wrat-success-screen dl div:last-child{border:0}.wrat-success-screen dd{margin:0;font-weight:700}.wrat-success-screen .wrat-text-button{margin-top:8px;width:100%}
@media(min-width:768px){.wrat-mobile-flow,.wrat-success-screen{background:#fff;padding:28px;border:1px solid var(--wrat-line);border-radius:12px}.wrat-map-card{height:330px}}

/* Design fidelity pass: approved palette, Noto Sans Thai, generated icon atlas v1. */
:root{--wrat-ink:#110e11;--wrat-muted:#776b72;--wrat-rose:#a8276b;--wrat-plum:#4b2438;--wrat-pink:#ce4092;--wrat-soft:#fcf8fa;--wrat-line:#eadfe5;--wrat-green:#2c9b57;--wrat-amber:#c47a13;--wrat-danger:#c83b4c}
body:has(.wrat-app),body:has(.wrat-login-shell){font-family:"Noto Sans Thai","Leelawadee UI",Tahoma,sans-serif;font-weight:400;color:var(--wrat-ink)}
.wrat-icon{display:inline-block;flex:0 0 auto;width:24px;height:24px;background-image:url("../images/wr-attendance-icon-atlas-v1.png");background-repeat:no-repeat;background-size:400% 400%;vertical-align:middle}
.wrat-icon-home{background-position:0 0}.wrat-icon-clockin{background-position:33.333% 0}.wrat-icon-request{background-position:66.667% 0}.wrat-icon-history{background-position:100% 0}.wrat-icon-profile{background-position:0 33.333%}.wrat-icon-bell{background-position:33.333% 33.333%}.wrat-icon-calendar{background-position:66.667% 33.333%}.wrat-icon-overtime{background-position:100% 33.333%}.wrat-icon-edittime{background-position:0 66.667%}.wrat-icon-location{background-position:33.333% 66.667%}.wrat-icon-camera{background-position:66.667% 66.667%}.wrat-icon-success{background-position:100% 66.667%}.wrat-icon-people{background-position:0 100%}.wrat-icon-approval{background-position:33.333% 100%}.wrat-icon-report{background-position:66.667% 100%}.wrat-icon-settings{background-position:100% 100%}
.wrat-standalone .wrat-sidebar{background:#4b2438}.wrat-standalone .wrat-nav button{font-size:.82rem;font-weight:600}.wrat-standalone .wrat-nav button .wrat-icon{width:20px;height:20px;filter:brightness(0) invert(1);opacity:.82}.wrat-standalone .wrat-nav button:hover,.wrat-standalone .wrat-nav button.is-active{background:#a8276b}.wrat-standalone .wrat-nav button.is-active .wrat-icon{opacity:1}.wrat-standalone .wrat-logout{font-weight:600}
.wrat-topbar-title p,.wrat-page-heading p{font-weight:500}.wrat-page-heading h2{font-weight:800;letter-spacing:-.025em}.wrat-search-symbol{width:14px;height:14px;border:2px solid var(--wrat-muted);border-radius:50%;position:relative;display:inline-block}.wrat-search-symbol:after{content:"";position:absolute;width:6px;height:2px;background:var(--wrat-muted);right:-5px;bottom:-2px;transform:rotate(45deg);border-radius:2px}.wrat-bell .wrat-icon{width:22px;height:22px}.wrat-bell b{background:var(--wrat-pink)}
.wrat-outline{display:inline-flex;align-items:center;gap:7px;border-color:var(--wrat-rose);font-weight:700}.wrat-outline .wrat-icon{width:18px;height:18px}.wrat-hr-stats .wrat-stat{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px}.wrat-hr-stats .wrat-stat>.wrat-icon{width:34px;height:34px}.wrat-hr-stats .wrat-stat span{font-size:.84rem;font-weight:600}.wrat-hr-stats .wrat-stat strong{font-weight:800}.wrat-card h3{font-weight:700;color:var(--wrat-plum)}.wrat-people-head{font-weight:600}.wrat-place{display:flex;align-items:center;gap:5px}.wrat-place .wrat-icon{width:14px;height:14px}.wrat-approval-shortcuts button>span,.wrat-daily-summary li>span{display:flex;align-items:center;gap:8px}.wrat-approval-shortcuts .wrat-icon,.wrat-daily-summary .wrat-icon{width:19px;height:19px}.wrat-wide-link{background:var(--wrat-rose);font-weight:700}.wrat-progress span{background:#51b975}
.wrat-primary{background:var(--wrat-rose);box-shadow:0 8px 20px rgba(168,39,107,.2);font-weight:700}.wrat-mobile-greeting p{font-weight:500}.wrat-mobile-greeting strong{font-weight:800}.wrat-mobile-time{color:var(--wrat-plum);font-weight:800;letter-spacing:-.045em}.wrat-mobile-status{background:#f9f0f4;color:var(--wrat-plum)}.wrat-mobile-status .wrat-icon{width:24px;height:24px}.wrat-mobile-location .wrat-icon{width:18px;height:18px}.wrat-pulse-clock{background:var(--wrat-rose);box-shadow:0 0 0 10px #f1ccdf,0 0 0 20px #f9e8f0}.wrat-pulse-clock .wrat-icon{width:50px;height:50px;filter:brightness(0) invert(1)}.wrat-pulse-clock strong{font-weight:700}.wrat-shift-strip{display:flex;align-items:center;justify-content:center;gap:8px;background:#f9f0f4;color:var(--wrat-plum)}.wrat-shift-strip .wrat-icon{width:20px;height:20px}.wrat-mobile-shortcuts button{font-weight:600;background:#fcf6f9;color:var(--wrat-plum)}.wrat-mobile-shortcuts .wrat-icon{width:28px;height:28px}.wrat-today-card h3{font-weight:700;color:var(--wrat-plum)}.wrat-today-card>div span{display:flex;align-items:center;gap:4px}.wrat-today-card .wrat-icon{width:17px;height:17px}.wrat-bottom-nav button{font-family:"Noto Sans Thai",sans-serif;font-weight:500}.wrat-bottom-nav button .wrat-icon{width:23px;height:23px}.wrat-bottom-nav button.is-active{color:var(--wrat-rose)}.wrat-bottom-nav button.is-active:before{background:var(--wrat-rose)}
.wrat-map-radius .wrat-icon{width:34px;height:34px}.wrat-locate{display:grid;place-items:center}.wrat-locate .wrat-icon{width:20px;height:20px}.wrat-location-facts dt{display:grid;place-items:center}.wrat-location-facts dt .wrat-icon{width:23px;height:23px}.wrat-gps-result strong{display:flex;align-items:center;justify-content:center;gap:5px}.wrat-gps-result .wrat-icon{width:20px;height:20px}.wrat-camera-frame #wrat-camera-placeholder .wrat-icon{width:60px;height:60px;filter:brightness(0) invert(1)}.wrat-verified-strip{display:flex;align-items:center;justify-content:center;gap:6px}.wrat-verified-strip .wrat-icon{width:18px;height:18px}.wrat-success-orbit{background:#f8e8f0;color:transparent;box-shadow:0 0 0 10px #f1ccdf,0 0 0 19px #faedf3}.wrat-success-orbit .wrat-icon{width:84px;height:84px}.wrat-success-screen dl dt{display:flex;align-items:center;gap:6px}.wrat-success-screen dl .wrat-icon{width:18px;height:18px}
@media(max-width:767px){.wrat-mobile-logo{width:108px}.wrat-standalone .wrat-topbar{height:80px;min-height:80px}.wrat-standalone .wrat-content{padding-top:6px}.wrat-mobile-greeting p{font-size:1.38rem}.wrat-mobile-time{font-size:2.72rem}.wrat-pulse-clock{width:170px;height:170px}.wrat-hr-stats .wrat-stat{grid-template-columns:30px 1fr}.wrat-hr-stats .wrat-stat strong{grid-column:2}.wrat-hr-stats .wrat-stat>.wrat-icon{width:28px;height:28px;grid-row:1/3}}

/* Annotated review pass: topbar profile, search, logout and mobile shortcut alignment. */
.wrat-standalone .wrat-topbar{padding-right:16px}.wrat-profile{height:56px;min-width:190px;padding:5px 10px;gap:9px;align-items:center;justify-content:flex-start}.wrat-profile>span#wrat-avatar{width:34px;height:34px;flex:0 0 34px;font-size:.92rem}.wrat-profile>div{min-width:0;line-height:1.15}.wrat-profile strong{font-size:.88rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:112px}.wrat-profile small{font-size:.72rem;line-height:1.2;white-space:nowrap}.wrat-profile-chevron{margin-left:auto!important;width:auto!important;height:auto!important;background:transparent!important;color:var(--wrat-muted)!important;font-size:.85rem!important}
.wrat-bell{width:42px;height:42px;padding:7px;display:grid;place-items:center;border-radius:8px}.wrat-bell:hover{background:var(--wrat-soft)}.wrat-bell .wrat-icon{width:26px;height:26px}.wrat-bell b{right:7px;top:6px}
.wrat-notifications{position:relative;margin-left:auto}.wrat-notifications .wrat-bell{margin-left:0;cursor:pointer;touch-action:manipulation}.wrat-notification-panel{position:absolute;z-index:60;right:0;top:calc(100% + 8px);width:min(320px,calc(100vw - 28px));padding:14px;background:#fff;border:1px solid var(--wrat-line);border-radius:10px;box-shadow:0 18px 50px rgba(74,18,48,.16);display:grid;gap:8px;color:var(--wrat-ink)}.wrat-notification-panel[hidden],.wrat-bell b[hidden]{display:none!important}.wrat-notification-panel span{font-size:.78rem;color:var(--wrat-muted);line-height:1.55}.wrat-notification-panel button{min-height:44px;border:0;border-radius:7px;padding:9px 12px;background:var(--wrat-rose);color:#fff;font-weight:750;cursor:pointer}.wrat-app button:focus-visible,.wrat-app a:focus-visible,.wrat-app input:focus-visible,.wrat-app select:focus-visible,.wrat-app textarea:focus-visible{outline:3px solid rgba(215,11,101,.28);outline-offset:2px}.wrat-app button,.wrat-app a{touch-action:manipulation}.wrat-standalone .wrat-nav button,.wrat-standalone .wrat-logout,.wrat-bell{min-height:44px}.wrat-bell{width:44px;height:44px}.wrat-search{height:44px}.wrat-search input{height:100%}.wrat-mini-search{min-height:44px}.wrat-mini-search input{min-height:32px}.wrat-main,.wrat-content{min-width:0;max-width:100%}.wrat-card,.wrat-card header,.wrat-page-heading>div{min-width:0}.wrat-page-heading h2{text-wrap:balance}.wrat-stat strong,table{font-variant-numeric:tabular-nums}
.wrat-skip-link{position:fixed;z-index:100;left:12px;top:12px;transform:translateY(-160%);padding:10px 14px;border-radius:7px;background:#fff;color:var(--wrat-plum);box-shadow:var(--wrat-shadow)}.wrat-skip-link:focus{transform:translateY(0)}.wrat-employee-home{display:block;max-width:640px;margin:0 auto}
.wrat-icon-bell{background-image:url("../images/wrat-bell-outline-v1.svg");background-size:contain;background-position:center;background-repeat:no-repeat}
.wrat-chip.is-present{background:#e7f7f0;color:var(--wrat-green)}.wrat-chip.is-late{background:#fff2dc;color:var(--wrat-amber)}.wrat-people-row[hidden],.wrat-people-empty[hidden]{display:none!important}.wrat-decision-dialog{width:min(92vw,480px)}.wrat-decision-dialog header{display:flex;align-items:flex-start;justify-content:space-between}.wrat-decision-dialog header button{width:44px;height:44px;border:0;background:transparent;font-size:1.5rem;color:var(--wrat-plum)}.wrat-dialog-actions{display:flex;justify-content:flex-end;gap:10px}.wrat-dialog-actions>button{min-height:44px;border:1px solid var(--wrat-line);border-radius:8px;padding:9px 16px;background:#fff;color:var(--wrat-plum)}.wrat-dialog-actions .wrat-primary{width:auto;background:var(--wrat-rose);color:#fff}.wrat-settings-layout{display:grid;grid-template-columns:minmax(0,760px) minmax(260px,360px);align-items:start;gap:18px}.wrat-demo-card p:not(.wrat-kicker){color:var(--wrat-muted);line-height:1.7}.wrat-demo-card .wrat-outline{width:100%;min-height:44px}
@media(max-width:959px){.wrat-settings-layout{grid-template-columns:1fr}.wrat-dialog-actions{display:grid;grid-template-columns:1fr 1fr}.wrat-dialog-actions>button{width:100%}}
.wrat-search,.wrat-mini-search{background:#fff;overflow:hidden;color-scheme:light}.wrat-search input,.wrat-mini-search input{-webkit-appearance:none;appearance:none;background:#fff!important;color:var(--wrat-ink)!important;-webkit-text-fill-color:var(--wrat-ink)!important;box-shadow:none!important;caret-color:var(--wrat-rose);min-width:0}.wrat-search input::placeholder,.wrat-mini-search input::placeholder{color:#847881;opacity:1;-webkit-text-fill-color:#847881}.wrat-search input::-webkit-search-decoration,.wrat-search input::-webkit-search-cancel-button,.wrat-mini-search input::-webkit-search-decoration,.wrat-mini-search input::-webkit-search-cancel-button{display:none}.wrat-mini-search{width:280px;height:38px;padding:0 11px;gap:9px}.wrat-mini-search input{height:36px;font-size:.82rem}
.wrat-standalone .wrat-logout{display:flex;align-items:center;justify-content:flex-start;gap:9px;height:42px;margin:auto 10px 14px;padding:9px 12px;border:0;border-radius:6px;font-size:.8rem;line-height:1;white-space:nowrap;color:rgba(255,255,255,.84)}.wrat-standalone .wrat-logout:hover{background:rgba(255,255,255,.08);color:#fff}.wrat-standalone .wrat-logout .wrat-icon{width:19px;height:19px;filter:brightness(0) invert(1);opacity:.85;transform:scaleX(-1)}
.wrat-mobile-location{min-height:28px;margin:10px 0 9px;gap:5px;font-size:.82rem;font-weight:500}.wrat-mobile-location .wrat-icon{width:21px;height:21px}.wrat-online-dot{display:inline-block;width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:#38bc5a;box-shadow:0 0 0 2px #e8f8ed}.wrat-mobile-shortcuts{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.wrat-mobile-shortcuts button{min-width:0;height:66px;padding:7px 4px;gap:2px;font-size:.82rem;font-weight:600;line-height:1.15}.wrat-mobile-shortcuts button span{display:block;max-width:100%;white-space:nowrap;overflow:visible}.wrat-mobile-shortcuts .wrat-icon{width:29px;height:29px}
@media(max-width:959px){.wrat-standalone .wrat-topbar{padding:10px 12px 8px 18px}.wrat-bell{width:44px;height:44px;padding:7px}.wrat-bell .wrat-icon{width:28px;height:28px}.wrat-notification-panel{position:fixed;top:76px;right:12px}.wrat-mobile-location{justify-content:center}.wrat-mobile-shortcuts button span{font-size:.82rem}.wrat-mobile-shortcuts button:last-child span{font-size:.8rem}}