:root{--ink:#183d35;--muted:#516c65;--green:#08734d;--red:#aa2f43;--blue:#245eaa;--violet:#6941a0;--line:#ffffffdb;--shadow:0 14px 45px #244e3f0e,inset 0 1px 0 #fff;--glass:linear-gradient(125deg,#ffffffdc,#ffffff80)}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:#eaf4f0;font:16px/1.65 Tahoma,Arial,sans-serif;min-height:100dvh}button,input,select,textarea{font:inherit}button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #216cc6;outline-offset:4px}input:focus,select:focus,textarea:focus{outline:2px solid #2d8d72;outline-offset:2px}[hidden]{display:none!important}.ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(140deg,#e6f3ed,#f2f6f4 48%,#e9eef8)}.ambient i{position:absolute;width:65vw;height:65vw;max-width:850px;max-height:850px;border-radius:50%;filter:blur(60px);opacity:.65;background:radial-gradient(circle,#a9ddcdb3,transparent 68%);top:-35%;right:-15%}.ambient i:nth-child(2){background:radial-gradient(circle,#c7d0efc4,transparent 67%);top:30%;right:55%}.ambient i:nth-child(3){background:radial-gradient(circle,#e0e9c9bd,transparent 65%);top:65%;right:-20%}header{display:flex;align-items:center;gap:20px;padding:18px 4vw;border-bottom:1px solid #fff;background:#ffffff70;backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px)}.brand{display:flex;align-items:center;gap:11px;margin-inline-end:auto;color:#17684f;font-size:25px;font-weight:700;line-height:1.15}.brand img{width:41px;height:41px;filter:drop-shadow(0 3px 3px #0c8b3920)}.brand small{display:block;font-size:9px;letter-spacing:2.7px;font-weight:400;margin-top:6px}.delta{color:#439674}.status{display:flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid #ffffffec;border-radius:30px;background:#ffffff7d;color:#285d4c;font-size:11px;white-space:nowrap}#connection-dot{height:7px;width:7px;border-radius:100%;background:#168458;box-shadow:0 0 0 4px #178b5a12}.status.offline{color:#805317}.status.offline #connection-dot{background:#b67721;box-shadow:0 0 0 4px #b6772115}button{border:1px solid transparent;border-radius:14px;padding:12px 19px;min-height:50px;transition:background .16s,box-shadow .16s,transform .16s}button:active:not(:disabled){transform:scale(.98)}.subtle{background:#ffffff9e;border:1px solid #fff;color:#2f5c4f;box-shadow:0 2px 7px #264a3b06}.screen-button{font-size:23px;line-height:1;padding:10px 14px;min-height:42px}.screen-button span{font-size:11px;vertical-align:middle}main{max-width:1260px;padding:22px 32px;margin:auto;min-height:calc(100dvh - 128px)}.surface{position:relative;background:var(--glass);border:1px solid var(--line);border-radius:28px;padding:27px;box-shadow:var(--shadow);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px)}.surface:before{content:'';position:absolute;inset:1px;border-radius:inherit;border-top:1px solid #fff;pointer-events:none}.center{max-width:600px;text-align:center;margin:25px auto;padding:35px}.eyebrow{font-size:11px;font-weight:500;letter-spacing:.4px;color:#4b7162}h1,h2,h3,p{margin-top:0}h1{font-size:31px;line-height:1.5;margin-bottom:10px}h2{font-size:23px;line-height:1.5;margin-bottom:8px}h3{font-size:17px;margin-top:24px}p{color:var(--muted)}label{display:block;font-size:13px;text-align:start;margin:14px 0 7px}input,select,textarea{width:100%;min-height:50px;display:block;padding:10px 14px;border:1px solid #c6d8d1;border-radius:13px;color:var(--ink);background:#ffffffcb}#pair-code{text-align:center;font-family:monospace;letter-spacing:1px}.primary{display:block;width:100%;background:linear-gradient(140deg,#198d68,#08714d);border:1px solid #08714d;color:white;font-weight:700;margin-top:18px;box-shadow:0 5px 13px #12764e24,inset 0 1px #ffffff5c}.primary span{float:left}.quiet,.privacy-note{font-size:11px;line-height:1.8;color:#536c63}.login-layout{display:grid;grid-template-columns:1fr 1fr;max-width:1000px;margin:14px auto;padding:0;overflow:hidden;min-height:505px}.login-scene{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;background:linear-gradient(155deg,#e1f4e7a6,#e1eeed5c);border-inline-end:1px solid #fff}.glass-symbol{width:92px;height:92px;border-radius:28px;display:grid;place-items:center;margin:18px 0 2px;transform:rotate(-12deg);background:linear-gradient(140deg,#ffffffb0,#c3e8d980);border:1px solid white;box-shadow:inset 0 2px 2px #fff,0 15px 35px #2c765b18}.glass-symbol span{color:#208566;font-size:55px;line-height:1;transform:rotate(12deg);text-shadow:0 2px white,0 5px 8px #128c7130}.clock{font-size:56px;line-height:1.3;font-weight:400;letter-spacing:2px;font-variant-numeric:tabular-nums;margin-top:9px}.today-label{font-size:11px;margin-bottom:20px}.login-scene h1{font-size:27px}.login-scene>p{font-size:13px;line-height:1.9}.station-label{font-size:11px;color:#476559;max-width:100%}.local-promise{display:flex;align-items:center;gap:8px;font-size:10px;background:#ffffff68;border:1px solid #ffffffce;border-radius:30px;padding:6px 12px;margin-top:20px}.local-promise span{font-size:19px;color:#227958}.pin-panel{padding:28px 44px;text-align:center;align-self:center}.pin-panel h2{font-size:24px;margin-top:5px}.pin-panel>p{font-size:12px;margin-bottom:12px}#pin{font-size:29px;text-align:center;letter-spacing:14px;padding-left:27px;height:61px;background:#ffffff9e;border-color:#fff;box-shadow:inset 0 2px 8px #234c4510}#pin::placeholder{color:#8aa399;opacity:.7}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:13px}.keypad button{border:1px solid #fff;background:linear-gradient(145deg,#ffffffef,#ffffff75);border-radius:15px;color:#254d41;font-size:24px;min-height:50px;padding:5px;box-shadow:0 3px 6px #173f2f05,inset 0 1px white}.keypad button:hover{background:#e1f1e9}#pin-clear,#pin-delete{font-size:13px;color:#657b73}.pin-panel .quiet{font-size:10px;margin:14px 0 0}.welcome{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:20px 0}.welcome h1{margin:3px 0}.welcome p{font-size:12px;margin:0;max-width:780px}.welcome>.subtle{font-size:11px}.welcome-dot{color:#199876}.work-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:22px}.actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.action{position:relative;text-align:start;display:flex;align-items:flex-start;flex-direction:column;gap:6px;min-height:164px;padding:22px;border-radius:24px;overflow:hidden}.action b{font-size:23px}.action small{font-size:11px;color:inherit;opacity:.9}.action:after{content:'';position:absolute;inset-inline-end:-45px;bottom:-50px;width:150px;height:150px;border-radius:50%;background:currentColor;opacity:.035;pointer-events:none}.action-icon{display:grid;place-items:center;width:41px;height:41px;border-radius:13px;border:1px solid #ffffffdb;background:#ffffff91;margin-bottom:4px;box-shadow:0 3px 8px #25473808}.action-icon svg{width:24px;height:24px}.tile-arrow{position:absolute;inset-inline-end:22px;top:22px;font-size:23px;font-weight:400;opacity:.7}#clock-in{color:#076b44;border:2px solid #78b79c;background:linear-gradient(135deg,#edfff6d9,#def4e8a6)}#clock-out{color:#a1273e;border:2px solid #cd7c89;background:linear-gradient(135deg,#fff6f5eb,#f9e4e5b3)}#request-leave{color:#235e9e;border:1px solid #acc8e9;background:linear-gradient(135deg,#f5faffeb,#e3edf8aa)}#my-requests{color:#69438e;border:1px solid #c9b9df;background:linear-gradient(135deg,#fdfaffeb,#efe7f6aa)}.action:hover:not(:disabled){box-shadow:0 12px 24px #204c3a16,inset 0 1px white}.action:disabled{opacity:.45;filter:saturate(.65)}.day-summary{position:relative;border-radius:26px;border:1px solid #fff;background:var(--glass);padding:25px;box-shadow:var(--shadow);overflow:hidden}.day-summary h2{font-size:20px;margin-top:7px}.stat-row{display:flex;flex-direction:column;gap:14px;margin-top:25px}.stat-row article{background:transparent;box-shadow:none;border:0;border-radius:0;padding:0 0 13px;border-bottom:1px solid #d7e4de;backdrop-filter:none;display:flex;flex-direction:column;gap:5px}.stat-row article:before{display:none}.stat-row span{font-size:12px;color:#546f63}.stat-row strong{font-size:34px;font-weight:400;letter-spacing:1px;color:#225d48}.day-summary>.quiet{position:relative;z-index:1;font-size:10px;margin-top:15px}.summary-art{position:absolute;bottom:-27px;left:-10px;font-size:145px;line-height:1;color:#aac7b825;transform:rotate(-20deg);pointer-events:none}.privacy-note{text-align:center;font-size:10px;margin:18px 0 22px}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:16px}.panel-title h2{margin:0}.panel-title .subtle{font-size:12px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.record{border:1px solid #fff;background:#ffffff66;border-radius:16px;padding:17px;margin:12px 0}.record b{font-size:13px}.record p{font-size:12px;margin:6px 0}.badge{display:inline-block;padding:3px 9px;background:#dff1e8;color:#285b43;border-radius:7px;font-size:10px}.badge.pending,.badge.candidate,.badge.queued,.badge.review{background:#fbf0ce;color:#73531c}.badge.rejected,.badge.cancelled{background:#f7e0df;color:#963b3b}.replacement-line{font-size:12px;color:#346a4d;margin-top:7px}.notice,#message{padding:12px 17px;border:1px solid #e5c684;background:#fff5dcdb;color:#78501a;border-radius:16px;margin-bottom:16px;font-size:12px}#message{position:sticky;top:10px;z-index:8}#message[role=alert]{border-color:#d49399;background:#fff0f0;color:#8e2637}#sync-panel{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin-bottom:16px;background:#ffffff86;border-color:#fff;color:#436458;backdrop-filter:blur(22px);box-shadow:0 3px 8px #25473804}#sync-panel[data-state=pending]{background:#fff5dece;border-color:#e3cd99;color:#785019}#sync-panel[data-state=review]{background:#fff0e8dc;border-color:#dfb48b;color:#7f461a}#sync-panel[data-state=blocked]{background:#fff0f0;border-color:#d49399;color:#8e2637}#sync-summary{font-weight:600;font-size:11px}#sync-details{font-size:10px;margin-inline-start:auto}#sync-now{font-size:10px;min-height:30px;padding:4px 12px;border-radius:30px;background:#ffffffad}#idle-warning button{background:#fff9;min-height:36px;font-size:12px;margin-inline-start:10px}.success-icon{background:linear-gradient(145deg,#ffffffd4,#c9eedb);color:#16784d;display:grid;place-items:center;font-size:45px;border-radius:26px;border:1px solid white;width:85px;height:85px;margin:0 auto 20px;box-shadow:0 12px 25px #26784a13}.capture-ring{width:50px;height:50px;border-radius:50%;border:3px solid #cee5da;border-top-color:#128362;margin:0 auto 20px;animation:spin 1s linear infinite}#confirmation[data-kind=clockOut] .capture-ring{border-top-color:#b44253}#confirmation[data-kind=clockOut]{border:2px solid #cd7c89}#camera{width:100%;max-height:220px;border:1px solid white;border-radius:18px;transform:scaleX(-1);object-fit:cover}.capture-status{font-size:13px;color:#22674c;margin-top:14px}#cancel-operation{margin-top:15px;min-width:120px}.station-tools{max-width:1000px;margin:12px auto 0;font-size:10px;color:#526e62}.station-tools summary{cursor:pointer;width:fit-content;padding:8px 2px}.tools-content{padding:18px;background:#ffffff8c;border:1px solid white;border-radius:18px}.tools-content p{font-size:11px}.tools-content button{min-height:40px;font-size:11px;margin:0 0 8px 8px}footer{display:flex;justify-content:space-between;gap:15px;font-size:9px;color:#5c766a;padding:15px 4vw;border-top:1px solid #ffffffb3}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes spin{to{transform:rotate(360deg)}}@media(min-width:900px) and (max-height:820px) and (orientation:landscape){header{padding-block:13px}main{padding-block:15px}.login-layout{min-height:465px;margin:8px auto}.pin-panel{padding-block:20px}.login-scene{padding-block:20px}.glass-symbol{width:70px;height:70px;margin-top:10px}.glass-symbol span{font-size:45px}.clock{font-size:47px}.today-label{margin-bottom:12px}.keypad button{min-height:46px}.welcome{margin:12px 0 18px}.action{min-height:155px;padding:19px}.work-layout{gap:18px}.station-tools{margin-top:6px}}@media(max-width:900px){.work-layout{grid-template-columns:minmax(0,1fr) 210px;gap:15px}.day-summary{padding:20px}.action b{font-size:20px}main{padding-inline:22px}.pin-panel{padding-inline:28px}.screen-button span{display:none}#sync-details{flex-basis:100%}}@media(max-width:650px){header{padding:15px 18px;gap:9px}.brand{font-size:21px;gap:7px}.brand img{width:33px;height:33px}.brand small{font-size:7px}.status{font-size:9px;padding:6px 8px}.screen-button{font-size:21px;min-height:35px;padding:7px 10px}main{padding:18px 16px}.login-layout{grid-template-columns:1fr;max-width:470px;margin:10px auto}.login-scene{padding:23px;border-inline-end:0;border-bottom:1px solid white}.login-scene>.eyebrow,.glass-symbol,.login-scene h1,.login-scene>p:not(.today-label),.local-promise{display:none}.clock{font-size:43px;margin:0}.today-label{margin:2px 0 7px;font-size:10px}.pin-panel{padding:24px 30px}.pin-panel h2{font-size:23px}.keypad button{min-height:54px}.welcome{align-items:flex-start;margin-block:12px 20px}.welcome h1{font-size:25px}.welcome>.subtle{font-size:10px;padding:9px 12px;min-height:42px}.work-layout{grid-template-columns:1fr}.actions{gap:12px}.action{min-height:153px;padding:17px;border-radius:20px}.action b{font-size:18px}.action small{font-size:10px}.tile-arrow{top:16px;inset-inline-end:16px;font-size:20px}.action-icon{width:35px;height:35px}.day-summary{padding:20px}.day-summary h2{font-size:18px}.stat-row{flex-direction:row;margin-top:18px;gap:25px}.stat-row article{flex:1}.stat-row strong{font-size:30px}.day-summary>.quiet{margin:10px 0 0}.form-row{grid-template-columns:1fr}.surface.center{padding:28px 20px;border-radius:23px}h1{font-size:26px}footer{flex-wrap:wrap;font-size:8px}.panel-title h2{font-size:21px}.privacy-note{margin-bottom:18px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}@supports not (backdrop-filter:blur(1px)){.surface,.day-summary,.login-layout{background:#f7fbf9}#sync-panel,header{background:#f0f7f3}}

.brand{margin-inline-end:0;margin-left:auto}.tile-arrow svg{width:23px;height:23px}@media(min-width:900px) and (max-height:820px) and (orientation:landscape){.keypad button{min-height:48px}}

#confirmation[data-capture=failed] .capture-ring{animation:none;border-color:#d49399}#confirmation[data-capture=failed] .capture-status{color:#8e2637}

.download-link{text-decoration:none;margin-bottom:14px;padding:14px}.download-back{display:inline-block;text-decoration:none;padding:10px 16px;border-radius:14px}.install-steps{text-align:start;font-size:13px;padding-inline-start:22px;overflow-wrap:anywhere}.install-steps li{margin-block:12px}

/* ===== v0.6 — readability, touch and performance layer (shared identity with the manager desk) ===== */
:root{--ink:#10302a;--muted:#4b6259;--green:#0f7a50;--red:#b0243c;--blue:#1f56a3;--violet:#62399e;--amber:#8a5a00;--glass:linear-gradient(130deg,#ffffffe0,#ffffff96);--line:#ffffffeb;--blur:blur(16px) saturate(1.4)}
body{font-family:system-ui,-apple-system,"Segoe UI","Noto Sans Arabic","Noto Sans",Tahoma,Arial,sans-serif;color:var(--ink)}
/* Blur filters on large animated layers are expensive on mid-range tablets; soft radial gradients look the same. */
.ambient i{filter:none;opacity:.9}
.surface,.day-summary{backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
header{backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.surface .surface,.stat-row article{backdrop-filter:none;-webkit-backdrop-filter:none}
/* Minimum readable sizes at arm's length */
.eyebrow{font-size:13px;color:#3f5f54}.quiet,.privacy-note{font-size:13px;color:var(--muted)}.status{font-size:13px}
#sync-summary{font-size:13px}#sync-details{font-size:12px}#sync-now{font-size:12.5px;min-height:38px}
.welcome p{font-size:15px}.welcome>.subtle,.welcome-side>.subtle{font-size:13px}.action small{font-size:13.5px}.today-label{font-size:13px}.local-promise{font-size:12px}
.station-label{font-size:13px}.stat-row span{font-size:13.5px}.day-summary>.quiet{font-size:12px}.record b{font-size:15px}.record p,.replacement-line{font-size:14px}.badge{font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px}
.station-tools{font-size:13px}.tools-content p{font-size:13px}.tools-content button{font-size:13px;min-height:44px}
footer{font-size:12px;color:var(--muted)}label{font-size:14px;font-weight:600}
/* PIN: six large dots over an invisible input (physical keyboards still work) */
.pin-field{position:relative;margin-top:6px}
.pin-dots{display:flex;justify-content:center;gap:16px;height:64px;align-items:center;border-radius:18px;background:#ffffffa6;border:1px solid #fff;box-shadow:inset 0 2px 8px #234c4512}
.pin-dots i{width:18px;height:18px;border-radius:50%;border:2px solid #9fb8ad;background:transparent;transition:transform .12s,background .12s,border-color .12s}
.pin-dots i.filled{background:var(--green);border-color:var(--green);transform:scale(1.12);box-shadow:0 0 0 4px #0f7a501f}
#pin{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;min-height:0;padding:0;border:0;letter-spacing:0}
.pin-field:focus-within .pin-dots{outline:3px solid #2f7de1;outline-offset:3px}
.keypad{gap:10px}.keypad button{font-size:27px;font-weight:500;min-height:58px;border-radius:16px}.keypad button:active{background:#d9efe4}
#pin-clear,#pin-delete{font-size:15px;color:#3f5f54}
.pin-panel.shake{animation:shake .38s ease-in-out}.pin-panel.shake .pin-dots{border-color:#e7a3ad;background:#fff0f2}
@keyframes shake{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
/* Duty status card */
.welcome-side{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.duty-card{display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:18px;border:1px solid #fff;background:#ffffffb3;box-shadow:inset 0 1px #fff,0 6px 18px #24473812;min-height:62px}
.duty-card b{display:block;font-size:15px}.duty-card small{display:block;font-size:13px;color:var(--muted)}
.duty-card strong{font-size:26px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:1px}
.duty-icon{width:14px;height:14px;border-radius:50%;background:#9fb8ad;flex-shrink:0}
.duty-card[data-state=on]{border:2px solid #7cc4a1;background:linear-gradient(135deg,#ecfff5e6,#ffffffb3);color:#075f3d}
.duty-card[data-state=on] .duty-icon{background:#16a066;box-shadow:0 0 0 5px #16a06626;animation:pulse 2s ease-in-out infinite}
.duty-card[data-state=review]{border:2px solid #e3c67e;background:#fff6dfe6;color:var(--amber)}.duty-card[data-state=review] .duty-icon{background:#d99a14}
@keyframes pulse{50%{box-shadow:0 0 0 9px #16a06610}}
/* The next sensible action stands out; the other punch button explains why it is off */
.action.is-next{box-shadow:0 14px 32px #204c3a1f,inset 0 1px white;transform:translateY(-2px)}
#clock-in.is-next{border-width:3px;border-color:#2c9e6c}
#clock-out.is-next{border-width:3px;border-color:#c4384f;box-shadow:0 14px 32px #a1273e24,inset 0 1px white}
.action:disabled{opacity:.6;filter:saturate(.45)}
/* Today's periods */
.periods-title{font-size:14px;margin:20px 0 8px;color:#3f5f54}
.today-periods{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;position:relative;z-index:1}
.today-periods li{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:8px 10px;border-radius:12px;background:#ffffff8c;border:1px solid #fff;font-variant-numeric:tabular-nums}
.today-periods li.open{border-color:#7cc4a1;color:#075f3d;font-weight:600}.today-periods li.empty{color:var(--muted);justify-content:center}
/* Leave form */
.leave-days{margin:12px 0 0;padding:10px 14px;border-radius:12px;background:#e8f0fb;color:var(--blue);font-size:14px;font-weight:600;border:1px solid #b8cdec}
.leave-days.invalid{background:#fdecee;color:var(--red);border-color:#eab3bb}
#leave-panel{border:2px solid #acc8e9}#requests-panel{border:2px solid #c9b9df}
/* Success: colour per operation, large time, visible auto-return */
.success-time{font-size:64px;line-height:1.1;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:2px;margin:4px 0 12px}
#success[data-kind=clockIn]{border:2px solid #7cc4a1}#success[data-kind=clockIn] .success-time{color:#075f3d}
#success[data-kind=clockOut]{border:3px solid #c4384f}#success[data-kind=clockOut] .success-icon{background:linear-gradient(145deg,#ffffffd4,#f9dfe3);color:var(--red)}#success[data-kind=clockOut] .success-time{color:var(--red)}
#success[data-kind=request]{border:2px solid #acc8e9}#success[data-kind=request] .success-icon{background:linear-gradient(145deg,#ffffffd4,#dbe7f8);color:var(--blue)}
.auto-return{height:5px;border-radius:5px;background:#d7e6df;overflow:hidden;margin-top:18px;direction:ltr}
.auto-return span{display:block;height:100%;background:var(--green);transform-origin:left;animation:auto-return 5s linear forwards}
#success[data-kind=clockOut] .auto-return span{background:var(--red)}#success[data-kind=request] .auto-return span{background:var(--blue)}
@keyframes auto-return{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.lite-toggle{display:flex;align-items:center;gap:10px;font-weight:400;font-size:13px;margin:6px 0 10px}.lite-toggle input{width:22px;height:22px;min-height:0}
/* Lite mode: opaque glass, no blur, no ambient animation cost */
.lite .surface,.lite .day-summary,.lite header,.lite #sync-panel{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.lite .surface,.lite .day-summary{background:linear-gradient(130deg,#fffffff7,#f6fbf8f2)}.lite header{background:#f7fbf9}.lite .ambient i{display:none}
@media(prefers-reduced-transparency:reduce){.surface,.day-summary,header,#sync-panel{backdrop-filter:none;-webkit-backdrop-filter:none}.surface,.day-summary{background:#fbfdfc}}
@media(min-width:900px) and (max-height:820px) and (orientation:landscape){.keypad button{min-height:52px}.pin-dots{height:56px}.success-time{font-size:54px}}
@media(max-width:650px){.welcome{flex-direction:column}.welcome-side{width:100%;justify-content:space-between}.duty-card{flex:1}.duty-card strong{font-size:22px}.success-time{font-size:48px}.keypad button{min-height:60px}}
@media(prefers-reduced-motion:reduce){.auto-return span{animation:none;transform:scaleX(0)}.pin-panel.shake{animation:none}}

/* ===== v0.7 — kiosk-fixed layout, liquid crystal glass, languages, screen saver ===== */
/* Fixed screen: the page itself never scrolls, bounces or zooms; only inner areas scroll when needed. */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{display:grid;grid-template-rows:auto 1fr auto;min-height:0;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
input,textarea,select{-webkit-user-select:text;user-select:text}
main{width:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
main::-webkit-scrollbar{display:none}
img{-webkit-user-drag:none;pointer-events:none}
/* Header: brand, languages */
.brand{margin-left:0;margin-inline-end:auto;gap:12px}
.brand-gem{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(145deg,#ffffffe6,#c9efdd99);border:1px solid #fff;box-shadow:inset 0 2px 3px #fff,inset 0 -6px 12px #0f7a5022,0 8px 20px #0f7a5026}
.brand-gem img{width:32px;height:32px}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-name{font-size:25px;font-weight:800;letter-spacing:-.3px;background:linear-gradient(120deg,#0b5c3c,#169a63 55%,#0b5c3c);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-name em{font-style:normal;font-weight:800;margin-inline-start:2px;padding:0 6px;border-radius:8px;background:linear-gradient(140deg,#1aa36a,#0b6a44);color:#fff;-webkit-text-fill-color:#fff;font-size:17px;vertical-align:3px}
.brand small{font-size:10px;letter-spacing:3.2px;color:#3f6b5a;margin-top:5px;font-weight:600}
.lang-switch{display:flex;gap:4px;padding:4px;border-radius:999px;background:#ffffff8c;border:1px solid #fff;box-shadow:inset 0 1px #fff,0 4px 12px #24473810}
.lang-switch button{min-height:38px;min-width:44px;padding:4px 10px;border-radius:999px;font-size:14px;font-weight:700;color:#3f5f54;background:transparent;border:0}
.lang-switch button[aria-pressed=true]{color:#fff;background:linear-gradient(140deg,#1aa36a,#0b6a44);box-shadow:inset 0 1px #ffffff66,0 4px 10px #0f7a5033}
/* Footer: brand left, rights bottom-right in every language */
footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;font-size:12px;padding:10px 4vw;background:#ffffff59;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.footer-brand{justify-self:start;letter-spacing:1px}.footer-area{justify-self:center;text-align:center}
.copyright{justify-self:end;font-weight:600;color:#2f5547}
/* Liquid crystal glass: luminous gradient edge + specular sheen */
.surface,.day-summary{border:1.5px solid transparent;background:linear-gradient(130deg,#ffffffe6,#ffffff8f) padding-box,linear-gradient(135deg,#ffffff,#ffffff40 35%,#bfeedd99 60%,#ffffff) border-box;box-shadow:inset 0 1px 0 #fff,inset 0 -18px 40px -30px #0f7a5040,0 18px 50px #12352a14,0 2px 6px #12352a0d}
.surface:after,.day-summary:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,#ffffff8c 0%,#ffffff00 28%,#ffffff00 62%,#ffffff40 78%,#ffffff00 100%);mix-blend-mode:soft-light}
.action{overflow:hidden}.action:after{background:linear-gradient(115deg,#ffffffa6 0%,#ffffff00 30%)!important;opacity:1!important;inset:0!important;width:auto!important;height:auto!important;border-radius:inherit!important;mix-blend-mode:soft-light}
.ambient .caustic{position:absolute;inset:-40%;background:conic-gradient(from 0deg at 50% 50%,#bfe6d400,#bfe6d466,#d5ddf500,#e2edcf55,#bfe6d400);animation:caustic 60s linear infinite;will-change:transform;opacity:.7}
@keyframes caustic{to{transform:rotate(360deg)}}
.lite .ambient .caustic,.lite .surface:after,.lite .day-summary:after{display:none}
/* Leave / requests open as glass sheets over the home screen instead of extending the page */
.sheet{position:fixed!important;z-index:30;inset:7vh max(16px,12vw);max-width:860px;margin:0 auto;overflow-y:auto;overscroll-behavior:contain;box-shadow:0 0 0 100vmax #0e2a2259,0 30px 90px #0c2a2040!important;animation:sheet-in .2s ease-out}
@keyframes sheet-in{from{opacity:0;transform:translateY(12px) scale(.985)}}
/* PIN: dots follow the typed length (2–8) */
.pin-dots{gap:14px;flex-wrap:nowrap}.pin-dots i{flex-shrink:0}
.pin-dots:not(.typing) i{opacity:.55}
.primary span{float:none}.enter-arrow{display:inline-block;margin-inline-start:8px}[dir=rtl] .enter-arrow{transform:scaleX(-1)}
/* ===== Screen saver: 3D liquid-crystal logo ===== */
.screensaver{position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow:hidden;cursor:pointer;color:#eafff6;background:radial-gradient(60vmax 50vmax at 20% 15%,#1f8f66aa,transparent 60%),radial-gradient(50vmax 50vmax at 85% 85%,#3b4fa588,transparent 60%),linear-gradient(160deg,#062a1f,#0a3b2c 45%,#0b2236);animation:saver-in .6s ease-out}
.screensaver[hidden]{display:none!important}
@keyframes saver-in{from{opacity:0}}
.saver-drift{display:flex;flex-direction:column;align-items:center;gap:6px;animation:saver-drift 140s ease-in-out infinite alternate}
@keyframes saver-drift{0%{transform:translate(-6vw,-4vh)}25%{transform:translate(5vw,-2vh)}50%{transform:translate(4vw,4vh)}75%{transform:translate(-5vw,3vh)}100%{transform:translate(0,-3vh)}}
.saver-scene{--t:11vmin;--l:33vmin;width:calc(var(--l) * 1.25);height:calc(var(--l) * 1.25);perspective:120vmin;position:relative;animation:saver-float 7s ease-in-out infinite}
@keyframes saver-float{50%{transform:translateY(-2.2vmin)}}
.crystal{position:absolute;inset:0;transform-style:preserve-3d;animation:crystal-spin 18s linear infinite;will-change:transform}
@keyframes crystal-spin{from{transform:rotateX(-16deg) rotateY(0)}to{transform:rotateX(-16deg) rotateY(360deg)}}
.bar{position:absolute;left:50%;top:50%;width:var(--w);height:var(--h);margin:calc(var(--h) / -2) 0 0 calc(var(--w) / -2);transform-style:preserve-3d}
.bar-v{--w:var(--t);--h:var(--l);--d:var(--t)}.bar-h{--w:var(--l);--h:var(--t);--d:var(--t)}
.bar i{position:absolute;display:block;border-radius:1.4vmin;border:1px solid #ffffffb3;background:linear-gradient(135deg,#ffffffc0 0%,#a8f0d066 30%,#16a06655 62%,#ffffff70 100%);box-shadow:inset 0 0 2.4vmin #ffffff80,inset 0 -2vmin 3vmin #0b6a4460,0 0 4vmin #3ce0a040;backface-visibility:visible}
.bar i:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,transparent 30%,#ffffffd9 46%,transparent 58%);opacity:.0;animation:crystal-glint 6s ease-in-out infinite}
@keyframes crystal-glint{40%,60%{opacity:.85}0%,30%,70%,100%{opacity:0}}
.bar .f{width:var(--w);height:var(--h);transform:translateZ(calc(var(--d) / 2))}
.bar .k{width:var(--w);height:var(--h);transform:rotateY(180deg) translateZ(calc(var(--d) / 2))}
.bar .l{width:var(--d);height:var(--h);left:calc((var(--w) - var(--d)) / 2);transform:rotateY(-90deg) translateZ(calc(var(--w) / 2))}
.bar .r{width:var(--d);height:var(--h);left:calc((var(--w) - var(--d)) / 2);transform:rotateY(90deg) translateZ(calc(var(--w) / 2))}
.bar .t{width:var(--w);height:var(--d);top:calc((var(--h) - var(--d)) / 2);transform:rotateX(90deg) translateZ(calc(var(--h) / 2))}
.bar .d{width:var(--w);height:var(--d);top:calc((var(--h) - var(--d)) / 2);transform:rotateX(-90deg) translateZ(calc(var(--h) / 2))}
.core{position:absolute;left:50%;top:50%;width:calc(var(--t) * .9);height:calc(var(--t) * .9);margin:calc(var(--t) * -.45) 0 0 calc(var(--t) * -.45);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#7ff0c4 35%,#16a06600 70%);filter:blur(.6vmin);animation:core-pulse 3.5s ease-in-out infinite}
@keyframes core-pulse{50%{transform:scale(1.25);opacity:.75}}
.crystal-floor{position:absolute;left:15%;right:15%;bottom:-4%;height:8%;border-radius:50%;background:radial-gradient(closest-side,#3ce0a055,transparent);filter:blur(1vmin)}
.saver-clock{font-size:15vmin;font-weight:200;letter-spacing:.6vmin;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 0 4vmin #3ce0a055;margin-top:2vmin}
.saver-date{font-size:3vmin;opacity:.85}
.saver-brand{margin-top:2.4vmin;font-size:3.6vmin;font-weight:800;display:flex;flex-direction:column;align-items:center;line-height:1.1}
.saver-brand em{font-style:normal;padding:0 1vmin;border-radius:1vmin;background:#ffffff26;border:1px solid #ffffff55;margin-inline-start:.6vmin}
.saver-brand small{font-size:1.5vmin;letter-spacing:.8vmin;font-weight:600;opacity:.8;margin-top:1vmin}
.saver-hint{margin-top:3vmin;font-size:2.4vmin;color:#eafff6;opacity:.8;animation:hint-pulse 2.6s ease-in-out infinite}
@keyframes hint-pulse{50%{opacity:.35}}
.lite .bar i{box-shadow:none}.lite .bar i:after,.lite .core{animation:none}
@media(max-width:650px){footer{grid-template-columns:1fr auto;font-size:10.5px}.footer-area{display:none}.brand-name{font-size:21px}.brand-gem{width:38px;height:38px}.lang-switch button{min-width:38px;padding:4px 7px}.sheet{inset:4vh 12px}}
@media(prefers-reduced-motion:reduce){.saver-drift,.crystal,.saver-scene{animation:none!important}}
/* v0.7.1: saver fits any landscape tablet; the logo swings toward the viewer instead of turning edge-on */
.saver-scene{--t:8.5vmin;--l:26vmin}
.saver-clock{font-size:12vmin}
@keyframes crystal-spin{0%{transform:rotateX(-14deg) rotateY(-38deg)}100%{transform:rotateX(10deg) rotateY(38deg)}}
.crystal{animation:crystal-spin 9s ease-in-out infinite alternate}
.saver-brand .delta{color:#7ff0c4}
@keyframes saver-drift{0%{transform:translate(-5vw,-2vh)}25%{transform:translate(4vw,-1vh)}50%{transform:translate(3vw,2vh)}75%{transform:translate(-4vw,1.5vh)}100%{transform:translate(0,-1vh)}}
/* Compact landscape tablet (Redmi Pad SE ≈ 1340×800 CSS px): everything fits without scrolling */
@media(orientation:landscape) and (max-height:860px){
 main{padding-block:12px}#sync-panel{margin-bottom:10px;padding-block:8px}
 .welcome{margin:6px 0 12px}.welcome h1{font-size:28px}
 .action{min-height:138px;padding:18px}.actions{gap:14px}.work-layout{gap:16px}
 .day-summary{padding:18px 20px}.day-summary h2{display:none}.stat-row{margin-top:10px;gap:8px}.stat-row strong{font-size:28px}.stat-row article{padding-bottom:8px}
 .day-summary>.quiet,.privacy-note{display:none}.periods-title{margin:12px 0 6px}
 .today-periods{max-height:120px;overflow-y:auto;overscroll-behavior:contain}
}
/* ===== v0.7.2 — fit any landscape tablet height (WebView, immersive or not) without overlap ===== */
header{padding-block:clamp(6px,1.4vh,16px)}
.brand-gem{width:clamp(36px,5.6vh,46px);height:clamp(36px,5.6vh,46px)}
main{display:flex;flex-direction:column;padding:clamp(8px,1.6vh,18px) clamp(16px,2.4vw,32px);gap:0}
main>section,main>aside,main>#message{flex:0 0 auto}
footer{padding-block:clamp(5px,1vh,10px)}
/* Sync bar only when something needs attention; the header chip already shows the connection. */
body[data-screen=login] #sync-panel[data-state=synced],body[data-screen=home] #sync-panel[data-state=synced]{display:none}
#sync-panel{padding-block:6px;margin-bottom:clamp(6px,1.2vh,12px)}
/* Login card fills the free height and scales its inner parts with it */
#login.login-layout{flex:1 1 auto;min-height:0;width:100%;max-width:1060px;max-height:700px;margin:0 auto;align-items:stretch}
.login-scene{padding:clamp(10px,2vh,30px);justify-content:center;min-height:0;overflow:hidden}
.login-scene>.eyebrow{margin:0}
.glass-symbol{width:clamp(48px,9vh,92px);height:clamp(48px,9vh,92px);margin:clamp(6px,1.6vh,18px) 0 0}
.glass-symbol span{font-size:clamp(28px,5.4vh,55px)}
.clock{font-size:clamp(32px,7.2vh,56px);margin-top:clamp(2px,1vh,9px)}
.today-label{margin-bottom:clamp(4px,1.6vh,20px)}
.login-scene h1{font-size:clamp(19px,3.4vh,27px);margin-bottom:clamp(2px,1vh,10px)}
.login-scene>p{font-size:clamp(12px,1.8vh,13px);margin-bottom:clamp(2px,1vh,10px)}
.local-promise{margin-top:clamp(6px,1.8vh,20px);padding-block:4px}
.pin-panel{padding:clamp(10px,2.4vh,28px) clamp(18px,3vw,44px);display:flex;flex-direction:column;justify-content:center;min-height:0;align-self:stretch}
.pin-panel .eyebrow{margin:0}
.pin-panel h2{font-size:clamp(18px,3.2vh,24px);margin:clamp(0px,.6vh,5px) 0}
.pin-panel>p{margin-bottom:clamp(4px,1.2vh,12px)}
.pin-dots{height:clamp(38px,6.6vh,62px)}
.keypad{gap:clamp(5px,1.1vh,10px);margin-top:clamp(6px,1.3vh,13px)}
.keypad button,#pin-clear,#pin-delete{min-height:0;height:clamp(38px,7.2vh,60px);padding:0;font-size:clamp(19px,3.5vh,27px)}
#pin-clear{font-size:clamp(13px,2vh,15px)}
#login-form .primary{min-height:0;height:clamp(40px,6.4vh,52px);margin-top:clamp(8px,1.6vh,18px);padding-block:0}
.pin-panel .quiet{margin-top:clamp(4px,1.1vh,14px)}
/* Home: actions and summary share the free height */
#home{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.welcome{margin:clamp(4px,1vh,12px) 0 clamp(8px,1.6vh,18px)}.welcome h1{font-size:clamp(22px,3.8vh,31px)}
.work-layout{flex:1 1 auto;min-height:0}
.action{min-height:clamp(100px,17vh,164px);padding:clamp(12px,2.2vh,22px)}
.action b{font-size:clamp(18px,3.1vh,23px)}.action-icon{width:clamp(32px,5vh,41px);height:clamp(32px,5vh,41px)}
.day-summary{padding:clamp(12px,2.2vh,25px) clamp(14px,1.8vw,25px);overflow:hidden}
.stat-row strong{font-size:clamp(22px,4vh,34px)}
/* Short screens: drop secondary lines rather than overlap */
@media(orientation:landscape) and (max-height:760px){.login-scene>p,.pin-panel .quiet,.day-summary h2,.day-summary>.quiet,.privacy-note{display:none}}
@media(orientation:landscape) and (max-height:640px){.local-promise,.station-label,.login-scene>.eyebrow,.pin-panel .eyebrow{display:none}}
/* Station tools: a small gear in the corner instead of a line under the card */
.station-tools{position:fixed;inset-inline-start:14px;bottom:calc(clamp(5px,1vh,10px) * 2 + 30px);z-index:40;margin:0;max-width:none}
.station-tools summary{list-style:none;width:40px;height:40px;padding:0;display:grid;place-items:center;border-radius:50%;font-size:18px;color:#3f5f54;background:#ffffffc7;border:1px solid #fff;box-shadow:0 4px 14px #24473818;opacity:.7}
.station-tools summary::-webkit-details-marker{display:none}
.station-tools[open] summary{opacity:1}
.station-tools .tools-content,.station-tools .tools-title{position:absolute;inset-inline-start:0;width:min(420px,80vw)}
.station-tools .tools-title{bottom:calc(100% + 8px + var(--tools-h,0px));display:none}
.station-tools .tools-content{bottom:48px;max-height:60vh;overflow:auto;box-shadow:0 18px 50px #12352a2e;background:#fffffff2}
.station-tools[open] .tools-content:before{content:attr(data-title);display:block}
body[data-screen=home] .station-tools,body[data-screen=confirmation] .station-tools,body[data-screen=success] .station-tools{display:none}
#home{justify-content:center}.work-layout{align-items:stretch;max-height:520px}
.work-main{display:flex;min-height:0}.actions{flex:1;grid-auto-rows:minmax(clamp(100px,17vh,164px),1fr)}
main{margin:0 auto;align-self:stretch;min-height:0;height:100%;box-sizing:border-box}
.action{justify-content:center}
/* Gear lives inside the footer bar (physical left), never over the card */
.station-tools{left:max(10px,calc(4vw - 6px));right:auto;inset-inline-start:auto;bottom:clamp(3px,.7vh,6px)}
.station-tools summary{width:30px;height:30px;font-size:15px;box-shadow:none}
.station-tools .tools-content{left:0;right:auto;inset-inline-start:auto;bottom:40px}
.footer-brand{padding-left:38px}