/*
Theme Name: Rahul Verma
Theme URI: https://rkstudio.example.com/rahul-verma
Author: RK Studio
Author URI: https://rkstudio.example.com
Description: वर्मा चायवाला — Immersive full-screen desi nostalgia music player — background video/image with a YouTube song queue. By Rahul Verma.
Version: 2.30.3
Requires at least: 5.5
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rahul-verma
Tags: entertainment, one-column, custom-background
*/

:root{--tw-accent:#f3a516;--sab:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#050505;font-family:Arial,Helvetica,sans-serif}
html{margin-top:0 !important}
#app{position:relative;width:100vw;height:100vh;height:100dvh;background:#050505;overflow:hidden}
#driveVideo,#driveImage{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#050505}
.shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.18),transparent 28%)}
#ytHost{position:fixed;right:8px;bottom:8px;width:200px;height:200px;opacity:.001;pointer-events:none;overflow:hidden;z-index:1}
#ytPlayer{width:200px;height:200px}

.player{position:absolute;left:50%;bottom:calc(26px + var(--sab));transform:translateX(-50%);width:min(820px,calc(100vw - 36px));height:118px;border:1px solid rgba(255,255,255,.35);border-radius:58px;background:rgba(18,18,18,.84);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:flex;align-items:center;padding:14px 18px;gap:15px;box-shadow:0 10px 35px rgba(0,0,0,.3);color:#fff;z-index:5}
.art{width:82px;height:82px;border-radius:50%;border:2px solid rgba(255,255,255,.45);position:relative;flex:0 0 auto;object-fit:cover;background:#222;box-shadow:0 5px 18px rgba(0,0,0,.28)}
.meta{min-width:0;flex:1}
.title{font-weight:800;font-size:18px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.artist{font-size:14px;margin-top:5px;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.time{font-weight:700;font-size:13px;margin-top:7px;opacity:.9}
.bar{height:6px;background:rgba(255,255,255,.25);border-radius:99px;margin-top:8px;cursor:pointer;overflow:hidden}
.fill{height:100%;width:0;background:var(--tw-accent);border-radius:99px}
.controls{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.player button{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.09);color:#fff;width:52px;height:52px;border-radius:50%;font-size:20px;cursor:pointer;display:grid;place-items:center;padding:0;line-height:1}
.player button:hover{background:rgba(255,255,255,.16)}
.player button.play{width:66px;height:66px;background:#fff;color:#151515;font-size:25px;border:none}
.player button.active{background:var(--tw-accent);color:#171717}
#btnMute,#btnMore{border:1px solid var(--tw-accent);box-shadow:0 0 12px -3px var(--tw-accent)}
.catWrap{position:absolute;left:50%;bottom:calc(196px + var(--sab));transform:translateX(-50%);z-index:12}
@media(min-width:1200px){
  .catWrap{left:auto;transform:none;right:calc(50% + 424px);bottom:calc(26px + var(--sab));height:118px;display:flex;align-items:center}
}
.catBtn{display:flex;align-items:center;gap:10px;background:rgba(18,18,18,.84);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:99px;padding:11px 20px;font-size:15px;font-weight:800;font-family:Arial,Helvetica,sans-serif;cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);white-space:nowrap;max-width:60vw;width:auto;height:auto}
.catBtn:hover{background:rgba(30,30,30,.9)}
.catBtn:focus{outline:none;border-color:var(--tw-accent)}
.catBtn .chev{transition:transform .18s;flex:0 0 auto}
.catWrap.open .catBtn .chev{transform:rotate(180deg)}
.catList{display:none;position:absolute;bottom:calc(100% + 10px);left:0;margin:0;padding:7px;list-style:none;background:rgba(16,16,16,.94);border:1px solid rgba(255,255,255,.28);border-radius:20px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);min-width:100%;width:max-content;max-width:72vw;max-height:44vh;overflow-y:auto;box-shadow:0 12px 34px rgba(0,0,0,.45);z-index:9}
@media(min-width:1200px){
  .catList{bottom:auto;top:50%;transform:translateY(-100%) translateY(-46px)}
}
.catWrap.open .catList{display:block}
.catList li{display:flex;align-items:center;gap:11px;color:#fff;font-size:15px;font-weight:700;font-family:Arial,Helvetica,sans-serif;padding:11px 16px;border-radius:13px;cursor:pointer;white-space:nowrap}
.catList li:hover,.catList li:focus{background:rgba(255,255,255,.1);outline:none}
.catList li.active{color:var(--tw-accent)}
.catList .cdot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;opacity:.9}
.catList::-webkit-scrollbar{width:7px}
.catList::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:99px}
.catList::-webkit-scrollbar-track{background:transparent}
.status{position:absolute;left:50%;bottom:calc(145px + var(--sab));transform:translateX(-50%);background:rgba(0,0,0,.78);color:#fff;padding:10px 15px;border-radius:12px;font-size:13px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:6;white-space:nowrap}
.status.show{opacity:1}
.topbar{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;justify-content:space-between;padding:20px 26px;color:#fff;font-family:Arial,Helvetica,sans-serif}
.topbar>*{flex:1;min-width:0}
.clock{font-weight:800;font-size:18px;text-shadow:0 1px 5px rgba(0,0,0,.65);text-align:left}
.online{display:flex;align-items:center;justify-content:center;gap:9px;color:#fff;font-weight:800;font-size:17px;text-shadow:0 1px 5px rgba(0,0,0,.65)}
.topRight{display:flex;align-items:center;justify-content:flex-end;gap:20px;min-width:0}
.toplink{display:flex;align-items:center;gap:8px;color:#fff;font-weight:800;font-size:17px;text-decoration:none;text-shadow:0 1px 5px rgba(0,0,0,.65)}
.vidCta{border:1px solid var(--tw-accent);border-radius:99px;padding:7px 15px;background:rgba(18,18,18,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.vidCta:hover{border-color:var(--tw-accent);opacity:1}
.toplink:hover{opacity:.85}
.toplink .ytIcon{filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.toplink .ext{font-size:14px;opacity:.85}
.heroTitle{position:absolute;inset:0;z-index:3;display:grid;place-items:center;margin:0;padding:0 5vw;pointer-events:none;text-align:center;color:#fff;font-family:'Yatra One',Arial,Helvetica,sans-serif;font-weight:400;font-size:clamp(64px,15vw,200px);line-height:1.02;text-shadow:0 6px 34px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.35)}
.credit{position:absolute;left:22px;bottom:calc(16px + var(--sab));z-index:6;color:#fff;opacity:.75;font-size:13px;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.6)}

/* Song search (top center) */
.searchWrap{position:absolute;top:70px;left:50%;transform:translateX(-50%);z-index:7;width:min(430px,86vw)}
.searchBox{display:flex;align-items:center;background:rgba(18,18,18,.84);border:1px solid rgba(255,255,255,.35);border-radius:99px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:4px 6px 4px 20px}
#searchInput{flex:1;min-width:0;background:transparent;border:none;outline:none;color:#fff;font-size:15px;font-weight:600;font-family:Arial,Helvetica,sans-serif;padding:9px 0}
#searchInput::placeholder{color:rgba(255,255,255,.55)}
.searchBox:focus-within{border-color:var(--tw-accent)}
#searchBtn{border:none;background:rgba(255,255,255,.12);color:#fff;width:38px;height:38px;border-radius:50%;font-size:16px;cursor:pointer;flex:0 0 auto}
#searchBtn:hover{background:var(--tw-accent)}
.searchResults{display:none;position:absolute;top:calc(100% + 9px);left:0;right:0;margin:0;padding:7px;list-style:none;background:rgba(16,16,16,.95);border:1px solid rgba(255,255,255,.28);border-radius:20px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);max-height:46vh;overflow-y:auto;box-shadow:0 12px 34px rgba(0,0,0,.5)}
.searchResults.show{display:block}
.searchResults li{display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:13px;cursor:pointer;color:#fff}
.searchResults li:hover{background:rgba(255,255,255,.1)}
.searchResults img{width:52px;height:39px;object-fit:cover;border-radius:8px;flex:0 0 auto;background:#222}
.searchResults .rMeta{min-width:0}
.searchResults .rTitle{font-size:14px;font-weight:700;font-family:Arial,Helvetica,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.searchResults .rChan{font-size:12px;opacity:.65;font-family:Arial,Helvetica,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.searchResults li.hl{background:rgba(255,255,255,.14)}
.searchResults li.sugg .sIcon{opacity:.55;font-size:13px;flex:0 0 auto}
.searchResults li.sugg .sTerm{font-size:14px;font-weight:600;font-family:Arial,Helvetica,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.searchResults::-webkit-scrollbar{width:7px}
.searchResults::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:99px}

/* Recently played + similar songs panel */
.morePanel{display:none;position:absolute;left:50%;transform:translateX(-50%);bottom:calc(160px + var(--sab));width:min(980px,94vw);max-height:54vh;overflow-y:auto;background:rgba(14,14,14,.94);border:1px solid rgba(255,255,255,.25);border-radius:24px;padding:16px 20px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 14px 40px rgba(0,0,0,.5);z-index:9}
.morePanel.show{display:block}
.morePanel h4{margin:6px 0 10px;color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:14px;font-weight:800;letter-spacing:.4px;opacity:.9}
.carousel{display:flex;gap:13px;overflow-x:auto;padding:2px 2px 12px;scroll-snap-type:x mandatory}
.carousel::-webkit-scrollbar{height:7px}
.carousel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:99px}
.carousel::-webkit-scrollbar-track{background:transparent}
.card{flex:0 0 140px;scroll-snap-align:start;cursor:pointer;color:#fff;font-family:Arial,Helvetica,sans-serif}
.card img{width:140px;height:79px;object-fit:cover;border-radius:12px;background:#222;display:block}
.card:hover img{outline:2px solid var(--tw-accent)}
.card .cTitle{font-size:12px;font-weight:700;margin-top:6px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-height:30px}
.card .cChan{font-size:11px;opacity:.6;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rowEmpty{color:#fff;opacity:.6;font-size:13px;font-family:Arial,Helvetica,sans-serif;padding:8px 2px}
.artistRow{padding-bottom:10px}
.artistCard{flex:0 0 78px;text-align:center;cursor:pointer;color:#fff;font-family:Arial,Helvetica,sans-serif}
.aCircle{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-size:24px;font-weight:800;color:#171717;margin:0 auto;background:var(--tw-accent);border:2px solid rgba(255,255,255,.35)}
.artistCard:hover .aCircle{border-color:#fff}
.artistCard.activeA .aCircle{outline:3px solid #fff}
.aName{font-size:11px;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.9}
.installBtn{display:none;position:absolute;right:18px;bottom:calc(16px + var(--sab));z-index:7;align-items:center;gap:7px;background:rgba(18,18,18,.86);color:#fff;border:1px solid var(--tw-accent);border-radius:99px;padding:9px 16px;font-size:13px;font-weight:800;font-family:Arial,Helvetica,sans-serif;cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.installBtn.show{display:flex}
.iosSheet{display:none;position:absolute;inset:0;z-index:20;background:rgba(0,0,0,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);align-items:center;justify-content:center;padding:22px}
.iosSheet.show{display:flex}
.iosCard{position:relative;width:min(360px,92vw);background:rgba(18,18,18,.97);border:1px solid rgba(255,255,255,.3);border-radius:22px;padding:22px 20px 18px;color:#fff;font-family:Arial,Helvetica,sans-serif;box-shadow:0 18px 50px rgba(0,0,0,.6)}
.iosCard h3{margin:0 0 14px;font-size:18px}
.iosCard ol{margin:0;padding:0;list-style:none}
.iosCard li{display:flex;gap:11px;align-items:flex-start;font-size:14px;line-height:1.45;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.iosCard li:last-child{border-bottom:none}
.iosIco{flex:0 0 auto;font-size:17px}
.iosNote{margin:12px 0 0;font-size:13px;text-align:center;color:var(--tw-accent);font-weight:700}
.iosClose{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;font-size:14px;cursor:pointer}
.installBtn:hover{background:var(--tw-accent);color:#171717}
.cardLoad{flex:0 0 140px}
.cardLoad .shim{width:140px;height:79px;border-radius:12px;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.16),rgba(255,255,255,.06));background-size:200% 100%;animation:twShim 1.1s linear infinite}
@keyframes twShim{from{background-position:200% 0}to{background-position:-200% 0}}
.morePanel::-webkit-scrollbar{width:7px}
.morePanel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:99px}

/* Suggest a song (right of player on desktop) */
.sugWrap{position:absolute;right:18px;bottom:calc(196px + var(--sab));z-index:8}
@media(min-width:1200px){
  .sugWrap{right:auto;left:calc(50% + 424px);bottom:calc(26px + var(--sab));height:118px;display:flex;align-items:center}
}
.sugBtn{display:flex;align-items:center;gap:8px;background:rgba(18,18,18,.84);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:99px;padding:11px 18px;font-size:14px;font-weight:800;font-family:Arial,Helvetica,sans-serif;cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);white-space:nowrap}
.sugBtn:hover{background:rgba(30,30,30,.9)}
.sugPanel{display:none;position:absolute;bottom:calc(100% + 10px);right:0;width:min(300px,84vw);background:rgba(16,16,16,.95);border:1px solid rgba(255,255,255,.28);border-radius:18px;padding:12px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 12px 34px rgba(0,0,0,.5)}
@media(min-width:1200px){
  .sugPanel{right:auto;left:0;bottom:auto;top:50%;transform:translateY(-100%) translateY(-46px)}
}
.sugWrap.open .sugPanel{display:block}
#sugText{width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);border-radius:12px;color:#fff;font-size:14px;font-family:Arial,Helvetica,sans-serif;padding:10px;resize:none;outline:none}
#sugText:focus{border-color:var(--tw-accent)}
.sugSend{margin-top:9px;width:100%;border:none;border-radius:99px;background:var(--tw-accent);color:#171717;font-weight:800;font-size:14px;padding:10px;cursor:pointer}
.sugSend:hover{filter:brightness(1.08)}
.sugMsg{margin-top:8px;color:#fff;font-size:13px;font-family:Arial,Helvetica,sans-serif;opacity:.9;text-align:center;min-height:16px}
.online .dot{width:13px;height:13px;border-radius:50%;background:#2ee56b;box-shadow:0 0 0 0 rgba(46,229,107,.55);animation:twPulse 2s infinite}
@keyframes twPulse{0%{box-shadow:0 0 0 0 rgba(46,229,107,.55)}70%{box-shadow:0 0 0 11px rgba(46,229,107,0)}100%{box-shadow:0 0 0 0 rgba(46,229,107,0)}}
#splash{position:absolute;inset:0;background:#050505;display:grid;place-items:center;z-index:10;color:#fff;transition:opacity .45s}
#splash.hide{opacity:0;pointer-events:none}
.splashInner{text-align:center}
.splashInner h1{margin:0;font-size:42px}
.splashInner p{margin:8px 0 0;opacity:.75}
.splashInner .tagline{display:inline-block;margin-top:16px;padding:8px 18px;border:1px solid rgba(255,255,255,.35);border-radius:99px;font-size:13px;font-weight:700;letter-spacing:.6px;opacity:.9;font-family:Arial,Helvetica,sans-serif}

/* Hide anything WordPress plugins may print outside #app */
body > *:not(#app):not(#vpApp):not(#shApp):not(#rvBlog):not(script):not(style):not(link){display:none !important}
body #app,body #vpApp,body #shApp,body #rvBlog{display:block !important}

@media(max-width:1199px) and (min-width:651px){
  .installBtn{top:64px;right:20px;bottom:auto}
}
@media(max-width:650px){
  /* ==== Mobile music player — cleaner 2-row layout like the video player ====
     Row 1: album art + title/artist/time/progress
     Row 2: transport controls (prev | -10 | play | +10 | next | mute | mood)
     Buttons get real breathing room; nothing overlaps. */
  .player{height:auto;min-height:150px;padding:12px 14px;gap:12px;bottom:calc(12px + var(--sab));width:calc(100vw - 20px);border-radius:22px;flex-direction:column;align-items:stretch}
  .art{width:52px;height:52px;flex:0 0 auto;border-radius:12px}
  .meta{flex:1 1 auto;min-width:0}
  .title{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .artist{font-size:12px;margin-top:2px;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .time{font-size:11px;margin-top:3px;opacity:.7}
  .bar{margin-top:6px;height:5px}
  /* Wrap the art + meta into a compact first row */
  .player > .art, .player > .meta{display:inline-block}
  .player{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:10px;align-items:center}
  .player > .art{grid-column:1;grid-row:1}
  .player > .meta{grid-column:2;grid-row:1}
  .player > .controls{grid-column:1 / -1;grid-row:2}
  .controls{display:flex;justify-content:space-between;align-items:center;gap:4px;width:100%}
  .player button{width:44px;height:44px;font-size:16px;border-width:1px;flex:0 0 auto}
  .player button.play{width:54px;height:54px;font-size:20px}
  .seekBtn{padding:0 !important;min-width:44px !important;font-size:11.5px !important;font-weight:800 !important}
  #btnMute,#btnMore{box-shadow:0 0 8px -4px var(--tw-accent)}
  .status{bottom:calc(228px + var(--sab))}
  .catWrap{bottom:calc(178px + var(--sab));left:14px;transform:none}
  .catBtn{font-size:12px;padding:0 12px;height:38px}
  .catList li{font-size:13px;padding:9px 13px}
  /* Top bar: two-row, no overlap */
  .topbar{padding:10px 12px;flex-wrap:wrap;gap:8px 10px;align-items:flex-start}
  .clock{font-size:13px;flex:0 0 auto;order:1}
  .online{font-size:13px;flex:1 1 auto;order:2;justify-content:flex-end}
  .online .dot{width:9px;height:9px}
  .topRight{order:3;flex:1 1 100%;justify-content:flex-start;gap:8px;flex-wrap:wrap;margin-top:2px}
  .topRight .toplink,.topRight .vidCta{font-size:12.5px;font-weight:800;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.16);padding:6px 11px;border-radius:999px;gap:5px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  .toplink .ytIcon{width:15px;height:15px}
  .topRight .rvYtConnect{font-size:12px;padding:6px 11px}
  .topRight .rvYtConn{font-size:11.5px;padding:5px 10px}
  .heroTitle{font-size:clamp(44px,17vw,110px)}
  .credit{display:none} /* Hidden on mobile — no vertical room; still visible on desktop */
  .searchWrap{top:118px}
  #searchInput{font-size:13px;padding:8px 0}
  .sugWrap{bottom:calc(178px + var(--sab));right:58px}
  .sugBtn{font-size:0;width:38px;height:38px;padding:0;justify-content:center}
  .sugBtn::before{content:'\2709';font-size:16px}
  .sugPanel{right:0}
  .morePanel{bottom:calc(178px + var(--sab));padding:12px 14px;max-height:52vh}
  .card{flex-basis:118px}
  .artistCard{flex-basis:66px}
  .aCircle{width:50px;height:50px;font-size:20px}
  .aName{font-size:10px}
  .installBtn{right:14px;bottom:calc(178px + var(--sab));top:auto;font-size:0;width:38px;height:38px;padding:0;justify-content:center}
  .installBtn::before{content:'\1F4F2';font-size:17px}
  .card img{width:118px;height:66px}
  .cardLoad{flex-basis:118px}
  .cardLoad .shim{width:118px;height:66px}

  .splashInner h1{font-size:32px}
}


/* ---- Video page (/video) ---- */
.vpApp{position:fixed;inset:0;overflow-y:auto;background:#0a0a0a;color:#fff;font-family:Arial,Helvetica,sans-serif;padding:0 22px calc(40px + var(--sab))}
.vpTop{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 0 8px}
.vpBack{color:#fff;text-decoration:none;font-weight:800;font-size:15px;border:1px solid rgba(255,255,255,.35);border-radius:99px;padding:8px 16px;background:rgba(18,18,18,.7)}
.vpBack:hover{border-color:var(--tw-accent)}
.vpBrand{font-weight:800;font-size:16px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vpSpacer{width:86px}
.vpPlayerWrap{max-width:920px;margin:14px auto 6px}
.vpFrame{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.25);box-shadow:0 14px 40px rgba(0,0,0,.5)}
.vpFrame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vpNow{margin-top:10px;font-weight:800;font-size:16px}
.vpSearch{display:flex;align-items:center;max-width:560px;margin:18px auto;background:rgba(18,18,18,.85);border:1px solid rgba(255,255,255,.35);border-radius:99px;padding:4px 6px 4px 20px}
.vpSearch input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:#fff;font-size:15px;font-weight:600;padding:10px 0}
.vpSearch input::placeholder{color:rgba(255,255,255,.55)}
.vpSearch:focus-within{border-color:var(--tw-accent)}
.vpSearch button{border:none;background:rgba(255,255,255,.12);color:#fff;width:40px;height:40px;border-radius:50%;font-size:16px;cursor:pointer;flex:0 0 auto}
.vpSearch button:hover{background:var(--tw-accent)}
.vpHead{max-width:1100px;margin:16px auto 12px;font-size:15px;font-weight:800;opacity:.9}
.vpGrid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.vpCard{cursor:pointer;transition:transform .18s ease}
.vpCardThumb{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#1a1a1a}
.vpCard img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;background:#1a1a1a;display:block}
.vpCardThumb img{border-radius:14px;transition:transform .3s ease}
.vpCard:hover .vpCardThumb img,.vpCard:hover img{outline:2px solid var(--tw-accent)}
/* v2.29.1 YouTube-style duration badge (bottom-right of thumbnail) */
.vpDuration{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.85);color:#fff;font-size:11px;font-weight:600;letter-spacing:.2px;padding:2px 6px;border-radius:4px;line-height:1.3;z-index:2;pointer-events:none;font-variant-numeric:tabular-nums}
/* Meta line: "1.2M views • 3 days ago" — YouTube's third card line */
.vpMeta{font-size:11.5px;color:rgba(255,255,255,.55);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
/* Hover preview — desktop only. Iframe overlays the thumbnail after 700ms hover.
   pointer-events: none on the iframe so the whole card still receives the click
   (thumbnail image beneath stays interactive to the wrapper's click handler). */
.vpHoverPreview{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:14px;background:#000;z-index:4;pointer-events:none}
.vpCard.vpPreviewing .vpDuration,.vpCard.vpPreviewing .vpNewBadge{opacity:0;transition:opacity .2s}
/* v2.29.0 NEW badge — shown on cards for uploads <14 days old that user hasn't watched */
.vpNewBadge{position:absolute;top:8px;left:8px;background:linear-gradient(135deg,#e50914,#b3060e);color:#fff;font-size:10px;font-weight:900;letter-spacing:.6px;padding:3px 8px;border-radius:6px;text-transform:uppercase;box-shadow:0 2px 6px rgba(229,9,20,.55);border:1px solid rgba(255,255,255,.2);text-shadow:0 1px 2px rgba(0,0,0,.4);z-index:2;pointer-events:none;line-height:1}
.vpPThumb{position:relative;display:block}
.vpPThumb .vpNewBadge{top:6px;left:6px;font-size:9px;padding:2px 6px;border-radius:5px}

/* v2.29.1 Last Watched horizontal scroll row */
.vpLastWatchedSection{margin-top:16px}
.vpLastGrid{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding:4px 2px 12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.vpLastGrid::-webkit-scrollbar{height:6px}
.vpLastGrid::-webkit-scrollbar-thumb{background:rgba(229,9,20,.4);border-radius:3px}
.vpLastCard{flex:0 0 240px;scroll-snap-align:start;cursor:pointer}
.vpLastCard .vpCardThumb{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#1a1a1a}
.vpLastCard .vpCardThumb img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.vpLastCard:hover .vpCardThumb img{outline:2px solid var(--tw-accent)}
/* red progress bar overlay on last-watched thumbnails — mimics YouTube */
.vpProgress{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(0,0,0,.5);z-index:1}
.vpProgressFill{height:100%;background:#e50914;transition:width .3s ease}
.vpLastRemove{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.7);color:#fff;border:none;width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:11px;display:grid;place-items:center;padding:0;line-height:1;z-index:2;opacity:0;transition:opacity .18s,background .18s}
.vpLastCard:hover .vpLastRemove,.vpLastRemove:focus{opacity:1}
.vpLastRemove:hover{background:#e50914}
.vpLastCard .vpTitle{font-size:13px;font-weight:700;margin-top:8px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vpLastCard .vpChan{font-size:11px;opacity:.7;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vpLastClearBtn{background:rgba(255,255,255,.06);color:#ddd;border:1px solid rgba(255,255,255,.15);font-size:11px;padding:5px 12px;border-radius:999px;cursor:pointer;transition:background .18s}
.vpLastClearBtn:hover{background:rgba(229,9,20,.2);border-color:rgba(229,9,20,.4);color:#fff}
@media(max-width:640px){
  .vpLastCard{flex-basis:200px}
  .vpLastCard .vpTitle{font-size:12px}
}

/* v2.29.3 Like / Dislike standalone section (moved OUT of stats card) — own card with explainer */
.vpLikeSection{max-width:720px;margin:8px auto 14px;padding:14px 16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px}
.vpLikeHelp{margin:0 0 10px;font-size:13px;line-height:1.4;color:rgba(255,255,255,.75);text-align:center}
@media(max-width:640px){
  .vpLikeSection{margin:6px 12px 12px;padding:12px 14px}
  .vpLikeHelp{font-size:12px;margin-bottom:8px}
}

/* v2.29.1 Like / Dislike buttons — now inside .vpLikeSection instead of the stats card */
.vpLikeRow{display:flex;gap:8px}
.vpLikeBtn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.15);font-weight:700;font-size:13px;padding:8px 14px;border-radius:999px;cursor:pointer;transition:background .18s,border-color .18s,transform .12s;-webkit-tap-highlight-color:transparent}
.vpLikeBtn:hover{background:rgba(255,255,255,.12)}
.vpLikeBtn:active{transform:scale(.97)}
.vpLikeIcon{font-size:16px;line-height:1}
.vpLikeBtn.active{background:linear-gradient(135deg,rgba(76,175,80,.3),rgba(76,175,80,.15));border-color:rgba(76,175,80,.6);color:#a5e5a7}
.vpDislikeBtn.active{background:linear-gradient(135deg,rgba(229,9,20,.3),rgba(229,9,20,.15));border-color:rgba(229,9,20,.6);color:#ffb3b7}
@media(max-width:640px){
  .vpLikeBtn{font-size:12px;padding:7px 10px}
}

.vpTitle{font-size:14px;font-weight:700;margin-top:8px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vpCard .vpChan{font-size:12px;opacity:.6;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vpNote,.vpEmpty{max-width:560px;margin:20px auto;text-align:center;opacity:.7;font-size:14px}
.vpSection{max-width:1100px;margin:0 auto}
.vpSearchWrap{position:relative;max-width:560px;margin:18px auto}
.vpSearchWrap .vpSearch{margin:0}
.vpSug{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:9;margin:0;padding:7px;list-style:none;background:rgba(16,16,16,.96);border:1px solid rgba(255,255,255,.28);border-radius:18px;max-height:44vh;overflow-y:auto;box-shadow:0 12px 34px rgba(0,0,0,.5)}
.vpSug.show{display:block}
.vpSug li{padding:10px 14px;border-radius:11px;cursor:pointer;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vpSug li:hover{background:rgba(255,255,255,.1)}
.vpChips{max-width:1100px;margin:14px auto 4px;display:flex;gap:9px;overflow-x:auto;padding-bottom:6px}
.vpChips::-webkit-scrollbar{height:6px}
.vpChips::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:99px}
.vpChip{flex:0 0 auto;border:1px solid rgba(255,255,255,.32);background:rgba(18,18,18,.75);color:#fff;border-radius:99px;padding:8px 15px;font-size:13px;font-weight:700;font-family:Arial,Helvetica,sans-serif;cursor:pointer;white-space:nowrap}
.vpChip:hover{border-color:var(--tw-accent)}
.vpChip.on{background:var(--tw-accent);color:#171717;border-color:var(--tw-accent)}
.vpClose{display:inline-flex;align-items:center;gap:7px;margin:0 0 10px;border:1px solid rgba(255,255,255,.35);background:rgba(18,18,18,.8);color:#fff;border-radius:99px;padding:8px 16px;font-size:14px;font-weight:800;font-family:Arial,Helvetica,sans-serif;cursor:pointer}
.vpClose:hover{border-color:var(--tw-accent)}
@media(max-width:650px){
  .vpApp{padding:0 14px calc(30px + var(--sab))}
  .vpBrand{font-size:13px}
  .vpBack{font-size:13px;padding:7px 13px}
  .vpSpacer{width:0}
  .vpGrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .vpTitle{font-size:12px}
}


/* ---- Shorts page (/shorts) — full-screen vertical feed ---- */
.shApp{position:fixed;inset:0;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif;overflow:hidden}
/* Top bar floats over the video so shorts are truly full-bleed. */
.shTop{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(12px + var(--sat)) 16px 12px;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0))}
.shTop .vpBack,.shTop .vpBrand{text-shadow:0 1px 6px rgba(0,0,0,.7)}
.shIconBtn{border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.35);color:#fff;width:40px;height:40px;border-radius:50%;font-size:16px;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.shIconBtn:hover{border-color:var(--tw-accent)}
.shSearchWrap{position:absolute;top:calc(58px + var(--sat));left:0;right:0;z-index:20;margin:0 auto;width:min(560px,92%)}
/* Channel badge on Shorts: float top-area, don't push the feed. */
.shChanRow{position:absolute;top:calc(60px + var(--sat));left:0;right:0;z-index:19;pointer-events:none}
.shChanRow .rvChanBadge{pointer-events:auto}

.shFeed{position:absolute;inset:0;overflow-y:auto;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.shFeed::-webkit-scrollbar{width:0;height:0}

/* Each short = one full viewport, snap-locked. */
.shCard{position:relative;height:100vh;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;background:#000;overflow:hidden}
.shStage{position:absolute;inset:0;cursor:pointer;background:#000}
.shThumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Host holds the iframe; scaled to cover so the 16:9 embed fills a 9:16 screen. */
.shHost{position:absolute;inset:0;overflow:hidden}
.shHost iframe{position:absolute;top:50%;left:50%;width:100%;height:100%;transform:translate(-50%,-50%);border:0}
@media (max-aspect-ratio:9/16){
  /* Portrait screens: scale the 16:9 player up so it covers height-wise. */
  .shHost iframe{width:calc(100vh * 9 / 16 * 16 / 9);height:100vh;height:100dvh;min-width:100vw}
}
.shPlay{position:absolute;inset:0;display:grid;place-items:center;font-size:60px;color:rgba(255,255,255,.92);text-shadow:0 4px 22px rgba(0,0,0,.85);pointer-events:none;transition:opacity .2s}
.shCard.on .shPlay{opacity:0}
.shCard.on.paused .shPlay{opacity:1}
.shMuteHint{position:absolute;top:calc(70px + var(--sat));left:50%;transform:translateX(-50%);z-index:4;background:rgba(0,0,0,.55);color:#fff;font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none;opacity:0;transition:opacity .25s}
.shCard.on.muted .shMuteHint{opacity:1}

/* Bottom gradient scrim + overlaid title/channel. */
.shScrim{position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.72));pointer-events:none;z-index:2}
.shMeta{position:absolute;left:0;right:0;bottom:calc(22px + var(--sab));z-index:3;padding:0 18px;pointer-events:none}
.shTitle{font-size:16px;font-weight:700;line-height:1.34;text-shadow:0 1px 8px rgba(0,0,0,.85);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.shChan{font-size:13.5px;font-weight:600;opacity:.92;margin-top:6px;text-shadow:0 1px 8px rgba(0,0,0,.85)}

/* Desktop: tall phone-like frame, centered on a dim backdrop. */
@media(min-width:900px){
  .shFeed{scroll-snap-type:y mandatory}
  .shCard{display:flex;align-items:center;justify-content:center;background:#050505}
  .shStage{position:relative;inset:auto;width:calc((100dvh - 24px) * 9 / 16);height:calc(100dvh - 24px);max-width:460px;border-radius:20px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.1)}
  .shHost iframe{width:100%;height:100%;min-width:0}
  .shScrim{border-radius:0 0 20px 20px}
  .shMeta{bottom:20px}
}

@media(max-width:650px){
  .shTop{padding:calc(10px + var(--sat)) 12px 10px}
}

/* ---- Blog pages (posts / pages / archives) ---- */
.rvBlog{position:fixed;inset:0;overflow-y:auto;background:#0a0a0a;color:#eee;font-family:Arial,Helvetica,sans-serif;padding:0 22px calc(50px + var(--sab))}
.rvBlog .vpTop{max-width:820px;margin:0 auto}
.rvArticle{max-width:760px;margin:18px auto 0}
.rvTitle{font-size:34px;line-height:1.2;font-weight:800;margin:8px 0 10px;color:#fff}
.rvMeta{font-size:13px;opacity:.6;margin-bottom:18px}
.rvThumb img{width:100%;height:auto;border-radius:16px;margin:6px 0 18px}
.rvContent{font-size:17px;line-height:1.75;color:#ddd}
.rvContent h2{font-size:24px;margin:28px 0 10px;color:#fff}
.rvContent h3{font-size:20px;margin:24px 0 8px;color:#fff}
.rvContent p{margin:0 0 16px}
.rvContent a{color:var(--tw-accent)}
.rvContent img{max-width:100%;height:auto;border-radius:12px}
.rvContent ul,.rvContent ol{margin:0 0 16px 22px}
.rvContent blockquote{border-left:3px solid var(--tw-accent);margin:0 0 16px;padding:6px 0 6px 16px;opacity:.85}
.rvNav{max-width:760px;margin:30px auto 0;display:flex;justify-content:space-between;gap:14px;font-size:14px}
.rvNav a{color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.3);border-radius:99px;padding:9px 16px}
.rvNav a:hover{border-color:var(--tw-accent)}
.rvList{max-width:760px;margin:20px auto 0;display:grid;gap:16px}
.rvCard{display:block;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:18px 20px;color:#eee;text-decoration:none}
.rvCard:hover{border-color:var(--tw-accent)}
.rvCard h2{margin:0 0 6px;font-size:20px;color:#fff}
.rvCard p{margin:8px 0 0;font-size:14px;opacity:.75;line-height:1.55}
.rvBlog .page-numbers{color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.3);border-radius:10px;padding:7px 12px;margin:20px 4px 0;display:inline-block}
.rvBlog .page-numbers.current{background:var(--tw-accent);color:#171717;border-color:var(--tw-accent)}
@media(max-width:650px){
  .rvBlog{padding:0 14px calc(40px + var(--sab))}
  .rvTitle{font-size:26px}
  .rvContent{font-size:16px}
}

/* ---- "Our Channel" badge (Home / Video / Shorts) ---- */
.rvChanBadge{display:inline-flex;align-items:center;gap:11px;padding:8px 8px 8px 10px;border-radius:999px;background:rgba(18,18,20,.72);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-decoration:none;color:#fff;max-width:100%;box-shadow:0 6px 22px rgba(0,0,0,.32);transition:border-color .18s,transform .18s}
.rvChanBadge:hover{border-color:var(--tw-accent);transform:translateY(-1px)}
.rvChanAvatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:#333}
.rvChanAvatarFallback{display:grid;place-items:center;font-size:16px;color:#fff;background:linear-gradient(135deg,#ff0033,#b00020)}
.rvChanText{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.rvChanName{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38vw}
.rvChanSubs{font-size:12px;opacity:.62}
.rvChanCta{margin-left:6px;flex:0 0 auto;font-size:12.5px;font-weight:800;letter-spacing:.02em;color:#fff;background:#ff0033;padding:7px 14px;border-radius:999px}
.rvChanBadge:hover .rvChanCta{background:#ff1a47}

/* Home: sit above the credit line, bottom-left, out of the player's way */
#app .rvChanBadge{position:fixed;left:16px;bottom:calc(54px + var(--sab));z-index:6}
@media(max-width:900px){#app .rvChanBadge{position:static;margin:12px auto 0;display:inline-flex}#app:has(.searchWrap) .rvChanBadge{display:none}}

/* Video + Shorts: centered row under the top bar */
.rvChanRow{display:flex;justify-content:center;margin:4px auto 2px}
.shChanRow{margin-bottom:8px}
@media(max-width:650px){
  .rvChanName{max-width:44vw}
  .rvChanCta{padding:6px 12px}
}

/* ---- Connect YouTube (OAuth) ---- */
/* Subtle style — must NOT look like a login/signup button (Google flags that) */
.rvYtConnect{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.7);font-size:12px;font-weight:600;text-decoration:none;border:1px solid rgba(255,255,255,.15);transition:background .18s;white-space:nowrap}
.rvYtConnect:hover{background:rgba(255,255,255,.18);color:#fff}
.rvYtConnect svg{opacity:.6}
.rvYtConn{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(18,18,20,.72);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:12.5px;font-weight:600;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);white-space:nowrap}
.rvYtDot{width:8px;height:8px;border-radius:50%;background:#25d366;box-shadow:0 0 8px #25d366}
.rvYtDisc{color:#ff6b81;text-decoration:none;font-weight:700;margin-left:2px}
.rvYtDisc:hover{text-decoration:underline}
/* Homepage: sits in the top-right link cluster */
#app .rvChanRow{display:none}
.rvChanRow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* Status toast for OAuth result */
.rvYtToast{position:fixed;left:50%;bottom:calc(76px + var(--sab));transform:translateX(-50%);z-index:60;background:rgba(20,20,22,.92);color:#fff;font-size:13.5px;font-weight:600;padding:11px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.16);box-shadow:0 10px 34px rgba(0,0,0,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .3s;max-width:88vw;text-align:center}
.rvYtToast.show{opacity:1}
@media(max-width:900px){
  .rvYtConnect span:not(.rvYtDot),.rvYtConn{font-size:11px}
  .rvYtConnect{padding:5px 10px;font-size:11px}
}
/* --- App info footer: ALWAYS VISIBLE ---
   Google OAuth verification requires: app name, purpose, data usage
   explanation, privacy policy link — all visible without login.
   Styled as a subtle dark footer that doesn't disrupt the player. */
.rvAppInfo{display:block;background:#0a0a0a;color:rgba(255,255,255,.45);padding:30px 20px;max-width:700px;margin:20px auto 0;line-height:1.6;font-size:12px;border-top:1px solid rgba(255,255,255,.06)}
.rvAppInfo h2{color:rgba(255,255,255,.55);font-size:14px;margin-bottom:8px;font-weight:700}
.rvAppInfo h3{color:rgba(255,255,255,.5);font-size:12px;margin:14px 0 6px;font-weight:600}
.rvAppInfo ul{margin:0 0 10px 16px}
.rvAppInfo li{margin-bottom:3px}
.rvAppInfo a{color:#4fc3f7;text-decoration:underline}
.rvAppInfo p{margin-bottom:8px}
/* Privacy policy footer link — always visible */
.rvAppFooter{text-align:center;padding:10px 0;margin-top:8px}
.rvAppFooter a{color:rgba(255,255,255,.35);font-size:11px;text-decoration:none}
.rvAppFooter a:hover{color:rgba(255,255,255,.6)}
/* ---- YouTube-style Shorts shelf on Video page ---- */
.vpShortsRow{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding:8px 0 16px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.vpShortsRow::-webkit-scrollbar{display:none}
.vpShortCard{flex:0 0 155px;aspect-ratio:9/16;border-radius:14px;overflow:hidden;position:relative;cursor:pointer;scroll-snap-align:start;background:#111;transition:transform .15s}
.vpShortCard:hover{transform:scale(1.04)}
.vpShortCard img{width:100%;height:100%;object-fit:cover}
.vpShortOverlay{position:absolute;bottom:0;left:0;right:0;padding:10px 10px 12px;background:linear-gradient(transparent,rgba(0,0,0,.85));pointer-events:none}
.vpShortTitle{font-size:12px;font-weight:700;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}
.vpShortChan{font-size:10px;color:rgba(255,255,255,.6);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:600px){
  .vpShortCard{flex:0 0 130px}
}

/* --- Extra-narrow phones: keep the player controls comfortable --- */
@media(max-width:390px){
  /* Very small phones — trim padding/sizes, keep the 2-row grid */
  .player{padding:10px 12px;column-gap:10px;row-gap:8px;min-height:138px}
  .art{width:44px;height:44px}
  .title{font-size:13px}
  .artist{font-size:11px}
  .time{font-size:10.5px}
  .controls{gap:3px}
  .player button{width:40px;height:40px;font-size:14.5px}
  .player button.play{width:48px;height:48px;font-size:18px}
  .seekBtn{min-width:40px !important;font-size:10.5px !important}
  .catWrap,.sugWrap,.installBtn{bottom:calc(168px + var(--sab))}
  .status{bottom:calc(218px + var(--sab))}
  .morePanel{bottom:calc(168px + var(--sab))}
}

/* ---- Video page: stats + channel card ---- */
.vpStats{max-width:820px;margin:10px auto 0;display:flex;flex-direction:column;gap:12px}
.vpStatRow{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.vpStat{font-size:13.5px;color:#cfcfcf;font-weight:600;white-space:nowrap}
.vpChan{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);text-decoration:none;color:#fff;transition:border-color .18s}
.vpChan:hover{border-color:var(--tw-accent)}
.vpChanAv{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:#333}
.vpChanMeta{display:flex;flex-direction:column;line-height:1.3;min-width:0;flex:1 1 auto}
.vpChanName{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vpChanSubs{font-size:12.5px;opacity:.62}
.vpChanGo{flex:0 0 auto;font-size:12.5px;font-weight:800;color:#fff;background:#ff0033;padding:8px 14px;border-radius:999px}
.vpChan:hover .vpChanGo{background:#ff1a47}
@media(max-width:650px){
  .vpStats{padding:0 4px}
  .vpStat{font-size:12.5px}
  .vpChanName{font-size:14px}
  .vpChanGo{padding:7px 12px;font-size:12px}
}


/* Video stats channel card stays non-clickable (info only) */
.vpChan{cursor:default}
.vpChan:hover{border-color:rgba(255,255,255,.12)}

/* ---- Video: "More videos" strip below the player (our own suggestions) ---- */
.vpMore{max-width:900px;margin:16px auto 0;padding:0 4px}
.vpMoreHead{font-size:16px;font-weight:800;color:#fff;margin:0 0 12px}
.vpMoreGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.vpPCard{cursor:pointer;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);transition:border-color .15s,transform .15s}
.vpPCard:hover{border-color:var(--tw-accent);transform:translateY(-2px)}
.vpPCard img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.vpPTitle{font-size:12.5px;line-height:1.35;color:#eee;padding:8px 9px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:650px){
  .vpMore{padding:0 12px}
  .vpMoreGrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
  .vpMoreHead{font-size:14.5px}
  .vpPTitle{font-size:11.5px}
}

/* ---- Video: paste a YouTube link to play on-site ---- */
/* v2.29.5: Music homepage paste box — same visual as .vpPasteWrap on /video */
.pasteWrap{max-width:560px;margin:10px auto 0;display:flex;gap:8px;align-items:center;padding:0 16px}
.pasteInput{flex:1 1 auto;min-width:0;padding:11px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.35);color:#fff;font-size:13.5px;outline:none}
.pasteInput:focus{border-color:var(--tw-accent)}
.pasteInput::placeholder{color:rgba(255,255,255,.5)}
.pasteBtn{flex:0 0 auto;padding:11px 20px;border-radius:999px;border:none;background:#ff0033;color:#fff;font-size:13.5px;font-weight:800;cursor:pointer;transition:background .18s}
.pasteBtn:hover{background:#ff1a47}
.pasteErr{max-width:560px;margin:8px auto 0;padding:8px 14px;border-radius:12px;background:rgba(229,9,20,.15);border:1px solid rgba(229,9,20,.4);color:#ffb3b7;font-size:12.5px;text-align:center}
@media(max-width:640px){
  .pasteWrap{padding:0 12px}
  .pasteInput{font-size:13px;padding:10px 14px}
  .pasteBtn{padding:10px 16px;font-size:13px}
}

/* v2.29.9: enhanced desktop-first paste bar — wider, prettier, focus glow, hover lift */
.vpPasteWrap{max-width:720px;margin:14px auto 4px;display:flex;gap:10px;align-items:center;padding:0 16px;position:relative}
.vpPasteInput{flex:1 1 auto;min-width:0;padding:14px 20px 14px 46px;border-radius:999px;border:1.5px solid rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.35));color:#fff;font-size:14px;outline:none;transition:border-color .2s ease,box-shadow .2s ease,transform .12s ease;background-clip:padding-box}
.vpPasteInput::placeholder{color:rgba(255,255,255,.45);font-weight:500}
.vpPasteInput:hover{border-color:rgba(255,255,255,.28)}
.vpPasteInput:focus{border-color:#ff0033;box-shadow:0 0 0 3px rgba(255,0,51,.15),0 8px 28px -8px rgba(255,0,51,.35)}
/* YouTube-play icon inside the input's left padding zone */
.vpPasteWrap::before{content:'';position:absolute;left:32px;top:50%;transform:translateY(-50%);width:22px;height:16px;background:#ff0033;border-radius:5px;pointer-events:none;z-index:1}
.vpPasteWrap::after{content:'';position:absolute;left:41px;top:50%;transform:translateY(-50%);width:0;height:0;border-left:6px solid #fff;border-top:4px solid transparent;border-bottom:4px solid transparent;pointer-events:none;z-index:2}
.vpPasteBtn{flex:0 0 auto;padding:14px 26px;border-radius:999px;border:none;background:linear-gradient(180deg,#ff1a47,#ff0033);color:#fff;font-size:14px;font-weight:800;cursor:pointer;transition:background .18s,transform .12s,box-shadow .18s;box-shadow:0 4px 14px -4px rgba(255,0,51,.5);letter-spacing:.2px}
.vpPasteBtn:hover{background:linear-gradient(180deg,#ff2952,#ff0f3d);transform:translateY(-1px);box-shadow:0 6px 20px -4px rgba(255,0,51,.6)}
.vpPasteBtn:active{transform:translateY(0)}
.vpPasteErr{max-width:560px;margin:8px auto 0;padding:9px 14px;border-radius:12px;background:rgba(255,60,60,.12);border:1px solid rgba(255,60,60,.3);color:#ff9b9b;font-size:12.5px;text-align:center}
@media(max-width:650px){
  .vpPasteWrap{padding:0 12px;gap:8px}
  .vpPasteInput{font-size:13px;padding:11px 16px 11px 40px}
  .vpPasteBtn{padding:11px 18px;font-size:13px}
  .vpPasteWrap::before{left:26px;width:18px;height:13px}
  .vpPasteWrap::after{left:33px;border-left-width:5px;border-top-width:3px;border-bottom-width:3px}
}

/* ---- Video: Aapke Liye header + Mood button ---- */
.vpForTop{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.vpMoodBtn{flex:0 0 auto;padding:8px 16px;border-radius:999px;border:1px solid rgba(79,195,247,.35);background:rgba(79,195,247,.1);color:#4fc3f7;font-size:13px;font-weight:700;cursor:pointer;transition:background .18s}
.vpMoodBtn:hover{background:rgba(79,195,247,.2)}

/* ---- Video: "Aur Suggestions" feed button ---- */
.vpMoreWrap{text-align:center;padding:14px 0 4px}
.vpForMoreBtn{padding:11px 26px;border-radius:999px;border:1px solid rgba(79,195,247,.4);background:rgba(79,195,247,.1);color:#4fc3f7;font-size:14px;font-weight:700;cursor:pointer;transition:background .18s,transform .15s}
.vpForMoreBtn:hover{background:rgba(79,195,247,.2);transform:translateY(-1px)}

/* ---- Video: "Feed Refresh" button ---- */
.vpForRefreshBtn{margin-left:10px;padding:11px 22px;border-radius:999px;border:1px solid rgba(255,168,60,.4);background:rgba(255,168,60,.1);color:#ffa83c;font-size:13.5px;font-weight:700;cursor:pointer;transition:background .18s,transform .15s}
.vpForRefreshBtn:hover{background:rgba(255,168,60,.2);transform:translateY(-1px)}
@media(max-width:520px){.vpForRefreshBtn{margin:8px 0 0;display:block;width:100%;font-size:12.5px;padding:10px 18px}.vpMoreWrap{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 12px 4px}}

/* ---- Music player: +10s / -10s seek buttons ---- */
.seekBtn{padding:0 10px !important;min-width:52px !important;font-size:12px !important;font-weight:800 !important;letter-spacing:.3px}
@media(max-width:520px){.seekBtn{min-width:44px !important;font-size:11px !important;padding:0 6px !important}}

/* ---- Pocket Mode: collapsible right-edge sidebar ----
   Collapsed = thin 🔒 tab on right edge, vertically centered.
   Expanded  = panel slides out with Pocket Mode button + ✕ close.
   Same behaviour on desktop and mobile — no more topbar or above-player overlap. */
/* Sidebar container: only sized by the toggle tab (panel is absolute, so it
   doesn't push the toggle around). Anchored to viewport right edge. */
.lockSidebar{position:fixed;top:50%;right:0;transform:translateY(-50%);z-index:55}
.lockToggle{display:block;width:36px;height:74px;background:rgba(20,20,20,.85);color:#ffd700;border:1px solid rgba(255,215,0,.4);border-right:none;border-radius:12px 0 0 12px;cursor:pointer;font-size:18px;padding:0;line-height:1;box-shadow:-4px 0 14px rgba(0,0,0,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .18s,transform .15s}
.lockToggle:hover{background:rgba(255,215,0,.15);transform:translateX(-2px)}
/* Panel: absolute, right-anchored, initially off-screen to the right; slides
   in over the toggle on expand. Since it's out of flow it doesn't stretch
   the sidebar container's width. */
.lockPanel{position:absolute;top:50%;right:0;display:flex;align-items:center;gap:10px;background:rgba(20,20,20,.92);padding:10px 14px;border:1px solid rgba(255,215,0,.4);border-right:none;border-radius:14px 0 0 14px;box-shadow:-6px 0 20px rgba(0,0,0,.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transform:translate(calc(100% + 40px),-50%);opacity:0;pointer-events:none;transition:transform .28s ease,opacity .2s ease;white-space:nowrap}
.lockSidebar.expanded .lockPanel{transform:translate(0,-50%);opacity:1;pointer-events:auto}
.lockSidebar.expanded .lockToggle{opacity:0;pointer-events:none;transform:translateX(20px)}
.lockBtn{padding:8px 14px;border-radius:12px;border:1px solid rgba(255,215,0,.4);background:rgba(20,20,20,.72);color:#ffd700;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;line-height:1.15;gap:2px;transition:background .18s,transform .15s}
.lockBtn:hover{background:rgba(255,215,0,.15);transform:translateY(-1px)}
.lockBtn .lockBtnMain{font-size:13px;font-weight:800;letter-spacing:.2px;white-space:nowrap}
.lockBtn .lockBtnSub{font-size:10.5px;font-weight:500;opacity:.75;white-space:nowrap}
.lockClose{width:32px;height:32px;background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:50%;cursor:pointer;font-size:14px;display:grid;place-items:center;padding:0;line-height:1;transition:background .18s}
.lockClose:hover{background:rgba(255,255,255,.16)}
@media(max-width:640px){
  /* Slightly smaller sidebar tab on phones so it doesn't dominate the edge */
  .lockToggle{width:32px;height:64px;font-size:16px}
  .lockPanel{padding:9px 12px;gap:8px}
  .lockBtn .lockBtnMain{font-size:12.5px}
  .lockBtn .lockBtnSub{font-size:10px}
}

/* ---- Pocket Mode teach-prompt (shown after phone-lock detection) ---- */
.pocketPrompt{position:fixed;left:50%;bottom:calc(24px + var(--sab));transform:translate(-50%,20px);z-index:70;max-width:min(420px,calc(100vw - 32px));opacity:0;pointer-events:none;transition:transform .3s ease,opacity .3s ease}
.pocketPrompt[hidden]{display:none !important}
.pocketPrompt.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.pocketPromptCard{position:relative;background:rgba(20,20,20,.96);border:1px solid rgba(255,215,0,.45);border-radius:16px;padding:18px 20px 16px;color:#fff;box-shadow:0 12px 40px rgba(0,0,0,.5);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.pocketPromptX{position:absolute;top:8px;right:8px;background:transparent;border:none;color:rgba(255,255,255,.6);font-size:16px;cursor:pointer;padding:4px 8px;border-radius:6px;line-height:1}
.pocketPromptX:hover{color:#fff;background:rgba(255,255,255,.1)}
.pocketPromptIcon{font-size:28px;margin-bottom:6px}
.pocketPromptTitle{font-size:15px;font-weight:800;color:#ffd700;margin-bottom:6px;letter-spacing:.2px}
.pocketPromptBody{font-size:13px;color:rgba(255,255,255,.82);line-height:1.5;margin-bottom:14px}
.pocketPromptActions{display:flex;gap:8px;flex-wrap:wrap}
.pocketPromptEnable{flex:1 1 auto;background:linear-gradient(180deg,#ffd700,#ffb700);color:#000;border:none;padding:10px 14px;border-radius:10px;font-weight:800;font-size:13px;cursor:pointer;letter-spacing:.2px;transition:transform .12s ease,box-shadow .18s}
.pocketPromptEnable:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(255,215,0,.4)}
.pocketPromptEnable:active{transform:translateY(0)}
.pocketPromptDismiss{background:rgba(255,255,255,.08);color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.15);padding:10px 14px;border-radius:10px;font-weight:600;font-size:13px;cursor:pointer;transition:background .18s}
.pocketPromptDismiss:hover{background:rgba(255,255,255,.14)}
/* Attention shake on the sidebar toggle when the prompt appears */
.lockSidebar.attention-shake .lockToggle{animation:sidebarAttentionShake .8s ease-in-out;box-shadow:0 0 24px rgba(255,215,0,.6),-4px 0 14px rgba(0,0,0,.35)}
@keyframes sidebarAttentionShake{
  0%,100%{transform:translateX(0)}
  10%,30%,50%,70%,90%{transform:translateX(-4px)}
  20%,40%,60%,80%{transform:translateX(4px)}
}
@media(max-width:640px){
  .pocketPrompt{bottom:calc(178px + var(--sab));left:14px;right:14px;transform:translateY(20px);max-width:none}
  .pocketPrompt.show{transform:translateY(0)}
  .pocketPromptCard{padding:16px 16px 14px}
  .pocketPromptTitle{font-size:14px}
  .pocketPromptBody{font-size:12.5px}
  .pocketPromptEnable,.pocketPromptDismiss{font-size:12.5px;padding:9px 12px}
}

/* ---- Aapke Liye refresh button (v2.28.9) ---- */
.simHeadWrap{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 6px}
.simHeadWrap #simHead{margin:0;flex:1 1 auto}
.simRefresh{background:linear-gradient(135deg,rgba(255,215,0,.18),rgba(255,215,0,.06));border:1px solid rgba(255,215,0,.45);color:#ffd700;font-weight:700;font-size:12px;letter-spacing:.3px;padding:6px 12px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .18s,transform .12s;-webkit-tap-highlight-color:transparent;flex:0 0 auto}
.simRefresh:hover{background:linear-gradient(135deg,rgba(255,215,0,.3),rgba(255,215,0,.1))}
.simRefresh:active{transform:scale(.96)}
.simRefreshIcon{display:inline-block;font-size:14px;line-height:1;transition:transform .5s ease}
.simRefresh.spinning .simRefreshIcon{animation:simSpin .8s linear infinite}
@keyframes simSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media(max-width:640px){
  .simHeadWrap{margin:10px 0 4px}
  .simRefresh{padding:5px 10px;font-size:11px}
  .simRefreshLabel{display:none}
}

/* ---- Subs notification strip (horizontal scroll of new subscription uploads) ---- */
.subsStrip{position:relative;margin:12px auto 0;max-width:min(1100px,calc(100vw - 32px));background:linear-gradient(180deg,rgba(20,20,20,.88),rgba(20,20,20,.72));border:1px solid rgba(255,215,0,.35);border-radius:14px;padding:10px 12px 12px;z-index:8;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.subsStrip[hidden]{display:none !important}
.subsStripHead{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.subsStripTitle{color:#ffd700;font-weight:800;font-size:13px;letter-spacing:.3px;flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.subsStripCount{background:#e50914;color:#fff;font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;letter-spacing:.3px;flex:0 0 auto}
.subsStripCount:empty{display:none}
.subsStripIconBtn{margin-left:auto;background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.18);width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:13px;display:grid;place-items:center;padding:0;line-height:1;flex:0 0 auto;transition:background .18s}
.subsStripIconBtn+.subsStripIconBtn{margin-left:6px}
.subsStripIconBtn:hover{background:rgba(255,255,255,.16)}
.subsStripList{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:thin}
.subsStripList::-webkit-scrollbar{height:6px}
.subsStripList::-webkit-scrollbar-thumb{background:rgba(255,215,0,.35);border-radius:3px}
.subsCard{flex:0 0 auto;width:180px;scroll-snap-align:start;cursor:pointer;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.1);border-radius:10px;overflow:hidden;text-decoration:none;color:#fff;transition:transform .12s ease,border-color .18s}
.subsCard:hover{transform:translateY(-2px);border-color:rgba(255,215,0,.5)}
.subsCardThumbWrap{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden}
.subsCardThumb{width:100%;height:100%;object-fit:cover;display:block}
.subsCardNew{position:absolute;top:4px;left:4px;background:#e50914;color:#fff;font-size:9px;font-weight:900;letter-spacing:.4px;padding:2px 6px;border-radius:4px;text-transform:uppercase}
.subsCardBody{padding:6px 8px 8px}
.subsCardTitle{font-size:11.5px;font-weight:700;line-height:1.3;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:3px}
.subsCardMeta{font-size:10px;color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:640px){
  .subsStrip{margin:8px 10px 0;padding:8px 10px 10px;border-radius:12px}
  .subsStripTitle{font-size:12px}
  .subsStripIconBtn{width:26px;height:26px;font-size:12px}
  .subsCard{width:160px}
  .subsCardTitle{font-size:11px}
}

/* ---- Cross-page browse overlay (Video/Shorts in-iframe) ---- */
.crossPageOverlay{position:fixed;inset:0;z-index:60;background:#000;display:flex;flex-direction:column}
.crossPageOverlay[hidden]{display:none !important}
.crossPageBar{background:rgba(18,18,18,.96);padding:10px 14px;display:flex;align-items:center;gap:12px;color:#fff;border-bottom:1px solid rgba(255,255,255,.1);flex:0 0 auto;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.crossPageClose{background:rgba(255,215,0,.16);color:#ffd700;border:1px solid rgba(255,215,0,.4);padding:7px 14px;border-radius:999px;font-weight:800;font-size:13px;cursor:pointer;flex:0 0 auto;transition:background .18s;-webkit-tap-highlight-color:transparent}
.crossPageClose:hover{background:rgba(255,215,0,.28)}
.crossPageInfo{flex:1 1 auto;display:flex;align-items:center;gap:8px;overflow:hidden;min-width:0}
.crossPageIcon{font-size:15px;flex:0 0 auto}
.crossPagePlaying{font-size:13px;opacity:.9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.crossPageMiniBtn{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2);width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:14px;display:grid;place-items:center;padding:0;flex:0 0 auto;transition:background .18s;-webkit-tap-highlight-color:transparent}
.crossPageMiniBtn:hover{background:rgba(255,255,255,.2)}
.crossPageFrame{flex:1 1 auto;border:0;width:100%;background:#000;display:block}
@media(max-width:640px){
  .crossPageBar{padding:8px 10px;gap:8px}
  .crossPageClose{padding:6px 11px;font-size:12px}
  .crossPagePlaying{font-size:12px}
  .crossPageMiniBtn{width:34px;height:34px;font-size:12.5px}
}

/* ---- Screen lock full-screen overlay ---- */
.lockOverlay{position:fixed;inset:0;z-index:999999;background:radial-gradient(ellipse at center,rgba(15,10,25,.94),rgba(0,0,0,.98));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;user-select:none;cursor:pointer}
/* CRITICAL: hidden attribute must beat display:flex above — without this !important the overlay never actually hides on unlock. */
.lockOverlay[hidden]{display:none !important}
.lockOverlay .lockPad{text-align:center;padding:40px 30px;max-width:340px}
.lockOverlay .lockIcon{font-size:80px;line-height:1;margin-bottom:18px;filter:drop-shadow(0 0 20px rgba(255,215,0,.4));animation:lockPulse 2.4s ease-in-out infinite}
.lockOverlay .lockTitle{color:#ffd700;font-size:24px;font-weight:800;letter-spacing:.5px;margin-bottom:6px}
.lockOverlay .lockSubTitle{color:rgba(255,255,255,.65);font-size:12.5px;margin-bottom:16px;letter-spacing:.3px}
.lockOverlay .lockSong{color:rgba(255,255,255,.9);font-size:15px;font-weight:600;margin-bottom:24px;padding:10px 16px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);max-width:280px;margin-left:auto;margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lockOverlay .lockHint{color:rgba(255,255,255,.55);font-size:13px;margin-bottom:16px}
/* PIN entry inside the overlay: 5 dots + hint + 3-column numeric keypad */
.lockOverlay .lockPinRow{display:flex;justify-content:center;gap:14px;margin:6px auto 12px}
.lockOverlay .lockPinDot{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.08);border:2px solid rgba(255,215,0,.35);transition:all .2s}
.lockOverlay .lockPinDot.on{background:#ffd700;border-color:#ffd700;box-shadow:0 0 12px rgba(255,215,0,.6);transform:scale(1.1)}
.lockOverlay .lockPinDot.bad{background:#ff5252;border-color:#ff5252;box-shadow:0 0 12px rgba(255,82,82,.6)}
.lockOverlay .lockPinRow.shake{animation:lockPinShake .55s cubic-bezier(.36,.07,.19,.97)}
@keyframes lockPinShake{10%,90%{transform:translateX(-4px)}20%,80%{transform:translateX(6px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}
.lockOverlay .lockPinHint{color:rgba(255,255,255,.7);font-size:12.5px;margin-bottom:16px;letter-spacing:.2px}
.lockOverlay .lockPinHint b{color:#ffd700;font-weight:800;letter-spacing:.4px}
.lockOverlay .lockKeypad{display:grid;grid-template-columns:repeat(3,72px);gap:10px;justify-content:center;margin-top:6px;touch-action:manipulation}
.lockOverlay .lockKey{width:72px;height:60px;border-radius:16px;border:1px solid rgba(255,215,0,.35);background:linear-gradient(180deg,rgba(255,215,0,.12),rgba(255,168,60,.05));color:#ffd700;font-size:22px;font-weight:700;cursor:pointer;display:grid;place-items:center;padding:0;line-height:1;-webkit-tap-highlight-color:transparent;pointer-events:auto !important;transition:transform .1s ease,background .18s}
.lockOverlay .lockKey:hover{background:linear-gradient(180deg,rgba(255,215,0,.22),rgba(255,168,60,.12))}
.lockOverlay .lockKey:active{transform:scale(.94);background:rgba(255,215,0,.3)}
.lockOverlay .lockKeyBlank{background:transparent;border:none;cursor:default;pointer-events:none}
.lockOverlay .lockKeyBack{font-size:20px;color:#fff;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.06)}
.lockOverlay .lockKeyBack:hover{background:rgba(255,255,255,.14)}
/* Small phones: tighter keys so they still fit comfortably */
@media(max-width:400px){
  .lockOverlay .lockKeypad{grid-template-columns:repeat(3,64px);gap:8px}
  .lockOverlay .lockKey{width:64px;height:54px;font-size:20px}
}
/* Lock pill (topbar) armed state */
.lockBtn.armed{background:rgba(255,60,60,.9) !important;color:#fff !important;border-color:rgba(255,255,255,.4) !important;animation:lockArmPulse 1s ease-in-out infinite}
@keyframes lockArmPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes lockPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.85}}
/* When locked: disable pointer events on everything except the overlay. */
body.rvLocked > *:not(.lockOverlay){pointer-events:none !important}
body.rvLocked{overflow:hidden}