:root{
  --bar-h:64px;
  --bg:#000;
  --card:#0b0b0b;
  --border:rgba(255,255,255,.12);
  --text:#fff;
  --grad: linear-gradient(90deg,#ffffff 0%,#7df9ff 25%,#9b6bff 50%,#ff6bcb 75%,#ffffff 100%);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
html[dir="rtl"] body{font-family:system-ui, -apple-system, Segoe UI, Roboto, "Noto Naskh Arabic", "Amiri", sans-serif;}
body{background:var(--bg);color:var(--text);}
a{color:inherit; text-decoration:none;}
/* Topbar (simple, matches your index look) */
nav.topbar{
  position:sticky; top:0; height:var(--bar-h);
  display:flex; align-items:center; gap:16px;
  padding:0 20px;
  background:rgba(0,0,0,.65);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(10px);
  z-index:1000;
}
.nav-right{margin-left:auto; display:flex; gap:10px; align-items:center;}
.nav-link{padding:10px 16px; border-radius:9999px; font-weight:800; font-size:clamp(18px, 2.2vw, 26px);}
.nav-link:hover{background:rgba(255,255,255,.08);}

/* Gradient headline */
.h1-grad{
  font-size:clamp(42px, 10vw, 120px);
  font-weight:900;
  background:var(--grad);
  background-size:300% 300%;
  -webkit-background-clip:text;
  color:transparent;
  animation:shift 6s linear infinite;
  margin:20px 0 6px;
}
@keyframes shift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.subtle{color:#cfcfcf; opacity:.85;}

/* Diwan bubbles grid */
.container{max-width:900px; margin:0 auto; padding:24px;}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:20px;
  align-items:stretch;
}
.bubble{
  display:flex; align-items:center; justify-content:center;
  padding:18px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:999px;
  min-height:220px;
  position:relative;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow:0 14px 40px rgba(0,0,0,.3);
  cursor:pointer;
}
.bubble:hover{ transform:translateY(-4px); background:#121212; }
.bubble h3{
  position:absolute; top:12px; inset-inline:18px;
  margin:0; font-size:18px; font-weight:800; opacity:.95;
}
.verse{
  font-size:20px; font-weight:700; line-height:1.6; text-align:center;
  white-space:pre-line;
}
.badge{
  position:absolute; bottom:10px; inset-inline:14px auto;
  font:600 12px/1 system-ui, sans-serif; opacity:.7;
  padding:6px 10px; border-radius:999px; border:1px solid var(--border);
}

/* Poem page */
.poem-card{
  max-width:850px; margin:24px auto; padding:24px;
  background:var(--card); border:1px solid var(--border);
  border-radius:20px; box-shadow:0 14px 40px rgba(0,0,0,.35);
}
.poem-title{ font-weight:900; font-size:32px; margin:6px 0 2px; }
.poem-author{ opacity:.8; font-weight:700; margin:0 0 18px; }
.poem-body{
  font-size:22px; line-height:2; text-align:center;
  white-space:pre-line;
}
.line-grad{
  background:var(--grad);
  -webkit-background-clip:text;
  color:transparent;
  background-size:300% 300%;
  animation:shift 6s linear infinite;
}
.footer-nav{display:flex; justify-content:space-between; margin-top:20px; opacity:.9;}
/* Wrapper for placement */
.poem-audio {
  display: flex;
  justify-content: center;
  margin: 16px 0;
}

/* Force the audio element to match your black theme */
.poem-audio audio {
  width: 100%;
  max-width: 360px;

  background-color: #111 !important;   /* dark background */
  border-radius: 14px;                  /* smooth shape */
  padding: 6px;                         /* spacing around controls */
  filter: invert(1) hue-rotate(180deg); /* makes the icons dark / black */
}