:root{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:#1c3d5a;background:#cfe9ff;
--blue:#2f8fdd;--blue-l:#5fb6f3;--ink:#1c3d5a;--mut:#4f7594;--num:#3d8fd6;
--ico-play:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E");
--ico-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0l-4.5-4.5M12 15l4.5-4.5M4 17v3h16v-3'/%3E%3C/svg%3E");
--ico-list:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h9M3 12h9M3 18h6M17 5v10.5'/%3E%3Ccircle cx='14.5' cy='16' r='2.5' fill='%23fff' stroke='none'/%3E%3C/svg%3E");
--ico-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7f9c' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E")}
*{box-sizing:border-box}
body{margin:0;padding-bottom:190px;min-height:100vh;
background:
 radial-gradient(70% 45% at 15% 8%,#ffffffd9 0,transparent 70%),
 radial-gradient(55% 40% at 88% 30%,#ffffffb0 0,transparent 70%),
 radial-gradient(60% 40% at 30% 65%,#ffffffa6 0,transparent 70%),
 linear-gradient(180deg,#5fb4f0 0,#9fd3f9 22%,#c9e7fb 45%,#e6f4ff 70%,#f3f9ff 100%);
background-attachment:fixed}


main{max-width:920px;margin:auto;padding:0 12px}

/* 顶部横幅：出血、底部淡出融进背景、缓慢推拉（Ken Burns） */
.hero{position:relative;background:none;box-shadow:none;padding:0;border-radius:0;margin:0 -12px;overflow:hidden}
.hero img{width:100%;aspect-ratio:1672/444;object-fit:cover;object-position:center;display:block;border-radius:0;box-shadow:none;
-webkit-mask-image:linear-gradient(#000 62%,transparent 100%);mask-image:linear-gradient(#000 62%,transparent 100%);
animation:kenburns 26s ease-in-out infinite alternate;transform-origin:50% 40%;will-change:transform}
@keyframes kenburns{from{transform:scale(1) translateY(0)}to{transform:scale(1.07) translateY(-2%)}}
@media(max-width:600px){.hero img{aspect-ratio:2.1/1;object-position:center 42%}}
/* 飘动的音符 + 一道缓慢扫过的天光，都叠在横幅上，不动 HTML */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.85;
background:
 var(--note) 12% 30%/22px no-repeat,
 var(--note) 30% 65%/16px no-repeat,
 var(--note) 58% 20%/18px no-repeat,
 var(--note) 76% 55%/24px no-repeat,
 var(--note) 90% 28%/15px no-repeat;
animation:notes 14s linear infinite}
@keyframes notes{0%{background-position:12% 30%,30% 65%,58% 20%,76% 55%,90% 28%;opacity:.0}10%{opacity:.85}90%{opacity:.85}100%{background-position:14% -10%,28% 10%,60% -15%,78% 5%,88% -12%;opacity:0}}
.hero::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-30%;width:28%;pointer-events:none;z-index:1;
background:linear-gradient(100deg,#ffffff00 0,#ffffff66 50%,#ffffff00 100%);transform:skewX(-14deg);animation:sweep 9s ease-in-out infinite}
@keyframes sweep{0%,55%{left:-30%}100%{left:130%}}
:root{--note:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' fill-opacity='.9' d='M9 3v10.6A3.5 3.5 0 1 0 11 17V7h5V3z'/%3E%3C/svg%3E")}
@media(prefers-reduced-motion:reduce){.hero img,.hero::before,.hero::after,.cross{animation:none}}

/* 三个按钮：蓝色玻璃胶囊，左侧图标圆徽，顶部高光 */
.offline{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:6px 2px 4px;position:relative;z-index:2}
.offline button{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:8px 14px 8px 10px;
font-size:15px;font-weight:700;letter-spacing:.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
background:linear-gradient(160deg,#6cc0f6 0%,#3d9be8 55%,#2a86d8 100%);border-radius:999px;
box-shadow:0 10px 22px #2f8fdd4d,inset 0 1px 0 #ffffff80,inset 0 -2px 0 #1f6fb840;
transition:transform .15s,box-shadow .15s}
.offline button::after{content:"";position:absolute;left:8%;right:8%;top:3px;height:42%;border-radius:999px;background:linear-gradient(#ffffff59,#ffffff00);pointer-events:none}
.offline button::before{content:"";flex:none;width:32px;height:32px;border-radius:50%;background:#ffffff33 var(--i) center/17px no-repeat;box-shadow:inset 0 0 0 1px #ffffff55}
.offline button:hover{transform:translateY(-1px);box-shadow:0 14px 26px #2f8fdd5c,inset 0 1px 0 #ffffff80,inset 0 -2px 0 #1f6fb840}
.offline button:active{transform:translateY(1px) scale(.98);box-shadow:0 5px 12px #2f8fdd4d,inset 0 1px 0 #ffffff60}
#auto-download{--i:var(--ico-play)}
#download{--i:var(--ico-down)}
#offline-manage{--i:var(--ico-list)}
.offline button:disabled{opacity:.7}
.offline span{grid-column:1/-1;text-align:center;font-size:13px;color:var(--mut);padding:4px 0 0}
@media(max-width:560px){.offline{grid-template-columns:1fr 1fr;gap:10px}.offline #download{grid-column:1/-1;order:3}.offline #auto-download{order:1}.offline #offline-manage{order:2}.offline span{order:4}.offline button{font-size:14px;min-height:50px;padding:8px 8px 8px 6px}.offline button::before{width:28px;height:28px;background-size:15px}}

/* 搜索胶囊 */
.toolbar{position:sticky;top:8px;z-index:2;display:flex;align-items:center;margin:14px 0 12px;padding:0 18px;
background:#ffffffe8;border-radius:999px;box-shadow:0 6px 18px #4a9ad830;backdrop-filter:blur(10px)}
.toolbar::before{content:"";flex:none;width:20px;height:20px;margin-right:10px;background:var(--ico-search) center/contain no-repeat}
.toolbar input{flex:1;min-width:0;border:0;background:transparent;padding:14px 0;font-size:16px;color:var(--ink);outline:none}
.toolbar input::placeholder{color:#7f9bb2}
.toolbar span{white-space:nowrap;color:var(--mut);font-size:14px;margin-left:10px}

/* 歌曲列表：白色胶囊 + 右侧播放键 */
ol{list-style:none;padding:0;margin:0;display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:700px){ol{grid-template-columns:1fr 1fr;gap:12px}}
li{display:flex;align-items:center;gap:12px;background:#ffffffe0;border:0;border-radius:999px;padding:11px 12px 11px 18px;cursor:pointer;
box-shadow:0 4px 14px #4a9ad826;backdrop-filter:blur(6px);transition:transform .12s,box-shadow .12s}
li:active{transform:scale(.985)}
li::after{content:"";flex:none;width:34px;height:34px;border-radius:50%;
background:var(--ico-play) center/13px no-repeat,linear-gradient(180deg,var(--blue-l),var(--blue));box-shadow:0 4px 10px #2f8fdd55}
li.active{background:#e3f2ff;box-shadow:0 0 0 2px #56b2e8 inset,0 4px 14px #4a9ad826}
li.active::after{background-image:var(--ico-play),linear-gradient(180deg,#ff9c6b,#f26a3a);box-shadow:0 4px 10px #f26a3a55}
.num{color:var(--num);font-weight:700;min-width:34px;font-variant-numeric:tabular-nums}
.song-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px}

/* 底部迷你播放器 */
footer{position:fixed;z-index:5;left:0;right:0;bottom:0;background:#ffffffee;backdrop-filter:blur(18px);border-top:1px solid #cfe6f7;
padding:10px max(16px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));box-shadow:0 -8px 30px #599ac428}
.now{max-width:920px;margin:auto;position:relative}
.now small{display:block;color:#7591a4}
.now strong{display:block;padding-right:105px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.now #time{position:absolute;right:0;bottom:1px;color:#6c879a;font-size:13px}
#progress{display:block;width:min(920px,100%);margin:7px auto;accent-color:var(--blue)}
.controls{display:flex;justify-content:center;align-items:center;gap:18px}
button{border:0;color:#fff;border-radius:999px;font-weight:700;background:linear-gradient(180deg,var(--blue-l),var(--blue))}
.controls button{min-width:45px;height:45px;padding:0 13px;font-size:20px;box-shadow:0 6px 14px #2f8fdd44}
.controls #play{width:56px;height:56px;font-size:24px}
.controls #mode{font-size:13px;color:#2b76ab;background:#e6f3fd;box-shadow:none}
@media(max-width:500px){.controls{gap:9px}.controls #mode{padding:0 9px}}

/* 正在播放页与设置面板底色统一成天空色（覆盖 player.css 的默认渐变） */
body #now-page{background:linear-gradient(180deg,#bfe0fb 0,#e4f2ff 45%,#f4faff 100%)}

/* ===== 基督教氛围：十字架徽章、天光、水印 ===== */
:root{--gold:#f2cf6b;--gold-d:#c9962b;
--ico-cross:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M10 2h4v6h6v4h-6v10h-4V12H4V8h6z'/%3E%3C/svg%3E");
--ico-cross-blue:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233d8fd6' d='M10 2h4v6h6v4h-6v10h-4V12H4V8h6z'/%3E%3C/svg%3E")}

/* 顶部天光放射 + 底部淡十字水印 */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
background:
 conic-gradient(from 180deg at 50% -12%,#ffffff00 0deg,#ffffff70 8deg,#ffffff00 14deg,#ffffff00 22deg,#ffffff5c 30deg,#ffffff00 36deg,#ffffff00 48deg,#ffffff66 56deg,#ffffff00 62deg,#ffffff00 300deg,#ffffff5c 306deg,#ffffff00 312deg,#ffffff00 324deg,#ffffff70 330deg,#ffffff00 336deg,#ffffff00 344deg,#ffffff5c 350deg,#ffffff00 360deg),
 radial-gradient(circle at 50% 0,#ffffffaa 0,#ffffff00 42%)}
body::after{content:"";position:fixed;right:-40px;bottom:120px;width:min(60vw,320px);aspect-ratio:1;z-index:-1;pointer-events:none;opacity:.10;
background:var(--ico-cross-blue) center/contain no-repeat;transform:rotate(-8deg)}

/* 横幅正下方：金色十字架徽章 + 标题 */
header{display:flex;align-items:center;justify-content:center;gap:14px;padding:16px 8px 4px;text-align:left}
.cross{display:grid;place-items:center;flex:none;width:58px;height:58px;border-radius:50%;
background:radial-gradient(circle at 35% 30%,#fff3c4,var(--gold) 45%,var(--gold-d) 100%);
color:#fff;font-size:34px;line-height:1;text-shadow:0 1px 2px #8a6a1a99;
box-shadow:0 0 0 4px #ffffffd0,0 0 0 6px #f2cf6b80,0 10px 24px #c9962b66;
animation:halo 3.2s ease-in-out infinite}
@keyframes halo{0%,100%{box-shadow:0 0 0 4px #ffffffd0,0 0 0 6px #f2cf6b80,0 10px 24px #c9962b66}50%{box-shadow:0 0 0 4px #ffffffd0,0 0 0 9px #f2cf6b55,0 12px 30px #c9962b88}}
header h1{margin:0;font-size:22px;letter-spacing:2px;color:#1b4f7a;text-shadow:0 1px 0 #fff}
header p{margin:3px 0 0;font-size:13px;color:var(--mut)}

/* 迷你播放器：正在播放 前面一个小十字 */
.now small::before{content:"";display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:-1px;background:var(--ico-cross-blue) center/contain no-repeat}

/* 正在播放页：封面金环 + 标题上方十字 + 歌词框装饰线 */
body #now-page .album-cover{box-shadow:0 0 0 4px #fff,0 0 0 8px #7cc4f5,0 0 0 9px #ffffffa0,0 18px 48px #2d7ca548;border-radius:26px}
body #now-page h2::before{content:"";display:block;width:26px;height:26px;margin:0 auto 8px;background:var(--ico-cross-blue) center/contain no-repeat;opacity:.9}
body #now-page .lyrics{background:#ffffffe6;border-color:#cfe6f7}
body #now-page .lyrics span::before,body #now-page .lyrics span::after{content:"— ✝ —";margin:0 8px;color:var(--gold-d);font-size:12px}
body #now-page .page-controls #page-play{background:linear-gradient(180deg,var(--blue-l),var(--blue));box-shadow:0 8px 20px #2f8fdd55}

/* 每首歌的离线状态小徽章（覆盖 app.js 内联样式）：未下载=灰点，已下载=绿勾 */
#songs .download-state{flex:none;width:24px;height:24px;margin:0;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;color:#8aa4b8;background:#edf3f8;box-shadow:inset 0 0 0 1px #d8e6f0}
#songs .download-state[aria-label="已下载"]{color:#fff;background:linear-gradient(180deg,#7ad38f,#3fb15c);box-shadow:0 3px 8px #3fb15c55}
/* 横幅图里已有标题，这一行去掉（用户要求） */
header{display:none}

/* 播放页底部「设置」：原来是文字+文字，改成齿轮图标+文字，和旁边几个一致 */
body #now-page #settings-bottom b.settings-word{font-size:0;display:grid;place-items:center;height:25px}
body #now-page #settings-bottom b.settings-word::before{content:"";width:24px;height:24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23245d7e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E") center/contain no-repeat}
body #now-page .page-tools button span{font-size:12px;white-space:nowrap}

/* ===== 播放页控制区重做：统一圆形图标底、等宽五栏、不换行 ===== */
body #now-page .page-controls{gap:22px;margin:6px 0 4px}
body #now-page .page-controls button{width:50px;height:50px;border-radius:50%;background:#ffffffcc;color:#1f6fb8;box-shadow:0 4px 12px #4a9ad82a;display:grid;place-items:center;font-size:22px}
body #now-page .page-controls #page-play{width:74px;height:74px;color:#fff;font-size:30px;
background:linear-gradient(160deg,#6cc0f6 0%,#3d9be8 55%,#2a86d8 100%);box-shadow:0 12px 26px #2f8fdd55,inset 0 1px 0 #ffffff80,inset 0 -2px 0 #1f6fb840}
body #now-page .page-controls svg{width:22px;height:22px}
body #now-page .page-controls #page-play svg{width:30px;height:30px}
body #now-page .page-tools{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-width:560px;margin:18px auto 14px;padding:0 4px}
body #now-page .page-tools button{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;padding:4px 0;background:transparent;color:#245d7e;font-size:12px;box-shadow:none}
body #now-page .page-tools button b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#ffffffcc;box-shadow:0 4px 12px #4a9ad82a;font-size:20px;font-weight:400;color:#1f6fb8}
body #now-page .page-tools button svg{width:22px;height:22px}
body #now-page .page-tools button span{font-size:12px;line-height:1;white-space:nowrap;color:#3a6b8f}
body #now-page .page-tools #favorite-bottom.on b{color:#e95d70;background:#fff0f2}
body #now-page .page-tools #settings-bottom b.settings-word{width:44px;height:44px;font-size:0}
body #now-page #show-list{background:#ffffffd9;color:#266d96;border:0;box-shadow:0 6px 18px #4a9ad82a;font-weight:700}