/* ---------- home: two compact modules with animated scenes + arrows only ---------- */
.home-wrap { max-width: 1180px; margin: 0 auto; min-height: calc(100vh - 150px); display: flex; flex-direction: column; justify-content: center; }
.home { display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); gap: 20px; align-items: center; }
.portal { position: relative; display: block; overflow: hidden; border-radius: 20px; border: 1px solid #6b3a40; background: radial-gradient(ellipse at 50% 0%, #3a1a26, #150d13 70%); color: var(--text); text-decoration: none; height: clamp(360px, 56vh, 480px); transition: transform .25s, box-shadow .25s, border-color .25s; }
.portal:hover, .portal:focus-visible { border-color: var(--gold-2); transform: translateY(-4px); box-shadow: 0 26px 60px #000b, 0 0 0 1px #eec48655, 0 0 60px #c02a3e33; }
.portal .art { position: absolute; inset: 0 0 96px 0; }
.portal .art svg { display: block; width: 100%; height: 100%; }
.portal .cap { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; padding: 16px 22px; border-top: 1px solid #ffffff12; background: linear-gradient(0deg, #0d080bf2, #0d080b99); display: flex; align-items: center; gap: 16px; }
.portal .cap h2 { font-size: calc(28px * var(--fs)); letter-spacing: 6px; margin: 0; color: #fff1df; text-shadow: 0 0 24px #c02a3e88; white-space: nowrap; }
.portal .cap p { margin: 2px 0 0; color: var(--muted); font-size: calc(12px * var(--fs)); letter-spacing: 1px; }
.portal .cap .cur { margin-top: 4px; font-size: calc(12px * var(--fs)); color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.portal .go { margin-left: auto; font-size: calc(13px * var(--fs)); color: var(--gold); border: 1px solid #eec48666; border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.arrows { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 28px; }
.arrow-btn { position: relative; width: 104px; height: 104px; border-radius: 50%; padding: 0; display: grid; place-items: center; border: 1px solid #eec48699; background: radial-gradient(circle at 35% 30%, #3a2430, #1a1016); box-shadow: 0 0 0 6px #eec4860d, 0 0 38px #c02a3e33; }
.arrow-btn svg { width: 60px; height: 60px; }
.arrow-btn:hover:not(:disabled) { background: radial-gradient(circle at 35% 30%, #4a2c38, #211218); box-shadow: 0 0 0 8px #eec4861a, 0 0 48px #eec48655; }
.arrow-btn:disabled { opacity: .35; filter: grayscale(.6); }
.arrow-btn .tip { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: calc(12px * var(--fs)); background: #231820; border: 1px solid var(--line-2); padding: 3px 9px; border-radius: 6px; color: var(--text); opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 5; }
.arrow-btn:hover .tip, .arrow-btn:focus-visible .tip { opacity: 1; }
.arrow-btn.flow svg path.flow { stroke-dasharray: 6 8; animation: flow 1.2s linear infinite; }
.arrow-btn.flow::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid #eec48655; animation: halo 2.4s ease-out infinite; }
@keyframes halo { from { transform: scale(.92); opacity: .9; } to { transform: scale(1.25); opacity: 0; } }
@keyframes flow { to { stroke-dashoffset: -28; } }
/* home photographs: motion happens on the photo itself (slow push-in/pan, light sweep, grading) — no illustrated figures */
.portal .art { overflow: hidden; background: #140c12; }
.photo-img { position: absolute; inset: -3%; background-size: cover; background-position: center; filter: saturate(.78) contrast(1.06) brightness(.86); animation: kenburns-a 26s ease-in-out infinite alternate; will-change: transform; transition: filter .6s; }
.photo-img.b { animation-name: kenburns-b; animation-duration: 30s; background-position: 45% 40%; }
@keyframes kenburns-a { from { transform: scale(1.03) translate(1%, 0.5%); } to { transform: scale(1.14) translate(-2.5%, -2%); } }
@keyframes kenburns-b { from { transform: scale(1.12) translate(-2%, -1.5%); } to { transform: scale(1.02) translate(1.5%, 1%); } }
.photo-light { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 232, 196, .16) 48%, rgba(255, 232, 196, .05) 54%, transparent 62%); background-size: 260% 100%; mix-blend-mode: screen; animation: lightsweep 11s ease-in-out infinite; }
@keyframes lightsweep { 0% { background-position: 120% 0; } 55%, 100% { background-position: -40% 0; } }
.photo-grade { position: absolute; inset: 0; background:
  radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(10, 5, 8, .55) 100%),
  linear-gradient(180deg, rgba(60, 12, 24, .10) 0%, rgba(20, 8, 14, .25) 55%, rgba(13, 8, 11, .92) 100%),
  linear-gradient(0deg, rgba(150, 28, 48, .16), rgba(150, 28, 48, .16)); }
.portal:hover .photo-img, .portal:focus-visible .photo-img { filter: saturate(.95) contrast(1.05) brightness(.98); animation-duration: 12s; }
.photo-credit { text-align: center; font-size: max(12px, calc(11px * var(--fs))); color: var(--faint); margin-top: 14px; }
.photo-credit a { color: var(--faint); }
@media (prefers-reduced-motion: reduce) { .photo-img, .photo-light { animation: none !important; } }
.help-fab { position: fixed; left: 18px; bottom: 18px; z-index: 44; width: 38px; height: 38px; border-radius: 50%; padding: 0; font-weight: 700; color: var(--gold); border-color: #eec48688; background: #1c141bee; }
@media (max-width: 820px) {
  .home { grid-template-columns: 1fr; }
  .portal { height: 300px; }
  .portal .cap h2 { font-size: calc(22px * var(--fs)); }
  .arrows { flex-direction: row; gap: 36px; padding: 2px 0; }
  .arrow-btn { width: 80px; height: 80px; }
  .arrow-btn svg { transform: rotate(90deg); width: 46px; height: 46px; }
}

/* ---------- guided annotations (first visit) ---------- */
.tour-ring { position: fixed; z-index: 90; border-radius: 14px; border: 2px solid var(--gold); box-shadow: 0 0 0 9999px #07040866, 0 0 24px #eec486aa; pointer-events: none; transition: all .25s; animation: ringpulse 1.6s ease-in-out infinite; }
@keyframes ringpulse { 50% { border-color: #fff0cf; } }
.tour-card { position: fixed; z-index: 91; padding: 14px 16px; border-radius: 14px; background: linear-gradient(160deg, #2e1f29, #1b1219); border: 1px solid var(--gold-2); box-shadow: 0 20px 60px #000d; }
.tour-card h4 { margin: 2px 0 6px; color: #ffe3c2; font-size: calc(15px * var(--fs)); }
.tour-card p { margin: 0 0 10px; font-size: calc(13px * var(--fs)); color: var(--text); line-height: 1.6; }
.tour-step { font-size: max(12px, calc(11px * var(--fs))); color: var(--gold); letter-spacing: 1px; }

/* ---------- 课程思政 emphasis ---------- */
mark.ideo { background: linear-gradient(0deg, #eec48640 0 45%, transparent 45%); color: #ffd98f; font-weight: 700; padding: 0 1px; border-radius: 2px; text-shadow: 0 0 12px #eec48666; }
.subtitle mark.ideo { font-size: 1.06em; background: linear-gradient(0deg, #c02a3e88 0 40%, transparent 40%); color: #ffe7b0; }
.bubble mark.ideo { color: #9b2335; background: #eec48655; text-shadow: none; }
.ideo-flag { display: inline-block; font-size: max(12px, calc(11px * var(--fs))); padding: 0 6px; margin-left: 6px; border-radius: 4px; background: #c02a3e; color: #fff3e2; vertical-align: 2px; }
.feed .item.ideo { border-left-color: #ff6b7d; background: #c02a3e14; }
.ideo-list { display: grid; gap: 6px; }
.ideo-list div { font-size: calc(12px * var(--fs)); padding: 5px 8px; border-radius: 6px; background: #c02a3e14; border-left: 3px solid #ff6b7d; }

/* ---------- classroom clock & teleprompter ---------- */
.clockbar { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; }
.clockbar .time { font-family: var(--mono); font-size: calc(22px * var(--fs)); color: #dffafa; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.clockbar .time small { font-size: calc(13px * var(--fs)); color: #8fbcbc; }
.clockbar { flex-wrap: wrap; row-gap: 4px; }
.clockbar .time, .stage-left { white-space: nowrap; }
@media (max-width: 820px) { .clockbar .time { font-size: calc(18px * var(--fs)); } .clockbar .track { flex-basis: 100%; order: 3; } }
.clockbar .track { position: relative; flex: 1; height: 10px; border-radius: 6px; background: #5cd6d61a; overflow: hidden; }
.clockbar .track .fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #5cd6d6, #eec486); border-radius: 6px; transition: width .25s linear; }
.clockbar .track .tick { position: absolute; top: 0; bottom: 0; width: 2px; background: #0d1519; }
.clockbar .speed { display: flex; gap: 2px; }
.clockbar .speed button { padding: 2px 7px; font-size: max(12px, calc(11px * var(--fs))); border-radius: 6px; background: transparent; border-color: #5cd6d644; color: #9fe3e3; }
.clockbar .speed button.on { background: #5cd6d6; color: #062323; border-color: #5cd6d6; }
.stage-left { font-size: max(12px, calc(11px * var(--fs))); color: #8fbcbc; }
.prompter { margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: #0b1215; border: 1px solid #5cd6d622; max-height: 112px; overflow: auto; font-size: calc(13px * var(--fs)); }
.prompter .ptitle { color: var(--gold); font-size: calc(12px * var(--fs)); margin-bottom: 4px; }
.prompter p { margin: 2px 0; color: #7f9a9a; }
.prompter p.done { color: #b9d2d2; }
.prompter p.now { color: #fff4e6; font-weight: 600; border-left: 3px solid var(--gold); padding-left: 6px; }

/* ---------- stage (shared by 研课场 / 演课场) ---------- */
.stage-page { display: grid; grid-template-rows: auto 1fr; gap: 12px; }
.stage-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stage-top h1 { font-size: calc(22px * var(--fs)); letter-spacing: 4px; margin: 0; }
.stage-top .spacer { flex: 1; }
.autoplay { font-size: calc(16px * var(--fs)); padding: 12px 22px; border-radius: 12px; min-width: 150px; font-weight: 650; }
.stage { position: relative; display: grid; grid-template-rows: minmax(240px, 40%) minmax(0, 1fr); gap: 12px; height: calc(100vh - 148px); min-height: 640px; }
.screen { position: relative; border-radius: 16px; border: 1px solid #5cd6d644; background: linear-gradient(180deg, #0d1519f0, #120c12f0); box-shadow: inset 0 0 60px #5cd6d61a, 0 0 0 1px #00000066, 0 20px 50px #000a; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, #5cd6d608 0 1px, transparent 1px 4px); }
.screen .live { padding: 14px 18px; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid #5cd6d622; }
.screen .side { padding: 14px 16px; min-height: 0; overflow: auto; }
.screen .head { display: flex; align-items: center; gap: 8px; font-size: calc(12px * var(--fs)); color: #9fe3e3; }
.screen .head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.screen .head .dot.off { background: #555; box-shadow: none; }
.subtitle { margin: 10px 0; font-size: calc(20px * var(--fs)); line-height: 1.55; min-height: 64px; color: #fff4e6; }
.subtitle .who { font-size: calc(13px * var(--fs)); display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 6px; vertical-align: 3px; }
.subtitle .who.ai { color: #2a1709; background: var(--ai); }
.subtitle .who.human { color: #062323; background: var(--human); }
.subtitle .who.sys { color: #ddd; background: #444; }
.feed { flex: 1; min-height: 0; overflow: auto; display: grid; gap: 6px; align-content: start; padding-right: 4px; }
.feed .item { font-size: calc(13px * var(--fs)); padding: 6px 9px; border-radius: 8px; background: #ffffff06; border-left: 3px solid var(--ai); }
.feed .item.human { border-left-color: var(--human); background: #5cd6d60d; }
.feed .item.sys { border-left-color: #555; color: var(--muted); }
.feed .item .meta { font-size: max(12px, calc(11px * var(--fs))); color: var(--faint); display: flex; gap: 6px; flex-wrap: wrap; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tile { border: 1px solid #5cd6d62e; border-radius: 10px; padding: 8px 10px; background: #5cd6d60a; }
.tile b { display: block; font-size: calc(20px * var(--fs)); color: #dffafa; font-variant-numeric: tabular-nums; }
.tile span { font-size: max(12px, calc(11px * var(--fs))); color: #98c9c9; }
.bars { display: grid; gap: 4px; margin-top: 10px; }
.bars .bar { display: grid; grid-template-columns: 64px 1fr 28px; gap: 6px; align-items: center; font-size: max(12px, calc(11px * var(--fs))); color: var(--muted); }
.bars .bar i { display: block; height: 7px; border-radius: 4px; background: linear-gradient(90deg, var(--cyan), #3aa3a3); }
.phases { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.phases span { font-size: max(12px, calc(11px * var(--fs))); padding: 2px 8px; border-radius: 999px; border: 1px solid #5cd6d633; color: #8fbcbc; }
.phases span.done { color: #0d1a1a; background: #5cd6d6aa; }
.phases span.now { color: #2a1709; background: var(--gold); border-color: var(--gold); }
.scene { position: relative; border-radius: 16px; border: 1px solid #5a3a3f; background: radial-gradient(ellipse at 50% 40%, #2a1a22, #120c11 70%); overflow: hidden; min-height: 320px; }

/* seminar meeting table */
.table-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.seat { position: absolute; transform: translate(-50%, -50%); width: 92px; display: grid; justify-items: center; gap: 2px; text-align: center; z-index: 2; background: none; border: 0; padding: 0; color: var(--text); }
.seat:hover { background: none !important; }
.seat .ava { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #3a2831, #1d1318); border: 2px solid #6b4a50; overflow: hidden; transition: box-shadow .25s, border-color .25s, transform .25s; }
.seat .ava svg { width: 100%; height: 100%; }
.seat .plate { font-size: max(12px, calc(11px * var(--fs))); padding: 1px 8px; border-radius: 6px; background: #1a1116e6; border: 1px solid #5b3d43; white-space: nowrap; }
.seat .role { font-size: max(12px, calc(10px * var(--fs))); color: var(--faint); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat.head { width: 118px; }
.seat.head .ava { width: 84px; height: 84px; border: 3px solid var(--gold); box-shadow: 0 0 0 4px #eec48622, 0 0 26px #eec48644; }
.seat.head .plate { background: linear-gradient(120deg, #f3cf93, #c08f4b); color: #2a1709; border-color: #ffe0ab; font-weight: 700; }
.seat.speaking .ava { border-color: var(--gold); box-shadow: 0 0 0 5px #eec48633, 0 0 30px #eec486aa; transform: scale(1.08); animation: talk 1.1s ease-in-out infinite; }
.seat.speaking.human .ava { border-color: var(--human); box-shadow: 0 0 0 5px #5cd6d633, 0 0 30px #5cd6d6aa; }
.seat.target .ava { border-color: #ff8e8e; box-shadow: 0 0 0 4px #c02a3e44; }
.seat.dim { opacity: .75; }
@keyframes talk { 50% { transform: scale(1.12); } }
.bubble { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 240px; padding: 6px 10px; border-radius: 10px; background: #fff3e2; color: #2a1709; font-size: calc(12px * var(--fs)); line-height: 1.45; box-shadow: 0 8px 24px #000a; text-align: left; z-index: 5; }
.bubble::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: #fff3e2; }
.bubble.human { background: #d9fbfb; color: #062323; } .bubble.human::after { border-top-color: #d9fbfb; }
.wave { display: inline-flex; gap: 2px; margin-left: 4px; vertical-align: middle; }
.wave i { width: 2px; height: 8px; background: currentColor; animation: wave .8s ease-in-out infinite; }
.wave i:nth-child(2) { animation-delay: .15s; } .wave i:nth-child(3) { animation-delay: .3s; }
@keyframes wave { 50% { transform: scaleY(.3); } }
.challenge-line { stroke: #ff6b7d; stroke-width: 2.5; stroke-dasharray: 8 6; animation: flow 1s linear infinite; filter: drop-shadow(0 0 4px #ff6b7d); }

/* classroom */
.podium { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); display: grid; justify-items: center; z-index: 2; }
.podium .desk { width: 180px; height: 22px; border-radius: 6px; background: linear-gradient(180deg, #7a3a2c, #4a2119); box-shadow: 0 6px 16px #0008; margin-top: -6px; }
.students { position: absolute; left: 0; right: 0; top: 146px; bottom: 44px; display: grid; gap: 6px 4px; padding: 0 16px; align-content: start; justify-content: center; grid-template-columns: repeat(var(--cols, 8), minmax(64px, 88px)); overflow: hidden; }
.stu { position: relative; display: grid; justify-items: center; gap: 1px; background: none; border: 0; padding: 2px; color: var(--text); }
.stu:hover { background: none !important; }
.stu .ava { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: #2a1c24; border: 2px solid #4d353c; transition: box-shadow .25s, border-color .25s, transform .25s; }
.stu .ava svg { width: 100%; height: 100%; }
.stu .nm { font-size: max(12px, calc(10px * var(--fs))); color: var(--muted); white-space: nowrap; }
.stu .grp { position: absolute; top: 0; right: 8px; font-size: max(12px, calc(9px * var(--fs))); padding: 0 4px; border-radius: 4px; background: #ffffff14; color: var(--faint); }
.stu.hand::before { content: "✋"; position: absolute; top: -6px; left: 6px; font-size: calc(16px * var(--fs)); animation: bob 1s ease-in-out infinite; z-index: 3; }
@keyframes bob { 50% { transform: translateY(-3px); } }
.stu.speaking .ava { border-color: var(--gold); box-shadow: 0 0 0 4px #eec48633, 0 0 22px #eec486aa; transform: scale(1.1); }
.stu.challenge .ava { border-color: #ff6b7d; box-shadow: 0 0 0 4px #c02a3e44, 0 0 20px #ff6b7d88; }
.stu.thinking .ava { border-color: #6f8f9f; }
.stu.thinking::after { content: "…"; position: absolute; top: -8px; right: 10px; font-size: calc(16px * var(--fs)); color: #9fc7d6; }
.stu.human .ava { border-color: var(--human); }
.stu .bubble { max-width: 220px; }
.pager { position: absolute; left: 12px; right: 12px; bottom: 8px; display: flex; gap: 8px; align-items: center; font-size: calc(12px * var(--fs)); color: var(--muted); z-index: 3; }
.minimap { flex: 1; display: flex; flex-wrap: wrap; gap: 2px; max-height: 24px; overflow: hidden; }
.minimap i { width: 5px; height: 5px; border-radius: 1px; background: #4d353c; cursor: pointer; }
.minimap i.win { background: #8a6a6f; } .minimap i.spk { background: var(--gold); } .minimap i.spoke { background: #5cd6d688; }

/* floating participate button + translucent composer (no dimmed backdrop) */
.participate { position: fixed; right: 22px; bottom: 22px; z-index: 45; padding: 13px 20px; border-radius: 999px; font-size: calc(15px * var(--fs)); box-shadow: 0 12px 32px #000c, 0 0 0 4px #5cd6d622; }
.composer { position: fixed; right: 22px; bottom: 84px; z-index: 46; width: min(420px, calc(100vw - 32px)); padding: 14px; border-radius: 14px; background: #1b1219cc; border: 1px solid #5cd6d677; box-shadow: 0 20px 50px #000b; backdrop-filter: blur(2px); }
.composer h4 { margin: 0 0 8px; color: var(--human); font-size: calc(14px * var(--fs)); }
.composer textarea { background: #0e0a0ecc; min-height: 84px; }

/* setup drawer */
.drawer { position: absolute; inset: 0; z-index: 10; overflow: auto; padding: 16px; background: #120c11f2; border-radius: 16px; }
.drawer .panel { box-shadow: none; }
.estimate { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--gold-2); background: var(--gold-soft); color: var(--gold); font-size: calc(13px * var(--fs)); }
details.more summary { cursor: pointer; color: var(--gold); font-size: calc(13px * var(--fs)); margin: 8px 0; }

/* artifact editor */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.editor .side { position: sticky; top: 76px; display: grid; gap: 12px; }
.sec { margin-bottom: 14px; }
.sec-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.sec-head h3 { margin: 0; font-size: calc(15px * var(--fs)); color: #ffe3c2; }
.etable { width: 100%; border-collapse: collapse; font-size: calc(12px * var(--fs)); }
.etable th { text-align: left; color: var(--gold); font-weight: 600; padding: 4px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.etable td { padding: 3px; vertical-align: top; border-bottom: 1px solid #ffffff08; }
.etable td textarea { min-height: 38px; font-size: calc(12px * var(--fs)); padding: 5px 6px; }
.etable td input, .etable td select { font-size: calc(12px * var(--fs)); padding: 5px 6px; }
.etable th.tonly, .etable td.tonly { background: #c02a3e10; }
.issues { display: grid; gap: 4px; }
.issues div { font-size: calc(12px * var(--fs)); padding: 4px 8px; border-radius: 6px; }
.issues .error { background: #3a1119; color: #ffc1c7; } .issues .warn { background: #3a2a14; color: #f3d7ad; }
.lib-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.card { text-align: left; display: grid; gap: 6px; padding: 14px; border-radius: 12px; background: linear-gradient(160deg, #22171f, #181117); border: 1px solid var(--line); color: var(--text); }
.card:hover { border-color: var(--gold-2); }
.card h4 { margin: 0; font-size: calc(14px * var(--fs)); }
.chain { display: grid; gap: 6px; font-size: calc(12px * var(--fs)); }
.chain div { padding: 6px 8px; border-left: 2px solid var(--gold-2); background: #ffffff05; }

/* rating */
.rate-grid { display: grid; grid-template-columns: 140px repeat(5, 36px) repeat(3, auto); gap: 4px 6px; align-items: center; font-size: calc(12px * var(--fs)); }
.rate-grid .anc { grid-column: 2 / -1; color: var(--faint); font-size: max(12px, calc(11px * var(--fs))); margin-bottom: 6px; }
.rate-grid input { width: auto; }

@media (max-width: 1100px) { .editor { grid-template-columns: 1fr; } .editor .side { position: static; } }
@media (max-width: 820px) {
  .stage { grid-template-rows: auto 460px; height: auto; min-height: 0; }
  .stage-top h1 { font-size: calc(18px * var(--fs)); }
  .stage-top .inline { font-size: max(12px, calc(11px * var(--fs))); }
  .screen { grid-template-columns: 1fr; }
  .screen .live { border-right: 0; border-bottom: 1px solid #5cd6d622; max-height: 46vh; }
  .subtitle { font-size: calc(16px * var(--fs)); min-height: 48px; }
  .seat { width: 70px; } .seat .ava { width: 46px; height: 46px; } .seat.head { width: 86px; } .seat.head .ava { width: 58px; height: 58px; }
  .seat .role { display: none; }
  .students { grid-template-columns: repeat(var(--cols, 5), minmax(52px, 1fr)); top: 130px; }
  .stu .ava { width: 38px; height: 38px; }
  .autoplay { min-width: 0; padding: 10px 16px; font-size: calc(14px * var(--fs)); }
  .participate { right: 16px; bottom: 16px; }
  .composer { right: 16px; bottom: 74px; }
  .rate-grid { grid-template-columns: 90px repeat(5, 28px); } .rate-grid .sp { grid-column: 2 / -1; }
}
/* podium speaker: bubble to the side so it never clips at the top of the scene */
.podium .bubble { bottom: auto; top: 6px; left: calc(100% + 12px); transform: none; max-width: 320px; }
.podium .bubble::after { top: 14px; left: -12px; margin-left: 0; border-top-color: transparent; border-right-color: #fff3e2; }

/* ---------- task wizard & pipeline panel ---------- */
.wiz { display: grid; gap: 12px; }
.wiz-sec { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: #ffffff05; }
.wiz-sec h4 { margin: 0 0 8px; color: #ffe3c2; font-size: calc(15px * var(--fs)); display: flex; align-items: center; gap: 8px; }
.wiz-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: #2a1709; font-size: calc(12px * var(--fs)); font-weight: 800; }
.wiz-mats { display: grid; gap: 4px; margin-top: 8px; max-height: 140px; overflow: auto; }
.wiz-mat { gap: 8px; flex-wrap: wrap; }
.wiz-card { margin-top: 10px; padding: 10px; border-radius: 10px; border: 1px solid #5cd6d644; background: #0d1519aa; }
.wiz-outs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.wiz-outs > div { display: grid; gap: 4px; align-content: start; }
.kp-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: 260px; overflow: auto; }
.kp { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); font-size: calc(12px * var(--fs)); cursor: pointer; }
.kp.on { border-color: var(--gold-2); background: var(--gold-soft); }
.kp input { width: auto; margin-top: 3px; }
.job { font-size: calc(13px * var(--fs)); }
.job-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.job-steps li { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border-radius: 8px; background: #ffffff06; border-left: 3px solid #4d353c; }
.job-steps li .ic { width: 18px; text-align: center; font-weight: 800; color: var(--faint); }
.job-steps li.done { border-left-color: var(--green); } .job-steps li.done .ic { color: var(--green); }
.job-steps li.running { border-left-color: var(--cyan); background: #5cd6d612; } .job-steps li.running .ic { color: var(--cyan); animation: spin 1.2s linear infinite; display: inline-block; }
.job-steps li.error { border-left-color: var(--danger); } .job-steps li.error .ic { color: var(--danger); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 820px) { .wiz-outs, .kp-list { grid-template-columns: 1fr 1fr; } }
/* toolbar: title + status on the first line; run mode on the left and controls on the right of the second line */
.stage-top .spacer { flex: 1 0 100%; height: 0; }
.stage-top .mode-switch + * { margin-left: auto; }
@media (max-width: 720px) { .stage-top .mode-switch + * { margin-left: 0; } }