/* ═══════════════════════════════════════════════════════════════════════════
   HARAMAIN COMPANION — adhkar-v1.css  v1.0
   Adhkār-Modul · Tagesgebete (Morgen/Abend/Schlafen/Nachtgebet)
   
   Prefix: hca-* (Hisnul = ohne Prefix, Hajj = hcj-*, Umra = hcu-*)
   Farben: gold #d4a843, teal #2dd4bf, bg #0a1814
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── MODAL CONTAINER ────────────────────────────────────────────────────── */
#hca-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: #0a1814;
  z-index: 9050;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
#hca-modal.hca-open { display: block; }

/* ─── HEADER ─────────────────────────────────────────────────────────────── */
.hca-hdr {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(10, 24, 20, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.hca-hdr-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 9px;
  font-size: 18px;
  cursor: pointer;
  color: #fff;
  transition: background 0.15s;
}
.hca-hdr-btn:active { background: rgba(255,255,255,0.12); }
.hca-hdr-mid { flex: 1; min-width: 0; }
.hca-hdr-eyebrow {
  color: #d4a843;
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: 700;
  text-transform: uppercase;
}
.hca-hdr-title {
  font-size: 17px;
  font-weight: 600;
  margin-top: 2px;
  color: #fff;
}

/* ─── KATEGORIE-PILLEN ───────────────────────────────────────────────────── */
.hca-cat-pills {
  display: flex;
  gap: 6px;
  padding: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hca-cat-pills::-webkit-scrollbar { display: none; }

.hca-cat-pill {
  flex: 1;
  min-width: 78px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 6px 6px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
  user-select: none;
}
.hca-cat-pill.hca-active {
  background: rgba(45,212,191,0.12);
  border-color: rgba(45,212,191,0.4);
}
.hca-cat-pill.hca-done {
  background: rgba(16,185,129,0.12);
  border-color: rgba(16,185,129,0.3);
}
.hca-cat-pill-anim {
  width: 26px; height: 26px;
  margin: 0 auto 4px;
  display: flex; align-items: center; justify-content: center;
}
.hca-cat-pill-anim svg { width: 100%; height: 100%; }
.hca-cat-pill-name {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 2px;
  color: #fff;
}
.hca-cat-pill-status {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
}
.hca-cat-pill-check {
  position: absolute;
  top: 6px; right: 6px;
  width: 18px; height: 18px;
  background: #10b981;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  color: #0a1814;
  font-weight: 700;
}

/* ─── LIVE-ANIMATIONEN für 4 Tageszeiten ─────────────────────────────────── */
@keyframes hca-pulseMorgen {
  0%,100% { transform: translateY(2px); opacity: 0.85; }
  50% { transform: translateY(-2px); opacity: 1; }
}
@keyframes hca-pulseAbend {
  0%,100% { transform: translateY(-2px); opacity: 1; }
  50% { transform: translateY(2px); opacity: 0.85; }
}
@keyframes hca-pulseMond {
  0%,100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
@keyframes hca-pulseDua {
  0%,100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.08); opacity: 1; }
}
.hca-anim-morgen   { animation: hca-pulseMorgen 3s ease-in-out infinite; }
.hca-anim-abend    { animation: hca-pulseAbend 4s ease-in-out infinite; }
.hca-anim-schlaf   { animation: hca-pulseMond 5s ease-in-out infinite; }
.hca-anim-gebet    { animation: hca-pulseDua 3s ease-in-out infinite; }

/* ─── STREAK-BANNER ──────────────────────────────────────────────────────── */
.hca-streak {
  margin: 0 12px 10px;
  padding: 9px 13px;
  background: linear-gradient(90deg, rgba(251,146,60,0.15), rgba(251,146,60,0.05));
  border: 1px solid rgba(251,146,60,0.3);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #fff;
}
.hca-streak-icon { font-size: 16px; }
.hca-streak.hca-hidden { display: none; }

/* ─── PROGRESS-STRIP ─────────────────────────────────────────────────────── */
.hca-progress {
  margin: 0 12px 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
}
.hca-progress-row {
  display: flex; justify-content: space-between;
  font-size: 11px; color: rgba(255,255,255,0.6);
  margin-bottom: 6px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.hca-progress-num { color: #d4a843; }
.hca-progress-track {
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.hca-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #d4a843, #2dd4bf);
  border-radius: 3px;
  transition: width 0.3s;
}

/* ─── QUICK-BAR (Schrift, Sprache, Modus-Switch) ─────────────────────────── */
.hca-qbar {
  margin: 0 12px 12px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}
.hca-qbar-group { display: flex; gap: 4px; }
.hca-qbtn {
  min-width: 30px; height: 30px;
  padding: 0 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
  font-family: inherit;
}
.hca-qbtn.hca-active {
  background: rgba(45,212,191,0.15);
  border-color: rgba(45,212,191,0.4);
  color: #2dd4bf;
}
.hca-qbtn.hca-S { font-size: 10px; }
.hca-qbtn.hca-L { font-size: 14px; }

/* ─── SWIPE-HINT ─────────────────────────────────────────────────────────── */
.hca-swipe-hint {
  text-align: center;
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 2px;
  margin-bottom: 8px;
}

/* ─── DHIKR-CARD (Swipe-Modus) ───────────────────────────────────────────── */
.hca-dhikr-card {
  margin: 0 12px;
  background: linear-gradient(180deg, rgba(45,212,191,0.06), rgba(45,212,191,0.02));
  border: 1px solid rgba(45,212,191,0.2);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
  user-select: none;
}
.hca-dhikr-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 6px;
}
.hca-dhikr-num {
  background: rgba(212,168,67,0.15);
  color: #d4a843;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.hca-dhikr-cat {
  background: rgba(45,212,191,0.15);
  color: #2dd4bf;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}
.hca-dhikr-cat::before { content: '●'; color: #2dd4bf; font-size: 8px; }
.hca-dhikr-times {
  background: rgba(212,168,67,0.1);
  color: #d4a843;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
}
.hca-dhikr-arabic {
  font-family: 'Amiri', 'Arabic Typesetting', 'Traditional Arabic', serif;
  font-size: 24px;
  line-height: 1.9;
  text-align: center;
  direction: rtl;
  color: #fff;
  margin: 16px 0;
  padding: 0 4px;
}
.hca-dhikr-translit {
  font-style: italic;
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  text-align: center;
  margin-bottom: 10px;
  padding: 0 4px;
  line-height: 1.5;
}
.hca-dhikr-translation {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
  text-align: center;
  margin-bottom: 12px;
  padding: 0 4px;
}
.hca-dhikr-source {
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* Anzeige-Modus-Toggles (Sichtbarkeit) — gilt für Swipe UND Liste */
#hca-modal[data-display="ar"]      .hca-dhikr-translit,
#hca-modal[data-display="ar"]      .hca-dhikr-translation,
#hca-modal[data-display="ar"]      .hca-list-translit,
#hca-modal[data-display="ar"]      .hca-list-trans { display: none; }
#hca-modal[data-display="ar-tl"]   .hca-dhikr-translation,
#hca-modal[data-display="ar-tl"]   .hca-list-trans { display: none; }
#hca-modal[data-display="ar-tr"]   .hca-dhikr-translit,
#hca-modal[data-display="ar-tr"]   .hca-list-translit { display: none; }
/* default = "all" → alles sichtbar */

/* Quelle-Sichtbarkeit */
#hca-modal[data-source="off"] .hca-dhikr-source,
#hca-modal[data-source="off"] .hca-list-source { display: none; }

/* ─── COUNTER-CARD ───────────────────────────────────────────────────────── */
.hca-counter {
  margin: 0 12px 14px;
  background: linear-gradient(180deg, rgba(212,168,67,0.1), rgba(212,168,67,0.04));
  border: 2px solid rgba(212,168,67,0.4);
  border-radius: 14px;
  padding: 16px 14px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.1s, background 0.2s;
  user-select: none;
  -webkit-user-select: none;
}
.hca-counter:active {
  transform: scale(0.98);
  background: linear-gradient(180deg, rgba(212,168,67,0.18), rgba(212,168,67,0.08));
}
.hca-counter.hca-counter-done {
  background: linear-gradient(180deg, rgba(16,185,129,0.15), rgba(16,185,129,0.05));
  border-color: rgba(16,185,129,0.5);
}
.hca-counter-label {
  font-size: 9px;
  letter-spacing: 2px;
  color: #d4a843;
  font-weight: 700;
  margin-bottom: 8px;
}
.hca-counter-done .hca-counter-label { color: #10b981; }
.hca-counter-value {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.hca-counter-current { color: #d4a843; }
.hca-counter-done .hca-counter-current { color: #10b981; }
.hca-counter-sep { color: rgba(255,255,255,0.3); margin: 0 6px; }
.hca-counter-prog {
  height: 5px;
  background: rgba(0,0,0,0.3);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}
.hca-counter-prog-fill {
  height: 100%;
  background: #d4a843;
  border-radius: 3px;
  transition: width 0.2s;
}
.hca-counter-done .hca-counter-prog-fill { background: #10b981; }
.hca-counter-hint {
  font-size: 10px;
  color: rgba(255,255,255,0.6);
}

/* ─── BOTTOM-CTA (Swipe-Modus Navigation) ────────────────────────────────── */
.hca-bcta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.hca-bcta-arrow {
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  cursor: pointer;
  color: #fff;
}
.hca-bcta-arrow:disabled,
.hca-bcta-arrow[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}
.hca-bcta-mid {
  flex: 1;
  text-align: center;
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 2px;
  font-weight: 600;
}

/* ─── LISTE-MODUS ────────────────────────────────────────────────────────── */
.hca-list { padding-bottom: 20px; }

.hca-list-item {
  margin: 0 12px 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 12px;
}
.hca-list-item.hca-done {
  opacity: 0.55;
}
.hca-list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 6px;
}
.hca-list-num {
  background: rgba(212,168,67,0.15);
  color: #d4a843;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
}
.hca-list-times {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
}
.hca-list-done-mark {
  font-size: 11px;
  color: #10b981;
  font-weight: 600;
}
.hca-list-arabic {
  font-family: 'Amiri', serif;
  font-size: 18px;
  text-align: right;
  direction: rtl;
  margin: 6px 0;
  line-height: 1.7;
  color: #fff;
}
.hca-list-translit {
  font-size: 11px;
  font-style: italic;
  color: rgba(255,255,255,0.6);
  margin-bottom: 6px;
}
.hca-list-trans {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 8px;
  line-height: 1.5;
}
.hca-list-source {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 8px;
}
.hca-list-tap {
  background: rgba(212,168,67,0.1);
  border: 1px solid rgba(212,168,67,0.3);
  color: #d4a843;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-family: inherit;
}
.hca-list-tap:active {
  background: rgba(212,168,67,0.2);
}
.hca-list-tap-count {
  background: rgba(212,168,67,0.2);
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 10px;
}
.hca-list-item.hca-done .hca-list-tap {
  background: rgba(16,185,129,0.1);
  border-color: rgba(16,185,129,0.3);
  color: #10b981;
}

/* ─── EMPTY / LOADING / ERROR STATES ─────────────────────────────────────── */
.hca-state {
  text-align: center;
  padding: 60px 20px;
  color: rgba(255,255,255,0.6);
}
.hca-state-icon {
  font-size: 48px;
  margin-bottom: 14px;
  opacity: 0.7;
}
.hca-state-msg {
  font-size: 14px;
  margin-bottom: 6px;
}
.hca-state-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}

/* ─── SETTINGS (Sub-Modal) ───────────────────────────────────────────────── */
.hca-settings-section {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.hca-settings-title {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
  font-weight: 600;
}
.hca-settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 13px;
  color: #fff;
}
.hca-settings-row-label {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hca-toggle {
  width: 38px; height: 22px;
  background: rgba(255,255,255,0.15);
  border-radius: 11px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}
.hca-toggle.hca-on { background: #2dd4bf; }
.hca-toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: left 0.2s;
}
.hca-toggle.hca-on .hca-toggle-thumb { left: 18px; }

.hca-seg {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.hca-seg-opt {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 11px;
  cursor: pointer;
  color: #fff;
  font-family: inherit;
}
.hca-seg-opt.hca-active {
  background: rgba(45,212,191,0.15);
  border-color: rgba(45,212,191,0.4);
  color: #2dd4bf;
}

.hca-time-input {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: #d4a843;
  font-weight: 600;
  font-size: 13px;
  padding: 4px 8px;
  font-family: inherit;
}

.hca-stat-value-streak { color: #fb923c; font-weight: 700; font-size: 13px; }
.hca-stat-value-best   { color: #d4a843; font-weight: 700; font-size: 13px; }
.hca-stat-value-week   { color: #2dd4bf; font-weight: 700; font-size: 13px; }

.hca-lang-select {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 7px;
  color: #fff;
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}

/* ─── TOAST (kurze Hinweise) ─────────────────────────────────────────────── */
.hca-toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: rgba(212,168,67,0.95);
  color: #0a1814;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  z-index: 10000;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  pointer-events: none;
  animation: hca-toast-in 0.25s ease, hca-toast-out 0.25s ease 1.75s forwards;
}
@keyframes hca-toast-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes hca-toast-out {
  to { opacity: 0; transform: translate(-50%, 12px); }
}

/* ─── HELLER MODUS — komplette Überarbeitung (lesbar auf cremigem Grund) ──── */
#hca-modal[data-light="on"] {
  background: #f5f0e4;
  color: #1f2d28;
}
#hca-modal[data-light="on"] .hca-hdr {
  background: rgba(245,240,228,0.95);
  border-color: rgba(0,0,0,0.08);
}
#hca-modal[data-light="on"] .hca-hdr-eyebrow { color: #b8862e; }
#hca-modal[data-light="on"] .hca-hdr-title { color: #0a1814; }
#hca-modal[data-light="on"] .hca-hdr-btn {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.1);
  color: #1f2d28;
}

/* Kategorie-Pillen */
#hca-modal[data-light="on"] .hca-cat-pill {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.1);
}
#hca-modal[data-light="on"] .hca-cat-pill.hca-active {
  background: rgba(45,148,106,0.15);
  border-color: rgba(45,148,106,0.5);
}
#hca-modal[data-light="on"] .hca-cat-pill.hca-done {
  background: rgba(16,185,129,0.15);
  border-color: rgba(16,185,129,0.4);
}
#hca-modal[data-light="on"] .hca-cat-pill-name { color: #1f2d28; }
#hca-modal[data-light="on"] .hca-cat-pill-status { color: rgba(0,0,0,0.6); }

/* Streak-Banner */
#hca-modal[data-light="on"] .hca-streak {
  background: linear-gradient(90deg, rgba(251,146,60,0.18), rgba(251,146,60,0.06));
  border-color: rgba(251,146,60,0.5);
  color: #1f2d28;
}

/* Progress-Strip */
#hca-modal[data-light="on"] .hca-progress {
  background: rgba(0,0,0,0.04);
}
#hca-modal[data-light="on"] .hca-progress-row { color: rgba(0,0,0,0.6); }
#hca-modal[data-light="on"] .hca-progress-num { color: #b8862e; }
#hca-modal[data-light="on"] .hca-progress-track { background: rgba(0,0,0,0.08); }

/* Quick-Bar */
#hca-modal[data-light="on"] .hca-qbar {
  background: rgba(0,0,0,0.03);
}
#hca-modal[data-light="on"] .hca-qbtn {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.1);
  color: #1f2d28;
}
#hca-modal[data-light="on"] .hca-qbtn.hca-active {
  background: rgba(45,148,106,0.15);
  border-color: rgba(45,148,106,0.5);
  color: #2d946a;
}

/* Swipe-Hint */
#hca-modal[data-light="on"] .hca-swipe-hint { color: rgba(0,0,0,0.4); }

/* Dhikr-Card (Swipe) */
#hca-modal[data-light="on"] .hca-dhikr-card {
  background: linear-gradient(180deg, rgba(45,148,106,0.06), rgba(45,148,106,0.02));
  border-color: rgba(45,148,106,0.3);
}
#hca-modal[data-light="on"] .hca-dhikr-arabic { color: #0a1814; }
#hca-modal[data-light="on"] .hca-dhikr-translit { color: rgba(0,0,0,0.65); }
#hca-modal[data-light="on"] .hca-dhikr-translation { color: rgba(0,0,0,0.85); }
#hca-modal[data-light="on"] .hca-dhikr-source { color: rgba(0,0,0,0.5); }
#hca-modal[data-light="on"] .hca-dhikr-num {
  background: rgba(184,134,46,0.18);
  color: #8b6321;
}
#hca-modal[data-light="on"] .hca-dhikr-cat {
  background: rgba(45,148,106,0.18);
  color: #2d946a;
}
#hca-modal[data-light="on"] .hca-dhikr-cat::before { color: #2d946a; }
#hca-modal[data-light="on"] .hca-dhikr-times {
  background: rgba(184,134,46,0.12);
  color: #8b6321;
}

/* Counter-Card */
#hca-modal[data-light="on"] .hca-counter {
  background: linear-gradient(180deg, rgba(212,168,67,0.15), rgba(212,168,67,0.05));
  border-color: rgba(184,134,46,0.6);
}
#hca-modal[data-light="on"] .hca-counter.hca-counter-done {
  background: linear-gradient(180deg, rgba(16,185,129,0.15), rgba(16,185,129,0.05));
  border-color: rgba(16,185,129,0.6);
}
#hca-modal[data-light="on"] .hca-counter-label { color: #8b6321; }
#hca-modal[data-light="on"] .hca-counter-done .hca-counter-label { color: #047857; }
#hca-modal[data-light="on"] .hca-counter-value { color: #0a1814; }
#hca-modal[data-light="on"] .hca-counter-current { color: #b8862e; }
#hca-modal[data-light="on"] .hca-counter-done .hca-counter-current { color: #047857; }
#hca-modal[data-light="on"] .hca-counter-sep { color: rgba(0,0,0,0.3); }
#hca-modal[data-light="on"] .hca-counter-prog { background: rgba(0,0,0,0.1); }
#hca-modal[data-light="on"] .hca-counter-prog-fill { background: #b8862e; }
#hca-modal[data-light="on"] .hca-counter-done .hca-counter-prog-fill { background: #047857; }
#hca-modal[data-light="on"] .hca-counter-hint { color: rgba(0,0,0,0.6); }

/* Bottom-CTA */
#hca-modal[data-light="on"] .hca-bcta {
  border-color: rgba(0,0,0,0.08);
}
#hca-modal[data-light="on"] .hca-bcta-arrow {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.1);
  color: #1f2d28;
}
#hca-modal[data-light="on"] .hca-bcta-mid { color: rgba(0,0,0,0.5); }

/* Liste-Modus */
#hca-modal[data-light="on"] .hca-list-item {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.1);
}
#hca-modal[data-light="on"] .hca-list-num {
  background: rgba(184,134,46,0.18);
  color: #8b6321;
}
#hca-modal[data-light="on"] .hca-list-times { color: rgba(0,0,0,0.55); }
#hca-modal[data-light="on"] .hca-list-done-mark { color: #047857; }
#hca-modal[data-light="on"] .hca-list-arabic { color: #0a1814; }
#hca-modal[data-light="on"] .hca-list-translit { color: rgba(0,0,0,0.65); }
#hca-modal[data-light="on"] .hca-list-trans { color: rgba(0,0,0,0.8); }
#hca-modal[data-light="on"] .hca-list-source { color: rgba(0,0,0,0.5); }
#hca-modal[data-light="on"] .hca-list-tap {
  background: rgba(184,134,46,0.12);
  border-color: rgba(184,134,46,0.4);
  color: #8b6321;
}
#hca-modal[data-light="on"] .hca-list-tap-count {
  background: rgba(184,134,46,0.22);
  color: #8b6321;
}
#hca-modal[data-light="on"] .hca-list-item.hca-done .hca-list-tap {
  background: rgba(16,185,129,0.12);
  border-color: rgba(16,185,129,0.4);
  color: #047857;
}

/* Settings */
#hca-modal[data-light="on"] .hca-settings-section {
  border-color: rgba(0,0,0,0.08);
}
#hca-modal[data-light="on"] .hca-settings-title { color: rgba(0,0,0,0.55); }
#hca-modal[data-light="on"] .hca-settings-row { color: #1f2d28; }
#hca-modal[data-light="on"] .hca-toggle {
  background: rgba(0,0,0,0.15);
}
#hca-modal[data-light="on"] .hca-toggle.hca-on {
  background: #2d946a;
}
#hca-modal[data-light="on"] .hca-seg-opt {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.1);
  color: #1f2d28;
}
#hca-modal[data-light="on"] .hca-seg-opt.hca-active {
  background: rgba(45,148,106,0.15);
  border-color: rgba(45,148,106,0.5);
  color: #2d946a;
}
#hca-modal[data-light="on"] .hca-time-input {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.15);
  color: #8b6321;
}
#hca-modal[data-light="on"] .hca-lang-select {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.15);
  color: #1f2d28;
}
#hca-modal[data-light="on"] .hca-stat-value-streak { color: #c2410c; }
#hca-modal[data-light="on"] .hca-stat-value-best   { color: #b8862e; }
#hca-modal[data-light="on"] .hca-stat-value-week   { color: #2d946a; }

/* Empty/Loading/Error States */
#hca-modal[data-light="on"] .hca-state { color: rgba(0,0,0,0.6); }
#hca-modal[data-light="on"] .hca-state-sub { color: rgba(0,0,0,0.45); }

/* ─── SCHRIFTGRÖSSE-VARIANTEN ────────────────────────────────────────────── */
#hca-modal[data-fontsize="S"] .hca-dhikr-arabic { font-size: 20px; }
#hca-modal[data-fontsize="S"] .hca-dhikr-translit,
#hca-modal[data-fontsize="S"] .hca-dhikr-translation { font-size: 11px; }
#hca-modal[data-fontsize="S"] .hca-list-arabic { font-size: 16px; }
#hca-modal[data-fontsize="L"] .hca-dhikr-arabic { font-size: 30px; }
#hca-modal[data-fontsize="L"] .hca-dhikr-translit,
#hca-modal[data-fontsize="L"] .hca-dhikr-translation { font-size: 14px; }
#hca-modal[data-fontsize="L"] .hca-list-arabic { font-size: 22px; }

/* ─── RESPONSIVE / SAFETY ────────────────────────────────────────────────── */
@media (max-width: 360px) {
  .hca-cat-pill { min-width: 70px; padding: 8px 4px; }
  .hca-cat-pill-anim { width: 30px; height: 30px; }
  .hca-cat-pill-name { font-size: 10px; }
}