* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 body {
   font-family: 'Inter', system-ui, -apple-system, sans-serif;
   background: #f1f5f9;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   -webkit-font-smoothing: antialiased;
 }

 .step-container {
   display: none;
   animation: fadeSlideIn 0.45s cubic-bezier(0.16, 1, 0.3, 1);
 }

 .step-container.active {
   display: block;
 }

 @keyframes fadeSlideIn {
   0% {
     opacity: 0;
     transform: translateY(18px);
   }

   100% {
     opacity: 1;
     transform: translateY(0);
   }
 }

 @keyframes fadeSlideOut {
   0% {
     opacity: 1;
     transform: translateY(0);
   }

   100% {
     opacity: 0;
     transform: translateY(-18px);
   }
 }

 @keyframes pulse-dot {

   0%,
   100% {
     transform: scale(1);
   }

   50% {
     transform: scale(1.15);
   }
 }

 .option-card {
   cursor: pointer;
   transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
   border: 2px solid #e2e8f0;
   background: #fff;
   border-radius: 16px;
   padding: 1.25rem;
   position: relative;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
 }

 .option-card:hover {
   border-color: #94a3b8;
   transform: translateY(-2px);
   box-shadow: 0 8px 25px -8px rgba(0, 0, 0, 0.08);
 }

 .option-card:active {
   transform: scale(0.98);
 }

 .option-card.selected {
   border-color: #2563eb;
   background: #f8faff;
   box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08), 0 8px 25px -8px rgba(37, 99, 235, 0.15);
 }

 .option-card .check {
   position: absolute;
   top: 12px;
   right: 12px;
   width: 22px;
   height: 22px;
   border-radius: 50%;
   border: 2px solid #e2e8f0;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s;
   opacity: 0;
   transform: scale(0.7);
 }

 .option-card.selected .check {
   opacity: 1;
   transform: scale(1);
   background: #2563eb;
   border-color: #2563eb;
 }

 .progress-dot {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.8rem;
   font-weight: 600;
   transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
   border: 2px solid #cbd5e1;
   color: #94a3b8;
   background: #fff;
   position: relative;
   z-index: 2;
   flex-shrink: 0;
 }

 .progress-dot.active {
   border-color: #2563eb;
   background: #2563eb;
   color: #fff;
   animation: pulse-dot 1.5s ease-in-out infinite;
 }

 .progress-dot.completed {
   border-color: #059669;
   background: #059669;
   color: #fff;
 }

 .progress-line {
   flex: 1;
   height: 2px;
   background: #e2e8f0;
   margin: 0 4px;
   transition: background 0.4s;
   min-width: 12px;
 }

 .progress-line.completed {
   background: #059669;
 }

 .dimension-slider {
   -webkit-appearance: none;
   appearance: none;
   width: 100%;
   height: 6px;
   border-radius: 3px;
   background: #e2e8f0;
   outline: none;
   transition: background 0.2s;
 }

 .dimension-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 24px;
   height: 24px;
   border-radius: 50%;
   background: #2563eb;
   cursor: pointer;
   box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
   transition: transform 0.2s;
 }

 .dimension-slider::-webkit-slider-thumb:hover {
   transform: scale(1.15);
 }

 .dimension-slider::-moz-range-thumb {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   background: #2563eb;
   cursor: pointer;
   border: none;
   box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
 }

 .input-field {
   width: 100%;
   padding: 0.875rem 1rem;
   border: 2px solid #e2e8f0;
   border-radius: 12px;
   font-size: 0.95rem;
   transition: all 0.2s;
   background: #fff;
   font-family: 'Inter', sans-serif;
 }

 .input-field:focus {
   outline: none;
   border-color: #2563eb;
   box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
 }

 .input-field.error {
   border-color: #dc2626;
   box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.08);
 }

 .btn-primary {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
   padding: 0.875rem 2rem;
   background: linear-gradient(135deg, #2563eb, #1d4ed8);
   color: #fff;
   border: none;
   border-radius: 12px;
   font-size: 1rem;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
   font-family: 'Inter', sans-serif;
   width: 100%;
   letter-spacing: -0.01em;
 }

 .btn-primary:hover {
   transform: translateY(-1px);
   box-shadow: 0 8px 25px -8px rgba(37, 99, 235, 0.45);
 }

 .btn-primary:active {
   transform: scale(0.98);
 }

 .btn-primary:disabled {
   opacity: 0.5;
   cursor: not-allowed;
   transform: none;
   box-shadow: none;
 }

 .btn-secondary {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
   padding: 0.75rem 1.5rem;
   background: transparent;
   color: #475569;
   border: 2px solid #e2e8f0;
   border-radius: 12px;
   font-size: 0.9rem;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s;
   font-family: 'Inter', sans-serif;
 }

 .btn-secondary:hover {
   border-color: #94a3b8;
   background: #f8fafc;
 }

 @media (max-width: 480px) {
   .option-card {
     padding: 1rem;
   }
 }

 .success-checkmark {
   width: 72px;
   height: 72px;
   margin: 0 auto;
   border-radius: 50%;
   background: linear-gradient(135deg, #059669, #10b981);
   display: flex;
   align-items: center;
   justify-content: center;
   animation: scaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
   box-shadow: 0 12px 30px -8px rgba(5, 150, 105, 0.3);
 }

 @keyframes scaleIn {
   0% {
     transform: scale(0);
     opacity: 0;
   }

   100% {
     transform: scale(1);
     opacity: 1;
   }
 }

 select.input-field {
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 1rem center;
   padding-right: 2.5rem;
 }