/* 现场查经系统 · 投影页
   配色沿用 Atlas 的「松针」：奶油底 #f6f4ee、墨绿字 #24302a、松针绿 #3a7b5b。
   投影页是 1920×1080 的固定舞台，整体按窗口缩放，保证投影仪上看到的和电脑上一样。 */
:root {
  --cream: #f6f4ee;
  --cream-2: #efede4;
  --ink: #24302a;
  --ink-2: #4a574f;
  --pine: #3a7b5b;
  --pine-d: #2f6b4f;
  --pine-l: #98c0a9;
  --gold: #e3c27a;
  --glass: rgba(18, 24, 21, .62);
  --serif: "Songti SC", "Noto Serif SC", "STSong", "SimSun", serif;
  --sans: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0c100e; overflow: hidden; font-family: var(--sans); color: var(--cream); }
#viewport { position: fixed; inset: 0; height: 100dvh; touch-action: manipulation; display: grid; place-items: center; }
#stage { position: relative; width: 1920px; height: 1080px; flex: none; overflow: hidden; background: #111; transform-origin: center center; }
button { font: inherit; cursor: pointer; }
.hide { display: none !important; }

/* ---------- 场景 ---------- */
#scene, #mapLayer, #shade, #hymnLayer { position: absolute; inset: 0; }
.sl { position: absolute; inset: -4%; opacity: 0; transition: opacity 1.6s ease; background-size: cover; background-position: center; will-change: transform, opacity; }
.sl.on { opacity: 1; }
.sl video { width: 100%; height: 100%; object-fit: cover; }
.sl .fallback-title { position: absolute; right: 7%; top: 18%; font-family: var(--serif); font-size: 190px; letter-spacing: .08em; color: rgba(255,255,255,.07); writing-mode: vertical-rl; }
.sl .grain { position: absolute; inset: 0; opacity: .22; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>"); }
#shade { pointer-events: none; transition: background .8s ease, backdrop-filter .8s ease;
  background: linear-gradient(180deg, rgba(8,12,10,.55) 0%, rgba(8,12,10,0) 22%, rgba(8,12,10,0) 52%, rgba(8,12,10,.78) 100%); }
#stage[data-dim="1"] #shade { background: rgba(8,12,10,.62); backdrop-filter: blur(7px); }
#stage[data-dim="2"] #shade { background: rgba(5,8,7,.86); backdrop-filter: blur(14px); }

/* ---------- 地图 ---------- */
#mapLayer { opacity: 0; pointer-events: none; transition: opacity 1.4s ease; background: #cdbd96; }
#mapLayer.on { opacity: 1; }
#mapInner { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; transition: transform 3.2s cubic-bezier(.5,.05,.2,1); }
#mapInner svg { width: 100%; height: 100%; display: block; }
#mapLayer.edit { pointer-events: auto; }
#mapLayer.edit .pin { cursor: grab; }
.route { fill: none; stroke: var(--pine-d); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 2 16; animation: dash 3s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -72; } }
.pin circle.dot { fill: var(--pine-d); stroke: #fff; stroke-width: 4; }
.pin text.n { fill: #fff; font: 700 24px var(--sans); text-anchor: middle; dominant-baseline: central; }
.pin text.lab { fill: #3a2f1c; font: 700 26px var(--serif); text-anchor: middle; paint-order: stroke; stroke: rgba(246,240,224,.92); stroke-width: 6px; }
.pin.on circle.dot { fill: #b5532a; }
.pin .ring { fill: none; stroke: #b5532a; stroke-width: 4; opacity: 0; }
.pin.on .ring { animation: ring 2.2s ease-out infinite; }
@keyframes ring { 0% { r: 24; opacity: .9; } 100% { r: 70; opacity: 0; } }
.maptext { font: 600 30px var(--serif); fill: #5b4a2e; paint-order: stroke; stroke: rgba(240,230,205,.85); stroke-width: 7px; text-anchor: middle; letter-spacing: .1em; }
.maptext.sm { font-size: 22px; opacity: .85; }

#miniMap { position: absolute; right: 48px; top: 132px; width: 384px; height: 216px; border-radius: 14px; overflow: hidden; border: 2px solid rgba(246,244,238,.65);
  box-shadow: 0 10px 30px rgba(0,0,0,.45); opacity: 0; transform: translateY(-12px); transition: opacity .6s, transform .6s; z-index: 6; background: #cdbd96; }
#miniMap.on { opacity: 1; transform: none; }
#miniMap svg { width: 100%; height: 100%; display: block; }
#miniMap .pin text.lab { display: none; }
#miniMap .pin text.n { font-size: 30px; }

/* ---------- 顶部进度 ---------- */
#hud { position: absolute; left: 0; right: 0; top: 0; padding: 26px 48px 0; z-index: 8; display: grid; gap: 14px; }
#hudRow { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
#brand { font: 600 26px var(--serif); letter-spacing: .12em; color: rgba(246,244,238,.92); text-shadow: 0 1px 8px rgba(0,0,0,.5); }
#brand small { font: 400 20px var(--sans); letter-spacing: .04em; color: rgba(246,244,238,.7); margin-left: 16px; }
#clock { display: flex; align-items: center; gap: 22px; font-size: 22px; color: rgba(246,244,238,.85); font-variant-numeric: tabular-nums; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.dot-st { display: inline-flex; align-items: center; gap: 8px; }
.dot-st i { width: 12px; height: 12px; border-radius: 50%; background: #c05a3a; box-shadow: 0 0 0 0 rgba(192,90,58,.5); }
.dot-st.ok i { background: #6fcf97; animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(111,207,151,.5); } 100% { box-shadow: 0 0 0 14px rgba(111,207,151,0); } }
#prog { display: flex; gap: 6px; height: 36px; }
.seg { position: relative; border-radius: 8px; background: rgba(246,244,238,.14); overflow: hidden; display: grid; place-items: center; min-width: 54px;
  font-size: 17px; color: rgba(246,244,238,.8); border: 1px solid rgba(246,244,238,.18); white-space: nowrap; }
.seg b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(58,123,91,.88); transition: width .5s linear; }
.seg > span { position: relative; z-index: 1; padding: 0 8px; }
.seg.done b { width: 100%; background: rgba(58,123,91,.55); }
.seg.cur { border-color: var(--gold); color: #fff; font-weight: 700; }

/* ---------- 下三分之一：当前站标题 ---------- */
#lower { position: absolute; left: 64px; bottom: 270px; z-index: 6; max-width: 1100px; opacity: 0; transform: translateY(14px); transition: opacity .9s, transform .9s; }
#lower.on { opacity: 1; transform: none; }
#lower .no { font: 600 26px var(--sans); letter-spacing: .3em; color: var(--gold); }
#lower h1 { margin: 6px 0 10px; font: 700 96px/1.1 var(--serif); letter-spacing: .04em; text-shadow: 0 4px 30px rgba(0,0,0,.6); }
#lower p { margin: 0; font-size: 30px; color: rgba(246,244,238,.88); text-shadow: 0 2px 14px rgba(0,0,0,.6); }

/* ---------- 字幕 ---------- */
.nw { white-space: nowrap; }
#subtitle { position: absolute; left: 160px; right: 160px; bottom: 74px; z-index: 7; text-align: center; min-height: 120px; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
#subtitle .nw { display: inline; padding: 0; background: none; border-radius: 0; font: inherit; letter-spacing: inherit; opacity: 1; max-width: none; }
#subtitle > span { display: inline-block; font: 600 54px/1.45 var(--serif); letter-spacing: .04em; color: #fff; padding: 6px 28px; border-radius: 14px; background: rgba(8,12,10,.46);
  text-shadow: 0 2px 14px rgba(0,0,0,.8); opacity: 0; transition: opacity .35s; max-width: 1560px; }
#subtitle > span.on { opacity: 1; }

/* ---------- 卡片 ---------- */
#cards { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.card { position: absolute; opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; pointer-events: none; }
.card.on { opacity: 1; transform: none; }
.paper { background: var(--cream); color: var(--ink); border-radius: 22px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.tag { display: inline-block; font: 600 22px var(--sans); letter-spacing: .2em; color: var(--pine-d); background: #e4efe8; border-radius: 999px; padding: 6px 20px; }

/* 经文卡 */
#c-verse { left: 150px; right: 150px; top: 200px; padding: 52px 70px 44px; }
#c-verse .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
#c-verse .passage { font: 600 28px var(--sans); color: var(--ink-2); }
.vnav { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; }
.vnav button { font: 600 26px var(--sans); padding: 12px 30px; border-radius: 14px; border: 1px solid #c9c4b4; background: #fff; color: var(--ink); cursor: pointer; }
.vnav button:disabled { opacity: .35; cursor: default; }
.vnav button { pointer-events: auto; }   /* .card 默认不接收点击，翻页按钮需要单独打开 */
.vnav { position: relative; z-index: 30; }
.vnav button { min-width: 190px; padding: 16px 34px; font-size: 30px; background: var(--pine-d); color: #fff; border-color: var(--pine-d); }
.vnav button:disabled { background: #fff; color: var(--ink); border-color: #c9c4b4; }
.vnav #vInfo { text-align: center; flex: 1; }
.vnav #vInfo small { display: block; font: 500 22px var(--sans); color: var(--ink-2); margin-top: 4px; }
/* 没显示出来的浮层不能挡住点击（之前隐藏的手机二维码盖住了“下一屏”） */
#qrBox:not(.on), #lower:not(.on), #stepTime:empty { pointer-events: none; }
.vnav #vInfo { font: 600 26px var(--sans); color: var(--ink-2); }
.vrow { display: grid; grid-template-columns: 128px 1fr; gap: 12px; align-items: baseline; padding: 14px 0; border-top: 1px solid #e3e0d6; opacity: 0; transform: translateY(10px); transition: opacity .8s, transform .8s; }
.vrow.on { opacity: 1; transform: none; }
.vref { font: 600 26px var(--sans); color: var(--pine-d); }
.vtxt { font: 500 46px/1.6 var(--serif); }
#c-verse .foot { margin-top: 20px; padding-top: 18px; border-top: 1px solid #e3e0d6; font-size: 27px; color: var(--ink-2); display: grid; gap: 6px; }

/* 提问卡 */
#c-ask { left: 80px; top: 170px; width: 1090px; color: #fff; }
#c-ask .q { font: 700 70px/1.3 var(--serif); letter-spacing: .02em; text-shadow: 0 3px 24px rgba(0,0,0,.6); margin: 18px 0 30px; }
#c-ask .prompts { display: grid; gap: 14px; }
#c-ask .prompts div { font-size: 36px; line-height: 1.5; padding: 14px 26px; border-radius: 16px; background: var(--glass); border-left: 6px solid var(--gold); }
#c-ask .pairs { margin-top: 22px; font-size: 32px; color: var(--gold); }
#c-ask .tag { background: rgba(58,123,91,.9); color: #fff; }
.groups { position: absolute; left: 80px; bottom: 56px; width: 1130px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gcard { background: var(--cream); color: var(--ink); border-radius: 16px; padding: 16px 22px; font-size: 27px; line-height: 1.45; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.gcard b { display: block; font: 700 27px var(--sans); color: var(--pine-d); margin-bottom: 4px; }

/* 发言墙 */
#c-wall { right: 60px; top: 160px; width: 600px; bottom: 230px; display: flex; flex-direction: column; gap: 12px; justify-content: flex-start; }
#c-wall .wh { font: 600 22px var(--sans); letter-spacing: .25em; color: rgba(246,244,238,.8); display: flex; align-items: center; gap: 12px; }
#wallList { display: flex; flex-direction: column; gap: 12px; overflow: hidden; flex: 1; justify-content: flex-end; }
.wi { background: rgba(246,244,238,.94); color: var(--ink); border-radius: 18px; padding: 16px 22px; font-size: 30px; line-height: 1.5; box-shadow: 0 8px 24px rgba(0,0,0,.3); animation: pop .6s ease; }
.wi small { display: block; margin-top: 4px; font-size: 19px; color: var(--pine-d); letter-spacing: .08em; }
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
#interim { min-height: 44px; font-size: 26px; color: rgba(246,244,238,.65); font-style: italic; padding: 4px 8px; }
.listen { display: inline-flex; gap: 4px; align-items: flex-end; height: 22px; }
.listen i { width: 5px; background: #6fcf97; border-radius: 3px; animation: eq 1.1s ease-in-out infinite; }
.listen i:nth-child(2) { animation-delay: .15s; } .listen i:nth-child(3) { animation-delay: .3s; } .listen i:nth-child(4) { animation-delay: .45s; }
@keyframes eq { 0%,100% { height: 6px; } 50% { height: 22px; } }

/* 投票卡 */
#c-poll { left: 150px; right: 150px; top: 190px; padding: 44px 66px 40px; }
#c-poll .q { font: 700 60px/1.3 var(--serif); margin: 14px 0 28px; }
.bar { position: relative; display: grid; grid-template-columns: 1fr 70px; align-items: center; gap: 18px; margin: 8px 0; font-size: 38px; }
.bar .track { position: relative; height: 62px; border-radius: 14px; background: #e3e0d6; overflow: hidden; display: flex; align-items: center; }
.bar .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--pine); transition: width .8s cubic-bezier(.3,.9,.3,1); }
.bar .lab { position: relative; z-index: 1; padding: 0 24px; font-weight: 600; color: var(--ink); mix-blend-mode: normal; }
.bar .num { font: 700 44px var(--serif); text-align: right; color: var(--pine-d); font-variant-numeric: tabular-nums; }
#c-poll .note { margin-top: 18px; font-size: 28px; color: var(--ink-2); }
#c-poll .opts { display: grid; gap: 14px; }
#c-poll .opt { background: rgba(246,244,238,.1); border-radius: 14px; padding: 16px 28px; font: 600 40px var(--sans); }

/* 安静卡 */
#c-quiet { inset: 0; display: grid; place-content: center; text-align: center; gap: 26px; }
#c-quiet .big { font: 700 100px/1.25 var(--serif); letter-spacing: .06em; text-shadow: 0 4px 36px rgba(0,0,0,.7); }
#c-quiet .sub { font-size: 38px; line-height: 1.6; color: rgba(246,244,238,.85); max-width: 1300px; margin: 0 auto; }
#c-quiet .ring { margin: 20px auto 0; width: 220px; height: 220px; position: relative; }
#c-quiet .ring svg { transform: rotate(-90deg); }
#c-quiet .ring text { transform: rotate(90deg); transform-origin: 110px 110px; fill: #fff; font: 600 50px var(--sans); text-anchor: middle; dominant-baseline: central; }

/* 小结卡 */
#c-sum { left: 220px; right: 220px; top: 190px; padding: 46px 70px 44px; }
#c-sum h2 { margin: 12px 0 24px; font: 700 52px var(--serif); }
.srow { display: grid; grid-template-columns: 220px 1fr; gap: 20px; padding: 20px 0; border-top: 1px solid #e3e0d6; opacity: 0; transform: translateY(10px); transition: opacity .9s, transform .9s; }
.srow.on { opacity: 1; transform: none; }
.srow .k { font: 700 28px var(--sans); color: var(--pine-d); letter-spacing: .1em; padding-top: 8px; }
.srow .v { font: 500 42px/1.6 var(--serif); }
#c-sum .busy { font-size: 40px; color: var(--ink-2); padding: 40px 0; }
.dots i { display: inline-block; width: 14px; height: 14px; margin: 0 5px; border-radius: 50%; background: var(--pine); animation: bounce 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes bounce { 0%,80%,100% { transform: scale(.5); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
#c-sum .note { margin-top: 14px; font-size: 24px; color: #8a6d3b; }

/* 代祷墙 */
#c-share { left: 150px; right: 150px; top: 190px; bottom: 150px; padding: 40px 60px; overflow: hidden; display: flex; flex-direction: column; }
#c-share h2 { margin: 12px 0 18px; font: 700 54px var(--serif); }
#prayList { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: start; overflow: hidden; }
.pi { background: #fff; border: 1px solid #e3e0d6; border-radius: 16px; padding: 16px 22px; font-size: 32px; line-height: 1.5; animation: pop .6s ease; }
.pi small { display: block; color: var(--pine-d); font-size: 20px; }
#c-share .empty { font-size: 34px; color: var(--ink-2); padding: 30px 0; }

/* 赞美诗 */
#hymnLayer { z-index: 4; background: radial-gradient(ellipse at 50% 38%, rgba(58,43,28,.55), rgba(10,8,6,.95) 75%); opacity: 0; pointer-events: none; transition: opacity 1s; display: grid; place-items: center; align-content: center; gap: 18px; padding-top: 96px; }
#hymnLayer.on { opacity: 1; pointer-events: auto; }
#hymnLayer .ht { font: 700 60px var(--serif); letter-spacing: .12em; }
#hymnLayer .frame { width: 1180px; height: 664px; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 30px 90px rgba(0,0,0,.7); }
#hymnLayer iframe { width: 100%; height: 100%; border: 0; }
#hymnLayer .fb { font-size: 26px; color: rgba(246,244,238,.8); }
#hymnLayer .fb a, #hymnLayer .fb button { color: var(--gold); background: none; border: 0; font-size: 26px; text-decoration: underline; }

/* 手机二维码 */
#qrBox { position: absolute; right: 48px; bottom: 36px; z-index: 6; display: flex; align-items: center; gap: 18px; background: rgba(246,244,238,.96); color: var(--ink); padding: 14px 22px 14px 14px; border-radius: 18px;
  box-shadow: 0 12px 34px rgba(0,0,0,.45); opacity: 0; transform: translateY(10px); transition: opacity .6s, transform .6s; }
#qrBox.on { opacity: 1; transform: none; }
#qrBox .img { width: 138px; height: 138px; display: grid; place-items: center; }
#qrBox .img svg, #qrBox .img img { width: 138px; height: 138px; }
#qrBox .tx { font-size: 24px; line-height: 1.45; max-width: 330px; }
#qrBox .tx b { display: block; font-size: 26px; color: var(--pine-d); }
#qrBox .url { font: 500 21px ui-monospace, Menlo, monospace; color: var(--ink-2); word-break: break-all; }

/* 步骤计时条 */
#stepBar { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; z-index: 9; background: rgba(246,244,238,.12); }
#stepBar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .4s linear; }
#stepTime { position: absolute; left: 52px; top: 124px; z-index: 8; font: 600 34px var(--sans); color: rgba(246,244,238,.9); font-variant-numeric: tabular-nums; text-shadow: 0 2px 10px rgba(0,0,0,.6); }

/* 控制条 */
#ctrl { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); transform-origin: 50% 100%; z-index: 20; display: flex; gap: 10px; padding: 10px 14px; border-radius: 16px; background: rgba(12,16,14,.88); border: 1px solid rgba(246,244,238,.2);
  opacity: 0; transition: opacity .35s; }
#stage.ctrl-on #ctrl { opacity: 1; }
#ctrl button { min-width: 64px; height: 50px; padding: 0 16px; border-radius: 10px; border: 1px solid rgba(246,244,238,.22); background: rgba(246,244,238,.08); color: #fff; font-size: 22px; }
#ctrl button:hover { background: rgba(246,244,238,.2); }
#ctrl button.act { background: var(--pine); border-color: var(--pine); }
#toast { position: absolute; left: 50%; top: 150px; transform: translateX(-50%); z-index: 30; background: rgba(12,16,14,.9); color: #fff; padding: 12px 26px; border-radius: 12px; font-size: 26px; opacity: 0; transition: opacity .4s; pointer-events: none; }
#toast.on { opacity: 1; }
#editBar { position: absolute; left: 50%; top: 130px; transform: translateX(-50%); z-index: 31; background: rgba(12,16,14,.92); padding: 14px 24px; border-radius: 14px; font-size: 26px; display: flex; gap: 16px; align-items: center; }
#editBar button { padding: 8px 20px; border-radius: 10px; border: 0; background: var(--pine); color: #fff; font-size: 24px; }

/* ---------- 开始页 ---------- */
#start { position: absolute; inset: 0; z-index: 40; background: radial-gradient(ellipse at 30% 20%, #26362d 0%, #101714 70%); display: grid; grid-template-columns: 1fr 760px; gap: 70px; padding: 70px 120px; align-items: center; grid-template-rows: minmax(0,1fr); box-sizing: border-box; overflow: hidden; }
#start .l { align-self: center; position: relative; z-index: 2; }
#start .l .k { font: 600 26px var(--sans); letter-spacing: .34em; color: var(--gold); }
#start h1 { margin: 20px 0 14px; font: 700 150px/1.06 var(--serif); letter-spacing: .05em; }
#start .s { font-size: 36px; color: rgba(246,244,238,.8); line-height: 1.6; }
#goBtn { margin-top: 56px; height: 120px; padding: 0 76px; border-radius: 26px; border: 0; background: var(--pine); color: #fff; font: 700 48px var(--sans); letter-spacing: .3em; box-shadow: 0 14px 44px rgba(58,123,91,.5); }
#goBtn:hover { background: var(--pine-d); }
#goRehearse { margin: 56px 0 0 20px; height: 120px; padding: 0 40px; border-radius: 26px; border: 2px solid rgba(246,244,238,.4); background: transparent; color: #fff; font-size: 30px; }
#start .r { background: rgba(246,244,238,.07); border: 1px solid rgba(246,244,238,.16); border-radius: 22px; padding: 34px 40px; display: grid; gap: 14px; font-size: 27px; align-self: center; max-height: 100%; overflow-y: auto; box-sizing: border-box; align-content: start; }
#start .r h3 { margin: 0 0 6px; font: 600 22px var(--sans); letter-spacing: .3em; color: rgba(246,244,238,.65); }
.chk { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; line-height: 1.45; }
.chk i { font-style: normal; font-weight: 700; }
.chk.ok i { color: #6fcf97; } .chk.warn i { color: #f2c35b; } .chk.bad i { color: #ef7d6b; }
.chk small { display: block; color: rgba(246,244,238,.6); font-size: 21px; }
#hymnIn { width: 100%; height: 56px; border-radius: 12px; border: 1px solid rgba(246,244,238,.3); background: rgba(0,0,0,.28); color: #fff; padding: 0 16px; font-size: 22px; }

/* 语音指令 / 解释面板 */
#explainBox { position: absolute; left: 52px; top: 190px; width: 640px; max-height: 62%; z-index: 7; display: none; flex-direction: column; gap: 12px;
  background: rgba(246,244,238,.97); color: var(--ink); padding: 18px 22px 22px; border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
#explainBox.on { display: flex; }
#explainBox .eh { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
#explainBox .eh b { font: 700 30px var(--serif); color: var(--pine-d); }
#explainBox #exBody { font: 500 24px/1.65 var(--serif); overflow: auto; white-space: pre-line; }
#explainBox button, #cmdBox button { height: 46px; padding: 0 20px; border: 0; border-radius: 12px; background: var(--pine); color: #fff; font-size: 20px; letter-spacing: .08em; cursor: pointer; }
#cmdBox { position: absolute; right: 48px; bottom: 100px; width: 520px; z-index: 8; display: none; flex-direction: column; gap: 12px;
  background: rgba(12,16,14,.92); color: var(--cream); padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(246,244,238,.2); }
#cmdBox.on { display: flex; }
#cmdBox .crow { display: flex; gap: 10px; }
#cmdBox #cmdListen { flex: 1; height: 56px; font-size: 22px; letter-spacing: .1em; background: #3a7b5b; }
#cmdBox #cmdStatus { font-size: 18px; color: #e3c27a; min-height: 24px; }
#cmdBox #cmdIn { flex: 1; min-width: 0; height: 46px; border-radius: 12px; border: 1px solid rgba(246,244,238,.3); background: rgba(246,244,238,.08); color: var(--cream); padding: 0 14px; font: 20px var(--sans); }
#cmdBox .cq { display: flex; flex-wrap: wrap; gap: 8px; }
#cmdBox .cq button { height: 40px; font-size: 18px; background: rgba(246,244,238,.14); }
#cmdBox .chint { font-size: 16px; color: rgba(246,244,238,.7); }

/* 角落里的实时记录：小而不抢眼；分享环节放大一点 */
#heard { position: absolute; left: 48px; bottom: 14px; width: 600px; z-index: 9; display: none; align-items: flex-start; gap: 10px; padding: 8px 14px; border-radius: 12px; background: rgba(8,12,10,.5); color: rgba(246,244,238,.82); font: 500 20px/1.35 var(--sans); pointer-events: none; }
#heard.on { display: flex; }
#heard i { flex: none; width: 10px; height: 10px; margin-top: 8px; border-radius: 50%; background: #6fcf97; animation: pulse 2.4s infinite; }
#heard span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#heard.live span { font-style: italic; color: #fff; }
#heard.got span { color: #fff; }
#heard.off { color: rgba(246,244,238,.6); }
#heard.off i { background: #c05a3a; animation: none; }
#heard.big { width: 860px; font-size: 28px; padding: 12px 20px; }
#heard.big i { margin-top: 12px; }

/* ---- 开始页：赞美诗推荐 ---- */
#hymnNow { font-size: 21px; min-height: 28px; color: rgba(246,244,238,.85); }
#hymnNow b { color: var(--gold); }
#hymnNow .bad { color: #ef7d6b; }
.hrow { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; }
.hrow input { height: 46px; border-radius: 10px; border: 1px solid rgba(246,244,238,.3); background: rgba(0,0,0,.28); color: #fff; padding: 0 14px; font-size: 20px; min-width: 0; }
.hrow button, .hc button { height: 46px; padding: 0 16px; border-radius: 10px; border: 1px solid rgba(246,244,238,.35); background: rgba(246,244,238,.1); color: #f6f4ee; font-size: 20px; cursor: pointer; }
#hymnList { max-height: 330px; overflow-y: auto; display: grid; gap: 8px; align-content: start; }
#hymnList .grp { font-size: 19px; color: rgba(246,244,238,.65); margin-top: 4px; }
#hymnList .grp small { color: rgba(246,244,238,.45); }
.hc { display: grid; grid-template-columns: 128px 1fr auto; gap: 12px; align-items: center; background: rgba(0,0,0,.22); border-radius: 12px; padding: 8px; }
.hc.cur { outline: 2px solid var(--gold); }
.hc .th { width: 128px; height: 72px; border-radius: 8px; overflow: hidden; background: #000; }
.hc .th img, .hc .th iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }
.hc .tt { font-size: 19px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hc .mt { font-size: 16px; color: rgba(246,244,238,.6); margin-top: 3px; }
.hc .mt .fit { color: #6fcf97; }
.hc .bt { display: grid; gap: 6px; }
.hc .bt button { height: 34px; padding: 0 12px; font-size: 17px; }
.hc .bt .pick { background: var(--gold); color: #1b1408; border-color: var(--gold); font-weight: 700; }

/* 结束页：返回按钮 */
.endnav { display: flex; gap: 22px; justify-content: center; margin-top: 36px; }
.endbtn { font: 600 32px var(--sans); padding: 16px 40px; border-radius: 16px; background: #f6f4ee; color: #1e2b24; text-decoration: none; border: 1px solid rgba(246,244,238,.5); pointer-events: auto; cursor: pointer; }
.endbtn:hover { background: #e3c27a; }