:root{color:#111827;background:#f3f4f6;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{margin:0}#root{min-height:100vh}.app{max-width:900px;margin:0 auto;padding:16px;display:grid;gap:16px}h1,h2{margin:0;color:#111827}p{margin:0}.card{background:#fff;border:1px solid #d1d5db;border-radius:12px;padding:14px;display:grid;gap:12px}.muted{color:#6b7280;font-size:.92rem}.row{display:flex;gap:10px;align-items:center}.row input{flex:1;min-height:40px}input,button{border-radius:10px;border:1px solid #d1d5db;padding:10px 12px;font:inherit}button{min-height:40px;background:#111827;color:#fff;border-color:#111827}button:disabled{opacity:.5}button.ghost{background:#fff;color:#111827}button.danger{background:#dc2626;border-color:#dc2626}.camera-header,.card-title{display:flex;justify-content:space-between;align-items:center}.camera-wrap{border-radius:10px;overflow:hidden;background:#111827;min-height:220px}.camera-viewport{position:relative;width:100%;background:#111827}.camera-viewport>video{width:100%;display:block;vertical-align:top}.camera-viewport>canvas.face-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}@media(orientation:portrait){.camera-viewport{aspect-ratio:4 / 3;width:100%;max-height:min(75vw,82vh)}.camera-viewport>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.camera-viewport>canvas.face-overlay{object-fit:cover}}.mirror{transform:scaleX(-1)}.camera-wrap video{width:100%;display:block}.status{padding:4px 8px;border-radius:999px;font-size:.82rem;text-transform:capitalize;background:#e5e7eb}.status.matched{background:#dcfce7;color:#166534}.status.no-match,.status.no-face{background:#fef3c7;color:#92400e}.status.error{background:#fee2e2;color:#991b1b}.list{list-style:none;margin:0;padding:0;display:grid;gap:10px}.list li{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid #e5e7eb;border-radius:10px;padding:10px}.panels{display:grid;gap:12px}@media(min-width:860px){.panels{grid-template-columns:1fr 1fr}}.app-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.app-header-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;flex-shrink:0}@media(max-width:560px){.app-header{flex-direction:column;align-items:stretch;gap:10px}.app-header-actions{flex-direction:column;flex-wrap:nowrap;align-items:stretch;align-self:stretch;width:100%;max-width:100%;min-width:0;flex-shrink:1}.app-header-actions>button{width:100%;box-sizing:border-box}.lang-switcher{width:100%;min-width:0;align-self:stretch}}.lang-switcher{display:flex;align-items:stretch;align-self:stretch;min-height:40px;min-width:7rem;border-radius:10px;overflow:hidden;border:1px solid #d1d5db;background:#e5e7eb;box-sizing:border-box}.lang-btn{flex:1 1 0;min-width:0;padding:0 12px;font-size:.8rem;font-weight:500;border:none;border-radius:0;background:transparent;color:#6b7280;cursor:pointer;line-height:1.2;display:inline-flex;align-items:center;justify-content:center;transition:background .12s ease,color .12s ease,box-shadow .12s ease}.lang-btn+.lang-btn{border-left:1px solid #d1d5db}.lang-btn:hover:not(.active){background:#ffffff73;color:#374151}.lang-btn.active{background:#fff;color:#111827;font-weight:600;box-shadow:inset 0 0 0 1px #1118270f}.detection-card{display:flex;gap:14px;align-items:flex-start;border-radius:12px;padding:12px;background:#f9fafb;border:1px solid #d1d5db}.detection-card.matched{background:#dcfce7;border-color:#86efac}.detection-card.unknown{background:#fef3c7;border-color:#fcd34d}.detection-snap{width:120px;flex-shrink:0;display:grid;gap:4px;text-align:center}.detection-snap img{width:120px;height:120px;border-radius:12px;object-fit:cover}.snap-label{font-size:.78rem;color:#6b7280}.detection-info{flex:1;display:grid;gap:8px}.detection-info h3{margin:0;color:#111827}.detection-known{display:flex;align-items:center;gap:8px}.detection-known img{width:48px;height:48px;border-radius:8px;object-fit:cover}.modal-backdrop{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;background:#0f172a8c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-card{width:min(420px,100%);border-radius:16px;padding:20px;background:#fff;border:1px solid #e5e7eb;box-shadow:0 25px 50px -12px #00000040,0 0 0 1px #00000008;display:grid;gap:16px}.modal-compare{display:grid;grid-template-columns:1fr 1fr;gap:14px}.modal-figure{margin:0;display:grid;gap:8px;text-align:center;min-width:0;width:100%;align-self:start}.modal-figure figcaption{font-size:.78rem;color:#6b7280}.modal-thumb-wrap{position:relative;width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#f3f4f6}.modal-thumb-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}.modal-thumb-placeholder{position:absolute;inset:0;background:linear-gradient(135deg,#e5e7eb,#d1d5db)}.modal-thumb-placeholder.letter{display:grid;place-items:center;font-size:2.5rem;font-weight:700;color:#6b7280}.modal-name{margin:0;text-align:center;font-size:1.35rem;font-weight:700;color:#111827}.modal-actions{justify-content:center}.event-kind{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:999px}.event-kind.clock-in{background:#dcfce7;color:#166534}.event-kind.clock-out{background:#fef3c7;color:#92400e}.register-card{display:grid;gap:14px}.register-prompt{display:grid;gap:4px}.register-wrap{position:relative}.face-outline{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:55%;height:85%;border:3px dashed rgba(255,255,255,.75);border-radius:50%;pointer-events:none;box-shadow:0 0 0 9999px #00000040}.samples{display:grid;gap:8px}.samples-title{display:flex;justify-content:space-between;align-items:center}.samples-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.samples-grid figure{margin:0;display:grid;gap:4px;text-align:center;min-width:0}.samples-grid .sample-thumb{position:relative;width:100%;aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid #d1d5db;background:#f3f4f6}.samples-grid .sample-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}.samples-grid figcaption{font-size:.78rem;color:#6b7280}.register-save{display:grid;gap:10px}.register-duplicate-warning{border-radius:10px;padding:12px 14px;background:#fffbeb;border:1px solid #fcd34d;color:#78350f;font-size:.92rem;line-height:1.45}.register-duplicate-warning strong:first-child{display:block;font-size:.95rem;margin-bottom:6px;color:#92400e}.register-duplicate-warning p{margin:0 0 8px}.register-duplicate-warning p:last-child{margin-bottom:0}.register-save .name-field{display:grid;gap:6px}.register-save .name-field input{width:100%;box-sizing:border-box}.step-label{font-size:1.05rem;font-weight:600;color:#111827}.hold-bar{position:relative;height:6px;background:#e5e7eb;border-radius:999px;overflow:hidden;margin-top:6px}.hold-bar-fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#22c55e,#16a34a);transition:width .12s linear}.gestures{font-size:.78rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.register-wrap .camera-viewport video.mirror,.register-wrap .camera-viewport canvas.face-overlay.mirror{transform:scaleX(-1)}.register-wrap.flash:after{content:"";position:absolute;inset:0;background:#ffffffb3;pointer-events:none;animation:flash-fade .22s ease-out}@keyframes flash-fade{0%{opacity:1}to{opacity:0}}.item-row{display:flex;align-items:center;gap:10px}.avatar{width:44px;height:44px;border-radius:10px;background:#e5e7eb;color:#111827;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;font-weight:600}.avatar.small{width:36px;height:36px;border-radius:8px}.avatar img{width:100%;height:100%;object-fit:contain;object-position:center}.debug-log{background:#0f172a;color:#e2e8f0;border-radius:10px;padding:10px 12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8rem;max-height:280px;overflow-y:auto}.debug-log .dev-threshold{margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #334155}.debug-log .dev-threshold-label{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:#cbd5f5;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:.85rem}.debug-log .dev-threshold-label span{font-weight:500}.debug-log .dev-threshold-label input[type=number]{width:5.5rem;min-height:36px;padding:6px 8px;border-radius:8px;border:1px solid #475569;background:#1e293b;color:#f1f5f9;font:inherit}.debug-log .dev-threshold-hint{margin:6px 0 0;font-size:.75rem;line-height:1.35}.debug-log-header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:#cbd5f5;margin-bottom:6px}.debug-log-header .muted{flex:1;min-width:0}.debug-log-header button{margin-left:auto}.debug-log ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}.debug-log li{display:flex;gap:8px;align-items:flex-start;line-height:1.3}.debug-log .log-time{color:#94a3b8;flex-shrink:0}.debug-log .log-text{word-break:break-word}.debug-log .log-warn .log-text{color:#facc15}.debug-log .log-error .log-text{color:#f87171}.debug-log .muted{color:#94a3b8}