.btn{font:600 14px/1 var(--font-ui);border:none;border-radius:var(--r-md);padding:14px 22px;color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:transform .06s ease,filter .15s ease}.btn:active{transform:translateY(1px)}.btn:disabled{cursor:not-allowed}.btn--block{width:100%}.btn--primary{background:var(--amber);box-shadow:var(--shadow-amber)}.btn--primary:hover{filter:brightness(1.03)}.btn--ink{background:var(--ink)}.btn--ghost{background:var(--surface);color:var(--ink);border:1.5px solid #d9d5cc}.btn--pending{background:#f0eee8;color:#a9adb4;box-shadow:none;cursor:default}.chip{display:inline-flex;align-items:center;gap:6px;font:500 12px/1 var(--font-ui);border-radius:var(--r-pill);padding:7px 12px}.chip__dot{width:7px;height:7px;border-radius:50%;background:currentColor}.chip--green{color:var(--green);background:var(--green-tint)}.chip--red{color:var(--red);background:var(--red-tint)}.chip--warn{color:var(--warn);background:var(--warn-tint)}.chip--neutral{color:#4b4f57;background:var(--neutral-tint)}.card{background:var(--surface);border:1px solid #e8e5dd;border-radius:var(--r-xl)}.stat{background:var(--surface);border:1px solid #e8e5dd;border-radius:var(--r-md);padding:14px}.stat__value{font:700 24px/1 var(--font-display)}.stat__value--warn{color:var(--warn)}.stat__label{font:400 11px/1 var(--font-ui);color:var(--muted);margin-top:4px}.meta{background:var(--ink);border-radius:var(--r-md);padding:14px 16px}.meta__head{display:flex;align-items:center;gap:8px;margin-bottom:11px}.meta__rec{width:8px;height:8px;border-radius:50%;background:var(--amber);animation:recpulse 1.6s infinite}.meta__title{font:500 10px/1 var(--font-mono);letter-spacing:.12em;color:var(--dark-muted)}.meta__grid{display:grid;gap:5px 12px;font:400 11px/1.5 var(--font-mono)}.meta__row{display:contents}.meta__k{color:var(--muted)}.meta__v{color:#cfd2d6}.spinner{display:inline-block;border:2.5px solid rgba(228,97,28,.25);border-top-color:var(--amber);border-radius:50%;animation:ringspin .8s linear infinite}.full-loading{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--muted);font:400 13px/1 var(--font-ui)}.viewport{max-width:440px;margin:0 auto;min-height:100dvh;background:var(--surface-2);display:flex;flex-direction:column;position:relative;box-shadow:0 0 0 1px var(--line)}.viewport__body{flex:1;overflow-y:auto;padding-bottom:84px}.tabbar{position:sticky;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid #e8e5dd;display:flex;justify-content:space-around;padding:10px 0 calc(14px + env(safe-area-inset-bottom));max-width:440px;margin:0 auto;width:100%}.tab{display:flex;flex-direction:column;align-items:center;gap:4px;color:#a9adb4;font:500 10px/1 var(--font-ui);padding:4px 12px}.tab--on{color:var(--amber)}.screen{padding:0 20px 20px}.screen__statusbar{display:flex;justify-content:space-between;align-items:center;padding:14px 4px 6px;font:600 12px/1 var(--font-display)}.screen__statusbar .mono{font-size:10px;color:var(--muted)}.screen__header{display:flex;align-items:center;gap:10px;padding:8px 0 14px}.screen__title{font:600 17px/1.2 var(--font-ui)}.iconbtn{background:none;border:none;color:var(--ink);display:inline-flex;padding:4px}.home__appbar{display:flex;justify-content:space-between;align-items:center;padding:8px 0 14px}.home__brand{display:flex;align-items:center;gap:9px}.home__logo{width:28px;height:28px;background:var(--amber);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font:700 15px/1 var(--font-display)}.home__site{font:600 13px/1.2 var(--font-ui)}.home__company{font:400 10px/1 var(--font-ui);color:var(--muted);margin-top:2px}.home__avatar{width:34px;height:34px;border-radius:50%;background:var(--line);border:none;background-image:none}.hero{background:var(--surface);border:1px solid #e8e5dd;border-radius:var(--r-xl);padding:22px 22px 24px;text-align:center}.hero__label{font:400 12px/1 var(--font-ui);color:var(--muted)}.hero__state{font:600 20px/1.2 var(--font-ui);margin-top:6px}.hero__clock{font:700 46px/1 var(--font-display);letter-spacing:-.02em;margin-top:10px}.hero__clock small{font-size:20px;color:var(--muted)}.hero__date{font:400 11px/1 var(--font-mono);color:#9a9ea5;margin-top:6px}.hero__chip{margin-top:14px}.punchbtn{width:100%;border:none;border-radius:var(--r-lg);background:var(--amber);color:#fff;padding:20px;margin-top:18px;display:flex;align-items:center;justify-content:center;gap:12px;box-shadow:0 14px 26px -10px #e4611cb3}.punchbtn--out{background:var(--ink);box-shadow:none}.punchbtn__main{display:block;font:700 18px/1 var(--font-ui);text-align:left}.punchbtn__hint{display:block;font:400 11px/1 var(--font-ui);opacity:.85;margin-top:4px;text-align:left}.tilerow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:12px}.tile{background:var(--surface);border:1px solid #e8e5dd;border-radius:var(--r-md);padding:14px 8px;text-align:center;color:var(--ink)}.tile:disabled,.tile--off{opacity:.5}.tile__name{font:600 13px/1 var(--font-ui)}.tile__sub{font:400 9px/1.2 var(--font-mono);color:var(--green);margin-top:4px}.tile__sub--muted{color:#9a9ea5}.log{margin-top:16px;padding-top:14px;border-top:1px solid #e8e5dd}.log__head{font:600 11px/1 var(--font-ui);color:var(--muted);margin-bottom:10px}.log__row{display:flex;align-items:center;gap:10px;font:400 12px/1 var(--font-ui);color:#4b4f57}.log__row .mono{margin-left:auto;color:#9a9ea5}.log__dot{width:6px;height:6px;border-radius:50%}.hist__summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}.daylist{display:flex;flex-direction:column;gap:8px}.dayrow{background:var(--surface);border:1px solid #e8e5dd;border-radius:var(--r-md);padding:13px 15px;display:flex;align-items:center;gap:12px}.dayrow--late{border-color:#f0d9c0}.dayrow--leave{border-color:#e0dcd3;background:var(--fill)}.dayrow__date{text-align:center;width:34px}.dayrow__day{font:700 16px/1 var(--font-display)}.dayrow__wd{font:400 9px/1 var(--font-ui);color:#9a9ea5}.dayrow__mid{flex:1}.dayrow__time{font:500 12px/1 var(--font-mono)}.dayrow__meta{font:400 10px/1 var(--font-ui);color:var(--muted);margin-top:4px}.dayrow__meta--late{color:var(--warn)}.balrow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:16px}.bal{background:var(--surface);border:1px solid #e8e5dd;border-radius:var(--r-md);padding:14px 10px;text-align:center}.bal__n{font:700 22px/1 var(--font-display)}.bal__label{font:400 11px/1 var(--font-ui);color:var(--muted);margin-top:5px}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.field__label{font:600 12px/1 var(--font-ui);color:#4b4f57}.field input,.field textarea,.field select{font:400 14px/1.3 var(--font-ui);padding:12px 14px;border:1.5px solid #e0dcd3;border-radius:var(--r-md);background:var(--surface);color:var(--ink)}.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--amber)}.segmented{display:flex;gap:8px}.seg{flex:1;font:500 13px/1 var(--font-ui);padding:11px 8px;border:1.5px solid #e0dcd3;border-radius:var(--r-md);background:var(--surface);color:#4b4f57;text-align:center}.seg--on{border-color:var(--amber);color:var(--amber);background:#fdf3ec}.reqlist{display:flex;flex-direction:column;gap:8px}.reqrow{background:var(--surface);border:1px solid #e8e5dd;border-radius:var(--r-md);padding:13px 15px;display:flex;align-items:center;gap:12px}.reqrow__mid{flex:1}.reqrow__type{font:600 13px/1 var(--font-ui)}.reqrow__dates{font:400 11px/1.3 var(--font-mono);color:var(--muted);margin-top:3px}.sectitle{font:600 11px/1 var(--font-ui);color:var(--muted);margin:4px 0 10px}.cam{position:fixed;top:0;right:0;bottom:0;left:0;background:#000;display:flex;flex-direction:column;z-index:20}.cam__video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.cam__scrim{position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(135deg,#2a2d34 0,#2a2d34 12px,#23262c 12px,#23262c 24px)}.cam__top{position:relative;z-index:2;padding:calc(16px + env(safe-area-inset-top)) 20px 0;display:flex;justify-content:space-between;align-items:flex-start}.cam__badge{display:inline-flex;align-items:center;gap:7px;font:500 11px/1 var(--font-mono);color:#fff;background:#0000008c;border-radius:var(--r-pill);padding:8px 12px}.cam__rec{width:7px;height:7px;border-radius:50%;background:var(--amber);animation:recpulse 1.6s infinite}.cam__close{color:#fff;background:#0006;border:none;border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center}.cam__guidewrap{position:relative;z-index:2;flex:1;display:flex;align-items:center;justify-content:center}.cam__guide{width:210px;height:270px;border:2px dashed rgba(255,255,255,.6);border-radius:16px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:14px}.cam__guide span{font:400 11px/1.4 var(--font-ui);color:#ffffffd9;text-align:center;white-space:pre-line}.cam__meta{position:relative;z-index:2;margin:0 16px;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:var(--r-md);padding:12px 14px;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font:400 10.5px/1.5 var(--font-mono)}.cam__meta .k{color:var(--dark-muted)}.cam__meta .v{color:var(--dark-text)}.cam__meta .v--ok{color:var(--dark-green)}.cam__shutterwrap{position:relative;z-index:2;padding:16px 0 calc(26px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:10px}.cam__shutter{width:74px;height:74px;border-radius:50%;background:#fff;border:5px solid rgba(255,255,255,.4)}.cam__note{font:400 10px/1.3 var(--font-ui);color:#fff9;text-align:center;white-space:pre-line;display:inline-flex;gap:5px;align-items:center}.verify__photo{margin:0 0 16px;height:230px;border-radius:var(--r-lg);overflow:hidden;position:relative;background:repeating-linear-gradient(135deg,#d8d4cb 0,#d8d4cb 14px,#e3e0d8 14px,#e3e0d8 28px)}.verify__photo img{width:100%;height:100%;object-fit:cover}.verify__stamp{position:absolute;left:12px;bottom:12px;font:400 10px/1 var(--font-mono);color:var(--ink);background:#fffc;padding:5px 8px;border-radius:6px}.checklist{display:flex;flex-direction:column;gap:10px;font:500 12.5px/1.3 var(--font-ui)}.check{display:flex;align-items:center;gap:9px}.check--ok{color:var(--green)}.check--warn{color:var(--warn)}.check__mark{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.check--ok .check__mark{background:var(--green-tint)}.check--warn .check__mark{background:var(--warn-tint)}.verify__actions{display:flex;gap:10px;margin-top:20px}.covert{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--surface-2);z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:40px;text-align:center}.covert__ring{width:92px;height:92px;border-radius:50%;border:4px solid rgba(228,97,28,.18);border-top-color:var(--amber);animation:ringspin .9s linear infinite}.covert__title{font:600 20px/1.3 var(--font-ui)}.covert__hint{font:400 13px/1.5 var(--font-ui);color:var(--muted);max-width:260px}.consent{min-height:100dvh;background:var(--surface-2);padding:calc(24px + env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;max-width:440px;margin:0 auto}.consent__brand{display:flex;align-items:center;gap:10px;margin-bottom:18px}.consent__title{font:700 22px/1.25 var(--font-ui);margin:0 0 8px}.consent__intro{font:400 13px/1.6 var(--font-ui);color:#4b4f57;margin:0 0 20px}.consent__item{background:var(--surface);border:1px solid #e8e5dd;border-radius:var(--r-md);padding:16px;display:flex;gap:12px;align-items:flex-start;margin-bottom:10px}.consent__icon{color:var(--amber);margin-top:2px}.consent__body{flex:1}.consent__name{font:600 14px/1.3 var(--font-ui);display:flex;align-items:center;gap:8px}.consent__req{font:500 9px/1 var(--font-mono);letter-spacing:.05em;padding:3px 6px;border-radius:5px;text-transform:uppercase}.consent__req--required{background:var(--warn-tint);color:var(--warn)}.consent__req--optional{background:var(--neutral-tint);color:var(--muted)}.consent__desc{font:400 12px/1.5 var(--font-ui);color:var(--muted);margin-top:4px}.toggle{width:44px;height:26px;border-radius:999px;background:#d9d5cc;border:none;position:relative;flex-shrink:0;transition:background .15s ease}.toggle--on{background:var(--amber)}.toggle__knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .15s ease}.toggle--on .toggle__knob{transform:translate(18px)}.toggle:disabled{opacity:.55;cursor:not-allowed}.consent__policy{font:500 13px/1.4 var(--font-ui);margin:6px 0 18px;display:inline-flex;align-items:center;gap:6px}.consent__foot{margin-top:auto}.consent__err{font:400 12px/1.4 var(--font-ui);color:var(--red);margin-bottom:10px;text-align:center}.crow{background:var(--surface);border:1px solid #e8e5dd;border-radius:var(--r-md);padding:14px 16px;display:flex;align-items:center;gap:12px;margin-bottom:8px}.crow__mid{flex:1}.crow__name{font:600 13px/1.3 var(--font-ui)}.crow__meta{font:400 11px/1.3 var(--font-mono);color:var(--muted);margin-top:3px}.crow__meta--off{color:#9a9ea5}.linkbtn{background:none;border:none;color:var(--amber-press);font:500 12px/1 var(--font-ui);padding:6px 8px}.datarights{margin-top:18px}.notice{font:500 12.5px/1.4 var(--font-ui);padding:12px 14px;border-radius:var(--r-md);margin-top:12px}.notice--ok{background:var(--green-tint);color:var(--green)}.notice--warn{background:var(--warn-tint);color:var(--warn)}.toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%);background:var(--ink);color:#fff;font:500 13px/1.3 var(--font-ui);padding:12px 18px;border-radius:var(--r-pill);z-index:30;max-width:340px;text-align:center;box-shadow:0 12px 30px -12px #00000080}.toast--flagged{background:var(--warn)}.reminder-banner{margin:10px 16px 0;padding:11px 14px;border-radius:12px;background:color-mix(in srgb,var(--amber) 12%,transparent);border:1px solid color-mix(in srgb,var(--amber) 40%,transparent);color:var(--amber-deep, #a53f11);font:600 12.5px/1.4 var(--font-ui)}.notif-wrap{position:relative;display:inline-flex}.notif-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;border:none;background:transparent;color:inherit;cursor:pointer;transition:background .15s}.notif-bell:hover{background:#80808029}.notif-badge{position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--amber);color:#fff;font:700 10px/16px var(--font-ui);text-align:center}.notif-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40}.notif-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:41;width:340px;max-width:min(340px,92vw);max-height:460px;display:flex;flex-direction:column;background:#fff;color:var(--ink);border:1px solid #e6e2d9;border-radius:14px;box-shadow:0 18px 44px #14161a38;overflow:hidden}.notif-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #efece5}.notif-head__title{font:700 13px/1 var(--font-ui)}.notif-head__action{font:600 11px/1 var(--font-ui);color:var(--amber);background:none;border:none;cursor:pointer;padding:4px}.notif-head__action:disabled{color:#b7b3aa;cursor:default}.notif-enable{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;background:var(--surface-2, #f6f3ec);border-bottom:1px solid #efece5;font:500 11px/1.4 var(--font-ui);color:var(--muted, #6b6f76)}.notif-enable__btn{flex:none;font:600 11px/1 var(--font-ui);color:#fff;background:var(--ink);border:none;border-radius:8px;padding:7px 10px;cursor:pointer}.notif-list{overflow-y:auto;flex:1}.notif-item{display:block;width:100%;text-align:left;padding:11px 14px;border:none;border-bottom:1px solid #f1eee7;background:#fff;cursor:pointer}.notif-item:hover{background:#faf8f3}.notif-item--unread{background:#fff8f2}.notif-item--unread:hover{background:#fef2e8}.notif-item__row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.notif-item__title{font:600 12.5px/1.3 var(--font-ui);color:var(--ink)}.notif-item__title--urgent{color:var(--amber-deep, #a53f11)}.notif-item__time{flex:none;font:500 10px/1 var(--font-ui);color:#9a9ea5}.notif-item__body{margin-top:3px;font:400 11.5px/1.4 var(--font-ui);color:var(--muted, #6b6f76)}.notif-empty{padding:34px 14px;text-align:center;font:500 12px/1.4 var(--font-ui);color:#9a9ea5}.np{display:flex;flex-direction:column}.np__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid #f1eee7}.np__label{font:500 12.5px/1.4 var(--font-ui);color:var(--ink)}.np__hint{color:var(--amber-deep, #a53f11);font-weight:600}.np__note{margin-top:10px;font:400 10.5px/1.5 var(--font-ui);color:#9a9ea5}.np__toggle{flex:none;background:none;border:none;padding:0;cursor:pointer}.np__toggle:disabled{opacity:.5;cursor:default}.np__track{position:relative;display:inline-block;width:38px;height:22px;border-radius:999px;background:#d9d5cc;transition:background .15s}.np__track--on{background:var(--green, #2f9e44)}.np__knob{position:absolute;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s}:root{--amber: #e4611c;--amber-press: #c8531b;--amber-deep: #a53f11;--ink: #16181d;--green: #1e8a5a;--red: #c13b30;--warn: #b06a12;--fill: #f4f2ee;--line: #e5e2db;--muted: #71767e;--canvas: #e7e3dc;--surface: #ffffff;--surface-2: #f6f4ef;--green-tint: #e6f3ec;--red-tint: #f7e7e5;--warn-tint: #f6efdf;--neutral-tint: #f0eee8;--dark-bg: #101216;--dark-surface: #181b21;--dark-line: #262a32;--dark-text: #e9ebee;--dark-muted: #8b9096;--dark-green: #4ad991;--font-display: "Space Grotesk", system-ui, sans-serif;--font-ui: "IBM Plex Sans Thai", "Space Grotesk", system-ui, sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, monospace;--r-sm: 10px;--r-md: 14px;--r-lg: 18px;--r-xl: 22px;--r-pill: 999px;--shadow-amber: 0 12px 22px -10px rgba(228, 97, 28, .7);--shadow-card: 0 6px 20px -12px rgba(0, 0, 0, .25);--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 20px;--sp-6: 24px}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--canvas);font-family:var(--font-ui);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}button{font-family:inherit;cursor:pointer}a{color:var(--amber-press);text-decoration:none}a:hover{color:var(--amber-deep)}.mono{font-family:var(--font-mono)}.display{font-family:var(--font-display);letter-spacing:-.02em}@keyframes recpulse{0%,to{opacity:1}50%{opacity:.25}}@keyframes ringspin{to{transform:rotate(360deg)}}.no-scrollbar{scrollbar-width:none}.no-scrollbar::-webkit-scrollbar{display:none}:focus-visible{outline:2px solid var(--amber);outline-offset:2px}