/**
 * ÖDEVİN Universal Typography & Contrast Guardrails (2026 Engine)
 * 
 * Hem beyaz/açık hem koyu/renkli zeminlerde, gece ve gündüz modunda (Light/Dark Mode)
 * tüm başlık, alt başlık, kart, buton, form ve etiketlerin %100 okunabilir olmasını garanti eder.
 * WCAG 2.1 AA / AAA Uyumlu Kontrast Zırhı
 */

/* ══════════════════════════════════════════════════════════════════
   ÖDEVİN EVRENSEL KONTRAST & TİPOGRAFİ GÜVENCE KURALLARI (2026)
   ══════════════════════════════════════════════════════════════════ */

/* Logo Dark / Light Mode Geçiş Kuralları */
.site-logo-img--dark {
  display: none !important;
}
.site-logo-img--light {
  display: block !important;
}

html[data-theme="dark"] .site-logo-img--light,
body[data-theme="dark"] .site-logo-img--light {
  display: none !important;
}
html[data-theme="dark"] .site-logo-img--dark,
body[data-theme="dark"] .site-logo-img--dark {
  display: block !important;
}

/* ══════════════════════════════════════════════════════════════════
   1. GENEL TYPOGRAPHY & DEĞİŞKENLER
   ══════════════════════════════════════════════════════════════════ */
:root {
  --op-text-main: #0f172a;       /* Slate-900: Derin okunabilir ana metin */
  --op-text-heading: #0f172a;    /* Net, güçlü başlık rengi */
  --op-text-muted: #475569;      /* Slate-600: Okunabilir ikincil metin */
  --op-text-subtle: #64748b;     /* Slate-500: Yardımcı açıklamalar */
  --op-bg-page: #ffffff;
  --op-bg-surface: #f8fafc;
  --op-border-main: #e2e8f0;
  --op-primary-coral: #e11d48;
}

/* ══════════════════════════════════════════════════════════════════
   2. GÜNDÜZ MODU (LIGHT THEME - BEYAZ & AÇIK ZEMİNLER)
   ══════════════════════════════════════════════════════════════════ */
body:not([data-theme="dark"]) {
  background-color: #ffffff;
  color: #0f172a;
}

/* Açık Zemin Standart Başlıkları (Karanlık Kutular Hariç) */
body:not([data-theme="dark"]) h1,
body:not([data-theme="dark"]) h2,
body:not([data-theme="dark"]) h3,
body:not([data-theme="dark"]) h4,
body:not([data-theme="dark"]) h5,
body:not([data-theme="dark"]) h6 {
  color: #0f172a;
}

/* Belirli Açık Sayfa Başlıkları */
body:not([data-theme="dark"]) .op-hero-title,
body:not([data-theme="dark"]) .op-hiw-title,
body:not([data-theme="dark"]) .op-aff-title,
body:not([data-theme="dark"]) .op-sponsor-title,
body:not([data-theme="dark"]) .op-lseo-title,
body:not([data-theme="dark"]) .op-title,
body:not([data-theme="dark"]) .section-title,
body:not([data-theme="dark"]) .card-title,
body:not([data-theme="dark"]) .op-tutor-name {
  color: #0f172a;
}

/* Açık Zemin Alt Metin ve Açıklamalar */
body:not([data-theme="dark"]) p,
body:not([data-theme="dark"]) .op-lead,
body:not([data-theme="dark"]) .op-lead-centered,
body:not([data-theme="dark"]) .op-hiw-lead,
body:not([data-theme="dark"]) .op-aff-lead,
body:not([data-theme="dark"]) .op-sponsor-lead,
body:not([data-theme="dark"]) .op-lseo-lead,
body:not([data-theme="dark"]) .op-step-desc,
body:not([data-theme="dark"]) .op-desc {
  color: #475569;
}

/* ══════════════════════════════════════════════════════════════════
   3. GECE MODU (DARK THEME - `html[data-theme="dark"]`)
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  --op-text-main: #f8fafc;
  --op-text-heading: #ffffff;
  --op-text-muted: #cbd5e1;
  --op-text-subtle: #94a3b8;
  --op-bg-page: #0b1324;
  --op-bg-surface: #131f37;
  --op-border-main: #1e293b;
}

html[data-theme="dark"] body {
  background-color: #0b1324 !important;
  color: #e2e8f0 !important;
}

/* Gece Modunda Tüm Sayfa ve Bölüm Zeminleri */
html[data-theme="dark"] .op-local-seo-page,
html[data-theme="dark"] .op-sponsor-page,
html[data-theme="dark"] .op-affiliate-page,
html[data-theme="dark"] .op-hiw-page,
html[data-theme="dark"] .op-lseo-hero,
html[data-theme="dark"] .op-lseo-tutors-section,
html[data-theme="dark"] .op-lseo-steps-section,
html[data-theme="dark"] .op-lseo-districts-section,
html[data-theme="dark"] .op-lseo-faq-section,
html[data-theme="dark"] .op-lseo-cta-section,
html[data-theme="dark"] .op-sponsor-hero,
html[data-theme="dark"] .op-sponsor-why-section,
html[data-theme="dark"] .op-sponsor-sectors-section,
html[data-theme="dark"] .op-sponsor-formats-section,
html[data-theme="dark"] .op-sponsor-form-section,
html[data-theme="dark"] .op-aff-hero,
html[data-theme="dark"] .op-aff-segments-section,
html[data-theme="dark"] .op-aff-steps-section,
html[data-theme="dark"] .op-aff-form-section,
html[data-theme="dark"] .op-aff-faq-section,
html[data-theme="dark"] .op-hiw-hero,
html[data-theme="dark"] .op-hiw-toggle-section,
html[data-theme="dark"] .op-hiw-comparison-section,
html[data-theme="dark"] .op-hiw-faq-section,
html[data-theme="dark"] .op-step-block,
html[data-theme="dark"] .op-step-alt {
  background: #0b1324 !important;
  border-color: #1e293b !important;
}

/* Gece Modunda Kartlar */
html[data-theme="dark"] .op-card,
html[data-theme="dark"] .op-lseo-tutor-card,
html[data-theme="dark"] .op-lstep-card,
html[data-theme="dark"] .op-lseo-districts-card,
html[data-theme="dark"] .op-tstep-card,
html[data-theme="dark"] .op-astep-card,
html[data-theme="dark"] .op-segment-card,
html[data-theme="dark"] .op-s-metric-card,
html[data-theme="dark"] .op-s-feat-card,
html[data-theme="dark"] .op-sector-card,
html[data-theme="dark"] .op-format-item,
html[data-theme="dark"] .op-tutor-card-preply,
html[data-theme="dark"] .op-search-capsule-wrapper,
html[data-theme="dark"] .op-trust-strip-card,
html[data-theme="dark"] .op-faq-acc-item,
html[data-theme="dark"] .op-aff-faq-item,
html[data-theme="dark"] .op-lseo-faq-item,
html[data-theme="dark"] .op-comp-table-wrapper,
html[data-theme="dark"] .op-aff-form-wrapper,
html[data-theme="dark"] .op-sponsor-form-card {
  background: #131f37 !important;
  border-color: #1e293b !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
}

/* Gece Modunda Başlıklar */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .op-hero-title,
html[data-theme="dark"] .op-hiw-title,
html[data-theme="dark"] .op-aff-title,
html[data-theme="dark"] .op-sponsor-title,
html[data-theme="dark"] .op-lseo-title,
html[data-theme="dark"] .op-title,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .op-tutor-name,
html[data-theme="dark"] .op-col-title {
  color: #ffffff !important;
}

/* Gece Modunda Alt Metinler */
html[data-theme="dark"] p,
html[data-theme="dark"] .op-lead,
html[data-theme="dark"] .op-lead-centered,
html[data-theme="dark"] .op-hiw-lead,
html[data-theme="dark"] .op-aff-lead,
html[data-theme="dark"] .op-sponsor-lead,
html[data-theme="dark"] .op-lseo-lead,
html[data-theme="dark"] .op-step-desc,
html[data-theme="dark"] .op-faq-acc-content p,
html[data-theme="dark"] .op-aff-faq-content p,
html[data-theme="dark"] .op-lseo-faq-content p {
  color: #cbd5e1 !important;
}

/* Gece Modunda Fiyat Kutuları, Rozetler ve Çipler */
html[data-theme="dark"] .op-tutor-price-box {
  background: #1e293b !important;
  border-color: #334155 !important;
}
html[data-theme="dark"] .op-tutor-price-box strong { color: #ffffff !important; }
html[data-theme="dark"] .op-tutor-price-box small { color: #94a3b8 !important; }
html[data-theme="dark"] .op-lseo-chip {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}
html[data-theme="dark"] .op-lseo-trust-item {
  background: #131f37 !important;
  border-color: #1e293b !important;
  color: #e2e8f0 !important;
}
html[data-theme="dark"] .op-lstep-num,
html[data-theme="dark"] .op-tstep-num,
html[data-theme="dark"] .op-astep-num {
  background: #1e293b !important;
  color: #94a3b8 !important;
}

/* Gece Modunda Butonlar */
html[data-theme="dark"] .btn-lseo-outline,
html[data-theme="dark"] .btn-sponsor-outline,
html[data-theme="dark"] .btn-aff-outline {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #ffffff !important;
}

/* Gece Modunda Form Inputları ve Arama Kapsülü */
html[data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .op-ff-input,
html[data-theme="dark"] .op-ff-select,
html[data-theme="dark"] .op-ff-textarea {
  background-color: #1e293b !important;
  color: #ffffff !important;
  border-color: #334155 !important;
}

html[data-theme="dark"] .op-capsule-field {
  background: #1e293b !important;
  border-color: #334155 !important;
}
html[data-theme="dark"] .op-capsule-label {
  color: #94a3b8 !important;
}
html[data-theme="dark"] .op-capsule-select {
  color: #ffffff !important;
}
html[data-theme="dark"] .op-quick-pill {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}
html[data-theme="dark"] .op-pill-loc {
  background: #1e3a5f !important;
  border-color: #0284c7 !important;
  color: #38bdf8 !important;
}

/* ══════════════════════════════════════════════════════════════════
   3.5 ANA SAYFA VİTRİN & GÜVEN KARTLARI KONTRAST ZIRHI (DARK MODE)
   ══════════════════════════════════════════════════════════════════ */
/* 4'lü Güven Şeridi */
html[data-theme="dark"] .op-trust-strip-section {
  background: #0b1324 !important;
  border-color: #1e293b !important;
}
html[data-theme="dark"] .op-trust-strip-card {
  background: #131f37 !important;
  border-color: #1e293b !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}
html[data-theme="dark"] .op-strip-text strong {
  color: #ffffff !important;
}
html[data-theme="dark"] .op-strip-text small {
  color: #94a3b8 !important;
}

/* Öne Çıkan Doğrulanmış Öğretmenler Vitrini */
html[data-theme="dark"] .op-featured-tutors-section {
  background: #0b1324 !important;
}
html[data-theme="dark"] .op-featured-tutors-section .op-heading .op-sub {
  color: #fb7185 !important;
}
html[data-theme="dark"] .op-featured-tutors-section .op-heading h2 {
  color: #ffffff !important;
}
html[data-theme="dark"] .op-featured-tutors-section .op-heading p {
  color: #cbd5e1 !important;
}
html[data-theme="dark"] .op-tutor-card-preply {
  background: #131f37 !important;
  border-color: #1e293b !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}
html[data-theme="dark"] .op-tutor-card-preply:hover {
  border-color: #334155 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6) !important;
}
html[data-theme="dark"] .op-tc-name {
  color: #ffffff !important;
}
html[data-theme="dark"] .op-tc-edu {
  color: #94a3b8 !important;
}
html[data-theme="dark"] .op-tc-tag {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border: 1px solid #334155 !important;
}
html[data-theme="dark"] .op-tc-stats-row {
  border-top-color: #1e293b !important;
  border-bottom-color: #1e293b !important;
}
html[data-theme="dark"] .op-tc-rating {
  color: #ffffff !important;
}
html[data-theme="dark"] .op-tc-rating strong {
  color: #ffffff !important;
}
html[data-theme="dark"] .op-tc-rating small {
  color: #94a3b8 !important;
}
html[data-theme="dark"] .op-tc-hours strong {
  color: #ffffff !important;
}
html[data-theme="dark"] .op-tc-hours small {
  color: #94a3b8 !important;
}
html[data-theme="dark"] .op-tc-location {
  color: #cbd5e1 !important;
}
html[data-theme="dark"] .op-tc-price {
  color: #ffffff !important;
}
html[data-theme="dark"] .op-tc-unit {
  color: #94a3b8 !important;
}
html[data-theme="dark"] .op-tc-match-btn {
  background: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}
html[data-theme="dark"] .op-tc-match-btn:hover {
  background: #1d4ed8 !important;
}

/* Popüler Dersler & Branşlar */
html[data-theme="dark"] .op-categories-section {
  background: #0b1324 !important;
}
html[data-theme="dark"] .op-cat-card {
  background: #131f37 !important;
  border-color: #1e293b !important;
}
html[data-theme="dark"] .op-cat-card:hover {
  border-color: #334155 !important;
  background: #192744 !important;
}
html[data-theme="dark"] .op-cat-icon {
  background: #1e293b !important;
  color: #60a5fa !important;
  border: 1px solid #334155 !important;
}
html[data-theme="dark"] .op-cat-info h3 {
  color: #ffffff !important;
}
html[data-theme="dark"] .op-cat-info p {
  color: #94a3b8 !important;
}
html[data-theme="dark"] .op-cat-arrow {
  color: #64748b !important;
}

/* Güvencelerimiz & Sütunlar */
html[data-theme="dark"] .op-pillars-section {
  background: #0b1324 !important;
}
html[data-theme="dark"] .op-pillar-card {
  background: #131f37 !important;
  border-color: #1e293b !important;
}
html[data-theme="dark"] .op-pillar-icon {
  background: #1e293b !important;
  color: #38bdf8 !important;
  border: 1px solid #334155 !important;
}
html[data-theme="dark"] .op-pillar-card h3 {
  color: #ffffff !important;
}
html[data-theme="dark"] .op-pillar-card p {
  color: #cbd5e1 !important;
}

/* Harita ve Semt Paneli */
html[data-theme="dark"] .op-map-section {
  background: #0b1324 !important;
}
html[data-theme="dark"] .op-map-district-card {
  background: #131f37 !important;
  border-color: #1e293b !important;
}
html[data-theme="dark"] .op-map-district-card h3 {
  color: #ffffff !important;
}
html[data-theme="dark"] #opDistDesc {
  color: #cbd5e1 !important;
}
html[data-theme="dark"] .op-dist-stat-item {
  background: #1e293b !important;
  border-color: #334155 !important;
}
html[data-theme="dark"] .op-dist-stat-item strong {
  color: #ffffff !important;
}
html[data-theme="dark"] .op-dist-stat-item small {
  color: #94a3b8 !important;
}
html[data-theme="dark"] .op-dist-lessons-tags span {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border: 1px solid #334155 !important;
}
html[data-theme="dark"] .op-dist-seo-link {
  color: #60a5fa !important;
}
html[data-theme="dark"] .op-map-trust-box {
  background: #131f37 !important;
  border-color: #1e293b !important;
}
html[data-theme="dark"] .op-map-trust-box strong {
  color: #ffffff !important;
}
html[data-theme="dark"] .op-map-trust-box small {
  color: #94a3b8 !important;
}
html[data-theme="dark"] .op-map-tab {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}
html[data-theme="dark"] .op-map-tab.active {
  background: #2563eb !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .op-mobile-district-wrap {
  background: #131f37 !important;
  border-color: #1e293b !important;
}
html[data-theme="dark"] .op-mobile-district-header span {
  color: #ffffff !important;
}

/* Sıkça Sorulan Sorular */
html[data-theme="dark"] .op-faq-section {
  background: #0b1324 !important;
}
html[data-theme="dark"] .op-faq-item {
  background: #131f37 !important;
  border-color: #1e293b !important;
}
html[data-theme="dark"] .op-faq-item summary strong {
  color: #ffffff !important;
}
html[data-theme="dark"] .op-faq-item summary i {
  color: #94a3b8 !important;
}
html[data-theme="dark"] .op-faq-item p {
  color: #cbd5e1 !important;
}


/* ══════════════════════════════════════════════════════════════════
   4. KALICI KOYU / RENKLİ BANNERLAR (HEM GÜNDÜZ HEM GECE %100 BEYAZ)
   ══════════════════════════════════════════════════════════════════ */
/* Bu sınıflar altındaki tüm başlık ve metinler HER ZAMAN BEYAZDIR */
.op-lseo-cta-card,
.op-final-cta,
.op-hiw-cta-card,
.op-aff-calc-section,
.op-calc-result-card,
.op-cta-box,
.oc-footer-preply {
  color: #ffffff !important;
}

/* Koyu Banner Başlıkları — Her iki modda da SAF BEYAZ */
body .op-lseo-cta-card h1, body .op-lseo-cta-card h2, body .op-lseo-cta-card h3,
body .op-final-cta h1, body .op-final-cta h2, body .op-final-cta h3,
body .op-hiw-cta-card h1, body .op-hiw-cta-card h2, body .op-hiw-cta-card h3,
body .op-aff-calc-section h1, body .op-aff-calc-section h2, body .op-aff-calc-section h3,
body .op-calc-result-card h1, body .op-calc-result-card h2, body .op-calc-result-card h3,
body .op-cta-box h1, body .op-cta-box h2, body .op-cta-box h3,
body .oc-footer-preply h1, body .oc-footer-preply h2, body .oc-footer-preply h3,
body .oc-footer-preply .oc-col-title {
  color: #ffffff !important;
}

/* Koyu Banner Açıklama Metinleri — Her iki modda da Açık Gri */
body .op-lseo-cta-card p,
body .op-final-cta p,
body .op-hiw-cta-card p,
body .op-aff-calc-section p,
body .op-calc-result-card p,
body .op-cta-box p,
body .oc-footer-preply p {
  color: #cbd5e1 !important;
}

/* ══════════════════════════════════════════════════════════════════
   5. KARŞILAŞTIRMA KARTLARI & LİSTELERİ KONTRAST ZIRHI
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .c-list li,
html[data-theme="dark"] .op-compare-list li {
  color: #e2e8f0 !important;
}

html[data-theme="dark"] .c-list strong,
html[data-theme="dark"] .c-list li strong,
html[data-theme="dark"] .c-list li div strong,
html[data-theme="dark"] .op-compare-list strong,
html[data-theme="dark"] .op-compare-list li strong,
html[data-theme="dark"] .op-compare-list li div strong {
  color: #ffffff !important;
  font-weight: 850 !important;
}

html[data-theme="dark"] .oa-c-card.old,
html[data-theme="dark"] .op-compare-card.old-way {
  background: #1c1417 !important;
  border-color: #7f1d1d !important;
}

html[data-theme="dark"] .oa-c-card.new,
html[data-theme="dark"] .op-compare-card.new-way {
  background: #0d281e !important;
  border-color: #059669 !important;
}

html[data-theme="dark"] .oa-c-card .c-head h3,
html[data-theme="dark"] .op-compare-head h3 {
  color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════════
   6. DAVET ET & KAZAN (REFERRAL) KONTRAST ZIRHI
   ══════════════════════════════════════════════════════════════════ */
/* Açık Mod Zırhı */
.op-ref-head h2 { color: #0f172a !important; }
.op-ref-head p { color: #475569 !important; }

/* Gece Modu Zırhı */
html[data-theme="dark"] .op-referral-section {
  background: #0b1324 !important;
}
html[data-theme="dark"] .op-ref-head h2 {
  color: #ffffff !important;
}
html[data-theme="dark"] .op-ref-head p {
  color: #cbd5e1 !important;
}
html[data-theme="dark"] .op-ref-card {
  background: #131f37 !important;
  border-color: #1e293b !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
}
html[data-theme="dark"] .op-ref-card-parent {
  border-top: 4px solid #3b82f6 !important;
}
html[data-theme="dark"] .op-ref-card-teacher {
  border-top: 4px solid #f59e0b !important;
}
html[data-theme="dark"] .op-ref-card-top strong {
  color: #ffffff !important;
}
html[data-theme="dark"] .op-ref-card-parent .op-ref-amount {
  color: #60a5fa !important;
}
html[data-theme="dark"] .op-ref-card-teacher .op-ref-amount {
  color: #fbbf24 !important;
}
html[data-theme="dark"] .op-ref-label {
  color: #94a3b8 !important;
}
html[data-theme="dark"] .op-ref-steps li {
  color: #e2e8f0 !important;
}
html[data-theme="dark"] .op-ref-steps li strong {
  color: #ffffff !important;
  font-weight: 800 !important;
}
html[data-theme="dark"] .op-ref-steps li span {
  background: #1e293b !important;
  color: #93c5fd !important;
}
html[data-theme="dark"] .op-ref-card-teacher .op-ref-steps li span {
  background: #1e293b !important;
  color: #fde68a !important;
}
html[data-theme="dark"] .op-ref-friend-gets {
  background: #064e3b !important;
  color: #a7f3d0 !important;
  border: 1px solid #059669 !important;
}
html[data-theme="dark"] .op-ref-friend-gets strong {
  color: #ffffff !important;
}
html[data-theme="dark"] .op-ref-card-teacher .op-ref-friend-gets {
  background: #451a03 !important;
  color: #fed7aa !important;
  border: 1px solid #d97706 !important;
}
html[data-theme="dark"] .op-ref-card-teacher .op-ref-friend-gets strong {
  color: #ffffff !important;
}
html[data-theme="dark"] .op-ref-mid {
  background: #0b1324 !important;
  border-color: #1e293b !important;
  color: #94a3b8 !important;
}
html[data-theme="dark"] .op-ref-mid-ring {
  background: #1e293b !important;
  border-color: #334155 !important;
}
html[data-theme="dark"] .op-ref-note {
  color: #94a3b8 !important;
}

/* ══════════════════════════════════════════════════════════════════
   7. ÖDEV MOTORU (HOMEWORK ENGINE) KONTRAST VE STİL ZIRHI
   ══════════════════════════════════════════════════════════════════ */
.op-hw-filter-btn {
  padding: 8px 16px;
  border-radius: 10px;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  color: #334155;
  font-size: 0.84rem;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.2s ease;
}
.op-hw-filter-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.op-hw-filter-btn.active {
  background: #2563eb;
  color: #ffffff;
  border-color: #1d4ed8;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

html[data-theme="dark"] .op-hw-filter-btn {
  background: #1e293b;
  border-color: #334155;
  color: #cbd5e1;
}
html[data-theme="dark"] .op-hw-filter-btn.active {
  background: #2563eb;
  color: #ffffff;
  border-color: #3b82f6;
}
html[data-theme="dark"] .op-hw-card,
html[data-theme="dark"] .op-parent-hw-card {
  background: #131f37 !important;
  border-color: #1e293b !important;
}
html[data-theme="dark"] #op-new-hw-modal > div {
  background: #131f37 !important;
  border: 1px solid #1e293b !important;
  color: #ffffff !important;
}
html[data-theme="dark"] #op-new-hw-modal h3 {
  color: #ffffff !important;
}
html[data-theme="dark"] #op-new-hw-modal label {
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .op-file-card {
  background: #131f37 !important;
  border-color: #1e293b !important;
}
html[data-theme="dark"] #op-new-file-modal > div {
  background: #131f37 !important;
  border: 1px solid #1e293b !important;
  color: #ffffff !important;
}
html[data-theme="dark"] #op-new-file-modal h3 {
  color: #ffffff !important;
}
html[data-theme="dark"] #op-new-file-modal label {
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .op-report-card {
  background: #131f37 !important;
  border-color: #1e293b !important;
}
html[data-theme="dark"] .op-report-card h3 {
  color: #ffffff !important;
}
html[data-theme="dark"] .op-report-card div[style*="background:#f8fafc"] {
  background: #0d1527 !important;
}
html[data-theme="dark"] #op-new-report-modal > div {
  background: #131f37 !important;
  border: 1px solid #1e293b !important;
  color: #ffffff !important;
}
html[data-theme="dark"] #op-new-report-modal h3 {
  color: #ffffff !important;
}
html[data-theme="dark"] #op-new-report-modal label {
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .op-topic-row {
  background: #131f37 !important;
  border-color: #1e293b !important;
}
html[data-theme="dark"] .op-topic-row h4 {
  color: #ffffff !important;
}