:root{
  --bg: #0b1220;
  --panel: #111a2e;
  --muted: #7ea0d9;
  --ink: #f6f8ff;
  --accent: #3bd16f;
  --soft: #1a2440;
  --card: #0f172a;
  --ring: #3bd16f66;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:
     radial-gradient(1200px 500px at 80% -10%, #2e4a8b10, transparent 70%),
     radial-gradient(1000px 600px at 10% 10%, #38d39e10, transparent 60%),
     linear-gradient(180deg, var(--bg), #070d18);
  min-height:100%;
}
.header{
  position:sticky; top:0; z-index:10;
  background: linear-gradient(180deg, rgba(11,18,32,.95), rgba(11,18,32,.70));
  backdrop-filter: blur(6px);
  border-bottom:1px solid #1e293b;
}
.container{max-width:1100px; margin:0 auto; padding:16px 18px}
.brand{display:flex; align-items:center; gap:12px;}
.logo{
  width:36px;height:36px;border-radius:10px;
  background: conic-gradient(from 140deg,#47f7a1,#6aa9ff,#47f7a1);
  display:grid;place-items:center;color:#0a1325;font-weight:900
}
.brand h1{font-size:18px; line-height:1.15; margin:0}
.brand small{display:block; font-size:12px; color:var(--muted)}
.controls{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
input[type="search"], select, button{
  background:var(--panel);
  border:1px solid #1f2a44;
  color:var(--ink);
  padding:10px 12px;
  border-radius:12px;
  outline: none;
}
input[type="search"]{flex:1; min-width:180px}
button.primary{background:#22c55e; color:#041018; border-color:#1ca34f; font-weight:700}
button.ghost{background:#0f172a}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:14px;
  padding:16px 0 100px;
}
.card{
  background:linear-gradient(180deg,#0f1a31,#0c1426);
  border:1px solid #1f2a44;
  border-radius:16px;
  padding:16px;
  display:flex; flex-direction:column; gap:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.badge{display:inline-flex; align-items:center; gap:6px; background:#0c1a32; color:#9db6f0; border:1px solid #243454; border-radius:999px; padding:6px 10px; font-size:12px; font-weight:700}
.ref{color:#93c5fd; font-size:12px}
.text{font-size:14.5px; line-height:1.55}
.actions{display:flex; gap:8px; flex-wrap:wrap}
footer{
  position:fixed; bottom:0; left:0; right:0;
  background:linear-gradient(180deg, rgba(11,18,32,.2), rgba(11,18,32,.8) 30%, rgba(11,18,32,.9));
  backdrop-filter: blur(6px);
  border-top:1px solid #1f2a44;
}
.footer-inner{max-width:1100px; margin:0 auto; padding:8px 18px;
  display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.kbd{border:1px solid #304463; background:#0b172f; padding:2px 6px; border-radius:6px; font-size:12px;color:#9fb7e8}
a{color:#80ffd0; text-decoration:none}
.footer-actions{display:flex; gap:10px; align-items:center}
.btn-link{background:#0f172a;border:1px solid #254064;color:#bfe9ff;padding:8px 12px;border-radius:10px}
.empty{opacity:.75; text-align:center; padding:48px 10px}

/* Daily scripture styling */
.daily-wrap{padding-top:8px}
.daily-card{
  border-radius:18px;
  padding:18px;
  border:1px solid #2a3a5f;
  background: linear-gradient(180deg, #0f1a31, #0b1529);
  box-shadow: 0 0 0 6px var(--ring);
  display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap;
}
.daily-pill{background:#062c1d; color:#a9ffd0; border:1px solid #0e4b32; padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px}
.daily-ref{color:#93c5fd; font-size:12px}
.daily-text{flex:1; min-width:220px; line-height:1.6;}
.daily-actions{display:flex; gap:8px}

@media (max-width:560px){
  .grid{grid-template-columns:repeat(auto-fill, minmax(210px,1fr))}
  .brand h1{font-size:16px}
  .daily-card{box-shadow:none; border-color:#224066}
}


/* ---------- Intro splash (3s) ---------- */
#splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(1200px 400px at 50% -10%, rgba(16,255,214,0.10), transparent 50%),
    radial-gradient(1000px 600px at -10% 120%, rgba(106,166,255,0.12), transparent 60%),
    #0b1020;
  color: #fff;
  animation: splash-fade-in .28s ease-out both;
}
#splash .splash-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
#splash .title {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  opacity: .92;
  text-transform: uppercase;
}
#splash .skip {
  position: absolute;
  bottom: -3.5rem;
  padding: .5rem .9rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  text-decoration: none;
  border-radius: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: .92rem;
}
#splash .skip:hover { background: rgba(255,255,255,0.14); }
#splash.splash-hide {
  animation: splash-fade-out .6s ease-in forwards;
}
#splash #splash-logo .ring {
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  animation: splash-ring 1.2s ease-out forwards, splash-pulse 2s ease-in-out 1.2s infinite;
  transform-origin: 60px 60px;
}
@keyframes splash-ring { to { stroke-dashoffset: 0; } }
@keyframes splash-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes splash-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes splash-fade-out { to { opacity: 0; visibility: hidden; } }
@media (max-width: 480px) {
  #splash #splash-logo { width: 96px; height: 96px; }
  #splash .title { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  #splash #splash-logo .ring { animation: none; }
}
/* ---------- End intro splash ---------- */