:root{--concrete: #e6eaed;--panel: #ffffff;--ink: #17232e;--steel: #4a5a68;--line: #c9d1d7;--tape: #f2b705;--ok: #1e7a4c;--ng: #b8322a;--radius-sm: 6px;--radius-lg: 14px;color-scheme:light;font-family:IBM Plex Sans Thai,Sarabun,Thonburi,system-ui,sans-serif;color:var(--ink);background:var(--concrete);-webkit-tap-highlight-color:transparent}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0)}button,input{font:inherit;color:inherit}button{cursor:pointer;touch-action:manipulation}:focus-visible{outline:3px solid var(--tape);outline-offset:2px}.splash{height:100%;display:grid;place-items:center;font-size:1.25rem;color:var(--steel)}.login{min-height:100%;display:grid;grid-template-columns:minmax(280px,38%) 1fr}.login-side{position:relative;background:var(--ink);color:#fff;padding:48px 40px 48px 64px;display:flex;flex-direction:column;justify-content:space-between}.tape{position:absolute;inset:0 auto 0 0;width:24px;background:var(--tape)}.brand-name{font-size:2rem;font-weight:700;letter-spacing:.01em}.brand-factory{margin-top:4px;font-size:1.1rem;color:#b7c2cb}.clock-time{font-size:clamp(4rem,9vw,6.5rem);font-weight:600;line-height:1;font-variant-numeric:tabular-nums}.clock-date{margin-top:12px;font-size:1.15rem;color:#b7c2cb}.login-main{display:grid;place-items:center;padding:32px 24px}.login-form{width:100%;max-width:380px}.field-label{display:block;font-size:1rem;font-weight:600;color:var(--steel);margin:0 0 8px}.code-input{width:100%;height:64px;padding:0 18px;font-size:1.6rem;font-weight:600;letter-spacing:.06em;background:var(--panel);border:2px solid var(--line);border-radius:var(--radius-sm);margin-bottom:28px}.code-input:focus{border-color:var(--ink);outline:none}.code-input::placeholder{color:#9aa6b0;font-weight:400;letter-spacing:0}.pin-dots{display:flex;gap:14px;margin-bottom:20px}.dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--steel)}.dot.filled{background:var(--ink);border-color:var(--ink)}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.key{height:76px;font-size:1.9rem;font-weight:600;background:var(--panel);border:2px solid var(--line);border-radius:var(--radius-sm);font-variant-numeric:tabular-nums}.key:active:not(:disabled){background:var(--ink);color:#fff;border-color:var(--ink)}.key-fn{font-size:1.2rem;color:var(--steel);background:transparent}.key:disabled{opacity:.5}.message{min-height:1.6em;margin:18px 0 0;font-size:1.05rem;color:var(--steel)}.message.is-error{color:var(--ng);font-weight:600}@media (max-width: 820px){.login{grid-template-columns:1fr;grid-template-rows:auto 1fr}.login-side{flex-direction:row;align-items:center;padding:20px 24px 20px 44px}.tape{width:14px}.brand-name{font-size:1.5rem}.clock{text-align:right}.clock-time{font-size:2.5rem}.clock-date{font-size:.95rem;margin-top:4px}}.home{max-width:900px;margin:0 auto;padding:24px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px 16px 28px;background:var(--ink);color:#fff;border-radius:var(--radius-lg);border-left:10px solid var(--tape)}.who{font-size:1.35rem;font-weight:700}.who-meta{color:#b7c2cb;margin-top:2px}.btn-outline{min-height:52px;padding:0 20px;background:transparent;color:#fff;border:2px solid #6d7d8a;border-radius:var(--radius-sm);font-weight:600}.panel{margin-top:20px;padding:24px;background:var(--panel);border-radius:var(--radius-lg)}.panel-title{margin:0 0 12px;font-size:1.35rem}.status-list{list-style:none;margin:0;padding:0}.status-row{display:grid;grid-template-columns:16px 1fr auto auto;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);font-size:1.05rem}.status-mark{width:14px;height:14px;border-radius:3px}.status-mark.done{background:var(--ok)}.status-mark.todo{background:transparent;border:2px solid var(--steel)}.status-shift{color:var(--steel)}.status-text{font-weight:600;min-width:7em;text-align:right}.hint{margin:16px 0 0;color:var(--steel)}@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}