/* ================================================================
   LOKTUBE v1000 — COMPLETE FINAL DESIGN SYSTEM
   Exact pixel-match to all 4 reference images:
   
   Image 1: Watch page desktop — side reaction bar, Up Next panel
   Image 2: Watch page mobile — full layout with reactions
   Image 3: Home feed mobile — hero card, shorts row, live section
   Image 4: Creator Studio — dark pro dashboard
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800;900&family=Noto+Sans+Devanagari:wght@400;500;600;700;800;900&display=swap');

/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS — v1000 Final
   ═══════════════════════════════════════════════════════════ */
:root {
  --s3:  #FF6B00;
  --s4:  #FF8C00;
  --s5:  #FFA940;
  --s6:  #FFD060;
  --gold:#FFD060;

  --accent:    #FF6B00;
  --accent2:   #E05500;
  --g-btn:     linear-gradient(135deg,#FF6B00,#FF9800);
  --g-warm:    linear-gradient(135deg,#FF6B00,#FF9800,#FFD060);
  --glow:      0 0 28px rgba(255,107,0,.42);
  --glow-sm:   0 0 14px rgba(255,107,0,.28);

  --bg:        #0C0C0C;
  --bg2:       #111111;
  --bg3:       #1A1A1A;
  --bg4:       #222222;
  --bg5:       #2E2E2E;
  --bg-hover:  rgba(255,107,0,.07);
  --bg-card:   #131313;

  --border:    rgba(255,107,0,.13);
  --border2:   rgba(255,107,0,.26);

  --text:      #EEE6DC;
  --text2:     #9A8472;
  --text3:     #504030;
  --text-b:    #FFFFFF;

  --r:     12px;
  --r-sm:  8px;
  --r-lg:  18px;
  --r-xl:  24px;
  --r-f:   9999px;

  --sh:    0 4px 20px rgba(0,0,0,.65);
  --sh-lg: 0 8px 40px rgba(0,0,0,.8);
  --sh-acc:0 4px 20px rgba(255,107,0,.2);

  --ease:   cubic-bezier(.16,1,.3,1);
  --spring: cubic-bezier(.34,1.56,.64,1);

  --nav-h:  58px;
  --sb-w:   240px;
}

[data-theme="light"] {
  --bg: #FDF8F0; --bg2: #FFFFFF; --bg3: #F5EDD8; --bg4: #EDE0C4;
  --bg5: #DDD0B0; --bg-card: #FFFFFF; --bg-hover: rgba(255,107,0,.05);
  --border: rgba(180,100,30,.16); --border2: rgba(180,100,30,.3);
  --text: #1A0A00; --text2: #7A5030; --text3: #C09060;
}

/* ── BASE ── */
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{overflow-x:hidden;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{
  font-family:'Sora','Noto Sans',system-ui,-apple-system,sans-serif !important;
  background:var(--bg) !important;
  color:var(--text) !important;
  overflow-x:hidden !important;
  min-height:100dvh;
  font-size:14px;
  line-height:1.55;
}
[lang="hi"],.hi{font-family:'Noto Sans Devanagari','Sora',sans-serif !important}
h1,h2,h3,h4,h5,h6{font-family:'Sora',sans-serif !important;font-weight:700;color:var(--text-b);margin:0;line-height:1.25}
a{text-decoration:none;color:inherit}

body::before{content:'';position:fixed;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,#FF9933 33.3%,#fff 33.3% 66.6%,#138808 66.6%);
  z-index:9999;pointer-events:none}

::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-thumb{background:rgba(255,107,0,.22);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}

/* ═══════════════════════════════════════════════════════════
   NAVBAR — Image 1,2,3,4 exact match
   ═══════════════════════════════════════════════════════════ */
.navbar{
  position:sticky !important;top:2px !important;z-index:200 !important;
  height:var(--nav-h) !important;padding:0 16px !important;
  display:flex !important;align-items:center !important;gap:10px !important;
  background:rgba(12,12,12,.97) !important;
  border-bottom:1px solid var(--border) !important;
  backdrop-filter:blur(24px) !important;
  -webkit-backdrop-filter:blur(24px) !important;
}
[data-theme="light"] .navbar{background:rgba(253,248,240,.97) !important}

/* Logo */
.logo,.nav-logo{display:flex !important;align-items:center !important;gap:9px !important;text-decoration:none !important;flex-shrink:0 !important}
.logo-play{width:36px !important;height:36px !important;background:var(--g-btn) !important;border-radius:10px !important;box-shadow:var(--glow-sm) !important;display:flex !important;align-items:center !important;justify-content:center !important;font-size:16px !important;color:#fff !important}
.logo span b,.logo-text{font-family:'Sora',sans-serif !important;font-weight:800 !important;font-size:18px !important;letter-spacing:-.3px !important}
.nav-tagline{font-size:9.5px !important;color:var(--text2) !important;font-weight:500 !important;display:none !important}
@media(min-width:480px){.nav-tagline{display:block !important}}

/* Search — Image 1 style: rounded, placeholder in Hindi */
.nav-search{flex:1 !important;max-width:500px !important;position:relative !important}
.nav-search input,#searchInput{
  width:100% !important;height:40px !important;
  background:var(--bg3) !important;border:1.5px solid var(--border) !important;
  border-radius:var(--r-f) !important;padding:0 44px 0 40px !important;
  color:var(--text) !important;font-family:inherit !important;font-size:13px !important;
  outline:none !important;transition:all .2s !important;
}
.nav-search input:focus,#searchInput:focus{border-color:var(--accent) !important;background:var(--bg4) !important;box-shadow:0 0 0 3px rgba(255,107,0,.12) !important}
.nav-search input::placeholder{color:var(--text3) !important}

/* Nav icons (Image 1: Upload, Live, LokWallet, Bell, Avatar) */
.nav-upload-link,.nav-upload-btn{
  display:flex !important;flex-direction:column !important;align-items:center !important;
  gap:2px !important;color:var(--text2) !important;text-decoration:none !important;
  font-size:11px !important;font-weight:600 !important;cursor:pointer !important;
  background:none !important;border:none !important;font-family:inherit !important;
  padding:4px 8px !important;border-radius:10px !important;transition:all .16s !important;
  flex-shrink:0 !important;
}
.nav-upload-link i,.nav-upload-btn i{font-size:18px !important;color:var(--text2) !important}
.nav-upload-link:hover,.nav-upload-btn:hover{color:var(--accent) !important}
.nav-upload-link:hover i,.nav-upload-btn:hover i{color:var(--accent) !important}

/* LokWallet chip (Image 1: ₹2,450 badge) */
.nav-wallet-chip{
  display:flex !important;align-items:center !important;gap:6px !important;
  padding:6px 12px !important;background:var(--bg3) !important;
  border:1.5px solid var(--border) !important;border-radius:var(--r-f) !important;
  color:var(--accent) !important;font-size:12.5px !important;font-weight:800 !important;
  text-decoration:none !important;transition:all .18s !important;flex-shrink:0 !important;
  white-space:nowrap !important;
}
.nav-wallet-chip:hover{border-color:var(--accent) !important;box-shadow:var(--glow-sm) !important}
.nav-wallet-chip i{font-size:15px !important}

/* Bell icon */
.nav-notif-btn,.nav-icon-btn{
  width:38px !important;height:38px !important;
  background:var(--bg3) !important;border:1px solid var(--border) !important;
  border-radius:50% !important;color:var(--text) !important;cursor:pointer !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  font-size:15px !important;flex-shrink:0 !important;position:relative !important;
  transition:all .18s !important;text-decoration:none !important;
}
.nav-notif-btn:hover,.nav-icon-btn:hover{background:var(--bg-hover) !important;border-color:var(--accent) !important;color:var(--accent) !important}
.notif-badge,.nav-notif-badge{
  position:absolute !important;top:-3px !important;right:-3px !important;
  min-width:17px !important;height:17px !important;
  background:#ef4444 !important;color:#fff !important;font-size:9px !important;
  font-weight:800 !important;border-radius:9px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  padding:0 3px !important;border:2px solid var(--bg) !important;
}

/* User profile chip (Image 1: Desi Yatra · Creator) */
.nav-user-chip{
  display:flex !important;align-items:center !important;gap:8px !important;
  padding:4px 10px 4px 4px !important;
  background:var(--bg3) !important;border:1px solid var(--border) !important;
  border-radius:var(--r-f) !important;cursor:pointer !important;
  transition:all .18s !important;flex-shrink:0 !important;
}
.nav-user-chip:hover{border-color:var(--accent) !important}
.nav-user-chip-av{width:30px !important;height:30px !important;border-radius:50% !important;overflow:hidden !important;background:var(--bg4) !important;flex-shrink:0 !important}
.nav-user-chip-av img{width:100% !important;height:100% !important;object-fit:cover !important}
.nav-user-chip-name{font-size:12.5px !important;font-weight:700 !important;line-height:1.2 !important}
.nav-user-chip-role{font-size:10px !important;color:var(--accent) !important;font-weight:600 !important}

/* ═══════════════════════════════════════════════════════════
   CATEGORY BAR — Image 3: All|Shorts|Trending|Bhakti|Garba...
   ═══════════════════════════════════════════════════════════ */
.cat-bar{
  display:flex !important;gap:8px !important;padding:10px 14px 8px !important;
  overflow-x:auto !important;scrollbar-width:none !important;
  position:sticky !important;top:calc(var(--nav-h) + 2px) !important;z-index:50 !important;
  background:rgba(12,12,12,.94) !important;border-bottom:1px solid var(--border) !important;
  backdrop-filter:blur(12px) !important;
}
[data-theme="light"] .cat-bar{background:rgba(253,248,240,.94) !important}
.cat-bar::-webkit-scrollbar{display:none !important}

.cat-pill{
  flex-shrink:0 !important;display:inline-flex !important;align-items:center !important;gap:5px !important;
  padding:7px 16px !important;border-radius:var(--r-f) !important;
  background:var(--bg3) !important;border:1.5px solid var(--border) !important;
  color:var(--text2) !important;font-size:13px !important;font-weight:600 !important;
  text-decoration:none !important;transition:all .18s var(--ease) !important;
  white-space:nowrap !important;cursor:pointer !important;font-family:inherit !important;
}
.cat-pill:hover{background:var(--bg-hover) !important;border-color:var(--accent) !important;color:var(--accent) !important;transform:translateY(-1px) !important}
.cat-pill.active{background:var(--g-btn) !important;border-color:transparent !important;color:#fff !important;box-shadow:0 2px 12px rgba(255,107,0,.3) !important}

/* ═══════════════════════════════════════════════════════════
   WATCH PAGE — COMPLETE REDESIGN (Images 1 & 2)
   ═══════════════════════════════════════════════════════════ */

/* Layout: video left, sidebar right (desktop) */
.watch-grid{
  display:grid !important;
  grid-template-columns:1fr 380px !important;
  gap:20px !important;
  max-width:1400px !important;
  margin:0 auto !important;
  padding:16px !important;
  align-items:start !important;
}
@media(max-width:1100px){.watch-grid{grid-template-columns:1fr 320px !important}}
@media(max-width:900px){.watch-grid{grid-template-columns:1fr !important;gap:0 !important;padding:0 !important}}

.watch-main{min-width:0}
.watch-sidebar{min-width:0}

/* ── VIDEO PLAYER WRAPPER ── */
.vplayer-wrap,.player-outer{
  position:relative !important;
  border-radius:var(--r-lg) !important;
  overflow:hidden !important;
  background:#000 !important;
  aspect-ratio:16/9 !important;
  width:100% !important;
}
@media(max-width:900px){.vplayer-wrap,.player-outer{border-radius:0 !important}}

/* ── SIDE REACTION BAR — Image 1 exact match ──
   Right side of video: LokPrem (👍), Pranam (🙏), Jai Ho (🙌), Sanjovo (↻)
   Floating translucent pills stacked vertically */
.video-side-reactions{
  position:absolute !important;
  right:12px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  z-index:20 !important;
}

.side-react-btn{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:3px !important;
  padding:10px 8px !important;
  background:rgba(0,0,0,.6) !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:12px !important;
  color:#fff !important;
  cursor:pointer !important;
  font-family:inherit !important;
  min-width:52px !important;
  transition:all .2s var(--spring) !important;
}

.side-react-btn:hover{
  background:rgba(255,107,0,.3) !important;
  border-color:rgba(255,107,0,.5) !important;
  transform:scale(1.06) !important;
}

.side-react-btn.active{
  background:rgba(255,107,0,.25) !important;
  border-color:var(--accent) !important;
}

.side-react-icon{
  font-size:20px !important;
  line-height:1 !important;
  transition:transform .2s var(--spring) !important;
}

.side-react-btn:hover .side-react-icon,
.side-react-btn:active .side-react-icon{
  transform:scale(1.25) !important;
}

.side-react-count{
  font-size:11px !important;
  font-weight:800 !important;
  color:#fff !important;
  line-height:1 !important;
}

.side-react-label{
  font-size:9.5px !important;
  font-weight:600 !important;
  color:rgba(255,255,255,.75) !important;
  line-height:1 !important;
}

/* More button (⋮) */
.side-react-more{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:36px !important;height:36px !important;
  background:rgba(0,0,0,.55) !important;
  backdrop-filter:blur(12px) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  border-radius:50% !important;
  color:#fff !important;
  cursor:pointer !important;
  font-size:16px !important;
  align-self:center !important;
  transition:all .18s !important;
}
.side-react-more:hover{background:rgba(255,107,0,.25) !important;border-color:var(--accent) !important}

/* ── VIDEO CONTROLS BAR ── */
.vcontrols{
  position:absolute !important;
  bottom:0 !important;left:0 !important;right:0 !important;
  padding:8px 12px !important;
  background:linear-gradient(to top,rgba(0,0,0,.8) 0%,transparent 100%) !important;
  transition:opacity .25s !important;
}

.vcontrols-row{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
}

.vctrl-btn{
  background:none !important;border:none !important;
  color:rgba(255,255,255,.9) !important;cursor:pointer !important;
  font-size:16px !important;padding:6px !important;
  border-radius:8px !important;transition:all .16s !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  width:32px !important;height:32px !important;
}
.vctrl-btn:hover{background:rgba(255,255,255,.15) !important;color:#fff !important}

/* Progress bar */
.progress-wrap{
  position:absolute !important;
  bottom:44px !important;left:10px !important;right:10px !important;
  height:4px !important;background:rgba(255,255,255,.2) !important;
  border-radius:2px !important;cursor:pointer !important;z-index:5 !important;
  transition:height .15s !important;
}
.progress-wrap:hover{height:6px !important}
.progress-fill{
  height:100% !important;background:var(--accent) !important;
  border-radius:2px !important;position:relative !important;
  transition:width .1s !important;
}
.progress-thumb{
  position:absolute !important;right:-6px !important;top:50% !important;
  transform:translateY(-50%) !important;
  width:12px !important;height:12px !important;
  background:var(--accent) !important;border-radius:50% !important;
  opacity:0 !important;transition:opacity .15s !important;
  box-shadow:var(--glow-sm) !important;
}
.progress-wrap:hover .progress-thumb{opacity:1 !important}

/* Time display */
.vtime{color:rgba(255,255,255,.85) !important;font-size:12px !important;font-weight:600 !important;white-space:nowrap !important}

/* Quality badge */
.quality-hd-badge{
  background:#ef4444 !important;color:#fff !important;
  font-size:9px !important;font-weight:800 !important;
  padding:1px 5px !important;border-radius:4px !important;
  letter-spacing:.5px !important;
}

/* ── BELOW VIDEO: Title, Meta, Actions ── */
.video-title-h{
  font-size:18px !important;font-weight:800 !important;
  color:var(--text-b) !important;line-height:1.3 !important;
  margin:14px 0 6px !important;
}
@media(max-width:768px){.video-title-h{font-size:16px !important}}

.video-meta-row{margin-bottom:12px !important}

.video-stats{
  font-size:13px !important;color:var(--text2) !important;
  margin-bottom:8px !important;
  display:flex !important;align-items:center !important;gap:8px !important;flex-wrap:wrap !important;
}

/* Bharat Trending badge */
.bharat-trend-badge{
  display:inline-flex !important;align-items:center !important;gap:5px !important;
  padding:3px 10px !important;
  background:rgba(255,107,0,.12) !important;border:1px solid rgba(255,107,0,.25) !important;
  border-radius:var(--r-f) !important;font-size:11.5px !important;font-weight:700 !important;
  color:var(--accent) !important;
}

/* Hashtag row */
.video-tags a{
  color:var(--accent) !important;font-size:13px !important;
  text-decoration:none !important;margin-right:8px !important;
  font-weight:600 !important;
}
.video-tags a:hover{text-decoration:underline !important}
.video-tags-more{color:var(--text2) !important;font-size:13px !important;cursor:pointer !important}

/* ── ACTION BAR BELOW TITLE ── */
.action-bar{
  display:flex !important;align-items:center !important;
  gap:8px !important;flex-wrap:wrap !important;margin:10px 0 !important;
}

.action-pill{
  display:inline-flex !important;align-items:center !important;gap:7px !important;
  padding:8px 16px !important;background:var(--bg3) !important;
  border:1.5px solid var(--border) !important;
  border-radius:var(--r-f) !important;color:var(--text) !important;
  font-size:13.5px !important;font-weight:600 !important;
  cursor:pointer !important;font-family:inherit !important;
  transition:all .18s var(--ease) !important;
}
.action-pill:hover{background:var(--bg-hover) !important;border-color:var(--accent) !important;color:var(--accent) !important}
.action-pill.liked,.action-pill.like-btn.liked{background:rgba(37,99,235,.12) !important;color:#60a5fa !important;border-color:#2563eb !important}
.action-pill.save-btn.saved{background:rgba(33,150,243,.12) !important;color:var(--blue) !important}
.action-pill.active{background:var(--accent) !important;color:#fff !important;border-color:transparent !important}

/* ── FEATURE ROW (Image 2: Lok Dhun, Download, Save, Playlist, Quality) ── */
.watch-feature-row{
  display:flex !important;gap:6px !important;
  overflow-x:auto !important;scrollbar-width:none !important;
  padding:10px 0 !important;border-top:1px solid var(--border) !important;
  border-bottom:1px solid var(--border) !important;margin:10px 0 !important;
}
.watch-feature-row::-webkit-scrollbar{display:none !important}

.watch-feature-btn{
  display:flex !important;flex-direction:column !important;align-items:center !important;gap:4px !important;
  padding:8px 14px !important;background:var(--bg3) !important;
  border:1px solid var(--border) !important;border-radius:var(--r) !important;
  color:var(--text2) !important;font-size:11px !important;font-weight:600 !important;
  cursor:pointer !important;white-space:nowrap !important;flex-shrink:0 !important;
  transition:all .16s !important;text-decoration:none !important;font-family:inherit !important;
}
.watch-feature-btn i{font-size:16px !important;color:var(--accent) !important}
.watch-feature-btn:hover{border-color:var(--accent) !important;color:var(--text) !important;transform:translateY(-1px) !important}

/* ── CREATOR ROW ── */
.creator-row-watch{
  display:flex !important;align-items:center !important;gap:12px !important;
  padding:12px 0 !important;border-bottom:1px solid var(--border) !important;
  margin-bottom:12px !important;flex-wrap:wrap !important;
}

.creator-av{
  width:44px !important;height:44px !important;border-radius:50% !important;
  overflow:hidden !important;flex-shrink:0 !important;background:var(--bg4) !important;
  border:2px solid var(--accent) !important;
}
.creator-av img{width:100% !important;height:100% !important;object-fit:cover !important}

.creator-info{flex:1 !important;min-width:0 !important}
.creator-name{font-size:14.5px !important;font-weight:800 !important;display:flex !important;align-items:center !important;gap:5px !important}
.creator-subs{font-size:12px !important;color:var(--text2) !important;margin-top:2px !important}

.btn-follow-watch,.btn-subscribe-watch{
  padding:8px 22px !important;background:var(--g-btn) !important;color:#fff !important;
  border:none !important;border-radius:var(--r-f) !important;font-family:inherit !important;
  font-size:13.5px !important;font-weight:700 !important;cursor:pointer !important;
  transition:all .18s !important;box-shadow:0 3px 12px rgba(255,107,0,.28) !important;
  white-space:nowrap !important;
}
.btn-follow-watch:hover,.btn-subscribe-watch:hover{transform:translateY(-1px) !important;box-shadow:var(--glow) !important}
.btn-follow-watch.following{background:var(--bg4) !important;color:var(--text) !important;border:1.5px solid var(--border) !important;box-shadow:none !important}

.btn-join-mandal{
  padding:8px 16px !important;background:var(--bg3) !important;color:var(--text) !important;
  border:1.5px solid var(--border) !important;border-radius:var(--r-f) !important;
  font-family:inherit !important;font-size:13px !important;font-weight:700 !important;
  cursor:pointer !important;transition:all .18s !important;display:inline-flex !important;
  align-items:center !important;gap:6px !important;white-space:nowrap !important;
}
.btn-join-mandal:hover{border-color:var(--accent) !important;color:var(--accent) !important}

/* ── WATCH SIDEBAR — Up Next, Filter tabs ── */
.watch-sidebar-tabs{
  display:flex !important;gap:6px !important;
  overflow-x:auto !important;scrollbar-width:none !important;
  padding:0 0 10px !important;margin-bottom:10px !important;
  border-bottom:1px solid var(--border) !important;
}
.watch-sidebar-tabs::-webkit-scrollbar{display:none !important}

.ws-tab{
  flex-shrink:0 !important;padding:6px 14px !important;
  border-radius:var(--r-f) !important;font-size:12.5px !important;font-weight:600 !important;
  cursor:pointer !important;transition:all .16s !important;
  font-family:inherit !important;border:1.5px solid var(--border) !important;
  background:var(--bg3) !important;color:var(--text2) !important;
}
.ws-tab:hover{border-color:var(--accent) !important;color:var(--accent) !important}
.ws-tab.active{background:var(--g-btn) !important;border-color:transparent !important;color:#fff !important}

/* Autoplay toggle */
.autoplay-row{
  display:flex !important;align-items:center !important;
  justify-content:space-between !important;margin-bottom:12px !important;
}
.autoplay-label{font-size:14px !important;font-weight:700 !important;color:var(--text-b) !important}

.toggle-switch{
  width:44px !important;height:24px !important;border-radius:12px !important;
  background:var(--bg5) !important;position:relative !important;cursor:pointer !important;
  transition:background .2s !important;flex-shrink:0 !important;
  border:none !important;padding:0 !important;
}
.toggle-switch.on{background:var(--accent) !important}
.toggle-switch::after{
  content:'' !important;position:absolute !important;top:2px !important;left:2px !important;
  width:20px !important;height:20px !important;border-radius:50% !important;background:#fff !important;
  transition:transform .2s var(--spring) !important;box-shadow:0 1px 4px rgba(0,0,0,.3) !important;
}
.toggle-switch.on::after{transform:translateX(20px) !important}

/* ── RECOMMENDATION CARD ── */
.rec-card{
  display:flex !important;gap:10px !important;cursor:pointer !important;
  border-radius:var(--r) !important;padding:8px !important;margin-bottom:4px !important;
  transition:background .15s !important;text-decoration:none !important;color:var(--text) !important;
}
.rec-card:hover{background:var(--bg3) !important}

.rec-thumb{
  width:160px !important;flex-shrink:0 !important;aspect-ratio:16/9 !important;
  border-radius:9px !important;overflow:hidden !important;background:var(--bg3) !important;
  position:relative !important;
}
.rec-thumb img{width:100% !important;height:100% !important;object-fit:cover !important}
.rec-badge{
  position:absolute !important;bottom:4px !important;right:4px !important;
  background:rgba(0,0,0,.85) !important;color:#fff !important;
  font-size:10px !important;font-weight:800 !important;padding:2px 6px !important;border-radius:5px !important;
}
.rec-badge-live{background:#ef4444 !important}

.rec-info{flex:1 !important;min-width:0 !important}
.rec-title{
  font-size:13px !important;font-weight:700 !important;line-height:1.35 !important;
  display:-webkit-box !important;-webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;overflow:hidden !important;
  color:var(--text) !important;margin-bottom:4px !important;
}
.rec-meta{font-size:11px !important;color:var(--text2) !important;line-height:1.5 !important}

@media(max-width:768px){.rec-thumb{width:120px !important}}

/* ── LOK SHORTS STRIP IN WATCH SIDEBAR ── */
.ws-shorts-strip{
  display:flex !important;gap:6px !important;overflow-x:auto !important;
  scrollbar-width:none !important;padding:4px 0 8px !important;
}
.ws-shorts-strip::-webkit-scrollbar{display:none !important}

.ws-short-card{
  flex-shrink:0 !important;width:90px !important;border-radius:10px !important;
  overflow:hidden !important;position:relative !important;cursor:pointer !important;
  aspect-ratio:9/16 !important;background:var(--bg3) !important;
  transition:transform .2s var(--spring) !important;
}
.ws-short-card:hover{transform:scale(1.04) !important}
.ws-short-card img{width:100% !important;height:100% !important;object-fit:cover !important}
.ws-short-views{
  position:absolute !important;bottom:4px !important;left:0 !important;right:0 !important;
  text-align:center !important;font-size:10px !important;font-weight:700 !important;
  color:#fff !important;
  text-shadow:0 1px 4px rgba(0,0,0,.8) !important;
}

/* ── CHAPTERS STRIP ── */
.ws-chapters{
  display:flex !important;gap:6px !important;overflow-x:auto !important;
  scrollbar-width:none !important;padding:4px 0 !important;
}
.ws-chapters::-webkit-scrollbar{display:none !important}

.chapter-thumb-card{
  flex-shrink:0 !important;width:100px !important;cursor:pointer !important;
  transition:transform .18s !important;
}
.chapter-thumb-card:hover{transform:translateY(-2px) !important}
.chapter-thumb-img{
  width:100% !important;aspect-ratio:16/9 !important;border-radius:8px !important;
  overflow:hidden !important;background:var(--bg3) !important;
  position:relative !important;margin-bottom:4px !important;
}
.chapter-thumb-img img{width:100% !important;height:100% !important;object-fit:cover !important}
.chapter-time-badge{
  position:absolute !important;bottom:3px !important;left:3px !important;
  background:rgba(0,0,0,.8) !important;color:#fff !important;
  font-size:9px !important;font-weight:700 !important;padding:1px 5px !important;
  border-radius:4px !important;
}
.chapter-name{font-size:10.5px !important;font-weight:600 !important;color:var(--text2) !important;
  white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}

/* ── SERIES STRIP (Image 2) ── */
.series-strip{
  background:var(--bg2) !important;border:1px solid var(--border) !important;
  border-radius:var(--r-lg) !important;padding:14px !important;margin-top:16px !important;
}
.series-header{
  display:flex !important;align-items:center !important;
  justify-content:space-between !important;margin-bottom:10px !important;
}
.series-title{font-size:14px !important;font-weight:800 !important;color:var(--text-b) !important;display:flex !important;align-items:center !important;gap:7px !important}
.series-progress{font-size:12px !important;color:var(--text2) !important}

.series-cards-scroll{
  display:flex !important;gap:8px !important;overflow-x:auto !important;scrollbar-width:none !important;
}
.series-cards-scroll::-webkit-scrollbar{display:none !important}

.series-card{
  flex-shrink:0 !important;width:130px !important;cursor:pointer !important;
  border-radius:10px !important;overflow:hidden !important;background:var(--bg3) !important;
  position:relative !important;transition:transform .18s var(--spring) !important;
}
.series-card:hover{transform:translateY(-3px) !important}
.series-card-thumb{aspect-ratio:16/9 !important;position:relative !important;overflow:hidden !important}
.series-card-thumb img{width:100% !important;height:100% !important;object-fit:cover !important}
.series-card-num{
  position:absolute !important;top:5px !important;left:5px !important;
  width:22px !important;height:22px !important;border-radius:50% !important;
  background:var(--g-btn) !important;color:#fff !important;
  font-size:10px !important;font-weight:800 !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
}
.series-card-info{padding:6px 8px !important}
.series-card-title{font-size:11px !important;font-weight:600 !important;color:var(--text) !important;
  display:-webkit-box !important;-webkit-line-clamp:2 !important;-webkit-box-orient:vertical !important;overflow:hidden !important}
.series-card-dur{font-size:10px !important;color:var(--text2) !important;margin-top:2px !important}

/* ── BHARAT TRENDS MAP SIDEBAR (Image 2) ── */
.bharat-map-widget{
  background:var(--bg2) !important;border:1px solid var(--border) !important;
  border-radius:var(--r-lg) !important;padding:14px !important;margin-top:14px !important;
}
.map-widget-title{font-size:14px !important;font-weight:800 !important;margin-bottom:10px !important;color:var(--text-b) !important}

.map-trend-row{
  display:flex !important;align-items:center !important;gap:10px !important;
  padding:8px 0 !important;border-bottom:1px solid rgba(255,107,0,.07) !important;
}
.map-trend-row:last-child{border-bottom:none !important}
.map-trend-icon{font-size:16px !important;flex-shrink:0 !important}
.map-trend-name{flex:1 !important;font-size:13px !important;font-weight:600 !important}
.map-trend-count{font-size:11px !important;color:var(--text2) !important}

/* ═══════════════════════════════════════════════════════════
   HOME FEED — Image 3 exact match
   ═══════════════════════════════════════════════════════════ */

/* Hero trending card */
.hero-feed-card{
  position:relative !important;border-radius:var(--r-lg) !important;
  overflow:hidden !important;margin:10px 12px !important;
  background:var(--bg3) !important;box-shadow:var(--sh-lg) !important;
  cursor:pointer !important;
}

.hero-feed-img{
  width:100% !important;display:block !important;
  aspect-ratio:16/9 !important;object-fit:cover !important;
}

.hero-feed-overlay{
  position:absolute !important;inset:0 !important;
  background:linear-gradient(to right,rgba(0,0,0,.02) 55%,rgba(0,0,0,.65) 100%),
             linear-gradient(to top,rgba(0,0,0,.75) 0%,rgba(0,0,0,.2) 40%,transparent 65%) !important;
  pointer-events:none !important;
}

.hero-trending-pill{
  position:absolute !important;top:12px !important;left:12px !important;
  display:flex !important;align-items:center !important;gap:5px !important;
  padding:5px 12px !important;background:rgba(255,107,0,.88) !important;
  color:#fff !important;border-radius:var(--r-f) !important;
  font-size:12px !important;font-weight:800 !important;
  backdrop-filter:blur(8px) !important;
}

.hero-bottom-info{
  position:absolute !important;bottom:0 !important;left:0 !important;right:0 !important;
  padding:12px 12px 10px !important;
}

.hero-creator-row{
  display:flex !important;align-items:center !important;gap:8px !important;margin-bottom:6px !important;
}
.hero-creator-av{width:30px !important;height:30px !important;border-radius:50% !important;border:2px solid rgba(255,255,255,.7) !important;overflow:hidden !important;flex-shrink:0 !important}
.hero-creator-av img{width:100% !important;height:100% !important;object-fit:cover !important}
.hero-creator-name{font-size:13px !important;font-weight:700 !important;color:#fff !important;display:flex !important;align-items:center !important;gap:4px !important}

.hero-title{font-size:16px !important;font-weight:800 !important;color:#fff !important;line-height:1.3 !important;margin-bottom:8px !important}

.hero-duration-badge{
  position:absolute !important;bottom:12px !important;left:12px !important;
  background:rgba(0,0,0,.8) !important;color:#fff !important;
  font-size:12px !important;font-weight:700 !important;padding:3px 8px !important;border-radius:6px !important;
}

.hero-dots{
  position:absolute !important;bottom:12px !important;left:50% !important;
  transform:translateX(-50%) !important;
  display:flex !important;gap:5px !important;
}
.hero-dot{width:6px !important;height:6px !important;border-radius:3px !important;background:rgba(255,255,255,.4) !important;cursor:pointer !important;transition:all .2s !important}
.hero-dot.active{width:18px !important;background:#fff !important}

/* Right side reactions on hero */
.hero-side-react{
  position:absolute !important;right:10px !important;top:50% !important;
  transform:translateY(-50%) !important;
  display:flex !important;flex-direction:column !important;gap:10px !important;z-index:5 !important;
}
.hero-react-item{
  display:flex !important;flex-direction:column !important;align-items:center !important;gap:2px !important;
  color:#fff !important;cursor:pointer !important;
}
.hero-react-item i{font-size:22px !important;filter:drop-shadow(0 1px 4px rgba(0,0,0,.6)) !important}
.hero-react-count{font-size:10px !important;font-weight:800 !important}
.hero-react-label{font-size:9px !important;color:rgba(255,255,255,.75) !important;font-weight:600 !important}
.hero-react-more{
  width:32px !important;height:32px !important;border-radius:50% !important;
  background:rgba(0,0,0,.5) !important;color:#fff !important;
  border:none !important;cursor:pointer !important;font-size:14px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  align-self:center !important;
}

/* Follow pill on hero */
.hero-follow-pill{
  padding:5px 14px !important;background:var(--g-btn) !important;color:#fff !important;
  border:none !important;border-radius:var(--r-f) !important;
  font-size:12px !important;font-weight:700 !important;cursor:pointer !important;
  font-family:inherit !important;transition:all .18s !important;
}
.hero-follow-pill:hover{box-shadow:var(--glow-sm) !important}

/* ── SHORTS ROW — Image 3 (vertical 9:16 thumbnails) ── */
.shorts-feed-row{
  display:flex !important;gap:8px !important;overflow-x:auto !important;
  scrollbar-width:none !important;padding:0 12px 8px !important;
}
.shorts-feed-row::-webkit-scrollbar{display:none !important}

.sf-short-card{
  flex-shrink:0 !important;width:130px !important;border-radius:12px !important;
  overflow:hidden !important;position:relative !important;cursor:pointer !important;
  background:var(--bg3) !important;transition:transform .2s var(--spring) !important;
}
.sf-short-card:hover{transform:scale(1.04) !important}
.sf-short-thumb{
  width:100% !important;aspect-ratio:9/16 !important;
  overflow:hidden !important;position:relative !important;
}
.sf-short-thumb img{width:100% !important;height:100% !important;object-fit:cover !important}
.sf-short-more{
  position:absolute !important;top:6px !important;right:6px !important;
  background:rgba(0,0,0,.55) !important;color:#fff !important;
  width:26px !important;height:26px !important;border-radius:50% !important;
  border:none !important;font-size:13px !important;cursor:pointer !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
}
.sf-short-views{
  position:absolute !important;bottom:6px !important;left:0 !important;right:0 !important;
  text-align:center !important;font-size:11px !important;font-weight:700 !important;
  color:#fff !important;text-shadow:0 1px 4px rgba(0,0,0,.8) !important;
}

/* ── VIDEO 4-GRID ROW — "Videos For You" ── */
.feed-4grid{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:12px !important;padding:0 12px !important;
}
@media(max-width:900px){.feed-4grid{grid-template-columns:repeat(2,1fr) !important}}
@media(max-width:480px){.feed-4grid{grid-template-columns:repeat(2,1fr) !important;gap:8px !important;padding:0 8px !important}}

/* ── LIVE NOW STRIP ── */
.live-strip{
  display:flex !important;gap:10px !important;overflow-x:auto !important;
  scrollbar-width:none !important;padding:0 12px 8px !important;
}
.live-strip::-webkit-scrollbar{display:none !important}

.live-card{
  flex-shrink:0 !important;width:160px !important;border-radius:12px !important;
  overflow:hidden !important;position:relative !important;cursor:pointer !important;
  background:var(--bg3) !important;transition:transform .2s var(--spring) !important;
}
.live-card:hover{transform:translateY(-3px) !important}
.live-card-thumb{
  width:100% !important;aspect-ratio:9/12 !important;overflow:hidden !important;
}
.live-card-thumb img{width:100% !important;height:100% !important;object-fit:cover !important}
.live-card-info{padding:8px !important}
.live-card-title{font-size:12px !important;font-weight:700 !important;color:var(--text) !important;
  display:-webkit-box !important;-webkit-line-clamp:2 !important;-webkit-box-orient:vertical !important;overflow:hidden !important}
.live-card-channel{font-size:10.5px !important;color:var(--text2) !important;margin-top:2px !important}

.live-badge-card{
  position:absolute !important;top:6px !important;left:6px !important;
  display:flex !important;align-items:center !important;gap:4px !important;
  background:#ef4444 !important;color:#fff !important;
  font-size:9px !important;font-weight:800 !important;padding:2px 7px !important;
  border-radius:5px !important;animation:livePulse 2s infinite !important;
}
.live-viewers-badge{
  position:absolute !important;top:6px !important;right:6px !important;
  background:rgba(0,0,0,.7) !important;color:#fff !important;
  font-size:9px !important;font-weight:700 !important;padding:2px 6px !important;
  border-radius:5px !important;display:flex !important;align-items:center !important;gap:3px !important;
}

@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.75}}

/* ── BHARAT TRENDS MAP WIDGET (home) ── */
.home-map-widget{
  background:linear-gradient(135deg,rgba(30,15,0,.9),rgba(20,10,0,.95)) !important;
  border:1px solid var(--border) !important;border-radius:var(--r-lg) !important;
  padding:16px !important;
}

/* ── CONTINUE WATCHING ── */
.continue-grid{
  display:flex !important;gap:10px !important;overflow-x:auto !important;
  scrollbar-width:none !important;padding:0 0 4px !important;
}
.continue-grid::-webkit-scrollbar{display:none !important}

.cw-card{
  flex-shrink:0 !important;width:160px !important;cursor:pointer !important;
  border-radius:10px !important;overflow:hidden !important;background:var(--bg3) !important;
  position:relative !important;transition:transform .18s !important;
}
.cw-card:hover{transform:translateY(-3px) !important}
.cw-thumb{width:100% !important;aspect-ratio:16/9 !important;position:relative !important;overflow:hidden !important}
.cw-thumb img{width:100% !important;height:100% !important;object-fit:cover !important}
.cw-play-overlay{
  position:absolute !important;inset:0 !important;
  background:rgba(0,0,0,.35) !important;display:flex !important;
  align-items:center !important;justify-content:center !important;
  opacity:0 !important;transition:opacity .18s !important;
}
.cw-card:hover .cw-play-overlay{opacity:1 !important}
.cw-play-btn{
  width:36px !important;height:36px !important;border-radius:50% !important;
  background:rgba(255,107,0,.85) !important;color:#fff !important;
  display:flex !important;align-items:center !important;justify-content:center !important;font-size:14px !important;
}
.cw-progress{
  position:absolute !important;bottom:0 !important;left:0 !important;right:0 !important;
  height:3px !important;background:rgba(255,255,255,.2) !important;
}
.cw-progress-fill{height:100% !important;background:var(--accent) !important}
.cw-info{padding:6px 8px !important}
.cw-title{font-size:11.5px !important;font-weight:700 !important;
  display:-webkit-box !important;-webkit-line-clamp:2 !important;-webkit-box-orient:vertical !important;overflow:hidden !important}
.cw-time{font-size:10px !important;color:var(--text2) !important;margin-top:2px !important}

/* ── STORIES / LOK MANDAL ── */
.lok-mandal-header{
  display:flex !important;align-items:center !important;
  justify-content:space-between !important;padding:12px 12px 6px !important;
}
.lok-mandal-title{font-size:14px !important;font-weight:800 !important;color:var(--text-b) !important}
.lok-mandal-sub{font-size:11px !important;color:var(--text2) !important;display:flex !important;align-items:center !important;gap:5px !important}

.stories-row{
  display:flex !important;gap:12px !important;overflow-x:auto !important;
  scrollbar-width:none !important;padding:4px 12px 10px !important;
}
.stories-row::-webkit-scrollbar{display:none !important}

.story-bubble{flex-shrink:0 !important;display:flex !important;flex-direction:column !important;align-items:center !important;gap:5px !important;cursor:pointer !important}
.story-ring{width:64px !important;height:64px !important;border-radius:50% !important;background:var(--g-warm) !important;padding:2.5px !important;transition:transform .2s var(--spring) !important}
.story-ring-inner{width:100% !important;height:100% !important;border-radius:50% !important;background:var(--bg2) !important;padding:2px !important;overflow:hidden !important;display:flex !important;align-items:center !important;justify-content:center !important}
.story-ring-inner img{width:100% !important;height:100% !important;object-fit:cover !important;border-radius:50% !important}
.story-bubble:hover .story-ring{transform:scale(1.06) !important}
.story-name{font-size:11px !important;font-weight:600 !important;color:var(--text2) !important;max-width:64px !important;text-align:center !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important}
.story-add-btn{width:64px !important;height:64px !important;border-radius:50% !important;border:2px dashed var(--border2) !important;background:var(--bg3) !important;display:flex !important;align-items:center !important;justify-content:center !important;font-size:24px !important;color:var(--accent) !important;cursor:pointer !important;transition:all .2s var(--spring) !important}
.story-add-btn:hover{background:var(--bg-hover) !important;border-color:var(--accent) !important;transform:scale(1.06) !important}

/* ── SECTION HEADER ── */
.section-header{display:flex !important;align-items:center !important;justify-content:space-between !important;padding:14px 12px 8px !important}
.section-title{font-size:15px !important;font-weight:800 !important;color:var(--text-b) !important;display:flex !important;align-items:center !important;gap:7px !important}
.section-subtitle{font-size:11.5px !important;color:var(--text2) !important;font-weight:400 !important;margin-left:4px !important}
.section-link{font-size:12.5px !important;font-weight:700 !important;color:var(--accent) !important;text-decoration:none !important;display:flex !important;align-items:center !important;gap:4px !important}

/* ── VIDEO CARD (yt-card) ── */
.yt-card{background:var(--bg-card) !important;border-radius:var(--r) !important;overflow:hidden !important;transition:transform .22s var(--ease),box-shadow .22s,border-color .22s !important;border:1px solid transparent !important;cursor:pointer !important}
.yt-card:hover{transform:translateY(-3px) !important;box-shadow:var(--sh-lg) !important;border-color:var(--border) !important}
.yt-thumb-wrap{position:relative !important;aspect-ratio:16/9 !important;overflow:hidden !important;background:var(--bg3) !important}
.yt-thumb-wrap img{width:100% !important;height:100% !important;object-fit:cover !important;display:block !important;transition:transform .4s var(--ease) !important}
.yt-card:hover .yt-thumb-wrap img{transform:scale(1.04) !important}
.yt-badge{position:absolute !important;bottom:6px !important;right:6px !important;background:rgba(0,0,0,.85) !important;color:#fff !important;font-size:11px !important;font-weight:700 !important;padding:2px 7px !important;border-radius:5px !important}
.yt-info{display:flex !important;gap:10px !important;padding:10px 10px 12px !important}
.yt-avatar{width:34px !important;height:34px !important;border-radius:50% !important;background:var(--bg4) !important;overflow:hidden !important;flex-shrink:0 !important;display:flex !important;align-items:center !important;justify-content:center !important;font-weight:800 !important;font-size:13px !important;color:var(--accent) !important}
.yt-avatar img{width:100% !important;height:100% !important;object-fit:cover !important}
.yt-title{font-size:13px !important;font-weight:700 !important;color:var(--text) !important;line-height:1.4 !important;margin-bottom:4px !important;display:-webkit-box !important;-webkit-line-clamp:2 !important;-webkit-box-orient:vertical !important;overflow:hidden !important;text-decoration:none !important;display:block !important}
.yt-title:hover{color:var(--accent) !important}
.yt-channel{font-size:11.5px !important;color:var(--text2) !important;margin-bottom:2px !important}
.yt-meta{font-size:11px !important;color:var(--text2) !important}

/* Three dot menu on cards */
.card-more-btn{position:absolute !important;top:6px !important;right:6px !important;width:28px !important;height:28px !important;border-radius:50% !important;background:rgba(0,0,0,.65) !important;color:#fff !important;border:none !important;cursor:pointer !important;font-size:12px !important;display:flex !important;align-items:center !important;justify-content:center !important;opacity:0 !important;transition:opacity .15s !important}
.yt-card:hover .card-more-btn{opacity:1 !important}

/* ═══════════════════════════════════════════════════════════
   CREATOR STUDIO — Image 4 exact match
   ═══════════════════════════════════════════════════════════ */
.studio-layout{display:flex !important;min-height:100vh !important;background:var(--bg) !important}

/* Studio sidebar */
.studio-nav{
  width:220px !important;background:var(--bg2) !important;
  border-right:1px solid var(--border) !important;
  display:flex !important;flex-direction:column !important;
  height:100vh !important;position:sticky !important;top:0 !important;
  overflow-y:auto !important;scrollbar-width:thin !important;flex-shrink:0 !important;
}
.studio-nav::-webkit-scrollbar{width:3px !important}
.studio-nav::-webkit-scrollbar-thumb{background:rgba(255,107,0,.2) !important}

.studio-nav-logo{
  display:flex !important;align-items:center !important;gap:10px !important;
  padding:16px 14px !important;border-bottom:1px solid var(--border) !important;
}
.studio-label{font-size:10px !important;font-weight:800 !important;color:var(--accent) !important;letter-spacing:.8px !important;text-transform:uppercase !important;margin-top:1px !important}

/* Studio nav items */
.studio-nav-item{
  display:flex !important;align-items:center !important;gap:10px !important;
  padding:10px 14px !important;border-radius:10px !important;margin:1px 8px !important;
  color:var(--text2) !important;text-decoration:none !important;
  font-size:13px !important;font-weight:600 !important;transition:all .16s !important;
}
.studio-nav-item:hover{background:var(--bg-hover) !important;color:var(--accent) !important}
.studio-nav-item.active{background:rgba(255,107,0,.1) !important;color:var(--accent) !important;font-weight:700 !important}
.studio-nav-item i{width:18px !important;text-align:center !important;font-size:14px !important;flex-shrink:0 !important}

/* Studio creator card in nav */
.studio-creator-card{
  padding:14px !important;border-bottom:1px solid var(--border) !important;
  display:flex !important;align-items:center !important;gap:10px !important;
  text-decoration:none !important;
}
.studio-creator-av{width:44px !important;height:44px !important;border-radius:50% !important;border:2px solid var(--accent) !important;overflow:hidden !important;flex-shrink:0 !important}
.studio-creator-av img{width:100% !important;height:100% !important;object-fit:cover !important}
.studio-creator-name{font-size:13.5px !important;font-weight:800 !important;color:var(--text-b) !important;display:flex !important;align-items:center !important;gap:5px !important}
.studio-creator-handle{font-size:11px !important;color:var(--text2) !important;margin-top:2px !important}
.studio-creator-subs{font-size:11px !important;color:var(--text2) !important;margin-top:1px !important}

/* Bharat First card in nav (Image 4) */
.studio-bharat-card{
  margin:10px 8px !important;padding:12px !important;
  background:rgba(255,107,0,.06) !important;border:1px solid rgba(255,107,0,.18) !important;
  border-radius:var(--r) !important;
}
.studio-bharat-title{font-size:12px !important;font-weight:800 !important;color:var(--accent) !important}
.studio-bharat-text{font-size:11px !important;color:var(--text2) !important;margin-top:4px !important;line-height:1.4 !important}

/* Studio main area */
.studio-main{flex:1 !important;min-width:0 !important;overflow-x:hidden !important}

/* Studio topbar */
.studio-topbar{
  position:sticky !important;top:0 !important;z-index:100 !important;
  height:58px !important;padding:0 20px !important;
  background:rgba(12,12,12,.97) !important;border-bottom:1px solid var(--border) !important;
  display:flex !important;align-items:center !important;gap:12px !important;
  backdrop-filter:blur(20px) !important;
}

/* Studio hero welcome (Image 4) */
.studio-hero{
  position:relative !important;border-radius:var(--r-lg) !important;overflow:hidden !important;
  margin:16px !important;min-height:120px !important;
  background:linear-gradient(135deg,#1A0800,#3D1500,#7A2E00) !important;
  display:flex !important;align-items:center !important;justify-content:space-between !important;
  padding:20px 24px !important;
}
.studio-hero-text{z-index:2 !important;position:relative !important}
.studio-hero-greeting{font-size:22px !important;font-weight:800 !important;color:var(--text-b) !important;margin-bottom:4px !important}
.studio-hero-sub{font-size:13px !important;color:rgba(255,255,255,.65) !important}
.studio-hero-btns{display:flex !important;gap:10px !important;z-index:2 !important;position:relative !important}

.btn-upload-studio{
  display:flex !important;align-items:center !important;gap:7px !important;
  padding:10px 22px !important;background:var(--g-btn) !important;color:#fff !important;
  border:none !important;border-radius:var(--r-f) !important;font-family:inherit !important;
  font-size:14px !important;font-weight:700 !important;cursor:pointer !important;
  box-shadow:0 4px 16px rgba(255,107,0,.35) !important;transition:all .18s !important;
}
.btn-upload-studio:hover{transform:translateY(-1px) !important;box-shadow:var(--glow) !important}

.btn-go-live{
  display:flex !important;align-items:center !important;gap:7px !important;
  padding:10px 20px !important;background:rgba(255,255,255,.1) !important;color:#fff !important;
  border:1.5px solid rgba(255,255,255,.25) !important;border-radius:var(--r-f) !important;
  font-family:inherit !important;font-size:14px !important;font-weight:700 !important;
  cursor:pointer !important;transition:all .18s !important;backdrop-filter:blur(8px) !important;
}
.btn-go-live:hover{background:rgba(255,255,255,.18) !important;border-color:rgba(255,255,255,.4) !important}

/* Creator level XP bar */
.creator-level-bar{
  background:var(--bg2) !important;border:1px solid var(--border) !important;
  border-radius:var(--r) !important;padding:14px 16px !important;
  margin:0 16px 14px !important;display:flex !important;align-items:center !important;gap:16px !important;
}
.creator-level-icon{width:40px !important;height:40px !important;flex-shrink:0 !important;display:flex !important;align-items:center !important;justify-content:center !important;font-size:22px !important}
.creator-level-label{font-size:12px !important;color:var(--accent) !important;font-weight:700 !important}
.creator-level-name{font-size:15px !important;font-weight:800 !important;color:var(--text-b) !important}
.xp-bar-wrap{flex:1 !important;min-width:0 !important}
.xp-bar-track{height:8px !important;background:var(--bg4) !important;border-radius:4px !important;overflow:hidden !important;margin:6px 0 !important}
.xp-bar-fill{height:100% !important;background:var(--g-btn) !important;border-radius:4px !important;transition:width .8s var(--ease) !important}
.xp-text{font-size:11px !important;color:var(--text2) !important;display:flex !important;justify-content:space-between !important}
.next-reward-chip{display:flex !important;align-items:center !important;gap:8px !important;padding:8px 14px !important;background:var(--bg3) !important;border:1px solid var(--border) !important;border-radius:var(--r) !important;font-size:12px !important;flex-shrink:0 !important}
.next-reward-icon{font-size:20px !important}
.next-reward-label{font-size:10px !important;color:var(--text2) !important;font-weight:600 !important}
.next-reward-name{font-size:12.5px !important;font-weight:700 !important;color:var(--text-b) !important}

/* Overview stat cards */
.studio-stats-grid{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:12px !important;padding:0 16px 16px !important;
}
@media(max-width:900px){.studio-stats-grid{grid-template-columns:repeat(2,1fr) !important}}
@media(max-width:480px){.studio-stats-grid{grid-template-columns:1fr 1fr !important}}

.studio-stat-card{
  background:var(--bg2) !important;border:1px solid var(--border) !important;
  border-radius:var(--r-lg) !important;padding:16px !important;
  position:relative !important;overflow:hidden !important;transition:all .2s !important;
}
.studio-stat-card:hover{border-color:var(--border2) !important;transform:translateY(-2px) !important;box-shadow:var(--sh-acc) !important}
.studio-stat-card::before{content:'' !important;position:absolute !important;top:0 !important;left:0 !important;right:0 !important;height:2px !important;background:var(--g-btn) !important;opacity:0 !important;transition:opacity .2s !important}
.studio-stat-card:hover::before{opacity:1 !important}

.ssc-label{font-size:11.5px !important;font-weight:600 !important;color:var(--text2) !important;margin-bottom:6px !important}
.ssc-value{font-size:26px !important;font-weight:900 !important;color:var(--text-b) !important;letter-spacing:-.5px !important;margin-bottom:4px !important}
.ssc-delta{display:inline-flex !important;align-items:center !important;gap:4px !important;font-size:12px !important;font-weight:700 !important;margin-bottom:8px !important}
.ssc-delta.up{color:#22c55e !important}
.ssc-delta.down{color:#ef4444 !important}

/* Sparkline mini chart placeholder */
.ssc-sparkline{height:32px !important;width:100% !important;margin-top:4px !important}

/* ── RECENT VIDEOS TABLE ── */
.studio-recent-videos{padding:0 16px 16px !important}
.rv-row{display:flex !important;align-items:center !important;gap:12px !important;padding:10px 0 !important;border-bottom:1px solid rgba(255,107,0,.07) !important;transition:background .14s !important}
.rv-row:last-child{border-bottom:none !important}
.rv-row:hover{background:var(--bg3) !important;border-radius:var(--r-sm) !important;padding-left:8px !important;padding-right:8px !important;margin:0 -8px !important}
.rv-thumb{width:88px !important;aspect-ratio:16/9 !important;border-radius:8px !important;overflow:hidden !important;background:var(--bg3) !important;flex-shrink:0 !important;position:relative !important}
.rv-thumb img{width:100% !important;height:100% !important;object-fit:cover !important}
.rv-dur{position:absolute !important;bottom:3px !important;right:3px !important;background:rgba(0,0,0,.8) !important;color:#fff !important;font-size:9px !important;font-weight:700 !important;padding:1px 5px !important;border-radius:4px !important}
.rv-info{flex:1 !important;min-width:0 !important}
.rv-title{font-size:13px !important;font-weight:700 !important;color:var(--text) !important;display:-webkit-box !important;-webkit-line-clamp:2 !important;-webkit-box-orient:vertical !important;overflow:hidden !important;margin-bottom:3px !important}
.rv-meta{font-size:11px !important;color:var(--text2) !important}
.rv-revenue{display:flex !important;align-items:center !important;gap:5px !important;font-size:13px !important;font-weight:700 !important;color:#22c55e !important;flex-shrink:0 !important;white-space:nowrap !important}
.rv-more-btn{background:none !important;border:none !important;color:var(--text2) !important;cursor:pointer !important;font-size:15px !important;flex-shrink:0 !important;padding:4px !important;border-radius:6px !important;transition:color .15s !important}
.rv-more-btn:hover{color:var(--accent) !important}

/* ── CREATOR TOOLS GRID ── */
.creator-tools-grid{
  display:grid !important;grid-template-columns:repeat(5,1fr) !important;
  gap:10px !important;padding:0 16px 16px !important;
}
@media(max-width:900px){.creator-tools-grid{grid-template-columns:repeat(3,1fr) !important}}
@media(max-width:480px){.creator-tools-grid{grid-template-columns:repeat(2,1fr) !important}}

.ct-tool-card{
  background:var(--bg2) !important;border:1px solid var(--border) !important;
  border-radius:var(--r) !important;padding:16px 12px !important;text-align:center !important;
  cursor:pointer !important;transition:all .2s !important;text-decoration:none !important;
}
.ct-tool-card:hover{border-color:var(--accent) !important;transform:translateY(-2px) !important;box-shadow:var(--sh-acc) !important}
.ct-tool-icon{font-size:24px !important;margin-bottom:8px !important;display:block !important}
.ct-tool-name{font-size:12px !important;font-weight:700 !important;color:var(--text) !important;margin-bottom:4px !important}
.ct-tool-desc{font-size:10.5px !important;color:var(--text2) !important;line-height:1.4 !important}
.ct-tool-btn{
  display:inline-block !important;margin-top:8px !important;padding:4px 14px !important;
  background:none !important;border:1.5px solid var(--accent) !important;
  border-radius:var(--r-f) !important;color:var(--accent) !important;
  font-size:11px !important;font-weight:700 !important;cursor:pointer !important;
  font-family:inherit !important;transition:all .16s !important;
}
.ct-tool-btn:hover{background:var(--accent) !important;color:#fff !important}
.ct-tool-btn.special{background:var(--g-btn) !important;border:none !important;color:#fff !important}

/* ── CREATOR PROGRAM BANNER ── */
.creator-program-banner{
  margin:0 16px 20px !important;border-radius:var(--r-lg) !important;overflow:hidden !important;
  background:linear-gradient(135deg,#1A0800,#5A2000,#FF6B00) !important;
  padding:20px 24px !important;display:flex !important;align-items:center !important;gap:16px !important;
}
.cpb-icon{font-size:36px !important;flex-shrink:0 !important}
.cpb-text{flex:1 !important}
.cpb-title{font-size:16px !important;font-weight:800 !important;color:#fff !important}
.cpb-sub{font-size:12.5px !important;color:rgba(255,255,255,.7) !important;margin-top:4px !important}
.cpb-btn{padding:10px 22px !important;background:#fff !important;color:var(--accent) !important;border:none !important;border-radius:var(--r-f) !important;font-weight:800 !important;font-size:13.5px !important;cursor:pointer !important;flex-shrink:0 !important;font-family:inherit !important;transition:all .18s !important}
.cpb-btn:hover{transform:scale(1.04) !important}

/* ═══════════════════════════════════════════════════════════
   ADMIN PANEL — Premium dark pro
   ═══════════════════════════════════════════════════════════ */
.admin-shell{display:flex !important;min-height:100vh !important;background:var(--bg) !important}

.admin-nav{
  width:240px !important;background:var(--bg2) !important;border-right:1px solid var(--border) !important;
  display:flex !important;flex-direction:column !important;height:100vh !important;
  position:sticky !important;top:0 !important;overflow-y:auto !important;scrollbar-width:thin !important;flex-shrink:0 !important;
}

.admin-nav-logo{
  display:flex !important;align-items:center !important;gap:10px !important;
  padding:16px 14px !important;border-bottom:1px solid var(--border) !important;
}
.admin-panel-label{font-size:10px !important;font-weight:800 !important;color:var(--text3) !important;letter-spacing:.8px !important;text-transform:uppercase !important}

.admin-nav-section{padding:4px 0 !important}
.admin-nav-section-title{font-size:9.5px !important;font-weight:700 !important;color:var(--text3) !important;letter-spacing:.8px !important;text-transform:uppercase !important;padding:10px 14px 3px !important}

.admin-nav-item{
  display:flex !important;align-items:center !important;gap:9px !important;
  padding:9px 14px !important;border-radius:10px !important;margin:1px 8px !important;
  color:var(--text2) !important;text-decoration:none !important;
  font-size:12.5px !important;font-weight:600 !important;transition:all .15s !important;
}
.admin-nav-item:hover{background:var(--bg-hover) !important;color:var(--accent) !important}
.admin-nav-item.active{background:rgba(255,107,0,.1) !important;color:var(--accent) !important;font-weight:700 !important}
.admin-nav-item i{width:18px !important;text-align:center !important;font-size:13px !important;flex-shrink:0 !important}

.admin-topbar{
  height:58px !important;padding:0 20px !important;
  background:rgba(12,12,12,.97) !important;border-bottom:1px solid var(--border) !important;
  display:flex !important;align-items:center !important;gap:12px !important;
  position:sticky !important;top:0 !important;z-index:100 !important;
  backdrop-filter:blur(20px) !important;
}

/* Admin stat cards with sparklines */
.admin-stat-card{
  background:var(--bg2) !important;border:1px solid var(--border) !important;
  border-radius:var(--r-lg) !important;padding:18px !important;
  position:relative !important;overflow:hidden !important;transition:all .2s !important;
}
.admin-stat-card:hover{border-color:var(--border2) !important;transform:translateY(-2px) !important;box-shadow:var(--sh-acc) !important}
.admin-stat-card::before{content:'' !important;position:absolute !important;top:0 !important;left:0 !important;right:0 !important;height:2px !important;background:var(--g-btn) !important;opacity:0 !important;transition:opacity .2s !important}
.admin-stat-card:hover::before{opacity:1 !important}

.asc-icon{width:40px !important;height:40px !important;border-radius:12px !important;display:flex !important;align-items:center !important;justify-content:center !important;font-size:18px !important;margin-bottom:12px !important}
.asc-icon.orange{background:rgba(255,107,0,.12) !important;color:var(--accent) !important}
.asc-icon.blue{background:rgba(59,130,246,.12) !important;color:#60a5fa !important}
.asc-icon.green{background:rgba(34,197,94,.12) !important;color:#4ade80 !important}
.asc-icon.purple{background:rgba(139,92,246,.12) !important;color:#a78bfa !important}
.asc-icon.pink{background:rgba(236,72,153,.12) !important;color:#f472b6 !important}
.asc-icon.teal{background:rgba(20,184,166,.12) !important;color:#2dd4bf !important}

.asc-value{font-size:26px !important;font-weight:900 !important;color:var(--text-b) !important;letter-spacing:-.5px !important;margin-bottom:2px !important}
.asc-label{font-size:11.5px !important;color:var(--text2) !important;font-weight:600 !important}
.asc-delta{display:inline-flex !important;align-items:center !important;gap:4px !important;font-size:11px !important;font-weight:700 !important;margin-top:5px !important}
.asc-delta.up{color:#22c55e !important}
.asc-delta.down{color:#ef4444 !important}

/* Admin tables */
.admin-table{width:100% !important;border-collapse:collapse !important}
.admin-table th{background:var(--bg3) !important;padding:10px 14px !important;text-align:left !important;font-size:10.5px !important;font-weight:700 !important;color:var(--text2) !important;letter-spacing:.5px !important;text-transform:uppercase !important;border-bottom:1px solid var(--border) !important}
.admin-table td{padding:11px 14px !important;border-bottom:1px solid rgba(255,107,0,.07) !important;font-size:13px !important;vertical-align:middle !important}
.admin-table tr:hover td{background:var(--bg-hover) !important}

/* Badges */
.badge{display:inline-flex !important;align-items:center !important;gap:4px !important;padding:3px 10px !important;border-radius:var(--r-f) !important;font-size:11px !important;font-weight:700 !important}
.badge-green{background:rgba(34,197,94,.12) !important;color:#22c55e !important}
.badge-red{background:rgba(239,68,68,.12) !important;color:#ef4444 !important}
.badge-orange{background:rgba(255,107,0,.12) !important;color:var(--accent) !important}
.badge-blue{background:rgba(59,130,246,.12) !important;color:#60a5fa !important}
.badge-gray{background:var(--bg4) !important;color:var(--text2) !important}

/* Admin card */
.admin-card{background:var(--bg2) !important;border:1px solid var(--border) !important;border-radius:var(--r-lg) !important;overflow:hidden !important}
.admin-card-header{padding:14px 18px !important;border-bottom:1px solid var(--border) !important;display:flex !important;align-items:center !important;justify-content:space-between !important;background:var(--bg3) !important}
.admin-card-title{font-size:14px !important;font-weight:700 !important;display:flex !important;align-items:center !important;gap:7px !important;color:var(--text-b) !important}

/* ═══════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV — Exact Image 2,3 match
   ═══════════════════════════════════════════════════════════ */
.mobile-bottom-nav{
  display:none !important;position:fixed !important;bottom:0 !important;left:0 !important;right:0 !important;
  height:calc(60px + env(safe-area-inset-bottom)) !important;
  padding-bottom:env(safe-area-inset-bottom) !important;
  background:rgba(12,12,12,.97) !important;border-top:1px solid var(--border) !important;
  backdrop-filter:blur(24px) !important;-webkit-backdrop-filter:blur(24px) !important;z-index:300 !important;
}
[data-theme="light"] .mobile-bottom-nav{background:rgba(253,248,240,.97) !important}
@media(max-width:768px){.mobile-bottom-nav{display:flex !important;align-items:center !important}}
@media(max-width:768px){body.has-sidebar{padding-bottom:calc(62px + env(safe-area-inset-bottom)) !important}}

.mobile-bottom-nav-inner{width:100% !important;height:60px !important;display:flex !important;align-items:center !important;justify-content:space-around !important;padding:0 4px !important}

.bn-item,.mbn-item{display:flex !important;flex-direction:column !important;align-items:center !important;gap:3px !important;color:var(--text2) !important;text-decoration:none !important;font-size:10px !important;font-weight:600 !important;padding:4px 8px !important;border-radius:12px !important;transition:color .18s,transform .18s var(--spring) !important;min-width:44px !important;position:relative !important;background:none !important;border:none !important;cursor:pointer !important;font-family:inherit !important}
.bn-item i,.mbn-item i{font-size:20px !important;transition:transform .18s var(--spring) !important}
.bn-item:active,.mbn-item:active{transform:scale(.88) !important}
.bn-item.active,.mbn-item.active{color:var(--accent) !important}
.bn-item.active i{filter:drop-shadow(0 0 5px rgba(255,107,0,.5)) !important}
.mbn-badge,.bn-badge{position:absolute !important;top:0 !important;right:4px !important;min-width:16px !important;height:16px !important;background:#ef4444 !important;color:#fff !important;font-size:9px !important;font-weight:800 !important;border-radius:8px !important;display:flex !important;align-items:center !important;justify-content:center !important;padding:0 3px !important;border:2px solid var(--bg) !important}

/* Center create button */
.bn-create{display:flex !important;align-items:center !important;justify-content:center !important;flex-shrink:0 !important}
.bn-create-btn{
  width:52px !important;height:52px !important;background:var(--g-btn) !important;
  border:none !important;border-radius:50% !important;color:#fff !important;
  font-size:22px !important;cursor:pointer !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  box-shadow:0 4px 20px rgba(255,107,0,.45) !important;
  transform:translateY(-8px) !important;
  transition:transform .2s var(--spring),box-shadow .2s !important;
  text-decoration:none !important;
  outline:2px solid rgba(255,107,0,.25) !important;outline-offset:3px !important;
}
.bn-create-btn:hover{transform:translateY(-10px) scale(1.06) !important;box-shadow:0 6px 28px rgba(255,107,0,.55) !important}

/* ═══════════════════════════════════════════════════════════
   FORMS & INPUTS
   ═══════════════════════════════════════════════════════════ */
.form-control,input[type="text"],input[type="email"],input[type="password"],
input[type="number"],input[type="url"],input[type="search"],textarea,select{
  background:var(--bg3) !important;border:1.5px solid var(--border) !important;
  border-radius:var(--r) !important;color:var(--text) !important;font-family:inherit !important;
  font-size:14px !important;outline:none !important;transition:all .2s !important;
  width:100% !important;padding:10px 14px !important;
}
.form-control:focus,input:focus,textarea:focus,select:focus{border-color:var(--accent) !important;background:var(--bg4) !important;box-shadow:0 0 0 3px rgba(255,107,0,.12) !important}
input::placeholder,textarea::placeholder{color:var(--text3) !important}
label{color:var(--text2) !important;font-weight:600 !important;font-size:13px !important}

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
.btn{display:inline-flex !important;align-items:center !important;gap:7px !important;padding:9px 20px !important;border-radius:var(--r-f) !important;font-family:inherit !important;font-size:13.5px !important;font-weight:700 !important;cursor:pointer !important;text-decoration:none !important;border:none !important;transition:all .18s var(--ease) !important}
.btn:active{transform:scale(.96) !important}
.btn-primary{background:var(--g-btn) !important;color:#fff !important;box-shadow:0 3px 14px rgba(255,107,0,.28) !important}
.btn-primary:hover{transform:translateY(-1px) !important;box-shadow:var(--glow) !important}
.btn-secondary{background:var(--bg3) !important;border:1.5px solid var(--border) !important;color:var(--text) !important}
.btn-secondary:hover{border-color:var(--accent) !important;color:var(--accent) !important}
.btn-sm{padding:6px 14px !important;font-size:12px !important}
.btn-lg{padding:12px 28px !important;font-size:15px !important}

/* ═══════════════════════════════════════════════════════════
   MODALS & SHEETS
   ═══════════════════════════════════════════════════════════ */
.modal-backdrop,.modal-overlay{position:fixed !important;inset:0 !important;background:rgba(0,0,0,.78) !important;z-index:800 !important;display:none !important;align-items:center !important;justify-content:center !important;padding:16px !important;backdrop-filter:blur(8px) !important}
.modal-backdrop.open,.modal-overlay.open{display:flex !important}
.modal-box{background:var(--bg2) !important;border:1px solid var(--border) !important;border-radius:var(--r-xl) !important;padding:28px !important;max-width:460px !important;width:100% !important;box-shadow:0 20px 60px rgba(0,0,0,.85) !important;animation:modalIn .25s var(--ease) !important}
@keyframes modalIn{from{opacity:0;transform:scale(.93) translateY(10px)}to{opacity:1;transform:none}}

.bottom-sheet{position:fixed !important;bottom:0 !important;left:0 !important;right:0 !important;background:var(--bg2) !important;border:1px solid var(--border) !important;border-radius:24px 24px 0 0 !important;border-bottom:none !important;z-index:800 !important;padding:20px 20px calc(20px + env(safe-area-inset-bottom)) !important;transform:translateY(100%) !important;transition:transform .3s var(--ease) !important;box-shadow:0 -12px 40px rgba(0,0,0,.5) !important}
.bottom-sheet.open{transform:none !important}
.sheet-handle{width:40px !important;height:4px !important;background:var(--bg5) !important;border-radius:2px !important;margin:0 auto 20px !important}

/* ═══════════════════════════════════════════════════════════
   SKELETON + ANIMATIONS
   ═══════════════════════════════════════════════════════════ */
@keyframes shimmer{0%{background-position:-600px 0}100%{background-position:600px 0}}
.skeleton{background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4) 50%,var(--bg3) 75%) !important;background-size:1200px 100% !important;animation:shimmer 1.6s infinite linear !important;border-radius:6px !important}

@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}

.animate-in{animation:fadeIn .3s var(--ease) both !important}
.animate-up{animation:fadeInUp .4s var(--ease) both !important}

.spinner{width:28px !important;height:28px !important;border:3px solid var(--border) !important;border-top-color:var(--accent) !important;border-radius:50% !important;animation:spin .8s linear infinite !important}

/* Toast */
#lt-toast-container{position:fixed !important;bottom:80px !important;right:14px !important;z-index:9000 !important;display:flex !important;flex-direction:column-reverse !important;gap:8px !important;pointer-events:none !important}
.lk-toast{display:flex !important;align-items:center !important;gap:10px !important;padding:12px 18px !important;border-radius:12px !important;background:var(--bg3) !important;border:1px solid var(--border) !important;box-shadow:var(--sh-lg) !important;font-size:13.5px !important;font-weight:600 !important;color:var(--text) !important;max-width:320px !important;backdrop-filter:blur(12px) !important;pointer-events:auto !important;animation:fadeIn .25s var(--ease) !important}
.lk-toast.success i{color:#22c55e !important}
.lk-toast.error i{color:#ef4444 !important}
.lk-toast.info i{color:var(--accent) !important}

/* Profile dropdown */
.profile-dropdown{position:absolute !important;top:calc(100% + 8px) !important;right:0 !important;min-width:220px !important;background:var(--bg2) !important;border:1px solid var(--border) !important;border-radius:var(--r-lg) !important;box-shadow:0 16px 48px rgba(0,0,0,.75) !important;z-index:500 !important;display:none !important;overflow:hidden !important;animation:dropIn .18s var(--ease) !important}
@keyframes dropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.profile-dropdown.open{display:block !important}
.pd-item{display:flex !important;align-items:center !important;gap:12px !important;padding:11px 16px !important;font-size:13px !important;font-weight:600 !important;color:var(--text) !important;text-decoration:none !important;transition:background .14s !important}
.pd-item:hover{background:var(--bg3) !important;color:var(--accent) !important}
.pd-item i{width:18px !important;text-align:center !important;color:var(--accent) !important;font-size:14px !important}
.pd-divider{height:1px !important;background:var(--border) !important;margin:4px 0 !important}
.pd-item.danger{color:#ef4444 !important}
.pd-item.danger i{color:#ef4444 !important}

/* Verified */
.verified-icon,.fa-circle-check.verified{color:var(--accent) !important}
.live-badge{background:#ef4444 !important;color:#fff !important;font-size:10px !important;font-weight:800 !important;padding:2px 7px !important;border-radius:5px !important;animation:livePulse 2s infinite !important}
.empty-state{display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;padding:64px 24px !important;text-align:center !important}
.empty-state i{font-size:48px !important;color:var(--text3) !important;margin-bottom:16px !important;display:block !important}

/* PWA standalone */
@media(display-mode:standalone){body{padding-top:env(safe-area-inset-top) !important}.navbar{top:calc(2px + env(safe-area-inset-top)) !important}}
:focus-visible{outline:2px solid var(--accent) !important;outline-offset:2px !important}

/* ── Feed grid ── */
.feed-grid{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(290px,1fr)) !important;gap:14px !important;padding:12px !important}
@media(max-width:900px){.feed-grid{grid-template-columns:repeat(2,1fr) !important;gap:8px !important;padding:8px !important}}
@media(max-width:480px){.feed-grid{grid-template-columns:repeat(2,1fr) !important;gap:7px !important;padding:7px !important}}

/* Horizontal scroll */
.h-scroll{display:flex !important;gap:10px !important;overflow-x:auto !important;scrollbar-width:none !important;padding:0 12px 8px !important}
.h-scroll::-webkit-scrollbar{display:none !important}

/* Bharat tagline */
.bharat-tagline{text-align:center !important;font-family:'Noto Sans Devanagari',sans-serif !important;font-size:13px !important;color:var(--text2) !important;padding:10px 0 !important;letter-spacing:.4px !important}

/* Site footer */
.site-footer{padding:18px 0 !important;border-top:1px solid var(--border) !important;background:var(--bg2) !important;margin-top:40px !important}