body{min-height:100vh;padding-bottom:env(safe-area-inset-bottom)}
.op{opacity:.8}
.center{text-align:center}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:10px}

/* login */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(160deg,#1f5eff 0%,#163fb0 55%,#0f2a7a 100%)}
.login-box{width:100%;max-width:380px;text-align:center;color:#fff}
.login-box .muted{color:#dbe4ff}
.login-box .card{text-align:left;color:var(--ink);margin-top:18px}
.logo{font-size:44px;width:76px;height:76px;margin:0 auto 10px;border-radius:22px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center}

/* header */
.top{background:linear-gradient(135deg,#1f5eff,#163fb0);color:#fff;padding:calc(18px + env(safe-area-inset-top)) 18px 46px;display:flex;justify-content:space-between;align-items:flex-start}
.hello{font-size:18px;margin-top:2px}
.clock{text-align:right}
#clockTime{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.5px}
main{padding:0 14px 96px;margin-top:-32px;max-width:560px;margin-left:auto;margin-right:auto}
main .card+.card,main .card+button{margin-top:14px}

.warn-card{background:var(--warn-soft);border:1px solid #f3d79a;margin-bottom:14px}
.today .slot{text-align:center;padding:6px 0}
.today .big{font-size:30px;font-weight:700;font-variant-numeric:tabular-nums}
#shiftInfo{margin-top:6px;border-top:1px dashed var(--line);padding-top:8px}

.gps{display:flex;align-items:center;gap:12px}
.gps-ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;background:#eef0f4;flex:none}
.gps.in .gps-ico{background:var(--ok-soft)} .gps.out .gps-ico{background:var(--bad-soft)}
.gps-title{font-weight:600}
.gps.in .gps-title{color:var(--ok)} .gps.out .gps-title{color:var(--bad)}

.big-btn{width:100%;padding:20px;font-size:19px;border-radius:16px;margin-top:16px;box-shadow:0 8px 22px rgba(31,94,255,.35)}
.big-btn.out-mode{background:#ff7a1a;box-shadow:0 8px 22px rgba(255,122,26,.35)}
.big-btn:disabled{box-shadow:none}
#checkHint{margin-top:8px}

/* bottom nav */
.bottom{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);display:flex;padding-bottom:env(safe-area-inset-bottom);z-index:50}
.bottom button{flex:1;background:none;border:0;padding:9px 0 8px;font:600 12px inherit;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer}
.bottom button span{font-size:20px}
.bottom button.active{color:var(--brand)}

/* history */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:14px 0}
.stat{background:#f6f8fc;border-radius:10px;padding:10px;text-align:center}
.stat b{display:block;font-size:20px}
.day{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.day .d{width:46px;text-align:center;flex:none}
.day .d b{display:block;font-size:19px;line-height:1}
.day .t{flex:1;font-variant-numeric:tabular-nums}
.kv{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line)}
.kv span{color:var(--muted)}

/* camera */
.cam{position:fixed;inset:0;background:#000;color:#fff;z-index:200;display:flex;flex-direction:column}
.cam-top{display:flex;justify-content:space-between;align-items:center;padding:calc(10px + env(safe-area-inset-top)) 12px 10px;font-weight:600}
.btn.light{color:#fff;border-color:rgba(255,255,255,.3)}
.cam-stage{position:relative;flex:1;overflow:hidden}
#video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.oval{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.oval ellipse{fill:none;stroke:rgba(255,255,255,.85);stroke-width:.7;stroke-dasharray:2 1.4;vector-effect:non-scaling-stroke;stroke-width:3px;transition:stroke .2s}
.oval.good ellipse{stroke:#2ee68f;stroke-dasharray:none}
.oval.bad ellipse{stroke:#ff5d6c}
.cam-progress{position:absolute;left:16px;right:16px;bottom:14px;height:6px;background:rgba(255,255,255,.2);border-radius:9px;overflow:hidden}
#camBar{height:100%;width:0;background:#2ee68f;transition:width .25s}
.cam-msg{padding:16px 18px calc(22px + env(safe-area-inset-bottom));text-align:center;min-height:110px}
.cam-step{font-size:19px;font-weight:700;margin-bottom:4px}

/* result */
.result{position:fixed;inset:0;background:rgba(15,23,42,.6);z-index:300;display:flex;align-items:center;justify-content:center;padding:20px}
.result-card{width:100%;max-width:380px;text-align:center}
.result-ico{font-size:56px}
.res-detail{text-align:left;background:#f6f8fc;border-radius:10px;padding:6px 12px;margin:10px 0 16px}
.res-detail .kv:last-child{border:0}
.res-detail:empty{display:none}
.day{flex-wrap:wrap;row-gap:4px}
.day .t{white-space:nowrap}
.day>div:last-child{flex-basis:100%;padding-left:58px}

.bal{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#f3efff,#fff)}
.bal-num b{font-size:30px;color:#5b3fd6}
.badge.leave{background:#efeaff;color:#5b3fd6}
.lv{padding:11px 0;border-top:1px solid var(--line)}
.lv:first-child{border-top:0}
.lv-top{display:flex;justify-content:space-between;gap:8px;align-items:center}

.logo-card{background:#fff;border-radius:22px;padding:14px 22px;margin:0 auto 14px;width:fit-content;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.logo-card img{display:block;width:min(220px,60vw);height:auto}
.brand{display:flex;align-items:center;gap:8px}
.brand .mark{background:#fff;border-radius:10px;padding:3px 5px;display:flex}
.brand .mark img{height:24px;width:auto;display:block}