:root{--shell-bg: #f1f5f9;--ink: #0f172a;--muted: #64748b;--card: #ffffff;--line: #e2e8f0;--accent: #c2ac72;--accent-shade: #ab9764;--accent-ink: #1a1a1a;--secondary: #334155;--field-bg: #f8fafc;--danger: #b42318;--in: #c2ac72;--out: #334155;--payable: #a6893f;--tabbar-track: #e2e8f0;--tabbar-active: #ffffff;--press: rgba(15, 23, 42, .1);--radius: 16px;--shadow: 0 10px 30px rgba(15, 23, 42, .08);--font: system-ui, -apple-system, "Roboto", "Noto Sans", sans-serif;--sat: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));--sar: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));--sab: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));--sal: var(--safe-area-inset-left, env(safe-area-inset-left, 0px))}html[data-platform=android]{--font: "Roboto", "Noto Sans", sans-serif}html.theme-dark{--shell-bg: #0b1220;--ink: #e2e8f0;--muted: #94a3b8;--card: #152033;--line: #243247;--accent: #d4bc7a;--accent-shade: #bba56b;--accent-ink: #1a1a1a;--secondary: #94a3b8;--field-bg: #0f172a;--danger: #f87171;--in: #d4bc7a;--out: #94a3b8;--payable: #d4bc7a;--tabbar-track: #152033;--tabbar-active: #1d2b44;--press: rgba(248, 250, 252, .12);--shadow: 0 12px 32px rgba(0, 0, 0, .35)}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;min-height:100%;min-height:100dvh;overflow:hidden;font-family:var(--font);font-synthesis:none;font-feature-settings:"liga" 0,"calt" 0;text-rendering:auto;background:var(--shell-bg);color:var(--ink)}button,input,select{font:inherit}button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:active:not(:disabled){filter:brightness(.92)}.btn-primary:active:not(:disabled),.btn-ghost:active:not(:disabled),.btn-scan:active:not(:disabled),.punch:active:not(:disabled),.icon-btn:active:not(:disabled),.tabbar button:active:not(:disabled),.menu-btn:active,.toolbar-icon:active,.side-menu__nav button:active{background-color:color-mix(in srgb,var(--press) 70%,transparent)}h1,h2,p{margin:0}.app-logo{display:flex;align-items:center;gap:12px}.app-logo--compact{gap:10px}.app-logo__mark{border-radius:50%;object-fit:contain;flex-shrink:0;background:transparent}html.theme-dark .app-logo__mark{background:#f8fafc0f}.app-logo__text{display:flex;flex-direction:column;gap:4px;min-width:0}.app-logo__title{font-size:1.55rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}.app-logo--compact .app-logo__title{font-size:1.05rem;font-weight:600}.app-logo__subtitle{color:var(--muted);line-height:1.45;font-size:.98rem}.muted{color:var(--muted)}.caps{text-transform:capitalize}.hint{color:var(--muted);font-size:.86rem;line-height:1.45}.err{color:var(--danger);margin:0 0 8px}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}.btn-primary,.btn-ghost,.btn-scan,.punch,.tabbar button,.icon-btn,.text-btn{border:0;border-radius:12px;cursor:pointer}.btn-primary,.btn-ghost,.btn-scan{width:100%;min-height:48px;font-weight:600}.btn-primary{background:var(--accent);color:var(--accent-ink)}.btn-primary:disabled,.punch:disabled{opacity:.55;cursor:default}.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}.btn-scan{display:flex;align-items:center;justify-content:center;gap:10px;background:transparent;color:var(--ink);border:1.5px solid var(--accent)}.btn-scan:disabled{opacity:.55;cursor:default}.btn-scan__icon{display:flex;color:var(--accent-shade)}.btn-scan__ok{color:var(--accent-shade);font-weight:700}.text-btn{background:transparent;color:var(--muted);padding:8px 0}.boot,.fallback,.login{height:100%;min-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:max(32px,calc(16px + var(--sat))) max(20px,var(--sar)) max(32px,calc(16px + var(--sab))) max(20px,var(--sal))}.boot,.fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px}.boot .app-logo,.fallback .app-logo{justify-content:center}.fallback h1{font-size:1.7rem}.fallback .btn-primary{max-width:240px;margin-top:8px}.boot-stack,.spinner{display:flex;flex-direction:column;align-items:center;gap:20px}.spinner{position:relative;width:58px;height:58px}.spinner-ring{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:4px solid rgba(194,172,114,.22);border-top-color:var(--accent);animation:spin .9s linear infinite}.spinner-ring-inner{top:10px;right:10px;bottom:10px;left:10px;animation-duration:1.35s;animation-direction:reverse}@keyframes spin{to{transform:rotate(360deg)}}.login{display:flex;flex-direction:column;justify-content:flex-start;gap:24px;max-width:560px;margin:0 auto;padding-top:max(36px,calc(20px + var(--sat)));padding-bottom:max(32px,calc(16px + var(--sab)),calc(16px + var(--keyboard-height, 0px)))}@media(min-width:720px)and (min-height:800px){html:not([data-platform=android]):not([data-platform=ios]) .login{justify-content:center}}.login-card{display:flex;flex-direction:column;gap:16px}.login-card label,.modal label{display:flex;flex-direction:column;gap:8px;font-size:.9rem;color:var(--muted)}input,select{min-height:56px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--field-bg);color:var(--ink);scroll-margin-bottom:24px}input:focus,select:focus{outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:0;border-color:var(--accent)}.app-field{display:flex;flex-direction:column;gap:8px;margin-top:12px;font-size:.9rem;color:var(--muted)}.app-version-label{display:inline-block;font-size:.75rem;font-weight:500;letter-spacing:.02em;line-height:1;color:var(--muted);-webkit-user-select:none;user-select:none;pointer-events:none}.app-version-label--toolbar{padding-inline:4px 12px;align-self:center}.app-root{height:100%;min-height:100%;min-height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:var(--shell-bg)}.toolbar{display:flex;align-items:center;width:100%;min-height:52px;padding:var(--sat) max(6px,var(--sar)) 0 max(6px,var(--sal));background:var(--shell-bg);border:0;box-shadow:none;flex-shrink:0}.toolbar-spacer{flex:1}.menu-btn,.toolbar-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--ink);flex-shrink:0;border:0;border-radius:12px;padding:0}.menu-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;border:0;border-radius:0;padding:0;background:#0f172a52}.side-menu{position:fixed;top:0;right:auto;bottom:0;left:0;z-index:31;width:min(320px,86vw);height:auto;display:flex;flex-direction:column;padding:var(--sat) 0 var(--sab) var(--sal);background:var(--shell-bg);border:0;outline:0;box-shadow:none;border-radius:0;transform:translate(-100%);transition:transform .2s ease-out}.side-menu.is-open{transform:translate(0)}.side-menu__brand{min-height:52px;display:flex;align-items:center;padding:8px 16px}.side-menu__nav{display:flex;flex-direction:column}.side-menu__nav button{min-height:52px;padding:0 16px;text-align:left;background:transparent;color:var(--ink);font-weight:600;border:0;border-radius:0}.side-menu__nav button:hover,.side-menu__nav button:focus{background:var(--press)}.side-menu__nav button.is-active{background:var(--card);font-weight:700}.app-body{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.app-page,.widget-page{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;width:100%;max-width:560px;margin:0 auto}.content,.settings{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:8px max(16px,var(--sar)) 24px max(16px,var(--sal))}.settings{padding-bottom:max(24px,calc(16px + var(--sab)))}.settings .card .btn-primary,.settings .card .btn-ghost{margin-top:12px}.face-row{display:flex;align-items:center;gap:12px;margin-top:10px}.face-preview{width:88px;height:88px;border-radius:16px;object-fit:cover;background:#111;flex-shrink:0}.face-stage{position:relative;width:100%;height:280px;border-radius:12px;overflow:hidden;background:#111}.face-video{display:block;width:100%;height:100%;object-fit:cover;background:#111;transform:scaleX(-1);opacity:0}.face-video.is-on{opacity:1}.face-still{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.face-stage__boot{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;color:#e2e8f0;background:#111;text-align:center}.face-stage__boot.is-overlay{background:#0f172a94}.face-stage__boot p{margin:0;font-size:.95rem}.face-video::-webkit-media-controls,.face-video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}.app-section-title{margin:0 0 8px;font-size:.8rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}.settings-name{font-size:1.15rem;font-weight:700}.btn-danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,var(--line))}.stack{display:flex;flex-direction:column;gap:14px}.clock-card{padding:8px 2px 4px}.clock{font-size:3rem;font-weight:700;letter-spacing:-.04em;line-height:1.1}.name{margin-top:6px;font-weight:600}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.metrics.compact{grid-template-columns:repeat(4,1fr)}.metrics span,.metrics strong{display:block}.metrics strong{margin-top:4px;font-size:1.05rem}.status-chip{align-self:flex-start;padding:6px 10px;border-radius:999px;font-size:.86rem;font-weight:600;background:var(--tabbar-track);color:var(--secondary)}.status-on_time{background:#d9f7be;color:#237804}.status-grace{background:#fff1b8;color:#ad8b00}.status-late{background:#ffd8bf;color:#ad4e00}.status-absent{background:#ffccc7;color:#a8071a}.status-off{background:#e2e8f0;color:#64748b}.status-leave{background:#bae0ff;color:#0958d9}.status-no_checkout{background:#efdbff;color:#531dab}.punch{min-height:64px;font-size:1.2rem;font-weight:700}.punch-in{background:var(--in);color:var(--accent-ink)}.punch-out{background:var(--out);color:#fff}.punch-actions{display:flex;flex-direction:column;gap:10px}.tabbar{position:relative;flex-shrink:0;margin-top:auto;padding:10px max(12px,var(--sar)) calc(10px + var(--sab)) max(12px,var(--sal));background:var(--shell-bg)}.tabbar-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:3px;border-radius:12px;background:var(--tabbar-track)}.tabbar button{min-height:38px;background:transparent;color:var(--muted);font-weight:600;font-size:.9rem;border-radius:10px}.tabbar button.active{background:var(--tabbar-active);color:var(--ink);box-shadow:0 1px 2px #0f172a1a}.month-nav{display:flex;align-items:center;justify-content:space-between}.month-title{font-size:1.15rem;text-transform:capitalize}.icon-btn{width:40px;height:40px;background:var(--card);border:1px solid var(--line);font-size:1.4rem}.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.cal-head{text-align:center;font-size:.75rem;color:var(--muted);font-weight:600}.cal-cell,.cal-empty{min-height:62px;border-radius:10px}.cal-cell{display:flex;flex-direction:column;gap:2px;padding:6px;border:1px solid transparent}.cal-num{font-size:.75rem;font-weight:700}.cal-code,.cal-time{font-size:.7rem}.feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.feed-item{display:flex;gap:12px;align-items:flex-start}.dot{width:10px;height:10px;margin-top:7px;border-radius:50%;background:var(--accent);flex:0 0 auto}.dot.out{background:var(--out)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a75;display:flex;align-items:flex-end;justify-content:center;padding:max(16px,var(--sat)) max(16px,var(--sar)) max(16px,var(--sab)) max(16px,var(--sal));z-index:40}@media(min-width:721px){.modal-backdrop{align-items:center}}.modal{width:min(480px,100%);display:flex;flex-direction:column;gap:12px}.ota-backdrop{align-items:center}.row{display:flex;gap:8px}.login,.fallback,.boot{width:100%;max-width:560px;margin-inline:auto}.kiosk{height:100%;min-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:max(16px,var(--sat)) max(20px,var(--sar)) max(24px,var(--sab)) max(20px,var(--sal));display:flex;flex-direction:column;gap:16px}.kiosk-top{display:flex;align-items:center;justify-content:space-between;gap:16px}.kiosk-top-end,.kiosk-settings-head{display:flex;align-items:center;gap:8px}.kiosk-settings-head h2{margin:0;font-size:20px}.kiosk-settings{padding:0}.kiosk-clock{font-size:clamp(28px,6vw,56px);font-variant-numeric:tabular-nums;font-weight:600}.kiosk-grid{display:grid;grid-template-columns:minmax(260px,1fr) minmax(240px,.9fr);gap:16px;align-items:start}.kiosk-panel h2{margin:0 0 12px;font-size:18px}.kiosk-qr-panel{text-align:center}.kiosk-qr-canvas{display:block;margin:0 auto 12px;max-width:100%;background:#fff;border-radius:12px}.kiosk-side{display:flex;flex-direction:column;gap:12px}.kiosk-feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.kiosk-feed li{display:grid;grid-template-columns:1fr auto auto;gap:8px}.kiosk-face-btn{width:100%}.kiosk-flash{margin:0;padding:10px 14px;border-radius:12px;background:color-mix(in srgb,var(--accent) 22%,transparent);font-weight:600}.kiosk-err{margin:0}@media(max-width:800px){.kiosk-grid{grid-template-columns:1fr}.kiosk-top{flex-direction:column;align-items:flex-start}.kiosk-top-end{width:100%;justify-content:space-between}}