:root { --modern-ink: #102c24; --modern-green: #0b6a4e; --modern-paper: #fffdf8; --modern-bg: #f4f6f1; --modern-line: #dfe8df; --modern-muted: #66756d; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; background: var(--modern-bg) !important; color: var(--modern-ink) !important; }
.site-main { background: var(--modern-bg) !important; color: var(--modern-ink) !important; }
.site-main .site-header { position: sticky !important; top: 0px !important; z-index: 50 !important; height: 78px !important; background: rgba(4, 38, 29, 0.88) !important; border: 0px !important; box-shadow: rgba(255, 255, 255, 0.08) 0px 1px 0px !important; backdrop-filter: blur(18px) !important; }
.site-main .brand-mark { width: 48px !important; height: 48px !important; border-radius: 16px !important; background: linear-gradient(145deg, rgb(22, 92, 70), rgb(6, 37, 29)) !important; box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 20px !important; font-size: 28px !important; }
.brand-copy strong { font: 800 21px / 1 Inter, ui-sans-serif, system-ui, sans-serif !important; letter-spacing: -0.04em !important; }
.brand-copy small { font-size: 11px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: rgb(169, 197, 181) !important; }
.home-hero { min-height: 590px !important; padding: 88px max(24px, 50% - 590px) 108px !important; border-radius: 0px 0px 36px 36px !important; background: radial-gradient(circle at 80% 15%, rgb(23, 100, 71) 0px, transparent 28%), linear-gradient(135deg, rgb(4, 41, 31) 0%, rgb(7, 84, 61) 62%, rgb(12, 103, 74) 100%) !important; }
.hero-copy { width: min(610px, 60%) !important; }
.hero-copy h1 { font-family: Inter, ui-sans-serif, system-ui, sans-serif !important; font-size: clamp(50px, 6.3vw, 82px) !important; font-weight: 800 !important; line-height: 0.98 !important; letter-spacing: -0.08em !important; }
.hero-copy > p { font-size: 19px !important; line-height: 1.5 !important; color: rgb(216, 232, 221) !important; }
.hero-search { min-height: 64px !important; border-radius: 18px !important; padding: 8px 10px 8px 17px !important; background: rgb(255, 254, 251) !important; box-shadow: rgba(0, 27, 18, 0.2) 0px 18px 32px !important; font-size: 17px !important; }
.hero-search-go { width: 48px !important; height: 48px !important; background: var(--modern-green) !important; font-size: 26px !important; }
.hero-art { opacity: 0.68 !important; transform: scale(0.9) !important; }
.quick-actions { width: min(1180px, 100% - 40px) !important; margin: -38px auto 42px !important; padding: 14px !important; border: 1px solid rgb(229, 233, 223) !important; border-radius: 24px !important; background: rgba(255, 253, 248, 0.88) !important; box-shadow: rgba(23, 55, 42, 0.08) 0px 18px 46px !important; backdrop-filter: blur(18px) !important; }
.quick-card { min-height: 132px !important; padding: 16px !important; border: 1px solid transparent !important; border-radius: 17px !important; background: transparent !important; }
.quick-card > span { width: 48px !important; height: 48px !important; background: rgb(229, 241, 233) !important; color: var(--modern-green) !important; font-size: 24px !important; }
.quick-card b { font: 750 16px / 1.1 Inter, ui-sans-serif, system-ui, sans-serif !important; }
.quick-card small { font-size: 12px !important; color: var(--modern-muted) !important; }
.site-main .section-title { color: var(--modern-ink) !important; }
.site-main .section-title h2 { font: 800 28px / 1.1 Inter, ui-sans-serif, system-ui, sans-serif !important; letter-spacing: -0.05em !important; }
.site-main .section-title a { color: var(--modern-green) !important; }
.profile-grid { grid-template-columns: repeat(4, minmax(0px, 1fr)) !important; padding: 0px !important; margin-bottom: 38px !important; gap: 14px !important; background: transparent !important; border: 0px !important; }
.profile-grid .profile { border: 1px solid var(--modern-line) !important; border-radius: 20px !important; background: var(--modern-paper) !important; box-shadow: rgba(23, 55, 42, 0.047) 0px 10px 28px !important; }
.profile-grid .profile-media { aspect-ratio: 4 / 4.6 !important; background: linear-gradient(145deg, rgb(220, 235, 224), rgb(172, 202, 183)) !important; overflow: hidden !important; }
.profile-grid .profile img, .profile-grid .profile .avatar { width: 100% !important; height: 100% !important; aspect-ratio: auto !important; object-fit: cover !important; background: linear-gradient(145deg, rgb(224, 237, 228), rgb(166, 198, 177)) !important; color: var(--modern-green) !important; font-size: 56px !important; }
.profile-grid .profile-body { padding: 15px 16px 17px !important; color: var(--modern-ink) !important; }
.profile-grid .profile h3 { font: 750 18px / 1.2 Inter, ui-sans-serif, system-ui, sans-serif !important; color: var(--modern-ink) !important; letter-spacing: -0.03em !important; }
.profile-grid .profile p { font-size: 12px !important; color: var(--modern-muted) !important; }
.profile-grid .mini-status { display: inline-flex !important; padding: 6px 9px !important; border-radius: 999px !important; background: rgb(237, 247, 239) !important; color: rgb(44, 118, 80) !important; font-size: 11px !important; }
.nx-quote { width: min(1180px, 100% - 40px) !important; margin: 36px auto !important; padding: 24px 28px !important; border: 1px solid rgb(214, 187, 120) !important; border-radius: 22px !important; background: linear-gradient(110deg, rgb(6, 60, 45), rgb(11, 98, 72)) !important; box-shadow: rgba(23, 55, 42, 0.11) 0px 14px 32px !important; }
.nx-quote p { font-size: 18px !important; }
.site-main .islam-grid { background: rgb(234, 243, 236) !important; border: 1px solid rgb(216, 231, 218) !important; border-radius: 24px !important; padding: 14px !important; }
.profile-page, .profile-view { max-width: 1080px !important; padding: 12px 0px 50px !important; }
.profile-hero, .profile-cover { position: relative !important; overflow: hidden !important; padding: 34px !important; border-radius: 30px !important; background: linear-gradient(135deg, rgb(6, 58, 44) 0%, rgb(11, 118, 86) 100%) !important; box-shadow: rgba(10, 79, 56, 0.157) 0px 22px 54px !important; }
.profile-hero h1, .profile-cover h1 { font: 800 clamp(32px, 4vw, 52px) / 1 Inter, ui-sans-serif, system-ui, sans-serif !important; letter-spacing: -0.07em !important; }
.hero-panel-copy b { font: 750 18px / 1.1 Inter, ui-sans-serif, system-ui, sans-serif !important; }
.hero-panel-copy small { font-size: 12px !important; }
.hero-panel-copy em { font-style: normal !important; }
.profile-hero p, .profile-cover p { color: rgb(217, 238, 226) !important; }
.profile-meta, .meta-row { padding: 10px !important; border-radius: 14px !important; background: rgb(238, 246, 239) !important; }
.tag, .chip, .badge { padding: 7px 11px !important; background: rgb(228, 241, 231) !important; color: rgb(30, 106, 71) !important; }
.photo-grid { gap: 14px !important; }
.photo-grid img { border-radius: 20px !important; box-shadow: rgba(23, 55, 42, 0.08) 0px 8px 20px !important; }
.profile-page > .card, .profile-view > .card, .profile-page section.card, .profile-view section.card, .card { border-radius: 24px !important; box-shadow: rgba(23, 55, 42, 0.05) 0px 12px 34px !important; }
.auth { background: radial-gradient(circle at 18% 10%, rgb(222, 239, 228), rgb(244, 246, 241) 55%) !important; }
.auth .card { border: 1px solid rgb(226, 233, 223) !important; border-radius: 28px !important; padding: 34px !important; box-shadow: rgba(23, 55, 42, 0.094) 0px 22px 60px !important; }
.auth .card h1 { font: 800 32px / 1 Inter, ui-sans-serif, system-ui, sans-serif !important; letter-spacing: -0.06em !important; }
.auth input, .auth select, .auth textarea { border-radius: 14px !important; border-color: rgb(217, 228, 218) !important; }
.auth .btn { border-radius: 14px !important; font-weight: 750 !important; }
@media (max-width: 980px) {
  .profile-grid { grid-template-columns: repeat(3, minmax(0px, 1fr)) !important; }
}
@media (max-width: 760px), (orientation: landscape) and (pointer: coarse) and (max-height: 900px) {
  .site-main .site-header { height: 72px !important; }
  .site-main .brand-mark { width: 44px !important; height: 44px !important; border-radius: 14px !important; }
  .brand-copy strong { font-size: 19px !important; }
  .brand-copy small { display: none !important; }
  .home-hero { padding: 52px 18px 84px !important; border-radius: 0px 0px 26px 26px !important; }
  .hero-copy { width: 100% !important; }
  .hero-copy h1 { font-size: clamp(43px, 11vw, 58px) !important; }
  .hero-copy > p { font-size: 17px !important; }
  .hero-art { display: none !important; }
  .hero-panels { grid-template-columns: 1fr 1fr !important; }
  .quick-actions { grid-template-columns: repeat(2, 1fr) !important; width: calc(100% - 24px) !important; margin: -28px 12px 30px !important; padding: 10px !important; gap: 7px !important; border-radius: 20px !important; }
  .quick-card { min-height: 108px !important; padding: 13px !important; border-radius: 15px !important; }
  .quick-card > span { width: 42px !important; height: 42px !important; font-size: 21px !important; }
  .site-main .section-title h2 { font-size: 24px !important; }
  .profile-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; gap: 10px !important; }
  .profile-grid .profile-media { aspect-ratio: 1 / 1.18 !important; }
  .profile-grid .profile-body { padding: 11px !important; }
  .profile-grid .profile h3 { font-size: 15px !important; }
  .profile-grid .profile p { font-size: 11px !important; }
  .profile-page, .profile-view { padding: 0px 12px 34px !important; }
  .profile-hero, .profile-cover { padding: 24px 20px !important; border-radius: 24px !important; }
  .profile-page > .card, .profile-view > .card, .profile-page section.card, .profile-view section.card { padding: 18px !important; border-radius: 20px !important; }
  .photo-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .auth .card { padding: 24px !important; border-radius: 22px !important; }
}
:root { --modern-ink: #102c24; --modern-deep: #05362a; --modern-green: #0b6a4e; --modern-gold: #d7a84b; --modern-paper: #fffdf8; --modern-bg: #f4f6f1; --modern-line: #dfe8df; --modern-muted: #66756d; }
html { scroll-behavior: smooth; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--modern-bg); color: var(--modern-ink); }
.site-main { background: var(--modern-bg); color: var(--modern-ink); }
.site-main .site-header { position: sticky; top: 0px; z-index: 50; height: 78px; background: rgba(4, 38, 29, 0.88); border: 0px; box-shadow: rgba(255, 255, 255, 0.08) 0px 1px 0px; backdrop-filter: blur(18px); }
.site-main .brand { gap: 12px; }
.site-main .brand-mark { width: 48px; height: 48px; border-radius: 16px; background: linear-gradient(145deg, rgb(22, 92, 70), rgb(6, 37, 29)); box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 20px; font-size: 28px; }
.brand-copy strong { font: 800 21px / 1 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.04em; }
.brand-copy small { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(169, 197, 181); }
.site-main .top-actions .btn { border-radius: 12px; padding: 11px 18px; font-size: 14px; font-weight: 750; transition: transform 0.2s, box-shadow 0.2s; }
.site-main .top-actions .btn:hover { transform: translateY(-2px); box-shadow: rgba(0, 0, 0, 0.133) 0px 10px 22px; }
.home-hero { min-height: 590px; padding: 88px max(24px, 50% - 590px) 108px; border-radius: 0px 0px 36px 36px; background: radial-gradient(circle at 80% 15%, rgb(23, 100, 71) 0px, transparent 28%), linear-gradient(135deg, rgb(4, 41, 31) 0%, rgb(7, 84, 61) 62%, rgb(12, 103, 74) 100%); }
.hero-copy { width: min(610px, 60%); }
.hero-kicker { padding: 8px 13px; margin-bottom: 22px; border: 1px solid rgba(215, 168, 75, 0.467); border-radius: 999px; background: rgba(215, 168, 75, 0.08); color: rgb(244, 210, 126); font-size: 12px; letter-spacing: 0.04em; }
.hero-copy h1 { font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: clamp(50px, 6.3vw, 82px); font-weight: 800; line-height: 0.98; letter-spacing: -0.08em; }
.hero-copy > p { max-width: 520px; font-size: 19px; line-height: 1.5; color: rgb(216, 232, 221); }
.hero-search { min-height: 64px; border-radius: 18px; padding: 8px 10px 8px 17px; background: rgb(255, 254, 251); box-shadow: rgba(0, 27, 18, 0.2) 0px 18px 32px; font-size: 17px; }
.hero-search-go { width: 48px; height: 48px; background: var(--modern-green); font-size: 26px; }
.hero-panels { gap: 12px; margin-top: 14px; }
.hero-panel { min-height: 125px; padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.173); backdrop-filter: blur(10px); }
.hero-panel-light { background: rgb(255, 253, 244); color: var(--modern-ink); border-color: rgb(234, 215, 169); }
.hero-panel-icon { width: 54px; height: 54px; flex-basis: 54px; font-size: 28px; }
.hero-panel-copy b { font: 750 18px / 1.1 Inter, ui-sans-serif, system-ui, sans-serif; }
.hero-panel-copy small { font-size: 12px; }
.hero-art { opacity: 0.68; transform: scale(0.9); transform-origin: right bottom; }
.quick-actions { width: min(1180px, 100% - 40px); margin: -38px auto 42px; padding: 14px; border: 1px solid rgb(229, 233, 223); border-radius: 24px; background: rgba(255, 253, 248, 0.88); box-shadow: rgba(23, 55, 42, 0.08) 0px 18px 46px; backdrop-filter: blur(18px); }
.quick-card { min-height: 132px; padding: 16px; border: 1px solid transparent; border-radius: 17px; background: transparent; transition: background 0.2s, border-color 0.2s, transform 0.2s; }
.quick-card:hover { transform: translateY(-3px); background: rgb(255, 255, 255); border-color: rgb(223, 231, 223); box-shadow: rgba(23, 55, 42, 0.063) 0px 12px 24px; }
.quick-card > span { width: 48px; height: 48px; background: rgb(229, 241, 233); color: var(--modern-green); font-size: 24px; }
.quick-card b { font: 750 16px / 1.1 Inter, ui-sans-serif, system-ui, sans-serif; }
.quick-card small { font-size: 12px; color: var(--modern-muted); }
.site-main .section-title { color: var(--modern-ink); align-items: end; }
.site-main .section-title h2 { font: 800 28px / 1.1 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.05em; }
.site-main .section-title a { color: var(--modern-green); font-weight: 750; }
.profile-grid { grid-template-columns: repeat(4, minmax(0px, 1fr)); padding: 0px; margin-bottom: 38px; gap: 14px; background: transparent; border: 0px; }
.profile-grid .profile { border: 1px solid var(--modern-line); border-radius: 20px; background: var(--modern-paper); box-shadow: rgba(23, 55, 42, 0.047) 0px 10px 28px; transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s; }
.profile-grid .profile:hover { transform: translateY(-5px); border-color: rgb(175, 208, 188); box-shadow: rgba(23, 55, 42, 0.094) 0px 20px 34px; }
.profile-grid .profile-media { aspect-ratio: 4 / 4.6; background: linear-gradient(145deg, rgb(220, 235, 224), rgb(172, 202, 183)); overflow: hidden; }
.profile-grid .profile img, .profile-grid .profile .avatar { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; background: linear-gradient(145deg, rgb(224, 237, 228), rgb(166, 198, 177)); color: var(--modern-green); font-size: 56px; }
.profile-grid .profile-body { padding: 15px 16px 17px; color: var(--modern-ink); }
.profile-grid .profile h3 { font: 750 18px / 1.2 Inter, ui-sans-serif, system-ui, sans-serif; color: var(--modern-ink); letter-spacing: -0.03em; }
.profile-grid .profile p { font-size: 12px; color: var(--modern-muted); }
.profile-grid .profile-goal { margin-top: 10px; color: rgb(60, 85, 74) !important; }
.profile-grid .mini-status { display: inline-flex; padding: 6px 9px; border-radius: 999px; background: rgb(237, 247, 239); color: rgb(44, 118, 80); font-size: 11px; }
.nx-quote { width: min(1180px, 100% - 40px); margin: 36px auto; padding: 24px 28px; border: 1px solid rgb(214, 187, 120); border-radius: 22px; background: linear-gradient(110deg, rgb(6, 60, 45), rgb(11, 98, 72)); box-shadow: rgba(23, 55, 42, 0.11) 0px 14px 32px; }
.nx-quote p { font-size: 18px; }
.site-main .islam-grid { background: rgb(234, 243, 236); border: 1px solid rgb(216, 231, 218); border-radius: 24px; padding: 14px; }
.site-main .islam-tile { border: 1px solid transparent; box-shadow: none; background: rgb(255, 253, 248); transition: transform 0.2s, border-color 0.2s; }
.site-main .islam-tile:hover { transform: translateY(-3px); border-color: rgb(183, 213, 194); }
.profile-page, .profile-view { max-width: 1080px; padding: 12px 0px 50px; }
.profile-hero, .profile-cover { position: relative; overflow: hidden; padding: 34px; border-radius: 30px; background: linear-gradient(135deg, rgb(6, 58, 44) 0%, rgb(11, 118, 86) 100%); box-shadow: rgba(10, 79, 56, 0.157) 0px 22px 54px; }
.profile-hero::after, .profile-cover::after { content: ""; position: absolute; width: 300px; height: 300px; right: -100px; top: -130px; border: 1px solid rgba(255, 255, 255, 0.173); border-radius: 50%; box-shadow: rgba(255, 255, 255, 0.047) 0px 0px 0px 26px, rgba(255, 255, 255, 0.027) 0px 0px 0px 52px; }
.profile-hero h1, .profile-cover h1 { position: relative; z-index: 1; font: 800 clamp(32px, 4vw, 52px) / 1 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.07em; }
.profile-hero p, .profile-cover p { position: relative; z-index: 1; color: rgb(217, 238, 226); }
.profile-actions { position: relative; z-index: 2; }
.profile-actions .btn { border-radius: 12px; padding: 11px 16px; }
.profile-meta, .meta-row { padding: 10px; border-radius: 14px; background: rgb(238, 246, 239); }
.tag, .chip, .badge { padding: 7px 11px; background: rgb(228, 241, 231); color: rgb(30, 106, 71); }
.photo-grid { gap: 14px; }
.photo-grid img { border-radius: 20px; box-shadow: rgba(23, 55, 42, 0.08) 0px 8px 20px; }
.profile-page > .card, .profile-view > .card, .profile-page section.card, .profile-view section.card, .card { border-radius: 24px; box-shadow: rgba(23, 55, 42, 0.05) 0px 12px 34px; }
.auth { background: radial-gradient(circle at 18% 10%, rgb(222, 239, 228), rgb(244, 246, 241) 55%); }
.auth .card { border: 1px solid rgb(226, 233, 223); border-radius: 28px; padding: 34px; box-shadow: rgba(23, 55, 42, 0.094) 0px 22px 60px; }
.auth .card h1 { font: 800 32px / 1 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.06em; }
.auth input, .auth select, .auth textarea { border-radius: 14px; border-color: rgb(217, 228, 218); }
.auth .btn { border-radius: 14px; font-weight: 750; }
@media (max-width: 980px) {
  .profile-grid { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
}
@media (max-width: 760px), (orientation: landscape) and (pointer: coarse) and (max-height: 900px) {
  .site-main .site-header { height: 72px; }
  .site-main .brand-mark { width: 44px; height: 44px; border-radius: 14px; }
  .brand-copy strong { font-size: 19px; }
  .brand-copy small { display: none; }
  .home-hero { padding: 52px 18px 84px; border-radius: 0px 0px 26px 26px; }
  .hero-copy { width: 100%; }
  .hero-copy h1 { font-size: clamp(43px, 11vw, 58px); }
  .hero-copy > p { font-size: 17px; }
  .hero-art { display: none; }
  .hero-panels { grid-template-columns: 1fr 1fr; }
  .hero-panel { min-height: 122px; padding: 13px; }
  .hero-panel-icon { width: 44px; height: 44px; flex-basis: 44px; font-size: 23px; }
  .hero-panel-copy b { font-size: 16px; }
  .quick-actions { grid-template-columns: repeat(2, 1fr); width: calc(100% - 24px); margin: -28px 12px 30px; padding: 10px; gap: 7px; border-radius: 20px; }
  .quick-card { min-height: 108px; padding: 13px; border-radius: 15px; }
  .quick-card > span { width: 42px; height: 42px; font-size: 21px; }
  .quick-card b { font-size: 15px; }
  .site-main .section-title h2 { font-size: 24px; }
  .profile-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 10px; }
  .profile-grid .profile-media { aspect-ratio: 1 / 1.18; }
  .profile-grid .profile-body { padding: 11px; }
  .profile-grid .profile h3 { font-size: 15px; }
  .profile-grid .profile p { font-size: 11px; }
  .profile-page, .profile-view { padding: 0px 12px 34px; }
  .profile-hero, .profile-cover { padding: 24px 20px; border-radius: 24px; }
  .profile-page > .card, .profile-view > .card, .profile-page section.card, .profile-view section.card { padding: 18px; border-radius: 20px; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .auth .card { padding: 24px; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { scroll-behavior: auto !important; transition: none !important; }
}
@media (max-width: 760px), (orientation: landscape) and (pointer: coarse) and (max-height: 900px) {
  .site-main .bottom-nav { grid-template-columns: repeat(5, minmax(0px, 1fr)); position: fixed; left: clamp(12px, 2.5vw, 30px); right: clamp(12px, 2.5vw, 30px); bottom: clamp(8px, 1.5vw, 18px); min-height: 74px; height: clamp(74px, 16vw, 204px); padding: clamp(4px, 0.6vw, 8px); gap: clamp(2px, 0.6vw, 8px); border: 2px solid rgb(169, 181, 175); border-radius: clamp(24px, 2.8vw, 36px); background: rgb(0, 46, 35); box-shadow: rgba(0, 0, 0, 0.25) 0px 12px 26px, rgba(215, 170, 83, 0.18) 0px 0px 0px 1px inset; backdrop-filter: none; display: grid !important; }
  .site-main .bottom-nav a { display: grid; place-items: center; align-content: center; min-width: 0px; min-height: calc(100% - 4px); padding: clamp(5px, 0.9vw, 12px) clamp(2px, 0.8vw, 10px); border: 2px solid transparent; border-radius: clamp(21px, 2.5vw, 32px); color: rgb(241, 228, 196); font-family: inherit; font-size: clamp(14px, 2.55vw, 31px); line-height: 1; font-weight: 800; letter-spacing: -0.02em; gap: clamp(3px, 0.8vw, 12px); }
  .site-main .bottom-nav a span { display: block; margin: 0px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(24px, 4.6vw, 55px); line-height: 0.9; color: rgb(241, 228, 196); }
  .site-main .bottom-nav a.active { background: linear-gradient(145deg, rgb(23, 90, 65), rgb(11, 55, 40)); border-color: rgb(215, 170, 83); color: rgb(241, 228, 196); }
  .site-main .bottom-nav a.active span { color: rgb(241, 228, 196); }
  .site-main { padding-bottom: clamp(94px, 19vw, 230px); }
}
@media (max-width: 760px), (orientation: landscape) and (pointer: coarse) and (max-height: 900px) {
  .site-main .bottom-nav { grid-template-columns: repeat(5, minmax(0px, 1fr)); position: fixed; left: clamp(12px, 2.5vw, 30px); right: clamp(12px, 2.5vw, 30px); bottom: clamp(8px, 1.5vw, 18px); min-height: 74px; height: clamp(74px, 16vw, 204px); padding: clamp(4px, 0.6vw, 8px); gap: clamp(2px, 0.6vw, 8px); border: 2px solid rgb(169, 181, 175); border-radius: clamp(24px, 2.8vw, 36px); background: rgb(0, 46, 35); box-shadow: rgba(0, 0, 0, 0.25) 0px 12px 26px, rgba(215, 170, 83, 0.18) 0px 0px 0px 1px inset; backdrop-filter: none; display: grid !important; }
  .site-main .bottom-nav a { display: grid; place-items: center; align-content: center; min-width: 0px; min-height: calc(100% - 4px); padding: clamp(5px, 0.9vw, 12px) clamp(2px, 0.8vw, 10px); border: 2px solid transparent; border-radius: clamp(21px, 2.5vw, 32px); color: rgb(241, 228, 196); font-family: inherit; font-size: clamp(14px, 2.55vw, 31px); line-height: 1; font-weight: 800; letter-spacing: -0.02em; gap: clamp(3px, 0.8vw, 12px); }
  .site-main .bottom-nav a span { display: block; margin: 0px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(24px, 4.6vw, 55px); line-height: 0.9; color: rgb(241, 228, 196); }
  .site-main .bottom-nav a.active { background: linear-gradient(145deg, rgb(23, 90, 65), rgb(11, 55, 40)); border-color: rgb(215, 170, 83); color: rgb(241, 228, 196); }
  .site-main .bottom-nav a.active span { color: rgb(241, 228, 196); }
  .site-main { padding-bottom: clamp(94px, 19vw, 230px); }
}
:root { --green: #073d2c; --green2: #0c5a3f; --gold: #c9972f; --cream: #f7f4ea; --paper: #fffdf8; --ink: #173127; --muted: #7c857f; --line: #e8e4d8; --danger: #c94b4b; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--cream); }
* { box-sizing: border-box; }
html, body { margin: 0px; min-height: 100%; background: var(--cream); }
body { font-size: 14px; }
a { text-decoration: none; color: inherit; }
button, input, select, textarea { font: inherit; }
.btn, button { border: 0px; border-radius: 12px; padding: 11px 16px; background: var(--green2); color: rgb(255, 255, 255); cursor: pointer; font-weight: 700; }
.btn.gold { background: var(--gold); }
.btn.light { background: rgb(255, 255, 255); color: var(--green); border: 1px solid var(--line); }
.container { width: min(1180px, 100%); margin: auto; padding: 24px; }
.site-header { height: 68px; background: rgba(255, 253, 248, 0.94); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0px max(18px, 50% - 590px); position: sticky; top: 0px; z-index: 50; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--green); font-size: 18px; }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; background: var(--green); color: rgb(244, 201, 78); display: grid; place-items: center; font-size: 20px; }
.top-actions { display: flex; gap: 10px; align-items: center; }
.hero { background: radial-gradient(circle at 75% 20%, rgb(23, 100, 73) 0px, rgb(10, 74, 52) 35%, rgb(5, 50, 37) 75%); color: rgb(255, 255, 255); padding: 56px max(18px, 50% - 590px) 44px; position: relative; overflow: hidden; }
.hero::after { content: "☾"; position: absolute; right: 7%; top: -30px; font-size: 210px; color: rgba(255, 255, 255, 0.047); }
.hero h1 { font-size: clamp(30px, 5vw, 56px); line-height: 1.03; max-width: 760px; margin: 0px 0px 14px; }
.hero p { max-width: 650px; color: rgb(220, 235, 226); font-size: 16px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.section-title { display: flex; justify-content: space-between; align-items: center; margin: 4px 0px 14px; }
.section-title h2 { margin: 0px; font-size: 21px; }
.section-title a { color: var(--green2); font-weight: 700; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.profile { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: rgba(44, 57, 42, 0.04) 0px 8px 26px; }
.profile-media { position: relative; }
.profile img, .profile .avatar { width: 100%; aspect-ratio: 0.9 / 1; object-fit: cover; background: rgb(229, 234, 223); display: grid; place-items: center; font-size: 48px; }
.profile-body { padding: 12px; }
.profile h3 { margin: 0px 0px 5px; font-size: 16px; }
.profile p { margin: 0px; color: var(--muted); font-size: 13px; }
.online-dot { position: absolute; left: 10px; top: 10px; background: rgb(234, 248, 237); color: rgb(28, 123, 63); border-radius: 999px; padding: 5px 8px; font-size: 11px; font-weight: 800; }
.demo-badge { position: absolute; right: 10px; top: 10px; background: rgb(255, 245, 216); color: rgb(139, 100, 18); border-radius: 999px; padding: 5px 8px; font-size: 10px; font-weight: 900; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: rgba(44, 57, 42, 0.04) 0px 8px 26px; }
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at center top, rgb(229, 240, 231), rgb(247, 244, 234) 55%); }
.auth .card { width: min(560px, 100%); }
form { display: grid; gap: 14px; }
label { display: grid; gap: 6px; font-weight: 700; }
input, select, textarea { width: 100%; padding: 12px 13px; border: 1px solid rgb(216, 217, 207); border-radius: 12px; background: rgb(255, 253, 251); outline: none; }
input:focus, select:focus, textarea:focus { border-color: rgb(123, 167, 142); box-shadow: rgba(11, 91, 59, 0.07) 0px 0px 0px 3px; }
.error, .ok { padding: 12px 14px; border-radius: 12px; margin-bottom: 14px; }
.error { background: rgb(255, 240, 239); color: rgb(143, 40, 40); }
.ok { background: rgb(237, 249, 240); color: rgb(33, 97, 58); }
.muted { color: var(--muted); }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; background: rgb(238, 244, 239); color: var(--green2); font-size: 12px; font-weight: 700; }
.bottom-nav { display: none; }
.admin-shell { display: flex; min-height: 100vh; background: rgb(244, 245, 239); }
.admin-sidebar { width: 255px; background: linear-gradient(rgb(6, 52, 38), rgb(5, 41, 31)); color: rgb(233, 243, 236); position: sticky; top: 0px; height: 100vh; padding: 20px 14px; overflow: auto; }
.admin-logo { display: flex; align-items: center; gap: 10px; padding: 7px 8px 20px; font-weight: 800; font-size: 18px; }
.admin-logo small { display: block; font-size: 10px; color: rgb(185, 208, 192); font-weight: 500; }
.admin-nav-group { margin: 15px 6px 6px; color: rgb(165, 195, 178); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.admin-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px; color: rgb(217, 233, 223); margin: 2px 0px; }
.admin-nav a:hover, .admin-nav a.active { background: rgb(23, 96, 68); color: rgb(255, 255, 255); }
.nav-count { margin-left: auto; background: rgb(255, 255, 255); color: rgb(18, 84, 59); border-radius: 999px; min-width: 21px; text-align: center; padding: 2px 5px; font-size: 10px; font-weight: 800; }
.admin-main { flex: 1 1 0%; min-width: 0px; }
.admin-topbar { height: 62px; background: rgb(255, 255, 255); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0px 24px; position: sticky; top: 0px; z-index: 20; }
.admin-topbar .right { display: flex; align-items: center; gap: 14px; }
.admin-avatar { width: 34px; height: 34px; border-radius: 50%; background: rgb(232, 239, 232); display: grid; place-items: center; }
.admin-content { padding: 22px; max-width: 1600px; margin: auto; }
.admin-title { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
.admin-title h1 { margin: 0px; font-size: 24px; }
.kpis { display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); gap: 12px; }
.kpi { background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 14px; padding: 14px; box-shadow: rgba(35, 49, 38, 0.03) 0px 4px 16px; }
.kpi .ico { width: 38px; height: 38px; border-radius: 10px; background: rgb(232, 242, 236); color: var(--green2); display: grid; place-items: center; font-size: 18px; margin-bottom: 8px; }
.kpi.gold .ico { background: rgb(248, 238, 215); color: rgb(168, 115, 17); }
.kpi strong { display: block; font-size: 23px; }
.kpi small { color: var(--muted); }
.delta { font-size: 10px; color: rgb(33, 131, 74); font-weight: 800; }
.admin-grid { display: grid; grid-template-columns: 2fr 1.25fr 1fr; gap: 14px; margin-top: 14px; }
.admin-grid.two { grid-template-columns: 1.2fr 1fr; }
.panel { background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 15px; padding: 15px; min-width: 0px; }
.panel h3 { margin: 0px 0px 12px; font-size: 14px; }
.fake-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mini { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: rgb(252, 252, 248); }
.mini strong { font-size: 18px; display: block; }
.activity-list { display: grid; gap: 8px; }
.activity { display: flex; gap: 9px; align-items: center; padding: 8px 0px; border-bottom: 1px solid rgb(238, 238, 238); }
.activity:last-child { border: 0px; }
.avatar-sm { width: 34px; height: 34px; border-radius: 50%; background: rgb(233, 238, 232); display: grid; place-items: center; flex: 0 0 auto; }
.table-wrap { overflow: auto; }
.table { width: 100%; border-collapse: collapse; background: rgb(255, 255, 255); }
.table th, .table td { padding: 10px; border-bottom: 1px solid rgb(238, 238, 238); text-align: left; white-space: nowrap; }
.table th { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.quick-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.quick { padding: 12px 7px; text-align: center; border: 1px solid var(--line); border-radius: 12px; background: rgb(255, 255, 255); }
.quick span { display: block; font-size: 20px; margin-bottom: 6px; }
.quick small { font-size: 10px; color: rgb(79, 91, 84); }
.settings-list { display: grid; gap: 8px; }
.settings-list a { display: flex; justify-content: space-between; padding: 11px 0px; border-bottom: 1px solid rgb(238, 238, 238); }
.chart { height: 170px; display: flex; align-items: end; gap: 8px; padding-top: 12px; }
.bar { flex: 1 1 0%; background: linear-gradient(rgb(22, 113, 79), rgb(11, 73, 52)); border-radius: 7px 7px 0px 0px; min-height: 12px; }
.donut { width: 120px; height: 120px; border-radius: 50%; background: conic-gradient(rgb(10, 87, 59) 0deg, rgb(10, 87, 59) 45%, rgb(199, 149, 46) 45%, rgb(199, 149, 46) 72%, rgb(223, 230, 221) 72%); position: relative; }
.donut::after { content: ""; position: absolute; inset: 28px; background: rgb(255, 255, 255); border-radius: 50%; }
.row { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.tag-demo { color: rgb(139, 100, 18); background: rgb(255, 244, 211); padding: 3px 7px; border-radius: 999px; font-size: 10px; font-weight: 900; }
.admin-footer { padding: 18px; color: rgb(139, 145, 140); font-size: 11px; }
.assistant-box { background: rgb(8, 63, 45); color: rgb(255, 255, 255); border-radius: 18px; padding: 20px; }
.assistant-box textarea { background: rgb(255, 255, 255); }
.notice { background: rgb(255, 248, 228); border: 1px solid rgb(238, 219, 155); color: rgb(113, 91, 28); border-radius: 12px; padding: 12px; }
@media (max-width: 1150px) {
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .admin-grid, .admin-grid.two { grid-template-columns: 1fr 1fr; }
  .quick-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 760px), (orientation: landscape) and (pointer: coarse) and (max-height: 900px) {
  .site-header { height: 60px; }
  .top-actions .optional { display: none; }
  .hero { padding: 42px 18px 32px; }
  .container { padding: 18px; }
  .grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 10px; }
  .profile-body { padding: 9px; }
  .bottom-nav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; bottom: 0px; left: 0px; right: 0px; background: rgb(6, 58, 43); color: rgb(255, 255, 255); z-index: 60; padding: 8px 5px calc(8px + env(safe-area-inset-bottom)); box-shadow: rgba(0, 0, 0, 0.133) 0px -6px 20px; }
  .bottom-nav a { text-align: center; font-size: 10px; color: rgb(216, 232, 222); }
  .bottom-nav .active { color: rgb(242, 202, 89); }
  .bottom-nav span { display: block; font-size: 18px; margin-bottom: 2px; }
  .site-main { padding-bottom: 80px; }
  .admin-sidebar { display: none; }
  .admin-topbar { padding: 0px 14px; }
  .admin-content { padding: 14px; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .admin-grid, .admin-grid.two { grid-template-columns: 1fr; }
  .quick-grid { grid-template-columns: repeat(4, 1fr); }
  .admin-title { align-items: start; flex-direction: column; }
  .fake-stats { grid-template-columns: repeat(2, 1fr); }
}
.page-heading { margin: 10px 0px 22px; }
.page-heading h1 { font-size: 32px; margin: 8px 0px; }
.filter-card { margin-bottom: 24px; }
.filter-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.filter-actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.profile-goal { font-weight: 700; margin-top: 8px !important; color: var(--green2) !important; }
.empty-state { text-align: center; padding: 55px 20px; }
.empty-state > div { font-size: 42px; color: var(--green2); }
.profile-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.profile-cover { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: center; }
.profile-photo-wrap { position: relative; }
.profile-large-photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 22px; background: rgb(231, 237, 230); display: grid; place-items: center; font-size: 70px; }
.demo-badge.large { font-size: 12px; bottom: 12px; top: auto; right: 12px; }
.profile-status { color: rgb(36, 122, 67); font-weight: 800; font-size: 12px; }
.profile-main-info h1 { font-size: 36px; margin: 8px 0px; }
.profile-facts { align-self: stretch; }
.fact { display: flex; justify-content: space-between; gap: 15px; padding: 13px 0px; border-bottom: 1px solid var(--line); }
.fact:last-child { border-bottom: 0px; }
.fact span { color: var(--muted); }
.edit-profile { margin-top: 16px; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.danger { background: rgb(162, 58, 58) !important; }
.guest-list { display: grid; gap: 10px; }
.guest-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; }
.guest-avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: rgb(233, 238, 232); display: grid; place-items: center; flex: 0 0 auto; font-size: 22px; }
.guest-avatar img { width: 100%; height: 100%; object-fit: cover; }
.guest-info { flex: 1 1 0%; }
.guest-info h3 { margin: 0px 0px 4px; }
.guest-info p { margin: 0px; color: var(--muted); }
.messages-layout { display: grid; grid-template-columns: 360px 1fr; gap: 16px; min-height: 650px; }
.thread-list { padding: 14px; }
.tabs { display: flex; gap: 16px; padding: 13px 0px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.tabs .active { color: var(--green2); font-weight: 800; border-bottom: 2px solid var(--green2); padding-bottom: 8px; }
.thread { display: flex; align-items: center; gap: 10px; padding: 12px 4px; border-bottom: 1px solid rgb(239, 238, 232); }
.thread.selected { background: rgb(241, 245, 239); border-radius: 12px; padding-left: 8px; }
.thread-avatar { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: rgb(233, 238, 232); display: grid; place-items: center; flex: 0 0 auto; }
.thread-avatar img { width: 100%; height: 100%; object-fit: cover; }
.thread-main { min-width: 0px; flex: 1 1 0%; }
.thread-main .row { align-items: center; }
.thread-main p { margin: 4px 0px 0px; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-badge, .nav-badge { background: rgb(216, 77, 77); color: rgb(255, 255, 255); border-radius: 999px; min-width: 18px; height: 18px; display: grid; place-items: center; font-size: 10px; }
.chat-panel { display: flex; flex-direction: column; padding: 0px; overflow: hidden; }
.chat-head { padding: 15px 18px; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: center; }
.chat-head h2 { margin: 0px 0px 3px; font-size: 17px; }
.chat-messages { flex: 1 1 0%; padding: 20px; display: flex; flex-direction: column; gap: 9px; background: rgb(251, 251, 247); overflow: auto; min-height: 440px; }
.bubble { max-width: 70%; padding: 10px 13px; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; align-self: flex-start; }
.bubble.mine { align-self: flex-end; background: rgb(230, 242, 232); border-color: rgb(201, 223, 207); border-radius: 16px 16px 4px; }
.bubble small { display: block; color: var(--muted); font-size: 10px; margin-top: 4px; text-align: right; }
.chat-form { display: flex; gap: 10px; padding: 12px; border-top: 1px solid var(--line); background: rgb(255, 255, 255); }
.chat-form textarea { resize: none; }
.chat-form button { width: 48px; flex: 0 0 auto; }
.nav-badge { position: absolute; top: -3px; right: 19%; font-size: 9px; }
.bottom-nav a { position: relative; }
@media (max-width: 900px) {
  .filter-grid { grid-template-columns: repeat(2, 1fr); }
  .profile-layout { grid-template-columns: 1fr; }
  .profile-cover { grid-template-columns: 180px 1fr; }
  .messages-layout { grid-template-columns: 1fr; }
  .thread-list { max-height: 430px; }
  .chat-panel { min-height: 600px; }
}
@media (max-width: 600px) {
  .filter-grid, .form-grid { grid-template-columns: 1fr; }
  .filter-actions { flex-direction: column; align-items: stretch; }
  .profile-cover { grid-template-columns: 1fr; text-align: center; }
  .profile-large-photo { max-width: 240px; margin: auto; }
  .profile-main-info h1 { font-size: 28px; }
  .profile-main-info .hero-actions { justify-content: center; }
  .profile-facts { text-align: left; }
  .bubble { max-width: 85%; }
}
.home-hero { display: flex; justify-content: space-between; align-items: center; gap: 30px; min-height: 360px; }
.hero-copy { position: relative; z-index: 2; }
.hero-pill { background: rgba(255, 255, 255, 0.094); color: rgb(244, 209, 107); border: 1px solid rgba(255, 255, 255, 0.094); }
.hero-copy h1 { margin-top: 14px; }
.hero-copy p { font-size: 19px; }
.hero-metrics { display: grid; grid-template-columns: repeat(3, 120px); gap: 10px; position: relative; z-index: 2; }
.hero-metrics div { padding: 18px 14px; border: 1px solid rgba(255, 255, 255, 0.094); background: rgba(255, 255, 255, 0.05); border-radius: 18px; text-align: center; }
.hero-metrics strong { display: block; font-size: 25px; color: rgb(244, 209, 107); }
.hero-metrics span { font-size: 11px; color: rgb(214, 231, 220); }
.quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: -34px; position: relative; z-index: 5; }
.quick-card { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 17px; box-shadow: rgba(35, 49, 38, 0.063) 0px 12px 30px; position: relative; }
.quick-card > span { width: 42px; height: 42px; border-radius: 13px; background: rgb(238, 243, 237); color: var(--green2); display: grid; place-items: center; font-size: 22px; margin-bottom: 10px; }
.quick-card b { display: block; }
.quick-card small { color: var(--muted); }
.quick-card i { position: absolute; right: 14px; top: 14px; background: rgb(217, 76, 76); color: rgb(255, 255, 255); font-style: normal; border-radius: 999px; padding: 3px 7px; font-size: 10px; }
.prayer-banner { margin: 18px 0px 28px; display: flex; justify-content: space-between; align-items: center; background: linear-gradient(135deg, rgb(10, 72, 52), rgb(7, 58, 43)); color: rgb(255, 255, 255); overflow: hidden; }
.prayer-banner h2 { margin: 10px 0px 2px; }
.prayer-banner strong { font-size: 38px; color: rgb(243, 202, 87); }
.prayer-banner p { margin: 4px 0px; color: rgb(207, 224, 213); }
.prayer-banner .pill { background: rgba(255, 255, 255, 0.094); color: rgb(243, 202, 87); }
.islam-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 28px 0px; }
.islam-tile span { font-size: 28px; color: var(--green2); }
.islam-tile h3 { margin: 10px 0px 5px; }
.islam-tile p { margin: 0px; color: var(--muted); }
.mini-status { display: inline-block; margin-top: 9px; font-size: 10px; color: rgb(51, 118, 75); background: rgb(238, 247, 239); border-radius: 999px; padding: 4px 7px; }
@media (max-width: 760px), (orientation: landscape) and (pointer: coarse) and (max-height: 900px) {
  .home-hero { min-height: 430px; display: block; }
  .hero-metrics { grid-template-columns: repeat(3, 1fr); margin-top: 30px; }
  .quick-actions { grid-template-columns: repeat(2, 1fr); margin-top: -25px; }
  .prayer-banner { display: block; }
  .prayer-banner .btn { margin-top: 10px; }
  .islam-grid { grid-template-columns: repeat(2, 1fr); }
}
.admin-filter { grid-template-columns: 2fr 1fr auto; align-items: end; }
.admin-filter > div { display: flex; }
.danger-text { color: var(--danger); font-weight: 700; }
.feature-switches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgb(255, 255, 255); }
.switch-row input { display: none; }
.switch-ui { width: 48px; height: 28px; border-radius: 99px; background: rgb(207, 215, 208); position: relative; cursor: pointer; }
.switch-ui::after { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; background: rgb(255, 255, 255); left: 3px; top: 3px; box-shadow: rgba(0, 0, 0, 0.133) 0px 2px 6px; transition: 0.2s; }
.switch-row input:checked + .switch-ui { background: var(--green2); }
.switch-row input:checked + .switch-ui::after { left: 23px; }
.theme-preview { height: 100px; border-radius: 16px; background: rgb(245, 243, 234); border: 1px solid var(--line); position: relative; overflow: hidden; }
.theme-preview div { height: 28px; background: var(--preview); }
.theme-preview span { display: block; width: 70%; height: 35px; margin: 12px; background: linear-gradient(90deg,var(--preview) 30%,#fff 30%); border-radius: 9px; }
.theme-preview i { position: absolute; right: 18px; top: 42px; width: 42px; height: 22px; border-radius: 99px; background: var(--accent); }
.tariff-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.tariff-option input { display: none; }
.tariff-option span { display: grid; gap: 5px; padding: 16px; border: 2px solid var(--line); border-radius: 16px; background: rgb(255, 255, 255); cursor: pointer; }
.tariff-option input:checked + span { border-color: var(--green2); box-shadow: rgba(12, 90, 63, 0.07) 0px 0px 0px 3px; }
.tariff-option strong { font-size: 24px; color: var(--green2); }
.tariff-option small { color: var(--muted); }
.payment-row { padding: 12px 0px; border-bottom: 1px solid var(--line); }
@media (max-width: 760px), (orientation: landscape) and (pointer: coarse) and (max-height: 900px) {
  .admin-filter, .feature-switches, .tariff-cards { grid-template-columns: 1fr; }
  .admin-filter > div { display: block; }
  .admin-filter button { width: 100%; }
}
.pwa-smart-banner { position: fixed; left: 14px; right: 14px; bottom: 78px; z-index: 100; background: rgb(7, 61, 44); color: rgb(255, 255, 255); border-radius: 16px; padding: 13px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; box-shadow: rgba(0, 0, 0, 0.2) 0px 16px 35px; }
.pwa-smart-banner div { display: grid; gap: 3px; }
.pwa-smart-banner small { color: rgb(214, 233, 221); }
.pwa-smart-banner button { background: rgba(255, 255, 255, 0.094); padding: 4px 9px; font-size: 22px; }
.prayer-widget strong { font-size: clamp(30px, 6vw, 52px); letter-spacing: 0.04em; }
.prayer-list { display: grid; }
.prayer-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.prayer-row:last-child { border-bottom: 0px; }
.prayer-row b { font-size: 18px; color: var(--green2); }
.geo-placeholder { height: 130px; border-radius: 14px; background: linear-gradient(135deg, rgb(237, 243, 236), rgb(217, 229, 216)); display: grid; place-items: center; align-content: center; gap: 5px; color: rgb(111, 154, 121); }
.geo-placeholder span { font-size: 52px; }
.geo-placeholder small { color: var(--muted); }
@media (max-width: 900px) {
  .admin-sidebar { width: 220px; }
  .kpis { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
  .admin-grid, .admin-grid.two { grid-template-columns: 1fr 1fr; }
  .admin-grid > .panel:first-child { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  body { padding-bottom: 70px; }
  .site-header { height: 60px; padding: 0px 12px; }
  .brand { font-size: 15px; }
  .brand-mark { width: 34px; height: 34px; }
  .top-actions .btn { padding: 8px 10px; }
  .top-actions .btn:first-child { display: none; }
  .container { padding: 16px; }
  .hero { padding: 38px 16px 30px; }
  .hero h1 { font-size: 34px; }
  .hero-metrics { display: none; }
  .grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 10px; }
  .profile-body { padding: 9px; }
  .profile h3 { font-size: 14px; }
  .profile p { font-size: 12px; }
  .quick-actions { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .quick-card { padding: 10px 5px; }
  .quick-card span { font-size: 20px; }
  .quick-card b { font-size: 11px; }
  .quick-card small { display: none; }
  .prayer-banner { padding: 16px; display: grid; gap: 12px; }
  .bottom-nav { position: fixed; display: grid; grid-template-columns: repeat(5, 1fr); left: 0px; right: 0px; bottom: 0px; height: 66px; background: rgb(6, 52, 38); color: rgb(220, 235, 226); z-index: 90; border-top: 1px solid rgba(255, 255, 255, 0.08); }
  .bottom-nav a { display: grid; place-items: center; align-content: center; gap: 2px; font-size: 10px; position: relative; }
  .bottom-nav a span { font-size: 20px; }
  .bottom-nav a.active { color: rgb(255, 255, 255); background: rgb(13, 90, 64); }
  .nav-badge { position: absolute; top: 6px; right: 23%; background: rgb(215, 68, 68); color: rgb(255, 255, 255); border-radius: 999px; min-width: 16px; padding: 2px 4px; font-size: 9px; text-align: center; }
  .profile-layout { grid-template-columns: 1fr !important; }
  .profile-cover { grid-template-columns: 1fr !important; }
  .profile-large-photo { aspect-ratio: 1 / 1; }
  .filter-grid, .form-grid { grid-template-columns: 1fr !important; }
  .admin-shell { display: block; }
  .admin-sidebar { position: fixed; left: -270px; top: 0px; bottom: 0px; z-index: 100; transition: left 0.2s; }
  .admin-main { width: 100%; }
  .admin-topbar { padding: 0px 12px; }
  .admin-content { padding: 12px; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .admin-grid, .admin-grid.two { grid-template-columns: 1fr; }
  .fake-stats { grid-template-columns: repeat(2, 1fr); }
  .table th, .table td { padding: 8px; font-size: 12px; }
  .admin-topbar .right .muted, .admin-topbar .right > div:last-of-type { display: none; }
  .admin-nav-toggle { display: block; }
  .pwa-smart-banner { bottom: 76px; }
}
:root { --green-deep: #063a2b; --green-soft: #edf4ee; --gold-soft: #fff5d7; --shadow: 0 18px 45px rgba(23,49,39,.08); }
body { letter-spacing: -0.01em; }
.site-header { box-shadow: rgba(20, 50, 38, 0.03) 0px 1px 0px; }
.hero.home-hero { min-height: 390px; padding-top: 64px; padding-bottom: 58px; }
.hero-pattern { position: absolute; inset: 0px; opacity: 0.42; background-image: radial-gradient(circle at 18% 30%, rgba(255, 255, 255, 0.063) 0px, rgba(255, 255, 255, 0.063) 2px, transparent 3px), radial-gradient(circle at 78% 70%, rgba(255, 255, 255, 0.047) 0px, rgba(255, 255, 255, 0.047) 2px, transparent 3px); background-size: 34px 34px, 46px 46px; mask-image: linear-gradient(90deg, rgb(0, 0, 0), transparent 85%); }
.hero-copy h1 { font-weight: 850; letter-spacing: -0.04em; }
.hero-copy p { max-width: 560px; }
.hero-actions .btn { min-height: 44px; }
.hero-metrics div { backdrop-filter: blur(8px); }
.quick-actions { margin-top: -42px; }
.quick-card { transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; }
.quick-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgb(212, 221, 212); }
.quick-card > span { background: linear-gradient(135deg, rgb(238, 245, 239), rgb(226, 238, 229)); }
.prayer-banner { border: 0px; box-shadow: var(--shadow); padding: 22px; }
.prayer-banner h2 { font-size: 18px; }
.prayer-banner strong { font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }
.section-title { margin-top: 32px; }
.section-title h2 { font-size: 24px; letter-spacing: -0.03em; }
.profile { border-radius: 20px; box-shadow: var(--shadow); transition: transform 0.18s, box-shadow 0.18s; }
.profile:hover { transform: translateY(-3px); box-shadow: rgba(23, 49, 39, 0.12) 0px 22px 50px; }
.profile-media { background: rgb(232, 238, 232); }
.profile img, .profile .avatar { aspect-ratio: 4 / 5; }
.profile-body { padding: 14px; }
.profile-goal { line-height: 1.35; }
.online-dot { border: 1px solid rgba(25, 110, 61, 0.1); }
.online-dot.is-offline { background: rgb(242, 243, 240); color: rgb(120, 129, 123); }
.islam-section-title { margin-bottom: 8px; }
.islam-grid { margin-top: 0px; }
.islam-tile { min-height: 145px; transition: transform 0.18s, box-shadow 0.18s; }
.islam-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.bottom-nav { backdrop-filter: blur(18px); }
.admin-shell { background: rgb(245, 246, 241); }
.admin-sidebar { box-shadow: rgba(0, 0, 0, 0.05) 8px 0px 30px; }
.admin-logo .brand-mark { box-shadow: rgba(0, 0, 0, 0.12) 0px 8px 20px; }
.admin-nav a { transition: background 0.15s, transform 0.15s; }
.admin-nav a:hover { transform: translateX(2px); }
.admin-topbar { box-shadow: rgba(0, 0, 0, 0.024) 0px 1px 12px; }
.admin-content { max-width: 1500px; }
.kpi { box-shadow: var(--shadow); border: 1px solid rgb(232, 235, 228); }
.panel { box-shadow: var(--shadow); border: 1px solid rgb(232, 235, 228); }
.quick { transition: transform 0.15s, box-shadow 0.15s; }
.quick:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.admin-nav-toggle { display: none; border: 0px; background: rgb(238, 244, 239); color: var(--green-deep); border-radius: 10px; padding: 8px 11px; font-size: 18px; cursor: pointer; }
.admin-sidebar.open { left: 0px !important; }
@media (max-width: 760px), (orientation: landscape) and (pointer: coarse) and (max-height: 900px) {
  .hero.home-hero { min-height: 455px; padding-top: 44px; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-actions .btn:first-child { grid-column: 1 / -1; }
  .quick-actions { margin-top: -30px; }
  .quick-card { min-height: 90px; }
  .section-title { margin-top: 26px; }
  .islam-tile { min-height: 130px; }
  .admin-nav-toggle { display: inline-flex; }
  .admin-sidebar { display: block !important; }
  .admin-topbar > div:first-child { display: flex; align-items: center; gap: 8px; }
  .admin-topbar { position: sticky; top: 0px; z-index: 80; }
  .admin-sidebar { box-shadow: rgba(0, 0, 0, 0.2) 12px 0px 40px; left: -280px !important; width: 270px !important; }
  .admin-sidebar.open { left: 0px !important; }
  .admin-shell:has(.admin-sidebar.open)::after { content: ""; position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.4); z-index: 90; }
  .admin-sidebar { z-index: 100; }
  .admin-main { position: relative; z-index: 1; }
  .admin-topbar .right { gap: 8px; }
  .admin-topbar .right > div:last-of-type { display: none; }
}
.autocomplete-wrap { position: relative; }
.autocomplete-list { position: absolute; z-index: 50; left: 0px; right: 0px; top: 100%; margin-top: 5px; background: rgb(255, 255, 255); border: 1px solid rgb(223, 232, 226); border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.1) 0px 12px 30px; overflow: hidden auto; max-height: 280px; }
.autocomplete-item { display: block; width: 100%; text-align: left; background: rgb(255, 255, 255); border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgb(238, 242, 239); border-image: none; padding: 11px 13px; cursor: pointer; color: rgb(23, 59, 45); }
.autocomplete-item:hover { background: rgb(242, 248, 244); }
.payment-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0px; }
.payment-method { border: 1px solid rgb(223, 232, 226); border-radius: 16px; padding: 15px; background: rgb(255, 255, 255); }
.payment-method strong { display: block; }
.payment-method small { color: rgb(104, 119, 111); }
.payment-method.active { border-color: rgb(15, 98, 75); box-shadow: rgba(15, 98, 75, 0.08) 0px 0px 0px 2px; }
@media (max-width: 700px) {
  .payment-methods { grid-template-columns: 1fr; }
}
.network-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; }
.network-status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: rgb(66, 168, 100); box-shadow: rgba(66, 168, 100, 0.4) 0px 0px 0px 0px; animation: 1.8s ease 0s infinite normal none running networkPulse; }
.network-status-dot.offline { background: rgb(154, 164, 157); box-shadow: none; animation: auto ease 0s 1 normal none running none; }
@keyframes networkPulse { 
  70% { box-shadow: rgba(66, 168, 100, 0) 0px 0px 0px 8px; }
}
.prayer-page { background: radial-gradient(circle at 80% 0%, rgb(238, 247, 238) 0px, rgb(247, 250, 247) 32%, rgb(247, 248, 245) 100%); }
.prayer-head { display: flex; justify-content: space-between; align-items: end; gap: 18px; }
.prayer-banner { position: relative; display: grid; grid-template-columns: 1.2fr 0.9fr; gap: 26px; padding: 30px; margin-top: 18px; border-radius: 30px; background: linear-gradient(135deg, rgb(7, 59, 45), rgb(11, 96, 69) 58%, rgb(18, 60, 50)); box-shadow: rgba(7, 59, 45, 0.22) 0px 28px 70px; overflow: hidden; }
.prayer-glow { position: absolute; width: 280px; height: 280px; border-radius: 50%; right: -90px; top: -120px; background: rgba(244, 203, 91, 0.18); filter: blur(4px); }
.prayer-main { position: relative; z-index: 1; }
.prayer-main h2 { font-size: 28px; margin: 14px 0px 2px; color: rgb(255, 255, 255); }
.prayer-main strong { font-size: clamp(46px, 8vw, 76px); line-height: 1; color: rgb(244, 207, 98); font-variant-numeric: tabular-nums; }
.prayer-main p { margin: 13px 0px 5px; color: rgb(215, 232, 222); }
.prayer-main small { color: rgb(184, 210, 195); }
.prayer-controls { position: relative; z-index: 1; display: grid; align-content: center; gap: 18px; color: rgb(232, 242, 236); }
.prayer-controls > div > span { display: block; font-size: 12px; color: rgb(184, 210, 195); margin-bottom: 7px; }
.segmented { display: flex; flex-wrap: wrap; gap: 6px; }
.segmented button { border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.08); color: rgb(234, 244, 237); border-radius: 999px; padding: 9px 13px; cursor: pointer; }
.segmented button.active { background: rgb(244, 207, 98); color: rgb(25, 58, 45); border-color: rgb(244, 207, 98); }
.countdown { padding-top: 4px; }
.countdown b { display: block; font-size: 25px; color: rgb(255, 255, 255); font-variant-numeric: tabular-nums; }
.prayer-grid { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 18px; margin-top: 18px; }
.prayer-list .prayer-row { padding: 17px 8px; }
.prayer-row span { display: flex; align-items: center; gap: 10px; }
.prayer-row i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 11px; background: rgb(238, 245, 237); color: rgb(40, 114, 77); font-style: normal; }
.prayer-row.is-next { background: rgb(247, 251, 247); border-radius: 14px; padding-left: 12px; padding-right: 12px; }
.prayer-row.is-next b { color: rgb(179, 125, 0); }
.prayer-info { padding: 24px; }
.prayer-info h3 { margin: 16px 0px 8px; }
.privacy-note { margin-top: 18px; padding: 14px; border-radius: 16px; background: rgb(241, 246, 240); color: rgb(53, 102, 77); line-height: 1.8; font-size: 13px; }
.icon-btn { border: 1px solid var(--line); background: rgb(255, 255, 255); border-radius: 12px; width: 38px; height: 38px; cursor: pointer; font-size: 18px; }
.section-title { display: flex; justify-content: space-between; align-items: center; }
@media (max-width: 760px), (orientation: landscape) and (pointer: coarse) and (max-height: 900px) {
  .prayer-head { display: grid; align-items: start; }
  .prayer-banner { grid-template-columns: 1fr; padding: 22px; border-radius: 24px; }
  .prayer-grid { grid-template-columns: 1fr; }
  .prayer-main h2 { font-size: 23px; }
  .prayer-main strong { font-size: 58px; }
  .prayer-controls { gap: 14px; }
  .prayer-page .container { padding-bottom: 86px; }
}
:root { --nx-deep: #063b2b; --nx-green: #0b6244; --nx-mint: #e7f0e8; --nx-gold: #d2a23a; --nx-cream: #f7f2e8; --nx-paper: #fffdf9; --nx-ink: #18372b; --nx-muted: #718078; --nx-line: #e3e5d9; --nx-shadow: 0 18px 50px rgba(11,55,38,.10); --nx-radius: 22px; }
html { background: var(--nx-cream); scroll-behavior: smooth; }
body { background: linear-gradient(rgb(249, 245, 235) 0%, rgb(245, 240, 229) 100%); color: var(--nx-ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0px; pointer-events: none; opacity: 0.34; background: radial-gradient(circle at 12% 10%, rgb(255, 255, 255) 0px, transparent 34%), radial-gradient(circle at 90% 0%, rgb(225, 238, 228) 0px, transparent 30%); z-index: -1; }
a { color: inherit; text-decoration: none; transition: color 0.2s, opacity 0.2s; }
a:hover { opacity: 0.86; }
button, .btn, input, select, textarea { font: inherit; }
button, .btn { transition: transform 0.2s, box-shadow 0.2s, background 0.2s; }
button:hover, .btn:hover { transform: translateY(-1px); box-shadow: rgba(6, 59, 43, 0.16) 0px 10px 24px; }
.site-header { height: 72px; padding: 0px max(18px, 50% - 590px); background: rgba(255, 253, 249, 0.84); border-bottom: 1px solid rgba(227, 229, 217, 0.9); backdrop-filter: blur(18px); box-shadow: rgba(24, 55, 43, 0.05) 0px 6px 24px; }
.brand { letter-spacing: -0.02em; color: var(--nx-deep); font-size: 19px; }
.brand-mark { width: 42px; height: 42px; border-radius: 15px; background: linear-gradient(145deg,var(--nx-green),var(--nx-deep)); box-shadow: rgba(6, 59, 43, 0.22) 0px 8px 20px; color: rgb(246, 204, 97); }
.top-actions { gap: 8px; }
.top-actions .btn { border-radius: 999px; padding: 10px 15px; }
.container { width: min(1180px, 100%); padding: 30px 24px; }
.card, .profile, .panel, .message, .prayer-card, .feature-card { background: rgba(255, 253, 249, 0.88); border: 1px solid rgba(227, 229, 217, 0.92); border-radius: var(--nx-radius); box-shadow: var(--nx-shadow); }
.hero { background: radial-gradient(circle at 78% 16%, rgb(35, 129, 93) 0px, rgb(13, 98, 68) 27%, rgb(6, 59, 43) 72%); border-radius: 0px 0px 34px 34px; padding: 70px max(24px, 50% - 590px) 58px; box-shadow: rgba(6, 59, 43, 0.18) 0px 22px 48px; }
.hero::after { content: ""; right: -4%; top: -42px; width: 290px; height: 290px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50%; box-shadow: rgba(255, 255, 255, 0.035) 0px 0px 0px 34px, rgba(255, 255, 255, 0.024) 0px 0px 0px 70px; font-size: 0px; }
.hero h1 { font-weight: 800; letter-spacing: -0.045em; }
.hero p { color: rgb(217, 235, 224); line-height: 1.7; }
.hero-actions { gap: 12px; }
.btn, .btn.gold, .hero .btn { border-radius: 14px; font-weight: 800; }
.btn { background: var(--nx-green); box-shadow: rgba(6, 59, 43, 0.14) 0px 8px 18px; }
.btn.gold { background: linear-gradient(135deg,#e4b84f,var(--nx-gold)); color: rgb(59, 43, 9); }
.btn.light { background: rgba(255, 253, 249, 0.84); border-color: var(--nx-line); color: var(--nx-deep); }
.hero .btn.light { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.25); color: rgb(255, 255, 255); }
.section-title { margin: 8px 0px 18px; }
.section-title h2 { font-size: 24px; letter-spacing: -0.03em; }
.section-title a { color: var(--nx-green); font-size: 13px; }
.grid { gap: 18px; }
.profile { overflow: hidden; transition: transform 0.22s, box-shadow 0.22s; }
.profile:hover { transform: translateY(-4px); box-shadow: rgba(11, 55, 38, 0.17) 0px 22px 48px; }
.profile-media { background: var(--nx-mint); }
.profile img, .profile .avatar { aspect-ratio: 0.88 / 1; }
.profile-body { padding: 16px; }
.profile h3 { font-size: 17px; letter-spacing: -0.02em; }
.profile p { color: var(--nx-muted); }
.online-dot, .demo-badge { border: 1px solid rgba(255, 255, 255, 0.72); box-shadow: rgba(0, 0, 0, 0.08) 0px 5px 12px; }
.online-dot { background: rgb(236, 250, 239); color: rgb(25, 114, 66); }
.demo-badge { background: rgb(255, 243, 207); color: rgb(132, 96, 21); }
.card { padding: 22px; }
.card h1, .card h2, .card h3 { letter-spacing: -0.03em; }
.auth { min-height: 100vh; padding: 28px 18px; background: radial-gradient(circle at 50% 0px, rgb(226, 240, 231) 0px, rgb(247, 242, 232) 56%); }
.auth .card { padding: 30px; width: min(560px, 100%); box-shadow: rgba(6, 59, 43, 0.13) 0px 25px 70px; }
form { gap: 16px; }
label { gap: 7px; color: var(--nx-ink); font-size: 13px; }
input, select, textarea { border: 1px solid var(--nx-line); border-radius: 14px; background: rgb(255, 254, 250); color: var(--nx-ink); padding: 12px 14px; outline: 0px; transition: border-color 0.2s, box-shadow 0.2s; }
input:focus, select:focus, textarea:focus { border-color: rgb(112, 165, 141); box-shadow: rgba(11, 98, 68, 0.1) 0px 0px 0px 4px; }
textarea { min-height: 110px; resize: vertical; }
.site-footer, .footer { margin-top: 40px; padding: 30px 24px 38px; background: var(--nx-deep); color: rgb(215, 232, 220); }
.site-footer a, .footer a { color: rgb(241, 200, 88); }
.notice, .flash, .alert { border-radius: 16px; border: 1px solid rgb(219, 231, 216); background: rgb(237, 247, 237); color: rgb(32, 94, 59); padding: 13px 16px; }
.danger, .error { border-color: rgb(240, 210, 210); background: rgb(255, 240, 240); color: rgb(155, 57, 57); }
.page-title { font-size: clamp(26px, 5vw, 42px); letter-spacing: -0.05em; color: var(--nx-deep); margin: 0px 0px 8px; }
.page-subtitle { color: var(--nx-muted); margin: 0px 0px 24px; }
.profile-page, .profile-view, .chat-shell, .messages-shell { max-width: 980px; margin: auto; }
.profile-hero, .profile-cover { background: linear-gradient(135deg, rgb(12, 99, 69), rgb(6, 59, 43)); color: rgb(255, 255, 255); border-radius: 28px; padding: 28px; box-shadow: rgba(6, 59, 43, 0.18) 0px 20px 48px; }
.profile-hero h1, .profile-cover h1 { color: rgb(255, 255, 255); }
.profile-hero p, .profile-cover p { color: rgb(217, 235, 224); }
.profile-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.profile-meta, .meta-row { display: flex; flex-wrap: wrap; gap: 8px; color: var(--nx-muted); }
.tag, .chip, .badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 6px 10px; background: var(--nx-mint); color: var(--nx-green); font-size: 12px; font-weight: 800; }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.photo-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; }
.chat-list, .conversation-list { display: grid; gap: 10px; }
.chat-row, .conversation-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--nx-paper); border: 1px solid var(--nx-line); border-radius: 17px; }
.chat-row:hover, .conversation-row:hover { border-color: rgb(159, 198, 177); background: rgb(251, 253, 248); }
.chat-avatar, .conversation-avatar { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; background: var(--nx-mint); display: grid; place-items: center; color: var(--nx-green); font-weight: 800; }
.chat-window { display: grid; gap: 12px; }
.bubble { max-width: min(82%, 560px); padding: 12px 15px; border-radius: 18px; background: rgb(237, 244, 237); color: var(--nx-ink); }
.bubble.mine { margin-left: auto; background: var(--nx-green); color: rgb(255, 255, 255); border-bottom-right-radius: 5px; }
.bubble.theirs { border-bottom-left-radius: 5px; }
.message-form { display: flex; gap: 8px; align-items: end; padding: 12px; background: var(--nx-paper); border: 1px solid var(--nx-line); border-radius: 18px; }
.message-form textarea { flex: 1 1 0%; min-height: 48px; }
.message-form .btn { white-space: nowrap; }
.search-bar, .filters { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px; background: rgba(255, 253, 249, 0.84); border: 1px solid var(--nx-line); border-radius: 18px; margin-bottom: 20px; }
.search-bar input, .filters input, .filters select { flex: 1 1 0%; min-width: 150px; }
.pagination { display: flex; justify-content: center; gap: 7px; flex-wrap: wrap; margin: 24px 0px; }
.pagination a, .pagination span { display: grid; place-items: center; min-width: 38px; height: 38px; border-radius: 12px; background: var(--nx-paper); border: 1px solid var(--nx-line); color: var(--nx-green); font-weight: 800; }
.pagination .active { background: var(--nx-green); color: rgb(255, 255, 255); }
.islamic-hero, .prayer-banner { background: linear-gradient(135deg, rgb(16, 78, 55), rgb(6, 59, 43)); color: rgb(255, 255, 255); border-radius: 28px; padding: 28px; box-shadow: rgba(6, 59, 43, 0.16) 0px 20px 48px; }
.islamic-hero h1, .prayer-banner h1 { color: rgb(255, 255, 255); }
.islamic-hero p, .prayer-banner p { color: rgb(217, 235, 224); }
.prayer-grid, .dhikr-grid, .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.prayer-card, .feature-card { padding: 20px; }
.prayer-card strong { display: block; color: var(--nx-green); font-size: 30px; }
.qibla-card, .calendar-card { background: var(--nx-paper); border: 1px solid var(--nx-line); border-radius: 22px; padding: 22px; }
.subscription-card { background: linear-gradient(145deg, rgb(255, 253, 248), rgb(238, 246, 237)); border: 1px solid rgb(216, 229, 213); border-radius: 24px; padding: 24px; box-shadow: var(--nx-shadow); }
.subscription-card .price { font-size: 40px; font-weight: 900; color: var(--nx-deep); letter-spacing: -0.06em; }
.admin-shell { background: rgb(240, 243, 241); }
.admin-shell .site-header, .admin-shell header { background: rgb(8, 47, 36); color: rgb(230, 240, 232); border-color: rgb(23, 77, 59); }
.admin-shell .brand { color: rgb(255, 255, 255); }
.admin-shell .card, .admin-shell .panel { border-radius: 16px; box-shadow: rgba(15, 55, 42, 0.08) 0px 10px 28px; }
.admin-nav { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 18px; background: rgb(11, 91, 64); color: rgb(229, 242, 233); }
.admin-nav a { padding: 8px 11px; border-radius: 10px; }
.admin-nav a:hover, .admin-nav .active { background: rgba(255, 255, 255, 0.13); color: rgb(255, 255, 255); }
.table-wrap { overflow: auto; border: 1px solid var(--nx-line); border-radius: 16px; background: var(--nx-paper); }
table { width: 100%; border-collapse: collapse; min-width: 620px; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--nx-line); }
th { background: rgb(237, 245, 238); color: var(--nx-green); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.bottom-nav, .mobile-bottom-nav { display: none; }
@media (max-width: 760px), (orientation: landscape) and (pointer: coarse) and (max-height: 900px) {
  html { font-size: 15px; }
  body { padding-bottom: 76px; }
  .site-header { height: 62px; padding: 0px 14px; }
  .brand { font-size: 16px; }
  .brand-mark { width: 36px; height: 36px; border-radius: 12px; font-size: 17px; }
  .top-actions { max-width: 52%; }
  .top-actions .btn { padding: 8px 11px; font-size: 12px; }
  .container { padding: 20px 16px 26px; }
  .hero { padding: 48px 18px 36px; border-radius: 0px 0px 28px 28px; }
  .hero h1 { font-size: 34px; line-height: 1.02; }
  .hero p { font-size: 14px; line-height: 1.6; }
  .hero-actions { display: grid; grid-template-columns: 1fr; gap: 9px; }
  .hero-actions .btn { width: 100%; text-align: center; }
  .section-title h2 { font-size: 21px; }
  .grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 11px; }
  .profile { border-radius: 17px; }
  .profile-body { padding: 11px; }
  .profile h3 { font-size: 14px; }
  .profile p { font-size: 12px; }
  .profile img, .profile .avatar { aspect-ratio: 0.8 / 1; }
  .card { padding: 17px; border-radius: 18px; }
  .page-title { font-size: 30px; }
  .profile-hero, .profile-cover, .islamic-hero, .prayer-banner { padding: 22px; border-radius: 22px; }
  .profile-actions { display: grid; grid-template-columns: 1fr; }
  .profile-actions .btn { width: 100%; text-align: center; }
  .photo-grid { gap: 7px; }
  .chat-row, .conversation-row { padding: 12px; }
  .bubble { max-width: 88%; }
  .message-form { position: sticky; bottom: 76px; z-index: 20; }
  .message-form .btn { padding: 11px 12px; }
  .search-bar, .filters { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 11px; }
  .search-bar input, .filters input, .filters select { min-width: 0px; width: 100%; }
  .prayer-grid, .dhikr-grid, .feature-grid { grid-template-columns: 1fr; gap: 11px; }
  .subscription-card { padding: 19px; }
  .subscription-card .price { font-size: 34px; }
  .site-footer, .footer { padding: 25px 16px 30px; }
  .bottom-nav, .mobile-bottom-nav { position: fixed; display: flex; left: 10px; right: 10px; bottom: 10px; z-index: 80; justify-content: space-around; align-items: center; padding: 8px 6px; border: 1px solid rgba(255, 255, 255, 0.62); border-radius: 20px; background: rgba(255, 253, 249, 0.91); backdrop-filter: blur(18px); box-shadow: rgba(6, 59, 43, 0.18) 0px 14px 34px; }
  .bottom-nav a, .mobile-bottom-nav a { display: grid; justify-items: center; gap: 2px; min-width: 50px; padding: 6px 8px; border-radius: 13px; color: rgb(102, 128, 115); font-size: 10px; font-weight: 800; }
  .bottom-nav a:first-child, .mobile-bottom-nav a:first-child, .bottom-nav a:hover, .mobile-bottom-nav a:hover { background: var(--nx-mint); color: var(--nx-green); opacity: 1; }
  .bottom-nav svg, .mobile-bottom-nav svg { width: 19px; height: 19px; }
  .admin-shell { padding-bottom: 0px; }
  .admin-shell .bottom-nav, .admin-shell .mobile-bottom-nav { display: none; }
  table { min-width: 560px; }
}
@media (min-width: 761px) {
  .bottom-nav, .mobile-bottom-nav { display: none !important; }
}
:root { --ref-bg: #031c16; --ref-green: #063b2b; --ref-cream: #fbf7ec; --ref-gold: #d7aa53; --ref-ink: #092f24; }
.site-main { background: var(--ref-bg); color: rgb(248, 244, 234); min-height: 100vh; }
.site-main .site-header { height: 92px; background: rgba(3, 28, 22, 0.97); border-bottom: 1px solid rgba(215, 170, 83, 0.55); color: rgb(248, 244, 234); box-shadow: none; }
.site-main .brand { display: flex; align-items: center; gap: 14px; color: rgb(248, 244, 234); }
.site-main .brand-mark { width: 58px; height: 58px; border: 1px solid var(--ref-gold); border-radius: 20px; background: radial-gradient(circle at 60% 40%, rgb(18, 70, 51), rgb(3, 28, 22) 72%); color: rgb(244, 198, 94); font-size: 34px; }
.brand-copy { display: grid; gap: 2px; }
.brand-copy strong { font: 28px / 1 Georgia, "Times New Roman", serif; }
.brand-copy small { font-size: 14px; color: rgb(213, 200, 174); }
.site-main .top-actions { gap: 14px; }
.site-main .top-actions a[href="support.php"] { display: none; }
.site-main .top-actions .btn { border-radius: 16px; padding: 15px 24px; background: transparent; border: 1px solid var(--ref-gold); color: rgb(248, 244, 234); }
.site-main .top-actions a[href="register.php"] { background: linear-gradient(135deg, rgb(241, 206, 124), rgb(247, 239, 216)); color: rgb(20, 41, 31); }
.home-hero { position: relative; isolation: isolate; min-height: 650px; padding: 72px max(30px, 50% - 620px) 74px; overflow: hidden; border-radius: 0px; background: radial-gradient(circle at 84% 32%, rgba(27, 100, 72, 0.65), transparent 32%), linear-gradient(120deg, rgb(3, 28, 22), rgb(6, 59, 43) 60%, rgb(10, 83, 59)); }
.home-hero::after { content: ""; position: absolute; inset: 0px; z-index: -1; opacity: 0.22; background-image: radial-gradient(circle at 20% 25%, rgba(215, 170, 83, 0.35) 0px, rgba(215, 170, 83, 0.35) 1px, transparent 2px), radial-gradient(circle at 70% 65%, rgba(255, 255, 255, 0.14) 0px, rgba(255, 255, 255, 0.14) 1px, transparent 2px); background-size: 42px 42px, 62px 62px; }
.hero-copy { position: relative; z-index: 3; width: min(680px, 58%); }
.hero-kicker { display: inline-flex; padding: 10px 18px; margin-bottom: 26px; border: 1px solid rgba(215, 170, 83, 0.55); border-radius: 999px; background: rgba(215, 170, 83, 0.1); color: rgb(240, 200, 106); font-weight: 700; }
.hero-copy h1 { margin: 0px 0px 28px; max-width: 680px; color: rgb(255, 253, 247); font: 500 clamp(54px, 6vw, 88px) / 0.98 Georgia, "Times New Roman", serif; letter-spacing: -0.055em; }
.hero-copy > p { max-width: 570px; margin: 0px 0px 26px; color: rgb(225, 232, 221); font-size: 22px; line-height: 1.55; }
.hero-search { display: flex; align-items: center; gap: 18px; width: min(610px, 100%); min-height: 70px; padding: 10px 14px 10px 22px; border-radius: 999px; background: rgb(255, 253, 247); color: rgb(107, 112, 108); font-size: 21px; box-shadow: rgba(0, 0, 0, 0.2) 0px 14px 28px; }
.hero-search-icon { font-size: 36px; color: rgb(10, 54, 40); }
.hero-search-go { margin-left: auto; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: rgb(11, 75, 54); color: rgb(255, 255, 255); font-size: 30px; }
.hero-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; width: min(860px, 100%); }
.hero-panel { position: relative; display: flex; align-items: center; gap: 14px; min-height: 150px; padding: 20px; border: 1px solid var(--ref-gold); border-radius: 24px; overflow: hidden; }
.hero-panel-dark { background: linear-gradient(135deg, rgb(10, 73, 53), rgb(3, 28, 22)); color: rgb(255, 255, 255); }
.hero-panel-light { background: linear-gradient(135deg, rgb(255, 253, 246), rgb(242, 234, 217)); color: rgb(18, 51, 40); border-color: rgb(232, 215, 173); }
.hero-panel-icon { width: 68px; height: 68px; flex: 0 0 68px; display: grid; place-items: center; border: 2px solid rgb(224, 184, 91); border-radius: 50%; color: rgb(224, 184, 91); font-size: 38px; }
.hero-panel-light .hero-panel-icon { color: rgb(182, 138, 53); }
.hero-panel-copy { display: grid; gap: 5px; }
.hero-panel-copy b { font: 24px Georgia, "Times New Roman", serif; }
.hero-panel-copy small { max-width: 230px; font-size: 14px; line-height: 1.4; }
.hero-panel-copy em { font-style: normal; color: rgb(225, 185, 84); font-size: 12px; }
.hero-panel-arrow { margin-left: auto; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid; border-radius: 50%; font-size: 24px; }
.hero-panel-location { display: none; }
.hero-art { position: absolute; z-index: 2; right: 3%; bottom: -25px; width: 43%; height: 92%; pointer-events: none; }
.hero-art::before { content: ""; position: absolute; left: 18%; right: 9%; bottom: 0px; height: 38%; background: rgb(7, 29, 24); border-radius: 50% 50% 0px 0px / 80% 80% 0px 0px; box-shadow: rgb(214, 169, 79) 0px -3px 0px; }
.hero-art::after { content: ""; position: absolute; inset: 0px; background: radial-gradient(circle at 58% 28%, rgb(242, 213, 135) 0px, rgb(242, 213, 135) 3px, transparent 4px), radial-gradient(circle at 72% 40%, rgb(242, 213, 135) 0px, rgb(242, 213, 135) 2px, transparent 3px); }
.art-moon { position: absolute; z-index: 4; right: 34%; top: 18%; color: rgb(231, 198, 109); font-size: 128px; transform: rotate(-18deg); }
.art-arch { position: absolute; z-index: 3; left: 13%; top: 5%; width: 67%; height: 75%; border-width: 6px 6px 0px; border-style: solid solid none; border-color: rgb(201, 156, 76) rgb(201, 156, 76) currentcolor; border-image: none; border-radius: 52% 52% 0px 0px; background: linear-gradient(155deg, rgba(39, 83, 65, 0.75), rgba(2, 20, 15, 0.8)); }
.art-dome { position: absolute; z-index: 5; left: 38%; bottom: 13%; width: 27%; height: 22%; border-radius: 55% 55% 8% 8%; background: rgb(7, 18, 15); border: 3px solid rgb(179, 132, 56); }
.art-minaret { position: absolute; z-index: 5; right: 4%; bottom: 12%; width: 8%; height: 55%; border-left: 4px solid rgb(200, 154, 72); border-right: 4px solid rgb(200, 154, 72); background: rgb(16, 31, 24); }
.art-lantern { position: absolute; z-index: 6; right: -1%; top: 16%; color: rgb(231, 189, 94); font-size: 72px; }
.quick-actions { position: relative; z-index: 8; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: min(1240px, 100% - 48px); margin: -42px auto 24px; padding: 22px; background: var(--ref-cream); border: 1px solid rgb(233, 217, 179); border-radius: 28px; box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 40px; }
.quick-card { display: grid; gap: 10px; align-content: start; min-height: 150px; padding: 18px 16px; border: 1px solid rgb(234, 223, 201); border-radius: 22px; background: rgb(255, 253, 247); color: rgb(10, 51, 39); }
.quick-card > span { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; background: rgb(8, 76, 56); color: rgb(242, 228, 189); font-size: 32px; }
.quick-card b { font: 22px Georgia, "Times New Roman", serif; }
.quick-card small { color: rgb(83, 98, 91); font-size: 14px; line-height: 1.35; }
.nx-quote { display: flex; align-items: center; gap: 24px; width: min(1180px, 100% - 48px); margin: 30px auto; padding: 28px 34px; border: 1px solid var(--ref-gold); border-radius: 26px; background: linear-gradient(110deg, rgb(5, 59, 43), rgb(11, 75, 53)); color: rgb(245, 237, 219); }
.nx-quote-mark { color: rgb(224, 179, 86); font-size: 92px; }
.nx-quote p { max-width: 620px; margin: 0px; font-size: 22px; line-height: 1.5; }
.nx-quote-star { margin-left: auto; color: rgb(224, 179, 86); font-size: 56px; }
.profile-grid { background: linear-gradient(145deg, rgb(6, 60, 44), rgb(2, 27, 21)); border: 1px solid rgba(215, 170, 83, 0.62); border-radius: 26px; padding: 18px; margin-bottom: 30px; }
.profile-grid .profile { border: 1px solid rgba(215, 170, 83, 0.62); border-radius: 22px; background: rgb(5, 52, 38); overflow: hidden; box-shadow: none; }
.profile-grid .profile-body { color: rgb(255, 255, 255); padding: 14px; }
.profile-grid .profile h3 { color: rgb(255, 255, 255); font: 21px Georgia, "Times New Roman", serif; }
.profile-grid .profile p { color: rgb(212, 223, 215); }
.profile-grid .profile img, .profile-grid .profile .avatar { height: 220px; aspect-ratio: auto; background: linear-gradient(145deg, rgb(101, 128, 120), rgb(16, 45, 35)); color: rgb(244, 231, 194); }
.profile-grid .mini-status { color: rgb(237, 198, 98); }
.site-main .section-title { color: rgb(247, 239, 223); }
.site-main .section-title h2 { font: 30px Georgia, "Times New Roman", serif; }
.site-main .islam-grid { background: rgb(6, 59, 43); border-radius: 24px; padding: 18px; }
.site-main .bottom-nav { background: rgb(3, 35, 25); border-top: 1px solid var(--ref-gold); color: rgb(241, 228, 196); }
.site-main .bottom-nav a { color: rgb(241, 228, 196); }
.site-main .bottom-nav a.active { background: linear-gradient(145deg, rgb(23, 90, 65), rgb(11, 55, 40)); border: 1px solid var(--ref-gold); }
@media (max-width: 760px), (orientation: landscape) and (pointer: coarse) and (max-height: 900px) {
  .site-main .site-header { height: 76px; padding: 0px 14px; }
  .site-main .brand-mark { width: 48px; height: 48px; border-radius: 16px; font-size: 29px; }
  .site-main .brand-copy strong { font-size: 22px; }
  .site-main .brand-copy small { font-size: 11px; }
  .site-main .top-actions { gap: 7px; }
  .site-main .top-actions .btn { padding: 10px 13px; font-size: 14px; border-radius: 14px; }
  .home-hero { min-height: 0px; padding: 46px 18px 34px; }
  .hero-copy { width: 100%; }
  .hero-kicker { font-size: 14px; margin-bottom: 22px; }
  .hero-copy h1 { font-size: clamp(42px, 11vw, 58px); line-height: 1.02; margin-bottom: 20px; }
  .hero-copy > p { font-size: 18px; line-height: 1.45; margin-bottom: 22px; }
  .hero-art { right: -20%; bottom: 4%; width: 72%; height: 65%; opacity: 0.7; }
  .art-moon { font-size: 88px; }
  .hero-search { min-height: 62px; font-size: 18px; padding-left: 18px; }
  .hero-search-icon { font-size: 30px; }
  .hero-search-go { width: 44px; height: 44px; font-size: 24px; }
  .hero-panels { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
  .hero-panel { min-height: 145px; padding: 14px; display: grid; grid-template-columns: 1fr auto; gap: 8px; border-radius: 20px; }
  .hero-panel-icon { width: 48px; height: 48px; flex-basis: 48px; font-size: 27px; }
  .hero-panel-copy b { font-size: 18px; }
  .hero-panel-copy small { font-size: 12px; }
  .hero-panel-copy em { display: none; }
  .hero-panel-arrow { grid-area: 1 / 2; }
  .quick-actions { grid-template-columns: repeat(4, 1fr); gap: 7px; width: calc(100% - 24px); margin: -20px 12px 20px; padding: 12px 8px 14px; border-radius: 24px; }
  .quick-card { min-height: 126px; padding: 12px 8px; border-radius: 18px; gap: 7px; }
  .quick-card > span { width: 42px; height: 42px; font-size: 23px; }
  .quick-card b { font-size: 16px; }
  .quick-card small { font-size: 11px; }
  .nx-quote { width: calc(100% - 24px); margin: 22px 12px; padding: 20px; border-radius: 20px; gap: 12px; }
  .nx-quote-mark { font-size: 54px; }
  .nx-quote p { font-size: 16px; }
  .nx-quote-star { font-size: 32px; }
  .profile-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 9px; padding: 10px; border-radius: 20px; }
  .profile-grid .profile { border-radius: 16px; }
  .profile-grid .profile img, .profile-grid .profile .avatar { height: 150px; }
  .profile-grid .profile h3 { font-size: 16px; }
  .profile-grid .profile-body { padding: 10px; }
  .profile-grid .profile p { font-size: 11px; }
  .site-main .section-title h2 { font-size: 24px; }
}
:root { --nx-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10.5 9-7.5 9 7.5M5 9.5V21h14V9.5M9 21v-6h6v6'/%3E%3C/svg%3E"); --nx-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E"); --nx-message: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-5 3v-3H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M7 10h10M7 14h6'/%3E%3C/svg%3E"); --nx-guests: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20c.6-3.2 2.7-5 6-5s5.4 1.8 6 5M16 5.5a3 3 0 0 1 0 5.8M17 15c2.2.7 3.5 2.2 4 5'/%3E%3C/svg%3E"); --nx-profile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M4 21c.8-4 3.4-6 8-6s7.2 2 8 6'/%3E%3C/svg%3E"); --nx-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M19.1 4.9l-1.4 1.4M6.3 17.7l-1.4 1.4'/%3E%3C/svg%3E"); --nx-compass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15.5 8.5-2.2 4.8-4.8 2.2 2.2-4.8 4.8-2.2Z'/%3E%3C/svg%3E"); }
.bottom-nav a > span, .quick-card > span, .hero-panel-icon, .hero-search-icon, .islam-tile > span { font-size: 0px !important; display: grid !important; place-items: center !important; background-color: currentcolor !important; border: 0px !important; border-radius: 0px !important; mask: var(--nx-icon) center/contain no-repeat !important; }
.bottom-nav a:nth-child(1) > span, .quick-card:nth-child(1) > span { --nx-icon: var(--nx-home); }
.bottom-nav a:nth-child(2) > span, .quick-card:nth-child(2) > span { --nx-icon: var(--nx-search); }
.bottom-nav a:nth-child(3) > span, .quick-card:nth-child(3) > span { --nx-icon: var(--nx-message); }
.bottom-nav a:nth-child(4) > span, .quick-card:nth-child(4) > span { --nx-icon: var(--nx-guests); }
.bottom-nav a:nth-child(5) > span { --nx-icon: var(--nx-profile); }
.hero-panel-dark .hero-panel-icon, .islam-tile[href*="prayer"] > span { --nx-icon: var(--nx-sun); }
.hero-panel-light .hero-panel-icon, .islam-tile[href*="qibla"] > span { --nx-icon: var(--nx-compass); }
.hero-search-icon { --nx-icon: var(--nx-search); flex: 0 0 auto; width: 22px !important; height: 22px !important; }
.hero-panel-icon { flex: 0 0 auto; width: 42px !important; height: 42px !important; }
.quick-card > span { width: 40px !important; height: 40px !important; }
.islam-tile > span { width: 34px !important; height: 34px !important; }
.bottom-nav a > span { width: 22px !important; height: 22px !important; }
.hero-panel-location[data-prayer-locate] { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.hero-panel-location[data-prayer-locate]:hover { color: rgb(242, 202, 103) !important; }
.site-main .home-hero { min-height: 500px !important; padding-top: 62px !important; padding-bottom: 76px !important; border-radius: 0px 0px 30px 30px !important; }
.site-main .hero-copy h1 { font-size: clamp(48px, 6vw, 76px) !important; }
.site-main .quick-actions { margin-top: -28px !important; margin-bottom: 30px !important; }
.profile-page, .profile-view { padding-top: 8px !important; padding-bottom: 34px !important; }
.profile-layout { gap: 12px !important; }
.profile-cover { padding: 22px !important; border-radius: 24px !important; grid-template-columns: 190px 1fr !important; gap: 18px !important; }
.profile-main-info h1 { font-size: 30px !important; margin: 4px 0px !important; }
.profile-facts .fact { padding: 10px 0px !important; }
.photo-grid { gap: 10px !important; }
.profile-page > .card, .profile-view > .card, .profile-page section.card, .profile-view section.card { padding: 18px !important; border-radius: 20px !important; }
.pwa-smart-banner { left: 12px !important; right: 12px !important; bottom: 74px !important; padding: 10px 12px !important; border-radius: 15px !important; gap: 8px !important; }
.pwa-smart-banner b { font-size: 14px !important; line-height: 1.15 !important; }
.pwa-smart-banner small { font-size: 11px !important; line-height: 1.25 !important; }
.pwa-smart-banner > div:first-child { max-width: 62% !important; }
.pwa-smart-banner > div:last-child { display: flex !important; align-items: center !important; gap: 6px !important; }
.pwa-smart-banner button { min-height: 36px !important; border: 0px !important; border-radius: 11px !important; padding: 7px 11px !important; font-size: 13px !important; white-space: nowrap !important; color: rgb(255, 255, 255) !important; }
.pwa-smart-banner #pwa-install { background: rgb(40, 126, 97) !important; font-weight: 750 !important; }
.pwa-smart-banner #pwa-close { width: 36px !important; padding: 4px !important; background: rgba(255, 255, 255, 0.086) !important; font-size: 21px !important; }
@media (max-width: 760px), (orientation: landscape) and (pointer: coarse) and (max-height: 900px) {
  .site-main .site-header { height: 60px !important; padding: 0px 14px !important; }
  .site-main .brand { font-size: 17px !important; gap: 9px !important; }
  .site-main .brand-mark { width: 36px !important; height: 36px !important; border-radius: 12px !important; }
  .site-main .top-actions .btn { padding: 8px 10px !important; font-size: 12px !important; border-radius: 12px !important; }
  .site-main .home-hero { min-height: auto !important; padding: 30px 16px 66px !important; border-radius: 0px 0px 24px 24px !important; }
  .site-main .hero-copy { width: 100% !important; }
  .site-main .hero-kicker { padding: 8px 12px !important; font-size: 12px !important; }
  .site-main .hero-copy h1 { max-width: 330px !important; font-size: clamp(39px, 11vw, 54px) !important; line-height: 0.95 !important; }
  .site-main .hero-copy > p { max-width: 340px !important; margin: 14px 0px 18px !important; font-size: 15px !important; line-height: 1.38 !important; }
  .site-main .hero-search { min-height: 56px !important; border-radius: 16px !important; padding: 6px 8px 6px 14px !important; font-size: 15px !important; }
  .site-main .hero-search-go { width: 42px !important; height: 42px !important; font-size: 22px !important; }
  .site-main .hero-panels { gap: 8px !important; margin-top: 10px !important; }
  .site-main .hero-panel { min-height: 112px !important; padding: 12px 10px !important; border-radius: 16px !important; }
  .site-main .hero-panel-icon { width: 34px !important; height: 34px !important; }
  .site-main .hero-panel-copy { gap: 4px !important; }
  .site-main .hero-panel-copy b { font-size: 15px !important; }
  .site-main .hero-panel-copy small { font-size: 10px !important; line-height: 1.2 !important; }
  .site-main .hero-panel-copy em, .site-main .hero-panel-location { font-size: 10px !important; }
  .site-main .hero-art { display: none !important; }
  .site-main .container { padding: 0px 12px 92px !important; }
  .site-main .quick-actions { width: calc(100% - 24px) !important; margin: -28px auto 24px !important; padding: 7px !important; gap: 4px !important; border-radius: 18px !important; }
  .site-main .quick-card { min-height: 80px !important; padding: 8px 3px !important; border-radius: 13px !important; }
  .site-main .quick-card > span { width: 30px !important; height: 30px !important; margin-bottom: 5px !important; }
  .site-main .quick-card b { font-size: 12px !important; }
  .site-main .quick-card small { font-size: 9px !important; line-height: 1.15 !important; }
  .site-main .section-title { margin: 18px 0px 10px !important; }
  .site-main .section-title h2 { font-size: 22px !important; }
  .site-main .profile-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; gap: 10px !important; margin-bottom: 24px !important; }
  .site-main .profile-grid .profile { border-radius: 16px !important; }
  .site-main .profile-grid .profile-body { padding: 10px !important; }
  .site-main .profile-grid .profile h3 { font-size: 14px !important; }
  .site-main .profile-grid .profile p { font-size: 11px !important; }
  .site-main .islam-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; gap: 8px !important; padding: 8px !important; border-radius: 18px !important; }
  .site-main .islam-tile { min-height: 96px !important; padding: 12px !important; border-radius: 14px !important; }
  .site-main .islam-tile h3 { font-size: 15px !important; }
  .site-main .islam-tile p { font-size: 10px !important; }
  .site-main .bottom-nav { min-height: 64px !important; height: 64px !important; padding: 4px !important; border-radius: 20px !important; }
  .site-main .bottom-nav a { font-size: 11px !important; gap: 3px !important; padding: 5px 2px !important; }
  .site-main .bottom-nav a > span { width: 20px !important; height: 20px !important; }
  .profile-page, .profile-view { padding: 6px 12px 86px !important; }
  .profile-layout { display: block !important; }
  .profile-cover { display: grid !important; grid-template-columns: 88px 1fr !important; gap: 12px !important; padding: 14px !important; border-radius: 20px !important; }
  .profile-large-photo { border-radius: 15px !important; font-size: 34px !important; }
  .profile-main-info h1 { font-size: 23px !important; }
  .profile-main-info p { font-size: 12px !important; }
  .profile-status { font-size: 11px !important; }
  .profile-cover .hero-actions { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; gap: 7px !important; margin-top: 2px !important; }
  .profile-cover .hero-actions .btn { min-height: 38px !important; padding: 8px 9px !important; border-radius: 11px !important; font-size: 12px !important; }
  .profile-facts { margin-top: 10px !important; }
  .profile-page > .card, .profile-view > .card, .profile-page section.card, .profile-view section.card { padding: 14px !important; border-radius: 18px !important; }
  .photo-grid { grid-template-columns: repeat(3, minmax(0px, 1fr)) !important; gap: 8px !important; }
}
:root { --ui-bg: #f5f7f5; --ui-card: #fff; --ui-ink: #17392f; --ui-green: #0f6b50; --ui-muted: #708077; --ui-line: #dce8df; --ui-soft: #eaf3ed; --ui-shadow: 0 10px 28px rgba(23,57,47,.07); --ui-radius: 18px; --nx-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
*, ::before, ::after { box-sizing: border-box; }
body.site-main { background: var(--ui-bg) !important; color: var(--ui-ink) !important; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important; }
.site-main .site-header { height: 68px !important; padding: 0px clamp(16px, 4vw, 56px) !important; background: rgb(255, 255, 255) !important; border-bottom: 1px solid var(--ui-line) !important; box-shadow: none !important; color: var(--ui-ink) !important; }
.site-main .brand { color: var(--ui-ink) !important; font-size: 17px !important; font-weight: 800 !important; gap: 10px !important; }
.site-main .brand-mark { width: 38px !important; height: 38px !important; border: 0px !important; border-radius: 12px !important; background: var(--ui-green) !important; color: rgb(244, 209, 108) !important; }
.site-main .top-actions { gap: 8px !important; }
.site-main .btn, .site-main button:not(.icon-btn):not([data-prayer-method]):not([data-prayer-asr]), .auth button, .auth input[type="submit"] { min-height: 42px !important; padding: 0px 16px !important; border: 1px solid transparent !important; border-radius: 13px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; font: 700 14px / 1 Inter, ui-sans-serif, system-ui, sans-serif !important; cursor: pointer !important; }
.site-main .btn:not(.light):not(.gold):not(.danger), .auth button, .auth input[type="submit"] { background: var(--ui-green) !important; color: rgb(255, 255, 255) !important; }
.site-main .btn.light { background: rgb(242, 247, 243) !important; color: rgb(10, 80, 61) !important; border-color: rgb(211, 227, 215) !important; }
.site-main .btn.gold { background: rgb(243, 210, 119) !important; color: var(--ui-ink) !important; }
.site-main .btn.danger { background: rgb(181, 75, 85) !important; color: rgb(255, 255, 255) !important; }
.site-main input:not([type="hidden"]), .site-main select, .site-main textarea, .auth input:not([type="hidden"]), .auth select, .auth textarea { min-height: 44px !important; padding: 10px 13px !important; border: 1px solid rgb(213, 226, 216) !important; border-radius: 12px !important; background: rgb(255, 255, 255) !important; color: var(--ui-ink) !important; font: 500 14px / 1.35 Inter, ui-sans-serif, system-ui, sans-serif !important; outline: 0px !important; box-shadow: none !important; }
.site-main input:focus, .site-main select:focus, .site-main textarea:focus, .auth input:focus { border-color: rgb(120, 174, 145) !important; box-shadow: rgba(15, 107, 80, 0.1) 0px 0px 0px 3px !important; }
.site-main .container { width: min(1180px, 100% - 40px) !important; margin-inline: auto !important; padding: 0px !important; }
.site-main .card, .site-main .profile, .site-main .guest-row, .site-main .thread-list, .site-main .messages-layout > * { border: 1px solid var(--ui-line) !important; border-radius: var(--ui-radius) !important; background: var(--ui-card) !important; box-shadow: var(--ui-shadow) !important; }
.site-main .home-hero { min-height: 500px !important; padding: 58px max(20px, 50% - 590px) 70px !important; border-radius: 0px !important; background: var(--ui-bg) !important; color: var(--ui-ink) !important; }
.site-main .hero-pattern { opacity: 0.22 !important; }
.site-main .hero-copy { width: min(600px, 62%) !important; }
.site-main .hero-kicker { padding: 8px 12px !important; border: 1px solid rgb(207, 226, 212) !important; border-radius: 999px !important; background: var(--ui-soft) !important; color: var(--ui-green) !important; font-size: 12px !important; font-weight: 800 !important; }
.site-main .hero-copy h1 { margin: 24px 0px 16px !important; color: var(--ui-ink) !important; font: 800 clamp(48px, 6vw, 76px) / 0.98 Inter, ui-sans-serif, system-ui, sans-serif !important; letter-spacing: -0.075em !important; }
.site-main .hero-copy > p { color: rgb(96, 113, 104) !important; font-size: 17px !important; }
.site-main .hero-search { min-height: 60px !important; margin-top: 22px !important; border: 1px solid rgb(219, 231, 222) !important; border-radius: 16px !important; background: rgb(255, 255, 255) !important; box-shadow: rgba(23, 57, 47, 0.08) 0px 12px 24px !important; }
.site-main .hero-search-go { width: 44px !important; height: 44px !important; border-radius: 12px !important; background: var(--ui-green) !important; }
.site-main .hero-panel { min-height: 132px !important; padding: 17px !important; border: 1px solid var(--ui-line) !important; border-radius: 17px !important; box-shadow: rgba(23, 57, 47, 0.06) 0px 8px 20px !important; }
.site-main .hero-panel-dark { background: var(--ui-green) !important; border-color: var(--ui-green) !important; }
.site-main .hero-panel-light { background: rgb(255, 255, 255) !important; color: var(--ui-ink) !important; }
.site-main .hero-panel-copy b { font: 750 17px / 1.15 Inter, ui-sans-serif, system-ui, sans-serif !important; }
.site-main .hero-panel-copy small, .site-main .hero-panel-location { font-size: 11px !important; }
.site-main .quick-actions { width: min(1180px, 100% - 40px) !important; margin: -30px auto 34px !important; padding: 9px !important; gap: 4px !important; border: 1px solid var(--ui-line) !important; border-radius: 18px !important; background: rgb(255, 255, 255) !important; box-shadow: rgba(23, 57, 47, 0.08) 0px 12px 28px !important; }
.site-main .quick-card { min-height: 108px !important; padding: 14px !important; border: 0px !important; border-radius: 13px !important; background: rgb(255, 255, 255) !important; color: var(--ui-ink) !important; }
.site-main .quick-card:hover { background: var(--ui-soft) !important; }
.site-main .quick-card > span { width: 38px !important; height: 38px !important; background: var(--ui-soft) !important; color: var(--ui-green) !important; }
.site-main .quick-card b { font-size: 15px !important; }
.site-main .quick-card small { font-size: 11px !important; color: var(--ui-muted) !important; }
.site-main .section-title h2 { font-size: 25px !important; color: var(--ui-ink) !important; }
.site-main .section-title a { color: var(--ui-green) !important; }
.site-main .profile-grid { grid-template-columns: repeat(4, minmax(0px, 1fr)) !important; gap: 12px !important; padding: 0px !important; background: transparent !important; border: 0px !important; box-shadow: none !important; }
.site-main .profile-grid .profile-body { padding: 12px 13px 14px !important; }
.site-main .profile-grid .profile h3 { font-size: 16px !important; color: var(--ui-ink) !important; }
.site-main .profile-grid .profile p { font-size: 11px !important; color: var(--ui-muted) !important; }
.site-main .islam-grid { grid-template-columns: repeat(4, minmax(0px, 1fr)) !important; gap: 12px !important; padding: 0px !important; background: transparent !important; border: 0px !important; }
.site-main .islam-tile { min-height: 128px !important; padding: 17px !important; border: 1px solid var(--ui-line) !important; border-radius: 17px !important; background: rgb(255, 255, 255) !important; color: var(--ui-ink) !important; box-shadow: var(--ui-shadow) !important; }
.site-main .islam-tile h3 { font-size: 17px !important; }
.site-main .islam-tile p { font-size: 11px !important; color: var(--ui-muted) !important; }
.profile-page, .profile-view { padding: 10px 0px 40px !important; }
.profile-cover, .profile-hero { padding: 20px !important; border: 1px solid var(--ui-line) !important; border-radius: 22px !important; background: rgb(255, 255, 255) !important; color: var(--ui-ink) !important; box-shadow: var(--ui-shadow) !important; }
.profile-cover h1, .profile-hero h1 { color: var(--ui-ink) !important; font-size: 30px !important; }
.profile-cover p, .profile-hero p { color: var(--ui-muted) !important; }
.profile-large-photo { border-radius: 17px !important; background: rgb(232, 240, 233) !important; }
.profile-status { color: var(--ui-green) !important; }
.photo-grid { gap: 9px !important; }
.photo-grid img { border-radius: 14px !important; }
.page-heading h1 { font-size: 32px !important; color: var(--ui-ink) !important; }
.prayer-banner { border: 1px solid var(--ui-line) !important; border-radius: 22px !important; background: rgb(255, 255, 255) !important; color: var(--ui-ink) !important; box-shadow: var(--ui-shadow) !important; }
.prayer-row { padding: 12px 4px !important; border-color: var(--ui-line) !important; }
.prayer-row b { color: var(--ui-green) !important; }
.segmented { padding: 4px !important; border-radius: 13px !important; background: rgb(237, 244, 238) !important; }
.segmented button { min-height: 36px !important; border: 0px !important; border-radius: 10px !important; background: transparent !important; color: var(--ui-muted) !important; }
.segmented button.active { background: rgb(255, 255, 255) !important; color: var(--ui-green) !important; }
.icon-btn { width: 42px !important; height: 42px !important; min-height: 42px !important; padding: 0px !important; border: 1px solid var(--ui-line) !important; border-radius: 12px !important; background: rgb(255, 255, 255) !important; color: var(--ui-green) !important; font-size: 0px !important; }
.auth { min-height: 100vh !important; padding: 24px !important; display: grid !important; place-items: center !important; background: var(--ui-bg) !important; }
.auth > .card { width: min(100%, 420px) !important; margin: 0px !important; padding: 28px !important; border: 1px solid var(--ui-line) !important; border-radius: 20px !important; background: rgb(255, 255, 255) !important; box-shadow: rgba(23, 57, 47, 0.08) 0px 15px 35px !important; }
.auth h1 { margin: 0px 0px 22px !important; color: var(--ui-ink) !important; font-size: 28px !important; letter-spacing: -0.06em !important; }
.auth form { display: grid !important; gap: 14px !important; }
.auth label { display: grid !important; gap: 7px !important; color: var(--ui-muted) !important; font-size: 12px !important; font-weight: 700 !important; }
.auth form button { width: 100% !important; }
.auth p { text-align: center !important; color: var(--ui-muted) !important; font-size: 12px !important; }
.auth a { color: var(--ui-green) !important; font-weight: 750 !important; }
.site-main .bottom-nav { background: rgb(255, 255, 255) !important; border: 1px solid var(--ui-line) !important; border-radius: 18px !important; box-shadow: rgba(23, 57, 47, 0.14) 0px 10px 25px !important; color: var(--ui-muted) !important; }
.site-main .bottom-nav a { color: var(--ui-muted) !important; font-size: 11px !important; font-weight: 700 !important; }
.site-main .bottom-nav a.active { color: var(--ui-green) !important; background: var(--ui-soft) !important; border-radius: 13px !important; }
.pwa-smart-banner { background: rgb(255, 255, 255) !important; color: var(--ui-ink) !important; border: 1px solid var(--ui-line) !important; }
.pwa-smart-banner small { color: var(--ui-muted) !important; }
.pwa-smart-banner #pwa-install { background: var(--ui-green) !important; color: rgb(255, 255, 255) !important; }
.pwa-smart-banner #pwa-close { background: var(--ui-soft) !important; color: var(--ui-green) !important; }
.bottom-nav a[href*="index"] > span, .bottom-nav a[href="./"] > span { --nx-icon: var(--nx-home); }
.bottom-nav a[href*="search"] > span { --nx-icon: var(--nx-search); }
.bottom-nav a[href*="messages"] > span { --nx-icon: var(--nx-message); }
.bottom-nav a[href*="guests"] > span { --nx-icon: var(--nx-guests); }
.bottom-nav a[href*="profile"] > span, .bottom-nav a[href*="login"] > span { --nx-icon: var(--nx-profile); }
.bottom-nav a[href*="register"] > span { --nx-icon: var(--nx-plus); }
.bottom-nav a > span { font-size: 0px !important; display: grid !important; place-items: center !important; width: 21px !important; height: 21px !important; background: currentcolor !important; mask: var(--nx-icon) center/contain no-repeat !important; }
@media (max-width: 980px) {
  .site-main .profile-grid { grid-template-columns: repeat(3, minmax(0px, 1fr)) !important; }
  .site-main .islam-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; }
}
@media (max-width: 760px), (orientation: landscape) and (pointer: coarse) and (max-height: 900px) {
  .site-main .site-header { height: 60px !important; padding: 0px 14px !important; }
  .site-main .brand { font-size: 16px !important; }
  .site-main .brand-mark { width: 36px !important; height: 36px !important; }
  .site-main .top-actions { gap: 5px !important; }
  .site-main .top-actions .btn { min-height: 36px !important; padding: 0px 10px !important; font-size: 11px !important; }
  .site-main .top-actions .btn.light:first-child { display: none !important; }
  .site-main .container { width: calc(100% - 24px) !important; }
  .site-main .home-hero { min-height: 0px !important; padding: 30px 16px 64px !important; }
  .site-main .hero-copy { width: 100% !important; }
  .site-main .hero-copy h1 { margin: 18px 0px 12px !important; font-size: clamp(38px, 11vw, 52px) !important; line-height: 0.97 !important; }
  .site-main .hero-copy > p { font-size: 14px !important; }
  .site-main .hero-search { min-height: 54px !important; margin-top: 0px !important; }
  .site-main .hero-panels { gap: 8px !important; margin-top: 9px !important; }
  .site-main .hero-panel { min-height: 104px !important; padding: 12px 10px !important; border-radius: 15px !important; }
  .site-main .hero-panel-copy b { font-size: 14px !important; }
  .site-main .hero-panel-copy small, .site-main .hero-panel-location { font-size: 9px !important; }
  .site-main .hero-art { display: none !important; }
  .site-main .quick-actions { width: calc(100% - 24px) !important; margin: -25px auto 22px !important; padding: 6px !important; border-radius: 16px !important; }
  .site-main .quick-card { min-height: 74px !important; padding: 8px 2px !important; }
  .site-main .quick-card > span { width: 29px !important; height: 29px !important; }
  .site-main .quick-card b { font-size: 11px !important; }
  .site-main .quick-card small { font-size: 8px !important; }
  .site-main .profile-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; gap: 9px !important; }
  .site-main .profile-grid .profile-body { padding: 9px 10px 11px !important; }
  .site-main .profile-grid .profile h3 { font-size: 13px !important; }
  .site-main .profile-grid .profile p { font-size: 10px !important; }
  .site-main .islam-grid { gap: 8px !important; }
  .site-main .islam-tile { min-height: 100px !important; padding: 12px !important; border-radius: 14px !important; }
  .site-main .islam-tile h3 { font-size: 14px !important; }
  .site-main .islam-tile p { font-size: 10px !important; }
  .site-main .bottom-nav { left: 10px !important; right: 10px !important; bottom: 8px !important; min-height: 62px !important; height: 62px !important; padding: 4px !important; border-radius: 17px !important; }
  .site-main .bottom-nav a { font-size: 10px !important; gap: 3px !important; padding: 4px 2px !important; }
  .site-main .bottom-nav a > span { width: 19px !important; height: 19px !important; }
  .profile-page, .profile-view { padding: 6px 0px 82px !important; }
  .profile-layout { display: block !important; }
  .profile-cover { display: grid !important; grid-template-columns: 82px 1fr !important; gap: 11px !important; padding: 13px !important; border-radius: 18px !important; }
  .profile-large-photo { border-radius: 14px !important; }
  .profile-cover h1, .profile-hero h1 { font-size: 22px !important; }
  .profile-cover .hero-actions { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; gap: 6px !important; }
  .profile-cover .hero-actions .btn { min-height: 36px !important; padding: 0px 8px !important; font-size: 11px !important; }
  .auth { padding: 16px !important; }
  .auth > .card { padding: 22px !important; border-radius: 18px !important; }
  .auth h1 { font-size: 25px !important; }
  .prayer-banner { border-radius: 18px !important; }
  .messages-layout { display: block !important; min-height: 0px !important; }
  .messages-layout > * + * { margin-top: 10px !important; }
}
.messages-page .chat-form { position: relative; align-items: flex-end; }
.chat-form .composer-field { position: relative; flex: 1 1 0%; min-width: 0px; }
.chat-form .composer-field textarea { width: 100%; padding-right: 48px; min-height: 46px; }
.chat-form .emoji-toggle { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 30px; padding: 0px; border: 0px; border-radius: 10px; background: rgb(241, 245, 239); color: var(--green2); font-size: 20px; line-height: 1; cursor: pointer; }
.chat-form .emoji-toggle:hover { background: rgb(228, 238, 229); }
.emoji-picker { position: absolute; left: 0px; bottom: calc(100% + 8px); z-index: 15; display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; padding: 9px; border: 1px solid var(--line); border-radius: 16px; background: rgb(255, 255, 255); box-shadow: rgba(22, 50, 35, 0.16) 0px 14px 36px; }
.emoji-picker[hidden] { display: none; }
.emoji-picker button { width: 34px; height: 34px; border: 0px; border-radius: 9px; background: transparent; font-size: 21px; cursor: pointer; }
.emoji-picker button:hover { background: rgb(238, 245, 237); }
.chat-form .send-button { width: 48px; min-height: 46px; }
@media (max-width: 600px) {
  .emoji-picker { grid-template-columns: repeat(7, 1fr); max-width: calc(-36px + 100vw); }
  .emoji-picker button { width: 32px; height: 32px; }
}
.profile-photo-wrap { position: relative; }
.private-photo-preview { width: 100%; aspect-ratio: 4 / 5; display: grid; place-items: center; align-content: center; gap: 6px; border-radius: 18px; background: linear-gradient(135deg, rgb(220, 229, 223), rgb(243, 246, 241)); color: var(--green2); }
.private-photo-preview span { font-size: 42px; }
.private-photo-preview small { font-size: 12px; color: var(--green2); }
.prayer-banner .prayer-main h2 { color: var(--ui-ink) !important; }
.prayer-banner .prayer-main p, .prayer-banner .prayer-main small { color: var(--ui-muted) !important; }
.prayer-banner .prayer-controls { color: var(--ui-ink) !important; }
.prayer-banner .prayer-controls > div > span { color: var(--ui-muted) !important; }
.prayer-banner .countdown b { color: var(--ui-green) !important; }
.demo-blur { filter: blur(12px); transform: scale(1.08); }
.messages-page { padding-top: 18px !important; }
.messages-layout { grid-template-columns: 340px minmax(0px, 1fr); gap: 0px; min-height: calc(-120px + 100vh); overflow: hidden; background: rgb(223, 231, 226); border: 1px solid rgb(214, 223, 216) !important; border-radius: 18px !important; box-shadow: rgba(31, 67, 48, 0.12) 0px 12px 34px !important; }
.thread-list { overflow: auto; padding: 0px !important; border: 0px !important; border-radius: 0px !important; background: rgb(255, 255, 255) !important; box-shadow: none !important; }
.thread-list .section-title { padding: 18px 18px 12px; margin: 0px; }
.thread-list > input { width: calc(100% - 28px); margin: 0px 14px 8px; border: 0px; background: rgb(240, 242, 245); border-radius: 10px; }
.thread-list .tabs { padding: 10px 16px 8px; margin: 0px; }
.thread { padding: 12px 16px; border-bottom: 1px solid rgb(237, 240, 237); }
.thread.selected { padding-left: 13px; border-left: 3px solid rgb(18, 140, 126); border-radius: 0px; background: rgb(233, 245, 237); }
.chat-panel { min-height: 100%; border: 0px !important; border-radius: 0px !important; background: rgb(239, 234, 226) !important; box-shadow: none !important; }
.chat-head { min-height: 68px; padding: 10px 16px; background: rgb(7, 94, 84); color: rgb(255, 255, 255); border: 0px; }
.chat-head h2 { color: rgb(255, 255, 255); }
.chat-status { display: block; color: rgb(205, 232, 223); font-size: 12px; }
.chat-status.online { color: rgb(216, 246, 230); }
.chat-status.typing { color: rgb(184, 245, 209); font-weight: 800; }
.chat-back { display: none; color: rgb(255, 255, 255); font-size: 28px; line-height: 1; margin-right: 2px; }
.chat-messages { min-height: 0px; padding: 24px 28px; background-color: rgb(239, 234, 226); background-image: radial-gradient(rgba(7, 94, 84, 0.07) 1px, transparent 1px), radial-gradient(rgba(7, 94, 84, 0.043) 1px, transparent 1px); background-position: 0px 0px, 12px 12px; background-size: 24px 24px; gap: 6px; }
.bubble { position: relative; max-width: min(75%, 560px); padding: 8px 10px 6px; border: 0px; border-radius: 7px; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 1px; }
.bubble.mine { background: rgb(217, 253, 211); border-radius: 7px; }
.bubble small { color: rgb(102, 119, 129); font-size: 10px; }
.chat-form { padding: 10px 12px; background: rgb(240, 242, 245); border: 0px; }
.chat-form .composer-field textarea { min-height: 44px; padding-top: 11px; padding-bottom: 11px; border: 0px; border-radius: 22px; background: rgb(255, 255, 255); box-shadow: none; }
.chat-form .emoji-toggle { background: rgb(240, 242, 245); }
.chat-form .send-button { width: 44px; min-height: 44px; border-radius: 50%; padding: 0px; background: rgb(18, 140, 126); }
.emoji-picker { bottom: calc(100% + 10px); }
@media (max-width: 760px), (orientation: landscape) and (pointer: coarse) and (max-height: 900px) {
  .messages-page { padding: 8px 0px 0px !important; }
  .messages-layout { min-height: calc(100dvh - 84px); border-radius: 0px !important; border-left: 0px !important; border-right: 0px !important; box-shadow: none !important; }
  .messages-layout:has(.chat-head) .thread-list { display: none; }
  .messages-layout:has(.chat-head) .chat-panel { display: flex; min-height: calc(100dvh - 84px); }
  .chat-back { display: grid; place-items: center; }
  .chat-head { padding: 8px 10px; }
  .chat-messages { padding: 14px 10px 18px; }
  .bubble { max-width: 86%; }
  .chat-form { padding: 8px; }
}
.site-toast-stack { position: fixed; top: 16px; right: 16px; z-index: 1000; display: grid; gap: 10px; width: min(390px, -32px + 100vw); pointer-events: none; }
.site-toast { display: grid; grid-template-columns: minmax(0px, 1fr) auto auto; align-items: center; gap: 12px; padding: 14px 15px; border: 1px solid rgb(207, 225, 212); border-radius: 16px; background: rgba(255, 255, 255, 0.97); box-shadow: rgba(18, 55, 39, 0.18) 0px 14px 36px; color: rgb(23, 59, 44); pointer-events: auto; animation: 0.22s ease-out 0s 1 normal none running site-toast-in; }
.site-toast-copy { display: grid; gap: 3px; min-width: 0px; }
.site-toast-copy b { font-size: 14px; }
.site-toast-copy span { font-size: 13px; line-height: 1.35; color: rgb(88, 112, 100); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-toast-link { font-size: 13px; font-weight: 700; color: rgb(15, 118, 85); text-decoration: none; white-space: nowrap; }
.site-toast-link:hover { text-decoration: underline; }
.site-toast-close { border: 0px; background: transparent; color: rgb(120, 144, 134); font-size: 22px; line-height: 1; padding: 2px 0px; cursor: pointer; }
.site-back { align-items: center; justify-content: center; gap: 6px; font-weight: 700; text-decoration: none; box-shadow: rgba(18, 55, 39, 0.07) 0px 3px 12px; display: inline-flex !important; min-height: 42px !important; padding: 10px 15px !important; border: 1px solid rgb(191, 210, 197) !important; border-radius: 12px !important; background: rgb(255, 255, 255) !important; color: rgb(23, 59, 44) !important; }
.admin-topbar .site-back { margin: 8px 0px !important; }
.site-back:hover { background: rgb(240, 248, 242) !important; border-color: rgb(124, 172, 142) !important; }
@keyframes site-toast-in { 
  0% { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0px); }
}
@media (max-width: 640px) {
  .site-toast-stack { top: 12px; right: 12px; left: 12px; width: auto; }
  .site-toast { grid-template-columns: minmax(0px, 1fr) auto; gap: 8px; }
  .site-toast-link { grid-column: 1; }
  .site-toast-close { grid-area: 1 / 2; }
  .site-toast-copy span { white-space: normal; }
}
.site-back-floating { position: fixed; top: 16px; left: 16px; z-index: 1200; display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 15px; border: 1px solid rgb(191, 210, 197); border-radius: 12px; background: rgb(255, 255, 255); color: rgb(23, 59, 44); font-weight: 700; text-decoration: none; box-shadow: rgba(18, 55, 39, 0.16) 0px 6px 18px; }
.site-back-floating:hover { background: rgb(240, 248, 242); border-color: rgb(124, 172, 142); }
.site-back-floating.admin-back { left: 278px; }
@media (max-width: 900px) {
  .site-back-floating { top: 12px; left: 12px; }
  .site-back-floating.admin-back { left: 12px; }
}
.site-global-back { position: fixed; top: 16px; left: 16px; z-index: 1200; display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 15px; border: 1px solid rgb(191, 210, 197); border-radius: 12px; background: rgb(255, 255, 255); color: rgb(23, 59, 44); font-weight: 700; text-decoration: none; box-shadow: rgba(18, 55, 39, 0.16) 0px 6px 18px; }
.site-global-back:hover { background: rgb(240, 248, 242); border-color: rgb(124, 172, 142); }
.admin-topbar .site-back { top: 16px; left: 278px; z-index: 1200; font-weight: 700; box-shadow: rgba(18, 55, 39, 0.16) 0px 6px 18px; position: fixed !important; margin: 0px !important; min-height: 42px !important; padding: 10px 15px !important; border: 1px solid rgb(191, 210, 197) !important; border-radius: 12px !important; background: rgb(255, 255, 255) !important; color: rgb(23, 59, 44) !important; }
@media (max-width: 900px) {
  .site-global-back { top: 12px; left: 12px; }
  .admin-topbar .site-back { top: 12px; left: 12px; }
}
.has-site-global-back .site-header { padding-left: 116px; }
@media (max-width: 900px) {
  .has-site-global-back .site-header { padding-left: 112px; }
}
body.has-site-global-back .site-header { padding-left: 116px !important; }
@media (max-width: 900px) {
  body.has-site-global-back .site-header { padding-left: 112px !important; }
}
@media (max-width: 760px), (orientation: landscape) and (pointer: coarse) and (max-height: 900px) {
  .messages-page { padding: 0px !important; margin: 0px !important; max-width: none !important; }
  .messages-layout { min-height: calc(100dvh - 70px) !important; border-radius: 0px !important; border-left: 0px !important; border-right: 0px !important; }
  .thread-list .section-title { padding: 14px 16px 10px !important; }
  .thread-list > input { margin: 0px 12px 6px !important; width: calc(100% - 24px) !important; }
  .thread { padding: 9px 12px !important; gap: 9px !important; }
  .thread-avatar { width: 40px !important; height: 40px !important; }
  .thread-main p { margin-top: 2px !important; }
  body.site-main:has(.messages-page .chat-head) { overflow: hidden !important; }
  body.site-main:has(.messages-page .chat-head) .site-header { display: none !important; }
  body.site-main:has(.messages-page .chat-head) .bottom-nav { display: none !important; }
  body.site-main:has(.messages-page .chat-head) .messages-layout { height: 100dvh !important; min-height: 100dvh !important; }
  body.site-main:has(.messages-page .chat-head) .chat-panel { height: 100dvh !important; min-height: 100dvh !important; }
  body.site-main:has(.messages-page .chat-head) .chat-head { height: 58px !important; min-height: 58px !important; padding: 7px 10px !important; gap: 9px !important; }
  body.site-main:has(.messages-page .chat-head) .chat-head .thread-avatar { width: 38px !important; height: 38px !important; }
  body.site-main:has(.messages-page .chat-head) .chat-head h2 { font-size: 15px !important; margin-bottom: 1px !important; }
  body.site-main:has(.messages-page .chat-head) .chat-status { font-size: 11px !important; }
  body.site-main:has(.messages-page .chat-head) .chat-back { font-size: 25px !important; margin-right: 0px !important; }
  body.site-main:has(.messages-page .chat-head) .chat-messages { padding: 12px 10px 14px !important; gap: 5px !important; }
  body.site-main:has(.messages-page .chat-head) .bubble { max-width: 86% !important; padding: 7px 9px 5px !important; border-radius: 8px !important; font-size: 14px !important; line-height: 1.3 !important; }
  body.site-main:has(.messages-page .chat-head) .bubble small { font-size: 9px !important; margin-top: 3px !important; }
  body.site-main:has(.messages-page .chat-head) .chat-form { padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) !important; gap: 6px !important; }
  body.site-main:has(.messages-page .chat-head) .chat-form .composer-field textarea { min-height: 40px !important; max-height: 96px !important; padding: 9px 40px 9px 14px !important; font-size: 14px !important; }
  body.site-main:has(.messages-page .chat-head) .chat-form .emoji-toggle { right: 6px !important; bottom: 5px !important; width: 30px !important; height: 30px !important; font-size: 18px !important; }
  body.site-main:has(.messages-page .chat-head) .chat-form .send-button { width: 40px !important; height: 40px !important; min-height: 40px !important; font-size: 17px !important; }
}
.subscription-paywall { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; }
.subscription-paywall p { flex: 1 1 0%; min-width: 0px; margin: 0px; }
.subscription-paywall .btn { flex: 0 0 auto; white-space: nowrap; padding: 10px 14px; }
@media (max-width: 760px), (orientation: landscape) and (pointer: coarse) and (max-height: 900px) {
  .subscription-paywall { gap: 8px; padding: 8px 10px; border-radius: 12px; }
  .subscription-paywall p { font-size: 12px; line-height: 1.3; }
  .subscription-paywall .btn { padding: 8px 10px; font-size: 12px; }
}
body.site-main.chat-open .chat-panel > .card.subscription-paywall { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; box-sizing: border-box !important; overflow: visible !important; }
body.site-main.chat-open .chat-panel > .card.subscription-paywall p { display: block !important; flex: 1 1 auto !important; min-width: 0px !important; width: auto !important; margin: 0px !important; color: rgb(21, 55, 45) !important; visibility: visible !important; opacity: 1 !important; overflow-wrap: anywhere !important; }
body.site-main.chat-open .chat-panel > .card.subscription-paywall .btn { display: inline-flex !important; flex: 0 0 auto !important; width: auto !important; min-width: 0px !important; max-width: 100% !important; white-space: nowrap !important; position: static !important; }
@media (max-width: 760px), (orientation: landscape) and (pointer: coarse) and (max-height: 900px) {
  body.site-main.chat-open .chat-panel > .card.subscription-paywall { gap: 8px !important; padding: 8px 10px !important; }
  body.site-main.chat-open .chat-panel > .card.subscription-paywall p { font-size: 12px !important; line-height: 1.3 !important; }
  body.site-main.chat-open .chat-panel > .card.subscription-paywall .btn { padding: 8px 10px !important; font-size: 12px !important; }
}
@media (max-width: 760px), (orientation: landscape) and (pointer: coarse) and (max-height: 900px) {
  html:has(.admin-shell), body:has(.admin-shell) { overflow-x: hidden; }
  .admin-shell { display: block; min-height: 100vh; overflow-x: hidden; }
  .admin-sidebar { top: 0px; bottom: 0px; z-index: 100; overflow-y: auto; box-shadow: rgba(0, 0, 0, 0.22) 12px 0px 34px; position: fixed !important; left: calc(-1 * min(228px, 78vw)) !important; width: min(228px, 78vw) !important; padding: 14px 10px !important; }
  .admin-sidebar.open { left: 0px !important; }
  .admin-logo { gap: 8px; padding: 4px 6px 14px; font-size: 16px; }
  .admin-logo .brand-mark { width: 38px; height: 38px; border-radius: 12px; font-size: 22px; }
  .admin-logo small { font-size: 9px; }
  .admin-nav-group { margin: 12px 6px 4px; font-size: 9px; letter-spacing: 0.07em; }
  .admin-nav a { min-height: 40px; padding: 8px 9px; margin: 2px 0px; gap: 8px; border-radius: 10px; font-size: 14px; line-height: 1.15; }
  .admin-nav a span:first-child { min-width: 22px; text-align: center; font-size: 18px; }
  .admin-main { width: 100%; min-width: 0px; }
  .admin-topbar { height: 56px; padding: 0px 10px; position: sticky; top: 0px; z-index: 80; }
  .admin-topbar > div:first-child { gap: 7px; }
  .admin-nav-toggle { width: 38px; height: 38px; padding: 0px; display: inline-grid; place-items: center; font-size: 19px; border-radius: 10px; }
  .admin-topbar .right { gap: 6px; }
  .admin-avatar { width: 32px; height: 32px; }
  .admin-topbar .right .btn { padding: 7px 9px; font-size: 12px; }
  .admin-content { padding: 14px 12px 30px; max-width: none; }
  .admin-title { align-items: stretch; flex-direction: column; gap: 10px; margin-bottom: 14px; }
  .admin-title h1 { font-size: 22px; line-height: 1.12; }
  .kpis { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 8px; }
  .kpi { padding: 11px; border-radius: 12px; }
  .kpi strong { font-size: 20px; }
  .kpi small { font-size: 11px; line-height: 1.25; }
  .admin-grid, .admin-grid.two { grid-template-columns: 1fr; gap: 10px; }
  .panel { padding: 12px; border-radius: 13px; overflow: hidden; }
  .panel h3 { font-size: 14px; margin-bottom: 9px; }
  .fake-stats { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 6px; }
  .mini { padding: 8px; }
  .mini strong { font-size: 16px; }
  .admin-content .panel:has(table), .admin-content .table-wrap { overflow-x: auto; }
  .admin-content table { min-width: 620px; }
  .admin-content .form-grid { grid-template-columns: 1fr !important; }
  .admin-content input, .admin-content select, .admin-content textarea { max-width: 100%; font-size: 14px; }
  .admin-content .btn { min-height: 40px; }
}
@media (max-width: 380px) {
  .admin-sidebar { width: min(216px, 82vw) !important; left: calc(-1 * min(216px, 82vw)) !important; }
  .admin-nav a { font-size: 13px; }
  .admin-content { padding-left: 10px; padding-right: 10px; }
  .kpi { padding: 9px; }
  .kpi strong { font-size: 18px; }
}
:root { --nn-ink: #15372d; --nn-deep: #0d5f49; --nn-green: #1a8061; --nn-green-soft: #eaf4ed; --nn-gold: #c99843; --nn-gold-soft: #fbf2dd; --nn-bg: #f7f8f4; --nn-paper: #fffefa; --nn-line: #e2e9e1; --nn-muted: #718078; --nn-danger: #b64c4c; --nn-shadow: 0 14px 38px rgba(19, 61, 45, .09); --nn-radius: 22px; }
html { background: var(--nn-bg); scroll-behavior: smooth; }
body, body.site-main, body.page, body.seo, body.pm, body.qp, body.qp2 { min-width: 0px; overflow-x: hidden; background: var(--nn-bg) !important; color: var(--nn-ink) !important; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }
body::before { opacity: 0.35 !important; background: radial-gradient(circle at 12% 0px, rgb(255, 255, 255) 0px, transparent 34%), radial-gradient(circle at 92% 8%, rgb(227, 240, 231) 0px, transparent 30%) !important; }
*, ::before, ::after { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
h1, h2, h3, h4, p { overflow-wrap: anywhere; }
.site-header { position: sticky !important; top: 0px !important; z-index: 80 !important; height: 76px !important; padding: 0px max(18px, 50% - 590px) !important; background: rgba(255, 254, 250, 0.92) !important; color: var(--nn-ink) !important; border-bottom: 1px solid var(--nn-line) !important; box-shadow: rgba(19, 61, 45, 0.05) 0px 5px 22px !important; backdrop-filter: blur(18px) !important; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 850; letter-spacing: -0.035em; color: var(--nn-deep) !important; }
.brand-mark { display: grid; place-items: center; width: 44px !important; height: 44px !important; border-radius: 15px !important; background: linear-gradient(145deg, var(--nn-green), var(--nn-deep)) !important; color: rgb(244, 207, 112) !important; box-shadow: rgba(13, 95, 73, 0.2) 0px 8px 20px !important; font-size: 25px !important; }
.brand-copy strong { color: var(--nn-deep) !important; }
.brand-copy small { color: var(--nn-muted) !important; }
.top-actions { display: flex; align-items: center; gap: 9px !important; }
body:not(.ar-page) button, body:not(.ar-page) .btn, body:not(.ar-page) .nx-btn, body:not(.ar-page) .send-button, body:not(.ar-page) .start-button { min-height: 42px; cursor: pointer; border: 1px solid transparent !important; border-radius: 14px !important; padding: 10px 16px !important; background: var(--nn-deep) !important; color: rgb(255, 255, 255) !important; box-shadow: rgba(13, 95, 73, 0.14) 0px 8px 18px !important; font-weight: 760 !important; transition: transform 0.18s, background 0.18s, box-shadow 0.18s, border-color 0.18s !important; }
body:not(.ar-page) button:hover, body:not(.ar-page) .btn:hover, body:not(.ar-page) .nx-btn:hover, body:not(.ar-page) .send-button:hover, body:not(.ar-page) .start-button:hover { transform: translateY(-2px); background: var(--nn-green) !important; box-shadow: rgba(13, 95, 73, 0.2) 0px 13px 24px !important; }
body:not(.ar-page) .btn.light, body:not(.ar-page) .btn.secondary, body:not(.ar-page) .nx-btn.light { background: var(--nn-paper) !important; color: var(--nn-deep) !important; border-color: rgb(207, 224, 213) !important; box-shadow: none !important; }
body:not(.ar-page) .btn.gold, body:not(.ar-page) .nx-btn.gold { background: linear-gradient(135deg, #dfb65c, var(--nn-gold)) !important; color: rgb(62, 43, 9) !important; }
body:not(.ar-page) .danger { background: rgb(255, 241, 240) !important; color: var(--nn-danger) !important; border-color: rgb(239, 200, 196) !important; box-shadow: none !important; }
.top-actions .btn { white-space: nowrap; }
.container, .nx-wrap, .wrap, .pmwrap, .qwrap, .dash, .support-wrap { width: min(1180px, 100%) !important; max-width: 1180px !important; margin-inline: auto !important; padding: 30px 24px !important; }
.page-heading, .nx-head, .admin-title { margin: 8px 0px 22px !important; }
.page-heading h1, .nx-head h1, .page-title { margin: 0px 0px 8px !important; color: var(--nn-ink) !important; font-size: clamp(30px, 4vw, 48px) !important; font-weight: 820 !important; letter-spacing: -0.06em !important; }
.page-heading p, .page-subtitle, .muted, .nx-muted { color: var(--nn-muted) !important; }
.pill, .nx-pill, .tag, .chip, .badge { display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgb(209, 228, 214) !important; border-radius: 999px !important; padding: 7px 11px !important; background: var(--nn-green-soft) !important; color: var(--nn-deep) !important; font-size: 12px !important; font-weight: 760 !important; }
.card, .panel, .profile, .profile-card, .thread-list, .chat-panel, .guest-row, .guest-item, .user-row, .search-card, .nx-card, .support-card, .pay-card, .had-card, .qcard, .pmcard, .cardx, .dc, .stat, .v20-card { border: 1px solid var(--nn-line) !important; border-radius: var(--nn-radius) !important; background: rgba(255, 254, 250, 0.92) !important; box-shadow: var(--nn-shadow) !important; }
.card h1, .card h2, .card h3, .panel h1, .panel h2, .panel h3, .nx-card h1, .nx-card h2, .nx-card h3 { color: var(--nn-ink); letter-spacing: -0.035em; }
.nx-grid, .grid, .feature-grid, .prayer-grid, .dhikr-grid { gap: 16px !important; }
.nx-card { display: block; transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s; padding: 22px !important; }
.nx-card:hover, .feature-link:hover { transform: translateY(-3px); border-color: rgb(175, 208, 187) !important; box-shadow: rgba(19, 61, 45, 0.13) 0px 20px 42px !important; }
input, select, textarea { width: 100%; min-height: 44px; border: 1px solid rgb(215, 227, 218) !important; border-radius: 13px !important; padding: 11px 13px !important; background: rgb(255, 254, 250) !important; color: var(--nn-ink) !important; outline: none !important; transition: border-color 0.18s, box-shadow 0.18s !important; }
input:focus, select:focus, textarea:focus { border-color: rgb(105, 172, 143) !important; box-shadow: rgba(26, 128, 97, 0.12) 0px 0px 0px 4px !important; }
textarea { min-height: 110px; resize: vertical; }
label { color: var(--nn-ink) !important; font-weight: 650; }
form { gap: 14px; }
.notice, .flash, .alert, .ok, .error { border-radius: 15px !important; padding: 13px 15px !important; }
.notice, .flash, .ok { background: rgb(237, 247, 239) !important; border: 1px solid rgb(209, 230, 212) !important; color: rgb(39, 102, 71) !important; }
.error { background: rgb(255, 240, 239) !important; border: 1px solid rgb(239, 206, 202) !important; color: rgb(157, 68, 68) !important; }
body.site-main .home-hero { display: block !important; min-height: 0px !important; padding: 0px 0px 46px !important; background: linear-gradient(180deg, #f8fbf7 0, #fffdf8 58%, var(--nn-bg) 100%) !important; color: var(--nn-ink) !important; border-radius: 0px !important; overflow: hidden !important; }
body.site-main .home-hero::after { display: none !important; }
body.site-main .home-hero > .hero-pattern { display: none !important; }
body.site-main .home-hero > .hero-copy { isolation: isolate; position: relative !important; width: min(1180px, 100%) !important; min-height: 468px !important; margin: 0px auto !important; padding: 72px 24px 48px !important; }
body.site-main .home-hero > .hero-copy::after { content: ""; position: absolute; z-index: -1; right: 0px; bottom: 0px; width: 53%; height: 100%; opacity: 0.76; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 430'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' x2='1'%3E%3Cstop stop-color='%23f7fbf5'/%3E%3Cstop offset='.55' stop-color='%23d8e6dd'/%3E%3Cstop offset='1' stop-color='%23b3cdbd'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='620' height='430' fill='url(%23b)'/%3E%3Cg fill='%236b8f7c' opacity='.58'%3E%3Cpath d='M275 335V200c0-58 70-58 70 0v135z'/%3E%3Cpath d='M205 335v-98c0-34 39-34 39 0v98zM390 335v-110c0-34 39-34 39 0v110z'/%3E%3Cpath d='M225 236h-9l8-96 8 96zM409 226h-9l8-107 8 107z'/%3E%3Cpath d='M255 335v-54c0-54 110-54 110 0v54z'/%3E%3Cpath d='M255 284c0-65 110-65 110 0-21-18-89-18-110 0z'/%3E%3Cpath d='M300 214c0-20 20-34 20-34s20 14 20 34z'/%3E%3C/g%3E%3Cg fill='%23c99843' opacity='.7'%3E%3Cpath d='M222 140h7v18h-7zM406 106h7v18h-7zM315 177h7v14h-7z'/%3E%3C/g%3E%3Ccircle cx='474' cy='62' r='30' fill='%23fff9e9' opacity='.8'/%3E%3C/svg%3E") right center / cover no-repeat; mask-image: linear-gradient(90deg, transparent 0px, rgb(0, 0, 0) 18%, rgb(0, 0, 0) 100%); }
body.site-main .home-hero > .hero-copy > * { position: relative; z-index: 1; }
body.site-main .hero-kicker { display: inline-flex; margin-bottom: 20px !important; padding: 8px 13px !important; border: 1px solid rgb(213, 232, 218) !important; background: var(--nn-green-soft) !important; color: var(--nn-deep) !important; }
body.site-main .hero-copy h1 { max-width: 610px !important; margin: 0px 0px 18px !important; color: var(--nn-ink) !important; font-size: clamp(48px, 6vw, 78px) !important; line-height: 0.98 !important; font-weight: 820 !important; letter-spacing: -0.075em !important; }
body.site-main .hero-copy > p { max-width: 520px !important; margin: 0px 0px 22px !important; color: rgb(93, 110, 102) !important; font-size: 18px !important; line-height: 1.5 !important; }
body.site-main .hero-search { align-items: center; gap: 12px; font-size: 17px; display: flex !important; width: min(560px, 100%) !important; min-height: 62px !important; padding: 7px 9px 7px 17px !important; border: 1px solid rgb(223, 231, 224) !important; border-radius: 18px !important; background: var(--nn-paper) !important; color: rgb(123, 135, 128) !important; box-shadow: rgba(19, 61, 45, 0.1) 0px 16px 28px !important; }
body.site-main .hero-search-icon { width: 24px !important; height: 24px !important; color: var(--nn-green) !important; }
body.site-main .hero-search-go { display: grid; place-items: center; margin-left: auto; width: 48px !important; height: 48px !important; border-radius: 15px !important; background: var(--nn-deep) !important; color: rgb(255, 255, 255) !important; font-size: 25px !important; }
body.site-main .hero-copy .islam-quick-card { display: grid !important; grid-template-columns: 45px 1fr !important; grid-template-rows: auto auto !important; width: min(285px, 100%) !important; min-height: 72px !important; margin-top: 13px !important; padding: 12px 14px !important; gap: 3px 11px !important; border: 1px solid rgb(223, 233, 223) !important; border-radius: 18px !important; background: rgba(255, 254, 250, 0.9) !important; color: var(--nn-ink) !important; box-shadow: rgba(19, 61, 45, 0.07) 0px 10px 22px !important; }
body.site-main .hero-copy .islam-quick-card > span { grid-row: 1 / span 2; place-items: center; display: grid !important; width: 45px !important; height: 45px !important; border-radius: 50% !important; background: var(--nn-green-soft) !important; color: var(--nn-green) !important; font-size: 26px !important; }
body.site-main .hero-copy .islam-quick-card > b { color: var(--nn-ink) !important; font-size: 16px !important; }
body.site-main .hero-copy .islam-quick-card > small { color: var(--nn-muted) !important; }
body.site-main .home-hero > .section-title { width: min(1180px, 100% - 48px) !important; margin: 8px auto 14px !important; color: var(--nn-ink) !important; }
body.site-main .home-hero > .section-title h2 { margin: 0px !important; color: var(--nn-ink) !important; font-size: 26px !important; }
body.site-main .home-hero > .section-title a { color: var(--nn-deep) !important; font-weight: 760; }
body.site-main .home-hero > .profile-grid { width: min(1180px, 100% - 48px) !important; margin: 0px auto 32px !important; padding: 0px !important; grid-template-columns: repeat(4, minmax(0px, 1fr)) !important; background: transparent !important; border: 0px !important; }
body.site-main .profile-grid .profile { overflow: hidden; border-radius: 20px !important; background: var(--nn-paper) !important; }
.profile-grid .profile-media { aspect-ratio: 4 / 4.8 !important; background: linear-gradient(145deg, rgb(227, 239, 230), rgb(189, 215, 197)) !important; }
.profile-grid .profile img, .profile-grid .profile .avatar { width: 100%; height: 100%; object-fit: cover; color: var(--nn-deep); font-size: 54px; }
.profile-grid .profile-body { padding: 14px 15px 16px !important; }
.profile-grid .profile h3 { margin: 0px 0px 5px !important; color: var(--nn-ink) !important; font-size: 17px !important; }
.profile-grid .profile p { color: var(--nn-muted) !important; }
.profile-grid .profile-goal { color: var(--nn-deep) !important; }
.online-dot, .mini-status { border-radius: 999px !important; background: rgb(237, 247, 239) !important; color: rgb(41, 114, 79) !important; }
body.site-main .nx-quote { width: min(1180px, 100% - 48px) !important; margin: 30px auto !important; padding: 24px 28px !important; border: 1px solid rgb(230, 210, 160) !important; border-radius: 22px !important; background: linear-gradient(120deg, rgb(253, 246, 229), rgb(240, 247, 239)) !important; color: var(--nn-ink) !important; box-shadow: none !important; }
body.site-main .nx-quote p { color: var(--nn-ink) !important; font-size: 18px; }
body.site-main .islam-grid { width: min(1180px, 100% - 48px) !important; margin: 0px auto !important; padding: 12px !important; grid-template-columns: repeat(4, minmax(0px, 1fr)) !important; border: 1px solid rgb(223, 233, 223) !important; border-radius: 24px !important; background: rgb(238, 246, 239) !important; }
body.site-main .islam-tile { min-height: 130px !important; border-radius: 17px !important; background: var(--nn-paper) !important; }
body.site-main .islam-tile > span { color: var(--nn-green) !important; }
body.site-main .islam-tile h3 { color: var(--nn-ink) !important; }
body.site-main .islam-tile p { color: var(--nn-muted) !important; }
.profile-page, .profile-view { max-width: 1080px !important; }
.profile-cover { padding: 25px !important; border-radius: 28px !important; background: linear-gradient(135deg, rgb(229, 241, 232), rgb(255, 247, 232)) !important; color: var(--nn-ink) !important; }
.profile-cover h1, .profile-cover p { color: var(--nn-ink) !important; }
.profile-large-photo { border-radius: 20px !important; }
.profile-status { color: var(--nn-green) !important; font-weight: 760; }
.profile-facts .fact { border-color: var(--nn-line) !important; }
.filter-card, .search-filters, .filters, .filter-bar { padding: 20px !important; border-radius: 22px !important; background: var(--nn-paper) !important; }
.filter-grid { gap: 13px !important; }
.guest-list { gap: 11px !important; }
.guest-row { padding: 15px 17px !important; }
.guest-avatar, .thread-avatar { background: var(--nn-green-soft) !important; color: var(--nn-deep) !important; }
.messages-layout { gap: 16px !important; }
.thread-list, .chat-panel { padding: 16px !important; background: var(--nn-paper) !important; }
.thread { border-bottom-color: rgb(237, 242, 238) !important; border-radius: 14px !important; }
.thread:hover, .thread.selected { background: rgb(237, 247, 239) !important; }
.thread-badge, .nav-badge, .thread-count { background: var(--nn-gold) !important; color: rgb(255, 255, 255) !important; }
.chat-panel { background: linear-gradient(rgb(255, 254, 250), rgb(242, 248, 243)) !important; }
.bubble { border-radius: 17px !important; background: rgb(234, 243, 235) !important; color: var(--nn-ink) !important; }
.bubble.mine { background: var(--nn-deep) !important; color: rgb(255, 255, 255) !important; }
.chat-form, .message-form { border-color: var(--nn-line) !important; background: var(--nn-paper) !important; border-radius: 17px !important; }
.had-hero, .islamic-hero { border-radius: 28px !important; background: linear-gradient(135deg, rgb(229, 241, 232), rgb(255, 246, 223)) !important; color: var(--nn-ink) !important; box-shadow: var(--nn-shadow) !important; }
.had-hero h1, .had-hero p, .islamic-hero h1, .islamic-hero p { color: var(--nn-ink) !important; }
.had-card { padding: 22px !important; }
.had-status, .had-source, .had-kicker { color: var(--nn-deep) !important; background: var(--nn-green-soft) !important; border-color: rgb(209, 228, 214) !important; }
.payment-method, .tariff-option span, .subscription-card { border-color: var(--nn-line) !important; border-radius: 18px !important; background: var(--nn-paper) !important; }
.pay-price, .subscription-card .price { color: var(--nn-deep) !important; }
.support-card, .pay-card { padding: 22px !important; }
body.pm, body.qp, body.qp2 { background: var(--nn-bg) !important; }
body.pm .site-header, body.qp .site-header, body.qp2 .site-header { background: rgba(255, 254, 250, 0.94) !important; border-color: var(--nn-line) !important; }
body.pm .pmhero, body.qp .qhero, body.qp2 .hero, body.page .hero, body.seo .hero { border-radius: 28px !important; background: linear-gradient(135deg, rgb(229, 241, 232), rgb(255, 246, 223)) !important; color: var(--nn-ink) !important; box-shadow: var(--nn-shadow) !important; }
body.pm .pmhero h1, body.pm .pmhero p, body.qp .qhero h1, body.qp .qhero p, body.qp2 .hero h1, body.qp2 .hero p, body.page .hero h1, body.page .hero p, body.seo .hero h1, body.seo .hero p { color: var(--nn-ink) !important; }
body.pm .pmcard, body.qp .qcard, body.qp2 .cardx, body.page .card, body.seo .card { background: var(--nn-paper) !important; border-color: var(--nn-line) !important; color: var(--nn-ink) !important; }
.prayer-banner { border-radius: 28px !important; }
.prayer-info, .prayer-card { background: var(--nn-paper) !important; }
body.ar-page .ar-shell { background: radial-gradient(circle at 50% 35%, rgb(215, 233, 220), rgb(115, 155, 131) 44%, rgb(23, 63, 49) 100%) !important; }
body.ar-page .direction-card, body.ar-page .bottom-panel { border: 1px solid rgba(255, 255, 255, 0.55) !important; border-radius: 22px !important; background: rgba(255, 254, 250, 0.9) !important; color: var(--nn-ink) !important; box-shadow: var(--nn-shadow) !important; }
body.ar-page .start-button { background: var(--nn-deep) !important; }
.auth { min-height: 100vh; padding: 34px 18px !important; background: radial-gradient(circle at 50% 0, #e2f1e7, var(--nn-bg) 58%) !important; }
.auth .card, .reg-card { border-radius: 28px !important; background: rgba(255, 254, 250, 0.96) !important; box-shadow: rgba(19, 61, 45, 0.13) 0px 24px 70px !important; }
.reg-step { border-radius: 999px !important; border-color: var(--nn-line) !important; background: rgb(242, 246, 241) !important; }
.reg-step.active { background: var(--nn-deep) !important; color: rgb(255, 255, 255) !important; }
.reg-help, .photo-box { border-radius: 17px !important; border-color: var(--nn-line) !important; background: rgb(241, 247, 241) !important; }
.modal, .popup, .dialog, [role="dialog"] { border: 1px solid var(--nn-line) !important; border-radius: 24px !important; background: var(--nn-paper) !important; box-shadow: rgba(19, 61, 45, 0.2) 0px 24px 70px !important; }
.admin-shell { background: var(--nn-bg) !important; color: var(--nn-ink) !important; }
.admin-sidebar { background: rgb(255, 254, 250) !important; border-right: 1px solid var(--nn-line) !important; box-shadow: rgba(19, 61, 45, 0.05) 8px 0px 28px !important; }
.admin-logo, .admin-topbar { color: var(--nn-ink) !important; background: rgb(255, 254, 250) !important; border-color: var(--nn-line) !important; }
.admin-logo .brand-mark { background: linear-gradient(145deg, var(--nn-green), var(--nn-deep)) !important; }
.admin-nav-group { color: var(--nn-muted) !important; }
.admin-nav a { color: var(--nn-ink) !important; border-radius: 12px !important; }
.admin-nav a:hover, .admin-nav a.active { background: var(--nn-green-soft) !important; color: var(--nn-deep) !important; }
.admin-content .panel, .admin-content .kpi, .admin-content .quick, .admin-card { border-color: var(--nn-line) !important; border-radius: 20px !important; background: var(--nn-paper) !important; box-shadow: var(--nn-shadow) !important; }
table { border-color: var(--nn-line) !important; }
th { background: var(--nn-green-soft) !important; color: var(--nn-deep) !important; }
td, th { border-color: var(--nn-line) !important; }
@media (max-width: 760px), (orientation: landscape) and (pointer: coarse) and (max-height: 900px) {
  .site-header { height: 64px !important; padding: 0px 14px !important; }
  .brand { font-size: 17px; }
  .brand-mark { width: 38px !important; height: 38px !important; border-radius: 13px !important; }
  .top-actions { max-width: 54%; gap: 5px !important; }
  .top-actions .btn { min-height: 38px; padding: 8px 10px !important; font-size: 12px !important; }
  .container, .nx-wrap, .wrap, .pmwrap, .qwrap, .dash, .support-wrap { padding: 22px 14px 96px !important; }
  .page-heading h1, .nx-head h1, .page-title { font-size: 30px !important; }
  body.site-main .home-hero > .hero-copy { min-height: 0px !important; padding: 42px 16px 34px !important; }
  body.site-main .home-hero > .hero-copy::after { right: -18%; width: 86%; height: 52%; opacity: 0.42; }
  body.site-main .hero-copy h1 { max-width: 350px !important; font-size: clamp(42px, 11vw, 58px) !important; }
  body.site-main .hero-copy > p { font-size: 16px !important; }
  body.site-main .hero-search { min-height: 56px !important; font-size: 15px !important; }
  body.site-main .hero-search-go { width: 42px !important; height: 42px !important; }
  body.site-main .home-hero > .section-title, body.site-main .home-hero > .profile-grid, body.site-main .nx-quote, body.site-main .islam-grid { width: calc(100% - 28px) !important; }
  body.site-main .home-hero > .section-title h2 { font-size: 22px !important; }
  body.site-main .home-hero > .profile-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; gap: 10px !important; }
  body.site-main .profile-grid .profile-body { padding: 10px !important; }
  body.site-main .profile-grid .profile h3 { font-size: 14px !important; }
  body.site-main .profile-grid .profile p { font-size: 11px !important; }
  body.site-main .islam-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; gap: 8px !important; padding: 8px !important; }
  body.site-main .islam-tile { min-height: 108px !important; padding: 12px !important; }
  .profile-cover { grid-template-columns: 88px 1fr !important; padding: 14px !important; border-radius: 20px !important; }
  .profile-cover .hero-actions, .profile-actions { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0px, 1fr)); display: grid !important; }
  .filter-grid, .form-grid, .nx-grid, .feature-grid, .prayer-grid, .dhikr-grid { grid-template-columns: 1fr !important; }
  .messages-layout { grid-template-columns: 1fr !important; }
  .thread-list { max-height: 42vh; }
  .bottom-nav, .mobile-bottom-nav, body.site-main .bottom-nav { position: fixed !important; left: 12px !important; right: 12px !important; bottom: 10px !important; z-index: 200 !important; display: flex !important; height: 72px !important; min-height: 72px !important; padding: 6px !important; gap: 3px !important; align-items: stretch !important; justify-content: space-around !important; border: 1px solid rgb(225, 232, 224) !important; border-radius: 24px !important; background: rgba(255, 254, 250, 0.94) !important; color: var(--nn-muted) !important; box-shadow: rgba(19, 61, 45, 0.16) 0px 16px 36px !important; backdrop-filter: blur(18px) !important; }
  .bottom-nav a, .mobile-bottom-nav a { position: relative; flex: 1 1 0px; min-width: 0px; gap: 4px; font-weight: 650; display: grid !important; place-items: center !important; align-content: center !important; padding: 5px 2px !important; border-radius: 18px !important; color: var(--nn-muted) !important; font-size: 10px !important; }
  .bottom-nav a span, .mobile-bottom-nav a span { display: block !important; color: currentcolor !important; font-size: 22px !important; line-height: 1 !important; }
  .bottom-nav a.active, .bottom-nav a[aria-current="page"], .mobile-bottom-nav a.active { font-weight: 800; background: rgb(245, 240, 228) !important; color: var(--nn-deep) !important; }
  .nav-badge, .site-live-badge { min-width: 17px; height: 17px; top: 4px !important; right: 18% !important; padding: 2px 5px !important; border-radius: 999px !important; background: var(--nn-green) !important; color: rgb(255, 255, 255) !important; font-size: 10px !important; }
  body.site-main { padding-bottom: 0px !important; }
  .site-footer, .footer { padding-bottom: 102px !important; }
}
@media (max-width: 390px) {
  .top-actions .btn { padding-inline: 8px !important; }
  body.site-main .home-hero > .profile-grid { gap: 7px !important; }
  .bottom-nav a, .mobile-bottom-nav a { font-size: 9px !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
body.site-main .site-header { display: grid !important; grid-template-columns: minmax(0px, 1fr) auto minmax(0px, 1fr) !important; align-items: center !important; min-height: 76px !important; height: 76px !important; }
body.site-main .site-header .brand { grid-area: 1 / 2 !important; justify-self: center !important; }
body.site-main .site-header .top-actions { grid-area: 1 / 3 !important; justify-self: end !important; }
.header-icon { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--nn-line); border-radius: 50%; background: var(--nn-paper); color: var(--nn-deep); font-size: 23px; box-shadow: rgba(19, 61, 45, 0.08) 0px 8px 20px; }
.header-icon:hover { background: var(--nn-green-soft); color: var(--nn-green); }
.site-header .brand-mark { position: relative; font-size: 0px !important; }
.site-header .brand-mark::before { content: "☾"; font-size: 25px; }
.site-header .brand-mark::after { content: "★"; position: absolute; top: 8px; right: 8px; color: rgb(244, 207, 112); font-size: 10px; }
.header-badge { position: absolute; top: -2px; right: -2px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0px 5px; border-radius: 99px; background: var(--nn-green); color: rgb(255, 255, 255); font-size: 10px; }
body.site-main .home-hero { min-height: 0px !important; padding: 0px 0px 50px !important; background: linear-gradient(115deg, rgb(251, 252, 248) 0%, rgb(255, 254, 250) 42%, rgb(233, 242, 235) 100%) !important; color: var(--nn-ink) !important; }
body.site-main .home-hero > .hero-copy { width: min(1180px, 100%) !important; min-height: 520px !important; padding: 72px 24px 34px !important; }
body.site-main .home-hero > .hero-copy::after { right: 0px !important; bottom: 0px !important; width: 57% !important; height: 100% !important; opacity: 0.62 !important; background-position: right center !important; mask-image: linear-gradient(90deg, transparent 0px, rgb(0, 0, 0) 17%, rgb(0, 0, 0) 100%) !important; }
body.site-main .hero-copy h1 { max-width: 620px !important; margin: 0px 0px 18px !important; font-size: clamp(54px, 6.2vw, 82px) !important; line-height: 0.98 !important; color: var(--nn-ink) !important; }
body.site-main .hero-copy h1 span, body.site-main .hero-copy h1 em { display: block; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-style: normal; }
body.site-main .hero-copy h1 em { color: var(--nn-green) !important; }
body.site-main .hero-copy > p { max-width: 475px !important; margin-bottom: 22px !important; color: rgb(94, 111, 102) !important; font-size: 19px !important; line-height: 1.55 !important; }
body.site-main .hero-search { width: min(620px, 100%) !important; min-height: 68px !important; border-radius: 20px !important; background: rgba(255, 254, 250, 0.96) !important; box-shadow: rgba(19, 61, 45, 0.12) 0px 14px 32px !important; }
body.site-main .hero-search-go { border-radius: 17px !important; }
.hero-quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 16px; width: min(780px, 100%); margin-top: 16px; }
.hero-quick-grid .quick-card { display: grid !important; grid-template-columns: 45px minmax(0px, 1fr) !important; grid-template-rows: auto auto !important; align-items: center !important; width: 100% !important; min-height: 108px !important; margin: 0px !important; padding: 20px 22px !important; border: 1px solid var(--nn-line) !important; border-radius: 20px !important; background: rgba(255, 254, 250, 0.95) !important; color: var(--nn-ink) !important; box-shadow: rgba(19, 61, 45, 0.08) 0px 12px 28px !important; }
.hero-quick-grid .quick-card > span { grid-row: 1 / span 2 !important; width: 45px !important; height: 45px !important; margin-right: 0px !important; border-radius: 50% !important; background: var(--nn-green-soft) !important; color: var(--nn-green) !important; font-size: 25px !important; }
.hero-quick-grid .quick-card b { color: var(--nn-ink) !important; font-size: 18px !important; }
.hero-quick-grid .quick-card small { color: var(--nn-muted) !important; font-size: 13px !important; }
.hero-quick-grid .recommendations-quick-card > span { color: var(--nn-deep) !important; }
body.site-main .home-hero > .section-title { width: min(1180px, 100% - 48px) !important; margin: 5px auto 16px !important; }
body.site-main .home-hero > .section-title h2 { font-size: 27px !important; }
body.site-main .home-hero > .profile-grid { width: min(1180px, 100% - 48px) !important; margin: 0px auto 38px !important; padding: 0px !important; grid-template-columns: repeat(4, minmax(0px, 1fr)) !important; gap: 14px !important; background: transparent !important; border: 0px !important; }
body.site-main .profile-grid .profile { overflow: hidden !important; border-radius: 20px !important; background: var(--nn-paper) !important; }
body.site-main .profile-grid .profile-media { position: relative; aspect-ratio: 4 / 4.8 !important; background: linear-gradient(145deg, rgb(223, 236, 225), rgb(184, 212, 192)) !important; }
body.site-main .profile-grid .profile-media::after { content: "♡"; position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 254, 250, 0.94); color: var(--nn-deep); font-size: 25px; line-height: 1; }
body.site-main .profile-grid .profile .avatar { color: var(--nn-deep) !important; font-size: 58px !important; }
body.site-main .profile-grid .profile-body { padding: 16px 15px 17px !important; }
body.site-main .profile-grid .profile h3 { font-size: 19px !important; }
body.site-main .profile-grid .profile-goal { padding-top: 12px; border-top: 1px solid rgb(237, 241, 235); margin-top: 12px !important; }
.benefits-section { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); width: min(1180px, 100% - 48px); margin: 0px auto 24px; padding: 28px 18px; border: 1px solid var(--nn-line); border-radius: 26px; background: rgba(255, 254, 250, 0.95); box-shadow: var(--nn-shadow); }
.benefit-card { min-width: 0px; padding: 4px 25px 8px; text-align: center; }
.benefit-card + .benefit-card { border-left: 1px solid rgb(237, 241, 235); }
.benefit-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0px auto 14px; border-radius: 18px; background: var(--nn-green-soft); color: var(--nn-deep); font-size: 32px; font-weight: 800; }
.benefit-card h3 { margin: 0px 0px 10px; font-size: 19px; line-height: 1.25; }
.benefit-card p { margin: 0px; color: var(--nn-muted); font-size: 14px; line-height: 1.55; }
.home-cta { display: grid; grid-template-columns: 150px minmax(0px, 1fr) auto; align-items: center; gap: 20px; width: min(1180px, 100% - 48px); min-height: 150px; margin: 0px auto 32px; padding: 15px 25px 15px 0px; overflow: hidden; border: 1px solid var(--nn-line); border-radius: 26px; background: linear-gradient(105deg, rgb(229, 238, 226), rgb(255, 254, 250) 58%); box-shadow: rgba(19, 61, 45, 0.07) 0px 10px 28px; }
.home-cta-art { align-self: stretch; display: grid; place-items: center; background: radial-gradient(circle, rgb(210, 229, 208) 0px, rgb(177, 201, 178) 55%, rgb(129, 158, 135) 100%); color: rgb(241, 210, 138); font-size: 72px; }
.home-cta-copy h2 { margin: 0px 0px 8px; font-size: 25px; }
.home-cta-copy p { max-width: 440px; margin: 0px; color: var(--nn-muted); line-height: 1.5; }
.home-cta > .btn { white-space: nowrap; }
@media (max-width: 760px), (orientation: landscape) and (pointer: coarse) and (max-height: 900px) {
  body.site-main .site-header { grid-template-columns: minmax(0px, 1fr) 0px auto !important; height: 64px !important; min-height: 64px !important; padding: 0px 14px !important; }
  body.site-main .site-header .brand { grid-column: 1 !important; justify-self: start !important; }
  body.site-main .site-header .top-actions { grid-column: 3 !important; max-width: none !important; min-width: 0px !important; }
  body.site-main .top-actions .btn.light:first-child { display: inline-flex !important; }
  body.site-main .top-actions .btn { padding: 8px 9px !important; font-size: 11px !important; }
  body.site-main .top-actions .header-icon { width: 37px; height: 37px; font-size: 19px; }
  body.site-main .home-hero > .hero-copy { min-height: 0px !important; padding: 42px 16px 30px !important; }
  body.site-main .home-hero > .hero-copy::after { right: -20% !important; width: 90% !important; height: 52% !important; opacity: 0.34 !important; }
  body.site-main .hero-copy h1 { max-width: 355px !important; font-size: clamp(43px, 11vw, 58px) !important; }
  body.site-main .hero-copy > p { max-width: 340px !important; font-size: 16px !important; }
  body.site-main .hero-search { min-height: 58px !important; }
  .hero-quick-grid { gap: 9px; width: 100%; }
  .hero-quick-grid .quick-card { min-height: 92px !important; padding: 13px 11px !important; border-radius: 17px !important; }
  .hero-quick-grid .quick-card > span { width: 37px !important; height: 37px !important; font-size: 21px !important; }
  .hero-quick-grid .quick-card b { font-size: 14px !important; }
  .hero-quick-grid .quick-card small { display: block !important; font-size: 10px !important; }
  body.site-main .home-hero > .section-title, body.site-main .home-hero > .profile-grid, .benefits-section, .home-cta { width: calc(100% - 28px) !important; }
  body.site-main .home-hero > .section-title h2 { font-size: 23px !important; }
  body.site-main .home-hero > .profile-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; gap: 9px !important; }
  body.site-main .profile-grid .profile-media::after { top: 8px; right: 8px; width: 32px; height: 32px; font-size: 21px; }
  body.site-main .profile-grid .profile-body { padding: 11px 10px 13px !important; }
  body.site-main .profile-grid .profile h3 { font-size: 14px !important; }
  body.site-main .profile-grid .profile p { font-size: 11px !important; }
  .benefits-section { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 20px 0px; padding: 20px 8px; border-radius: 21px; }
  .benefit-card { padding: 2px 10px 5px; }
  .benefit-card:nth-child(3) { border-left: 0px; }
  .benefit-icon { width: 46px; height: 46px; margin-bottom: 9px; border-radius: 14px; font-size: 25px; }
  .benefit-card h3 { font-size: 15px; }
  .benefit-card p { font-size: 11px; }
  .home-cta { grid-template-columns: 72px minmax(0px, 1fr); gap: 12px; min-height: 126px; padding: 0px 13px 0px 0px; border-radius: 21px; }
  .home-cta-art { font-size: 40px; }
  .home-cta-copy h2 { font-size: 18px; }
  .home-cta-copy p { font-size: 12px; }
  .home-cta > .btn { grid-column: 1 / -1; width: 100%; margin: 0px 12px 12px 0px; }
}
body.site-main .hero-copy .hero-quick-grid .quick-card { display: grid !important; grid-template-columns: 45px minmax(0px, 1fr) !important; grid-template-rows: auto auto !important; width: 100% !important; min-height: 108px !important; padding: 20px 22px !important; }
body.site-main .hero-copy .hero-quick-grid .quick-card > span { grid-row: 1 / span 2 !important; }
@media (max-width: 760px), (orientation: landscape) and (pointer: coarse) and (max-height: 900px) {
  body.site-main .hero-copy .hero-quick-grid .quick-card { min-height: 92px !important; padding: 13px 11px !important; }
  body.site-main .hero-copy .hero-quick-grid .quick-card > span { width: 37px !important; height: 37px !important; font-size: 21px !important; }
}
body.page .site-header, body.seo .site-header { display: grid !important; grid-template-columns: minmax(0px, 1fr) auto minmax(0px, 1fr) !important; align-items: center !important; }
body.page .site-header .brand, body.seo .site-header .brand { grid-column: 2 !important; justify-self: center !important; }
body.page .site-header .top-actions, body.seo .site-header .top-actions { grid-column: 3 !important; justify-self: end !important; }
.install-cta { position: relative !important; z-index: 2 !important; display: flex !important; align-items: center !important; gap: 16px !important; margin: 28px auto 34px !important; padding: 16px 18px !important; border: 1px solid var(--nn-line) !important; border-radius: 20px !important; background: rgba(255, 254, 250, 0.96) !important; box-shadow: var(--nn-shadow) !important; }
.install-cta > div { display: grid; gap: 3px; min-width: 0px; }
.install-cta > div b { color: var(--nn-ink) !important; }
.install-cta > div small, .install-cta > small { color: var(--nn-muted) !important; }
.install-cta > button { margin-left: auto; flex: 0 0 auto; }
@media (max-width: 760px), (orientation: landscape) and (pointer: coarse) and (max-height: 900px) {
  body.page .site-header, body.seo .site-header { grid-template-columns: minmax(0px, 1fr) auto minmax(0px, 1fr) !important; }
  .install-cta { flex-wrap: wrap; align-items: stretch !important; margin: 22px 14px 96px !important; }
  .install-cta > button { margin-left: 0px; width: 100%; }
}
body.page .hero, body.seo .hero { background: linear-gradient(120deg, rgb(6, 61, 46) 0%, rgb(8, 114, 84) 100%) !important; color: rgb(255, 255, 255) !important; box-shadow: rgba(19, 61, 45, 0.18) 0px 22px 44px !important; }
body.page .hero h1, body.page .hero p, body.seo .hero h1, body.seo .hero p { color: rgb(255, 255, 255) !important; }
body.page .hero .pill, body.seo .hero .pill { background: rgba(255, 254, 250, 0.92) !important; color: var(--nn-deep) !important; }
body.site-main .home-hero > .hero-copy::after { right: 0px !important; bottom: 0px !important; width: 57% !important; height: 100% !important; opacity: 0.94 !important; background: linear-gradient(90deg, rgb(248, 251, 247) 0%, rgba(248, 251, 247, 0.72) 16%, rgba(248, 251, 247, 0.12) 52%, rgba(248, 251, 247, 0) 78%), url("https://images.unsplash.com/photo-1564769625905-50e93615e769?auto=format&fit=crop&w=1400&q=82") center center / cover no-repeat !important; mask-image: linear-gradient(90deg, transparent 0px, rgb(0, 0, 0) 9%, rgb(0, 0, 0) 100%) !important; }
@media (max-width: 760px), (orientation: landscape) and (pointer: coarse) and (max-height: 900px) {
  body.site-main .home-hero > .hero-copy::after { right: -18% !important; width: 92% !important; height: 60% !important; opacity: 0.62 !important; background: linear-gradient(rgb(248, 251, 247) 0%, rgba(248, 251, 247, 0.62) 38%, rgba(248, 251, 247, 0.08) 78%, rgba(248, 251, 247, 0) 100%), url("https://images.unsplash.com/photo-1564769625905-50e93615e769?auto=format&fit=crop&w=1200&q=82") center center / cover no-repeat !important; mask-image: linear-gradient(transparent 0px, rgb(0, 0, 0) 20%, rgb(0, 0, 0) 100%) !important; }
}
body.site-main .home-hero > .hero-copy::after { background: linear-gradient(90deg, rgb(248, 251, 247) 0%, rgba(248, 251, 247, 0.72) 16%, rgba(248, 251, 247, 0.12) 52%, rgba(248, 251, 247, 0) 78%), url("https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Exterior_of_Sultan_Ahmed_I_Mosque_in_Istanbul%2C_Turkey_002.jpg/1920px-Exterior_of_Sultan_Ahmed_I_Mosque_in_Istanbul%2C_Turkey_002.jpg?utm_source=commons.wikimedia.org&utm_campaign=imageinfo&utm_content=thumbnail") center center / cover no-repeat !important; mask-image: linear-gradient(90deg, transparent 0px, rgb(0, 0, 0) 9%, rgb(0, 0, 0) 100%) !important; }
@media (max-width: 760px), (orientation: landscape) and (pointer: coarse) and (max-height: 900px) {
  body.site-main .home-hero > .hero-copy::after { right: -18% !important; width: 92% !important; height: 60% !important; opacity: 0.62 !important; background: linear-gradient(rgb(248, 251, 247) 0%, rgba(248, 251, 247, 0.62) 38%, rgba(248, 251, 247, 0.08) 78%, rgba(248, 251, 247, 0) 100%), url("https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Exterior_of_Sultan_Ahmed_I_Mosque_in_Istanbul%2C_Turkey_002.jpg/1920px-Exterior_of_Sultan_Ahmed_I_Mosque_in_Istanbul%2C_Turkey_002.jpg?utm_source=commons.wikimedia.org&utm_campaign=imageinfo&utm_content=thumbnail") center center / cover no-repeat !important; mask-image: linear-gradient(transparent 0px, rgb(0, 0, 0) 20%, rgb(0, 0, 0) 100%) !important; }
}
body.site-main .home-hero > .hero-copy::after { background: linear-gradient(90deg, rgb(248, 251, 247) 0%, rgba(248, 251, 247, 0.72) 16%, rgba(248, 251, 247, 0.12) 52%, rgba(248, 251, 247, 0) 78%), url("/assets/mosque-sultan-ahmed.jpg?v=1") center center / cover no-repeat !important; }
@media (max-width: 760px), (orientation: landscape) and (pointer: coarse) and (max-height: 900px) {
  body.site-main .home-hero > .hero-copy::after { background: linear-gradient(rgb(248, 251, 247) 0%, rgba(248, 251, 247, 0.62) 38%, rgba(248, 251, 247, 0.08) 78%, rgba(248, 251, 247, 0) 100%), url("/assets/mosque-sultan-ahmed.jpg?v=1") center center / cover no-repeat !important; }
}
@media (max-width: 760px), (orientation: landscape) and (pointer: coarse) and (max-height: 900px) {
  html { background: rgb(2, 9, 12) !important; }
  body.site-main { overflow-x: hidden !important; background: rgb(2, 9, 12) !important; color: rgb(247, 250, 245) !important; }
  body.site-main .site-header { height: 64px !important; min-height: 64px !important; padding: 0px 14px !important; border-bottom: 1px solid rgba(146, 177, 151, 0.16) !important; background: rgba(2, 9, 12, 0.94) !important; }
  body.site-main .site-header .brand { color: rgb(244, 247, 243) !important; font-size: 18px !important; gap: 10px !important; }
  body.site-main .site-header .brand-mark { width: 38px !important; height: 38px !important; border: 1px solid rgba(122, 170, 128, 0.35) !important; border-radius: 14px !important; background: linear-gradient(145deg, rgb(30, 73, 50), rgb(9, 28, 22)) !important; color: rgb(244, 215, 131) !important; box-shadow: rgba(112, 166, 121, 0.18) 0px 0px 16px inset !important; }
  body.site-main .site-header .brand-mark::before { font-size: 25px !important; }
  body.site-main .site-header .brand-mark::after { color: rgb(244, 215, 131) !important; }
  body.site-main .site-header .top-actions { gap: 8px !important; }
  body.site-main .site-header .top-actions .btn { min-height: 42px !important; padding: 0px 18px !important; border-radius: 16px !important; font-size: 15px !important; font-weight: 650 !important; }
  body.site-main .site-header .top-actions .btn.light { border: 1px solid rgba(170, 188, 180, 0.28) !important; background: transparent !important; color: rgb(243, 246, 242) !important; }
  body.site-main .site-header .top-actions .btn:not(.light) { border: 1px solid rgba(142, 188, 144, 0.5) !important; background: linear-gradient(145deg, rgb(91, 140, 101), rgb(49, 87, 61)) !important; color: rgb(247, 250, 245) !important; box-shadow: rgba(175, 216, 165, 0.16) 0px 0px 20px inset !important; }
  body.site-main .site-header .header-icon { width: 38px !important; height: 38px !important; border-color: rgba(170, 188, 180, 0.28) !important; background: transparent !important; color: rgb(223, 233, 224) !important; }
  body.site-main .home-hero { padding: 0px 0px 20px !important; border-radius: 0px 0px 26px 26px !important; background: rgb(2, 9, 12) !important; }
  body.site-main .home-hero > .hero-copy { min-height: 630px !important; padding: 54px 16px 20px !important; overflow: hidden !important; isolation: isolate !important; background: rgb(6, 17, 22) !important; border-top: 1px solid rgba(119, 155, 132, 0.14) !important; }
  body.site-main .home-hero > .hero-copy::after { right: 0px !important; top: 0px !important; bottom: auto !important; width: 100% !important; height: 66% !important; opacity: 1 !important; background: linear-gradient(rgba(3, 11, 14, 0.08) 0%, rgba(3, 11, 14, 0.2) 34%, rgba(3, 11, 14, 0.74) 84%, rgb(6, 17, 22) 100%), linear-gradient(90deg, rgb(6, 17, 22) 0%, rgba(6, 17, 22, 0.86) 24%, rgba(6, 17, 22, 0.24) 68%, rgba(6, 17, 22, 0.1) 100%), url("/assets/mosque-sultan-ahmed.jpg?v=1") right center / cover no-repeat !important; mask-image: none !important; }
  body.site-main .hero-copy > .hero-kicker { display: none !important; }
  body.site-main .hero-copy h1 { max-width: 350px !important; margin: 26px 0px 20px !important; color: rgb(247, 250, 245) !important; font-size: clamp(42px, 11vw, 58px) !important; line-height: 0.97 !important; letter-spacing: -0.06em !important; font-weight: 800 !important; }
  body.site-main .hero-copy h1 em { color: rgb(125, 178, 126) !important; }
  body.site-main .hero-copy > p { max-width: 340px !important; margin: 0px 0px 24px !important; color: rgba(234, 240, 234, 0.72) !important; font-size: 17px !important; line-height: 1.48 !important; }
  body.site-main .hero-search { width: 100% !important; min-height: 58px !important; padding: 6px 8px 6px 16px !important; border: 1px solid rgba(139, 171, 153, 0.26) !important; border-radius: 19px !important; background: rgba(14, 22, 25, 0.87) !important; color: rgba(236, 241, 237, 0.42) !important; box-shadow: rgba(0, 0, 0, 0.28) 0px 14px 28px !important; }
  body.site-main .hero-search-icon { color: rgb(241, 245, 240) !important; font-size: 30px !important; }
  body.site-main .hero-search-go { width: 45px !important; height: 45px !important; border: 1px solid rgba(152, 205, 153, 0.45) !important; border-radius: 16px !important; background: linear-gradient(145deg, rgb(87, 127, 93), rgb(39, 76, 55)) !important; color: rgb(244, 248, 243) !important; }
  body.site-main .hero-quick-grid { grid-template-columns: 1fr !important; gap: 10px !important; margin-top: 34px !important; }
  body.site-main .hero-quick-grid .recommendations-quick-card { display: none !important; }
  body.site-main .hero-copy .hero-quick-grid .islam-quick-card { display: grid !important; grid-template-columns: 62px minmax(0px, 1fr) auto !important; grid-template-rows: auto auto !important; align-items: center !important; width: 100% !important; min-height: 116px !important; height: auto !important; padding: 16px 18px !important; border: 1px solid rgba(113, 165, 121, 0.66) !important; border-radius: 22px !important; background: linear-gradient(115deg, rgba(19, 49, 38, 0.82), rgba(10, 29, 25, 0.76)) !important; color: rgb(244, 248, 244) !important; box-shadow: rgba(108, 153, 117, 0.08) 0px 0px 22px inset, rgba(0, 0, 0, 0.2) 0px 14px 28px !important; }
  body.site-main .hero-copy .hero-quick-grid .islam-quick-card > span { display: grid !important; place-items: center !important; width: 58px !important; height: 58px !important; border: 1px solid rgba(119, 169, 126, 0.44) !important; border-radius: 50% !important; background: rgba(27, 69, 50, 0.38) !important; color: rgb(244, 215, 131) !important; font-size: 34px !important; }
  body.site-main .hero-copy .hero-quick-grid .islam-quick-card > b { color: rgb(244, 248, 244) !important; font-size: 20px !important; }
  body.site-main .hero-copy .hero-quick-grid .islam-quick-card > small { color: rgba(232, 240, 233, 0.62) !important; font-size: 13px !important; }
  body.site-main .hero-copy .hero-quick-grid .islam-quick-card::after { content: "›"; grid-area: 1 / 3 / span 2; color: rgba(241, 247, 241, 0.82); font-size: 38px; line-height: 1; }
  body.site-main .home-hero > .section-title, body.site-main .home-hero > .profile-grid, body.site-main .benefits-section, body.site-main .home-cta { display: none !important; }
  body.site-main .pwa-smart-banner { display: none !important; }
}
@media (max-width: 760px), (orientation: landscape) and (pointer: coarse) and (max-height: 900px) {
  body.site-main .site-header { display: flex !important; align-items: center !important; justify-content: space-between !important; }
  body.site-main .site-header .brand { grid-area: auto !important; justify-self: auto !important; }
  body.site-main .site-header .top-actions { grid-area: auto !important; justify-self: auto !important; margin-left: auto !important; }
}
@media (max-width: 760px), (orientation: landscape) and (pointer: coarse) and (max-height: 900px) {
  body.site-main .home-hero > .hero-copy::after { background: linear-gradient(rgba(3, 11, 14, 0.08), rgba(3, 11, 14, 0.2) 34%, rgba(3, 11, 14, 0.74) 84%, rgb(6, 17, 22) 100%), linear-gradient(90deg, rgb(6, 17, 22) 0%, rgba(6, 17, 22, 0.86) 24%, rgba(6, 17, 22, 0.24) 68%, rgba(6, 17, 22, 0.1) 100%), url("/assets/nikah-reference-mosque.jpg?v=1") right center / cover no-repeat !important; }
  body.site-main .hero-quick-grid .recommendations-quick-card { display: none !important; }
  body.site-main .site-header { display: flex !important; align-items: center !important; justify-content: space-between !important; }
  body.site-main .site-header .brand { grid-area: auto !important; justify-self: auto !important; white-space: nowrap !important; flex-shrink: 0 !important; }
  body.site-main .site-header .top-actions { grid-area: auto !important; justify-self: auto !important; margin-left: auto !important; gap: 6px !important; }
  body.site-main .site-header .top-actions .btn { padding: 0px 12px !important; font-size: 14px !important; white-space: nowrap !important; }
}
@media (max-width: 760px), (orientation: landscape) and (pointer: coarse) and (max-height: 900px) {
  body.site-main .site-header .top-actions .btn { padding: 0px 8px !important; }
}
@media (max-width: 760px), (orientation: landscape) and (pointer: coarse) and (max-height: 900px) {
  body.site-main .hero-quick-grid { width: 100% !important; }
  body.site-main .hero-copy .hero-quick-grid .islam-quick-card { width: 100% !important; min-height: 58px !important; height: 58px !important; padding: 6px 8px 6px 16px !important; border-radius: 19px !important; }
  body.site-main .hero-copy .hero-quick-grid .islam-quick-card > span { width: 45px !important; height: 45px !important; font-size: 27px !important; }
  body.site-main .hero-copy .hero-quick-grid .islam-quick-card > small { display: none !important; }
  body.site-main .home-hero > .section-title { display: flex !important; width: 100% !important; margin: 26px 0px 14px !important; padding: 0px 16px !important; color: rgb(244, 248, 244) !important; }
  body.site-main .home-hero > .section-title h2 { color: rgb(244, 248, 244) !important; font-size: 23px !important; }
  body.site-main .home-hero > .section-title p, body.site-main .home-hero > .section-title a { color: rgba(232, 240, 233, 0.62) !important; }
  body.site-main .home-hero > .profile-grid { display: grid !important; width: 100% !important; margin: 0px !important; padding: 0px 16px 28px !important; grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; gap: 10px !important; background: transparent !important; border: 0px !important; }
  body.site-main .home-hero > .profile-grid .profile { min-width: 0px !important; border: 1px solid rgba(119, 155, 132, 0.16) !important; background: rgba(11, 28, 25, 0.84) !important; }
  body.site-main .home-hero > .profile-grid .profile-media { aspect-ratio: 1 / 1.12 !important; }
}
@media (max-width: 760px), (orientation: landscape) and (pointer: coarse) and (max-height: 900px) {
  body.site-main .profile-page, body.site-main .profile-view { padding-bottom: 170px !important; }
  body.site-main .profile-page .edit-profile { margin-bottom: 24px !important; }
}
.assistant-grid, .assistant-panel, .assistant-plan, .assistant-editor { min-width: 0px; max-width: 100%; }
.assistant-plan { overflow: hidden; }
.assistant-plan h3, .assistant-plan p, .assistant-plan code { overflow-wrap: anywhere; }
.assistant-diff { max-width: 100%; overflow-x: auto; overflow-wrap: anywhere; word-break: break-word; }
.assistant-diff::before { content: "Технический diff изменений"; display: block; margin-bottom: 8px; color: rgb(184, 232, 196); font: 700 11px / 1.4 system-ui, sans-serif; }
@media (max-width: 700px) {
  .assistant-plan .assistant-actions { display: grid; grid-template-columns: 1fr; }
  .assistant-plan .assistant-actions form, .assistant-plan .assistant-actions button { width: 100%; max-width: 100%; }
  .assistant-plan .assistant-diff { font-size: 11px; line-height: 1.45; }
  .assistant-plan .assistant-plan-meta { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; }
}
.assistant-plan::before { content: "ВИЗУАЛЬНЫЙ PREVIEW\\A\\A📱 Макет экрана телефона · 390 px\\A\\AИзменение ещё не применено\\AТочный технический diff находится ниже"; display: block; width: min(390px, 100%); min-height: 168px; margin: 0px 0px 16px; padding: 38px 18px 18px; box-sizing: border-box; border: 10px solid rgb(12, 23, 19); border-radius: 28px; background: linear-gradient(145deg, rgb(247, 251, 247), rgb(223, 238, 226)); color: rgb(25, 57, 47); white-space: pre-wrap; overflow-wrap: anywhere; font: 600 14px / 1.5 system-ui, sans-serif; box-shadow: rgba(23, 58, 36, 0.133) 0px 10px 24px; }
@media (max-width: 700px) {
  .assistant-plan::before { width: 100%; min-height: 150px; font-size: 13px; padding-top: 32px; }
}
@media (max-width: 460px) {
  body.has-site-global-back .site-header .top-actions a[href="register.php"] { display: none !important; }
}
html, body { color-scheme: light only; text-size-adjust: 100%; forced-color-adjust: none; }
body.site-main .home-hero > .hero-copy::after { z-index: 0 !important; }
.site-main .prayer-head .prayer-locate { min-height: 50px !important; padding: 0px 22px !important; background: rgb(13, 95, 73) !important; border-color: rgb(13, 95, 73) !important; color: rgb(255, 255, 255) !important; box-shadow: rgba(13, 95, 73, 0.22) 0px 12px 26px !important; font-size: 15px !important; font-weight: 800 !important; }
.site-main .prayer-head .prayer-locate:hover, .site-main .prayer-head .prayer-locate:focus-visible { background: rgb(8, 115, 79) !important; border-color: rgb(8, 115, 79) !important; box-shadow: rgba(13, 95, 73, 0.28) 0px 15px 30px !important; }
@media (max-width: 760px) {
  .site-main .prayer-head .prayer-locate { width: 100%; min-height: 50px !important; font-size: 15px !important; }
}
body.site-main.prayer-page .prayer-head .prayer-locate { min-height: 50px !important; padding: 0px 22px !important; background: rgb(13, 95, 73) !important; border-color: rgb(13, 95, 73) !important; color: rgb(255, 255, 255) !important; box-shadow: rgba(13, 95, 73, 0.22) 0px 12px 26px !important; font-size: 15px !important; font-weight: 800 !important; }
body.site-main.prayer-page .prayer-head .prayer-locate:hover, body.site-main.prayer-page .prayer-head .prayer-locate:focus-visible { background: rgb(8, 115, 79) !important; border-color: rgb(8, 115, 79) !important; box-shadow: rgba(13, 95, 73, 0.28) 0px 15px 30px !important; }
@media (max-width: 760px) {
  body.site-main.prayer-page .prayer-head .prayer-locate { width: 100%; }
}
html body.site-main.prayer-page .page-heading.prayer-head button.prayer-locate { min-height: 50px !important; height: 50px !important; padding: 0px 22px !important; background: rgb(13, 95, 73) !important; border-color: rgb(13, 95, 73) !important; color: rgb(255, 255, 255) !important; box-shadow: rgba(13, 95, 73, 0.22) 0px 12px 26px !important; font-size: 15px !important; font-weight: 800 !important; }
html body.site-main.prayer-page .page-heading.prayer-head button.prayer-locate:hover, html body.site-main.prayer-page .page-heading.prayer-head button.prayer-locate:focus-visible { background: rgb(8, 115, 79) !important; border-color: rgb(8, 115, 79) !important; box-shadow: rgba(13, 95, 73, 0.28) 0px 15px 30px !important; }
body.site-main .hero-copy .hero-quick-grid{width:min(560px,100%)!important;display:grid!important;grid-template-columns:1fr!important;gap:10px!important;margin-top:12px!important}
body.site-main .hero-copy .hero-quick-grid .recommendations-quick-card{display:none!important}
body.site-main .hero-copy .hero-quick-grid .islam-quick-card{width:100%!important;min-height:64px!important;height:64px!important;margin:0!important;padding:8px 16px!important;box-sizing:border-box!important;grid-template-columns:45px 1fr auto!important;grid-template-rows:1fr!important;align-items:center!important;border-radius:18px!important}
body.site-main .hero-copy .hero-quick-grid .islam-quick-card>span{grid-column:1!important;grid-row:1!important;width:45px!important;height:45px!important;margin:0!important}
body.site-main .hero-copy .hero-quick-grid .islam-quick-card>b{grid-column:2!important;grid-row:1!important;align-self:center!important}
body.site-main .hero-copy .hero-quick-grid .islam-quick-card>small{display:none!important}
body.site-main .hero-copy .hero-quick-grid .islam-quick-card:after{grid-column:3!important;grid-row:1!important}
@media (max-width:760px),(orientation:landscape) and (pointer:coarse) and (max-height:900px){body.site-main .hero-copy .hero-quick-grid{width:100%!important;gap:10px!important;margin-top:10px!important}body.site-main .hero-copy .hero-quick-grid .islam-quick-card{height:54px!important;min-height:54px!important;padding:4px 10px!important;border-radius:17px!important}body.site-main .hero-copy .hero-quick-grid .islam-quick-card>span{width:40px!important;height:40px!important;font-size:24px!important}}body.site-main .hero-copy .hero-quick-grid>a.recommendations-quick-card{display:none!important}body.site-main .hero-copy .hero-quick-grid>a.islam-quick-card{width:100%!important;height:64px!important;min-height:64px!important;max-height:64px!important;box-sizing:border-box!important;padding:6px 8px 6px 16px!important;grid-template-columns:45px minmax(0,1fr) auto!important;grid-template-rows:1fr!important;align-items:center!important}body.site-main .hero-copy .hero-quick-grid>a.islam-quick-card>span{grid-area:1/1!important;width:45px!important;height:45px!important}body.site-main .hero-copy .hero-quick-grid>a.islam-quick-card>b{grid-area:1/2!important;align-self:center!important}body.site-main .hero-copy .hero-quick-grid>a.islam-quick-card>small{display:none!important}@media (max-width:760px),(orientation:landscape) and (pointer:coarse) and (max-height:900px){body.site-main .hero-copy .hero-quick-grid>a.islam-quick-card{height:58px!important;min-height:58px!important;max-height:58px!important;padding:6px 8px 6px 16px!important}body.site-main .hero-copy .hero-quick-grid>a.islam-quick-card>span{width:45px!important;height:45px!important}}body.site-main .hero-copy .hero-quick-grid{width:min(620px,100%)!important}body.site-main .hero-copy .hero-quick-grid>a.islam-quick-card{height:68px!important;min-height:68px!important;max-height:68px!important}@media (max-width:760px),(orientation:landscape) and (pointer:coarse) and (max-height:900px){body.site-main .hero-copy .hero-quick-grid{width:100%!important}body.site-main .hero-copy .hero-quick-grid>a.islam-quick-card{height:58px!important;min-height:58px!important;max-height:58px!important}}
/* global profile fallback v2 */
.profile-grid .profile{border-radius:18px!important;overflow:hidden!important}
.profile-grid .profile-media{border-radius:18px 18px 0 0!important;aspect-ratio:1 / 1.12!important}
.profile-grid .profile-body{padding:10px 12px 12px!important;color:#000!important}
.profile-grid .profile h3{color:#000!important}
.profile-grid .profile .avatar.avatar-placeholder{display:block!important;overflow:hidden!important;padding:0!important;border-radius:18px 18px 0 0!important;background:transparent!important;font-size:0!important;line-height:0!important}
.profile-grid .profile .avatar.avatar-placeholder .avatar-reference-image{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important}
.guest-avatar.avatar-placeholder,.thread-avatar.avatar-placeholder,.profile-large-photo.avatar-placeholder{overflow:hidden!important;background:transparent!important;padding:0!important}
.guest-avatar.avatar-placeholder .avatar-reference-image,.thread-avatar.avatar-placeholder .avatar-reference-image,.profile-large-photo.avatar-placeholder .avatar-reference-image{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important}
.guest-info h3,.thread-main b,.chat-head h2{color:#000!important}


/* photo privacy controls */
.photo-privacy-options{grid-column:1/-1;display:grid;gap:8px;padding:14px 16px;border:1px solid #e5e5e5;border-radius:16px;background:#fafafa}
.photo-privacy-options>strong{font-size:14px;color:#111}
.photo-privacy-options>label{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;padding:10px 12px;border:1px solid #e5e5e5;border-radius:12px;background:#fff;cursor:pointer;color:#111}
.photo-privacy-options>label:has(input:checked){border-color:#111;box-shadow:0 0 0 1px #111}
.photo-privacy-options input{margin-top:3px;accent-color:#111}
.photo-privacy-options small{grid-column:2;color:#777;font-size:12px;line-height:1.35}
.private-photo-request-card .section-title{align-items:flex-start}
.private-photo-request-card .private-photo-preview{position:relative;max-width:420px;aspect-ratio:1/1.12;margin:14px auto 0;overflow:hidden;border-radius:18px;background:#ececec}
.private-photo-request-card .blurred-photo-preview img{display:block;width:100%;height:100%;object-fit:cover}
.private-photo-overlay{position:absolute;inset:auto 0 0;padding:36px 14px 14px;background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff;font-weight:700;text-align:center}
.locked-photo-preview{display:grid;place-content:center;justify-items:center;gap:7px;color:#333;background:linear-gradient(145deg,#e7e7e7,#f7f7f7)!important;text-align:center}
.locked-photo-preview .lock-icon{font-size:42px;line-height:1}
.locked-photo-preview small{max-width:240px;color:#777;line-height:1.4}
.photo-request-action{display:flex;justify-content:center;margin-top:14px}
@media (max-width:600px){.private-photo-request-card .private-photo-preview{max-width:none}}

/* Final logo override: the shared app stylesheet is loaded after the design stylesheet. */
.site-main .site-header .brand-mark {
  display: block !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 12px !important;
  background-color: transparent !important;
  background-image: url('/assets/nikahsunna-logo.png?v=20260825-logo') !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  box-shadow: none !important;
}
.site-main .site-header .brand-mark::before,
.site-main .site-header .brand-mark::after { content: none !important; display: none !important; }

.site-main .site-header .brand-mark { background-image: url('/assets/nikahsunna-logo.png?v=20260825-logo-v2') !important; }
.site-main .site-header .brand-mark::before,
.site-main .site-header .brand-mark::after { content: none !important; display: none !important; }
.fact b,.fact strong,.profile-facts b,.profile-facts strong{color:var(--ink)!important;font-weight:700}
.home-prayer-widget{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 22px;padding:20px 22px;background:linear-gradient(135deg,#073d2d,#0c6b49);color:#fff;border:0;overflow:hidden}.home-prayer-widget-copy{display:grid;gap:5px}.home-prayer-widget-copy .pill{width:max-content;background:#ffffff1c;color:#d9eee2}.home-prayer-widget-copy strong{font-size:20px}.home-prayer-widget-copy>b{font-size:34px;line-height:1}.home-prayer-widget-copy>span:not(.pill){color:#d9eee2}.home-prayer-widget-copy small{color:#b8e4c7}.home-prayer-widget-meta{display:grid;justify-items:end;gap:12px}.home-prayer-widget-meta>b{font-size:16px;color:#d9eee2}.home-prayer-widget-meta a{color:#fff;text-decoration:none;font-weight:800;white-space:nowrap}@media(max-width:560px){.home-prayer-widget{align-items:flex-start;flex-direction:column}.home-prayer-widget-meta{width:100%;display:flex;justify-content:space-between;align-items:center}}