:root {
  --serif: "Noto Serif SC", "PingFang SC", "Microsoft YaHei", serif;
  --code: "JetBrains Mono", Consolas, Monaco, monospace;
}
* { box-sizing: border-box; }
html { overflow-y: scroll; scroll-behavior: smooth; }
::selection { background-color: #60a5fa40; }
body {
  background-color: #FFF; color: #444;
  font-family: var(--serif); font-size: 100%; margin: 0;
}
a { color: #3354AA; text-decoration: none; }
a:hover, a:active { color: #444; }

#container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* Header */
#header { padding-top: 40px; border-bottom: 1px solid #EEE; }
#logo { color: #333; font-size: 2.5em; margin: 0; font-weight: bold; }
#logo a { color: #333; }
#logo a:hover { color: #3354AA; }
.description { margin: 0.6em 0 0.7em 0; color: #999; }

/* Nav menu (Replicon style tabs) */
#nav-menu { margin: 25px 0 0; padding: 0; overflow: hidden; }
#nav-menu a {
  display: block; float: left; margin-right: -1px;
  padding: 0 20px; border: 1px solid #EEE; border-bottom: none;
  height: 32px; line-height: 32px; color: #444;
  cursor: pointer; user-select: none;
}
#nav-menu a:hover, #nav-menu a.current { background: #F6F6F6; }

/* Main */
#main { padding: 20px 0 30px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadein .25s ease; }
@keyframes fadein { from { opacity: 0 } to { opacity: 1 } }

.section-title { margin: 1.2em 0 .6em; font-size: 1.5em; color: #333; border-bottom: 1px solid #EEE; padding-bottom: .3em; }
.sub-title { margin: 1.4em 0 .5em; color: #555; }
.muted { color: #999; }

/* Post content */
.post-content p { margin: .96em 0; line-height: 1.9; }
.post-content code { background: #F5F5F5; padding: .2em .4em; color: #B94A48; font-family: var(--code); font-size: .85em; border-radius: .2rem; }
.post-content pre { background: #F5F5F5; padding: 8px; overflow: auto; }
.post-content pre code { display: block; padding: 3px 6px; color: #444; }
.post-content blockquote { margin: 1em 0; padding-left: 1.5em; border-left: 6px solid #EEE; color: #666; }
.post-content h2, .post-content h3 { color: #333; }
.post-content a { border-bottom: 1px solid #EEE; }
.post-content a:hover { border-bottom-color: transparent; }

.post-title { margin: .6em 0; color: #333; }
.post-meta { color: #999; font-size: .9em; }
.archive-list, .project-list, .music-list, .contact-list { list-style: none; padding: 0; margin: 0; }
.archive-list li { padding: 8px 0; border-bottom: 1px dashed #EEE; }
.archive-list .post-meta { margin-left: 10px; }
.project-list li { padding: 12px 0; border-bottom: 1px dashed #EEE; }
.project-list h3 { margin: 0 0 .4em; }
.project-list p { margin: .3em 0; color: #666; }
.tag { display: inline-block; font-size: .8em; color: #3354AA; border: 1px solid #ddd; padding: 1px 8px; border-radius: 3px; }

/* Home two-column (main + sidebar) */
.home-grid { display: flex; gap: 40px; align-items: flex-start; }
.home-main { flex: 1; min-width: 0; }
.home-side { width: 260px; flex-shrink: 0; }

/* Sidebar widget */
.widget { margin-bottom: 30px; }
.widget-title { color: #333; font-size: 1.05em; border-bottom: 1px solid #EEE; padding-bottom: 6px; margin: 0 0 6px; }
.widget-list { list-style: none; padding: 0; margin: 0; }
.widget-list li { padding: 5px 0; border-bottom: 1px dashed #EEE; font-size: .95em; }
.widget-count { color: #999; font-size: .85em; }

/* Music two-frame */
.music-grid { display: flex; gap: 20px; align-items: stretch; }
.music-frame { min-width: 0; }
.music-player { flex: 1; }
.music-side { width: 340px; flex-shrink: 0; }
.lyrics-box { height: 180px; overflow-y: auto; border: 1px solid #EEE; background: #FAFAFA; padding: 10px; font-size: .95em; line-height: 1.9; color: #555; }

/* Local player */
.player-box { margin: 10px 0 0; padding: 10px; border: 1px solid #EEE; background: #FAFAFA; }
.player-info { margin-bottom: 8px; color: #666; font-size: .95em; }
#player-audio { width: 100%; }
.music-list li a { display: block; padding: 7px 4px; border-bottom: 1px dashed #EEE; color: #444; }
.music-list li a:hover { color: #3354AA; }
.music-list li a.playing { color: #3354AA; font-weight: bold; }

/* File browser (Cloudreve-like) */
.file-browser { border: 1px solid #EEE; }
.file-row { display: flex; align-items: center; padding: 8px 14px; border-bottom: 1px solid #EEE; font-size: .95em; }
.file-row:last-child { border-bottom: none; }
.file-head { background: #F6F6F6; color: #666; font-weight: bold; }
.col-name { flex: 1; }
.col-size { width: 90px; color: #666; }
.col-date { width: 110px; color: #666; }
.file-icon { margin-right: 6px; }

/* Contact */
.contact-list li { padding: 7px 0; border-bottom: 1px dashed #EEE; }
.contact-label { display: inline-block; min-width: 70px; color: #666; }

/* Footer */
#footer { border-top: 1px solid #EEE; color: #999; padding: 20px 0 40px; text-align: center; font-size: .9em; }

@media (max-width: 800px) {
  .home-grid { flex-direction: column; }
  .home-side { width: 100%; }
  .music-grid { flex-direction: column; }
  .music-side { width: 100%; }
  #logo { font-size: 2em; }
  #nav-menu a { padding: 0 14px; }
  .col-date { display: none; }
  .col-size { width: 70px; }
}

/* ==== 线条渐变尖 + 延长 (追加覆盖) ==== */
body { overflow-x: hidden; }

/* 导航栏下: 全宽线, 两端渐变淡出(接近边缘) */
#header { border-bottom: none; }
#nav-menu { overflow: visible; }
#nav-menu::after {
  content: "";
  display: block;
  clear: both;
  height: 1px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: linear-gradient(to right,
    transparent 0%, #DDDDDD 8%, #DDDDDD 92%, transparent 100%);
}

/* 标题线: 容器内渐变尖 */
.section-title {
  border-bottom: none;
  background: linear-gradient(to right,
    transparent 0%, #EEE 15%, #EEE 85%, transparent 100%) left bottom / 100% 1px no-repeat;
  padding-bottom: 8px;
}

/* 底部线: 容器内渐变尖 */
#footer {
  border-top: none;
  background: linear-gradient(to right,
    transparent 0%, #EEE 15%, #EEE 85%, transparent 100%) left top / 100% 1px no-repeat;
  padding-top: 20px;
}

/* ==== Step5: 音乐页 - 左封面播放器 + 右歌词/歌单切换 ==== */
.music-grid { gap: 24px; }
.music-player { width: 360px; flex-shrink: 0; }
.music-side { flex: 1; }

.cover-player {
  border: 1px solid #EEE; background: #FAFAFA;
  display: flex; flex-direction: column;
  height: 100%; min-height: 540px;
}

/* 源切换 (本地 / 在线) */
.source-tabs { display: flex; border-bottom: 1px solid #EEE; }
.source-tab {
  flex: 1; padding: 9px 0; border: none; background: none;
  font-family: var(--serif); font-size: .95em; color: #999; cursor: pointer;
  border-bottom: 2px solid transparent;
}
.source-tab:hover { color: #3354AA; }
.source-tab.active { color: #3354AA; font-weight: bold; border-bottom-color: #3354AA; }
.source-panel { display: none; }
.source-panel.active { display: block; }
.source-local { padding: 26px 22px 20px; }
.source-listen1 { padding: 12px; }
.source-listen1 iframe { width: 100%; height: 516px; border: 1px solid #EEE; background: #FFF; display: block; }

/* 唱片 */
.disc-wrap { display: flex; justify-content: center; padding: 6px 0 22px; }
.disc {
  position: relative; width: 190px; height: 190px; border-radius: 50%;
  overflow: hidden; border: 5px solid #FFF;
  box-shadow: 0 0 0 1px #EEE, 0 8px 24px rgba(0,0,0,.10);
}
.disc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.disc-hole {
  position: absolute; inset: 0; margin: auto;
  width: 30px; height: 30px; border-radius: 50%;
  background: #FFF; box-shadow: inset 0 1px 4px rgba(0,0,0,.30), 0 0 0 1px #EEE;
}
.disc-gloss {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: .45;
  background: conic-gradient(from 0deg, transparent, rgba(255,255,255,.35), transparent, rgba(255,255,255,.35), transparent);
}
.rotating-disc { animation: discspin 20s linear infinite; }
.rotating-disc.paused { animation-play-state: paused; }
@keyframes discspin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* 歌曲信息 */
.song-info { text-align: center; margin-bottom: 18px; }
.song-info h3 { margin: 0; font-size: 1.15em; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-info p { margin: 4px 0 0; font-size: .9em; color: #999; }

/* 进度条 */
.progress-box { margin-bottom: 8px; }
.progress-time { display: flex; justify-content: space-between; font-size: .8em; color: #999; margin-top: 4px; font-variant-numeric: tabular-nums; }
input[type="range"].progress {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
  border-radius: 2px; background: rgba(0,0,0,.10); outline: none; cursor: pointer;
}
input[type="range"].progress::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%;
  background: #3354AA; box-shadow: 0 0 0 2px #FFF, 0 0 0 3px #3354AA;
}
input[type="range"].progress::-moz-range-thumb {
  width: 12px; height: 12px; border: none; border-radius: 50%; background: #3354AA;
}

/* 控制按钮 */
.controls { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; }
.ctl {
  border: none; background: none; padding: 6px; cursor: pointer;
  color: #666; display: inline-flex; align-items: center; justify-content: center;
  transition: transform .15s ease, color .15s ease;
}
.ctl:hover { color: #3354AA; transform: scale(1.1); }
.ctl.on { color: #3354AA; }
.ctl.play {
  width: 52px; height: 52px; border-radius: 50%;
  background: #3354AA; color: #FFF; box-shadow: 0 6px 16px rgba(51,84,170,.35);
}
.ctl.play:hover { color: #FFF; transform: scale(1.06); }
.source-note { margin-top: 14px; text-align: center; font-size: .8em; }

/* 右侧: 网易云搜索栏 */
.search-bar { display: flex; gap: 8px; padding: 0 0 10px; }
.search-bar input {
  flex: 1; min-width: 0; padding: 7px 10px; font-size: .92em;
  border: 1px solid #E8E8E8; border-radius: 6px; background: #FFF; color: #444;
}
.search-bar input:focus { outline: none; border-color: #3354AA; }
.search-bar input::placeholder { color: #AAA; }
.search-bar button {
  padding: 7px 14px; font-size: .92em; color: #FFF;
  background: #3354AA; border: 1px solid #3354AA; border-radius: 6px; cursor: pointer;
}
.search-bar button:hover { background: #4465c4; }

/* 右侧: 歌词/歌单 切换 */
.lyric-toggle { display: flex; border-bottom: 1px solid #EEE; }
.lyric-tab {
  flex: 1; padding: 10px 0; border: none; background: none;
  font-family: var(--serif); font-size: 1em; color: #999; cursor: pointer;
  border-bottom: 2px solid transparent;
}
.lyric-tab:hover { color: #3354AA; }
.lyric-tab.active { color: #3354AA; font-weight: bold; border-bottom-color: #3354AA; }
.lyric-panel { display: none; padding: 16px 4px; }
.lyric-panel.active { display: block; }

.lyrics-box {
  height: 480px; overflow-y: auto; line-height: 2; font-size: .98em; color: #555;
  scroll-behavior: smooth;
}
.lyrics-box .l-line { padding: 2px 8px; transition: color .2s ease; }
.lyrics-box .l-line.current { color: #3354AA; font-weight: bold; }

/* 歌单内本地音乐 */
.music-side .sub-title { margin: 6px 0 4px; }
.music-list li a { display: block; padding: 7px 6px; border-bottom: 1px dashed #EEE; color: #444; }
.music-list li a:hover { color: #3354AA; }
.music-list li a.playing { color: #3354AA; font-weight: bold; }

@media (max-width: 800px) {
  .music-player { width: 100%; }
  .lyrics-box { height: 260px; }
}

/* ==== Step6: 音乐页交互 + 首页文章切换 ==== */
/* 左右框 0.35/0.65 等高新对齐 + 圆角 */
.music-grid { gap: 24px; align-items: stretch; }
.music-frame { min-height: 540px; }
.music-player { flex: 3.5 1 0; width: auto; min-width: 0; }
.music-side {
  flex: 6.5 1 0; width: auto; min-width: 0;
  border: 1px solid #EEE; border-radius: 8px; background: #FAFAFA;
  overflow: hidden; display: flex; flex-direction: column;
}
.cover-player { height: 100%; border-radius: 8px; }

/* 右侧面板填充 */
.lyric-panel.active { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.lyrics-box { flex: 1; min-height: 0; }
.panel-playlist { overflow-y: auto; }

/* 控制栏: 下移 + 分组 */
.controls { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
.ctrl-group { display: flex; align-items: center; gap: 2px; }

/* 音源圆点 */
.ctl.source-dot { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #EEE; background: #FFF; padding: 0; }
.source-dot .dot-label { font-size: .85em; }

/* 音源选择器: × + 圆 */
.source-picker { display: none; align-items: center; justify-content: center; gap: 14px; margin-top: 20px; }
.picker-close, .picker-dot {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid #EEE; background: #FFF; padding: 0;
  color: #666; cursor: pointer; font-family: var(--serif); font-size: .85em;
  transition: all .15s ease;
}
.picker-close:hover, .picker-dot:hover { color: #3354AA; border-color: #3354AA; }
.picker-dot.active { background: #3354AA; color: #FFF; border-color: #3354AA; font-weight: bold; }

/* 音量弹出(横向左右滑块) */
.vol-wrap { position: relative; display: inline-flex; }
.vol-popup {
  position: absolute; right: 0; bottom: calc(100% + 10px);
  background: #FFF; border: 1px solid #EEE; border-radius: 8px;
  padding: 10px 14px; box-shadow: 0 6px 20px rgba(0,0,0,.08);
  display: none; z-index: 30;
}
.vol-popup.open { display: block; }
input[type="range"].vol-slider {
  -webkit-appearance: none; appearance: none;
  width: 130px; height: 4px; border-radius: 2px;
  background: rgba(0,0,0,.10); outline: none; cursor: pointer;
}
input[type="range"].vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #3354AA;
}
input[type="range"].vol-slider::-moz-range-thumb {
  width: 12px; height: 12px; border: none; border-radius: 50%; background: #3354AA;
}

/* 收藏心形 */
.ctl.heart svg { fill: none; }
.ctl.heart:hover { color: #E0245E; }
.ctl.heart.on { color: #E0245E; }
.ctl.heart.on svg { fill: currentColor; }

/* 首页文章 列表/卡片 切换 */
.section-title { display: flex; align-items: center; justify-content: space-between; }
.view-toggle { display: inline-flex; }
.view-btn {
  padding: 3px 12px; border: 1px solid #DDD; background: #FFF;
  font-family: var(--serif); font-size: .8em; color: #999; cursor: pointer;
}
.view-btn + .view-btn { border-left: none; }
.view-btn:first-child { border-radius: 5px 0 0 5px; }
.view-btn:last-child { border-radius: 0 5px 5px 0; }
.view-btn:hover { color: #3354AA; }
.view-btn.active { background: #F0F3FA; color: #3354AA; font-weight: bold; }
.view-pane { display: none; }
.view-pane.active { display: block; }

@media (max-width: 800px) {
  .music-player, .music-side { flex: none; width: 100%; }
  .lyrics-box { height: 260px; flex: none; }
}

/* ==== Step7: 控制栏重构 + 高度修复 + 音源圆 ==== */
/* 高度固定: 修复切换音源后左右框变长 */
.music-frame { height: 540px; min-height: 0; }
.cover-player { height: 100%; display: flex; flex-direction: column; }
.source-listen1.active { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.source-listen1 iframe { flex: 1; width: 100%; min-height: 0; border: 1px solid #EEE; background: #FFF; }
.source-local { flex-shrink: 0; }

/* 控制栏: 居中 小间距 图标加大 */
.controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; }
.ctrl-main { display: flex; align-items: center; gap: 10px; }
.ctl { padding: 4px; color: #666; }
.ctl svg { display: block; }
.ctl:hover { color: #3354AA; transform: scale(1.1); }

/* 播放键: 去圆背景 */
.ctl.play { background: none; width: auto; height: auto; border-radius: 0; box-shadow: none; color: #333; padding: 4px; }
.ctl.play:hover { color: #3354AA; transform: scale(1.08); }
.ctl.play svg { width: 26px; height: 26px; }
#btn-prev svg, #btn-next svg { width: 24px; height: 24px; }
#btn-mode svg { width: 20px; height: 20px; }
#btn-volume svg, #btn-heart svg { width: 20px; height: 20px; }

/* 音源圆点: 点击原位不动 */
.ctl.source-dot { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #CCC; background: #FFF; padding: 0; font-size: .85em; }

/* 音源选择: 源按钮右侧一排圆, 其余按钮暂隐 */
.source-picker { display: none; align-items: center; gap: 8px; }
.controls.picking .ctrl-main { display: none; }
.controls.picking .source-picker { display: flex; }
.picker-dot {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: .8em; font-weight: bold;
  cursor: pointer; border: 1px solid #DDD; background: #FFF;
  transition: transform .15s ease, box-shadow .15s ease;
}
.picker-dot:hover { transform: scale(1.15); box-shadow: 0 2px 8px rgba(0,0,0,.12); }

@media (max-width: 800px) {
  .music-frame { height: auto; }
}

/* ==== Step8: 修复音源圆下移 (清除 Step6 遗留 margin-top) ==== */
.source-picker { margin-top: 0; justify-content: flex-start; }

/* ==== Step9: 控制栏源按钮固定不移动 + 选中不收起 ==== */
.controls { justify-content: center; }
.ctrl-main { flex: 0 0 auto; justify-content: center; }
.source-picker { flex: 1; justify-content: center; }


/* ==== Step12: 音量竖条(上下拖动) ==== */
.vol-track {
  position: relative; width: 8px; height: 96px;
  background: #EEEEEE; border-radius: 4px; margin: 0 auto;
  cursor: pointer; touch-action: none;
}
.vol-fill { position: absolute; bottom: 0; left: 0; right: 0; height: 80%; background: #3354AA; border-radius: 4px; }
.vol-thumb {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: #FFF; border: 2px solid #3354AA;
  box-shadow: 0 2px 6px rgba(0,0,0,.15); pointer-events: none;
}

/* ==== Step12: 音量竖条(上下拖动) ==== */
.vol-track {
  position: relative; width: 8px; height: 96px;
  background: #EEEEEE; border-radius: 4px; margin: 0 auto;
  cursor: pointer; touch-action: none;
}
.vol-fill { position: absolute; bottom: 0; left: 0; right: 0; height: 80%; background: #3354AA; border-radius: 4px; }
.vol-thumb {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: #FFF; border: 2px solid #3354AA;
  box-shadow: 0 2px 6px rgba(0,0,0,.15); pointer-events: none;
}

/* ==== Step13: 点开音源位置不变(播放键/收藏/源圆保留), 圆铺播放键两侧 ==== */
.controls { position: relative; }
/* 覆盖 Step7 的 display:none: 保留播放键与收藏 */
.controls.picking .ctrl-main { display: flex; }
/* 只隐藏 播放方式/上一首/下一首/音量 (保留空间, 位置不变) */
.controls.picking #btn-mode,
.controls.picking #btn-prev,
.controls.picking #btn-next,
.controls.picking .vol-wrap { visibility: hidden; }
/* 音源圆: 绝对铺在 源圆右侧↔收藏左侧, 左2 右3, 中间留播放键空位 */
.controls.picking .source-picker {
  position: absolute; left: 64px; right: 60px;
  top: 50%; transform: translateY(-50%);
  display: grid;
  grid-template-columns: 1fr 1fr 64px 1fr 1fr 1fr;
  gap: 6px; align-items: center;
}
.picker-gap { grid-column: 3; }
.controls.picking .source-picker .picker-dot {
  width: 100%; height: auto; aspect-ratio: 1;
  min-width: 14px; max-width: 30px; justify-self: center;
}

/* ==== Step14: 点开只留源圆+音源圆(播放键/收藏消失), 源圆位置不变, 圆19px ==== */
.picker-gap { display: none; }
.controls.picking .ctrl-main { display: none; }
.controls.picking .source-picker {
  position: static; left: auto; right: auto; top: auto; transform: none;
  width: 232px; /* = 未展开组宽274 - 源圆32, 使源圆居中位置点开前后不变 */
  display: flex; justify-content: space-evenly; align-items: center; gap: 0;
  margin-top: 0;
}
.controls.picking .source-picker .picker-dot {
  flex: 0 0 auto; width: 19px; height: 19px; aspect-ratio: auto;
  min-width: 0; max-width: none;
}

/* ==== Step15: 音源圆与源圆同大(32px), 去掉flex:1(源圆不左移), 均匀间距 ==== */
.controls.picking .source-picker {
  flex: 0 0 auto;          /* 覆盖 Step9 的 flex:1, 固定232px 不再撑满 */
  width: 232px;            /* = 未展开组宽274 - 源圆32, 源圆居中位置不变 */
  justify-content: space-evenly;  /* 圆在 232px 内均匀分布 */
}
.controls.picking .source-picker .picker-dot {
  flex: 0 0 auto; width: 32px; height: 32px;
  min-width: 0; max-width: none; aspect-ratio: auto;
}

/* ==== Step16: Listen1 iframe 适配 - 加高/圆角/柔和边框 ==== */
.source-listen1 { padding: 12px 16px 20px; }
.source-listen1 iframe.listen1-frame {
  width: 100%; height: 720px;
  border: 1px solid #E8E8E8; border-radius: 10px;
  background: #FFF; display: block;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}