/* ═══════════════════════════════════════════════════════
   DARE MARKET v0.18 — COMBINED DESIGN SYSTEM
   Glass + Neumorphism + Minimalism · Blackish-Red bg
═══════════════════════════════════════════════════════ */
:root{
  /* ── Background palette (deep black) ── */
  --bg:     #050505;
  --bg2:    #121212;
  --bg3:    #1a1a1a;
  --bg4:    #262626;

  /* ── Glass surfaces (uniform site-wide, matches notification panel) ── */
  --glass:  rgba(18,18,18,0.80);
  --glass2: rgba(30,30,30,0.86);
  --glass3: rgba(42,42,42,0.92);

  /* ── Borders (minimal hairlines) ── */
  --border:  rgba(255,255,255,0.07);
  --border2: rgba(255,255,255,0.20);

  /* ── Accents (red replaces blue) ── */
  --blue:    #FFFFFF;   /* primary — white. Was #FF0033: this app is black and white. */
  --blue2:   #D9D9D9;   /* secondary — light grey, so gradients still read as one */
  --blue-glow: rgba(255,255,255,0.12);

  /* ── Semantic ── */
  --red:     #FF453A;
  --green:   #00E676;
  --orange:  #FF9F0A;
  --gold:    #FFB547;

  /* ── Text (warm white) ── */
  --t1: #F1F1F1;
  --t2: #AAAAAA;
  --t3: #717171;
  --t4: rgba(242,237,232,0.18);

  /* ── Neumorphic shadows (warm dark) ── */
  --neu-dark:  rgba(0,0,0,0.85);
  --neu-light: rgba(0,0,0,0.3);

  /* ── Layout ── */
  --sw:   240px;
  --r:    16px;
  --blur: blur(20px) saturate(140%);
}

/* ─── RESET ─────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:#050505;color:var(--t1);
}
/* --page-grad kept as an alias for the app background (used by full-page views + as-page modals) */
:root{ --page-grad:#050505; }
.mi{font-family:'Material Icons Round';font-style:normal;font-size:20px;line-height:1;user-select:none;
  letter-spacing:normal;font-variant-ligatures:normal;-webkit-font-feature-settings:'liga';font-feature-settings:'liga';}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2);border-radius:4px;}

/* ─── AURORA BACKGROUND ──────────────────────────────── */
.aurora{
  position:fixed;inset:0;z-index:0;
  pointer-events:none;overflow:hidden;
}
.ab{ display:none !important; } /* removed — caused scroll lag + reddish glow */
.ab1{width:800px;height:800px;background:radial-gradient(circle,rgba(0,0,0,0),transparent 70%);top:-250px;left:-200px;animation-duration:22s;}
.ab2{width:600px;height:600px;background:radial-gradient(circle,rgba(0,0,0,0),transparent 70%);top:30%;right:-150px;animation-duration:16s;animation-delay:-8s;}
.ab3{width:500px;height:500px;background:radial-gradient(circle,rgba(0,0,0,0),transparent 70%);bottom:5%;left:15%;animation-duration:24s;animation-delay:-12s;}
@keyframes afloat{0%{transform:translate(0,0) scale(1)}100%{transform:translate(55px,75px) scale(1.2)}}
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── ANIMATIONS ─────────────────────────────────────── */
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--blue-glow)}50%{box-shadow:0 0 0 8px transparent}}
@keyframes bounceIn{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}}

/* ─── TEXT REVEAL (scroll) ────────────────────────────── */
.rv{opacity:0;transform:translateY(32px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);}
.rv.in{opacity:1;transform:translateY(0);}
.rv-l{opacity:0;transform:translateX(-32px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);}
.rv-l.in{opacity:1;transform:translateX(0);}
.rv-s{opacity:0;transform:scale(.9) translateY(16px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);}
.rv-s.in{opacity:1;transform:scale(1) translateY(0);}
.rv-f{opacity:0;transition:opacity 1s ease;}
.rv-f.in{opacity:1;}
.d1{transition-delay:.07s;}.d2{transition-delay:.14s;}.d3{transition-delay:.21s;}
.d4{transition-delay:.28s;}.d5{transition-delay:.35s;}.d6{transition-delay:.42s;}

/* ═══════════════════════════════════════════════════════
   LOADING SCREEN
═══════════════════════════════════════════════════════ */
#loadScreen{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:18px;
  background:var(--bg);animation:fadeIn .3s ease;
}
.load-logo{
  width:72px;height:72px;border-radius:22px;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 40px rgba(255,255,255,0.08);
  animation:bounceIn .6s cubic-bezier(.34,1.56,.64,1) both;
}
.load-logo .mi{font-size:36px;color:#fff;}
.load-name{font-size:26px;font-weight:700;letter-spacing:-.5px;animation:fadeUp .5s .2s both;}
.spinner{
  width:28px;height:28px;
  border:2.5px solid rgba(255,255,255,0.10);
  border-top-color:var(--blue);border-radius:50%;
  animation:spin .7s linear infinite, fadeIn .4s .3s both;
}
.load-txt{font-size:13px;color:var(--t3);animation:fadeUp .5s .4s both;}

/* ═══════════════════════════════════════════════════════
   AUTH SCREEN
   Glass card + dark neu raise
═══════════════════════════════════════════════════════ */
#authScreen{display:none;min-height:100vh;align-items:center;justify-content:center;padding:24px;}
.auth-box{
  background:#000;
  border:1px solid #fff;border-radius:28px;
  padding:40px 36px;width:100%;max-width:420px;text-align:center;
  animation:scaleIn .4s cubic-bezier(.34,1.56,.64,1) both;
  position:relative;z-index:2;
}
.auth-logo{font-size:32px;font-weight:700;letter-spacing:-.5px;display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:6px;}
.auth-logo-icon{
  width:48px;height:48px;border-radius:14px;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(255,255,255,0.08);
}
.auth-logo-icon .mi{font-size:26px;color:#fff;}
.auth-tagline{color:var(--t3);font-size:13px;margin-bottom:28px;line-height:1.7;}
.auth-tabs{
  display:flex;background:transparent;border-radius:12px;
  padding:4px;margin-bottom:24px;gap:4px;
}
.auth-tab{
  flex:1;padding:9px;font-size:13px;font-weight:600;
  background:transparent;border:none;color:var(--t3);
  cursor:pointer;font-family:inherit;border-radius:9px;transition:all .25s;
}
.auth-tab.active{
  background:rgba(255,255,255,0.08);color:var(--t1);
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.btn-google{
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  background:rgba(255,255,255,0.96);color:#3c4043;
  border:none;border-radius:14px;padding:13px 16px;
  font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;
  margin-bottom:14px;transition:all .2s;
  box-shadow:0 4px 16px rgba(0,0,0,0.35);
}
.btn-google:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,0.45);}
.g-icon{width:20px;height:20px;flex-shrink:0;}
.divider{
  display:flex;align-items:center;gap:10px;
  margin:14px 0;color:var(--t3);font-size:11px;letter-spacing:.5px;text-transform:uppercase;
}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border);}
.auth-input{
  width:100%;
  /* Glass */
  background:rgba(255,255,255,0.05);
  backdrop-filter:var(--blur);
  border:1px solid var(--border);color:var(--t1);
  padding:13px 16px;border-radius:14px;
  font-size:14px;outline:none;font-family:inherit;margin-bottom:10px;
  transition:all .2s;
}
.auth-input:focus{border-color:var(--blue);background:rgba(255,255,255,0.06);}
.auth-input::placeholder{color:var(--t3);}
.btn-fill{
  width:100%;padding:14px;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#0f0f0f;border:none;border-radius:14px;
  font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;
  box-shadow:5px 5px 16px rgba(0,0,0,0.3),-2px -2px 8px rgba(0,0,0,0);
  transition:all .2s;margin-bottom:6px;
}
.btn-fill:hover{transform:translateY(-1px);box-shadow:7px 7px 24px rgba(0,0,0,0.3);}
.btn-fill:active{transform:scale(.98);}
.auth-note{font-size:11px;color:var(--t3);line-height:1.6;margin-top:18px;}
.auth-note a{color:var(--blue2);text-decoration:none;}
.auth-err{
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.08);
  color:#ff6b6b;border-radius:12px;padding:12px 14px;
  font-size:13px;margin-bottom:10px;display:none;text-align:left;
  animation:fadeUp .25s ease both;
}

/* ═══════════════════════════════════════════════════════
   APP SCREEN
═══════════════════════════════════════════════════════ */
/* No z-index here → #appScreen must NOT create a stacking context, otherwise the
   topbar/sidebar/profile menus get trapped beneath the body-level detail overlays */
#appScreen{display:none;position:relative;}

/* ═══════════════════════════════════════════════════════
   TOPBAR — Glass frosted + red accent
═══════════════════════════════════════════════════════ */
.topbar{
  /* Always above EVERY page overlay (detail z150, shorts z400, …) so the
     hamburger/search/profile menus open ON TOP of any page, never behind it */
  position:fixed;top:0;left:0;right:0;z-index:9000;height:56px;
  /* Flat black. This was rgba(10,6,6,.80) with a blur — a red-tinted sheet of
     glass, which is both of the things this app dropped. */
  background:#000;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 16px;gap:14px;
  /* Subtle neu shadow */
  box-shadow:0 4px 20px rgba(0,0,0,0.5),inset 0 -1px 0 var(--border);
}
.topbar-left{display:flex;align-items:center;gap:12px;min-width:220px;}
.icon-btn{
  width:38px;height:38px;
  /* Glass */
  background:rgba(255,255,255,0.04);
  backdrop-filter:var(--blur);
  border:1px solid var(--border);border-radius:50%;
  cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t1);
  /* Neu raise */
  box-shadow:3px 3px 8px var(--neu-dark),-2px -2px 5px var(--neu-light);
  transition:all .2s;
}
.icon-btn:hover{background:rgba(255,255,255,0.07);border-color:var(--border2);transform:scale(1.05);}
.icon-btn:active{box-shadow:inset 2px 2px 5px var(--neu-dark),inset -1px -1px 3px var(--neu-light);transform:scale(.97);}
.logo{
  font-size:20px;font-weight:700;letter-spacing:-.4px;
  display:flex;align-items:center;gap:8px;cursor:pointer;
  font-family:'Roboto',sans-serif;
}
.logo-icon{
  width:32px;height:32px;border-radius:10px;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(255,255,255,0.08),3px 3px 8px var(--neu-dark),-2px -2px 5px var(--neu-light);
}
.logo-icon .mi{font-size:18px;color:#fff;}
.search-wrap{
  flex:1;max-width:560px;margin:0 auto;
  display:flex;align-items:center;
  /* Glass inset (neu pressed) */
  background:rgba(255,255,255,0.04);
  box-shadow:inset 3px 3px 8px rgba(0,0,0,0.5),inset -2px -2px 5px var(--neu-light);
  border:1px solid var(--border);
  border-radius:50px;padding:0 16px;gap:8px;
  transition:all .2s;backdrop-filter:var(--blur);
}
.search-wrap:focus-within{
  border-color:rgba(255,255,255,0.08);background:rgba(255,255,255,0.08);
  box-shadow:inset 3px 3px 8px rgba(0,0,0,0.5),0 0 0 3px rgba(255,255,255,0.08);
}
.search-wrap input{
  flex:1;background:transparent;border:none;color:var(--t1);
  padding:9px 0;font-size:14px;outline:none;font-family:inherit;
}
.search-wrap input::placeholder{color:var(--t3);}
.search-wrap button{background:none;border:none;color:var(--t3);cursor:pointer;display:flex;align-items:center;padding:0;}
.topbar-right{display:flex;align-items:center;gap:8px;margin-left:auto;}
.btn-post{
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#0f0f0f;border:none;padding:9px 18px;border-radius:50px;
  font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;gap:6px;white-space:nowrap;
  box-shadow:4px 4px 14px rgba(0,0,0,0.3),-2px -2px 8px var(--neu-light);
  transition:all .2s;
}
.btn-post:hover{transform:translateY(-1px);box-shadow:6px 6px 22px rgba(0,0,0,0.3);}
.btn-post:active{transform:scale(.97);}
.btn-post .mi{font-size:17px;}
.user-menu{position:relative;}
.user-av{
  width:36px;height:36px;border-radius:50%;
  background:#373737;
  border:2px solid rgba(255,255,255,0.08);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;cursor:pointer;overflow:hidden;flex-shrink:0;
  box-shadow:3px 3px 8px var(--neu-dark),-2px -2px 5px var(--neu-light);
  transition:all .2s;
}
.user-av:hover{box-shadow:0 0 0 3px rgba(255,255,255,0.08);}
.user-av img{width:100%;height:100%;object-fit:cover;}
.dropdown{
  position:absolute;top:48px;right:0;
  background:rgba(14,8,8,0.94);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border2);border-radius:20px;
  min-width:230px;padding:8px;display:none;z-index:300;
  box-shadow:10px 10px 32px var(--neu-dark),-4px -4px 14px var(--neu-light),inset 0 1px 0 rgba(255,255,255,0.07);
}
.dropdown.open{display:block;animation:scaleIn .22s cubic-bezier(.34,1.56,.64,1) both;}
.dd-info{padding:12px 14px 14px;border-bottom:1px solid var(--border);margin-bottom:6px;}
.dd-name{font-size:14px;font-weight:600;}
.dd-email{font-size:12px;color:var(--t3);margin-top:2px;}
.dd-item{
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-radius:12px;cursor:pointer;font-size:13px;color:var(--t1);
  transition:all .15s;
}
.dd-item:hover{background:rgba(255,255,255,0.08);}
.dd-item .mi{font-size:18px;color:var(--t3);}
.dd-item.danger{color:var(--red);}
.dd-item.danger .mi{color:var(--red);}

/* ═══════════════════════════════════════════════════════
   SIDEBAR — Dark minimal
═══════════════════════════════════════════════════════ */
.sidebar{
  position:fixed;top:56px;left:0;bottom:0;width:var(--sw);
  /* Same as the topbar above, and the same reason. */
  background:#000;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;justify-content:space-between;padding:8px 0;
  z-index:90;
}
.sb-top{display:flex;flex-direction:column;gap:2px;padding:0 10px;}
.sb-bottom{padding:0 10px 8px;}
.sb-prof-av{
  width:28px;height:28px;border-radius:50%;
  background:#373737;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden;
  box-shadow:2px 2px 6px var(--neu-dark),-1px -1px 4px var(--neu-light);
}
.sb-prof-av img{width:100%;height:100%;object-fit:cover;}
.nav-item{
  display:flex;align-items:center;gap:16px;padding:10px 12px;
  cursor:pointer;border-radius:10px;margin:0 4px;
  font-size:14px;font-weight:400;color:var(--t1);
  transition:all .15s;
}
.nav-item:hover{background:rgba(255,255,255,0.08);}
.nav-item.active{
  background:rgba(255,255,255,0.08);font-weight:600;
  /* Neu subtle raise */
  box-shadow:3px 3px 8px var(--neu-dark),-2px -2px 5px var(--neu-light);
}
.nav-item .mi{font-size:20px;color:var(--t1);flex-shrink:0;}
.nav-item.active .mi{color:var(--blue);}
.nav-lbl{font-size:14px;font-weight:400;}

/* ═══════════════════════════════════════════════════════
   MAIN + PAGES
═══════════════════════════════════════════════════════ */
.main{margin-left:var(--sw);margin-top:56px;padding:20px 24px;position:relative;z-index:2;}
.page{display:none;}
/* Desktop page enter: rises from below. Its own keyframe (not the shared fadeUp,
   which 13 other elements use) so page timing can be tuned on its own. */
@keyframes pgInUp{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}
.page.active{display:block;animation:pgInUp .42s cubic-bezier(.25,.8,.25,1) both;}

/* Mobile page transitions: forward = slide in from right · back = slide in from left (L→R) */
@keyframes pgInRight{from{transform:translateX(100%);opacity:.45;}to{transform:translateX(0);opacity:1;}}
@keyframes pgInLeft{from{transform:translateX(-100%);opacity:.45;}to{transform:translateX(0);opacity:1;}}
@media(max-width:768px){
  .main{overflow-x:clip;}
  .page.active{animation:none;}
  /* .46s on a gentler curve. The old .36s cubic-bezier(.16,1,.3,1) was an
     expo-style ease-out that covered ~90% of the distance in its first third,
     so it read as a snap rather than a slide however long the duration was —
     softening the curve matters more here than the extra time. */
  .page.active.nav-fwd{animation:pgInRight .46s cubic-bezier(.25,.8,.25,1) both;}
  .page.active.nav-back{animation:pgInLeft  .46s cubic-bezier(.25,.8,.25,1) both;}
}

/* ═══════════════════════════════════════════════════════
   CHIPS BAR — Glass + minimal mono font
═══════════════════════════════════════════════════════ */
.chips-bar{
  display:flex;gap:8px;overflow-x:auto;padding:8px 0 16px;margin-bottom:8px;
  scrollbar-width:none;
}
.chips-bar::-webkit-scrollbar{display:none;}
.chip{
  /* Glass bg */
  background:rgba(255,255,255,0.04);
  backdrop-filter:var(--blur);
  /* Neu raise */
  box-shadow:3px 3px 8px var(--neu-dark),-2px -2px 5px var(--neu-light);
  /* Min hairline + mono */
  border:1px solid var(--border);
  color:var(--t2);
  padding:7px 16px;border-radius:50px;
  font-size:12px;font-weight:500;font-family:'Roboto',sans-serif;
  letter-spacing:.3px;cursor:pointer;white-space:nowrap;
  transition:all .2s;flex-shrink:0;
}
.chip:hover{color:var(--t1);border-color:var(--border2);}
.chip:active{box-shadow:inset 2px 2px 6px var(--neu-dark),inset -1px -1px 4px var(--neu-light);transform:scale(.97);}
.chip.active{
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.08);
  color:var(--blue);
  box-shadow:inset 2px 2px 6px rgba(0,0,0,0.5),0 0 16px rgba(255,255,255,0.08);
}

/* ═══════════════════════════════════════════════════════
   SECTION HEADERS
═══════════════════════════════════════════════════════ */
.sec-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.sec-title{
  font-size:18px;font-weight:700;letter-spacing:-.3px;
  display:flex;align-items:center;gap:10px;
  font-family:'Roboto',sans-serif;
}
.sec-dot{
  width:8px;height:8px;background:var(--blue);border-radius:50%;
  box-shadow:0 0 10px var(--blue);animation:secDot 2s ease-in-out infinite;
}
/* opacity+transform = compositor only (old box-shadow pulse repainted each frame) */
@keyframes secDot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.55;transform:scale(.82);}}

/* Home section headers */
.home-section{margin-bottom:44px;animation:fadeUp .4s ease both;}
.home-sec-hdr{display:flex;align-items:center;gap:10px;margin-bottom:18px;padding:0 2px;}
.home-sec-dot{width:10px;height:10px;border-radius:50%;background:var(--blue);flex-shrink:0;box-shadow:0 0 8px var(--blue);}
.home-sec-title{
  font-size:17px;font-weight:700;color:var(--t1);
  font-family:'Roboto',sans-serif;
}
.home-sec-sub{font-size:12px;color:var(--t3);}
.home-sec-viewall{margin-left:auto;font-size:13px;color:var(--blue2);cursor:pointer;font-weight:500;flex-shrink:0;}
.home-sec-viewall:hover{text-decoration:underline;}

/* ═══════════════════════════════════════════════════════
   EMPTY STATES
═══════════════════════════════════════════════════════ */
.empty{
  background:var(--glass);backdrop-filter:var(--blur);
  border:1px dashed var(--border2);border-radius:24px;
  padding:64px 24px;text-align:center;margin-bottom:24px;
  box-shadow:8px 8px 22px var(--neu-dark),-3px -3px 10px var(--neu-light),inset 0 1px 0 rgba(255,255,255,0.05);
}
.empty .mi{font-size:52px;color:var(--t3);display:block;margin-bottom:16px;opacity:.5;}
.empty-title{font-size:22px;font-weight:700;color:var(--t2);margin-bottom:8px;letter-spacing:-.3px;}
.empty-desc{font-size:14px;color:var(--t3);line-height:1.7;max-width:300px;margin:0 auto 22px;}
.btn-empty{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#0f0f0f;border:none;padding:12px 24px;border-radius:50px;
  font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;
  box-shadow:5px 5px 16px rgba(0,0,0,0.3);transition:all .2s;
}
.btn-empty:hover{transform:translateY(-2px);box-shadow:7px 7px 24px rgba(0,0,0,0.3);}
.btn-empty .mi{font-size:18px;}

/* ═══════════════════════════════════════════════════════
   HOME VIDEO GRID (yt-grid)
   Glass cards + Neu depth + Min editorial type
═══════════════════════════════════════════════════════ */
.yt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px 16px;padding-bottom:40px;}
.yt-card{
  cursor:pointer;
  /* Glass */
  background:var(--glass);backdrop-filter:var(--blur);
  border:1px solid var(--border);border-radius:var(--r);overflow:hidden;
  /* Neu raise */
  box-shadow:8px 8px 22px var(--neu-dark),-3px -3px 10px var(--neu-light),inset 0 1px 0 rgba(255,255,255,0.05);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,border-color .25s;
  position:relative;
}
.yt-card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--blue2));
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.22,1,.36,1);pointer-events:none;
}
.yt-card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,0.08);box-shadow:12px 12px 34px var(--neu-dark),-5px -5px 16px var(--neu-light);}
.yt-card:hover::after{transform:scaleX(1);}
.yt-thumb{position:relative;aspect-ratio:16/9;border-radius:var(--r) var(--r) 0 0;overflow:hidden;background:var(--bg3);}
.yt-thumb video{width:100%;height:100%;object-fit:cover;display:block;}
.yt-thumb-bg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.yt-thumb-bg .mi{font-size:52px;color:rgba(255,255,255,0.08);}
.yt-play-over{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.35);opacity:0;transition:opacity .2s;}
.yt-card:hover .yt-play-over{opacity:1;}
.yt-play-over .mi{font-size:52px;color:#fff;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6));}
/* Explore page: calmer cards — no hover zoom/lift, no play overlay */
#pageExplore .yt-card:hover{transform:none;box-shadow:none;border-color:rgba(255,255,255,0.04);}
#pageExplore .yt-card::after{display:none;}
#pageExplore .yt-card:hover .yt-play-over{opacity:0;}
.yt-bounty{
  position:absolute;top:8px;right:8px;
  background:rgba(0,0,0,.72);color:var(--green);
  font-size:14px;font-weight:800;padding:4px 11px;border-radius:8px;letter-spacing:.3px;
  border:1px solid rgba(255,255,255,.12);
}
/* ═══ Active Dare Card (shared everywhere active dares show) ═══ */
.active-dare-grid{
  display:grid;gap:16px 14px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  padding:4px 0;
}
/* No card chrome — transparent like YouTube video cards (point 1) */
.active-dare-card{
  position:relative;background:transparent;border:none;border-radius:0;
  overflow:visible;cursor:pointer;
}
.active-dare-card:hover{transform:none;box-shadow:none;border:none;}
.adc-thumb{
  position:relative;width:100%;aspect-ratio:16/9;
  background:#1f1f1f;overflow:hidden;border-radius:12px;
}
.adc-thumb>img{width:100%;height:100%;object-fit:cover;display:block;}
.adc-thumb-bg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.adc-thumb-bg .mi{font-size:46px;}
/* expiry: top-left */
.adc-expiry{
  position:absolute;top:8px;left:8px;display:inline-flex;align-items:center;gap:3px;
  background:rgba(0,0,0,.7);backdrop-filter:var(--blur);
  color:#ff6b6b;font-size:11px;font-weight:700;padding:3px 9px 3px 7px;border-radius:50px;
  border:1px solid rgba(255,107,107,.32);
}
.adc-expiry .mi{font-size:13px;}
/* bounty: top-right */
.adc-bounty{
  position:absolute;top:8px;right:8px;
  background:rgba(0,0,0,.72);color:var(--green);
  font-size:14px;font-weight:800;padding:4px 11px;border-radius:8px;letter-spacing:.3px;
  border:1px solid rgba(255,255,255,.12);
}
.adc-pin{
  position:absolute;bottom:8px;left:8px;width:24px;height:24px;border-radius:50%;
  background:rgba(255,159,10,.9);display:flex;align-items:center;justify-content:center;
}
.adc-pin .mi{font-size:14px;color:#1a1206;}
/* Below-thumb meta reuses the long-video card style (same font/size/layout everywhere) */
.active-dare-card .yt-info{display:flex;gap:12px;padding:12px 4px 0;align-items:flex-start;}
.active-dare-card .yt-av{width:36px;height:36px;border-radius:50%;background:#373737;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:15px;flex-shrink:0;overflow:hidden;}
.active-dare-card .yt-av img{width:100%;height:100%;object-fit:cover;}
.active-dare-card .yt-title{font-size:15px;font-weight:500;color:#f1f1f1;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:'Roboto',sans-serif;}
.active-dare-card .yt-sub{font-size:13px;color:#aaa;margin-top:4px;display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
/* 3-dots menu (hover on desktop, always-visible on mobile) */
.adc-menu-wrap{position:relative;flex-shrink:0;margin-left:auto;}
.adc-menu-wrap.open{z-index:60;}
.adc-dots{width:32px;height:32px;border-radius:50%;border:none;background:transparent;color:var(--t2,#aaa);
  cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s,background .15s;}
.active-dare-card:hover .adc-dots{opacity:1;}
.adc-dots:hover{background:rgba(255,255,255,.1);color:#fff;}
.adc-dots .mi{font-size:20px;}
.adc-menu{position:absolute;top:36px;right:0;min-width:140px;background:#282828;
  border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.5);
  padding:6px;display:none;z-index:60;}
.adc-menu-wrap.open .adc-menu{display:block;}
.adc-menu button{width:100%;display:flex;align-items:center;gap:10px;background:transparent;border:none;
  color:#f1f1f1;font-size:14px;font-family:'Roboto',sans-serif;padding:9px 12px;border-radius:6px;cursor:pointer;text-align:left;}
.adc-menu button:hover{background:rgba(255,255,255,.08);}
.adc-menu button .mi{font-size:18px;}
@media(max-width:768px){ .adc-dots{opacity:1;} }
@media(max-width:560px){
  /* Match home-page long-video size: full-width single column on mobile */
  .active-dare-grid{grid-template-columns:1fr;gap:18px;}
}
.yt-info{display:flex;gap:12px;align-items:flex-start;padding:12px;}
.yt-av{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:#373737;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;
  box-shadow:2px 2px 6px var(--neu-dark);
}
.yt-meta{flex:1;min-width:0;}
/* DM Serif for video title */
.yt-title{
  font-family:'Roboto',sans-serif;font-size:14px;font-style:normal;
  line-height:1.4;margin-bottom:5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.yt-sub{font-size:11px;color:var(--t3);display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-family:'Roboto',sans-serif;}
.yt-tag{color:var(--blue2);font-weight:500;}
.yt-dot{width:3px;height:3px;background:var(--t3);border-radius:50%;display:inline-block;}

/* ═══════════════════════════════════════════════════════
   DARE LIST — MASONRY LAYOUT
   3 columns, break-inside:avoid
   Every card = Glass + Neu + Min
═══════════════════════════════════════════════════════ */
.dare-list{
  /* MASONRY */
  columns:3;column-gap:16px;
  padding-bottom:40px;
}
@media(max-width:960px){.dare-list{columns:2;}}
@media(max-width:580px){.dare-list{columns:1;}}

.dare-list-card{
  break-inside:avoid;
  margin-bottom:16px;
  /* GLASS */
  background:var(--glass);backdrop-filter:var(--blur);
  border:1px solid var(--border);
  border-radius:18px;overflow:hidden;
  /* Revert to column direction for masonry */
  display:flex;flex-direction:column;
  /* NEU raise */
  box-shadow:8px 8px 22px var(--neu-dark),-3px -3px 10px var(--neu-light),inset 0 1px 0 rgba(255,255,255,0.05);
  cursor:pointer;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,border-color .25s;
  position:relative;
}
.dare-list-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.10),transparent);
  pointer-events:none;
}
.dare-list-card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--blue2));
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.22,1,.36,1);pointer-events:none;z-index:2;
}
.dare-list-card:hover{
  transform:translateY(-6px);
  border-color:rgba(255,255,255,0.08);
  box-shadow:12px 12px 34px var(--neu-dark),-5px -5px 16px var(--neu-light);
}
.dare-list-card:hover::after{transform:scaleX(1);}

/* Thumb — full width for masonry column cards */
.dare-list-thumb{
  width:100%;height:170px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  /* Neu inset on thumb */
  box-shadow:inset 3px 3px 10px rgba(0,0,0,0.6),inset -2px -2px 6px var(--neu-light);
}
.dare-list-thumb .mi{font-size:48px;color:rgba(255,255,255,0.12);}
.dare-list-thumb img{width:100%;height:100%;object-fit:cover;display:block;}

/* Min cat label */
.dare-list-cat{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1px;
  padding:3px 10px;border-radius:50px;display:inline-block;margin-bottom:8px;
  font-family:'Roboto',sans-serif;
}
.dare-list-body{
  flex:1;padding:14px 16px;
  display:flex;flex-direction:column;justify-content:space-between;gap:10px;
}
/* DM Serif dare title */
.dare-list-title{
  font-family:'Roboto',sans-serif;
  font-size:16px;font-style:normal;
  line-height:1.35;margin-bottom:4px;color:var(--t1);
}
.dare-list-desc{
  font-size:12px;color:var(--t3);line-height:1.5;margin-bottom:8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-family:'Roboto',sans-serif;
}
.dare-list-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.dare-list-meta{font-size:11px;color:var(--t3);display:flex;gap:8px;align-items:center;font-family:'Roboto',sans-serif;}
/* Bebas bounty number */
.dare-list-bounty{
  font-family:'Roboto',sans-serif;
  font-size:22px;letter-spacing:1px;color:var(--gold);line-height:1;
}
/* Dare tag pill */
.dare-tag-pill{
  display:inline-block;font-size:10px;font-weight:500;
  padding:2px 9px;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.08);
  color:var(--blue2);border-radius:10px;
  font-family:'Roboto',sans-serif;letter-spacing:.2px;
  transition:all .2s;
}
.dare-list-card:hover .dare-tag-pill{border-color:rgba(255,255,255,0.08);color:var(--blue);}

/* Buttons on dare cards */
.btn-accept{
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#0f0f0f;border:none;padding:8px 18px;border-radius:50px;
  font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;
  box-shadow:4px 4px 12px rgba(0,0,0,0.3);
  transition:all .2s;
}
.btn-accept:hover{transform:translateY(-1px);box-shadow:5px 5px 18px rgba(0,0,0,0.3);}
.btn-accept:active{transform:scale(.97);}
.btn-yours{
  background:rgba(255,255,255,0.04);color:var(--t3);
  border:1px solid var(--border);padding:8px 16px;border-radius:50px;
  font-size:12px;font-weight:600;cursor:default;font-family:inherit;
  box-shadow:2px 2px 6px var(--neu-dark),-1px -1px 4px var(--neu-light);
}
.btn-proof{
  background:rgba(0,230,118,0.10);color:var(--green);
  border:1px solid rgba(0,230,118,0.3);padding:8px 16px;border-radius:50px;
  font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:5px;
  transition:all .2s;
}
.btn-proof:hover{background:rgba(0,230,118,0.18);}
.btn-proof .mi,.btn-proof-done .mi{font-size:15px;}
.btn-proof-done{
  background:rgba(0,230,118,0.06);color:var(--green);
  border:1px solid rgba(0,230,118,0.2);padding:8px 16px;border-radius:50px;
  font-size:12px;font-weight:600;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:5px;cursor:default;
}

/* ═══════════════════════════════════════════════════════
   OLD DARE GRID (profile tabs) — keep functional
═══════════════════════════════════════════════════════ */
.dare-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px;margin-bottom:32px;}
.dare-card{
  background:var(--glass);backdrop-filter:var(--blur);
  border:1px solid var(--border);border-radius:20px;overflow:hidden;cursor:pointer;
  box-shadow:8px 8px 22px var(--neu-dark),-3px -3px 10px var(--neu-light),inset 0 1px 0 rgba(255,255,255,0.05);
  transition:all .3s cubic-bezier(.4,0,.2,1);
}
.dare-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,0.08);box-shadow:12px 12px 32px var(--neu-dark),-5px -5px 16px var(--neu-light);}
.card-thumb{width:100%;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.card-thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 30%,rgba(0,0,0,0.5));}
.card-thumb .mi{font-size:44px;color:rgba(255,255,255,0.10);z-index:1;}
.cat-badge{position:absolute;top:12px;left:12px;z-index:2;font-size:10px;font-weight:700;padding:4px 10px;border-radius:50px;letter-spacing:.5px;text-transform:uppercase;backdrop-filter:var(--blur);border:1px solid rgba(255,255,255,0.15);font-family:'Roboto',sans-serif;}
.bounty-tag{position:absolute;bottom:12px;right:12px;z-index:2;background:rgba(255,255,255,0.08);backdrop-filter:var(--blur);color:#fff;font-size:16px;font-weight:700;padding:5px 13px;border-radius:50px;font-family:'Roboto',sans-serif;letter-spacing:1px;}
.accepted-badge{position:absolute;top:12px;right:12px;z-index:2;background:rgba(0,230,118,0.85);backdrop-filter:var(--blur);color:#fff;font-size:10px;font-weight:700;padding:4px 10px;border-radius:50px;display:flex;align-items:center;gap:3px;border:1px solid rgba(0,230,118,0.4);}
.accepted-badge .mi{font-size:12px;}
.card-body{padding:16px;}
.card-title{font-family:'Roboto',sans-serif;font-size:14px;font-style:normal;line-height:1.5;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.card-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.card-creator{font-size:12px;color:var(--t3);display:flex;align-items:center;gap:6px;font-family:'Roboto',sans-serif;}
.creator-dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0;}
.card-stats{display:flex;gap:14px;font-size:12px;color:var(--t3);margin-bottom:14px;}
.card-stat{display:flex;align-items:center;gap:4px;}
.card-stat .mi{font-size:14px;}

/* ═══════════════════════════════════════════════════════
   VIDEO PLAY MODAL
═══════════════════════════════════════════════════════ */
.video-modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.95);backdrop-filter:var(--blur);
  z-index:500;display:flex;align-items:center;justify-content:center;flex-direction:column;
  padding:20px;opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.video-modal-overlay.open{opacity:1;pointer-events:all;}
.video-modal-inner{width:100%;max-width:820px;}
.video-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.video-modal-title{font-size:16px;font-weight:700;color:#fff;font-family:'Roboto',sans-serif;}
.video-modal-close{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  border-radius:50%;width:38px;height:38px;display:flex;align-items:center;
  justify-content:center;cursor:pointer;color:#fff;transition:background .2s;
  box-shadow:2px 2px 6px var(--neu-dark);
}
.video-modal-close:hover{background:rgba(255,255,255,.18);}
.video-modal-close .mi{font-size:20px;}
.video-modal-player{width:100%;border-radius:16px;background:#000;max-height:68vh;display:block;}
.video-modal-info{
  margin-top:14px;padding:14px 16px;
  background:var(--glass);border:1px solid var(--border);border-radius:14px;
  display:flex;gap:12px;align-items:center;
  box-shadow:4px 4px 12px var(--neu-dark),-2px -2px 6px var(--neu-light);
}
.video-modal-av{width:40px;height:40px;border-radius:50%;flex-shrink:0;background:#373737;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;color:#fff;}
.video-modal-meta{flex:1;}
.video-modal-dare{font-size:13px;font-weight:600;color:#fff;margin-bottom:3px;font-family:'Roboto',sans-serif;}
.video-modal-sub{font-size:12px;color:rgba(255,255,255,.45);font-family:'Roboto',sans-serif;}

/* ═══════════════════════════════════════════════════════
   SHORTS — Dark Neumorphism + Glass
═══════════════════════════════════════════════════════ */
.shorts-row{
  display:flex;gap:12px;overflow-x:auto;padding-bottom:12px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.08) transparent;
}
.shorts-row::-webkit-scrollbar{height:3px;}
.shorts-row::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:2px;}
.short-card{
  flex-shrink:0;width:155px;cursor:pointer;border-radius:16px;overflow:hidden;
  /* Glass */
  background:var(--glass);backdrop-filter:var(--blur);
  border:1px solid var(--border);
  /* Neu raise */
  box-shadow:6px 6px 16px var(--neu-dark),-3px -3px 9px var(--neu-light),inset 0 1px 0 rgba(255,255,255,0.05);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,border-color .25s;
  position:relative;
}
.short-card:hover{
  transform:scale(1.05);
  border-color:rgba(255,255,255,0.08);
  box-shadow:10px 10px 26px var(--neu-dark),-4px -4px 12px var(--neu-light);
}
.short-card:active{
  box-shadow:inset 3px 3px 10px var(--neu-dark),inset -2px -2px 6px var(--neu-light);
  transform:scale(.97);
}
.short-thumb{
  width:155px;height:276px;
  /* Neu inset */
  background:var(--bg3);
  box-shadow:inset 3px 3px 10px rgba(0,0,0,0.6),inset -2px -2px 6px var(--neu-light);
  overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative;
}
.short-thumb::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.03) 0%,transparent 60%);
  pointer-events:none;
}
.short-thumb video{width:100%;height:100%;object-fit:cover;pointer-events:none;}
.short-thumb-bg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.short-thumb-bg .mi{font-size:52px;opacity:.4;}
.short-play-over{position:absolute;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;}
.short-card:hover .short-play-over{opacity:1;}
.short-play-over .mi{font-size:44px;color:#fff;}
.short-bounty-tag{
  position:absolute;top:9px;right:9px;
  background:rgba(0,0,0,.72);color:var(--green);
  font-size:12px;font-weight:800;padding:3px 10px;border-radius:8px;letter-spacing:.3px;
  border:1px solid rgba(255,255,255,.12);
}
.short-dur-tag{
  position:absolute;bottom:9px;right:9px;
  background:rgba(0,0,0,.65);backdrop-filter:var(--blur);
  color:#fff;font-size:10px;font-weight:600;padding:2px 7px;border-radius:6px;
  font-family:'Roboto',sans-serif;
}
.short-info{padding:10px 12px 12px;}
.short-title{
  font-family:'Roboto',sans-serif;font-style:normal;
  font-size:12px;line-height:1.4;color:var(--t1);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.short-meta{font-size:11px;color:var(--t3);margin-top:4px;font-family:'Roboto',sans-serif;}

/* ═══════════════════════════════════════════════════════
   PROFILE
═══════════════════════════════════════════════════════ */
/* Desktop: center the whole profile block (Instagram-style), no banner box. */
#pageProfile{max-width:935px;margin:0 auto;}
/* Instagram-style header: big avatar (left) · name/bio/actions (right), vertically centered */
.profile-header{display:flex;align-items:center;gap:46px;padding:26px 12px;position:relative;z-index:1;}
.profile-pic-wrap{position:relative;flex-shrink:0;}
.profile-pic{
  width:148px;height:148px;border-radius:50%;
  background:#373737;
  /* was a 4px ring in the page colour, which is invisible on the page */
  border:2px solid #fff;
  display:flex;align-items:center;justify-content:center;
  font-size:56px;font-weight:700;color:#fff;overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,0.6),4px 4px 12px var(--neu-dark);
  cursor:pointer;
}
.profile-pic img{width:100%;height:100%;object-fit:cover;}

/* Profile photo fullscreen viewer (lightbox) */
.photo-viewer{position:fixed;inset:0;z-index:9800;background:rgba(0,0,0,.92);
  display:none;align-items:center;justify-content:center;cursor:zoom-out;
  backdrop-filter:blur(8px) !important;-webkit-backdrop-filter:blur(8px) !important;}
.photo-viewer.open{display:flex;}
.photo-viewer img{max-width:92vw;max-height:86vh;border-radius:14px;object-fit:contain;cursor:default;
  box-shadow:0 24px 70px rgba(0,0,0,.7);}
.pv-close{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid var(--border);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;}
.pv-close:hover{background:rgba(255,255,255,.22);}
.profile-info{flex:1;padding-top:8px;}
.profile-name{font-size:22px;font-weight:700;line-height:1.2;letter-spacing:-.4px;font-family:'Roboto',sans-serif;}
.profile-handle{font-size:13px;color:var(--t3);margin-top:3px;font-family:'Roboto',sans-serif;}
.profile-bio{font-size:13px;color:var(--t2);margin-top:6px;line-height:1.5;max-width:500px;}
.profile-provider{display:inline-block;font-size:10px;font-weight:700;padding:3px 10px;border-radius:50px;background:rgba(255,255,255,0.08);color:var(--blue2);margin-top:6px;text-transform:uppercase;letter-spacing:.6px;border:1px solid rgba(255,255,255,0.08);font-family:'Roboto',sans-serif;}
.profile-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
.btn-customize{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,0.05);color:var(--t1);border:1px solid var(--border);
  padding:9px 18px;border-radius:20px;font-size:13px;font-weight:600;
  cursor:pointer;font-family:inherit;transition:all .15s;
  box-shadow:3px 3px 8px var(--neu-dark),-2px -2px 5px var(--neu-light);
}
.btn-customize:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.08);}
.btn-customize .mi{font-size:18px;}

/* ── Profile: 3-option row — Edit Profile · Followers · Following (identical design) ── */
.profile-actions{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap;align-items:center;}
.prof-edit-btn, .prof-count-box{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;
  background:var(--glass);border:1px solid var(--border);border-radius:12px;
  padding:12px 22px;min-height:46px;font-family:inherit;
  transition:background .15s,border-color .15s;
  box-shadow:3px 3px 8px var(--neu-dark),-2px -2px 5px var(--neu-light);}
.prof-edit-btn:hover, .prof-count-box:hover{background:var(--glass2);border-color:var(--border2);}
.prof-edit-btn{color:var(--t1);font-weight:700;font-size:14px;}
.pcb-v{font-size:16px;font-weight:800;color:var(--t1);font-family:'Roboto',sans-serif;}
.pcb-l{font-size:13px;color:var(--t3);font-weight:600;}

/* X (Twitter) logo — replaces the old hashtag/tag icon */
.pe-x-logo{font-family:'Roboto',sans-serif;font-weight:900;font-size:18px;color:var(--t3);
  width:20px;text-align:center;flex-shrink:0;line-height:1;}
.psoc-x{font-family:'Roboto',sans-serif;font-weight:900;font-size:15px;line-height:1;}

/* ── Topbar profile mode (mobile): Back · socials · Settings in the SAME glassy topbar ── */
.topbar-profile{display:none;align-items:center;gap:8px;flex:1;}
.tp-socials{display:flex;flex:1;justify-content:center;gap:10px;margin:0 !important;}
.tp-socials .psocial{text-decoration:none;}

/* ── Topbar gear (desktop: replaces avatar on profile page) ──
   :not(.detail-open):not(.shorts-open) → topbar stays NORMAL when a video/dare/shorts
   overlay is open over the profile (topbar only changes on the bare profile page). */
.topbar-gear{display:none;}
@media(min-width:769px){
  body.profile-open:not(.detail-open):not(.shorts-open) .topbar-gear{display:flex;}
  body.profile-open:not(.detail-open):not(.shorts-open) .user-menu{display:none;}
}
/* Mobile profile: normal topbar controls swap out, profile controls swap in (same glassy bar) */
@media(max-width:768px){
  body.profile-open:not(.detail-open):not(.shorts-open) .topbar-profile{display:flex;}
  body.profile-open:not(.detail-open):not(.shorts-open) .topbar-left,
  body.profile-open:not(.detail-open):not(.shorts-open) .search-wrap,
  body.profile-open:not(.detail-open):not(.shorts-open) .search-icon-btn,
  body.profile-open:not(.detail-open):not(.shorts-open) .topbar-right{display:none !important;}
}

/* ── Settings menu rows (Edit Profile · Notifications) ── */
.set-menu-row{display:flex;align-items:center;gap:12px;width:100%;background:transparent;border:none;
  border-bottom:1px solid var(--border);color:var(--t1);padding:14px 2px;cursor:pointer;font-family:inherit;}
.set-menu-row:hover{background:var(--glass2);border-radius:8px;}
.set-menu-row .smr-ic{font-size:20px;color:var(--t2);}
.smr-t{flex:1;text-align:left;font-size:14px;font-weight:600;}
.set-menu-row .smr-arrow{font-size:20px;color:var(--t3);}

/* ── Follow-list: search box + per-row Follow/Unfollow button ── */
.fl-search{display:flex;align-items:center;gap:8px;background:var(--glass2);border:1px solid var(--border);
  border-radius:10px;padding:8px 12px;margin-bottom:10px;}
.fl-search .mi{font-size:18px;color:var(--t3);}
.fl-search input{flex:1;background:none;border:none;outline:none;color:var(--t1);font-size:13px;font-family:inherit;}
.fl-follow{flex-shrink:0;background:var(--t1);color:#0a0a0a;border:none;border-radius:50px;padding:7px 16px;
  font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:opacity .15s;}
.fl-follow:hover{opacity:.85;}
.fl-follow.following{background:var(--glass);color:var(--t1);border:1px solid var(--border2);}

/* ── Skeleton loading (shimmer) — mirrors the real card UI (.feed-longs > .yt-card) ── */
/* Sweep runs on the compositor (transform only) — NO per-frame repaint, unlike the
   old background-position shimmer which repainted every skeleton on every frame. */
@keyframes skelSweep{100%{transform:translateX(100%);}}
.skel{background:#161616;border-radius:8px;position:relative;overflow:hidden;}
.skel::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.06) 50%,transparent 100%);
  transform:translateX(-100%);animation:skelSweep 1.3s ease-in-out infinite;
  will-change:transform;}
.skel-fill{position:absolute;inset:0;border-radius:inherit;display:block;}
.skel-yt{pointer-events:none;}
.skel-yt::after{display:none !important;}
.skel-line{height:12px;border-radius:6px;}
.sl-40{width:40%;} .sl-60{width:60%;} .sl-80{width:80%;}
.skel-av{width:36px;height:36px;border-radius:50%;flex-shrink:0;}
.skel-meta{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0;}
.skel-row{display:flex;align-items:center;gap:12px;padding:11px 6px;}
/* A skeleton on a page you are not looking at still owns a compositor layer and
   still sweeps every frame. Pages are display:none when inactive so the browser
   *should* idle them, but overlays and off-screen tabs are not always treated
   that way — stopping the animation explicitly costs nothing and removes the
   whole class of "invisible thing still animating" bug. */
.page:not(.active) .skel::before{animation:none;will-change:auto;}
/* Same rule for overlays, and this one is not theoretical: .overlay hides with
   opacity + pointer-events, NOT display, so a closed modal still lays its
   contents out and a skeleton inside it sweeps forever on a screen nobody is
   looking at. That is the backdrop-filter bug wearing a different hat. */
.overlay:not(.open) .skel::before,
.dd-cbox-overlay:not(.open) .skel::before,
.video-detail-overlay:not(.open) .skel::before,
.shorts-overlay:not(.open) .skel::before{animation:none;will-change:auto;}
/* Same reason, other cause: during a deep-link boot goPage('home') runs and
   renderHome paints its skeleton into a page the boot skeleton is covering. */
body.boot-skel .page .skel::before{animation:none;will-change:auto;}
@media(prefers-reduced-motion:reduce){.skel::before{animation:none;}}

/* ── Boot skeleton: the shape of the page you refreshed on ── */
/* Lives inside <main> so it inherits the content area's margins at every
   breakpoint; the pages hide beneath it until their own render takes over.
   Wherever a real container exists (.active-dare-card, .wallet-card, .dare-mini,
   .vd-comment) the skeleton is built OUT of it, so the app's own CSS supplies
   the geometry and the shape cannot drift away from the screen it stands for. */
body.boot-skel .page{display:none !important;}
#bootSkel{animation:none;}

/* detail and shorts run without a topbar on mobile; .main still reserves 56px
   for one, which would drop the skeleton's player below where the real one sits */
@media(max-width:768px){
  body.boot-skel-detail .main, body.boot-skel-shorts .main{margin-top:0 !important;padding-top:0 !important;}
}

.sk-chips{display:flex;gap:8px;overflow:hidden;margin-bottom:16px;}
.sk-chip{height:32px;width:78px;border-radius:16px;flex:none;}
.sk-cmeta{flex:1;min-width:0;}
.sk-av40{width:40px;height:40px;border-radius:50%;flex:none;}
.sk-av92{width:92px;height:92px;border-radius:50%;flex:none;}

/* ── detail: player, title, creator + Follow, one action + four icons ── */
.sk-detail{max-width:1100px;}
.sk-hero{display:block;width:100%;aspect-ratio:16/9;border-radius:12px;}
/* 16:9 across a desktop column is ~650px tall, which pushes the title and
   everything under it off screen — the skeleton would only ever be a grey slab */
.sk-detail .sk-hero{max-height:min(58vh,520px);}
.sk-dbody{padding-top:18px;}
.sk-creator{display:flex;align-items:center;gap:12px;margin:16px 0;}
.sk-pill{width:88px;height:34px;border-radius:17px;flex:none;margin-left:auto;}
.sk-actions{display:flex;align-items:center;gap:10px;margin-bottom:18px;}
.sk-accept{width:112px;height:36px;border-radius:18px;flex:none;}
.sk-acts-r{display:flex;align-items:center;gap:14px;margin-left:auto;}
.sk-aicon{width:30px;height:22px;border-radius:6px;flex:none;}
.sk-dbody .dd-bar .skel-line{display:block;}

/* ── shorts: one full-bleed frame ── */
.sk-shorts{position:relative;overflow:hidden;border-radius:14px;height:calc(100vh - 150px);}

/* ── profile: avatar + name, two pill tabs, filter chips ── */
.sk-phead{display:flex;align-items:center;gap:16px;margin-bottom:22px;}
.sk-ptabs{display:flex;gap:10px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border);}
.sk-ptabs .skel{flex:1;height:40px;border-radius:20px;}
.sk-fchips{display:flex;gap:8px;margin-bottom:18px;}
.sk-fchip{height:32px;width:74px;border-radius:16px;flex:none;}

/* ── wallet: balance card, Insights, Account, history ── */
.sk-wcard{position:relative;}
.sk-wcard::before,.sk-wcard::after{display:none;}   /* decorative circles read as content here */
.sk-wrow{display:flex;gap:12px;margin-top:20px;}
.sk-wbtns{margin-top:22px;}
.sk-wstat{flex:1;min-width:140px;height:56px;border-radius:14px;}
.sk-wbtn{flex:1;height:46px;border-radius:14px;}
.sk-wstats{margin-top:12px;}
.sk-wsbox{flex:1;min-width:100px;height:56px;border-radius:12px;}
.sk-wchart{display:block;width:100%;height:120px;border-radius:10px;margin-top:18px;}
.sk-wacct{display:block;width:100%;height:78px;border-radius:16px;margin-top:12px;}
.sk-txn{display:flex;align-items:center;gap:12px;padding:13px 4px;}

/* ── comment rows: same box as a real one, so the sheet does not jump ── */
.sk-cmt{display:flex;gap:12px;padding:12px 0;pointer-events:none;}
.sk-cmt .vd-comment-av{border:none;background:transparent;overflow:hidden;}

@media(max-width:768px){
  /* the hero alone goes full-bleed, matching the real player. width:auto is what
     makes that work: with width:100% the negative margins ADD to a full-width box
     and the whole column overflows to the right. */
  .sk-detail .sk-hero{margin:0 -12px;width:auto;border-radius:0 0 12px 12px;max-height:none;}
  .sk-av92{width:82px;height:82px;}
  .sk-shorts{margin:-12px;width:auto;border-radius:0;height:calc(100vh - 56px);}
}

/* Loading splash — just the brand bolt as a grey shimmering skeleton (no box, no text, no red) */
.load-bolt{line-height:1;}
.load-bolt .mi{font-size:112px;line-height:1;color:#333;
  animation:boltSkel 1.2s ease-in-out infinite;}
@keyframes boltSkel{0%,100%{color:#2b2b2b;}50%{color:#5c5c5c;}}

/* ── Mobile: profile page — full-bleed banner (brand only) below the normal glassy topbar ── */
@media(max-width:768px){
  #profSocials{display:none;}                                            /* mobile socials live in the topbar */
  .profile-pic{width:92px;height:92px;font-size:34px;}
  .profile-pic-wrap{margin-top:0;}      /* the -44px pull existed only to overlap the removed banner */
  .profile-header{align-items:flex-start;gap:16px;padding:10px 4px 16px;}
  /* 3 SEPARATE action buttons right under the bio — stretched to full width
     (negative margin pulls them left across the avatar column: 92px avatar + 16px gap) */
  /* the row is pulled back to the header's left edge (avatar 92 + gap 16) and
     has to clear the avatar vertically — it used to, only because the avatar was
     lifted 44px onto the banner. With the banner gone the info column carries the
     avatar's height and the row sits at the bottom of it. */
  /* This used to be min-height:156px — avatar 92 + 14 gap + a 50px row of Edit
     Profile and the follower counts. That row moved into Settings and the counts
     became hidden carriers, so the reservation was holding open 100px of empty
     space under the handle with nothing left to put in it. */
  .profile-info{ display:flex; flex-direction:column; }
  .profile-actions{flex-wrap:nowrap;gap:8px;margin-left:-108px;margin-top:auto;padding-top:14px;}
  .prof-edit-btn, .prof-count-box{flex:1;min-width:0;flex-direction:column;gap:1px;padding:9px 4px;min-height:50px;white-space:nowrap;}
  .prof-edit-btn{font-size:13px;}
  .pcb-v{font-size:15px;} .pcb-l{font-size:10.5px;}
}
.profile-stats{margin:16px 0 6px;}
.pstat-verified{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--green);
  background:rgba(0,200,83,.14);border:1px solid rgba(0,200,83,.4);border-radius:50px;padding:4px 12px;margin-bottom:12px;}
.pstat-verified .mi{font-size:16px;}
.pstat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;}
.pstat{background:var(--glass);backdrop-filter:var(--blur);border:1px solid var(--border);
  border-radius:14px;padding:13px 8px;text-align:center;transition:border-color .2s;}
.pstat:hover{border-color:var(--border2);}
.pstat-v{font-family:'Roboto',sans-serif;font-size:18px;font-weight:800;color:var(--t1);line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pstat-l{font-size:11px;color:var(--t3);margin-top:4px;font-weight:500;}
@media(max-width:760px){ .pstat-grid{grid-template-columns:repeat(3,1fr);} }
@media(max-width:380px){ .pstat-grid{grid-template-columns:repeat(2,1fr);} }

/* ── Public profile overlay ── */
.pubprof-overlay{position:fixed;inset:0;z-index:9300;background:var(--page-grad);overflow-y:auto;
  opacity:0;pointer-events:none;transition:opacity .2s;}
.pubprof-overlay.open{opacity:1;pointer-events:all;}
.pubprof-wrap{max-width:1100px;margin:0 auto;padding:0 16px 60px;}
.pubprof-back{position:sticky;top:12px;z-index:3;margin:12px 0;width:42px;height:42px;border-radius:50%;
  background:var(--glass);backdrop-filter:var(--blur);border:1px solid var(--border);color:var(--t1);cursor:pointer;
  display:flex;align-items:center;justify-content:center;}
.pubprof-back:hover{background:var(--glass2);}
.pubprof-banner{height:160px;border-radius:18px;background:linear-gradient(120deg,#1f1147,#3a1d2e);}
.pubprof-head{display:flex;align-items:flex-start;gap:18px;padding:0 6px;margin-top:-34px;position:relative;z-index:1;flex-wrap:wrap;}
.pubprof-pic{width:96px;height:96px;border-radius:50%;flex-shrink:0;border:4px solid var(--bg);overflow:hidden;
  background:#373737;display:flex;align-items:center;justify-content:center;font-size:38px;font-weight:700;color:#fff;}
.pubprof-pic img{width:100%;height:100%;object-fit:cover;}
.pubprof-id{flex:1;min-width:160px;padding-top:40px;}
.pubprof-name{font-size:22px;font-weight:800;color:var(--t1);font-family:'Roboto',sans-serif;}
.pubprof-handle{font-size:14px;color:var(--t3);margin-top:2px;}
.pubprof-bio{font-size:13px;color:var(--t2);margin-top:8px;line-height:1.5;max-width:560px;}
.pubprof-actions{display:flex;gap:10px;align-items:center;padding-top:42px;}
.pubprof-follow{background:var(--t1);color:#0a0a0a;border:none;border-radius:50px;padding:10px 26px;
  font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s;}
.pubprof-follow:hover{opacity:.85;}
.pubprof-follow.following{background:var(--glass);color:var(--t1);border:1px solid var(--border2);}
.pubprof-share{width:42px;height:42px;border-radius:50%;background:var(--glass);border:1px solid var(--border);
  color:var(--t1);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.pubprof-share:hover{background:var(--glass2);}
.pubprof-wrap .profile-stats{margin:18px 6px;}
.pubprof-wrap .tabs{margin:6px 0 18px;}
/* followers / following list */
.fl-body{max-height:60vh;overflow-y:auto;margin:-6px -6px 0;}
.fl-row{display:flex;align-items:center;gap:12px;padding:11px 6px;cursor:pointer;border-radius:10px;transition:background .15s;}
.fl-row:hover{background:var(--glass2);}
.fl-av{width:42px;height:42px;border-radius:50%;overflow:hidden;flex-shrink:0;background:#373737;
  display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;}
.fl-av img{width:100%;height:100%;object-fit:cover;}
.fl-info{flex:1;min-width:0;}
.fl-name{font-size:14px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fl-handle{font-size:12px;color:var(--t3);}
@media(max-width:560px){ .pubprof-head{margin-top:-28px;} .pubprof-pic{width:80px;height:80px;} .pubprof-actions{padding-top:0;width:100%;} }

/* ── Profile: achievements + social links ── */
.profile-badges{display:flex;flex-wrap:wrap;gap:8px;margin:0 4px 14px;}
.pbadge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--bc,#fff);
  background:color-mix(in srgb,var(--bc,#888) 14%,transparent);border:1px solid color-mix(in srgb,var(--bc,#888) 40%,transparent);
  border-radius:50px;padding:5px 12px;}
.pbadge .mi{font-size:15px;}
.profile-socials{display:flex;gap:8px;margin-top:10px;}
.psocial{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--glass);border:1px solid var(--border);color:var(--t1);transition:all .15s;text-decoration:none;}
.psocial:hover{background:var(--glass2);border-color:var(--border2);color:var(--blue);}
.psocial .mi{font-size:18px;}
.pe-social-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.pe-social-row .mi{font-size:20px;color:var(--t3);flex-shrink:0;}
.pe-social-row .pe-input{margin:0;}

/* ── Settings ── */
.set-sec-label{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.6px;margin:18px 0 6px;}
.set-sec-label:first-of-type{margin-top:6px;}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--border);cursor:pointer;}
.set-t{font-size:14px;color:var(--t1);font-weight:500;}
.set-s{font-size:12px;color:var(--t3);margin-top:2px;}
.switch{position:relative;width:44px;height:26px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;position:absolute;}
.switch .sl{position:absolute;inset:0;background:var(--glass2);border:1px solid var(--border2);border-radius:50px;transition:.2s;}
.switch .sl::before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;}
.switch input:checked + .sl{background:var(--blue);border-color:var(--blue);}
.switch input:checked + .sl::before{transform:translateX(18px);}
.set-btn{display:flex;align-items:center;gap:10px;width:100%;background:var(--glass);border:1px solid var(--border);
  color:var(--t1);border-radius:12px;padding:13px 15px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;margin-top:10px;transition:all .15s;}
.set-btn:hover{background:var(--glass2);}
.set-btn .mi{font-size:20px;}
.set-btn.danger{color:var(--red);border-color:rgba(229,57,53,.3);}
.set-btn.danger:hover{background:rgba(229,57,53,.12);}

/* ── Profile tab sub-filters + dare cards ── */
.pfilter-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;margin-bottom:8px;scrollbar-width:none;}
.pfilter-row::-webkit-scrollbar{display:none;}
.pfilter{flex-shrink:0;background:var(--glass);border:1px solid var(--border);color:var(--t2);border-radius:50px;
  padding:7px 16px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap;}
.pfilter:hover{border-color:var(--border2);color:var(--t1);}
.pfilter.active{background:var(--t1);color:#0a0a0a;border-color:var(--t1);}
/* 3-dot actions — top-left of the card thumbnail, always visible */
.pdc-menu-wrap{position:absolute;top:8px;left:8px;margin:0;z-index:6;}
.pdc-menu-wrap.open{z-index:60;}
.pdc-dots{opacity:1;background:rgba(0,0,0,.6);color:#fff;width:32px;height:32px;}
.pdc-dots:hover{background:rgba(0,0,0,.82);color:#fff;}
.active-dare-card:hover .pdc-dots{opacity:1;}
.pdc-menu{top:38px;left:0;right:auto;}
/* status pill (bottom-left) + proof count (bottom-right) */
.pdc-status{position:absolute;bottom:8px;left:8px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:50px;backdrop-filter:blur(4px);}
.pdc-status.live{background:rgba(255,45,74,.88);color:#fff;}
.pdc-status.done{background:rgba(0,200,83,.88);color:#fff;}
.pdc-status.review{background:rgba(255,159,10,.9);color:#0a0a0a;}
.pdc-status.applied{background:rgba(10,132,255,.88);color:#fff;}
.pdc-proofs{position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;gap:3px;font-size:11px;
  font-weight:700;color:#fff;background:rgba(0,0,0,.7);padding:3px 8px;border-radius:50px;}
.pdc-proofs .mi{font-size:13px;}
.pdc-action{padding:6px 2px 2px;}
.pdc-submit{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;background:var(--blue);color:#0f0f0f;
  border:none;border-radius:10px;padding:9px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;}
.pdc-submit:hover{opacity:.9;}
.pdc-submit .mi{font-size:17px;}
.p-stat{
  /* Glass + Neu */
  background:var(--glass);backdrop-filter:var(--blur);
  border:1px solid var(--border);border-radius:14px;padding:16px;text-align:center;
  box-shadow:6px 6px 16px var(--neu-dark),-3px -3px 8px var(--neu-light),inset 0 1px 0 rgba(255,255,255,0.04);
  transition:all .2s;
}
.p-stat:hover{border-color:rgba(255,255,255,0.08);transform:translateY(-2px);}
.p-stat-val{font-family:'Roboto',sans-serif;font-size:32px;letter-spacing:1px;line-height:1;}
.p-stat-lbl{font-size:11px;color:var(--t3);margin-top:4px;font-weight:500;font-family:'Roboto',sans-serif;letter-spacing:.3px;}

/* ═══════════════════════════════════════════════════════
   PROFILE EDIT MODAL
═══════════════════════════════════════════════════════ */
.profile-edit-overlay{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0.45);display:none;align-items:center;justify-content:center;padding:20px;}
.profile-edit-overlay.open{display:flex;}
.profile-edit-modal{background:rgba(16,8,8,0.96);border:1px solid var(--border2);border-radius:20px;width:100%;max-width:540px;max-height:90vh;overflow-y:auto;box-shadow:10px 10px 32px var(--neu-dark);}
.pe-header{display:flex;align-items:center;justify-content:flex-end;padding:16px 18px 0;background:transparent;z-index:1;}
.pe-title{font-size:17px;font-weight:700;font-family:'Roboto',sans-serif;}
.pe-close{background:none;border:none;color:var(--t2);cursor:pointer;padding:4px;}
.pe-close .mi{font-size:22px;}
.pe-body{padding:20px 24px 24px;}
.pe-avatar-row{display:flex;align-items:center;gap:18px;margin-bottom:24px;}
.pe-big-av{width:80px;height:80px;border-radius:50%;flex-shrink:0;overflow:hidden;background:#373737;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700;color:#fff;cursor:pointer;box-shadow:4px 4px 12px var(--neu-dark),-2px -2px 7px var(--neu-light);}
.pe-big-av img{width:100%;height:100%;object-fit:cover;}
.pe-av-btns{display:flex;flex-direction:column;gap:8px;}
.pe-av-upload{background:rgba(255,255,255,0.06);color:var(--t1);border:1px solid var(--border);padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:6px;box-shadow:3px 3px 7px var(--neu-dark),-2px -2px 5px var(--neu-light);}
.pe-av-upload:hover{background:rgba(255,255,255,0.10);}
.pe-av-note{font-size:11px;color:var(--t3);}
.pe-field{margin-bottom:18px;}
.pe-label{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;color:var(--t2);margin-bottom:8px;font-family:'Roboto',sans-serif;letter-spacing:.3px;text-transform:uppercase;}
.pe-label span{font-size:11px;color:var(--t3);font-weight:400;text-transform:none;letter-spacing:0;}
.pe-input{width:100%;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:10px;padding:11px 14px;font-size:14px;color:var(--t1);font-family:inherit;outline:none;transition:border-color .2s;backdrop-filter:var(--blur);}
.pe-input:focus{border-color:var(--blue);}
.pe-input.error{border-color:var(--red);}
.pe-textarea{resize:vertical;min-height:70px;line-height:1.5;}
.pe-handle-wrap{position:relative;}
.pe-handle-prefix{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--t3);pointer-events:none;}
.pe-handle-wrap .pe-input{padding-left:28px;}
.pe-status{font-size:11px;margin-top:5px;min-height:14px;}
.pe-status.ok{color:var(--green);}
.pe-status.err{color:var(--red);}
.pe-status.loading{color:var(--t3);}
.pe-footer{display:flex;gap:10px;justify-content:flex-end;margin-top:24px;padding-top:18px;border-top:1px solid var(--border);}
.pe-btn-cancel{background:rgba(255,255,255,0.05);color:var(--t1);border:1px solid var(--border);padding:10px 22px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;}
.pe-btn-save{background:var(--blue);color:#0f0f0f;border:none;padding:10px 24px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;display:flex;align-items:center;gap:6px;box-shadow:3px 3px 10px rgba(0,0,0,0.3);}
.pe-btn-save:hover{background:var(--blue2);}
.pe-btn-save:disabled{opacity:.5;cursor:not-allowed;}

/* ═══════════════════════════════════════════════════════
   WALLET CARD
═══════════════════════════════════════════════════════ */
.wallet-card{
  border-radius:22px;padding:26px;margin-bottom:22px;position:relative;overflow:hidden;
  background:#1f1f1f;border:1px solid rgba(255,255,255,0.1);
  box-shadow:10px 10px 30px rgba(0,0,0,0.3),-4px -4px 14px rgba(0,0,0,0);
}
.wallet-card::before{content:'';position:absolute;top:-60px;right:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,0.07);}
.wallet-card::after{content:'';position:absolute;bottom:-40px;left:-20px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,0.04);}
.wallet-label{font-size:11px;font-weight:600;color:rgba(255,255,255,0.6);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;position:relative;z-index:1;font-family:'Roboto',sans-serif;}
.wallet-balance{font-family:'Roboto',sans-serif;font-size:48px;letter-spacing:2px;color:#fff;line-height:1;position:relative;z-index:1;}
.wallet-sub{font-size:12px;color:rgba(255,255,255,0.5);margin-top:6px;position:relative;z-index:1;font-family:'Roboto',sans-serif;}
.wallet-actions{display:flex;gap:10px;margin-top:22px;position:relative;z-index:1;}
.btn-wallet{
  flex:1;padding:11px;
  border:1px solid rgba(255,255,255,0.2);border-radius:14px;
  background:rgba(255,255,255,0.10);backdrop-filter:var(--blur);
  color:#fff;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:all .2s;
}
.btn-wallet:hover{background:rgba(255,255,255,0.20);transform:translateY(-1px);}
.btn-wallet .mi{font-size:18px;}

/* ── Wallet: balance breakdown ── */
.wallet-breakdown{display:flex;gap:12px;margin-top:20px;position:relative;z-index:1;flex-wrap:wrap;}
.wbk-item{flex:1;min-width:140px;display:flex;align-items:center;gap:10px;
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px 12px;}
.wbk-ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.wbk-ic .mi{font-size:18px;color:#fff;}
.wbk-locked{background:rgba(255,159,10,.30);}
.wbk-pending{background:rgba(10,132,255,.30);}
.wbk-val{font-size:16px;font-weight:800;color:#fff;font-family:'Roboto',sans-serif;line-height:1.1;}
.wbk-lbl{font-size:11px;color:rgba(255,255,255,.6);margin-top:2px;}
.wallet-claim{margin-top:14px;width:100%;position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  background:rgba(0,200,83,.18);border:1px solid rgba(0,200,83,.45);color:#fff;
  border-radius:14px;padding:12px;font-size:13px;font-weight:700;font-family:inherit;transition:background .2s;}
.wallet-claim:hover{background:rgba(0,200,83,.30);}
.wallet-claim .mi{font-size:18px;color:var(--green);}

/* ── Wallet: transactions toolbar ── */
.wallet-txn-hdr{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:26px 0 12px;flex-wrap:wrap;}
.wallet-search{display:flex;align-items:center;gap:8px;background:var(--glass);backdrop-filter:var(--blur);
  border:1px solid var(--border);border-radius:50px;padding:7px 14px;min-width:220px;flex:0 1 280px;}
.wallet-search .mi{font-size:18px;color:var(--t3);}
.wallet-search input{flex:1;background:transparent;border:none;outline:none;color:var(--t1);font-size:13px;font-family:inherit;}
.wallet-filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:10px;scrollbar-width:none;}
.wallet-filters::-webkit-scrollbar{display:none;}
.wfilter{flex-shrink:0;background:var(--glass);border:1px solid var(--border);color:var(--t2);
  border-radius:50px;padding:7px 15px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap;}
.wfilter:hover{border-color:var(--border2);color:var(--t1);}
.wfilter.active{background:var(--t1);color:#0a0a0a;border-color:var(--t1);}
.txn-item{cursor:pointer;}
.txn-status{text-transform:capitalize;font-weight:700;font-size:11px;}
.txn-status.pending,.txn-status.processing{color:var(--orange,#FF9F0A);}
.txn-status.failed{color:var(--red);}

/* ── Wallet modals ── */
.wallet-modal{max-width:420px;}
.wallet-amt-row{display:flex;align-items:center;gap:8px;margin:18px 0 6px;
  border-bottom:2px solid var(--border2);padding-bottom:8px;}
.wallet-amt-cur{font-size:30px;font-weight:700;color:var(--t2);font-family:'Roboto',sans-serif;}
.wallet-amt-input{flex:1;background:transparent;border:none;outline:none;color:var(--t1);
  font-size:38px;font-weight:800;font-family:'Roboto',sans-serif;width:100%;}
.wallet-amt-input::-webkit-outer-spin-button,.wallet-amt-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.wallet-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0;}
.wchip{background:var(--glass);border:1px solid var(--border);color:var(--t1);border-radius:50px;
  padding:8px 14px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;}
.wchip:hover{border-color:var(--blue);color:var(--blue);}
.wallet-avail{font-size:13px;color:var(--t3);margin:4px 0 14px;}
.wallet-note{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--t3);margin:8px 0 16px;line-height:1.4;}
.wallet-note .mi{font-size:16px;flex-shrink:0;}
.txd-amt{font-size:34px;font-weight:800;font-family:'Roboto',sans-serif;text-align:center;margin:8px 0 4px;}
.txd-amt.credit{color:var(--green);}
.txd-amt.debit{color:var(--red);}
.txd-title{text-align:center;font-size:14px;color:var(--t2);margin-bottom:18px;}
.txd-row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--border);font-size:13px;}
.txd-row span{color:var(--t3);}
.txd-row b{color:var(--t1);font-weight:600;text-align:right;word-break:break-word;}

/* ── Wallet: Account & Security ── */
.wacc-card{background:var(--glass);backdrop-filter:var(--blur);border:1px solid var(--border);border-radius:16px;overflow:hidden;}
.wacc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;cursor:pointer;
  border-bottom:1px solid var(--border);transition:background .15s;}
.wacc-row:hover{background:var(--glass2);}
.wacc-l{display:flex;align-items:center;gap:12px;min-width:0;}
.wacc-ic{width:38px;height:38px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);}
.wacc-ic .mi{font-size:19px;color:var(--t1);}
.wacc-t{font-size:14px;font-weight:600;color:var(--t1);}
.wacc-s{font-size:12px;color:var(--t3);margin-top:1px;}
.wacc-r{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.wacc-r .mi{font-size:20px;}
.wacc-badge{font-size:11px;font-weight:700;padding:3px 10px;border-radius:50px;}
.wacc-badge.ok{background:rgba(0,200,83,.16);color:var(--green);border:1px solid rgba(0,200,83,.4);}
.wacc-badge.pend{background:rgba(255,159,10,.16);color:var(--orange,#FF9F0A);border:1px solid rgba(255,159,10,.4);}
.wacc-badge.no{background:rgba(229,57,53,.14);color:var(--red);border:1px solid rgba(229,57,53,.35);}
.wacc-methods{padding:14px 16px;}
.wacc-methods-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.wacc-methods-hdr span{font-size:12px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;}
.wacc-methods-hdr button{display:flex;align-items:center;gap:4px;background:none;border:none;color:var(--blue);
  font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;}
.wacc-methods-hdr button .mi{font-size:17px;}
.wacc-method{display:flex;align-items:center;gap:11px;padding:9px 0;}
.wacc-mic{width:34px;height:34px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);}
.wacc-mic .mi{font-size:18px;color:var(--t1);}
.wacc-mbody{flex:1;min-width:0;}
.wacc-mt{font-size:13px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wacc-ms{font-size:11px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wacc-mdel{background:none;border:none;color:var(--t3);cursor:pointer;padding:6px;border-radius:8px;flex-shrink:0;}
.wacc-mdel:hover{color:var(--red);background:rgba(229,57,53,.12);}
.wacc-mdel .mi{font-size:18px;}
.wacc-empty{font-size:13px;color:var(--t3);text-align:center;padding:10px 0;}
/* method modal tabs + form labels + pin */
.wallet-flabel{display:block;font-size:12px;font-weight:600;color:var(--t3);margin:12px 0 5px;}
.wallet-mtabs{display:flex;gap:8px;margin-bottom:6px;}
.wmtab{flex:1;background:var(--glass);border:1px solid var(--border);color:var(--t2);border-radius:10px;
  padding:9px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;}
.wmtab.active{background:var(--t1);color:#0a0a0a;border-color:var(--t1);}
.wallet-pin{text-align:center;font-size:28px;letter-spacing:14px;font-weight:800;padding-left:14px;}

/* ── Wallet: insights (summary + chart) + export ── */
.wstat-card{background:var(--glass);backdrop-filter:var(--blur);border:1px solid var(--border);border-radius:16px;padding:16px;}
.wstat-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;}
.wstat-box{flex:1;min-width:100px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:12px;padding:11px 13px;}
.wstat-lbl{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;}
.wstat-val{font-size:17px;font-weight:800;color:var(--t1);font-family:'Roboto',sans-serif;margin-top:3px;}
.wstat-val.green{color:var(--green);} .wstat-val.red{color:var(--red);}
.wstat-chart{display:flex;align-items:flex-end;gap:10px;height:120px;padding:0 4px;}
.wbar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;}
.wbars{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:4px;width:100%;}
.wbar{width:42%;min-height:3px;border-radius:4px 4px 0 0;transition:height .4s cubic-bezier(.22,1,.36,1);}
.wbar.inc{background:var(--green);} .wbar.exp{background:var(--red);}
.wbar-lbl{font-size:11px;color:var(--t3);}
.wstat-legend{display:flex;align-items:center;gap:16px;margin-top:14px;font-size:12px;color:var(--t3);flex-wrap:wrap;}
.wstat-legend .wdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle;}
.wstat-legend .wdot.inc{background:var(--green);} .wstat-legend .wdot.exp{background:var(--red);}
.wstat-net{margin-left:auto;} .wstat-net b.green{color:var(--green);} .wstat-net b.red{color:var(--red);}
.wallet-export{display:flex;align-items:center;gap:6px;background:var(--glass);border:1px solid var(--border);
  color:var(--t1);border-radius:50px;padding:8px 15px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;}
.wallet-export:hover{border-color:var(--border2);background:var(--glass2);}
.wallet-export .mi{font-size:18px;}

/* ═══════════════════════════════════════════════════════
   TABS
═══════════════════════════════════════════════════════ */
.tabs{
  display:flex;
  background:var(--glass);backdrop-filter:var(--blur);
  border:1px solid var(--border);border-radius:14px;
  padding:4px;margin-bottom:20px;gap:4px;
  box-shadow:4px 4px 12px var(--neu-dark),-2px -2px 7px var(--neu-light);
}
.tab{flex:1;padding:10px 16px;font-size:13px;font-weight:600;cursor:pointer;color:var(--t3);border-radius:11px;background:transparent;transition:all .2s;font-family:inherit;border:none;}
.tab.active{
  background:rgba(255,255,255,0.08);color:var(--t1);
  box-shadow:inset 2px 2px 6px rgba(0,0,0,0.4),inset -1px -1px 4px var(--neu-light);
}

/* ═══════════════════════════════════════════════════════
   LIST ITEMS (profile tabs)
═══════════════════════════════════════════════════════ */
.txn-item,.dare-mini{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px;background:var(--glass);backdrop-filter:var(--blur);
  border:1px solid var(--border);border-radius:16px;margin-bottom:8px;
  box-shadow:5px 5px 14px var(--neu-dark),-2px -2px 8px var(--neu-light),inset 0 1px 0 rgba(255,255,255,0.04);
  transition:all .2s;
}
.txn-item:hover,.dare-mini:hover{background:var(--glass2);border-color:var(--border2);}
.dare-mini{gap:12px;}
.txn-left{display:flex;align-items:center;gap:12px;}
.txn-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:3px 3px 8px var(--neu-dark),-2px -2px 5px var(--neu-light);}
.txn-icon .mi{font-size:20px;}
.txn-title{font-size:14px;font-weight:500;}
.txn-date{font-size:12px;color:var(--t3);margin-top:2px;font-family:'Roboto',sans-serif;}
.txn-amt{font-family:'Roboto',sans-serif;font-size:22px;letter-spacing:1px;}
.txn-amt.credit{color:var(--green);}
.txn-amt.debit{color:var(--red);}
.dare-mini-title{font-family:'Roboto',sans-serif;font-size:14px;margin-bottom:4px;}
.dare-mini-meta{font-size:12px;color:var(--t3);display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:'Roboto',sans-serif;}
.dare-mini-meta .mi{font-size:14px;}
.dare-mini-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0;}
.status-badge{font-size:11px;font-weight:700;padding:4px 12px;border-radius:50px;white-space:nowrap;letter-spacing:.3px;font-family:'Roboto',sans-serif;}
.status-active{background:rgba(255,255,255,0.08);color:var(--blue2);border:1px solid rgba(255,255,255,0.08);}
.status-submitted{background:rgba(255,159,10,0.12);color:var(--orange);border:1px solid rgba(255,159,10,0.25);}
.status-approved{background:rgba(0,230,118,0.12);color:var(--green);border:1px solid rgba(0,230,118,0.25);}
.btn-review{background:rgba(255,159,10,0.10);color:var(--orange);border:1px solid rgba(255,159,10,0.3);padding:6px 14px;border-radius:50px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:4px;transition:all .2s;position:relative;}
.btn-review:hover{background:rgba(255,159,10,0.20);}
.btn-review .mi{font-size:14px;}
.review-badge{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:var(--red);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg);}
.btn-mini-proof{background:rgba(0,230,118,0.10);color:var(--green);border:1px solid rgba(0,230,118,0.3);padding:6px 14px;border-radius:50px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:4px;transition:all .2s;}
.btn-mini-proof:hover{background:rgba(0,230,118,0.20);}
.btn-mini-proof .mi{font-size:14px;}

/* ═══════════════════════════════════════════════════════
   LEADERBOARD PAGE
═══════════════════════════════════════════════════════ */
#lbContent .dare-mini{
  grid-template-columns:60px 1fr auto;
  display:grid;
}

/* ═══════════════════════════════════════════════════════
   MODALS — Deep dark glass
═══════════════════════════════════════════════════════ */
.overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.45);
  z-index:9500;display:flex;align-items:center;justify-content:center;padding:16px;
  opacity:0;pointer-events:none;transition:all .25s;
}
.overlay.open{opacity:1;pointer-events:all;}
.modal{
  background:rgba(14,6,6,0.94);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border2);border-radius:24px;
  width:100%;max-width:500px;padding:26px;
  transform:translateY(24px) scale(.97);
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
  max-height:90vh;overflow-y:auto;
  box-shadow:10px 10px 32px var(--neu-dark),-4px -4px 14px var(--neu-light),inset 0 1px 0 rgba(255,255,255,0.06);
}
.overlay.open .modal{transform:translateY(0) scale(1);}
.modal-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;}
.modal-title{font-size:20px;font-weight:700;letter-spacing:-.3px;font-family:'Roboto',sans-serif;}
.modal-close{
  background:var(--glass);border:1px solid var(--border);
  cursor:pointer;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--t3);
  box-shadow:2px 2px 6px var(--neu-dark),-1px -1px 4px var(--neu-light);
  transition:all .2s;
}
.modal-close:hover{background:var(--glass2);color:var(--t1);}
.modal-close .mi{font-size:18px;}
.f-group{margin-bottom:16px;}
.f-label{font-size:11px;font-weight:600;color:var(--t3);display:block;margin-bottom:7px;text-transform:uppercase;letter-spacing:.8px;font-family:'Roboto',sans-serif;}
.f-input{
  width:100%;background:rgba(255,255,255,0.04);backdrop-filter:var(--blur);
  border:1px solid var(--border);color:var(--t1);
  padding:13px 16px;border-radius:14px;font-size:14px;outline:none;
  font-family:inherit;transition:all .2s;
}
.f-input:focus{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,0.08);box-shadow:0 0 0 3px rgba(255,255,255,0.08);}
.f-input::placeholder{color:var(--t3);}
textarea.f-input{resize:vertical;min-height:84px;}
.f-opt-tag{font-size:10px;font-weight:600;padding:2px 7px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;color:var(--t3);margin-left:6px;vertical-align:middle;}
.f-hint{font-size:11px;color:var(--t3);margin-top:4px;font-family:'Roboto',sans-serif;}

/* ── Video Proof ── */
.proof-dare-info{background:#0d0d0d;border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:16px;margin-bottom:20px;}
.proof-dare-title{font-family:'Roboto',sans-serif;font-size:15px;margin-bottom:4px;}
.proof-dare-bounty{font-family:'Roboto',sans-serif;font-size:28px;letter-spacing:1px;color:var(--green);line-height:1;}
.video-dz{border:2px dashed var(--border2);border-radius:18px;padding:36px 20px;text-align:center;cursor:pointer;transition:all .25s;margin-bottom:16px;background:rgba(255,255,255,.02);}
.video-dz:hover,.video-dz.active{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,0.08);transform:scale(1.01);}
.video-dz.has-file{border-style:solid;border-color:rgba(255,255,255,0.20);background:rgba(255,255,255,.03);}
.video-dz .mi{font-size:44px;color:var(--t3);display:block;margin-bottom:12px;}
.video-dz.has-file .mi{color:#fff;}
.vdz-t{font-size:14px;font-weight:600;color:var(--t2);margin-bottom:4px;}
.vdz-s{font-size:12px;color:var(--t3);font-family:'Roboto',sans-serif;}
#videoPreview{width:100%;border-radius:14px;margin-bottom:16px;display:none;max-height:220px;background:#000;}
.file-info{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--t2);margin-bottom:16px;display:none;align-items:center;gap:8px;font-family:'Roboto',sans-serif;}
.file-info .mi{font-size:18px;color:#fff;}
.proof-rules{background:#0d0d0d;border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:14px;margin-bottom:16px;}
.proof-rules-title{font-size:10px;font-weight:700;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.7px;margin-bottom:10px;font-family:'Roboto',sans-serif;}
/* text-transform is inherited, and Material Icons ligatures are case-sensitive lowercase —
   uppercasing this row was rendering the rule/checklist ICONS as literal text ("RULE",
   "CHECKLIST") instead of glyphs. Excluded here and on the checklist header below. */
.proof-rules-title .mi, .proof-checklist-hdr .mi{ text-transform:none; }
.proof-rule{font-size:13px;color:var(--t2);margin-bottom:5px;display:flex;gap:6px;line-height:1.5;}
.proof-rule::before{content:'•';color:rgba(255,255,255,.4);flex-shrink:0;}
.btn-submit-proof{
  width:100%;padding:15px;
  background:#fff;
  color:#000;border:none;border-radius:999px;
  font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:none;
  transition:opacity .2s;
}
.btn-submit-proof:active{transform:scale(.97);}
.btn-submit-proof .mi{font-size:19px;color:#000;}
.btn-submit-proof:disabled{background:#fff;color:#000;cursor:not-allowed;box-shadow:none;transform:none;opacity:.5;}

/* ── Review Modals ── */
.review-dare-header{background:var(--glass);backdrop-filter:var(--blur);border:1px solid var(--border);border-radius:16px;padding:16px 18px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:4px 4px 12px var(--neu-dark),-2px -2px 7px var(--neu-light);}
.review-dare-name{font-family:'Roboto',sans-serif;font-size:15px;}
.review-dare-bounty{font-family:'Roboto',sans-serif;font-size:26px;letter-spacing:1px;color:var(--gold);line-height:1;}
.review-empty{text-align:center;padding:48px 24px;color:var(--t3);}
.review-empty .mi{font-size:44px;display:block;margin-bottom:12px;opacity:.4;}
.proof-item{background:var(--glass);backdrop-filter:var(--blur);border:1px solid var(--border);border-radius:18px;padding:18px;margin-bottom:12px;box-shadow:5px 5px 14px var(--neu-dark),-2px -2px 8px var(--neu-light),inset 0 1px 0 rgba(255,255,255,0.04);animation:fadeUp .3s both;}
.proof-item:hover{background:var(--glass2);border-color:var(--border2);}
.proof-item.approved{border-color:rgba(0,230,118,0.3);background:rgba(0,230,118,0.04);}
.proof-item.rejected{border-color:rgba(255,255,255,0.08);background:rgba(255,255,255,0.08);}
.proof-item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.taker-info{display:flex;align-items:center;gap:10px;}
.taker-av{width:38px;height:38px;border-radius:50%;background:#373737;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#fff;flex-shrink:0;box-shadow:2px 2px 6px var(--neu-dark);}
.taker-name{font-size:14px;font-weight:600;}
.taker-date{font-size:11px;color:var(--t3);margin-top:2px;font-family:'Roboto',sans-serif;}
.proof-file-row{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:10px;padding:10px 14px;margin-bottom:10px;font-size:13px;color:var(--t2);}
.proof-file-row .mi{font-size:18px;color:var(--blue2);}
.proof-note-box{background:rgba(255,255,255,0.03);border-radius:10px;padding:10px 14px;font-size:13px;color:var(--t3);margin-bottom:14px;line-height:1.6;font-style:italic;border-left:2px solid var(--border2);}
.proof-actions{display:flex;gap:10px;}
.btn-reject{flex:1;padding:11px;background:rgba(255,255,255,0.08);color:var(--red);border:1px solid rgba(255,255,255,0.08);border-radius:14px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .2s;}
.btn-reject:hover{background:rgba(255,255,255,0.08);transform:translateY(-1px);}
.btn-reject .mi{font-size:16px;}
.btn-approve{flex:2;padding:11px;background:linear-gradient(135deg,var(--green),#00b844);color:#fff;border:none;border-radius:14px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:6px;box-shadow:4px 4px 14px rgba(0,200,100,0.3);transition:all .2s;}
.btn-approve:hover{transform:translateY(-1px);box-shadow:6px 6px 20px rgba(0,200,100,0.45);}
.btn-approve .mi{font-size:16px;}

/* ═══════════════════════════════════════════════════════
   POST DARE MODAL EXTRAS
═══════════════════════════════════════════════════════ */
.post-dare-modal{max-width:600px;width:96vw;max-height:92vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.08) transparent;}
.post-dare-modal::-webkit-scrollbar{width:4px;}
.post-dare-modal::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2);border-radius:4px;}
.media-type-tabs{display:flex;gap:8px;margin-bottom:10px;}
.mtype-tab{display:flex;align-items:center;gap:5px;padding:6px 14px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:20px;color:var(--t3);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .18s;box-shadow:2px 2px 6px var(--neu-dark),-1px -1px 4px var(--neu-light);}
.mtype-tab .mi{font-size:15px;}
.mtype-tab.active{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.08);color:var(--blue);}
/* 16:9 — the shape the thumbnail is actually shown in everywhere else. A flat
   130px strip made the box look far wider than the picture it stands for. */
.dare-media-dz{width:100%;aspect-ratio:16/9;height:auto;border:2px dashed var(--border);border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden;background:rgba(255,255,255,.02);transition:border-color .2s,background .2s;}
.dare-media-dz:hover{border-color:rgba(255,255,255,0.08);background:rgba(255,255,255,0.08);}
.dare-media-dz.has-media{border-style:solid;border-color:rgba(255,255,255,0.08);}
.dz-inner{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:20px;pointer-events:none;}
.dz-action-row{display:flex;gap:8px;margin-top:8px;}
.dz-action-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:7px;color:var(--t2);font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;transition:all .15s;}
.dz-action-btn:hover{background:rgba(255,255,255,.10);color:var(--t1);}
.dz-action-btn .mi{font-size:14px;}
.dz-remove-btn:hover{background:rgba(255,59,48,.12);border-color:rgba(255,59,48,.4);color:#FF3B30;}
.fp-label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--t3);margin-bottom:8px;font-family:'Roboto',sans-serif;}
.fp-label .mi{font-size:15px;}
.fp-scrubber{width:100%;margin:6px 0 0;accent-color:#fff;cursor:pointer;height:4px;}
.fp-pencil-icon{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.65);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:16px;pointer-events:none;z-index:2;}
.tags-field{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:10px;padding:8px 10px;min-height:44px;display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px;transition:border-color .2s;}
.tags-field:focus-within{border-color:rgba(255,255,255,0.08);}
.post-tag-chips{display:flex;flex-wrap:wrap;gap:5px;}
.post-tag-chip{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.08);color:var(--blue2);padding:4px 9px;border-radius:14px;font-size:12px;font-weight:600;animation:fadeUp .15s ease;font-family:'Roboto',sans-serif;}
.post-tag-chip button{background:none;border:none;color:inherit;cursor:pointer;font-size:14px;line-height:1;padding:0;opacity:.65;margin-left:1px;}
.tags-inner-input{border:none;background:transparent;color:var(--t1);font-size:13px;outline:none;padding:3px 4px;min-width:140px;flex:1;font-family:inherit;}
.rule-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;animation:fadeUp .15s ease;}
.rule-num{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--t3);flex-shrink:0;box-shadow:2px 2px 5px var(--neu-dark),-1px -1px 3px var(--neu-light);}
.rule-del-btn{background:none;border:none;color:var(--t3);cursor:pointer;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;}
.rule-del-btn:hover{background:rgba(255,59,48,.15);color:#FF3B30;}
.rule-del-btn .mi{font-size:17px;}
.add-rule-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:9px;background:none;border:1px dashed var(--border);border-radius:8px;color:var(--t3);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .18s;}
.add-rule-btn:hover{border-color:rgba(255,255,255,0.08);color:var(--blue);background:rgba(255,255,255,0.08);}
.add-rule-btn .mi{font-size:16px;}
.vis-toggle-row{display:flex;gap:8px;flex-wrap:wrap;}
.vis-opt{display:flex;align-items:center;gap:6px;padding:8px 16px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:8px;color:var(--t3);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .18s;box-shadow:2px 2px 6px var(--neu-dark),-1px -1px 4px var(--neu-light);}
.vis-opt .mi{font-size:16px;}
.vis-opt.active{background:#fff;border-color:#fff;color:#000;}

/* ═══════════════════════════════════════════════════════
   PROOF MODAL v0.16
═══════════════════════════════════════════════════════ */
.proof-modal-v16{max-width:580px;width:96vw;max-height:92vh;overflow-y:auto;scrollbar-width:thin;}
.proof-checklist-wrap{background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:14px;}
.proof-checklist-hdr{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:10px;font-family:'Roboto',sans-serif;}
.proof-checklist-grid{display:flex;flex-direction:column;gap:6px;}
.proof-check-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:background .15s;user-select:none;}
.proof-check-item:hover{background:rgba(255,255,255,.04);}
.proof-check-item.checked{background:rgba(255,255,255,.08);}
.proof-check-icon{font-size:20px;color:var(--t3);flex-shrink:0;transition:color .2s;}
.proof-check-text{font-size:13px;color:var(--t2);}
.proof-check-item.checked .proof-check-text{color:var(--t1);}
.dur-warn{display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:8px;font-size:12px;font-weight:500;margin-bottom:10px;animation:fadeUp .2s ease;}
.dur-warn .mi{font-size:16px;flex-shrink:0;}
.dur-warn--error{background:rgba(255,59,48,.12);border:1px solid rgba(255,59,48,.3);color:#FF3B30;}
.dur-warn--warn{background:rgba(255,159,10,.10);border:1px solid rgba(255,159,10,.3);color:#FF9F0A;}
.dur-warn--ok{background:rgba(0,230,118,.10);border:1px solid rgba(0,230,118,.3);color:#00E676;}
.proof-fp-wrap{background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:12px;}
.proof-fp-label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--t3);margin-bottom:8px;font-family:'Roboto',sans-serif;}
.proof-fp-label .mi{font-size:15px;}
.cancel-upload-btn{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t3);padding:0;flex-shrink:0;transition:all .15s;}
.cancel-upload-btn:hover{background:rgba(255,59,48,.2);border-color:rgba(255,59,48,.4);color:#FF3B30;}
.cancel-upload-btn .mi{font-size:14px;}

/* ═══════════════════════════════════════════════════════
   AD SYSTEM
═══════════════════════════════════════════════════════ */
.ad-overlay{position:fixed;inset:0;background:rgba(0,0,0,.90);z-index:99999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s ease;backdrop-filter:var(--blur);}
.ad-overlay.active{opacity:1;pointer-events:all;}
.ad-box{background:rgba(14,6,6,0.98);border:1px solid var(--border2);border-radius:20px;width:min(540px,94vw);overflow:hidden;animation:scaleIn .25s cubic-bezier(.34,1.56,.64,1) both;box-shadow:10px 10px 32px var(--neu-dark),-4px -4px 14px var(--neu-light);}
.ad-top-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;background:rgba(255,255,255,.03);border-bottom:1px solid var(--border);}
.ad-label-badge{background:var(--orange);color:#000;font-size:10px;font-weight:800;padding:3px 9px;border-radius:5px;letter-spacing:.5px;font-family:'Roboto',sans-serif;}
.ad-num-txt{font-size:12px;color:var(--t3);font-family:'Roboto',sans-serif;}
.ad-content-area{min-height:260px;display:flex;align-items:center;justify-content:center;padding:36px 24px;background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(255,255,255,0.08),transparent),linear-gradient(135deg,#0a0404,#180a08);}
.ad-placeholder-wrap{text-align:center;max-width:360px;}
.ad-brand{font-size:13px;font-weight:700;color:var(--blue2);letter-spacing:2px;text-transform:uppercase;margin-bottom:16px;opacity:.7;font-family:'Roboto',sans-serif;}
.ad-headline{font-family:'Roboto',sans-serif;font-size:30px;letter-spacing:2px;color:#fff;line-height:1.2;margin-bottom:10px;}
.ad-desc{font-size:14px;color:var(--t3);line-height:1.6;margin-bottom:24px;}
.ad-cta-btn{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#0f0f0f;border:none;padding:12px 32px;border-radius:50px;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:4px 4px 16px rgba(0,0,0,0.3);}
.ad-cta-btn:hover{transform:translateY(-2px);box-shadow:6px 6px 24px rgba(0,0,0,0.3);}
.ad-testnet-badge{display:inline-block;background:rgba(255,159,10,.12);border:1px solid rgba(255,159,10,.35);color:#FF9F0A;font-size:11px;font-weight:600;padding:4px 12px;border-radius:20px;margin:8px 0 16px;letter-spacing:.3px;font-family:'Roboto',sans-serif;}
.ad-footer{padding:12px 18px 16px;border-top:1px solid var(--border);}
.ad-prog-track{height:3px;background:rgba(255,255,255,.08);border-radius:2px;margin-bottom:12px;overflow:hidden;}
.ad-prog-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--blue),var(--blue2));border-radius:2px;transition:width 1s linear;}
.ad-skip-row{display:flex;justify-content:space-between;align-items:center;}
.ad-countdown-txt{font-size:12px;color:var(--t3);font-family:'Roboto',sans-serif;}
.ad-skip-btn{background:rgba(255,255,255,.06);color:var(--t1);border:1px solid var(--border);padding:7px 18px;border-radius:8px;font-size:12px;font-family:inherit;cursor:pointer;transition:background .2s,opacity .2s;box-shadow:2px 2px 6px var(--neu-dark);}
.ad-skip-btn:not(:disabled):hover{background:rgba(255,255,255,.14);}
.ad-skip-btn:disabled{opacity:.35;cursor:not-allowed;}
.scroll-ad-banner{display:flex;align-items:center;gap:14px;background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:14px 18px;margin:8px 0 24px;animation:fadeUp .3s ease;position:relative;box-shadow:4px 4px 12px var(--neu-dark),-2px -2px 7px var(--neu-light);}
.scroll-ad-text{flex:1;}
.scroll-ad-title{font-size:14px;font-weight:600;color:var(--t1);margin-bottom:3px;}
.scroll-ad-sub{font-size:12px;color:var(--t3);font-family:'Roboto',sans-serif;}
.scroll-ad-cta{background:var(--blue);color:#0f0f0f;border:none;padding:8px 16px;border-radius:20px;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;white-space:nowrap;flex-shrink:0;box-shadow:3px 3px 8px rgba(0,0,0,0.3);}
.scroll-ad-close{background:none;border:none;color:var(--t3);cursor:pointer;padding:4px;display:flex;align-items:center;flex-shrink:0;}
.scroll-ad-close:hover{color:var(--t1);}
#adRealSlot{display:flex;align-items:center;justify-content:center;min-height:260px;}
.ad-content-area ins.adsbygoogle{overflow:hidden !important;border-radius:8px;}
.scroll-ins{vertical-align:middle;}

/* ═══════════════════════════════════════════════════════
   CATEGORY COLORS
═══════════════════════════════════════════════════════ */
.cat-fitness{background:rgba(255,255,255,0.08);color:#ff6b8a;border-color:rgba(255,255,255,0.08);}
.cat-food{background:rgba(255,101,53,0.15);color:#ff8a6b;border-color:rgba(255,101,53,0.3);}
.cat-adventure{background:rgba(0,230,118,0.15);color:#5ee87a;border-color:rgba(0,230,118,0.3);}
.cat-comedy{background:rgba(255,159,10,0.15);color:#ffbf40;border-color:rgba(255,159,10,0.3);}
.cat-talent{background:rgba(175,82,222,0.15);color:#d48eff;border-color:rgba(175,82,222,0.3);}
.cat-socialgood{background:rgba(90,200,250,0.15);color:#80d4ff;border-color:rgba(90,200,250,0.3);}
.thumb-fitness{background:linear-gradient(135deg,#200808,var(--blue));}
.thumb-food{background:linear-gradient(135deg,#1a0a06,var(--blue2));}
.thumb-adventure{background:linear-gradient(135deg,#041808,#30D158);}
.thumb-comedy{background:linear-gradient(135deg,#1a0e00,#FF9F0A);}
.thumb-talent{background:linear-gradient(135deg,#180822,#AF52DE);}
.thumb-socialgood{background:linear-gradient(135deg,#041422,#5AC8FA);}

/* ═══════════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════════ */
.toast{
  position:fixed;bottom:28px;left:50%;
  transform:translateX(-50%) translateY(80px);
  background:rgba(18,8,8,0.95);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border2);color:var(--t1);
  padding:13px 24px;border-radius:50px;
  font-size:13px;font-weight:500;z-index:400;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
  box-shadow:6px 6px 20px var(--neu-dark),-3px -3px 10px var(--neu-light);
  white-space:nowrap;font-family:'Roboto',sans-serif;
}
.toast.show{transform:translateX(-50%) translateY(0);}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */
@media(max-width:900px){
  .sidebar{width:72px;}
  .nav-lbl{display:none;}
  .nav-item{justify-content:center;padding:12px;}
  .nav-item .mi{font-size:24px;}
  .main{margin-left:72px;}
  .dare-list{columns:2;}
  .yt-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
}
@media(max-width:600px){
  .sidebar{width:56px;}
  .nav-item{padding:10px;justify-content:center;}
  .main{margin-left:56px;padding:12px;}
  .dare-list{columns:1;}
  .yt-grid{grid-template-columns:1fr 1fr;gap:12px;}
  .btn-post span:last-child{display:none;}
  .wallet-balance{font-size:36px;}
}
@media(max-width:420px){
  .yt-grid{grid-template-columns:1fr;}
}

/* ── Stats row ── */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:32px;}
.stat-card{background:var(--glass);backdrop-filter:var(--blur);border:1px solid var(--border);border-radius:var(--r);padding:20px;transition:all .25s;box-shadow:5px 5px 14px var(--neu-dark),-2px -2px 8px var(--neu-light),inset 0 1px 0 rgba(255,255,255,0.04);}
.stat-card:hover{background:var(--glass2);border-color:var(--border2);transform:translateY(-2px);}
.stat-lbl{font-size:10px;font-weight:600;color:var(--t3);margin-bottom:8px;text-transform:uppercase;letter-spacing:.8px;font-family:'Roboto',sans-serif;}
.stat-val{font-family:'Roboto',sans-serif;font-size:34px;letter-spacing:1px;line-height:1;}
.stat-val.blue{color:var(--blue2);}
.stat-val.green{color:var(--green);}
.stat-val.red{color:var(--red);}
.stat-sub{font-size:11px;color:var(--t3);margin-top:4px;font-family:'Roboto',sans-serif;}

/* ── p-stat color overrides ── */
.p-stat-val.blue{color:var(--blue2);}
.p-stat-val.green{color:var(--green);}


/* ═══ v19 FEATURE STYLES ═══ */

.sb-overlay{
  display:none;position:fixed;inset:0;z-index:98;
  background:rgba(0,0,0,.58);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  transition:opacity .25s;
}

.sb-overlay.show{display:block;}

/* ═══════════════════════════════════════════════════
   BOTTOM NAVIGATION (mobile only)
   ═══════════════════════════════════════════════════ */

.bottom-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:100;
  height:56px;background:#050505;
  border-top:1px solid rgba(255,255,255,.08);
  flex-direction:row;align-items:center;justify-content:space-around;
  padding:0 4px max(env(safe-area-inset-bottom,0px),4px);
}

.bn-item{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1px;background:none;border:none;
  color:rgba(255,255,255,.4);cursor:pointer;padding:6px 4px;
  font-family:inherit;transition:color .15s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}

.bn-item .mi{font-size:22px;line-height:1;}

.bn-item span:last-child{font-size:10px;font-weight:500;letter-spacing:.3px;}

.bn-item.active{color:#fff;}

.bn-item:active{opacity:.65;}

.bn-post{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;
  background:#1a1a1a; border:1px solid rgba(255,255,255,.16);
  border:none;color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(10,132,255,.45);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform .15s;
}

.bn-post:active{transform:scale(.9);}

.bn-post .mi{font-size:24px;}

/* Search icon — mobile only (hidden on desktop) */

.search-icon-btn{
  display:none;
  width:34px;height:34px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);border-radius:50%;
  align-items:center;justify-content:center;cursor:pointer;
  color:var(--t1);-webkit-tap-highlight-color:transparent;
}

/* Desktop collapsed sidebar (hamburger click) */

.sidebar-collapsed .sidebar{width:72px;}

.sidebar-collapsed .nav-lbl{display:none;}

.sidebar-collapsed .nav-item{justify-content:center;padding:12px;}

.sidebar-collapsed .main{margin-left:72px;}

/* ═══════════════════════════════════════════════════
   TABLET  600–900px
   ═══════════════════════════════════════════════════ */
@media(max-width:900px){
  .sidebar{width:72px;}
  .nav-lbl{display:none;}
  .nav-item{justify-content:center;padding:12px;}
  .nav-item .mi{font-size:24px;}
  .main{margin-left:72px;}
  .yt-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
  .dare-list-thumb{width:100px;}
  /* Expanded sidebar on tablet (hamburger) */
  .sidebar.open{
    width:var(--sw,240px);z-index:99;
  }
  .sidebar.open .nav-lbl{display:block;}
  .sidebar.open .nav-item{justify-content:flex-start;padding:10px 16px;}
}

/* ═══════════════════════════════════════════════════
   MOBILE  < 600px  — YouTube bottom-nav layout
   ═══════════════════════════════════════════════════ */
@media(max-width:599px){
  /* Show bottom nav */
  .bottom-nav{display:flex;}

  /* Sidebar: hidden by default, slides in as overlay */
  .sidebar{
    position:fixed;top:56px;left:0;bottom:0;z-index:9100;
    width:min(280px,80vw);
    transform:translateX(-110%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow:4px 0 24px rgba(0,0,0,.6);
    overflow-y:auto;padding-top:8px;padding-bottom:80px;
    justify-content:flex-start !important;
  }
  .sb-bottom{margin-top:8px;}
  .sidebar .nav-lbl{display:block !important;}
  .sidebar .nav-item{justify-content:flex-start !important;padding:14px 20px !important;}
  .sidebar.open{transform:translateX(0);}

  /* Main: no left margin, bottom padding for bottom nav */
  .main{margin-left:0 !important;padding:12px 12px 72px;}

  /* Topbar compact */
  .topbar{padding:0 12px;gap:8px;}
  .topbar-left{min-width:unset;gap:8px;}

  /* Hide logo text, show only icon */
  .logo-text-dare,.logo-text-market,
  .logo>span:not(.logo-icon){display:none;}

  /* Hide search bar — use icon instead */
  .search-wrap{display:none;}
  .search-icon-btn{display:flex;}
  /* #5: Mobile search opens as full-width overlay */
  .search-wrap.mobile-open{
    display:flex !important;position:fixed;top:0;left:0;right:0;z-index:300;
    margin:0;border-radius:0;height:56px;padding:0 16px;
    background:#1f1f1f;border:none;border-bottom:1px solid var(--border);
    align-items:center;
  }
  .search-wrap.mobile-open input{font-size:16px;}

  /* Hide desktop post button */
  .btn-post{display:none;}

  /* Cards 2-col */
  .yt-grid{grid-template-columns:1fr 1fr;gap:8px;}
  .yt-thumb{height:100px;}
  .yt-card{border-radius:10px;}

  /* Dare list stacked */
  .dare-list-card{flex-direction:column;gap:10px;}
  .dare-list-thumb{width:100%;height:90px;border-radius:12px;}
  .dare-list-bottom{flex-wrap:wrap;gap:8px;}

  /* Shorts */
  .short-card{width:130px;}
  .short-thumb{width:130px;height:230px;}

  /* Modals — bottom sheet on mobile */
  .overlay{align-items:flex-end;}
  .modal{
    max-width:100vw !important;border-radius:20px 20px 0 0;
    position:fixed;bottom:0;left:0;right:0;
    max-height:90dvh;overflow-y:auto;margin:0;
  }

  /* Ad overlay — bottom sheet */
  .ad-overlay{align-items:flex-end;}
  .ad-box{width:100%;border-radius:20px 20px 0 0;}

  /* Performance: disable heavy blur on mobile cards */
  .yt-card,.dare-list-card,.dare-mini{
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }

  /* Home sections */
  .home-section{margin-bottom:24px;}
  .home-sec-title{font-size:15px;}

  /* Profile */
  .prof-stats-row{grid-template-columns:1fr 1fr;}
  .mini-stats{grid-template-columns:repeat(2,1fr);}
  .pwc-btns{flex-direction:column;}
  .pwc-btns button{width:100%;}
}

/* ═══════════════════════════════════════════════════
   VERY SMALL  < 380px
   ═══════════════════════════════════════════════════ */
@media(max-width:380px){
  .yt-grid{grid-template-columns:1fr;}
  .yt-thumb{height:160px;}
  .topbar{padding:0 8px;}
  .main{padding:10px 10px 72px;}
}

/* ═══════════════════════════════════════════════════
   PERFORMANCE — low-end / prefers-reduced-motion
   ═══════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}

/* Touch optimisations — bigger targets, no tap delay */

.nav-item,.bn-item,.bn-post,.chip,.btn-post,.icon-btn,.search-icon-btn{
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}

/* ── CHIPS ── */

.reject-reason-box{margin-top:10px;}

.reject-reason-box textarea{
  width:100%;background:rgba(255,255,255,0.06);
  border:1px solid var(--border);color:var(--t1);
  padding:10px 14px;border-radius:12px;font-size:13px;
  outline:none;font-family:inherit;resize:none;height:72px;
  transition:border-color .2s;
}

.reject-reason-box textarea:focus{border-color:var(--red);}

.reject-reason-box textarea::placeholder{color:var(--t3);}

/* ═══════════════════════════════════════════════════════════════════
   POST DARE MODAL — v0.13
   Caption · Media Tabs · Frame Picker · Tags · Rules · Schedule
═══════════════════════════════════════════════════════════════════ */

/* Wider, scrollable modal for the new form */

.dare-pinned{
  border-color:rgba(155,114,255,0.35) !important;
  box-shadow:8px 8px 22px var(--neu-dark),-3px -3px 10px var(--neu-light),
    0 0 0 1px rgba(155,114,255,0.2),inset 0 1px 0 rgba(255,255,255,0.07) !important;
}

.pin-ribbon{
  position:absolute;top:0;left:0;z-index:3;
  background:linear-gradient(135deg,#9B72FF,#7B5EA7);
  color:#fff;font-size:10px;font-weight:700;
  padding:4px 12px 4px 10px;
  border-radius:0 0 10px 0;
  display:flex;align-items:center;gap:4px;
  font-family:'Roboto',sans-serif;letter-spacing:.5px;
}

.pin-ribbon .mi{font-size:13px;}

.dare-pinned-mini{
  border-color:rgba(155,114,255,0.3) !important;
  background:rgba(155,114,255,0.04) !important;
}

.pin-badge{
  font-size:13px;margin-left:6px;vertical-align:middle;
}

/* ── REPORT BUTTON (small flag icon on dare cards) ──────── */

.btn-report-icon{
  width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--t3);cursor:pointer;
  box-shadow:2px 2px 5px var(--neu-dark),-1px -1px 3px var(--neu-light);
  transition:all .2s;flex-shrink:0;
}

.btn-report-icon:hover{
  color:var(--red);background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.08);
}

.btn-report-icon .mi{font-size:14px;}

/* ── DARE ACTION BUTTONS (edit / delete / pin in profile) ── */

.btn-dare-action{
  width:32px;height:32px;border-radius:8px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--t2);cursor:pointer;
  box-shadow:2px 2px 6px var(--neu-dark),-1px -1px 4px var(--neu-light);
  transition:all .2s;
}

.btn-dare-action:hover{
  background:rgba(255,255,255,0.08);color:var(--t1);
  transform:translateY(-1px);
}

.btn-dare-action .mi{font-size:16px;}

.btn-dare-delete:hover{
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.08);color:var(--red);
}

.btn-dare-pinned{
  background:rgba(155,114,255,0.12);
  border-color:rgba(155,114,255,0.35);color:#9B72FF;
}

.btn-dare-pinned:hover{
  background:rgba(155,114,255,0.2);color:#9B72FF;
}

/* ── SELECT TAKERS BUTTON ───────────────────────────────── */

.btn-select-takers{
  display:flex;align-items:center;gap:5px;
  background:rgba(0,229,255,0.08);color:#00E5FF;
  border:1px solid rgba(0,229,255,0.3);
  padding:6px 12px;border-radius:50px;
  font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;
  transition:all .2s;position:relative;
}

.btn-select-takers:hover{background:rgba(0,229,255,0.18);}

.btn-select-takers .mi{font-size:15px;}

.select-badge{
  position:absolute;top:-6px;right:-6px;
  width:17px;height:17px;border-radius:50%;
  background:#00E5FF;color:#000;
  font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--bg);
}

/* ── APPLICANT ROW (in select takers modal) ─────────────── */

.applicant-row{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border);
  border-radius:14px;margin-bottom:8px;
  transition:all .2s;
}

.applicant-row:hover{background:rgba(255,255,255,0.06);}

.applicant-approved{
  background:rgba(0,230,118,0.05) !important;
  border-color:rgba(0,230,118,0.25) !important;
}

.applicant-av{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:#373737;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:16px;
  box-shadow:2px 2px 6px var(--neu-dark);
}

/* ── REPORT ITEM (in admin panel) ───────────────────────── */

.report-item{
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border);
  border-radius:14px;padding:16px;margin-bottom:10px;
  transition:all .2s;
}

.report-item:hover{background:rgba(255,255,255,0.05);}

/* ── EXPIRY BADGE on dare cards ─────────────────────────── */

.expiry-badge-critical{
  color:var(--red) !important;
  background:rgba(255,255,255,0.08) !important;
  border-color:rgba(255,255,255,0.08) !important;
}

/* ── RANDOM PANEL toggle ────────────────────────────────── */
#randomPanel.open{display:block !important;}

/* ── "Creator Picks" mode tag ───────────────────────────── */

.creator-picks-tag{
  font-size:10px;color:var(--orange);font-weight:600;
  padding:2px 8px;border-radius:50px;
  background:rgba(255,159,10,0.1);
  border:1px solid rgba(255,159,10,0.3);
  font-family:'Roboto',sans-serif;
}

/* ── Applied status btn ─────────────────────────────────── */

.btn-applied{
  background:rgba(255,159,10,0.1);color:var(--orange);
  border:1px solid rgba(255,159,10,0.3);
  padding:8px 14px;border-radius:50px;
  font-size:12px;font-weight:600;cursor:default;
  font-family:inherit;display:flex;align-items:center;gap:5px;
}

/* ── Admin link in dropdown ─────────────────────────────── */

.dd-item.admin-link{ color:#9B72FF; }

.dd-item.admin-link .mi{ color:#9B72FF; }

@media(max-width:599px){
  /* Show bottom nav */
  .bottom-nav{display:flex;}

  /* Sidebar: hidden by default, slides in as overlay */
  .sidebar{
    position:fixed;top:56px;left:0;bottom:0;z-index:9100;
    width:min(280px,80vw);
    transform:translateX(-110%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow:4px 0 24px rgba(0,0,0,.6);
    overflow-y:auto;padding-top:8px;padding-bottom:80px;
    justify-content:flex-start !important;
  }
  .sb-bottom{margin-top:8px;}
} /* end @media(max-width:599px) — FIX: was unclosed */

/* ═══════ ENGAGEMENT FEATURES CSS (guest/notif/video-detail/explorer/search) ═══════ */
/* ═══════════════════════════════════════════════════════════════════
   GUEST MODE — v0.19
   Browse as Guest · 15-min countdown · Action prompts · Expired popup
═══════════════════════════════════════════════════════════════════ */

/* ── Auth screen: Browse as Guest button ────────────────────────── */
.guest-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 12px;
  color: var(--t4);
  font-size: 12px;
}
.guest-divider::before,
.guest-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.btn-guest-entry {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  color: var(--t2);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all .18s;
}
.btn-guest-entry:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
  color: var(--t1);
}
.btn-guest-entry .mi { color: var(--t3); flex-shrink: 0; }

/* ── Guest topbar elements ──────────────────────────────────────── */
.guest-timer-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(255,159,10,.12);
  border: 1px solid rgba(255,159,10,.3);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #FF9F0A;
  font-family: 'SF Mono', monospace;
  transition: all .3s;
}
.guest-timer-badge.timer-warning {
  background: rgba(255,59,48,.15);
  border-color: rgba(255,59,48,.4);
  color: #FF3B30;
  animation: pulse-warn 1s ease-in-out infinite;
}
@keyframes pulse-warn {
  0%,100% { opacity: 1; }
  50%      { opacity: .65; }
}

.btn-login-topbar {
  padding: 6px 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 20px;
  color: var(--t2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.btn-login-topbar:hover { background: rgba(255,255,255,.14); color: var(--t1); }

.btn-signup-topbar {
  padding: 6px 14px;
  background: var(--blue2, #FFFFFF);
  border: none;
  border-radius: 20px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.btn-signup-topbar:hover { filter: brightness(1.12); }

/* ── Guest prompt / expired modal ───────────────────────────────── */
.guest-modal {
  max-width: 380px;
  text-align: center;
  padding: 32px 28px 24px;
}
.guest-modal-icon {
  font-size: 48px;
  margin-bottom: 14px;
  line-height: 1;
}
.guest-modal-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 10px;
}
.guest-modal-msg {
  font-size: 14px;
  color: var(--t3);
  line-height: 1.6;
  margin-bottom: 22px;
}
.btn-ghost-sm {
  display: block;
  width: 100%;
  padding: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  color: var(--t3);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  margin-bottom: 8px;
}
.btn-ghost-sm:hover { background: rgba(255,255,255,.09); color: var(--t2); }
.btn-ghost-sm.btn-tiny {
  background: none;
  border-color: transparent;
  font-size: 12px;
  color: var(--t4);
}
.btn-ghost-sm.btn-tiny:hover { color: var(--t3); background: none; }

/* ══════════════════════════════════════════════════════════════════
   v0.20 MERGE — v19 NEW FEATURES ADDED TO v18_4 BASE
   • Notification Panel + Bell Badge
   • Video Detail Overlay (YouTube-style full player)
   • Explorer / Trending Page
   • Improved Search (suggestions + type toggle)
   ══════════════════════════════════════════════════════════════════ */

/* ─── NOTIFICATION BELL + BADGE ──────────────────────────────── */
.notif-wrap { position: relative; }
.notif-btn  { position: relative; }
.notif-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  background: var(--red); border: 2px solid #050505; border-radius: 50%;
  font-size: 10px; font-weight: 800; color: #fff;
  display: flex; align-items: center; justify-content: center;
  animation: bounceIn .3s cubic-bezier(.34,1.56,.64,1) both; padding: 0 3px;
}
.notif-panel {
  /* Desktop: fixed (viewport-relative, top-level) dropdown near the bell, tall */
  position: fixed; top: 56px; right: 16px; width: 420px;
  height: calc(100vh - 76px);
  background: #1f1f1f;
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  display: none; flex-direction: column; overflow: hidden; z-index: 9200;
}
.notif-panel.open { display: flex; animation: scaleIn .22s cubic-bezier(.34,1.56,.64,1) both; }
.notif-panel-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.notif-panel-title { font-size: 15px; font-weight: 700; }
.notif-panel-close { background: none; border: none; color: var(--t3); cursor: pointer; padding: 4px; display: flex; align-items: center; }
.notif-panel-close .mi { font-size: 20px; }
.notif-panel-close:hover { color: var(--t1); }
.notif-list { overflow-y: auto; flex: 1; padding: 8px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent; }
.notif-list::-webkit-scrollbar { width: 4px; }
.notif-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; }
.notif-item {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px;
  border-radius: 14px; cursor: pointer; position: relative; transition: background .15s; margin-bottom: 2px;
}
.notif-item:hover { background: var(--glass2); }
.notif-item.unread { background: rgba(255,255,255,0.08); }
.notif-icon { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-size: 13px; font-weight: 600; line-height: 1.4; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-msg  { font-size: 12px; color: var(--t3); line-height: 1.5; }
.notif-time { font-size: 11px; color: rgba(255,255,255,.25); margin-top: 4px; }
.notif-dot  { width: 8px; height: 8px; background: var(--blue); border-radius: 50%; flex-shrink: 0; margin-top: 4px; box-shadow: 0 0 6px var(--blue); }
.notif-empty { text-align: center; padding: 40px 16px; color: var(--t3); }
.notif-empty .mi { font-size: 40px; display: block; margin-bottom: 10px; opacity: .35; }
.notif-empty div { font-size: 13px; }

/* ─── VIDEO DETAIL OVERLAY ───────────────────────────────────── */
.video-detail-overlay {
  position: fixed; inset: 0; background: var(--bg);
  z-index: 150; overflow-y: auto; opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.video-detail-overlay.open { opacity: 1; pointer-events: all; }
.vd-layout { display: flex; gap: 28px; max-width: 1400px; margin: 0 auto; padding: 0 24px 60px; min-height: 100vh; }
.vd-main   { flex: 1; min-width: 0; max-width: 900px; }
.vd-sidebar { width: 360px; flex-shrink: 0; padding-top: 72px; }
.vd-topbar {
  position: sticky; top: 0; z-index: 10; background: var(--bg);
  display: flex; align-items: center; gap: 12px; padding: 12px 0;
}
.vd-back-btn {
  width: 40px; height: 40px; background: var(--glass); border: 1px solid var(--border);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--t1); flex-shrink: 0; transition: background .15s;
}
.vd-back-btn:hover { background: var(--glass3); }
.vd-back-btn .mi { font-size: 22px; }
.vd-topbar-title { flex: 1; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-share-top-btn {
  width: 40px; height: 40px; background: var(--glass); border: 1px solid var(--border);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--t1); transition: background .15s;
}
.vd-share-top-btn:hover { background: var(--glass3); }
.vd-share-top-btn .mi { font-size: 18px; }
.vd-player { width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 12px; display: block; max-height: 60vh; object-fit: contain; }
.vd-info-block { padding: 16px 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.vd-title { font-size: 18px; font-weight: 700; letter-spacing: -.3px; line-height: 1.4; margin-bottom: 8px; }
.vd-views-date { font-size: 13px; color: var(--t3); margin-bottom: 12px; }
.vd-action-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.vd-action-btn {
  display: flex; align-items: center; gap: 6px;
  background: var(--glass); border: 1px solid var(--border); border-radius: 50px;
  padding: 8px 18px; font-size: 13px; font-weight: 600; color: var(--t2);
  cursor: pointer; font-family: inherit; transition: all .2s ease;
}
.vd-action-btn:hover { background: var(--glass3); color: var(--t1); }
/* red is gone from this theme; the vote state is the icon filling in */
.vd-action-btn.liked { background: transparent; border-color: transparent; color: #fff; }
.vd-action-btn .mi { font-size: 18px; }
.vd-bounty-pill { margin-left: auto; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08); border-radius: 50px; padding: 8px 16px; font-size: 14px; font-weight: 700; color: var(--blue2); }
.vd-taker-strip { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--glass); border: 1px solid var(--border); border-radius: 14px; }
.vd-taker-av { width: 40px; height: 40px; border-radius: 50%; background:#1a1a1a; border:1px solid rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: #fff; flex-shrink: 0; }
.vd-taker-info { flex: 1; }
.vd-taker-name { font-size: 14px; font-weight: 600; }
.vd-taker-sub  { font-size: 12px; color: var(--t3); margin-top: 2px; }
.vd-cat-pill   { font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 50px; }
.vd-comments-section { padding-top: 4px; }
.vd-sec-title  { font-size: 15px; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.vd-comment-input-row { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.vd-input-av { width: 36px; height: 36px; border-radius: 50%; background:#1a1a1a; border:1px solid rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: #fff; flex-shrink: 0; overflow: hidden; }
.vd-comment-field { flex: 1; display: flex; align-items: center; gap: 8px; background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--border); border-radius: 50px; padding: 0 8px 0 16px; transition: border-color .2s; }
.vd-comment-field:focus-within { border-color: var(--blue); }
.vd-comment-input { flex: 1; background: transparent; border: none; color: var(--t1); font-size: 13px; padding: 10px 0; outline: none; font-family: inherit; }
.vd-comment-input::placeholder { color: var(--t3); }
.vd-comment-send-btn { width: 32px; height: 32px; background: var(--blue); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color:#0f0f0f; transition: background .15s; flex-shrink: 0; }
.vd-comment-send-btn:hover { background: var(--blue2); }
.vd-comment-send-btn .mi { font-size: 16px; }
.vd-comment { display: flex; gap: 10px; margin-bottom: 16px; animation: fadeUp .2s ease both; }
.vd-comment-av { width: 34px; height: 34px; border-radius: 50%; background:#1a1a1a; border:1px solid rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: #fff; flex-shrink: 0; }
.vd-comment-body { flex: 1; min-width: 0; }
.vd-comment-author { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.vd-comment-time { font-size: 11px; color: var(--t3); font-weight: 400; }
.vd-comment-text { font-size: 13px; color: var(--t2); line-height: 1.6; }
/* Comment like / reply actions + nested replies + reply bar */
.vd-comment-acts, .shorts-comment-acts { display:flex; align-items:center; gap:14px; margin-top:6px; }
.cmt-act {
  background:none; border:none; cursor:pointer; color:var(--t3);
  font-family:inherit; font-size:12px; font-weight:600; padding:0;
  display:flex; align-items:center; gap:4px;
}
.cmt-act .mi { font-size:15px; }
.cmt-act:hover { color:var(--t1); }
.cmt-act.liked { color:var(--blue); }
.cmt-act.liked .mi { color:var(--blue); }
.vd-replies { margin-top:10px; padding-left:14px; border-left:2px solid var(--border); display:flex; flex-direction:column; gap:12px; }
.vd-reply .vd-comment-av { width:28px; height:28px; font-size:12px; }
/* per-comment 3-dots → Report menu (pinned to the comment's right edge) */
.vd-comment-acts .cmt-more { margin-left:auto; }
.cmt-more { position:relative; display:inline-flex; }
.cmt-3dots { background:none; border:none; color:var(--t3); cursor:pointer; padding:2px; display:inline-flex; align-items:center; border-radius:50%; font-family:inherit; }
.cmt-3dots .mi { font-size:18px; }
.cmt-3dots:hover { color:var(--t1); background:var(--glass3); }
.cmt-menu { display:none; position:absolute; top:26px; right:0; background:#282828; border:1px solid var(--border); border-radius:10px; padding:4px; z-index:60; box-shadow:0 8px 24px rgba(0,0,0,.55); }
.cmt-menu.open { display:block; }
.cmt-menu button { display:flex; align-items:center; gap:8px; background:none; border:none; color:var(--t1); font-size:13px; font-weight:600; padding:9px 16px; white-space:nowrap; cursor:pointer; border-radius:7px; font-family:inherit; }
.cmt-menu button:hover { background:var(--glass3); }
.cmt-menu button:hover .mi, .cmt-menu button:last-child:hover { color:var(--red); }
.cmt-menu button .mi { font-size:16px; }
/* Pinned comment marker */
.cmt-pinned { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; color:var(--blue2); margin-bottom:3px; }
.cmt-pinned .mi { font-size:14px; }
/* "Replying to @user" bar above the input */
.dd-reply-bar { align-items:center; gap:6px; font-size:12px; color:var(--t3); background:var(--bg3); border:1px solid var(--border); border-radius:8px; padding:6px 10px; margin-bottom:8px; }
.dd-reply-bar b { color:var(--blue2); }
.dd-reply-cancel { margin-left:auto; background:none; border:none; color:var(--t3); cursor:pointer; display:inline-flex; padding:2px; border-radius:50%; }
.dd-reply-cancel .mi { font-size:16px; }
.dd-reply-cancel:hover { color:var(--t1); }
.shorts-replies { margin-top:10px; padding-left:12px; border-left:2px solid rgba(255,255,255,.12); display:flex; flex-direction:column; gap:12px; }
.cmt-reply-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 14px; font-size:12px; color:var(--t2);
  background:rgba(255,255,255,.05); border-top:1px solid var(--border);
}
.cmt-reply-bar b { color:var(--t1); }
.cmt-reply-bar button { background:none; border:none; color:var(--t3); cursor:pointer; display:flex; }
.cmt-reply-bar .mi { font-size:18px; }
.vd-no-comments { text-align: center; padding: 32px 16px; color: var(--t3); }
.vd-no-comments .mi { font-size: 36px; display: block; margin-bottom: 8px; opacity: .3; }
.vd-related-card { display: flex; gap: 10px; cursor: pointer; border-radius: 12px; padding: 8px; margin-bottom: 10px; transition: background .15s; }
.vd-related-card:hover { background: var(--glass); }
.vd-related-thumb { width: 120px; height: 68px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: var(--glass); }
.vd-related-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vd-related-info { flex: 1; min-width: 0; }
.vd-related-title { font-size: 12px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; }
.vd-related-meta   { font-size: 11px; color: var(--t3); }
.vd-related-bounty { font-size: 11px; color: var(--blue2); font-weight: 600; margin-top: 3px; }

/* ─── ACTIVE DARE DETAIL PAGE (2c) ───────────────────────────── */
.dd-wrap { max-width: 760px; margin: 0 auto; padding: 0 16px 80px; }
.dd-hero { position:relative; width: 100%; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background: #1f1f1f; margin-bottom: 16px; }
/* Bounty badge — top-right corner of the thumbnail, $ prefixed */
.dd-bounty-badge { position:absolute; top:10px; right:10px; background:rgba(0,0,0,.72); color:var(--green); font-size:16px; font-weight:800; padding:5px 12px; border-radius:8px; letter-spacing:.3px; border:1px solid rgba(255,255,255,.12); }
/* Expiry badge — top-left corner of the thumbnail */
.dd-expiry-badge { position:absolute; top:10px; left:10px; display:inline-flex; align-items:center; gap:4px; background:rgba(0,0,0,.72); color:var(--orange); font-size:13px; font-weight:700; padding:5px 10px; border-radius:8px; border:1px solid rgba(255,159,10,.35); }
.dd-expiry-badge .mi { font-size:15px; }
.dd-hero-bg { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.dd-body { }
.dd-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.dd-creator { display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin:14px 0; }
.dd-creator-av { width:42px; height:42px; border-radius:50%; background:#373737; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; font-size:17px; flex-shrink:0; overflow:hidden; }
.dd-creator-name { font-size:14px; font-weight:600; color:var(--t1); }
.dd-creator-sub { font-size:12px; color:var(--t3); margin-top:2px; }
.dd-cta { margin: 4px 0 16px; }
.dd-sec-label { font-size:11px; font-weight:700; color:var(--blue2); text-transform:uppercase; letter-spacing:.6px; margin:14px 0 8px; }
.dd-desc-text { font-size:14px; color:var(--t2); line-height:1.6; white-space:pre-wrap; }
.dd-rule { font-size:13px; color:var(--t2); line-height:1.6; padding:2px 0; }
.dd-comments { margin-top:22px; padding-top:18px; border-top:1px solid var(--border); }

/* ═══ Active-dare detail — BAR 1 (thumbnail · reward · title · creator · actions) ═══ */
.dd-bar{ background:var(--bg2); border:1px solid var(--border); border-radius:16px; padding:16px; margin-bottom:16px; }
.dd-bar1 .dd-hero{ margin-bottom:0; }
.dd-reward{ font-size:30px; font-weight:800; color:var(--green); letter-spacing:.5px; margin:14px 0 6px; line-height:1; }
.dd-title{ font-size:20px; font-weight:700; color:var(--t1); line-height:1.35; margin:0 0 6px; }
.dd-bar1 .dd-creator{ border:none; padding:6px 0; margin:6px 0 2px; }
.dd-expiry{
  display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600;
  color:var(--orange); background:rgba(255,159,10,.12); border:1px solid rgba(255,159,10,.3);
  padding:3px 10px; border-radius:50px; margin:4px 0 2px; font-family:'IBM Plex Mono',monospace;
}
/* The dare's own back/title bar — solid page bg so the title never shows
   through content while scrolling (it stays fixed at the top) */
.dd-topbar{ background:#050505; }
/* Action buttons — one line (Accept · Like · Dislike · 3-dots) */
.dd-actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px; }
.dd-cta-inline{ flex-shrink:0; }
.dd-follow{ margin-left:auto; flex-shrink:0; }
/* creator row: photo · name · Follow · "X ago · N views" */
.dd-creator-info{ min-width:0; }
.dd-creator-meta{ font-size:12px; color:var(--t3); white-space:nowrap; flex-shrink:0; margin-left:10px; }
.dd-creator .dd-follow + .dd-creator-meta{ margin-left:10px; }
.dd-creator:not(:has(.dd-follow)) .dd-creator-meta{ margin-left:auto; }
/* 3-dots action menu (Share / Report) */
.dd-more{ position:relative; flex-shrink:0; display:inline-flex; }
.dd-action-menu{ display:none; position:absolute; bottom:46px; right:0; background:#282828; border:1px solid var(--border); border-radius:12px; padding:5px; z-index:60; box-shadow:0 8px 24px rgba(0,0,0,.5); }
.dd-action-menu.open{ display:block; }
.dd-action-menu button{ display:flex; align-items:center; gap:9px; width:100%; background:none; border:none; color:var(--t1); font-size:13px; font-weight:600; padding:9px 16px; white-space:nowrap; cursor:pointer; border-radius:8px; font-family:inherit; }
.dd-action-menu button:hover{ background:var(--glass3); }
.dd-action-menu button .mi{ font-size:18px; }
/* comments-count chip beside the "Comments" heading */
.dd-cmt-count{ font-size:13px; color:var(--t3); font-weight:600; }
/* #tags below description+rules — always blue, clickable */
.dd-tag-link{ font-size:13px; font-weight:600; color:var(--blue2); cursor:pointer; }
.dd-tag-link:hover{ text-decoration:underline; }
.dd-col1 .dd-tags{ display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 4px; }
.dd-col2 .dd-tags{ display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
.dd-col2 .dd-sec-label{ margin-top:0; }
.dd-col2 #ddRulesBar .dd-sec-label{ margin-top:16px; }
/* Comments + "View all" (mobile) */
.dd-comments .vd-comment{ margin-top:14px; }
.dd-viewall{ background:var(--bg3); border:1px solid var(--border); color:var(--t1); font-weight:600; font-size:13px; cursor:pointer; margin-top:14px; padding:9px 16px; border-radius:50px; font-family:inherit; width:100%; }
.dd-viewall:hover{ background:var(--glass3); }

/* Related-dare cards (Col 3) — 16:9 thumb + caption + meta + bounty */
.dd-related-grid{ display:flex; flex-direction:column; gap:0; }
/* Related sidebar now reuses home cards (.feed-longs + .shorts-row) — keep them
   single-column and inside the 360px rail (no negative bleed, no min-320 grid) */
#vdRelated .feed-longs{ display:flex !important; flex-direction:column !important; gap:18px !important; margin:0 !important; grid-template-columns:none !important; }
#vdRelated .feed-longs .yt-thumb{ border-radius:12px !important; }
#vdRelated .shorts-home-sec{ margin:18px 0 0; }
/* Related-rail shorts: small YouTube-sidebar size (proportionally smaller than home) */
#vdRelated .short-card{ flex:0 0 128px !important; }
#vdRelated .short-thumb{ width:128px !important; }
.dd-rel-card{ cursor:pointer; margin-bottom:16px; }
.dd-rel-thumb{ position:relative; width:100%; aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:#1f1f1f; }
/* Related column "Shorts" horizontal-scroll row (like the home feed) */
.dd-rel-shortsrow-label{ display:flex; align-items:center; gap:6px; font-size:14px; font-weight:700; color:var(--t1); margin:8px 0 10px; }
.dd-rel-shortsrow-label .mi{ color:var(--blue); font-size:18px; }
.dd-rel-shortsrow{ display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; margin-bottom:8px; scrollbar-width:none; }
.dd-rel-shortsrow::-webkit-scrollbar{ display:none; }
.dd-rel-short{ flex:0 0 auto; width:118px; cursor:pointer; }
.dd-rel-short-thumb{ position:relative; width:118px; aspect-ratio:9/16; border-radius:10px; overflow:hidden; background:#1f1f1f; }
.dd-rel-short-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.dd-rel-short-bg{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.dd-rel-short-title{ font-size:12px; color:var(--t1); margin-top:6px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.dd-rel-short-meta{ font-size:11px; color:var(--t3); margin-top:3px; }
.dd-rel-short .dd-rel-badge{ top:6px; right:6px; font-size:11px; padding:2px 7px; }
.dd-rel-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.dd-rel-thumb-bg{ display:flex; align-items:center; justify-content:center; }
.dd-rel-thumb-bg .mi{ font-size:36px; }
.dd-rel-badge{ position:absolute; top:8px; right:8px; background:rgba(0,0,0,.75); color:var(--green); font-size:12px; font-weight:800; padding:3px 9px; border-radius:6px; border:1px solid rgba(255,255,255,.12); }
.dd-rel-title{ font-size:14px; font-weight:600; color:var(--t1); margin-top:8px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.dd-rel-meta{ font-size:12px; color:var(--t3); margin-top:3px; }

/* Long-video page: player wrap (16:9) + bounty badge + dual creator/taker avatars */
.vd2-player-wrap{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:14px; overflow:hidden; margin-bottom:14px; }
.vd2-player-wrap .vd-player{ width:100%; height:100%; max-height:none; border-radius:0; aspect-ratio:auto; object-fit:contain; display:block; }
.vd2-collab-avs{ position:relative; width:60px; height:42px; flex-shrink:0; }
.vd2-collab-avs .dd-creator-av{ position:absolute; top:0; left:0; width:38px; height:38px; border:2px solid var(--bg2); }
.vd2-collab-avs .vd2-av2{ left:22px; }
/* Mobile: YouTube-style — video fixed at the top edge-to-edge, rest scrolls under it */
@media(max-width:768px){
  #videoDetailOverlay .vd2-player-wrap{ position:fixed; top:56px; left:0; right:0; width:100%; margin:0; border-radius:0; z-index:7; }
  #videoDetailOverlay .dd-col1{ padding-top:calc(56.25vw + 14px); }
  /* drop the light-black content box → seamless pure black (keep padding so the
     fixed-video clearance on .dd-col1 isn't clobbered — .dd-col1 is also a .dd-bar) */
  #dareDetailOverlay .dd-bar, #videoDetailOverlay .dd-bar{ background:transparent; border:none; border-radius:0; }
  /* details + related videos/more dares span the FULL width — drop the side padding (keep top/bottom) */
  #videoDetailOverlay .dd-col1, #dareDetailOverlay .dd-col1,
  #videoDetailOverlay .dd-col3, #dareDetailOverlay .dd-col3{ padding-left:0; padding-right:0; }
  /* related long-video cards bleed edge-to-edge like the home feed (wrap has 16px side padding) */
  #vdRelated .feed-longs{ margin:0 -16px !important; }
  #vdRelated .feed-longs .yt-thumb{ border-radius:0 !important; }
  #vdRelated .shorts-home-sec{ margin-left:-16px; margin-right:-16px; }
  #vdRelated .shorts-home-sec .home-sec-hdr, #vdRelated .shorts-row{ padding-left:16px; }
  /* Mission detail is immersive on mobile: no floating back bar over the
     thumbnail at all. It was absolutely positioned, so removing it costs no
     layout — the content already started at the top. Back is the device
     gesture / button, and Share + Report still live in the ••• on the actions
     row. Desktop keeps its sticky bar. */
  #dareDetailOverlay .dd-topbar{ display:none !important; }
  #dareDetailOverlay .dd-col1{ padding-top:0; }
}
/* Hamburger drawer must also work on 600–768px widths (matches JS isMobile≤768) */
@media(min-width:600px) and (max-width:768px){
  .bottom-nav{ display:flex; }
  .sidebar{ position:fixed; top:56px; left:0; bottom:0; z-index:9100; width:min(280px,80vw);
    transform:translateX(-110%); transition:transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow:4px 0 24px rgba(0,0,0,.6); overflow-y:auto; padding-top:8px; padding-bottom:80px; justify-content:flex-start !important; }
  .sidebar .nav-lbl{ display:block !important; }
  .sidebar .nav-item{ justify-content:flex-start !important; padding:14px 20px !important; }
  .sidebar.open{ transform:translateX(0); }
  .sb-overlay{ z-index:9050; }
  .main{ margin-left:0 !important; }
}
/* Notification panel — slightly glassy (desktop + mobile) */
.notif-panel{ background:rgba(18,18,18,.80) !important; backdrop-filter:var(--blur) !important; -webkit-backdrop-filter:var(--blur) !important; }

/* Keep the main topbar visible — the dare / video page opens BELOW it */
#dareDetailOverlay, #videoDetailOverlay{ top:56px; }
/* Topbar turns solid (not transparent) while a detail overlay is open */
body.detail-open .topbar{ background:#000 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }

/* Scroll-to-top arrow (appears after scrolling the comments/columns down) */
.dd-scrolltop{ position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%; border:1px solid var(--border2); background:#1a1a1a; color:var(--t1); cursor:pointer; display:none; align-items:center; justify-content:center; z-index:170; box-shadow:0 6px 20px rgba(0,0,0,.55); }
.dd-scrolltop.show{ display:flex; }
.dd-scrolltop:hover{ background:#262626; }

/* Desktop: 3 columns, each scrolls independently; page opens beside the rail */
@media(min-width:769px){
  #dareDetailOverlay, #videoDetailOverlay{ left:72px; overflow:hidden; }   /* the rail never widens now */
  #dareDetailOverlay .dd-wrap, #videoDetailOverlay .dd-wrap{ height:100%; max-width:1320px; display:flex; flex-direction:column; padding:0 16px; }
  #dareDetailOverlay .dd-layout, #videoDetailOverlay .dd-layout{ display:flex; gap:18px; align-items:stretch; flex:1; min-height:0; padding-bottom:16px; }
  #dareDetailOverlay .dd-layout > .dd-bar, #videoDetailOverlay .dd-layout > .dd-bar{ margin-bottom:0; overflow-y:auto; }
  .dd-col1{ flex:1.5; min-width:0; }
  .dd-col2{ flex:1; min-width:0; }
  .dd-col3{ width:300px; flex-shrink:0; }
  /* Long-video page: description column hidden by default → toggled to 3 cols */
  #videoDetailOverlay .dd-col2{ display:none; }
  #videoDetailOverlay.vd-show-desc .dd-col2{ display:block; }
  /* 2-column (no description) → make the Related column noticeably wider (~1.5x,
     proportional so it scales and never squeezes the video). col1:col3 = 2:1 ≈ 33% */
  #videoDetailOverlay:not(.vd-show-desc) .dd-col1{ flex:2; }
  #videoDetailOverlay:not(.vd-show-desc) .dd-col3{ flex:1; width:auto; min-width:300px; }
  /* slim scrollbars inside the columns */
  #dareDetailOverlay .dd-bar::-webkit-scrollbar, #videoDetailOverlay .dd-bar::-webkit-scrollbar{ width:8px; }
  #dareDetailOverlay .dd-bar::-webkit-scrollbar-thumb, #videoDetailOverlay .dd-bar::-webkit-scrollbar-thumb{ background:#333; border-radius:8px; }
}
/* Mobile: related dares = 1-per-row full-width 16:9 (bigger, YouTube-style) */
@media(max-width:768px){
  .dd-related-grid{ display:flex; flex-direction:column; gap:16px; }
  .dd-creator{ flex-wrap:wrap; }
  .dd-creator-meta{ width:100%; margin-left:0 !important; margin-top:4px; }
  /* Description/rules — swipe-left drawer (restored to original) */
  .dd-col2{ position:fixed; top:56px; right:0; bottom:0; width:86%; max-width:380px;
    transform:translateX(102%); transition:transform .28s cubic-bezier(.4,0,.2,1);
    z-index:168; overflow-y:auto; border-radius:16px 0 0 16px; box-shadow:-8px 0 28px rgba(0,0,0,.6); }
  .dd-col2.open{ transform:translateX(0); }
}
/* "Description & rules" button — base style (dare: mobile-only; video: always) */
.dd-details-btn{ display:none; align-items:center; gap:10px; width:100%; background:var(--bg3); border:1px solid var(--border); color:var(--t1); font-size:14px; font-weight:600; padding:12px 14px; border-radius:12px; margin:4px 0 14px; cursor:pointer; font-family:inherit; }
.dd-details-btn .mi{ font-size:20px; color:var(--t2); }
.dd-details-chev{ margin-left:auto; }
@media(max-width:768px){ .dd-details-btn{ display:flex; } }
/* Long-video page shows the button on desktop too (description starts hidden) */
#videoDetailOverlay .dd-details-btn{ display:flex; }
/* col2 close button (mobile drawer only) */
.dd-col2-close{ display:none; }
@media(max-width:768px){
  .dd-col2-close{ display:inline-flex; align-items:center; justify-content:center; float:right; width:34px; height:34px; border-radius:50%; background:var(--bg3); border:1px solid var(--border); color:var(--t1); cursor:pointer; margin:-4px -4px 6px 6px; }
  /* details drawer — notification-panel glass (site glass standard, restored) */
  #dareDetailOverlay .dd-col2, #videoDetailOverlay .dd-col2{ background:#000 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; border-left:1px solid rgba(255,255,255,.14) !important; }
}

/* ─── Comments box (scrollable, with close — desktop + mobile) ─── */
.dd-preview-comment{ margin-top:14px; }
.dd-cbox-overlay{ position:fixed; inset:0; z-index:180; background:transparent; display:none; }
.dd-cbox-overlay.open{ display:block; }
/* Mobile: HALF-screen bottom-sheet (doesn't cover the top / bezels) — glassy */
.dd-cbox{ position:absolute; left:0; right:0; bottom:0; height:62vh;
  background:rgba(14,14,14,.82) !important;
  backdrop-filter:var(--blur) !important; -webkit-backdrop-filter:var(--blur) !important;
  border:1px solid rgba(255,255,255,.10); display:flex; flex-direction:column; border-radius:16px 16px 0 0; overflow:hidden; }
.dd-cbox-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); flex-shrink:0; }
.dd-cbox-title{ display:flex; align-items:center; gap:8px; font-size:16px; font-weight:700; color:var(--t1); }
.dd-cbox-title .mi{ font-size:20px; }
.dd-cbox-count, #ddBoxCount{ color:var(--t3); font-weight:600; }
.dd-cbox-close{ width:34px; height:34px; border-radius:50%; background:var(--bg3); border:1px solid var(--border); color:var(--t1); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.dd-cbox-close:hover{ background:var(--glass3); }
.dd-cbox-list{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:18px; }
.dd-cbox-foot{ flex-shrink:0; border-top:1px solid var(--border); padding:12px 16px; background:#0f0f0f; }
.dd-cbox-foot .vd-comment-input-row{ margin:0; }
/* Desktop: the box is positioned by JS to exactly overlap column 1 (rounded) */
@media(min-width:769px){ .dd-cbox{ border-radius:16px; } }
/* Mobile: the sheet's top edge is measured from the real picture in JS
   (_cboxFit) — the old calc assumed a 56px top bar these pages no longer have,
   and it only ever applied to the video page. */
/* Show/hide-replies toggle inside the box */
.cmt-reptoggle{ display:inline-flex; align-items:center; gap:5px; background:none; border:none; color:var(--blue2); font-size:13px; font-weight:600; cursor:pointer; padding:6px 0; margin-top:4px; font-family:inherit; }
.cmt-reptoggle .mi{ font-size:18px; }
/* col-1 title (full caption, below thumbnail) */
.dd-title2{ font-size:18px; font-weight:700; color:var(--t1); line-height:1.35; margin:10px 0 4px; }
/* Dare top bar: title + 3-dots appear only after scrolling past the title */
#dareDetailOverlay .vd-topbar-title{ opacity:0; transition:opacity .2s ease; }
#dareDetailOverlay.dd-scrolled .vd-topbar-title{ opacity:1; }
.dd-top-more{ display:none !important; }
#dareDetailOverlay.dd-scrolled .dd-top-more{ display:inline-flex !important; }
.dd-top-more .dd-action-menu{ top:46px; bottom:auto; }
/* Mobile hamburger drawer must sit ABOVE the dare/video overlay (z 150) */
@media(max-width:599px){
  .sb-overlay{ z-index:9050; }
  .sidebar{ z-index:9100 !important; }
}

/* ─── EXPLORER / TRENDING PAGE ───────────────────────────────── */
.exp-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 16px; scrollbar-width: none; margin-bottom: 8px; }
.exp-tabs::-webkit-scrollbar { display: none; }
.exp-tab { padding: 8px 18px; background: var(--glass); border: 1px solid var(--border); border-radius: 50px; font-size: 13px; font-weight: 600; color: var(--t3); cursor: pointer; font-family: inherit; white-space: nowrap; transition: all .2s ease; flex-shrink: 0; }
.exp-tab:hover  { background: var(--glass3); color: var(--t1); }
.exp-tab.active { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.08); color: var(--t1); box-shadow: 0 0 12px rgba(255,255,255,0.08); }
.exp-section { margin-bottom: 48px; animation: fadeUp .35s ease both; }
.exp-sec-hdr { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.exp-fire     { font-size: 24px; line-height: 1; }
.exp-sec-title { font-size: 17px; font-weight: 700; letter-spacing: -.3px; }
.exp-sec-sub   { font-size: 12px; color: var(--t3); }
.exp-empty { text-align: center; padding: 32px 16px; color: var(--t3); font-size: 13px; background: var(--glass); border: 1px dashed var(--border2); border-radius: 16px; }
.trending-searches-list { display: flex; flex-direction: column; gap: 4px; }
.trending-search-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--glass); border: 1px solid var(--border); border-radius: 14px; cursor: pointer; transition: all .2s ease; }
.trending-search-row:hover { background: var(--glass2); border-color: var(--border2); transform: translateX(4px); }
.trending-rank { font-size: 18px; min-width: 36px; text-align: center; }
.trending-term { flex: 1; font-size: 15px; font-weight: 600; color: var(--t1); }
.trending-count { font-size: 12px; color: var(--t3); flex-shrink: 0; }

/* ─── IMPROVED SEARCH ────────────────────────────────────────── */
.search-suggestions {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: rgba(18,18,28,0.96); backdrop-filter:var(--blur);
  border: 1px solid var(--border2); border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55); overflow: hidden; z-index: 500;
  animation: scaleIn .18s cubic-bezier(.34,1.56,.64,1) both;
}
.sug-item { display: flex; align-items: center; gap: 10px; padding: 11px 16px; cursor: pointer; font-size: 13px; color: var(--t2); transition: background .12s; }
.sug-item:hover { background: var(--glass2); color: var(--t1); }
.sug-type { margin-left: auto; font-size: 10px; font-weight: 700; color: rgba(255,255,255,.25); text-transform: uppercase; letter-spacing: .5px; background: rgba(255,255,255,.06); padding: 2px 7px; border-radius: 6px; }
.search-back-btn { display:inline-flex; align-items:center; gap:6px; background:var(--bg3); border:1px solid var(--border); color:var(--t1); font-size:13px; font-weight:600; padding:8px 16px; border-radius:50px; cursor:pointer; font-family:inherit; margin-bottom:14px; }
.search-back-btn:hover { background:var(--glass3); }
.search-back-btn .mi { font-size:18px; }
.search-type-bar { display: flex; gap: 8px; margin-bottom: 18px; }
.search-type-btn { display: flex; align-items: center; gap: 6px; padding: 8px 18px; background: var(--glass); border: 1px solid var(--border); border-radius: 50px; font-size: 13px; font-weight: 600; color: var(--t3); cursor: pointer; font-family: inherit; transition: all .2s ease; }
.search-type-btn .mi { font-size: 16px; }
.search-type-btn.active { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.08); color: var(--t1); }
.search-type-btn:hover:not(.active) { background: var(--glass3); color: var(--t2); }
.search-section-label { font-size: 11px; font-weight: 700; color: var(--blue2); text-transform: uppercase; letter-spacing: .6px; margin: 4px 0 10px; padding: 0 4px; }

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1100px) { .vd-sidebar { width: 300px; } }
@media (max-width: 860px)  {
  .vd-layout { flex-direction: column; padding: 0 12px 60px; gap: 0; }
  .vd-sidebar { width: 100%; padding-top: 0; margin-top: 24px; }
  .vd-player  { border-radius: 0; max-height: 56vw; }
  .vd-topbar  { padding: 10px 0; }
  .vd-title   { font-size: 15px; }
  
}
@media (max-width: 600px)  {
  .vd-action-btn { padding: 7px 12px; font-size: 12px; }
  .vd-bounty-pill { padding: 7px 12px; font-size: 13px; }
  .exp-tab { font-size: 12px; padding: 7px 14px; }
  .search-type-btn { padding: 7px 12px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════
   VERTICAL CLIP PLAYER
   ═══════════════════════════════════════════════════════════ */
.shorts-overlay{
  position:fixed;inset:0;z-index:400;background:#050505;
  display:none;overflow:hidden;
}
.shorts-overlay.open{display:block;}
.shorts-close{
  position:absolute;top:16px;left:16px;z-index:20;
  width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,0.1);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.shorts-close:hover{background:rgba(255,255,255,0.2);}
.shorts-close .mi{font-size:24px;}

.shorts-stage{
  height:100%;display:flex;align-items:center;justify-content:center;
  gap:16px;position:relative;transition:transform .3s;
}

/* Video column */
/* Video column = the sized 9:16 box; holds the scroll-snap stack + a fixed overlay */
.shorts-video-col{
  position:relative; height:90vh; aspect-ratio:9/16; max-width:500px; width:auto;
  flex-shrink:0; background:#000; border-radius:12px; overflow:hidden;
}
/* Fixed overlay over the centered video — pass scroll through, only controls click */
.shorts-overlay-layer{ position:absolute; inset:0; z-index:5; pointer-events:none; }
.shorts-overlay-layer .shorts-top-ctrl button,
.shorts-overlay-layer .shorts-dots,
.shorts-overlay-layer .shorts-seek,
.shorts-overlay-layer .shorts-menu,
.shorts-overlay-layer .shorts-follow,
.shorts-overlay-layer .shorts-cap-toggle{ pointer-events:auto; }
.shorts-video-wrap{ position:relative; }   /* legacy class, unused */
.shorts-video{width:100%;height:100%;object-fit:cover;display:block;background:#000;}

/* Native controls only show on hover (YouTube behavior) */
.shorts-video::-webkit-media-controls{opacity:0;transition:opacity .2s;}
.shorts-video-wrap:hover .shorts-video::-webkit-media-controls{opacity:1;}

/* 3-dots — always visible & on top so it stays clickable */
.shorts-dots{
  position:absolute;top:12px;right:12px;z-index:9;
  width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(0,0,0,0.5);color:#fff;
  display:flex;align-items:center;justify-content:center;opacity:1;transition:background .2s;
}
.shorts-dots:hover{background:rgba(0,0,0,0.7);}
.shorts-dots .mi{font-size:22px;}

/* Top-LEFT controls (play/pause, mute, time) — width = content, never under the 3-dots */
.shorts-top-ctrl{
  position:absolute;top:0;left:0;z-index:7;width:auto;
  display:flex;align-items:center;gap:8px;padding:10px 12px;
  background:linear-gradient(135deg,rgba(0,0,0,.55),transparent);
}
.shorts-top-ctrl button{
  background:none;border:none;color:#fff;cursor:pointer;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.shorts-top-ctrl button .mi{font-size:24px;}
.shorts-time{font-size:12px;color:#fff;flex-shrink:0;min-width:38px;font-family:'IBM Plex Mono',monospace;}

/* Seek bar — BOTTOM, full width, red */
.shorts-seek-wrap{
  position:absolute;bottom:0;left:0;right:0;z-index:8;
  padding:0 10px 8px;
}
.shorts-seek{
  width:100%;height:4px;accent-color:#FFFFFF;cursor:pointer;display:block;
}

/* Desktop (hover-capable): reveal play/mute/3-dots only on hover (YouTube-style).
   Touch devices keep them visible. */
@media(hover:hover){
  .shorts-top-ctrl, .shorts-dots{ opacity:0; transition:opacity .2s; }
  .shorts-slide-box:hover .shorts-top-ctrl,
  .shorts-slide-box:hover .shorts-dots{ opacity:1; }
}

/* expanded caption's description (left bottom) */
.shorts-desc{ display:block; margin-top:6px; font-size:13px; color:#ddd; line-height:1.5; }

/* 3-dots menu */
.shorts-menu{
  position:absolute;top:54px;right:12px;z-index:10;width:300px;max-height:70%;
  overflow-y:auto;background:#212121;border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,.6);display:none;
}
/* Glassy + centered (override the minimalism flat/solid rules) */
/* Desktop: menu near the rail (right side), not centered */
/* Placed in JS, beside the dots that opened it. The old fixed corner position
   and the glass are gone — this rule is an ID selector, so it was outranking
   the flat-black pass and kept the blur alive. */
#shortsMenu.shorts-menu{
  transform:none !important;
  background:#000 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:1px solid rgba(255,255,255,.28) !important;
  border-radius:14px !important;
  box-shadow:0 12px 40px rgba(0,0,0,.6) !important;
}
/* Details shown in the left info area (desktop) */
.shorts-details-left{
  margin-bottom:10px; padding:10px 12px; border-radius:10px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  max-height:34vh; overflow-y:auto;
}
.shorts-details-left .dd-desc-text{ font-size:13px; color:#ddd; line-height:1.5; }
.shorts-menu.open{display:block;}
.shorts-menu-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.1);
  font-weight:600;font-size:15px;position:sticky;top:0;background:transparent;
}
.shorts-menu-hdr button{background:none;border:none;color:var(--t2);cursor:pointer;}
.shorts-menu-body{padding:8px 16px 16px;}
.shorts-menu-row{
  display:flex;flex-direction:column;gap:3px;padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.06);font-size:13px;color:var(--t1);
}
.shorts-menu-label{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;}
.shorts-follow-mini{
  margin-left:8px;padding:3px 12px;border-radius:50px;border:none;cursor:pointer;
  background:#fff;color:#0f0f0f;font-size:12px;font-weight:600;font-family:inherit;
}
.shorts-menu-action{
  width:100%;margin-top:8px;padding:10px 12px;border-radius:8px;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:var(--t1);
  font-size:13px;font-weight:500;font-family:inherit;
  display:flex;align-items:center;gap:10px;
}
.shorts-menu-action:hover{background:rgba(255,255,255,.12);}
.shorts-menu-action .mi{font-size:20px;}
/* "Details" expandable block (caption + description + rules) */
.shorts-details-block{
  margin:8px 0;padding:4px 12px;border-radius:10px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
}
.shorts-details-block .shorts-menu-row{border-bottom:1px solid rgba(255,255,255,.06);}
.shorts-details-block .shorts-menu-row:last-child{border-bottom:none;}
.shorts-rule-item{font-size:13px;color:var(--t1);line-height:1.5;}
.shorts-menu-report{
  width:100%;margin-top:12px;padding:10px;border-radius:8px;cursor:pointer;
  background:rgba(255,0,51,0.1);border:1px solid rgba(255,0,51,0.3);color:#FF4E45;
  font-size:13px;font-weight:600;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:6px;
}

/* Bottom-left info */
.shorts-info{
  position:absolute;left:16px;right:70px;bottom:28px;z-index:5;
  text-shadow:0 1px 4px rgba(0,0,0,.8);
}
.shorts-creator-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
/* Taker line (below creator) */
.shorts-taker-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13px;color:#fff;}
.shorts-taker-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#bbb;background:rgba(255,255,255,.12);padding:2px 7px;border-radius:50px;}
.shorts-taker-name{font-weight:600;color:#fff;}
.shorts-creator-av{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#FFFFFF,#D9D9D9);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;color:#0f0f0f;font-size:15px;
}
.shorts-creator-name{font-weight:600;font-size:15px;color:#fff;}
.shorts-follow{
  padding:6px 16px;border-radius:50px;border:none;cursor:pointer;
  background:#fff;color:#0f0f0f;font-size:13px;font-weight:600;font-family:inherit;
}
.shorts-follow:hover{background:#e0e0e0;}
.shorts-caption{font-size:14px;color:#fff;line-height:1.5;max-width:100%;}
.shorts-cap-toggle{color:#aaa;cursor:pointer;font-weight:600;}
.shorts-cap-toggle:hover{color:#fff;}

/* Right action rail */
.shorts-actions{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  align-self:flex-end;padding-bottom:20px;
}
.shorts-act{
  width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,0.1);color:#fff;
  display:flex;align-items:center;justify-content:center;transition:background .15s;
}
.shorts-act:hover{background:rgba(255,255,255,0.2);}
.shorts-act .mi{font-size:24px;}
.shorts-act.liked{color:#FFFFFF;}
.shorts-act.liked .mi{color:#FFFFFF;}
.shorts-act-lbl{font-size:12px;color:#fff;margin-bottom:10px;font-weight:500;}
.shorts-act-views{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  color:#fff;font-size:11px;margin-top:6px;
}
.shorts-act-views .mi{font-size:18px;}

/* Up/down nav (desktop) */
.shorts-nav{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:12px;
}
.shorts-nav-btn{
  width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,0.1);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.shorts-nav-btn:hover{background:rgba(255,255,255,0.2);}
.shorts-nav-btn.disabled{opacity:.3;pointer-events:none;}
.shorts-nav-btn .mi{font-size:28px;}

/* Comments panel */
.shorts-comments{
  position:absolute;top:0;right:0;bottom:0;width:400px;
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  z-index:15;display:flex;flex-direction:column;
}
.shorts-overlay.comments-open .shorts-comments{transform:translateX(0);}
.shorts-overlay.comments-open .shorts-stage{transform:translateX(-200px);}
.shorts-comments-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.1);font-size:16px;font-weight:600;
}
.shorts-comments-hdr button{background:none;border:none;color:var(--t2);cursor:pointer;}
.shorts-comments-list{flex:1;overflow-y:auto;padding:16px 20px;}
.shorts-comment{display:flex;gap:12px;margin-bottom:18px;}
.shorts-comment.pinned{background:rgba(255,255,255,.04);border-radius:10px;padding:10px;margin:-2px -2px 16px;}
.shorts-comment-av{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#FFFFFF,#D9D9D9);
  display:flex;align-items:center;justify-content:center;font-weight:700;color:#0f0f0f;font-size:13px;
}
.shorts-comment-body{flex:1;}
.shorts-comment-head{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:3px;display:flex;align-items:center;gap:8px;}
.shorts-pin-badge{display:inline-flex;align-items:center;gap:3px;font-size:10px;color:#FF4E45;font-weight:600;}
.shorts-comment-text{font-size:14px;color:var(--t1);line-height:1.4;}
.shorts-comment-meta{display:flex;gap:14px;margin-top:5px;font-size:12px;color:var(--t3);}
.shorts-comment-pin{cursor:pointer;color:#FF4E45;font-weight:600;}
.shorts-comment-input-row{
  display:flex;gap:10px;padding:14px 20px;border-top:1px solid rgba(255,255,255,.1);
}
.shorts-comment-input-row input{
  flex:1;background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.15);border-radius:50px;
  padding:10px 16px;color:var(--t1);font-family:inherit;font-size:14px;outline:none;
}
.shorts-comment-input-row button{
  width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;
  background:#FFFFFF;color:#0f0f0f;display:flex;align-items:center;justify-content:center;
}

/* ─── MOBILE: full-screen vertical clip player ─── */
@media(max-width:768px){
  /* height:100% (of the fixed overlay = real viewport) avoids the 100vh mobile
     URL-bar overshoot that pushed slides/overlay off-screen */
  .shorts-video-col{height:100%;width:100vw;max-width:100vw;aspect-ratio:auto;border-radius:0;}
  .shorts-snap-container{border-radius:0;}
  .shorts-video{object-fit:contain;}
  .shorts-stage{gap:0;width:100%;}
  .shorts-nav{display:none;}
  /* (B) hide the top play/mute/time bar on mobile — it overlapped the back button; tap the video to play/pause */
  .shorts-top-ctrl{display:none;}
  .shorts-close{z-index:25;}
  .shorts-snap-item .shorts-actions{right:8px;bottom:120px;}
  .shorts-act{background:rgba(0,0,0,0.3);}
  /* (C) push the creator/taker/caption lower */
  .shorts-snap-item .shorts-info{right:72px;bottom:44px;}
  .shorts-comments{width:100%;top:auto;bottom:0;height:70%;border-radius:16px 16px 0 0;transform:translateY(100%);}
  .shorts-overlay.comments-open .shorts-comments{transform:translateY(0);}
  .shorts-overlay.comments-open .shorts-stage{transform:none;}
}

/* #4: Home long-videos one per row (YouTube watch-feed style) */
#homeVideoGrid .yt-grid{grid-template-columns:1fr !important;gap:24px !important;}
#homeVideoGrid .yt-card{max-width:100%;}
#homeVideoGrid .yt-thumb{aspect-ratio:16/9;}

/* #11: Instagram-style notification items */
.notif-item{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;
  cursor:pointer;transition:background .15s;
}
.notif-item:hover{background:rgba(255,255,255,0.05);}
.notif-item.unread{background:rgba(255,255,255,0.03);}
.notif-ic{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:#373737;color:#fff;
}
.notif-ic .mi{font-size:20px;}
.notif-body{flex:1;min-width:0;}
.notif-text{font-size:13px;color:var(--t1);line-height:1.4;}
.notif-time{font-size:11px;color:var(--t3);margin-top:3px;}
.notif-empty{padding:50px 20px;text-align:center;color:var(--t3);}
.notif-empty .mi{font-size:42px;opacity:.4;display:block;margin-bottom:10px;}

/* Mobile: full-width Instagram-style */
@media(max-width:768px){
  /* Mobile: full-screen overlay */
  .notif-panel{position:fixed;inset:0;top:0;left:0;right:0;width:100%;height:100%;max-height:100%;border-radius:0;z-index:9200;}
}

/* #1: Scroll performance */
html{scroll-behavior:smooth;}
.main-content,.shorts-comments-list,.notif-list{-webkit-overflow-scrolling:touch;}
.yt-card,.dare-list-card{will-change:auto;}
* { -webkit-tap-highlight-color: transparent; }

/* #10: Shorts swipe animation */
@keyframes shortsSlideUp {
  from { transform: translateY(60%); opacity: .25; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes shortsSlideDown {
  from { transform: translateY(-60%); opacity: .25; }
  to   { transform: translateY(0); opacity: 1; }
}
/* slower + strong ease-out so the slide is clearly visible (YouTube-like settle) */
.shorts-video-wrap.slide-up   { animation: shortsSlideUp .7s cubic-bezier(.16,1,.3,1); }
.shorts-video-wrap.slide-down { animation: shortsSlideDown .7s cubic-bezier(.16,1,.3,1); }

/* YouTube thumbnail ratios: long 16:9, shorts 9:16 */
/* width/height forced so legacy fixed-height mobile rules (.yt-thumb{height:100px})
   can't override aspect-ratio and shrink the long card to half width */
#homeVideoGrid .yt-thumb{aspect-ratio:16/9 !important;background:#000;width:100% !important;height:auto !important;}
.feed-longs .yt-thumb{aspect-ratio:16/9 !important;background:#000;width:100% !important;height:auto !important;}
.short-thumb{aspect-ratio:11/16 !important;background:#000;}  /* slightly wider than 9:16 */
/* card height = 9:16 thumb + caption + meta; don't force the whole card to 9:16
   (that clipped/pushed the title & views out of view) */
.shorts-row .short-card{aspect-ratio:auto;}
.yt-thumb video,.yt-thumb img{width:100%;height:100%;object-fit:cover;}

/* #4: Inline video ad (pre-roll inside player) */
.vd-inline-ad{
  position:absolute;inset:0;background:#000;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.vd-ad-badge{
  position:absolute;top:12px;left:12px;background:#FFD000;color:#000;
  font-size:11px;font-weight:700;padding:2px 8px;border-radius:3px;
}
.vd-ad-body{text-align:center;}
.vd-ad-title{font-size:20px;font-weight:700;color:#fff;margin-top:8px;}
.vd-ad-sub{font-size:13px;color:var(--t2);margin-top:6px;}
.vd-ad-skip{
  position:absolute;bottom:16px;right:16px;
  background:rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.3);color:#fff;
  padding:8px 16px;border-radius:4px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;
}
.vd-ad-skip:disabled{opacity:.6;cursor:default;}

/* #5: Collaborators strip (dual creator+taker) */
.vd-collab-strip{
  display:flex;align-items:center;gap:14px;padding:12px 14px;margin-top:14px;
  background:var(--bg2);border:1px solid var(--border);border-radius:12px;cursor:pointer;
  transition:background .15s;
}
.vd-collab-strip:hover{background:var(--bg3);}
.vd-collab-avs{display:flex;align-items:center;}
.vd-collab-av{
  width:40px;height:40px;border-radius:50%;background:#373737;
  display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:16px;
  border:2px solid var(--bg2);
}
.vd-collab-av2{margin-left:-14px;background:#4a4a4a;}
.vd-collab-info{flex:1;min-width:0;}
.vd-collab-names{font-size:14px;font-weight:600;color:var(--t1);}
.vd-collab-sub{font-size:12px;color:var(--t3);margin-top:2px;}

/* #5: Collaborators modal */
.collab-sheet{
  background:rgba(20,20,20,.82) !important;
  backdrop-filter:var(--blur) !important; -webkit-backdrop-filter:var(--blur) !important;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;max-width:420px;width:100%;margin:auto;
  box-shadow:0 8px 28px rgba(0,0,0,.6);overflow:hidden;
}
/* Collaborators box: no full-screen dim; docked over column 1 (JS sets rect on desktop) */
#collabModal{ background:transparent !important; z-index:600 !important; }
@media(max-width:768px){
  #collabModal{ align-items:flex-end; }
  #collabModal .collab-sheet{ max-width:none; border-radius:16px 16px 0 0; margin:0; }
}
.collab-sheet-hdr{
  display:flex;align-items:center;justify-content:space-between;padding:16px 20px;
  font-size:18px;font-weight:700;border-bottom:1px solid rgba(255,255,255,.1);
}
.collab-sheet-hdr button{background:none;border:none;color:var(--t2);cursor:pointer;}
.collab-row{display:flex;align-items:center;gap:14px;padding:16px 20px;}
.collab-row-av{
  width:48px;height:48px;border-radius:50%;background:#373737;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:18px;
}
.collab-row-info{flex:1;min-width:0;}
.collab-row-name{font-size:15px;font-weight:700;color:var(--t1);}
.collab-row-label{font-size:12px;color:var(--t3);margin-top:2px;}
.collab-follow-btn{
  padding:8px 20px;border-radius:50px;border:none;cursor:pointer;
  background:#fff;color:#0f0f0f;font-size:13px;font-weight:700;font-family:inherit;
}
.collab-follow-btn:hover{background:#e0e0e0;}

/* #6: Shorts in related show vertical format */
.vd-related-card.is-short .vd-related-thumb{aspect-ratio:9/16;width:80px;}

/* #7: Interleaved feed layout */
.feed-longs{display:flex;flex-direction:column;gap:24px;margin-bottom:20px;}
.feed-longs .yt-card{max-width:100%;}
.feed-longs .yt-thumb{aspect-ratio:16/9;}

/* #8: vertical scroll-snap container for clips (fills the .shorts-video-col box) */
.shorts-snap-container{
  position:absolute;inset:0;border-radius:12px;
  overflow-y:scroll;scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.shorts-snap-container::-webkit-scrollbar{display:none;}
.shorts-snap-item{
  position:relative;width:100%;height:100%;
  scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;align-items:center;justify-content:center;background:#000;
}
/* Each slide carries its own video + overlay; box is the positioning context */
.shorts-slide-box{ position:relative; width:100%; height:100%; }
.shorts-snap-item .shorts-snap-video{
  /* slightly inset + rounded so the divide between two videos shows a curve (YouTube).
     object-fit:contain = no zoom/crop (e.g. a 4:3 clip fits, letterboxed) on desktop too */
  width:100%; height:calc(100% - 14px); margin:7px 0;
  background:#000; object-fit:contain; border-radius:16px; display:block;
}
@media(max-width:768px){
  .shorts-snap-item .shorts-snap-video{object-fit:contain;height:calc(100% - 10px);margin:5px 0;border-radius:12px;}
}

/* Per-slide action rail — mobile: overlaid on the video's right edge (scrolls with slide) */
.shorts-snap-item .shorts-actions{
  position:absolute; right:10px; bottom:84px; z-index:8;
  align-self:auto; padding-bottom:0;
}
/* Fade the info + rail in when a slide becomes the current one */
@keyframes shortsOverlayFade{ from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:none;} }
.shorts-snap-item.active .shorts-info,
.shorts-snap-item.active .shorts-actions{ animation:shortsOverlayFade .45s ease both; }

/* ── Shorts wrapper: transparent on mobile (children act as direct), 3-col on desktop ── */
.shorts-3col{ display:contents; }
.shorts-col1{ display:none; }
@media(min-width:769px){
  /* Vertical FEED of 3-column rows: each short = [info | 9:16 video + actions |
     comments]. The whole row scroll-snaps (scroll over video → next short);
     info (col 1) and comments (col 3) have their own scrollbars. */
  #shortsOverlay{ top:56px; left:72px; overflow:hidden; }   /* the rail never widens now */
  .shorts-overlay .shorts-3col{ display:block; height:calc(100vh - 56px); max-width:1280px; margin:0 auto; padding:0; }
  .shorts-col1{ display:none; }
  .shorts-overlay .shorts-comments{ display:none; }                    /* comments are per-row on desktop */
  .shorts-overlay .shorts-stage{ position:relative; height:100%; width:100%; display:block; transform:none !important; }
  .shorts-video-col{ position:relative; width:100%; height:100%; max-width:none; aspect-ratio:auto; background:transparent; border-radius:0; }
  .shorts-nav{ display:none !important; }
  /* one row per screen, scroll-snaps. 3 columns: col1 == col3 (equal width),
     video 9:16 in the middle with the action buttons overlaid on it. */
  .shorts-snap-item{ display:flex; align-items:stretch; justify-content:center; gap:18px; padding:16px 20px; background:transparent; }
  /* COL 1 — ids+caption anchored at the BOTTOM; "Description & rules" expands upward */
  .shorts-snap-item .shorts-info{ display:flex !important; flex-direction:column; justify-content:flex-end; position:static; left:auto; right:auto; bottom:auto;
    flex:1 1 0; min-width:0; max-width:none; overflow-y:auto; align-self:stretch; padding:8px 2px; text-shadow:none; color:var(--t1); }
  .shorts-snap-item .shorts-info.dets-open{ justify-content:flex-start; }   /* expanded → content moves to top */
  /* COL 2 — 9:16 video with the buttons overlaid */
  .shorts-slide-box{ flex:0 0 auto; width:auto; height:80vh; max-height:calc(100vh - 110px); aspect-ratio:9/16; align-self:center; border-radius:16px; overflow:hidden; }
  .shorts-snap-item .shorts-actions{ position:absolute; right:10px; bottom:16px; left:auto; top:auto; flex-direction:column; align-items:center; background:none; padding:0; gap:2px; }
  .shorts-snap-item .shorts-actions .shorts-act{ background:rgba(255,255,255,0.18); width:38px; height:38px; }
  .shorts-snap-item .shorts-actions .shorts-act .mi{ font-size:19px; }
  .shorts-snap-item .shorts-act-lbl{ font-size:11px; }
  .shorts-cmt-rail{ display:none !important; }
  /* COL 3 — comments, SAME width as col 1 (own scroll, input pinned) */
  .shorts-rowcmts{ display:flex; flex-direction:column; flex:1 1 0; min-width:0; align-self:stretch; max-height:100%;
    background:rgba(22,22,28,0.6); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
  .shorts-rowcmts-hdr{ flex-shrink:0; padding:14px 16px; border-bottom:1px solid var(--border); font-size:15px; font-weight:700; display:flex; align-items:center; gap:8px; }
  .shorts-rowcmts-hdr .shorts-rowcmts-count{ color:var(--t3); font-weight:600; }
  .shorts-rowcmts-list{ flex:1; overflow-y:auto; padding:14px 16px; }
  .shorts-rowcmts-foot{ flex-shrink:0; border-top:1px solid var(--border); padding:10px 14px; }
  /* info section labels bigger/bold */
  .shorts-info .dd-sec-label{ font-size:14px; font-weight:800; color:var(--t1); }
  .shorts-info .dd-desc-text, .shorts-info .dd-rule{ font-size:14px; font-weight:600; color:var(--t1); }
}
/* per-row comments are desktop-only; mobile uses the slide-in sheet */
@media(max-width:768px){ .shorts-rowcmts{ display:none !important; } }
/* Mobile: shorts is full-screen immersive — hide the main topbar (desktop keeps it) */
@media(max-width:768px){ body.shorts-open .topbar{ display:none !important; } }

/* Mobile "Description & rules" button on each short + glassy right-side drawer */
.shorts-m-details{ display:none; }
.shorts-details-drawer{ display:none; }
@media(max-width:768px){
  .shorts-m-details{ display:inline-flex; align-items:center; gap:6px; margin-top:8px; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.16); color:#fff; font-family:inherit; font-size:13px; font-weight:600; padding:7px 14px; border-radius:50px; cursor:pointer; }
  .shorts-m-details .mi{ font-size:17px; }
  .shorts-details-drawer{ display:block; position:fixed; top:0; right:0; bottom:0; width:86%; max-width:380px; transform:translateX(102%); transition:transform .28s cubic-bezier(.4,0,.2,1); z-index:420; overflow-y:auto; padding:18px 18px 40px;
    background:rgba(16,16,16,.84); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); border-left:1px solid rgba(255,255,255,.12); border-radius:16px 0 0 16px; }
  .shorts-details-drawer.open{ transform:translateX(0); }
  .shorts-details-drawer-close{ float:right; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.12); border:none; color:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
  .shorts-details-drawer-body{ clear:both; padding-top:6px; color:#eee; }
  .shorts-details-drawer-body .dd-sec-label{ color:#ccc; font-size:14px; font-weight:800; }
  .shorts-details-drawer-body .dd-desc-text, .shorts-details-drawer-body .dd-rule{ color:#fff; font-size:14px; font-weight:600; }
  /* Bounty at the TOP-right, beside the 3-dots button */
  .shorts-snap-item .shorts-bounty-badge{ left:auto; right:56px; top:14px; bottom:auto; }
  /* Comments sheet glassy */
  .shorts-comments{ background:rgba(16,16,16,.82) !important; backdrop-filter:var(--blur) !important; -webkit-backdrop-filter:var(--blur) !important; border-top:1px solid rgba(255,255,255,.12); }
}

/* Left "Details" button (desktop only) + glassy details panel */
.shorts-details-btn{ display:none; }
.shorts-details-btn .mi{ font-size:16px; transition:transform .2s; }
@media(min-width:769px){
  .shorts-details-btn{
    display:inline-flex; align-items:center; gap:4px; margin-top:8px;
    background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.14);
    color:#fff; font-family:inherit; font-size:13px; font-weight:600;
    padding:6px 12px; border-radius:50px; cursor:pointer;
  }
  .shorts-details-btn:hover{ background:rgba(255,255,255,0.22); }
  .shorts-details-btn.open .mi{ transform:rotate(180deg); }
  /* on desktop the 3-dots "Details" is replaced by the left button */
  #shortsMenu .shorts-menu-details, #shortsMenu #shortsDetailsBlock{ display:none !important; }
}
.shorts-details-panel{
  margin-top:10px; padding:12px 14px; border-radius:14px; max-height:40vh; overflow-y:auto;
  background:#000 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:1px solid rgba(255,255,255,.28);
}
.shorts-details-panel .dd-sec-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#bbb; margin:8px 0 4px; }
.shorts-details-panel .dd-sec-label:first-child{ margin-top:0; }
.shorts-details-panel .dd-desc-text,
.shorts-details-panel .dd-rule{ font-size:13px; color:#eee; line-height:1.5; margin:0; }
.shorts-details-panel .dd-bounty{ font-size:14px; color:var(--blue); font-weight:700; margin:2px 0 0; }

/* (desktop comments now live per-row in .shorts-rowcmts; the slide-in sheet
   .shorts-comments is mobile-only — hidden on desktop by the feed rule above) */
/* Bounty badge — bottom-left corner of the short */
.shorts-bounty-badge{ position:absolute; left:10px; bottom:54px; z-index:6; background:rgba(0,0,0,.72); color:var(--green); font-size:14px; font-weight:800; padding:4px 11px; border-radius:8px; border:1px solid rgba(255,255,255,.12); }
/* Shorts column-1 (desktop) info card */
.shorts-c1-collab{ display:flex; align-items:center; gap:12px; cursor:pointer; padding-bottom:14px; border-bottom:1px solid var(--border); margin-bottom:14px; }
.shorts-c1-caption{ font-size:16px; font-weight:700; color:var(--t1); line-height:1.4; }
.shorts-col1 .dd-sec-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--t3); margin:16px 0 6px; }
.shorts-col1 .dd-desc-text{ font-size:14px; color:var(--t2); line-height:1.6; margin:0; }
.shorts-col1 .dd-rule{ font-size:13px; color:var(--t2); line-height:1.6; }

/* ═══════════════════════════════════════════════════════════
   YOUTUBE MINIMALISM v2 — kill blur/shadow, except top/bottom
   ═══════════════════════════════════════════════════════════ */

/* Kill ALL blur first */
.sidebar, .yt-card, .dare-list-card, .chip, .modal, .pe-modal,
.notif-panel, .video-detail-overlay, .overlay > div, .exp-card,
.vd-related-card, .auth-box, .user-dropdown, .dd-menu, .shorts-overlay,
.shorts-comments, .shorts-menu, .search-suggestions, .vd-collab-strip,
.collab-sheet, .home-section, body, html, * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* This used to put the glass BACK on the topbar, with !important, which quietly
   undid the flat black set further up — the bar stayed translucent and blurred
   no matter what that rule said. The app has no glass any more. */
.topbar {
  background: #000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) !important;
  border-bottom: none !important;
}

/* Restore glass ONLY on mobile bottom nav */
.bottom-nav {
  background: rgba(15,15,15,0.85) !important;
  backdrop-filter: var(--blur) !important;
  -webkit-backdrop-filter: var(--blur) !important;
  box-shadow: 0 -1px 0 rgba(255,255,255,0.05) !important;
  border-top: none !important;
}

/* Glassy POPUP box only (not the whole page) — same frosted glass as the notif panel.
   The box blurs the page behind it; the backdrop stays a light, see-through dim. */
.modal, .profile-edit-modal {
  background: var(--glass) !important;
  backdrop-filter: var(--blur) !important;
  -webkit-backdrop-filter: var(--blur) !important;
}

/* Kill multi-layer shadows everywhere — flat */
.yt-card, .dare-list-card, .exp-card, .vd-related-card,
.chip, .nav-item, .bn-item, .btn-post, .icon-btn,
.user-av, .yt-av, .vd-collab-strip {
  box-shadow: none !important;
}

/* Cards: flat solid bg, subtle border only */
.yt-card, .dare-list-card, .exp-card, .vd-related-card, .vd-collab-strip {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
}
.yt-card:hover, .dare-list-card:hover, .exp-card:hover, .vd-related-card:hover {
  transform: none !important;
  background: var(--bg3) !important;
  box-shadow: none !important;
}
.yt-card::after, .dare-list-card::before { display: none !important; }

/* Sidebar (desktop) flat solid */
.sidebar {
  background: #050505 !important;
  border-right: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
}

/* Modals: ONE drop shadow only */
.modal, .pe-modal, .notif-panel,
.user-dropdown, .dd-menu, .auth-box, .shorts-menu, .collab-sheet {
  box-shadow: 0 8px 28px rgba(0,0,0,0.5) !important;
  background: #1f1f1f !important;
}
/* ...except the sign in / sign up box, which is the reference for this app's
   black-and-white surfaces. The grey above was making it the odd one out. */
#authScreen .auth-box{
  background:#000 !important;
  border:1px solid #fff !important;
  box-shadow:none !important;
}
/* Full-screen detail overlays = near-black page bg (rows/cards stay lighter) */
.video-detail-overlay { background: var(--page-grad) !important; box-shadow: none !important; }

/* Remove all transition: all (performance) */
.yt-card, .dare-list-card, .chip, .nav-item, .bn-item, .btn-post, .icon-btn {
  transition: background .15s ease, color .15s ease !important;
}

/* Buttons: solid fill, no glow */
.btn-post, .btn-fill, .btn-approve {
  box-shadow: none !important;
}
.btn-post:hover, .btn-fill:hover, .btn-approve:hover {
  transform: none !important; box-shadow: none !important;
  filter: brightness(1.08);
}

/* GPU off for non-animating elements */
.yt-card, .dare-list-card, .home-section { will-change: auto !important; }

/* ═══ #2: DESKTOP UI (≥769px) — permanent icon rail + floating drawer ═══
   The drawer overlays the page on desktop too, so opening it never re-flows
   (shrinks) the content. The 72px gutter belongs to .sb-rail, which never moves. */
@media(min-width:769px){
  #menuToggle, .menu-btn-mobile, .hamburger { display: none !important; }
  .main-content, main, .page-container { margin-left: 72px !important; }
  .bottom-nav { display: none !important; }
  .topbar { padding: 0 24px !important; }
  .search-wrap { max-width: 640px !important; }
}

/* ═══ MOBILE UI (≤768px) — bottom nav, hamburger drawer ═══ */
@media(max-width:768px){
  .main-content, main, .page-container { margin-left: 0 !important; }
  .bottom-nav { display: flex !important; }
  #menuToggle, .menu-btn-mobile, .hamburger { display: flex !important; }
}

/* ═══════════════════════════════════════════════════════════
   YOUTUBE CARD LAYOUT v3 — image-first, exact YT structure
   ═══════════════════════════════════════════════════════════ */

/* Card base: NO box, transparent, image on top */
#homeVideoGrid .yt-card, .feed-longs .yt-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  cursor: pointer;
}
#homeVideoGrid .yt-card:hover, .feed-longs .yt-card:hover {
  background: transparent !important;
}

/* Thumbnail: 16:9, rounded, image fills */
.feed-longs .yt-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  background: #1f1f1f;
}
.feed-longs .yt-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.yt-thumb-bg {
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:#272727;color:#717171;
}
.yt-thumb-bg .mi { font-size: 40px; }

/* Hover/scroll video preview (YouTube-style) */
.yt-preview-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  background:#000; z-index:2; pointer-events:none; }
.yt-pv-ctrls{ position:absolute; top:8px; right:8px; z-index:5;
  display:flex; flex-direction:column; gap:7px; }
.yt-pv-btn{ width:36px; height:36px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(0,0,0,.62); color:#fff; display:flex; align-items:center; justify-content:center;
  transition:background .15s; }
.yt-pv-btn:hover{ background:rgba(0,0,0,.8); }
.yt-pv-btn .mi{ font-size:20px; }
/* while a preview plays, move the bounty out of the way of the controls */
.yt-thumb.playing .yt-bounty{ left:8px; right:auto; z-index:4; }

/* FIX 5: badges — duration bottom-right, Rs bottom-left, NO overlap */
.yt-dur {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(0,0,0,0.8); color: #fff;
  font-size: 12px; font-weight: 500;
  padding: 2px 6px; border-radius: 4px;
  font-family: 'Roboto', sans-serif;
  z-index: 3;
}
.yt-rs {
  position: absolute; bottom: 8px; left: 8px;
  background: rgba(0,0,0,0.8); color: #3ea6ff;
  font-size: 12px; font-weight: 600;
  padding: 2px 8px; border-radius: 4px;
}

/* Info row: avatar left, title+meta right (YouTube exact) */
.feed-longs .yt-info {
  display: flex; gap: 12px;
  padding: 12px 4px 0;
  align-items: flex-start;
}
.feed-longs .yt-av {
  width: 36px; height: 36px; border-radius: 50%;
  background: #373737 !important; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 15px; flex-shrink: 0;
}
.feed-longs .yt-title {
  font-size: 15px; font-weight: 500; color: #f1f1f1;
  line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.feed-longs .yt-sub {
  font-size: 13px; color: #aaa; margin-top: 4px;
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}

/* FIX 3: MOBILE — edge-to-edge cards (YouTube mobile) */
@media(max-width:768px){
  #homeVideoGrid, .feed-longs { gap: 0 !important; }
  .feed-longs { margin: 0 -16px 8px !important; }  /* bleed past page padding */
  .feed-longs .yt-card { margin-bottom: 20px; }
  .feed-longs .yt-thumb { border-radius: 0; }       /* full-bleed like YT mobile */
  .feed-longs .yt-info { padding: 10px 16px 0; }
}

/* FIX 4: DESKTOP — 2-3 column grid (YouTube desktop) */
@media(min-width:769px){
  .feed-longs {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 32px 16px !important;
    flex-direction: unset !important;
  }
}

/* FIX 6: Shorts row — vertical thumbs side by side, scrollable */
.shorts-home-sec { margin: 20px 0 28px; }
.home-sec-hdr {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px; padding: 0 4px;
}
.home-sec-title { font-size: 18px; font-weight: 700; color: #f1f1f1; }
.shorts-row {
  display: flex; gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 4px;
}
.shorts-row::-webkit-scrollbar { display: none; }
.short-card {
  flex: 0 0 170px;               /* desktop: YouTube-size shorts (mobile overridden below) */
  cursor: pointer;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;   /* kill leftover neu shadow behind shorts cards */
  overflow: visible !important;  /* don't clip the caption/views below the thumb */
  border-radius: 0 !important;   /* rounding lives on .short-thumb only (YouTube style) */
}
.short-card:hover { transform: none !important; box-shadow: none !important; }
.short-cap, .short-meta { padding: 0 2px; }   /* small breathing room so text isn't flush to edge */
.short-thumb {
  width: 170px;
  height: auto;                  /* let aspect-ratio drive height (kill legacy height:276px) */
  aspect-ratio: 11/16;
  border-radius: 12px;
  overflow: hidden;
  background: #1f1f1f;
  position: relative;
  box-shadow: none !important;   /* flat, YouTube-style */
}
.short-thumb::after { display: none !important; }  /* remove the diagonal gloss gradient */
.short-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.short-cap {
  font-size: 13px; font-weight: 500; color: #f1f1f1;
  margin-top: 8px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.short-meta { font-size: 12px; color: #aaa; margin-top: 3px; }
@media(max-width:768px){
  .short-card { flex: 0 0 44vw; }
  /* height:auto + aspect-ratio so legacy .short-thumb{height:230px} can't break 9:16;
     44vw width = ~2 shorts visible per row like YouTube mobile */
  .short-thumb { width: 44vw; height: auto; aspect-ratio: 11/16; }
  .shorts-home-sec { margin: 16px 0 24px; padding: 0 0 0 0; }
}

/* Desktop topbar: YouTube layout — search centered */
@media(min-width:769px){
  .topbar { display:flex; align-items:center; justify-content:space-between; }
  .search-wrap { margin: 0 auto; }
}

/* ═══ #1: Thumbnail Adjuster (16:9 crop with drag + zoom) ═══ */
.ta-sheet{
  background:#212121;border-radius:16px;max-width:520px;width:100%;margin:auto;
  box-shadow:0 8px 28px rgba(0,0,0,.6);overflow:hidden;padding-bottom:18px;
}
.ta-hdr{
  display:flex;align-items:center;justify-content:space-between;padding:16px 20px;
  font-size:18px;font-weight:700;color:#f1f1f1;border-bottom:1px solid rgba(255,255,255,.1);
}
.ta-hdr button{background:none;border:none;color:#aaa;cursor:pointer;}
.ta-hint{font-size:12px;color:#aaa;padding:12px 20px 0;text-align:center;}
.ta-stage{
  position:relative;margin:14px 20px;
  aspect-ratio:16/9;width:calc(100% - 40px);
  background:#000;border-radius:10px;overflow:hidden;
  touch-action:none;cursor:move;user-select:none;
}
.ta-frame{position:absolute;inset:0;overflow:hidden;}
.ta-frame img{
  position:absolute;top:0;left:0;transform-origin:0 0;
  will-change:transform;pointer-events:none;
}
/* Rule-of-thirds grid overlay */
.ta-grid-overlay{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.25) 1px, transparent 1px);
  background-size:33.33% 33.33%;
  background-position:0 0;
}
.ta-zoom-row{
  display:flex;align-items:center;gap:12px;padding:6px 24px;
}
.ta-zoom-row .mi{color:#aaa;font-size:20px;}
.ta-zoom-row input[type=range]{
  flex:1;accent-color:#FFFFFF;height:4px;cursor:pointer;
}
.ta-actions{display:flex;gap:12px;padding:14px 20px 0;}
.ta-cancel,.ta-save{
  flex:1;padding:12px;border-radius:50px;border:none;cursor:pointer;
  font-size:14px;font-weight:700;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.ta-cancel{background:#373737;color:#f1f1f1;}
.ta-save{background:#FFFFFF;color:#0f0f0f;}
.ta-save:hover{filter:brightness(1.1);}

/* ── Notification panel: glassy (must come AFTER the earlier #1f1f1f !important) ── */
.notif-panel{
  background:rgba(18,18,18,.78) !important;
  backdrop-filter:var(--blur) !important;
  -webkit-backdrop-filter:var(--blur) !important;
}

/* ═══════════════════════════════════════════════════════
   POPUP → FULL PAGE ("as-page"): the 20 tracked modals render as
   real screens (own URL + back button) instead of floating boxes.
═══════════════════════════════════════════════════════ */
/* Glassy page surface — dark enough that the page behind doesn't read as a
   lighter "box" silhouette (deeper tint than the notif panel). Column centered. */
.overlay.as-page{
  background:rgba(10,10,10,.92);
  align-items:flex-start;justify-content:center;padding:0;overflow-y:auto;z-index:9500;
}
.overlay.as-page .modal{
  background:#000 !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  /* an edge, so the form reads as its own surface rather than text floating on
     the page behind it — the same black-and-white treatment as .auth-box */
  border:1px solid rgba(255,255,255,.30);border-radius:16px;box-shadow:none;
  width:100%;max-width:600px;max-height:none;overflow:visible;
  padding:22px 18px 90px;margin:12px auto;transform:none;
  /* beat the mobile bottom-sheet rule (.modal{position:fixed;bottom:0}) — always start from the TOP */
  position:static;bottom:auto;left:auto;right:auto;
}
.overlay.as-page.open .modal{transform:none;}

.profile-edit-overlay.as-page{
  background:rgba(10,10,10,.92);
  align-items:flex-start;justify-content:center;padding:0;overflow-y:auto;z-index:9500;
}
.profile-edit-overlay.as-page .profile-edit-modal{
  background:transparent !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  border:none;border-radius:0;box-shadow:none;
  width:100%;max-width:600px;max-height:none;overflow:visible;margin:0 auto;
  padding:22px 18px 70px;   /* top gap so the header doesn't touch the app topbar (matches Settings) */
  position:static;bottom:auto;left:auto;right:auto;
}

.video-modal-overlay.as-page{
  background:rgba(10,10,10,.92);
  z-index:9500;
  align-items:flex-start;justify-content:center;overflow-y:auto;
}
.video-modal-overlay.as-page .video-modal-inner{margin:24px auto 60px;}

/* ═══════════════════════════════════════════════════════
   GLASS STANDARD — every glassy/translucent surface uses the SAME
   frosted glass as the notification panel: rgba(18,18,18,.78) + --blur.
   (Feed cards stay flat for scroll performance. Exceptions that keep
   their own look: as-page modals are SOLID full pages — glass there showed
   the page behind as a lighter "box" silhouette.)
═══════════════════════════════════════════════════════ */
/* .sidebar is deliberately NOT in this list — the drawer is solid pure black. */
.topbar, .bottom-nav,
.modal, .profile-edit-modal, .notif-panel,
.dropdown, .search-suggestions,
.adc-menu, .dd-action-menu, .shorts-menu, .cmt-menu,
.shorts-comments, .collab-sheet, .dd-cbox, .shorts-details-drawer, .dd-topbar {
  background: #000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Popups read as popups through an outline now, not through a blur. Bars are
   page furniture and stay borderless. */
.modal, .profile-edit-modal, .notif-panel,
.dropdown, .search-suggestions,
.adc-menu, .dd-action-menu, .shorts-menu, .cmt-menu,
.shorts-comments, .collab-sheet, .dd-cbox, .shorts-details-drawer,
.vq-menu, .vp-menu, .guest-modal, .ta-sheet, .sfilter-sheet {
  border: 1px solid rgba(255,255,255,.28) !important;
}
.vq-menu, .vp-menu{ background:#000 !important; }

/* Small round buttons: NO backdrop-blur — there are many of them (social icons,
   avatars, action buttons) and each blur surface is a per-frame GPU cost. They
   sit on solid bars anyway, so a plain tint looks the same. */
.icon-btn, .psocial, .search-icon-btn {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ══ Mobile search page — a real full page, not a card under the topbar.
      Its own bar replaces the app topbar: back · field · mic (YouTube layout).
      Flat black throughout — same surface as the hamburger drawer, no glass. ══ */
.msearch-page.as-page{ background:#000 !important; }
.msearch-page .modal{
  background:#000 !important;
  padding:0 !important; max-width:none !important; width:100% !important;
  border:none !important; border-radius:0 !important; box-shadow:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.msearch-bar{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; gap:8px;
  padding:8px 8px 10px; background:#000;
}
.msearch-back, .msearch-filter{
  width:42px; height:42px; border-radius:50%; flex-shrink:0; position:relative;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; color:#fff; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.msearch-filter{ background:rgba(255,255,255,.08); }
.msearch-back:active, .msearch-filter:active{ background:rgba(255,255,255,.16); }
.msearch-back .mi, .msearch-filter .mi{ font-size:24px; }
/* little dot when any filter is set */
.msearch-filter.has-filters::after, .sres-filter-btn.has-filters::after{
  content:''; position:absolute; top:7px; right:7px; width:8px; height:8px;
  border-radius:50%; background:#fff; border:2px solid #000;
}
.msearch-field{
  flex:1; min-width:0; display:flex; align-items:center; gap:6px; height:44px;
  padding:0 6px 0 18px; border-radius:999px;
  background:#000; border:1px solid rgba(255,255,255,.18);
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.msearch-field input{
  flex:1; min-width:0; background:none; border:none; outline:none;
  color:#fff; font-size:16px; font-family:inherit;
}
.msearch-field input::placeholder{ color:rgba(255,255,255,.45); }
.msearch-go{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; color:rgba(255,255,255,.75); cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.msearch-go .mi{ font-size:22px; }
.msearch-panel{ padding:6px 0 24px; }
.msearch-hint{font-size:13px;color:var(--t3);text-align:center;padding:24px 16px;}

/* ── Suggestion / history rows — deliberately NO divider lines between them ── */
.srow-hdr{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px 6px; font-size:16px; font-weight:600; color:#fff;
}
.srow-clear{
  background:none; border:none; color:rgba(255,255,255,.72);
  font-size:14px; font-family:inherit; cursor:pointer; padding:6px 2px;
  -webkit-tap-highlight-color:transparent;
}
.srow{
  display:flex; align-items:center; gap:14px;
  padding:11px 10px 11px 16px; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.srow:active{ background:rgba(255,255,255,.06); }
.srow-ic{ font-size:22px; color:rgba(255,255,255,.75); flex-shrink:0; }
.srow-txt{
  flex:1; min-width:0; font-size:15px; color:#fff;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.srow-del, .srow-fill{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.srow-del{ color:rgba(255,255,255,.38); }
.srow-fill{ color:rgba(255,255,255,.8); }
.srow-del .mi{ font-size:19px; }
.srow-fill .mi{ font-size:21px; }
.srow-del:active, .srow-fill:active{ background:rgba(255,255,255,.12); }

/* ── Empty state ── */
.snores{ text-align:center; padding:52px 24px; color:var(--t3); }
.snores .mi{ font-size:44px; color:rgba(255,255,255,.25); }
.snores-t{ font-size:17px; font-weight:600; color:#fff; margin-top:12px; }
.snores-d{ font-size:13px; margin-top:6px; }
.snores-sug{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:16px; }
.snores-chip{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  color:#fff; font-size:13px; font-family:inherit; padding:7px 14px;
  border-radius:999px; cursor:pointer;
}

/* ── Creator / taker result rows ── */
.sppl-list{ display:flex; flex-direction:column; }
.sppl-row{ display:flex; align-items:center; gap:14px; padding:10px 4px; cursor:pointer; }
.sppl-row:hover{ background:rgba(255,255,255,.05); border-radius:12px; }
.sppl-av{ width:46px;height:46px;border-radius:50%;overflow:hidden;flex-shrink:0;background:#1c1c1c;
  display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;color:#fff; }
.sppl-meta{ min-width:0; }
.sppl-name{ font-size:15px; font-weight:600; color:var(--t1); }
.sppl-sub{ font-size:12px; color:var(--t3); margin-top:2px; }

/* ── Filter bottom sheet ── */
.sfilter-wrap{
  position:fixed; inset:0; z-index:9700; display:flex; align-items:flex-end;
  background:rgba(0,0,0,.6); opacity:0; pointer-events:none;
  transition:opacity .22s ease;
}
.sfilter-wrap.open{ opacity:1; pointer-events:auto; }
.sfilter-sheet{
  width:100%; max-width:560px; margin:0 auto;
  background:#000; border:1px solid rgba(255,255,255,.10); border-bottom:none;
  border-radius:20px 20px 0 0; padding:8px 16px 20px;
  max-height:82vh; overflow-y:auto;
  transform:translateY(100%); transition:transform .26s cubic-bezier(.05,0,0,1);
}
.sfilter-wrap.open .sfilter-sheet{ transform:translateY(0); }
.sfilter-grip{ width:38px; height:4px; border-radius:2px; background:rgba(255,255,255,.28); margin:4px auto 12px; }
.sfilter-hdr{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.sfilter-title{ font-size:18px; font-weight:700; color:#fff; }
.sfilter-reset{ background:none; border:none; color:rgba(255,255,255,.7); font-size:14px; font-family:inherit; cursor:pointer; padding:6px 2px; }
.sfilter-group{ padding:12px 0 2px; }
.sfilter-label{ font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:rgba(255,255,255,.42); margin-bottom:10px; }
.sfilter-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.sfilter-chip{
  background:transparent; border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.85);
  font-size:13px; font-family:inherit; padding:8px 15px; border-radius:999px; cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:background .15s ease, color .15s ease;
}
.sfilter-chip.active{ background:#fff; border-color:#fff; color:#000; font-weight:600; }
.sfilter-done{
  width:100%; margin-top:18px; padding:13px; border-radius:999px;
  background:#fff; color:#000; border:none; font-size:15px; font-weight:700;
  font-family:inherit; cursor:pointer;
}
/* ══ Search-results topbar (mobile) — YouTube layout: back · query · ⋮ ══
   The page's own "Active Missions" header, Back button and Missions/Videos
   tab row are hidden there; the ⋮ menu carries All / Missions / Videos /
   Filters instead. Desktop keeps the in-page tab row. */
.topbar-search{ display:none; align-items:center; gap:6px; flex:1; min-width:0; }
.tsr-icon{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; color:#fff; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.tsr-icon:active{ background:rgba(255,255,255,.12); }
.tsr-icon .mi{ font-size:23px; }
.tsr-field{
  flex:1; min-width:0; display:flex; align-items:center; gap:4px; height:40px;
  padding:0 6px 0 16px; border-radius:999px;
  background:#000; border:1px solid rgba(255,255,255,.18); cursor:text;
}
.tsr-txt{
  flex:1; min-width:0; font-size:15px; color:#fff;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tsr-clear{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; color:rgba(255,255,255,.7); cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.tsr-clear .mi{ font-size:19px; }
.tsr-menu-wrap{ position:relative; flex-shrink:0; }
.tsr-menu{
  display:none; position:absolute; top:44px; right:0; min-width:184px;
  background:#0f0f0f; border:1px solid rgba(255,255,255,.12); border-radius:12px;
  padding:6px; z-index:9200; box-shadow:0 10px 30px rgba(0,0,0,.7);
}
.tsr-menu.open{ display:block; }
.tsr-mi{
  display:flex; align-items:center; gap:14px;
  padding:11px 12px; border-radius:8px; cursor:pointer;
  font-size:14px; color:rgba(255,255,255,.85);
  -webkit-tap-highlight-color:transparent;
}
.tsr-mi .mi{ font-size:20px; color:inherit; }
.tsr-mi:active{ background:rgba(255,255,255,.08); }
.tsr-mi.active{ color:#fff; font-weight:600; background:rgba(255,255,255,.10); }
.tsr-mi-sep{ margin-top:6px; border-top:1px solid rgba(255,255,255,.10); padding-top:12px; border-radius:0 0 8px 8px; }

/* Results are chrome-free on EVERY width: no "Active Missions" header (which
   also carried a second Post Mission button — the topbar already has one) and
   no in-feed Back button. */
body.search-open #pageDares > .sec-hdr,
body.search-open .search-back-btn{ display:none !important; }

@media(max-width:768px){
  body.search-open:not(.detail-open):not(.shorts-open):not(.profile-open) .topbar-left,
  body.search-open:not(.detail-open):not(.shorts-open):not(.profile-open) .search-wrap,
  body.search-open:not(.detail-open):not(.shorts-open):not(.profile-open) .topbar-right{ display:none !important; }
  body.search-open:not(.detail-open):not(.shorts-open):not(.profile-open) .topbar-search{ display:flex; }
  /* mobile moves All/Missions/Videos/Filters into the topbar ⋮ menu instead */
  body.search-open .search-type-bar{ display:none !important; }
}

/* "Mission" stamp — top-left of a mission thumbnail in search results */
.adc-kind{
  position:absolute; top:8px; left:8px; z-index:2;
  color:#fff; font-size:12px; font-weight:700; letter-spacing:.4px;
  padding:4px 10px; border-radius:8px;
  background:rgba(0,0,0,.72); border:1px solid rgba(255,255,255,.12);
}

/* Results-page filter button */
.sres-filter-btn{ position:relative; }
.sug-del{ width:26px;height:26px;border-radius:50%;background:none;border:none;color:var(--t3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;margin-left:auto; }
.sug-del .mi{ font-size:16px; }

/* Mobile: full screen (covers the app topbar) + slide in from the right */
@media(max-width:768px){
  .msearch-page.as-page{
    top:0 !important; left:0; right:0; bottom:0;
    padding:0; align-items:stretch; justify-content:stretch;
    opacity:1 !important;                 /* it slides, it does not fade */
    visibility:hidden;
    transform:translateX(100%);
    transition:transform .26s cubic-bezier(.05,0,0,1), visibility .26s;
  }
  .msearch-page.as-page.open{ transform:translateX(0); visibility:visible; }
  .msearch-page .modal{ min-height:100%; }
}

/* Page-modal open → background page can't scroll behind it */
body.ov-open{overflow:hidden;}
/* (Removed the body.ov-open full-page filter:blur — the as-page surface already
   covers the whole screen and is ~92% opaque, so blurring the page behind it was
   pure GPU cost for no visible gain. Big perf win on modal open.) */
.overlay.as-page, .profile-edit-overlay.as-page, .video-modal-overlay.as-page{overscroll-behavior:contain;}

/* ── SETTINGS: YouTube-style two-pane (left nav · right options) ── */
#settingsOverlay .modal.set-modal{max-width:880px;}
.set-layout{display:flex;gap:26px;align-items:flex-start;}
.set-nav{width:210px;flex-shrink:0;display:flex;flex-direction:column;gap:4px;}
.set-nav-item{display:flex;align-items:center;gap:10px;background:transparent;border:none;color:var(--t2);
  font-family:inherit;font-size:14px;font-weight:600;padding:12px 14px;border-radius:10px;cursor:pointer;text-align:left;white-space:nowrap;}
.set-nav-item .mi{font-size:19px;}
.set-nav-item:hover{background:rgba(255,255,255,.05);color:var(--t1);}
.set-nav-item.active{background:rgba(255,255,255,.10);color:var(--t1);}
.set-content{flex:1;min-width:0;}
.set-content .set-sec-label{margin-top:0;}
.set-content .set-sec .set-sec-label + .set-row{border-top:none;}
.set-content .set-sec .set-sec-label:not(:first-child){margin-top:22px;}
/* Mobile: Settings = plain button list (old menu); a tap opens the section's OWN page */
@media(max-width:768px){
  .set-layout{flex-direction:column;gap:0;}
  .set-nav{width:100%;flex-direction:column;gap:0;}
  .set-nav-item{width:100%;border-radius:0;border-bottom:1px solid var(--border);padding:16px 4px;color:var(--t1);}
  .set-nav-item::after{content:'chevron_right';font-family:'Material Icons Round';font-size:20px;color:var(--t3);margin-left:auto;}
  .set-nav-item .smr-t{flex:1;}
  .set-nav-item:hover,.set-nav-item.active{background:transparent;}
  /* ALL two-pane modals (settings/post/edit): hide the right pane — sections open
     as their own page (setSecOverlay). Otherwise the whole form stacked under the nav. */
  .set-content{display:none;}
  /* header stays on one row: title truncates, action button compact */
  #postOverlay .modal-title{ min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
  .modal-hdr{ gap:8px; }
}

/* ── Two-pane header action (Post Dare / Save Changes) + wide modals ── */
.tp-hdr-right{display:flex;align-items:center;gap:10px;}
.tp-action{width:auto !important;margin:0 !important;padding:9px 18px !important;font-size:13.5px !important;
  border-radius:50px !important;white-space:nowrap;flex-shrink:0;min-height:0 !important;}
.tp-action .mi{font-size:17px;}
@media(min-width:769px){
  .overlay.as-page .modal.set-modal,
  .profile-edit-overlay.as-page .profile-edit-modal.set-modal{ max-width:880px; }
}
@media(max-width:768px){
  .tp-action{padding:8px 14px !important;font-size:13px !important;}
}

/* ── PERF: mobile GPUs choke on backdrop-blur that recomputes on every scroll
   frame. The fixed topbar / bottom-nav are ALWAYS on screen, so drop their blur
   on mobile (near-solid tint looks the same on a dark bg). Desktop keeps glass. ── */
@media(max-width:768px){
  .topbar, .bottom-nav{
    backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
    background:rgba(12,12,12,.97) !important;
  }
}

/* ═══════════════════════════════════════════════════════
   PERF (desktop + mobile)
═══════════════════════════════════════════════════════ */
/* 1) Virtualize EVERY card grid the cheap CSS way — off-screen cards skip layout &
   paint entirely (YouTube renders only what's visible). Trace proved Rendering+Painting
   (not JS) was the bottleneck: profile/explore/dares grids were painting all off-screen
   cards. Targeting the card classes covers them in any container (grid OR column). */
.feed-longs > .yt-card{ content-visibility:auto; contain-intrinsic-size:auto 480px; }
.yt-grid > .yt-card,
.dare-grid > *,
.active-dare-grid > *,
.dare-list-card,
.active-dare-card{ content-visibility:auto; contain-intrinsic-size:auto 340px; }
@media(max-width:768px){
  .feed-longs > .yt-card{ contain-intrinsic-size:auto 300px; }
  .yt-grid > .yt-card, .dare-grid > *, .active-dare-grid > *,
  .dare-list-card, .active-dare-card{ contain-intrinsic-size:auto 260px; }
}

/* 2) Fixed bars: solid tint, NO backdrop-blur — a blurred fixed bar recomputes on
   every scroll frame (cost on desktop too, not just mobile). Near-identical look. */
.topbar, .bottom-nav{
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  background:rgba(14,14,14,.98) !important;
}

/* PERF: while scrolling, cards ignore the pointer so their :hover transform / preview
   can't fire on every card sliding under a stationary cursor (desktop scroll jank). */
body.scrolling .yt-card, body.scrolling .active-dare-card, body.scrolling .short-card{ pointer-events:none; }

/* ═══ THE REAL LAG FIX (proven by CDP layer dump) ═══════════════════════
   All ~20 closed as-page modals sat in the DOM at opacity:0 with an ACTIVE
   backdrop-filter — every one kept a full-screen compositor layer + per-frame
   backdrop snapshot alive (~80 layers, 68ms/frame draw vs YouTube's 1.2ms).
   Blur exists ONLY while a modal is actually open; closed overlays are fully
   retired from the compositor via visibility (transition-friendly: fade-out
   still plays, visibility flips at transition end). */
.overlay.as-page.open:not(.msearch-page),
.profile-edit-overlay.as-page.open,
.video-modal-overlay.as-page.open{
  backdrop-filter:blur(10px) !important;-webkit-backdrop-filter:blur(10px) !important;
}
/* the search page is deliberately flat black — no glass */
.msearch-page.as-page.open{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
.as-page:not(.open){ visibility:hidden; }

/* fadeUp/pgIn* used fill-mode "both" — a FINISHED fill-mode animation stays
   "active" forever, keeping the whole page promoted as a compositor layer.
   Keyframes end at the natural state, so no fill is needed. */
.page.active{animation-fill-mode:none;}
.page.active.nav-fwd,.page.active.nav-back{animation-fill-mode:none;}

/* ═══ Layer-audit leftovers (post THE-fix sweep) ═══════════════════════ */
/* 1) Sidebar was the LAST element with a live backdrop-filter — a full-height
      compositor layer + per-frame backdrop snapshot on every page.
      NOTE: this used rgba(11,8,8,.97), whose 3% alpha (and warm tint) is what
      still let the page ghost through the drawer. It is an ID selector, so it
      outranks every .sidebar rule below — it has to be the solid black itself. */
#sidebar, .sidebar{
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  background:#000 !important;
}
/* 2) Closed video/dare detail views sat at opacity:0 with a live blurred fixed
      topbar inside (same disease as the as-page modals). visibility added to the
      transition so the .25s fade-out still plays before the layer is retired. */
.video-detail-overlay{ transition:opacity .25s ease, visibility .25s; }
.video-detail-overlay:not(.open){ visibility:hidden; }
/* 3) Finished entrance animations with fill-mode "both" keep every home/explore
      section + comments promoted as compositor layers forever (7+ page-sized
      layers found idle). Keyframes end at the natural state — no fill needed. */
.home-section,.exp-section,.proof-item,.vd-comment,.ad-box{ animation-fill-mode:none; }

/* ═══ Adaptive streaming UI ═══════════════════════════════════════════ */
/* buffering loader — the brand bolt shimmering (like the splash skeleton),
   shown only while a long/short video stalls on the network */
.vspin{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:6;pointer-events:none;line-height:1;}
.vspin .mi{font-size:56px;line-height:1;animation:boltLoad 1.1s ease-in-out infinite;
  text-shadow:0 2px 16px rgba(0,0,0,.55);}
@keyframes boltLoad{0%,100%{color:rgba(255,255,255,.30);}50%{color:rgba(255,255,255,.95);}}
/* quality picker (micro panel — closes on outside tap, no back entry) */
.vq-wrap{position:fixed;inset:0;z-index:11000;display:none;}
.vq-wrap.open{display:block;}
.vq-dim{position:absolute;inset:0;background:rgba(0,0,0,.5);}
.vq-menu{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:rgba(17,17,17,.98);border:1px solid var(--border);border-radius:16px;
  min-width:250px;max-width:92vw;max-height:70vh;overflow-y:auto;padding:8px;}
.vq-title{font-size:13px;font-weight:700;color:var(--t3);text-transform:uppercase;
  letter-spacing:.6px;padding:8px 12px 10px;}
.vq-item{display:flex;align-items:center;gap:11px;width:100%;background:none;border:none;
  color:var(--t1);font:inherit;font-size:14.5px;font-weight:500;padding:12px 14px;
  border-radius:10px;cursor:pointer;text-align:left;}
.vq-item:hover{background:rgba(255,255,255,.06);}
.vq-item .mi{font-size:19px;color:var(--t3);}
.vq-item.sel{color:var(--blue2);}
.vq-item.sel .mi{color:var(--blue2);}
.vq-sub{font-size:12px;color:var(--t3);font-weight:400;}
@media(max-width:768px){
  .vq-menu{top:auto;bottom:0;left:0;right:0;transform:none;border-radius:18px 18px 0 0;
    min-width:0;max-width:none;padding-bottom:max(8px, env(safe-area-inset-bottom));}
}

/* ═══ App chrome stays visible under full-page modals (DESKTOP) ═══════════
   User request: the topbar and the left sidebar must never disappear behind
   as-page popups (Settings/Post/Deposit/…) — like YouTube, the chrome is
   permanent and clicking it navigates away (goPage already closes modals).
   Modals now open BELOW the topbar and RIGHT of the sidebar. Mobile keeps
   true full-screen modals (they have their own back-arrow header). */
@media(min-width:769px){
  /* the desktop sidebar is the PERMANENT 72px icon rail (YouTube-minimalism
     block sets width:72px !important) — NOT var(--sw)=240px. Using --sw left a
     168px strip of the page peeking between the rail and the modal. */
  .overlay.as-page,
  .profile-edit-overlay.as-page,
  .video-modal-overlay.as-page{ top:56px; left:72px; }
  /* expanded drawer (hamburger) must slide ABOVE an open modal, not under it */
  .sidebar{ z-index:9550 !important; }
}
/* Topbar popovers (notifications) must open ABOVE an open as-page modal */
.notif-panel{ z-index:9650 !important; }

/* Desktop as-page modals: SOLID page surface. With the topbar+sidebar now
   visible, the old translucent glass showed the feed half-bleeding through —
   read as a weird floating box. Solid bg = it reads as a real page swap
   (YouTube-style). Blur is pointless over a solid bg → off (GPU saving).
   Mobile keeps the full-screen glass look. */
@media(min-width:769px){
  .overlay.as-page,
  .profile-edit-overlay.as-page,
  .video-modal-overlay.as-page{ background:var(--bg); }
  .overlay.as-page.open,
  .profile-edit-overlay.as-page.open,
  .video-modal-overlay.as-page.open{
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  }
}

/* ═══ Mobile: app topbar stays visible above full-page popups too (user ask —
   same as desktop). The topbar always renders on mobile (profile mode only
   swaps its buttons), so a plain offset is safe. Popups keep their own
   back/X header below it. ═══ */
@media(max-width:768px){
  .overlay.as-page,
  .profile-edit-overlay.as-page,
  .video-modal-overlay.as-page{ top:56px; }
}
/* Hamburger drawer (and its dim) must slide ABOVE open popups on every device */
.sidebar{ z-index:9550 !important; }
.sb-overlay{ z-index:9540 !important; }

/* ═══ YouTube-style auto-hide topbar (mobile) ═══ */
@media(max-width:768px){
  .topbar{ transition: transform .28s cubic-bezier(.4,0,.2,1); }
  body.tb-hide .topbar{ transform: translateY(-100%); }
  body.tb-hide.ov-open .topbar{ transform: none; }   /* popups sit below the bar */
}

/* ═══════════════════════════════════════════════════════════════════════
   HAMBURGER DRAWER + DESKTOP RAIL — flat black & white (user ask)
   · background is the page background (#050505) — no panel tint, no red
     (--blue is #FF0033 in this theme, which is where the red icons came from)
   · no backdrop blur on the drawer or its dim
   · the drawer floats OVER the page on desktop too, so opening it never
     shrinks/re-flows the content — the 72px gutter belongs to .sb-rail
   · rounded right corners; YouTube-style ease-out slide (.24s)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Desktop icon rail — pure black, no panel, no tint ── */
.sb-rail{
  display:none;
  position:fixed; top:56px; left:0; bottom:0; width:72px; z-index:9100;
  background:#000; border:none;
  flex-direction:column; gap:2px; padding:8px 0;
  overflow-y:auto; overscroll-behavior:contain;
}
/* Icons only — the label under each one is gone; the name lives in the tooltip */
.rail-item{
  display:flex; align-items:center; justify-content:center;
  padding:14px 0; margin:0 4px; border-radius:10px; cursor:pointer;
  color:rgba(255,255,255,.82);
  transition:background .15s ease, color .15s ease; -webkit-tap-highlight-color:transparent;
}
.rail-item .mi{ font-size:26px; color:inherit; }
.rail-lbl{ display:none; }
.rail-item:hover{ background:rgba(255,255,255,.06); color:#fff; }
/* Selected = the icon fills in solid white (no pill) */
.rail-item.active{ background:transparent; color:#fff; }
@media(min-width:769px){ .sb-rail{ display:flex; } }

/* ── The drawer itself (mobile AND desktop) ── */
.sidebar{
  display:flex !important; flex-direction:column !important;
  position:fixed !important; top:0 !important; left:0 !important; bottom:0 !important;
  /* Width follows the content — a long display name widens it, a short one
     lets it shrink — clamped so it never gets cramped or eats the screen. */
  width:max-content !important;
  min-width:236px !important;
  max-width:min(340px,86vw) !important;
  padding:0 0 28px !important;
  justify-content:flex-start !important;
  background:#000 !important;
  border:none !important;
  border-radius:0 18px 18px 0 !important;
  box-shadow:none !important;
  overflow-y:auto; overscroll-behavior:contain;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  transform:translateX(-100%);
  transition:transform .24s cubic-bezier(.05,0,0,1);   /* YouTube-ish ease-out */
  z-index:9550 !important;
}
.sidebar.open{ transform:translateX(0) !important; }
/* Drop shadow only while it is off the wall, so it can't smudge the closed edge */
.sidebar.open, body.sb-dragging .sidebar{ box-shadow:8px 0 34px rgba(0,0,0,.75) !important; }
/* While a finger is dragging, the drawer must track it 1:1 */
body.sb-dragging .sidebar,
body.sb-dragging .sb-overlay{ transition:none !important; }

.sb-overlay{
  background:rgba(0,0,0,.62) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  transition:opacity .24s cubic-bezier(.05,0,0,1);
}

/* Rows: white only, no pill. Selected = the icon fills in solid white. */
.sidebar .nav-item{ color:rgba(255,255,255,.82) !important; }
.sidebar .nav-item .mi{ color:inherit !important; }
.sidebar .nav-item:hover{ background:rgba(255,255,255,.06) !important; color:#fff !important; }
.sidebar .nav-item.active{
  background:transparent !important;
  color:#fff !important;
  font-weight:600;
  box-shadow:none !important;
}
.sidebar .nav-item.active .mi{ color:#fff !important; }

/* Hollow icon by default, solid white once selected — the whole "selected"
   signal, since there is no pill behind it any more. The light wght keeps the
   outline thin; the Round face is a fallback so ligatures never break. */
.sidebar .nav-item .mi,
.rail-item .mi{
  font-family:'Material Symbols Outlined','Material Icons Round';
  font-variation-settings:'FILL' 0,'wght' 200,'GRAD' 0,'opsz' 24;
}
.sidebar .nav-item.active .mi,
.rail-item.active .mi{ font-variation-settings:'FILL' 1,'wght' 200,'GRAD' 0,'opsz' 24; }

/* Section labels + hairline dividers */
.sb-group-label{
  font-size:11px; font-weight:700; letter-spacing:1.4px;
  color:rgba(255,255,255,.42); padding:16px 16px 8px; user-select:none;
}
.sb-div{ height:1px; background:rgba(255,255,255,.10); margin:12px; }

/* Drawer header — doubles as the profile link (replaces the old bottom row) */
.sb-head{
  display:flex; align-items:center; gap:14px; padding:20px 16px 10px;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.sb-head:hover{ background:rgba(255,255,255,.04); }
.sb-head-av{
  width:48px;height:48px;border-radius:50%;overflow:hidden;flex-shrink:0;
  background:#1c1c1c;border:1px solid rgba(255,255,255,.10);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:700;color:#fff;
}
.sb-head-av img{width:100%;height:100%;object-fit:cover;}
.sb-head-meta{flex:1;min-width:0;}
.sb-head-name{
  font-size:18px;font-weight:700;color:#fff;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sb-head-handle{
  font-size:13px;font-weight:400;color:rgba(255,255,255,.5);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sb-head-close{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:transparent;border:none;color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.sb-head-close:active{background:rgba(255,255,255,.10);}
.sb-head-close .mi{font-size:26px;}

/* Rail avatar (the drawer's own avatar lives in .sb-head) */
.sb-prof-av{
  width:24px;height:24px;
  background:#1c1c1c !important; box-shadow:none !important;
  border:1px solid rgba(255,255,255,.10);
}

/* Drawer rows — same on every width now that the drawer is always an overlay.
   The .sidebar prefix is what beats the ≤900px tablet rules further up. */
.sidebar .sb-top{ padding:0 8px !important; }
/* Anything hidden by JS has to out-rank the !important below, which an inline
   style cannot do — this is why the Admin entry showed to every account. */
.sidebar .nav-item.nav-hidden{ display:none !important; }
.sidebar .nav-item{
  display:flex !important; flex-direction:row !important;
  justify-content:flex-start !important; align-items:center !important;
  gap:20px !important; padding:14px 16px !important; margin:0 !important;
  border-radius:12px;
}
.sidebar .nav-item .mi{ font-size:24px !important; }
.sidebar .nav-lbl{
  display:block !important; font-size:16px; font-weight:500; text-align:left;
}

/* ═══════════════════════════════════════════════════════════════════════
   NOTIFICATIONS — flat black, no glass; Instagram-style full page on mobile
   (slides in from the right), and a plain popup on desktop.
   Three earlier rules force glass on .notif-panel, so these come last.
   ═══════════════════════════════════════════════════════════════════════ */
.notif-panel{
  background:#000 !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 34px rgba(0,0,0,.7) !important;
}
.notif-panel-hdr{
  border-bottom:1px solid rgba(255,255,255,.10) !important;
  gap:4px;
}
.notif-panel-title{ font-size:17px; font-weight:700; color:#fff; }
.notif-back{
  display:none; width:42px; height:42px; border-radius:50%; flex-shrink:0;
  align-items:center; justify-content:center;
  background:none; border:none; color:#fff; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.notif-back .mi{ font-size:24px; }
.notif-back:active{ background:rgba(255,255,255,.12); }
.notif-hdr-spacer{ display:none; }
.notif-list{ background:#000; }
.notif-item{ border-bottom:none !important; }

/* Mobile: no avatar in the topbar — the bottom bar already has Profile, and the
   drawer header opens it too. Leaves search + bell up there. */
@media(max-width:768px){
  .topbar .user-menu{ display:none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   TOPBAR — same flat black as the page, so it reads as part of it rather
   than a floating bar of buttons. No glass, no border, no shadow.
   Buttons are bare outlined icons (hamburger-drawer treatment): no circle,
   no fill, no border, no neu raise.
   ═══════════════════════════════════════════════════════════════════════ */
.topbar{
  background:#000 !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border-bottom:none !important;
  box-shadow:none !important;
}
.topbar .icon-btn,
.topbar .search-icon-btn{
  width:42px; height:42px;
  background:transparent !important;
  border:none !important;
  border-radius:50%;
  box-shadow:none !important;
  color:#fff;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  transition:background .15s ease;
}
.topbar .icon-btn .mi,
.topbar .search-icon-btn .mi{
  font-size:25px; color:#fff;
  font-family:'Material Symbols Outlined','Material Icons Round';
  font-variation-settings:'FILL' 0,'wght' 200,'GRAD' 0,'opsz' 24;
}
/* hover/press is the only feedback — a faint disc, never a permanent ring */
.topbar .icon-btn:hover,
.topbar .search-icon-btn:hover{ background:rgba(255,255,255,.08) !important; transform:none !important; }
.topbar .icon-btn:active,
.topbar .search-icon-btn:active{ background:rgba(255,255,255,.14) !important; transform:none !important; box-shadow:none !important; }

/* Wordmark replaces the old red bolt tile.
   misnivo.png is 1080×540 with the mark sitting in the middle ~31% of the
   height, so the box is short and the image is oversized inside it — the
   padding baked into the file gets cropped instead of shrinking the mark. */
.logo-icon, .auth-logo-icon{ display:none !important; }
.logo{ height:40px; overflow:hidden; }
.logo-img{ height:78px; width:auto; display:block; flex-shrink:0; }
.auth-logo{ height:64px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.auth-logo .logo-img{ height:124px; }
@media(max-width:768px){
  .logo{ height:32px; }
  .logo-img{ height:62px; }
}
.logo-word{
  font-family:'Roboto',sans-serif;
  font-size:23px; font-weight:800; letter-spacing:-.6px;
  color:#fff; line-height:1;
}
.auth-logo .logo-word{ font-size:30px; }

/* ═══════════════════════════════════════════════════════════════════════
   BOTTOM NAV — floating black capsule, outlined icons, ringed + in the
   middle. Same surface as the hamburger drawer, so nothing on screen is a
   different shade of black any more.
   ═══════════════════════════════════════════════════════════════════════ */
.bottom-nav{
  left:10px !important; right:10px !important;
  bottom:calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
  height:64px !important;
  background:#000 !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-top:1px solid rgba(255,255,255,.12) !important;
  border-radius:32px !important;
  padding:0 6px !important;
  box-shadow:0 8px 26px rgba(0,0,0,.7) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.bn-item{ gap:0 !important; color:rgba(255,255,255,.55) !important; }
.bn-item .mi{
  font-size:27px !important;
  font-family:'Material Symbols Outlined','Material Icons Round';
  font-variation-settings:'FILL' 0,'wght' 200,'GRAD' 0,'opsz' 24;
}
/* Icons only — the caption stays in the DOM for screen readers, just unseen */
.bn-item span:last-child{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
/* selected = the icon fills in solid white, same signal as the drawer */
.bn-item.active{ color:#fff !important; }
.bn-item.active .mi{ font-variation-settings:'FILL' 1,'wght' 200,'GRAD' 0,'opsz' 24; }

.bn-post{
  width:52px !important; height:52px !important;
  background:transparent !important;
  border:2px solid #fff !important;
  color:#fff !important;
  box-shadow:none !important;
}
.bn-post .mi{
  font-size:26px !important; color:#fff !important;
  font-family:'Material Symbols Outlined','Material Icons Round';
  font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24;
}
.bn-post:active{ background:rgba(255,255,255,.14) !important; }

/* the floating bar sits above the page, so the feed needs clearance under it */
@media(max-width:768px){
  .main{ padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 92px) !important; }
}

/* Post Mission — the last red control on the bar. White pill, black label:
   the primary action still reads first without bringing colour back. */
.btn-post{
  background:#fff !important;
  color:#000 !important;
  border:none !important;
  box-shadow:none !important;
  font-weight:700;
}
.btn-post .mi{ color:#000 !important; }
.btn-post:hover{ background:rgba(255,255,255,.86) !important; filter:none !important; transform:none !important; }

/* The desktop search field loses its inset glass too, so the whole bar is flat */
@media(min-width:769px){
  .search-wrap{
    background:#000 !important;
    border:1px solid rgba(255,255,255,.18) !important;
    box-shadow:none !important;
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  }
  .search-wrap:focus-within{ border-color:rgba(255,255,255,.35) !important; background:#000 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ONE MOTION SPEED — every panel/page entrance uses the same pair, so
   nothing feels quicker or slower than anything else. Micro-interactions
   (hover, press, colour) stay fast on purpose; slowing those to .46s reads
   as lag, not smoothness.
   ═══════════════════════════════════════════════════════════════════════ */
:root{ --anim-t:.46s; --anim-e:cubic-bezier(.25,.8,.25,1); }

.sidebar{ transition:transform var(--anim-t) var(--anim-e) !important; }
.sb-overlay{ transition:opacity var(--anim-t) var(--anim-e) !important; }
.msearch-page.as-page{ transition:transform var(--anim-t) var(--anim-e), visibility var(--anim-t) !important; }
.sfilter-wrap{ transition:opacity var(--anim-t) var(--anim-e) !important; }
.sfilter-sheet{ transition:transform var(--anim-t) var(--anim-e) !important; }
.overlay{ transition:opacity var(--anim-t) var(--anim-e) !important; }
.modal{ transition:transform var(--anim-t) var(--anim-e), opacity var(--anim-t) var(--anim-e) !important; }
.pubprof-overlay{ transition:opacity var(--anim-t) var(--anim-e) !important; }
.video-detail-overlay{ transition:opacity var(--anim-t) var(--anim-e), visibility var(--anim-t) !important; }
.dd-col2{ transition:transform var(--anim-t) var(--anim-e) !important; }
.shorts-details-drawer{ transition:transform var(--anim-t) var(--anim-e) !important; }
.page.active{ animation-duration:var(--anim-t) !important; animation-timing-function:var(--anim-e) !important; }
.notif-panel.open{ animation-duration:var(--anim-t) !important; animation-timing-function:var(--anim-e) !important; }
@media(max-width:768px){
  .notif-panel{ transition:transform var(--anim-t) var(--anim-e), visibility var(--anim-t) !important; }
  .topbar{ transition:transform var(--anim-t) var(--anim-e) !important; }
}
/* A finger on the drawer must still track 1:1 — this has to beat the rules above */
body.sb-dragging .sidebar,
body.sb-dragging .sb-overlay{ transition:none !important; }

/* Pager for older notifications (the live listener only holds the newest 30) */
.notif-more{
  display:block; width:calc(100% - 24px); margin:10px 12px 20px; padding:12px;
  background:transparent; border:1px solid rgba(255,255,255,.16); border-radius:999px;
  color:#fff; font-size:14px; font-family:inherit; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.notif-more:active{ background:rgba(255,255,255,.08); }
.notif-more:disabled{ opacity:.5; cursor:default; }

/* Skeleton rows — shown until the first snapshot lands */
.notif-item.nskel{ pointer-events:none; background:transparent !important; }
.nskel-ic{ width:38px; height:38px; border-radius:50%; flex-shrink:0; }
.nskel-lines{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.nskel-bar{ height:11px; border-radius:6px; }
.nskel-b1{ width:72%; }
.nskel-b2{ width:44%; height:9px; }
/* Was animating background-position, which repaints every bar every frame.
   Same look, done with a transform sweep like .skel — compositor only. */
.nskel-ic, .nskel-bar{ background:#161616; position:relative; overflow:hidden; }
.nskel-ic::before, .nskel-bar::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.10) 50%,transparent 100%);
  transform:translateX(-100%); animation:skelSweep 1.3s ease-in-out infinite;
  will-change:transform; }
@media(prefers-reduced-motion:reduce){ .nskel-ic::before, .nskel-bar::before{ animation:none; } }

/* ── Mobile: a real page that slides in from the right ── */
@media(max-width:768px){
  .notif-panel{
    display:flex !important;                 /* stays in the tree so it can transition */
    position:fixed; inset:0; width:100%; height:100%; max-height:100%;
    border:none; border-radius:0; box-shadow:none !important;
    visibility:hidden;
    transform:translateX(100%);
    transition:transform .26s cubic-bezier(.05,0,0,1), visibility .26s;
    animation:none !important;               /* kill the desktop scaleIn */
  }
  .notif-panel.open{ transform:translateX(0); visibility:visible; }
  .notif-panel-hdr{ padding:14px 10px 13px; }
  .notif-back{ display:flex; }
  .notif-panel-close{ display:none; }
  .notif-hdr-spacer{ display:block; width:42px; flex-shrink:0; }
  .notif-panel-title{ flex:1; text-align:center; }
  body.notif-open{ overflow:hidden; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   MISNIVO DESIGN SYSTEM
   One type stack, one scale, one spacing rhythm, one palette. This block is
   last on purpose — it restates the few dozen places the old theme hard-coded
   Roboto, 11–13px text and the red accent, without unpicking each of them.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Inter FIRST, deliberately. With -apple-system/BlinkMacSystemFont ahead of
     it, Android resolves those to whatever system font the phone is set to —
     which is how the app ended up rendering in a serif while YouTube next to it
     did not. Inter first means every device gets the same face. Apple hardware
     falls through to SF Pro only if Inter fails to load. */
  --font-ui: 'Inter', -apple-system, 'SF Pro Display', 'Segoe UI', Roboto,
             Helvetica, Arial, sans-serif;

  /* Palette — brand red is gone. --blue/--blue2 keep their names because ~50
     rules and the JS-built markup reference them; they are just white now. */
  --bg:      #000000;
  --surface: #111111;
  --line:    #222222;
  --t1:      #FFFFFF;
  --t2:      #9E9E9E;
  --t3:      #8A8A8A;
  --blue:    #FFFFFF;
  --blue2:   #FFFFFF;
  --border:  #222222;
  --border2: #333333;

  /* Spacing rhythm */
  --gap-section: 30px;   /* between home/explore sections */
  --gap-head:    14px;   /* heading → its cards */
  --pad-card:    8px;
}

body{ background:var(--bg); }

/* ── Type ── */
body, button, input, textarea, select, optgroup,
h1,h2,h3,h4,h5,h6, p, div, span, a, label, small, strong, b, li, td, th {
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* icon fonts must win the rule above back */
.mi{ font-family:'Material Icons Round' !important; }
.sidebar .nav-item .mi, .rail-item .mi,
.topbar .icon-btn .mi, .topbar .search-icon-btn .mi,
.bn-item .mi, .bn-post .mi{
  font-family:'Material Symbols Outlined','Material Icons Round' !important;
}

/* ── Scale ──
   A flat 32px heading was too big for a 360px phone: "Live Missions" wrapped to
   two lines and shoved its subtitle and View All out of the row. The scale is
   responsive now — the hierarchy comes from the RATIO between steps, not from
   one huge number, so it survives at both widths. */
.home-sec-title, .sec-title{
  font-size:21px !important; font-weight:700 !important;
  letter-spacing:-.4px; color:var(--t1) !important; line-height:1.2;
}
.home-sec-sub, .sec-sub{
  font-size:13px !important; font-weight:400 !important;
  color:rgba(255,255,255,.5) !important; white-space:nowrap;
}
.home-sec-viewall{ font-size:13px !important; font-weight:600 !important; color:var(--t1) !important; }
/* the little disc before each heading read as a stray dot once it lost its colour */
.sec-dot, .home-sec-dot{ display:none !important; }

.chip{
  font-size:13px !important; font-weight:600 !important;
  padding:8px 15px !important; border-radius:999px !important;
  background:var(--surface) !important; border:1px solid rgba(255,255,255,.10) !important;
  color:var(--t2) !important; box-shadow:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.chip.active{ background:#fff !important; border-color:#fff !important; color:#000 !important; }

@media(min-width:769px){
  .home-sec-title, .sec-title{ font-size:24px !important; letter-spacing:-.5px; }
  .home-sec-sub, .sec-sub{ font-size:14px !important; }
  .home-sec-viewall{ font-size:14px !important; }
  .chip{ font-size:14px !important; padding:9px 17px !important; }
}
/* On a narrow phone the subtitle is the first thing to go — the heading and
   View All matter more than "Accept & earn". */
@media(max-width:480px){
  .home-sec-sub, .sec-sub{ display:none !important; }
}

/* Card titles clamp at two lines — three-line titles were what made the feed
   feel crowded more than the size did. */
.yt-title, .active-dare-card .yt-title, .feed-longs .yt-title{
  font-size:15px !important; font-weight:600 !important;
  color:var(--t1) !important; line-height:1.35 !important; letter-spacing:-.1px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.yt-sub, .active-dare-card .yt-sub, .feed-longs .yt-sub{
  font-size:12.5px !important; font-weight:400 !important; color:var(--t3) !important;
  margin-top:5px !important;
}
@media(min-width:769px){
  .yt-title, .active-dare-card .yt-title, .feed-longs .yt-title{ font-size:16px !important; }
  .yt-sub, .active-dare-card .yt-sub, .feed-longs .yt-sub{ font-size:13px !important; }
}

/* ── Spacing ── */
.home-section, .exp-section{ margin-bottom:var(--gap-section) !important; }
.home-sec-hdr, .sec-hdr{ margin-bottom:var(--gap-head) !important; }
.shorts-home-sec{ margin:var(--gap-section) 0 !important; }

/* ── Cards ──
   Horizontal mission cards get a real container; the long-video feed stays
   borderless like YouTube's, with only the thumbnail rounded. */
/* No card frame at all — mission cards now present exactly like the video feed
   does: a rounded thumbnail with the meta row underneath. The box was competing
   with the thumbnail instead of holding it. */
.active-dare-card, .exp-card, .dare-list-card{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  overflow:visible;
}
.active-dare-card .adc-thumb{ border-radius:14px !important; }
.active-dare-card .yt-info{ padding:10px 2px 0 !important; gap:10px !important; }
.active-dare-card .yt-av{ width:32px !important; height:32px !important; }

.feed-longs .yt-card, #homeVideoGrid .yt-card{
  background:transparent !important; border:none !important;
  padding:0 !important; box-shadow:none !important;
}
.feed-longs .yt-thumb, #homeVideoGrid .yt-thumb, .short-card .short-thumb,
.exp-card .yt-thumb, .dare-list-thumb{
  border-radius:14px !important; overflow:hidden;
}
@media(min-width:769px){
  .active-dare-card .adc-thumb,
  .feed-longs .yt-thumb, #homeVideoGrid .yt-thumb, .short-card .short-thumb,
  .exp-card .yt-thumb, .dare-list-thumb{ border-radius:16px !important; }
}

/* ── Bottom nav to spec ── */
.bn-item{ color:#777 !important; }
.bn-item .mi{ font-size:24px !important; }
.bn-item.active{ color:#fff !important; }

/* ── Accent controls: filled white, black label (they were red with white
      text — flipping --blue to white alone would have made them invisible) ── */
.btn-fill, .btn-empty, .btn-accept, .btn-approve, .ad-cta-btn, .scroll-ad-cta,
.pdc-submit, .pe-btn-save, .btn-signup-topbar{
  background:#fff !important; color:#000 !important;
  border:none !important; box-shadow:none !important; font-weight:600;
}
.btn-fill .mi, .btn-empty .mi, .btn-accept .mi, .btn-approve .mi,
.ad-cta-btn .mi, .pdc-submit .mi, .pe-btn-save .mi{ color:#000 !important; }
.btn-fill:hover, .btn-empty:hover, .btn-accept:hover, .btn-approve:hover,
.ad-cta-btn:hover, .scroll-ad-cta:hover, .pdc-submit:hover, .pe-btn-save:hover{
  background:rgba(255,255,255,.86) !important; filter:none !important; transform:none !important;
}
/* the old red hairline that swept across a card on hover */
.yt-card::after, .dare-list-card::after{ display:none !important; }
/* section dots were red discs with a red glow */
.sec-dot, .home-sec-dot{ background:var(--t3) !important; box-shadow:none !important; }
/* toggle: white track needs a dark knob to stay visible */
.switch input:checked + .sl{ background:#fff !important; border-color:#fff !important; }
.switch input:checked + .sl::before{ background:#000 !important; }   /* knob is ::before, and white-on-white would vanish */

/* The brand red also sat hard-coded in the shorts player, the video scrubber
   and a couple of badges — the token swap above could not reach those. */
input[type=range]{ accent-color:#fff !important; }
.shorts-act.liked, .shorts-act.liked .mi,
.shorts-pin-badge, .shorts-comment-pin{ color:#fff !important; }
.ta-save{ background:#fff !important; color:#000 !important; }
/* avatars fell back to a red gradient when the user had no photo */
.shorts-creator-av, .shorts-comment-av{ background:#1c1c1c !important; color:#fff !important; }
/* send button in the shorts comment box */
.shorts-comment-input-row button{ background:#fff !important; color:#000 !important; }
.shorts-comment-input-row button .mi{ color:#000 !important; }
/* report is destructive, so it keeps a warning tint — but a neutral one */
.shorts-menu-report{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  color:#fff !important;
}

/* ── Weight pass: everything was sitting a step too heavy ──
   Roughly 20% lighter across the board — 800→600, 700→600, 600→500. Icon
   fonts and the Symbols variable axes are untouched. */
.home-sec-title, .sec-title, .exp-sec-title{ font-weight:600 !important; }
.yt-title, .active-dare-card .yt-title, .feed-longs .yt-title,
.short-title, .vd-title, .dd-title, .dd-title2{ font-weight:500 !important; }
.home-sec-viewall, .chip, .sfilter-chip, .bn-item, .nav-item, .rail-lbl,
.srow-txt, .sppl-name, .set-menu-row, .smr-t{ font-weight:500 !important; }
.logo-word{ font-weight:700 !important; }
.sb-head-name{ font-weight:600 !important; }
.msearch-panel .srow-hdr{ font-weight:600 !important; }
.notif-panel-title, .modal-title, .empty-title{ font-weight:600 !important; }
.btn-post, .btn-fill, .btn-empty, .btn-accept, .btn-approve,
.sfilter-done, .msearch-go{ font-weight:600 !important; }

/* ── Chip row: smaller and closer to the top on desktop ── */
@media(min-width:769px){
  .chips-bar{ padding:0 0 14px !important; margin-bottom:2px !important; }
  .chip{ font-size:13px !important; padding:7px 14px !important; }
}

/* ── One card rhythm everywhere ──
   Grids were set per-page: 16/14 here, 18 on narrow, 24 in the video feed, and
   the profile grid inherited the tightest of them — which is why profile looked
   cramped next to home. Single value, every page. */
.active-dare-grid{ gap:28px 16px !important; padding:2px 0 !important; }
.feed-longs, #homeVideoGrid .yt-grid, .yt-grid{ gap:28px 16px !important; }
@media(max-width:768px){
  .active-dare-grid{ grid-template-columns:1fr !important; gap:28px !important; }
  .feed-longs, #homeVideoGrid .yt-grid, .yt-grid{ gap:28px !important; }
}

/* ══ Shared element transition ══
   One fixed layer that carries the tapped thumbnail into the player slot.
   Everything animated here is transform/border-radius only, so it runs on the
   compositor — no reflow, no repaint of the page underneath. */
.hero-fly{
  position:fixed; z-index:99999; pointer-events:none;
  transform-origin:top left;
  will-change:transform;
  overflow:hidden;                     /* crops the picture layer, like object-fit:cover */
  background:#111;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}
/* Counter-scaled inside the frame so the photo never stretches — see _heroFly */
.hero-fly-pic{
  position:absolute; inset:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  transform-origin:center;
  will-change:transform;
}

/* The rest of the detail page rises INTO the landing thumbnail. It starts a
   beat after the flight so the thumbnail leads and the page joins it, rather
   than both arriving at once — which read as a snap. col2 is excluded: on
   mobile it is the swipe-in drawer and already owns its transform. */
.video-detail-overlay.hero-in .dd-col1 > *:not(.dd-hero):not(.vd2-player-wrap),
.video-detail-overlay.hero-in .dd-col3{
  animation:heroRise var(--rise-ms,420ms) cubic-bezier(.25,.8,.25,1) both;
  animation-delay:var(--rise-lag,90ms);
}
@keyframes heroRise{
  from{ opacity:0; transform:translateY(var(--rise-y,22px)); }
  to  { opacity:1; transform:none; }
}

/* Mobile is where it read as too fast: longer, later, and each block a touch
   behind the one above it so the page assembles instead of appearing. */
@media(max-width:768px){
  .video-detail-overlay.hero-in .dd-col1 > *:not(.dd-hero):not(.vd2-player-wrap),
  .video-detail-overlay.hero-in .dd-col3{
    --rise-ms:560ms; --rise-lag:150ms; --rise-y:38px;
  }
  .video-detail-overlay.hero-in .dd-col1 > *:nth-child(3){ animation-delay:200ms; }
  .video-detail-overlay.hero-in .dd-col1 > *:nth-child(4){ animation-delay:245ms; }
  .video-detail-overlay.hero-in .dd-col1 > *:nth-child(5){ animation-delay:285ms; }
  .video-detail-overlay.hero-in .dd-col1 > *:nth-child(n+6){ animation-delay:320ms; }
  .video-detail-overlay.hero-in .dd-col3{ animation-delay:340ms; }
}

@media(prefers-reduced-motion:reduce){
  .video-detail-overlay.hero-in .dd-col1 > *,
  .video-detail-overlay.hero-in .dd-col3{ animation:none !important; }
}

/* ══ Settings → Accessibility → Page animations = OFF ══
   The toggle used to stop only the page slide. body.no-anim now silences every
   moving surface: the drawer, search page, notification panel, filter sheet,
   page transitions and the thumbnail hero flight. Panels still OPEN — they just
   arrive instantly instead of sliding. Opacity is left alone on the overlay
   scrims so nothing pops in over the feed with a hard edge. */
body.no-anim .sidebar,
body.no-anim .sb-overlay,
body.no-anim .msearch-page.as-page,
body.no-anim .sfilter-wrap,
body.no-anim .sfilter-sheet,
body.no-anim .notif-panel,
body.no-anim .overlay,
body.no-anim .modal,
body.no-anim .dd-col2,
body.no-anim .shorts-details-drawer,
body.no-anim .video-detail-overlay,
body.no-anim .pubprof-overlay,
body.no-anim .topbar{ transition:none !important; }

body.no-anim .page.active,
body.no-anim .page.active.nav-fwd,
body.no-anim .page.active.nav-back,
body.no-anim .notif-panel.open,
body.no-anim .home-section,
body.no-anim .video-detail-overlay.hero-in .dd-col1 > *,
body.no-anim .video-detail-overlay.hero-in .dd-col3{ animation:none !important; }

body.no-anim .hero-fly{ display:none !important; }

/* ══ Mission & Video detail are full-screen on mobile ══
   They used to start at top:56px with the app topbar showing through. When the
   feed had scrolled and the topbar was hidden (body.tb-hide), that 56px strip
   showed the PREVIOUS page instead — the "cut background" at the top. Rather
   than restoring the bar, these pages simply do not have one: the player starts
   at y=0 and the content owns the full height. Home keeps its auto-hide bar,
   and desktop is untouched. */
@media(max-width:768px){
  body.detail-open .topbar{ display:none !important; }

  #dareDetailOverlay, #videoDetailOverlay{ top:0 !important; }
  #videoDetailOverlay .vd2-player-wrap{ top:0 !important; }
  /* the description drawer was pinned under the old bar; without one it would
     leave a 56px strip of the page showing above it */
  #dareDetailOverlay .dd-col2, #videoDetailOverlay .dd-col2{ top:0 !important; }

  /* the notch/status bar still needs clearing when installed as a PWA */
  @supports (padding-top: env(safe-area-inset-top)){
    #dareDetailOverlay .dd-col1{ padding-top:env(safe-area-inset-top); }
  }
}

/* ══ Shorts: a play badge you can actually see when paused ══
   The only play control was a small icon in the top strip, which is easy to
   miss — a paused short looked like a frozen page. */
.shorts-center-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.85);
  width:72px; height:72px; border-radius:50%;
  background:rgba(0,0,0,.55); border:none; color:#fff;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; z-index:5;
  transition:opacity .18s ease, transform .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.shorts-center-play .mi{ font-size:44px; }
.shorts-snap-item.is-paused .shorts-center-play{
  opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1);
}

/* double-tap to like — a quick bolt over the middle of the video */
.shorts-dbl-heart{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.4);
  color:#fff; opacity:0; pointer-events:none; z-index:6;
}
.shorts-dbl-heart .mi{ font-size:96px; filter:drop-shadow(0 4px 18px rgba(0,0,0,.6)); }
.shorts-dbl-heart.pop{ animation:shDblPop .62s cubic-bezier(.25,.8,.25,1) both; }
@keyframes shDblPop{
  0%  { opacity:0; transform:translate(-50%,-50%) scale(.4); }
  35% { opacity:1; transform:translate(-50%,-50%) scale(1.1); }
  70% { opacity:1; transform:translate(-50%,-50%) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1.15); }
}

/* the dislike button lights up like the like button does */
.shorts-dislike-btn.liked .mi{ color:#fff; }
.shorts-dislike-btn.liked{ background:rgba(255,255,255,.18); }

/* Long video: same idea — a badge over the player while it is paused */
.vd-center-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.85);
  width:66px; height:66px; border-radius:50%;
  background:rgba(0,0,0,.55); border:none; color:#fff;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; z-index:5;
  transition:opacity .18s ease, transform .18s ease;
}
.vd-center-play .mi{ font-size:40px; }
.vd2-player-wrap.is-paused .vd-center-play{
  opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1);
}

@media(prefers-reduced-motion:reduce){
  .shorts-center-play, .vd-center-play{ transition:none; }
  .shorts-dbl-heart.pop{ animation-duration:.01s; }
}

/* ══ Comment surfaces: flat black, no glass ══
   Same surface as the hamburger drawer, so the sheet reads as part of the app
   rather than a frosted panel floating over it. */
.dd-cbox, .shorts-comments, .shorts-rowcmts{
  background:#000 !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
  box-shadow:none !important;
}
.dd-cbox-head{ border-bottom:1px solid rgba(255,255,255,.10) !important; }
.dd-cbox-close{
  background:transparent !important; border:none !important; color:#fff !important;
}
.dd-cbox-close:hover{ background:rgba(255,255,255,.10) !important; }

/* Send: the icon itself, not a coloured disc around it */
.vd-comment-send-btn{
  width:38px !important; height:38px !important;
  background:transparent !important;
  border:none !important; border-radius:50% !important;
  color:#fff !important;
  transition:background .15s ease !important;
}
.vd-comment-send-btn:hover{ background:rgba(255,255,255,.10) !important; }
.vd-comment-send-btn:active{ background:rgba(255,255,255,.16) !important; }
.vd-comment-send-btn .mi{ font-size:22px !important; color:#fff !important; }
.vd-comment-send-btn:disabled{ opacity:.4; }

/* "Show N more replies" under a thread */
.cmt-repmore{
  display:block; margin:10px 0 2px;
  background:none; border:none; padding:4px 0;
  color:rgba(255,255,255,.75); font-family:inherit; font-size:13px; font-weight:500;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.cmt-repmore:hover{ color:#fff; }

/* Comment rows used to fade in on every render — with a full list rebuild after
   each action, that fade WAS the blink. */
.vd-comment{ animation:none !important; }

/* ══ Comment footer: the input row was still a frosted grey bar ══ */
.dd-cbox-foot{
  background:#000 !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
}
.vd-comment-field{
  background:#000 !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border:1px solid rgba(255,255,255,.18) !important;
}
.vd-comment-field:focus-within{ border-color:rgba(255,255,255,.4) !important; }
.vd-comment-input{ font-size:14px !important; }

/* Send: the thin outlined face the drawer/topbar buttons use */
.vd-comment-send-btn .mi{
  font-family:'Material Symbols Outlined','Material Icons Round' !important;
  font-variation-settings:'FILL' 0,'wght' 200,'GRAD' 0,'opsz' 24;
}

/* Bottom "Hide replies" sits under a fully expanded thread */
.cmt-rephide{ display:flex; align-items:center; gap:6px; }
.cmt-rephide .mi{
  font-size:18px;
  font-family:'Material Symbols Outlined','Material Icons Round';
  font-variation-settings:'FILL' 0,'wght' 200,'GRAD' 0,'opsz' 24;
}

/* the shorts sheet's own input row, same treatment */
.shorts-comment-input-row, .shorts-cmt-input, .shorts-rowcmts-input{
  background:#000 !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
}

/* ══ Mobile: no scrollbar track anywhere ══
   The global ::-webkit-scrollbar gives every scrollable box a 4px rail, and on
   a phone that reads as a stray line riding up and down the right edge. Touch
   devices don't need a visible one — the content still scrolls exactly the same. */
@media(max-width:768px){
  html, body, .main, .page, .overlay, .modal,
  .dd-cbox-list, .notif-list, .shorts-comments, .shorts-rowcmts-list,
  .video-detail-overlay, .sidebar, .msearch-page, .dd-col2,
  #shortsSnapContainer, .shorts-snap-item{
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
  }
  html::-webkit-scrollbar, body::-webkit-scrollbar,
  .main::-webkit-scrollbar, .page::-webkit-scrollbar,
  .overlay::-webkit-scrollbar, .modal::-webkit-scrollbar,
  .dd-cbox-list::-webkit-scrollbar, .notif-list::-webkit-scrollbar,
  .shorts-comments::-webkit-scrollbar, .shorts-rowcmts-list::-webkit-scrollbar,
  .video-detail-overlay::-webkit-scrollbar, .sidebar::-webkit-scrollbar,
  .msearch-page::-webkit-scrollbar, .dd-col2::-webkit-scrollbar,
  #shortsSnapContainer::-webkit-scrollbar, .shorts-snap-item::-webkit-scrollbar{
    width:0 !important; height:0 !important; display:none !important;
  }
}

/* Shorts comment sheet gets the same hairline the mission/video sheets have */
@media(max-width:768px){
  .shorts-comments{
    border:1px solid rgba(255,255,255,.12) !important;
    border-bottom:none !important;
    border-radius:16px 16px 0 0 !important;
  }
  .shorts-comment-input-row{
    border-top:1px solid rgba(255,255,255,.10) !important;
    background:#000 !important;
  }
  /* its input + send match the other sheets */
  .shorts-comment-input-row input{
    background:#000 !important;
    border:1px solid rgba(255,255,255,.18) !important;
    border-radius:50px !important;
  }
  .shorts-comment-input-row > button{
    background:transparent !important; border:none !important; color:#fff !important;
  }
  .shorts-comment-input-row > button .mi{
    font-family:'Material Symbols Outlined','Material Icons Round' !important;
    font-variation-settings:'FILL' 0,'wght' 200,'GRAD' 0,'opsz' 24;
    font-size:22px !important;
  }
}

/* ══ Installed app: keep the clock and battery, paint their strip black ══
   Fullscreen removed the status bar entirely, which also cut the top and bottom
   of pages that had been laid out expecting one. Back to standalone — the
   system draws the bar and fills it with theme_color (#000), so it matches the
   app instead of showing a lighter band.

   Everything below reserves the notch/status inset ONLY where a bar exists.
   On Android standalone the inset is 0, so these are no-ops there and only do
   real work on notched iOS. */
/* Runs in EVERY installed mode, keyed on the insets rather than on the mode.
   The first fullscreen attempt cut the top and bottom of pages precisely because
   these rules were keyed on display-mode:standalone and stopped applying the
   moment fullscreen took over. env() reports 0 when there is nothing to clear,
   so each rule reserves exactly what the OS asks for and nothing assumes a bar
   exists — a phone with a camera cutout still gets clearance, one without loses
   nothing, and neither can end up cropped. */
@media (display-mode: fullscreen), (display-mode: standalone), (display-mode: minimal-ui){
  .topbar{
    padding-top:env(safe-area-inset-top, 0px) !important;
    height:calc(56px + env(safe-area-inset-top, 0px)) !important;
  }
  .main{ margin-top:calc(56px + env(safe-area-inset-top, 0px)) !important; }
  .sb-rail{ top:calc(56px + env(safe-area-inset-top, 0px)) !important; }
  .sidebar{ padding-top:env(safe-area-inset-top, 0px) !important; }
  /* these pages carry no topbar of their own, so they clear the cutout themselves */
  #dareDetailOverlay .dd-col1,
  #videoDetailOverlay .vd2-player-wrap{ margin-top:env(safe-area-inset-top, 0px) !important; }
  .notif-panel-hdr{ padding-top:calc(14px + env(safe-area-inset-top, 0px)) !important; }
  .msearch-bar{ padding-top:calc(8px + env(safe-area-inset-top, 0px)) !important; }
}
/* the floating bottom bar clears the gesture strip in both modes */
.bottom-nav{ bottom:calc(env(safe-area-inset-bottom, 0px) + 10px) !important; }

/* ══ Whatever the system reveals, it reveals black ══
   In fullscreen Android brings the status/gesture bars back for a moment on a
   swipe or a back gesture, and draws them as a translucent scrim — so the colour
   you see through them is whatever the page is painting underneath. body was
   black but html was not, and html is what shows in the overscroll gap and
   behind a scrim before body's background propagates. Both are pinned now, plus
   color-scheme so the browser's own chrome (overscroll glow, form controls,
   scrollbars) renders dark instead of flashing white. */
html{
  background:#000 !important;
  color-scheme:dark;
  overscroll-behavior:none;          /* no white rubber-band strip at the edges */
}
body{
  background:#000 !important;
  overscroll-behavior-y:none;
  min-height:100dvh;                 /* fills the viewport even when content is short */
}
/* the fixed layers that sit at the very edges keep the same black */
.topbar, .bottom-nav, .sidebar, .sb-rail{ background-color:#000 !important; }

/* ══ Navigation bar: black too ══
   Android takes the status bar colour from theme_color, but the bottom
   navigation bar picks up whatever the page paints at its own bottom edge under
   edge-to-edge. A short page left the canvas showing there, which is the grey
   band under the floating nav. This keeps a black plate pinned to the bottom
   edge, behind everything, so that strip is always #000. */
body::after{
  content:'';
  position:fixed; left:0; right:0; bottom:0;
  height:env(safe-area-inset-bottom, 0px);
  background:#000;
  z-index:0; pointer-events:none;
}

/* ═══════════════════════════════════════════════════════════════════════
   MISSION DETAIL — YouTube-compact pass.
   Everything above the fold: thumbnail edge-to-edge, then title, creator,
   bare outlined action icons, the Description & rules card, and a YouTube
   comments card. No back / save / ••• bar on either breakpoint.
   Structure and styling only — every handler and element id is untouched.
   ═══════════════════════════════════════════════════════════════════════ */
#dareDetailOverlay,
#videoDetailOverlay{ background:#000 !important; }
#dareDetailOverlay .dd-bar,
#videoDetailOverlay .dd-bar{
  background:transparent !important; border:none !important; box-shadow:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}

/* ── The Description & rules drawer is not one of those flat cards ──────────
   The rule directly above strips background and border from every .dd-bar so
   the detail page reads as one surface. The mobile drawer also carries
   .dd-bar, so it was being flattened too — sliding in fully transparent, with
   the page showing straight through it.
   It is a panel over the page, so it gets the SAME look as the sign-in box:
   flat black, a white edge, rounded corners. No glass, no blur, no tint —
   those were taken out of this app on purpose. */
@media(max-width:768px){
  #dareDetailOverlay .dd-col2,
  #videoDetailOverlay .dd-col2{
    background:#000 !important;                    /* same as .auth-box */
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border:1px solid #fff !important;
    border-right:none !important;                  /* it sits against the edge */
    border-radius:18px 0 0 18px !important;
    box-shadow:none !important;
    /* starts under the thumbnail, runs to the bottom of the screen, and
       scrolls inside itself. --dd-top is measured when the drawer opens. */
    top:var(--dd-top, 56px) !important;
    bottom:0 !important;
    /* .dd-bar sets margin-bottom:16px; on a fixed panel that lifts it off the
       bottom edge and the drawer stopped short of the screen. */
    margin:0 !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  /* DESCRIPTION and RULES were 11px — the same weight as a caption, so the two
     blocks ran together and neither looked like a heading. */
  #dareDetailOverlay .dd-col2 .dd-sec-label,
  #videoDetailOverlay .dd-col2 .dd-sec-label{
    font-size:15px; font-weight:800; color:#fff;
    letter-spacing:.4px; margin-bottom:10px;
  }
  /* and room between the two, with a hairline so the split is unmistakable */
  #dareDetailOverlay .dd-col2 #ddRulesBar,
  #videoDetailOverlay .dd-col2 #vdRulesBar{
    margin-top:26px; padding-top:22px;
    border-top:1px solid rgba(255,255,255,.16);
  }
  #dareDetailOverlay .dd-col2 #ddRulesBar .dd-sec-label,
  #videoDetailOverlay .dd-col2 #vdRulesBar .dd-sec-label{ margin-top:0; }
}

/* the sticky bar is gone at every width now — back is the device gesture, and
   Save / Share / Report all live in the ••• on the actions row */
#dareDetailOverlay .dd-topbar{ display:none !important; }

/* ── thumbnail: full bleed, nothing floating on top of it ── */
#dareDetailOverlay .dd-hero{ border-radius:14px !important; margin:0 !important; }
#dareDetailOverlay .dd-hero .dd-bounty-badge,
#dareDetailOverlay .dd-hero .dd-expiry-badge{ font-size:11px; }

/* ── title ── */
#dareDetailOverlay .dd-title2,
#videoDetailOverlay .dd-title2{
  font-size:17px !important; font-weight:600 !important; letter-spacing:-.2px;
  line-height:1.3; color:#fff !important; margin:12px 0 0 !important;
}

/* ── avatar → username → Follow ── */
#dareDetailOverlay .dd-idrow,
#videoDetailOverlay .dd-idrow{ display:flex; align-items:center; margin:10px 0 0; }
#dareDetailOverlay .dd-creator,
#videoDetailOverlay .dd-creator{
  display:flex !important; align-items:center; gap:10px; width:100%;
  background:transparent !important; border:none !important; padding:0 !important; margin:0 !important;
}
#dareDetailOverlay .dd-creator-av,
#videoDetailOverlay .dd-creator-av{
  width:32px !important; height:32px !important; border-radius:50%; overflow:hidden; flex-shrink:0;
  background:#181818; display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; color:#fff;
}
#dareDetailOverlay .dd-creator-nm,
#videoDetailOverlay .dd-creator-nm{
  font-size:14px; font-weight:600; color:#fff; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#dareDetailOverlay .dd-follow,
#videoDetailOverlay .dd-follow{
  margin-left:auto; flex-shrink:0;
  background:transparent !important; border:1px solid rgba(255,255,255,.28) !important;
  color:#fff !important; border-radius:999px !important;
  padding:0 16px !important; height:32px; line-height:30px;
  font-size:13px !important; font-weight:600 !important;
  box-shadow:none !important; white-space:nowrap;
}
#dareDetailOverlay .dd-follow:hover,
#videoDetailOverlay .dd-follow:hover{ background:rgba(255,255,255,.10) !important; }

/* ── actions: bare outlined icons, no circle behind them ── */
#dareDetailOverlay .dd-actions,
#videoDetailOverlay .dd-actions{
  display:flex !important; align-items:center; gap:2px; flex-wrap:nowrap;
  margin:10px 0 0 !important; padding:0 !important; border:none !important;
}
#dareDetailOverlay .dd-cta-inline,
#videoDetailOverlay .dd-cta-inline{ display:contents; }
#dareDetailOverlay .dd-act-gap,
#videoDetailOverlay .dd-act-gap{ flex:1; }
#dareDetailOverlay .vd-action-btn,
#videoDetailOverlay .vd-action-btn{
  height:34px; min-width:34px; padding:0 8px !important;
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  background:transparent !important; border:none !important; border-radius:999px !important;
  color:#fff !important; font-size:13px; font-weight:500; cursor:pointer;
  box-shadow:none !important; -webkit-tap-highlight-color:transparent;
  transition:background .15s ease;
}
#dareDetailOverlay .vd-action-btn .mi,
#videoDetailOverlay .vd-action-btn .mi{ font-size:22px; color:#fff !important; }
#dareDetailOverlay .vd-action-btn:hover,
#videoDetailOverlay .vd-action-btn:hover{ background:rgba(255,255,255,.08) !important; }
#dareDetailOverlay .vd-action-btn:active,
#videoDetailOverlay .vd-action-btn:active{ background:rgba(255,255,255,.14) !important; }
#dareDetailOverlay .dd-share-ic,
#videoDetailOverlay .dd-share-ic{ font-family:'Material Symbols Outlined','Material Icons Round' !important; transform:scaleX(-1); }
/* the one action that has to be found first keeps its word and an outline */
#dareDetailOverlay .dd-cta-btn,
#videoDetailOverlay .dd-cta-btn{
  height:32px; padding:0 16px !important; gap:6px;
  border:1px solid rgba(255,255,255,.28) !important;
  font-size:13px; font-weight:600;
}
#dareDetailOverlay .dd-cta-btn .mi,
#videoDetailOverlay .dd-cta-btn .mi{ font-size:18px; }
#dareDetailOverlay .dd-cta-btn.is-cta,
#videoDetailOverlay .dd-cta-btn.is-cta{ border-color:#fff !important; }
#dareDetailOverlay .dd-cta-btn.is-done,
#videoDetailOverlay .dd-cta-btn.is-done,
#dareDetailOverlay .dd-cta-btn.is-mine,
#videoDetailOverlay .dd-cta-btn.is-mine{ opacity:.6; cursor:default; }

/* ── the age/views line, now at the foot of the description box ── */
#dareDetailOverlay .dd-metaline,
#videoDetailOverlay .dd-metaline{
  display:block; font-size:12px; font-weight:500;
  color:rgba(255,255,255,.5); margin:18px 0 0;
  padding-top:14px; border-top:1px solid rgba(255,255,255,.10);
}
#dareDetailOverlay .dd-col2-cap,
#videoDetailOverlay .dd-col2-cap{
  font-size:17px; font-weight:600; line-height:1.3; color:#fff; margin:0 0 14px;
}


/* ── comments: the YouTube card ── */
#dareDetailOverlay .dd-comments,
#videoDetailOverlay .dd-comments,
#dareDetailOverlay .dd-col3,
#videoDetailOverlay .dd-col3{
  background:#151515 !important; border:none !important;
  border-radius:12px !important; padding:12px !important; margin:12px 0 0 !important;
}
#dareDetailOverlay .vd-sec-title,
#videoDetailOverlay .vd-sec-title{
  display:flex; align-items:baseline; gap:8px;
  font-size:14px !important; font-weight:500 !important; color:#fff !important;
  margin:0 0 10px !important;
}
#dareDetailOverlay .dd-comments .vd-sec-title .mi,
#videoDetailOverlay .dd-comments .vd-sec-title .mi{ display:none; }
#dareDetailOverlay .dd-cmt-count,
#videoDetailOverlay .dd-cmt-count{ font-size:13px; color:rgba(255,255,255,.5) !important; font-weight:400 !important; }
/* the whole card is the tap target, so the button underneath is redundant */
#dareDetailOverlay .dd-viewall,
#videoDetailOverlay .dd-viewall{ display:none !important; }
#dareDetailOverlay .dd-preview-comment,
#videoDetailOverlay .dd-preview-comment{
  display:flex; gap:10px; align-items:flex-start;
  background:transparent !important; border:none !important; padding:0 !important; margin:0 !important;
}
#dareDetailOverlay .dd-preview-comment .vd-comment-av,
#videoDetailOverlay .dd-preview-comment .vd-comment-av{
  width:24px !important; height:24px !important; border-radius:50%; overflow:hidden; flex-shrink:0;
  font-size:11px !important;
}
/* YouTube shows the comment, not who wrote it, in the collapsed card */
#dareDetailOverlay .dd-preview-comment .vd-comment-author,
#videoDetailOverlay .dd-preview-comment .vd-comment-author{ display:none !important; }
#dareDetailOverlay .dd-preview-comment .vd-comment-text,
#videoDetailOverlay .dd-preview-comment .vd-comment-text{
  font-size:13px !important; line-height:1.45; color:#fff !important; margin:0 !important;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
#dareDetailOverlay .vd-no-comments,
#videoDetailOverlay .vd-no-comments{
  color:rgba(255,255,255,.45) !important; font-size:13px; text-align:left; padding:0 !important;
}
#dareDetailOverlay .vd-no-comments .mi,
#videoDetailOverlay .vd-no-comments .mi{ display:none; }

/* ── More Missions sits right under the comments, same card ── */
#dareDetailOverlay .dd-col3 .vd-sec-title,
#videoDetailOverlay .dd-col3 .vd-sec-title{ font-size:14px !important; }
#dareDetailOverlay .dd-col3 .vd-sec-title .mi,
#videoDetailOverlay .dd-col3 .vd-sec-title .mi{ font-size:18px; }

/* ── mobile: kill the double side padding that was squeezing everything ── */
@media(max-width:768px){
  #dareDetailOverlay .dd-wrap,
  #videoDetailOverlay .dd-wrap{ padding:0 0 40px !important; }
  /* one 12px gutter, not the 32px the wrap and the column used to add up to;
     the thumbnail pulls back out of it so it still bleeds to both edges */
  /* video page is deliberately left out — its player is position:fixed, so its
     column 1 needs the top clearance kept and gets longhand padding below */
  #dareDetailOverlay .dd-col1{ padding:0 12px 24px !important; }
  /* flush to the top edge, so only the bottom pair curves */
  #dareDetailOverlay .dd-hero{ margin:0 -12px !important; width:auto !important; border-radius:0 0 14px 14px !important; }
  #dareDetailOverlay .dd-col3,
  #videoDetailOverlay .dd-col3{
    margin:12px !important; background:#000 !important;
    border:1px solid rgba(255,255,255,.28) !important; border-radius:14px !important;
  }
  /* the caption is the only way into the description box on mobile */
  #dareDetailOverlay .dd-title2,
  #videoDetailOverlay .dd-title2{ cursor:pointer; }
}
@media(max-width:360px){
  #dareDetailOverlay .dd-title2,
  #videoDetailOverlay .dd-title2{ font-size:16px !important; }
  #dareDetailOverlay .vd-action-btn,
  #videoDetailOverlay .vd-action-btn{ padding:0 6px !important; }
  #dareDetailOverlay .vd-action-btn .mi,
  #videoDetailOverlay .vd-action-btn .mi{ font-size:20px; }
}

/* ── desktop: same page, roomier. No sticky bar here either. ── */
@media(min-width:769px){
  #dareDetailOverlay .dd-wrap,
  #videoDetailOverlay .dd-wrap{ padding-top:20px; }
  #dareDetailOverlay .dd-title2,
  #videoDetailOverlay .dd-title2{ font-size:20px !important; margin-top:14px !important; }
  #dareDetailOverlay .dd-creator-av,
  #videoDetailOverlay .dd-creator-av{ width:38px !important; height:38px !important; }
  #dareDetailOverlay .dd-creator-nm,
  #videoDetailOverlay .dd-creator-nm{ font-size:15px; }
  #dareDetailOverlay .dd-follow,
  #videoDetailOverlay .dd-follow{ height:34px; line-height:32px; }
  #dareDetailOverlay .vd-action-btn,
  #videoDetailOverlay .vd-action-btn{ height:36px; padding:0 10px !important; }
  #dareDetailOverlay .dd-cta-btn,
  #videoDetailOverlay .dd-cta-btn{ height:34px; }
  /* The three boxes are one set: same black, same hairline, same radius, same
     padding — and they all end on the same line. .dd-col2 was hugging its
     content because of align-self, and the comments card was the only one of
     the three that is nested, so it needed the column made a flex box before it
     could grow down to meet the other two. */
  #dareDetailOverlay .dd-col2,
  #videoDetailOverlay .dd-col2,
  #dareDetailOverlay .dd-comments,
  #videoDetailOverlay .dd-comments,
  #dareDetailOverlay .dd-col3,
  #videoDetailOverlay .dd-col3{
    background:#000 !important;
    border:1px solid rgba(255,255,255,.28) !important;
    border-radius:14px !important;
    padding:16px !important;
    margin:0 !important;
  }
  #dareDetailOverlay .dd-layout,
  #videoDetailOverlay .dd-layout{ align-items:stretch !important; }
  #dareDetailOverlay .dd-col2,
  #videoDetailOverlay .dd-col2{ align-self:stretch !important; }
  #dareDetailOverlay .dd-col1,
  #videoDetailOverlay .dd-col1{ display:flex; flex-direction:column; }
  /* the column scrolls, so a flex item left shrinkable would be squeezed instead
     of overflowing — that would flatten the thumbnail and the player */
  #dareDetailOverlay .dd-col1 > *,
  #videoDetailOverlay .dd-col1 > *{ flex-shrink:0; }
  #dareDetailOverlay .dd-comments,
  #videoDetailOverlay .dd-comments{ flex:1 0 auto; margin-top:12px !important; }
}

/* ── detail captions: one line, and a … that is always there. The clipped span
      plus a standalone … means the sign shows whether or not the text overflows,
      so the caption always reads as something you can tap. ── */
.dd-title2{ display:flex !important; align-items:baseline; gap:3px; cursor:pointer; }
.dd-title-txt{ min-width:0; overflow:hidden; white-space:nowrap; }
.dd-title-more{ flex-shrink:0; color:rgba(255,255,255,.55); font-weight:600; }

/* ═══════════════════════════════════════════════════════════════════════
   LONG VIDEO PAGE — the same page as the mission, with the player standing in
   for the thumbnail. Everything above shares its selectors with this overlay;
   only the pieces the mission page has no equivalent for live here.
   ═══════════════════════════════════════════════════════════════════════ */
#videoDetailOverlay .vd2-player-wrap{ border-radius:14px !important; margin:0 !important; }
/* the dual creator/taker avatars sit where the single avatar does */
#videoDetailOverlay .vd2-collab-avs{ width:52px; height:32px; flex-shrink:0; cursor:pointer; }
#videoDetailOverlay .vd2-collab-avs .dd-creator-av{
  position:absolute; top:0; left:0; width:32px !important; height:32px !important;
  border:2px solid #000; font-size:13px !important;
}
#videoDetailOverlay .vd2-collab-avs .vd2-av2{ left:20px; }
#videoDetailOverlay .dd-creator-sub{ display:none !important; }

@media(max-width:768px){
  /* the player is fixed at the top edge, so col1 keeps its clearance and only
     picks up the 12px side gutter the mission page uses */
  #videoDetailOverlay .dd-col1{ padding-left:12px !important; padding-right:12px !important; padding-bottom:24px !important; }
  #videoDetailOverlay .vd2-player-wrap{ border-radius:0 0 14px 14px !important; }
}
@media(min-width:769px){
  /* the description box is permanent here too, so the two-column widths that
     used to apply when it was hidden are retired */
  #videoDetailOverlay .dd-col2{ display:block !important; }
  #videoDetailOverlay:not(.vd-show-desc) .dd-col1{ flex:1.5 !important; }
  #videoDetailOverlay:not(.vd-show-desc) .dd-col3{ flex:0 0 300px !important; width:300px !important; min-width:0 !important; }
  #videoDetailOverlay .vd2-collab-avs{ width:60px; height:38px; }
  #videoDetailOverlay .vd2-collab-avs .dd-creator-av{ width:38px !important; height:38px !important; }
  #videoDetailOverlay .vd2-collab-avs .vd2-av2{ left:24px; }
}


/* The bounty is a pop, not a sticker: hidden by default, shown while paused,
   and for five seconds after playback starts. */
#videoDetailOverlay .dd-bounty-badge{
  opacity:0; transform:scale(.82); pointer-events:none;
  transition:opacity .18s ease, transform .26s cubic-bezier(.2,1.5,.4,1);
}
#videoDetailOverlay .vd2-player-wrap.bounty-on .dd-bounty-badge{ opacity:1; transform:scale(1); }

/* the pinned player slides out of the way under JS control */
@media(max-width:768px){
  #videoDetailOverlay .vd2-player-wrap{ will-change:transform; }
}

/* ── vote icons ───────────────────────────────────────────────────────────
   thumb_up_off_alt / thumb_up are two separate glyphs, and swapping the name
   is only as reliable as the served font build. Material Symbols carries one
   thumb with a FILL axis instead, so outlined and solid are the same glyph and
   cannot disagree — and it is the face the drawer icons already use.        */
#dareDetailOverlay .dd-vote-ic,
#videoDetailOverlay .dd-vote-ic{
  font-family:'Material Symbols Outlined','Material Icons Round' !important;
  font-variation-settings:'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  transition:font-variation-settings .15s ease;
}
#dareDetailOverlay .vd-action-btn.liked .dd-vote-ic,
#videoDetailOverlay .vd-action-btn.liked .dd-vote-ic{
  font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ═══════════════════════════════════════════════════════════════════════
   OUR OWN LONG-VIDEO CONTROLS
   The browser's control bar carries a ⋮ that belongs to Chrome and cannot be
   scripted, which is why Quality could never live there. YouTube does the same
   thing this does: no `controls` attribute, and the whole bar is ours.
   ═══════════════════════════════════════════════════════════════════════ */
.vd2-player-wrap{ cursor:default; }
.vd2-player-wrap .vd-player::-webkit-media-controls{ display:none !important; }

/* the gradient that keeps white controls readable over a bright frame */
.vp-shade{
  position:absolute; left:0; right:0; bottom:0; height:96px; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
  opacity:0; transition:opacity .2s ease; z-index:3;
}
.vd2-player-wrap.vp-show .vp-shade{ opacity:1; }

/* ── bottom bar ── */
.vp-bar{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  padding:0 10px 8px; opacity:0; transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease; pointer-events:none;
}
.vd2-player-wrap.vp-show .vp-bar{ opacity:1; transform:none; pointer-events:auto; }

/* ── scrub bar ── */
.vp-seek{
  position:relative; height:16px; display:flex; align-items:center;
  cursor:pointer; touch-action:none;
}
.vp-seek::before{
  content:''; position:absolute; left:0; right:0; height:3px; border-radius:3px;
  background:rgba(255,255,255,.28); transition:height .12s ease;
}
.vp-seek-buf, .vp-seek-fill{
  position:absolute; left:0; height:3px; border-radius:3px; transition:height .12s ease;
}
.vp-seek-buf{ background:rgba(255,255,255,.45); width:0; }
.vp-seek-fill{ background:#fff; width:0; }
.vp-seek-knob{
  position:absolute; width:12px; height:12px; border-radius:50%; background:#fff;
  transform:translateX(-50%) scale(0); transition:transform .12s ease; left:0;
}
.vp-seek:hover::before, .vp-seek.drag::before,
.vp-seek:hover .vp-seek-buf, .vp-seek.drag .vp-seek-buf,
.vp-seek:hover .vp-seek-fill, .vp-seek.drag .vp-seek-fill{ height:5px; }
.vp-seek:hover .vp-seek-knob, .vp-seek.drag .vp-seek-knob{ transform:translateX(-50%) scale(1); }

/* ── button row ── */
.vp-row{ display:flex; align-items:center; gap:2px; margin-top:2px; }
.vp-btn{
  width:36px; height:36px; flex-shrink:0; border:none; background:transparent;
  color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; border-radius:50%; -webkit-tap-highlight-color:transparent;
}
.vp-btn .mi{ font-size:24px; color:#fff; }
.vp-btn:hover{ background:rgba(255,255,255,.14); }
.vp-time{ font-size:12px; color:#fff; font-variant-numeric:tabular-nums; margin-left:6px; white-space:nowrap; }
.vp-gap{ flex:1; }
.vp-vol{
  width:0; opacity:0; height:3px; margin:0 2px; accent-color:#fff; cursor:pointer;
  transition:width .18s ease, opacity .18s ease; -webkit-appearance:none; appearance:none;
  background:rgba(255,255,255,.3); border-radius:3px;
}
.vp-vol::-webkit-slider-thumb{ -webkit-appearance:none; width:11px; height:11px; border-radius:50%; background:#fff; }
.vp-volwrap:hover .vp-vol, .vp-vol:focus{ width:64px; opacity:1; }
.vp-volwrap{ display:flex; align-items:center; }

/* ── the ⋮ menu (no gear anywhere) ── */
.vp-menu{
  position:absolute; right:10px; bottom:56px; z-index:7; display:none;
  min-width:210px; padding:6px; border-radius:12px;
  background:#212121; border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.55);
}
.vp-menu.open{ display:block; }
.vp-menu button{
  display:flex; align-items:center; gap:12px; width:100%; padding:10px 12px;
  background:none; border:none; color:#fff; font-family:inherit; font-size:13px;
  font-weight:500; cursor:pointer; border-radius:8px; text-align:left; white-space:nowrap;
}
.vp-menu button:hover{ background:rgba(255,255,255,.10); }
.vp-menu button .mi{ font-size:19px; }
.vp-menu-val{ margin-left:auto; color:rgba(255,255,255,.55); font-weight:400; }
.vp-menu-back{ border-bottom:1px solid rgba(255,255,255,.10); border-radius:8px 8px 0 0 !important; margin-bottom:4px; }
.vp-menu button.sel .vp-menu-val{ color:#fff; }

/* ── double-tap seek feedback ── */
.vp-skip{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:88px; height:88px; border-radius:50%; background:rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  color:#fff; font-size:11px; font-weight:700; opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.vp-skip .mi{ font-size:26px; }
.vp-skip.on{ opacity:1; }
.vp-skip.back{ left:8%; } .vp-skip.fwd{ right:8%; }

/* the centre button is ours again — with no native bar there is only one */
.vd2-player-wrap .vd-center-play{ display:flex !important; z-index:6; }

@media(max-width:768px){
  .vp-vol{ display:none; }                 /* the slider goes; mute stays */
  .vp-btn{ width:34px; height:34px; }
  .vp-btn .mi{ font-size:22px; }
  .vp-menu{ bottom:52px; right:8px; }
}
/* Fullscreen is ours, not the browser's: <html> is what goes fullscreen, and
   this class is what makes the player fill the screen. That keeps the whole
   document painting — a popup parented to <body> is still on screen — and it
   leaves the growing animation entirely under our control. */
.vd2-player-wrap.vp-fs{
  position:fixed !important; inset:0 !important; top:0 !important; left:0 !important;
  width:100vw !important; height:100vh !important; height:100dvh !important;
  max-height:none !important; margin:0 !important; border-radius:0 !important;
  z-index:2147482000 !important; background:#000;
}
.vd2-player-wrap.vp-fs .vd-player{ width:100%; height:100%; object-fit:contain; }
body.vp-fs-on{ overflow:hidden; }
/* z-index is judged inside the parent's stacking context, so lifting the player
   was never going to clear the topbar (9000) while its overlay sat at 150. */
body.vp-fs-on #videoDetailOverlay{ z-index:2147481000 !important; }
body.vp-fs-on .topbar,
body.vp-fs-on .sb-rail,
body.vp-fs-on .bottom-nav,
body.vp-fs-on .dd-scrolltop{ display:none !important; }

/* On a phone the centre button IS the pause control, so it stays with the rest
   of the controls instead of only appearing once the video has already stopped. */
@media(max-width:768px){
  .vd2-player-wrap.vp-show .vd-center-play{
    opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1);
  }
}
/* the quality sheet is only used by shorts now — the long player renders its
   list inside the ⋮ menu, next to the button that opened it */

/* ── the shorts ⋮ is the long player's ⋮ ───────────────────────────────────
   Same rows, same padding, same value column — it is the same control, so it
   should not be a different-looking box on a different page.               */
#shortsMenu.shorts-menu{ width:auto !important; min-width:230px; max-width:88vw; padding:6px; }
#shortsMenu .shorts-menu-body{ padding:0 !important; }
#shortsMenu .shorts-menu-action,
#shortsMenu .shorts-menu-report{
  display:flex !important; align-items:center; gap:12px; width:100%;
  padding:10px 12px !important; margin:0 !important;
  background:none !important; border:none !important; color:#fff !important;
  font-family:inherit; font-size:13px !important; font-weight:500 !important;
  cursor:pointer; border-radius:8px !important; text-align:left; white-space:nowrap;
}
#shortsMenu .shorts-menu-action:hover,
#shortsMenu .shorts-menu-report:hover{ background:rgba(255,255,255,.10) !important; }
#shortsMenu .shorts-menu-action .mi,
#shortsMenu .shorts-menu-report .mi{ font-size:19px !important; }
#shortsMenu .vp-menu-val{ margin-left:auto; color:rgba(255,255,255,.55); font-weight:400; }
#shortsMenu .shorts-menu-action.sel .mi{ color:#fff; }
#shortsMenu .vp-menu-back{
  border-bottom:1px solid rgba(255,255,255,.10) !important;
  border-radius:8px 8px 0 0 !important; margin-bottom:4px !important;
}

/* ── background upload indicator ──────────────────────────────────────────
   _showBgUploadIndicator() builds this, sets display:flex and appends it to
   <body> — but nothing ever styled .bg-upload-ind, so it landed at the foot of
   the document as a bare unpositioned row. It is a floating pill.          */
.bg-upload-ind{
  position:fixed; right:16px; bottom:16px; z-index:9600;
  display:flex; align-items:center; gap:12px;
  min-width:230px; max-width:min(320px, calc(100vw - 32px));
  padding:12px 14px; border-radius:14px;
  background:#000; border:1px solid rgba(255,255,255,.28);
  box-shadow:0 10px 30px rgba(0,0,0,.55);
}
@media(max-width:768px){
  .bg-upload-ind{ right:12px; left:12px; bottom:calc(72px + env(safe-area-inset-bottom, 0px)); max-width:none; }
}

/* ── shorts: column 1 and the comments slide in with each new short ───────
   renderShort() removes and re-adds this class to restart an animation that
   was never written, so the columns simply snapped. This is that animation. */
@keyframes shortsColShift{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.shorts-col-shift{ animation:shortsColShift .28s cubic-bezier(.25,.8,.25,1) both; }
body.no-anim .shorts-col-shift{ animation:none; }

/* ═══════════════════════════════════════════════════════════════════════
   COMMENT SHEETS — one sheet, three pages
   Mission, long video and shorts were three different boxes: different
   chrome, only one of them animated, and only one could be dragged. They are
   the same control, so this is one design and one set of gestures.
   ═══════════════════════════════════════════════════════════════════════ */

/* The overlay has to stay in the tree or the closing slide never plays —
   display:none cuts the sheet off mid-animation. */
.dd-cbox-overlay{
  display:block !important; visibility:hidden; pointer-events:none;
  /* visibility cannot tween — delay it instead, or it cuts the exit slide off
     at frame one and the sheet just vanishes */
  transition:visibility 0s linear .34s;
}
.dd-cbox-overlay.open{ visibility:visible; pointer-events:auto; transition:visibility 0s linear 0s; }

.dd-cbox,
#shortsOverlay .shorts-comments{
  background:#000 !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border:1px solid rgba(255,255,255,.28) !important;
}

/* ── the grab handle ── */
.cbox-grip{
  display:none; flex-shrink:0; padding:10px 0 6px;
  cursor:grab; touch-action:none; -webkit-tap-highlight-color:transparent;
}
.cbox-grip::before{
  content:''; display:block; width:40px; height:4px; margin:0 auto;
  border-radius:99px; background:rgba(255,255,255,.32);
}
.cbox-grip:active{ cursor:grabbing; }
.cbox-grip:active::before{ background:rgba(255,255,255,.55); }

/* ── headers and footers, identical on all three ── */
.dd-cbox-head,
#shortsOverlay .shorts-comments-hdr{
  display:flex !important; align-items:center; justify-content:space-between;
  padding:12px 16px 14px !important; flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
  font-size:16px !important; font-weight:700 !important; color:#fff !important;
}
.dd-cbox-title,
#shortsOverlay .shorts-comments-hdr > span{
  display:flex; align-items:center; gap:8px; font-size:16px; font-weight:700; color:#fff;
}
.dd-cbox-title .mi,
#shortsOverlay .shorts-comments-hdr .mi{ font-size:20px; }
#ddBoxCount, #shortsCommentsCount{ color:rgba(255,255,255,.5); font-weight:600; }
.dd-cbox-close,
#shortsOverlay .shorts-comments-hdr > button{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent !important; border:1px solid rgba(255,255,255,.20) !important;
  color:#fff !important; cursor:pointer;
}
.dd-cbox-close:hover,
#shortsOverlay .shorts-comments-hdr > button:hover{ background:rgba(255,255,255,.10) !important; }

.dd-cbox-list,
#shortsOverlay .shorts-comments-list{
  flex:1; overflow-y:auto; padding:16px !important;
  display:flex; flex-direction:column; gap:18px;
}
.dd-cbox-foot,
#shortsOverlay .shorts-comment-input-row{
  flex-shrink:0; border-top:1px solid rgba(255,255,255,.10) !important;
  padding:12px 16px !important; background:#000 !important;
}

/* ── mobile: a bottom sheet that slides, on all three ── */
@media(max-width:768px){
  .cbox-grip{ display:block; }

  .dd-cbox{
    position:absolute !important; left:0; right:0; bottom:0; top:auto;
    height:auto; max-height:100%;
    border-radius:18px 18px 0 0 !important; border-bottom:none !important;
    transform:translateY(100%);
    transition:transform .34s cubic-bezier(.32,.72,0,1), top .26s cubic-bezier(.32,.72,0,1);
    will-change:transform;
  }
  .dd-cbox-overlay.open .dd-cbox{ transform:translateY(0); }

  #shortsOverlay .shorts-comments{
    border-radius:18px 18px 0 0 !important; border-bottom:none !important;
    transition:transform .34s cubic-bezier(.32,.72,0,1), top .26s cubic-bezier(.32,.72,0,1);
  }

  /* while a finger is on the grip the sheet follows it, so no easing */
  /* while a finger is on the grip the sheet tracks it exactly — no easing */
  .cbox-dragging .dd-cbox,
  #shortsOverlay.cbox-dragging .shorts-comments{ transition:none !important; }

  /* swiped up: the sheet takes the whole screen */
  /* the sheet owns the screen while it is open — the back arrow was painting
     on top of it, at z-index 25 against the sheet's 15 */
  #shortsOverlay.comments-open .shorts-close{ display:none !important; }
}

/* ── desktop: mission and long video slide up too. Shorts is a permanent
      column there, so it is deliberately left alone. ── */
@media(min-width:769px){
  .dd-cbox{
    border-radius:16px !important;
    transform:translateY(calc(100% + 24px));
    transition:transform .34s cubic-bezier(.32,.72,0,1);
    will-change:transform;
  }
  .dd-cbox-overlay.open .dd-cbox{ transform:translateY(0); }
}

@media(prefers-reduced-motion:reduce){
  .dd-cbox, #shortsOverlay .shorts-comments{ transition:none !important; }
}
body.no-anim .dd-cbox,
body.no-anim #shortsOverlay .shorts-comments{ transition:none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   TEXT BUTTONS — one style everywhere, the home page's
   Explore's trending tabs, the profile and public-profile tabs, the auth
   tabs, the wallet's method tabs and amount chips, the search filter chips,
   the no-results suggestions and the post-form tag chips were each styled
   separately: six different pills, three different active states, some still
   carrying the old glass and neu shadows. They are all the same control — a
   row of words you pick one of — so they all read as the home chips now:
   a flat pill, and the chosen one inverted to white.
   Icon-only buttons are deliberately untouched.
   ═══════════════════════════════════════════════════════════════════════ */
.exp-tab, .auth-tab, .tab, .wmtab, .wchip,
.sfilter-chip, .snores-chip, .post-tag-chip{
  font-size:13px !important; font-weight:600 !important;
  padding:8px 15px !important; border-radius:999px !important;
  background:var(--surface) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  color:var(--t2) !important;
  box-shadow:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  font-family:inherit; cursor:pointer; white-space:nowrap;
  transition:background .15s ease, color .15s ease, border-color .15s ease !important;
}
.exp-tab:hover, .auth-tab:hover, .tab:hover, .wmtab:hover, .wchip:hover,
.sfilter-chip:hover, .snores-chip:hover, .post-tag-chip:hover{
  color:#fff !important; border-color:rgba(255,255,255,.24) !important;
  background:var(--surface) !important;
}
.exp-tab.active, .auth-tab.active, .tab.active, .wmtab.active, .wchip.active,
.sfilter-chip.active, .snores-chip.active, .post-tag-chip.active{
  background:#fff !important; border-color:#fff !important; color:#000 !important;
  box-shadow:none !important;
}
/* the segmented rows stretched their buttons edge to edge; as pills they sit
   in a row like every other chip bar */
.tabs, .wallet-mtabs{ background:transparent !important; box-shadow:none !important;
  border:none !important; padding:0 !important; gap:8px !important; }
.tab, .wmtab{ flex:0 0 auto !important; }

@media(min-width:769px){
  .exp-tab, .auth-tab, .tab, .wmtab, .wchip,
  .sfilter-chip, .snores-chip, .post-tag-chip{ font-size:14px !important; padding:9px 17px !important; }
}
@media(max-width:768px){
  .exp-tab, .auth-tab, .tab, .wmtab, .wchip,
  .sfilter-chip, .snores-chip, .post-tag-chip{ font-size:13px !important; padding:7px 14px !important; }
}

/* ── Profile tabs: two of them, equal width, with a rule under the pair so the
      filter chips below read as a separate row rather than more tabs. ── */
.tabs.ptabs-2{
  display:flex !important; gap:10px !important;
  padding:0 0 14px !important; margin-bottom:14px !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
}
.tabs.ptabs-2 .tab{ flex:1 1 0 !important; text-align:center; }

/* ═══════════════════════════════════════════════════════════════════════
   SETTINGS — flat black, its own top bar, grouped rows
   ═══════════════════════════════════════════════════════════════════════ */
#settingsOverlay.as-page, #setSecOverlay.as-page{
  background:#000 !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
#settingsOverlay .modal, #setSecOverlay .modal{ background:#000 !important; border:none !important; }

/* header: back arrow left, title centred, nothing on the right but its balance */
.set-hdr{ display:flex !important; align-items:center; gap:8px; margin-bottom:8px !important; }
.set-hdr .modal-title{ flex:1; text-align:center; font-size:18px !important; margin:0 !important; }
.set-hdr .set-hdr-spacer{ width:40px; flex-shrink:0; }
.set-back{
  width:40px; height:40px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:transparent !important; border:none !important; border-radius:0 !important;
  box-shadow:none !important; color:#fff; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.set-back .mi{ font-size:24px; color:#fff; }

/* group labels down the left, and the sign-out pair at the foot */
.set-nav-group{
  font-size:12px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  color:rgba(255,255,255,.45); padding:22px 4px 8px;
}
.set-nav-group:first-child{ padding-top:8px; }
.set-nav-foot{ display:flex; flex-direction:column; gap:10px; margin-top:30px; }
.set-nav-foot .set-btn{ width:100%; }

@media(max-width:768px){
  /* every row carries its own rule, so the groups read as lists */
  #settingsOverlay .set-nav-item{
    border-bottom:1px solid rgba(255,255,255,.10) !important;
    padding:16px 4px !important; color:#fff !important;
  }
  .set-nav-foot{ margin-top:34px; }
  /* the page slides in from the right, like every other page */
  #settingsOverlay.as-page .modal, #setSecOverlay.as-page .modal{
    transform:translateX(100%);
    transition:transform .28s cubic-bezier(.32,.72,0,1);
  }
  #settingsOverlay.as-page.open .modal, #setSecOverlay.as-page.open .modal{ transform:none; }
}
@media(prefers-reduced-motion:reduce){
  #settingsOverlay.as-page .modal, #setSecOverlay.as-page .modal{ transition:none !important; }
}
body.no-anim #settingsOverlay.as-page .modal,
body.no-anim #setSecOverlay.as-page .modal{ transition:none !important; }

/* the save button now sits at the foot of the form rather than in a header */
#secEdit .pe-btn-save{
  width:100%; margin-top:22px; padding:14px !important; border-radius:999px !important;
  background:#fff !important; color:#000 !important; border:none !important;
  font-size:14px !important; font-weight:700 !important;
  display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
}
#secEdit .pe-btn-save .mi{ font-size:19px; color:#000 !important; }
#secEdit .pe-btn-save:disabled{ opacity:.5; cursor:default; }

/* ═══════════════════════════════════════════════════════════════════════
   POST A MISSION — one scrolling page, flat black, same chrome as Settings
   Was a six-tab two-pane form (Caption/Thumbnail/Tags/Rules/Visibility/
   Takers) on both breakpoints. Same fields, same ids, same handlers — laid
   out top to bottom instead of switched between.
   ═══════════════════════════════════════════════════════════════════════ */
#postOverlay.as-page{ background:#000 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
/* the edge the post form asked for — this line used to strip it */
#postOverlay .modal{ background:#000 !important;
  border:1px solid rgba(255,255,255,.30) !important; border-radius:16px !important; }
#postOverlay .modal-hdr.set-hdr .modal-title{ text-align:center; }

.pd-form{ display:flex; flex-direction:column; gap:28px; padding-top:4px; }
.pd-block-label{
  font-size:12px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  color:rgba(255,255,255,.45); margin-bottom:10px;
}
.pd-submit{
  width:100%; margin:4px 0 8px; padding:15px !important; border-radius:999px !important;
  background:#fff !important; color:#000 !important; border:none !important;
  font-size:14px !important; font-weight:700 !important;
  display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
}
.pd-submit .mi{ font-size:19px; color:#000 !important; }
.pd-submit:disabled{ opacity:.5; cursor:default; }

@media(max-width:768px){
  /* the page slides in from the right, like Settings and every other page */
  #postOverlay.as-page .modal{
    transform:translateX(100%);
    transition:transform .28s cubic-bezier(.32,.72,0,1);
  }
  #postOverlay.as-page.open .modal{ transform:none; }
}
@media(prefers-reduced-motion:reduce){ #postOverlay.as-page .modal{ transition:none !important; } }
body.no-anim #postOverlay.as-page .modal{ transition:none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   SUBMIT VIDEO PROOF — same chrome as Settings / Post Mission: flat black,
   bare back-arrow header (no ✕, it doubles as the arrow now), and a mobile
   slide-in. The page's own accent leftovers (orange rules box, gold bounty,
   green checklist/dropzone/CTA, and a red focus ring/scrubber from the old
   theme) were cleaned up inline above; this block is purely the shell.
   ═══════════════════════════════════════════════════════════════════════ */
#proofOverlay.as-page{ background:#000 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
#proofOverlay .modal{ background:#000 !important; border:none !important; }

@media(max-width:768px){
  #proofOverlay.as-page .modal{
    transform:translateX(100%);
    transition:transform .28s cubic-bezier(.32,.72,0,1);
  }
  #proofOverlay.as-page.open .modal{ transform:none; }
}
@media(prefers-reduced-motion:reduce){ #proofOverlay.as-page .modal{ transition:none !important; } }
body.no-anim #proofOverlay.as-page .modal{ transition:none !important; }

/* The old proof-only 7-point agreement page is gone — superseded by the single
   12-point Mission Agreement modal shown at both gates. Only .pt-decline
   survives from it: the agreement modal and the submit-confirm card both reuse
   it as their quiet secondary action. */
.pt-decline{
  display:block; width:100%; margin-top:10px; padding:8px;
  background:none; border:none; color:rgba(255,255,255,.5);
  font-size:13px; font-weight:600; font-family:inherit; cursor:pointer; text-align:center;
}
.pt-decline:hover{ color:#fff; }

/* The separate "Submit this proof?" confirm card is gone — the agreement's own
   scroll-to-the-bottom-and-tick requirement is the confirmation, and a second
   card on top of it was one step too many. */

/* ═══════════════════════════════════════════════════════════════════════
   MISSION AGREEMENT — one modal, shown at both the accept-mission and
   submit-proof gates. Flat black rather than the spec's #212121/#FF0033 —
   every button/modal built this session (Settings, Post Mission, Submit
   Proof) is flat black with a white primary action, and a red CTA would be
   the one thing on the page fighting that. Ask if you want the red back
   specifically for this gate — easy to change, this is a deliberate default,
   not an oversight.
   ═══════════════════════════════════════════════════════════════════════ */
.agreement-modal{
  position:relative;                       /* the scroll hint anchors to this */
  width:100%; max-width:560px; max-height:88vh;
  background:#0d0d0d !important; border:1px solid rgba(255,255,255,.14);
  border-radius:16px; display:flex; flex-direction:column; overflow:hidden;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.agreement-hdr{
  flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px 14px; border-bottom:1px solid rgba(255,255,255,.10);
}
.agreement-title{ font-size:17px; font-weight:700; color:#fff; }
.agreement-close{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid rgba(255,255,255,.18); color:#fff; cursor:pointer;
}
.agreement-close:hover{ background:rgba(255,255,255,.08); }
.agreement-proof-note{
  display:flex; align-items:flex-start; gap:8px;
  margin:0 0 18px; padding:10px 12px; border-radius:10px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10);
  font-size:12px; color:rgba(255,255,255,.6); line-height:1.5;
}
.agreement-proof-note .mi{ font-size:16px; flex-shrink:0; margin-top:1px; }

/* One scroll for everything — points, checkbox and buttons. Reaching the
   button therefore means having scrolled past the whole agreement. */
.agreement-body{
  flex:1; min-height:0; overflow-y:auto; padding:16px 20px;
  max-height:70vh;
}
/* The tab row carried 14px of padding AND 14px of margin under its rule, which
   on a phone reads as an empty band between the profile and the filters. */
@media(max-width:768px){
  .profile-header{ padding-bottom:8px !important; }
  .tabs.ptabs-2{ padding-bottom:8px !important; margin-bottom:6px !important; }
  #tMyDares .pfilter-row, #tAccepted .pfilter-row{ margin-bottom:4px !important; }
}

/* ── Sidebar legal links (YouTube's drawer does the same) ── */
.sb-legal{ margin:18px 16px 24px; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); }
.sb-legal-links{ display:flex; flex-wrap:wrap; gap:8px 14px; }
.sb-legal-links a{
  font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.55);
  cursor:pointer; text-decoration:none;
}
.sb-legal-links a:hover{ color:#fff; }
.sb-legal-copy{ margin-top:12px; font-size:12px; color:rgba(255,255,255,.35); }

/* the one-line explanation that replaced the Takers toggle */
.pd-note{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px 14px; border-radius:10px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10);
  font-size:12.5px; line-height:1.5; color:var(--t2);
}
.pd-note .mi{ font-size:18px; color:var(--t3); flex:none; }

/* ── Date / time wheel ── */
.dtp-input{ cursor:pointer; }
.dtp-overlay{
  /* above .age-gate (2147483640) — the wheel is asked for FROM the gate, so it
     has to paint on top of it or the tap does nothing at all */
  position:fixed; inset:0; z-index:2147483645; display:none;
  align-items:center; justify-content:center;      /* centred, not a bottom sheet */
  background:rgba(0,0,0,.6); opacity:0; transition:opacity .2s ease;
  font-family:'Roboto',sans-serif;
  padding:20px;
}
.dtp-overlay.open{ opacity:1; }
.dtp-sheet{
  width:100%; max-width:420px; background:#0f0f0f;   /* the app's black, not a grey card */
  border:1px solid rgba(255,255,255,.16);            /* the outline the card was missing */
  border-radius:16px; padding:16px 16px 18px;
  transform:scale(.94); opacity:0; transition:transform .2s ease, opacity .2s ease;
}
.dtp-overlay.open .dtp-sheet{ transform:scale(1); opacity:1; }
.dtp-grip{ display:none; }
.dtp-title{ font-size:15px; font-weight:600; color:#fff; text-align:center;
  letter-spacing:.2px; padding-bottom:12px; margin-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.10); }

.dtp-wheel{ position:relative; height:200px; }
/* the band the middle row sits in — the only "selected" affordance needed */
.dtp-band{
  position:absolute; left:0; right:0; top:50%; height:40px; transform:translateY(-50%);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);            /* outlined, so the row reads as chosen */
  border-radius:10px; pointer-events:none;
}
.dtp-cols{ display:flex; gap:4px; height:100%; }
.dtp-col{
  flex:1; height:100%; overflow-y:auto; scroll-snap-type:y mandatory;
  scrollbar-width:none; -ms-overflow-style:none; text-align:center;
}
.dtp-col::-webkit-scrollbar{ display:none; }
.dtp-pad{ height:80px; }                    /* lets the first and last item reach the middle */
.dtp-item{
  height:40px; line-height:40px; scroll-snap-align:center;
  font-size:17px; color:rgba(255,255,255,.35); transition:color .12s ease;
  white-space:nowrap;
}
.dtp-item.on{ color:#fff; font-weight:600; }
/* a moment that has already gone — visible so the column keeps its shape, but
   dimmed and skipped when the wheel settles */
.dtp-item.past{ color:rgba(255,255,255,.13); }
.dtp-item.past.on{ color:rgba(255,255,255,.3); font-weight:400; }
.dtp-sep{ align-self:center; color:rgba(255,255,255,.4); font-size:18px; padding:0 2px; }
/* five columns is tight on a phone — let the numbers shrink rather than wrap */
.dtp-has-time .dtp-item{ font-size:15px; }

.dtp-acts{ display:flex; gap:10px; margin-top:16px;
  padding-top:14px; border-top:1px solid rgba(255,255,255,.10); }
.dtp-clear,.dtp-ok{
  flex:1; padding:13px; border:none; border-radius:24px; cursor:pointer;
  font-size:15px; font-weight:600; font-family:inherit;
}
.dtp-clear{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.22); }
.dtp-ok{ background:#fff; color:#0f0f0f; }

/* ── Feedback ── */
.fb-modal{
  max-width:460px; width:calc(100% - 40px); padding:26px 24px 22px;
  background:#212121; border:1px solid rgba(255,255,255,.12); border-radius:16px;
  font-family:'Roboto',sans-serif;
}
.fb-title{ font-size:19px; font-weight:700; color:#fff; margin-bottom:8px; }
.fb-sub{ font-size:13px; line-height:1.6; color:rgba(255,255,255,.6); margin-bottom:18px; }
.fb-text{
  width:100%; box-sizing:border-box; padding:14px; border-radius:10px; resize:vertical;
  background:#0f0f0f; border:1px solid rgba(255,255,255,.14); color:#fff;
  font-size:16px; font-family:inherit; line-height:1.6;
}
.fb-text:focus{ outline:none; border-color:rgba(255,255,255,.4); }
.fb-err{ min-height:18px; margin-top:8px; font-size:13px; color:#FF6B6B; }
.fb-acts{ display:flex; gap:10px; margin-top:12px; }
.fb-cancel,.fb-send{
  flex:1; padding:13px; border:none; border-radius:24px; cursor:pointer;
  font-size:15px; font-weight:600; font-family:inherit;
}
.fb-cancel{ background:rgba(255,255,255,.1); color:#fff; }
.fb-send{ background:#FFFFFF; color:#0f0f0f; }
.fb-send:disabled{ opacity:.6; cursor:default; }

/* ── 404 ── */
.nf-page{
  position:fixed; inset:0; z-index:2147483400;
  background:#0f0f0f; display:none; align-items:center; justify-content:center;
  padding:24px; font-family:'Roboto',sans-serif;
}
body.nf-open{ overflow:hidden; }
.nf-card{ width:100%; max-width:420px; text-align:center; }
.nf-code{ font-size:64px; font-weight:700; color:#FFFFFF; line-height:1; }
.nf-title{ font-size:21px; font-weight:700; color:#fff; margin:16px 0 10px; }
.nf-text{ font-size:14px; line-height:1.7; color:rgba(255,255,255,.65); margin-bottom:26px; }
.nf-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border:none; border-radius:24px; cursor:pointer;
  /* was #FF0033 — the last red button on the 404 screen */
  background:#fff; color:#0f0f0f; font-size:15px; font-weight:600; font-family:inherit;
}
.nf-btn .mi{ font-size:19px; }

/* ── Admin panel ── */
.admin-panel{
  position:fixed; inset:0; z-index:2147483520;
  background:#0f0f0f; font-family:'Roboto',sans-serif; display:none;
}
body.admin-open{ overflow:hidden; }
.adm-bar{ height:56px; display:flex; align-items:center; gap:6px; padding:0 10px;
  border-bottom:1px solid rgba(255,255,255,.08); }
.adm-back{ background:none; border:none; color:#fff; padding:8px; cursor:pointer; display:flex; }
.adm-title{ font-size:17px; font-weight:600; color:#fff; }
.adm-tabs{ display:flex; gap:6px; padding:10px 12px; overflow-x:auto;
  border-bottom:1px solid rgba(255,255,255,.08); }
.adm-tab{ flex:none; padding:8px 16px; border-radius:16px; cursor:pointer;
  background:#212121; border:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.7);
  font-size:13px; font-family:inherit; }
.adm-tab.active{ background:#fff; color:#0f0f0f; border-color:#fff; font-weight:600; }
.adm-body{ position:absolute; top:113px; left:0; right:0; bottom:0; overflow-y:auto;
  -webkit-overflow-scrolling:touch; padding:16px 12px 60px; }
.adm-load,.adm-empty,.adm-err{ padding:26px 4px; text-align:center; font-size:14px; color:rgba(255,255,255,.5); }
.adm-err{ color:#FF6B6B; }
.adm-sub{ font-size:12px; color:rgba(255,255,255,.5); margin-bottom:10px; }
.adm-note{ font-size:12px; line-height:1.6; color:rgba(255,255,255,.45); margin-top:16px; }

.adm-stats{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.adm-stat{ background:#212121; border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:16px 14px; }
.adm-stat.warn{ border-color:rgba(255,0,51,.5); }
.adm-stat-v{ font-size:26px; font-weight:700; color:#fff; }
.adm-stat-l{ font-size:12px; color:rgba(255,255,255,.55); margin-top:4px; line-height:1.4; }

.adm-row{ background:#212121; border:1px solid rgba(255,255,255,.08); border-radius:12px;
  padding:14px; margin-bottom:10px; }
.adm-row.done{ opacity:.5; }
.adm-row-top{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.adm-pill{ font-size:11px; padding:3px 9px; border-radius:10px;
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.7); }
.adm-pill.late{ background:rgba(255,0,51,.18); color:#FF6B6B; }
.adm-pill.ok{ background:rgba(0,230,118,.15); color:#00E676; }
.adm-row-title{ font-size:15px; font-weight:600; color:#fff; line-height:1.4; }
.adm-row-sub{ font-size:13px; color:rgba(255,255,255,.65); margin-top:5px; line-height:1.6; }
.adm-row-meta{ font-size:11px; color:rgba(255,255,255,.4); margin-top:6px; word-break:break-all; }
.adm-dim{ color:rgba(255,255,255,.45); font-weight:400; }
.adm-acts{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.adm-acts button{ padding:8px 14px; border-radius:16px; cursor:pointer; font-family:inherit;
  font-size:13px; background:#fff; color:#0f0f0f; border:none; }
/* Kept red on purpose: this is the ban/delete action, and red is what makes
   a destructive button read as destructive. The owner asked for the red to go
   everywhere EXCEPT here. */
.adm-acts button.danger{ background:#FF0033; color:#fff; }
.adm-verdicts{ display:grid; grid-template-columns:1fr; gap:8px; margin-top:10px; }
.adm-verdicts > div{ background:rgba(255,255,255,.04); border-radius:8px; padding:10px;
  font-size:12px; line-height:1.6; color:rgba(255,255,255,.7); }
@media(min-width:600px){ .adm-verdicts{ grid-template-columns:1fr 1fr; } }
.adm-search input{ width:100%; box-sizing:border-box; padding:12px 14px; border-radius:10px;
  background:#212121; border:1px solid rgba(255,255,255,.12); color:#fff;
  font-size:16px; font-family:inherit; margin-bottom:12px; }
.adm-search input:focus{ outline:none; border-color:rgba(255,255,255,.35); }
.adm-detail{ margin-top:12px; }
.adm-kv{ display:flex; justify-content:space-between; gap:12px; padding:7px 0;
  border-top:1px solid rgba(255,255,255,.07); font-size:13px; }
.adm-kv span{ color:rgba(255,255,255,.5); }
.adm-kv b{ color:#fff; font-weight:500; text-align:right; word-break:break-all; }

/* ── Legal pages (Terms / Privacy / Guidelines / Contact) ──
   Below the age gate, above everything else: a blocked account must not read
   its way around the gate, but a signed-out visitor must be able to read these
   from the sign-up screen. */
.legal-page{
  position:fixed; inset:0; z-index:2147483500;
  background:#0f0f0f; font-family:'Roboto',sans-serif; display:none;
}
body.legal-open{ overflow:hidden; }
.legal-bar{
  height:56px; display:flex; align-items:center; padding:0 12px;
  border-bottom:1px solid rgba(255,255,255,.08); background:#0f0f0f;
}
.legal-back{
  display:flex; align-items:center; gap:8px; padding:8px 12px 8px 8px;
  background:none; border:none; color:#fff; font-size:15px; font-family:inherit; cursor:pointer;
  border-radius:20px;
}
.legal-back:active{ background:rgba(255,255,255,.08); }
.legal-scroll{
  position:absolute; top:56px; left:0; right:0; bottom:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch; padding:28px 20px 60px;
}
.legal-body{ max-width:700px; margin:0 auto; }
.legal-h1{ font-size:26px; font-weight:700; color:#fff; margin:0 0 26px; line-height:1.3; }
.legal-h2{ font-size:17px; font-weight:600; color:#fff; margin:32px 0 10px; line-height:1.4; }
.legal-body p{ font-size:15px; line-height:1.8; color:rgba(255,255,255,.72); margin:0 0 12px; }
.legal-todo{ color:rgba(255,255,255,.38) !important; font-style:italic; }
.legal-list{ margin:10px 0 0; padding-left:20px; }
.legal-list li{ font-size:15px; line-height:1.9; color:rgba(255,255,255,.72); }
.legal-updated{
  margin-top:40px !important; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:13px !important; color:rgba(255,255,255,.45) !important;
}
.legal-foot-links, .site-foot-links{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px; margin-top:34px;
}
.legal-foot-links a, .site-foot-links a{
  font-size:13px; color:rgba(255,255,255,.55); cursor:pointer; text-decoration:none;
}
.legal-foot-links a:hover, .site-foot-links a:hover{ color:#fff; }
.legal-copy, .site-foot-copy{
  text-align:center; margin-top:14px; font-size:12px; color:rgba(255,255,255,.35);
}

/* ── Site footer ── */
.site-foot{
  max-width:700px; margin:48px auto 0; padding:26px 0 10px;
  border-top:1px solid rgba(255,255,255,.08);
}
/* the mobile bottom nav floats over the page, so the footer needs to clear it */
@media(max-width:768px){ .site-foot{ margin-top:34px; padding-bottom:24px; } }
/* nothing to sit under while the boot skeleton owns the screen */
body.boot-skel .site-foot{ display:none; }

/* sign-in screen legal line */
.auth-legal{
  margin:18px 0 0; text-align:center; font-size:12px; line-height:1.7;
  color:rgba(255,255,255,.45);
}
.auth-legal a{ color:rgba(255,255,255,.8); cursor:pointer; text-decoration:underline; }

/* ── 18+ age gate ──
   Above every overlay in the app (the player menus top out at 2147483000 and
   the agreement sits at 2147483600) because nothing may be reachable behind it. */
.age-gate{
  position:fixed; inset:0; z-index:2147483640;
  background:#0f0f0f; display:none; align-items:center; justify-content:center;
  padding:20px;
}
body.age-gated{ overflow:hidden; }
.age-card{
  width:100%; max-width:420px; background:#212121; border-radius:16px;
  padding:32px 26px 26px; text-align:center;
  font-family:'Roboto',sans-serif;
}
.age-ic{
  width:56px; height:56px; margin:0 auto 18px; border-radius:50%;
  background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center;
}
.age-ic .mi{ font-size:28px; color:#fff; }
.age-title{ font-size:21px; font-weight:700; color:#fff; margin-bottom:10px; }
.age-text{ font-size:14px; line-height:1.65; color:rgba(255,255,255,.7); margin-bottom:24px; }
.age-label{
  display:block; text-align:left; font-size:12px; font-weight:500;
  color:rgba(255,255,255,.55); margin-bottom:8px;
}
.age-input{
  width:100%; padding:14px; border-radius:10px; box-sizing:border-box;
  background:#0f0f0f; border:1px solid rgba(255,255,255,.14); color:#fff;
  font-size:16px; font-family:inherit;   /* 16px stops iOS zooming the page on focus */
}
.age-input:focus{ outline:none; border-color:rgba(255,255,255,.4); }
.age-err{ min-height:18px; margin:8px 0 0; font-size:13px; color:#FF6B6B; text-align:left; }
.age-btn{
  width:100%; margin-top:16px; padding:14px; border:none; border-radius:24px;
  /* was #FF0033 — the one red button left on a black-and-white screen */
  background:#fff; color:#0f0f0f; font-size:15px; font-weight:600; font-family:inherit;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
}
.age-btn:disabled{ opacity:.6; cursor:default; }
.age-btn-out{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.30); }
/* full-screen on a phone: a card floating in the middle of a blocked app reads
   as something you could dismiss, and this one cannot be */
@media(max-width:600px){
  .age-gate{ padding:0; align-items:stretch; }
  .age-card{
    max-width:none; border-radius:0; min-height:100%;
    display:flex; flex-direction:column; justify-content:center; padding:28px 22px;
  }
}

/* ── Wallet paused (WALLET_ENABLED = false in app.js) ──
   Hidden, never removed: the markup stays in the DOM so renderProfile and the
   rest can keep writing to #walletBal without null checks, and turning the flag
   back on restores everything with no re-render. Every wallet modal already
   shares .wallet-ov, so the two selectors cover the whole surface. */
.wallet-off [data-wallet],
.wallet-off .wallet-ov { display:none !important; }

/* ── Safety block ── */
/* No width here on purpose. On mobile .modal is a bottom sheet
   (position:fixed; bottom:0; left:0; right:0) and a width of its own turns it
   into a card jammed against the bottom-left — half sheet, half dialog. Let the
   sheet rule own mobile; this is only the desktop card. */
.safety-modal{
  max-width:420px; margin:0 auto; padding:30px 26px 26px;
  background:#0f0f0f; border:1px solid rgba(255,255,255,.12); border-radius:16px;
  text-align:center;
}
@media(max-width:768px){
  .safety-modal{ padding:28px 22px calc(26px + env(safe-area-inset-bottom, 0px)); }
}
.safety-ic{
  width:56px; height:56px; margin:0 auto 18px; border-radius:50%;
  background:rgba(255,255,255,.10); display:flex; align-items:center; justify-content:center;
}
.safety-ic .mi{ font-size:30px; color:#FFFFFF; }
.safety-title{ font-size:19px; font-weight:700; color:#fff; margin-bottom:10px; }
.safety-msg{ font-size:14px; line-height:1.65; color:rgba(255,255,255,.65); margin-bottom:24px; }
.safety-btn{
  width:100%; padding:13px; border:none; border-radius:22px; cursor:pointer;
  background:#fff; color:#0f0f0f; font-size:14px; font-weight:600; font-family:inherit;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.safety-btn .mi{ font-size:18px; }
.safety-btn:active{ opacity:.85; }

.agreement-pt{ margin-bottom:16px; }
.agreement-pt-title{ font-size:14px; font-weight:700; color:#fff; margin-bottom:4px; }
.agreement-pt-num{ color:rgba(255,255,255,.5); }
.agreement-pt p{ font-size:14px; line-height:1.7; color:rgba(255,255,255,.65); }
.agreement-pt p + p{ margin-top:10px; }
/* The prohibited-mission list in the creator agreement. Indented and marked so
   the eleven items read as a list to scan, not a paragraph to skim past. */
.agreement-pt-list{ margin:8px 0; padding-left:2px; list-style:none; }
.agreement-pt-list li{
  position:relative; padding-left:18px; margin-bottom:5px;
  font-size:14px; line-height:1.6; color:rgba(255,255,255,.65);
}
.agreement-pt-list li::before{
  content:""; position:absolute; left:4px; top:9px;
  width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.4);
}

/* floats over the bottom of the scroll rather than taking a row of its own,
   so it can't be mistaken for the end of the content */
.agreement-scroll-hint{
  position:absolute; left:0; right:0; bottom:0; pointer-events:none;
  display:flex; align-items:center; justify-content:center; gap:4px;
  padding:22px 0 10px; font-size:11px; font-weight:600; color:rgba(255,255,255,.55);
  background:linear-gradient(to top, #0d0d0d 55%, rgba(13,13,13,0));
}
.agreement-scroll-hint .mi{ font-size:16px; animation:agreementBounce 1.4s ease-in-out infinite; }
@keyframes agreementBounce{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(3px);} }

.agreement-foot{
  margin-top:22px; padding-top:18px;
  border-top:1px solid rgba(255,255,255,.10);
}
#agreementCheckRow{ margin-bottom:12px; }
.agreement-actions{ display:flex; gap:10px; align-items:center; }
.agreement-actions .pt-decline{ flex:0 0 auto; width:auto; margin-top:0; padding:12px 16px; }
.agreement-actions .btn-submit-proof{ flex:1; box-shadow:none; }

@media(max-width:768px){
  .agreement-modal{ max-width:none; width:100%; height:100%; max-height:none; border-radius:0; }
  .agreement-body{ max-height:none; }
}