/* Nikah Nur unified visual layer. Behaviour and page markup stay unchanged. */
: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: 0;
  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: .35 !important; background: radial-gradient(circle at 12% 0, #fff 0, transparent 34%), radial-gradient(circle at 92% 8%, #e3f0e7 0, 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: 0 !important;
  z-index: 80 !important;
  height: 76px !important;
  padding: 0 max(18px, calc((100% - 1180px) / 2)) !important;
  background: rgba(255, 254, 250, .92) !important;
  color: var(--nn-ink) !important;
  border-bottom: 1px solid var(--nn-line) !important;
  box-shadow: 0 5px 22px rgba(19, 61, 45, .05) !important;
  backdrop-filter: blur(18px) !important;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--nn-deep) !important; font-size: 19px; font-weight: 850; letter-spacing: -.035em; }
.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: #f4cf70 !important; box-shadow: 0 8px 20px rgba(13, 95, 73, .2) !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;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  padding: 10px 16px !important;
  background: var(--nn-deep) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(13, 95, 73, .14) !important;
  cursor: pointer;
  font-weight: 760 !important;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease !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 { background: var(--nn-green) !important; transform: translateY(-2px); box-shadow: 0 13px 24px rgba(13, 95, 73, .2) !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: #cfe0d5 !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: #3e2b09 !important; }
body:not(.ar-page) .danger { background: #fff1f0 !important; color: var(--nn-danger) !important; border-color: #efc8c4 !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 0 22px !important; }
.page-heading h1, .nx-head h1, .page-title { margin: 0 0 8px !important; color: var(--nn-ink) !important; font-size: clamp(30px, 4vw, 48px) !important; font-weight: 820 !important; letter-spacing: -.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 #d1e4d6 !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, .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: -.035em; }
.nx-grid, .grid, .feature-grid, .prayer-grid, .dhikr-grid { gap: 16px !important; }
.nx-card { display: block; padding: 22px !important; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.nx-card:hover, .feature-link:hover { border-color: #afd0bb !important; transform: translateY(-3px); box-shadow: 0 20px 42px rgba(19, 61, 45, .13) !important; }

input, select, textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid #d7e3da !important;
  border-radius: 13px !important;
  padding: 11px 13px !important;
  background: #fffefa !important;
  color: var(--nn-ink) !important;
  outline: none !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
}
input:focus, select:focus, textarea:focus { border-color: #69ac8f !important; box-shadow: 0 0 0 4px rgba(26, 128, 97, .12) !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: #edf7ef !important; border: 1px solid #d1e6d4 !important; color: #276647 !important; }
.error { background: #fff0ef !important; border: 1px solid #efceca !important; color: #9d4444 !important; }

/* Homepage: the existing content is kept, but its visual hierarchy is reset. */
body.site-main .home-hero {
  display: block !important;
  min-height: 0 !important;
  padding: 0 0 46px !important;
  background: linear-gradient(180deg, #f8fbf7 0, #fffdf8 58%, var(--nn-bg) 100%) !important;
  color: var(--nn-ink) !important;
  border-radius: 0 !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 {
  position: relative !important;
  width: min(1180px, 100%) !important;
  min-height: 468px !important;
  margin: 0 auto !important;
  padding: 72px 24px 48px !important;
  isolation: isolate;
}
body.site-main .home-hero > .hero-copy:after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  width: 53%;
  height: 100%;
  opacity: .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") center right/cover no-repeat;
  mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 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 #d5e8da !important; background: var(--nn-green-soft) !important; color: var(--nn-deep) !important; }
body.site-main .hero-copy h1 { max-width: 610px !important; margin: 0 0 18px !important; color: var(--nn-ink) !important; font-size: clamp(48px, 6vw, 78px) !important; line-height: .98 !important; font-weight: 820 !important; letter-spacing: -.075em !important; }
body.site-main .hero-copy > p { max-width: 520px !important; margin: 0 0 22px !important; color: #5d6e66 !important; font-size: 18px !important; line-height: 1.5 !important; }
body.site-main .hero-search { display: flex !important; align-items: center; gap: 12px; width: min(560px, 100%) !important; min-height: 62px !important; padding: 7px 9px 7px 17px !important; border: 1px solid #dfe7e0 !important; border-radius: 18px !important; background: var(--nn-paper) !important; color: #7b8780 !important; box-shadow: 0 16px 28px rgba(19, 61, 45, .1) !important; font-size: 17px; }
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; width: 48px !important; height: 48px !important; margin-left: auto; border-radius: 15px !important; background: var(--nn-deep) !important; color: #fff !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 #dfe9df !important; border-radius: 18px !important; background: rgba(255, 254, 250, .9) !important; color: var(--nn-ink) !important; box-shadow: 0 10px 22px rgba(19, 61, 45, .07) !important; }
body.site-main .hero-copy .islam-quick-card > span { grid-row: 1 / span 2; display: grid !important; place-items: center; 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, calc(100% - 48px)) !important; margin: 8px auto 14px !important; color: var(--nn-ink) !important; }
body.site-main .home-hero > .section-title h2 { margin: 0 !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, calc(100% - 48px)) !important; margin: 0 auto 32px !important; padding: 0 !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; background: transparent !important; border: 0 !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, #e3efe6, #bdd7c5) !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: 0 0 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: #edf7ef !important; color: #29724f !important; }
body.site-main .nx-quote { width: min(1180px, calc(100% - 48px)) !important; margin: 30px auto !important; padding: 24px 28px !important; border: 1px solid #e6d2a0 !important; border-radius: 22px !important; background: linear-gradient(120deg, #fdf6e5, #f0f7ef) !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, calc(100% - 48px)) !important; margin: 0 auto !important; padding: 12px !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; border: 1px solid #dfe9df !important; border-radius: 24px !important; background: #eef6ef !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, search, guests, messages, Islamic pages and payment screens. */
.profile-page, .profile-view { max-width: 1080px !important; }
.profile-cover { padding: 25px !important; border-radius: 28px !important; background: linear-gradient(135deg, #e5f1e8, #fff7e8) !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: #edf2ee !important; border-radius: 14px !important; }
.thread:hover, .thread.selected { background: #edf7ef !important; }
.thread-badge, .nav-badge, .thread-count { background: var(--nn-gold) !important; color: #fff !important; }
.chat-panel { background: linear-gradient(180deg, #fffefa, #f2f8f3) !important; }
.bubble { border-radius: 17px !important; background: #eaf3eb !important; color: var(--nn-ink) !important; }
.bubble.mine { background: var(--nn-deep) !important; color: #fff !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, #e5f1e8, #fff6df) !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: #d1e4d6 !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; }

/* Keep Islamic tools functional while giving their pages the same shell. */
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, .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, #e5f1e8, #fff6df) !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%, #d7e9dc, #739b83 44%, #173f31 100%) !important; }
body.ar-page .direction-card, body.ar-page .bottom-panel { border: 1px solid rgba(255,255,255,.55) !important; border-radius: 22px !important; background: rgba(255,254,250,.9) !important; color: var(--nn-ink) !important; box-shadow: var(--nn-shadow) !important; }
body.ar-page .start-button { background: var(--nn-deep) !important; }

/* Registration and modal surfaces. */
.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,.96) !important; box-shadow: 0 24px 70px rgba(19,61,45,.13) !important; }
.reg-step { border-radius: 999px !important; border-color: var(--nn-line) !important; background: #f2f6f1 !important; }
.reg-step.active { background: var(--nn-deep) !important; color: #fff !important; }
.reg-help, .photo-box { border-radius: 17px !important; border-color: var(--nn-line) !important; background: #f1f7f1 !important; }
.modal, .popup, .dialog, [role="dialog"] { border: 1px solid var(--nn-line) !important; border-radius: 24px !important; background: var(--nn-paper) !important; box-shadow: 0 24px 70px rgba(19,61,45,.2) !important; }

/* Admin shell. */
.admin-shell { background: var(--nn-bg) !important; color: var(--nn-ink) !important; }
.admin-sidebar { background: #fffefa !important; border-right: 1px solid var(--nn-line) !important; box-shadow: 8px 0 28px rgba(19,61,45,.05) !important; }
.admin-logo, .admin-topbar { color: var(--nn-ink) !important; background: #fffefa !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; }

/* Floating mobile navigation matches the supplied reference. */
@media (max-width:760px), (orientation: landscape) and (pointer: coarse) and (max-height:900px) {
  .site-header { height: 64px !important; padding: 0 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: 0 !important; padding: 42px 16px 34px !important; }
  body.site-main .home-hero > .hero-copy:after { right: -18%; width: 86%; height: 52%; opacity: .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(0, 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(0, 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; display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .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 #e1e8e0 !important;
    border-radius: 24px !important;
    background: rgba(255, 254, 250, .94) !important;
    color: var(--nn-muted) !important;
    box-shadow: 0 16px 36px rgba(19,61,45,.16) !important;
    backdrop-filter: blur(18px) !important;
  }
  .bottom-nav a, .mobile-bottom-nav a { position: relative; display: grid !important; place-items: center !important; align-content: center !important; flex: 1 1 0; min-width: 0; gap: 4px; padding: 5px 2px !important; border-radius: 18px !important; color: var(--nn-muted) !important; font-size: 10px !important; font-weight: 650; }
  .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 { background: #f5f0e4 !important; color: var(--nn-deep) !important; font-weight: 800; }
  .nav-badge, .site-live-badge { top: 4px !important; right: 18% !important; min-width: 17px; height: 17px; padding: 2px 5px !important; border-radius: 999px !important; background: var(--nn-green) !important; color: #fff !important; font-size: 10px !important; }
  body.site-main { padding-bottom: 0 !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: .01ms !important; animation-duration: .01ms !important; }
}

/* NIKAH_NUR_INNER_SHELL_V1 */
body.page .site-header, body.seo .site-header { display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 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, .96) !important; box-shadow: var(--nn-shadow) !important; }
.install-cta > div { display: grid; gap: 3px; min-width: 0; }
.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(0, 1fr) auto minmax(0, 1fr) !important; } .install-cta { align-items: stretch !important; flex-wrap: wrap; margin: 22px 14px 96px !important; } .install-cta > button { margin-left: 0; width: 100%; } }

/* NIKAH_NUR_LEARNING_HERO_V1 */
body.page .hero, body.seo .hero { background: linear-gradient(120deg, #063d2e 0%, #087254 100%) !important; color: #fff !important; box-shadow: 0 22px 44px rgba(19, 61, 45, .18) !important; }
body.page .hero h1, body.page .hero p, body.seo .hero h1, body.seo .hero p { color: #fff !important; }
body.page .hero .pill, body.seo .hero .pill { background: rgba(255, 254, 250, .92) !important; color: var(--nn-deep) !important; }

/* global profile fallback v2 */
body.site-main .profile-grid .profile{border-radius:18px!important;overflow:hidden!important}
body.site-main .profile-grid .profile-media{border-radius:18px 18px 0 0!important;aspect-ratio:1 / 1.12!important}
body.site-main .profile-grid .profile-body{padding:10px 12px 12px!important;color:#000!important}
body.site-main .profile-grid .profile h3{color:#000!important}
body.site-main .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}
body.site-main .profile-grid .profile .avatar.avatar-placeholder .avatar-reference-image{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important}
body.site-main .profile-grid .profile .profile-body p{color:#1b1b1b!important}
body.site-main .guest-avatar.avatar-placeholder,body.site-main .thread-avatar.avatar-placeholder,body.site-main .profile-large-photo.avatar-placeholder{overflow:hidden!important;background:transparent!important;padding:0!important}
body.site-main .guest-avatar.avatar-placeholder .avatar-reference-image,body.site-main .thread-avatar.avatar-placeholder .avatar-reference-image,body.site-main .profile-large-photo.avatar-placeholder .avatar-reference-image{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important}
body.site-main .guest-info h3,body.site-main .thread-main b,body.site-main .chat-head h2{color:#000!important}

/* Use the supplied mark instead of the old crescent-star header glyph. */
.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: transparent url('/assets/nikahsunna-logo.png?v=20260825-logo') center / contain no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
.site-header .brand-mark::before,
.site-header .brand-mark::after { content: none !important; }