/* 排版与氛围层（设计 Token 见 tokens.css） */

.prose {
  font-size: var(--prose-size);
  line-height: var(--prose-leading);
}

.app {
  padding-left: var(--content-pad);
  padding-right: var(--content-pad);
}

.comic-stage {
  opacity: var(--stage-opacity);
  filter: blur(var(--stage-blur));
  transition: opacity 0.35s ease;
}

.comic-halftone {
  opacity: var(--halftone-opacity);
}

.appearance-hero {
  margin-bottom: var(--space-4);
}

.appearance-hero h1 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 1.9rem);
}

.appearance-hero p {
  margin: 0;
  color: var(--ink-soft);
}

.appearance-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* —— 简洁实用派 —— */
html[data-ui="practical"] .comic-stage {
  display: none;
}

html[data-ui="practical"] .site-header {
  background: var(--surface-solid);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: var(--line);
}

html[data-ui="practical"] .site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
}

html[data-ui="practical"] .brand-home {
  animation: none;
}

html[data-ui="practical"] .header-nav {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-ui="practical"] .nav-primary a {
  border-radius: 0;
}

html[data-ui="practical"] .nav-primary a.active {
  background: transparent;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

html[data-ui="practical"] .panel {
  border-width: 1px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  backdrop-filter: none;
  animation: none;
}

html[data-ui="practical"] .article-list {
  animation: none;
}

html[data-ui="practical"] .article-card {
  border-radius: var(--radius-md);
  box-shadow: none;
  backdrop-filter: none;
}

html[data-ui="practical"] .article-card:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}

html[data-ui="practical"] .file-row {
  border-bottom-color: color-mix(in srgb, var(--line) 88%, transparent);
}

html[data-ui="practical"] .file-row:hover h2 {
  color: var(--accent-deep);
}

html[data-ui="practical"] .search-shell {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

html[data-ui="practical"] .user-menu-head {
  background: transparent;
}

html[data-ui="practical"] .user-menu-role-text {
  color: var(--ink-soft);
}

html[data-ui="practical"] .user-menu-grid-item:hover {
  transform: none;
}

html[data-ui="practical"] .theme-switch-icon {
  display: none;
}

html[data-ui="practical"] .theme-switch-btn[aria-pressed="true"] {
  box-shadow: none;
}

/* —— 夜间实用派：降低眩光、强化阅读区对比 —— */
html[data-theme="dark"][data-ui="practical"] .site-header {
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(12px) saturate(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
}

html[data-theme="dark"][data-ui="practical"] .site-header.is-scrolled {
  background: color-mix(in srgb, var(--bg) 98%, transparent);
}

html[data-theme="dark"][data-ui="practical"] .panel {
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}

html[data-theme="dark"][data-ui="practical"] a.file-row.article-row:hover {
  background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
}

html[data-theme="dark"][data-ui="practical"] .prose {
  color: var(--ink);
}

html[data-theme="dark"][data-ui="practical"] .article-view .title {
  color: var(--ink);
}