/* ========== 1. 第三方样式导入（保持不变） ========== */
@import url('https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css') screen;
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css');

/* ========== 2. 设计变量与主题 ========== */
:root {
  /* 品牌与主题 */
  --primary: #B8A82B;
  --primary-light: #D6C747;
  --primary-dark: #8A7D1F;
  --secondary: #4D7A42;
  --secondary-light: #6A9A5E;
  --secondary-dark: #2F5829;
  --accent: #E07C3E;

  /* 背景与文本 */
  --dark: #2A3328;
  --darker: #1A211A;
  --light: #F8F8F2;
  --light-gray: #E5E6DD;
  --mid-gray: #BBBDB0;
  --text: #F0F0E8;
  --text-dark: #E0E0D6;
  --text-muted: #C0C0B8;

  /* 边框与阴影 */
  --shadow-light: rgba(0,0,0,0.15);
  --shadow-medium: rgba(0,0,0,0.25);
  --shadow-dark: rgba(0,0,0,0.35);
  --card-border: rgba(255,255,255,0.09); /* 略微降低以避免过重 */
  --card-bg: rgba(34,40,32,0.78);
  --card-bg-light: rgba(42,51,40,0.84);
  --content-bg: rgba(26,33,26,0.88);
  --highlight: rgba(184,168,43,0.16);
  --footer-bg: rgba(42,51,40,0.92);
  --mobile-footer-bg: rgba(26,33,26,0.95);

  /* 尺寸与布局 */
  --vertical-spacing: clamp(12px, 2.5vh, 30px);
  --standard-spacing: clamp(12px, 2.5vh, 30px);
  --mobile-spacing: clamp(8px, 2vh, 20px);
  --golden: 0.618;
  --container-padding: 20px;

  /* 响应式容器宽度与栅格 */
  --max-page-width: 1200px;
  --max-card-width: 900px;
  --grid-gap: clamp(14px, 2vw, 22px);
  --grid-2col-breakpoint: 1200px;

  /* 交互 */
  --focus-ring: 0 0 0 3px rgba(184,168,43,0.35);
  --focus-outline: 2px solid #B8A82B;
}

/* ========== 3. Reset 与基础 ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { box-sizing: border-box; }
a[href^="mailto:"]::before { content: none !important; display: none !important; }

/* 页面基础与背景 */
html {
  display: block;
  font-size: clamp(13px, 1.5vw, 16px);
  scroll-behavior: auto; /* 由 JS 控制滚动行为 */
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  background: url('https://chenz.cloud/assets/Flower.png') center center fixed / cover no-repeat;
  color-scheme: dark !important;
}
html::before {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(to bottom, rgba(26,33,26,0.7), rgba(26,33,26,0.85));
  z-index: -1;
}
body {
  font-family: 'Roboto', sans-serif;
  display: block;
  color: var(--text) !important;
  line-height: 1.6;
  min-height: 100vh;
  background-color: transparent !important;
  width: 100%;
  overflow-x: hidden; /* 全局禁止横向滚动 */
}

/* 主滚动容器 */
.scrollable {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden; /* 二次防护 */
}

/* 全局文本居中 */
p, span, h1, h2, h3, h4, h5, h6, li, a {
  text-align: center;
  text-align-last: center;
  -moz-text-align-last: center;
}

/* 可访问性：sr-only 工具类（严格保留） */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static !important;
  width: auto; height: auto; margin: 0;
  overflow: visible; clip: auto; white-space: normal;
}

/* ========== 4. 容器与卡片基础 ========== */
/* 通用居中容器 */
.centered {
  width: min(90%, var(--max-page-width));
  margin: 0 auto;
  text-align: center;
}
.container-padding { padding-inline: var(--container-padding); }

/* 内部内容区域 */
.scroll-content {
  width: 100%;
  padding-block: clamp(15px, 3vh, 30px);
  min-height: calc(100vh - (2 * var(--vertical-spacing)));
  text-align: center;
}

/* Header */
header {
  width: 100%;
  margin-bottom: var(--vertical-spacing);
  text-align: center;
}
.header {
  width: min(90%, 600px);
  margin: 0 auto;
  text-align: center;
  background-color: var(--card-bg) !important;
  border-radius: 16px;
  padding: 15px;
  box-shadow: 0 5px 20px var(--shadow-dark);
  border: 1px solid var(--card-border);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.header:hover { transform: translateY(-3px); box-shadow: 0 8px 25px var(--shadow-dark); }
.header .with-shadow {
  width: 100%; padding: 15px; margin: 0;
  background-color: transparent !important; box-shadow: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 0; /* 防止子元素撑破 */
}
.header select {
  background-color: var(--darker) !important;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 10px 18px;
  font-size: clamp(0.9rem, 1vw, 1rem);
  width: auto; min-width: 160px;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23F0F0E8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 35px;
  box-shadow: 0 3px 8px var(--shadow-dark);
  transition: all 0.3s ease;
  color: var(--text) !important;
  text-align: center;
  text-align-last: center;
  cursor: pointer;
  margin: 0 auto;
  display: block;
}
.header select:hover { border-color: var(--primary-light); box-shadow: 0 4px 12px rgba(214,199,71,0.2); }
.header select:focus { border-color: var(--primary); box-shadow: var(--focus-ring); outline: none; }

/* 外层纸张容器（可当分区大卡） */
.paper {
  width: min(90%, var(--max-page-width));
  margin: 0 auto;
  text-align: center;
  background-color: var(--content-bg) !important;
  border-radius: 20px;
  box-shadow: 0 10px 30px var(--shadow-dark);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  padding: clamp(15px, 3vh, 40px) var(--container-padding);
  border: 1px solid var(--card-border);
  display: block;
  overflow: hidden; /* 防止内部溢出造成横向滚动 */
}

/* 内容区域与卡片 */
.content { width: 100%; margin: 0 auto; text-align: center; }
.container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto var(--vertical-spacing) auto;
  text-align: center;
  animation: cardAppear 0.7s forwards;
}
@keyframes cardAppear {
  0% { opacity: 0; transform: scale(0.98) translateY(10px); }
  70% { opacity: 1; transform: scale(1.005) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* 卡片化的视觉层次（你模块 include 的 .with-shadow 即卡片本体） */
.with-shadow {
  background: linear-gradient(180deg, var(--card-bg), var(--card-bg-light));
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: 0 8px 22px var(--shadow-dark);
  padding: clamp(12px, 2.2vh, 22px) clamp(14px, 2.4vw, 24px);
  transition: box-shadow 0.25s ease, transform 0.2s ease, border-color 0.25s ease;
  overflow-wrap: anywhere; word-break: break-word;
}
.with-shadow:hover {
  box-shadow: 0 10px 26px rgba(0,0,0,0.45);
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.14);
}
.with-shadow:focus-within {
  outline: none;
  box-shadow: 0 0 0 3px rgba(184,168,43,0.25), 0 10px 26px rgba(0,0,0,0.45);
  border-color: var(--primary-light);
}

/* 大屏宽度修正：避免 100vw 引起的溢出（保留你的黄金分割思路） */
@media (min-width: 1024px) {
  .paper, .container, .centered, .header {
    width: min(100%, calc(100vw * var(--golden)));
    max-width: var(--max-page-width); /* 更硬的上限，避免超宽 */
    margin: 0 auto;
    box-sizing: border-box;
  }
}

/* ========== 5. 两列栅格（仅内容模块区） ========== */
/* 仅让 #blog-list-wrapper（你的主内容模块容器）在大屏切换为两列 */
#blog-list-wrapper {
  display: grid;
  grid-template-columns: 1fr; /* 小屏单列 */
  gap: var(--grid-gap);
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}
@media (min-width: 1200px) {
  #blog-list-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    justify-items: center; /* 卡片居中对齐 */
  }
  /* 每张卡片在网格中最大宽度控制（更紧凑的两列） */
  #blog-list-wrapper .container {
    width: 100%;
    max-width: min(var(--max-card-width), 95%); /* 控制单卡最大宽 */
  }
}

/* ========== 6. 媒体与通用溢出防护 ========== */
/* 媒体 */
img, video, canvas, svg, audio, iframe, embed, object {
  max-width: 100%;
  height: auto;
}
iframe, embed, object {
  display: block;
  margin: 0 auto;
  border: none;
}

/* 表格与代码块（横向滚动托管在自身，不影响页面） */
table { width: 100%; border-collapse: collapse; }
.table-wrapper, pre, code, kbd, samp {
  max-width: 100%;
  overflow-x: auto;
}
pre { white-space: pre; }
code, pre code { word-break: break-word; overflow-wrap: anywhere; }

/* 列表 */
ul, ol {
  width: min(90%, 100%);
  max-width: 100%;
  margin: 1rem auto;
  padding-left: 0;
  list-style-position: inside;
  display: block;
}
ul li, ol li {
  margin-bottom: 12px;
  line-height: 1.6;
  display: block;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  transition: all 0.3s ease;
  color: var(--text) !important;
  text-align: center;
  text-align-last: center;
  margin: 0.5rem auto;
  position: relative;
}
ul { list-style-type: none; }
ul li::before {
  content: "• ";
  display: inline-block; width: 1em; margin-right: 0.3em; color: var(--primary-light);
}
ul ul li { padding-left: 1.5em; }
ul ul li::before { content: "○ "; color: var(--secondary-light); }
ul.no-bullets li::before { content: none; }
ul.no-bullets { list-style-type: none; padding-left: 0; }

/* ========== 7. 音频列表与卡片 ========== */
#soundList { width: 100%; padding: 0; margin: 15px auto; list-style-type: none; display: block; }
#soundList li {
  width: 100%;
  margin-bottom: 20px;
  padding: 15px;
  background-color: var(--card-bg) !important;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  box-shadow: 0 4px 15px var(--shadow-dark);
  transition: all 0.3s ease;
  display: block;
}
#soundList li::before { content: none; }

/* 音频列表标题卡片感 */
.audio-list-item .audio-title {
  font-weight: 500;
  margin-bottom: 10px;
  color: var(--text) !important;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; min-width: 0;
}
.audio-list-item .audio-title::before {
  content: '\f001'; font-family: 'Font Awesome 5 Free';
  margin-right: 8px; color: var(--primary-light);
}

/* ===== Plyr 基础与通用防溢出 ===== */
audio, video, .plyr {
  display: block;
  width: 100%;
  max-width: 640px;
  min-width: 200px;
  margin: 1.5em auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  background: rgba(26,33,26,0.8);
  box-sizing: border-box;
  overflow: hidden; /* 防止子元素溢出 */
}
.plyr--audio { min-height: 58px; padding: 0; }
.plyr--video { aspect-ratio: 16 / 9; min-height: 180px; }

/* 控件两排、可达性尺寸、防溢出 */
.plyr__controls {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  row-gap: 0.6em;
  column-gap: 0.5em;
  justify-content: stretch;
  box-sizing: border-box;
}
.plyr__control[data-plyr="play"] {
  order: 1;
  flex: 0 0 auto;
  margin-right: 0.8em;
  min-width: 44px;
  min-height: 44px;
  border-radius: 10px;
  font-size: 1.05em;
}
.plyr__progress {
  order: 1;
  flex: 1 1 0%;
  display: flex !important;
  margin-inline: 0;
  min-width: 0; /* 防止进度条撑破 */
}
.plyr__time--current {
  order: 1;
  flex: 0 0 auto;
  margin-left: 0.6em;
}
/* 除 播放/进度/当前时间 外，其他控件排第二排 */
.plyr__controls > *:not([data-plyr="play"]):not(.plyr__progress):not(.plyr__time--current) {
  order: 2;
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 0;
  margin-top: 0.25em;
}
/* 避免任何控件导致横向滚动 */
.plyr, .plyr--audio, .plyr--video { max-width: 100%; box-sizing: border-box; }
/* 隐藏 Plyr 进度提示 tooltip，简洁 */
.plyr__progress .plyr__tooltip { display: none !important; }

/* ===== 音量控件“响应式：小屏仅用 mute；大屏用 volume（含滑杆）” ===== */
/* 强烈建议：JS 初始化时控件列表包含 mute 与 volume，方便 CSS 切换
   例如：controls: ['play','progress','current-time','mute','volume','restart'] */

/* 小屏（≤640px）：仅显示顶级 mute，隐藏音量滑杆，避免双图标 */
@media (max-width: 640px) {
  /* 1) 如果存在顶级 mute，则显示它 */
  .plyr__controls > [data-plyr="mute"] {
    display: inline-flex !important;
    min-width: 44px; min-height: 44px; align-items: center; justify-content: center;
  }
  /* 2) 小屏默认隐藏音量滑杆，以免占空间 */
  .plyr__controls .plyr__volume input[type="range"] {
    display: none !important;
  }
  /* 3) 避免双图标：默认隐藏音量容器内的 mute */
  .plyr__controls .plyr__volume [data-plyr="mute"] {
    display: none !important;
  }
  /* 4) 若不存在顶级 mute（少数环境），回退启用“音量容器里的 mute” */
  .plyr__controls:not(:has(> [data-plyr="mute"])) .plyr__volume [data-plyr="mute"] {
    display: inline-flex !important;
    min-width: 44px; min-height: 44px; align-items: center; justify-content: center;
  }
  /* 5) 若存在顶级 mute，就把整个音量容器隐藏（避免空容器占位） */
  .plyr__controls:has(> [data-plyr="mute"]) .plyr__volume {
    display: none !important;
  }
}

/* 大屏（≥641px）：显示完整音量控件（含滑杆与内置 mute），隐藏顶级 mute */
@media (min-width: 641px) {
  /* 显示音量容器 */
  .plyr__controls .plyr__volume {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5em;
    min-width: 0;
  }
  /* 显示滑杆与内置 mute */
  .plyr__controls .plyr__volume input[type="range"] {
    display: inline-block !important;
    max-width: min(220px, 35vw);
  }
  .plyr__controls .plyr__volume [data-plyr="mute"] {
    display: inline-flex !important;
    min-width: 44px; min-height: 44px; align-items: center; justify-content: center;
  }
  /* 隐藏顶级 mute，避免重复 */
  .plyr__controls > [data-plyr="mute"] {
    display: none !important;
  }
}

/* ===== 细节微调：音量滑杆在小屏不致挤压，其它控件可见 ===== */
.plyr__controls .plyr__volume { min-width: 0; }
.plyr__controls .plyr__volume input[type="range"] { min-width: 120px; }

/* ===== 可选：自定义“重启/循环/倍速按钮”视觉一致性（与你的自定义按钮配合） ===== */
.plyr__control.plyr__loop-toggle,
.plyr__control.plyr__speed-pop-btn {
  min-height: 40px;
  min-width: 40px;
  border-radius: 10px;
}
.plyr__control.plyr--active {
  background: var(--highlight, rgba(184,168,43,0.15));
  border-color: var(--primary-light, #D6C747);
}

/* ===== 可达性：焦点环可见（保持全站风格） ===== */
.plyr__controls .plyr__control:focus-visible {
  outline: 2px solid var(--primary, #B8A82B);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(184,168,43,0.35);
}

/* ========== 9. 链接区与导航、侧栏按钮（尺寸更友好） ========== */
.related-links, .banner-links {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(0.6rem, 1.5vw, 1rem); text-align: center;
}
.related-links a, .banner-links a, aside a {
  display: inline-flex; justify-content: center; align-items: center; text-align: center;
  width: auto; min-width: 120px; max-width: 220px; min-height: 42px;
  padding: 6px 18px; border-radius: 12px;
  background-color: var(--card-bg);
  color: var(--primary-light);
  font-size: clamp(0.9rem, 1vw, 1rem);
  font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.2; letter-spacing: 0.3px; text-decoration: none;
  box-shadow: 0 3px 8px var(--shadow-dark); border: 1px solid var(--card-border);
  transition: all 0.25s ease;
}
.related-links a:hover, .banner-links a:hover, aside a:hover {
  background-color: var(--card-bg-light);
  transform: translateY(-2px);
  box-shadow: 0 5px 12px var(--shadow-dark);
  color: var(--primary-light);
  text-shadow: 0 0 8px rgba(214,199,71,0.5);
}
.related-links a::after, .banner-links a::after, aside a::after { content: none; }

/* 顶部导航容器 */
.topnav {
  width: min(90%, var(--max-page-width));
  margin: var(--vertical-spacing) auto 25px;
  padding: 5px 0; text-align: center;
}

/* ========== 10. 版权卡片 ========== */
.copyright {
  width: min(90%, 700px);
  margin: var(--vertical-spacing) auto;
  padding: clamp(15px, 3vh, 30px);
  text-align: center;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  color: var(--text-muted);
  background-color: var(--footer-bg);
  border-radius: 12px;
  box-shadow: 0 5px 15px var(--shadow-dark);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  border: 1px solid var(--card-border);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.copyright span, .copyright div {
  width: 100%; margin: 6px auto; text-align: center; overflow-wrap: anywhere;
}

/* ========== 11. 时间卡片（保持风格，限制宽度防超宽） ========== */
.time-date-card {
  display: inline-block;
  margin: clamp(5px, 2vw, 10px) auto;
  padding: clamp(5px, 2vw, 10px) clamp(10px, 3vw, 15px);
  font-family: 'Roboto Mono', monospace;
  background-color: #2F1C1C;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.03), rgba(255,255,255,0.03) 1px, transparent 1px, transparent 5px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.03), rgba(0,0,0,0.03) 1px, transparent 1px, transparent 5px),
    radial-gradient(ellipse at center, rgba(0,0,0,0.04), transparent 70%);
  background-size: cover; background-blend-mode: multiply;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--shadow-dark);
  font-size: clamp(2.3rem, 5vw, 4.5rem);
  text-align: center;
  max-width: 90%;
  white-space: nowrap;
}
.time-date-card .time {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: bold; margin-bottom: 0.5em; white-space: nowrap;
}
.time-date-card .date {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.3; letter-spacing: 0.05em; white-space: nowrap;
}

/* ========== 12. iScroll 滚动条（保持） ========== */
.iScrollVerticalScrollbar {
  position: absolute; z-index: 9999; width: 7px; bottom: 2px; top: 2px; right: 1px; overflow: hidden;
}

/* ========== 13. 回到顶部按钮 ========== */
#backToTopBtn {
  position: fixed; bottom: 20px; right: 20px;
  padding: 12px 18px; background-color: var(--primary); color: var(--text);
  border: none; border-radius: 8px; cursor: pointer; font-size: 1rem;
  z-index: 10000; display: none; min-height: 44px; min-width: 44px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}
html.scrolled #backToTopBtn,
body.scrolled #backToTopBtn { display: block; }

/* 焦点状态更显著 */
:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 3px;
}

/* ========== 14. 细节与补丁 ========== */
/* 修正按钮与表单的可点区域 */
button, input[type="button"], input[type="submit"] {
  min-height: 44px; min-width: 44px;
  padding: 10px 16px; border-radius: 10px;
}

/* 防止任何未知元素撑出横向滚动 */
.with-shadow > * { max-width: 100%; }
.with-shadow, .container, .paper, .header, .content { overflow-x: hidden; }

/* 任何 flex 容器下的子项默认可收缩，避免“min-content 溢出” */
.header .with-shadow > *, .related-links > *, .banner-links > *, .copyright > * {
  min-width: 0;
}

/* 博客列表渐隐保持 */
.blog-list { transition: opacity 0.3s ease; opacity: 1; }
.blog-list.hidden { opacity: 0; }

/* 选中态可见性 */
.blog-item:focus { outline: 2px solid #3b82f6; outline-offset: 2px; }

/* 顶部/底部区域在大屏自然全宽显示（你的结构已满足，此处只限制最大宽度防溢出） */
.topnav, .related-links, .copyright {
  max-width: var(--max-page-width);
  margin-left: auto; margin-right: auto;
}