/*
 * 奇妙编程岛清爽主题
 * 仅复用通用的学习平台信息层级，不复制外部站点的品牌、素材或页面实现。
 */
:root {
  color-scheme: light;
  --fresh-bg: #f4f7fb;
  --fresh-surface: #ffffff;
  --fresh-surface-soft: #f8faff;
  --fresh-border: #e5eaf1;
  --fresh-text: #1d2939;
  --fresh-muted: #667085;
  --fresh-faint: #98a2b3;
  --fresh-primary: #3478f6;
  --fresh-primary-dark: #245fc7;
  --fresh-primary-soft: #edf4ff;
  --fresh-success: #16a36a;
  --fresh-warning: #f59e0b;
  --fresh-danger: #e5484d;
  --fresh-shadow: 0 10px 30px rgba(30, 52, 84, .07);
  --fresh-shadow-hover: 0 16px 38px rgba(30, 52, 84, .11);
  --ink: var(--fresh-text);
  --text: var(--fresh-text);
  --muted: var(--fresh-muted);
  --faint: var(--fresh-faint);
  --night: var(--fresh-bg);
  --bg: var(--fresh-bg);
  --panel: var(--fresh-surface);
  --panel-strong: var(--fresh-surface);
  --line: var(--fresh-border);
  --cyan: var(--fresh-primary);
  --cyan-soft: var(--fresh-primary-dark);
  --green: var(--fresh-success);
  --purple: #7c62d3;
  --orange: var(--fresh-warning);
  --gold: var(--fresh-warning);
  --blue: var(--fresh-primary);
  --red: var(--fresh-danger);
  --shadow: var(--fresh-shadow);
}
code, pre { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }

body {
  color: var(--fresh-text);
  background: var(--fresh-bg);
  -webkit-font-smoothing: antialiased;
}

/* 首页 */
.site-atmosphere,
.practice-grid,
.practice-glow,
.hero__rail,
.tech-orbit,
.floating-chip,
.course-world__glow,
.closing-panel__grid { display: none; }

.portal-header {
  border-bottom: 1px solid var(--fresh-border);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 3px 16px rgba(39, 55, 78, .04);
  backdrop-filter: blur(16px);
}
.portal-header.is-scrolled { border-color: var(--fresh-border); background: rgba(255, 255, 255, .96); }
.portal-header__inner { height: 68px; }
.portal-brand__mark,
.practice-brand__mark {
  border: 0;
  border-radius: 11px;
  background: #edf9fb;
  box-shadow: none;
}
.portal-brand__copy strong,
.practice-brand strong { color: var(--fresh-text); letter-spacing: .02em; }
.portal-brand__copy small,
.practice-brand small { color: #7f8da3; letter-spacing: .12em; }
.portal-navigation a,
.portal-navigation button {
  border-radius: 8px;
  color: #667085;
  transition: color 160ms ease, background 160ms ease;
}
.portal-navigation a::after,
.portal-navigation button::after { display: none; }
.portal-navigation a:hover,
.portal-navigation button:hover,
.portal-navigation .is-active { color: var(--fresh-primary); background: var(--fresh-primary-soft); }
.header-login { color: #475467; }
.header-start {
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: var(--fresh-primary);
  box-shadow: 0 7px 18px rgba(52, 120, 246, .2);
}
.header-start:hover { color: #fff; border-color: transparent; background: var(--fresh-primary-dark); }

.hero {
  min-height: 0;
  padding: 76px 0 16px;
  border: 0;
  overflow: visible;
}
.hero::before { display: none; }
.hero__inner {
  grid-template-columns: minmax(0, 1.15fr) minmax(380px, .75fr);
  gap: 42px;
  padding: 30px 42px;
  border: 1px solid #e4ebf6;
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 10%, rgba(91, 190, 255, .18), transparent 30%),
    linear-gradient(135deg, #ffffff 8%, #f5f9ff 58%, #eef7ff 100%);
  box-shadow: 0 18px 50px rgba(32, 67, 113, .08);
}
.hero__copy { padding-top: 0; }
.hero__eyebrow { margin-bottom: 14px; }
.hero__eyebrow > span { color: var(--fresh-primary); letter-spacing: .08em; }
.hero__eyebrow > span i { border: 0; background: var(--fresh-primary); box-shadow: none; }
.hero__eyebrow em { border-color: #d9e4f2; border-radius: 999px; color: #77869b; background: rgba(255, 255, 255, .74); }
.hero h1 {
  color: #172033;
  font-size: clamp(44px, 4.6vw, 58px);
  line-height: 1.1;
  letter-spacing: -.045em;
}
.hero h1 span { color: var(--fresh-primary); background: none; -webkit-text-fill-color: currentColor; }
.hero h1 span::after { display: none; }
.hero__copy > p { margin-top: 16px; color: #5f6f84; font-size: 17px; line-height: 1.75; }
.hero__actions { gap: 12px; margin-top: 20px; }
.primary-action {
  min-width: 220px;
  padding: 12px 17px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: var(--fresh-primary);
  box-shadow: 0 10px 22px rgba(52, 120, 246, .2);
}
.primary-action:hover { color: #fff; background: var(--fresh-primary-dark); box-shadow: 0 12px 26px rgba(52, 120, 246, .25); }
.primary-action__icon { color: #fff; background: rgba(255, 255, 255, .18); box-shadow: none; }
.primary-action small { color: rgba(255, 255, 255, .78); }
.secondary-action {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  border: 1px solid #d6deea;
  border-radius: 10px;
  color: #344054;
  background: #fff;
  cursor: pointer;
}
.secondary-action i { width: auto; height: auto; border: 0; color: var(--fresh-primary); }
.secondary-action:hover { border-color: #aac4f7; color: var(--fresh-primary); }
.secondary-action:hover i { transform: translateX(2px); }
.hero-project-link { padding: 12px 4px; color: var(--fresh-primary); font-size: 15px; }
.hero__metrics { gap: 10px; margin-top: 20px; }
.hero__metrics div {
  min-width: 0;
  padding: 9px 13px;
  border: 1px solid #e1e8f2;
  border-radius: 10px;
  background: rgba(255, 255, 255, .7);
}
.hero__metrics div + div::before { display: none; }
.hero__metrics dt { color: #27364b; font-size: 20px; }
.hero__metrics dd { color: #77869a; font-size: 12px; }
.hero__visual { min-height: 340px; }
.hero__visual::before { width: 360px; height: 360px; border: 0; background: rgba(78, 155, 255, .08); box-shadow: none; }
.code-window {
  width: min(100%, 440px);
  border: 0;
  border-radius: 16px;
  background: #101828;
  box-shadow: 0 24px 48px rgba(26, 44, 72, .2);
  transform: none;
}
.code-window::before { display: none; }
.code-window__bar { height: 44px; border-color: rgba(255, 255, 255, .08); color: #98a2b3; }
.code-window__body { padding: 15px 0 12px; }
.code-line { min-height: 27px; }
.code-window__run { min-height: 94px; border-color: rgba(255, 255, 255, .08); background: #0b1220; }
.terminal-caret { background: #7dd3fc; }
.run-status { border-color: rgba(74, 222, 128, .3); color: #6ee7a8; background: rgba(34, 197, 94, .08); }

.quick-access {
  width: min(calc(100% - 48px), var(--content));
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 auto;
}
.quick-access__item {
  min-width: 0;
  min-height: 126px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: start;
  gap: 13px;
  padding: 19px;
  border: 1px solid var(--fresh-border);
  border-radius: 16px;
  color: inherit;
  background: var(--fresh-surface);
  box-shadow: var(--fresh-shadow);
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.quick-access__item:hover { transform: translateY(-3px); border-color: #c8d8ee; box-shadow: var(--fresh-shadow-hover); }
.quick-access__item--primary { border-color: #cfe0ff; }
.quick-access__item--planned { cursor: default; box-shadow: none; }
.quick-access__item--planned:hover { transform: none; border-color: var(--fresh-border); box-shadow: none; }
.quick-access__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: var(--fresh-primary); background: var(--fresh-primary-soft); font: 700 13px Consolas, monospace; }
.quick-access__item > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.quick-access__item small { color: var(--fresh-primary); font-size: 12px; }
.quick-access__item strong { margin-top: 3px; color: #27364b; font-size: 17px; }
.quick-access__item em { margin-top: 5px; color: #7b889b; font-size: 13px; font-style: normal; line-height: 1.55; }
.quick-access__item > b { color: #9aabc0; font-weight: 400; }

.system-section { padding: 66px 0; }
.section-heading { margin-bottom: 26px; }
.section-index { margin-bottom: 9px; color: var(--fresh-primary); letter-spacing: .12em; }
.section-heading h2,
.capability-heading h2 { color: #1d2939; font-size: clamp(29px, 3.2vw, 40px); }
.section-heading > p,
.capability-heading p { color: var(--fresh-muted); line-height: 1.8; }
.courses-section { padding-bottom: 54px; }
.course-worlds { gap: 18px; }
.course-world {
  min-height: 430px;
  border: 1px solid var(--fresh-border);
  border-radius: 20px;
  background: var(--fresh-surface);
  box-shadow: var(--fresh-shadow);
}
.course-world:hover { border-color: #c9d8ec; box-shadow: var(--fresh-shadow-hover); }
.course-world::before,
.course-world::after,
.capability-card::before { display: none; }
.course-world__number { color: #98a2b3; }
.status-pill { border-color: #e3e8ef; border-radius: 999px; color: #7a8798; background: #f8fafc; }
.status-pill--building { border-color: #cfe0ff; color: var(--fresh-primary); background: var(--fresh-primary-soft); }
.status-pill--building i { background: var(--fresh-primary); box-shadow: none; }
.course-world__symbol { top: 68px; color: #eaf2ff; opacity: 1; }
.course-world__symbol b { color: #a6c8ff; }
.course-world__symbol i { border-color: #e5efff; box-shadow: none; }
.course-world__tag { color: #7b8ba1; }
.course-world h3 { color: #1f2d3d; }
.course-world--scratch h3 { color: #554780; }
.course-world p { color: var(--fresh-muted); }
.course-world li { border-color: #e8ecf2; border-radius: 7px; color: #65758b; background: #f8fafc; }
.course-world li span { color: var(--fresh-primary); }
.course-main-action,
.course-disabled-action {
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: var(--fresh-primary);
}
.course-world__actions > a { color: var(--fresh-primary); }
.course-world__actions > a:hover { color: var(--fresh-primary-dark); }
.course-disabled-action,
.course-world--scratch .course-disabled-action { border: 1px solid #ddd6f5; color: #6d56bd; background: #f4f1fd; }
.scratch-stage::before { border-color: #e4def8; }
.scratch-block { box-shadow: 0 8px 18px rgba(61, 50, 92, .1); }
.live-course {
  border-color: #d8eadf;
  border-radius: 18px;
  background: #f5fcf8;
  box-shadow: none;
}
.live-course::after { display: none; }
.live-course__visual { border-color: #d8eadf; }
.live-course h3 { color: #1f2d3d; }
.live-course p { color: var(--fresh-muted); }
.live-course__action { border-color: #bce0cc; border-radius: 10px; color: #16754e; background: #fff; }

.path-section { width: 100%; padding-right: max(24px, calc((100% - var(--content)) / 2)); padding-left: max(24px, calc((100% - var(--content)) / 2)); border: 0; background: #eef4fb; }
.learning-path { gap: 14px; padding-top: 0; }
.path-line { display: none; }
.path-step {
  min-height: 244px;
  padding: 24px 22px;
  border: 1px solid #e0e7f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(43, 64, 92, .05);
}
.path-step__index { color: #a4afbd; }
.path-step__icon { margin: 0 0 18px; border-color: #d9e2ee; border-radius: 11px; color: #6d7c91; background: #f5f7fa; }
.path-step.is-current { border-color: #b9d2ff; }
.path-step.is-current .path-step__icon { border-color: #c6d9ff; color: var(--fresh-primary); background: var(--fresh-primary-soft); box-shadow: none; }
.path-step small { color: #8c9aae; }
.path-step h3 { color: #27364b; }
.path-step p { color: var(--fresh-muted); }
.path-step em,
.path-step.is-current em { border-radius: 7px; color: #6d7c91; background: #f3f6fa; }
.path-step.is-current em { color: var(--fresh-primary); background: var(--fresh-primary-soft); }

.capability-section { display: block; }
.capability-heading { position: static; max-width: 720px; margin-bottom: 28px; }
.capability-heading h2 br { display: none; }
.capability-heading h2 span { color: var(--fresh-primary); }
.capability-heading p { margin-top: 14px; }
.capability-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.capability-card,
.capability-card--wide,
.capability-card--progress {
  grid-column: auto;
  min-height: 260px;
  padding: 22px;
  border: 1px solid var(--fresh-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--fresh-shadow);
}
.capability-card__code { color: #9aa7b8; }
.capability-card h3 { color: #27364b; }
.capability-card p { color: var(--fresh-muted); }
.simple-icon { border: 0; border-radius: 10px; color: var(--fresh-primary); background: var(--fresh-primary-soft); }
.module-preview span,
.learning-summary__numbers div { border-color: #e8edf3; background: #f8fafc; }
.module-preview i { color: var(--fresh-primary); }
.module-preview b { color: #475467; }
.module-preview em { color: #8a97a9; }
.judge-preview,
.sync-preview { border-color: #e0e7ef; border-radius: 9px; color: #475467; background: #f8fafc; }
.judge-preview span { color: var(--fresh-success); }
.progress-preview span { color: #8491a4; }
.progress-preview strong { color: #344054; }
.progress-preview small { color: #8491a4; }
.progress-chart { border-color: #e4e9f0; }
.progress-chart i { background: linear-gradient(to top, #cfe0ff, #5d96fa); box-shadow: none; }

.closing-panel {
  border-color: #cfddf1;
  border-radius: 20px;
  background: linear-gradient(120deg, #eef5ff, #f8faff);
}
.closing-panel::before { color: rgba(52, 120, 246, .05); }
.closing-panel h2 { color: #1d2939; }
.closing-panel p { color: var(--fresh-muted); }
.closing-panel > a { border: 0; border-radius: 10px; color: #fff; background: var(--fresh-primary); }
.closing-panel > a small { color: rgba(255,255,255,.75); }

.portal-footer { margin-top: 10px; border-color: var(--fresh-border); background: #fff; }
.portal-footer__main { padding-top: 38px; }
.portal-footer__main > p,
.portal-footer nav a,
.portal-footer nav button { color: #667085; }
.portal-footer nav a:hover,
.portal-footer nav button:hover { color: var(--fresh-primary); }
.portal-footer__records { border-color: #edf0f4; color: #8591a2; }

/* 首页弹层 */
.system-modal__backdrop,
.account-modal__backdrop { background: rgba(31, 41, 55, .42); backdrop-filter: blur(5px); }
.system-modal__panel,
.learning-drawer,
.account-panel {
  border-color: #dfe5ed;
  border-radius: 18px;
  color: var(--fresh-text);
  background: #fff;
  box-shadow: 0 28px 80px rgba(30, 48, 75, .2);
}
.system-modal__panel::before,
.learning-drawer::before,
.account-panel::before { display: none; }
.system-modal__heading,
.learning-drawer__heading,
.account-panel__heading { border-color: #e7ebf1; }
.system-modal__heading span,
.learning-drawer__heading span,
.account-panel__heading span { color: var(--fresh-primary); }
.system-modal__heading h2,
.learning-drawer__heading h2,
.account-panel__heading h2 { color: var(--fresh-text); }
.system-modal__heading p { color: var(--fresh-muted); }
.system-modal__close,
.account-panel__close { border-color: #dfe5ed; border-radius: 9px; color: #667085; background: #f8fafc; }
.roadmap-level {
  border-color: #e3e8ef;
  border-radius: 14px;
  background: #f8fafc;
}
.roadmap-level.is-next { border-color: #bcd3ff; background: #f1f6ff; box-shadow: none; }
.roadmap-level > header span,
.roadmap-level > header em,
.roadmap-level p,
.roadmap-level li { color: #667085; }
.roadmap-level > header em { border-color: #e0e5ec; border-radius: 999px; background: #fff; }
.roadmap-level.is-next > header em { border-color: #c8d9fa; color: var(--fresh-primary); background: #fff; }
.roadmap-level__mark { color: #e2e8f0; }
.roadmap-level.is-next .roadmap-level__mark { color: #a9c8ff; text-shadow: none; }
.roadmap-level h3 { color: #344054; }
.roadmap-level li { border-radius: 6px; background: #fff; }
.roadmap-level.is-next li::before { background: var(--fresh-primary); box-shadow: none; }
.roadmap-footer > div span { color: #7d899a; }
.roadmap-footer > div strong { color: #344054; }
.roadmap-footer a { border-color: #c8d9fa; border-radius: 9px; color: var(--fresh-primary); background: #f4f8ff; }
.local-data-notice { border-color: #f1d8aa; border-radius: 10px; background: #fffaf0; }
.local-data-notice p { color: #8a7653; }
.local-data-notice strong { color: #8a6425; }
.learning-progress-ring { background: conic-gradient(var(--fresh-primary) var(--ring-progress), #e7edf5 0); box-shadow: none; }
.learning-progress-ring::before { background: #fff; box-shadow: none; }
.learning-summary__numbers strong { color: #344054; }
.learning-summary__numbers span { color: #7f8c9e; }
.learning-current-course,
.learning-next-step { border-color: #e3e8ef; border-radius: 12px; background: #f8fafc; }
.learning-current-course > header span,
.learning-current-course__main p,
.learning-next-step p { color: #667085; }
.learning-current-course__main h3,
.learning-next-step h3 { color: #344054; }
.learning-course-code { border-color: #cfe0ff; border-radius: 10px; color: var(--fresh-primary); background: var(--fresh-primary-soft); }
.learning-current-course > a { border-color: #cfe0ff; border-radius: 9px; color: var(--fresh-primary); background: #fff; }
.portal-toast { border-color: #cfe0ff; border-radius: 12px; background: #fff; box-shadow: var(--fresh-shadow-hover); }
.portal-toast > span { border-color: #d8e5fb; border-radius: 9px; color: var(--fresh-primary); }
.portal-toast strong { color: #344054; }
.portal-toast p { color: #667085; }

/* 账号中心 */
.account-mode-tabs { border-color: #e3e8ef; background: #f5f7fa; }
.account-mode-tabs button { color: #667085; }
.account-mode-tabs button.is-active { color: var(--fresh-primary); background: #fff; box-shadow: 0 1px 4px rgba(30, 45, 68, .08); }
.account-wechat-entry { border-color: #ccebd8; background: #f2fbf6; }
.account-wechat-mark { color: #fff; background: #22b573; box-shadow: none; }
.account-wechat-entry strong { color: #22543d; }
.account-wechat-entry p { color: #5f7f6f; }
.account-wechat-entry button { border-color: #a8dfbf; color: #16754e; background: #fff; }
.account-divider { color: #98a2b3; }
.account-divider::before { background: #e6eaf0; }
.account-divider span { background: #fff; }
.account-form label > span,
.account-password-setup label { color: #475467; }
.account-form input,
.account-password-setup input,
.account-delete-confirm input {
  border-color: #d9e0e8;
  color: #1d2939;
  background: #fff;
}
.account-form input::placeholder { color: #a3adba; }
.account-form input:focus,
.account-password-setup input:focus { border-color: #8cb4ff; box-shadow: 0 0 0 3px rgba(52,120,246,.1); }
.account-verification button,
.account-password-setup-verification > button { border-color: #cfe0ff; color: var(--fresh-primary); background: #f4f8ff; }
.account-form-message,
.account-auth-note { color: #7b8798; }
.account-form-message[data-state="success"] { color: var(--fresh-success); }
.account-form-message[data-state="pending"] { color: var(--fresh-primary); }
.account-primary-button { border: 0; color: #fff; background: var(--fresh-primary); }
.account-avatar { border-color: #cfe0ff; color: var(--fresh-primary); background: var(--fresh-primary-soft); box-shadow: none; }
.account-connected { color: var(--fresh-success); }
.account-connected i { background: var(--fresh-success); box-shadow: none; }
.account-view--profile h3 { color: var(--fresh-text); }
.account-view--profile > p,
.account-source-list span,
.account-profile-grid dd,
.account-id-row { color: #667085; }
.account-source-list span { border-color: #e2e7ed; }
.account-source-list span.is-active { border-color: #bfe5cf; color: #16754e; background: #f3fbf6; }
.account-profile-grid div,
.account-id-row { border-color: #e5e9ef; background: #f8fafc; }
.account-profile-grid dt { color: #344054; }
.account-id-row code { color: var(--fresh-primary); }
.account-view--profile .account-sync-note { border-color: #cfe7d9; color: #527464; background: #f3faf6; }
.account-password-setup-open { border-color: #cfe0ff; color: var(--fresh-primary); background: #f3f7ff; }
.account-password-setup { border-color: #cfe0ff; background: #f7faff; }
.account-password-setup > strong { color: #344054; }
.account-password-setup > p { color: #667085; }
.account-password-setup-actions button { border-color: #dde3eb; color: #667085; background: #fff; }
.account-password-setup-actions button:last-child { border-color: #b9d1ff; color: var(--fresh-primary); background: #edf4ff; }
.account-wechat-bind { border-color: #bfe5cf; color: #16754e; background: #f1faf5; }
.account-logout-button { border-color: #e4e8ee; color: #667085; background: #f8fafc; }
.account-delete-open { color: #98a2b3; }
.account-delete-confirm { border-color: #f3c5c7; background: #fff7f7; }
.account-delete-confirm > strong { color: #c93339; }
.account-delete-confirm > p,
.account-delete-confirm label { color: #8a6568; }
.account-delete-confirm > div button { border-color: #e1e5eb; color: #667085; background: #fff; }
.account-delete-confirm > div button:last-child { border-color: #efb4b7; color: #c93339; background: #fff; }

/* 题库 */
.practice-header {
  min-height: 68px;
  border-color: var(--fresh-border);
  background: rgba(255,255,255,.95);
  box-shadow: 0 3px 16px rgba(39, 55, 78, .04);
}
.practice-header nav a { color: #667085; }
.practice-header nav a:hover,
.practice-header nav a.is-active { color: var(--fresh-primary); background: var(--fresh-primary-soft); }
.practice-header__account > button { border-color: #cfe0ff; color: var(--fresh-primary); background: #f4f8ff; }
.judge-status { color: #667085; }
.judge-status i { box-shadow: none; }
.practice-header + main,
.practice-footer { max-width: 1880px; }
.practice-hero {
  align-items: center;
  margin: 28px 0 38px;
  padding: 35px 38px;
  border: 1px solid #dfE8f4;
  border-radius: 20px;
  background: linear-gradient(135deg, #fff, #f2f7ff);
  box-shadow: var(--fresh-shadow);
}
.eyebrow,
.section-heading span,
.workspace-heading > div > span { color: var(--fresh-primary); letter-spacing: .1em; }
.practice-hero h1 { margin: 7px 0 10px; color: #1d2939; font-size: clamp(36px, 4vw, 54px); }
.practice-hero > div p { color: #667085; font-size: 16px; }
.practice-hero aside { padding: 15px 19px; border-color: #dfe7f1; background: #fff; box-shadow: none; }
.practice-hero aside strong { color: var(--fresh-primary); }
.practice-hero aside small { color: #758399; }
.practice-card-grid { gap: 14px; }
.practice-card {
  min-height: 196px;
  padding: 21px;
  border-color: var(--fresh-border);
  background: #fff;
  box-shadow: var(--fresh-shadow);
}
.practice-card::before { display: none; }
.practice-card::after { left: 21px; right: 21px; height: 3px; border-radius: 999px; opacity: .32; }
.practice-card:hover,
.practice-card:focus-visible { transform: translateY(-3px); box-shadow: var(--fresh-shadow-hover); }
.practice-card__mark { border-color: color-mix(in srgb, var(--tone) 24%, #e5eaf1); background: color-mix(in srgb, var(--tone) 8%, #fff); }
.practice-card h3 { margin-top: 18px; color: #27364b; }
.practice-card p { color: #667085; }
.workspace-heading,
.custom-filter,
.question-sidebar,
.question-stage { border-color: var(--fresh-border); background: #fff; box-shadow: var(--fresh-shadow); }
.workspace-heading h2 { color: #1d2939; }
.workspace-heading p { color: #667085; }
.workspace-heading button,
#backToSections { border-color: #dce3eb; color: #475467; background: #f8fafc; }
.custom-filter button { color: #667085; }
.custom-filter button.is-active { color: #fff; background: var(--fresh-primary); }
.question-sidebar header strong { color: var(--fresh-success); }
.question-list button { color: #667085; background: #f8fafc; }
.question-list button:hover { color: #344054; background: #f1f5f9; }
.question-list button.is-active { color: #27364b; border-color: #bfd2f7; background: #edf4ff; }
.question-list__number { border-color: #dce3eb; color: #667085; background: #fff; }
.question-list__state { border-color: #aeb8c5; }
.question-list button.is-complete .question-list__state { border-color: var(--fresh-success); background: var(--fresh-success); box-shadow: none; }
.progress-track { background: #e9edf2; }
.progress-track i { background: var(--fresh-primary); }
.question-sidebar > p { color: #7d8999; }
.question-header { border-color: #e6eaf0; }
.question-meta span { border-color: #e0e5ec; color: #667085; background: #f8fafc; }
.question-meta span:first-child { border-color: #cfe0ff; color: var(--fresh-primary); background: #edf4ff; }
.question-header h3,
.question-statement h4,
.statement-block h4,
.samples h4 { color: #1d2939; }
.question-statement,
.statement-block p,
.problem-detail > p { color: #475467; }
.option-button { border-color: #dfe5ec; color: #475467; background: #fff; }
.option-button:hover { border-color: #bcd0f4; background: #f7faff; }
.option-button.is-selected { border-color: #8eb3f7; color: #27364b; background: #edf4ff; }
.option-button b { color: var(--fresh-primary); }
.submit-answer,
.submit-code { color: #fff; background: var(--fresh-primary); box-shadow: 0 8px 18px rgba(52,120,246,.16); }
.question-navigation button { border-color: #dde3ea; color: #667085; background: #fff; }
.question-navigation button:hover:not(:disabled) { border-color: #bcd0f4; color: var(--fresh-primary); }
.dictation-entry label { color: #475467; }
.dictation-entry input { border-color: #d9e0e8; color: #1d2939; background: #fff; }
.feedback-panel { border-color: #e0e6ed; background: #f8fafc; }
.feedback-panel.is-correct { border-color: #bde4cf; background: #f2fbf6; }
.feedback-panel.is-wrong { border-color: #f0c3c5; background: #fff6f6; }
.feedback-panel p,
.judge-output p { color: #475467; }
.code-workbench { border-color: #dce3eb; background: #f6f8fb; }
.code-workbench header { color: #667085; }
.code-workbench textarea { border-color: #26374d; color: #eaf2ff; background: #101828; }
.judge-output { border-color: #dde4ec; background: #f8fafc; }
.judge-output.is-accepted { border-color: #bde4cf; background: #f2fbf6; }
.judge-output.is-error { border-color: #f0c3c5; background: #fff6f6; }
.practice-footer { color: #7c899b; border-color: #e2e7ee; }
.practice-footer strong { color: #475467; }
.practice-footer a:hover { color: var(--fresh-primary); }
.practice-toast { color: #fff; background: var(--fresh-primary); }

/* 法律文件 */
.legal-header { border-color: var(--fresh-border); background: rgba(255,255,255,.95); box-shadow: 0 3px 16px rgba(39,55,78,.04); }
.legal-brand strong { color: #1d2939; }
.legal-brand small { color: #8290a4; }
.legal-header nav { color: #667085; }
.legal-header nav a:hover,
.legal-header nav a[aria-current="page"] { color: var(--fresh-primary); }
.legal-heading { border-color: #dfe5ec; }
.legal-heading span { color: var(--fresh-primary); }
.legal-heading h1 { color: #1d2939; }
.legal-heading p { color: #667085; }
.legal-updated { border-color: #dce3eb; color: #778498; background: #fff; }
.legal-summary { border-color: #cfe0ff; background: #edf4ff; }
.legal-summary--warning { border-color: #f1d7a7; background: #fff9ee; }
.legal-summary strong { color: #244a85; }
.legal-summary p { color: #53657d; }
.legal-summary a,
.legal-section a { color: var(--fresh-primary); }
.legal-section { border-color: var(--fresh-border); background: #fff; box-shadow: var(--fresh-shadow); }
.legal-section h2 { color: #27364b; }
.legal-section h3 { color: #344054; }
.legal-section p,
.legal-section li { color: #5f6f82; }
.legal-section code { border-color: #d3e1f7; color: #245fc7; background: #f2f7ff; }
.legal-emphasis { border-color: #f0ad42; background: #fff8ec; }
.legal-table-wrap { border-color: #e0e6ed; }
.legal-table th,
.legal-table td { border-color: #e5e9ef; }
.legal-table th { color: #344054; background: #f3f6fa; }
.legal-table td { color: #5f6f82; background: #fff; }
.legal-notice { border-color: #cde7d8; background: #f5fbf7; }
.legal-warning { border-color: #efd6aa; background: #fffaf1; }
.legal-footer { border-color: #e1e6ed; background: #fff; }
.legal-footer__inner { color: #7b8798; }
.legal-footer__owner { color: #667085; }
.legal-footer__filings { border-color: #edf0f4; }

/* 微信备用登录页 */
body:has(.scan-fallback) { color: var(--fresh-text); background: var(--fresh-bg); }
.scan-fallback__eyebrow { color: var(--fresh-primary); }
.scan-fallback__mark { border: 0; background: #eaf8fb; box-shadow: none; }
.scan-fallback h1 { color: #1d2939; }
.scan-fallback__domain { color: #667085; }
.scan-fallback__domain i { background: var(--fresh-success); box-shadow: none; }
.scan-fallback__card { border-color: var(--fresh-border); background: #fff; box-shadow: var(--fresh-shadow); }
.scan-fallback__card > p { color: #667085; }
.scan-fallback__card button { border-color: #cfe0ff; color: #27364b; background: #f3f7ff; }
.scan-fallback__card strong { color: var(--fresh-primary); }
.scan-fallback__card small { color: #7b8798; }
.scan-fallback__warning { color: #9a6b1b !important; }
.scan-fallback > a { color: var(--fresh-primary); }

@media (max-width: 1050px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) 390px; gap: 28px; padding: 42px; }
  .quick-access { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .portal-header__inner { height: 66px; }
  .mobile-nav-button { border-color: #dce3eb; border-radius: 9px; background: #f8fafc; }
  .mobile-nav-button span { background: #667085; }
  .portal-navigation { border-color: #e3e8ef; background: rgba(255,255,255,.98); box-shadow: 0 14px 24px rgba(30,48,75,.08); }
  .portal-navigation .mobile-account-entry { color: var(--fresh-primary); }
  .hero { padding: 86px 0 20px; }
  .hero__inner { grid-template-columns: 1fr; gap: 28px; padding: 34px; }
  .hero__copy { text-align: left; }
  .hero__eyebrow,
  .hero__actions,
  .hero__metrics { justify-content: flex-start; }
  .hero__copy > p { margin-left: 0; }
  .hero__visual { min-height: 330px; }
  .system-section { padding: 54px 0; }
  .course-worlds { grid-template-columns: 1fr; }
  .learning-path { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .path-step__icon { margin-top: 0; }
  .practice-hero { grid-template-columns: 1fr; gap: 22px; padding: 30px; }
  .practice-hero aside { width: 100%; justify-content: center; }
}

@media (max-width: 560px) {
  .portal-header__inner { width: calc(100% - 24px); }
  .hero { padding-top: 78px; }
  .hero__inner { width: calc(100% - 24px); padding: 27px 20px 22px; border-radius: 18px; }
  .hero__eyebrow { justify-content: flex-start; margin-bottom: 14px; }
  .hero h1 { font-size: clamp(38px, 11vw, 48px); }
  .hero__copy > p { font-size: 16px; }
  .hero__actions { align-items: stretch; flex-direction: column; }
  .primary-action { min-width: 0; justify-content: flex-start; }
  .secondary-action { justify-content: center; }
  .hero__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .hero__metrics div { padding: 8px 6px; text-align: center; }
  .hero__metrics dt { font-size: 17px; }
  .hero__metrics dd { font-size: 11px; line-height: 1.4; }
  .hero__visual { display: none; }
  .code-window { width: 100%; }
  .code-line { font-size: 11px; }
  .quick-access { width: calc(100% - 24px); grid-template-columns: 1fr; gap: 10px; }
  .quick-access__item { min-height: 108px; padding: 16px; }
  .system-section { width: calc(100% - 24px); padding: 48px 0; }
  .section-heading { gap: 10px; }
  .section-heading > p { font-size: 15px; }
  .course-world,
  .course-world--scratch { min-height: 480px; }
  .course-world__content { right: 18px; left: 18px; }
  .path-section { width: 100%; padding-right: 12px; padding-left: 12px; }
  .learning-path { grid-template-columns: 1fr; }
  .path-step { min-height: 220px; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-card,
  .capability-card--wide,
  .capability-card--progress { min-height: 238px; }
  .capability-card--wide:first-child { min-height: 390px; }
  .portal-footer__main,
  .portal-footer__records { width: calc(100% - 24px); }
  .portal-footer__records div { align-items: flex-start; }
  .system-modal__panel,
  .account-panel { border-radius: 14px; }
  .practice-header { min-height: 66px; }
  .practice-header__account > button { max-width: 104px; }
  .practice-header + main { width: calc(100% - 24px); }
  .practice-hero { margin-top: 14px; padding: 24px 19px; border-radius: 16px; }
  .practice-hero h1 { font-size: 38px; }
  .practice-card { min-height: 176px; }
  .legal-header nav a { border-color: #e1e7ee; color: #667085; background: #f8fafc; }
  .legal-header nav a[aria-current="page"] { border-color: #bad1fb; color: var(--fresh-primary); background: #edf4ff; }
  .legal-table tr { border-color: #dde4ec; background: #fff; }
  .legal-table td { border-color: #e7ebf0; color: #5f6f82; }
  .legal-table td::before { color: var(--fresh-primary); }
}

@media (prefers-reduced-motion: reduce) {
  .quick-access__item { transition: none; }
}

/* 第二版：首页改为功能优先的学习系统布局。 */
body {
  background: #f3f5f8;
}

.portal-header,
.portal-header.is-scrolled {
  border-color: rgba(255, 255, 255, .08);
  background: #111827;
  box-shadow: none;
}
.portal-header__inner { height: 64px; }
.portal-brand__mark {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #fff;
}
.portal-brand__copy strong { color: #fff; }
.portal-brand__copy small { color: #8190a8; }
.portal-navigation a,
.portal-navigation button { color: #aab4c4; background: transparent; }
.portal-navigation a:hover,
.portal-navigation button:hover,
.portal-navigation .is-active { color: #fff; background: transparent; }
.portal-navigation .is-active { font-weight: 700; }
.header-login { color: #d4d9e2; }
.header-start {
  border: 1px solid #3478f6;
  border-radius: 6px;
  background: #3478f6;
  box-shadow: none;
}

.hero {
  padding: 88px 0 20px;
  background: #111827;
}
.hero__inner {
  display: block;
  min-height: 286px;
  padding: 42px 48px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(10, 18, 34, .98), rgba(16, 38, 76, .9)),
    #111827;
  box-shadow: none;
}
.hero__copy { position: static; max-width: none; }
.hero__eyebrow { margin-bottom: 12px; }
.hero__eyebrow > span { color: #70a2ff; }
.hero__eyebrow em {
  border-color: rgba(255,255,255,.14);
  color: #a9b5c8;
  background: rgba(255,255,255,.04);
}
.hero h1 {
  color: #fff;
  font-size: clamp(34px, 3.5vw, 48px);
  line-height: 1.18;
  letter-spacing: -.025em;
}
.hero h1 span { margin-left: .18em; color: #6ca0ff; }
.hero__copy > p {
  max-width: 700px;
  margin-top: 14px;
  color: #aab5c7;
  font-size: 16px;
  line-height: 1.8;
}
.hero__actions { margin-top: 22px; }
.primary-action {
  min-width: 188px;
  padding: 10px 15px;
  border-radius: 6px;
  box-shadow: none;
}
.primary-action__icon { width: 30px; height: 30px; }
.secondary-action {
  padding: 10px 14px;
  border-color: rgba(255,255,255,.2);
  border-radius: 6px;
  color: #dce3ee;
  background: rgba(255,255,255,.04);
}
.secondary-action:hover { border-color: #6ca0ff; color: #fff; background: rgba(255,255,255,.07); }
.hero-project-link { color: #8fb4ff; }
.hero__metrics {
  position: absolute;
  right: 48px;
  bottom: 38px;
  margin: 0;
}
.hero__metrics div {
  width: 104px;
  padding: 8px 10px;
  border-color: rgba(255,255,255,.1);
  border-radius: 6px;
  background: rgba(255,255,255,.04);
}
.hero__metrics dt { color: #fff; }
.hero__metrics dd { color: #8796ab; }
.hero__visual { display: none; }

.quick-access {
  gap: 12px;
  margin-top: 0;
}
.quick-access__item {
  min-height: 96px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 16px;
  border-color: #e1e5eb;
  border-radius: 8px;
  box-shadow: none;
}
.quick-access__item:hover { transform: none; border-color: #9bbcf6; box-shadow: 0 4px 14px rgba(30, 55, 90, .06); }
.quick-access__icon { width: 38px; height: 38px; border-radius: 7px; }
.quick-access__item strong { font-size: 16px; }
.quick-access__item em { margin-top: 3px; font-size: 13px; }

.system-section { padding: 48px 0; }
.section-heading {
  align-items: center;
  margin-bottom: 20px;
}
.section-index { margin-bottom: 5px; font-size: 11px; }
.section-heading h2 { font-size: 28px; }
.section-heading > p { max-width: 520px; font-size: 16px; }
.course-worlds { gap: 14px; }
.course-world,
.course-world--scratch {
  min-height: 250px;
  padding: 22px 24px;
  border-radius: 8px;
  box-shadow: none;
}
.course-world:hover { transform: none; box-shadow: 0 5px 18px rgba(30, 55, 90, .06); }
.course-world > header { position: static; padding: 0; }
.course-world__symbol,
.scratch-stage { display: none; }
.course-world__content {
  position: static;
  margin-top: 26px;
}
.course-world__tag { font-size: 11px; }
.course-world h3 { margin-top: 6px; font-size: 24px; }
.course-world p { margin-top: 8px; font-size: 16px; }
.course-world ul { margin-top: 16px; }
.course-world li { padding: 6px 9px; border-radius: 4px; font-size: 14px; }
.course-world__actions { margin-top: 18px; }
.course-main-action,
.course-disabled-action { padding: 9px 12px; border-radius: 5px; }
.live-course { border-radius: 8px; box-shadow: none; }

.path-section { padding-top: 20px; }
.learning-path { gap: 12px; }
.path-line { display: none; }
.path-step {
  min-height: 176px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: none;
}
.path-step:hover { transform: none; border-color: #b8caf0; }
.path-step__icon {
  width: 42px;
  height: 42px;
  margin: 14px 0 10px;
  border-radius: 6px;
  font-size: 15px;
}
.path-step h3 { margin-top: 3px; font-size: 18px; }
.path-step p { min-height: auto; margin-top: 7px; font-size: 15px; }
.path-step em { margin-top: 12px; }

.capability-section,
.closing-section { display: none; }
.portal-footer { margin-top: 28px; background: #111827; }
.portal-footer__main,
.portal-footer__records { border-color: rgba(255,255,255,.08); }
.portal-footer__main > p,
.portal-footer nav a,
.portal-footer nav button,
.portal-footer__records { color: #8895a8; }
.portal-brand--footer .portal-brand__copy strong { color: #fff; }

.practice-header {
  border-color: rgba(255,255,255,.08);
  background: #111827;
  box-shadow: none;
}
.practice-brand__mark { background: #fff; }
.practice-brand strong { color: #fff; }
.practice-brand small { color: #8190a8; }
.practice-header nav a { color: #aab4c4; }
.practice-header nav a:hover,
.practice-header nav a.is-active { color: #fff; background: transparent; }
.practice-header__account > button {
  border-color: #4d82de;
  color: #dce8ff;
  background: rgba(52,120,246,.12);
}
.judge-status { color: #aab4c4; }

@media (max-width: 1050px) {
  .hero__inner { padding: 36px; }
  .hero__metrics { position: static; margin-top: 22px; }
}

@media (max-width: 820px) {
  .portal-navigation {
    top: 64px;
    border-color: rgba(255,255,255,.08);
    background: #111827;
  }
  .mobile-nav-button { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.05); }
  .mobile-nav-button span { background: #c5cedb; }
  .hero { padding-top: 80px; }
  .hero__inner { min-height: 0; padding: 32px; }
  .hero__copy { text-align: left; }
  .hero__eyebrow,
  .hero__actions,
  .hero__metrics { justify-content: flex-start; }
  .system-section { padding: 42px 0; }
}

@media (max-width: 560px) {
  .hero { padding: 76px 0 14px; }
  .hero__inner { width: calc(100% - 24px); padding: 25px 20px; border-radius: 8px; }
  .hero h1 { font-size: 34px; }
  .hero h1 span { display: block; margin-left: 0; }
  .hero__copy > p { font-size: 15px; }
  .hero__actions { margin-top: 18px; }
  .hero__metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; }
  .hero__metrics div { width: auto; }
  .quick-access__item { min-height: 88px; padding: 14px; }
  .system-section { padding: 36px 0; }
  .section-heading { margin-bottom: 16px; }
  .section-heading h2 { font-size: 25px; }
  .course-world,
  .course-world--scratch { min-height: 260px; padding: 20px; }
  .course-world__content { margin-top: 22px; }
  .path-step { min-height: 164px; }
}