:root {
  --bdf-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bdf-ink: #172033;
  --bdf-muted: #667085;
  --bdf-navy: #15345b;
  --bdf-blue: #1769aa;
  --bdf-blue-soft: #eaf4fb;
  --bdf-red: #d83a4e;
  --bdf-yellow: #f4c542;
  --bdf-green: #16865d;
  --bdf-green-soft: #e9f7f1;
  --bdf-danger: #c52f3f;
  --bdf-danger-soft: #fff0f1;
  --bdf-warning: #9a6810;
  --bdf-warning-soft: #fff8dd;
  --bdf-surface: #ffffff;
  --bdf-canvas: #f4f7fa;
  --bdf-border: #dce3ea;
  --bdf-border-strong: #c8d2dd;
  --bdf-shadow: 0 10px 28px rgba(22, 45, 74, 0.09);
  --bdf-radius: 8px;
  --bdf-radius-sm: 6px;
  --bdf-focus: 0 0 0 3px rgba(23, 105, 170, 0.2);
  --bdf-chart-1: #1769aa;
  --bdf-chart-2: #d83a4e;
  --bdf-chart-3: #16865d;
  --bdf-chart-4: #d19b16;
  --bdf-chart-5: #7656a8;
}

html { color-scheme: light; }
body { font-family: var(--bdf-font); color: var(--bdf-ink); background: var(--bdf-canvas); }
body, button, input, textarea, select { letter-spacing: 0; }
button, input, textarea, select { font: inherit; }
img, svg, canvas { max-width: 100%; }

.user-dashboard-root,
.admin-shell,
.auth-page {
  --navy: var(--bdf-navy);
  --blue: var(--bdf-blue);
  --red: var(--bdf-red);
  --yellow: var(--bdf-yellow);
  --green: var(--bdf-green);
  --muted: var(--bdf-muted);
  --border: var(--bdf-border);
  color: var(--bdf-ink);
}

.user-dashboard-root :where(h1, h2, h3, h4),
.admin-shell :where(h1, h2, h3, h4),
.auth-page :where(h1, h2, h3, h4) {
  color: var(--bdf-navy);
  font-family: var(--bdf-font);
  line-height: 1.2;
  letter-spacing: 0;
  text-wrap: balance;
}

.user-dashboard-root :where(p, li, label, td, th),
.admin-shell :where(p, li, label, td, th),
.auth-page :where(p, li, label) { line-height: 1.55; }

.user-dashboard-root :where(.primary-button, .secondary-button, .ghost-user-button, .deck-button, .user-button),
.admin-shell :where(.primary-button, .secondary-button, .view-site-button, .support-button, .admin-button),
.auth-page :where(.auth-submit) {
  min-height: 42px;
  border-radius: var(--bdf-radius-sm);
  font-weight: 750;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.user-dashboard-root :where(.primary-button, .deck-button),
.admin-shell :where(.primary-button, .support-button),
.auth-page .auth-submit {
  border: 1px solid var(--bdf-blue);
  background: var(--bdf-blue);
  color: #fff;
  box-shadow: 0 5px 14px rgba(23, 105, 170, .18);
}

.user-dashboard-root :where(.secondary-button, .ghost-user-button),
.admin-shell :where(.secondary-button, .view-site-button) {
  border: 1px solid var(--bdf-border-strong);
  background: var(--bdf-surface);
  color: var(--bdf-navy);
  box-shadow: none;
}

.user-dashboard-root :where(button, a, input, textarea, select):focus-visible,
.admin-shell :where(button, a, input, textarea, select):focus-visible,
.auth-page :where(button, a, input, textarea, select):focus-visible {
  outline: none;
  box-shadow: var(--bdf-focus);
}

.user-dashboard-root :where(button, a[class*="button"]):not(:disabled):hover,
.admin-shell :where(button, a[class*="button"]):not(:disabled):hover { transform: translateY(-1px); }

.user-dashboard-root :where(input, textarea, select),
.admin-shell :where(input, textarea, select),
.auth-page :where(input, textarea, select) {
  min-height: 42px;
  max-width: 100%;
  border: 1px solid var(--bdf-border-strong);
  border-radius: var(--bdf-radius-sm);
  background: #fff;
  color: var(--bdf-ink);
}

.user-dashboard-root :where(input, textarea, select):focus,
.admin-shell :where(input, textarea, select):focus,
.auth-page :where(input, textarea, select):focus { border-color: var(--bdf-blue); }

.user-dashboard-root :where(.user-card, .user-feature-card, .module-card, .report-card, .learning-card, .dictionary-card, .deck-card),
.admin-shell :where(.admin-card, .admin-stat-card, .admin-panel, .admin-table-wrap),
.auth-page :where(.auth-card) {
  border-color: var(--bdf-border);
  border-radius: var(--bdf-radius);
  background: var(--bdf-surface);
  box-shadow: var(--bdf-shadow);
}

.user-dashboard-root :where(.status-success, .is-correct, [data-tone="success"]),
.admin-shell :where(.status-success, .is-correct, [data-tone="success"]) {
  border-color: #a9dcc9;
  background: var(--bdf-green-soft);
  color: #0c6244;
}

.user-dashboard-root :where(.status-error, .is-incorrect, [data-tone="error"]),
.admin-shell :where(.status-error, .is-incorrect, [data-tone="error"]) {
  border-color: #efb6bd;
  background: var(--bdf-danger-soft);
  color: #8f2330;
}

.user-dashboard-root :where(table), .admin-shell :where(table) { width: 100%; border-collapse: collapse; }
.user-dashboard-root :where(th), .admin-shell :where(th) { color: var(--bdf-navy); background: #f7f9fb; font-weight: 800; text-align: left; }
.user-dashboard-root :where(th, td), .admin-shell :where(th, td) { border-bottom: 1px solid var(--bdf-border); padding: 11px 12px; }

[data-lucide], .bdf-icon {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  stroke-width: 2;
  vertical-align: -0.18em;
}

.bdf-chart { min-height: 240px; width: 100%; position: relative; }
.bdf-chart__fallback { display: grid; place-items: center; min-height: 220px; padding: 24px; border: 1px dashed var(--bdf-border-strong); color: var(--bdf-muted); }
.recharts-default-tooltip { border: 1px solid var(--bdf-border) !important; border-radius: var(--bdf-radius-sm) !important; box-shadow: var(--bdf-shadow); }

.flashcard-image-credit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: min(100%, 440px);
  color: var(--bdf-muted);
  font-size: 12px;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.flashcard-image-credit:hover { color: var(--bdf-blue); text-decoration: underline; }

@media (max-width: 760px) {
  body { overflow-x: hidden; }
  .user-dashboard-root, .admin-shell, .auth-page { width: 100%; max-width: 100%; overflow-x: clip; }
  .user-dashboard-root :where(main, section, article, div),
  .admin-shell :where(main, section, article, div) { min-width: 0; }
  .user-dashboard-root :where(h1, h2, h3, h4, p, span, a, button, label, td, th),
  .admin-shell :where(h1, h2, h3, h4, p, span, a, button, label, td, th) { overflow-wrap: anywhere; }
  .user-dashboard-root :where(.user-page-shell, .module-page, .dashboard-main),
  .admin-shell :where(.admin-content, #admin-view) { padding-left: 14px; padding-right: 14px; }
  .user-dashboard-root :where(.grid, [class*="-grid"]),
  .admin-shell :where(.grid, [class*="-grid"]) { max-width: 100%; }
  .bdf-chart { min-height: 210px; }
}

@media (prefers-reduced-motion: reduce) {
  .user-dashboard-root *, .admin-shell *, .auth-page * { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}