/* =========================================================
   OPENSCORES GLOBAL THEME SYSTEM
========================================================= */


/* DEFAULT */

html[data-theme="default"] {
  color-scheme: light;
}


/* =========================================================
   MIDNIGHT / DARK MODE
========================================================= */

html[data-theme="midnight"] {
  color-scheme: dark;

  --theme-page: #07111f;
  --theme-surface: #0f1b2d;
  --theme-surface-2: #142238;
  --theme-surface-3: #1b2b44;

  --theme-text: #f8fafc;
  --theme-muted: #94a3b8;
  --theme-border: #26364d;

  --theme-primary: #2563eb;
  --theme-primary-light: #60a5fa;
  --theme-primary-dark: #1d4ed8;
}


/* PAGE */

html[data-theme="midnight"] body {
  background: #07111f !important;
  color: #f8fafc !important;
}


/* MAIN CONTENT */

html[data-theme="midnight"] main,
html[data-theme="midnight"] .main,
html[data-theme="midnight"] .main-content,
html[data-theme="midnight"] .content,
html[data-theme="midnight"] .page,
html[data-theme="midnight"] .page-content,
html[data-theme="midnight"] .dashboard,
html[data-theme="midnight"] .dashboard-main {
  color: #f8fafc !important;
}


/* NAVIGATION */

html[data-theme="midnight"] nav,
html[data-theme="midnight"] .navbar,
html[data-theme="midnight"] .sidebar,
html[data-theme="midnight"] .side-bar,
html[data-theme="midnight"] aside {
  background: #0a1525 !important;
  border-color: #26364d !important;
  color: #f8fafc !important;
}


/* CARDS */

html[data-theme="midnight"] .card,
html[data-theme="midnight"] .panel,
html[data-theme="midnight"] .box,
html[data-theme="midnight"] .section-card,
html[data-theme="midnight"] .stat-card,
html[data-theme="midnight"] .top-stat,
html[data-theme="midnight"] .quick-item,
html[data-theme="midnight"] .continue-item,
html[data-theme="midnight"] .achievement-item,
html[data-theme="midnight"] .mini-profile,
html[data-theme="midnight"] .journal-strip,
html[data-theme="midnight"] .settings-section,
html[data-theme="midnight"] .customization-section {
  background: #0f1b2d !important;
  border-color: #26364d !important;
  color: #f8fafc !important;
}


/* TEXT */

html[data-theme="midnight"] h1,
html[data-theme="midnight"] h2,
html[data-theme="midnight"] h3,
html[data-theme="midnight"] h4,
html[data-theme="midnight"] h5,
html[data-theme="midnight"] h6,
html[data-theme="midnight"] strong,
html[data-theme="midnight"] label {
  color: #f8fafc !important;
}


html[data-theme="midnight"] p,
html[data-theme="midnight"] small,
html[data-theme="midnight"] span,
html[data-theme="midnight"] .muted,
html[data-theme="midnight"] .subtitle,
html[data-theme="midnight"] .description {
  color: #94a3b8;
}


/* LINKS */

html[data-theme="midnight"] a {
  color: #60a5fa;
}

html[data-theme="midnight"] a:hover {
  color: #93c5fd;
}


/* BUTTONS */

html[data-theme="midnight"] .button,
html[data-theme="midnight"] .btn,
html[data-theme="midnight"] .primary-button,
html[data-theme="midnight"] .btn-primary,
html[data-theme="midnight"] .small-button,
html[data-theme="midnight"] .adaptive-button {
  background: #2563eb !important;
  color: white !important;
  border-color: #2563eb !important;
}

html[data-theme="midnight"] .button:hover,
html[data-theme="midnight"] .btn:hover,
html[data-theme="midnight"] .primary-button:hover,
html[data-theme="midnight"] .btn-primary:hover,
html[data-theme="midnight"] .small-button:hover,
html[data-theme="midnight"] .adaptive-button:hover {
  background: #1d4ed8 !important;
}


/* INPUTS */

html[data-theme="midnight"] input,
html[data-theme="midnight"] textarea,
html[data-theme="midnight"] select {
  background: #142238 !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

html[data-theme="midnight"] input::placeholder,
html[data-theme="midnight"] textarea::placeholder {
  color: #64748b !important;
}


/* TABLES */

html[data-theme="midnight"] table {
  color: #f8fafc !important;
}

html[data-theme="midnight"] th {
  background: #142238 !important;
  color: #f8fafc !important;
}

html[data-theme="midnight"] td {
  border-color: #26364d !important;
}


/* MODALS */

html[data-theme="midnight"] .modal,
html[data-theme="midnight"] .modal-content,
html[data-theme="midnight"] .popup,
html[data-theme="midnight"] .update-modal {
  background: #0f1b2d !important;
  color: #f8fafc !important;
  border-color: #26364d !important;
}


/* PROGRESS BARS */

html[data-theme="midnight"] .progress-bar,
html[data-theme="midnight"] .skill-bar,
html[data-theme="midnight"] .mini-progress,
html[data-theme="midnight"] .achievement-progress-bar {
  background: #26364d !important;
}

html[data-theme="midnight"] .progress-fill,
html[data-theme="midnight"] .skill-fill,
html[data-theme="midnight"] .mini-progress-fill,
html[data-theme="midnight"] .achievement-progress-fill {
  background: linear-gradient(
    90deg,
    #2563eb,
    #60a5fa
  ) !important;
}


/* ACTIVE SIDEBAR ITEM */

html[data-theme="midnight"] .side-link.active {
  background: linear-gradient(
    135deg,
    #1d4ed8,
    #2563eb
  ) !important;

  color: rgb(51, 63, 121) !important;
}


/* SIDEBAR LINKS */

html[data-theme="midnight"] .side-link {
  color: #cbd5e1 !important;
}

html[data-theme="midnight"] .side-link:hover {
  background: #142238 !important;
  color: #60a5fa !important;
}


/* SCROLLBAR */

html[data-theme="midnight"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html[data-theme="midnight"] ::-webkit-scrollbar-track {
  background: #07111f;
}

html[data-theme="midnight"] ::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 999px;
}

html[data-theme="midnight"] ::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* =========================================================
   MIDNIGHT MODE - SHOP / CUSTOMIZATION FIX
========================================================= */

html[data-theme="midnight"] .balance-card,
html[data-theme="midnight"] .section-header,
html[data-theme="midnight"] .shop-card,
html[data-theme="midnight"] .back-shop-button,
html[data-theme="midnight"] .visual {
  background: #0f1b2d !important;
  border-color: #26364d !important;
  color: #f8fafc !important;
}


/* SHOP CARD TITLES */

html[data-theme="midnight"] .shop-card h3,
html[data-theme="midnight"] .section-header h2,
html[data-theme="midnight"] .notes-amount strong {
  color: #f8fafc !important;
}


/* SHOP DESCRIPTION TEXT */

html[data-theme="midnight"] .shop-card p,
html[data-theme="midnight"] .section-header p,
html[data-theme="midnight"] .balance-note,
html[data-theme="midnight"] .balance-label {
  color: #94a3b8 !important;
}


/* EMPTY / COMING SOON PREVIEWS */

html[data-theme="midnight"] .shop-card .visual {
  background:
    linear-gradient(
      145deg,
      #142238,
      #101b2c
    ) !important;
}


/* KEEP IMAGE BACKGROUNDS NORMAL */

html[data-theme="midnight"] .background-preview {
  background: #142238 !important;
}


/* STATUS PILLS */

html[data-theme="midnight"] .status-pill {
  background: rgba(15,27,45,.92) !important;
  color: #cbd5e1 !important;
  border: 1px solid #334155;
}


/* SECTION COUNT PILLS */

html[data-theme="midnight"] .section-count {
  background: #142238 !important;
  color: #60a5fa !important;
}


/* BACK TO SHOP */

html[data-theme="midnight"] .back-shop-button {
  color: #60a5fa !important;
}

html[data-theme="midnight"] .back-shop-button:hover {
  background: #142238 !important;
}


/* OWNED CARDS */

html[data-theme="midnight"] .shop-card.owned {
  border-color: #2563eb !important;
}


/* SHOP CARD HOVER */

html[data-theme="midnight"] .shop-card:hover {
  border-color: #3b82f6 !important;

  box-shadow:
    0 13px 28px
    rgba(37,99,235,.14) !important;
}


/* PLUS ICONS / PLACEHOLDERS */

html[data-theme="midnight"] .visual .fa-plus {
  color: #64748b !important;
}

/* =========================================================
   DARK MODE — MAIN SHOP PAGE
========================================================= */

html[data-theme="midnight"] .balance-card,
html[data-theme="midnight"] .category-card {
  background: #0f1b2d !important;
  border-color: #26364d !important;
  color: #f8fafc !important;
}


/* CATEGORY TITLES */

html[data-theme="midnight"] .category-card h3 {
  color: #f8fafc !important;
}


/* CATEGORY DESCRIPTION */

html[data-theme="midnight"] .category-card p {
  color: #94a3b8 !important;
}


/* NOTES BALANCE */

html[data-theme="midnight"] .balance-row strong {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .balance-label,
html[data-theme="midnight"] .balance-message {
  color: #94a3b8 !important;
}


/* SHOP SECTION TITLE */

html[data-theme="midnight"] .section-heading h2 {
  color: #60a5fa !important;
}

html[data-theme="midnight"] .section-heading p {
  color: #94a3b8 !important;
}


/* CATEGORY VISUALS */

html[data-theme="midnight"] .titles .category-visual {
  background: linear-gradient(
    135deg,
    #1e1b4b,
    #312e81
  ) !important;
}

html[data-theme="midnight"] .powerups .category-visual {
  background: linear-gradient(
    135deg,
    #292211,
    #422006
  ) !important;
}

html[data-theme="midnight"] .customization .category-visual {
  background: linear-gradient(
    135deg,
    #0c2946,
    #172554
  ) !important;
}


/* LITTLE BADGES */

html[data-theme="midnight"] .category-badge {
  background: #142238 !important;
  color: #cbd5e1 !important;
}


/* CATEGORY COUNTS */

html[data-theme="midnight"] .category-count {
  color: #94a3b8 !important;
}


/* CARD HOVER */

html[data-theme="midnight"] .category-card:hover {
  background: #142238 !important;

  box-shadow:
    0 17px 38px
    rgba(0,0,0,.28) !important;
}
/* =========================================================
   MIDNIGHT — SETTINGS PAGE
========================================================= */


/* =========================================================
   MAIN SETTINGS CARDS
========================================================= */

html[data-theme="midnight"] .settings-grid .card,
html[data-theme="midnight"] .dashboard-settings-card {
  background: #0f1b2d !important;
  border-color: #26364d !important;
  color: #f8fafc !important;
}


/* =========================================================
   CARD TITLES + TEXT
========================================================= */

html[data-theme="midnight"] .card h2,
html[data-theme="midnight"] .card h3,
html[data-theme="midnight"] .card-heading h2,
html[data-theme="midnight"] .card-heading-left h2,
html[data-theme="midnight"] .toggle-info strong,
html[data-theme="midnight"] .customization-section-title strong,
html[data-theme="midnight"] .equipped-award-details strong {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .description,
html[data-theme="midnight"] .toggle-info span,
html[data-theme="midnight"] .customization-section-title span,
html[data-theme="midnight"] .equipped-award-details span,
html[data-theme="midnight"] .field-help {
  color: #94a3b8 !important;
}


/* =========================================================
   FORM LABELS
========================================================= */

html[data-theme="midnight"] label {
  color: #cbd5e1 !important;
}


/* =========================================================
   INPUTS + SELECTS
========================================================= */

html[data-theme="midnight"] input,
html[data-theme="midnight"] select {
  background: #142238 !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

html[data-theme="midnight"] input:focus,
html[data-theme="midnight"] select:focus {
  background: #17263c !important;
  border-color: #3b82f6 !important;
}

html[data-theme="midnight"] input:disabled {
  background: #0b1626 !important;
  color: #64748b !important;
}

html[data-theme="midnight"] input::placeholder {
  color: #64748b !important;
}


/* =========================================================
   TOGGLE DIVIDERS
========================================================= */

html[data-theme="midnight"] .toggle-row {
  border-color: #26364d !important;
}


/* =========================================================
   LEADERBOARD PREVIEW BOXES
========================================================= */

html[data-theme="midnight"] .leaderboard-preview {
  background: linear-gradient(
    145deg,
    #142238,
    #101d32
  ) !important;

  border-color: #26364d !important;
}

html[data-theme="midnight"] .preview-label,
html[data-theme="midnight"] .preview-rank,
html[data-theme="midnight"] .preview-name span,
html[data-theme="midnight"] .preview-badge-name,
html[data-theme="midnight"] .equipped-award-mini-name {
  color: #94a3b8 !important;
}

html[data-theme="midnight"] .preview-name strong {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .preview-xp {
  color: #60a5fa !important;
}


/* =========================================================
   DASHBOARD CUSTOMIZATION
========================================================= */

html[data-theme="midnight"] .dashboard-settings-card {
  background: linear-gradient(
    145deg,
    #0f1b2d,
    #101d30
  ) !important;

  border-color: #26364d !important;
}

html[data-theme="midnight"] .customization-section {
  background: transparent !important;
  border-color: #26364d !important;
}


/* =========================================================
   OWNED TITLE / BACKGROUND / THEME BOXES
========================================================= */

html[data-theme="midnight"] .customization-item {
  background: #142238 !important;
  border-color: #2b3c55 !important;
  color: #f8fafc !important;
}

html[data-theme="midnight"] .customization-item:hover {
  background: #182941 !important;
  border-color: #3b82f6 !important;
}

html[data-theme="midnight"] .customization-item.selected {
  background: #172a48 !important;
  border-color: #3b82f6 !important;

  box-shadow:
    0 0 0 2px
    rgba(59,130,246,.12) !important;
}

html[data-theme="midnight"] .customization-item strong {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .customization-item small {
  color: #94a3b8 !important;
}


/* =========================================================
   CUSTOMIZATION PREVIEW
========================================================= */

html[data-theme="midnight"] .customization-preview {
  background: #0b1626 !important;
}


/* =========================================================
   EMPTY CUSTOMIZATION BOXES
========================================================= */

html[data-theme="midnight"] .customization-empty {
  background: #0b1626 !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

html[data-theme="midnight"] .customization-empty i {
  color: #64748b !important;
}


/* =========================================================
   COMING SOON BOX
========================================================= */

html[data-theme="midnight"] .coming-soon-setting {
  background: #0b1626 !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

html[data-theme="midnight"] .coming-soon-setting strong {
  color: #f8fafc !important;
}


/* =========================================================
   PRIVACY BOX
========================================================= */

html[data-theme="midnight"] .privacy-box {
  background: linear-gradient(
    145deg,
    #0c2432,
    #102033
  ) !important;

  border-color: #164e63 !important;
}

html[data-theme="midnight"] .privacy-box h3 {
  color: #67e8f9 !important;
}

html[data-theme="midnight"] .privacy-box p {
  color: #a5b4c7 !important;
}


/* =========================================================
   SECONDARY BUTTONS
========================================================= */

html[data-theme="midnight"] .secondary-button {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}

html[data-theme="midnight"] .secondary-button:hover {
  background: #334155 !important;
}


/* =========================================================
   ADMIN CARD
========================================================= */

html[data-theme="midnight"] .admin-card {
  background: linear-gradient(
    145deg,
    #251417,
    #1a1115
  ) !important;

  border-color: #7f1d1d !important;
}


/* =========================================================
   DANGER / SIGN OUT
========================================================= */

html[data-theme="midnight"] .danger-zone {
  background: linear-gradient(
    145deg,
    #251417,
    #1a1115
  ) !important;

  border-color: #7f1d1d !important;
}

html[data-theme="midnight"] .danger-zone h2 {
  color: #fca5a5 !important;
}


/* =========================================================
   SIDEBAR BACK BUTTON
========================================================= */

html[data-theme="midnight"] .back-to-site {
  background: #142238 !important;
  border-color: #26364d !important;
  color: #60a5fa !important;
}

html[data-theme="midnight"] .back-to-site:hover {
  background: #1b2b44 !important;
}


/* =========================================================
   ICON BOXES
========================================================= */

html[data-theme="midnight"] .card-icon {
  background: #172a48 !important;
  color: #60a5fa !important;
}

html[data-theme="midnight"] .card-icon.purple {
  background: #2e1d4d !important;
  color: #c084fc !important;
}

html[data-theme="midnight"] .card-icon.green {
  background: #102e25 !important;
  color: #4ade80 !important;
}

html[data-theme="midnight"] .card-icon.orange {
  background: #352313 !important;
  color: #fb923c !important;
}


/* =========================================================
   LOADING SCREEN
========================================================= */

html[data-theme="midnight"] #loadingScreen {
  background: #07111f !important;
  color: #60a5fa !important;
}

/* =========================================================
   MIDNIGHT — LEADERBOARD PAGE
========================================================= */


/* MAIN WHITE CONTAINERS */

html[data-theme="midnight"] .join-leaderboard,
html[data-theme="midnight"] .toolbar,
html[data-theme="midnight"] .podium-card,
html[data-theme="midnight"] .leaderboard-card,
html[data-theme="midnight"] .report-card {
  background: #0f1b2d !important;
  border-color: #26364d !important;
  color: #f8fafc !important;
}


/* JOIN LEADERBOARD CARD */

html[data-theme="midnight"] .join-leaderboard {
  background: linear-gradient(
    135deg,
    #121b2d,
    #171b35
  ) !important;
}

html[data-theme="midnight"] .join-leaderboard-text strong {
  color: #c4b5fd !important;
}

html[data-theme="midnight"] .join-leaderboard-text span {
  color: #94a3b8 !important;
}


/* TOOLBAR */

html[data-theme="midnight"] .sort-button {
  background: #142238 !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

html[data-theme="midnight"] .sort-button:hover {
  background: #172a48 !important;
  border-color: #3b82f6 !important;
  color: #60a5fa !important;
}

html[data-theme="midnight"] .sort-button.active {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: white !important;
}


/* SEARCH */

html[data-theme="midnight"] .search-wrap input {
  background: #142238 !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

html[data-theme="midnight"] .search-wrap input:focus {
  background: #17263c !important;
  border-color: #3b82f6 !important;
}

html[data-theme="midnight"] .search-wrap input::placeholder {
  color: #64748b !important;
}


/* PODIUM CARDS */

html[data-theme="midnight"] .podium-card.first {
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(234,179,8,.16),
      transparent 42%
    ),
    #0f1b2d !important;

  border-color: #a16207 !important;
}

html[data-theme="midnight"] .podium-card.second {
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(148,163,184,.14),
      transparent 42%
    ),
    #0f1b2d !important;

  border-color: #475569 !important;
}

html[data-theme="midnight"] .podium-card.third {
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(249,115,22,.14),
      transparent 42%
    ),
    #0f1b2d !important;

  border-color: #9a3412 !important;
}

html[data-theme="midnight"] .podium-name {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .podium-instrument,
html[data-theme="midnight"] .award-name,
html[data-theme="midnight"] .podium-sub {
  color: #94a3b8 !important;
}

html[data-theme="midnight"] .podium-score {
  color: #60a5fa !important;
}


/* RANKINGS HEADER */

html[data-theme="midnight"] .leaderboard-heading {
  border-color: #26364d !important;
}

html[data-theme="midnight"] .leaderboard-heading h2 {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .leaderboard-heading span {
  color: #94a3b8 !important;
}


/* TABLE */

html[data-theme="midnight"] .leaderboard-table {
  background: #0f1b2d !important;
}

html[data-theme="midnight"] .leaderboard-table th {
  background: #142238 !important;
  color: #94a3b8 !important;
  border-color: #26364d !important;
}

html[data-theme="midnight"] .leaderboard-table td {
  background: #0f1b2d !important;
  border-color: #26364d !important;
  color: #cbd5e1 !important;
}

html[data-theme="midnight"] .leaderboard-table tbody tr:hover td {
  background: #142238 !important;
}

html[data-theme="midnight"] .leaderboard-table tbody tr.is-me td {
  background: #132542 !important;
}


/* PLAYER TEXT */

html[data-theme="midnight"] .player-text strong {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .player-text span,
html[data-theme="midnight"] .table-award-name,
html[data-theme="midnight"] .rank-cell {
  color: #94a3b8 !important;
}


/* EMPTY STATE */

html[data-theme="midnight"] .empty-state {
  color: #94a3b8 !important;
}

html[data-theme="midnight"] .empty-state strong {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .empty-state i {
  color: #64748b !important;
}


/* PRIVACY NOTE */

html[data-theme="midnight"] .privacy-note {
  background: #0c2432 !important;
  border-color: #164e63 !important;
  color: #a5b4c7 !important;
}

html[data-theme="midnight"] .privacy-note i {
  color: #22d3ee !important;
}


/* REPORT BUTTON */

html[data-theme="midnight"] .report-button {
  background: #2a151a !important;
  border-color: #7f1d1d !important;
  color: #fca5a5 !important;
}

html[data-theme="midnight"] .report-button:hover {
  background: #3b171d !important;
  border-color: #b91c1c !important;
}


/* REPORT MODAL */

html[data-theme="midnight"] .report-card {
  background: #0f1b2d !important;
  border-color: #334155 !important;
}

html[data-theme="midnight"] .report-card h2 {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .report-card > p {
  color: #94a3b8 !important;
}

html[data-theme="midnight"] .report-target {
  background: #142238 !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

html[data-theme="midnight"] .report-form-group label {
  color: #cbd5e1 !important;
}

html[data-theme="midnight"] .report-form-group select,
html[data-theme="midnight"] .report-form-group textarea {
  background: #142238 !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

html[data-theme="midnight"] .report-form-group textarea::placeholder {
  color: #64748b !important;
}


/* REPORT CANCEL */

html[data-theme="midnight"] .report-cancel {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}


/* ME PILL */

html[data-theme="midnight"] .me-pill {
  background: #172a48 !important;
  color: #60a5fa !important;
}


/* LOADING SCREEN */

html[data-theme="midnight"] #loadingScreen {
  background: #07111f !important;
  color: #60a5fa !important;
}

/* =========================================================
   OPENSCORES MIDNIGHT
   EXTRA PAGE FIXES
   Paste at BOTTOM of theme.css
========================================================= */


/* =========================================================
   RHYTHM CHALLENGE
========================================================= */

html[data-theme="midnight"] .dashboard-return,
html[data-theme="midnight"] .choice-button,
html[data-theme="midnight"] .answer-button,
html[data-theme="midnight"] .rhythm-display,
html[data-theme="midnight"] .check-option {
  background: #0f1b2d !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

html[data-theme="midnight"] .choice-button:hover,
html[data-theme="midnight"] .answer-button:hover {
  background: #142238 !important;
  border-color: #3b82f6 !important;
  color: #60a5fa !important;
}

html[data-theme="midnight"] .choice-button.active {
  background: #172a48 !important;
  border-color: #3b82f6 !important;
  color: #93c5fd !important;
}

html[data-theme="midnight"] .rhythm-display {
  background: linear-gradient(
    145deg,
    #0f1b2d,
    #151b32
  ) !important;
}

html[data-theme="midnight"] .rhythm-text,
html[data-theme="midnight"] .rhythm-operator {
  color: #c4b5fd !important;
}

html[data-theme="midnight"] .question-progress {
  background: #26364d !important;
}

html[data-theme="midnight"] .secondary-button {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}

html[data-theme="midnight"] .results-icon {
  background: #172a48 !important;
  color: #60a5fa !important;
}

html[data-theme="midnight"] .xp-earned {
  background: #2b1d12 !important;
  color: #fb923c !important;
}

html[data-theme="midnight"] .notes-earned {
  background: #172a48 !important;
  color: #60a5fa !important;
}


/* =========================================================
   ACHIEVEMENTS
========================================================= */

html[data-theme="midnight"] .equipped-card,
html[data-theme="midnight"] .controls-card,
html[data-theme="midnight"] .award-card {
  background: #0f1b2d !important;
  border-color: #26364d !important;
  color: #f8fafc !important;
}

html[data-theme="midnight"] .equipped-content h2,
html[data-theme="midnight"] .collection-summary strong,
html[data-theme="midnight"] .award-info h3 {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .equipped-content p,
html[data-theme="midnight"] .collection-summary span,
html[data-theme="midnight"] .award-description,
html[data-theme="midnight"] .award-category {
  color: #94a3b8 !important;
}

html[data-theme="midnight"] .filter-button {
  background: #142238 !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

html[data-theme="midnight"] .filter-button.active {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: white !important;
}

html[data-theme="midnight"] .unequip-button {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}


/* =========================================================
   PRACTICE JOURNAL
========================================================= */

html[data-theme="midnight"] .journal-note {
  background: linear-gradient(
    145deg,
    #0f1b2d,
    #10251f
  ) !important;

  border-color: #315e52 !important;
}

html[data-theme="midnight"] .journal-note:hover {
  background: #132b25 !important;
  border-color: #22c55e !important;
}

html[data-theme="midnight"] .journal-note h3 {
  color: #86efac !important;
}

html[data-theme="midnight"] .journal-note p,
html[data-theme="midnight"] .note-date {
  color: #94a3b8 !important;
}

html[data-theme="midnight"] .note-icon {
  background: #103525 !important;
  color: #4ade80 !important;
}

html[data-theme="midnight"] .tag {
  background: #103525 !important;
  color: #86efac !important;
}

html[data-theme="midnight"] .empty-state {
  background: #0f1b2d !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

html[data-theme="midnight"] .empty-state h3 {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .modal-card {
  background: #0f1b2d !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

html[data-theme="midnight"] .close-button {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}

html[data-theme="midnight"] .reading-section h4 {
  color: #86efac !important;
}

html[data-theme="midnight"] .reading-section p,
html[data-theme="midnight"] .reading-date {
  color: #cbd5e1 !important;
}


/* =========================================================
   PRACTICE PLANNER
========================================================= */

html[data-theme="midnight"] .day-card {
  background: #0f1b2d !important;
  border-color: #26364d !important;
}

html[data-theme="midnight"] .choice-button,
html[data-theme="midnight"] .check-option {
  background: #142238 !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

html[data-theme="midnight"] .check-option:hover {
  background: #17263c !important;
}

html[data-theme="midnight"] .audition-box,
html[data-theme="midnight"] .weekly-goal {
  background: linear-gradient(
    135deg,
    #0c2432,
    #102033
  ) !important;

  border-color: #164e63 !important;
}

html[data-theme="midnight"] .audition-box h3,
html[data-theme="midnight"] .weekly-goal h3,
html[data-theme="midnight"] .day-name {
  color: #67e8f9 !important;
}

html[data-theme="midnight"] .audition-box p,
html[data-theme="midnight"] .weekly-goal p,
html[data-theme="midnight"] .practice-content span {
  color: #94a3b8 !important;
}

html[data-theme="midnight"] .day-focus {
  background: #123340 !important;
  color: #67e8f9 !important;
}

html[data-theme="midnight"] .practice-block {
  border-color: #26364d !important;
}

html[data-theme="midnight"] select,
html[data-theme="midnight"] input[type="text"],
html[data-theme="midnight"] input[type="number"] {
  background: #142238 !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}


/* =========================================================
   MUSIC GAMES
========================================================= */

html[data-theme="midnight"] .game-card {
  background: #0f1b2d !important;
  border-color: #26364d !important;
  color: #f8fafc !important;
}

html[data-theme="midnight"] .game-card h3 {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .game-card p {
  color: #94a3b8 !important;
}

html[data-theme="midnight"] .note-card {
  background: linear-gradient(
    145deg,
    #10203b,
    #0f1b2d
  ) !important;
}

html[data-theme="midnight"] .rhythm-card {
  background: linear-gradient(
    145deg,
    #201637,
    #0f1b2d
  ) !important;
}

html[data-theme="midnight"] .interval-card {
  background: linear-gradient(
    145deg,
    #10291f,
    #0f1b2d
  ) !important;
}

html[data-theme="midnight"] .ear-card {
  background: linear-gradient(
    145deg,
    #321626,
    #0f1b2d
  ) !important;
}

html[data-theme="midnight"] .harmony-card {
  background: linear-gradient(
    145deg,
    #312012,
    #0f1b2d
  ) !important;
}

html[data-theme="midnight"] .key-card {
  background: linear-gradient(
    145deg,
    #302a10,
    #0f1b2d
  ) !important;
}

html[data-theme="midnight"] .coming-soon-label {
  background: #142238 !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

html[data-theme="midnight"] .info-box {
  background: linear-gradient(
    135deg,
    #10203b,
    #0f1b2d
  ) !important;

  border-color: #26364d !important;
}

html[data-theme="midnight"] .info-box h3 {
  color: #60a5fa !important;
}

html[data-theme="midnight"] .info-box p {
  color: #94a3b8 !important;
}


/* =========================================================
   FAVORITES
========================================================= */

html[data-theme="midnight"] .favorite-card,
html[data-theme="midnight"] .collection-card,
html[data-theme="midnight"] .collection-empty,
html[data-theme="midnight"] .collection-modal,
html[data-theme="midnight"] .score-choice,
html[data-theme="midnight"] .collection-view-score {
  background: #0f1b2d !important;
  border-color: #26364d !important;
  color: #f8fafc !important;
}

html[data-theme="midnight"] .heading-row h2,
html[data-theme="midnight"] .favorite-info h3,
html[data-theme="midnight"] .collection-card h3,
html[data-theme="midnight"] .modal-top h2,
html[data-theme="midnight"] .score-choice strong,
html[data-theme="midnight"] .collection-view-score strong {
  color: #93c5fd !important;
}

html[data-theme="midnight"] .favorite-info p,
html[data-theme="midnight"] .collection-card p,
html[data-theme="midnight"] .modal-top p,
html[data-theme="midnight"] .score-choice span {
  color: #94a3b8 !important;
}

html[data-theme="midnight"] .favorite-card img,
html[data-theme="midnight"] .score-choice img {
  background: #142238 !important;
}

html[data-theme="midnight"] .collection-icon {
  background: #172a48 !important;
  color: #60a5fa !important;
}

html[data-theme="midnight"] .collection-button.secondary {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}

html[data-theme="midnight"] .modal-close {
  background: #1e293b !important;
  color: #cbd5e1 !important;
}

html[data-theme="midnight"] .score-choice.selected {
  background: #172a48 !important;
  border-color: #3b82f6 !important;
}

html[data-theme="midnight"] .favorite-count {
  background: #302a10 !important;
  color: #fde047 !important;
}


/* =========================================================
   ADAPTIVE PRACTICE
========================================================= */

html[data-theme="midnight"] .accuracy-box,
html[data-theme="midnight"] .why-box,
html[data-theme="midnight"] .signal-card,
html[data-theme="midnight"] .how-card,
html[data-theme="midnight"] .plan-card {
  background: #0f1b2d !important;
  border-color: #26364d !important;
  color: #f8fafc !important;
}

html[data-theme="midnight"] .accuracy-box {
  background: linear-gradient(
    145deg,
    #142238,
    #0f1b2d
  ) !important;
}

html[data-theme="midnight"] .why-box {
  background: linear-gradient(
    135deg,
    #171b35,
    #0f1b2d
  ) !important;
}

html[data-theme="midnight"] .why-box h3 {
  color: #a5b4fc !important;
}

html[data-theme="midnight"] .why-box p,
html[data-theme="midnight"] .signal-card span,
html[data-theme="midnight"] .how-step span,
html[data-theme="midnight"] .plan-row span {
  color: #94a3b8 !important;
}

html[data-theme="midnight"] .signal-card {
  background: #142238 !important;
}

html[data-theme="midnight"] .analysis-label {
  background: #172a48 !important;
  color: #93c5fd !important;
}

html[data-theme="midnight"] .recommendation-icon {
  background: #172a48 !important;
  color: #60a5fa !important;
}

html[data-theme="midnight"] .skill-row {
  border-color: #26364d !important;
}

html[data-theme="midnight"] .skill-row-value {
  color: #cbd5e1 !important;
}

html[data-theme="midnight"] .skill-mini-bar {
  background: #26364d !important;
}

html[data-theme="midnight"] .how-card {
  background: linear-gradient(
    145deg,
    #10251f,
    #0f1b2d
  ) !important;
}

html[data-theme="midnight"] .how-number {
  background: #103525 !important;
  color: #4ade80 !important;
}

html[data-theme="midnight"] .plan-card {
  background: linear-gradient(
    145deg,
    #0c2432,
    #0f1b2d
  ) !important;
}

html[data-theme="midnight"] .plan-row {
  border-color: #26364d !important;
}

html[data-theme="midnight"] .plan-row strong {
  color: #f8fafc !important;
}


/* =========================================================
   GLOBAL LEFTOVER WHITE BOX KILLER

   These are common small boxes used across OpenScores.
========================================================= */

html[data-theme="midnight"] .dashboard-return,
html[data-theme="midnight"] .secondary-button {
  background: #142238 !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

html[data-theme="midnight"] .dashboard-return:hover,
html[data-theme="midnight"] .secondary-button:hover {
  background: #1b2b44 !important;
  color: #60a5fa !important;
}


/* =========================================================
   LOADING SCREENS
========================================================= */

html[data-theme="midnight"] #loadingScreen {
  background: #07111f !important;
  color: #60a5fa !important;
}

/* =========================================================
   MIDNIGHT — DASHBOARD FIXES
========================================================= */


/* MAIN DASHBOARD CARDS */

html[data-theme="midnight"] .card,
html[data-theme="midnight"] .top-stat,
html[data-theme="midnight"] .continue-item,
html[data-theme="midnight"] .today-card,
html[data-theme="midnight"] .adaptive-card,
html[data-theme="midnight"] .quick-item,
html[data-theme="midnight"] .right-card,
html[data-theme="midnight"] .mini-profile {
  background: #0f1b2d !important;
  border-color: #26364d !important;
  color: #f8fafc !important;
}


/* =========================================================
   CENTER COLUMN
========================================================= */

html[data-theme="midnight"] .welcome h1,
html[data-theme="midnight"] .section-heading h2,
html[data-theme="midnight"] .continue-content h3,
html[data-theme="midnight"] .today-card strong,
html[data-theme="midnight"] .adaptive-info h3 {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .welcome p,
html[data-theme="midnight"] .section-heading span,
html[data-theme="midnight"] .continue-content p,
html[data-theme="midnight"] .today-card span,
html[data-theme="midnight"] .adaptive-info p,
html[data-theme="midnight"] .mini-progress-text {
  color: #94a3b8 !important;
}


/* =========================================================
   TOP XP / STREAK BOXES
========================================================= */

html[data-theme="midnight"] .top-stat {
  background: #142238 !important;
}

html[data-theme="midnight"] .top-stat strong {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .top-stat span {
  color: #94a3b8 !important;
}


/* =========================================================
   MINI PROFILE
========================================================= */

html[data-theme="midnight"] .mini-profile {
  background: linear-gradient(
    145deg,
    #101c30,
    #0f1b2d
  ) !important;
}

html[data-theme="midnight"] .mini-profile-title,
html[data-theme="midnight"] .mini-profile-name {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .mini-profile-details {
  color: #94a3b8 !important;
}


/* =========================================================
   CONTINUE PRACTICING
========================================================= */

html[data-theme="midnight"] .continue-item {
  background: #142238 !important;
}

html[data-theme="midnight"] .continue-art.green {
  background: linear-gradient(
    145deg,
    #10291f,
    #123525
  ) !important;

  color: #4ade80 !important;
}


/* =========================================================
   TODAY'S PRACTICE
========================================================= */

html[data-theme="midnight"] .today-icon.green {
  background: #103525 !important;
  color: #4ade80 !important;
}

html[data-theme="midnight"] .today-icon.blue {
  background: #172a48 !important;
  color: #60a5fa !important;
}

html[data-theme="midnight"] .today-icon.orange {
  background: #352313 !important;
  color: #fb923c !important;
}


/* =========================================================
   ADAPTIVE PRACTICE CARDS
========================================================= */

html[data-theme="midnight"] .adaptive-card {
  background: #0f1b2d !important;
}

html[data-theme="midnight"] .adaptive-visual.yellow {
  background: #302a10 !important;
  color: #fde047 !important;
}

html[data-theme="midnight"] .adaptive-visual.purple {
  background: #2e1d4d !important;
  color: #c084fc !important;
}

html[data-theme="midnight"] .adaptive-visual.cyan {
  background: #0c2946 !important;
  color: #38bdf8 !important;
}

html[data-theme="midnight"] .difficulty.medium {
  background: #352313 !important;
  color: #fb923c !important;
}

html[data-theme="midnight"] .difficulty.easy {
  background: #103525 !important;
  color: #4ade80 !important;
}


/* =========================================================
   QUICK ACCESS
========================================================= */

html[data-theme="midnight"] .quick-item {
  background: #142238 !important;
  color: #cbd5e1 !important;
}

html[data-theme="midnight"] .quick-item:hover {
  background: #1b2b44 !important;
  border-color: #3b82f6 !important;
  color: #60a5fa !important;
}


/* =========================================================
   JOURNAL STRIP
========================================================= */

html[data-theme="midnight"] .journal-strip {
  background: linear-gradient(
    135deg,
    #10251f,
    #101b2f
  ) !important;

  border-color: #315e52 !important;
}

html[data-theme="midnight"] .journal-icon {
  background: #103525 !important;
  color: #4ade80 !important;
}

html[data-theme="midnight"] .journal-left strong {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .journal-left span {
  color: #94a3b8 !important;
}


/* =========================================================
   RIGHT PANEL
========================================================= */

html[data-theme="midnight"] .right-panel {
  background: #091321 !important;
  border-color: #26364d !important;
}


/* =========================================================
   PROGRESS CARD
========================================================= */

html[data-theme="midnight"] .overall-progress-row,
html[data-theme="midnight"] .skills-label,
html[data-theme="midnight"] .skill-name,
html[data-theme="midnight"] .skill-percent {
  color: #e2e8f0 !important;
}

html[data-theme="midnight"] .progress-bar,
html[data-theme="midnight"] .skill-bar,
html[data-theme="midnight"] .mini-progress {
  background: #26364d !important;
}


/* =========================================================
   QUESTIONS ANSWERED INLINE BOX
   This one uses inline styles, so we target its container.
========================================================= */

html[data-theme="midnight"] #totalQuestionsAnswered {
  color: #60a5fa !important;
}

html[data-theme="midnight"] #totalQuestionsAnswered::before {
  color: #60a5fa !important;
}

html[data-theme="midnight"] .right-card > div[style*="background:#f8fafc"] {
  background: #142238 !important;
  border-color: #334155 !important;
}

html[data-theme="midnight"] .right-card > div[style*="background:#f8fafc"] div[style*="color:#334155"] {
  color: #e2e8f0 !important;
}

html[data-theme="midnight"] .right-card > div[style*="background:#f8fafc"] div[style*="color:#94a3b8"] {
  color: #94a3b8 !important;
}

html[data-theme="midnight"] .right-card > div[style*="background:#f8fafc"] div[style*="background:#dbeafe"] {
  background: #172a48 !important;
  color: #60a5fa !important;
}


/* =========================================================
   ACHIEVEMENT DASHBOARD LIBRARY
========================================================= */

html[data-theme="midnight"] .achievement-count {
  background: #172a48 !important;
  color: #60a5fa !important;
}

html[data-theme="midnight"] .achievement-filter {
  background: #142238 !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

html[data-theme="midnight"] .achievement-filter:hover {
  border-color: #3b82f6 !important;
  color: #60a5fa !important;
}

html[data-theme="midnight"] .achievement-filter.active {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: white !important;
}

html[data-theme="midnight"] .achievement-item {
  background: #142238 !important;
  border-color: #334155 !important;
}

html[data-theme="midnight"] .achievement-item.unlocked {
  background: linear-gradient(
    145deg,
    #141d31,
    #181932
  ) !important;

  border-color: #4c1d95 !important;
}

html[data-theme="midnight"] .achievement-info strong {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .achievement-info span,
html[data-theme="midnight"] .achievement-category-title,
html[data-theme="midnight"] .achievement-progress-top {
  color: #94a3b8 !important;
}

html[data-theme="midnight"] .coming-soon {
  background: #142238 !important;
  color: #94a3b8 !important;
}


/* =========================================================
   PRACTICE STATS
========================================================= */

html[data-theme="midnight"] .side-stat.orange {
  background: #352313 !important;
}

html[data-theme="midnight"] .side-stat.yellow {
  background: #302a10 !important;
}

html[data-theme="midnight"] .side-stat strong {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .side-stat span {
  color: #94a3b8 !important;
}


/* =========================================================
   WHAT'S NEW BUTTON
========================================================= */

html[data-theme="midnight"] .update-pill {
  background: #142238 !important;
  border-color: #334155 !important;
  color: #60a5fa !important;
}

html[data-theme="midnight"] .update-pill:hover {
  background: #1b2b44 !important;
}


/* =========================================================
   UPDATE MODAL
========================================================= */

html[data-theme="midnight"] .update-modal {
  background: #0f1b2d !important;
  border-color: #334155 !important;
}

html[data-theme="midnight"] .update-modal-header {
  background: linear-gradient(
    135deg,
    #142238,
    #0f1b2d
  ) !important;

  border-color: #26364d !important;
}

html[data-theme="midnight"] .update-modal-body {
  background: #0f1b2d !important;
}

html[data-theme="midnight"] .update-modal-heading strong,
html[data-theme="midnight"] .current-update-title,
html[data-theme="midnight"] .previous-update-button strong {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .update-modal-heading span,
html[data-theme="midnight"] .current-update-date,
html[data-theme="midnight"] .previous-update-button span {
  color: #94a3b8 !important;
}

html[data-theme="midnight"] .update-close {
  background: #1e293b !important;
  color: #cbd5e1 !important;
}

html[data-theme="midnight"] .update-close:hover {
  background: #334155 !important;
  color: white !important;
}

html[data-theme="midnight"] .current-update-card {
  background: linear-gradient(
    145deg,
    #142238,
    #101b2d
  ) !important;

  border-color: #334155 !important;
}

html[data-theme="midnight"] .current-update-version {
  color: #60a5fa !important;
}

html[data-theme="midnight"] .update-change {
  color: #cbd5e1 !important;
}

html[data-theme="midnight"] .previous-update {
  background: #142238 !important;
  border-color: #334155 !important;
}

html[data-theme="midnight"] .previous-update-button {
  background: #142238 !important;
}

html[data-theme="midnight"] .previous-update-button:hover {
  background: #1b2b44 !important;
}

html[data-theme="midnight"] .previous-update-content {
  background: #142238 !important;
}


/* =========================================================
   STREAK LOST TOAST
========================================================= */

html[data-theme="midnight"] .streak-lost-toast {
  background: linear-gradient(
    135deg,
    #2b1a12,
    #1b1720
  ) !important;

  border-color: #7c2d12 !important;
}

html[data-theme="midnight"] .streak-lost-copy strong {
  color: #fdba74 !important;
}

html[data-theme="midnight"] .streak-lost-copy p {
  color: #94a3b8 !important;
}


/* =========================================================
   LOADING
========================================================= */

html[data-theme="midnight"] #loadingScreen {
  background: #07111f !important;
  color: #60a5fa !important;
}

/* =========================================================
   SAKURA THEME
========================================================= */

html[data-theme="sakura"] {
  color-scheme: light;

  --theme-page: #fff5f8;
  --theme-surface: #ffffff;
  --theme-surface-2: #fff0f5;
  --theme-surface-3: #ffe4ee;

  --theme-text: #4a2734;
  --theme-muted: #946779;
  --theme-border: #f4c8d7;

  --theme-primary: #db2777;
  --theme-primary-light: #f472b6;
  --theme-primary-dark: #be185d;
}


/* PAGE */

html[data-theme="sakura"] body {
  background:
    radial-gradient(
      circle at 85% 0%,
      #ffdbe7 0,
      transparent 28%
    ),
    #fff5f8 !important;

  color: #4a2734 !important;
}


/* SIDEBAR */

html[data-theme="sakura"] .sidebar,
html[data-theme="sakura"] nav,
html[data-theme="sakura"] aside {
  background: rgba(255,250,252,.98) !important;
  border-color: #f4c8d7 !important;
}


/* LOGO */

html[data-theme="sakura"] .brand-icon {
  background: linear-gradient(
    135deg,
    #db2777,
    #f472b6
  ) !important;
}

html[data-theme="sakura"] .brand-text strong {
  color: #831843 !important;
}

html[data-theme="sakura"] .brand-text span {
  color: #db2777 !important;
}


/* SIDEBAR LINKS */

html[data-theme="sakura"] .side-link {
  color: #6b4451 !important;
}

html[data-theme="sakura"] .side-link:hover {
  background: #fff0f5 !important;
  color: #db2777 !important;
}

html[data-theme="sakura"] .side-link.active {
  background: linear-gradient(
    135deg,
    #db2777,
    #f472b6
  ) !important;

  color: white !important;
}


/* BACK BUTTON */

html[data-theme="sakura"] .back-to-site,
html[data-theme="sakura"] .dashboard-return {
  background: #fff0f5 !important;
  border-color: #f9a8d4 !important;
  color: #be185d !important;
}


/* MAIN CARDS */

html[data-theme="sakura"] .card,
html[data-theme="sakura"] .panel,
html[data-theme="sakura"] .box,
html[data-theme="sakura"] .top-stat,
html[data-theme="sakura"] .continue-item,
html[data-theme="sakura"] .today-card,
html[data-theme="sakura"] .adaptive-card,
html[data-theme="sakura"] .quick-item,
html[data-theme="sakura"] .right-card,
html[data-theme="sakura"] .settings-section,
html[data-theme="sakura"] .dashboard-settings-card,
html[data-theme="sakura"] .customization-item,
html[data-theme="sakura"] .leaderboard-preview {
  background: rgba(255,255,255,.97) !important;
  border-color: #f4c8d7 !important;
  color: #4a2734 !important;
}


/* INNER BOXES */

html[data-theme="sakura"] .customization-preview,
html[data-theme="sakura"] .customization-empty,
html[data-theme="sakura"] .coming-soon-setting {
  background: #fff0f5 !important;
  border-color: #f4c8d7 !important;
}


/* HEADINGS */

html[data-theme="sakura"] h1,
html[data-theme="sakura"] h2,
html[data-theme="sakura"] h3,
html[data-theme="sakura"] h4,
html[data-theme="sakura"] strong,
html[data-theme="sakura"] label {
  color: #831843;
}


/* TEXT */

html[data-theme="sakura"] p,
html[data-theme="sakura"] small,
html[data-theme="sakura"] .description,
html[data-theme="sakura"] .field-help,
html[data-theme="sakura"] .toggle-info span {
  color: #946779;
}


/* LINKS */

html[data-theme="sakura"] a {
  color: #db2777;
}

html[data-theme="sakura"] a:hover {
  color: #be185d;
}


/* BUTTONS */

html[data-theme="sakura"] .button,
html[data-theme="sakura"] .primary-button,
html[data-theme="sakura"] .main-button,
html[data-theme="sakura"] .small-button,
html[data-theme="sakura"] .adaptive-button {
  background: linear-gradient(
    135deg,
    #db2777,
    #f472b6
  ) !important;

  color: white !important;
}

html[data-theme="sakura"] .button:hover,
html[data-theme="sakura"] .primary-button:hover,
html[data-theme="sakura"] .main-button:hover,
html[data-theme="sakura"] .small-button:hover,
html[data-theme="sakura"] .adaptive-button:hover {
  background: #be185d !important;
}


/* SECONDARY BUTTONS */

html[data-theme="sakura"] .secondary-button {
  background: #fff0f5 !important;
  color: #be185d !important;
}


/* INPUTS */

html[data-theme="sakura"] input,
html[data-theme="sakura"] textarea,
html[data-theme="sakura"] select {
  background: #fffafb !important;
  border-color: #f4c8d7 !important;
  color: #4a2734 !important;
}

html[data-theme="sakura"] input:focus,
html[data-theme="sakura"] textarea:focus,
html[data-theme="sakura"] select:focus {
  background: white !important;
  border-color: #f472b6 !important;

  box-shadow:
    0 0 0 3px
    rgba(244,114,182,.12) !important;
}


/* ICON BOXES */

html[data-theme="sakura"] .card-icon,
html[data-theme="sakura"] .today-icon.blue {
  background: #fce7f3 !important;
  color: #db2777 !important;
}

html[data-theme="sakura"] .card-icon.purple {
  background: #f3e8ff !important;
  color: #a855f7 !important;
}


/* PROGRESS BARS */

html[data-theme="sakura"] .progress-bar,
html[data-theme="sakura"] .skill-bar,
html[data-theme="sakura"] .mini-progress,
html[data-theme="sakura"] .achievement-progress-bar {
  background: #fce7f3 !important;
}

html[data-theme="sakura"] .progress-fill,
html[data-theme="sakura"] .achievement-progress-fill {
  background: linear-gradient(
    90deg,
    #db2777,
    #f9a8d4
  ) !important;
}


/* CUSTOMIZATION SELECTED */

html[data-theme="sakura"] .customization-item.selected {
  background: #fff0f5 !important;
  border-color: #db2777 !important;

  box-shadow:
    0 0 0 2px
    rgba(219,39,119,.10) !important;
}


/* LEADERBOARD PREVIEW */

html[data-theme="sakura"] .preview-xp {
  color: #db2777 !important;
}


/* PRIVACY */

html[data-theme="sakura"] .privacy-box {
  background: linear-gradient(
    145deg,
    #fff0f5,
    #ffffff
  ) !important;

  border-color: #f9a8d4 !important;
}

html[data-theme="sakura"] .privacy-box h3 {
  color: #be185d !important;
}


/* HEADER */

html[data-theme="sakura"] .page-header {
  background:
    radial-gradient(
      circle at 90% 15%,
      rgba(255,255,255,.22),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #9d174d,
      #db2777 55%,
      #f9a8d4
    ) !important;
}


/* LOADING */

html[data-theme="sakura"] #loadingScreen {
  background: #fff5f8 !important;
  color: #db2777 !important;
}

/* =========================================================
   DARK SAKURA THEME
========================================================= */

html[data-theme="dark-sakura"] {
  color-scheme: dark;

  --theme-page: #160d14;
  --theme-surface: #23131f;
  --theme-surface-2: #2d1827;
  --theme-surface-3: #3a2033;

  --theme-text: #fff7fb;
  --theme-muted: #d2a9bd;
  --theme-border: #5b314b;

  --theme-primary: #ec4899;
  --theme-primary-light: #f9a8d4;
  --theme-primary-dark: #be185d;
}


/* PAGE */

html[data-theme="dark-sakura"] body {
  background:
    radial-gradient(
      circle at 85% 0%,
      rgba(236,72,153,.20) 0,
      transparent 28%
    ),
    #160d14 !important;

  color: #fff7fb !important;
}


/* SIDEBAR */

html[data-theme="dark-sakura"] .sidebar,
html[data-theme="dark-sakura"] nav,
html[data-theme="dark-sakura"] aside {
  background: #1b1018 !important;
  border-color: #5b314b !important;
  color: #fff7fb !important;
}


/* BRAND */

html[data-theme="dark-sakura"] .brand-icon {
  background: linear-gradient(
    135deg,
    #be185d,
    #f472b6
  ) !important;
}

html[data-theme="dark-sakura"] .brand-text strong {
  color: #fff1f7 !important;
}

html[data-theme="dark-sakura"] .brand-text span {
  color: #f9a8d4 !important;
}


/* NAVIGATION */

html[data-theme="dark-sakura"] .side-link {
  color: #e9c7d8 !important;
}

html[data-theme="dark-sakura"] .side-link:hover {
  background: #321827 !important;
  color: #f9a8d4 !important;
}

html[data-theme="dark-sakura"] .side-link.active {
  background: linear-gradient(
    135deg,
    #be185d,
    #ec4899
  ) !important;

  color: white !important;
}


/* BACK BUTTON */

html[data-theme="dark-sakura"] .back-to-site,
html[data-theme="dark-sakura"] .dashboard-return {
  background: #2d1827 !important;
  border-color: #7a3d62 !important;
  color: #f9a8d4 !important;
}


/* CARDS */

html[data-theme="dark-sakura"] .card,
html[data-theme="dark-sakura"] .panel,
html[data-theme="dark-sakura"] .box,
html[data-theme="dark-sakura"] .top-stat,
html[data-theme="dark-sakura"] .continue-item,
html[data-theme="dark-sakura"] .today-card,
html[data-theme="dark-sakura"] .adaptive-card,
html[data-theme="dark-sakura"] .quick-item,
html[data-theme="dark-sakura"] .right-card,
html[data-theme="dark-sakura"] .settings-section,
html[data-theme="dark-sakura"] .dashboard-settings-card,
html[data-theme="dark-sakura"] .customization-item,
html[data-theme="dark-sakura"] .leaderboard-preview,
html[data-theme="dark-sakura"] .shop-card,
html[data-theme="dark-sakura"] .category-card {
  background: #23131f !important;
  border-color: #5b314b !important;
  color: #fff7fb !important;
}


/* INNER BOXES */

html[data-theme="dark-sakura"] .customization-preview,
html[data-theme="dark-sakura"] .customization-empty,
html[data-theme="dark-sakura"] .coming-soon-setting,
html[data-theme="dark-sakura"] .rhythm-display {
  background: #2d1827 !important;
  border-color: #5b314b !important;
  color: #fff7fb !important;
}


/* HEADINGS */

html[data-theme="dark-sakura"] h1,
html[data-theme="dark-sakura"] h2,
html[data-theme="dark-sakura"] h3,
html[data-theme="dark-sakura"] h4,
html[data-theme="dark-sakura"] strong,
html[data-theme="dark-sakura"] label {
  color: #fff7fb !important;
}


/* MUTED TEXT */

html[data-theme="dark-sakura"] p,
html[data-theme="dark-sakura"] small,
html[data-theme="dark-sakura"] .description,
html[data-theme="dark-sakura"] .field-help,
html[data-theme="dark-sakura"] .subtitle,
html[data-theme="dark-sakura"] .muted {
  color: #d2a9bd !important;
}


/* LINKS */

html[data-theme="dark-sakura"] a {
  color: #f9a8d4;
}

html[data-theme="dark-sakura"] a:hover {
  color: #fbcfe8;
}


/* BUTTONS */

html[data-theme="dark-sakura"] .button,
html[data-theme="dark-sakura"] .primary-button,
html[data-theme="dark-sakura"] .main-button,
html[data-theme="dark-sakura"] .small-button,
html[data-theme="dark-sakura"] .adaptive-button,
html[data-theme="dark-sakura"] .btn-primary {
  background: linear-gradient(
    135deg,
    #be185d,
    #ec4899
  ) !important;

  color: white !important;
}


/* SECONDARY BUTTONS */

html[data-theme="dark-sakura"] .secondary-button {
  background: #3a2033 !important;
  color: #f9a8d4 !important;
}


/* INPUTS */

html[data-theme="dark-sakura"] input,
html[data-theme="dark-sakura"] textarea,
html[data-theme="dark-sakura"] select {
  background: #2d1827 !important;
  border-color: #6b3655 !important;
  color: #fff7fb !important;
}

html[data-theme="dark-sakura"] input:focus,
html[data-theme="dark-sakura"] textarea:focus,
html[data-theme="dark-sakura"] select:focus {
  background: #35202e !important;
  border-color: #ec4899 !important;

  box-shadow:
    0 0 0 3px
    rgba(236,72,153,.14) !important;
}


/* ICON BOXES */

html[data-theme="dark-sakura"] .card-icon,
html[data-theme="dark-sakura"] .today-icon.blue {
  background: #3a2033 !important;
  color: #f9a8d4 !important;
}


/* PROGRESS */

html[data-theme="dark-sakura"] .progress-bar,
html[data-theme="dark-sakura"] .skill-bar,
html[data-theme="dark-sakura"] .mini-progress,
html[data-theme="dark-sakura"] .achievement-progress-bar {
  background: #4a293d !important;
}

html[data-theme="dark-sakura"] .progress-fill,
html[data-theme="dark-sakura"] .achievement-progress-fill {
  background: linear-gradient(
    90deg,
    #be185d,
    #f472b6
  ) !important;
}


/* HEADER */

html[data-theme="dark-sakura"] .page-header {
  background:
    radial-gradient(
      circle at 90% 15%,
      rgba(255,255,255,.14),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #5b1238,
      #be185d 55%,
      #f472b6
    ) !important;
}


/* SELECTED CUSTOMIZATION */

html[data-theme="dark-sakura"] .customization-item.selected {
  background: #321827 !important;
  border-color: #ec4899 !important;

  box-shadow:
    0 0 0 2px
    rgba(236,72,153,.12) !important;
}


/* LOADING */

html[data-theme="dark-sakura"] #loadingScreen {
  background: #160d14 !important;
  color: #f9a8d4 !important;
}

/* =========================================================
   DARK SAKURA — FULL SITE WHITE BOX FIX
   Paste/keep this at the VERY BOTTOM of theme.css
========================================================= */

/* GLOBAL SURFACES / CONTAINERS */
html[data-theme="dark-sakura"] main,
html[data-theme="dark-sakura"] .main,
html[data-theme="dark-sakura"] .main-content,
html[data-theme="dark-sakura"] .content,
html[data-theme="dark-sakura"] .page,
html[data-theme="dark-sakura"] .page-content,
html[data-theme="dark-sakura"] .dashboard,
html[data-theme="dark-sakura"] .dashboard-main,
html[data-theme="dark-sakura"] .right-panel {
  background-color: transparent !important;
  color: #fff7fb !important;
}

html[data-theme="dark-sakura"] .right-panel {
  background: #140c12 !important;
  border-color: #5b314b !important;
}

/* COMMON WHITE BOXES ACROSS THE SITE */
html[data-theme="dark-sakura"] .card,
html[data-theme="dark-sakura"] .panel,
html[data-theme="dark-sakura"] .box,
html[data-theme="dark-sakura"] .section-card,
html[data-theme="dark-sakura"] .stat-card,
html[data-theme="dark-sakura"] .top-stat,
html[data-theme="dark-sakura"] .quick-item,
html[data-theme="dark-sakura"] .continue-item,
html[data-theme="dark-sakura"] .today-card,
html[data-theme="dark-sakura"] .adaptive-card,
html[data-theme="dark-sakura"] .achievement-item,
html[data-theme="dark-sakura"] .mini-profile,
html[data-theme="dark-sakura"] .journal-strip,
html[data-theme="dark-sakura"] .settings-section,
html[data-theme="dark-sakura"] .customization-section,
html[data-theme="dark-sakura"] .leaderboard-preview,
html[data-theme="dark-sakura"] .shop-card,
html[data-theme="dark-sakura"] .category-card,
html[data-theme="dark-sakura"] .balance-card,
html[data-theme="dark-sakura"] .section-header,
html[data-theme="dark-sakura"] .toolbar,
html[data-theme="dark-sakura"] .podium-card,
html[data-theme="dark-sakura"] .leaderboard-card,
html[data-theme="dark-sakura"] .report-card,
html[data-theme="dark-sakura"] .equipped-card,
html[data-theme="dark-sakura"] .controls-card,
html[data-theme="dark-sakura"] .award-card,
html[data-theme="dark-sakura"] .journal-note,
html[data-theme="dark-sakura"] .modal-card,
html[data-theme="dark-sakura"] .day-card,
html[data-theme="dark-sakura"] .game-card,
html[data-theme="dark-sakura"] .favorite-card,
html[data-theme="dark-sakura"] .collection-card,
html[data-theme="dark-sakura"] .collection-empty,
html[data-theme="dark-sakura"] .collection-modal,
html[data-theme="dark-sakura"] .score-choice,
html[data-theme="dark-sakura"] .collection-view-score,
html[data-theme="dark-sakura"] .accuracy-box,
html[data-theme="dark-sakura"] .why-box,
html[data-theme="dark-sakura"] .signal-card,
html[data-theme="dark-sakura"] .how-card,
html[data-theme="dark-sakura"] .plan-card {
  background: #23131f !important;
  border-color: #5b314b !important;
  color: #fff7fb !important;
}

/* INLINE / SMALL SURFACES */
html[data-theme="dark-sakura"] .dashboard-return,
html[data-theme="dark-sakura"] .choice-button,
html[data-theme="dark-sakura"] .answer-button,
html[data-theme="dark-sakura"] .check-option,
html[data-theme="dark-sakura"] .filter-button,
html[data-theme="dark-sakura"] .sort-button,
html[data-theme="dark-sakura"] .secondary-button,
html[data-theme="dark-sakura"] .unequip-button,
html[data-theme="dark-sakura"] .close-button,
html[data-theme="dark-sakura"] .modal-close,
html[data-theme="dark-sakura"] .report-cancel,
html[data-theme="dark-sakura"] .previous-update-button,
html[data-theme="dark-sakura"] .previous-update,
html[data-theme="dark-sakura"] .previous-update-content,
html[data-theme="dark-sakura"] .current-update-card,
html[data-theme="dark-sakura"] .update-modal,
html[data-theme="dark-sakura"] .update-modal-body,
html[data-theme="dark-sakura"] .update-modal-header,
html[data-theme="dark-sakura"] .update-pill,
html[data-theme="dark-sakura"] .privacy-note,
html[data-theme="dark-sakura"] .report-target,
html[data-theme="dark-sakura"] .coming-soon,
html[data-theme="dark-sakura"] .coming-soon-label,
html[data-theme="dark-sakura"] .category-badge,
html[data-theme="dark-sakura"] .status-pill,
html[data-theme="dark-sakura"] .section-count,
html[data-theme="dark-sakura"] .me-pill,
html[data-theme="dark-sakura"] .analysis-label,
html[data-theme="dark-sakura"] .day-focus,
html[data-theme="dark-sakura"] .tag {
  background: #2d1827 !important;
  border-color: #6b3655 !important;
  color: #f0c6d9 !important;
}

/* HOVER STATES */
html[data-theme="dark-sakura"] .dashboard-return:hover,
html[data-theme="dark-sakura"] .choice-button:hover,
html[data-theme="dark-sakura"] .answer-button:hover,
html[data-theme="dark-sakura"] .filter-button:hover,
html[data-theme="dark-sakura"] .sort-button:hover,
html[data-theme="dark-sakura"] .secondary-button:hover,
html[data-theme="dark-sakura"] .quick-item:hover,
html[data-theme="dark-sakura"] .shop-card:hover,
html[data-theme="dark-sakura"] .category-card:hover,
html[data-theme="dark-sakura"] .previous-update-button:hover {
  background: #3a2033 !important;
  border-color: #ec4899 !important;
  color: #f9a8d4 !important;
}

/* ACTIVE / SELECTED */
html[data-theme="dark-sakura"] .choice-button.active,
html[data-theme="dark-sakura"] .filter-button.active,
html[data-theme="dark-sakura"] .sort-button.active,
html[data-theme="dark-sakura"] .achievement-filter.active,
html[data-theme="dark-sakura"] .side-link.active {
  background: linear-gradient(135deg,#be185d,#ec4899) !important;
  border-color: #ec4899 !important;
  color: #ffffff !important;
}

/* SETTINGS PAGE */
html[data-theme="dark-sakura"] .settings-grid .card,
html[data-theme="dark-sakura"] .dashboard-settings-card {
  background: #23131f !important;
  border-color: #5b314b !important;
}

html[data-theme="dark-sakura"] .dashboard-settings-card {
  background: linear-gradient(145deg,#23131f,#2a1624) !important;
}

html[data-theme="dark-sakura"] .customization-section {
  background: transparent !important;
  border-color: #5b314b !important;
}

html[data-theme="dark-sakura"] .customization-item {
  background: #2d1827 !important;
  border-color: #6b3655 !important;
  color: #fff7fb !important;
}

html[data-theme="dark-sakura"] .customization-item:hover {
  background: #382031 !important;
  border-color: #ec4899 !important;
}

html[data-theme="dark-sakura"] .customization-item.selected {
  background: #3a2033 !important;
  border-color: #ec4899 !important;
}

html[data-theme="dark-sakura"] .customization-preview,
html[data-theme="dark-sakura"] .customization-empty,
html[data-theme="dark-sakura"] .coming-soon-setting {
  background: #1b1018 !important;
  border-color: #5b314b !important;
}

html[data-theme="dark-sakura"] .privacy-box {
  background: linear-gradient(145deg,#2d1827,#23131f) !important;
  border-color: #7a3d62 !important;
}

html[data-theme="dark-sakura"] .privacy-box h3 {
  color: #f9a8d4 !important;
}

html[data-theme="dark-sakura"] .danger-zone,
html[data-theme="dark-sakura"] .admin-card {
  background: linear-gradient(145deg,#2a1118,#201016) !important;
  border-color: #7f1d1d !important;
}

/* LEADERBOARD */
html[data-theme="dark-sakura"] .join-leaderboard {
  background: linear-gradient(135deg,#2d1827,#31182c) !important;
  border-color: #6b3655 !important;
}

html[data-theme="dark-sakura"] .leaderboard-table {
  background: #23131f !important;
}

html[data-theme="dark-sakura"] .leaderboard-table th {
  background: #2d1827 !important;
  color: #d2a9bd !important;
  border-color: #5b314b !important;
}

html[data-theme="dark-sakura"] .leaderboard-table td {
  background: #23131f !important;
  color: #f0dbe5 !important;
  border-color: #5b314b !important;
}

html[data-theme="dark-sakura"] .leaderboard-table tbody tr:hover td {
  background: #2d1827 !important;
}

html[data-theme="dark-sakura"] .leaderboard-table tbody tr.is-me td {
  background: #351a2d !important;
}

/* PODIUM */
html[data-theme="dark-sakura"] .podium-card.first,
html[data-theme="dark-sakura"] .podium-card.second,
html[data-theme="dark-sakura"] .podium-card.third {
  background: #23131f !important;
}

/* RHYTHM */
html[data-theme="dark-sakura"] .rhythm-display {
  background: linear-gradient(145deg,#23131f,#2b1726) !important;
  border-color: #6b3655 !important;
}

html[data-theme="dark-sakura"] .rhythm-text,
html[data-theme="dark-sakura"] .rhythm-operator {
  color: #f9a8d4 !important;
}

html[data-theme="dark-sakura"] .question-progress {
  background: #4a293d !important;
}

/* PRACTICE JOURNAL */
html[data-theme="dark-sakura"] .journal-note {
  background: linear-gradient(145deg,#23131f,#241721) !important;
  border-color: #5b314b !important;
}

html[data-theme="dark-sakura"] .journal-note:hover {
  background: #2d1827 !important;
  border-color: #ec4899 !important;
}

html[data-theme="dark-sakura"] .empty-state {
  background: #23131f !important;
  border-color: #5b314b !important;
  color: #d2a9bd !important;
}

/* PRACTICE PLANNER */
html[data-theme="dark-sakura"] .audition-box,
html[data-theme="dark-sakura"] .weekly-goal {
  background: linear-gradient(135deg,#2b1726,#23131f) !important;
  border-color: #6b3655 !important;
}

html[data-theme="dark-sakura"] .practice-block {
  border-color: #5b314b !important;
}

/* MUSIC GAMES */
html[data-theme="dark-sakura"] .note-card,
html[data-theme="dark-sakura"] .rhythm-card,
html[data-theme="dark-sakura"] .interval-card,
html[data-theme="dark-sakura"] .ear-card,
html[data-theme="dark-sakura"] .harmony-card,
html[data-theme="dark-sakura"] .key-card,
html[data-theme="dark-sakura"] .info-box {
  background: linear-gradient(145deg,#2d1827,#23131f) !important;
  border-color: #5b314b !important;
}

/* FAVORITES */
html[data-theme="dark-sakura"] .favorite-card img,
html[data-theme="dark-sakura"] .score-choice img {
  background: #2d1827 !important;
}

html[data-theme="dark-sakura"] .collection-icon {
  background: #3a2033 !important;
  color: #f9a8d4 !important;
}

/* ADAPTIVE */
html[data-theme="dark-sakura"] .accuracy-box,
html[data-theme="dark-sakura"] .signal-card {
  background: #2d1827 !important;
}

html[data-theme="dark-sakura"] .why-box,
html[data-theme="dark-sakura"] .how-card,
html[data-theme="dark-sakura"] .plan-card {
  background: linear-gradient(145deg,#2d1827,#23131f) !important;
}

html[data-theme="dark-sakura"] .skill-mini-bar {
  background: #4a293d !important;
}

/* DASHBOARD */
html[data-theme="dark-sakura"] .mini-profile {
  background: linear-gradient(145deg,#281522,#23131f) !important;
}

html[data-theme="dark-sakura"] .continue-item,
html[data-theme="dark-sakura"] .top-stat,
html[data-theme="dark-sakura"] .quick-item {
  background: #2d1827 !important;
}

html[data-theme="dark-sakura"] .journal-strip {
  background: linear-gradient(135deg,#271620,#23131f) !important;
  border-color: #6b3655 !important;
}

html[data-theme="dark-sakura"] .achievement-item {
  background: #2d1827 !important;
  border-color: #6b3655 !important;
}

html[data-theme="dark-sakura"] .achievement-item.unlocked {
  background: linear-gradient(145deg,#2d1827,#351a2d) !important;
  border-color: #9d174d !important;
}

html[data-theme="dark-sakura"] .side-stat.orange,
html[data-theme="dark-sakura"] .side-stat.yellow {
  background: #2d1827 !important;
}

/* UPDATE MODAL */
html[data-theme="dark-sakura"] .update-modal {
  background: #23131f !important;
  border-color: #6b3655 !important;
}

html[data-theme="dark-sakura"] .update-modal-header,
html[data-theme="dark-sakura"] .current-update-card {
  background: linear-gradient(145deg,#2d1827,#23131f) !important;
  border-color: #6b3655 !important;
}

html[data-theme="dark-sakura"] .update-modal-body {
  background: #23131f !important;
}

/* TEXT CLEANUP */
html[data-theme="dark-sakura"] .section-heading h2,
html[data-theme="dark-sakura"] .continue-content h3,
html[data-theme="dark-sakura"] .adaptive-info h3,
html[data-theme="dark-sakura"] .today-card strong,
html[data-theme="dark-sakura"] .mini-profile-title,
html[data-theme="dark-sakura"] .mini-profile-name,
html[data-theme="dark-sakura"] .preview-name strong,
html[data-theme="dark-sakura"] .player-text strong,
html[data-theme="dark-sakura"] .leaderboard-heading h2,
html[data-theme="dark-sakura"] .award-info h3,
html[data-theme="dark-sakura"] .collection-card h3,
html[data-theme="dark-sakura"] .modal-top h2,
html[data-theme="dark-sakura"] .plan-row strong,
html[data-theme="dark-sakura"] .game-card h3,
html[data-theme="dark-sakura"] .empty-state h3 {
  color: #fff7fb !important;
}

html[data-theme="dark-sakura"] .section-heading span,
html[data-theme="dark-sakura"] .continue-content p,
html[data-theme="dark-sakura"] .adaptive-info p,
html[data-theme="dark-sakura"] .today-card span,
html[data-theme="dark-sakura"] .mini-profile-details,
html[data-theme="dark-sakura"] .preview-name span,
html[data-theme="dark-sakura"] .player-text span,
html[data-theme="dark-sakura"] .award-description,
html[data-theme="dark-sakura"] .award-category,
html[data-theme="dark-sakura"] .plan-row span,
html[data-theme="dark-sakura"] .game-card p {
  color: #d2a9bd !important;
}

/* INLINE WHITE DASHBOARD BOX KILLER */
html[data-theme="dark-sakura"] .right-card > div[style*="background:#f8fafc"],
html[data-theme="dark-sakura"] [style*="background: white"],
html[data-theme="dark-sakura"] [style*="background:white"],
html[data-theme="dark-sakura"] [style*="background:#ffffff"],
html[data-theme="dark-sakura"] [style*="background: #ffffff"],
html[data-theme="dark-sakura"] [style*="background:#fff"],
html[data-theme="dark-sakura"] [style*="background: #fff"] {
  background: #2d1827 !important;
  border-color: #6b3655 !important;
}

/* LOADING */
html[data-theme="dark-sakura"] #loadingScreen {
  background: #160d14 !important;
  color: #f9a8d4 !important;
}

/* SCROLLBAR */
html[data-theme="dark-sakura"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html[data-theme="dark-sakura"] ::-webkit-scrollbar-track {
  background: #160d14;
}

html[data-theme="dark-sakura"] ::-webkit-scrollbar-thumb {
  background: #6b3655;
  border-radius: 999px;
}

html[data-theme="dark-sakura"] ::-webkit-scrollbar-thumb:hover {
  background: #8a456d;
}


/* =========================================================
   OPENSCORES THEME FINAL OVERRIDES
   DARK SAKURA + FOREST GREEN
   Keep this block at the VERY BOTTOM of theme.css
========================================================= */


/* =========================================================
   DARK SAKURA — FINAL COLOR CORRECTION
========================================================= */

html[data-theme="dark-sakura"],
html[data-theme="theme_dark_sakura"] {
  color-scheme: dark;

  --theme-page: #120b11;
  --theme-surface: #1c1019;
  --theme-surface-2: #281522;
  --theme-surface-3: #351b2c;

  --theme-text: #fff7fb;
  --theme-muted: #cfa8bb;
  --theme-border: #583047;

  --theme-primary: #e83e8c;
  --theme-primary-light: #f49ac2;
  --theme-primary-dark: #a91457;
}

html[data-theme="dark-sakura"] body,
html[data-theme="theme_dark_sakura"] body {
  background:
    radial-gradient(circle at 82% 0%, rgba(232,62,140,.20) 0, transparent 28%),
    radial-gradient(circle at 5% 100%, rgba(116,26,73,.15) 0, transparent 25%),
    #120b11 !important;
  color: #fff7fb !important;
}

html[data-theme="dark-sakura"] .sidebar,
html[data-theme="dark-sakura"] nav,
html[data-theme="dark-sakura"] aside,
html[data-theme="theme_dark_sakura"] .sidebar,
html[data-theme="theme_dark_sakura"] nav,
html[data-theme="theme_dark_sakura"] aside {
  background: #180d15 !important;
  border-color: #583047 !important;
}

html[data-theme="dark-sakura"] .card,
html[data-theme="dark-sakura"] .panel,
html[data-theme="dark-sakura"] .box,
html[data-theme="dark-sakura"] .top-stat,
html[data-theme="dark-sakura"] .continue-item,
html[data-theme="dark-sakura"] .today-card,
html[data-theme="dark-sakura"] .adaptive-card,
html[data-theme="dark-sakura"] .quick-item,
html[data-theme="dark-sakura"] .right-card,
html[data-theme="dark-sakura"] .mini-profile,
html[data-theme="dark-sakura"] .settings-section,
html[data-theme="dark-sakura"] .dashboard-settings-card,
html[data-theme="dark-sakura"] .customization-item,
html[data-theme="dark-sakura"] .leaderboard-preview,
html[data-theme="dark-sakura"] .balance-card,
html[data-theme="dark-sakura"] .section-header,
html[data-theme="dark-sakura"] .shop-card,
html[data-theme="dark-sakura"] .category-card,
html[data-theme="dark-sakura"] .toolbar,
html[data-theme="dark-sakura"] .podium-card,
html[data-theme="dark-sakura"] .leaderboard-card,
html[data-theme="dark-sakura"] .equipped-card,
html[data-theme="dark-sakura"] .controls-card,
html[data-theme="dark-sakura"] .award-card,
html[data-theme="dark-sakura"] .journal-note,
html[data-theme="dark-sakura"] .modal-card,
html[data-theme="dark-sakura"] .day-card,
html[data-theme="dark-sakura"] .game-card,
html[data-theme="dark-sakura"] .favorite-card,
html[data-theme="dark-sakura"] .collection-card,
html[data-theme="dark-sakura"] .collection-empty,
html[data-theme="dark-sakura"] .collection-modal,
html[data-theme="dark-sakura"] .score-choice,
html[data-theme="dark-sakura"] .collection-view-score,
html[data-theme="dark-sakura"] .accuracy-box,
html[data-theme="dark-sakura"] .why-box,
html[data-theme="dark-sakura"] .signal-card,
html[data-theme="dark-sakura"] .how-card,
html[data-theme="dark-sakura"] .plan-card,
html[data-theme="theme_dark_sakura"] .card,
html[data-theme="theme_dark_sakura"] .panel,
html[data-theme="theme_dark_sakura"] .box,
html[data-theme="theme_dark_sakura"] .top-stat,
html[data-theme="theme_dark_sakura"] .continue-item,
html[data-theme="theme_dark_sakura"] .today-card,
html[data-theme="theme_dark_sakura"] .adaptive-card,
html[data-theme="theme_dark_sakura"] .quick-item,
html[data-theme="theme_dark_sakura"] .right-card,
html[data-theme="theme_dark_sakura"] .mini-profile,
html[data-theme="theme_dark_sakura"] .settings-section,
html[data-theme="theme_dark_sakura"] .dashboard-settings-card,
html[data-theme="theme_dark_sakura"] .customization-item,
html[data-theme="theme_dark_sakura"] .leaderboard-preview,
html[data-theme="theme_dark_sakura"] .balance-card,
html[data-theme="theme_dark_sakura"] .section-header,
html[data-theme="theme_dark_sakura"] .shop-card,
html[data-theme="theme_dark_sakura"] .category-card {
  background: #1c1019 !important;
  border-color: #583047 !important;
  color: #fff7fb !important;
}

html[data-theme="dark-sakura"] .side-link.active,
html[data-theme="theme_dark_sakura"] .side-link.active {
  background: linear-gradient(135deg,#a91457,#e83e8c) !important;
  color: white !important;
}

html[data-theme="dark-sakura"] .page-header,
html[data-theme="theme_dark_sakura"] .page-header {
  background:
    radial-gradient(circle at 90% 15%,rgba(255,255,255,.12),transparent 30%),
    linear-gradient(135deg,#4b1532,#a91457 55%,#e83e8c) !important;
}

html[data-theme="dark-sakura"] .button,
html[data-theme="dark-sakura"] .primary-button,
html[data-theme="dark-sakura"] .small-button,
html[data-theme="dark-sakura"] .adaptive-button,
html[data-theme="theme_dark_sakura"] .button,
html[data-theme="theme_dark_sakura"] .primary-button,
html[data-theme="theme_dark_sakura"] .small-button,
html[data-theme="theme_dark_sakura"] .adaptive-button {
  background: linear-gradient(135deg,#a91457,#e83e8c) !important;
  color: white !important;
}

html[data-theme="dark-sakura"] input,
html[data-theme="dark-sakura"] textarea,
html[data-theme="dark-sakura"] select,
html[data-theme="theme_dark_sakura"] input,
html[data-theme="theme_dark_sakura"] textarea,
html[data-theme="theme_dark_sakura"] select {
  background: #281522 !important;
  border-color: #673651 !important;
  color: #fff7fb !important;
}

/* =========================================================
   OPENSCORES GLOBAL THEME SYSTEM
========================================================= */


/* DEFAULT */

html[data-theme="default"] {
  color-scheme: light;
}


/* =========================================================
   MIDNIGHT / DARK MODE
========================================================= */

html[data-theme="midnight"] {
  color-scheme: dark;

  --theme-page: #07111f;
  --theme-surface: #0f1b2d;
  --theme-surface-2: #142238;
  --theme-surface-3: #1b2b44;

  --theme-text: #f8fafc;
  --theme-muted: #94a3b8;
  --theme-border: #26364d;

  --theme-primary: #2563eb;
  --theme-primary-light: #60a5fa;
  --theme-primary-dark: #1d4ed8;
}


/* PAGE */

html[data-theme="midnight"] body {
  background: #07111f !important;
  color: #f8fafc !important;
}


/* MAIN CONTENT */

html[data-theme="midnight"] main,
html[data-theme="midnight"] .main,
html[data-theme="midnight"] .main-content,
html[data-theme="midnight"] .content,
html[data-theme="midnight"] .page,
html[data-theme="midnight"] .page-content,
html[data-theme="midnight"] .dashboard,
html[data-theme="midnight"] .dashboard-main {
  color: #f8fafc !important;
}


/* NAVIGATION */

html[data-theme="midnight"] nav,
html[data-theme="midnight"] .navbar,
html[data-theme="midnight"] .sidebar,
html[data-theme="midnight"] .side-bar,
html[data-theme="midnight"] aside {
  background: #0a1525 !important;
  border-color: #26364d !important;
  color: #f8fafc !important;
}


/* CARDS */

html[data-theme="midnight"] .card,
html[data-theme="midnight"] .panel,
html[data-theme="midnight"] .box,
html[data-theme="midnight"] .section-card,
html[data-theme="midnight"] .stat-card,
html[data-theme="midnight"] .top-stat,
html[data-theme="midnight"] .quick-item,
html[data-theme="midnight"] .continue-item,
html[data-theme="midnight"] .achievement-item,
html[data-theme="midnight"] .mini-profile,
html[data-theme="midnight"] .journal-strip,
html[data-theme="midnight"] .settings-section,
html[data-theme="midnight"] .customization-section {
  background: #0f1b2d !important;
  border-color: #26364d !important;
  color: #f8fafc !important;
}


/* TEXT */

html[data-theme="midnight"] h1,
html[data-theme="midnight"] h2,
html[data-theme="midnight"] h3,
html[data-theme="midnight"] h4,
html[data-theme="midnight"] h5,
html[data-theme="midnight"] h6,
html[data-theme="midnight"] strong,
html[data-theme="midnight"] label {
  color: #f8fafc !important;
}


html[data-theme="midnight"] p,
html[data-theme="midnight"] small,
html[data-theme="midnight"] span,
html[data-theme="midnight"] .muted,
html[data-theme="midnight"] .subtitle,
html[data-theme="midnight"] .description {
  color: #94a3b8;
}


/* LINKS */

html[data-theme="midnight"] a {
  color: #60a5fa;
}

html[data-theme="midnight"] a:hover {
  color: #93c5fd;
}


/* BUTTONS */

html[data-theme="midnight"] .button,
html[data-theme="midnight"] .btn,
html[data-theme="midnight"] .primary-button,
html[data-theme="midnight"] .btn-primary,
html[data-theme="midnight"] .small-button,
html[data-theme="midnight"] .adaptive-button {
  background: #2563eb !important;
  color: white !important;
  border-color: #2563eb !important;
}

html[data-theme="midnight"] .button:hover,
html[data-theme="midnight"] .btn:hover,
html[data-theme="midnight"] .primary-button:hover,
html[data-theme="midnight"] .btn-primary:hover,
html[data-theme="midnight"] .small-button:hover,
html[data-theme="midnight"] .adaptive-button:hover {
  background: #1d4ed8 !important;
}


/* INPUTS */

html[data-theme="midnight"] input,
html[data-theme="midnight"] textarea,
html[data-theme="midnight"] select {
  background: #142238 !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

html[data-theme="midnight"] input::placeholder,
html[data-theme="midnight"] textarea::placeholder {
  color: #64748b !important;
}


/* TABLES */

html[data-theme="midnight"] table {
  color: #f8fafc !important;
}

html[data-theme="midnight"] th {
  background: #142238 !important;
  color: #f8fafc !important;
}

html[data-theme="midnight"] td {
  border-color: #26364d !important;
}


/* MODALS */

html[data-theme="midnight"] .modal,
html[data-theme="midnight"] .modal-content,
html[data-theme="midnight"] .popup,
html[data-theme="midnight"] .update-modal {
  background: #0f1b2d !important;
  color: #f8fafc !important;
  border-color: #26364d !important;
}


/* PROGRESS BARS */

html[data-theme="midnight"] .progress-bar,
html[data-theme="midnight"] .skill-bar,
html[data-theme="midnight"] .mini-progress,
html[data-theme="midnight"] .achievement-progress-bar {
  background: #26364d !important;
}

html[data-theme="midnight"] .progress-fill,
html[data-theme="midnight"] .skill-fill,
html[data-theme="midnight"] .mini-progress-fill,
html[data-theme="midnight"] .achievement-progress-fill {
  background: linear-gradient(
    90deg,
    #2563eb,
    #60a5fa
  ) !important;
}


/* ACTIVE SIDEBAR ITEM */

html[data-theme="midnight"] .side-link.active {
  background: linear-gradient(
    135deg,
    #1d4ed8,
    #2563eb
  ) !important;

  color: rgb(51, 63, 121) !important;
}


/* SIDEBAR LINKS */

html[data-theme="midnight"] .side-link {
  color: #cbd5e1 !important;
}

html[data-theme="midnight"] .side-link:hover {
  background: #142238 !important;
  color: #60a5fa !important;
}


/* SCROLLBAR */

html[data-theme="midnight"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html[data-theme="midnight"] ::-webkit-scrollbar-track {
  background: #07111f;
}

html[data-theme="midnight"] ::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 999px;
}

html[data-theme="midnight"] ::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* =========================================================
   MIDNIGHT MODE - SHOP / CUSTOMIZATION FIX
========================================================= */

html[data-theme="midnight"] .balance-card,
html[data-theme="midnight"] .section-header,
html[data-theme="midnight"] .shop-card,
html[data-theme="midnight"] .back-shop-button,
html[data-theme="midnight"] .visual {
  background: #0f1b2d !important;
  border-color: #26364d !important;
  color: #f8fafc !important;
}


/* SHOP CARD TITLES */

html[data-theme="midnight"] .shop-card h3,
html[data-theme="midnight"] .section-header h2,
html[data-theme="midnight"] .notes-amount strong {
  color: #f8fafc !important;
}


/* SHOP DESCRIPTION TEXT */

html[data-theme="midnight"] .shop-card p,
html[data-theme="midnight"] .section-header p,
html[data-theme="midnight"] .balance-note,
html[data-theme="midnight"] .balance-label {
  color: #94a3b8 !important;
}


/* EMPTY / COMING SOON PREVIEWS */

html[data-theme="midnight"] .shop-card .visual {
  background:
    linear-gradient(
      145deg,
      #142238,
      #101b2c
    ) !important;
}


/* KEEP IMAGE BACKGROUNDS NORMAL */

html[data-theme="midnight"] .background-preview {
  background: #142238 !important;
}


/* STATUS PILLS */

html[data-theme="midnight"] .status-pill {
  background: rgba(15,27,45,.92) !important;
  color: #cbd5e1 !important;
  border: 1px solid #334155;
}


/* SECTION COUNT PILLS */

html[data-theme="midnight"] .section-count {
  background: #142238 !important;
  color: #60a5fa !important;
}


/* BACK TO SHOP */

html[data-theme="midnight"] .back-shop-button {
  color: #60a5fa !important;
}

html[data-theme="midnight"] .back-shop-button:hover {
  background: #142238 !important;
}


/* OWNED CARDS */

html[data-theme="midnight"] .shop-card.owned {
  border-color: #2563eb !important;
}


/* SHOP CARD HOVER */

html[data-theme="midnight"] .shop-card:hover {
  border-color: #3b82f6 !important;

  box-shadow:
    0 13px 28px
    rgba(37,99,235,.14) !important;
}


/* PLUS ICONS / PLACEHOLDERS */

html[data-theme="midnight"] .visual .fa-plus {
  color: #64748b !important;
}

/* =========================================================
   DARK MODE — MAIN SHOP PAGE
========================================================= */

html[data-theme="midnight"] .balance-card,
html[data-theme="midnight"] .category-card {
  background: #0f1b2d !important;
  border-color: #26364d !important;
  color: #f8fafc !important;
}


/* CATEGORY TITLES */

html[data-theme="midnight"] .category-card h3 {
  color: #f8fafc !important;
}


/* CATEGORY DESCRIPTION */

html[data-theme="midnight"] .category-card p {
  color: #94a3b8 !important;
}


/* NOTES BALANCE */

html[data-theme="midnight"] .balance-row strong {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .balance-label,
html[data-theme="midnight"] .balance-message {
  color: #94a3b8 !important;
}


/* SHOP SECTION TITLE */

html[data-theme="midnight"] .section-heading h2 {
  color: #60a5fa !important;
}

html[data-theme="midnight"] .section-heading p {
  color: #94a3b8 !important;
}


/* CATEGORY VISUALS */

html[data-theme="midnight"] .titles .category-visual {
  background: linear-gradient(
    135deg,
    #1e1b4b,
    #312e81
  ) !important;
}

html[data-theme="midnight"] .powerups .category-visual {
  background: linear-gradient(
    135deg,
    #292211,
    #422006
  ) !important;
}

html[data-theme="midnight"] .customization .category-visual {
  background: linear-gradient(
    135deg,
    #0c2946,
    #172554
  ) !important;
}


/* LITTLE BADGES */

html[data-theme="midnight"] .category-badge {
  background: #142238 !important;
  color: #cbd5e1 !important;
}


/* CATEGORY COUNTS */

html[data-theme="midnight"] .category-count {
  color: #94a3b8 !important;
}


/* CARD HOVER */

html[data-theme="midnight"] .category-card:hover {
  background: #142238 !important;

  box-shadow:
    0 17px 38px
    rgba(0,0,0,.28) !important;
}
/* =========================================================
   MIDNIGHT — SETTINGS PAGE
========================================================= */


/* =========================================================
   MAIN SETTINGS CARDS
========================================================= */

html[data-theme="midnight"] .settings-grid .card,
html[data-theme="midnight"] .dashboard-settings-card {
  background: #0f1b2d !important;
  border-color: #26364d !important;
  color: #f8fafc !important;
}


/* =========================================================
   CARD TITLES + TEXT
========================================================= */

html[data-theme="midnight"] .card h2,
html[data-theme="midnight"] .card h3,
html[data-theme="midnight"] .card-heading h2,
html[data-theme="midnight"] .card-heading-left h2,
html[data-theme="midnight"] .toggle-info strong,
html[data-theme="midnight"] .customization-section-title strong,
html[data-theme="midnight"] .equipped-award-details strong {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .description,
html[data-theme="midnight"] .toggle-info span,
html[data-theme="midnight"] .customization-section-title span,
html[data-theme="midnight"] .equipped-award-details span,
html[data-theme="midnight"] .field-help {
  color: #94a3b8 !important;
}


/* =========================================================
   FORM LABELS
========================================================= */

html[data-theme="midnight"] label {
  color: #cbd5e1 !important;
}


/* =========================================================
   INPUTS + SELECTS
========================================================= */

html[data-theme="midnight"] input,
html[data-theme="midnight"] select {
  background: #142238 !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

html[data-theme="midnight"] input:focus,
html[data-theme="midnight"] select:focus {
  background: #17263c !important;
  border-color: #3b82f6 !important;
}

html[data-theme="midnight"] input:disabled {
  background: #0b1626 !important;
  color: #64748b !important;
}

html[data-theme="midnight"] input::placeholder {
  color: #64748b !important;
}


/* =========================================================
   TOGGLE DIVIDERS
========================================================= */

html[data-theme="midnight"] .toggle-row {
  border-color: #26364d !important;
}


/* =========================================================
   LEADERBOARD PREVIEW BOXES
========================================================= */

html[data-theme="midnight"] .leaderboard-preview {
  background: linear-gradient(
    145deg,
    #142238,
    #101d32
  ) !important;

  border-color: #26364d !important;
}

html[data-theme="midnight"] .preview-label,
html[data-theme="midnight"] .preview-rank,
html[data-theme="midnight"] .preview-name span,
html[data-theme="midnight"] .preview-badge-name,
html[data-theme="midnight"] .equipped-award-mini-name {
  color: #94a3b8 !important;
}

html[data-theme="midnight"] .preview-name strong {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .preview-xp {
  color: #60a5fa !important;
}


/* =========================================================
   DASHBOARD CUSTOMIZATION
========================================================= */

html[data-theme="midnight"] .dashboard-settings-card {
  background: linear-gradient(
    145deg,
    #0f1b2d,
    #101d30
  ) !important;

  border-color: #26364d !important;
}

html[data-theme="midnight"] .customization-section {
  background: transparent !important;
  border-color: #26364d !important;
}


/* =========================================================
   OWNED TITLE / BACKGROUND / THEME BOXES
========================================================= */

html[data-theme="midnight"] .customization-item {
  background: #142238 !important;
  border-color: #2b3c55 !important;
  color: #f8fafc !important;
}

html[data-theme="midnight"] .customization-item:hover {
  background: #182941 !important;
  border-color: #3b82f6 !important;
}

html[data-theme="midnight"] .customization-item.selected {
  background: #172a48 !important;
  border-color: #3b82f6 !important;

  box-shadow:
    0 0 0 2px
    rgba(59,130,246,.12) !important;
}

html[data-theme="midnight"] .customization-item strong {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .customization-item small {
  color: #94a3b8 !important;
}


/* =========================================================
   CUSTOMIZATION PREVIEW
========================================================= */

html[data-theme="midnight"] .customization-preview {
  background: #0b1626 !important;
}


/* =========================================================
   EMPTY CUSTOMIZATION BOXES
========================================================= */

html[data-theme="midnight"] .customization-empty {
  background: #0b1626 !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

html[data-theme="midnight"] .customization-empty i {
  color: #64748b !important;
}


/* =========================================================
   COMING SOON BOX
========================================================= */

html[data-theme="midnight"] .coming-soon-setting {
  background: #0b1626 !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

html[data-theme="midnight"] .coming-soon-setting strong {
  color: #f8fafc !important;
}


/* =========================================================
   PRIVACY BOX
========================================================= */

html[data-theme="midnight"] .privacy-box {
  background: linear-gradient(
    145deg,
    #0c2432,
    #102033
  ) !important;

  border-color: #164e63 !important;
}

html[data-theme="midnight"] .privacy-box h3 {
  color: #67e8f9 !important;
}

html[data-theme="midnight"] .privacy-box p {
  color: #a5b4c7 !important;
}


/* =========================================================
   SECONDARY BUTTONS
========================================================= */

html[data-theme="midnight"] .secondary-button {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}

html[data-theme="midnight"] .secondary-button:hover {
  background: #334155 !important;
}


/* =========================================================
   ADMIN CARD
========================================================= */

html[data-theme="midnight"] .admin-card {
  background: linear-gradient(
    145deg,
    #251417,
    #1a1115
  ) !important;

  border-color: #7f1d1d !important;
}


/* =========================================================
   DANGER / SIGN OUT
========================================================= */

html[data-theme="midnight"] .danger-zone {
  background: linear-gradient(
    145deg,
    #251417,
    #1a1115
  ) !important;

  border-color: #7f1d1d !important;
}

html[data-theme="midnight"] .danger-zone h2 {
  color: #fca5a5 !important;
}


/* =========================================================
   SIDEBAR BACK BUTTON
========================================================= */

html[data-theme="midnight"] .back-to-site {
  background: #142238 !important;
  border-color: #26364d !important;
  color: #60a5fa !important;
}

html[data-theme="midnight"] .back-to-site:hover {
  background: #1b2b44 !important;
}


/* =========================================================
   ICON BOXES
========================================================= */

html[data-theme="midnight"] .card-icon {
  background: #172a48 !important;
  color: #60a5fa !important;
}

html[data-theme="midnight"] .card-icon.purple {
  background: #2e1d4d !important;
  color: #c084fc !important;
}

html[data-theme="midnight"] .card-icon.green {
  background: #102e25 !important;
  color: #4ade80 !important;
}

html[data-theme="midnight"] .card-icon.orange {
  background: #352313 !important;
  color: #fb923c !important;
}


/* =========================================================
   LOADING SCREEN
========================================================= */

html[data-theme="midnight"] #loadingScreen {
  background: #07111f !important;
  color: #60a5fa !important;
}

/* =========================================================
   MIDNIGHT — LEADERBOARD PAGE
========================================================= */


/* MAIN WHITE CONTAINERS */

html[data-theme="midnight"] .join-leaderboard,
html[data-theme="midnight"] .toolbar,
html[data-theme="midnight"] .podium-card,
html[data-theme="midnight"] .leaderboard-card,
html[data-theme="midnight"] .report-card {
  background: #0f1b2d !important;
  border-color: #26364d !important;
  color: #f8fafc !important;
}


/* JOIN LEADERBOARD CARD */

html[data-theme="midnight"] .join-leaderboard {
  background: linear-gradient(
    135deg,
    #121b2d,
    #171b35
  ) !important;
}

html[data-theme="midnight"] .join-leaderboard-text strong {
  color: #c4b5fd !important;
}

html[data-theme="midnight"] .join-leaderboard-text span {
  color: #94a3b8 !important;
}


/* TOOLBAR */

html[data-theme="midnight"] .sort-button {
  background: #142238 !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

html[data-theme="midnight"] .sort-button:hover {
  background: #172a48 !important;
  border-color: #3b82f6 !important;
  color: #60a5fa !important;
}

html[data-theme="midnight"] .sort-button.active {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: white !important;
}


/* SEARCH */

html[data-theme="midnight"] .search-wrap input {
  background: #142238 !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

html[data-theme="midnight"] .search-wrap input:focus {
  background: #17263c !important;
  border-color: #3b82f6 !important;
}

html[data-theme="midnight"] .search-wrap input::placeholder {
  color: #64748b !important;
}


/* PODIUM CARDS */

html[data-theme="midnight"] .podium-card.first {
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(234,179,8,.16),
      transparent 42%
    ),
    #0f1b2d !important;

  border-color: #a16207 !important;
}

html[data-theme="midnight"] .podium-card.second {
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(148,163,184,.14),
      transparent 42%
    ),
    #0f1b2d !important;

  border-color: #475569 !important;
}

html[data-theme="midnight"] .podium-card.third {
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(249,115,22,.14),
      transparent 42%
    ),
    #0f1b2d !important;

  border-color: #9a3412 !important;
}

html[data-theme="midnight"] .podium-name {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .podium-instrument,
html[data-theme="midnight"] .award-name,
html[data-theme="midnight"] .podium-sub {
  color: #94a3b8 !important;
}

html[data-theme="midnight"] .podium-score {
  color: #60a5fa !important;
}


/* RANKINGS HEADER */

html[data-theme="midnight"] .leaderboard-heading {
  border-color: #26364d !important;
}

html[data-theme="midnight"] .leaderboard-heading h2 {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .leaderboard-heading span {
  color: #94a3b8 !important;
}


/* TABLE */

html[data-theme="midnight"] .leaderboard-table {
  background: #0f1b2d !important;
}

html[data-theme="midnight"] .leaderboard-table th {
  background: #142238 !important;
  color: #94a3b8 !important;
  border-color: #26364d !important;
}

html[data-theme="midnight"] .leaderboard-table td {
  background: #0f1b2d !important;
  border-color: #26364d !important;
  color: #cbd5e1 !important;
}

html[data-theme="midnight"] .leaderboard-table tbody tr:hover td {
  background: #142238 !important;
}

html[data-theme="midnight"] .leaderboard-table tbody tr.is-me td {
  background: #132542 !important;
}


/* PLAYER TEXT */

html[data-theme="midnight"] .player-text strong {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .player-text span,
html[data-theme="midnight"] .table-award-name,
html[data-theme="midnight"] .rank-cell {
  color: #94a3b8 !important;
}


/* EMPTY STATE */

html[data-theme="midnight"] .empty-state {
  color: #94a3b8 !important;
}

html[data-theme="midnight"] .empty-state strong {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .empty-state i {
  color: #64748b !important;
}


/* PRIVACY NOTE */

html[data-theme="midnight"] .privacy-note {
  background: #0c2432 !important;
  border-color: #164e63 !important;
  color: #a5b4c7 !important;
}

html[data-theme="midnight"] .privacy-note i {
  color: #22d3ee !important;
}


/* REPORT BUTTON */

html[data-theme="midnight"] .report-button {
  background: #2a151a !important;
  border-color: #7f1d1d !important;
  color: #fca5a5 !important;
}

html[data-theme="midnight"] .report-button:hover {
  background: #3b171d !important;
  border-color: #b91c1c !important;
}


/* REPORT MODAL */

html[data-theme="midnight"] .report-card {
  background: #0f1b2d !important;
  border-color: #334155 !important;
}

html[data-theme="midnight"] .report-card h2 {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .report-card > p {
  color: #94a3b8 !important;
}

html[data-theme="midnight"] .report-target {
  background: #142238 !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

html[data-theme="midnight"] .report-form-group label {
  color: #cbd5e1 !important;
}

html[data-theme="midnight"] .report-form-group select,
html[data-theme="midnight"] .report-form-group textarea {
  background: #142238 !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

html[data-theme="midnight"] .report-form-group textarea::placeholder {
  color: #64748b !important;
}


/* REPORT CANCEL */

html[data-theme="midnight"] .report-cancel {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}


/* ME PILL */

html[data-theme="midnight"] .me-pill {
  background: #172a48 !important;
  color: #60a5fa !important;
}


/* LOADING SCREEN */

html[data-theme="midnight"] #loadingScreen {
  background: #07111f !important;
  color: #60a5fa !important;
}

/* =========================================================
   OPENSCORES MIDNIGHT
   EXTRA PAGE FIXES
   Paste at BOTTOM of theme.css
========================================================= */


/* =========================================================
   RHYTHM CHALLENGE
========================================================= */

html[data-theme="midnight"] .dashboard-return,
html[data-theme="midnight"] .choice-button,
html[data-theme="midnight"] .answer-button,
html[data-theme="midnight"] .rhythm-display,
html[data-theme="midnight"] .check-option {
  background: #0f1b2d !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

html[data-theme="midnight"] .choice-button:hover,
html[data-theme="midnight"] .answer-button:hover {
  background: #142238 !important;
  border-color: #3b82f6 !important;
  color: #60a5fa !important;
}

html[data-theme="midnight"] .choice-button.active {
  background: #172a48 !important;
  border-color: #3b82f6 !important;
  color: #93c5fd !important;
}

html[data-theme="midnight"] .rhythm-display {
  background: linear-gradient(
    145deg,
    #0f1b2d,
    #151b32
  ) !important;
}

html[data-theme="midnight"] .rhythm-text,
html[data-theme="midnight"] .rhythm-operator {
  color: #c4b5fd !important;
}

html[data-theme="midnight"] .question-progress {
  background: #26364d !important;
}

html[data-theme="midnight"] .secondary-button {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}

html[data-theme="midnight"] .results-icon {
  background: #172a48 !important;
  color: #60a5fa !important;
}

html[data-theme="midnight"] .xp-earned {
  background: #2b1d12 !important;
  color: #fb923c !important;
}

html[data-theme="midnight"] .notes-earned {
  background: #172a48 !important;
  color: #60a5fa !important;
}


/* =========================================================
   ACHIEVEMENTS
========================================================= */

html[data-theme="midnight"] .equipped-card,
html[data-theme="midnight"] .controls-card,
html[data-theme="midnight"] .award-card {
  background: #0f1b2d !important;
  border-color: #26364d !important;
  color: #f8fafc !important;
}

html[data-theme="midnight"] .equipped-content h2,
html[data-theme="midnight"] .collection-summary strong,
html[data-theme="midnight"] .award-info h3 {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .equipped-content p,
html[data-theme="midnight"] .collection-summary span,
html[data-theme="midnight"] .award-description,
html[data-theme="midnight"] .award-category {
  color: #94a3b8 !important;
}

html[data-theme="midnight"] .filter-button {
  background: #142238 !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

html[data-theme="midnight"] .filter-button.active {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: white !important;
}

html[data-theme="midnight"] .unequip-button {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}


/* =========================================================
   PRACTICE JOURNAL
========================================================= */

html[data-theme="midnight"] .journal-note {
  background: linear-gradient(
    145deg,
    #0f1b2d,
    #10251f
  ) !important;

  border-color: #315e52 !important;
}

html[data-theme="midnight"] .journal-note:hover {
  background: #132b25 !important;
  border-color: #22c55e !important;
}

html[data-theme="midnight"] .journal-note h3 {
  color: #86efac !important;
}

html[data-theme="midnight"] .journal-note p,
html[data-theme="midnight"] .note-date {
  color: #94a3b8 !important;
}

html[data-theme="midnight"] .note-icon {
  background: #103525 !important;
  color: #4ade80 !important;
}

html[data-theme="midnight"] .tag {
  background: #103525 !important;
  color: #86efac !important;
}

html[data-theme="midnight"] .empty-state {
  background: #0f1b2d !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

html[data-theme="midnight"] .empty-state h3 {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .modal-card {
  background: #0f1b2d !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

html[data-theme="midnight"] .close-button {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}

html[data-theme="midnight"] .reading-section h4 {
  color: #86efac !important;
}

html[data-theme="midnight"] .reading-section p,
html[data-theme="midnight"] .reading-date {
  color: #cbd5e1 !important;
}


/* =========================================================
   PRACTICE PLANNER
========================================================= */

html[data-theme="midnight"] .day-card {
  background: #0f1b2d !important;
  border-color: #26364d !important;
}

html[data-theme="midnight"] .choice-button,
html[data-theme="midnight"] .check-option {
  background: #142238 !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

html[data-theme="midnight"] .check-option:hover {
  background: #17263c !important;
}

html[data-theme="midnight"] .audition-box,
html[data-theme="midnight"] .weekly-goal {
  background: linear-gradient(
    135deg,
    #0c2432,
    #102033
  ) !important;

  border-color: #164e63 !important;
}

html[data-theme="midnight"] .audition-box h3,
html[data-theme="midnight"] .weekly-goal h3,
html[data-theme="midnight"] .day-name {
  color: #67e8f9 !important;
}

html[data-theme="midnight"] .audition-box p,
html[data-theme="midnight"] .weekly-goal p,
html[data-theme="midnight"] .practice-content span {
  color: #94a3b8 !important;
}

html[data-theme="midnight"] .day-focus {
  background: #123340 !important;
  color: #67e8f9 !important;
}

html[data-theme="midnight"] .practice-block {
  border-color: #26364d !important;
}

html[data-theme="midnight"] select,
html[data-theme="midnight"] input[type="text"],
html[data-theme="midnight"] input[type="number"] {
  background: #142238 !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}


/* =========================================================
   MUSIC GAMES
========================================================= */

html[data-theme="midnight"] .game-card {
  background: #0f1b2d !important;
  border-color: #26364d !important;
  color: #f8fafc !important;
}

html[data-theme="midnight"] .game-card h3 {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .game-card p {
  color: #94a3b8 !important;
}

html[data-theme="midnight"] .note-card {
  background: linear-gradient(
    145deg,
    #10203b,
    #0f1b2d
  ) !important;
}

html[data-theme="midnight"] .rhythm-card {
  background: linear-gradient(
    145deg,
    #201637,
    #0f1b2d
  ) !important;
}

html[data-theme="midnight"] .interval-card {
  background: linear-gradient(
    145deg,
    #10291f,
    #0f1b2d
  ) !important;
}

html[data-theme="midnight"] .ear-card {
  background: linear-gradient(
    145deg,
    #321626,
    #0f1b2d
  ) !important;
}

html[data-theme="midnight"] .harmony-card {
  background: linear-gradient(
    145deg,
    #312012,
    #0f1b2d
  ) !important;
}

html[data-theme="midnight"] .key-card {
  background: linear-gradient(
    145deg,
    #302a10,
    #0f1b2d
  ) !important;
}

html[data-theme="midnight"] .coming-soon-label {
  background: #142238 !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

html[data-theme="midnight"] .info-box {
  background: linear-gradient(
    135deg,
    #10203b,
    #0f1b2d
  ) !important;

  border-color: #26364d !important;
}

html[data-theme="midnight"] .info-box h3 {
  color: #60a5fa !important;
}

html[data-theme="midnight"] .info-box p {
  color: #94a3b8 !important;
}


/* =========================================================
   FAVORITES
========================================================= */

html[data-theme="midnight"] .favorite-card,
html[data-theme="midnight"] .collection-card,
html[data-theme="midnight"] .collection-empty,
html[data-theme="midnight"] .collection-modal,
html[data-theme="midnight"] .score-choice,
html[data-theme="midnight"] .collection-view-score {
  background: #0f1b2d !important;
  border-color: #26364d !important;
  color: #f8fafc !important;
}

html[data-theme="midnight"] .heading-row h2,
html[data-theme="midnight"] .favorite-info h3,
html[data-theme="midnight"] .collection-card h3,
html[data-theme="midnight"] .modal-top h2,
html[data-theme="midnight"] .score-choice strong,
html[data-theme="midnight"] .collection-view-score strong {
  color: #93c5fd !important;
}

html[data-theme="midnight"] .favorite-info p,
html[data-theme="midnight"] .collection-card p,
html[data-theme="midnight"] .modal-top p,
html[data-theme="midnight"] .score-choice span {
  color: #94a3b8 !important;
}

html[data-theme="midnight"] .favorite-card img,
html[data-theme="midnight"] .score-choice img {
  background: #142238 !important;
}

html[data-theme="midnight"] .collection-icon {
  background: #172a48 !important;
  color: #60a5fa !important;
}

html[data-theme="midnight"] .collection-button.secondary {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}

html[data-theme="midnight"] .modal-close {
  background: #1e293b !important;
  color: #cbd5e1 !important;
}

html[data-theme="midnight"] .score-choice.selected {
  background: #172a48 !important;
  border-color: #3b82f6 !important;
}

html[data-theme="midnight"] .favorite-count {
  background: #302a10 !important;
  color: #fde047 !important;
}


/* =========================================================
   ADAPTIVE PRACTICE
========================================================= */

html[data-theme="midnight"] .accuracy-box,
html[data-theme="midnight"] .why-box,
html[data-theme="midnight"] .signal-card,
html[data-theme="midnight"] .how-card,
html[data-theme="midnight"] .plan-card {
  background: #0f1b2d !important;
  border-color: #26364d !important;
  color: #f8fafc !important;
}

html[data-theme="midnight"] .accuracy-box {
  background: linear-gradient(
    145deg,
    #142238,
    #0f1b2d
  ) !important;
}

html[data-theme="midnight"] .why-box {
  background: linear-gradient(
    135deg,
    #171b35,
    #0f1b2d
  ) !important;
}

html[data-theme="midnight"] .why-box h3 {
  color: #a5b4fc !important;
}

html[data-theme="midnight"] .why-box p,
html[data-theme="midnight"] .signal-card span,
html[data-theme="midnight"] .how-step span,
html[data-theme="midnight"] .plan-row span {
  color: #94a3b8 !important;
}

html[data-theme="midnight"] .signal-card {
  background: #142238 !important;
}

html[data-theme="midnight"] .analysis-label {
  background: #172a48 !important;
  color: #93c5fd !important;
}

html[data-theme="midnight"] .recommendation-icon {
  background: #172a48 !important;
  color: #60a5fa !important;
}

html[data-theme="midnight"] .skill-row {
  border-color: #26364d !important;
}

html[data-theme="midnight"] .skill-row-value {
  color: #cbd5e1 !important;
}

html[data-theme="midnight"] .skill-mini-bar {
  background: #26364d !important;
}

html[data-theme="midnight"] .how-card {
  background: linear-gradient(
    145deg,
    #10251f,
    #0f1b2d
  ) !important;
}

html[data-theme="midnight"] .how-number {
  background: #103525 !important;
  color: #4ade80 !important;
}

html[data-theme="midnight"] .plan-card {
  background: linear-gradient(
    145deg,
    #0c2432,
    #0f1b2d
  ) !important;
}

html[data-theme="midnight"] .plan-row {
  border-color: #26364d !important;
}

html[data-theme="midnight"] .plan-row strong {
  color: #f8fafc !important;
}


/* =========================================================
   GLOBAL LEFTOVER WHITE BOX KILLER

   These are common small boxes used across OpenScores.
========================================================= */

html[data-theme="midnight"] .dashboard-return,
html[data-theme="midnight"] .secondary-button {
  background: #142238 !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

html[data-theme="midnight"] .dashboard-return:hover,
html[data-theme="midnight"] .secondary-button:hover {
  background: #1b2b44 !important;
  color: #60a5fa !important;
}


/* =========================================================
   LOADING SCREENS
========================================================= */

html[data-theme="midnight"] #loadingScreen {
  background: #07111f !important;
  color: #60a5fa !important;
}

/* =========================================================
   MIDNIGHT — DASHBOARD FIXES
========================================================= */


/* MAIN DASHBOARD CARDS */

html[data-theme="midnight"] .card,
html[data-theme="midnight"] .top-stat,
html[data-theme="midnight"] .continue-item,
html[data-theme="midnight"] .today-card,
html[data-theme="midnight"] .adaptive-card,
html[data-theme="midnight"] .quick-item,
html[data-theme="midnight"] .right-card,
html[data-theme="midnight"] .mini-profile {
  background: #0f1b2d !important;
  border-color: #26364d !important;
  color: #f8fafc !important;
}


/* =========================================================
   CENTER COLUMN
========================================================= */

html[data-theme="midnight"] .welcome h1,
html[data-theme="midnight"] .section-heading h2,
html[data-theme="midnight"] .continue-content h3,
html[data-theme="midnight"] .today-card strong,
html[data-theme="midnight"] .adaptive-info h3 {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .welcome p,
html[data-theme="midnight"] .section-heading span,
html[data-theme="midnight"] .continue-content p,
html[data-theme="midnight"] .today-card span,
html[data-theme="midnight"] .adaptive-info p,
html[data-theme="midnight"] .mini-progress-text {
  color: #94a3b8 !important;
}


/* =========================================================
   TOP XP / STREAK BOXES
========================================================= */

html[data-theme="midnight"] .top-stat {
  background: #142238 !important;
}

html[data-theme="midnight"] .top-stat strong {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .top-stat span {
  color: #94a3b8 !important;
}


/* =========================================================
   MINI PROFILE
========================================================= */

html[data-theme="midnight"] .mini-profile {
  background: linear-gradient(
    145deg,
    #101c30,
    #0f1b2d
  ) !important;
}

html[data-theme="midnight"] .mini-profile-title,
html[data-theme="midnight"] .mini-profile-name {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .mini-profile-details {
  color: #94a3b8 !important;
}


/* =========================================================
   CONTINUE PRACTICING
========================================================= */

html[data-theme="midnight"] .continue-item {
  background: #142238 !important;
}

html[data-theme="midnight"] .continue-art.green {
  background: linear-gradient(
    145deg,
    #10291f,
    #123525
  ) !important;

  color: #4ade80 !important;
}


/* =========================================================
   TODAY'S PRACTICE
========================================================= */

html[data-theme="midnight"] .today-icon.green {
  background: #103525 !important;
  color: #4ade80 !important;
}

html[data-theme="midnight"] .today-icon.blue {
  background: #172a48 !important;
  color: #60a5fa !important;
}

html[data-theme="midnight"] .today-icon.orange {
  background: #352313 !important;
  color: #fb923c !important;
}


/* =========================================================
   ADAPTIVE PRACTICE CARDS
========================================================= */

html[data-theme="midnight"] .adaptive-card {
  background: #0f1b2d !important;
}

html[data-theme="midnight"] .adaptive-visual.yellow {
  background: #302a10 !important;
  color: #fde047 !important;
}

html[data-theme="midnight"] .adaptive-visual.purple {
  background: #2e1d4d !important;
  color: #c084fc !important;
}

html[data-theme="midnight"] .adaptive-visual.cyan {
  background: #0c2946 !important;
  color: #38bdf8 !important;
}

html[data-theme="midnight"] .difficulty.medium {
  background: #352313 !important;
  color: #fb923c !important;
}

html[data-theme="midnight"] .difficulty.easy {
  background: #103525 !important;
  color: #4ade80 !important;
}


/* =========================================================
   QUICK ACCESS
========================================================= */

html[data-theme="midnight"] .quick-item {
  background: #142238 !important;
  color: #cbd5e1 !important;
}

html[data-theme="midnight"] .quick-item:hover {
  background: #1b2b44 !important;
  border-color: #3b82f6 !important;
  color: #60a5fa !important;
}


/* =========================================================
   JOURNAL STRIP
========================================================= */

html[data-theme="midnight"] .journal-strip {
  background: linear-gradient(
    135deg,
    #10251f,
    #101b2f
  ) !important;

  border-color: #315e52 !important;
}

html[data-theme="midnight"] .journal-icon {
  background: #103525 !important;
  color: #4ade80 !important;
}

html[data-theme="midnight"] .journal-left strong {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .journal-left span {
  color: #94a3b8 !important;
}


/* =========================================================
   RIGHT PANEL
========================================================= */

html[data-theme="midnight"] .right-panel {
  background: #091321 !important;
  border-color: #26364d !important;
}


/* =========================================================
   PROGRESS CARD
========================================================= */

html[data-theme="midnight"] .overall-progress-row,
html[data-theme="midnight"] .skills-label,
html[data-theme="midnight"] .skill-name,
html[data-theme="midnight"] .skill-percent {
  color: #e2e8f0 !important;
}

html[data-theme="midnight"] .progress-bar,
html[data-theme="midnight"] .skill-bar,
html[data-theme="midnight"] .mini-progress {
  background: #26364d !important;
}


/* =========================================================
   QUESTIONS ANSWERED INLINE BOX
   This one uses inline styles, so we target its container.
========================================================= */

html[data-theme="midnight"] #totalQuestionsAnswered {
  color: #60a5fa !important;
}

html[data-theme="midnight"] #totalQuestionsAnswered::before {
  color: #60a5fa !important;
}

html[data-theme="midnight"] .right-card > div[style*="background:#f8fafc"] {
  background: #142238 !important;
  border-color: #334155 !important;
}

html[data-theme="midnight"] .right-card > div[style*="background:#f8fafc"] div[style*="color:#334155"] {
  color: #e2e8f0 !important;
}

html[data-theme="midnight"] .right-card > div[style*="background:#f8fafc"] div[style*="color:#94a3b8"] {
  color: #94a3b8 !important;
}

html[data-theme="midnight"] .right-card > div[style*="background:#f8fafc"] div[style*="background:#dbeafe"] {
  background: #172a48 !important;
  color: #60a5fa !important;
}


/* =========================================================
   ACHIEVEMENT DASHBOARD LIBRARY
========================================================= */

html[data-theme="midnight"] .achievement-count {
  background: #172a48 !important;
  color: #60a5fa !important;
}

html[data-theme="midnight"] .achievement-filter {
  background: #142238 !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

html[data-theme="midnight"] .achievement-filter:hover {
  border-color: #3b82f6 !important;
  color: #60a5fa !important;
}

html[data-theme="midnight"] .achievement-filter.active {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: white !important;
}

html[data-theme="midnight"] .achievement-item {
  background: #142238 !important;
  border-color: #334155 !important;
}

html[data-theme="midnight"] .achievement-item.unlocked {
  background: linear-gradient(
    145deg,
    #141d31,
    #181932
  ) !important;

  border-color: #4c1d95 !important;
}

html[data-theme="midnight"] .achievement-info strong {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .achievement-info span,
html[data-theme="midnight"] .achievement-category-title,
html[data-theme="midnight"] .achievement-progress-top {
  color: #94a3b8 !important;
}

html[data-theme="midnight"] .coming-soon {
  background: #142238 !important;
  color: #94a3b8 !important;
}


/* =========================================================
   PRACTICE STATS
========================================================= */

html[data-theme="midnight"] .side-stat.orange {
  background: #352313 !important;
}

html[data-theme="midnight"] .side-stat.yellow {
  background: #302a10 !important;
}

html[data-theme="midnight"] .side-stat strong {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .side-stat span {
  color: #94a3b8 !important;
}


/* =========================================================
   WHAT'S NEW BUTTON
========================================================= */

html[data-theme="midnight"] .update-pill {
  background: #142238 !important;
  border-color: #334155 !important;
  color: #60a5fa !important;
}

html[data-theme="midnight"] .update-pill:hover {
  background: #1b2b44 !important;
}


/* =========================================================
   UPDATE MODAL
========================================================= */

html[data-theme="midnight"] .update-modal {
  background: #0f1b2d !important;
  border-color: #334155 !important;
}

html[data-theme="midnight"] .update-modal-header {
  background: linear-gradient(
    135deg,
    #142238,
    #0f1b2d
  ) !important;

  border-color: #26364d !important;
}

html[data-theme="midnight"] .update-modal-body {
  background: #0f1b2d !important;
}

html[data-theme="midnight"] .update-modal-heading strong,
html[data-theme="midnight"] .current-update-title,
html[data-theme="midnight"] .previous-update-button strong {
  color: #f8fafc !important;
}

html[data-theme="midnight"] .update-modal-heading span,
html[data-theme="midnight"] .current-update-date,
html[data-theme="midnight"] .previous-update-button span {
  color: #94a3b8 !important;
}

html[data-theme="midnight"] .update-close {
  background: #1e293b !important;
  color: #cbd5e1 !important;
}

html[data-theme="midnight"] .update-close:hover {
  background: #334155 !important;
  color: white !important;
}

html[data-theme="midnight"] .current-update-card {
  background: linear-gradient(
    145deg,
    #142238,
    #101b2d
  ) !important;

  border-color: #334155 !important;
}

html[data-theme="midnight"] .current-update-version {
  color: #60a5fa !important;
}

html[data-theme="midnight"] .update-change {
  color: #cbd5e1 !important;
}

html[data-theme="midnight"] .previous-update {
  background: #142238 !important;
  border-color: #334155 !important;
}

html[data-theme="midnight"] .previous-update-button {
  background: #142238 !important;
}

html[data-theme="midnight"] .previous-update-button:hover {
  background: #1b2b44 !important;
}

html[data-theme="midnight"] .previous-update-content {
  background: #142238 !important;
}


/* =========================================================
   STREAK LOST TOAST
========================================================= */

html[data-theme="midnight"] .streak-lost-toast {
  background: linear-gradient(
    135deg,
    #2b1a12,
    #1b1720
  ) !important;

  border-color: #7c2d12 !important;
}

html[data-theme="midnight"] .streak-lost-copy strong {
  color: #fdba74 !important;
}

html[data-theme="midnight"] .streak-lost-copy p {
  color: #94a3b8 !important;
}


/* =========================================================
   LOADING
========================================================= */

html[data-theme="midnight"] #loadingScreen {
  background: #07111f !important;
  color: #60a5fa !important;
}

/* =========================================================
   SAKURA THEME
========================================================= */

html[data-theme="sakura"] {
  color-scheme: light;

  --theme-page: #fff5f8;
  --theme-surface: #ffffff;
  --theme-surface-2: #fff0f5;
  --theme-surface-3: #ffe4ee;

  --theme-text: #4a2734;
  --theme-muted: #946779;
  --theme-border: #f4c8d7;

  --theme-primary: #db2777;
  --theme-primary-light: #f472b6;
  --theme-primary-dark: #be185d;
}


/* PAGE */

html[data-theme="sakura"] body {
  background:
    radial-gradient(
      circle at 85% 0%,
      #ffdbe7 0,
      transparent 28%
    ),
    #fff5f8 !important;

  color: #4a2734 !important;
}


/* SIDEBAR */

html[data-theme="sakura"] .sidebar,
html[data-theme="sakura"] nav,
html[data-theme="sakura"] aside {
  background: rgba(255,250,252,.98) !important;
  border-color: #f4c8d7 !important;
}


/* LOGO */

html[data-theme="sakura"] .brand-icon {
  background: linear-gradient(
    135deg,
    #db2777,
    #f472b6
  ) !important;
}

html[data-theme="sakura"] .brand-text strong {
  color: #831843 !important;
}

html[data-theme="sakura"] .brand-text span {
  color: #db2777 !important;
}


/* SIDEBAR LINKS */

html[data-theme="sakura"] .side-link {
  color: #6b4451 !important;
}

html[data-theme="sakura"] .side-link:hover {
  background: #fff0f5 !important;
  color: #db2777 !important;
}

html[data-theme="sakura"] .side-link.active {
  background: linear-gradient(
    135deg,
    #db2777,
    #f472b6
  ) !important;

  color: white !important;
}


/* BACK BUTTON */

html[data-theme="sakura"] .back-to-site,
html[data-theme="sakura"] .dashboard-return {
  background: #fff0f5 !important;
  border-color: #f9a8d4 !important;
  color: #be185d !important;
}


/* MAIN CARDS */

html[data-theme="sakura"] .card,
html[data-theme="sakura"] .panel,
html[data-theme="sakura"] .box,
html[data-theme="sakura"] .top-stat,
html[data-theme="sakura"] .continue-item,
html[data-theme="sakura"] .today-card,
html[data-theme="sakura"] .adaptive-card,
html[data-theme="sakura"] .quick-item,
html[data-theme="sakura"] .right-card,
html[data-theme="sakura"] .settings-section,
html[data-theme="sakura"] .dashboard-settings-card,
html[data-theme="sakura"] .customization-item,
html[data-theme="sakura"] .leaderboard-preview {
  background: rgba(255,255,255,.97) !important;
  border-color: #f4c8d7 !important;
  color: #4a2734 !important;
}


/* INNER BOXES */

html[data-theme="sakura"] .customization-preview,
html[data-theme="sakura"] .customization-empty,
html[data-theme="sakura"] .coming-soon-setting {
  background: #fff0f5 !important;
  border-color: #f4c8d7 !important;
}


/* HEADINGS */

html[data-theme="sakura"] h1,
html[data-theme="sakura"] h2,
html[data-theme="sakura"] h3,
html[data-theme="sakura"] h4,
html[data-theme="sakura"] strong,
html[data-theme="sakura"] label {
  color: #831843;
}


/* TEXT */

html[data-theme="sakura"] p,
html[data-theme="sakura"] small,
html[data-theme="sakura"] .description,
html[data-theme="sakura"] .field-help,
html[data-theme="sakura"] .toggle-info span {
  color: #946779;
}


/* LINKS */

html[data-theme="sakura"] a {
  color: #db2777;
}

html[data-theme="sakura"] a:hover {
  color: #be185d;
}


/* BUTTONS */

html[data-theme="sakura"] .button,
html[data-theme="sakura"] .primary-button,
html[data-theme="sakura"] .main-button,
html[data-theme="sakura"] .small-button,
html[data-theme="sakura"] .adaptive-button {
  background: linear-gradient(
    135deg,
    #db2777,
    #f472b6
  ) !important;

  color: white !important;
}

html[data-theme="sakura"] .button:hover,
html[data-theme="sakura"] .primary-button:hover,
html[data-theme="sakura"] .main-button:hover,
html[data-theme="sakura"] .small-button:hover,
html[data-theme="sakura"] .adaptive-button:hover {
  background: #be185d !important;
}


/* SECONDARY BUTTONS */

html[data-theme="sakura"] .secondary-button {
  background: #fff0f5 !important;
  color: #be185d !important;
}


/* INPUTS */

html[data-theme="sakura"] input,
html[data-theme="sakura"] textarea,
html[data-theme="sakura"] select {
  background: #fffafb !important;
  border-color: #f4c8d7 !important;
  color: #4a2734 !important;
}

html[data-theme="sakura"] input:focus,
html[data-theme="sakura"] textarea:focus,
html[data-theme="sakura"] select:focus {
  background: white !important;
  border-color: #f472b6 !important;

  box-shadow:
    0 0 0 3px
    rgba(244,114,182,.12) !important;
}


/* ICON BOXES */

html[data-theme="sakura"] .card-icon,
html[data-theme="sakura"] .today-icon.blue {
  background: #fce7f3 !important;
  color: #db2777 !important;
}

html[data-theme="sakura"] .card-icon.purple {
  background: #f3e8ff !important;
  color: #a855f7 !important;
}


/* PROGRESS BARS */

html[data-theme="sakura"] .progress-bar,
html[data-theme="sakura"] .skill-bar,
html[data-theme="sakura"] .mini-progress,
html[data-theme="sakura"] .achievement-progress-bar {
  background: #fce7f3 !important;
}

html[data-theme="sakura"] .progress-fill,
html[data-theme="sakura"] .achievement-progress-fill {
  background: linear-gradient(
    90deg,
    #db2777,
    #f9a8d4
  ) !important;
}


/* CUSTOMIZATION SELECTED */

html[data-theme="sakura"] .customization-item.selected {
  background: #fff0f5 !important;
  border-color: #db2777 !important;

  box-shadow:
    0 0 0 2px
    rgba(219,39,119,.10) !important;
}


/* LEADERBOARD PREVIEW */

html[data-theme="sakura"] .preview-xp {
  color: #db2777 !important;
}


/* PRIVACY */

html[data-theme="sakura"] .privacy-box {
  background: linear-gradient(
    145deg,
    #fff0f5,
    #ffffff
  ) !important;

  border-color: #f9a8d4 !important;
}

html[data-theme="sakura"] .privacy-box h3 {
  color: #be185d !important;
}


/* HEADER */

html[data-theme="sakura"] .page-header {
  background:
    radial-gradient(
      circle at 90% 15%,
      rgba(255,255,255,.22),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #9d174d,
      #db2777 55%,
      #f9a8d4
    ) !important;
}


/* LOADING */

html[data-theme="sakura"] #loadingScreen {
  background: #fff5f8 !important;
  color: #db2777 !important;
}

/* =========================================================
   DARK SAKURA THEME
========================================================= */

html[data-theme="dark-sakura"] {
  color-scheme: dark;

  --theme-page: #160d14;
  --theme-surface: #23131f;
  --theme-surface-2: #2d1827;
  --theme-surface-3: #3a2033;

  --theme-text: #fff7fb;
  --theme-muted: #d2a9bd;
  --theme-border: #5b314b;

  --theme-primary: #ec4899;
  --theme-primary-light: #f9a8d4;
  --theme-primary-dark: #be185d;
}


/* PAGE */

html[data-theme="dark-sakura"] body {
  background:
    radial-gradient(
      circle at 85% 0%,
      rgba(236,72,153,.20) 0,
      transparent 28%
    ),
    #160d14 !important;

  color: #fff7fb !important;
}


/* SIDEBAR */

html[data-theme="dark-sakura"] .sidebar,
html[data-theme="dark-sakura"] nav,
html[data-theme="dark-sakura"] aside {
  background: #1b1018 !important;
  border-color: #5b314b !important;
  color: #fff7fb !important;
}


/* BRAND */

html[data-theme="dark-sakura"] .brand-icon {
  background: linear-gradient(
    135deg,
    #be185d,
    #f472b6
  ) !important;
}

html[data-theme="dark-sakura"] .brand-text strong {
  color: #fff1f7 !important;
}

html[data-theme="dark-sakura"] .brand-text span {
  color: #f9a8d4 !important;
}


/* NAVIGATION */

html[data-theme="dark-sakura"] .side-link {
  color: #e9c7d8 !important;
}

html[data-theme="dark-sakura"] .side-link:hover {
  background: #321827 !important;
  color: #f9a8d4 !important;
}

html[data-theme="dark-sakura"] .side-link.active {
  background: linear-gradient(
    135deg,
    #be185d,
    #ec4899
  ) !important;

  color: white !important;
}


/* BACK BUTTON */

html[data-theme="dark-sakura"] .back-to-site,
html[data-theme="dark-sakura"] .dashboard-return {
  background: #2d1827 !important;
  border-color: #7a3d62 !important;
  color: #f9a8d4 !important;
}


/* CARDS */

html[data-theme="dark-sakura"] .card,
html[data-theme="dark-sakura"] .panel,
html[data-theme="dark-sakura"] .box,
html[data-theme="dark-sakura"] .top-stat,
html[data-theme="dark-sakura"] .continue-item,
html[data-theme="dark-sakura"] .today-card,
html[data-theme="dark-sakura"] .adaptive-card,
html[data-theme="dark-sakura"] .quick-item,
html[data-theme="dark-sakura"] .right-card,
html[data-theme="dark-sakura"] .settings-section,
html[data-theme="dark-sakura"] .dashboard-settings-card,
html[data-theme="dark-sakura"] .customization-item,
html[data-theme="dark-sakura"] .leaderboard-preview,
html[data-theme="dark-sakura"] .shop-card,
html[data-theme="dark-sakura"] .category-card {
  background: #23131f !important;
  border-color: #5b314b !important;
  color: #fff7fb !important;
}


/* INNER BOXES */

html[data-theme="dark-sakura"] .customization-preview,
html[data-theme="dark-sakura"] .customization-empty,
html[data-theme="dark-sakura"] .coming-soon-setting,
html[data-theme="dark-sakura"] .rhythm-display {
  background: #2d1827 !important;
  border-color: #5b314b !important;
  color: #fff7fb !important;
}


/* HEADINGS */

html[data-theme="dark-sakura"] h1,
html[data-theme="dark-sakura"] h2,
html[data-theme="dark-sakura"] h3,
html[data-theme="dark-sakura"] h4,
html[data-theme="dark-sakura"] strong,
html[data-theme="dark-sakura"] label {
  color: #fff7fb !important;
}


/* MUTED TEXT */

html[data-theme="dark-sakura"] p,
html[data-theme="dark-sakura"] small,
html[data-theme="dark-sakura"] .description,
html[data-theme="dark-sakura"] .field-help,
html[data-theme="dark-sakura"] .subtitle,
html[data-theme="dark-sakura"] .muted {
  color: #d2a9bd !important;
}


/* LINKS */

html[data-theme="dark-sakura"] a {
  color: #f9a8d4;
}

html[data-theme="dark-sakura"] a:hover {
  color: #fbcfe8;
}


/* BUTTONS */

html[data-theme="dark-sakura"] .button,
html[data-theme="dark-sakura"] .primary-button,
html[data-theme="dark-sakura"] .main-button,
html[data-theme="dark-sakura"] .small-button,
html[data-theme="dark-sakura"] .adaptive-button,
html[data-theme="dark-sakura"] .btn-primary {
  background: linear-gradient(
    135deg,
    #be185d,
    #ec4899
  ) !important;

  color: white !important;
}


/* SECONDARY BUTTONS */

html[data-theme="dark-sakura"] .secondary-button {
  background: #3a2033 !important;
  color: #f9a8d4 !important;
}


/* INPUTS */

html[data-theme="dark-sakura"] input,
html[data-theme="dark-sakura"] textarea,
html[data-theme="dark-sakura"] select {
  background: #2d1827 !important;
  border-color: #6b3655 !important;
  color: #fff7fb !important;
}

html[data-theme="dark-sakura"] input:focus,
html[data-theme="dark-sakura"] textarea:focus,
html[data-theme="dark-sakura"] select:focus {
  background: #35202e !important;
  border-color: #ec4899 !important;

  box-shadow:
    0 0 0 3px
    rgba(236,72,153,.14) !important;
}


/* ICON BOXES */

html[data-theme="dark-sakura"] .card-icon,
html[data-theme="dark-sakura"] .today-icon.blue {
  background: #3a2033 !important;
  color: #f9a8d4 !important;
}


/* PROGRESS */

html[data-theme="dark-sakura"] .progress-bar,
html[data-theme="dark-sakura"] .skill-bar,
html[data-theme="dark-sakura"] .mini-progress,
html[data-theme="dark-sakura"] .achievement-progress-bar {
  background: #4a293d !important;
}

html[data-theme="dark-sakura"] .progress-fill,
html[data-theme="dark-sakura"] .achievement-progress-fill {
  background: linear-gradient(
    90deg,
    #be185d,
    #f472b6
  ) !important;
}


/* HEADER */

html[data-theme="dark-sakura"] .page-header {
  background:
    radial-gradient(
      circle at 90% 15%,
      rgba(255,255,255,.14),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #5b1238,
      #be185d 55%,
      #f472b6
    ) !important;
}


/* SELECTED CUSTOMIZATION */

html[data-theme="dark-sakura"] .customization-item.selected {
  background: #321827 !important;
  border-color: #ec4899 !important;

  box-shadow:
    0 0 0 2px
    rgba(236,72,153,.12) !important;
}


/* LOADING */

html[data-theme="dark-sakura"] #loadingScreen {
  background: #160d14 !important;
  color: #f9a8d4 !important;
}

/* =========================================================
   DARK SAKURA — FULL SITE WHITE BOX FIX
   Paste/keep this at the VERY BOTTOM of theme.css
========================================================= */

/* GLOBAL SURFACES / CONTAINERS */
html[data-theme="dark-sakura"] main,
html[data-theme="dark-sakura"] .main,
html[data-theme="dark-sakura"] .main-content,
html[data-theme="dark-sakura"] .content,
html[data-theme="dark-sakura"] .page,
html[data-theme="dark-sakura"] .page-content,
html[data-theme="dark-sakura"] .dashboard,
html[data-theme="dark-sakura"] .dashboard-main,
html[data-theme="dark-sakura"] .right-panel {
  background-color: transparent !important;
  color: #fff7fb !important;
}

html[data-theme="dark-sakura"] .right-panel {
  background: #140c12 !important;
  border-color: #5b314b !important;
}

/* COMMON WHITE BOXES ACROSS THE SITE */
html[data-theme="dark-sakura"] .card,
html[data-theme="dark-sakura"] .panel,
html[data-theme="dark-sakura"] .box,
html[data-theme="dark-sakura"] .section-card,
html[data-theme="dark-sakura"] .stat-card,
html[data-theme="dark-sakura"] .top-stat,
html[data-theme="dark-sakura"] .quick-item,
html[data-theme="dark-sakura"] .continue-item,
html[data-theme="dark-sakura"] .today-card,
html[data-theme="dark-sakura"] .adaptive-card,
html[data-theme="dark-sakura"] .achievement-item,
html[data-theme="dark-sakura"] .mini-profile,
html[data-theme="dark-sakura"] .journal-strip,
html[data-theme="dark-sakura"] .settings-section,
html[data-theme="dark-sakura"] .customization-section,
html[data-theme="dark-sakura"] .leaderboard-preview,
html[data-theme="dark-sakura"] .shop-card,
html[data-theme="dark-sakura"] .category-card,
html[data-theme="dark-sakura"] .balance-card,
html[data-theme="dark-sakura"] .section-header,
html[data-theme="dark-sakura"] .toolbar,
html[data-theme="dark-sakura"] .podium-card,
html[data-theme="dark-sakura"] .leaderboard-card,
html[data-theme="dark-sakura"] .report-card,
html[data-theme="dark-sakura"] .equipped-card,
html[data-theme="dark-sakura"] .controls-card,
html[data-theme="dark-sakura"] .award-card,
html[data-theme="dark-sakura"] .journal-note,
html[data-theme="dark-sakura"] .modal-card,
html[data-theme="dark-sakura"] .day-card,
html[data-theme="dark-sakura"] .game-card,
html[data-theme="dark-sakura"] .favorite-card,
html[data-theme="dark-sakura"] .collection-card,
html[data-theme="dark-sakura"] .collection-empty,
html[data-theme="dark-sakura"] .collection-modal,
html[data-theme="dark-sakura"] .score-choice,
html[data-theme="dark-sakura"] .collection-view-score,
html[data-theme="dark-sakura"] .accuracy-box,
html[data-theme="dark-sakura"] .why-box,
html[data-theme="dark-sakura"] .signal-card,
html[data-theme="dark-sakura"] .how-card,
html[data-theme="dark-sakura"] .plan-card {
  background: #23131f !important;
  border-color: #5b314b !important;
  color: #fff7fb !important;
}

/* INLINE / SMALL SURFACES */
html[data-theme="dark-sakura"] .dashboard-return,
html[data-theme="dark-sakura"] .choice-button,
html[data-theme="dark-sakura"] .answer-button,
html[data-theme="dark-sakura"] .check-option,
html[data-theme="dark-sakura"] .filter-button,
html[data-theme="dark-sakura"] .sort-button,
html[data-theme="dark-sakura"] .secondary-button,
html[data-theme="dark-sakura"] .unequip-button,
html[data-theme="dark-sakura"] .close-button,
html[data-theme="dark-sakura"] .modal-close,
html[data-theme="dark-sakura"] .report-cancel,
html[data-theme="dark-sakura"] .previous-update-button,
html[data-theme="dark-sakura"] .previous-update,
html[data-theme="dark-sakura"] .previous-update-content,
html[data-theme="dark-sakura"] .current-update-card,
html[data-theme="dark-sakura"] .update-modal,
html[data-theme="dark-sakura"] .update-modal-body,
html[data-theme="dark-sakura"] .update-modal-header,
html[data-theme="dark-sakura"] .update-pill,
html[data-theme="dark-sakura"] .privacy-note,
html[data-theme="dark-sakura"] .report-target,
html[data-theme="dark-sakura"] .coming-soon,
html[data-theme="dark-sakura"] .coming-soon-label,
html[data-theme="dark-sakura"] .category-badge,
html[data-theme="dark-sakura"] .status-pill,
html[data-theme="dark-sakura"] .section-count,
html[data-theme="dark-sakura"] .me-pill,
html[data-theme="dark-sakura"] .analysis-label,
html[data-theme="dark-sakura"] .day-focus,
html[data-theme="dark-sakura"] .tag {
  background: #2d1827 !important;
  border-color: #6b3655 !important;
  color: #f0c6d9 !important;
}

/* HOVER STATES */
html[data-theme="dark-sakura"] .dashboard-return:hover,
html[data-theme="dark-sakura"] .choice-button:hover,
html[data-theme="dark-sakura"] .answer-button:hover,
html[data-theme="dark-sakura"] .filter-button:hover,
html[data-theme="dark-sakura"] .sort-button:hover,
html[data-theme="dark-sakura"] .secondary-button:hover,
html[data-theme="dark-sakura"] .quick-item:hover,
html[data-theme="dark-sakura"] .shop-card:hover,
html[data-theme="dark-sakura"] .category-card:hover,
html[data-theme="dark-sakura"] .previous-update-button:hover {
  background: #3a2033 !important;
  border-color: #ec4899 !important;
  color: #f9a8d4 !important;
}

/* ACTIVE / SELECTED */
html[data-theme="dark-sakura"] .choice-button.active,
html[data-theme="dark-sakura"] .filter-button.active,
html[data-theme="dark-sakura"] .sort-button.active,
html[data-theme="dark-sakura"] .achievement-filter.active,
html[data-theme="dark-sakura"] .side-link.active {
  background: linear-gradient(135deg,#be185d,#ec4899) !important;
  border-color: #ec4899 !important;
  color: #ffffff !important;
}

/* SETTINGS PAGE */
html[data-theme="dark-sakura"] .settings-grid .card,
html[data-theme="dark-sakura"] .dashboard-settings-card {
  background: #23131f !important;
  border-color: #5b314b !important;
}

html[data-theme="dark-sakura"] .dashboard-settings-card {
  background: linear-gradient(145deg,#23131f,#2a1624) !important;
}

html[data-theme="dark-sakura"] .customization-section {
  background: transparent !important;
  border-color: #5b314b !important;
}

html[data-theme="dark-sakura"] .customization-item {
  background: #2d1827 !important;
  border-color: #6b3655 !important;
  color: #fff7fb !important;
}

html[data-theme="dark-sakura"] .customization-item:hover {
  background: #382031 !important;
  border-color: #ec4899 !important;
}

html[data-theme="dark-sakura"] .customization-item.selected {
  background: #3a2033 !important;
  border-color: #ec4899 !important;
}

html[data-theme="dark-sakura"] .customization-preview,
html[data-theme="dark-sakura"] .customization-empty,
html[data-theme="dark-sakura"] .coming-soon-setting {
  background: #1b1018 !important;
  border-color: #5b314b !important;
}

html[data-theme="dark-sakura"] .privacy-box {
  background: linear-gradient(145deg,#2d1827,#23131f) !important;
  border-color: #7a3d62 !important;
}

html[data-theme="dark-sakura"] .privacy-box h3 {
  color: #f9a8d4 !important;
}

html[data-theme="dark-sakura"] .danger-zone,
html[data-theme="dark-sakura"] .admin-card {
  background: linear-gradient(145deg,#2a1118,#201016) !important;
  border-color: #7f1d1d !important;
}

/* LEADERBOARD */
html[data-theme="dark-sakura"] .join-leaderboard {
  background: linear-gradient(135deg,#2d1827,#31182c) !important;
  border-color: #6b3655 !important;
}

html[data-theme="dark-sakura"] .leaderboard-table {
  background: #23131f !important;
}

html[data-theme="dark-sakura"] .leaderboard-table th {
  background: #2d1827 !important;
  color: #d2a9bd !important;
  border-color: #5b314b !important;
}

html[data-theme="dark-sakura"] .leaderboard-table td {
  background: #23131f !important;
  color: #f0dbe5 !important;
  border-color: #5b314b !important;
}

html[data-theme="dark-sakura"] .leaderboard-table tbody tr:hover td {
  background: #2d1827 !important;
}

html[data-theme="dark-sakura"] .leaderboard-table tbody tr.is-me td {
  background: #351a2d !important;
}

/* PODIUM */
html[data-theme="dark-sakura"] .podium-card.first,
html[data-theme="dark-sakura"] .podium-card.second,
html[data-theme="dark-sakura"] .podium-card.third {
  background: #23131f !important;
}

/* RHYTHM */
html[data-theme="dark-sakura"] .rhythm-display {
  background: linear-gradient(145deg,#23131f,#2b1726) !important;
  border-color: #6b3655 !important;
}

html[data-theme="dark-sakura"] .rhythm-text,
html[data-theme="dark-sakura"] .rhythm-operator {
  color: #f9a8d4 !important;
}

html[data-theme="dark-sakura"] .question-progress {
  background: #4a293d !important;
}

/* PRACTICE JOURNAL */
html[data-theme="dark-sakura"] .journal-note {
  background: linear-gradient(145deg,#23131f,#241721) !important;
  border-color: #5b314b !important;
}

html[data-theme="dark-sakura"] .journal-note:hover {
  background: #2d1827 !important;
  border-color: #ec4899 !important;
}

html[data-theme="dark-sakura"] .empty-state {
  background: #23131f !important;
  border-color: #5b314b !important;
  color: #d2a9bd !important;
}

/* PRACTICE PLANNER */
html[data-theme="dark-sakura"] .audition-box,
html[data-theme="dark-sakura"] .weekly-goal {
  background: linear-gradient(135deg,#2b1726,#23131f) !important;
  border-color: #6b3655 !important;
}

html[data-theme="dark-sakura"] .practice-block {
  border-color: #5b314b !important;
}

/* MUSIC GAMES */
html[data-theme="dark-sakura"] .note-card,
html[data-theme="dark-sakura"] .rhythm-card,
html[data-theme="dark-sakura"] .interval-card,
html[data-theme="dark-sakura"] .ear-card,
html[data-theme="dark-sakura"] .harmony-card,
html[data-theme="dark-sakura"] .key-card,
html[data-theme="dark-sakura"] .info-box {
  background: linear-gradient(145deg,#2d1827,#23131f) !important;
  border-color: #5b314b !important;
}

/* FAVORITES */
html[data-theme="dark-sakura"] .favorite-card img,
html[data-theme="dark-sakura"] .score-choice img {
  background: #2d1827 !important;
}

html[data-theme="dark-sakura"] .collection-icon {
  background: #3a2033 !important;
  color: #f9a8d4 !important;
}

/* ADAPTIVE */
html[data-theme="dark-sakura"] .accuracy-box,
html[data-theme="dark-sakura"] .signal-card {
  background: #2d1827 !important;
}

html[data-theme="dark-sakura"] .why-box,
html[data-theme="dark-sakura"] .how-card,
html[data-theme="dark-sakura"] .plan-card {
  background: linear-gradient(145deg,#2d1827,#23131f) !important;
}

html[data-theme="dark-sakura"] .skill-mini-bar {
  background: #4a293d !important;
}

/* DASHBOARD */
html[data-theme="dark-sakura"] .mini-profile {
  background: linear-gradient(145deg,#281522,#23131f) !important;
}

html[data-theme="dark-sakura"] .continue-item,
html[data-theme="dark-sakura"] .top-stat,
html[data-theme="dark-sakura"] .quick-item {
  background: #2d1827 !important;
}

html[data-theme="dark-sakura"] .journal-strip {
  background: linear-gradient(135deg,#271620,#23131f) !important;
  border-color: #6b3655 !important;
}

html[data-theme="dark-sakura"] .achievement-item {
  background: #2d1827 !important;
  border-color: #6b3655 !important;
}

html[data-theme="dark-sakura"] .achievement-item.unlocked {
  background: linear-gradient(145deg,#2d1827,#351a2d) !important;
  border-color: #9d174d !important;
}

html[data-theme="dark-sakura"] .side-stat.orange,
html[data-theme="dark-sakura"] .side-stat.yellow {
  background: #2d1827 !important;
}

/* UPDATE MODAL */
html[data-theme="dark-sakura"] .update-modal {
  background: #23131f !important;
  border-color: #6b3655 !important;
}

html[data-theme="dark-sakura"] .update-modal-header,
html[data-theme="dark-sakura"] .current-update-card {
  background: linear-gradient(145deg,#2d1827,#23131f) !important;
  border-color: #6b3655 !important;
}

html[data-theme="dark-sakura"] .update-modal-body {
  background: #23131f !important;
}

/* TEXT CLEANUP */
html[data-theme="dark-sakura"] .section-heading h2,
html[data-theme="dark-sakura"] .continue-content h3,
html[data-theme="dark-sakura"] .adaptive-info h3,
html[data-theme="dark-sakura"] .today-card strong,
html[data-theme="dark-sakura"] .mini-profile-title,
html[data-theme="dark-sakura"] .mini-profile-name,
html[data-theme="dark-sakura"] .preview-name strong,
html[data-theme="dark-sakura"] .player-text strong,
html[data-theme="dark-sakura"] .leaderboard-heading h2,
html[data-theme="dark-sakura"] .award-info h3,
html[data-theme="dark-sakura"] .collection-card h3,
html[data-theme="dark-sakura"] .modal-top h2,
html[data-theme="dark-sakura"] .plan-row strong,
html[data-theme="dark-sakura"] .game-card h3,
html[data-theme="dark-sakura"] .empty-state h3 {
  color: #fff7fb !important;
}

html[data-theme="dark-sakura"] .section-heading span,
html[data-theme="dark-sakura"] .continue-content p,
html[data-theme="dark-sakura"] .adaptive-info p,
html[data-theme="dark-sakura"] .today-card span,
html[data-theme="dark-sakura"] .mini-profile-details,
html[data-theme="dark-sakura"] .preview-name span,
html[data-theme="dark-sakura"] .player-text span,
html[data-theme="dark-sakura"] .award-description,
html[data-theme="dark-sakura"] .award-category,
html[data-theme="dark-sakura"] .plan-row span,
html[data-theme="dark-sakura"] .game-card p {
  color: #d2a9bd !important;
}

/* INLINE WHITE DASHBOARD BOX KILLER */
html[data-theme="dark-sakura"] .right-card > div[style*="background:#f8fafc"],
html[data-theme="dark-sakura"] [style*="background: white"],
html[data-theme="dark-sakura"] [style*="background:white"],
html[data-theme="dark-sakura"] [style*="background:#ffffff"],
html[data-theme="dark-sakura"] [style*="background: #ffffff"],
html[data-theme="dark-sakura"] [style*="background:#fff"],
html[data-theme="dark-sakura"] [style*="background: #fff"] {
  background: #2d1827 !important;
  border-color: #6b3655 !important;
}

/* LOADING */
html[data-theme="dark-sakura"] #loadingScreen {
  background: #160d14 !important;
  color: #f9a8d4 !important;
}

/* SCROLLBAR */
html[data-theme="dark-sakura"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html[data-theme="dark-sakura"] ::-webkit-scrollbar-track {
  background: #160d14;
}

html[data-theme="dark-sakura"] ::-webkit-scrollbar-thumb {
  background: #6b3655;
  border-radius: 999px;
}

html[data-theme="dark-sakura"] ::-webkit-scrollbar-thumb:hover {
  background: #8a456d;
}


/* =========================================================
   OPENSCORES THEME FINAL OVERRIDES
   DARK SAKURA + FOREST GREEN
   Keep this block at the VERY BOTTOM of theme.css
========================================================= */


/* =========================================================
   DARK SAKURA — FINAL COLOR CORRECTION
========================================================= */

html[data-theme="dark-sakura"],
html[data-theme="theme_dark_sakura"] {
  color-scheme: dark;

  --theme-page: #120b11;
  --theme-surface: #1c1019;
  --theme-surface-2: #281522;
  --theme-surface-3: #351b2c;

  --theme-text: #fff7fb;
  --theme-muted: #cfa8bb;
  --theme-border: #583047;

  --theme-primary: #e83e8c;
  --theme-primary-light: #f49ac2;
  --theme-primary-dark: #a91457;
}

html[data-theme="dark-sakura"] body,
html[data-theme="theme_dark_sakura"] body {
  background:
    radial-gradient(circle at 82% 0%, rgba(232,62,140,.20) 0, transparent 28%),
    radial-gradient(circle at 5% 100%, rgba(116,26,73,.15) 0, transparent 25%),
    #120b11 !important;
  color: #fff7fb !important;
}

html[data-theme="dark-sakura"] .sidebar,
html[data-theme="dark-sakura"] nav,
html[data-theme="dark-sakura"] aside,
html[data-theme="theme_dark_sakura"] .sidebar,
html[data-theme="theme_dark_sakura"] nav,
html[data-theme="theme_dark_sakura"] aside {
  background: #180d15 !important;
  border-color: #583047 !important;
}

html[data-theme="dark-sakura"] .card,
html[data-theme="dark-sakura"] .panel,
html[data-theme="dark-sakura"] .box,
html[data-theme="dark-sakura"] .top-stat,
html[data-theme="dark-sakura"] .continue-item,
html[data-theme="dark-sakura"] .today-card,
html[data-theme="dark-sakura"] .adaptive-card,
html[data-theme="dark-sakura"] .quick-item,
html[data-theme="dark-sakura"] .right-card,
html[data-theme="dark-sakura"] .mini-profile,
html[data-theme="dark-sakura"] .settings-section,
html[data-theme="dark-sakura"] .dashboard-settings-card,
html[data-theme="dark-sakura"] .customization-item,
html[data-theme="dark-sakura"] .leaderboard-preview,
html[data-theme="dark-sakura"] .balance-card,
html[data-theme="dark-sakura"] .section-header,
html[data-theme="dark-sakura"] .shop-card,
html[data-theme="dark-sakura"] .category-card,
html[data-theme="dark-sakura"] .toolbar,
html[data-theme="dark-sakura"] .podium-card,
html[data-theme="dark-sakura"] .leaderboard-card,
html[data-theme="dark-sakura"] .equipped-card,
html[data-theme="dark-sakura"] .controls-card,
html[data-theme="dark-sakura"] .award-card,
html[data-theme="dark-sakura"] .journal-note,
html[data-theme="dark-sakura"] .modal-card,
html[data-theme="dark-sakura"] .day-card,
html[data-theme="dark-sakura"] .game-card,
html[data-theme="dark-sakura"] .favorite-card,
html[data-theme="dark-sakura"] .collection-card,
html[data-theme="dark-sakura"] .collection-empty,
html[data-theme="dark-sakura"] .collection-modal,
html[data-theme="dark-sakura"] .score-choice,
html[data-theme="dark-sakura"] .collection-view-score,
html[data-theme="dark-sakura"] .accuracy-box,
html[data-theme="dark-sakura"] .why-box,
html[data-theme="dark-sakura"] .signal-card,
html[data-theme="dark-sakura"] .how-card,
html[data-theme="dark-sakura"] .plan-card,
html[data-theme="theme_dark_sakura"] .card,
html[data-theme="theme_dark_sakura"] .panel,
html[data-theme="theme_dark_sakura"] .box,
html[data-theme="theme_dark_sakura"] .top-stat,
html[data-theme="theme_dark_sakura"] .continue-item,
html[data-theme="theme_dark_sakura"] .today-card,
html[data-theme="theme_dark_sakura"] .adaptive-card,
html[data-theme="theme_dark_sakura"] .quick-item,
html[data-theme="theme_dark_sakura"] .right-card,
html[data-theme="theme_dark_sakura"] .mini-profile,
html[data-theme="theme_dark_sakura"] .settings-section,
html[data-theme="theme_dark_sakura"] .dashboard-settings-card,
html[data-theme="theme_dark_sakura"] .customization-item,
html[data-theme="theme_dark_sakura"] .leaderboard-preview,
html[data-theme="theme_dark_sakura"] .balance-card,
html[data-theme="theme_dark_sakura"] .section-header,
html[data-theme="theme_dark_sakura"] .shop-card,
html[data-theme="theme_dark_sakura"] .category-card {
  background: #1c1019 !important;
  border-color: #583047 !important;
  color: #fff7fb !important;
}

html[data-theme="dark-sakura"] .side-link.active,
html[data-theme="theme_dark_sakura"] .side-link.active {
  background: linear-gradient(135deg,#a91457,#e83e8c) !important;
  color: white !important;
}

html[data-theme="dark-sakura"] .page-header,
html[data-theme="theme_dark_sakura"] .page-header {
  background:
    radial-gradient(circle at 90% 15%,rgba(255,255,255,.12),transparent 30%),
    linear-gradient(135deg,#4b1532,#a91457 55%,#e83e8c) !important;
}

html[data-theme="dark-sakura"] .button,
html[data-theme="dark-sakura"] .primary-button,
html[data-theme="dark-sakura"] .small-button,
html[data-theme="dark-sakura"] .adaptive-button,
html[data-theme="theme_dark_sakura"] .button,
html[data-theme="theme_dark_sakura"] .primary-button,
html[data-theme="theme_dark_sakura"] .small-button,
html[data-theme="theme_dark_sakura"] .adaptive-button {
  background: linear-gradient(135deg,#a91457,#e83e8c) !important;
  color: white !important;
}

html[data-theme="dark-sakura"] input,
html[data-theme="dark-sakura"] textarea,
html[data-theme="dark-sakura"] select,
html[data-theme="theme_dark_sakura"] input,
html[data-theme="theme_dark_sakura"] textarea,
html[data-theme="theme_dark_sakura"] select {
  background: #281522 !important;
  border-color: #673651 !important;
  color: #fff7fb !important;
}


/* =========================================================
   FOREST GREEN — FINAL LIGHT THEME FIX
   PUT THIS AT THE ABSOLUTE BOTTOM OF theme.css
========================================================= */

html[data-theme="forest"],
html[data-theme="theme_forest"] {
  color-scheme: light !important;

  --theme-page: #f4fbf6;
  --theme-surface: #ffffff;
  --theme-surface-2: #f0fdf4;
  --theme-surface-3: #dcfce7;

  --theme-text: #111827;
  --theme-muted: #64748b;
  --theme-border: #d8eadc;

  --theme-primary: #15803d;
  --theme-primary-light: #4ade80;
  --theme-primary-dark: #166534;
}


/* =========================================================
   PAGE
========================================================= */

html[data-theme="forest"] body,
html[data-theme="theme_forest"] body {
  background:
    radial-gradient(
      circle at 85% 0%,
      #dcfce7 0,
      transparent 25%
    ),
    #f5f8fd !important;

  color: #111827 !important;
}


/* =========================================================
   MAIN PAGE AREAS
========================================================= */

html[data-theme="forest"] main,
html[data-theme="forest"] .main,
html[data-theme="forest"] .main-content,
html[data-theme="forest"] .content,
html[data-theme="forest"] .page,
html[data-theme="forest"] .page-content,
html[data-theme="forest"] .dashboard,
html[data-theme="forest"] .dashboard-main,

html[data-theme="theme_forest"] main,
html[data-theme="theme_forest"] .main,
html[data-theme="theme_forest"] .main-content,
html[data-theme="theme_forest"] .content,
html[data-theme="theme_forest"] .page,
html[data-theme="theme_forest"] .page-content,
html[data-theme="theme_forest"] .dashboard,
html[data-theme="theme_forest"] .dashboard-main {
  background-color: transparent !important;
  color: #111827 !important;
}


/* =========================================================
   SIDEBAR / NAV
========================================================= */

html[data-theme="forest"] .sidebar,
html[data-theme="forest"] nav,
html[data-theme="forest"] .navbar,
html[data-theme="forest"] aside,

html[data-theme="theme_forest"] .sidebar,
html[data-theme="theme_forest"] nav,
html[data-theme="theme_forest"] .navbar,
html[data-theme="theme_forest"] aside {
  background: rgba(255,255,255,.98) !important;
  border-color: #d8eadc !important;
  color: #111827 !important;
}


/* =========================================================
   BRAND
========================================================= */

html[data-theme="forest"] .brand-icon,
html[data-theme="theme_forest"] .brand-icon {
  background:
    linear-gradient(
      135deg,
      #166534,
      #22c55e
    ) !important;

  color: white !important;
}

html[data-theme="forest"] .brand strong,
html[data-theme="forest"] .brand-text strong,
html[data-theme="theme_forest"] .brand strong,
html[data-theme="theme_forest"] .brand-text strong {
  color: #14532d !important;
}

html[data-theme="forest"] .brand span,
html[data-theme="forest"] .brand-text span,
html[data-theme="theme_forest"] .brand span,
html[data-theme="theme_forest"] .brand-text span {
  color: #15803d !important;
}


/* =========================================================
   SIDEBAR LINKS
========================================================= */

html[data-theme="forest"] .side-link,
html[data-theme="theme_forest"] .side-link {
  color: #334155 !important;
}

html[data-theme="forest"] .side-link:hover,
html[data-theme="theme_forest"] .side-link:hover {
  background: #f0fdf4 !important;
  color: #15803d !important;
}

html[data-theme="forest"] .side-link.active,
html[data-theme="theme_forest"] .side-link.active {
  background:
    linear-gradient(
      135deg,
      #166534,
      #22c55e
    ) !important;

  color: white !important;

  box-shadow:
    0 8px 18px
    rgba(21,128,61,.18) !important;
}


/* =========================================================
   BACK BUTTONS
========================================================= */

html[data-theme="forest"] .back-to-site,
html[data-theme="forest"] .back-shop-button,
html[data-theme="forest"] .dashboard-return,

html[data-theme="theme_forest"] .back-to-site,
html[data-theme="theme_forest"] .back-shop-button,
html[data-theme="theme_forest"] .dashboard-return {
  background: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
  color: #15803d !important;
}

html[data-theme="forest"] .back-to-site:hover,
html[data-theme="forest"] .back-shop-button:hover,
html[data-theme="forest"] .dashboard-return:hover,

html[data-theme="theme_forest"] .back-to-site:hover,
html[data-theme="theme_forest"] .back-shop-button:hover,
html[data-theme="theme_forest"] .dashboard-return:hover {
  background: #dcfce7 !important;
}


/* =========================================================
   ALL MAIN CARDS — WHITE
========================================================= */

html[data-theme="forest"] .card,
html[data-theme="forest"] .panel,
html[data-theme="forest"] .box,
html[data-theme="forest"] .section-card,
html[data-theme="forest"] .stat-card,
html[data-theme="forest"] .top-stat,
html[data-theme="forest"] .quick-item,
html[data-theme="forest"] .continue-item,
html[data-theme="forest"] .today-card,
html[data-theme="forest"] .adaptive-card,
html[data-theme="forest"] .achievement-item,
html[data-theme="forest"] .mini-profile,
html[data-theme="forest"] .journal-strip,
html[data-theme="forest"] .settings-section,
html[data-theme="forest"] .dashboard-settings-card,
html[data-theme="forest"] .customization-item,
html[data-theme="forest"] .leaderboard-preview,
html[data-theme="forest"] .balance-card,
html[data-theme="forest"] .section-header,
html[data-theme="forest"] .shop-card,
html[data-theme="forest"] .category-card,
html[data-theme="forest"] .toolbar,
html[data-theme="forest"] .podium-card,
html[data-theme="forest"] .leaderboard-card,
html[data-theme="forest"] .report-card,
html[data-theme="forest"] .equipped-card,
html[data-theme="forest"] .controls-card,
html[data-theme="forest"] .award-card,
html[data-theme="forest"] .journal-note,
html[data-theme="forest"] .modal-card,
html[data-theme="forest"] .day-card,
html[data-theme="forest"] .game-card,
html[data-theme="forest"] .favorite-card,
html[data-theme="forest"] .collection-card,
html[data-theme="forest"] .collection-empty,
html[data-theme="forest"] .collection-modal,
html[data-theme="forest"] .score-choice,
html[data-theme="forest"] .collection-view-score,
html[data-theme="forest"] .accuracy-box,
html[data-theme="forest"] .why-box,
html[data-theme="forest"] .signal-card,
html[data-theme="forest"] .how-card,
html[data-theme="forest"] .plan-card,

html[data-theme="theme_forest"] .card,
html[data-theme="theme_forest"] .panel,
html[data-theme="theme_forest"] .box,
html[data-theme="theme_forest"] .section-card,
html[data-theme="theme_forest"] .stat-card,
html[data-theme="theme_forest"] .top-stat,
html[data-theme="theme_forest"] .quick-item,
html[data-theme="theme_forest"] .continue-item,
html[data-theme="theme_forest"] .today-card,
html[data-theme="theme_forest"] .adaptive-card,
html[data-theme="theme_forest"] .achievement-item,
html[data-theme="theme_forest"] .mini-profile,
html[data-theme="theme_forest"] .journal-strip,
html[data-theme="theme_forest"] .settings-section,
html[data-theme="theme_forest"] .dashboard-settings-card,
html[data-theme="theme_forest"] .customization-item,
html[data-theme="theme_forest"] .leaderboard-preview,
html[data-theme="theme_forest"] .balance-card,
html[data-theme="theme_forest"] .section-header,
html[data-theme="theme_forest"] .shop-card,
html[data-theme="theme_forest"] .category-card,
html[data-theme="theme_forest"] .toolbar,
html[data-theme="theme_forest"] .podium-card,
html[data-theme="theme_forest"] .leaderboard-card,
html[data-theme="theme_forest"] .report-card,
html[data-theme="theme_forest"] .equipped-card,
html[data-theme="theme_forest"] .controls-card,
html[data-theme="theme_forest"] .award-card,
html[data-theme="theme_forest"] .journal-note,
html[data-theme="theme_forest"] .modal-card,
html[data-theme="theme_forest"] .day-card,
html[data-theme="theme_forest"] .game-card,
html[data-theme="theme_forest"] .favorite-card,
html[data-theme="theme_forest"] .collection-card,
html[data-theme="theme_forest"] .collection-empty,
html[data-theme="theme_forest"] .collection-modal,
html[data-theme="theme_forest"] .score-choice,
html[data-theme="theme_forest"] .collection-view-score,
html[data-theme="theme_forest"] .accuracy-box,
html[data-theme="theme_forest"] .why-box,
html[data-theme="theme_forest"] .signal-card,
html[data-theme="theme_forest"] .how-card,
html[data-theme="theme_forest"] .plan-card {
  background: #ffffff !important;
  border-color: #d8eadc !important;
  color: #111827 !important;
}


/* =========================================================
   RIGHT PANEL
========================================================= */

html[data-theme="forest"] .right-panel,
html[data-theme="theme_forest"] .right-panel {
  background: rgba(248,250,252,.92) !important;
  border-color: #d8eadc !important;
  color: #111827 !important;
}


/* =========================================================
   TEXT
========================================================= */

html[data-theme="forest"] h1,
html[data-theme="forest"] h2,
html[data-theme="forest"] h3,
html[data-theme="forest"] h4,
html[data-theme="forest"] h5,
html[data-theme="forest"] h6,
html[data-theme="forest"] strong,
html[data-theme="forest"] label,

html[data-theme="theme_forest"] h1,
html[data-theme="theme_forest"] h2,
html[data-theme="theme_forest"] h3,
html[data-theme="theme_forest"] h4,
html[data-theme="theme_forest"] h5,
html[data-theme="theme_forest"] h6,
html[data-theme="theme_forest"] strong,
html[data-theme="theme_forest"] label {
  color: #111827 !important;
}

html[data-theme="forest"] p,
html[data-theme="forest"] small,
html[data-theme="forest"] span,
html[data-theme="forest"] .description,
html[data-theme="forest"] .field-help,
html[data-theme="forest"] .muted,
html[data-theme="forest"] .subtitle,

html[data-theme="theme_forest"] p,
html[data-theme="theme_forest"] small,
html[data-theme="theme_forest"] span,
html[data-theme="theme_forest"] .description,
html[data-theme="theme_forest"] .field-help,
html[data-theme="theme_forest"] .muted,
html[data-theme="theme_forest"] .subtitle {
  color: #64748b;
}


/* =========================================================
   LINKS
========================================================= */

html[data-theme="forest"] a,
html[data-theme="theme_forest"] a {
  color: #15803d;
}

html[data-theme="forest"] a:hover,
html[data-theme="theme_forest"] a:hover {
  color: #166534;
}


/* =========================================================
   PRIMARY BUTTONS
========================================================= */

html[data-theme="forest"] .button,
html[data-theme="forest"] .btn,
html[data-theme="forest"] .primary-button,
html[data-theme="forest"] .main-button,
html[data-theme="forest"] .small-button,
html[data-theme="forest"] .adaptive-button,
html[data-theme="forest"] .btn-primary,

html[data-theme="theme_forest"] .button,
html[data-theme="theme_forest"] .btn,
html[data-theme="theme_forest"] .primary-button,
html[data-theme="theme_forest"] .main-button,
html[data-theme="theme_forest"] .small-button,
html[data-theme="theme_forest"] .adaptive-button,
html[data-theme="theme_forest"] .btn-primary {
  background:
    linear-gradient(
      135deg,
      #166534,
      #22c55e
    ) !important;

  border-color: #22c55e !important;
  color: white !important;
}


/* =========================================================
   SECONDARY BUTTONS
========================================================= */

html[data-theme="forest"] .secondary-button,
html[data-theme="forest"] .sort-button,
html[data-theme="forest"] .filter-button,
html[data-theme="forest"] .choice-button,
html[data-theme="forest"] .answer-button,
html[data-theme="forest"] .check-option,

html[data-theme="theme_forest"] .secondary-button,
html[data-theme="theme_forest"] .sort-button,
html[data-theme="theme_forest"] .filter-button,
html[data-theme="theme_forest"] .choice-button,
html[data-theme="theme_forest"] .answer-button,
html[data-theme="theme_forest"] .check-option {
  background: #ffffff !important;
  border-color: #d8eadc !important;
  color: #334155 !important;
}

html[data-theme="forest"] .secondary-button:hover,
html[data-theme="forest"] .sort-button:hover,
html[data-theme="forest"] .filter-button:hover,
html[data-theme="forest"] .choice-button:hover,
html[data-theme="forest"] .answer-button:hover,

html[data-theme="theme_forest"] .secondary-button:hover,
html[data-theme="theme_forest"] .sort-button:hover,
html[data-theme="theme_forest"] .filter-button:hover,
html[data-theme="theme_forest"] .choice-button:hover,
html[data-theme="theme_forest"] .answer-button:hover {
  background: #f0fdf4 !important;
  border-color: #4ade80 !important;
  color: #15803d !important;
}


/* =========================================================
   INPUTS
========================================================= */

html[data-theme="forest"] input,
html[data-theme="forest"] textarea,
html[data-theme="forest"] select,

html[data-theme="theme_forest"] input,
html[data-theme="theme_forest"] textarea,
html[data-theme="theme_forest"] select {
  background: #f8fafc !important;
  border-color: #d8eadc !important;
  color: #111827 !important;
}

html[data-theme="forest"] input:focus,
html[data-theme="forest"] textarea:focus,
html[data-theme="forest"] select:focus,

html[data-theme="theme_forest"] input:focus,
html[data-theme="theme_forest"] textarea:focus,
html[data-theme="theme_forest"] select:focus {
  background: #ffffff !important;
  border-color: #22c55e !important;

  box-shadow:
    0 0 0 3px
    rgba(34,197,94,.11) !important;
}


/* =========================================================
   PAGE HEADER
========================================================= */

html[data-theme="forest"] .page-header,
html[data-theme="theme_forest"] .page-header {
  background:
    radial-gradient(
      circle at 90% 15%,
      rgba(255,255,255,.20),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #14532d,
      #15803d 55%,
      #4ade80
    ) !important;

  color: white !important;

  box-shadow:
    0 16px 35px
    rgba(21,128,61,.18) !important;
}

html[data-theme="forest"] .page-header h1,
html[data-theme="forest"] .page-header h2,
html[data-theme="forest"] .page-header p,
html[data-theme="forest"] .page-header span,
html[data-theme="forest"] .page-header strong,

html[data-theme="theme_forest"] .page-header h1,
html[data-theme="theme_forest"] .page-header h2,
html[data-theme="theme_forest"] .page-header p,
html[data-theme="theme_forest"] .page-header span,
html[data-theme="theme_forest"] .page-header strong {
  color: white !important;
}


/* =========================================================
   CUSTOMIZATION
========================================================= */

html[data-theme="forest"] .dashboard-settings-card,
html[data-theme="theme_forest"] .dashboard-settings-card {
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f8fff9
    ) !important;

  border-color: #bbf7d0 !important;
}

html[data-theme="forest"] .customization-section,
html[data-theme="theme_forest"] .customization-section {
  background: transparent !important;
  border-color: #e5efe8 !important;
}

html[data-theme="forest"] .customization-item,
html[data-theme="theme_forest"] .customization-item {
  background: white !important;
  border-color: #d8eadc !important;
  color: #111827 !important;
}

html[data-theme="forest"] .customization-item.selected,
html[data-theme="theme_forest"] .customization-item.selected {
  background: #f0fdf4 !important;
  border-color: #15803d !important;

  box-shadow:
    0 0 0 2px
    rgba(21,128,61,.10) !important;
}

html[data-theme="forest"] .customization-preview,
html[data-theme="theme_forest"] .customization-preview {
  background: #f0fdf4 !important;
}

html[data-theme="forest"] .customization-empty,
html[data-theme="forest"] .coming-soon-setting,
html[data-theme="theme_forest"] .customization-empty,
html[data-theme="theme_forest"] .coming-soon-setting {
  background: #f8fafc !important;
  border-color: #d8eadc !important;
  color: #64748b !important;
}


/* =========================================================
   PRIVACY
========================================================= */

html[data-theme="forest"] .privacy-box,
html[data-theme="forest"] .privacy-note,
html[data-theme="theme_forest"] .privacy-box,
html[data-theme="theme_forest"] .privacy-note {
  background:
    linear-gradient(
      145deg,
      #f0fdf4,
      #ffffff
    ) !important;

  border-color: #bbf7d0 !important;
  color: #475569 !important;
}

html[data-theme="forest"] .privacy-box h3,
html[data-theme="theme_forest"] .privacy-box h3 {
  color: #15803d !important;
}


/* =========================================================
   LEADERBOARD
========================================================= */

html[data-theme="forest"] .leaderboard-preview,
html[data-theme="theme_forest"] .leaderboard-preview {
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f0fdf4
    ) !important;

  border-color: #d8eadc !important;
}

html[data-theme="forest"] .leaderboard-table,
html[data-theme="theme_forest"] .leaderboard-table {
  background: white !important;
}

html[data-theme="forest"] .leaderboard-table th,
html[data-theme="theme_forest"] .leaderboard-table th {
  background: #f0fdf4 !important;
  color: #64748b !important;
  border-color: #d8eadc !important;
}

html[data-theme="forest"] .leaderboard-table td,
html[data-theme="theme_forest"] .leaderboard-table td {
  background: white !important;
  color: #334155 !important;
  border-color: #d8eadc !important;
}

html[data-theme="forest"] .leaderboard-table tbody tr:hover td,
html[data-theme="theme_forest"] .leaderboard-table tbody tr:hover td {
  background: #f8fff9 !important;
}


/* =========================================================
   PROGRESS
========================================================= */

html[data-theme="forest"] .progress-bar,
html[data-theme="forest"] .skill-bar,
html[data-theme="forest"] .mini-progress,
html[data-theme="forest"] .achievement-progress-bar,
html[data-theme="forest"] .skill-mini-bar,

html[data-theme="theme_forest"] .progress-bar,
html[data-theme="theme_forest"] .skill-bar,
html[data-theme="theme_forest"] .mini-progress,
html[data-theme="theme_forest"] .achievement-progress-bar,
html[data-theme="theme_forest"] .skill-mini-bar {
  background: #dcfce7 !important;
}

html[data-theme="forest"] .progress-fill,
html[data-theme="forest"] .skill-fill,
html[data-theme="forest"] .mini-progress-fill,
html[data-theme="forest"] .achievement-progress-fill,

html[data-theme="theme_forest"] .progress-fill,
html[data-theme="theme_forest"] .skill-fill,
html[data-theme="theme_forest"] .mini-progress-fill,
html[data-theme="theme_forest"] .achievement-progress-fill {
  background:
    linear-gradient(
      90deg,
      #15803d,
      #4ade80
    ) !important;
}


/* =========================================================
   MODALS
========================================================= */

html[data-theme="forest"] .modal,
html[data-theme="forest"] .modal-content,
html[data-theme="forest"] .modal-card,
html[data-theme="forest"] .update-modal,
html[data-theme="forest"] .update-modal-body,

html[data-theme="theme_forest"] .modal,
html[data-theme="theme_forest"] .modal-content,
html[data-theme="theme_forest"] .modal-card,
html[data-theme="theme_forest"] .update-modal,
html[data-theme="theme_forest"] .update-modal-body {
  background: #ffffff !important;
  border-color: #d8eadc !important;
  color: #111827 !important;
}

html[data-theme="forest"] .update-modal-header,
html[data-theme="forest"] .current-update-card,
html[data-theme="theme_forest"] .update-modal-header,
html[data-theme="theme_forest"] .current-update-card {
  background:
    linear-gradient(
      145deg,
      #f0fdf4,
      #ffffff
    ) !important;

  border-color: #d8eadc !important;
}


/* =========================================================
   SHOP
========================================================= */

html[data-theme="forest"] .shop-card,
html[data-theme="forest"] .category-card,
html[data-theme="forest"] .balance-card,

html[data-theme="theme_forest"] .shop-card,
html[data-theme="theme_forest"] .category-card,
html[data-theme="theme_forest"] .balance-card {
  background: #ffffff !important;
  border-color: #d8eadc !important;
  color: #111827 !important;
}

html[data-theme="forest"] .shop-card:hover,
html[data-theme="forest"] .category-card:hover,
html[data-theme="theme_forest"] .shop-card:hover,
html[data-theme="theme_forest"] .category-card:hover {
  border-color: #4ade80 !important;

  box-shadow:
    0 13px 28px
    rgba(21,128,61,.10) !important;
}

html[data-theme="forest"] .visual,
html[data-theme="theme_forest"] .visual {
  background: #f0fdf4 !important;
  border-color: #d8eadc !important;
}


/* =========================================================
   FORCE ANY OLD DARK INLINE BOXES BACK TO LIGHT
========================================================= */

html[data-theme="forest"] [style*="background:#0d2118"],
html[data-theme="forest"] [style*="background: #0d2118"],
html[data-theme="forest"] [style*="background:#123022"],
html[data-theme="forest"] [style*="background: #123022"],
html[data-theme="forest"] [style*="background:#091a13"],
html[data-theme="forest"] [style*="background: #091a13"],

html[data-theme="theme_forest"] [style*="background:#0d2118"],
html[data-theme="theme_forest"] [style*="background: #0d2118"],
html[data-theme="theme_forest"] [style*="background:#123022"],
html[data-theme="theme_forest"] [style*="background: #123022"],
html[data-theme="theme_forest"] [style*="background:#091a13"],
html[data-theme="theme_forest"] [style*="background: #091a13"] {
  background: #ffffff !important;
  border-color: #d8eadc !important;
  color: #111827 !important;
}


/* =========================================================
   LOADING SCREEN
========================================================= */

html[data-theme="forest"] #loadingScreen,
html[data-theme="theme_forest"] #loadingScreen {
  background: #f4fbf6 !important;
  color: #15803d !important;
}


/* =========================================================
   SCROLLBAR
========================================================= */

html[data-theme="forest"] ::-webkit-scrollbar-track,
html[data-theme="theme_forest"] ::-webkit-scrollbar-track {
  background: #f0fdf4 !important;
}

html[data-theme="forest"] ::-webkit-scrollbar-thumb,
html[data-theme="theme_forest"] ::-webkit-scrollbar-thumb {
  background: #86efac !important;
  border-radius: 999px;
}

html[data-theme="forest"] ::-webkit-scrollbar-thumb:hover,
html[data-theme="theme_forest"] ::-webkit-scrollbar-thumb:hover {
  background: #4ade80 !important;
}

/* =========================================================
   GOLD THEME — FULL REPLACEMENT
   OpenScores Hub
   Light cream + soft gold surfaces + dark gold accents
========================================================= */

html[data-theme="gold"],
html[data-theme="theme_gold"] {
  color-scheme: light;

  --theme-page: #fff9e8;
  --theme-surface: #fff8dc;
  --theme-surface-2: #fff2bf;
  --theme-surface-3: #ffe8a0;

  --theme-text: #3b2d00;
  --theme-muted: #806a27;
  --theme-border: #e3c65d;

  --theme-primary: #c58b00;
  --theme-primary-light: #e9b92f;
  --theme-primary-dark: #8a6000;
}


/* =========================================================
   PAGE
========================================================= */

html[data-theme="gold"] body,
html[data-theme="theme_gold"] body {
  background:
    radial-gradient(
      circle at 85% 0%,
      #ffe9a6 0,
      transparent 25%
    ),
    #fff9e8 !important;

  color: #3b2d00 !important;
}


/* =========================================================
   MAIN CONTENT
========================================================= */

html[data-theme="gold"] main,
html[data-theme="gold"] .main,
html[data-theme="gold"] .main-content,
html[data-theme="gold"] .content,
html[data-theme="gold"] .page,
html[data-theme="gold"] .page-content,
html[data-theme="gold"] .dashboard,
html[data-theme="gold"] .dashboard-main,

html[data-theme="theme_gold"] main,
html[data-theme="theme_gold"] .main,
html[data-theme="theme_gold"] .main-content,
html[data-theme="theme_gold"] .content,
html[data-theme="theme_gold"] .page,
html[data-theme="theme_gold"] .page-content,
html[data-theme="theme_gold"] .dashboard,
html[data-theme="theme_gold"] .dashboard-main {
  background: transparent !important;
  color: #3b2d00 !important;
}


/* =========================================================
   SIDEBAR
========================================================= */

html[data-theme="gold"] .sidebar,
html[data-theme="gold"] aside,
html[data-theme="theme_gold"] .sidebar,
html[data-theme="theme_gold"] aside {
  background:
    linear-gradient(
      180deg,
      #fff8dc,
      #fff1bd
    ) !important;

  border-color: #e3c65d !important;

  color: #3b2d00 !important;
}


/* =========================================================
   BRAND
========================================================= */

html[data-theme="gold"] .brand-icon,
html[data-theme="theme_gold"] .brand-icon {
  background:
    linear-gradient(
      135deg,
      #9d6d00,
      #d69a00
    ) !important;

  color: #fff7d6 !important;
}


html[data-theme="gold"] .brand-text strong,
html[data-theme="theme_gold"] .brand-text strong {
  color: #684900 !important;
}


html[data-theme="gold"] .brand-text span,
html[data-theme="theme_gold"] .brand-text span {
  color: #a87500 !important;
}


/* =========================================================
   SIDEBAR LABELS
========================================================= */

html[data-theme="gold"] .sidebar-label,
html[data-theme="theme_gold"] .sidebar-label {
  color: #9a7b29 !important;
}


/* =========================================================
   SIDEBAR LINKS
========================================================= */

html[data-theme="gold"] .side-link,
html[data-theme="theme_gold"] .side-link {
  color: #5c4a13 !important;
}


html[data-theme="gold"] .side-link:hover,
html[data-theme="theme_gold"] .side-link:hover {
  background: #ffedaa !important;

  color: #8a6000 !important;
}


html[data-theme="gold"] .side-link.active,
html[data-theme="theme_gold"] .side-link.active {
  background:
    linear-gradient(
      135deg,
      #a87200,
      #d79b00
    ) !important;

  color: #fff8da !important;

  box-shadow:
    0 8px 18px
    rgba(150,103,0,.18) !important;
}


/* =========================================================
   BACK BUTTONS
========================================================= */

html[data-theme="gold"] .back-to-site,
html[data-theme="gold"] .back-shop-button,
html[data-theme="gold"] .dashboard-return,

html[data-theme="theme_gold"] .back-to-site,
html[data-theme="theme_gold"] .back-shop-button,
html[data-theme="theme_gold"] .dashboard-return {
  background: #ffe9a0 !important;

  border-color: #daba47 !important;

  color: #755200 !important;
}


html[data-theme="gold"] .back-to-site:hover,
html[data-theme="gold"] .back-shop-button:hover,
html[data-theme="gold"] .dashboard-return:hover,

html[data-theme="theme_gold"] .back-to-site:hover,
html[data-theme="theme_gold"] .back-shop-button:hover,
html[data-theme="theme_gold"] .dashboard-return:hover {
  background: #ffdf70 !important;
}


/* =========================================================
   GENERAL CARDS
========================================================= */

html[data-theme="gold"] .card,
html[data-theme="gold"] .panel,
html[data-theme="gold"] .box,
html[data-theme="gold"] .section-card,
html[data-theme="gold"] .stat-card,
html[data-theme="gold"] .top-stat,
html[data-theme="gold"] .quick-item,
html[data-theme="gold"] .continue-item,
html[data-theme="gold"] .today-card,
html[data-theme="gold"] .adaptive-card,
html[data-theme="gold"] .achievement-item,
html[data-theme="gold"] .mini-profile,
html[data-theme="gold"] .journal-strip,
html[data-theme="gold"] .settings-section,
html[data-theme="gold"] .dashboard-settings-card,
html[data-theme="gold"] .customization-item,
html[data-theme="gold"] .leaderboard-preview,
html[data-theme="gold"] .balance-card,
html[data-theme="gold"] .section-header,
html[data-theme="gold"] .shop-card,
html[data-theme="gold"] .category-card,
html[data-theme="gold"] .toolbar,
html[data-theme="gold"] .podium-card,
html[data-theme="gold"] .leaderboard-card,
html[data-theme="gold"] .report-card,
html[data-theme="gold"] .equipped-card,
html[data-theme="gold"] .controls-card,
html[data-theme="gold"] .award-card,
html[data-theme="gold"] .journal-note,
html[data-theme="gold"] .modal-card,
html[data-theme="gold"] .day-card,
html[data-theme="gold"] .game-card,
html[data-theme="gold"] .favorite-card,
html[data-theme="gold"] .collection-card,
html[data-theme="gold"] .collection-empty,
html[data-theme="gold"] .collection-modal,
html[data-theme="gold"] .score-choice,
html[data-theme="gold"] .collection-view-score,
html[data-theme="gold"] .accuracy-box,
html[data-theme="gold"] .why-box,
html[data-theme="gold"] .signal-card,
html[data-theme="gold"] .how-card,
html[data-theme="gold"] .plan-card,

html[data-theme="theme_gold"] .card,
html[data-theme="theme_gold"] .panel,
html[data-theme="theme_gold"] .box,
html[data-theme="theme_gold"] .section-card,
html[data-theme="theme_gold"] .stat-card,
html[data-theme="theme_gold"] .top-stat,
html[data-theme="theme_gold"] .quick-item,
html[data-theme="theme_gold"] .continue-item,
html[data-theme="theme_gold"] .today-card,
html[data-theme="theme_gold"] .adaptive-card,
html[data-theme="theme_gold"] .achievement-item,
html[data-theme="theme_gold"] .mini-profile,
html[data-theme="theme_gold"] .journal-strip,
html[data-theme="theme_gold"] .settings-section,
html[data-theme="theme_gold"] .dashboard-settings-card,
html[data-theme="theme_gold"] .customization-item,
html[data-theme="theme_gold"] .leaderboard-preview,
html[data-theme="theme_gold"] .balance-card,
html[data-theme="theme_gold"] .section-header,
html[data-theme="theme_gold"] .shop-card,
html[data-theme="theme_gold"] .category-card,
html[data-theme="theme_gold"] .toolbar,
html[data-theme="theme_gold"] .podium-card,
html[data-theme="theme_gold"] .leaderboard-card,
html[data-theme="theme_gold"] .report-card,
html[data-theme="theme_gold"] .equipped-card,
html[data-theme="theme_gold"] .controls-card,
html[data-theme="theme_gold"] .award-card,
html[data-theme="theme_gold"] .journal-note,
html[data-theme="theme_gold"] .modal-card,
html[data-theme="theme_gold"] .day-card,
html[data-theme="theme_gold"] .game-card,
html[data-theme="theme_gold"] .favorite-card,
html[data-theme="theme_gold"] .collection-card,
html[data-theme="theme_gold"] .collection-empty,
html[data-theme="theme_gold"] .collection-modal,
html[data-theme="theme_gold"] .score-choice,
html[data-theme="theme_gold"] .collection-view-score,
html[data-theme="theme_gold"] .accuracy-box,
html[data-theme="theme_gold"] .why-box,
html[data-theme="theme_gold"] .signal-card,
html[data-theme="theme_gold"] .how-card,
html[data-theme="theme_gold"] .plan-card {
  background:
    linear-gradient(
      145deg,
      #fff9e3,
      #fff2c2
    ) !important;

  border-color: #e3c65d !important;

  color: #3b2d00 !important;

  box-shadow:
    0 9px 24px
    rgba(120,82,0,.07) !important;
}


/* =========================================================
   RIGHT PANEL
========================================================= */

html[data-theme="gold"] .right-panel,
html[data-theme="theme_gold"] .right-panel {
  background: #fff4ca !important;

  border-color: #e3c65d !important;

  color: #3b2d00 !important;
}


/* =========================================================
   TEXT
========================================================= */

html[data-theme="gold"] h1,
html[data-theme="gold"] h2,
html[data-theme="gold"] h3,
html[data-theme="gold"] h4,
html[data-theme="gold"] h5,
html[data-theme="gold"] h6,
html[data-theme="gold"] strong,
html[data-theme="gold"] label,

html[data-theme="theme_gold"] h1,
html[data-theme="theme_gold"] h2,
html[data-theme="theme_gold"] h3,
html[data-theme="theme_gold"] h4,
html[data-theme="theme_gold"] h5,
html[data-theme="theme_gold"] h6,
html[data-theme="theme_gold"] strong,
html[data-theme="theme_gold"] label {
  color: #4f3900 !important;
}


html[data-theme="gold"] p,
html[data-theme="gold"] small,
html[data-theme="gold"] .description,
html[data-theme="gold"] .field-help,
html[data-theme="gold"] .muted,
html[data-theme="gold"] .subtitle,

html[data-theme="theme_gold"] p,
html[data-theme="theme_gold"] small,
html[data-theme="theme_gold"] .description,
html[data-theme="theme_gold"] .field-help,
html[data-theme="theme_gold"] .muted,
html[data-theme="theme_gold"] .subtitle {
  color: #806a27 !important;
}


/* =========================================================
   LINKS
========================================================= */

html[data-theme="gold"] a,
html[data-theme="theme_gold"] a {
  color: #9a6a00;
}


html[data-theme="gold"] a:hover,
html[data-theme="theme_gold"] a:hover {
  color: #714d00;
}


/* =========================================================
   PRIMARY BUTTONS
========================================================= */

html[data-theme="gold"] .button,
html[data-theme="gold"] .btn,
html[data-theme="gold"] .primary-button,
html[data-theme="gold"] .main-button,
html[data-theme="gold"] .small-button,
html[data-theme="gold"] .adaptive-button,
html[data-theme="gold"] .btn-primary,

html[data-theme="theme_gold"] .button,
html[data-theme="theme_gold"] .btn,
html[data-theme="theme_gold"] .primary-button,
html[data-theme="theme_gold"] .main-button,
html[data-theme="theme_gold"] .small-button,
html[data-theme="theme_gold"] .adaptive-button,
html[data-theme="theme_gold"] .btn-primary {
  background:
    linear-gradient(
      135deg,
      #a87200,
      #d79b00
    ) !important;

  border-color: #c18b00 !important;

  color: #fff8d8 !important;
}


html[data-theme="gold"] .button:hover,
html[data-theme="gold"] .btn:hover,
html[data-theme="gold"] .primary-button:hover,
html[data-theme="gold"] .main-button:hover,
html[data-theme="gold"] .small-button:hover,
html[data-theme="gold"] .adaptive-button:hover,

html[data-theme="theme_gold"] .button:hover,
html[data-theme="theme_gold"] .btn:hover,
html[data-theme="theme_gold"] .primary-button:hover,
html[data-theme="theme_gold"] .main-button:hover,
html[data-theme="theme_gold"] .small-button:hover,
html[data-theme="theme_gold"] .adaptive-button:hover {
  background:
    linear-gradient(
      135deg,
      #8d6000,
      #bf8500
    ) !important;
}


/* =========================================================
   SECONDARY BUTTONS
========================================================= */

html[data-theme="gold"] .secondary-button,
html[data-theme="gold"] .sort-button,
html[data-theme="gold"] .filter-button,
html[data-theme="gold"] .choice-button,
html[data-theme="gold"] .answer-button,
html[data-theme="gold"] .check-option,

html[data-theme="theme_gold"] .secondary-button,
html[data-theme="theme_gold"] .sort-button,
html[data-theme="theme_gold"] .filter-button,
html[data-theme="theme_gold"] .choice-button,
html[data-theme="theme_gold"] .answer-button,
html[data-theme="theme_gold"] .check-option {
  background: #fff0b4 !important;

  border-color: #dfbe4b !important;

  color: #684900 !important;
}


html[data-theme="gold"] .secondary-button:hover,
html[data-theme="gold"] .sort-button:hover,
html[data-theme="gold"] .filter-button:hover,
html[data-theme="gold"] .choice-button:hover,
html[data-theme="gold"] .answer-button:hover,

html[data-theme="theme_gold"] .secondary-button:hover,
html[data-theme="theme_gold"] .sort-button:hover,
html[data-theme="theme_gold"] .filter-button:hover,
html[data-theme="theme_gold"] .choice-button:hover,
html[data-theme="theme_gold"] .answer-button:hover {
  background: #ffe38a !important;

  border-color: #c99000 !important;

  color: #5d4000 !important;
}


/* =========================================================
   INPUTS
========================================================= */

html[data-theme="gold"] input,
html[data-theme="gold"] textarea,
html[data-theme="gold"] select,

html[data-theme="theme_gold"] input,
html[data-theme="theme_gold"] textarea,
html[data-theme="theme_gold"] select {
  background: #fff9e6 !important;

  border-color: #dec25b !important;

  color: #3b2d00 !important;
}


html[data-theme="gold"] input::placeholder,
html[data-theme="gold"] textarea::placeholder,

html[data-theme="theme_gold"] input::placeholder,
html[data-theme="theme_gold"] textarea::placeholder {
  color: #a08b4d !important;
}


html[data-theme="gold"] input:focus,
html[data-theme="gold"] textarea:focus,
html[data-theme="gold"] select:focus,

html[data-theme="theme_gold"] input:focus,
html[data-theme="theme_gold"] textarea:focus,
html[data-theme="theme_gold"] select:focus {
  background: #fffdf2 !important;

  border-color: #c58b00 !important;

  box-shadow:
    0 0 0 3px
    rgba(197,139,0,.12) !important;
}


/* =========================================================
   SETTINGS CUSTOMIZATION
========================================================= */

html[data-theme="gold"] .dashboard-settings-card,
html[data-theme="theme_gold"] .dashboard-settings-card {
  background:
    linear-gradient(
      145deg,
      #fff9e6,
      #fff0b9
    ) !important;

  border-color: #dfbf4e !important;
}


html[data-theme="gold"] .customization-section,
html[data-theme="theme_gold"] .customization-section {
  background: transparent !important;

  border-color: #ead476 !important;
}


html[data-theme="gold"] .customization-item,
html[data-theme="theme_gold"] .customization-item {
  background: #fff6d1 !important;

  border-color: #dec25b !important;

  color: #3b2d00 !important;
}


html[data-theme="gold"] .customization-item:hover,
html[data-theme="theme_gold"] .customization-item:hover {
  background: #ffefb2 !important;

  border-color: #c58b00 !important;
}


html[data-theme="gold"] .customization-item.selected,
html[data-theme="theme_gold"] .customization-item.selected {
  background: #ffe99a !important;

  border-color: #b97d00 !important;

  box-shadow:
    0 0 0 2px
    rgba(185,125,0,.12) !important;
}


html[data-theme="gold"] .customization-preview,
html[data-theme="theme_gold"] .customization-preview {
  background: #ffefb5 !important;
}


html[data-theme="gold"] .customization-empty,
html[data-theme="gold"] .coming-soon-setting,
html[data-theme="theme_gold"] .customization-empty,
html[data-theme="theme_gold"] .coming-soon-setting {
  background: #fff5cf !important;

  border-color: #dfc55f !important;

  color: #806a27 !important;
}


/* =========================================================
   PRIVACY / INFO BOXES
========================================================= */

html[data-theme="gold"] .privacy-box,
html[data-theme="gold"] .privacy-note,
html[data-theme="gold"] .info-box,

html[data-theme="theme_gold"] .privacy-box,
html[data-theme="theme_gold"] .privacy-note,
html[data-theme="theme_gold"] .info-box {
  background:
    linear-gradient(
      145deg,
      #fff3be,
      #ffe9a0
    ) !important;

  border-color: #dfbd4e !important;

  color: #5f4700 !important;
}


html[data-theme="gold"] .privacy-box h3,
html[data-theme="theme_gold"] .privacy-box h3 {
  color: #795500 !important;
}


/* =========================================================
   TABLES / LEADERBOARD
========================================================= */

html[data-theme="gold"] .leaderboard-table,
html[data-theme="theme_gold"] .leaderboard-table {
  background: #fff8dc !important;
}


html[data-theme="gold"] .leaderboard-table th,
html[data-theme="theme_gold"] .leaderboard-table th {
  background: #ffeaa2 !important;

  color: #725100 !important;

  border-color: #dfc257 !important;
}


html[data-theme="gold"] .leaderboard-table td,
html[data-theme="theme_gold"] .leaderboard-table td {
  background: #fff8dc !important;

  color: #5a470f !important;

  border-color: #e5ce7a !important;
}


html[data-theme="gold"] .leaderboard-table tbody tr:hover td,
html[data-theme="theme_gold"] .leaderboard-table tbody tr:hover td {
  background: #fff0b6 !important;
}


/* =========================================================
   PROGRESS BARS
========================================================= */

html[data-theme="gold"] .progress-bar,
html[data-theme="gold"] .skill-bar,
html[data-theme="gold"] .mini-progress,
html[data-theme="gold"] .achievement-progress-bar,
html[data-theme="gold"] .skill-mini-bar,

html[data-theme="theme_gold"] .progress-bar,
html[data-theme="theme_gold"] .skill-bar,
html[data-theme="theme_gold"] .mini-progress,
html[data-theme="theme_gold"] .achievement-progress-bar,
html[data-theme="theme_gold"] .skill-mini-bar {
  background: #f1dea0 !important;
}


html[data-theme="gold"] .progress-fill,
html[data-theme="gold"] .skill-fill,
html[data-theme="gold"] .mini-progress-fill,
html[data-theme="gold"] .achievement-progress-fill,

html[data-theme="theme_gold"] .progress-fill,
html[data-theme="theme_gold"] .skill-fill,
html[data-theme="theme_gold"] .mini-progress-fill,
html[data-theme="theme_gold"] .achievement-progress-fill {
  background:
    linear-gradient(
      90deg,
      #b77c00,
      #e5b52d
    ) !important;
}


/* =========================================================
   SHOP
========================================================= */

html[data-theme="gold"] .shop-card,
html[data-theme="gold"] .category-card,
html[data-theme="gold"] .balance-card,

html[data-theme="theme_gold"] .shop-card,
html[data-theme="theme_gold"] .category-card,
html[data-theme="theme_gold"] .balance-card {
  background:
    linear-gradient(
      145deg,
      #fff9e4,
      #fff2c4
    ) !important;

  border-color: #e1c35a !important;

  color: #3b2d00 !important;
}


html[data-theme="gold"] .shop-card:hover,
html[data-theme="gold"] .category-card:hover,
html[data-theme="theme_gold"] .shop-card:hover,
html[data-theme="theme_gold"] .category-card:hover {
  border-color: #c79000 !important;

  box-shadow:
    0 13px 28px
    rgba(150,102,0,.10) !important;
}


html[data-theme="gold"] .visual,
html[data-theme="theme_gold"] .visual {
  background: #ffefb2 !important;

  border-color: #dfc257 !important;
}


/* =========================================================
   MODALS
========================================================= */

html[data-theme="gold"] .modal,
html[data-theme="gold"] .modal-content,
html[data-theme="gold"] .modal-card,
html[data-theme="gold"] .update-modal,
html[data-theme="gold"] .update-modal-body,

html[data-theme="theme_gold"] .modal,
html[data-theme="theme_gold"] .modal-content,
html[data-theme="theme_gold"] .modal-card,
html[data-theme="theme_gold"] .update-modal,
html[data-theme="theme_gold"] .update-modal-body {
  background: #fff8dc !important;

  border-color: #dfc25c !important;

  color: #3b2d00 !important;
}


html[data-theme="gold"] .update-modal-header,
html[data-theme="gold"] .current-update-card,
html[data-theme="theme_gold"] .update-modal-header,
html[data-theme="theme_gold"] .current-update-card {
  background:
    linear-gradient(
      145deg,
      #fff1b8,
      #fff8dc
    ) !important;

  border-color: #dfc25c !important;
}


/* =========================================================
   DASHBOARD WELCOME SECTION

   IMPORTANT:
   This does NOT put a background on .welcome,
   .hero, or other generic wrappers.

   That is what was creating the weird giant box.
========================================================= */

html[data-theme="gold"] .welcome h1,
html[data-theme="gold"] .welcome h2,
html[data-theme="gold"] .welcome h3,
html[data-theme="theme_gold"] .welcome h1,
html[data-theme="theme_gold"] .welcome h2,
html[data-theme="theme_gold"] .welcome h3 {
  color: #4f3900 !important;
}


html[data-theme="gold"] .welcome p,
html[data-theme="theme_gold"] .welcome p {
  color: #856817 !important;
}


/* =========================================================
   TOP STREAK / XP CARDS
========================================================= */

html[data-theme="gold"] .top-stat,
html[data-theme="gold"] .stat-card,
html[data-theme="theme_gold"] .top-stat,
html[data-theme="theme_gold"] .stat-card {
  background:
    linear-gradient(
      145deg,
      #fff5c8,
      #ffe99c
    ) !important;

  border-color: #e2c04c !important;

  color: #4d3700 !important;
}


html[data-theme="gold"] .top-stat strong,
html[data-theme="gold"] .top-stat span,
html[data-theme="gold"] .stat-card strong,
html[data-theme="gold"] .stat-card span,
html[data-theme="gold"] .stat-number,
html[data-theme="gold"] .stat-label,

html[data-theme="theme_gold"] .top-stat strong,
html[data-theme="theme_gold"] .top-stat span,
html[data-theme="theme_gold"] .stat-card strong,
html[data-theme="theme_gold"] .stat-card span,
html[data-theme="theme_gold"] .stat-number,
html[data-theme="theme_gold"] .stat-label {
  color: #5a4000 !important;
}


/* =========================================================
   STAT ICONS
========================================================= */

html[data-theme="gold"] .stat-icon,
html[data-theme="theme_gold"] .stat-icon {
  color: #c78600 !important;
}


/* =========================================================
   WHAT'S NEW
========================================================= */

html[data-theme="gold"] .update-pill,
html[data-theme="theme_gold"] .update-pill {
  background:
    linear-gradient(
      135deg,
      #dfaa12,
      #f0c441
    ) !important;

  border-color: #c88d00 !important;

  color: #563c00 !important;
}


html[data-theme="gold"] .update-pill *,
html[data-theme="theme_gold"] .update-pill * {
  color: #563c00 !important;
}


html[data-theme="gold"] .update-pill:hover,
html[data-theme="theme_gold"] .update-pill:hover {
  background:
    linear-gradient(
      135deg,
      #ca9200,
      #e6b52d
    ) !important;
}


/* =========================================================
   DASHBOARD MINI PROFILE
========================================================= */

html[data-theme="gold"] .mini-profile,
html[data-theme="theme_gold"] .mini-profile {
  background:
    linear-gradient(
      145deg,
      #fff8dc,
      #ffedb0
    ) !important;
}


/* =========================================================
   CONTINUE PRACTICING
========================================================= */

html[data-theme="gold"] .continue-item,
html[data-theme="theme_gold"] .continue-item {
  background: #fff5d2 !important;
}


/* =========================================================
   QUICK ACCESS
========================================================= */

html[data-theme="gold"] .quick-item,
html[data-theme="theme_gold"] .quick-item {
  background: #fff4c8 !important;

  color: #5d4708 !important;
}


html[data-theme="gold"] .quick-item:hover,
html[data-theme="theme_gold"] .quick-item:hover {
  background: #ffe89b !important;

  border-color: #c88c00 !important;

  color: #684900 !important;
}


/* =========================================================
   JOURNAL STRIP
========================================================= */

html[data-theme="gold"] .journal-strip,
html[data-theme="theme_gold"] .journal-strip {
  background:
    linear-gradient(
      135deg,
      #fff3be,
      #ffeaa5
    ) !important;

  border-color: #dfbf50 !important;
}


/* =========================================================
   ACHIEVEMENTS
========================================================= */

html[data-theme="gold"] .achievement-item,
html[data-theme="theme_gold"] .achievement-item {
  background: #fff5cf !important;

  border-color: #dfc45d !important;
}


html[data-theme="gold"] .achievement-item.unlocked,
html[data-theme="theme_gold"] .achievement-item.unlocked {
  background:
    linear-gradient(
      145deg,
      #fff0b0,
      #ffe291
    ) !important;

  border-color: #c58b00 !important;
}


/* =========================================================
   BADGES / TAGS
========================================================= */

html[data-theme="gold"] .badge,
html[data-theme="gold"] .tag,
html[data-theme="gold"] .pill,
html[data-theme="gold"] .chip,
html[data-theme="gold"] .status-pill,
html[data-theme="gold"] .category-badge,
html[data-theme="gold"] .section-count,

html[data-theme="theme_gold"] .badge,
html[data-theme="theme_gold"] .tag,
html[data-theme="theme_gold"] .pill,
html[data-theme="theme_gold"] .chip,
html[data-theme="theme_gold"] .status-pill,
html[data-theme="theme_gold"] .category-badge,
html[data-theme="theme_gold"] .section-count {
  background: #ffeaa0 !important;

  color: #684900 !important;

  border-color: #d9b53a !important;
}


/* =========================================================
   ICON ACCENTS
========================================================= */

html[data-theme="gold"] .fa-star,
html[data-theme="gold"] .fa-trophy,
html[data-theme="gold"] .fa-crown,
html[data-theme="theme_gold"] .fa-star,
html[data-theme="theme_gold"] .fa-trophy,
html[data-theme="theme_gold"] .fa-crown {
  color: #c88a00;
}


/* =========================================================
   LOADING SCREEN
========================================================= */

html[data-theme="gold"] #loadingScreen,
html[data-theme="theme_gold"] #loadingScreen {
  background: #fff6d3 !important;

  color: #a66f00 !important;
}


/* =========================================================
   SCROLLBAR
========================================================= */

html[data-theme="gold"] ::-webkit-scrollbar-track,
html[data-theme="theme_gold"] ::-webkit-scrollbar-track {
  background: #fff1bd !important;
}


html[data-theme="gold"] ::-webkit-scrollbar-thumb,
html[data-theme="theme_gold"] ::-webkit-scrollbar-thumb {
  background: #ddb947 !important;

  border-radius: 999px;
}


html[data-theme="gold"] ::-webkit-scrollbar-thumb:hover,
html[data-theme="theme_gold"] ::-webkit-scrollbar-thumb:hover {
  background: #c58b00 !important;
}


/* =========================================================
   INLINE WHITE BACKGROUND CLEANUP

   Turns inline pure-white cards into light gold,
   but DOES NOT touch large wrapper elements.
========================================================= */

html[data-theme="gold"] .card[style*="background:#fff"],
html[data-theme="gold"] .card[style*="background: #fff"],
html[data-theme="gold"] .card[style*="background:#ffffff"],
html[data-theme="gold"] .card[style*="background: #ffffff"],

html[data-theme="gold"] .right-card [style*="background:#fff"],
html[data-theme="gold"] .right-card [style*="background: #fff"],
html[data-theme="gold"] .right-card [style*="background:#ffffff"],
html[data-theme="gold"] .right-card [style*="background: #ffffff"],

html[data-theme="theme_gold"] .card[style*="background:#fff"],
html[data-theme="theme_gold"] .card[style*="background: #fff"],
html[data-theme="theme_gold"] .card[style*="background:#ffffff"],
html[data-theme="theme_gold"] .card[style*="background: #ffffff"] {
  background: #fff3c5 !important;

  border-color: #dfc25a !important;
}

/* =========================================================
   MIDNIGHT — NOTE READING STAFF FIX
   Keeps black notation readable in Dark Mode
========================================================= */

html[data-theme="midnight"] .staff-box {
  background:
    linear-gradient(
      145deg,
      #dce4ee,
      #cbd5e1
    ) !important;

  border: 1px solid #64748b !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.15),
    0 8px 20px rgba(0,0,0,.18) !important;
}


/* Keep all notation BLACK */

html[data-theme="midnight"] .staff-box svg line {
  stroke: #111827 !important;
}

html[data-theme="midnight"] .staff-box svg ellipse {
  fill: #111827 !important;
}

html[data-theme="midnight"] .staff-box svg text {
  fill: #111827 !important;
  color: #111827 !important;
}


/* Specifically protect dynamically-created ledger lines */

html[data-theme="midnight"] #ledgerLines line {
  stroke: #111827 !important;
}


/* Note head */

html[data-theme="midnight"] #noteHead {
  fill: #111827 !important;
}


/* Note stem */

html[data-theme="midnight"] #noteStem {
  stroke: #111827 !important;
}


/* Clef */

html[data-theme="midnight"] #clefSymbol {
  fill: #111827 !important;
}


/* Sharps / flats */

html[data-theme="midnight"] #accidentalSymbol {
  fill: #111827 !important;
}


/* =========================================================
   DARK SAKURA — SAME READABILITY FIX
========================================================= */

html[data-theme="dark-sakura"] .staff-box,
html[data-theme="theme_dark_sakura"] .staff-box {
  background:
    linear-gradient(
      145deg,
      #e5d5df,
      #cfb9c7
    ) !important;

  border: 1px solid #8f6c82 !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.15),
    0 8px 20px rgba(0,0,0,.18) !important;
}


html[data-theme="dark-sakura"] .staff-box svg line,
html[data-theme="theme_dark_sakura"] .staff-box svg line {
  stroke: #111827 !important;
}


html[data-theme="dark-sakura"] .staff-box svg ellipse,
html[data-theme="theme_dark_sakura"] .staff-box svg ellipse {
  fill: #111827 !important;
}


html[data-theme="dark-sakura"] .staff-box svg text,
html[data-theme="theme_dark_sakura"] .staff-box svg text {
  fill: #111827 !important;
  color: #111827 !important;
}


html[data-theme="dark-sakura"] #ledgerLines line,
html[data-theme="theme_dark_sakura"] #ledgerLines line {
  stroke: #111827 !important;
}


html[data-theme="dark-sakura"] #noteHead,
html[data-theme="theme_dark_sakura"] #noteHead {
  fill: #111827 !important;
}


html[data-theme="dark-sakura"] #noteStem,
html[data-theme="theme_dark_sakura"] #noteStem {
  stroke: #111827 !important;
}


html[data-theme="dark-sakura"] #clefSymbol,
html[data-theme="theme_dark_sakura"] #clefSymbol,
html[data-theme="dark-sakura"] #accidentalSymbol,
html[data-theme="theme_dark_sakura"] #accidentalSymbol {
  fill: #111827 !important;
}


/* =========================================================
   WOOD / MUSIC DESK THEME
========================================================= */

html[data-theme="wood"],
html[data-theme="theme_wood"] {
  color-scheme: light;

  --theme-page: #7b5a3a;
  --theme-surface: #f8f3e8;
  --theme-surface-2: #e7dcc9;
  --theme-surface-3: #b29978;

  --theme-text: #2f2419;
  --theme-muted: #6f6254;
  --theme-border: #9d8568;

  --theme-primary: #6f4e37;
  --theme-primary-light: #b29978;
  --theme-primary-dark: #4f3827;
}


/* =========================================================
   PAGE / WOOD TEXTURE
========================================================= */

html[data-theme="wood"] body,
html[data-theme="theme_wood"] body {

  background:
    linear-gradient(
      rgba(62,42,28,.16),
      rgba(62,42,28,.16)
    ),
    url("/accounts/images/wood-theme.jpg")
    center top / cover
    repeat-y !important;

  color: #2f2419 !important;
}


/* =========================================================
   MAIN AREAS
========================================================= */

html[data-theme="wood"] main,
html[data-theme="wood"] .main,
html[data-theme="wood"] .main-content,
html[data-theme="wood"] .content,
html[data-theme="wood"] .page,
html[data-theme="wood"] .page-content,

html[data-theme="theme_wood"] main,
html[data-theme="theme_wood"] .main,
html[data-theme="theme_wood"] .main-content,
html[data-theme="theme_wood"] .content,
html[data-theme="theme_wood"] .page,
html[data-theme="theme_wood"] .page-content {
  background: transparent !important;
  color: #2f2419 !important;
}


/* =========================================================
   SIDEBAR
========================================================= */

html[data-theme="wood"] .sidebar,
html[data-theme="wood"] nav,
html[data-theme="wood"] aside,

html[data-theme="theme_wood"] .sidebar,
html[data-theme="theme_wood"] nav,
html[data-theme="theme_wood"] aside {

  background:
    linear-gradient(
      180deg,
      rgba(79,56,39,.97),
      rgba(93,66,46,.96)
    ) !important;

  border-color: #3f2d20 !important;

  color: #fffaf2 !important;

  backdrop-filter: blur(4px);
}


/* =========================================================
   BRAND
========================================================= */

html[data-theme="wood"] .brand-icon,
html[data-theme="theme_wood"] .brand-icon {

  background:
    linear-gradient(
      135deg,
      #8b6a49,
      #b29978
    ) !important;

  color: white !important;
}


html[data-theme="wood"] .brand-text strong,
html[data-theme="theme_wood"] .brand-text strong {

  color: #fffaf2 !important;
}


html[data-theme="wood"] .brand-text span,
html[data-theme="theme_wood"] .brand-text span {

  color: #e8d7bc !important;
}


/* =========================================================
   SIDEBAR LINKS
========================================================= */

html[data-theme="wood"] .side-link,
html[data-theme="theme_wood"] .side-link {

  color: #f0e6d8 !important;
}


html[data-theme="wood"] .side-link:hover,
html[data-theme="theme_wood"] .side-link:hover {

  background:
    rgba(255,255,255,.10) !important;

  color: #ffffff !important;
}


html[data-theme="wood"] .side-link.active,
html[data-theme="theme_wood"] .side-link.active {

  background:
    linear-gradient(
      135deg,
      #8b6a49,
      #b29978
    ) !important;

  color: white !important;

  box-shadow:
    0 8px 18px
    rgba(47,36,25,.25) !important;
}


/* =========================================================
   BACK BUTTONS
========================================================= */

html[data-theme="wood"] .back-to-site,
html[data-theme="wood"] .dashboard-return,
html[data-theme="wood"] .back-shop-button,

html[data-theme="theme_wood"] .back-to-site,
html[data-theme="theme_wood"] .dashboard-return,
html[data-theme="theme_wood"] .back-shop-button {

  background:
    rgba(255,255,255,.12) !important;

  border-color:
    rgba(255,255,255,.20) !important;

  color: #fffaf2 !important;
}


/* =========================================================
   MAIN CARDS
========================================================= */

html[data-theme="wood"] .card,
html[data-theme="wood"] .panel,
html[data-theme="wood"] .box,
html[data-theme="wood"] .section-card,
html[data-theme="wood"] .stat-card,
html[data-theme="wood"] .top-stat,
html[data-theme="wood"] .continue-item,
html[data-theme="wood"] .today-card,
html[data-theme="wood"] .adaptive-card,
html[data-theme="wood"] .quick-item,
html[data-theme="wood"] .right-card,
html[data-theme="wood"] .mini-profile,
html[data-theme="wood"] .settings-section,
html[data-theme="wood"] .dashboard-settings-card,
html[data-theme="wood"] .customization-item,
html[data-theme="wood"] .leaderboard-preview,
html[data-theme="wood"] .balance-card,
html[data-theme="wood"] .section-header,
html[data-theme="wood"] .shop-card,
html[data-theme="wood"] .category-card,
html[data-theme="wood"] .toolbar,
html[data-theme="wood"] .podium-card,
html[data-theme="wood"] .leaderboard-card,
html[data-theme="wood"] .report-card,
html[data-theme="wood"] .equipped-card,
html[data-theme="wood"] .controls-card,
html[data-theme="wood"] .award-card,
html[data-theme="wood"] .journal-note,
html[data-theme="wood"] .modal-card,
html[data-theme="wood"] .day-card,
html[data-theme="wood"] .game-card,
html[data-theme="wood"] .favorite-card,
html[data-theme="wood"] .collection-card,
html[data-theme="wood"] .collection-empty,
html[data-theme="wood"] .collection-modal,
html[data-theme="wood"] .score-choice,
html[data-theme="wood"] .collection-view-score,
html[data-theme="wood"] .accuracy-box,
html[data-theme="wood"] .why-box,
html[data-theme="wood"] .signal-card,
html[data-theme="wood"] .how-card,
html[data-theme="wood"] .plan-card,

html[data-theme="theme_wood"] .card,
html[data-theme="theme_wood"] .panel,
html[data-theme="theme_wood"] .box,
html[data-theme="theme_wood"] .top-stat,
html[data-theme="theme_wood"] .continue-item,
html[data-theme="theme_wood"] .today-card,
html[data-theme="theme_wood"] .adaptive-card,
html[data-theme="theme_wood"] .quick-item,
html[data-theme="theme_wood"] .right-card,
html[data-theme="theme_wood"] .mini-profile,
html[data-theme="theme_wood"] .game-card {

  background:
    rgba(248,243,232,.97) !important;

  border-color: #b29978 !important;

  color: #2f2419 !important;

  box-shadow:
    0 9px 24px
    rgba(47,36,25,.16) !important;
}


/* =========================================================
   TAN FEATURE BOXES
========================================================= */

html[data-theme="wood"] .top-stat,
html[data-theme="wood"] .mini-profile,
html[data-theme="wood"] .info-box,
html[data-theme="wood"] .privacy-box,
html[data-theme="wood"] .weekly-goal,
html[data-theme="wood"] .audition-box,
html[data-theme="wood"] .journal-strip,

html[data-theme="theme_wood"] .top-stat,
html[data-theme="theme_wood"] .mini-profile,
html[data-theme="theme_wood"] .info-box,
html[data-theme="theme_wood"] .privacy-box,
html[data-theme="theme_wood"] .weekly-goal,
html[data-theme="theme_wood"] .audition-box,
html[data-theme="theme_wood"] .journal-strip {

  background:
    linear-gradient(
      145deg,
      #c7b292,
      #b29978
    ) !important;

  border-color: #8e7459 !important;

  color: #2f2419 !important;
}


/* =========================================================
   WHITE QUESTION / ANSWER AREAS
========================================================= */

html[data-theme="wood"] .rhythm-display,
html[data-theme="wood"] .question-card,
html[data-theme="wood"] .question-box,
html[data-theme="wood"] .quiz-question,
html[data-theme="wood"] .question-area,
html[data-theme="wood"] .answer-button,
html[data-theme="wood"] .choice-button,
html[data-theme="wood"] .check-option,
html[data-theme="wood"] .score-choice,

html[data-theme="theme_wood"] .rhythm-display,
html[data-theme="theme_wood"] .question-card,
html[data-theme="theme_wood"] .question-box,
html[data-theme="theme_wood"] .quiz-question,
html[data-theme="theme_wood"] .question-area,
html[data-theme="theme_wood"] .answer-button,
html[data-theme="theme_wood"] .choice-button,
html[data-theme="theme_wood"] .check-option,
html[data-theme="theme_wood"] .score-choice {

  background: #ffffff !important;

  border-color: #c9b79f !important;

  color: #2f2419 !important;
}


html[data-theme="wood"] .answer-button:hover,
html[data-theme="wood"] .choice-button:hover,
html[data-theme="wood"] .check-option:hover,

html[data-theme="theme_wood"] .answer-button:hover,
html[data-theme="theme_wood"] .choice-button:hover,
html[data-theme="theme_wood"] .check-option:hover {

  background: #f7f1e7 !important;

  border-color: #8b6a49 !important;
}


/* =========================================================
   HEADINGS
========================================================= */

html[data-theme="wood"] h1,
html[data-theme="wood"] h2,
html[data-theme="wood"] h3,
html[data-theme="wood"] h4,
html[data-theme="wood"] strong,
html[data-theme="wood"] label,

html[data-theme="theme_wood"] h1,
html[data-theme="theme_wood"] h2,
html[data-theme="theme_wood"] h3,
html[data-theme="theme_wood"] h4,
html[data-theme="theme_wood"] strong,
html[data-theme="theme_wood"] label {

  color: #3a2b1d !important;
}


/* =========================================================
   TEXT
========================================================= */

html[data-theme="wood"] p,
html[data-theme="wood"] small,
html[data-theme="wood"] .description,
html[data-theme="wood"] .field-help,
html[data-theme="wood"] .muted,
html[data-theme="wood"] .subtitle,

html[data-theme="theme_wood"] p,
html[data-theme="theme_wood"] small,
html[data-theme="theme_wood"] .description,
html[data-theme="theme_wood"] .field-help,
html[data-theme="theme_wood"] .muted,
html[data-theme="theme_wood"] .subtitle {

  color: #6f6254 !important;
}


/* =========================================================
   LINKS
========================================================= */

html[data-theme="wood"] a,
html[data-theme="theme_wood"] a {

  color: #6f4e37;
}


html[data-theme="wood"] a:hover,
html[data-theme="theme_wood"] a:hover {

  color: #4f3827;
}


/* =========================================================
   BUTTONS
========================================================= */

html[data-theme="wood"] .button,
html[data-theme="wood"] .btn,
html[data-theme="wood"] .primary-button,
html[data-theme="wood"] .main-button,
html[data-theme="wood"] .small-button,
html[data-theme="wood"] .adaptive-button,
html[data-theme="wood"] .btn-primary,

html[data-theme="theme_wood"] .button,
html[data-theme="theme_wood"] .btn,
html[data-theme="theme_wood"] .primary-button,
html[data-theme="theme_wood"] .main-button,
html[data-theme="theme_wood"] .small-button,
html[data-theme="theme_wood"] .adaptive-button,
html[data-theme="theme_wood"] .btn-primary {

  background:
    linear-gradient(
      135deg,
      #6f4e37,
      #8b6a49
    ) !important;

  border-color: #6f4e37 !important;

  color: white !important;
}


/* =========================================================
   INPUTS
========================================================= */

html[data-theme="wood"] input,
html[data-theme="wood"] textarea,
html[data-theme="wood"] select,

html[data-theme="theme_wood"] input,
html[data-theme="theme_wood"] textarea,
html[data-theme="theme_wood"] select {

  background: #fffdf8 !important;

  border-color: #bda98d !important;

  color: #2f2419 !important;
}


/* =========================================================
   PAGE HEADER
========================================================= */

html[data-theme="wood"] .page-header,
html[data-theme="theme_wood"] .page-header {

  background:
    radial-gradient(
      circle at 90% 15%,
      rgba(255,255,255,.18),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #4f3827,
      #6f4e37 55%,
      #b29978
    ) !important;

  color: white !important;
}


html[data-theme="wood"] .page-header h1,
html[data-theme="wood"] .page-header h2,
html[data-theme="wood"] .page-header p,
html[data-theme="wood"] .page-header span,
html[data-theme="wood"] .page-header strong,

html[data-theme="theme_wood"] .page-header h1,
html[data-theme="theme_wood"] .page-header h2,
html[data-theme="theme_wood"] .page-header p,
html[data-theme="theme_wood"] .page-header span,
html[data-theme="theme_wood"] .page-header strong {

  color: white !important;
}


/* =========================================================
   PROGRESS BARS
========================================================= */

html[data-theme="wood"] .progress-bar,
html[data-theme="wood"] .skill-bar,
html[data-theme="wood"] .mini-progress,
html[data-theme="wood"] .achievement-progress-bar,
html[data-theme="wood"] .skill-mini-bar,

html[data-theme="theme_wood"] .progress-bar,
html[data-theme="theme_wood"] .skill-bar,
html[data-theme="theme_wood"] .mini-progress,
html[data-theme="theme_wood"] .achievement-progress-bar,
html[data-theme="theme_wood"] .skill-mini-bar {

  background: #dfd2c0 !important;
}


html[data-theme="wood"] .progress-fill,
html[data-theme="wood"] .skill-fill,
html[data-theme="wood"] .mini-progress-fill,
html[data-theme="wood"] .achievement-progress-fill,

html[data-theme="theme_wood"] .progress-fill,
html[data-theme="theme_wood"] .skill-fill,
html[data-theme="theme_wood"] .mini-progress-fill,
html[data-theme="theme_wood"] .achievement-progress-fill {

  background:
    linear-gradient(
      90deg,
      #6f4e37,
      #b29978
    ) !important;
}


/* =========================================================
   RIGHT PANEL
========================================================= */

html[data-theme="wood"] .right-panel,
html[data-theme="theme_wood"] .right-panel {

  background:
    rgba(226,211,190,.87) !important;

  border-color: #9d8568 !important;
}


/* =========================================================
   MODALS
========================================================= */

html[data-theme="wood"] .modal,
html[data-theme="wood"] .modal-content,
html[data-theme="wood"] .modal-card,
html[data-theme="wood"] .update-modal,
html[data-theme="wood"] .update-modal-body,

html[data-theme="theme_wood"] .modal,
html[data-theme="theme_wood"] .modal-content,
html[data-theme="theme_wood"] .modal-card,
html[data-theme="theme_wood"] .update-modal,
html[data-theme="theme_wood"] .update-modal-body {

  background: #f8f3e8 !important;

  border-color: #b29978 !important;

  color: #2f2419 !important;
}


/* =========================================================
   SELECTED ITEMS
========================================================= */

html[data-theme="wood"] .customization-item.selected,
html[data-theme="wood"] .filter-button.active,
html[data-theme="wood"] .sort-button.active,
html[data-theme="wood"] .choice-button.active,

html[data-theme="theme_wood"] .customization-item.selected,
html[data-theme="theme_wood"] .filter-button.active,
html[data-theme="theme_wood"] .sort-button.active,
html[data-theme="theme_wood"] .choice-button.active {

  background: #b29978 !important;

  border-color: #6f4e37 !important;

  color: #2f2419 !important;
}


/* =========================================================
   LOADING
========================================================= */

html[data-theme="wood"] #loadingScreen,
html[data-theme="theme_wood"] #loadingScreen {

  background:
    #f4eadc !important;

  color: #6f4e37 !important;
}


/* =========================================================
   SCROLLBAR
========================================================= */

html[data-theme="wood"] ::-webkit-scrollbar-track,
html[data-theme="theme_wood"] ::-webkit-scrollbar-track {

  background: #d7c5aa !important;
}


html[data-theme="wood"] ::-webkit-scrollbar-thumb,
html[data-theme="theme_wood"] ::-webkit-scrollbar-thumb {

  background: #8b6a49 !important;

  border-radius: 999px;
}


html[data-theme="wood"] ::-webkit-scrollbar-thumb:hover,
html[data-theme="theme_wood"] ::-webkit-scrollbar-thumb:hover {

  background: #6f4e37 !important;
}