/* NAASE SE Basics Challenge — front-end styles */

.naase-app.naase-app {
  --naase-primary: #06509e;
  --naase-primary-dark: #054488;
  --naase-accent: #127edc;
  --naase-bg: #f4f8fc;
  --naase-card: #ffffff;
  --naase-ink: #2d2c34;
  --naase-muted: #5b6470;
  --naase-border: #e6ecf2;
  --naase-track: #eeedf1;
  --naase-field: #f4f7fb;
  --naase-radius: 16px;

  box-sizing: border-box;
  max-width: 1170px;
  margin: 0 auto;
  padding: 24px 16px;
  color: var(--naase-ink);
  font-family:
    "Roboto",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
.naase-app.naase-app *,
.naase-app.naase-app *::before,
.naase-app.naase-app *::after {
  box-sizing: border-box;
}

/* ---- Card / screens ---- */
.naase-app .naase-card {
  background: var(--naase-card);
  border: 1px solid var(--naase-border);
  border-radius: var(--naase-radius);
  padding: 48px 64px;
  box-shadow:
    0px 1px 4px rgba(12, 12, 13, 0.1),
    0px 1px 4px rgba(12, 12, 13, 0.05);
  border-radius: 8px;
}
.naase-app .naase-screen {
  display: none;
}
.naase-app .naase-screen.question {
  padding: 32px;
}
.naase-app .naase-screen.is-active {
  display: block;
}
.naase-app .naase-screen-inner {
  max-width: 914px;
  margin: 0 auto;
}
.naase-app .naase-text-center {
  text-align: center;
}

/* ---- Typography ---- */
.naase-app .naase-title {
  font-family:
    "League Gothic", "Oswald", "Arial Narrow", "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: 0.2px;
  margin: 0 0 24px;
  color: var(--naase-ink);
}
.naase-app .naase-title--md {
  font-size: clamp(28px, 4vw, 40px);
}
.naase-app .naase-title--sm {
  font-size: clamp(24px, 3vw, 32px);
  margin-bottom: 8px;
}
.naase-app .naase-lead {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  color: #2d2c34;
  margin: 0 auto 32px;
  max-width: 640px;
}

.naase-app .naase-lead-result {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  color: #2d2c34;
  margin: 0 auto 32px;
  max-width: 640px;
}

.naase-app .naase-title-completing,
.naase-app .naase-title-result {
  font-size: 36px;
  font-weight: 400;
  margin: 0 0 32px;
}

.naase-app .naase-title-leaderboard {
  font-size: 36px;
  font-weight: 400;
  margin: 0;
}

.naase-app.naase-app.naase-leaderboard .naase-card {
  padding: 32px;
}

/* Form controls don't inherit font-family by default — force the Roboto stack. */
.naase-app.naase-app button,
.naase-app.naase-app input,
.naase-app.naase-app select,
.naase-app.naase-app textarea {
  font-family: inherit;
}

/* ---- Buttons ---- */
.naase-app .naase-actions {
  display: flex;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}
.naase-app .naase-form .naase-actions .naase-btn {
  padding: 21px 36px;
}

.naase-app .naase-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  padding: 18px 36px;
  border-radius: 6px;
  cursor: pointer;
  border: 1.5px solid transparent;
  text-decoration: none;
  transition:
    background 0.15s,
    color 0.15s,
    box-shadow 0.15s;
}
.naase-app .naase-btn--primary {
  background: var(--naase-primary);
  color: #fff;
}
.naase-app .naase-btn--primary:hover {
  background: var(--naase-primary-dark);
  color: #fff;
}
.naase-app .naase-btn--ghost {
  background: #fff;
  font-weight: 500;
  color: #06509e !important;
  border-color: #06509e;
}
.naase-app .naase-btn--ghost:hover {
  background: #f0f6fd;
}
.naase-app .naase-btn--sm {
  padding: 10px 18px;
  font-size: 14px;
}

.naase-app .naase-btn--ghost .naase-btn-ico {
  width: 24px;
  height: 24px;
}

.naase-app .naase-btn-ico {
  width: 20px;
  height: 20px;
  flex: none;
  margin-right: 8px;
}
.naase-app .naase-btn-ico--after {
  margin-right: 0;
  margin-left: 8px;
}
.naase-app .naase-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.naase-app .naase-notice,
.naase-app .naase-error-text {
  color: var(--naase-muted);
  font-weight: 600;
}

/* ---- Feature tiles (start screen) ---- */
.naase-app .naase-features {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto 0;
  max-width: 1042px;
}
.naase-app .naase-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #e8eef3;
  border-radius: 6px;
  padding: 16px 20px;
  max-width: 265px;
  font-weight: 400;
  color: #2d2c34;
  font-size: 18px;
  line-height: 30px;
  text-align: left;
}
.naase-app .naase-feature-ico {
  width: 48px;
  height: 48px;
  flex: none;
  background: var(--naase-accent);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.naase-app .naase-ico-help {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Ccircle cx='24' cy='24' r='19' stroke='%23000' stroke-width='3'/%3E%3Cpath d='M19.5 19.2C19.5 16.6 21.6 14.5 24.2 14.5C26.8 14.5 28.9 16.6 28.9 19.2C28.9 21.7 27.1 22.7 25.6 23.7C24.5 24.5 24.2 25.3 24.2 26.8V27.8' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24.2 33h0.01' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Ccircle cx='24' cy='24' r='19' stroke='%23000' stroke-width='3'/%3E%3Cpath d='M19.5 19.2C19.5 16.6 21.6 14.5 24.2 14.5C26.8 14.5 28.9 16.6 28.9 19.2C28.9 21.7 27.1 22.7 25.6 23.7C24.5 24.5 24.2 25.3 24.2 26.8V27.8' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24.2 33h0.01' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.naase-app .naase-ico-tiers {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Cpath d='M33.4995 42.5H42.4995V5.5H33.4995V11.5M33.4995 42.5H24.1885M33.4995 42.5V11.5M24.1885 42.5H14.8774M24.1885 42.5V17.5M14.8774 42.5V23.5M14.8774 42.5H5.56641V23.5H14.8774M14.8774 23.5V17.5H24.1885M33.4995 11.5H24.1885V17.5' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Cpath d='M33.4995 42.5H42.4995V5.5H33.4995V11.5M33.4995 42.5H24.1885M33.4995 42.5V11.5M24.1885 42.5H14.8774M24.1885 42.5V17.5M14.8774 42.5V23.5M14.8774 42.5H5.56641V23.5H14.8774M14.8774 23.5V17.5H24.1885M33.4995 11.5H24.1885V17.5' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.naase-app .naase-ico-badge {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Cpath d='M19.4271 7.27712L19.4248 7.27906C18.3129 8.26909 16.8989 8.85613 15.4126 8.94115C13.8885 9.06316 13.1264 9.12516 12.4924 9.34917C11.7673 9.60552 11.1086 10.0207 10.5646 10.5644C10.0206 11.108 9.60503 11.7664 9.34822 12.4914C9.12421 13.1274 9.06221 13.8894 8.9402 15.4115C8.81619 16.9796 8.31816 18.2037 7.2781 19.4257L7.27617 19.428C6.2874 20.5886 5.79183 21.1702 5.502 21.7779C5.17058 22.4717 4.99839 23.2308 4.99805 23.9998C4.9977 24.7687 5.1692 25.528 5.5 26.2221C5.79202 26.8302 6.28805 27.4122 7.2801 28.5743C8.27013 29.6862 8.85517 31.1001 8.9402 32.5865C9.06221 34.1106 9.12421 34.8726 9.34822 35.5066C9.60456 36.2318 10.0197 36.8904 10.5634 37.4344C11.1071 37.9784 11.7654 38.394 12.4904 38.6508C13.1264 38.8748 13.8885 38.9368 15.4106 39.0588C16.8979 39.144 18.3126 39.7298 19.4248 40.7209L19.427 40.7228C20.5876 41.7116 21.1693 42.2072 21.7769 42.497C22.4709 42.8282 23.2301 43 23.999 43C24.768 43 25.5272 42.8282 26.2212 42.497C26.8292 42.207 27.4112 41.711 28.5733 40.7189C29.7714 39.6989 30.9854 39.1849 32.5855 39.0588C34.1096 38.9368 34.8717 38.8748 35.5057 38.6508C36.2308 38.3945 36.8895 37.9793 37.4335 37.4356C37.9775 36.892 38.3931 36.2336 38.6499 35.5086C38.8739 34.8726 38.9359 34.1106 39.0579 32.5885C39.143 31.1012 39.7288 29.6864 40.72 28.5743L40.7219 28.572C41.7107 27.4115 42.2063 26.8298 42.4961 26.2221C43.1681 24.818 43.1681 23.184 42.4961 21.7779C42.2061 21.1698 41.71 20.5878 40.718 19.4257C39.6979 18.2277 39.1839 17.0136 39.0579 15.4135C38.9359 13.8894 38.8739 13.1274 38.6499 12.4934C38.1318 11.0233 36.9758 9.8692 35.5077 9.34917C34.8717 9.12516 34.1096 9.06316 32.5875 8.94115C30.9874 8.81514 29.7714 8.29911 28.5733 7.27906L28.571 7.27713C27.4105 6.28836 26.8288 5.79279 26.2212 5.50296C25.5272 5.17184 24.768 5 23.999 5C23.2301 5 22.4709 5.17184 21.7769 5.50296C21.1693 5.79278 20.5876 6.28836 19.4271 7.27712Z' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M32.4135 19.8944H26.2658C26.1785 19.8954 26.0921 19.8766 26.0131 19.8394C25.9342 19.8023 25.8646 19.7477 25.8098 19.6798C25.7549 19.6119 25.7162 19.5324 25.6964 19.4474C25.6767 19.3624 25.6765 19.274 25.6958 19.1889C26.1758 17.1444 27.2235 12 23.6902 12C23.5183 11.999 23.3492 12.0439 23.2003 12.13C23.0515 12.2161 22.9283 12.3404 22.8436 12.49L21.4213 15.0078C20.0913 17.36 17.4036 18.3667 15.1125 19.5956C14.7691 19.78 14.5547 20.1344 14.5547 20.52V30.9477C14.5573 31.2293 14.6716 31.4982 14.8725 31.6955C15.0733 31.8928 15.3443 32.0023 15.6258 32H29.538C31.5646 32 35.2424 19.8944 32.4135 19.8944Z' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Cpath d='M19.4271 7.27712L19.4248 7.27906C18.3129 8.26909 16.8989 8.85613 15.4126 8.94115C13.8885 9.06316 13.1264 9.12516 12.4924 9.34917C11.7673 9.60552 11.1086 10.0207 10.5646 10.5644C10.0206 11.108 9.60503 11.7664 9.34822 12.4914C9.12421 13.1274 9.06221 13.8894 8.9402 15.4115C8.81619 16.9796 8.31816 18.2037 7.2781 19.4257L7.27617 19.428C6.2874 20.5886 5.79183 21.1702 5.502 21.7779C5.17058 22.4717 4.99839 23.2308 4.99805 23.9998C4.9977 24.7687 5.1692 25.528 5.5 26.2221C5.79202 26.8302 6.28805 27.4122 7.2801 28.5743C8.27013 29.6862 8.85517 31.1001 8.9402 32.5865C9.06221 34.1106 9.12421 34.8726 9.34822 35.5066C9.60456 36.2318 10.0197 36.8904 10.5634 37.4344C11.1071 37.9784 11.7654 38.394 12.4904 38.6508C13.1264 38.8748 13.8885 38.9368 15.4106 39.0588C16.8979 39.144 18.3126 39.7298 19.4248 40.7209L19.427 40.7228C20.5876 41.7116 21.1693 42.2072 21.7769 42.497C22.4709 42.8282 23.2301 43 23.999 43C24.768 43 25.5272 42.8282 26.2212 42.497C26.8292 42.207 27.4112 41.711 28.5733 40.7189C29.7714 39.6989 30.9854 39.1849 32.5855 39.0588C34.1096 38.9368 34.8717 38.8748 35.5057 38.6508C36.2308 38.3945 36.8895 37.9793 37.4335 37.4356C37.9775 36.892 38.3931 36.2336 38.6499 35.5086C38.8739 34.8726 38.9359 34.1106 39.0579 32.5885C39.143 31.1012 39.7288 29.6864 40.72 28.5743L40.7219 28.572C41.7107 27.4115 42.2063 26.8298 42.4961 26.2221C43.1681 24.818 43.1681 23.184 42.4961 21.7779C42.2061 21.1698 41.71 20.5878 40.718 19.4257C39.6979 18.2277 39.1839 17.0136 39.0579 15.4135C38.9359 13.8894 38.8739 13.1274 38.6499 12.4934C38.1318 11.0233 36.9758 9.8692 35.5077 9.34917C34.8717 9.12516 34.1096 9.06316 32.5875 8.94115C30.9874 8.81514 29.7714 8.29911 28.5733 7.27906L28.571 7.27713C27.4105 6.28836 26.8288 5.79279 26.2212 5.50296C25.5272 5.17184 24.768 5 23.999 5C23.2301 5 22.4709 5.17184 21.7769 5.50296C21.1693 5.79278 20.5876 6.28836 19.4271 7.27712Z' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M32.4135 19.8944H26.2658C26.1785 19.8954 26.0921 19.8766 26.0131 19.8394C25.9342 19.8023 25.8646 19.7477 25.8098 19.6798C25.7549 19.6119 25.7162 19.5324 25.6964 19.4474C25.6767 19.3624 25.6765 19.274 25.6958 19.1889C26.1758 17.1444 27.2235 12 23.6902 12C23.5183 11.999 23.3492 12.0439 23.2003 12.13C23.0515 12.2161 22.9283 12.3404 22.8436 12.49L21.4213 15.0078C20.0913 17.36 17.4036 18.3667 15.1125 19.5956C14.7691 19.78 14.5547 20.1344 14.5547 20.52V30.9477C14.5573 31.2293 14.6716 31.4982 14.8725 31.6955C15.0733 31.8928 15.3443 32.0023 15.6258 32H29.538C31.5646 32 35.2424 19.8944 32.4135 19.8944Z' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.naase-app .naase-ico-star {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z'/%3E%3C/svg%3E");
}

/* ============ QUESTION SCREEN ============ */
.naase-app .naase-q {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 28px;
}
.naase-app .naase-q-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.naase-app .naase-q-count {
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  white-space: nowrap;
  color: #2d2c34;
}
.naase-app .naase-bar {
  display: block;
  flex: 1;
  height: 6px;
  border-radius: 6px;
  background: var(--naase-track);
  overflow: hidden;
}
.naase-app .naase-bar-fill {
  display: block;
  height: 100%;
  min-width: 2px;
  background: var(--naase-accent);
  border-radius: 6px;
  transition: width 0.3s;
}
.naase-app .naase-q-text {
  font-size: 24px;
  font-weight: 400;
  margin: 0 0 24px;
}

.naase-app .naase-options {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.naase-app .naase-option {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid #e8eef3;
  border-radius: 6px;
  padding: 8px 20px;
  cursor: pointer;
  background: #fff;
  text-align: left;
  width: 100%;
  transition:
    border-color 0.12s,
    box-shadow 0.12s;
}
.naase-app .naase-option:hover {
  border-color: #c3d4ea;
}
.naase-app .naase-option:focus {
  outline: none;
}
.naase-app .naase-option-letter {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 24px;
  border: 1px solid #e8eef3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--naase-ink);
}
.naase-app .naase-option-text {
  flex: 1;
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  color: #2d2c34;
}
.naase-app .naase-option-radio {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  background-color: #e8eef3;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 11px;
}
.naase-app .naase-option.is-selected .naase-option-radio {
  background-color: #127edc;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='13' viewBox='0 0 16 13' fill='none'%3E%3Cpath d='M6.12668 12.1844C5.97396 12.3381 5.76557 12.4238 5.54912 12.4238C5.33268 12.4238 5.12428 12.3381 4.97156 12.1844L0.359012 7.57112C-0.119671 7.09244 -0.119671 6.3162 0.359012 5.83844L0.936572 5.26073C1.41541 4.78204 2.19072 4.78204 2.6694 5.26073L5.54916 8.1406L13.3305 0.359012C13.8094 -0.119671 14.5854 -0.119671 15.0634 0.359012L15.6409 0.936725C16.1196 1.41541 16.1196 2.19149 15.6409 2.6694L6.12668 12.1844Z' fill='%23fff'/%3E%3C/svg%3E");
}

/* Sidebar */
.naase-app .naase-q-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.naase-app .naase-side-card {
  border: 1px solid #e8eef3;
  border-radius: 6px;
  padding: 16px 20px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.naase-app .naase-side-ico {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  background: #ffffff;
  position: relative;
  border: 1px solid #e8eef3;
  -webkit-mask: none;
}
.naase-app .naase-side-ico.naase-side-ico--info {
  background: none;
  border: none;
  width: 24px;
  height: 24px;
}
.naase-app .naase-side-ico.naase-side-ico--info::after {
  inset: 0;
}
.naase-app .naase-side-ico::after {
  content: "";
  position: absolute;
  inset: 12px;
  background: var(--naase-accent);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.naase-app .naase-side-ico--clock::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6V12L16 10'/%3E%3Cpath d='M21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778 20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604 18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442C3.23279 14.3522 3 13.1819 3 12C3 9.61305 3.94821 7.32387 5.63604 5.63604C7.32387 3.94821 9.61305 3 12 3C14.3869 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6V12L16 10'/%3E%3Cpath d='M21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778 20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604 18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442C3.23279 14.3522 3 13.1819 3 12C3 9.61305 3.94821 7.32387 5.63604 5.63604C7.32387 3.94821 9.61305 3 12 3C14.3869 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12Z'/%3E%3C/svg%3E");
}
.naase-app .naase-side-ico--book::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.0004 20V9.8C12.0004 8.096 12.1074 6.216 10.3624 5.327C9.72044 5 8.88044 5 7.20044 5H4.60044C3.36444 5 3.00044 5.437 3.00044 6.6V15.4C3.00044 15.968 2.96444 16.595 3.54644 16.891C3.76044 17 4.03944 17 4.59844 17H7.43044C9.80744 17 10.6904 18.036 11.9994 20C13.3094 18.036 14.1924 17 16.5694 17H19.4024C19.9614 17 20.2414 17 20.4544 16.891C21.0354 16.595 21.0004 15.967 21.0004 15.4V6.6C21.0004 5.436 20.6354 5 19.4004 5H16.8004C15.1204 5 14.2794 5 13.6374 5.327C11.8914 6.216 11.9994 8.096 11.9994 9.8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.0004 20V9.8C12.0004 8.096 12.1074 6.216 10.3624 5.327C9.72044 5 8.88044 5 7.20044 5H4.60044C3.36444 5 3.00044 5.437 3.00044 6.6V15.4C3.00044 15.968 2.96444 16.595 3.54644 16.891C3.76044 17 4.03944 17 4.59844 17H7.43044C9.80744 17 10.6904 18.036 11.9994 20C13.3094 18.036 14.1924 17 16.5694 17H19.4024C19.9614 17 20.2414 17 20.4544 16.891C21.0354 16.595 21.0004 15.967 21.0004 15.4V6.6C21.0004 5.436 20.6354 5 19.4004 5H16.8004C15.1204 5 14.2794 5 13.6374 5.327C11.8914 6.216 11.9994 8.096 11.9994 9.8'/%3E%3C/svg%3E");
}
.naase-app .naase-side-ico--info::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 11.25V16.25'/%3E%3Cpath d='M12 8h0.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 11.25V16.25'/%3E%3Cpath d='M12 8h0.01'/%3E%3C/svg%3E");
}
.naase-app .naase-side-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 22px;
  color: #2d2c34;
}
.naase-app .naase-side-value {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
}
.naase-app .naase-side-time {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}
.naase-app .naase-side-card--context {
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.naase-app .naase-side-context-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
}
.naase-app .naase-side-context-body {
  font-size: 14px;
  font-weight: 400;
  color: #2d2c34;
  line-height: 1.2;
}
.naase-app .naase-q-next {
  width: 100%;
  font-weight: 600;
  font-size: 14px;
  padding: 16px 36px;
  /* Pin the button to the bottom of the side column so it lines up with the last
       answer, as in the design — the side column stretches to the question's height. */
  margin-top: auto;
}

/* ============ CONTACT FORM ============ */
.naase-app .naase-result-strip {
  display: flex;
  justify-content: center;
  gap: 0;
  border: 1px solid #e8eef3;
  border-radius: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 32px;
  overflow: hidden;
}
.naase-app .naase-stat {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  flex: 0 0 auto;
}
.naase-app .naase-stat + .naase-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: #e8eef3;
}
.naase-app .naase-stat-ico {
  width: 48px;
  height: 48px;
  flex: none;
}
.naase-app .naase-stat-label {
  font-size: 12px;
  line-height: 14px;
  font-weight: 600;
  color: #5b5a6f;
  text-align: start;
}
.naase-app .naase-stat-value {
  font-weight: 700;
  font-size: 24px;
  text-align: start;
  color: #2d2c34;
  white-space: nowrap;
}

.naase-app .naase-form {
  max-width: 452px;
  margin: 0 auto;
  text-align: start;
}
.naase-app .naase-form-intro {
  text-align: start;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
  margin-bottom: 24px;
  color: #2d2c34;
}
.naase-app .naase-field {
  width: 100%;
  background: #f4f8fd;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  color: #2d2c34;
  border: none;
}

.naase-app .naase-field::placeholder {
  color: #86909a;
}

.naase-app .naase-field:focus {
  outline: none;
  background: #f4f8fd;
}

.naase-app .naase-field--error {
  box-shadow: inset 0 0 0 1.5px #c0392b;
  background: #fdf3f2;
}

.naase-app .naase-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 24px;
  cursor: pointer;
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  color: #2d2c34;
}

.naase-app .naase-check input {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: #06509e;
  margin: 2px 0 0;
}

.naase-app .naase-check input:focus {
  outline: none;
}

.naase-app .naase-hp {
  position: absolute !important;
  left: -9999px !important;
  height: 0;
  width: 0;
  overflow: hidden;
}

.naase-app .naase-form .naase-actions {
  margin-top: 16px;
}

.naase-app .naase-privacy {
  display: flex;
  gap: 16px;
  align-items: center;
  color: #2d2c34;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 400;
  margin-top: 32px;
  justify-content: center;
  max-width: 405px;
  margin-left: auto;
  margin-right: auto;
}
.naase-app .naase-privacy-ico {
  width: 24px;
  height: 24px;
  flex: none;
}
.naase-app .naase-form-error {
  color: #c0392b;
  font-weight: 600;
  text-align: center;
  margin-bottom: 12px;
}

/* ============ RESULT / SHARE ============ */
.naase-app .naase-share {
  border: 1px solid #e8eef3;
  border-radius: 12px;
  padding: 24px;
  max-width: 730px;
  margin: 0 auto 0;
  text-align: left;
}
.naase-app .naase-share-head {
  font-weight: 600;
  font-size: 18px;
  line-height: 30px;
  color: #2d2c34;
  margin-bottom: 16px;
}
.naase-app .naase-share-body {
  display: flex;
  border: 1px solid #d0dee7;
  border-radius: 8px;
  gap: 0;
  padding: 16px;
  align-items: center;
}

.naase-app .naase-share-body .naase-share-text {
  font-weight: 400;
  font-size: 16px;
  color: #2d2c34;
}

.naase-app .naase-share-body .naase-share-text strong {
  font-weight: 500;
}

.naase-app .naase-share-body .naase-share-text a {
  color: #06509e;
  text-decoration: none;
  font-weight: 400;
  font-size: 16px;
}

.naase-app .naase-share-badge {
  flex: none;
}
.naase-app .naase-share-badge img {
  width: 200px;
  height: auto;
  display: block;
}
.naase-app .naase-share-text p {
  margin: 0 0 2px;
}
.naase-app .naase-share-link {
  color: var(--naase-accent);
  word-break: break-all;
  font-size: 14px;
}
.naase-app .naase-share-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
.naase-app .naase-share-social {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding-right: 24px;
  border-right: 1px solid #e8eef3;
}
.naase-app .naase-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  color: #06509e;
  background: #e1eefd;
  transition: background 0.15s;
}
.naase-app .naase-share-btn:hover {
  background: #e1eefd;
}
.naase-app .naase-share-ico {
  width: 20px;
  height: 20px;
  flex: none;
}
.naase-app .naase-share-btn--download {
  color: var(--naase-primary);
  background: none;
}

/* ============ LEADERBOARD ============ */
.naase-app .naase-lb-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.naase-app .naase-lb-sub {
  font-weight: 400;
  font-size: 14px;
  color: #2d2c34;
  margin: 8px 0 0;
  max-width: 895px;
}

.naase-app .naase-btn.leaderboard {
  padding: 8px 16px;
  font-weight: 600;
  font-size: 14px;
  gap: 8px;
}

.naase-app .naase-lb-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--naase-border);
  border-radius: 12px;
}
.naase-app .naase-lb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.naase-app .naase-lb-table th {
  text-align: left;
  background: #ffffff;
  font-weight: 600;
  font-size: 14px;
  line-height: 14px;
  color: #2d2c34;
  padding: 16px 20px;
  white-space: nowrap;
}
.naase-app .naase-lb-table td {
  padding: 16px 20px;
}

.naase-app .naase-lb-table td.naase-col-name {
  color: #2d2c34;
  font-weight: 600;
  font-size: 14px;
  line-height: 14px;
}

.naase-app .naase-lb-table td.naase-col-score {
  font-weight: 600;
  font-size: 20px;
  line-height: 14px;
  color: #2d2c34;
}

.naase-app .naase-lb-table td.naase-col-tier,
.naase-app .naase-lb-table td.naase-col-duration,
.naase-app .naase-lb-table td.naase-col-date {
  font-weight: 600;
  font-size: 14px;
  line-height: 14px;
  color: #2d2c34;
}

.naase-app .naase-lb-table tbody tr:nth-child(odd) {
  background: #f7f8f8;
}
.naase-app .naase-lb-table .naase-col-rank {
  width: 64px;
  font-weight: 600;
  font-size: 14px;
  line-height: 14px;
  color: #2d2c34;
}

.naase-app .naase-lb-table .naase-col-rank.value {
  font-weight: 600;
  font-size: 20px;
  line-height: 14px;
  color: #2d2c34;
}

.naase-app .naase-lb-table .naase-col-score {
  font-weight: 700;
  font-size: 17px;
}
.naase-app .naase-lb-empty {
  color: var(--naase-muted);
  text-align: center;
  padding: 40px 0;
}
.naase-app .naase-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
}
.naase-app .naase-page {
  display: inline-flex;
  min-width: 38px;
  height: 36px;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid #06509e;
  border-radius: 6px;
  text-decoration: none;
  color: #06509e;
  font-weight: 600;
  font-size: 14px;
}
.naase-app .naase-page--step {
  padding: 0 16px;
  color: #06509e;
}
.naase-app .naase-page-arrow {
  display: inline-flex;
  align-items: center;
  color: var(--naase-primary);
}
.naase-app .naase-page-ico {
  width: 20px;
  height: 20px;
  display: block;
}
.naase-app .naase-page.is-disabled .naase-page-arrow {
  color: #b6b6c3;
}
.naase-app .naase-page.is-current {
  background: var(--naase-ink);
  color: #fff;
  border-color: var(--naase-ink);
}
.naase-app .naase-page.is-disabled {
  color: #b6b6c3;
  border-color: #b6b6c3;
  cursor: default;
}
.naase-app .naase-page:not(.is-current):not(.is-disabled):hover {
  background: #f0f6fd;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 860px) {
  .naase-app .naase-share-social {
    justify-content: center;
    padding-right: 0;
  }

  .naase-app .naase-share-actions {
    justify-content: center;
  }

  .naase-app .naase-card {
    padding: 28px 20px;
  }
  .naase-app .naase-q {
    grid-template-columns: 1fr;
  }
  .naase-app .naase-q-next {
    margin-top: 0;
  }
  .naase-app .naase-result-strip {
    flex-direction: column;
    width: auto;
  }
  .naase-app .naase-stat + .naase-stat::before {
    left: 16px;
    right: 16px;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
  }
  .naase-app .naase-share-body {
    flex-direction: column;
    text-align: center;
  }
  .naase-app .naase-share-badge img {
    width: 200px;
    margin: 0 auto;
  }

  .naase-app .naase-feature,
  .naase-app .naase-btn {
    max-width: 100%;
    width: 100%;
  }

  .naase-app.naase-app.naase-leaderboard .naase-card,
  .naase-app .naase-screen.question {
    padding: 20px;
  }
}

/* Compact pagination on phones: drop the Previous/Next words (arrows only) and
   shrink the number buttons so the whole pager fits without clipping; it still
   wraps as a safety net when there are many pages. */
@media (max-width: 560px) {
  .naase-app .naase-pagination {
    gap: 6px;
  }
  .naase-app .naase-page {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    font-size: 13px;
  }
  .naase-app .naase-page--step {
    padding: 0 9px;
  }
  /* Visually hide the label but keep it for screen readers. */
  .naase-app .naase-page--step .naase-page-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .naase-app .naase-stat-value {
    font-size: 20px;
  }
}