body {
  padding-inline: 80px;
}

main {
  padding-block: 40px 60px;

  .settings {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;

    h1 {
      font-size: 42px;
      margin-bottom: 8px;
    }

    .card {
      border-radius: 24px;
      padding: 24px;
      background: rgba(255, 255, 255, 0.82);
      border: 1px solid rgba(143, 29, 29, 0.13);
      backdrop-filter: blur(12px);
      box-shadow:
        0 16px 32px rgba(127, 29, 29, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
      display: flex;
      flex-direction: column;
      gap: 18px;

      .card-top {
        display: flex;
        flex-direction: column;
        gap: 8px;

        h2 {
          font-size: 28px;
        }

        p {
          font-size: 16px;
          color: rgba(43, 47, 54, 0.72);
          font-weight: 500;
        }
      }
    }

    .language-group {
      border: none;
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .language-option {
      min-width: 200px;
      border-radius: 16px;
      border: 1px solid rgba(143, 29, 29, 0.18);
      background: rgba(248, 249, 251, 0.96);
      padding: 14px 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 12px;
      transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;

      &:hover {
        transform: translateY(-1px);
        border-color: rgba(143, 29, 29, 0.5);
      }

      input {
        accent-color: #8f1d1d;
        width: 18px;
        height: 18px;
      }

      span {
        font-size: 17px;
      }
    }

    .language-option:has(input:checked) {
      border-color: rgba(143, 29, 29, 0.62);
      background: linear-gradient(
        135deg,
        rgba(243, 246, 250, 0.96),
        rgba(248, 250, 252, 0.96)
      );
      box-shadow: 0 10px 24px rgba(143, 29, 29, 0.16);
    }

    .danger-card {
      #logout {
        border: none;
        border-radius: 16px;
        padding: 13px 18px;
        width: fit-content;
        font-size: 17px;
        font-weight: 700;
        cursor: pointer;
        color: #ffffff;
        background: linear-gradient(135deg, #a12b2b, #7f1f1f);
        box-shadow:
          0 10px 22px rgba(184, 67, 67, 0.45),
          inset 0 1px 0 rgba(255, 255, 255, 0.25);
        transition:
          transform 0.2s ease,
          filter 0.2s ease,
          box-shadow 0.2s ease;

        &:hover {
          transform: translateY(-1px);
          filter: brightness(1.05);
          box-shadow:
            0 14px 28px rgba(184, 67, 67, 0.54),
            inset 0 1px 0 rgba(255, 255, 255, 0.34);
        }

        &:active {
          transform: translateY(0);
        }
      }
    }
  }
}

@media (max-width: 980px) {
  body {
    padding-inline: 28px;
  }

  main {
    .settings {
      h1 {
        font-size: 34px;
      }

      .card {
        .card-top {
          h2 {
            font-size: 24px;
          }
        }
      }
    }
  }
}

@media (max-width: 760px) {
  body {
    padding-inline: 16px;
  }

  main {
    .settings {
      .card {
        padding: 18px;
      }

      .language-option {
        width: 100%;
        min-width: 0;
      }

      .danger-card {
        #logout {
          width: 100%;
        }
      }
    }
  }
}