/* islamic-glass.css — Islamic Glassmorphism */
:root{
  --bg: #061417;
  --bg-2:#0a1b20;
  --fg:#EFFFFA;
  --muted:#b6e6db;
  --primary:#00BFA6;
  --accent:#9FFFE3;
  --glass:rgba(255,255,255,.08);
  --glass-strong:rgba(255,255,255,.14);
  --glass-border:rgba(255,255,255,.20);
  --radius:18px;
  --blur:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  --container:1100px;
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#f5fffc; --bg-2:#eafff9; --fg:#0d2a28; --muted:#2e6d63;
    --glass:rgba(255,255,255,.6); --glass-strong:rgba(255,255,255,.7);
    --glass-border:rgba(0,0,0,.08);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--fg);
  background:
    radial-gradient(1200px 800px at 20% -10%, #072428 0%, transparent 60%),
    radial-gradient(1000px 700px at 110% 10%, #042022 0%, transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
   background-attachment: fixed
}

.bg-pattern{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(159,255,227,.08) 0 40%, transparent 41%) repeat,
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 64 64' fill='none'>\
<g opacity='0.08' stroke='%239FFFE3' stroke-width='0.6'>\
<path d='M32 2l8 14 16 0-8 14 8 14-16 0-8 14-8-14-16 0 8-14-8-14 16 0 8-14z'/>\
<circle cx='32' cy='32' r='6'/></g></svg>") center/320px 320px repeat;
  mix-blend-mode:screen; opacity:.8;
}
.bg-glow{
  position:fixed; inset:-20vmax; z-index:-3; pointer-events:none;
  background:
   radial-gradient(40vmax 40vmax at 60% 10%, rgba(0,191,166,.18) 0%, transparent 60%),
   radial-gradient(30vmax 30vmax at 20% 70%, rgba(159,255,227,.12) 0%, transparent 65%);
  filter:blur(20px);
}

.glass{
  background:var(--glass);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.glow{position:relative}
.glow::before{
  content:""; position:absolute; inset:-1px; pointer-events:none;
  border-radius:calc(var(--radius) + 1px);
  background:linear-gradient(135deg, rgba(39,240,208,.65), rgba(0,191,166,0) 40%, rgba(159,255,227,.5) 70%, rgba(39,240,208,0) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:1px;
}

.site-header, .site-footer{ margin:24px auto; max-width:var(--container); padding:16px 20px; }
.container{ max-width:var(--container); margin:24px auto 80px; padding:0 16px; }

.brand{ display:flex; align-items:center; gap:16px; }
.logo{ width:54px; height:54px; flex:0 0 auto; filter: drop-shadow(0 0 10px rgba(39,240,208,.35)); }
.title h1{ margin:0; font-size:clamp(1.3rem, 1.1rem + 1vw, 2rem) }
.subtitle{ margin:.25rem 0 0; color:var(--muted) }

.card{ padding:22px }
.prose .original-text{
  white-space:pre-wrap;
  font-size:1rem; line-height:1.65; color:var(--fg);
}

.form-sourate{
  margin: 16px 0 6px;
  display: grid; grid-template-columns: 1fr auto; gap: 10px;
}
.select-glass{
  appearance:none;
  padding:12px 14px; border-radius:12px;
  border:1px solid rgba(159,255,227,.35);
  background:
     linear-gradient(135deg, rgba(39,240,208,.10), rgba(0,191,166,.06)),
     rgba(255,255,255,.05);
  color:var(--fg);
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:12px;
  border:1px solid rgba(159,255,227,.35);
  color: var(--fg); font-weight:700; letter-spacing:.2px;
  cursor:pointer; transition: transform .12s ease, box-shadow .12s ease, background-color .2s ease;
}
.btn.primary{ background: linear-gradient(135deg, rgba(39,240,208,.28), rgba(0,191,166,.18)); }
.btn.primary:hover{ transform: translateY(-1px); box-shadow: 0 6px 22px rgba(39,240,208,.25); }

.db-error{
  margin-top: 8px; color: #ffd1d1;
  background: rgba(255, 63, 63, .08);
  border: 1px solid rgba(255, 63, 63, .25);
  padding: 10px 12px; border-radius: 10px;
}

.result h3{ margin-top: 0; }

.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.site-footer{ text-align:center; font-size:.95rem; color:var(--muted) }

@media (max-width:560px){
  .form-sourate{ grid-template-columns: 1fr; }
}