:root{--bg:#f8fafc;--card:#fff;--ink:#111827;--muted:#6b7280;--line:#e5e7eb;--accent:#ff0033;--accent2:#7c3aed}body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:linear-gradient(180deg,#fff 0,#f8fafc 40%,#eef2ff 100%);color:var(--ink);min-height:100vh}.glass-nav{background:rgba(255,255,255,.82);backdrop-filter:blur(18px);border-bottom:1px solid rgba(229,231,235,.8)}.navbar{padding:.85rem 0}.brand-dot{width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#ff6b6b);color:#fff;display:inline-grid;place-items:center;box-shadow:0 12px 30px rgba(255,0,51,.25)}main{padding-top:72px}.hero{position:relative;overflow:hidden;padding:86px 0 58px}.hero:before{content:"";position:absolute;inset:-100px -20%;background:radial-gradient(circle at 20% 10%,rgba(255,0,51,.16),transparent 28%),radial-gradient(circle at 80% 0,rgba(124,58,237,.18),transparent 30%);pointer-events:none}.hero .container{position:relative}.hero-card{background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.9);box-shadow:0 24px 80px rgba(15,23,42,.08);border-radius:30px;padding:36px}.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;color:var(--muted);font-size:.92rem}.section-title{font-weight:800;letter-spacing:-.04em}.category-chip{border:1px solid var(--line);border-radius:999px;padding:9px 16px;background:#fff;color:#111;text-decoration:none;display:inline-flex;gap:8px;align-items:center;transition:.25s}.category-chip:hover,.category-chip.active{background:#111827;color:#fff;transform:translateY(-2px)}.video-card{background:var(--card);border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 14px 45px rgba(15,23,42,.06);height:100%;transition:.25s}.video-card:hover{transform:translateY(-6px);box-shadow:0 25px 70px rgba(15,23,42,.12)}.video-frame{aspect-ratio:16/9;background:#0f172a;overflow:hidden}.video-frame iframe{width:100%;height:100%;border:0;display:block}.video-body{padding:18px}.badge-soft{background:#f3f4f6;color:#374151;border:1px solid #e5e7eb}.clean-card{background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:0 14px 45px rgba(15,23,42,.06)}.form-control,.form-select{border-radius:14px;padding:12px 14px;border-color:#e5e7eb}.karaoke-item{border:1px solid var(--line);border-radius:20px;padding:18px;background:#fff;transition:.2s}.karaoke-item:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,23,42,.08)}.footer{background:#fff;border-top:1px solid var(--line)}.admin-shell{min-height:100vh;background:#f3f4f6}.admin-sidebar{background:#111827;color:#fff;min-height:100vh}.admin-sidebar a{color:#cbd5e1;text-decoration:none;display:block;padding:12px 16px;border-radius:14px}.admin-sidebar a:hover,.admin-sidebar a.active{background:#1f2937;color:#fff}.table td,.table th{vertical-align:middle}.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 20% 10%,rgba(255,0,51,.14),transparent 32%),linear-gradient(135deg,#f8fafc,#eef2ff)}.login-card{width:min(440px,92vw);background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:0 30px 80px rgba(15,23,42,.12);padding:32px}@media(max-width:991px){.admin-sidebar{min-height:auto}.hero{padding-top:48px}.hero-card{padding:24px}}
.video-card-link{display:block;height:100%;color:inherit;text-decoration:none}.video-thumb{position:relative;aspect-ratio:16/9;background:#0f172a;overflow:hidden}.video-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:.35s}.video-card:hover .video-thumb img{transform:scale(1.06)}.play-badge{position:absolute;inset:auto auto 14px 14px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(255,0,51,.95);color:#fff;font-size:1.6rem;box-shadow:0 12px 26px rgba(255,0,51,.35)}.watch-player{aspect-ratio:16/9;background:#000;border-radius:26px;overflow:hidden;box-shadow:0 24px 80px rgba(15,23,42,.18)}.watch-player iframe{width:100%;height:100%;border:0;display:block}.related-video{display:grid;grid-template-columns:112px 1fr;gap:12px;align-items:center;padding:10px;border-radius:18px;color:inherit;text-decoration:none;transition:.2s}.related-video:hover{background:#f8fafc}.related-video img{width:112px;aspect-ratio:16/9;object-fit:cover;border-radius:14px}.watch-hero{padding-top:110px!important}

.btn-red{border-radius:999px;padding:12px 22px;box-shadow:0 16px 34px rgba(255,0,51,.24)}.btn-red:hover{color:#fff;filter:brightness(.95);}
.btn-red {
  background: linear-gradient(135deg, #ff4d4d, #ff6a00);
  color: #fff;
  border: none;
  transition: all 0.3s ease;
}

.btn-red:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 77, 77, 0.3);
}
/* HERO SECTION */
.hero {
  padding: 80px 0;
}

/* Animated Gradient Background */
.hero-card {
  position: relative;
  padding: 50px;
  border-radius: 24px;
  overflow: hidden;

  /* Modern soft gradient */
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #feecf6 35%,
    #eef2ff 70%,
    #f8fafc 100%
  );

  /* Soft shadow */
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.6);
}

/* Glass Overlay */
.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  /* Subtle noise using SVG */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");

  opacity: 0.03; /* very subtle */
  pointer-events: none;
}

.hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;

  background: linear-gradient(
    to bottom right,
    rgba(255,255,255,0.6),
    rgba(255,255,255,0.1)
  );

  pointer-events: none;
}

/* Ensure content stays above overlay */
.hero-card > * {
  position: relative;
  z-index: 3;
}

/* Image styling */
.hero-image-wrapper {
  position: relative;
}

.hero-image {
  max-height: 420px;
  border-radius: 20px;
  transition: transform 0.4s ease;
}

.hero-image:hover {
  transform: scale(1.05);
}

/* Button styling */
.hero .btn-light {
  font-weight: 500;
  transition: all 0.3s ease;
}

.hero .btn-light:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* Pill tweak for dark bg */
.hero .pill {
  background: rgba(255,255,255,0.2);
  color: #666;
  backdrop-filter: blur(6px);
}


.donation-qr-box {
  max-width: 260px;
  padding: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 15px 40px rgba(0,0,0,0.12);
  border-radius: 24px;
}