/* ============================================================
   教室大屏展示页 —— 全程静态，无位移动画
   所有尺寸/间距都由 CSS 变量驱动（变量值来自后台「站点设置」）
   ============================================================ */
body {
  overflow: hidden;
}

.page {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bg);
  padding: calc(var(--pad-top, 40) * var(--u)) calc(var(--pad-right, 96) * var(--u))
    calc(var(--pad-bottom, 40) * var(--u)) calc(var(--pad-left, 96) * var(--u));
}

/* 柔光层：强度可调（0 = 纯色背景） */
.glow-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--glow-opacity, 1);
  background-image: radial-gradient(1200px 820px at 12% 6%, var(--glow-a), transparent 68%),
    radial-gradient(1100px 760px at 88% 94%, var(--glow-b), transparent 70%);
}

/* 极淡的装饰光斑，可开关；放在裁切层里，不会撑大页面尺寸 */
.deco-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.deco {
  position: absolute;
  border-radius: 50%;
  opacity: calc(var(--glow-opacity, 1) * 0.9);
}
.deco-a {
  width: 44vw;
  height: 44vw;
  left: -14vw;
  bottom: -18vw;
  background: radial-gradient(circle, var(--deco-a), transparent 70%);
}
.deco-b {
  width: 38vw;
  height: 38vw;
  right: -12vw;
  top: -14vw;
  background: radial-gradient(circle, var(--deco-b), transparent 70%);
}

.page > .topbar,
.page > .stage,
.page > .footerbar {
  position: relative;
  z-index: 1;
}

/* ------------------------------ 顶栏 ------------------------------ */
.topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(24 * var(--u));
  font-size: calc(var(--topbar-size, 20) * var(--u));
  color: var(--ink-soft);
  letter-spacing: 0.08em;
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  min-width: 0;
}
.brand-class {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.brand-sub:not(:empty)::before {
  content: "·";
  margin-right: 0.55em;
  color: var(--ink-faint);
}
.dateline {
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.dateline .dot {
  width: calc(4 * var(--u));
  height: calc(4 * var(--u));
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
  transform: translateY(-0.25em);
}
.badge {
  padding: 0.1em 0.6em;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78em;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}

/* ------------------------------ 主体 ------------------------------ */
.stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: var(--text-align, center);
  padding-top: calc(var(--gap-topbar, 16) * var(--u));
  padding-bottom: calc(var(--gap-footer, 12) * var(--u));
}

.quote-wrap {
  position: relative;
  width: 100%;
  max-width: calc(var(--quote-max-width, 86) * 1vw);
  padding: 0 calc(var(--mark-pad, 12) * var(--u));
  transition: opacity 0.8s ease;
  text-align: var(--text-align, center);
}
.quote-wrap.is-hidden {
  opacity: 0;
}

.quote-text {
  margin: 0;
  font-family: var(--quote-font);
  font-weight: var(--quote-weight, 500);
  font-size: var(--quote-size-current, calc(var(--quote-size-max, 106) * var(--u)));
  line-height: var(--quote-leading, 1.42);
  letter-spacing: var(--quote-tracking, 0.03em);
  color: var(--ink);
  text-wrap: pretty;
}

.quote-attrib {
  margin: calc(var(--gap-attrib, 44) * var(--u)) 0 0;
  font-family: var(--attrib-font);
  font-size: calc(var(--quote-size-current, 40px) * var(--attrib-ratio, 0.28));
  color: var(--ink-soft);
  letter-spacing: 0.12em;
}
.quote-attrib:empty {
  display: none;
}

/* 装饰引号 */
.mark {
  position: absolute;
  font-family: var(--quote-font);
  color: var(--mark);
  opacity: 0.5;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  font-size: calc(var(--mark-size, 150) * var(--u));
}
.mark-open {
  left: 0;
  top: -0.32em;
}
.mark-close {
  right: 0;
  bottom: -0.62em;
}
@media (max-width: 900px), (max-height: 520px) {
  .mark {
    display: none;
  }
}

/* ------------------------------ 底栏 ------------------------------ */
.footerbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--footer-gap, 44) * var(--u));
  flex-wrap: wrap;
  padding-top: calc(12 * var(--u));
  border-top: 1px solid var(--line);
  font-size: calc(var(--footer-size, 18) * var(--u));
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  text-align: left;
}
.page.no-divider .footerbar {
  border-top-color: transparent;
}
.foot-group {
  display: flex;
  align-items: center;
  gap: calc(var(--footer-gap, 44) * var(--u));
  flex-wrap: wrap;
}
.foot-countdown {
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.foot-item:empty {
  display: none;
}

/* 小屏（手机预览）少量适配 */
@media (max-width: 720px) {
  .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
}