.log-test-page { background: #f7fbff; }

.log-test-hero {
  padding: 22px 0 38px;
  background:
    radial-gradient(circle at 86% 12%, rgba(21, 126, 192, .17), transparent 29%),
    linear-gradient(180deg, #f1f9ff, #fff);
}

.log-test-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 34px;
  align-items: end;
}

.log-test-hero h1 {
  max-width: 890px;
  margin: 12px 0 15px;
  font-size: clamp(2.05rem, 4vw, 3.85rem);
}

.log-test-hero .lead {
  max-width: 820px;
  color: #3b5e79;
  font-size: 1.02rem;
  line-height: 1.6;
}

.log-test-rules { margin-top: 18px; display: grid; gap: 7px; }
.log-test-rules li { position: relative; padding-left: 25px; color: #36566f; font-size: .93rem; }
.log-test-rules li::before { content: "✓"; position: absolute; left: 0; color: var(--primary); font-weight: 900; }

.log-score-card {
  display: grid;
  gap: 8px;
  padding: 28px;
  border: 1px solid #b8d9ee;
  border-radius: 24px;
  background: rgba(255, 255, 255, .95);
  box-shadow: var(--shadow-sm);
}

.log-score-card > div { display: flex; align-items: end; gap: 10px; color: var(--primary-dark); }
.log-score-card strong { font-size: 4.25rem; font-weight: 900; line-height: .86; }
.log-score-card span { padding-bottom: 4px; color: var(--muted); font-weight: 800; }
.log-score-card p { margin: 13px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; }
.log-score-card > b { color: var(--secondary); font-size: 1.2rem; }
.log-score-card a { margin-top: 12px; color: var(--primary-dark); font-size: .83rem; font-weight: 800; line-height: 1.4; text-decoration: underline; text-underline-offset: 3px; }

.no-script-note { margin-top: 24px; padding: 16px 18px; border: 1px solid #e1b46d; border-radius: 14px; background: #fff8eb; color: #714b18; }

.log-progress {
  position: sticky;
  top: 88px;
  z-index: 90;
  margin-top: 26px;
  padding: 14px 18px;
  border: 1px solid #b9d8ea;
  border-radius: 16px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
}

.log-progress > div:first-child { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.log-progress strong { color: var(--primary-dark); font-size: .88rem; }
.log-progress button { padding: 0; border: 0; background: transparent; color: var(--muted); font-size: .78rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.log-progress__track { height: 7px; margin-top: 10px; overflow: hidden; border-radius: 999px; background: #dbeaf4; }
.log-progress__track span { width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #157ec0, #20a66b); transition: width .2s ease; }

.log-test-form { padding: 36px 0 82px; }
.log-part-heading { margin: 48px 0 22px; display: flex; justify-content: space-between; gap: 20px; align-items: end; }
.log-part-heading:first-child { margin-top: 0; }
.log-part-heading h2 { margin: 0; font-size: clamp(1.8rem, 3.6vw, 3rem); }
.log-part-heading > span { color: var(--muted); font-size: .84rem; }

.log-task {
  margin-bottom: 18px;
  padding: clamp(23px, 3.7vw, 36px);
  border: 1px solid var(--line);
  border-left: 5px solid var(--primary);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: border-color .18s ease, background .18s ease;
}

.log-task > header { margin-bottom: 18px; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.log-task > header span { color: var(--primary-dark); font-size: 1.14rem; font-weight: 900; }
.log-task > header small { padding: 5px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark); font-weight: 800; }
.log-task > p { max-width: 940px; color: #304f68; font-size: 1.04rem; }
.log-task > label { display: block; margin: 22px 0 7px; color: var(--secondary); font-weight: 820; }
.log-task > input {
  width: min(100%, 280px);
  min-height: 50px;
  padding: 10px 13px;
  border: 1px solid #abc7da;
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
}
.log-task > input:focus { border-color: var(--primary); outline: 3px solid rgba(21, 126, 192, .14); }
.log-task > input:disabled { opacity: .82; cursor: not-allowed; }
.log-task.is-correct { border-color: #62be89; background: #fbfffc; }
.log-task.is-incorrect { border-color: #dc9696; background: #fffafa; }

.log-answer { margin-top: 20px; padding: 16px 18px; border-radius: 13px; background: #eff7fc; }
.log-answer b { display: block; color: var(--primary-dark); }
.log-answer p { margin: 7px 0 0; color: var(--muted); font-size: .9rem; }
.log-task.is-correct .log-answer { background: #eaf8f0; }
.log-task.is-incorrect .log-answer { background: #fff0f0; }

.log-submit { margin: 36px 0 18px; display: flex; justify-content: center; }
.log-submit .button { min-width: min(100%, 390px); min-height: 58px; }

.log-result {
  margin-top: 28px;
  padding: clamp(30px, 5vw, 52px);
  border: 1px solid #a9d4ee;
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--shadow);
  text-align: center;
}

.log-result h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
.log-result__score { display: flex; justify-content: center; align-items: end; gap: 10px; margin: 18px 0; }
.log-result__score strong { color: var(--primary-dark); font-size: clamp(4rem, 9vw, 7rem); line-height: .82; }
.log-result__score span { padding-bottom: 8px; color: var(--muted); font-size: 1.15rem; font-weight: 800; }
.log-result__message { max-width: 760px; margin: 0 auto 24px; color: var(--muted); }
.log-answer-grid { margin: 18px auto 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; counter-reset: none; list-style: none; padding: 0; }
.log-answer-grid li { min-width: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: #f3f9fd; text-align: left; }
.log-answer-grid span { color: var(--muted); font-size: .78rem; }
.log-answer-grid b { justify-self: end; color: var(--secondary); }
.log-result .cta-row { justify-content: center; }

html[data-theme="dark"] .log-test-page { background: #081722; }
html[data-theme="dark"] .log-test-hero { background: radial-gradient(circle at 86% 12%, rgba(74, 164, 218, .14), transparent 29%), linear-gradient(180deg, #0b2130, #081722); }
html[data-theme="dark"] .log-test-hero .lead,
html[data-theme="dark"] .log-test-rules li,
html[data-theme="dark"] .log-task > p { color: var(--muted); }
html[data-theme="dark"] .log-score-card,
html[data-theme="dark"] .log-progress,
html[data-theme="dark"] .log-task,
html[data-theme="dark"] .log-task > input,
html[data-theme="dark"] .log-result { border-color: var(--line); background: var(--surface); }
html[data-theme="dark"] .log-progress { background: rgba(16, 36, 49, .96); }
html[data-theme="dark"] .log-progress__track { background: #294657; }
html[data-theme="dark"] .log-answer,
html[data-theme="dark"] .log-answer-grid li { border-color: var(--line); background: #153245; }
html[data-theme="dark"] .log-task.is-correct { border-color: #3d805a; background: #102d20; }
html[data-theme="dark"] .log-task.is-incorrect { border-color: #8a4d4d; background: #301c1c; }
html[data-theme="dark"] .log-task.is-correct .log-answer { background: #173c2a; }
html[data-theme="dark"] .log-task.is-incorrect .log-answer { background: #412525; }

@media (max-width: 900px) {
  .log-test-hero__grid { grid-template-columns: 1fr; }
  .log-score-card { max-width: 520px; }
  .log-answer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .log-test-hero { padding: 12px 0 30px; }
  .log-test-hero h1 { font-size: clamp(2rem, 9vw, 2.85rem); }
  .log-progress { top: 78px; margin-inline: 14px; }
  .log-part-heading { align-items: flex-start; flex-direction: column; }
  .log-task { border-radius: 17px; }
  .log-task > input { width: 100%; }
}

@media (max-width: 480px) {
  .log-progress { top: 73px; }
  .log-progress > div:first-child { align-items: flex-start; flex-direction: column; gap: 4px; }
  .log-test-form { padding-top: 24px; }
  .log-task { padding: 22px 18px; }
  .log-answer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}