:root {
  --card: #102825;
  --input: #0c211e;
  --hover: #25463f;
  --on-accent: #162c25;
  --accent-muted: #465c40;
}
:root[data-theme="midnight"] {
  --bg: #0b1629; --panel: #142744; --card: #102039; --input: #0c1b31;
  --line: #354a68; --text: #f0f5ff; --muted: #b0c1db; --accent: #b1d9ff;
  --gold: #f0cb84; --hover: #283f60; --on-accent: #10233b; --accent-muted: #34516c;
}
:root[data-theme="plum"] {
  --bg: #211225; --panel: #37213f; --card: #2b1931; --input: #24152b;
  --line: #62436a; --text: #fcf1ff; --muted: #d3b7d9; --accent: #ebc1f5;
  --gold: #efd09b; --hover: #513459; --on-accent: #321a3a; --accent-muted: #65456e;
}
:root[data-theme="charcoal"] {
  --bg: #17191c; --panel: #292c31; --card: #22252a; --input: #1b1e22;
  --line: #4a4e56; --text: #f8f5ee; --muted: #c2c0ba; --accent: #f0d294;
  --gold: #f0d294; --hover: #3d4148; --on-accent: #2c2417; --accent-muted: #67532e;
}
#display-background { position: fixed; inset: 0; background-size: cover; background-position: center; pointer-events: none; }
#display-background.has-image::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.72); }
.display { position: relative; }
.prayer-card { background: var(--card); }
.prayer-card.active, .primary, #toast { color: var(--on-accent); }
.prayer-card.active { background: var(--accent); }
.prayer-card.active .arabic, .prayer-card.active .prayer-label { color: var(--accent-muted); }
button:hover, .remote-tip { background: var(--hover); }
.primary:hover { background: var(--accent); filter: brightness(1.08); }
dialog { background: var(--panel); border-color: var(--line); }
input, select { background: var(--input); border-color: var(--line); }
.progress-track, .tag { background: var(--line); }
.notice { color: var(--text); }
.appearance-settings, .calendar-settings, .background-controls { display: grid; gap: 14px; }
.field-label { font-size: 15px; color: var(--muted); }
#background-preview { width: 100%; height: 130px; object-fit: cover; border: 1px solid var(--line); border-radius: 8px; }
#background-preview[hidden] { display: none; }
.calendar-preview { padding: 12px; background: var(--input); border-radius: 7px; font-size: 16px; color: var(--accent); }
#save-status { max-width: 100%; overflow-wrap: anywhere; }
[hidden] { display: none !important; }
.check-label { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
.check-label input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--accent); }
#api-status.error { color: #ffb5a7; }
.iqama-rule { display: grid; gap: 10px; align-content: start; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.iqama-rule h4 { margin: 0; font-size: 17px; font-weight: 500; }
.iqama-rule select { font-size: 14px; padding: 10px 6px; }
#iqama-inputs { grid-template-columns: repeat(2, minmax(0,1fr)); }
#timing-preview { margin-top: 16px; white-space: pre-line; line-height: 1.8; }
@media(max-width:450px) { #iqama-inputs { grid-template-columns: 1fr; } }
.timezone-note { color: var(--muted); font-size: clamp(12px,.85vw,17px); margin-top: 5px; }
#location-status { color: var(--gold); font-size: clamp(14px,1vw,20px); line-height: 1.5; margin-top: 10px; }
.iqama-countdown-active { overflow: hidden; }
.iqama-screen { position: fixed; inset: 0; z-index: 2; overflow: auto; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 2vh; padding: 3vh 4vw; text-align: center; }
.iqama-screen-mosque { color: var(--muted); font-size: clamp(16px,2.2vmin,34px); overflow-wrap: anywhere; max-width: 100%; }
.iqama-screen-content { width: 100%; margin: auto 0; }
.iqama-screen .eyebrow { color: var(--accent); font-size: clamp(12px,2vmin,26px); }
.iqama-screen h2 { font-size: clamp(30px,7vmin,100px); font-weight: 500; margin-top: 1.5vh; }
.iqama-screen .arabic { font-size: clamp(24px,4vmin,60px); margin-top: .5vh; }
#iqama-screen-timer { font-size: min(19vw,27vh); line-height: 1.15; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -.045em; white-space: nowrap; margin: 2vh 0; }
#iqama-screen-time { color: var(--text); font-size: clamp(18px,3vmin,44px); }
.iqama-screen .progress-track { width: min(70%,1000px); margin: 3vh auto; height: 5px; }
#iqama-screen-progress { height: 100%; background: var(--accent); }
.iqama-screen-reminder { color: var(--muted); font-size: clamp(14px,2.3vmin,32px); line-height: 1.5; }
.iqama-screen-actions { justify-content: center; flex-shrink: 0; }