.iksalaat{
  --bg:#0e2d1f; --card:#153e2c; --text:#f4f9f5; --muted:#a5c9b7; --accent:#27ae60;
  color:var(--text); background:var(--bg); padding:16px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial;
}
.iksalaat .iks-card,.iks-panel,.iks-table .iks-row,table.salaat{
  background:var(--card);
}
.theme-islamic{ --bg:#0e2d1f; --card:#153e2c; --text:#f4f9f5; --muted:#a5c9b7; --accent:#27ae60 }
.theme-night{   --bg:#0b1221; --card:#111a2e; --text:#e8eefc; --muted:#9db3e6; --accent:#2d89ef }
.theme-dark{    --bg:#0f0f10; --card:#1a1a1c; --text:#f2f2f3; --muted:#bdbdbf; --accent:#9a9a9a }
.theme-sunrise{ --bg:#2a1a12; --card:#3b2518; --text:#fff7ec; --muted:#f6c27a; --accent:#f39c12 }
.theme-emerald{ --bg:#06251f; --card:#0b3a32; --text:#e9fffb; --muted:#8bd1c5; --accent:#16a085 }

/* duo essentials */
.iks--duo .iks-grid{ display:grid; gap:12px; grid-template-columns:1fr; }
@media(min-width:720px){ .iks--duo .iks-grid{ grid-template-columns:2fr 1fr; } }
.iks-label{ color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em }
.iks-progress{ position:relative; height:10px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.15); margin:10px 0 }
.iks-progress-bar{ position:absolute; inset:0 100% 0 0; background:var(--accent); transition:width .4s ease }

/* table */
table.salaat{ width:100%; border-collapse:collapse; color:var(--text); }
table.salaat th, table.salaat td{ padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.1); }

/* timeline */
.iks--timeline .timeline-wrap{ margin-top:12px }
.iks--timeline .timeline{ position:relative; height:14px; background:rgba(255,255,255,.15); border-radius:999px; }
.iks--timeline .tick{ position:absolute; top:-8px; font-size:12px; color:var(--muted); transform:translateX(-50%); }
.iks--timeline .now-marker{ position:absolute; top:-4px; width:2px; height:22px; background:var(--accent); left:0; }
.iks--timeline .legend{ margin-top:8px; font-size:14px; color:var(--text); }

/* optioneel: verdeelpunt-posities als percentage placeholders; JS kan later dynamisch zetten */
.iks--timeline .tick--fajr{ left:5% }
.iks--timeline .tick--sun{ left:12% }
.iks--timeline .tick--zuhr{ left:50% }
.iks--timeline .tick--asr{ left:65% }
.iks--timeline .tick--maghrib{ left:80% }
.iks--timeline .tick--isha{ left:88% }

/* cards */
.iks--cards .cards-grid{
  display:grid; gap:12px; margin-top:12px;
  grid-template-columns:1fr 1fr;
}
@media(min-width:900px){ .iks--cards .cards-grid{ grid-template-columns:repeat(3,1fr); } }
.iks--cards .card{
  background:rgba(0,0,0,.12); border:1px solid rgba(255,255,255,.06);
  border-radius:12px; padding:14px;
}
.iks--cards .card h4{ margin:0 0 6px; font-size:14px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em }
.iks--cards .card time{ font-size:22px; font-weight:700; color:var(--text) }

/* Tijdlijn aanvullende styling */
.iks--timeline .timeline-wrap{ margin-top:12px }
.iks--timeline .timeline{
  position:relative; height:14px; background:rgba(255,255,255,.15);
  border-radius:999px; overflow:visible;
}
.iks--timeline .tick{
  position:absolute; top:-22px; padding:2px 6px; font-size:12px;
  color:var(--muted); background:transparent; transform:translateX(-50%);
  white-space:nowrap;
}
.iks--timeline .now-marker{
  position:absolute; top:-6px; width:2px; height:26px; background:var(--accent);
  box-shadow:0 0 0 2px rgba(0,0,0,.15);
}
/* ===== Nieuwe lichte / moderne thema's ===== */

/* 1. Mint Light */
.theme-mint-light{ --bg:#f6fffb; --card:#ffffff; --text:#0d2b1f; --muted:#5c7f73; --accent:#2ecc71 }

/* 2. Sand */
.theme-sand{ --bg:#faf6ef; --card:#ffffff; --text:#2b271f; --muted:#8c8373; --accent:#d4a373 }

/* 3. Sky */
.theme-sky{ --bg:#f4f9ff; --card:#ffffff; --text:#14233a; --muted:#6b89ad; --accent:#3498db }

/* 4. Willow */
.theme-willow{ --bg:#f7fbf8; --card:#ffffff; --text:#1f2a22; --muted:#6f8a78; --accent:#27ae60 }

/* 5. Ivory */
.theme-ivory{ --bg:#fffefa; --card:#ffffff; --text:#2c2a20; --muted:#9a947f; --accent:#f1c40f }

/* 6. Slate Light */
.theme-slate-light{ --bg:#f8fafc; --card:#ffffff; --text:#0f172a; --muted:#64748b; --accent:#475569 }

/* 7. Coral Breeze */
.theme-coral-breeze{ --bg:#fff7f5; --card:#ffffff; --text:#2a1a18; --muted:#a57a74; --accent:#ff7f50 }

/* 8. Lavender Day */
.theme-lavender-day{ --bg:#fbf8ff; --card:#ffffff; --text:#221a2b; --muted:#8a7aa6; --accent:#9b59b6 }

/* 9. Teal Pastel */
.theme-teal-pastel{ --bg:#f3fbfb; --card:#ffffff; --text:#102a2a; --muted:#6b8c8c; --accent:#18a999 }

/* 10. Mono Light */
.theme-mono-light{ --bg:#ffffff; --card:#ffffff; --text:#1f2937; --muted:#6b7280; --accent:#111827 }

/* Minimal Bar */
.iks--bar .bar-wrap{ display:flex; gap:12px; align-items:center; background:var(--card); border-radius:999px; padding:8px 12px }
.iks--bar .iks-progress{ flex:1; height:8px; margin:0 }
.iks--bar .bar-current, .iks--bar .bar-next{ white-space:nowrap; font-size:14px }

/* Sidebar Slim */
.iks--sidebar .card{ background:var(--card); border-radius:12px; padding:12px }
.iks--sidebar .head{ display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--muted) }
.iks--sidebar .title{ font-weight:700; color:var(--text) }
.iks--sidebar .now{ margin-top:8px }
.iks--sidebar .list{ list-style:none; padding:0; margin:10px 0; display:grid; gap:6px }
.iks--sidebar .list li{ display:flex; justify-content:space-between; font-size:14px; border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:6px }
.iks--sidebar .next{ font-size:13px; color:var(--muted) }

/* Hero Split */
.iks--hero .hero-wrap{ display:grid; gap:16px; align-items:center; background:var(--card); border-radius:14px; padding:18px }
@media(min-width:900px){ .iks--hero .hero-wrap{ grid-template-columns:1.2fr 1fr } }
.iks--hero h2{ font-size:28px; margin:0 }
.iks--hero .range{ margin:4px 0 10px; opacity:.9 }
.iks--hero .next-label{ color:var(--muted); text-transform:uppercase; font-size:12px; letter-spacing:.08em }
.iks--hero .next-line{ font-size:18px; margin:6px 0 12px }
.iks--hero .timeline{ position:relative; height:14px; background:rgba(255,255,255,.15); border-radius:999px }
.iks--hero .tick{ position:absolute; top:-22px; font-size:12px; color:var(--muted); transform:translateX(-50%); white-space:nowrap }
.iks--hero .now-marker{ position:absolute; top:-6px; width:2px; height:26px; background:var(--accent); box-shadow:0 0 0 2px rgba(0,0,0,.15) }

/* Kiosk Fullscreen */
.iks--kiosk .screen{ background:var(--card); border-radius:16px; padding:20px }
.iks--kiosk .row.top{ display:flex; justify-content:space-between; color:var(--muted) }
.iks--kiosk .row.main{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin:10px 0 12px }
.iks--kiosk .current .name{ font-size:36px; font-weight:800 }
.iks--kiosk .current .range{ font-size:18px; margin:6px 0 10px }
.iks--kiosk .current .bar{ height:12px; background:rgba(255,255,255,.15); border-radius:999px; overflow:hidden }
.iks--kiosk .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px }
.iks--kiosk .cell{ background:rgba(0,0,0,.1); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px; font-size:18px; display:flex; justify-content:space-between }
@media(max-width:980px){ .iks--kiosk .grid{ grid-template-columns:repeat(2,1fr) } }

#ikst-year { min-width:120px; }
.nav-tab-wrapper { margin-top: 8px; }