/* Quran Learning Guides — futuristic dark redesign (emerald/gold).
   System fonts only. Article body stays on a light surface for readability. */
:root{
  --accent1:#10b981; --accent2:#f59e0b;
  --glow:rgba(16,185,129,.35);
  --bg:#070b14; --ink-light:#e6edf3; --muted-light:#9aa7b8;
  --glass:rgba(255,255,255,.06); --glass-border:rgba(255,255,255,.14);
  --article-bg:#ffffff; --article-ink:#0f172a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  background-color:var(--bg);
  background-image:
    radial-gradient(520px 320px at 15% -5%, rgba(16,185,129,.28), transparent 65%),
    radial-gradient(560px 360px at 90% 10%, rgba(245,158,11,.20), transparent 65%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 44px);
  color:var(--ink-light); line-height:1.7;
  overflow-x:hidden;
}
h1,h2,h3{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:-.02em;font-weight:800;line-height:1.2}
a{color:#6ee7b7}
a:hover{color:#fcd34d}
header{
  position:sticky; top:0; z-index:10;
  background:rgba(7,11,20,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--glass-border); padding:1rem 1.2rem;
}
header .wrap,main,footer .wrap{max-width:860px;margin:0 auto;padding:0 1.2rem;width:100%}
header a{color:#fff;text-decoration:none}
.brand{font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.tagline{color:var(--muted-light);font-size:.95rem;margin:.2rem 0 0}
nav{margin-top:.7rem;display:flex;flex-wrap:wrap;gap:.4rem}
nav a{background:rgba(255,255,255,.08);padding:.35rem .7rem;border-radius:20px;font-size:.9rem;border:1px solid var(--glass-border)}
nav a:hover{background:linear-gradient(135deg,var(--accent1),var(--accent2));color:#04120c}
main{padding-bottom:1rem}
main>h1,.hero h1{margin:1.5rem 0 .5rem}
@keyframes gradient-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes fade-rise{from{opacity:.55;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.gradient-text,.hero h1,main>h1{
  background:linear-gradient(100deg,var(--accent1),var(--accent2),var(--accent1));
  background-size:200% auto; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:gradient-shift 7s ease-in-out infinite;
}
.hero{
  background:var(--glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--glass-border); border-radius:18px;
  padding:1.6rem; margin:1.5rem 0;
  animation:fade-rise .7s ease-out both;
  box-shadow:0 10px 40px rgba(0,0,0,.35);
}
.hero h1{margin:0 0 .5rem;font-size:clamp(1.7rem,7vw,2.75rem)}
.hero p{margin:.4rem 0;color:var(--ink-light)}
.btn,.hero .btn{
  display:inline-block; background:linear-gradient(135deg,var(--accent1),var(--accent2));
  color:#04120c!important; font-weight:800; padding:.65rem 1.2rem; border-radius:999px;
  text-decoration:none; margin-top:.7rem; transition:transform .2s ease,box-shadow .2s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px var(--glow)}
.cards{display:grid;grid-template-columns:1fr;gap:1rem;margin:1.5rem 0}
.card,.glass,.article-list li{
  background:var(--glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--glass-border); border-radius:18px; padding:1.1rem;
  transition:transform .2s ease,box-shadow .2s ease;
}
.card:hover,.article-list li:hover{transform:translateY(-4px);box-shadow:0 12px 32px var(--glow)}
.card h2,.card h3{margin-top:0}
.card h3 a,.card a{color:#fff;text-decoration:none}
.card a:hover{color:#fcd34d}
.card p{color:var(--muted-light)}
.article-list{list-style:none;padding:0}
.article-list li{margin:.7rem 0}
.article-list a{font-weight:800;text-decoration:none;font-size:1.05rem;color:#fff}
.meta{color:var(--muted-light);font-size:.9rem}
.note{
  background:var(--glass); backdrop-filter:blur(14px);
  border:1px solid var(--glass-border); border-left:4px solid var(--accent2);
  padding:1rem; border-radius:18px; margin:1.2rem 0; color:var(--ink-light);
}
/* Article readability FIRST: light surface, dark text, narrow measure */
article{
  background:var(--article-bg); color:var(--article-ink);
  border:1px solid #e2e8f0; border-radius:18px; padding:1.5rem;
  margin:1.5rem auto; max-width:720px; line-height:1.8;
}
article h1{color:#0f172a;line-height:1.3;background:none;-webkit-text-fill-color:#0f172a;animation:none}
article h2{color:#065f46;margin-top:1.6rem}
article a{color:#047857}
article a:hover{color:#b45309}
article .meta{color:#475569}
article .note{background:#fffbeb;border:1px solid #fde68a;border-left:4px solid var(--accent2);color:#0f172a}
article .note a{color:#047857}
.breadcrumb{font-size:.9rem;color:var(--muted-light);margin:1.2rem 0 0}
.breadcrumb a{color:#6ee7b7}
footer{
  background:#05080f; color:#cbd5e1; padding:1.5rem 0; margin-top:2rem; font-size:.92rem;
  border-top:2px solid var(--accent1);
}
footer a{color:#fcd34d}
@media(min-width:640px){.cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
@media(max-width:600px){
  .hero h1{font-size:1.7rem}
  article{padding:1.1rem;margin-left:0;margin-right:0}
  header .wrap,main,footer .wrap{padding:0 1rem}
  .brand{font-size:1.3rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}