/* ===== Theme Switcher (both themes) ===== */
.theme-switcher{
  display:flex;
  align-items:center;
  gap:4px;
  background:var(--color-surface-2);
  padding:4px;
  border-radius:var(--radius-pill);
  margin-right:4px;
  border:1px solid var(--color-line);
}
.theme-switcher button{
  border:0;
  background:transparent;
  padding:6px 12px;
  border-radius:var(--radius-pill);
  font-size:var(--font-xs);
  font-weight:600;
  cursor:pointer;
  color:var(--color-muted);
  transition:background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
  white-space:nowrap;
}
.theme-switcher button:hover{color:var(--color-ink)}
.theme-switcher button.active{
  background:var(--color-surface);
  color:var(--color-brand);
  box-shadow:var(--shadow-sm);
}

/* ===== Certificate Showcase (both themes) ===== */
.cert-showcase{
  margin:48px 0 28px;
  padding:40px;
  background:linear-gradient(135deg,var(--color-surface-2) 0%,var(--color-brand-soft) 100%);
  border-radius:var(--radius-card);
  position:relative;
  overflow:hidden;
  border:1px solid var(--color-line);
}
.cert-showcase:before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background-image:
    linear-gradient(color-mix(in srgb,var(--color-brand) 4%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--color-brand) 4%,transparent) 1px,transparent 1px);
  background-size:40px 40px;
  opacity:.6;
}
.cert-showcase-inner{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:40px;
  align-items:center;
}
.cert-showcase-copy h2{
  font-size:var(--font-3xl);
  font-weight:600;
  margin:10px 0 12px;
  line-height:1.3;
  font-family:var(--font-heading);
}
.cert-showcase-copy p{
  font-size:var(--font-lg);
  color:var(--color-muted);
  line-height:1.7;
  margin:0 0 20px;
}
.cert-showcase-features{
  display:grid;
  gap:10px;
}
.cert-showcase-features span{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:var(--font-base);
  font-weight:500;
  position:relative;
}
.cert-showcase-features span:before{
  content:"";
  width:20px;height:20px;
  border-radius:var(--radius-round);
  background:var(--color-brand);
  flex-shrink:0;
  position:relative;
}
.cert-showcase-features span:after{
  content:"";
  position:absolute;
  left:5px;top:4px;
  width:6px;height:10px;
  border:solid var(--color-white);
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.cert-showcase-visual{
  position:relative;
  display:flex;
  justify-content:center;
}
.cert-preview-card{
  width:100%;
  max-width:380px;
  background:var(--color-surface);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  transform:perspective(1000px) rotateY(-5deg) rotateX(2deg);
  transition:transform .5s cubic-bezier(.4,0,.2,1);
  cursor:pointer;
}
.cert-preview-card:hover{
  transform:perspective(1000px) rotateY(0) rotateX(0) scale(1.03);
}
.cert-preview-header{
  background:linear-gradient(135deg,var(--color-brand),var(--color-brand-hover));
  color:var(--color-white);
  padding:20px 24px;
  text-align:center;
}
.cert-preview-header span{
  font-size:var(--font-xs);
  letter-spacing:.2em;
  opacity:.8;
}
.cert-preview-header h3{
  font-size:var(--font-lg);
  font-weight:600;
  margin:4px 0 0;
  font-family:var(--font-heading);
}
.cert-preview-body{
  padding:32px 24px 28px;
  text-align:center;
}
.cert-preview-seal{
  width:96px;height:96px;
  margin:0 auto var(--space-4);
  color:var(--color-brand);
  position:relative;
  display:grid;
  place-items:center;
  filter:drop-shadow(0 3px 6px color-mix(in srgb,var(--color-ink) 18%,transparent));
  transition:transform var(--transition-base);
}
.cert-preview-seal::before{
  content:"";
  position:absolute;inset:-6px;
  border-radius:var(--radius-round);
  background:radial-gradient(circle,color-mix(in srgb,var(--color-brand) 18%,transparent) 0%,transparent 70%);
  z-index:-1;
}
.cert-preview-seal .cert-seal-svg{
  width:100%;height:100%;
  display:block;
  pointer-events:none;
}
.cert-preview-seal:hover{
  transform:rotate(-6deg) scale(1.08);
}
.cert-preview-name{
  font-size:var(--font-2xl);
  font-weight:600;
  color:var(--color-ink);
  margin-bottom:4px;
  font-family:var(--font-heading);
}
.cert-preview-role{
  font-size:var(--font-md);
  color:var(--color-muted);
  margin-bottom:20px;
}
.cert-preview-info{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  padding-top:16px;
  border-top:1px solid var(--color-line);
}
.cert-preview-info div{
  text-align:center;
}
.cert-preview-info small{
  font-size:var(--font-xs);
  color:var(--color-muted);
  display:block;
  margin-bottom:4px;
  letter-spacing:.05em;
}
.cert-preview-info b{
  font-size:var(--font-sm);
  font-weight:600;
  color:var(--color-ink);
  font-family:var(--font-mono);
}

/* ===== Scroll Animations (both themes) ===== */
.fade-in-up{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1);
}
.fade-in-up.visible{
  opacity:1;
  transform:translateY(0);
}

/* ===== Ripple Effect (both themes) ===== */
.ripple{
  position:relative;
  overflow:hidden;
}
.ripple:after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:0;height:0;
  background:color-mix(in srgb,var(--color-white) 35%,transparent);
  border-radius:var(--radius-round);
  transform:translate(-50%,-50%);
  transition:width .5s ease,height .5s ease,opacity .5s ease;
  opacity:0;
  pointer-events:none;
}
.ripple:active:after{
  width:300px;
  height:300px;
  opacity:1;
  transition:0s;
}

/* ===== Admin Badge (both themes) ===== */
.admin-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:linear-gradient(135deg,var(--color-gold),var(--color-gold-hover));
  color:var(--color-white);
  padding:3px 8px;
  border-radius:var(--radius-sm);
  font-size:var(--font-xs);
  font-weight:600;
}

/* ===== Admin Dashboard Styles (both themes) ===== */
.admin-dashboard{
  padding:8px 4px 24px;
  max-height:calc(100vh - 140px);
  overflow-y:auto;
}
.admin-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:24px;
}
.admin-stat-card{
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  padding:18px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.admin-stat-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-card);
  border-color:var(--color-gold-soft);
}
.admin-stat-card small{
  font-size:var(--font-sm);
  color:var(--color-muted);
  font-weight:500;
}
.admin-stat-card b{
  display:block;
  font-size:var(--font-3xl);
  font-weight:700;
  color:var(--color-brand);
  margin-top:4px;
  font-family:var(--font-heading);
}
.admin-stat-card .trend{
  font-size:var(--font-xs);
  color:var(--color-success);
  margin-top:6px;
  font-weight:500;
}

.admin-section{
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  padding:22px;
  margin-bottom:18px;
}
.admin-section h3{
  font-size:var(--font-xl);
  font-weight:600;
  margin:0 0 16px;
  font-family:var(--font-heading);
}

.admin-table{
  width:100%;
  border-collapse:collapse;
}
.admin-table th{
  text-align:left;
  padding:10px 12px;
  font-size:var(--font-xs);
  font-weight:600;
  color:var(--color-muted);
  border-bottom:2px solid var(--color-line);
  text-transform:uppercase;
  letter-spacing:.05em;
}
.admin-table td{
  padding:12px;
  font-size:var(--font-md);
  border-bottom:1px solid var(--color-line);
}
.admin-table tr:hover td{background:var(--color-surface-2)}

.admin-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.admin-actions button{
  padding:5px 10px;
  border-radius:var(--radius-sm);
  font-size:var(--font-xs);
  font-weight:500;
  cursor:pointer;
  border:1px solid var(--color-line);
  background:var(--color-surface);
  color:var(--color-muted);
  transition:background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}
.admin-actions button:hover{
  border-color:var(--color-brand);
  color:var(--color-brand);
  background:var(--color-brand-soft);
}
.admin-actions button.danger:hover{
  border-color:var(--color-error);
  color:var(--color-error);
  background:var(--color-error-soft);
}

.admin-dashboard::-webkit-scrollbar{width:6px}
.admin-dashboard::-webkit-scrollbar-track{background:transparent}
.admin-dashboard::-webkit-scrollbar-thumb{background:var(--color-line);border-radius:var(--radius-xs)}
.admin-dashboard::-webkit-scrollbar-thumb:hover{background:var(--color-line-strong)}

/* ===== Card hover lift (enhanced) ===== */
.feature-card,
.course-item,
.source-book,
.price-card,
.metric-card{
  transition:transform var(--transition-base),
             box-shadow var(--transition-base),
             border-color .3s ease;
}

/* ===== Button press effect ===== */
.primary-btn:active,
.ghost-btn:active{
  transform:translateY(0) scale(.97);
}

/* ===== Nav tab indicator animation ===== */
.nav-tab{
  position:relative;
}
.nav-tab.active:after{
  content:"";
  position:absolute;
  bottom:4px;
  left:50%;
  transform:translateX(-50%);
  width:20px;
  height:2px;
  background:var(--color-brand);
  border-radius:var(--radius-xs);
}

/* ===== Progress bar shimmer ===== */
@keyframes shimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
.mini-ability i b{
  background:linear-gradient(90deg,var(--color-brand),var(--color-gold-soft),var(--color-brand));
  background-size:200% 100%;
  animation:shimmer 3s ease-in-out infinite;
}

/* ===== Badge pulse effect for new items ===== */
@keyframes pulse-badge{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--color-brand) 40%,transparent)}
  50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--color-brand) 0%,transparent)}
}
.status-pill.pulse,
.status-pill.new{
  animation:pulse-badge 2s ease-in-out infinite;
}

/* ===== Stagger children animation ===== */
.course-list .course-item{
  opacity:0;
  transform:translateY(12px);
  animation:fadeUpItem .4s ease forwards;
}
.course-list .course-item:nth-child(1){animation-delay:.02s}
.course-list .course-item:nth-child(2){animation-delay:.06s}
.course-list .course-item:nth-child(3){animation-delay:.1s}
.course-list .course-item:nth-child(4){animation-delay:.14s}
.course-list .course-item:nth-child(5){animation-delay:150ms}
.course-list .course-item:nth-child(6){animation-delay:.22s}
.course-list .course-item:nth-child(7){animation-delay:.26s}
.course-list .course-item:nth-child(8){animation-delay:.3s}
.course-list .course-item:nth-child(9){animation-delay:.34s}
.course-list .course-item:nth-child(10){animation-delay:.38s}
@keyframes fadeUpItem{
  to{opacity:1;transform:translateY(0)}
}

/* ===== Tooltip style for buttons ===== */
[data-tooltip]{
  position:relative;
}
[data-tooltip]:hover:after{
  content:attr(data-tooltip);
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  background:var(--color-ink);
  color:var(--color-white);
  padding:6px 10px;
  border-radius:var(--radius-sm);
  font-size:var(--font-xs);
  white-space:nowrap;
  z-index:100;
  opacity:0;
  animation:tooltipIn var(--transition-fast) forwards;
}
@keyframes tooltipIn{
  to{opacity:1}
}

/* ===== Enhanced focus states ===== */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--color-brand);
  outline-offset:2px;
}

/* ===== Smooth number transitions ===== */
.hero-proof b,
.metric-card b,
.admin-stat-card b,
.ability-head b{
  transition:color .3s ease;
}

/* ===== Dashboard card icon hover ===== */
.feature-card .card-label{
  position:relative;
  padding-left:0;
  transition:padding-left .3s ease;
}
.feature-card:hover .card-label{
  padding-left:6px;
}

/* ===== Seals hover effect ===== */
.seal,
.cert-preview-seal,
.account-avatar,
.mini-seal,
.profile-avatar{
  transition:transform var(--transition-base),
             box-shadow .3s ease;
}
.seal:hover,
.cert-preview-seal:hover{
  transform:rotate(-6deg) scale(1.08);
}

/* ===== Text selection ===== */


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

/* ===== Responsive ===== */
@media(max-width:1050px){
  /* home-aux-grid在平板端保持双列 */
  .home-aux-grid{
    grid-template-columns:1fr 1fr;
    gap:var(--space-4);
    margin-top:var(--space-4);
  }
}
@media(max-width:900px){
  .cert-showcase-inner{grid-template-columns:1fr}
  .cert-showcase{padding:28px}
  .cert-showcase-copy h2{font-size:var(--font-2xl)}
  .admin-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .theme-switcher{display:none}
}
@media(max-width:600px){
  .cert-showcase{padding:20px}
  .cert-preview-card{max-width:300px}
  .admin-stats{grid-template-columns:1fr 1fr}
  .admin-section{padding:16px}
  .admin-table{font-size:var(--font-sm)}
  .admin-table th,.admin-table td{padding:8px}
}

/* ===== Keyframe Animations ===== */
@keyframes floatNode{
  from{transform:translateY(0)}
  to{transform:translateY(-8px)}
}

@keyframes toastIn{
  from{
    opacity:0;
    transform:translate(-50%,-20px) scale(.95);
  }
  to{
    opacity:1;
    transform:translate(-50%,0) scale(1);
  }
}

@keyframes pulseGlow{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--color-brand) 30%,transparent)}
  50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--color-brand) 0%,transparent)}
}

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

/* ── 认证考试导航条 + 计时器 ── */
.exam-header-bar{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding:12px 16px;background:var(--color-surface-3);border-radius:var(--radius-md);border:1px solid var(--color-line)}
.exam-timer{font:600 var(--font-2xl) var(--font-heading);color:var(--color-brand);min-width:60px;text-align:center;padding:6px 12px;background:var(--color-white);border-radius:var(--radius-md);border:1px solid var(--color-line)}
.exam-nav-pills{display:flex;flex-wrap:wrap;gap:4px;flex:1}
.exam-nav-pill{width:32px;height:32px;border-radius:var(--radius-button);border:1px solid var(--color-line);background:var(--color-white);cursor:pointer;font-size:var(--font-xs);font-weight:600;color:var(--color-muted);transition:background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);display:grid;place-items:center}
.exam-nav-pill:hover{border-color:var(--color-line-strong);background:var(--color-surface-2)}
.exam-nav-pill.active{background:var(--color-brand);color:var(--color-white);border-color:var(--color-brand)}
.exam-nav-pill.answered{background:var(--color-success-soft);color:var(--color-success);border-color:var(--color-success-soft)}
.exam-nav-pill.answered.active{background:var(--color-brand);color:var(--color-white);border-color:var(--color-brand)}
.exam-nav-pill.flagged{position:relative}
.exam-nav-pill.flagged::after{content:"!";position:absolute;top:-4px;right:-4px;width:14px;height:14px;border-radius:var(--radius-round);background:var(--color-brand);color:var(--color-white);font-size:9px;display:grid;place-items:center;font-weight:700}
.exam-stats{display:flex;gap:10px;font-size:var(--font-xs);color:var(--color-muted);white-space:nowrap}
.exam-unanswered{padding:4px 8px;background:var(--color-warning-soft);border-radius:var(--radius-sm);color:var(--color-warning)}
.exam-flagged-count{padding:4px 8px;background:var(--color-surface-3);border-radius:var(--radius-sm);color:var(--color-brand)}

/* Coursera 主题考试导航 */
body.theme-coursera .exam-header-bar{background:var(--color-brand-soft);border-color:var(--color-line-strong)}
body.theme-coursera .exam-timer{color:var(--color-brand);border-color:var(--color-line-strong)}
body.theme-coursera .exam-nav-pill.active{background:var(--color-brand);border-color:var(--color-brand)}
body.theme-coursera .exam-nav-pill.flagged::after{background:var(--color-brand)}
body.theme-coursera .exam-unanswered{background:var(--color-warning-soft);color:var(--color-warning)}

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

/* ===== Toast enhanced positioning ===== */
.toast{
  animation:toastIn .35s cubic-bezier(.4,0,.2,1);
  transform:translateX(-50%);
  left:50%;
}

/* ===== Hero nodes floating ===== */
.node{
  animation:floatNode 3s ease-in-out infinite alternate;
}
.node-a{animation-delay:0s}
.node-b{animation-delay:.5s}
.node-c{animation-delay:1s}

/* ===== Smooth view transitions ===== */
.view.active{
  animation:viewFadeIn .4s cubic-bezier(.4,0,.2,1);
}
@keyframes viewFadeIn{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* ===== Studio modal entrance ===== */
.studio.open .studio-body{
  animation:studioSlideUp .35s cubic-bezier(.4,0,.2,1);
}
@keyframes studioSlideUp{
  from{
    opacity:0;
    transform:translateY(30px) scale(.98);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* ===== Drawer slide animation ===== */
.notes-drawer.open,
.detail-drawer.open{
  animation:drawerSlideIn var(--transition-base);
}
@keyframes drawerSlideIn{
  from{
    transform:translateX(100%);
  }
  to{
    transform:translateX(0);
  }
}

/* ===== Button shine effect ===== */
.primary-btn{
  position:relative;
  overflow:hidden;
}
.primary-btn:before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--color-white) 20%,transparent),transparent);
  transition:left .6s ease;
}
.primary-btn:hover:before{
  left:100%;
}

/* ===== Card shine on hover ===== */
.feature-card,
.course-item,
.price-card,
.source-book{
  position:relative;
  overflow:hidden;
}
/* 带推荐徽章的卡片需要显示徽章，徽章在卡片上方 */
.price-card.featured,
.price-card.featured-enterprise{
  overflow:visible;
}
.feature-card:after,
.course-item:after,
.price-card:after,
.source-book:after{
  content:"";
  position:absolute;
  top:0;
  left:-75%;
  width:50%;
  height:100%;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--color-white) 40%,transparent),transparent);
  transform:skewX(-15deg);
  transition:left .6s ease;
  pointer-events:none;
  opacity:0;
}
.feature-card:hover:after,
.course-item:hover:after,
.price-card:hover:after,
.source-book:hover:after{
  left:125%;
  opacity:1;
}
/* ── Accordion / expand animation ── */
@keyframes expandDown{
  from{
    max-height:0;
    opacity:0;
  }
  to{
    max-height:500px;
    opacity:1;
  }
}

/* ── 空状态视觉体系 ── */
.empty-state-v2{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}
.empty-svg{width:120px;height:120px;margin-bottom:20px;color:var(--color-subtle);opacity:.6}
.empty-svg.coursera{color:var(--color-subtle)}
.empty-state-v2 h3{font:600 var(--font-xl) var(--font-heading);color:var(--color-muted);margin:0 0 8px}
.empty-state-v2 p{font-size:var(--font-base);color:var(--color-subtle);margin:0 0 20px;max-width:360px;line-height:1.6}
.empty-state-v2 .btn{background:var(--color-brand);color:var(--color-white);border:0;border-radius:var(--radius-pill);padding:10px 24px;font-size:var(--font-md);cursor:pointer;transition:var(--transition-fast)}
.empty-state-v2 .btn:hover{opacity:.9;transform:translateY(-1px)}
/* Coursera 空状态 */
body.theme-coursera .empty-state-v2 h3{font-family:var(--font-body);color:var(--color-muted)}
body.theme-coursera .empty-state-v2 p{color:var(--color-subtle)}
body.theme-coursera .empty-state-v2 .btn{background:var(--color-brand)}
.empty-icon-grid{display:flex;gap:8px;margin-bottom:20px;color:var(--color-subtle);opacity:.5}
body.theme-coursera .empty-icon-grid{color:var(--color-subtle)}
.empty-icon-grid svg{width:32px;height:32px}

/* ── 骨架屏 ── */
@keyframes skeletonPulse{0%{opacity:1}50%{opacity:.4}100%{opacity:1}}
.skeleton-wrap{animation:skeletonPulse 1.6s ease-in-out infinite;background:var(--color-surface-3);border-radius:var(--radius-md)}
body.theme-coursera .skeleton-wrap{background:var(--color-surface-3)}
.skeleton-card{height:160px;margin-bottom:16px}
.skeleton-line{height:14px;margin-bottom:10px;width:80%}
.skeleton-line:last-child{width:55%}
.skeleton-avatar{width:40px;height:40px;border-radius:var(--radius-round)}
.skeleton-thumb{width:100%;height:120px;border-radius:var(--radius-md);margin-bottom:10px}
.source-skeleton{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.source-skeleton .skeleton-card{height:200px;border-radius:var(--radius-lg)}
.course-skeleton{display:grid;grid-template-columns:1fr;gap:12px}
.course-skeleton .skeleton-card{height:80px;border-radius:var(--radius-md)}

/* ── 微交互增强 ── */
/* 按钮点击水波纹 */
.btn-ripple{position:relative;overflow:hidden}
.btn-ripple::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--x,50%) var(--y,50%),color-mix(in srgb,var(--color-white) 35%,transparent)0%,transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.btn-ripple:active::after{opacity:1}
/* 视图切换过渡 */
@keyframes viewSlideIn{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
.view-transition{animation:viewSlideIn .45s cubic-bezier(.22,1,.36,1) both}
/* 滚动触发淡入 */
.reveal{opacity:0;transform:translateY(30px);transition:background-color .6s cubic-bezier(.22,1,.36,1), color .6s cubic-bezier(.22,1,.36,1), border-color .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1), box-shadow .6s cubic-bezier(.22,1,.36,1), opacity .6s cubic-bezier(.22,1,.36,1)}
.reveal.visible{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
/* 数字跳动 */
@keyframes countUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.stat-count{animation:countUp .4s ease forwards}
/* 悬停微提升 */
.hover-lift{transition:transform var(--transition-base) cubic-bezier(.22,1,.36,1),box-shadow var(--transition-base)}
.hover-lift:hover{transform:translateY(-4px);box-shadow:0 12px 32px color-mix(in srgb,var(--color-black) 8%,transparent)}
/* 卡片入场队列 */
@keyframes cardSlideUp{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.card-enter{animation:cardSlideUp .4s cubic-bezier(.22,1,.36,1) both}
.card-enter:nth-child(1){animation-delay:.04s}
.card-enter:nth-child(2){animation-delay:.08s}
.card-enter:nth-child(3){animation-delay:.12s}
.card-enter:nth-child(4){animation-delay:.16s}
.card-enter:nth-child(5){animation-delay:.2s}
.card-enter:nth-child(6){animation-delay:.24s}
.card-enter:nth-child(7){animation-delay:.28s}
.card-enter:nth-child(8){animation-delay:.32s}
.card-enter:nth-child(9){animation-delay:.36s}
.card-enter:nth-child(10){animation-delay:.4s}
/* 平滑滚动 - 全文档 */
html{scroll-behavior:smooth}
/* Toast 动画增强 */
@keyframes toastSlideIn{from{transform:translateX(100%) scale(.9);opacity:0}to{transform:none;opacity:1}}
.toast-v2{animation:toastSlideIn .35s cubic-bezier(.34,1.56,.64,1) both}
/* 导航底条滑动 */
.nav-slider{position:absolute;bottom:0;height:2px;border-radius:var(--radius-xs);transition:left .3s cubic-bezier(.22,1,.36,1),width .3s}
body.theme-coursera .nav-slider{height:3px}


/* ── Hero 粒子背景 ── */
.hero-particles{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;border-radius:inherit}
.hero-particle{position:absolute;border-radius:var(--radius-round);background:radial-gradient(circle,color-mix(in srgb,var(--color-brand) 12%,transparent),transparent 70%);animation:particleFloat linear infinite;will-change:transform,opacity}
@keyframes particleFloat{0%{transform:translateY(0) translateX(0) scale(1);opacity:.6}50%{opacity:.3}100%{transform:translateY(-120px) translateX(60px) scale(.5);opacity:0}}
.hero-grid{position:relative;overflow:hidden}
.hero-grid::before{content:'';position:absolute;top:-50%;right:-20%;width:600px;height:600px;border-radius:var(--radius-round);background:radial-gradient(circle,color-mix(in srgb,var(--color-brand) 6%,transparent),transparent 60%);pointer-events:none;z-index:0;animation:glowPulse 8s ease-in-out infinite}
.hero-grid::after{content:'';position:absolute;bottom:-30%;left:-10%;width:400px;height:400px;border-radius:var(--radius-round);background:radial-gradient(circle,color-mix(in srgb,var(--color-gold-soft) 15%,transparent),transparent 60%);pointer-events:none;z-index:0;animation:glowPulse 10s ease-in-out infinite 2s}
@keyframes glowPulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.15);opacity:.5}}
body.theme-coursera .hero-particle{background:radial-gradient(circle,color-mix(in srgb,var(--color-brand) 10%,transparent),transparent 70%)}
body.theme-coursera .hero-grid::before{background:radial-gradient(circle,color-mix(in srgb,var(--color-brand) 5%,transparent),transparent 60%)}
body.theme-coursera .hero-grid::after{background:radial-gradient(circle,color-mix(in srgb,var(--color-info) 4%,transparent),transparent 60%)}

/* ── 错题复习卡片 ── */
.review-card{
  margin:0 0 20px;
  background:linear-gradient(135deg,var(--color-surface) 0%,var(--color-surface) 100%);
  border:1px solid var(--color-surface-3);
  border-radius:var(--radius-lg);
  overflow:hidden;
  animation:cardSlideUp .5s cubic-bezier(.22,1,.36,1) both;
}
.review-card.hidden{display:none!important}
.review-card-inner{padding:20px 24px}
.review-card-head{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-bottom:16px;
}
.review-icon{
  width:40px;height:40px;
  border-radius:var(--radius-md);
  background:linear-gradient(135deg,var(--color-brand),var(--color-gold-soft));
  color:var(--color-white);
  display:grid;
  place-items:center;
  flex-shrink:0;
}
.review-card-head h4{
  font:600 var(--font-lg) var(--font-heading);
  color:var(--color-ink);
  margin:0 0 4px;
}
.review-card-head p{
  font-size:var(--font-md);
  color:var(--color-muted);
  margin:0;
}
.review-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.review-item{
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  padding:16px;
  transition:transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.review-item:hover{
  border-color:var(--color-gold-soft);
  box-shadow:0 2px 8px color-mix(in srgb,var(--color-black) 4%,transparent);
}
.review-q{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:var(--font-base);
  color:var(--color-ink);
  font-weight:500;
  line-height:1.5;
  margin-bottom:12px;
}
.review-num{
  width:24px;height:24px;
  border-radius:var(--radius-round);
  background:var(--color-brand-soft);
  color:var(--color-brand);
  display:grid;
  place-items:center;
  font-size:var(--font-sm);
  font-weight:700;
  flex-shrink:0;
}
.review-ans{
  background:var(--color-surface-2);
  border-radius:var(--radius-button);
  padding:12px 14px;
  margin-bottom:12px;
  animation:expandDown .3s ease both;
}
.review-ans.hidden{display:none!important}
.review-correct{
  font-size:var(--font-md);
  color:var(--color-success);
  font-weight:600;
  margin-bottom:6px;
}
.review-why{
  font-size:var(--font-md);
  color:var(--color-muted);
  line-height:1.6;
}
.review-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
}
.mini-btn{
  padding:6px 14px;
  border-radius:var(--radius-button);
  font-size:var(--font-sm);
  font-weight:500;
  cursor:pointer;
  border:1px solid var(--color-line);
  background:var(--color-surface);
  color:var(--color-muted);
  transition:background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}
.mini-btn:hover{
  border-color:var(--color-brand);
  color:var(--color-brand);
  background:var(--color-brand-soft);
}
.mini-btn.primary{
  background:var(--color-brand);
  color:var(--color-white);
  border-color:var(--color-brand);
}
.mini-btn.primary:hover{
  opacity:.9;
  transform:translateY(-1px);
}
body.theme-coursera .review-card{
  background:linear-gradient(135deg,var(--color-brand-soft) 0%,var(--color-info-soft) 100%);
  border-color:var(--color-brand-soft);
}
body.theme-coursera .review-icon{
  background:linear-gradient(135deg,var(--color-brand),var(--color-info));
}
body.theme-coursera .review-num{
  background:var(--color-info-soft);
  color:var(--color-brand);
}

/* ── 诊断雷达图 ── */
.report-radar-wrap{
  display:flex;
  justify-content:center;
  margin:20px 0 24px;
}
.radar-chart{
  max-width:100%;
  height:auto;
}
.radar-chart text{
  font-family:var(--font-body);
}
body.theme-coursera .radar-chart polygon[fill*="rgba(123,32,38"]{
  fill:color-mix(in srgb,var(--color-brand) 8%,transparent);
}
body.theme-coursera .radar-chart polygon[stroke="var(--color-brand)"]:not([stroke-dasharray]){
  stroke:var(--color-brand);
}
body.theme-coursera .radar-chart circle[fill="var(--color-brand)"]{
  fill:var(--color-brand);
}

/* ── 主题切换过渡动画 ── */
body.theme-transitioning,
body.theme-transitioning *,
body.theme-transitioning *::before,
body.theme-transitioning *::after{
  transition:background-color 0.5s ease,
             color 0.5s ease,
             border-color 0.5s ease,
             fill 0.5s ease,
             stroke 0.5s ease,
             box-shadow 0.5s ease!important;
}

/* ── 课程测验样式 ── */
.quiz-shell{max-width:900px;margin:auto;padding:20px 0}
.quiz-shell .step-kicker{margin-bottom:16px}
.quiz-shell h2{font:600 clamp(22px,3vw,32px)/1.3 var(--font-heading);margin:0 0 24px;color:var(--color-ink)}
.quiz-result-score{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:20px 0}
.quiz-result-score b{font:600 var(--font-hero) var(--font-heading);color:var(--color-brand)}
.quiz-result-score small{font:var(--font-base) var(--font-body);color:var(--color-muted)}
.quiz-review{max-width:900px;margin:auto}
.quiz-review h3{font:600 var(--font-2xl) var(--font-heading);margin:0 0 20px;color:var(--color-ink)}
.quiz-review .review-item{display:flex;gap:14px;padding:16px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md);margin-bottom:12px}
.quiz-review .review-mark{width:28px;height:28px;border-radius:var(--radius-round);display:grid;place-items:center;font-size:var(--font-base);font-weight:700;flex-shrink:0}
.quiz-review .review-item:has(.review-mark[data-correct="true"]) .review-mark{background:var(--color-success-soft);color:var(--color-success)}
.quiz-review .review-item:has(.review-mark[data-correct="false"]) .review-mark{background:var(--color-error-soft);color:var(--color-error)}
.quiz-review .review-correct{color:var(--color-success);font-weight:600;margin:6px 0}
.quiz-review small{color:var(--color-muted);font-size:var(--font-sm);line-height:1.6;display:block;margin-top:8px}

/* Coursera theme quiz */
body.theme-coursera .quiz-result-score b{color:var(--color-brand)}
body.theme-coursera .quiz-review .review-item:has(.review-mark[data-correct="true"]) .review-mark{background:var(--color-success-soft);color:var(--color-success)}
body.theme-coursera .quiz-review .review-item:has(.review-mark[data-correct="false"]) .review-mark{background:var(--color-error-soft);color:var(--color-error)}

/* ── 移动端响应式优化 ── */
@media(max-width:680px){
  .exam-nav-pill{width:36px;height:36px;font-size:var(--font-sm);border-radius:var(--radius-sm)}
  .exam-header-bar{flex-wrap:wrap;gap:8px;padding:10px 12px}
  .exam-stats{width:100%;justify-content:center}
  .exam-timer{font-size:var(--font-lg);padding:4px 10px}
  .quiz-result-score b{font-size:var(--font-hero)}
  .comp-grid,.weld-grid{grid-template-columns:repeat(2,1fr)}
  .corr-grades{gap:6px}
  .corr-grade-tag{padding:5px 10px;font-size:var(--font-sm)}
  .cert-preview-card{
    max-width:280px;
    transform:none!important;
    margin:0 auto;
  }
  .cert-preview-card:hover{
    transform:scale(1.02)!important;
  }
  .cert-preview-body{padding:24px 20px 20px}
  .cert-preview-seal{width:80px;height:80px}
  .cert-showcase-features span{
    font-size:var(--font-sm);
    padding:6px 10px;
  }
  .evidence-card span,.choice-card span{
    font-size:var(--font-xs);
    letter-spacing:.08em;
  }
}
@media(max-width:640px){
  .cert-showcase{padding:var(--space-5) var(--space-4)}
  .cert-showcase-inner{gap:var(--space-5)}
  .outcome-strip{flex-direction:column;gap:var(--space-3);text-align:center}
  .outcome-list{justify-content:center}
  .dashboard-head{flex-direction:column;align-items:flex-start;gap:var(--space-1)}
  .home-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .home-tabs::-webkit-scrollbar{display:none}
  .home-tab{flex-shrink:0}
  .checkin-card{padding:var(--space-4)}
  .continue-card{padding:var(--space-4)}
  .feature-card{padding:var(--space-4)}
  .certificate-toolbar{
    flex-wrap:wrap;
    gap:var(--space-2);
  }
  .certificate-toolbar .hero-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-2);
    width:100%;
  }
  .certificate-toolbar .ghost-btn,
  .certificate-toolbar .primary-btn{
    width:100%;
    min-height:44px;
    justify-content:center;
    font-size:var(--font-sm);
    padding:var(--space-2) var(--space-3);
  }
}

/* ── Critical mobile overrides (loaded last, wins cascade) ── */
@media(max-width:640px){
  .auth-card{
    border-radius:0!important;
    border:0!important;
    box-shadow:none!important;
    background:transparent!important;
  }
  .auth-shell,.payment-shell,.exam-shell,.certificate-stage{
    max-width:100%!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }
  .auth-main{
    padding:var(--space-4) 0!important;
  }
  .auth-aside{
    display:none!important;
  }
  .ranking-board{
    border-radius:var(--radius-lg)!important;
  }
  .account-panel,.order-card,.pay-method-card,.activation-card,
  .exam-question,.report-card,.verification-box,.certificate-mini{
    border-radius:var(--radius-lg)!important;
  }
  .payment-method{
    padding:var(--space-3)!important;
  }
  /* Ensure text inputs have 16px font to prevent iOS zoom */
  input[type="text"],input[type="password"],input[type="email"],
  input[type="tel"],input[type="number"],input[type="search"],
  select,textarea{
    font-size:16px!important;
  }
  /* Home hero proof stats 2x2 grid */
  .hero-proof{
    display:grid!important;
    grid-template-columns:repeat(2,1fr)!important;
    gap:var(--space-2)!important;
  }
  .hero-proof span{
    padding:var(--space-3)!important;
  }
  .hero-proof b{
    font-size:var(--font-2xl)!important;
  }
  /* Home aux grid: stacked below hero on mobile */
  .home-aux-grid{
    grid-template-columns:1fr;
    gap:var(--space-3);
    margin-top:var(--space-4);
  }
  .home-aux-grid .ranking-card,
  .home-aux-grid .faq-quick-card{
    margin-top:0!important;
    padding:var(--space-4);
  }
  /* Hero copy title adjustments */
  .hero-copy h1{
    font-size:clamp(22px,7vw,30px)!important;
    word-break:auto-phrase!important;
    overflow-wrap:break-word!important;
    line-height:1.35!important;
    letter-spacing:-.02em!important;
  }
  .edition-line{
    font-size:var(--font-xs);
    padding-left:var(--space-4);
  }
  /* Stats and calendar: single column */
  .stats-calendar-grid{
    grid-template-columns:1fr!important;
    gap:var(--space-4)!important;
  }
  .stat-item{
    padding:var(--space-3)!important;
  }
  .study-calendar{
    padding:var(--space-4)!important;
  }
  /* View head stacked */
  .view-head{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:var(--space-3)!important;
  }
  .curriculum-tools{
    width:100%!important;
    flex-direction:column!important;
  }
  /* KB tabs wrap */
  .kb-tabs{
    flex-wrap:wrap!important;
    gap:var(--space-1)!important;
  }
  .kb-toolbar{
    flex-direction:column!important;
    gap:var(--space-2)!important;
  }
  /* Source gallery single column */
  .source-gallery{
    grid-template-columns:1fr!important;
  }
  /* Tools page gallery */
  .tools-page-gallery{
    grid-template-columns:repeat(2,1fr)!important;
    gap:var(--space-3)!important;
  }
  /* Cert showcase no 3D */
  .cert-preview-card{
    transform:none!important;
    max-width:260px!important;
    margin:0 auto!important;
  }
  .cert-showcase-inner{
    grid-template-columns:1fr!important;
    gap:var(--space-5)!important;
  }
  .cert-showcase{
    padding:var(--space-5) var(--space-4)!important;
  }
  /* Outcome strip stacked */
  .outcome-strip{
    flex-direction:column!important;
    gap:var(--space-3)!important;
    text-align:center!important;
  }
  .outcome-list{
    justify-content:center!important;
  }
  /* Ensure no horizontal scroll */
  .app-shell,.view{
    max-width:100%!important;
    overflow-x:clip!important;
    overflow-y:visible!important;
  }
  /* Hero grid min-height reset */
  .hero-grid{
    min-height:auto!important;
  }
  /* Home tabs scrollable */
  .home-tabs{
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
    flex-wrap:nowrap!important;
    width:100%!important;
  }
  .home-tabs .home-tab{
    flex-shrink:0!important;
    white-space:nowrap!important;
  }
  /* Footer */
  .site-footer{
    padding-bottom:calc(80px + var(--space-6))!important;
  }
  .footer-links{
    flex-direction:column!important;
    gap:var(--space-1)!important;
    align-items:center!important;
  }
  /* Report section */
  .study-report-section{
    padding:0 var(--space-4);
  }
  .report-card{
    padding:var(--space-4)!important;
  }
}

/* =========================================================
   UI/UX 细节打磨修复 v6.1
   ========================================================= */

/* ── 1. Toast 在移动端上浮到导航栏以上 ── */
@media(max-width:640px){
  .toast{
    bottom:calc(76px + env(safe-area-inset-bottom))!important;
    z-index:300;
  }
}

/* ── 2. 底部导航栏文字不小于12px ── */
@media(max-width:640px){
  .bottom-tab span{
    font-size:12px!important;
  }
  .bottom-tab{
    padding:4px 2px 2px;
    gap:2px;
  }
  .bottom-tab svg{
    width:20px;
    height:20px;
  }
}

/* ── 3. 按钮点击按压反馈（补充更多按钮类型） ── */
.primary-btn:active,
.ghost-btn:active,
.secondary-btn:active,
.outline-btn:active,
.page-tool-card:active,
.source-book:active,
.course-item:active,
.price-card:active,
.faq-q:active,
.choice-card:active,
.decision-option:active,
.exam-option:active,
.tyc-result-item:active,
.quick-nav-item:active,
.role-card:active,
.select-tag:active,
.evidence-buttons button:active,
.family-tabs button:active{
  transform:scale(.97);
}
.mini-link:active,
.text-btn:active{
  opacity:.7;
}
.bottom-tab:active{
  transform:scale(.92);
}
/* 确保 disabled 按钮不触发按压效果 */
.primary-btn:disabled:active,
.ghost-btn:disabled:active,
.secondary-btn:disabled:active{
  transform:none;
}

/* ── 4. 按钮旋转加载器 ── */
.btn-spinner{
  display:inline-block;
  width:16px;
  height:16px;
  border:2px solid color-mix(in srgb,currentColor 35%,transparent);
  border-top-color:currentColor;
  border-radius:50%;
  animation:btnSpin .7s linear infinite;
  vertical-align:-3px;
  margin-right:6px;
}
@keyframes btnSpin{
  to{transform:rotate(360deg)}
}

/* ── 5. 输入框错误状态样式 ── */
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea{
  border-color:var(--color-error)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-error) 12%,transparent)!important;
}
.form-field.has-error label{
  color:var(--color-error);
}

/* ── 6. textarea 聚焦样式（与 input/select 一致） ── */
.form-field textarea{
  width:100%;
  border:1px solid var(--color-line);
  background:var(--color-surface-2);
  border-radius:var(--radius-md);
  padding:12px 13px;
  outline:none;
  resize:vertical;
  font-family:inherit;
  transition:border-color var(--transition-fast),box-shadow var(--transition-fast);
}
.form-field textarea:focus{
  border-color:var(--color-gold);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-brand) 8%,transparent);
}
.request-std-form textarea,
.request-std-form input{
  width:100%;
  border:1px solid var(--color-line);
  background:var(--color-surface-2);
  border-radius:var(--radius-md);
  padding:12px 13px;
  outline:none;
  font-family:inherit;
  transition:border-color var(--transition-fast),box-shadow var(--transition-fast);
}
.request-std-form textarea:focus,
.request-std-form input:focus{
  border-color:var(--color-gold);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-brand) 8%,transparent);
}

/* ── 7. 移动端按钮最小触摸区域 44px ── */
@media(max-width:640px){
  .primary-btn,
  .ghost-btn,
  .secondary-btn{
    min-height:44px;
  }
  .nav-tab{
    min-height:44px;
  }
  .home-tab{
    min-height:44px;
    padding:10px 16px;
  }
  .icon-btn{
    min-width:44px;
    min-height:44px;
  }
  .mini-link{
    min-height:32px;
    padding:6px 8px;
  }
}

/* ── 8. 搜索框和工具栏在移动端适配 ── */
@media(max-width:640px){
  .search-box{
    min-height:44px;
  }
  .search-box input{
    font-size:16px!important;
  }
  .kb-tabs button{
    min-height:36px;
    padding:8px 12px;
    font-size:var(--font-sm);
  }
}

/* ── 9. 加载提示样式优化 ── */
.loading-hint{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:60px 20px;
  color:var(--color-muted);
  font-size:var(--font-base);
}
.loading-hint::before{
  content:"";
  width:20px;
  height:20px;
  border:2px solid var(--color-line-strong);
  border-top-color:var(--color-brand);
  border-radius:50%;
  animation:btnSpin .8s linear infinite;
  flex-shrink:0;
}

/* 工具页骨架屏 */
.tools-skeleton{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:12px;
  padding:0;
}
@media(max-width:640px){
  .tools-skeleton{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .source-skeleton{
    grid-template-columns:1fr!important;
  }
}

/* ── 10. 空状态在小屏幕的间距优化 ── */
@media(max-width:640px){
  .empty-state,
  .empty-state-v2{
    padding:40px 16px!important;
  }
  .empty-state-v2 h3{
    font-size:var(--font-lg)!important;
  }
  .empty-state-v2 p{
    font-size:var(--font-sm)!important;
  }
  .faq-empty{
    padding:40px 16px;
  }
}

/* ── 11. 浮动CTA在z-index上不遮挡底部导航 ── */
.floating-cta-bar{
  z-index:90;
}
@media(max-width:640px){
  .floating-cta-bar.show{
    bottom:calc(56px + env(safe-area-inset-bottom))!important;
  }
  /* 浮动CTA显示时，增加底部留白防止内容被遮挡 */
  body.floating-cta-visible .app-shell{
    padding-bottom:calc(136px + env(safe-area-inset-bottom))!important;
  }
}

/* ── 12. 移动端studio弹层中输入框不被键盘遮挡 ── */
@media(max-width:640px){
  .studio.open{
    padding-bottom:0;
  }
  .studio-body{
    -webkit-overflow-scrolling:touch;
    padding-bottom:20px;
  }
}

/* ── 13. TYC 结果字体不小于12px ── */
.tyc-source-tag,
.tyc-status,
.tyc-tag{
  font-size:11px!important;
}
@media(max-width:640px){
  .tyc-source-tag,
  .tyc-status,
  .tyc-tag{
    font-size:12px!important;
  }
  .tyc-item-info,
  .tyc-item-addr,
  .tyc-item-hint{
    font-size:12px!important;
  }
}

/* ── 14. 认证弹窗中按钮在移动端全宽且触摸区域够大 ── */
@media(max-width:640px){
  .auth-submit{
    min-height:48px;
    font-size:var(--font-base);
  }
  .form-field input,
  .form-field select{
    min-height:44px;
    font-size:16px!important;
  }
  .pwd-toggle{
    min-width:44px;
    min-height:44px;
  }
  /* 全局：移动端所有输入框字号16px防止iOS自动缩放 */
  input,
  textarea,
  select{
    font-size:16px!important;
  }
  /* 但复选框和单选框保持原有大小 */
  input[type="checkbox"],
  input[type="radio"]{
    font-size:inherit!important;
  }
}

/* ── 15. 网络错误提示样式 ── */
.network-error-banner{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  background:var(--color-error-soft);
  border:1px solid color-mix(in srgb,var(--color-error) 30%,transparent);
  border-radius:var(--radius-md);
  color:var(--color-error);
  font-size:var(--font-sm);
  margin-bottom:16px;
}
.network-error-banner button{
  margin-left:auto;
  background:var(--color-error);
  color:var(--color-white);
  border:0;
  border-radius:var(--radius-sm);
  padding:6px 12px;
  font-size:var(--font-xs);
  cursor:pointer;
}

/* ── 16. 移动端首页今日学习tab未登录时引导更友好 ── */
@media(max-width:640px){
  .hero-auth-link{
    display:block!important;
    width:100%;
    margin-top:8px;
  }
  .hero-auth-link button{
    width:100%;
    min-height:44px;
    border:1px solid var(--color-brand);
    background:transparent;
    color:var(--color-brand);
    border-radius:var(--radius-button);
    font-size:var(--font-base);
    font-weight:600;
  }
}

/* ── Back to Top Button ── */
.back-to-top{
  position:fixed;
  bottom:24px;
  right:24px;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid var(--color-line);
  background:var(--color-surface);
  color:var(--color-brand);
  box-shadow:var(--shadow-md);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity var(--transition-fast), transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
  z-index:900;
  padding:0;
}
.back-to-top:hover{
  background:var(--color-brand-soft, color-mix(in srgb, var(--color-brand) 8%, var(--color-surface)));
  box-shadow:var(--shadow-lg, 0 8px 24px color-mix(in srgb,var(--color-ink) 12%,transparent));
  transform:translateY(0);
}
.back-to-top:active{
  transform:translateY(2px);
}
.back-to-top.visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.back-to-top svg{
  display:block;
}
@media(max-width:640px){
  .back-to-top{
    bottom:16px;
    right:16px;
    width:40px;
    height:40px;
  }
  .back-to-top svg{
    width:18px;
    height:18px;
  }
}

/* =========================================================
   v6.1 UI Fixes - Hero contrast & Course card status
   ========================================================= */

/* ── 1. Hero 区域文字对比度修复（WCAG AA 4.5:1） ── */

/* Hero 描述段落：从 --color-muted 提升到 --color-body，确保正文对比度 */
.hero-copy > p {
  color: var(--color-body);
}

/* Hero 信任行（小字）：提升到 --color-body 保证 xs 字号下可读 */
.trust-row {
  color: var(--color-body);
}

/* Hero 数据证明区小标签：从 --color-muted 提升到 --color-body */
.hero-proof > span > small {
  color: var(--color-body);
}

/* Hero edition-line 眉题文字保持 --color-muted 但加深一级到 --color-body 以确保在渐变背景上可读 */
.edition-line {
  color: var(--color-body);
  font-weight: var(--weight-medium);
}

/* 专业蓝白主题（Coursera）下 hero 描述也确保对比度 */
body.theme-coursera .hero-copy > p {
  color: var(--color-body);
}
body.theme-coursera .trust-row {
  color: var(--color-body);
}
body.theme-coursera .hero-proof > span > small {
  color: var(--color-body);
}

/* ── 2. 课程卡片状态视觉区分 ── */

/* 已完成课程：v6.1 — 简洁胶囊徽章风格
   v6.0 旧设计 = 绿色三角形对折页 + 白色对勾；
   问题 1（用户反馈）：三角形折页造型过抢戏，不优雅
   问题 2（v6.0 BUG）：当卡片同时 .completed + .recommended 时，
                       .recommended:before { left:0; top:0 } 与 .completed::before { right:0; top:0 }
                       同 specificity（0,3,0）且设置不同 left/right，结果 width:0 + left=0 把对折页
                       钉死在卡片 **左上角**（理想位置是右上角）
   修法：移除原 ::before 三角形 / ::after 对勾，用 .completed > header > .course-badge "已完成"
         胶囊统一接管已完成的视觉信号；同时显式重置兼容性 .recommended.completed::before */
.course-item.completed {
  border-color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 4%, var(--color-surface));
}
/* 关闭 v6.0 的"折页+对勾"造型 */
.course-item.completed::before,
.course-item.completed::after {
  display: none;
}
/* 重点：把视觉信号搬到 header 区 JS 渲染的"已完成"徽章 */
.course-item.completed > header > .course-badge {
  color: var(--color-white);
  background: var(--color-success);
  border-color: var(--color-success);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 10px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
/* BUG 修复：即使 display:none 也要显式重置 left:auto，让计算样式不留隐患 */
.course-item.recommended.completed::before,
.course-item.completed.recommended::before {
  left: auto;
  top: auto;
}

/* 会员锁定课程：金色边框 + 右上角锁图标徽章，移除过重的全屏遮罩 */
.course-item.member-locked {
  border-color: var(--color-gold-soft);
  background: var(--color-surface);
  cursor: pointer;
  opacity: 1;
}
.course-item.member-locked::before {
  content: "VIP";
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(135deg, var(--color-gold), var(--color-warning));
  color: var(--color-white);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 4px 6px 4px 14px;
  border-radius: 0 0 0 10px;
  z-index: 2;
  line-height: 1;
}
/* 覆盖 platform-v5.css 中过重的全屏遮罩，改为柔和提示 */
.course-item.member-locked::after {
  content: "";
  position: absolute;
  inset: auto -35px -65px auto;
  width: 120px;
  height: 120px;
  border: 1px solid color-mix(in srgb, var(--color-gold) 15%, transparent);
  border-radius: var(--radius-round);
  background: transparent;
  backdrop-filter: none;
  display: block;
}
.course-item.member-locked h3 {
  color: var(--color-ink);
}

/* ── 密码强度指示器（4段式） ── */
body .pwd-strength {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
body .pwd-strength .pwd-strength-bar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 8px;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
body .pwd-strength .pwd-strength-bar span {
  flex: 1;
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--color-line);
  transition: background-color 0.3s ease;
  width: auto;
}
body .pwd-strength .pwd-strength-text {
  font-size: var(--font-xs, 11px);
  font-weight: var(--weight-medium, 500);
  white-space: nowrap;
  min-width: 28px;
  transition: color 0.3s ease;
}
/* Level 1 - 弱 (red) */
body .pwd-strength[data-level="1"] .pwd-strength-bar span:nth-child(1) {
  background: var(--color-error);
}
body .pwd-strength[data-level="1"] .pwd-strength-text {
  color: var(--color-error);
}
/* Level 2 - 中 (orange/warning) */
body .pwd-strength[data-level="2"] .pwd-strength-bar span:nth-child(-n+2) {
  background: var(--color-warning);
}
body .pwd-strength[data-level="2"] .pwd-strength-text {
  color: var(--color-warning);
}
/* Level 3 - 强 (green/success) */
body .pwd-strength[data-level="3"] .pwd-strength-bar span:nth-child(-n+3) {
  background: var(--color-success);
}
body .pwd-strength[data-level="3"] .pwd-strength-text {
  color: var(--color-success);
}
/* Level 4 - 很强 (green/success) */
body .pwd-strength[data-level="4"] .pwd-strength-bar span:nth-child(-n+4) {
  background: var(--color-success);
}
body .pwd-strength[data-level="4"] .pwd-strength-text {
  color: var(--color-success);
}
/* Hide legacy fill element from old single-bar design */
.pwd-strength-fill { display: none; }
.course-item.member-locked .course-badge {
  color: var(--color-warning);
  border-color: var(--color-gold-soft);
  background: var(--color-warning-soft);
}
/* 锁定课程hover效果 */
.course-item.member-locked.open:hover {
  border-color: var(--color-gold);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-gold) 15%, transparent);
}

/* =========================================================
   UI/UX Polish - v11 上线前打磨
   基于 WCAG 2.2 AA、ui-ux-polish skill 指南
   ========================================================= */

/* ── 1. Toast 经典主题语义色和毛玻璃 ── */
.toast.success{border-left:4px solid var(--color-success);}
.toast.error{border-left:4px solid var(--color-error);}
.toast.info{border-left:4px solid var(--color-brand);}
.toast.warning{border-left:4px solid var(--color-warning);}
.toast{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}

/* ── 2. 经典主题骨架屏 shimmer 动画 ── */
@keyframes shimmer{
  0%{background-position:-200% 0;}
  100%{background-position:200% 0;}
}
.skeleton-wrap{
  background:linear-gradient(90deg,var(--color-surface-3) 25%,color-mix(in srgb,var(--color-surface-3) 60%,var(--color-surface)) 50%,var(--color-surface-3) 75%);
  background-size:200% 100%;
  animation:shimmer 1.8s ease-in-out infinite;
}

/* ── 3. 按钮 loading 状态 ── */
.primary-btn.loading,.secondary-btn.loading,.outline-btn.loading,.auth-submit.loading{
  pointer-events:none;
  cursor:wait;
  opacity:.8;
}

/* ── 4. 缺失的 :active 按压反馈 ── */
.quiet-btn:active,.text-btn:active,.icon-btn:active,.mini-link:active,
.segmented button:active,.calc-tabs button:active,.tools-filter button:active,
.grade-type-filter button:active,.faq-cat-btn:active,.kb-tabs button:active,
.page-tools-filter button:active,.nav-tab:active,
.board-source-link:active,.board-refresh:active,
.tyc-search-btn:active,.tyc-select-btn:active,.quick-nav-item:active,
.pwd-toggle:active{
  transform:scale(.97);
}
.choice-card:active,.decision-option:active,.evidence-card:active,
.select-tag:active,.family-tabs button:active,.evidence-buttons button:active{
  transform:scale(.98);
}
.qr-code-item:active{transform:scale(.97);}

/* ── 5. 缺失的 hover 效果 ── */
.evidence-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:var(--color-line-strong);
}
.family-tabs button:hover{
  border-color:var(--color-brand);
  color:var(--color-brand);
  background:var(--color-brand-soft);
}
.evidence-buttons button:hover{
  border-color:var(--color-line-strong);
  background:var(--color-surface);
}
.tyc-result-item:hover{background:var(--color-brand-soft);}
.weld-item:hover{border-color:var(--color-brand);background:var(--color-brand-soft);}
.corr-env-card:hover{border-color:var(--color-brand);transform:translateY(-1px);box-shadow:var(--shadow-sm);}
.num-item:hover{border-color:var(--color-brand);}
.mini-use:hover{border-color:var(--color-brand);}
.seal:hover{transform:rotate(-6deg) scale(1.08);}

/* ── 6. 触摸目标增大 (桌面端≥36px, 移动端≥44px) ── */
.fav-btn{width:36px;height:36px;}
.feedback-btn{width:36px;height:36px;}
.feedback-close{width:36px;height:36px;}
.mobile-nav-close{width:40px;height:40px;}
.sheet-close{width:40px;height:40px;display:grid;place-items:center;}
.pwd-toggle{min-width:36px;min-height:36px;}
.mini-btn{min-height:32px;}
@media(max-width:640px){
  .fav-btn{width:44px;height:44px;}
  .feedback-btn{width:44px;height:44px;}
  .feedback-close{width:44px;height:44px;}
  .mobile-nav-close{width:48px;height:48px;}
  .pwd-toggle{min-width:44px;min-height:44px;}
  .mini-btn{min-height:44px;}
}

/* ── 7. 表单一致性：textarea/verification focus ring ── */
.teachback textarea:focus,.notes-drawer textarea:focus,.verification-form input:focus{
  border-color:var(--color-brand);
  box-shadow:0 0 0 3px var(--color-brand-ring);
  outline:none;
}

/* ── 8. 输入框/选择框 focus 全局统一 ── */
input:focus,select:focus,textarea:focus,button:focus{
  /* 已由 *:focus-visible 处理，此处确保outline:none但有ring */
}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;
}

/* ── 9. 暗色书籍卡片文字对比度修复 ── */
.source-book.book-b p,.source-book.book-e p,.source-book.book-c p,
.source-book.book-en p{
  color:rgba(255,255,255,.85);
  opacity:1;
}

/* ── 10. 滚动条美化 ── */
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--color-ink) 15%,transparent);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--color-ink) 25%,transparent);}

/* ── 11. 选中文字颜色 ── */
::selection{background:var(--color-brand-soft);color:var(--color-brand);}

/* ── 12. 按钮cursor ── */
button:disabled,.primary-btn:disabled,.secondary-btn:disabled,.outline-btn:disabled{
  cursor:not-allowed;
  opacity:.6;
}

/* ── 13. 链接hover下划线动画 ── */
.mini-link,.text-btn{position:relative;}
.mini-link:after,.text-btn:after{
  content:"";
  position:absolute;
  bottom:0;left:0;
  width:0;height:1px;
  background:currentColor;
  transition:width var(--transition-fast);
}
.mini-link:hover:after,.text-btn:hover:after{width:100%;}

/* ── 14. 卡片/按钮进入动画 (stagger) ── */
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}
.animate-in{animation:fadeInUp .3s ease-out both;}

/* ── 15. 错误抖动动画 ── */
@keyframes shake{
  0%,100%{transform:translateX(0);}
  20%,60%{transform:translateX(-4px);}
  40%,80%{transform:translateX(4px);}
}
.shake{animation:shake .4s ease-out;}

/* ── 16. 专业主题seal修复（不旋转） ── */
body.theme-coursera .seal:hover{
  transform:none;
  background:var(--color-brand-hover);
}
body.theme-coursera .seal{transition:background-color var(--transition-base);}

/* ── 17. 清理transition裸值 - theme-coursera-polish/ux 兼容处理 ── */
.pwd-strength-fill{transition:width var(--transition-base),background-color var(--transition-base)!important;}
.pwd-strength-text{transition:color var(--transition-base)!important;}
.input-hint{transition:color var(--transition-fast)!important;}
.pwd-toggle{transition:color var(--transition-fast),background-color var(--transition-fast),transform var(--transition-fast)!important;}

/* =========================================================
   现代深色主题 (Converge Enter 风格) 增强样式
   近黑背景、Instrument Sans、极简边框、微光效果
   ========================================================= */
body.theme-modern-dark{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  letter-spacing:-0.005em;
}

/* 标题更紧凑的字距（Converge风格：大标题-0.02em） */
body.theme-modern-dark h1{letter-spacing:-0.025em;line-height:1.15;font-weight:500;}
body.theme-modern-dark h2{letter-spacing:-0.02em;line-height:1.2;font-weight:500;}
body.theme-modern-dark h3{letter-spacing:-0.012em;line-height:1.3;font-weight:500;}
body.theme-modern-dark .hero-title,.home-hero h1{letter-spacing:-0.03em;line-height:1.1;}

/* 输入框placeholder颜色 */
body.theme-modern-dark input::placeholder,
body.theme-modern-dark textarea::placeholder{color:var(--color-subtle);}

/* 滚动条深色模式适配 */
body.theme-modern-dark ::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.1);
}
body.theme-modern-dark ::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.2);
}

/* 选中色深色模式 */
body.theme-modern-dark ::selection{
  background:color-mix(in srgb,var(--color-brand) 35%,transparent);
  color:var(--color-white);
}

/* 卡片微妙顶部高光（Converge风格内发光） */
body.theme-modern-dark .metric-card,
body.theme-modern-dark .tool-card,
body.theme-modern-dark .evidence-card,
body.theme-modern-dark .lesson-card,
body.theme-modern-dark .exam-option,
body.theme-modern-dark .payment-method,
body.theme-modern-dark .profile-card,
body.theme-modern-dark .settings-card,
body.theme-modern-dark .invoice-card,
body.theme-modern-dark .source-book{
  position:relative;
  background:var(--color-surface);
  border:1px solid var(--color-line);
}
body.theme-modern-dark .metric-card:hover,
body.theme-modern-dark .tool-card:hover,
body.theme-modern-dark .evidence-card:hover,
body.theme-modern-dark .lesson-card:hover{
  border-color:var(--color-line-strong);
}

/* 主按钮：深色模式下实心品牌色+微妙发光 */
body.theme-modern-dark .primary-btn{
  background:var(--color-brand);
  color:var(--color-white);
  border:1px solid transparent;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 2px 8px color-mix(in srgb,var(--color-brand) 30%,transparent);
}
body.theme-modern-dark .primary-btn:hover{
  background:var(--color-brand-hover);
  box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 6px 20px color-mix(in srgb,var(--color-brand) 45%,transparent);
}
body.theme-modern-dark .outline-btn{
  background:transparent;
  color:var(--color-ink);
  border:1px solid var(--color-line-strong);
}
body.theme-modern-dark .outline-btn:hover{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.2);
}
body.theme-modern-dark .ghost-btn{
  background:rgba(255,255,255,.04);
  color:var(--color-body);
  border:1px solid transparent;
}
body.theme-modern-dark .ghost-btn:hover{
  background:rgba(255,255,255,.08);
  color:var(--color-ink);
}
body.theme-modern-dark .secondary-btn{
  background:var(--color-surface-2);
  color:var(--color-ink);
  border:1px solid var(--color-line);
}
body.theme-modern-dark .secondary-btn:hover{
  background:var(--color-surface-3);
  border-color:var(--color-line-strong);
}

/* 顶部导航栏深色模式 - 毛玻璃效果 */
body.theme-modern-dark .top-bar{
  background:rgba(10,10,11,.7);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--color-line);
}

/* 搜索框深色模式 */
body.theme-modern-dark .search-box{
  background:var(--color-surface);
  border:1px solid var(--color-line);
}
body.theme-modern-dark .search-box:focus-within{
  border-color:var(--color-brand);
  box-shadow:0 0 0 3px var(--color-brand-ring);
  background:var(--color-surface);
}

/* 标签页深色模式 */
body.theme-modern-dark .home-tabs button.home-tab{
  color:var(--color-muted);
}
body.theme-modern-dark .home-tabs button.home-tab.active{
  color:var(--color-ink);
  background:var(--color-surface-2);
}

/* 底部导航深色模式 */
body.theme-modern-dark .bottom-nav{
  background:rgba(17,17,19,.85);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-top:1px solid var(--color-line);
}

/* 表单输入框深色模式 */
body.theme-modern-dark .form-field input,
body.theme-modern-dark .form-field select,
body.theme-modern-dark .calc-input input,
body.theme-modern-dark .calc-input select{
  background:var(--color-surface);
  border:1px solid var(--color-line);
  color:var(--color-ink);
}
body.theme-modern-dark .form-field input:focus,
body.theme-modern-dark .form-field select:focus,
body.theme-modern-dark .calc-input input:focus,
body.theme-modern-dark .calc-input select:focus{
  background:var(--color-surface);
  border-color:var(--color-brand);
  box-shadow:0 0 0 3px var(--color-brand-ring);
}

/* Drawer/Sheet深色模式 */
body.theme-modern-dark .drawer,
body.theme-modern-dark .sheet{
  background:var(--color-surface);
  border-color:var(--color-line);
}
body.theme-modern-dark .drawer-backdrop,
body.theme-modern-dark .sheet-backdrop,
body.theme-modern-dark .modal-backdrop{
  background:rgba(0,0,0,.7);
}
body.theme-modern-dark .modal{
  background:var(--color-surface);
  border:1px solid var(--color-line);
  box-shadow:var(--shadow-modal);
}

/* Toast深色模式 */
body.theme-modern-dark .toast{
  background:var(--color-surface-2);
  border:1px solid var(--color-line);
  color:var(--color-ink);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
}

/* 徽章/状态胶囊深色模式 */
body.theme-modern-dark .badge{
  background:var(--color-surface-3);
  color:var(--color-body);
  border:1px solid var(--color-line);
}

/* 分割线深色模式 */
body.theme-modern-dark hr,
body.theme-modern-dark .divider{
  border-color:var(--color-line);
}

/* 表格深色模式 */
body.theme-modern-dark th{
  background:var(--color-surface-2);
  color:var(--color-muted);
  border-color:var(--color-line);
}
body.theme-modern-dark td{
  border-color:var(--color-line);
}
body.theme-modern-dark tr:hover td{
  background:rgba(255,255,255,.02);
}

/* 代码/引用块深色模式 */
body.theme-modern-dark code,
body.theme-modern-dark pre{
  background:var(--color-surface-3);
  border-color:var(--color-line);
  color:var(--color-body);
}
body.theme-modern-dark blockquote{
  border-left-color:var(--color-brand);
  background:var(--color-brand-soft);
  color:var(--color-body);
}

/* 课程进度条深色模式 */
body.theme-modern-dark .progress-bar{
  background:var(--color-surface-3);
}
body.theme-modern-dark .progress-fill{
  background:var(--color-brand);
}

/* 主题切换器深色模式适配 */
body.theme-modern-dark .theme-switcher{
  background:var(--color-surface-2);
  border-color:var(--color-line);
}
body.theme-modern-dark .theme-switcher button.active{
  background:var(--color-surface);
  color:var(--color-brand);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}

/* 账户按钮深色模式 */
body.theme-modern-dark .account-btn{
  color:var(--color-body);
}
body.theme-modern-dark .account-btn:hover{
  background:rgba(255,255,255,.05);
  color:var(--color-ink);
}
body.theme-modern-dark .account-avatar{
  background:var(--color-brand);
  color:var(--color-white);
}

/* ── 账户面板暗色主题适配 ── */
body.theme-modern-dark .account-sidebar{
  background:linear-gradient(155deg,#1a1a1e,#141416);
  color:var(--color-ink);
  border:1px solid var(--color-line);
}
body.theme-modern-dark .account-profile b{
  color:var(--color-ink);
}
body.theme-modern-dark .account-profile p{
  color:var(--color-muted);
}
body.theme-modern-dark .account-menu button{
  color:var(--color-muted);
}
body.theme-modern-dark .account-menu button.active,
body.theme-modern-dark .account-menu button:hover{
  background:rgba(255,255,255,.07);
  color:var(--color-ink);
}
body.theme-modern-dark .account-menu-divider{
  background:var(--color-line);
}
body.theme-modern-dark .account-panel{
  background:var(--color-surface);
  border-color:var(--color-line);
}
body.theme-modern-dark .account-panel h2{
  color:var(--color-ink);
}
body.theme-modern-dark .account-panel .eyebrow{
  color:var(--color-muted);
}
body.theme-modern-dark .metric-card{
  background:var(--color-surface-2);
  border-color:var(--color-line);
}
body.theme-modern-dark .metric-card small{
  color:var(--color-muted);
}
body.theme-modern-dark .metric-card b{
  color:var(--color-brand);
}
body.theme-modern-dark .profile-row{
  border-color:var(--color-line);
}
body.theme-modern-dark .profile-row span{
  color:var(--color-muted);
}
body.theme-modern-dark .profile-row b{
  color:var(--color-ink);
}
body.theme-modern-dark .activation-code-section h3{
  color:var(--color-ink);
}
body.theme-modern-dark .activation-code-section p{
  color:var(--color-muted);
}
body.theme-modern-dark .activation-code-section input{
  background:var(--color-surface-2);
  border-color:var(--color-line);
  color:var(--color-ink);
}
body.theme-modern-dark .account-nav-item{
  color:var(--color-muted)!important;
}
body.theme-modern-dark .account-nav-item:hover{
  color:var(--color-ink)!important;
}
body.theme-modern-dark #logoutButton{
  color:var(--color-error);
}
body.theme-modern-dark .member-table th{
  color:var(--color-muted);
}
body.theme-modern-dark .member-table td{
  color:var(--color-body);
  border-color:var(--color-line);
}
body.theme-modern-dark .record-item{
  border-color:var(--color-line);
}
body.theme-modern-dark .record-item span,
body.theme-modern-dark .record-item small{
  color:var(--color-muted);
}
body.theme-modern-dark .record-item b{
  color:var(--color-ink);
}

/* 印章深色模式 - 不旋转保持专业感 */
body.theme-modern-dark .seal:hover{
  transform:none;
  background:var(--color-brand-hover);
}
body.theme-modern-dark .seal{
  transition:background-color var(--transition-base),transform var(--transition-base);
}

/* 收藏/反馈按钮深色模式 */
body.theme-modern-dark .fav-btn,
body.theme-modern-dark .feedback-btn{
  background:var(--color-surface);
  border-color:var(--color-line);
  color:var(--color-muted);
}
body.theme-modern-dark .fav-btn:hover,
body.theme-modern-dark .feedback-btn:hover{
  background:var(--color-surface-2);
  color:var(--color-ink);
  border-color:var(--color-line-strong);
}

/* 选项卡/分段控件深色模式 */
body.theme-modern-dark .segmented,
body.theme-modern-dark .calc-tabs,
body.theme-modern-dark .tools-filter{
  background:var(--color-surface-2);
  border:1px solid var(--color-line);
}
body.theme-modern-dark .segmented button,
body.theme-modern-dark .calc-tabs button,
body.theme-modern-dark .tools-filter button{
  color:var(--color-muted);
}
body.theme-modern-dark .segmented button.active,
body.theme-modern-dark .calc-tabs button.active,
body.theme-modern-dark .tools-filter button.active{
  background:var(--color-surface);
  color:var(--color-ink);
  box-shadow:var(--shadow-sm);
}

/* 骨架屏深色模式 - 优化shimmer颜色 */
body.theme-modern-dark .skeleton-wrap{
  background:linear-gradient(90deg,var(--color-surface-3) 25%,var(--color-surface-2) 50%,var(--color-surface-3) 75%);
  background-size:200% 100%;
}

/* 认证卡片深色模式 */
body.theme-modern-dark .auth-card{
  background:var(--color-surface);
  border:1px solid var(--color-line);
  box-shadow:var(--shadow-card);
}

/* FAQ手风琴深色模式 */
body.theme-modern-dark .faq-item{
  background:var(--color-surface);
  border-color:var(--color-line);
}
body.theme-modern-dark .faq-item.open{
  border-color:var(--color-line-strong);
}

/* 认证证书展示区深色模式 */
body.theme-modern-dark .cert-showcase{
  background:linear-gradient(135deg,var(--color-surface-2) 0%,color-mix(in srgb,var(--color-brand) 8%,transparent) 100%);
  border-color:var(--color-line);
}
body.theme-modern-dark .cert-showcase:before{
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
}

/* Hero区域微妙光效 */
body.theme-modern-dark .home-hero{
  position:relative;
}
body.theme-modern-dark .home-hero:after{
  content:"";
  position:absolute;
  top:-20%;
  left:50%;
  transform:translateX(-50%);
  width:600px;
  height:400px;
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--color-brand) 8%,transparent) 0%,transparent 70%);
  pointer-events:none;
  z-index:0;
}

/* 静音按钮/链接深色模式 */
body.theme-modern-dark .quiet-btn{
  color:var(--color-body);
}
body.theme-modern-dark .quiet-btn:hover{
  background:rgba(255,255,255,.05);
  color:var(--color-ink);
}
body.theme-modern-dark .text-btn,
body.theme-modern-dark .mini-link{
  color:var(--color-brand);
}
body.theme-modern-dark .text-btn:hover,
body.theme-modern-dark .mini-link:hover{
  color:var(--color-brand-hover);
}

/* 导航Tab深色模式 */
body.theme-modern-dark .nav-tab{
  color:var(--color-muted);
}
body.theme-modern-dark .nav-tab:hover{
  color:var(--color-body);
  background:rgba(255,255,255,.03);
}
body.theme-modern-dark .nav-tab.active{
  color:var(--color-ink);
  background:var(--color-brand-soft);
}

/* 移动端菜单深色模式 */
body.theme-modern-dark .mobile-menu{
  background:var(--color-surface);
  border-color:var(--color-line);
}

/* 笔记抽屉深色模式 */
body.theme-modern-dark .notes-drawer{
  background:var(--color-surface);
  border-color:var(--color-line);
}
body.theme-modern-dark .notes-drawer textarea{
  background:var(--color-surface-2);
  border-color:var(--color-line);
  color:var(--color-ink);
}

/* 答题卡深色模式 */
body.theme-modern-dark .quiz-card{
  background:var(--color-surface);
  border-color:var(--color-line);
}
body.theme-modern-dark .exam-option{
  background:var(--color-surface-2);
  border:1px solid var(--color-line);
}
body.theme-modern-dark .exam-option:hover{
  background:var(--color-surface-3);
  border-color:var(--color-line-strong);
}
body.theme-modern-dark .exam-option.selected{
  background:var(--color-brand-soft);
  border-color:var(--color-brand);
}
body.theme-modern-dark .exam-option.correct{
  background:rgba(74,222,128,.1);
  border-color:var(--color-success);
}
body.theme-modern-dark .exam-option.wrong{
  background:rgba(248,113,113,.1);
  border-color:var(--color-error);
}

/* 排行榜深色模式 */
body.theme-modern-dark .rank-item{
  border-color:var(--color-line);
}
body.theme-modern-dark .rank-item.top-3{
  background:var(--color-surface-2);
}

/* 定价卡片深色模式 */
body.theme-modern-dark .pricing-card{
  background:var(--color-surface);
  border:1px solid var(--color-line);
}
body.theme-modern-dark .pricing-card.featured{
  border-color:var(--color-brand);
  box-shadow:0 0 0 1px var(--color-brand) inset,0 8px 32px color-mix(in srgb,var(--color-brand) 20%,transparent);
}

/* 支付方式深色模式 */
body.theme-modern-dark .payment-method{
  background:var(--color-surface-2);
  border:1px solid var(--color-line);
}
body.theme-modern-dark .payment-method:hover{
  border-color:var(--color-line-strong);
}
body.theme-modern-dark .payment-method.selected{
  border-color:var(--color-brand);
  background:var(--color-brand-soft);
}

/* 验证码输入框深色模式 */
body.theme-modern-dark .verification-form input{
  background:var(--color-surface);
  border-color:var(--color-line);
  color:var(--color-ink);
  text-align:center;
}

/* 工具结果区深色模式 */
body.theme-modern-dark .calc-result{
  background:var(--color-surface-2);
  border-color:var(--color-line);
}
body.theme-modern-dark .result-highlight{
  color:var(--color-brand);
}

/* 行情看板深色模式 */
body.theme-modern-dark .board-card{
  background:var(--color-surface);
  border:1px solid var(--color-line);
}
body.theme-modern-dark .board-tab{
  color:var(--color-muted);
}
body.theme-modern-dark .board-tab.active{
  color:var(--color-ink);
  background:var(--color-surface-2);
}
body.theme-modern-dark .price-up{color:var(--color-error);}
body.theme-modern-dark .price-down{color:var(--color-success);}

/* 管理后台深色模式 */
body.theme-modern-dark .admin-panel{
  background:var(--color-surface);
  border-color:var(--color-line);
}
body.theme-modern-dark .admin-stat{
  background:var(--color-surface-2);
  border-color:var(--color-line);
}

/* 减少Emoji色彩干扰（深色模式下emoji可能过亮） */
body.theme-modern-dark .no-emoji-notice{display:none;}

/* 链接默认颜色深色模式 */
body.theme-modern-dark a{color:var(--color-brand);}
body.theme-modern-dark a:hover{color:var(--color-brand-hover);}

/* 图片在深色模式下保持亮度 */
body.theme-modern-dark img{
  filter:brightness(.97) contrast(1.02);
}

/* ── 关键对比度修复 ── */

/* 1. outcome-strip：深色主题下不能用--color-ink(浅色)做背景 */
body.theme-modern-dark .outcome-strip{
  background:linear-gradient(135deg,#1a1a1e,#0d0d0f);
  color:var(--color-white);
  border:1px solid var(--color-line);
}
body.theme-modern-dark .outcome-strip h2{color:var(--color-white);}
body.theme-modern-dark .outcome-strip > div > span{color:var(--color-gold);}
body.theme-modern-dark .outcome-list span{
  color:rgba(255,255,255,.85);
  border-color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.04);
}

/* 2. ghost-btn：提升文字和边框对比度 */
body.theme-modern-dark .ghost-btn{
  background:rgba(255,255,255,.06);
  color:var(--color-ink);
  border:1px solid var(--color-line-strong);
}
body.theme-modern-dark .ghost-btn:hover{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.2);
}

/* 3. skip-link：焦点状态文字颜色修复 */
body.theme-modern-dark .skip-link:focus{
  background:var(--color-brand);
  color:var(--color-white);
}

/* 4. checkin-badge/status-pill 品牌色半透明背景上文字对比度提升 */
body.theme-modern-dark .checkin-badge,
body.theme-modern-dark .status-pill{
  font-weight:600;
}
body.theme-modern-dark .status-pill.success,
body.theme-modern-dark .checkin-badge.done{
  background:rgba(74,222,128,.15);
  color:#4ade80;
}
body.theme-modern-dark .status-pill.warning,
body.theme-modern-dark .checkin-badge.missed{
  background:rgba(251,191,36,.15);
  color:#fbbf24;
}
body.theme-modern-dark .status-pill.error,
body.theme-modern-dark .checkin-badge.nostart,
body.theme-modern-dark .status-pill.locked{
  background:rgba(248,113,113,.12);
  color:#f87171;
}
body.theme-modern-dark .status-pill.info{
  background:rgba(96,165,250,.15);
  color:#60a5fa;
}
body.theme-modern-dark .checkin-badge.today{
  background:var(--color-brand-soft);
  color:var(--color-brand);
}

/* 5. card-label（CONTINUE LEARNING等英文标签）：提升可见度 */
body.theme-modern-dark .card-label,
body.theme-modern-dark .footer-copy,
body.theme-modern-dark .icp-link,
body.theme-modern-dark footer small,
body.theme-modern-dark .footer-meta,
body.theme-modern-dark .muted-text{
  color:var(--color-body);
}

/* 6. cal-today 日历今日：提升对比度 */
body.theme-modern-dark .cal-cell.cal-today{
  background:var(--color-brand);
  color:var(--color-white);
  font-weight:600;
}

/* 7. rank-num 奖牌排名数字对比度提升 */
body.theme-modern-dark .rank-num.rank-1{color:#ffd700;}
body.theme-modern-dark .rank-num.rank-2{color:#c8c8c8;}
body.theme-modern-dark .rank-num.rank-3{color:#cd853f;}
body.theme-modern-dark .rank-num{color:var(--color-body);}

/* 8. 课程标签徽章颜色修复 */
body.theme-modern-dark .free-badge{
  background:var(--color-success);
  color:#0a0a0b;
  font-weight:700;
}

/* 9. 印章在深色主题下的颜色调整 */
body.theme-modern-dark .seal{
  background:var(--color-brand);
  color:var(--color-white);
}

/* 10. record-dot 录制红点在深色主题下可见 */
body.theme-modern-dark .record-dot{
  background:var(--color-error);
  box-shadow:0 0 0 0 rgba(248,113,113,.5);
}

/* 11. 评论/推荐卡片深色模式 */
body.theme-modern-dark .testimonial-card,
body.theme-modern-dark .review-card{
  background:var(--color-surface);
  border-color:var(--color-line);
}

/* 12. feature-card深色模式 */
body.theme-modern-dark .feature-card{
  background:var(--color-surface);
  border-color:var(--color-line);
}
body.theme-modern-dark .feature-card:hover{
  border-color:var(--color-line-strong);
}

/* 13. continue-card/checkin-card深色模式 */
body.theme-modern-dark .continue-card,
body.theme-modern-dark .checkin-card{
  background:var(--color-surface);
  border-color:var(--color-line);
}

/* 14. source-book书籍封面深色模式 - 确保封面本身有边框 */
body.theme-modern-dark .source-book{
  border:1px solid var(--color-line);
  box-shadow:var(--shadow-md);
}

/* 15. 搜索框placeholder和icon */
body.theme-modern-dark .search-box input::placeholder{
  color:var(--color-subtle);
}
body.theme-modern-dark .search-icon{
  color:var(--color-muted);
}

/* 16. 移动端导航菜单项深色模式 */
body.theme-modern-dark .mobile-menu .nav-tab{
  color:var(--color-body);
  border-bottom-color:var(--color-line);
}
body.theme-modern-dark .mobile-menu .nav-tab.active{
  color:var(--color-brand);
  background:var(--color-brand-soft);
}

/* 17. 认证模态框深色模式细节 */
body.theme-modern-dark .auth-divider{
  color:var(--color-muted);
}
body.theme-modern-dark .auth-divider:before,
body.theme-modern-dark .auth-divider:after{
  background:var(--color-line);
}

/* 18. 进度条深色模式 */
body.theme-modern-dark .lesson-progress .progress-bar{
  background:var(--color-surface-3);
}

/* 19. 课程列表项深色模式 */
body.theme-modern-dark .course-item{
  background:var(--color-surface);
  border-color:var(--color-line);
}
body.theme-modern-dark .course-item:hover{
  background:var(--color-surface-2);
  border-color:var(--color-line-strong);
}

/* 20. 仪表盘统计卡片深色模式 */
body.theme-modern-dark .stat-card,
body.theme-modern-dark .dashboard-stat{
  background:var(--color-surface);
  border-color:var(--color-line);
}

/* 21. 注释/批注框深色模式 */
body.theme-modern-dark .teachback{
  background:var(--color-surface);
  border-color:var(--color-line);
}
body.theme-modern-dark .teachback-label{
  color:var(--color-muted);
}

/* 22. 激活码表单深色模式 */
body.theme-modern-dark .activation-card{
  background:var(--color-surface);
  border-color:var(--color-line);
}

/* 23. 定价页深色模式细节 */
body.theme-modern-dark .pricing-feature li{
  color:var(--color-body);
}
body.theme-modern-dark .pricing-card .price{
  color:var(--color-ink);
}
body.theme-modern-dark .pricing-card .period{
  color:var(--color-muted);
}

/* 24. FAQ深色模式 */
body.theme-modern-dark .faq-answer{
  color:var(--color-body);
}
body.theme-modern-dark .faq-question{
  color:var(--color-ink);
}

/* 25. 工具计算器深色模式细节 */
body.theme-modern-dark .calc-label{
  color:var(--color-body);
}
body.theme-modern-dark .calc-hint{
  color:var(--color-muted);
}
body.theme-modern-dark .tool-desc{
  color:var(--color-muted);
}

/* 26. 排行榜深色模式 */
body.theme-modern-dark .rank-medal{
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}
body.theme-modern-dark .rank-name{
  color:var(--color-ink);
}
body.theme-modern-dark .rank-meta{
  color:var(--color-muted);
}

/* 27. 笔记页深色模式 */
body.theme-modern-dark .note-item{
  background:var(--color-surface);
  border-color:var(--color-line);
}
body.theme-modern-dark .note-item:hover{
  border-color:var(--color-line-strong);
}
body.theme-modern-dark .note-content{
  color:var(--color-body);
}
body.theme-modern-dark .note-meta{
  color:var(--color-muted);
}

/* 28. Toast 深色模式细节 */
body.theme-modern-dark .toast.success{border-left-color:var(--color-success);}
body.theme-modern-dark .toast.error{border-left-color:var(--color-error);}
body.theme-modern-dark .toast.info{border-left-color:var(--color-info);}
body.theme-modern-dark .toast.warning{border-left-color:var(--color-warning);}

/* 29. 考试/测验深色模式 */
body.theme-modern-dark .quiz-progress{
  color:var(--color-muted);
}
body.theme-modern-dark .quiz-question{
  color:var(--color-ink);
}
body.theme-modern-dark .quiz-explanation{
  background:var(--color-surface-2);
  border-color:var(--color-line);
  color:var(--color-body);
}

/* 30. 证书预览深色模式 */
body.theme-modern-dark .cert-preview-card{
  background:var(--color-surface);
  border-color:var(--color-line);
}

/* 31. Breadcrumb 深色模式 */
body.theme-modern-dark .breadcrumb{
  color:var(--color-muted);
}
body.theme-modern-dark .breadcrumb a{
  color:var(--color-body);
}

/* 32. Empty state 深色模式 */
body.theme-modern-dark .empty-state{
  color:var(--color-muted);
}

/* 33. 分割文字深色模式 */
body.theme-modern-dark .section-divider{
  color:var(--color-muted);
}
body.theme-modern-dark .section-divider:before,
body.theme-modern-dark .section-divider:after{
  background:var(--color-line);
}

/* 34. Tooltip 深色模式 */
body.theme-modern-dark [data-tooltip]:after{
  background:var(--color-surface-2);
  color:var(--color-ink);
  border:1px solid var(--color-line);
  box-shadow:var(--shadow-md);
}

/* 35. Kbd/快捷键深色模式 */
body.theme-modern-dark kbd{
  background:var(--color-surface-3);
  color:var(--color-body);
  border-color:var(--color-line-strong);
  box-shadow:0 1px 0 var(--color-line);
}

/* 36. 选中日期/打卡日历深色模式 */
body.theme-modern-dark .cal-cell{
  color:var(--color-body);
}
body.theme-modern-dark .cal-cell.checked{
  background:var(--color-success-soft);
  color:var(--color-success);
}
body.theme-modern-dark .cal-cell.this-month{
  color:var(--color-ink);
}

/* 37. 评分/星级深色模式 */
body.theme-modern-dark .star,
body.theme-modern-dark .rating-star{
  color:var(--color-gold);
}
body.theme-modern-dark .star-empty{
  color:var(--color-line-strong);
}

/* 38. 密码强度条深色模式 */
body.theme-modern-dark .pwd-strength{
  background:var(--color-surface-3);
}
body.theme-modern-dark .input-hint{
  color:var(--color-muted);
}
body.theme-modern-dark .input-error{
  color:var(--color-error);
}

/* 39. 回到顶部按钮深色模式 */
body.theme-modern-dark .back-to-top{
  background:var(--color-surface);
  color:var(--color-ink);
  border-color:var(--color-line);
  box-shadow:var(--shadow-md);
}
body.theme-modern-dark .back-to-top:hover{
  background:var(--color-surface-2);
  border-color:var(--color-line-strong);
}

/* =========================================================
   40. 全面对比度修复（第二轮审计）
   ========================================================= */

/* skip-link：深色背景+品牌色文字，保证对比度 */
body.theme-modern-dark .skip-link{
  background:var(--color-surface-2);
  color:var(--color-brand);
  border:1px solid var(--color-brand);
}

/* footer链接（隐私政策/用户协议/ICP）提升对比度 */
body.theme-modern-dark footer a,
body.theme-modern-dark .footer-copy,
body.theme-modern-dark .icp-link,
body.theme-modern-dark footer small{
  color:var(--color-body);
}
body.theme-modern-dark footer a:hover{
  color:var(--color-brand);
}

/* 底部导航非激活态：提升颜色亮度保证可读 */
body.theme-modern-dark .bottom-tab{
  color:var(--color-muted);
}
body.theme-modern-dark .bottom-tab svg{
  color:var(--color-muted);
}
body.theme-modern-dark .bottom-tab.active{
  color:var(--color-brand);
}
body.theme-modern-dark .bottom-tab.active svg{
  color:var(--color-brand);
}

/* mini-link：提升对比度 */
body.theme-modern-dark .mini-link{
  color:var(--color-brand);
}
body.theme-modern-dark .mini-link:hover{
  color:var(--color-brand-hover);
}

/* 证书预览印章 */
body.theme-modern-dark .cert-preview-seal{
  color:var(--color-brand);
  border-color:var(--color-brand);
}

/* 笔记drawer标签按钮 */
body.theme-modern-dark .drawer-tabs button,
body.theme-modern-dark .note-tabs button{
  color:var(--color-muted);
}
body.theme-modern-dark .drawer-tabs button.active,
body.theme-modern-dark .note-tabs button.active{
  color:var(--color-brand);
  border-color:var(--color-brand);
}

/* home-tab hover状态：深色模式下不能用白色半透明 */
body.theme-modern-dark .home-tabs button.home-tab:hover{
  background:rgba(255,255,255,.08);
  color:var(--color-body);
}

/* ghost-btn hover：深色模式下不能变白色 */
body.theme-modern-dark .ghost-btn:hover{
  background:var(--color-surface-2);
  border-color:var(--color-line-strong);
}

/* outline-btn hover */
body.theme-modern-dark .outline-btn:hover{
  background:rgba(255,255,255,.06);
}

/* quiet-btn */
body.theme-modern-dark .quiet-btn{
  color:var(--color-body);
}
body.theme-modern-dark .quiet-btn:hover{
  background:var(--color-surface-3);
}

/* 品牌seal：深色模式下需要背景色 */
body.theme-modern-dark .seal{
  background:var(--color-brand);
  color:var(--color-white);
  border-color:var(--color-brand);
}

/* 印章/badgde */
body.theme-modern-dark .checkin-badge,
body.theme-modern-dark .status-pill,
body.theme-modern-dark .cal-streak,
body.theme-modern-dark .cal-legend-today{
  font-weight:600;
}

/* rank-score */
body.theme-modern-dark .rank-score{
  color:var(--color-brand);
  font-weight:700;
}

/* faq-qn 编号 */
body.theme-modern-dark .faq-qn{
  color:var(--color-brand);
  background:var(--color-brand-soft);
}

/* eyebrow标签：小字号提升对比度 */
body.theme-modern-dark .eyebrow{
  color:var(--color-brand);
  font-weight:700;
  letter-spacing:.18em;
}

/* edition-line */
body.theme-modern-dark .edition-line{
  color:var(--color-muted);
}

/* proof统计数字 */
body.theme-modern-dark .hero-proof b,
body.theme-modern-dark .stat-number{
  color:var(--color-ink);
}
body.theme-modern-dark .hero-proof span > span,
body.theme-modern-dark .stat-label{
  color:var(--color-body);
}

/* testimonial引用 */
body.theme-modern-dark .testi-quote{
  color:var(--color-body);
}
body.theme-modern-dark .testi-name{
  color:var(--color-ink);
}
body.theme-modern-dark .testi-title{
  color:var(--color-muted);
}

/* continue-card 继续学习卡片 */
body.theme-modern-dark .continue-card{
  background:var(--color-surface);
  border-color:var(--color-line);
}
body.theme-modern-dark .continue-card h3,
body.theme-modern-dark .continue-card .card-title{
  color:var(--color-ink);
}
body.theme-modern-dark .continue-card p,
body.theme-modern-dark .continue-card .card-desc{
  color:var(--color-body);
}
body.theme-modern-dark .card-label{
  color:var(--color-muted);
}

/* lesson meta 信息 */
body.theme-modern-dark .lesson-meta,
body.theme-modern-dark .lesson-meta span{
  color:var(--color-muted);
}

/* section head */
body.theme-modern-dark .section-head h2,
body.theme-modern-dark .view-head h2{
  color:var(--color-ink);
}
body.theme-modern-dark .section-head p,
body.theme-modern-dark .view-head p{
  color:var(--color-body);
}

/* cert showcase 文字 */
body.theme-modern-dark .cert-showcase h2,
body.theme-modern-dark .cert-showcase h3{
  color:var(--color-ink);
}
body.theme-modern-dark .cert-showcase p{
  color:var(--color-body);
}

/* outcome-strip 成果条 */
body.theme-modern-dark .outcome-strip h2{
  color:var(--color-ink);
}
body.theme-modern-dark .outcome-list span{
  color:var(--color-body);
  border-color:var(--color-line-strong);
  background:var(--color-surface-2);
}

/* price-card 定价卡片 */
body.theme-modern-dark .price-card{
  background:var(--color-surface);
  border-color:var(--color-line);
}
body.theme-modern-dark .price-card h3{
  color:var(--color-ink);
}
body.theme-modern-dark .price-card .price{
  color:var(--color-ink);
}
body.theme-modern-dark .price-card .price-note,
body.theme-modern-dark .price-card li{
  color:var(--color-body);
}
body.theme-modern-dark .price-card.featured{
  border-color:var(--color-brand);
  background:linear-gradient(135deg,var(--color-surface) 0%,var(--color-brand-soft) 100%);
}

/* source-book 标准卡片 */
body.theme-modern-dark .source-book{
  background:var(--color-surface);
  border-color:var(--color-line);
}
body.theme-modern-dark .source-book h4{
  color:var(--color-ink);
}
body.theme-modern-dark .source-book p{
  color:var(--color-body);
}

/* input/表单元素深色模式 */
body.theme-modern-dark input[type="text"],
body.theme-modern-dark input[type="email"],
body.theme-modern-dark input[type="password"],
body.theme-modern-dark input[type="tel"],
body.theme-modern-dark input[type="number"],
body.theme-modern-dark textarea,
body.theme-modern-dark select{
  background:var(--color-surface-2);
  border-color:var(--color-line-strong);
  color:var(--color-ink);
}
body.theme-modern-dark input::placeholder,
body.theme-modern-dark textarea::placeholder{
  color:var(--color-muted);
}
body.theme-modern-dark input:focus,
body.theme-modern-dark textarea:focus,
body.theme-modern-dark select:focus{
  border-color:var(--color-brand);
  box-shadow:0 0 0 3px var(--color-brand-ring);
}

/* 移动端导航 */
body.theme-modern-dark .mobile-nav{
  background:var(--color-surface);
  border-color:var(--color-line);
}
body.theme-modern-dark .mobile-nav-title{
  color:var(--color-muted);
}
body.theme-modern-dark .mobile-nav-close{
  background:var(--color-surface-2);
  color:var(--color-body);
}
body.theme-modern-dark .mobile-nav-close:hover{
  background:var(--color-surface-3);
}
body.theme-modern-dark .mobile-nav button{
  color:var(--color-body);
}
body.theme-modern-dark .mobile-nav button svg{
  color:var(--color-muted);
}
body.theme-modern-dark .mobile-nav button:active{
  background:var(--color-surface-3);
}
body.theme-modern-dark .mobile-nav button[data-view].active{
  background:var(--color-brand-soft);
  color:var(--color-brand);
}
body.theme-modern-dark .mobile-nav button[data-view].active svg{
  color:var(--color-brand);
}

/* 导航栏品牌小字 */
body.theme-modern-dark .brand small{
  color:var(--color-muted);
}
body.theme-modern-dark .brand b{
  color:var(--color-ink);
}

/* 修复auth登录按钮区域文字 */
body.theme-modern-dark .auth-card h2{
  color:var(--color-ink);
}
body.theme-modern-dark .auth-card p,
body.theme-modern-dark .auth-card label{
  color:var(--color-body);
}

/* auth-aside 左侧品牌面板：深色主题用深酒红，文字清晰可读 */
body.theme-modern-dark .auth-aside{
  background:linear-gradient(155deg,#4a151b,#2d0d11) !important;
}
body.theme-modern-dark .auth-aside .eyebrow,
body.theme-modern-dark .auth-brand-logo .eyebrow{
  color:rgba(255,255,255,.85) !important;
  font-weight:600;
}
body.theme-modern-dark .auth-aside h2{
  color:var(--color-white) !important;
}
body.theme-modern-dark .auth-aside p{
  color:rgba(255,255,255,.8) !important;
}
body.theme-modern-dark .auth-points span{
  color:rgba(255,255,255,.95) !important;
  border-color:rgba(255,255,255,.25) !important;
  background:rgba(255,255,255,.08);
}
/* auth-studio 弹窗背景和顶部栏 */
body.theme-modern-dark .studio.auth-studio{
  background:rgba(0,0,0,.8) !important;
}
body.theme-modern-dark .studio.auth-studio .studio-head{
  background:var(--color-surface) !important;
  border-color:var(--color-line) !important;
}
body.theme-modern-dark .studio.auth-studio .studio-head span,
body.theme-modern-dark .studio.auth-studio .studio-head .studio-title,
body.theme-modern-dark .studio.auth-studio .studio-head .auth-method-label{
  color:var(--color-body) !important;
}
body.theme-modern-dark .studio.auth-studio .studio-head [class*="close"],
body.theme-modern-dark .studio.auth-studio .studio-head .icon-btn{
  color:var(--color-muted) !important;
  background:transparent !important;
}
body.theme-modern-dark .studio.auth-studio .studio-brand b{
  color:var(--color-ink) !important;
}
body.theme-modern-dark .studio.auth-studio .studio-brand small{
  color:var(--color-muted) !important;
}
body.theme-modern-dark .studio.auth-studio .studio-head .mini-seal{
  background:var(--color-brand-soft) !important;
  color:var(--color-brand) !important;
  border-color:var(--color-brand) !important;
}
body.theme-modern-dark .studio.auth-studio .studio-progress{
  background:var(--color-surface-3) !important;
}
body.theme-modern-dark .studio.auth-studio .studio-progress i{
  background:var(--color-brand) !important;
}
body.theme-modern-dark .studio-body{
  background:transparent !important;
}
/* auth-main 右侧表单 */
body.theme-modern-dark .auth-main{
  background:var(--color-surface);
}
body.theme-modern-dark .auth-main h2,
body.theme-modern-dark .auth-main h3{
  color:var(--color-ink) !important;
}
body.theme-modern-dark .auth-main .form-field > span,
body.theme-modern-dark .auth-main small{
  color:var(--color-body) !important;
}
body.theme-modern-dark .auth-tabs{
  background:var(--color-surface-3) !important;
}
body.theme-modern-dark .auth-tabs button:not(.active){
  color:var(--color-body) !important;
}
body.theme-modern-dark .auth-tabs button.active{
  background:linear-gradient(135deg,#c4404a,#a0303a) !important;
  color:var(--color-white) !important;
  box-shadow:0 2px 8px color-mix(in srgb,var(--color-brand) 25%,transparent);
}
body.theme-modern-dark .form-field label{
  color:var(--color-body) !important;
}
body.theme-modern-dark .form-field input{
  background:var(--color-surface-2) !important;
  border-color:var(--color-line) !important;
  color:var(--color-ink) !important;
}
body.theme-modern-dark .form-field input::placeholder{
  color:var(--color-muted) !important;
  opacity:1;
}
body.theme-modern-dark .form-help{
  color:var(--color-body);
}
body.theme-modern-dark .form-help a,
body.theme-modern-dark .form-help span[style*="color"]{
  color:var(--color-brand) !important;
}
/* 提交按钮：深酒红品牌色，与左侧面板协调 */
body.theme-modern-dark button.primary-btn.auth-submit,
body.theme-modern-dark .auth-card .primary-btn{
  background:linear-gradient(135deg,#c4404a,#a0303a) !important;
  color:var(--color-white) !important;
  border:none !important;
  box-shadow:0 4px 14px color-mix(in srgb,var(--color-brand) 30%,transparent);
}
body.theme-modern-dark button.primary-btn.auth-submit:hover,
body.theme-modern-dark .auth-card .primary-btn:hover{
  background:linear-gradient(135deg,#d04852,#b03842) !important;
}
/* 复选框和记住标签 */
body.theme-modern-dark .form-field input[type="checkbox"]{
  accent-color:var(--color-brand);
  filter:brightness(1.1);
}
body.theme-modern-dark .remember-row,
body.theme-modern-dark .form-field:has(input[type="checkbox"]) label,
body.theme-modern-dark .form-field .checkbox-label{
  color:var(--color-body) !important;
}
/* input图标 */
body.theme-modern-dark .input-icon-wrap svg,
body.theme-modern-dark .form-field svg{
  color:var(--color-muted);
}
body.theme-modern-dark .input-icon-wrap .toggle-pwd{
  color:var(--color-muted);
}

/* dashboard 卡片 */
body.theme-modern-dark .dash-card,
body.theme-modern-dark .overview-card{
  background:var(--color-surface);
  border-color:var(--color-line);
}
body.theme-modern-dark .dash-card h3,
body.theme-modern-dark .dash-value{
  color:var(--color-ink);
}
body.theme-modern-dark .dash-label,
body.theme-modern-dark .dash-trend{
  color:var(--color-muted);
}

/* faq 详情页 */
body.theme-modern-dark .faq-item,
body.theme-modern-dark .faq-card{
  background:var(--color-surface);
  border-color:var(--color-line);
}
body.theme-modern-dark .faq-question{
  color:var(--color-ink);
}
body.theme-modern-dark .faq-answer{
  color:var(--color-body);
}

/* ranking 排行榜页面 */
body.theme-modern-dark .rank-item{
  background:var(--color-surface);
  border-color:var(--color-line);
}
body.theme-modern-dark .rank-num{
  color:var(--color-muted);
}
body.theme-modern-dark .rank-num.gold{
  color:var(--color-medal-gold);
}
body.theme-modern-dark .rank-num.silver{
  color:var(--color-medal-silver);
}
body.theme-modern-dark .rank-num.bronze{
  color:var(--color-medal-bronze);
}

/* 微标签/micro-flow */
body.theme-modern-dark .micro-flow{
  color:var(--color-muted);
}
body.theme-modern-dark .micro-flow span{
  color:var(--color-muted);
  background:var(--color-surface-2);
  border-color:var(--color-line);
}

/* calendar 日历 */
body.theme-modern-dark .cal-cell{
  color:var(--color-body);
}
body.theme-modern-dark .cal-cell.cal-today{
  background:var(--color-brand);
  color:var(--color-white);
}
body.theme-modern-dark .cal-weekday{
  color:var(--color-muted);
}

/* 修复：选择文本颜色 */
body.theme-modern-dark ::selection{
  background:var(--color-brand);
  color:var(--color-white);
}

/* 修复：home-tab非激活态提高对比度 */
body.theme-modern-dark .home-tabs button.home-tab{
  color:var(--color-muted);
}

/* micro-flow进度指示器 */
body.theme-modern-dark .step-dot{
  background:var(--color-surface-3);
  border-color:var(--color-line);
}
body.theme-modern-dark .step-dot.active{
  background:var(--color-brand);
  border-color:var(--color-brand);
}
body.theme-modern-dark .step-dot.done{
  background:var(--color-success);
  border-color:var(--color-success);
}

/* tool-tip 文字 */
body.theme-modern-dark .tool-tip,
body.theme-modern-dark [data-tooltip]{
  color:var(--color-body);
}

/* 42. 知识库页面修复 */
/* book-online-tag 默认（"在线阅读"，无内联样式）：品牌色软底+品牌色文字 */
body.theme-modern-dark .source-book .book-online-tag{
  color:var(--color-brand);
  background:var(--color-brand-soft);
  border:1px solid var(--color-brand);
  font-weight:600;
}
/* book-online-tag "免费预览"：JS内联了var(--color-warning)背景，强制文字为深色 */
body.theme-modern-dark .source-book .book-online-tag[style*="background"]{
  color:#1a1a0a !important;
  border-color:rgba(0,0,0,.12) !important;
  font-weight:700;
}

/* book-cover 封面区域：深色主题下不能用黑底 */
body.theme-modern-dark .source-book .book-cover{
  background:var(--color-surface-2);
}
body.theme-modern-dark .source-book .book-spine{
  background:linear-gradient(90deg,rgba(255,255,255,.08),transparent);
}

/* source-book 书籍卡片整体文字颜色修复 */
body.theme-modern-dark .source-book{
  background:var(--color-surface);
  color:var(--color-ink);
  border:1px solid var(--color-line);
  box-shadow:var(--shadow-card);
}
body.theme-modern-dark .source-book h2{
  color:var(--color-ink);
}
body.theme-modern-dark .source-book p{
  color:var(--color-body);
  opacity:1;
}
body.theme-modern-dark .source-book span,
body.theme-modern-dark .source-book small{
  color:var(--color-muted);
  opacity:1;
}

/* book-lock 深度版锁 */
body.theme-modern-dark .book-lock{
  color:var(--color-muted);
  background:var(--color-surface-3);
  border-color:var(--color-line);
}

/* 知识库搜索框 */
body.theme-modern-dark .kb-search input,
body.theme-modern-dark .source-search input{
  background:var(--color-surface);
  border-color:var(--color-line);
  color:var(--color-ink);
}
body.theme-modern-dark .kb-search input::placeholder,
body.theme-modern-dark .source-search input::placeholder{
  color:var(--color-muted);
}

/* 知识库分类标签segmented */
body.theme-modern-dark .kb-tabs.segmented,
body.theme-modern-dark .source-cats.segmented{
  background:var(--color-surface-3);
}
body.theme-modern-dark .kb-tabs.segmented button,
body.theme-modern-dark .source-cats.segmented button{
  color:var(--color-muted);
}
body.theme-modern-dark .kb-tabs.segmented button.active,
body.theme-modern-dark .source-cats.segmented button.active{
  background:var(--color-surface);
  color:var(--color-brand);
}

/* 收藏按钮fav-btn */
body.theme-modern-dark .fav-btn{
  color:var(--color-muted);
}
body.theme-modern-dark .fav-btn:hover{
  color:var(--color-brand);
}
body.theme-modern-dark .fav-btn.active{
  color:var(--color-error);
}

/* PDF阅读器深色模式 */
body.theme-modern-dark .pdf-viewer,
body.theme-modern-dark .pdf-modal{
  background:var(--color-surface);
}
body.theme-modern-dark .pdf-toolbar{
  background:var(--color-surface-2);
  border-color:var(--color-line);
}
body.theme-modern-dark .preview-banner{
  background:var(--color-brand-soft);
  border-color:var(--color-brand);
}
body.theme-modern-dark .preview-banner-inner span{
  color:var(--color-body);
}
body.theme-modern-dark .preview-tag{
  background:var(--color-brand) !important;
  color:var(--color-white) !important;
}

/* 41. 课程页面module-intro修复 */
body.theme-modern-dark .module-intro{
  background:linear-gradient(160deg,var(--color-brand),var(--color-brand-active));
  color:var(--color-white);
}
body.theme-modern-dark #moduleIntro.module-intro{
  background:linear-gradient(160deg,var(--color-gold),var(--color-gold-hover));
  color:#1a1a0a;
}
body.theme-modern-dark .module-intro span,
body.theme-modern-dark .module-intro p,
body.theme-modern-dark .module-intro ul{
  color:rgba(255,255,255,.85);
}
body.theme-modern-dark #moduleIntro.module-intro span,
body.theme-modern-dark #moduleIntro.module-intro p,
body.theme-modern-dark #moduleIntro.module-intro ul{
  color:rgba(26,26,10,.85);
}
body.theme-modern-dark .module-intro h2{
  color:var(--color-white);
}
body.theme-modern-dark #moduleIntro.module-intro h2{
  color:#1a1a0a;
}
body.theme-modern-dark .module-intro .module-number{
  color:rgba(255,255,255,.12);
}

/* path-banner */
body.theme-modern-dark .path-banner{
  background:linear-gradient(110deg,var(--color-surface-3),var(--color-surface-2));
  border-color:var(--color-line);
}
body.theme-modern-dark .path-banner b{
  color:var(--color-ink);
}
body.theme-modern-dark .path-tags span{
  color:var(--color-brand);
  border-color:var(--color-line-strong);
}

/* course-item 课程卡片 */
body.theme-modern-dark .course-item{
  background:var(--color-surface);
  border-color:var(--color-line);
}
body.theme-modern-dark .course-item h3{
  color:var(--color-ink);
}
body.theme-modern-dark .course-item small{
  color:var(--color-muted);
}
body.theme-modern-dark .course-badge{
  color:var(--color-muted);
  border-color:var(--color-line);
}
body.theme-modern-dark .course-item.completed{
  border-color:var(--color-success);
}
body.theme-modern-dark .course-item.recommended:before{
  color:var(--color-brand);
}

/* search-box */
body.theme-modern-dark .search-box{
  background:var(--color-surface);
  border-color:var(--color-line);
}
body.theme-modern-dark .search-box span{
  color:var(--color-muted);
}

/* segmented control */
body.theme-modern-dark .segmented{
  background:var(--color-surface-3);
}
body.theme-modern-dark .segmented button{
  color:var(--color-muted);
}
body.theme-modern-dark .segmented button.active{
  background:var(--color-surface);
  color:var(--color-brand);
}

/* compare-table 对比表 */
body.theme-modern-dark .compare-table{
  background:var(--color-surface);
  border-color:var(--color-line);
}
body.theme-modern-dark .compare-row{
  border-bottom-color:var(--color-surface-3);
  color:var(--color-body);
}
body.theme-modern-dark .compare-row.head{
  background:var(--color-surface-3);
  color:var(--color-ink);
}

/* ================================================================
   AUTH V2 - 现代化登录/注册界面
   设计理念：居中窄卡片、品牌标识顶部居中、胶囊式Tab、大输入框、极简
   ================================================================ */

/* 容器：居中窄卡片 */
.auth-shell-v2{
  max-width:440px;
  margin:0 auto;
  width:100%;
  padding:0 20px;
}

/* 卡片主体 */
.auth-card-v2{
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:20px;
  padding:36px 36px 32px;
  box-shadow:0 8px 32px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.04);
  position:relative;
}

/* 品牌区域：顶部居中 */
.auth-brand-v2{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  margin-bottom:28px;
}
.auth-seal-v2{
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  color:var(--color-brand);
  filter:drop-shadow(0 4px 14px var(--color-brand-ring));
}
.auth-seal-v2 svg{display:block;width:100%;height:100%}
.auth-brand-text-v2{
  text-align:center;
}
.auth-brand-text-v2 small{
  font-size:13px;
  color:var(--color-muted);
  display:block;
}

/* 欢迎文案 */
.auth-welcome-v2{
  text-align:center;
  font-size:14px;
  color:var(--color-muted);
  margin:0 0 22px;
  line-height:1.5;
}

/* Tab切换：胶囊式分段控件 */
.auth-tabs-v2{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:4px;
  background:var(--color-surface-3);
  padding:4px;
  border-radius:12px;
  margin-bottom:24px;
}
.auth-tabs-v2 button{
  border:0;
  background:transparent;
  border-radius:9px;
  padding:9px 4px;
  font:500 13px var(--font-sans);
  color:var(--color-muted);
  cursor:pointer;
  transition:background-color .2s,color .2s,box-shadow .2s;
  white-space:nowrap;
}
.auth-tabs-v2 button:hover{
  color:var(--color-body);
}
.auth-tabs-v2 button.active{
  background:var(--color-surface);
  color:var(--color-ink);
  box-shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  font-weight:600;
}

/* 表单区域 */
.auth-form-v2{
  display:grid;
  gap:0;
}
.auth-form-grid-v2{
  gap:16px !important;
}
.auth-form-grid-v2 .form-field{
  gap:7px;
}
.auth-form-grid-v2 .form-field label{
  font-size:13px !important;
  font-weight:500 !important;
  color:var(--color-body) !important;
}

/* 输入框：更大、更圆润 */
.auth-form-v2 .form-field input,
.auth-form-v2 .form-field select{
  height:46px;
  border-radius:12px !important;
  padding:0 14px !important;
  font-size:15px !important;
  border:1.5px solid var(--color-line) !important;
  background:var(--color-surface-2) !important;
  color:var(--color-ink);
  transition:border-color .2s,box-shadow .2s,background-color .2s;
}
.auth-form-v2 .form-field input::placeholder{
  color:var(--color-muted);
  opacity:1;
}
.auth-form-v2 .form-field input:focus,
.auth-form-v2 .form-field select:focus{
  border-color:var(--color-brand) !important;
  box-shadow:0 0 0 4px var(--color-brand-ring) !important;
  background:var(--color-surface) !important;
  outline:none;
}
.auth-form-v2 .input-icon-wrap{
  position:relative;
}
.auth-form-v2 .input-icon{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  color:var(--color-muted);
  width:18px;
  height:18px;
  pointer-events:none;
}
.auth-form-v2 .input-icon-wrap input{
  padding-left:42px !important;
}
.auth-form-v2 .pwd-toggle{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  border:0;
  background:transparent;
  color:var(--color-muted);
  cursor:pointer;
  padding:6px;
  border-radius:6px;
  display:grid;
  place-items:center;
  transition:color .15s,background-color .15s;
}
.auth-form-v2 .pwd-toggle:hover{
  color:var(--color-body);
  background:var(--color-surface-3);
}
.auth-form-v2 .pwd-toggle svg{width:18px;height:18px}

/* checkbox和记住行 */
.auth-row-between-v2{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:18px 0 0;
  font-size:13px;
}
.auth-form-v2 .checkbox-label{
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  color:var(--color-body);
  font-size:13px;
  user-select:none;
}
.auth-form-v2 .checkbox-label input[type="checkbox"]{
  width:16px;
  height:16px;
  accent-color:var(--color-brand);
  cursor:pointer;
  margin:0;
}
.auth-link{
  color:var(--color-brand);
  cursor:pointer;
  font-size:13px;
  text-decoration:none;
  transition:opacity .15s;
}
.auth-link:hover{opacity:.8}

/* 提交按钮：更大更醒目 */
.auth-form-v2 .primary-btn.auth-submit,
.auth-card-v2 .primary-btn.auth-submit{
  width:100%;
  height:48px;
  border:0;
  border-radius:12px;
  font:600 15px var(--font-sans);
  cursor:pointer;
  margin-top:20px;
  background:var(--color-brand);
  color:var(--color-white);
  transition:transform .15s,box-shadow .2s,background-color .2s,opacity .2s;
  box-shadow:0 4px 12px var(--color-brand-ring);
  letter-spacing:.02em;
}
.auth-form-v2 .primary-btn.auth-submit:hover,
.auth-card-v2 .primary-btn.auth-submit:hover{
  background:var(--color-brand-hover);
  box-shadow:0 6px 18px var(--color-brand-ring);
  transform:translateY(-1px);
}
.auth-form-v2 .primary-btn.auth-submit:active,
.auth-card-v2 .primary-btn.auth-submit:active{
  transform:translateY(0);
  box-shadow:0 2px 6px var(--color-brand-ring);
}
.auth-form-v2 .ghost-btn{
  width:100%;
  height:42px;
  border:1px solid var(--color-line);
  border-radius:12px;
  font:500 14px var(--font-sans);
  cursor:pointer;
  margin-top:10px;
  background:transparent;
  color:var(--color-body);
  transition:background-color .15s,border-color .15s;
}
.auth-form-v2 .ghost-btn:hover{
  background:var(--color-surface-3);
  border-color:var(--color-line-strong);
}

/* 底部切换链接 */
.auth-switch-v2{
  text-align:center;
  font-size:13px;
  color:var(--color-muted);
  margin:16px 0 0;
}
.auth-switch-v2 a{
  color:var(--color-brand);
  text-decoration:none;
  font-weight:500;
  cursor:pointer;
}
.auth-switch-v2 a:hover{text-decoration:underline}

/* 协议提示 */
.auth-note-v2{
  text-align:center;
  font-size:12px;
  color:var(--color-muted);
  margin:14px 0 0;
  line-height:1.6;
}
/* 天眼查搜索按钮 */
.auth-form-v2 .tyc-search-btn{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--color-brand-soft);
  color:var(--color-brand);
  border:1px solid var(--color-brand-ring,var(--color-brand-soft));
  border-radius:6px;
  padding:2px 8px;
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  margin-left:6px;
  vertical-align:middle;
}
.auth-form-v2 .tyc-search-btn:hover{
  background:var(--color-brand);
  color:var(--color-white);
}
.auth-form-v2 .tyc-tag{
  color:var(--color-muted);
  font-weight:400;
  font-size:11px;
}
.auth-form-v2 .tyc-filled{
  color:var(--color-muted) !important;
  background:var(--color-surface-3) !important;
}

/* 表单错误提示 */
.auth-form-v2 .form-error{
  color:var(--color-error);
  font-size:13px;
  margin-top:10px;
  text-align:center;
  min-height:20px;
}
.auth-form-v2 .form-help{
  font-size:12px;
  color:var(--color-muted);
  margin-top:4px;
  display:block;
}

/* 角色选择卡片适配 */
.auth-form-v2 .role-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
.auth-form-v2 .role-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:12px 6px;
  border:1.5px solid var(--color-line);
  border-radius:12px;
  background:var(--color-surface-2);
  cursor:pointer;
  text-align:center;
  font-size:12px;
  color:var(--color-body);
  transition:border-color .2s,background-color .2s;
}
.auth-form-v2 .role-card svg{
  width:22px;
  height:22px;
  color:var(--color-muted);
}
.auth-form-v2 .role-card.selected{
  border-color:var(--color-brand);
  background:var(--color-brand-soft);
  color:var(--color-brand);
}
.auth-form-v2 .role-card.selected svg{
  color:var(--color-brand);
}

/* 能力测试入口页适配 */
.auth-form-v2 .diagnostic-entry{
  text-align:center;
}
.auth-form-v2 .diag-entry-head .eyebrow{
  display:inline-block;
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--color-brand);
  text-transform:uppercase;
  margin-bottom:10px;
}
.auth-form-v2 .diag-entry-head h2{
  font:600 22px/1.3 var(--font-heading);
  color:var(--color-ink);
  margin:0 0 10px;
}
.auth-form-v2 .diag-entry-head p{
  font-size:14px;
  color:var(--color-muted);
  margin:0 0 24px;
  line-height:1.6;
}
.auth-form-v2 .diag-entry-list{
  display:grid;
  gap:10px;
  margin-bottom:24px;
  text-align:left;
}
.auth-form-v2 .diag-entry-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  background:var(--color-surface-2);
  border-radius:12px;
  border:1px solid var(--color-line);
}
.auth-form-v2 .diag-entry-icon{
  width:36px;
  height:36px;
  border-radius:10px;
  background:var(--color-brand-soft);
  color:var(--color-brand);
  display:grid;
  place-items:center;
  flex-shrink:0;
}
.auth-form-v2 .diag-entry-icon svg{width:18px;height:18px}
.auth-form-v2 .diag-entry-item h3{
  font:600 14px var(--font-sans);
  color:var(--color-ink);
  margin:0 0 2px;
}
.auth-form-v2 .diag-entry-item small{
  font-size:12px;
  color:var(--color-muted);
}
.auth-form-v2 .diag-entry-note{
  font-size:12px;
  color:var(--color-muted);
  margin-top:14px;
  line-height:1.6;
}

/* select下拉框适配 */
.auth-form-v2 .form-field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b8b92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:40px !important;
  cursor:pointer;
}

/* 密码强度条适配 */
.auth-form-v2 .pwd-strength{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
}
.auth-form-v2 .pwd-strength-bar{
  display:flex;
  gap:3px;
  flex:1;
}
.auth-form-v2 .pwd-strength-bar span{
  flex:1;
  height:4px;
  border-radius:2px;
  background:var(--color-line);
  transition:background-color .2s;
}
.auth-form-v2 .pwd-strength-text{
  font-size:12px;
  color:var(--color-muted);
  min-width:24px;
}

/* 响应式：小屏幕 */
@media(max-width:520px){
  .auth-shell-v2{
    padding:0 12px;
  }
  .auth-card-v2{
    padding:28px 22px 24px;
    border-radius:16px;
  }
  .auth-form-v2 .role-cards{
    grid-template-columns:repeat(2,1fr);
  }
}

/* ── 专业主题（Coursera蓝白）微调 ── */
body.theme-coursera .auth-card-v2{
  box-shadow:0 8px 32px color-mix(in srgb,var(--color-brand) 8%,transparent);
}

/* ── 极夜主题（Modern Dark）微调 ── */
body.theme-modern-dark .auth-card-v2{
  background:var(--color-surface);
  border-color:var(--color-line);
  box-shadow:0 8px 32px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.2);
}
body.theme-modern-dark .auth-seal-v2{
  filter:drop-shadow(0 4px 16px color-mix(in srgb,var(--color-brand) 30%,transparent));
}
body.theme-modern-dark .auth-form-v2 .form-field input,
body.theme-modern-dark .auth-form-v2 .form-field select{
  background:var(--color-surface-2) !important;
  border-color:rgba(255,255,255,.08) !important;
  color:var(--color-ink);
}
body.theme-modern-dark .auth-form-v2 .form-field input:focus,
body.theme-modern-dark .auth-form-v2 .form-field select:focus{
  background:var(--color-surface) !important;
  border-color:var(--color-brand) !important;
}
body.theme-modern-dark .auth-tabs-v2{
  background:rgba(255,255,255,.05);
}
body.theme-modern-dark .auth-tabs-v2 button.active{
  background:rgba(255,255,255,.08);
  color:var(--color-white);
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
body.theme-modern-dark .auth-form-v2 .role-card{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.08);
}
body.theme-modern-dark .auth-form-v2 .role-card.selected{
  background:color-mix(in srgb,var(--color-brand) 15%,transparent);
  border-color:var(--color-brand);
  color:var(--color-brand);
}
body.theme-modern-dark .auth-form-v2 .role-card.selected svg{
  color:var(--color-brand);
}
body.theme-modern-dark .auth-form-v2 .diag-entry-item{
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.06);
}
body.theme-modern-dark .auth-form-v2 .ghost-btn{
  border-color:rgba(255,255,255,.1);
  color:var(--color-body);
}
body.theme-modern-dark .auth-form-v2 .ghost-btn:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.15);
}
body.theme-modern-dark .auth-form-v2 .pwd-strength-bar span{
  background:rgba(255,255,255,.1);
}
body.theme-modern-dark .auth-form-v2 .pwd-toggle:hover{
  background:rgba(255,255,255,.06);
}

/* auth-studio v2：全屏居中模态框，隐藏旧头部 */
.auth-studio{
  background:rgba(0,0,0,.5) !important;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  overflow-y:auto !important;
}
.auth-studio .studio-head{
  display:none !important;
}
.auth-studio .studio-body{
  width:100% !important;
  max-width:100% !important;
  min-height:100vh;
  margin:0 !important;
  padding:24px !important;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent !important;
  box-sizing:border-box;
}
/* shell作为点击遮罩层 */
.auth-shell-v2{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* 关闭按钮在卡片右上角 */
.auth-card-v2{
  position:relative;
}
.auth-card-close{
  position:absolute;
  top:16px;
  right:16px;
  width:36px;
  height:36px;
  border-radius:var(--radius-round);
  border:none;
  background:var(--color-surface-2);
  color:var(--color-muted);
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:18px;
  line-height:1;
  transition:background-color .2s,color .2s;
}
.auth-card-close:hover{
  background:var(--color-surface-3);
  color:var(--color-ink);
}
/* v2提交按钮：覆盖旧的auth-submit样式 */
body.theme-modern-dark .auth-form-v2 .primary-btn.auth-submit,
body.theme-modern-dark .auth-card-v2 .primary-btn.auth-submit,
.auth-form-v2 .primary-btn.auth-submit,
.auth-card-v2 .primary-btn.auth-submit{
  background:var(--color-brand) !important;
  color:var(--color-white) !important;
  border:none !important;
  box-shadow:0 4px 14px var(--color-brand-ring) !important;
}
body.theme-modern-dark .auth-form-v2 .primary-btn.auth-submit:hover,
body.theme-modern-dark .auth-card-v2 .primary-btn.auth-submit:hover,
.auth-form-v2 .primary-btn.auth-submit:hover,
.auth-card-v2 .primary-btn.auth-submit:hover{
  background:var(--color-brand-hover) !important;
  box-shadow:0 6px 20px var(--color-brand-ring) !important;
  transform:translateY(-1px);
}

/* faq details */
body.theme-modern-dark .faq details{
  background:var(--color-surface);
  border-color:var(--color-line);
}
body.theme-modern-dark .faq summary{
  color:var(--color-ink);
}
body.theme-modern-dark .faq p{
  color:var(--color-body);
}

/* source-book 深色主题统一：所有书籍卡片用统一深灰背景，不再区分彩色 */
body.theme-modern-dark .source-book,
body.theme-modern-dark .source-book.book-a,
body.theme-modern-dark .source-book.book-b,
body.theme-modern-dark .source-book.book-c,
body.theme-modern-dark .source-book.book-d,
body.theme-modern-dark .source-book.book-e{
  background:linear-gradient(160deg,var(--color-surface-2),var(--color-surface)) !important;
  color:var(--color-ink) !important;
  border-color:var(--color-line) !important;
}
body.theme-modern-dark .source-book h2,
body.theme-modern-dark .source-book.book-a h2,
body.theme-modern-dark .source-book.book-b h2,
body.theme-modern-dark .source-book.book-c h2,
body.theme-modern-dark .source-book.book-d h2,
body.theme-modern-dark .source-book.book-e h2{
  color:var(--color-ink) !important;
}
body.theme-modern-dark .source-book p,
body.theme-modern-dark .source-book span,
body.theme-modern-dark .source-book.book-a p,
body.theme-modern-dark .source-book.book-a span,
body.theme-modern-dark .source-book.book-b p,
body.theme-modern-dark .source-book.book-b span,
body.theme-modern-dark .source-book.book-c p,
body.theme-modern-dark .source-book.book-c span,
body.theme-modern-dark .source-book.book-d p,
body.theme-modern-dark .source-book.book-d span,
body.theme-modern-dark .source-book.book-e p,
body.theme-modern-dark .source-book.book-e span{
  color:var(--color-body) !important;
  opacity:1 !important;
}
body.theme-modern-dark .source-book small,
body.theme-modern-dark .source-book.book-a small,
body.theme-modern-dark .source-book.book-b small,
body.theme-modern-dark .source-book.book-c small,
body.theme-modern-dark .source-book.book-d small,
body.theme-modern-dark .source-book.book-e small{
  color:var(--color-muted) !important;
  opacity:1 !important;
}
/* "在线阅读"标签（无内联背景）：品牌色软底 */
body.theme-modern-dark .source-book .book-online-tag:not([style*="background"]){
  color:var(--color-brand) !important;
  background:var(--color-brand-soft) !important;
  border-color:var(--color-brand) !important;
}
/* "免费预览"标签（内联黄色背景）：深色文字 */
body.theme-modern-dark .source-book .book-online-tag[style*="background"]{
  color:#1a1a0a !important;
  border-color:rgba(0,0,0,.12) !important;
  font-weight:700 !important;
}
body.theme-modern-dark .source-book .book-cover{
  background:rgba(0,0,0,.2) !important;
}
body.theme-modern-dark .source-book .book-spine{
  background:linear-gradient(90deg,rgba(255,255,255,.06),transparent) !important;
}

/* 搜索框 */
body.theme-modern-dark .search-box{
  background:var(--color-surface-2) !important;
  border-color:var(--color-line) !important;
}
body.theme-modern-dark .search-box input{
  color:var(--color-ink) !important;
  background:transparent !important;
}
body.theme-modern-dark .search-box input::placeholder{
  color:#b0b0b8 !important;
  opacity:1 !important;
}
body.theme-modern-dark .search-box span{
  color:#b0b0b8 !important;
}

/* segmented 分类标签 */
body.theme-modern-dark .segmented{
  background:var(--color-surface-3) !important;
}
body.theme-modern-dark .segmented button:not(.active){
  color:var(--color-body) !important;
}
body.theme-modern-dark .segmented button.active{
  background:var(--color-brand) !important;
  color:var(--color-white) !important;
  box-shadow:0 2px 8px color-mix(in srgb,var(--color-brand) 30%,transparent) !important;
}

/* evidence-method */
body.theme-modern-dark .evidence-method{
  background:var(--color-surface);
  border-color:var(--color-line);
}
body.theme-modern-dark .method-copy h2{
  color:var(--color-ink);
}
body.theme-modern-dark .method-steps article{
  background:var(--color-surface-2);
}
body.theme-modern-dark .method-steps h3{
  color:var(--color-ink);
}
body.theme-modern-dark .method-steps b{
  color:var(--color-brand);
}
body.theme-modern-dark .method-steps p{
  color:var(--color-muted);
}

/* source-principle */
body.theme-modern-dark .source-principle>div{
  background:var(--color-surface);
  border-color:var(--color-line);
}
body.theme-modern-dark .source-principle small{
  color:var(--color-body);
}

/* course-results */
body.theme-modern-dark .course-results{
  color:var(--color-muted);
}

/* price-card.featured 特殊处理 */
body.theme-modern-dark .price-card.featured{
  background:linear-gradient(150deg,var(--color-brand),var(--color-brand-active));
  color:var(--color-white);
}
body.theme-modern-dark .price-card.featured>span,
body.theme-modern-dark .price-card.featured .price small,
body.theme-modern-dark .price-card.featured>p,
body.theme-modern-dark .price-card.featured ul{
  color:rgba(255,255,255,.8);
}
body.theme-modern-dark .recommend-badge{
  background:rgba(255,255,255,.15);
  color:var(--color-white);
}

/* empty-state */
body.theme-modern-dark .empty-state{
  background:var(--color-surface);
  border-color:var(--color-line-strong);
  color:var(--color-muted);
}

/* 40. 滚动条Firefox适配 */
body.theme-modern-dark *{
  scrollbar-color:rgba(255,255,255,.15) transparent;
  scrollbar-width:thin;
}

.tyc-result-item{transition:background-color var(--transition-fast)!important;}
.tyc-select-btn{transition:background-color var(--transition-fast),color var(--transition-fast)!important;}
.checkbox-label input[type="checkbox"]{transition:background-color var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast)!important;}
.btn-ripple::after{transition:opacity var(--transition-base)!important;}
.cert-preview-card{transition:transform var(--transition-slow)!important;}
.admin-stat-card{transition:transform var(--transition-base),box-shadow var(--transition-base)!important;}
.admin-actions button{transition:background-color var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast)!important;}

/* 免费课程（前3讲）：绿色"免费"徽章，JS 条件渲染 */
.course-item .free-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--color-success);
  color: var(--color-white);
  margin-left: 6px;
  vertical-align: middle;
}

/* 学习中课程（open 但未完成、未锁定）：品牌色左边框提示 */
.course-item.open:not(.completed):not(.member-locked) {
  border-left: 3px solid var(--color-brand);
}

/* 专业主题下的状态颜色适配 */
body.theme-coursera .course-item.completed {
  border-color: var(--color-success);
  background: var(--color-success-soft);
}
body.theme-coursera .course-item.completed::before {
  border-color: transparent var(--color-success) transparent transparent;
}
body.theme-coursera .course-item.member-locked {
  border-color: var(--color-warning);
}
body.theme-coursera .course-item.member-locked::before {
  background: linear-gradient(135deg, var(--color-warning-dark), var(--color-warning));
}
body.theme-coursera .course-item.member-locked::after {
  border-color: color-mix(in srgb, var(--color-warning) 12%, transparent);
}
body.theme-coursera .course-item.member-locked .course-badge {
  color: var(--color-warning-dark);
  border-color: var(--color-warning);
  background: var(--color-warning-soft);
}
body.theme-coursera .course-item.open:not(.completed):not(.member-locked) {
  border-left: 3px solid var(--color-brand);
}

/* 移动端适配：状态角标在小屏幕下保持可见 */
@media(max-width:640px){
  .course-item.completed::before{
    border-width:0 28px 28px 0;
  }
  .course-item.completed::after{
    top:5px;
    right:6px;
    width:5px;
    height:9px;
  }
  .course-item.member-locked::before{
    font-size:8px;
    padding:3px 5px 3px 10px;
  }
}

/* ============================================= */
/* ===== v11.1 UI改进：新导航与按钮样式 ===== */
/* ============================================= */

/* 隐藏旧的主题切换器（已重新设计为步进器）和旧的record-btn */
.top-actions .theme-switcher{display:none !important;}
.top-actions .record-btn{display:none !important;}

/* ── 顶部操作按钮（学习记录）：与primary-btn风格一致 ── */
.top-action-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--color-brand);
  color:var(--color-white);
  border:none;
  padding:8px 16px;
  border-radius:var(--radius-pill);
  font-size:var(--font-sm);
  font-weight:600;
  cursor:pointer;
  box-shadow:0 2px 8px var(--color-brand-ring);
  transition:background-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);
  white-space:nowrap;
}
.top-action-btn:hover{
  background:var(--color-brand-hover);
  transform:translateY(-1px);
  box-shadow:0 4px 14px var(--color-brand-ring);
}
.top-action-btn:active{
  transform:translateY(0);
}
.top-action-btn svg{
  flex-shrink:0;
}

/* ── 主题步进器（上下箭头选择） ── */
.theme-stepper{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  background:var(--color-surface-2);
  border:1px solid var(--color-line);
  border-radius:var(--radius-card);
  padding:2px;
  margin:0 4px;
  position:relative;
  overflow:hidden;
}
.theme-stepper button{
  width:28px;
  height:18px;
  border:none;
  background:transparent;
  color:var(--color-muted);
  cursor:pointer;
  display:grid;
  place-items:center;
  border-radius:4px;
  transition:background-color var(--transition-fast),color var(--transition-fast);
}
.theme-stepper button:hover{
  background:var(--color-surface);
  color:var(--color-brand);
}
.theme-stepper button:active{
  background:var(--color-brand-soft);
}
.theme-current{
  font-size:11px;
  font-weight:700;
  color:var(--color-brand);
  padding:2px 4px;
  line-height:1;
  min-width:28px;
  text-align:center;
  letter-spacing:.02em;
  user-select:none;
}

/* ── 首页登录按钮（outline-btn风格） ── */
.hero-login-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.hero-login-btn svg{
  flex-shrink:0;
}
.hero-login-btn.logged-in{
  background:var(--color-success-soft);
  border-color:var(--color-success);
  color:var(--color-success);
}

/* ── 课程界面工具按钮（笔记/关闭）：更醒目 ── */
.studio-tool-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--color-surface-2);
  border:1px solid var(--color-line);
  color:var(--color-body);
  padding:8px 14px;
  border-radius:var(--radius-pill);
  font-size:var(--font-sm);
  font-weight:600;
  cursor:pointer;
  transition:background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}
.studio-tool-btn:hover{
  background:var(--color-brand);
  color:var(--color-white);
  border-color:var(--color-brand);
  box-shadow:0 2px 10px var(--color-brand-ring);
  transform:translateY(-1px);
}
.studio-tool-btn:active{
  transform:translateY(0);
}
.studio-tool-btn svg{
  flex-shrink:0;
}
.close-tool-btn:hover{
  background:var(--color-error);
  border-color:var(--color-error);
  box-shadow:0 2px 10px color-mix(in srgb,var(--color-error) 30%,transparent);
}

/* ── 首次使用引导提示 ── */
.studio-onboarding{
  position:absolute;
  top:100%;
  right:20px;
  z-index:200;
  pointer-events:none;
  opacity:0;
  transform:translateY(-10px);
  transition:opacity .4s,transform .4s;
  padding-top:10px;
}
.studio-onboarding.show{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.onboarding-pulse{
  position:absolute;
  top:-4px;
  right:-4px;
  width:60px;
  height:40px;
  border-radius:var(--radius-pill);
  background:var(--color-brand);
  opacity:.15;
  animation:pulseRing 2s ease-out infinite;
}
@keyframes pulseRing{
  0%{transform:scale(.8);opacity:.3;}
  100%{transform:scale(1.8);opacity:0;}
}
.onboarding-tip{
  position:relative;
  background:var(--color-surface);
  border:1px solid var(--color-brand);
  border-radius:var(--radius-card);
  padding:14px 18px;
  box-shadow:0 8px 30px rgba(0,0,0,.15);
  min-width:220px;
}
.onboarding-tip-arrow{
  position:absolute;
  top:-7px;
  right:30px;
  width:12px;
  height:12px;
  background:var(--color-surface);
  border-left:1px solid var(--color-brand);
  border-top:1px solid var(--color-brand);
  transform:rotate(45deg);
}
.onboarding-tip-content b{
  display:block;
  font-size:var(--font-sm);
  font-weight:700;
  color:var(--color-brand);
  margin-bottom:4px;
}
.onboarding-tip-content p{
  font-size:var(--font-sm);
  color:var(--color-body);
  margin:0 0 10px;
  line-height:1.5;
}
.onboarding-tip-content p b{
  display:inline;
  color:var(--color-ink);
  font-weight:700;
}
.onboarding-tip-content button{
  background:var(--color-brand);
  color:var(--color-white);
  border:none;
  padding:6px 16px;
  border-radius:var(--radius-pill);
  font-size:var(--font-xs);
  font-weight:600;
  cursor:pointer;
  transition:background-color var(--transition-fast);
}
.onboarding-tip-content button:hover{
  background:var(--color-brand-hover);
}

/* ── 极夜主题适配 ── */
body.theme-modern-dark .top-action-btn{
  background:var(--color-brand);
  box-shadow:0 2px 10px color-mix(in srgb,var(--color-brand) 35%,transparent);
}
body.theme-modern-dark .top-action-btn:hover{
  background:var(--color-brand-hover);
  box-shadow:0 4px 18px color-mix(in srgb,var(--color-brand) 50%,transparent);
}
body.theme-modern-dark .theme-stepper{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.1);
}
body.theme-modern-dark .theme-stepper button:hover{
  background:rgba(255,255,255,.1);
}
body.theme-modern-dark .theme-current{
  color:var(--color-brand);
}
body.theme-modern-dark .studio-tool-btn{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.12);
  color:var(--color-body);
}
body.theme-modern-dark .studio-tool-btn:hover{
  background:var(--color-brand);
  border-color:var(--color-brand);
  color:var(--color-white);
  box-shadow:0 4px 16px color-mix(in srgb,var(--color-brand) 40%,transparent);
}
body.theme-modern-dark .close-tool-btn:hover{
  background:#e05560;
  border-color:#e05560;
  box-shadow:0 4px 16px color-mix(in srgb,var(--color-brand) 40%,transparent);
}
body.theme-modern-dark .onboarding-tip{
  background:var(--color-surface-2);
  border-color:var(--color-brand);
  box-shadow:0 8px 30px rgba(0,0,0,.5);
}
body.theme-modern-dark .onboarding-tip-arrow{
  background:var(--color-surface-2);
}

/* ── 响应式：移动端适配 ── */
@media(max-width:768px){
  .top-actions .top-action-btn{
    padding:6px 12px;
    font-size:var(--font-xs);
  }
  .top-action-btn span:not(.record-dot){}
  .theme-stepper{
    margin:0 2px;
  }
  .theme-stepper button{
    width:24px;
    height:16px;
  }
  .theme-current{
    font-size:10px;
    min-width:24px;
  }
  .studio-onboarding{
    right:10px;
    top:56px;
  }
  .onboarding-tip{
    min-width:180px;
    padding:12px 14px;
  }
}
@media(max-width:640px){
  .hero-actions{
    flex-wrap:wrap;
  }
  .hero-login-btn{
    width:100%;
    justify-content:center;
    min-height:48px;
  }
}

/* ============================================= */
/* ===== v11.2 导航改名 + 反馈页 + 知识库FAQ板块 ===== */
/* ============================================= */

/* ── 反馈页面（卡片网格布局） ── */
.feedback-grid{
  max-width:960px;
  margin:0 auto;
  padding:var(--space-6) var(--space-4);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--space-5);
}
.feedback-card-v2{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:var(--space-6) var(--space-5);
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  transition:border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast);
}
.feedback-card-v2:hover{
  border-color:var(--color-brand-soft);
  box-shadow:0 8px 30px rgba(0,0,0,.08);
  transform:translateY(-2px);
}
.feedback-card-icon{
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--color-brand-soft);
  color:var(--color-brand);
  display:grid;
  place-items:center;
  margin-bottom:var(--space-4);
  flex-shrink:0;
}
.feedback-card-v2 h3{
  margin:0 0 var(--space-1);
  font-size:var(--font-lg);
  font-weight:700;
  color:var(--color-ink);
}
.feedback-desc{
  margin:0 0 var(--space-5);
  font-size:var(--font-sm);
  color:var(--color-muted);
  line-height:1.6;
  flex:1;
}
.feedback-qr-wrap{
  padding:var(--space-4);
  background:#fff;
  border-radius:var(--radius-card);
  box-shadow:0 4px 16px rgba(0,0,0,.08);
  border:1px solid var(--color-line);
}
.feedback-qr-wrap img{
  width:200px;
  height:200px;
  display:block;
  border-radius:var(--radius-sm);
}
.feedback-email-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 24px;
  background:var(--color-brand-soft);
  color:var(--color-brand);
  border-radius:var(--radius-pill);
  font-size:var(--font-sm);
  font-weight:600;
  text-decoration:none;
  transition:background-color var(--transition-fast),color var(--transition-fast);
  margin-top:auto;
}
.feedback-email-link:hover{
  background:var(--color-brand);
  color:var(--color-white);
}
.feedback-jump-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:auto;
  padding:12px 24px;
  font-size:var(--font-sm);
}

/* ── 知识库中的FAQ板块 ── */
.kb-faq-section{
  max-width:820px;
  margin:0 auto;
}
.kb-faq-header{
  margin-bottom:var(--space-5);
  padding-bottom:var(--space-4);
  border-bottom:1px solid var(--color-line);
}
.kb-faq-header p{
  margin:0 0 var(--space-2);
  font-size:var(--font-sm);
  color:var(--color-body);
}
.kb-faq-section .faq-list{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.kb-faq-section .faq-item{
  border:1px solid var(--color-line);
  border-radius:var(--radius-card);
  background:var(--color-surface);
  overflow:hidden;
  transition:border-color var(--transition-fast);
}
.kb-faq-section .faq-item:hover{
  border-color:var(--color-brand-soft);
}
.kb-faq-section .faq-item.open{
  border-color:var(--color-brand);
  box-shadow:0 2px 12px var(--color-brand-ring);
}
.kb-faq-section .faq-q{
  width:100%;
  display:flex;
  align-items:center;
  gap:var(--space-2);
  padding:var(--space-4) var(--space-5);
  background:none;
  border:none;
  cursor:pointer;
  text-align:left;
  font-size:var(--font-base);
  color:var(--color-ink);
  font-weight:600;
  transition:background-color var(--transition-fast);
}
.kb-faq-section .faq-q:hover{
  background:var(--color-surface-2);
}
.kb-faq-section .faq-q-cat{
  flex-shrink:0;
  font-size:var(--font-xs);
  font-weight:600;
  padding:2px 8px;
  border-radius:var(--radius-pill);
  background:var(--color-brand-soft);
  color:var(--color-brand);
}
.kb-faq-section .faq-q-text{
  flex:1;
}
.kb-faq-section .faq-q-icon{
  flex-shrink:0;
  color:var(--color-muted);
  transition:transform var(--transition-fast);
}
.kb-faq-section .faq-item.open .faq-q-icon{
  transform:rotate(180deg);
  color:var(--color-brand);
}
.kb-faq-section .faq-a{
  border-top:1px solid var(--color-line);
}
.kb-faq-section .faq-a-inner{
  padding:var(--space-5);
  font-size:var(--font-sm);
  line-height:1.75;
  color:var(--color-body);
}
.kb-faq-section .faq-a-inner p{
  margin:0 0 var(--space-2);
}
.kb-faq-section .faq-a-inner ul{
  margin:var(--space-2) 0;
  padding-left:var(--space-5);
}
.kb-faq-section .faq-a-inner li{
  margin-bottom:4px;
}
.kb-faq-section .faq-compare{
  margin:var(--space-4) 0;
  overflow-x:auto;
}
.kb-faq-section .faq-compare table{
  width:100%;
  border-collapse:collapse;
  font-size:var(--font-sm);
}
.kb-faq-section .faq-compare th,
.kb-faq-section .faq-compare td{
  padding:8px 12px;
  border:1px solid var(--color-line);
  text-align:left;
}
.kb-faq-section .faq-compare th{
  background:var(--color-surface-2);
  font-weight:600;
  color:var(--color-ink);
}
.kb-faq-section .faq-compare td.faq-row-head{
  font-weight:600;
  color:var(--color-ink);
  white-space:nowrap;
}
.kb-faq-section .faq-warn,
.kb-faq-section .faq-tip{
  display:flex;
  gap:var(--space-2);
  padding:var(--space-4);
  border-radius:var(--radius-card);
  margin:var(--space-4) 0;
  font-size:var(--font-sm);
}
.kb-faq-section .faq-warn{
  background:#fef3cd;
  color:#856404;
  border:1px solid #ffc107;
}
.kb-faq-section .faq-tip{
  background:var(--color-brand-soft);
  color:var(--color-ink);
  border:1px solid var(--color-brand-ring);
}
.kb-faq-section .faq-tags{
  margin-top:var(--space-4);
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.kb-faq-section .faq-tag{
  font-size:var(--font-xs);
  color:var(--color-muted);
  padding:2px 8px;
  background:var(--color-surface-2);
  border-radius:var(--radius-pill);
}

/* ── 极夜主题适配：反馈页 + 知识库FAQ ── */
body.theme-modern-dark .feedback-item{
  background:var(--color-surface-2);
  border-color:rgba(255,255,255,.08);
}
body.theme-modern-dark .feedback-item:hover{
  border-color:var(--color-brand);
  box-shadow:0 4px 20px color-mix(in srgb,var(--color-brand) 15%,transparent);
}
body.theme-modern-dark .feedback-icon{
  background:color-mix(in srgb,var(--color-brand) 15%,transparent);
}
body.theme-modern-dark .kb-faq-section .faq-item{
  background:var(--color-surface-2);
  border-color:rgba(255,255,255,.08);
}
body.theme-modern-dark .kb-faq-section .faq-item.open{
  border-color:var(--color-brand);
  box-shadow:0 2px 16px color-mix(in srgb,var(--color-brand) 25%,transparent);
}
body.theme-modern-dark .kb-faq-section .faq-q:hover{
  background:rgba(255,255,255,.05);
}
body.theme-modern-dark .kb-faq-section .faq-q-cat{
  background:color-mix(in srgb,var(--color-brand) 15%,transparent);
}
body.theme-modern-dark .kb-faq-section .faq-a{
  border-top-color:rgba(255,255,255,.08);
}
body.theme-modern-dark .kb-faq-section .faq-compare th{
  background:rgba(255,255,255,.06);
}
body.theme-modern-dark .kb-faq-section .faq-compare td,
body.theme-modern-dark .kb-faq-section .faq-compare th{
  border-color:rgba(255,255,255,.08);
}
body.theme-modern-dark .kb-faq-section .faq-warn{
  background:rgba(255,193,7,.1);
  color:#ffd54f;
  border-color:rgba(255,193,7,.3);
}
body.theme-modern-dark .kb-faq-section .faq-tip{
  background:color-mix(in srgb,var(--color-brand) 10%,transparent);
  border-color:color-mix(in srgb,var(--color-brand) 25%,transparent);
}
body.theme-modern-dark .kb-faq-section .faq-tag{
  background:rgba(255,255,255,.06);
}

/* ── 移动端适配：反馈页 ── */
@media(max-width:640px){
  .feedback-item{
    flex-direction:column;
    padding:var(--space-4);
  }
  .feedback-icon{
    width:40px;
    height:40px;
  }
  .kb-faq-section .faq-q{
    padding:var(--space-4);
    font-size:var(--font-sm);
  }
  .kb-faq-section .faq-a-inner{
    padding:var(--space-4);
  }
}

/* ── 问题咨询社区 ── */
.community-wrap{
  max-width:1100px;
  margin:0 auto;
  padding:var(--space-5) var(--space-4);
  display:grid;
  grid-template-columns:200px 1fr;
  gap:var(--space-7);
  align-items:start;
}
.community-sidebar{
  position:sticky;
  top:80px;
  width:100%;
}
.community-main{
  min-width:0;
  overflow:hidden;
}

/* 社区引导横幅 */
.community-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-5);
  padding:var(--space-5) var(--space-6);
  background:var(--color-brand-gradient);
  border-radius:var(--radius-lg);
  color:var(--color-on-brand);
  margin-bottom:var(--space-5);
}
.banner-text{flex:1;min-width:0;}
.banner-text h3{
  margin:0 0 var(--space-1);
  font-size:var(--font-lg);
  font-weight:700;
  color:var(--color-on-brand);
}
.banner-text p{
  margin:0;
  font-size:var(--font-sm);
  color:rgba(255,255,255,.8);
  line-height:1.5;
}
.banner-stats{
  display:flex;
  gap:var(--space-8);
  flex-shrink:0;
  align-items:center;
}
.banner-stat{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.banner-stat b{
  font-size:28px;
  font-weight:700;
  line-height:1;
  color:var(--color-on-brand);
}
.banner-stat span{
  font-size:var(--font-sm);
  color:rgba(255,255,255,.75);
  letter-spacing:.02em;
}

/* 侧边栏分类 */
.community-cats{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.community-cat{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--space-2) var(--space-3);
  border:none;
  background:transparent;
  border-radius:var(--radius-md);
  font-size:var(--font-sm);
  color:var(--color-body);
  cursor:pointer;
  text-align:left;
  width:100%;
  transition:background-color var(--transition-fast),color var(--transition-fast);
}
.community-cat:hover{
  background:var(--color-surface-2);
  color:var(--color-ink);
}
.community-cat.active{
  background:var(--color-brand-soft);
  color:var(--color-brand);
  font-weight:600;
}
.cat-name{flex:1;}
.cat-count{
  font-size:var(--font-xs);
  color:var(--color-muted);
  background:var(--color-surface-2);
  padding:1px 7px;
  border-radius:var(--radius-pill);
  min-width:18px;
  text-align:center;
  line-height:1.5;
}
.community-cat.active .cat-count{
  background:var(--color-brand);
  color:var(--color-on-brand);
}
.community-sidebar-divider{
  height:1px;
  background:var(--color-line);
  margin:var(--space-4) 0;
}
.community-sidebar-section h4{
  margin:0 0 var(--space-2);
  font-size:var(--font-xs);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--color-muted);
  padding:0 var(--space-3);
}
.community-sort{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.sort-btn{
  display:block;
  width:100%;
  padding:var(--space-2) var(--space-3);
  border:none;
  background:transparent;
  border-radius:var(--radius-md);
  font-size:var(--font-sm);
  color:var(--color-body);
  cursor:pointer;
  text-align:left;
  transition:background-color var(--transition-fast),color var(--transition-fast);
}
.sort-btn:hover{background:var(--color-surface-2);color:var(--color-ink);}
.sort-btn.active{color:var(--color-brand);font-weight:600;background:var(--color-brand-soft);}
.sidebar-link{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  padding:var(--space-2) var(--space-3);
  font-size:var(--font-sm);
  color:var(--color-body);
  text-decoration:none;
  border-radius:var(--radius-md);
  border:none;
  background:none;
  cursor:pointer;
  width:100%;
  text-align:left;
  transition:background-color var(--transition-fast),color var(--transition-fast);
}
.sidebar-link:hover{background:var(--color-surface-2);color:var(--color-ink);}

/* 列表视图 */
.community-list-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:var(--space-4);
  padding-bottom:var(--space-3);
  border-bottom:1px solid var(--color-line);
}
.community-list-header h3{
  margin:0;
  font-size:var(--font-lg);
  font-weight:700;
  color:var(--color-ink);
}
.community-total{
  font-size:var(--font-sm);
  color:var(--color-muted);
}
.post-list{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}
.post-item{
  display:flex;
  gap:var(--space-4);
  padding:var(--space-5);
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:var(--radius-card);
  cursor:pointer;
  transition:border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast);
}
.post-item:hover{
  border-color:var(--color-brand);
  box-shadow:0 4px 16px rgba(0,0,0,.06);
  transform:translateY(-1px);
}
.post-stats{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-3);
  flex-shrink:0;
  min-width:52px;
  padding-top:var(--space-1);
}
.stat-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
}
.stat-item b{
  font-size:var(--font-lg);
  font-weight:700;
  color:var(--color-ink);
  line-height:1;
}
.stat-item span{
  font-size:var(--font-xs);
  color:var(--color-muted);
}
.post-body{
  flex:1;
  min-width:0;
}
.post-title{
  margin:0 0 var(--space-2);
  font-size:var(--font-base);
  font-weight:600;
  color:var(--color-ink);
  line-height:1.5;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-1);
}
.post-tag{
  display:inline-block;
  font-size:var(--font-xs);
  padding:1px 6px;
  border-radius:var(--radius-xs);
  font-weight:500;
  flex-shrink:0;
  line-height:1.5;
}
.tag-cat{background:var(--color-surface-2);color:var(--color-body);}
.tag-pinned{background:var(--color-warning-soft);color:var(--color-warning-dark);}
.tag-resolved{background:var(--color-success-soft);color:var(--color-success);}
.tag-official{background:var(--color-brand-soft);color:var(--color-brand);}
.post-excerpt{
  margin:0 0 var(--space-3);
  font-size:var(--font-sm);
  color:var(--color-body);
  line-height:1.6;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.post-meta{
  display:flex;
  align-items:center;
  gap:var(--space-4);
  font-size:var(--font-xs);
  color:var(--color-muted);
}
.post-author{
  color:var(--color-ink);
  font-weight:500;
}
.community-loading{
  padding:var(--space-10) var(--space-4);
  text-align:center;
  color:var(--color-muted);
  font-size:var(--font-sm);
}
.community-loadmore{
  text-align:center;
  padding:var(--space-5) 0;
}

/* 空状态 */
.empty-icon{
  width:64px;height:64px;
  border-radius:var(--radius-round);
  background:var(--color-surface-2);
  color:var(--color-muted);
  display:grid;place-items:center;
  margin:0 auto var(--space-4);
}
.community-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:var(--space-12) var(--space-4);
  text-align:center;
}

/* 详情视图 */
.back-btn{
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  padding:var(--space-2) 0;
  border:none;
  background:none;
  color:var(--color-brand);
  font-size:var(--font-sm);
  cursor:pointer;
  margin-bottom:var(--space-4);
}
.back-btn:hover{text-decoration:underline;}
.post-detail{
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  padding:var(--space-7);
  margin-bottom:var(--space-5);
}
.detail-head h2{
  margin:0 0 var(--space-3);
  font-size:var(--font-xl);
  font-weight:700;
  line-height:1.4;
  color:var(--color-ink);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-2);
}
.detail-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--space-4);
  font-size:var(--font-sm);
  color:var(--color-muted);
  padding-bottom:var(--space-4);
  border-bottom:1px solid var(--color-line);
  margin-bottom:var(--space-5);
}
.detail-content{
  font-size:var(--font-base);
  color:var(--color-ink);
  line-height:1.8;
  white-space:pre-wrap;
  word-break:break-word;
}
.reply-section{
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  margin-bottom:var(--space-5);
}
.reply-section h4{
  margin:0 0 var(--space-3);
  font-size:var(--font-base);
  font-weight:600;
  color:var(--color-ink);
}
.reply-section textarea{
  width:100%;
  box-sizing:border-box;
  padding:var(--space-3);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  font:inherit;
  font-size:var(--font-sm);
  color:var(--color-ink);
  background:var(--color-surface);
  resize:vertical;
  min-height:80px;
  transition:border-color var(--transition-fast),box-shadow var(--transition-fast);
}
.reply-section textarea:focus{
  outline:none;
  border-color:var(--color-brand);
  box-shadow:0 0 0 3px var(--color-brand-ring);
}
.reply-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:var(--space-3);
}
.reply-tip{
  font-size:var(--font-sm);
  color:var(--color-muted);
}
.reply-list{
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  padding:var(--space-5) var(--space-7);
}
.reply-list h4{
  margin:0 0 var(--space-3);
  font-size:var(--font-base);
  font-weight:600;
  color:var(--color-ink);
}
.reply-item{
  padding:var(--space-4) 0;
  border-bottom:1px solid var(--color-line);
}
.reply-item:last-child{border-bottom:none;}
.reply-head{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  margin-bottom:var(--space-2);
}
.reply-author{
  font-size:var(--font-sm);
  font-weight:600;
  color:var(--color-ink);
}
.reply-time{
  font-size:var(--font-xs);
  color:var(--color-muted);
}
.reply-content{
  font-size:var(--font-sm);
  color:var(--color-body);
  line-height:1.7;
  word-break:break-word;
  white-space:pre-wrap;
}

/* 发帖弹窗 */
.modal-mask{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-4);
  animation:fadeIn .2s;
}
.modal-box{
  background:var(--color-surface);
  border-radius:var(--radius-lg);
  width:100%;
  max-width:580px;
  max-height:90vh;
  overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  animation:slideUp .25s;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--space-5) var(--space-6);
  border-bottom:1px solid var(--color-line);
}
.modal-head h3{margin:0;font-size:var(--font-lg);font-weight:700;color:var(--color-ink);}
.modal-close{
  width:32px;height:32px;
  border:none;background:none;
  font-size:22px;color:var(--color-muted);
  cursor:pointer;border-radius:var(--radius-round);
  display:grid;place-items:center;
  line-height:1;
  transition:background-color var(--transition-fast),color var(--transition-fast);
}
.modal-close:hover{background:var(--color-surface-2);color:var(--color-ink);}
.modal-body{padding:var(--space-5) var(--space-6);}
.modal-foot{
  display:flex;
  justify-content:flex-end;
  gap:var(--space-3);
  padding:var(--space-4) var(--space-6);
  border-top:1px solid var(--color-line);
}
.form-label{
  display:block;
  margin:0 0 var(--space-2);
  font-size:var(--font-sm);
  font-weight:600;
  color:var(--color-ink);
}
.form-label .req{color:#dc2626;}
.form-input,.form-select,.form-textarea{
  width:100%;
  box-sizing:border-box;
  padding:var(--space-3);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  font:inherit;
  font-size:var(--font-sm);
  color:var(--color-ink);
  background:var(--color-surface);
  transition:border-color var(--transition-fast),box-shadow var(--transition-fast);
  margin-bottom:var(--space-4);
}
.form-textarea{resize:vertical;min-height:140px;font-family:inherit;}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  outline:none;
  border-color:var(--color-brand);
  box-shadow:0 0 0 3px var(--color-brand-ring);
}
.form-tip{
  font-size:var(--font-sm);
  color:var(--color-muted);
  min-height:20px;
}

/* 响应式 */
@media(max-width:768px){
  .community-wrap{
    grid-template-columns:1fr;
    gap:var(--space-4);
    padding:var(--space-4) var(--space-3);
  }
  .community-sidebar{
    position:static;
  }
  .community-cats{
    flex-direction:row;
    overflow-x:auto;
    gap:var(--space-1);
    padding-bottom:var(--space-2);
  }
  .community-cat{
    flex-shrink:0;
  }
  .community-sidebar-divider,.community-sidebar-section{display:none;}
  .community-banner{
    flex-direction:column;
    text-align:center;
    padding:var(--space-5) var(--space-4);
    gap:var(--space-4);
  }
  .banner-stats{gap:var(--space-8);}
  .post-item{
    padding:var(--space-4);
    gap:var(--space-3);
  }
  .post-stats{
    min-width:44px;
  }
  .post-detail,.reply-list{padding:var(--space-4);}
  .reply-section{padding:var(--space-4);}
  .modal-box{
    max-width:100%;
    margin:var(--space-2);
  }
  .modal-head,.modal-body,.modal-foot{
    padding-left:var(--space-4);
    padding-right:var(--space-4);
  }
}