:root {
  --sbos-bg: #f6f9fd;
  --sbos-surface: #ffffff;
  --sbos-surface-alt: #eef6ff;
  --sbos-text: #102033;
  --sbos-muted: #64748b;
  --sbos-line: #dbe7f4;
  --sbos-primary: #1769d2;
  --sbos-primary-hover: #0d4fa8;
  --sbos-accent: #38a1ff;
  --sbos-success: #16834f;
  --sbos-warning: #a15c07;
  --sbos-danger: #b42318;
  --sbos-shadow: 0 18px 42px rgba(35, 82, 130, .12);
  --sbos-radius: 24px;
}

[data-sbos-theme="dark"] {
  --sbos-bg: #171717;
  --sbos-surface: #242424;
  --sbos-surface-alt: #2f2b22;
  --sbos-text: #f7f0df;
  --sbos-muted: #c8c0ad;
  --sbos-line: #4a4030;
  --sbos-primary: #d8ad45;
  --sbos-primary-hover: #f0cb70;
  --sbos-accent: #c9972e;
  --sbos-success: #79c58d;
  --sbos-warning: #edc15e;
  --sbos-danger: #f18b7b;
  --sbos-shadow: 0 18px 42px rgba(0, 0, 0, .32);
}

:root {
  --blue: var(--sbos-primary);
  --blue2: var(--sbos-primary-hover);
  --blue-dark: var(--sbos-primary-hover);
  --blue-soft: var(--sbos-surface-alt);
  --soft: var(--sbos-surface-alt);
  --ink: var(--sbos-text);
  --muted: var(--sbos-muted);
  --line: var(--sbos-line);
  --ok: var(--sbos-success);
  --warn: var(--sbos-warning);
  --bad: var(--sbos-danger);
  --surface: var(--sbos-surface);
  --bg: var(--sbos-bg);
  --shadow: var(--sbos-shadow);
}

body {
  background: var(--sbos-bg);
  color: var(--sbos-text);
}

.sbos-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.sbos-controls .sbos-lang-btn {
  margin: 0;
  background: var(--sbos-surface);
  border-color: var(--sbos-line);
  color: var(--sbos-text);
}

.sbos-controls .sbos-lang-btn[aria-pressed="true"] {
  background: var(--sbos-primary);
  border-color: var(--sbos-primary);
  color: #fff;
}

.sbos-theme-btn {
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid var(--sbos-line);
  background: var(--sbos-surface);
  color: var(--sbos-text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  padding: 6px 12px;
  box-shadow: none;
}

.sbos-theme-btn[aria-pressed="true"] {
  background: var(--sbos-primary);
  border-color: var(--sbos-primary);
  color: #fff;
}

[data-sbos-theme="dark"] .sbos-theme-btn[aria-pressed="true"] {
  color: #1c1710;
}

.sbos-controls .sbos-lang-btn:focus-visible,
.sbos-theme-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--sbos-primary) 35%, transparent);
  outline-offset: 2px;
}

[data-sbos-theme="dark"] body {
  background: linear-gradient(180deg, #151515 0%, #211d16 100%);
}

.sbos-auth-page body {
  background:
    radial-gradient(circle at 12% 0%, rgba(23, 105, 210, .12), transparent 320px),
    linear-gradient(180deg, #f8fbff 0%, var(--sbos-bg) 100%);
  color: var(--sbos-text);
}

.sbos-auth-page .login-card {
  background: color-mix(in srgb, var(--sbos-surface) 94%, transparent);
  border-color: var(--sbos-line);
  color: var(--sbos-text);
  box-shadow: var(--sbos-shadow);
}

.sbos-auth-page .sbos-lang-switch {
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 18px;
}

.sbos-auth-page .sbos-lang-btn,
.sbos-auth-page .sbos-theme-btn {
  min-height: 34px;
  border: 1px solid var(--sbos-line);
  background: var(--sbos-surface);
  color: var(--sbos-text);
  box-shadow: none;
}

.sbos-auth-page .sbos-lang-btn[aria-pressed="true"],
.sbos-auth-page .sbos-theme-btn[aria-pressed="true"] {
  background: var(--sbos-primary);
  border-color: var(--sbos-primary);
  color: #fff;
}

.sbos-auth-page input,
.sbos-auth-page textarea {
  background: var(--sbos-surface);
  border-color: var(--sbos-line);
  color: var(--sbos-text);
}

[data-sbos-theme="dark"].sbos-auth-page body {
  background:
    radial-gradient(circle at 12% 0%, rgba(216, 173, 69, .12), transparent 320px),
    linear-gradient(180deg, #151515 0%, #211d16 100%);
}

[data-sbos-theme="dark"].sbos-auth-page .login-card,
[data-sbos-theme="dark"].sbos-auth-page .login-switch,
[data-sbos-theme="dark"].sbos-auth-page .sbos-lang-btn,
[data-sbos-theme="dark"].sbos-auth-page .sbos-theme-btn,
[data-sbos-theme="dark"].sbos-auth-page input,
[data-sbos-theme="dark"].sbos-auth-page textarea {
  background: var(--sbos-surface);
  border-color: var(--sbos-line);
  color: var(--sbos-text);
}

[data-sbos-theme="dark"].sbos-auth-page .login-switch a,
[data-sbos-theme="dark"].sbos-auth-page .register-link,
[data-sbos-theme="dark"].sbos-auth-page label,
[data-sbos-theme="dark"].sbos-auth-page p {
  color: var(--sbos-text);
}

[data-sbos-theme="dark"].sbos-auth-page .sbos-lang-btn[aria-pressed="true"],
[data-sbos-theme="dark"].sbos-auth-page .sbos-theme-btn[aria-pressed="true"],
[data-sbos-theme="dark"].sbos-auth-page .login-switch a.active,
[data-sbos-theme="dark"].sbos-auth-page button[type="submit"] {
  background: var(--sbos-primary);
  border-color: var(--sbos-primary);
  color: #1c1710;
}

.agent-dashboard-page {
  --navy: #071a36;
  --navy2: #0b2c58;
  --bg: var(--sbos-bg);
  --card: var(--sbos-surface);
  --text: var(--sbos-text);
  --muted: var(--sbos-muted);
  --line: var(--sbos-line);
  --gold: #d9a63a;
}

.agent-dashboard-page .top-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.agent-dashboard-page .top-actions .sbos-lang-btn,
.agent-dashboard-page .top-actions .sbos-theme-btn {
  flex: 0 0 auto;
}

[data-sbos-theme="dark"].agent-dashboard-page {
  --navy: #111111;
  --navy2: #211d16;
  --bg: #171717;
  --card: #242424;
  --text: #f7f0df;
  --muted: #c8c0ad;
  --line: #4a4030;
  --gold: #d8ad45;
  --blue: #d8ad45;
  --blue2: #f0cb70;
  --sky: #2f2b22;
  --green: #79c58d;
  --danger: #f18b7b;
}

[data-sbos-theme="dark"].agent-dashboard-page body {
  background: linear-gradient(180deg, #151515 0%, #211d16 100%);
}

[data-sbos-theme="dark"].agent-dashboard-page .topbar,
[data-sbos-theme="dark"].agent-dashboard-page .kpi,
[data-sbos-theme="dark"].agent-dashboard-page .action-card,
[data-sbos-theme="dark"].agent-dashboard-page .panel,
[data-sbos-theme="dark"].agent-dashboard-page .user-pill,
[data-sbos-theme="dark"].agent-dashboard-page .bell,
[data-sbos-theme="dark"].agent-dashboard-page .profile-grid div,
[data-sbos-theme="dark"].agent-dashboard-page .notice {
  background: var(--card);
  border-color: var(--line);
  color: var(--text);
}

[data-sbos-theme="dark"].agent-dashboard-page .sidebar {
  background: linear-gradient(180deg, #0f0f0f, #241f17);
  box-shadow: 18px 0 45px rgba(0, 0, 0, .24);
}

[data-sbos-theme="dark"].agent-dashboard-page .hero {
  background: linear-gradient(125deg, #111111 0%, #2d271d 58%, #6f5420 100%);
  box-shadow: 0 22px 55px rgba(0, 0, 0, .28);
}

[data-sbos-theme="dark"].agent-dashboard-page .agent-card,
[data-sbos-theme="dark"].agent-dashboard-page .agent-meta div,
[data-sbos-theme="dark"].agent-dashboard-page .hero-btn.ghost {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(216, 173, 69, .28);
}

[data-sbos-theme="dark"].agent-dashboard-page .hero-btn.primary {
  background: var(--gold);
  color: #1c1710;
}

[data-sbos-theme="dark"].agent-dashboard-page .tag,
[data-sbos-theme="dark"].agent-dashboard-page .kpi:after,
[data-sbos-theme="dark"].agent-dashboard-page .kpi-icon,
[data-sbos-theme="dark"].agent-dashboard-page .action-icon,
[data-sbos-theme="dark"].agent-dashboard-page .income-row.total {
  background: var(--sky);
  color: var(--blue2);
}

.admin-dashboard-page {
  --admin-bg: var(--sbos-bg);
  --admin-card: color-mix(in srgb, var(--sbos-surface) 94%, transparent);
  --admin-card-solid: var(--sbos-surface);
  --admin-ink: var(--sbos-text);
  --admin-muted: var(--sbos-muted);
  --admin-line: var(--sbos-line);
  --admin-soft-line: color-mix(in srgb, var(--sbos-line) 56%, var(--sbos-surface));
  --admin-blue: var(--sbos-primary);
  --admin-blue-soft: var(--sbos-surface-alt);
  --admin-blue-dark: var(--sbos-primary-hover);
  --admin-green: var(--sbos-success);
  --admin-amber: var(--sbos-warning);
  --admin-red: var(--sbos-danger);
  --admin-shadow: var(--sbos-shadow);
}

[data-sbos-theme="dark"].admin-dashboard-page {
  --admin-bg: #151515;
  --admin-card: rgba(36, 36, 36, .94);
  --admin-card-solid: #242424;
  --admin-ink: #f7f0df;
  --admin-muted: #c8c0ad;
  --admin-line: #4a4030;
  --admin-soft-line: #342f25;
  --admin-blue: #d8ad45;
  --admin-blue-soft: #2f2b22;
  --admin-blue-dark: #f0cb70;
  --admin-green: #79c58d;
  --admin-amber: #edc15e;
  --admin-red: #f18b7b;
  --admin-shadow: 0 24px 58px rgba(0, 0, 0, .34);
}

[data-sbos-theme="dark"].admin-dashboard-page body {
  background:
    radial-gradient(circle at 16% 0%, rgba(216, 173, 69, .13), transparent 360px),
    linear-gradient(180deg, #151515 0%, #211d16 100%);
}

[data-sbos-theme="dark"].admin-dashboard-page .admin-main {
  background:
    radial-gradient(circle at 14% 0%, rgba(216, 173, 69, .14), transparent 340px),
    linear-gradient(180deg, rgba(33, 29, 22, .8), transparent 460px),
    var(--admin-bg);
}

[data-sbos-theme="dark"].admin-dashboard-page .admin-sidebar {
  background:
    linear-gradient(180deg, rgba(216, 173, 69, .08), transparent 28%),
    linear-gradient(180deg, #0f0f0f, #211d16 68%, #151515);
  box-shadow: 18px 0 46px rgba(0, 0, 0, .28);
}

[data-sbos-theme="dark"].admin-dashboard-page .side-menu a {
  color: rgba(247, 240, 223, .72);
}

[data-sbos-theme="dark"].admin-dashboard-page .side-menu a:hover,
[data-sbos-theme="dark"].admin-dashboard-page .side-menu a.active {
  border-color: rgba(216, 173, 69, .26);
  background: rgba(216, 173, 69, .1);
  color: #f7f0df;
}

[data-sbos-theme="dark"].admin-dashboard-page .admin-topbar,
[data-sbos-theme="dark"].admin-dashboard-page .panel,
[data-sbos-theme="dark"].admin-dashboard-page .summary-card,
[data-sbos-theme="dark"].admin-dashboard-page .admin-badge,
[data-sbos-theme="dark"].admin-dashboard-page .sbos-lang-btn,
[data-sbos-theme="dark"].admin-dashboard-page .sbos-theme-btn,
[data-sbos-theme="dark"].admin-dashboard-page .secondary-btn,
[data-sbos-theme="dark"].admin-dashboard-page .ghost-btn,
[data-sbos-theme="dark"].admin-dashboard-page .toolbar input,
[data-sbos-theme="dark"].admin-dashboard-page .toolbar select,
[data-sbos-theme="dark"].admin-dashboard-page .table-wrap,
[data-sbos-theme="dark"].admin-dashboard-page .toast {
  background: var(--admin-card-solid);
  border-color: var(--admin-line);
  color: var(--admin-ink);
}

[data-sbos-theme="dark"].admin-dashboard-page .admin-topbar,
[data-sbos-theme="dark"].admin-dashboard-page .panel,
[data-sbos-theme="dark"].admin-dashboard-page .summary-card {
  background: var(--admin-card);
}

[data-sbos-theme="dark"].admin-dashboard-page .sbos-lang-btn[aria-pressed="true"],
[data-sbos-theme="dark"].admin-dashboard-page .sbos-theme-btn[aria-pressed="true"],
[data-sbos-theme="dark"].admin-dashboard-page .primary-btn {
  background: var(--admin-blue);
  border-color: var(--admin-blue);
  color: #1c1710;
}

[data-sbos-theme="dark"].admin-dashboard-page .toolbar,
[data-sbos-theme="dark"].admin-dashboard-page th,
[data-sbos-theme="dark"].admin-dashboard-page tbody tr:nth-child(even),
[data-sbos-theme="dark"].admin-dashboard-page tbody tr:hover,
[data-sbos-theme="dark"].admin-dashboard-page .card-icon,
[data-sbos-theme="dark"].admin-dashboard-page .empty-mark,
[data-sbos-theme="dark"].admin-dashboard-page .clear-search {
  background: var(--admin-blue-soft);
  color: var(--admin-blue-dark);
}

[data-sbos-theme="dark"].admin-dashboard-page td,
[data-sbos-theme="dark"].admin-dashboard-page th,
[data-sbos-theme="dark"].admin-dashboard-page .agent-name strong,
[data-sbos-theme="dark"].admin-dashboard-page .empty-state strong,
[data-sbos-theme="dark"].admin-dashboard-page .panel-head h2,
[data-sbos-theme="dark"].admin-dashboard-page .admin-topbar h1 {
  color: var(--admin-ink);
}

[data-sbos-theme="dark"].admin-dashboard-page th,
[data-sbos-theme="dark"].admin-dashboard-page td {
  border-color: var(--admin-soft-line);
}

[data-sbos-theme="dark"].admin-dashboard-page .status-panel,
[data-sbos-theme="dark"].admin-dashboard-page .section-error {
  background: color-mix(in srgb, var(--admin-red) 10%, var(--admin-card-solid));
  border-color: color-mix(in srgb, var(--admin-red) 32%, var(--admin-line));
}

[data-sbos-theme="dark"].admin-dashboard-page .empty-state {
  background: linear-gradient(180deg, var(--admin-card-solid), #201c15);
  border-color: color-mix(in srgb, var(--admin-blue) 34%, var(--admin-line));
}

[data-sbos-theme="dark"].admin-dashboard-page .table-loading::after,
[data-sbos-theme="dark"].admin-dashboard-page .summary-card.is-loading strong {
  background: linear-gradient(90deg, #2b261d, #403622, #2b261d);
}

[data-sbos-theme="dark"] .hero,
[data-sbos-theme="dark"] .exam-card,
[data-sbos-theme="dark"] .result-card,
[data-sbos-theme="dark"] .state-card,
[data-sbos-theme="dark"] .side,
[data-sbos-theme="dark"] .main,
[data-sbos-theme="dark"] .card,
[data-sbos-theme="dark"] .content-card,
[data-sbos-theme="dark"] .info div {
  background: var(--sbos-surface);
  border-color: var(--sbos-line);
  color: var(--sbos-text);
}

[data-sbos-theme="dark"] .logo,
[data-sbos-theme="dark"] .btn.primary {
  background: var(--sbos-primary);
  color: #1c1710;
}

[data-sbos-theme="dark"] .logout,
[data-sbos-theme="dark"] .btn,
[data-sbos-theme="dark"] .sbos-controls .sbos-lang-btn,
[data-sbos-theme="dark"] .nav-dot,
[data-sbos-theme="dark"] .choice {
  background: var(--sbos-surface);
  border-color: var(--sbos-line);
  color: var(--sbos-text);
}

[data-sbos-theme="dark"] .choice.selected,
[data-sbos-theme="dark"] .choice:has(input:checked),
[data-sbos-theme="dark"] .nav-dot.active,
[data-sbos-theme="dark"] .nav-dot.answered,
[data-sbos-theme="dark"] .sbos-controls .sbos-lang-btn[aria-pressed="true"],
[data-sbos-theme="dark"] .lesson-btn.active,
[data-sbos-theme="dark"] .lesson-btn.done,
[data-sbos-theme="dark"] .eyebrow {
  background: var(--sbos-surface-alt);
  border-color: var(--sbos-primary);
  color: var(--sbos-primary-hover);
}

@media (max-width: 520px) {
  .sbos-controls {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 780px) {
  .agent-dashboard-page .topbar {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .agent-dashboard-page .top-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 430px) {
  .agent-dashboard-page .top-actions .sbos-lang-btn {
    width: 48px;
  }

  .agent-dashboard-page .top-actions .sbos-theme-btn {
    min-height: 34px;
    padding-inline: 10px;
  }
}