.exercise-page {
  --text: var(--ink);
  --surface2: var(--surface-2);
  --surface3: var(--surface-3);
  --border-hover: var(--border-strong);
  --accent1: var(--accent);
  --accent2: var(--danger);
  --accent3: var(--accent-2);
  --green: var(--success);
  --red: var(--danger);
  --yellow: #e6bd63;
  --font-body: var(--font-ui);
  --trans: .18s ease;
  --trans-slow: .28s ease;
  --focus-ring: 0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
}

.exercise-page .site-header,
.exercise-page .panel-header { margin-bottom: 0; }

.exercise-page main.container {
  width: min(calc(100% - 2rem), var(--content));
  max-width: var(--content);
  margin-inline: auto;
  padding: clamp(2.75rem,7vw,6rem) 0 clamp(4rem,8vw,7rem);
}

.exercise-page main > header {
  position: relative;
  margin-bottom: clamp(3rem,7vw,5rem);
  padding: clamp(1rem,4vw,2.5rem) 0 clamp(2rem,5vw,3.5rem);
  border-bottom: 1px solid var(--border);
}

.exercise-page main > header::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(50vw,34rem);
  aspect-ratio: 1;
  right: -12%;
  top: -32%;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(232,162,80,.13),transparent 67%);
  pointer-events: none;
}

.exercise-page .header-label {
  margin-bottom: .8rem;
  color: var(--accent);
  font: 600 .72rem/1 var(--font-mono);
  letter-spacing: .14em;
}

.exercise-page main > header h1 {
  max-width: 850px;
  margin: 0 0 1rem;
  color: var(--ink);
  font: 700 clamp(3rem,9vw,6.2rem)/.88 var(--font-display);
  letter-spacing: -.04em;
}

.exercise-page main > header h1 em { color: var(--accent); font-weight: 600; }
.exercise-page .header-sub { max-width: 62ch; margin: 0 0 2rem; color: var(--muted); font-size: clamp(.98rem,2vw,1.12rem); }

.exercise-page .stats-bar {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  width: min(100%,590px);
  margin: 0 0 1rem;
  padding: .5rem;
  gap: .5rem;
  border-color: var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb,var(--surface) 82%,transparent);
}

.exercise-page .stat-pill {
  min-width: 0;
  padding: .85rem .55rem;
  border-radius: 12px;
  background: var(--surface-2);
}

.exercise-page .stat-val { color: var(--ink); font: 600 clamp(1.25rem,3vw,1.7rem) var(--font-display); }
.exercise-page .stat-lbl { color: var(--muted); font: 500 clamp(.55rem,1.8vw,.66rem) var(--font-mono); letter-spacing: .06em; }
.exercise-page .stat-divider { display: none; }
.exercise-page .progress-wrap { width: min(100%,590px); max-width: none; margin-bottom: 1rem; }
.exercise-page .progress-track { height: 7px; background: var(--surface-3); }
.exercise-page .progress-fill { background: linear-gradient(90deg,var(--accent),var(--accent-2)); }
.exercise-page .reset-progress-btn { min-height: 44px; margin: 0; border-color: var(--border); border-radius: 12px; color: var(--muted); font: 600 .72rem var(--font-ui); }

.exercise-page .phase-section { margin-bottom: clamp(2.75rem,6vw,4.5rem); }
.exercise-page .phase-header { align-items: center; gap: .75rem; margin-bottom: 1rem; padding: 0 0 .9rem; }
.exercise-page .phase-num { min-width: 40px; min-height: 30px; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: 999px; color: var(--phase-color,var(--accent)); background: color-mix(in srgb,var(--phase-color,var(--accent)) 10%,transparent); }
.exercise-page .phase-title { color: var(--ink); font: 700 clamp(1.5rem,3vw,2rem) var(--font-display); }
.exercise-page .phase-count { color: var(--dim); font-family: var(--font-mono); }

.exercise-page .category-grid-inner { grid-template-columns: repeat(auto-fill,minmax(min(100%,245px),1fr)); gap: .9rem; }
.exercise-page .category-card {
  min-height: 205px;
  display: flex;
  flex-direction: column;
  padding: 1.15rem;
  border-color: var(--border);
  border-radius: var(--radius);
  background: linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface) 82%,transparent));
  box-shadow: 0 1px 0 rgba(255,255,255,.025);
}
.exercise-page .category-card::before { inset: 0 0 auto; width: 100%; height: 2px; opacity: .9; }
.exercise-page .category-card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.exercise-page .category-card:hover::before { width: 100%; height: 3px; }
.exercise-page .category-num { margin-bottom: 1rem; color: var(--dim); }
.exercise-page .category-icon { width: 46px; height: 46px; display: grid; place-items: center; margin: 0 0 auto; border-radius: 13px; background: color-mix(in srgb,var(--phase-color,var(--accent)) 13%,var(--surface-2)); font-size: 1.25rem; }
.exercise-page .category-title { margin-top: 1rem; color: var(--ink); font: 700 1rem var(--font-ui); }
.exercise-page .category-subtitle { margin: .15rem 0 .9rem; color: var(--muted); }
.exercise-page .difficulty { border: 1px solid currentColor; background: transparent!important; font: 600 .59rem var(--font-mono); }
.exercise-page .question-count { color: var(--dim); }
.exercise-page .category-card.completed { opacity: 1; border-color: color-mix(in srgb,var(--success) 55%,var(--border)); }

.exercise-page .panel-backdrop { background: rgba(5,5,7,.72); backdrop-filter: blur(8px); }
.exercise-page .panel-content { border-color: var(--border); background: var(--bg-elevated); box-shadow: -24px 0 70px rgba(0,0,0,.36); }
.exercise-page .panel-header { padding: 1rem 1.15rem; background: var(--bg-elevated); }
.exercise-page .panel-back-btn,
.exercise-page .panel-close-btn,
.exercise-page .nav-btn { min-height: 44px; border-color: var(--border); border-radius: 11px; background: var(--surface); color: var(--muted); }
.exercise-page .panel-close-btn { width: 44px; }
.exercise-page .panel-back-btn:hover,
.exercise-page .panel-close-btn:hover,
.exercise-page .nav-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); border-color: var(--border-strong); }
.exercise-page .panel-num { color: var(--accent); font-size: 1.15rem; }
.exercise-page .panel-title { color: var(--ink); font: 700 1.45rem var(--font-display); }
.exercise-page .panel-subtitle { color: var(--muted); }
.exercise-page .panel-progress { padding: .85rem 1.15rem; background: var(--surface); }
.exercise-page .progress-text { color: var(--ink); }
.exercise-page .progress-percent { color: var(--accent); }
.exercise-page .progress-track-sm { background: var(--surface-3); }
.exercise-page .progress-fill-sm { background: linear-gradient(90deg,var(--accent),var(--accent-2)); }
.exercise-page .draft-indicator { background: color-mix(in srgb,var(--success) 10%,var(--surface)); border-color: color-mix(in srgb,var(--success) 24%,var(--border)); color: var(--success); }
.exercise-page .question-container { padding: clamp(1rem,4vw,1.5rem); }
.exercise-page .question-context { color: var(--accent); border-color: color-mix(in srgb,var(--accent) 28%,var(--border)); background: color-mix(in srgb,var(--accent) 10%,transparent); font-style: normal; }
.exercise-page .question-number { color: var(--dim); }
.exercise-page .question-text { color: var(--ink); font-size: clamp(1rem,2.5vw,1.13rem); }
.exercise-page .options { gap: .7rem; }
.exercise-page .option { min-width: 0; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); color: var(--ink); }
.exercise-page .option:hover { border-color: var(--border-strong); background: var(--surface-2); }
.exercise-page .option.selected { border-color: var(--accent); background: color-mix(in srgb,var(--accent) 10%,var(--surface)); }
.exercise-page .option-marker { border-color: var(--border-strong); }
.exercise-page .option.selected .option-marker { border-color: var(--accent); background: var(--accent); color: #1b140d; }
.exercise-page .option.correct { border-color: var(--success); background: color-mix(in srgb,var(--success) 10%,var(--surface)); }
.exercise-page .option.wrong { border-color: var(--danger); background: color-mix(in srgb,var(--danger) 10%,var(--surface)); }
.exercise-page .fill-input { max-width: 100%; border: 1px solid var(--border); border-bottom: 2px solid var(--accent); border-radius: 12px; background: var(--surface); color: var(--ink); }
.exercise-page .explanation { color: var(--yellow); border-color: color-mix(in srgb,var(--yellow) 30%,var(--border)); background: color-mix(in srgb,var(--yellow) 8%,var(--surface)); }
.exercise-page .btn { min-height: 46px; border-radius: 12px; font-family: var(--font-ui); }
.exercise-page .btn-primary { background: var(--accent); color: #1b140d; }
.exercise-page .btn-primary:hover:not(:disabled) { background: color-mix(in srgb,var(--accent) 88%,white); box-shadow: 0 8px 24px color-mix(in srgb,var(--accent) 25%,transparent); }
.exercise-page .btn-secondary { border-color: var(--border); background: var(--surface); color: var(--ink); }
.exercise-page .question-nav { padding: .85rem 1rem; border-color: var(--border); background: var(--bg-elevated); }
.exercise-page .nav-dot { background: var(--surface-3); }
.exercise-page .nav-dot.current { background: var(--accent); }
.exercise-page .nav-dot.answered { background: var(--success); }
.exercise-page .completion-screen { background: var(--bg-elevated); }
.exercise-page .completion-title { color: var(--ink); font: 700 2rem var(--font-display); }
.exercise-page .completion-score { color: var(--accent); font-family: var(--font-display); }
.exercise-page .restore-modal-content { border-color: var(--border); border-radius: var(--radius); background: var(--bg-elevated); box-shadow: var(--shadow); }
.exercise-page .restore-modal-content h3 { color: var(--ink); font: 700 1.7rem var(--font-display); }
.exercise-page .toast { width: min(calc(100% - 2rem),430px); justify-content: center; border-color: var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.exercise-page .skeleton-context,
.exercise-page .skeleton-text,
.exercise-page .skeleton-option { background: linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 50%,var(--surface) 75%); background-size: 200% 100%; }

@media (min-width:700px) {
  .exercise-page main.container { width: min(calc(100% - 3rem),var(--content)); }
}

@media (min-width:1024px) {
  .exercise-page .panel-content { width: min(520px,92vw); }
}

@media (max-width:767px) {
  .exercise-page main.container { padding-top: 2.2rem; }
  .exercise-page main > header { padding-top: .5rem; }
  .exercise-page .panel-content { height: min(88dvh,760px); max-height: none; border-radius: 22px 22px 0 0; box-shadow: 0 -24px 70px rgba(0,0,0,.4); }
  .exercise-page .handle-bar { background: var(--border-strong); }
  .exercise-page .panel-header { padding: .7rem 1rem; }
  .exercise-page .panel-back-btn span { display: none; }
  .exercise-page .category-grid-inner { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .exercise-page .category-card { min-height: 190px; }
}

@media (max-width:520px) {
  .exercise-page .stats-bar { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .exercise-page .stat-pill { padding: .7rem .25rem; }
  .exercise-page .category-grid-inner { grid-template-columns: 1fr; }
  .exercise-page .category-card { min-height: 170px; }
  .exercise-page .phase-count { display: none; }
  .exercise-page .question-nav { gap: .5rem; }
  .exercise-page .nav-btn { padding-inline: .75rem; }
  .exercise-page .completion-actions,.exercise-page .restore-actions { width: 100%; flex-direction: column; }
  .exercise-page .completion-actions .btn,.exercise-page .restore-actions .btn { width: 100%; }
}