/* Password page styles */
      .password-page {
        display: none;
      }

      .password-page.active {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
      }

      .password-page .modal {
        width: 560px;
        background: #18181c;
        border-radius: 22px;
        padding: 70px 20px 30px 20px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        margin: auto;
        opacity: 0;
        transform: translateX(60px);
        animation: passwordIn 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        align-self: center;
      }

      @keyframes passwordIn {
        0% {
          opacity: 0;
          transform: translateX(60px);
        }
        100% {
          opacity: 1;
          transform: translateX(0);
        }
      }

      .password-page .header {
        padding: 0 0 20px;
        position: relative;
        text-align: left;
      }

      .password-page .header h1 {
        font-size: 1.5rem;
        font-family: "InterTight-SemiBold", sans-serif;
        color: #fff;
        margin-bottom: 14px;

        margin-top: 10px;
        margin-left: 24px;
        letter-spacing: 0.3px;
        text-align: left;
        opacity: 0;
        transform: translateX(30px);
        transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
          transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
      }

      .password-page.active .header h1 {
        opacity: 1;
        transform: translateX(0);
      }

      .password-page .section {
        border: none;
        background: transparent;
        padding: 0;
        margin: 0 auto 24px;

        max-width: 520px;
        width: 90%;
        border-radius: 0;
      }

      .password-page .label {
        opacity: 0;
        transform: translateX(30px);
        transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
          transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
        text-align: left;
      }

      .password-page.active .label {
        opacity: 1;
        transform: translateX(0);
      }

      .password-page .btn-primary {
        margin-top: 1px;
        margin-bottom: 4px;
        font-size: 16px !important;
        font-weight: 0 !important;
        margin-left: 0;
        max-width: 460px;
        width: min(460px, calc(100%));
        opacity: 0;
        transform: translateX(30px);
        transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.6s,
          transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.6s;
      }

      .password-page.active .btn-primary {
        opacity: 1;
        transform: translateX(0);
      }

      .password-page .footer {
        margin-top: 2px;
        margin-bottom: 0;
        margin-left: auto;
        margin-right: auto;
        max-width: 460px;
        width: min(460px, calc(100% - 20px));
        text-align: center;
        opacity: 0;
        transform: translateX(30px);
        transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.7s,
          transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.7s;
      }

      .password-page.active .footer {
        opacity: 1;
        transform: translateX(0);
      }

      .password-page .footer a {
        font-size: 14px;
      }

      .password-page .back-button {
        background: none;
        border: none;
        color: #fff;
        cursor: pointer;
        padding: 0;
        margin-bottom: 20px;
        margin-top: -15px;
        display: flex;
        align-items: center;
        margin-left: 17px;
        font-size: 14px;
        gap: 8px;
        opacity: 0;
        transform: translateX(30px);
        font-weight: 100;
        transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0s,
          transform 0.3s ease;
      }
      .code-page .back-button {
        background: none;
        border: none;
        color: #fff;
        cursor: pointer;
        padding: 0;
        margin-bottom: 30px;
        margin-top: -15px;
        display: flex;
        align-items: center;
        margin-left: 0px;
        font-size: 14px;
        gap: 8px;
        opacity: 0;
        transform: translateX(30px);
        font-weight: 100;
        transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0s,
          transform 0.3s ease;
      }

      .password-page.active .back-button {
        opacity: 1;
        transform: translateX(0);
      }

      .code-page .back-button {
        opacity: 0;
        transform: translateX(30px);
        transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0s,
          transform 0.3s ease;
      }

      .code-page.active .back-button {
        opacity: 1;
        transform: translateX(0);
      }

      .back-button svg {
        width: 19px;
        height: 24px;
      }

      .back-button:hover {
        opacity: 0.8;
      }

      .back-text {
        display: inline-block;
        transition: transform 0.3s ease;
      }

      .back-button:hover .back-text {
        transform: translateX(5px);
      }

      .email-display {
        font-size: 1rem;
        color: #aeb0b6;
        margin-bottom: 12px;
        margin-top: 1px;
        margin-left: 0px;
        letter-spacing: 0.02em;
        line-height: 165%;
        font-weight: normal;
        opacity: 0;
        transform: translateX(30px);
        transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
          transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
        text-align: left;
        padding-left: 24px;
        font-family: "Inter-Light", sans-serif;
      }

      .password-page.active .email-display {
        opacity: 1;
        transform: translateX(0);
      }

      .email-display mark {
        font-weight: 600;
        color: #fff;
        background: none;
        padding: 0;
      }

      .password-wrapper {
        position: relative;
        margin-bottom: 10px;
        margin-top: 10px;
        margin-left: 0;
        opacity: 0;
        transform: translateX(30px);
        transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.35s,
          transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.35s;
        max-width: 460px;
        width: min(460px, calc(100%));
      }

      .password-page.active .password-wrapper {
        opacity: 1;
        transform: translateX(0);
      }

      .password-page input {
        width: 100%;
        height: 50px;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: #232327;
        color: #fff;
        font-size: 15px;
        font-weight: 400;
        margin-bottom: 0;
        margin-top: 0;
        outline: none;
        transition: border-color 0.3s ease;
        box-sizing: border-box;
      }

      .password-page input:hover {
        border-color: rgba(255, 255, 255, 0.3);
      }

      .password-toggle {
        position: absolute;
        right: 18px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: #fff;
        cursor: pointer;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 27px;
        height: 27px;
      }

      .password-toggle svg {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px;
        min-height: 22px;
        max-width: 26px;
        max-height: 27px;
        transition: opacity 0.3s ease, filter 0.3s ease;
      }

      .password-toggle:hover svg {
        opacity: 0.8;
        filter: brightness(1.3);
      }

      .password-page input:focus {
        border: 2px solid #fff;
        border-color: #fff;
      }

      .password-page input.error {
        border-color: #ff6173;
      }

      .password-page .error-text.show {
        margin-top: 1px;
        margin-left: 0;
        margin-right: auto;
        max-width: 460px;
        width: min(460px, calc(100%));
      }

      .forgot-password-link {
        color: #26bbff;
        text-decoration: underline;
        font-size: 14px;
        font-weight: 400;
        display: block;
        text-align: left;
        margin-top: 5px;
        margin-bottom: 24px;
        margin-left: 0;
        opacity: 0;
        transform: translateX(30px);
        transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s,
          transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
      }

      .password-page.active .forgot-password-link {
        opacity: 1;
        transform: translateX(0);
      }

      .remember-me {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8px;
        margin-left: 0;
        margin-bottom: 32px;
        opacity: 0;
        transform: translateX(30px);
        transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.5s,
          transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.5s;
      }

      .password-page.active .remember-me {
        opacity: 1;
        transform: translateX(0);
      }

      .remember-me input[type="checkbox"] {
        display: block;
        width: 20px;
        height: 20px;
        margin: 0;
        margin-top: 1px;
        padding: 0;
        background: #232327;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        cursor: pointer;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 4px;
        box-sizing: border-box;
        position: relative;
        flex-shrink: 0;
        aspect-ratio: 1;
      }

      .remember-me input[type="checkbox"]:hover,
      .remember-me:hover input[type="checkbox"] {
        border-color: rgba(255, 255, 255, 0.8);
        background: #2a2a2e;
      }

      .remember-me input[type="checkbox"]:checked {
        background: #26bbff;
        border-color: #26bbff;
      }

      .remember-me input[type="checkbox"]:checked:hover,
      .remember-me:hover input[type="checkbox"]:checked {
        border-color: #4fc9ff;
        background: #4fc9ff;
      }

      .remember-me input[type="checkbox"]:checked::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 4px;
        height: 8px;
        border: solid #000;
        border-width: 0 1.5px 1.9px 0;
        transform: translate(-50%, -60%) rotate(45deg);
      }

      .remember-me-text {
        font-size: 14px;
        color: #fff;
        line-height: 1.5;
        margin: 0;
        flex: 1;
        letter-spacing: 0.45px;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        font-family: "Inter-Light" !important;
      }

      .loading-spinner {
        border: 2px solid rgba(0, 0, 0, 0.2);
        border-top: 2px solid #26bbff;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        animation: spin 0.8s linear infinite;
        display: inline-block;
      }

      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }

      /* Code page styles */
      .code-page {
        display: none;
        min-height: 100vh;
        justify-content: center;
        align-items: center;
      }

      .code-page.active {
        display: flex;
      }

      .code-page .modal {
        width: 560px;
        background: #18181c;
        border-radius: 22px;
        padding: 75px 44px 50px 46px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        margin: 0;
      }

      .code-page .header {
        padding: 0 0 20px;
        position: relative;
        text-align: left;
      }

      .code-page .header h1 {
        font-size: 23px;
        font-weight: 700;
        font-family: Inter, sans-serif;
        color: #fff;
        margin-bottom: 18px;
        margin-top: 1px;
        letter-spacing: -0.3px;
        text-align: left;
        margin-left: 0;
        margin-right: 0;
      }

      .instructions {
        font-size: 16px;
        color: #aeb0b6;
        margin-bottom: 16px;
        line-height: 1.5;
        letter-spacing: 0.3px;
        font-weight: 400;
      }

      #emailDisplayCode {
        color: #ffffff;
        font-weight: 700;
      }

      .code-inputs {
        display: flex;
        gap: 12px;
        justify-content: center;
        margin-bottom: 24px;
      }

      .code-input:nth-child(3) {
        margin-right: 13px;
      }

      .code-input {
        width: 50px;
        height: 60px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: #232327;
        color: #fff;
        font-size: 26px;
        text-align: center;
        outline: none;
        font-weight: 400;
        transition: all 0.2s ease;
        transform: scale(1);
        box-sizing: border-box;
        line-height: 60px;
        padding: 0;
        vertical-align: middle;
        overflow: hidden;
        white-space: nowrap;
      }

      .code-input:hover {
        border-color: rgba(255, 255, 255, 0.3);
      }

      .code-input.error {
        border-color: #ff3f56 !important;
      }

      .code-input.filled {
        border-color: rgba(255, 255, 255, 0.5);
        transform: scale(1.05);
      }

      .code-input.error.filled {
        border-color: #ff3f56 !important;
      }

      .code-input:focus,
      .code-input.error:focus {
        border: 3px solid rgb(255, 255, 255) !important;
        transform: scale(1.1);
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3),
          inset 0 -1px 2px rgba(255, 255, 255, 0.1);
      }

      .remember-device {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        margin-bottom: 24px;
        margin-left: 2px;
      }

      .remember-device input[type="checkbox"] {
        display: block;
        width: 20px;
        height: 20px;
        margin: 0;
        margin-top: 1px;
        padding: 0;
        background: #232327;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        cursor: pointer;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 4px;
        box-sizing: border-box;
        position: relative;
        flex-shrink: 0;
        aspect-ratio: 1;
        transition: border-color 0.2s ease;
      }

      .remember-device input[type="checkbox"]:hover,
      .remember-device:hover input[type="checkbox"] {
        border-color: rgba(255, 255, 255, 0.8);
        background: #2a2a2e;
      }

      .remember-device input[type="checkbox"]:checked {
        background: #26bbff;
        border-color: #26bbff;
      }

      .remember-device input[type="checkbox"]:checked:hover,
      .remember-device:hover input[type="checkbox"]:checked {
        border-color: #4fc9ff;
        background: #4fc9ff;
      }

      .remember-device input[type="checkbox"]:checked::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 4px;
        height: 8px;
        border: solid #000;
        border-width: 0 1.5px 1.9px 0;
        transform: translate(-50%, -60%) rotate(45deg);
      }

      .remember-device label {
        font-size: 14px;
        color: #fff;
        line-height: 1.5;
        margin: 0;
        cursor: pointer;
        font-weight: 400;
      }

      .resend-link {
        display: block;
        text-align: center;
        color: #26bbff;
        text-decoration: underline;
        font-size: 14px;
        font-weight: 400;
        cursor: pointer;
        margin-top: 20px;
      }

      .code-page .btn-primary {
        margin-top: 3px;
      }

      .code-page .resend-link {
        margin-top: 15px;
      }

      .resend-link:hover {
        color: #4fc9ff;
      }

      @media (max-width: 768px) {
        body {
          padding: 0 30px;
          align-items: flex-start;
        }

        .skeleton-loader {
          inset: 0 30px;
        }

        .password-page {
          display: none;
          min-height: 100vh;
          justify-content: center;
          align-items: center;
          padding-top: 0;
        }

        .password-page.active {
          display: flex;
        }

        .code-page {
          display: none;
          min-height: 100vh;
          justify-content: center;
          align-items: center;
          padding-top: 0;
        }

        .code-page.active {
          display: flex;
        }

        .password-page .modal {
          width: 90%;
          max-width: 560px;
          margin: 0 auto;
          border-radius: 22px;
          padding: 70px 10px 30px 10px;
          border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .code-page .modal {
          width: 90%;
          max-width: 560px;
          margin: 0 auto;
          border-radius: 22px;
          padding: 24px 20px 28px;
          border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .skeleton-card {
          width: 90%;
          max-width: 600px;
          margin: 0 auto;
          border-radius: 22px;
          padding: 60px;
          border: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* .password-page .header,
        .code-page .header {
          padding: 16px 20px 20px;
        } */

        .password-page .header h1,
        .code-page .header h1 {
          font-size: 20px;
        }

        .email-display {
          font-size: 15px;
          margin-bottom: 10px;
        }

        .password-page input {
          height: 50px;
          font-size: 15px;
          padding: 0 50px 0 16px;
        }

        .password-toggle {
          right: 16px;
        }

        .forgot-password-link {
          font-size: 13px;
          margin-bottom: 20px;
        }

        .remember-me {
          margin-bottom: 24px;
          gap: 10px;
        }

        .remember-me-text {
          font-size: 13px;
          line-height: 1.4;
          user-select: none;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
        }

        .remember-me input[type="checkbox"] {
          width: 18px;
          height: 18px;
          margin-top: 2px;
        }

        .code-inputs {
          gap: 8px;
          margin-bottom: 20px;
        }

        .code-input:nth-child(3) {
          margin-right: 15px;
        }

        .code-input {
          width: 42px;
          height: 52px;
          font-size: 22px;
          border-radius: 10px;
          line-height: 52px;
          padding: 0;
          vertical-align: middle;
        }

        .remember-device {
          margin-bottom: 20px;
        }

        .remember-device label {
          font-size: 14px;
          font-weight: 400;
        }

        .resend-link {
          font-size: 13px;
          margin-top: 16px;
        }

        .back-button {
          font-size: 15px;
          margin-top: 0;
          margin-bottom: 16px;
        }
      }

      @media (max-width: 479px) {
        body {
          padding: 0;
          align-items: flex-start;
        }

        .password-page {
          padding-top: 0;
          display: none;
          min-height: 100vh;
          justify-content: center;
          align-items: center;
        }

        .password-page.active {
          display: flex;
        }

        .code-page {
          padding-top: 0;
          display: none;
          min-height: 100vh;
          justify-content: center;
          align-items: center;
        }

        .code-page.active {
          display: flex;
        }

        .modal {
          width: 100%;
          max-width: 100%;
          min-height: 100vh;
          margin: 0;
          border-radius: 0;
          padding: 20px 16px 24px;
          border-left: none;
          border-right: none;
          display: flex;
          flex-direction: column;
          justify-content: center;
          background: #18181c;
        }

        .header {
          text-align: center;
        }

        .header h1 {
          line-height: 125%;
          margin-bottom: 12px;
          text-align: center;
          margin: 0 auto;
          padding-left: 20px;
          padding-right: 20px;
        }

        .section {
          padding: 15px 15px;
          margin-bottom: 14px;
        }

        .section p {
          letter-spacing: 0.05em;
          line-height: 165%;
          text-align: center;
          color: rgba(255, 255, 255, 0.65);
          font-family: "Inter-Light", sans-serif;
        }

        .btn {
          padding: 20px;
          margin-bottom: 12px;
          line-height: 205%;

          font-family: "Inter-Light", sans-serif;
          font-weight: 100;
        }

        input {
          height: 46px;
          font-size: 14px;
          padding: 0 14px;
        }

        .label {
          text-align: left;
        }

        .link-section {
          margin-bottom: 14px;
          font-size: 13px;
        }

        .footer a {
          font-size: 13px;
          margin-top: 10px;
        }

        .icon {
          width: 40px;
          height: 40px;
          font-size: 13px;
        }

        /* .icon svg {
          width: 22px;
          height: 22px;
        } */

        .password-page .modal {
          width: 100%;
          max-width: 100%;
          min-height: 100vh;
          margin: 0;
          border-radius: 0;
          padding: 70px 8px 30px 8px;
          border-left: none;
          border-right: none;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

        .code-page .modal {
          width: 100%;
          max-width: 100%;
          min-height: 100vh;
          margin: 0;
          border-radius: 0;
          padding: 20px 26px 24px;
          border-left: none;
          border-right: none;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

        .skeleton-loader {
          inset: 0;
        }

        .skeleton-card {
          width: 100%;
          max-width: 100%;
          min-height: 100vh;
          margin: 0;
          border-radius: 0;
          padding: 46px;
          border-left: none;
          border-right: none;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

        .password-page .header,
        .code-page .header {
          text-align: left;
          display: flex;
          flex-direction: column;
          align-content: flex-start;
          align-items: flex-start;
        }

        .password-page .header h1,
        .code-page .header h1 {
          font-size: 24px;
          text-align: left;
          margin: 0 auto 12px;
          padding-left: 20px;
          padding-right: 20px;
          margin-left: 00px;
        }

        .code-page .header h1 {
          font-size: 18px;
          text-align: left;
          margin: 0 auto 10px;
          padding-left: 20px;
          padding-right: 20px;
          margin-left: -20px;
        }

        .code-page .modal .header .back-button {
          margin-left: 0px;
        }

        .email-display {
          font-size: 1rem;
          padding-left: 20px;
          padding-right: 20px;
          margin-left: 0px;
        }

        .instructions {
          text-align: left;
        }

        .password-page input {
          height: 48px;
          font-size: 14px;
        }

        .code-inputs {
          gap: 10px;
          margin-bottom: 18px;
          display: flex;
          justify-content: center;
        }

        .code-input:nth-child(3) {
          margin-right: 10px;
        }

        .code-input {
          width: 48px;
          height: 60px;
          font-size: 20px;
          border-radius: 8px;
          line-height: 48px;
          padding: 0;
          vertical-align: middle;
        }

        .forgot-password-link {
          text-align: left;
          display: block;
        }

        .remember-me {
          justify-content: center;
        }

        .remember-me-text {
          user-select: none;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
        }
      }

      @media (max-width: 320px) {
        .modal {
          padding: 16px 12px 20px;
        }

        .header h1 {
          font-size: 16px;
        }

        .btn {
          height: 44px;
          font-size: 13px;
        }

        input {
          height: 44px;
          font-size: 13px;
        }

        .code-input {
          width: 36px;
          height: 46px;
          font-size: 18px;
          line-height: 46px;
        }

        .code-inputs {
          gap: 4px;
        }

        .code-input:nth-child(3) {
          margin-right: 8px;
        }
      }

      /* Основные стили */
      .error-box {
        display: none;
        gap: 16px;
        background-color: rgba(255, 97, 115, 0.08);

        border: 1px solid rgba(255, 97, 115, 0.5);
        border-radius: 10px;
        padding: 24px;
        max-width: 90%;
        transition: all 0.3s ease;
        margin-bottom: 24px;
        margin: 0 auto 20px;
      }

      .error-iconq {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        margin-top: 2px;
      }

      .error-iconq svg {
        width: 100%;
        height: 100%;
      }

      .error-content {
        display: flex;
        flex-direction: column;
        gap: 16px;
        justify-content: center;
      }

      .error-title {
        color: #ffffff;
        font-family: sans-serif; /* Можно заменить на твой Burbank */
        font-size: 15px;
        font-weight: 700;
        margin: 0;
        letter-spacing: -0.01em;
      }

      .error-textq {
        color: #d3d3d3;
        font-family: sans-serif; /* Можно заменить на твой Heading */
        font-size: 13px;
        line-height: 1.5;
        margin: 0;
      }

      .error-link {
        color: #ffffff;
        font-size: 13px;
        text-decoration: underline;
        text-underline-offset: 4px;
        width: fit-content;
        transition: color 0.2s ease;
      }

      .error-link:hover {
        color: #cccccc;
      }

      /* Адаптив для экранов 2000px+ */
      @media (min-width: 2000px) {
        .error-box {
          padding: 24px;
          gap: 24px;
          border-radius: 10px;
          margin-bottom: 25px;
        }

        .error-iconq {
          width: 40px;
          height: 40px;
        }

        .error-content {
          gap: 24px;
        }

        .error-title {
          font-size: 18px;
        }

        .error-textq {
          font-size: 14px;
        }

        .error-link {
          font-size: 14px;
        }
      }

      .code-page .error-box {
        display: none;
        gap: 1px;
        background-color: rgba(255, 97, 115, 0.08);

        border: 1px solid rgba(255, 97, 115, 0.5);
        border-radius: 10px;
        padding: 15px 24px;
        max-width: 100%;
        transition: all 0.3s ease;
        margin-bottom: 24px;
        margin: 0 0px 20px;
      }

      .code-page .error-iconq {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        margin-top: 2px;
      }

      .code-page .error-iconq svg {
        width: 100%;
        height: 100%;
      }

      .code-page .error-content {
        display: flex;
        flex-direction: column;
        gap: 16px;
        justify-content: center;
      }

      .code-page .error-title {
        color: #ffffff;
        font-family: sans-serif; /* Можно заменить на твой Burbank */
        font-size: 15px;
        font-weight: 700;
        margin: 0;
        letter-spacing: -0.01em;
      }

      .code-page .error-textq {
        color: #d3d3d3;
        font-family: sans-serif; /* Можно заменить на твой Heading */
        font-size: 13px;
        line-height: 1.5;
        margin: 0;
      }

      .code-page .error-link {
        color: #ffffff;
        font-size: 13px;
        text-decoration: underline;
        text-underline-offset: 4px;
        width: fit-content;
        transition: color 0.2s ease;
      }

      .code-page .error-link:hover {
        color: #cccccc;
      }

      /* Адаптив для экранов 2000px+ */
      @media (min-width: 2000px) {
        .code-page .error-box {
          padding: 24px;
          gap: 24px;
          border-radius: 10px;
          margin-bottom: 25px;
        }

        .code-page .error-iconq {
          width: 40px;
          height: 40px;
        }

        .code-page .error-content {
          gap: 24px;
        }

        .code-page .error-title {
          font-size: 18px;
        }

        .code-page .error-textq {
          font-size: 14px;
        }

        .code-page .error-link {
          font-size: 14px;
        }
      }
      @media screen and (max-width: 768px) {
        input,
        textarea,
        select {
          font-size: 16px !important;
        }
      }

      .btn-main {
        font-family: Inter, sans-serif !important;
        font-weight: 500 !important;
        letter-spacing: 0.02em !important;
        font-size: 16px !important;
        padding: 14px 28px !important;
      }

      #continueBtnCode {
        font-size: 16px !important;
      }

      /* Code page & OTP page styles */
      .code-page,
      .otp-page {
        display: none;
        min-height: 100vh;
        justify-content: center;
        align-items: center;
      }

      .code-page.active,
      .otp-page.active {
        display: flex;
      }

      .code-page .modal,
      .otp-page .modal {
        width: 560px;
        background: #18181c;
        border-radius: 22px;
        padding: 75px 44px 50px 46px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        margin: 0;
      }

      .code-page .header,
      .otp-page .header {
        padding: 0 0 20px;
        position: relative;
        text-align: left;
      }

      .code-page .header h1,
      .otp-page .header h1 {
        font-size: 23px;
        font-weight: 700;
        font-family: Inter, sans-serif;
        color: #fff;
        margin-bottom: 18px;
        margin-top: 1px;
        letter-spacing: -0.3px;
        text-align: left;
        margin-left: 0;
        margin-right: 0;
      }

      .instructions {
        font-size: 16px;
        color: #aeb0b6;
        margin-bottom: 16px;
        line-height: 1.5;
        letter-spacing: 0.3px;
        font-weight: 400;
      }

      #emailDisplayCode {
        color: #ffffff;
        font-weight: 700;
      }

      .code-inputs {
        display: flex;
        gap: 12px;
        justify-content: center;
        margin-bottom: 24px;
      }

      /* Отступ для третьего инпута (разделитель) */
      .code-input:nth-child(3),
      .otp-input:nth-child(3) {
        margin-right: 13px;
      }

      .code-input,
      .otp-input {
        width: 50px;
        height: 60px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: #232327;
        color: #fff;
        font-size: 26px;
        text-align: center;
        outline: none;
        font-weight: 400;
        transition: all 0.2s ease;
        transform: scale(1);
        box-sizing: border-box;
        line-height: 60px;
        padding: 0;
        vertical-align: middle;
        overflow: hidden;
        white-space: nowrap;
      }

      .code-input:hover,
      .otp-input:hover {
        border-color: rgba(255, 255, 255, 0.3);
      }

      .code-input.error,
      .otp-input.error {
        border-color: #ff3f56 !important;
      }

      .code-input.filled,
      .otp-input.filled {
        border-color: rgba(255, 255, 255, 0.5);
        transform: scale(1.05);
      }

      .code-input.error.filled,
      .otp-input.error.filled {
        border-color: #ff3f56 !important;
      }

      .code-input:focus,
      .code-input.error:focus,
      .otp-input:focus,
      .otp-input.error:focus {
        border: 3px solid rgb(255, 255, 255) !important;
        transform: scale(1.1);
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3),
          inset 0 -1px 2px rgba(255, 255, 255, 0.1);
      }

      .remember-device {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        margin-bottom: 24px;
        margin-left: 2px;
      }

      .remember-device input[type="checkbox"] {
        display: block;
        width: 20px;
        height: 20px;
        margin: 0;
        margin-top: 1px;
        padding: 0;
        background: #232327;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        cursor: pointer;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 4px;
        box-sizing: border-box;
        position: relative;
        flex-shrink: 0;
        aspect-ratio: 1;
        transition: border-color 0.2s ease;
      }

      .remember-device input[type="checkbox"]:hover,
      .remember-device:hover input[type="checkbox"] {
        border-color: rgba(255, 255, 255, 0.8);
        background: #2a2a2e;
      }

      .remember-device input[type="checkbox"]:checked {
        background: #26bbff;
        border-color: #26bbff;
      }

      .remember-device input[type="checkbox"]:checked:hover,
      .remember-device:hover input[type="checkbox"]:checked {
        border-color: #4fc9ff;
        background: #4fc9ff;
      }

      .remember-device input[type="checkbox"]:checked::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 4px;
        height: 8px;
        border: solid #000;
        border-width: 0 1.5px 1.9px 0;
        transform: translate(-50%, -60%) rotate(45deg);
      }

      .remember-device label {
        font-size: 14px;
        color: #fff;
        line-height: 1.5;
        margin: 0;
        cursor: pointer;
        font-weight: 400;
      }

      .resend-link {
        display: block;
        text-align: center;
        color: #26bbff;
        text-decoration: underline;
        font-size: 14px;
        font-weight: 400;
        cursor: pointer;
        margin-top: 20px;
      }

      .code-page .btn-primary,
      .otp-page .btn-primary {
        margin-top: 3px;
      }

      .code-page .resend-link,
      .otp-page .resend-link {
        margin-top: 15px;
      }

      .resend-link:hover {
        color: #4fc9ff;
      }

      /* --- Ошибки для Code и OTP страниц --- */
      .code-page .error-box,
      .otp-page .error-box {
        display: none;
        gap: 1px;
        background-color: rgba(255, 97, 115, 0.08);
        border: 1px solid rgba(255, 97, 115, 0.5);
        border-radius: 10px;
        padding: 15px 24px;
        max-width: 100%;
        transition: all 0.3s ease;
        margin-bottom: 24px;
        margin: 0 0px 20px;
      }

      /* Доп. стили внутри error-box копируем по необходимости или используем общие,
         но здесь специфичные для code-page/otp-page */
      .code-page .error-iconq,
      .otp-page .error-iconq {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        margin-top: 2px;
      }
      .code-page .error-iconq svg,
      .otp-page .error-iconq svg {
        width: 100%;
        height: 100%;
      }
      .code-page .error-content,
      .otp-page .error-content {
        display: flex;
        flex-direction: column;
        gap: 16px;
        justify-content: center;
      }
      .code-page .error-title,
      .otp-page .error-title {
        color: #ffffff;
        font-family: sans-serif;
        font-size: 15px;
        font-weight: 700;
        margin: 0;
        letter-spacing: -0.01em;
      }
      .code-page .error-textq,
      .otp-page .error-textq {
        color: #d3d3d3;
        font-family: sans-serif;
        font-size: 13px;
        line-height: 1.5;
        margin: 0;
      }
      .code-page .error-link,
      .otp-page .error-link {
        color: #ffffff;
        font-size: 13px;
        text-decoration: underline;
        text-underline-offset: 4px;
        width: fit-content;
        transition: color 0.2s ease;
      }
      .code-page .error-link:hover,
      .otp-page .error-link:hover {
        color: #cccccc;
      }

      /* MEDIA QUERIES (Адаптив) */
      @media (max-width: 768px) {
        body {
          padding: 0 30px;
          align-items: flex-start;
        }

        .skeleton-loader {
          inset: 0 30px;
        }

        .password-page,
        .code-page,
        .otp-page {
          display: none;
          min-height: 100vh;
          justify-content: center;
          align-items: center;
          padding-top: 0;
        }

        .password-page.active,
        .code-page.active,
        .otp-page.active {
          display: flex;
        }

        .password-page .modal {
          width: 90%;
          max-width: 560px;
          margin: 0 auto;
          border-radius: 22px;
          padding: 70px 10px 30px 10px;
          border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .code-page .modal,
        .otp-page .modal {
          width: 90%;
          max-width: 560px;
          margin: 0 auto;
          border-radius: 22px;
          padding: 44px 30px 28px;
          border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .skeleton-card {
          width: 90%;
          max-width: 600px;
          margin: 0 auto;
          border-radius: 22px;
          padding: 60px;
          border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .password-page .header h1,
        .code-page .header h1,
        .otp-page .header h1 {
          font-size: 20px;
        }

        .email-display {
          font-size: 15px;
          margin-bottom: 10px;
        }

        .password-page input {
          height: 50px;
          font-size: 15px;
          padding: 0 50px 0 16px;
        }

        .password-toggle {
          right: 16px;
        }

        .forgot-password-link {
          font-size: 13px;
          margin-bottom: 20px;
        }

        .remember-me {
          margin-bottom: 24px;
          gap: 10px;
        }

        .remember-me-text {
          font-size: 13px;
          line-height: 1.4;
          user-select: none;
        }

        .remember-me input[type="checkbox"] {
          width: 18px;
          height: 18px;
          margin-top: 2px;
        }

        .code-inputs {
          gap: 8px;
          margin-bottom: 20px;
        }

        .code-input:nth-child(3),
        .otp-input:nth-child(3) {
          margin-right: 15px;
        }

        .code-input,
        .otp-input {
          width: 42px;
          height: 52px;
          font-size: 22px;
          border-radius: 10px;
          line-height: 52px;
          padding: 0;
          vertical-align: middle;
        }

        .remember-device {
          margin-bottom: 20px;
        }

        .remember-device label {
          font-size: 14px;
          font-weight: 400;
        }

        .resend-link {
          font-size: 13px;
          margin-top: 16px;
        }

        .back-button {
          font-size: 15px;
          margin-top: 0;
          margin-bottom: 16px;
        }
      }

      @media (max-width: 479px) {
        body {
          padding: 0;
          align-items: flex-start;
        }

        .password-page,
        .code-page,
        .otp-page {
          padding-top: 0;
          display: none;
          min-height: 100vh;
          justify-content: center;
          align-items: center;
        }

        .password-page.active,
        .code-page.active,
        .otp-page.active {
          display: flex;
        }

        .modal {
          width: 100%;
          max-width: 100%;
          min-height: 100vh;
          margin: 0;
          border-radius: 0;
          padding: 20px 16px 24px;
          border-left: none;
          border-right: none;
          display: flex;
          flex-direction: column;
          justify-content: center;
          background: #18181c;
        }

        .header {
          text-align: center;
        }

        .header h1 {
          line-height: 125%;
          margin-bottom: 12px;
          text-align: center;
          margin: 0 auto;
          padding-left: 20px;
          padding-right: 20px;
        }

        .section {
          padding: 15px 15px;
          margin-bottom: 14px;
        }

        .section p {
          letter-spacing: 0.05em;
          line-height: 165%;
          text-align: center;
          color: rgba(255, 255, 255, 0.65);
          font-family: "Inter-Light", sans-serif;
        }

        .btn {
          padding: 20px;
          margin-bottom: 12px;
          line-height: 205%;
          font-family: "Inter-Light", sans-serif;
          font-weight: 100;
        }

        input {
          height: 46px;
          font-size: 14px;
          padding: 0 14px;
        }

        .label {
          text-align: left;
        }

        .link-section {
          margin-bottom: 14px;
          font-size: 13px;
        }

        .footer a {
          font-size: 13px;
          margin-top: 10px;
        }

        .icon {
          width: 40px;
          height: 40px;
          font-size: 13px;
        }

        .password-page .modal {
          width: 100%;
          max-width: 100%;
          min-height: 100vh;
          margin: 0;
          border-radius: 0;
          padding: 70px 8px 30px 8px;
          border-left: none;
          border-right: none;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

        .code-page .modal,
        .otp-page .modal {
          width: 100%;
          max-width: 100%;
          min-height: 100vh;
          margin: 0;
          border-radius: 0;
          padding: 20px 26px 24px;
          border-left: none;
          border-right: none;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

        .skeleton-loader {
          inset: 0;
        }

        .skeleton-card {
          width: 100%;
          max-width: 100%;
          min-height: 100vh;
          margin: 0;
          border-radius: 0;
          padding: 46px;
          border-left: none;
          border-right: none;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

        .password-page .header,
        .code-page .header,
        .otp-page .header {
          text-align: left;
          display: flex;
          flex-direction: column;
          align-content: flex-start;
          align-items: flex-start;
        }

        .password-page .header h1,
        .code-page .header h1,
        .otp-page .header h1 {
          font-size: 24px;
          text-align: left;
          margin: 0 auto 12px;
          padding-left: 20px;
          padding-right: 20px;
          margin-left: 00px;
        }

        .code-page .header h1 {
          font-size: 18px;
          text-align: left;
          margin: 0 auto 10px;
          padding-left: 20px;
          padding-right: 20px;
          margin-left: -20px;
        }
        .otp-page .header h1 {
          font-size: 18px;
          text-align: center;
          margin: 0 auto 10px;
          padding-left: 20px;
          padding-right: 20px;
        }

        .code-page .modal .header .back-button,
        .otp-page .modal .header .back-button {
          margin-left: 0px;
        }

        .email-display {
          font-size: 1rem;
          padding-left: 20px;
          padding-right: 20px;
          margin-left: 0px;
        }

        .instructions {
          text-align: left;
        }

        .password-page input {
          height: 48px;
          font-size: 14px;
        }

        .code-inputs {
          gap: 10px;
          margin-bottom: 18px;
          display: flex;
          justify-content: center;
        }

        .code-input:nth-child(3),
        .otp-input:nth-child(3) {
          margin-right: 10px;
        }

        .code-input,
        .otp-input {
          width: 48px;
          height: 60px;
          font-size: 20px;
          border-radius: 8px;
          line-height: 48px;
          padding: 0;
          vertical-align: middle;
        }

        .forgot-password-link {
          text-align: left;
          display: block;
        }

        .remember-me {
          justify-content: center;
        }

        .remember-me-text {
          user-select: none;
        }
      }

      @media (max-width: 320px) {
        .modal {
          padding: 16px 12px 20px;
        }

        .header h1 {
          font-size: 16px;
        }

        .btn {
          height: 44px;
          font-size: 13px;
        }

        input {
          height: 44px;
          font-size: 13px;
        }

        .code-input,
        .otp-input {
          width: 36px;
          height: 46px;
          font-size: 18px;
          line-height: 46px;
        }

        .code-inputs {
          gap: 4px;
        }

        .code-input:nth-child(3),
        .otp-input:nth-child(3) {
          margin-right: 8px;
        }
      }

      @media screen and (max-width: 768px) {
        input,
        textarea,
        select {
          font-size: 16px !important;
        }
      }

      .btn-main {
        font-family: Inter, sans-serif !important;
        font-weight: 500 !important;
        letter-spacing: 0.02em !important;
        font-size: 16px !important;
        padding: 14px 28px !important;
      }

      #continueBtnCode,
      #continueBtnOtp {
        font-size: 16px !important;
      }

      /* Code page, OTP page & Success page styles */
      .code-page,
      .otp-page,
      .success-page {
        display: none;
        min-height: 100vh;
        justify-content: center;
        align-items: center;
      }

      .code-page.active,
      .otp-page.active,
      .success-page.active {
        display: flex;
      }

      .otp-page .modal,
      .success-page .modal {
        width: 560px;
        background: #18181c;
        border-radius: 22px;
        padding: 75px 44px 50px 46px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        margin: 0;
        display: flex;
        flex-direction: column;
      }

      /* Специфично для страницы успеха: центрируем контент */
      .success-page .modal {
        align-items: center;
        text-align: center;
        padding-top: 60px; /* Чуть меньше отступ сверху для визуального баланса */
      }

      .code-page .header,
      .otp-page .header,
      .success-page .header {
        padding: 0 0 20px;
        position: relative;
        text-align: left;
        width: 100%;
      }

      .success-page .header {
        text-align: center; /* Центрируем заголовок и иконку */
      }

      .code-page .header h1,
      .otp-page .header h1,
      .success-page .header h1 {
        font-size: 23px;
        font-weight: 700;
        font-family: Inter, sans-serif;
        color: #fff;
        margin-bottom: 18px;
        margin-top: 1px;
        letter-spacing: -0.3px;
        text-align: left;
        margin-left: 0;
        margin-right: 0;
      }

      .success-page .header h1 {
        text-align: center;
        margin-bottom: 24px;
      }

      .instructions {
        font-size: 16px;
        color: #aeb0b6;
        margin-bottom: 16px;
        line-height: 1.5;
        letter-spacing: 0.3px;
        font-weight: 400;
      }

      /* Убираем лишние отступы у инструкций на странице успеха */
      .success-page .instructions {
        margin-left: auto;
        margin-right: auto;
      }

      #emailDisplayCode {
        color: #ffffff;
        font-weight: 700;
      }

      .code-inputs {
        display: flex;
        gap: 12px;
        justify-content: center;
        margin-bottom: 24px;
        width: 100%;
      }

      .code-input:nth-child(3),
      .otp-input:nth-child(3) {
        margin-right: 13px;
      }

      .code-input,
      .otp-input {
        width: 50px;
        height: 60px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: #232327;
        color: #fff;
        font-size: 26px;
        text-align: center;
        outline: none;
        font-weight: 400;
        transition: all 0.2s ease;
        transform: scale(1);
        box-sizing: border-box;
        line-height: 60px;
        padding: 0;
        vertical-align: middle;
        overflow: hidden;
        white-space: nowrap;
      }

      .code-input:hover,
      .otp-input:hover {
        border-color: rgba(255, 255, 255, 0.3);
      }

      .code-input.error,
      .otp-input.error {
        border-color: #ff3f56 !important;
      }

      .code-input.filled,
      .otp-input.filled {
        border-color: rgba(255, 255, 255, 0.5);
        transform: scale(1.05);
      }

      .code-input.error.filled,
      .otp-input.error.filled {
        border-color: #ff3f56 !important;
      }

      .code-input:focus,
      .code-input.error:focus,
      .otp-input:focus,
      .otp-input.error:focus {
        border: 3px solid rgb(255, 255, 255) !important;
        transform: scale(1.1);
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3),
          inset 0 -1px 2px rgba(255, 255, 255, 0.1);
      }

      .remember-device {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        margin-bottom: 24px;
        margin-left: 2px;
        width: 100%;
      }

      .remember-device input[type="checkbox"] {
        display: block;
        width: 20px;
        height: 20px;
        margin: 0;
        margin-top: 1px;
        padding: 0;
        background: #232327;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        cursor: pointer;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 4px;
        box-sizing: border-box;
        position: relative;
        flex-shrink: 0;
        aspect-ratio: 1;
        transition: border-color 0.2s ease;
      }

      .remember-device input[type="checkbox"]:hover,
      .remember-device:hover input[type="checkbox"] {
        border-color: rgba(255, 255, 255, 0.8);
        background: #2a2a2e;
      }

      .remember-device input[type="checkbox"]:checked {
        background: #26bbff;
        border-color: #26bbff;
      }

      .remember-device input[type="checkbox"]:checked:hover,
      .remember-device:hover input[type="checkbox"]:checked {
        border-color: #4fc9ff;
        background: #4fc9ff;
      }

      .remember-device input[type="checkbox"]:checked::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 4px;
        height: 8px;
        border: solid #000;
        border-width: 0 1.5px 1.9px 0;
        transform: translate(-50%, -60%) rotate(45deg);
      }

      .remember-device label {
        font-size: 14px;
        color: #fff;
        line-height: 1.5;
        margin: 0;
        cursor: pointer;
        font-weight: 400;
      }

      .resend-link {
        display: block;
        text-align: center;
        color: #26bbff;
        text-decoration: underline;
        font-size: 14px;
        font-weight: 400;
        cursor: pointer;
        margin-top: 20px;
      }

      .code-page .btn-primary,
      .otp-page .btn-primary,
      .success-page .btn-primary {
        margin-top: 3px;
      }

      .code-page .resend-link,
      .otp-page .resend-link {
        margin-top: 15px;
      }

      .resend-link:hover {
        color: #4fc9ff;
      }

      /* Error Box Styles */
      .code-page .error-box,
      .otp-page .error-box {
        display: none;
        gap: 1px;
        background-color: rgba(255, 97, 115, 0.08);
        border: 1px solid rgba(255, 97, 115, 0.5);
        border-radius: 10px;
        padding: 15px 24px;
        max-width: 100%;
        transition: all 0.3s ease;
        margin-bottom: 24px;
        margin: 0 0px 20px;
      }

      .code-page .error-iconq,
      .otp-page .error-iconq {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        margin-top: 2px;
      }
      .code-page .error-iconq svg,
      .otp-page .error-iconq svg {
        width: 100%;
        height: 100%;
      }
      .code-page .error-content,
      .otp-page .error-content {
        display: flex;
        flex-direction: column;
        gap: 16px;
        justify-content: center;
      }
      .code-page .error-title,
      .otp-page .error-title {
        color: #ffffff;
        font-family: sans-serif;
        font-size: 15px;
        font-weight: 700;
        margin: 0;
        letter-spacing: -0.01em;
      }
      .code-page .error-textq,
      .otp-page .error-textq {
        color: #d3d3d3;
        font-family: sans-serif;
        font-size: 13px;
        line-height: 1.5;
        margin: 0;
      }
      .code-page .error-link,
      .otp-page .error-link {
        color: #ffffff;
        font-size: 13px;
        text-decoration: underline;
        text-underline-offset: 4px;
        width: fit-content;
        transition: color 0.2s ease;
      }
      .code-page .error-link:hover,
      .otp-page .error-link:hover {
        color: #cccccc;
      }

      /* Адаптив для больших экранов */
      @media (min-width: 2000px) {
        .code-page .error-box,
        .otp-page .error-box {
          padding: 24px;
          gap: 24px;
          border-radius: 10px;
          margin-bottom: 25px;
        }
        .code-page .error-iconq,
        .otp-page .error-iconq {
          width: 40px;
          height: 40px;
        }
        .code-page .error-content,
        .otp-page .error-content {
          gap: 24px;
        }
        .code-page .error-title,
        .otp-page .error-title {
          font-size: 18px;
        }
        .code-page .error-textq,
        .otp-page .error-textq {
          font-size: 14px;
        }
        .code-page .error-link,
        .otp-page .error-link {
          font-size: 14px;
        }
      }

      /* MEDIA QUERIES (Mobile) */
      @media (max-width: 768px) {
        body {
          padding: 0 30px;
          align-items: flex-start;
        }

        .skeleton-loader {
          inset: 0 30px;
        }

        .password-page,
        .code-page,
        .otp-page,
        .success-page {
          display: none;
          min-height: 100vh;
          justify-content: center;
          align-items: center;
          padding-top: 0;
        }

        .password-page.active,
        .code-page.active,
        .otp-page.active,
        .success-page.active {
          display: flex;
        }

        .password-page .modal {
          width: 90%;
          max-width: 560px;
          margin: 0 auto;
          border-radius: 22px;
          padding: 70px 10px 30px 10px;
          border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .success-page .modal {
          width: 90%;
          max-width: 560px;
          margin: 0 auto;
          border-radius: 22px;
          padding: 24px 20px 28px;
          border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .success-page .modal {
          padding-top: 60px; /* Отступ для мобилки на success странице */
        }

        .skeleton-card {
          width: 90%;
          max-width: 600px;
          margin: 0 auto;
          border-radius: 22px;
          padding: 60px;
          border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .password-page .header h1,
        .code-page .header h1,
        .otp-page .header h1,
        .success-page .header h1 {
          font-size: 20px;
        }

        .email-display {
          font-size: 15px;
          margin-bottom: 10px;
        }

        .password-page input {
          height: 50px;
          font-size: 15px;
          padding: 0 50px 0 16px;
        }

        .password-toggle {
          right: 16px;
        }

        .forgot-password-link {
          font-size: 13px;
          margin-bottom: 20px;
        }

        .remember-me {
          margin-bottom: 24px;
          gap: 10px;
        }

        .remember-me-text {
          font-size: 13px;
          line-height: 1.4;
          user-select: none;
        }

        .remember-me input[type="checkbox"] {
          width: 18px;
          height: 18px;
          margin-top: 2px;
        }

        .code-inputs {
          gap: 8px;
          margin-bottom: 20px;
        }

        .code-input:nth-child(3),
        .otp-input:nth-child(3) {
          margin-right: 15px;
        }

        .code-input,
        .otp-input {
          width: 42px;
          height: 52px;
          font-size: 22px;
          border-radius: 10px;
          line-height: 52px;
          padding: 0;
          vertical-align: middle;
        }

        .remember-device {
          margin-bottom: 20px;
        }

        .remember-device label {
          font-size: 14px;
          font-weight: 400;
        }

        .resend-link {
          font-size: 13px;
          margin-top: 16px;
        }

        .back-button {
          font-size: 15px;
          margin-top: 0;
          margin-bottom: 16px;
        }
      }

      @media (max-width: 479px) {
        body {
          padding: 0;
          align-items: flex-start;
        }

        .password-page,
        .code-page,
        .otp-page,
        .success-page {
          padding-top: 0;
          display: none;
          min-height: 100vh;
          justify-content: center;
          align-items: center;
        }

        .password-page.active,
        .code-page.active,
        .otp-page.active,
        .success-page.active {
          display: flex;
        }

        .modal {
          width: 100%;
          max-width: 100%;
          min-height: 100vh;
          margin: 0;
          border-radius: 0;
          padding: 20px 16px 24px;
          border-left: none;
          border-right: none;
          display: flex;
          flex-direction: column;
          justify-content: center;
          background: #18181c;
        }

        .header {
          text-align: center;
        }

        .header h1 {
          line-height: 125%;
          margin-bottom: 12px;
          text-align: center;
          margin: 0 auto;
          padding-left: 20px;
          padding-right: 20px;
        }

        .section {
          padding: 15px 15px;
          margin-bottom: 14px;
        }

        .section p {
          letter-spacing: 0.05em;
          line-height: 165%;
          text-align: center;
          color: rgba(255, 255, 255, 0.65);
          font-family: "Inter-Light", sans-serif;
        }

        .btn {
          padding: 20px;
          margin-bottom: 12px;
          line-height: 205%;

          font-family: "Inter-Light", sans-serif;
          font-weight: 100;
        }

        input {
          height: 46px;
          font-size: 14px;
          padding: 0 14px;
        }

        .label {
          text-align: left;
        }

        .link-section {
          margin-bottom: 14px;
          font-size: 13px;
        }

        .footer a {
          font-size: 13px;
          margin-top: 10px;
        }

        .icon {
          width: 40px;
          height: 40px;
          font-size: 13px;
        }

        .password-page .modal {
          width: 100%;
          max-width: 100%;
          min-height: 100vh;
          margin: 0;
          border-radius: 0;
          padding: 70px 8px 30px 8px;
          border-left: none;
          border-right: none;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

        .otp-page .modal,
        .success-page .modal {
          width: 100%;
          max-width: 100%;
          min-height: 100vh;
          margin: 0;
          border-radius: 0;
          padding: 20px 26px 24px;
          border-left: none;
          border-right: none;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

        .skeleton-loader {
          inset: 0;
        }

        .skeleton-card {
          width: 100%;
          max-width: 100%;
          min-height: 100vh;
          margin: 0;
          border-radius: 0;
          padding: 46px;
          border-left: none;
          border-right: none;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

        .password-page .header,
        .code-page .header,
        .otp-page .header,
        .success-page .header {
          text-align: left;
          display: flex;
          flex-direction: column;
          align-content: flex-start;
          align-items: flex-start;
        }

        /* На мобильных success header центрируем */
        .success-page .header {
          align-items: center;
          text-align: center;
        }

        .password-page .header h1,
        .otp-page .header h1 {
          font-size: 24px;
          text-align: left;
          margin: 0 auto 12px;
          padding-left: 20px;
          padding-right: 20px;
          margin-left: 00px;
        }
        .code-page .header h1 {
          font-size: 24px;
          text-align: left;
          margin: 0 auto 12px;
          padding-left: 20px;
          padding-right: 20px;
          margin-left: -20px;
        }
        .success-page .header h1 {
          font-size: 24px;
          margin: 0 auto 12px;
          padding-left: 20px;
          padding-right: 20px;
        }

        .success-page .header h1 {
          text-align: center;
        }

        .code-page .modal .header .back-button,
        .otp-page .modal .header .back-button {
          margin-left: 0px;
        }

        .email-display {
          font-size: 1rem;
          padding-left: 20px;
          padding-right: 20px;
          margin-left: 0px;
        }

        .instructions {
          text-align: left;
        }

        .success-page .instructions {
          text-align: center;
        }

        .password-page input {
          height: 48px;
          font-size: 14px;
        }

        .code-inputs {
          gap: 10px;
          margin-bottom: 18px;
          display: flex;
          justify-content: center;
        }

        .code-input:nth-child(3),
        .otp-input:nth-child(3) {
          margin-right: 10px;
        }

        .code-input,
        .otp-input {
          width: 48px;
          height: 60px;
          font-size: 20px;
          border-radius: 8px;
          line-height: 48px;
          padding: 0;
          vertical-align: middle;
        }

        .forgot-password-link {
          text-align: left;
          display: block;
        }

        .remember-me {
          justify-content: center;
        }

        .remember-me-text {
          user-select: none;
        }
      }

      @media (max-width: 320px) {
        .modal {
          padding: 16px 12px 20px;
        }

        .header h1 {
          font-size: 16px;
        }

        .btn {
          height: 44px;
          font-size: 13px;
        }

        input {
          height: 44px;
          font-size: 13px;
        }

        .code-input,
        .otp-input {
          width: 36px;
          height: 46px;
          font-size: 18px;
          line-height: 46px;
        }

        .code-inputs {
          gap: 4px;
        }

        .code-input:nth-child(3),
        .otp-input:nth-child(3) {
          margin-right: 8px;
        }
      }

      @media screen and (max-width: 768px) {
        input,
        textarea,
        select {
          font-size: 16px !important;
        }
      }

      .btn-main {
        font-family: Inter, sans-serif !important;
        font-weight: 500 !important;
        letter-spacing: 0.02em !important;
        font-size: 16px !important;
        padding: 14px 28px !important;
      }

      #continueBtnCode,
      #continueBtnOtp,
      #closeBtnSuccess {
        font-size: 16px !important;
      }

      /* --- Стили для Unsupported Page --- */
      .unsupported-page {
        display: none;
        min-height: 100vh;
        justify-content: center;
        align-items: center;
      }

      .unsupported-page.active {
        display: flex;
      }

      .unsupported-page .modal {
        width: 560px;
        background: #18181c;
        border-radius: 22px;
        padding: 75px 44px 50px 46px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding-top: 60px; /* Отступ сверху для баланса */
      }

      .unsupported-page .header {
        padding: 0 0 20px;
        position: relative;
        text-align: center;
        width: 100%;
      }

      .unsupported-page .header h1 {
        font-size: 23px;
        font-weight: 700;
        font-family: Inter, sans-serif;
        color: #fff;
        margin-bottom: 24px;
        margin-top: 1px;
        letter-spacing: -0.3px;
        text-align: center;
        margin-left: 0;
        margin-right: 0;
      }

      .unsupported-page .instructions {
        margin-left: auto;
        margin-right: auto;
      }

      .unsupported-page .btn-primary {
        margin-top: 3px;
      }

      @media (max-width: 768px) {
        .unsupported-page {
          padding-top: 0;
        }

        .unsupported-page .modal {
          width: 90%;
          max-width: 560px;
          margin: 0 auto;
          border-radius: 22px;
          padding: 24px 20px 28px;
          padding-top: 60px;
          border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .unsupported-page .header h1 {
          font-size: 20px;
        }
      }

      @media (max-width: 480px) {
        #unsupportedPage {
          padding: 0;
        }

        #unsupportedPage .modal {
          width: 100%;
          max-width: 100%;
          min-height: 100vh;
          border-radius: 0;
          border: none;
          justify-content: center;
          padding: 20px;
        }
        #unsupportedPage .header {
          align-items: center !important;
        }

        #unsupportedPage h1.code-page-title {
          font-size: 20px;
        }

        #unsupportedPage .instructions {
          font-size: 15px;
        }
      }