/* ═══════════════════════════════════════════════════════════
   neezam · Liquid Glass layer  (loaded after style.css)
   Adds atmosphere + frosted-glass material over the existing app.
   ═══════════════════════════════════════════════════════════ */

/* ── Atmosphere: warm orbs the glass refracts ── */
html { background: #100f0d; }
body {
  background-color: #100f0d;
  background-image:
    radial-gradient(38% 30% at 22% 6%, rgba(226, 196, 134, 0.16), transparent 70%),
    radial-gradient(44% 38% at 84% 24%, rgba(170, 120, 60, 0.14), transparent 72%),
    radial-gradient(58% 48% at 50% 112%, rgba(120, 96, 52, 0.13), transparent 70%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

/* ── Header: translucent glass bar ── */
header {
  background: rgba(18, 16, 13, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  border-bottom: 1px solid rgba(255, 247, 228, 0.08);
}
.logo-icon {
  background: linear-gradient(150deg, #e6cb8e, #95703b);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -5px 10px -5px rgba(0, 0, 0, 0.5),
    0 3px 10px rgba(150, 110, 50, 0.3);
}
.logo-icon .ico-svg { color: #1f1602; }

/* ── Tabs: glass capsule, gold active ── */
.tabs {
  background: linear-gradient(150deg, rgba(255, 250, 238, 0.06), rgba(255, 250, 238, 0.02));
  border: 1px solid rgba(255, 247, 228, 0.12);
}
.tab.active {
  background: linear-gradient(150deg, var(--gold-bright), var(--gold-deep));
  color: #1c150a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 4px 13px -5px rgba(190, 150, 70, 0.55);
}
.tab.active:hover { color: #1c150a; }

/* ── The azkar card: hero glass panel ── */
.card {
  background:
    radial-gradient(120% 70% at 26% -8%, rgba(255, 252, 244, 0.15), transparent 52%),
    linear-gradient(150deg, rgba(255, 250, 238, 0.075), rgba(255, 250, 238, 0.022) 60%, rgba(0, 0, 0, 0.05));
  -webkit-backdrop-filter: blur(26px) saturate(1.5) brightness(1.03);
  backdrop-filter: blur(26px) saturate(1.5) brightness(1.03);
  border: 1px solid rgba(255, 247, 228, 0.16);
  border-radius: 22px;
  box-shadow:
    0 18px 50px -14px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 250, 235, 0.28),
    inset 0 -16px 28px -18px rgba(0, 0, 0, 0.5);
}

/* diamond number + pill */
.card-diamond::before {
  background: linear-gradient(150deg, rgba(226, 196, 134, 0.18), rgba(226, 196, 134, 0.04));
  border: 1px solid rgba(226, 196, 134, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.card-pill {
  background: rgba(255, 250, 238, 0.06);
  border: 1px solid rgba(255, 247, 228, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* ── Gold buttons: glassy gold with depth ── */
.counter-btn-big,
.read-next-btn {
  background: linear-gradient(150deg, #ecd29a 0%, #cba35e 46%, #8c6e3a 100%);
  border: 1px solid rgba(255, 241, 204, 0.42);
  color: #241a07;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -10px 20px -10px rgba(70, 45, 0, 0.5),
    0 10px 26px -10px rgba(190, 150, 70, 0.5);
}

/* ── Round nav buttons: glass ── */
.nav-btn {
  background: radial-gradient(circle at 32% 26%, rgba(255, 250, 238, 0.13), rgba(255, 250, 238, 0.03));
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255, 247, 228, 0.16);
  color: var(--gold-bright);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 20px -10px rgba(0, 0, 0, 0.6);
}
.nav-btn:hover:not(:disabled) {
  background: radial-gradient(circle at 32% 26%, rgba(255, 250, 238, 0.2), rgba(255, 250, 238, 0.05));
  border-color: rgba(226, 196, 134, 0.45);
  color: var(--gold-bright);
}

/* ── Prayer times: glass enable + pill (row already glass) ── */
.prayer-enable-btn {
  background: rgba(255, 250, 238, 0.05);
  border: 1px solid rgba(255, 247, 228, 0.14);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
}
.prayer-enable-btn:hover { border-color: rgba(226, 196, 134, 0.4); }

/* ── Overlays: completion, end card, settings ── */
.completion-card,
.end-card,
.settings-panel {
  background:
    radial-gradient(120% 60% at 28% -6%, rgba(255, 252, 244, 0.14), transparent 50%),
    linear-gradient(150deg, rgba(255, 250, 238, 0.08), rgba(255, 250, 238, 0.025));
  -webkit-backdrop-filter: blur(30px) saturate(1.5);
  backdrop-filter: blur(30px) saturate(1.5);
  border: 1px solid rgba(255, 247, 228, 0.18);
  box-shadow:
    0 22px 60px -16px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 250, 235, 0.3);
}
.completion-screen {
  background: rgba(10, 9, 8, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.completion-check {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 22px -8px rgba(190, 150, 70, 0.5);
}

/* ── Footer ── */
footer {
  color: rgba(160, 150, 134, 0.65);
  letter-spacing: 0.04em;
}

/* ── "прочитано целиком" — secondary action for long (100×) azkars ── */
.counter-done-btn {
  margin-top: 8px;
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  border: 1px solid rgba(226, 196, 134, 0.5);
  background: rgba(226, 196, 134, 0.06);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  color: var(--gold-bright);
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.08s;
}
.counter-done-btn:hover { background: rgba(226, 196, 134, 0.12); border-color: var(--gold); }
.counter-done-btn:active { transform: scale(0.97); }