/* 新能源汽车检修教学平台 · 统一视觉系统 */
:root {
  --ui-ink: #102a43;
  --ui-muted: #627d98;
  --ui-primary: #087e8b;
  --ui-primary-dark: #075f68;
  --ui-primary-soft: #e4f5f4;
  --ui-accent: #ff9f43;
  --ui-accent-soft: #fff2e4;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f7fafc;
  --ui-line: #dce7ed;
  --ui-shadow: 0 18px 50px rgba(16, 42, 67, .10);
  --ui-shadow-sm: 0 8px 24px rgba(16, 42, 67, .07);
  --ui-radius: 20px;
}

html { scroll-behavior: smooth; }

body {
  color: var(--ui-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(8, 126, 139, .22) !important;
  outline-offset: 2px;
}

/* 门户页 */
body.portal-page {
  background:
    radial-gradient(circle at 12% 16%, rgba(8, 126, 139, .12), transparent 30%),
    radial-gradient(circle at 88% 82%, rgba(255, 159, 67, .13), transparent 28%),
    #f4f8fa;
}
.portal-page .platform-container {
  max-width: 1080px;
  padding: 56px 64px 46px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 28px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(18px);
  box-shadow: var(--ui-shadow);
}
.portal-page h1 {
  color: var(--ui-ink);
  background: none;
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: -1.5px;
  margin-bottom: 14px;
}
.portal-page .sub {
  border: 0;
  color: var(--ui-muted);
  padding: 8px 14px;
  margin-bottom: 28px;
  background: var(--ui-surface-soft);
  border-radius: 999px;
}
.portal-page .role-cards { gap: 24px; margin: 22px 0; }
.portal-page .card {
  width: min(380px, 100%);
  padding: 32px;
  border: 1px solid var(--ui-line);
  border-top: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow-sm);
  text-align: left;
  position: relative;
  overflow: hidden;
}
.portal-page .card::after {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  right: -50px;
  top: -50px;
  border-radius: 50%;
  background: var(--ui-primary-soft);
}
.portal-page .teacher-card::after { background: var(--ui-accent-soft); }
.portal-page .card:hover {
  transform: translateY(-6px);
  border-color: rgba(8,126,139,.35);
  box-shadow: 0 20px 44px rgba(16,42,67,.14);
}
.portal-page .card-icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  background: var(--ui-primary-soft);
  border-radius: 16px;
  font-size: 2rem;
  margin-bottom: 26px;
}
.portal-page .teacher-card .card-icon { background: var(--ui-accent-soft); }
.portal-page .card h2 { color: var(--ui-ink); font-size: 1.55rem; }
.portal-page .card p { min-height: 42px; color: var(--ui-muted); line-height: 1.6; }
.portal-page .enter-btn {
  background: var(--ui-primary);
  border-radius: 12px;
  padding: 12px 18px;
}
.portal-page .teacher-card .enter-btn { background: #e98324; }
.portal-page .footer-note {
  color: var(--ui-muted);
  background: transparent;
  margin-top: 30px;
}

/* 登录页 */
body.login-page {
  background:
    linear-gradient(115deg, rgba(7,95,104,.94), rgba(8,126,139,.84)),
    #075f68;
  position: relative;
  overflow: hidden;
}
.login-page::before, .login-page::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.13);
}
.login-page::before { width: 460px; height: 460px; left: -180px; top: -150px; }
.login-page::after { width: 340px; height: 340px; right: -100px; bottom: -130px; }
.login-page .login-box {
  position: relative;
  z-index: 1;
  max-width: 460px;
  padding: 44px 42px 36px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 28px 70px rgba(1,42,47,.28);
  text-align: left;
}
.login-page .logo-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--ui-primary-soft);
  font-size: 1.8rem;
  margin-bottom: 22px;
}
.teacher-login-page .logo-icon { background: var(--ui-accent-soft); }
.login-page h2 { color: var(--ui-ink); font-size: 1.75rem; }
.login-page input, .login-page select {
  height: 52px;
  padding: 0 16px;
  margin: 7px 0;
  color: var(--ui-ink);
  background: #f8fbfc;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.login-page input:focus, .login-page select:focus {
  background: white;
  border-color: var(--ui-primary);
  box-shadow: 0 0 0 4px rgba(8,126,139,.10);
  outline: none;
}
.login-page button {
  min-height: 52px;
  margin-top: 14px;
  border-radius: 12px;
  background: var(--ui-primary);
  box-shadow: 0 10px 22px rgba(8,126,139,.2);
}
.teacher-login-page button { background: #e98324; box-shadow: 0 10px 22px rgba(233,131,36,.2); }
.login-page button:hover { transform: translateY(-1px); }
.login-page .back-link { color: var(--ui-muted); font-size: .9rem; }
.login-page .demo-note { color: #829ab1; }

/* 学生项目与任务页 */
body.student-home-page,
body.subtasks-page,
body.task-page {
  background:
    radial-gradient(circle at 90% 0, rgba(8,126,139,.08), transparent 28%),
    #f4f8fa;
  color: var(--ui-ink);
}
.student-home-page .header,
.subtasks-page .nav-bar,
.task-page .nav-bar {
  background: rgba(255,255,255,.9);
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  box-shadow: var(--ui-shadow-sm);
  backdrop-filter: blur(16px);
}
.student-home-page .header { padding: 14px 20px; }
.student-home-page .user-info { color: var(--ui-ink); }
.student-home-page .logout {
  background: var(--ui-surface-soft);
  color: var(--ui-muted);
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  padding: 8px 14px;
}
.student-home-page h2 { color: var(--ui-ink); font-size: 1.55rem; margin-top: 30px; }
.student-home-page .project-grid { gap: 18px; }
.student-home-page .project-card,
.student-home-page .eval-section,
.subtasks-page .task-card,
.task-page .card {
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow-sm);
}
.student-home-page .project-card { padding: 24px; }
.student-home-page .project-card:hover,
.subtasks-page .task-card:hover {
  transform: translateY(-5px);
  border-color: rgba(8,126,139,.45);
  box-shadow: 0 16px 34px rgba(16,42,67,.12);
}
.student-home-page .project-icon,
.subtasks-page .card-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--ui-primary-soft);
  font-size: 1.65rem;
}
.student-home-page .project-title,
.subtasks-page .task-name { color: var(--ui-ink); }
.student-home-page .project-desc,
.subtasks-page .task-desc { color: var(--ui-muted); line-height: 1.65; }
.student-home-page .eval-section { padding: 24px; }
.student-home-page .eval-link-btn,
.task-page .export-btn,
.task-page .submit-btn { background: var(--ui-primary); border-radius: 10px; }
.student-home-page .eval-frame { border-radius: 14px; border: 1px solid var(--ui-line); }

.subtasks-page .nav-bar,
.task-page .nav-bar { border-radius: 16px; padding: 12px 16px; }
.subtasks-page .project-title,
.task-page .task-title {
  color: var(--ui-ink);
  background: none;
  -webkit-text-fill-color: initial;
}
.subtasks-page .back-button,
.task-page .back-btn {
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  color: var(--ui-muted);
  background: var(--ui-surface-soft);
}
.subtasks-page .tasks-grid { gap: 18px; }
.subtasks-page .task-card { padding: 24px; background: white; }
.subtasks-page .task-card::before { background: var(--ui-primary) !important; }
.subtasks-page .task-meta { color: var(--ui-primary); background: var(--ui-primary-soft); }
.subtasks-page .footer-tip { background: transparent; color: var(--ui-muted); }

.task-page .tabs {
  background: #e8f0f3;
  border-radius: 12px;
  padding: 4px;
  gap: 2px;
}
.task-page .tab { border-radius: 9px; color: var(--ui-muted); }
.task-page .tab.active { color: var(--ui-primary-dark); box-shadow: 0 2px 8px rgba(16,42,67,.08); }
.task-page .card { background: white; padding: 24px; }
.task-page .question { border-radius: 14px; border: 1px solid #e8eef2; }
.task-page .question p { color: var(--ui-ink); }
.task-page input, .task-page textarea, .task-page select { border-radius: 10px !important; }
.task-page .result-box, .task-page .weakness { border-radius: 12px; }
.task-page iframe { border-radius: 14px; }

/* 项目二任务一 · 课中工单 */
.task-page .worksheet-sheet {
  margin-top: 22px;
  padding: 22px;
  border: 1px solid var(--ui-line);
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, #fbfdfd);
  box-shadow: 0 8px 22px rgba(16,42,67,.06);
}
.task-page .worksheet-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 15px; border-bottom: 1px solid var(--ui-line); }
.task-page .worksheet-sheet-head h3 { margin: 7px 0 5px; color: var(--ui-ink); }
.task-page .worksheet-sheet-head p { margin: 0; color: var(--ui-muted); font-size: .9rem; line-height: 1.6; }
.task-page .worksheet-index { display: inline-flex; padding: 5px 8px; border-radius: 7px; background: var(--ui-primary-soft); color: var(--ui-primary-dark); font-size: .72rem; font-weight: 800; }
.task-page .worksheet-status { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; color: #8a6230; background: #fff3dc; font-size: .74rem; font-weight: 700; }
.task-page .worksheet-status.saved { color: #247653; background: #e5f6ed; }
.task-page .worksheet-reference { display: block; width: min(100%, 920px); max-height: 560px; object-fit: contain; margin: 20px auto; padding: 8px; border: 1px solid #e8eef2; border-radius: 13px; background: white; }
.task-page .worksheet-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.task-page .sequence-fields { display: grid; gap: 10px; margin: 8px 0 18px; }
.task-page .sequence-fields label { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 8px; }
.task-page .sequence-fields label > span { color: var(--ui-primary-dark); font-weight: 900; text-align: center; }
.task-page .sequence-fields input { width: 100%; }
.task-page .worksheet-radio-group { display: flex; flex-wrap: wrap; gap: 10px; }
.task-page .worksheet-radio-group label { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border: 1px solid var(--ui-line); border-radius: 10px; background: white; cursor: pointer; }
.task-page .input-with-unit { display: flex; align-items: center; gap: 8px; }
.task-page .input-with-unit input { flex: 1; min-width: 0; }
.task-page .input-with-unit span { color: var(--ui-muted); font-weight: 700; }
.task-page .worksheet-submit-row { display: flex; justify-content: flex-end; align-items: center; padding-top: 5px; }
.task-page .worksheet-save-btn { margin-top: 0; min-width: 190px; }
.task-page .worksheet-save-btn.saved { background: #2f9e6f; }
.task-page .worksheet-figure { margin: 20px 0; padding: 16px; border: 1px solid #dce8ec; border-radius: 16px; background: #f8fbfc; text-align: center; overflow: hidden; }
.task-page .worksheet-figure img { display: block; width: auto; max-width: 100%; max-height: 560px; margin: 0 auto; border-radius: 9px; background: white; transition: transform .25s ease, box-shadow .25s ease; }
.task-page .worksheet-figure:hover img { transform: scale(1.012); box-shadow: 0 10px 25px rgba(16,42,67,.12); }
.task-page .worksheet-figure figcaption { margin-top: 11px; color: var(--ui-muted); font-size: .78rem; }
.task-page .circuit-figure img { width: min(100%, 820px); }
.task-page .contactor-figure img { width: min(100%, 960px); }

.task-page .native-diagram { position: relative; margin: 20px 0; padding: 24px; border: 1px solid #dce8ec; border-radius: 16px; background: radial-gradient(circle at 100% 0, rgba(8,126,139,.07), transparent 34%), #f7fafb; overflow: hidden; }
.task-page .diagram-input-node, .task-page .named-node, .task-page .energy-source { position: relative; z-index: 2; border: 1px solid #cddde3; border-radius: 13px; background: white; box-shadow: 0 6px 14px rgba(16,42,67,.06); }
.task-page .diagram-input-node { padding: 11px; }
.task-page .diagram-input-node > span { display: block; margin-bottom: 7px; color: var(--ui-primary-dark); font-size: .75rem; font-weight: 800; }
.task-page .diagram-input-node input { width: 100%; min-width: 0; padding: 9px 10px; border: 1px dashed #9bb5bf !important; background: #fbfdfd; }
.task-page .named-node { min-height: 66px; padding: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.task-page .named-node b { font-size: .85rem; }
.task-page .named-node small { margin-top: 3px; color: var(--ui-muted); font-size: .68rem; }
.task-page .energy-source { min-height: 78px; padding: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.task-page .port-symbol { width: 38px; height: 38px; border: 2px solid var(--ui-accent); border-radius: 50%; display: grid; place-items: center; color: var(--ui-primary-dark); font-weight: 900; }
.task-page .energy-source b { font-size: .76rem; }
.task-page .flow-arrow, .task-page .branch-label { align-self: center; justify-self: center; color: #e77d20; font-size: .74rem; font-weight: 900; text-align: center; }
.task-page .diagram-legend { position: absolute; right: 18px; bottom: 10px; z-index: 4; display: flex; gap: 12px; color: var(--ui-muted); font-size: .65rem; }
.task-page .diagram-legend span { display: inline-flex; align-items: center; gap: 4px; }
.task-page .diagram-legend i { width: 18px; height: 3px; border-radius: 4px; background: #f29a4a; }
.task-page .diagram-legend .lv-line-sample { background: #5c7c8b; }
.task-page .diagram-legend .phase-line-sample { background: #d86767; }
.task-page .hv-distribution-diagram { min-height: 470px; display: grid; grid-template-columns: repeat(7, minmax(80px, 1fr)); grid-template-rows: 86px 40px 102px 38px 82px; gap: 7px 10px; align-items: stretch; }
.task-page .dc-port { grid-column: 1 / 2; grid-row: 1; }.task-page .dc-arrow { grid-column: 1; grid-row: 2; }.task-page .battery-node { grid-column: 1 / 3; grid-row: 3; }
.task-page .ac-port { grid-column: 7; grid-row: 1; }.task-page .ac-arrow { grid-column: 5 / 7; grid-row: 1; }.task-page .charger-node { grid-column: 3 / 5; grid-row: 1; }
.task-page .pdu-node { grid-column: 3 / 5; grid-row: 3; }.task-page .drive-arrow { grid-column: 5; grid-row: 3; }.task-page .controller-node { grid-column: 6 / 7; grid-row: 3; }.task-page .motor-arrow { grid-column: 7; grid-row: 3; align-self: start; margin-top: 9px; }.task-page .motor-node { grid-column: 7 / 8; grid-row: 3; align-self: end; height: 65px; }
.task-page .compressor-node { grid-column: 2 / 3; grid-row: 5; }.task-page .ptc-node { grid-column: 3 / 4; grid-row: 5; }.task-page .battery12-node { grid-column: 5 / 6; grid-row: 5; }.task-page .low-voltage-node { grid-column: 6 / 8; grid-row: 5; }
.task-page .load-label { grid-column: 3; grid-row: 4; }.task-page .low-label { grid-column: 5; grid-row: 4; color: #5c7c8b; }

.task-page .power-on-head { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 18px; }
.task-page .key-switch { padding: 9px 12px; border-radius: 999px; color: white; background: var(--ui-primary-dark); font-weight: 800; }
.task-page .request-arrow { color: var(--ui-primary); font-size: .76rem; font-weight: 800; }
.task-page .circuit-loop { display: grid; grid-template-columns: 140px minmax(190px,1fr) 170px minmax(170px,.8fr); grid-template-rows: 75px 75px; gap: 10px; align-items: center; }
.task-page .circuit-node { min-height: 94px; padding: 14px; border-radius: 14px; background: #102a43; color: white; display: flex; align-items: center; justify-content: space-between; text-align: center; box-shadow: 0 8px 18px rgba(16,42,67,.16); }
.task-page .circuit-node b { font-size: .88rem; }.task-page .circuit-node span { color: #bfe7e5; font-size: .72rem; }
.task-page .power-battery { grid-column: 1; grid-row: 1 / 3; }.task-page .system-capacitor { grid-column: 3; grid-row: 1 / 3; flex-direction: column; justify-content: center; }
.task-page .circuit-path { display: flex; align-items: center; justify-content: center; gap: 8px; }
.task-page .positive-path { grid-column: 2; grid-row: 1; }.task-page .negative-path { grid-column: 4; grid-row: 1 / 3; }
.task-page .wire { flex: 1; height: 4px; border-radius: 4px; background: #8b63db; }
.task-page .switch-node { min-width: 105px; padding: 9px; border: 1px solid #bca9e8; border-radius: 10px; background: white; text-align: center; }
.task-page .switch-node i { display: block; width: 30px; height: 9px; margin: 0 auto 5px; border-top: 3px solid #8b63db; transform: rotate(-12deg); }
.task-page .switch-node b { font-size: .7rem; }
.task-page .precharge-branch { grid-column: 2; grid-row: 2; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; border: 1px dashed #cfbff2; border-radius: 12px; background: #f8f5ff; }
.task-page .precharge-branch b { font-size: .68rem; }.task-page .resistor-symbol { color: #d97e2e; font-size: 1.25rem; }
.task-page .circuit-branches { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin-top: 18px; }
.task-page .circuit-branches > div { padding: 12px; border: 1px solid var(--ui-line); border-radius: 11px; background: white; }
.task-page .circuit-branches span { display: block; color: var(--ui-primary); font-size: .64rem; font-weight: 800; }.task-page .circuit-branches b { display: block; margin: 4px 0; font-size: .76rem; }.task-page .circuit-branches small { color: var(--ui-muted); font-size: .66rem; line-height: 1.5; }
.task-page .principle-note { margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--ui-accent); border-radius: 7px; color: var(--ui-muted); background: #fff6eb; font-size: .75rem; }

.task-page .contactor-diagram { min-height: 360px; display: grid; place-items: center; }
.task-page .contactor-device { width: min(360px,75%); min-height: 230px; padding: 28px 35px 20px; border: 5px solid #1d2a35; border-radius: 20px 20px 30px 30px; color: white; background: linear-gradient(150deg,#344451,#101a22); box-shadow: 0 20px 30px rgba(16,42,67,.22); }
.task-page .main-terminals { display: flex; justify-content: space-between; margin-top: -52px; }
.task-page .terminal { text-align: center; }.task-page .terminal > span { width: 62px; height: 62px; display: grid; place-items: center; border: 8px solid #c8d0d4; border-radius: 50%; color: #19303b; background: #e9eff1; box-shadow: inset 0 0 0 4px #81919a; font-size: 1.2rem; font-weight: 900; }
.task-page .terminal small, .task-page .coil-terminals small { display: block; margin-top: 6px; color: #bfd0d8; font-size: .62rem; }
.task-page .device-label { margin: 35px auto 22px; padding: 12px; border-radius: 7px; color: #102a43; background: #eaf2f4; text-align: center; }.task-page .device-label b { display: block; }.task-page .device-label small { display: block; margin-top: 3px; color: #617988; }
.task-page .coil-terminals { display: flex; justify-content: center; gap: 45px; }.task-page .coil-terminals > div { text-align: center; }.task-page .coil-terminals span { width: 28px; height: 28px; display: grid; place-items: center; border: 4px solid #c8d0d4; border-radius: 50%; color: #102a43; background: #eef3f5; font-weight: 900; }
.task-page .connection-caption { position: absolute; top: 45px; color: var(--ui-muted); font-size: .78rem; font-weight: 700; }.task-page .connection-caption.left { left: 6%; }.task-page .connection-caption.right { right: 6%; }.task-page .connection-caption span { color: var(--ui-primary); letter-spacing: 2px; }
.task-page .meter-tip { position: absolute; right: 5%; bottom: 24px; display: flex; align-items: center; gap: 9px; max-width: 230px; padding: 10px; border: 1px solid var(--ui-line); border-radius: 12px; background: white; box-shadow: var(--ui-shadow-sm); }
.task-page .meter-tip > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--ui-primary); font-weight: 900; }.task-page .meter-tip b,.task-page .meter-tip small { display: block; }.task-page .meter-tip b { font-size: .72rem; }.task-page .meter-tip small { margin-top: 3px; color: var(--ui-muted); font-size: .62rem; line-height: 1.4; }

/* 电池一致性分析工具 */
body.battery-tool-page { background: #f4f8fa; padding: 24px; }
.battery-tool-page .container {
  border: 1px solid var(--ui-line);
  border-radius: 24px;
  box-shadow: var(--ui-shadow);
  padding: 30px;
}
.battery-tool-page h1 { color: var(--ui-ink); }
.battery-tool-page h1 small { background: var(--ui-primary-soft); color: var(--ui-primary-dark); }
.battery-tool-page .sub { color: var(--ui-muted); border-left-color: var(--ui-primary); }
.battery-tool-page .input-panel,
.battery-tool-page .chart-container,
.battery-tool-page .result-card,
.battery-tool-page .insight { border: 1px solid var(--ui-line); border-radius: 16px; box-shadow: none; }
.battery-tool-page .input-panel { background: #f8fbfc; }
.battery-tool-page .battery-table { border-radius: 12px; box-shadow: none; }
.battery-tool-page .battery-table th { background: #edf4f5; color: var(--ui-ink); }
.battery-tool-page .battery-table input { border-radius: 8px; }
.battery-tool-page button { background: var(--ui-primary); border-radius: 10px; }
.battery-tool-page .btn-outline { background: white; color: var(--ui-primary); border-color: var(--ui-primary); }
.battery-tool-page .threshold-row { background: #edf4f5; border-radius: 14px; }
.battery-tool-page .threshold-row input { border-radius: 8px; }

/* SOC 诊断看板 */
body.soc-page { background: #f4f8fa; color: var(--ui-ink); }
.soc-page .header h1 {
  color: var(--ui-ink);
  background: none;
  -webkit-text-fill-color: initial;
}
.soc-page .header h1 .badge { background: var(--ui-primary); -webkit-text-fill-color: #fff; }
.soc-page .filter-bar,
.soc-page .kpi-card,
.soc-page .chart-box,
.soc-page .table-section,
.soc-page .diagnosis-section {
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  box-shadow: var(--ui-shadow-sm);
}
.soc-page .header-actions .btn { border-radius: 10px; }
.soc-page .btn-diagnose { background: var(--ui-primary); }
.soc-page .filter-bar .btn-group button { border-radius: 9px; }
.soc-page .filter-bar .btn-group button.active,
.soc-page .filter-bar .btn-group button.active-all { background: var(--ui-primary); border-color: var(--ui-primary); }
.soc-page .kpi-card { overflow: hidden; }
.soc-page .chart-container { border-radius: 12px; }

/* 个性化学习路径大屏：取消固定画布，适配常见屏幕 */
body.learning-path-page { background: #f4f8fa; }
.learning-path-page .page {
  width: min(1600px, 100%);
  min-height: 100vh;
  height: auto;
  padding: 24px;
  background:
    radial-gradient(circle at 12% 8%, rgba(8,126,139,.10), transparent 24%),
    #f4f8fa;
  overflow: visible;
}
.learning-path-page .topbar,
.learning-path-page .card {
  border-color: var(--ui-line);
  border-radius: 18px;
  box-shadow: var(--ui-shadow-sm);
}
.learning-path-page .logo { background: linear-gradient(135deg, var(--ui-primary-dark), var(--ui-primary)); }
.learning-path-page .title-wrap h1,
.learning-path-page .card-head,
.learning-path-page .lesson-title { color: var(--ui-ink); }
.learning-path-page .user-pill,
.learning-path-page .lesson-badge,
.learning-path-page .icon { background: var(--ui-primary-soft); }
.learning-path-page .card-head { background: #f8fbfc; }
.learning-path-page .dashboard { grid-template-columns: minmax(280px,360px) minmax(420px,1fr) minmax(300px,390px); }

@media (max-width: 1100px) {
  .learning-path-page .page { overflow: visible; }
  .learning-path-page .dashboard { grid-template-columns: 1fr 1fr; }
  .learning-path-page .card.main { grid-column: 1 / -1; grid-row: 1; }
}

@media (max-width: 720px) {
  body { padding: 14px; }
  .portal-page .platform-container { padding: 36px 20px 28px; border-radius: 22px; }
  .portal-page .card { padding: 24px; }
  .portal-page .footer-note { padding: 8px 0; line-height: 1.6; }
  .login-page .login-box { padding: 34px 24px 28px; border-radius: 20px; }
  .student-home-page .header { align-items: flex-start; border-radius: 14px; gap: 12px; }
  .student-home-page .user-info { line-height: 1.7; }
  .subtasks-page .nav-bar, .task-page .nav-bar { align-items: flex-start; }
  .subtasks-page .project-title, .task-page .task-title { width: 100%; order: -1; }
  .task-page .tabs { width: 100%; overflow-x: auto; }
  .task-page .tab { flex: 1 0 auto; padding: .6rem 1rem; }
  .task-page .worksheet-sheet { padding: 16px 12px; }
  .task-page .worksheet-sheet-head { flex-direction: column; gap: 10px; }
  .task-page .worksheet-fields-grid { grid-template-columns: 1fr; }
  .task-page .worksheet-reference { margin: 14px auto; padding: 3px; }
  .task-page .worksheet-figure { margin: 14px 0; padding: 6px; }
  .task-page .worksheet-figure:hover img { transform: none; box-shadow: none; }
  .task-page .worksheet-submit-row { justify-content: stretch; }
  .task-page .worksheet-save-btn { width: 100%; }
  .task-page .native-diagram { padding: 16px 12px; }
  .task-page .hv-distribution-diagram { min-height: 0; grid-template-columns: 1fr; grid-template-rows: auto; gap: 8px; }
  .task-page .hv-distribution-diagram > * { grid-column: 1 !important; grid-row: auto !important; }
  .task-page .hv-distribution-diagram .flow-arrow, .task-page .hv-distribution-diagram .branch-label { padding: 3px; }
  .task-page .diagram-legend { position: static; flex-wrap: wrap; order: 99; margin-top: 8px; }
  .task-page .power-on-head { flex-wrap: wrap; text-align: center; }
  .task-page .circuit-loop { grid-template-columns: 1fr; grid-template-rows: auto; }
  .task-page .circuit-loop > * { grid-column: 1 !important; grid-row: auto !important; }
  .task-page .circuit-branches { grid-template-columns: 1fr 1fr; }
  .task-page .negative-path { padding: 8px 0; }
  .task-page .contactor-diagram { min-height: 0; display: flex; flex-direction: column; gap: 14px; }
  .task-page .connection-caption, .task-page .meter-tip { position: static; align-self: stretch; }
  .task-page .contactor-device { width: 100%; margin-top: 24px; padding-left: 20px; padding-right: 20px; }
  .battery-tool-page .container { padding: 20px 14px; }
  .battery-tool-page .chart-panel { min-width: 0; width: 100%; }
  .soc-page .header { align-items: flex-start; }
  .soc-page .header-actions { width: 100%; }
  .learning-path-page .page { padding: 12px; }
  .learning-path-page .topbar { height: auto; padding: 16px; align-items: flex-start; gap: 14px; }
  .learning-path-page .title-wrap h1 { font-size: 22px; }
  .learning-path-page .dashboard { grid-template-columns: 1fr; }
  .learning-path-page .card.main { grid-column: auto; grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}