*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}.app{min-height:100vh}.config-setup{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem}.config-container{background:#fff;border-radius:16px;padding:3rem;max-width:800px;width:100%;box-shadow:0 20px 60px #0000004d}.config-container h1{font-size:2.5rem;color:#2c3e50;margin-bottom:.5rem;text-align:center}.config-container .subtitle{color:#7f8c8d;text-align:center;margin-bottom:2rem;font-size:1.1rem}.config-options{display:flex;flex-direction:column;gap:2rem;margin-bottom:2rem}.config-group h3{color:#2c3e50;margin-bottom:1rem;font-size:1.3rem}.radio-group{display:flex;flex-direction:column;gap:1rem}.radio-option{display:flex;align-items:flex-start;padding:1.25rem;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s ease}.radio-option:hover{border-color:#667eea;background-color:#f8f9ff}.radio-option.selected{border-color:#667eea;background-color:#f0f2ff}.radio-option input[type=radio]{margin-top:.25rem;margin-right:1rem;cursor:pointer}.option-content strong{display:block;color:#2c3e50;font-size:1.1rem;margin-bottom:.25rem}.option-content p{color:#7f8c8d;font-size:.9rem}.btn-primary,.btn-secondary{padding:.875rem 2rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-large{width:100%;padding:1.25rem;font-size:1.2rem}.btn-secondary{background:#fff;color:#667eea;border:2px solid #667eea}.btn-secondary:hover{background:#f0f2ff}.btn-secondary:disabled{opacity:.5;cursor:not-allowed}.refraction-workflow{display:flex;flex-direction:column;height:100vh;background:#fff}.workflow-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:1.5rem 2rem;box-shadow:0 2px 8px #0000001a}.workflow-header h1{font-size:1.8rem;margin-bottom:.5rem}.header-info{display:flex;gap:2rem;font-size:.9rem;opacity:.9;margin-bottom:1rem}.progress-tracker{margin-top:1.5rem;padding:1rem 0}.progress-stages{display:flex;align-items:center;justify-content:space-between;max-width:900px}.progress-stage{display:flex;flex-direction:column;align-items:center;gap:.5rem;position:relative}.stage-indicator{width:48px;height:48px;border-radius:50%;background:#fff3;border:3px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;transition:all .3s ease}.progress-stage.active .stage-indicator{background:#fff;border-color:#fff;box-shadow:0 0 0 4px #ffffff4d}.progress-stage.complete .stage-indicator{background:#27ae60;border-color:#27ae60}.stage-number{font-size:1.2rem;font-weight:700;color:#fffc}.progress-stage.active .stage-number{color:#667eea}.stage-label{font-size:.75rem;font-weight:600;text-align:center;opacity:.7;max-width:80px}.progress-stage.active .stage-label{opacity:1;font-size:.85rem}.progress-connector{flex:1;height:3px;background:#ffffff4d;margin:0 .5rem 2rem;transition:all .3s ease}.progress-connector.complete{background:#27ae60}.workflow-content{display:flex;flex:1;overflow:hidden}.left-panel{flex:1;padding:2rem;overflow-y:auto;background:#f8f9fa}.right-panel{width:450px;padding:2rem;background:#fff;border-left:2px solid #e0e0e0;overflow-y:auto}.step-info h2{color:#2c3e50;font-size:1.5rem;margin-bottom:1rem}.instructions{background:#fff;padding:1.5rem;border-radius:8px;margin-bottom:1.5rem;line-height:1.6;color:#34495e;border-left:4px solid #667eea}.adjustment-instructions{background:#fff;padding:1.5rem;border-radius:8px;margin-bottom:1.5rem}.adjustment-instructions h3{color:#2c3e50;margin-bottom:1rem}.adjustments-list{display:flex;flex-direction:column;gap:1rem}.adjustment-item{display:flex;align-items:center;gap:1rem;padding:1rem;background:#f8f9fa;border-radius:6px}.adjustment-icon{width:60px;height:60px}.adjustment-icon-svg{width:100%;height:100%}.adjustment-icon-svg.rotate-cw{animation:rotate-cw 2s ease-in-out infinite}@keyframes rotate-cw{0%,to{transform:rotate(0)}50%{transform:rotate(45deg)}}.adjustment-details{flex:1}.adjustment-dial{font-weight:600;color:#667eea;font-size:.85rem;margin-bottom:.25rem}.adjustment-action{color:#2c3e50}.adjustment-value{color:#7f8c8d;font-size:.9rem;margin-top:.25rem}.phoropter-visualization{background:#fff;padding:1.5rem;border-radius:8px;margin-bottom:1.5rem}.phoropter-svg.animated line,.phoropter-svg.animated circle{transition:all .5s ease}.manual-controls{background:#fff;padding:1.5rem;border-radius:8px}.manual-controls h3{color:#2c3e50;margin-bottom:1rem}.control-group{display:flex;gap:1rem}.control-group label{display:flex;flex-direction:column;gap:.5rem;flex:1;color:#2c3e50;font-weight:500}.control-group input{padding:.5rem;border:2px solid #e0e0e0;border-radius:4px;font-size:1rem}.control-group input:focus{outline:none;border-color:#667eea}.input-section{background:#f8f9fa;padding:1.5rem;border-radius:8px}.input-section h3{color:#2c3e50;margin-bottom:1rem}.instruction{background:#fff;padding:1rem;border-radius:6px;margin-bottom:1rem;color:#34495e;border-left:3px solid #667eea}.clinical-note{background:#fff9e6;padding:1rem;border-radius:6px;margin:1rem 0;font-size:.9rem;color:#8b6914;border-left:3px solid #f39c12}.comparison-info{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.5rem;background:#fff;border-radius:8px;margin:1.5rem 0;border:2px solid #e0e0e0}.option-info{flex:1;text-align:center}.option-label{font-weight:600;color:#667eea;font-size:.9rem;margin-bottom:.5rem}.option-value{font-size:1.8rem;font-weight:700;color:#2c3e50;margin:.5rem 0;font-family:Courier New,monospace}.option-desc{font-size:.85rem;color:#7f8c8d;font-style:italic}.vs-divider{font-size:1.2rem;font-weight:600;color:#95a5a6;padding:0 1rem}.response-buttons{display:flex;gap:1rem;margin-top:1rem}.response-btn{flex:1;padding:1.5rem;border:2px solid #e0e0e0;border-radius:8px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:1rem}.response-btn:hover{border-color:#667eea;transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.response-btn.selected{border-color:#667eea;background:#f0f2ff;font-weight:600}.option-number{display:block;font-size:2rem;font-weight:700;color:#667eea;margin-bottom:.5rem}.option-label{display:block;color:#2c3e50}.response-explanation{margin-top:1.5rem;padding:1rem 1.5rem;border-radius:8px;animation:slideIn .3s ease}.explanation{margin:0;font-size:1rem;font-weight:500;display:flex;align-items:center;gap:.5rem}.explanation.reducing{background:#e3f2fd;color:#1565c0;padding:1rem;border-radius:6px;border-left:4px solid #1976d2}.explanation.endpoint{background:#e8f5e9;color:#2e7d32;padding:1rem;border-radius:6px;border-left:4px solid #43a047}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.chart-display{background:#fff;padding:1.5rem;border-radius:8px;margin-bottom:1rem;max-height:300px;overflow-y:auto}.snellen-line,.tumbling-e-line{padding:.75rem;margin-bottom:.5rem;border-radius:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:1rem}.snellen-line:hover,.tumbling-e-line:hover{background:#f8f9fa}.snellen-line.selected,.tumbling-e-line.selected{background:#f0f2ff;border:2px solid #667eea}.line-label{font-weight:600;color:#2c3e50;min-width:70px}.line-letters{font-family:monospace;font-size:1.2rem;color:#34495e}.e-letters{display:flex;gap:.5rem}.input-controls{display:flex;flex-direction:column;gap:1rem}.input-controls label{display:flex;align-items:center;gap:.5rem;color:#2c3e50;font-weight:500}.input-controls select,.input-controls input[type=number]{padding:.5rem;border:2px solid #e0e0e0;border-radius:4px;font-size:1rem;margin-left:.5rem}.jcc-visualization-container{background:#fff;padding:1rem;border-radius:8px;margin-bottom:1rem}.jcc-visualization-container svg{transition:none}.jcc-visualization-container line,.jcc-visualization-container path{transition:none}.jcc-controls{display:flex;flex-direction:column;gap:1rem;margin-bottom:1rem}.flip-btn{padding:1rem;background:#3498db;color:#fff;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease}.flip-btn:hover{background:#2980b9;transform:translateY(-2px)}.confidence-selector{background:#fff;padding:1rem;border-radius:6px}.confidence-selector label{display:block;color:#2c3e50;margin-bottom:.5rem;font-weight:500}.confidence-buttons{display:flex;gap:.5rem}.confidence-btn{flex:1;padding:.75rem;border:2px solid #e0e0e0;border-radius:4px;background:#fff;cursor:pointer;transition:all .2s ease}.confidence-btn:hover{border-color:#667eea}.confidence-btn.selected{border-color:#667eea;background:#f0f2ff;font-weight:600}.jcc-info{background:#fff;padding:1rem;border-radius:8px;margin-bottom:1rem;border-left:4px solid #e67e22}.jcc-info p{margin:.5rem 0;color:#2c3e50}.jcc-instruction{font-style:italic;color:#7f8c8d;font-size:.95rem}.jcc-feedback{margin-top:1rem;padding:1rem;background:#e3f2fd;color:#1565c0;border-radius:6px;border-left:4px solid #1976d2;animation:slideIn .3s ease}.jcc-feedback.endpoint{background:#e8f5e9;color:#2e7d32;border-left-color:#43a047}.duochrome-chart{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}.duochrome-side{text-align:center}.color-background{padding:2rem;border-radius:8px;margin-bottom:.5rem}.test-letters{color:#fff;font-size:1.2rem;font-weight:700;line-height:1.8;text-shadow:1px 1px 2px rgba(0,0,0,.3)}.side-label{font-weight:600;color:#2c3e50;font-size:1.1rem}.red-btn{background:#ffe6e6;border-color:#e74c3c}.red-btn.selected{background:#fcc;border-color:#c0392b}.green-btn{background:#e6ffe6;border-color:#27ae60}.green-btn.selected{background:#cfc;border-color:#229954}.workflow-footer{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;background:#fff;border-top:2px solid #e0e0e0;box-shadow:0 -2px 8px #0000000d}.step-progress{color:#7f8c8d;font-weight:500}.refraction-summary{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem;background:linear-gradient(135deg,#667eea,#764ba2)}.summary-container{background:#fff;border-radius:16px;padding:3rem;max-width:900px;width:100%;box-shadow:0 20px 60px #0000004d}.summary-container h1{font-size:2.5rem;color:#2c3e50;margin-bottom:2rem;text-align:center}.prescription-results{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:2rem}.eye-result h2{color:#667eea;font-size:1.5rem;margin-bottom:1rem}.prescription{background:#f8f9fa;padding:1.5rem;border-radius:8px}.rx-value{display:flex;justify-content:space-between;padding:.75rem 0;border-bottom:1px solid #e0e0e0}.rx-value:last-child{border-bottom:none}.rx-value label{color:#7f8c8d;font-weight:500}.rx-value span{color:#2c3e50;font-weight:600;font-size:1.1rem}.summary-actions{text-align:center;margin-top:2rem}.no-input{text-align:center;padding:2rem}.no-input p{color:#7f8c8d;margin-bottom:1.5rem}.clinical-info-panel{background:linear-gradient(135deg,#667eea15,#764ba215);border:2px solid #667eea;border-radius:8px;margin-bottom:1.5rem;overflow:hidden}.info-header{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;cursor:pointer;transition:background .2s ease;-webkit-user-select:none;user-select:none}.info-header:hover{background:#667eea1a}.info-icon{font-size:1.5rem}.info-title{flex:1;font-weight:600;color:#2c3e50;font-size:1.05rem}.expand-icon{color:#667eea;font-size:.9rem;transition:transform .2s ease}.info-content{padding:0 1.25rem 1.25rem 3.5rem;color:#34495e;line-height:1.7;animation:slideDown .3s ease}.info-content p{margin:0}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.clock-dial-input{display:flex;flex-direction:column;gap:1.5rem}.clock-dial-input h3{color:#2c3e50;margin-bottom:.5rem}.clinical-explanation{background:#e8f4f8;padding:1rem;border-radius:6px;border-left:4px solid #3498db}.clinical-explanation p{margin:.5rem 0;color:#2c3e50;font-size:.95rem;line-height:1.6}.clinical-explanation strong{color:#2980b9}.clock-dial-visualization-container{background:#fff;padding:1rem;border-radius:8px;box-shadow:0 2px 8px #0000001a}.clock-dial-svg{width:100%;height:auto;max-width:400px;margin:0 auto;display:block}.clock-selection{background:#fff;padding:1.5rem;border-radius:8px}.clock-selection label{display:block;color:#2c3e50;font-weight:600;margin-bottom:1rem}.clock-buttons{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem}.clock-btn{padding:1rem;border:2px solid #e0e0e0;border-radius:6px;background:#fff;cursor:pointer;font-size:1.1rem;font-weight:600;color:#2c3e50;transition:all .2s ease}.clock-btn:hover{border-color:#667eea;background:#f8f9ff;transform:translateY(-2px)}.clock-btn.selected{border-color:#667eea;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 12px #667eea4d}.axis-calculation{background:#f0f9ff;padding:1.25rem;border-radius:8px;border-left:4px solid #27ae60}.axis-calculation p{margin:.5rem 0;color:#2c3e50}.axis-calculation strong{color:#27ae60;font-size:1.2rem}.calculation-note{font-size:.9rem;color:#7f8c8d;font-style:italic}@media (max-width: 1024px){.workflow-content{flex-direction:column}.right-panel{width:100%;border-left:none;border-top:2px solid #e0e0e0}.prescription-results{grid-template-columns:1fr}}@media (max-width: 640px){.config-container{padding:2rem}.control-group,.response-buttons{flex-direction:column}.duochrome-chart{grid-template-columns:1fr}}