.study-roadmap {
  --roadmap-green: #347d5e;
  --roadmap-green-bright: #69b88a;
  margin: 18px 0 24px;
  padding: clamp(16px, 2.2vw, 24px);
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--ink);
  background: color-mix(in srgb, var(--white) 91%, var(--mint) 9%);
  overflow: hidden;
}
.study-roadmap-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.study-roadmap-heading-actions { display: grid; justify-items: end; gap: 8px; flex: none; }
.study-roadmap-kicker { color: var(--roadmap-green); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.study-roadmap-heading h3 { margin: 5px 0 4px; color: var(--ink); font: 700 20px/1.3 var(--display); }
.study-roadmap-heading p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.study-roadmap-progress { flex: none; padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--roadmap-green); background: var(--white); font-size: 12px; font-weight: 800; }
.study-roadmap-next { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; padding: 8px 12px; border: 1px solid var(--roadmap-green); border-radius: 10px; color: var(--roadmap-green); background: color-mix(in srgb, var(--roadmap-green) 9%, var(--white)); font-size: 13px; font-weight: 800; text-decoration: none; transition: transform .16s ease, background .16s ease, color .16s ease; }
.study-roadmap-next:hover, .study-roadmap-next:focus-visible { transform: translateY(-1px); color: #fff; background: var(--roadmap-green); outline: 2px solid color-mix(in srgb, var(--roadmap-green) 35%, transparent); outline-offset: 2px; }
.study-roadmap-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.study-roadmap-summary a { color: var(--roadmap-green); font-weight: 750; text-decoration: none; }
.study-roadmap-summary a:hover { text-decoration: underline; }
.study-roadmap-track { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 12px; margin-top: 20px; }
.study-roadmap-track::before { position: absolute; z-index: 0; top: 20px; right: 7%; left: 7%; height: 2px; content: ""; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--roadmap-green) 32%, transparent) 0 7px, transparent 7px 13px); }
.study-roadmap-step { position: relative; z-index: 1; display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto auto; align-items: center; gap: 7px 10px; min-height: 142px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: var(--white); animation: roadmap-arrive .42s both; animation-delay: var(--step-delay, 0ms); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.study-roadmap-step:hover { transform: translateY(-3px); border-color: var(--roadmap-green-bright); box-shadow: 0 8px 22px color-mix(in srgb, var(--roadmap-green) 14%, transparent); }
.study-roadmap-node { display: grid; width: 38px; height: 38px; place-items: center; border: 2px solid var(--line); border-radius: 50%; color: var(--muted); background: var(--white); font-size: 12px; font-weight: 800; }
.study-roadmap-step-copy { display: grid; min-width: 0; gap: 4px; }
.study-roadmap-step-copy strong { overflow: hidden; color: var(--ink); font-size: 13px; line-height: 1.4; text-overflow: ellipsis; }
.study-roadmap-step-copy small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.study-roadmap-mastery { grid-column: 2; color: var(--muted); font-size: 12px; line-height: 1.4; }
.study-roadmap-mastery-track { grid-column: 2; display: block; height: 4px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--line) 65%, transparent); }
.study-roadmap-mastery-track i { display: block; height: 100%; border-radius: inherit; background: var(--roadmap-green-bright); transition: width .5s ease; }
.study-roadmap-mastery-track i[data-level="low"] { background: #d68c59; }
.study-roadmap-actions { grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.study-roadmap-action { padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 700; text-decoration: none; transition: color .15s ease, border-color .15s ease, background .15s ease; }
.study-roadmap-action:hover, .study-roadmap-action:focus-visible { border-color: var(--roadmap-green); color: var(--roadmap-green); background: color-mix(in srgb, var(--roadmap-green) 8%, transparent); outline: none; }
.study-roadmap-step.is-complete { border-color: color-mix(in srgb, var(--roadmap-green) 34%, var(--line)); background: color-mix(in srgb, var(--white) 88%, var(--roadmap-green) 12%); }
.study-roadmap-step.is-complete .study-roadmap-node { border-color: var(--roadmap-green); color: #fff; background: var(--roadmap-green); }
.study-roadmap-step.is-current { border-color: var(--roadmap-green-bright); box-shadow: 0 0 0 3px color-mix(in srgb, var(--roadmap-green-bright) 13%, transparent); }
.study-roadmap-step.is-current .study-roadmap-node { border-color: var(--roadmap-green-bright); color: var(--roadmap-green); animation: roadmap-pulse 2.2s ease-in-out infinite; }
.study-roadmap-step.is-weak { border-color: color-mix(in srgb, #d68c59 42%, var(--line)); }
.study-roadmap-step.is-weak .study-roadmap-step-copy small { color: #bd7544; font-weight: 750; }
.study-roadmap-empty { margin: 0; color: var(--muted); font-size: 11px; }
html[data-theme="dark"] .study-roadmap { --roadmap-green: #59aa7d; --roadmap-green-bright: #8bd6a8; background: color-mix(in srgb, var(--white) 94%, #2c684c 6%); }
.study-plan-context { font-size: 13px !important; line-height: 1.55; }
.study-plan-grid article > span { font-size: 12px; }
.study-plan-grid h3 { font-size: 16px; }
.study-plan-grid article p { font-size: 13px; line-height: 1.55; }
.study-roadmap-empty { font-size: 13px; }
@keyframes roadmap-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes roadmap-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--roadmap-green-bright) 14%, transparent); } }
@media (max-width: 760px) { .study-roadmap-track { grid-template-columns: repeat(2, minmax(0, 1fr)); } .study-roadmap-track::before { display: none; } }
@media (max-width: 480px) { .study-roadmap { padding: 14px; } .study-roadmap-track { grid-template-columns: 1fr; gap: 8px; margin-top: 16px; } .study-roadmap-step { min-height: 58px; } }
@media (max-width: 900px) { .course-dialog-header { flex-wrap: wrap; } .course-dialog-header>div { order: 1; } .course-dialog-close { order: 2; margin-left: auto; } .course-mode-nav { order: 3; margin-left: 0; } }
@media (max-width: 560px) { .study-roadmap-heading { align-items: flex-start; } .study-roadmap-heading-actions { justify-items: start; } .study-roadmap-next { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .study-roadmap-step, .study-roadmap-step.is-current .study-roadmap-node { animation: none; transition: none; } }