:root{--color-primary: #1e40af;--color-primary-dark: #1e3a8a;--color-success: #16a34a;--color-success-dark: #15803d;--color-danger: #dc2626;--color-danger-dark: #b91c1c;--color-bg: #f8fafc;--color-card: #ffffff;--color-text: #0f172a;--color-text-muted: #475569;--color-border: #e2e8f0;--color-error-bg: #fee2e2;--color-error-text: #991b1b;--radius: 16px;--radius-lg: 20px;--touch-min: 56px;--shadow-card: 0 2px 8px rgba(0, 0, 0, .06);--shadow-active: 0 4px 16px rgba(30, 64, 175, .18);--font-jp: "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", system-ui, sans-serif;--font-vi: "Noto Sans", system-ui, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:var(--font-jp);background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-size:16px;line-height:1.5}.page{min-height:100dvh;padding:20px 16px calc(20px + env(safe-area-inset-bottom));max-width:480px;margin:0 auto;display:flex;flex-direction:column}.page-header{margin-bottom:24px}.page-header h1,.page-header h2{font-size:22px;font-weight:700;color:var(--color-text)}.page-header .subtitle{margin-top:8px;color:var(--color-text-muted);font-size:15px}.page-header .hint{margin-top:4px;color:var(--color-text-muted);font-size:14px}.bi-ja{display:block;font-family:var(--font-jp)}.bi-vi{display:block;font-family:var(--font-vi);font-size:.85em;opacity:.85;margin-top:2px}.btn{display:flex;align-items:center;justify-content:center;gap:12px;border:none;border-radius:var(--radius);font-family:inherit;font-weight:600;cursor:pointer;min-height:var(--touch-min);padding:14px 20px;transition:transform 80ms ease,box-shadow 80ms ease,background .12s ease;text-align:center}.btn:active:not(:disabled){transform:scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-lg{min-height:96px;font-size:22px;padding:24px;border-radius:var(--radius-lg)}.btn-icon{font-size:1.4em}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--color-primary-dark)}.btn-success{background:var(--color-success);color:#fff;box-shadow:var(--shadow-active)}.btn-success:hover:not(:disabled){background:var(--color-success-dark)}.btn-danger{background:var(--color-danger);color:#fff;box-shadow:var(--shadow-active)}.btn-danger:hover:not(:disabled){background:var(--color-danger-dark)}.btn-secondary{background:var(--color-card);color:var(--color-text);border:1px solid var(--color-border)}.btn-ghost{background:transparent;color:var(--color-primary)}.employee-list{list-style:none;display:flex;flex-direction:column;gap:12px}.employee-card{width:100%;display:flex;align-items:center;gap:16px;padding:16px;background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);min-height:80px;cursor:pointer;text-align:left;font-family:inherit}.employee-card:active{transform:scale(.99);box-shadow:var(--shadow-active)}.avatar{flex:0 0 56px;width:56px;height:56px;border-radius:50%;background:var(--color-primary);color:#fff;font-size:28px;font-weight:700;display:flex;align-items:center;justify-content:center}.employee-names{flex:1}.employee-names .name-ja{font-size:18px;font-weight:600}.employee-names .name-vi{font-size:14px;color:var(--color-text-muted);margin-top:2px}.chevron{font-size:24px;color:var(--color-text-muted)}.page-pin{align-items:center}.employee-display{text-align:center;margin:16px 0}.employee-display .name-ja{font-size:22px;font-weight:700}.employee-display .name-vi{font-size:16px;color:var(--color-text-muted);margin-top:4px}.link-back,.link-logout{background:none;border:none;color:var(--color-primary);font-family:inherit;font-size:14px;padding:8px 0;cursor:pointer;align-self:flex-start}.pin-dots{display:flex;gap:16px;justify-content:center;margin:24px 0 16px}.pin-dot{width:18px;height:18px;border-radius:50%;background:var(--color-border);transition:background .12s ease}.pin-dot.filled{background:var(--color-primary)}.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:320px;margin:0 auto}.numpad-key{background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius);font-size:28px;font-weight:600;font-family:inherit;aspect-ratio:1.4;cursor:pointer}.numpad-key:active:not(:disabled){background:var(--color-border)}.numpad-back{font-size:22px;color:var(--color-text-muted)}.numpad-blank{visibility:hidden}.punch-header{display:flex;align-items:flex-start;justify-content:space-between}.site-picker{margin-bottom:24px}.site-label{display:block;font-size:14px;font-weight:600;color:var(--color-text-muted);margin-bottom:8px}.site-select{width:100%;font-size:18px;padding:16px 48px 16px 16px;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-card);font-family:inherit;min-height:var(--touch-min);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23475569'%3E%3Cpath d='M5.5 7l4.5 4 4.5-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:20px}.punch-actions{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.today-section h3{font-size:16px;color:var(--color-text-muted);margin-bottom:12px}.today-section .empty{color:var(--color-text-muted);font-size:14px;text-align:center;padding:16px}.today-list{list-style:none;display:flex;flex-direction:column;gap:8px}.today-item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 16px;background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius)}.today-item .time{font-weight:700;font-size:18px;font-variant-numeric:tabular-nums}.today-item.type-in .time{color:var(--color-success)}.today-item.type-out .time{color:var(--color-danger)}.today-item .type{font-size:13px;color:var(--color-text-muted)}.today-item .site{font-size:14px;text-align:right;color:var(--color-text)}.page-success{align-items:center;justify-content:center;text-align:center}.check-mark{width:120px;height:120px;border-radius:50%;background:var(--color-success);color:#fff;font-size:72px;display:flex;align-items:center;justify-content:center;margin-bottom:24px;animation:pop .32s cubic-bezier(.34,1.56,.64,1)}@keyframes pop{0%{transform:scale(0)}to{transform:scale(1)}}.big-time{font-size:64px;font-weight:700;font-variant-numeric:tabular-nums;margin-bottom:16px}.page-success h2{font-size:22px;margin-bottom:32px}.take-care{color:var(--color-text-muted);font-size:15px;margin-bottom:40px}.error-banner{background:var(--color-error-bg);color:var(--color-error-text);padding:12px 16px;border-radius:var(--radius);margin-bottom:16px;font-size:14px}.error-banner .bi-ja{font-weight:600}.clockout-reminder{display:flex;align-items:center;gap:10px;background:#fef3c7;color:#92400e;border:2px solid #f59e0b;border-radius:var(--radius);padding:12px 16px;margin-bottom:16px;font-size:15px;font-weight:700;line-height:1.5}.clockout-reminder .reminder-icon{font-size:22px;flex-shrink:0}@media (prefers-color-scheme: dark){.clockout-reminder{background:#78350f;color:#fde68a;border-color:#f59e0b}}.error,.error-detail{color:var(--color-error-text);padding:16px}@media (prefers-color-scheme: dark){:root{--color-bg: #0f172a;--color-card: #1e293b;--color-text: #f1f5f9;--color-text-muted: #94a3b8;--color-border: #334155;--color-error-bg: #7f1d1d;--color-error-text: #fecaca}.brand-logo{background:#fff;border-radius:6px;padding:4px 8px}}.search-wrap{padding:0 16px 12px}.search-input{width:100%;padding:12px 14px;font-size:16px;border:2px solid var(--color-border);border-radius:10px;background:var(--color-card, #fff);color:var(--color-text);box-sizing:border-box}.search-input:focus{outline:none;border-color:var(--color-primary, #2563eb)}.header-actions{display:flex;align-items:center;gap:4px}.muted{color:var(--color-text-muted)}.brand-header{display:flex;justify-content:center;align-items:center;padding:16px 16px 12px}.brand-logo{width:100%;max-width:480px;max-height:180px;height:auto;object-fit:contain}@media (max-width: 480px){.brand-logo{max-width:360px;max-height:140px}}