/* 班级喊话 · 教室接收端样式（浅色主题，大屏阅读） */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  background: #071525;
  color: #f5f8ff;
  overflow: hidden;
}
.hidden { display: none !important; }

/* 绑定页 */
.bind-view {
  height: 100vh; display: flex; align-items: center; justify-content: center;
}
.bind-card {
  background: #fff; border-radius: 16px; padding: 48px;
  box-shadow: 0 8px 30px rgba(31,45,61,.12); width: 560px; max-width: 92vw;
}
.bind-card h1 { font-size: 30px; margin-bottom: 16px; color: #1a66ff; }
.bind-tip { font-size: 17px; color: #5a6a7f; margin-bottom: 24px; line-height: 1.6; }
#token-input {
  width: 100%; padding: 14px 16px; font-size: 18px; border: 2px solid #dfe6ef;
  border-radius: 10px; margin-bottom: 20px; outline: none;
}
#token-input:focus { border-color: #1a66ff; }
.error-text { color: #e02020; margin-top: 14px; font-size: 15px; }

button {
  border: none; border-radius: 10px; padding: 12px 22px; font-size: 16px;
  cursor: pointer; background: #e8edf4; color: #1f2d3d;
}
button.primary { background: #1a66ff; color: #fff; }
button.ghost { background: transparent; color: #8492a6; }
button.big { width: 100%; font-size: 19px; padding: 15px; }
button:disabled { opacity: .55; cursor: not-allowed; }

/* 主界面 */
.main-view { height: 100vh; display: flex; flex-direction: column; }
.main-view::before { content: ""; position: fixed; inset: 0; z-index: -1; opacity: .18; pointer-events: none;
  background-image: linear-gradient(135deg, transparent 0 48%, rgba(255,255,255,.12) 49% 50%, transparent 51% 100%),
    linear-gradient(45deg, transparent 0 48%, rgba(255,255,255,.08) 49% 50%, transparent 51% 100%); background-size: 64px 64px; }
.brand-mark { display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 800; white-space: nowrap; }
.brand-mark img { width: 40px; height: 40px; object-fit: contain; border-radius: 50%; background: #fff; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; background: rgba(7,21,37,.92); box-shadow: 0 2px 18px rgba(0,0,0,.24);
  flex: 0 0 auto; gap: 16px;
}
.device-name { font-size: 22px; font-weight: 700; margin-right: 12px; }
.class-badge {
  background: #e8f0ff; color: #1a66ff; border-radius: 8px; padding: 5px 14px; font-size: 17px;
}
.conn-status { display: flex; align-items: center; gap: 8px; font-size: 16px; color: #5a6a7f; }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot-on { background: #12b76a; }
.dot-off { background: #e02020; }
.dot-warn { background: #f79009; }

/* 横幅提示 */
.net-banner, .tts-banner, .autoplay-banner {
  padding: 10px 28px; font-size: 17px; flex: 0 0 auto;
}
.net-banner { background: #fdecea; color: #e02020; }
.tts-banner { background: #fff6e5; color: #b25e09; }
.autoplay-banner { background: #fff6e5; color: #b25e09; }

.voicebar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 28px; background: #eef4ff; font-size: 16px; flex: 0 0 auto;
}
.voicebar select {
  min-width: 210px; max-width: 360px; padding: 9px 12px; font-size: 16px;
  border: 1px solid #cbd7e8; border-radius: 8px; background: #fff; color: #1f2d3d;
}
.voice-status { color: #5a6a7f; font-size: 14px; }

/* 播报舞台 */
.stage { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0; background: radial-gradient(circle at 50% 42%, rgba(30,144,255,.18), transparent 48%); }
.stage-empty { text-align: center; }
.stage-logo { width: 144px; height: 144px; object-fit: contain; border-radius: 50%; background: #fff; padding: 7px; opacity: .92; margin-bottom: 22px; }
.stage-hint { font-size: 42px; color: #d7e6fb; font-weight: 300; }
.stage-sub { font-size: 19px; color: #8492a6; margin-top: 14px; }
.stage-playing { text-align: center; padding: 0 6vw; width: 100%; animation: fadeIn 0.3s ease-in; }
.play-kind {
  display: inline-block; background: #e8f0ff; color: #1a66ff;
  border-radius: 10px; padding: 6px 20px; font-size: 20px; margin-bottom: 22px;
}
.play-kind.urgent {
  background: #fdecea; color: #e02020;
  animation: pulse 1.5s ease-in-out infinite;
}
.play-kind.normal { background: #e8f0ff; color: #1a66ff; }
.play-kind.info { background: #f0f3f7; color: #5a6a7f; }
.play-content {
  font-size: clamp(42px, 5vw, 88px); line-height: 1.35; font-weight: 800; color: #fff;
  word-break: break-all; max-height: 52vh; overflow: auto;
}
.play-meta { font-size: 20px; color: #c6d8ef; margin-top: 22px; }
.play-state { font-size: 22px; color: #12b76a; margin-top: 10px; }

/* 动画效果 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes slideIn {
  from { transform: translateX(-20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.queue-list li.active {
  background: #e8f0ff; color: #1a66ff;
  animation: slideIn 0.3s ease-out;
}

/* 队列与最近结果 */
.queuebar { background: rgba(7,21,37,.94); border-top: 1px solid rgba(255,255,255,.12); padding: 12px 28px 4px; flex: 0 0 auto; }
.recentbar { background: rgba(7,21,37,.94); padding: 4px 28px 16px; flex: 0 0 auto; }
.queue-title, .recent-title { font-size: 15px; color: #8492a6; margin-bottom: 8px; }
.queue-list, .recent-list { list-style: none; max-height: 17vh; overflow: auto; }
.queue-list li, .recent-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 12px; border-radius: 8px; font-size: 16px; margin-bottom: 4px;
  background: #f5f7fa;
}
.queue-list li.active { background: #e8f0ff; color: #1a66ff; }
.recent-list li { gap: 18px; align-items: flex-start; }
.recent-list li .recent-message { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.recent-list li span:last-child { flex: 0 0 auto; }
.recent-list li .st-played { color: #12b76a; }
.recent-list li .st-failed { color: #e02020; }
.recent-list li .st-uncertain { color: #b25e09; }
.recent-list li .st-waiting { color: #8492a6; }