/* Direction 4 — Contemporary Sulūk (light mode, first pass) */
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }

:root {
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  /* Live Arabic reading font (lib/app/widgets/suluk_arabic_text.dart: sulukArabicReadingFontFamily) */
  --ar-font: 'UthmanicHafs', 'KFGQPCUthmanTahaNaskh', serif;
  --bg: #F3F5F4; --card: #FFFFFF; --ink: #121A24; --ink2: #44505E; --muted: #85909B; --line: #E9EDEC; --track: #ECEFEF;
  --shadow: 0 1px 2px rgba(20,26,38,.04), 0 8px 24px -14px rgba(20,26,38,.16);
  --shadow-lg: 0 2px 4px rgba(20,26,38,.04), 0 18px 40px -20px rgba(20,26,38,.28);
  --r: 22px;
  /* area accents */
  --em: #0F8A69;   --em-t: #E4F3EC;   --em-d: #0A6A51;
  --ind: #4F5AD3;  --ind-t: #ECEDFC;  --ind-d: #3942AE;
  --amb: #D2860C;  --amb-t: #FCF0DC;  --amb-d: #A66808;
  --sky: #2A84C4;  --sky-t: #E5F0F9;  --sky-d: #1E679E;
  --coral: #E0654A; --coral-t: #FCEAE5; --coral-d: #B84A32;
  --rose: #C64E6E; --rose-t: #FAE7ED; --rose-d: #A13A57;
  --vio: #7A5BC2;  --vio-t: #EFEAFA;  --vio-d: #5E43A3;
  --inkc: #1C2434; --ink-t: #EDEFF3;  --ink-d: #0F1520;
  --hero1: #0F2740; --hero2: #1B4366; --sun: #F4C76A;
  --gold: #A8822F; --gold-t: #F6EEDA; --gold-d: #7D5F1E;
  --on-ink: #FFFFFF; --segbg: #E6EAE9; --chkb: #D6D8DE; --chev: #B5B9C3; --navbg: rgba(255,255,255,.92); --tagbg: #FFFFFF;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0A1116; --card: #111B22; --ink: #EAF0F2; --ink2: #B4C0C7; --muted: #7F8E98; --line: #1D2A33; --track: #20303A;
  --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 12px 28px -18px rgba(0,0,0,.9);
  --shadow-lg: 0 18px 40px -20px rgba(0,0,0,.9);
  --em: #33BE8E;   --em-t: rgba(51,190,142,.14);  --em-d: #7BE0B9;
  --ind: #8088F4;  --ind-t: rgba(128,136,244,.16); --ind-d: #B4B9FF;
  --amb: #EFA23A;  --amb-t: rgba(239,162,58,.15);  --amb-d: #FFCB7E;
  --sky: #4EA6E6;  --sky-t: rgba(78,166,230,.15);  --sky-d: #95CDF6;
  --coral: #F07A5F; --coral-t: rgba(240,122,95,.15); --coral-d: #FFB19D;
  --rose: #E36E8E; --rose-t: rgba(227,110,142,.15); --rose-d: #FFA9BF;
  --vio: #A48AEA;  --vio-t: rgba(164,138,234,.16); --vio-d: #CDBBFF;
  --inkc: #EAF0F2; --ink-t: rgba(255,255,255,.07); --ink-d: #FFFFFF;
  --hero1: #04141C; --hero2: #0D2B40; --sun: #F4C76A;
  --gold: #D4B46C; --gold-t: rgba(212,180,108,.14); --gold-d: #EBD49A;
  --on-ink: #0A1116; --segbg: #18242C; --chkb: #33434E; --chev: #4F606B; --navbg: rgba(17,27,34,.92); --tagbg: #FFFFFF;
  /* contained feature surfaces: deep blue-green → navy */
  --feat1: #0B2530; --feat2: #0F2C44;
  --zl-k: 1;
  color-scheme: dark;
}
/* Classical keeps the live Classical identity: deep navy + antique gold (suluk_theme.dart) */
:root[data-theme="classical"] {
  --bg: #18192B; --card: #22233A; --ink: #F5EDDD; --ink2: #D7CDB7; --muted: #ABA18C; --line: #32334C; --track: #33345A;
  --shadow: 0 1px 0 rgba(255,236,210,.04) inset, 0 12px 28px -18px rgba(5,4,12,.85);
  --shadow-lg: 0 18px 40px -20px rgba(5,4,12,.9);
  --em: #5FAE8E;   --em-t: rgba(95,174,142,.15);  --em-d: #9AD8BE;
  --ind: #98A1EA;  --ind-t: rgba(152,161,234,.15); --ind-d: #C3C9FF;
  --amb: #DDA75E;  --amb-t: rgba(221,167,94,.15);  --amb-d: #F1CB93;
  --sky: #78B0D4;  --sky-t: rgba(120,176,212,.15); --sky-d: #AED2EA;
  --coral: #D7805F; --coral-t: rgba(215,128,95,.16); --coral-d: #F2B59C;
  --rose: #D88C9F; --rose-t: rgba(216,140,159,.15); --rose-d: #F3BCCA;
  --vio: #B7A0E3;  --vio-t: rgba(183,160,227,.16); --vio-d: #DACBFF;
  /* primary actions in warm terracotta rather than heavy gold */
  --inkc: #CF7656; --ink-t: rgba(207,118,86,.14); --ink-d: #F1B59C;
  --hero1: #16172C; --hero2: #33243A; --sun: #E9B979;
  --gold: #C9A66C; --gold-t: rgba(201,166,108,.14); --gold-d: #E8CF9E;
  --on-ink: #FFF6EC; --segbg: #2B2C47; --chkb: #44466A; --chev: #6E6C8A; --navbg: rgba(34,35,58,.94); --tagbg: #FFF6EC;
  --feat1: #1E1B33; --feat2: #3A2638;
  --zl-k: 1.3;
  color-scheme: dark;
}
:root[lang="ar"] { --font: -apple-system, system-ui, 'Plus Jakarta Sans', sans-serif; } /* live UI uses the platform font */

/* tone utilities: set --acc / --tint / --deep */
.em, .t-em, .c-em, .g-em, .b-em { --acc: var(--em); --tint: var(--em-t); --deep: var(--em-d); }
.ind, .t-ind, .c-ind, .g-ind, .b-ind { --acc: var(--ind); --tint: var(--ind-t); --deep: var(--ind-d); }
.amb, .t-amb, .c-amb, .g-amb, .b-amb { --acc: var(--amb); --tint: var(--amb-t); --deep: var(--amb-d); }
.sky, .t-sky, .c-sky, .g-sky, .b-sky { --acc: var(--sky); --tint: var(--sky-t); --deep: var(--sky-d); }
.coral, .t-coral, .c-coral, .g-coral, .b-coral { --acc: var(--coral); --tint: var(--coral-t); --deep: var(--coral-d); }
.rose, .t-rose, .c-rose, .g-rose, .b-rose { --acc: var(--rose); --tint: var(--rose-t); --deep: var(--rose-d); }
.vio, .t-vio, .c-vio, .g-vio, .b-vio { --acc: var(--vio); --tint: var(--vio-t); --deep: var(--vio-d); }
.ink, .t-ink, .c-ink, .g-ink, .b-ink { --acc: var(--inkc); --tint: var(--ink-t); --deep: var(--ink-d); }
.gold, .t-gold, .c-gold, .g-gold, .b-gold { --acc: var(--gold); --tint: var(--gold-t); --deep: var(--gold-d); }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
@font-face { font-family: 'UthmanicHafs'; src: url('../shared/fonts/UthmanicHafs1Ver18.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'KFGQPCUthmanTahaNaskh'; src: url('../shared/fonts/KFGQPC-Uthman-Taha-Naskh-Regular.ttf') format('truetype'); font-display: swap; }
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15px; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
input { font: inherit; color: inherit; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:root[dir="rtl"] .chev:not(.rot) .ic { transform: scaleX(-1); }
.ar { font-family: var(--ar-font); font-weight: 400; color: var(--muted); font-size: 17px; line-height: 1.2; white-space: nowrap; }
.sub { color: var(--muted); font-size: 13px; line-height: 1.4; }
.muted { color: var(--muted); font-weight: 600; }
.eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--acc, var(--muted)); }
:root[lang="ar"] .eyebrow { letter-spacing: 0; font-size: 12px; }

/* ---------- shell ---------- */
.app { position: relative; height: 100vh; height: 100dvh; max-width: 440px; margin: 0 auto; overflow: hidden; background: var(--bg); }
html.still .app { margin: 0 auto; width: 390px; max-width: none; }
.statusbar { position: absolute; inset: 0 0 auto; height: 50px; padding: 15px 26px 0; display: flex; justify-content: space-between; font: 600 15px/1 -apple-system, system-ui, sans-serif; z-index: 7; color: var(--ink); background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); direction: ltr; transition: background .3s, color .3s; }
.app[data-tab="home"]:not(.scrolled):not(.subview) .statusbar { background: transparent; color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
.app.scrolled .statusbar { box-shadow: 0 1px 0 var(--line); }
.sb-r { display: flex; gap: 3px; align-items: flex-end; }
.sb-r i { width: 3px; background: currentColor; border-radius: 1px; height: 6px; } .sb-r i:nth-child(2) { height: 8px; } .sb-r i:nth-child(3) { height: 10px; }
.sb-r b { width: 22px; height: 11px; border: 1.5px solid currentColor; border-radius: 3px; margin-inline-start: 5px; position: relative; } .sb-r b::after { content: ''; position: absolute; inset: 1.5px 5px 1.5px 1.5px; background: currentColor; border-radius: 1px; }
.scroller { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; padding: 56px 16px 110px; scrollbar-width: none; }
.scroller::-webkit-scrollbar { display: none; }
.app[data-tab="home"] .scroller { padding-top: 0; }
.page { display: flex; flex-direction: column; gap: 12px; }
.page-enter > * { animation: enter .5s cubic-bezier(.2,.8,.2,1) both; }
.page-enter > *:nth-child(2) { animation-delay: .04s } .page-enter > *:nth-child(3) { animation-delay: .08s } .page-enter > *:nth-child(4) { animation-delay: .12s } .page-enter > *:nth-child(n+5) { animation-delay: .16s }
@keyframes enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.press { transition: transform .35s cubic-bezier(.3,1.4,.4,1), box-shadow .3s, background-color .25s; -webkit-tap-highlight-color: transparent; }
.press:active { transform: scale(.975); transition-duration: .1s; }

/* ---------- headers ---------- */
.hd { padding: 6px 4px 4px; }
.hd-t { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hd h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
:root[lang="ar"] .hd h1 { letter-spacing: 0; line-height: 1.5; }
.hd p { margin: 4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.sh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 4px 0; width: calc(100% - 8px); }
.sh h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; flex: 1; }
.sh .sub { font-size: 12.5px; }
.lnk { font-size: 13px; font-weight: 700; color: var(--ind); }
.ibtn { position: relative; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--card); box-shadow: var(--shadow); flex: none; color: var(--ink); }
.dotbadge { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--coral); color: #fff; font: 800 10.5px/18px var(--font); font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--card); }
.count { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 800; background: var(--tint); color: var(--deep); }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 8px; background: var(--tint); color: var(--deep); font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.badge .ic { width: 13px; height: 13px; stroke-width: 2.2; }
.pill { padding: 7px 13px; border-radius: 999px; background: var(--tint); color: var(--deep); font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.pill.light { background: rgba(255,255,255,.95); color: var(--deep); }
.tag { display: inline-flex; padding: 4px 9px; border-radius: 8px; font-size: 11px; font-weight: 800; background: var(--tagbg); color: var(--deep); }

/* ---------- cards & primitives ---------- */
.card { position: relative; background: var(--card); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow); }
button.card { width: 100%; }
.tile { width: 40px; height: 40px; flex: none; border-radius: 13px; display: grid; place-items: center; background: var(--tint); color: var(--acc); }
.tile .ic { width: 20px; height: 20px; }
.chev { color: var(--chev); display: inline-flex; } .chev .ic { width: 18px; height: 18px; stroke-width: 2.2; }
.chev.rot .ic { transform: rotate(90deg); transition: transform .4s cubic-bezier(.3,1.3,.4,1); }
.open .chev.rot .ic { transform: rotate(-90deg); }
.tx { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; text-align: start; }
.tx > b, .t-line b { font-weight: 700; font-size: 15.5px; line-height: 1.3; letter-spacing: -.005em; }
.t-line { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 20px; border-radius: 16px; font-weight: 800; font-size: 15px; }
.btn.block { width: 100%; }
.btn.primary { background: var(--inkc); color: var(--on-ink); box-shadow: 0 10px 22px -12px rgba(20,26,38,.6); }
.btn.primary.sky { background: var(--sky); box-shadow: 0 10px 22px -12px var(--sky); }
.btn.secondary { background: var(--ink-t); color: var(--ink); height: 46px; }
.bar { height: 6px; border-radius: 6px; background: var(--track); overflow: hidden; transition: --p 1.3s cubic-bezier(.3,.8,.2,1); }
.bar i { display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: inherit; background: var(--acc, var(--inkc)); }
.bar.thin { height: 4px; margin-top: 8px; }
.ring { position: relative; display: inline-grid; place-items: center; flex: none; transition: --p 1.4s cubic-bezier(.3,.8,.2,1); }
.ring > svg { position: absolute; inset: 0; transform: rotate(-90deg); }
:root[dir="rtl"] .ring > svg { transform: rotate(-90deg) scaleY(-1); }
.r-bg { fill: none; stroke: var(--tint, var(--track)); }
.r-fg { fill: none; stroke: var(--acc); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p) * 100); }
.r-in { position: relative; text-align: center; line-height: 1; }
.r-in b { font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.r-in b em { font-style: normal; font-size: .62em; color: var(--muted); }
.r-in .ic { color: var(--acc); width: 18px; height: 18px; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 22px 16px; }
.empty b { font-size: 16px; }
.note { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.note .ic { width: 16px; height: 16px; color: var(--em); }
.list { padding: 4px 16px; }
.li { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 0; border-top: 1px solid var(--line); }
.li:first-child { border-top: 0; }
.udot { width: 8px; height: 8px; border-radius: 50%; background: var(--track); flex: none; }
.udot.on { background: var(--coral); box-shadow: 0 0 0 4px var(--coral-t); }
.star { position: relative; width: 38px; height: 38px; flex: none; display: grid; place-items: center; }
.star svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.star polygon { fill: var(--tint); stroke: color-mix(in srgb, var(--acc) 45%, transparent); stroke-width: 1; }
.star em { position: relative; font-style: normal; font-weight: 800; font-size: 12px; color: var(--deep); }
.star.sm { width: 26px; height: 26px; } .star.sm polygon { fill: var(--acc); stroke: none; } .star.sm .ic { width: 12px; height: 12px; color: #fff; stroke-width: 2.6; }
.star.tiny { width: 14px; height: 14px; --tint: var(--amb-t); --acc: var(--amb); }

/* ---------- home hero ---------- */
.hero { position: relative; margin: 0 -16px; padding: 58px 20px 0; color: #fff; background: radial-gradient(120% 70% at 85% 30%, rgba(244,199,106,.22), transparent 55%), linear-gradient(170deg, var(--hero1) 0%, var(--hero2) 100%); overflow: hidden; }
.hero-top { position: relative; display: flex; align-items: center; gap: 12px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 17px; color: #fff; background: linear-gradient(135deg, #2A84C4, #4F5AD3); box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.avatar.sm { width: 40px; height: 40px; font-size: 15px; box-shadow: none; background: linear-gradient(135deg, var(--vio), var(--ind)); }
.avatar.lg { width: 60px; height: 60px; font-size: 23px; box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--em-t); }
.greet { flex: 1; display: flex; flex-direction: column; }
.greet small { font-size: 12.5px; opacity: .75; font-weight: 600; }
.greet b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.hero .ibtn { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.hero .dotbadge { box-shadow: 0 0 0 2px var(--hero1); }
.hijri { position: relative; text-align: center; margin-top: 22px; }
.hijri b { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
:root[lang="ar"] .hijri b { letter-spacing: 0; }
.hijri span { font-size: 13px; opacity: .72; font-weight: 600; }
.gauge { position: relative; width: 268px; margin: 8px auto 0; }
.gauge svg { width: 100%; display: block; overflow: visible; }
.gauge line { stroke: rgba(255,255,255,.22); stroke-width: 2; stroke-linecap: round; }
.gauge line.on { stroke: var(--sun); animation: tick .5s calc(var(--k) * 12ms) both; }
.still .gauge line.on { animation: none; }
@keyframes tick { from { stroke: rgba(255,255,255,.22); } }
.g-arc { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 1; stroke-dasharray: 2 5; }
.g-sun { fill: var(--sun); filter: drop-shadow(0 0 6px var(--sun)); }
.g-sun-halo { fill: rgba(244,199,106,.22); animation: halo 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.still .g-sun-halo { animation: none; }
@keyframes halo { 50% { transform: scale(1.35); opacity: .5; } }
.g-mid { position: absolute; inset: auto 0 6px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.g-mid small { font-size: 11.5px; opacity: .7; font-weight: 700; }
.g-mid b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.g-mid span { font-size: 11.5px; opacity: .7; font-weight: 600; }
.g-ends { display: flex; justify-content: space-between; margin: 6px -14px 0; font-size: 13px; font-weight: 800; }
.g-ends span { display: flex; flex-direction: column; align-items: center; }
.g-ends small { font-size: 10.5px; opacity: .6; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
:root[dir="rtl"] .gauge svg { transform: scaleX(-1); }
.skyline { display: block; width: calc(100% + 40px); height: 62px; margin: 4px -20px 0; fill: rgba(255,255,255,.06); }
.sheet { position: relative; margin: -30px -16px 0; padding: 16px 16px 0; background: var(--bg); border-radius: 28px 28px 0 0; display: flex; flex-direction: column; gap: 12px; }

/* journey */
.journey { padding: 18px; }
.j-row { display: flex; gap: 16px; align-items: center; }
.j-row .r-in b { font-size: 21px; }
.j-tx { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.j-tx > b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.stats3 { display: grid; grid-template-columns: repeat(3, 1fr); margin: 16px 0; border-radius: 16px; background: var(--bg); }
.stats3 > div { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.stats3 > div + div { border-inline-start: 1px solid var(--line); }
.stats3 small { color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.2; }
.stats3 b { font-size: 18px; font-weight: 800; } .stats3 b em { font-style: normal; color: var(--muted); font-size: 13px; }
.next { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.next .tx > b { font-size: 17px; }
.next .bar { margin-top: 8px; height: 5px; }
.shortcuts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sc { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 12px; background: var(--card); border-radius: 20px; box-shadow: var(--shadow); text-align: start; min-height: 124px; }
.sc b { font-size: 13px; font-weight: 800; line-height: 1.25; margin-top: auto; }
.sc small { font-size: 11px; color: var(--muted); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ring.mini { width: 40px !important; height: 40px !important; }
.compass { position: relative; border-radius: 50%; }
.compass i { position: absolute; left: 50%; top: 50%; width: 3px; height: 24px; margin: -12px 0 0 -1.5px; border-radius: 2px; background: linear-gradient(var(--sky) 50%, color-mix(in srgb, var(--sky) 30%, var(--card)) 50%); transform: rotate(118deg); animation: needle 1.6s cubic-bezier(.3,1.6,.4,1) both; }
.still .compass i { animation: none; }
@keyframes needle { from { transform: rotate(40deg); } }
.feat { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.feat-art { position: relative; height: 112px; display: grid; place-items: center; color: #fff; background: radial-gradient(90% 120% at 90% 0%, rgba(255,255,255,.28), transparent 60%), linear-gradient(135deg, #E0654A, #C64E6E); }
.feat-art .ic { width: 38px; height: 38px; stroke-width: 1.5; position: relative; }
.feat-art .tag { position: absolute; top: 12px; inset-inline-start: 12px; --deep: var(--coral-d); }
.feat .tx { padding: 14px 16px 16px; }
.feat .tx > b { font-size: 16.5px; }
.row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }

/* ---------- tasks ---------- */
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.day { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 0 9px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); }
.day small { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.day b { font-size: 16px; font-weight: 800; }
.day i { width: 18px; height: 4px; border-radius: 2px; margin-top: 3px; background: linear-gradient(90deg, var(--em) calc(var(--v) * 100%), var(--track) 0); }
.day.on { background: var(--inkc); color: var(--on-ink); box-shadow: 0 10px 22px -12px rgba(20,26,38,.7); }
.day.on small { color: var(--on-ink); opacity: .6; }
.day.on i { background: linear-gradient(90deg, #5ED3AE calc(var(--v) * 100%), rgba(255,255,255,.2) 0); }
.seg { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); padding: 4px; border-radius: 14px; background: var(--segbg); }
.seg .thumb { position: absolute; top: 4px; bottom: 4px; width: calc((100% - 8px) / var(--n)); inset-inline-start: calc(4px + var(--i) * (100% - 8px) / var(--n)); border-radius: 11px; background: var(--card); box-shadow: 0 2px 8px -2px rgba(20,26,38,.18); transition: inset-inline-start .45s cubic-bezier(.3,1.25,.4,1); }
.seg button { position: relative; z-index: 1; height: 38px; text-align: center; font-weight: 700; font-size: 14px; color: var(--muted); transition: color .25s; }
.seg button.on { color: var(--ink); }
.summary { padding: 18px; }
.em-wash { background: linear-gradient(135deg, color-mix(in srgb, var(--em) 8%, var(--card)), var(--card) 60%); }
.sky-wash { background: linear-gradient(135deg, color-mix(in srgb, var(--sky) 8%, var(--card)), var(--card) 60%); }
.sum-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.sum-top .big { display: block; font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin-top: 2px; }
.sum-r { text-align: end; display: flex; flex-direction: column; }
.sum-r b { font-size: 18px; font-weight: 800; }
.segbar { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 4px; margin-top: 14px; }
.segbar i { height: 8px; border-radius: 4px; background: var(--track); transition: background .5s; }
.segbar i.done { background: var(--em); }
.segbar i.progress { background: linear-gradient(90deg, var(--em) 50%, color-mix(in srgb, var(--em) 30%, var(--card)) 50%); }
.tasks-list { padding: 2px 16px; }
.task { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.task:first-child { border-top: 0; }
.task .tile { margin-top: 1px; }
.task .tx > .sub { margin-top: 1px; }
.task.done .t-line b { color: var(--muted); }
.task.done .tile { filter: grayscale(.4); opacity: .75; }
.hit { flex: none; padding: 5px 0 0; }
.chk { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--chkb); transition: background .3s, border-color .3s; }
.chk.done { background: var(--em); border-color: var(--em); color: #fff; }
.chk.done .ic { width: 17px; height: 17px; stroke-width: 2.8; }
.task.just-done .chk.done { animation: pop .55s cubic-bezier(.3,1.8,.4,1); }
.task.just-done .chk.done .ic { animation: draw .4s .1s ease-out both; stroke-dasharray: 24; }
@keyframes pop { 0% { transform: scale(.5); } 100% { transform: none; } }
@keyframes draw { from { stroke-dashoffset: 24; } }
.chk-ring .r-bg { stroke: var(--track); }
.cnt { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.cnt .bar { flex: 1; }
.num { font-size: 12px; font-weight: 700; color: var(--ink2); white-space: nowrap; }
.step { padding: 6px 11px; border-radius: 10px; background: var(--em-t); color: var(--em-d); font-weight: 800; font-size: 12.5px; white-space: nowrap; }
.step.lg { padding: 9px 13px; background: var(--tint); color: var(--deep); align-self: center; }
.acc { padding: 0; }
.acc-h { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; }
.acc-h > b { flex: 1; font-weight: 700; font-size: 15.5px; }
.frac { font-size: 12.5px; font-weight: 800; padding: 4px 9px; border-radius: 8px; background: var(--track); color: var(--ink2); }
.frac.full { background: var(--em-t); color: var(--em-d); }
.acc-b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.3,1,.4,1); }
.acc-b > div { overflow: hidden; }
.acc.open .acc-b { grid-template-rows: 1fr; }
.card.acc .acc-b > div { padding: 0 16px; }
.card.acc.open .acc-b > div { padding-bottom: 4px; }
.qada .q-top, .sched .q-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.qada .tx > b { font-size: 20px; font-weight: 800; }
.qada .pct { font-size: 15px; font-weight: 800; }
.qada .bar { height: 8px; }
.review { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; }
.callout { display: flex; flex-direction: column; gap: 2px; padding: 11px 13px; border-radius: 14px; background: var(--tint); font-size: 13.5px; line-height: 1.45; }
.callout b { font-size: 11.5px; font-weight: 800; color: var(--deep); text-transform: uppercase; letter-spacing: .05em; }
:root[lang="ar"] .callout b { text-transform: none; letter-spacing: 0; }
.review .lnk { align-self: flex-start; margin-top: 2px; }
.heat { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.heat i { aspect-ratio: 1; border-radius: 6px; background: color-mix(in srgb, var(--em) calc(var(--v) * 100%), var(--track)); animation: enter .4s calc(var(--d) * 12ms) both; }
.heat i.today { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--em); }
.still .heat i { animation: none; }
.legend { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.scale { display: flex; gap: 3px; } .scale i { width: 12px; height: 12px; border-radius: 3px; background: color-mix(in srgb, var(--em) calc(var(--v) * 100%), var(--track)); }
.fard-h { display: flex; gap: 12px; align-items: center; }
.steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 14px; }
.steps i { height: 8px; border-radius: 4px; background: var(--track); }
.steps i.on { background: var(--vio); }
.once { display: flex; align-items: center; gap: 14px; }
.once .r-in b { font-size: 16px; }
.once .tx > b { font-size: 16px; }
.o-num { display: flex; align-items: baseline; gap: 5px; margin-top: 6px; }
.o-num b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }

/* ---------- awraad ---------- */
.hscroll { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 10px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }
button.card.bm { flex: none; width: 224px; display: flex; flex-direction: column; gap: 3px; scroll-snap-align: start; text-align: start; background: linear-gradient(160deg, var(--tint), var(--card) 70%); }
.bm > b { font-size: 17px; font-weight: 800; margin-top: 4px; }
.bm-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.bm-foot .bar { flex: 1; }
.playbtn { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--acc); color: #fff; flex: none; }
.playbtn .ic { width: 14px; height: 14px; fill: currentColor; stroke-width: 1.5; margin-inline-start: 2px; }
.chips { display: flex; gap: 8px; overflow-x: auto; margin: 4px -16px 0; padding: 2px 16px 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 13px; background: var(--card); box-shadow: var(--shadow); font-weight: 700; font-size: 13.5px; color: var(--ink2); transition: background .3s, color .3s; }
.chip .ic { width: 17px; height: 17px; }
.chip.on { background: var(--acc); color: #fff; box-shadow: 0 8px 18px -10px var(--acc); }
.search { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border-radius: 15px; background: var(--card); box-shadow: var(--shadow); color: var(--muted); }
.search input { flex: 1; border: 0; outline: 0; background: none; font-size: 15px; color: var(--ink); }
.search input::placeholder { color: var(--muted); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { display: flex; flex-direction: column; gap: 6px; text-align: start; --acc: var(--amb); --tint: var(--amb-t); --deep: var(--amb-d); }
.stat .big { font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.khatms { display: flex; gap: 4px; }
.stat-row { display: flex; align-items: center; gap: 10px; }
.stat-row b { display: block; font-size: 15px; font-weight: 800; }
.stat-row .r-in b { font-size: 13px; }
button.card.fav { flex: none; width: 140px; display: flex; flex-direction: column; gap: 2px; scroll-snap-align: start; text-align: start; padding: 14px; --acc: var(--amb); --tint: var(--amb-t); --deep: var(--amb-d); }
.fav-ar { font-family: var(--ar-font); font-weight: 400; font-size: 32px; line-height: 1.3; color: var(--deep); text-align: end; padding: 8px 10px; margin-bottom: 8px; border-radius: 14px; background: var(--tint); }
.fav > b { font-size: 15px; font-weight: 800; }
.fav .sub { font-size: 11.5px; }
.s-ar { font-family: var(--ar-font); font-weight: 400; font-size: 22px; color: var(--ink); white-space: nowrap; }
.s-ar.sm { font-size: 18px; color: var(--muted); font-weight: 400; }
.juzgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.juzgrid button { aspect-ratio: 1; border-radius: 12px; background: var(--bg); font-weight: 800; font-size: 13px; text-align: center; color: var(--ink2); }
.juzgrid .done { background: var(--amb-t); color: var(--amb-d); }
.juzgrid .cur { background: var(--amb); color: #fff; box-shadow: 0 8px 16px -8px var(--amb); }
.hero-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; padding: 20px; color: #fff; text-align: start; background: linear-gradient(140deg, var(--acc), var(--deep)); box-shadow: 0 18px 34px -18px var(--acc); }
.hc-lattice { position: absolute; inset: 0; background: #fff; opacity: .08; -webkit-mask: var(--lattice) 0 0 / 56px 56px repeat; mask: var(--lattice) 0 0 / 56px 56px repeat; pointer-events: none; }
.hc-ar { position: relative; font-family: var(--ar-font); font-weight: 400; font-size: 34px; line-height: 1.6; text-align: end; }
.hero-card > b { position: relative; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.hc-sub { position: relative; font-size: 13.5px; opacity: .82; }
.hc-foot { position: relative; display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.hero-card .res { background: rgba(255,255,255,.16); color: #fff; }
.res-row { display: flex; gap: 6px; margin-top: 6px; }
.hc-foot .res-row { margin: 0; }
.res { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 8px; background: var(--tint); color: var(--deep); font-size: 11.5px; font-weight: 800; }
.res .ic { width: 13px; height: 13px; stroke-width: 2.2; }
.lit { align-items: flex-start; }
.lit .s-ar { padding-top: 2px; }

/* ---------- reflections ---------- */
.summary .tx { gap: 6px; }
.summary .tx > b { font-size: 15px; }
.sky-wash .sum-top { align-items: center; justify-content: flex-start; }
.dist { display: flex; gap: 3px; height: 8px; margin-top: 4px; }
.dist i { border-radius: 4px; transition: flex .7s cubic-bezier(.3,.8,.2,1); }
.d-completed { background: var(--em); } .d-workingTowards { background: var(--amb); } .d-needsAttention { background: var(--rose); } .d-none { background: var(--track); }
.keys { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; font-weight: 600; color: var(--ink2); }
.keys span { display: inline-flex; align-items: center; gap: 5px; }
.keys i { width: 8px; height: 8px; border-radius: 50%; }
.q { padding: 14px 16px 16px; transition: box-shadow .4s; }
.q-h { display: flex; gap: 12px; align-items: flex-start; }
.q .tx .sub { margin-top: 2px; }
.opts { display: grid; grid-template-columns: 1fr 1.7fr 1fr; gap: 6px; margin-top: 14px; }
.opt { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 40px; padding: 0 6px; border-radius: 12px; background: var(--bg); font-weight: 700; font-size: 12.5px; white-space: nowrap; color: var(--ink2); transition: background .3s, color .3s, box-shadow .3s; }
.opt .ic { width: 15px; height: 15px; stroke-width: 2.6; }
.opt.on.o-completed { background: var(--em); color: #fff; box-shadow: 0 8px 16px -10px var(--em); }
.opt.on.o-workingTowards { background: var(--amb); color: #fff; box-shadow: 0 8px 16px -10px var(--amb); }
.opt.on.o-needsAttention { background: var(--rose); color: #fff; box-shadow: 0 8px 16px -10px var(--rose); }
.q.ans .tile { background: var(--em-t); color: var(--em); }
.q.a-workingTowards .tile { background: var(--amb-t); color: var(--amb); }
.q.a-needsAttention .tile { background: var(--rose-t); color: var(--rose); }
.cols { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; }
.cols > div { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cols .v { font-size: 10px; font-weight: 700; color: var(--muted); height: 12px; }
.col { width: 100%; max-width: 30px; height: 96px; border-radius: 10px; background: var(--track); position: relative; overflow: hidden; transition: --p 1.3s cubic-bezier(.3,.8,.2,1); }
.col i { position: absolute; inset: auto 0 0; height: calc(var(--p) * 100%); border-radius: 10px; background: color-mix(in srgb, var(--sky) 45%, var(--card)); }
.cols .today .col i { background: var(--sky); }
.cols small { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.cols .today small { color: var(--sky-d); }
.add { display: inline-flex; align-items: center; gap: 4px; padding: 6px 11px; border-radius: 10px; background: var(--sky-t); color: var(--sky-d); font-weight: 800; font-size: 12.5px; }
.add .ic { width: 15px; height: 15px; stroke-width: 2.4; }
.journal { display: flex; flex-direction: column; gap: 4px; text-align: start; }
.j-top { display: flex; justify-content: space-between; align-items: center; --acc: var(--sky); }
.lockchip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--muted); }
.lockchip .ic { width: 12px; height: 12px; }
.journal > b { font-size: 16.5px; font-weight: 800; margin-top: 4px; }
.journal p { margin: 0; color: var(--ink2); font-size: 13.5px; line-height: 1.5; }
.intent { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: var(--sky-t); }
.intent .ic { width: 16px; height: 16px; color: var(--sky); margin-top: 2px; }
.intent small { display: block; font-size: 11px; font-weight: 800; color: var(--sky-d); }
.intent span { font-size: 13px; font-weight: 600; }

/* ---------- more ---------- */
.profile { display: flex; align-items: center; gap: 14px; padding: 16px; text-align: start; }
.profile .tx > b { font-size: 19px; font-weight: 800; }
.profile .badge { align-self: flex-start; margin-top: 6px; }
.grp .sh { margin-bottom: 8px; }
.grp .sh h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 800; }
:root[lang="ar"] .grp .sh h2 { text-transform: none; letter-spacing: 0; font-size: 14px; }
.grp .tile { width: 36px; height: 36px; border-radius: 11px; }
.grp .tile .ic { width: 18px; height: 18px; }
.grp .tx > b { font-size: 15px; }
.grp .sub { font-size: 12.5px; }
.val { font-size: 13px; color: var(--muted); font-weight: 600; }
.logout { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px; color: var(--rose); font-weight: 800; margin-top: 8px; }
.foot { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 0; color: var(--muted); font-size: 12px; font-weight: 600; }

/* ---------- nav ---------- */
.nav { position: absolute; inset: auto 0 0; z-index: 6; display: grid; grid-template-columns: repeat(5, 1fr); height: 86px; padding: 8px 6px 24px; background: var(--navbg); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: 0 -1px 0 var(--line), 0 -10px 30px -20px rgba(20,26,38,.25); }
.nav-it { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #9AA0AD; }
.nav-it.a-ink { --acc: var(--inkc); --tint: var(--ink-t); }
.nav-it.a-em { --acc: var(--em); --tint: var(--em-t); }
.nav-it.a-ind { --acc: var(--ind); --tint: var(--ind-t); }
.nav-it.a-sky { --acc: var(--sky); --tint: var(--sky-t); }
.nv-pill { position: relative; width: 58px; height: 32px; border-radius: 16px; display: grid; place-items: center; }
.nv-pill::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--tint); transform: scaleX(.4); opacity: 0; transition: transform .45s cubic-bezier(.3,1.4,.4,1), opacity .25s; }
.nv-pill .ic { position: relative; width: 23px; height: 23px; transition: color .25s, transform .45s cubic-bezier(.3,1.6,.4,1); }
.nv-l { font-size: 11px; font-weight: 700; transition: color .25s; }
.nav-it.on { color: var(--acc); }
.nav-it.on .nv-pill::before { transform: none; opacity: 1; }
.nav-it.on .nv-pill .ic { stroke-width: 2.2; transform: scale(1.04); }
.nav-it.on .nv-l { color: var(--ink); font-weight: 800; }

/* ---------- toast ---------- */
.toast { position: absolute; inset-inline: 20px; bottom: 98px; z-index: 9; padding: 12px 16px; border-radius: 16px; background: var(--inkc); color: var(--on-ink); display: flex; flex-direction: column; gap: 2px; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(10px) scale(.97); pointer-events: none; transition: opacity .25s, transform .4s cubic-bezier(.3,1.4,.4,1); }
.toast.show { opacity: 1; transform: none; }
.toast b { font-weight: 800; font-size: 14.5px; } .toast span { font-size: 12px; opacity: .7; }

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

/* =====================================================================
   SUB-SCREENS (readers + More destinations)
   ===================================================================== */
.app.subview .nav { transform: translateY(110%); }
.nav { transition: transform .35s cubic-bezier(.3,.8,.2,1); }
.app.subview .scroller { padding: 116px 16px 120px; }
.app.subview .statusbar { background: color-mix(in srgb, var(--bg) 88%, transparent); color: var(--ink); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.subbar { position: absolute; z-index: 6; top: 50px; inset-inline: 0; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; padding: 6px 16px 10px; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); transition: box-shadow .3s; }
.app.scrolled .subbar { box-shadow: 0 1px 0 var(--line); }
.subbar h1 { margin: 0; text-align: center; font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-back, .sb-act { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--card); box-shadow: var(--shadow); color: var(--ink); }
.sb-back .ic { transform: scaleX(-1); }
:root[dir="rtl"] .sb-back .ic { transform: none; }
.sb-act { color: var(--acc); }
.sb-act.on { background: var(--acc); color: var(--on-ink); }
.sb-act.on .ic { fill: currentColor; }
.sb-sp { width: 42px; }
.subpage, .reader { display: flex; flex-direction: column; gap: 12px; }
.proto-note { margin: 4px 4px 0; font-size: 11.5px; color: var(--muted); text-align: center; font-weight: 600; }
.hc-lattice.soft { opacity: .5; background: var(--acc, var(--gold)); -webkit-mask: var(--lattice) 0 0 / 56px 56px repeat; mask: var(--lattice) 0 0 / 56px 56px repeat; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
:root[data-theme="light"] .hc-lattice.soft { opacity: .07; }
:root[data-theme="dark"] .hc-lattice.soft, :root[data-theme="classical"] .hc-lattice.soft { opacity: .06; }
.ic.up { transform: rotate(-90deg); }
.ibtn.sm { width: 36px; height: 36px; border-radius: 12px; }
.ibtn.on { background: var(--sky); color: #fff; }

/* ---------- readers ---------- */
.r-head, .r-intro { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 22px 18px 18px; background: linear-gradient(160deg, color-mix(in srgb, var(--acc) 10%, var(--card)), var(--card) 70%); }
.r-head .star { margin-bottom: 2px; }
.r-ar { position: relative; margin: 0; font-family: var(--ar-font); font-weight: 400; font-size: 34px; line-height: 1.7; color: var(--ink); }
.r-ar.accent { color: var(--acc); font-size: 30px; line-height: 1.8; }
.r-head .sub { position: relative; font-weight: 600; }
.r-sub { position: relative; margin: 2px 0 0; font-size: 16px; font-weight: 800; letter-spacing: .02em; color: var(--ink); }
.toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); }
.tg { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 40px; border-radius: 12px; font-weight: 700; font-size: 13.5px; color: var(--muted); transition: background .3s, color .3s; }
.tg .ic { width: 15px; height: 15px; stroke-width: 2.6; }
.tg.on { background: var(--tint); color: var(--deep); }
.verse { padding: 16px 18px 18px; cursor: pointer; transition: box-shadow .3s, background .3s; }
.verse.hl { box-shadow: 0 0 0 2px var(--acc), var(--shadow); }
.verse.marked { background: linear-gradient(160deg, color-mix(in srgb, var(--acc) 6%, var(--card)), var(--card) 50%); }
.v-ar { margin: 0; font-family: var(--ar-font); font-size: 28px; line-height: 1.9; text-align: right; color: var(--ink); font-feature-settings: 'rlig', 'mark', 'mkmk'; word-spacing: 1px; }
.v-ar.center { text-align: center; font-size: 29px; line-height: 2.05; }
.ayah { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-inline: 3px; vertical-align: middle; border-radius: 50%; border: 1.5px solid var(--acc); color: var(--acc); font-family: -apple-system, system-ui, sans-serif; font-size: 16px; font-weight: 600; line-height: 1; }
.v-sep { height: 1px; margin: 14px 0 10px; background: color-mix(in srgb, var(--acc) 18%, transparent); }
.v-tr { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.v-en { margin: 12px 0 0; color: var(--ink); font-size: 14.5px; line-height: 1.55; font-weight: 500; }
.v-sep + .v-en { margin-top: 0; }
.v-tr.left, .v-en.left { text-align: left; direction: ltr; font-weight: 600; }
.v-mark { position: absolute; top: 10px; inset-inline-start: 10px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--acc); }
.v-mark.end { inset-inline-start: auto; inset-inline-end: 10px; }
.v-mark .ic { width: 15px; height: 15px; fill: currentColor; }
.bmcard { padding: 12px 16px; }
.bm-h { display: flex; align-items: center; gap: 8px; color: var(--acc); padding-bottom: 6px; }
.bm-h .ic { width: 17px; height: 17px; fill: currentColor; }
.bm-h b { color: var(--ink); font-size: 14.5px; }
.bm-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.bm-row > button:first-child { flex: 1; display: flex; flex-direction: column; text-align: start; }
.bm-row b { font-size: 14px; }
.bm-row .x { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--bg); color: var(--muted); }
.bm-row .x .ic { transform: rotate(45deg); width: 16px; height: 16px; }
.floatbar { position: absolute; z-index: 7; bottom: 26px; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 999px; background: var(--navbg); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); }
.fb { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); }
.fb.on { background: var(--acc, var(--inkc)); color: var(--on-ink); }
.fb.on .ic { fill: currentColor; }
.fb-sep { width: 1px; height: 22px; background: var(--line); }
.app[data-screen="quran-1"] .floatbar { --acc: var(--amb); }
.app[data-screen="burdah-10"] .floatbar { --acc: var(--vio); }

/* ---------- biography ---------- */
.portrait { align-self: center; width: 200px; height: 200px; border-radius: 50%; padding: 5px; background: conic-gradient(from 200deg, var(--gold), color-mix(in srgb, var(--gold) 30%, var(--card)), var(--gold)); box-shadow: var(--shadow-lg); margin: 4px 0 6px; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 50%; display: block; border: 3px solid var(--card); }
.prose { padding: 20px 18px; }
.prose h2 { margin: 0 0 10px; font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; }
.prose p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.65; color: var(--ink2); }
.prose p:last-child { margin: 0; }
:root[lang="ar"] .prose p { font-size: 16px; line-height: 1.9; }

/* ---------- golden silsila ---------- */
.sil-intro, .sil-close { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 22px 18px; --acc: var(--gold); }
.tile.big { width: 56px; height: 56px; border-radius: 19px; }
.tile.big .ic { width: 28px; height: 28px; }
.sil-intro h2 { position: relative; margin: 8px 0 0; font-size: 20px; font-weight: 800; line-height: 1.25; }
.sil-ar { position: relative; margin: 2px 0; font-family: var(--ar-font); font-size: 30px; line-height: 1.8; color: var(--gold); }
.sil-close .sil-ar { font-size: 25px; line-height: 1.85; }
.sil-intro .sub, .sil-close .sub { position: relative; font-size: 14px; }
.chain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; }
.chain li { display: flex; flex-direction: column; align-items: center; width: 100%; }
.chain .node { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); box-shadow: 0 6px 14px -6px var(--gold); }
.chain .node i { width: 9px; height: 9px; border-radius: 50%; background: var(--card); }
.chain .conn { width: 2px; height: 14px; background: color-mix(in srgb, var(--gold) 35%, transparent); }
.chain .link { width: 100%; padding: 18px 16px; text-align: center; }
.sil-entry { margin: 0; font-family: var(--ar-font); font-size: 25px; line-height: 1.6; color: var(--ink); }
.sil-entry .comma { font-family: -apple-system, system-ui, sans-serif; }
.orn { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 16px 28px; }
.orn i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 45%, transparent)); }
.orn i:last-child { transform: scaleX(-1); }
.orn b { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); opacity: .75; }
.orn b.s { width: 3px; height: 3px; opacity: .55; }
.sil-en { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--ink); }

/* ---------- tasbeeh ---------- */
.chips.dh { margin-top: 0; }
.counter { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 18px 18px; --acc: var(--em); --tint: var(--em-t); --deep: var(--em-d); transition: box-shadow .4s; }
.ct-top { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: start; }
.ct-top .tx > b { font-size: 18px; font-weight: 800; }
.ct-badge { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ct-badge > b { font-size: 14px; font-weight: 800; }
.ct-ar { margin: 18px 0 0; font-family: var(--ar-font); font-size: 30px; line-height: 2; color: var(--ink); }
.ct-tr { margin: 4px 0 0; font-size: 14px; line-height: 1.4; color: var(--muted); }
.ct-count { margin-top: 10px; font-size: 92px; font-weight: 800; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--ink); }
.counter.tap .ct-count { animation: bump .25s ease-out; }
.counter.reached .ct-count, .counter.complete .ct-count { color: var(--em); }
.counter.reached { animation: glow 1.1s ease-out; }
@keyframes bump { 40% { transform: scale(1.06); } }
@keyframes glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--em) 50%, transparent), var(--shadow); } 100% { box-shadow: 0 0 0 22px transparent, var(--shadow); } }
.ct-target { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 14px; border-radius: 999px; background: var(--tint); color: var(--deep); font-weight: 800; font-size: 14.5px; }
.ct-target .ic { width: 15px; height: 15px; }
.ct-editor { width: 100%; margin-top: 14px; padding: 14px; border-radius: 18px; background: var(--bg); display: flex; flex-direction: column; gap: 12px; }
.ct-btns { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 10px; width: 100%; margin-top: 20px; }
.cbtn { height: 72px; border-radius: 22px; display: grid; place-items: center; background: var(--bg); color: var(--ink); font-size: 38px; font-weight: 700; line-height: 1; box-shadow: inset 0 0 0 1px var(--line); user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.cbtn .ic { width: 28px; height: 28px; color: var(--em); }
.cbtn.plus { background: var(--em); color: #fff; box-shadow: 0 12px 24px -12px var(--em); font-size: 44px; }
:root[data-theme="dark"] .cbtn.plus, :root[data-theme="classical"] .cbtn.plus { color: var(--on-ink); }
.ct-hint { margin: 10px 0 0; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.field { display: flex; flex-direction: column; gap: 5px; text-align: start; }
.field span { font-size: 12px; font-weight: 700; color: var(--muted); }
.field input { height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 15px; outline: none; }
.field input:focus { border-color: var(--em); box-shadow: 0 0 0 3px var(--em-t); }
.form { display: flex; flex-direction: column; gap: 10px; }
.form h2, .dialog h2 { margin: 0 0 2px; font-size: 17px; font-weight: 800; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.two .btn { height: 44px; }
.btn.primary.em { background: var(--em); color: #fff; box-shadow: 0 10px 22px -12px var(--em); }
.btn.primary.danger { background: var(--rose); color: #fff; box-shadow: 0 10px 22px -12px var(--rose); }
.dialog-scrim { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 24px; background: color-mix(in srgb, var(--ink) 40%, transparent); animation: enter .25s both; }
.dialog { width: 100%; padding: 20px; display: flex; flex-direction: column; gap: 8px; }

/* ---------- qiblah ---------- */
.qb-intro { display: flex; flex-direction: column; gap: 12px; }
.qb-intro .row0 { display: flex; align-items: center; gap: 12px; }
.qb-intro .tx > b { font-size: 17px; }
.guide { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.g-row { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.g-row .ic { width: 18px; height: 18px; color: var(--sky); flex: none; }
.cue { align-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow); font-size: 15px; }
.cue .ic { color: var(--sky); width: 18px; height: 18px; stroke-width: 2.4; }
.cue.ok { background: var(--em); color: #fff; box-shadow: 0 12px 24px -12px var(--em); }
.cue.ok .ic { color: #fff; }
:root[data-theme="dark"] .cue.ok, :root[data-theme="classical"] .cue.ok { color: var(--on-ink); }
.compass-card { display: flex; flex-direction: column; align-items: center; padding: 18px 12px 12px; }
.compass-wrap { position: relative; width: 280px; height: 280px; touch-action: none; cursor: grab; }
.compass-wrap:active { cursor: grabbing; }
.dial { width: 100%; height: 100%; transition: transform .25s ease-out; }
.ring1 { fill: var(--bg); stroke: var(--line); stroke-width: 1.5; }
.ring2 { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.dial line { stroke: var(--muted); stroke-width: 1; opacity: .55; }
.dial line.big { stroke-width: 2; opacity: .9; }
.dial text { fill: var(--muted); font: 800 15px var(--font); text-anchor: middle; }
.dial text.n { fill: var(--coral); }
.qmark { fill: var(--sky); }
.qline { stroke: var(--sky) !important; stroke-width: 3 !important; opacity: .9 !important; stroke-linecap: round; }
.pointer { position: absolute; top: -4px; left: 50%; translate: -50% 0; width: 0; height: 0; border-inline: 9px solid transparent; border-top: 14px solid var(--ink); }
.kabah { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.kabah svg { width: 74px; height: 74px; border-radius: 50%; padding: 14px; background: var(--card); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); transition: box-shadow .4s; }
.k-body { fill: #1B1B1F; } .k-top { fill: none; stroke: #3A3A44; stroke-width: 1.2; } .k-edge { stroke: #3A3A44; stroke-width: 1.2; } .k-band { fill: none; stroke: #D9B86A; stroke-width: 3; }
.compass-card.aligned .kabah svg { box-shadow: 0 0 0 6px color-mix(in srgb, var(--em) 25%, transparent), 0 0 30px color-mix(in srgb, var(--em) 50%, transparent); }
.drag-hint { margin: 10px 0 0; font-size: 11.5px; color: var(--muted); font-weight: 600; text-align: center; }
.readings { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0; }
.readings div { display: flex; flex-direction: column; align-items: center; padding: 14px 6px; }
.readings div + div { border-inline-start: 1px solid var(--line); }
.readings small { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.readings b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }

/* ---------- announcements & calendar ---------- */
.filters { padding: 8px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 12px; background: var(--bg); font-weight: 700; font-size: 13px; color: var(--ink2); }
.fbtn .ic { width: 15px; height: 15px; color: var(--coral); }
.fbtn.on { background: var(--coral-t); color: var(--coral-d); }
.f-opts { padding: 12px 6px 4px; }
.f-opts small { display: block; font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.f-opts > div { display: flex; flex-wrap: wrap; gap: 6px; }
.chip.sm { height: 32px; padding: 0 12px; font-size: 12.5px; box-shadow: none; background: var(--bg); }
.chip.sm.on { background: var(--acc); color: #fff; }
.ann, .occ { display: flex; flex-direction: column; gap: 10px; }
.ann-h { display: flex; gap: 12px; align-items: flex-start; }
.ann-h .tx > b { font-size: 16px; }
.by { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; font-weight: 800; color: var(--muted); }
.by .ic { width: 16px; height: 16px; color: var(--coral); }
.ann-body p { margin: 0 0 6px; font-size: 14px; line-height: 1.55; color: var(--ink2); }
.ann-body p:last-child { margin: 0; }
.venue { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--bg); text-align: start; }
.venue > .ic { width: 18px; height: 18px; color: var(--coral); }
.venue span:not(.chev) { flex: 1; display: flex; flex-direction: column; }
.venue b { font-size: 13.5px; } .venue small { font-size: 12px; color: var(--muted); }
.linked { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.linked > b { font-size: 14.5px; color: var(--coral-d); font-weight: 800; }
:root[data-theme="light"] .linked > b { color: var(--coral); }
.linked > span { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.linked .ic { width: 16px; height: 16px; color: var(--coral); }
.linked .lnk { display: inline-flex; align-items: center; gap: 8px; color: var(--coral); align-self: flex-start; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.apill { padding: 4px 10px; border-radius: 8px; background: var(--bg); color: var(--ink2); font-size: 11.5px; font-weight: 700; }
.apill.tagp { background: var(--coral-t); color: var(--coral-d); }
:root[data-theme="light"] .apill.tagp { color: var(--coral-d); }
.apill.imp { background: var(--amb-t); color: var(--amb-d); }
.apill.exp { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }
.apill.mark { background: var(--coral); color: #fff; }
.month { padding: 14px 12px; }
.m-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.m-h b { font-size: 17px; font-weight: 800; color: var(--coral); }
:root[data-theme="classical"] .m-h b { color: var(--gold); }
.m-wd, .m-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.m-wd span { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); padding-bottom: 4px; }
.dc { position: relative; aspect-ratio: 1; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 13.5px; font-weight: 700; }
.dc.today b { color: var(--coral); }
.dc.today::after { content: ''; position: absolute; inset: 3px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px var(--coral); }
.dc.sel { background: var(--coral); color: #fff; }
.dc.sel b { color: #fff; }
.dc.sel::after { display: none; }
.mk { display: flex; gap: 2px; height: 5px; }
.mk u { width: 5px; height: 5px; border-radius: 50%; background: var(--coral); }
.mk u.t-class { background: var(--ind); } .mk u.t-retreat { background: var(--vio); } .mk u.t-reminder { background: var(--amb); }
.dc.sel .mk u { background: #fff; }
.results { display: flex; flex-direction: column; gap: 12px; }
.results .tx > b { font-size: 16px; }
.selectf { display: flex; flex-direction: column; gap: 4px; }
.selectf small { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.selectf > span { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 12px; background: var(--bg); font-size: 14px; font-weight: 600; }
.selectf > span .ic { width: 16px; height: 16px; color: var(--coral); }
.selectf .chev { margin-inline-start: auto; } .selectf .chev .ic { transform: rotate(90deg); color: var(--chev); }

/* ---------- hijri calendar ---------- */
.hijri-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 20px; --acc: var(--gold); }
.hijri-card h2 { position: relative; margin: 0; font-size: 18px; font-weight: 800; }
.adj { position: relative; display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; gap: 10px; }
.adj b { text-align: center; font-size: 17px; font-weight: 800; }
.adj-b { text-align: center; height: 48px; border-radius: 14px; background: var(--bg); font-weight: 800; font-size: 16px; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.adj-b:disabled { opacity: .35; }
.hd-div { position: relative; height: 1px; background: var(--line); }
.hijri-card small { position: relative; font-size: 12px; font-weight: 800; color: var(--muted); margin-bottom: -8px; }
.hj-now { position: relative; margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--gold); }
.hero .hijri { display: block; width: 100%; color: #fff; }
.ic.flip { transform: scaleX(-1); }
:root[dir="rtl"] .ic.flip { transform: none; }
:root[dir="rtl"] .m-h .ibtn:last-child .ic, :root[dir="rtl"] .cue .ic:not(.flip) { transform: scaleX(-1); }
.feat-art .tag { color: #B84A32; background: #fff; }


/* =====================================================================
   MAGHRIBI ZELLIGE IDENTITY LAYER — contained feature surfaces only
   (plain surfaces stay plain; no app-wide wallpaper)
   ===================================================================== */
:root { --zl-k: .55; }                    /* light: very subtle; dark 1; classical 1.3 */
.zl { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; --zl-size: 76px; }
.zl i { position: absolute; inset: 0;
  -webkit-mask-image: var(--m), var(--fade); -webkit-mask-size: var(--zl-size) var(--zl-size), 100% 100%; -webkit-mask-repeat: repeat, no-repeat; -webkit-mask-position: var(--zl-pos, 0 0), 0 0; -webkit-mask-composite: source-in;
  mask-image: var(--m), var(--fade); mask-size: var(--zl-size) var(--zl-size), 100% 100%; mask-repeat: repeat, no-repeat; mask-position: var(--zl-pos, 0 0), 0 0; mask-composite: intersect; }
.zl-l { --m: var(--zl-lines); background: var(--zl-line, var(--acc)); opacity: calc(var(--zl-lo, .3) * var(--zl-k)); }
.zl-f { --m: var(--zl-fills); background: var(--zl-fill, var(--acc)); opacity: calc(var(--zl-fo, .07) * var(--zl-k)); }
.zl-c { --m: var(--zl-cross); background: var(--zl-cross-c, var(--zl-fill, var(--acc))); opacity: calc(var(--zl-co, .1) * var(--zl-k)); }
/* fades keep linework at the edges, away from text */
.zl-corner { --fade: radial-gradient(90% 120% at 100% 0%, #000 0%, rgba(0,0,0,.5) 20%, transparent 40%); --zl-size: 60px; --zl-pos: 100% 0; }
:root[dir="rtl"] .zl-corner { --fade: radial-gradient(90% 120% at 0% 0%, #000 0%, rgba(0,0,0,.5) 20%, transparent 40%); --zl-pos: 0 0; }
.zl-band { --fade: radial-gradient(80% 95% at 50% 58%, transparent 38%, rgba(0,0,0,.6) 70%, #000 100%); --zl-size: 70px; --zl-pos: 50% 0; }
.zl-hero { --fade: radial-gradient(78% 52% at 50% 46%, transparent 30%, rgba(0,0,0,.55) 70%, #000 100%); --zl-size: 88px; --zl-pos: 50% 0; }
.zl-full { --fade: radial-gradient(circle at 50% 50%, #000 25%, transparent 75%); --zl-size: 56px; --zl-pos: 50% 50%; }
.zl-edge { --fade: linear-gradient(0deg, #000 0%, rgba(0,0,0,.4) 35%, transparent 70%); --zl-size: 64px; --zl-pos: 50% 100%; }
.compass-card .zl-full { --fade: radial-gradient(circle at 50% 46%, transparent 37%, #000 46%, rgba(0,0,0,.5) 60%, transparent 76%); --zl-size: 48px; --zl-lo: .26; }

/* 16-fold rosette medallion */
.zl-rose { position: absolute; z-index: 0; pointer-events: none; width: 190px; height: 190px; background: var(--zl-line, var(--acc)); -webkit-mask: var(--zl-rose) center / contain no-repeat; mask: var(--zl-rose) center / contain no-repeat; opacity: calc(.3 * var(--zl-k)); }
.zl-rose.end { top: -58px; inset-inline-end: -58px; }
.zl-rose.start { top: -70px; inset-inline-end: -64px; width: 210px; height: 210px; }
.zl-rose.center { top: 50%; left: 50%; translate: -50% -50%; width: 250px; height: 250px; opacity: calc(.12 * var(--zl-k)); }
@media (prefers-reduced-motion: no-preference) { html:not(.still) .zl-rose.end, html:not(.still) .zl-rose.start { animation: rose-turn 240s linear infinite; } }
@keyframes rose-turn { to { transform: rotate(360deg); } }

/* host surfaces: content above the layer, layer clipped */
:is(.hero, .journey, .summary, .profile, .r-head, .r-intro, .sil-intro, .sil-close, .compass-card, .hijri-card, .hero-card, .feat-art) { overflow: hidden; }
:is(.hero, .journey, .summary, .profile, .r-head, .r-intro, .sil-intro, .sil-close, .compass-card, .hijri-card, .hero-card, .feat-art) > :not(.zl):not(.zl-rose):not(.tag):not(.v-mark) { position: relative; z-index: 1; }
.feat-art > .tag { z-index: 2; }

/* patterned surfaces that sit on dark/colour grounds use light linework */
.hero, .hero-card, .feat-art { --zl-line: #FFFFFF; --zl-fill: #FFFFFF; --zl-cross-c: #FFFFFF; --zl-lo: .22; --zl-fo: .04; --zl-co: .06; }
.hero .zl-rose { --zl-line: #FFFFFF; opacity: calc(.18 * var(--zl-k)); }
:root[data-theme="light"] .hero, :root:not([data-theme]) .hero { --zl-k: .75; }

/* DARK: feature surfaces on deep blue-green / navy, slightly richer linework */
:root[data-theme="dark"] .hero-card { background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--acc) 38%, transparent), transparent 60%), linear-gradient(150deg, var(--feat1), var(--feat2)); box-shadow: var(--shadow-lg), inset 0 0 0 1px color-mix(in srgb, var(--acc) 22%, transparent); }
:root[data-theme="dark"] .hero-card .hc-sub { opacity: .78; }
:root[data-theme="dark"] .hero-card { --zl-line: var(--acc); --zl-fill: var(--acc); --zl-lo: .34; --zl-fo: .06; }
:root[data-theme="dark"] .feat-art { background: radial-gradient(90% 120% at 90% 0%, color-mix(in srgb, var(--coral) 55%, transparent), transparent 60%), linear-gradient(135deg, var(--feat1), var(--feat2)); }
:root[data-theme="dark"] :is(.r-head, .r-intro, .sil-intro, .hijri-card) { background: linear-gradient(160deg, color-mix(in srgb, var(--acc) 9%, var(--feat1)), var(--card) 80%); }

/* CLASSICAL: warmer, slightly more pronounced, two-tone terracotta + ochre zellige */
:root[data-theme="classical"] .hero, :root[data-theme="classical"] .feat-art, :root[data-theme="classical"] .hero-card { --zl-line: #F1D6AE; --zl-fill: #D7805F; --zl-cross-c: #DDA75E; --zl-lo: .2; --zl-fo: .09; --zl-co: .12; }
:root[data-theme="classical"] .hero-card { background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--acc) 34%, transparent), transparent 60%), linear-gradient(150deg, var(--feat1), var(--feat2)); box-shadow: var(--shadow-lg), inset 0 0 0 1px color-mix(in srgb, var(--acc) 22%, transparent); }
:root[data-theme="classical"] .feat-art { background: radial-gradient(90% 120% at 90% 0%, rgba(215,128,95,.6), transparent 60%), linear-gradient(135deg, var(--feat1), var(--feat2)); }
:root[data-theme="classical"] :is(.journey, .summary, .profile, .r-head, .r-intro, .sil-intro, .sil-close, .hijri-card, .compass-card) { --zl-fill: var(--coral); --zl-cross-c: var(--amb); }
:root[data-theme="classical"] :is(.r-head, .r-intro, .sil-intro, .hijri-card) { background: linear-gradient(160deg, color-mix(in srgb, var(--coral) 10%, var(--card)), var(--card) 75%); }

/* LIGHT: feature card gradient stays crisp, never beige */
.hero-card { background: linear-gradient(140deg, var(--acc), color-mix(in srgb, var(--acc) 70%, #0B1622)); }
.hero .zl-rose.end { top: 150px; inset-inline-end: -96px; width: 220px; height: 220px; }
:root[data-theme="classical"] .avatar { background: linear-gradient(135deg, #D7805F, #DDA75E); }
:root[data-theme="classical"] .avatar.sm { background: linear-gradient(135deg, #B7A0E3, #98A1EA); }
.hero-card .pill.light { color: color-mix(in srgb, var(--acc) 72%, #0B1622); }