/* ============ مدار v2.2 — تنسيق راقٍ ============
   طبقة أناقة كاملة: مساحات أوسع، ظلال ناعمة متدرجة، خطوط شعرية ذهبية،
   علامات صلاة قاطعة متوهجة، وتفاصيل مضبوطة للعربية والإنجليزية. */

:root {
  --ink: #262040;
  --ink-soft: #4A4468;
  --bg: #FAF5EE;
  --surface: #FFFFFF;
  --surface2: #F3EDE3;
  --muted: #837EA6;
  --line: #E9E1D4;
  --hairline: rgba(200,149,43,.28);
  --gold: #C8952B;
  --gold-ink: #8C6100;
  --terra: #B05A48;
  --shadow: 0 1px 2px rgba(31,26,55,.05), 0 6px 22px rgba(31,26,55,.07);
  --shadow-soft: 0 1px 2px rgba(31,26,55,.04), 0 3px 10px rgba(31,26,55,.05);

  --tick: #A79D87;
  --prayer-cut: #17130E;
  --prayer-glow: rgba(23,19,14,.45);

  --c-worship: #2E9E5B;  --t-worship: #1D6E3E;  --b-worship: rgba(46,158,91,.14);
  --c-dhikr:   #7CC98F;  --t-dhikr:   #3F7D55;  --b-dhikr:   rgba(124,201,143,.18);
  --c-sleep:   #5FA8E8;  --t-sleep:   #2C6499;  --b-sleep:   rgba(95,168,232,.15);
  --c-work:    #E5C21C;  --t-work:    #6E5B00;  --b-work:    rgba(229,194,28,.17);
  --c-move:    #8783A2;  --t-move:    #565274;  --b-move:    rgba(135,131,162,.14);
  --c-family:  #C08A1E;  --t-family:  #7D5810;  --b-family:  rgba(192,138,30,.15);
  --c-gym:     #E06B2D;  --t-gym:     #9E4715;  --b-gym:     rgba(224,107,45,.15);
  --c-projects:#7E4FC2;  --t-projects:#5E3796;  --b-projects:rgba(126,79,194,.13);
  --c-free:    transparent; --t-free:  #6E6A8A;  --b-free:    transparent;

  --hourPx: 72px;
  --rulerW: 62px;
  --radius: 16px;
  --radius-lg: 20px;
  --fontHead: 'El Messiri', 'Geeza Pro', serif;
  --fontBody: 'Noto Naskh Arabic', 'Geeza Pro', serif;
  --fontLatin: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}

[data-theme="dark"] { color-scheme: dark; }
[data-theme="dark"] {
  --ink: #F5F2EC;
  --ink-soft: #C9C5DD;
  --bg: #0B0B14;
  --surface: #14141E;
  --surface2: #1F1F2B;
  --muted: #A5A1C2;
  --line: #2A2A38;
  --hairline: rgba(242,182,59,.22);
  --gold: #F2B63B;
  --gold-ink: #F2C979;
  --terra: #E08468;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.42);
  --shadow-soft: 0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.3);

  --tick: #676378;
  --prayer-cut: #F7EDD6;
  --prayer-glow: rgba(247,237,214,.8);

  --c-worship: #34C971;  --t-worship: #8FE7B2;  --b-worship: rgba(52,201,113,.20);
  --c-dhikr:   #8FE3A4;  --t-dhikr:   #C2F2CF;  --b-dhikr:   rgba(143,227,164,.16);
  --c-sleep:   #7CC0F5;  --t-sleep:   #B7DDFA;  --b-sleep:   rgba(124,192,245,.18);
  --c-work:    #F5D847;  --t-work:    #FAE68F;  --b-work:    rgba(245,216,71,.16);
  --c-move:    #7C7A92;  --t-move:    #B7B4CC;  --b-move:    rgba(124,122,146,.18);
  --c-family:  #E8A21F;  --t-family:  #F5C86A;  --b-family:  rgba(232,162,31,.18);
  --c-gym:     #F0794A;  --t-gym:     #F7AB8C;  --b-gym:     rgba(240,121,74,.18);
  --c-projects:#A66BF2;  --t-projects:#CDA9F8;  --b-projects:rgba(166,107,242,.18);
  --c-free:    transparent; --t-free:  #A5A1C2;  --b-free:    transparent;
}

/* ثيم أبيض وذهبي: أساسي أبيض، فرعي أسود متوهج، ثانوي ذهبي */
[data-theme="mono"] { color-scheme: light; }
[data-theme="mono"] {
  --ink: #0B0B0B;
  --ink-soft: #2E2E2E;
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface2: #F5F4F0;
  --muted: #6E6A5E;
  --line: #E8E6DF;
  --hairline: rgba(200,162,43,.4);
  --gold: #C8A22B;
  --gold-ink: #8A6D14;
  --terra: #A5502F;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 26px rgba(0,0,0,.07);
  --shadow-soft: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.05);
  --tick: #8B8778;
  --prayer-cut: #0A0A0A;
  --prayer-glow: rgba(0,0,0,.55);
}
[data-theme="mono"] .nowBar { background: #0A0A0A; color: #FFFFFF; box-shadow: 0 0 16px rgba(0,0,0,.3); }
[data-theme="mono"] .dial .ringBase { stroke: #F0EFEA; }
[data-theme="mono"] .primaryBtn { background: #C8A22B; }

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] { color-scheme: dark; }
  [data-theme="auto"] {
    --ink: #F5F2EC; --ink-soft: #C9C5DD; --bg: #0B0B14; --surface: #14141E; --surface2: #1F1F2B;
    --muted: #A5A1C2; --line: #2A2A38; --hairline: rgba(242,182,59,.22);
    --gold: #F2B63B; --gold-ink: #F2C979; --terra: #E08468;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.42);
    --shadow-soft: 0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.3);
    --tick: #676378;
    --prayer-cut: #F7EDD6; --prayer-glow: rgba(247,237,214,.8);
    --c-worship: #34C971;  --t-worship: #8FE7B2;  --b-worship: rgba(52,201,113,.20);
    --c-dhikr:   #8FE3A4;  --t-dhikr:   #C2F2CF;  --b-dhikr:   rgba(143,227,164,.16);
    --c-sleep:   #7CC0F5;  --t-sleep:   #B7DDFA;  --b-sleep:   rgba(124,192,245,.18);
    --c-work:    #F5D847;  --t-work:    #FAE68F;  --b-work:    rgba(245,216,71,.16);
    --c-move:    #7C7A92;  --t-move:    #B7B4CC;  --b-move:    rgba(124,122,146,.18);
    --c-family:  #E8A21F;  --t-family:  #F5C86A;  --b-family:  rgba(232,162,31,.18);
    --c-gym:     #F0794A;  --t-gym:     #F7AB8C;  --b-gym:     rgba(240,121,74,.18);
    --c-projects:#A66BF2;  --t-projects:#CDA9F8;  --b-projects:rgba(166,107,242,.18);
    --c-free:    transparent; --t-free:  #A5A1C2;  --b-free:    transparent;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--fontBody);
  font-size: 17px;
  line-height: 1.75;
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
  letter-spacing: .1px;
}
[dir="ltr"] body { font-family: var(--fontLatin); font-size: 16px; }

button { font-family: inherit; color: inherit; }

.screen { max-width: 860px; margin: 0 auto; padding: 14px 16px 28px; }

/* ============ التنقل السفلي ============ */

.bottomNav {
  position: fixed; bottom: 0; right: 0; left: 0; z-index: 50;
  display: flex; justify-content: space-around;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
}
.navItem {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: .74rem; font-weight: 700;
  padding: 5px 14px; border-radius: 13px;
  transition: background .18s, color .18s;
}
.navItem svg { width: 24px; height: 24px; }
.navItem.active { color: var(--gold-ink); background: color-mix(in srgb, var(--gold) 13%, transparent); }
.navItem.active svg { color: var(--gold); }

/* ============ عناصر عامة ============ */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 16px 18px; margin-bottom: 14px;
}
.card.prime { border-top: 2px solid var(--hairline); }

.screenTitle {
  font-family: var(--fontHead); font-weight: 700; font-size: 1.45rem;
  margin: 6px 2px 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.screenTitle .sub { font-family: inherit; font-size: .82rem; color: var(--muted); font-weight: 400; }

.chipBtn {
  font-size: .85rem; font-weight: 700;
  background: transparent; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 15px; cursor: pointer;
  transition: border-color .18s, background .18s;
}
.chipBtn:hover { border-color: var(--gold); color: var(--ink); }
.chipBtn.on { background: var(--b-worship); border-color: var(--c-worship); color: var(--t-worship); }
.chipBtn.off { background: var(--surface2); color: var(--muted); }
.chipBtn.gold { background: color-mix(in srgb, var(--gold) 13%, transparent); border-color: color-mix(in srgb, var(--gold) 60%, transparent); color: var(--gold-ink); }

.iconBtn {
  width: 40px; height: 40px; border-radius: 13px;
  border: 1px solid var(--line); background: transparent;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--muted); flex-shrink: 0;
  transition: border-color .18s, color .18s;
}
.iconBtn:hover { border-color: var(--gold); color: var(--gold-ink); }
.iconBtn svg { width: 20px; height: 20px; }

.navBtn {
  font-size: .88rem; background: transparent; border: 1px solid var(--line);
  border-radius: 11px; padding: 7px 14px; cursor: pointer; white-space: nowrap; color: var(--ink-soft);
}
.navBtn:hover { border-color: var(--muted); color: var(--ink); }

.seg {
  display: inline-flex; background: var(--surface2); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px; gap: 2px;
}
.seg button {
  border: none; background: none; cursor: pointer; border-radius: 999px;
  padding: 5px 17px; font-size: .85rem; font-weight: 700; color: var(--muted);
}
.seg button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-soft); }

.banner {
  margin: 12px 0; padding: 12px 16px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border: 1px dashed color-mix(in srgb, var(--gold) 60%, transparent);
  font-size: .92rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.badge {
  display: inline-block; font-size: .76rem; font-weight: 700;
  border-radius: 999px; padding: 1px 11px;
  background: color-mix(in srgb, var(--gold) 13%, transparent);
  color: var(--gold-ink);
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
}
.badge.eid { background: var(--b-worship); color: var(--t-worship); border-color: var(--c-worship); }
.badge.white { background: var(--surface2); color: var(--muted); border-color: var(--line); }

/* ============ رأس شاشة اليوم ============ */

.dayHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dayHead .dateCenter {
  text-align: center; flex: 1; min-width: 0; position: relative;
  cursor: pointer; border-radius: 12px; padding: 2px 8px;
  transition: background .15s;
}
.dayHead .dateCenter:hover { background: var(--surface2); }
.gDate { font-family: var(--fontHead); font-weight: 600; font-size: 1.15rem; letter-spacing: .2px; }
.datePickHint { color: var(--muted); font-size: .7rem; vertical-align: middle; }
.hiddenDate { position: absolute; width: 0; height: 0; opacity: 0; border: 0; padding: 0; pointer-events: none; }
.hDate { color: var(--gold-ink); font-size: .86rem; }

.dayTools { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.toolsGroup { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.prayerLine {
  margin-top: 10px; padding: 8px 2px 2px;
  border-top: 1px dashed var(--line);
  font-size: .84rem; color: var(--ink-soft);
  white-space: nowrap; overflow-x: auto; scrollbar-width: none;
}
.prayerLine::-webkit-scrollbar { display: none; }
.prayerLine b { color: var(--gold-ink); font-weight: 700; }
.prayerLine .sep { color: var(--muted); opacity: .5; margin: 0 7px; }

/* ============ الدايرة ============ */

.dialWrap { position: relative; width: min(96vw, 480px); margin: 2px auto 0; }
.dial { width: 100%; height: auto; display: block; }

.dial .hourTick { stroke: var(--tick); stroke-width: 1.4; opacity: .85; }
.dial .hourTick.major { stroke-width: 2.4; opacity: 1; }
.dial .hourNum { fill: var(--muted); font-size: 11.5px; font-family: var(--fontBody); }
[dir="ltr"] .dial .hourNum { font-family: var(--fontLatin); font-size: 10.5px; }
.dial .ringBase { stroke: var(--surface2); fill: none; }
[data-theme="dark"] .dial .ringBase { stroke: #191924; }
@media (prefers-color-scheme: dark) { [data-theme="auto"] .dial .ringBase { stroke: #191924; } }
.dial .centerDisc { fill: var(--surface); opacity: .0; }

.dial .arcSector { cursor: grab; transition: opacity .15s, filter .15s; stroke-linejoin: round; touch-action: none; }
.dial .arcSector:active { cursor: grabbing; }
.dial .arcSector.dim { opacity: .28; }
.dial .arcSector.current { filter: drop-shadow(0 0 9px currentColor); }
.dial .arcSector.selected { filter: drop-shadow(0 0 14px currentColor) brightness(1.12); }

.dial .prayerHand { pointer-events: none; }
.dial .prayerCut {
  stroke: var(--prayer-cut); stroke-width: 3.6; stroke-linecap: round;
  filter: drop-shadow(0 0 5px var(--prayer-glow));
  pointer-events: none;
}
.dial .pLabel { fill: var(--gold-ink); font-size: 12.5px; font-weight: 700; font-family: var(--fontBody); }
.dial .pLabelTime { fill: var(--ink); font-size: 11.5px; font-family: var(--fontBody); }
[dir="ltr"] .dial .pLabel { font-size: 10.5px; font-family: var(--fontLatin); }
[dir="ltr"] .dial .pLabelTime { font-size: 10px; font-family: var(--fontLatin); }
.dial .nowDot { fill: #FFFFFF; stroke: rgba(0,0,0,.3); stroke-width: 1; filter: drop-shadow(0 0 6px rgba(255,255,255,.95)); pointer-events: none; }

.dialCenter {
  position: absolute; inset: 29%; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none; gap: 1px; padding: 6px;
}
.dcTime { font-family: var(--fontHead); font-weight: 700; font-size: clamp(1.7rem, 8.6vw, 2.5rem); line-height: 1.08; letter-spacing: .5px; }
.dcSuffix { font-size: .88rem; color: var(--muted); margin-top: -3px; }
.dcBlock { font-size: .98rem; font-weight: 700; display: flex; align-items: center; gap: 7px; margin-top: 6px; }
.dcBlock .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dcSub { font-size: .76rem; color: var(--muted); line-height: 1.5; max-width: 95%; }
[dir="ltr"] .dcSub { font-size: .7rem; }

/* ============ الخط الزمني ============ */

.timeline {
  position: relative;
  height: calc(var(--hourPx) * 24);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin-top: 10px;
  box-shadow: var(--shadow-soft);
}
.hourLine { position: absolute; right: 0; left: 0; height: 0; border-top: 1px solid var(--line); opacity: .45; }
.hourLabel {
  position: absolute; right: 10px; transform: translateY(-55%);
  font-size: .73rem; color: var(--muted); background: var(--surface); padding: 0 4px;
}
.block {
  position: absolute; right: var(--rulerW); left: 12px;
  border-radius: 12px; border-inline-start: 4px solid;
  padding: 5px 12px 5px 10px; overflow: hidden; cursor: pointer;
  box-shadow: var(--shadow-soft);
  touch-action: none;
  -webkit-user-select: none; user-select: none;
}
.block .bTitle { font-weight: 700; font-size: .96rem; line-height: 1.4; }
.block .bTime { font-size: .78rem; opacity: .88; }
[dir="ltr"] .block .bTime { display: block; font-size: .74rem; }
.block .bNote { font-size: .78rem; color: var(--muted); line-height: 1.5; }
.block.slim { display: flex; align-items: center; gap: 8px; padding-top: 0; padding-bottom: 0; }
[dir="ltr"] .block.slim { gap: 6px; }
[dir="ltr"] .block.slim .bTime { display: inline; }
.block.slim .bTitle { font-size: .82rem; }
.block.slim .bTime { font-size: .72rem; }
.block.slim .bNote { display: none; }
.block.current { box-shadow: 0 0 0 1.5px currentColor, 0 0 15px color-mix(in srgb, currentColor 55%, transparent); }
.block.selected { box-shadow: 0 0 0 2.5px currentColor, 0 0 22px color-mix(in srgb, currentColor 70%, transparent); z-index: 8; }
.block.dragging { opacity: .9; z-index: 30; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.block .markIcon { position: absolute; top: 6px; inset-inline-end: 8px; width: 18px; height: 18px; }
.block .ovIcon { position: absolute; bottom: 6px; inset-inline-end: 8px; font-size: .66rem; color: var(--muted); }

/* حافتا الفترة: منطقتا إمساك لتغيير البداية والنهاية */
.block .ezone {
  position: absolute; left: 0; right: 0; height: 14px;
  cursor: ns-resize; touch-action: none; z-index: 2;
}
.block .ezone.ezTop { top: 0; }
.block .ezone.ezBottom { bottom: 0; }
.block .ezone::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  width: 34px; height: 3.5px; border-radius: 999px;
  background: color-mix(in srgb, currentColor 26%, transparent);
  opacity: 0; transition: opacity .12s, box-shadow .12s, width .12s;
}
.block .ezone.ezTop::after { top: 2.5px; }
.block .ezone.ezBottom::after { bottom: 2.5px; }
.block.slim .ezone { height: 9px; }
.block .ezone.ezBottom::after { opacity: .5; }
.block.slim .ezone::after { opacity: 0; }

.cat-worship { background: var(--b-worship); border-color: var(--c-worship); color: var(--t-worship); }
.cat-sleep   { background: var(--b-sleep);   border-color: var(--c-sleep);   color: var(--t-sleep); }
.cat-work    { background: var(--b-work);    border-color: var(--c-work);    color: var(--t-work); }
.cat-move    { background: var(--b-move);    border-color: var(--c-move);    color: var(--t-move); }
.cat-family  { background: var(--b-family);  border-color: var(--c-family);  color: var(--t-family); }
.cat-gym     { background: var(--b-gym);     border-color: var(--c-gym);     color: var(--t-gym); }
.cat-projects{ background: var(--b-projects);border-color: var(--c-projects);color: var(--t-projects); }
.cat-dhikr   { background: var(--b-dhikr);   border-color: var(--c-dhikr);   color: var(--t-dhikr); }
.block.cat-free {
  background: transparent;
  border: 1.5px dashed var(--line);
  border-inline-start: 3.5px solid var(--muted);
  color: var(--t-free);
  box-shadow: none;
}
.block.cat-family { box-shadow: var(--shadow-soft), 0 0 12px color-mix(in srgb, var(--c-family) 38%, transparent); }
.dial .arcSector.glowFam { filter: drop-shadow(0 0 7px var(--c-family)); }
.batIcon { display: inline-block; vertical-align: -1px; margin-inline-end: 4px; }

.prayerMark { position: absolute; right: var(--rulerW); left: 12px; height: 0; border-top: 2px dashed color-mix(in srgb, var(--gold) 72%, transparent); z-index: 5; }
.prayerMark .pmChip {
  position: absolute; left: 4px; top: 0; transform: translateY(-52%);
  background: var(--surface); border: 1.5px solid var(--gold);
  color: var(--gold-ink); font-size: .77rem; font-weight: 700;
  border-radius: 999px; padding: 2px 12px; white-space: nowrap; box-shadow: var(--shadow-soft);
}
.nowLine { position: absolute; right: calc(var(--rulerW) - 14px); left: 0; height: 0; border-top: 2.5px solid var(--terra); z-index: 6; }
.nowLine::before { content: ''; position: absolute; right: -2px; top: -6px; width: 9px; height: 9px; border-radius: 50%; background: var(--terra); }

.dragTooltip {
  position: fixed; z-index: 99; pointer-events: none;
  background: var(--ink); color: var(--bg);
  border-radius: 11px; padding: 7px 15px;
  font-size: .95rem; font-weight: 700;
  box-shadow: 0 6px 22px rgba(0,0,0,.4);
  white-space: nowrap;
}
.dragTooltip .delta { color: var(--gold); }
[data-theme="dark"] .dragTooltip { background: var(--surface2); color: var(--ink); border: 1px solid var(--line); }

/* ============ التحويم بالفأرة: توهج ومعلومات وإشارة الحواف ============ */

.dial .prayerNeedle { pointer-events: none; }
.dial .prayerNeedle.lit { filter: drop-shadow(0 0 7px var(--prayer-glow)) brightness(1.25); }
.dial .pGroup text { transition: filter .12s; }

#edgeGlow {
  stroke: currentColor; stroke-width: 3.2; stroke-linecap: round;
  filter: drop-shadow(0 0 7px currentColor);
  pointer-events: none;
}

.hoverTip {
  font-weight: 400; font-size: .86rem; line-height: 1.55;
  text-align: start; max-width: 280px; white-space: normal;
  padding: 9px 14px;
}
.hoverTip .htTitle { font-weight: 700; font-size: .95rem; display: flex; align-items: center; gap: 7px; }
.hoverTip .htTitle .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.hoverTip .htTime { font-weight: 700; }
.hoverTip .htMeta { opacity: .82; font-size: .78rem; }
.hoverTip .htZone { color: var(--gold); font-size: .78rem; margin-top: 2px; }

/* كارت المعلومات في الواجهتين: مثبت بعيدًا عن المؤشر، شفاف بضبابية،
   والكلام مظلل ليبقى مقروءًا فوق أي خلفية.
   موضعه أسفل الشاشة، ويصعد لأعلاها حين تشاور على النصف السفلي */
.hoverTip.docked {
  left: 50% !important; top: auto !important;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: max-content; max-width: min(420px, 92vw);
  text-align: center;
  background: color-mix(in srgb, var(--ink) 46%, transparent);
  -webkit-backdrop-filter: blur(11px) saturate(1.2);
  backdrop-filter: blur(11px) saturate(1.2);
  border: 1px solid color-mix(in srgb, var(--bg) 20%, transparent);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .68);
  animation: tipRise .16s ease-out;
}
.hoverTip.docked.top {
  bottom: auto;
  top: calc(14px + env(safe-area-inset-top, 0px)) !important;
  animation: tipDrop .16s ease-out;
}
.hoverTip.docked .htTitle { justify-content: center; }
[data-theme="dark"] .hoverTip.docked {
  background: color-mix(in srgb, var(--surface2) 44%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  text-shadow: 0 1px 7px rgba(0, 0, 0, .85);
}
@keyframes tipRise {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes tipDrop {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (hover: hover) and (pointer: fine) {
  .block { transition: box-shadow .14s, filter .14s; }
  .block:hover:not(.dragging) {
    filter: brightness(1.05);
    box-shadow: 0 0 0 1.5px currentColor, 0 0 16px color-mix(in srgb, currentColor 55%, transparent);
    z-index: 7;
  }
  .block.cat-free:hover:not(.dragging) {
    filter: none;
    border-color: var(--muted);
    box-shadow: 0 0 12px color-mix(in srgb, var(--muted) 30%, transparent);
  }
  .block:hover .ezone::after { opacity: .55; }
  .block .ezone:hover::after {
    opacity: 1; width: 46px;
    box-shadow: 0 0 8px color-mix(in srgb, currentColor 80%, transparent);
    background: currentColor;
  }
  .block.slim:hover .ezone::after { opacity: .55; }
  .dial .arcSector:hover:not(.selected) { filter: drop-shadow(0 0 10px currentColor) brightness(1.1); }
  .dial .pGroup { cursor: default; }
  .dial .pGroup:hover .pLabel,
  .dial .pGroup:hover .pLabelTime { filter: drop-shadow(0 0 6px var(--prayer-glow)); fill: var(--gold-ink); }
  .prayerMark .pmChip { transition: box-shadow .14s; }
  .prayerMark .pmChip:hover { box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 60%, transparent); }
  .prayerLine span { transition: text-shadow .14s; }
  .prayerLine span:hover { text-shadow: 0 0 9px color-mix(in srgb, var(--gold) 70%, transparent); }
}

/* ============ كارت التفاصيل ============ */

.detailCard { border-inline-start: 4px solid var(--gold); }
.detailCard .dTitle { font-weight: 700; font-size: 1.08rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.detailCard .dTitle .dot { width: 11px; height: 11px; border-radius: 50%; }
.detailCard .dTime { font-size: .86rem; color: var(--muted); margin-bottom: 4px; }
.detailCard .dNote { font-size: .9rem; }
.detailCard .dActions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.markBtn {
  border-radius: 11px; border: 1px solid var(--line); background: var(--surface2);
  padding: 6px 17px; font-size: .86rem; font-weight: 700; cursor: pointer;
}
.markBtn.done.activeMark { background: var(--b-gym); border-color: var(--c-gym); color: var(--t-gym); }
.markBtn.missed.activeMark { background: var(--b-family); border-color: var(--c-family); color: var(--t-family); }
.dTasks { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 10px; }
.dTasks .taskRow { font-size: .88rem; }

.editGrid { display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap; align-items: flex-end; }
.editCol { display: flex; flex-direction: column; gap: 5px; align-items: center; }
.editCol .lbl { font-size: .75rem; color: var(--muted); font-weight: 700; }
.editCol .val { font-size: .95rem; font-weight: 700; }
.stepRow { display: flex; gap: 4px; }
.stepBtn {
  border: 1px solid var(--line); background: var(--surface2); border-radius: 9px;
  min-width: 46px; padding: 4px 6px; font-size: .8rem; font-weight: 700; cursor: pointer;
}
.stepBtn:hover { border-color: var(--gold); }
.typeSelect {
  font-family: inherit; font-size: .85rem; border: 1px solid var(--line); border-radius: 10px;
  padding: 6px 10px; background: var(--surface); color: var(--ink);
}

/* ============ شريط الآن والملخصات ============ */

.nowBar {
  background: var(--ink); color: var(--bg);
  border-radius: 13px; padding: 9px 16px; font-size: .93rem;
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px;
  box-shadow: var(--shadow-soft);
}
[data-theme="dark"] .nowBar { background: var(--surface2); color: var(--ink); border: 1px solid var(--line); }
.nowBar b { color: var(--gold); }
.nowBar[hidden] { display: none; }

.totalsRow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.tChip { background: var(--surface2); border: none; border-radius: 11px; padding: 5px 13px; font-size: .82rem; }
.tChip b { font-size: .92rem; }

.legendLine {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-size: .78rem; color: var(--ink-soft);
  margin-top: 8px; padding: 2px 4px;
}
.lgItem { display: flex; align-items: center; gap: 7px; }
.lgDot { width: 11px; height: 11px; border-radius: 4px; display: inline-block; }

/* ============ التقويم ============ */

.calHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.calTitle { font-family: var(--fontHead); font-weight: 700; font-size: 1.28rem; text-align: center; flex: 1; }
.calTitle .sub { display: block; font-family: inherit; font-size: .8rem; color: var(--gold-ink); font-weight: 400; }

.calGrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.calDow { text-align: center; font-size: .73rem; color: var(--muted); font-weight: 700; padding: 3px 0; }
.calCell {
  position: relative; min-height: 64px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line);
  padding: 5px 7px; cursor: pointer; text-align: start;
  transition: border-color .15s, transform .1s;
}
.calCell:hover { border-color: var(--gold); }
.calCell.out { opacity: .32; }
.calCell.weekendCell { background: var(--surface2); }
.calCell.today { outline: 2.5px solid var(--gold); outline-offset: 1px; }
.calCell.ramadanCell { background: color-mix(in srgb, var(--gold) 14%, transparent); }
.calCell .taskCount {
  position: absolute; bottom: 5px; inset-inline-end: 6px;
  font-size: .62rem; font-weight: 700;
  color: var(--t-projects); background: var(--b-projects);
  border-radius: 999px; padding: 0 6px;
}
.calCell .g { font-size: .95rem; font-weight: 700; }
.calCell .h { font-size: .67rem; color: var(--gold-ink); display: block; line-height: 1.25; }
.calCell .dots { position: absolute; bottom: 6px; inset-inline-start: 7px; display: flex; gap: 3px; }
.calCell .dots i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.dot-ramadan { background: var(--gold); }
.dot-eid { background: var(--c-worship); }
.dot-sacred { background: var(--c-projects); }
.dot-white { background: var(--muted); }
.dot-note { background: var(--c-work); }
.calCell .fastMark { position: absolute; top: 5px; inset-inline-end: 7px; font-size: .64rem; color: var(--gold-ink); font-weight: 700; }
.calLegend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .77rem; color: var(--muted); margin-top: 12px; }

/* ============ المهام ============ */

.taskForm { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.taskForm input[type=text] {
  flex: 1; min-width: 170px; font-family: inherit; font-size: .95rem;
  border: 1px solid var(--line); border-radius: 11px; padding: 8px 14px;
  background: var(--surface); color: var(--ink);
}
.taskForm select, .taskForm input[type=date], .taskForm input[type=color] {
  font-family: inherit; font-size: .85rem; border: 1px solid var(--line);
  border-radius: 11px; padding: 7px 10px; background: var(--surface); color: var(--ink);
}
.taskForm input[type=color] { width: 52px; height: 40px; padding: 3px; cursor: pointer; }
.primaryBtn {
  background: var(--gold); color: #241F3D; border: none; border-radius: 11px;
  padding: 8px 20px; font-weight: 700; font-size: .9rem; cursor: pointer;
  box-shadow: var(--shadow-soft);
}
.primaryBtn:hover { filter: brightness(1.06); }
.taskRow {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 4px; border-bottom: 1px dashed var(--line); font-size: .95rem;
}
.taskRow:last-child { border-bottom: none; }
.taskRow .tCheck {
  width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--muted);
  background: none; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.taskRow.doneRow .tCheck { background: var(--c-gym); border-color: var(--c-gym); color: #fff; }
.taskRow.doneRow .tTitle { text-decoration: line-through; color: var(--muted); }
.taskRow .tTitle { flex: 1; }
.taskRow .tMeta { font-size: .73rem; color: var(--muted); white-space: nowrap; text-align: start; }
.taskRow .tDel { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.05rem; }
.taskRow .tDel:hover { color: var(--terra); }
.catTabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }

/* ============ رحلتي ============ */

.statGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.statBox { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; text-align: center; box-shadow: var(--shadow-soft); }
.statBox .v { font-family: var(--fontHead); font-size: 1.55rem; font-weight: 700; color: var(--gold-ink); }
.statBox .l { font-size: .78rem; color: var(--muted); }
.barRow { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: .86rem; }
.barRow .lbl { width: 120px; flex-shrink: 0; }
.barRow .bar { flex: 1; height: 12px; border-radius: 999px; background: var(--surface2); overflow: hidden; }
.barRow .bar i { display: block; height: 100%; border-radius: 999px; }
.barRow .pct { width: 86px; text-align: end; color: var(--muted); font-size: .78rem; }
.reportText { font-size: .96rem; }
.reportText li { margin: 8px 0 8px 18px; }
[dir="ltr"] .reportText li { margin: 8px 18px 8px 0; }

/* أسبوع يومًا بيوم */
.wkStrip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 8px 0 4px; }
.wkCell {
  border: 1.5px solid var(--line); border-radius: 11px;
  padding: 7px 2px; text-align: center; display: flex; flex-direction: column; gap: 2px;
}
.wkCell .d { font-size: .68rem; color: var(--muted); }
.wkCell .p { font-size: .84rem; font-weight: 700; }
.wkCell.good { border-color: var(--c-worship); background: color-mix(in srgb, var(--c-worship) 12%, transparent); }
.wkCell.low { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.wkCell.empty .p, .wkCell.future .p { color: var(--muted); font-weight: 400; }
.wkCell.future { opacity: .5; border-style: dashed; }
.wkCell.today { box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 65%, transparent); }
.bwRow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* مولد التقارير */
.repControls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.repDates { display: flex; gap: 10px; flex-wrap: wrap; }
.repDates label { display: flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--muted); }
.repDates input[type="date"] { width: auto; }
.repActions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.repOut {
  margin-top: 10px; padding: 14px;
  background: var(--surface2); border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--fontBody); font-size: .84rem; line-height: 1.75;
  white-space: pre-wrap; word-break: break-word;
  max-height: 420px; overflow: auto;
  direction: rtl; text-align: right;
}
[dir="ltr"] .repOut { direction: ltr; text-align: left; }

/* ============ الإعدادات ============ */

.setRow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 2px; border-bottom: 1px dashed var(--line); font-size: .95rem; flex-wrap: wrap; }
.setRow:last-child { border-bottom: none; }
.setRow .lbl { font-weight: 700; }
.setRow .hint { display: block; font-size: .77rem; color: var(--muted); font-weight: 400; }
.setRow input[type=number], .setRow input[type=time], .setRow input[type=text], .setRow select {
  font-family: inherit; font-size: .9rem; border: 1px solid var(--line); border-radius: 9px;
  padding: 5px 9px; background: var(--surface); color: var(--ink); width: 120px; text-align: center;
}
.setRow input[type=text] { width: 172px; text-align: start; }
.offGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.offGrid label { font-size: .8rem; color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
.offGrid input { width: 100%; }
.setSection { font-family: var(--fontHead); font-weight: 700; font-size: 1.12rem; margin: 20px 2px 8px; color: var(--gold-ink); letter-spacing: .2px; }
.cityResults {
  border: 1px solid var(--line); border-radius: 12px; margin-top: 6px;
  max-height: 240px; overflow: auto; background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.cityResults button {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  width: 100%; border: none; background: none; cursor: pointer;
  padding: 9px 14px; font-size: .92rem; font-family: inherit;
  border-bottom: 1px dashed var(--line); text-align: start;
}
.cityResults button:last-child { border-bottom: none; }
.cityResults button:hover { background: var(--surface2); }
.typeChip { display: inline-flex; align-items: center; gap: 7px; }
.typeChip .tDot { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }

.phaseNote { margin-top: 18px; color: var(--muted); font-size: .8rem; text-align: center; line-height: 1.8; }
.errBox {
  margin: 16px 0; padding: 14px; border-radius: 12px;
  background: rgba(158,74,58,.1); border: 1px solid #9E4A3A; color: #C4614E; font-size: .9rem; white-space: pre-wrap;
}

@media (min-width: 700px) {
  :root { --hourPx: 78px; }
  body { font-size: 18px; }
  [dir="ltr"] body { font-size: 16.5px; }
  .dialWrap { width: 500px; }
}