/* =========================================================
   iOS 26 Glass Morph Blur + Animation Theme (CSS only)
   Fresh rebuild — Poster Blue + Orange theme
   (Animations + layout preserved, only styling refreshed)
   ========================================================= */

/* =========================
   THEME TOKENS
========================= */
:root{
  /* Poster palette */
  --blue:#13A8E6;       /* sky/cyan */
  --blue2:#0B78B6;      /* deeper blue */
  --orange:#F59E0B;     /* warm orange */
  --ink:#0f172a;

  /* Background + surfaces */
  --bg:#F2F4F7;               /* light grey poster backdrop */
  --card: rgba(255,255,255,.82);
  --card2: rgba(255,255,255,.66);

  /* Text */
  --text: var(--ink);
  --muted:#475569;

  /* Lines + shadows */
  --line: rgba(15,23,42,.10);
  --line2: rgba(15,23,42,.14);
  --shadow: 0 18px 55px rgba(15,23,42,.14);
  --shadow2: 0 10px 26px rgba(15,23,42,.10);

  /* Radii */
  --radius: 18px;
  --radius2: 22px;

  /* Gradients */
  --heroGrad: linear-gradient(135deg, rgba(19,168,230,.18), rgba(245,158,11,.14));
  --fab: linear-gradient(135deg, rgba(19,168,230,1), rgba(11,120,182,1));

  /* Glass */
  --glass: rgba(255,255,255,.68);
  --glass2: rgba(255,255,255,.52);
  --glassDark: rgba(10,14,30,.62);
  --glassDark2: rgba(10,14,30,.46);
  --blur: 16px;
  --blur2: 22px;

  /* Motion */
  --ease: cubic-bezier(.2,.9,.2,1);
  --ease2: cubic-bezier(.16,1,.3,1);
  --tFast: .18s;
  --t: .24s;
  --tSlow: .55s;
}

/* Dark mode vars via [data-theme="dark"] */
[data-theme="dark"]{
  --bg:#071019;
  --card: rgba(255,255,255,.08);
  --card2: rgba(255,255,255,.06);
  --text:#eef2ff;
  --muted: rgba(238,242,255,.72);
  --line: rgba(255,255,255,.12);
  --line2: rgba(255,255,255,.18);
  --shadow: 0 22px 80px rgba(0,0,0,.45);
  --shadow2: 0 14px 36px rgba(0,0,0,.32);
  --heroGrad: linear-gradient(135deg, rgba(19,168,230,.22), rgba(245,158,11,.18));
  --fab: linear-gradient(135deg, rgba(19,168,230,.22), rgba(255,255,255,.08));
}

/* =========================
   BASE RESET
========================= */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x:hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html[data-lang="ne"] body{
  font-family: "Hind Siliguri", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

a{ color:inherit; text-decoration:none }
.container{ width:min(1180px,92vw); margin:0 auto }

/* Selection */
::selection{ background: rgba(19,168,230,.22) }

/* iOS safe-area */
body{ padding-bottom: env(safe-area-inset-bottom) }

/* =========================
   BACKGROUND BLOBS + GRAD
========================= */
.bg-wrap{
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  overflow:hidden;
}
.bg-grad{
  position:absolute; inset:-25%;
  background:
    radial-gradient(900px 600px at 15% 10%, rgba(19,168,230,.22), transparent 60%),
    radial-gradient(900px 600px at 85% 15%, rgba(11,120,182,.20), transparent 60%),
    radial-gradient(1100px 700px at 50% 90%, rgba(245,158,11,.14), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  transform: translateY(var(--parY,0px));
  transition: transform .05s linear;
  filter: saturate(1.06);
}
[data-theme="dark"] .bg-grad{
  background:
    radial-gradient(900px 600px at 15% 10%, rgba(19,168,230,.26), transparent 60%),
    radial-gradient(900px 600px at 85% 15%, rgba(11,120,182,.24), transparent 60%),
    radial-gradient(1100px 700px at 50% 90%, rgba(245,158,11,.10), transparent 65%),
    linear-gradient(180deg, rgba(7,16,25,.55), rgba(7,16,25,0));
}

.blob{
  position:absolute;
  width:520px; height:520px;
  border-radius:42% 58% 62% 38% / 42% 40% 60% 58%;
  opacity:.95;
  transform: translate3d(var(--x,0),var(--y,0),0) scale(var(--s,1));
  animation: morph 10s var(--ease) infinite;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 30px 90px rgba(0,0,0,.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
[data-theme="dark"] .blob{
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 40px 110px rgba(0,0,0,.28);
}
.blob.blue{
  background: radial-gradient(circle at 30% 30%, rgba(19,168,230,.42), rgba(19,168,230,.14));
}
.blob.blue2{
  background: radial-gradient(circle at 30% 30%, rgba(11,120,182,.40), rgba(11,120,182,.14));
}
.blob.orange{
  background: radial-gradient(circle at 30% 30%, rgba(245,158,11,.40), rgba(245,158,11,.14));
}
@keyframes morph{
  0%,100%{ border-radius:42% 58% 62% 38% / 42% 40% 60% 58% }
  50%{ border-radius:58% 42% 40% 60% / 52% 58% 42% 48% }
}

/* Optional flag watermark image */
.flagMark{
  position:absolute;
  right:-120px;
  top:120px;
  width:520px;
  opacity:.14;
  transform: rotate(8deg) translateY(var(--parY2,0px));
  transition: transform .05s linear;
  filter: saturate(1.08);
}
[data-theme="dark"] .flagMark{ opacity:.18 }

/* =========================
   TOP NAV (GLASS)
========================= */
.nav{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-bottom: 1px solid var(--line);
}
[data-theme="dark"] .nav{
  background: rgba(7,16,25,.58);
}
.navInner{
  padding:14px 0;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}

.brand{
  display:flex; align-items:center; gap:12px;
  font-weight:900; letter-spacing:.2px;
}
.logo{
  width:44px; height:44px;
  border-radius:14px;
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  display:grid; place-items:center;
  color:#fff;
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.brand small{
  display:block;
  font-weight:700;
  color: var(--muted);
  margin-top:2px;
}

.np-flag{ width:40px; height:40px; display:block; object-fit:contain; }

.navLinks{
  display:flex; gap:10px; flex-wrap:wrap;
  justify-content:flex-end; align-items:center;
}

/* Pills (buttons/links) */
.pill{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background: var(--glass);
  color: var(--text);
  font-weight:900;
  cursor:pointer;
  user-select:none;
  display:inline-flex; align-items:center; gap:10px;
  transition: transform var(--tFast) var(--ease), box-shadow var(--tFast) var(--ease), background var(--tFast) var(--ease), border-color var(--tFast) var(--ease);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
[data-theme="dark"] .pill{ background: var(--glassDark2) }
.pill:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(15,23,42,.10);
  border-color: rgba(19,168,230,.28);
}
[data-theme="dark"] .pill:hover{
  box-shadow: 0 16px 36px rgba(0,0,0,.34);
  border-color: rgba(255,255,255,.18);
}
.pill:active{ transform: translateY(0px) scale(.99) }
.pill.iconOnly{ padding:10px 12px }
.pill.iconOnly span{ display:none }

.hamburger{ display:none }
@media (max-width:860px){
  .navLinks .hide-sm{ display:none }
  .hamburger{ display:inline-flex }
}

/* =========================
   HERO
========================= */
.hero{ padding:34px 0 14px }
.heroCard{
  background: var(--heroGrad);
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.heroCard:before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(800px 400px at 15% 0%, rgba(255,255,255,.36), transparent 55%),
              radial-gradient(700px 420px at 90% 15%, rgba(255,255,255,.22), transparent 60%);
  opacity:.8;
  pointer-events:none;
}
[data-theme="dark"] .heroCard:before{ opacity:.55 }

.heroGrid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:14px;
  padding:18px;
  position:relative;
}

.kicker{
  display:inline-flex; gap:10px; align-items:center;
  padding:10px 12px;
  border-radius:999px;
  border: 1px solid var(--line);
  background: var(--glass);
  font-weight:900;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
[data-theme="dark"] .kicker{ background: var(--glassDark2) }
.dot{
  width:10px; height:10px; border-radius:99px;
  background: linear-gradient(180deg, var(--orange), var(--blue));
  box-shadow: 0 0 0 3px rgba(255,255,255,.22);
}
h1{
  margin:14px 0 8px;
  font-size: clamp(30px,4.2vw,54px);
  line-height:1.05;
  letter-spacing:-1px;
}
.sub{
  margin:0;
  color: var(--muted);
  font-weight:750;
  line-height:1.65;
  max-width:68ch;
  font-size:16.5px;
}

.ctaRow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px }
.btn{
  border:0;
  border-radius: 16px;
  padding:12px 14px;
  font-weight:900;
  cursor:pointer;
  display:inline-flex; align-items:center; gap:10px;
  transition: transform var(--tFast) var(--ease), box-shadow var(--tFast) var(--ease), filter var(--tFast) var(--ease);
  user-select:none;
  will-change: transform;
}
.btn.primary{
  color:#fff;
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  box-shadow: 0 16px 34px rgba(19,168,230,.18);
}
.btn.accent{
  color:#fff;
  background: linear-gradient(135deg, var(--orange), rgba(245,158,11,.78));
  box-shadow: 0 16px 34px rgba(245,158,11,.16);
}
.btn.ghost{
  background: var(--glass);
  border: 1px solid var(--line);
  color: var(--text);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
[data-theme="dark"] .btn.ghost{ background: var(--glassDark2) }
.btn:hover{ transform: translateY(-1px) }
.btn:active{ transform: translateY(0) scale(.99) }

/* =========================
   SLIDER (GLASS OVERLAY)
========================= */
.slider{
  position:relative;
  border-radius: 18px;
  border: 1px solid var(--line);
  overflow:hidden;
  min-height: 360px;
  background: rgba(255,255,255,.55);
  box-shadow: var(--shadow2);
}
[data-theme="dark"] .slider{ background: rgba(255,255,255,.06) }

.slide{
  position:absolute; inset:0;
  opacity:0;
  transform: scale(1.02);
  transition: opacity .6s var(--ease), transform .8s var(--ease2);
}
.slide.active{ opacity:1; transform: scale(1) }
.slide img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.02);
  transition: transform 1.2s var(--ease2);
}
.slide.active img{ transform: scale(1) }

.slideOverlay{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.46), rgba(0,0,0,.10) 70%, rgba(0,0,0,0));
}

.slideText{
  position:absolute;
  left:14px; right:14px; bottom:14px;
  padding:14px;
  border-radius: 18px;
  color:#fff;
  background: rgba(0,0,0,.36);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.slideText b{ font-size:18px }
.slideText div{ margin-top:3px; opacity:.92; font-weight:800 }

.sliderTopBar{
  position:absolute; top:12px; left:12px; right:12px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  z-index:5;
}
.chips{ display:flex; gap:8px; flex-wrap:wrap }
.flagChip{
  width:42px; height:42px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
[data-theme="dark"] .flagChip{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}
.sliderControls{ display:flex; gap:8px }
.iconBtn{
  width:42px; height:42px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.22);
  color:#fff;
  cursor:pointer;
  display:grid; place-items:center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform var(--tFast) var(--ease), background var(--tFast) var(--ease), filter var(--tFast) var(--ease);
}
.iconBtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.30);
}
.iconBtn:active{ transform: translateY(0) scale(.98) }

.dots{
  position:absolute; left:0; right:0; bottom:12px;
  display:flex; gap:8px; justify-content:center;
  z-index:6;
}
.dotBtn{
  width:10px; height:10px;
  border-radius: 99px;
  background: rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.35);
  cursor:pointer;
  transition: width var(--tFast) var(--ease), background var(--tFast) var(--ease), transform var(--tFast) var(--ease);
}
.dotBtn:hover{ transform: translateY(-1px) }
.dotBtn.active{
  width:26px;
  background:#fff;
}

/* =========================
   SECTIONS + CARDS
========================= */
section{ padding:16px 0 }
.titleRow{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:12px; margin:8px 0 10px;
}
.titleRow h2{ margin:0; font-size:20px; letter-spacing:-.4px }
.titleRow p{ margin:0; color: var(--muted); font-weight:800 }

.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:14px }

.card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}
.pad{ padding:16px }

.lead{
  margin:10px 0 0;
  color: var(--muted);
  font-weight:780;
  line-height:1.75;
  font-size:15.5px;
}

.list{
  margin:10px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}
.item{
  display:flex; gap:12px;
  padding:12px;
  border-radius: 16px;
  border:1px solid var(--line);
  background: var(--card2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform var(--tFast) var(--ease), box-shadow var(--tFast) var(--ease), border-color var(--tFast) var(--ease);
}
[data-theme="dark"] .item{ background: rgba(255,255,255,.06) }
.item:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(15,23,42,.10);
  border-color: rgba(19,168,230,.26);
}
[data-theme="dark"] .item:hover{
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.18);
}
.item i{
  width:40px; height:40px;
  border-radius: 14px;
  display:grid; place-items:center;
  color:#fff;
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  flex:0 0 auto;
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
}
.item b{ display:block }
.item span{
  display:block;
  color: var(--muted);
  font-weight:780;
  margin-top:3px;
  line-height:1.55;
  font-size:13.8px;
}

/* Mini grid */
.miniGrid{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap:10px;
  margin-top:10px;
}
.mini{
  padding:12px;
  border-radius: 16px;
  border:1px solid var(--line);
  background: var(--card2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
[data-theme="dark"] .mini{ background: rgba(255,255,255,.06) }
.mini b{ display:block }
.mini p{
  margin:6px 0 0;
  color: var(--muted);
  font-weight:780;
  line-height:1.55;
  font-size:13.8px;
}

/* =========================
   FORM
========================= */
.formGrid{ display:grid; gap:10px; margin-top:12px }
.in{
  padding:12px 12px;
  border-radius: 16px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.74);
  color: var(--text);
  font-weight:850;
  outline:none;
  transition: border-color var(--tFast) var(--ease), box-shadow var(--tFast) var(--ease), transform var(--tFast) var(--ease);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
[data-theme="dark"] .in{
  background: rgba(255,255,255,.08);
  color: var(--text);
}
.in:focus{
  border-color: rgba(19,168,230,.35);
  box-shadow: 0 0 0 5px rgba(19,168,230,.14);
}
[data-theme="dark"] .in:focus{
  box-shadow: 0 0 0 5px rgba(255,255,255,.08);
}
textarea.in{
  min-height:120px;
  resize:vertical;
  font-weight:750;
}

/* Status */
.status{
  margin-top:12px;
  padding:12px;
  border-radius:16px;
  border:1px solid var(--line);
  font-weight:900;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.ok{ background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.28) }
.bad{ background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.25) }

/* =========================
   SKELETON SHIMMER
========================= */
.skeleton{ display:none; margin-top:10px }
.skeleton.show{ display:block }

.skWrap{
  display:grid; gap:10px;
  padding:12px;
  border-radius:16px;
  border:1px solid var(--line);
  background: var(--card2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
[data-theme="dark"] .skWrap{ background: rgba(255,255,255,.06) }

.skRow{
  height:14px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(15,23,42,.08), rgba(15,23,42,.18), rgba(15,23,42,.08));
  background-size:200% 100%;
  animation: shimmer 1.1s var(--ease) infinite;
}
[data-theme="dark"] .skRow{
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.16), rgba(255,255,255,.06));
}
@keyframes shimmer{
  0%{ background-position:0% 0 }
  100%{ background-position:200% 0 }
}

/* =========================
   FOOTER
========================= */
.footer{
  padding:22px 0 46px;
  text-align:center;
  color: var(--muted);
  font-weight:850;
}

/* =========================
   FAB (BACK TO TOP)
========================= */
.fab{
  position:fixed;
  right:18px; bottom:18px;
  z-index:80;
  width:54px; height:54px;
  border-radius: 999px;
  background: var(--fab);
  border:1px solid rgba(255,255,255,.22);
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
  display:grid; place-items:center;
  cursor:pointer;

  opacity:0;
  transform: translateY(12px) scale(.96);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), filter var(--t) var(--ease);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
[data-theme="dark"] .fab{
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
}
.fab.show{ opacity:.88; transform: translateY(0) scale(1) }
.fab:hover{ filter: brightness(1.06) }
.fab:active{ transform: translateY(0) scale(.98) }
.fab i{ color:#fff; font-size:18px }
[data-theme="dark"] .fab i{ color: var(--text) }

/* =========================
   TOAST
========================= */
.toastWrap{
  position:fixed;
  inset:auto 16px 16px 16px;
  z-index:120;
  display:grid;
  gap:10px;
  pointer-events:none;
  justify-items:end;
}
.toast{
  width:min(420px, calc(100vw - 32px));
  pointer-events:auto;
  border-radius: 18px;
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding:12px 12px;
  display:flex; gap:10px; align-items:flex-start;
  transform: translateY(10px);
  opacity:0;
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
[data-theme="dark"] .toast{ background: rgba(14,18,35,.72) }
.toast.show{ transform: translateY(0); opacity:1 }

.toast .ico{
  width:40px; height:40px;
  border-radius:14px;
  display:grid; place-items:center;
  color:#fff;
  flex:0 0 auto;
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
}
.toast.ok .ico{ background: linear-gradient(135deg, rgba(34,197,94,1), rgba(16,185,129,1)); }
.toast.bad .ico{ background: linear-gradient(135deg, rgba(239,68,68,1), rgba(244,63,94,1)); }

.toast b{ display:block }
.toast p{
  margin:2px 0 0;
  color: var(--muted);
  font-weight:850;
  line-height:1.5;
}

.toast .x{
  margin-left:auto;
  width:34px; height:34px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.62);
  display:grid; place-items:center;
  cursor:pointer;
  transition: transform var(--tFast) var(--ease), background var(--tFast) var(--ease);
}
[data-theme="dark"] .toast .x{ background: rgba(255,255,255,.08) }
.toast .x:hover{ transform: translateY(-1px) }
.toast .x:active{ transform: translateY(0) scale(.98) }

/* =========================
   DRAWER + BACKDROP
========================= */
.backdrop{
  position:fixed; inset:0;
  z-index:98;
  background: rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transition: opacity var(--t) var(--ease);
}
.backdrop.show{ opacity:1; pointer-events:auto }

.drawer{
  position:fixed; left:0; top:0; bottom:0;
  z-index:99;
  width:min(360px,86vw);
  background: rgba(255,255,255,.84);
  border-right: 1px solid var(--line);
  backdrop-filter: blur(var(--blur2));
  -webkit-backdrop-filter: blur(var(--blur2));
  transform: translateX(-105%);
  transition: transform var(--t) var(--ease2);
  display:flex; flex-direction:column;
}
[data-theme="dark"] .drawer{ background: rgba(10,14,30,.74) }
.drawer.show{ transform: translateX(0) }

.drawerHead{
  padding:14px 14px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-bottom: 1px solid var(--line);
}
.drawerBody{
  padding:14px;
  display:grid;
  gap:10px;
  overflow:auto;
  overscroll-behavior: contain;
}
.drawerRow{
  padding:12px 12px;
  border-radius: 16px;
  border:1px solid var(--line);
  background: var(--glass2);
  display:flex; align-items:center; gap:10px;
  font-weight:900;
  cursor:pointer;
  user-select:none;
  transition: transform var(--tFast) var(--ease), box-shadow var(--tFast) var(--ease), border-color var(--tFast) var(--ease);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
[data-theme="dark"] .drawerRow{ background: rgba(255,255,255,.06) }
.drawerRow:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
  border-color: rgba(19,168,230,.26);
}
[data-theme="dark"] .drawerRow:hover{
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.18);
}
.drawerRow i{ width:22px; text-align:center }

.drawerFoot{
  margin-top:auto;
  padding:14px;
  border-top:1px solid var(--line);
  color: var(--muted);
  font-weight:900;
  display:grid;
  gap:10px;
  font-size:10px; /* smaller text */
}
.counterBar{ display:flex; gap:8px; flex-wrap:wrap }
.counterPill{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: var(--glass2);
  font-weight:900;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
[data-theme="dark"] .counterPill{ background: rgba(255,255,255,.06) }
.counterPill i{ font-size:10px }

/* =========================
   REVEAL ANIMATION
========================= */
.reveal{
  opacity:0;
  transform: translateY(10px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.reveal.show{ opacity:1; transform: translateY(0) }

/* =========================
   ACTIVE LINK HIGHLIGHT
========================= */
.activeLink{
  box-shadow: 0 10px 24px rgba(15,23,42,.10);
  transform: translateY(-1px);
  border-color: rgba(245,158,11,.30) !important; /* orange highlight like poster */
}
[data-theme="dark"] .activeLink{
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:980px){
  .heroGrid{ grid-template-columns: 1fr }
  .slider{ min-height: 320px }
}
@media (max-width:640px){
  .grid2{ grid-template-columns: 1fr }
  .miniGrid{ grid-template-columns: 1fr }
  .blob{ width:420px; height:420px }
}

/* =========================
   REDUCED MOTION
========================= */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior:auto !important; }
}