/* BrainBox i18n — Global styles injected into all pages */

/* Language switcher (injected into nav) */
.lang-switcher {
  display: flex; gap: 3px; background: rgba(255,255,255,0.05); border-radius: 10px; padding: 3px;
  border: 1px solid rgba(255,255,255,0.08);
}
.lang-btn {
  padding: 5px 10px 7px; border-radius: 7px; border: none; cursor: pointer;
  font-size: 1rem; background: transparent; transition: all 0.2s; line-height: 1.2;
}
.lang-btn:hover { background: rgba(255,255,255,0.06); }
.lang-btn.active { background: rgba(91,247,160,0.15); box-shadow: 0 0 0 1px rgba(91,247,160,0.3); }

/* Grade selector */
.grade-section {
  background: rgba(26,45,64,0.6); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px;
  padding: 20px; margin-bottom: 24px;
}
.grade-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.grade-title { font-size: 0.9rem; font-weight: 700; margin: 0; }
.grade-reset {
  padding: 4px 14px; border-radius: 6px; font-size: 0.72rem; font-weight: 600;
  cursor: pointer; background: transparent; border: 1px solid rgba(255,255,255,0.08);
  color: #ff6b9d; transition: all 0.2s; font-family: inherit;
}
.grade-reset:hover { border-color: #ff6b9d; background: rgba(255,107,157,0.08); }
.grade-stages { display: flex; flex-direction: column; gap: 6px; }
.grade-stage { border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); overflow: hidden; transition: all 0.3s; }
.grade-stage.open { border-color: color-mix(in srgb, var(--stage-color,#5bf7a0) 40%, transparent); background: color-mix(in srgb, var(--stage-color,#5bf7a0) 5%, transparent); }
.stage-header {
  width: 100%; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between;
  background: transparent; border: none; color: inherit; cursor: pointer;
  font-size: 0.82rem; font-weight: 600; font-family: inherit;
}
.stage-left { display: flex; align-items: center; gap: 10px; }
.stage-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.stage-count { font-size: 0.68rem; opacity: 0.5; font-weight: 400; }
.stage-arrow { opacity: 0.5; font-size: 0.6rem; transition: transform 0.2s; }
.grade-stage.open .stage-arrow { transform: rotate(180deg); }
.stage-grades { padding: 0 10px 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.grade-btn {
  padding: 8px 14px; border-radius: 8px; cursor: pointer; font-family: inherit;
  font-size: 0.75rem; font-weight: 500; transition: all 0.2s;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); color: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 80px;
}
.grade-btn:hover { border-color: rgba(255,255,255,0.15); }
.grade-btn.active { border-color: var(--gc); color: var(--gc); background: color-mix(in srgb, var(--gc) 12%, transparent); font-weight: 700; }
.grade-label { font-size: 0.75rem; }
.grade-age { font-size: 0.62rem; opacity: 0.6; }
.grade-btn.active .grade-age { opacity: 1; }

/* NEW badge on cards */
.card-new {
  display: none; position: absolute; top: 8px; right: 8px;
  padding: 2px 8px; border-radius: 5px; font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.5px; color: #5bf7a0;
  background: rgba(91,247,160,0.12); border: 1px solid rgba(91,247,160,0.25);
}

/* Floating lang switcher (pages without nav, e.g. login) */
.lang-switcher-float {
  position: fixed; top: 16px; right: 16px; z-index: 1000;
}

/* RTL support */
html[dir="rtl"] .lang-switcher-float { right: auto; left: 16px; }
html[dir="rtl"] .card-new { right: auto; left: 8px; }
html[dir="rtl"] .search-icon { left: auto; right: 14px; }
html[dir="rtl"] .search-input { padding-left: 16px; padding-right: 42px; }
html[dir="rtl"] .stage-left { flex-direction: row-reverse; }

/* Responsive */
@media (max-width: 768px) {
  .lang-switcher { gap: 1px; padding: 2px; }
  .lang-btn { padding: 4px 6px; font-size: 0.85rem; }
}
@media (max-width: 480px) {
  .grade-btn { min-width: 64px; padding: 6px 8px; }
  .stage-grades { gap: 4px; }
}