:root{color:#101828;font-synthesis:none;text-rendering:optimizelegibility;--ink:#101828;--muted:#526176;--line:#dbe2ec;--surface:#fff;--canvas:#f4f7fb;--blue:#175cd3;--blue-strong:#1249a5;--blue-soft:#e9f1ff;--green:#067647;--green-soft:#e6f6ee;--red:#b42318;--red-soft:#fff0ee;--shadow:0 14px 38px #1018281c, 0 2px 8px #1018280f;background:#f4f7fb;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#app{min-width:320px;min-height:100%;margin:0}body{background:var(--canvas);min-height:100dvh}button,input,textarea,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline-offset:2px;outline:3px solid #175cd34d}.employee-shell{width:min(100%,680px);min-height:100dvh;padding:max(20px, env(safe-area-inset-top)) 18px max(28px, env(safe-area-inset-bottom));margin:0 auto}.employee-header{justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px;display:flex}.product-name,.terminal-brand{color:var(--blue);letter-spacing:.02em;margin:0 0 5px;font-size:13px;font-weight:750}.employee-header h1,.terminal-header h1{color:var(--ink);letter-spacing:-.025em;margin:0;font-size:clamp(22px,5vw,30px);line-height:1.15}.avatar-button{color:#fff;background:#172b4d;border:0;border-radius:50%;flex:none;place-items:center;width:44px;height:44px;font-size:13px;font-weight:800;display:grid}.attendance-canvas{border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);border-radius:16px;overflow:hidden}.today-line{border-bottom:1px solid var(--line);justify-content:space-between;align-items:flex-start;gap:16px;padding:22px 22px 18px;display:flex}.today-line p{text-transform:capitalize;margin:0 0 4px;font-size:16px;font-weight:750}.today-line div>span{color:var(--muted);font-size:14px}.status-badge{color:#3f4b5d;white-space:nowrap;background:#eef1f5;border-radius:999px;align-items:center;gap:7px;min-height:32px;padding:6px 10px;font-size:12px;font-weight:750;display:inline-flex}.status-badge>span,.connection>span{background:#7b8798;border-radius:50%;width:8px;height:8px}.status-badge--working{background:var(--green-soft);color:var(--green)}.status-badge--working>span{background:var(--green);box-shadow:0 0 0 4px #0676471f}.shift-focus{text-align:center;padding:36px 22px 30px}.shift-focus span{color:var(--muted);font-size:14px;font-weight:650}.shift-focus strong{font-variant-numeric:tabular-nums;letter-spacing:-.04em;margin:5px 0 2px;font-size:clamp(52px,17vw,80px);line-height:1;display:block}.shift-focus p{color:var(--muted);margin:12px auto 0;font-size:14px}.shift-action{background:var(--blue);color:#fff;cursor:pointer;text-align:left;border:0;border-radius:14px;align-items:center;gap:14px;width:calc(100% - 32px);min-height:78px;margin:0 16px 16px;padding:14px 16px;transition:background-color .16s,box-shadow .16s,transform .16s;display:flex;box-shadow:0 8px 20px #175cd340}.shift-action:hover{background:var(--blue-strong);box-shadow:0 10px 24px #1249a54d}.shift-action:active{transform:translateY(1px);box-shadow:0 5px 12px #1249a53d}.shift-action--end{background:#26364d;box-shadow:0 8px 20px #10182838}.shift-action__icon{background:#ffffff29;border-radius:50%;flex:none;place-items:center;width:44px;height:44px;display:grid}.shift-action strong,.shift-action small{display:block}.shift-action strong{font-size:18px}.shift-action small{color:#e9f1ff;margin-top:3px;font-size:12px;line-height:1.3}.quick-links{border-top:1px solid var(--line);grid-template-columns:1fr 1fr;display:grid}.quick-links button{min-height:52px;color:var(--blue);cursor:pointer;background:#fff;border:0;font-size:13px;font-weight:700}.quick-links button+button{border-left:1px solid var(--line)}.quick-links button:hover{background:var(--blue-soft)}.primary-action,.secondary-action,.danger-action,.text-action{cursor:pointer;border-radius:12px;justify-content:center;align-items:center;min-height:48px;padding:11px 18px;font-weight:750;text-decoration:none;display:inline-flex}.primary-action{border:1px solid var(--blue);background:var(--blue);color:#fff;box-shadow:0 6px 16px #175cd333}.primary-action:hover{background:var(--blue-strong)}.secondary-action{color:var(--ink);background:#fff;border:1px solid #bdc8d7}.secondary-action:hover{background:#f1f4f8}.danger-action{background:var(--red-soft);color:var(--red);border:1px solid #f0a9a2}.text-action{min-height:42px;color:var(--blue);box-shadow:none;background:0 0;border:0}button:disabled{cursor:not-allowed;opacity:.5;box-shadow:none}.center-state,.app-boot,.fatal-state{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;min-height:min(72dvh,680px);padding:28px;display:flex}.center-state h2,.fatal-state strong{letter-spacing:-.025em;max-width:18ch;margin:0;font-size:25px;line-height:1.18}.center-state p,.fatal-state p{max-width:46ch;color:var(--muted);margin:0 0 10px;line-height:1.55}.state-symbol{background:var(--blue-soft);width:64px;height:64px;color:var(--blue);border-radius:50%;place-items:center;font-size:32px;font-weight:800;display:grid}.state-symbol--error{background:var(--red-soft);color:var(--red)}.state-spinner{border:3px solid #ccd6e3;border-top-color:var(--blue);border-radius:50%;width:38px;height:38px;animation:.85s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.state-spinner{animation-duration:1.8s}}.step-label{font-weight:800;color:var(--blue)!important;margin:0 0 8px!important;font-size:12px!important}.inline-error{background:var(--red-soft);color:#8f1b13;border-radius:12px;margin:12px 16px;padding:12px 14px;font-size:13px;line-height:1.45}.inline-success{background:var(--green-soft);color:var(--green);border-radius:12px;margin:12px 16px;padding:12px 14px;font-size:13px;line-height:1.45}.activation-panel,.device-warning,.detail-section,.terminal-settings{border-top:1px solid var(--line);background:#f8fafc;margin:0 16px 16px;padding:18px}.activation-panel h2,.detail-section h2{margin:0 0 6px;font-size:18px}.activation-panel p,.device-warning p,.terminal-settings p{color:var(--muted);margin:0 0 16px;font-size:13px;line-height:1.5}.device-warning{background:var(--red-soft);border-radius:12px}.device-warning strong{color:var(--red);margin-bottom:6px;display:block}.field-label{color:#344054;gap:7px;margin-bottom:14px;font-size:13px;font-weight:700;display:grid}.field-label input,.field-label textarea,.field-label select{width:100%;min-height:46px;color:var(--ink);background:#fff;border:1px solid #b9c5d4;border-radius:10px;padding:10px 12px;font-weight:450}.field-label textarea{resize:vertical}.activation-panel .primary-action,.detail-section .secondary-action,.terminal-settings .danger-action{width:100%}.terminal-settings summary{cursor:pointer;color:var(--blue);margin-bottom:12px;font-weight:750}.owner-terminal-intro{border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);border-radius:16px;margin-bottom:14px;padding:20px}.owner-terminal-intro h2{letter-spacing:-.025em;margin:0 0 8px;font-size:24px;line-height:1.2}.owner-terminal-intro>p:last-child{color:var(--muted);margin:0;font-size:14px;line-height:1.55}.terminal-settings--standalone{border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);border-radius:16px;margin:0}.terminal-settings--standalone>summary{font-size:16px}.terminal-settings .inline-error{margin:0 0 14px}.terminal-step-up{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}.shift-list{margin:0;padding:0;list-style:none}.shift-list li{border-bottom:1px solid var(--line);justify-content:space-between;gap:12px;padding:11px 0;font-size:13px;display:flex}.shift-list li:last-child{border-bottom:0}.empty-copy{color:var(--muted);font-size:14px}.scanner,.live-check{min-height:calc(100dvh - 40px);padding:8px 0 20px}.scanner__copy h2,.live-check h2{letter-spacing:-.03em;margin:0 0 8px;font-size:28px;line-height:1.14}.scanner__copy>p:not(.step-label),.live-check>p:not(.step-label){color:var(--muted);margin:0;line-height:1.5}.live-check .live-expired{color:var(--red);font-weight:700}.live-check .live-retry{width:100%;margin-top:16px}.scanner__viewport{aspect-ratio:1/1.15;box-shadow:var(--shadow);background:#09111e;border-radius:16px;margin:24px 0 16px;position:relative;overflow:hidden}.scanner__viewport video{object-fit:cover;width:100%;height:100%}.scanner__frame{border:3px solid #ffffffeb;border-radius:14px;position:absolute;inset:17%;box-shadow:0 0 0 999px #03081157}.scanner .secondary-action{width:100%;margin-top:12px}.live-symbols{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px;display:grid}.live-symbol{min-height:150px;color:var(--ink);cursor:pointer;background:#fff;border:1px solid #bdc8d7;border-radius:14px;place-items:center;gap:4px;display:grid;position:relative;box-shadow:0 4px 10px #1018280f}.live-symbol:hover{border-color:var(--blue);background:var(--blue-soft)}.live-symbol__number{color:var(--muted);font-size:12px;font-weight:800;position:absolute;top:10px;left:12px}.live-symbol__glyph{font-size:48px;line-height:1}.live-symbol strong{font-size:13px}.result-state>strong{font-variant-numeric:tabular-nums;letter-spacing:-.04em;font-size:44px}.result-mark{border-radius:50%;place-items:center;width:82px;height:82px;font-size:42px;font-weight:800;display:grid}.result-mark--success{background:var(--green-soft);color:var(--green);box-shadow:0 10px 26px #0676472e}.result-mark--error{background:var(--red-soft);color:var(--red)}.terminal-shell{min-height:100dvh;color:var(--ink);background:#f3f6fa;grid-template-rows:auto 1fr auto;display:grid}.terminal-header,.terminal-footer{justify-content:space-between;align-items:center;gap:24px;padding:24px 34px;display:flex}.terminal-header{border-bottom:1px solid var(--line);background:#fff}.connection{color:var(--muted);align-items:center;gap:9px;font-size:14px;font-weight:700;display:inline-flex}.connection--online{color:var(--green)}.connection--online>span{background:var(--green);box-shadow:0 0 0 5px #0676471f}.connection--offline{color:var(--red)}.connection--offline>span{background:var(--red)}.terminal-stage{grid-template-columns:minmax(260px,.8fr) minmax(360px,1fr);align-items:center;gap:clamp(34px,6vw,90px);width:min(1180px,100% - 64px);margin:auto;padding:32px 0;display:grid}.terminal-instruction p{color:var(--blue);margin:0 0 10px;font-size:18px;font-weight:750}.terminal-instruction h2{letter-spacing:-.04em;max-width:12ch;margin:0;font-size:clamp(42px,5vw,76px);line-height:.98}.terminal-live-timer{color:var(--red);font-variant-numeric:tabular-nums;margin-top:22px;font-size:clamp(18px,2vw,26px);font-weight:800;display:block}.qr-sheet{background:#fff;border-radius:16px;justify-self:center;padding:18px;box-shadow:0 18px 48px #10182824,0 3px 10px #10182814}.qr-sheet img{aspect-ratio:1;width:min(48vw,540px);display:block}.qr-timer{background:#e8edf4;border-radius:999px;height:6px;margin:12px 8px 2px;overflow:hidden}.qr-timer span{transform-origin:0;background:var(--blue);width:100%;height:100%;transition:transform .95s linear;display:block}.terminal-offline{min-height:360px;color:var(--muted);text-align:center;border:1px dashed #aeb9c8;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:10px;display:flex}.terminal-offline strong{color:var(--ink);font-size:24px}.terminal-stage--live{grid-template-columns:.65fr 1.35fr}.live-symbols--terminal{margin:0}.live-symbols--terminal .live-symbol{cursor:default;min-height:min(24vh,230px)}.live-symbols--terminal .live-symbol--target{border:4px solid var(--blue);background:var(--blue-soft);transform:scale(1.035);box-shadow:0 16px 34px #175cd333}.terminal-stage--result{text-align:center;flex-direction:column;justify-content:center;gap:12px;display:flex}.terminal-stage--result p{color:var(--muted);margin:0;font-size:20px}.terminal-stage--result h2{letter-spacing:-.04em;margin:0;font-size:clamp(44px,6vw,82px)}.terminal-stage--result>span{color:var(--muted)}.terminal-footer{border-top:1px solid var(--line);color:var(--muted);font-size:14px}.terminal-footer time{color:var(--ink);font-variant-numeric:tabular-nums;font-size:20px;font-weight:750}@media (width<=760px){.employee-shell{padding-left:12px;padding-right:12px}.today-line{flex-direction:column}.status-badge{align-self:flex-start}.terminal-stage{text-align:center;grid-template-columns:1fr;width:calc(100% - 32px)}.terminal-instruction h2{max-width:100%}.qr-sheet img{width:min(76vw,480px)}.terminal-header,.terminal-footer{padding:18px}}@media (width<=359px){.employee-header{margin-bottom:18px}.attendance-canvas{border-radius:12px}.today-line,.shift-focus{padding-left:16px;padding-right:16px}.shift-action{width:calc(100% - 20px);margin-left:10px;margin-right:10px;padding:12px}.quick-links{grid-template-columns:1fr}.quick-links button+button{border-top:1px solid var(--line);border-left:0}.live-symbol{min-height:128px}}