.progress-page {
  background:
    radial-gradient(circle at 9% 14%, rgba(248, 202, 87, 0.22) 0 6px, transparent 7px),
    radial-gradient(circle at 91% 23%, rgba(14, 138, 156, 0.14) 0 5px, transparent 6px),
    linear-gradient(180deg, #faf6ee 0%, #f3f8f4 52%, #f7f2e8 100%);
}

.progress-link--back svg {
  stroke: var(--ink);
}

.progress-shell {
  width: min(1240px, calc(100% - 48px));
  min-height: calc(100vh - 170px);
  margin: 0 auto;
  padding: 46px 0 64px;
}

.observer-hero {
  position: relative;
  min-height: 290px;
  padding: 42px 46px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.55fr);
  align-items: end;
  gap: 48px;
  overflow: hidden;
  background:
    radial-gradient(circle at 83% 10%, rgba(255,255,255,0.72) 0 90px, transparent 91px),
    repeating-linear-gradient(-35deg, transparent 0 18px, rgba(14, 138, 156, 0.035) 18px 36px),
    linear-gradient(125deg, #fffdf8, #e9f5ef);
  border: 1px solid rgba(24, 49, 58, 0.12);
  border-radius: 34px;
  box-shadow: var(--shadow-card);
}

.observer-hero::before,
.observer-hero::after {
  position: absolute;
  content: "";
  border: 2px solid rgba(14, 138, 156, 0.22);
  border-radius: 50%;
}

.observer-hero::before { width: 82px; height: 82px; top: 34px; right: 80px; }
.observer-hero::after { width: 32px; height: 32px; top: 92px; right: 54px; background: rgba(248, 202, 87, 0.42); }

.observer-hero-copy { position: relative; z-index: 1; }
.observer-hero .eyebrow { margin: 0 0 14px; }

.observer-hero h1 {
  max-width: 790px;
  margin: 0;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.052em;
}

.observer-hero h1 span { color: var(--teal-dark); }

.observer-hero-copy > p:last-child {
  max-width: 660px;
  margin: 20px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
}

.privacy-note {
  position: relative;
  z-index: 1;
  padding: 18px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  color: #285648;
  background: rgba(255,255,255,0.78);
  border: 1px solid #d4e5da;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(45, 62, 61, 0.07);
  backdrop-filter: blur(12px);
}

.privacy-note > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--green-pale);
  border-radius: 13px;
  font-size: 21px;
}

.privacy-note strong { font-size: 13px; }
.privacy-note p { margin: 4px 0 0; color: #557168; font-size: 11px; }

.progress-loading,
.progress-error {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.progress-loading[hidden],
.progress-error[hidden],
#progress-content[hidden],
.empty-observer[hidden] { display: none; }

.summary-grid {
  margin: 22px 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.summary-stat {
  min-height: 132px;
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 8px;
  background: rgba(255,253,248,0.9);
  border: 1px solid rgba(24,49,58,0.1);
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
}

.summary-stat > span:first-child {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 850;
}

.summary-stat > i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--stat-accent, var(--teal-dark));
  background: var(--stat-pale, var(--teal-pale));
  border-radius: 11px;
  font-style: normal;
  font-weight: 900;
}

.summary-stat strong {
  grid-column: 1 / -1;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.045em;
}

.summary-stat small { grid-column: 1 / -1; color: var(--ink-soft); font-size: 10px; }

.observer-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.48fr) minmax(310px, 0.72fr);
  align-items: start;
  gap: 22px;
}

.observer-main-column,
.observer-side-column { display: grid; gap: 22px; }

.observer-section,
.insight-card {
  padding: 24px;
  background: rgba(255,253,248,0.92);
  border: 1px solid rgba(24,49,58,0.1);
  border-radius: 26px;
  box-shadow: var(--shadow-soft);
}

.observer-heading {
  margin-bottom: 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.observer-heading span {
  color: var(--teal-dark);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.observer-heading h2 { margin: 3px 0 0; font-size: 20px; line-height: 1.2; letter-spacing: -0.025em; }
.observer-heading > p { margin: 0; color: var(--ink-soft); font-size: 10px; }
.observer-heading--compact { margin-bottom: 14px; }
.observer-heading--compact h2 { font-size: 17px; }

.grade-overview { display: grid; gap: 10px; }

.grade-row {
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  background: #fafbf7;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.grade-row > strong { font-size: 13px; }
.grade-row > span { color: var(--ink-soft); font-size: 10px; font-weight: 800; }
.grade-track { height: 9px; overflow: hidden; background: #e7ece6; border-radius: 999px; }
.grade-track i { height: 100%; display: block; background: linear-gradient(90deg, var(--teal), #42a875); border-radius: inherit; transition: width 900ms var(--ease-out); }

.record-filters { display: inline-flex; gap: 4px; padding: 4px; background: #f1f3ee; border-radius: 12px; }
.record-filters button { min-height: 44px; padding: 7px 11px; color: var(--ink-soft); background: transparent; border: 0; border-radius: 9px; font-size: 10px; font-weight: 850; cursor: pointer; }
.record-filters button[aria-pressed="true"] { color: var(--teal-dark); background: white; box-shadow: 0 3px 10px rgba(45,62,61,0.08); }

.lesson-records { display: grid; gap: 10px; }

.lesson-record {
  padding: 15px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line);
  border-radius: 17px;
  text-decoration: none;
  transition: transform 280ms var(--ease-out), border-color 280ms ease, box-shadow 280ms ease;
}

.lesson-record:hover { border-color: #acd6ca; box-shadow: 0 9px 22px rgba(45,62,61,0.07); transform: translateY(-2px); }
.record-icon { width: 42px; height: 42px; display: grid; place-items: center; color: var(--teal-dark); background: var(--teal-pale); border-radius: 13px; font-size: 16px; font-weight: 900; }
.record-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.record-copy small { color: var(--ink-soft); font-size: 9px; font-weight: 750; }
.record-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.record-copy span { color: var(--ink-soft); font-size: 9px; }
.record-result { text-align: right; }
.record-result strong { display: block; color: var(--teal-dark); font-size: 12px; }
.record-result small { color: var(--ink-soft); font-size: 9px; }

.record-empty,
.insight-empty { padding: 18px; color: var(--ink-soft); background: #fafbf7; border: 1px dashed var(--line-strong); border-radius: 14px; font-size: 11px; text-align: center; }

.insight-card { position: relative; overflow: hidden; }
.insight-card::after { position: absolute; width: 80px; height: 80px; top: -38px; right: -28px; content: ""; background: var(--insight-pale, var(--teal-pale)); border-radius: 50%; opacity: 0.65; }
.insight-icon { width: 38px; height: 38px; margin-bottom: 13px; display: grid; place-items: center; color: var(--insight-dark, var(--teal-dark)); background: var(--insight-pale, var(--teal-pale)); border-radius: 13px; font-weight: 900; }
.insight-card--transfer { --insight-pale: var(--violet-pale); --insight-dark: var(--violet-dark); }
.insight-card--next { --insight-pale: var(--orange-pale); --insight-dark: var(--orange-dark); }

.evidence-list,
.focus-list { margin: 0; padding: 0; display: grid; gap: 8px; list-style: none; }
.evidence-list li,
.focus-list li { padding: 10px 11px; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 7px; color: #36515a; background: #fafbf8; border: 1px solid rgba(24,49,58,0.08); border-radius: 12px; font-size: 10px; }
.evidence-list li > span:first-child { color: var(--green); font-weight: 900; }
.focus-list li > span:first-child { color: var(--orange-dark); font-weight: 900; }
.focus-list strong { display: block; margin-bottom: 2px; color: var(--ink); font-size: 10px; }
.focus-list small { color: var(--ink-soft); font-size: 9px; }

.transfer-item { padding: 11px; background: #fbf9ff; border: 1px solid #e5ddfa; border-radius: 13px; }
.transfer-item + .transfer-item { margin-top: 8px; }
.transfer-item strong { display: block; color: var(--violet-dark); font-size: 10px; }
.transfer-item p { margin: 4px 0 0; color: var(--ink-soft); font-size: 9px; }

.empty-observer {
  margin-top: 22px;
  padding: 54px 24px;
  color: var(--ink-soft);
  background: rgba(255,253,248,0.9);
  border: 1px dashed var(--line-strong);
  border-radius: 28px;
  text-align: center;
}
.empty-observer > div { color: var(--yellow); font-size: 22px; letter-spacing: 6px; }
.empty-observer h2 { margin: 14px 0 6px; color: var(--ink); font-size: 22px; }
.empty-observer p { margin: 0 auto 20px; max-width: 480px; font-size: 12px; }
.observer-primary-link { min-height: 46px; padding: 10px 16px; display: inline-flex; align-items: center; gap: 8px; color: white; background: var(--teal); border-radius: 13px; font-size: 12px; font-weight: 850; text-decoration: none; box-shadow: 0 7px 0 rgba(8,98,113,0.18); }

@media (max-width: 920px) {
  .observer-hero { grid-template-columns: 1fr; gap: 28px; }
  .privacy-note { max-width: 520px; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .observer-layout { grid-template-columns: 1fr; }
  .observer-side-column { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
}

@media (max-width: 680px) {
  .progress-shell { width: min(100% - 24px, 1240px); padding-top: 28px; }
  .observer-hero { min-height: 0; padding: 28px 22px; border-radius: 26px; }
  .observer-hero h1 { font-size: clamp(35px, 11vw, 48px); }
  .observer-hero::before,
  .observer-hero::after { display: none; }
  .summary-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .summary-stat { min-height: 118px; padding: 15px; }
  .summary-stat strong { font-size: 29px; }
  .observer-section,
  .insight-card { padding: 17px; border-radius: 22px; }
  .observer-heading { align-items: flex-start; flex-direction: column; }
  .observer-heading:has(.record-filters) { gap: 11px; }
  .record-filters { width: 100%; }
  .record-filters button { flex: 1; min-height: 44px; }
  .observer-side-column { grid-template-columns: 1fr; }
  .grade-row { grid-template-columns: 68px minmax(0, 1fr); }
  .grade-row > span { grid-column: 1 / -1; }
  .lesson-record { grid-template-columns: 40px minmax(0, 1fr); }
  .record-result { grid-column: 2; text-align: left; }
}