html,body,#root{width:100%;height:100%}body{color:#fff;-webkit-font-smoothing:antialiased;background:#0a0a0a;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow-y:auto}#root{flex-direction:column;display:flex}*{box-sizing:border-box;margin:0;padding:0}body{color:#fff;-webkit-font-smoothing:antialiased;background:#0a0a0a;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.app{flex-direction:column;min-height:100dvh;display:flex}.app-header{text-align:center;border-bottom:1px solid #222;padding:12px 16px}.app-header h1{letter-spacing:-.02em;font-size:18px;font-weight:600}.error-message{color:#ff6b6b;text-align:center;background:#ff3b3020;padding:12px 16px;font-size:14px}.camera-section{flex-direction:column;flex:1;display:flex}.camera-container{aspect-ratio:4/3;background:#111;width:100%;max-height:60dvh;position:relative;overflow:hidden}.camera-video{object-fit:cover;width:100%;height:100%;transform:scaleX(-1)}.camera-overlay{object-fit:cover;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0;transform:scaleX(-1)}.guide-overlay{aspect-ratio:1;pointer-events:none;width:55%;max-width:280px;transition:opacity .3s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.guide-circle{width:100%;height:100%}.countdown-text{color:#4caf50;text-shadow:0 2px 10px #00000080;font-size:80px;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.loading-overlay{background:#000c;flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex;position:absolute;inset:0}.loading-overlay p{color:#aaa;font-size:14px}.spinner{border:3px solid #333;border-top-color:#4caf50;border-radius:50%;width:36px;height:36px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.status-panel{flex-direction:column;gap:12px;padding:16px;display:flex}.guide-instruction{text-align:center;justify-content:center;align-items:center;gap:8px;font-size:54px;font-weight:600;display:flex}.step-badge{color:#fff;background:#4caf50;border-radius:30px;padding:6px 24px;font-size:36px;font-weight:700}.status-row{gap:8px;display:flex}.status-item{text-align:center;background:#1a1a1a;border:1px solid #333;border-radius:10px;flex:1;padding:16px;transition:border-color .2s,background .2s}.status-item.active{background:#4caf5010;border-color:#4caf50}.status-label{color:#888;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;font-size:33px;display:block}.status-value{font-size:42px;font-weight:600}.status-item.active .status-value{color:#4caf50}.status-detail{color:#666;margin-top:6px;font-family:monospace;font-size:30px;display:block}.thumbnail-row{justify-content:center;gap:8px;display:flex}.thumbnail{border:2px solid #333;border-radius:8px;width:60px;height:60px;overflow:hidden}.thumbnail img{object-fit:cover;width:100%;height:100%;transform:scaleX(-1)}.result-section{flex-direction:column;flex:1;align-items:center;gap:20px;padding:24px 16px;display:flex}.result-section h2{font-size:24px;font-weight:700}.result-grid{flex-direction:column;gap:12px;width:100%;display:flex}.result-card{background:#1a1a1a;border:1px solid #333;border-radius:12px;overflow:hidden}.result-card img{object-fit:cover;width:100%;display:block;transform:scaleX(-1)}.result-card p{text-align:center;color:#aaa;padding:8px;font-size:12px}.save-btn{color:#fff;cursor:pointer;background:#2196f3;border:none;border-radius:12px;width:100%;padding:14px 32px;font-size:16px;font-weight:600;transition:opacity .2s}.save-btn:active{opacity:.8}.reset-btn{color:#fff;cursor:pointer;background:#4caf50;border:none;border-radius:12px;padding:14px 32px;font-size:16px;font-weight:600;transition:opacity .2s}.reset-btn:active{opacity:.8}@media (width<=480px){.guide-instruction{gap:6px;font-size:28px}.step-badge{padding:4px 12px;font-size:18px}.status-row{flex-wrap:wrap}.status-item{flex:calc(50% - 4px);padding:10px}.status-label{margin-bottom:4px;font-size:18px}.status-value{font-size:24px}.status-detail{font-size:16px}.result-section{gap:16px;padding:20px 12px}.result-section h2{font-size:20px}.result-grid{gap:8px}.result-card p{padding:6px;font-size:11px}.reset-btn{width:100%;padding:16px;font-size:18px}}
