/* SHABAB AZAN 2.0 - styles. 12 themes x 3 languages. All fonts local (OFL), see fonts/LICENSE-*.txt */
@font-face { font-family: "Manjari"; src: url(fonts/manjari-malayalam-400-normal.woff2) format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Manjari"; src: url(fonts/manjari-malayalam-700-normal.woff2) format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Gayathri"; src: url(fonts/gayathri-malayalam-400-normal.woff2) format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Gayathri"; src: url(fonts/gayathri-malayalam-700-normal.woff2) format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Chilanka"; src: url(fonts/chilanka-malayalam-400-normal.woff2) format("woff2"); font-weight: 400 700; font-display: block; }
@font-face { font-family: "Noto Sans Malayalam"; src: url(fonts/noto-sans-malayalam-malayalam-400-normal.woff2) format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Noto Sans Malayalam"; src: url(fonts/noto-sans-malayalam-malayalam-600-normal.woff2) format("woff2"); font-weight: 600 700; font-display: block; }
@font-face { font-family: "Anek Malayalam"; src: url(fonts/anek-malayalam-malayalam-400-normal.woff2) format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Anek Malayalam"; src: url(fonts/anek-malayalam-malayalam-700-normal.woff2) format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Baloo Chettan 2"; src: url(fonts/baloo-chettan-2-malayalam-400-normal.woff2) format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Baloo Chettan 2"; src: url(fonts/baloo-chettan-2-malayalam-700-normal.woff2) format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Scheherazade New"; src: url(fonts/scheherazade-new-arabic-400-normal.woff2) format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Scheherazade New"; src: url(fonts/scheherazade-new-arabic-700-normal.woff2) format("woff2"); font-weight: 700; font-display: block; }
/* Malayalam Font Collection (build 202): SMC fonts, OFL-1.1, subset by tools/make-ml-fonts.sh */
@font-face { font-family: "Keraleeyam"; src: url(fonts/keraleeyam-malayalam-400-normal.woff2) format("woff2"); font-weight: 400 700; font-display: swap; size-adjust: 108%; }
@font-face { font-family: "Uroob"; src: url(fonts/uroob-malayalam-400-normal.woff2) format("woff2"); font-weight: 400 700; font-display: swap; size-adjust: 108%; }
@font-face { font-family: "Karumbi"; src: url(fonts/karumbi-malayalam-400-normal.woff2) format("woff2"); font-weight: 400 700; font-display: swap; size-adjust: 135%; }
@font-face { font-family: "Dyuthi"; src: url(fonts/dyuthi-malayalam-400-normal.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Rachana"; src: url(fonts/rachana-malayalam-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Rachana"; src: url(fonts/rachana-malayalam-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Meera"; src: url(fonts/meera-malayalam-400-normal.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Amiri"; src: url(fonts/amiri-arabic-400-normal.woff2) format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Amiri"; src: url(fonts/amiri-arabic-700-normal.woff2) format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Amiri Quran"; src: url(fonts/amiri-quran-arabic-400-normal.woff2) format("woff2"); font-weight: 400 700; font-display: block; }
@font-face { font-family: "Noto Naskh Arabic"; src: url(fonts/noto-naskh-arabic-arabic-400-normal.woff2) format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Noto Naskh Arabic"; src: url(fonts/noto-naskh-arabic-arabic-700-normal.woff2) format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Noto Kufi Arabic"; src: url(fonts/noto-kufi-arabic-arabic-400-normal.woff2) format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Noto Kufi Arabic"; src: url(fonts/noto-kufi-arabic-arabic-700-normal.woff2) format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Inter"; src: url(fonts/inter-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Inter"; src: url(fonts/inter-latin-600-normal.woff2) format("woff2"); font-weight: 600 700; font-display: block; }
@font-face { font-family: "Montserrat"; src: url(fonts/montserrat-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: block; }
@font-face { font-family: "Montserrat"; src: url(fonts/montserrat-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Marcellus"; src: url(fonts/marcellus-latin-400-normal.woff2) format("woff2"); font-weight: 400 700; font-display: block; }
@font-face { font-family: "Cinzel"; src: url(fonts/cinzel-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Cinzel"; src: url(fonts/cinzel-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Cormorant Garamond"; src: url(fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2"); font-weight: 400 500; font-display: block; }
@font-face { font-family: "Cormorant Garamond"; src: url(fonts/cormorant-garamond-latin-700-normal.woff2) format("woff2"); font-weight: 600 700; font-display: block; }

/* build 203: Tamil, Devanagari (Hindi), Kannada, Bengali (Bangla), Urdu Nastaliq - Noto (OFL) script subsets from @fontsource; licences in fonts/ */
@font-face { font-family: "Noto Sans Tamil"; src: url(fonts/noto-sans-tamil-tamil-400-normal.woff2) format("woff2"); font-weight: 400 500; font-display: block; unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+25CC; }
@font-face { font-family: "Noto Sans Tamil"; src: url(fonts/noto-sans-tamil-tamil-700-normal.woff2) format("woff2"); font-weight: 600 800; font-display: block; unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+25CC; }
@font-face { font-family: "Noto Sans Devanagari"; src: url(fonts/noto-sans-devanagari-devanagari-400-normal.woff2) format("woff2"); font-weight: 400 500; font-display: block; unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Noto Sans Devanagari"; src: url(fonts/noto-sans-devanagari-devanagari-700-normal.woff2) format("woff2"); font-weight: 600 800; font-display: block; unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Noto Sans Kannada"; src: url(fonts/noto-sans-kannada-kannada-400-normal.woff2) format("woff2"); font-weight: 400 500; font-display: block; unicode-range: U+0951-0952, U+0964-0965, U+0C80-0CF3, U+1CD0-1CF4, U+200C-200D, U+25CC, U+A830-A835; }
@font-face { font-family: "Noto Sans Kannada"; src: url(fonts/noto-sans-kannada-kannada-700-normal.woff2) format("woff2"); font-weight: 600 800; font-display: block; unicode-range: U+0951-0952, U+0964-0965, U+0C80-0CF3, U+1CD0-1CF4, U+200C-200D, U+25CC, U+A830-A835; }
@font-face { font-family: "Noto Sans Bengali"; src: url(fonts/noto-sans-bengali-bengali-400-normal.woff2) format("woff2"); font-weight: 400 500; font-display: block; unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0-1CF7, U+200C-200D, U+25CC, U+A8F1; }
@font-face { font-family: "Noto Sans Bengali"; src: url(fonts/noto-sans-bengali-bengali-700-normal.woff2) format("woff2"); font-weight: 600 800; font-display: block; unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0-1CF7, U+200C-200D, U+25CC, U+A8F1; }
@font-face { font-family: "Noto Nastaliq Urdu"; src: url(fonts/noto-nastaliq-urdu-arabic-400-normal.woff2) format("woff2"); font-weight: 400 500; font-display: block; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Noto Nastaliq Urdu"; src: url(fonts/noto-nastaliq-urdu-arabic-700-normal.woff2) format("woff2"); font-weight: 600 800; font-display: block; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }
/* ---------------- tokens ---------------- */
:root {
  --sat: 0px; --sab: 0px;
  --f-ml: "Manjari"; --f-mlh: var(--f-ml); --f-head: "Montserrat"; --f-ui: "Inter"; --f-ar-ui: "Noto Kufi Arabic"; --f-dua: "Scheherazade New"; --f-quran: "Scheherazade New";
  --bg1: #0a1f5c; --bg2: #1546c8; --bg3: #08163f;
  --ink: #ffffff; --ink2: rgba(255,255,255,.72); --ink3: rgba(255,255,255,.5);
  --gold: #f5c542; --gold2: #ffe08a; --gold3: #b9820f;
  --card: rgba(255,255,255,.09); --card2: rgba(255,255,255,.14); --brd: rgba(255,255,255,.16); --brd-gold: rgba(var(--glow-rgb),.45);
  --accent: #f5c542; --accent-ink: #1a1203; --soft: #8fb2ff;
  --shadow: 0 10px 30px rgba(3,10,40,.35), 0 2px 6px rgba(3,10,40,.25);
  --nav: rgba(8,22,70,.72); --danger: #ff7a7a; --ok: #59e3a0; --tip: #ffb44d; --tipbg: rgba(255,170,60,.13); --src: #4fd39a; --srcbg: rgba(60,200,140,.12);
  --r: 22px; --blur: blur(18px) saturate(140%);
  --glow-rgb: 245,197,66; --soft-rgb: 143,178,255; --glow: 0 0 18px rgba(var(--glow-rgb),.35);
  --ar-lh: 2.05; --ml-lh: 1.72;
  color-scheme: dark;
}
[data-theme="kasavu"] {
  --bg1: #fbf6ea; --bg2: #f3e9cf; --bg3: #efe2c0;
  --ink: #2a1d08; --ink2: rgba(42,29,8,.72); --ink3: rgba(42,29,8,.5);
  --gold: #b8860b; --gold2: #d9a521; --gold3: #8a6408;
  --card: rgba(255,255,255,.72); --card2: rgba(255,255,255,.9); --brd: rgba(184,134,11,.28); --brd-gold: rgba(184,134,11,.65);
  --accent: #b8860b; --accent-ink: #fffaf0; --soft: #b8860b;
  --shadow: 0 10px 26px rgba(120,86,10,.16), 0 2px 6px rgba(120,86,10,.12);
  --glow-rgb: 184,134,11; --soft-rgb: 184,134,11;
  --nav: rgba(255,250,238,.86); --tip: #b25e00; --tipbg: rgba(214,130,30,.12); --src: #1f7a4d; --srcbg: rgba(40,140,90,.1);
  color-scheme: light;
}
[data-theme="night"] {
  --bg1: #03061a; --bg2: #101a4a; --bg3: #1d2766;
  --gold: #ffd76a; --gold2: #fff0b5; --accent: #ffd76a; --soft: #9fb4ff;
  --card: rgba(160,180,255,.08); --card2: rgba(160,180,255,.13); --brd: rgba(170,190,255,.16);
  --glow-rgb: 255,215,106; --soft-rgb: 159,180,255;
  --nav: rgba(6,10,36,.72);
}
[data-theme="makkah"] {
  --bg1: #050505; --bg2: #121212; --bg3: #1c1a14;
  --gold: #d4af37; --gold2: #f3d77a; --gold3: #9c7a1c; --accent: #d4af37; --soft: #d4af37;
  --card: rgba(212,175,55,.07); --card2: rgba(212,175,55,.12); --brd: rgba(212,175,55,.22); --brd-gold: rgba(212,175,55,.6);
  --glow-rgb: 212,175,55; --soft-rgb: 212,175,55;
  --nav: rgba(10,10,10,.8);
  --shadow: 0 10px 30px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.5);
}
[data-theme="emerald"] {
  --bg1: #022c22; --bg2: #065f46; --bg3: #011c16;
  --gold: #f2c94c; --gold2: #ffe79a; --accent: #f2c94c; --soft: #7ee2b8;
  --card: rgba(255,255,255,.08); --card2: rgba(255,255,255,.13); --brd: rgba(160,255,210,.16);
  --glow-rgb: 242,201,76; --soft-rgb: 126,226,184;
  --nav: rgba(2,36,28,.75);
  --shadow: 0 10px 30px rgba(0,25,18,.45), 0 2px 6px rgba(0,25,18,.3);
}
/* BIO Night - the SHABAB BIO CLOUD night look: deep navy, glass cards, teal/emerald accent, amber highlight, SB cyan glow */
[data-theme="bio"] {
  --f-head: "Inter";
  --bg1: #06121f; --bg2: #0b1d33; --bg3: #0b1220;
  --ink: #e8f3f8; --ink2: rgba(232,243,248,.72); --ink3: rgba(232,243,248,.48);
  --gold: #1fd1b3; --gold2: #8ff5e2; --gold3: #0e9f86;
  --card: rgba(14,34,56,.72); --card2: rgba(18,44,70,.8); --brd: rgba(31,209,179,.2); --brd-gold: rgba(31,209,179,.5);
  --accent: #1fd1b3; --accent-ink: #04261f; --soft: #38bdf8;
  --glow-rgb: 31,209,179; --soft-rgb: 56,189,248; --glow: 0 0 18px rgba(31,209,179,.28);
  --shadow: 0 10px 30px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.04) inset;
  --nav: rgba(8,24,42,.78); --danger: #ff6b8b; --ok: #34d399; --tip: #e3b552; --tipbg: rgba(227,181,82,.12); --src: #38bdf8; --srcbg: rgba(56,189,248,.1);
  --r: 18px; --blur: blur(14px) saturate(130%);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg1); color: var(--ink);
  font-family: var(--f-ui), var(--f-ml), var(--f-ar-ui), "Noto Sans Malayalam", sans-serif;
  font-size: 15px; line-height: 1.5; overflow: hidden; user-select: none; -webkit-user-select: none;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "tnum" 1;
}
body.lang-ml { line-height: var(--ml-lh); }
body.lang-ar, body.lang-ur { font-family: var(--f-ar-ui), var(--f-ui), var(--f-ml), sans-serif; }
/* build 203: the 5 new languages use their own Noto font wherever the Malayalam font would be used */
body.lang-ta { --f-ml: "Noto Sans Tamil", "Manjari"; --f-mlh: "Noto Sans Tamil", "Manjari"; }
body.lang-hi { --f-ml: "Noto Sans Devanagari", "Manjari"; --f-mlh: "Noto Sans Devanagari", "Manjari"; }
body.lang-kn { --f-ml: "Noto Sans Kannada", "Manjari"; --f-mlh: "Noto Sans Kannada", "Manjari"; }
body.lang-bn { --f-ml: "Noto Sans Bengali", "Manjari"; --f-mlh: "Noto Sans Bengali", "Manjari"; }
/* Urdu: Noto Naskh for labels / buttons (Nastaliq is tall and gets clipped in small fixed boxes); Nastaliq for reading text + title */
body.lang-ur { --f-ml: "Noto Naskh Arabic"; --f-mlh: "Noto Naskh Arabic"; --f-ar-ui: "Noto Naskh Arabic", "Noto Kufi Arabic"; --f-ur-read: "Noto Nastaliq Urdu", "Noto Naskh Arabic"; line-height: 1.7; }
body.lang-ur .meaning p, body.lang-ur .tipbox .body, body.lang-ur .notebox, body.lang-ur .lverses p, body.lang-ur .src .cb, body.lang-ur .refline,
body.lang-ur .nm-mean span:first-child, body.lang-ur .nm-me.big, body.lang-ur .lsub span { font-family: var(--f-ur-read), var(--f-ui), sans-serif; line-height: 2.3; }
body.lang-ur .meaning p[lang="en"] { font-family: var(--f-ui); line-height: 1.6; }
body.lang-ur .hero-title h1 { font-family: "Noto Nastaliq Urdu", "Noto Naskh Arabic", sans-serif; font-size: 30px; line-height: 2.3; padding-top: 2px; }
body.lang-ta, body.lang-hi, body.lang-kn, body.lang-bn { line-height: var(--ml-lh); }
/* language picker: 8 languages, each in its own script */
.segctl.langs { display: grid; grid-template-columns: repeat(4, 1fr); }
.segctl.langs button { padding: 7px 4px; line-height: 1.45; }
[data-v="ml"][data-seg="lang"], .tvsetup .opt[data-v="ml"] { font-family: "Manjari", var(--f-ui), sans-serif; }
[data-v="ar"][data-seg="lang"], .tvsetup .opt[data-v="ar"] { font-family: "Noto Kufi Arabic", sans-serif; }
[data-v="ta"][data-seg="lang"], .tvsetup .opt[data-v="ta"] { font-family: "Noto Sans Tamil", sans-serif; }
[data-v="hi"][data-seg="lang"], .tvsetup .opt[data-v="hi"] { font-family: "Noto Sans Devanagari", sans-serif; }
[data-v="ur"][data-seg="lang"], .tvsetup .opt[data-v="ur"] { font-family: "Noto Naskh Arabic", "Noto Kufi Arabic", sans-serif; }
[data-v="kn"][data-seg="lang"], .tvsetup .opt[data-v="kn"] { font-family: "Noto Sans Kannada", sans-serif; }
[data-v="bn"][data-seg="lang"], .tvsetup .opt[data-v="bn"] { font-family: "Noto Sans Bengali", sans-serif; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select { font: inherit; color: inherit; }
svg { display: block; }
.hidden { display: none !important; }
.ar { font-family: var(--f-dua), "Noto Naskh Arabic", serif; direction: rtl; }
.saw { font-family: var(--f-dua), "Noto Naskh Arabic", serif; font-weight: 400; }

/* ---------------- background layer ---------------- */
#bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; overflow: hidden; pointer-events: none; background: linear-gradient(165deg, var(--bg2) 0%, var(--bg1) 55%, var(--bg3) 100%); transition: opacity .5s; }
#bg.fade { opacity: 0; }
.art-lattice { position: absolute; top: -40px; right: -40px; bottom: -40px; left: -40px; opacity: .14;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M36 4 45 27 68 36 45 45 36 68 27 45 4 36 27 27Z' fill='none' stroke='%23f5c542' stroke-width='1'/%3E%3Ccircle cx='36' cy='36' r='5' fill='none' stroke='%23f5c542' stroke-width='.8'/%3E%3C/svg%3E");
  animation: drift 60s linear infinite; }
.art-glow { position: absolute; width: 520px; height: 520px; right: -220px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(90,140,255,.55), transparent 65%); filter: blur(10px); animation: breathe 9s ease-in-out infinite; }
.art-glow.green { background: radial-gradient(circle, rgba(60,220,160,.35), transparent 65%); }
.art-rosette { position: absolute; width: 420px; height: 420px; left: -170px; bottom: -150px; color: var(--gold); opacity: .16; animation: spin 140s linear infinite; }
.kasavu-rose { opacity: .12; left: auto; right: -180px; bottom: 80px; }
.emerald-rose { opacity: .2; }
.art-paper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(circle at 20% 10%, rgba(255,255,255,.9), transparent 50%), radial-gradient(circle at 80% 90%, rgba(232,210,150,.35), transparent 55%); }
.kasavu-band { position: absolute; left: 0; right: 0; height: 22px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent) -200px 0/200px 100% no-repeat,
              linear-gradient(180deg, #8a6408 0 2px, transparent 2px 5px, #d9a521 5px 15px, #f6d77a 15px 16px, #b8860b 16px 18px, transparent 18px 20px, #8a6408 20px 22px);
  animation: shimmer 5s ease-in-out infinite; }
.kasavu-band.top { top: 0; } .kasavu-band.bottom { bottom: 0; transform: scaleY(-1); }
.sky { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(ellipse at 70% 0%, #2b3a8a 0%, transparent 60%), linear-gradient(180deg, #03061a 0%, #0b1440 60%, #1a2260 100%); }
.star { position: absolute; border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.9); animation: twinkle 3s ease-in-out infinite; }
.shooting { position: absolute; top: 12%; left: 70%; width: 120px; height: 1.5px; background: linear-gradient(90deg, #fff, transparent); transform: rotate(-25deg); opacity: 0; animation: shoot 11s ease-in 3s infinite; }
.moon { position: absolute; width: 86px; height: 86px; right: 26px; top: calc(var(--sat) + 74px); filter: drop-shadow(0 0 18px rgba(255,225,140,.75)); animation: float 8s ease-in-out infinite; }
.mosque-glow { position: absolute; left: 50%; bottom: 40px; width: 360px; height: 180px; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 100%, rgba(255,200,90,.32), transparent 70%); animation: breathe 6s ease-in-out infinite; }
.skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 150px; }
.skyline .windows { animation: glowwin 4s ease-in-out infinite; }
.kiswa { position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background-color: #070707;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg fill='none' stroke='%23d4af37' stroke-opacity='.13' stroke-width='1'%3E%3Cpath d='M45 8c10 10 10 27 0 37C35 35 35 18 45 8zM45 82c-10-10-10-27 0-37 10 10 10 27 0 37zM8 45c10-10 27-10 37 0-10 10-27 10-37 0zM82 45c-10 10-27 10-37 0 10-10 27-10 37 0z'/%3E%3Ccircle cx='45' cy='45' r='6'/%3E%3Cpath d='M0 0l18 18M90 0 72 18M0 90l18-18M90 90 72 72'/%3E%3C/g%3E%3C/svg%3E"); }
.kiswa-band { position: absolute; left: 0; right: 0; top: calc(var(--sat) + 230px); height: 54px; overflow: hidden;
  background: linear-gradient(180deg, #9c7a1c, #f3d77a 18%, #d4af37 50%, #f3d77a 82%, #9c7a1c);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='54'%3E%3Cpath d='M0 0h60v4H0zM0 50h60v4H0zM6 12h48v30H6z' /%3E%3C/svg%3E") 0 0/60px 54px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='54'%3E%3Cpath d='M0 0h60v4H0zM0 50h60v4H0zM6 12h48v30H6z' /%3E%3C/svg%3E") 0 0/60px 54px repeat-x;
  opacity: .22; }
.band-shine { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.8) 50%, transparent 70%); transform: translateX(-100%); animation: sweep 6s ease-in-out infinite; }
.girih { position: absolute; top: -60px; right: -60px; bottom: -60px; left: -60px; opacity: .2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23f2c94c' stroke-width='1'%3E%3Cpath d='M40 6 50 30 74 40 50 50 40 74 30 50 6 40 30 30Z'/%3E%3Cpath d='M40 18 46 34 62 40 46 46 40 62 34 46 18 40 34 34Z' stroke-opacity='.6'/%3E%3Cpath d='M0 0 6 40 0 80M80 0 74 40 80 80M0 0 40 6 80 0M0 80 40 74 80 80' stroke-opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
  animation: drift 90s linear infinite reverse; }

/* ---------------- app shell ---------------- */
#app { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; display: flex; flex-direction: column; }
.view { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow-y: auto; overflow-x: hidden; padding: calc(var(--sat) + 8px) 16px calc(var(--sab) + 104px); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.view::-webkit-scrollbar { display: none; }
.view.enter { animation: viewIn .38s cubic-bezier(.2,.8,.2,1); }
.topbar { display: flex; align-items: center; gap: 8px; min-height: 48px; }
.topbar .grow { flex: 1; min-width: 0; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--brd); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); font-size: 13px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill svg { width: 16px; height: 16px; flex: none; color: var(--gold); }
.pill .txt { overflow: hidden; text-overflow: ellipsis; }
.net { font-size: 11.5px; padding: 5px 10px; gap: 5px; }
.net i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink3); }
.net.on i { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.iconbtn { width: 42px; height: 42px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--brd); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); transition: transform .15s; }
.iconbtn:active { transform: scale(.92); }
.iconbtn svg { width: 22px; height: 22px; }

.hero-title { text-align: center; margin: 4px 0 2px; }
.hero-title h1 { margin: 0; font-family: var(--f-head), var(--f-ml), var(--f-ar-ui); font-weight: 700; font-size: 27px; letter-spacing: .2px; line-height: 1.35;
  background: linear-gradient(180deg, var(--gold2), var(--gold) 55%, var(--gold3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.lang-ml .hero-title h1 { font-family: var(--f-mlh), var(--f-ui), var(--f-ar-ui), sans-serif; font-size: 30px; }
.flourish { width: 180px; height: 14px; margin: 2px auto 0; color: var(--gold); opacity: .9; }

/* clock */
.clock { text-align: center; margin: 10px 0 4px; }
.clock .time { font-family: var(--f-head), var(--f-ui); font-weight: 600; font-size: 64px; line-height: 1; letter-spacing: -1px; display: inline-flex; align-items: baseline; gap: 4px; text-shadow: 0 4px 24px rgba(0,0,0,.25); }
.clock .time .sec { font-size: 22px; color: var(--gold); min-width: 30px; text-align: start; }
.clock .time .ap { font-size: 16px; color: var(--ink2); margin-inline-start: 4px; font-family: var(--f-ui), var(--f-ar-ui); }
.clock .dates { margin-top: 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; font-size: 14px; color: var(--ink2); }
.clock .dates b { color: var(--ink); font-weight: 600; }
.clock .dates .hijri { color: var(--gold); display: inline-flex; align-items: center; gap: 5px; }
.clock .dates .hijri svg { width: 14px; height: 14px; }

/* glass card */
.card { position: relative; background: var(--card); border: 1px solid var(--brd); border-radius: var(--r); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.07); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
[data-theme="kasavu"] .card { border: 1.5px solid transparent; background: linear-gradient(var(--card2), var(--card2)) padding-box, linear-gradient(135deg, #8a6408, #f6d77a 30%, #b8860b 50%, #f6d77a 70%, #8a6408) border-box; }
[data-theme="makkah"] .card { border-color: var(--brd); background: linear-gradient(160deg, rgba(212,175,55,.09), rgba(0,0,0,.35)); }

/* next prayer */
.next { margin: 18px 0 14px; padding: 26px 18px 18px; overflow: hidden; border-color: var(--brd-gold); background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); }
[data-theme="kasavu"] .next { background: linear-gradient(#fffdf6, #fff8e6) padding-box, linear-gradient(135deg, #8a6408, #f6d77a 30%, #b8860b 50%, #f6d77a 70%, #8a6408) border-box; border: 2px solid transparent; }
.next .arch { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 34px; color: var(--gold); opacity: .55; }
.next .row { display: flex; align-items: center; gap: 14px; }
.next .info { flex: 1; min-width: 0; }
.next .lbl { font-size: 12.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--gold); font-weight: 600; }
body:not(.lang-en) .next .lbl { text-transform: none; letter-spacing: 0; font-size: 14px; }
.next .name { font-family: var(--f-head), var(--f-ml), var(--f-ar-ui); font-weight: 700; font-size: 34px; line-height: 1.25; margin: 2px 0 2px; min-height: 42px; }
body.lang-ml .next .name { font-family: var(--f-mlh), var(--f-ui), var(--f-ar-ui), sans-serif; font-size: 36px; }
.next .at { color: var(--ink2); font-size: 15px; }
.next .at b { color: var(--ink); font-weight: 600; }
.count { display: flex; gap: 3px; margin-top: 12px; direction: ltr; justify-content: flex-start; }
body.rtl .count { justify-content: flex-end; }
.count .slot { position: relative; width: 26px; height: 40px; border-radius: 9px; background: rgba(0,0,0,.22); overflow: hidden; display: grid; place-items: center; font-family: var(--f-head), var(--f-ui); font-weight: 700; font-size: 24px; color: var(--gold2); box-shadow: inset 0 -12px 18px rgba(0,0,0,.18); }
[data-theme="kasavu"] .count .slot { background: rgba(184,134,11,.12); color: var(--gold3); }
.count .slot span { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; }
.count .slot span.out { animation: digitOut .45s cubic-bezier(.4,0,.2,1) forwards; }
.count .slot span.in { animation: digitIn .45s cubic-bezier(.4,0,.2,1); }
.count .sep { width: 8px; display: grid; place-items: center; font-weight: 700; color: var(--gold); font-size: 22px; animation: blink 1s steps(2) infinite; }
.ring { width: 92px; height: 92px; flex: none; position: relative; }
.ring svg { width: 92px; height: 92px; transform: rotate(-90deg); }
.ring .trk { stroke: rgba(255,255,255,.12); }
[data-theme="kasavu"] .ring .trk { stroke: rgba(184,134,11,.15); }
.ring .bar { stroke: var(--gold); transition: stroke-dashoffset 1s linear; }
.ring > svg { filter: drop-shadow(0 0 5px rgba(var(--glow-rgb),.45)); overflow: visible; }
.ring .ic { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; color: var(--gold); }
.ring .ic svg { width: 36px; height: 36px; transform: none; }
.ramadan { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--brd-gold); display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.ramadan b { color: var(--gold); font-size: 16px; display: block; }

/* type & glow animation */
.tw { display: inline; }
.tw .g { display: inline-block; opacity: 0; transform: translateY(.35em); filter: blur(4px); animation: glyphIn .55s cubic-bezier(.2,.8,.2,1) forwards; }
.tw.glow .g { text-shadow: 0 0 18px rgba(var(--glow-rgb),.9); animation: glyphIn .55s cubic-bezier(.2,.8,.2,1) forwards, glowOff 1.6s ease-out forwards; }
.caret { display: inline-block; width: 2px; height: .9em; background: var(--gold); margin-inline-start: 3px; vertical-align: -.05em; animation: blink .8s steps(2) infinite, fadeAway .3s 1.6s forwards; }

/* prayer list */
.plist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.prow { min-width: 0; }
.prow { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 12px; border-radius: 18px; opacity: 0; transform: translateY(14px); animation: rise .5s cubic-bezier(.2,.8,.2,1) forwards; }
.prow .pic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none; background: linear-gradient(145deg, rgba(var(--soft-rgb),.28), rgba(var(--soft-rgb),.08)); color: var(--soft); }
[data-theme="kasavu"] .prow .pic { background: linear-gradient(145deg, rgba(184,134,11,.2), rgba(184,134,11,.06)); color: var(--gold3); }
[data-theme="makkah"] .prow .pic { background: linear-gradient(145deg, rgba(212,175,55,.25), rgba(212,175,55,.06)); color: var(--gold); }
[data-theme="emerald"] .prow .pic { background: linear-gradient(145deg, rgba(126,226,184,.25), rgba(126,226,184,.06)); }
.prow .pic svg { width: 24px; height: 24px; }
.prow .pn { flex: 1; min-width: 0; }
.prow .pn b { display: block; font-size: 17px; font-weight: 700; line-height: 1.3; font-family: var(--f-mlh), var(--f-ui), var(--f-ar-ui); }
body.lang-en .prow .pn b { font-family: var(--f-head), var(--f-ui); font-weight: 600; }
.prow .pn small { color: var(--ink3); font-size: 12px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
.prow .pt { font-family: var(--f-head), var(--f-ui), var(--f-ar-ui); font-weight: 600; font-size: 19px; direction: ltr; white-space: nowrap; }
.prow .pt small { font-size: 12px; color: var(--ink2); margin-inline-start: 3px; font-weight: 500; }
.prow .mode { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--ink2); background: rgba(255,255,255,.06); flex: none; transition: transform .15s, background .2s; }
[data-theme="kasavu"] .prow .mode { background: rgba(184,134,11,.08); }
.prow .mode:active { transform: scale(.88); }
.prow .mode svg { width: 20px; height: 20px; }
.prow .mode.azan { color: var(--gold); }
.prow .mode.off { opacity: .5; }
.prow.now { border-color: var(--brd-gold); background: linear-gradient(90deg, rgba(var(--glow-rgb),.16), var(--card) 60%); }
.prow.now::before { content: ""; position: absolute; inset-inline-start: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 4px; background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.prow.next-up .pt { color: var(--gold); }
.tag { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--gold); color: var(--accent-ink); margin-inline-start: 6px; vertical-align: 2px; font-weight: 700; }
.extras { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.extras .x { flex: 1 0 auto; padding: 10px 12px; border-radius: 16px; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.extras .x svg { width: 18px; height: 18px; color: var(--soft); }
.extras .x b { display: block; font-size: 15px; direction: ltr; text-align: start; }

.prompt { margin-top: 14px; padding: 14px; display: flex; gap: 12px; align-items: center; border-color: var(--brd-gold); }
.prompt .pic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(145deg, #ffb44d, #f5c542); color: #3a2400; flex: none; }
.prompt .pic svg { width: 26px; height: 26px; }
.prompt b { display: block; font-size: 16px; }
.prompt small { color: var(--ink2); }
.prompt .go { margin-inline-start: auto; color: var(--gold); }
.prompt .go svg { width: 22px; height: 22px; }
body.rtl .prompt .go svg, body.rtl .chev svg { transform: scaleX(-1); }

.credit { text-align: center; margin: 26px 0 6px; font-size: 12.5px; color: var(--ink3); line-height: 1.6; }
.credit b { color: var(--gold); font-weight: 600; }

/* bottom nav */
nav.tabs { position: fixed; z-index: 5; left: 12px; right: 12px; bottom: calc(var(--sab) + 10px); height: 70px; display: flex; justify-content: space-around; align-items: center;
  border-radius: 24px; background: var(--nav); border: 1px solid var(--brd); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); box-shadow: 0 12px 34px rgba(0,0,0,.35); }
nav.tabs button { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; color: var(--ink3); position: relative; transition: color .2s; min-width: 0; }
body.lang-ml nav.tabs button { font-size: 11.5px; }
nav.tabs button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; padding: 0 2px; }
nav.tabs button svg { width: 24px; height: 24px; transition: transform .25s; }
nav.tabs button.on { color: var(--gold); }
nav.tabs button.on svg { transform: translateY(-2px) scale(1.08); }
nav.tabs button.on::after { content: ""; position: absolute; top: 6px; width: 36px; height: 3px; border-radius: 3px; background: var(--gold); box-shadow: 0 0 10px var(--gold); }

/* section headings */
.h2 { font-family: var(--f-head), var(--f-ml), var(--f-ar-ui); font-weight: 700; font-size: 24px; margin: 6px 0 2px; }
body.lang-ml .h2 { font-family: var(--f-mlh), var(--f-ui), var(--f-ar-ui), sans-serif; font-size: 26px; }
.sub { color: var(--ink2); font-size: 13.5px; margin: 0 0 14px; }

/* qibla */
.compass { position: relative; width: min(320px, 82vw); aspect-ratio: 1; margin: 24px auto 10px; }
.compass .dial { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transition: transform .25s ease-out; }
.compass .dial svg { width: 100%; height: 100%; }
.compass .center { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; pointer-events: none; }
.compass .needle { position: absolute; left: 50%; top: 4%; width: 0; height: 46%; transform-origin: 50% 100%; }
.compass .marker { position: absolute; left: 50%; top: -4px; transform: translateX(-50%); width: 4px; height: 22px; border-radius: 3px; background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.compass.aligned .dial svg .ringg { stroke: var(--ok); }
.qinfo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.qinfo .card { padding: 14px; text-align: center; }
.qinfo b { display: block; font-size: 22px; font-family: var(--f-head), var(--f-ui); color: var(--gold); direction: ltr; }
.qinfo small { color: var(--ink2); }
.qhint { text-align: center; margin-top: 12px; color: var(--ink2); font-size: 13.5px; }
.qstatus { text-align: center; font-size: 17px; font-weight: 700; margin-top: 4px; min-height: 26px; }
.qstatus.ok { color: var(--ok); }

/* adhkar home (Awraad-style) */
.search { display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 46px; border-radius: 16px; margin-bottom: 14px; }
.search svg { width: 20px; height: 20px; color: var(--ink3); flex: none; }
.search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-size: 15px; }
.search input::placeholder { color: var(--ink3); }
.segs { display: flex; gap: 8px; margin-bottom: 14px; }
.seg { padding: 8px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--brd); font-size: 13.5px; display: inline-flex; gap: 6px; align-items: center; }
.seg svg { width: 16px; height: 16px; }
.seg.on { background: var(--gold); color: var(--accent-ink); border-color: var(--gold); font-weight: 700; }
.grp { padding: 16px; margin-bottom: 12px; overflow: hidden; opacity: 0; transform: translateY(14px); animation: rise .5s cubic-bezier(.2,.8,.2,1) forwards; }
.grp .gh { display: flex; align-items: center; gap: 12px; }
.grp .gi { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; flex: none; background: linear-gradient(145deg, rgba(var(--soft-rgb),.32), rgba(var(--soft-rgb),.1)); color: var(--soft); }
[data-theme="kasavu"] .grp .gi { background: linear-gradient(145deg, rgba(184,134,11,.22), rgba(184,134,11,.06)); color: var(--gold3); }
[data-theme="makkah"] .grp .gi { background: linear-gradient(145deg, rgba(212,175,55,.28), rgba(212,175,55,.06)); color: var(--gold); }
.grp .gi svg { width: 28px; height: 28px; }
.grp .gt { flex: 1; min-width: 0; position: relative; z-index: 1; }
.grp .gt b { display: block; font-size: 19px; font-weight: 700; line-height: 1.35; font-family: var(--f-mlh), var(--f-head), var(--f-ar-ui), sans-serif; }
.grp .gt small { color: var(--ink2); font-size: 13px; }
.grp .art { position: absolute; inset-inline-end: -6px; top: 6px; width: 120px; height: 80px; color: var(--ink); opacity: .1; pointer-events: none; }
.grp.big { padding: 20px 16px 14px; border-color: var(--brd-gold); background: linear-gradient(160deg, rgba(255,255,255,.15), rgba(255,255,255,.05)); }
[data-theme="kasavu"] .grp.big { background: linear-gradient(#fffdf6, #fff7e2) padding-box, linear-gradient(135deg, #8a6408, #f6d77a 30%, #b8860b 50%, #f6d77a 70%, #8a6408) border-box; }
.grp.big .gt b { font-size: 23px; }
.grp.big .art { width: 150px; height: 100px; opacity: .14; }
.items { margin-top: 12px; display: grid; gap: 8px; }
.item { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid var(--brd); text-align: start; width: 100%; transition: transform .15s; }
[data-theme="kasavu"] .item { background: rgba(255,255,255,.75); }
.item:active { transform: scale(.98); }
.item .num { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; font-weight: 700; font-family: var(--f-head), var(--f-ui); background: linear-gradient(145deg, var(--gold2), var(--gold)); color: var(--accent-ink); font-size: 15px; }
[data-theme="kasavu"] .item .num { color: #fff; background: linear-gradient(145deg, #d9a521, #8a6408); }
.item .it { flex: 1; min-width: 0; }
.item .it b { display: block; font-size: 15.5px; line-height: 1.45; font-weight: 700; }
.item .it small { color: var(--ink2); font-size: 12.5px; display: block; }
.item .prog { font-size: 12px; color: var(--gold); white-space: nowrap; }
.item .done { color: var(--ok); }
.item .chev { color: var(--ink3); } .item .chev svg { width: 18px; height: 18px; }
.streak { display: flex; gap: 10px; align-items: center; padding: 12px 14px; margin-bottom: 14px; font-size: 13.5px; }
.streak b { font-size: 22px; color: var(--gold); font-family: var(--f-head), var(--f-ui); }
.streak .fire { font-size: 22px; }

/* dua reader */
.reader { padding-top: 0; padding-bottom: calc(var(--sab) + 120px); }
.rhead { position: sticky; top: 0; z-index: 4; margin: 0 -16px; padding: calc(var(--sat) + 8px) 16px 10px; background: linear-gradient(180deg, var(--bg2), color-mix(in srgb, var(--bg2) 80%, transparent)); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
[data-theme="kasavu"] .rhead { background: linear-gradient(180deg, #f6ecd2, rgba(246,236,210,.92)); }
[data-theme="makkah"] .rhead { background: linear-gradient(180deg, #151309, rgba(10,10,10,.9)); border-bottom: 1px solid var(--brd); }
.rhead .tt { text-align: center; padding: 0 4px; }
.rhead .tt b { display: block; font-size: 18.5px; line-height: 1.4; font-family: var(--f-mlh), var(--f-head), var(--f-ar-ui), sans-serif; }
.rhead .tt .ar { font-size: 20px; color: var(--gold); line-height: 1.6; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px 2px; scrollbar-width: none; scroll-behavior: smooth; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; font-family: var(--f-head), var(--f-ui); font-size: 14px; background: var(--card); border: 1px solid var(--brd); position: relative; }
.chip.on { background: var(--gold); color: var(--accent-ink); border-color: var(--gold); transform: scale(1.06); box-shadow: 0 4px 14px rgba(var(--glow-rgb),.4); }
.chip.ok::after { content: ""; position: absolute; right: -2px; top: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); border: 2px solid var(--bg2); }
.dcard { margin-top: 14px; padding: 16px; touch-action: pan-y; }
.dcard.swl { animation: swipeL .32s ease; } .dcard.swr { animation: swipeR .32s ease; }
.dmeta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ofpill { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid var(--brd); letter-spacing: .3px; }
.toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink2); }
.sw { width: 40px; height: 24px; border-radius: 999px; background: rgba(255,255,255,.18); position: relative; transition: background .2s; flex: none; }
[data-theme="kasavu"] .sw { background: rgba(42,29,8,.18); }
.sw::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: inset-inline-start .2s; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.sw.on { background: var(--gold); }
.sw.on::after { inset-inline-start: 19px; }
.tipbox { margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: var(--tipbg); border: 1px solid color-mix(in srgb, var(--tip) 45%, transparent); color: var(--ink); font-size: 14px; }
.tipbox .tl { display: flex; gap: 6px; align-items: center; color: var(--tip); font-weight: 700; font-size: 12.5px; letter-spacing: .4px; margin-bottom: 2px; }
.tipbox .tl svg { width: 16px; height: 16px; }
.tipbox .more { color: var(--tip); font-weight: 700; font-size: 12.5px; margin-top: 4px; }
.tipbox.clamp .body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notebox { margin-top: 10px; padding: 12px 14px; border-radius: 16px; background: rgba(var(--soft-rgb),.12); border: 1px solid rgba(var(--soft-rgb),.3); font-size: 14px; }
[data-theme="kasavu"] .notebox { background: rgba(184,134,11,.08); border-color: rgba(184,134,11,.3); }
.cnt-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.cntpill { padding: 6px 14px; border-radius: 999px; background: linear-gradient(135deg, #ff9b3d, #ffb44d); color: #2d1600; font-weight: 700; font-size: 13.5px; box-shadow: 0 4px 14px rgba(255,155,61,.35); }
.namebox { padding: 6px 12px; border-radius: 12px; background: var(--card2); border: 1px solid var(--brd); font-weight: 700; font-size: 14px; }
.qtabs { display: flex; gap: 6px; margin-top: 12px; }
.qtabs button { flex: 1; padding: 8px 6px; border-radius: 12px; background: var(--card); border: 1px solid var(--brd); font-size: 13px; font-weight: 600; }
.qtabs button.on { background: var(--gold); color: var(--accent-ink); }
.arabic { margin: 18px 0 6px; text-align: center; direction: rtl; font-family: var(--f-dua), "Amiri", "Noto Naskh Arabic", serif; font-size: calc(26px * var(--arz, 1)); line-height: var(--ar-lh); color: var(--ink); word-spacing: 2px; user-select: text; -webkit-user-select: text; }
.arabic.quran { font-family: var(--f-quran), "Amiri", "Noto Naskh Arabic", serif; }
/* build 202: clean Naskh by default (Scheherazade New), ~2.0 line height, a little larger; Amiri Quran only as the optional "Quran style" */
:root[data-arf="scheherazade"] .arabic { font-size: calc(29px * var(--arz, 1)); line-height: 2.1; }
:root[data-arf="naskh"] .arabic { font-size: calc(27px * var(--arz, 1)); line-height: 2.15; }
.arabic { font-feature-settings: normal; }
.arabic .opn { display: block; font-size: .78em; color: var(--ink2); }
.arabic .aya { color: var(--gold); font-family: var(--f-quran), "Amiri", serif; white-space: nowrap; margin: 0 2px; }
.arabic .sname { display: block; font-size: .7em; color: var(--gold); margin: 14px 0 2px; font-family: var(--f-dua), "Amiri", serif; font-weight: 700; }
.wbw { display: flex; flex-wrap: wrap; direction: rtl; justify-content: center; gap: 10px 8px; margin: 18px 0 8px; }
.wbw .w { text-align: center; padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid var(--brd); min-width: 64px; }
[data-theme="kasavu"] .wbw .w { background: rgba(255,255,255,.8); }
.wbw .w .a { font-family: var(--f-dua), "Amiri", serif; font-size: calc(22px * var(--arz, 1)); line-height: 1.7; }
.wbw .w .m { font-size: calc(12.5px * var(--mlz, 1)); color: var(--gold); direction: ltr; line-height: 1.4; }
body.lang-ml .wbw .w .m { font-family: var(--f-ml), var(--f-ui), var(--f-ar-ui), sans-serif; }
.collapse { margin-top: 12px; border-radius: 16px; border: 1px solid var(--brd); overflow: hidden; }
.collapse > button { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; font-weight: 700; font-size: 13px; letter-spacing: .5px; background: rgba(255,255,255,.05); }
.collapse > button i { font-style: normal; font-size: 20px; line-height: 1; color: var(--gold); transition: transform .2s; }
.collapse.open > button i { transform: rotate(45deg); }
.collapse .cb { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.collapse.open .cb { max-height: 1600px; }
.collapse .cb > div { padding: 12px 14px 14px; font-size: calc(15px * var(--mlz, 1)); line-height: 1.8; white-space: pre-line; }
.collapse.src { border-color: color-mix(in srgb, var(--src) 40%, transparent); }
.collapse.src > button { color: var(--src); background: var(--srcbg); }
.meaning { margin-top: 14px; }
.meaning .ml { font-size: 12.5px; font-weight: 700; color: var(--gold); letter-spacing: .4px; }
.meaning p { margin: 4px 0 0; font-size: calc(16px * var(--mlz, 1)); line-height: 1.85; white-space: pre-line; user-select: text; -webkit-user-select: text; }
body.lang-ml .meaning p { font-family: var(--f-ml), var(--f-ui), var(--f-ar-ui), sans-serif; }
.refline { margin-top: 12px; font-size: 11.5px; color: var(--ink3); text-align: center; }
.counter { display: flex; flex-direction: column; align-items: center; margin: 22px 0 6px; }
.tapbtn { position: relative; width: 168px; height: 168px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.22), rgba(255,255,255,.04) 60%); border: 1px solid var(--brd-gold); box-shadow: var(--shadow), inset 0 0 30px rgba(var(--glow-rgb),.12); transition: transform .08s; }
.tapbtn:active { transform: scale(.95); }
.tapbtn svg.r { position: absolute; top: -8px; right: -8px; bottom: -8px; left: -8px; width: calc(100% + 16px); height: calc(100% + 16px); transform: rotate(-90deg); }
.tapbtn svg.r circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.tapbtn svg.r .t { stroke: rgba(255,255,255,.1); }
.tapbtn svg.r .b { stroke: var(--gold); transition: stroke-dashoffset .25s; filter: drop-shadow(0 0 6px rgba(var(--glow-rgb),.6)); }
.tapbtn .n { font-family: var(--f-head), var(--f-ui); font-size: 46px; font-weight: 700; line-height: 1; }
.tapbtn .of { font-size: 13px; color: var(--ink2); text-align: center; }
.tapbtn.done { border-color: var(--ok); }
.tapbtn.done .n { color: var(--ok); }
.tapbtn .bump { animation: bump .25s; }
.cnt-actions { display: flex; gap: 10px; margin-top: 14px; }
.small-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--brd); font-size: 13px; }
.small-btn svg { width: 16px; height: 16px; }
.small-btn.on { color: var(--gold); border-color: var(--brd-gold); }
.player { position: fixed; z-index: 6; left: 12px; right: 12px; bottom: calc(var(--sab) + 10px); height: 66px; border-radius: 22px; display: flex; align-items: center; justify-content: space-around; padding: 0 8px;
  background: linear-gradient(135deg, var(--bg2), var(--bg1)); border: 1px solid var(--brd-gold); box-shadow: 0 14px 34px rgba(0,0,0,.4); }
[data-theme="kasavu"] .player { background: linear-gradient(135deg, #8a6408, #b8860b); color: #fff; }
.player button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: inherit; }
.player button svg { width: 22px; height: 22px; }
.player button.pp { width: 52px; height: 52px; border-radius: 50%; background: var(--gold); color: var(--accent-ink); box-shadow: 0 6px 18px rgba(var(--glow-rgb),.45); }
[data-theme="kasavu"] .player button.pp { background: #fff; color: #8a6408; }
.player button.on { color: var(--gold); }
.player .na { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); font-size: 11.5px; padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; white-space: nowrap; opacity: 0; transition: opacity .3s; }
.player .na.show { opacity: 1; }
.celebrate { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 30; display: grid; place-items: center; pointer-events: none; }
.celebrate .msg { padding: 22px 28px; border-radius: 26px; text-align: center; background: linear-gradient(135deg, var(--bg2), var(--bg1)); border: 1px solid var(--brd-gold); box-shadow: 0 20px 60px rgba(0,0,0,.5); animation: pop .6s cubic-bezier(.2,1.4,.4,1); }
.celebrate .msg b { display: block; font-size: 26px; color: var(--gold); font-family: var(--f-mlh), var(--f-head); }
.celebrate .msg .ar { font-size: 30px; color: var(--gold2); }
.celebrate i { position: absolute; top: -20px; width: 10px; height: 10px; background: var(--gold); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: fall 2.4s linear forwards; }

/* tasbih */
.tasbih { display: flex; flex-direction: column; align-items: center; }
.tasbih .phrase { text-align: center; margin: 10px 0 4px; min-height: 92px; }
.tasbih .phrase .ar { font-size: 40px; color: var(--gold2); line-height: 1.6; }
.tasbih .phrase small { display: block; color: var(--ink2); font-size: 15px; }
.bead { width: min(250px, 66vw); height: min(250px, 66vw); }
.bead .n { font-size: 64px; }
.tstats { display: flex; gap: 10px; margin-top: 20px; width: 100%; }
.tstats .card { flex: 1; padding: 12px; text-align: center; }
.tstats b { display: block; font-size: 22px; color: var(--gold); font-family: var(--f-head), var(--f-ui); }
.tstats small { color: var(--ink2); font-size: 12.5px; }
.tseq { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }

/* month */
.mhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 12px; }
.mhead .mt { text-align: center; flex: 1; min-width: 0; }
.mhead .mt b { display: block; font-size: 20px; font-family: var(--f-head), var(--f-mlh), var(--f-ar-ui); }
.mhead .mt small { color: var(--gold); }
body.rtl .mhead .iconbtn svg { transform: scaleX(-1); }
.mtable { width: 100%; border-collapse: separate; border-spacing: 0 5px; font-size: 13px; direction: ltr; }
.mtable th { font-weight: 600; color: var(--gold); font-size: 11.5px; padding: 4px 2px; text-align: center; white-space: nowrap; }
.mtable td { padding: 9px 2px; text-align: center; background: var(--card); font-family: var(--f-ui); font-feature-settings: "tnum" 1; white-space: nowrap; }
.mtable td:first-child { border-radius: 12px 0 0 12px; font-weight: 700; padding-left: 6px; }
.mtable td:last-child { border-radius: 0 12px 12px 0; padding-right: 6px; }
.mtable td small { display: block; font-size: 10px; color: var(--ink3); font-weight: 400; }
.mtable tr.today td { background: linear-gradient(90deg, rgba(var(--glow-rgb),.35), rgba(var(--glow-rgb),.15)); }
.mtable tr.fri td:first-child { color: var(--gold); }
.mactions { display: flex; gap: 10px; margin-top: 14px; }
.btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 16px; font-weight: 700; font-size: 14.5px; background: linear-gradient(135deg, var(--gold2), var(--gold)); color: var(--accent-ink); box-shadow: 0 8px 20px rgba(var(--glow-rgb),.3); }
[data-theme="kasavu"] .btn { color: #fff; background: linear-gradient(135deg, #d9a521, #8a6408); }
.btn.ghost { background: var(--card); color: var(--ink); border: 1px solid var(--brd); box-shadow: none; }
.btn svg { width: 20px; height: 20px; }
.btn:active { transform: scale(.97); }

/* settings */
.sheet { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; overflow-y: auto; padding: calc(var(--sat) + 8px) 16px calc(var(--sab) + 40px); background: linear-gradient(165deg, var(--bg2) 0%, var(--bg1) 55%, var(--bg3) 100%); animation: sheetIn .38s cubic-bezier(.2,.8,.2,1); scrollbar-width: none; }
.sheet.closing { animation: sheetOut .28s ease forwards; }
.sec { margin-top: 16px; }
.sec > .st { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--gold); letter-spacing: .5px; margin: 0 4px 8px; text-transform: uppercase; }
body:not(.lang-en) .sec > .st { text-transform: none; letter-spacing: 0; font-size: 14.5px; }
.sec > .st svg { width: 18px; height: 18px; }
.sec .card { padding: 4px 14px; }
.srow { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--brd); min-height: 54px; }
.srow:last-child { border-bottom: 0; }
.srow .sl { flex: 1; min-width: 0; }
.srow .sl b { display: block; font-size: 15px; font-weight: 600; line-height: 1.4; }
.srow .sl small { display: block; color: var(--ink2); font-size: 12.5px; line-height: 1.45; }
.srow.col { flex-direction: column; align-items: stretch; }
.segctl { display: flex; background: rgba(0,0,0,.18); border-radius: 12px; padding: 3px; gap: 2px; flex-wrap: nowrap; }
[data-theme="kasavu"] .segctl { background: rgba(184,134,11,.1); }
.segctl button { flex: 1; padding: 7px 8px; border-radius: 9px; font-size: 13px; white-space: nowrap; color: var(--ink2); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.segctl button.on { background: var(--gold); color: var(--accent-ink); font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.themes { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 8px 0 4px; }
.theme-sw { border-radius: 14px; aspect-ratio: .62; position: relative; overflow: hidden; border: 2px solid transparent; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.theme-sw.on { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 8px 18px rgba(var(--glow-rgb),.35); }
.theme-sw .lbl { position: absolute; left: 0; right: 0; bottom: 0; font-size: 9.5px; padding: 3px 2px; text-align: center; background: rgba(0,0,0,.45); color: #fff; line-height: 1.25; }
.theme-sw .dot { position: absolute; top: 18%; left: 50%; transform: translateX(-50%); width: 46%; aspect-ratio: 1; border-radius: 50%; }
/* 13 themes: 3 columns on phones (last row: SHABAB Glow is first, so the grid reads 3x4 + 1), 7 on tablets / TV */
@media (min-width: 521px) { .themes { grid-template-columns: repeat(7, 1fr); } }
@media (max-width: 520px) { .themes { grid-template-columns: repeat(3, 1fr); gap: 8px; } .theme-sw { aspect-ratio: 1.05; } .theme-sw .lbl { font-size: 10.5px; } }
.fonts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 0 6px; }
.fontc { padding: 10px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1.5px solid var(--brd); text-align: start; }
[data-theme="kasavu"] .fontc { background: rgba(255,255,255,.8); }
.fontc.on { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--glow-rgb),.18); }
.fontc .s { font-size: 21px; line-height: 1.5; display: block; }
.fontc small { font-size: 11px; color: var(--ink2); font-family: var(--f-ui); }
.stepper { display: inline-flex; align-items: center; gap: 4px; }
.stepper button { width: 32px; height: 32px; border-radius: 10px; background: var(--card2); display: grid; place-items: center; }
.stepper button svg { width: 16px; height: 16px; }
.stepper span { min-width: 44px; text-align: center; font-weight: 700; font-family: var(--f-ui); direction: ltr; }
select.sel { appearance: none; -webkit-appearance: none; background: var(--card2); border: 1px solid var(--brd); border-radius: 12px; padding: 9px 30px 9px 12px; max-width: 190px; font-size: 13.5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f5c542' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
body.rtl select.sel { background-position: left 10px center; padding: 9px 12px 9px 30px; }
select.sel option { color: #111; background: #fff; }
input.txt { background: var(--card2); border: 1px solid var(--brd); border-radius: 12px; padding: 10px 12px; outline: none; width: 100%; }
.perm { display: flex; align-items: center; gap: 10px; }
.perm .lamp { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 8px var(--danger); flex: none; }
.perm .lamp.ok { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.fix { padding: 7px 14px; border-radius: 999px; background: var(--gold); color: var(--accent-ink); font-weight: 700; font-size: 12.5px; }
.offgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 6px 0 8px; }
.offgrid .o { text-align: center; padding: 8px 4px; border-radius: 12px; background: rgba(255,255,255,.05); }
.offgrid .o small { display: block; font-size: 12px; color: var(--ink2); }
.voice { display: flex; gap: 8px; align-items: center; }
.list-sheet .city { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 12px 14px; border-bottom: 1px solid var(--brd); text-align: start; }
.list-sheet .city small { color: var(--ink3); }
.list-sheet .city.on { color: var(--gold); }
.list-sheet .rg { font-size: 12.5px; color: var(--gold); font-weight: 700; padding: 14px 14px 4px; }
.about { position: relative; text-align: center; padding: 18px 14px; margin: 0 -14px; border-radius: var(--r); overflow: hidden; isolation: isolate; }
.about::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: url(splash.webp) center 30% / cover no-repeat; opacity: .55; }
.about::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: linear-gradient(180deg, rgba(4,22,64,.25), rgba(4,22,64,.92) 55%, var(--bg1)); }
.about, .about small, .about p { color: #eaf4ff; } .about small { color: rgba(234,244,255,.8) !important; } .about p { color: rgba(234,244,255,.6) !important; }
.about .lg { width: 132px; height: 132px; margin: 0 auto 6px; filter: drop-shadow(0 8px 26px rgba(40,180,255,.55)); animation: float 7s ease-in-out infinite; }
.about .typer { color: #7fe3ff; }
.brandlogo { display: block; width: 100%; height: 100%; object-fit: contain; }
.about b { display: block; font-size: 20px; font-family: var(--f-head), var(--f-ml); }
.typer { min-height: 48px; color: var(--gold); font-size: 15px; margin-top: 8px; }
.acc-table { width: 100%; font-size: 12.5px; border-collapse: collapse; direction: ltr; }
.acc-table td, .acc-table th { padding: 5px 4px; text-align: center; border-bottom: 1px solid var(--brd); }
.acc-table .bad { color: var(--danger); } .acc-table .good { color: var(--ok); }
.toast { position: fixed; z-index: 40; left: 50%; bottom: calc(var(--sab) + 96px); transform: translate(-50%, 20px); padding: 10px 18px; border-radius: 999px; background: rgba(0,0,0,.78); color: #fff; font-size: 13.5px; opacity: 0; transition: all .3s; pointer-events: none; max-width: 88vw; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* splash: SB's official splash art (splash.webp, 9:16, center-crop) + Malayalam title animation */
#splash { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 50; overflow: hidden; background: #04163f; transition: opacity .6s, transform .6s; }
#splash.out { opacity: 0; transform: scale(1.06); pointer-events: none; }
#splash .art { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(splash.webp) center / cover no-repeat; animation: splashArt 2.2s cubic-bezier(.2,.7,.2,1) both; }
#splash .art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(180deg, transparent, rgba(3,14,40,.85)); }
#splash .rays { position: absolute; top: -20%; left: -40%; width: 60%; height: 140%; background: linear-gradient(100deg, transparent 40%, rgba(120,220,255,.16) 50%, transparent 60%); transform: skewX(-12deg) translateX(-100%); animation: splashRay 2.2s .6s ease-in-out forwards; pointer-events: none; }
#splash .t1 { position: absolute; left: 16px; right: 16px; top: 69%; text-align: center; font-family: "Manjari", var(--f-mlh), var(--f-ar-ui), sans-serif; font-weight: 700; font-size: 36px; color: #eaf8ff; line-height: 1.4; text-shadow: 0 2px 18px rgba(0,0,0,.6); }
#splash .t1 .g { display: inline-block; opacity: 0; transform: translateY(18px); animation: splashGlyph .7s cubic-bezier(.2,.8,.2,1) forwards; text-shadow: 0 0 22px rgba(80,210,255,.95), 0 2px 10px rgba(0,0,0,.6); }
#splash .t3 { position: absolute; left: 0; right: 0; bottom: calc(var(--sab) + 26px); font-size: 12.5px; letter-spacing: .4px; color: rgba(255,255,255,.7); opacity: 0; animation: fadeUp .8s 1.6s forwards; text-align: center; text-shadow: 0 1px 8px rgba(0,0,0,.7); }

/* ---------------- BIO Night theme: glass + gradients + micro-animations ---------------- */
.bio-orb { position: absolute; border-radius: 50%; filter: blur(40px); animation: breathe 10s ease-in-out infinite; }
.bio-orb.teal { width: 560px; height: 420px; right: -200px; top: -160px; background: radial-gradient(ellipse, rgba(31,209,179,.34), transparent 65%); }
.bio-orb.cyan { width: 420px; height: 420px; left: -160px; top: 30%; background: radial-gradient(circle, rgba(56,189,248,.22), transparent 65%); animation-delay: -4s; }
.bio-orb.amber { width: 520px; height: 380px; left: -120px; bottom: -160px; background: radial-gradient(ellipse, rgba(227,181,82,.16), transparent 65%); animation-delay: -7s; }
.bio-dots { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: .5; background-image: radial-gradient(rgba(143,177,194,.16) 1px, transparent 1.5px); background-size: 22px 22px; animation: bioDrift 30s linear infinite; }
.bio-ring { position: absolute; width: 520px; height: 520px; right: -200px; bottom: -220px; border-radius: 50%; border: 1px solid rgba(31,209,179,.12); box-shadow: inset 0 0 0 60px rgba(31,209,179,.025), inset 0 0 0 61px rgba(31,209,179,.06); animation: spin 120s linear infinite; }
.bio-ring::before { content: ""; position: absolute; top: -1px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #1fd1b3; box-shadow: 0 0 18px #1fd1b3, 0 0 40px rgba(31,209,179,.6); }
.bio-mark { position: absolute; right: -40px; top: calc(var(--sat) + 40px); width: 220px; height: 220px; opacity: .07; object-fit: contain; filter: saturate(0); }
@keyframes bioDrift { to { background-position: 22px 44px; } }
@keyframes bioGlow { 0%, 100% { box-shadow: var(--shadow), 0 0 0 1px rgba(31,209,179,.25), 0 0 26px rgba(31,209,179,.18); } 50% { box-shadow: var(--shadow), 0 0 0 1px rgba(31,209,179,.45), 0 0 46px rgba(31,209,179,.34); } }
@keyframes bioSweep { from { transform: translateX(-120%) skewX(-18deg); } 45%, 100% { transform: translateX(260%) skewX(-18deg); } }
[data-theme="bio"] #bg { background: radial-gradient(1200px 700px at 85% -10%, rgba(31,209,179,.10), transparent 60%), radial-gradient(900px 600px at -10% 110%, rgba(227,181,82,.06), transparent 60%), linear-gradient(160deg, #06121f, #0b1d33 60%, #0b1220); }
[data-theme="bio"] .card { background: linear-gradient(160deg, rgba(18,44,70,.78), rgba(10,27,46,.7)); border-color: var(--brd); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06); }
[data-theme="bio"] .hero-title h1 { background: linear-gradient(90deg, #8ff5e2, #1fd1b3 45%, #38bdf8); -webkit-background-clip: text; background-clip: text; }
[data-theme="bio"] .flourish { color: #1fd1b3; opacity: .7; }
[data-theme="bio"] .clock .time { text-shadow: 0 0 30px rgba(56,189,248,.25); }
[data-theme="bio"] .clock .time .sec { color: #1fd1b3; }
[data-theme="bio"] .next { border: 1px solid rgba(31,209,179,.35); background: linear-gradient(160deg, rgba(31,209,179,.14), rgba(14,34,56,.6) 45%, rgba(56,189,248,.08)); animation: bioGlow 5s ease-in-out infinite; overflow: hidden; }
[data-theme="bio"] .next::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34%; background: linear-gradient(90deg, transparent, rgba(143,245,226,.09), transparent); animation: bioSweep 7s ease-in-out infinite; pointer-events: none; }
[data-theme="bio"] .next .arch { color: #1fd1b3; opacity: .4; }
[data-theme="bio"] .next .lbl { color: #e3b552; }
[data-theme="bio"] .count .slot { background: rgba(7,24,42,.75); color: #8ff5e2; border: 1px solid rgba(31,209,179,.18); box-shadow: inset 0 -12px 18px rgba(0,0,0,.25), 0 0 12px rgba(31,209,179,.08); }
[data-theme="bio"] .ring .trk { stroke: rgba(31,209,179,.14); }
[data-theme="bio"] .ring .bar { stroke: url(#ringGrad); }
[data-theme="bio"] .prow { transition: transform .18s, box-shadow .25s, border-color .25s; }
[data-theme="bio"] .prow:active { transform: scale(.985); border-color: rgba(31,209,179,.45); }
[data-theme="bio"] .prow .pic, [data-theme="bio"] .grp .gi, [data-theme="bio"] .prompt .pic, [data-theme="bio"] .tvrow .ic { background: linear-gradient(135deg, rgba(31,209,179,.26), rgba(227,181,82,.14)); color: #1fd1b3; border: 1px solid rgba(31,209,179,.25); }
[data-theme="bio"] .prow .pic svg { filter: drop-shadow(0 0 6px rgba(31,209,179,.5)); }
[data-theme="bio"] .prow.now { background: linear-gradient(90deg, rgba(31,209,179,.18), var(--card) 65%); }
[data-theme="bio"] .prow.now::before { background: #1fd1b3; box-shadow: 0 0 14px #1fd1b3; }
[data-theme="bio"] .prow .mode { background: rgba(7,24,42,.55); border: 1px solid rgba(143,177,194,.12); }
[data-theme="bio"] .tag { background: linear-gradient(135deg, #f3d38a, #e3b552); color: #1a1203; box-shadow: 0 0 12px rgba(227,181,82,.45); }
[data-theme="bio"] .extras .x { background: rgba(7,24,42,.5); border: 1px solid rgba(143,177,194,.12); }
[data-theme="bio"] .extras .x svg { color: #38bdf8; }
[data-theme="bio"] nav.tabs { background: rgba(8,24,42,.82); border-color: rgba(31,209,179,.22); box-shadow: 0 12px 34px rgba(0,0,0,.45), 0 0 0 1px rgba(31,209,179,.06); }
[data-theme="bio"] nav.tabs button.on { color: #1fd1b3; }
[data-theme="bio"] nav.tabs button.on svg { filter: drop-shadow(0 0 8px rgba(31,209,179,.7)); }
[data-theme="bio"] nav.tabs button.on::after { background: linear-gradient(90deg, #1fd1b3, #38bdf8); box-shadow: 0 0 12px #1fd1b3; }
[data-theme="bio"] .pill svg, [data-theme="bio"] .clock .dates .hijri { color: #1fd1b3; }
[data-theme="bio"] .seg.on, [data-theme="bio"] .chip.on, [data-theme="bio"] .qtabs button.on, [data-theme="bio"] .segctl button.on, [data-theme="bio"] .fix, [data-theme="bio"] .tvsetup .opt.on, [data-theme="bio"] .tvsetup .big { background: linear-gradient(135deg, #1fd1b3, #10b981); color: #04261f; border-color: transparent; box-shadow: 0 0 18px rgba(31,209,179,.3); }
[data-theme="bio"] .btn { background: linear-gradient(135deg, #1fd1b3, #10b981); color: #04261f; box-shadow: 0 8px 20px rgba(31,209,179,.28); }
[data-theme="bio"] .btn.ghost { background: var(--card); color: var(--ink); box-shadow: none; }
[data-theme="bio"] .item { background: rgba(7,24,42,.5); border-color: rgba(143,177,194,.12); transition: transform .15s, border-color .2s, box-shadow .2s; }
[data-theme="bio"] .item:active { border-color: #1fd1b3; box-shadow: var(--glow); }
[data-theme="bio"] .item .num { background: linear-gradient(135deg, #1fd1b3, #10b981); color: #04261f; }
[data-theme="bio"] .grp.big { background: linear-gradient(160deg, rgba(31,209,179,.16), rgba(14,34,56,.7) 50%, rgba(227,181,82,.08)); border-color: rgba(31,209,179,.35); }
[data-theme="bio"] .streak b { color: #e3b552; }
[data-theme="bio"] .rhead { background: linear-gradient(180deg, #0b1d33, rgba(11,29,51,.88)); border-bottom: 1px solid var(--brd); }
[data-theme="bio"] .rhead .tt .ar { color: #8ff5e2; }
[data-theme="bio"] .arabic .aya, [data-theme="bio"] .arabic .sname { color: #e3b552; }
[data-theme="bio"] .wbw .w { background: rgba(7,24,42,.55); } [data-theme="bio"] .wbw .w .m { color: #1fd1b3; }
[data-theme="bio"] .meaning .ml { color: #38bdf8; }
[data-theme="bio"] .ofpill { background: rgba(31,209,179,.12); border-color: rgba(31,209,179,.3); color: #8ff5e2; }
[data-theme="bio"] .cntpill { background: linear-gradient(135deg, #f3d38a, #e3b552); color: #1a1203; box-shadow: 0 4px 14px rgba(227,181,82,.3); }
[data-theme="bio"] .notebox { background: rgba(56,189,248,.1); border-color: rgba(56,189,248,.3); }
[data-theme="bio"] .tapbtn { background: radial-gradient(circle at 35% 30%, rgba(31,209,179,.22), rgba(7,24,42,.4) 60%); border-color: rgba(31,209,179,.4); box-shadow: var(--shadow), inset 0 0 30px rgba(31,209,179,.14), 0 0 30px rgba(31,209,179,.12); }
[data-theme="bio"] .tapbtn .n { color: #8ff5e2; text-shadow: 0 0 18px rgba(31,209,179,.5); }
[data-theme="bio"] .player { background: linear-gradient(135deg, #0e2238, #06121f); border-color: rgba(31,209,179,.4); }
[data-theme="bio"] .player button.pp { background: linear-gradient(135deg, #1fd1b3, #10b981); color: #04261f; box-shadow: 0 6px 18px rgba(31,209,179,.45); }
[data-theme="bio"] .celebrate .msg { background: linear-gradient(135deg, #0e2238, #06121f); border-color: rgba(31,209,179,.5); }
[data-theme="bio"] .celebrate i { background: #1fd1b3; } [data-theme="bio"] .celebrate i:nth-child(odd) { background: #e3b552; }
[data-theme="bio"] .mtable td { background: rgba(14,34,56,.7); }
[data-theme="bio"] .mtable tr.today td { background: linear-gradient(90deg, rgba(31,209,179,.32), rgba(31,209,179,.12)); }
[data-theme="bio"] .mtable th, [data-theme="bio"] .mtable tr.fri td:first-child { color: #1fd1b3; }
[data-theme="bio"] .sheet { background: radial-gradient(900px 500px at 90% -10%, rgba(31,209,179,.12), transparent 60%), linear-gradient(160deg, #0b1d33, #06121f 60%, #0b1220); }
[data-theme="bio"] .sec > .st { color: #1fd1b3; }
[data-theme="bio"] .segctl { background: rgba(7,24,42,.7); border: 1px solid rgba(143,177,194,.12); }
[data-theme="bio"] .fontc { background: rgba(7,24,42,.5); } [data-theme="bio"] .fontc.on { border-color: #1fd1b3; box-shadow: 0 0 0 3px rgba(31,209,179,.18); }
[data-theme="bio"] select.sel, [data-theme="bio"] input.txt { background-color: rgba(7,24,42,.7); }
[data-theme="bio"] select.sel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231fd1b3' stroke-width='1.6'/%3E%3C/svg%3E"); }
[data-theme="bio"] .theme-sw.on { border-color: #1fd1b3; }
[data-theme="bio"] .sw.on { background: linear-gradient(135deg, #1fd1b3, #10b981); }
[data-theme="bio"] .credit b { color: #e3b552; }
[data-theme="bio"] .typer { color: #1fd1b3; }
[data-theme="bio"] .compass .marker { background: #1fd1b3; box-shadow: 0 0 12px #1fd1b3; }
[data-theme="bio"] .qinfo b { color: #8ff5e2; }
[data-theme="bio"] .toast { background: rgba(14,34,56,.95); border: 1px solid rgba(31,209,179,.35); border-inline-start: 4px solid #1fd1b3; }

/* ================= build 202: 6 more themes (12 in total). Tokens first, then art, then polish. ================= */
/* SAFARI Classic - the old SHABAB SAFARI PRO look (SAFARI 1.2.0 app.css / 1.3 "Classic burgundy" preset): #22040f #420b22 #5a0a2a #8d1745, magenta #e0407e #c2185b, gold #e3b552 #f4d38a #b8862a, text #fbeef3 / #d9aebf */
[data-theme="classic"] {
  --f-head: "Cinzel";
  --bg1: #22040f; --bg2: #420b22; --bg3: #2a0613;
  --ink: #fbeef3; --ink2: rgba(251,238,243,.78); --ink3: rgba(251,238,243,.6);
  --gold: #e3b552; --gold2: #f4d38a; --gold3: #b8862a;
  --card: rgba(255,255,255,.065); --card2: rgba(255,255,255,.1); --brd: rgba(227,181,82,.22); --brd-gold: rgba(227,181,82,.5);
  --accent: #e3b552; --accent-ink: #3a0a1e; --soft: #f48fb6;
  --glow-rgb: 227,181,82; --soft-rgb: 224,64,126; --glow: 0 0 18px rgba(227,181,82,.3);
  --shadow: 0 18px 40px rgba(0,0,0,.42), 0 2px 6px rgba(20,2,10,.4);
  --nav: rgba(48,8,24,.82); --danger: #ff5d73; --ok: #3ccf91;
}
/* Madinah Marble - LIGHT: ivory marble, green dome, gold lines */
[data-theme="marble"] {
  --f-head: "Cormorant Garamond";
  --bg1: #f7f3ea; --bg2: #fbf9f3; --bg3: #ece4d2;
  --ink: #1b2a21; --ink2: rgba(27,42,33,.8); --ink3: rgba(27,42,33,.66);
  --gold: #1f7a4d; --gold2: #2f9a66; --gold3: #145a38; --lux: #a8842f;
  --card: rgba(255,255,255,.66); --card2: rgba(255,255,255,.86); --brd: rgba(168,132,47,.32); --brd-gold: rgba(168,132,47,.62);
  --accent: #1f7a4d; --accent-ink: #ffffff; --soft: #1f7a4d;
  --glow-rgb: 31,122,77; --soft-rgb: 31,122,77; --glow: 0 0 16px rgba(31,122,77,.22);
  --shadow: 0 10px 26px rgba(80,64,30,.13), 0 2px 6px rgba(80,64,30,.1);
  --nav: rgba(253,251,246,.88); --danger: #b42318; --ok: #157347; --tip: #9a5200; --tipbg: rgba(214,130,30,.1); --src: #1f7a4d; --srcbg: rgba(31,122,77,.08);
  color-scheme: light;
}
/* Oman Sunset - orange -> magenta -> purple sky, dunes, gold */
[data-theme="sunset"] {
  --f-head: "Montserrat";
  --bg1: #1d0828; --bg2: #4a1248; --bg3: #14041a;
  --ink: #fff4ee; --ink2: rgba(255,244,238,.8); --ink3: rgba(255,244,238,.62);
  --gold: #ffc861; --gold2: #ffe3a3; --gold3: #e8892e;
  --card: rgba(42,10,46,.46); --card2: rgba(58,14,60,.6); --brd: rgba(255,200,97,.22); --brd-gold: rgba(255,200,97,.55);
  --accent: #ffc861; --accent-ink: #2a1000; --soft: #ffa3bf;
  --glow-rgb: 255,170,80; --soft-rgb: 255,130,170; --glow: 0 0 18px rgba(255,170,80,.35);
  --shadow: 0 14px 34px rgba(20,2,20,.45), 0 2px 6px rgba(20,2,20,.35);
  --nav: rgba(34,8,36,.82); --blur: blur(16px) saturate(150%);
}
/* Ramadan Lantern - deep indigo / purple, lanterns, gold stars */
[data-theme="lantern"] {
  --f-head: "Marcellus";
  --bg1: #0d0626; --bg2: #24124f; --bg3: #07031a;
  --ink: #f6f1ff; --ink2: rgba(246,241,255,.78); --ink3: rgba(246,241,255,.6);
  --gold: #f6c453; --gold2: #ffe6a0; --gold3: #c48a1c;
  --card: rgba(160,130,255,.09); --card2: rgba(160,130,255,.15); --brd: rgba(196,167,255,.2); --brd-gold: rgba(246,196,83,.5);
  --accent: #f6c453; --accent-ink: #1f1300; --soft: #c4a7ff;
  --glow-rgb: 246,196,83; --soft-rgb: 196,167,255; --glow: 0 0 18px rgba(246,196,83,.35);
  --shadow: 0 14px 34px rgba(4,0,20,.5), 0 2px 6px rgba(4,0,20,.4);
  --nav: rgba(16,8,44,.8);
}
/* Muscat Ocean - LIGHT-ish: turquoise sea, white + sand */
[data-theme="ocean"] {
  --f-head: "Inter";
  --bg1: #e8f7f6; --bg2: #f6fcfc; --bg3: #c4e9e7;
  --ink: #08303a; --ink2: rgba(8,48,58,.8); --ink3: rgba(8,48,58,.66);
  --gold: #0a7680; --gold2: #13a3a6; --gold3: #075760; --lux: #c49a55;
  --card: rgba(255,255,255,.66); --card2: rgba(255,255,255,.86); --brd: rgba(10,118,128,.2); --brd-gold: rgba(196,154,85,.6);
  --accent: #0a7680; --accent-ink: #ffffff; --soft: #0a7680;
  --glow-rgb: 10,150,160; --soft-rgb: 10,118,128; --glow: 0 0 16px rgba(10,150,160,.25);
  --shadow: 0 10px 26px rgba(8,60,70,.13), 0 2px 6px rgba(8,60,70,.1);
  --nav: rgba(250,254,254,.88); --danger: #b42318; --ok: #0f7a4a; --tip: #9a5200; --tipbg: rgba(214,130,30,.1); --src: #0a7680; --srcbg: rgba(10,118,128,.08);
  color-scheme: light;
}
/* Royal Black Diamond - black glass, silver + ice blue */
[data-theme="diamond"] {
  --f-head: "Montserrat";
  --bg1: #050608; --bg2: #10141c; --bg3: #000000;
  --ink: #f2f6fb; --ink2: rgba(242,246,251,.76); --ink3: rgba(242,246,251,.58);
  --gold: #d7e3f4; --gold2: #ffffff; --gold3: #8fa3bd;
  --card: rgba(255,255,255,.045); --card2: rgba(255,255,255,.08); --brd: rgba(200,220,245,.16); --brd-gold: rgba(200,225,255,.42);
  --accent: #d7e3f4; --accent-ink: #0a0f18; --soft: #9fd8ff;
  --glow-rgb: 170,215,255; --soft-rgb: 159,216,255; --glow: 0 0 18px rgba(170,215,255,.3);
  --shadow: 0 18px 40px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.5);
  --nav: rgba(10,12,16,.82); --blur: blur(18px) saturate(120%);
}

/* SHABAB Glow - DEFAULT (build 202): exactly the logo colours. Navy #030b1f -> #06204a, cyan neon #22d3ee / #38bdf8, silver #e6f0ff -> #b8c7dd, royal blue glass #1d4ed8 / #2563eb */
[data-theme="glow"] {
  --f-head: "Montserrat";
  --bg1: #030b1f; --bg2: #06204a; --bg3: #020713;
  --ink: #eef5ff; --ink2: rgba(230,240,255,.8); --ink3: rgba(230,240,255,.62);
  --gold: #22d3ee; --gold2: #a5f3fc; --gold3: #0891b2;
  --card: rgba(29,78,216,.16); --card2: rgba(37,99,235,.24); --brd: rgba(56,189,248,.3); --brd-gold: rgba(34,211,238,.62);
  --accent: #22d3ee; --accent-ink: #021526; --soft: #38bdf8;
  --glow-rgb: 34,211,238; --soft-rgb: 56,189,248; --glow: 0 0 18px rgba(34,211,238,.4);
  --shadow: 0 14px 34px rgba(0,4,20,.55), 0 2px 6px rgba(0,4,20,.4);
  --nav: rgba(4,16,44,.82); --ok: #34d399; --r: 20px;
}
[data-theme="glow"] #bg { background: #030b1f; }
.gl-base { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(800px 560px at 50% 18%, #0b3a86 0%, #06204a 38%, transparent 75%), linear-gradient(180deg, #041434, #030b1f 60%, #020713); }
.gl-rays { position: absolute; left: 50%; top: -30%; width: 220%; height: 120%; margin-left: -110%; background: repeating-conic-gradient(from 0deg at 50% 0%, rgba(56,189,248,.075) 0deg 3deg, transparent 3deg 11deg); -webkit-mask: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%); mask: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%); animation: glRays 40s ease-in-out infinite alternate; }
.gl-orb { position: absolute; left: 50%; top: 4%; width: 460px; height: 460px; margin-left: -230px; border-radius: 50%; background: radial-gradient(circle, rgba(34,211,238,.28), rgba(29,78,216,.18) 40%, transparent 70%); filter: blur(10px); animation: breathe 7s ease-in-out infinite; }
.gl-crescent { position: absolute; width: 330px; height: 330px; left: -150px; bottom: 90px; opacity: .14; filter: drop-shadow(0 0 18px rgba(56,189,248,.8)); }
.gl-waves { position: absolute; right: -14px; bottom: 150px; width: 84px; height: 140px; opacity: .45; filter: drop-shadow(0 0 6px #22d3ee); }
.gl-waves path { animation: glWave 2.6s ease-in-out infinite; } .gl-waves .w2 { animation-delay: .35s; } .gl-waves .w3 { animation-delay: .7s; }
.gl-frame { position: absolute; top: calc(var(--sat) + 6px); right: 6px; bottom: 6px; left: 6px; border-radius: 34px; border: 1.5px solid rgba(34,211,238,.32); box-shadow: 0 0 18px rgba(34,211,238,.25), inset 0 0 26px rgba(34,211,238,.12); }
.gl-vig { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0,3,12,.7) 100%); }
@keyframes glRays { from { transform: rotate(-4deg); opacity: .8; } to { transform: rotate(4deg); opacity: 1; } }
@keyframes glWave { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
[data-theme="glow"] .card { border: 1px solid rgba(34,211,238,.42); background: linear-gradient(160deg, rgba(37,99,235,.26), rgba(8,30,80,.55) 55%, rgba(4,16,44,.6)); box-shadow: var(--shadow), 0 0 14px rgba(34,211,238,.16), inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 18px rgba(34,211,238,.06); }
[data-theme="glow"] .next .name, [data-theme="glow"] .h2 { color: #eef5ff; text-shadow: 0 0 16px rgba(56,189,248,.35); }
[data-theme="glow"] .hero-title h1, [data-theme="glow"] .clock .time { background: linear-gradient(180deg, #ffffff 0%, #e6f0ff 40%, #b8c7dd 75%, #8ea3c4); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="glow"] .clock .time { text-shadow: none; filter: drop-shadow(0 0 14px rgba(34,211,238,.4)); }
[data-theme="glow"] .clock .time .sec { -webkit-text-fill-color: #22d3ee; color: #22d3ee; }
[data-theme="glow"] .clock .time .ap { -webkit-text-fill-color: rgba(230,240,255,.8); }
[data-theme="glow"] .hero-title h1 { filter: drop-shadow(0 0 10px rgba(34,211,238,.35)); }
[data-theme="glow"] .next { border: 1.5px solid #22d3ee; background: linear-gradient(160deg, rgba(37,99,235,.38), rgba(6,32,74,.7) 55%, rgba(34,211,238,.12)); }
[data-theme="glow"] .ring .bar { stroke: #22d3ee; } [data-theme="glow"] .ring > svg { filter: drop-shadow(0 0 7px rgba(34,211,238,.85)); }
[data-theme="glow"] .count .slot { background: rgba(2,10,30,.7); color: #e6f0ff; border: 1px solid rgba(34,211,238,.35); box-shadow: inset 0 -12px 18px rgba(0,0,0,.3), 0 0 10px rgba(34,211,238,.18); }
[data-theme="glow"] .prow .pic, [data-theme="glow"] .grp .gi { background: linear-gradient(140deg, rgba(37,99,235,.55), rgba(8,30,80,.7)); color: #a5f3fc; border: 1px solid rgba(34,211,238,.45); box-shadow: 0 0 10px rgba(34,211,238,.25); }
[data-theme="glow"] .prow.now { background: linear-gradient(90deg, rgba(34,211,238,.24), rgba(29,78,216,.2) 65%); border-color: #22d3ee; }
[data-theme="glow"] .prow.now::before { background: #22d3ee; box-shadow: 0 0 14px #22d3ee; }
[data-theme="glow"] .btn, [data-theme="glow"] .seg.on, [data-theme="glow"] .chip.on, [data-theme="glow"] .qtabs button.on, [data-theme="glow"] .segctl button.on, [data-theme="glow"] .fix, [data-theme="glow"] .tag, [data-theme="glow"] .item .num, [data-theme="glow"] .player button.pp, [data-theme="glow"] .tvsetup .opt.on, [data-theme="glow"] .tvsetup .big { background: linear-gradient(135deg, #67e8f9, #22d3ee 45%, #0891b2); color: #021526; box-shadow: 0 0 16px rgba(34,211,238,.45); border-color: transparent; }
[data-theme="glow"] .btn.ghost { background: var(--card); color: var(--ink); box-shadow: none; }
[data-theme="glow"] nav.tabs { background: linear-gradient(180deg, rgba(8,30,80,.88), rgba(3,11,31,.9)); border: 1px solid rgba(34,211,238,.45); box-shadow: 0 12px 34px rgba(0,0,0,.5), 0 0 18px rgba(34,211,238,.2); }
[data-theme="glow"] nav.tabs button.on { color: #22d3ee; }
[data-theme="glow"] .rhead { background: linear-gradient(180deg, #06204a, rgba(6,32,74,.9)); border-bottom: 1px solid rgba(34,211,238,.3); }
[data-theme="glow"] .sheet { background: radial-gradient(800px 500px at 50% -10%, rgba(34,211,238,.18), transparent 60%), linear-gradient(170deg, #06204a, #030b1f 60%); }
[data-theme="glow"] .player { background: linear-gradient(135deg, #0b3a86, #030b1f); border-color: #22d3ee; box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 0 16px rgba(34,211,238,.3); }
[data-theme="glow"] .flourish { color: #38bdf8; }
[data-theme="glow"] .cntpill { background: linear-gradient(135deg, #e6f0ff, #b8c7dd); color: #021526; box-shadow: 0 4px 14px rgba(56,189,248,.35); }
[data-theme="glow"] .theme-sw.on { border-color: #22d3ee; }

/* ---- art: SAFARI Classic ---- */
[data-theme="classic"] #bg { background: radial-gradient(1200px 700px at 85% -10%, rgba(224,64,126,.28), transparent 60%), radial-gradient(900px 600px at -10% 110%, rgba(227,181,82,.12), transparent 60%), linear-gradient(160deg, #2a0513, #420b22 55%, #2a0613); }
.cl-damask { position: absolute; top: -90px; right: -60px; bottom: -90px; left: -60px; opacity: .2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='90'%3E%3Cg fill='none' stroke='%23e3b552' stroke-width='.9'%3E%3Cpath d='M30 0C46 14 46 31 30 45 14 59 14 76 30 90M30 0C14 14 14 31 30 45 46 59 46 76 30 90'/%3E%3Cpath d='M0 0C16 14 16 31 0 45M60 0C44 14 44 31 60 45M0 45c16 14 16 31 0 45M60 45c-16 14-16 31 0 45' stroke-opacity='.6'/%3E%3Cpath d='M30 39l3 6-3 6-3-6zM0 84l3 6M60 84l-3 6' fill='%23e3b552' fill-opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
  animation: clDrift 70s linear infinite; }
.cl-glow { position: absolute; border-radius: 50%; filter: blur(30px); animation: breathe 10s ease-in-out infinite; }
.cl-glow.pink { width: 520px; height: 440px; right: -220px; top: -180px; background: radial-gradient(circle, rgba(224,64,126,.42), transparent 65%); }
.cl-glow.gold { width: 460px; height: 380px; left: -200px; bottom: -150px; background: radial-gradient(circle, rgba(227,181,82,.2), transparent 65%); animation-delay: -5s; }
.cl-arch { position: absolute; left: 0; right: 0; top: var(--sat); width: 100%; height: 140px; color: #e3b552; opacity: .32; }
.cl-rose { color: #e3b552; opacity: .14; left: auto; right: -170px; bottom: -120px; }
.cl-sheen { position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(244,211,138,.08), transparent); transform: skewX(-14deg); animation: fxSheen 12s ease-in-out infinite; }
@keyframes clDrift { to { transform: translate(60px, 90px); } }

/* ---- art: Madinah Marble ---- */
[data-theme="marble"] #bg { background: radial-gradient(900px 600px at 80% -10%, #ffffff, transparent 60%), linear-gradient(170deg, #fbf9f3, #f3eee2 55%, #ebe2cf); }
.mb-marble { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.mb-light { position: absolute; top: -20%; bottom: -20%; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent); transform: skewX(-16deg); animation: fxSheen 14s ease-in-out infinite; }
.mb-frame { position: absolute; left: 0; right: 0; top: var(--sat); width: 100%; height: 120px; color: #a8842f; opacity: .55; }
.mb-glow { position: absolute; left: 50%; bottom: 40px; width: 420px; height: 300px; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 70%, rgba(31,122,77,.18), transparent 70%); animation: breathe 8s ease-in-out infinite; }
.mb-dome { position: absolute; left: 50%; bottom: 0; width: min(520px, 112%); height: 240px; transform: translateX(-50%); opacity: .5; }

/* ---- art: Oman Sunset ---- */
[data-theme="sunset"] #bg { background: #1d0828; }
.ss-sky { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, #1d0a3a 0%, #3e1258 22%, #7a1d6a 42%, #c22f66 58%, #ef6a3c 72%, #ffb04a 82%, #ffd27a 88%); }
.ss-star { background: #ffe9c2; box-shadow: 0 0 5px rgba(255,233,194,.8); }
.ss-sun { position: absolute; left: 50%; bottom: 120px; width: 240px; height: 240px; margin-left: -120px; border-radius: 50%; background: radial-gradient(circle, #fff3c9 0%, #ffd27a 30%, #ff9a3d 52%, rgba(255,120,60,0) 70%); animation: ssSun 9s ease-in-out infinite; }
.ss-haze { position: absolute; left: 0; right: 0; bottom: 110px; height: 90px; background: repeating-linear-gradient(180deg, rgba(255,210,140,.10) 0 2px, transparent 2px 9px); filter: blur(1px); animation: ssHaze 6s ease-in-out infinite; }
.ss-birds { position: absolute; top: 34%; left: -90px; width: 80px; height: 30px; animation: ssBirds 38s linear infinite; }
.ss-dunes { position: absolute; left: 0; bottom: 0; width: 100%; }
.ss-dunes.back { height: 210px; left: -10%; width: 120%; bottom: 40px; animation: ssDune 46s ease-in-out infinite alternate; }
.ss-dunes.mid { height: 190px; bottom: 10px; }
.ss-dunes.front { height: 150px; }
@keyframes ssSun { 0%, 100% { transform: scale(1); opacity: .95; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes ssHaze { 0%, 100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(-3px); opacity: 1; } }
@keyframes ssBirds { 0% { transform: translate(0, 0); } 50% { transform: translate(60vw, -24px); } 100% { transform: translate(calc(100vw + 180px), 8px); } }
@keyframes ssDune { to { transform: translateX(6%); } }

/* ---- art: Ramadan Lantern ---- */
[data-theme="lantern"] #bg { background: #0d0626; }
.lt-sky { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(900px 520px at 50% -8%, rgba(126,80,230,.42), transparent 62%), radial-gradient(700px 500px at 100% 100%, rgba(246,196,83,.08), transparent 60%), linear-gradient(180deg, #1c0d48 0%, #120836 45%, #07031a 100%); }
.lt-star { background: #ffe6a0; box-shadow: 0 0 6px rgba(255,214,120,.9); }
.lt-star.big { clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); border-radius: 0; transform: scale(2.4); box-shadow: none; }
.lt-moon { position: absolute; width: 120px; height: 120px; right: -34px; top: 38%; opacity: .5; filter: drop-shadow(0 0 22px rgba(246,196,83,.6)); animation: float 9s ease-in-out infinite; }
.lt { --len: 80px; --ls: 1; position: absolute; top: 0; width: calc(60px * var(--ls)); transform-origin: 50% 0; animation: ltSway 6.5s ease-in-out infinite alternate; }
.lt.l1 { left: 1.5%; } .lt.l2 { left: 11%; } .lt.r1 { right: 1.5%; } .lt.r2 { right: 9%; }
.lt-cord { display: block; width: 1.2px; height: var(--len); margin: 0 auto; background: linear-gradient(180deg, rgba(246,196,83,.2), #c48a1c); }
.lt-lamp { display: block; width: 100%; height: calc(120px * var(--ls)); margin-top: -2px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.lt-halo { position: absolute; left: 50%; top: calc(var(--len) + 40px * var(--ls)); width: calc(150px * var(--ls)); height: calc(150px * var(--ls)); margin-left: calc(-75px * var(--ls)); border-radius: 50%; background: radial-gradient(circle, rgba(255,190,80,.45), rgba(255,160,60,.12) 45%, transparent 70%); animation: ltGlow 3.2s ease-in-out infinite alternate; }
.lt-flame { transform-origin: 30px 72px; animation: ltFlicker 1.6s ease-in-out infinite alternate; }
.lt-mist { position: absolute; left: -10%; right: -10%; bottom: -40px; height: 220px; background: radial-gradient(ellipse at 50% 100%, rgba(150,110,255,.22), transparent 70%); animation: breathe 12s ease-in-out infinite; }
@keyframes ltSway { from { transform: rotate(-3.2deg); } to { transform: rotate(3.2deg); } }
@keyframes ltGlow { from { opacity: .65; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } }
@keyframes ltFlicker { 0% { opacity: .75; transform: scale(.92, .96); } 40% { opacity: 1; transform: scale(1.04, 1.06); } 70% { opacity: .85; transform: scale(.97, 1.02); } 100% { opacity: 1; transform: scale(1.02, .98); } }

/* ---- art: Muscat Ocean ---- */
[data-theme="ocean"] #bg { background: #e8f7f6; }
.oc-sky { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, #f7fdfd 0%, #e3f6f5 40%, #c9ecea 72%, #9fdcd8 100%); }
.oc-sun { position: absolute; right: -90px; top: calc(var(--sat) - 90px); width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,1), rgba(255,240,205,.75) 30%, rgba(255,226,170,0) 68%); animation: breathe 10s ease-in-out infinite; }
.oc-cloud { position: absolute; height: 46px; border-radius: 50px; background: rgba(255,255,255,.85); filter: blur(6px); animation: ocCloud 90s linear infinite; }
.oc-cloud.c1 { width: 180px; top: 16%; left: -200px; }
.oc-cloud.c2 { width: 120px; top: 30%; left: -140px; opacity: .7; animation-duration: 120s; animation-delay: -60s; }
.oc-cloud.c3 { width: 220px; top: 8%; left: -240px; opacity: .55; animation-duration: 150s; animation-delay: -30s; }
.oc-gulls { position: absolute; top: 22%; right: -90px; width: 80px; height: 30px; animation: ocGulls 34s linear infinite; }
.oc-hills { position: absolute; left: 0; bottom: 150px; width: 100%; height: 80px; }
.oc-sea { position: absolute; left: 0; right: 0; bottom: 0; height: 170px; overflow: hidden; background: linear-gradient(180deg, transparent 0, transparent 40px, #0b7f86 120px, #075760 100%); }
.oc-wave { position: absolute; left: 0; width: 200%; height: 120px; }
.oc-wave.w1 { top: 0; animation: ocWave 26s linear infinite; }
.oc-wave.w2 { top: 14px; animation: ocWave 18s linear infinite reverse; }
.oc-wave.w3 { top: 30px; animation: ocWave 12s linear infinite; }
.oc-glints { position: absolute; left: 0; right: 0; top: 80px; bottom: 0; background-image: radial-gradient(rgba(255,255,255,.75) 1px, transparent 1.6px); background-size: 34px 18px; opacity: .5; animation: ocGlint 4s ease-in-out infinite; }
@keyframes ocWave { to { transform: translateX(-50%); } }
@keyframes ocCloud { to { transform: translateX(calc(100vw + 300px)); } }
@keyframes ocGulls { 0% { transform: translate(0, 0); } 50% { transform: translate(-55vw, 18px); } 100% { transform: translate(calc(-100vw - 180px), -6px); } }
@keyframes ocGlint { 0%, 100% { opacity: .25; } 50% { opacity: .65; } }

/* ---- art: Royal Black Diamond ---- */
[data-theme="diamond"] #bg { background: #050608; }
.dm-base { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(900px 600px at 50% -12%, rgba(160,200,255,.14), transparent 62%), radial-gradient(700px 500px at 0% 100%, rgba(120,160,220,.07), transparent 60%), linear-gradient(170deg, #10141c, #07080b 55%, #000); }
.dm-pin { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 1px, transparent 1px 7px); }
.dm-spot { position: absolute; width: 560px; height: 560px; left: 50%; top: -300px; margin-left: -280px; border-radius: 50%; background: radial-gradient(circle, rgba(200,230,255,.16), transparent 62%); animation: breathe 9s ease-in-out infinite; }
.dm-gem { position: absolute; width: 300px; height: 255px; right: -90px; bottom: 120px; opacity: .3; transform: rotate(-12deg); animation: dmFloat 12s ease-in-out infinite; }
.dm-gem .f1 { animation: dmFacet 5s ease-in-out infinite; } .dm-gem .f2 { animation: dmFacet 5s 1.6s ease-in-out infinite; } .dm-gem .f3 { animation: dmFacet 5s 3.2s ease-in-out infinite; }
.dm-sp { position: absolute; background: linear-gradient(135deg, #ffffff, #c9d6e6); clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); opacity: 0; animation: dmTwinkle 5s ease-in-out infinite, dmRise 45s linear infinite; }
.dm-sp.ice { background: linear-gradient(135deg, #e8f7ff, #7cc8ff); }
.dm-sheen { position: absolute; top: -20%; bottom: -20%; left: -60%; width: 36%; background: linear-gradient(100deg, transparent, rgba(220,235,255,.07), transparent); transform: skewX(-14deg); animation: fxSheen 10s ease-in-out infinite; }
@keyframes dmTwinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 45% { opacity: .95; transform: scale(1) rotate(45deg); } 60% { opacity: .5; } }
@keyframes dmRise { from { margin-top: 0; } to { margin-top: -160px; } }
@keyframes dmFloat { 0%, 100% { transform: rotate(-12deg) translateY(0); } 50% { transform: rotate(-9deg) translateY(-10px); } }
@keyframes dmFacet { 0%, 100% { fill-opacity: .2; } 50% { fill-opacity: 1; } }

/* ---- shared polish for the 6 new themes (data-fx = dark | light) ---- */
@keyframes fxSheen { 0% { transform: translateX(0) skewX(-14deg); } 55%, 100% { transform: translateX(420%) skewX(-14deg); } }
@keyframes fxGlow { 0%, 100% { box-shadow: var(--shadow), 0 0 0 1px rgba(var(--glow-rgb),.22), 0 0 22px rgba(var(--glow-rgb),.14); } 50% { box-shadow: var(--shadow), 0 0 0 1px rgba(var(--glow-rgb),.42), 0 0 40px rgba(var(--glow-rgb),.3); } }
@keyframes fxSweep { from { transform: translateX(-120%) skewX(-18deg); } 45%, 100% { transform: translateX(300%) skewX(-18deg); } }
[data-fx] .next { animation: fxGlow 6s ease-in-out infinite; overflow: hidden; }
[data-fx] .next::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); animation: fxSweep 8s ease-in-out infinite; pointer-events: none; }
[data-fx] .card { box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.08); }
[data-fx] .prow .pic svg, [data-fx] .grp .gi svg { filter: drop-shadow(0 0 5px rgba(var(--soft-rgb),.45)); }
[data-fx] nav.tabs button.on svg { filter: drop-shadow(0 0 7px rgba(var(--glow-rgb),.65)); }
[data-fx] .clock .time { text-shadow: 0 0 28px rgba(var(--glow-rgb),.22), 0 4px 22px rgba(0,0,0,.25); }

/* SAFARI Classic: magenta + gold buttons like SAFARI 1.2 (--pri-bg), gold hero */
[data-theme="classic"] .hero-title h1 { background: linear-gradient(180deg, #fbe3a8, #e3b552 55%, #b8862a); -webkit-background-clip: text; background-clip: text; }
[data-theme="classic"] .next { background: linear-gradient(120deg, rgba(194,24,91,.32), rgba(90,10,42,.3) 50%, rgba(227,181,82,.16)); }
[data-theme="classic"] .prow .pic, [data-theme="classic"] .grp .gi { background: linear-gradient(140deg, rgba(194,24,91,.4), rgba(227,181,82,.18)); color: #f4d38a; border: 1px solid rgba(227,181,82,.25); }
[data-theme="classic"] .prow.now { background: linear-gradient(90deg, rgba(224,64,126,.3), var(--card) 65%); }
[data-theme="classic"] .tag, [data-theme="classic"] .cntpill { background: linear-gradient(135deg, #f4d38a, #e3b552); color: #3a0a1e; }
[data-theme="classic"] nav.tabs { background: linear-gradient(180deg, rgba(74,11,38,.9), rgba(48,8,24,.9)); border-color: rgba(227,181,82,.28); }
[data-theme="classic"] .grp.big { background: linear-gradient(140deg, rgba(194,24,91,.28), rgba(227,181,82,.14)); }
[data-theme="classic"] .player { background: linear-gradient(135deg, #5a0a2a, #2a0513); }
[data-theme="classic"] .rhead { background: linear-gradient(180deg, #3a0a1e, rgba(58,10,30,.9)); }
[data-theme="classic"] .sheet { background: radial-gradient(1000px 600px at 90% -10%, rgba(224,64,126,.22), transparent 60%), linear-gradient(160deg, #2a0513, #420b22 55%, #2a0613); }

/* Oman Sunset */
[data-theme="sunset"] .hero-title h1 { background: linear-gradient(180deg, #fff1c9, #ffc861 50%, #ff8a3d); -webkit-background-clip: text; background-clip: text; }
[data-theme="sunset"] .next { background: linear-gradient(150deg, rgba(255,170,80,.22), rgba(60,14,60,.55) 50%, rgba(194,47,102,.25)); }
[data-theme="sunset"] .prow .pic, [data-theme="sunset"] .grp .gi { background: linear-gradient(140deg, rgba(255,140,90,.38), rgba(194,47,102,.24)); color: #ffe3a3; }
[data-theme="sunset"] .btn, [data-theme="sunset"] .seg.on, [data-theme="sunset"] .chip.on, [data-theme="sunset"] .segctl button.on, [data-theme="sunset"] .fix, [data-theme="sunset"] .player button.pp { background: linear-gradient(135deg, #ffd27a, #ff9a3d); color: #2a1000; }
[data-theme="sunset"] .sheet { background: linear-gradient(180deg, #2a0b40, #5a1650 50%, #2a0a2e); }
[data-theme="sunset"] .rhead { background: linear-gradient(180deg, #3e1258, rgba(62,18,88,.9)); }

/* Ramadan Lantern */
[data-theme="lantern"] .hero-title h1 { background: linear-gradient(180deg, #fff1c4, #f6c453 55%, #c48a1c); -webkit-background-clip: text; background-clip: text; }
[data-theme="lantern"] .next { background: linear-gradient(160deg, rgba(246,196,83,.16), rgba(60,30,130,.4) 50%, rgba(196,167,255,.1)); }
[data-theme="lantern"] .prow .pic, [data-theme="lantern"] .grp .gi { background: linear-gradient(140deg, rgba(246,196,83,.28), rgba(126,80,230,.22)); color: #ffe6a0; }
[data-theme="lantern"] .sheet { background: radial-gradient(900px 520px at 50% -8%, rgba(126,80,230,.4), transparent 62%), linear-gradient(180deg, #1c0d48, #0d0626); }
[data-theme="lantern"] .rhead { background: linear-gradient(180deg, #1c0d48, rgba(28,13,72,.9)); }

/* Royal Black Diamond: silver gradient borders on black glass */
[data-theme="diamond"] .card { border: 1px solid transparent; background: linear-gradient(160deg, rgba(22,26,34,.82), rgba(8,9,12,.78)) padding-box, linear-gradient(135deg, rgba(255,255,255,.4), rgba(255,255,255,.06) 40%, rgba(159,216,255,.35) 75%, rgba(255,255,255,.1)) border-box; }
[data-theme="diamond"] .hero-title h1 { background: linear-gradient(180deg, #ffffff, #d7e3f4 45%, #8fa3bd); -webkit-background-clip: text; background-clip: text; letter-spacing: 1.2px; }
[data-theme="diamond"] .next .lbl, [data-theme="diamond"] .clock .time .sec { color: #9fd8ff; }
[data-theme="diamond"] .btn, [data-theme="diamond"] .seg.on, [data-theme="diamond"] .chip.on, [data-theme="diamond"] .segctl button.on, [data-theme="diamond"] .fix, [data-theme="diamond"] .tag, [data-theme="diamond"] .player button.pp, [data-theme="diamond"] .item .num { background: linear-gradient(135deg, #ffffff, #c9d6e6 50%, #9fb3cc); color: #0a0f18; }
[data-theme="diamond"] .prow .pic, [data-theme="diamond"] .grp .gi { background: linear-gradient(140deg, rgba(159,216,255,.2), rgba(255,255,255,.04)); color: #cfeaff; border: 1px solid rgba(200,225,255,.22); }
[data-theme="diamond"] .sheet, [data-theme="diamond"] .rhead { background: linear-gradient(170deg, #10141c, #050608); }

/* ---- LIGHT themes (Madinah Marble, Muscat Ocean): AA on ivory / pale sea ---- */
[data-fx="light"] .next, [data-fx="light"] .grp.big { background: linear-gradient(160deg, rgba(255,255,255,.95), rgba(255,255,255,.78)); }
[data-fx="light"] .next::after { background: linear-gradient(90deg, transparent, rgba(var(--glow-rgb),.08), transparent); }
[data-fx="light"] .card { box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.9); }
[data-fx="light"] .count .slot { background: rgba(var(--glow-rgb),.1); color: var(--gold3); box-shadow: inset 0 -10px 14px rgba(var(--glow-rgb),.06); }
[data-fx="light"] .ring .trk, [data-fx="light"] .tapbtn svg.r .t { stroke: rgba(var(--glow-rgb),.14); }
[data-fx="light"] .prow .mode, [data-fx="light"] .segctl { background: rgba(var(--glow-rgb),.08); }
[data-fx="light"] .prow .pic, [data-fx="light"] .grp .gi { background: linear-gradient(145deg, rgba(var(--glow-rgb),.18), rgba(var(--glow-rgb),.05)); color: var(--gold3); }
[data-fx="light"] .item, [data-fx="light"] .fontc, [data-fx="light"] .wbw .w, [data-fx="light"] .offgrid .o, [data-fx="light"] .ofpill { background: rgba(255,255,255,.82); }
[data-fx="light"] .item .num, [data-fx="light"] .btn, [data-fx="light"] .player button.pp { color: #fff; background: linear-gradient(135deg, var(--gold), var(--gold3)); }
[data-fx="light"] .btn.ghost { background: var(--card2); color: var(--ink); }
[data-fx="light"] .sw { background: rgba(0,0,0,.16); }
[data-fx="light"] .clock .time { text-shadow: 0 2px 16px rgba(255,255,255,.8); }
[data-fx="light"] .tapbtn { background: radial-gradient(circle at 35% 30%, #ffffff, rgba(255,255,255,.7) 60%); }
[data-fx="light"] .player { background: linear-gradient(135deg, var(--gold), var(--gold3)); color: #fff; }
[data-fx="light"] .player button.pp { background: #fff; color: var(--gold3); }
[data-fx="light"] .celebrate .msg { background: linear-gradient(135deg, #ffffff, var(--bg1)); }
[data-fx="light"] select.sel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23333' stroke-width='1.6'/%3E%3C/svg%3E"); }
[data-fx="light"] nav.tabs { box-shadow: 0 10px 28px rgba(8,40,50,.14); }
[data-fx="light"] .chip.on, [data-fx="light"] .seg.on, [data-fx="light"] .segctl button.on, [data-fx="light"] .fix, [data-fx="light"] .qtabs button.on, [data-fx="light"] .tag { color: #fff; }
/* Marble: gold lines + gold title on ivory, green actions */
[data-theme="marble"] .hero-title h1 { background: linear-gradient(180deg, #a8842f, #7d5f16 60%, #5e470f); -webkit-background-clip: text; background-clip: text; font-weight: 700; }
[data-theme="marble"] .flourish, [data-theme="marble"] .next .arch { color: #a8842f; }
[data-theme="marble"] .next { border: 1.5px solid transparent; background: linear-gradient(#fffdf8, #fbf7ee) padding-box, linear-gradient(135deg, #8a6a1e, #e6cf8a 30%, #a8842f 50%, #e6cf8a 70%, #8a6a1e) border-box; }
[data-theme="marble"] .rhead { background: linear-gradient(180deg, #f7f2e6, rgba(247,242,230,.94)); }
[data-theme="marble"] .sheet { background: linear-gradient(170deg, #fbf9f3, #f1ead9); }
/* Ocean: sand accents */
[data-theme="ocean"] .hero-title h1 { background: linear-gradient(180deg, #13a3a6, #0a7680 55%, #075760); -webkit-background-clip: text; background-clip: text; }
[data-theme="ocean"] .flourish, [data-theme="ocean"] .next .arch { color: #c49a55; }
[data-theme="ocean"] .next { border-color: rgba(196,154,85,.55); }
[data-theme="ocean"] .rhead { background: linear-gradient(180deg, #f2fbfb, rgba(242,251,251,.94)); }
[data-theme="ocean"] .sheet { background: linear-gradient(180deg, #f6fcfc, #d6f0ef); }

@media (prefers-reduced-motion: reduce) {
  .gl-rays, .gl-waves path, .cl-damask, .cl-sheen, .mb-light, .ss-birds, .ss-dunes, .lt, .lt-flame, .oc-wave, .oc-cloud, .oc-gulls, .dm-sp, .dm-gem, .dm-sheen { animation: none !important; }
  .dm-sp { opacity: .6; }
}
body.no-motion .dm-sp { opacity: .6 !important; animation: none !important; }

/* ---------------- keyframes ---------------- */
@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(72px, 72px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes twinkle { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes shoot { 0% { opacity: 0; transform: translate(0, 0) rotate(-25deg); } 3% { opacity: 1; } 10% { opacity: 0; transform: translate(-260px, 120px) rotate(-25deg); } 100% { opacity: 0; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes glowwin { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes shimmer { 0% { background-position: -200px 0, 0 0; } 60%, 100% { background-position: calc(100% + 200px) 0, 0 0; } }
@keyframes sweep { 0% { transform: translateX(-100%); } 50%, 100% { transform: translateX(100%); } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes glyphIn { to { opacity: 1; transform: none; filter: none; } }
@keyframes glowOff { 0% { text-shadow: 0 0 22px rgba(var(--glow-rgb),1); } 100% { text-shadow: 0 0 0 rgba(var(--glow-rgb),0); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes fadeAway { to { opacity: 0; width: 0; margin: 0; } }
@keyframes digitOut { to { transform: translateY(-100%); opacity: 0; } }
@keyframes digitIn { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes swipeL { from { transform: translateX(40px); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes swipeR { from { transform: translateX(-40px); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes bump { 50% { transform: scale(1.18); } }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); } }
@keyframes sheetIn { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sheetOut { to { transform: translateY(30px); opacity: 0; } }
@keyframes splashArt { from { transform: scale(1.12); opacity: .4; } to { transform: scale(1); opacity: 1; } }
@keyframes splashRay { to { transform: skewX(-12deg) translateX(320%); } }
@keyframes splashGlyph { 60% { opacity: 1; } to { opacity: 1; transform: none; text-shadow: 0 0 8px rgba(80,210,255,.35), 0 2px 10px rgba(0,0,0,.6); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .star, .art-lattice, .girih, .art-rosette { animation: none !important; }
}
body.no-motion *, body.no-motion *::before, body.no-motion *::after { animation-duration: .001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
@media (max-width: 360px) {
  .clock .time { font-size: 54px; }
  .next .name { font-size: 29px; }
  .ring, .ring svg { width: 78px; height: 78px; }
  .count .slot { width: 23px; height: 36px; font-size: 21px; }
}

/* old-style figures (Cormorant / Marcellus) look uneven in times: always lining, tabular digits */
body, .clock .time, .prow .pt, .count, .tvclock .tm, .tvrow .t { font-variant-numeric: lining-nums tabular-nums; }

/* Malayalam Font Collection sheet */
.fsheet .ftarget { margin: 6px 0 12px; }
.fgroup { margin: 16px 4px 8px; font-size: 13px; font-weight: 700; color: var(--gold); display: flex; align-items: center; gap: 8px; }
.fgroup::after { content: ""; flex: 1; height: 1px; background: var(--brd); }
.fgrid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .fgrid { grid-template-columns: 1fr 1fr; } }
.fcard { position: relative; text-align: start; padding: 12px 14px 12px; border-radius: 18px; background: var(--card); border: 1.5px solid var(--brd); width: 100%; transition: transform .15s, border-color .2s, box-shadow .2s; }
.fcard:active { transform: scale(.985); }
.fcard.on { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--glow-rgb),.2), var(--glow); }
.fcard .fh { display: flex; align-items: center; gap: 8px; font-family: var(--f-ui); font-size: 12px; color: var(--ink2); }
.fcard .fh b { color: var(--ink); font-size: 13.5px; font-weight: 700; }
.fcard .fh .tk { margin-inline-start: auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--accent-ink); opacity: 0; transform: scale(.6); transition: all .2s; }
.fcard.on .fh .tk { opacity: 1; transform: none; }
.fcard .fh .tk svg { width: 14px; height: 14px; }
.fcard .s1 { display: block; font-size: 27px; line-height: 1.45; font-weight: 700; margin-top: 4px; }
.fcard .s2 { display: block; font-size: 17px; line-height: 1.6; color: var(--ink2); }
.fcard .s3 { display: block; font-size: 15px; line-height: 1.5; color: var(--gold); direction: ltr; text-align: start; }
.fnow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.fnow > div { padding: 8px 10px; border-radius: 12px; background: var(--card2); }
.fnow small { display: block; font-size: 11px; color: var(--ink2); }
.fnow span { font-size: 18px; font-weight: 700; line-height: 1.5; }

/* ---------------- 99 Names of Allah (build 202) ---------------- */
.nm-sub { font-size: 17px; color: var(--gold); line-height: 1.6; }
.nm-prog { padding: 12px 14px; margin: 8px 0 12px; font-size: 14px; }
.nm-bar { height: 7px; border-radius: 7px; background: rgba(var(--glow-rgb),.15); margin-top: 8px; overflow: hidden; }
.nm-bar i { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, var(--gold3), var(--gold), var(--gold2)); box-shadow: 0 0 10px rgba(var(--glow-rgb),.6); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.nm-hub .nm-gi { font-family: "Amiri", serif; font-size: 25px; font-weight: 700; color: var(--gold); }
.nm-hub .nm-bar { margin: 12px 2px 0; }
.nm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .nm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) { .nm-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.nm-card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; padding: 22px 6px 10px; min-height: 150px; border-radius: 18px; text-align: center;
  background: linear-gradient(165deg, var(--card2), var(--card)); border: 1px solid var(--brd); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.08); opacity: 0; transform: translateY(10px) scale(.97); animation: rise .45s cubic-bezier(.2,.8,.2,1) forwards; transition: transform .15s, border-color .2s; }
.nm-card:active { transform: scale(.96); }
.nm-card.learned { border-color: var(--brd-gold); }
.nm-card.learned::after { content: ""; position: absolute; top: 7px; inset-inline-end: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.nm-frame { position: absolute; left: 50%; top: 18px; width: 86px; height: 70px; margin-left: -43px; color: var(--gold); pointer-events: none; }
.nm-n { position: absolute; top: 6px; inset-inline-start: 8px; font-size: 10.5px; color: var(--ink3); font-family: var(--f-ui); display: flex; gap: 4px; }
.nm-n.big { position: static; justify-content: center; font-size: 13px; margin-top: 4px; }
.nm-fav { position: absolute; top: 5px; inset-inline-end: 6px; width: 14px; height: 14px; color: #ff6b8b; } .nm-fav svg { width: 14px; height: 14px; }
.nm-ar { position: relative; font-family: var(--f-dua), "Amiri", serif; font-weight: 700; font-size: 25px; line-height: 2.1; color: var(--gold2); direction: rtl; text-shadow: 0 0 14px rgba(var(--glow-rgb),.35); min-height: 58px; display: flex; align-items: center; }
[data-fx="light"] .nm-ar, [data-theme="kasavu"] .nm-ar { color: var(--gold3); text-shadow: none; }
.nm-ar.xl { font-size: 54px; min-height: 120px; }
.nm-ar.xxl { font-size: 64px; line-height: 2; }
.nm-tr { font-size: 13px; font-weight: 700; line-height: 1.35; font-family: var(--f-mlh), var(--f-ui), sans-serif; }
.nm-me { font-size: 11.5px; color: var(--ink2); line-height: 1.35; }
body.lang-ml .nm-me { font-family: var(--f-ml), var(--f-ui), sans-serif; }
.nm-tr.xl { font-size: 26px; display: block; margin-top: 6px; color: var(--gold); }
.nm-tr.en { font-size: 14px; font-weight: 600; color: var(--ink2); font-family: var(--f-ui); }
.nm-me.big { font-size: 22px; font-weight: 700; color: var(--ink); display: block; margin-top: 10px; }
.nm-me.en { font-size: 14px; display: block; }
.nm-ex { font-size: 15.5px; line-height: 1.8; color: var(--ink); margin: 12px 4px 4px; }
/* Name of the day on the dashboard */
.nod { width: 100%; margin-top: 14px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; text-align: start; border-color: var(--brd-gold); overflow: hidden; position: relative; }
.nod::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(var(--glow-rgb),.1), transparent); animation: fxSweep 9s 2s ease-in-out infinite; }
.nod-l small { display: block; font-size: 11.5px; color: var(--gold); white-space: nowrap; }
.nod-ar { display: block; font-family: var(--f-dua), "Amiri", serif; font-size: 30px; line-height: 1.8; color: var(--gold2); direction: rtl; text-shadow: 0 0 14px rgba(var(--glow-rgb),.4); }
[data-fx="light"] .nod-ar, [data-theme="kasavu"] .nod-ar { color: var(--gold3); }
.nod-r { flex: 1; min-width: 0; } .nod-r b { display: block; font-size: 16px; } .nod-r span { font-size: 13px; color: var(--ink2); }
.nod .go { color: var(--gold); } .nod .go svg { width: 20px; height: 20px; }
body.rtl .nod .go svg { transform: scaleX(-1); }
/* detail card */
.nm-detail { margin-top: 8px; padding: 18px 16px 16px; text-align: center; overflow: hidden; }
.nm-medal { position: relative; width: 250px; height: 250px; margin: 0 auto; display: grid; place-items: center; }
.nm-medal .nm-frame { left: 0; top: 0; width: 100%; height: 100%; margin: 0; }
.nm-rays { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: var(--gold); animation: spin 90s linear infinite; }
.nm-medal::before { content: ""; position: absolute; width: 70%; height: 70%; border-radius: 50%; background: radial-gradient(circle, rgba(var(--glow-rgb),.28), transparent 70%); animation: breathe 5s ease-in-out infinite; }
.nm-mean { margin-top: 12px; display: grid; gap: 2px; } .nm-mean span { font-size: 21px; font-weight: 700; } .nm-mean .en { font-size: 14.5px; font-weight: 500; color: var(--ink2); }
.nm-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.nm-audio { opacity: .6; }
.nm-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; } .nm-nav small { color: var(--ink2); }
body.rtl .nm-nav svg { transform: scaleX(-1); }
.iconbtn.on { color: #ff6b8b; }
/* learn mode: 3D flip card */
.nm-learn { perspective: 1200px; }
.nm-flip { position: relative; height: 380px; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3,.9,.3,1); cursor: pointer; }
.nm-flip.on { transform: rotateY(180deg); }
.nm-flip .face { position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px; text-align: center; overflow: hidden; }
.nm-flip .face.back { transform: rotateY(180deg); }
.nm-flip .front .nm-frame { left: 50%; top: 50%; width: 260px; height: 260px; margin: -150px 0 0 -130px; }
.nm-flip .hint { position: absolute; bottom: 14px; color: var(--ink3); font-size: 12.5px; }
.nm-lbtns { display: flex; gap: 8px; margin-top: 14px; } .nm-lbtns .btn { font-size: 13px; padding: 0 8px; }
body.rtl .nm-lbtns svg { transform: scaleX(-1); }

/* ---------------- light animations (build 202): GPU-only (transform / opacity), paused when hidden, off with reduced motion ---------------- */
body.paused *, body.paused *::before, body.paused *::after { animation-play-state: paused !important; }
.view.enter { animation: viewIn .24s cubic-bezier(.2,.8,.2,1); }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* shimmer sweep across the next-prayer card (all themes; BIO + new themes have their own) */
:root:not([data-fx]):not([data-theme="bio"]) .next::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent); animation: fxSweep 8s 1.5s ease-in-out infinite; pointer-events: none; }
[data-theme="kasavu"] .next::after { background: linear-gradient(90deg, transparent, rgba(184,134,11,.1), transparent) !important; }
/* countdown ring: a light dot slowly orbiting */
.ring .orbit { transform-origin: 50px 50px; animation: spin 7s linear infinite; }
.ring .odot { fill: var(--gold2); filter: drop-shadow(0 0 3px var(--gold)); }
[data-fx="light"] .ring .odot, [data-theme="kasavu"] .ring .odot { fill: #fff; }
/* tab icon bounce on select */
nav.tabs button.on svg { animation: tabBounce .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes tabBounce { 0% { transform: scale(.8) translateY(2px); } 60% { transform: scale(1.15) translateY(-3px); } 100% { transform: none; } }
/* press ripple */
.rip-host { overflow: hidden; }
.ripple { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(var(--glow-rgb),.35), rgba(var(--glow-rgb),0) 70%); transform: scale(0); opacity: 1; pointer-events: none; animation: ripple .6s ease-out forwards; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }
/* cards stagger in on open: .prow / .grp / .nm-card use 'rise' with per-item delays */
/* SHABAB Glow: drifting starfield */
.gl-star { background: #cfefff; box-shadow: 0 0 6px rgba(56,189,248,.9); }
/* adhkar counter: soft particle burst when one dhikr is complete */
.burst { position: fixed; z-index: 35; width: 0; height: 0; pointer-events: none; }
.burst i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold2); box-shadow: 0 0 10px var(--gold); opacity: 0; animation: burstOut .9s cubic-bezier(.15,.7,.3,1) forwards; }
.burst i:nth-child(3n) { background: var(--soft); width: 6px; height: 6px; }
@keyframes burstOut { 0% { opacity: 1; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.2); } }
.tapbtn.done { animation: doneGlow 1.2s ease-out; }
@keyframes doneGlow { 0% { box-shadow: 0 0 0 0 rgba(var(--glow-rgb),.6); } 100% { box-shadow: 0 0 0 26px rgba(var(--glow-rgb),0); } }
/* About: the app icon with rounded corners like a launcher icon, soft cyan glow pulse + float */
.about .lg { width: 128px; height: 128px; border-radius: 22.5%; overflow: hidden; isolation: isolate; filter: none; box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(125,220,255,.35); animation: float 7s ease-in-out infinite, aboutGlow 3.6s ease-in-out infinite; }
.about .lg .brandlogo { object-fit: cover; transform: scale(1.16); }
@keyframes aboutGlow { 0%, 100% { box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(125,220,255,.35), 0 0 18px rgba(34,211,238,.25); } 50% { box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(125,220,255,.6), 0 0 40px rgba(34,211,238,.55); } }
@media (prefers-reduced-motion: reduce) { .ring .orbit, .gl-star, .ripple, .burst { animation: none !important; } .burst, .ripple { display: none; } }
body.no-motion .ripple, body.no-motion .burst { display: none; }

/* Settings -> Home screen widgets */
.wlist { display: grid; gap: 12px; }
@media (min-width: 640px) { .wlist { grid-template-columns: 1fr 1fr; } }
.wcard { padding: 14px; opacity: 0; animation: rise .45s cubic-bezier(.2,.8,.2,1) forwards; }
.wcard .wh { display: flex; align-items: center; gap: 8px; } .wcard .wh b { flex: 1; font-size: 16px; }
.wcard .wsz { font-family: var(--f-ui); font-size: 12px; padding: 2px 8px; border-radius: 999px; background: rgba(var(--glow-rgb),.15); color: var(--gold); }
.wcard small { display: block; color: var(--ink2); font-size: 12.5px; margin: 2px 0 8px; }
.wimg { display: block; width: 100%; height: auto; margin: 0 auto 10px; border-radius: 16px; }
.wimg.small, .wimg.adhkar, .wimg.tasbih { width: 62%; }
.btn[disabled] { opacity: .5; }

/* detailed Morning / Evening adhkar (33): heading screen, count chips, Latin transliteration */
.lbadge { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; vertical-align: 2px; margin-inline-start: 4px; background: rgba(var(--soft-rgb),.16); color: var(--soft); font-family: var(--f-ui), var(--f-ml); }
.lbadge.full { background: linear-gradient(135deg, var(--gold2), var(--gold)); color: var(--accent-ink); }
.lsub { display: flex; align-items: center; gap: 8px; color: var(--gold); font-size: 14px; font-weight: 600; margin: 2px 0 10px; }
.lverses { padding: 12px 16px; margin-bottom: 12px; }
.lverses .lv + .lv { border-top: 1px dashed var(--brd); margin-top: 6px; padding-top: 6px; }
.lverses .arabic { font-size: calc(24px * var(--arz, 1)); line-height: 2; }
.lverses p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--ink2); text-align: center; }
.lverses small { display: block; text-align: center; color: var(--ink3); font-size: 11.5px; }
.item small.trl { font-family: var(--f-ui); font-size: 12px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cchip { flex: none; font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: rgba(var(--glow-rgb),.14); color: var(--gold); border: 1px solid rgba(var(--glow-rgb),.3); white-space: nowrap; }
.trlat { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--brd); font-family: var(--f-ui); font-size: 14px; line-height: 1.7; color: var(--ink2); font-style: italic; }
.meaning p[lang="en"] { font-family: var(--f-ui); font-size: 15px; }
.items { grid-template-columns: minmax(0, 1fr); } .item { min-width: 0; }
/* build 203: Latin transliteration alone (the 5 new languages) */
.trlat.solo { margin-top: 0; padding-top: 0; border-top: 0; font-size: 15px; color: var(--ink); }
.meaning p[dir="ltr"] { text-align: left; }

/* build 203: About - both partners under SHABAB INFOTECH */
.about .team { margin: 12px auto 0; max-width: 340px; padding: 10px 12px; border-radius: 14px; background: rgba(4, 22, 64, .55); border: 1px solid rgba(125, 220, 255, .28); }
.about .team .tco { font-size: 12px; letter-spacing: .06em; color: #7fe3ff; margin-bottom: 4px; font-family: var(--f-ui), var(--f-ml), sans-serif; }
.about .team .ptn { display: block; padding: 7px 0 6px; border-top: 1px solid rgba(125, 220, 255, .15); text-align: center; }
.about .team .ptn b { display: block; font-size: 16px; line-height: 1.5; font-family: var(--f-mlh), var(--f-ml), var(--f-ui), sans-serif; color: #fff; }
.about .team .ptn span { display: block; font-size: 12.5px; line-height: 1.5; color: rgba(234, 244, 255, .8); }
.about .typer { min-height: 1.5em; overflow-wrap: anywhere; }
/* long option labels (Asr "Standard (shadow 1x)") wrap instead of "..." */
.segctl.wrap button { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; padding: 7px 6px; }
/* per-prayer offsets: 3 steppers fit a 360-390 px phone (was 30 px too wide) */
.offgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.offgrid .o { padding: 8px 2px; min-width: 0; }
.offgrid .stepper { gap: 2px; }
.offgrid .stepper button { width: 28px; height: 28px; }
.offgrid .stepper span { min-width: 30px; font-size: 14px; }