:root{
  --red:#b31322;--red-2:#e7222d;--red-soft:#fff0f1;--ink:#151a2b;--muted:#6d7380;--line:#e8e5df;
  --cream:#f7f0df;--cream-2:#fffaf0;--card:rgba(255,255,255,.92);--success:#177a4a;--warning:#a66500;--danger:#b31322;
  --shadow:0 18px 50px rgba(53,42,34,.12);--shadow-sm:0 8px 22px rgba(48,42,36,.09);--radius:24px;--radius-sm:16px;
  --safe-bottom:max(14px,env(safe-area-inset-bottom));
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f7f7f6;color:var(--ink)}
body{overflow-x:hidden}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}.small{font-size:.84rem}.muted{color:var(--muted)}.optional{font-weight:500;color:#9499a3;font-size:.78rem}.app-shell{min-height:100dvh}
.eyebrow,.panel-kicker{font-size:.74rem;font-weight:850;letter-spacing:.14em;color:var(--red)}
.splash{position:fixed;inset:0;z-index:200;background:linear-gradient(140deg,#fff 0%,#fff9f6 45%,#f6edd2 100%);display:grid;place-content:center;text-align:center;padding:30px;overflow:hidden}
.splash-glow{position:absolute;border-radius:999px;filter:blur(2px);opacity:.55}.splash-glow-a{width:340px;height:340px;background:#ffe4e7;right:-120px;top:-70px}.splash-glow-b{width:320px;height:320px;background:#f6e9b9;left:-120px;bottom:-80px}.splash-brand{position:relative;z-index:2;justify-content:center;animation:rise .7s ease both}.brand-pair{display:flex;align-items:center;gap:18px}.brand-pair img{object-fit:contain}.brand-divider{height:62px;width:1px;background:linear-gradient(transparent,#d6cfc6,transparent)}.logo-stage img{width:160px;max-height:112px}.logo-stage-ab img{width:150px}.logo-stage-sos{animation:brandIn .65s .1s ease both}.logo-stage-ab{animation:brandIn .65s .3s ease both}.splash-copy{position:relative;z-index:2;margin-top:20px;animation:rise .65s .45s ease both}.splash-copy h1{margin:8px 0 5px;font-size:clamp(2rem,7vw,4.2rem);letter-spacing:-.045em}.splash-copy p{margin:0;color:#5f6570;font-size:1.05rem}.splash-profile{position:relative;z-index:2;margin:30px auto 0;display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.72);border:1px solid rgba(179,19,34,.12);padding:10px 18px 10px 10px;border-radius:999px;box-shadow:var(--shadow-sm);text-align:left;animation:rise .65s .75s ease both}.splash-profile strong,.splash-profile span{display:block}.splash-profile span{font-size:.78rem;color:var(--muted)}.loader-line{position:relative;z-index:2;width:220px;height:3px;background:#eee5df;margin:24px auto 0;border-radius:99px;overflow:hidden}.loader-line span{display:block;width:40%;height:100%;background:linear-gradient(90deg,var(--red),var(--red-2));border-radius:99px;animation:load 1.4s infinite ease-in-out}
@keyframes load{0%{transform:translateX(-120%)}100%{transform:translateX(350%)}}@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes brandIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}
.auth-view{min-height:100dvh;display:grid;grid-template-columns:minmax(340px,1fr) minmax(420px,.88fr);background:linear-gradient(120deg,#fffdf9 0%,#f6f0df 51%,#fff 100%);position:relative;overflow:hidden}.auth-view:before{content:"";position:absolute;inset:auto auto -30% -15%;width:60%;height:80%;background:linear-gradient(135deg,rgba(226,34,45,.08),rgba(255,255,255,0));clip-path:polygon(0 0,100% 18%,60% 100%,0 78%)}.auth-art{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:7vw}.auth-logos img:first-child{width:190px;max-height:130px}.auth-logos img:last-child{width:175px;max-height:120px}.auth-art>.eyebrow{margin-top:28px}.auth-art h1{font-size:clamp(3.2rem,6vw,6.5rem);line-height:.9;letter-spacing:-.06em;margin:12px 0 24px}.auth-art h1 span{color:var(--red)}.auth-art>p{font-size:1.1rem;max-width:610px;color:#59606e;line-height:1.65}.security-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.security-chips span{font-size:.8rem;font-weight:750;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid #e8ded5}.auth-panel-wrap{display:grid;place-items:center;padding:36px;position:relative;z-index:2}.glass-card{background:var(--card);border:1px solid rgba(255,255,255,.75);box-shadow:var(--shadow);backdrop-filter:blur(16px)}.auth-panel{width:min(100%,540px);border-radius:30px;padding:34px}.auth-panel h2{font-size:2.55rem;margin:5px 0 5px;letter-spacing:-.045em}.demo-banner{margin:18px 0 4px;padding:11px 13px;border-radius:12px;background:#fff8da;color:#725c00;font-size:.8rem;border:1px solid #efe2a2}.form-stack{display:grid;gap:18px;margin-top:22px}.form-stack label,.form-grid label{font-size:.88rem;font-weight:780;display:grid;gap:8px}.form-stack input,.form-grid input,.form-grid select,.form-stack select,.form-stack textarea,.form-grid textarea,.modal input,.modal select,.modal textarea{border:1px solid #d8d9de;border-radius:14px;background:#fff;padding:14px 15px;outline:none;transition:.2s;min-width:0}.form-stack input:focus,.form-grid input:focus,.form-grid select:focus,.modal input:focus,.modal select:focus,.modal textarea:focus{border-color:var(--red);box-shadow:0 0 0 4px rgba(179,19,34,.08)}.password-wrap{display:flex;border:1px solid #d8d9de;border-radius:14px;background:#fff;overflow:hidden}.password-wrap input{border:0;flex:1}.text-btn,.link-btn{border:0;background:transparent;color:var(--red);font-weight:800}.text-btn{padding:0 15px}.auth-actions{display:flex;justify-content:space-between;gap:12px;margin:15px 0 0}.auth-note{background:#f7faf7;border:1px solid #dbeade;color:#476051;padding:12px 14px;border-radius:14px;font-size:.79rem;line-height:1.45;margin-top:18px}.demo-credentials{margin-top:15px;font-size:.78rem;color:#686e79}.demo-credentials div{margin-top:6px}.btn{border:0;border-radius:14px;padding:12px 16px;font-weight:800;transition:.18s;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn:active{transform:translateY(1px)}.btn-primary{background:linear-gradient(135deg,var(--red),var(--red-2));color:#fff;box-shadow:0 10px 24px rgba(179,19,34,.22)}.btn-soft{background:#fff4f4;color:var(--red);border:1px solid #f0d3d5}.btn-ghost{background:#f1f2f4;color:#3f4550}.btn-success{background:#e9f8ef;color:#16683f}.btn-warning{background:#fff5df;color:#8a5b00}.btn-danger{background:#fff0f1;color:var(--red)}.btn-xl{padding:16px 18px;font-size:1.02rem}.btn-block{width:100%}.file-btn{cursor:pointer}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px}.span-2{grid-column:span 2}.wide-form-card{width:min(100%,700px)}.profile-upload-box{display:flex;gap:18px;align-items:center;background:#fbfaf8;border:1px dashed #d8d1ca;padding:16px;border-radius:18px}.button-row{display:flex;gap:10px;flex-wrap:wrap}.end-row{justify-content:flex-end}.compact-art h1{font-size:clamp(2.8rem,5vw,5.3rem)}
.avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#222a3b,#596173);color:#fff;display:grid;place-items:center;font-weight:900;background-size:cover;background-position:center;flex:none}.avatar-lg{width:58px;height:58px}.avatar-xl{width:88px;height:88px;font-size:1.7rem}.main-view{min-height:100dvh;background:#f8f8f7}.side-rail{position:fixed;inset:0 auto 0 0;width:265px;background:#131827;color:#fff;padding:22px 15px;display:flex;flex-direction:column;z-index:80}.side-brand{display:flex;align-items:center;gap:10px;padding:2px 7px 18px;border-bottom:1px solid rgba(255,255,255,.08)}.side-brand img{width:54px;height:45px;object-fit:contain;background:#fff;border-radius:12px;padding:5px}.side-brand strong,.side-brand span{display:block}.side-brand span{font-size:.72rem;color:#aab0bd;margin-top:2px}.side-nav{display:grid;gap:6px;margin-top:18px}.nav-btn{border:0;background:transparent;color:#bfc4ce;border-radius:13px;padding:11px 12px;text-align:left;font-weight:750;display:flex;gap:11px;align-items:center}.nav-btn:hover,.nav-btn.active{background:rgba(255,255,255,.09);color:#fff}.nav-icon{width:23px;text-align:center}.side-footer{margin-top:auto}.mini-user{display:flex;gap:10px;align-items:center;padding:12px 4px;margin-bottom:8px}.mini-user strong,.mini-user span{display:block}.mini-user span{font-size:.72rem;color:#9da4b1}.content-shell{margin-left:265px;min-height:100dvh}.topbar{height:90px;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);border-bottom:1px solid #ece9e5;display:flex;align-items:center;justify-content:space-between;padding:16px clamp(18px,4vw,48px);position:sticky;top:0;z-index:60}.topbar h2{margin:4px 0 0;font-size:1.65rem}.top-actions{display:flex;align-items:center;gap:10px}.icon-btn{width:44px;height:44px;border:1px solid #e1e2e5;border-radius:50%;background:#fff;position:relative}.icon-btn i{position:absolute;width:8px;height:8px;background:var(--red-2);border:2px solid #fff;border-radius:50%;right:7px;top:7px}.profile-chip{border:1px solid #e0e1e4;background:#fff;border-radius:999px;padding:5px 13px 5px 5px;display:flex;gap:9px;align-items:center;text-align:left}.profile-chip strong,.profile-chip span{display:block}.profile-chip span{font-size:.72rem;color:var(--muted)}.page-content{padding:clamp(18px,3vw,38px) clamp(16px,4vw,48px) 100px}.hero-card{background:linear-gradient(120deg,#fff 0%,#fff9f6 65%,#f6ebcd 100%);border:1px solid #ebe4db;border-radius:28px;padding:clamp(22px,4vw,42px);display:grid;grid-template-columns:1.25fr .75fr;gap:24px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}.hero-card:after{content:"";position:absolute;right:-70px;top:-90px;width:260px;height:260px;border-radius:50%;background:rgba(226,34,45,.06)}.hero-card h1{font-size:clamp(2.1rem,4vw,3.7rem);margin:9px 0 10px;letter-spacing:-.055em}.hero-card p{color:#626975;margin:0}.hero-profile{display:flex;align-items:center;gap:16px;justify-content:flex-end;z-index:2}.hero-profile .avatar{width:98px;height:98px;font-size:1.6rem;border:5px solid rgba(255,255,255,.85);box-shadow:var(--shadow-sm)}.hero-profile strong{font-size:1.1rem}.hero-profile span{display:block;color:var(--muted);font-size:.84rem;margin-top:4px}.grid{display:grid;gap:18px}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.mt{margin-top:20px}.card{background:#fff;border:1px solid #ece9e6;border-radius:20px;padding:20px;box-shadow:0 8px 24px rgba(49,42,37,.055)}.stat-card{display:flex;align-items:center;gap:13px}.stat-icon{width:46px;height:46px;border-radius:14px;background:var(--red-soft);display:grid;place-items:center;font-size:1.2rem}.stat-card strong{font-size:1.6rem;display:block}.stat-card span{font-size:.8rem;color:var(--muted)}.section-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:28px 0 13px}.section-head h3{margin:0;font-size:1.17rem}.attendance-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.attendance-action{position:relative;border:0;text-align:left;padding:24px;border-radius:22px;min-height:170px;overflow:hidden;box-shadow:var(--shadow-sm);transition:.2s}.attendance-action:hover{transform:translateY(-2px)}.attendance-action.checkin{background:linear-gradient(145deg,#fff,#fff0f1)}.attendance-action.checkout{background:linear-gradient(145deg,#fff,#f3f6ff)}.action-icon{font-size:2.15rem}.attendance-action h3{font-size:1.55rem;margin:22px 0 5px}.attendance-action p{margin:0;color:var(--muted)}.attendance-action .arrow{position:absolute;right:20px;top:20px;font-size:1.3rem}.today-status{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#ebe8e5;border:1px solid #ebe8e5;border-radius:18px;overflow:hidden}.today-status>div{background:#fff;padding:16px}.today-status b,.today-status span{display:block}.today-status span{color:var(--muted);font-size:.78rem;margin-bottom:5px}.status-pill{display:inline-flex!important;width:max-content;padding:6px 9px;border-radius:999px;background:#eef2ef;color:#506057;font-weight:800;font-size:.73rem!important}.status-pill.present{background:#e8f7ed;color:#156b3f}.status-pill.late{background:#fff3dd;color:#8d5d00}.status-pill.absent{background:#ffeded;color:#a52630}.quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.quick-btn{background:#fff;border:1px solid #eae7e3;border-radius:16px;padding:15px;text-align:left}.quick-btn b,.quick-btn span{display:block}.quick-btn span{color:var(--muted);font-size:.76rem;margin-top:4px}.table-wrap{overflow:auto;border:1px solid #ece9e5;border-radius:17px;background:#fff}.data-table{width:100%;border-collapse:collapse;min-width:720px}.data-table th,.data-table td{padding:13px 14px;text-align:left;border-bottom:1px solid #efeeec;font-size:.84rem;vertical-align:middle}.data-table th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:#747a85;background:#fbfbfa}.data-table tr:last-child td{border-bottom:0}.table-avatar{display:flex;align-items:center;gap:10px}.table-avatar .avatar{width:34px;height:34px;font-size:.75rem}.chip{display:inline-flex;align-items:center;padding:5px 8px;border-radius:999px;font-size:.7rem;font-weight:850;background:#f0f1f3;color:#5f6570}.chip.green{background:#e8f7ed;color:#156b3f}.chip.red{background:#fff0f1;color:#a51e2a}.chip.amber{background:#fff4df;color:#936000}.chip.blue{background:#eef3ff;color:#315a9d}.empty-state{text-align:center;padding:36px;color:var(--muted)}.filters{display:flex;gap:10px;flex-wrap:wrap}.filters input,.filters select{border:1px solid #dedfe3;border-radius:12px;padding:10px 12px;background:#fff}.mobile-nav{display:none}
.modal-backdrop{position:fixed;inset:0;background:rgba(9,13,23,.64);backdrop-filter:blur(5px);z-index:300;display:grid;place-items:center;padding:20px}.modal{background:#fff;border-radius:24px;width:min(100%,640px);max-height:92dvh;overflow:auto;box-shadow:0 28px 90px rgba(0,0,0,.28)}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;padding:22px 22px 12px}.modal-head h3{margin:3px 0 0;font-size:1.5rem}.modal-close{width:38px;height:38px;border:0;border-radius:50%;background:#f1f2f4;font-size:1.2rem}.modal-body{padding:10px 22px 22px}.stepper{display:flex;gap:5px;margin-bottom:18px}.stepper span{height:4px;flex:1;border-radius:99px;background:#e5e6e8}.stepper span.active{background:var(--red)}.camera-box{aspect-ratio:4/3;border-radius:18px;background:#111827;overflow:hidden;position:relative;display:grid;place-items:center;color:#fff}.camera-box video,.camera-box canvas,.camera-box img{width:100%;height:100%;object-fit:cover}.camera-overlay{position:absolute;inset:10%;border:2px solid rgba(255,255,255,.8);border-radius:45% 45% 42% 42%;pointer-events:none}.camera-hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.55);padding:7px 10px;border-radius:99px;font-size:.74rem;white-space:nowrap}.verification-list{display:grid;gap:10px;margin:15px 0}.verify-row{display:flex;align-items:center;gap:10px;border:1px solid #ece9e5;border-radius:14px;padding:12px}.verify-row .mark{width:30px;height:30px;border-radius:50%;background:#f1f2f4;display:grid;place-items:center}.verify-row.ok .mark{background:#e7f7ed;color:#176c41}.verify-row.fail .mark{background:#ffebed;color:#a6202b}.qr-reader{aspect-ratio:1;border:2px dashed #d8d9dd;border-radius:18px;display:grid;place-items:center;background:#fafafa;overflow:hidden;position:relative}.qr-reader video{width:100%;height:100%;object-fit:cover}.qr-frame{position:absolute;width:60%;height:60%;border:3px solid #fff;border-radius:18px;box-shadow:0 0 0 999px rgba(0,0,0,.25)}.toast-root{position:fixed;right:18px;bottom:18px;z-index:500;display:grid;gap:10px;max-width:min(360px,calc(100vw - 36px))}.toast{background:#171c2a;color:#fff;padding:13px 15px;border-radius:14px;box-shadow:0 12px 34px rgba(0,0,0,.22);animation:toastIn .25s ease}.toast.success{background:#176842}.toast.error{background:#9c1e28}@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.admin-hero{background:linear-gradient(130deg,#151a2b 0%,#242a3c 55%,#8d1721 150%);color:#fff}.admin-hero p{color:#c2c7d2}.admin-hero .eyebrow{color:#ffadb4}.progress-bar{height:8px;background:#eee;border-radius:99px;overflow:hidden}.progress-bar span{height:100%;display:block;background:linear-gradient(90deg,var(--red),var(--red-2));border-radius:99px}.location-card{display:flex;justify-content:space-between;gap:15px;align-items:center}.location-meta{display:flex;gap:12px;align-items:center}.map-dot{width:46px;height:46px;border-radius:14px;background:#fff0f1;display:grid;place-items:center}.profile-page{display:grid;grid-template-columns:300px 1fr;gap:18px}.profile-card{text-align:center}.profile-card .avatar{width:120px;height:120px;margin:0 auto 16px;font-size:2rem;border:5px solid #fff;box-shadow:0 8px 25px rgba(0,0,0,.12)}.profile-card h3{margin:5px 0}.profile-card p{margin:3px 0}.details-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.detail-row{background:#fafafa;border:1px solid #eee;border-radius:14px;padding:13px}.detail-row span,.detail-row b{display:block}.detail-row span{font-size:.74rem;color:var(--muted);margin-bottom:4px}
@media(max-width:980px){.auth-view{grid-template-columns:1fr}.auth-art{padding:48px 7vw 22px;min-height:auto}.auth-art h1{font-size:clamp(2.7rem,10vw,5.4rem)}.auth-panel-wrap{padding:20px 7vw 48px}.auth-panel{width:min(100%,650px)}.side-rail{display:none}.content-shell{margin-left:0}.grid-4{grid-template-columns:repeat(2,1fr)}.profile-page{grid-template-columns:1fr}.mobile-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;z-index:100;bottom:0;left:0;right:0;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid #e7e5e2;padding:7px 5px var(--safe-bottom)}.mobile-nav .nav-btn{justify-content:center;display:grid;gap:2px;text-align:center;padding:5px;color:#6b7079;font-size:.68rem}.mobile-nav .nav-btn .nav-icon{font-size:1.15rem;margin:auto}.mobile-nav .nav-btn.active{background:transparent;color:var(--red)}.page-content{padding-bottom:110px}}
@media(max-width:680px){.brand-pair{gap:11px}.brand-divider{height:45px}.logo-stage img{width:122px}.logo-stage-ab img{width:115px}.auth-art{padding-top:28px}.auth-logos img:first-child{width:120px}.auth-logos img:last-child{width:115px}.auth-art>.eyebrow{margin-top:17px}.auth-art h1{margin-top:7px}.auth-art>p{font-size:.92rem}.security-chips{margin-top:8px}.auth-panel-wrap{padding:4px 14px 35px}.auth-panel{padding:23px 18px;border-radius:24px}.auth-panel h2{font-size:2.1rem}.form-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.profile-upload-box{flex-direction:column;align-items:flex-start}.topbar{height:76px;padding:12px 15px}.topbar h2{font-size:1.35rem}.profile-chip>div:nth-child(2){display:none}.profile-chip{padding-right:5px}.page-content{padding:15px 13px 100px}.hero-card{grid-template-columns:1fr;padding:22px 18px}.hero-profile{justify-content:flex-start}.hero-profile .avatar{width:75px;height:75px}.grid-4,.grid-3,.grid-2{grid-template-columns:1fr 1fr}.attendance-actions{grid-template-columns:1fr 1fr}.attendance-action{min-height:150px;padding:18px}.attendance-action h3{font-size:1.25rem;margin-top:16px}.today-status{grid-template-columns:1fr 1fr}.quick-actions{grid-template-columns:1fr}.details-list{grid-template-columns:1fr}.modal-backdrop{padding:8px;align-items:end}.modal{border-radius:24px 24px 8px 8px;max-height:94dvh}}
@media(max-width:430px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr 1fr}.stat-card{display:block}.stat-icon{margin-bottom:12px}.attendance-actions{grid-template-columns:1fr 1fr;gap:10px}.attendance-action{min-height:145px}.splash-profile{max-width:95%}}


/* v1.2 — compact mobile sign-in + staged attendance animation */
.splash-brand{animation:rise .55s ease both}
.logo-stage-sos{animation:brandPop .55s .08s cubic-bezier(.2,.8,.2,1) both}
.logo-stage-ab{animation:brandPop .55s .48s cubic-bezier(.2,.8,.2,1) both}
.splash-copy{animation:rise .55s .88s ease both}
.splash-profile{animation:profileReveal .55s 1.35s cubic-bezier(.2,.8,.2,1) both}
.splash-attendance-actions{position:relative;z-index:2;display:flex;justify-content:center;gap:10px;margin:18px auto 0}
.splash-action{display:flex;align-items:center;gap:8px;min-width:118px;padding:10px 14px;border-radius:16px;background:rgba(255,255,255,.86);border:1px solid rgba(179,19,34,.12);box-shadow:var(--shadow-sm);font-size:.82rem;opacity:0;transform:translateY(12px) scale(.96)}
.splash-action-icon{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:#e9f8ef;color:#16683f;font-weight:950}
.splash-checkout .splash-action-icon{background:#fff0f1;color:var(--red)}
.splash-checkin{animation:attendanceReveal .45s 1.82s ease forwards}
.splash-checkout{animation:attendanceReveal .45s 2.08s ease forwards}
.loader-line{animation:rise .4s 2.35s both}
.auth-view:not(.hidden) .auth-art{animation:authArtIn .55s cubic-bezier(.2,.8,.2,1) both}
.auth-view:not(.hidden) .auth-panel{animation:panelRise .58s .08s cubic-bezier(.2,.8,.2,1) both}
.auth-logos img:first-child{animation:logoFloat 4.8s ease-in-out infinite}
.auth-logos img:last-child{animation:logoFloat 4.8s .7s ease-in-out infinite}

.login-intro{position:fixed;inset:0;z-index:450;background:linear-gradient(145deg,#fff 0%,#fff9f6 48%,#f6edd2 100%);display:grid;place-items:center;text-align:center;padding:24px;overflow:hidden;animation:introIn .25s ease both}
.login-intro.is-leaving{animation:introOut .38s ease forwards}
.login-intro-inner{position:relative;z-index:2;width:min(92vw,430px)}
.login-intro .brand-pair{justify-content:center;animation:rise .45s ease both}
.login-intro .brand-pair img{width:108px;max-height:78px;object-fit:contain}
.login-intro .brand-divider{height:48px}
.login-intro-avatar{width:104px;height:104px;border-radius:50%;margin:24px auto 12px;display:grid;place-items:center;background:linear-gradient(135deg,#222a3b,#596173);color:#fff;font-size:1.65rem;font-weight:900;background-size:cover;background-position:center;border:5px solid rgba(255,255,255,.92);box-shadow:0 14px 35px rgba(41,31,28,.16);animation:profileReveal .55s .48s cubic-bezier(.2,.8,.2,1) both}
.login-intro h2{margin:6px 0 3px;font-size:1.75rem;letter-spacing:-.035em;animation:rise .45s .78s both}
.login-intro p{margin:0;color:var(--muted);font-size:.88rem;animation:rise .45s .88s both}
.login-intro-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.login-intro-action{background:rgba(255,255,255,.9);border:1px solid #eee1db;border-radius:18px;padding:14px 10px;box-shadow:var(--shadow-sm);opacity:0;transform:translateY(12px) scale(.96)}
.login-intro-action b{display:block;margin-top:5px;font-size:.9rem}.login-intro-action span{font-size:1.35rem}
.login-intro-action:first-child{animation:attendanceReveal .42s 1.15s ease forwards}
.login-intro-action:last-child{animation:attendanceReveal .42s 1.36s ease forwards}
.login-intro-line{height:3px;width:170px;margin:20px auto 0;background:#ede4de;border-radius:99px;overflow:hidden;animation:rise .35s 1.6s both}
.login-intro-line i{display:block;width:42%;height:100%;background:linear-gradient(90deg,var(--red),var(--red-2));animation:load 1.1s infinite ease-in-out}

@keyframes brandPop{0%{opacity:0;transform:scale(.72) translateY(8px)}70%{opacity:1;transform:scale(1.05)}100%{opacity:1;transform:scale(1)}}
@keyframes profileReveal{from{opacity:0;transform:translateY(14px) scale(.82)}to{opacity:1;transform:none}}
@keyframes attendanceReveal{to{opacity:1;transform:none}}
@keyframes authArtIn{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes panelRise{from{opacity:0;transform:translateY(20px) scale(.985)}to{opacity:1;transform:none}}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes introIn{from{opacity:0}to{opacity:1}}
@keyframes introOut{to{opacity:0;transform:scale(1.015)}}

@media(max-width:680px){
  /* Keep sign-in as a single compact mobile screen instead of a long landing page. */
  #authView{height:100dvh;min-height:100dvh;overflow:hidden;display:flex;flex-direction:column;background:linear-gradient(165deg,#fffdf9 0%,#f8f1df 58%,#fff 100%)}
  #authView.hidden{display:none!important}
  #authView .auth-art{flex:0 0 clamp(220px,34dvh,350px);min-height:0;padding:14px 22px 4px;justify-content:flex-start}
  #authView .auth-logos{gap:8px;min-height:62px;align-items:center}
  #authView .auth-logos img:first-child{width:88px;max-height:60px}
  #authView .auth-logos img:last-child{width:82px;max-height:58px}
  #authView .brand-divider{height:38px}
  #authView .auth-art>.eyebrow{margin-top:7px;font-size:.62rem;letter-spacing:.12em}
  #authView .auth-art h1{font-size:clamp(2.15rem,10vw,2.85rem);line-height:.88;margin:4px 0 7px;letter-spacing:-.055em}
  #authView .auth-art>p{font-size:.76rem;line-height:1.3;margin:0;max-width:360px}
  #authView .security-chips{gap:5px;margin-top:8px;flex-wrap:nowrap}
  #authView .security-chips span{font-size:.61rem;padding:5px 7px;white-space:nowrap}
  #authView .auth-panel-wrap{flex:1;min-height:0;display:flex;align-items:flex-start;justify-content:center;padding:0 12px 9px;margin-top:-2px}
  #authView .auth-panel{width:min(100%,430px);max-height:100%;overflow:hidden;padding:14px 16px 12px;border-radius:21px;box-shadow:0 14px 38px rgba(53,42,34,.12)}
  #authView .panel-kicker{font-size:.61rem;letter-spacing:.12em}
  #authView .auth-panel h2{font-size:1.72rem;margin:2px 0 0}
  #authView .auth-panel>p.muted{font-size:.73rem;margin:3px 0 0;line-height:1.25}
  #authView .demo-banner{display:none}
  #authView .form-stack{gap:9px;margin-top:10px}
  #authView .form-stack label{font-size:.74rem;gap:5px}
  #authView .form-stack input{padding:10px 11px;border-radius:12px;font-size:.82rem}
  #authView .password-wrap{border-radius:12px}
  #authView .password-wrap input{padding:10px 11px}
  #authView .text-btn{padding:0 11px;font-size:.73rem}
  #authView .btn-xl{padding:11px 14px;border-radius:12px;font-size:.84rem}
  #authView .auth-actions{margin:8px 0 0;font-size:.72rem;align-items:center}
  #authView .link-btn{font-size:.72rem;padding:3px 0}
  #authView .auth-note{display:none}
  #authView .demo-credentials{margin-top:5px;font-size:.64rem;color:#777d86}
  #authView .demo-credentials div{margin-top:3px}
  .splash{padding:20px}
  .splash-copy{margin-top:12px}
  .splash-copy h1{font-size:clamp(1.8rem,8vw,2.7rem)}
  .splash-copy p{font-size:.88rem}
  .splash-profile{margin-top:18px;padding:8px 14px 8px 8px}
  .splash-attendance-actions{margin-top:12px}
  .splash-action{min-width:105px;padding:8px 11px;font-size:.75rem}
  .loader-line{margin-top:15px;width:180px}
}
@media(max-width:680px) and (max-height:720px){
  #authView .auth-art{flex-basis:35%;padding-top:9px}
  #authView .auth-logos img:first-child{width:72px;max-height:48px}
  #authView .auth-logos img:last-child{width:69px;max-height:47px}
  #authView .auth-logos{min-height:48px}
  #authView .brand-divider{height:31px}
  #authView .auth-art h1{font-size:1.95rem;margin-bottom:4px}
  #authView .auth-art>p{font-size:.69rem}
  #authView .security-chips{margin-top:5px}
  #authView .security-chips span{font-size:.56rem;padding:4px 6px}
  #authView .auth-panel{padding:11px 14px 9px}
  #authView .auth-panel h2{font-size:1.5rem}
  #authView .auth-panel>p.muted{display:none}
  #authView .form-stack{gap:7px;margin-top:7px}
  #authView .form-stack input,#authView .password-wrap input{padding:8px 10px}
  #authView .btn-xl{padding:9px 12px}
  #authView .demo-credentials{display:none}
}
@media(prefers-reduced-motion:reduce){.splash-brand,.logo-stage-sos,.logo-stage-ab,.splash-copy,.splash-profile,.splash-checkin,.splash-checkout,.loader-line,.auth-view:not(.hidden) .auth-art,.auth-view:not(.hidden) .auth-panel,.auth-logos img,.login-intro,.login-intro-avatar,.login-intro h2,.login-intro p,.login-intro-action,.login-intro-line{animation-duration:.001ms!important;animation-delay:0ms!important;animation-iteration-count:1!important}}

/* v1.3 — named administrator + stronger admin controls */
.admin-identity .avatar{box-shadow:0 0 0 5px rgba(179,19,34,.08);border:2px solid rgba(179,19,34,.16)}
.admin-profile-card{background:linear-gradient(155deg,#fff,#fff7f3)}
.admin-quick-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
.admin-quick-actions .quick-btn{min-height:112px}
.admin-user-filters{display:flex;gap:10px;align-items:center;margin:0 0 16px}
.admin-user-filters input{flex:1;min-width:180px}
.admin-user-filters input,.admin-user-filters select{border:1px solid #dedde1;border-radius:12px;background:#fff;padding:10px 12px}
.employee-manage-head{display:flex;align-items:center;gap:14px;padding:4px 0 6px}.employee-manage-head h3{margin:0 0 3px}
.manage-actions{display:flex;flex-wrap:wrap;gap:9px}.danger-text{color:var(--red)}
.admin-more-grid{display:grid;gap:10px}.admin-more-grid .quick-btn{text-align:left;width:100%}
@media(max-width:760px){.admin-quick-actions{grid-template-columns:1fr}.admin-user-filters{align-items:stretch;flex-direction:column}.admin-user-filters input{min-width:0}.manage-actions .btn{flex:1 1 calc(50% - 8px)}}
@media(max-width:430px){.hero-card.admin-hero{padding:20px}.hero-card.admin-hero h1{font-size:1.55rem}.admin-identity{width:100%;justify-content:flex-start}.manage-actions .btn{flex-basis:100%}}


/* v1.5 — streamlined mobile-first employee experience */
.home-welcome{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#fff,#fff8f4);border:1px solid #ece5dd;border-radius:20px;padding:15px 16px;box-shadow:var(--shadow-sm)}
.home-avatar{width:54px;height:54px}.home-welcome-copy{min-width:0;flex:1}.home-welcome-copy>span{font-size:.72rem;color:var(--muted)}.home-welcome-copy h1{margin:1px 0;font-size:1.45rem;letter-spacing:-.035em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.home-welcome-copy p{margin:0;font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.home-state{font-size:.65rem;font-weight:850;background:#fff3df;color:#8b5b00;border-radius:999px;padding:6px 8px;white-space:nowrap}.home-state.active{background:#eef3ff;color:#315a9d}.home-state.done{background:#e8f7ed;color:#156b3f}
.home-primary-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}.home-action{min-height:94px;border:1px solid #ece7e2;border-radius:18px;padding:12px 8px;background:#fff;box-shadow:0 7px 18px rgba(49,42,37,.055);display:grid;place-content:center;gap:7px;text-align:center;color:var(--ink)}.home-action span{font-size:1.45rem;line-height:1}.home-action b{font-size:.82rem}.home-action.checkin{background:linear-gradient(145deg,#fff,#fff1f2)}.home-action.checkout{background:linear-gradient(145deg,#fff,#f3f6ff)}.home-action.leave{background:linear-gradient(145deg,#fff,#fff8df)}.home-action:disabled{opacity:.43;filter:grayscale(.35);cursor:not-allowed;box-shadow:none}
.home-today-card{margin-top:12px;background:#fff;border:1px solid #ece9e5;border-radius:18px;padding:13px 14px;box-shadow:0 7px 20px rgba(49,42,37,.045)}.home-today-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.home-today-head>div b{display:block;font-size:.9rem;margin-top:2px}.home-today-head .eyebrow{font-size:.58rem}.home-time-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#ece9e5;border-radius:13px;overflow:hidden}.home-time-grid>div{background:#fafafa;padding:10px 8px;text-align:center}.home-time-grid span{display:block;color:var(--muted);font-size:.65rem;margin-bottom:3px}.home-time-grid b{font-size:.85rem}.home-note{margin:10px 2px 0;color:#69707a;font-size:.69rem;line-height:1.35}.attendance-page-actions{margin-top:0}
.mt-sm{margin-top:10px}.compact-modal-actions{margin-top:10px}.compact-confirm{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:4px 0 13px}.compact-confirm>div{border:1px solid #ece9e5;border-radius:12px;padding:9px 5px;text-align:center;background:#fafafa}.compact-confirm span{display:block;font-size:1rem;margin-bottom:3px}.compact-confirm b{font-size:.66rem;line-height:1.15}.compact-qr-form{margin-top:10px!important;gap:8px!important}

@media(max-width:980px){
  .mobile-nav{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:680px){
  body{font-size:14px}
  #authView .auth-art{flex:0 0 30dvh;padding:10px 20px 0;align-items:flex-start}
  #authView .auth-logos{align-self:center;min-height:56px}
  #authView .auth-logos img:first-child{width:82px;max-height:55px}#authView .auth-logos img:last-child{width:77px;max-height:53px}
  #authView .brand-divider{height:34px}
  #authView .auth-art>.eyebrow{margin-top:6px;font-size:.57rem}
  #authView .auth-art h1{font-size:2rem;line-height:.94;margin:5px 0 0}
  #authView .auth-panel-wrap{padding:0 12px 8px;align-items:flex-start}
  #authView .auth-panel{padding:13px 15px 12px;border-radius:20px;max-height:none}
  #authView .panel-kicker{font-size:.56rem}
  #authView .auth-panel h2{font-size:1.48rem;margin:1px 0 0}
  #authView .form-stack{gap:7px;margin-top:8px}
  #authView .form-stack label{font-size:.7rem;gap:4px}
  #authView .form-stack input,#authView .password-wrap input{padding:8px 10px;font-size:.78rem}
  #authView .btn-xl{padding:9px 12px;font-size:.8rem}
  #authView .auth-actions{margin-top:7px;font-size:.67rem}
  #authView .link-btn{font-size:.67rem}
  .topbar{height:62px;padding:8px 11px}.topbar .eyebrow{font-size:.56rem}.topbar h2{font-size:1.08rem;margin-top:1px}.icon-btn{width:38px;height:38px}.profile-chip{padding:3px}.profile-chip .avatar{width:38px;height:38px}
  .page-content{padding:10px 10px 82px}
  .mobile-nav{padding:5px 4px var(--safe-bottom)}.mobile-nav .nav-btn{font-size:.62rem;padding:4px 2px}.mobile-nav .nav-btn .nav-icon{font-size:1.05rem}
  .home-welcome{padding:11px 12px;border-radius:17px;gap:9px}.home-avatar{width:46px;height:46px}.home-welcome-copy h1{font-size:1.18rem}.home-welcome-copy>span,.home-welcome-copy p{font-size:.65rem}.home-state{font-size:.58rem;padding:5px 6px}
  .home-primary-actions{gap:7px;margin-top:9px}.home-action{min-height:82px;border-radius:15px;padding:9px 5px;gap:5px}.home-action span{font-size:1.25rem}.home-action b{font-size:.72rem}
  .home-today-card{margin-top:9px;padding:10px;border-radius:16px}.home-today-head{margin-bottom:7px}.home-today-head>div b{font-size:.8rem}.home-time-grid>div{padding:8px 4px}.home-time-grid span{font-size:.59rem}.home-time-grid b{font-size:.76rem}.home-note{font-size:.63rem;margin-top:7px}
  .modal-backdrop{padding:6px;align-items:end}.modal{border-radius:20px 20px 6px 6px;max-height:91dvh}.modal-head{padding:13px 14px 7px}.modal-head h3{font-size:1.08rem}.modal-close{width:32px;height:32px}.modal-body{padding:7px 14px 14px}.stepper{margin-bottom:9px}.stepper span{height:3px}.compact-camera{aspect-ratio:16/10;border-radius:14px}.camera-hint{bottom:8px;font-size:.62rem;padding:5px 7px}.verify-row{padding:9px;border-radius:12px}.verify-row .mark{width:27px;height:27px}.compact-qr{aspect-ratio:4/3;border-radius:14px}.modal .btn{padding:10px 12px;border-radius:12px;font-size:.78rem}.modal .form-stack label{font-size:.7rem}.modal input,.modal select,.modal textarea{padding:9px 10px;border-radius:11px;font-size:.78rem}
}
@media(max-width:680px) and (max-height:720px){
  #authView .auth-art{flex-basis:27%;padding-top:6px}#authView .auth-logos{min-height:42px}#authView .auth-logos img:first-child{width:65px;max-height:42px}#authView .auth-logos img:last-child{width:61px;max-height:41px}#authView .auth-art h1{font-size:1.65rem}#authView .auth-art>.eyebrow{font-size:.52rem}#authView .auth-panel{padding:9px 13px}#authView .auth-panel h2{font-size:1.3rem}#authView .form-stack{margin-top:6px;gap:5px}#authView .form-stack input,#authView .password-wrap input{padding:7px 9px}#authView .btn-xl{padding:8px 10px}
}

.request-card{max-width:680px;margin:0 auto;padding:15px}.request-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#f2f1ef;padding:4px;border-radius:13px}.request-tabs button{border:0;background:transparent;border-radius:10px;padding:9px;font-weight:800;color:#6b7079}.request-tabs button.active{background:#fff;color:var(--red);box-shadow:0 3px 10px rgba(30,25,22,.07)}.compact-request-form{margin-top:12px;gap:11px}.compact-section-head{max-width:680px;margin:15px auto 9px}
@media(max-width:680px){.request-card{padding:11px;border-radius:16px}.request-tabs button{padding:7px;font-size:.72rem}.compact-request-form{margin-top:9px;gap:8px}.compact-request-form label{font-size:.7rem;gap:4px}.compact-request-form input,.compact-request-form select,.compact-request-form textarea{padding:9px 10px;border-radius:11px;font-size:.76rem}.compact-date-grid{gap:7px}.compact-section-head{margin:11px 2px 7px}.compact-section-head h3{font-size:.86rem}.empty-state{padding:18px}}

/* v1.7 — compact core UI, instant unified animation, AB Medicals as default department */
.splash{padding:18px;gap:0}
.splash-brand,.logo-stage-sos,.logo-stage-ab,.splash-copy,.splash-core{animation:v17AllIn .34s ease both!important;animation-delay:0s!important}
.splash-copy{margin-top:10px}.splash-copy h1{font-size:clamp(1.7rem,6vw,2.6rem);margin:5px 0 2px}.splash-copy p{font-size:.82rem}
.splash-core{position:relative;z-index:2;display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:13px auto 0}.splash-core span{font-size:.66rem;font-weight:800;padding:6px 8px;border:1px solid #eaded7;background:rgba(255,255,255,.82);border-radius:999px}
@keyframes v17AllIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}

.login-intro .brand-pair,.login-intro-avatar,.login-intro h2,.login-intro p,.login-intro-action,.login-intro-line{animation:v17AllIn .25s ease both!important;animation-delay:0s!important;opacity:1!important;transform:none!important}
.login-intro-avatar{width:76px;height:76px;margin:12px auto 7px;border-width:3px}.login-intro h2{font-size:1.35rem;margin:3px 0}.login-intro-actions{margin-top:10px;gap:7px}.login-intro-action{padding:8px;border-radius:12px}.login-intro-action b{font-size:.72rem}.login-intro-action span{font-size:1rem}.login-intro-line{display:none}.login-intro .brand-pair img{width:78px;max-height:54px}.login-intro .brand-divider{height:34px}

.compact-register{gap:10px;margin-top:12px}.compact-register label{gap:5px;font-size:.75rem}.compact-register input,.compact-register select{padding:10px 11px;border-radius:12px}.compact-profile-upload{padding:10px;gap:12px;border-radius:14px}.compact-profile-upload .avatar-xl{width:58px;height:58px}.compact-profile-upload .button-row{margin-top:6px}.compact-profile-upload .btn{padding:8px 11px;font-size:.72rem}

.core-home{max-width:720px;margin:0 auto}.core-profile-line{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #ece9e5;border-radius:16px;padding:9px 10px;box-shadow:0 5px 16px rgba(49,42,37,.04)}.core-avatar{width:42px;height:42px}.core-profile-line>div:nth-child(2){min-width:0;flex:1}.core-profile-line b,.core-profile-line span{display:block}.core-profile-line b{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.core-profile-line span{font-size:.64rem;color:var(--muted);margin-top:2px}.core-status{font-style:normal;font-size:.59rem;font-weight:850;padding:5px 7px;border-radius:999px;background:#fff3df;color:#875600;white-space:nowrap}.core-status.active{background:#eef3ff;color:#315a9d}.core-status.done{background:#e8f7ed;color:#156b3f}
.core-action-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:9px}.core-action{min-height:72px;border:1px solid #ebe8e4;background:#fff;border-radius:14px;padding:8px 5px;display:grid;place-content:center;gap:4px;text-align:center;color:var(--ink);box-shadow:0 5px 14px rgba(49,42,37,.045)}.core-action span{font-size:1.15rem;line-height:1}.core-action b{font-size:.68rem;line-height:1.15}.core-action.checkin{background:linear-gradient(145deg,#fff,#fff1f2)}.core-action.checkout{background:linear-gradient(145deg,#fff,#f3f6ff)}.core-action.history{background:linear-gradient(145deg,#fff,#f4f7f5)}.core-action.leave{background:linear-gradient(145deg,#fff,#fff8df)}.core-action.settings{background:linear-gradient(145deg,#fff,#f6f4fb)}.core-action:disabled{opacity:.42;box-shadow:none;filter:grayscale(.25)}
.today-strip{display:flex;align-items:center;gap:8px;margin-top:8px;padding:8px 10px;border:1px solid #ece9e5;background:#fff;border-radius:13px;font-size:.65rem;color:var(--muted)}.today-strip span{text-transform:uppercase;font-size:.55rem;font-weight:900;letter-spacing:.08em;color:var(--red)}.today-strip b{color:var(--ink);font-size:.69rem}.today-strip i{font-style:normal;color:#aaa}.today-strip strong{margin-left:auto;font-size:.66rem;color:#4e5663}

.compact-settings{max-width:760px;margin:0 auto}.compact-settings .card{padding:14px}.compact-settings .profile-card .avatar{width:64px;height:64px}.compact-settings .profile-card h3{margin:8px 0 2px}.settings-card .section-head{margin-bottom:8px}.settings-card .detail-row{padding:9px 0}

.admin-compact-head{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid #e9e4de;border-radius:16px;background:linear-gradient(135deg,#fff,#fff7f3);box-shadow:0 5px 16px rgba(49,42,37,.045)}.admin-compact-head .avatar{width:46px;height:46px}.admin-compact-head h2{font-size:1rem;margin:1px 0}.admin-compact-head p{font-size:.64rem;color:var(--muted);margin:0}.admin-compact-head .eyebrow{font-size:.52rem}.admin-mini-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:8px}.admin-mini-stats .stat-card{padding:9px;border-radius:14px;gap:7px;box-shadow:0 4px 12px rgba(49,42,37,.04)}.admin-mini-stats .stat-icon{width:30px;height:30px;border-radius:9px;font-size:.8rem}.admin-mini-stats .stat-card strong{font-size:1rem}.admin-mini-stats .stat-card span{font-size:.58rem}.admin-core-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:8px}.admin-core-btn{min-height:68px;border:1px solid #ebe8e4;background:#fff;border-radius:14px;display:grid;place-content:center;text-align:center;gap:4px;color:var(--ink)}.admin-core-btn span{font-size:1rem}.admin-core-btn b{font-size:.66rem}

@media(max-width:680px){
  .splash .logo-stage img{width:92px;max-height:64px}.splash .logo-stage-ab img{width:86px}.splash .brand-divider{height:40px}.splash-copy h1{font-size:1.65rem}.splash-core{margin-top:9px}.splash-core span{font-size:.56rem;padding:5px 6px}
  .employee-ui .mobile-nav{grid-template-columns:repeat(2,1fr);max-width:230px;left:50%;right:auto;transform:translateX(-50%);border:1px solid #e7e5e2;border-bottom:0;border-radius:16px 16px 0 0;padding:4px 8px var(--safe-bottom)}
  .employee-ui .page-content{padding:8px 9px 76px}.employee-ui .topbar{height:56px}.employee-ui .topbar h2{font-size:.98rem}.employee-ui .topbar .eyebrow{font-size:.5rem}.employee-ui .profile-chip .avatar{width:34px;height:34px}.employee-ui .icon-btn{width:34px;height:34px}
  .core-profile-line{padding:8px;border-radius:14px}.core-avatar{width:38px;height:38px}.core-action-grid{grid-template-columns:repeat(3,1fr);gap:6px;margin-top:7px}.core-action{min-height:64px;padding:6px 4px;border-radius:12px}.core-action span{font-size:1.02rem}.core-action b{font-size:.62rem}.today-strip{padding:7px 8px;margin-top:7px;gap:6px}
  .admin-ui .page-content{padding:8px 9px 78px}.admin-ui .topbar{height:56px}.admin-ui .topbar h2{font-size:.98rem}.admin-ui .topbar .eyebrow{font-size:.5rem}.admin-mini-stats{grid-template-columns:repeat(4,1fr);gap:5px}.admin-mini-stats .stat-card{display:grid;text-align:center;padding:7px 3px;gap:3px}.admin-mini-stats .stat-icon{margin:auto;width:26px;height:26px}.admin-mini-stats .stat-card strong{font-size:.9rem}.admin-mini-stats .stat-card span{font-size:.51rem}.admin-core-grid{gap:6px}.admin-core-btn{min-height:62px;border-radius:12px}.admin-core-btn b{font-size:.6rem}
  #registerView .auth-art{display:none}#registerView .auth-panel-wrap{padding:8px;min-height:100dvh;align-items:flex-start}#registerView .auth-panel{padding:13px;border-radius:18px}.compact-register{grid-template-columns:1fr 1fr}.compact-register .span-2{grid-column:span 2}
}
@media(max-width:390px){.core-action-grid{grid-template-columns:repeat(2,1fr)}.core-action.settings{grid-column:span 2}.admin-core-grid{grid-template-columns:repeat(2,1fr)}.admin-mini-stats{grid-template-columns:repeat(2,1fr)}}
.request-history{max-width:680px;margin:8px auto 0;padding:10px 12px;border-radius:14px}.request-history summary{cursor:pointer;font-size:.72rem;font-weight:850;color:var(--red)}.request-history-body{margin-top:9px}.request-history-body .table-wrap{border-radius:12px}.request-history-body .empty-state{padding:12px;font-size:.7rem}


/* v1.8 — production-ready approval flow + final compact polish */
.developer-credit{margin:9px 0 0;text-align:center;font-size:.61rem;color:#8a8d94;line-height:1.35}
.developer-credit strong{color:#6c1e28}
.settings-credit{margin:11px 0 0;padding-top:9px;border-top:1px solid #eee9e5;text-align:center;font-size:.6rem;color:#8a8d94}
.settings-credit strong{color:#6c1e28}
.admin-refresh{margin:8px auto 0;max-width:150px;padding:7px 10px;font-size:.65rem}
@media(max-width:680px){
  .developer-credit{font-size:.56rem;margin-top:7px}
  .auth-panel .btn-xl{padding:11px 14px}
  .auth-panel h2{margin-bottom:8px}
}

/* v1.9.2 notification routing + resilient approvals */
.notification-row{width:100%;text-align:left;background:#fff;color:inherit;font:inherit;cursor:pointer;border:1px solid #ece9e5}
.notification-row:hover{background:#fffafb;border-color:#e7c8cb}
.notification-row.unread{background:#fff8f8;border-color:#efbdc2}
.photo-source-picker .admin-more-grid{margin-top:14px}
.photo-source-picker .quick-btn{min-height:96px}


/* v1.9.2 notification deep-link and approval focus */
.notification-context{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px;padding:10px 12px;border:1px solid #ead6d8;border-radius:14px;background:#fffafa;font-size:.72rem}
.notification-context span{color:var(--muted)}.notification-context b{color:var(--red)}.notification-context em{font-style:normal;color:#5f6570}
.notification-focus-row{box-shadow:inset 4px 0 0 var(--red);background:#fffafa}
.approval-warning{margin-bottom:12px}.approval-warning p{margin:6px 0 0;line-height:1.5}


/* v1.9.3 notification inbox + approval history */
.notification-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 12px}
.notification-toolbar>div{display:grid;gap:2px}.notification-list{display:grid;gap:10px}
.notification-item{border:1px solid #ebe7e3;border-radius:15px;background:#fff;overflow:hidden}
.notification-item.unread{border-color:#e9b9be;background:#fff9f9}
.notification-main{width:100%;border:0;background:transparent;color:inherit;display:flex;gap:11px;align-items:flex-start;text-align:left;padding:13px 13px 10px;cursor:pointer;font:inherit}
.notification-main:hover{background:#fffafa}.notification-main .mark,.notification-detail-head .mark{width:32px;height:32px;flex:0 0 32px;border-radius:50%;display:grid;place-items:center;background:#f5f1ed}
.notification-copy{min-width:0;flex:1}.notification-title-line{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.notification-title-line b{font-size:.82rem}
.notification-actions{display:flex;justify-content:flex-end;gap:7px;padding:0 12px 11px}.notification-actions .btn{padding:7px 10px;font-size:.68rem}
.notification-detail{display:grid;gap:11px}.notification-detail-head{display:flex;align-items:flex-start;gap:10px;padding-bottom:4px}.notification-detail-head>div:nth-child(2){min-width:0;flex:1}.notification-detail-head h4{margin:1px 0 3px;font-size:1rem}
.notification-detail-box{display:grid;gap:4px;border:1px solid #ece8e4;border-radius:13px;padding:11px 12px;background:#fcfbfa}.notification-detail-box span{font-size:.6rem;text-transform:uppercase;letter-spacing:.09em;font-weight:850;color:var(--muted)}.notification-detail-box b,.notification-detail-box p{margin:0;font-size:.76rem;line-height:1.45}
.notification-detail-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.approval-status-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;background:#f3f1ef;border-radius:14px;padding:4px;margin:0 0 12px}
.approval-status-tabs button{border:0;background:transparent;color:#666b73;border-radius:11px;padding:9px 10px;font-weight:850;font-size:.72rem;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer}
.approval-status-tabs button span{min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:#e7e3df;display:grid;place-items:center;font-size:.62rem}
.approval-status-tabs button.active{background:#fff;color:var(--red);box-shadow:0 3px 11px rgba(31,25,21,.07)}.approval-status-tabs button.active span{background:#fff0f1}
.mt-xs{margin-top:5px}
.muted.tiny{font-size:.59rem}
@media(max-width:680px){
  .notification-toolbar{align-items:flex-start}.notification-toolbar .btn{padding:7px 9px;font-size:.65rem}
  .notification-main{padding:11px 10px 8px}.notification-actions{padding:0 9px 9px}.notification-actions .btn{flex:1}
  .notification-detail-actions .btn{flex:1 1 100%}.approval-status-tabs button{padding:8px 4px;font-size:.65rem;gap:4px}
}

/* v1.9.4 QR-first attendance + privacy-safe selfie review */
.attendance-stage-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.attendance-stage-head>b{font-size:.88rem}.attendance-auto-status{margin:10px 0 0;padding:10px 12px;border:1px solid #e8e3de;border-radius:12px;background:#faf9f7;font-size:.72rem;line-height:1.45;color:#5f6570}
.attendance-auto-status.success{border-color:#bfe3cb;background:#f2fbf5;color:#17653d}.attendance-auto-status.error{border-color:#efc2c6;background:#fff5f5;color:#9c2632}
.face-auto-camera{position:relative;overflow:hidden}.face-auto-camera video{transform:none}
.photo-review-note{padding:10px 12px;border:1px solid #e8e3de;border-radius:13px;background:#faf9f7;margin-bottom:12px}.photo-review-note b{font-size:.78rem}.photo-review-note p{margin:4px 0 0;font-size:.68rem;color:var(--muted);line-height:1.45}
.photo-review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.photo-review-card{display:grid;gap:7px}.photo-review-card>span{font-size:.64rem;font-weight:850;color:#666b73}.photo-review-card img,.photo-missing{width:100%;aspect-ratio:1/1;border-radius:14px;border:1px solid #e8e3de;background:#f5f3f1;object-fit:cover}.photo-missing{display:grid;place-items:center;text-align:center;padding:14px;font-size:.68rem;color:var(--muted)}
@media(max-width:680px){.attendance-stage-head{align-items:flex-start}.photo-review-grid{grid-template-columns:1fr}.attendance-auto-status{font-size:.68rem}}

/* v1.9.8 — full-screen QR scanner + front camera attendance flow */
body.attendance-camera-open{overflow:hidden;background:#000}
.attendance-fullscreen-backdrop{padding:0!important;display:block!important;background:#000!important;backdrop-filter:none!important}
.attendance-fullscreen-modal{width:100vw!important;max-width:none!important;height:100dvh!important;max-height:none!important;border-radius:0!important;overflow:hidden!important;background:#05070b!important;color:#fff!important;display:flex!important;flex-direction:column!important}
.attendance-fullscreen-modal .modal-head{position:absolute;z-index:40;top:0;left:0;right:0;padding:calc(12px + env(safe-area-inset-top)) 16px 10px;background:linear-gradient(180deg,rgba(0,0,0,.78),rgba(0,0,0,0));color:#fff;pointer-events:none}
.attendance-fullscreen-modal .modal-head h3{font-size:1.05rem;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.attendance-fullscreen-modal .modal-close{pointer-events:auto;margin-left:auto;background:rgba(255,255,255,.18)!important;color:#fff!important;border:1px solid rgba(255,255,255,.24)!important}
.attendance-fullscreen-modal .modal-body{padding:0!important;flex:1;min-height:0;display:block;position:relative;overflow:hidden}
.attendance-live-stage{position:absolute;inset:0;background:#000;overflow:hidden}
.attendance-live-stage>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.face-live-stage>video{transform:none}
.attendance-live-top{position:absolute;z-index:20;top:calc(70px + env(safe-area-inset-top));left:18px;right:18px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.72)}
.attendance-live-top>b{display:block;font-size:1.08rem;line-height:1.2}.attendance-live-top>span{display:block;margin-top:4px;font-size:.74rem;opacity:.88}
.live-stepper{margin:11px 0 0!important}.live-stepper span{background:rgba(255,255,255,.28)!important;height:4px!important}.live-stepper span.active{background:#fff!important}
.attendance-live-bottom{position:absolute;z-index:24;left:0;right:0;bottom:0;padding:16px max(16px,env(safe-area-inset-left)) calc(18px + env(safe-area-inset-bottom));background:linear-gradient(0deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.64) 68%,rgba(0,0,0,0) 100%);color:#fff}
.live-status{font-size:.9rem;font-weight:750;line-height:1.35;text-align:center;margin:0 auto 12px;max-width:620px;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.live-help{text-align:center;font-size:.7rem;opacity:.82;margin-top:9px}
.manual-site-code{display:flex;gap:8px;max-width:620px;margin:0 auto}.manual-site-code input{flex:1;min-width:0;background:rgba(255,255,255,.94)!important;color:#111827!important;border-color:transparent!important}.manual-site-code .btn{flex:none;background:rgba(255,255,255,.96)!important}
.qr-dim{position:absolute;inset:0;background:rgba(0,0,0,.18);pointer-events:none}
.fullscreen-qr-frame{position:absolute;z-index:12;left:50%;top:48%;transform:translate(-50%,-50%);width:min(68vw,430px);height:min(68vw,430px);border:4px solid rgba(255,255,255,.98)!important;border-radius:26px!important;box-shadow:0 0 0 9999px rgba(0,0,0,.28)!important;pointer-events:none}
.fullscreen-qr-frame:before,.fullscreen-qr-frame:after{content:"";position:absolute;width:42px;height:42px;border-color:#ef233c;border-style:solid}.fullscreen-qr-frame:before{left:-5px;top:-5px;border-width:6px 0 0 6px;border-radius:18px 0 0 0}.fullscreen-qr-frame:after{right:-5px;bottom:-5px;border-width:0 6px 6px 0;border-radius:0 0 18px 0}
.fullscreen-face-guide{inset:50% auto auto 50%!important;transform:translate(-50%,-50%);width:min(72vw,460px);height:min(92vw,580px);max-height:68dvh;border:3px solid rgba(255,255,255,.94)!important;border-radius:48% 48% 44% 44%!important;box-shadow:0 0 0 9999px rgba(0,0,0,.18);z-index:12}
.attendance-fullscreen-modal #faceStatus.success{color:#d9ffe7}.attendance-fullscreen-modal #faceStatus.error{color:#ffd7db}
.attendance-fullscreen-modal #captureAttPhoto{max-width:620px;margin:0 auto;background:linear-gradient(135deg,var(--red),var(--red-2))!important;color:#fff!important}
@media(min-width:900px){.attendance-fullscreen-modal{width:min(100vw,1100px)!important;height:min(96dvh,900px)!important;margin:2dvh auto;border-radius:24px!important}.attendance-fullscreen-backdrop{display:grid!important;place-items:center!important;padding:0!important;background:rgba(5,8,14,.92)!important}.fullscreen-qr-frame{width:min(45vh,430px);height:min(45vh,430px)}.fullscreen-face-guide{width:min(42vh,440px);height:min(55vh,570px)}}


/* v1.10.0 — full-screen profile camera, unmirrored front camera, reliable photo flow */
body.photo-camera-open{overflow:hidden;background:#000}
.photo-camera-fullscreen-backdrop{
  display:block!important;padding:0!important;background:#000!important;backdrop-filter:none!important;
}
.photo-camera-fullscreen-modal{
  width:100vw!important;max-width:none!important;height:100dvh!important;max-height:none!important;
  border-radius:0!important;overflow:hidden!important;background:#000!important;color:#fff!important;
  display:flex!important;flex-direction:column!important;
}
.photo-camera-fullscreen-modal .modal-head{
  position:absolute;z-index:30;top:0;left:0;right:0;
  padding:calc(12px + env(safe-area-inset-top)) 16px 10px;
  background:linear-gradient(180deg,rgba(0,0,0,.78),rgba(0,0,0,0));color:#fff;
}
.photo-camera-fullscreen-modal .modal-head h3{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.photo-camera-fullscreen-modal .modal-close{
  background:rgba(255,255,255,.18)!important;color:#fff!important;
  border:1px solid rgba(255,255,255,.25)!important;
}
.photo-camera-fullscreen-modal .modal-body{padding:0!important;flex:1;min-height:0;overflow:hidden!important;position:relative}
.generic-camera-stage{position:absolute;inset:0;background:#000;overflow:hidden}
.generic-camera-stage>video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;
  transform:none!important; /* front-camera preview intentionally NOT mirrored */
}
.generic-face-guide{
  inset:50% auto auto 50%!important;transform:translate(-50%,-50%)!important;
  width:min(72vw,460px);height:min(92vw,580px);max-height:68dvh;
  border:3px solid rgba(255,255,255,.94)!important;border-radius:48% 48% 44% 44%!important;
  box-shadow:0 0 0 9999px rgba(0,0,0,.14);z-index:10;
}
.generic-camera-hint{
  position:absolute;left:50%;bottom:calc(104px + env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:20;width:min(90vw,620px);text-align:center;
  padding:8px 12px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:.78rem;
}
.generic-camera-controls{
  position:absolute;z-index:25;left:0;right:0;bottom:0;padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  display:grid;grid-template-columns:minmax(120px,1fr) minmax(100px,.6fr);gap:10px;
  background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,0));
}
.generic-camera-controls .btn{min-height:52px;font-size:1rem}
@media(min-width:900px){
  .photo-camera-fullscreen-modal{width:min(100vw,1100px)!important;height:min(96dvh,900px)!important;margin:2dvh auto;border-radius:24px!important}
  .photo-camera-fullscreen-backdrop{display:grid!important;place-items:center!important;background:rgba(5,8,14,.94)!important}
  .generic-face-guide{width:min(42vh,440px);height:min(55vh,570px)}
}

/* v1.10.1 — mobile camera viewport hardening + explicit non-mirrored preview */
body.photo-camera-open,
body.attendance-camera-open{overflow:hidden!important;overscroll-behavior:none!important;touch-action:none;background:#000!important}

.photo-camera-fullscreen-backdrop{
  position:fixed!important;inset:0!important;z-index:9999!important;
  width:100vw!important;height:100dvh!important;min-height:100svh!important;
  margin:0!important;padding:0!important;display:block!important;
  background:#000!important;backdrop-filter:none!important;overflow:hidden!important;
}
.photo-camera-fullscreen-modal{
  position:fixed!important;inset:0!important;z-index:10000!important;
  width:100vw!important;max-width:none!important;height:100dvh!important;min-height:100svh!important;max-height:none!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
  overflow:hidden!important;background:#000!important;color:#fff!important;
  display:block!important;box-shadow:none!important;
}
.photo-camera-fullscreen-modal .modal-head{
  position:absolute!important;z-index:10005!important;top:0!important;left:0!important;right:0!important;
  padding:calc(10px + env(safe-area-inset-top)) 14px 14px!important;
  background:linear-gradient(180deg,rgba(0,0,0,.82),rgba(0,0,0,0))!important;
  pointer-events:none!important;
}
.photo-camera-fullscreen-modal .modal-head h3{color:#fff!important;font-size:1.15rem!important}
.photo-camera-fullscreen-modal .modal-close{pointer-events:auto!important;margin-left:auto!important;color:#fff!important;background:rgba(255,255,255,.18)!important;border:1px solid rgba(255,255,255,.28)!important}
.photo-camera-fullscreen-modal .modal-body{position:absolute!important;inset:0!important;padding:0!important;margin:0!important;overflow:hidden!important}
.photo-camera-fullscreen-modal .generic-camera-stage{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;background:#000!important;overflow:hidden!important}
.photo-camera-fullscreen-modal .generic-camera-stage>video{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:center center!important;background:#000!important;
  transform:none!important;-webkit-transform:none!important;scale:1!important;
}
.photo-camera-fullscreen-modal .generic-face-guide{
  position:absolute!important;left:50%!important;top:47%!important;transform:translate(-50%,-50%)!important;
  width:min(78vw,430px)!important;height:min(58vh,560px)!important;inset:auto!important;
  border:2px solid rgba(255,255,255,.84)!important;border-radius:48% 48% 44% 44%!important;
  box-shadow:0 0 0 9999px rgba(0,0,0,.10)!important;pointer-events:none!important;
}
.photo-camera-fullscreen-modal .generic-camera-hint{
  position:absolute!important;z-index:10004!important;left:50%!important;bottom:calc(102px + env(safe-area-inset-bottom))!important;
  transform:translateX(-50%)!important;width:max-content!important;max-width:90vw!important;text-align:center!important;
}
.photo-camera-fullscreen-modal .generic-camera-controls{
  position:absolute!important;z-index:10004!important;left:0!important;right:0!important;bottom:0!important;
  padding:18px 18px calc(18px + env(safe-area-inset-bottom))!important;
  display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,.8fr)!important;gap:10px!important;
  background:linear-gradient(0deg,rgba(0,0,0,.88),rgba(0,0,0,0))!important;
}
.photo-camera-fullscreen-modal .generic-camera-controls .btn{min-height:54px!important;font-size:1rem!important}

/* Attendance selfie camera must also remain unmirrored. */
.attendance-fullscreen-modal video,
.attendance-live-stage>video,
.face-live-stage>video,
.face-auto-camera video{transform:none!important;-webkit-transform:none!important;scale:1!important;object-position:center center!important}

@media(max-width:680px){
  .photo-camera-fullscreen-backdrop{align-items:stretch!important}
  .photo-camera-fullscreen-modal{border-radius:0!important}
}

/* v1.10.2 — camera framing correction.
   Important: keep inset reset BEFORE left/top; otherwise the inset shorthand
   overrides left/top and pushes the face guide to the upper-left corner. */
.photo-camera-fullscreen-modal .generic-face-guide{
  position:absolute!important;
  inset:auto!important;
  left:50%!important;
  top:45%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  width:min(72vw,390px)!important;
  height:min(50dvh,500px)!important;
  max-height:calc(100dvh - 250px)!important;
  border:2px solid rgba(255,255,255,.9)!important;
  border-radius:50% / 46%!important;
  box-shadow:0 0 0 9999px rgba(0,0,0,.10)!important;
  pointer-events:none!important;
  z-index:10003!important;
}
@media(max-width:420px){
  .photo-camera-fullscreen-modal .generic-face-guide{
    width:72vw!important;
    height:min(48dvh,430px)!important;
    top:44%!important;
  }
}


/* v1.10.3 — true unzoomed mobile selfie preview.
   The full-screen camera UI remains full viewport, while the video itself is
   contained so Chrome cannot crop a 4:3/16:9 front-camera feed to a tall phone
   viewport and make the face appear artificially zoomed. */
.photo-camera-fullscreen-modal .generic-camera-stage{background:#000!important;}
.photo-camera-fullscreen-modal .generic-camera-stage>video{
  width:100%!important;height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:none!important;-webkit-transform:none!important;scale:1!important;
  background:#000!important;
}
.photo-camera-fullscreen-modal .generic-face-guide{
  inset:auto!important;left:50%!important;top:47%!important;right:auto!important;bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  width:min(64vw,360px)!important;height:min(43dvh,460px)!important;
  max-height:calc(100dvh - 280px)!important;
}
@media(max-width:420px){
  .photo-camera-fullscreen-modal .generic-face-guide{
    width:64vw!important;height:min(40dvh,410px)!important;top:47%!important;
  }
}

/* v1.10.8 retains first-registration Employee ID Card verification */
.required-note{display:inline-flex;align-items:center;margin-left:6px;padding:3px 7px;border-radius:999px;background:#fff0f1;color:var(--red);font-size:.68rem;font-weight:850;vertical-align:middle}
.id-card-upload-box{display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px;align-items:center;background:#fbfaf8;border:1px dashed #d8d1ca;padding:16px;border-radius:18px}
.id-card-upload-copy{display:grid;gap:8px;min-width:0}.id-card-upload-copy .button-row{margin-top:3px}
.id-card-preview{position:relative;width:220px;aspect-ratio:1.586/1;border-radius:15px;border:1px solid #dedad4;background:linear-gradient(135deg,#f0f1f3,#fff);background-size:cover;background-position:center;display:grid;place-content:center;text-align:center;gap:4px;overflow:hidden;color:#777e89}
.id-card-preview span{font-size:1.35rem;font-weight:950}.id-card-preview small{font-size:.72rem}.id-card-preview.has-image{color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.8)}
.id-card-preview.has-image:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 58%,rgba(0,0,0,.55));pointer-events:none}.id-card-preview.has-image span,.id-card-preview.has-image small{position:relative;z-index:1;align-self:end}
.id-card-camera-stage .id-card-camera-guide{position:absolute;left:50%;top:50%;width:min(82vw,720px);aspect-ratio:1.586/1;transform:translate(-50%,-50%);border:3px solid rgba(255,255,255,.92);border-radius:22px;box-shadow:0 0 0 999px rgba(0,0,0,.18);pointer-events:none}
.id-card-camera-guide span{position:absolute;left:50%;top:-44px;transform:translateX(-50%);white-space:nowrap;background:rgba(0,0,0,.58);color:#fff;padding:8px 12px;border-radius:999px;font-size:.78rem;font-weight:750}
.registration-review-head{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:4px 0 14px}.registration-review-head b,.registration-review-head span{display:block}.registration-review-head>div>span{margin-top:4px;color:var(--muted);font-size:.84rem}
.registration-review-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:14px}.registration-review-card{border:1px solid #e9e6e2;border-radius:18px;padding:12px;background:#fafafa}.registration-review-card>span{display:block;font-size:.78rem;font-weight:850;color:#5e6470;margin-bottom:9px}.registration-review-card img{width:100%;height:300px;object-fit:contain;background:#111;border-radius:12px}.registration-review-card:not(.id-document) img{object-fit:contain}.registration-review-card .photo-missing{height:300px;display:grid;place-items:center;text-align:center;border-radius:12px;background:#f0f1f3;color:#7a808a;padding:14px}
@media(max-width:680px){.id-card-upload-box{grid-template-columns:1fr}.id-card-preview{width:100%;max-width:360px}.registration-review-grid{grid-template-columns:1fr}.registration-review-card img,.registration-review-card .photo-missing{height:240px}.id-card-camera-guide{width:min(88vw,600px)!important}.id-card-camera-guide span{top:-48px;max-width:86vw;white-space:normal;text-align:center}}

/* v1.10.8 — daily attendance timing + today-only dashboard notifications */
.core-status.late,.core-status.early{background:#fff3df;color:#875600}
.attendance-schedule-strip{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:8px;padding:8px 10px;border:1px solid #ece9e5;background:#fffdf8;border-radius:13px;font-size:.64rem;color:var(--muted)}
.attendance-schedule-strip>span{text-transform:uppercase;font-size:.54rem;font-weight:900;letter-spacing:.08em;color:var(--red)}
.attendance-schedule-strip>b{font-size:.66rem;color:var(--ink)}
.attendance-schedule-strip>i{font-style:normal;color:#b7a99e}
.attendance-schedule-strip>small{width:100%;font-size:.58rem;color:#7a7f87}
.today-attendance-notices{display:grid;gap:6px;margin-top:8px}
.today-attendance-notices-head{display:flex;align-items:center;gap:7px;padding:0 2px}
.today-attendance-notices-head span{text-transform:uppercase;font-size:.53rem;font-weight:900;letter-spacing:.08em;color:var(--red)}
.today-attendance-notices-head b{font-size:.63rem;color:var(--muted)}
.today-attendance-notice{display:flex;align-items:flex-start;gap:9px;padding:9px 10px;border-radius:13px;border:1px solid #dceadf;background:#f4fbf6}
.today-attendance-notice>span{width:24px;height:24px;flex:0 0 24px;border-radius:50%;display:grid;place-items:center;background:#e5f5e9;color:var(--success);font-weight:900;font-size:.72rem}
.today-attendance-notice b,.today-attendance-notice small{display:block}
.today-attendance-notice b{font-size:.68rem;color:#225b3e}
.today-attendance-notice small{margin-top:2px;font-size:.61rem;line-height:1.35;color:#53645a}
.today-attendance-notice.warning{border-color:#f0dfbd;background:#fff9ed}
.today-attendance-notice.warning>span{background:#fff0ce;color:var(--warning)}
.today-attendance-notice.warning b{color:#855900}
.today-attendance-notice.warning small{color:#78654a}
.timing-chip{display:block;width:max-content;margin-top:3px;padding:2px 5px;border-radius:999px;font-size:.55rem;font-weight:850;line-height:1.2;background:#e8f7ed;color:#156b3f}
.timing-chip.late,.timing-chip.early{background:#fff3dd;color:#8d5d00}
@media(max-width:430px){
  .attendance-schedule-strip{gap:5px;padding:7px 8px}.attendance-schedule-strip>small{font-size:.55rem}
  .today-strip{flex-wrap:wrap}.today-strip strong{margin-left:0;width:100%;text-align:right}
  .today-attendance-notice{padding:8px}.today-attendance-notice small{font-size:.59rem}
}


/* v1.10.8 attendance security + filter UX */
.toast{display:flex;align-items:flex-start;gap:12px;padding-right:10px;min-width:min(320px,calc(100vw - 36px))}
.toast-message{flex:1;line-height:1.35}
.toast-close{flex:none;width:30px;height:30px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:1.25rem;line-height:1;display:grid;place-items:center;cursor:pointer}
.toast-close:hover{background:rgba(255,255,255,.24)}
.attendance-filter-panel{background:#fff;border:1px solid #e8e5e2;border-radius:18px;padding:12px;margin:0 0 14px;box-shadow:0 6px 20px rgba(35,31,28,.04)}
.period-toggle{display:inline-flex;background:#f1f2f4;border-radius:12px;padding:3px;margin-bottom:10px}
.period-toggle button{border:0;background:transparent;border-radius:9px;padding:8px 18px;font-weight:850;color:#717782;cursor:pointer}
.period-toggle button.active{background:#fff;color:#171b27;box-shadow:0 2px 8px rgba(0,0,0,.09)}
.period-inputs{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.period-inputs input,.period-inputs select{border:1px solid #dedfe3;border-radius:12px;padding:10px 12px;background:#fff;min-height:42px}
.period-inputs input[type=search]{min-width:190px;flex:1}
.attendance-filter-summary{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.attendance-filter-summary span{display:inline-flex;gap:4px;align-items:center;padding:6px 9px;border-radius:999px;background:#f2f3f5;color:#5b626e;font-size:.72rem;font-weight:750}
.attendance-filter-summary span.good{background:#e9f7ee;color:#17643e}.attendance-filter-summary span.warn{background:#fff4df;color:#8b5b00}
.attendance-filter-summary b{font-size:.8rem}
.attendance-history-head{margin-top:4px}
.today-attendance-notices{display:none!important}
@media(max-width:760px){
  .attendance-history-head{align-items:flex-start}.attendance-history-head>.btn{flex:none}
  .attendance-filter-panel{padding:10px;border-radius:15px}
  .period-toggle{display:grid;grid-template-columns:1fr 1fr;width:100%}.period-toggle button{width:100%}
  .period-inputs{display:grid;grid-template-columns:1fr 1fr}.period-inputs input,.period-inputs select,.period-inputs .btn{width:100%;min-width:0}
  .period-inputs input[type=search]{grid-column:1/-1}
  .attendance-filter-summary{gap:5px}.attendance-filter-summary span{font-size:.67rem}
}

.site-pair{display:grid;grid-template-columns:auto 1fr;gap:2px 6px;align-items:center;min-width:125px}.site-pair small{font-size:.55rem;font-weight:900;color:#8a8f99}.site-pair span{font-size:.76rem;font-weight:750;color:#343a46}.timing-status-stack{display:flex;flex-wrap:wrap;gap:4px;min-width:110px}

.attendance-security-note{display:flex;gap:10px;align-items:center;background:#f5f7fb;border:1px solid #e2e6ee;border-radius:15px;padding:10px 12px;margin-bottom:12px}.attendance-security-note>span{width:34px;height:34px;border-radius:11px;background:#fff;display:grid;place-items:center;font-size:1rem}.attendance-security-note b,.attendance-security-note small{display:block}.attendance-security-note small{color:var(--muted);font-size:.72rem;margin-top:2px;line-height:1.35}.home-action:disabled,.core-action:disabled{opacity:.5;cursor:not-allowed;filter:saturate(.6)}