/* ═══════════════════════════════════════════════════════
   English Notes — styles.css
═══════════════════════════════════════════════════════ */

:root {
  --bg-deep:   #0f1117;
  --bg-panel:  #161b27;
  --bg-panel2: #1c2333;
  --bg-input:  #1e2535;
  --bg-hover:  #232c3f;
  --bg-active: #2a3550;
  --bg-surface: #1a2030;   /* note sheet, menus, modals */
  --text-strong: #ffffff;
  --border:    #1e2840;
  --border-l:  #2a3550;
  --text:      #e2e8f0;
  --muted:     #7a8aab;
  --faint:     #4a5568;
  --accent:    #4f8ef7;
  --accent-d:  #3a7ae0;
  --danger:    #ef4444;
  --mono:      'DM Mono', monospace;
  --sans:      'DM Sans', sans-serif;
  --radius:    10px;
  --shadow:    0 4px 24px rgba(0,0,0,.4);
  /* UI font size — controlled by settings */
  --ui-fs: 14px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body { font-family: var(--sans); background: var(--bg-deep); color: var(--text); font-size: var(--ui-fs); line-height: 1.5; }

.hidden { display: none !important; }

/* ═══════════════ LOGIN ═══════════════ */
.login-screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 40% 30%, #1a2540 0%, var(--bg-deep) 70%);
  z-index: 1000;
}
.login-screen.hidden { display: none; }
/* Keep the login contents invisible until main.js knows whether someone is already signed in (avoids a flash of the form) */
.login-screen:not(.ready) > * { visibility: hidden; }
.login-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-l);
  border-radius: 18px;
  padding: 36px 32px 28px;
  width: 340px;
  box-shadow: var(--shadow);
}
.login-logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.21em; font-weight: 600; color: var(--text);
  margin-bottom: 28px;
}
.login-roles { display: flex; flex-direction: column; gap: 10px; }
.login-sub   { color: var(--muted); font-size: 0.93em; margin-bottom: 4px; }
.login-role-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 14px 16px;
  background: var(--bg-input); border: 1px solid var(--border-l);
  border-radius: var(--radius); cursor: pointer;
  color: var(--text); font-size: 1.07em; font-weight: 500;
  font-family: var(--sans);
  transition: background .15s, border-color .15s;
  position: relative;
}
.login-role-btn:hover { background: var(--bg-hover); border-color: var(--accent); }
.login-role-btn.teacher:hover { border-color: #a78bfa; }
.login-role-btn span { font-size: 0.86em; color: var(--muted); font-weight: 400; }
.login-role-btn svg { margin-bottom: 4px; color: var(--accent); }
.login-role-btn.teacher svg { color: #a78bfa; }
.login-form { display: flex; flex-direction: column; gap: 10px; }
.login-form-title { font-size: 1.14em; font-weight: 600; }
.login-form-sub   { font-size: 0.89em; color: var(--muted); margin-top: -4px; }
.login-form input[type="text"],
.login-form input[type="email"],
.login-form input[type="password"] {
  padding: 10px 12px;
  background: var(--bg-input); border: 1px solid var(--border-l);
  border-radius: 8px; color: var(--text); font-size: 1em; font-family: var(--sans);
  outline: none; transition: border-color .15s;
}
.login-form input:focus { border-color: var(--accent); }
.login-submit-btn {
  padding: 10px; background: var(--accent); color: #fff;
  border: none; border-radius: 8px; font-size: 1em; font-weight: 600;
  cursor: pointer; transition: background .15s; font-family: var(--sans);
}
.login-submit-btn:hover { background: var(--accent-d); }
.login-back-btn {
  background: none; border: none; color: var(--muted); font-size: 0.93em;
  cursor: pointer; text-align: center; font-family: var(--sans); padding: 2px;
}
.login-back-btn:hover { color: var(--text); }
.login-error { color: #f87171; font-size: 0.89em; }
.login-forgot-link {
  background: none; border: none; color: var(--accent); font-size: 0.85em;
  cursor: pointer; text-align: right; align-self: flex-end;
  font-family: var(--sans); padding: 0; margin-top: -4px;
}
.login-forgot-link:hover { text-decoration: underline; }
.login-forgot-msg { font-size: 0.85em; color: var(--muted); }
.login-forgot-msg.ok  { color: #6ee7b7; }
.login-forgot-msg.err { color: #f87171; }
.login-loading { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); padding: 20px 0; }
.spinner { width: 20px; height: 20px; border: 2px solid var(--border-l); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════ APP LAYOUT ═══════════════ */
.app-layout {
  display: grid;
  grid-template-columns: 56px 240px 1fr;
  height: 100vh;
  overflow: hidden;
}
.app-layout.sidebar-collapsed {
  grid-template-columns: 56px 0 1fr;
}
.app-layout.groups-hidden {
  grid-template-columns: 0 240px 1fr;
}
.app-layout.groups-hidden.sidebar-collapsed {
  grid-template-columns: 0 0 1fr;
}
.app-layout.groups-hidden .groups-panel { overflow: hidden; min-width: 0; width: 0; }
.app-layout.sidebar-collapsed .notes-panel { overflow: hidden; padding: 0; min-width: 0; }
.app-layout.student-view {
  grid-template-columns: 200px 240px 1fr;
}
.app-layout.student-view.sidebar-collapsed {
  grid-template-columns: 200px 0 1fr;
}
.app-layout.student-view .groups-panel .panel-header { display: none; }
.app-layout.student-view .group-item-name { opacity: 1; }
.app-layout.student-view .groups-list { padding: 8px 6px; }
.app-layout.student-view .group-item { padding: 10px 6px; }
.app-layout.student-view .groups-panel {
  width: 200px;
}
.app-layout.student-view .groups-panel:hover {
  width: 200px;
  box-shadow: none;
}

/* ── Student nav items inside groupsPanel ── */
.app-layout.student-view .groups-list {
  padding: 6px 0;
}
.student-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background .12s;
}
.student-nav-item:hover { background: var(--bg-hover); }
.student-nav-item.active {
  background: var(--bg-active);
  border-left-color: var(--accent);
}
.student-nav-icon { font-size: 1em; line-height: 1; flex-shrink: 0; }
.student-nav-label {
  font-size: 0.88em;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.student-nav-item:hover .student-nav-label { color: var(--text); }
.student-nav-item.active .student-nav-label { color: var(--text-strong); }

/* ═══════════════ PANEL GRUPOS (columna izquierda estrecha) ═══════════════ */
.groups-panel {
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
  width: 56px;
  position: relative;
  z-index: 50;
  transition: width .22s cubic-bezier(.4,0,.2,1), box-shadow .22s ease;
}
.groups-panel:hover {
  width: 240px;
  box-shadow: 4px 0 24px rgba(0,0,0,.35);
}
.panel-header {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 6px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  min-height: 50px;
  overflow: hidden;
}
.groups-panel:hover .panel-header {
  justify-content: space-between;
  padding: 12px 10px;
}
.logo-small {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .05em;
  flex-shrink: 0;
}
/* Hide the text buttons in collapsed state, show on hover — groups panel only */
.groups-panel .panel-header .icon-btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.groups-panel:hover .panel-header .icon-btn {
  opacity: 1;
  pointer-events: auto;
}
.groups-list {
  flex: 1; overflow-y: auto; padding: 8px 4px;
  overflow-x: hidden;
}
.groups-panel:hover .groups-list {
  padding: 8px 6px;
}
.group-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 4px;
  border-radius: 8px; cursor: pointer;
  transition: background .12s, padding .22s ease;
  position: relative;
  overflow: hidden;
}
.groups-panel:hover .group-item {
  padding: 10px 6px;
}
.group-item:hover  { background: var(--bg-hover); }
.group-item.active { background: var(--bg-active); }
.group-item-icon { font-size: 1.43em; line-height: 1; flex-shrink: 0; }
.group-item-name-row {
  font-size: 12.5px; font-weight: 600; text-align: center; color: var(--muted);
  max-width: 226px; overflow: hidden; text-overflow: ellipsis; white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-height: 1.25; width: 100%;
  opacity: 0;
  transition: opacity .15s ease .05s;
}
.group-item-name { color: inherit; }
.groups-panel:hover .group-item-name-row {
  opacity: 1;
}
.group-item.active .group-item-name-row { color: var(--text); }
.group-item-code { display: none; }
.panel-empty {
  color: var(--faint); font-size: 0.79em; text-align: center;
  padding: 20px 8px; line-height: 1.6;
  opacity: 0;
  transition: opacity .15s ease .05s;
}
.groups-panel:hover .panel-empty { opacity: 1; }

/* Tooltip para grupos al hover */
.group-item:hover .group-item-name-row { color: var(--text); }

/* ═══════════════ PANEL NOTAS (columna central) ═══════════════ */
.notes-panel {
  background: var(--bg-panel2);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: min-width .2s;
}
.notes-header { gap: 6px; }
.current-group-label {
  font-size: 0.89em; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1;
}
.search-wrap {
  position: relative; padding: 8px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.search-icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
#searchInput {
  width: 100%; padding: 7px 10px 7px 30px;
  background: var(--bg-input); border: 1px solid var(--border-l);
  border-radius: 7px; color: var(--text); font-size: 0.93em; font-family: var(--sans); outline: none;
}
#searchInput:focus { border-color: var(--accent); }
.notes-list { flex: 1; overflow-y: auto; padding: 6px 0; }
.date-group-header {
  padding: 10px 12px 4px;
  font-size: 0.75em; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted);
}
.note-item {
  padding: 10px 14px;
  cursor: pointer; transition: background .12s;
  border-left: 3px solid transparent;
}
.note-item:hover  { background: var(--bg-hover); }
.note-item.active { background: var(--bg-active); border-left-color: var(--accent); }
.note-item-title {
  font-size: 0.93em; font-weight: 500; color: var(--text);
  display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.note-item.active .note-item-title { color: var(--text-strong); }

/* ═══════════════ EDITOR AREA ═══════════════ */
.editor-area {
  display: flex; flex-direction: column;
  background: var(--bg-deep);
  overflow: hidden; position: relative;
}
.editor-area.no-note .page-wrapper { display: none; }
.editor-area.no-note .toolbar       { display: none; }
.editor-area.no-note .error-legend  { display: none; }
.editor-area.no-note .empty-state   { display: flex; }
.editor-area:not(.no-note) .empty-state { display: none; }

/* ─── Topbar ─── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; height: 50px;
  background: var(--bg-panel); border-bottom: 1px solid var(--border);
  flex-shrink: 0; gap: 8px;
  /* Same protection as .act-panel-header — above both decoration root
     layers (spring z:2, World Cup bunting/confetti z:5) so garlands/bunting
     never dip into the topbar's own controls. */
  position: relative; z-index: 6;
}
.topbar-left  { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.sidebar-toggle {
  background: none; border: none; cursor: pointer; color: var(--muted);
  padding: 6px; border-radius: 6px; display: flex; align-items: center; flex-shrink: 0;
}
.sidebar-toggle:hover { background: var(--bg-hover); color: var(--text); }
.doc-title-input {
  flex: 1; min-width: 0;
  background: none; border: none; outline: none;
  font-size: 1.07em; font-weight: 600; font-family: var(--sans); color: var(--text);
}
.doc-title-input::placeholder { color: var(--faint); }
.doc-title-readonly {
  flex: 1; min-width: 0;
  font-size: 1.07em; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.save-status {
  font-size: 0.86em; color: var(--muted); opacity: 0; transition: opacity .3s;
  white-space: nowrap; display: flex; align-items: center; gap: 4px;
}
.save-status.visible  { opacity: 1; }
.save-status.saving   { color: var(--muted); }
.save-status.error    { color: #f87171; }
.meta-input {
  padding: 5px 8px;
  background: var(--bg-input); border: 1px solid var(--border-l);
  border-radius: 6px; color: var(--text); font-size: 0.89em; font-family: var(--sans);
  outline: none;
}
.meta-input:focus { border-color: var(--accent); }
.meta-input[readonly] { opacity: .6; cursor: default; }
.role-badge {
  padding: 3px 10px; border-radius: 20px;
  font-size: 0.82em; font-weight: 600; white-space: nowrap;
}
.role-badge.teacher { background: rgba(167,139,250,.15); color: #a78bfa; }
.role-badge.student { background: rgba(79,142,247,.15);  color: var(--accent); }
.topbar-btn {
  padding: 5px 10px; border-radius: 6px;
  background: var(--bg-input); border: 1px solid var(--border-l);
  color: var(--muted); font-size: 0.89em; cursor: pointer;
  font-family: var(--sans); transition: background .12s, color .12s;
  white-space: nowrap;
}
.topbar-btn:hover { background: var(--bg-hover); color: var(--text); }
.topbar-btn.logout-btn { color: #f87171; }
.topbar-btn.logout-btn:hover { background: rgba(239,68,68,.1); }
.topbar-btn.danger-btn { color: #f87171; padding: 5px 8px; }
.topbar-btn.danger-btn:hover { background: rgba(239,68,68,.1); }
.icon-btn {
  background: none; border: none; cursor: pointer;
  color: var(--muted); padding: 5px; border-radius: 6px;
  display: flex; align-items: center; transition: background .12s, color .12s;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text); }

/* ─── Toolbar ─── */
.toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
  padding: 5px 10px;
  background: var(--bg-panel); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.toolbar-group { display: flex; align-items: center; gap: 2px; }
.toolbar button {
  padding: 5px 8px; border-radius: 5px;
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 0.93em; font-family: var(--sans);
  transition: background .12s, color .12s;
}
.toolbar button:hover  { background: var(--bg-hover); color: var(--text); }
.toolbar button.active { background: var(--bg-active); color: var(--accent); }
.toolbar select {
  padding: 4px 6px; border-radius: 5px;
  background: var(--bg-input); border: 1px solid var(--border-l);
  color: var(--text); font-size: 0.89em; font-family: var(--sans); outline: none;
}
.divider { width: 1px; height: 20px; background: var(--border-l); margin: 0 3px; flex-shrink: 0; }
.font-size-group { gap: 4px; }
.font-size-display {
  min-width: 24px; text-align: center;
  font-size: 0.89em; color: var(--text); font-family: var(--mono);
}
.error-group { gap: 3px; }
.error-label { font-size: 0.82em; color: var(--faint); margin-right: 3px; }
.err-btn {
  padding: 3px 7px !important; font-size: 0.79em !important; font-weight: 700 !important; border-radius: 4px !important;
}
.err-btn[data-error="grammar"]       { color: #f87171 !important; }
.err-btn[data-error="word-order"]    { color: #fb923c !important; }
.err-btn[data-error="vocabulary"]    { color: #facc15 !important; }
.err-btn[data-error="pronunciation"] { color: #a78bfa !important; }
.err-btn[data-error="missing-word"]  { color: #34d399 !important; }
.err-btn[data-error="unnatural"]     { color: #22d3ee !important; }
.err-btn[data-error="cohesion"]      { color: #fb923c !important; }

/* ─── Error legend ─── */
.error-legend {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 5px 14px;
  background: var(--bg-panel); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.legend-item { font-size: 0.79em; font-weight: 600; padding: 2px 7px; border-radius: 4px; }
.legend-item[data-error="grammar"]       { background: rgba(248,113,113,.15); color: #f87171; }
.legend-item[data-error="word-order"]    { background: rgba(251,146,60,.15);  color: #fb923c; }
.legend-item[data-error="vocabulary"]    { background: rgba(250,204,21,.15);  color: #facc15; }
.legend-item[data-error="pronunciation"] { background: rgba(167,139,250,.15); color: #a78bfa; }
.legend-item[data-error="missing-word"]  { background: rgba(52,211,153,.15);  color: #34d399; }
.legend-item[data-error="unnatural"]     { background: rgba(34,211,238,.15);  color: #22d3ee; }
.legend-item[data-error="cohesion"]      { background: rgba(251,146,60,.15);  color: #fb923c; }

/* ─── Page ─── */
.page-wrapper {
  flex: 1; overflow-y: auto; padding: 32px 24px 40vh; /* room below the sheet so the last lines never sit at the screen's edge */
  display: flex; justify-content: center; align-items: flex-start;
}
.page {
  width: 100%; max-width: 820px;
  background: var(--bg-surface);
  border-radius: 10px; border: 1px solid var(--border-l);
  padding: 48px 56px;
  box-shadow: 0 2px 20px rgba(0,0,0,.3);
  box-sizing: border-box;
  position: relative; /* anchors .note-section-bar to this exact card */
  /* grow with content — no min-height cap */
}
.editor {
  min-height: 60vh; outline: none;
  line-height: 1.7; color: var(--text);
  font-family: var(--sans); font-size: 18px;
  word-wrap: break-word; overflow-wrap: break-word;
  position: relative; /* needed for absolute-positioned remote cursors */
  padding-top: 4px; /* prevent focused-element outline from being clipped at top */
}

/* Note section switcher (Notes / Grammar / Vocabulary / Pronunciation /
   Answer Key) — pinned snug to the sheet's top-left corner, flush against
   its left edge with no gap. position:fixed so it stays put on screen while
   .page-wrapper's content scrolls; app.js (positionNoteSectionBar) computes
   left/top from the sheet's current on-screen position. */
.note-section-bar {
  position: fixed;
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--bg-panel);
  border: 1px solid var(--border-l);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.note-section-bar[hidden] { display: none; }
.note-section-btn {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: none;
  background: none;
  color: #8b949e;
  font-family: var(--mono, monospace);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.note-section-btn:hover { background: rgba(255,255,255,.08); }
.note-section-btn.active { color: var(--text-strong); }

/* Per-section colors — Grammar/Vocabulary/Pronunciation mirror the exact
   red/yellow/violet already used for those same error types in the
   toolbar's error legend. Notes (blue, the app's accent) and Answer Key
   (neutral grey) get their own colors that don't collide with any error
   color (red, orange, yellow, violet, green, cyan, and Repetition's pink). */
.note-section-btn[data-section="notes"]         { color: #4f8ef7; }
.note-section-btn[data-section="grammar"]       { color: #f87171; }
.note-section-btn[data-section="vocabulary"]    { color: #facc15; }
.note-section-btn[data-section="pronunciation"] { color: #a78bfa; }
.note-section-btn[data-section="answerKey"]     { color: #a1a1aa; }

.note-section-btn[data-section="notes"].active         { background: #4f8ef7; color: #fff; }
.note-section-btn[data-section="grammar"].active       { background: #f87171; color: #0d1117; }
.note-section-btn[data-section="vocabulary"].active    { background: #facc15; color: #0d1117; }
.note-section-btn[data-section="pronunciation"].active { background: #a78bfa; color: #0d1117; }
.note-section-btn[data-section="answerKey"].active     { background: #a1a1aa; color: #0d1117; }
@media (max-width: 900px) {
  .note-section-btn { width: 32px; height: 32px; font-size: 13px; }
}
.editor:empty::before {
  content: attr(data-placeholder);
  color: var(--faint); pointer-events: none;
}
.editor h1 { font-size: 1.8em; font-weight: 700; margin: .5em 0 .3em; }
.editor h2 { font-size: 1.4em; font-weight: 600; margin: .5em 0 .3em; }
.editor h3 { font-size: 1.15em; font-weight: 600; margin: .5em 0 .3em; }
.editor p  { margin: .3em 0; min-height: 1.7em; }
/* Ensure caret is visible on empty lines (lines with only a <br>) */
.editor p:empty,
.editor p > br:only-child {
  display: block;
}
.editor p:has(> br:only-child) { min-height: 1.7em; }
.editor ul, .editor ol { padding-left: 1.6em; margin: .3em 0; }
.editor hr { border: none; border-top: 1px solid var(--border-l); margin: 1em 0; }
.editor table {
  border-collapse: collapse; margin: .5em 0;
  table-layout: fixed;   /* ← key: prevents auto-expand */
  width: auto;           /* don't stretch to 100% */
}
.editor td, .editor th {
  border: 1.5px solid #ffffff; padding: 6px 10px;
  font-size: .92em; background: #2a3550; color: var(--text);
  overflow: hidden; word-break: break-word;
  position: relative; min-width: 30px; vertical-align: top;
}
.editor th { background: #1e2840; font-weight: 600; }

/* Resize handle — invisible strip on right edge of each cell */
.col-resize-handle {
  position: absolute; top: 0; right: 0;
  width: 8px; height: 100%;
  cursor: col-resize; z-index: 10;
  background: transparent;
  user-select: none;
}
.col-resize-handle:hover,
.col-resize-handle.dragging {
  background: var(--accent);
  opacity: .6;
}
.editor blockquote { border-left: 3px solid var(--accent); padding-left: 12px; color: var(--muted); margin: .5em 0; }

/* ─── Error marks ─── */
[class^="err-"] {
  border-radius: 3px;
  padding: 2px 3px;
  cursor: help;
  /* box-decoration-break:clone makes background + border-radius render
     correctly on EACH LINE when a marked span wraps across lines */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  line-height: 1.7; /* match editor line-height to avoid spacing artifacts */
}
.err-grammar       { background: rgba(248,113,113,.25); color: #f87171; }
.err-word-order    { background: rgba(139,148,158,.15);  color: #8b949e; }
.err-vocabulary    { background: rgba(250,204,21,.25);  color: #facc15; }
.err-pronunciation { background: rgba(167,139,250,.25); color: #a78bfa; }
.err-missing-word  { background: rgba(52,211,153,.25);  color: #34d399; }
.err-unnatural     { background: rgba(34,211,238,.22);  color: #22d3ee; }
/* Tooltip shown via JS on hover — no ::after to avoid vertical line artifacts on adjacent lines */
.err-tooltip {
  position: fixed; z-index: 9700;
  background: var(--bg-input); color: var(--text); font-size: 11px; padding: 3px 8px;
  border-radius: 5px; border: 1px solid var(--border-l); white-space: nowrap;
  pointer-events: none; font-family: var(--sans);
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.correct-mark { user-select: none; }
.common-mistake {
  background: rgba(251,146,60,.18);
  border-bottom: 2px solid #fb923c;
  border-radius: 2px;
  cursor: pointer;
}
.commented-text {
  background: rgba(79, 142, 247, 0.15);
  border-bottom: 1px dashed var(--accent);
  cursor: help;
  position: relative;
}

.img-attached-text {
  background: rgba(63, 185, 80, 0.15);
  border-bottom: 1px dashed #3fb950;
  cursor: help;
}
.img-attach-preview {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 40;
  background: var(--bg-panel);
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
}
.img-attach-preview img {
  display: block;
  max-width: 560px;
  max-height: 480px;
  border-radius: 4px;
  object-fit: contain;
  cursor: zoom-in;
}
.img-attach-zoom-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.img-attach-zoom-overlay.hidden { display: none; }
.img-attach-zoom-overlay img {
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

/* ─── Comment Input Bubble ─── */
.comment-bubble {
  position: fixed; z-index: 9100;
  background: var(--bg-panel); border: 1px solid var(--border-l);
  border-radius: 8px; padding: 10px;
  box-shadow: var(--shadow);
  width: 400px;
  display: flex; flex-direction: column; gap: 8px;
}
.comment-bubble textarea {
  width: 100%; height: 70px; resize: none;
  background: var(--bg-input); border: 1px solid var(--border-l);
  border-radius: 4px; color: var(--text); font-family: var(--sans); font-size: 13px; padding: 8px;
  outline: none;
}
.comment-bubble textarea:focus { border-color: var(--accent); }
.comment-bubble input[type="text"] {
  width: 100%;
  background: var(--bg-input); border: 1px solid var(--border-l);
  border-radius: 4px; color: var(--text); font-family: var(--sans); font-size: 13px; padding: 8px;
  outline: none;
}
.comment-bubble input[type="text"]:focus { border-color: var(--accent); }
.comment-bubble-actions { display: flex; justify-content: flex-end; gap: 6px; }
.comment-bubble-actions button { padding: 5px 12px; border-radius: 4px; border: none; cursor: pointer; font-size: 12px; font-weight: 600; }
#saveCommentBtn, #saveImgAttachBtn { background: var(--accent); color: white; }
#cancelCommentBtn, #cancelImgAttachBtn { background: transparent; color: var(--muted); border: 1px solid var(--border-l); }
#cancelCommentBtn:hover { background: var(--bg-hover); color: var(--text); }

/* ─── Empty state ─── */
.empty-state {
  position: absolute; inset: 0; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; color: var(--muted);
}
.empty-state p { font-size: 15px; }
/* The empty state fills the whole editor area (including the topbar): let clicks pass through it,
   otherwise the Menu button can't be clicked when there is no note / no group. */
.empty-state { pointer-events: none; }
.empty-state > * { pointer-events: auto; }
.empty-state .empty-hint { max-width: 380px; text-align: center; font-size: 14px; line-height: 1.6; color: var(--muted); }
.empty-new-btn {
  padding: 8px 18px; background: var(--accent); color: #fff;
  border: none; border-radius: 8px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: background .15s; font-family: var(--sans);
}
.empty-new-btn:hover { background: var(--accent-d); }

/* ═══════════════ CONTEXT MENU ═══════════════ */
.ctx-menu {
  position: fixed; z-index: 9000;
  background: var(--bg-surface); border: 1px solid var(--border-l);
  border-radius: 9px; padding: 5px; min-width: 180px;
  box-shadow: var(--shadow); font-size: 13px;
}
.ctx-item {
  padding: 7px 12px; border-radius: 5px; cursor: pointer;
  color: var(--text); display: flex; align-items: center; gap: 6px;
  position: relative; user-select: none; white-space: nowrap;
}
.ctx-item:hover { background: var(--bg-hover); }
.ctx-divider   { height: 1px; background: var(--border); margin: 4px 6px; }
.ctx-has-sub > .sub-arrow  { margin-left: auto; opacity: .5; }
.ctx-submenu {
  position: fixed; z-index: 9001;
  background: var(--bg-surface); border: 1px solid var(--border-l);
  border-radius: 9px; padding: 5px; min-width: 200px;
  box-shadow: var(--shadow); display: none;
}
.ctx-err-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.ctx-err-dot[data-error="grammar"]       { background: #f87171; }
.ctx-err-dot[data-error="word-order"]    { background: #fb923c; }
.ctx-err-dot[data-error="vocabulary"]    { background: #facc15; }
.ctx-err-dot[data-error="pronunciation"] { background: #a78bfa; }
.ctx-err-dot[data-error="missing-word"]  { background: #34d399; }
.ctx-err-dot[data-error="unnatural"]     { background: #22d3ee; }
.ctx-remove-err { color: #f87171; }
.ctx-correct    { color: #34d399; }
.ctx-danger     { color: #f87171; }

/* ═══════════════ MODALS ═══════════════ */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 8000;
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--bg-panel); border: 1px solid var(--border-l);
  border-radius: 14px; padding: 24px; width: 400px; max-width: 95vw;
  box-shadow: var(--shadow);
}
.modal h3 { font-size: 16px; font-weight: 600; margin-bottom: 18px; }
.modal p { color: var(--muted); font-size: 14px; }
.modal-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.modal-field label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.modal-field input[type="text"],
.modal-field input[type="date"] {
  padding: 9px 12px;
  background: var(--bg-input); border: 1px solid var(--border-l);
  border-radius: 8px; color: var(--text); font-size: 13.5px; font-family: var(--sans);
  outline: none; transition: border-color .15s;
}
.modal-field input:focus { border-color: var(--accent); }
.modal-error { color: #f87171; font-size: 12.5px; margin-top: -8px; margin-bottom: 6px; }
.modal-actions { display: flex; gap: 8px; margin-top: 18px; align-items: center; }
.modal-actions button {
  flex: 1; padding: 9px; border-radius: 8px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; font-family: var(--sans); border: 1px solid var(--border-l);
  background: var(--bg-input); color: var(--muted); transition: background .12s;
}
.modal-actions button:hover { background: var(--bg-hover); color: var(--text); }
.modal-actions button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.modal-actions button.primary:hover { background: var(--accent-d); }
.modal-actions button.danger  { background: rgba(239,68,68,.1); color: #f87171; border-color: rgba(239,68,68,.3); flex: 0; padding: 9px 14px; }
.modal-actions button.danger:hover { background: rgba(239,68,68,.2); }
.field-hint { font-size: 11px; color: var(--faint); }
.code-input-wrap { display: flex; gap: 6px; }
.code-input-wrap input { flex: 1; }
.gen-code-btn {
  padding: 8px 12px; background: var(--bg-hover); border: 1px solid var(--border-l);
  border-radius: 8px; color: var(--muted); cursor: pointer; font-size: 16px;
  transition: background .12s;
}
.gen-code-btn:hover { background: var(--bg-active); color: var(--text); }

/* ─── Table modal ─── */
.table-modal { max-width: 340px; }
.table-inputs { display: flex; gap: 16px; margin-bottom: 14px; }
.table-inputs label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); flex: 1; }
.table-inputs input { padding: 7px 10px; background: var(--bg-input); border: 1px solid var(--border-l); border-radius: 6px; color: var(--text); font-size: 13px; outline: none; }
.table-preview { display: grid; gap: 2px; margin-bottom: 14px; min-height: 40px; }
.tp-cell { height: 18px; background: var(--bg-hover); border-radius: 2px; }
.tp-cell.header { background: var(--bg-active); }

/* ─── Profile modal ─── */
.profile-modal { max-width: 360px; }
.color-pick-row { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.color-pick-row input[type="color"] {
  width: 38px; height: 34px; border: 1px solid var(--border-l); border-radius: 7px;
  padding: 2px; background: var(--bg-input); cursor: pointer; flex-shrink: 0;
}
.color-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.color-preset {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: transform .1s, border-color .1s;
}
.color-preset:hover { transform: scale(1.2); border-color: #fff; }
.avatar-preview-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.avatar-preview {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; color: #fff;
  background: var(--accent); flex-shrink: 0; border: 2px solid var(--border-l);
}
.avatar-preview-label { font-size: 12px; color: var(--muted); }

/* ═══════════════ COLLABORATORS ═══════════════ */
.collaborators { display: flex; align-items: center; gap: 2px; }
.collab-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
  border: 2px solid var(--bg-deep); cursor: default; user-select: none;
  margin-left: -4px; flex-shrink: 0;
}
.collab-avatar:first-child { margin-left: 0; }
.collab-avatar:hover { transform: translateY(-2px); z-index: 1; }
.collab-avatar.is-typing { animation: typing-pulse 1s ease-in-out infinite; }
@keyframes typing-pulse { 0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)} }
.collab-count { font-size: 11px; color: var(--muted); margin-left: 6px; white-space: nowrap; }
.typing-indicator { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); margin-left: 6px; white-space: nowrap; animation: fadeIn .2s; }
@keyframes fadeIn { from{opacity:0;transform:translateY(2px)} to{opacity:1;transform:none} }
.typing-dots { display: flex; gap: 2px; align-items: center; }
.typing-dots span { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); display: block; animation: dot-bounce .9s ease-in-out infinite; }
.typing-dots span:nth-child(2){animation-delay:.15s}
.typing-dots span:nth-child(3){animation-delay:.30s}
@keyframes dot-bounce { 0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-4px);opacity:1} }

/* ═══════════════ IMÁGENES ═══════════════ */
.img-wrapper { position: relative; display: inline-block; cursor: default; vertical-align: middle; line-height: 0; overflow: visible; }
.img-wrapper img { display: block; width: 100%; height: 100%; max-width: none; border-radius: 4px; user-select: none; }
.img-wrapper.selected img { outline: 2px solid var(--accent); border-radius: 4px; }
.img-wrapper.selected { cursor: grab; }
.img-wrapper.selected:active { cursor: grabbing; }
.img-wrapper.img-dragging { opacity: .3; }
.editor.img-drag-active { cursor: copy; }
.img-toolbar {
  position: absolute; top: -38px; left: 50%; transform: translateX(-50%);
  background: var(--bg-surface); border: 1px solid var(--border-l);
  border-radius: 7px; padding: 3px; gap: 2px;
  box-shadow: var(--shadow); z-index: 10; white-space: nowrap;
}
.img-toolbar button {
  padding: 4px 7px; border-radius: 4px; background: none;
  border: none; color: #ffffff; font-size: 12px; cursor: pointer;
  font-family: var(--sans);
}
.img-toolbar button:hover { background: var(--bg-hover); color: var(--text); }
.itb-divider { width: 1px; height: 16px; background: var(--border-l); margin: 0 2px; display: inline-block; vertical-align: middle; }
.img-resize-handle {
  position: absolute; width: 12px; height: 12px;
  background: var(--accent); border: 2px solid #fff;
  border-radius: 50%; z-index: 11;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
  display: none;
}
.img-wrapper.selected .img-resize-handle { display: block; }
.img-resize-handle.nw { top: -6px; left: -6px; cursor: nw-resize; }
.img-resize-handle.n  { top: -6px; left: 50%; transform: translateX(-50%); cursor: n-resize; }
.img-resize-handle.ne { top: -6px; right: -6px; cursor: ne-resize; }
.img-resize-handle.w  { top: 50%; left: -6px; transform: translateY(-50%); cursor: w-resize; }
.img-resize-handle.sw { bottom: -6px; left: -6px; cursor: sw-resize; }
.img-resize-handle.se { bottom: -6px; right: -6px; cursor: se-resize; }
.img-resize-handle.e  { top: 50%; right: -6px; transform: translateY(-50%); cursor: e-resize; }
.img-resize-handle.s  { bottom: -6px; left: 50%; transform: translateX(-50%); cursor: s-resize; }

.img-size-badge {
  position: absolute; bottom: 6px; left: 6px;
  background: rgba(0,0,0,.75); color: #fff;
  font-size: 10px; padding: 2px 5px; border-radius: 4px;
  pointer-events: none; display: none; font-family: var(--mono);
}
.img-drag-ghost {
  position: fixed; pointer-events: none; z-index: 9999;
  border: 2px dashed var(--accent); border-radius: 4px;
  background: rgba(79,142,247,.08);
}
.drop-caret {
  position: fixed; width: 2px; background: var(--accent);
  pointer-events: none; z-index: 9998; border-radius: 1px; display: none;
}

/* ═══════════════ SCROLLBAR ═══════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-l); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--faint); }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width: 700px) {

  /* ── Layout: full-width single column ── */
  .app-layout {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  .app-layout.student-view {
    grid-template-columns: 1fr;
  }
  .app-layout.student-view .groups-panel,
  .app-layout.student-view .notes-panel { display: none; }
  .groups-panel, .notes-panel { display: none; }

  /* Slide-in panels as overlays */
  .app-layout.mobile-show-notes .notes-panel {
    display: flex;
    position: fixed;
    left: 0; top: 0; bottom: 0;
    z-index: 500;
    width: 280px;
    box-shadow: 4px 0 24px rgba(0,0,0,.5);
  }
  .app-layout.mobile-show-groups .groups-panel {
    display: flex;
    position: fixed;
    left: 0; top: 0; bottom: 0;
    z-index: 501;
    width: 100px;
    box-shadow: 4px 0 24px rgba(0,0,0,.5);
  }

  /* ── Topbar ── */
  .topbar { padding: 0 10px; height: 50px; gap: 6px; }
  .doc-title-input, .doc-title-readonly { font-size: .95em; }
  .role-badge { display: none; }
  .meta-input[type="date"] { display: none; }
  .save-status { display: none; }
  /* Hide secondary topbar buttons, keep only menu + toggle */
  .topbar-btn:not(#topbarMenuBtn) { display: none; }
  #topbarMenuBtn { font-size: .82em; padding: 5px 8px; }

  /* ── Toolbar: scrollable single row ── */
  .toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 8px;
    gap: 1px;
  }
  .toolbar::-webkit-scrollbar { display: none; }
  .toolbar button { padding: 5px 7px; font-size: .85em; flex-shrink: 0; }
  .toolbar select { font-size: .82em; max-width: 90px; flex-shrink: 0; }
  .divider { flex-shrink: 0; }
  .font-size-display { display: none; }

  /* ── Page / Editor ── */
  .page-wrapper { padding: 12px 8px; }
  .page {
    padding: 20px 16px;
    border-radius: 8px;
  }
  .editor { font-size: 16px; }

  /* ── Error legend: hide on mobile ── */
  .error-legend { display: none !important; }

  /* ── Login screen ── */
  .login-card {
    width: calc(100vw - 32px);
    padding: 28px 20px 22px;
    border-radius: 14px;
  }

  /* ── Modals: full-width ── */
  .modal-overlay { padding: 12px; }
  .modal { width: 100% !important; max-width: 100% !important; padding: 20px 16px; }

  /* ── Context menu: larger touch targets ── */
  .ctx-item { padding: 10px 14px; font-size: 14px; }

  /* ── Radial menu: slightly smaller to fit screen ── */
  #radialMenu { transform-origin: center; }

  /* ── Activity panel ── */
  .act-picker-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .act-panel-title { font-size: 13px; }

  /* ── Table context menu ── */
  #tableCtxMenu { max-width: calc(100vw - 24px); }

  /* ── Topbar dropdown ── */
  .topbar-dropdown {
    right: 8px !important;
    left: auto !important;
    max-width: calc(100vw - 16px);
  }
}

/* ═══════════════ ITALIC CURSOR ═══════════════ */
.editor.italic-active {
  caret-color: transparent; /* hide native caret */
}
#italicCaret {
  position: fixed;
  width: 2px;
  background: var(--text);
  pointer-events: none;
  z-index: 200;
  border-radius: 1px;
  transform: skewX(-12deg);
  animation: caret-blink 1.1s step-end infinite;
  display: none;
}
@keyframes caret-blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ═══════════════ REMOTE CURSORS ═══════════════ */
#remote-cursors {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 0;
  pointer-events: none; z-index: 40;
  overflow: visible;
}
.remote-cursor-wrap {
  position: absolute;
  pointer-events: none;
}
.remote-cursor-line {
  width: 2px; height: 100%;
  border-radius: 1px;
  animation: rc-blink 1.1s ease-in-out infinite;
}
@keyframes rc-blink { 0%,100%{opacity:1} 45%,55%{opacity:.15} }
.remote-cursor-label {
  position: absolute;
  top: -19px; left: 0;
  color: #fff;
  font-size: 11px; font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px 3px 3px 0;
  white-space: nowrap;
  font-family: var(--sans);
  line-height: 1.4;
  pointer-events: none;
}

/* ═══════════════ TOOLTIP GRUPOS ═══════════════ */
.group-item { position: relative; }
.group-tooltip {
  position: fixed;
  background: var(--bg-surface);
  border: 1px solid var(--border-l);
  color: var(--text);
  font-size: 12px;
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999;
  box-shadow: var(--shadow);
  opacity: 0;
  transition: opacity .15s;
}
.group-tooltip.visible { opacity: 1; }

/* ═══════════════ SETTINGS MODAL ═══════════════ */
.settings-modal { max-width: 560px; max-height: 88vh; overflow-y: auto; }
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.settings-row:last-child { border-bottom: none; }
.settings-label { font-size: 13.5px; color: var(--text); }
.settings-hint  { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.settings-row input[type="number"] {
  width: 72px; padding: 6px 10px;
  background: var(--bg-input); border: 1px solid var(--border-l);
  border-radius: 6px; color: var(--text); font-size: 14px; font-family: var(--sans);
  outline: none; text-align: center;
}
.settings-row input[type="number"]:focus { border-color: var(--accent); }

/* ═══════════════ SPELL CHECK UNDERLINES ═══════════════ */
/* Red underline = likely spelling error (via browser spellcheck) */
/* Blue underline = grammar/style suggestion overlay */
.spell-error {
  text-decoration: underline wavy #ef4444;
  text-decoration-skip-ink: none;
}
.spell-grammar {
  text-decoration: underline wavy #3b82f6;
  text-decoration-skip-ink: none;
}

/* ═══════════════ COMMENT HIGHLIGHT ═══════════════ */
.commented-text {
  background: rgba(253, 224, 71, 0.18) !important;
  border-bottom: 1px dashed #fbbf24 !important;
  cursor: help;
  position: relative;
}

/* ═══════════════ SIDEBAR TOGGLE POSITION ═══════════════ */
.topbar-sidebar-toggle {
  background: none; border: none; cursor: pointer; color: var(--muted);
  padding: 6px; border-radius: 6px; display: flex; align-items: center; flex-shrink: 0;
}
.topbar-sidebar-toggle:hover { background: var(--bg-hover); color: var(--text); }

/* ═══════════════ TABLE CONTEXT MENU ═══════════════ */
.table-ctx-menu {
  position: fixed; z-index: 9500;
  background: var(--bg-surface); border: 1px solid var(--border-l);
  border-radius: 9px; padding: 5px; min-width: 230px;
  box-shadow: var(--shadow); font-size: 0.93em;
  display: none;
}
.table-ctx-menu .ctx-item { padding: 7px 12px; border-radius: 5px; cursor: pointer;
  color: var(--text); display: flex; align-items: center; gap: 8px; user-select: none; }
.table-ctx-menu .ctx-item:hover { background: var(--bg-hover); }
.table-ctx-menu .ctx-divider { height: 1px; background: var(--border); margin: 4px 6px; }
.table-ctx-menu .ctx-item.danger { color: #f87171; }
/* styling rows */
.table-ctx-style-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 12px;
  font-size: 0.86em; color: var(--muted);
}
.table-ctx-style-row label { flex: 1; }
.table-ctx-style-row .color-swatch-btn {
  width: 26px; height: 26px; border-radius: 5px; border: 2px solid var(--border-l);
  cursor: pointer; position: relative; overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; transition: border-color .15s;
}
.table-ctx-style-row .color-swatch-btn:hover { border-color: var(--accent); }
.table-ctx-style-row .color-swatch-btn input[type="color"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.table-ctx-style-row select {
  flex: 1; padding: 3px 6px; background: var(--bg-input); border: 1px solid var(--border-l);
  color: var(--text); border-radius: 5px; font-size: 0.93em; outline: none;
}

/* ═══════════════ HIGHLIGHT / CALLOUT BOX ═══════════════ */
.highlight-box {
  border-radius: 7px;
  padding: 12px 16px;
  margin: 8px 0;
  display: block;
  border-left: 4px solid #facc15;
  background: rgba(250,204,21,.10);
  color: var(--text);
  font-style: normal;
}
.highlight-box .hb-label {
  font-size: 0.79em; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: 5px; display: block;
  color: #facc15; opacity: .9;
}

/* ═══════════════ HIGHLIGHT MODAL ═══════════════ */
.highlight-modal { max-width: 340px; }
.hb-label-input { margin-top: 4px; }
.hb-label-input input {
  width: 100%; padding: 7px 10px;
  background: var(--bg-input); border: 1px solid var(--border-l);
  border-radius: 6px; color: var(--text); font-size: 0.93em; font-family: var(--sans);
  outline: none;
}
.hb-label-input input:focus { border-color: var(--accent); }

/* ═══════════════ SPELL CHECK ═══════════════ */
.sp-error {
  text-decoration: underline wavy #ef4444;
  text-decoration-skip-ink: none;
  cursor: pointer;
}
.sp-grammar {
  text-decoration: underline wavy #3b82f6;
  text-decoration-skip-ink: none;
}
/* Spell suggestion tooltip */
.spell-tooltip {
  position: fixed; z-index: 9600;
  background: var(--bg-surface); border: 1px solid var(--border-l);
  border-radius: 8px; padding: 6px;
  box-shadow: var(--shadow); min-width: 160px;
  font-size: 13px; display: none;
}
.spell-suggestion {
  padding: 6px 12px; border-radius: 5px; cursor: pointer;
  color: var(--text); display: flex; align-items: center; gap: 6px;
}
.spell-suggestion:hover { background: var(--bg-hover); }
.spell-suggestion.primary { color: var(--accent); font-weight: 600; }
.spell-ignore { padding: 5px 12px; color: var(--muted); font-size: 12px; cursor: pointer; border-radius: 5px; }
.spell-ignore:hover { background: var(--bg-hover); color: var(--text); }
.spell-divider { height: 1px; background: var(--border); margin: 3px 6px; }

/* ═══════════════ GROUPS PANEL TRANSITION ═══════════════ */
.app-layout { transition: grid-template-columns .22s cubic-bezier(.4,0,.2,1); }
.groups-panel { transition: width .22s cubic-bezier(.4,0,.2,1), box-shadow .22s ease, min-width .22s ease; overflow: hidden; }

/* ═══════════════ SPELL TOOLTIP EXTRAS ═══════════════ */
.spell-msg {
  padding: 5px 12px 2px; font-size: 0.82em; color: var(--muted);
  max-width: 240px; line-height: 1.4; white-space: normal;
}
.spell-tooltip { min-width: 180px; max-width: 280px; }

/* ═══════════════ TABLE CELL SELECTION ═══════════════ */
.editor td.cell-selected,
.editor th.cell-selected {
  outline: 2px solid var(--accent) !important;
  outline-offset: -2px;
}
.focused-element {
  background-color: rgba(79, 142, 247, 0.12) !important;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
  transition: background-color 0.3s, outline 0.3s;
  animation: focus-pulse 2s ease-in-out 3;
}
@keyframes focus-pulse {
  0%, 100% { outline: 2px solid var(--accent); }
  50%       { outline: 3px solid var(--accent); }
}
.tbl-apply-btn {
  flex: 1; padding: 4px 6px; border-radius: 5px;
  background: var(--bg-hover); border: 1px solid var(--border-l);
  color: var(--muted); font-size: 0.79em; cursor: pointer;
  font-family: var(--sans); transition: background .12s, color .12s;
}
.tbl-apply-btn:hover { background: var(--bg-active); color: var(--text); }

/* ═══════════════ SPELL CHECK STATUS ═══════════════ */
.spell-status {
  position: fixed; bottom: 12px; right: 16px;
  font-size: 0.79em; color: var(--muted);
  background: var(--bg-panel); border: 1px solid var(--border-l);
  padding: 3px 10px; border-radius: 20px;
  pointer-events: none; opacity: 0;
  transition: opacity .3s;
  z-index: 100;
}
.spell-status.visible { opacity: 1; pointer-events: auto; }

/* ═══════════════ TOGGLE SWITCH ═══════════════ */
.toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; cursor: pointer; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-track {
  position: absolute; inset: 0;
  background: var(--bg-active); border-radius: 22px;
  transition: background .2s;
}
.toggle-track::after {
  content: ''; position: absolute;
  left: 3px; top: 3px;
  width: 16px; height: 16px;
  background: #fff; border-radius: 50%;
  transition: transform .2s;
}
.toggle-switch input:checked + .toggle-track { background: var(--accent); }
.toggle-switch input:checked + .toggle-track::after { transform: translateX(18px); }

/* ═══════════════ AUDIO BLOCKS ═══════════════ */
.audio-block {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-hover); border: 1px solid var(--border-l);
  border-radius: 8px; padding: 8px 10px;
  margin: 6px 0; max-width: 480px;
}
.audio-del-btn {
  background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: 14px; padding: 2px 6px;
  border-radius: 4px; flex-shrink: 0;
}
.audio-del-btn:hover { background: var(--bg-active); color: var(--danger); }

/* Visualizer bars */
.audio-bar {
  display: inline-block; width: 4px; height: 6px;
  background: var(--accent); border-radius: 2px;
  transition: height .1s;
}
#audioVisualizer.recording .audio-bar:nth-child(1) { animation: bar-bounce .6s ease infinite 0s; }
#audioVisualizer.recording .audio-bar:nth-child(2) { animation: bar-bounce .6s ease infinite .1s; }
#audioVisualizer.recording .audio-bar:nth-child(3) { animation: bar-bounce .6s ease infinite .2s; }
#audioVisualizer.recording .audio-bar:nth-child(4) { animation: bar-bounce .6s ease infinite .1s; }
#audioVisualizer.recording .audio-bar:nth-child(5) { animation: bar-bounce .6s ease infinite 0s; }
@keyframes bar-bounce {
  0%,100% { height: 6px; }
  50%      { height: 24px; }
}

/* ═══════════════ AUDIO ANCHORS ═══════════════ */
.audio-anchor {
  display: inline;
  cursor: pointer;
  font-size: 1em;
  user-select: none;
  border-radius: 3px;
  padding: 0 1px;
  transition: background .15s;
}
.audio-anchor:hover { background: rgba(79,142,247,.18); }

.audio-popup {
  position: absolute;
  z-index: 9999;
  background: var(--bg-surface);
  border: 1px solid var(--border-l);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  gap: 8px;
}
.audio-popup-close {
  background: none; border: none;
  color: var(--muted); font-size: 14px;
  cursor: pointer; padding: 2px 6px;
  border-radius: 4px; flex-shrink: 0;
}
.audio-popup-close:hover { background: var(--bg-active); color: var(--danger); }

/* ═══════════════ COLOR PICKERS IN TOOLBAR ═══════════════ */
.color-picker-wrap {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 27px; border-radius: 5px; cursor: pointer;
  border: 1px solid var(--border-l); background: var(--bg-input);
  overflow: visible; transition: border-color .12s;
}
.color-picker-wrap:hover { border-color: var(--accent); }
.color-picker-wrap input[type="color"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.color-picker-icon {
  font-size: 13px; font-weight: 800; color: var(--text);
  pointer-events: none; user-select: none; line-height: 1;
}
.color-picker-icon-bg { font-size: 15px; }

/* ── Custom color palette dropdown ── */
.color-palette-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 9000;
  background: var(--bg-panel2);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
  width: 220px;
}
.color-palette-dropdown.open { display: block; }
.color-palette-grid {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 3px;
  margin-bottom: 8px;
}
.color-swatch {
  width: 16px; height: 16px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.1);
  transition: transform .1s, box-shadow .1s;
  flex-shrink: 0;
}
.color-swatch:hover { transform: scale(1.35); box-shadow: 0 2px 8px rgba(0,0,0,.5); border-color: rgba(255,255,255,.4); }
.color-palette-custom {
  display: flex; align-items: center; gap: 6px;
  padding-top: 7px; border-top: 1px solid rgba(255,255,255,.08);
}
.color-palette-custom input[type="color"] {
  width: 20px; height: 20px; border: 1px solid rgba(255,255,255,.2);
  background: none; cursor: pointer; padding: 0; border-radius: 4px;
}
.color-palette-custom-label {
  font-size: 11px; color: #8b949e; cursor: pointer;
}
.toolbar-clear-color {
  padding: 3px 5px !important; font-size: 10px !important;
  color: var(--faint) !important; border-radius: 4px !important;
}
.toolbar-clear-color:hover { color: var(--danger) !important; background: rgba(239,68,68,.1) !important; }

/* ═══════════════ ARCHIVED ITEMS IN NOTES LIST ═══════════════ */
.notes-archived-section { margin-top: 8px; }
.notes-archived-header {
  font-size: 11px; font-weight: 600; color: var(--faint);
  padding: 6px 12px 3px; text-transform: uppercase; letter-spacing: .06em;
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  user-select: none;
}
.notes-archived-header:hover { color: var(--muted); }
.note-item.archived { opacity: 0.55; }
.note-item.archived .note-item-title::before { content: '📦 '; font-size: 10px; }
.group-item.archived { opacity: 0.5; }
.group-item.archived .group-item-name::before { content: '📦 '; font-size: 10px; }
.btn-archive {
  padding: 9px 14px; border-radius: 8px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; font-family: var(--sans);
  background: rgba(250,204,21,.1); color: #facc15;
  border: 1px solid rgba(250,204,21,.3); flex: 0;
  transition: background .12s;
}
.btn-archive:hover { background: rgba(250,204,21,.2); }

/* ═══════════════ VERSION HISTORY MODAL ═══════════════ */
.version-modal { max-width: 820px; width: 95vw; }
.version-hint { font-size: 12px; color: var(--muted); margin: -10px 0 14px; }
.version-layout { display: grid; grid-template-columns: 220px 1fr; gap: 12px; height: 420px; }
.version-list {
  overflow-y: auto; border: 1px solid var(--border-l);
  border-radius: 8px; background: var(--bg-input);
}
.version-loading { padding: 20px; text-align: center; color: var(--muted); font-size: 13px; }
.version-item {
  padding: 9px 12px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .12s;
  font-size: 12.5px;
}
.version-item:last-child { border-bottom: none; }
.version-item:hover { background: var(--bg-hover); }
.version-item.active { background: var(--bg-active); }
.version-item-time { font-weight: 600; color: var(--text); }
.version-item-by { color: var(--muted); font-size: 11px; margin-top: 2px; }
.version-preview-wrap {
  border: 1px solid var(--border-l); border-radius: 8px;
  background: var(--bg-surface); overflow: hidden;
  display: flex; flex-direction: column;
}
.version-preview-label {
  padding: 7px 12px; font-size: 11.5px; color: var(--muted);
  border-bottom: 1px solid var(--border); background: var(--bg-input);
  font-weight: 600;
}
.version-preview {
  flex: 1; overflow-y: auto; padding: 16px 20px;
  font-family: var(--sans); font-size: 15px; color: var(--text);
  line-height: 1.7; pointer-events: none;
}

/* ═══════════════ WHITEBOARD MODAL ═══════════════ */
.whiteboard-modal {
  max-width: 98vw; width: 98vw; padding: 0;
  height: 92vh; display: flex; flex-direction: column;
  border-radius: 14px; overflow: hidden;
}
.whiteboard-topbar {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  background: var(--bg-panel); border-bottom: 1px solid var(--border);
  flex-shrink: 0; flex-wrap: wrap;
}
.whiteboard-title { font-size: 14px; font-weight: 700; color: var(--text); margin-right: 6px; white-space: nowrap; }
.whiteboard-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; }
.wb-tool {
  padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border-l);
  background: var(--bg-input); color: var(--text); cursor: pointer;
  font-size: 15px; font-weight: 600; transition: background .12s, color .12s, border-color .12s;
}
.wb-tool:hover { background: var(--bg-hover); color: var(--text); }
.wb-tool.active { background: var(--bg-active); border-color: var(--accent); color: var(--accent); }
.wb-action {
  padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border-l);
  background: var(--bg-input); color: var(--text); cursor: pointer;
  font-size: 13px; font-weight: 500; transition: background .12s, color .12s;
  white-space: nowrap;
}
.wb-action:hover { background: var(--bg-hover); color: var(--text); }
.wb-divider { width: 1px; height: 22px; background: var(--border-l); margin: 0 2px; }
.wb-size-wrap { display: flex; align-items: center; gap: 6px; }
.wb-size-wrap input[type="range"] { width: 80px; accent-color: var(--accent); }
#wbSizeLabel { font-size: 12px; font-weight: 600; color: var(--text); min-width: 30px; }
#wbColor { width: 32px; height: 30px; border-radius: 5px; border: 2px solid var(--border-l); padding: 1px; background: var(--bg-input); cursor: pointer; }
.wb-close {
  margin-left: auto; padding: 5px 10px; border-radius: 6px; border: none;
  background: none; color: var(--muted); cursor: pointer; font-size: 15px; flex-shrink: 0;
}
.wb-close:hover { background: var(--bg-hover); color: var(--text); }
.whiteboard-canvas-wrap {
  flex: 1; overflow: hidden; background: #ffffff;
  display: flex; align-items: stretch; justify-content: stretch;
}
#whiteboardCanvas { display: block; width: 100%; height: 100%; touch-action: none; }

/* ═══════════════ ARCHIVED MODAL ═══════════════ */
.archived-modal { max-width: 480px; }
.archived-tabs { display: flex; gap: 4px; margin: -8px 0 14px; }
.archived-tab {
  flex: 1; padding: 7px; border-radius: 7px; border: 1px solid var(--border-l);
  background: var(--bg-input); color: var(--muted); cursor: pointer;
  font-size: 13px; font-weight: 500; transition: background .12s, color .12s;
  font-family: var(--sans);
}
.archived-tab.active { background: var(--bg-active); color: var(--text); border-color: var(--accent); }
.archived-list { max-height: 340px; overflow-y: auto; }
.archived-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 7px; margin-bottom: 4px;
  background: var(--bg-input); border: 1px solid var(--border-l);
}
.archived-item-name { flex: 1; font-size: 13.5px; color: var(--text); }
.archived-item-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.archived-restore-btn {
  padding: 4px 10px; border-radius: 5px; border: 1px solid var(--border-l);
  background: none; color: var(--accent); cursor: pointer; font-size: 12px;
  font-family: var(--sans); transition: background .12s;
  white-space: nowrap;
}
.archived-restore-btn:hover { background: rgba(79,142,247,.12); }

/* ═══════════════ TOPBAR DROPDOWN MENU ═══════════════ */
.topbar-menu-wrap {
  position: relative;
}
.topbar-menu-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px !important;
  font-size: 1em !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  background: var(--bg-hover) !important;
  border: 1px solid var(--accent, #58a6ff) !important;
  border-radius: 8px !important;
  box-shadow: 0 0 0 1px rgba(88,166,255,.2);
  letter-spacing: .01em;
}
.topbar-dropdown {
  display: none;
  position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border-l);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  min-width: 210px;
  z-index: 9500;
  overflow: hidden;
  padding: 4px;
}
.topbar-dropdown.open { display: block; }
.tdrop-section {
  padding: 4px 0;
}
.tdrop-section + .tdrop-section {
  border-top: 1px solid var(--border);
  margin-top: 2px; padding-top: 6px;
}
.tdrop-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--faint);
  padding: 2px 12px 4px;
}
.tdrop-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 13px; color: var(--text);
  padding: 7px 12px; border-radius: 7px;
  transition: background .1s;
}
.tdrop-item:hover { background: var(--bg-hover); }
.tdrop-item.danger { color: #f87171; }
.tdrop-item.danger:hover { background: rgba(239,68,68,.1); }

/* ═══════════════ REPETITION ERROR ═══════════════ */
.err-repetition { background: rgba(244,114,182,.25); color: #f472b6; }
.err-cohesion   { background: rgba(251,146,60,.25);  color: #fb923c; }
.err-btn[data-error="repetition"] { color: #f472b6 !important; }
.legend-item[data-error="repetition"] { background: rgba(244,114,182,.15); color: #f472b6; }
.ctx-err-dot[data-error="repetition"] { background: #f472b6; }

/* ═══════════════ COLOR PICKER SWATCH PREVIEW ═══════════════ */
.color-picker-wrap {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 27px; border-radius: 5px; cursor: pointer;
  border: 1px solid var(--border-l); background: var(--bg-input);
  overflow: visible; transition: border-color .12s; flex-direction: column; gap: 1px;
}
.color-picker-wrap:hover { border-color: var(--accent); }
.color-picker-icon {
  font-size: 12px; font-weight: 800; color: var(--text);
  pointer-events: none; user-select: none; line-height: 1;
}
.color-swatch-bar {
  width: 20px; height: 4px; border-radius: 2px;
  pointer-events: none; display: block; flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
   ACTIVITIES — INLINE PANEL
════════════════════════════════════════════════════════════ */

/* Panel fills the editorArea exactly like page-wrapper */
.activity-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  background: var(--bg-main);
}

/* Panel top bar */
.act-panel-header {
  display: flex; align-items: center;
  padding: 10px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-panel);
  /* Above BOTH seasonal decoration root layers: spring (#spring-decor-root,
     z-index:2) and World Cup (#wc-decor-root, z-index:5 — bunting AND
     confetti share that one layer there, unlike spring's separate 9000 fx
     layer). z-index:3 only cleared spring's garland; during World Cup decor
     the bunting (z:5) still covered this header and the "Playing with"
     selector, since 3 < 5. z-index:6 clears both. The opaque background
     above hides whatever sliver of decoration sits behind it either way. */
  position: relative; z-index: 6;
}
/* Spring's garland (46px/34px tall) intentionally dips below the space
   body.spring-decor-active reserves for it (30px/22px) to overlap the
   content behind it. z-index:6 above already keeps this header's own
   background painting over that dip, but the text/controls sat right at
   the top edge where the garland art is busiest — extra top padding here
   pushes them down clear of it. Scales with --sp-garland-h so it tracks
   the same mobile breakpoint spring-decor.css uses. */
body.spring-decor-active .act-panel-header {
  padding-top: calc(10px + var(--sp-garland-h) * .55);
}
.act-panel-header-left { display: flex; align-items: center; gap: 16px; }
.act-panel-header-right { margin-left: auto; display: flex; align-items: center; }
.act-panel-back {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 13px; font-family: var(--sans);
  padding: 5px 10px; border-radius: 6px; transition: background .1s, color .1s;
}
.act-panel-back:hover { background: var(--bg-hover); color: var(--text); }
.act-panel-title { font-size: 14px; font-weight: 600; color: var(--text); }
/* Which group "Launch" (right-click → Launch) sends games/activities to —
   independent from whichever group's notes are open, so starting a game
   for group 21 doesn't require closing group 22's notes first. Defaults to
   the notes group but can be switched here without touching the notes. */
.act-launch-group-label { font-size: 12px; color: var(--muted); font-family: var(--sans); white-space: nowrap; }
.act-launch-group-select {
  margin-left: 8px; padding: 5px 8px; border-radius: 6px;
  background: var(--bg-input); border: 1px solid var(--border-l);
  color: var(--text); font-size: 12.5px; font-family: var(--sans); outline: none; cursor: pointer;
}
.act-launch-group-select:hover, .act-launch-group-select:focus { border-color: var(--accent); }

/* Scrollable screen */
.act-panel-screen {
  flex: 1; overflow-y: auto;
  padding: 28px 40px;
}

/* ── Level sections (picker) ── */
/* ── Level sections (picker) ── */
.act-levels-wrap { display: flex; flex-direction: column; gap: 10px; max-width: 860px; }

/* ── Level tab bar ── */
.act-level-tabs {
  display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap;
}
.act-level-tab {
  padding: 9px 18px; border-radius: 8px; border: 1px solid transparent;
  cursor: pointer; font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; font-family: var(--sans);
  transition: opacity .12s, background .12s, border-color .12s;
  background: rgba(255,255,255,.04);
  color: var(--muted);
  border-color: rgba(255,255,255,.07);
}
.act-level-tab:hover { opacity: .85; }
.act-level-tab.act-level-pre   { }
.act-level-tab.act-level-int   { }
.act-level-tab.act-level-upper { }
.act-level-tab.act-level-adv   { }
.act-level-tab.act-level-misc  { }
.act-level-tab.active.act-level-pre   { background: rgba(52,211,153,.15);  color: #34d399; border-color: rgba(52,211,153,.3); }
.act-level-tab.active.act-level-int   { background: rgba(79,142,247,.15);  color: #4f8ef7; border-color: rgba(79,142,247,.3); }
.act-level-tab.active.act-level-upper { background: rgba(167,139,250,.15); color: #a78bfa; border-color: rgba(167,139,250,.3); }
.act-level-tab.active.act-level-adv   { background: rgba(248,113,113,.15); color: #f87171; border-color: rgba(248,113,113,.3); }
.act-level-tab.active.act-level-misc  { background: rgba(251,191,36,.12);  color: #fbbf24; border-color: rgba(251,191,36,.3); }

/* ── Module tabs (LC / MC / HC / LD / Misc) ── */
.act-level-tab.active.act-mod-lc   { background: rgba(52,211,153,.15);  color: #34d399; border-color: rgba(52,211,153,.3); }
.act-level-tab.active.act-mod-mc   { background: rgba(79,142,247,.15);  color: #7dd3fc; border-color: rgba(79,142,247,.3); }
.act-level-tab.active.act-mod-hc   { background: rgba(167,139,250,.15); color: #c4b5fd; border-color: rgba(167,139,250,.3); }
.act-level-tab.active.act-mod-ld   { background: rgba(248,113,113,.15); color: #fca5a5; border-color: rgba(248,113,113,.3); }
.act-level-tab.active.act-mod-misc { background: rgba(251,191,36,.12);  color: #fbbf24; border-color: rgba(251,191,36,.3); }
.act-level-tab.active.act-mod-ab   { background: rgba(251,146,60,.15);  color: #fdba74; border-color: rgba(251,146,60,.35); }
.act-level-tab.active.act-mod-adl  { background: rgba(244,114,182,.15); color: #f9a8d4; border-color: rgba(244,114,182,.35); }
.act-level-tab.active.act-mod-mine { background: rgba(244,114,182,.15); color: #f9a8d4; border-color: rgba(244,114,182,.35); }
.act-level-tab { color: #c9d1d9; }
.act-mine-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 18px 22px; margin: 0 0 18px; }
.act-mine-text { display: flex; flex-direction: column; gap: 4px; max-width: 620px; }
.act-mine-text strong { font-size: 17px; color: #f4f6fb; }
.act-mine-text span { font-size: 14.5px; color: #c9d1d9; line-height: 1.5; }
.act-mine-empty { color: #c9d1d9; font-size: 15px; padding: 26px 8px; }

/* ── Picker home (Activities / Games) ── */
.act-home {
  display: flex; gap: 24px; justify-content: center; align-items: stretch;
  flex-wrap: wrap; padding: 60px 0;
}
.act-home-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  width: 380px; min-height: 260px; padding: 32px 24px; border-radius: 22px;
  background: var(--bg-input); border: 1px solid var(--border-l);
  cursor: pointer; font-family: 'Space Grotesk', var(--sans);
  transition: border-color .12s, background .12s, transform .12s;
}
.act-home-btn:hover { border-color: var(--accent); background: var(--bg-hover); transform: translateY(-2px); }
.act-home-title { font-size: 42px; font-weight: 700; color: #f0f6fc; }
.act-view-back {
  background: none; border: none; cursor: pointer; margin-bottom: 16px;
  color: #c9d1d9; font-size: 14px; font-family: var(--sans);
  padding: 6px 10px; border-radius: 6px;
}
.act-view-back:hover { background: var(--bg-hover); color: #f0f6fc; }

/* ── Level content panels ── */
.act-level-panels { flex: 1; overflow-y: auto; }
.act-level-panel  { }

/* Accordion button — keep for backwards compat but unused now */
.act-accordion-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; font-family: var(--sans); transition: opacity .12s, border-radius .15s;
  text-align: left;
}
.act-accordion-btn.act-level-pre   { background: rgba(52,211,153,.12);  color: #34d399; border-color: rgba(52,211,153,.2); }
.act-accordion-btn.act-level-int   { background: rgba(79,142,247,.12);  color: #4f8ef7; border-color: rgba(79,142,247,.2); }
.act-accordion-btn.act-level-upper { background: rgba(167,139,250,.12); color: #a78bfa; border-color: rgba(167,139,250,.2); }
.act-accordion-btn.act-level-adv   { background: rgba(248,113,113,.12); color: #f87171; border-color: rgba(248,113,113,.2); }
.act-accordion-btn.act-level-misc  { background: rgba(251,191,36,.1);   color: #fbbf24; border-color: rgba(251,191,36,.2); }
.act-accordion-btn:hover { opacity: .85; }
.act-accordion-btn.open  { border-radius: 10px 10px 0 0; }
.act-accordion-chevron { flex-shrink: 0; transition: transform .2s; }
.act-accordion-btn.open .act-accordion-chevron { transform: rotate(180deg); }
.act-accordion-body {
  display: none; border: 1px solid rgba(255,255,255,.08);
  border-top: none; border-radius: 0 0 10px 10px;
  padding: 14px; background: var(--bg-panel);
}
.act-accordion-body.open { display: block; }

/* Uniform grid */
.act-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.act-picker-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 12px; border-radius: 10px;
  background: var(--bg-input); border: 1px solid var(--border-l);
  cursor: pointer; text-align: center; transition: border-color .12s, background .12s;
  height: 100%; justify-content: center;
}
.act-picker-card:hover { border-color: var(--accent); background: var(--bg-hover); }
.act-card-soon { opacity: .4; cursor: default; pointer-events: none; }
.act-card-icon  { font-size: 48px; }
.act-card-title { font-size: 14px; font-weight: 600; font-family: var(--mono); color: var(--text); line-height: 1.4; }
.act-card-desc  { font-size: 11px; color: var(--muted); }

/* Access code row — teacher only, shown via JS */
.act-code-display {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--border);
  width: 100%; font-size: 12px; color: var(--muted);
}
.act-code-label { white-space: nowrap; }
.act-code-value {
  color: var(--accent); font-family: var(--mono);
  letter-spacing: .08em; font-size: 13px; font-weight: 700;
}
.act-copy-code-btn {
  margin-left: auto;
  background: var(--bg-input); border: 1px solid var(--border-l);
  color: var(--muted); cursor: pointer; padding: 4px 10px; border-radius: 6px;
  font-size: 12px; font-family: var(--sans); white-space: nowrap;
  transition: background .1s, color .1s, border-color .1s;
}
.act-copy-code-btn:hover { background: var(--bg-hover); color: var(--text); border-color: var(--accent); }

/* ── Activity header ── */
.act-activity-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 20px;
}
.act-activity-name { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.act-activity-meta { font-size: 12px; color: var(--muted); }
.act-back-to-list {
  background: none; border: 1px solid var(--border-l); cursor: pointer;
  color: var(--muted); font-size: 12px; font-family: var(--sans);
  padding: 5px 12px; border-radius: 6px; white-space: nowrap; flex-shrink: 0;
}
.act-back-to-list:hover { background: var(--bg-hover); color: var(--text); }

/* ── Step tabs ── */
.act-step-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
}
.act-step-tab {
  background: none; border: none; border-bottom: 2.5px solid transparent;
  padding: 8px 18px; font-size: 13px; font-weight: 500; color: var(--muted);
  cursor: pointer; font-family: var(--sans); margin-bottom: -1px;
  transition: color .1s, border-color .1s;
}
.act-step-tab:hover { color: var(--text); }
.act-step-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.act-step-content {}
.act-step-sub { font-size: 13px; color: var(--muted); margin-bottom: 18px; }

/* ════════════════════════════════════
   SIDE-BY-SIDE MATCHING
════════════════════════════════════ */
.act-sidebyside {
  display: grid;
  grid-template-columns: 1fr 72px 1fr;
  margin-bottom: 20px;
  position: relative;
}
.act-col { display: flex; flex-direction: column; gap: 6px; }

/* SVG column — same height as tallest column via JS */
.act-col-svg {
  position: relative;
  align-self: stretch;
}
.act-col-svg svg {
  position: absolute;
  top: 0; left: 0;
  width: 72px; height: 100%;
  overflow: visible;
}

/* Word pills */
.act-word-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 9px; min-height: 44px;
  background: var(--bg-panel); border: 1.5px solid var(--border-l);
  cursor: pointer; user-select: none;
  transition: border-color .1s, background .1s;
}
.act-word-pill:hover:not(.correct):not(.wrong) { border-color: var(--accent); }
.act-word-pill.selected { border-color: var(--accent); background: rgba(79,142,247,.12); }
.act-word-pill.matched  { border-color: rgba(79,142,247,.35); }
.act-word-pill.correct  { border-color: #34d399 !important; background: rgba(52,211,153,.1); cursor: default; }
.act-word-pill.wrong    { border-color: #f87171 !important; background: rgba(248,113,113,.08); }
.act-word-name { font-size: 14px; font-weight: 600; color: var(--text); flex: 1; }
.act-see-ex {
  font-size: 11px; color: var(--accent); white-space: nowrap; flex-shrink: 0;
  border: 1px solid var(--border-l); background: var(--bg-input);
  border-radius: 20px; padding: 2px 8px; cursor: pointer; font-family: var(--sans);
}
.act-see-ex:hover { background: rgba(79,142,247,.12); }
.act-example-bubble {
  font-size: 12px; color: var(--muted); font-style: italic;
  padding: 6px 12px; background: var(--bg-input);
  border-left: 2px solid var(--accent); border-radius: 0 6px 6px 0;
  margin-top: -3px; margin-bottom: 4px; display: none; line-height: 1.5;
}

/* Definition cards */
.act-def-card {
  display: flex; align-items: center;
  padding: 10px 14px; border-radius: 9px; min-height: 44px;
  background: var(--bg-panel); border: 1.5px solid var(--border-l);
  font-size: 13px; color: var(--text); cursor: pointer;
  line-height: 1.45; user-select: none;
  transition: border-color .1s, background .1s;
}
.act-def-card:hover:not(.correct):not(.wrong) { border-color: var(--accent); }
.act-def-card.matched  { border-color: rgba(79,142,247,.35); }
.act-def-card.correct  { border-color: #34d399 !important; background: rgba(52,211,153,.1); cursor: default; }
.act-def-card.wrong    { border-color: #f87171 !important; background: rgba(248,113,113,.08); }
.act-def-card-text { flex: 1; }
.act-remove-link {
  flex-shrink: 0; margin-left: 8px; font-size: 12px; color: var(--faint);
  background: none; border: none; cursor: pointer; padding: 2px 5px; border-radius: 4px;
}
.act-remove-link:hover { color: #f87171; background: rgba(248,113,113,.12); }

/* Connector lines */
.act-connector-line         { stroke: rgba(79,142,247,.55); stroke-width: 2.5; fill: none; stroke-linecap: round; }
.act-connector-line.correct { stroke: #34d399; stroke-width: 3; }
.act-connector-line.wrong   { stroke: #f87171; stroke-width: 3; }

/* ── Buttons ── */
.act-check-row { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.act-btn-primary {
  padding: 8px 20px; border-radius: 8px; font-size: 13px; font-weight: 500;
  background: var(--accent); color: #fff; border: none; cursor: pointer; font-family: var(--sans);
}
.act-btn-primary:hover { opacity: .88; }
.act-btn-secondary {
  padding: 8px 16px; border-radius: 8px; font-size: 13px;
  background: var(--bg-input); border: 1px solid var(--border-l);
  color: var(--muted); cursor: pointer; font-family: var(--sans);
}
.act-btn-secondary:hover { background: var(--bg-hover); color: var(--text); }
.act-score-msg { font-size: 13px; color: var(--muted); }

/* ── Classify ── */
.act-word-bank {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 14px; background: var(--bg-input);
  border: 1px solid var(--border-l); border-radius: 10px;
  margin-bottom: 18px; min-height: 56px;
}
.act-drag-word {
  background: var(--bg-panel); border: 1px solid var(--border-l);
  border-radius: 20px; padding: 7px 16px; font-size: 13px;
  color: var(--text); cursor: grab; user-select: none; transition: border-color .1s;
}
.act-drag-word:hover { border-color: var(--accent); }
.act-drag-word.dragging { opacity: .35; }
.act-classify-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.act-classify-box {
  border-radius: 12px; border: 1.5px solid var(--border-l); padding: 14px; min-height: 140px;
}
.act-box-good { border-color: rgba(52,211,153,.5); }
.act-box-bad  { border-color: rgba(248,113,113,.4); }
.act-classify-box.over { background: var(--bg-hover); }
.act-box-label { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.act-box-good .act-box-label { color: #34d399; }
.act-box-bad  .act-box-label { color: #f87171; }
.act-drop-zone { display: flex; flex-wrap: wrap; gap: 6px; min-height: 70px; align-content: flex-start; }
.act-result-badge { font-size: 10px; padding: 2px 6px; border-radius: 8px; margin-left: 5px; font-weight: 600; }
.act-result-badge.ok { background: rgba(52,211,153,.2); color: #34d399; }
.act-result-badge.no { background: rgba(248,113,113,.15); color: #f87171; }

/* ── Activity row with code box ── */
.act-activity-row { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.act-code-box {
  display: none; flex-direction: column; gap: 6px;
  background: var(--bg-panel); border: 1px solid var(--border-l);
  border-radius: 10px; padding: 14px 16px; min-width: 180px;
}
.act-code-box-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted);
}
.act-code-box-value {
  font-size: 26px; font-weight: 700; font-family: var(--mono);
  color: var(--accent); letter-spacing: .1em;
}
.act-code-copy-btn {
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  padding: 6px 12px; border-radius: 7px; font-size: 12px; font-weight: 600;
  font-family: var(--sans); transition: opacity .1s; text-align: center;
}
.act-code-copy-btn:hover { opacity: .85; }

/* ── Activity context menu (shown on right-click of activity cards) ── */
#actCtxMenu { z-index: 9700; position: fixed; min-width: 180px; }
.unmatch-hint {
  position: absolute; top: 4px; right: 7px;
  font-size: 10px; color: rgba(255,255,255,.3); pointer-events: none;
}

/* ── Find bar ── */
.find-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-l);
  z-index: 200;
}
.find-bar input {
  flex: 1; max-width: 220px;
  background: var(--bg-input); border: 1px solid var(--border-l);
  border-radius: 6px; padding: 5px 10px;
  color: var(--text); font-size: 13px; font-family: var(--sans);
  outline: none;
}
.find-bar input:focus { border-color: var(--accent); }
.find-count {
  font-size: 12px; color: var(--muted); min-width: 52px; text-align: center;
}
.find-bar button {
  background: none; border: 1px solid var(--border-l);
  border-radius: 5px; color: var(--muted);
  font-size: 14px; padding: 3px 8px; cursor: pointer; line-height: 1;
}
.find-bar button:hover { background: var(--bg-hover); color: var(--text); }
.find-highlight {
  background: rgba(255, 214, 0, 0.35);
  border-radius: 2px;
}
.find-highlight.find-current {
  background: rgba(255, 160, 0, 0.7);
  color: #fff;
  border-radius: 2px;
}

/* ── Score block layout ─────────────────────────────────────── */
.score-block {
  border: 1px solid var(--border-l);
  border-radius: 10px;
  overflow: hidden;
  margin: 12px 0;
  user-select: none;
}
.score-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-hover);
  border-bottom: 1px solid var(--border-l);
}
.score-block-title { font-size: 13px; font-weight: 700; color: var(--text); }
.score-block-info-btn {
  background: none; border: 1px solid var(--border-l); border-radius: 50%;
  color: var(--muted); font-size: 12px; width: 20px; height: 20px;
  cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.score-block-del {
  background: none; border: none; color: var(--muted); font-size: 14px;
  cursor: pointer; line-height: 1; padding: 2px 4px; border-radius: 4px;
}
.score-block-del:hover { color: var(--text); background: var(--bg-hover); }
.score-block-body { padding: 4px 0; }

.score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  gap: 12px;
}
.score-row:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,.05); }

.score-cat {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  min-width: 160px;
  flex-shrink: 0;
}
.score-cat-val {
  font-weight: 700;
  color: #d29922;
  margin-left: 6px;
}

.score-stars {
  display: flex;
  gap: 2px;
  align-items: center;
  cursor: pointer;
}

.score-star-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}
.score-star-icon {
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
}
.score-star-half-l,
.score-star-half-r {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  z-index: 1;
  cursor: pointer;
}
.score-star-half-l { left: 0; }
.score-star-half-r { right: 0; }

/* ═══════════════ USER MANAGEMENT ═══════════════ */
.um-user-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  transition: background .12s;
}
.um-user-row:hover { background: var(--bg-hover); }
.um-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.um-user-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.um-user-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.um-user-sub {
  font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.um-user-actions { display: flex; gap: 4px; flex-shrink: 0; }
.um-edit-btn, .um-delete-btn {
  background: none; border: 1px solid var(--border-l);
  border-radius: 6px; padding: 3px 7px; cursor: pointer;
  font-size: 12px; color: var(--muted);
  transition: background .12s, color .12s;
}
.um-edit-btn:hover   { background: var(--bg-hover); color: var(--text); }
.um-delete-btn:hover { background: rgba(248,113,113,.15); color: #f87171; border-color: #f87171; }

/* The Users modal (#userMgmtModal / #userFormModal) is built with the
   shared .gm-* "set up game" shell (css/game-ui.css), which is hardcoded
   to one fixed dark look on purpose — games keep the same style whatever
   theme a teacher picks. Users is app chrome, not a game, so it should
   follow the chosen theme like every other modal; these scoped overrides
   only touch the two Users modals, leaving game-ui.css and every game's
   own "Set up game" modal untouched. */
#userMgmtModal .gm-card, #userFormModal .gm-card {
  background: linear-gradient(180deg, var(--bg-panel), var(--bg-panel2));
  border-color: var(--border-l);
}
#userMgmtModal .gm-title, #userFormModal .gm-title {
  background: linear-gradient(120deg, var(--text-strong) 15%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text;
}
#userMgmtModal .gm-desc, #userFormModal .gm-desc,
#userMgmtModal .gm-label, #userFormModal .gm-label,
#userMgmtModal .gm-hint, #userFormModal .gm-hint { color: var(--muted); }
#userMgmtModal .gm-section, #userFormModal .gm-section {
  background: var(--bg-input); border-color: var(--border-l);
}
#userMgmtModal .gm-select, #userMgmtModal .gm-input, #userMgmtModal .gm-textarea,
#userFormModal .gm-select, #userFormModal .gm-input, #userFormModal .gm-textarea {
  background: var(--bg-deep); border-color: var(--border-l); color: var(--text);
}
#userMgmtModal .gm-select:focus, #userMgmtModal .gm-input:focus, #userMgmtModal .gm-textarea:focus,
#userFormModal .gm-select:focus, #userFormModal .gm-input:focus, #userFormModal .gm-textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
#userMgmtModal .gm-input::placeholder, #userFormModal .gm-input::placeholder,
#userMgmtModal .gm-textarea::placeholder, #userFormModal .gm-textarea::placeholder { color: var(--faint); }
#userMgmtModal .gm-mg-btn, #userFormModal .gm-mg-btn { border-color: var(--border-l); color: var(--muted); }
#userMgmtModal .gm-mg-btn:hover, #userFormModal .gm-mg-btn:hover { border-color: var(--accent); color: var(--text); }
#userMgmtModal .gm-check-row, #userFormModal .gm-check-row { color: var(--muted); }
#userMgmtModal .gm-btn-ghost, #userFormModal .gm-btn-ghost { border-color: var(--border-l); color: var(--muted); }
#userMgmtModal .gm-btn-ghost:hover, #userFormModal .gm-btn-ghost:hover { border-color: var(--accent); color: var(--text); }
#userMgmtModal .gm-btn-primary, #userFormModal .gm-btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-d)); color: #fff;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 35%, transparent);
}
#userMgmtModal .gm-close, #userFormModal .gm-close { color: var(--muted); }
#userMgmtModal .gm-close:hover, #userFormModal .gm-close:hover { color: var(--text); }

/* Same reasoning as the Users overrides just above, now for the Groups
   modal (#groupMgmtModal / #grFormModal) — Groups is app chrome too, so it
   should follow the chosen theme instead of game-ui.css's fixed dark shell.
   Scoped the same way, touching only these two Groups modals. */
#groupMgmtModal .gm-card, #grFormModal .gm-card {
  background: linear-gradient(180deg, var(--bg-panel), var(--bg-panel2));
  border-color: var(--border-l);
}
#groupMgmtModal .gm-title, #grFormModal .gm-title {
  background: linear-gradient(120deg, var(--text-strong) 15%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text;
}
#groupMgmtModal .gm-desc, #grFormModal .gm-desc,
#groupMgmtModal .gm-label, #grFormModal .gm-label,
#groupMgmtModal .gm-hint, #grFormModal .gm-hint { color: var(--muted); }
#groupMgmtModal .gm-section, #grFormModal .gm-section {
  background: var(--bg-input); border-color: var(--border-l);
}
#groupMgmtModal .gm-select, #groupMgmtModal .gm-input, #groupMgmtModal .gm-textarea,
#grFormModal .gm-select, #grFormModal .gm-input, #grFormModal .gm-textarea {
  background: var(--bg-deep); border-color: var(--border-l); color: var(--text);
}
#groupMgmtModal .gm-select:focus, #groupMgmtModal .gm-input:focus, #groupMgmtModal .gm-textarea:focus,
#grFormModal .gm-select:focus, #grFormModal .gm-input:focus, #grFormModal .gm-textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
#groupMgmtModal .gm-input::placeholder, #grFormModal .gm-input::placeholder { color: var(--faint); }
#groupMgmtModal .gm-btn-ghost, #grFormModal .gm-btn-ghost { border-color: var(--border-l); color: var(--muted); }
#groupMgmtModal .gm-btn-ghost:hover, #grFormModal .gm-btn-ghost:hover { border-color: var(--accent); color: var(--text); }
#groupMgmtModal .gm-btn-primary, #grFormModal .gm-btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-d)); color: #fff;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 35%, transparent);
}
#groupMgmtModal .gm-close, #grFormModal .gm-close { color: var(--muted); }
#groupMgmtModal .gm-close:hover, #grFormModal .gm-close:hover { color: var(--text); }

/* Group rows (#grList, class .um-list like Students) and the Active/
   Archived/Trash tabs use the same hardcoded game-ui.css shell — themed
   here too, scoped to the Groups modal only. Delete stays semantic red. */
#groupMgmtModal .um-list .um-user-row { background: var(--bg-input); border-color: var(--border-l); }
#groupMgmtModal .um-list .um-user-row:hover { border-color: var(--accent); background: var(--bg-hover); }
#groupMgmtModal .um-list .um-user-name { color: var(--text); }
#groupMgmtModal .um-list .um-user-sub { color: var(--muted); }
#groupMgmtModal .um-list .um-edit-btn { color: var(--text); background: var(--bg-input); border-color: var(--border-l); }
#groupMgmtModal .um-list .um-edit-btn:hover { border-color: var(--accent); background: var(--bg-hover); color: var(--text); }
#groupMgmtModal .um-empty { color: var(--muted); }
#groupMgmtModal .um-empty strong { color: var(--text); }
#groupMgmtModal .gr-tab { color: var(--muted); background: var(--bg-input); border-color: var(--border-l); }
#groupMgmtModal .gr-tab:hover { color: var(--text); border-color: var(--accent); }
#groupMgmtModal .gr-tab.active { color: #fff; background: var(--accent); border-color: var(--accent); }
#groupMgmtModal .group-level-badge { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }

/* "❓ Tutorial" buttons that open each section's own step-by-step tour
   (js/onboarding.js). Kept static/muted like .gm-close, since other game
   setup modals still use game-ui.css's fixed dark shell on purpose; the
   Users/Groups-scoped overrides above still let it read fine there. */
.tutorial-link-btn {
  background: none; border: 1px solid rgba(255,255,255,.14); border-radius: 8px;
  color: #9aa4bd; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 5px 10px; font-family: var(--sans); white-space: nowrap;
  transition: border-color .12s, color .12s;
}
.tutorial-link-btn:hover { border-color: #6c9bff; color: #eef1f8; }
.gm-card .tutorial-link-btn { position: absolute; top: 16px; right: 54px; }
#userMgmtModal .tutorial-link-btn, #userFormModal .tutorial-link-btn,
#groupMgmtModal .tutorial-link-btn, #grFormModal .tutorial-link-btn {
  border-color: var(--border-l); color: var(--muted);
}
#userMgmtModal .tutorial-link-btn:hover, #userFormModal .tutorial-link-btn:hover,
#groupMgmtModal .tutorial-link-btn:hover, #grFormModal .tutorial-link-btn:hover {
  border-color: var(--accent); color: var(--text);
}
/* Floating "❓ Tutorial" button(s) — sit just above the 🔊 soundboard button
   (fixed, bottom-right, now 130px from bottom + 46px tall + 8px gap = 184px;
   raised a bit further from 164px, since the toast could still clip it).
   Both were lifted from their original 18px/72px slots because .ep-ping-toast
   (css/ping.css) lands in that same bottom-right corner and, being taller
   than the soundboard button, was sitting on top of both. z-index is still
   above the seasonal decorations layer (spring/world-cup, both z-index:9000)
   — that's what used to cover this button up in its old, in-header position. */
.tutorial-fab {
  position: fixed; bottom: 184px; right: 18px; z-index: 9010;
  background: var(--bg-panel, #161b27); border-radius: 20px;
  padding: 7px 14px; box-shadow: 0 4px 24px rgba(0,0,0,.4);
}
/* Notes screen: the ❓ Tutorial button stays out of the way — hidden while the
   mouse is still (it only appears when the mouse moves, js/onboarding.js adds
   body.ep-mouse-active) and shown as a small ❓ that opens to "❓ Tutorial" on hover. */
#notesTutorialBtn {
  opacity: 0; pointer-events: none; transition: opacity .35s ease;
  padding: 7px 10px;
}
body.ep-mouse-active #notesTutorialBtn,
#notesTutorialBtn:hover, #notesTutorialBtn:focus-visible { opacity: .85; pointer-events: auto; }
#notesTutorialBtn:hover { opacity: 1; padding: 7px 14px; }
#notesTutorialBtn .tf-label { display: none; }
#notesTutorialBtn:hover .tf-label, #notesTutorialBtn:focus-visible .tf-label { display: inline; }

/* Dictation live preview — floating box (js/dictation.js) showing the
   in-progress phrase being recognized, before it lands in the note as
   final text. Top-center, below the topbar AND the notes toolbar, so it
   doesn't sit on top of the notes area or cover the toolbar buttons, and
   doesn't collide with the bottom-right corner (tutorial/soundboard/ping
   toast all live there). Can be turned off (right-click the 🎤 button). */
.dictation-preview {
  position: fixed;
  left: 50%;
  top: 140px;
  transform: translateX(-50%) translateY(-12px);
  z-index: 9020;
  max-width: 560px;
  width: calc(100% - 48px);
  background: #161b22;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 10px 32px rgba(0,0,0,.45);
  font-family: var(--sans);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.dictation-preview.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.dictation-preview-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: #f87171; margin-bottom: 6px;
}
.dictation-preview-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #f87171;
  animation: dictation-pulse 1.2s ease-in-out infinite;
}
@keyframes dictation-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.dictation-preview-text { font-size: 14.5px; color: #e6edf3; line-height: 1.5; min-height: 1.4em; }

/* ═══════════════ RADIAL ERROR MENU ═══════════════ */
.radial-sector {
  cursor: pointer;
  transition: opacity .12s;
}
.radial-sector:hover { opacity: .85; }
.radial-label {
  position: absolute;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  pointer-events: none;
  line-height: 1.3;
  text-shadow: 0 1px 4px rgba(0,0,0,.7);
  max-width: 70px;
  transform: translate(-50%, -50%);
  white-space: normal;
  letter-spacing: .01em;
}
.radial-more-sector { cursor: pointer; }
.radial-more-sector:hover { opacity: .75; }
#radialMenu.open { display: block !important; }
#radialMenu::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.25);
  pointer-events: all;
}
.radial-more-item { font-size: 13px; color: var(--text); }
.radial-more-item:hover { background: var(--bg-hover); }

/* ── Group drag-and-drop ── */
.group-drag-handle {
  font-size: .8rem;
  color: var(--muted);
  cursor: grab;
  opacity: 0;
  line-height: 1;
  transition: opacity .15s;
  position: absolute;
  top: 4px;
  right: 4px;
}
.groups-panel:hover .group-drag-handle { opacity: .4; }
.group-item:hover .group-drag-handle   { opacity: .8; }
.group-item.dragging {
  opacity: .4;
  border: 1px dashed var(--accent);
  background: var(--bg-hover);
}
.group-item.drag-over {
  background: rgba(88,166,255,.12);
  border: 1px solid rgba(88,166,255,.4);
  transform: scale(1.04);
}

/* ── Group level badge ── */
.group-level-badge {
  font-size: 9px;
  font-weight: 800;
  background: rgba(88,166,255,.15);
  color: #58a6ff;
  border-radius: 4px;
  padding: 1px 4px;
  vertical-align: middle;
  margin-left: 3px;
}

.act-custom-bar { margin: 0 0 16px; }
.act-custom-grid:empty { display: none; }

/* Owner-only elements (English Unlocked, decoration settings, …) */
body:not(.is-admin) .admin-only { display: none !important; }
/* Strictly owner-only elements (institute-shared config — see js/level-config.js) */
body:not(.is-owner) .owner-only { display: none !important; }

/* Toolbar "Mark error" button (opens the coloured error wheel) */
.mark-error-btn { color: #fca5a5 !important; font-weight: 700; padding: 0 12px !important; white-space: nowrap; }
.mark-error-btn:hover { background: rgba(248,113,113,.15) !important; }

/* ── Written tasks link (teacher notes list) ── */
.note-item.tasks-link { margin: 4px 10px 8px; border: 1px dashed var(--border-l); border-radius: 8px; border-left: 1px dashed var(--border-l); }
.note-item.tasks-link .note-item-title { color: var(--accent); font-weight: 600; }

/* Highlight boxes: función oculta por ahora (el botón queda en el HTML). */
#insertHighlightBtn { display: none !important; }

/* 🎤 Dictation button: only for institutes the owner enabled (js/dictation.js) */
#dictationBtn[hidden] { display: none !important; }
#dictationBtn.active { background: rgba(248, 81, 73, .18); border-color: #f85149; color: #ffa198; }