.gcm-algos-grid {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.gcm-algo-card {
  background: var(--color-surface-2);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1rem 1.5rem;
  flex: 1;
  min-width: 180px;
}

.gcm-algo-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: #475569;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.gcm-select {
  width: 100%;
  padding: 0.6rem 1rem;
  border: 2px solid #cbd5e1;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  background: #fff;
  cursor: pointer;
  outline: none;
}
.gcm-select:focus {
  border-color: var(--color-primary);
}

.gcm-list-container {
  padding: 1rem 1.5rem 0.5rem;
  column-count: 2;
  column-gap: 3rem;
  min-height: 300px;
}

.gcm-exercise-line {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0.4rem;
  break-inside: avoid;
  page-break-inside: avoid;
  display: flex;
  align-items: center;
  width: 100%;
}

.gcm-number-label {
  display: inline-block;
  width: 30px;
  color: #64748b;
  font-weight: 800;
  flex-shrink: 0;
}

.gcm-expression {
  flex: 1;
  white-space: nowrap;
  text-align: right;
  padding-right: 0.25rem;
}

.gcm-solution-box {
  display: inline-flex;
  min-width: 48px;
  height: 30px;
  border: 2px solid #cbd5e1;
  border-radius: 6px;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
  color: transparent;
  transition: all 0.2s;
}

.gcm-solution-box.visible {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

/* Base styles reusing generador-sumas layout */
.gs-step, .gs-toolbar, .gs-notebook {
  background: #fff; border-radius: 16px; border: 1px solid #e2e8f0;
}
.gs-step { padding: 3rem; margin-bottom: 2.5rem; box-shadow: 0 10px 30px -5px rgba(15,23,42,0.08); position: relative; overflow: hidden; }
.gs-step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--color-primary), var(--color-accent), var(--color-success)); }
.gs-step__header h2 { font-size: 2rem; font-weight: 800; color: #0f172a; margin-bottom: 0.5rem; }
.gs-step__desc { color: #64748b; font-size: 1.1rem; margin-bottom: 2.5rem; line-height: 1.6; }
.gs-section { margin-bottom: 2.5rem; }
.gs-label { display: block; font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #0f172a; margin-bottom: 1rem; }
.gs-qty-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.gs-qty-btn { width: 48px; height: 48px; border: 2px solid #cbd5e1; border-radius: 12px; background: var(--color-surface-2); font-size: 1.5rem; font-weight: 700; cursor: pointer; }
.gs-qty-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.gs-qty-input { width: 88px; height: 48px; border: 2px solid #cbd5e1; border-radius: 12px; text-align: center; font-size: 1.35rem; font-weight: 800; outline: none; }
.gs-presets { display: flex; gap: 0.6rem; margin-left: 1rem; }
.gs-preset { padding: 0.6rem 1.25rem; border: 2px solid #cbd5e1; border-radius: 100px; font-weight: 700; cursor: pointer; background: #fff;}
.gs-preset.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.gs-addends-toggle { display: flex; gap: 1rem; max-width: 600px; }
.gs-toggle-btn { flex: 1; padding: 1rem; border: 2px solid #cbd5e1; border-radius: 14px; font-weight: 800; cursor: pointer; background: #fff;}
.gs-toggle-btn.active { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary); }
.gs-btn-generate { background: linear-gradient(135deg, var(--color-primary), var(--color-primary)); color: #fff; padding: 1.25rem 3.5rem; border-radius: 100px; font-size: 1.25rem; font-weight: 800; border: none; cursor: pointer; }
.gs-toolbar { padding: 1.25rem 2rem; margin-bottom: 2.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; }
.gs-toolbar-left, .gs-toolbar-right { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.gs-toolbar-divider { width: 2px; height: 28px; background: #e2e8f0; }
.gs-toggle-answers { padding: 0.75rem 1.5rem; border: 2px solid #cbd5e1; border-radius: 100px; font-weight: 800; cursor: pointer; background: #fff;}
.gs-toggle-answers.active { background: #10b981; border-color: #059669; color: #fff; }
.gs-worksheet-header { padding: 0.75rem 2rem 0.5rem; display: flex; flex-direction: column; align-items: center; border-bottom: 3px solid #0f172a; }
.gs-header-title-input { width: 100%; max-width: 700px; border: none; text-align: center; font-size: 1.45rem; font-weight: 900; background: transparent; }
.gs-header-subtitle-input { width: 100%; max-width: 700px; border: none; text-align: center; font-size: 1rem; font-weight: 700; background: transparent; }
.gs-header-date { display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin-top: 0.25rem; }
.gs-header-date-input { border: none; border-bottom: 1px solid #cbd5e1; font-family: inherit; font-size: 0.95rem; font-weight: 600; text-align: center; background: transparent;}
.gs-header-meta { display: flex; justify-content: space-between; width: 100%; max-width: 700px; margin-top: 0.5rem; border-top: 1px dashed #cbd5e1; padding-top: 0.5rem;}
.gs-meta-item--student { display: flex; align-items: flex-end; gap: 0.75rem; flex: 1; }
.gs-meta-line { flex: 1; border-bottom: 2px solid #0f172a; height: 26px; }
.gs-student-input { width: 100%; border: none; background: transparent; font-weight: 700; }
.gs-meta-item--score { display: flex; align-items: center; gap: 0.5rem; }
.gs-score-box { width: 44px; height: 32px; border: 2px solid #0f172a; border-radius: 8px; }
.gs-loading-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.7); display: none; align-items: center; justify-content: center; z-index: 2000; }
.gs-loading-overlay:not([hidden]) { display: flex; }
.gs-loading-box { background: #fff; padding: 3.5rem 5rem; border-radius: 24px; text-align: center; }
.gs-spinner { width: 56px; height: 56px; border: 4px solid #e2e8f0; border-top-color: var(--color-primary); border-radius: 50%; margin: 0 auto 1.5rem; animation: spin 1s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }

@media (max-width: 768px) {
  .gcm-list-container {
    column-count: 1;
  }
}


/* 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;
}