*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary: #f8fafc;--bg-secondary: #ffffff;--accent-primary: #4f46e5;--accent-success: #059669;--accent-warning: #d97706;--accent-danger: #dc2626;--accent-cyan: #0891b2;--accent-purple: #7c3aed;--text-primary: #1e293b;--text-secondary: #475569;--text-dim: #94a3b8;--glass-bg: rgba(0, 0, 0, .02);--glass-border: rgba(0, 0, 0, .08);--glass-blur: blur(12px);--ring-size: min(420px, 85vw);--transition-fast: .2s cubic-bezier(.4, 0, .2, 1);--transition-med: .4s cubic-bezier(.4, 0, .2, 1)}html,body{width:100%;height:100dvh;height:100%;font-family:Inter,Noto Sans TC,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);overflow:hidden;-webkit-user-select:none;user-select:none;background-image:radial-gradient(ellipse at 15% 0%,rgba(79,70,229,.06) 0%,transparent 60%),radial-gradient(ellipse at 85% 100%,rgba(124,58,237,.05) 0%,transparent 60%),radial-gradient(ellipse at 50% 50%,rgba(8,145,178,.03) 0%,transparent 60%);background-attachment:fixed}@supports (height: 100dvh){html,body{height:100dvh}}#app{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));position:relative;overflow-y:auto;-webkit-overflow-scrolling:touch}.top-toolbar{display:flex;align-items:center;justify-content:center;width:100%;max-width:480px;gap:16px;margin-bottom:6px;background:#ffffffb3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:6px;box-shadow:0 4px 16px #0000000f}.top-toolbar .btn-start{width:auto;padding:8px 16px;font-size:14px;flex:0 0 auto;border-radius:10px}.toolbar-progress{display:flex;align-items:center;gap:8px;flex-shrink:0}.progress-ring-container{position:relative;width:44px;height:44px}.progress-ring{transform:rotate(-90deg);width:44px;height:44px}.progress-ring-bg{fill:none;stroke:var(--glass-border);stroke-width:3}.progress-ring-fill{fill:none;stroke:var(--accent-primary);stroke-width:3;stroke-linecap:round;stroke-dasharray:188.5;stroke-dashoffset:188.5;transition:stroke-dashoffset 1s var(--transition-med)}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:14px;font-weight:800;font-family:Inter,sans-serif;color:var(--text-primary)}.step-label{font-size:12px;color:var(--text-secondary);font-weight:600;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.video-container{position:relative;width:var(--ring-size);height:var(--ring-size);border-radius:24px;overflow:hidden;margin:20px 0;flex-shrink:0;background:#000;border:1px solid rgba(0,0,0,.1);box-shadow:0 8px 24px #0000001f}.video-ring{position:absolute;top:0;right:0;bottom:0;left:0;border:2px solid rgba(0,0,0,.08);z-index:2;pointer-events:none;transition:all var(--transition-med)}.video-ring.pulse{border-color:#4f46e580;box-shadow:inset 0 0 24px #4f46e526,0 0 16px #4f46e51a}.video-ring.good{border-color:var(--accent-success);box-shadow:inset 0 0 30px #10b98133,0 0 20px #10b98126}.video-ring.bad{border-color:var(--accent-danger);box-shadow:inset 0 0 30px #ef444433,0 0 20px #ef444426}.video-ring.recording{border-color:var(--accent-danger);box-shadow:inset 0 0 40px #ef44444d;animation:breathingGlow 2s ease-in-out infinite}@keyframes breathingGlow{0%,to{box-shadow:inset 0 0 40px #ef44444d,0 0 20px #ef444433}50%{box-shadow:inset 0 0 60px #ef444480,0 0 40px #ef444466}}.video-ring.done{border-color:var(--accent-success);box-shadow:inset 0 0 40px #10b9814d,0 0 20px #10b98133}#videoEl{position:absolute;top:0;left:0;width:100%;height:100%;display:block;object-fit:cover;background:#000;z-index:0}#videoEl.mirrored{transform:scaleX(-1)}.btn-switch-camera{position:absolute;top:20px;left:20px;z-index:3;display:flex;align-items:center;justify-content:center;background:#0006;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);width:40px;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.1);color:#fff;font-size:18px;cursor:pointer;transition:all var(--transition-fast);box-shadow:0 4px 12px #0003}.btn-switch-camera:hover{background:#ffffff26;transform:scale(1.05)}.btn-switch-camera:active{transform:scale(.95)}#overlayCanvas{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none}.rec-indicator{display:none;position:absolute;top:20px;right:20px;z-index:3;align-items:center;gap:8px;background:#0006;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:6px 14px;border-radius:12px;border:1px solid rgba(239,68,68,.2)}.rec-indicator.show{display:flex}.rec-dot{width:8px;height:8px;background:var(--accent-danger);border-radius:50%;animation:recBlink 1s ease-in-out infinite;box-shadow:0 0 10px var(--accent-danger)}@keyframes recBlink{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}.rec-timer{font-size:12px;font-weight:700;font-family:Inter,monospace;color:#fff;letter-spacing:.5px}.direction-arrow{display:none;position:absolute;top:50%;z-index:3;transform:translateY(-50%);font-size:clamp(60px,15vw,84px);color:#fff;text-shadow:0 4px 16px rgba(0,0,0,.9),0 0 24px rgba(255,255,255,.5);animation:arrowBounce 1s cubic-bezier(.28,.84,.42,1) infinite;pointer-events:none}.direction-arrow.left{left:16px}.direction-arrow.right{right:16px}.direction-arrow.show{display:block}@keyframes arrowBounce{0%,to{opacity:.4;transform:translateY(-50%) translate(0) scale(.9)}50%{opacity:1;transform:translateY(-50%) translate(-12px) scale(1.1)}}.direction-arrow.right{animation-name:arrowBounceRight}@keyframes arrowBounceRight{0%,to{opacity:.4;transform:translateY(-50%) translate(0) scale(.9)}50%{opacity:1;transform:translateY(-50%) translate(12px) scale(1.1)}}.instruction-area{text-align:center;margin:8px 0;min-height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:420px;padding:0 16px}.instruction-main{font-size:20px;font-weight:700;margin-bottom:6px;color:var(--text-primary);line-height:1.3}.instruction-sub{font-size:14px;color:var(--text-secondary);font-weight:500;letter-spacing:.2px}.fade-in-up{animation:fadeInUp .4s cubic-bezier(.16,1,.3,1) forwards}@keyframes fadeInUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.status-area{display:flex;flex-direction:column;align-items:center;gap:12px;margin:12px 0;width:100%}.status-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 20px;border-radius:12px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 2px 8px #0000000f}.status-badge.ok{background:#05966914;color:#059669;border:1px solid rgba(5,150,105,.2);box-shadow:0 2px 8px #0596690f}.status-badge.warning{background:#d9770614;color:#b45309;border:1px solid rgba(217,119,6,.2);box-shadow:0 2px 8px #d977060f}.status-badge.error{background:#dc262614;color:#dc2626;border:1px solid rgba(220,38,38,.2);box-shadow:0 2px 8px #dc26260f}.angle-data{display:flex;gap:16px;justify-content:center}.angle-item{display:flex;flex-direction:column;align-items:center;gap:1px}.angle-label{font-size:10px;color:var(--text-dim);text-transform:uppercase;font-family:Inter,sans-serif;letter-spacing:1px}.angle-value{font-size:18px;font-weight:700;font-family:Inter,sans-serif;color:var(--text-primary);min-width:54px;text-align:center}.quality-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:2px}.quality-item{font-size:11px;color:var(--text-dim);display:flex;align-items:center;gap:4px}.quality-item.pass{color:var(--accent-green)}.quality-item.fail{color:var(--accent-red)}.download-section{margin-top:auto;padding:12px 0 24px;width:100%;max-width:360px}.btn-download{display:none;width:100%;padding:16px 24px;border:none;border-radius:16px;font-size:17px;font-weight:700;color:#fff;background:linear-gradient(135deg,#0f172a,#1e293b);cursor:pointer;font-family:Noto Sans TC,sans-serif;transition:all var(--transition-fast);box-shadow:0 4px 16px #0f172a33;position:relative;overflow:hidden}.btn-download:hover{transform:translateY(-2px);box-shadow:0 6px 24px #0f172a4d;background:linear-gradient(135deg,#1e293b,#334155)}.btn-download:active{transform:translateY(0)}.btn-download.show{display:block}.btn-download:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.15) 50%,transparent 60%);transform:translate(-100%);animation:btnShine 3s ease-in-out infinite}@keyframes btnShine{0%{transform:translate(-100%)}30%,to{transform:translate(100%)}}.btn-start{display:block;position:relative;overflow:hidden;width:100%;padding:14px 24px;border:1px solid rgba(79,70,229,.2);border-radius:12px;font-size:16px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--accent-primary) 0%,#4338ca 100%);cursor:pointer;font-family:Noto Sans TC,sans-serif;transition:all var(--transition-fast);box-shadow:0 4px 16px #4f46e540,inset 0 1px 1px #fff3;text-transform:uppercase;letter-spacing:1px}.btn-start:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.15) 50%,transparent 60%);transform:translate(-100%);animation:btnShine 4s ease-in-out infinite}.btn-start:hover{transform:translateY(-2px);box-shadow:0 6px 24px #4f46e559,inset 0 1px 1px #fff3;background:linear-gradient(135deg,var(--accent-purple) 0%,#6d28d9 100%)}.btn-start.hide{display:none}.btn-start-center{display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:12;width:min(150px,35vw);height:min(150px,35vw);border-radius:50%;border:3px solid rgba(255,255,255,.8);font-size:clamp(15px,4vw,20px);font-weight:700;color:#fff;background:linear-gradient(135deg,var(--accent-primary) 0%,#4338ca 100%);box-shadow:0 8px 32px #4f46e566,inset 0 2px 2px #fff3;cursor:pointer;font-family:Noto Sans TC,sans-serif;transition:all var(--transition-fast);align-items:center;justify-content:center;text-align:center;line-height:1.4;letter-spacing:1px;animation:pulse-start-btn 2s infinite}.btn-start-center:hover{transform:translate(-50%,-50%) scale(1.05);background:linear-gradient(135deg,var(--accent-purple) 0%,#6d28d9 100%);box-shadow:0 12px 40px #4f46e599,inset 0 2px 2px #ffffff4d}.btn-start-center:active{transform:translate(-50%,-50%) scale(.95)}@keyframes pulse-start-btn{0%{box-shadow:0 8px 32px #4f46e566,0 0 #4f46e5b3}70%{box-shadow:0 8px 32px #4f46e566,0 0 0 15px #4f46e500}to{box-shadow:0 8px 32px #4f46e566,0 0 #4f46e500}}.btn-capture{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;width:min(200px,45vw);height:min(200px,45vw);border-radius:50%;border:4px solid rgba(255,255,255,.4);font-size:clamp(16px,5vw,24px);font-weight:800;color:#fff;background:#ff1744d9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;font-family:Noto Sans TC,sans-serif;box-shadow:0 10px 40px #ff174499;transition:all .1s cubic-bezier(.4,0,.2,1);text-shadow:0 2px 4px rgba(0,0,0,.5)}.btn-capture:active{transform:translate(-50%,-50%) scale(.9);background:#ff1744}.btn-capture.show{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;animation:popIn .3s cubic-bezier(.175,.885,.32,1.275)}@keyframes popIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.flash-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;z-index:20;opacity:0;pointer-events:none}.flash-overlay.fire{animation:photoFlash .3s ease-out}@keyframes photoFlash{0%{opacity:1}to{opacity:0}}.countdown-overlay{display:none;position:absolute;top:0;right:0;bottom:0;left:0;z-index:15;background:#0006;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);align-items:center;justify-content:center;font-size:100px;font-weight:800;color:#fff;text-shadow:0 4px 16px rgba(0,0,0,.8);font-family:Inter,sans-serif}.countdown-overlay.show{display:flex}.countdown-overlay.pop{animation:countdownPop 1s cubic-bezier(.175,.885,.32,1.275)}@keyframes countdownPop{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.1)}to{opacity:0;transform:scale(1.5)}}.loading-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#ffffffeb;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:100;flex-direction:column;align-items:center;justify-content:center;gap:20px}.loading-overlay.show{display:flex}.spinner{width:48px;height:48px;border:4px solid rgba(0,0,0,.08);border-top-color:var(--accent-cyan);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-size:16px;color:var(--text-secondary);white-space:pre-line;text-align:center}.btn-share-download{background:transparent;border:none;color:var(--text-dim);font-size:13px;font-weight:500;cursor:pointer;font-family:Inter,sans-serif;text-decoration:underline;text-underline-offset:3px;padding:4px 8px;transition:color var(--transition-fast)}.btn-share-download:active{color:var(--text-secondary)}@media(max-width:480px){:root{--ring-size: 78vw}.instruction-main{font-size:18px}.angle-value{font-size:16px}#app{padding:8px 12px;padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))}.video-container{margin:8px 0}}@media(max-width:360px){:root{--ring-size: 75vw}.instruction-main{font-size:16px}.instruction-sub{font-size:12px}.instruction-area{min-height:auto;max-height:110px;overflow-y:auto;margin:4px 0;padding:0 8px}.btn-start{padding:10px 14px;font-size:14px}.top-toolbar{gap:8px;margin-bottom:4px}.progress-ring-container,.progress-ring{width:36px;height:36px}.progress-text{font-size:12px}.step-label{font-size:10px}.video-container{margin:6px 0}}@media(max-height:700px){:root{--ring-size: min(320px, 55vh)}.instruction-area{min-height:auto;margin:3px 0}}@media(max-height:600px){:root{--ring-size: min(250px, 45vh)}.instruction-area{min-height:auto;margin:2px 0}.instruction-main{font-size:16px}.video-container{margin:4px 0}.status-area{margin:4px 0;gap:6px}}@media(min-width:768px){:root{--ring-size: 420px}}.survey-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg-primary);background-image:radial-gradient(circle at 10% 20%,rgba(79,70,229,.04) 0%,transparent 40%),radial-gradient(circle at 90% 80%,rgba(124,58,237,.04) 0%,transparent 40%);z-index:90;overflow-y:auto;-webkit-overflow-scrolling:touch}.survey-overlay.show{display:block}.survey-container{max-width:520px;margin:0 auto;padding:20px 16px 100px;min-height:100%}.survey-header{text-align:center;margin-bottom:16px;position:sticky;top:0;background:var(--bg-primary);padding:16px 0 12px;z-index:2}.survey-title{font-size:20px;font-weight:800;color:var(--text-primary);margin-bottom:12px;letter-spacing:-.3px}.survey-progress-bar{height:4px;background:#0000000f;border-radius:4px;overflow:hidden;margin-bottom:8px}.survey-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-cyan),var(--accent-purple));border-radius:4px;transition:width .4s ease}.survey-progress-text{font-size:11px;color:var(--text-dim);font-weight:600;text-transform:uppercase;letter-spacing:1px}.survey-reminder{background:#d9770614;border:1px solid rgba(217,119,6,.25);border-radius:12px;padding:14px 18px;font-size:15.5px;color:#b45309;text-align:center;margin-bottom:20px;line-height:1.6}.survey-reminder b{color:#78350f}.survey-section-title{font-size:15px;font-weight:700;color:var(--text-secondary);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}.survey-section-desc{font-size:13px;color:var(--text-dim);margin-bottom:16px;line-height:1.5}.survey-card-group{display:flex;flex-direction:column;gap:8px}.survey-card{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:12px;cursor:pointer;transition:all var(--transition-fast);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.survey-card:active{transform:scale(.98)}.survey-card.selected{background:#4f46e50f;border-color:var(--accent-primary);box-shadow:0 0 12px #4f46e514}.survey-card-num{width:32px;height:32px;border-radius:50%;background:#00000008;border:2px solid rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--text-secondary);flex-shrink:0;transition:all var(--transition-fast)}.survey-card.selected .survey-card-num{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff}.survey-card-text{font-size:14px;color:var(--text-primary);line-height:1.4}.survey-card-text small{display:block;font-size:11px;color:var(--text-dim);margin-top:2px}.survey-likert-group{display:flex;flex-direction:column;gap:20px}.survey-likert-item{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:12px;padding:14px 16px}.survey-likert-question{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:12px;line-height:1.4}.survey-likert-question .q-num{color:var(--accent-cyan);font-weight:800;margin-right:6px}.survey-likert-options{display:flex;justify-content:space-between;align-items:flex-start;gap:4px}.survey-likert-opt-col{display:flex;flex-direction:column;align-items:center;flex:1;min-width:0;gap:8px}.survey-likert-opt-label{font-size:11px;color:#000;font-weight:700;text-align:center;line-height:1.25;word-break:break-word;white-space:normal;font-family:Noto Sans TC,sans-serif}.survey-likert-btn{width:40px;height:40px;border-radius:50%;border:2px solid rgba(0,0,0,.1);background:#00000008;color:var(--text-secondary);font-size:14px;font-weight:700;cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}.survey-likert-btn:active{transform:scale(.9)}.survey-likert-btn.selected{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff;box-shadow:0 0 12px #4f46e533}.survey-footer{position:fixed;bottom:0;left:0;right:0;padding:12px 16px 24px;background:linear-gradient(transparent,var(--bg-primary) 20%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px}.survey-error{font-size:13px;color:var(--accent-danger);font-weight:600;min-height:18px;text-align:center}.survey-footer-btns{display:flex;width:100%;max-width:520px;gap:12px}.btn-survey-next{flex:1;padding:16px 24px;border:none;border-radius:14px;font-size:16px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--accent-primary),var(--accent-purple));cursor:pointer;font-family:Noto Sans TC,sans-serif;transition:all var(--transition-fast);box-shadow:0 4px 20px #6366f14d;letter-spacing:1px;display:flex;align-items:center;justify-content:center}.btn-survey-next:hover{transform:translateY(-1px);box-shadow:0 6px 28px #6366f173}.btn-survey-next:active{transform:translateY(0)}.btn-survey-prev{flex:1;padding:16px 24px;border:2px solid var(--accent-primary);border-radius:14px;font-size:16px;font-weight:700;color:var(--accent-primary);background:transparent;cursor:pointer;font-family:Noto Sans TC,sans-serif;transition:all var(--transition-fast);letter-spacing:1px;display:flex;align-items:center;justify-content:center}.btn-survey-prev:hover{background:#6366f114;transform:translateY(-1px)}.btn-survey-prev:active{transform:translateY(0)}.onboarding-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg-color, #f8fafc);z-index:2000;display:flex;justify-content:center;align-items:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:20px 10px;opacity:0;pointer-events:none;transition:opacity .4s ease;font-family:Noto Sans TC,sans-serif}.onboarding-overlay.active{opacity:1;pointer-events:auto}.glass-card{background:#ffffffd9;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(0,0,0,.08);border-radius:20px;padding:32px 24px;width:100%;max-width:600px;margin:auto;box-shadow:0 8px 24px #00000014,inset 0 1px #ffffff80;animation:fadeInUp .5s ease backwards;color:var(--text-primary)}.onboarding-title{font-size:clamp(21px,5.2vw,25px);font-weight:700;margin-bottom:10px;text-align:center;background:linear-gradient(135deg,#4f46e5,#7c3aed);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.consent-scroll-area{max-height:40vh;overflow-y:auto;padding-right:12px;font-size:14px;line-height:1.6;color:#475569;margin-bottom:24px}.consent-scroll-area h3{color:var(--text-primary);font-size:16px;margin-top:16px;margin-bottom:8px}.consent-scroll-area ul{padding-left:20px}.consent-scroll-area li{margin-bottom:6px}.checkbox-container{display:flex;align-items:flex-start;gap:12px;margin-bottom:24px;cursor:pointer;background:#00000005;padding:16px;border-radius:12px;border:1px solid rgba(0,0,0,.06);transition:background .2s}.checkbox-container:hover{background:#0000000a}.checkbox-container input{width:20px;height:20px;margin-top:2px;accent-color:var(--accent-primary)}.checkbox-text{font-size:14px;font-weight:500;color:var(--text-primary)}.form-group{margin-bottom:20px}.form-label{display:block;font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:8px}.form-label span.optional{font-weight:600;color:#1e293b;font-size:12px;margin-left:8px}.form-input{width:100%;padding:14px 16px;background:#00000008;border:1px solid rgba(0,0,0,.1);border-radius:12px;color:var(--text-primary);font-size:16px;font-family:inherit;transition:all .2s;box-sizing:border-box}.form-input:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px #4f46e526}.form-row{display:flex;gap:16px}.form-row .form-group{flex:1}.radio-group{display:flex;gap:10px;flex-wrap:wrap}.radio-card{flex:1;position:relative}.radio-card input{position:absolute;opacity:0;cursor:pointer}.radio-card label{display:block;padding:12px;text-align:center;background:#00000008;border:1px solid rgba(0,0,0,.1);border-radius:12px;color:var(--text-secondary);font-weight:500;font-size:14px;cursor:pointer;transition:all .2s}.radio-card input:checked+label{background:#4f46e514;border-color:var(--accent-primary);color:var(--text-primary)}.bmi-display{font-size:13px;color:var(--text-secondary);margin-top:6px;display:block}.bmi-value{font-weight:700;color:var(--accent-primary)}.form-error{color:#f43f5e;font-size:13px;margin-top:6px;display:none}.form-error.visible{display:block}.btn-primary{width:100%;padding:16px 24px;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;border:none;border-radius:14px;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 4px 16px #4f46e540;transition:all .2s;font-family:inherit;margin-top:10px}.btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.btn-primary:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 6px 20px #4f46e559}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOutLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-30px)}}@keyframes fadeInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}.camera-flash:after{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;z-index:9999;pointer-events:none;animation:flashEffect .35s ease-out forwards}@keyframes flashEffect{0%{opacity:0}15%{opacity:.85}to{opacity:0}}.confirm-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#ffffffd9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:9999;opacity:0;pointer-events:none;transition:opacity .3s cubic-bezier(.4,0,.2,1);padding:24px}.confirm-overlay.show{opacity:1;pointer-events:auto}.confirm-container{background:#fffffff2;border:1px solid rgba(0,0,0,.08);border-radius:24px;padding:28px 24px;width:100%;max-width:360px;box-shadow:0 12px 32px #0000001a;text-align:center;transform:scale(.9);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}.confirm-overlay.show .confirm-container{transform:scale(1)}.confirm-icon{font-size:40px;margin-bottom:16px;animation:pulseWarning 2s infinite}@keyframes pulseWarning{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.confirm-title{font-size:20px;font-weight:700;color:var(--text-primary);margin-bottom:8px}.confirm-message{font-size:14px;color:var(--text-secondary);line-height:1.5;margin-bottom:24px}.confirm-buttons{display:flex;gap:12px}.confirm-buttons button{flex:1;padding:12px 20px;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s ease;border:none}.btn-confirm-cancel{background:#0000000a;color:var(--text-primary)}.btn-confirm-cancel:hover,.btn-confirm-cancel:active{background:#00000014}.btn-confirm-ok{background:linear-gradient(135deg,var(--accent-purple),var(--accent-primary));color:#fff;box-shadow:0 4px 12px #7c3aed33}.btn-confirm-ok:hover,.btn-confirm-ok:active{transform:translateY(-1px);box-shadow:0 6px 16px #7c3aed4d}.tutorial-card{width:100%;max-width:450px;height:auto;max-height:calc(100vh - 20px);min-height:0;display:flex;flex-direction:column;justify-content:space-between;padding:16px 20px!important;box-sizing:border-box;overflow-y:auto}.tutorial-slides-container{flex-grow:1;position:relative;overflow:hidden;margin:12px 0;display:flex;align-items:center;justify-content:center;width:100%}.tutorial-slide{display:none;width:100%;animation:fadeInRight .35s cubic-bezier(.4,0,.2,1) forwards}.tutorial-slide.active{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;width:100%;max-height:100%;box-sizing:border-box}.slide-title{font-size:clamp(22px,6vw,26px);font-weight:700;color:var(--accent-primary);margin:0;letter-spacing:.5px}.slide-image-wrapper{width:72vw;max-width:320px;aspect-ratio:1;height:auto;border-radius:20px;overflow:hidden;border:1px solid rgba(0,0,0,.08);background:#00000005;box-shadow:0 8px 24px #00000014;display:flex;align-items:center;justify-content:center;flex-shrink:0}.slide-img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.slide-img:hover{transform:scale(1.05)}.slide-desc{font-size:clamp(16px,4.5vw,18px);font-weight:600;color:var(--text-primary);line-height:1.5;margin:4px 0 0;text-align:center;max-width:360px;font-family:Noto Sans TC,sans-serif;letter-spacing:.5px}.text-warning-desc{color:#f87171;text-shadow:0 0 12px rgba(248,113,113,.15)}.tutorial-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(0,0,0,.06);padding-top:10px;margin-top:0;width:100%;flex-shrink:0}.slide-dots{display:flex;gap:8px}.dot{width:8px;height:8px;border-radius:50%;background:#0000001f;cursor:pointer;transition:all var(--transition-fast)}.dot:hover{background:#00000040}.dot.active{background:var(--accent-primary);box-shadow:0 0 8px var(--accent-primary);width:18px;border-radius:4px}.tutorial-buttons{display:flex;gap:8px;align-items:center}@keyframes fadeInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.highlight-yellow{background:#fef08a;color:#1e1b4b;padding:2px 6px;border-radius:4px;font-weight:700}.checklist-container{display:flex;flex-direction:column;gap:8px;width:100%;text-align:left;margin-top:4px;overflow-y:auto;max-height:none;padding-right:4px}.checklist-item{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:clamp(14px,3.8vw,15.5px);color:var(--text-secondary);line-height:1.3;padding:6px 10px;border-radius:10px;border:1px solid rgba(0,0,0,.05);background:#00000005;transition:all .2s ease}.checklist-item:hover{background:#0000000a;border-color:#0000001a}.checklist-item input[type=checkbox]{margin-top:0;accent-color:var(--accent-primary);width:16px;height:16px;cursor:pointer}.checklist-item.checked{border-color:#10b9814d;background:#10b9810d;color:var(--text-primary)}@keyframes refFadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.ref-preview-card{display:none;flex-direction:column;align-items:center;width:auto;background:#00000005;border:1px solid rgba(0,0,0,.06);border-radius:20px;padding:10px 12px;box-shadow:0 4px 12px #0000000f;animation:refFadeInUp .4s cubic-bezier(.16,1,.3,1) forwards}.ref-preview-card.show{display:flex}.ref-preview-label{font-size:14px;font-weight:700;color:var(--accent-cyan);margin-bottom:8px;letter-spacing:.5px;text-shadow:0 1px 2px rgba(0,0,0,.4);white-space:nowrap}.ref-preview-img{width:clamp(140px,32vh,180px);height:clamp(140px,32vh,180px);border-radius:22px;object-fit:cover;border:2px solid rgba(0,0,0,.08);background:#00000005}.checkbox-group{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}.checkbox-card{position:relative}.checkbox-card input{position:absolute;opacity:0;cursor:pointer;width:100%;height:100%;top:0;right:0;bottom:0;left:0;z-index:1}.checkbox-card label{display:block;padding:12px 10px;text-align:center;background:#00000008;border:1px solid rgba(0,0,0,.08);border-radius:12px;color:var(--text-secondary);font-weight:500;font-size:14px;cursor:pointer;transition:all .2s;-webkit-user-select:none;user-select:none}.checkbox-card input:checked+label{background:#4f46e514;border-color:var(--accent-primary);color:var(--text-primary);box-shadow:0 0 8px #4f46e51a}.mst-container{background:#00000008;border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:16px;margin-top:6px}.mst-color-bar{display:flex;gap:6px;width:100%;overflow-x:auto;padding-bottom:8px}.mst-block{flex:1;min-width:32px;height:48px;border-radius:8px;position:relative;border:2px solid transparent;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 6px #00000026}.mst-block input{position:absolute;opacity:0;cursor:pointer;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:2}.mst-block label{font-size:14px;font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8),0 0 4px rgba(0,0,0,.5);cursor:pointer;z-index:1;pointer-events:none;-webkit-user-select:none;user-select:none}.mst-block:hover{transform:translateY(-2px);box-shadow:0 6px 12px #0000004d}.mst-block:has(input:checked){border-color:var(--accent-primary);transform:scale(1.08) translateY(-2px);box-shadow:0 4px 12px #4f46e566;z-index:3}.mst-selected-label{font-size:13px;color:var(--text-secondary);margin-top:8px;text-align:center;font-weight:600}.mst-selected-label span{color:var(--accent-primary);font-weight:800}.icon{display:inline-flex;align-items:center;justify-content:center;vertical-align:-.15em;line-height:1;flex-shrink:0}.icon svg{width:1em;height:1em;display:block}.btn-switch-camera .icon{font-size:18px}.btn-download .icon{font-size:20px;margin-right:6px}.btn-start .icon{font-size:16px;margin-right:4px}.confirm-icon .icon{font-size:48px;color:var(--accent-warning)}.status-badge .icon{font-size:16px}.survey-reminder .icon{font-size:16px;color:var(--accent-warning);margin-right:4px}.onboarding-title .icon{font-size:24px;margin-right:6px}.instruction-main .icon{font-size:22px;color:var(--accent-success);margin-right:4px}.btn-survey-next .icon{font-size:16px;margin-right:4px}.collection-success-card{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--bg-secondary);z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;animation:cardFadeIn .5s cubic-bezier(.4,0,.2,1) forwards}@keyframes cardFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.success-icon-wrapper{width:80px;height:80px;border-radius:50%;background:#10b9811a;border:2px solid var(--accent-success);display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:0 0 20px #10b98133}.success-checkmark{width:40px;height:40px;color:var(--accent-success);stroke-dasharray:100;stroke-dashoffset:100;animation:drawCheckmark 1s ease-in-out .3s forwards}@keyframes drawCheckmark{to{stroke-dashoffset:0}}.success-badge-title{font-size:24px;font-weight:800;color:var(--text-primary);margin-bottom:20px;letter-spacing:1px;background:linear-gradient(135deg,var(--accent-primary) 0%,var(--accent-purple) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.success-checklist{display:flex;flex-direction:column;gap:12px;width:100%;max-width:280px;background:#00000005;border:1px solid var(--glass-border);border-radius:16px;padding:16px;margin-bottom:8px}.checklist-item{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-secondary);font-weight:500;text-align:left}.checklist-item .check-icon{color:var(--accent-success);font-weight:700;font-size:16px}.btn-download.pulse-glow{animation:downloadPulse 2s infinite;border:1px solid rgba(15,23,42,.5);background:linear-gradient(135deg,#0f172a,#1e293b)}@keyframes downloadPulse{0%{box-shadow:0 0 #0f172a66}70%{box-shadow:0 0 0 12px #0f172a00}to{box-shadow:0 0 #0f172a00}}