/* 小杰的仪表箱 · Playful learning design system
   白色主界面 + 绿色主操作 + 蓝 / 粉 / 紫学习分区。 */
:root {
  --duo-green: #58cc02;
  --duo-green-dark: #3f8f00;
  --duo-green-soft: #d7ffb8;
  --duo-blue: #1cb0f6;
  --duo-blue-dark: #087fad;
  --duo-blue-soft: #ddf4ff;
  --duo-pink: #ff86d0;
  --duo-pink-dark: #b63c88;
  --duo-pink-soft: #ffe4f4;
  --duo-purple: #ce82ff;
  --duo-purple-dark: #8144a5;
  --duo-purple-soft: #f1ddff;
  --duo-yellow: #ffc800;
  --duo-yellow-dark: #9b7300;
  --duo-yellow-soft: #fff4b8;
  --duo-red: #ff4b4b;
  --duo-red-dark: #c92d36;
  --duo-red-soft: #ffdfe0;
  --duo-ink: #3c3c3c;
  --duo-copy: #4b4b4b;
  --duo-muted: #59666b;
  --duo-line: #e5e5e5;
  --duo-bg: #f7f7f7;
  --duo-card: #ffffff;
  --duo-radius-sm: 14px;
  --duo-radius: 20px;
  --duo-radius-lg: 28px;
  --duo-shadow: 0 5px 0 #e5e5e5;
  --paper: var(--duo-bg);
  --surface: var(--duo-card);
  --ink: var(--duo-ink);
  --ink-2: #2f3e42;
  --line: var(--duo-line);
  --muted: var(--duo-muted);
  --orange: var(--duo-green);
  --orange-deep: var(--duo-green-dark);
  --mint: var(--duo-green);
  --blue: var(--duo-blue);
  --shadow: 0 10px 28px rgba(60, 60, 60, .08);
}

html { background: var(--duo-bg); }
body {
  background: var(--duo-bg);
  color: var(--duo-ink);
  font-family: ui-rounded, "SF Pro Rounded", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-weight: 500;
}
button, input, textarea, select { font-family: inherit; }
button { font-weight: 750; }
::selection { background: var(--duo-green-soft); color: #285a08; }

/* App shell */
.sidebar {
  background: #fff;
  color: var(--duo-ink);
  border-right: 2px solid var(--duo-line);
  padding: 24px 14px 20px;
}
.brand { gap: 11px; padding: 0 10px 25px; }
.brand-mark {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 14px;
  background: var(--duo-green);
  box-shadow: 0 4px 0 var(--duo-green-dark);
  transform: none;
}
.brand-mark i { width: 5px; border-radius: 5px; background: #fff; transform: none; }
.brand b { font-size: 16px; font-weight: 900; letter-spacing: -.5px; }
.brand small { color: #657176; font-weight: 800; }
.nav-list { gap: 7px; }
.nav-item {
  min-height: 49px;
  border: 2px solid transparent;
  border-radius: 15px;
  padding: 0 12px;
  color: #5f6b70;
  font-weight: 800;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .08s ease;
}
.nav-item:hover { color: #4b4b4b; background: #f2f2f2; }
.nav-item:active { transform: translateY(2px); }
.nav-item.active {
  color: var(--duo-green-dark);
  background: var(--duo-green-soft);
  border-color: #b8eb91;
  box-shadow: none;
}
.nav-icon { display: grid; place-items: center; color: currentColor; }
.nav-icon .ic { stroke-width: 2.3; }
.nav-item em { border: 0; border-radius: 7px; background: #eceff0; color: #616c71; }
.nav-item strong { background: var(--duo-red); box-shadow: 0 2px 0 var(--duo-red-dark); }
.sidebar-label { color: #69757a; font-weight: 900; letter-spacing: 1.4px; }
.sidebar-footer {
  border: 2px solid #ececec;
  border-radius: 18px;
  padding: 12px;
  background: #fafafa;
}
.sidebar-footer p { color: #687479; }
.streak-ring { width: 45px; height: 45px; border: 3px solid var(--duo-yellow); box-shadow: inset 0 0 0 4px #fff; color: #b68a00; }

.topbar {
  height: 72px;
  position: relative;
  z-index: 10;
  background: rgba(255,255,255,.96);
  border-bottom: 2px solid var(--duo-line);
}
.plant-status { color: #626e73; font-weight: 700; }
.pulse { background: var(--duo-green); box-shadow: 0 0 0 4px rgba(88,204,2,.14); }
.icon-button, .install-app, .profile {
  border: 2px solid var(--duo-line);
  background: #fff;
  box-shadow: 0 3px 0 #e5e5e5;
}
.icon-button:active, .install-app:active, .profile:active { transform: translateY(2px); box-shadow: 0 1px 0 #e5e5e5; }
.install-app { border-radius: 12px; min-height: 37px; font-weight: 800; }
.install-app.ready { border-color: var(--duo-green); background: var(--duo-green); color: #fff; box-shadow: 0 3px 0 var(--duo-green-dark); }
.avatar { background: var(--duo-blue-soft); color: var(--duo-blue-dark); font-weight: 900; }
.profile { border-radius: 18px; padding: 5px 10px 5px 6px; cursor: pointer; }
.notification i { background: var(--duo-pink); }

/* Shared page rhythm */
.view { --view-accent: var(--duo-green); --view-accent-dark: var(--duo-green-dark); --view-soft: var(--duo-green-soft); }
#searchView, #fieldView { --view-accent: var(--duo-blue); --view-accent-dark: var(--duo-blue-dark); --view-soft: var(--duo-blue-soft); }
#calculatorView, #technicalView { --view-accent: var(--duo-purple); --view-accent-dark: var(--duo-purple-dark); --view-soft: var(--duo-purple-soft); }
#reviewView, #communityView, #accountView, #bookmarksView, #notesView { --view-accent: var(--duo-pink); --view-accent-dark: var(--duo-pink-dark); --view-soft: var(--duo-pink-soft); }
#safetyView { --view-accent: var(--duo-red); --view-accent-dark: var(--duo-red-dark); --view-soft: var(--duo-red-soft); }

.page-head {
  min-height: 160px;
  margin: 22px 24px 0;
  padding: 34px clamp(26px,4vw,54px) 28px;
  align-items: center;
  border: 2px solid var(--duo-line);
  border-bottom-width: 5px;
  border-radius: var(--duo-radius-lg);
  background: linear-gradient(135deg,#fff 56%,var(--view-soft));
}
.page-head h1 { color: var(--duo-ink); font-size: clamp(30px,3.5vw,44px); font-weight: 900; letter-spacing: -2px; }
.page-head p { max-width: 780px; color: var(--duo-muted); font-size: 13px; line-height: 1.65; }
.kicker, .eyebrow, .question-label, .article-chip { color: var(--view-accent-dark); font-weight: 900; }
.terminal-status, .edition-stamp {
  border: 2px solid var(--duo-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 3px 0 #e5e5e5;
}

.learning-hub-switch {
  margin: 18px 24px 0;
  padding: 10px;
  border: 2px solid var(--duo-line);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--duo-shadow);
}
.learning-hub-switch button {
  min-height: 82px;
  border: 2px solid transparent;
  border-radius: 17px;
  background: transparent;
}
.learning-hub-switch button:hover { background: #f7f7f7; }
.learning-hub-switch button.active { border-color: #b6e88d; background: var(--duo-green-soft); color: #397a0b; }
.learning-hub-switch button i { border: 2px solid currentColor; border-radius: 12px; }
.learning-hub-switch button.active i { border-color: var(--duo-green); background: var(--duo-green); color: #fff; box-shadow: 0 3px 0 var(--duo-green-dark); }
.learning-hub-switch b { font-size: 14px; font-weight: 900; }
.learning-hub-switch small { color: #606d72; font-size: 10px; }

/* 学习中心总览：先按目标分流，再进入具体工具 */
#freshmanView > .learning-hub-switch { display: none; }
.learning-hub-dashboard { margin: 18px 24px 0; padding: 22px; border: 2px solid var(--duo-line); border-radius: 26px; background: linear-gradient(135deg, #fff 0%, #f7fbff 55%, #f8fff0 100%); box-shadow: 0 5px 0 #e5e9e7; }
.learning-hub-dashboard-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.learning-hub-kicker { color: var(--duo-blue-dark); font-size: 10px; font-weight: 900; letter-spacing: 2px; }
.learning-hub-dashboard-head h1 { margin: 5px 0 5px; color: var(--duo-ink); font-size: clamp(26px, 3vw, 38px); font-weight: 900; letter-spacing: -1.5px; }
.learning-hub-dashboard-head p { max-width: 760px; margin: 0; color: var(--duo-muted); font-size: 12px; line-height: 1.65; }
.learning-hub-level { min-width: 130px; padding: 13px 15px; border: 2px solid #cbeab3; border-radius: 17px; background: var(--duo-green-soft); text-align: center; box-shadow: 0 3px 0 #b7e88f; }
.learning-hub-level b { display: block; color: var(--duo-green-dark); font-size: 23px; }
.learning-hub-level span { display: block; margin-top: 3px; color: #6a7a69; font-size: 9px; line-height: 1.45; }
.learning-hub-continue { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 17px; padding: 15px 17px; border: 2px solid #d9e9f0; border-radius: 18px; background: #fff; }
.learning-hub-continue > div { display: grid; gap: 3px; }
.learning-hub-continue span { color: var(--duo-blue-dark); font-size: 9px; font-weight: 900; letter-spacing: 1.2px; }
.learning-hub-continue strong { color: var(--duo-ink); font-size: 16px; }
.learning-hub-continue p { margin: 0; color: #76858a; font-size: 10px; }
.learning-hub-continue button { min-height: 40px; padding: 0 15px; border: 0; border-bottom: 4px solid var(--duo-green-dark); border-radius: 12px; background: var(--duo-green); color: #fff; font-weight: 900; cursor: pointer; white-space: nowrap; }
.learning-hub-continue button:active { transform: translateY(2px); border-bottom-width: 2px; }
.learning-hub-continue button i { margin-left: 6px; font-style: normal; }
.learning-hub-lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.learning-hub-lane { padding: 13px; border: 2px solid #e4e9e8; border-radius: 17px; background: rgba(255,255,255,.88); }
.learning-hub-lane.lane-simulation { grid-column: 1 / -1; border-color: #e2d6f7; background: #fcf9ff; }
.learning-hub-lane.lane-field { border-color: #cfeaf5; background: #f7fdff; }
.learning-hub-lane.lane-review { border-color: #f2d6e7; background: #fffafd; }
.hub-lane-head { display: flex; align-items: start; gap: 10px; }
.hub-lane-head > span { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 9px; background: #eef3f2; color: #6d8184; font: 11px Georgia, serif; }
.lane-foundation .hub-lane-head > span { background: var(--duo-green-soft); color: var(--duo-green-dark); }
.lane-theory .hub-lane-head > span { background: var(--duo-blue-soft); color: var(--duo-blue-dark); }
.lane-simulation .hub-lane-head > span { background: var(--duo-purple-soft); color: var(--duo-purple-dark); }
.lane-field .hub-lane-head > span { background: var(--duo-blue-soft); color: var(--duo-blue-dark); }
.lane-review .hub-lane-head > span { background: var(--duo-pink-soft); color: var(--duo-pink-dark); }
.hub-lane-head h2 { margin: 0; color: var(--duo-ink); font-size: 14px; }
.hub-lane-head p { margin: 3px 0 0; color: #778589; font-size: 10px; line-height: 1.45; }
.hub-lane-links { display: flex; flex-wrap: wrap; gap: 7px; margin: 11px 0 0 38px; }
.hub-lane-links button { min-height: 30px; padding: 0 10px; border: 2px solid #e0e8e6; border-radius: 10px; background: #fff; color: #536469; font-size: 10px; cursor: pointer; }
.hub-lane-links button:hover { border-color: var(--duo-green); color: var(--duo-green-dark); background: #f7fff1; }
.hub-lane-links button i { margin-left: 4px; color: #9aa8ab; font-style: normal; }

/* Thick, tactile controls */
.hero-search button, .primary-button, .vision-submit, .ai-search-box button,
.freshman-submit, .chapter-picker button, .book-detail-action button,
.accident-foot button, .purpose-primary, .hero-vision-link {
  border: 0;
  border-bottom: 5px solid var(--view-accent-dark);
  border-radius: 14px;
  background: var(--view-accent);
  color: #fff;
  font-weight: 900;
}
.hero-search button:active, .primary-button:active, .vision-submit:active, .ai-search-box button:active,
.freshman-submit:active, .chapter-picker button:active, .book-detail-action button:active,
.accident-foot button:active, .purpose-primary:active, .hero-vision-link:active {
  transform: translateY(3px);
  border-bottom-width: 2px;
}
.ghost-button, .content-tabs button, .category-tabs button, .learn-view-tabs button,
.suggestion-row button, .hot-tags button, .answer-actions button, .purpose-quick,
.archive-actions button, .quick-review, .text-link {
  border: 2px solid var(--duo-line);
  border-bottom-width: 4px;
  border-radius: 13px;
  background: #fff;
  color: #667074;
  font-weight: 800;
}
.content-tabs button.active, .category-tabs button.active, .learn-view-tabs button.active {
  border-color: var(--view-accent);
  border-bottom-color: var(--view-accent-dark);
  background: var(--view-accent);
  color: #fff;
}
input, textarea, select {
  border-color: var(--duo-line) !important;
  border-radius: 14px;
  background: #fff;
  color: var(--duo-ink);
}
input:focus, textarea:focus, select:focus { outline: 3px solid color-mix(in srgb,var(--view-accent) 26%,transparent); border-color: var(--view-accent) !important; }

/* Shared cards */
.course-card.featured, .review-stack, .map-card, .home-insight, .purpose-card,
.ai-search-box, .ai-answer, .aside-card, .vision-lab, .catalog-card,
.quiz-card, .learning-archive, .field-guide, .accident-card, .safety-update-card,
.freshman-card, .freshman-roadmap, .freshman-classroom, .book-focus,
.book-point-library, .notes-board, .simple-card, .account-card {
  border: 2px solid var(--duo-line);
  border-bottom-width: 5px;
  border-radius: var(--duo-radius);
  background: #fff;
  box-shadow: none;
}
.course-card.featured:hover, .map-card:hover, .catalog-card:hover, .accident-card:hover,
.safety-update-card:hover, .freshman-card:hover {
  transform: translateY(-2px);
  border-color: #cfcfcf;
  box-shadow: 0 8px 22px rgba(60,60,60,.08);
}

/* Home */
#homeView .home-purpose {
  margin: 22px 24px 0;
  border: 2px solid var(--duo-line);
  border-bottom-width: 5px;
  border-radius: 30px;
  background: #fff;
  box-shadow: none;
}
#homeView .home-purpose-head h2 { color: var(--duo-ink); font-weight: 900; }
#homeView .home-purpose-head p { color: var(--duo-muted); }
#homeView .purpose-card { border-radius: 23px; }
#homeView .purpose-learn { background: linear-gradient(145deg,#fff,var(--duo-green-soft)); }
#homeView .purpose-card.purpose-field {
  color: #183e49;
  border-color: #a8dcf1;
  background: linear-gradient(145deg,#fff 8%,#dff5ff);
}
#homeView .purpose-review { background: linear-gradient(145deg,#fff,var(--duo-pink-soft)); }
#homeView .purpose-field .purpose-card-copy>span { color: #087eae; }
#homeView .purpose-field .purpose-card-copy h3 { color: #103844; text-shadow: none; }
#homeView .purpose-field .purpose-card-copy p { color: #3f6570; }
#homeView .purpose-field .purpose-tags span { border-color: #b9dfed; background: rgba(255,255,255,.82); color: #426873; }
#homeView .purpose-field .purpose-symbol { border: 2px solid #bee5f4; background: #fff; color: #0788bd; }
#homeView .purpose-field .purpose-primary { border-bottom-color: var(--duo-blue-dark); background: var(--duo-blue); color: #fff; box-shadow: none; }
#homeView .purpose-field .purpose-quick { border: 2px solid #b9dfed; border-bottom-width: 4px; background: #fff; color: #176f91; }
#homeView .purpose-field .purpose-quick:hover { border-color: #73cbee; background: #fff; color: #075f83; }
#homeView .purpose-learn .purpose-primary { --view-accent: var(--duo-green); --view-accent-dark: var(--duo-green-dark); }
#homeView .purpose-field .purpose-primary { --view-accent: var(--duo-blue); --view-accent-dark: var(--duo-blue-dark); }
#homeView .purpose-review .purpose-primary { --view-accent: var(--duo-pink); --view-accent-dark: var(--duo-pink-dark); }
#homeView .purpose-symbol { border: 0; border-radius: 16px; background: #fff; box-shadow: 0 4px 0 rgba(60,60,60,.12); }
#homeView .purpose-tags span { border-radius: 999px; background: rgba(255,255,255,.74); font-weight: 800; }
#homeView .hero-grid {
  min-height: 0;
  margin: 18px 24px;
  border: 2px solid var(--duo-line);
  border-bottom-width: 5px;
  border-radius: 30px;
  background: #fff;
}
#homeView .hero-copy { background: #fff; }
#homeView .hero-copy h1 { color: var(--duo-ink); font-weight: 900; }
#homeView .hero-copy h1 em { color: var(--duo-green-dark); font-family: inherit; font-style: normal; font-weight: 900; }
#homeView .hero-copy>p { color: #5b6b71; }
#homeView .hot-tags>span { color: #56666c; }
#homeView .hot-tags button {
  border-color: #d3dadd;
  background: #fff;
  color: #4f6066;
}
#homeView .hero-proof>div { border-left-color: #dbe1e3; }
#homeView .hero-proof b { color: #2f3f45; }
#homeView .hero-proof span { color: #4e6067; }
#homeView .hero-proof small { color: #64757b; }
#homeView .hero-vision-link {
  border-color: #d2dade;
  background: #fff;
  color: #43565e;
}
#homeView .hero-search { border: 2px solid var(--duo-line); border-bottom-width: 5px; border-radius: 18px; box-shadow: none; }
#homeView .hero-search button { --view-accent: var(--duo-green); --view-accent-dark: var(--duo-green-dark); }
#homeView .hero-visual { border-radius: 0 27px 27px 0; }
#homeView .dashboard-grid { gap: 18px; padding-top: 10px; }
#homeView .continue-panel, #homeView .review-preview { border-radius: 24px; }
#homeView .review-preview { background: var(--duo-pink-soft); }
#homeView .knowledge-map { padding-bottom: 70px; }
#homeView .map-card { min-height: 220px; border-radius: 22px; }
#homeView .map-cards .map-card:nth-child(1) { background: var(--duo-green-soft); }
#homeView .map-cards .map-card:nth-child(2) { background: var(--duo-blue-soft); }
#homeView .map-cards .map-card:nth-child(3) { background: var(--duo-purple-soft); }
#homeView .map-cards .map-card:nth-child(4) { background: var(--duo-pink-soft); }

/* Search and vision */
.search-layout, .learn-layout, .review-layout, .technical-layout, .safety-layout { gap: 20px; }
.ai-search-box { border-radius: 22px; }
.ai-search-box > span { color: var(--duo-blue); }
.ai-search-box button { --view-accent: var(--duo-blue); --view-accent-dark: var(--duo-blue-dark); }
.ai-orb, .device-ident>span { border-radius: 12px; background: var(--duo-blue); color: #fff; }
.answer-empty { border: 2px dashed #d4d9db; border-radius: 22px; background: rgba(255,255,255,.55); }
.diagnosis-card, .vision-block { border: 2px solid var(--duo-line); border-radius: 16px; background: #fff; }
.check-steps b { border-radius: 9px; background: var(--duo-blue-soft); color: var(--duo-blue-dark); }
.upload-zone { border: 2px dashed #bcdff1; border-radius: 20px; background: var(--duo-blue-soft); }
.vision-submit { --view-accent: var(--duo-blue); --view-accent-dark: var(--duo-blue-dark); }
.vision-limit, .api-callout, .safety-note { border: 0; border-radius: 15px; background: var(--duo-yellow-soft); color: #725c00; }

/* Knowledge path */
#learnView .gam-bar { margin: 18px 24px 14px; border: 2px solid #ccecae; border-bottom-width: 6px; box-shadow: none; }
#learnView .gam-cell { border-color: var(--duo-line); border-bottom-width: 5px; border-radius: 18px; }
#learnView .learn-view-tabs { padding-top: 12px; }
.path-summary { border: 2px solid var(--duo-line); border-bottom-width: 5px; border-radius: 20px; }
.path-unit { border-radius: 18px; box-shadow: 0 6px 0 color-mix(in srgb,var(--unit-color) 72%,#222); }
.path-pop { border: 2px solid var(--duo-line); border-bottom-width: 5px; border-radius: 18px; box-shadow: 0 14px 34px rgba(60,60,60,.18); }
.catalog-card {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: 9px;
}
.catalog-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 88px;
  background: linear-gradient(135deg,var(--duo-green-soft),var(--duo-blue-soft));
  opacity: .75;
}
.catalog-card .course-num,
.catalog-card .course-tag,
.catalog-card h3,
.catalog-card p,
.catalog-card .catalog-foot,
.catalog-card .course-symbol,
.catalog-card .course-thumb {
  position: relative;
  z-index: 1;
}
.course-thumb {
  height: 142px;
  margin: 12px 0 6px;
  display: grid;
  place-items: center;
  border: 2px solid #e6eef0;
  border-bottom-width: 5px;
  border-radius: 22px;
  background: #fff;
  overflow: hidden;
}
.course-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}
.course-thumb span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  min-width: 40px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  border-radius: 13px;
  background: #fff;
  color: var(--duo-blue-dark);
  font-weight: 950;
  box-shadow: 0 3px 0 #d8e4e8;
}
.course-thumb.image-missing::before {
  content: "▧";
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  background: var(--duo-green-soft);
  color: var(--duo-green-dark);
  font-size: 27px;
  box-shadow: 0 4px 0 #bce69a;
}
.catalog-card .course-symbol { display: none; }
.catalog-card h3 { margin-top: 2px; }

/* Review */
.learning-archive { background: var(--duo-pink-soft); }
.review-modes > button {
  border: 2px solid var(--duo-line);
  border-bottom-width: 5px;
  border-radius: 18px;
  background: #fff;
}
.review-modes>button.active { border-color: var(--duo-pink); border-bottom-color: var(--duo-pink-dark); background: var(--duo-pink); color: #4a1838; }
.review-modes>button.active>span,
.review-modes>button.active b,
.review-modes>button.active small,
.review-modes>button.active small i { color: #4a1838; }
.quiz-card { overflow: hidden; }
.option {
  min-height: 62px;
  border: 2px solid var(--duo-line);
  border-bottom-width: 5px;
  border-radius: 15px;
  background: #fff;
  font-weight: 750;
}
.option:hover, .option.selected { border-color: var(--duo-blue); background: var(--duo-blue-soft); color: var(--duo-blue-dark); }
.option.correct { border-color: var(--duo-green); background: var(--duo-green-soft); color: #397a0b; }
.option.wrong { border-color: var(--duo-red); background: var(--duo-red-soft); color: var(--duo-red-dark); }
.explanation { border: 0; border-radius: 15px; background: var(--duo-green-soft); color: #397a0b; }
.mastery-panel {
  color: var(--duo-ink);
  border: 2px solid var(--duo-line);
  border-bottom-width: 6px;
  border-radius: 22px;
  background: #fff;
  box-shadow: none;
}
.mastery-panel h2,
.mastery-panel h3 { color: #2f3f45; }
.mastery-panel .mastery-chart { border-bottom-color: #dfe6e8; }
.mastery-panel .line-chart .grid-line { stroke: #d9e2e5; }
.mastery-panel .line-chart .trend-area { fill: rgba(28,176,246,.12); }
.mastery-panel .line-chart .trend-line { stroke: var(--duo-blue); }
.mastery-panel .line-chart circle { fill: #fff; stroke: var(--duo-blue); }
.mastery-panel .line-chart circle.today-point { fill: var(--duo-blue); }
.mastery-panel .chart-labels span { color: #687b83; font-weight: 750; }
.mastery-panel .mastery-note span { color: var(--duo-green-dark); font-weight: 900; }
.mastery-panel .mastery-note p,
.mastery-panel .accuracy-row span,
.mastery-panel .srs-empty,
.mastery-panel .srs-level em,
.mastery-panel .weakest-callout { color: #5d7078; }
.mastery-panel .accuracy-row { border-top-color: #dfe6e8; }
.mastery-panel .accuracy-row b { color: var(--duo-pink-dark); }
.mastery-panel .srs-block { border-top-color: #d5dee1; }
.mastery-panel .srs-level span { color: #3f535b; font-weight: 800; }
.mastery-panel .srs-level i { border-color: #dce4e7; background: #edf1f2; }
.mastery-panel .srs-level i b { background: var(--duo-green); }
.mastery-panel .radar-ring,
.mastery-panel .radar-axis { stroke: #d9e2e5; }
.mastery-panel .radar-shape { fill: rgba(255,134,208,.2); stroke: var(--duo-pink-dark); }
.mastery-panel .radar-label { fill: #4e626a; font-weight: 800; }
.mastery-panel .weakest-callout b { color: var(--duo-pink-dark); }
.mastery-panel .weakness-btn {
  --view-accent: var(--duo-pink);
  --view-accent-dark: var(--duo-pink-dark);
}
.review-profile-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.review-profile-head h3 { margin: 0; }
.review-profile-head > span {
  color: var(--duo-muted, #6a7c84);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.review-profile-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.review-profile-card {
  min-width: 0;
  padding: 10px;
  border: 2px solid var(--duo-line);
  border-bottom-width: 4px;
  border-radius: 14px;
  background: #fff;
}
.review-profile-card > span {
  display: block;
  color: #70828a;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
}
.review-profile-card > b {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--duo-ink);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.review-profile-card > small {
  display: block;
  margin-top: 3px;
  color: #687b83;
  font-size: 11px;
  line-height: 1.35;
}
.review-profile-tip {
  margin: 10px 0 0;
  color: #5d7078;
  font-size: 12px;
  line-height: 1.55;
}
.review-data-quality {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  color: #5d7078;
  font-size: 12px;
  line-height: 1.45;
}
.review-data-quality .quality-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 11px;
  background: #f4f8f8;
}
.review-data-quality .quality-row b { color: var(--duo-ink); }
.field-case-library {
  padding: 18px;
  border: 2px solid var(--duo-line);
  border-bottom-width: 5px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 4px 0 rgba(30, 52, 59, .08);
}
.field-case-library-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.field-case-kicker {
  color: var(--duo-blue-dark);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}
.field-case-library h2 { margin: 4px 0 0; color: var(--duo-ink); font-size: 20px; }
.field-case-library-head > span { color: var(--duo-green-dark); font-size: 12px; font-weight: 900; }
.field-case-library-intro { margin: 10px 0 12px; color: #5d7078; font-size: 12px; line-height: 1.55; }
.field-case-list { display: grid; gap: 9px; }
.field-case-card {
  padding: 12px;
  border: 2px solid #e1e9e8;
  border-radius: 15px;
  background: #fbfefd;
}
.field-case-card > button {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.field-case-card h3 { margin: 0; color: var(--duo-ink); font-size: 14px; line-height: 1.35; }
.field-case-card .case-device { color: var(--duo-blue-dark); font-size: 11px; font-weight: 850; }
.field-case-card .case-symptom { display: block; margin-top: 5px; color: #63767e; font-size: 12px; line-height: 1.4; }
.field-case-card .case-arrow { color: var(--duo-pink-dark); font-size: 18px; font-weight: 900; }
.field-case-card .case-detail { margin: 9px 0 0; padding-top: 9px; border-top: 1px dashed #d8e5e1; color: #5d7078; font-size: 11px; line-height: 1.5; }
.field-case-card .case-detail b { color: var(--duo-ink); }
.instrument-knowledge-library {
  padding: 18px;
  border: 2px solid #dfe9f1;
  border-bottom-width: 5px;
  border-radius: 20px;
  background: linear-gradient(145deg, #fff, #f3fbff);
  box-shadow: 0 4px 0 rgba(30, 52, 59, .06);
}
.instrument-knowledge-list { display: grid; gap: 9px; }
.instrument-knowledge-card {
  padding: 11px 12px;
  border: 2px solid #dce8ed;
  border-radius: 15px;
  background: rgba(255,255,255,.9);
}
.instrument-knowledge-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  color: var(--duo-ink);
  font-size: 14px;
  font-weight: 900;
}
.instrument-knowledge-card summary::-webkit-details-marker { display: none; }
.instrument-knowledge-card summary::after { content: '＋'; color: var(--duo-blue-dark); font-size: 16px; }
.instrument-knowledge-card[open] summary::after { content: '−'; }
.instrument-knowledge-card summary small { color: var(--duo-blue-dark); font-size: 10px; font-weight: 900; }
.instrument-knowledge-card .knowledge-line { margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed #d8e5e1; color: #5d7078; font-size: 11px; line-height: 1.5; }
.instrument-knowledge-card .knowledge-line b { color: var(--duo-ink); }
@media (max-width: 760px) {
  .review-profile-cards { grid-template-columns: 1fr; }
  .review-profile-card > b { white-space: normal; }
}

/* Technical and safety */
.content-tabs { gap: 9px; }
.field-guide { overflow: hidden; }
.guide-side { background: var(--duo-purple); color: #fff; }
.guide-side i, .guide-symbol { color: #fff; }
.loop-diagram, .formula-strip { border: 2px dashed #d8c2e8; border-radius: 16px; background: var(--duo-purple-soft); }
.safety-hero {
  min-height: 245px;
  margin: 22px 24px 0;
  border-radius: 28px;
  background: linear-gradient(135deg,#ff5b66,var(--duo-pink));
  color: #fff;
}
.safety-hero p, .safety-radar span { color: rgba(255,255,255,.78); }
.safety-ticker { margin: 12px 24px 0; border-radius: 16px; background: var(--duo-yellow); color: #5b4800; }
.safety-ticker span { border-radius: 9px; background: #fff; color: var(--duo-red-dark); }
.safety-updates { margin-top: 18px; border: 0; background: var(--duo-red-soft); }
.accident-card.featured { border-top-width: 2px; border-color: #ffb7b9; }
.accident-meta span, .safety-update-card>span, .safety-update-card>a { color: var(--duo-red-dark); }
.risk-focus { border-radius: 22px; background: #403b6f; }

/* Modal reading surfaces */
.lesson-modal-panel, .calc-modal-card, .book-focus-detail, .book-point-detail {
  border: 2px solid var(--duo-line);
  border-bottom-width: 7px;
  border-radius: 30px;
  background: #fff;
}
.lesson-head {
  border-radius: 28px 28px 0 0;
  background: linear-gradient(135deg,#fff 52%,var(--duo-blue-soft));
  color: var(--duo-ink);
}
.lesson-head span, .lesson-label { color: var(--duo-blue-dark); }
.lesson-head h2 { color: var(--duo-ink); font-weight: 950; letter-spacing: -1px; }
.lesson-head p { color: #53666d; }
.lesson-symbol {
  border: 2px solid #cdeeff;
  border-bottom-width: 5px;
  border-radius: 18px;
  background: #fff;
  color: var(--duo-blue-dark);
}
.lesson-body { background: #fff; }
.lesson-body section,
.lesson-safety {
  border: 2px solid var(--duo-line);
  border-bottom-width: 5px;
  border-radius: 24px;
  background: #fff;
}
.lesson-body section h3 { color: var(--duo-ink); font-weight: 900; }
.objective-list li,
.lesson-points article,
.field-check li {
  border: 2px solid #edf0f1;
  border-bottom-width: 4px;
  border-radius: 18px;
  background: #fbfbfb;
}
.objective-list i,
.lesson-points article>span {
  border-radius: 12px;
  background: var(--duo-green-soft);
  color: var(--duo-green-dark);
}
.lesson-visual {
  margin: 0 0 22px;
  border: 2px solid #d8eef9;
  border-bottom-width: 7px;
  border-radius: 28px;
  background: linear-gradient(180deg,#f4fbff,#fff);
  overflow: hidden;
}
.lesson-visual-stage {
  position: relative;
  min-height: clamp(280px, 46vw, 560px);
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 18% 18%, rgba(88,204,2,.15), transparent 28%),
    radial-gradient(circle at 82% 22%, rgba(28,176,246,.14), transparent 30%),
    linear-gradient(180deg,#f7fcff,#ffffff);
}
.lesson-visual-stage img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-height: 560px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 12px 20px rgba(60,60,60,.10));
}
.lesson-image-fallback {
  position: absolute;
  inset: 18px;
  display: none;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 2px dashed #bfe7f7;
  border-radius: 24px;
  background: rgba(255,255,255,.72);
  color: #436570;
  text-align: center;
}
.lesson-image-fallback::before {
  content: "▧";
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: var(--duo-blue-soft);
  color: var(--duo-blue-dark);
  font-size: 34px;
  box-shadow: 0 5px 0 #bfdef0;
}
.lesson-image-fallback b { font-size: 22px; font-weight: 950; color: var(--duo-ink); }
.lesson-image-fallback span { font-size: 12px; font-weight: 750; color: #64767d; }
.lesson-visual-stage.image-missing .lesson-image-fallback { display: grid; }
.lesson-hotspots button {
  width: 48px;
  height: 48px;
  border: 4px solid #fff;
  border-bottom-width: 7px;
  border-radius: 18px;
  background: var(--duo-blue);
  color: #fff;
  box-shadow: 0 8px 18px rgba(28,176,246,.24);
}
.lesson-hotspots button:hover,
.lesson-hotspots button[aria-pressed="true"] {
  background: var(--duo-green);
  color: #fff;
  transform: translate(-50%,-52%);
}
.lesson-hotspots button span { font-weight: 950; }
.lesson-visual figcaption {
  padding: 12px 18px 16px;
  border-top: 2px solid #edf5f8;
  background: #fff;
  color: #61737a;
  font-weight: 750;
}
.lesson-hotspot-detail {
  margin: 0 18px 18px;
  border: 2px solid #cdeeff;
  border-bottom-width: 6px;
  border-radius: 22px;
  background: var(--duo-blue-soft);
}
.lesson-hotspot-detail h4 { color: #153b47; font-weight: 950; }
.lesson-hotspot-detail dt { color: var(--duo-blue-dark); font-weight: 900; }
.lesson-hotspot-detail dd { color: #3f535b; }
.lesson-table-wrap { border-radius: 18px; border: 2px solid #edf0f1; overflow: auto; }
.lesson-table th { background: var(--duo-green-soft); color: var(--duo-green-dark); }
.lesson-table td { color: #465a61; }
.lesson-safety {
  border-color: #ffd6a8;
  background: #fff7e8;
  color: #684b00;
}
.micro-lesson {
  margin: 0 0 24px;
  border: 2px solid #d7edca;
  border-bottom-width: 8px;
  border-radius: 30px;
  background: linear-gradient(180deg,#f4ffe9,#fff);
  overflow: hidden;
}
.micro-lesson-head {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 18px;
  align-items: end;
  padding: 24px;
  border-bottom: 2px solid #dcefd0;
}
.micro-lesson-head span {
  display: block;
  color: var(--duo-green-dark);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 1.8px;
}
.micro-lesson-head h3 {
  margin: 8px 0 8px;
  color: var(--duo-ink);
  font-size: clamp(26px,3vw,38px);
  font-weight: 950;
  letter-spacing: -1px;
}
.micro-lesson-head p {
  max-width: 760px;
  margin: 0;
  color: #5a6c72;
  font-size: 14px;
  line-height: 1.7;
}
.micro-start,
.micro-controls button {
  min-height: 48px;
  border: 2px solid #dce4e7;
  border-bottom-width: 5px;
  border-radius: 16px;
  background: #fff;
  color: var(--duo-blue-dark);
  padding: 0 18px;
  font: inherit;
  font-weight: 950;
  cursor: pointer;
}
.micro-start {
  border: 0;
  border-bottom: 5px solid var(--duo-green-dark);
  background: var(--duo-green);
  color: #fff;
}
.micro-start:active,
.micro-controls button:active:not(:disabled) {
  transform: translateY(3px);
  border-bottom-width: 2px;
}
.micro-stage {
  position: relative;
  min-height: 620px;
  padding: 24px;
}
.micro-slide {
  display: none;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: stretch;
}
.micro-slide.active { display: grid; }
.micro-slide-copy,
.micro-visual,
.micro-quiz {
  border: 2px solid var(--duo-line);
  border-bottom-width: 6px;
  border-radius: 26px;
  background: #fff;
}
.micro-slide-copy {
  padding: 24px;
}
.micro-slide-copy>span {
  color: var(--duo-blue-dark);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 1.4px;
}
.micro-slide-copy h4 {
  margin: 10px 0;
  color: var(--duo-ink);
  font-size: clamp(24px,2.8vw,36px);
  line-height: 1.15;
  letter-spacing: -1px;
}
.micro-slide-copy>p {
  margin: 0 0 18px;
  color: #53666d;
  font-size: 15px;
  line-height: 1.75;
}
.micro-bullets {
  display: grid;
  gap: 10px;
}
.micro-bullets div {
  display: grid;
  grid-template-columns: 112px minmax(0,1fr);
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 2px solid #edf0f1;
  border-bottom-width: 4px;
  border-radius: 18px;
  background: #fbfbfb;
}
.micro-bullets b {
  display: grid;
  place-items: center;
  min-height: 42px;
  border-radius: 14px;
  background: var(--duo-green-soft);
  color: var(--duo-green-dark);
  font-size: 13px;
}
.micro-bullets small {
  color: #4c5f66;
  font-size: 13px;
  line-height: 1.7;
}
.micro-example,
.micro-tip {
  margin-top: 14px;
  padding: 13px 15px;
  border-radius: 18px;
  background: var(--duo-yellow-soft);
  color: #664f00;
}
.micro-example b,
.micro-tip b,
.micro-example span,
.micro-tip span {
  display: block;
}
.micro-example b,
.micro-tip b {
  font-size: 12px;
  font-weight: 950;
}
.micro-example span,
.micro-tip span {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.65;
}
.micro-visual {
  min-height: 360px;
  display: grid;
  place-items: center;
  padding: 22px;
  background: linear-gradient(135deg,#f7fcff,#fff);
  overflow: hidden;
}
.micro-visual .error-types,
.micro-visual .formula-cards,
.micro-visual .scale-lab,
.micro-visual .trend-lab,
.micro-visual .field-steps,
.micro-visual .mission-board,
.micro-visual .source-board,
.micro-visual .uncertainty-board,
.micro-visual .report-board,
.micro-visual .glossary-board,
.micro-visual .signal-board,
.micro-visual .fault-board,
.micro-visual .recap-board,
.micro-visual .blackboard-board,
.micro-visual .mistake-board,
.micro-visual .case-board,
.micro-visual .exam-board,
.micro-visual .principle-deck,
.micro-visual .formula-practice,
.micro-visual .calculation-lab,
.micro-visual .unit-check,
.micro-visual .trend-calc,
.micro-visual .standard-boundary,
.micro-visual .field-drill-board {
  max-width: 760px;
}
.target-board {
  position: relative;
  width: min(360px,100%);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle,#ff4b4b 0 9%,#fff 10% 23%,#1cb0f6 24% 38%,#fff 39% 54%,#58cc02 55% 70%,#fff 71%);
  box-shadow: 0 10px 0 #d7e1e4;
}
.target-board i {
  position: absolute;
  inset: 20%;
  border: 3px dashed rgba(60,60,60,.18);
  border-radius: 50%;
}
.target-board b {
  position: absolute;
  padding: 7px 12px;
  border-radius: 999px;
  background: #fff;
  color: #c51e2b;
  font-weight: 950;
}
.target-board .dart {
  position: absolute;
  left: 58%;
  top: 34%;
  padding: 7px 10px;
  border-radius: 13px;
  background: #fff;
  color: #33464d;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 3px 0 #dce4e7;
}
.target-board .d2 { left: 18%; top: 61%; }
.target-board em {
  position: absolute;
  bottom: -18px;
  border-radius: 14px;
  padding: 9px 13px;
  background: var(--duo-green);
  color: #fff;
  font-style: normal;
  font-size: 12px;
  font-weight: 950;
  box-shadow: 0 4px 0 var(--duo-green-dark);
}
.error-types,
.formula-cards {
  width: 100%;
  display: grid;
  gap: 14px;
}
.error-types article,
.formula-cards article {
  min-height: 92px;
  display: grid;
  grid-template-columns: 58px minmax(0,1fr);
  align-items: center;
  gap: 13px;
  padding: 14px;
  border: 2px solid #e5e5e5;
  border-bottom-width: 5px;
  border-radius: 20px;
  background: #fff;
}
.error-types i {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: var(--duo-blue-soft);
}
.error-types article:nth-child(1) i { box-shadow: inset 18px 0 0 var(--duo-blue); }
.error-types article:nth-child(2) i { background: radial-gradient(circle at 20% 45%,var(--duo-purple) 0 5px,transparent 6px),radial-gradient(circle at 60% 25%,var(--duo-purple) 0 5px,transparent 6px),radial-gradient(circle at 72% 70%,var(--duo-purple) 0 5px,transparent 6px),var(--duo-purple-soft); }
.error-types article:nth-child(3) i { background: linear-gradient(135deg,var(--duo-red) 0 45%,var(--duo-red-soft) 46%); }
.error-types b,
.error-types span,
.formula-cards b,
.formula-cards span {
  display: block;
}
.error-types b,
.formula-cards b {
  color: var(--duo-ink);
  font-size: 16px;
  font-weight: 950;
}
.error-types span,
.formula-cards span {
  margin-top: 5px;
  color: #63757c;
  font-size: 12px;
  font-weight: 800;
}
.formula-cards article {
  grid-template-columns: 1fr;
  background: linear-gradient(135deg,#fff,var(--duo-blue-soft));
}
.formula-cards span {
  font-size: 23px;
  color: var(--duo-blue-dark);
  font-weight: 950;
}
.scale-lab {
  width: 100%;
  display: grid;
  gap: 26px;
}
.scale-bar {
  position: relative;
  height: 92px;
  border-radius: 22px;
  background: repeating-linear-gradient(90deg,#eef4f6 0 2px,transparent 2px 10%);
}
.scale-bar::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 45px;
  height: 12px;
  border-radius: 999px;
  background: #dce4e7;
}
.scale-bar span {
  position: absolute;
  left: 8%;
  top: 45px;
  width: 84%;
  height: 12px;
  border-radius: 999px;
  background: var(--duo-green);
}
.scale-bar i {
  position: absolute;
  top: 66px;
  transform: translateX(-50%);
  color: #60737a;
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
}
.allow-band {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 120px;
  border: 3px dashed #bde99d;
  border-radius: 24px;
  background: var(--duo-green-soft);
  color: var(--duo-green-dark);
}
.allow-band b { font-size: 34px; font-weight: 950; }
.allow-band em { font-style: normal; font-size: 14px; font-weight: 900; }
.trend-lab {
  width: 100%;
  display: grid;
  gap: 14px;
}
.trend-grid {
  position: relative;
  height: 280px;
  border: 2px solid #dce4e7;
  border-radius: 22px;
  background: repeating-linear-gradient(0deg,#f3f7f8 0 2px,transparent 2px 56px),repeating-linear-gradient(90deg,#f3f7f8 0 2px,transparent 2px 70px),#fff;
}
.trend-grid .line {
  position: absolute;
  left: 34px;
  right: 34px;
  height: 6px;
  border-radius: 999px;
}
.trend-grid .repeat { top: 72px; background: var(--duo-green); box-shadow: 26px -8px 0 var(--duo-green), 74px 8px 0 var(--duo-green), 130px -5px 0 var(--duo-green); }
.trend-grid .hysteresis { top: 142px; background: var(--duo-blue); transform: rotate(-5deg); }
.trend-grid .drift { top: 218px; background: var(--duo-pink); transform: rotate(8deg); }
.trend-lab>div:last-child {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
}
.trend-lab span {
  display: grid;
  place-items: center;
  min-height: 42px;
  border-radius: 14px;
  background: #fff;
  color: #4d6068;
  font-size: 12px;
  font-weight: 950;
  box-shadow: 0 3px 0 #dce4e7;
}
.field-steps {
  width: 100%;
  display: grid;
  gap: 12px;
}
.field-steps i {
  position: relative;
  min-height: 58px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  background: #fff;
  color: #31464e;
  font-style: normal;
  font-weight: 950;
  box-shadow: 0 5px 0 #dce4e7;
}
.field-steps i:not(:last-child)::after {
  content: "↓";
  position: absolute;
  bottom: -18px;
  color: var(--duo-green);
  z-index: 1;
}
.mission-board {
  width: 100%;
  display: grid;
  gap: 13px;
}
.mission-board b {
  display: grid;
  place-items: center;
  min-height: 74px;
  border: 2px solid #dce4e7;
  border-bottom-width: 5px;
  border-radius: 20px;
  background: #fff;
  color: var(--duo-blue-dark);
  font-size: 24px;
  font-weight: 950;
}
.mission-board span {
  display: block;
  padding: 14px;
  border-radius: 18px;
  background: var(--duo-yellow-soft);
  color: #685200;
  text-align: center;
  font-weight: 950;
}
.concept-board {
  width: 100%;
  max-width: 720px;
  display: grid;
  grid-template-columns: 1fr 44px 1fr 44px 1fr;
  gap: 10px;
  align-items: center;
}
.concept-board b,
.workflow-board span,
.compare-board article,
.device-board {
  border: 2px solid #e1e8eb;
  border-bottom-width: 5px;
  border-radius: 22px;
  background: #fff;
  color: #35484f;
  font-weight: 950;
  box-shadow: none;
}
.concept-board b {
  min-height: 92px;
  display: grid;
  place-items: center;
  text-align: center;
}
.concept-board i {
  display: grid;
  place-items: center;
  color: var(--duo-green);
  font-style: normal;
  font-size: 32px;
  font-weight: 950;
}
.concept-board span {
  grid-column: 1 / -1;
  justify-self: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--duo-green-soft);
  color: var(--duo-green-dark);
  font-size: 13px;
  font-weight: 900;
}
.workflow-board {
  width: 100%;
  max-width: 760px;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 14px;
  position: relative;
}
.workflow-board span {
  min-height: 118px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,#fff,var(--duo-blue-soft));
  color: var(--duo-blue-dark);
}
.workflow-board i {
  display: none;
}
.compare-board {
  width: 100%;
  max-width: 760px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
}
.compare-board article {
  min-height: 160px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  padding: 18px;
}
.compare-board article:nth-child(1) { background: var(--duo-green-soft); color: var(--duo-green-dark); }
.compare-board article:nth-child(2) { background: var(--duo-blue-soft); color: var(--duo-blue-dark); }
.compare-board article:nth-child(3) { background: var(--duo-pink-soft); color: var(--duo-pink-dark); }
.compare-board b,
.compare-board span {
  display: block;
}
.compare-board b {
  font-size: 24px;
}
.compare-board span {
  margin-top: 9px;
  font-size: 13px;
}
.device-board {
  width: min(520px,100%);
  min-height: 340px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  padding: 24px;
  background: linear-gradient(180deg,#f7fcff,#fff);
  text-align: center;
}
.device-shell {
  width: min(320px,100%);
  height: 178px;
  position: relative;
  border-radius: 34px;
  background: var(--duo-blue);
  box-shadow: 0 9px 0 var(--duo-blue-dark);
}
.device-shell::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 42px;
  width: 86px;
  height: 86px;
  border-radius: 26px;
  background: #fff;
  box-shadow: inset 0 0 0 10px #dff4ff;
}
.device-shell::after {
  content: "";
  position: absolute;
  right: 32px;
  top: 50px;
  width: 122px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 36px 0 #fff, 0 72px 0 #fff;
}
.device-shell i {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--duo-yellow);
  box-shadow: 0 4px 0 var(--duo-yellow-dark);
}
.device-shell i:nth-child(1) { left: -10px; top: 76px; }
.device-shell i:nth-child(2) { right: -10px; top: 76px; }
.device-shell i:nth-child(3) { left: 148px; bottom: -10px; }
.device-board b {
  color: var(--duo-ink);
  font-size: 20px;
}
.device-board span {
  color: #65777e;
  font-size: 13px;
  line-height: 1.6;
}
.source-board,
.recap-board {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
}
.source-board article,
.recap-board article {
  min-height: 188px;
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 20px;
  border: 2px solid #e1e8eb;
  border-bottom-width: 6px;
  border-radius: 26px;
  background: #fff;
  text-align: center;
}
.source-board article:nth-child(1),
.recap-board article:nth-child(1) { background: var(--duo-green-soft); color: var(--duo-green-dark); }
.source-board article:nth-child(2),
.recap-board article:nth-child(2) { background: var(--duo-blue-soft); color: var(--duo-blue-dark); }
.source-board article:nth-child(3),
.recap-board article:nth-child(3) { background: var(--duo-pink-soft); color: var(--duo-pink-dark); }
.source-board b,
.recap-board b {
  font-size: 30px;
  font-weight: 950;
}
.source-board span,
.recap-board span {
  color: #52646b;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.6;
}
.uncertainty-board {
  width: min(560px,100%);
  min-height: 330px;
  display: grid;
  place-items: center;
  gap: 12px;
  position: relative;
}
.uncertainty-board b {
  width: 150px;
  height: 150px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--duo-blue);
  color: #fff;
  font-size: 28px;
  font-weight: 950;
  box-shadow: 0 7px 0 var(--duo-blue-dark);
  z-index: 2;
}
.uncertainty-board i {
  position: absolute;
  width: 270px;
  height: 270px;
  border-radius: 50%;
  border: 18px solid var(--duo-green-soft);
  box-shadow: inset 0 0 0 3px #bde99d;
}
.uncertainty-board span {
  z-index: 2;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--duo-green);
  color: #fff;
  font-weight: 950;
  box-shadow: 0 4px 0 var(--duo-green-dark);
}
.uncertainty-board em {
  z-index: 2;
  max-width: 360px;
  border-radius: 18px;
  padding: 12px 14px;
  background: #fff;
  color: #5c6d74;
  font-style: normal;
  font-size: 13px;
  font-weight: 850;
  text-align: center;
  box-shadow: 0 4px 0 #dce4e7;
}
.report-board {
  width: 100%;
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 2px solid #e1e8eb;
  border-bottom-width: 6px;
  border-radius: 25px;
  background: #fff;
}
.report-board div {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 8px;
  align-items: center;
}
.report-board b,
.report-board span,
.report-board strong {
  min-height: 54px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: #f4f7f8;
  color: #40555d;
  font-weight: 950;
}
.report-board b { background: var(--duo-blue-soft); color: var(--duo-blue-dark); }
.report-board strong { background: var(--duo-green-soft); color: var(--duo-green-dark); }
.glossary-board {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 110px 1fr;
  align-items: center;
  gap: 18px;
}
.glossary-board article {
  min-height: 210px;
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 22px;
  border: 2px solid #e1e8eb;
  border-bottom-width: 6px;
  border-radius: 28px;
  background: #fff;
  text-align: center;
}
.glossary-board b { color: var(--duo-ink); font-size: 30px; font-weight: 950; }
.glossary-board span { color: #5d6f76; font-size: 13px; font-weight: 900; line-height: 1.7; }
.glossary-board i {
  min-height: 74px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--duo-yellow);
  color: #654900;
  font-style: normal;
  font-weight: 950;
  box-shadow: 0 5px 0 var(--duo-yellow-dark);
}
.signal-board {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 13px;
}
.signal-board span {
  min-height: 140px;
  display: grid;
  place-items: center;
  border: 2px solid #e1e8eb;
  border-bottom-width: 6px;
  border-radius: 24px;
  background: linear-gradient(135deg,#fff,var(--duo-blue-soft));
  color: var(--duo-blue-dark);
  font-weight: 950;
  text-align: center;
}
.signal-board i { display: none; }
.fault-board {
  width: 100%;
  display: grid;
  gap: 16px;
}
.fault-board>b {
  min-height: 86px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: var(--duo-red);
  color: #fff;
  font-size: 28px;
  font-weight: 950;
  box-shadow: 0 6px 0 var(--duo-red-dark);
}
.fault-board div {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 10px;
}
.fault-board span {
  min-height: 92px;
  display: grid;
  place-items: center;
  border: 2px solid #e1e8eb;
  border-bottom-width: 5px;
  border-radius: 18px;
  background: #fff;
  color: #40555d;
  font-weight: 950;
  text-align: center;
}
.fault-board em {
  padding: 13px 16px;
  border-radius: 18px;
  background: var(--duo-yellow-soft);
  color: #685200;
  font-style: normal;
  font-weight: 950;
  text-align: center;
}
.blackboard-board {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 42px 1fr 42px 1fr;
  gap: 12px;
  align-items: center;
  padding: 22px;
  border: 2px solid #d4e1e5;
  border-bottom-width: 7px;
  border-radius: 30px;
  background: linear-gradient(135deg,#0d2b2f,#173f44);
  color: #fff;
}
.blackboard-board b {
  min-height: 112px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255,255,255,.28);
  border-radius: 22px;
  background: rgba(255,255,255,.08);
  font-size: 26px;
  font-weight: 950;
}
.blackboard-board i {
  color: var(--duo-yellow);
  font-style: normal;
  font-size: 32px;
  font-weight: 950;
  text-align: center;
}
.blackboard-board span {
  grid-column: 1 / -1;
  justify-self: center;
  padding: 10px 15px;
  border-radius: 999px;
  background: var(--duo-green);
  color: #fff;
  font-size: 13px;
  font-weight: 950;
}
.mistake-board {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
}
.mistake-board article {
  min-height: 188px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  border: 2px solid #ffd2d4;
  border-bottom-width: 6px;
  border-radius: 26px;
  background: linear-gradient(135deg,#fff,var(--duo-red-soft));
  color: var(--duo-red-dark);
  text-align: center;
}
.mistake-board b {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: var(--duo-red);
  color: #fff;
  font-weight: 950;
  box-shadow: 0 4px 0 var(--duo-red-dark);
}
.mistake-board span { color: #6b4448; font-size: 15px; font-weight: 950; }
.case-board {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 12px;
  align-items: center;
}
.case-board span {
  min-height: 122px;
  display: grid;
  place-items: center;
  border: 2px solid #dbe8ec;
  border-bottom-width: 6px;
  border-radius: 24px;
  background: #fff;
  color: #40555d;
  font-size: 22px;
  font-weight: 950;
}
.case-board span:nth-child(1) { background: var(--duo-blue-soft); color: var(--duo-blue-dark); }
.case-board span:nth-child(3) { background: var(--duo-green-soft); color: var(--duo-green-dark); }
.case-board span:nth-child(5) { background: var(--duo-yellow-soft); color: var(--duo-yellow-dark); }
.case-board span:nth-child(7) { background: var(--duo-pink-soft); color: var(--duo-pink-dark); }
.case-board i { display: none; }
.case-board em {
  grid-column: 1 / -1;
  justify-self: center;
  padding: 11px 16px;
  border-radius: 999px;
  background: #fff;
  color: #5b6d74;
  font-style: normal;
  font-weight: 950;
  box-shadow: 0 4px 0 #dce4e7;
}
.exam-board {
  width: min(600px,100%);
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 12px;
}
.exam-board b {
  grid-column: 1 / -1;
  min-height: 92px;
  display: grid;
  place-items: center;
  border-radius: 26px;
  background: var(--duo-green);
  color: #fff;
  font-size: 32px;
  font-weight: 950;
  box-shadow: 0 6px 0 var(--duo-green-dark);
}
.exam-board span {
  min-height: 78px;
  display: grid;
  place-items: center;
  border: 2px solid #dbe8ec;
  border-bottom-width: 5px;
  border-radius: 20px;
  background: #fff;
  color: #465b62;
  font-weight: 950;
}
.principle-deck {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 12px;
  align-items: center;
}
.principle-deck span {
  min-height: 138px;
  display: grid;
  place-items: center;
  border: 2px solid #dbe8ec;
  border-bottom-width: 6px;
  border-radius: 26px;
  background: linear-gradient(135deg,#fff,var(--duo-blue-soft));
  color: var(--duo-blue-dark);
  font-size: 18px;
  font-weight: 950;
  text-align: center;
}
.principle-deck span:nth-child(3) { background: var(--duo-green-soft); color: var(--duo-green-dark); }
.principle-deck span:nth-child(5) { background: var(--duo-yellow-soft); color: var(--duo-yellow-dark); }
.principle-deck span:nth-child(7) { background: var(--duo-pink-soft); color: var(--duo-pink-dark); }
.principle-deck i { display: none; }
.principle-deck em {
  grid-column: 1 / -1;
  justify-self: center;
  padding: 11px 16px;
  border-radius: 999px;
  background: #fff;
  color: #50636b;
  font-style: normal;
  font-weight: 950;
  box-shadow: 0 4px 0 #dce4e7;
}
.formula-practice {
  width: min(620px,100%);
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
}
.formula-practice article {
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 2px solid #dbe8ec;
  border-bottom-width: 6px;
  border-radius: 26px;
  background: #fff;
}
.formula-practice article:nth-child(1) { background: var(--duo-blue-soft); color: var(--duo-blue-dark); }
.formula-practice article:nth-child(2) { background: var(--duo-green-soft); color: var(--duo-green-dark); }
.formula-practice article:nth-child(3) { background: var(--duo-pink-soft); color: var(--duo-pink-dark); }
.formula-practice b { font-size: 34px; font-weight: 950; }
.formula-practice span { color: #51646b; font-size: 13px; font-weight: 950; }
.formula-practice em {
  grid-column: 1 / -1;
  padding: 14px 16px;
  border-radius: 20px;
  background: #132e33;
  color: #fff;
  font-style: normal;
  font-size: 18px;
  font-weight: 950;
  text-align: center;
}
.calculation-lab {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 36px 1fr 36px 1fr;
  gap: 12px;
  align-items: center;
}
.calculation-lab>div {
  min-height: 152px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 14px;
  border: 2px solid #dbe8ec;
  border-bottom-width: 6px;
  border-radius: 24px;
  background: #fff;
  text-align: center;
}
.calculation-lab>div:nth-child(1) { background: var(--duo-blue-soft); color: var(--duo-blue-dark); }
.calculation-lab>div:nth-child(3) { background: var(--duo-yellow-soft); color: var(--duo-yellow-dark); }
.calculation-lab>div:nth-child(5) { background: var(--duo-green-soft); color: var(--duo-green-dark); }
.calculation-lab small { font-size: 11px; font-weight: 950; opacity: .75; }
.calculation-lab b { font-size: 18px; line-height: 1.35; }
.calculation-lab>i {
  color: var(--duo-green);
  font-style: normal;
  font-size: 29px;
  font-weight: 950;
  text-align: center;
}
.calculation-lab em,
.unit-check em,
.trend-calc em {
  grid-column: 1 / -1;
  justify-self: center;
  padding: 11px 16px;
  border-radius: 999px;
  background: #132e33;
  color: #fff;
  font-style: normal;
  font-size: 13px;
  font-weight: 950;
  text-align: center;
}
.unit-check {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
}
.unit-check article {
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 2px solid #dbe8ec;
  border-bottom-width: 6px;
  border-radius: 26px;
  background: #fff;
  text-align: center;
}
.unit-check article:nth-child(1) { background: var(--duo-blue-soft); color: var(--duo-blue-dark); }
.unit-check article:nth-child(2) { background: var(--duo-pink-soft); color: var(--duo-pink-dark); }
.unit-check article:nth-child(3) { background: var(--duo-green-soft); color: var(--duo-green-dark); }
.unit-check b { font-size: 26px; font-weight: 950; }
.unit-check span { color: #51646b; font-size: 13px; font-weight: 950; }
.trend-calc {
  width: min(600px,100%);
  display: grid;
  gap: 14px;
}
.trend-calc-grid {
  position: relative;
  min-height: 210px;
  overflow: hidden;
  border: 2px solid #dbe8ec;
  border-radius: 24px;
  background: repeating-linear-gradient(0deg,transparent 0 38px,#e9f0f2 39px 40px), repeating-linear-gradient(90deg,transparent 0 58px,#e9f0f2 59px 60px),#fff;
}
.trend-calc-grid::before,
.trend-calc-grid::after,
.trend-calc-grid i { content: ''; position: absolute; display: block; height: 5px; border-radius: 999px; transform-origin: left center; }
.trend-calc-grid::before { width: 76%; left: 10%; top: 65%; background: var(--duo-blue); transform: rotate(-13deg); }
.trend-calc-grid::after { width: 76%; left: 10%; top: 69%; background: var(--duo-pink); transform: rotate(-10deg); }
.trend-calc-grid i:nth-child(1) { width: 65%; left: 15%; top: 62%; background: var(--duo-green); transform: rotate(-12deg); }
.trend-calc-grid i:nth-child(2) { width: 45%; left: 16%; top: 78%; background: var(--duo-yellow-dark); transform: rotate(-8deg); }
.trend-calc-grid i:nth-child(3) { width: 70%; left: 12%; top: 47%; background: var(--duo-purple); transform: rotate(-16deg); opacity: .7; }
.trend-calc>div:nth-child(2) { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.trend-calc>div:nth-child(2) b { padding: 10px; border-radius: 14px; background: var(--duo-blue-soft); color: var(--duo-blue-dark); text-align: center; font-size: 12px; }
.standard-boundary {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 44px 1fr 44px 1fr;
  gap: 12px;
  align-items: center;
}
.standard-boundary b {
  min-height: 130px;
  display: grid;
  place-items: center;
  border: 2px solid #dbe8ec;
  border-bottom-width: 6px;
  border-radius: 26px;
  background: #fff;
  color: #465b62;
  font-size: 20px;
  font-weight: 950;
  text-align: center;
}
.standard-boundary b:nth-child(1) { background: var(--duo-yellow-soft); color: var(--duo-yellow-dark); }
.standard-boundary b:nth-child(3) { background: var(--duo-blue-soft); color: var(--duo-blue-dark); }
.standard-boundary b:nth-child(5) { background: var(--duo-green-soft); color: var(--duo-green-dark); }
.standard-boundary i {
  display: grid;
  place-items: center;
  color: var(--duo-green);
  font-style: normal;
  font-size: 32px;
  font-weight: 950;
}
.standard-boundary span {
  grid-column: 1 / -1;
  justify-self: center;
  padding: 11px 16px;
  border-radius: 999px;
  background: var(--duo-green);
  color: #fff;
  font-weight: 950;
  box-shadow: 0 4px 0 var(--duo-green-dark);
}
.field-drill-board {
  width: min(620px,100%);
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 12px;
}
.field-drill-board span {
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  justify-self: center;
  border-radius: 50%;
  background: var(--duo-green);
  color: #fff;
  font-size: 34px;
  font-weight: 950;
  box-shadow: 0 7px 0 var(--duo-green-dark);
}
.field-drill-board span:nth-child(2) { background: var(--duo-blue); box-shadow: 0 7px 0 var(--duo-blue-dark); }
.field-drill-board span:nth-child(3) { background: var(--duo-purple); box-shadow: 0 7px 0 var(--duo-purple-dark); }
.field-drill-board span:nth-child(4) { background: var(--duo-pink); box-shadow: 0 7px 0 var(--duo-pink-dark); }
.field-drill-board em {
  grid-column: 1 / -1;
  justify-self: center;
  padding: 12px 16px;
  border-radius: 999px;
  background: #fff;
  color: #50636b;
  font-style: normal;
  font-weight: 950;
  box-shadow: 0 4px 0 #dce4e7;
}

/* 教材 PPT 的现场判断图需要在窄桌面 / 平板视口内自动收拢，不能让圆形步骤撑破右侧卡片。 */
.book-ppt-visual .field-drill-board {
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  width: min(620px, 100%);
  max-width: 100%;
}
.book-ppt-visual .field-drill-board span {
  width: min(112px, 100%);
  height: auto;
  aspect-ratio: 1;
  font-size: clamp(24px, 4vw, 34px);
}
.book-ppt-visual .field-drill-board em {
  max-width: 100%;
  box-sizing: border-box;
  text-align: center;
}

@media (min-width: 701px) and (max-width: 980px) {
  .book-ppt-slide.active { grid-template-columns: 1fr; }
  .book-ppt-visual { min-height: 300px; }
  .book-ppt-visual .micro-visual { min-height: 260px; }
}
.micro-quiz {
  grid-column: 1 / -1;
  padding: 18px;
  background: linear-gradient(135deg,#fff,#f7fff0);
}
.micro-quiz>b {
  color: var(--duo-green-dark);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 1px;
}
.micro-quiz p {
  margin: 8px 0 14px;
  color: var(--duo-ink);
  font-size: 18px;
  font-weight: 950;
}
.micro-quiz>div {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
}
.micro-quiz button {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 2px solid #dce4e7;
  border-bottom-width: 5px;
  border-radius: 16px;
  background: #fff;
  color: #475b62;
  padding: 10px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}
.micro-quiz button i {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 9px;
  background: var(--duo-blue-soft);
  color: var(--duo-blue-dark);
  font-style: normal;
}
.micro-quiz button.correct { border-color: var(--duo-green); background: var(--duo-green-soft); color: var(--duo-green-dark); }
.micro-quiz button.wrong { border-color: var(--duo-red); background: var(--duo-red-soft); color: var(--duo-red-dark); }
.micro-quiz>span {
  display: block;
  min-height: 0;
  margin-top: 12px;
  color: #51646b;
  font-size: 13px;
  line-height: 1.6;
}
.micro-quiz>span b {
  margin-right: 6px;
  color: var(--duo-green-dark);
}
.micro-controls {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 20px 20px;
  border-top: 2px solid #e6f2df;
  background: #fff;
}
.micro-controls button:disabled {
  background: #edf1f2;
  color: #8b989d;
  cursor: not-allowed;
}
.micro-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.micro-dots button {
  width: 14px;
  min-width: 0;
  height: 14px;
  min-height: 0;
  border: 0;
  border-radius: 999px;
  background: #dce4e7;
  padding: 0;
  cursor: pointer;
}
.micro-dots button.active {
  width: 34px;
  background: var(--duo-green);
}
.lesson-foot { border-top: 2px solid var(--duo-line); background: #fff; }
.lesson-foot button { border: 0; border-bottom: 5px solid var(--duo-green-dark); border-radius: 14px; background: var(--duo-green); color: #fff; }

/* Instrument-worker journey: factory zones, daily shift and scenario missions */
.journey-command {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(240px,.85fr);
  gap: 14px;
  margin-bottom: 14px;
}
.journey-buddy, .journey-daily, .journey-toolbox-toggle, .journey-inventory {
  border: 2px solid var(--duo-line);
  border-bottom-width: 5px;
  border-radius: 22px;
  background: #fff;
}
.journey-buddy {
  grid-row: span 2;
  display: grid;
  grid-template-columns: 104px minmax(0,1fr);
  align-items: center;
  min-height: 166px;
  padding: 18px 22px 18px 12px;
  background: linear-gradient(135deg,var(--duo-green-soft),#fff 72%);
  border-color: #ccebad;
}
.journey-buddy img { width: 104px; height: 116px; object-fit: contain; }
.journey-buddy span, .journey-daily-head span, .journey-inventory header span {
  display: block;
  color: var(--duo-green-dark);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.4px;
}
.journey-buddy b { display:block; margin:5px 0 6px; color:var(--duo-ink); font-size:20px; line-height:1.25; }
.journey-buddy p { margin:0; color:var(--duo-muted); font-size:12px; line-height:1.65; }
.journey-daily { padding:14px 16px; border-color:#c9eaff; background:var(--duo-blue-soft); }
.journey-daily-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.journey-daily-head span { color:var(--duo-blue-dark); }
.journey-daily-head b { display:block; margin-top:2px; font-size:14px; }
.journey-daily-head>small { display:grid; place-items:center; min-width:38px; height:26px; border-radius:99px; background:#fff; color:var(--duo-blue-dark); font-weight:900; }
.journey-task-list { display:grid; gap:7px; }
.journey-task-list>div { display:grid; grid-template-columns:28px minmax(0,1fr); align-items:center; gap:8px; }
.journey-task-list i { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; background:#fff; color:var(--duo-blue-dark); font-style:normal; font-size:13px; font-weight:900; }
.journey-task-list span { display:flex; justify-content:space-between; gap:10px; color:#527080; font-size:11px; font-weight:800; }
.journey-task-list small { color:#77939f; font-size:10px; }
.journey-task-list .done i { background:var(--duo-green); color:#fff; }
.journey-task-list .done span { color:var(--duo-green-dark); }
.journey-toolbox-toggle { min-height:54px; display:grid; grid-template-columns:38px minmax(0,1fr) 20px; align-items:center; gap:10px; padding:8px 14px; color:var(--duo-ink); font:inherit; text-align:left; cursor:pointer; }
.journey-toolbox-toggle>span { font-size:25px; }
.journey-toolbox-toggle small, .journey-toolbox-toggle b { display:block; }
.journey-toolbox-toggle small { color:var(--duo-muted); font-size:9px; font-weight:800; }
.journey-toolbox-toggle b { margin-top:2px; font-size:12px; }
.journey-toolbox-toggle i { color:var(--duo-purple-dark); font-size:26px; font-style:normal; transition:transform .2s ease; }
.journey-toolbox-toggle[aria-expanded="true"] i { transform:rotate(90deg); }
.journey-toolbox-toggle:active { transform:translateY(2px); border-bottom-width:3px; }
.journey-inventory { margin:-2px 0 14px; padding:16px; border-color:#e2cef1; background:var(--duo-purple-soft); }
.journey-inventory header { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:12px; }
.journey-inventory header span { color:var(--duo-purple-dark); }
.journey-inventory header b { display:block; margin-top:2px; font-size:15px; }
.journey-inventory header small { color:#856b96; font-size:10px; }
.journey-inventory>div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.journey-inventory article { display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; gap:10px; min-height:66px; padding:10px; border:2px solid #e2d9e9; border-radius:16px; background:rgba(255,255,255,.72); filter:grayscale(.7); opacity:.7; }
.journey-inventory article.owned { background:#fff; border-color:#cf9df0; filter:none; opacity:1; box-shadow:0 3px 0 #d8c1e8; }
.journey-inventory article i { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:#f0e7f5; font-size:22px; font-style:normal; }
.journey-inventory article b, .journey-inventory article span { display:block; }
.journey-inventory article b { font-size:12px; }
.journey-inventory article span { margin-top:3px; color:var(--duo-muted); font-size:9px; line-height:1.4; }

.path-unit { border-radius:20px; box-shadow:0 6px 0 color-mix(in srgb,var(--unit-color) 72%,#000); padding:17px 19px; }
.path-unit b { font-size:16px; }
.path-unit span { display:block; margin-top:4px; font-size:10px; }
.journey-checkpoint { position:relative; z-index:2; margin:14px 0 32px; padding:14px; border:2px solid color-mix(in srgb,var(--zone-color) 35%,#e5e5e5); border-bottom-width:5px; border-radius:22px; background:var(--zone-soft); }
.journey-checkpoint>header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.journey-checkpoint>header>span { width:40px; height:40px; display:grid; place-items:center; border-radius:13px; background:#fff; font-size:22px; box-shadow:0 3px 0 color-mix(in srgb,var(--zone-color) 24%,#ddd); }
.journey-checkpoint>header small, .journey-checkpoint>header b { display:block; }
.journey-checkpoint>header small { color:color-mix(in srgb,var(--zone-color) 72%,#35464d); font-size:9px; font-weight:900; letter-spacing:.8px; }
.journey-checkpoint>header b { margin-top:3px; font-size:12px; }
.journey-checkpoint>div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.journey-checkpoint button { display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:10px; width:100%; min-height:62px; padding:9px 12px; border:2px solid #e5e5e5; border-bottom-width:4px; border-radius:16px; background:#fff; color:var(--duo-ink); font:inherit; text-align:left; cursor:pointer; }
.journey-checkpoint button>i { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:var(--zone-soft); color:var(--zone-color); font-style:normal; font-size:18px; font-weight:900; }
.journey-checkpoint button b, .journey-checkpoint button small { display:block; }
.journey-checkpoint button b { font-size:12px; }
.journey-checkpoint button small { margin-top:3px; color:var(--duo-muted); font-size:9px; line-height:1.4; }
.journey-checkpoint button em { border-radius:99px; padding:5px 8px; background:var(--zone-soft); color:color-mix(in srgb,var(--zone-color) 78%,#263238); font-size:9px; font-style:normal; font-weight:900; }
.journey-checkpoint button.ready { border-color:color-mix(in srgb,var(--zone-color) 52%,#e5e5e5); }
.journey-checkpoint button[data-journey-kind="boss"] { grid-column:1 / -1; }
.journey-checkpoint button[data-journey-kind="patrol"]>i { background:var(--duo-yellow-soft); color:var(--duo-yellow-dark); }
.journey-checkpoint button[data-journey-kind="wiring"]>i { background:var(--duo-blue-soft); color:var(--duo-blue-dark); }
.journey-checkpoint button[data-journey-kind="trend"]>i { background:var(--duo-purple-soft); color:var(--duo-purple-dark); }
.journey-checkpoint button[data-journey-kind="boss"]>i { background:var(--duo-red-soft); color:var(--duo-red-dark); }
.journey-checkpoint button.ready:hover { transform:translateY(-1px); }
.journey-checkpoint button.ready:active { transform:translateY(2px); border-bottom-width:2px; }
.journey-checkpoint button.complete { border-color:#b9e894; background:#f7fff0; }
.journey-checkpoint button.complete>i { background:var(--duo-green); color:#fff; }
.journey-checkpoint button.locked { cursor:not-allowed; filter:grayscale(1); opacity:.58; }

body.journey-mission-open { overflow:hidden; }
.journey-mission[hidden] { display:none; }
.journey-mission { position:fixed; inset:0; z-index:1950; display:grid; place-items:center; padding:22px; background:rgba(25,35,40,.64); backdrop-filter:blur(8px); font-family:ui-rounded,"SF Pro Rounded","PingFang SC",system-ui,sans-serif; }
.journey-mission-card { width:min(720px,100%); max-height:calc(100vh - 44px); overflow:auto; border:2px solid #e5e5e5; border-bottom-width:7px; border-radius:28px; background:#fff; color:var(--duo-ink); box-shadow:0 24px 70px rgba(0,0,0,.25); }
.journey-mission-card>header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:24px 26px 18px; background:var(--mission-soft); border-bottom:2px solid color-mix(in srgb,var(--mission-color) 30%,#e5e5e5); }
.journey-mission-card>header span { color:color-mix(in srgb,var(--mission-color) 75%,#263238); font-size:10px; font-weight:900; letter-spacing:1.2px; }
.journey-mission-card>header h2 { margin:7px 0 0; font-size:27px; letter-spacing:-.8px; }
.journey-mission-card>header button { width:42px; height:42px; flex:none; border:2px solid #ddd; border-bottom-width:4px; border-radius:14px; background:#fff; color:#7b858a; font-size:25px; cursor:pointer; }
.journey-mission-card>main { padding:22px 26px; }
.journey-scene { display:grid; grid-template-columns:54px minmax(0,1fr); gap:14px; align-items:start; padding:15px; border:2px solid color-mix(in srgb,var(--mission-color) 30%,#e5e5e5); border-radius:18px; background:var(--mission-soft); }
.journey-scene>i { width:54px; height:54px; display:grid; place-items:center; border-radius:16px; background:#fff; font-size:28px; font-style:normal; }
.journey-scene b { font-size:12px; color:color-mix(in srgb,var(--mission-color) 72%,#263238); }
.journey-scene p { margin:6px 0 0; font-size:14px; line-height:1.7; }
.journey-mission-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:16px; }
.journey-mission-options button { display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center; gap:10px; min-height:72px; padding:11px 13px; border:2px solid #e5e5e5; border-bottom-width:5px; border-radius:16px; background:#fff; color:var(--duo-ink); font:inherit; text-align:left; cursor:pointer; }
.journey-mission-options button i { width:34px; height:34px; display:grid; place-items:center; border:2px solid #e5e5e5; border-radius:10px; color:#7f898e; font-style:normal; font-size:12px; font-weight:900; }
.journey-mission-options button span { font-size:12px; line-height:1.5; font-weight:800; }
.journey-mission-options button.selected { border-color:var(--mission-color); background:var(--mission-soft); }
.journey-mission-options button.selected i { border-color:var(--mission-color); color:color-mix(in srgb,var(--mission-color) 76%,#263238); }
.journey-mission-options button.correct { border-color:var(--duo-green); background:var(--duo-green-soft); }
.journey-mission-options button.wrong { border-color:var(--duo-red); background:var(--duo-red-soft); }
.journey-mission-feedback { margin-top:14px; padding:14px 16px; border-radius:16px; }
.journey-mission-feedback.correct { background:var(--duo-green-soft); color:var(--duo-green-dark); }
.journey-mission-feedback.wrong { background:var(--duo-red-soft); color:var(--duo-red-dark); }
.journey-mission-feedback b { font-size:13px; }
.journey-mission-feedback p { margin:5px 0 0; font-size:11px; line-height:1.6; }
.journey-mission-card>footer { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 26px 20px; border-top:2px solid #eee; }
.journey-mission-card>footer span { color:var(--duo-muted); font-size:11px; font-weight:800; }
.journey-mission-card>footer button { min-width:150px; padding:12px 18px; border:0; border-bottom:5px solid color-mix(in srgb,var(--mission-color) 74%,#000); border-radius:14px; background:var(--mission-color); color:#fff; font:inherit; font-size:13px; font-weight:900; cursor:pointer; }
.journey-mission-card>footer button:disabled { background:#d8d8d8; border-color:#b9b9b9; color:#929292; cursor:not-allowed; }
.journey-mission-card>footer button:not(:disabled):active { transform:translateY(2px); border-bottom-width:3px; }

/* Readability pass: keep playful colour, but never sacrifice legibility. */
.learning-archive p { color:#4f6066; }
.learning-archive small { color:#2e704c; font-weight:750; }

.primary-button:disabled,
.vision-submit:disabled,
.freshman-submit:disabled,
.chapter-picker button:disabled,
.book-detail-action button:disabled,
.weakness-btn:disabled,
.journey-mission-card>footer button:disabled {
  opacity:1 !important;
  border-bottom-color:#c6ced1 !important;
  background:#e5e9eb !important;
  color:#5c686e !important;
  box-shadow:none !important;
}

.path-unit { color:#173709; }
.path-unit small { background:rgba(255,255,255,.5); color:#173709; }

.calculator-workbench .calc-work-head small { color:#b7c4c0; }
.calculator-workbench .calc-work-head p,
.calculator-workbench .calc-field label { color:#c0cbc7; }
.calculator-workbench .calculator-result>span,
.calculator-workbench .calculator-result>p,
.calculator-workbench .calculator-boundary,
.calculator-workbench .calc-history-empty { color:#aebbb7; }
.calculator-workbench .calc-main span,
.calculator-workbench .calc-details div,
.calculator-workbench .calc-history-main small,
.calculator-workbench .calc-history-main p { color:#aebbb7; }

.freshman-guide p { color:#c4d0cc; }
.freshman-guide li small { color:#b2c0bc; }
.freshman-guide>div>span { color:#8fe450; }

/* 《仪表维修工》教材重点：原理—公式—代入—单位—现场判断 PPT */
.book-page-note {
  display:block;
  margin-top:10px;
  color:#63757b;
  font-size:11px;
  line-height:1.65;
  font-weight:700;
}
.book-ppt-launcher {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin:22px 0;
  padding:20px 22px;
  border:2px solid #cbe8bd;
  border-bottom-width:6px;
  border-radius:24px;
  background:linear-gradient(135deg,#f4ffe9,#f4fbff);
}
.book-ppt-launcher span {
  display:block;
  color:var(--duo-green-dark);
  font-size:10px;
  font-weight:950;
  letter-spacing:1.6px;
}
.book-ppt-launcher h4 { margin:6px 0 4px; color:var(--duo-ink); font-size:20px; font-weight:950; }
.book-ppt-launcher p { margin:0; color:#5b6c72; font-size:12px; line-height:1.65; }
.book-ppt-launcher button {
  flex:none;
  min-height:48px;
  padding:0 20px;
  border:0;
  border-bottom:5px solid var(--duo-green-dark);
  border-radius:16px;
  background:var(--duo-green);
  color:#fff;
  font:inherit;
  font-weight:950;
  cursor:pointer;
}
.book-ppt-launcher button:active { transform:translateY(3px); border-bottom-width:2px; }
.book-topic-ppt {
  margin:0 0 24px;
  border:2px solid #cfe9c2;
  border-bottom-width:8px;
  border-radius:28px;
  background:linear-gradient(180deg,#f7fff0,#fff);
  overflow:hidden;
}
.book-ppt-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  padding:22px 24px;
  border-bottom:2px solid #dcefd0;
}
.book-ppt-head span { display:block; color:var(--duo-green-dark); font-size:10px; font-weight:950; letter-spacing:1.7px; }
.book-ppt-head h4 { margin:7px 0 5px; color:var(--duo-ink); font-size:clamp(24px,3vw,36px); line-height:1.15; font-weight:950; letter-spacing:-.8px; }
.book-ppt-head p { margin:0; color:#5a6c72; font-size:12px; line-height:1.6; }
.book-ppt-head>b { flex:none; color:var(--duo-green-dark); font-size:16px; font-weight:950; letter-spacing:1px; }
.book-ppt-stage { padding:20px; }
.book-ppt-slide { display:none; grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr); gap:18px; align-items:stretch; }
.book-ppt-slide.active { display:grid; }
.book-ppt-copy, .book-ppt-visual { min-width:0; border:2px solid var(--duo-line); border-bottom-width:6px; border-radius:24px; background:#fff; }
.book-ppt-copy { padding:22px; }
.book-ppt-copy>span { color:var(--duo-blue-dark); font-size:10px; font-weight:950; letter-spacing:1.4px; }
.book-ppt-copy h5 { margin:9px 0 8px; color:var(--duo-ink); font-size:clamp(24px,2.6vw,34px); line-height:1.2; font-weight:950; }
.book-ppt-copy>p { margin:0 0 16px; color:#4f6268; font-size:14px; line-height:1.75; }
.book-ppt-bullets { display:grid; gap:9px; }
.book-ppt-bullets>div { display:grid; grid-template-columns:112px minmax(0,1fr); gap:10px; align-items:start; padding:10px; border:2px solid #edf0f1; border-bottom-width:4px; border-radius:16px; background:#fbfbfb; }
.book-ppt-bullets b { display:grid; place-items:center; min-height:38px; border-radius:12px; background:var(--duo-green-soft); color:var(--duo-green-dark); font-size:12px; text-align:center; }
.book-ppt-bullets span { color:#4d6066; font-size:12px; line-height:1.65; }
.book-ppt-example { display:grid; gap:4px; margin-top:14px; padding:12px 14px; border-left:5px solid var(--duo-orange); border-radius:12px; background:#fff7e8; color:#624a0a; }
.book-ppt-example b { font-size:11px; color:#9c5b00; }
.book-ppt-example span { font-size:12px; line-height:1.65; }
.book-ppt-visual { display:grid; place-items:center; min-height:360px; padding:16px; background:linear-gradient(150deg,#f8fcff,#f4ffe9); overflow:hidden; }
.book-ppt-visual .micro-visual { width:100%; min-height:320px; border:0; background:transparent; }
.book-ppt-controls { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:15px 20px 18px; border-top:2px solid #dcefd0; }
.book-ppt-controls>div { display:flex; justify-content:center; gap:6px; flex:1; }
.book-ppt-controls button { min-height:42px; padding:0 14px; border:2px solid #d9e2e5; border-bottom-width:4px; border-radius:13px; background:#fff; color:var(--duo-blue-dark); font:inherit; font-size:12px; font-weight:950; cursor:pointer; }
.book-ppt-controls>div button { width:12px; min-height:12px; height:12px; padding:0; border:0; border-radius:50%; background:#d6e2e5; }
.book-ppt-controls>div button.active { background:var(--duo-green); transform:scale(1.2); }
.book-ppt-controls button:disabled { opacity:.45; cursor:not-allowed; }
.book-ppt-quiz { display:grid; gap:10px; margin-top:15px; padding:14px; border-radius:18px; background:#f2f9ff; border:2px solid #d8edf8; }
.book-ppt-quiz>b { color:var(--duo-blue-dark); font-size:12px; }
.book-ppt-quiz fieldset { margin:0; padding:10px; border:2px solid #dfecef; border-radius:14px; background:#fff; }
.book-ppt-quiz legend { padding:0 4px; color:var(--duo-ink); font-size:12px; line-height:1.55; font-weight:900; }
.book-ppt-quiz fieldset>div { display:grid; gap:6px; margin-top:8px; }
.book-ppt-quiz button { padding:8px 10px; border:2px solid #e2e8ea; border-bottom-width:3px; border-radius:10px; background:#fff; color:#45575e; font:inherit; font-size:11px; text-align:left; cursor:pointer; }
.book-ppt-quiz button.correct { border-color:#79cd35; background:var(--duo-green-soft); color:#236010; }
.book-ppt-quiz button.wrong { border-color:#ff9a9d; background:#fff0f1; color:#9a3135; }
.book-ppt-quiz fieldset>p { margin:8px 0 0; color:#42636d; font-size:11px; line-height:1.6; }
@media (max-width:760px) {
  .book-ppt-launcher { align-items:stretch; flex-direction:column; padding:17px; }
  .book-ppt-launcher h4 { font-size:18px; }
  .book-ppt-launcher button { width:100%; }
  .book-ppt-head { align-items:flex-start; flex-direction:column; padding:18px; }
  .book-ppt-head h4 { font-size:26px; }
  .book-ppt-stage { padding:14px; }
  .book-ppt-slide.active { grid-template-columns:1fr; }
  .book-ppt-copy { padding:16px; }
  .book-ppt-visual { min-height:260px; }
  .book-ppt-visual .micro-visual { min-height:230px; }
  .book-ppt-bullets>div { grid-template-columns:1fr; }
  .book-ppt-controls { padding:12px 14px 15px; }
  .book-ppt-controls>button { padding:0 10px; font-size:11px; }
}

.community-hero-copy p { color:#c7d5d1; }
.community-hero-actions button:not(:first-child) { color:#e5eeeb; }

.journey-task-list small { color:#5b7480; }
.journey-inventory header small { color:#68497c; }
.journey-mission-card>footer button:disabled { color:#5f696e; }

/* Mobile navigation and compact layout */
@media(max-width:1100px) {
  .mobile-dock {
    border: 2px solid var(--duo-line);
    border-bottom-width: 5px;
    border-radius: 24px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 10px 30px rgba(60,60,60,.15);
  }
  .mobile-dock button { color: #657176; border-radius: 17px; }
  .mobile-dock button:hover { background: #f4f4f4; }
  .mobile-dock button.active { background: var(--duo-green-soft); color: var(--duo-green-dark); }
  .mobile-dock button.active .mobile-dock-icon { background: var(--duo-green); color: #fff; box-shadow: 0 3px 0 var(--duo-green-dark); }
  .mobile-more-dialog { background: rgba(255,255,255,.98); color: var(--duo-ink); }
}

@media(max-width:700px) {
  .topbar { height: 58px; }
  .page-head { min-height: 132px; margin: 12px 12px 0; padding: 24px 18px; border-radius: 22px; }
  .page-head h1 { font-size: 29px; letter-spacing: -1.3px; }
  .page-head p { font-size: 11px; }
  .learning-hub-switch { margin: 12px 12px 0; padding: 7px; border-radius: 20px; overflow-x: auto; display: flex; scroll-snap-type: x mandatory; }
  .learning-hub-switch button { min-width: 176px; min-height: 68px; scroll-snap-align: start; }
  #homeView .home-purpose { margin: 12px 12px 0; border-radius: 24px; }
  #homeView .hero-grid { margin: 12px; border-radius: 24px; }
  #homeView .hero-visual { border-radius: 0 0 21px 21px; }
  #learnView .gam-bar { margin: 12px; border-radius: 20px; }
  .journey-command { grid-template-columns:1fr; gap:10px; }
  .journey-buddy { grid-row:auto; grid-template-columns:76px minmax(0,1fr); min-height:120px; padding:13px 15px 13px 8px; }
  .journey-buddy img { width:76px; height:90px; }
  .journey-buddy b { font-size:16px; }
  .journey-buddy p { font-size:10px; }
  .journey-daily { padding:12px; }
  .journey-inventory>div { grid-template-columns:1fr; }
  .journey-inventory header { align-items:start; flex-direction:column; gap:3px; }
  .journey-checkpoint { margin:10px -4px 26px; padding:11px; }
  .journey-checkpoint>div { grid-template-columns:1fr; }
  .journey-checkpoint button { grid-template-columns:36px minmax(0,1fr); }
  .journey-checkpoint button[data-journey-kind="boss"] { grid-column:auto; }
  .journey-checkpoint button em { display:none; }
  .journey-mission { padding:0; place-items:end stretch; }
  .journey-mission-card { width:100%; max-height:94vh; border-radius:26px 26px 0 0; border-bottom:0; }
  .journey-mission-card>header { padding:19px 18px 15px; }
  .journey-mission-card>header h2 { font-size:22px; }
  .journey-mission-card>main { padding:16px 18px; }
  .journey-scene { grid-template-columns:42px minmax(0,1fr); padding:12px; }
  .journey-scene>i { width:42px; height:42px; font-size:22px; }
  .journey-mission-options { grid-template-columns:1fr; }
  .journey-mission-options button { min-height:60px; }
  .journey-mission-card>footer { position:sticky; bottom:0; flex-direction:column; align-items:stretch; padding:13px 18px calc(14px + env(safe-area-inset-bottom)); background:#fff; }
  .journey-mission-card>footer button { width:100%; }
  .micro-lesson { border-radius: 24px; }
  .micro-lesson-head { grid-template-columns: 1fr; padding: 18px; }
  .micro-lesson-head h3 { font-size: 27px; }
  .micro-stage { min-height: 0; padding: 16px; }
  .micro-slide.active { display: grid; grid-template-columns: 1fr; }
  .micro-slide-copy,
  .micro-visual,
  .micro-quiz { border-radius: 22px; }
  .micro-slide-copy { padding: 18px; }
  .micro-slide-copy h4 { font-size: 25px; }
  .micro-bullets div { grid-template-columns: 1fr; }
  .micro-visual { min-height: 300px; }
  .target-board { width: min(270px,100%); }
  .target-board .dart { font-size: 9px; }
  .concept-board,
  .workflow-board,
  .compare-board,
  .source-board,
  .recap-board,
  .glossary-board,
  .signal-board,
  .fault-board div,
  .blackboard-board,
  .mistake-board,
  .case-board,
  .exam-board,
  .principle-deck,
  .formula-practice,
  .calculation-lab,
  .unit-check,
  .trend-calc,
  .standard-boundary,
  .field-drill-board { grid-template-columns: 1fr; }
  .concept-board i { transform: rotate(90deg); }
  .concept-board span { grid-column: auto; }
  .glossary-board i { min-height: 52px; }
  .source-board article,
  .recap-board article,
  .glossary-board article,
  .signal-board span,
  .blackboard-board b,
  .mistake-board article,
  .case-board span,
  .exam-board span,
  .principle-deck span,
  .formula-practice article,
  .calculation-lab>div,
  .unit-check article,
  .standard-boundary b { min-height: 82px; }
  .field-drill-board span { width: 86px; height: 86px; }
  .blackboard-board span,
  .case-board em,
  .exam-board b,
  .principle-deck em,
  .formula-practice em,
  .calculation-lab em,
  .unit-check em,
  .trend-calc em,
  .standard-boundary span,
  .field-drill-board em { grid-column: auto; }
  .standard-boundary i { transform: rotate(90deg); }
  .micro-quiz>div { grid-template-columns: 1fr; }
  .micro-controls { grid-template-columns: 1fr; }
  .micro-dots { order: -1; overflow-x: auto; padding: 4px 0; }
  .search-layout, .learn-layout, .review-layout, .technical-layout, .safety-layout { padding-left: 12px; padding-right: 12px; }
  .review-modes { padding-left: 12px; padding-right: 12px; display: flex; overflow-x: auto; }
  .review-modes>button { min-width: 180px; }
  .safety-hero { margin: 12px 12px 0; padding: 34px 20px; border-radius: 24px; }
  .safety-ticker { margin: 10px 12px 0; }
  .content-tabs { padding-left: 12px; padding-right: 12px; flex-wrap: nowrap; overflow-x: auto; }
  .content-tabs button { flex: 0 0 auto; }
  .mobile-dock { bottom: calc(6px + env(safe-area-inset-bottom)); width: calc(100% - 14px); }
}

/* Keep realistic simulators dark internally while their surrounding navigation stays playful. */
#communicatorView .fc-shell, #deviceTeardownModal, #dcsAcademyRoot .dcs-hmi,
#wiringLabRoot .wiring-workbench, #pidLabRoot .pid-stage { font-family: "PingFang SC", system-ui, sans-serif; }

.light-off {
  --paper: #131d20;
  --surface: #1d2a2e;
  --ink: #eef3f1;
  --line: #344348;
  --muted: #9da9a5;
}
.light-off .sidebar, .light-off .topbar { background: #111b1f; color: #eef3f1; border-color: #344348; }
.light-off .nav-item:hover { background: #1c2b30; }
.light-off .nav-item.active { background: #23411e; color: #8ee000; border-color: #3f6f31; }

@media(prefers-reduced-motion:reduce) {
  .nav-item, .course-card.featured, .map-card, .catalog-card, .option { transition: none; }
}

/*
 * Light-first visual contract
 *
 * This is the final layer of the theme on purpose: the site has several older
 * teaching modules whose original styles were written as dark control-room
 * panels.  The public learning shell now follows one visual language—paper
 * white surfaces, readable ink, green actions and small blue/pink accents.
 * Dark surfaces are reserved for the simulated instrument screen itself.
 */
:root {
  --ui-bg: #f6fbf7;
  --ui-surface: #ffffff;
  --ui-ink: #263238;
  --ui-copy: #4e5d61;
  --ui-muted: #697a7e;
  --ui-line: #dce8e1;
  --ui-green: #58cc02;
  --ui-green-ink: #367b08;
  --ui-blue: #1cb0f6;
  --ui-pink: #ff86d0;
  --ui-shadow: 0 5px 0 #e0ebe3, 0 16px 34px rgba(52, 85, 68, .10);
}

html,
body,
body.light-off {
  background: var(--ui-bg) !important;
  color: var(--ui-ink) !important;
}

body.light-off .sidebar,
body.light-off .topbar,
body.light-off .icon-button,
body.light-off .install-app,
body.light-off .profile,
body.light-off .page-head,
body.light-off .learning-hub-switch,
body.light-off .sidebar-footer {
  background: var(--ui-surface) !important;
  color: var(--ui-ink) !important;
  border-color: var(--ui-line) !important;
  box-shadow: none !important;
}

.sidebar {
  background: #fff !important;
  color: var(--ui-ink) !important;
  border-right: 2px solid var(--ui-line) !important;
  box-shadow: none !important;
}
.topbar {
  background: rgba(255,255,255,.96) !important;
  color: var(--ui-ink) !important;
  border-bottom: 2px solid var(--ui-line) !important;
  box-shadow: 0 2px 0 rgba(205,222,211,.5) !important;
}
.nav-item { color: #617074 !important; background: transparent !important; box-shadow: none !important; }
.nav-item:hover { color: var(--ui-ink) !important; background: #f1f8f3 !important; }
.nav-item.active { color: var(--ui-green-ink) !important; background: #eaffd7 !important; border-color: #bfe79d !important; box-shadow: 0 3px 0 #d1e9bd !important; }
.sidebar-footer { background: #f8fbf8 !important; border-color: var(--ui-line) !important; }
.sidebar-footer p, .plant-status { color: var(--ui-muted) !important; }
.icon-button, .install-app, .profile { background: #fff !important; color: var(--ui-ink) !important; border-color: var(--ui-line) !important; box-shadow: 0 3px 0 #e3ece6 !important; }
.avatar { background: #e6f7ff !important; color: #087fad !important; }

/* Home: the first impression is a friendly learning dashboard, not a control room. */
#homeView .hero-grid {
  background: linear-gradient(135deg,#ffffff 0%,#f1fbff 58%,#f3f0ff 100%) !important;
  border: 2px solid var(--ui-line) !important;
  box-shadow: var(--ui-shadow) !important;
}
#homeView .hero-copy {
  color: var(--ui-ink) !important;
  background: linear-gradient(145deg,#ffffff,#f3fff0) !important;
}
#homeView .hero-copy h1,
#homeView .hero-copy h1 em {
  color: var(--ui-ink) !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
  text-shadow: none !important;
}
#homeView .hero-copy h1 em { color: var(--ui-green-ink) !important; }
#homeView .hero-copy > p,
#homeView .hero-proof span,
#homeView .hero-proof small,
#homeView .hot-tags > span { color: var(--ui-muted) !important; }
#homeView .eyebrow { color: #1784b8 !important; }
#homeView .eyebrow:before { background: var(--ui-blue) !important; }
#homeView .hot-tags button { border-color: var(--ui-line) !important; background: #fff !important; color: #526a70 !important; }
#homeView .hero-visual {
  border-left: 2px solid var(--ui-line) !important;
  background:
    linear-gradient(rgba(74,135,126,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(74,135,126,.08) 1px,transparent 1px),
    linear-gradient(145deg,#eefbff,#f7f2ff) !important;
  background-size: 32px 32px,32px 32px,auto !important;
}
#homeView .hero-visual:before { color: #638187 !important; }
#homeView .meter-face { border-color: #526d73 !important; box-shadow: 0 0 0 1px rgba(82,109,115,.25),0 22px 48px rgba(43,92,105,.18) !important; }
#homeView .signal-card { background: #fff !important; border: 2px solid var(--ui-line) !important; color: var(--ui-ink) !important; box-shadow: var(--ui-shadow) !important; backdrop-filter: none !important; }
#homeView .signal-card p, #homeView .signal-card small { color: var(--ui-muted) !important; }
#homeView .field-entry { color: var(--ui-ink) !important; background: linear-gradient(145deg,#effff1,#e8f8ff) !important; border-color: #cce9d4 !important; }
#homeView .field-entry .purpose-card-copy h3,
#homeView .field-entry .purpose-card-copy p,
#homeView .field-entry .insight-body p,
#homeView .field-entry .insight-arrow { color: var(--ui-ink) !important; }
#homeView .safety-entry { color: var(--ui-ink) !important; background: linear-gradient(145deg,#fff8ef,#fff0f7) !important; border-color: #f3d8df !important; }
#homeView .safety-entry .insight-body p,
#homeView .safety-entry .insight-arrow { color: var(--ui-ink) !important; }
#homeView .field-entry .insight-body,
#homeView .safety-entry .insight-body { border-color: var(--ui-line) !important; }

/* Learning visual lessons: cards and diagrams share the same paper surface. */
.learning-visual-layer,
.lv-intro,
.lv-tabs,
.lv-panel,
.lv-atlas-figure,
.lv-atlas-detail,
.lv-teardown-hero,
.lv-device-card,
.lv-loop-explain,
.lv-term-card,
.lv-term-list > button,
.lv-loop-controls label,
.lv-loop-path > button,
.lv-glossary-tools > label {
  border-color: var(--ui-line) !important;
}
.lv-intro { background: linear-gradient(135deg,#f1fff0,#effaff) !important; color: var(--ui-ink) !important; }
.lv-intro p, .lv-section-head p, .lv-atlas-figure figcaption, .lv-device-card p, .lv-device-card dd, .lv-atlas-detail dt, .lv-term-card dd { color: var(--ui-muted) !important; }
.lv-tabs { background: #f2f8f4 !important; }
.lv-tabs > button { background: #fff !important; color: var(--ui-copy) !important; border: 2px solid var(--ui-line) !important; border-radius: 16px !important; }
.lv-tabs > button b { color: var(--ui-ink) !important; }
.lv-tabs > button small { color: var(--ui-muted) !important; }
.lv-tabs > button[aria-selected="true"] { background: #eaffd7 !important; border-color: #bfe79d !important; box-shadow: inset 0 -4px var(--ui-green) !important; }
.lv-atlas-figure, .lv-device-card { background: #fff !important; color: var(--ui-ink) !important; border: 2px solid var(--ui-line) !important; border-radius: 22px !important; overflow: hidden; }
.lv-atlas-detail, .lv-loop-explain { background: linear-gradient(145deg,#f2fff1,#effaff) !important; color: var(--ui-ink) !important; border-left: 4px solid var(--ui-green) !important; border-radius: 16px !important; }
.lv-atlas-detail dl > div { border-color: var(--ui-line) !important; }
.lv-atlas-detail dd, .lv-loop-explain p { color: var(--ui-copy) !important; }
.lv-teardown-hero { background: linear-gradient(135deg,#fff5ed,#fff0fa) !important; color: var(--ui-ink) !important; border: 2px solid #f0dce4 !important; border-radius: 24px !important; }
.lv-teardown-hero p { color: var(--ui-muted) !important; }
.lv-teardown-hero > dl > div { background: #fff !important; border-color: var(--ui-line) !important; }
.lv-teardown-hero dt, .lv-teardown-hero dd { color: var(--ui-ink) !important; }
.lv-device-card figure { background: #eef6f2 !important; }
.lv-device-card figure:after { background: linear-gradient(transparent,rgba(255,255,255,.92)) !important; }
.lv-device-card h4 { color: var(--ui-ink) !important; }
.lv-device-card dl { border-color: var(--ui-line) !important; }
.lv-device-card button { background: var(--ui-green) !important; color: #204a07 !important; border: 0 !important; border-bottom: 4px solid #3f9900 !important; border-radius: 14px !important; }
.lv-term-card { background: #fff !important; color: var(--ui-ink) !important; border: 2px solid var(--ui-line) !important; border-radius: 18px !important; }
.lv-term-card header > span { background: #eaffd7 !important; color: var(--ui-green-ink) !important; }

/* Interactive principle labs use colored paper panels and high-contrast labels. */
.pl-tabs { background: #f2f8f4 !important; border: 2px solid var(--ui-line) !important; border-radius: 18px !important; }
.pl-tabs > button { background: #fff !important; color: var(--ui-copy) !important; border-color: var(--ui-line) !important; border-radius: 14px !important; }
.pl-tabs > button b { color: var(--ui-ink) !important; }
.pl-tabs > button small { color: var(--ui-muted) !important; }
.pl-tabs > button.active { background: #eaffd7 !important; border-color: #bfe79d !important; box-shadow: inset 0 -4px var(--ui-green) !important; }
.pl-boundary, .pl-level-readout { background: linear-gradient(145deg,#f2fff1,#effaff) !important; color: var(--ui-ink) !important; border-left-color: var(--ui-green) !important; border-radius: 14px !important; }
.pl-boundary p, .pl-level-readout p, .pl-level-readout span { color: var(--ui-copy) !important; }
.pl-level-readout b, .pl-boundary b { color: var(--ui-green-ink) !important; }
.pl-transmitter, .pl-rtd-meter { background: #eaf7ff !important; color: var(--ui-ink) !important; }
.pl-form-grid label, .pl-signal-result, .pl-flow-demo, .pl-formula, .pl-tank-scene, .pl-tc-chain, .pl-rtd-layout { background: #fff !important; border-color: var(--ui-line) !important; color: var(--ui-ink) !important; border-radius: 16px !important; }
.pl-form-grid label > span, .pl-formula span { color: var(--ui-muted) !important; }
.pl-scale-track > i { background: var(--ui-blue) !important; }

/* Realistic simulator internals stay dark only inside their instrument screen. */
#deviceTeardownModal, #dcsAcademyRoot, #wiringLabRoot, #pidLabRoot { background: var(--ui-bg) !important; color: var(--ui-ink) !important; }
.dt-topbar, .dt-device-picker, .dt-intro, .dt-specs > div, .dcs-process-tabs, .dcs-process-brief, .dcs-controls, .dcs-trend, .dcs-alarm-strip, .dcs-quiz-card, .dcs-skills-card, .dcs-pid-explain { background: #fff !important; color: var(--ui-ink) !important; border-color: var(--ui-line) !important; }
.dt-brand b, .dt-intro h2, .dt-specs b, .dcs-process-brief h3, .dcs-quiz-card h3 { color: var(--ui-ink) !important; }
.dt-intro > p, .dt-specs span, .dt-top-actions > span, .dcs-process-brief p, .dcs-quiz-card p { color: var(--ui-muted) !important; }
.dt-device-picker button { background: #f8fcf9 !important; color: var(--ui-copy) !important; border-color: var(--ui-line) !important; border-radius: 14px !important; }
.dt-device-picker button b { color: var(--ui-ink) !important; }
.dt-device-picker button.active { background: #eaffd7 !important; border-color: #bfe79d !important; box-shadow: inset 0 -4px var(--ui-green) !important; }
.dt-mode-switch button { background: #fff !important; color: var(--ui-copy) !important; border-color: var(--ui-line) !important; border-radius: 13px !important; }
.dt-mode-switch button.active { background: #eaffd7 !important; border-color: #bfe79d !important; color: var(--ui-green-ink) !important; }
.dt-specs > div { border-radius: 14px !important; }

/* Keep the actual teardown image / HMI viewport dark for legibility and realism. */
.dt-stage, .dcs-hmi, .wiring-workbench, .pid-stage { color-scheme: dark; }

@media (max-width: 700px) {
  #homeView .hero-grid { margin-left: 12px !important; margin-right: 12px !important; }
  #homeView .hero-copy { padding: 34px 22px !important; }
  #homeView .hero-copy h1 { font-size: clamp(38px, 11vw, 54px) !important; letter-spacing: -2px !important; }
  #homeView .hero-visual { border-left: 0 !important; border-top: 2px solid var(--ui-line) !important; }
}

/* Remaining content-heavy tools: light surfaces outside the instrument viewport. */
.calculator-workbench,
.freshman-guide,
.freshman-class-head,
.freshman-score,
.book-focus-detail,
.book-point-detail,
.book-detail-map > div,
.book-detail-chapters article,
.book-detail-application > div,
.sim-scenario,
.field-evidence-title {
  background: #fff !important;
  color: var(--ui-ink) !important;
  border-color: var(--ui-line) !important;
  border-radius: 18px !important;
}
.calculator-workbench { box-shadow: var(--ui-shadow) !important; }
.calculator-workbench .calc-work-head,
.calculator-workbench .calc-main,
.calculator-workbench .calc-history-main,
.calculator-workbench .calc-formula { border-color: var(--ui-line) !important; }
.calculator-workbench .calc-work-head small,
.calculator-workbench .calc-work-head p,
.calculator-workbench .calc-field label,
.calculator-workbench .calculator-result > span,
.calculator-workbench .calculator-result > p,
.calculator-workbench .calculator-boundary,
.calculator-workbench .calc-main span,
.calculator-workbench .calc-details div,
.calculator-workbench .calc-history-main small,
.calculator-workbench .calc-history-main p,
.freshman-guide p,
.freshman-guide li small,
.book-detail-map li,
.book-detail-learning > div:first-child > p,
.book-detail-chapters article p,
.book-detail-application > div p,
.book-detail-application > div b,
.book-point-detail > p,
.book-point-detail > div p,
.book-point-detail li,
.sim-scenario span,
.field-evidence-title span { color: var(--ui-muted) !important; }
.calculator-workbench .calc-work-head h2,
.calculator-workbench .calc-details b,
.freshman-guide h2,
.freshman-guide b,
.freshman-class-head,
.freshman-score,
.book-focus-detail,
.book-point-detail,
.book-detail-map > div,
.book-detail-chapters article b,
.book-detail-application > div,
.sim-scenario b,
.field-evidence-title b { color: var(--ui-ink) !important; }
.calculator-workbench .calc-field input,
.calculator-workbench .calc-field select,
.calculator-workbench .calculator-result,
.calculator-workbench .calc-formula { background: #f6fbf7 !important; color: var(--ui-ink) !important; border-color: var(--ui-line) !important; }
.calculator-workbench .calc-main b { color: var(--ui-green-ink) !important; }
.freshman-guide li { border-color: var(--ui-line) !important; background: #f8fcf9 !important; }
.freshman-guide > div > span,
.freshman-guide li span,
.freshman-guide li small { color: var(--ui-green-ink) !important; }
.freshman-class-head { background: linear-gradient(135deg,#f1fff0,#effaff) !important; border-bottom: 2px solid var(--ui-line) !important; }
.freshman-class-head p { color: var(--ui-muted) !important; }
.freshman-score { background: linear-gradient(135deg,#effff1,#eaf7ff) !important; }
.freshman-score span { color: var(--ui-muted) !important; }
.book-detail-map > div,
.book-detail-chapters article,
.book-detail-application > div,
.book-point-detail { background: #fff !important; }
.book-focus-detail p,
.book-focus-detail li,
.book-focus-detail section > b { color: var(--ui-copy) !important; }
.book-focus-detail button,
.book-point-detail footer button { border-color: var(--ui-line) !important; color: var(--ui-ink) !important; background: #fff !important; }
.book-focus-detail button:last-child,
.book-point-detail footer button:last-child { border-color: var(--ui-green) !important; background: var(--ui-green) !important; color: #204a07 !important; }
.book-detail-chapters article b { color: var(--ui-ink) !important; }
.book-point-detail > div { border-color: var(--ui-line) !important; }
.sim-scenario { border-left: 4px solid var(--ui-blue) !important; background: #effaff !important; }
.field-evidence-title { background: linear-gradient(135deg,#f1fff0,#effaff) !important; }
.field-evidence-title b { color: var(--ui-ink) !important; }
.field-evidence-dynamic,
.field-evidence-grid,
.field-wizard-panel,
.field-step-intro { background: #fff !important; border-color: var(--ui-line) !important; color: var(--ui-ink) !important; }

/* Modal backdrops can stay translucent; the sheet itself is always paper white. */
.lesson-sheet,
.lesson-modal-panel,
.calc-modal-card { background: #fff !important; color: var(--ui-ink) !important; }

/* Teardown lab: paper UI around a dark image canvas. */
.device-teardown,
.device-teardown .dt-shell,
.device-teardown .dt-main {
  background: var(--ui-bg) !important;
  color: var(--ui-ink) !important;
}
.device-teardown::backdrop { background: rgba(224,238,229,.78) !important; backdrop-filter: blur(10px); }
.device-teardown .dt-topbar {
  background: rgba(255,255,255,.97) !important;
  border-bottom: 2px solid var(--ui-line) !important;
  box-shadow: 0 2px 0 rgba(205,222,211,.55) !important;
}
.device-teardown .dt-brand > i { border-color: var(--ui-green) !important; color: var(--ui-green-ink) !important; background: #eaffd7 !important; }
.device-teardown .dt-brand small,
.device-teardown .dt-top-actions > span { color: var(--ui-muted) !important; }
.device-teardown .dt-brand b { color: var(--ui-ink) !important; }
.device-teardown .dt-top-actions button { background: #fff !important; color: var(--ui-ink) !important; border-color: var(--ui-line) !important; box-shadow: 0 3px 0 #e3ece6 !important; }
.device-teardown .dt-device-picker { background: #f2f8f4 !important; border-bottom: 2px solid var(--ui-line) !important; }
.device-teardown .dt-device-picker button {
  background: #fff !important;
  color: var(--ui-copy) !important;
  border: 2px solid var(--ui-line) !important;
  border-radius: 14px !important;
}
.device-teardown .dt-device-picker button b { color: var(--ui-ink) !important; }
.device-teardown .dt-device-picker button small { color: var(--ui-muted) !important; }
.device-teardown .dt-device-picker button.active { background: #eaffd7 !important; border-color: #bfe79d !important; box-shadow: inset 0 -4px var(--ui-green) !important; }
.device-teardown .dt-device-picker button.active > i { background: var(--ui-green) !important; border-color: var(--ui-green) !important; color: #204a07 !important; }
.device-teardown .dt-kicker { color: #1784b8 !important; }
.device-teardown .dt-intro h2 { color: var(--ui-ink) !important; }
.device-teardown .dt-intro h2 em { color: #ff6b35 !important; }
.device-teardown .dt-intro > p { color: var(--ui-muted) !important; }
.device-teardown .dt-mode-switch button { background: #fff !important; color: var(--ui-copy) !important; border: 2px solid var(--ui-line) !important; border-radius: 14px !important; }
.device-teardown .dt-mode-switch button.active { background: #eaffd7 !important; border-color: #bfe79d !important; color: var(--ui-green-ink) !important; box-shadow: inset 0 -4px var(--ui-green) !important; }
.device-teardown .dt-play { background: var(--ui-green) !important; color: #204a07 !important; border-radius: 16px !important; border-bottom: 5px solid #3f9900 !important; }
.device-teardown .dt-play small { color: #3b710f !important; }
.device-teardown .dt-specs > div { background: #fff !important; border: 2px solid var(--ui-line) !important; border-radius: 14px !important; }
.device-teardown .dt-specs span { color: var(--ui-muted) !important; }
.device-teardown .dt-specs b { color: var(--ui-ink) !important; }
.device-teardown .dt-stage-action { background: #fff !important; color: var(--ui-ink) !important; border: 2px solid var(--ui-green) !important; box-shadow: 0 5px 0 rgba(63,153,0,.35) !important; backdrop-filter: none !important; }
.device-teardown .dt-stage-action span,
.device-teardown .dt-stage-action i { color: var(--ui-green-ink) !important; }
.device-teardown .dt-stage-action:hover { background: #eaffd7 !important; }
.device-teardown .dt-detail { background: #fff !important; color: var(--ui-ink) !important; border: 2px solid var(--ui-line) !important; border-radius: 18px !important; box-shadow: var(--ui-shadow) !important; }
.device-teardown .dt-detail-close { background: #fff !important; color: var(--ui-ink) !important; border-color: var(--ui-line) !important; }
.device-teardown .dt-detail > span,
.device-teardown .dt-detail .dt-warning dt { color: var(--ui-green-ink) !important; }
.device-teardown .dt-detail h3 { color: var(--ui-ink) !important; }
.device-teardown .dt-detail > p,
.device-teardown .dt-detail dt,
.device-teardown .dt-detail dd { color: var(--ui-muted) !important; }
.device-teardown .dt-detail dl > div { border-color: var(--ui-line) !important; }
.device-teardown .dt-detail .dt-warning { border-left-color: var(--ui-pink) !important; }
.device-teardown .dt-part-rail { background: rgba(255,255,255,.96) !important; border: 2px solid var(--ui-line) !important; border-radius: 16px !important; backdrop-filter: none !important; }
.device-teardown .dt-part-rail button { background: #fff !important; color: var(--ui-copy) !important; border-color: var(--ui-line) !important; border-radius: 10px !important; }
.device-teardown .dt-part-rail button b { color: var(--ui-ink) !important; }
.device-teardown .dt-part-rail button small { color: var(--ui-muted) !important; }
.device-teardown .dt-part-rail button.active { background: #eaffd7 !important; border-color: #bfe79d !important; box-shadow: inset 0 -3px var(--ui-green) !important; }
.device-teardown .dt-signal-path { background: #fff !important; color: var(--ui-ink) !important; border: 2px solid var(--ui-line) !important; border-radius: 20px !important; box-shadow: var(--ui-shadow) !important; }
.device-teardown .dt-signal-path > div:first-child > span { color: #1784b8 !important; }
.device-teardown .dt-signal-path h3 { color: var(--ui-ink) !important; }
.device-teardown .dt-signal-steps button { background: #f8fcf9 !important; color: var(--ui-copy) !important; border: 2px solid var(--ui-line) !important; border-radius: 13px !important; }
.device-teardown .dt-signal-steps button b { color: var(--ui-ink) !important; }
.device-teardown .dt-signal-steps button span,
.device-teardown .dt-signal-path > p { color: var(--ui-muted) !important; }
.device-teardown .dt-signal-steps button.active { background: #eaffd7 !important; border-color: #bfe79d !important; }
.device-teardown .dt-signal-steps button i { color: var(--ui-green-ink) !important; }
.device-teardown .dt-visual > p { color: var(--ui-muted) !important; }

/* DCS Academy: a light, rounded learning shell; keep only the simulated HMI dark. */
#dcsView,
#dcsAcademyRoot,
#dcsAcademyRoot .dcs-shell {
  background: var(--ui-bg) !important;
  color: var(--ui-ink) !important;
}
#dcsAcademyRoot .dcs-shell {
  --dcs-bg: var(--ui-bg);
  --dcs-panel: #fff;
  --dcs-panel-2: #f2f8f4;
  --dcs-line: var(--ui-line);
  --dcs-soft: var(--ui-muted);
  --dcs-green: var(--ui-green);
  --dcs-cyan: var(--ui-blue);
  --dcs-orange: #ff7a45;
  --dcs-red: #d9485f;
  --dcs-yellow: #c08a00;
}
#dcsAcademyRoot .dcs-hero {
  background: linear-gradient(135deg, #fff 0%, #f0fbff 55%, #f7efff 100%) !important;
  color: var(--ui-ink) !important;
  border-bottom: 2px solid var(--ui-line) !important;
}
#dcsAcademyRoot .dcs-hero h1 { color: var(--ui-ink) !important; text-shadow: none !important; }
#dcsAcademyRoot .dcs-hero h1 em { color: var(--ui-green-ink) !important; }
#dcsAcademyRoot .dcs-hero-copy > p,
#dcsAcademyRoot .dcs-section-head p,
#dcsAcademyRoot .dcs-hero-stats span,
#dcsAcademyRoot .dcs-preview-top span,
#dcsAcademyRoot .dcs-preview-stations span,
#dcsAcademyRoot .dcs-preview-io span { color: var(--ui-muted) !important; }
#dcsAcademyRoot .dcs-eyebrow,
#dcsAcademyRoot .dcs-section-head > div > span { color: #1784b8 !important; }
#dcsAcademyRoot .dcs-primary {
  background: var(--ui-green) !important;
  color: #204a07 !important;
  border: 0 !important;
  border-bottom: 5px solid #3f9900 !important;
  border-radius: 14px !important;
}
#dcsAcademyRoot .dcs-secondary {
  background: #fff !important;
  color: var(--ui-ink) !important;
  border: 2px solid var(--ui-line) !important;
  border-radius: 14px !important;
}
#dcsAcademyRoot .dcs-architecture-preview {
  background: #fff !important;
  color: var(--ui-ink) !important;
  border: 2px solid var(--ui-line) !important;
  box-shadow: var(--ui-shadow) !important;
}
#dcsAcademyRoot .dcs-preview-stations div,
#dcsAcademyRoot .dcs-preview-io div {
  background: #f8fcf9 !important;
  border: 2px solid var(--ui-line) !important;
  color: var(--ui-ink) !important;
}
#dcsAcademyRoot .dcs-section {
  background: #fff !important;
  color: var(--ui-ink) !important;
  border-bottom: 2px solid var(--ui-line) !important;
}
#dcsAcademyRoot .dcs-concepts,
#dcsAcademyRoot .dcs-pid-lab { background: #f2f8f4 !important; }
#dcsAcademyRoot .dcs-level-tabs button,
#dcsAcademyRoot .dcs-course-card,
#dcsAcademyRoot .dcs-arch-node,
#dcsAcademyRoot .dcs-arch-detail,
#dcsAcademyRoot .dcs-io-panel,
#dcsAcademyRoot .dcs-pid-panel,
#dcsAcademyRoot .dcs-pid-practice,
#dcsAcademyRoot .dcs-reference > article,
#dcsAcademyRoot .dcs-quiz-card,
#dcsAcademyRoot .dcs-skills-card {
  background: #fff !important;
  color: var(--ui-ink) !important;
  border: 2px solid var(--ui-line) !important;
  border-radius: 18px !important;
}
#dcsAcademyRoot .dcs-level-tabs button b,
#dcsAcademyRoot .dcs-course-card b,
#dcsAcademyRoot .dcs-arch-node b,
#dcsAcademyRoot .dcs-lesson-title h3,
#dcsAcademyRoot .dcs-lesson-body h4,
#dcsAcademyRoot .dcs-panel-title h3,
#dcsAcademyRoot .dcs-quiz-card h3,
#dcsAcademyRoot .dcs-skills-card h3,
#dcsAcademyRoot .dcs-reference h3 { color: var(--ui-ink) !important; }
#dcsAcademyRoot .dcs-level-tabs button span,
#dcsAcademyRoot .dcs-course-card span,
#dcsAcademyRoot .dcs-course-card small,
#dcsAcademyRoot .dcs-arch-node span,
#dcsAcademyRoot .dcs-lesson-title p,
#dcsAcademyRoot .dcs-lesson-practice span,
#dcsAcademyRoot .dcs-arch-detail p,
#dcsAcademyRoot .dcs-reference p,
#dcsAcademyRoot .dcs-reference li,
#dcsAcademyRoot .dcs-panel-title p,
#dcsAcademyRoot .dcs-pid-card span,
#dcsAcademyRoot .dcs-pid-scenarios button span,
#dcsAcademyRoot .dcs-quiz-feedback { color: var(--ui-muted) !important; }
#dcsAcademyRoot .dcs-level-tabs button.active {
  background: #eaffd7 !important;
  border-color: #bfe79d !important;
  box-shadow: inset 0 -4px var(--ui-green) !important;
}
#dcsAcademyRoot .dcs-level-summary {
  background: linear-gradient(145deg, #f1fff0, #effaff) !important;
  color: var(--ui-ink) !important;
  border: 2px solid var(--ui-line) !important;
  border-radius: 18px !important;
}
#dcsAcademyRoot .dcs-level-summary h3,
#dcsAcademyRoot .dcs-level-summary p,
#dcsAcademyRoot .dcs-level-summary span { color: var(--ui-ink) !important; }
#dcsAcademyRoot .dcs-course-card:hover { box-shadow: var(--ui-shadow) !important; }
#dcsAcademyRoot .dcs-lesson-detail {
  background: #fff !important;
  color: var(--ui-ink) !important;
  border: 2px solid var(--ui-line) !important;
  border-radius: 18px !important;
}
#dcsAcademyRoot .dcs-lesson-title {
  background: linear-gradient(145deg, #f1fff0, #effaff) !important;
  border-right-color: var(--ui-line) !important;
}
#dcsAcademyRoot .dcs-lesson-title > span,
#dcsAcademyRoot .dcs-panel-title > span,
#dcsAcademyRoot .dcs-reference > span { color: var(--ui-green-ink) !important; }
#dcsAcademyRoot .dcs-lesson-body li {
  background: #f8fcf9 !important;
  color: var(--ui-copy) !important;
  border-color: var(--ui-line) !important;
}
#dcsAcademyRoot .dcs-lesson-practice {
  background: #fff7ec !important;
  color: var(--ui-ink) !important;
  border-left-color: #ff8a54 !important;
}
#dcsAcademyRoot .dcs-arch-node.active {
  background: #eaffd7 !important;
  border-color: #bfe79d !important;
}
#dcsAcademyRoot .dcs-compare-wrap {
  border: 2px solid var(--ui-line) !important;
  border-radius: 18px !important;
  overflow: auto;
}
#dcsAcademyRoot .dcs-compare th {
  background: #eaf7ff !important;
  color: #087fad !important;
  border-color: var(--ui-line) !important;
}
#dcsAcademyRoot .dcs-compare td {
  background: #fff !important;
  color: var(--ui-copy) !important;
  border-color: var(--ui-line) !important;
}
#dcsAcademyRoot .dcs-compare td:first-child { color: var(--ui-green-ink) !important; }
#dcsAcademyRoot .dcs-boundary-note {
  background: #fff7e2 !important;
  color: #6c5710 !important;
  border-left-color: #ffc800 !important;
  border-radius: 14px !important;
}
#dcsAcademyRoot .dcs-pid-flow {
  background-color: #effaff !important;
  background-image: linear-gradient(rgba(28,176,246,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(28,176,246,.12) 1px, transparent 1px) !important;
  border: 2px solid var(--ui-line) !important;
  border-radius: 18px !important;
}
#dcsAcademyRoot .dcs-pid-explain {
  background: linear-gradient(145deg, #f1fff0, #effaff) !important;
  color: var(--ui-ink) !important;
  border: 2px solid var(--ui-line) !important;
  border-radius: 18px !important;
}
#dcsAcademyRoot .dcs-pid-explain h3,
#dcsAcademyRoot .dcs-pid-explain p,
#dcsAcademyRoot .dcs-pid-explain small { color: var(--ui-ink) !important; }
#dcsAcademyRoot .dcs-process-tabs,
#dcsAcademyRoot .dcs-process-brief,
#dcsAcademyRoot .dcs-controls,
#dcsAcademyRoot .dcs-trend,
#dcsAcademyRoot .dcs-alarm-strip,
#dcsAcademyRoot .dcs-config-grid > *,
#dcsAcademyRoot .dcs-pid-card,
#dcsAcademyRoot .dcs-pid-scenarios button {
  background: #fff !important;
  color: var(--ui-ink) !important;
  border-color: var(--ui-line) !important;
}
#dcsAcademyRoot .dcs-process-tabs button {
  background: #f8fcf9 !important;
  color: var(--ui-ink) !important;
  border: 2px solid var(--ui-line) !important;
  border-radius: 14px !important;
}
#dcsAcademyRoot .dcs-process-tabs button.active {
  background: #eaffd7 !important;
  border-color: #bfe79d !important;
}
#dcsAcademyRoot .dcs-process-brief p,
#dcsAcademyRoot .dcs-process-brief span { color: var(--ui-muted) !important; }
#dcsAcademyRoot .dcs-controls input,
#dcsAcademyRoot .dcs-controls select,
#dcsAcademyRoot .dcs-faults select,
#dcsAcademyRoot .dcs-io-table select {
  background: #f6fbf7 !important;
  color: var(--ui-ink) !important;
  border-color: var(--ui-line) !important;
}
#dcsAcademyRoot .dcs-mode-toggle button {
  background: #fff !important;
  color: var(--ui-copy) !important;
  border-color: var(--ui-line) !important;
  border-radius: 12px !important;
}
#dcsAcademyRoot .dcs-mode-toggle button.active {
  background: #eaffd7 !important;
  color: var(--ui-green-ink) !important;
  border-color: #bfe79d !important;
}
#dcsAcademyRoot .dcs-run-actions button:first-child,
#dcsAcademyRoot .dcs-io-check,
#dcsAcademyRoot .dcs-quiz-next {
  background: var(--ui-green) !important;
  color: #204a07 !important;
  border: 0 !important;
  border-bottom: 4px solid #3f9900 !important;
  border-radius: 13px !important;
}
#dcsAcademyRoot .dcs-run-actions button:last-child {
  background: #fff !important;
  color: var(--ui-ink) !important;
  border-color: var(--ui-line) !important;
}
#dcsAcademyRoot .dcs-trend { border-radius: 18px !important; }
#dcsAcademyRoot .dcs-trend-head,
#dcsAcademyRoot .dcs-alarm-strip header { color: var(--ui-ink) !important; }
#dcsAcademyRoot .dcs-alarm-strip header {
  background: #f1f7f4 !important;
  border-bottom: 1px solid var(--ui-line) !important;
}
#dcsAcademyRoot .dcs-alarm-row {
  background: #fff !important;
  color: var(--ui-copy) !important;
  border-color: var(--ui-line) !important;
}
#dcsAcademyRoot .dcs-quiz-options button,
#dcsAcademyRoot .dcs-pid-scenarios button {
  background: #f8fcf9 !important;
  color: var(--ui-ink) !important;
  border: 2px solid var(--ui-line) !important;
  border-radius: 13px !important;
}
#dcsAcademyRoot .dcs-quiz-options button.correct { background: #eaffd7 !important; color: var(--ui-green-ink) !important; border-color: #bfe79d !important; }
#dcsAcademyRoot .dcs-quiz-options button.wrong { background: #fff0f0 !important; color: #a3293e !important; border-color: #f2aeb9 !important; }
#dcsAcademyRoot .dcs-quiz-feedback { background: #fff7ec !important; color: var(--ui-copy) !important; border-left-color: #ff8a54 !important; }
#dcsAcademyRoot .dcs-skill-row i { background: #e3eee7 !important; }
#dcsAcademyRoot .dcs-reference > article { box-shadow: var(--ui-shadow) !important; }
#dcsAcademyRoot .dcs-resource-links a {
  background: #f8fcf9 !important;
  color: var(--ui-ink) !important;
  border-color: var(--ui-line) !important;
  border-radius: 12px !important;
}
/* HMI control screen and animated process canvas intentionally stay dark. */
#dcsAcademyRoot .dcs-hmi,
#dcsAcademyRoot .dcs-process { color-scheme: dark; }

/* Global contrast pass: normalize the remaining legacy pages to the light study language. */
#technicalView,
#safetyView,
#reviewView,
#communityView,
#accountView,
#bookmarksView,
#notesView {
  background: var(--ui-bg) !important;
  color: var(--ui-ink) !important;
}

/* Review: the learning graph is a paper panel; only the quiz state carries color. */
#reviewView .review-modes > button.active {
  background: var(--ui-green) !important;
  color: #204a07 !important;
  border-color: var(--ui-green) !important;
  box-shadow: 0 4px 0 #3f9900 !important;
}
#reviewView .review-modes > button.active > span,
#reviewView .review-modes > button.active small,
#reviewView .review-modes > button.active small i { color: #204a07 !important; }
#reviewView .mastery-panel {
  background: linear-gradient(145deg, #ffffff, #f1fbff) !important;
  color: var(--ui-ink) !important;
  border: 2px solid var(--ui-line) !important;
  border-radius: 20px !important;
  box-shadow: var(--ui-shadow) !important;
}
#reviewView .mastery-panel h2,
#reviewView .mastery-panel h3 { color: var(--ui-ink) !important; }
#reviewView .mastery-chart { border-color: var(--ui-line) !important; }
#reviewView .line-chart .grid-line { stroke: #d7e6df !important; }
#reviewView .line-chart .trend-area { fill: rgba(88,204,2,.12) !important; }
#reviewView .line-chart .trend-line { stroke: var(--ui-green) !important; }
#reviewView .line-chart circle { fill: #fff !important; stroke: var(--ui-green) !important; }
#reviewView .line-chart circle.today-point { fill: var(--ui-green) !important; }
#reviewView .chart-bars i { background: #dcece3 !important; }
#reviewView .chart-bars i.today { background: var(--ui-green) !important; }
#reviewView .chart-labels span,
#reviewView .mastery-note p,
#reviewView .accuracy-row span { color: var(--ui-muted) !important; }
#reviewView .mastery-note span,
#reviewView .accuracy-row b { color: var(--ui-green-ink) !important; }
#reviewView .accuracy-row { border-color: var(--ui-line) !important; }
#reviewView .srs-block { border-color: var(--ui-line) !important; }
#reviewView .srs-level i { background: #e3eee7 !important; border-color: var(--ui-line) !important; }
#reviewView .radar-ring,
#reviewView .radar-axis { stroke: #d7e6df !important; }
#reviewView .radar-label { fill: var(--ui-muted) !important; }
#reviewView .weakness-btn { background: var(--ui-green) !important; color: #204a07 !important; }
#reviewView .learning-archive { background: #fff !important; border-color: var(--ui-line) !important; box-shadow: var(--ui-shadow) !important; }
#reviewView .archive-actions button:first-child { background: var(--ui-green) !important; border-color: var(--ui-green) !important; color: #204a07 !important; }

/* Technical standards: paper cards, green field-note rail, and readable warning colors. */
#technicalView .technical-head {
  background: linear-gradient(135deg, #fff 0%, #effaff 58%, #f7efff 100%) !important;
  color: var(--ui-ink) !important;
  border: 2px solid var(--ui-line) !important;
  border-radius: 20px !important;
  box-shadow: var(--ui-shadow) !important;
}
#technicalView .technical-head h1,
#technicalView .technical-head p,
#technicalView .edition-stamp b { color: var(--ui-ink) !important; }
#technicalView .technical-head p,
#technicalView .edition-stamp small { color: var(--ui-muted) !important; }
#technicalView .edition-stamp { border-color: var(--ui-line) !important; }
#technicalView .content-tabs button {
  background: #fff !important;
  color: var(--ui-copy) !important;
  border: 2px solid var(--ui-line) !important;
  border-radius: 12px !important;
}
#technicalView .content-tabs button.active {
  background: #eaffd7 !important;
  color: var(--ui-green-ink) !important;
  border-color: #bfe79d !important;
  box-shadow: inset 0 -4px var(--ui-green) !important;
}
#technicalView .field-guide,
#technicalView .standard-card,
#technicalView .technical-aside .aside-card {
  background: #fff !important;
  color: var(--ui-ink) !important;
  border: 2px solid var(--ui-line) !important;
  border-radius: 18px !important;
  box-shadow: var(--ui-shadow) !important;
}
#technicalView .guide-side {
  background: linear-gradient(145deg, #eaffd7, #effaff) !important;
  color: var(--ui-ink) !important;
  border-right: 2px solid var(--ui-line) !important;
}
#technicalView .guide-side span,
#technicalView .guide-side i { color: var(--ui-green-ink) !important; }
#technicalView .guide-side b { color: var(--ui-ink) !important; }
#technicalView .guide-lead,
#technicalView .guide-main p,
#technicalView .standard-top p,
#technicalView .standard-summary p,
#technicalView .source-row a,
#technicalView .technical-aside .aside-card p { color: var(--ui-muted) !important; }
#technicalView .loop-diagram,
#technicalView .formula-strip,
#technicalView .standard-detail,
#technicalView .lifecycle,
#technicalView .pid-row {
  background: #f6fbf7 !important;
  border-color: var(--ui-line) !important;
  color: var(--ui-ink) !important;
}
#technicalView .loop-diagram b,
#technicalView .pid-row b { color: var(--ui-ink) !important; border-color: #a9c4b4 !important; }
#technicalView .loop-diagram i,
#technicalView .pid-row i { color: var(--ui-green-ink) !important; }
#technicalView .symptom-table,
#technicalView .symptom-table b,
#technicalView .symptom-table span { border-color: var(--ui-line) !important; }
#technicalView .symptom-table > div:first-child { background: #eaf7ff !important; color: #087fad !important; }
#technicalView .field-warning,
#technicalView .disclaimer {
  background: #fff7e2 !important;
  color: #6c5710 !important;
  border-left-color: #ffc800 !important;
  border-color: #f2dfac !important;
  border-radius: 14px !important;
}
#technicalView .field-warning b,
#technicalView .disclaimer b { color: #8d6800 !important; }
#technicalView .standard-status { border-color: #9acb72 !important; color: var(--ui-green-ink) !important; background: #f1ffe9 !important; }
#technicalView .standard-status.new { border-color: #f3b19a !important; color: #a14b2d !important; background: #fff1ea !important; }

/* Safety: retain warning accents, but remove the old control-room black blocks. */
#safetyView .safety-hero {
  background: linear-gradient(135deg, #fff 0%, #fff3ef 58%, #f7efff 100%) !important;
  color: var(--ui-ink) !important;
  border: 2px solid #f3d8df !important;
  border-radius: 20px !important;
  box-shadow: var(--ui-shadow) !important;
}
#safetyView .safety-hero h1,
#safetyView .safety-hero p,
#safetyView .safety-radar b { color: var(--ui-ink) !important; }
#safetyView .safety-hero p,
#safetyView .safety-radar span { color: var(--ui-muted) !important; }
#safetyView .safety-radar { border-left-color: var(--ui-line) !important; }
#safetyView .safety-radar i { color: #2e9c62 !important; }
#safetyView .safety-ticker {
  background: #fff7e2 !important;
  color: #6c5710 !important;
  border: 2px solid #f2dfac !important;
  border-radius: 16px !important;
}
#safetyView .safety-ticker span { background: #eaffd7 !important; color: var(--ui-green-ink) !important; }
#safetyView .safety-ticker button { color: #8d6800 !important; }
#safetyView .safety-updates { background: #f2f8f4 !important; border-color: var(--ui-line) !important; }
#safetyView .safety-updates-head h2,
#safetyView .safety-updates-head>b { color: var(--ui-ink) !important; }
#safetyView .safety-updates-head p,
#safetyView .safety-update-card > p,
#safetyView .safety-update-card > div small { color: var(--ui-muted) !important; }
#safetyView .safety-update-card,
#safetyView .accident-card,
#safetyView .accident-analysis,
#safetyView .safety-aside .aside-card,
#safetyView .risk-focus {
  background: #fff !important;
  color: var(--ui-ink) !important;
  border: 2px solid var(--ui-line) !important;
  border-radius: 18px !important;
  box-shadow: var(--ui-shadow) !important;
}
#safetyView .risk-focus { padding: 21px !important; }
#safetyView .risk-focus h3,
#safetyView .accident-card h2,
#safetyView .analysis-head h2 { color: var(--ui-ink) !important; }
#safetyView .risk-item { border-color: var(--ui-line) !important; }
#safetyView .risk-item p,
#safetyView .risk-item strong,
#safetyView .accident-card > p,
#safetyView .accident-foot a,
#safetyView .analysis-head p,
#safetyView .barrier-block li,
#safetyView .analysis-source span,
#safetyView .source-note p { color: var(--ui-muted) !important; }
#safetyView .risk-item strong { color: var(--ui-ink) !important; }
#safetyView .event-chain { background: #fff !important; }
#safetyView .chain-step { background: #f2f8f4 !important; color: var(--ui-ink) !important; border: 1px solid var(--ui-line) !important; }
#safetyView .chain-step b { color: var(--ui-ink) !important; }
#safetyView .barrier-block { border-color: var(--ui-line) !important; }
#safetyView .barrier-block.instrument { border-color: var(--ui-green) !important; }
#safetyView .accident-foot,
#safetyView .analysis-source { border-color: var(--ui-line) !important; }
#safetyView .accident-foot button { background: var(--ui-green) !important; color: #204a07 !important; border-radius: 10px !important; }

/* Community and guest access: warm, friendly paper surfaces with clear form controls. */
#communityView .community-head,
#communityView .community-hero,
#accountView .account-head {
  color: var(--ui-ink) !important;
  background: linear-gradient(135deg, #fff 0%, #f0fbff 55%, #f7efff 100%) !important;
  border: 2px solid var(--ui-line) !important;
  border-radius: 22px !important;
  box-shadow: var(--ui-shadow) !important;
}
#communityView .community-head::after,
#communityView .community-hero::after { color: rgba(23,132,184,.2) !important; }
#communityView .community-head h1,
#communityView .community-hero h2,
#communityView .community-hero h1,
#accountView .account-head h1 { color: var(--ui-ink) !important; text-shadow: none !important; }
#communityView .community-head p,
#communityView .community-hero p,
#communityView .community-hero-copy > span,
#accountView .account-head p { color: var(--ui-muted) !important; }
#communityView .community-kicker,
#communityView .community-eyebrow { color: #1784b8 !important; }
#communityView .community-hero-actions button:not(:first-child),
#communityView .community-secondary-action,
#communityView .community-ghost-button {
  color: var(--ui-ink) !important;
  background: #fff !important;
  border: 2px solid var(--ui-line) !important;
}
#communityView .community-primary-action,
#communityView .community-create,
#communityView .community-compose-button,
#communityView .community-submit,
#communityView #communityPublish,
#communityView .community-hero-actions button:first-child { background: var(--ui-green) !important; color: #204a07 !important; border-bottom: 4px solid #3f9900 !important; box-shadow: none !important; }
#communityView .community-hero-stats > div { border-color: var(--ui-line) !important; }
#communityView .community-hero-stats b { color: var(--ui-ink) !important; }
#communityView .community-hero-stats span { color: var(--ui-muted) !important; }
#communityView .community-tabs,
#communityView .community-category-tabs {
  background: #fff !important;
  border: 2px solid var(--ui-line) !important;
  border-radius: 16px !important;
}
#communityView .community-tab.active,
#communityView .community-tab[aria-selected="true"],
#communityView .community-tabs button.active,
#communityView .community-category-tab.active,
#communityView .community-category-tabs button.active {
  color: var(--ui-green-ink) !important;
  background: #eaffd7 !important;
  box-shadow: inset 0 -4px var(--ui-green) !important;
}
#communityView .community-panel,
#communityView .community-aside-card,
#communityView .community-sidebar-card,
#communityView .community-side-card,
#communityView .community-post-card,
#communityView .community-post,
#communityView .community-signin-card,
#communityView .community-composer,
#communityView .community-status,
#communityView .community-empty,
#accountView .account-card,
#accountView .account-panel,
#accountView .account-profile-stats > div {
  background: #fff !important;
  color: var(--ui-ink) !important;
  border-color: var(--ui-line) !important;
  border-radius: 18px !important;
  box-shadow: var(--ui-shadow) !important;
}
#communityView .community-search input,
#communityView .community-filter select,
#communityView .community-sort select,
#communityView .community-field input,
#communityView .community-field select,
#communityView .community-field textarea,
#communityView .community-form input,
#communityView .community-form select,
#communityView .community-form textarea,
#communityView .community-comment-input,
#accountView .account-field input,
#accountView .account-field select,
#accountView .account-field textarea,
#accountView .account-form input,
#accountView .account-form select,
#accountView .account-form textarea {
  background: #f6fbf7 !important;
  color: var(--ui-ink) !important;
  border-color: var(--ui-line) !important;
}
#communityView .community-post-title,
#communityView .community-post-card h2,
#communityView .community-post-card h3,
#communityView .community-post h2,
#communityView .community-post h3,
#communityView .community-composer-head b,
#communityView .community-signin-card h2,
#communityView .community-side-card h2,
#accountView .account-card h2,
#accountView .account-panel h2 { color: var(--ui-ink) !important; }
#communityView .community-post-excerpt,
#communityView .community-post-body > p,
#communityView .community-post-content,
#communityView .community-composer-head span,
#communityView .community-composer-foot p,
#communityView .community-side-card li span,
#communityView .community-side-card > p,
#communityView .community-signin-card p,
#communityView .community-status,
#accountView .account-card > p,
#accountView .account-profile-copy p,
#accountView .account-status { color: var(--ui-muted) !important; }
#communityView .community-avatar,
#communityView .community-author-avatar,
#communityView .community-comment-avatar,
#accountView .account-avatar,
#accountView .account-profile-avatar,
#accountView .account-profile .profile-avatar {
  background: #e6f7ff !important;
  color: #087fad !important;
  border-color: #b9dfed !important;
  box-shadow: none !important;
}
#accountView .account-card-icon { background: #eaffd7 !important; color: var(--ui-green-ink) !important; box-shadow: none !important; }
#accountView .account-brand { background: linear-gradient(145deg,#f1fff0,#effaff) !important; color: var(--ui-ink) !important; }
#accountView .account-brand h2 { color: var(--ui-ink) !important; }
#accountView .account-brand > p,
#accountView .account-benefits small,
#accountView .account-note { color: var(--ui-muted) !important; }
#accountView .account-submit,
#accountView .account-nudge button { background: var(--ui-green) !important; color: #204a07 !important; border-bottom: 4px solid #3f9900 !important; box-shadow: none !important; }
#accountView .account-actions button,
#accountView .account-actions a { background: #fff !important; color: var(--ui-copy) !important; border-color: var(--ui-line) !important; }

/* Field assistant and training controls: no hidden black action bars outside a simulator. */
#fieldView .field-section-nav .active,
#fieldView .field-section-nav [aria-current="true"] {
  background: #eaffd7 !important;
  color: var(--ui-green-ink) !important;
  border-color: #bfe79d !important;
}
#fieldView .field-next-action {
  background: linear-gradient(145deg, #f1fff0, #effaff) !important;
  color: var(--ui-ink) !important;
  border: 2px solid var(--ui-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--ui-shadow) !important;
}
#fieldView .field-next-action > span { color: #1784b8 !important; }
#fieldView .field-next-action p { color: var(--ui-muted) !important; }
#fieldView .field-next-action button,
#fieldView .field-next-action a { background: var(--ui-green) !important; color: #204a07 !important; border-color: var(--ui-green) !important; border-radius: 12px !important; }
#fieldView .lesson-table th { background: #eaf7ff !important; color: #087fad !important; }
#communicatorView .sim-reset { background: var(--ui-green) !important; color: #204a07 !important; border-bottom: 4px solid #3f9900 !important; border-radius: 13px !important; }

/* Small teaching boards that still inherited the old blackboard palette. */
.blackboard-board,
.pl-boundary,
.pl-level-readout,
.pl-transmitter,
.pl-rtd-meter,
.formula-practice em,
.calculation-lab em,
.unit-check em,
.trend-calc em {
  background: linear-gradient(145deg, #effaff, #f7efff) !important;
  color: var(--ui-ink) !important;
  border-color: var(--ui-line) !important;
}
.blackboard-board b { background: #fff !important; color: var(--ui-ink) !important; border-color: var(--ui-line) !important; }
.blackboard-board i { color: var(--ui-green-ink) !important; }
.blackboard-board span,
.formula-practice em,
.calculation-lab em,
.unit-check em,
.trend-calc em { color: var(--ui-ink) !important; }
.pl-boundary b,
.pl-level-readout span,
.pl-level-readout b { color: var(--ui-green-ink) !important; }
.pl-boundary p,
.pl-level-readout p { color: var(--ui-muted) !important; }
.pl-transmitter,
.pl-rtd-meter { border-color: var(--ui-line) !important; }

/* Connectivity/update notices should not look like another dark application. */
.network-banner,
.pwa-update {
  background: #fff7e2 !important;
  color: #6c5710 !important;
  border-color: #f2dfac !important;
  box-shadow: var(--ui-shadow) !important;
}
.network-banner span,
.pwa-update span { color: #8d761d !important; }
.pwa-update button { background: #fff !important; color: var(--ui-ink) !important; border-color: #e1c98b !important; }
.pwa-update #pwaUpdateNow { background: var(--ui-green) !important; color: #204a07 !important; border-color: var(--ui-green) !important; }

/* Review expansion:专项题库与百题段位测评 */
.review-pickers { display: grid; gap: 10px; }
.review-pickers .chapter-picker { margin-top: 0; }
#reviewView .review-modes > button[data-review-mode="assessment"] { border-color: #f2b8d4; }
#reviewView .review-modes > button[data-review-mode="assessment"].active { background: #ffe8f2; color: #70224b; border-color: #ee79ad; border-bottom-color: #d7528d; }
#reviewView .review-modes > button[data-review-mode="assessment"].active > span,
#reviewView .review-modes > button[data-review-mode="assessment"].active b,
#reviewView .review-modes > button[data-review-mode="assessment"].active small { color: #70224b; }
.assessment-result { grid-column: 1 / -1; text-align: center; padding: 24px 10px 12px; }
.assessment-rank-icon { width: 76px; height: 76px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 50%; background: #eaffd7; border: 5px solid #bfe79d; font-size: 34px; box-shadow: 0 5px 0 #8fc66a; }
.assessment-kicker { display: block; color: #1784b8; font-size: 9px; letter-spacing: 1.6px; font-weight: 800; }
.assessment-result h2 { margin: 8px 0; color: var(--ui-ink); font-size: 24px; }
.assessment-result > p { color: var(--ui-muted); font-size: 11px; line-height: 1.7; }
.assessment-result > p b { color: #58a900; }
.assessment-track-results { max-width: 620px; margin: 18px auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.assessment-track-result { padding: 12px 8px; border: 2px solid var(--ui-line); border-radius: 14px; background: #fff; display: grid; gap: 4px; }
.assessment-track-result span { color: var(--ui-muted); font-size: 10px; }
.assessment-track-result b { color: #1784b8; font: 22px Georgia, serif; }
.assessment-track-result small { color: var(--ui-muted); font-size: 9px; }
.assessment-next { max-width: 620px; margin: 0 auto 16px; padding: 10px 14px; border-radius: 10px; background: #fff7e2; color: #765d14; font-size: 10px; }
.assessment-next.is-max { background: #eaffd7; color: #356e12; }
.assessment-retry { border: 0; border-bottom: 4px solid #3f9900; border-radius: 13px; background: var(--ui-green); color: #204a07; padding: 12px 20px; font-weight: 800; cursor: pointer; }
@media (max-width: 700px) {
  .assessment-track-results { grid-template-columns: 1fr; max-width: 270px; }
  .assessment-track-result { grid-template-columns: 1fr auto; text-align: left; align-items: center; }
  .assessment-track-result small { grid-column: 1 / -1; }
}
.assessment-history {
  margin: 10px clamp(34px, 5vw, 78px) 0;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 2px solid #e4d0dd;
  border-radius: 14px;
  background: #fff7fb;
}
.assessment-history-copy { display: grid; gap: 3px; }
.assessment-history-copy span { color: #b34f83; font-size: 9px; letter-spacing: 1.4px; font-weight: 800; }
.assessment-history-copy b { color: var(--ui-ink); font-size: 13px; }
.assessment-history-copy small { color: var(--ui-muted); font-size: 10px; }
.assessment-history button {
  border: 0;
  border-bottom: 4px solid #d7528d;
  border-radius: 12px;
  background: #ffd7e8;
  color: #70224b;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
}
@media (max-width: 700px) {
  .assessment-history { margin-left: 16px; margin-right: 16px; display: block; }
  .assessment-history button { width: 100%; margin-top: 10px; }
}

/* 图解讲义中心：把“看卡片”变成“边讲边做” */
.visual-handbook {
  margin: 18px clamp(18px, 4vw, 54px) 26px;
  padding: clamp(18px, 3vw, 30px);
  border: 2px solid #d9edca;
  border-radius: 28px;
  background: linear-gradient(135deg, #fff 0%, #f5fff0 58%, #edf9ff 100%);
  box-shadow: 0 6px 0 #dce9d6;
}
.visual-handbook-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 18px;
}
.visual-handbook-kicker,
.handbook-panel-kicker {
  display: block;
  color: #1686b9;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.visual-handbook-head h2 { margin: 7px 0 6px; color: #27343a; font-size: clamp(22px, 3vw, 34px); letter-spacing: -.8px; }
.visual-handbook-head p { max-width: 720px; margin: 0; color: #647277; font-size: 13px; line-height: 1.75; }
.visual-handbook-count { display: flex; align-items: center; gap: 8px; color: #69767a; white-space: nowrap; }
.visual-handbook-count b { color: var(--duo-green-dark); font: 42px/1 Georgia, serif; }
.visual-handbook-count span { font-size: 10px; line-height: 1.5; }
.visual-handbook-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; margin-bottom: 16px; }
.visual-handbook-steps button {
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  text-align: left;
  border: 2px solid #dfe7e8;
  border-radius: 15px;
  background: #fff;
  color: #647277;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.visual-handbook-steps button:hover { transform: translateY(-2px); border-color: #9fd4e8; }
.visual-handbook-steps button.active { border-color: var(--duo-green); background: #efffdc; color: #285a08; box-shadow: 0 4px 0 #b7e796; }
.visual-handbook-steps i { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 10px; background: #eef4f5; color: #78878a; font: 12px Georgia, serif; font-style: normal; }
.visual-handbook-steps button.active i { background: var(--duo-green); color: #fff; }
.visual-handbook-steps span { display: grid; gap: 2px; min-width: 0; }
.visual-handbook-steps b { font-size: 12px; color: inherit; }
.visual-handbook-steps small { overflow: hidden; color: #77868a; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.visual-handbook-steps button.active small { color: #4a7e2d; }
.visual-handbook-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: 14px; align-items: stretch; }
.handbook-visual-card,
.handbook-panel { min-height: 265px; border: 2px solid #dfe7e8; border-radius: 20px; background: rgba(255,255,255,.92); }
.handbook-visual-card { padding: 18px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.handbook-visual-top { display: flex; justify-content: space-between; gap: 12px; color: #1686b9; font-size: 9px; font-weight: 900; letter-spacing: 1.5px; }
.handbook-visual-top b { color: #829094; font-size: 10px; font-weight: 700; letter-spacing: 0; text-align: right; }
.handbook-flow { min-height: 145px; display: flex; align-items: center; justify-content: center; gap: 8px; position: relative; padding: 15px 0 10px; }
.handbook-flow::before { content: ''; position: absolute; left: 7%; right: 7%; top: 50%; height: 4px; z-index: 0; border-radius: 10px; background: linear-gradient(90deg, var(--duo-green), var(--duo-blue)); opacity: .28; }
.handbook-node { position: relative; z-index: 1; width: min(23%, 145px); min-height: 104px; padding: 14px 8px 10px; border: 2px solid #dce6e8; border-radius: 17px; background: #fff; color: #3d4b4e; text-align: left; cursor: pointer; box-shadow: 0 4px 0 #edf0f0; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.handbook-node:hover, .handbook-node.active { transform: translateY(-4px); border-color: var(--duo-blue); box-shadow: 0 6px 0 #c7e6f4; }
.handbook-node.process:hover, .handbook-node.process.active { border-color: var(--duo-green); box-shadow: 0 6px 0 #c9eca9; }
.handbook-node.loop:hover, .handbook-node.loop.active { border-color: var(--duo-pink); box-shadow: 0 6px 0 #f4c6de; }
.handbook-node.dcs:hover, .handbook-node.dcs.active { border-color: var(--duo-purple); box-shadow: 0 6px 0 #e6c8fa; }
.handbook-node span { display: block; margin-bottom: 12px; color: #1a94c4; font: 11px Georgia, serif; }
.handbook-node.process span { color: var(--duo-green-dark); }
.handbook-node.loop span { color: var(--duo-pink-dark); }
.handbook-node.dcs span { color: var(--duo-purple-dark); }
.handbook-node strong, .handbook-node small { display: block; }
.handbook-node strong { font-size: 12px; line-height: 1.35; }
.handbook-node small { margin-top: 4px; color: #78878a; font-size: 9px; line-height: 1.35; }
.handbook-flow-arrow { position: relative; z-index: 2; color: #7e9ba1; font-size: 18px; font-style: normal; font-weight: 900; }
.handbook-wire-legend { display: flex; flex-wrap: wrap; gap: 9px 14px; padding-top: 12px; border-top: 2px dashed #e6eeee; color: #738287; font-size: 9px; }
.handbook-wire-legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: var(--duo-blue); }
.legend-dot.safe { background: var(--duo-green); }
.legend-dot.alert { background: var(--duo-pink); }
.handbook-panel { padding: 20px; display: flex; flex-direction: column; }
.handbook-panel h3 { margin: 7px 0 8px; color: #2f3c40; font-size: 19px; line-height: 1.35; }
.handbook-panel > p { margin: 0 0 11px; color: #5b6b70; font-size: 12px; line-height: 1.72; }
.handbook-panel ul { display: grid; gap: 7px; margin: 0 0 12px; padding: 0; list-style: none; }
.handbook-panel li { position: relative; padding-left: 18px; color: #4e5d61; font-size: 11px; line-height: 1.55; }
.handbook-panel li::before { content: '✓'; position: absolute; left: 0; color: var(--duo-green-dark); font-weight: 900; }
.handbook-formula { margin-top: auto; padding: 11px 12px; border-radius: 13px; background: #edf9ff; border: 2px solid #caeaf8; }
.handbook-formula span { display: block; margin-bottom: 4px; color: var(--duo-blue-dark); font-size: 9px; font-weight: 900; letter-spacing: 1px; }
.handbook-formula code { display: block; overflow: auto; color: #174e70; font: 14px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: nowrap; }
.handbook-formula small { display: block; margin-top: 4px; color: #64828d; font-size: 9px; }
.handbook-callout { display: grid; gap: 3px; margin-top: auto; padding: 10px 12px; border-left: 4px solid var(--duo-green); border-radius: 0 12px 12px 0; background: #f3ffe8; }
.handbook-callout b { color: #4c891d; font-size: 10px; }
.handbook-callout span { color: #60716a; font-size: 10px; line-height: 1.55; }
.handbook-tag-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 auto; }
.handbook-tag-row span { padding: 6px 9px; border-radius: 999px; background: #edf9ff; color: #237ea5; font-size: 10px; }
.handbook-back { align-self: flex-start; margin-top: auto; padding: 8px 11px; border: 0; border-radius: 10px; background: #efffdc; color: #4d861f; cursor: pointer; }
.handbook-practice { margin-top: 14px; padding: 15px 17px; border: 2px solid #e2e9e6; border-radius: 18px; background: #fff; }
.handbook-practice-copy { display: grid; gap: 4px; }
.handbook-practice-copy h3 { margin: 0; color: #364447; font-size: 15px; }
.handbook-practice-copy p { margin: 0; color: #6c7b7f; font-size: 11px; line-height: 1.6; }
.handbook-practice-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 12px; }
.handbook-practice-cards > div { display: grid; gap: 3px; padding: 11px; border-radius: 13px; background: #f6fbf3; border: 2px solid #e2f0d8; }
.handbook-practice-cards b { color: var(--duo-green-dark); font: 13px Georgia, serif; }
.handbook-practice-cards strong { color: #3d4c4f; font-size: 11px; }
.handbook-practice-cards span { color: #768489; font-size: 9px; line-height: 1.45; }
.handbook-calc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 9px; align-items: end; margin-top: 12px; }
.handbook-calc-fields label { display: grid; gap: 5px; color: #66767a; font-size: 9px; font-weight: 800; }
.handbook-calc-fields input { width: 100%; min-height: 38px; box-sizing: border-box; padding: 7px 9px; border: 2px solid #dce8e5; border-radius: 10px; color: #334447; background: #fbfefd; font-size: 12px; }
.handbook-calc-fields input:focus { outline: 3px solid #d8f3c6; border-color: var(--duo-green); }
.handbook-calc-fields button, .handbook-quiz-feedback button { min-height: 38px; padding: 8px 12px; border: 0; border-bottom: 4px solid var(--duo-green-dark); border-radius: 10px; background: var(--duo-green); color: #245809; cursor: pointer; font-weight: 900; white-space: nowrap; }
.handbook-calc-output { display: grid; gap: 3px; margin-top: 10px; padding: 10px 12px; border-radius: 11px; background: #f4f7f7; color: #647377; font-size: 10px; line-height: 1.5; }
.handbook-calc-output b { color: var(--duo-blue-dark); font-size: 19px; }
.handbook-calc-output span, .handbook-calc-output small { color: #718187; font-size: 9px; }
.handbook-calc-output.is-good { background: #efffdc; }
.handbook-calc-output.is-warn, .handbook-calc-output.is-error { background: #fff4df; color: #896214; }
.handbook-quiz-head { display: flex; justify-content: space-between; gap: 15px; align-items: flex-start; }
.handbook-quiz-head h3 { margin: 5px 0 0; color: #334246; font-size: 15px; line-height: 1.45; }
.handbook-quiz-head > b { color: var(--duo-green-dark); font-size: 11px; white-space: nowrap; }
.handbook-quiz-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
.handbook-quiz-options button { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 10px; border: 2px solid #dfe8e8; border-radius: 11px; background: #fff; color: #556469; text-align: left; cursor: pointer; }
.handbook-quiz-options button:hover:not(:disabled) { border-color: var(--duo-blue); }
.handbook-quiz-options button:disabled { cursor: default; opacity: 1; }
.handbook-quiz-options button.is-correct { border-color: var(--duo-green); background: #efffdc; color: #376e16; }
.handbook-quiz-options button.is-wrong { border-color: var(--duo-red); background: #fff0f0; color: #9b3131; }
.handbook-quiz-options i { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 7px; background: #edf3f3; color: #6e7e82; font-size: 10px; font-style: normal; font-weight: 900; }
.handbook-quiz-feedback { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px; border-radius: 11px; background: #f3ffe8; color: #5b6b70; font-size: 10px; line-height: 1.5; }
.handbook-quiz-feedback b { color: #4f8a1d; white-space: nowrap; }
.handbook-quiz-feedback span { flex: 1; }

.handbook-image-study { margin-top: 14px; padding: 16px; border: 2px solid #e2e9e6; border-radius: 18px; background: linear-gradient(135deg, #fbfffb 0%, #f6fbff 100%); }
.handbook-image-study-head { display: flex; justify-content: space-between; gap: 16px; align-items: end; }
.handbook-image-study-head h3 { margin: 5px 0 4px; color: #344448; font-size: 16px; }
.handbook-image-study-head p { margin: 0; color: #6d7b7f; font-size: 10px; line-height: 1.55; }
.handbook-image-flow { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 999px; background: #fff; color: #718084; font-size: 10px; white-space: nowrap; }
.handbook-image-flow b { color: var(--duo-green-dark); font-size: 14px; }
.handbook-image-grid { display: grid; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); gap: 11px; align-items: center; margin-top: 14px; }
.handbook-image-grid figure { margin: 0; min-width: 0; }
.handbook-image-frame { overflow: hidden; aspect-ratio: 16 / 9; border: 2px solid #dfe9e6; border-radius: 14px; background: #0c2024; box-shadow: 0 4px 0 #e5ece9; }
.handbook-image-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.handbook-image-grid figcaption { display: grid; gap: 3px; padding: 8px 4px 0; }
.handbook-image-grid figcaption b { color: #4a5d61; font-size: 10px; }
.handbook-image-grid figcaption span { color: #78868a; font-size: 9px; line-height: 1.45; }
.handbook-image-bridge { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--duo-green-soft); color: var(--duo-green-dark); font-weight: 900; }
.handbook-image-parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.handbook-image-parts button { display: grid; grid-template-columns: 25px 1fr; gap: 7px; align-items: start; min-height: 55px; padding: 8px; border: 2px solid #e0e9e6; border-radius: 12px; background: #fff; color: #55666a; text-align: left; cursor: pointer; }
.handbook-image-parts button:hover { border-color: #a4dc7f; }
.handbook-image-parts button.active { border-color: var(--duo-green); background: var(--duo-green-soft); box-shadow: 0 3px 0 var(--duo-green-dark); }
.handbook-image-parts button > b { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; background: #edf4f2; color: #688086; font: 10px Georgia, serif; }
.handbook-image-parts button.active > b { background: var(--duo-green); color: #fff; }
.handbook-image-parts strong, .handbook-image-parts small { display: block; }
.handbook-image-parts strong { color: #43565a; font-size: 10px; line-height: 1.3; }
.handbook-image-parts small { margin-top: 3px; color: #78868a; font-size: 8px; line-height: 1.4; }
.handbook-image-note { margin: 10px 0 0; padding: 8px 10px; border-left: 3px solid var(--duo-blue); border-radius: 0 9px 9px 0; background: #edf9ff; color: #66808a; font-size: 9px; line-height: 1.5; }

.handbook-project-picker { margin: 12px 24px 16px; padding: 16px; border: 2px solid var(--duo-line); border-radius: 22px; background: #fff; box-shadow: 0 5px 0 #e7ece9; }
.handbook-project-picker-head { display: flex; justify-content: space-between; gap: 18px; align-items: end; margin-bottom: 12px; }
.handbook-project-picker-head h2 { margin: 4px 0 0; color: var(--duo-ink); font-size: 21px; }
.handbook-project-picker-head > span { color: var(--duo-muted); font-size: 10px; }
.handbook-project-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.handbook-project-grid button { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 9px; min-height: 70px; padding: 10px; border: 2px solid #e0e9e6; border-radius: 15px; background: #fff; color: #5c6b6e; text-align: left; cursor: pointer; }
.handbook-project-grid button:hover { border-color: #a4dc7f; background: #f9fff5; }
.handbook-project-grid button.active { border-color: var(--duo-green); background: var(--duo-green-soft); color: #397a0b; box-shadow: 0 3px 0 var(--duo-green-dark); }
.handbook-project-grid b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: #eef5f4; color: #698085; font: 12px Georgia, serif; }
.handbook-project-grid button.active b { background: var(--duo-green); color: #fff; }
.handbook-project-grid strong, .handbook-project-grid small { display: block; }
.handbook-project-grid strong { font-size: 11px; }
.handbook-project-grid small { margin-top: 3px; color: #7b8a8d; font-size: 9px; line-height: 1.35; }

@media (max-width: 860px) {
  .learning-hub-dashboard { margin: 12px 14px 0; padding: 16px; border-radius: 22px; }
  .learning-hub-dashboard-head { align-items: start; }
  .learning-hub-level { min-width: 100px; }
  .visual-handbook-steps { grid-template-columns: repeat(5, minmax(112px, 1fr)); overflow-x: auto; padding-bottom: 4px; }
  .visual-handbook-steps button { min-width: 112px; }
  .visual-handbook-grid { grid-template-columns: 1fr; }
  .handbook-visual-card { min-height: 230px; }
  .handbook-project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .handbook-image-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .learning-hub-dashboard { margin: 10px 10px 0; padding: 13px; border-radius: 19px; }
  .learning-hub-dashboard-head { display: grid; gap: 10px; }
  .learning-hub-dashboard-head h1 { font-size: 26px; }
  .learning-hub-level { width: fit-content; min-width: 0; padding: 8px 12px; text-align: left; }
  .learning-hub-level b, .learning-hub-level span { display: inline; }
  .learning-hub-level span { margin-left: 7px; }
  .learning-hub-continue { align-items: start; display: grid; gap: 10px; padding: 13px; }
  .learning-hub-continue button { width: 100%; }
  .learning-hub-lanes { grid-template-columns: 1fr; }
  .learning-hub-lane.lane-simulation { grid-column: auto; }
  .hub-lane-links { margin-left: 0; }
  .visual-handbook { margin: 15px 14px 22px; padding: 15px; border-radius: 22px; }
  .visual-handbook-head { gap: 10px; }
  .visual-handbook-head h2 { font-size: 22px; }
  .visual-handbook-head p { font-size: 11px; }
  .visual-handbook-count b { font-size: 30px; }
  .visual-handbook-count span { font-size: 8px; }
  .handbook-flow { justify-content: flex-start; overflow-x: auto; padding: 15px 3px 14px; }
  .handbook-flow::before { left: 25px; right: 25px; min-width: 630px; }
  .handbook-node { width: 126px; min-width: 126px; }
  .handbook-flow-arrow { flex: 0 0 auto; }
  .handbook-visual-top { display: grid; gap: 4px; }
  .handbook-visual-top b { text-align: left; }
  .handbook-practice-cards, .handbook-quiz-options { grid-template-columns: 1fr; }
  .handbook-calc-fields { grid-template-columns: repeat(2, 1fr); }
  .handbook-calc-fields button { grid-column: 1 / -1; width: 100%; }
  .handbook-quiz-feedback { align-items: flex-start; flex-wrap: wrap; }
  .handbook-quiz-feedback span { flex-basis: calc(100% - 4px); }
  .handbook-project-picker { margin: 10px 12px 14px; padding: 13px; border-radius: 18px; }
  .handbook-project-picker-head { display: grid; gap: 5px; }
  .handbook-project-grid { display: flex; overflow-x: auto; padding-bottom: 4px; }
  .handbook-project-grid button { min-width: 220px; }
  .handbook-image-study { padding: 13px; border-radius: 16px; }
  .handbook-image-study-head { display: grid; gap: 7px; }
  .handbook-image-grid { grid-template-columns: 1fr; gap: 8px; }
  .handbook-image-bridge { margin: 0 auto; transform: rotate(90deg); }
  .handbook-image-parts { grid-template-columns: 1fr; }
}

/* 图解讲义独立入口与独立学习空间 */
.handbook-launch-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  margin: 18px 0 22px;
  padding: 18px 20px;
  border: 2px solid #d9e7d6;
  border-radius: 22px;
  background: linear-gradient(110deg, #f4ffe7 0%, #f8ffff 52%, #fff3fa 100%);
  box-shadow: 0 5px 0 #dfe8e0;
}
.handbook-launch-icon { display: flex; align-items: center; gap: 4px; color: #4c9c1a; font-size: 20px; font-weight: 900; }
.handbook-launch-icon span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; background: #fff; border: 2px solid #b7e59d; }
.handbook-launch-icon i { font-style: normal; color: #8da1a5; font-size: 16px; }
.handbook-launch-card h2 { margin: 2px 0 3px; color: #2b4145; font-size: 21px; }
.handbook-launch-card p { margin: 0; color: #65777b; font-size: 12px; line-height: 1.6; }
.handbook-launch-button { align-self: center; min-height: 44px; padding: 0 17px; border: 0; border-radius: 14px; background: var(--duo-green); color: #fff; font-weight: 900; box-shadow: 0 4px 0 #43a500; cursor: pointer; }
.handbook-launch-button i { margin-left: 8px; font-style: normal; }
.handbook-launch-button:active { transform: translateY(2px); box-shadow: 0 2px 0 #43a500; }
.handbook-view { padding-bottom: 42px; }
.handbook-view .learning-hub-switch [data-view-target="handbook"] { border-color: #7fd642; background: #f4ffe9; }
.handbook-page-head { margin-bottom: 10px; }
.handbook-page-head h1 { margin-top: 6px; }
.handbook-page-head p { max-width: 690px; }
.handbook-page-stat { display: flex; align-items: center; gap: 10px; color: #6c7f83; }
.handbook-page-stat b { color: var(--duo-green-dark); font-size: 45px; line-height: 1; }
.handbook-page-stat span { font-size: 11px; line-height: 1.5; }
.handbook-breadcrumb { display: flex; align-items: center; gap: 13px; margin: 4px 0 8px; color: #809094; font-size: 11px; }
.handbook-breadcrumb button { border: 0; padding: 8px 12px; border-radius: 10px; background: #f1f7f7; color: #3a8db4; font-weight: 800; cursor: pointer; }
.handbook-view .visual-handbook { margin: 0; }
@media (max-width: 760px) {
  .handbook-launch-card { grid-template-columns: auto 1fr; gap: 12px; }
  .handbook-launch-button { grid-column: 1 / -1; width: 100%; }
  .handbook-page-stat { display: none; }
  .handbook-breadcrumb { flex-wrap: wrap; }
}