/* Shared materials shell: warm paper, quiet accents, and content-first hierarchy. */
:root {
  --material-bg: #f8f5ef;
  --material-surface: rgba(255, 253, 252, .9);
  --material-text: #4f4948;
  --material-muted: #918984;
  --material-border: #e8e1d9;
  --material-brand: #d98c9a;
  --material-shadow: 0 8px 24px rgba(91, 70, 63, .055);
}

.materials-page { color: var(--material-text); }
.materials-header { width: min(1180px, calc(100% - 32px)); margin: 0 auto 18px; }
.materials-topbar { display: flex; min-height: 52px; align-items: center; justify-content: space-between; padding-top: max(16px, env(safe-area-inset-top)); }
.materials-back-pill { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; padding: 0 14px; border: 1px solid rgba(217, 140, 154, .18); border-radius: 999px; color: var(--material-muted); background: rgba(255, 253, 247, .58); font: 500 13px/1 system-ui, sans-serif; text-decoration: none; }
.materials-back-pill:hover { border-color: rgba(217, 140, 154, .4); color: var(--material-text); background: rgba(255, 253, 247, .86); }
.materials-channel-nav { display: flex; gap: 22px; overflow-x: auto; padding: 8px 1px 0; border-bottom: 1px solid var(--material-border); scrollbar-width: none; }
.materials-channel-nav::-webkit-scrollbar { display: none; }
.materials-channel-nav a { position: relative; flex: 0 0 auto; padding: 10px 0 11px; color: var(--material-muted); font-size: 13px; font-weight: 650; line-height: 1.2; text-decoration: none; }
.materials-channel-nav a::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 2px; background: transparent; content: ""; }
.materials-channel-nav a.is-active { color: var(--material-text); }
.materials-channel-nav a.is-active::after { background: var(--material-brand); }
.materials-page .archive-card,
.materials-page .assessment-card,
.materials-page .profile,
.materials-page .drawer { border-color: var(--material-border); background: var(--material-surface); box-shadow: var(--material-shadow); }

/* Archive sections lose the old dark side rail and become distinct, quieter content books. */
.materials-page--archive .archive-shell { width: min(1180px, calc(100% - 32px)); padding: 0 0 calc(96px + env(safe-area-inset-bottom)); }
.materials-page--archive .materials-header { width: 100%; }
.materials-page--archive .archive-layout { display: block; margin: 0; border: 0; background: transparent; box-shadow: none; }
.materials-page--archive .archive-sidebar { display: none; }
.materials-page--archive .archive-content { padding: 28px; border: 1px solid var(--material-border); border-radius: 18px; background: var(--material-surface); box-shadow: var(--material-shadow); }
.materials-page--archive :is(.archive-hero, .assessments-hero, .douyin-hero) {
  position: relative;
  display: block;
  margin: 0;
  padding: 0 0 22px;
  border: 0;
  border-bottom: 1px solid var(--material-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.materials-page--archive :is(.archive-hero, .assessments-hero, .douyin-hero)::before,
.materials-page--archive :is(.archive-hero, .assessments-hero, .douyin-hero)::after {
  display: none;
  content: none;
}
.materials-page--archive :is(.archive-hero, .assessments-hero, .douyin-hero) > .archive-kicker {
  display: block;
  margin: 0 0 7px;
  color: var(--material-muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: .14em;
}
.materials-page--archive :is(.archive-hero, .assessments-hero, .douyin-hero) > h2 {
  max-width: 760px;
  margin: 0;
  color: var(--material-text);
  font-family: system-ui, sans-serif;
  font-size: clamp(25px, 4vw, 36px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.035em;
}
.materials-page--archive :is(.archive-hero, .assessments-hero, .douyin-hero) > :is(.archive-description, p:not(.archive-kicker)) {
  max-width: 640px;
  margin: 8px 0 0;
  color: var(--material-muted);
  font-size: 14px;
  line-height: 1.7;
}
.materials-page--archive .archive-stats { gap: 7px; margin-top: 14px; }
.materials-page--archive .archive-stats span { padding: 6px 9px; border-color: var(--material-border); color: var(--material-muted); background: #fffdfc; font-size: 11px; }
.materials-page--archive .archive-stats b { color: var(--material-text); }
.materials-page--archive .archive-filters { gap: 9px; padding: 18px 0 16px; border-bottom-color: var(--material-border); }
.materials-page--archive :is(.archive-filters input, .archive-filters select, .assessment-search input) { border-color: var(--material-border); border-radius: 12px; color: var(--material-text); background: #fffdfc; }
.materials-page--archive :is(.archive-filters button, .assessment-clear) { border: 1px solid #c5a56e; border-radius: 12px; color: #6e5835; background: #f5ecd9; }
.materials-page--archive .archive-card { border-color: var(--material-border); border-radius: 16px; background: #fffdfc; box-shadow: none; }
.materials-page--archive .archive-card:hover { border-color: #cfc3b8; box-shadow: var(--material-shadow); }
.materials-page--archive .archive-category,
.materials-page--archive .archive-result-bar strong,
.materials-page--archive .archive-year { color: var(--material-brand); }
.materials-page--archive .archive-timeline::before { background: linear-gradient(#d7c9c1, rgba(215, 201, 193, .15)); }
.materials-page--archive .archive-month-content::before { border-color: #fffdfc; background: var(--material-brand); box-shadow: 0 0 0 1px #d9c9c0; }
.materials-page--archive .archive-card-actions button { border-color: #cdbdc3; color: #754f5b; background: #fffdfc; }
.materials-page--archive :is(.archive-card-actions button[data-open-player], .assessment-item-links button[data-open-player], .assessment-video-link) {
  border-color: var(--material-border);
  color: var(--material-text);
  background: #fffdfc;
}
.materials-page--archive .material-reactions button,
.materials-page--archive .douyin-card-wrap > .material-reactions button {
  border-color: var(--material-border);
  color: var(--material-muted);
  background: #fffdfc;
}
.materials-page--archive .material-reactions button.is-active,
.materials-page--archive .douyin-card-wrap > .material-reactions button.is-active {
  border-color: var(--material-brand);
  color: #fff;
  background: var(--material-brand);
}
.materials-page--archive .archive-cover {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
}
.materials-page--archive .archive-cover img { width: 100%; height: 100%; object-fit: cover; }
.materials-page--archive .assessment-filter-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: end;
  margin: 0 0 12px;
  padding: 16px 0 14px;
  border: 0;
  border-bottom: 1px solid var(--material-border);
  border-radius: 0;
  background: transparent;
}
.materials-page--archive .assessment-search { gap: 6px; font-size: 11px; }
.materials-page--archive .assessment-search input {
  min-height: 42px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 500;
}
.materials-page--archive .assessment-clear {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 12px;
}
.materials-page--archive .assessment-filter-panel p {
  grid-column: 1;
  margin: 0;
  letter-spacing: 0;
}
.materials-page--archive .assessment-type-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 4px;
  padding: 14px 0 0;
  border-bottom: 0;
}
.materials-page--archive .assessment-type-strip button {
  display: inline-flex;
  min-width: 0;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 8px;
  border: 1px solid var(--material-border);
  border-radius: 12px;
  color: var(--material-muted);
  background: #fffdfc;
  font-size: 12px;
  line-height: 1.25;
  white-space: normal;
}
.materials-page--archive .assessment-type-strip button { border-color: #dfd3bc; color: #806842; background: #fffdfc; }
.materials-page--archive .assessment-type-strip button:hover,
.materials-page--archive .assessment-type-strip button.is-active { border-color: #c5a56e; color: #806842; background: #f7f0e2; }
.materials-page--archive .assessment-card { border-color: var(--material-border); border-radius: 16px; background: #fffdfc; box-shadow: none; }
.materials-page--archive .assessment-card::after { display: none; }
.materials-page--archive .assessment-card-head time,
.materials-page--archive .assessment-items span,
.materials-page--archive .assessment-video-copy b { color: #a8864d; }
.materials-page--archive .assessment-card-head span,
.materials-page--archive .assessment-items li { background: #faf4e8; }
.materials-page--archive .douyin-note { display: none; }
.materials-page--archive .douyin-board > .douyin-month:first-child { padding-top: 0; border-top: 0; }
.materials-page--archive.materials-section-cover_mv .archive-result-bar { display: none; }
.materials-page--archive .douyin-card { border-radius: 14px; box-shadow: none; }
.materials-page--archive .douyin-card-index { background: rgba(79, 73, 72, .7); }
.materials-page--archive.materials-section-douyin { --material-brand: #879b91; }
.materials-page--archive.materials-section-xiaohongshu { --material-brand: #b58f82; }
.materials-page--archive.materials-section-cover_mv { --material-brand: #858a9e; }

/* Stands: let the artwork lead, while the controls recede into the shared shell. */
.materials-page--stands .preview-shell { width: min(900px, calc(100% - 32px)); padding: 0 0 calc(96px + env(safe-area-inset-bottom)); }
.materials-page--stands .materials-header { width: 100%; }
.materials-page--stands .topbar { margin: 0 0 14px; padding: 0 4px; border: 0; background: transparent; box-shadow: none; }
.materials-page--stands .topbar h1 { color: var(--material-text); font-size: 22px; letter-spacing: -.02em; }
.materials-page--stands .layout { gap: 14px; }
.materials-page--stands .drawer { border-radius: 18px; }
.materials-page--stands .profile { overflow: hidden; border-radius: 18px; }
.materials-page--stands .cover { border-radius: 13px 13px 0 0; }
.materials-page--stands .tabs { border-color: var(--material-border); }
.materials-page--stands .tabs a.is-active { color: var(--material-brand); }

/* The shared channel bar already names this page; keep the feed focused on its timeline. */
.dream-page.materials-page--latest .feed-page .hero-banner { display: none; }
.dream-page.materials-page--latest .feed-page .hero-banner::before,
.dream-page.materials-page--latest .feed-page .hero-banner::after { content: none; display: none; }

@media (max-width: 1080px) {
  .materials-page--archive .archive-filters button { grid-column: auto; }
}

@media (max-width: 760px) {
  .materials-header { width: min(100% - 24px, 430px); margin-bottom: 14px; }
  .materials-topbar { min-height: 52px; }
  .materials-channel-nav { gap: 18px; margin: 0 -2px; }
  .materials-channel-nav a { padding: 9px 0 10px; font-size: 12px; }
  .materials-page--archive .archive-shell,
  .materials-page--stands .preview-shell { width: min(100% - 24px, 430px); }
  .materials-page--archive .archive-content { padding: 18px 14px; border-radius: 16px; }
  .materials-page--archive .archive-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .materials-page--archive .archive-search { grid-column: 1 / -1; }
  .materials-page--archive .archive-filters button { grid-column: auto; }
  .materials-page--archive .archive-reset { grid-column: 2; }
  .materials-page--archive .archive-card-main { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .materials-page--archive .archive-cover { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .materials-page--archive .archive-timeline::before,
  .materials-page--archive .archive-month-content::before { display: none; }
  .materials-page--archive .archive-month { padding: 14px 0; }
  .materials-page--archive .assessment-filter-panel { grid-template-columns: minmax(0, 1fr) auto; }
  .materials-page--archive .assessment-search { grid-column: 1 / -1; }
  .materials-page--archive .assessment-clear { width: auto; grid-column: 2; }
  .materials-page--archive .assessment-filter-panel p { grid-column: 1; }
  .materials-page--stands .topbar { margin-bottom: 10px; }
}

@media (max-width: 470px) {
  .materials-page--archive .assessment-type-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Keep the three latest-page counters compact on phone screens. */
@media (max-width: 760px) {
  .dream-page.materials-page--latest .feed-page .stat-stack { padding: 5px 0 3px !important; }
  .dream-page.materials-page--latest .feed-page .stat-card { grid-template-rows: 20px 42px !important; min-height: 62px !important; padding: 0 4px !important; }
  .dream-page.materials-page--latest .feed-page .stat-divider { min-height: 48px !important; }
  .dream-page.materials-page--latest .feed-page .stat-card .window-bar { min-height: 20px !important; font-size: 10px !important; }
  .dream-page.materials-page--latest .feed-page .stat-card .stat-body { grid-template-rows: 20px 22px !important; gap: 0 !important; }
  .dream-page.materials-page--latest .feed-page .stat-card .stat-body span { min-height: 20px !important; padding: 0 3px !important; font-size: 10px !important; }
  .dream-page.materials-page--latest .feed-page .stat-card .stat-body strong { min-height: 22px !important; padding: 0 3px !important; font-size: 23px !important; }
}