:root { --valor-sidebar: 250px; --valor-bg: #090d14; --valor-panel: #111827; --valor-border: rgba(255,255,255,.09); }
body { background: var(--valor-bg); }
.valor-sidebar { position: fixed; inset: 0 auto 0 0; width: var(--valor-sidebar); z-index: 1040; background: linear-gradient(180deg,#111827 0%,#0b1220 100%); border-right: 1px solid var(--valor-border); padding: 22px 16px; overflow-y: auto; }
.valor-brand { display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none; font-weight:800; font-size:1.08rem; margin:0 8px 26px; }
.valor-brand img { width:38px; height:38px; object-fit:contain; }
.valor-nav .nav-link { color:#aeb8c8; border-radius:10px; padding:11px 12px; margin-bottom:5px; font-weight:600; }
.valor-nav .nav-link:hover { color:#fff; background:rgba(255,255,255,.07); }
.valor-account { margin-top:22px; padding-top:18px; border-top:1px solid var(--valor-border); }
.valor-main { margin-left:var(--valor-sidebar); min-height:100vh; padding:30px; }
.hero-panel { padding:28px; border:1px solid var(--valor-border); border-radius:22px; background:radial-gradient(circle at 15% 10%,rgba(255,193,7,.12),transparent 35%),linear-gradient(135deg,#111827,#0d1421); }
.hero-title { font-size:clamp(2.5rem,5vw,4.7rem); line-height:1.02; max-width:900px; font-weight:800; letter-spacing:-.04em; }
.hero-copy { max-width:790px; color:#aeb8c8; font-size:1.15rem; }
.plan-card,.overview-card,.dashboard-card,.metric-card,.status-header { border:1px solid var(--valor-border)!important; background:rgba(17,24,39,.88)!important; box-shadow:0 14px 40px rgba(0,0,0,.18); }
.overview-card { transition:transform .18s ease,border-color .18s ease; }
.overview-card:hover { transform:translateY(-3px); border-color:rgba(255,193,7,.4)!important; }
.overview-icon { font-size:2rem; }
.metric-label { color:#7f8a9b; font-size:.72rem; font-weight:800; letter-spacing:.1em; margin-bottom:.45rem; }
.page-title { font-weight:800; letter-spacing:-.025em; }
.platform-tabs .nav-link { color:#aeb8c8; }
.platform-tabs .nav-link.active { color:#fff; background:#1a2433; border-color:var(--valor-border); }
.plan-table { border:1px solid var(--valor-border); border-radius:14px; overflow:hidden; }
@media (max-width: 991.98px) { .valor-sidebar { position:relative; width:100%; min-height:auto; } .valor-main { margin-left:0; padding:20px 14px; } .valor-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; } }
/* =========================================================
   AI COACH / QUIZ CONTRAST FIX
   ========================================================= */

/* General AI Coach text */
.ai-coach-page,
.ai-coach-page p,
.ai-coach-page span,
.ai-coach-page label,
.ai-coach-page li,
.ai-coach-page h1,
.ai-coach-page h2,
.ai-coach-page h3,
.ai-coach-page h4,
.ai-coach-page h5,
.ai-coach-page h6 {
    color: #f5f7fa !important;
}

/* Quiz cards / containers */
.ai-coach-page .card,
.ai-coach-page .quiz-card,
.ai-coach-page .quiz-container {
    background-color: #151a22 !important;
    color: #f5f7fa !important;
}

/* Radio / checklist answer labels */
.ai-coach-page .form-check-label,
.ai-coach-page .form-check,
.ai-coach-page .radio-item,
.ai-coach-page .checklist-item {
    color: #f5f7fa !important;
}

/* Dash radio items */
.ai-coach-page .dash-radio-items label,
.ai-coach-page .dash-checklist label {
    color: #f5f7fa !important;
}

/* Native inputs */
.ai-coach-page input,
.ai-coach-page textarea,
.ai-coach-page select {
    background-color: #1f2630 !important;
    color: #ffffff !important;
    border-color: #4a5568 !important;
}

/* Dropdown selected value */
.ai-coach-page .Select-control,
.ai-coach-page .Select-value,
.ai-coach-page .Select-value-label,
.ai-coach-page .Select-placeholder,
.ai-coach-page .Select-input,
.ai-coach-page .Select-input input {
    color: #111111 !important;
}

/* Dropdown menu */
.ai-coach-page .Select-menu-outer,
.ai-coach-page .VirtualizedSelectOption {
    background-color: #ffffff !important;
    color: #111111 !important;
}

/* Selected / hovered dropdown options */
.ai-coach-page .VirtualizedSelectFocusedOption {
    background-color: #e9ecef !important;
    color: #111111 !important;
}

/* Buttons used as quiz answers */
.ai-coach-page button,
.ai-coach-page .btn {
    color: #ffffff !important;
}

/* Keep light buttons readable */
.ai-coach-page .btn-light,
.ai-coach-page .btn-warning {
    color: #111111 !important;
}

/* Alerts */
.ai-coach-page .alert {
    color: inherit !important;
}

/* Tables */
.ai-coach-page table,
.ai-coach-page th,
.ai-coach-page td {
    color: #f5f7fa !important;
}

/* Small / muted text should still be visible */
.ai-coach-page .text-muted,
.ai-coach-page .text-secondary,
.ai-coach-page small {
    color: #b8c2cc !important;
}


/* =========================================================
   AI COACH QUIZ CONTRAST FIX
   ========================================================= */

/* Make quiz questions readable */
.ai-coach-page .quiz-question,
.ai-coach-page .quiz-question-title,
.ai-coach-page .form-check-label,
.ai-coach-page label {
    color: #f5f7fa !important;
}

/* Dash RadioItems / Checklist text */
.ai-coach-page .dash-radio-items label,
.ai-coach-page .dash-checklist label,
.ai-coach-page input[type="radio"] + label,
.ai-coach-page input[type="checkbox"] + label {
    color: #f5f7fa !important;
}

/* Generic radio/check option text */
.ai-coach-page .form-check,
.ai-coach-page .radio-item,
.ai-coach-page .checklist-item {
    color: #f5f7fa !important;
}

/* Make all quiz card text readable */
.ai-coach-page .quiz-card,
.ai-coach-page .quiz-container,
.ai-coach-page .card {
    color: #f5f7fa !important;
}

/* Radio inputs */
.ai-coach-page input[type="radio"],
.ai-coach-page input[type="checkbox"] {
    accent-color: #d4af37;
}

/* Selected option highlight */
.ai-coach-page label:has(input[type="radio"]:checked),
.ai-coach-page label:has(input[type="checkbox"]:checked) {
    color: #ffffff !important;
    background: rgba(212, 175, 55, 0.14) !important;
    border: 1px solid #d4af37 !important;
    border-radius: 8px;
    padding: 8px 12px;
}

/* Fallback for Bootstrap form-check selected state */
.ai-coach-page .form-check:has(input:checked) {
    background: rgba(212, 175, 55, 0.14) !important;
    border: 1px solid #d4af37 !important;
    border-radius: 8px;
    padding: 8px 12px;
}

/* Keep question headings bright */
.ai-coach-page h1,
.ai-coach-page h2,
.ai-coach-page h3,
.ai-coach-page h4,
.ai-coach-page h5,
.ai-coach-page h6,
.ai-coach-page p,
.ai-coach-page span {
    color: #f5f7fa;
}

/* Muted/supporting text */
.ai-coach-page .text-muted,
.ai-coach-page .text-secondary,
.ai-coach-page small {
    color: #b8c2cc !important;
}



/* =========================================================
   AI COACH — EXACT QUIZ CONTRAST FIX
   ========================================================= */

/*
   Everything rendered inside the loaded AI Coach lesson.
   Keeps text readable against Valor's dark background.
*/
#ai-coach-lesson-content {
    color: #f5f7fa !important;
}

#ai-coach-lesson-content h1,
#ai-coach-lesson-content h2,
#ai-coach-lesson-content h3,
#ai-coach-lesson-content h4,
#ai-coach-lesson-content h5,
#ai-coach-lesson-content h6,
#ai-coach-lesson-content p,
#ai-coach-lesson-content li,
#ai-coach-lesson-content small,
#ai-coach-lesson-content span {
    color: #f5f7fa;
}


/* ---------------------------------------------------------
   QUIZ ANSWERS
   --------------------------------------------------------- */

/* Dash RadioItems renders its answers using labels. */
#ai-coach-lesson-content label {
    color: #f5f7fa !important;
}

/* Make all radio-answer text clearly visible. */
#ai-coach-lesson-content input[type="radio"] {
    accent-color: #d4af37;
    margin-right: 10px;
}

#ai-coach-lesson-content input[type="radio"] + span {
    color: #f5f7fa !important;
}


/* ---------------------------------------------------------
   SELECTED ANSWER — GOLD
   --------------------------------------------------------- */

/*
   Highlight the entire selected answer row in Valor gold.
   :has() is supported by current Chrome/Safari browsers.
*/
#ai-coach-lesson-content label:has(input[type="radio"]:checked) {
    color: #ffffff !important;
    background: rgba(212, 175, 55, 0.16) !important;
    border: 1px solid #d4af37 !important;
    border-radius: 8px;
    padding: 8px 12px !important;
}

/* Make text inside selected answer bright. */
#ai-coach-lesson-content label:has(input[type="radio"]:checked) span {
    color: #ffffff !important;
}

/* Gold radio itself. */
#ai-coach-lesson-content input[type="radio"]:checked {
    accent-color: #d4af37 !important;
}


/* ---------------------------------------------------------
   RADIO ITEM SPACING
   --------------------------------------------------------- */

/*
   Dash often renders RadioItems as label elements directly
   inside its container.
*/
#ai-coach-lesson-content label {
    display: block;
    padding: 7px 10px;
    margin-bottom: 4px;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease;
}

/* Hover feedback without changing quiz behaviour. */
#ai-coach-lesson-content label:hover {
    background: rgba(255, 255, 255, 0.05);
}


/* ---------------------------------------------------------
   QUESTION CARDS / LESSON TEXT
   --------------------------------------------------------- */

#ai-coach-lesson-content .card,
#ai-coach-lesson-content .card-body {
    color: #f5f7fa !important;
}

/* Bootstrap muted text was too dark on the dark theme. */
#ai-coach-lesson-content .text-secondary,
#ai-coach-lesson-content .text-muted {
    color: #b9c1cc !important;
}

/* Alerts need readable text as well. */
#ai-coach-lesson-content .alert {
    color: #f5f7fa !important;
}


/* ---------------------------------------------------------
   QUIZ RESULT
   --------------------------------------------------------- */

#ai-coach-quiz-result,
#ai-coach-quiz-result p,
#ai-coach-quiz-result span,
#ai-coach-quiz-result li {
    color: #f5f7fa !important;
}