/* =====================================================================
   PSAU Code Campus LMS · Light Mode 2.0 v2.8.3
   ---------------------------------------------------------------------
   Compatibility layer for feature CSS originally authored dark-first.
   Loaded LAST so it can repair contrast without changing Dark Mode.
   ===================================================================== */

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

  /* Core */
  --bg:#f3f7fc;
  --bg2:#eaf1f9;
  --panel:rgba(255,255,255,.96);
  --panel-solid:#ffffff;
  --panel2:#f6f9fd;
  --line:#d5e0ed;
  --text:#102137;
  --muted:#586d85;
  --shadow:0 18px 48px rgba(36,60,88,.10);

  /* Premium */
  --premium-bg:#f3f7fc;
  --premium-surface:#ffffff;
  --premium-surface-2:#f6f9fd;
  --premium-surface-3:#edf4fb;
  --premium-border:#d7e2ee;
  --premium-border-strong:#c4d3e3;
  --premium-text:#102137;
  --premium-muted:#5b7088;
  --premium-shadow-sm:0 7px 22px rgba(40,65,95,.075);
  --premium-shadow-md:0 15px 42px rgba(40,65,95,.105);
  --premium-shadow-lg:0 26px 70px rgba(40,65,95,.14);
}

/* ---------------------------------------------------------------------
   Base light-mode canvas
   --------------------------------------------------------------------- */
:root[data-theme="light"] html,
:root[data-theme="light"] body{
  background:#f3f7fc!important;
  color:#102137!important;
}

:root[data-theme="light"] body{
  background:
    radial-gradient(circle at 15% -7%,rgba(113,91,255,.055),transparent 31%),
    radial-gradient(circle at 95% 13%,rgba(25,200,238,.045),transparent 28%),
    linear-gradient(180deg,#f7f9fd 0%,#eef4fa 100%)!important;
}

:root[data-theme="light"] body::before{
  opacity:.12!important;
}

:root[data-theme="light"] .ambient{
  opacity:.035!important;
  filter:blur(135px)!important;
}

:root[data-theme="light"] .premium-noise{
  opacity:.008!important;
}

:root[data-theme="light"] .content,
:root[data-theme="light"] .premium-content{
  color:#102137!important;
}

:root[data-theme="light"] .topbar{
  background:rgba(248,250,253,.94)!important;
  border-bottom-color:#d7e2ee!important;
  box-shadow:0 5px 20px rgba(41,65,91,.035)!important;
}

:root[data-theme="light"] .sidebar{
  background:rgba(255,255,255,.985)!important;
  border-right-color:#d7e2ee!important;
  box-shadow:9px 0 34px rgba(38,61,88,.045)!important;
}

:root[data-theme="light"] .premium-brand b,
:root[data-theme="light"] .sidebar-foot b,
:root[data-theme="light"] .top-title b{
  color:#102137!important;
}

:root[data-theme="light"] .premium-brand small,
:root[data-theme="light"] .sidebar-foot small,
:root[data-theme="light"] .top-title small{
  color:#60758d!important;
}

:root[data-theme="light"] .sidebar-caption{
  color:#586f88!important;
}

:root[data-theme="light"] .side-nav a{
  color:#526a84!important;
}

:root[data-theme="light"] .side-nav a:hover{
  color:#182b43!important;
  border-color:#d9e4ef!important;
  background:#f5f8fc!important;
}

:root[data-theme="light"] .side-nav a.active{
  color:#172a42!important;
  border-color:rgba(92,102,246,.20)!important;
  background:linear-gradient(90deg,rgba(113,91,255,.095),rgba(25,200,238,.035))!important;
  box-shadow:inset 0 0 0 1px rgba(113,91,255,.02)!important;
}

:root[data-theme="light"] .sidebar-network-card{
  border-color:rgba(35,176,126,.16)!important;
  background:rgba(42,194,139,.045)!important;
}

:root[data-theme="light"] .sidebar-network-card b{
  color:#153047!important;
}

:root[data-theme="light"] .sidebar-network-card small{
  color:#60758b!important;
}

:root[data-theme="light"] .server-pill{
  color:#506a82!important;
  border-color:#d3e2e6!important;
  background:rgba(255,255,255,.72)!important;
}

/* Stronger surface separation. */
:root[data-theme="light"] .glass,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .class-card,
:root[data-theme="light"] .resource-card,
:root[data-theme="light"] .feed-card,
:root[data-theme="light"] .composer,
:root[data-theme="light"] .side-panel{
  border-color:#d7e2ee!important;
  background:#fff!important;
  box-shadow:0 8px 24px rgba(40,65,95,.075)!important;
}

:root[data-theme="light"] .premium-hero,
:root[data-theme="light"] .course-banner,
:root[data-theme="light"] .assessment-head{
  border-color:#d5e1ed!important;
  background:
    radial-gradient(circle at 92% 2%,rgba(25,200,238,.055),transparent 31%),
    radial-gradient(circle at 8% 0%,rgba(113,91,255,.065),transparent 34%),
    #fff!important;
}

:root[data-theme="light"] .section-head h1,
:root[data-theme="light"] .section-head h2,
:root[data-theme="light"] .premium-hero h1,
:root[data-theme="light"] .panel h1,
:root[data-theme="light"] .panel h2,
:root[data-theme="light"] .panel h3{
  color:#102137!important;
}

:root[data-theme="light"] .section-head p,
:root[data-theme="light"] .premium-hero p,
:root[data-theme="light"] .muted{
  color:#5b7088!important;
}

:root[data-theme="light"] .eyebrow{
  color:#159fc2!important;
}

:root[data-theme="light"] .hero-trust-row span{
  color:#536b83!important;
  background:#f8fbfe!important;
}

:root[data-theme="light"] .stat-card small,
:root[data-theme="light"] .class-card p,
:root[data-theme="light"] .class-meta,
:root[data-theme="light"] .mini-list small,
:root[data-theme="light"] .metric-line span{
  color:#5b7088!important;
}

:root[data-theme="light"] .class-card h3,
:root[data-theme="light"] .class-meta b{
  color:#162a42!important;
}

:root[data-theme="light"] .code-chip{
  color:#6554cf!important;
  border-color:rgba(101,84,207,.17)!important;
  background:rgba(101,84,207,.065)!important;
}

/* Controls */
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea{
  border-color:#cbd8e6!important;
  background:#fff!important;
  color:#14283f!important;
  box-shadow:inset 0 1px 1px rgba(22,43,65,.025)!important;
}

:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder{
  color:#8a9aab!important;
  opacity:1!important;
}

:root[data-theme="light"] input:focus,
:root[data-theme="light"] select:focus,
:root[data-theme="light"] textarea:focus{
  border-color:#36b8db!important;
  background:#fff!important;
  box-shadow:0 0 0 3px rgba(25,172,212,.11)!important;
}

:root[data-theme="light"] label{
  color:#536b84!important;
}

:root[data-theme="light"] .btn:not(.primary):not(.danger):not(.success){
  border-color:#cedae7!important;
  background:#f8fbfe!important;
  color:#233a54!important;
}

:root[data-theme="light"] .btn.ghost{
  background:transparent!important;
}

:root[data-theme="light"] .btn:not(.primary):not(.danger):not(.success):hover{
  border-color:#b8c9dc!important;
  background:#f1f6fb!important;
}

:root[data-theme="light"] .icon-btn{
  border-color:#cedae7!important;
  background:#f8fbfe!important;
  color:#20364f!important;
}

:root[data-theme="light"] .icon-btn:hover{
  border-color:#aebfd2!important;
  background:#eef4fa!important;
}

:root[data-theme="light"] .table-wrap{
  border-color:#d5e0ec!important;
  background:#fff!important;
}

:root[data-theme="light"] thead th{
  background:#f4f8fc!important;
  color:#506981!important;
}

:root[data-theme="light"] tbody td{
  color:#1d334c!important;
  border-bottom-color:#e0e8f1!important;
}

:root[data-theme="light"] tbody td small{
  color:#62768c!important;
}

:root[data-theme="light"] tbody tr:hover{
  background:#f7fbfe!important;
}

:root[data-theme="light"] .modal{
  background:rgba(30,45,65,.32)!important;
}

:root[data-theme="light"] .modal-card{
  background:#fff!important;
  color:#14283f!important;
  border-color:#cad7e5!important;
}

:root[data-theme="light"] .toast{
  background:rgba(255,255,255,.985)!important;
  color:#14283f!important;
  border-color:#cad8e6!important;
}

/* ---------------------------------------------------------------------
   Engagement Hub — primary issue shown in the screenshots
   --------------------------------------------------------------------- */
:root[data-theme="light"] .engagement-hub-hero-v250,
:root[data-theme="light"] .engagement-class-picker-v250,
:root[data-theme="light"] .engagement-selected-class-v250,
:root[data-theme="light"] .engagement-feature-card-v250,
:root[data-theme="light"] .engagement-course-prompt-v276,
:root[data-theme="light"] .engagement-empty-stage-v275{
  border-color:#d6e2ee!important;
  box-shadow:0 8px 25px rgba(41,65,92,.07)!important;
}

:root[data-theme="light"] .engagement-hub-hero-v250{
  background:
    radial-gradient(circle at 7% 0%,rgba(113,91,255,.07),transparent 32%),
    radial-gradient(circle at 94% 3%,rgba(25,200,238,.05),transparent 31%),
    #fff!important;
}

:root[data-theme="light"] .engagement-hub-hero-copy-v250 h1,
:root[data-theme="light"] .engagement-class-picker-head-v250 h2,
:root[data-theme="light"] .engagement-selected-class-v250 h2,
:root[data-theme="light"] .engagement-feature-card-v250 h3,
:root[data-theme="light"] .engagement-empty-stage-v275 h2{
  color:#152940!important;
}

:root[data-theme="light"] .engagement-hub-hero-copy-v250>p,
:root[data-theme="light"] .engagement-hub-master-v250 small,
:root[data-theme="light"] .engagement-hub-master-v250 em,
:root[data-theme="light"] .engagement-class-picker-hint-v275,
:root[data-theme="light"] .engagement-selected-class-v250 p,
:root[data-theme="light"] .engagement-feature-card-v250 p,
:root[data-theme="light"] .engagement-feature-meta-v250>span,
:root[data-theme="light"] .engagement-empty-stage-v275 p{
  color:#586f87!important;
}

:root[data-theme="light"] .engagement-hub-hero-chips-v250>span{
  color:#536b83!important;
  background:#f6fafe!important;
  border-color:#d9e4ef!important;
}

/* Unselected course */
:root[data-theme="light"] .engagement-class-list-v250>a.engagement-course-card-v274{
  border-color:#d7e2ed!important;
  background:
    radial-gradient(circle at 105% -15%,rgba(25,200,238,.045),transparent 45%),
    #fff!important;
  color:#14283f!important;
  box-shadow:0 7px 20px rgba(40,65,95,.055)!important;
}

/* Hover must remain light — old CSS changed this card to a dark surface. */
:root[data-theme="light"] .engagement-class-list-v250>a.engagement-course-card-v274:hover{
  border-color:rgba(34,158,195,.28)!important;
  background:
    radial-gradient(circle at 105% -15%,rgba(25,200,238,.085),transparent 45%),
    #f7fbfe!important;
  box-shadow:0 12px 30px rgba(42,68,98,.10)!important;
}

/* Selected course: high contrast but still unmistakably Light Mode. */
:root[data-theme="light"] .engagement-class-list-v250>a.engagement-course-card-v274.active{
  border-color:rgba(67,116,226,.33)!important;
  background:
    radial-gradient(circle at 103% -15%,rgba(25,200,238,.10),transparent 43%),
    radial-gradient(circle at -10% 110%,rgba(113,91,255,.09),transparent 44%),
    linear-gradient(145deg,#eef6ff,#fbfdff)!important;
  box-shadow:
    inset 0 0 0 1px rgba(67,116,226,.035),
    0 12px 30px rgba(50,81,118,.11)!important;
}

:root[data-theme="light"] .engagement-course-title-v274{
  color:#162a42!important;
}

:root[data-theme="light"] .engagement-course-meta-v274>span{
  color:#536b84!important;
}

:root[data-theme="light"] .engagement-course-meta-v274>span strong{
  color:#334d68!important;
}

:root[data-theme="light"] .engagement-course-meta-v274>span i{
  color:#8091a3!important;
}

:root[data-theme="light"] .engagement-course-open-v274{
  color:#4d6985!important;
  border-top-color:#dbe5ef!important;
}

:root[data-theme="light"] .engagement-course-card-v274:hover .engagement-course-open-v274{
  color:#167f9d!important;
}

:root[data-theme="light"] .engagement-course-code-v274{
  color:#1689a8!important;
  border-color:rgba(25,159,196,.18)!important;
  background:rgba(25,159,196,.065)!important;
}

:root[data-theme="light"] .engagement-course-selected-v274{
  color:#2859b9!important;
  border-color:rgba(57,102,208,.18)!important;
  background:rgba(57,102,208,.065)!important;
}

:root[data-theme="light"] .engagement-course-status-v274.ready,
:root[data-theme="light"] .engagement-course-status-v274.live{
  color:#187955!important;
  border-color:rgba(31,151,107,.18)!important;
  background:rgba(37,174,123,.075)!important;
}

/* Initial Select a Course prompt */
:root[data-theme="light"] .engagement-course-prompt-v276{
  background:
    radial-gradient(circle at 8% 12%,rgba(111,91,255,.055),transparent 34%),
    radial-gradient(circle at 92% 8%,rgba(31,201,239,.045),transparent 36%),
    #fff!important;
}

:root[data-theme="light"] .engagement-course-prompt-copy-v276 h2{
  color:#152940!important;
}

:root[data-theme="light"] .engagement-course-prompt-copy-v276>p{
  color:#5b7188!important;
}

:root[data-theme="light"] .engagement-course-prompt-steps-v276>span{
  color:#526b84!important;
  border-color:#d6e2ed!important;
  background:#f7fafd!important;
}

:root[data-theme="light"] .engagement-course-prompt-steps-v276>span>b{
  color:#187f9d!important;
  background:rgba(25,159,196,.075)!important;
}

:root[data-theme="light"] .engagement-selected-status-v250{
  background:#f6f9fd!important;
  border-color:#d7e2ee!important;
}

:root[data-theme="light"] .engagement-selected-status-v250 b{
  color:#213a54!important;
}

:root[data-theme="light"] .engagement-selected-status-v250 small{
  color:#60758c!important;
}

:root[data-theme="light"] .engagement-feature-card-v250{
  background:#fff!important;
}

:root[data-theme="light"] .engagement-feature-card-v250.recitation{
  background:
    radial-gradient(circle at 95% 5%,rgba(25,200,238,.055),transparent 34%),
    radial-gradient(circle at 10% 100%,rgba(113,91,255,.055),transparent 42%),
    #fff!important;
}

:root[data-theme="light"] .engagement-feature-card-v250.code-clash-v270{
  background:
    radial-gradient(circle at 92% 5%,rgba(104,220,244,.06),transparent 31%),
    radial-gradient(circle at 7% 100%,rgba(138,117,255,.055),transparent 42%),
    #fff!important;
}

:root[data-theme="light"] .engagement-feature-card-v250.spotlight-v260{
  background:
    radial-gradient(circle at 95% 0%,rgba(246,201,95,.055),transparent 32%),
    radial-gradient(circle at 5% 100%,rgba(139,120,255,.045),transparent 40%),
    #fff!important;
}

/* ---------------------------------------------------------------------
   Code Clash Arena
   Keep code editors dark; make ordinary light surfaces actually readable.
   --------------------------------------------------------------------- */
:root[data-theme="light"] .clash-hero-v270{
  background:
    radial-gradient(circle at 92% 4%,rgba(104,220,244,.055),transparent 30%),
    radial-gradient(circle at 7% 5%,rgba(138,117,255,.07),transparent 31%),
    #fff!important;
}

:root[data-theme="light"] .clash-hero-title-v270 h1,
:root[data-theme="light"] .clash-toolbar-v270 h2,
:root[data-theme="light"] .clash-scoreboard-head-v270 h2,
:root[data-theme="light"] .clash-course-v270 b{
  color:#142940!important;
}

:root[data-theme="light"] .clash-hero-v270 p,
:root[data-theme="light"] .clash-toolbar-v270 p,
:root[data-theme="light"] .clash-course-v270 small,
:root[data-theme="light"] .clash-breadcrumb-v270,
:root[data-theme="light"] .clash-breadcrumb-v270 a{
  color:#596f87!important;
}

:root[data-theme="light"] .clash-stage-v270,
:root[data-theme="light"] .clash-scoreboard-v270{
  border-color:#d6e2ee!important;
  background:#fff!important;
  box-shadow:0 8px 25px rgba(41,65,92,.07)!important;
}

/* The previous grid used white lines; use subtle slate lines on white. */
:root[data-theme="light"] .clash-stage-grid-v270{
  opacity:.35!important;
  background:
    linear-gradient(90deg,rgba(76,102,132,.055) 1px,transparent 1px),
    linear-gradient(rgba(76,102,132,.055) 1px,transparent 1px)!important;
}

/* Answer choices were white text on a white light-mode surface. */
:root[data-theme="light"] .clash-choice-v270{
  color:#1c334d!important;
  border-color:#d3dfeb!important;
  background:#f7fafd!important;
}

:root[data-theme="light"] .clash-choice-v270:hover{
  border-color:rgba(29,159,195,.27)!important;
  background:#f1f8fc!important;
}

:root[data-theme="light"] .clash-live-state-v270,
:root[data-theme="light"] .clash-timer-v270,
:root[data-theme="light"] .clash-my-stats-v270>div,
:root[data-theme="light"] .clash-podium-v270>div,
:root[data-theme="light"] .clash-rank-v270,
:root[data-theme="light"] .clash-course-v270{
  background:#f7fafd!important;
  border-color:#d7e2ee!important;
}

:root[data-theme="light"] .clash-live-state-v270 b,
:root[data-theme="light"] .clash-timer-v270 b,
:root[data-theme="light"] .clash-my-stats-v270 b,
:root[data-theme="light"] .clash-podium-v270 b,
:root[data-theme="light"] .clash-rank-v270 b,
:root[data-theme="light"] .clash-rank-v270 strong{
  color:#1b324b!important;
}

:root[data-theme="light"] .clash-live-state-v270 small,
:root[data-theme="light"] .clash-timer-v270 small,
:root[data-theme="light"] .clash-my-stats-v270 small,
:root[data-theme="light"] .clash-rank-v270 small,
:root[data-theme="light"] .clash-board-empty-v270 span{
  color:#60758d!important;
}

:root[data-theme="light"] .clash-answer-guide-v272>.step.active{
  color:#173049!important;
}

:root[data-theme="light"] .clash-mcq-action-v272 span{
  color:#39536d!important;
}

:root[data-theme="light"] .clash-text-answer-v272 textarea{
  color:#173049!important;
  background:#fff!important;
}

/* Guided Challenge Builder */
:root[data-theme="light"] .clash-creator-v277,
:root[data-theme="light"] .clash-bank-card-wrap-v277{
  background:#fff!important;
  border-color:#d5e1ed!important;
}

:root[data-theme="light"] .clash-wizard-steps-v277{
  background:#f7fafd!important;
  border-color:#d7e2ee!important;
}

:root[data-theme="light"] .clash-wizard-steps-v277>button{
  color:#60758d!important;
}

:root[data-theme="light"] .clash-wizard-steps-v277>button.active{
  color:#183149!important;
  background:rgba(25,159,196,.075)!important;
}

:root[data-theme="light"] .clash-wizard-steps-v277>i{
  background:#d7e2ed!important;
}

:root[data-theme="light"] .clash-step-heading-v277 h4,
:root[data-theme="light"] .clash-type-card-v277>b,
:root[data-theme="light"] .clash-preview-v277 h4{
  color:#162b43!important;
}

:root[data-theme="light"] .clash-step-heading-v277 p,
:root[data-theme="light"] .clash-type-card-v277>small{
  color:#5d738b!important;
}

:root[data-theme="light"] .clash-type-card-v277{
  color:#1f3852!important;
  border-color:#d6e1ed!important;
  background:#f8fbfe!important;
}

:root[data-theme="light"] .clash-type-card-v277:hover{
  background:#f1f8fc!important;
}

:root[data-theme="light"] .clash-type-card-v277.active{
  background:linear-gradient(145deg,rgba(25,200,238,.075),rgba(126,104,255,.045)),#f8fbfe!important;
  border-color:rgba(31,159,195,.27)!important;
}

:root[data-theme="light"] .clash-field-v277>input,
:root[data-theme="light"] .clash-field-v277>textarea,
:root[data-theme="light"] .clash-field-v277>select,
:root[data-theme="light"] .clash-mcq-option-v277>input[type="text"]{
  color:#172d45!important;
  background:#fff!important;
  border-color:#ccd9e6!important;
}

:root[data-theme="light"] .clash-difficulty-v277 label span,
:root[data-theme="light"] .clash-time-presets-v277 label span{
  color:#526a83!important;
  background:#f7fafd!important;
  border-color:#d2deea!important;
}

:root[data-theme="light"] .clash-difficulty-v277 label input:checked+span,
:root[data-theme="light"] .clash-time-presets-v277 label input:checked+span{
  color:#17354c!important;
  background:rgba(25,159,196,.08)!important;
  border-color:rgba(25,159,196,.25)!important;
}

:root[data-theme="light"] .clash-preview-v277{
  background:
    radial-gradient(circle at 105% 0%,rgba(105,217,243,.06),transparent 42%),
    #f7fafd!important;
  border-color:#d4e0ec!important;
}

:root[data-theme="light"] .clash-preview-v277>p,
:root[data-theme="light"] .clash-preview-head-v277>small,
:root[data-theme="light"] .clash-preview-answer-v277 small{
  color:#5d738b!important;
}

/* Intentionally dark islands in both themes: source code is more readable here. */
:root[data-theme="light"] .clash-code-v270,
:root[data-theme="light"] #clashCodeEditor,
:root[data-theme="light"] .clash-code-editor-field-v277,
:root[data-theme="light"] .clash-code-editor-field-v277 textarea,
:root[data-theme="light"] .clash-preview-v277>pre,
:root[data-theme="light"] .clash-reference-solution-v278 pre{
  background:#07111d!important;
  color:#e8f2fb!important;
  border-color:#20354a!important;
}

/* ---------------------------------------------------------------------
   Spotlight Picker
   Controls become light; the reel/stage intentionally remains dark.
   --------------------------------------------------------------------- */
:root[data-theme="light"] .spotlight-header-v260{
  background:
    radial-gradient(circle at 95% 0%,rgba(110,221,244,.05),transparent 30%),
    radial-gradient(circle at 6% 0%,rgba(139,120,255,.065),transparent 30%),
    #fff!important;
  border-color:#d6e2ee!important;
}

:root[data-theme="light"] .spotlight-header-copy-v260 h1,
:root[data-theme="light"] .spotlight-controls-head-v260 h2,
:root[data-theme="light"] .spotlight-class-card-v260 b{
  color:#152a42!important;
}

:root[data-theme="light"] .spotlight-header-copy-v260>p,
:root[data-theme="light"] .spotlight-class-card-v260 small,
:root[data-theme="light"] .spotlight-picker-back-v260,
:root[data-theme="light"] .spotlight-picker-back-v260>a{
  color:#5a7189!important;
}

:root[data-theme="light"] .spotlight-controls-v260,
:root[data-theme="light"] .spotlight-class-card-v260{
  background:#fff!important;
  border-color:#d6e2ee!important;
}

:root[data-theme="light"] .spotlight-status-v260{
  color:#566e87!important;
  background:#f7fafd!important;
  border-color:#d3dfeb!important;
}

:root[data-theme="light"] .spotlight-status-v260 b{
  color:#1c344e!important;
}

:root[data-theme="light"] .spotlight-history-v260>span{
  color:#526a83!important;
  background:#f7fafd!important;
  border-color:#d5e1ed!important;
}

/* The actual random-picker stage intentionally retains its theatrical
   dark treatment even when the surrounding application is Light Mode. */
:root[data-theme="light"] .spotlight-stage-v260,
:root[data-theme="light"] .spotlight-reel-window-v260,
:root[data-theme="light"] .spotlight-stage-label-v260{
  color:#e7f1fa!important;
}

/* ---------------------------------------------------------------------
   Coding Assessment v2.8.0
   --------------------------------------------------------------------- */
:root[data-theme="light"] .coding-preset-grid-v280>button{
  color:#1c344d!important;
  border-color:#d4e0ec!important;
  background:#f8fbfe!important;
}

:root[data-theme="light"] .coding-preset-grid-v280>button.active{
  color:#142c44!important;
  border-color:rgba(35,157,194,.28)!important;
  background:linear-gradient(145deg,rgba(105,217,243,.08),rgba(126,104,255,.04)),#f8fbfe!important;
}

:root[data-theme="light"] .coding-quick-fields-v280 input:not([type=checkbox]):not([type=radio]),
:root[data-theme="light"] .coding-quick-fields-v280 textarea,
:root[data-theme="light"] .coding-quick-fields-v280 select,
:root[data-theme="light"] .coding-feedback-select-v280 select,
:root[data-theme="light"] .coding-test-card-head-v280 input,
:root[data-theme="light"] .coding-test-card-head-v280 select,
:root[data-theme="light"] .coding-test-io-v280 textarea,
:root[data-theme="light"] .coding-add-row-v280 input,
:root[data-theme="light"] .coding-add-row-v280 select{
  color:#162c44!important;
  background:#fff!important;
  border-color:#ccd9e6!important;
}

:root[data-theme="light"] .coding-autograde-option-v280,
:root[data-theme="light"] .coding-test-card-v280,
:root[data-theme="light"] .coding-add-test-v280,
:root[data-theme="light"] .coding-choice-grid-v280>label>span,
:root[data-theme="light"] .coding-publish-toggle-v280,
:root[data-theme="light"] .coding-master-toggle-v280{
  background:#f8fbfe!important;
  border-color:#d6e2ee!important;
  color:#183149!important;
}

:root[data-theme="light"] .coding-autograde-option-v280>label span{
  color:#4f6881!important;
  background:#fff!important;
  border-color:#d0dce9!important;
}

:root[data-theme="light"] .coding-autograde-option-v280>label input:checked+span{
  color:#17364e!important;
  background:rgba(25,159,196,.08)!important;
  border-color:rgba(25,159,196,.25)!important;
}

:root[data-theme="light"] .coding-setup-head-v280 h2,
:root[data-theme="light"] .coding-test-head-v280 h3,
:root[data-theme="light"] .coding-result-top-v280 b,
:root[data-theme="light"] .coding-review-result-head-v280 b{
  color:#152a42!important;
}

:root[data-theme="light"] .coding-setup-head-v280 p,
:root[data-theme="light"] .coding-test-head-v280 p,
:root[data-theme="light"] .coding-result-v280>p{
  color:#5b7189!important;
}

/* Test/source output remains monospace-dark by design. */
:root[data-theme="light"] .coding-result-tests-v280 pre,
:root[data-theme="light"] .coding-review-tests-v280 pre,
:root[data-theme="light"] .coding-compile-error-v280 pre,
:root[data-theme="light"] .coding-sample-tests-v280 pre{
  background:#07111d!important;
  color:#e5eff8!important;
  border-color:#20364b!important;
}

/* ---------------------------------------------------------------------
   Student experience / content reuse / common sub-panels
   --------------------------------------------------------------------- */
:root[data-theme="light"] .student-course-card-v200,
:root[data-theme="light"] .student-upcoming-card-v200,
:root[data-theme="light"] .student-announcements-card-v200,
:root[data-theme="light"] .student-join-card-v200,
:root[data-theme="light"] .student-resource-card-v200,
:root[data-theme="light"] .reuse-content-groups-v210>details,
:root[data-theme="light"] .reuse-report-v210{
  background:#fff!important;
  border-color:#d6e2ee!important;
}

:root[data-theme="light"] .student-course-card-v200 h3,
:root[data-theme="light"] .student-side-head-v200 h3,
:root[data-theme="light"] .student-resource-card-v200 b{
  color:#152a42!important;
}

:root[data-theme="light"] .student-course-card-v200 p,
:root[data-theme="light"] .student-resource-card-v200 small{
  color:#5b7189!important;
}

:root[data-theme="light"] .student-course-next-v200>span{
  color:#203a55!important;
}

/* ---------------------------------------------------------------------
   Better light-mode focus/selection/scrolling
   --------------------------------------------------------------------- */
:root[data-theme="light"] ::selection{
  background:rgba(76,104,232,.18);
  color:#102137;
}

:root[data-theme="light"] *{
  scrollbar-color:#b8c8d8 #edf3f8;
}

:root[data-theme="light"] .keyboard-user :focus-visible{
  outline-color:#128fb1!important;
}

/* ---------------------------------------------------------------------
   Mobile: retain contrast when cards collapse/stack.
   --------------------------------------------------------------------- */
@media(max-width:900px){
  :root[data-theme="light"] .sidebar{
    box-shadow:18px 0 55px rgba(34,57,84,.15)!important;
  }

  :root[data-theme="light"] .mobile-nav-scrim{
    background:rgba(27,43,63,.28)!important;
  }

  :root[data-theme="light"] .engagement-hub-layout-v250{
    gap:12px!important;
  }
}

@media(max-width:680px){
  :root[data-theme="light"] .content,
  :root[data-theme="light"] .premium-content{
    background:transparent!important;
  }

  :root[data-theme="light"] .engagement-class-list-v250>a.engagement-course-card-v274{
    box-shadow:0 5px 16px rgba(40,65,95,.06)!important;
  }

  :root[data-theme="light"] .engagement-course-prompt-v276{
    box-shadow:0 5px 18px rgba(40,65,95,.06)!important;
  }

  :root[data-theme="light"] .clash-wizard-steps-v277{
    background:#f8fbfe!important;
  }
}

@media(prefers-reduced-motion:reduce){
  :root[data-theme="light"] .theme-transitioning,
  :root[data-theme="light"] .theme-transitioning *{
    transition:none!important;
  }
}