/* ==========================================================================
   clinical.css — 肩部超音波「臨床工作站」主題
   最後載入，集中覆寫共用元件，不改動課程資料與互動契約。
   ========================================================================== */

:root {
  --clinical-ink: #061a29;
  --clinical-navy: #08283d;
  --clinical-navy-2: #0c3850;
  --clinical-heading: #08283d;
  --clinical-teal: #08a6a6;
  --clinical-teal-bright: #35e0d0;
  --clinical-blue: #397f9e;
  --clinical-teal-muted: #e3f8f5;
  --clinical-cyan-muted: #eaf5fa;
  --clinical-amber-muted: #fff5d9;
  --clinical-red: #d94a55;
  --clinical-red-muted: #fff0f1;
  --clinical-panel: #ffffff;
  --clinical-canvas: #eef4f6;
  --clinical-grid: rgb(53 224 208 / 8%);
  --clinical-glow: 0 0 0 1px rgb(53 224 208 / 8%), 0 18px 50px rgb(3 30 45 / 15%);
  --clinical-card-shadow: 0 10px 28px rgb(8 40 61 / 8%);

  --fgColor-accent: #087f86;
  --bgColor-accent-muted: #e2f5f3;
  --borderColor-accent-emphasis: #07969a;
  --header-height: 68px;
  --sidebar-width: 300px;
  --borderRadius-medium: 10px;
  --borderRadius-large: 18px;
}

:root[data-theme="dark"] {
  --clinical-ink: #020b12;
  --clinical-navy: #071d2c;
  --clinical-navy-2: #0b3448;
  --clinical-heading: #d8edf4;
  --clinical-teal: #35d3c9;
  --clinical-teal-bright: #6ff3e3;
  --clinical-blue: #76c3dd;
  --clinical-teal-muted: #0b3839;
  --clinical-cyan-muted: #102b38;
  --clinical-amber-muted: #3a2d0f;
  --clinical-red: #ff7b83;
  --clinical-red-muted: #3b1e22;
  --clinical-panel: #0f1c25;
  --clinical-canvas: #09141c;
  --clinical-grid: rgb(111 243 227 / 7%);
  --clinical-glow: 0 0 0 1px rgb(111 243 227 / 9%), 0 18px 50px rgb(0 0 0 / 30%);
  --clinical-card-shadow: 0 10px 30px rgb(0 0 0 / 22%);

  --fgColor-accent: #55ddd4;
  --bgColor-accent-muted: #0b3839;
  --borderColor-accent-emphasis: #35d3c9;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --clinical-ink: #020b12;
    --clinical-navy: #071d2c;
    --clinical-navy-2: #0b3448;
    --clinical-heading: #d8edf4;
    --clinical-teal: #35d3c9;
    --clinical-teal-bright: #6ff3e3;
    --clinical-blue: #76c3dd;
    --clinical-teal-muted: #0b3839;
    --clinical-cyan-muted: #102b38;
    --clinical-amber-muted: #3a2d0f;
    --clinical-red: #ff7b83;
    --clinical-red-muted: #3b1e22;
    --clinical-panel: #0f1c25;
    --clinical-canvas: #09141c;
    --clinical-grid: rgb(111 243 227 / 7%);
    --clinical-glow: 0 0 0 1px rgb(111 243 227 / 9%), 0 18px 50px rgb(0 0 0 / 30%);
    --clinical-card-shadow: 0 10px 30px rgb(0 0 0 / 22%);

    --fgColor-accent: #55ddd4;
    --bgColor-accent-muted: #0b3839;
    --borderColor-accent-emphasis: #35d3c9;
  }
}

body {
  overflow-x: hidden;
  background-color: var(--clinical-canvas);
  background-image:
    linear-gradient(var(--clinical-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--clinical-grid) 1px, transparent 1px);
  background-size: 32px 32px;
}

.container,
.Landing,
.StancePage,
.Player {
  width: min(100%, 1560px);
}

/* --- Command bar -------------------------------------------------------- */

.AppHeader {
  gap: 18px;
  padding-inline: 22px;
  color: #eaf8fa;
  background:
    linear-gradient(90deg, rgb(53 224 208 / 7%) 1px, transparent 1px) 0 0 / 28px 100%,
    linear-gradient(100deg, rgb(6 26 41 / 98%), rgb(8 40 61 / 96%) 62%, rgb(6 32 47 / 98%));
  border-bottom: 1px solid rgb(53 224 208 / 32%);
  box-shadow: 0 9px 28px rgb(0 17 27 / 20%);
  backdrop-filter: blur(16px) saturate(140%);
}

.AppHeader__brand {
  gap: 9px;
  color: #f2feff;
}

.AppHeader__brand:hover {
  color: #fff;
}

.AppHeader__brandMark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--clinical-teal-bright);
  background: linear-gradient(145deg, rgb(53 224 208 / 18%), rgb(53 224 208 / 4%));
  border: 1px solid rgb(53 224 208 / 35%);
  border-radius: 12px;
  box-shadow: inset 0 0 16px rgb(53 224 208 / 8%), 0 0 22px rgb(53 224 208 / 10%);
}

.AppHeader__brandPulse {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 9px;
  height: 9px;
  background: var(--clinical-teal-bright);
  border: 2px solid var(--clinical-navy);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--clinical-teal-bright);
  animation: clinicalPulse 2.4s ease-in-out infinite;
}

.AppHeader__brandName {
  font-size: 14px;
  font-weight: 750;
  letter-spacing: 0.01em;
}

.AppHeader__edition {
  padding-left: 10px;
  font-family: var(--fontStack-mono);
  font-size: 9px;
  font-style: normal;
  font-weight: 650;
  letter-spacing: 0.12em;
  color: rgb(234 248 250 / 54%);
  border-left: 1px solid rgb(234 248 250 / 16%);
}

.TabNav__item {
  color: rgb(234 248 250 / 64%);
  border-bottom-color: transparent;
}

.TabNav__item:hover {
  color: #fff;
  border-bottom-color: rgb(53 224 208 / 35%);
}

.TabNav__item.is-selected,
:root[data-theme="dark"] .TabNav__item.is-selected {
  color: #fff;
  border-bottom-color: var(--clinical-teal-bright);
  text-shadow: 0 0 18px rgb(53 224 208 / 32%);
}

.TabNav__item svg,
.TabNav__item.is-selected svg {
  color: currentColor;
}

.TabNav__item.is-selected svg {
  color: var(--clinical-teal-bright);
}

.AppHeader .Counter {
  color: var(--clinical-teal-bright);
  background: rgb(53 224 208 / 12%);
  border-color: rgb(53 224 208 / 24%);
}

.AppHeader > .SearchBox input {
  color: #efffff;
  background: rgb(0 10 18 / 30%);
  border-color: rgb(234 248 250 / 16%);
  box-shadow: inset 0 1px 7px rgb(0 0 0 / 13%);
}

.AppHeader > .SearchBox input::placeholder {
  color: rgb(234 248 250 / 48%);
}

.AppHeader > .SearchBox input:focus {
  border-color: var(--clinical-teal-bright);
  box-shadow: 0 0 0 3px rgb(53 224 208 / 13%), inset 0 1px 7px rgb(0 0 0 / 13%);
}

.AppHeader > .SearchBox > svg,
.AppHeader .SearchBox__clear,
.AppHeader .HitCounter {
  color: rgb(234 248 250 / 62%);
}

.AppHeader .btn-invisible {
  color: rgb(234 248 250 / 76%);
  background: rgb(255 255 255 / 4%);
  border-color: rgb(234 248 250 / 12%);
}

.AppHeader .btn-invisible:hover {
  color: var(--clinical-teal-bright);
  background: rgb(53 224 208 / 10%);
  border-color: rgb(53 224 208 / 28%);
}

/* --- Immersive home hero ------------------------------------------------ */

.Hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 64px 0 56px;
  color: #f4feff;
  background:
    radial-gradient(circle at 79% 18%, rgb(53 224 208 / 17%), transparent 28%),
    radial-gradient(circle at 14% 12%, rgb(24 121 164 / 22%), transparent 34%),
    linear-gradient(132deg, #051724 0%, #082a3f 48%, #063b47 100%);
  border-bottom: 1px solid rgb(53 224 208 / 24%);
}

.Hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.55;
  background-image:
    linear-gradient(rgb(86 235 222 / 7%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(86 235 222 / 7%) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to right, #000, transparent 86%);
}

.Hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 46%, rgb(53 224 208 / 7%) 46.2%, transparent 46.6%);
  transform: translateX(-56%);
  animation: heroScan 8s linear infinite;
}

.Hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(400px, 0.88fr);
  gap: clamp(40px, 7vw, 104px);
  align-items: center;
}

.Hero__content {
  min-width: 0;
}

.Hero .Hero__eyebrow {
  color: var(--clinical-teal-bright);
  background: rgb(53 224 208 / 9%);
  border-color: rgb(53 224 208 / 28%);
  box-shadow: 0 0 20px rgb(53 224 208 / 8%);
}

.Hero h1 {
  max-width: 13ch;
  font-size: clamp(38px, 4.5vw, 66px);
  font-weight: 760;
  line-height: 1.08;
  letter-spacing: -0.045em;
  color: #f7ffff;
  text-wrap: balance;
  text-shadow: 0 14px 42px rgb(0 0 0 / 22%);
}

.Hero__lede {
  max-width: 64ch;
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.8;
  color: rgb(234 248 250 / 73%);
}

.Hero__lede strong {
  color: #f7ffff;
  font-weight: 680;
}

.Hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.Hero__actions .btn {
  min-height: 44px;
  padding-inline: 17px;
  border-radius: 12px;
}

.Hero__primary {
  color: #022528;
  background: linear-gradient(135deg, var(--clinical-teal-bright), #8cf4e8);
  border-color: rgb(139 255 241 / 80%);
  box-shadow: 0 12px 30px rgb(53 224 208 / 20%);
}

.Hero__primary:hover {
  color: #011c1e;
  background: linear-gradient(135deg, #77f5e8, #b1fff6);
  transform: translateY(-1px);
}

.Hero__secondary {
  color: #efffff;
  background: rgb(255 255 255 / 5%);
  border-color: rgb(234 248 250 / 22%);
}

.Hero__secondary:hover {
  color: #fff;
  background: rgb(53 224 208 / 8%);
  border-color: rgb(53 224 208 / 45%);
}

.Hero__stats {
  gap: 10px;
  margin-top: 28px;
  padding-top: 0;
  border-top: 0;
}

.Hero .Stat {
  min-width: 125px;
  padding: 11px 13px;
  background: linear-gradient(145deg, rgb(255 255 255 / 8%), rgb(255 255 255 / 3%));
  border: 1px solid rgb(234 248 250 / 12%);
  border-radius: 12px;
}

.Hero .Stat__value {
  color: #f5ffff;
}

.Hero .Stat__value svg {
  color: var(--clinical-teal-bright);
}

.Hero .Stat__label,
.Hero__note {
  color: rgb(234 248 250 / 58%);
}

.HeroScan {
  position: relative;
  min-width: 0;
  padding: 12px;
  background: linear-gradient(145deg, rgb(255 255 255 / 9%), rgb(0 5 10 / 20%));
  border: 1px solid rgb(111 243 227 / 28%);
  border-radius: 22px;
  box-shadow: 0 30px 90px rgb(0 0 0 / 32%), inset 0 0 50px rgb(53 224 208 / 4%);
  transform: perspective(1000px) rotateY(-3deg) rotateX(1deg);
}

.HeroScan::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 0 45px rgb(53 224 208 / 14%);
}

.HeroScan__topbar,
.HeroScan__readout {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 4px;
  font-family: var(--fontStack-mono);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.1em;
  color: rgb(234 248 250 / 58%);
}

.HeroScan__topbar i,
.ConsoleHeader__eyebrow i,
.RailHeader__eyebrow i,
.ConsoleHeader__monitorTop span:last-child::before {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  background: var(--clinical-teal-bright);
  border-radius: 50%;
  box-shadow: 0 0 9px var(--clinical-teal-bright);
  content: "";
}

.HeroScan__screen {
  position: relative;
  aspect-ratio: 1.55;
  overflow: hidden;
  background:
    linear-gradient(rgb(53 224 208 / 5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(53 224 208 / 5%) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 8%, rgb(170 255 245 / 14%), transparent 55%),
    #020a0f;
  background-size: 28px 28px, 28px 28px, auto, auto;
  border: 1px solid rgb(111 243 227 / 18%);
  border-radius: 13px;
}

.HeroScan__sector {
  position: absolute;
  top: 9%;
  left: 50%;
  width: 70%;
  height: 102%;
  background:
    repeating-radial-gradient(circle at 50% 0, transparent 0 31px, rgb(139 255 241 / 9%) 32px 33px),
    conic-gradient(from 145deg at 50% 0, transparent 0 69deg, rgb(53 224 208 / 13%) 70deg 145deg, transparent 146deg);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform: translateX(-50%);
}

.HeroScan__sector::before,
.HeroScan__sector::after {
  content: "";
  position: absolute;
  left: 50%;
  border-radius: 50%;
  transform: translateX(-50%);
}

.HeroScan__sector::before {
  top: 35%;
  width: 62%;
  height: 12%;
  opacity: 0.82;
  background: linear-gradient(180deg, transparent, rgb(188 255 248 / 65%) 48%, transparent 74%);
  filter: blur(1px);
  box-shadow: 0 18px 22px rgb(111 243 227 / 16%);
  transform: translateX(-50%) rotate(-7deg);
}

.HeroScan__sector::after {
  top: 57%;
  width: 44%;
  height: 8%;
  background: rgb(213 255 251 / 42%);
  filter: blur(2px);
  box-shadow: -65px -10px 0 -5px rgb(213 255 251 / 24%), 58px 14px 0 -3px rgb(213 255 251 / 20%);
}

.HeroScan__sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 36%, rgb(77 255 233 / 22%) 50%, transparent 63%);
  transform: translateY(-75%);
  animation: scanSweep 3.8s ease-in-out infinite;
}

.HeroScan__focus,
.ConsoleHeader__target {
  position: absolute;
  top: 48%;
  left: 52%;
  width: 24px;
  height: 24px;
  border: 1px solid var(--clinical-teal-bright);
  border-radius: 50%;
  box-shadow: 0 0 16px rgb(53 224 208 / 34%);
}

.HeroScan__focus::before,
.HeroScan__focus::after,
.ConsoleHeader__target::before,
.ConsoleHeader__target::after {
  content: "";
  position: absolute;
  background: var(--clinical-teal-bright);
}

.HeroScan__focus::before,
.ConsoleHeader__target::before {
  top: 50%;
  left: -5px;
  width: 32px;
  height: 1px;
}

.HeroScan__focus::after,
.ConsoleHeader__target::after {
  top: -5px;
  left: 50%;
  width: 1px;
  height: 32px;
}

.HeroScan__depth {
  position: absolute;
  top: 14px;
  right: 9px;
  z-index: 2;
  font-family: var(--fontStack-mono);
  font-size: 8px;
  line-height: 4.2;
  color: rgb(234 248 250 / 34%);
}

.HeroScan__label {
  position: absolute;
  z-index: 2;
  padding: 2px 5px;
  font-family: var(--fontStack-mono);
  font-size: 8px;
  color: rgb(111 243 227 / 82%);
  background: rgb(0 0 0 / 42%);
  border: 1px solid rgb(111 243 227 / 18%);
  border-radius: 3px;
}

.HeroScan__label--a { top: 35%; left: 22%; }
.HeroScan__label--b { top: 57%; right: 21%; }
.HeroScan__label--c { bottom: 12%; left: 44%; }

.HeroScan__readout b {
  color: var(--clinical-teal-bright);
}

.HeroScan__wave {
  height: 24px;
  overflow: hidden;
  border-top: 1px solid rgb(111 243 227 / 12%);
}

.HeroScan__wave span {
  display: block;
  width: 200%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='24' viewBox='0 0 240 24'%3E%3Cpath d='M0 13h28l5-3 5 6 7-13 8 18 6-8h24l5-3 4 6 7-10 8 14 6-7h28l5-3 5 6 7-13 8 18 6-8h26l5-3 4 6 7-10 8 14 6-7h20' fill='none' stroke='%2335e0d0' stroke-opacity='.65'/%3E%3C/svg%3E") repeat-x center / 240px 24px;
  animation: waveMove 7s linear infinite;
}

/* --- Course workstation shell ------------------------------------------ */

.Layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  gap: 0;
  min-height: calc(100dvh - var(--header-height) - var(--footer-height));
  margin: 0;
  padding: 0;
  align-items: start;
}

.Layout__sidebar {
  position: sticky;
  top: var(--stick-top);
  height: calc(100dvh - var(--stick-top) - var(--footer-height));
  max-height: none;
  padding: 24px 18px 30px;
  overflow-y: auto;
  color: #e9f8fa;
  background:
    linear-gradient(rgb(53 224 208 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(53 224 208 / 4%) 1px, transparent 1px),
    linear-gradient(165deg, var(--clinical-ink), var(--clinical-navy) 62%, #073442);
  background-size: 26px 26px, 26px 26px, auto;
  border-right: 1px solid rgb(53 224 208 / 22%);
  box-shadow: 12px 0 35px rgb(4 23 35 / 9%);
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgb(53 224 208 / 28%) transparent;
}

.Layout__main {
  min-width: 0;
  width: min(100%, 1500px);
  margin: 0 auto;
  padding: 28px clamp(20px, 3vw, 44px) 56px;
}

.RailHeader {
  padding: 0 8px 18px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgb(234 248 250 / 11%);
}

.RailHeader__eyebrow,
.ConsoleHeader__eyebrow {
  display: flex;
  align-items: center;
  font-family: var(--fontStack-mono);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.14em;
  color: var(--clinical-teal-bright);
}

.RailHeader strong {
  display: block;
  margin-top: 7px;
  font-size: 19px;
  letter-spacing: -0.02em;
}

.RailHeader small {
  display: block;
  margin-top: 2px;
  font-family: var(--fontStack-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: rgb(234 248 250 / 45%);
}

.ProgressPanel {
  padding: 13px;
  background: linear-gradient(145deg, rgb(255 255 255 / 8%), rgb(255 255 255 / 3%));
  border-color: rgb(234 248 250 / 12%);
  border-radius: 13px;
  box-shadow: inset 0 0 20px rgb(53 224 208 / 3%);
}

.ProgressPanel__title,
.ProgressPanel__value {
  color: #eaf8fa;
}

.ProgressPanel__value {
  font-family: var(--fontStack-mono);
  color: var(--clinical-teal-bright);
}

.Layout__sidebar .ProgressBar {
  background: rgb(0 0 0 / 28%);
  border: 1px solid rgb(234 248 250 / 9%);
}

.Layout__sidebar .ProgressBar__fill {
  background: linear-gradient(90deg, var(--clinical-teal), var(--clinical-teal-bright));
  box-shadow: 0 0 12px rgb(53 224 208 / 30%);
}

.ProgressPanel__reset {
  color: rgb(234 248 250 / 62%);
  background: rgb(255 255 255 / 4%);
  border-color: rgb(234 248 250 / 12%);
}

.ProgressPanel__reset:hover {
  color: var(--clinical-teal-bright);
  border-color: rgb(53 224 208 / 36%);
}

.NavList__group-title {
  padding: 16px 10px 6px;
  font-family: var(--fontStack-mono);
  font-size: 9px;
  letter-spacing: 0.13em;
  color: rgb(234 248 250 / 39%);
}

.NavList__item {
  gap: 10px;
  min-height: 48px;
  padding: 7px 9px;
  color: rgb(234 248 250 / 72%);
  border: 1px solid transparent;
  border-radius: 10px;
}

.NavList__item:hover {
  color: #fff;
  background: rgb(53 224 208 / 7%);
  border-color: rgb(53 224 208 / 12%);
}

.NavList__item.is-active {
  color: #fff;
  background: linear-gradient(90deg, rgb(53 224 208 / 17%), rgb(53 224 208 / 5%));
  border-color: rgb(53 224 208 / 23%);
  box-shadow: inset 3px 0 0 var(--clinical-teal-bright), 0 8px 20px rgb(0 0 0 / 10%);
}

.NavList__item.is-active::before {
  display: none;
}

.NavList__icon {
  color: rgb(234 248 250 / 44%);
}

.NavList__item.is-active .NavList__icon {
  color: var(--clinical-teal-bright);
  filter: drop-shadow(0 0 6px rgb(53 224 208 / 36%));
}

.NavList__main {
  flex: 1;
  min-width: 0;
}

.NavList__code {
  display: block;
  font-family: var(--fontStack-mono);
  font-size: 8px;
  line-height: 1.2;
  letter-spacing: 0.09em;
  color: var(--clinical-teal-bright);
  opacity: 0.7;
}

.NavList__label {
  display: block;
  margin-top: 2px;
  font-size: 12px;
}

.Layout__sidebar .Counter {
  color: rgb(234 248 250 / 55%);
  background: rgb(255 255 255 / 5%);
  border-color: rgb(234 248 250 / 10%);
}

.Layout__sidebar .MusclePanel {
  background: rgb(255 255 255 / 4%);
  border-color: rgb(234 248 250 / 11%);
  border-radius: 13px;
}

.Layout__sidebar .MusclePanel__head {
  color: rgb(234 248 250 / 62%);
}

.Layout__sidebar .MusclePanel__head:hover {
  color: #fff;
  background: rgb(53 224 208 / 7%);
}

.Layout__sidebar .MuscleChip {
  color: rgb(234 248 250 / 75%);
  background: rgb(0 0 0 / 16%);
  border-color: rgb(234 248 250 / 13%);
}

.Layout__sidebar .MuscleChip:hover,
.Layout__sidebar .MuscleChip.is-active {
  color: #021f21;
  background: var(--clinical-teal-bright);
  border-color: var(--clinical-teal-bright);
}

.ConsoleHeader {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 28px;
  min-height: 210px;
  padding: clamp(24px, 3vw, 38px);
  margin-bottom: 18px;
  overflow: hidden;
  color: #efffff;
  background:
    radial-gradient(circle at 86% 15%, rgb(53 224 208 / 18%), transparent 32%),
    linear-gradient(125deg, var(--clinical-ink), var(--clinical-navy) 62%, #07505b);
  border: 1px solid rgb(53 224 208 / 25%);
  border-radius: 20px;
  box-shadow: var(--clinical-glow);
}

.ConsoleHeader::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.45;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(53 224 208 / 7%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(53 224 208 / 7%) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to right, #000, transparent 75%);
}

.ConsoleHeader__content,
.ConsoleHeader__monitor {
  position: relative;
  z-index: 1;
}

.ConsoleHeader h1 {
  margin-top: 9px;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.ConsoleHeader__content > p {
  max-width: 62ch;
  margin-top: 12px;
  line-height: 1.75;
  color: rgb(234 248 250 / 68%);
}

.ConsoleHeader__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.ConsoleHeader__badges span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 29px;
  padding: 4px 9px;
  font-size: 11px;
  color: rgb(234 248 250 / 75%);
  background: rgb(255 255 255 / 6%);
  border: 1px solid rgb(234 248 250 / 13%);
  border-radius: 999px;
}

.ConsoleHeader__badges b {
  font-weight: inherit;
}

.ConsoleHeader__badges svg {
  color: var(--clinical-teal-bright);
}

.ConsoleHeader__monitor {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: rgb(0 7 12 / 46%);
  border: 1px solid rgb(111 243 227 / 20%);
  border-radius: 14px;
  box-shadow: inset 0 0 30px rgb(53 224 208 / 5%);
}

.ConsoleHeader__monitorTop,
.ConsoleHeader__monitorMeta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--fontStack-mono);
  font-size: 8px;
  letter-spacing: 0.09em;
  color: rgb(234 248 250 / 43%);
}

.ConsoleHeader__monitorTop span:last-child {
  color: var(--clinical-teal-bright);
}

.ConsoleHeader__monitorBody {
  position: relative;
  flex: 1;
  min-height: 104px;
  margin: 8px 0;
  overflow: hidden;
  background:
    linear-gradient(rgb(53 224 208 / 5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(53 224 208 / 5%) 1px, transparent 1px);
  background-size: 17px 17px;
  border: 1px solid rgb(111 243 227 / 10%);
  border-radius: 8px;
}

.ConsoleHeader__arc {
  position: absolute;
  top: 10%;
  left: 50%;
  width: 86%;
  height: 115%;
  background: repeating-radial-gradient(circle at 50% 0, transparent 0 19px, rgb(111 243 227 / 10%) 20px 21px);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform: translateX(-50%);
}

.ConsoleHeader__beam {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, rgb(53 224 208 / 18%), transparent);
  animation: scanSweep 3.4s ease-in-out infinite;
}

.ConsoleHeader__target {
  top: 46%;
  left: 48%;
  width: 18px;
  height: 18px;
}

.ConsoleHeader__target::before { width: 26px; }
.ConsoleHeader__target::after { height: 26px; }

.FilterBar {
  position: sticky;
  top: calc(var(--stick-top) + 10px);
  z-index: 20;
  min-height: 54px;
  padding: 8px 10px;
  margin-bottom: 18px;
  background: color-mix(in srgb, var(--clinical-panel) 88%, transparent);
  border: 1px solid var(--borderColor-default);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgb(8 40 61 / 8%);
  backdrop-filter: blur(14px) saturate(140%);
}

.FilterBar__label {
  padding: 0 7px;
  font-family: var(--fontStack-mono);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.12em;
  color: var(--fgColor-muted);
}

.FilterBar__group {
  padding: 3px;
  gap: 3px;
  background: var(--bgColor-muted);
  border: 0;
  border-radius: 10px;
}

.FilterBar__btn {
  min-height: 34px;
  padding-inline: 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
}

.FilterBar__btn.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--clinical-navy-2), #0a6c72);
  box-shadow: 0 6px 14px rgb(8 40 61 / 18%);
}

/* --- Chapter and unit hierarchy ---------------------------------------- */

.Chapter {
  margin-bottom: 18px;
  /* html 的 scroll-padding 已含 header；這裡只預留 sticky filter 的高度。 */
  scroll-margin-top: 60px;
}

.Chapter__header {
  min-height: 76px;
  padding: 14px 17px;
  color: #edfdfd;
  background:
    linear-gradient(90deg, rgb(53 224 208 / 8%) 1px, transparent 1px) 0 0 / 34px 100%,
    linear-gradient(120deg, var(--clinical-ink), var(--clinical-navy) 74%, #0b4a56);
  border-color: rgb(53 224 208 / 20%);
  border-radius: 15px;
  box-shadow: 0 10px 28px rgb(8 40 61 / 12%);
}

.Chapter__header:hover,
.Chapter.is-open .Chapter__header {
  background:
    linear-gradient(90deg, rgb(53 224 208 / 9%) 1px, transparent 1px) 0 0 / 34px 100%,
    linear-gradient(120deg, #061f30, #0a374c 72%, #0a5960);
  border-color: rgb(53 224 208 / 38%);
}

.Chapter.is-open .Chapter__header {
  border-radius: 15px 15px 0 0;
  box-shadow: 0 0 0 1px rgb(53 224 208 / 6%), 0 10px 30px rgb(8 40 61 / 13%);
}

.Chapter__num {
  width: 42px;
  height: 42px;
  color: var(--clinical-teal-bright);
  background: linear-gradient(145deg, rgb(53 224 208 / 17%), rgb(53 224 208 / 5%));
  border-color: rgb(53 224 208 / 28%);
  border-radius: 12px;
  box-shadow: inset 0 0 15px rgb(53 224 208 / 6%);
}

.Chapter__title {
  font-size: 16px;
  font-weight: 690;
}

.Chapter__code {
  color: var(--clinical-teal-bright);
  opacity: 0.82;
}

.Chapter__meta {
  color: rgb(234 248 250 / 53%);
}

.Chapter__chevron {
  color: rgb(234 248 250 / 54%);
}

.Chapter__progress .ProgressBar {
  background: rgb(0 0 0 / 28%);
  border-color: rgb(234 248 250 / 10%);
}

.Chapter__progress .ProgressBar__fill {
  background: linear-gradient(90deg, var(--clinical-teal), var(--clinical-teal-bright));
}

.Chapter__body {
  background: var(--clinical-panel);
  border-color: color-mix(in srgb, var(--clinical-teal) 20%, var(--borderColor-default));
  border-radius: 0 0 15px 15px;
  box-shadow: var(--clinical-card-shadow);
}

.Unit {
  border-color: var(--borderColor-muted);
}

.Unit__header {
  min-height: 84px;
  padding: 15px 18px;
  background: var(--clinical-panel);
}

.Unit__header:hover,
.Unit.is-open .Unit__header {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--clinical-teal-muted) 68%, transparent), transparent 48%),
    var(--clinical-panel);
}

.Unit__check {
  position: relative;
  width: 24px;
  height: 24px;
  min-width: 44px;
  min-height: 44px;
  color: transparent;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.Unit__check::before {
  content: "";
  position: absolute;
  inset: 10px;
  background: var(--clinical-panel);
  border: 1px solid color-mix(in srgb, var(--clinical-teal) 28%, var(--borderColor-default));
  border-radius: 50%;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.Unit__check svg {
  position: relative;
  z-index: 1;
}

.Unit__check:hover::before {
  border-color: var(--clinical-teal);
}

.Unit.is-done .Unit__check {
  color: #032424;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.Unit.is-done .Unit__check::before {
  background: var(--clinical-teal-bright);
  border-color: var(--clinical-teal-bright);
  box-shadow: 0 0 14px rgb(53 224 208 / 22%);
}

.Unit__kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 3px;
  font-family: var(--fontStack-mono);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: 0.12em;
  color: var(--fgColor-muted);
}

.Unit__kicker span {
  color: var(--fgColor-accent);
}

.Unit__title {
  font-size: 15px;
  line-height: 1.55;
}

.Unit__summary {
  max-width: 90ch;
  margin-top: 5px;
  line-height: 1.65;
}

.Unit__body {
  padding: 2px 18px 22px 74px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--clinical-canvas) 72%, var(--clinical-panel)), var(--clinical-panel) 230px);
}

/* --- Clinical triad ----------------------------------------------------- */

.ClinicalBrief {
  display: block;
  margin: 0 0 20px;
  padding-top: 14px;
}

.ClinicalBrief__objective {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  color: var(--clinical-heading);
  background: linear-gradient(90deg, var(--clinical-cyan-muted), color-mix(in srgb, var(--clinical-cyan-muted) 36%, var(--clinical-panel)));
  border: 1px solid color-mix(in srgb, var(--clinical-navy-2) 16%, var(--borderColor-muted));
  border-left: 3px solid var(--clinical-blue);
  border-radius: 11px;
}

.ClinicalBrief__objectiveIcon {
  display: inline-flex;
  padding: 5px;
  color: var(--fgColor-accent);
  background: var(--clinical-panel);
  border: 1px solid color-mix(in srgb, var(--clinical-teal) 22%, var(--borderColor-muted));
  border-radius: 8px;
}

.ClinicalBrief__objectiveLabel {
  padding-top: 5px;
  font-family: var(--fontStack-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--fgColor-accent);
}

.ClinicalBrief__objective ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  padding-top: 3px;
}

.ClinicalBrief__objective li {
  position: relative;
  padding-left: 13px;
  line-height: 1.6;
}

.ClinicalBrief__objective li::before {
  content: "";
  position: absolute;
  top: 0.68em;
  left: 0;
  width: 5px;
  height: 5px;
  background: var(--clinical-teal);
  border-radius: 50%;
}

.ClinicalBrief__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ClinicalBrief__section,
.ClinicalBrief__refs {
  padding: 0;
  background: var(--clinical-panel);
  border: 1px solid var(--borderColor-muted);
  border-radius: 13px;
}

.ClinicalBrief__panel {
  position: relative;
  min-width: 0;
  overflow: hidden;
  box-shadow: 0 8px 22px rgb(8 40 61 / 6%);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.ClinicalBrief__panel:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgb(8 40 61 / 10%);
}

.ClinicalBrief__section--views {
  background: linear-gradient(180deg, var(--clinical-teal-muted), var(--clinical-panel) 72%);
  border-color: color-mix(in srgb, var(--clinical-teal) 34%, var(--borderColor-muted));
  box-shadow: inset 0 3px 0 var(--clinical-teal), 0 8px 22px rgb(8 40 61 / 6%);
}

.ClinicalBrief__section--points {
  background: linear-gradient(180deg, var(--clinical-cyan-muted), var(--clinical-panel) 72%);
  border-color: color-mix(in srgb, var(--clinical-blue) 26%, var(--borderColor-muted));
  box-shadow: inset 0 3px 0 var(--clinical-blue), 0 8px 22px rgb(8 40 61 / 6%);
}

.ClinicalBrief__section--pitfalls {
  background: linear-gradient(180deg, var(--clinical-red-muted), var(--clinical-panel) 72%);
  border-color: color-mix(in srgb, var(--clinical-red) 26%, var(--borderColor-muted));
  box-shadow: inset 0 3px 0 var(--clinical-red), 0 8px 22px rgb(8 40 61 / 6%);
}

.ClinicalBrief__panelHead {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 68px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--borderColor-muted) 72%, transparent);
}

.ClinicalBrief__panelIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: var(--fgColor-accent);
  background: color-mix(in srgb, var(--clinical-panel) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--clinical-teal) 24%, var(--borderColor-muted));
  border-radius: 10px;
  box-shadow: 0 6px 14px rgb(8 40 61 / 7%);
}

.ClinicalBrief__section--points .ClinicalBrief__panelIcon {
  color: var(--clinical-blue);
  border-color: color-mix(in srgb, var(--clinical-blue) 24%, var(--borderColor-muted));
}

.ClinicalBrief__section--pitfalls .ClinicalBrief__panelIcon {
  color: var(--clinical-red);
  border-color: color-mix(in srgb, var(--clinical-red) 22%, var(--borderColor-muted));
}

.ClinicalBrief__panelTitle {
  flex: 1;
  min-width: 0;
}

.ClinicalBrief__panelCode {
  display: block;
  font-family: var(--fontStack-mono);
  font-size: 8px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.12em;
  color: var(--fgColor-accent);
}

.ClinicalBrief__section--points .ClinicalBrief__panelCode {
  color: var(--clinical-blue);
}

.ClinicalBrief__section--pitfalls .ClinicalBrief__panelCode {
  color: var(--clinical-red);
}

.ClinicalBrief h4 {
  margin: 3px 0 0;
  font-size: 14px;
  font-weight: 720;
  color: var(--clinical-heading);
}

.ClinicalBrief__panelCount {
  flex-shrink: 0;
  padding: 2px 6px;
  font-family: var(--fontStack-mono);
  font-size: 8px;
  color: var(--fgColor-muted);
  background: color-mix(in srgb, var(--clinical-panel) 72%, transparent);
  border: 1px solid var(--borderColor-muted);
  border-radius: 999px;
}

.ClinicalBrief__list {
  display: grid;
  gap: 0;
  padding: 5px 14px 11px;
  list-style: none;
}

.ClinicalBrief__list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  padding: 9px 0;
  color: var(--fgColor-muted);
  line-height: 1.58;
  border-top: 1px dashed color-mix(in srgb, var(--borderColor-muted) 76%, transparent);
}

.ClinicalBrief__list li:first-child {
  border-top: 0;
}

.ClinicalBrief__listIndex {
  padding-top: 1px;
  font-family: var(--fontStack-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--fgColor-accent);
}

.ClinicalBrief__section--points .ClinicalBrief__listIndex {
  color: var(--clinical-blue);
}

.ClinicalBrief__section--pitfalls .ClinicalBrief__listIndex {
  color: var(--clinical-red);
}

.ClinicalBrief__panel.is-fallback {
  border-style: dashed;
}

.ClinicalBrief__fallback {
  min-height: 76px;
  padding: 19px 14px;
  font-style: italic;
  line-height: 1.65;
  color: var(--fgColor-muted);
}

.ClinicalBrief__refs {
  margin-top: 12px;
  padding: 11px 13px;
  background: color-mix(in srgb, var(--clinical-canvas) 46%, var(--clinical-panel));
}

.ClinicalBrief__refs h4 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
  font-size: 12px;
}

.ClinicalBrief__refs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.ClinicalBrief__refs li {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 12px;
}

/* --- Supporting course surfaces --------------------------------------- */

.VideoCard {
  min-height: 70px;
  padding: 11px 13px;
  background: var(--clinical-panel);
  border-color: color-mix(in srgb, var(--clinical-teal) 16%, var(--borderColor-default));
  border-radius: 12px;
  box-shadow: 0 7px 18px rgb(8 40 61 / 5%);
}

.VideoCard:hover {
  border-color: var(--clinical-teal);
  box-shadow: 0 11px 24px rgb(8 40 61 / 9%);
  transform: translateY(-1px);
}

.VideoCard__badge {
  color: var(--fgColor-accent);
  background: var(--clinical-teal-muted);
  border-color: color-mix(in srgb, var(--clinical-teal) 28%, transparent);
}

.PlayBtn {
  color: #032424;
  background: linear-gradient(145deg, var(--clinical-teal-bright), #8df5e8);
  border-color: color-mix(in srgb, var(--clinical-teal) 58%, transparent);
  box-shadow: 0 7px 16px rgb(8 166 166 / 15%);
}

a:hover > .PlayBtn,
.PlayBtn:hover {
  color: #01191b;
  background: #9cfff3;
  border-color: var(--clinical-teal);
}

.PlayBtn--disabled {
  color: var(--fgColor-muted);
  background: var(--bgColor-neutral-muted);
  border-color: var(--borderColor-default);
  box-shadow: none;
}

.Assessment {
  border-left: 3px solid var(--clinical-teal);
  border-radius: 10px;
}

.Drill__why,
.VideoCard__why {
  display: block;
  margin-top: 6px;
  color: var(--fgColor-muted);
  font-size: 12px;
  line-height: 1.55;
}

.Drill__trust,
.VideoCard__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
}

.Drill__trust .Label,
.VideoCard__trust .Label {
  white-space: normal;
}

.Unit__title .Label--attention {
  background: var(--clinical-amber-muted);
}

.btn-primary {
  background: linear-gradient(135deg, #07898c, #0db7ad);
  border-color: #087e82;
  box-shadow: 0 8px 18px rgb(8 127 134 / 16%);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #08787c, #0ca79f);
}

.Hero .Hero__primary {
  color: #022528;
  background: linear-gradient(135deg, var(--clinical-teal-bright), #8cf4e8);
  border-color: rgb(139 255 241 / 80%);
  box-shadow: 0 12px 30px rgb(53 224 208 / 20%);
}

.Hero .Hero__primary:hover {
  color: #011c1e;
  background: linear-gradient(135deg, #77f5e8, #b1fff6);
}

.Landing {
  background: color-mix(in srgb, var(--clinical-panel) 42%, transparent);
}

.Landing__h2,
.StancePage__intro h2 {
  color: var(--clinical-heading);
}

.Landing__h2 svg,
.StancePage__intro h2 svg {
  color: var(--fgColor-accent);
}

.Step,
.LandingStance,
.ChapterCard,
.StanceCard {
  background: var(--clinical-panel);
  border-color: color-mix(in srgb, var(--clinical-teal) 14%, var(--borderColor-default));
  border-radius: 14px;
  box-shadow: var(--clinical-card-shadow);
}

.ChapterCard {
  position: relative;
  overflow: hidden;
}

.ChapterCard::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--clinical-teal), transparent 72%);
  transform: scaleX(0.3);
  transform-origin: left;
  transition: transform 180ms ease;
}

.ChapterCard:hover {
  background: var(--clinical-panel);
  border-color: var(--clinical-teal);
  box-shadow: 0 16px 34px rgb(8 40 61 / 12%);
  transform: translateY(-2px);
}

.ChapterCard:hover::after {
  transform: scaleX(1);
}

.ChapterCard__icon,
.Step__n {
  color: var(--fgColor-accent);
  background: var(--clinical-teal-muted);
  border-color: color-mix(in srgb, var(--clinical-teal) 24%, var(--borderColor-default));
}

.Player__frame,
.Player__list {
  border-color: color-mix(in srgb, var(--clinical-teal) 18%, var(--borderColor-default));
  box-shadow: var(--clinical-card-shadow);
}

.PlaylistItem.is-playing {
  background: var(--clinical-teal-muted);
  border-left-color: var(--clinical-teal);
}

.AppFooter {
  color: rgb(234 248 250 / 58%);
  background: color-mix(in srgb, var(--clinical-ink) 95%, transparent);
  border-top-color: rgb(53 224 208 / 18%);
}

.AppFooter a,
.AppFooter__summary:hover {
  color: var(--clinical-teal-bright);
}

/* --- Responsive workstation -------------------------------------------- */

@media (max-width: 1180px) {
  :root {
    --sidebar-width: 270px;
  }

  .AppHeader__edition {
    display: none;
  }

  .ClinicalBrief__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ClinicalBrief__section--pitfalls {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1012px) {
  .Hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 0.7fr);
    gap: 32px;
  }

  .Layout {
    display: block;
    min-height: 0;
    padding: 18px;
  }

  .Layout__sidebar {
    position: static;
    height: auto;
    max-height: none;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid rgb(53 224 208 / 22%);
    border-radius: 16px;
    box-shadow: var(--clinical-card-shadow);
  }

  .Layout__main {
    width: 100%;
    padding: 0 0 44px;
  }

  .RailHeader {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 12px;
    padding: 0 3px 12px;
    margin-bottom: 10px;
  }

  .RailHeader__eyebrow {
    width: 100%;
  }

  .RailHeader strong {
    margin: 0;
    font-size: 16px;
  }

  .RailHeader small {
    margin: 0;
  }

  .ProgressPanel {
    margin-bottom: 10px;
  }

  .NavList {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 2px 0 8px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  .NavList__group-title {
    display: none;
  }

  .NavList__item {
    min-width: 210px;
    scroll-snap-align: start;
    background: rgb(255 255 255 / 4%);
    border-color: rgb(234 248 250 / 9%);
  }

  .Layout__sidebar .MusclePanel {
    margin-top: 6px;
  }

  .FilterBar {
    top: calc(var(--stick-top) + 7px);
  }
}

@media (max-width: 820px) {
  .Hero__grid {
    grid-template-columns: 1fr;
  }

  .Hero h1 {
    max-width: 16ch;
  }

  .HeroScan {
    width: min(100%, 560px);
    margin: 0 auto;
    transform: none;
  }

  .ConsoleHeader {
    grid-template-columns: minmax(0, 1fr) 190px;
  }

  .ClinicalBrief__grid {
    grid-template-columns: 1fr;
  }

  .ClinicalBrief__section--pitfalls {
    grid-column: auto;
  }
}

@media (max-width: 767px) {
  :root {
    /* 56px 分頁列 + 44px 搜尋列 + 12px 底距 + 1px 邊框。 */
    --header-height: 113px;
  }

  .AppHeader {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    height: auto;
    min-height: var(--header-height);
    padding: 0 12px 12px;
    gap: 0 8px;
  }

  .AppHeader__brand {
    grid-column: 1;
    grid-row: 1;
  }

  .AppHeader__brandMark {
    width: 44px;
    height: 44px;
  }

  .AppHeader__brand .AppHeader__brandMark {
    display: inline-flex;
  }

  .AppHeader__brand .AppHeader__brandPulse {
    display: block;
  }

  .AppHeader__brandName {
    display: none;
  }

  .TabNav {
    grid-column: 2;
    grid-row: 1;
    margin-left: 0;
  }

  .TabNav__inner {
    justify-content: center;
  }

  .TabNav__item {
    gap: 4px;
    height: 56px;
    padding-inline: 8px;
    font-size: 11px;
  }

  .TabNav__item .Counter,
  .AppHeader__spacer,
  .HitCounter {
    display: none;
  }

  .AppHeader__actions {
    grid-column: 3;
    grid-row: 1;
  }

  .AppHeader .btn-icon {
    width: 44px;
    height: 44px;
  }

  .AppHeader > .SearchBox {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }

  .AppHeader > .SearchBox input {
    min-height: 44px;
  }

  .Hero {
    padding: 38px 0 34px;
  }

  .Hero h1 {
    font-size: clamp(34px, 11vw, 48px);
  }

  .Hero__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .Hero .Stat {
    min-width: 0;
  }

  .HeroScan {
    display: none;
  }

  .Layout {
    padding: 12px;
  }

  .ConsoleHeader {
    display: block;
    min-height: 0;
    padding: 24px 20px;
    border-radius: 16px;
  }

  .ConsoleHeader h1 {
    font-size: 29px;
  }

  .ConsoleHeader__monitor {
    display: none;
  }

  .FilterBar {
    position: static;
    padding: 9px;
  }

  .FilterBar__label {
    width: 100%;
  }

  .FilterBar__group {
    width: 100%;
    overflow-x: auto;
  }

  .FilterBar__btn {
    flex: 0 0 auto;
    min-height: 44px;
  }

  .FilterBar__count {
    margin-left: 7px;
  }

  .Chapter__header {
    min-height: 72px;
    padding: 12px;
  }

  .Chapter {
    /* 手機 filter 回到一般文流，不再重複預留其高度。 */
    scroll-margin-top: 12px;
  }

  .Chapter__num {
    width: 38px;
    height: 38px;
  }

  .Chapter__title {
    font-size: 14px;
  }

  .Unit__header {
    padding: 14px 12px;
  }

  .Unit__body {
    padding: 2px 12px 18px;
  }

  .ClinicalBrief__objective {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ClinicalBrief__objectiveLabel {
    align-self: center;
  }

  .ClinicalBrief__objective ul {
    grid-column: 1 / -1;
  }

  .ClinicalBrief__refs ul {
    display: grid;
  }

  .ClinicalBrief__panel:hover,
  .ChapterCard:hover,
  .VideoCard:hover {
    transform: none;
  }
}

@media (max-width: 420px) {
  .TabNav__label {
    display: none;
  }

  .TabNav__item {
    padding-inline: 11px;
  }

  .Hero__actions {
    display: grid;
  }

  .Hero__actions .btn {
    justify-content: center;
  }

  .Hero__stats {
    gap: 8px;
  }

  .Hero .Stat {
    padding: 9px;
  }

  .Hero .Stat__value {
    font-size: 17px;
  }

  .Layout__sidebar {
    padding: 13px;
  }

  .NavList__item {
    min-width: 190px;
  }

  .ConsoleHeader__badges span {
    font-size: 10px;
  }

  .Unit__check {
    width: 44px;
    height: 44px;
  }

  .Unit__title .Label {
    margin-top: 3px;
  }
}

@media print {
  .ConsoleHeader,
  .RailHeader {
    display: none;
  }

  .Layout {
    display: block;
  }

  .ClinicalBrief__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .Hero::after,
  .HeroScan__sweep,
  .HeroScan__wave span,
  .ConsoleHeader__beam,
  .AppHeader__brandPulse {
    animation: none !important;
  }
}

@keyframes clinicalPulse {
  0%, 100% { opacity: 0.55; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

@keyframes heroScan {
  from { transform: translateX(-62%); }
  to { transform: translateX(112%); }
}

@keyframes scanSweep {
  0%, 12% { transform: translateY(-74%); opacity: 0; }
  22% { opacity: 1; }
  78% { opacity: 1; }
  88%, 100% { transform: translateY(78%); opacity: 0; }
}

@keyframes waveMove {
  from { transform: translateX(0); }
  to { transform: translateX(-240px); }
}