.refraction-container{display:flex;flex-direction:column;align-items:center;padding:20px;font-family:Poppins,sans-serif;background:linear-gradient(135deg,#f0f7ff,#e6effd);min-height:100vh}.refraction-title{font-size:36px;font-weight:600;margin-bottom:25px;text-align:center;color:#1e293b;letter-spacing:-.5px}.refraction-card{background:#fff;padding:40px;border-radius:10px;border:1px solid #ddd;width:100%;max-width:450px}.input-group{margin-bottom:20px;display:flex;flex-direction:column}.input-group label{font-weight:500;margin-bottom:8px;color:#475569;font-size:14px;text-transform:uppercase;letter-spacing:.5px}.input-group input{padding:14px;border-radius:10px;border:1px solid #e2e8f0;font-size:16px;transition:all .3s ease;background:#f8fafc}.input-group input:focus{outline:none;border-color:#2563eb;background:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.1)}.calculate-btn{width:100%;padding:15px;background:#2563eb;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500;font-size:16px;margin-top:15px;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px rgba(37,99,235,.2);font-family:Poppins}.calculate-btn:hover{background:#1d4ed8;transform:translateY(-2px);box-shadow:0 6px 20px rgba(37,99,235,.3)}.calculate-btn:active{transform:translateY(0)}.result-box{margin-top:30px;padding:20px;background:#f0fdf4;border:1px dashed #bbf7d0;border-radius:12px;text-align:center}.result-value{font-size:22px;font-weight:700;margin:8px 0;color:#166534}.result-box:before{content:"👁️";font-size:24px;display:block;margin-bottom:5px}.error-text{color:#dc2626;font-size:12px;margin-top:5px;font-weight:500}.input-error{border-color:#dc2626!important;background-color:#fef2f2!important}input::placeholder{color:#94a3b8;opacity:.7}