html,
      body,
      #root {
        min-height: 100%;
      }

      body {
        margin: 0;
        background: #e8f7fa;
        color: #000;
      }

      button,
      input,
      textarea,
      select {
        font: inherit;
      }

      .progress-sticky {
        position: sticky;
        top: 0;
        z-index: 20;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(4px);
      }

      .progress-sticky.is-stuck {
        border-bottom: 1px solid #d6e7eb;
      }

      .progress-fill {
        background: #079db2;
      }

      .language-shell::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 14px;
        width: 7px;
        height: 7px;
        border-right: 2px solid #079db2;
        border-bottom: 2px solid #079db2;
        transform: translateY(-68%) rotate(45deg);
        pointer-events: none;
        transition:
          border-color 180ms ease,
          transform 180ms ease;
      }

      .language-shell:hover::after,
      .language-shell:focus-within::after {
        border-color: #057f91;
        transform: translateY(-55%) rotate(45deg);
      }

      .language-shell select {
        transition:
          border-color 180ms ease,
          box-shadow 180ms ease,
          background 180ms ease;
      }

      .language-shell:hover select {
        border-color: #20b8d3;
        background: #f5fcfd;
        box-shadow: 0 6px 16px rgba(9, 157, 178, 0.12);
      }

      [dir="rtl"] .language-shell::after {
        right: auto;
        left: 14px;
      }

      .choice-row:hover,
      .check-row:hover {
        border-color: #20b8d3;
        background: #e7f8fb;
        box-shadow: 0 8px 18px rgba(9, 157, 178, 0.16);
        transform: translateY(-1px);
      }

      .choice-row,
      .check-row {
        transition:
          background 180ms ease,
          border-color 180ms ease,
          box-shadow 180ms ease,
          transform 180ms ease;
      }

      .choice-row.is-active,
      .check-row.is-active {
        border-color: #16aac4;
        background: #e9f8fb;
      }

      .fake-radio,
      .fake-check {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
        border: 1px solid #22add0;
        background: #fff;
        transition:
          background 180ms ease,
          border-color 180ms ease,
          transform 180ms ease;
      }

      .fake-radio {
        border-radius: 50%;
      }

      .fake-check {
        border-radius: 3px;
      }

      .choice-row.is-active .fake-radio {
        border-color: #079db2;
        background: #079db2;
      }

      .choice-row.is-active .fake-radio::after {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #fff;
        animation: markIn 160ms ease both;
      }

      .check-row.is-active .fake-check::after {
        content: "";
        width: 8px;
        height: 5px;
        border-left: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: translateY(-1px) rotate(-45deg);
        animation: checkIn 180ms ease both;
      }

      .check-row.is-active .fake-check {
        border-color: #079db2;
        background: #079db2;
      }

      .matrix-choice {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 150px;
        max-width: calc(100% - 12px);
        height: 34px;
        border-radius: 5px;
        transition: background 160ms ease;
      }

      .matrix-table {
        table-layout: fixed;
      }

      [dir="rtl"] .language-shell select {
        padding-right: 0.75rem;
        padding-left: 2.25rem;
      }

      .matrix-choice:hover {
        background: #d8f2f7;
      }

      .matrix-dot {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        border: 1px solid #22add0;
        border-radius: 50%;
        background: #fff;
        transition:
          border-width 180ms ease,
          border-color 180ms ease;
      }

      .matrix-dot.is-active {
        border-width: 4px;
        border-color: #079db2;
      }

      .score-btn {
        background: #abddea;
        transition:
          background 160ms ease,
          color 160ms ease;
      }

      .score-btn:hover,
      .score-btn.is-active {
        color: #fff;
        background: #079db2;
      }

      .submit-btn {
        background: #079db2;
        color: #fff;
        transition:
          background 180ms ease,
          box-shadow 180ms ease,
          transform 180ms ease;
      }

      .submit-btn:hover {
        background: #078ba0;
        box-shadow: 0 8px 18px rgba(7, 157, 178, 0.18);
        transform: translateY(-1px);
      }

      .error-badge {
        display: inline-flex;
        align-items: center;
        height: 24px;
        margin-left: 10px;
        padding: 0 9px;
        border-radius: 4px;
        background: #d70b0b;
        color: #fff;
        font-size: 12px;
        line-height: 1;
        vertical-align: 2px;
      }

      .required-star {
        color: #d70b0b;
      }

      [data-question] {
        scroll-margin-top: 54px;
      }

      @keyframes markIn {
        from {
          opacity: 0;
          transform: scale(0.45);
        }
        to {
          opacity: 1;
          transform: scale(1);
        }
      }

      @keyframes checkIn {
        from {
          opacity: 0;
          transform: translateY(-1px) rotate(-45deg) scale(0.5);
        }
        to {
          opacity: 1;
          transform: translateY(-1px) rotate(-45deg) scale(1);
        }
      }

      [dir="rtl"] .error-badge {
        margin-right: 10px;
        margin-left: 0;
      }

      .text-field:focus {
        border-color: #079db2;
        outline: none;
        box-shadow: 0 0 0 2px rgba(7, 157, 178, 0.08);
      }

      .inline-input {
        border-top: 0 !important;
        border-right: 0 !important;
        border-left: 0 !important;
        border-bottom: 1px solid #111 !important;
        box-shadow: none !important;
      }

      .inline-input:focus {
        border-bottom-color: #079db2 !important;
        outline: none;
        box-shadow: none !important;
      }

      .success-card {
        position: relative;
        overflow: hidden;
        border: 1px solid #caedf3;
        border-radius: 6px;
        background: linear-gradient(180deg, #ffffff 0%, #f7fdfe 100%);
        box-shadow: 0 16px 38px rgba(7, 157, 178, 0.12);
      }

      .success-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 5px;
        background: #079db2;
      }

      .success-ring {
        position: relative;
        width: 92px;
        height: 92px;
        border-radius: 50%;
        background: rgba(7, 157, 178, 0.12);
        animation: successPop 520ms cubic-bezier(0.2, 1.25, 0.32, 1) both;
      }

      .success-ring::before,
      .success-ring::after {
        content: "";
        position: absolute;
        inset: 8px;
        border-radius: 50%;
        border: 2px solid rgba(7, 157, 178, 0.24);
        animation: successPulse 1500ms ease-out infinite;
      }

      .success-ring::after {
        animation-delay: 260ms;
      }

      .success-checkmark {
        position: absolute;
        inset: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #079db2;
        color: #fff;
        font-size: 34px;
        font-weight: 700;
        box-shadow: 0 10px 22px rgba(7, 157, 178, 0.24);
      }

      .success-spark {
        position: absolute;
        width: 7px;
        height: 18px;
        border-radius: 999px;
        background: #20b8d3;
        opacity: 0;
        animation: sparkFly 1200ms ease-out infinite;
      }

      .success-spark:nth-child(1) {
        left: 22%;
        top: 28%;
        animation-delay: 120ms;
      }

      .success-spark:nth-child(2) {
        left: 74%;
        top: 24%;
        background: #abddea;
        animation-delay: 280ms;
      }

      .success-spark:nth-child(3) {
        left: 18%;
        top: 64%;
        background: #75cadb;
        animation-delay: 440ms;
      }

      .success-spark:nth-child(4) {
        left: 80%;
        top: 62%;
        animation-delay: 600ms;
      }

      @keyframes successPop {
        from {
          opacity: 0;
          transform: scale(0.72);
        }
        to {
          opacity: 1;
          transform: scale(1);
        }
      }

      @keyframes successPulse {
        from {
          opacity: 0.75;
          transform: scale(0.9);
        }
        to {
          opacity: 0;
          transform: scale(1.45);
        }
      }

      @keyframes sparkFly {
        0% {
          opacity: 0;
          transform: translateY(10px) rotate(0deg) scale(0.7);
        }
        28% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          transform: translateY(-34px) rotate(34deg) scale(1);
        }
      }

      @media (max-width: 720px) {
        .survey-shell {
          width: 100%;
          min-height: 100vh;
          border-radius: 0;
        }

        .matrix-wrap {
          overflow-x: auto;
        }

        .matrix-table {
          min-width: 760px;
        }
      }