:root {
   --accent: #6f42c1
   }

   body {
   background: linear-gradient(180deg, #f7f7fb, #fff);
   }

   .card-survey {
   border: none;
   box-shadow: 0 10px 30px rgba(40, 40, 90, 0.04);
   }

   .step-btn input {
   display: none
   }

   .option-card {
   cursor: pointer;
   transition: all .18s ease;
   }

   .option-card:hover {
   transform: translateY(-4px)
   }

   .option-card.active {
   border: 2px solid var(--accent);
   box-shadow: 0 8px 20px rgba(111, 66, 193, .08)
   }

   .progress-wrap {
   height: 10px;
   background: rgba(111, 66, 193, .09);
   border-radius: 999px
   }

   .progress-fill {
   height: 10px;
   background: linear-gradient(90deg, var(--accent), #2db7f5);
   border-radius: 999px
   }

   .step-indicator {
   display: flex;
   gap: .5rem;
   align-items: center
   }

   .step-indicator .dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: #e9ecef
   }

   .step-indicator .dot.active {
   background: var(--accent)
   }

   .small-muted {
   font-size: .85rem;
   color: #6c757d
   }

   .demographic .form-control:focus {
   box-shadow: 0 0 0 .12rem rgba(111, 66, 193, .12);
   border-color: var(--accent)
   }