/* ================================================
   BAMPAA — Cleanroom Page Styles
   assets/cleanroom.css
   ================================================ */


/* ===========================
   GLOBAL SHELL
   =========================== */

.cleanroom-shell {
  min-height: 100vh;
  padding: 32px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: radial-gradient(circle at top left, #111827 0%, #020617 40%, #02040a 100%);
}

.cleanroom-shell > * {
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
}


/* ===========================
   GLASS SURFACES + CARDS
   =========================== */

.glass-surface {
  background: rgba(15, 23, 42, 0.75);
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.15);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(16px) saturate(140%);
}

.card {
  background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.86));
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(15, 23, 42, 0.95);
  position: relative;
  overflow: visible;
}

.card:hover {
  transform: translateY(-1px);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(55, 65, 81, 0.7);
  transition: all 180ms ease-out;
}


/* ===========================
   CONTROL BAR
   =========================== */

.cr-control-bar.glass-surface {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 14px !important;
  padding: 14px 18px 16px;
  position: relative;
  z-index: 10;
  border-radius: 18px;
}

.cr-control-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.cr-control-row--filters {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 20px !important;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.cr-control-row--filters::-webkit-scrollbar { display: none; }

.cr-control-row--topics {
  display: flex !important;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cr-control-block {
  display: flex;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0;
}

.cr-control-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(148, 163, 184, 0.9);
}


/* ===========================
   SEGMENTED CONTROLS
   =========================== */

.cr-segment-group {
  display: inline-flex;
  padding: 2px;
  border-radius: 999px;
  background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.95));
  box-shadow: 0 0 0 1px rgba(31, 41, 55, 0.9);
  width: 100%;
}

.cr-segment {
  border: none;
  outline: none;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  background: transparent;
  color: rgba(209, 213, 219, 0.9);
  cursor: pointer;
  transition: background 160ms ease-out, color 160ms ease-out;
  flex: 1 1 0;
  white-space: nowrap;
}

.cr-segment:hover {
  background: rgba(31, 41, 55, 0.9);
}

.cr-segment-active {
  background: radial-gradient(circle at top, #6aa59c, #22c3aa);
  color: #020617;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.8), 0 12px 30px rgba(34, 195, 170, 0.45);
}


/* ===========================
   CHALLENGE PICKER
   =========================== */

.cr-chal-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cr-chal-toggle {
  flex: 1;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(15, 23, 42, 0.65);
  color: rgba(226, 232, 240, 0.95);
  text-align: left;
  padding: 0 12px;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 160ms ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cr-chal-toggle:hover {
  border-color: rgba(106, 165, 156, 0.65);
}

.cr-chal-panel {
  margin-top: 10px;
  overflow: visible;
  position: relative;
  z-index: 20;
}

.cr-chal-search {
  width: 100%;
  margin-bottom: 8px;
}

.cr-chal-list {
  max-height: 210px;
  overflow-y: auto;
  padding-right: 6px;
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 14px;
  padding: 8px;
  background: rgba(15, 23, 42, 0.75);
}

.cr-chal-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.cr-chal-list:has(.cr-chal-grid:empty) {
  display: none;
}

.cr-chal-pill {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  text-align: left;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(15, 23, 42, 0.75);
  color: rgba(226, 232, 240, 0.95);
  cursor: pointer;
  overflow: hidden;
  font-size: 13px;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.cr-chal-pill:hover {
  border-color: rgba(148, 163, 184, 0.45);
}

.cr-chal-pill.active {
  border-color: rgba(106, 165, 156, 0.95);
  box-shadow: 0 0 0 1px rgba(106, 165, 156, 0.55);
  background: rgba(106, 165, 156, 0.1);
}

/* Play indicator on active pill — appended after title */
.cr-chal-pill.active .cp-title::after {
  content: " ▶";
  font-size: 0.6rem;
  color: #6AA59C;
  margin-left: 4px;
}

/* Sequence / tick badge inside pill */
.cp-seq {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  background: rgba(148, 163, 184, 0.14);
  color: rgba(148, 163, 184, 0.65);
}

.cp-seq--done {
  background: rgba(106, 165, 156, 0.2);
  color: #6AA59C;
}

.cr-chal-pill.active .cp-seq:not(.cp-seq--done) {
  background: #6AA59C;
  color: #fff;
}

/* Title inside pill — truncate overflow */
.cp-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mobile topic grid — same 3-col as desktop but scrollable */
.cr-mob-topic-grid {
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.2) transparent;
}


/* ===========================
   PROGRESS BAR
   =========================== */

.cr-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}

.cr-progress-track {
  width: 140px;
  height: 5px;
  background: rgba(31, 41, 55, 0.9);
  border-radius: 4px;
  overflow: hidden;
}

.cr-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #6AA59C, #4B7F76);
  border-radius: 4px;
}

.cr-progress-pct {
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  color: #6AA59C;
  font-weight: 700;
}


/* ===========================
   MAIN LAYOUT
   =========================== */

.cr-main-shell {
  padding: 20px 0;
}

.cr-main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}


/* ===========================
   TUTORIAL + WORK CARDS
   =========================== */

.tutorial-card,
.sql-card {
  display: flex;
  flex-direction: column;
  height: 640px;
  max-height: 640px;
  min-height: 0;
  padding: 16px;
  box-sizing: border-box;
  overflow: hidden;
}

.tutorial-card .tutorial-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.sql-card .scroll-pane {
  overflow-y: auto !important;
  overflow-x: hidden;
  min-height: 0;
  padding-right: 4px;
  flex: 1 1 auto;
}

.sql-card-header {
  margin-bottom: 12px;
}

.sql-error-bar-wrapper {
  margin: 0;
}

#cr_sql_input,
#cr_py_input {
  min-height: 220px !important;
  height: 220px !important;
}


/* ===========================
   SCHEMA / COL CHIPS
   =========================== */

.cr-col-chip {
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  padding: 4px 10px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 6px;
  color: #7dd3fc;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cr-col-chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.cr-schema-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 12px;
  padding: 14px;
}

.cr-table-name {
  font-family: 'Space Mono', monospace;
  color: #6AA59C;
  font-weight: 700;
  font-size: 1rem;
}

.cr-table {
  overflow-x: auto;
  border-radius: 12px;
}


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

.button-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
}

.button-row .btn {
  min-width: 110px;
}

.btn.btn-primary {
  box-shadow:
    0 0 0 1px rgba(34, 197, 167, 0.6),
    0 0 24px rgba(34, 197, 167, 0.5);
  transition: box-shadow 160ms ease-out, transform 160ms ease-out;
}

.btn.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(34, 197, 167, 0.8),
    0 0 32px rgba(34, 197, 167, 0.8);
}

.btn.btn-hint {
  background: transparent;
  border: 1px solid rgba(106, 165, 156, 0.4);
  color: #6AA59C;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 120ms, color 120ms;
}
.btn.btn-hint:hover:not([disabled]) {
  border-color: #6AA59C;
  color: #d9fff4;
}
.btn.btn-hint[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: rgba(106, 165, 156, 0.2);
}


/* ===========================
   TABS
   =========================== */

.tabs-clean { background: transparent !important; }

.tabs-clean .tab {
  background: rgba(15, 23, 42, .55) !important;
  border: 1px solid rgba(148, 163, 184, .14) !important;
  border-bottom: 0 !important;
  color: rgba(226, 232, 240, .78) !important;
  border-radius: 16px 16px 0 0 !important;
  padding: 10px 16px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.tabs-clean .tab--selected {
  background: rgba(106, 165, 156, .18) !important;
  border: 1px solid rgba(106, 165, 156, .35) !important;
  border-bottom: 0 !important;
  color: #08b7af !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.tabs-clean .tab-content,
.tabs-clean .tab-container {
  border-top: 2px solid rgba(106, 165, 156, .25) !important;
}

.tabs-clean .tab:hover {
  border-color: rgba(106, 165, 156, .25) !important;
}


/* ===========================
   DATA TABLE
   =========================== */

.dash-table-container .dash-spreadsheet-container {
  background: rgba(15, 23, 42, .9);
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.20);
  overflow-y: visible !important;
  overflow-x: auto !important;
}

.dash-table-container .dash-spreadsheet-inner table {
  width: 100%;
  border-collapse: collapse;
}

.dash-table-container th {
  background: linear-gradient(90deg, #111827, #020617);
  color: #e5f2ff;
  font-weight: 600;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.40) !important;
  border-left: none !important;
  border-right: none !important;
}

.dash-table-container td {
  color: #e5e7eb !important;
  background-color: rgba(15, 23, 42, 0.96) !important;
  padding: 6px 12px;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.03) !important;
}

.dash-table-container tbody tr:last-child td { border-bottom: none !important; }
.dash-table-container tbody tr:nth-child(even) td { background-color: rgba(15, 23, 42, 0.90) !important; }
.dash-table-container tbody tr:hover td { background-color: rgba(31, 41, 55, 0.98) !important; }


/* ===========================
   SCROLLBARS
   =========================== */

html, body, .cleanroom-shell {
  scrollbar-width: thin;
  scrollbar-color: #6aa59c transparent;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.cleanroom-shell ::-webkit-scrollbar,
.scroll-pane::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.cleanroom-shell ::-webkit-scrollbar-track,
.scroll-pane::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.cleanroom-shell ::-webkit-scrollbar-thumb,
.scroll-pane::-webkit-scrollbar-thumb {
  background: linear-gradient(#1f2933, #6aa59c);
  border-radius: 999px;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.cleanroom-shell ::-webkit-scrollbar-thumb:hover,
.scroll-pane::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(#111827, #8ff5d1);
}


/* ===========================
   MARKDOWN + CODE BLOCKS
   =========================== */

.bampaa-md { width: 100%; }

.bampaa-md pre {
  background: rgba(2, 6, 23, 0.92) !important;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 10px 0 0 0;
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(15, 23, 42, 0.55);
}

.bampaa-md pre code {
  background: transparent !important;
  color: #e5e7eb !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre;
}

.bampaa-md code:not(pre code) {
  background: rgba(148, 163, 184, 0.14);
  border: 1px solid rgba(148, 163, 184, 0.18);
  padding: 2px 7px;
  border-radius: 999px;
  color: #e5e7eb;
}


/* ===========================
   TUTORIAL SLIDE CODE BLOCKS
   =========================== */

.tut-slide-card pre,
#tut_slide_body pre {
  background: rgba(2, 6, 23, 0.92) !important;
  color: rgba(230, 237, 246, 0.72) !important;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 14px;
  padding: 14px 16px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.95rem;
  line-height: 1.6;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
}

.tut-slide-card pre code,
#tut_slide_body pre code {
  background: transparent !important;
  color: inherit !important;
  border: 0 !important;
}

/* Syntax highlighting — keywords/functions in teal */
:root {
  --code-teal: rgba(94, 234, 212, 0.88);
  --code-fade: rgba(230, 237, 246, 0.72);
  --code-fade-2: rgba(230, 237, 246, 0.58);
  --code-comment: rgba(230, 237, 246, 0.46);
}

.tut-slide-card pre code *,
#tut_slide_body pre code *,
.tut-slide-card .hljs *,
#tut_slide_body .hljs * {
  color: var(--code-fade) !important;
  font-weight: 500;
}

.tut-slide-card .token.keyword,
#tut_slide_body .token.keyword,
.tut-slide-card .hljs-keyword,
#tut_slide_body .hljs-keyword,
.tut-slide-card .token.function,
#tut_slide_body .token.function,
.tut-slide-card .hljs-built_in,
#tut_slide_body .hljs-built_in {
  color: var(--code-teal) !important;
  font-weight: 600;
}

.tut-slide-card .token.number,
#tut_slide_body .token.number,
.tut-slide-card .token.operator,
#tut_slide_body .token.operator,
.tut-slide-card .token.punctuation,
#tut_slide_body .token.punctuation {
  color: var(--code-fade-2) !important;
}

.tut-slide-card .token.comment,
#tut_slide_body .token.comment,
.tut-slide-card .hljs-comment,
#tut_slide_body .hljs-comment {
  color: var(--code-comment) !important;
  font-style: italic;
}


/* ===========================
   AUTH GATE
   =========================== */

.cleanroom-locked {
  max-width: 720px;
  margin: 40px auto 0;
  padding: 32px 28px;
  border-radius: 20px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
  text-align: left;
}

.cleanroom-locked-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
}

.cleanroom-locked-text {
  font-size: 15px;
  color: var(--muted, #9ca3af);
  margin-bottom: 18px;
}

.cleanroom-login-button {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  background: #6AA59C;
  color: #020617;
  box-shadow: 0 0 18px rgba(106, 165, 156, 0.6);
  margin-bottom: 8px;
}

.cleanroom-login-button:hover {
  filter: brightness(1.05);
  box-shadow: 0 0 24px rgba(106, 165, 156, 0.9);
}

.cleanroom-login-hint {
  font-size: 13px;
  color: var(--muted, #9ca3af);
}


/* ===========================
   DROPDOWN THEME
   =========================== */

.cr-control-bar .cr-control-input .Select-control,
.cr-chal-picker .Select-control,
.work-topbar .cr-platform-mini .Select-control {
  background: rgba(15, 23, 42, 0.70) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 14px !important;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.55) !important;
  min-height: 38px !important;
  height: 38px !important;
}

.cr-control-bar .cr-control-input .Select-placeholder,
.cr-control-bar .cr-control-input .Select-value-label,
.cr-chal-picker .Select-placeholder,
.cr-chal-picker .Select-value-label,
.work-topbar .cr-platform-mini .Select-placeholder,
.work-topbar .cr-platform-mini .Select-value-label {
  color: rgba(226, 232, 240, 0.92) !important;
  line-height: 38px !important;
  font-size: 13px !important;
}

.cr-control-bar .Select-menu-outer,
.cr-chal-picker .Select-menu-outer,
.work-topbar .cr-platform-mini .Select-menu-outer {
  background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.90)) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.60) !important;
  overflow: hidden !important;
  margin-top: 8px !important;
  z-index: 9999 !important;
}

.cr-control-bar .Select-option,
.cr-chal-picker .Select-option,
.work-topbar .cr-platform-mini .Select-option {
  color: rgba(226, 232, 240, 0.95) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
}

.cr-control-bar .Select-option.is-focused,
.cr-chal-picker .Select-option.is-focused,
.work-topbar .cr-platform-mini .Select-option.is-focused {
  background: rgba(106, 165, 156, 0.22) !important;
}

.cr-control-bar .Select-option.is-selected,
.cr-chal-picker .Select-option.is-selected,
.work-topbar .cr-platform-mini .Select-option.is-selected {
  background: rgba(106, 165, 156, 0.45) !important;
}

.cr-control-bar,
.cr-control-row--challenge,
.cr-chal-picker,
.cr-chal-panel {
  overflow: visible !important;
}


/* ===========================
   WORK TOPBAR
   =========================== */

.work-topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 10px;
}

.work-topbar .cr-platform-mini {
  width: 170px;
  max-width: 170px;
}

.work-topbar .cr-platform-mini .Select-control {
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 10px !important;
}

.work-topbar .cr-platform-mini .Select-placeholder,
.work-topbar .cr-platform-mini .Select-value-label {
  line-height: 34px !important;
  font-size: 12px !important;
}


/* ================================================
   MOBILE  <=768px
   ================================================ */

@media (max-width: 768px) {

  .cleanroom-shell {
    padding: 16px 10px 28px;
  }

  .cr-control-bar.glass-surface {
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 14px !important;
    overflow: visible !important;
    position: relative !important;
  }

  /* ══════════════════════════════════════════════
     TOP BAR: [Filters (n) ▾]  [chip] [chip] ...
  ══════════════════════════════════════════════ */
  .cr-filter-topbar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 12px 8px !important;
    width: 100% !important;
  }

  /* Filters button */
  .cr-filter-toggle-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(106,165,156,0.1) !important;
    border: 1px solid rgba(106,165,156,0.3) !important;
    border-radius: 9px !important;
    padding: 6px 11px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: all 0.15s !important;
    color: #6AA59C !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    white-space: nowrap !important;
  }
  .cr-filter-toggle-btn:hover,
  .cr-filter-toggle-btn.is-open {
    background: rgba(106,165,156,0.18) !important;
    border-color: rgba(106,165,156,0.5) !important;
  }

  /* CSS slider icon */
  .cr-filter-icon {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    width: 13px !important;
    flex-shrink: 0 !important;
  }
  .cr-filter-icon span {
    display: block !important;
    height: 1.5px !important;
    background: #6AA59C !important;
    border-radius: 1px !important;
    position: relative !important;
  }
  .cr-filter-icon span::after {
    content: '' !important;
    position: absolute !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: #6AA59C !important;
    border: 1.5px solid #0b1120 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  .cr-filter-icon span:nth-child(1)::after { left: 1px !important; }
  .cr-filter-icon span:nth-child(2)::after { left: 6px !important; }
  .cr-filter-icon span:nth-child(3)::after { left: 2px !important; }

  /* Count badge */
  .cr-filter-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #6AA59C !important;
    color: #0b1120 !important;
    font-size: 0.58rem !important;
    font-weight: 800 !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 3px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }

  /* Chevron */
  .cr-filter-chevron {
    font-size: 0.48rem !important;
    color: #6AA59C !important;
    transition: transform 0.22s ease !important;
    display: inline-block !important;
  }
  .cr-filter-toggle-btn.is-open .cr-filter-chevron {
    transform: rotate(180deg) !important;
  }

  /* Active chips scrollable row */
  .cr-filter-chips-row {
    display: flex !important;
    gap: 5px !important;
    flex: 1 !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
  }
  .cr-filter-chips-row::-webkit-scrollbar { display: none; }

  .cr-active-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    font-size: 0.62rem !important;
    font-weight: 600 !important;
    padding: 3px 5px 3px 9px !important;
    border-radius: 999px !important;
    background: rgba(106,165,156,0.12) !important;
    border: 1px solid rgba(106,165,156,0.25) !important;
    color: #6AA59C !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .cr-active-chip-x {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: rgba(106,165,156,0.2) !important;
    color: #6AA59C !important;
    font-size: 0.5rem !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    border: none !important;
    font-family: inherit !important;
    line-height: 1 !important;
    transition: background 0.15s !important;
    padding: 0 !important;
  }
  .cr-active-chip-x:hover {
    background: rgba(106,165,156,0.38) !important;
  }

  /* Progress bar strip — always visible below topbar */
  .cr-filter-progress {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 12px 10px !important;
  }
  .cr-filter-progress .cr-progress-track {
    flex: 1 !important;
    width: auto !important;
  }

  /* Hide original progress row inside topics (moved to cr-filter-progress) */
  .cr-control-row--topics .cr-progress-row {
    display: none !important;
  }

  /* Topics row — desktop only */
  .cr-control-row--topics {
    display: none !important;
  }

  /* ══════════════════════════════════════════════
     FILTER PANEL — dropdown style, floats below
  ══════════════════════════════════════════════ */
  .cr-filter-panel {
    display: none !important; /* hidden by default */
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 200 !important;
    overflow: visible !important;
    background: #111827 !important;
    border: 1px solid rgba(106,165,156,0.2) !important;
    border-radius: 16px !important;
    box-shadow:
      0 24px 48px rgba(0,0,0,0.55),
      0 0 0 1px rgba(106,165,156,0.06) !important;
    padding: 18px 16px 14px !important;
    animation: cr-panel-in 0.2s ease !important;
  }
  @keyframes cr-panel-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .cr-filter-panel.is-open {
    display: block !important;
  }

  /* Panel title */
  .cr-filter-panel-title {
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #6b7f9a !important;
    margin-bottom: 14px !important;
  }

  /* Each filter row: label + custom select */
  .cr-filter-panel-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
  }
  .cr-filter-panel-row:last-of-type {
    margin-bottom: 0 !important;
  }

  .cr-filter-panel-label {
    font-size: 0.64rem !important;
    font-weight: 700 !important;
    color: #6b7f9a !important;
    min-width: 72px !important;
    flex-shrink: 0 !important;
  }

  /* The select-style pill button */
  .cr-filter-select {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(148,163,184,0.15) !important;
    border-radius: 9px !important;
    padding: 7px 12px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #e8ecf2 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    flex: 1 !important;
    justify-content: space-between !important;
    transition: border-color 0.15s !important;
  }
  .cr-filter-select:hover {
    border-color: rgba(106,165,156,0.35) !important;
  }
  .cr-filter-select.is-active {
    background: rgba(106,165,156,0.1) !important;
    border-color: rgba(106,165,156,0.35) !important;
    color: #6AA59C !important;
  }
  .cr-filter-select-chevron {
    font-size: 0.45rem !important;
    color: #6b7f9a !important;
  }

  /* dcc.Dropdown inside filter panel — dark themed */
  .cr-filter-dd .Select-control,
  .cr-filter-dd .VirtualizedSelectFocusedOption,
  .cr-filter-dd .Select-menu-outer {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(148,163,184,0.15) !important;
    border-radius: 9px !important;
    color: #e8ecf2 !important;
  }
  .cr-filter-dd {
    flex: 1 !important;
    font-size: 0.74rem !important;
    font-weight: 600 !important;
  }
  .cr-filter-dd .Select-value-label,
  .cr-filter-dd .Select-placeholder {
    color: #e8ecf2 !important;
    font-size: 0.74rem !important;
  }
  .cr-filter-dd .Select-arrow {
    border-top-color: #6b7f9a !important;
  }
  .cr-filter-dd.is-open .Select-control {
    border-color: rgba(106,165,156,0.4) !important;
    background: rgba(106,165,156,0.08) !important;
  }
  .cr-filter-dd .Select-menu-outer {
    background: #111827 !important;
    border-color: rgba(106,165,156,0.2) !important;
    border-radius: 10px !important;
    margin-top: 4px !important;
    box-shadow: 0 16px 32px rgba(0,0,0,0.5) !important;
    z-index: 300 !important;
  }
  .cr-filter-dd .Select-option {
    background: transparent !important;
    color: #94a3b8 !important;
    font-size: 0.74rem !important;
    padding: 9px 14px !important;
  }
  .cr-filter-dd .Select-option.is-focused {
    background: rgba(106,165,156,0.1) !important;
    color: #e8ecf2 !important;
  }
  .cr-filter-dd .Select-option.is-selected {
    background: rgba(106,165,156,0.15) !important;
    color: #6AA59C !important;
    font-weight: 700 !important;
  }

  .cr-filter-panel-actions {
    display: flex !important;
    gap: 8px !important;
    margin-top: 16px !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(30,45,69,0.7) !important;
  }
  .cr-filter-panel-clear {
    flex: 1 !important;
    padding: 9px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(148,163,184,0.15) !important;
    background: transparent !important;
    color: #6b7f9a !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
  }
  .cr-filter-panel-clear:hover {
    border-color: rgba(148,163,184,0.3) !important;
    color: #e8ecf2 !important;
  }
  .cr-filter-panel-apply {
    flex: 2 !important;
    padding: 9px !important;
    border-radius: 10px !important;
    border: none !important;
    background: linear-gradient(135deg, #6AA59C, #4B7F76) !important;
    color: #fff !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    box-shadow: 0 0 14px rgba(106,165,156,0.2) !important;
    transition: all 0.15s !important;
  }
  .cr-filter-panel-apply:hover {
    box-shadow: 0 0 22px rgba(106,165,156,0.35) !important;
  }

  /* Hide the old filter rows on mobile (replaced by panel dropdowns) */
  .cr-control-row--filters {
    display: none !important;
  }

  /* Hide topics row + search inside the drawer on mobile */
  .cr-filter-drawer .cr-control-row--topics {
    display: none !important;
  }

  /* Challenge grid: 2 columns */
  .cr-chal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  /* Main grid: stack vertically */
  .cr-main-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  .cr-main-panel.cr-main-tutorial { order: 1 !important; }
  .cr-main-panel.cr-main-work     { order: 2 !important; }
  .cr-main-panel.cr-main-tutorial .card.tutorial-card {
    border-radius: 0 !important;
    border-bottom: none !important;
  }
  .cr-main-panel.cr-main-work .card.sql-card {
    border-radius: 0 !important;
  }

  .cr-main-shell { padding: 12px 0 !important; }

  .tutorial-card,
  .sql-card {
    height: auto !important;
    max-height: none !important;
    padding: 12px !important;
    overflow: visible !important;
  }

  .tutorial-card .tabs-clean,
  .tutorial-card .tabs-clean > div,
  .tutorial-card .tabs-clean .tab-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    gap: 10px !important;
  }
  .tutorial-card .tabs-clean .tab {
    flex: 1 1 0 !important;
    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 10px 0 !important;
    border-radius: 14px !important;
  }

  .sql-card .tabs-clean .tab-container {
    display: block !important;
    width: 100% !important;
    border-top: 0 !important;
  }
  .sql-card .tabs-clean .tab {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
  }

  .sql-card textarea#cr_sql_input,
  .sql-card textarea#cr_py_input {
    width: 100% !important;
    min-height: 52vh !important;
    max-height: 62vh !important;
    border-radius: 16px !important;
    padding: 12px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  .sql-card .sql-error-bar-wrapper,
  .sql-card #cr_error_bar_wrapper,
  .sql-card #cr_error_bar {
    width: 100% !important;
    margin-top: 14px !important;
  }

  .sql-card .button-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 14px !important;
  }
  .sql-card #cr_check_sql {
    width: min(280px, 92%) !important;
    height: 46px !important;
    border-radius: 14px !important;
  }

  .tutorial-card pre,
  .tutorial-card code {
    font-size: 11px;
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 100%;
  }

  .sql-card #cr-prev,
  .sql-card #cr-next {
    display: none !important;
  }
}


/* ================================================
   DESKTOP ≥769px — hide all mobile-only elements,
   keep drawer/filter rows fully visible as-is
   ================================================ */

@media (min-width: 769px) {
  .cr-filter-topbar    { display: none !important; }
  .cr-filter-progress  { display: none !important; }
  .cr-filter-panel     { display: none !important; }

  /* Drawer always open, no transition */
  .cr-filter-drawer {
    display: block !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    transition: none !important;
  }
  .cr-filter-drawer-inner {
    display: contents !important;
  }

  /* Restore topics row normal flow */
  .cr-control-row--topics {
    padding: 0 !important;
  }

  /* Desktop challenge grid — 3 columns */
  .cr-chal-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}


/* ================================================
   TOPICS DROPDOWN — 2-column option grid
   Overrides react-virtualized-select absolute positioning
   ================================================ */

#cr-fp-topic-dd .Select-menu-outer {
  max-height: 260px !important;
  overflow-y: auto !important;
}

/* Break virtualized layout so options flow in a CSS grid */
#cr-fp-topic-dd .VirtualizedSelect {
  height: auto !important;
  max-height: 260px !important;
  overflow-y: auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  padding: 4px 0 !important;
}

#cr-fp-topic-dd .VirtualizedSelect > div {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  height: auto !important;
}

/* Fallback for non-virtualized renders */
#cr-fp-topic-dd .Select-menu {
  column-count: 3 !important;
  column-gap: 0 !important;
}

#cr-fp-topic-dd .Select-option {
  break-inside: avoid !important;
  display: block !important;
  padding: 7px 10px !important;
  font-size: 0.68rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


/* ================================================
   MOBILE FILTER PANEL — pill rows (desktop-like)
   Safe to scope globally: panel is hidden on desktop
   ================================================ */

.cr-filter-panel .cr-fp-pill-row {
  display: flex !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.cr-filter-panel .cr-control-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.cr-filter-panel .cr-control-label {
  font-size: 0.57rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: #6b7f9a !important;
}

.cr-filter-panel .cr-segment-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  gap: 5px !important;
  scrollbar-width: none !important;
  padding: 2px 0 !important;
}
.cr-filter-panel .cr-segment-group::-webkit-scrollbar { display: none !important; }

.cr-filter-panel .cr-segment {
  flex-shrink: 0 !important;
  font-size: 0.68rem !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  border: none !important;
  cursor: pointer !important;
  background: transparent !important;
  color: rgba(209,213,219,0.85) !important;
  font-family: inherit !important;
  transition: background 0.15s, color 0.15s !important;
}
.cr-filter-panel .cr-segment.cr-segment-active {
  background: rgba(106,165,156,0.18) !important;
  color: #6AA59C !important;
  font-weight: 700 !important;
  box-shadow: 0 0 0 1px rgba(106,165,156,0.35) inset !important;
}

/* Separator between pill rows and topic dropdown */
.cr-filter-panel .cr-filter-panel-row {
  margin-top: 4px !important;
}


/* ===========================
   SMALL PHONES ≤430px
   =========================== */

@media (max-width: 430px) {
  .cr-filter-panel {
    border-radius: 12px !important;
  }
  .cr-filter-panel-label {
    min-width: 62px !important;
  }
}


/* ================================================
   COURSE OUTLINE — view toggle tabs
   ================================================ */

.cr-view-tabs {
  display: flex;
  gap: 2px;
  margin-left: auto;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 8px;
  padding: 2px;
}

.cr-view-tab {
  padding: 4px 13px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: rgba(148, 163, 184, 0.55);
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.cr-view-tab--on {
  background: rgba(106, 165, 156, 0.18);
  color: #6AA59C;
}

.cr-view-tab:hover:not(.cr-view-tab--on) {
  color: rgba(226, 232, 240, 0.7);
}


/* ================================================
   COURSE OUTLINE — track view panel
   ================================================ */

.cr-track-view {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px 0 8px;
  overflow: hidden;
}

.cr-track-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 10px;
}

.cr-track-label {
  font-size: 0.68rem;
  color: rgba(148, 163, 184, 0.6);
  white-space: nowrap;
}

.cr-track-prog-bar {
  flex: 1;
  height: 4px;
  background: rgba(148, 163, 184, 0.12);
  border-radius: 2px;
  overflow: hidden;
}

.cr-track-prog-fill {
  height: 100%;
  background: #6AA59C;
  border-radius: 2px;
  transition: width 0.4s ease;
}

.cr-track-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 300px;
  overflow-y: auto;
  padding: 0 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.2) transparent;
}

.cr-track-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.15s, border-color 0.15s;
}

.cr-track-item:hover {
  background: rgba(148, 163, 184, 0.06);
}

.cr-track-item--done {
  opacity: 0.55;
}

.cr-track-item--active {
  background: rgba(106, 165, 156, 0.1);
  border-color: rgba(106, 165, 156, 0.28);
}

.cr-track-seq {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  background: rgba(148, 163, 184, 0.12);
  color: rgba(148, 163, 184, 0.6);
  flex-shrink: 0;
}

.cr-track-seq--done {
  background: rgba(106, 165, 156, 0.18);
  color: #6AA59C;
}

.cr-track-seq--active {
  background: #6AA59C;
  color: #fff;
}

.cr-track-title {
  flex: 1;
  font-size: 0.78rem;
  color: rgba(226, 232, 240, 0.82);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cr-track-arrow {
  font-size: 0.65rem;
  color: #6AA59C;
  flex-shrink: 0;
}

.cr-track-empty {
  padding: 16px 12px;
  font-size: 0.78rem;
  color: rgba(148, 163, 184, 0.5);
  text-align: center;
}

/* Feedback message colour states */
.cr-feedback-correct {
  color: #22c55e;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 8px;
}
.cr-feedback-wrong {
  color: #ef4444;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 8px;
}
.cr-feedback-neutral {
  color: var(--muted, #94a3b8);
  font-size: 13px;
  margin-bottom: 8px;
}


/* ===========================
   UPSELL MODAL
   =========================== */

.upsell-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.upsell-card {
  background: var(--card, #0f172a);
  border: 1px solid var(--border, rgba(148,163,184,0.12));
  border-radius: 16px;
  padding: 32px;
  max-width: 440px;
  width: 90%;
  position: relative;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
}

.upsell-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--fg, #e2e8f0);
  margin-bottom: 8px;
}

.upsell-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  text-align: left;
}

.upsell-card ul li {
  padding: 4px 0;
  font-size: 14px;
  color: var(--fg, #e2e8f0);
}

.upsell-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: none;
  color: var(--muted, #94a3b8);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
}
.upsell-close:hover { color: var(--fg, #e2e8f0); }

.upsell-btn-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}