* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ============== LANDING ============== */

body.landing {
  background: #f3f4f6;
  color: #111;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.landing-card {
  width: 100%;
  max-width: 720px;
  background: #fff;
  border-radius: 20px;
  padding: 48px 40px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.landing-card h1 {
  font-size: 36px;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}

.landing-sub {
  font-size: 17px;
  color: #6b7280;
  margin-bottom: 36px;
}

.landing-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 540px) {
  .landing-links {
    grid-template-columns: 1fr;
  }
}

.landing-link {
  display: block;
  padding: 28px 24px;
  border-radius: 14px;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform 0.12s, box-shadow 0.12s;
}

.landing-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.landing-link-teacher {
  background: #1e293b;
  color: #fff;
}

.landing-link-student {
  background: #2563eb;
  color: #fff;
}

.landing-link-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
}

.landing-link-desc {
  font-size: 14px;
  opacity: 0.85;
}

/* ============== TEACHER ============== */

body.teacher {
  background: #000;
  color: #fff;
  overflow: hidden;
}

.teacher-video {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  background: #000;
  display: none;
}

.teacher-video.active {
  display: block;
}

.waiting-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
  color: #e5e5e5;
}

.waiting-screen.hidden {
  display: none;
}

.waiting-title {
  font-size: 64px;
  font-weight: 700;
  margin-bottom: 24px;
  letter-spacing: -1px;
}

.waiting-sub {
  font-size: 22px;
  color: #888;
  margin-bottom: 48px;
}

.room-code-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 56px;
  background: #111;
  border: 2px solid #2a2a2a;
  border-radius: 16px;
}

.room-code-label {
  font-size: 18px;
  color: #888;
  letter-spacing: 2px;
}

.room-code-value {
  font-size: 96px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.room-code-url {
  font-size: 16px;
  color: #6ab0ff;
  cursor: pointer;
  user-select: all;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.room-code-url:hover {
  color: #99c8ff;
}

.teacher-name-banner {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 20px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 18px;
  border-radius: 999px;
  pointer-events: none;
  display: none;
  z-index: 10;
}

.teacher-name-banner.visible {
  display: block;
}

.teacher-start-btn {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  z-index: 100;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  user-select: none;
}

.teacher-start-btn.hidden {
  display: none;
}

.teacher-start-btn span {
  padding: 24px 48px;
  border: 2px solid #fff;
  border-radius: 12px;
}

/* ============== STUDENT ============== */

body.student {
  background: #f3f4f6;
  color: #111;
  /* grow past the viewport so a tall card scrolls instead of clipping its top */
  height: auto;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  transition: background 0.25s ease;
}

body.student.state-entered { background: #ecfdf5; }
body.student.state-called  { background: #fffbeb; }
body.student.state-sharing { background: #d1fae5; }

.browser-warning {
  padding: 16px;
  margin-bottom: 20px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 4px solid #dc2626;
  border-radius: 10px;
}

.bw-title {
  font-size: 16px;
  font-weight: 700;
  color: #991b1b;
  margin-bottom: 8px;
}

.bw-body {
  font-size: 14px;
  color: #7f1d1d;
  line-height: 1.6;
  margin-bottom: 12px;
}

.bw-copy {
  width: 100%;
  padding: 12px;
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.bw-copy:hover { background: #b91c1c; }

.state-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 20px;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-left: 4px solid #16a34a;
  border-radius: 10px;
}

body.state-called .state-banner {
  background: #fefce8;
  border-color: #fcd34d;
  border-left-color: #ca8a04;
  animation: bannerPulse 1.4s ease-in-out infinite;
}

body.state-sharing .state-banner {
  background: #d1fae5;
  border-color: #6ee7b7;
  border-left-color: #059669;
}

@keyframes bannerPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(202, 138, 4, 0.25); }
  50%      { box-shadow: 0 0 0 6px rgba(202, 138, 4, 0); }
}

.state-icon {
  font-size: 28px;
  line-height: 1;
}

.state-text { flex: 1; min-width: 0; }

.state-title {
  font-size: 16px;
  font-weight: 700;
  color: #111;
  word-break: break-word;
}

.state-meta {
  font-size: 13px;
  color: #4b5563;
  margin-top: 2px;
  word-break: break-word;
}

.student-card {
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.student-card h1 {
  font-size: 28px;
  margin-bottom: 24px;
  text-align: center;
}

.form-row {
  margin-bottom: 18px;
}

.form-row label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}

.form-row input[type="text"] {
  width: 100%;
  padding: 14px 16px;
  font-size: 18px;
  border: 2px solid #d1d5db;
  border-radius: 10px;
  outline: none;
}

.form-row input[type="text"]:focus {
  border-color: #2563eb;
}

#roomInput {
  text-transform: uppercase;
  letter-spacing: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 28px;
  font-size: 16px;
}

.checkbox-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  cursor: pointer;
}

.btn {
  display: block;
  width: 100%;
  padding: 18px;
  font-size: 20px;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  margin-bottom: 12px;
  transition: background 0.15s;
}

.btn-primary {
  background: #2563eb;
  color: #fff;
}

.btn-primary:hover:not(:disabled) {
  background: #1d4ed8;
}

.btn-danger {
  background: #dc2626;
  color: #fff;
}

.btn-danger:hover:not(:disabled) {
  background: #b91c1c;
}

.btn-success {
  background: #10b981;
  color: #fff;
  animation: pulseGlow 1.4s ease-in-out infinite;
}

.btn-success:hover:not(:disabled) {
  background: #059669;
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
}

/* Student sharing screen: the work tab hides this one, so closing it by
   accident is the likeliest way a share drops. */
.keep-open-note {
  margin: -4px 0 16px;
  font-size: 14px;
  font-weight: 700;
  color: #b91c1c;
  text-align: center;
  word-break: keep-all;
}
.keep-open-note.hidden { display: none; }

.btn-secondary {
  background: #6b7280;
  color: #fff;
}

.btn-secondary:hover:not(:disabled) {
  background: #4b5563;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.hidden {
  display: none !important;
}

.status {
  margin-top: 16px;
  padding: 14px;
  background: #f9fafb;
  border-radius: 10px;
  font-size: 15px;
  text-align: center;
  color: #374151;
  border: 1px solid #e5e7eb;
}

.status.sharing {
  background: #ecfdf5;
  color: #065f46;
  border-color: #a7f3d0;
}

.status.queued {
  background: #fffbeb;
  color: #92400e;
  border-color: #fcd34d;
}

.status.my-turn {
  background: #d1fae5;
  color: #065f46;
  border-color: #10b981;
  font-weight: 700;
  font-size: 16px;
}

.status.error {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fecaca;
}

/* ============== TEACHER CLASS PANEL ============== */

.class-panel {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 280px;
  max-height: 70vh;
  background: rgba(17, 17, 17, 0.92);
  color: #e5e5e5;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 14px 14px 12px;
  font-size: 13px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(6px);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
}

.panel-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.panel-title span {
  color: #6ab0ff;
  margin: 0 2px;
}

.auto-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

.auto-toggle input {
  display: none;
}

.toggle-track {
  position: relative;
  width: 32px;
  height: 18px;
  background: #4b5563;
  border-radius: 999px;
  transition: background 0.15s;
}

.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: left 0.15s;
}

.auto-toggle input:checked + .toggle-track {
  background: #10b981;
}

.auto-toggle input:checked + .toggle-track .toggle-thumb {
  left: 16px;
}

.toggle-label {
  font-size: 12px;
  color: #d1d5db;
}

.student-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  overflow-y: auto;
  max-height: 28vh;
}

.student-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  margin-bottom: 4px;
  background: #1f2937;
  border-radius: 8px;
  border-left: 3px solid transparent;
}

.student-item.status-sharing {
  border-left-color: #10b981;
  background: #064e3b;
}

.student-item.callable {
  cursor: pointer;
  transition: background 0.12s, border-left-color 0.12s;
}

.student-item.callable:hover {
  background: #374151;
  border-left-color: #6ab0ff;
}

.student-item .sn {
  font-weight: 600;
  color: #fff;
}

.student-item .ss {
  font-size: 11px;
  color: #9ca3af;
}

.student-empty {
  text-align: center;
  color: #6b7280;
  font-style: italic;
  padding: 16px 8px;
  background: transparent !important;
  border-left: none !important;
}

.mode-hint {
  font-size: 11px;
  color: #9ca3af;
  margin-bottom: 8px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
}

.btn-link {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: #6b7280;
  font-size: 13px;
  text-align: center;
  padding: 6px;
  margin-top: 4px;
  cursor: pointer;
  text-decoration: underline;
}

.btn-link:hover {
  color: #374151;
}

/* ============== TEACHER SETTINGS (gear + modal) ============== */

.settings-btn {
  position: fixed;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #e5e5e5;
  font-size: 20px;
  cursor: pointer;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.3s;
}

.settings-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: rotate(45deg);
}

.settings-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  backdrop-filter: blur(4px);
  padding: 16px;
}

.settings-modal-content {
  background: #fff;
  color: #111;
  padding: 28px;
  border-radius: 16px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.settings-modal-content h2 {
  font-size: 22px;
  margin-bottom: 10px;
  color: #111;
}

.settings-note {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
  margin-bottom: 18px;
  word-break: keep-all;
}

.settings-modal-content label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #374151;
}

#settingsCurrentCode {
  color: #111;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 2px;
}

#linkUrlInput, #linkLabelInput {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: 15px;
  border: 2px solid #d1d5db;
  border-radius: 10px;
  outline: none;
  margin-bottom: 14px;
  font-family: inherit;
  color: #111;
}
#linkUrlInput:focus, #linkLabelInput:focus { border-color: #2563eb; }

.settings-error {
  margin: 8px 0 4px;
  padding: 8px 10px;
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  border-radius: 6px;
  font-size: 13px;
}

.settings-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.btn-modal-primary {
  padding: 14px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-modal-primary:hover { background: #1d4ed8; }

.btn-modal-secondary {
  padding: 12px;
  background: #f3f4f6;
  color: #111;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
}

.btn-modal-secondary:hover { background: #e5e7eb; }

.btn-modal-close {
  padding: 10px;
  background: transparent;
  color: #6b7280;
  border: none;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}

.btn-modal-close:hover { color: #374151; }

.notice-content { max-width: 520px; padding: 30px 32px 24px; }
.notice-badge {
  display: inline-block;
  padding: 4px 10px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 12px;
  font-weight: 700;
}
.notice-content h2 {
  font-size: 24px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  word-break: keep-all;
  margin-bottom: 18px;
}

.notice-body {
  font-size: 15px;
  color: #1f2937;
  line-height: 1.65;
  word-break: keep-all;
  max-height: 60vh;
  overflow-y: auto;
}
.notice-body section + section { margin-top: 18px; }
.notice-body h3 {
  font-size: 13px;
  font-weight: 700;
  color: #2563eb;
  margin-bottom: 8px;
}
.notice-body p + p, .notice-body ul + p, .notice-body p + ul { margin-top: 6px; }
.notice-body ul { list-style: none; padding: 0; margin: 0; }
.notice-body li {
  position: relative;
  padding: 9px 12px 9px 38px;
  background: #f9fafb;
  border-radius: 10px;
}
.notice-body li + li { margin-top: 6px; }
.notice-body li::before {
  content: "✓";
  position: absolute;
  left: 12px;
  top: 11px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.notice-body li strong { display: block; color: #111; font-size: 15px; }
.notice-body li span { display: block; color: #4b5563; font-size: 14px; }
.notice-body a { color: #2563eb; font-weight: 600; word-break: break-all; }

/* App card: heading across the top, small picture left, text right. */
.notice-card {
  display: grid;
  grid-template-columns: 150px 1fr;
  column-gap: 16px;
  align-items: start;
  padding: 16px;
  background: linear-gradient(135deg, #eff6ff 0%, #fdf4ff 100%);
  border: 2px solid #93c5fd;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.12);
}
.notice-card h3 { grid-column: 1 / -1; font-size: 14px; }
.notice-card h3::before { content: "✨ "; }
.notice-card > :not(h3):not(.notice-image) { grid-column: 2; }
.notice-card p { color: #374151; font-size: 13px; line-height: 1.55; }
.notice-card p + p { margin-top: 4px; }
.notice-card p:first-of-type { color: #111; font-size: 16px; font-weight: 800; }
/* The address line reads as a button. */
.notice-card p:has(> a:only-child) { margin-top: 10px; }
.notice-card p > a:only-child {
  display: inline-block;
  padding: 6px 14px;
  background: #2563eb;
  color: #fff;
  border-radius: 999px;
  font-size: 13px;
  text-decoration: none;
}
.notice-card p > a:only-child::after { content: " →"; }
.notice-card p > a:only-child:hover { background: #1d4ed8; }
.notice-image { grid-column: 1; grid-row: 2 / span 3; display: block; }
.notice-image img {
  display: block;
  width: 100%;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
@media (max-width: 480px) {
  .notice-card { grid-template-columns: 1fr; }
  .notice-card > :not(h3) { grid-column: 1; grid-row: auto; }
  .notice-image { margin-bottom: 8px; }
}

/* ============== TEACHER V2 (grid view) ============== */

.teacher-app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #0a0a0a;
}

.teacher-app.hidden { display: none; }

.teacher-toolbar {
  flex: 0 0 auto;
  min-height: 56px;
  background: #111;
  border-bottom: 1px solid #222;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Control-heavy row: wrap groups onto a new line instead of clipping/overflowing
     in the awkward 720–1200px range. */
  flex-wrap: wrap;
  padding: 6px 16px;
  gap: 10px 16px;
  color: #e5e5e5;
}

.tb-left, .tb-center, .tb-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
}
/* Never break a button/label mid-character. */
.tb-room, .tb-counts, .sort-btn, .stop-all-btn { white-space: nowrap; }

.tb-room { font-size: 15px; color: #aaa; }
.tb-room strong {
  color: #fff;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 22px;
  letter-spacing: 4px;
  margin-left: 6px;
}

.stop-all-btn {
  background: #dc2626;
  color: #fff;
  border: none;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s;
}
.stop-all-btn:hover { background: #b91c1c; }

.sort-btn {
  background: rgba(255, 255, 255, 0.06);
  color: #cfd6e4;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}
.sort-btn:hover { background: rgba(255, 255, 255, 0.14); }

.tb-counts { font-size: 13px; color: #888; }
.tb-counts span {
  color: #6ab0ff;
  font-weight: 600;
  margin: 0 2px;
}

.tb-url {
  font-size: 12px;
  color: #6ab0ff;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
}
.tb-url:hover { background: rgba(255, 255, 255, 0.1); }

.view-modes {
  background: #1a1a1a;
  border-radius: 10px;
  padding: 4px;
  gap: 0;
}

.vm-btn {
  background: transparent;
  border: none;
  color: #aaa;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 7px;
  transition: background 0.12s, color 0.12s;
}
.vm-btn:hover { color: #fff; }
.vm-btn.active {
  background: #2563eb;
  color: #fff;
}

.playback-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #1a1a1a;
  border-radius: 10px;
  padding: 4px 6px;
}
.playback-controls.hidden { display: none; }
/* Keep every control on one line — never let labels break mid-character. */
.playback-controls > *, .auto-label, .order-opt { flex: 0 0 auto; white-space: nowrap; }

.nav-btn {
  background: rgba(255, 255, 255, 0.06);
  color: #cfd6e4;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 6px 9px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.nav-btn:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* Order: two-segment control (current option highlighted, like 25/4/1) */
.order-seg {
  display: flex;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 7px;
  padding: 2px;
}
.order-opt {
  background: transparent;
  border: none;
  color: #9aa3b2;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.12s, color 0.12s;
}
.order-opt:hover { color: #fff; }
.order-opt.active {
  background: #2563eb;
  color: #fff;
}

/* Auto-rotation on/off toggle switch */
.auto-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  font-weight: 600;
  color: #cfd6e4;
}
.auto-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.auto-switch {
  position: relative;
  width: 38px;
  height: 22px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  transition: background 0.15s;
  flex: 0 0 auto;
}
.auto-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s;
}
.auto-toggle input:checked + .auto-switch { background: #16a34a; }
.auto-toggle input:checked + .auto-switch::after { transform: translateX(16px); }
.auto-toggle input:focus-visible + .auto-switch { outline: 2px solid #6ab0ff; outline-offset: 2px; }

.pb-divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.14);
  margin: 0 2px;
}
.interval-sel {
  background: rgba(255, 255, 255, 0.06);
  color: #cfd6e4;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 6px 6px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.settings-btn-inline {
  position: static;
  width: 36px;
  height: 36px;
  font-size: 18px;
}

.grid {
  flex: 1 1 auto;
  display: grid;
  gap: 6px;
  padding: 6px;
  position: relative;
  overflow: hidden;
}

/* Rows are fixed at 1/5 of the viewport (24px = 4 gaps), so with 25 or fewer
   students it fills the screen exactly like a 5×5, and with 26+ (30-student
   classes) extra rows keep the same tile size and the grid scrolls vertically. */
.grid-25 {
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: calc((100% - 24px) / 5);
  overflow-y: auto;
}

.grid-4 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  padding: 10px;
}

.grid-1 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.tile {
  position: relative;
  background: #1a1a1a;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.12s;
  min-height: 0;
  min-width: 0;
}

.tile:hover { border-color: #2563eb; }
.tile.pinned { border-color: #fbbf24; }

.tile video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #000;
  display: block;
}

/* All views (25/4/1) respect the tablet's true aspect ratio (no crop, no
   stretch), centered — inherited from the base .tile video rule above. */

/* Some school Chromebooks capture the screen rotated 90°: the student's own
   display is upright, but the frame arrives portrait with the desktop on its
   side. We turn it back for display.
   The video box takes the tile's height as its WIDTH and vice versa (--th/--tw,
   fed by the ResizeObserver in teacher.js), so that once rotated its bounding
   box is exactly the tile — object-fit: contain then letterboxes it the same
   way an upright stream is letterboxed. Overlays are untouched, so the name
   and pin stay upright. */
.tile.rot video {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--th);
  height: var(--tw);
  transform: translate(-50%, -50%) rotate(-90deg);
}

.tile-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a1a;
  color: #888;
  font-size: 13px;
  pointer-events: none;
}

.tile-placeholder.hidden { display: none; }

.tile-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}

.tile-name {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tile-pin {
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.tile-pin:hover {
  background: rgba(0, 0, 0, 0.85);
}

.tile.pinned .tile-pin {
  background: #fbbf24;
  color: #111;
  border-color: #fbbf24;
}

/* 1-view: keep tile borders subtle since there's nothing to compare it to */
.grid-1 .tile { cursor: default; }
.grid-1 .tile:hover { border-color: transparent; }
.grid-1 .tile.pinned { border-color: transparent; }
.grid-1 .tile-name { font-size: 18px; }
.grid-1 .tile-pin {
  width: 36px;
  height: 36px;
  font-size: 18px;
}

.empty-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #888;
  text-align: center;
  padding: 24px;
}

.empty-state.hidden { display: none; }

.es-title {
  font-size: 32px;
  font-weight: 700;
  color: #d1d5db;
  margin-bottom: 20px;
}

.es-code-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  padding: 24px 56px;
  background: #111;
  border: 2px solid #2a2a2a;
  border-radius: 16px;
}

.es-code-label {
  font-size: 16px;
  color: #888;
  letter-spacing: 2px;
}

.es-code-value {
  font-size: 92px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  line-height: 1;
}

.es-code-url {
  font-size: 15px;
  color: #6ab0ff;
  cursor: pointer;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.es-code-url:hover { color: #99c8ff; }

.es-sub {
  font-size: 16px;
  color: #6b7280;
  max-width: 480px;
  line-height: 1.5;
  /* Korean: don't split words mid-character, and avoid a lone "다." orphan line. */
  word-break: keep-all;
  text-wrap: pretty;
}

/* The room-share URL is the biggest space hog; the room code stays visible and
   the URL is also shown (copyable) on the empty-state card, so drop it first. */
@media (max-width: 1120px) {
  .tb-url { display: none; }
}
/* Smaller toolbar on narrow screens */
@media (max-width: 720px) {
  .teacher-toolbar { padding: 8px; gap: 8px; }
  .tb-counts { display: none; }
  .vm-btn { padding: 6px 10px; font-size: 13px; }
}

/* =====================================================================
   v3: teacher -> student present features
   ===================================================================== */

/* --- Teacher: dedicated "send to students" bar, a row under the toolbar --- */
.present-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: #0d0d0d;
  border-bottom: 1px solid #222;
}
.present-bar-label {
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.present-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.present-btn {
  background: rgba(255, 255, 255, 0.06);
  color: #cfd6e4;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
}
.present-btn:hover { background: rgba(255, 255, 255, 0.14); }
.present-btn.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
#broadcastBtn.active { background: #dc2626; border-color: #dc2626; }

.present-status {
  margin-left: auto;
  background: #1e3a8a;
  color: #dbeafe;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.present-status.hidden { display: none; }

/* --- Student: link banner --- */
.link-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #1d4ed8;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.link-banner.hidden { display: none; }
.link-banner-text { flex: 1; min-width: 0; }
.link-banner-title { font-size: 13px; opacity: 0.9; }
.link-banner-label {
  font-size: 17px;
  font-weight: 700;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.link-banner-open {
  flex: 0 0 auto;
  background: #fff;
  color: #1d4ed8;
  border: none;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}
.link-banner-open:hover { background: #eef2ff; }
.link-banner-close {
  flex: 0 0 auto;
  background: transparent;
  color: #c7d2fe;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 6px 8px;
  line-height: 1;
}
.link-banner-close:hover { color: #fff; }

/* --- Student: fullscreen present overlay (teacher broadcast) --- */
.present-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.present-overlay.hidden { display: none; }

.present-broadcast {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.present-broadcast.hidden { display: none; }
.present-broadcast video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.present-broadcast-label {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
}
.present-connecting {
  position: absolute;
  color: #cbd5e1;
  font-size: 18px;
  font-weight: 600;
}
.present-connecting.hidden { display: none; }
.present-unmute {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #2563eb;
  color: #fff;
  border: none;
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.present-unmute:hover { background: #1d4ed8; }
.present-unmute.hidden { display: none; }

@media (max-width: 720px) {
  .present-bar { flex-wrap: wrap; row-gap: 8px; }
  .present-bar-label { width: 100%; }
  .present-status { margin-left: 0; }
  .present-btn { padding: 6px 10px; font-size: 12px; }
}

/* ============== PRIVACY POLICY LINK ============== */

/* Required by the 학습지원 소프트웨어 필수기준 checklist: the policy must be
   reachable from the landing page footer and the student entry screen. */
.site-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
  font-size: 13px;
  color: #9ca3af;
  text-align: center;
  word-break: keep-all;
  text-wrap: pretty;
}

.site-footer a {
  color: #6b7280;
  text-decoration: none;
  border-bottom: 1px solid #d1d5db;
}

.site-footer a:hover { color: #2563eb; border-bottom-color: #2563eb; }

.site-footer .sf-sep { margin: 0 6px; }

.site-footer .sf-copyright { margin-top: 6px; }

/* Teacher waiting screen sits on a dark background, so it needs its own tone. */
.es-privacy {
  margin-top: 20px;
  font-size: 13px;
}

.es-privacy a {
  color: #9ca3af;
  text-decoration: none;
  border-bottom: 1px solid #4b5563;
}

.es-privacy a:hover { color: #99c8ff; border-bottom-color: #99c8ff; }