:root { --glass: rgba(255,255,255,.75); }

.glass { backdrop-filter: blur(10px); background: var(--glass); }
.brand-dot{
  width:14px;height:14px;border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #ff6b6b, #845ef7);
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
.hero{
  background: linear-gradient(135deg, rgba(132,94,247,.10), rgba(255,107,107,.10));
  border: 1px solid rgba(0,0,0,.06);
}
#rawBox{
  background:#0b1020;color:#d6e2ff;
  padding:14px;border-radius:14px;max-height:320px;overflow:auto;
}
.card { border: 1px solid rgba(0,0,0,.06); }
.rounded-4 { border-radius: 1.25rem !important; }

.mobile-nav{
  position: fixed; left: 0; right:0; bottom:0;
  background: rgba(255,255,255,.92);
  border-top: 1px solid rgba(0,0,0,.08);
  display:flex; justify-content:space-around; gap: 6px;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  backdrop-filter: blur(10px);
}
.mobile-nav-btn{
  flex:1;
  border:0; background: transparent;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:8px 6px; border-radius: 14px;
  color:#111;
  text-decoration:none;
}
.mobile-nav-btn span{ font-size: 11px; color: rgba(0,0,0,.65); }
.mobile-nav-btn i{ font-size: 20px; }
.mobile-nav-btn:active{ background: rgba(0,0,0,.06); }

.poster{
  border-radius: 16px;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: rgba(0,0,0,.06);
}