/* =========================================================
   钢铁私塾 Base Styles v6.0
   ---------------------------------------------------------
   基础重置、全局元素、核心组件样式。
   所有视觉值均引用 academy-tokens.css 中定义的 CSS 变量。
   双主题（专注 / 专业）通过 tokens.css 中的变量覆盖自动适配。
   ========================================================= */

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--font-base);
  line-height: var(--leading-relaxed);
  background-image: radial-gradient(color-mix(in srgb,var(--color-ink) 4%,transparent) .7px, transparent .7px);
  background-size: var(--space-2) var(--space-2);
  overflow-x: clip;
  overflow-y: visible;
  width: 100%;
}

button, a, input, textarea, select { font: inherit; }
button { color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { text-decoration: none; color: inherit; transition: var(--transition-fast); }
a:hover { color: var(--color-brand); }

.hidden { display: none !important; }
[hidden] { display: none !important; }

/* ── Accessibility ── */
.skip-link {
  position: fixed;
  left: var(--space-3);
  top: -60px;
  z-index: 300;
  background: var(--color-brand);
  color: var(--color-on-brand);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-button);
  font-size: var(--font-sm);
  transition: top var(--transition-fast);
}
.skip-link:focus { top: var(--space-3); }

/* ── Selection (defined in academy-pages.css with color-mix) ── */

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-line);
  border-radius: var(--radius-xs);
  transition: background var(--transition-fast);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-steel); }

/* =========================================================
   Topbar
   ========================================================= */
.topbar {
  height: var(--topbar-height);
  padding: 0 max(var(--space-7), calc((100vw - var(--content-max)) / 2));
  display: flex;
  align-items: center;
  gap: var(--space-7);
  background: var(--glass-bg);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 40;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 275px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  padding: 0;
}

.seal {
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-brand);
  color: var(--color-brand);
  display: grid;
  place-items: center;
  font: var(--weight-bold) var(--font-xs)/1.05 var(--font-heading);
  letter-spacing: .08em;
  flex-shrink: 0;
}

.brand-logo {
  height: 44px;
  width: auto;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

.brand b {
  display: block;
  font-size: var(--font-base);
  font-family: var(--font-heading);
}

.brand small {
  display: block;
  font-size: var(--font-xs);
  letter-spacing: .18em;
  color: var(--color-subtle);
}

.main-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-1);
  flex: 1;
}

.nav-tab {
  border: 0;
  background: transparent;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  cursor: pointer;
  font-size: var(--font-md);
  transition: color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-tab:hover { color: var(--color-brand); }
.nav-tab.active {
  color: var(--color-brand);
  background: var(--color-brand-soft);
}

.top-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* =========================================================
   Buttons
   ========================================================= */
.outline-btn,
.ghost-btn,
.primary-btn,
.secondary-btn,
.quiet-btn,
.text-btn,
.icon-btn,
.mini-link,
.mobile-menu-btn {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.primary-btn {
  background: var(--color-brand);
  color: var(--color-on-brand);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-button);
  box-shadow: var(--shadow-button);
  font-weight: var(--weight-semibold);
  font-size: var(--font-base);
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.primary-btn:hover {
  background: var(--color-brand-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-button-hover);
}
.primary-btn:active {
  transform: translateY(0) scale(.98);
  box-shadow: var(--shadow-button);
}
.primary-btn:disabled {
  opacity: .38;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.primary-btn.light {
  background: var(--color-brand-soft);
  color: var(--color-brand-active);
  box-shadow: none;
}

.outline-btn {
  border: var(--border-width-thin) solid var(--color-line-strong);
  background: transparent;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-button);
  color: var(--color-body);
  font-size: var(--font-base);
  font-family: inherit;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.outline-btn:hover { background: var(--color-surface); border-color: var(--color-brand); color: var(--color-brand); }
.outline-btn:active { transform: scale(.98); }

.ghost-btn {
  background: var(--color-surface);
  border: var(--border-width-thin) solid var(--color-line-strong);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-button);
  font-size: var(--font-base);
  font-family: inherit;
  cursor: pointer;
  color: var(--color-body);
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.ghost-btn:hover {
  border-color: var(--color-brand);
  background: var(--color-white);
  color: var(--color-brand);
}
.ghost-btn:active { transform: scale(.98); }
.ghost-btn:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.secondary-btn {
  background: var(--color-surface);
  border: var(--border-width-medium) solid var(--color-brand);
  color: var(--color-brand);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-button);
  font-size: var(--font-base);
  font-weight: var(--weight-semibold);
  font-family: inherit;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.secondary-btn:hover {
  background: var(--color-brand-soft);
  transform: translateY(-1px);
}
.secondary-btn:active {
  transform: translateY(0) scale(.98);
}
.secondary-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

.quiet-btn {
  background: transparent;
  color: var(--color-muted);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-button);
  font-size: var(--font-sm);
}
.quiet-btn:hover { background: var(--color-surface-3); }

.text-btn {
  background: transparent;
  padding: 0;
  color: var(--color-brand);
  font-weight: var(--weight-bold);
  font-size: var(--font-base);
}
.text-btn span { margin-left: var(--space-2); }

.mini-link {
  background: transparent;
  color: var(--color-brand);
  font-size: var(--font-xs);
  padding: 0;
}

.icon-btn {
  background: transparent;
  color: var(--color-muted);
  padding: var(--space-2);
  border-radius: var(--radius-button);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-btn:hover { background: var(--color-surface-3); }

.mobile-menu-btn {
  display: none;
  background: transparent;
  color: var(--color-brand);
  padding: var(--space-2);
  border-radius: var(--radius-button);
  align-items: center;
  justify-content: center;
}
.mobile-menu-btn:active {
  background: var(--color-surface-3);
}

.record-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-round);
  background: var(--color-brand);
  margin-right: var(--space-2);
  vertical-align: middle;
}

.btn-spinner {
  display: inline-block;
  width: var(--font-base);
  height: var(--font-base);
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-round);
  animation: spin .6s linear infinite;
  vertical-align: middle;
  margin-right: var(--space-2);
}

/* =========================================================
   Mobile Navigation
   ========================================================= */
.mobile-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 49;
  background: color-mix(in srgb,var(--color-ink) 35%,transparent);
  -webkit-tap-highlight-color: transparent;
}
.mobile-nav-backdrop.open {
  display: block;
  animation: fadeIn .2s ease;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.mobile-nav {
  display: none;
  position: fixed;
  z-index: 50;
  top: calc(var(--topbar-height) + var(--space-1));
  left: var(--space-3);
  right: var(--space-3);
  max-height: calc(100vh - var(--topbar-height) - var(--space-3) * 2);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-modal);
}
.mobile-nav.open {
  display: flex;
  flex-direction: column;
  animation: slideDown .22s cubic-bezier(.4,0,.2,1);
}
.mobile-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-1) var(--space-3);
  border-bottom: 1px solid var(--color-line);
  margin-bottom: var(--space-2);
}
.mobile-nav-title {
  font-size: var(--font-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
  letter-spacing: .05em;
}
.mobile-nav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  background: var(--color-surface-2);
  color: var(--color-muted);
  border-radius: var(--radius-button);
  cursor: pointer;
  padding: 0;
}
.mobile-nav-close:active {
  background: var(--color-surface-3);
}
.mobile-nav-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mobile-nav-divider {
  height: 1px;
  background: var(--color-line);
  margin: var(--space-2) var(--space-1);
}
.mobile-nav button {
  border: 0;
  background: transparent;
  text-align: left;
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-button);
  font-size: var(--font-base);
  color: var(--color-ink);
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: var(--weight-medium);
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition-fast);
}
.mobile-nav button svg {
  flex-shrink: 0;
  color: var(--color-muted);
}
.mobile-nav button:active {
  background: var(--color-surface-3);
}
.mobile-nav button[data-view].active {
  background: var(--color-brand-soft);
  color: var(--color-brand);
}
.mobile-nav button[data-view].active svg {
  color: var(--color-brand);
}

/* =========================================================
   App Shell & Views
   ========================================================= */
.app-shell {
  width: min(var(--content-max), calc(100% - var(--space-12)));
  margin: 0 auto;
  padding: var(--space-10) 0 70px;
  min-height: calc(100vh - var(--topbar-height));
}

.view { display: none; }
.view.active {
  display: block;
  animation: viewEnter var(--transition-slow);
}

@keyframes viewEnter {
  from { opacity: 0; transform: translateY(var(--space-2)); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade {
  from { opacity: 0; transform: translateY(var(--space-2)); }
  to   { opacity: 1; transform: none; }
}

@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================
   Hero Section
   ========================================================= */
.eyebrow {
  font-size: var(--font-xs);
  letter-spacing: .22em;
  color: var(--color-brand);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.edition-line {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-muted);
  font-size: var(--font-xs);
  letter-spacing: .1em;
}
.edition-line span {
  width: 38px;
  height: 1px;
  background: var(--color-brand);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: var(--space-12);
  align-items: center;
}

.hero-copy h1 {
  font: var(--weight-semibold) var(--font-hero)/1.02 var(--font-heading);
  letter-spacing: -.045em;
  margin: var(--space-4) 0 var(--space-6);
}
.hero-copy h1 em {
  font-style: normal;
  color: var(--color-brand);
}
.hero-copy > p {
  max-width: 680px;
  font-size: var(--font-xl);
  color: var(--color-muted);
  line-height: var(--leading-relaxed);
}

.hero-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-8);
  flex-wrap: wrap;
}

/* Horizontal proof stats */
.hero-proof {
  display: flex;
  flex-direction: row;
  gap: 0;
  margin-top: var(--space-6);
  width: 100%;
}
.hero-proof > span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1 1 0;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border-left: 1px solid var(--color-line);
}
.hero-proof > span:first-child {
  border-left: 0;
  padding-left: 0;
}
.hero-proof > span > b {
  display: block;
  font-size: var(--font-3xl);
  font-weight: var(--weight-extrabold);
  line-height: 1.1;
  color: var(--color-ink);
  margin: 0 0 var(--space-1) 0;
  white-space: nowrap;
  font-family: var(--font-heading);
}
.hero-proof > span > small {
  display: block;
  font-size: var(--font-sm);
  line-height: 1.4;
  color: var(--color-muted);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

/* Hero Art Panel - 透明容器，内部卡片自带样式 */
.hero-art {
  position: relative;
}

.art-caption {
  position: absolute;
  top: var(--space-7);
  left: var(--space-8);
  z-index: 3;
}
.art-caption span, .art-caption b { display: block; }
.art-caption span {
  font-size: var(--font-xs);
  letter-spacing: .18em;
  color: var(--color-muted);
}
.art-caption b {
  font: var(--weight-semibold) var(--font-2xl) var(--font-heading);
  margin-top: var(--space-1);
  color: var(--color-ink);
}

.metal-orbit {
  position: absolute;
  width: 350px;
  height: 350px;
  right: 38px;
  top: 48px;
  display: grid;
  place-items: center;
  z-index: 2;
}

.metal-disc {
  position: relative;
  z-index: 3;
  width: 180px;
  height: 180px;
  border-radius: var(--radius-round);
  display: grid;
  place-content: center;
  text-align: center;
  background: radial-gradient(circle at 35% 28%, var(--color-white), var(--color-steel-soft) 32%, var(--color-steel) 60%, var(--color-ink) 80%, var(--color-steel-soft) 83%, var(--color-steel));
  box-shadow: inset -18px -20px 35px color-mix(in srgb,var(--color-ink) 32%,transparent), 0 28px 50px color-mix(in srgb,var(--color-ink) 18%,transparent);
  color: var(--color-white);
}
.metal-disc span { font: var(--weight-bold) var(--font-xl) var(--font-heading); }
.metal-disc b { font: var(--weight-bold) var(--font-3xl) var(--font-heading); display: block; }
.metal-disc small { font-size: var(--font-xs); letter-spacing: .12em; display: block; }

.orbit {
  position: absolute;
  border: 1px solid var(--color-brand);
  opacity: .28;
  border-radius: var(--radius-round);
  animation: orbitFloat 9s ease-in-out infinite alternate;
}
.orbit-a { width: 255px; height: 255px; }
.orbit-b { width: 320px; height: 210px; transform: rotate(35deg); animation-delay: -3s; }
.orbit-c { width: 285px; height: 335px; transform: rotate(-25deg); animation-delay: -6s; }

@keyframes orbitFloat { to { translate: 0 -5px; } }

.node {
  position: absolute;
  z-index: 4;
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-xs);
  color: var(--color-body);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.node-a { top: 48px; right: 10px; }
.node-b { left: -2px; top: 160px; }
.node-c { bottom: 34px; right: 50px; }

.art-note {
  position: absolute;
  left: var(--space-7);
  bottom: 25px;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: var(--space-3);
  align-items: start;
  max-width: 265px;
  z-index: 3;
  color: var(--color-muted);
  font: var(--font-base)/1.55 var(--font-heading);
}
.art-note b {
  color: var(--color-brand);
  font-size: var(--font-sm);
  border-top: 1px solid var(--color-brand);
  padding-top: var(--space-1);
  display: block;
}

/* =========================================================
   Dashboard
   ========================================================= */
.dashboard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--space-5) 0 var(--space-3);
  color: var(--color-muted);
  font-size: var(--font-xs);
  letter-spacing: .1em;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.2fr .9fr .9fr;
  gap: var(--space-4);
}

.feature-card {
  min-height: 240px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow), border-color var(--transition-base);
}
.feature-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-label {
  font-size: var(--font-xs);
  letter-spacing: .2em;
  color: var(--color-subtle);
  text-transform: uppercase;
}

.status-pill {
  font-size: var(--font-xs);
  color: var(--color-brand);
  background: var(--color-brand-soft);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  font-weight: var(--weight-medium);
}
.status-pill.subtle {
  background: var(--color-surface-3);
  color: var(--color-muted);
}

.continue-body {
  display: grid;
  grid-template-columns: 65px 1fr;
  gap: var(--space-4);
  margin: var(--space-6) 0;
}

.lesson-index {
  font: var(--weight-medium) 46px var(--font-heading);
  color: var(--color-brand);
  line-height: 1;
}

.continue-body h2 {
  font: var(--weight-semibold) var(--font-2xl) var(--font-heading);
  margin: 0;
  color: var(--color-ink);
}
.continue-body p,
.path-card p,
.ability-head p {
  color: var(--color-muted);
  font-size: var(--font-md);
  margin: var(--space-1) 0;
  line-height: var(--leading-relaxed);
}

.micro-flow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-muted);
  font-size: var(--font-xs);
  margin: var(--space-5) 0;
}
.micro-flow i {
  height: 1px;
  background: var(--color-line);
  flex: 1;
}

.path-card h3, .ability-card h3 {
  font: var(--weight-semibold) var(--font-2xl) var(--font-heading);
  margin: var(--space-5) 0;
  color: var(--color-ink);
}

.role-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.role-pills button {
  background: var(--color-surface-3);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-3);
  color: var(--color-muted);
  cursor: pointer;
  font-size: var(--font-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.role-pills button:hover { border-color: var(--color-line); }
.role-pills button.selected {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.path-focus {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-3);
}
.path-focus span {
  font-size: var(--font-xs);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-2);
  color: var(--color-muted);
}

.ability-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.ability-head b {
  font: var(--weight-semibold) var(--font-4xl) var(--font-heading);
  color: var(--color-brand);
  line-height: 1;
}

.mini-ability {
  display: grid;
  grid-template-columns: 62px 1fr 26px;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--font-xs);
  margin: var(--space-2) 0;
  color: var(--color-muted);
}
.mini-ability i {
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-3);
  overflow: hidden;
}
.mini-ability i b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--color-brand), var(--color-gold));
  transition: width .4s ease;
}

/* Outcome Strip (dark accent panel) */
.outcome-strip {
  margin-top: var(--space-5);
  background: linear-gradient(135deg, var(--color-ink), var(--color-black));
  color: var(--color-white);
  border-radius: var(--radius-card);
  padding: var(--space-7);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-8);
  align-items: center;
}
.outcome-strip span {
  font-size: var(--font-xs);
  letter-spacing: .14em;
  color: var(--color-gold-soft);
}
.outcome-strip h2 {
  font: var(--weight-semibold) var(--font-3xl)/1.35 var(--font-heading);
  margin: var(--space-2) 0;
  color: var(--color-white);
}
.outcome-list {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.outcome-list span {
  color: var(--color-surface-2);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-xs);
  letter-spacing: 0;
}

/* =========================================================
   Global Card Hover Lift (shared across card types)
   ========================================================= */
.course-item,
.source-book,
.price-card,
.metric-card {
  transition: transform var(--transition-slow), box-shadow var(--transition-slow), border-color var(--transition-base);
}
.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-line-strong);
}

/* =========================================================
   Home Tabs (Pill style)
   ========================================================= */
.home-tabs {
  display: flex;
  gap: var(--space-1);
  background: var(--color-surface-3);
  padding: var(--space-1);
  border-radius: var(--radius-pill);
  width: max-content;
  margin-bottom: var(--space-4);
}
.home-tabs button.home-tab {
  border: 0;
  background: transparent;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: var(--font-base);
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
  outline: none;
  box-shadow: none;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  white-space: nowrap;
}
.home-tabs button.home-tab:hover {
  color: var(--color-body);
  background: rgba(255,255,255,.4);
}
.home-tabs button.home-tab.active {
  background: var(--color-surface);
  color: var(--color-brand);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-xs);
}
.home-tabs button.home-tab:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* =========================================================
   Certification Status
   ========================================================= */
.cert-valid { color: var(--color-success); }
.cert-invalid { color: var(--color-error); }

/* =========================================================
   Check-in Card
   ========================================================= */
.home-checkin-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-line);
}

.checkin-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.checkin-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-round);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-brand-soft);
  color: var(--color-brand);
  font-size: var(--font-xl);
  flex-shrink: 0;
}

.checkin-info h4 {
  margin: 0 0 var(--space-1);
  font-size: var(--font-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}
.checkin-info p {
  margin: 0;
  font-size: var(--font-sm);
  color: var(--color-muted);
}

.checkin-badge {
  margin-left: auto;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-brand-soft);
  color: var(--color-brand);
  font-size: var(--font-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

/* =========================================================
   History & Story Cards
   ========================================================= */
.history-card, .story-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  padding: var(--space-5);
}

.history-head, .story-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.history-date {
  font-size: var(--font-sm);
  color: var(--color-muted);
  font-weight: var(--weight-semibold);
}

.history-tag, .story-tag {
  font-size: var(--font-xs);
  padding: var(--space-05) var(--space-2);
  border-radius: var(--radius-badge);
  background: var(--color-brand-soft);
  color: var(--color-brand);
  font-weight: var(--weight-semibold);
}

.story-day {
  font-size: var(--font-xs);
  color: var(--color-muted);
  margin-left: auto;
}

.history-foot, .story-foot {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
  font-size: var(--font-sm);
  color: var(--color-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* =========================================================
   Typography defaults
   ========================================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-ink);
  margin: 0;
}

/* Focus-visible styles for keyboard navigation (classic theme) */
*:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px;border-radius:var(--radius-sm)}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--color-brand) 25%,transparent)}
/* Respect reduced motion */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* =========================================================
   Mobile Bottom Tab Bar
   ========================================================= */
.bottom-tabbar{
  display:none;
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:60;
  background:var(--color-surface);
  border-top:1px solid var(--color-line);
  padding:6px 0 max(6px,env(safe-area-inset-bottom));
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.bottom-tabbar::before{
  content:"";
  position:absolute;
  inset:0;
  background:color-mix(in srgb,var(--color-surface) 92%,transparent);
  z-index:-1;
}
.bottom-tab{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:6px 2px 4px;
  border:0;
  background:transparent;
  color:var(--color-muted);
  cursor:pointer;
  transition:color var(--transition-fast),transform var(--transition-fast);
  min-height:48px;
  -webkit-tap-highlight-color:transparent;
}
.bottom-tab svg{
  flex-shrink:0;
}
.bottom-tab span{
  font-size:10px;
  font-weight:500;
  line-height:1;
}
.bottom-tab.active{
  color:var(--color-brand);
}
.bottom-tab:active{
  transform:scale(.92);
}

/* =========================================================
   Mobile Responsive Styles (<= 640px)
   ========================================================= */
@media(max-width:640px){
  /* Hide desktop nav, show bottom tabbar + hamburger menu */
  :root{
    --topbar-height:56px;
  }
  .main-nav{display:none!important}
  .record-btn{display:none!important}
  .theme-switcher{display:none!important}
  .mobile-menu-btn{display:flex!important}
  .bottom-tabbar{display:flex!important}
  .mobile-nav{display:none}
  .mobile-nav.open{display:flex!important;flex-direction:column!important}
  .mobile-nav-backdrop{display:none}
  .mobile-nav-backdrop.open{display:block!important}

  /* Header simplification */
  .topbar{
    padding:0 var(--space-4);
    height:56px;
    gap:var(--space-2);
  }
  .brand{
    min-width:0;
    gap:var(--space-2);
    flex:1;
  }
  .brand small{display:none}
  .brand b{font-size:var(--font-md)}
  .brand-logo{height:32px}
  .top-actions{gap:var(--space-2)}
  .account-btn{
    padding:8px 12px;
    gap:6px;
    max-width:none;
    border-radius:var(--radius-pill);
    min-height:44px;
  }
  .account-btn small{
    font-size:var(--font-sm);
    max-width:none;
    display:inline-block;
  }
  .account-avatar{width:28px;height:28px;font-size:var(--font-xs)}
  .mini-seal{width:30px;height:30px;font-size:var(--font-sm)}

  /* App shell - add bottom padding for tab bar */
  .app-shell{
    width:100%;
    padding:var(--space-5) var(--space-4) calc(80px + env(safe-area-inset-bottom));
    margin:0;
  }

  /* Hero section */
  .hero-grid{
    grid-template-columns:1fr;
    gap:var(--space-5);
    min-height:auto;
  }
  /* Order: copy first, then art */
  .hero-copy{order:1}
  .hero-art{order:2}
  .hero-copy h1{
    font-size:clamp(24px,7vw,32px);
    line-height:1.35;
    padding-left:var(--space-4);
    word-break:auto-phrase;
    overflow-wrap:break-word;
    -webkit-hyphens:none;
    hyphens:none;
    margin:var(--space-3) 0 var(--space-5);
    letter-spacing:-.02em;
  }
  .hero-copy h1:before{
    width:4px;height:24px;
  }
  .hero-copy h1 em{
    font-style:normal;
  }
  .hero-copy h1 br{
    display:block;
  }
  .hero-copy > p{
    font-size:var(--font-base);
    line-height:1.7;
  }
  .hero-actions{
    flex-direction:column;
    gap:var(--space-3);
  }
  .hero-actions .primary-btn,
  .hero-actions .ghost-btn{
    width:100%;
    justify-content:center;
    min-height:48px;
    font-size:var(--font-base);
  }
  .hero-auth-link{
    display:flex;
    width:100%;
  }
  .hero-auth-link button{
    width:100%;
    justify-content:center;
    min-height:48px;
    font-size:var(--font-base);
  }
  .hero-proof{
    grid-template-columns:repeat(2,1fr);
    gap:var(--space-3);
  }
  .hero-proof span{
    padding:var(--space-4);
    border-left:1px solid var(--color-brand-soft);
  }
  .hero-proof span:first-child{
    padding-left:var(--space-4);
  }
  .hero-proof b{
    font-size:var(--font-2xl);
  }

  /* Search boxes - prevent overflow */
  .search-box{
    min-width:0;
    width:100%;
  }

  /* Studios / Popups - full screen on mobile */
  .studio{
    inset:0!important;
    width:100%!important;
    max-width:100%!important;
    height:100%!important;
    max-height:100%!important;
    border-radius:0!important;
    margin:0!important;
    top:0!important;
    transform:translateY(100%)!important;
    transition:transform var(--transition-slow)!important;
  }
  .studio.open{
    transform:translateY(0)!important;
  }
  /* Disable body scroll animation on mobile, override studio-body animation for full-screen */
  .studio.open .studio-body{
    animation:none!important;
  }
  .studio-head{
    padding:var(--space-4) var(--space-4);
    min-height:56px;
  }
  .studio-head .icon-btn{
    min-width:44px;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .studio-body{
    width:100%!important;
    max-width:100%!important;
    padding:var(--space-5) var(--space-4);
    padding-bottom:calc(var(--space-5) + env(safe-area-inset-bottom));
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    margin:0!important;
  }

  /* Studio content layouts - single column on mobile */
  .lesson-grid,.choice-grid,.evidence-stack,.definition-lab,
  .family-panel,.report-bars{grid-template-columns:1fr!important;gap:var(--space-4)!important}
  .family-3d-wrap{max-width:180px}
  .report-top{flex-direction:column;gap:var(--space-2);text-align:center}
  .report-score{font-size:var(--font-4xl)}
  .diag-shell h1,.lesson-screen h1{font-size:clamp(28px,7vw,38px)!important}
  .completion-card{padding:var(--space-6) var(--space-4)}
  .completion-card h1{font-size:var(--font-2xl)}
  .scenario-card.quote p{font-size:var(--font-xl)}
  .definition-art{height:260px}
  .definition-core{width:140px;height:140px}
  .definition-core b{font-size:var(--font-xl)}
  .teachback textarea{min-height:140px}
  .lesson-body{width:100%!important;padding:0!important}
  .lesson-screen{max-width:100%}
  .diag-actions,.lesson-actions{flex-direction:column;gap:var(--space-2)}
  .diag-actions button,.lesson-actions button{width:100%;min-height:44px}
  .notes-drawer,.detail-drawer{width:100%!important}
  .purchase-sheet{align-items:flex-end}
  .sheet-panel{width:100%;border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:var(--space-5) var(--space-4);max-height:85vh;overflow-y:auto}
  .sheet-actions{flex-direction:column}
  .sheet-actions button{width:100%;min-height:48px}

  /* Auth card - full screen */
  .auth-shell,.payment-shell,.exam-shell,.certificate-stage{
    max-width:100%!important;
    width:100%!important;
    margin:0!important;
  }
  .auth-card{
    grid-template-columns:1fr;
    border-radius:0;
    border:0;
    box-shadow:none;
    background:transparent;
  }
  .auth-aside{
    display:none;
  }
  .auth-studio .studio-body{
    padding-top:var(--space-5)!important;
  }
  .auth-main{
    padding:var(--space-5) 0;
    overflow-y:auto;
    background:transparent;
  }
  .auth-tabs{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .auth-tabs::-webkit-scrollbar{display:none}
  .auth-tab{
    flex-shrink:0;
    padding:var(--space-2) var(--space-4);
    font-size:var(--font-sm);
  }

  /* Form fields */
  .form-grid{grid-template-columns:1fr}
  .form-field{margin-bottom:var(--space-4)}
  .form-field.full{grid-column:auto}
  .form-field label{font-size:var(--font-sm)}
  .form-field input,.form-field select{
    min-height:48px;
    font-size:16px; /* prevent iOS zoom */
  }
  .primary-btn,.ghost-btn{
    min-height:48px;
    font-size:var(--font-base);
  }

  /* Role cards */
  .role-cards{
    grid-template-columns:repeat(2,1fr);
    gap:var(--space-2);
  }
  .role-card{padding:var(--space-3) var(--space-2);min-height:70px}

  /* Course items */
  .course-item{
    padding:var(--space-3);
  }
  .course-item .course-num{
    width:36px;height:36px;
    font-size:var(--font-sm);
  }

  /* TYC autocomplete */
  .tyc-results{max-height:260px}
  .tyc-result-item{padding:var(--space-3)}

  /* Pricing cards */
  .pricing-grid{grid-template-columns:1fr}
  .price-card{padding:var(--space-5) var(--space-4)}

  /* Ranking */
  .ranking-board{
    border-radius:var(--radius-lg);
  }
  .ranking-row{
    grid-template-columns:36px 1fr 70px;
    padding:var(--space-3) var(--space-2);
    gap:var(--space-2);
  }
  .ranking-row>*:nth-child(3){display:none}
  .ranking-row.head{display:none}
  .rank-medal{width:30px;height:30px;font-size:var(--font-sm)}

  /* Account center panels */
  .account-panel,.order-card,.pay-method-card,.activation-card,
  .exam-question,.report-card,.verification-box{
    border-radius:var(--radius-lg);
    padding:var(--space-4);
  }
  .account-profile{padding:var(--space-4) 0}
  .profile-avatar{width:56px;height:56px;font-size:var(--font-2xl)}
  .membership-card{padding:var(--space-4);flex-direction:column;text-align:center}
  .metric-card{padding:var(--space-3)}
  .metric-card b{font-size:var(--font-2xl)}
  .member-table{font-size:var(--font-sm)}
  .member-table th,.member-table td{padding:var(--space-2) var(--space-1)}

  /* FAQ */
  .faq-item{padding:var(--space-3) 0}

  /* Tools gallery */
  .tools-gallery{
    grid-template-columns:repeat(2,1fr);
    gap:var(--space-3);
  }
  .tool-card{padding:var(--space-4) var(--space-3)}
  .tool-card svg{width:32px;height:32px}

  /* Knowledge sources */
  .source-gallery{grid-template-columns:1fr}
  .source-book{padding:var(--space-4)}

  /* Stats + Calendar: single column on mobile */
  .stats-calendar-grid{grid-template-columns:1fr;gap:var(--space-4)}
  .stat-item{padding:var(--space-3)}
  .cal-cell{min-height:36px;font-size:var(--font-xs)}
  .cal-grid{gap:2px}

  /* Micro flow tags */
  .micro-flow{flex-wrap:wrap;gap:4px;font-size:var(--font-xs)}
  .micro-flow i{display:none}

  /* View head */
  .view-head{flex-direction:column;align-items:flex-start;gap:var(--space-3)}
  .view-head h1{font-size:var(--font-2xl)}
  .curriculum-tools{width:100%;flex-direction:column;gap:var(--space-2)}
  .segmented{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .segmented::-webkit-scrollbar{display:none}
  .segmented button{flex-shrink:0}

  /* Path banner */
  .path-banner{flex-direction:column;align-items:flex-start;gap:var(--space-2)}

  /* KB tabs */
  .kb-tabs{flex-wrap:wrap;gap:var(--space-1)}
  .kb-toolbar{flex-direction:column;gap:var(--space-2)}

  /* Ranking tabs */
  .ranking-tabs{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ranking-tabs::-webkit-scrollbar{display:none}

  /* Pricing self-check */
  .vp-quiz-grid{grid-template-columns:1fr}
  .vp-option{min-height:48px;padding:14px 0;font-size:var(--font-base)}
  .vp-quiz-question h3{font-size:var(--font-base)}

  /* Pricing table */
  .compare-row{grid-template-columns:1fr repeat(3,.65fr)!important;font-size:var(--font-xs)}
  .compare-row b,.compare-row span{padding:var(--space-2) var(--space-1)}

  /* Mini links - better touch target */
  .mini-link{padding:8px 4px;min-height:36px;display:inline-flex;align-items:center}

  /* Footer */
  footer{padding:var(--space-6) var(--space-4) calc(80px + var(--space-6));text-align:center}
  .footer-links{flex-direction:column;gap:var(--space-1);align-items:center}
  .site-footer .footer-inner{gap:var(--space-3)}

  /* Certificate */
  .cert-hero{
    grid-template-columns:1fr;
    text-align:center;
  }
  .certificate-canvas{padding:var(--space-3)}
  .certificate-canvas svg{max-height:50vh}

  /* Lesson popup */
  .lesson-body{padding:var(--space-4)}
  .lesson-step{padding:var(--space-3) 0}
  .step-actions{flex-direction:column;gap:var(--space-2)}
  .step-actions button{width:100%;min-height:44px}

  /* Account center */
  .account-layout{grid-template-columns:1fr}
  .account-sidebar{
    position:static;
    display:flex;
    overflow-x:auto;
    gap:var(--space-2);
    padding:var(--space-3) 0;
    border-right:0;
    border-bottom:1px solid var(--color-line);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .account-sidebar::-webkit-scrollbar{display:none}
  .account-sidebar button{
    flex-shrink:0;
    padding:var(--space-2) var(--space-4);
    border-radius:var(--radius-pill);
    border:1px solid var(--color-line);
  }
  .account-sidebar button.active{
    background:var(--color-brand);
    color:var(--color-white);
    border-color:var(--color-brand);
  }
  .account-content{padding:var(--space-4) 0}

  /* Company dashboard */
  .company-dashboard{grid-template-columns:1fr}
  .metric-grid{grid-template-columns:repeat(2,1fr)}

  /* Password toggle - better touch target */
  .pwd-toggle{padding:12px;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}

  /* TYC select button */
  .tyc-select-btn{padding:10px 16px;min-height:40px;font-size:var(--font-sm)}

  /* Tabs in studio headers */
  .exam-nav-pill{width:40px;height:40px;font-size:var(--font-sm)}

  /* Toast */
  .toast{
    left:var(--space-4);
    right:var(--space-4);
    bottom:calc(80px + var(--space-4));
    width:auto;
    max-width:none;
  }
}

/* ── CSS-only 勾选图标（替代emoji ✓，避免使用U+2713）── */
.icon-check{
  display:inline-block;
  width:14px;height:14px;
  position:relative;
  flex-shrink:0;
}
.icon-check::after{
  content:'';
  position:absolute;
  left:4px;top:1px;
  width:5px;height:9px;
  border:solid currentColor;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.step-dot.done .dot-num .icon-check{
  width:12px;height:12px;
}
.step-dot.done .dot-num .icon-check::after{
  left:3px;top:0;
  width:4px;height:8px;
  border-width:0 1.5px 1.5px 0;
}
/* ── CSS-only 叉号图标（替代emoji ×，避免使用U+00D7）── */
.icon-cross{
  display:inline-block;
  width:14px;height:14px;
  position:relative;
  flex-shrink:0;
}
.icon-cross::before,
.icon-cross::after{
  content:'';
  position:absolute;
  left:6px;top:1px;
  width:2px;height:12px;
  background:currentColor;
  border-radius:1px;
}
.icon-cross::before{transform:rotate(45deg);}
.icon-cross::after{transform:rotate(-45deg);}
.result-mark-correct{color:var(--color-success);font-weight:700;}
.result-mark-wrong{color:var(--color-error);font-weight:700;}

/* Extra small screens (<=380px) */
@media(max-width:380px){
  .bottom-tab span{font-size:11px}
  .hero-copy h1{font-size:22px;line-height:1.35}
  .tools-gallery{grid-template-columns:1fr}
  .role-card{padding:8px 4px;min-height:60px}
  .role-card svg{width:20px;height:20px}
  .metric-grid{grid-template-columns:1fr}
  .stat-item b{font-size:var(--font-xl)}
}

/* Tablet adjustments (<=900px, >=641px) */
@media(min-width:641px) and (max-width:900px){
  .bottom-tabbar{display:none!important}
  .main-nav{
    gap:0;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    justify-content:flex-start;
    padding:0 var(--space-2);
  }
  .main-nav::-webkit-scrollbar{display:none}
  .nav-tab{
    padding:var(--space-2) var(--space-3);
    font-size:var(--font-sm);
    flex-shrink:0;
  }
  .brand{min-width:200px}
  .brand small{font-size:10px}
  .brand-logo{height:36px}
  .record-btn span:not(.record-dot){display:none}
  .app-shell{width:calc(100% - var(--space-8));padding:var(--space-6) 0 60px}
  .hero-grid{grid-template-columns:1fr}
}

/* Landscape mobile */
@media(max-height:500px) and (orientation:landscape){
  .bottom-tabbar{display:none!important}
  .app-shell{padding-bottom:var(--space-6)}
}

/* =========================================================
   Form Focus States (classic theme defaults)
   ========================================================= */
.search-box:focus-within {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-brand-ring);
}