/* ── Mode bar ────────────────────────────────────────────────────────────────── */
#mode-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.mb-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 20px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  transition: all 0.15s;
}
.mb-btn:hover  { background: #1a1a3a; color: var(--text); }
.mb-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Compact icon-only toggles (sound / music) */
.mb-icon { padding: 5px 9px; font-size: 14px; line-height: 1; }
.mb-icon:not(.active) { opacity: 0.55; } /* off = dimmed, on = full + accent */

.mb-sep {
  width: 1px;
  background: var(--border);
  margin: 2px 4px;
  align-self: stretch;
}

.mb-select {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 20px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  outline: none;
  transition: all 0.15s;
  /* Fixed width: options are filled in after the data loads, and an auto-sized
     select would grow to its longest label then — shifting the whole page (CLS). */
  width: 16em;
  max-width: 100%;
}
.mb-select:hover  { background: #1a1a3a; color: var(--text); }
.mb-select:focus  { border-color: var(--accent); color: var(--text); }
.mb-select option { background: #0f0f23; color: var(--text); }
.mb-select option:disabled { color: var(--muted); }

.mb-next {
  margin-left: auto;
  align-self: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

/* Direction badge in card */
.dir-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  margin-bottom: 18px;
  margin-left: 6px;
}
.dir-badge.en-fr { background: rgba(59,130,246,0.15); color: var(--accent2); border: 1px solid rgba(59,130,246,0.3); }
.dir-badge.fr-en { background: rgba(16,185,129,0.15); color: var(--green);   border: 1px solid rgba(16,185,129,0.3); }

.card-top { display: flex; align-items: center; flex-wrap: wrap; }