:root {
  color-scheme: light dark;
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;

  --bg-1: #f5f8ff;
  --bg-2: #eef3ff;
  --text-main: #1f2a37;
  --text-sub: #5b6778;
  --label-text: #344054;
  --card-bg: rgba(255, 255, 255, 0.92);
  --card-border: rgba(255, 255, 255, 0.7);
  --primary: #2f6fed;
  --primary-hover: #235ad0;
  --primary-shadow: rgba(47, 111, 237, 0.35);
  --input-border: #cfdaec;
  --input-focus: #84a9ff;
  --input-bg: #fdfefe;
  --input-bg-focus: #ffffff;
  --input-text: #122033;
  --placeholder-text: #98a3b5;
  --desc-highlight-bg: rgba(255, 255, 255, 0.42);
  --desc-highlight-border: rgba(47, 111, 237, 0.55);
  --desc-highlight-shadow: rgba(47, 111, 237, 0.12);
  --card-grad-start: rgba(255, 255, 255, 0.66);
  --card-grad-end: rgba(245, 250, 255, 0.52);
  --bg-image-pc-light: url('https://pic.rtx.al/illust_114369152_20240509_225747.jpg');
  --bg-image-mobile-light: url('https://pic.rtx.al/illust_115852598_20250216_114647.png');
  --bg-image-pc-dark: url('https://pic.rtx.al/130460755_p0%20(1).jpg');
  --bg-image-mobile-dark: url('https://pic.rtx.al/illust_115852598_20250216_114647.png');
  --bg-image-current: var(--bg-image-pc-light);
  --success-bg: rgba(233, 249, 239, 0.46);
  --success-text: #166534;
  --success-border: rgba(184, 231, 200, 0.75);
  --error-bg: rgba(253, 236, 236, 0.46);
  --error-text: #991b1b;
  --error-border: rgba(243, 185, 185, 0.75);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg-1);
  background-image: var(--bg-image-current);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--text-main);
}

.container {
  max-width: 580px;
  margin: clamp(30px, 8vh, 72px) auto;
  padding: 0 18px;
}

h1 {
  margin: 0 0 10px;
  font-size: clamp(26px, 4.2vw, 34px);
  line-height: 1.2;
  letter-spacing: 0.3px;
}

.desc {
  margin: 0 0 18px;
  color: var(--text-sub);
  line-height: 1.65;
  padding: 9px 12px;
  border-left: 3px solid var(--desc-highlight-border);
  border-radius: 10px;
  background: var(--desc-highlight-bg);
  box-shadow: 0 8px 18px -14px var(--desc-highlight-shadow);
  backdrop-filter: blur(2px);
}

.card {
  background: linear-gradient(145deg, var(--card-grad-start) 0%, var(--card-grad-end) 100%);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 22px;
  box-shadow:
    0 10px 26px rgba(28, 57, 117, 0.11),
    0 2px 8px rgba(28, 57, 117, 0.08);
  backdrop-filter: blur(4px);
  display: grid;
  gap: 16px;
}

label {
  display: grid;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--label-text);
}

input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--input-border);
  border-radius: 10px;
  font-size: 15px;
  color: var(--input-text);
  background: var(--input-bg);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

input::placeholder {
  color: var(--placeholder-text);
}

input:hover {
  border-color: #b9c9e3;
}

input:focus {
  border-color: var(--input-focus);
  background: var(--input-bg-focus);
  box-shadow: 0 0 0 4px rgba(71, 121, 255, 0.14);
}

button {
  padding: 11px 14px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(180deg, #3f7df4 0%, var(--primary) 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 8px 16px -8px var(--primary-shadow);
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}

button:hover {
  background: linear-gradient(180deg, #3a74e8 0%, var(--primary-hover) 100%);
  box-shadow: 0 11px 20px -10px var(--primary-shadow);
}

button:active {
  transform: translateY(1px);
}

button:focus-visible {
  outline: 3px solid rgba(71, 121, 255, 0.25);
  outline-offset: 2px;
}

button[disabled] {
  opacity: 0.72;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.result {
  margin-top: 18px;
  border-radius: 12px;
  padding: 13px 15px;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  animation: fade-in-up 0.2s ease;
}

.result.success {
  background: var(--success-bg);
  color: var(--success-text);
  border: 1px solid var(--success-border);
}

.result.error {
  background: var(--error-bg);
  color: var(--error-text);
  border: 1px solid var(--error-border);
}

.hidden {
  display: none;
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-1: #0b1220;
    --bg-2: #101a2e;
    --text-main: #e5ecfa;
    --text-sub: #b7c2d8;
    --label-text: #d2ddf2;
    --card-bg: rgba(17, 27, 46, 0.78);
    --card-border: rgba(148, 173, 221, 0.22);
    --primary: #5f91ff;
    --primary-hover: #4f82f2;
    --primary-shadow: rgba(37, 91, 206, 0.55);
    --input-border: #344a73;
    --input-focus: #7ea6ff;
    --input-bg: rgba(11, 18, 32, 0.82);
    --input-bg-focus: rgba(11, 18, 32, 0.96);
    --input-text: #e5ecfa;
    --placeholder-text: #8ea0c0;
    --desc-highlight-bg: rgba(8, 17, 34, 0.38);
    --desc-highlight-border: rgba(126, 166, 255, 0.75);
    --desc-highlight-shadow: rgba(126, 166, 255, 0.25);
    --card-grad-start: rgba(26, 40, 67, 0.50);
    --card-grad-end: rgba(15, 26, 46, 0.42);
    --bg-image-current: var(--bg-image-pc-dark);
    --success-bg: rgba(8, 56, 40, 0.64);
    --success-text: #baf2d0;
    --success-border: rgba(95, 211, 154, 0.45);
    --error-bg: rgba(81, 17, 26, 0.7);
    --error-text: #ffd2d6;
    --error-border: rgba(245, 143, 143, 0.44);
  }

  .card {
    box-shadow:
      0 12px 28px rgba(2, 8, 20, 0.52),
      0 2px 10px rgba(2, 8, 20, 0.4);
  }

  input:hover {
    border-color: #486193;
  }
}

@media (max-width: 480px) {
  :root {
    --bg-image-current: var(--bg-image-mobile-light);
  }

  body {
    background-attachment: scroll;
    background-position: center top;
  }

  .container {
    margin-top: 24px;
  }

  .card {
    padding: 18px;
    border-radius: 14px;
  }
}

@media (prefers-color-scheme: dark) and (max-width: 480px) {
  :root {
    --bg-image-current: var(--bg-image-mobile-dark);
  }
}