/* ════════════════════════════════════════
   SETTINGS — trang cài đặt ứng dụng
════════════════════════════════════════ */

/* ── New drill-down settings ──────────────────────────────── */
.set-scroll-wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: 8px 16px calc(var(--nav-h) + 28px);
  min-height: 100%;
}

.set-back-btn {
  display: flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 0.88rem; font-weight: 600;
  color: var(--purple); padding: 10px 0 14px;
  transition: opacity 0.15s;
}
.set-back-btn:hover { opacity: 0.75; }

.set-root-icon {
  width: 36px; height: 36px;
  background: #EEF2FF;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0; line-height: 1;
}

.set-row--danger { cursor: pointer; }
.set-row-name--danger { color: #DC2626 !important; }
.set-row--danger .set-row-sub { color: var(--text-muted); }

.dark-mode .set-root-icon { background: rgba(99,102,241,0.15); }

/* ── Layout: 2 cột desktop, full-screen list mobile ─────────── */
.settings-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: calc(100vh - var(--top-h) - var(--nav-h));
  align-items: start;
}

.settings-sidebar {
  padding: 16px 14px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: sticky;
  top: 0;
  height: calc(100vh - var(--top-h));
  overflow-y: auto;
  border-right: 1px solid var(--border);
}

/* Section labels giữa các nhóm — YouTube style */
.set-menu-section-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  padding: 16px 4px 4px;
}

/* Menu item */
.s-tab-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 10px;
  min-height: 46px;
  border: none;
  border-top: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  width: 100%;
  transition: background 0.12s, transform 0.12s;
  border-radius: 10px;
}
.s-tab-item + .s-tab-item { margin-top: 1px; }
.s-tab-item:hover  { background: rgba(14,165,233,0.05); }
.s-tab-item:active { transform: scale(0.98); background: rgba(14,165,233,0.08); }
.s-tab-item.active { background: rgba(14,165,233,0.07); }

.s-tab-icon    { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 22px; height: 22px; color: var(--text-muted); }
.s-tab-icon svg { width: 19px; height: 19px; }
.s-tab-body    { flex: 1; min-width: 0; }
.s-tab-label   { display: block; font-size: 0.9rem; font-weight: 600; color: var(--text); }
.s-tab-desc    { display: none; }
.s-tab-chevron { display: none; color: var(--text-muted); flex-shrink: 0; width: 16px; height: 16px; }
.s-tab-chevron svg { width: 16px; height: 16px; }

/* Content panels */
.settings-content { padding: 20px 24px; min-width: 0; }

.s-panel        { display: none; }
.s-panel.active { display: block; }

.s-panel-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  padding: 20px 20px 12px;
}

.s-sub-group   { margin-top: 16px; margin-bottom: 6px; }
.s-mobile-back { display: none; }

/* ── Mobile ≤ 600px: full-screen list → drill-down ────────── */
@media (max-width: 600px) {
  .settings-layout { display: block; }

  .settings-sidebar {
    position: static;
    height: auto;
    overflow: visible;
    border-right: none;
    padding: 0 16px 24px;
  }
  .settings-content { display: none; padding: 0; }

  .settings-layout.s-drilldown .settings-sidebar { display: none; }
  .settings-layout.s-drilldown .settings-content { display: block; }
  .settings-layout.s-drilldown .s-panel-title    { display: none; }

  .s-tab-item {
    gap: 14px;
    padding: 14px 12px;
    min-height: 56px;
    border-radius: 0;
    border-bottom: 1px solid var(--border);
  }
  .s-tab-item + .s-tab-item { margin-top: 0; }
  .s-tab-item:last-of-type  { border-bottom: none; }
  .s-tab-item.active        { background: none; }

  .s-tab-icon    { width: 26px; height: 26px; }
  .s-tab-icon svg { width: 22px; height: 22px; }
  .s-tab-body    { display: flex; flex-direction: column; gap: 2px; }
  .s-tab-label   { font-size: 0.95rem; }
  .s-tab-desc    { display: block; font-size: 0.75rem; color: var(--text-muted); font-weight: 400; line-height: 1.3; }
  .s-tab-chevron { display: flex; align-items: center; width: 18px; height: 18px; }
  .s-tab-chevron svg { width: 18px; height: 18px; }

  .s-mobile-back { display: none; }

  .s-panel-title { margin: 0 16px 14px; padding-top: 4px; padding-bottom: 10px; }
}

/* ── Reminder Banner ─────────────────── */
.reminder-banner {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #0EA5E9, #38BDF8);
  color: #fff; padding: 11px 16px;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 4px 16px rgba(14,165,233,0.35);
  animation: reminderSlide 0.3s ease;
  margin-bottom: 2px;
}
@keyframes reminderSlide {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.reminder-icon { font-size: 1.2rem; flex-shrink: 0; }
.reminder-text { flex: 1; font-size: 0.85rem; font-weight: 600; line-height: 1.4; }
.reminder-close {
  background: rgba(255,255,255,0.22); border: none; color: #fff;
  border-radius: 50%; width: 26px; height: 26px; flex-shrink: 0;
  cursor: pointer; font-size: 0.85rem; display: flex;
  align-items: center; justify-content: center;
  transition: background 0.15s;
}
.reminder-close:hover { background: rgba(255,255,255,0.38); }

/* ── Profile Card ────────────────────── */
.settings-profile-card {
  border-color: var(--purple) !important;
  background: linear-gradient(135deg, var(--purple-light, #E0F2FE) 0%, var(--surface) 70%);
}
.profile-content {
  display: flex; align-items: center; gap: 14px; padding: 16px;
}
.profile-avatar-btn {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--surface); border: 2.5px solid var(--purple);
  font-size: 2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: transform 0.15s;
  box-shadow: 0 3px 10px rgba(14,165,233,0.2);
}
.profile-avatar-btn:hover { transform: scale(1.08); }
.profile-info { flex: 1; min-width: 0; }
.profile-name-row {
  display: flex; align-items: center; gap: 7px; margin-bottom: 4px;
}
.profile-name { font-size: 1.1rem; font-weight: 800; color: var(--text); }
.profile-name-edit-btn {
  background: none; border: none; cursor: pointer;
  font-size: 0.82rem; padding: 2px; opacity: 0.55;
  transition: opacity 0.15s; line-height: 1;
}
.profile-name-edit-btn:hover { opacity: 1; }
.profile-name-input {
  font-size: 1rem; font-weight: 700; color: var(--text);
  border: 1.5px solid var(--purple); border-radius: var(--radius-sm);
  padding: 5px 9px; background: var(--bg);
  font-family: inherit; outline: none; width: 100%; box-sizing: border-box;
}
.profile-since { font-size: 0.73rem; color: var(--text-muted); margin-top: 2px; }

/* ── Avatar Grid ─────────────────────── */
.avatar-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 7px;
  padding: 4px 0 14px;
}
.avatar-option {
  font-size: 1.55rem; width: 46px; height: 46px;
  border: 2px solid transparent; border-radius: 10px;
  background: var(--bg); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.avatar-option:hover      { border-color: var(--purple); background: var(--purple-light, #E0F2FE); }
.avatar-option-active     { border-color: var(--purple); background: var(--purple-light, #E0F2FE); }

/* ── Accent Selector ─────────────────── */
.accent-selector {
  display: flex; gap: 8px; margin-top: 10px; align-items: center; flex-wrap: wrap;
}
.accent-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 18px; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg);
  cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.accent-flag  { font-size: 1.3rem; line-height: 1; }
.accent-label { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
.accent-btn:hover { border-color: var(--purple); }
.accent-btn-active {
  border-color: var(--purple); background: var(--purple-light, #E0F2FE);
}
.accent-btn-active .accent-label { color: var(--purple); }
.accent-preview-btn {
  margin-left: auto; padding: 9px 14px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); cursor: pointer; font-family: inherit;
  font-size: 0.82rem; font-weight: 600; color: var(--text-muted);
  transition: all 0.15s; white-space: nowrap;
}
.accent-preview-btn:hover { border-color: var(--purple); color: var(--purple); }

/* ── Accent color row (dot picker) ───── */
.set-accent-row {
  justify-content: flex-start; gap: 14px; flex-wrap: wrap;
}
.set-accent-dot {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid transparent; cursor: pointer;
  flex-shrink: 0; transition: transform 0.15s, border-color 0.15s;
}
.set-accent-dot:hover     { transform: scale(1.15); }
.set-accent-dot--active   { border-color: var(--text); transform: scale(1.12); }

/* ── Card ────────────────────────────── */
.settings-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.settings-card-title {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 11px 16px 10px;
  border-bottom: 1px solid var(--border);
}

/* ── Settings rows ───────────────────── */
.settings-list { display: flex; flex-direction: column; }
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  gap: 12px;
  border-bottom: 1px solid var(--border);
}
.settings-row:last-child { border-bottom: none; }
.settings-row-block {
  flex-direction: column;
  align-items: flex-start;
}
.settings-label { font-weight: 700; font-size: 0.9rem; color: var(--text); }
.settings-sub   { font-size: 0.76rem; color: var(--text-muted); margin-top: 2px; }

/* ── Segmented control ───────────────── */
.settings-segment {
  display: flex;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
  margin-top: 8px;
  width: 100%;
}
.seg-btn {
  flex: 1;
  padding: 7px 6px;
  border: none;
  border-radius: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  background: none;
  color: var(--text-muted);
  transition: all 0.18s;
  white-space: nowrap;
  text-align: center;
}
.seg-btn.active {
  background: var(--surface);
  color: var(--purple);
  box-shadow: 0 1px 5px rgba(0,0,0,0.1);
  font-weight: 700;
}

/* ── Data buttons ────────────────────── */
.settings-data-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.settings-data-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s;
  text-align: left;
}
.settings-data-btn:hover { border-color: var(--purple); background: var(--purple-light); }
.sdb-icon  { font-size: 1.25rem; flex-shrink: 0; }
.sdb-label { font-size: 0.84rem; font-weight: 700; color: var(--text); display: block; }
.sdb-sub   { font-size: 0.7rem; color: var(--text-muted); display: block; margin-top: 1px; }

/* ── Danger zone ─────────────────────── */
.settings-danger-zone {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── About version card ──────────────── */
.about-version-card {
  background: linear-gradient(135deg, var(--purple-light) 0%, var(--surface) 75%);
  border: 1.5px solid rgba(14,165,233,0.25);
  border-radius: var(--radius);
  padding: 20px;
}
.about-loading { color: var(--text-muted); font-size: 0.85rem; }
.about-app-row {
  display: flex; align-items: center; gap: 14px; margin-bottom: 12px;
}
.about-logo-mark {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--purple); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 900; flex-shrink: 0;
}
.about-app-info { display: flex; flex-direction: column; gap: 2px; }
.about-app-name { font-size: 1rem; font-weight: 800; color: var(--text); }
.about-version-badge {
  display: inline-block; font-size: 0.78rem; font-weight: 700;
  color: var(--purple); background: var(--purple-light);
  border: 1px solid rgba(14,165,233,0.25);
  border-radius: 20px; padding: 2px 10px;
}
.about-date {
  font-size: 0.78rem; color: var(--text-muted);
  margin-bottom: 14px;
}
.about-changes-title {
  font-size: 0.72rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.about-changes-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.about-changes-list li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 0.86rem; color: var(--text); line-height: 1.4;
  padding: 8px 10px;
  background: rgba(255,255,255,0.55);
  border-radius: var(--radius-sm);
}
.about-changes-list li::before {
  content: '✦'; color: var(--purple);
  font-size: 0.65rem; flex-shrink: 0; margin-top: 3px;
}
#app.dark-mode .about-changes-list li { background: rgba(0,0,0,0.2); }
#app.dark-mode .about-version-card    { border-color: rgba(14,165,233,0.3); }

/* ── Footer ──────────────────────────── */
.settings-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 2px 8px;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.settings-footer a { color: var(--purple); text-decoration: none; font-weight: 600; }
.settings-footer a:hover { text-decoration: underline; }
.settings-build-badge {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em;
  color: #fff; background: var(--purple); border-radius: 20px;
  padding: 2px 8px; opacity: 0.75;
}

/* ════════════════════════════════════════
   DARK MODE
════════════════════════════════════════ */

/* 1 — CSS variables (cả body để modal ngoài #app cũng nhận màu tối) */
#app.dark-mode, body.dark-mode {
  --bg:           #0F172A;
  --surface:      #1E293B;
  --text:         #F1F5F9;
  --text-muted:   #94A3B8;
  --border:       #334155;
  --shadow:       0 4px 24px rgba(0,0,0,0.55);
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.4);
  --purple-light: rgba(14,165,233,0.18);
  --green-light:  rgba(5,150,105,0.2);
  --orange-light: rgba(217,119,6,0.2);
  --red-light:    rgba(220,38,38,0.2);
  --pink-light:   rgba(219,39,119,0.2);
}

/* 2 — Body background */
body.dark-mode { background: #0F172A; }

/* 3 — Inputs, textareas, selects */
#app.dark-mode input:not([type=checkbox]):not([type=radio]),
#app.dark-mode textarea,
#app.dark-mode select {
  background: #0F172A;
  color: #F1F5F9;
  border-color: #334155;
  color-scheme: dark;
}
#app.dark-mode input::placeholder,
#app.dark-mode textarea::placeholder { color: #475569; }

/* 4 — Toggle track */
#app.dark-mode .toggle-slider { background: #475569; }

/* 5 — Badges */
#app.dark-mode .badge-green  { background: rgba(5,150,105,0.22);  color: #34D399; }
#app.dark-mode .badge-blue   { background: rgba(37,99,235,0.22);  color: #60A5FA; }
#app.dark-mode .badge-orange,
#app.dark-mode .badge-amber  { background: rgba(217,119,6,0.22);  color: #FCD34D; }
#app.dark-mode .badge-red    { background: rgba(220,38,38,0.22);  color: #F87171; }
#app.dark-mode .badge-yellow { background: rgba(202,138,4,0.22);  color: #FDE047; }

/* 6 — Word status labels & review tags */
#app.dark-mode .lib-ws-new      { background: rgba(14,165,233,0.2);  color: #38BDF8; }
#app.dark-mode .lib-ws-learning { background: rgba(217,119,6,0.2);   color: #FCD34D; }
#app.dark-mode .lib-ws-due      { background: rgba(220,38,38,0.2);   color: #F87171; }
#app.dark-mode .lib-ws-known    { background: rgba(5,150,105,0.2);   color: #34D399; }
#app.dark-mode .lib-ws-weak     { background: rgba(180,83,9,0.2);    color: #FB923C; }
#app.dark-mode .lib-sc-due      { background: rgba(220,38,38,0.15);  border-color: rgba(220,38,38,0.3); color: #F87171; }
#app.dark-mode .wrt-due         { background: rgba(220,38,38,0.2);   color: #F87171; }
#app.dark-mode .wrt-today       { background: rgba(217,119,6,0.2);   color: #FCD34D; }
#app.dark-mode .wrt-soon        { background: rgba(37,99,235,0.2);   color: #60A5FA; }
#app.dark-mode .wrt-ok          { background: rgba(5,150,105,0.2);   color: #34D399; }

/* 7 — Stat card chip backgrounds */
#app.dark-mode .scv2-purple { background: rgba(14,165,233,0.18); }
#app.dark-mode .scv2-green  { background: rgba(5,150,105,0.18); }
#app.dark-mode .scv2-orange { background: rgba(217,119,6,0.18); }
#app.dark-mode .scv2-blue   { background: rgba(37,99,235,0.18); }
#app.dark-mode .hsc-indigo  { background: rgba(14,165,233,0.18); }

/* 8 — Streak banner */
#app.dark-mode .stats-streak-banner {
  background: linear-gradient(135deg, #451A03, #78350F);
  border-color: #92400E;
}
#app.dark-mode .ssb-label,
#app.dark-mode .ssb-sub { color: #FDE68A; }
#app.dark-mode .ssb-num { color: #FCD34D; }

/* 9 — Records tiles (override inline style) */
#app.dark-mode .rec-tile {
  background: #1E293B !important;
  border: 1.5px solid #334155;
}

/* 10 — Study session feedback & XP chips */
#app.dark-mode .srb-acc-bad  { background: rgba(220,38,38,0.2) !important; }
#app.dark-mode .smfb-xp      { background: rgba(202,138,4,0.22);   color: #FDE047; border-color: rgba(253,230,138,0.25); }
#app.dark-mode .smfb-streak  { background: rgba(217,119,6,0.22);   color: #FCD34D; border-color: rgba(253,230,138,0.25); }

/* 11 — Session exit stats */
#app.dark-mode .exit-stat-item.ok  { background: rgba(5,150,105,0.2);  color: #34D399; }
#app.dark-mode .exit-stat-item.bad { background: rgba(220,38,38,0.2);  color: #F87171; }
#app.dark-mode .exit-stat-item.xp  { background: rgba(202,138,4,0.2);  color: #FDE047; }
#app.dark-mode .exit-stat-item.acc { background: rgba(14,165,233,0.2); color: #38BDF8; }

/* 12 — Match game correct/wrong states */
#app.dark-mode .msb-card.matched { background: rgba(5,150,105,0.2)  !important; border-color: #059669 !important; }
#app.dark-mode .msb-card.wrong   { background: rgba(220,38,38,0.2)  !important; border-color: #DC2626 !important; }

/* 13 — Danger buttons */
#app.dark-mode .btn-danger { background: rgba(220,38,38,0.12); border-color: rgba(252,165,165,0.25); }

/* 18 — Settings sidebar */
#app.dark-mode .s-tab-item.active { background: rgba(14,165,233,0.22); }

/* 14 — Library selections */
#app.dark-mode .lib-word-item.selected { background: rgba(14,165,233,0.18); border-color: var(--purple); }

/* 15 — Notebook science chips */
#app.dark-mode .nb-sci-purple,
#app.dark-mode .nb-sci-indigo { background: rgba(14,165,233,0.15); }
#app.dark-mode .nb-sci-blue   { background: rgba(37,99,235,0.15);  }
#app.dark-mode .nb-sci-green  { background: rgba(5,150,105,0.15);  }
#app.dark-mode .nb-sci-yellow { background: rgba(217,119,6,0.15);  }

/* 16 — AI duplicate hint */
#app.dark-mode .ai-dup-hint {
  background: rgba(217,119,6,0.15); color: #FCD34D;
  border-color: rgba(253,211,77,0.25);
}

/* 17 — Word/deck dupe badges */
#app.dark-mode .word-dupe-badge { background: rgba(180,83,9,0.2); color: #FB923C; }


/* ── Collapsible rows ────────────────── */
.settings-collapsible {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease, visibility 0.25s ease;
  border-bottom: none !important;
}

/* ── About row extras ────────────────── */
.settings-val {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 600;
}
.settings-row-link {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.15s;
}
.settings-row-link:hover  { background: rgba(0,0,0,0.04); }
.settings-row-link:active { transform: scale(0.99); }
.settings-arrow {
  font-size: 1.1rem;
  color: var(--text-muted);
}

/* ── Danger card ─────────────────────── */
.settings-danger-card {
  border-color: #FECACA !important;
}
.settings-danger-card .settings-card-title,
.settings-danger-title {
  background: #FEF2F2;
  color: #DC2626;
  border-bottom-color: #FECACA;
}
#app.dark-mode .settings-danger-card { border-color: rgba(220,38,38,0.35) !important; }
#app.dark-mode .settings-danger-card .settings-card-title {
  background: rgba(220,38,38,0.12);
  color: #F87171;
  border-bottom-color: rgba(220,38,38,0.25);
}

/* ── Time input ──────────────────────── */
.settings-time-input {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
  outline: none;
  cursor: pointer;
}
.settings-time-input:focus { border-color: var(--purple); }

/* ════════════════════════════════════════
   DRILL-DOWN LIST + BOTTOM-SHEET
════════════════════════════════════════ */
.set-group-label {
  font-size: 0.72rem; font-weight: 600; color: var(--text-muted);
  letter-spacing: 0; margin: 4px 4px 6px;
}
.set-list {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.set-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 11px 16px;
  background: none; border: none; font-family: inherit; text-align: left;
  cursor: pointer; color: var(--text); transition: background 0.15s;
}
.set-row + .set-row { border-top: 1px solid var(--border); }
button.set-row:hover  { background: rgba(0,0,0,0.04); }
button.set-row:active { transform: scale(0.99); background: rgba(0,0,0,0.07); }
.set-row--static { cursor: default; }
.set-row.settings-collapsible { border-top: none; }
.set-row-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.set-row > .set-row-name { flex: 1; }
.set-row-name { font-size: 0.92rem; font-weight: 600; color: var(--text); }
.set-row-sub  { font-size: 0.76rem; color: var(--text-muted); font-weight: 400; }
.set-row-val  { font-size: 0.88rem; color: var(--text-muted); margin-left: auto; white-space: nowrap; }
.set-row-arrow { color: var(--text-muted); font-size: 1.2rem; flex-shrink: 0; line-height: 1; }

/* Bottom-sheet (tái dùng hệ .modal sẵn có) */
.sheet-handle {
  width: 40px; height: 4px; border-radius: 2px;
  background: var(--border); margin: -6px auto 14px;
}
.sheet-title { font-size: 1.05rem; font-weight: 800; text-align: center; margin-bottom: 14px; color: var(--text); }
.sheet-options { display: flex; flex-direction: column; gap: 8px; }
.sheet-opt {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 14px 16px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); font-family: inherit; font-size: 0.95rem;
  color: var(--text); cursor: pointer; transition: all 0.15s;
}
.sheet-opt:hover { border-color: var(--purple); }
.sheet-opt--active { border-color: var(--purple); background: var(--purple-light); color: var(--purple); font-weight: 700; }
.sheet-check { color: var(--purple); font-weight: 800; }
.sheet-extra:empty { display: none; }
.sheet-extra { margin-top: 10px; }
.sheet-preview {
  width: 100%; padding: 11px; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); background: var(--purple-light);
  color: var(--purple); font-weight: 600; font-family: inherit; cursor: pointer;
}
.sheet .btn-outline { margin-top: 12px; }

/* ════════════════════════════════════════
   Desktop ≥ 1024px
════════════════════════════════════════ */
@media (min-width: 1024px) {
  .settings-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
  }
  /* Profile & footer span cả 2 cột */
  .settings-profile-card { grid-column: 1 / -1; }
  .settings-footer        { grid-column: 1 / -1; }

  .settings-row           { padding: 14px 18px; }
  .settings-card-title    { padding: 12px 18px 11px; }
  .settings-data-btns     { gap: 10px; padding: 14px 18px; }
  .settings-danger-zone   { padding: 14px 18px; }
}

/* ── Bulk import (nạp nhiều file) ───────── */
.settings-data-btn--accent {
  grid-column: 1 / -1;
  border-color: var(--purple) !important;
  background: var(--purple-light) !important;
}
.settings-data-btn--accent .sdb-label { color: var(--purple); }
.bulk-hint { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 12px; line-height: 1.4; }
.bulk-resolve-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; max-height: 50vh; overflow-y: auto; }
.bulk-row { border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
.bulk-row-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.bulk-row-name { font-size: 0.9rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bulk-row-count { font-size: 0.78rem; color: var(--text-muted); flex-shrink: 0; }
.bulk-choice { display: flex; gap: 8px; }
.bulk-choice-btn {
  flex: 1; padding: 8px; font-size: 0.8rem; font-weight: 600;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-muted); cursor: pointer; font-family: inherit;
  transition: all 0.15s;
}
.bulk-choice-btn.active { border-color: var(--purple); background: var(--purple-light); color: var(--purple); }
.bulk-new-tag { font-size: 0.8rem; color: var(--green); font-weight: 600; }
.sheet .btn-primary + .btn-outline { margin-top: 8px; }

/* ── Chọn bộ: xuất / nhập có checkbox ───── */
.exp-row {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
}
.exp-row input, .bulk-row-head input { width: 18px; height: 18px; accent-color: var(--purple); flex-shrink: 0; cursor: pointer; }
.exp-name  { flex: 1; font-size: 0.9rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-count { font-size: 0.78rem; color: var(--text-muted); flex-shrink: 0; }
.exp-all   { background: var(--bg); }
.exp-all span { font-size: 0.88rem; font-weight: 700; color: var(--text); }
.bulk-row-head { cursor: pointer; }
.bulk-row-head .bulk-row-name { flex: 1; }

/* ── Bottom-sheet: nút X + nhãn nhóm ───── */
.modal.sheet { position: relative; }
.sheet-close {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: var(--bg); color: var(--text-muted);
  font-size: 0.95rem; cursor: pointer; font-family: inherit; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.sheet-close:hover { background: var(--border); color: var(--text); }
.sheet-group-label {
  font-size: 0.74rem; font-weight: 800; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px; margin: 14px 2px 8px;
}
.sheet-group-label:first-of-type { margin-top: 4px; }
.sheet .settings-data-btns { border-bottom: none; padding: 0; }

/* ── Export Learning Data sheet ──────────────────────────────────── */
.eld-summary {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.eld-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  color: var(--text);
}
.eld-row--total {
  font-weight: 700;
  font-size: 0.95rem;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.eld-row--sub {
  color: var(--text-muted);
  font-size: 0.82rem;
  padding-left: 10px;
}
.eld-warning {
  font-size: 0.78rem;
  color: var(--text-muted);
  background: rgba(217,119,6,0.08);
  border: 1px solid rgba(217,119,6,0.2);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 16px;
  line-height: 1.4;
}
.eld-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Export Panel ────────────────────────────────────────── */
.exp-panel-row {
  display: flex;
  align-items: center;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  gap: 8px;
  transition: background 0.12s;
  border-radius: 0;
}
.exp-panel-row:last-of-type { border-bottom: none; }
.exp-panel-row:hover { background: var(--bg); border-radius: var(--radius-sm); }
.exp-panel-label {
  flex: 0 0 130px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}
.exp-panel-val {
  flex: 1;
  font-size: 0.84rem;
  color: var(--text-muted);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.exp-panel-arrow { color: var(--text-muted); font-size: 1rem; flex-shrink: 0; margin-left: 4px; }
.exp-preview-hint {
  font-size: 0.78rem;
  color: var(--purple);
  background: var(--purple-light);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-top: 14px;
  font-family: monospace;
  word-break: break-all;
}
.exp-fields-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
  max-height: 55vh;
  overflow-y: auto;
}
.exp-field-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.exp-field-row input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--purple);
  flex-shrink: 0;
  cursor: pointer;
}
.exp-field-label { font-size: 0.88rem; color: var(--text); line-height: 1.3; }
.exp-field-row:has(input:checked) {
  border-color: var(--purple);
  background: var(--purple-light);
}
.exp-field-row:has(input:checked) .exp-field-label {
  color: var(--purple);
  font-weight: 600;
}