/* Noor-e-Hidayah unified visual system — shared across all pages */
:root{
  color-scheme: light;
  --noor-emerald:#123f35;
  --noor-emerald-deep:#0a2d26;
  --noor-emerald-soft:#e8f0eb;
  --noor-ivory:#fbf8ef;
  --noor-paper:#fffdf8;
  --noor-gold:#b59655;
  --noor-gold-soft:#e6d7ad;
  --noor-ink:#20332d;
  --noor-muted:#68766f;
  --noor-border:#e4e7dd;
  --noor-shadow:0 12px 34px rgba(18,63,53,.08);
  --noor-radius:18px;
  --noor-space:clamp(16px,2.4vw,28px);
  --green:var(--noor-emerald);
  --green-dark:var(--noor-emerald-deep);
  --green-light:#2c6655;
  --nav-green:var(--noor-emerald);
  --nav-deep:var(--noor-emerald-deep);
  --nav-green-3d:#245849;
  --nav-gold:var(--noor-gold);
  --nav-gold-light:var(--noor-gold-soft);
  --nav-white:var(--noor-paper);
  --nav-muted:#d4e0d9;
}
html{scroll-behavior:smooth;scroll-padding-top:105px}
body{color:var(--noor-ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video,canvas{max-width:100%}
button,input,select,textarea{font:inherit}
button,a,[role="button"]{-webkit-tap-highlight-color:transparent}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--noor-gold)!important;outline-offset:3px}
::selection{background:var(--noor-gold-soft);color:var(--noor-emerald-deep)}
/* One consistent navbar, independent of page-specific stylesheet order */
.noor-navbar{
  background:rgba(18,63,53,.97)!important;
  border:1px solid rgba(181,150,85,.48)!important;
  border-radius:20px!important;
  box-shadow:0 14px 36px rgba(10,45,38,.18),inset 0 1px 0 rgba(255,255,255,.08)!important;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.noor-navbar::before{border-radius:inherit;opacity:.45}
.noor-brand-mark,.brand-mark,.noor-brand-mark{background:var(--noor-gold-soft)!important;color:var(--noor-emerald-deep)!important;box-shadow:0 5px 14px rgba(0,0,0,.14)!important}
.noor-brand-copy strong,.brand-copy strong{color:var(--noor-paper)!important;font-weight:800!important;letter-spacing:.1px}
.noor-brand-copy small,.brand-copy small{color:var(--noor-gold-soft)!important}
.noor-nav>a,.noor-nav .more-btn{border-radius:11px!important;transition:background .2s ease,color .2s ease,transform .2s ease!important}
.noor-nav>a.active{background:var(--noor-gold-soft)!important;color:var(--noor-emerald-deep)!important;box-shadow:none!important}
.noor-actions button,.language-btn{border-radius:11px!important}
/* Shared surfaces: harmonize common card families without flattening page layouts */
:where(.topic-card,.info-card,.intro-card,.dash-panel,.lesson-card,.feature-card,.trust-card,.content-card,.daily-card,.path-card,.section-card){
  border-color:var(--noor-border);
}
:where(.topic-card,.info-card,.intro-card,.dash-panel,.lesson-card,.feature-card,.trust-card,.content-card,.daily-card,.path-card,.section-card){
  box-shadow:var(--noor-shadow);
}
:where(.topic-card,.info-card,.intro-card,.dash-panel,.lesson-card,.feature-card,.trust-card,.content-card,.daily-card,.path-card,.section-card) :where(h2,h3,h4){letter-spacing:-.015em}
/* A single calm button language; preserve semantic colours used by warnings/errors */
:where(.btn,.primary-btn,.cta-btn,.action-btn,.button-primary){border-radius:12px;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
@media (hover:hover){:where(.btn,.primary-btn,.cta-btn,.action-btn,.button-primary):hover{transform:translateY(-1px)}}
/* Common footer treatment */
:where(footer,.footer){border-color:rgba(181,150,85,.22)}
:where(footer,.footer) a{transition:color .18s ease}
/* Keep pages readable and avoid accidental sideways scrolling on small devices */
@media(max-width:760px){
  html{scroll-padding-top:88px}
  :where(.container,.page-container,.content-wrap,.main-container){width:min(100% - 28px,100%);margin-inline:auto}
  :where(.topic-card,.info-card,.intro-card,.dash-panel,.lesson-card,.feature-card,.trust-card,.content-card,.daily-card,.path-card,.section-card){border-radius:16px}
}
@media(max-width:520px){
  .noor-navbar{border-radius:16px!important}
  .noor-navbar.mobile-open{border-radius:16px!important}
  :where(button,.btn,.primary-btn,.cta-btn,.action-btn){touch-action:manipulation}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}