/* 喇叭花 · 教室端大屏/待机/断线横幅/到期提醒（原 style 教室端两段） */
  /* ================= 教室端（全屏大屏） ================= */
  #view-classroom { position: fixed; inset: 0; background: #04070d; color: #fff;
                    display: flex; flex-direction: column; z-index: 10; }
  .cs-top { display: flex; justify-content: space-between; align-items: center; gap: 10px;
            padding: 10px 16px; font-size: 14px; color: #7f93ad; z-index: 5; flex-wrap: wrap; }
  .cs-btns { display: flex; gap: 8px; }
  .cs-top button { background: #122036; border: 1px solid #24405f; color: #bcd3ec;
                   border-radius: 999px; padding: 6px 14px; font-size: 14px; cursor: pointer; }
  .cs-stage { position: relative; flex: 1; }
  .cs-pane { position: absolute; inset: 0; display: none; flex-direction: column;
             align-items: center; justify-content: center; text-align: center; padding: 20px; }
  .cs-pane.active { display: flex; }
  .cs-clock { font-size: clamp(4rem, 14vw, 11rem); font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
  .cs-date { font-size: clamp(1.2rem, 3.4vw, 2.4rem); color: #9fb3c8; margin-top: 8px; }
  .cs-classname { font-size: clamp(1.4rem, 4vw, 3rem); color: #e2ecf7; margin-top: 18px; font-weight: 700; }
  .cs-brandline { font-size: clamp(1rem, 2vw, 1.6rem); color: #5b7188; margin-top: 14px; letter-spacing: .12em; }
  .cs-hint { font-size: clamp(.9rem, 1.6vw, 1.2rem); color: #5b7188; margin-top: 26px; }
  .cs-type { font-size: clamp(1.2rem, 3vw, 2.2rem); color: #8aa3bf; margin-bottom: 3vh; }
  .cs-msgtext { font-weight: 800; line-height: 1.25; word-break: break-word; max-width: 94vw;
                max-height: 70vh; overflow: hidden; text-shadow: 0 0 24px rgba(56,189,248,.25); }
  .cs-msgtext.pop { animation: pop .45s cubic-bezier(.2, 1.4, .4, 1); }
  @keyframes pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
  .cs-rollname { font-size: clamp(3rem, 12vw, 10rem); font-weight: 900; color: #e2ecf7; }
  .cs-rollname.win { color: #ffd166; text-shadow: 0 0 30px rgba(255,209,102,.4); animation: zoom .5s cubic-bezier(.2, 1.6, .4, 1); }
  @keyframes zoom { 0% { transform: scale(.7); } 100% { transform: scale(1.06); } }
  .cs-timernum { font-size: clamp(5rem, 22vw, 17rem); font-weight: 900; font-variant-numeric: tabular-nums; color: #7dd3fc; }
  .cs-timernum.low { color: #f87171; animation: blink 1s steps(2) infinite; }
  @keyframes blink { 50% { opacity: .35; } }
  #cs-timer.ended .cs-timernum { color: #f87171; }
  #cs-timer.ended, .cs-stage.urgent { animation: urgentbg .9s ease-in-out infinite; }
  @keyframes urgentbg { 0%, 100% { box-shadow: inset 0 0 0 0 rgba(248,113,113,0); }
                        50% { box-shadow: inset 0 0 140px 20px rgba(248,113,113,.45); } }
  #csConfetti { position: fixed; inset: 0; pointer-events: none; z-index: 9; }

  /* ================= 教室端：断线横幅 / 卖家行 / 到期提醒 ================= */
  .cs-offline { position: fixed; left: 0; right: 0; top: 0; z-index: 60; text-align: center;
                padding: 12px 16px; background: #b91c1c; color: #fff;
                font-size: clamp(16px, 1.8vw, 40px); font-weight: 800; letter-spacing: 2px;
                box-shadow: 0 10px 30px -10px rgba(0,0,0,.7); animation: csFlash 1.6s ease-in-out infinite; }
  .cs-offline small { display: block; margin-top: 4px; font-weight: 500; opacity: .9;
                      letter-spacing: 0; font-size: clamp(12px, 1vw, 22px); }
  @keyframes csFlash { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
  .cs-sellerline { margin-top: 18px; color: #6b8cb5; letter-spacing: 1px;
                   font-size: clamp(13px, 1.1vw, 26px); }
  .cs-expwarn { margin-top: 12px; color: #fbbf24; font-weight: 700; letter-spacing: 1px;
                font-size: clamp(14px, 1.3vw, 30px); }
  .cs-expwarn.bad { color: #f87171; }
  .pill-warn { background: #fef3c7; border-color: #fcd34d; color: #92400e; }