/* ============================================================
   Noor Tasbih — soft pastel theme system
   Every colour travels with its background; hidden is absolute.
   ============================================================ */

:root,
[data-theme="rose"] {
  --bg: #FFF6F9;
  --bg-2: #FDEBF2;
  --surface: #FFFFFF;
  --surface-2: #FFF5F9;
  --surface-3: #FCE9F1;
  --border: rgba(214, 156, 185, 0.34);
  --border-strong: rgba(196, 128, 163, 0.5);
  --text: #5A4350;
  --muted: #8A7284;
  --accent: #F4AFCB;
  --accent-strong: #B8557F;
  --accent-soft: #FCE1EE;
  --accent-ink: #FFFFFF;
  --gold: #C08C3E;
  --gold-soft: #F8EAD2;
  --gold-ink: #7A5A20;
  --shadow-sm: 0 2px 10px rgba(196, 130, 165, 0.12);
  --shadow: 0 12px 30px rgba(196, 130, 165, 0.16);
  --shadow-lg: 0 20px 48px rgba(196, 130, 165, 0.24);
  /* Typography for Beginners: Default to ultra-legible, unligatured Readex Pro across entire UI */
  --font-arabic-clear: 'Readex Pro', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif;
  --font-arabic-sans: 'Noto Sans Arabic', system-ui, -apple-system, sans-serif;
  --font-arabic-naskh: 'Noto Naskh Arabic', serif;
  --font-arabic-cairo: 'Cairo', system-ui, sans-serif;
  --font-arabic: var(--font-arabic-clear);
  --font-ui: var(--font-arabic-clear);
  --arabic-size-mult: 1.18;
}

[data-arabic-font="clear"] { --font-arabic: var(--font-arabic-clear); --font-ui: var(--font-arabic-clear); }
[data-arabic-font="sans"] { --font-arabic: var(--font-arabic-sans); --font-ui: var(--font-arabic-sans); }
[data-arabic-font="naskh"] { --font-arabic: var(--font-arabic-naskh); --font-ui: var(--font-arabic-sans); }
[data-arabic-font="cairo"] { --font-arabic: var(--font-arabic-cairo); --font-ui: var(--font-arabic-cairo); }

[data-arabic-size="medium"] { --arabic-size-mult: 1.0; }
[data-arabic-size="large"] { --arabic-size-mult: 1.18; }
[data-arabic-size="xlarge"] { --arabic-size-mult: 1.36; }

[data-theme="lavender"] {
  --bg: #F8F5FF;
  --bg-2: #F0EAFF;
  --surface: #FFFFFF;
  --surface-2: #F8F5FF;
  --surface-3: #EFE8FF;
  --border: rgba(150, 130, 215, 0.32);
  --border-strong: rgba(140, 118, 205, 0.5);
  --text: #4C4460;
  --muted: #7C7594;
  --accent: #C6B6F2;
  --accent-strong: #6A4FBE;
  --accent-soft: #EEE8FF;
  --accent-ink: #FFFFFF;
  --gold: #B98A3C;
  --gold-soft: #F7E9CE;
  --gold-ink: #77571D;
  --shadow-sm: 0 2px 10px rgba(140, 120, 210, 0.14);
  --shadow: 0 12px 30px rgba(140, 120, 210, 0.18);
  --shadow-lg: 0 20px 48px rgba(140, 120, 210, 0.26);
}

[data-theme="sky"] {
  --bg: #F4FAFF;
  --bg-2: #E9F4FE;
  --surface: #FFFFFF;
  --surface-2: #F3F9FF;
  --surface-3: #E8F3FD;
  --border: rgba(120, 170, 215, 0.32);
  --border-strong: rgba(105, 158, 205, 0.5);
  --text: #3C5163;
  --muted: #6F8497;
  --accent: #A9D3F2;
  --accent-strong: #2F6E9E;
  --accent-soft: #E3F1FD;
  --accent-ink: #FFFFFF;
  --gold: #C08C3E;
  --gold-soft: #F7EAD4;
  --gold-ink: #775A22;
  --shadow-sm: 0 2px 10px rgba(110, 160, 210, 0.14);
  --shadow: 0 12px 30px rgba(110, 160, 210, 0.18);
  --shadow-lg: 0 20px 48px rgba(110, 160, 210, 0.26);
}

[data-theme="mint"] {
  --bg: #F4FBF7;
  --bg-2: #E9F7EF;
  --surface: #FFFFFF;
  --surface-2: #F3FAF6;
  --surface-3: #E7F6EE;
  --border: rgba(120, 190, 155, 0.34);
  --border-strong: rgba(105, 178, 142, 0.5);
  --text: #3C5648;
  --muted: #6E8779;
  --accent: #A8DCC0;
  --accent-strong: #2A7C5C;
  --accent-soft: #E3F6EC;
  --accent-ink: #FFFFFF;
  --gold: #C08C3E;
  --gold-soft: #F6EBD3;
  --gold-ink: #745A21;
  --shadow-sm: 0 2px 10px rgba(110, 185, 150, 0.16);
  --shadow: 0 12px 30px rgba(110, 185, 150, 0.2);
  --shadow-lg: 0 20px 48px rgba(110, 185, 150, 0.28);
}

[data-theme="butter"] {
  --bg: #FFFBF2;
  --bg-2: #FDF3DF;
  --surface: #FFFFFF;
  --surface-2: #FFF9EE;
  --surface-3: #FCF2DE;
  --border: rgba(210, 180, 120, 0.36);
  --border-strong: rgba(196, 162, 96, 0.52);
  --text: #5A4B34;
  --muted: #8C7D66;
  --accent: #F2D79B;
  --accent-strong: #8F6A18;
  --accent-soft: #FBF0D6;
  --accent-ink: #FFFFFF;
  --gold: #B98A3C;
  --gold-soft: #F8EBCF;
  --gold-ink: #74571E;
  --shadow-sm: 0 2px 10px rgba(205, 175, 110, 0.18);
  --shadow: 0 12px 30px rgba(205, 175, 110, 0.22);
  --shadow-lg: 0 20px 48px rgba(205, 175, 110, 0.3);
}

/* ============================================================
   DARK MODE PASTEL PALETTES (DEPENDING ON PHONE SYSTEM MODE)
   Velvety midnight bases with glowing pastel accents
   ============================================================ */

[data-mode="dark"],
[data-mode="dark"][data-theme="rose"] {
  --bg: #150E15;
  --bg-2: #1E1420;
  --surface: #241826;
  --surface-2: #2D1E30;
  --surface-3: #38253B;
  --border: rgba(244, 175, 203, 0.22);
  --border-strong: rgba(244, 175, 203, 0.38);
  --text: #FCEEF4;
  --muted: #C7A6BA;
  --accent: #F4AFCB;
  --accent-strong: #FFB3D4;
  --accent-soft: rgba(244, 175, 203, 0.16);
  --accent-ink: #170914;
  --gold: #E5B260;
  --gold-soft: rgba(229, 178, 96, 0.18);
  --gold-ink: #F8D89C;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.38);
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.52);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.68);
}

[data-mode="dark"][data-theme="lavender"] {
  --bg: #110E1C;
  --bg-2: #181328;
  --surface: #1F1934;
  --surface-2: #282042;
  --surface-3: #322853;
  --border: rgba(198, 182, 242, 0.22);
  --border-strong: rgba(198, 182, 242, 0.38);
  --text: #F4F0FE;
  --muted: #B8ACDC;
  --accent: #C6B6F2;
  --accent-strong: #D9CDFF;
  --accent-soft: rgba(198, 182, 242, 0.16);
  --accent-ink: #100826;
  --gold: #E5B260;
  --gold-soft: rgba(229, 178, 96, 0.18);
  --gold-ink: #F8D89C;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.38);
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.52);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.68);
}

[data-mode="dark"][data-theme="sky"] {
  --bg: #0D141C;
  --bg-2: #121D28;
  --surface: #172533;
  --surface-2: #1F3042;
  --surface-3: #273B52;
  --border: rgba(169, 211, 242, 0.22);
  --border-strong: rgba(169, 211, 242, 0.38);
  --text: #EDF6FC;
  --muted: #A3C0D6;
  --accent: #A9D3F2;
  --accent-strong: #C3E2FB;
  --accent-soft: rgba(169, 211, 242, 0.16);
  --accent-ink: #091724;
  --gold: #E5B260;
  --gold-soft: rgba(229, 178, 96, 0.18);
  --gold-ink: #F8D89C;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.38);
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.52);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.68);
}

[data-mode="dark"][data-theme="mint"] {
  --bg: #0C1612;
  --bg-2: #111E19;
  --surface: #162821;
  --surface-2: #1E342B;
  --surface-3: #254237;
  --border: rgba(168, 220, 192, 0.22);
  --border-strong: rgba(168, 220, 192, 0.38);
  --text: #EDFAF2;
  --muted: #9FCAB4;
  --accent: #A8DCC0;
  --accent-strong: #C3F0D8;
  --accent-soft: rgba(168, 220, 192, 0.16);
  --accent-ink: #081B13;
  --gold: #E5B260;
  --gold-soft: rgba(229, 178, 96, 0.18);
  --gold-ink: #F8D89C;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.38);
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.52);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.68);
}

[data-mode="dark"][data-theme="butter"] {
  --bg: #16130D;
  --bg-2: #1F1A12;
  --surface: #272217;
  --surface-2: #342D1E;
  --surface-3: #403724;
  --border: rgba(242, 215, 155, 0.22);
  --border-strong: rgba(242, 215, 155, 0.38);
  --text: #FCF7EE;
  --muted: #D2BF9D;
  --accent: #F2D79B;
  --accent-strong: #FCE8BD;
  --accent-soft: rgba(242, 215, 155, 0.16);
  --accent-ink: #1F1706;
  --gold: #E5B260;
  --gold-soft: rgba(229, 178, 96, 0.18);
  --gold-ink: #F8D89C;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.38);
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.52);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.68);
}

/* ---------- base ---------- */
* { -webkit-tap-highlight-color: transparent; }
input, textarea { -webkit-user-select: text; user-select: text; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui, 'Readex Pro', system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
.hidden { display: none !important; }
::selection { background: var(--accent-soft); color: var(--text); }

.bloom-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('assets/bloom.png');
  background-size: cover;
  background-position: center;
  opacity: 0.28;
}

/* ============================================================
   THEME-SPECIFIC ARTISTIC MOTIFS (BACKGROUNDS & TEXTURES)
   - Rose: Girly pink Mecca/Kaaba silhouettes, pink hearts & cherry blossom flowers
   - Sky: Oceanic rolling waves, sea droplets and marine contours
   - Lavender: Lavender stems, herbal floral sprigs and calming wreaths
   - Mint: Botanical lush forest foliage, palm leaves and nature dew
   - Butter: Warm desert sand dunes, golden sun rays and desert palms
   ============================================================ */
.theme-motif-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.16;
  background-repeat: repeat;
  background-size: 140px 140px;
  transition: opacity 0.3s ease;
}

[data-mode="dark"] .theme-motif-overlay {
  opacity: 0.08;
}

/* 1. Rose Girly Theme: Mecca / Kaaba + Pink Hearts + Pink Blossoms */
[data-theme="rose"] .theme-motif-overlay {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140' fill='none'%3E%3C!-- Kaaba outline --%3E%3Cpath d='M25 50 L45 38 L65 50 L45 62 Z' fill='%23B8557F' fill-opacity='0.16' stroke='%23B8557F' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M25 50 L25 76 L45 88 L45 62 Z' fill='%23B8557F' fill-opacity='0.25' stroke='%23B8557F' stroke-width='1.2'/%3E%3Cpath d='M45 62 L45 88 L65 76 L65 50 Z' fill='%23B8557F' fill-opacity='0.35' stroke='%23B8557F' stroke-width='1.2'/%3E%3Cpath d='M25 57 L45 69 L65 57' stroke='%23D48BA8' stroke-width='1.2'/%3E%3C!-- Pink Heart --%3E%3Cpath d='M105 28 C105 24 100 20 95 24 C90 20 85 24 85 28 C85 36 95 44 95 44 C95 44 105 36 105 28 Z' fill='%23F4AFCB' stroke='%23B8557F' stroke-width='1.2'/%3E%3C!-- Blossom Flowers --%3E%3Ccircle cx='105' cy='105' r='4' fill='%23F4AFCB'/%3E%3Ccircle cx='105' cy='95' r='3.5' fill='%23FCE1EE'/%3E%3Ccircle cx='115' cy='105' r='3.5' fill='%23FCE1EE'/%3E%3Ccircle cx='105' cy='115' r='3.5' fill='%23FCE1EE'/%3E%3Ccircle cx='95' cy='105' r='3.5' fill='%23FCE1EE'/%3E%3Ccircle cx='105' cy='105' r='2' fill='%23B8557F'/%3E%3C!-- Small heart --%3E%3Cpath d='M35 115 C35 112 31 109 27 112 C23 109 19 112 19 115 C19 121 27 127 27 127 C27 127 35 121 35 115 Z' fill='%23F4AFCB' fill-opacity='0.6'/%3E%3C/svg%3E");
}

/* 2. Sky Pastel Theme: Ocean waves, sea ripples, maritime calm */
[data-theme="sky"] .theme-motif-overlay {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140' fill='none'%3E%3Cpath d='M0 35 C20 25 40 45 60 35 C80 25 100 45 120 35 C130 30 135 32 140 35' stroke='%232F6E9E' stroke-width='1.5' stroke-linecap='round' stroke-dasharray='1 4'/%3E%3Cpath d='M0 45 C20 35 40 55 60 45 C80 35 100 55 120 45 C130 40 135 42 140 45' stroke='%232F6E9E' stroke-width='1.6' stroke-linecap='round'/%3E%3C!-- Wave Crest --%3E%3Cpath d='M70 95 C85 85 95 80 100 90 C102 94 98 100 92 98 C86 96 82 92 84 86' stroke='%232F6E9E' stroke-width='1.4' stroke-linecap='round'/%3E%3C!-- Water drops --%3E%3Cpath d='M30 90 C30 96 25 100 25 100 C25 100 20 96 20 90 C20 86 25 80 25 80 C25 80 30 86 30 90 Z' fill='%23A9D3F2' stroke='%232F6E9E' stroke-width='1.1'/%3E%3Cpath d='M115 115 C115 119 111 122 111 122 C111 122 107 119 107 115 C107 112 111 108 111 108 C111 108 115 112 115 115 Z' fill='%23A9D3F2' stroke='%232F6E9E' stroke-width='1'/%3E%3C/svg%3E");
}

/* 3. Lavender Theme: Lavender herbal sprigs, floral buds */
[data-theme="lavender"] .theme-motif-overlay {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140' fill='none'%3E%3C!-- Lavender stem 1 --%3E%3Cpath d='M35 115 Q38 75 42 35' stroke='%236A4FBE' stroke-width='1.3' stroke-linecap='round'/%3E%3Cellipse cx='38' cy='40' rx='3.5' ry='5' transform='rotate(-20 38 40)' fill='%23C6B6F2' stroke='%236A4FBE' stroke-width='1'/%3E%3Cellipse cx='46' cy='42' rx='3.5' ry='5' transform='rotate(25 46 42)' fill='%23C6B6F2' stroke='%236A4FBE' stroke-width='1'/%3E%3Cellipse cx='37' cy='52' rx='3.5' ry='5.5' transform='rotate(-25 37 52)' fill='%23C6B6F2' stroke='%236A4FBE' stroke-width='1'/%3E%3Cellipse cx='46' cy='55' rx='3.5' ry='5.5' transform='rotate(20 46 55)' fill='%23C6B6F2' stroke='%236A4FBE' stroke-width='1'/%3E%3Cellipse cx='39' cy='65' rx='3.5' ry='6' transform='rotate(-20 39 65)' fill='%23C6B6F2' stroke='%236A4FBE' stroke-width='1'/%3E%3Cellipse cx='47' cy='68' rx='3.5' ry='6' transform='rotate(25 47 68)' fill='%23C6B6F2' stroke='%236A4FBE' stroke-width='1'/%3E%3C!-- Lavender sprig 2 --%3E%3Cpath d='M105 125 Q100 95 95 65' stroke='%236A4FBE' stroke-width='1.2' stroke-linecap='round'/%3E%3Cellipse cx='93' cy='70' rx='3' ry='5' transform='rotate(-25 93 70)' fill='%23C6B6F2'/%3E%3Cellipse cx='99' cy='73' rx='3' ry='5' transform='rotate(20 99 73)' fill='%23C6B6F2'/%3E%3Cellipse cx='94' cy='82' rx='3' ry='5' transform='rotate(-25 94 82)' fill='%23C6B6F2'/%3E%3Cellipse cx='101' cy='85' rx='3' ry='5' transform='rotate(20 101 85)' fill='%23C6B6F2'/%3E%3C/svg%3E");
}

/* 4. Mint Theme: Natural botanicals, lush leaves & foliage */
[data-theme="mint"] .theme-motif-overlay {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140' fill='none'%3E%3C!-- Leaf Branch --%3E%3Cpath d='M30 110 C50 90 70 60 75 30' stroke='%232A7C5C' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M75 30 C70 38 62 40 60 38 C58 35 60 28 75 30 Z' fill='%23A8DCC0' stroke='%232A7C5C' stroke-width='1'/%3E%3Cpath d='M68 45 C60 48 54 46 53 42 C52 38 56 34 68 45 Z' fill='%23A8DCC0' stroke='%232A7C5C' stroke-width='1'/%3E%3Cpath d='M71 50 C76 56 82 56 84 53 C85 50 81 44 71 50 Z' fill='%23A8DCC0' stroke='%232A7C5C' stroke-width='1'/%3E%3Cpath d='M58 66 C49 70 43 67 42 63 C41 59 47 55 58 66 Z' fill='%23A8DCC0' stroke='%232A7C5C' stroke-width='1'/%3E%3Cpath d='M60 72 C66 79 73 79 76 75 C78 71 72 65 60 72 Z' fill='%23A8DCC0' stroke='%232A7C5C' stroke-width='1'/%3E%3C!-- Tropical Monstera Leaf Motif --%3E%3Cpath d='M110 95 C115 85 125 80 130 85 C132 95 120 110 105 112 C108 104 110 98 110 95 Z' fill='%23A8DCC0' stroke='%232A7C5C' stroke-width='1'/%3E%3C/svg%3E");
}

/* 5. Butter/Honey Theme: Desert sand dunes, warm sun rays, desert palms */
[data-theme="butter"] .theme-motif-overlay {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140' fill='none'%3E%3C!-- Rolling Desert Dunes --%3E%3Cpath d='M0 65 Q35 45 70 70 T140 70' stroke='%238F6A18' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M0 80 Q45 60 90 85 T140 85' stroke='%238F6A18' stroke-width='1.5' stroke-linecap='round' fill='%23F2D79B' fill-opacity='0.18'/%3E%3Cpath d='M0 100 Q40 82 85 105 T140 105' stroke='%238F6A18' stroke-width='1.2' stroke-linecap='round'/%3E%3C!-- Golden Sun --%3E%3Ccircle cx='105' cy='35' r='12' fill='%23F2D79B' stroke='%238F6A18' stroke-width='1.2'/%3E%3Cpath d='M105 17 L105 12 M105 53 L105 58 M87 35 L82 35 M123 35 L128 35 M92 22 L88 18 M118 48 L122 52 M92 48 L88 52 M118 22 L122 18' stroke='%238F6A18' stroke-width='1.1' stroke-linecap='round'/%3E%3C!-- Desert Palm silhouette --%3E%3Cpath d='M35 125 Q32 105 28 85' stroke='%238F6A18' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M28 85 Q16 80 10 88 M28 85 Q22 72 16 76 M28 85 Q30 70 38 74 M28 85 Q40 80 44 88' stroke='%238F6A18' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.shell {
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: 30rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* ---------- header ---------- */
.app-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.65rem 0.875rem 0.55rem;
}
.avatar-btn {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: linear-gradient(140deg, var(--accent), var(--accent-soft));
  color: var(--accent-strong);
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease;
}
.avatar-btn:active { transform: scale(0.94); }
.greeting {
  font-family: var(--font-ui, 'Readex Pro', system-ui, sans-serif);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  letter-spacing: 0;
}
.greeting-sub {
  font-family: var(--font-ui, 'Readex Pro', system-ui, sans-serif);
  font-size: 0.68rem;
  letter-spacing: 0;
  color: var(--muted);
  font-weight: 500;
}
.icon-btn {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--accent-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, background 0.2s ease;
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:active { transform: scale(0.93); background: var(--accent-soft); }

@media (max-width: 370px) {
  .app-header { padding: 0.5rem 0.65rem; }
  .icon-btn { width: 35px; height: 35px; }
  .icon-btn svg { width: 16px; height: 16px; }
}

/* ---------- views ---------- */
.views {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.25rem 0.875rem 1.25rem;
  -webkit-overflow-scrolling: touch;
}
.view { animation: fadeUp 0.28s ease-out; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.section-head { margin: 0.5rem 0 0.5rem; }
.section-title {
  font-family: var(--font-ui, 'Readex Pro', system-ui, sans-serif);
  font-size: 1.14rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
  letter-spacing: 0;
}
.section-sub {
  font-family: var(--font-ui, 'Readex Pro', system-ui, sans-serif);
  font-size: 0.82rem;
  letter-spacing: 0;
  color: var(--muted);
  font-weight: 600;
  line-height: 1.35;
}

/* ---------- cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 1.05rem;
  box-shadow: var(--shadow-sm);
  color: var(--text);
}
.card-hero {
  background: linear-gradient(150deg, var(--surface), var(--accent-soft) 120%);
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}
.card-inner {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 0.85rem;
  color: var(--text);
}
.card-title {
  font-family: var(--font-ui, 'Readex Pro', system-ui, sans-serif);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--text);
  line-height: 1.45;
  letter-spacing: 0;
}
.meta { font-family: var(--font-ui, inherit); font-size: 0.72rem; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.pill {
  display: inline-block;
  font-family: var(--font-ui, 'Readex Pro', system-ui, sans-serif);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
}
.pill-gold {
  background: var(--gold-soft);
  color: var(--gold-ink);
  border: 1px solid rgba(170, 130, 60, 0.28);
}
.pill-soft {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border: 1px solid var(--border);
}
.arabic-line {
  font-family: var(--font-arabic);
  font-size: calc(1.75rem * var(--arabic-size-mult));
  font-weight: 600;
  color: var(--text);
  line-height: 2.3;
  margin-top: 0.5rem;
  text-align: right;
  word-spacing: 0.12em;
  letter-spacing: 0.015em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
.arabic-line-sm {
  font-family: var(--font-arabic);
  font-size: calc(1.32rem * var(--arabic-size-mult));
  font-weight: 600;
  color: var(--text);
  line-height: 2.35;
  margin-top: 0.45rem;
  text-align: right;
  word-spacing: 0.12em;
  letter-spacing: 0.015em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
.arabic-block {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  padding: 0.95rem 1.15rem;
  margin-top: 0.6rem;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.02);
  position: relative;
}

/* Warm illustration badge for every invocation */
.invocation-badge {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-3));
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex: 0 0 auto;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease;
}
.invocation-badge:active { transform: scale(0.92); }

/* ---------- ISLAMIC DREAM INTERPRETATION (SKY MOTIFS) ---------- */
.dream-sky-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, var(--surface), var(--accent-soft) 85%);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
}
.dream-sky-card::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background-image: radial-gradient(circle at 88% 22%, rgba(255,255,255,0.85) 0%, transparent 40%),
                    radial-gradient(circle at 15% 75%, var(--accent-soft) 0%, transparent 45%);
  pointer-events: none;
}
.dream-clouds-decor {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.25rem;
}
.dream-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent-strong);
}

.dream-type-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 0.85rem;
  transition: transform 0.15s ease;
}
.dream-type-badge {
  font-size: 0.64rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}

.dream-symbol-card {
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0.95rem 1.05rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.dream-symbol-card:active { transform: scale(0.98); }
.dream-symbol-card:hover { border-color: var(--accent-strong); }
.dream-symbol-icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex: 0 0 auto;
}

/* Quick Name Edit Trigger in Header */
.name-edit-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
  transition: background 0.15s ease;
}
.name-edit-badge:active { background: var(--accent-soft); }
.name-edit-icon { font-size: 0.68rem; opacity: 0.75; }
.arabic-block .arabic-line-sm {
  margin-top: 0;
  line-height: 2.25;
}

/* Specific styling for 2nd (Phonetics) and 3rd (English) layers */
.translit-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0.65rem 0.85rem;
  margin-top: 0.55rem;
  text-align: right;
}
.meaning-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0.65rem 0.85rem;
  margin-top: 0.55rem;
  text-align: right;
}
.sub-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 0.25rem;
}
.translit-box .translit {
  text-align: left;
  direction: ltr;
  font-size: 0.84rem;
  line-height: 1.55;
  margin-top: 0.2rem;
}
.meaning-box .meaning {
  text-align: left;
  direction: ltr;
  font-size: 0.82rem;
  line-height: 1.6;
  margin-top: 0.2rem;
}

/* ---------- source badge & hadith ref ---------- */
.source-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--gold-ink);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
}
.source-tag svg { width: 12px; height: 12px; }

/* ---------- mood-based supplications ---------- */
.mood-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.45rem;
}
@media (min-width: 480px) {
  .mood-grid { grid-template-columns: repeat(3, 1fr); }
}
.mood-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0.5rem 0.75rem;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: transform 0.14s ease, border-color 0.2s ease, background 0.2s ease;
  text-align: right;
}
.mood-btn:active { transform: scale(0.96); }
.mood-btn.active {
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-3));
  border-color: var(--accent-strong);
  color: var(--accent-strong);
  box-shadow: 0 4px 14px rgba(184, 85, 127, 0.18);
}
.mood-emoji {
  font-size: 1.2rem;
  line-height: 1;
  flex: 0 0 auto;
}
.mood-text-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.mood-label {
  font-family: var(--font-ui, 'Readex Pro', system-ui, sans-serif);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--text);
}
.mood-sublabel {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.1;
  margin-top: 1px;
}
.mood-btn.active .mood-label {
  color: var(--accent-strong);
}
.mood-btn.active .mood-sublabel {
  color: var(--accent-strong);
  opacity: 0.85;
}

.mood-banner {
  background: linear-gradient(145deg, var(--surface), var(--accent-soft));
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  padding: 0.85rem 1rem;
  box-shadow: var(--shadow-sm);
}
.arabic-small {
  font-family: 'Amiri', serif;
  font-size: 1.1rem;
  color: var(--accent-strong);
  text-align: right;
  margin-top: 0.2rem;
}
.translit {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 0.88rem;
  color: var(--accent-strong);
  font-weight: 600;
  margin-top: 0.15rem;
}
.meaning { font-size: 0.8rem; color: var(--muted); margin-top: 0.15rem; line-height: 1.6; }
.virtue {
  margin-top: 0.75rem;
  padding: 0.7rem 0.8rem;
  border-radius: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 0.72rem;
  line-height: 1.65;
  color: var(--muted);
}
.virtue b { display: block; color: var(--gold-ink); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.15rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  font-family: var(--font-ui, 'Readex Pro', system-ui, sans-serif);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: transform 0.14s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.btn svg { width: 17px; height: 17px; }
.btn:active { transform: scale(0.96); }
.btn-primary {
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  color: var(--accent-ink);
  border-color: transparent;
  box-shadow: var(--shadow);
}
.btn-soft { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--border); }
.btn-ghost { background: var(--surface); color: var(--muted); border-color: var(--border); }
.btn-danger { background: var(--surface); color: #B4544F; border-color: rgba(196, 96, 92, 0.4); }
.btn-icon { width: 44px; min-width: 44px; padding: 0; border-radius: 999px; }
.link-btn {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-danger { color: #B4544F; }

/* ---------- target row ---------- */
.target-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  margin: 0.75rem 0 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 0.35rem;
  box-shadow: var(--shadow-sm);
}
.target-btn {
  min-height: 54px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: var(--muted);
  transition: transform 0.15s ease, background 0.2s ease;
}
.target-btn:active { transform: scale(0.95); }
.t-num { font-family: 'Playfair Display', Georgia, serif; font-size: 1rem; font-weight: 700; }
.t-lbl { font-size: 0.56rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; }
.target-btn.active {
  background: linear-gradient(140deg, var(--accent-soft), var(--surface-3));
  border: 1px solid var(--border-strong);
  color: var(--accent-strong);
}
.target-btn.active .t-num { color: var(--accent-strong); }
.target-btn.active .t-lbl { color: var(--gold-ink); }

/* ---------- dial ---------- */
.dial-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 0 2rem;
}
.dial-glow {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 68%);
  filter: blur(14px);
  pointer-events: none;
}
.dial-glow.halo-active { animation: halo 1.8s ease-in-out infinite; }
@keyframes halo {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
.dial {
  position: relative;
  width: 280px;
  height: 280px;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.12s ease;
}
.dial:active { transform: scale(0.985); }
.dial-pulse { animation: beadPulse 0.16s ease-out; }
@keyframes beadPulse {
  0% { transform: scale(1); }
  45% { transform: scale(0.975); }
  100% { transform: scale(1); }
}
.dial-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring-track { fill: none; stroke: var(--surface-3); stroke-width: 11; }
.ring-halo { fill: none; stroke: var(--border); stroke-width: 2; opacity: 0.55; }
.ring-progress {
  fill: none;
  stroke-width: 11;
  stroke-linecap: round;
  stroke-dasharray: 791.68;
  stroke-dashoffset: 791.68;
  transform: rotate(-90deg);
  transform-origin: 140px 140px;
  transition: stroke-dashoffset 0.18s ease-out;
}
.dial-disc {
  position: relative;
  width: 216px;
  height: 216px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 22%, #FFFFFF 0%, var(--surface-2) 62%, var(--surface-3) 100%);
  border: 1px solid var(--border-strong);
  box-shadow: inset 0 2px 10px rgba(255, 255, 255, 0.9), inset 0 -6px 18px rgba(190, 140, 165, 0.14), var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
}
[data-mode="dark"] .dial-disc {
  background: radial-gradient(circle at 50% 22%, var(--surface-2) 0%, var(--surface) 64%, var(--bg-2) 100%);
  box-shadow: inset 0 2px 10px rgba(255, 255, 255, 0.08), inset 0 -6px 20px rgba(0, 0, 0, 0.6), var(--shadow);
}
[data-mode="dark"] .bloom-layer {
  opacity: 0.12;
  mix-blend-mode: screen;
}
[data-mode="dark"] .sheet,
[data-mode="dark"] .modal {
  background: rgba(0, 0, 0, 0.66);
}
[data-mode="dark"] .card-hero {
  background: linear-gradient(150deg, var(--surface), var(--surface-2) 120%);
}
[data-mode="dark"] .dial-bead {
  box-shadow: 0 0 0 2px var(--surface), 0 3px 12px rgba(0, 0, 0, 0.55);
}
.dial-cycle {
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.dial-cycle b { color: var(--accent-strong); font-size: 0.72rem; }
.dial-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 3.9rem;
  line-height: 1;
  font-weight: 700;
  color: var(--text);
}
.dial-arabic {
  font-family: var(--font-arabic);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--accent-strong);
  opacity: 0.9;
}
.dial-target {
  margin-top: 0.3rem;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.dial-target b { color: var(--accent-strong); }
#remaining-label { letter-spacing: 0; text-transform: none; font-weight: 600; }
.dial-hint {
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.75;
  margin-top: 0.25rem;
}
.dial-bead {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #FFFFFF, var(--accent-strong) 78%);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 3px 8px rgba(120, 70, 95, 0.22);
  transition: transform 0.14s ease-out;
}
.milestone {
  position: absolute;
  bottom: 0.35rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  max-width: 94%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--gold-soft), var(--surface));
  color: var(--gold-ink);
  border: 1px solid rgba(170, 130, 60, 0.35);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.7rem;
  font-weight: 700;
  box-shadow: var(--shadow);
  animation: pop 0.3s ease-out;
}
.milestone span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
@keyframes pop {
  from { opacity: 0; transform: translateX(-50%) scale(0.92); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* ---------- summary strip ---------- */
.summary-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0.7rem 1rem;
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.summary-strip b { color: var(--accent-strong); font-size: 0.92rem; }
.dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---------- chips ---------- */
.chip-scroll {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
  scrollbar-width: none;
}
.chip-scroll::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-family: var(--font-ui, 'Readex Pro', system-ui, sans-serif);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0;
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--border);
  transition: transform 0.14s ease, background 0.2s ease, color 0.2s ease;
}
.chip:active { transform: scale(0.95); }
.chip.active {
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-3));
  color: var(--accent-strong);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.chip-wrap { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.85rem; }

/* ---------- rows / grids ---------- */
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.progress-track {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
  border: 1px solid var(--border);
}
.progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  transition: width 0.35s ease;
}
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.stat-cell {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 0.6rem 0.3rem;
  text-align: center;
}
.stat-cell b {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  color: var(--accent-strong);
}
.stat-cell span { font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }

/* ---------- goal / dua cards ---------- */
.goal-card, .dua-card { position: relative; }
.goal-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.goal-emoji {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex: 0 0 auto;
}
.goal-card.done .goal-emoji { background: var(--gold-soft); border-color: rgba(170, 130, 60, 0.3); }
.star {
  font-size: 1.3rem;
  line-height: 1;
  color: var(--border-strong);
  padding: 0.35rem;
  transition: transform 0.15s ease, color 0.2s ease;
}
.star.on { color: var(--gold); }
.star:active { transform: scale(0.85); }
.empty-state {
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
  padding: 1.6rem 1rem;
  border: 1px dashed var(--border-strong);
  border-radius: 22px;
  background: var(--surface-2);
}

/* ---------- segmented ---------- */
.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0.3rem;
}
.seg-btn {
  min-height: 42px;
  border-radius: 15px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  transition: transform 0.14s ease, background 0.2s ease;
}
.seg-btn:active { transform: scale(0.95); }
.seg-btn.active { background: var(--surface); color: var(--accent-strong); box-shadow: var(--shadow-sm); border: 1px solid var(--border); }

/* ---------- theme swatches ---------- */
.theme-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4rem; }
.swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-height: 60px;
  border-radius: 16px;
  padding: 0.4rem 0.1rem;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: transform 0.14s ease, border-color 0.2s ease;
}
.swatch:active { transform: scale(0.94); }
.swatch-dot {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid #FFFFFF;
  box-shadow: 0 1px 5px rgba(120, 80, 100, 0.28);
}
.swatch-name { font-size: 0.5rem; letter-spacing: 0.03em; text-transform: uppercase; font-weight: 700; color: var(--muted); text-align: center; line-height: 1.15; }
.swatch.active { border-color: var(--accent-strong); background: var(--accent-soft); box-shadow: var(--shadow-sm); }
.swatch.active .swatch-name { color: var(--accent-strong); }

/* ---------- routine selector & guided flow ---------- */
.routine-selector-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0.35rem;
  box-shadow: var(--shadow-sm);
}
.routine-tab {
  min-height: 46px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-family: var(--font-ui, 'Readex Pro', system-ui, sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
  transition: transform 0.14s ease, background 0.2s ease, color 0.2s ease;
  position: relative;
}
.routine-tab:active { transform: scale(0.95); }
.routine-tab.active {
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-3));
  color: var(--accent-strong);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.routine-tab-icon { font-size: 1rem; line-height: 1; }
.routine-tab-badge {
  font-size: 0.62rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--gold-ink);
  font-weight: 700;
}
.routine-tab.active .routine-tab-badge {
  background: var(--gold-soft);
  color: var(--gold-ink);
  border-color: rgba(170, 130, 60, 0.3);
}

.routine-banner {
  background: linear-gradient(135deg, var(--surface-2), var(--accent-soft));
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  padding: 0.75rem 0.85rem;
  box-shadow: var(--shadow-sm);
  animation: slideDown 0.25s ease-out;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
.routine-step-text {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.btn-compact {
  min-height: 34px;
  height: 34px;
  padding: 0 0.55rem;
  font-size: 0.7rem;
}
.btn-compact.btn-icon {
  width: 34px;
  min-width: 34px;
  padding: 0;
}
.btn-compact svg { width: 15px; height: 15px; }
.btn-exit-routine {
  font-size: 0.68rem;
  padding: 0 0.55rem;
  border-radius: 999px;
  color: var(--muted);
}
.routine-track {
  height: 7px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
  border: 1px solid var(--border);
}
.routine-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  transition: width 0.3s ease-out;
}

/* Quick Routine Launch Cards in Adhkar tab */
.routine-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
.routine-quick-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.85rem;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  text-align: left;
  transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}
.routine-quick-card:active { transform: scale(0.97); }
.routine-quick-card:hover { border-color: var(--accent-strong); }
.rq-icon {
  font-size: 1.4rem;
  line-height: 1;
  flex: 0 0 auto;
}
.rq-info { flex: 1 1 auto; min-width: 0; }
.rq-title {
  font-family: var(--font-ui, 'Readex Pro', system-ui, sans-serif);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  letter-spacing: 0;
}
.rq-sub {
  font-family: var(--font-ui, inherit);
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.3;
  margin-top: 0.15rem;
}
.rq-badge {
  flex: 0 0 auto;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  border: 1px solid var(--border);
}

/* ---------- fields ---------- */
.field-label {
  display: block;
  margin: 0.9rem 0 0.35rem;
  font-family: var(--font-ui, 'Readex Pro', system-ui, sans-serif);
  font-size: 0.76rem;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--muted);
}
.field {
  width: 100%;
  min-height: 46px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0.6rem 0.85rem;
  font-size: 0.88rem;
  font-family: inherit;
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field::placeholder { color: var(--muted); opacity: 0.75; }
.field:focus-visible, .field:focus {
  outline: none;
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field-area { resize: vertical; line-height: 1.6; }
.field-time { width: 8.5rem; text-align: center; }

/* ---------- switch ---------- */
.switch {
  width: 52px;
  height: 30px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  position: relative;
  flex: 0 0 auto;
  transition: background 0.22s ease;
}
.switch span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 2px 6px rgba(120, 80, 100, 0.25);
  transition: transform 0.22s ease;
}
.switch[aria-checked="true"] { background: linear-gradient(135deg, var(--accent), var(--accent-strong)); }
.switch[aria-checked="true"] span { transform: translateX(22px); }

/* ---------- tabbar (6 TABS INCLUDING DREAMS CLOUD) ---------- */
.tabbar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.1rem;
  padding: 0.35rem 0.35rem 0.5rem;
  background: rgba(255, 255, 255, 0.88);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
[data-mode="dark"] .tabbar {
  background: rgba(30, 20, 32, 0.9);
  border-top-color: var(--border);
}
[data-mode="dark"][data-theme="lavender"] .tabbar { background: rgba(25, 20, 42, 0.9); }
[data-mode="dark"][data-theme="sky"] .tabbar { background: rgba(20, 28, 42, 0.9); }
[data-mode="dark"][data-theme="mint"] .tabbar { background: rgba(18, 30, 26, 0.9); }
[data-mode="dark"][data-theme="butter"] .tabbar { background: rgba(32, 26, 18, 0.9); }
[data-theme="butter"]:not([data-mode="dark"]) .tabbar { background: rgba(255, 251, 242, 0.88); }
.tab {
  min-height: 54px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: var(--muted);
  font-family: var(--font-ui, 'Readex Pro', system-ui, sans-serif);
  letter-spacing: 0;
  transition: background 0.2s ease, color 0.2s ease, transform 0.14s ease;
}
.tab svg { width: 20px; height: 20px; }
.tab .tab-ar {
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.25;
}
.tab .tab-en {
  font-size: 0.52rem;
  font-weight: 500;
  opacity: 0.8;
  line-height: 1;
}
.tab:active { transform: scale(0.94); }
.tab.active { background: var(--accent-soft); color: var(--accent-strong); }
.tab.active .tab-ar { color: var(--accent-strong); }
.tab.active .tab-en { color: var(--accent-strong); opacity: 1; }

/* ---------- sheets & modals ---------- */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(96, 62, 80, 0.28);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: fade 0.2s ease-out;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.sheet-panel {
  width: 100%;
  max-width: 30rem;
  max-height: 90%;
  overflow-y: auto;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 28px 28px 0 0;
  padding: 1rem 1rem 1.5rem;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes slideUp { from { transform: translateY(22px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.sheet-title {
  font-family: var(--font-ui, 'Readex Pro', system-ui, sans-serif);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  letter-spacing: 0;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(96, 62, 80, 0.3);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.modal-card {
  width: 100%;
  max-width: 22.5rem;
  max-height: 88%;
  overflow-y: auto;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 1.25rem;
  box-shadow: var(--shadow-lg);
  animation: popIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes popIn { from { transform: scale(0.94); opacity: 0.5; } to { transform: none; opacity: 1; } }
.modal-title {
  font-family: var(--font-ui, 'Readex Pro', system-ui, sans-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  letter-spacing: 0;
  margin: 0.5rem 0 0.2rem;
}
.modal-badge {
  width: 54px;
  height: 54px;
  margin: 0 auto;
  border-radius: 999px;
  background: linear-gradient(140deg, var(--accent-soft), var(--surface-3));
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: var(--shadow-sm);
}
.onboard-badge { font-size: 1.4rem; }

/* ---------- profile ---------- */
.profile-hero {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(150deg, var(--surface-2), var(--accent-soft));
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 0.85rem;
}
.profile-avatar {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: linear-gradient(140deg, var(--accent), var(--surface));
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent-strong);
  box-shadow: var(--shadow-sm);
}

/* ---------- history ---------- */
.history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0.55rem 0.75rem;
}
.history-row .hr-name { font-size: 0.78rem; font-weight: 700; color: var(--text); }
.history-row .hr-time { font-size: 0.62rem; color: var(--muted); font-weight: 600; }
.history-row .hr-count {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
}

/* ---------- zen ---------- */
.zen {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem;
  background: linear-gradient(160deg, var(--bg-2), var(--surface) 55%, var(--bg-2));
  color: var(--text);
}
.zen-tap {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  cursor: pointer;
  touch-action: manipulation;
}
.zen-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 6rem;
  line-height: 1;
  font-weight: 700;
  color: var(--accent-strong);
  text-shadow: 0 6px 24px var(--accent-soft);
}

/* ---------- typography options for beginners ---------- */
.font-options-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.font-opt-card {
  width: 100%;
  text-align: right;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 0.75rem 0.95rem;
  transition: transform 0.14s ease, border-color 0.2s ease, background 0.2s ease;
}
.font-opt-card:active { transform: scale(0.98); }
.font-opt-card.active {
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-3));
  border-color: var(--accent-strong);
  box-shadow: var(--shadow-sm);
}
.font-opt-name {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text);
}
.font-opt-card.active .font-opt-name {
  color: var(--accent-strong);
}

.font-size-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  height: 28px;
  padding: 0 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--accent-strong);
  transition: transform 0.12s ease, background 0.15s ease;
}
.font-size-btn:active { transform: scale(0.92); background: var(--accent-soft); }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 5.5rem;
  transform: translate(-50%, 10px);
  z-index: 80;
  max-width: 88vw;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- responsive ---------- */
@media (min-width: 640px) {
  .sheet { align-items: center; }
  .sheet-panel { border-radius: 28px; border-bottom: 1px solid var(--border); max-height: 86%; }
}

@media (max-width: 360px) {
  .dial { width: 264px; height: 264px; }
  .dial-disc { width: 200px; height: 200px; }
  .dial-num { font-size: 3.4rem; }
  .tab span { font-size: 0.52rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- scrollbar ---------- */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }

/* ============================================================
   EASY READ — Arabic made friendlier for beginner readers
   ============================================================ */
[data-easy="on"] .arabic-line { font-size: calc(1.85rem * var(--arabic-size-mult)); line-height: 2.45; word-spacing: 0.14em; }
[data-easy="on"] .arabic-line-sm { font-size: calc(1.38rem * var(--arabic-size-mult)); line-height: 2.45; word-spacing: 0.14em; }
.easy-phrase {
  display: inline-block;
  margin: 0.12em 0.18em;
  padding: 0.08em 0.42em;
  border-radius: 12px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  line-height: 2.25;
}
.easy-note {
  margin-top: 0.6rem;
  padding: 0.65rem 0.85rem;
  border-radius: 16px;
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  font-size: 0.82rem;
  line-height: 1.85;
  color: var(--text);
}
.easy-note b {
  display: block;
  color: var(--accent-strong);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}
.icon-btn.active {
  background: var(--accent-soft);
  border-color: var(--accent-strong);
  color: var(--accent-strong);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* ============================================================
   DAILY STREAKS
   ============================================================ */
.streak-card .streak-flame { font-size: 1.5rem; line-height: 1; flex: 0 0 auto; }
.streak-count { text-align: center; flex: 0 0 auto; }
.streak-count b {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--accent-strong);
}
.streak-count span { font-size: 0.58rem; font-weight: 700; color: var(--muted); }
.streak-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.3rem; margin-top: 0.7rem; }
.streak-day {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
  padding: 0.3rem 0;
  text-align: center;
}
.streak-day .sd-num { display: block; font-size: 0.64rem; font-weight: 700; color: var(--muted); }
.streak-day .sd-mark { display: block; font-size: 0.72rem; font-weight: 700; color: var(--border-strong); }
.streak-day.on { background: linear-gradient(140deg, var(--accent-soft), var(--surface-3)); border-color: var(--border-strong); }
.streak-day.on .sd-mark { color: var(--accent-strong); }
.streak-day.today { box-shadow: 0 0 0 2px var(--accent-soft); }

/* ============================================================
   PRAYER TIMES
   ============================================================ */
.prayer-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border-radius: 18px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.prayer-row.next {
  border-color: var(--accent-strong);
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-2));
  box-shadow: var(--shadow-sm);
}
.pr-icon { font-size: 1.15rem; line-height: 1; flex: 0 0 auto; }
.pr-info { flex: 1 1 auto; min-width: 0; }
.pr-name { font-size: 0.84rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.pr-time {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-strong);
  flex: 0 0 auto;
}
.pr-bell {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.14s ease, background 0.2s ease, color 0.2s ease;
}
.pr-bell:active { transform: scale(0.92); }
.pr-bell svg { width: 17px; height: 17px; }
.pr-bell.on { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--border-strong); }
.next-prayer-bar {
  background: linear-gradient(135deg, var(--gold-soft), var(--surface));
  border: 1px solid rgba(170, 130, 60, 0.3);
  border-radius: 18px;
  padding: 0.6rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold-ink);
  line-height: 1.5;
}
.next-prayer-bar b { color: var(--accent-strong); }
select.field { appearance: none; -webkit-appearance: none; padding-inline-end: 2rem; background-image: none; }

/* ============================================================
   DREAM INTERPRETATION BY AI
   ============================================================ */
.dream-ai-card { border-color: var(--border-strong); }
.dream-cost {
  font-size: 0.66rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.dream-ai-result {
  margin-top: 0.7rem;
  border-radius: 18px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 0.85rem;
  color: var(--text);
}
.dream-ai-text {
  white-space: pre-wrap;
  font-size: 0.85rem;
  line-height: 1.9;
  color: var(--text);
  text-align: start;
}
#dream-ai-status { line-height: 1.7; }
#dream-ai-status .btn { margin-top: 0.4rem; }