/* Shared application visual system: warm beige surfaces with deep dark accents. */
:root {
  --bg: #f5efe3;
  --surface: #fffaf2;
  --surface-soft: #f3ecdf;
  --sidebar: #1f1b16;
  --sidebar-soft: #2a241d;
  --text: #211c16;
  --muted: #6f6456;
  --line: #ddd1bc;
  --line-strong: #c5b69d;
  --accent: #b89a6a;
  --accent-strong: #8b7046;
  --accent-soft: #f3e7d0;
  --gold: #b89a6a;
  --gold-deep: #745a37;
  --green: #6f8461;
  --green-soft: #edf2e8;
  --blue: #5f5445;
  --blue-soft: #ebe2d3;
  --positive: #2f6b45;
  --negative: #a5463f;
  --shadow: 0 8px 24px rgba(40, 32, 24, .09);
  --radius: 12px;
  --radius-sm: 8px;
}

body[data-page] {
  background: #f5efe3;
  color: #211c16;
}

body[data-page] .page {
  max-width: 1600px;
  padding-top: 14px;
}

body[data-page] .sidebar {
  background: #14283f;
  color: #e8eef5;
}

body[data-page] .sidebar::before {
  background: #c58b45;
}

body[data-page] .nav-title {
  color: #95a9bc;
}

body[data-page] .nav a {
  color: #c2d0df;
}

body[data-page] .nav a:hover {
  background: #203b59;
  color: #fff;
}

body[data-page] .nav a.active {
  border-color: #315d4d;
  background: #1c423b;
  color: #fff;
  box-shadow: inset 3px 0 0 #c58b45;
}

body[data-page] .nav a.active .nav-icon {
  color: #f3bd77;
}

body[data-page] .topbar,
html.mobile-app-mode body[data-page] .topbar {
  border-bottom: 1px solid #dbe4ed;
  background: rgba(250, 252, 255, .97) !important;
  color: #17293e;
  box-shadow: 0 2px 12px rgba(26, 46, 69, .06);
}

body[data-page] .page-title::before {
  background: #c58b45;
}

body[data-page] .account-avatar {
  border-color: #cddce9;
  background: #e8f0f8;
  color: #315e8b;
}

body[data-page] .pipeline-pill {
  border-color: #dbe4ed;
  background: #fff;
  color: #526479;
}

body[data-page] .pipeline-dot {
  background: #4287a0;
  box-shadow: 0 0 0 3px #e4f1f5;
}

body[data-page] .pipeline-dot.warn {
  background: #c58b45;
  box-shadow: 0 0 0 3px #fbf1e4;
}

body[data-page] .pipeline-dot.bad {
  background: #b6424a;
  box-shadow: 0 0 0 3px #fae9eb;
}

body[data-page] .page > .hero-row {
  min-height: 62px;
  margin-bottom: 14px;
  gap: 10px;
}

body[data-page] .page > .hero-row h1,
body[data-page="dashboard"] .dashboard-hero h1,
body[data-page="analytics"] .analytics-hero h1 {
  color: #17293e;
  font-size: clamp(19px, 1.5vw, 23px);
  font-weight: 740;
  line-height: 1.15;
}

body[data-page] .page > .hero-row h1::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 19px;
  margin-right: 10px;
  border-radius: 3px;
  background: #c58b45;
  vertical-align: -2px;
}

body[data-page="dashboard"] .dashboard-hero-title,
body[data-page="analytics"] .analytics-hero-title {
  gap: 0;
}

body[data-page="dashboard"] .dashboard-hero-icon,
body[data-page="analytics"] .analytics-hero-icon {
  color: #416b9d;
}

body[data-page] .page > .hero-row p {
  color: #617185;
}

body[data-page] .btn-primary,
body[data-page] .btn-accent,
body[data-page="dashboard"] .dashboard-hero .btn-accent,
body[data-page="analytics"] .analytics-filter-panel #analyticsReset {
  border-color: var(--accent);
  background: var(--accent);
  color: #1c1814;
}

body[data-page] .btn-primary:hover,
body[data-page] .btn-accent:hover {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  color: #fff;
}

body[data-page] .btn-secondary,
body[data-page] .btn-ghost,
body[data-page="dashboard"] .dashboard-hero .btn-secondary {
  border-color: var(--line);
  background: #fff;
  color: var(--text);
}

body[data-page] .btn-export,
body[data-page="dashboard"] .dashboard-hero .btn-export {
  border-color: var(--gold-deep);
  background: var(--gold-deep);
  color: #fff;
}

body[data-page] .btn-export:hover {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
}

body[data-page]:not([data-page="dashboard"]) .page > .hero-row .btn-accent {
  border-color: var(--accent);
  background: var(--accent);
  color: #1c1814;
}

body[data-page]:not([data-page="dashboard"]) .page > .hero-row .btn-secondary {
  border-color: var(--line);
  background: #fff;
  color: var(--text);
}

body[data-page]:not([data-page="dashboard"]) .page > .hero-row .btn-export {
  border-color: var(--gold-deep);
  background: var(--gold-deep);
  color: #fff;
}

body[data-page] .page > .hero-row .btn,
body[data-page] .page > .hero-row input:not([type="file"]),
body[data-page] .page > .hero-row select,
body[data-page] .page > .hero-row .agent-dropdown-button {
  border-radius: 8px;
}

body[data-page="races"] .page > .hero-row {
  position: relative;
  z-index: 20;
}

body[data-page="races"] .race-bookmaker-dropdown {
  flex: 0 0 138px;
  min-width: 0;
  max-width: none;
}

body[data-page="races"] .race-bookmaker-dropdown .agent-dropdown-button {
  width: 100%;
  height: 34px;
  min-height: 34px;
  padding: 0 8px;
  overflow: hidden;
  border: 1px solid #cfdce8;
  border-radius: 8px;
  background: #fff;
  color: #17293e;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

body[data-page="races"] .race-bookmaker-dropdown .agent-dropdown-menu {
  right: 0;
  left: auto;
  z-index: 100;
  width: min(320px, calc(100vw - 24px));
  min-width: 0;
  max-width: none;
  max-height: min(390px, calc(100dvh - 150px));
  overflow-y: auto;
  padding: 12px;
  border: 1px solid #cfdae5;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(26, 46, 69, .2);
}

body[data-page="races"] .race-bookmaker-dropdown .agent-dropdown-heading {
  margin-bottom: 10px;
  color: #24435f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

body[data-page="races"] .race-bookmaker-dropdown .export-bookmaker-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
}

body[data-page="races"] .race-bookmaker-dropdown .export-bookmaker-option {
  min-height: 34px;
  padding: 5px 4px;
  border-radius: 5px;
  font-size: 13px;
  line-height: 1.25;
}

body[data-page="races"] .race-bookmaker-dropdown .export-bookmaker-option:hover {
  background: #eef4fa;
}

body[data-page] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body[data-page] select,
body[data-page] textarea,
body[data-page] .agent-dropdown-button {
  border-color: #cfdce8;
  border-radius: 8px;
  background-color: #fff;
  color: #17293e;
}

body[data-page] input:focus-visible,
body[data-page] select:focus-visible,
body[data-page] textarea:focus-visible,
body[data-page] button:focus-visible,
body[data-page] a:focus-visible {
  outline-color: #416b9d;
}

body[data-page] .card,
body[data-page] .course-group,
body[data-page] .analytics-filter-panel,
body[data-page] .security-role-card {
  border: 1px solid #dbe4ed;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(26, 46, 69, .055);
}

body[data-page] .card-head,
body[data-page] .course-head {
  border-top: 0;
  border-bottom: 1px solid #e1e9f1;
  background: #f7fafd;
}

body[data-page] .card-title,
body[data-page] .course-head strong,
body[data-page] .section-heading h2 {
  color: #1d3650;
  font-weight: 750;
}

body[data-page] .kpi-grid {
  gap: 12px;
  margin-bottom: 14px;
}

body[data-page] .kpi {
  border: 1px solid #dbe4ed;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 7px 19px rgba(26, 46, 69, .05);
}

body[data-page] .kpi::after {
  display: none;
}

body[data-page] .kpi-label {
  color: #344d65;
  letter-spacing: 0;
  text-transform: none;
}

body[data-page] .kpi-meta {
  color: #6b7b8d;
}

body[data-page] .app-summary-grid .kpi {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-content: center;
  column-gap: 10px;
  min-height: 94px;
  padding: 12px;
}

body[data-page] .app-summary-grid .kpi-label,
body[data-page] .app-summary-grid .kpi-value,
body[data-page] .app-summary-grid .kpi-meta {
  grid-column: 2;
  margin-top: 0;
}

body[data-page] .app-summary-grid .kpi-value {
  margin-top: 2px;
  font-size: 24px;
  line-height: 1.15;
}

body[data-page] .app-summary-grid .kpi-meta {
  margin-top: 3px;
  font-size: 10px;
}

body[data-page] .app-kpi-icon {
  display: grid;
  grid-column: 1;
  grid-row: 1 / 4;
  place-items: center;
  align-self: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #eaf1f9;
  color: #416b9d;
  font-size: 24px;
  font-weight: 700;
}

body[data-page] .app-summary-grid .kpi:nth-child(2) .app-kpi-icon {
  background: #e8f3f5;
  color: #327b91;
}

body[data-page] .app-summary-grid .kpi:nth-child(3) .app-kpi-icon {
  background: #fbf1e4;
  color: #b27837;
}

body[data-page] .app-summary-grid .kpi:nth-child(4) .app-kpi-icon {
  background: #f0edfa;
  color: #71639c;
}

body[data-page] .analytics-kpi-icon,
body[data-page] .dashboard-kpi-icon {
  background: #eaf1f9;
  color: #416b9d;
}

body[data-page] .analytics-summary .kpi:nth-child(2) .analytics-kpi-icon,
body[data-page] .kpi:nth-child(2) .dashboard-kpi-icon {
  background: #e8f3f5;
  color: #327b91;
}

body[data-page] .analytics-summary .kpi:nth-child(3) .analytics-kpi-icon,
body[data-page] .kpi:nth-child(3) .dashboard-kpi-icon {
  background: #fbf1e4;
  color: #b27837;
}

body[data-page] .analytics-summary .kpi:nth-child(4) .analytics-kpi-icon,
body[data-page] .kpi:nth-child(4) .dashboard-kpi-icon {
  background: #f0edfa;
  color: #71639c;
}

body[data-page] .prediction-summary > div {
  border-color: #dbe4ed;
  background: #fff;
  color: #344d65;
}

body[data-page] .prediction-summary strong {
  color: #17293e;
}

body[data-page="predictions-overview"] .prediction-controls {
  flex-wrap: wrap;
}

body[data-page="bets"] .card-head:has(.filterbar) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

body[data-page="bets"] .card-head .filterbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

body[data-page="bets"] .card-head .filterbar > * {
  box-sizing: border-box;
  min-width: 0;
  max-width: none;
  width: 100%;
  height: 36px;
  min-height: 36px;
  border-radius: 8px;
}

body[data-page="bet-builder"] .bet-wizard-progress {
  border-color: #dbe4ed;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(26, 46, 69, .055);
}

body[data-page="bet-builder"] .bet-wizard-progress button.active {
  box-shadow: inset 0 -3px 0 #c58b45;
}

body[data-page="bet-builder"] .bet-wizard-progress button.active span {
  border-color: #315f91;
  background: #315f91;
}

body[data-page="bets"] .settle-action {
  border-color: #315f91;
  background: #315f91;
  color: #fff;
}

body[data-page] .import-status,
body[data-page] .dashboard-race-odds {
  border-color: #dbe4ed;
  border-radius: 12px;
  background: #fff;
}

body[data-page="operations"] #betDataImportStatus {
  position: relative;
  padding-right: 48px;
}

body[data-page="operations"] #betDataImportStatus[hidden] {
  display: none !important;
}

body[data-page="operations"] .import-status-dismiss {
  position: absolute;
  top: 9px;
  right: 9px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #d2deea;
  border-radius: 8px;
  background: #fff;
  color: #526479;
  font-size: 22px;
  line-height: 1;
}

body[data-page] table th,
body[data-page="dashboard"] .dashboard-v4-predictions th,
body[data-page="analytics"] .analytics-panel th {
  border-bottom-color: #1e1b17;
  background: #1e1b17;
  color: #f4f8fc;
}

body[data-page] table td {
  border-color: #e2eaf1;
}

body[data-page] table tbody tr:nth-child(even) td {
  background: #f8fbfd;
}

body[data-page] table tbody tr:hover td {
  background: #edf4fa;
}

body[data-page="dashboard"] .dashboard-v4-predictions th.current-average-cell {
  background: #234338 !important;
}

body[data-page="dashboard"] .dashboard-v4-predictions .current-average-cell,
body[data-page="dashboard"] .dashboard-v4-predictions td.best-odds {
  background: #eef5fb !important;
}

body[data-page="dashboard"] .dashboard-v4-predictions td.current-average-cell strong,
body[data-page="dashboard"] .dashboard-v4-predictions .bookmaker-cell strong {
  color: #245884;
}

body[data-page="dashboard"] .odds-filter-button.selected {
  border-color: var(--accent);
  background: var(--accent);
  color: #1f1b16;
}

body[data-page="analytics"] .analytics-filter-panel,
body[data-page="analytics"] .analytics-panel,
body[data-page="analytics"] .kpi {
  border-color: #dbe4ed;
}

body[data-page="analytics"] .analytics-hero-icon,
body[data-page="analytics"] .analytics-reports > details > summary::after {
  color: #416b9d;
}

body[data-page="analytics"] .analytics-reports .card-head {
  background: #f7fafd;
}

body[data-page="analytics"] .pnl-track {
  background: #eaf1f8;
}

body[data-page="bet-logger"] .bet-logger-app {
  --bl-turf: #234338;
  --bl-rail: #f4f7fb;
  --bl-ink: #17293e;
  --bl-muted: #617185;
  --bl-line: #dbe4ed;
  --bl-silk: #c58b45;
  --bl-silk-bg: #fbf1e4;
  --bl-silk-ink: #805524;
}

body[data-page="bet-logger"] .bet-logger-app .drop {
  border-color: #87a8c8;
  border-radius: 12px;
  background: #fff;
}

body[data-page="login"] .login-shell {
  background: #f4f7fb;
}

body[data-page="login"] .login-panel::before {
  background-image: radial-gradient(#cbd8e5 1px, transparent 1px);
}

body[data-page="login"] .login-card {
  border-color: #dbe4ed;
  box-shadow: 0 22px 60px rgba(26, 46, 69, .11);
}

body[data-page="login"] .login-visual {
  background:
    linear-gradient(rgba(20, 40, 63, .12), rgba(20, 40, 63, .4)),
    repeating-linear-gradient(120deg, transparent 0 70px, rgba(255, 255, 255, .025) 70px 71px),
    #14283f;
}

body[data-page="login"] .login-visual::before,
body[data-page="login"] .login-visual::after {
  border-color: rgba(197, 139, 69, .25);
}

@media (max-width: 820px) {
  html.mobile-app-mode body[data-page="login"] .login-shell {
    display: block;
    min-height: 100dvh;
    background: #fff;
  }

  html.mobile-app-mode body[data-page="login"] .login-visual {
    display: none !important;
  }

  html.mobile-app-mode body[data-page="login"] .login-panel {
    display: block;
    min-height: 100dvh;
    padding: 0;
  }

  html.mobile-app-mode body[data-page="login"] .login-panel::before {
    display: none;
  }

  html.mobile-app-mode body[data-page="login"] .login-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    padding: max(32px, calc(env(safe-area-inset-top) + 20px)) 24px max(28px, calc(env(safe-area-inset-bottom) + 20px));
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  html.mobile-app-mode body[data-page="login"] .login-brand {
    margin-bottom: 28px;
  }

  html.mobile-app-mode body[data-page="login"] .login-brand .brand-logo {
    width: min(200px, 65vw);
  }

  html.mobile-app-mode body[data-page="login"] .login-card h1 {
    margin: 0 0 28px;
    font-size: 35px;
  }

  html.mobile-app-mode body[data-page="login"] .login-card form {
    width: 100%;
  }

  html.mobile-app-mode body[data-page="login"] .login-card .field + .field {
    margin-top: 20px !important;
  }

  html.mobile-app-mode body[data-page="login"] .login-card .field label {
    margin-bottom: 9px;
    font-size: 17px !important;
  }

  html.mobile-app-mode body[data-page="login"] .login-card input:not([type="checkbox"]) {
    width: 100%;
    min-height: 64px !important;
    padding: 15px 16px;
    border-radius: 11px;
    font-size: 19px !important;
  }

  html.mobile-app-mode body[data-page="login"] .login-remember {
    margin-top: 22px;
    font-size: 16px;
  }

  html.mobile-app-mode body[data-page="login"] .login-remember input {
    width: 20px;
    height: 20px;
  }

  html.mobile-app-mode body[data-page="login"] #loginBtn {
    min-height: 62px !important;
    margin-top: 26px !important;
    border-radius: 11px;
    font-size: 18px !important;
  }

  html.mobile-app-mode body[data-page="login"] .login-install {
    margin-top: auto;
    padding-top: 32px;
  }
}

html.mobile-app-mode body[data-page] .mobile-quick-nav {
  border-color: var(--line);
  background: #f5efe3 !important;
  box-shadow: none;
}

html.mobile-app-mode body[data-page] .mobile-quick-nav a:not(.active) {
  color: #5c574f;
}

html.mobile-app-mode body[data-page] .mobile-quick-nav a.active:not(.central) {
  background: var(--accent) !important;
  color: #1f1b16 !important;
  box-shadow: none;
}

@media (max-width: 820px) {
  body[data-page] .page > .hero-row {
    min-height: 0;
  }

  body[data-page] .card-head {
    gap: 10px;
  }

  body[data-page="bets"] .card-head .filterbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

html.mobile-app-mode body[data-page] .page > .hero-row {
  min-height: 0;
}

html.mobile-app-mode body[data-page="races"] .race-bookmaker-dropdown {
  width: 100%;
  min-width: 0;
  max-width: none;
}

html.mobile-app-mode body[data-page="races"] .race-bookmaker-dropdown .agent-dropdown-button {
  height: 44px;
  min-height: 44px !important;
}

/* Slightly denser desktop typography. */
@media (min-width: 821px) and (pointer: fine) {
  body[data-page] {
    font-size: 15px;
  }

  body[data-page] .nav a {
    font-size: 12px;
  }

  body[data-page] .page-title,
  body[data-page] .card-title {
    font-size: 12px;
  }

  body[data-page] .page > .hero-row h1,
  body[data-page="dashboard"] .dashboard-hero h1,
  body[data-page="analytics"] .analytics-hero h1 {
    font-size: clamp(18px, 1.4vw, 21px);
  }

  body[data-page] .btn {
    font-size: 11px;
  }

  body[data-page] .kpi-label {
    font-size: 10px;
  }

  body[data-page] .kpi-meta {
    font-size: 9px;
  }

  body[data-page] .kpi-value {
    font-size: 24px;
  }

  body[data-page] table {
    font-size: 10px;
  }

  body[data-page] table th {
    font-size: 9.5px;
  }

  body[data-page="login"] .login-card h1 {
    font-size: 28px;
  }
}

/* Larger text for the mobile app while retaining compact controls. */
html.mobile-app-mode body[data-page] {
  font-size: 17px;
}

html.mobile-app-mode body[data-page] h1 {
  font-size: 32px !important;
}

html.mobile-app-mode body[data-page] h2 {
  font-size: 24px !important;
}

html.mobile-app-mode body[data-page] .page-title {
  font-size: 16px;
}

html.mobile-app-mode body[data-page] .small,
html.mobile-app-mode body[data-page] .muted,
html.mobile-app-mode body[data-page] .help,
html.mobile-app-mode body[data-page] .hint {
  font-size: 15px !important;
}

html.mobile-app-mode body[data-page] .card-title,
html.mobile-app-mode body[data-page] .field label,
html.mobile-app-mode body[data-page] .odds-control-label {
  font-size: 16px !important;
}

html.mobile-app-mode body[data-page] .btn,
html.mobile-app-mode body[data-page] button,
html.mobile-app-mode body[data-page] input:not([type="checkbox"]):not([type="radio"]),
html.mobile-app-mode body[data-page] select,
html.mobile-app-mode body[data-page] textarea,
html.mobile-app-mode body[data-page] .agent-dropdown-button {
    font-size: 13px !important;
html.mobile-app-mode body[data-page="analytics"] .analytics-filter-panel .filterbar > * {
  font-size: 16px !important;
}

html.mobile-app-mode body[data-page] .topbar #logoutBtn {
  font-size: 14px !important;
}

html.mobile-app-mode body[data-page] .kpi-label {
  font-size: 13px;
}

html.mobile-app-mode body[data-page] .kpi-meta {
  font-size: 12px;
}

html.mobile-app-mode body[data-page] .kpi-value {
  font-size: 25px;
}

html.mobile-app-mode body[data-page] table {
  font-size: 13px;
}

html.mobile-app-mode body[data-page] table th {
  font-size: 11px;
}

html.mobile-app-mode body[data-page="dashboard"] .dashboard-v4-predictions td,
html.mobile-app-mode body[data-page="dashboard"] .dashboard-v4-predictions th {
  font-size: 12px;
}

html.mobile-app-mode body[data-page="dashboard"] .dashboard-v4-predictions .bookmaker-cell strong,
html.mobile-app-mode body[data-page="dashboard"] .dashboard-v4-predictions td.current-average-cell strong {
  font-size: 13px;
}

html.mobile-app-mode body[data-page="dashboard"] .dashboard-v4-predictions .bookmaker-cell span,
html.mobile-app-mode body[data-page="dashboard"] .dashboard-v4-predictions .table-subtext {
  font-size: 11px;
}

html.mobile-app-mode body[data-page] .mobile-quick-nav a small {
  font-size: 11px !important;
}

html.mobile-app-mode body[data-page="login"] .login-card h1 {
  font-size: 37px !important;
}

@media (min-width: 1024px) and (pointer: fine) {
  body[data-page="races"] .page > .hero-row {
    flex-direction: row;
    flex-wrap: nowrap !important;
    align-items: center;
  }

  body[data-page="races"] .page > .hero-row > div:first-child {
    flex: 0 0 auto;
  }

  body[data-page="races"] .page > .hero-row .actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap !important;
    justify-content: flex-end;
    width: auto;
    gap: 6px;
  }

  body[data-page="races"] .page > .hero-row .actions > * {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* Global beige + dark overrides to remove remaining slate-blue accents. */
body[data-page] .sidebar {
  background: var(--sidebar) !important;
  color: #e9dcc6 !important;
}

body[data-page] .nav-title {
  color: #b8a890 !important;
}

body[data-page] .nav a {
  color: #d8cab3 !important;
}

body[data-page] .nav a:hover {
  background: var(--sidebar-soft) !important;
  color: #fff3df !important;
}

body[data-page] .nav a.active {
  border-color: #5f4c32 !important;
  background: #3a3127 !important;
  box-shadow: inset 3px 0 0 var(--accent) !important;
  color: #fff1dc !important;
}

body[data-page] .topbar,
html.mobile-app-mode body[data-page] .topbar {
  border-bottom: 1px solid var(--line) !important;
  background: rgba(255, 250, 242, .97) !important;
  color: var(--text) !important;
  box-shadow: 0 2px 12px rgba(40, 32, 24, .08) !important;
}

body[data-page] .btn-primary,
body[data-page] .btn-accent,
body[data-page="dashboard"] .dashboard-hero .btn-accent,
body[data-page="analytics"] .analytics-filter-panel #analyticsReset,
body[data-page]:not([data-page="dashboard"]) .page > .hero-row .btn-accent,
body[data-page="bets"] .settle-action,
body[data-page="dashboard"] .odds-filter-button.selected,
body[data-page] .table-filter-link:hover,
body[data-page] .table-filter-link:focus-visible {
  border-color: #3f3427 !important;
  background: #3f3427 !important;
  color: #fff3df !important;
}

body[data-page] .btn-primary:hover,
body[data-page] .btn-accent:hover,
body[data-page] .btn-export:hover {
  border-color: #2f261d !important;
  background: #2f261d !important;
  color: #fff3df !important;
}

body[data-page] .btn-secondary,
body[data-page] .btn-ghost,
body[data-page="dashboard"] .dashboard-hero .btn-secondary,
body[data-page]:not([data-page="dashboard"]) .page > .hero-row .btn-secondary {
  border-color: var(--line-strong) !important;
  background: var(--surface) !important;
  color: #3e352a !important;
}

body[data-page] .btn-export,
body[data-page="dashboard"] .dashboard-hero .btn-export,
body[data-page]:not([data-page="dashboard"]) .page > .hero-row .btn-export {
  border-color: var(--accent-strong) !important;
  background: var(--accent-strong) !important;
  color: #fff3df !important;
}

body[data-page] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body[data-page] select,
body[data-page] textarea,
body[data-page] .agent-dropdown-button {
  border-color: var(--line-strong) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
}

body[data-page] .card,
body[data-page] .course-group,
body[data-page] .analytics-filter-panel,
body[data-page] .security-role-card,
body[data-page] .kpi,
body[data-page] .import-status,
body[data-page] .dashboard-race-odds {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  box-shadow: 0 8px 24px rgba(40, 32, 24, .09) !important;
}

body[data-page] .card-head,
body[data-page] .course-head,
body[data-page="analytics"] .analytics-reports .card-head {
  border-bottom: 1px solid #e7dcc9 !important;
  background: #f8f1e5 !important;
}

body[data-page] table th,
body[data-page="dashboard"] .dashboard-v4-predictions th,
body[data-page="analytics"] .analytics-panel th {
  border-bottom-color: #2a231b !important;
  background: #2a231b !important;
  color: #f9f2e7 !important;
}

body[data-page] table td {
  border-color: #e5d9c7 !important;
}

body[data-page] table tbody tr:nth-child(even) td {
  background: #fbf6ee !important;
}

body[data-page] table tbody tr:hover td {
  background: #f2e9db !important;
}

body[data-page="dashboard"] .dashboard-v4-predictions th.current-average-cell {
  background: #4a3f31 !important;
}

body[data-page="dashboard"] .dashboard-v4-predictions .current-average-cell,
body[data-page="dashboard"] .dashboard-v4-predictions td.best-odds,
body[data-page="analytics"] .pnl-track {
  background: #efe4d3 !important;
}

body[data-page="dashboard"] .dashboard-v4-predictions td.current-average-cell strong,
body[data-page="dashboard"] .dashboard-v4-predictions .bookmaker-cell strong,
body[data-page="analytics"] .analytics-hero-icon,
body[data-page="analytics"] .analytics-reports > details > summary::after,
body[data-page="dashboard"] .dashboard-hero-icon,
body[data-page] .analytics-kpi-icon,
body[data-page] .dashboard-kpi-icon,
body[data-page] .app-kpi-icon,
body[data-page] .kpi:nth-child(2) .dashboard-kpi-icon,
body[data-page] .analytics-summary .kpi:nth-child(2) .analytics-kpi-icon,
body[data-page] .kpi:nth-child(4) .dashboard-kpi-icon,
body[data-page] .analytics-summary .kpi:nth-child(4) .analytics-kpi-icon {
  color: #5f5445 !important;
}

body[data-page] .app-kpi-icon,
body[data-page] .analytics-kpi-icon,
body[data-page] .dashboard-kpi-icon,
body[data-page] .kpi:nth-child(2) .dashboard-kpi-icon,
body[data-page] .analytics-summary .kpi:nth-child(2) .analytics-kpi-icon,
body[data-page] .kpi:nth-child(3) .dashboard-kpi-icon,
body[data-page] .analytics-summary .kpi:nth-child(3) .analytics-kpi-icon,
body[data-page] .kpi:nth-child(4) .dashboard-kpi-icon,
body[data-page] .analytics-summary .kpi:nth-child(4) .analytics-kpi-icon {
  background: #efe4d3 !important;
}

body[data-page="bet-logger"] .bet-logger-app {
  --bl-turf: #3f3427;
  --bl-rail: #f5efe3;
  --bl-ink: #211c16;
  --bl-muted: #6f6456;
  --bl-line: #ddd1bc;
  --bl-silk: #b89a6a;
  --bl-silk-bg: #f3e7d0;
  --bl-silk-ink: #745a37;
}

body[data-page="login"] .login-shell {
  background: #f5efe3 !important;
}

body[data-page="login"] .login-panel::before {
  background-image: radial-gradient(#d8ccb8 1px, transparent 1px) !important;
}

body[data-page="login"] .login-visual {
  background:
    linear-gradient(rgba(31, 27, 22, .18), rgba(31, 27, 22, .48)),
    repeating-linear-gradient(120deg, transparent 0 70px, rgba(255, 255, 255, .03) 70px 71px),
    #1f1b16 !important;
}

html.mobile-app-mode body[data-page] .mobile-quick-nav a.active:not(.central) {
  background: #3f3427 !important;
  color: #fff3df !important;
  box-shadow: 0 4px 12px rgba(63, 52, 39, .26) !important;
}