:root{--blue: #1e40af;--blue-dark: #1e3a8a;--bg: #f8fafc;--card: #ffffff;--text: #0f172a;--muted: #64748b;--ok: #15803d;--ok-bg: #f0fdf4;--warn: #a16207;--warn-bg: #fefce8;--err: #b91c1c;--err-bg: #fef2f2;--info-bg: #eff6ff;--border: #e2e8f0;color-scheme:light;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:var(--bg)}*{box-sizing:border-box}body{margin:0;min-height:100dvh}button{font:inherit;cursor:pointer;border:0;border-radius:12px;padding:12px 16px}button:disabled{opacity:.6;cursor:default}input,select{font:inherit;width:100%;padding:12px;margin-top:6px;border:1px solid var(--border);border-radius:10px;background:#fff}label{display:block;font-size:14px;color:var(--muted);margin-bottom:14px}.primary{background:var(--blue);color:#fff;font-weight:600;width:100%}.secondary{background:var(--info-bg);color:var(--blue);font-weight:600}.link{background:none;color:var(--blue);padding:8px}.muted{color:var(--muted)}.small{font-size:13px}.center,.center-text{text-align:center}.center{padding:40px 16px}.banner{padding:10px 14px;border-radius:10px;margin:8px 16px;font-size:14px}.banner.info{background:var(--info-bg);color:var(--blue-dark)}.banner.warn{background:var(--warn-bg);color:var(--warn)}.banner.error{background:var(--err-bg);color:var(--err)}.banner.floating{position:fixed;left:0;right:0;top:8px;z-index:20}.login{max-width:400px;margin:0 auto;padding:48px 16px}.login .logo{width:72px;height:72px;border-radius:16px;display:block;margin:0 auto 12px}.login h1{text-align:center;margin:0 0 24px;font-size:22px}.login .banner{margin:0 0 14px}.app{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}.top{display:flex;justify-content:space-between;align-items:center;padding:calc(12px + env(safe-area-inset-top)) 16px 12px;background:var(--blue);color:#fff}.top .muted{color:#c7d2fe}.top .link{color:#fff}.hello{font-weight:600}main{flex:1;padding-bottom:80px}.tabs{position:fixed;bottom:0;left:0;right:0;display:flex;max-width:480px;margin:0 auto;background:var(--card);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom)}.tabs button{flex:1;background:none;border-radius:0;padding:16px;color:var(--muted)}.tabs button.active{color:var(--blue);font-weight:600;box-shadow:inset 0 3px 0 var(--blue)}.punch{padding:16px}.clock{text-align:center;padding:24px 0 16px}.clock .time{font-size:56px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:1px}.establishment{margin:0 0 16px}.punch-button{display:block;width:100%;margin:20px 0;padding:28px;font-size:22px;font-weight:700;color:#fff;background:var(--blue);border-radius:20px;box-shadow:0 6px 16px #1e40af40}.card{border-radius:14px;padding:14px 16px;display:grid;gap:6px}.card.ok{background:var(--ok-bg);color:var(--ok)}.card.warn{background:var(--warn-bg);color:var(--warn)}.card .secondary{justify-self:start;margin-top:4px}.hash{font-family:ui-monospace,monospace;font-size:11px;word-break:break-all;color:var(--muted)}.camera{position:fixed;inset:0;z-index:10;background:#000;display:flex;flex-direction:column}.camera video{flex:1;width:100%;object-fit:cover;transform:scaleX(-1)}.camera-off{flex:1;display:grid;place-items:center;text-align:center;color:#fff;padding:24px;line-height:1.6}.camera-actions{display:flex;gap:12px;padding:16px 16px calc(16px + env(safe-area-inset-bottom))}.camera-actions button{flex:1}.history{padding:8px 16px}.history h2{font-size:16px;margin:12px 0}.row{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:8px}.row.pending{border-color:#fde68a;background:var(--warn-bg)}.when{font-weight:600}.badge{font-size:12px;color:var(--warn);white-space:nowrap}.card.info{background:var(--info-bg);color:var(--blue-dark);margin-bottom:12px}.card.info .secondary{background:#fff}.enroll{padding:16px}.enroll h2{font-size:18px;margin:8px 0 12px}.enroll .card{margin-bottom:16px}.consent{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:4px 14px;font-size:14px;line-height:1.5}.check{display:flex;gap:10px;align-items:flex-start;color:var(--text);margin:16px 0}.check input{width:22px;height:22px;margin:0;flex:none}.link.block{display:block;width:100%;margin-top:8px}.face-guide{position:absolute;left:50%;top:40%;width:62vw;max-width:300px;aspect-ratio:3 / 4;transform:translate(-50%,-50%);border:3px dashed rgb(255 255 255 / .8);border-radius:50%;pointer-events:none}.camera-hint{color:#fff;text-align:center;font-size:14px;padding:8px 16px 0}.month-head{display:flex;gap:8px;margin:8px 0}.month-head input{margin:0;flex:1}.totals{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;margin:8px 0 12px}.totals div{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:8px 10px;font-weight:700;font-variant-numeric:tabular-nums}.totals span{display:block;font-weight:400;font-size:12px;color:var(--muted)}.row.day{justify-content:flex-start;padding:8px 12px}.row.day.rest{background:transparent}.day-date{display:flex;flex-direction:column;width:44px;flex:none}.day-body{flex:1;min-width:0}.mono{font-family:ui-monospace,monospace;font-size:13px}.warn-text,.badge.pending{color:var(--warn)}.badge.approved{color:var(--ok)}.badge.rejected,.badge.revoked{color:var(--err)}.sheet{position:fixed;inset:0;background:#0f172a73;display:flex;align-items:flex-end;z-index:15}.sheet form{background:var(--bg);width:100%;max-width:480px;margin:0 auto;border-radius:18px 18px 0 0;padding:16px 16px 0}.sheet h2{font-size:17px;margin:4px 0}.sheet .camera-actions{padding-left:0;padding-right:0}
