/* ============================================================
   Prodance Team 活動與通告
   跟舊 Google Slides 海報視覺重砌：teal header + 每個活動一條
   pastel band + 底部 pill row。純 CSS，無 build step。
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@400;500;700;900&family=Anton&display=swap');

:root {
  --teal-1: #0f8b8d;
  --teal-2: #1aa07a;
  --ink: #1c1c1c;
  --muted: #6b7280;
  --line: #e2e6ea;
  --paper: #ffffff;
  --shell: #f4f5f7;
  --tbc-bg: #fff4c2;
  --tbc-line: #d9a300;

  --title: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --body: 'Noto Sans HK', -apple-system, 'PingFang HK', 'Microsoft JhengHei', sans-serif;

  --poster-w: 960px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--shell);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---------- toolbar (screen only) ---------- */
.toolbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .7rem 1.1rem;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.toolbar .brand {
  font-family: var(--title); font-size: 1.05rem; letter-spacing: .05em;
  margin-right: auto; color: var(--ink);
}
.toolbar .brand span { color: var(--teal-1); }
.tbtn {
  font-family: var(--body); font-size: .82rem; font-weight: 700;
  padding: .45rem .95rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  transition: all .15s ease;
}
.tbtn:hover { border-color: var(--teal-1); color: var(--teal-1); }
.tbtn.on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- poster shell ---------- */
.stage { padding: 2rem 1rem 4rem; display: flex; justify-content: center; }
.poster {
  width: 100%; max-width: var(--poster-w);
  background: var(--paper);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.12);
}

/* ============================================================
   Apple 式呈現 — 一個活動一屏
   大留白 · 超大 display 字 · 發光主視覺 · 極簡文案
   ============================================================ */

:root {
  --sf: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
        'Helvetica Neue', 'PingFang HK', 'Noto Sans HK', sans-serif;
}

.ap-wrap { width: 100%; }

.ap {
  position: relative;
  min-height: 100svh;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(3.5rem, 9vh, 7rem) clamp(1.25rem, 6vw, 5rem);
  overflow: hidden;
  font-family: var(--sf);
}
.ink-light { color: #f5f5f7; }
.ink-dark  { color: #1d1d1f; }

/* ---------- 字級：Apple 嘅比例 ---------- */
.ap-eyebrow {
  font-size: clamp(.82rem, 1.5vw, 1.06rem);
  font-weight: 600; letter-spacing: .01em;
  opacity: .72; margin-bottom: .5rem;
}
.ap-display {
  margin: 0 0 .55rem;
  font-size: clamp(2.6rem, 7.2vw, 5.6rem);
  font-weight: 700; line-height: 1.06;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.ap-sub {
  margin: 0 0 .35rem;
  font-size: clamp(1.15rem, 2.4vw, 1.85rem);
  font-weight: 600; letter-spacing: -0.01em; line-height: 1.32;
  max-width: 22ch; text-wrap: balance;
}
.ap-date {
  margin: .35rem 0 0;
  font-size: clamp(.94rem, 1.6vw, 1.16rem);
  font-weight: 500; opacity: .82;
}

/* ---------- 發光主視覺（用 logo 生成，唔使等圖）---------- */
.ap-visual {
  width: min(46vw, 380px); aspect-ratio: 1;
  margin-bottom: clamp(1rem, 3vh, 2.4rem);
  display: grid; place-items: center; position: relative;
}
.ap-visual img { width: 100%; height: 100%; object-fit: contain; }

.glowmark { position: absolute; inset: 0; display: grid; place-items: center; }

/* 光暈：慢慢呼吸 + 轉 */
.gm-halo {
  position: absolute; inset: -18%;
  background:
    radial-gradient(closest-side, var(--g), transparent 68%),
    conic-gradient(from 0deg, transparent, var(--g), transparent 42%);
  filter: blur(34px);
  opacity: .62;
  animation: halo 9s ease-in-out infinite, spin 26s linear infinite;
}
@keyframes halo { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: .78; transform: scale(1.06); } }

/* logo 本體：用 mask 填發光漸變 */
.gm-mask {
  position: relative; width: 62%; aspect-ratio: 1;
  -webkit-mask: url('../assets/logo.png') center/contain no-repeat;
          mask: url('../assets/logo.png') center/contain no-repeat;
  background:
    radial-gradient(closest-side at 45% 42%, #fff, var(--g) 46%, color-mix(in srgb, var(--g) 55%, transparent) 78%);
  filter: drop-shadow(0 0 18px var(--g)) drop-shadow(0 0 46px var(--g));
  animation: gmBreathe 7s ease-in-out infinite;
}
@keyframes gmBreathe {
  0%,100% { filter: drop-shadow(0 0 14px var(--g)) drop-shadow(0 0 38px var(--g)); }
  50%     { filter: drop-shadow(0 0 24px var(--g)) drop-shadow(0 0 62px var(--g)); }
}

/* 歌手名 + 老師（scroll 版） */
.ap-artist {
  font-size: clamp(.8rem, 1.5vw, 1rem); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  opacity: .68; margin-top: -.1rem;
}
.ap-tutor {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: .7rem; padding: .32rem .9rem .32rem .32rem;
  border-radius: 999px; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
  font-size: .92rem; font-weight: 600;
}
.ink-dark .ap-tutor { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.1); }
.ap-tutor img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }

/* ---------- CTA：Apple 圓角 pill + 文字連結 ---------- */
.ap-ctas {
  display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center;
  margin-top: clamp(1.1rem, 3vh, 2rem);
}
.ap-cta {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: clamp(.95rem, 1.5vw, 1.08rem); font-weight: 500;
  text-decoration: none; cursor: pointer;
  padding: .72rem 1.5rem; border-radius: 999px;
  transition: transform .25s cubic-bezier(.2,.8,.3,1), background .25s ease, opacity .25s ease;
}
.ap-cta.primary { background: #fff; color: #1d1d1f; }
.ink-dark .ap-cta.primary { background: #1d1d1f; color: #fff; }
.ap-cta:not(.primary) {
  background: transparent; padding: .72rem .4rem;
  color: inherit; opacity: .9;
}
.ap-cta:not(.primary)::after { content: '›'; font-size: 1.15em; line-height: 1; opacity: .8; }
.ap-cta:hover { transform: translateY(-2px); }
.ap-cta.primary:hover { background: #e8e8ea; }
.ap-cta.pending { cursor: default; opacity: .72; }
.ap-cta.pending:hover { transform: none; }
.ap-na {
  margin-left: .5rem; font-size: .66em; font-weight: 700; letter-spacing: .05em;
  padding: .18em .5em; border-radius: 5px;
  background: rgba(255,255,255,.18); border: 1px dashed currentColor;
}
.ap-cta.primary .ap-na { background: rgba(0,0,0,.07); }

/* ---------- 規格 tiles ---------- */
.ap-tiles {
  display: flex; gap: .55rem; flex-wrap: wrap; justify-content: center;
  margin-top: clamp(1.4rem, 4vh, 2.6rem);
}
.ap-tile {
  min-width: 118px;
  padding: .72rem 1.1rem; border-radius: 14px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(14px);
  transition: transform .3s cubic-bezier(.2,.8,.3,1), background .3s ease;
}
.ink-dark .ap-tile { background: rgba(0,0,0,.045); border-color: rgba(0,0,0,.09); }
.ap-tile:hover { transform: translateY(-3px); background: rgba(255,255,255,.16); }
.ink-dark .ap-tile:hover { background: rgba(0,0,0,.075); }
.ap-tile .k { font-size: .72rem; font-weight: 600; opacity: .62; letter-spacing: .04em; }
.ap-tile .v { font-size: 1.02rem; font-weight: 700; margin-top: .12rem; letter-spacing: -.01em; }

/* ---------- 詳情 disclosure ---------- */
.ap-more { margin-top: clamp(1.3rem, 3.5vh, 2.2rem); max-width: 680px; width: 100%; text-align: left; }
.ap-more > summary {
  list-style: none; cursor: pointer; text-align: center;
  font-size: .92rem; font-weight: 500; opacity: .72;
  padding: .5rem; border-radius: 999px;
  transition: opacity .25s ease;
}
.ap-more > summary::-webkit-details-marker { display: none; }
.ap-more > summary::after { content: ' ﹀'; font-size: .85em; }
.ap-more[open] > summary::after { content: ' ﹁'; }
.ap-more > summary:hover { opacity: 1; }
.ap-more-body {
  margin-top: .8rem; padding: 1.15rem 1.35rem;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px);
  animation: moreIn .4s cubic-bezier(.2,.8,.25,1) both;
}
.ink-dark .ap-more-body { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.08); }
@keyframes moreIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.ap-more-body p { margin: 0 0 .6rem; font-size: .88rem; line-height: 1.6; opacity: .9; }
.ap-more-body .specs { margin: 0 0 .6rem; }
.ap-more-body .spec {
  display: flex; gap: .8rem; font-size: .88rem; padding: .4rem 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.ink-dark .ap-more-body .spec { border-color: rgba(0,0,0,.08); }
.ap-more-body .spec .lbl { min-width: 6.5em; font-weight: 600; opacity: .68; }
.ap-more-body .spec .val { flex: 1; }
.ap-more-body .qualify {
  margin: .6rem 0; padding: .7rem .9rem; border-radius: 11px;
  background: rgba(255,255,255,.08); font-size: .85rem; line-height: 1.55;
}
.ink-dark .ap-more-body .qualify { background: rgba(0,0,0,.05); }
.ap-more-body .qt { font-weight: 700; margin-bottom: .15rem; }
.ap-more-body .inc { font-size: .85rem; opacity: .85; margin: .12rem 0; }
.ap-more-body .fine { font-size: .76rem; opacity: .66; margin: .1rem 0; line-height: 1.5; }
.tbcval { color: #ffd45e !important; font-weight: 600; }
.ink-dark .tbcval { color: #8a6200 !important; }

/* 「待補」inline badge */
.need {
  display: inline-block; margin-right: .3em;
  background: rgba(255, 212, 94, .16); border: 1px dashed #ffd45e;
  color: #ffd45e; font-size: .68em; font-weight: 700;
  letter-spacing: .04em; padding: .1em .45em; border-radius: 5px;
  vertical-align: .08em; white-space: nowrap;
}
.ink-dark .need { background: rgba(138,98,0,.1); border-color: #8a6200; color: #8a6200; }

/* ---------- countdown ----------
   ⚠️ One Page 出圖版**唔用**倒數：今日 cap 咗嘅圖，聽日睇「仲有 8 日」就錯。
   下面樣式只服務 scroll 版（即時網頁，倒數先有意義）。 */
.ap-cd {
  position: absolute; top: clamp(1.2rem, 4vh, 2.4rem); right: clamp(1.2rem, 4vw, 3rem);
  font-size: .78rem; font-weight: 600; letter-spacing: .03em;
  padding: .38rem .95rem; border-radius: 999px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(12px);
}
.ink-dark .ap-cd { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.1); }
.ap-cd.soon { background: rgba(255,69,58,.9); border-color: transparent; color: #fff; }
.ap-cd.today { background: #fff; color: #1d1d1f; border-color: transparent; }

/* ---------- 開場 / 收尾 ---------- */
.ap-intro { background: radial-gradient(120% 90% at 50% 0%, #2a2a4e, #0a0a12 60%, #000); color: #f5f5f7; }
.ap-intro .ap-display { font-size: clamp(3.4rem, 12vw, 8rem); letter-spacing: -.04em; }
.ap-chips { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-top: 2rem; }
.ap-chip {
  font-family: var(--sf); font-size: .88rem; font-weight: 500; cursor: pointer;
  padding: .55rem 1.15rem; border-radius: 999px; color: #f5f5f7;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  transition: transform .25s cubic-bezier(.2,.8,.3,1), background .25s ease, box-shadow .25s ease;
}
.ap-chip:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--g) 22%, transparent);
  box-shadow: 0 0 26px color-mix(in srgb, var(--g) 40%, transparent);
}
.ap-scroll {
  position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%);
  font-size: .78rem; opacity: .5; animation: bob 2.4s ease-in-out infinite;
}
.ap-scroll::after { content: ' ﹀'; }
@keyframes bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }

.ap-outro { background: radial-gradient(120% 90% at 50% 100%, #1c2b4a, #0a0a12 62%, #000); }
.ap-logo { height: 30px; margin-top: 2.4rem; filter: invert(1) brightness(1.6); opacity: .8; }
.ap-fine { margin-top: .7rem; font-size: .76rem; opacity: .48; }

/* ---------- 進場動畫（scroll reveal 用） ---------- */
.ap > * { opacity: 0; transform: translateY(22px); }
.ap.in > * {
  opacity: 1; transform: none;
  transition: opacity .8s cubic-bezier(.2,.8,.25,1), transform .8s cubic-bezier(.2,.8,.25,1);
}
.ap.in > *:nth-child(1) { transition-delay: .05s }
.ap.in > *:nth-child(2) { transition-delay: .13s }
.ap.in > *:nth-child(3) { transition-delay: .21s }
.ap.in > *:nth-child(4) { transition-delay: .29s }
.ap.in > *:nth-child(5) { transition-delay: .37s }
.ap.in > *:nth-child(6) { transition-delay: .45s }
.ap.in > *:nth-child(7) { transition-delay: .53s }
.ap.in > *:nth-child(8) { transition-delay: .6s }

@media (max-width: 720px) {
  .ap-visual { width: min(66vw, 260px); }
  .ap-sub { max-width: 90%; }
  .ap-cd { top: .9rem; right: .9rem; font-size: .7rem; }
}

/* ---------- 月曆 / 待補 view 嘅外殼（poster view 唔用）---------- */
.p-head {
  background: #000; color: #fff; text-align: center; padding: 1.05rem 1.4rem 1.15rem;
  font-family: var(--sf);
}
.p-head h1 {
  margin: 0; font-size: clamp(1.35rem, 3.2vw, 2.1rem);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
}
.p-foot {
  background: #111; padding: 1rem 1.4rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.p-foot img { height: 26px; opacity: .95; filter: invert(1) brightness(1.6); }
.p-foot .note { font-size: .72rem; color: #8b939c; text-align: right; }

/* ============================================================
   Save the Date 月曆
   ============================================================ */
.cal-wrap { display: grid; grid-template-columns: 220px 1fr; min-height: 520px; }
.cal-side { background: #9d5c78; color: #fff; padding: 1.8rem 1.3rem; }
.cal-side .std {
  font-family: var(--title); font-weight: 400;
  font-size: 2.5rem; line-height: 1.02; letter-spacing: .02em; margin-bottom: 1.6rem;
}
.cal-side h4 {
  margin: 0 0 .7rem; font-size: .92rem; font-weight: 900;
  border-bottom: 2px solid rgba(255,255,255,.6); padding-bottom: .3rem;
}
.legend { display: grid; gap: .45rem; }
.legend div { display: flex; align-items: center; gap: .55rem; font-size: .8rem; }
.legend i { width: 26px; height: 14px; border-radius: 3px; flex: 0 0 auto; }

.cal-main { background: #fff; padding: 0; }
.cal-dow {
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: #b0708c; color: #fff;
}
.cal-dow span {
  text-align: center; padding: .6rem 0;
  font-family: var(--title); font-size: .88rem; letter-spacing: .08em;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cell {
  min-height: 78px; border-right: 1px solid #e8ebee; border-bottom: 1px solid #e8ebee;
  padding: .35rem .4rem; position: relative;
}
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell.out { background: #f6f7f8; }
.cal-cell .dnum { font-size: .82rem; font-weight: 700; color: #3b4350; }
.cal-cell.out .dnum { color: #b9c0c8; }
.cal-cell .mlabel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font-family: var(--title); font-size: 1.6rem; color: #cdd3da; letter-spacing: .04em;
  pointer-events: none;
}
.chip {
  display: block; margin-top: .22rem;
  font-size: .66rem; font-weight: 700; line-height: 1.25;
  padding: .18rem .35rem; border-radius: 4px; color: #fff;
  overflow: hidden; text-overflow: ellipsis;
}
.chip.tbd { background: repeating-linear-gradient(45deg, var(--c), var(--c) 5px, rgba(255,255,255,.35) 5px, rgba(255,255,255,.35) 10px); }

.cal-tbd {
  padding: 1rem 1.3rem; background: #fbfbfc; border-top: 1px solid var(--line);
}
.cal-tbd h4 { margin: 0 0 .5rem; font-size: .85rem; font-weight: 900; color: var(--muted); }
.cal-tbd .row { display: flex; gap: .5rem; flex-wrap: wrap; }
.cal-tbd .row span {
  font-size: .76rem; font-weight: 700; padding: .3rem .7rem;
  border-radius: 999px; color: #fff;
}

/* ---------- checklist view ---------- */
.todo { padding: 1.6rem 1.8rem 2rem; font-family: var(--sf); }
.todo h2 { margin: 0 0 .3rem; font-size: 1.3rem; font-weight: 900; }
.todo > p { margin: 0 0 1.2rem; font-size: .88rem; color: var(--muted); }
.todo-grp { margin-bottom: 1.3rem; }
.todo-grp h3 {
  margin: 0 0 .5rem; font-size: .95rem; font-weight: 900;
  padding-left: .6rem; border-left: 5px solid var(--accent); color: var(--accent);
}
.todo-grp ul { margin: 0; padding-left: 1.3rem; }
.todo-grp li { font-size: .87rem; margin: .2rem 0; }
.todo-grp li code {
  background: #eef1f4; padding: .05em .4em; border-radius: 4px;
  font-size: .85em; color: #37424f;
}

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  .band { grid-template-columns: 1fr; }
  .band-label { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .5rem; padding: .85rem 1rem .2rem; }
  .band-label .txt { font-size: 1.15rem; }
  .band-label .stamp { margin-top: 0; }
  .band-body { padding: .6rem .8rem .9rem; }
  .block { flex-direction: column; }
  .media { width: 100%; }
  .info h2 { font-size: 1.3rem; }
  .tcard { align-self: flex-start; }
  .std-block { flex-direction: column; gap: .7rem; text-align: center; padding: 1.2rem; }
  .std-right { text-align: center; }
  .band-label { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: .4rem; padding: .8rem 1.1rem; border-right: 0; border-bottom: 1px solid rgba(0,0,0,.08); }
  .band-label .txt { font-size: 1rem; }
  .band-label .stamp { margin-top: 0; }
  
  .band-body { padding: 1.05rem 1.1rem 1rem; }
  .cal-wrap { grid-template-columns: 1fr; }
  .cal-side { padding: 1.2rem }
  .cal-side .std { font-size: 1.9rem; margin-bottom: 1rem; }
  .legend { grid-template-columns: 1fr 1fr; }
  .cal-cell { min-height: 58px; }
  .cal-cell .mlabel { font-size: 1.1rem; }
}

/* ---------- print / screenshot ---------- */
@media print {
  body { background: #fff; }
  .toolbar { display: none; }
  .stage { padding: 0; }
  .poster { max-width: none; box-shadow: none; border-radius: 0; }
  .band, .cta, .p-head, .cal-side, .cal-dow, .chip { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ============================================================
   動態層 — WebGL 背景 · scroll reveal · tilt · countdown
   全部喺 print 時停晒（見最底 @media print）
   ============================================================ */

#bg {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: -1; display: block;
}
body { background: #12132a; }

/* poster 浮喺動態背景上 */
body.view-poster .stage { padding: 0; display: block; }
body.view-poster .poster { max-width: none; box-shadow: none; border-radius: 0; }
body.view-poster #bg { display: none; }        /* 每屏自己有漸變，唔需要 canvas */
body:not(.view-poster) .stage { padding: 3.2rem 1rem 5rem; }

/* scroll-snap：一屏一個活動 */
body.view-poster { scroll-snap-type: y proximity; }
html { scroll-behavior: smooth; }
.poster {
  box-shadow: 0 30px 90px rgba(0,0,0,.45), 0 2px 0 rgba(255,255,255,.06);
}

/* toolbar 玻璃化 */
.toolbar {
  background: rgba(18,19,42,.55);
  border-bottom: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(16px) saturate(1.4);
}
.toolbar .brand { color: #fff; }
.toolbar .brand span { color: #6ee7c7; }
.tbtn {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #cfd4e4;
}
.tbtn:hover { border-color: #6ee7c7; color: #6ee7c7; background: rgba(110,231,199,.1); }
.tbtn.on { background: #fff; border-color: #fff; color: #12132a; }

/* ---------- 標題逐字浮現 ---------- */
.p-head h1 .ch {
  display: inline-block;
  animation: chIn .55s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes chIn {
  from { opacity: 0; transform: translateY(.5em) rotateX(-55deg); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* ---------- scroll reveal ---------- */
.reveal {
  opacity: 0; transform: translateY(30px) scale(.985);
  transition: opacity .75s cubic-bezier(.2,.75,.25,1) var(--d, 0ms),
              transform .75s cubic-bezier(.2,.75,.25,1) var(--d, 0ms);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* band 進場時，左欄字再遲少少 */
.band.in .band-label .txt { animation: labelIn .6s .18s cubic-bezier(.2,.8,.25,1) both; }
@keyframes labelIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

/* ---------- 內容 block：3D tilt + 光澤 ---------- */
.block {
  position: relative;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
}
.block::after {
  content: ''; position: absolute; inset: 0; border-radius: 10px;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255,255,255,.32), transparent 62%);
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.block:hover { box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.block:hover::after { opacity: 1; }
.block > * { transform: translateZ(18px); }
.media { transform: translateZ(34px); }

/* 圖片位 hover 有反應 */
.media.empty { transition: border-color .3s ease, background .3s ease; }
.block:hover .media.empty { border-color: rgba(0,0,0,.45); background: rgba(255,255,255,.6); }

/* ---------- countdown badge ---------- */
.cd {
  margin-top: .7rem; font-size: .74rem; font-weight: 900;
  padding: .2rem .65rem; border-radius: 999px;
  background: rgba(255,255,255,.6); color: #12182a;
  letter-spacing: .02em;
}
.cd.soon  { background: #ff4d6d; color: #fff; animation: pulse 1.9s ease-in-out infinite; }
.cd.today { background: #12182a; color: #fff; animation: pulse 1.2s ease-in-out infinite; }
.cd.past  { opacity: .5; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,77,109,.55); }
  70%      { box-shadow: 0 0 0 10px rgba(255,77,109,0); }
}

/* ---------- 截止報名 pill：呼吸 ---------- */
.deadline {
  position: relative; overflow: hidden;
  animation: dlGlow 2.6s ease-in-out infinite;
}
@keyframes dlGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217,169,46,.5); }
  60%      { box-shadow: 0 0 0 9px rgba(217,169,46,0); }
}
.deadline::before {
  content: ''; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent);
  animation: sweep 3.4s ease-in-out infinite;
}
@keyframes sweep { 0% { left: -60%; } 55%, 100% { left: 130%; } }

/* ---------- pill / group hover ---------- */
.pill, .groups .group, .includes span {
  transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease;
}
.pill:hover, .groups .group:hover, .includes span:hover {
  transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.16);
}

/* ---------- SAVE THE DATE ---------- */
.std-block { position: relative; overflow: hidden; }
.std-block::before {
  content: ''; position: absolute; inset: -50%;
  background: conic-gradient(from 0deg, transparent, rgba(255,255,255,.06), transparent 40%);
  animation: spin 14s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }
.std-block > * { position: relative; }
.std-kicker { animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 0%,100% { opacity: .75; letter-spacing: .12em; } 50% { opacity: 1; letter-spacing: .18em; } }

/* ---------- 月曆 chip ---------- */
.chip { transition: transform .25s cubic-bezier(.2,.8,.3,1); }
.cal-cell:hover .chip { transform: scale(1.06); }

/* ---------- 尊重系統設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .block { transform: none !important; }
  /* 唔加返呢句，開咗減少動態效果嘅用戶會見到成屏空白 */
  .ap > * { opacity: 1 !important; transform: none !important; }
}

/* ---------- print：出返靜態海報 ---------- */
@media print {
  #bg { display: none !important; }
  .ap > * { opacity: 1 !important; transform: none !important; }
  .ap { min-height: auto !important; page-break-after: always; padding: 3rem 2rem !important; }
  .ap-more[open] .ap-more-body, .ap-more-body { display: block !important; }
  body { background: #fff !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .block { transform: none !important; box-shadow: none !important; }
  .block::after, .std-block::before, .deadline::before { display: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .poster { box-shadow: none !important; }
  .stage { padding: 0 !important; }
}

/* ============================================================
   One Page — 一屏睇晒，出圖用
   闊 1080 · 頁首 ~110 · 每條 band ~300 · 頁尾 ~140 · 總高自動
   三欄跟舊 Slides：左類別名 / 中主視覺 / 右資訊
   ============================================================ */

body.view-onepage .stage { padding: 2rem 1rem 4rem; display: block; }
/* ⚠️ 唔可以用 flex + justify-content:center：當 .op 闊過 viewport，
   左半會溢出到碰唔到（scroll 都去唔到）。margin auto 就唔會。 */
.op { margin-left: auto; margin-right: auto; min-width: 0; }

.op {
  width: 1080px; max-width: 100%;
  font-family: var(--sf); color: #f5f5f7;
  background: linear-gradient(180deg, #0c0d1a, #07080f);
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
}

/* ---------- 頁首 ~110px ---------- */
.op-head {
  height: 104px; display: grid; place-items: center;
  padding: 0 2rem; position: relative; overflow: hidden;
  background:
    radial-gradient(120% 200% at 50% -55%, rgba(255,255,255,.13), transparent 58%),
    linear-gradient(180deg, #191922, #0c0c14 62%, #08080e);
}
/* 底部一條細光線，令黑色唔會死實實 */
.op-head::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22) 30%,
              rgba(255,255,255,.22) 70%, transparent);
}
/* 斜向微光，好似打燈 */
.op-head::before {
  content: ''; position: absolute; top: -60%; left: -10%; width: 55%; height: 220%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.055) 45%, transparent 62%);
  transform: rotate(-8deg); pointer-events: none;
}
.op-head > * { position: relative; z-index: 1; }
.op-title {
  margin: 0; font-size: 2.05rem; font-weight: 700;
  letter-spacing: -.03em; line-height: 1.1; text-align: center;
  background: linear-gradient(180deg, #fff, #c8cbd8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- 特別活動 hero banner（發布會）----------
   全闊、cinematic、同下面嘅活動條明顯唔同層次
------------------------------------------------------ */
.op-hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 300px 1fr;
  gap: 1.8rem; align-items: center;
  padding: 1.9rem 2rem;
  background:
    radial-gradient(75% 130% at 22% 50%, color-mix(in srgb, var(--g) 30%, transparent), transparent 62%),
    linear-gradient(100deg, #101a3d, #1b2a5c 42%, #0a1024);
  border-bottom: 1px solid color-mix(in srgb, var(--g) 26%, transparent);
}
/* 頂部一條光帶，標示「呢個係大事」 */
.op-hero::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--g), transparent);
}
/* 斜向星塵 */
.op-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(1.5px 1.5px at 18% 22%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 72% 18%, rgba(255,255,255,.38), transparent),
    radial-gradient(1.5px 1.5px at 88% 62%, rgba(255,255,255,.42), transparent),
    radial-gradient(1.5px 1.5px at 46% 82%, rgba(255,255,255,.3), transparent),
    radial-gradient(1.5px 1.5px at 62% 44%, rgba(255,255,255,.24), transparent);
}
.op-hero > * { position: relative; z-index: 1; }

.op-hero-vis {
  aspect-ratio: 1; display: grid; place-items: center;
  container-type: size;
}
.op-hero-vis img { width: 100%; height: 100%; object-fit: contain; }
.op-hero-vis .glowmark { position: absolute; inset: 0; }

.op-hero-body { min-width: 0; }
.op-hero-tag {
  display: inline-block; margin-bottom: .5rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--g);
  padding: .26rem .8rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--g) 45%, transparent);
  background: color-mix(in srgb, var(--g) 12%, transparent);
}
.op-hero-h {
  margin: 0 0 .3rem;
  font-size: 2.5rem; font-weight: 700; line-height: 1.05; letter-spacing: -.035em;
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--g) 55%, #fff));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.op-hero-sub {
  font-size: 1.08rem; font-weight: 600; letter-spacing: -.01em; opacity: .88;
  margin-bottom: .55rem;
}
.op-hero-when {
  display: inline-block; margin-bottom: .6rem;
  font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em;
  padding: .42rem 1.1rem; border-radius: 999px;
  background: color-mix(in srgb, var(--g) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--g) 42%, transparent);
}
.op-hero-pills { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .4rem; }
.op-hero-cd {
  position: absolute; top: 1.1rem; right: 1.3rem; z-index: 2;
  font-size: .74rem; font-weight: 700; letter-spacing: .03em;
  padding: .32rem .85rem; border-radius: 999px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(10px);
}
.op-hero-cd.soon  { background: #ff453a; border-color: transparent; }
.op-hero-cd.today { background: #fff; color: #12132a; border-color: transparent; }

/* ---------- 活動條 ~300px ---------- */
.op-card {
  display: grid; grid-template-columns: 158px 244px 1fr;
  gap: 1.35rem; align-items: center;
  padding: 1.15rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  position: relative;
}
.op-card::before {                       /* 該活動嘅光暈 */
  content: ''; position: absolute; left: 40px; top: 50%;
  width: 300px; height: 300px; margin-top: -150px; border-radius: 50%;
  background: var(--g); filter: blur(85px); opacity: .17; pointer-events: none;
}
.op-card > * { position: relative; }

/* 左：類別名 */
.op-label { text-align: center; }
.op-label .l {
  font-size: 1.24rem; font-weight: 700; line-height: 1.22;
  letter-spacing: -.015em; color: var(--g);
}
.op-label .op-cd {
  display: inline-block; margin-top: .5rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .02em;
  padding: .22rem .65rem; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
}
.op-label .op-cd.soon  { background: #ff453a; border-color: transparent; }
.op-label .op-cd.today { background: #fff; color: #12132a; border-color: transparent; }

/* 中：主視覺 —— 跟住成條 band 嘅高度 stretch，唔留上下空白 */
.op-vis {
  align-self: stretch;
  min-height: 176px;
  border-radius: 12px; overflow: hidden;
  display: grid; place-items: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  container-type: size;
}
.op-vis img, .op-vis video { width: 100%; height: 100%; object-fit: cover; }
.op-vis .glowmark { position: absolute; inset: 0; }

/* 右：資訊 + 老師頭像 */
.op-body { min-width: 0; display: flex; gap: 1rem; align-items: flex-start; }
.op-info { flex: 1; min-width: 0; }

/* 歌手名：細字喺歌名上面（大細字對比，比舊 Slides「歌名(歌手)」睇得清楚） */
.op-artist {
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--g); margin-bottom: .1rem;
}

/* 老師頭像 —— 舊 Slides 每個活動右邊都有 */
.op-tutor { width: 84px; flex: 0 0 auto; text-align: center; }
.op-tutor img, .op-tutor .ph {
  width: 66px; height: 66px; border-radius: 50%; object-fit: cover;
  display: block; margin: 0 auto .3rem;
  border: 2px solid color-mix(in srgb, var(--g) 55%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--g) 35%, transparent);
}
.op-tutor .ph {
  display: grid; place-items: center;
  background: rgba(255,255,255,.08); color: var(--g);
  font-size: 1.4rem; font-weight: 700; border-style: dashed;
}
.op-tutor .n { font-size: .76rem; font-weight: 700; line-height: 1.2; opacity: .88; }
.op-h {
  margin: 0 0 .2rem;
  font-size: 1.42rem; font-weight: 700; line-height: 1.2; letter-spacing: -.022em;
}
.op-when {
  display: inline-block; margin-bottom: .4rem;
  font-size: .88rem; font-weight: 600;
  padding: .25rem .7rem; border-radius: 999px;
  background: color-mix(in srgb, var(--g) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--g) 30%, transparent);
}

.op-groups { display: flex; gap: .38rem; flex-wrap: wrap; margin-bottom: .4rem; }
.op-group {
  font-size: .76rem; font-weight: 600;
  padding: .2rem .6rem; border-radius: 7px;
  background: rgba(255,255,255,.08); border-left: 3px solid var(--g);
}
.op-group b { color: var(--g); margin-right: .3rem; }

.op-para { margin: 0 0 .35rem; font-size: .765rem; line-height: 1.5; opacity: .8; }

/* specs 橫排，慳高度 */
.op-specs { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin-bottom: .4rem; }
.op-spec { font-size: .8rem; white-space: nowrap; }
.op-spec b { font-weight: 600; opacity: .52; margin-right: .3rem; }

.op-qualify {
  font-size: .72rem; line-height: 1.5; opacity: .78;
  padding: .35rem .6rem; border-radius: 8px; margin-bottom: .4rem;
  background: rgba(255,255,255,.05); border-left: 3px solid var(--g);
}
.op-qualify .qt { font-weight: 700; margin-right: .35rem; opacity: 1; }

.op-pills { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .35rem; }
.op-pill {
  font-size: .79rem; font-weight: 600;
  padding: .3rem .75rem; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1);
}
.op-pill b { font-weight: 600; opacity: .5; margin-right: .35rem; font-size: .88em; }
.op-pill.hot {
  background: linear-gradient(180deg, #ffe89a, #f5cf5e);
  color: #12132a; border-color: transparent; font-weight: 700;
}

.op-inc { font-size: .72rem; opacity: .6; margin-bottom: .3rem; }

/* 條款小字 —— 唔好當佢係 fine print，呢啲係報名前要知嘅嘢
   （早鳥死線 / 年齡計法 / 抽籤日），所以字要讀得到 */
.op-notes {
  margin-top: .5rem;
  padding: .45rem .7rem;
  border-left: 3px solid color-mix(in srgb, var(--g) 55%, transparent);
  background: rgba(255,255,255,.045);
  border-radius: 0 8px 8px 0;
}
.op-notes div { font-size: .8rem; line-height: 1.55; opacity: .88; }
.op-notes div + div { margin-top: .1rem; }

/* ---------- 頁尾 ~140px ---------- */
.op-foot {
  display: grid; grid-template-columns: 158px 1fr auto;
  gap: 1.35rem; align-items: center;
  padding: 1.3rem 1.5rem; background: #000;
}
.op-logo { height: 40px; filter: invert(1) brightness(1.7); opacity: .9; justify-self: center; }
.op-foot-t { font-size: 1.12rem; font-weight: 700; letter-spacing: -.02em; }
.op-foot-d { font-size: .8rem; opacity: .62; margin-top: .1rem; }
.op-foot-u { font-size: .78rem; margin-top: .25rem; opacity: .88; word-break: break-all; }
.op-foot-r { font-size: .7rem; opacity: .45; text-align: right; line-height: 1.5; }

/* 螢幕細過 1080 時等比縮，出圖時照樣 1080 */
@media (max-width: 1140px) {
  .op { width: 100%; }
  .op-hero { grid-template-columns: 200px 1fr; gap: 1.1rem; padding: 1.3rem 1.1rem; }
  .op-hero-h { font-size: 1.8rem; }
  .op-card { grid-template-columns: 120px 190px 1fr; gap: 1rem; padding: .9rem 1rem; }
  .op-label .l { font-size: 1rem; }
  .op-h { font-size: 1.2rem; }
  .op-title { font-size: 1.5rem; }
  .op-head { height: 80px; }
  .op-foot { grid-template-columns: 110px 1fr; padding: 1rem; }
  .op-foot-r { display: none; }
}
@media (max-width: 680px) {
  .op-hero { grid-template-columns: 1fr; text-align: center; }
  .op-hero-vis { max-width: 200px; margin: 0 auto; }
  .op-card { grid-template-columns: 1fr; gap: .7rem; }
  .op-body { flex-direction: row; }
  .op-tutor { width: 70px; }
  .op-vis { aspect-ratio: 16/9; }
  .op-label { text-align: left; }
}

/* ============================================================
   生成式主視覺 — 未有真圖時，每個活動一個唔同嘅發光圖形
   有真圖之後，喺 data.js 填 media.src 就會取代呢層
   ============================================================ */

.glowmark { display: grid; place-items: center; }

/* ── 証書：同心圓獎章 ── */
.gm-ring {
  position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--g) 65%, transparent);
  box-shadow: 0 0 30px color-mix(in srgb, var(--g) 45%, transparent),
        inset 0 0 30px color-mix(in srgb, var(--g) 25%, transparent);
  animation: ringPulse 6s ease-in-out infinite;
}
.gm-ring.r2 { width: 80%; opacity: .45; animation-delay: -3s; }
@keyframes ringPulse { 0%,100% { transform: scale(1); opacity: .8 } 50% { transform: scale(1.05); opacity: 1 } }
.gm-seal {
  position: relative; text-align: center; line-height: 1.05;
  font-family: var(--sf); font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(1.3rem, 4.5cqw, 2.2rem);
  color: var(--g);
  text-shadow: 0 0 22px color-mix(in srgb, var(--g) 70%, transparent);
}

/* ── Solo Battle：兩組對撞 + 閃電 ── */
.gm-vs {
  position: relative; display: flex; align-items: center; gap: .5rem;
  font-family: var(--sf); font-weight: 700; letter-spacing: -.02em;
}
.gm-vs span {
  font-size: clamp(.85rem, 3cqw, 1.25rem);
  padding: .35em .7em; border-radius: 999px;
  background: color-mix(in srgb, var(--g) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--g) 45%, transparent);
  color: #fff;
  animation: vsPush 4s ease-in-out infinite;
}
.gm-vs span:last-child { animation-delay: -2s; }
@keyframes vsPush { 0%,100% { transform: translateX(0) } 50% { transform: translateX(4px) } }
.gm-vs span:first-child { animation-name: vsPushL; }
@keyframes vsPushL { 0%,100% { transform: translateX(0) } 50% { transform: translateX(-4px) } }
.gm-vs i {
  font-style: normal; font-size: clamp(.7rem, 2.2cqw, .95rem);
  opacity: .6; letter-spacing: .06em;
}
.gm-bolt {
  position: absolute; font-size: clamp(2.6rem, 11cqw, 4.6rem);
  filter: drop-shadow(0 0 20px var(--g)) drop-shadow(0 0 48px var(--g));
  animation: boltFlash 3.2s ease-in-out infinite;
}
@keyframes boltFlash {
  0%, 88%, 100% { opacity: .28; transform: scale(1); }
  92%           { opacity: 1;   transform: scale(1.12); }
}

/* ── Comeback：唱片 + 聲波 ── */
.gm-disc {
  position: relative; width: 44%; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(closest-side, #0a0a16 26%, transparent 27%),
    conic-gradient(from 0deg, color-mix(in srgb, var(--g) 85%, transparent), #1a1830, color-mix(in srgb, var(--g) 85%, transparent));
  box-shadow: 0 0 40px color-mix(in srgb, var(--g) 55%, transparent);
  animation: spin 7s linear infinite;
}
.gm-wave {
  position: absolute; width: 58%; aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--g) 55%, transparent);
  animation: waveOut 3.4s ease-out infinite;
}
.gm-wave.w2 { animation-delay: -1.7s; }
@keyframes waveOut {
  0%   { transform: scale(.8); opacity: .75; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* container query 單位（cqw）要有 container */
.op-vis, .ap-visual { container-type: size; }

/* ---------- 出圖模式（?export=1）：乾淨一張圖 ---------- */
body.export { background: #000; }
body.export .toolbar, body.export #bg { display: none !important; }
body.export .stage { padding: 0 !important; display: block !important; }
body.export .op {
  width: 1080px; max-width: none;
  box-shadow: none; border-radius: 0; margin: 0;
}
body.export .reveal, body.export .ap > * { opacity: 1 !important; transform: none !important; }

/* 出圖時強制桌面版尺寸 —— 1080 剛好喺 1140 斷點以下，唔 override 會縮細 */
body.export .op-card { grid-template-columns: 158px 244px 1fr !important; gap: 1.35rem !important; padding: 1.15rem 1.5rem !important; }
body.export .op-hero { grid-template-columns: 300px 1fr !important; gap: 1.8rem !important; padding: 1.9rem 2rem !important; }
body.export .op-hero-h { font-size: 2.5rem !important; }
body.export .op-label .l { font-size: 1.24rem !important; }
body.export .op-h { font-size: 1.42rem !important; }
body.export .op-title { font-size: 2.05rem !important; }
body.export .op-head { height: 104px !important; }
body.export .op-foot { grid-template-columns: 158px 1fr auto !important; padding: 1.3rem 1.5rem !important; }
body.export .op-foot-r { display: block !important; }

/* ---------- 候選歌曲：兩張封面並排 ---------- */
.op-vis.multi {
  display: flex; align-items: center; justify-content: center;
  gap: .45rem; padding: .5rem;
  background: rgba(255,255,255,.04);
}
.op-cand { flex: 1; min-width: 0; text-align: center; }
.op-cand img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 9px; display: block;
  border: 1px solid color-mix(in srgb, var(--g) 40%, transparent);
}
.op-cand .cap {
  margin-top: .28rem; font-size: .62rem; font-weight: 700;
  letter-spacing: .02em; opacity: .8; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.op-or {
  flex: 0 0 auto; font-size: .66rem; font-weight: 700;
  opacity: .5; padding-bottom: .9rem;
}

/* ---------- Save the Date 條（detail 未出嘅活動） ---------- */
.op-std {
  display: grid; grid-template-columns: 158px 1fr auto;
  gap: 1.35rem; align-items: center;
  padding: 2.4rem 1.5rem;
  min-height: 230px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  position: relative; overflow: hidden;
}
body.export .op-std { padding: 2.4rem 1.5rem !important; min-height: 230px !important; }
.op-std::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 140% at 8% 50%, color-mix(in srgb, var(--g) 30%, transparent), transparent 62%),
    linear-gradient(100deg, color-mix(in srgb, var(--g) 14%, transparent), transparent 66%);
}
.op-std > * { position: relative; }

.op-std-label { text-align: center; }
.op-std-label .l {
  font-size: 1.42rem; font-weight: 700; line-height: 1.22;
  letter-spacing: -.015em; color: var(--g);
}

.op-std-mid { min-width: 0; }
.op-std-mid .tag {
  font-family: var(--title);
  font-size: 2.9rem; line-height: .95; letter-spacing: .015em;
  color: #fff; opacity: .95;
}
.op-std-mid .d {
  margin-top: .45rem; font-size: 1.28rem; font-weight: 700; letter-spacing: -.018em;
  color: var(--g);
}
.op-std-mid .sh {
  margin-top: .25rem; font-size: .95rem; font-weight: 600; opacity: .72;
}

.op-std-right { text-align: right; }
.op-std-right .note { font-size: .82rem; font-weight: 600; opacity: .6; }
.op-std-right .op-cd {
  display: inline-block; margin-top: .4rem;
  font-size: .68rem; font-weight: 600;
  padding: .22rem .65rem; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
}
.op-std-right .op-cd.soon  { background: #ff453a; border-color: transparent; }
.op-std-right .op-cd.today { background: #fff; color: #12132a; border-color: transparent; }

body.export .op-std { grid-template-columns: 158px 1fr auto !important; padding: 1.15rem 1.5rem !important; }
@media (max-width: 680px) {
  .op-std { grid-template-columns: 1fr; gap: .5rem; }
  .op-std-label, .op-std-right { text-align: left; }
}

/* Save the Date 條有圖時 */
.op-std.has-vis { grid-template-columns: 158px 132px 1fr auto; }
body.export .op-std.has-vis { grid-template-columns: 158px 132px 1fr auto !important; }
.op-std-vis {
  aspect-ratio: 1; border-radius: 11px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--g) 42%, transparent);
}
.op-std-vis img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 680px) { .op-std.has-vis { grid-template-columns: 1fr; } }

/* Make Dance P.R.O —— slogan 內嘅 acronym */
.pro {
  font-weight: 800; letter-spacing: .04em;
  color: var(--g);
  text-shadow: 0 0 18px color-mix(in srgb, var(--g) 55%, transparent);
}

/* hero 冇主視覺時：純文字置中，似 Apple event banner */
.op-hero.no-vis { grid-template-columns: 1fr; text-align: center; padding: 2.4rem 2rem 2.2rem; }
body.export .op-hero.no-vis { grid-template-columns: 1fr !important; padding: 2.4rem 2rem 2.2rem !important; }
.op-hero.no-vis .op-hero-pills { justify-content: center; }
.op-hero.no-vis .op-notes { text-align: center; }
.op-hero.no-vis::before { background: linear-gradient(90deg, transparent, var(--g), transparent); }
/* 冇 logo 就靠背景光效撐住氣勢 */
.op-hero.no-vis {
  background:
    radial-gradient(60% 120% at 50% 0%, color-mix(in srgb, var(--g) 38%, transparent), transparent 66%),
    linear-gradient(160deg, #101a3d, #1b2a5c 45%, #0a1024);
}

/* 頁尾冇 CTA：只剩 logo 同查詢方式 */
.op-foot.bare { grid-template-columns: 158px 1fr; padding: 1rem 1.5rem; }
body.export .op-foot.bare { grid-template-columns: 158px 1fr !important; padding: 1rem 1.5rem !important; }
.op-foot.bare .op-foot-r { font-size: .78rem; opacity: .5; text-align: right; line-height: 1.4; }

/* 頁尾只剩 logo（同舊 Slides 一樣） */
.op-foot.bare { grid-template-columns: 1fr; padding: .9rem 1.5rem; }
body.export .op-foot.bare { grid-template-columns: 1fr !important; padding: .9rem 1.5rem !important; }
.op-foot.bare .op-logo { justify-self: start; height: 34px; }

/* 資格 block：標題自己一行，資格條件一句過（唔好夾埋 wrap 成兩行） */
.op-qualify .qt { display: block; margin-right: 0; margin-bottom: .18rem; }
.op-qualify { font-size: .7rem; letter-spacing: -.002em; }

/* 資格條件收窄到一行過 */
.op-qualify { font-size: .655rem; letter-spacing: -.008em; padding: .35rem .55rem; }
.op-qualify .qt { font-size: .7rem; }

/* 標題內嘅「(稍後確認)」細字 */
.op-h .sm, .ap-display .sm {
  font-size: .58em; font-weight: 600; opacity: .62;
  letter-spacing: 0; margin-left: .3em; white-space: nowrap;
}
/* 日期時間地點：一行過，大少少 */
.op-when { font-size: 1.06rem; padding: .32rem .95rem; }

/* 頁尾：Team logo 居中（唔再用公司 logo，亦唔再 invert —— 圖本身已係深底版） */
.op-foot.bare {
  grid-template-columns: 1fr; height: 104px;      /* 同 header 一樣高，唔好搶戲 */
  padding: 0 1.5rem; place-items: center;
  background:
    radial-gradient(120% 200% at 50% 160%, rgba(255,255,255,.09), transparent 58%),
    linear-gradient(180deg, #08080e, #0c0c14 45%, #141420);
}
body.export .op-foot.bare { grid-template-columns: 1fr !important; height: 104px !important; padding: 0 1.5rem !important; }
.op-foot.bare .op-logo {
  justify-self: center; height: 70px; width: auto;
  filter: none; opacity: 1;
}
/* 月曆 / scroll view 頁尾 logo 同樣唔好再 invert */
.p-foot img, .ap-logo { filter: none !important; opacity: .95; }

/* ============================================================
   One Page 手機 responsive
   出圖鎖死喺 body.export（永遠 1080 桌面版），所以手機呢邊
   可以自由縮，唔會影響出圖。
   ============================================================ */
@media (max-width: 680px) {
  body.view-onepage .stage { padding: .8rem .6rem 2rem; }
  .op { border-radius: 14px; }

  /* 頁首 / 頁尾 */
  .op-head { height: auto; min-height: 68px; padding: .9rem 1rem; }
  .op-title { font-size: 1.24rem; letter-spacing: -.02em; }
  .op-foot.bare { height: auto; padding: 1.1rem 1rem; }
  .op-foot.bare .op-logo { height: 52px; }

  /* hero */
  .op-hero.no-vis { padding: 1.5rem 1rem 1.4rem; }
  .op-hero-h { font-size: 1.6rem; letter-spacing: -.028em; }
  .op-hero-sub { font-size: .94rem; }
  .op-hero-when { font-size: .9rem; padding: .34rem .85rem; }
  .op-hero-tag { font-size: .64rem; letter-spacing: .12em; }
  .op-hero-cd { top: .7rem; right: .7rem; font-size: .66rem; padding: .24rem .6rem; }

  /* 活動條 */
  .op-card { padding: 1rem .9rem; gap: .8rem; }
  .op-label .l { font-size: 1.08rem; }
  .op-h { font-size: 1.16rem; }
  .op-when { font-size: .92rem; padding: .28rem .75rem; }
  .op-artist { font-size: .7rem; letter-spacing: .1em; }

  /* specs 喺手機唔好 nowrap，否則撐爆 */
  .op-spec { white-space: normal; }
  .op-specs { gap: .2rem .6rem; }

  /* 候選歌兩張封面：唔好硬並排到裁走 */
  .op-vis.multi { gap: .35rem; padding: .4rem; }
  .op-cand .cap { font-size: .58rem; }
  .op-or { font-size: .6rem; padding-bottom: .8rem; }

  /* 老師頭像縮細，同資訊並排 */
  .op-tutor { width: 62px; }
  .op-tutor img, .op-tutor .ph { width: 50px; height: 50px; }
  .op-tutor .n { font-size: .66rem; }

  /* 資格 block */
  .op-qualify { font-size: .68rem; padding: .45rem .6rem; }
  .op-qualify .qt { font-size: .72rem; }

  /* Save the Date 條 */
  .op-std { padding: 1.4rem 1rem; min-height: 0; gap: .7rem; }
  .op-std-mid .tag { font-size: 1.9rem; }
  .op-std-mid .d { font-size: 1.02rem; }
  .op-std-mid .sh { font-size: .85rem; }
  .op-std-label .l { font-size: 1.08rem; }
  .op-std-right { text-align: left; }

  .op-tiles, .op-pills { gap: .35rem; }
  .op-pill { font-size: .74rem; padding: .26rem .65rem; }
  .op-notes div { font-size: .64rem; }
}

/* ── 手機溢出真正元凶：flex/grid item 默認 min-width:auto，
      唔會縮到細過內容 min-content，所以 .op 被內部圖片撐爆。
      逐層放開 min-width 先解決得徹底。── */
@media (max-width: 680px) {
  body.view-onepage .stage { display: block; padding: .7rem .5rem 2rem; }
  .op { width: 100%; max-width: 100%; min-width: 0; }

  .op-head, .op-hero, .op-card, .op-std, .op-foot { min-width: 0; }
  .op-body, .op-info, .op-vis, .op-hero-body, .op-hero-vis,
  .op-std-mid, .op-std-label, .op-std-right { min-width: 0; }

  .op-title, .op-hero-h, .op-h {
    white-space: normal; overflow-wrap: anywhere; hyphens: auto;
  }
  .op-qualify, .op-notes div, .op-specs, .op-para, .op-inc {
    overflow-wrap: anywhere;
  }

  /* 候選歌兩張封面：各佔一半，容許縮 */
  .op-vis.multi { min-width: 0; }
  .op-cand { flex: 1 1 0; min-width: 0; }
  .op-cand img { width: 100%; height: auto; }
}

/* ---------- WhatsApp 文字 view ---------- */
.poster.wa { max-width: 760px; background: #0e1016; font-family: var(--sf); color: #f5f5f7; }
.wa-body { padding: 1.4rem 1.5rem 2rem; }
.wa-hint { margin: 0 0 1.1rem; font-size: .86rem; opacity: .6; line-height: 1.55; }

.wa-card {
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; padding: .9rem 1rem 1rem; margin-bottom: 1rem;
}
.wa-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.wa-t b { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.wa-note { margin-left: .55rem; font-size: .76rem; opacity: .5; }

.wa-copy {
  font-family: var(--sf); font-size: .8rem; font-weight: 600; cursor: pointer;
  padding: .4rem 1rem; border-radius: 999px; white-space: nowrap;
  background: #25d366; color: #06281a; border: 0;
  transition: transform .2s cubic-bezier(.2,.8,.3,1), filter .2s ease;
}
.wa-copy:hover { transform: translateY(-1px); filter: brightness(1.08); }
.wa-copy.sm { padding: .28rem .7rem; font-size: .72rem; }

.wa-text {
  margin: 0; padding: .85rem 1rem; border-radius: 10px;
  background: #0a0c11; border: 1px solid rgba(255,255,255,.07);
  font-family: var(--sf); font-size: .88rem; line-height: 1.65;
  white-space: pre-wrap; word-break: break-word; color: #e8eaf0;
}

.wa-opt {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .55rem .8rem; margin-top: .4rem; border-radius: 9px;
  background: #0a0c11; border: 1px solid rgba(255,255,255,.07);
}
.wa-opt .o { font-size: .86rem; line-height: 1.4; }

@media (max-width: 680px) {
  .wa-body { padding: 1rem .9rem 2rem; }
  .wa-opt { flex-direction: column; align-items: flex-start; gap: .45rem; }
}

/* ---------- 頁尾兩個 logo 並排（跟 WOD 海報做法）---------- */
.op-foot.bare {
  display: flex; align-items: center; justify-content: center;
  gap: 2.4rem;
}
body.export .op-foot.bare { display: flex !important; gap: 2.4rem !important; }
.op-foot.bare .op-logo.brand,
.op-foot.bare .op-logo.team {
  height: 66px; width: auto;               /* 兩個 logo 同一高度 */
  filter: none;
}
.op-foot.bare .op-logo.brand { opacity: .92; }
.op-foot.bare .op-logo.team  { opacity: 1; }
@media (max-width: 680px) {
  .op-foot.bare { gap: 1.5rem; }
  .op-foot.bare .op-logo.brand,
  .op-foot.bare .op-logo.team { height: 48px; }
}

/* ---------- 更正通告 ---------- */
.op-head.corrected { height: auto; padding: 1.1rem 2rem 1.2rem; }
body.export .op-head.corrected { height: auto !important; padding: 1.1rem 2rem 1.2rem !important; }
.op-corr-tag {
  margin-top: .5rem;
  display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .22em;
  padding: .3rem 1.1rem; border-radius: 999px;
  background: #ff453a; color: #fff;
}

/* 原定 → 改為 */
.op-corr {
  display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-bottom: .45rem; font-size: .95rem; font-weight: 700;
}
.op-corr .x {
  color: #ff8d85; text-decoration: line-through; text-decoration-thickness: 2px;
  opacity: .85;
}
.op-corr .arrow { opacity: .5; font-weight: 400; }
.op-corr .ok {
  color: #12132a; background: #ffe89a;
  padding: .16rem .7rem; border-radius: 999px;
}
.op-corr-note { font-size: .76rem; opacity: .6; margin-bottom: .5rem; }

@media (max-width: 680px) {
  .op-corr { font-size: .86rem; gap: .4rem; }
  .op-corr-tag { font-size: .68rem; letter-spacing: .16em; }
}

/* 更正 message 卡：紅邊標示 */
.wa-card.wa-corr { border-color: rgba(255,69,58,.45); background: rgba(255,69,58,.06); }
.wa-card.wa-corr .wa-t b::before { content: '⚠️ '; }

/* 內部邀請卡：藍邊，同對外 message 分開 */
.wa-card.wa-invite { border-color: rgba(124,154,255,.4); background: rgba(124,154,255,.06); }
.wa-card.wa-invite .wa-t b::before { content: '👥 '; }

/* 期數切換 */
.isel {
  font-family: var(--sf); font-size: .82rem; font-weight: 600;
  padding: .42rem .8rem; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.07); color: #cfd4e4;
  border: 1px solid rgba(255,255,255,.16);
  margin-right: auto;
}
.isel:hover { border-color: #6ee7c7; color: #6ee7c7; }
.toolbar .brand { margin-right: .7rem; }

/* 組別維度之間嘅分隔（年齡組 · 曲目組） */
.op-groups .gsep { align-self: center; opacity: .3; font-weight: 700; padding: 0 .1rem; }

/* ---------- 評判團 ---------- */
.op-judges { margin: .7rem 0 .55rem; }
.op-judges .jt {
  font-size: .76rem; font-weight: 700; letter-spacing: .1em;
  color: var(--g); margin-bottom: .4rem;
}
.op-judges .jrow { display: flex; gap: .85rem; flex-wrap: wrap; }
.op-judges .jcell { text-align: center; width: 58px; }
.op-judges img, .op-judges .jph {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
  display: block; margin: 0 auto .22rem;
  border: 2px solid color-mix(in srgb, var(--g) 50%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--g) 30%, transparent);
}
.op-judges .jph {
  display: grid; place-items: center;
  background: rgba(255,255,255,.08); color: var(--g);
  font-size: 1.15rem; font-weight: 800; border-style: dashed;
}
.op-judges .jn { font-size: .7rem; font-weight: 700; opacity: .85; line-height: 1.2; }

@media (max-width: 680px) {
  .op-judges .jrow { gap: .5rem; }
  .op-judges .jcell { width: 46px; }
  .op-judges img, .op-judges .jph { width: 42px; height: 42px; }
  .op-judges .jn { font-size: .62rem; }
}

/* 冇左欄類別名時：KV 大啲，兩欄 */
.op-card.no-label { grid-template-columns: 348px 1fr; }
body.export .op-card.no-label { grid-template-columns: 348px 1fr !important; }
@media (max-width: 1140px) { .op-card.no-label { grid-template-columns: 220px 1fr; } }
@media (max-width: 680px)  { .op-card.no-label { grid-template-columns: 1fr; } }

/* ---------- 主視覺待補（例如封面未有）：清楚標明，唔用其他圖頂住 ---------- */
.op-vis.missing { border: 2px dashed color-mix(in srgb, var(--g) 60%, transparent); background: rgba(255,255,255,.03); }
.op-miss { text-align: center; padding: .8rem; font-size: .82rem; font-weight: 700; line-height: 1.4; color: var(--g); }
.op-miss .need { display: inline-block; margin-bottom: .45rem; }
.ap-visual .op-miss { font-size: 1.1rem; }
/* 生成主視覺：文字款（Foundation / Pre-Elite） */
.gm-word {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 2;
  font-size: 13cqw; font-weight: 900; letter-spacing: .08em; color: var(--g);
  text-shadow: 0 0 18px color-mix(in srgb, var(--g) 70%, transparent);
}
.gm-foundation .gm-mask { opacity: .25; }
/* 分版切換列（One Page，非出圖模式） */
.op-split { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; padding: .6rem 1.5rem; font-size: .78rem; background: rgba(255,214,94,.1); color: #ffd45e; }
.op-split a { color: inherit; text-decoration: none; padding: .15rem .6rem; border-radius: 999px; border: 1px solid rgba(255,214,94,.4); }
.op-split a.on { background: #ffd45e; color: #1a1300; }

/* ============================================================
   Team 2.0 Training band（Oct2026 起，Fai 2026-10-02 設計回饋）
   顏色 / 字體跟官方「2026/27 核心新課程」設計圖：
     KPOP 綠 · Foundation 藍 · Pre-Elite 灰藍 · Grow 青 · Elite 紅
   只會喺 issue 用 layout:'kv' / 'slim' 時出現（.op-kv / .op-slim / .op-t2），
   舊期數嘅 .op-card / .op-hero / .op-std 一粒 pixel 都唔郁。
   ============================================================ */
@font-face {
  font-family: 'PD Anton';
  src: url('../assets/fonts/Anton-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: block;
}
.op-t2 { --disp: 'PD Anton', 'Anton', 'Impact', var(--sf); padding-bottom: 6px; }
.op-t2 .op-head { margin-bottom: 4px; }

/* ---------- KPOP：封面 + 漸變 + 大標題 ---------- */
.op-kv { padding: 12px 24px 8px; position: relative; }
.kv-panel {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 290px; border-radius: 18px;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 18px 50px -18px color-mix(in srgb, var(--c2) 70%, transparent),
              inset 0 0 0 1px rgba(255,255,255,.12);
}
.kv-img { position: absolute; top: 0; right: 0; bottom: 0; left: 40%; z-index: 0; }
.kv-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 綠色由左邊食入相：左邊實色放字，右邊相盡量露出 */
.kv-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, var(--c1) 0%, color-mix(in srgb, var(--c1) 50%, var(--c2)) 30%,
                    color-mix(in srgb, var(--c1) 40%, var(--c2)) 40%,
                    color-mix(in srgb, var(--c2) 72%, transparent) 47%,
                    color-mix(in srgb, var(--c2) 22%, transparent) 58%, transparent 70%),
    linear-gradient(0deg, color-mix(in srgb, var(--c2) 55%, transparent), transparent 34%);
}
/* 斜向光帶 + 細格紋，增加質感 */
.kv-panel::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255,255,255,.16), transparent 30%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px);
  -webkit-mask: linear-gradient(90deg, #000 30%, transparent 60%);
          mask: linear-gradient(90deg, #000 30%, transparent 60%);
}
.kv-text {
  position: relative; z-index: 2;
  width: 56%; padding: 18px 0 17px 28px; color: #fff;
}
.kv-title { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.kv-prog {
  font-family: var(--disp); font-weight: 400;
  font-size: 66px; line-height: .96; letter-spacing: .005em;
  text-shadow: 0 3px 16px rgba(0,0,0,.18);
}
.kv-place {
  font-size: 30px; font-weight: 900; line-height: 1; letter-spacing: .02em;
  padding: 7px 14px 8px; margin-bottom: 4px; border-radius: 10px;
  background: #fff; color: var(--c2);
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
}
.kv-song { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 10px; }
.kv-song .kv-note { font-size: 20px; opacity: .8; }
.kv-song b {
  font-family: var(--disp); font-weight: 400; font-size: 36px; line-height: 1;
  letter-spacing: .03em;
}
.kv-song i {
  font-style: normal; font-size: 13px; font-weight: 800; letter-spacing: .2em;
  padding: 3px 9px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.75);
}
.kv-when {
  display: inline-block; margin-bottom: 8px;
  font-size: 17px; font-weight: 700; letter-spacing: -.01em;
  padding: 6px 15px; border-radius: 999px;
  background: rgba(0,0,0,.24); border: 1px solid rgba(255,255,255,.22);
}
.kv-specs { display: flex; flex-direction: column; gap: 1px; margin-bottom: 8px; }
.kv-specs .sp, .sl-specs .sp { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.kv-specs .sp b {
  display: inline-block; min-width: 46px; margin-right: 6px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; opacity: .78;
}
.kv-pills, .sl-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.kv-pills .pp, .sl-pills .pp {
  font-size: 13px; font-weight: 700; white-space: nowrap;
  padding: 5px 12px; border-radius: 999px;
}
.kv-pills .pp { background: rgba(0,0,0,.24); border: 1px solid rgba(255,255,255,.2); }
.kv-pills .pp b, .sl-pills .pp b { font-weight: 600; opacity: .7; margin-right: 6px; font-size: .9em; }
.kv-pills .pp.hot, .sl-pills .pp.hot {
  background: linear-gradient(180deg, #ffe89a, #f5cf5e); color: #12132a;
  border-color: transparent;
}
/* 老師：玻璃 chip 浮喺相右上角 */
.kv-panel > .tut {
  position: absolute; z-index: 3; top: 14px; right: 14px;
  display: flex; align-items: center; gap: 9px;
  padding: 5px 14px 5px 5px; border-radius: 999px;
  background: rgba(10,12,20,.52); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px); color: #fff;
}
.kv-panel > .tut img, .kv-panel > .tut .tut-ph {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block;
  border: 2px solid var(--c1);
}
.kv-panel > .tut .tut-faces { display: flex; align-items: center; gap: 4px; }
.kv-panel > .tut .tut-n { font-size: 14px; font-weight: 700; }
.kv-panel > .tut.collab { flex-wrap: nowrap; }
.kv-panel > .tut .tut-tag { order: 3; }
/* 條款：相下面，兩欄 */
.kv-notes {
  display: grid; grid-template-columns: 1fr; gap: 2px;   /* 一行一條，全闊，唔 wrap（Fai 2Oct） */
  margin: 8px 4px 0; padding: 7px 14px;
  border-left: 3px solid var(--c1);
  background: rgba(255,255,255,.04); border-radius: 0 10px 10px 0;
}
.kv-notes div, .sl-notes div { font-size: 12.5px; line-height: 1.5; opacity: .86; }
.kv-notes div { white-space: nowrap; }

/* ---------- Foundation / Pre-Elite：精簡橫條 ---------- */
.op-slim {
  display: grid; grid-template-columns: 236px 1fr auto; gap: 20px; align-items: stretch;
  margin: 8px 24px; padding: 9px 18px 9px 9px; position: relative;
  border-radius: 18px;
  background:
    radial-gradient(60% 140% at 0% 50%, color-mix(in srgb, var(--c2) 26%, transparent), transparent 70%),
    linear-gradient(90deg, #12141f, #0d0f18);
  border: 1px solid color-mix(in srgb, var(--c1) 22%, rgba(255,255,255,.06));
}
.sl-block {
  border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--c2) 80%, transparent),
              inset 0 0 0 1px rgba(255,255,255,.12);
  color: #fff; position: relative; overflow: hidden;
}
.sl-block::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.18), transparent 38%);
}
.sl-prog {
  font-family: var(--disp); font-weight: 400;
  font-size: 34px; line-height: 1.02; letter-spacing: .005em;
  text-shadow: 0 2px 10px rgba(0,0,0,.14); position: relative;
}
.sl-place {
  align-self: flex-start; position: relative;
  font-size: 16px; font-weight: 900; letter-spacing: .03em; line-height: 1;
  padding: 5px 10px 6px; border-radius: 7px;
  background: #fff; color: var(--c2);
}
.sl-info { min-width: 0; padding: 4px 0; display: flex; flex-direction: column; justify-content: center; }
.sl-when {
  align-self: flex-start; margin-bottom: 6px;
  font-size: 16px; font-weight: 700; letter-spacing: -.01em;
  padding: 5px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--c2) 30%, transparent);
  border: 1px solid color-mix(in srgb, var(--c1) 45%, transparent);
}
.sl-specs { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-bottom: 7px; }
.sl-specs .sp b { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; color: var(--g); margin-right: 6px; }
.sl-pills .pp { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }
.sl-notes {
  margin-top: 7px; padding: 5px 0 0 12px;
  border-left: 3px solid color-mix(in srgb, var(--c1) 70%, transparent);
}
.sl-notes div { font-size: 12px; line-height: 1.5; }
/* 老師（橫條右邊） */
.op-slim > .tut {
  align-self: center; text-align: center; min-width: 92px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.op-slim > .tut .tut-faces { display: flex; align-items: center; }
.op-slim > .tut img, .op-slim > .tut .tut-ph {
  width: 62px; height: 62px; border-radius: 50%; object-fit: cover; display: block;
  border: 2.5px solid var(--c1);
  box-shadow: 0 0 18px color-mix(in srgb, var(--c1) 35%, transparent);
}
.op-slim > .tut .tut-n { font-size: 13px; font-weight: 700; opacity: .92; white-space: nowrap; }
.op-slim > .tut.collab { flex-direction: row; gap: 14px; padding-right: 6px; }
.op-slim > .tut.collab img, .op-slim > .tut.collab .tut-ph { width: 74px; height: 74px; }
.op-slim > .tut.collab .tut-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.op-slim > .tut.collab .tut-n { font-size: 16px; }
.op-slim > .tut.collab .tut-tag { font-size: 14px; }
/* Collab：兩個頭像中間一個 × 圓章 */
.tut.collab .tut-x {
  position: relative; z-index: 2;
  width: 26px; height: 26px; margin: 0 -9px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 900; line-height: 1;
  background: #fff; color: var(--c2);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.tut .tut-n i { font-style: normal; opacity: .55; margin: 0 2px; }
.tut-tag {
  font-family: var(--disp); font-weight: 400;
  font-size: 12.5px; letter-spacing: .22em; line-height: 1;
  padding: 4px 9px 4px 11px; border-radius: 999px;
  background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}

@media (max-width: 680px) {
  .op-kv { padding: 10px 10px 8px; }
  .kv-text { width: 100%; padding: 16px; }
  .kv-img { left: 0; opacity: .35; }
  .kv-prog { font-size: 44px; }
  .kv-place { font-size: 20px; }
  .kv-specs .sp, .sl-specs .sp { white-space: normal; }
  .kv-notes { grid-template-columns: 1fr; }
  .kv-notes div { white-space: normal; }
  .op-slim { grid-template-columns: 1fr; margin: 8px 10px; padding: 10px; }
  .op-slim > .tut { flex-direction: row; justify-content: flex-start; }
}

/* ============================================================
   單一活動大版面 .op-ft（Oct2026 (2) Pre-Elite Program · (3) 聖誕派對）
   只會喺 layout:'feature' 出現；顏色跟 types[type].tone
   ============================================================ */
.op-ft { padding: 16px 24px 14px; }
.ft-hero {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 20px; padding: 34px 36px 28px; color: #fff;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 22px 60px -22px color-mix(in srgb, var(--c2) 80%, transparent),
              inset 0 0 0 1px rgba(255,255,255,.14);
}
.ft-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255,255,255,.18), transparent 34%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 10px);
}
.ft-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ft-hx, .ft-stats { position: relative; z-index: 1; }
.ft-hx { max-width: 640px; }
.ft-eyebrow {
  display: inline-block; margin-bottom: 10px;
  font-size: 13px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35);
}
.ft-title {
  margin: 0; font-family: var(--disp); font-weight: 400;
  font-size: 92px; line-height: .95; letter-spacing: .005em;
  text-shadow: 0 4px 22px rgba(0,0,0,.18);
}
.ft-tagline { margin-top: 10px; font-size: 22px; font-weight: 800; letter-spacing: .02em; }
.ft-sub { margin-top: 6px; font-size: 16px; font-weight: 600; opacity: .92; }
.ft-when {
  display: inline-block; margin-top: 16px;
  font-size: 19px; font-weight: 700; letter-spacing: -.01em;
  padding: 7px 18px; border-radius: 999px;
  background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.25);
}
.ft-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; }
.ft-stat {
  padding: 14px 18px 13px; border-radius: 14px;
  background: rgba(255,255,255,.95); color: #1b1d27;
  box-shadow: 0 10px 26px -14px rgba(0,0,0,.45);
}
.ft-stat .v {
  font-family: var(--disp); font-weight: 400; font-size: 44px; line-height: 1;
  color: var(--c2); letter-spacing: .01em;
}
.ft-stat .k { margin-top: 6px; font-size: 15px; font-weight: 800; }
.ft-stat .s { margin-top: 2px; font-size: 13px; font-weight: 600; opacity: .62; }

/* 福利 / 時間線兩張卡 */
.ft-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 14px; margin-top: 14px; }
.ft-card {
  padding: 18px 20px; border-radius: 16px;
  background:
    radial-gradient(80% 120% at 0% 0%, color-mix(in srgb, var(--c2) 22%, transparent), transparent 70%),
    linear-gradient(180deg, #13151f, #0e1018);
  border: 1px solid color-mix(in srgb, var(--c1) 24%, rgba(255,255,255,.06));
}
.ft-ct {
  font-family: var(--disp); font-weight: 400; font-size: 24px; letter-spacing: .02em;
  color: var(--g); margin-bottom: 10px;
}
.ft-list { margin: 0; padding: 0; list-style: none; }
.ft-list li {
  position: relative; padding: 7px 0 7px 30px; font-size: 15px; font-weight: 600; line-height: 1.4;
  border-top: 1px solid rgba(255,255,255,.06);
}
.ft-list li:first-child { border-top: 0; }
.ft-list li::before {
  content: '✓'; position: absolute; left: 0; top: 7px;
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, var(--c1), var(--c2));
}
.ft-tl { position: relative; }
.ft-step { display: grid; grid-template-columns: 100px 1fr; gap: 14px; position: relative; padding: 0 0 12px; }
.ft-step:last-child { padding-bottom: 0; }
.ft-step .w {
  font-size: 13.5px; font-weight: 800; color: #fff; text-align: right; padding-top: 1px; white-space: nowrap;
}
.ft-step .b { position: relative; padding-left: 18px; border-left: 2px solid color-mix(in srgb, var(--c1) 45%, transparent); padding-bottom: 2px; }
.ft-step:last-child .b { border-left-color: transparent; }
.ft-step .b::before {
  content: ''; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--c1); box-shadow: 0 0 0 3px #10121b, 0 0 12px color-mix(in srgb, var(--c1) 60%, transparent);
}
.ft-step .h { font-size: 15px; font-weight: 800; line-height: 1.3; }
.ft-step .s { font-size: 12.5px; opacity: .7; line-height: 1.45; margin-top: 2px; }

/* 亮點（聖誕：交換禮物 / 食嘢 / dress code） */
.ft-hl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.ft-hl-i {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 16px;
  background:
    radial-gradient(90% 140% at 0% 50%, color-mix(in srgb, var(--c2) 26%, transparent), transparent 70%),
    linear-gradient(180deg, #13151f, #0e1018);
  border: 1px solid color-mix(in srgb, var(--c1) 26%, rgba(255,255,255,.06));
}
.ft-hl-i .i { font-size: 30px; line-height: 1; }
.ft-hl-i .t { font-size: 19px; font-weight: 800; }

.ft-foot { display: flex; align-items: center; gap: 16px; margin-top: 14px; padding: 0 4px; }
.ft-fl { flex: 1; min-width: 0; }
.ft-pills .pp { font-size: 14px; padding: 6px 14px; }
.ft-notes { margin-top: 9px; }
.ft-notes div { font-size: 13px; }

/* ---- 裝飾：Pre-Elite 同心圓 + 大字水印 ---- */
.deco-rings .ft-deco {
  background:
    radial-gradient(circle at 88% 30%, transparent 0 88px, rgba(255,255,255,.16) 89px 91px, transparent 92px 150px,
                    rgba(255,255,255,.11) 151px 153px, transparent 154px 220px, rgba(255,255,255,.07) 221px 223px, transparent 224px);
}
.deco-rings .ft-deco::before {
  content: '★'; position: absolute; right: 166px; top: 74px;
  font-size: 64px; line-height: 1; color: rgba(255,255,255,.9);
  text-shadow: 0 0 30px rgba(255,255,255,.55);
}

/* ---- 裝飾：聖誕 雪 + 白色禮物盒（紅絲帶）---- */
.deco-gift .ft-deco {
  background:
    radial-gradient(3px 3px at 62% 14%, rgba(255,255,255,.9), transparent),
    radial-gradient(2px 2px at 70% 52%, rgba(255,255,255,.8), transparent),
    radial-gradient(2.5px 2.5px at 56% 40%, rgba(255,255,255,.6), transparent),
    radial-gradient(2px 2px at 95% 50%, rgba(255,255,255,.85), transparent),
    radial-gradient(2px 2px at 98% 12%, rgba(255,255,255,.8), transparent),
    radial-gradient(2.5px 2.5px at 74% 8%, rgba(255,255,255,.75), transparent),
    radial-gradient(2px 2px at 52% 6%, rgba(255,255,255,.7), transparent),
    radial-gradient(2px 2px at 40% 18%, rgba(255,255,255,.5), transparent),
    radial-gradient(2px 2px at 84% 46%, rgba(255,255,255,.7), transparent);
}
/* 盒身 */
.deco-gift .ft-deco::before {
  content: ''; position: absolute; right: 74px; top: 104px; width: 168px; height: 112px;
  border-radius: 6px 6px 10px 10px;
  background: linear-gradient(90deg, transparent 71px, #C8202E 71px 97px, transparent 97px),
              linear-gradient(180deg, #ffffff, #f3e9e9);
  box-shadow: 0 18px 30px -12px rgba(70,0,0,.55);
}
/* 盒蓋 */
.deco-gift .ft-deco::after {
  content: ''; position: absolute; right: 64px; top: 76px; width: 188px; height: 34px;
  border-radius: 7px;
  background: linear-gradient(90deg, transparent 81px, #C8202E 81px 107px, transparent 107px), #fff;
  box-shadow: 0 6px 12px -4px rgba(70,0,0,.4);
}
/* 蝴蝶結 */
.deco-gift .ft-hero::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  right: 108px; top: 34px; width: 120px; height: 46px;
  background:
    radial-gradient(circle at 50% 70%, #9E1622 0 11px, transparent 12px),
    radial-gradient(ellipse 30px 21px at 27% 62%, transparent 0 9px, #C8202E 10px 29px, transparent 30px),
    radial-gradient(ellipse 30px 21px at 73% 62%, transparent 0 9px, #C8202E 10px 29px, transparent 30px);
  filter: drop-shadow(0 3px 5px rgba(60,0,0,.35));
}
.deco-gift .ft-stat .v { color: #B22A2A; }

@media (max-width: 680px) {
  .op-ft { padding: 10px; }
  .ft-hero { padding: 22px 18px; }
  .ft-title { font-size: 54px; }
  .ft-stats, .ft-grid, .ft-hl { grid-template-columns: 1fr; }
  .ft-step { grid-template-columns: 80px 1fr; }
}

/* 兩個 .op-ft 大版面同一張圖（Oct2026 (2) Pre-Elite Program + 聖誕派對）→ 收緊，控制喺 1.6 以內 */
.ft-multi .op-ft { padding: 12px 24px 6px; }
.ft-multi .op-ft + .op-ft { padding-top: 14px; }
.ft-multi .ft-hero { padding: 26px 32px 22px; }
.ft-multi .ft-eyebrow { margin-bottom: 8px; }
.ft-multi .ft-title { font-size: 82px; }
.ft-multi .ft-tagline { margin-top: 8px; font-size: 20px; }
.ft-multi .ft-when { margin-top: 12px; }
.ft-multi .ft-stats { margin-top: 18px; }
.ft-multi .ft-stat { padding: 11px 16px 10px; }
.ft-multi .ft-stat .v { font-size: 38px; }
.ft-multi .ft-grid, .ft-multi .ft-hl { margin-top: 10px; }
.ft-multi .ft-card { padding: 13px 18px; }
.ft-multi .ft-ct { font-size: 22px; margin-bottom: 6px; }
.ft-multi .ft-list li { padding: 5px 0 5px 30px; font-size: 14.5px; }
.ft-multi .ft-list li::before { top: 5px; }
.ft-multi .ft-step { padding-bottom: 8px; }
.ft-multi .ft-hl-i { padding: 12px 16px; }
.ft-multi .ft-foot { margin-top: 10px; }
.ft-multi .ft-notes { margin-top: 7px; }
.ft-multi .deco-gift .ft-deco::before { top: 92px; }
.ft-multi .deco-gift .ft-deco::after { top: 64px; }
.ft-multi .deco-gift .ft-hero::before { top: 22px; }
.ft-multi .deco-rings .ft-deco::before { top: 62px; }

/* 小字補充（Fai 2Oct：Assessment Showcase「無 Program 都可以單獨報名」）—— 同 caption 一樣低調 */
.ft-stat .f { margin-top: 1px; font-size: 12px; font-weight: 600; opacity: .5; }
.ft-step .f { font-size: 11.5px; opacity: .5; line-height: 1.4; margin-top: 1px; }

/* ---------- Program 外框 + 段落標題（Fai 2Oct 23:40：Program 同 Training 要睇得出係兩舊嘢）----------
   只喺 issue 用 frame / sectionHead 先出現 */
.op-sec-tag {
  display: inline-block; flex: 0 0 auto;
  font-family: var(--disp); font-weight: 400; font-size: 17px; letter-spacing: .26em; line-height: 1;
  padding: 7px 12px 7px 16px; border-radius: 999px; color: #fff;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--c2) 80%, transparent), inset 0 0 0 1px rgba(255,255,255,.25);
}
.op-ft.framed {
  position: relative;
  margin: 22px 16px 6px; padding: 24px 10px 14px;
  border-radius: 26px;
  border: 1.5px solid color-mix(in srgb, var(--c1) 55%, transparent);
  background:
    radial-gradient(70% 50% at 50% 0%, color-mix(in srgb, var(--c1) 12%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(149,161,178,.07), rgba(149,161,178,.025));
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.8);
}
.ft-frame-tag { position: absolute; top: -16px; left: 28px; z-index: 2; }

.op-sec {
  display: flex; align-items: center; gap: 14px;
  margin: 30px 24px 2px; padding: 0 2px;
}
.op-sec-tx { flex: 0 0 auto; }
.op-sec-t {
  font-family: var(--disp); font-weight: 400; font-size: 30px; line-height: 1.05; letter-spacing: .01em;
  color: #fff;
}
.op-sec-s { margin-top: 3px; font-size: 13.5px; font-weight: 700; color: var(--g); letter-spacing: .02em; }
.op-sec-line {
  flex: 1; height: 2px; border-radius: 2px; align-self: center;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c1) 70%, transparent), transparent);
}
@media (max-width: 680px) {
  .op-ft.framed { margin: 18px 8px 4px; padding: 20px 4px 10px; }
  .op-sec { margin: 26px 10px 4px; }
  .op-sec-t { font-size: 24px; }
}

/* ---------- 男仔 Special Training（Fai 3Oct）：只限男仔 pill + 外借場地突出顯示 + 冇相老師 placeholder ---------- */
.op-slim .sl-flag { font-size: 15px; padding: 5px 9px 6px; }
.op-slim .sl-place + .sl-flag { margin-top: -2px; }
.sl-venue {
  align-self: flex-start; display: flex; align-items: center; gap: 9px;
  margin: 0 0 8px; padding: 2px 0 0 2px;
  font-size: 17px; font-weight: 800; letter-spacing: -.005em; line-height: 1.2;
}
.sl-venue b {
  flex: none; font-size: 12px; font-weight: 900; letter-spacing: .08em; line-height: 1;
  padding: 4px 7px 5px; border-radius: 6px;
  background: var(--c1); color: #1b1006;
}
.sl-venue span { color: #fff; border-bottom: 2px solid color-mix(in srgb, var(--c1) 70%, transparent); padding-bottom: 1px; }
.op-slim > .tut .tut-ph {
  display: grid; place-items: center; box-sizing: border-box;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  color: #fff; font-size: 27px; font-weight: 900; line-height: 1;
  text-shadow: 0 1px 6px rgba(0,0,0,.2);
}
.sl-prog .zh { font-family: inherit; font-weight: 900; font-size: .86em; letter-spacing: .04em; }
/* Feature 卡內 pill（Pre-Elite Program「逢星期日」卡：每堂 💎 x1，Fai 3Oct） */
.ft-stat .pl {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 7px;
  font-size: 15px; font-weight: 800; line-height: 1; padding: 5px 12px 6px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--c2) 18%, #fff); color: #1b1d27;
  border: 1px solid color-mix(in srgb, var(--c2) 38%, transparent);
}
.ft-stat .pl b { font-weight: 700; color: var(--c2); }

/* ============================================================
   地區分組（Kelsey 3Oct）：只限 event 有 region 嘅頁（.op-regions，即 2026-10-1），其他期數唔受影響
   ============================================================ */
.op-reg { display: grid; grid-template-columns: 50px 1fr; gap: 0; margin: 0 0 0 18px; position: relative; }
.op-reg-lab {
  margin: 12px 0 8px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.16);
}
.op-reg-lab span {
  writing-mode: vertical-rl; text-orientation: upright;
  font-size: 30px; font-weight: 900; letter-spacing: .28em; line-height: 1; color: #fff;
  margin-bottom: -.28em;   /* 抵銷最後一隻字嘅 letter-spacing，令視覺置中 */
}
.op-reg-lab.long span { font-size: 21px; letter-spacing: .14em; margin-bottom: -.14em; }
.op-reg-body { min-width: 0; }
.op-reg-body .op-kv { padding-left: 12px; }
.op-reg-body .op-slim { margin-left: 12px; }
.op-reg-body > .op-slim:first-child { margin-top: 12px; }
.op-reg-div {
  height: 1px; margin: 12px 24px 4px 18px;
  background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.34) 20%, rgba(255,255,255,.34) 80%, rgba(255,255,255,.04));
}
.op-regions .op-slim { grid-template-columns: 188px 1fr auto; gap: 18px; }
.op-regions .kv-text { padding-top: 14px; padding-bottom: 13px; }
.op-regions .kv-song { margin: 4px 0 8px; }
/* 「第1期」跟日期 */
.sp-term {
  align-self: center; justify-self: start;
  font-size: 14px; font-weight: 900; line-height: 1; letter-spacing: .02em; white-space: nowrap;
  padding: 6px 10px 7px; border-radius: 8px;
  background: #fff; color: var(--c2);
}
.kv-specs:has(.sp-term) { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; align-items: center; }
.kv-specs:has(.sp-term) .sp-term { grid-row: 1 / span 8; }
.kv-specs:has(.sp-term) .sp { grid-column: 2; }
.sl-specs:has(.sp-term) { align-items: center; column-gap: 10px; }
/* 細字放大（手機睇得清楚啲） */
.op-regions .kv-notes div, .op-regions .sl-notes div { font-size: 15px; line-height: 1.5; opacity: .9; }
.op-regions .kv-specs .sp, .op-regions .sl-specs .sp { font-size: 16px; }
.op-regions .kv-specs .sp b, .op-regions .sl-specs .sp b { font-size: 13px; }
.op-regions .kv-pills .pp, .op-regions .sl-pills .pp { font-size: 14.5px; padding: 5px 13px; }
.op-regions .sl-when { font-size: 17px; }
.op-regions .op-slim > .tut .tut-n { font-size: 15px; }
.op-regions .kv-panel > .tut .tut-n { font-size: 15px; }
/* KPOP 老師 chip 放日期右邊（Kelsey 3Oct，tutorPos:'dates'） */
.kv-daterow { display: flex; align-items: center; gap: 22px; width: max-content; margin-bottom: 8px; }
.kv-daterow .kv-specs { margin-bottom: 0; }
.kv-daterow > .tut {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 5px 16px 5px 5px; border-radius: 999px;
  background: rgba(10,12,20,.5); border: 1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(8px); color: #fff;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.35);
}
.kv-daterow > .tut .tut-faces { display: flex; align-items: center; }
.kv-daterow > .tut img, .kv-daterow > .tut .tut-ph {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover; display: block;
  border: 2px solid var(--c1);
}
.kv-daterow > .tut .tut-n { font-size: 16px; font-weight: 800; white-space: nowrap; }
/* KPOP 老師位置選項（Fai 3Oct 13:47）—— 只喺 ev.tutorPos 指明時生效 */
.kv-panel > .tut.pos-photoLeft { right: auto; left: calc(40% + 18px); top: 16px; }
.kv-panel > .tut.pos-photoBL { top: auto; right: auto; left: calc(40% + 18px); bottom: 16px; }
.kv-whenrow { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; width: max-content; }
.kv-whenrow .kv-when { margin-bottom: 0; }
.kv-whenrow > .tut.tut-line { display: flex; align-items: center; gap: 9px; color: #fff; }
.kv-whenrow > .tut.tut-line .tut-faces { display: flex; }
.kv-whenrow > .tut.tut-line img, .kv-whenrow > .tut.tut-line .tut-ph {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block;
  border: 2.5px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.kv-whenrow > .tut.tut-line .tut-n { font-size: 16px; font-weight: 800; white-space: nowrap; text-shadow: 0 1px 6px rgba(0,0,0,.25); }
/* 方案 B 加底（Fai 3Oct 13:55）：同時間行 pill 一樣嘅半透明深底，深色相（CRASH）上都睇得清 */
.kv-whenrow > .tut.tut-line {
  padding: 3px 15px 3px 3px; border-radius: 999px;
  background: rgba(0,0,0,.26); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
}
.kv-whenrow > .tut.tut-line img { width: 36px; height: 36px; border-width: 2px; }
/* 地區分隔線加粗、轉白（Fai 3Oct 14:16：手機都睇得清） */
.op-reg-div {
  height: 3px; border-radius: 2px; margin: 14px 24px 6px 18px;
  background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,.92) 12%, rgba(255,255,255,.92) 88%, rgba(255,255,255,.35));
}
/* ---------- 10-2 Kelsey 3Oct 21:45：標題一行、23Jan 2027(Sat)、highlight pill、卡片靠左 ---------- */
.ft-hx.one { max-width: none; }
.ft-title.one { white-space: nowrap; font-size: 84px; }
.ft-stat .v .v-sm { font-size: .5em; letter-spacing: .02em; margin-left: 4px; }
.ft-stat .pl.hot {
  background: linear-gradient(180deg, #ffe89a, #f5cf5e); color: #12132a;
  border-color: transparent; box-shadow: 0 4px 12px -4px rgba(0,0,0,.25);
}
.ft-hx.one ~ .ft-stats .ft-stat { text-align: left; padding-left: 16px; }
.ft-stat .v .v-sm { margin-left: 8px; }
.ft-stat .pl.hot { font-size: 13.5px; white-space: nowrap; letter-spacing: -.01em; padding: 6px 11px 6px 10px; }
/* 老師未定（tutor.tbc，Nov2026 起草稿期數）：KPOP 時間行 chip 冇相 → 「?」圓形頭像（舊期數全部有相，唔受影響） */
.kv-whenrow > .tut.tut-line .tut-ph {
  display: grid; place-items: center; box-sizing: border-box; width: 36px; height: 36px; border-width: 2px;
  background: rgba(255,255,255,.2); color: #fff; font-size: 19px; font-weight: 900; line-height: 1;
}
/* 預計出街日 chip（toolbar，只限有 releaseDate 嘅草稿期數） */
.relchip { font-size: 12px; font-weight: 700; color: #ffd45e; white-space: nowrap; padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(255,212,94,.4); }
body.export .relchip { display: none; }