/* ============================================
   Marcador Dinámico de Clase - Estilos Completos
   ============================================ */

/* MODO PROYECCIÓN INMERSIVA EN VIVO */
.tool-layout.md-mode-live {
  display: block;
  max-width: 1600px;
  width: min(100% - 32px, 1600px);
  margin-inline: auto;
}

.tool-layout.md-mode-live .tool-sidebar,
.tool-layout.md-mode-live .tool-intro {
  display: none !important;
}

/* Barra de acciones de sesión .profe */
.md-top-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.md-session-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.btn--danger-soft {
  color: #dc2626 !important;
  border-color: #fca5a5 !important;
  background: #fef2f2 !important;
  font-weight: 800;
}

.btn--danger-soft:hover {
  background: #fee2e2 !important;
  border-color: #ef4444 !important;
}

/* Pantallas y contenedores */
.md-screen {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}

.md-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}

.md-desc {
  color: var(--color-muted);
  font-size: var(--text-lg);
  margin-bottom: var(--space-6);
}

.md-subheading {
  font-size: var(--text-xl);
  font-family: var(--font-heading);
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}

.md-form-group {
  margin-bottom: var(--space-8);
}

.md-form-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.md-label {
  display: block;
  font-weight: 800;
  margin-bottom: var(--space-3);
  color: var(--color-ink);
  font-size: var(--text-base);
}

.md-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-ink);
  background: var(--color-bg);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.md-input--lg {
  font-size: var(--text-lg);
  padding: var(--space-4);
}

.md-input--sm {
  max-width: 180px;
}

.md-input:focus,
.md-textarea:focus {
  border-color: var(--color-accent);
  background: var(--color-surface);
  outline: none;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2);
}

.md-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-ink);
  background: var(--color-bg);
  resize: vertical;
}

/* Acciones de Alumnos y Chips */
.md-students-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

.md-badge {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 800;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
}

.md-loaded-box {
  background: var(--color-bg);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-8);
}

.md-chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.md-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  animation: mdScaleIn 0.2s ease-out;
}

@keyframes mdScaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.md-chip-remove {
  border: none;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  font-weight: bold;
}

.md-chip-remove:hover {
  color: var(--color-error);
}

/* Modalidad Cards */
.md-modality-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}

.md-modality-cards--sm {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: var(--space-6);
}

.md-mod-card {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  cursor: pointer;
  transition: all var(--transition);
  font-weight: 800;
  color: var(--color-ink);
}

.md-mod-card input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.md-mod-card:hover {
  border-color: var(--color-accent);
  background: var(--color-surface);
  transform: translateY(-2px);
}

.md-mod-card:has(input[type="radio"]:checked) {
  border-color: var(--color-accent);
  background: #fffbeb;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.2);
}

.md-mod-title {
  display: block;
}

/* Subpaneles y Criterios */
.md-subpanel {
  background: var(--color-bg);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
  animation: mdFadeIn 0.3s ease-out;
}

@keyframes mdFadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Gestión de Equipos y Drag & Drop */
.md-team-box {
  margin-bottom: var(--space-6);
}

.md-teams-workspace {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-6);
  margin-top: var(--space-6);
  align-items: start;
}

@media (max-width: 768px) {
  .md-teams-workspace {
    grid-template-columns: 1fr;
  }
}

.md-unassigned-panel {
  background: var(--color-surface);
  border: 2px dashed #94a3b8;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  min-height: 300px;
}

.md-panel-title {
  font-weight: 800;
  margin-bottom: var(--space-3);
  color: #334155;
  border-bottom: 1px solid var(--color-border-soft);
  padding-bottom: var(--space-2);
}

.md-drag-list {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
}

.md-drag-item {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  cursor: grab;
  font-weight: 600;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.15s ease;
}

.md-drag-item:hover {
  background: #ffffff;
  border-color: var(--color-primary);
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transform: translateX(2px);
}

.md-drag-item.dragging {
  opacity: 0.5;
  background: #e2e8f0;
}

.md-teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-4);
}

.md-team-card-edit {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}

.md-team-card-edit.drag-over {
  border-color: var(--color-accent);
  background: #fef3c7;
  transform: scale(1.02);
}

.md-team-header-edit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-border-soft);
  padding-bottom: var(--space-2);
}

.md-team-edit-input {
  font-weight: 800;
  font-size: var(--text-lg);
  border: none;
  background: transparent;
  color: var(--color-ink);
  width: 100%;
}

.md-team-edit-input:focus {
  outline: none;
  border-bottom: 2px solid var(--color-accent);
}

/* Paso 2: Rúbrica */
.md-header-rubric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-border-soft);
  padding-bottom: var(--space-3);
}

.md-total-weight {
  font-size: var(--text-lg);
  padding: var(--space-2) var(--space-4);
  background: #f1f5f9;
  border-radius: var(--radius-md);
}

.error-text {
  color: var(--color-error);
  font-weight: bold;
  margin-left: var(--space-2);
}

.md-criteria-container {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.md-criterion-row {
  display: grid;
  grid-template-columns: 1fr 100px 40px;
  gap: var(--space-3);
  align-items: center;
}

.md-btn-remove {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 1.25rem;
  font-weight: bold;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all var(--transition);
}

.md-btn-remove:hover {
  background: var(--color-error);
  color: #ffffff;
  border-color: var(--color-error);
}

.btn--add {
  border-style: dashed;
  border-width: 2px;
  width: 100%;
}

.btn--add:hover {
  border-style: solid;
}

.md-btn-next,
.md-btn-start {
  width: 100%;
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-xl);
}

/* Botón IA */
.btn--ai {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  font-weight: 800;
  font-size: var(--text-sm);
  color: #ffffff;
  background: linear-gradient(135deg, #a855f7 0%, #6366f1 50%, #3b82f6 100%);
  background-size: 200% 200%;
  box-shadow: 0 4px 15px rgb(168 85 247 / 0.35);
  animation: mdAiPulse 4s ease infinite;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}

.btn--ai:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgb(168 85 247 / 0.5);
}

@keyframes mdAiPulse {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ============================================
   PANTALLA 3: MARCADOR EN VIVO
   ============================================ */
.md-top-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  background: var(--color-bg);
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
}

.md-control-left,
.md-control-right {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.btn-sound {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-ink);
  font-weight: 800;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition);
}

.btn-sound[aria-pressed="false"] {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
}

.md-live-title {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-family: var(--font-heading);
  color: var(--color-ink);
  margin-bottom: var(--space-8);
  text-align: center;
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-border-soft);
}

.md-live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}

/* Tarjeta en Vivo (Pizarra UX) */
.md-live-card {
  position: relative;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 80px;
  align-items: center;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-5);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.md-live-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent);
}

/* Tarjeta en Modo Rúbrica (Estructura en Columna) */
.md-live-card.md-rubric-mode {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: var(--space-6);
}

.md-rubric-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--color-border-soft);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
}

.md-rubric-badge {
  background: #10b981;
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 900;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
  transition: transform 0.2s cubic-bezier(0.17, 0.89, 0.32, 1.28);
}

.md-rubric-criteria-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.md-rubric-item {
  background: var(--color-bg);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  transition: transform var(--transition);
}

.md-rubric-item-info {
  display: flex;
  flex-direction: column;
}

.md-rubric-item-name {
  font-weight: 800;
  color: var(--color-ink);
}

.md-rubric-item-weight {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* Controles de votación en Rúbrica (Botones + / - a cada lado) */
.md-rubric-voter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.btn-rubric {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.5rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  border: none;
  user-select: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-rubric--sub { background: #ef4444; color: #ffffff; box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3); }
.btn-rubric--sub:hover { background: #dc2626; transform: scale(1.1); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.5); }
.btn-rubric--sub:active { transform: scale(0.95); }

.btn-rubric--add { background: #10b981; color: #ffffff; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3); }
.btn-rubric--add:hover { background: #059669; transform: scale(1.1); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.5); }
.btn-rubric--add:active { transform: scale(0.95); }

.md-rubric-val-box {
  min-width: 60px;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: var(--text-xl);
  color: var(--color-primary);
  transition: transform 0.2s ease;
}

/* Botones Gigantes a los lados (Modo Puntos) */
.btn-score {
  width: 70px;
  height: 70px;
  border-radius: var(--radius-lg);
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 2.25rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  border: none;
  user-select: none;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-score--sub {
  background: #ef4444;
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.35);
}

.btn-score--sub:hover {
  background: #dc2626;
  transform: scale(1.08);
}

.btn-score--sub:active {
  transform: scale(0.95);
}

.btn-score--add {
  background: #10b981;
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
}

.btn-score--add:hover {
  background: #059669;
  transform: scale(1.08);
}

.btn-score--add:active {
  transform: scale(0.95);
}

/* Sección Central (Nombre, Puntos y Estrellas) */
.md-score-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-3);
  text-align: center;
  overflow: hidden;
}

.md-card-name {
  width: 100%;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 900;
  color: var(--color-ink);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  text-align: center;
  padding: var(--space-1);
  margin-bottom: var(--space-1);
  transition: border-color var(--transition);
  text-overflow: ellipsis;
}

.md-card-name:focus {
  outline: none;
  border-bottom-color: var(--color-accent);
}

.md-card-members {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-bottom: var(--space-2);
  min-height: 1.25rem;
}

.md-score-number {
  font-family: var(--font-heading);
  font-size: clamp(3.2rem, 5.5vw, 4.8rem);
  font-weight: 900;
  line-height: 1;
  color: var(--color-ink);
  transition: transform 0.25s cubic-bezier(0.17, 0.89, 0.32, 1.28);
}

.stars-container {
  color: #f59e0b;
  font-size: 1.5rem;
  letter-spacing: 2px;
  min-height: 2rem;
  margin-top: var(--space-1);
}

/* Efectos visuales al puntuar */
.score-bump .md-score-number,
.score-bump .md-rubric-badge,
.score-bump .md-rubric-num {
  transform: scale(1.35);
  color: #10b981;
}

.score-shake .md-score-number,
.score-shake .md-rubric-badge,
.score-shake .md-rubric-num {
  transform: scale(0.85) rotate(-5deg);
  color: #ef4444;
}

/* Footer Live */
.md-footer-live {
  display: flex;
  justify-content: center;
  margin-top: var(--space-8);
}

.md-btn-finish {
  padding: var(--space-4) var(--space-10);
  font-size: var(--text-xl);
}

/* ============================================
   PANTALLA 4: PODIO Y CELEBRACIÓN (CENTRADO ABSOLUTO)
   ============================================ */
.confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 99999;
}

.md-finish-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 75vh;
}

.md-finish-container {
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-10) var(--space-8);
  box-shadow: var(--shadow-xl);
  animation: mdPopIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes mdPopIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

.md-modal__header {
  margin-bottom: var(--space-8);
  text-align: center;
}

.md-podium {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.md-podium-card {
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  box-shadow: var(--shadow-sm);
  animation: mdPopIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.md-podium--gold {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border: 2px solid #f59e0b;
  box-shadow: 0 10px 25px rgba(245, 158, 11, 0.25);
}

.md-podium--silver {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border: 2px solid #94a3b8;
}

.md-podium--bronze {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border: 2px solid #b45309;
}

.md-medal {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 900;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}

.md-podium--gold .md-medal { background: #f59e0b; color: #ffffff; }
.md-podium--silver .md-medal { background: #94a3b8; color: #ffffff; }
.md-podium--bronze .md-medal { background: #b45309; color: #ffffff; }

.md-winner-name {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-family: var(--font-heading);
  font-weight: 900;
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}

.md-subwinner-name {
  font-size: var(--text-xl);
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--color-ink);
  margin-bottom: var(--space-1);
}

.md-winner-score,
.md-subwinner-score {
  font-size: var(--text-2xl);
  font-family: var(--font-heading);
  font-weight: 900;
  color: var(--color-accent);
}

.md-podium-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-4);
}

.md-modal__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}


/* EduTools visual refresh: shared tool polish */
:root {
  --sl-primary: var(--color-primary);
  --sl-primary-hover: var(--color-primary-dark);
  --sl-accent: var(--color-accent);
  --sl-accent-hover: var(--color-accent-dark);
  --sl-border: var(--color-border);
  --gc2-blue: var(--color-primary);
  --gc2-blue-lt: var(--color-primary-soft);
  --die-bg: var(--color-primary);
  --arena-bg: var(--color-primary-soft);
  --stat-bar-color: var(--color-primary);
}

.tool-stage {
  border-color: rgb(219 226 220 / 0.96);
  background: rgb(255 255 255 / 0.94);
  box-shadow: 0 18px 45px rgb(23 58 70 / 0.08);
}

.tool-stage :is(.sl-step, .gc2-panel, .grade-panel, .team-card, .rb-panel, .rb-card, .rb-section, .md-card, .md-panel, .vote-card, .clock-panel, .roulette-panel, .noise-card, .stats-section, .dice-arena) {
  border-color: rgb(219 226 220 / 0.96);
  border-radius: var(--radius-xl);
  box-shadow: 0 16px 36px rgb(23 58 70 / 0.08);
}

.tool-stage :is(input, textarea, select, .sl-qty-input, .gc2-meta-input, .gc2-setting select, .gc2-setting input[type="number"]) {
  border-color: rgb(202 213 205 / 0.95);
  background-color: #ffffff;
}

.tool-stage :is(input, textarea, select, .sl-qty-input, .gc2-meta-input):focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgb(23 107 135 / 0.12);
}

.btn--ai,
.gc2-btn--primary,
.btn-giant,
.rb-btn--primary,
.md-primary-action,
.vote-primary,
.clock-primary {
  border-color: var(--color-primary);
  color: #ffffff;
  background: var(--color-primary);
  box-shadow: 0 14px 24px rgb(23 107 135 / 0.18);
}

.btn--ai:hover,
.gc2-btn--primary:hover,
.btn-giant:hover,
.rb-btn--primary:hover,
.md-primary-action:hover,
.vote-primary:hover,
.clock-primary:hover {
  background: var(--color-primary-dark);
}

.sl-step::before {
  background: linear-gradient(90deg, var(--color-primary), #1b7f67, var(--color-accent));
}

.sl-preset.active,
.btn-toggle.active,
.grade-meter span {
  background: var(--color-primary);
}

.sl-qty-btn:hover,
.sl-preset:hover {
  border-color: rgb(23 107 135 / 0.34);
  color: var(--color-primary-dark);
  background: var(--color-primary-soft);
  box-shadow: 0 10px 20px rgb(23 107 135 / 0.12);
}

.rb-section__icon,
.rb-export-card__icon,
.edu-warning-icon,
.face {
  display: inline-grid;
  place-items: center;
  color: var(--color-primary-dark);
}

.edu-warning-icon {
  width: 3.75rem;
  height: 3.75rem;
  margin-bottom: 12px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
}

.rb-section__icon,
.rb-export-card__icon {
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
}

.material-symbols-outlined {
  vertical-align: middle;
}