/* live.css — NoorWaqt Live Display
 *
 * 两个固定画幅：
 *   YouTube 16:9  (1920×1080) 横屏
 *   TikTok  9:16  (1080×1920) 竖屏
 * 同一套 HTML，通过 .layout-16x9 / .layout-9x16 切换。
 * OBS Browser Source 直接整页捕获；FFmpeg 用 x11grab / gdigrab 抓窗口。
 */

:root {
  --live-bg: #04100e;
  --live-bg-2: #071a17;
  --live-card: rgba(255,255,255,0.04);
  --live-line: rgba(126,231,190,0.14);
  --live-line-2: rgba(126,231,190,0.26);
}

/* ── body ── */
.live-body {
  margin: 0;
  background: var(--live-bg);
  overflow: hidden; /* 直播页不滚动，OBS 抓整页 */
}

/* ── Stage ── */
.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  background: var(--live-bg);
  color: var(--ink);
  font-size: 21px; /* 再放大一档，YouTube/TikTok 远看清晰 */
}
.layout-9x16.stage { font-size: 22px; /* 竖屏再大一点 */ }

 /* 背景 */
.live-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.live-bg-gradient {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 70% 18%, rgba(16,185,129,0.16) 0%, transparent 62%),
    radial-gradient(90% 70% at 12% 85%, rgba(6,78,59,0.42) 0%, transparent 60%),
    linear-gradient(180deg, #04100e 0%, #061a17 55%, #04100e 100%);
}
.live-bg-glow {
  position: absolute; width: 42vw; height: 42vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(16,185,129,0.13) 0%, transparent 70%);
  filter: blur(18px);
}
.live-bg-glow--tl { left: -8vw; top: -10vh; }
.live-bg-glow--br { right: -6vw; bottom: -8vh; background: radial-gradient(circle, rgba(52,211,153,0.10) 0%, transparent 72%); }
.live-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(126,231,190,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,231,190,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(85% 70% at 50% 35%, black 45%, transparent 88%);
}

/* ── Earth 模式层 — LTR 左球右文、RTL 右球左文，轴固定 23.44° ── */
.live-earth-layer{ position:absolute; inset:0; z-index:1; display:none; }
.mode-earth .live-earth-layer{ display:block; }
/* inset-inline-start 自己就会镜像：LTR 解析成 left:36%，RTL 解析成 right:36%。
   RTL 只需要把 transform 反过来 —— 锚的是右边缘，得往右推半个身位才回到中心。
   别再补 inset-inline-end：那等于镜像两次，球会被推到 64%+50% 处、整个飞出画面。 */
.live-earth-globe-frame{ position:absolute; inset-block-start:50%; inset-inline-start:36%; transform:translate(-50%,-50%); width:min(118svh,82vw); }
html[dir='rtl'] .live-earth-globe-frame{ transform:translate(50%,-50%); }
.live-earth-stage{ position:relative; width:100%; aspect-ratio:1/1; }
.live-earth-stage canvas{ position:absolute; inset:0; touch-action:pan-y; cursor:grab; }
.live-earth-stage canvas:active{ cursor:grabbing; }
.live-earth-scrim{ position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(to left, rgba(4,16,14,.94) 0%, rgba(4,16,14,.78) 24%, rgba(4,16,14,.28) 44%, rgba(4,16,14,0) 58%); }
html[dir='rtl'] .live-earth-scrim{ background:linear-gradient(to right, rgba(4,16,14,.94) 0%, rgba(4,16,14,.78) 24%, rgba(4,16,14,.28) 44%, rgba(4,16,14,0) 58%); }
/* flex-end 在 RTL 下自己就是左边，不需要再写一条 RTL 覆盖 */
.live-earth-hero{ position:relative; z-index:3; display:none; flex:1; min-height:0; align-items:center; justify-content:flex-end; padding:1.2rem 1.4rem 5.5rem; pointer-events:none; }
.mode-earth .live-earth-hero{ display:flex; }
.mode-earth .live-main{ display:none !important; }
/* 收窄以减少时钟卡里的留白（不动字号）。80px 等宽数字排 08:00:49 是 371px，
   原来卡片 520、内宽 472，多出的 100 来像素全堆在起始侧（RTL 下堆在左边），
   看着像卡片空了一块。
   500 是能收的极限，再窄就要还债：下面那条六列五番栏的列宽跟着缩，
   日出的长名字（jv「Srengenge munggah」、sq「Lindja e diellit」、fr「Lever du soleil」）
   会多折一行，整栏高度顶穿 16:9 的可用高度。实测 480 起 sq 变差、460 起 zh 也崩。
   想再窄，得先解决那条五番栏放不下长名字的老问题（见下方 .p-name 的注记）。 */
.live-earth-copy{ width:min(100%, 500px); display:grid; gap:1rem; pointer-events:auto; align-content:start; }
/* 黑框横排五番（图一横置于图二黑框）— 加大字号与间距，提升直播可读性 */
#earthPrayers{ display:grid !important; grid-template-columns:repeat(6,1fr); gap:.55rem; padding:1rem .9rem; border-radius:18px; border:1px solid rgba(126,231,190,.18); background:linear-gradient(165deg, rgba(10,35,32,.88), rgba(7,26,23,.55)); backdrop-filter:blur(12px); box-shadow:0 8px 24px rgba(0,0,0,.35); }
#earthPrayers .live-prayer-row{ grid-template-columns:1fr !important; justify-items:center; text-align:center; gap:.32rem; padding:.75rem .4rem; border-radius:14px; }
#earthPrayers .live-prayer-row .dot{ width:9px; height:9px; }
/* ⚠️ 已知问题（早于本次改动）：六列的列宽放不下多词的日出名。
   jv「Srengenge munggah」、sq「Lindja e diellit」、fr「Lever du soleil」、
   id/ms「Matahari terbit」、uz「Quyosh chiqishi」、tr 都会折成两行，
   整栏高度 651→676~701，超过 16:9 地球模式的可用高度 663，底部被切。
   ar / en / zh / ru 名字短，看不出来 —— 所以一直没人发现。
   要修得让名字单行放下（缩字号或改列数），两条都会动到直播观感，没有顺手改。 */
#earthPrayers .live-prayer-row .p-name{ font-size:.92rem; font-weight:600; }
#earthPrayers .live-prayer-row .p-time{ font-size:1.05rem; font-weight:700; }
#earthPrayers .live-prayer-row .p-badge{ font-size:.68rem; padding:.2rem .45rem; }
@media (max-width:980px){
  .live-earth-layer{ position:static; inset:auto; }
  .live-earth-globe-frame{ position:static; transform:none; width:min(100%,460px); margin:0 auto; }
  html[dir='rtl'] .live-earth-globe-frame{ transform:none; }
  .live-earth-scrim{ display:none; }
  .live-earth-hero{ padding:1rem 1.1rem; justify-content:center; }
  .live-earth-copy{ width:100%; max-width:none; }
  #earthPrayers{ grid-template-columns:repeat(3,1fr) !important; }
  /* 这里原本写着 .mode-earth .stage{overflow:auto}，但 mode-earth 就挂在 .stage 自己身上，
     后代选择器永远选不中，从来没生效过。也不该生效：stage 是 OBS 抓的那块画布，
     滚动条外面的东西推不出去。竖屏要做的是让内容装得下，不是给它一条逃生通道。 */
}

/* ── 9:16 竖屏的地球模式 ──
   16:9 是「球在一侧、文字在另一侧」，竖屏没有横向余量，改成「球在上、文字压在下」。
   球必须留在绝对定位的背景层：上面那段手机分支会把它放回文档流，
   于是球把表头顶到 460px 处，文字再从底部溢出去 —— TikTok 抓不到，也没法滚。
   这几条的特异度（0,2,0）高于手机分支里的（0,1,0），媒体查询不加特异度，所以稳赢。 */
.layout-9x16 .live-earth-layer{ position:absolute; inset:0; }
/* 这里用物理属性 left，不用 inset-inline-start：竖屏是水平居中，居中没有「行内方向」。
   写 inset-inline-start:50% 的话 RTL 下会解析成 right:50%，再 translate(-50%)
   就把球整个推到画面左外侧去了（x=-475）—— 跟 16:9 那个镜像两次的坑是同一个。 */
.layout-9x16 .live-earth-globe-frame{
  position:absolute; inset-block-start:34%; inset-inline-start:auto; inset-inline-end:auto;
  left:50%; transform:translate(-50%,-50%); width:min(92vw, 52svh); margin:0;
}
html[dir='rtl'] .layout-9x16 .live-earth-globe-frame{ left:50%; transform:translate(-50%,-50%); }
/* 遮罩从下往上压，把底部的文字从球面上托出来 */
.layout-9x16 .live-earth-scrim{
  display:block;
  background:linear-gradient(to top, rgba(4,16,14,.94) 0%, rgba(4,16,14,.82) 26%, rgba(4,16,14,.34) 48%, rgba(4,16,14,0) 66%);
}
.layout-9x16 .live-earth-hero{ align-items:flex-end; justify-content:center; padding:1rem 1.1rem; }
/* 竖屏的时钟更大（1080 宽时 89.6px，排出来约 415px），所以比横屏留宽一档 */
.layout-9x16 .live-earth-copy{ width:min(100%, 520px); max-width:none; }
/* 竖屏这一栏的高度必须跟着视口高度走，不能只按 rem / vw。
   rem 认的是 <html> 的字号，跟 .stage 上那个 22px 无关；vw 认的是宽度 ——
   1080×1920 的画布上正好，换到矮一截的预览窗口或真机竖屏就整栏顶穿表头。
   所以这里把吃高度的几项换成 svh，上限保持 1080×1920 时的原值不变。 */
.layout-9x16 .live-earth-copy{ gap: clamp(.45rem, 1.1svh, 1rem); }
.layout-9x16 .live-earth-copy .live-clock-panel{ padding: clamp(.7rem, 1.6svh, 1.45rem); gap: clamp(.35rem, .95svh, .85rem); }
.layout-9x16 .live-earth-copy .live-clock{ font-size: clamp(2.1rem, 4.7svh, 5.6rem); }
.layout-9x16 .live-earth-copy .live-next-card{ padding: clamp(.6rem, 1.3svh, 1.15rem) 1.2rem; }
.layout-9x16 .live-earth-copy .live-countdown{ font-size: clamp(1.7rem, 3.4svh, 3.9rem); margin: clamp(.25rem,.5svh,.45rem) 0 clamp(.3rem,.7svh,.65rem); }
.layout-9x16 #earthPrayers{ padding: clamp(.45rem, 1.1svh, 1rem) .9rem; gap: clamp(.25rem, .6svh, .55rem); }
/* 行本身继承 .stage 的 22px，行内每个字段都另设了字号，剩下这 22px 只用来撑行盒 ——
   每行白白高出十来像素。锁死 line-height 把它收回来。 */
.layout-9x16 #earthPrayers .live-prayer-row{ padding: clamp(.3rem, .8svh, .75rem) .5rem; line-height:1.2; }
.layout-9x16 .live-earth-copy .live-status-row{ gap:.5rem; font-size:.9rem; }
.layout-9x16 .live-earth-copy .live-next-meta{ margin-top: clamp(.25rem,.55svh,.55rem); }
.layout-9x16 #earthPrayers{ grid-template-columns:1fr !important; }
.layout-9x16 #earthPrayers .live-prayer-row{ grid-template-columns:16px 1fr auto auto !important; justify-items:stretch; text-align:start; }
/* 矮视口的竖屏 —— 真机浏览器、预览窗口，不是 1080×1920 那块推流画布。
   六番竖着排要 310px，加上表头和时钟卡片就装不下，只能往上顶穿表头。
   改成两列三行，高度砍一半，竖屏上照样一眼读得清。
   1920 高的推流画布进不来这个分支，播出去的画面一个像素都不变。
   必须排在上面那条 1fr !important 之后 —— 两边都带 !important、特异度也相同，
   媒体查询不加权，谁写在后面谁赢。 */
@media (max-height: 1200px){
  .layout-9x16 #earthPrayers{ grid-template-columns:repeat(2,1fr) !important; }
}

/* ── Header ── */
.live-header {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "brand center hijri";
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--live-line);
  background: rgba(4,16,14,.62);
  backdrop-filter: blur(14px);
}
.live-brand { grid-area: brand; display: flex; align-items: center; gap: .6rem; }
/* grid 的列在 RTL 下本来就从右往左排，"brand center hijri" 已经把品牌放到了右边。
   再写一条 "hijri center brand" 是镜像两次 —— 品牌又回到左边，跟阿拉伯语读序反着。 */
.live-brand img { width: 32px; height: 32px; }
.live-brand-name { font-weight: 700; font-size: 1.22rem; letter-spacing: -.02em; }
.live-badge {
  display: inline-flex; align-items: center; gap: .38rem;
  padding: .28rem .7rem; border-radius: 999px;
  background: rgba(239,68,68,.14); border: 1px solid rgba(239,68,68,.28);
  color: #fca5a5; font-size: .82rem; font-weight: 700; letter-spacing: .08em;
}
.live-badge .live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 0 rgba(239,68,68,.6); animation: livePulse 1.8s ease-out infinite; }
@keyframes livePulse { 0%{box-shadow:0 0 0 0 rgba(239,68,68,.55)} 70%{box-shadow:0 0 0 10px rgba(239,68,68,0)} 100%{box-shadow:0 0 0 0 rgba(239,68,68,0)} }
.live-engine-tag { font-size: .82rem; color: var(--ink-3); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }

.live-header-center { grid-area: center; display: flex; justify-content: center; }
.live-city-wrap { text-align: center; }
.live-city { font-size: clamp(1.55rem, 2.6vw, 2.35rem); font-weight: 800; line-height: 1; margin: 0; letter-spacing: -.015em; }
.live-city-sub { font-size: .92rem; color: var(--ink-3); display: block; margin-top: .2rem; }

.live-header-right { grid-area: hijri; text-align: end; display:flex; flex-direction:column; justify-content:center; gap:.15rem; }
.live-hijri { font-size: 1.28rem; font-weight: 700; color: var(--brand-2); line-height:1.1; }
.live-greg { font-size: 1rem; color: var(--ink-2); margin-top: 0; }

/* ── Main ── */
.live-main {
  position: relative; z-index: 1;
  flex: 1;
  display: grid;
  gap: 1.2rem;
  padding: 1.2rem 1.4rem;
  min-height: 0;
}

/* 16:9 = 三栏：clock | prayers | side */
.layout-16x9 .live-main {
  grid-template-columns: 1.15fr 1fr 0.52fr;
  align-items: stretch;
}
.layout-9x16 .live-main {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  overflow-y: auto;
  align-content: start;
}

/* ── Clock panel ── */
.live-clock-panel {
  display: flex; flex-direction: column; gap: .85rem;
  padding: 1.45rem;
  border-radius: 20px;
  border: 1px solid var(--live-line);
  background: linear-gradient(165deg, rgba(10,35,32,.88), rgba(7,26,23,.55));
  backdrop-filter: blur(12px);
}
.live-label { font-size: .88rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.live-clock {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(3rem, 6.2vw, 5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 28px rgba(16,185,129,.35);
}
.layout-9x16 .live-clock { font-size: clamp(3.4rem, 12.5vw, 5.6rem); }
.live-tz { font-size: .95rem; color: var(--ink-3); margin-top: -.15rem; }

.live-next-card {
  margin-top: .25rem;
  padding: 1.15rem 1.2rem;
  border-radius: 16px;
  background: rgba(16,185,129,.09);
  border: 1px solid var(--live-line-2);
}
.live-next-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.live-next-kicker { font-size: .85rem; color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.live-next-name { font-size: 1.4rem; font-weight: 700; color: var(--brand-2); }
.live-countdown {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(2.4rem, 5vw, 3.9rem);
  font-weight: 700;
  line-height: 1;
  margin: .45rem 0 .65rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.live-progress { height: 7px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.live-progress-bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand-deep), var(--brand-2)); transition: width .9s linear; }
.live-next-meta { display: flex; justify-content: space-between; gap: .6rem; margin-top: .55rem; font-size: .92rem; color: var(--ink-2); }
.live-next-meta #nextTime { font-variant-numeric: tabular-nums; font-weight: 600; }

.live-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; font-size: .95rem; }
.live-chip { font-size: .92rem; }
.live-msg { color: var(--ink-3); font-size: .92rem; }

/* ── Prayers ── */
.live-prayers {
  display: flex; flex-direction: column; gap: .65rem;
  padding: 1.25rem;
  border-radius: 20px;
  border: 1px solid var(--live-line);
  background: rgba(255,255,255,.025);
  backdrop-filter: blur(12px);
}
.live-prayer-list { display: grid; gap: .38rem; }
.live-prayer-row {
  display: grid;
  grid-template-columns: 16px 1fr auto auto;
  align-items: center;
  gap: .85rem;
  padding: .72rem .85rem;
  border-radius: 14px;
  transition: background .2s, border-color .2s;
  border: 1px solid transparent;
}
.live-prayer-row.is-next { background: rgba(16,185,129,.13); border-color: rgba(126,231,190,.28); }
.live-prayer-row.is-current { background: rgba(255,215,110,.08); border-color: rgba(255,215,110,.22); }
.live-prayer-row .dot { width: 12px; height: 12px; border-radius: 50%; justify-self: center; }
.live-prayer-row .p-name { color: var(--ink-2); font-weight: 500; font-size: 1.08rem; }
.live-prayer-row.is-next .p-name,
.live-prayer-row.is-current .p-name { color: var(--ink); font-weight: 700; }
.live-prayer-row .p-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.28rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.live-prayer-row .p-badge {
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .24rem .6rem; border-radius: 999px; border: 1px solid currentColor; opacity: 0; pointer-events: none;
}
.live-prayer-row.is-next .p-badge.next { opacity: 1; color: var(--brand-2); }
.live-prayer-row.is-current .p-badge.now { opacity: 1; color: #ffd76e; }
.live-prayers-foot { display: flex; justify-content: space-between; gap: .6rem; font-size: .82rem; color: var(--ink-3); border-top: 1px solid var(--live-line); padding-top: .75rem; margin-top: .3rem; }

/* ── Side (16:9 only) ── */
.live-side { display: flex; flex-direction: column; gap: 1rem; }
.layout-9x16 .live-side { display: none; }
.live-side-card {
  padding: 1.1rem 1.15rem; border-radius: 18px;
  border: 1px solid var(--live-line); background: rgba(255,255,255,.03);
}
.live-side-title { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.live-side-big { font-size: 1.85rem; font-weight: 700; margin-top: .3rem; font-variant-numeric: tabular-nums; }
.live-side-sub { font-size: .92rem; color: var(--ink-2); margin-top: .22rem; }
.live-watermark { margin-top: auto; text-align: center; font-size: .88rem; color: var(--ink-3); letter-spacing: .06em; padding: .6rem 0 .1rem; }

/* ── Footer ── */
.live-footer {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .65rem 1.4rem;
  border-top: 1px solid var(--live-line);
  background: rgba(4,16,14,.72);
  backdrop-filter: blur(10px);
  font-size: .84rem; color: var(--ink-3);
}
.live-vert-watermark { display: none; }

/* ── 9:16 tweaks — 城市与双日期同排靠边，减少上下占比 ── */
.layout-9x16 .live-header {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "brand brand" "city dates";
  align-items: center;
  gap: .35rem .9rem;
  padding: .75rem 1.05rem .65rem;
  text-align: start;
}
.layout-9x16 .live-brand { grid-area: brand; justify-content: center; }
.layout-9x16 .live-header-center { grid-area: city; justify-content: flex-start; }
.layout-9x16 .live-header-center .live-city-wrap { text-align: start; }
.layout-9x16 .live-header-right { grid-area: dates; text-align: end; align-items: flex-end; }
/* 城市字号 ≈ 两行日期字号之和，同排时视觉等高。
   下限也跟视口高度挂钩：1080×1920 上 3.2svh 早已超过 2.85rem 的上限、取值不变，
   矮视口上则跟着收，否则表头一家就吃掉 148px，地球模式那一栏再也放不下。 */
.layout-9x16 .live-city { font-size: clamp(1.5rem, 3.2svh, 2.85rem); line-height: 1; }
.layout-9x16 .live-header { padding: clamp(.4rem,.9svh,.75rem) 1.05rem clamp(.35rem,.8svh,.65rem); }
.layout-9x16 .live-brand { gap: clamp(.3rem,.7svh,.6rem); }
.layout-9x16 .live-brand img { width: clamp(22px,2.6svh,32px); height: clamp(22px,2.6svh,32px); }
.layout-9x16 .live-city-sub { font-size: .78rem; margin-top: .12rem; }
.layout-9x16 .live-hijri { font-size: 1.12rem; line-height:1.1; }
.layout-9x16 .live-greg { font-size: .88rem; }
/* RTL 下网格列会自动镜像，城市始终在 inline-start 侧（右），日期在 inline-end 侧（左） */
html[dir='rtl'] .layout-9x16 .live-header { grid-template-areas: "brand brand" "city dates"; }
html[dir='rtl'] .layout-9x16 .live-header-center .live-city-wrap { text-align: start; }
html[dir='rtl'] .layout-9x16 .live-header-right { text-align: end; align-items: flex-start; }
.layout-9x16 .live-footer { font-size: .78rem; padding: .6rem 1rem; }
.layout-9x16 .live-vert-watermark {
  display: block;
  text-align: center;
  font-size: .88rem; color: var(--ink-3); letter-spacing: .14em; text-transform: uppercase;
  padding: .8rem 0 1rem;
}

/* ── Controls (hidden in clean mode) ── */
.live-controls {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
  background: rgba(7,26,23,.96);
  border-top: 1px solid var(--live-line);
  backdrop-filter: blur(14px);
  padding: .7rem 1rem max(.7rem, env(safe-area-inset-bottom));
}
.live-controls[hidden] { display: none !important; }
.live-controls-inner {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; justify-content: center;
}
.lc-field { display: grid; gap: .22rem; font-size: .76rem; color: var(--ink-3); }
.lc-field span { font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .68rem; }
.lc-field input, .lc-field select {
  padding: .48rem .7rem; border-radius: 10px;
  border: 1px solid var(--live-line); background: rgba(255,255,255,.06);
  color: var(--ink); font: inherit; font-size: .88rem; min-width: 10rem;
}
.lc-field input:focus, .lc-field select:focus { outline: none; border-color: var(--brand); background: rgba(16,185,129,.1); }
.lc-field select option { background: var(--bg-2); }
.live-controls-help {
  display: flex; flex-wrap: wrap; gap: .7rem 1.2rem; justify-content: center; align-items: center;
  margin-top: .55rem; font-size: .76rem; color: var(--ink-3);
}
.live-controls-help code { background: rgba(255,255,255,.08); padding: .1rem .35rem; border-radius: 6px; font-family: 'JetBrains Mono', monospace; }
.lc-links a { color: var(--brand-2); text-decoration: none; }
.lc-links a:hover { text-decoration: underline; }

/* toast */
.live-toast {
  position: fixed; left: 50%; bottom: 5.2rem; transform: translateX(-50%); z-index: 40;
  padding: .55rem 1rem; border-radius: 999px;
  background: rgba(16,185,129,.16); border: 1px solid rgba(126,231,190,.32);
  color: var(--brand-2); font-size: .95rem; backdrop-filter: blur(10px);
}
.live-toast[hidden] { display: none; }

/* ── Auto-fit for OBS viewport extremes ── */
@media (max-width: 900px) and (orientation: landscape) {
  .layout-16x9 .live-main { grid-template-columns: 1fr 1fr; }
  .layout-16x9 .live-side { display: none; }
}
@media (max-height: 500px) {
  .live-header { padding: .6rem 1rem; }
  .live-main { padding: .7rem .85rem; gap: .7rem; }
  .live-clock { font-size: 2.4rem; }
  .live-countdown { font-size: 2rem; }
}

/* 固定画幅提示：当用 OBS 设为 1920×1080 / 1080×1920 时，stage 正好充满，无滚动 */
@media (min-width: 1920px) { .layout-16x9 { font-size: 21px; } }
@media (min-width: 1080px) and (max-width: 1080px) and (min-height: 1920px) { .layout-9x16 { font-size: 22px; } }