/* === style.css === */
/* ================================================================
   LOKTUBE BILLION — assets/css/style.css
   Premium UI: Glassmorphism · Micro-interactions · World-class
   Theme: Saffron (#FF671F) | Dark mode default | India-first
   ================================================================ */
:root {
  --accent:#FF671F; --accent2:#e55a14; --accent3:#ff9a2f;
  --accent-g:linear-gradient(135deg,#FF671F,#ff9a2f);
  --accent-g2:linear-gradient(135deg,#FF671F,#e91e63);
  --bg:#09090f; --bg2:#0f0f18; --bg3:#171724; --bg4:#1f1f2e; --bg5:#262636;
  --glass:rgba(255,255,255,.04); --glass2:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.08); --border2:rgba(255,255,255,.13);
  --text:#f0f0f8; --text2:#8888a8; --text3:#4a4a68;
  --green:#4caf50; --red:#f44336; --blue:#2196f3; --orange:#ff9800; --purple:#9c27b0;
  --nav-h:58px; --sb-w:240px; --sb-w-c:72px;
  --radius:14px; --radius-lg:20px;
  --shadow:0 8px 32px rgba(0,0,0,.6); --shadow-lg:0 16px 64px rgba(0,0,0,.8);
  --glow:0 0 20px rgba(255,103,31,.25); --blur:blur(16px);
  --transition:all .2s cubic-bezier(.4,0,.2,1);
}
[data-theme="light"] {
  --bg:#f0f0f8; --bg2:#fff; --bg3:#e8e8f0; --bg4:#dcdcec; --bg5:#d0d0e0;
  --glass:rgba(0,0,0,.03); --glass2:rgba(0,0,0,.06);
  --border:rgba(0,0,0,.08); --border2:rgba(0,0,0,.13);
  --text:#0a0a18; --text2:#555568; --text3:#999aaa;
  --shadow:0 4px 20px rgba(0,0,0,.12);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:15px;-webkit-tap-highlight-color:transparent}
body{font-family:'Segoe UI',system-ui,-apple-system,'SF Pro Display',sans-serif;background:var(--bg);color:var(--text);line-height:1.55;min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{cursor:pointer;font-family:inherit}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--bg5)}

@media(prefers-reduced-motion:no-preference){
  body{animation:pageFadeIn .25s ease}
  @keyframes pageFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}

/* Layout */
.lk-shell{display:flex;min-height:calc(100vh - var(--nav-h))}
.lk-main{flex:1;min-width:0;padding:20px 16px}
.page-wrapper{max-width:960px;margin:0 auto;padding:24px 16px}
.content-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}

/* Video Cards */
.yt-card{border-radius:var(--radius);overflow:visible;transition:var(--transition);cursor:pointer;position:relative}
.yt-card:hover{transform:translateY(-4px)}
.yt-card:hover .yt-thumb-wrap{box-shadow:0 12px 40px rgba(255,103,31,.2)}
.yt-thumb-wrap{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--bg3);transition:box-shadow .3s}
.yt-thumb-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .4s cubic-bezier(.4,0,.2,1)}
.yt-card:hover .yt-thumb-wrap img{transform:scale(1.06)}
.yt-badge{position:absolute;bottom:6px;right:6px;font-size:11px;font-weight:700;padding:2px 7px;border-radius:5px;background:rgba(0,0,0,.85);color:#fff;backdrop-filter:var(--blur)}
.yt-badge.live{background:var(--red);animation:livePulse 1.5s infinite}
.yt-info{display:flex;gap:10px;padding:10px 2px 4px;align-items:flex-start}
.yt-avatar{width:36px;height:36px;border-radius:50%;background:var(--accent-g);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0;overflow:hidden;transition:transform .2s}
.yt-avatar:hover{transform:scale(1.08)}
.yt-avatar img{width:100%;height:100%;object-fit:cover}
.yt-details{flex:1;min-width:0}
.yt-title{font-size:14px;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--text);transition:color .15s}
.yt-title:hover{color:var(--accent)}
.yt-channel{font-size:12px;color:var(--text2);margin-top:3px}
.yt-meta{font-size:12px;color:var(--text3);margin-top:2px}
.yt-remove-btn{position:absolute;top:8px;right:8px;z-index:2;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.75);color:#fff;border:none;font-size:14px;display:none;align-items:center;justify-content:center;backdrop-filter:var(--blur);transition:background .15s}
.yt-remove-btn:hover{background:rgba(244,67,54,.8)}
.yt-card:hover .yt-remove-btn{display:flex}

/* Skeleton Loader */
@keyframes shimmer{0%{background-position:200% center}100%{background-position:-200% center}}
.skeleton{background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4) 50%,var(--bg3) 75%);background-size:400% 100%;animation:shimmer 1.6s infinite;border-radius:var(--radius)}
.skeleton-card{display:flex;flex-direction:column;gap:10px}
.skeleton-thumb{aspect-ratio:16/9;border-radius:var(--radius)}
.skeleton-line{height:14px;border-radius:6px}
.skeleton-line-sm{height:11px;border-radius:5px;width:70%}
.skeleton-circle{border-radius:50%!important}

/* Glass */
.glass-panel{background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--border);border-radius:var(--radius-lg)}
.glass-card{background:rgba(255,255,255,.03);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 20px;border-radius:24px;font-size:13px;font-weight:700;border:none;cursor:pointer;transition:var(--transition);position:relative;overflow:hidden;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent-g);color:#fff;box-shadow:0 4px 16px rgba(255,103,31,.3)}
.btn-primary:hover{box-shadow:0 6px 24px rgba(255,103,31,.45);transform:translateY(-2px)}
.btn-outline{background:transparent;border:1.5px solid var(--border2);color:var(--text)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);background:rgba(255,103,31,.06)}
.btn-sub{background:var(--text);color:var(--bg)}
.btn-sub:hover{opacity:.88}
.btn-sub.subscribed{background:var(--bg4);color:var(--text);border:1.5px solid var(--border)}
.btn-danger{background:linear-gradient(135deg,#f44336,#d32f2f);color:#fff}
.btn-ghost{background:var(--glass2);border:1px solid var(--border);color:var(--text)}
.btn-ghost:hover{background:var(--glass);border-color:var(--accent)}
.btn-sm{padding:5px 14px;font-size:12px}
.btn-lg{padding:13px 28px;font-size:15px}
.btn-icon{width:40px;height:40px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--bg3);border:1px solid var(--border);color:var(--text);font-size:16px;transition:var(--transition)}
.btn-icon:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:scale(1.08);box-shadow:var(--glow)}
.btn-pill{display:inline-flex;align-items:center;gap:7px;background:var(--accent-g);color:#fff;border:none;padding:9px 22px;border-radius:28px;font-size:14px;font-weight:700;cursor:pointer;transition:var(--transition);box-shadow:0 4px 16px rgba(255,103,31,.3)}
.btn-pill:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(255,103,31,.45)}
.btn-pill:active{transform:scale(.97)}
.btn-pill.outline{background:transparent;border:1.5px solid var(--border2);color:var(--text);box-shadow:none}
.btn-pill.outline:hover{border-color:var(--accent);color:var(--accent);background:rgba(255,103,31,.06)}
.action-pill{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:24px;font-size:14px;font-weight:700;background:var(--bg3);border:1.5px solid var(--border);color:var(--text);cursor:pointer;transition:var(--transition)}
.action-pill:hover{background:var(--bg4);border-color:var(--border2)}
.action-pill.active{background:rgba(255,103,31,.15);border-color:var(--accent);color:var(--accent)}

/* Forms */
.form-group{margin-bottom:18px}
.form-label{display:block;font-size:12px;font-weight:700;color:var(--text2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.form-control,.form-input{width:100%;padding:11px 16px;border-radius:12px;border:1.5px solid var(--border);background:var(--bg3);color:var(--text);font-size:14px;outline:none;transition:border-color .2s,box-shadow .2s;font-family:inherit}
.form-control:focus,.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,103,31,.15)}
textarea.form-control{resize:vertical;min-height:90px}
select.form-control{appearance:none;cursor:pointer}

/* Cards */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow);transition:var(--transition)}
.card:hover{border-color:var(--border2)}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.card-title{font-size:16px;font-weight:800}

/* Badges */
.pill{display:inline-flex;align-items:center;padding:3px 11px;border-radius:20px;font-size:12px;font-weight:700}
.pill-accent{background:rgba(255,103,31,.15);color:var(--accent)}
.pill-green{background:rgba(76,175,80,.15);color:var(--green)}
.pill-red{background:rgba(244,67,54,.15);color:var(--red)}
.pill-blue{background:rgba(33,150,243,.15);color:var(--blue)}
.pill-purple{background:rgba(156,39,176,.15);color:var(--purple)}

/* Section */
.section-title{font-size:18px;font-weight:800;margin:0 0 18px;display:flex;align-items:center;gap:10px}
.section-title i{color:var(--accent)}

/* Category strip */
.cat-strip{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:none}
.cat-strip::-webkit-scrollbar{display:none}
.cat-pill{flex-shrink:0;padding:7px 16px;border-radius:24px;background:var(--bg3);border:1.5px solid var(--border);font-size:13px;font-weight:600;cursor:pointer;transition:var(--transition);white-space:nowrap;color:var(--text);text-decoration:none}
.cat-pill:hover{background:rgba(255,103,31,.1);border-color:rgba(255,103,31,.4);color:var(--accent)}
.cat-pill.active{background:var(--accent-g);border-color:transparent;color:#fff;box-shadow:0 4px 12px rgba(255,103,31,.3)}

/* Alerts */
.alert{padding:13px 18px;border-radius:12px;font-size:13px;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.alert-success{background:rgba(76,175,80,.1);border:1px solid rgba(76,175,80,.25);color:var(--green)}
.alert-error{background:rgba(244,67,54,.1);border:1px solid rgba(244,67,54,.25);color:var(--red)}
.alert-info{background:rgba(33,150,243,.1);border:1px solid rgba(33,150,243,.25);color:var(--blue)}
.alert-warn{background:rgba(255,152,0,.1);border:1px solid rgba(255,152,0,.25);color:var(--orange)}

/* Avatar */
.avatar{border-radius:50%;background:var(--accent-g);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar-sm{width:32px;height:32px;font-size:12px}
.avatar-md{width:44px;height:44px;font-size:17px}
.avatar-lg{width:72px;height:72px;font-size:28px}
.avatar-xl{width:96px;height:96px;font-size:38px}

/* Tabs */
.tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:22px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab-btn{padding:11px 22px;background:none;border:none;font-size:14px;font-weight:600;color:var(--text2);border-bottom:3px solid transparent;margin-bottom:-2px;cursor:pointer;transition:var(--transition);white-space:nowrap}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}
.tab-content{display:none}
.tab-content.active{display:block;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Toast */
#lt-toast-container{position:fixed;bottom:80px;right:16px;z-index:9999;display:flex;flex-direction:column-reverse;gap:8px;pointer-events:none}
.lt-toast{padding:12px 20px;border-radius:12px;font-size:13px;font-weight:600;box-shadow:0 8px 32px rgba(0,0,0,.5);pointer-events:auto;animation:toastIn .3s cubic-bezier(.4,0,.2,1);min-width:200px;max-width:340px;display:flex;align-items:center;gap:10px;backdrop-filter:var(--blur)}
.lt-toast-success{background:rgba(25,50,25,.95);border:1px solid rgba(76,175,80,.4);color:var(--green)}
.lt-toast-error{background:rgba(50,20,20,.95);border:1px solid rgba(244,67,54,.4);color:var(--red)}
.lt-toast-info{background:rgba(20,30,50,.95);border:1px solid rgba(33,150,243,.4);color:var(--blue)}
.lt-toast-warn{background:rgba(50,35,20,.95);border:1px solid rgba(255,152,0,.4);color:var(--orange)}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}

/* Spinner */
.spinner{width:36px;height:36px;border:3px solid var(--bg4);border-top-color:var(--accent);border-radius:50%;animation:spin .7s cubic-bezier(.4,0,.2,1) infinite;margin:20px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-state{text-align:center;padding:48px;color:var(--text2)}

/* Progress bar */
.progress-bar{height:4px;background:var(--bg4);border-radius:2px;overflow:hidden}
.progress-fill{height:100%;background:var(--accent-g);border-radius:2px;transition:width .3s ease}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:3000;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;transition:opacity .2s;backdrop-filter:blur(4px)}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal-box{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:28px;max-width:540px;width:100%;transform:scale(.93) translateY(10px);transition:transform .25s cubic-bezier(.4,0,.2,1);max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg)}
.modal-overlay.open .modal-box{transform:scale(1) translateY(0)}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.modal-title{font-size:18px;font-weight:800}
.modal-close{width:32px;height:32px;border-radius:50%;background:var(--bg4);border:none;color:var(--text);font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition)}
.modal-close:hover{background:var(--red);color:#fff}

/* Stats row */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-bottom:22px}
.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;text-align:center;transition:var(--transition);position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent-g);opacity:0;transition:opacity .2s}
.stat-card:hover{border-color:var(--border2);transform:translateY(-2px)}
.stat-card:hover::before{opacity:1}
.stat-value{font-size:26px;font-weight:800;color:var(--accent);line-height:1.2}
.stat-label{font-size:12px;color:var(--text2);margin-top:4px;font-weight:600}

/* Table */
.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table th{padding:11px 16px;text-align:left;font-size:11px;font-weight:700;color:var(--text2);border-bottom:2px solid var(--border);background:var(--bg2);position:sticky;top:0;text-transform:uppercase;letter-spacing:.5px}
.data-table td{padding:11px 16px;border-bottom:1px solid var(--border);vertical-align:middle}
.data-table tr:hover td{background:rgba(255,103,31,.04)}
.table-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--border)}

/* Drop zone */
.drop-zone{border:2px dashed var(--border2);border-radius:var(--radius-lg);padding:48px;text-align:center;cursor:pointer;transition:var(--transition);color:var(--text2);background:var(--bg3)}
.drop-zone:hover,.drop-zone.dragover{border-color:var(--accent);background:rgba(255,103,31,.06);color:var(--accent);transform:scale(1.01)}
.drop-zone i{font-size:44px;margin-bottom:14px;transition:transform .2s}
.drop-zone:hover i{transform:scale(1.1) translateY(-4px)}

/* Range */
input[type=range]{-webkit-appearance:none;width:100%;height:4px;background:var(--bg4);border-radius:2px;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 0 0 3px rgba(255,103,31,.2);transition:transform .15s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}

/* Story ring */
.story-ring{width:62px;height:62px;border-radius:50%;padding:3px;background:var(--accent-g);cursor:pointer;transition:transform .2s}
.story-ring:hover{transform:scale(1.08)}
.story-ring.seen{background:var(--bg4)}
.story-ring-inner{width:100%;height:100%;border-radius:50%;background:var(--bg);border:2.5px solid var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden}
.story-ring-inner img{width:100%;height:100%;object-fit:cover}
.story-name{font-size:11px;color:var(--text2);max-width:68px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:5px}

/* Like bar */
.like-bar{height:3px;background:var(--border);border-radius:2px;margin-top:6px;overflow:hidden}
.like-bar-fill{height:100%;background:var(--accent-g);border-radius:2px;transition:width .6s ease}

/* Verified/live */
.verified-badge,.badge-verified{color:#4fc3f7;font-size:.85em}
.badge-live{background:var(--red);color:#fff;font-size:10px;font-weight:800;padding:2px 8px;border-radius:10px;animation:livePulse 1.5s infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.65}}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulseDot 1.5s infinite}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)}}

/* Gradient text */
.gradient-text{background:var(--accent-g);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Compression badges */
.comp-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:8px}
.comp-badge.queued{background:rgba(255,152,0,.15);color:var(--orange)}
.comp-badge.processing{background:rgba(33,150,243,.15);color:var(--blue)}
.comp-badge.done{background:rgba(76,175,80,.15);color:var(--green)}
.comp-badge.failed{background:rgba(244,67,54,.15);color:var(--red)}

/* Chapters */
.chapters-list{margin-top:12px;display:flex;flex-direction:column;gap:4px}
.chapter-item{display:flex;align-items:center;gap:12px;padding:7px 12px;border-radius:10px;cursor:pointer;transition:background .15s}
.chapter-item:hover{background:var(--bg3)}
.chapter-item.active{background:rgba(255,103,31,.1)}
.chapter-time{font-size:13px;font-weight:700;color:var(--accent);min-width:52px}
.chapter-name{font-size:13px}

/* Poll */
.poll-option{display:flex;align-items:center;gap:10px;padding:12px 16px;border:1.5px solid var(--border);border-radius:12px;cursor:pointer;margin-bottom:8px;transition:var(--transition);position:relative;overflow:hidden}
.poll-option:hover{border-color:rgba(255,103,31,.4);background:rgba(255,103,31,.04)}
.poll-option.voted{border-color:var(--accent)}
.poll-bar{position:absolute;left:0;top:0;bottom:0;background:rgba(255,103,31,.1);pointer-events:none;transition:width .7s cubic-bezier(.4,0,.2,1)}
.poll-pct{margin-left:auto;font-size:13px;font-weight:700;color:var(--accent)}

/* Empty state */
.empty-state{text-align:center;padding:64px 20px;color:var(--text2)}
.empty-state i{font-size:52px;opacity:.3;margin-bottom:18px;display:block}
.empty-state h3{font-size:20px;font-weight:800;color:var(--text);margin-bottom:10px}
.empty-state p{font-size:14px;max-width:360px;margin:0 auto}

/* Mini player */
#mini-player{position:fixed;bottom:74px;right:16px;z-index:900;width:320px;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);display:none;flex-direction:column}
#mini-player.active{display:flex;animation:slideUp .3s ease}
#mini-player video{width:100%;aspect-ratio:16/9;background:#000}
.mini-player-bar{padding:9px 14px;display:flex;align-items:center;gap:10px}
.mini-player-title{font-size:12px;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-player-close{width:26px;height:26px;border-radius:50%;background:var(--bg4);border:none;color:var(--text);font-size:13px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition)}
.mini-player-close:hover{background:var(--red);color:#fff}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}

/* Upload notif */
.upload-notif{position:fixed;bottom:80px;right:16px;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:16px 18px;min-width:280px;max-width:340px;z-index:8000;box-shadow:var(--shadow-lg);display:none;animation:slideUp .3s ease}
.upload-notif.show{display:block}
.upload-notif-title{font-size:13px;font-weight:800;margin-bottom:8px}
.upload-notif-bar{height:5px;background:var(--bg4);border-radius:3px;overflow:hidden}
.upload-notif-fill{height:100%;background:var(--accent-g);border-radius:3px;transition:width .4s}

/* Earn card */
.earn-card-premium{background:linear-gradient(135deg,#141422,#1c1c2e);border:1px solid rgba(255,103,31,.2);border-radius:var(--radius-lg);padding:26px;position:relative;overflow:hidden}
.earn-card-premium::before{content:'';position:absolute;top:-50px;right:-50px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(255,103,31,.12),transparent)}

/* Blog editor */
.blog-editor{min-height:420px;border:1.5px solid var(--border);border-radius:0 0 14px 14px;padding:18px;background:var(--bg3);color:var(--text);font-size:15px;line-height:1.85;outline:none;transition:border-color .2s}
.blog-editor:focus{border-color:var(--accent)}
.blog-toolbar{display:flex;gap:4px;flex-wrap:wrap;padding:8px 10px;background:var(--bg4);border:1.5px solid var(--border);border-bottom:none;border-radius:14px 14px 0 0}
.blog-toolbar button{background:none;border:none;color:var(--text2);cursor:pointer;width:32px;height:32px;border-radius:8px;font-size:13px;display:flex;align-items:center;justify-content:center;transition:var(--transition)}
.blog-toolbar button:hover{background:var(--bg3);color:var(--accent)}
.blog-toolbar .sep{width:1px;height:24px;background:var(--border);margin:4px;align-self:center}

/* Shorts record btn */
.rec-btn-wrap{position:relative;width:74px;height:74px}
.rec-btn-outer{position:absolute;inset:0;border-radius:50%;border:4px solid #fff}
.rec-btn-inner{position:absolute;inset:6px;border-radius:50%;background:var(--red);transition:all .25s cubic-bezier(.4,0,.2,1);cursor:pointer}
.rec-btn-inner.recording{border-radius:10px;inset:16px}

/* CDN badge */
.cdn-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(33,150,243,.12);color:var(--blue);font-size:11px;font-weight:700;padding:2px 9px;border-radius:10px}

/* Filters */
.filter-none{filter:none}
.filter-warm{filter:sepia(.4) saturate(1.5) brightness(1.05)}
.filter-cool{filter:saturate(1.3) hue-rotate(20deg) brightness(1.05)}
.filter-bw{filter:grayscale(1) contrast(1.1)}
.filter-vivid{filter:saturate(2) contrast(1.15)}
.filter-fade{filter:brightness(1.15) contrast(.8) saturate(.75)}
.filter-golden{filter:sepia(.6) saturate(1.8) hue-rotate(-10deg)}

/* Micro-interactions */
@keyframes heartPulse{0%{transform:scale(1)}40%{transform:scale(1.35)}70%{transform:scale(.9)}100%{transform:scale(1)}}
.heart-pulse{animation:heartPulse .4s cubic-bezier(.4,0,.2,1)}
@keyframes tapBounce{0%{transform:scale(1)}50%{transform:scale(.92)}100%{transform:scale(1)}}
.tap-feedback{animation:tapBounce .2s ease}

/* Share sheet */
.share-sheet{position:fixed;bottom:0;left:0;right:0;background:var(--bg2);border-radius:24px 24px 0 0;z-index:2000;padding:20px;transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);border-top:1px solid var(--border2)}
.share-sheet.open{transform:none}
.share-sheet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.share-opt{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;padding:10px;border-radius:14px;transition:background .15s;font-size:12px;font-weight:700;color:var(--text)}
.share-opt:hover{background:var(--bg3)}
.share-opt-icon{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding:18px 16px;font-size:12px;margin-top:48px;background:var(--bg2)}

/* Bottom nav */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:rgba(9,9,15,.92);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-top:1px solid var(--border);z-index:500;padding:8px 0 env(safe-area-inset-bottom,8px);justify-content:space-around}
.bn-item{display:flex;flex-direction:column;align-items:center;font-size:10px;color:var(--text2);gap:3px;padding:4px 14px;border-radius:12px;transition:color .15s;text-decoration:none}
.bn-item i{font-size:22px;transition:transform .2s}
.bn-item.active{color:var(--accent)}
.bn-item.active i{transform:scale(1.1)}

/* Accessibility */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Utility */
.flex{display:flex}.flex-c{display:flex;align-items:center}.flex-cb{display:flex;align-items:center;justify-content:space-between}
.gap-4{gap:4px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.text-sm{font-size:12px}.text-muted{color:var(--text2)}.text-accent{color:var(--accent)}.text-green{color:var(--green)}.text-red{color:var(--red)}
.fw-700{font-weight:700}.fw-800{font-weight:800}.fw-900{font-weight:900}
.text-center{text-align:center}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hidden{display:none!important}.block{display:block}.relative{position:relative}.w-full{width:100%}

/* Responsive */
@media(max-width:768px){
  .bottom-nav{display:flex}
  .lk-main{padding:12px 10px 80px}
  .content-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  #mini-player{width:calc(100vw - 32px);bottom:82px}
  .stats-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .content-grid{grid-template-columns:1fr 1fr;gap:10px}
  .card{padding:14px}
  .section-title{font-size:15px}
  .stat-value{font-size:20px}
  .story-ring{width:54px;height:54px}
  .btn-pill{padding:8px 16px;font-size:13px}
}

/* ================================================================
   LOKTUBE FINAL POLISH — Production-grade UI improvements
   ================================================================ */

/* ── Focus & accessibility ────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button, a, input, select, textarea { font-family: inherit; }

/* ── Improved bottom nav ──────────────────────────────────── */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(9,9,15,.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,.06);
  display: none;
  z-index: 800;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 768px) { .bottom-nav { display: flex; } }
.bn-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px; padding: 10px 4px;
  font-size: 10px; font-weight: 600; color: var(--text2);
  text-decoration: none; transition: color .15s, transform .15s;
  min-height: 56px;
}
.bn-item i { font-size: 20px; }
.bn-item.active { color: var(--accent); }
.bn-item:active { transform: scale(0.9); }

/* ── Smooth page transitions ─────────────────────────────── */
.lk-main, .page-wrapper {
  animation: pageIn .18s ease both;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Improved cards ───────────────────────────────────────── */
.yt-card {
  border-radius: var(--radius);
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: pointer;
}
.yt-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.yt-card:hover .yt-thumb-wrap {
  box-shadow: 0 0 0 2px var(--accent);
}
.yt-info { display: flex; gap: 10px; padding: 10px 0 4px; }
.yt-details { flex: 1; min-width: 0; }

/* ── Avatar with gradient fallback ───────────────────────── */
.yt-avatar, .sb-sub-avatar {
  background: var(--accent-g);
  color: #fff;
}

/* ── Improved form controls ───────────────────────────────── */
.form-control:focus,
.form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,103,31,.12);
}
input[type="text"], input[type="email"], input[type="password"],
input[type="url"], select, textarea {
  transition: border-color .2s, box-shadow .2s;
}

/* ── Alert components ─────────────────────────────────────── */
.alert { padding: 12px 16px; border-radius: 12px; margin-bottom: 14px;
         display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.alert-success { background: rgba(76,175,80,.12);  border: 1px solid rgba(76,175,80,.3);  color: #66bb6a; }
.alert-error   { background: rgba(244,67,54,.12);  border: 1px solid rgba(244,67,54,.3);  color: #ef5350; }
.alert-warn    { background: rgba(255,152,0,.12);  border: 1px solid rgba(255,152,0,.3);  color: #ffa726; }
.alert-info    { background: rgba(33,150,243,.12); border: 1px solid rgba(33,150,243,.3); color: #42a5f5; }

/* ── Loading spinner ──────────────────────────────────────── */
.spinner {
  display: inline-block; width: 20px; height: 20px;
  border: 2px solid rgba(255,103,31,.3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Empty state ──────────────────────────────────────────── */
.empty-state {
  text-align: center; padding: 60px 20px; color: var(--text2);
}
.empty-state i { font-size: 48px; opacity: .3; margin-bottom: 16px; display: block; }
.empty-state h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.empty-state p { font-size: 14px; margin-bottom: 20px; }

/* ── Verified badge ───────────────────────────────────────── */
.verified-badge { color: #4fc3f7; font-size: 12px; }

/* ── Shimmer skeleton improved ────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
.skeleton {
  background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%);
  background-size: 400% 100%;
  animation: shimmer 1.5s ease infinite;
  border-radius: var(--radius);
}

/* ── Like/dislike bar on watch page ───────────────────────── */
.like-bar       { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.like-bar-fill  { height: 100%; background: var(--accent-g); border-radius: 2px;
                  transition: width .5s ease; }

/* ── Admin panel responsive ───────────────────────────────── */
@media (max-width: 900px) {
  .admin-shell  { flex-direction: column; }
  .admin-nav    { position: fixed; top: 0; left: -260px; width: 240px; height: 100vh;
                  z-index: 999; transition: left .2s ease; }
  .admin-nav.open { left: 0; }
  .admin-content { margin-left: 0; }
}

/* ── Scrollbar ─────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--bg4) transparent; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--bg5); }

/* ── Image lazy load fade ─────────────────────────────────── */
img { transition: opacity .2s ease; }
img[loading="lazy"] { opacity: 0; }
img[loading="lazy"].loaded { opacity: 1; }

/* ── Tooltips ─────────────────────────────────────────────── */
[title] { cursor: help; }
button[title] { cursor: pointer; }

/* ── Mobile content grid fix ───────────────────────────────── */
@media (max-width: 640px) {
  .content-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}
@media (max-width: 380px) {
  .content-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Watch page action pills ──────────────────────────────── */
.action-pill.liked    { background: rgba(255,103,31,.15); border-color: var(--accent); color: var(--accent); }
.action-pill.disliked { background: rgba(244,67,54,.12); border-color: #f44336; color: #f44336; }
.action-pill.saved    { background: rgba(76,175,80,.12); border-color: #4caf50; color: #4caf50; }

/* ── Video description toggle ─────────────────────────────── */
.desc-box { transition: max-height .3s ease, opacity .3s ease; overflow: hidden; }

/* ── Comment box animations ──────────────────────────────── */
.comment-item { animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }

/* ── Channel settings improved form ──────────────────────── */
.form-group { margin-bottom: 18px; }
.form-group label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 13px; color: var(--text2); }

/* ── Notification dot ────────────────────────────────────── */
.notif-dot {
  position: absolute; top: 4px; right: 4px;
  width: 8px; height: 8px; background: var(--accent);
  border-radius: 50%; border: 2px solid var(--bg);
}

/* ── Mobile sidebar push fix ─────────────────────────────── */
@media (max-width: 768px) {
  .lk-main { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Maintenance page ────────────────────────────────────── */
.maintenance-wrap {
  min-height: 100vh; display: flex; align-items: center;
  justify-content: center; background: var(--bg);
  font-family: inherit;
}

/* ================================================================
   FIX 14: APP-LIKE EXPERIENCE — Production Polish
   ================================================================ */

/* Prevent text selection on interactive elements */
.bn-item, .mbn-item, .cat-pill, .action-pill, .btn, .btn-pill,
.short-action, .short-sub-btn {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

/* Smooth scrolling everywhere */
html { scroll-behavior: smooth; }

/* Hide all scrollbars for app feel */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; }

/* Overscroll behaviour — no bounce on iOS body */
body {
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
}

/* Safe area support for iPhone notch */
.bottom-nav, .mobile-bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.shorts-shell { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* Touch ripple effect */
@keyframes ripple {
  from { transform: scale(0); opacity: .4; }
  to   { transform: scale(2); opacity: 0; }
}
.btn:active::after, .action-pill:active::after, .bn-item:active::after, .mbn-item:active::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,.15);
  animation: ripple .4s ease-out;
  pointer-events: none;
}
.btn, .action-pill, .bn-item, .mbn-item { position: relative; overflow: hidden; }

/* Standalone PWA mode — hide browser chrome artifacts */
@media all and (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top, 0); }
  .navbar { padding-top: env(safe-area-inset-top, 0); }
}

/* Image lazy load fade-in */
img[loading="lazy"] {
  transition: opacity .3s ease;
}
img[loading="lazy"].loaded {
  opacity: 1;
}

/* Smooth feed transitions */
.yt-card {
  transition: transform .15s ease, box-shadow .15s ease;
}
.yt-card:active {
  transform: scale(.97);
}

/* Full-screen video pages remove body scroll */
body.shorts-page, body.story-page {
  overflow: hidden;
  height: 100%;
  height: 100dvh;
}

/* ── FESTIVAL THEMES ──────────────────────────────────────────── */
/* Apply by adding data-theme="diwali" to <body> via admin/settings or JS */

[data-theme="diwali"] {
  --accent: #f59e0b;
  --accent-g: linear-gradient(135deg,#f59e0b,#d97706);
  --bg: #1a0a00;
  --bg2: #231100;
  --bg3: #2e1800;
  --bg4: #3a2000;
  --text: #fff8e7;
  --text2: #d4a96a;
  --text3: #a07040;
  --border: #4a3010;
}
[data-theme="holi"] {
  --accent: #e91e9a;
  --accent-g: linear-gradient(135deg,#e91e9a,#9c27b0);
  --bg: #0d001a;
  --bg2: #160026;
  --bg3: #20003a;
  --bg4: #2a004e;
  --text: #fce4ec;
  --text2: #ce93d8;
  --text3: #9c4dcc;
  --border: #6a0080;
}
[data-theme="independence"] {
  --accent: #FF9933;
  --accent-g: linear-gradient(135deg,#FF9933,#138808);
  --bg: #000d04;
  --bg2: #001a08;
  --bg3: #00270c;
  --bg4: #003410;
  --text: #f1f8e9;
  --text2: #81c784;
  --text3: #4caf50;
  --border: #1b5e20;
}
[data-theme="navratri"] {
  --accent: #ff5722;
  --accent-g: linear-gradient(135deg,#ff5722,#ff9800);
  --bg: #1a0400;
  --bg2: #240600;
  --bg3: #2e0900;
  --bg4: #380c00;
  --text: #fff3e0;
  --text2: #ffcc80;
  --text3: #ff8a65;
  --border: #bf360c;
}

/* ── MOBILE LAYOUT MODES ─────────────────────────────────────── */
/* Compact mode */
body.layout-compact .content-grid { grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 8px; }
body.layout-compact .yt-card .yt-meta { padding: 6px 8px; }
body.layout-compact .yt-card .yt-title { font-size: 12px; -webkit-line-clamp: 1; }

/* Reels UI mode — single full-width cards */
body.layout-reels .content-grid { grid-template-columns: 1fr; gap: 0; }
body.layout-reels .yt-card { border-radius: 0; border-left: none; border-right: none; }
body.layout-reels .yt-card .yt-thumb { aspect-ratio: 9/16; }

/* Grid mode — 3 columns on mobile */
@media(max-width:768px) {
  body.layout-grid .content-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  body.layout-grid .yt-card .yt-thumb { aspect-ratio: 1/1; }
  body.layout-grid .yt-card .yt-meta  { display: none; }
}

/* ── PREMIUM THEMES (additional) ────────────────────────── */
[data-theme="dark-pro"] {
  --accent: #7c3aed;
  --accent-g: linear-gradient(135deg,#7c3aed,#4f46e5);
  --bg: #04040a;
  --bg2: #0a0a14;
  --bg3: #10101e;
  --bg4: #181828;
  --text: #f0f0ff;
  --text2: #9090c0;
  --text3: #5050a0;
  --border: #202038;
}
[data-theme="premium-gold"] {
  --accent: #d4a017;
  --accent-g: linear-gradient(135deg,#d4a017,#f0c040);
  --bg: #0c0900;
  --bg2: #181200;
  --bg3: #241b00;
  --bg4: #302400;
  --text: #fff8e0;
  --text2: #c8a855;
  --text3: #8a7030;
  --border: #3a2a00;
}

/* === sidebar.css === */
/* ================================================================
   LOKTUBE BILLION — sidebar.css — Premium Sidebar
   ================================================================ */

/* Sidebar layout */
.lk-sidebar {
  width: var(--sb-w);
  flex-shrink: 0;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  height: calc(100vh - var(--nav-h));
  position: sticky;
  top: var(--nav-h);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--bg4) transparent;
  transition: width .25s cubic-bezier(.4,0,.2,1);
  z-index: 100;
}
.lk-sidebar::-webkit-scrollbar { width: 4px; }
.lk-sidebar::-webkit-scrollbar-track { background: transparent; }
.lk-sidebar::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 2px; }

/* Collapsed state */
body.sb-collapsed .lk-sidebar { width: var(--sb-w-c); }
body.sb-collapsed .sb-label   { display: none; }
body.sb-collapsed .sb-section-title { display: none; }
body.sb-collapsed .sb-divider { margin: 6px 8px; }
body.sb-collapsed .sb-item    { justify-content: center; padding: 10px 0; border-radius: 14px; }
body.sb-collapsed .sb-item:hover { border-radius: 14px; }
body.sb-collapsed .sb-subs    { display: none; }

/* Section title */
.sb-section-title {
  font-size: 11px; font-weight: 700; color: var(--text3);
  padding: 12px 18px 6px; text-transform: uppercase; letter-spacing: .6px;
}

/* Sidebar item */
.sb-item {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 14px; border-radius: 10px; margin: 1px 8px;
  font-size: 13px; font-weight: 600; color: var(--text2);
  cursor: pointer; transition: all .15s cubic-bezier(.4,0,.2,1);
  text-decoration: none; position: relative; white-space: nowrap;
}
.sb-item:hover {
  background: var(--bg3); color: var(--text);
}
.sb-item.active {
  background: rgba(255,103,31,.12);
  color: var(--accent);
}
.sb-item.active .sb-icon i { color: var(--accent); }

/* Hover glow on active */
.sb-item.active::before {
  content: '';
  position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px; border-radius: 0 2px 2px 0;
  background: var(--accent);
}

/* Sidebar icon */
.sb-icon {
  width: 22px; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
  font-size: 16px; color: var(--text3);
  transition: color .15s;
}
.sb-item:hover .sb-icon { color: var(--accent); }

/* Divider */
.sb-divider {
  height: 1px; background: var(--border);
  margin: 8px 16px;
}

/* Subscriptions sub-items */
.sb-sub-item { padding: 7px 12px; }
.sb-sub-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  object-fit: cover; display: block;
}
.sb-sub-initial {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-g); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; flex-shrink: 0;
}

/* Overlay (mobile) */
.sb-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 99;
  backdrop-filter: blur(4px);
}
.sb-overlay.active { display: block; }

/* Mobile: slide-in drawer */
@media (max-width: 768px) {
  .lk-sidebar {
    position: fixed; top: var(--nav-h); left: 0; bottom: 0;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    z-index: 200; width: 260px;
    box-shadow: 4px 0 32px rgba(0,0,0,.5);
  }
  .lk-sidebar.open { transform: translateX(0); }
  body.sb-collapsed .lk-sidebar { width: 260px; }
}

/* Tooltip on collapsed */
@media (min-width: 769px) {
  body.sb-collapsed .sb-item:hover::after {
    content: attr(title);
    position: absolute; left: calc(100% + 8px); top: 50%;
    transform: translateY(-50%);
    background: var(--bg2); border: 1px solid var(--border2);
    color: var(--text); font-size: 12px; font-weight: 600;
    padding: 5px 12px; border-radius: 8px; white-space: nowrap;
    box-shadow: var(--shadow); z-index: 300;
    pointer-events: none;
  }
}

/* ── MOBILE SIDEBAR FIX v44 ── */
@media (max-width: 768px) {
  .lk-sidebar {
    z-index: 999 !important;
    will-change: transform;
    -webkit-overflow-scrolling: touch;
  }
  .lk-sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 4px 0 40px rgba(0,0,0,.7) !important;
  }
  .sb-overlay {
    z-index: 998 !important;
  }
  .sb-overlay.active {
    display: block !important;
    background: rgba(0,0,0,.6) !important;
    backdrop-filter: blur(2px) !important;
  }
}

/* === mobile.css === */
/* ================================================================
   LOKTUBE BILLION — mobile.css — App-like Mobile Experience
   ================================================================ */

/* Watch page responsive */
@media (max-width:960px) {
  .watch-grid { flex-direction:column; }
  .watch-main  { max-width:100%; }
  .watch-sidebar { width:100%; }
}

/* Shorts feed */
.shorts-feed {
  display:flex; flex-direction:column; align-items:center;
  max-width:430px; margin:0 auto;
}
.short-item { width:100%; position:relative; scroll-snap-align:start; }

/* Stories strip */
.story-strip  { display:flex; gap:14px; overflow-x:auto; padding:8px 0 12px; scrollbar-width:none; }
.story-strip::-webkit-scrollbar { display:none; }
.story-bubble { flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; }

/* Story viewer */
.story-viewer { position:fixed; inset:0; background:#000; z-index:3000; display:flex; flex-direction:column; }
.story-progress-bar { display:flex; gap:3px; padding:8px 12px 4px; position:absolute; top:0; left:0; right:0; z-index:2; }
.story-seg { flex:1; height:3px; background:rgba(255,255,255,.3); border-radius:2px; overflow:hidden; }
.story-seg-fill { height:100%; background:#fff; width:0; }
.story-media { flex:1; display:flex; align-items:center; justify-content:center; }
.story-media img, .story-media video { max-width:100%; max-height:100%; object-fit:contain; }
.story-header { position:absolute; top:48px; left:12px; right:12px; display:flex; align-items:center; gap:10px; z-index:2; }
.story-close-btn {
  position:absolute; top:48px; right:12px; z-index:3;
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.15); border:none; color:#fff;
  font-size:18px; display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(8px);
}
.story-reactions { position:absolute; bottom:80px; left:0; right:0; display:flex; justify-content:center; gap:10px; z-index:2; }
.story-reaction-btn { font-size:28px; background:none; border:none; cursor:pointer; transition:transform .2s; }
.story-reaction-btn:hover { transform:scale(1.3); }

/* Notifications panel */
.notif-panel { z-index:1100; }

/* Upload progress overlay */
.upload-progress-overlay { position:fixed; inset:0; background:rgba(0,0,0,.8); z-index:5000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; backdrop-filter:blur(8px); }
.upload-progress-box { background:var(--bg2); border:1px solid var(--border2); border-radius:20px; padding:36px; width:360px; text-align:center; }
.upload-pct { font-size:46px; font-weight:900; color:var(--accent); line-height:1; }

/* Video player */
.video-player-wrap { position:relative; aspect-ratio:16/9; background:#000; border-radius:14px; overflow:hidden; }
.video-player-wrap video { width:100%; height:100%; display:block; }
.video-overlay-ad { position:absolute; inset:0; background:rgba(0,0,0,.88); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:10; }
.skip-ad-btn { position:absolute; bottom:60px; right:12px; padding:7px 16px; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3); color:#fff; font-size:13px; border-radius:6px; cursor:pointer; backdrop-filter:blur(4px); }

/* Chapters timeline */
.chapters-list { margin-top:12px; display:flex; flex-direction:column; gap:4px; }
.chapter-item { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:10px; cursor:pointer; transition:background .15s; }
.chapter-item:hover { background:var(--bg3); }
.chapter-time { font-size:13px; font-weight:700; color:var(--accent); min-width:50px; }
.chapter-name { font-size:13px; }

/* Like bar */
.like-bar { height:3px; background:var(--border); border-radius:2px; margin-top:6px; overflow:hidden; }
.like-bar-fill { height:100%; background:var(--accent-g); border-radius:2px; transition:width .6s ease; }

/* Bottom navigation — thumb-friendly */
@media (max-width:768px) {
  .bottom-nav { display:flex; height:60px; }
  .bn-item { min-width:52px; }
  .lk-main { padding-bottom:70px; }
  .card { padding:14px; }
  .section-title { font-size:15px; }
  .stat-value { font-size:20px; }
  .story-ring { width:54px; height:54px; }

  /* Watch page */
  .vplayer-wrap { border-radius:0; }
  .video-title-h { font-size:1.1rem; }
  .action-bar { gap:6px; }
  .action-pill { padding:7px 12px; font-size:13px; }
  .creator-card { padding:12px; }
  .desc-box { padding:12px; }
}

@media (max-width:480px) {
  .content-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .stat-value { font-size:18px; }
  .story-ring { width:50px; height:50px; }
  .share-sheet-grid { grid-template-columns:repeat(4,1fr); gap:8px; }
}

/* PWA safe area support */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .bottom-nav { padding-bottom:calc(8px + env(safe-area-inset-bottom)); height:auto; }
  .lk-main    { padding-bottom:calc(70px + env(safe-area-inset-bottom)); }
}

/* Touch feedback */
@media (hover:none) and (pointer:coarse) {
  .btn:active, .btn-pill:active, .action-pill:active { opacity:.75; transform:scale(.97); }
  .yt-card:active { transform:scale(.98); }
}

/* Low data mode — reduce animation on slow networks */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ================================================================
   FIX 11: Mobile UI — remove top strips, bottom-nav only
   ================================================================ */
@media (max-width: 768px) {
  /* Hide top category pill bar on mobile */
  .cat-bar { display: none !important; }

  /* Hide trending-now strip on mobile (use bottom nav instead) */
  .trending-strip,
  div[style*="padding:16px 16px 0"] { display: none !important; }

  /* KEEP the main feed grid — still show videos */
  .feed-grid,
  .content-grid,
  #feedGrid { display: grid !important; }

  /* Reduce header height on mobile */
  .navbar { height: 52px; }
  :root { --nav-h: 52px; }

  /* Body pad for bottom nav */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .lk-main { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Unified bottom nav (from renderFooter + header) ── */
.bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(9,9,15,.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  z-index: 500;
  padding: 8px 0 env(safe-area-inset-bottom, 8px);
  justify-content: space-around;
}
.mobile-bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(9,9,15,.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  z-index: 501;
  padding: 0 0 env(safe-area-inset-bottom, 0);
}

@media (max-width: 768px) {
  /* Show ONLY one bottom nav — prefer mobile-bottom-nav from header */
  .mobile-bottom-nav { display: block !important; }
  .bottom-nav { display: none !important; }
  /* Hide sidebar on mobile */
  .lk-sidebar { display: none !important; }
  .lk-main { margin-left: 0 !important; }
}

/* FIX 13: Hide trending language filter on mobile */
@media (max-width: 768px) {
  .desktop-only-filter { display: none !important; }
}

/* ================================================================
   FIX 14 CONTINUED: App-like feel completions
   ================================================================ */

/* Smooth scrolling feed */
#feedGrid, .content-grid {
  scroll-behavior: smooth;
}

/* Video card touch improvements */
.yt-card {
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease;
}
.yt-card:active { transform: scale(.97); }

/* Shorts specific mobile */
@media (max-width: 768px) {
  .shorts-shell {
    top: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
  }
  /* Hide upload FAB on very small phones to reduce clutter */
  @media (max-height: 600px) {
    .shorts-upload-fab { display: none !important; }
  }
}

/* Bottom nav link touch area */
.mbn-item, .bn-item {
  -webkit-tap-highlight-color: transparent;
  min-width: 48px;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1;
  text-decoration: none;
  color: var(--text2);
  font-size: 9px;
  font-weight: 700;
  transition: color .15s;
  cursor: pointer;
}
.mbn-item.active, .mbn-item:active { color: var(--accent); }
.mbn-item i, .bn-item i { font-size: 20px; }
.mobile-bottom-nav-inner, .bottom-nav {
  display: flex;
  height: 56px;
  align-items: stretch;
}

/* Ensure bottom-nav shows on iOS PWA */
@supports (-webkit-overflow-scrolling: touch) {
  .mobile-bottom-nav, .bottom-nav {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Hide desktop sidebar on all phones */
@media (max-width: 768px) {
  .lk-sidebar { display: none !important; }
  .lk-main { margin-left: 0 !important; padding-left: 0 !important; }
  .lk-shell { display: block !important; }
  .admin-nav { transform: translateX(-100%); }
}

/* Watch page mobile fixes */
@media (max-width: 768px) {
  .watch-grid { grid-template-columns: 1fr !important; padding: 0; gap: 0; }
  .vplayer-wrap { border-radius: 0; margin: 0; }
  .watch-sidebar { display: none; }
  .watch-main { padding: 0 12px 12px; }
}

/* PWA install banner positioning */
#pwaInstallBanner {
  transition: transform .3s ease, opacity .3s ease;
}

/* Skeleton improvements */
.skeleton {
  background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: 8px;
}
@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}


/* ── Admin-controlled mobile UI + app-like experience ────── */
@media (max-width: 768px) {
  .cat-bar { display: none !important; }
  div[style*="padding:16px 16px 0"] { display: none !important; }
  .desktop-only-filter { display: none !important; }
  .lk-sidebar { display: none !important; }
  .lk-main { margin-left: 0 !important; padding-bottom: calc(64px + env(safe-area-inset-bottom,0px)); }
  .mobile-bottom-nav { display: block !important; }
  .bottom-nav { display: none !important; }
}
@media (max-width: 768px) {
  .mobile-bottom-nav-inner, .bottom-nav { display: flex; height: 56px; align-items: stretch; }
  .mbn-item, .bn-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; text-decoration: none; color: var(--text2); font-size: 9px; font-weight: 700;
    -webkit-tap-highlight-color: transparent; min-height: 48px; cursor: pointer;
  }
  .mbn-item.active, .mbn-item:active, .bn-item.active { color: var(--accent); }
  .mbn-item i, .bn-item i { font-size: 20px; }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-bottom-nav, .bottom-nav { padding-bottom: env(safe-area-inset-bottom); }
  .lk-main { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
}
/* App-like touch */
.btn, .action-pill, .mbn-item, .bn-item { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { overscroll-behavior-y: none; }

/* ── PHASE 7: FINAL POLISH ─────────────────────────────── */

/* Smooth transitions for all interactive elements */
a, button, .btn, .tab-btn, .ch-tab, .mbn-item {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Consistent card hover on desktop */
@media(min-width:769px) {
  .yt-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.2); transition: all .2s; }
}

/* Smooth scroll globally */
html { scroll-behavior: smooth; }

/* Prevent content jump when scrollbar appears */
html { scrollbar-gutter: stable; }

/* Better focus rings for accessibility */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Fix overflow on small screens */
body { overflow-x: hidden; }

/* Mobile: bottom safe area for fixed bars */
.ch-hcard, .aic-input, .cs-fixed-bar, .cc-submit {
  padding-bottom: calc(var(--bar-pb, 0px) + env(safe-area-inset-bottom, 0px));
}

/* Consistent empty state styling */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  text-align: center;
  color: var(--text2);
  gap: 12px;
}
.empty-state i { font-size: 40px; color: var(--border); }
.empty-state p { margin: 0; font-size: 14px; }

/* Better modal animation */
.modal-overlay { transition: opacity .2s; }
.modal-overlay:not(.open) { opacity: 0; pointer-events: none; }
.modal-overlay.open { opacity: 1; }
.modal-box { transform: translateY(0); transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.modal-overlay:not(.open) .modal-box { transform: translateY(20px); }

/* Consistent button sizes */
.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 8px; }
.btn-xs { padding: 4px 8px;  font-size: 11px; border-radius: 6px; }

/* Loading skeleton animation */
@keyframes skeleton-pulse {
  0%, 100% { opacity: .6; }
  50%       { opacity: .3; }
}
.skeleton {
  background: var(--bg3);
  border-radius: 6px;
  animation: skeleton-pulse 1.4s ease infinite;
}

/* Toast improvement */
.toast-wrap { z-index: 9999 !important; }

/* Mobile: tab bar smooth active indicator */
.ch-tab.active { transition: border-bottom-color .2s, color .2s; }

/* Prevent double-tap zoom on buttons */
button, a { touch-action: manipulation; }

/* Better scrollable containers */
.ch-tabs, .cat-bar, .msg-feed {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Navigation consistency: active item indicator */
.mbn-item.active span { color: var(--accent); font-weight: 800; }

/* Fallback for broken images */
img { background: var(--bg3); }

/* Print: hide navigation */
@media print {
  .mobile-bottom-nav, .lk-sidebar, nav { display: none !important; }
}

/* ── MOBILE SIDEBAR FIX: show when .open class added by JS ── */
@media (max-width: 768px) {
  .lk-sidebar.open {
    display: block !important;
    position: fixed; top: 0; left: 0; bottom: 0;
    z-index: 600; width: 270px;
    background: var(--bg2);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    box-shadow: 8px 0 40px rgba(0,0,0,.6);
    transform: translateX(0) !important;
  }
  .sb-overlay.active {
    display: block !important;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 599;
    backdrop-filter: blur(3px);
  }
}

/* === playtube_theme.css === */
/* ================================================================
   LOKTUBE — Final Production UI
   Inspired by: YouTube (layout, cards) + PlayTube (blue, clean)
   Mobile: App-like feel (Instagram/YouTube Shorts style)
   ================================================================ */

/* ════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS — Blue Palette
   ════════════════════════════════════════════════════════════════ */
:root {
  /* Blue primary */
  --accent:    #2563eb;
  --accent2:   #1d4ed8;
  --accent3:   #60a5fa;
  --accent-g:  linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
  --accent-g2: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  --glow:      0 0 24px rgba(37,99,235,.3);

  /* Backgrounds — deep dark blue-tinted */
  --bg:    #08090f;
  --bg2:   #0e1117;
  --bg3:   #161c27;
  --bg4:   #1e2638;
  --bg5:   #252f47;

  /* Borders */
  --border:  rgba(96,165,250,.1);
  --border2: rgba(96,165,250,.18);

  /* Text */
  --text:  #e8ecf4;
  --text2: #7b8aaa;
  --text3: #3d4f72;

  /* Status */
  --green:  #10b981;
  --red:    #ef4444;
  --orange: #f59e0b;
  --purple: #8b5cf6;
  --cyan:   #06b6d4;

  /* Layout */
  --nav-h:    60px;
  --sb-w:     240px;
  --sb-w-c:   72px;
  --radius:   12px;
  --radius-lg:18px;
  --radius-xl:24px;

  /* Shadows */
  --shadow:    0 4px 20px rgba(0,0,0,.55);
  --shadow-lg: 0 12px 48px rgba(0,0,0,.75);
  --transition: all .2s cubic-bezier(.4,0,.2,1);
}

/* Light mode */
[data-theme="light"] {
  --bg:    #f3f6ff;
  --bg2:   #ffffff;
  --bg3:   #eaf0ff;
  --bg4:   #dce7ff;
  --bg5:   #cddaff;
  --border:  rgba(37,99,235,.1);
  --border2: rgba(37,99,235,.2);
  --text:    #0b1230;
  --text2:   #4a5a80;
  --text3:   #8898c0;
  --shadow:  0 4px 16px rgba(37,99,235,.08);
}

/* ════════════════════════════════════════════════════════════════
   2. RESET & BASE
   ════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: 15px;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
  height: 100%;
}
body {
  font-family: 'Segoe UI', system-ui, -apple-system, 'SF Pro Display', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, select, textarea { font-family: inherit; }

/* Page enter animation */
@media (prefers-reduced-motion: no-preference) {
  body { animation: ptEnter .22s ease; }
  @keyframes ptEnter {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
  }
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--bg5); }

/* ════════════════════════════════════════════════════════════════
   3. NAVBAR — YouTube-style clean top bar
   ════════════════════════════════════════════════════════════════ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--nav-h);
  background: rgba(8,9,15,.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
}

/* Hamburger toggle */
.sb-toggle {
  width: 40px; height: 40px;
  border-radius: 50%;
  color: var(--text2);
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.sb-toggle:hover { background: var(--bg3); color: var(--text); }

/* Logo */
.logo {
  display: flex; align-items: center; gap: 6px;
  font-size: 18px; font-weight: 900;
  color: var(--text);
  white-space: nowrap; flex-shrink: 0;
  text-decoration: none;
  letter-spacing: -.3px;
}
.logo .logo-play {
  width: 34px; height: 34px;
  background: var(--accent-g);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #fff;
  box-shadow: 0 3px 14px rgba(37,99,235,.4);
  flex-shrink: 0;
}
.logo span { color: var(--text); }
.logo b    { color: var(--accent3); }

/* Search bar — YouTube style centered pill */
.nav-search {
  flex: 1; max-width: 560px; min-width: 0;
  display: flex; position: relative; margin: 0 8px;
}
.nav-search input {
  width: 100%;
  padding: 9px 44px 9px 18px;
  border-radius: 24px;
  border: 1.5px solid var(--border2);
  background: var(--bg3);
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.nav-search input::placeholder { color: var(--text3); }
.nav-search input:focus {
  border-color: var(--accent);
  background: var(--bg2);
  box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}
.search-btn {
  position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  background: var(--accent-g);
  border-radius: 50%;
  color: #fff; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
  box-shadow: 0 2px 8px rgba(37,99,235,.35);
  cursor: pointer;
}
.search-btn:hover { transform: translateY(-50%) scale(1.08); }

/* Nav right actions */
.nav-actions {
  display: flex; align-items: center;
  gap: 6px; flex-shrink: 0; margin-left: auto;
}

/* Create / Upload button */
.nav-create-btn,
.btn-upload {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: var(--accent-g);
  color: #fff; font-size: 13px; font-weight: 700;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(37,99,235,.35);
  transition: var(--transition);
  white-space: nowrap;
}
.nav-create-btn:hover,
.btn-upload:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(37,99,235,.5);
}
.create-label, .upload-label { font-weight: 700; }

/* Nav avatar */
.nav-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--accent-g);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 14px;
  box-shadow: 0 0 0 2px var(--border2);
  transition: box-shadow .15s;
  cursor: pointer; border: none;
  flex-shrink: 0;
}
.nav-avatar:hover { box-shadow: 0 0 0 2.5px var(--accent3); }
.nav-avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-placeholder { color: #fff; font-weight: 800; font-size: 14px; }

/* Bell icon */
.nav-notif-wrap { position: relative; }
.nav-notif-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text2);
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}
.nav-notif-btn:hover {
  border-color: var(--accent3);
  color: var(--accent3);
  background: rgba(37,99,235,.08);
}
.notif-badge {
  position: absolute; top: -3px; right: -3px;
  background: var(--accent);
  color: #fff; font-size: 9px; font-weight: 800;
  min-width: 16px; height: 16px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; border: 2px solid var(--bg);
}
/* Notification panel */
.notif-panel {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 320px; max-height: 420px; overflow-y: auto;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 48px rgba(0,0,10,.75);
  display: none; z-index: 1100;
}
.notif-panel.open { display: block; animation: ddFadeIn .15s ease; }
.notif-panel-head {
  padding: 12px 16px 10px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border);
  font-size: 14px; font-weight: 700;
  position: sticky; top: 0; background: var(--bg2);
}
.notif-item {
  display: flex; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer; text-decoration: none; color: var(--text);
  transition: background .12s;
}
.notif-item:hover  { background: rgba(37,99,235,.06); }
.notif-item.unread {
  background: rgba(37,99,235,.07);
  border-left: 3px solid var(--accent);
}
.notif-icon { font-size: 20px; flex-shrink: 0; width: 28px; text-align: center; }
.notif-body .notif-title { font-size: 13px; font-weight: 600; }
.notif-body .notif-msg   { font-size: 12px; color: var(--text2); margin-top: 2px; }
.notif-body .notif-time  { font-size: 11px; color: var(--text3); margin-top: 3px; }

/* Login/Signup */
.btn-login {
  padding: 7px 14px; border-radius: 20px;
  background: transparent; border: 1.5px solid var(--border2);
  color: var(--text); font-size: 13px; cursor: pointer;
  text-decoration: none; transition: var(--transition);
}
.btn-login:hover { border-color: var(--accent3); color: var(--accent3); }
.btn-signup {
  padding: 7px 16px; border-radius: 20px;
  background: var(--accent-g); color: #fff;
  font-size: 13px; font-weight: 700;
  box-shadow: 0 2px 10px rgba(37,99,235,.35);
  transition: var(--transition); text-decoration: none;
}
.btn-signup:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(37,99,235,.5);
}

/* Profile dropdown */
.profile-menu-wrap { position: relative; }
.profile-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 230px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 48px rgba(0,0,10,.75);
  z-index: 1100; display: none; overflow: hidden;
}
.profile-dropdown.open { display: block; animation: ddFadeIn .15s ease; }
@keyframes ddFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.pd-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
}
.pd-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--accent-g); display: flex; align-items: center;
  justify-content: center; font-size: 17px; font-weight: 800;
  color: #fff; overflow: hidden; flex-shrink: 0;
}
.pd-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pd-name   { font-size: 14px; font-weight: 700; color: var(--text); }
.pd-handle { font-size: 12px; color: var(--text2); }
.pd-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px;
  font-size: 13px; font-weight: 600;
  color: var(--text); text-decoration: none;
  transition: background .12s;
}
.pd-item:hover { background: rgba(37,99,235,.07); color: var(--accent3); }
.pd-item i { width: 18px; text-align: center; color: var(--accent3); font-size: 14px; }
.pd-divider { height: 1px; background: var(--border); margin: 4px 0; }
.pd-item.danger { color: #ef4444; }
.pd-item.danger i { color: #ef4444; }
.pd-item.danger:hover { background: rgba(239,68,68,.07); }

/* ════════════════════════════════════════════════════════════════
   4. SIDEBAR — YouTube-like left sidebar
   ════════════════════════════════════════════════════════════════ */
.lk-sidebar {
  width: var(--sb-w); flex-shrink: 0;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  height: calc(100vh - var(--nav-h));
  position: sticky; top: var(--nav-h);
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--bg4) transparent;
  transition: width .25s cubic-bezier(.4,0,.2,1);
  z-index: 100;
}
.lk-sidebar::-webkit-scrollbar { width: 3px; }
.lk-sidebar::-webkit-scrollbar-thumb { background: var(--bg4); }

.sb-item {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 14px; border-radius: 10px; margin: 1px 8px;
  font-size: 13px; font-weight: 600; color: var(--text2);
  cursor: pointer; transition: all .14s; text-decoration: none;
  position: relative; white-space: nowrap;
}
.sb-item:hover {
  background: rgba(37,99,235,.08);
  color: var(--text);
}
.sb-item.active {
  background: rgba(37,99,235,.12);
  color: var(--accent3);
}
.sb-item.active::before {
  content: '';
  position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px; border-radius: 0 2px 2px 0;
  background: var(--accent);
}
.sb-item.active .sb-icon i { color: var(--accent3); }
.sb-item:hover .sb-icon    { color: var(--accent3); }
.sb-icon {
  width: 22px; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
  font-size: 16px; color: var(--text3); transition: color .14s;
}
.sb-section-title {
  font-size: 11px; font-weight: 700; color: var(--text3);
  padding: 12px 18px 6px;
  text-transform: uppercase; letter-spacing: .6px;
}
.sb-divider { height: 1px; background: var(--border); margin: 8px 16px; }
.sb-sub-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-g); overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff;
}
.sb-sub-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sb-signin-prompt { padding: 14px 16px; font-size: 13px; color: var(--text2); }
.sb-signin-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px; padding: 8px 16px; border-radius: 20px;
  background: var(--accent-g); color: #fff;
  font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none;
}
body.sb-collapsed .lk-sidebar    { width: var(--sb-w-c); }
body.sb-collapsed .sb-label      { display: none; }
body.sb-collapsed .sb-section-title { display: none; }
body.sb-collapsed .sb-item       { justify-content: center; padding: 10px 0; border-radius: 14px; }
body.sb-collapsed .sb-subs       { display: none; }

/* ════════════════════════════════════════════════════════════════
   5. CATEGORY BAR — YouTube-style chips
   ════════════════════════════════════════════════════════════════ */
.cat-bar {
  overflow-x: auto; scrollbar-width: none; padding: 10px 16px 8px;
  display: flex; gap: 8px;
  background: rgba(8,9,15,.92);
  position: sticky; top: var(--nav-h); z-index: 50;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.cat-bar::-webkit-scrollbar { display: none; }
.cat-pill {
  flex-shrink: 0; padding: 6px 16px; border-radius: 20px;
  background: var(--bg4); border: 1px solid var(--border2);
  font-size: 13px; font-weight: 600; cursor: pointer;
  white-space: nowrap; color: var(--text2); text-decoration: none;
  transition: all .16s;
}
.cat-pill:hover {
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.3);
  color: var(--accent3);
}
.cat-pill.active {
  background: var(--accent-g);
  border-color: transparent; color: #fff;
  box-shadow: 0 2px 12px rgba(37,99,235,.35);
}

/* ════════════════════════════════════════════════════════════════
   6. VIDEO CARDS — YouTube-style clean cards
   ════════════════════════════════════════════════════════════════ */
.yt-card {
  border-radius: var(--radius);
  cursor: pointer; position: relative;
  transition: transform .2s ease;
  overflow: visible;
}
.yt-card:hover { transform: translateY(-3px); }

.yt-thumb-wrap {
  position: relative; aspect-ratio: 16/9;
  border-radius: var(--radius); overflow: hidden;
  background: var(--bg3);
  box-shadow: var(--shadow);
  transition: box-shadow .25s, transform .25s;
}
.yt-card:hover .yt-thumb-wrap {
  box-shadow: 0 8px 30px rgba(37,99,235,.2);
}
.yt-thumb-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.yt-card:hover .yt-thumb-wrap img { transform: scale(1.04); }

/* Duration badge */
.yt-badge {
  position: absolute; bottom: 6px; right: 6px;
  font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 5px;
  background: rgba(0,0,0,.88); color: #fff;
  backdrop-filter: blur(6px); letter-spacing: .2px;
}
.yt-badge.live {
  background: #ef4444;
  animation: livePulse 1.5s infinite;
}
@keyframes livePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.4); }
  50%      { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}

/* Card info */
.yt-info {
  display: flex; gap: 10px; padding: 10px 2px 4px;
  align-items: flex-start;
}
.yt-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent-g); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; flex-shrink: 0;
  overflow: hidden; transition: transform .18s;
  text-decoration: none;
}
.yt-avatar:hover { transform: scale(1.1); }
.yt-avatar img { width: 100%; height: 100%; object-fit: cover; }
.yt-details { flex: 1; min-width: 0; }
.yt-title {
  font-size: 13.5px; font-weight: 600; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; color: var(--text); transition: color .14s;
}
.yt-title:hover { color: var(--accent3); }
.yt-channel { font-size: 12px; color: var(--text2); margin-top: 3px; }
.yt-meta    { font-size: 11.5px; color: var(--text3); margin-top: 2px; }

/* Remove button */
.yt-remove-btn {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0,0,0,.78); color: #fff; font-size: 14px;
  display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); transition: background .14s;
}
.yt-remove-btn:hover { background: rgba(239,68,68,.85); }
.yt-card:hover .yt-remove-btn { display: flex; }

/* ════════════════════════════════════════════════════════════════
   7. SKELETON LOADER
   ════════════════════════════════════════════════════════════════ */
@keyframes shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
.skeleton {
  background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%);
  background-size: 400% 100%;
  animation: shimmer 1.5s ease infinite;
  border-radius: var(--radius);
}
.skeleton-card { display: flex; flex-direction: column; gap: 10px; }
.skeleton-thumb { aspect-ratio: 16/9; border-radius: var(--radius); }
.skeleton-line   { height: 14px; border-radius: 6px; }
.skeleton-line-sm{ height: 11px; border-radius: 5px; width: 70%; }
.skeleton-circle { border-radius: 50% !important; }

/* ════════════════════════════════════════════════════════════════
   8. STORY RING — blue gradient
   ════════════════════════════════════════════════════════════════ */
.story-ring {
  width: 62px; height: 62px; border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #06b6d4);
  padding: 2.5px; cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.story-ring:hover {
  transform: scale(1.07);
  box-shadow: 0 4px 20px rgba(37,99,235,.45);
}
.story-ring-inner {
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--bg);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: var(--accent3);
}
.story-ring-inner img { width: 100%; height: 100%; object-fit: cover; }
.story-name {
  font-size: 11px; color: var(--text2); text-align: center;
  max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.add-story-btn {
  width: 62px; height: 62px; border-radius: 50%;
  border: 2.5px dashed var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: var(--accent);
  background: rgba(37,99,235,.07);
  cursor: pointer; transition: all .2s;
}
.add-story-btn:hover {
  background: rgba(37,99,235,.14);
  transform: scale(1.06);
}

/* ════════════════════════════════════════════════════════════════
   9. BUTTONS — Blue palette
   ════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 20px; border-radius: 24px;
  font-size: 13px; font-weight: 700;
  cursor: pointer; transition: var(--transition);
  position: relative; overflow: hidden; white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: var(--accent-g); color: #fff;
  box-shadow: 0 4px 16px rgba(37,99,235,.3);
}
.btn-primary:hover {
  box-shadow: 0 6px 24px rgba(37,99,235,.5);
  transform: translateY(-2px);
}
.btn-outline {
  background: transparent; border: 1.5px solid var(--border2); color: var(--text);
}
.btn-outline:hover { border-color: var(--accent3); color: var(--accent3); background: rgba(37,99,235,.06); }
.btn-sub { background: var(--text); color: var(--bg); }
.btn-sub:hover { opacity: .88; }
.btn-sub.subscribed { background: var(--bg4); color: var(--text); border: 1.5px solid var(--border2); }
.btn-danger { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; }
.btn-ghost { background: var(--bg3); border: 1px solid var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent3); color: var(--accent3); }
.btn-sm  { padding: 5px 14px; font-size: 12px; }
.btn-lg  { padding: 13px 28px; font-size: 15px; }
.btn-icon {
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--text); font-size: 16px; transition: var(--transition);
}
.btn-icon:hover { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--glow); transform: scale(1.08); }
.btn-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent-g); color: #fff;
  padding: 9px 22px; border-radius: 28px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 16px rgba(37,99,235,.3);
}
.btn-pill:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(37,99,235,.5); }
.btn-pill:active { transform: scale(.97); }
.btn-pill.outline {
  background: transparent; border: 1.5px solid var(--border2);
  color: var(--text); box-shadow: none;
}
.btn-pill.outline:hover { border-color: var(--accent3); color: var(--accent3); background: rgba(37,99,235,.06); }
.action-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 24px;
  font-size: 14px; font-weight: 700;
  background: var(--bg3); border: 1.5px solid var(--border);
  color: var(--text); cursor: pointer; transition: var(--transition);
}
.action-pill:hover { background: var(--bg4); border-color: var(--border2); }
.action-pill.active { background: rgba(37,99,235,.15); border-color: var(--accent); color: var(--accent3); }
.action-pill.like-btn.liked    { background: rgba(37,99,235,.15); border-color: var(--accent3); color: var(--accent3); }
.action-pill.dislike-btn.disliked { background: rgba(239,68,68,.12); border-color: #ef4444; color: #ef4444; }
.action-pill.save-btn.saved    { background: rgba(16,185,129,.12); border-color: var(--green); color: var(--green); }

/* ════════════════════════════════════════════════════════════════
   10. CARDS & LAYOUT
   ════════════════════════════════════════════════════════════════ */
.card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px;
  box-shadow: var(--shadow); transition: var(--transition);
}
.card:hover { border-color: var(--border2); }
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; gap: 10px;
}
.card-title { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.glass-card {
  background: rgba(37,99,235,.04);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(37,99,235,.1);
  border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow);
}

.lk-shell     { display: flex; min-height: calc(100vh - var(--nav-h)); }
.lk-main      { flex: 1; min-width: 0; padding: 20px 16px; }
.page-wrapper { max-width: 960px; margin: 0 auto; padding: 24px 16px; }
.home-wrap    { max-width: 1400px; margin: 0 auto; padding: 0 0 48px; }
.feed-grid    {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 20px; padding: 20px 16px;
}
.content-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }

.sb-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.55); z-index: 499;
  backdrop-filter: blur(4px);
}
body.sb-open .sb-overlay,
.sb-overlay.active,
.sb-overlay.show { display: block; }

/* ════════════════════════════════════════════════════════════════
   11. FORMS
   ════════════════════════════════════════════════════════════════ */
.form-group { margin-bottom: 18px; }
.form-label {
  display: block; font-size: 12px; font-weight: 700;
  color: var(--text2); margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: .5px;
}
.form-control, .form-input {
  width: 100%; padding: 11px 16px;
  border-radius: 12px; border: 1.5px solid var(--border);
  background: var(--bg3); color: var(--text); font-size: 14px;
  outline: none; transition: border-color .2s, box-shadow .2s; font-family: inherit;
}
.form-control:focus, .form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}
textarea.form-control { resize: vertical; min-height: 90px; }
select.form-control { appearance: none; cursor: pointer; }

/* ════════════════════════════════════════════════════════════════
   12. ALERTS, TABS, PILLS, STATS
   ════════════════════════════════════════════════════════════════ */
.alert { padding: 12px 16px; border-radius: 12px; margin-bottom: 14px; display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.alert-success { background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.25); color: #10b981; }
.alert-error   { background: rgba(239,68,68,.1);  border: 1px solid rgba(239,68,68,.25);  color: #ef4444; }
.alert-warn    { background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.25); color: #f59e0b; }
.alert-info    { background: rgba(37,99,235,.1);  border: 1px solid rgba(37,99,235,.25);  color: #60a5fa; }

.tabs { display: flex; border-bottom: 1.5px solid var(--border); gap: 0; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab-btn {
  padding: 11px 18px; font-size: 14px; font-weight: 600;
  color: var(--text2); background: none; cursor: pointer;
  border-bottom: 2.5px solid transparent; margin-bottom: -1.5px;
  transition: all .14s; white-space: nowrap; flex-shrink: 0;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent3); border-bottom-color: var(--accent); }
.tab-content { display: none; }
.tab-content.active { display: block; }

.pill { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.pill-accent { background: rgba(37,99,235,.15); color: var(--accent3); }
.pill-green  { background: rgba(16,185,129,.15); color: #10b981; }
.pill-red    { background: rgba(239,68,68,.15);  color: #ef4444; }
.pill-orange { background: rgba(245,158,11,.15); color: #f59e0b; }

.stat-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px; text-align: center;
  transition: var(--transition); position: relative; overflow: hidden;
}
.stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent-g); opacity: 0; transition: opacity .2s;
}
.stat-card:hover { border-color: var(--border2); transform: translateY(-2px); }
.stat-card:hover::before { opacity: 1; }
.stat-value { font-size: 26px; font-weight: 800; color: var(--accent3); line-height: 1.2; }
.stat-label { font-size: 12px; color: var(--text2); margin-top: 4px; font-weight: 600; }
.stats-row  { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }

.empty-state { text-align: center; padding: 60px 20px; color: var(--text2); }
.empty-state i { font-size: 52px; opacity: .2; display: block; margin-bottom: 16px; color: var(--accent3); }
.empty-state h3 { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.empty-state p  { font-size: 14px; margin-bottom: 20px; }

.section-title {
  font-size: 16px; font-weight: 800;
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
.section-title i { color: var(--accent3); }

.spinner {
  display: inline-block; width: 22px; height: 22px;
  border: 2.5px solid rgba(37,99,235,.2);
  border-top-color: var(--accent3);
  border-radius: 50%; animation: spin .65s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════
   13. WATCH PAGE
   ════════════════════════════════════════════════════════════════ */
.watch-grid   { display: flex; gap: 20px; max-width: 1400px; margin: 0 auto; padding: 16px; }
.watch-main   { flex: 1; min-width: 0; max-width: 900px; }
.watch-sidebar{ width: 360px; flex-shrink: 0; }
.vplayer-wrap {
  position: relative; aspect-ratio: 16/9;
  background: #000; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.75);
}
.vplayer-wrap video { width: 100%; height: 100%; display: block; }
.video-title-h { font-size: 1.2rem; font-weight: 800; line-height: 1.35; margin: 14px 0 6px; }
.creator-card  {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  margin-bottom: 14px; flex-wrap: wrap;
}
.sub-btn {
  padding: 8px 20px; border-radius: 22px; font-size: 14px; font-weight: 700;
  background: var(--accent-g); color: #fff;
  box-shadow: 0 2px 10px rgba(37,99,235,.3); transition: var(--transition); cursor: pointer;
}
.sub-btn:hover { transform: scale(1.04); box-shadow: 0 4px 18px rgba(37,99,235,.5); }
.sub-btn.subscribed { background: var(--bg4); color: var(--text); border: 1.5px solid var(--border2); box-shadow: none; }
.action-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.bell-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid var(--border2); background: var(--bg3); color: var(--text2);
  cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px;
  transition: var(--transition);
}
.bell-btn:hover { border-color: var(--accent3); color: var(--accent3); }
.bell-btn.active { background: rgba(37,99,235,.12); border-color: var(--accent); color: var(--accent3); }
.desc-box {
  background: var(--bg3); border-radius: var(--radius);
  padding: 14px 16px; font-size: 13.5px; line-height: 1.65; margin-bottom: 16px;
}
.like-bar { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; margin-top: 6px; }
.like-bar-fill { height: 100%; background: var(--accent-g); border-radius: 2px; transition: width .6s ease; }

/* ════════════════════════════════════════════════════════════════
   14. CHANNEL PAGE
   ════════════════════════════════════════════════════════════════ */
.channel-banner {
  width: 100%; height: 200px;
  background: linear-gradient(135deg, #0b1640, #1e3a8a, #1e40af);
  overflow: hidden; position: relative;
}
@media(min-width:600px) { .channel-banner { border-radius: var(--radius); } }
@media(min-width:960px) { .channel-banner { height: 240px; } }
.channel-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.channel-header {
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  padding: 0 16px; margin-bottom: 20px; position: relative; margin-top: -50px;
}
.channel-avatar {
  width: 100px; height: 100px; border-radius: 50%;
  border: 4px solid var(--bg); background: var(--accent-g);
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; font-weight: 800; color: #fff; flex-shrink: 0; overflow: hidden;
}
.channel-avatar img { width: 100%; height: 100%; object-fit: cover; }
.channel-name { font-size: 22px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.channel-stats { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; font-size: 13px; color: var(--text2); }
.channel-stats strong { color: var(--text); font-weight: 700; }
.verified-badge { color: #3b82f6; font-size: 14px; }

/* ════════════════════════════════════════════════════════════════
   15. ADMIN PANEL
   ════════════════════════════════════════════════════════════════ */
.admin-shell   { display: flex; min-height: 100vh; }
.admin-nav {
  width: 220px; flex-shrink: 0;
  background: var(--bg2); border-right: 1px solid var(--border);
  padding: 0; overflow-y: auto;
  position: sticky; top: 0; height: 100vh;
}
.admin-nav-brand {
  padding: 16px 16px 20px;
  font-size: 17px; font-weight: 900; color: var(--accent3);
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--border); margin-bottom: 8px;
}
.admin-nav-section { font-size: 10px; font-weight: 700; color: var(--text3); padding: 10px 16px 4px; text-transform: uppercase; letter-spacing: .5px; }
.admin-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; font-size: 13px; font-weight: 600;
  color: var(--text2); cursor: pointer; transition: all .14s;
  text-decoration: none; white-space: nowrap;
}
.admin-nav-item:hover { background: rgba(37,99,235,.08); color: var(--accent3); }
.admin-nav-item.active { background: rgba(37,99,235,.12); color: var(--accent3); border-left: 3px solid var(--accent); }
.admin-nav-item i { width: 18px; text-align: center; }
.admin-content { flex: 1; min-width: 0; padding: 24px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
  padding: 10px 12px; border-bottom: 1.5px solid var(--border2);
  font-size: 11px; font-weight: 700; color: var(--text3);
  text-align: left; text-transform: uppercase; letter-spacing: .4px;
}
.data-table td { padding: 11px 12px; border-bottom: 1px solid var(--border); color: var(--text); }
.data-table tbody tr:hover { background: rgba(37,99,235,.04); }
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }

/* ════════════════════════════════════════════════════════════════
   16. MOBILE BOTTOM NAV — App-like (YouTube/Instagram style)
   ════════════════════════════════════════════════════════════════ */
.mobile-bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(8,9,15,.97);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(96,165,250,.12);
  z-index: 500;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 768px) {
  .mobile-bottom-nav { display: block; }
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}
.mobile-bottom-nav-inner {
  display: flex; height: 58px; align-items: stretch;
}
.mbn-item {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px; text-decoration: none;
  color: var(--text3);
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px;
  transition: color .15s, transform .12s;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer; min-width: 0;
}
.mbn-item i { font-size: 21px; display: block; }
.mbn-item.active { color: var(--accent3); }
.mbn-item:active { transform: scale(.87); color: var(--accent3); }
.mbn-badge {
  position: absolute; top: 4px; right: calc(50% - 18px);
  background: var(--accent); color: #fff;
  font-size: 8px; font-weight: 800;
  padding: 1px 4px; border-radius: 8px; min-width: 14px; text-align: center;
}

/* ── Upload CENTER button (YouTube + Instagram style) ─────── */
.mbn-item[href*="upload"],
.mbn-upload-center {
  flex: 1.15;
}
.mbn-item[href*="upload"] i,
.mbn-upload-center i {
  font-size: 24px !important;
  width: 48px; height: 48px;
  background: var(--accent-g);
  border-radius: 14px;
  display: flex !important; align-items: center; justify-content: center;
  color: #fff; font-size: 22px;
  box-shadow: 0 4px 18px rgba(37,99,235,.5);
  margin-bottom: 1px;
  transition: transform .15s, box-shadow .15s;
}
.mbn-item[href*="upload"]:active i { transform: scale(.9); }
.mbn-item[href*="upload"] { color: var(--text3) !important; }
.mbn-item[href*="upload"].active { color: var(--text3) !important; }

/* ════════════════════════════════════════════════════════════════
   17. SITE FOOTER
   ════════════════════════════════════════════════════════════════ */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 16px; font-size: 12px; color: var(--text3); margin-top: 32px;
}

/* ════════════════════════════════════════════════════════════════
   18. TOAST & MINI PLAYER
   ════════════════════════════════════════════════════════════════ */
#lt-toast-container {
  position: fixed; bottom: 80px; right: 16px; z-index: 9999;
  display: flex; flex-direction: column-reverse; gap: 8px; pointer-events: none;
}
@keyframes ltToastIn { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:none} }
#mini-player {
  position: fixed; bottom: 72px; right: 16px; z-index: 900;
  width: 300px; background: var(--bg2);
  border: 1px solid var(--border2); border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.65);
  flex-direction: column;
}

/* ════════════════════════════════════════════════════════════════
   19. AI/TRENDING BADGES
   ════════════════════════════════════════════════════════════════ */
.ai-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 20px;
  font-size: 11px; font-weight: 700;
  background: rgba(37,99,235,.12); color: var(--accent3);
  border: 1px solid rgba(37,99,235,.2);
}
.trending-badge {
  background: rgba(6,182,212,.12); color: #06b6d4;
  border: 1px solid rgba(6,182,212,.2);
}

/* ════════════════════════════════════════════════════════════════
   20. RESPONSIVE — COMPLETE MOBILE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Sidebar hidden — app uses bottom nav */
  .lk-sidebar { display: none !important; }
  .lk-main    { margin-left: 0 !important; padding: 8px 8px; }
  .lk-shell   { display: block !important; }

  /* Sidebar slides in on hamburger tap */
  /* Supports BOTH: body.sb-open (old) AND .lk-sidebar.open (main.js) */
  body.sb-open .lk-sidebar,
  .lk-sidebar.open {
    display: block !important;
    position: fixed; top: 0; left: 0; bottom: 0;
    z-index: 500; width: 260px;
    box-shadow: 6px 0 40px rgba(0,0,0,.55);
    transition: transform .25s ease;
    transform: translateX(0) !important;
    background: var(--bg2);
    overflow-y: auto;
  }

  /* Navbar compact */
  .navbar { padding: 0 8px; gap: 4px; height: 54px; }
  :root   { --nav-h: 54px; }
  .nav-search input { font-size: 13px; padding: 7px 38px 7px 12px; }
  .nav-search { margin: 0 4px; }
  .create-label, .upload-label { display: none; }
  .nav-create-btn, .btn-upload { padding: 8px 10px; }

  /* Feed 2-column on phones */
  .feed-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px; padding: 8px 8px;
  }
  /* 1 col on tiny phones */
  @media (max-width: 380px) {
    .feed-grid { grid-template-columns: 1fr; gap: 12px; }
  }

  /* Category bar — only nav pills on mobile */
  #catBar { padding: 6px 8px; gap: 5px; }
  .cat-pill-topic { display: none !important; }
  .cat-nav-item   { padding: 5px 12px; font-size: 12px; }

  /* Reduce page padding */
  .page-wrapper { padding: 12px 10px; }
  .lk-main { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }

  /* Watch page — full width, no sidebar */
  .watch-grid    { flex-direction: column; padding: 0; gap: 0; }
  .watch-main    { max-width: 100%; }
  .watch-sidebar { display: none; }
  .vplayer-wrap  { border-radius: 0; }
  .video-title-h { font-size: 1.05rem; padding: 0 12px; }
  .action-bar    { padding: 0 12px; gap: 6px; }
  .creator-card  { margin: 0 12px; }
  .desc-box      { margin: 0 12px 14px; }

  /* Channel compact */
  .channel-banner { height: 160px; }
  .channel-avatar { width: 80px; height: 80px; font-size: 32px; }
  .channel-name   { font-size: 17px; }

  /* Admin nav hide on mobile */
  .admin-nav { transform: translateX(-100%); transition: transform .25s ease; }
  body.admin-nav-open .admin-nav { transform: none; }
}

@media (max-width: 480px) {
  .stat-value    { font-size: 22px; }
  .notif-panel   { right: -50px; width: calc(100vw - 16px); }
  .profile-dropdown { right: -10px; width: min(240px, calc(100vw - 20px)); }
}

/* Safe area support (iPhone home bar) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-bottom-nav { padding-bottom: env(safe-area-inset-bottom); }
  .lk-main { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* Touch interactions */
@media (hover: none) and (pointer: coarse) {
  .btn:active, .btn-pill:active   { opacity: .75; transform: scale(.97); }
  .yt-card:active                 { transform: scale(.98); }
  .yt-thumb-wrap img              { transition: none; }
  .cat-pill:active                { opacity: .8; }
  .sb-item:active                 { background: rgba(37,99,235,.1); }
}

/* ════════════════════════════════════════════════════════════════
   21. FOCUS ACCESSIBILITY
   ════════════════════════════════════════════════════════════════ */
:focus-visible { outline: 2px solid var(--accent3); outline-offset: 2px; }

/* ════════════════════════════════════════════════════════════════
   22. AD BANNER (header)
   ════════════════════════════════════════════════════════════════ */
.ad-banner {
  padding: 6px 16px; text-align: center;
  border-bottom: 1px solid var(--border); font-size: 12px;
}

/* ════════════════════════════════════════════════════════════════
   22. PLAYTUBE MOBILE POLISH — Complete App-like Experience
   ════════════════════════════════════════════════════════════════ */

/* ── Video cards on mobile — tighter + cleaner ── */
@media (max-width: 768px) {
  .yt-card { border-radius: 10px; }
  .yt-thumb-wrap { border-radius: 10px; }
  .yt-title { font-size: 13px; -webkit-line-clamp: 2; }
  .yt-meta  { font-size: 11px; }
  .yt-avatar { width: 32px; height: 32px; font-size: 12px; }
  .yt-info  { padding: 8px 0 2px; gap: 8px; }

  /* Trending strip + section titles */
  .trending-strip { padding: 10px 10px 0; }
  .section-title  { font-size: 14px; padding: 0 10px; }

  /* Stories strip tighter */
  .stories-strip { padding: 10px 10px 8px; }
  .stories-row   { gap: 12px; }
  .story-ring    { width: 54px; height: 54px; }
  .story-name    { font-size: 10px; max-width: 54px; }

  /* Cat bar pills tighter */
  .cat-pill      { padding: 5px 12px; font-size: 12px; border-radius: 16px; }
  #catBar        { gap: 6px; padding: 7px 10px 6px; }

  /* Card padding reduce */
  .card { padding: 14px; border-radius: 14px; }

  /* Stat cards */
  .stats-row   { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-value  { font-size: 22px; }
  .stat-label  { font-size: 11px; }

  /* Tabs */
  .tab-btn { padding: 9px 14px; font-size: 13px; }

  /* Form controls */
  .form-control { padding: 10px 14px; font-size: 14px; border-radius: 10px; }

  /* Buttons */
  .btn-primary, .btn-outline { font-size: 13px; padding: 8px 18px; }

  /* Action pills (watch page) */
  .action-pill { padding: 7px 14px; font-size: 13px; border-radius: 20px; }

  /* Watch page: video title in padding */
  .video-title-h { font-size: 1rem; margin: 10px 12px 6px; }

  /* Desc box */
  .desc-box { padding: 12px; font-size: 13px; margin: 0 10px 12px; }

  /* Empty state */
  .empty-state { padding: 40px 16px; }
  .empty-state i { font-size: 40px; }

  /* Channel header mobile */
  .channel-header { margin-top: -40px; gap: 12px; padding: 0 12px; }
  .channel-stats  { gap: 10px; font-size: 12px; }

  /* Comment section */
  .comments-wrap { padding: 0 10px; }

  /* Table wrap — horizontal scroll with shadow hint */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .data-table th, .data-table td { padding: 9px 10px; font-size: 12px; }

  /* Notification panel full width */
  .notif-panel { width: calc(100vw - 20px); right: -10px; }

  /* Trending pill in feed */
  .trend-pill { padding: 7px 14px; font-size: 12px; }
}

/* ── Very small phones (320px - 380px) ── */
@media (max-width: 380px) {
  :root { --nav-h: 50px; }
  .logo { font-size: 14px; }
  .logo .logo-play { width: 28px; height: 28px; font-size: 11px; }
  .feed-grid { grid-template-columns: 1fr 1fr; gap: 8px; padding: 6px; }
  .yt-title  { font-size: 12px; }
  .nav-search input { font-size: 12px; }
  .stats-row { grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* ── Landscape phone ── */
@media (max-width: 768px) and (orientation: landscape) {
  .mobile-bottom-nav-inner { height: 48px; }
  .mbn-item span { display: none; }
  .mbn-item { gap: 0; }
  :root { --nav-h: 50px; }
}

/* ── Bottom nav active indicator bar (like Instagram) ── */
.mbn-item.active::after {
  content: '';
  display: block;
  width: 20px; height: 3px;
  background: var(--accent);
  border-radius: 2px;
  margin-top: 3px;
  animation: navActivePop .2s ease;
}
@keyframes navActivePop {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.mbn-item[href*="upload"].active::after { display: none; }

/* ── Smooth scroll to top button ── */
#scrollTopBtn {
  position: fixed; bottom: 76px; right: 14px; z-index: 490;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--bg2); border: 1px solid var(--border2);
  color: var(--text2); font-size: 15px;
  display: none; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.35);
  transition: all .2s;
}
#scrollTopBtn.visible { display: flex; }
#scrollTopBtn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Pull-to-refresh indicator ── */
.ptr-indicator {
  position: fixed; top: calc(var(--nav-h) + 4px); left: 50%;
  transform: translateX(-50%) translateY(-60px);
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 20px; padding: 6px 16px; font-size: 12px;
  font-weight: 700; color: var(--text2);
  display: flex; align-items: center; gap: 8px;
  z-index: 999; transition: transform .3s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.ptr-indicator.visible { transform: translateX(-50%) translateY(0); }

/* ── Mobile search bar improvement ── */
@media (max-width: 480px) {
  .nav-search { flex: 1; min-width: 0; }
  .nav-search input { border-radius: 20px; }
  .search-btn { right: 3px; width: 30px; height: 30px; font-size: 12px; }
}

/* ── Mobile: hide language + extra nav elements on very small ── */
@media (max-width: 500px) {
  #langWrap { display: none; }
  .nav-trend-pill { display: none; }
  .nav-quicklinks { display: none; }
  .nav-earn-chip  { display: none; }
}
@media (max-width: 640px) {
  #langWrap { display: none; }
  .nav-quicklinks { display: none; }
}
@media (max-width: 768px) {
  .nav-trend-pill { display: none; }
  .nav-earn-chip  { display: none; }
}

/* ── Mobile: Watch page action bar wrap ── */
@media (max-width: 480px) {
  .action-bar { gap: 5px; }
  .action-pill { padding: 6px 11px; font-size: 12px; gap: 5px; }
}

/* ── Mobile grid for channel page ── */
@media (max-width: 768px) {
  .channel-grid-2 { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
}

/* ── Floating notif bell on mobile ── */
@media (max-width: 768px) {
  .nav-notif-btn { width: 32px; height: 32px; font-size: 14px; }
  .notif-badge   { width: 14px; height: 14px; font-size: 8px; top: -2px; right: -2px; }
}

/* ── Admin panel mobile ── */
@media (max-width: 900px) {
  .admin-shell    { flex-direction: column; }
  .admin-nav      {
    position: fixed; top: 0; left: -260px; height: 100vh;
    width: 260px; z-index: 9000;
    transition: left .25s ease;
    box-shadow: none;
  }
  .admin-nav.open { left: 0; box-shadow: 4px 0 32px rgba(0,0,0,.5); }
  .admin-content  { margin-left: 0 !important; padding: 12px; }
  .admin-overlay  {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.55); z-index: 8999;
  }
  .admin-nav.open ~ .admin-overlay,
  body.admin-nav-open .admin-overlay { display: block; }
}

/* ── Card hover effects off on touch devices ── */
@media (hover: none) {
  .yt-card:hover           { transform: none; }
  .yt-card:hover .yt-thumb-wrap img { transform: none; }
  .btn-primary:hover       { transform: none; box-shadow: 0 4px 16px rgba(37,99,235,.3); }
  .stat-card:hover         { transform: none; }
}

/* ── Ad Dashboard styles (admin/ad_dashboard.php) ── */
.adb-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; margin-bottom:24px; }
.adb-stat { background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:16px; position:relative; overflow:hidden; }
.adb-stat::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; }
.adb-stat.blue::before   { background:linear-gradient(90deg,#2563eb,#06b6d4); }
.adb-stat.green::before  { background:linear-gradient(90deg,#10b981,#06b6d4); }
.adb-stat.orange::before { background:linear-gradient(90deg,#f59e0b,#ef4444); }
.adb-stat.purple::before { background:linear-gradient(90deg,#8b5cf6,#ec4899); }
.adb-stat.teal::before   { background:linear-gradient(90deg,#06b6d4,#2563eb); }
.adb-stat.red::before    { background:linear-gradient(90deg,#ef4444,#f97316); }
.adb-val   { font-size:22px; font-weight:900; color:var(--text); line-height:1.1; }
.adb-label { font-size:11px; color:var(--text2); margin-top:5px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.adb-delta       { font-size:11px; font-weight:700; margin-top:3px; }
.adb-delta.up    { color:#10b981; }
.adb-delta.down  { color:#ef4444; }
.adb-delta.flat  { color:var(--text3); }
.hour-cell {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:28px; border-radius:6px; font-size:10px; font-weight:700;
  color:#fff; margin:1px; cursor:default; transition:transform .1s;
}
.hour-cell:hover { transform:scale(1.2); z-index:1; position:relative; }
@media(max-width:768px) {
  .adb-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .adb-val  { font-size:18px; }
  .hour-cell{ width:28px; height:22px; font-size:9px; }
}

/* === polish.css === */
/* ================================================================
   LOKTUBE — Final Polish CSS
   Har page ko clean, crisp, professional banata hai
   PlayTube/YouTube jaise premium feel
   ================================================================ */

/* ── Google Font: Nunito (Indian friendly, clean, modern) ── */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap');

:root {
  --font: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --radius:    12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --transition: all .2s cubic-bezier(.4,0,.2,1);
}

body { font-family: var(--font); }

/* ════════════════════════════════════════════════════════════════
   NAVBAR — Crisp, clean, sticky
   ════════════════════════════════════════════════════════════════ */
.navbar {
  background: rgba(8,9,15,.96) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid rgba(96,165,250,.1) !important;
  height: 60px !important;
}
.logo { letter-spacing: -.5px; }
.logo b { color: #60a5fa; }
.logo .logo-play {
  background: linear-gradient(135deg,#2563eb,#06b6d4) !important;
  box-shadow: 0 3px 14px rgba(37,99,235,.4);
}
.nav-search input {
  border-radius: 26px !important;
  background: rgba(22,28,39,.9) !important;
  border: 1.5px solid rgba(96,165,250,.15) !important;
  font-family: var(--font);
}
.nav-search input:focus {
  border-color: #2563eb !important;
  background: rgba(30,38,56,.95) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.14) !important;
}
.search-btn { background: linear-gradient(135deg,#2563eb,#06b6d4) !important; }
.nav-create-btn, .btn-upload {
  background: linear-gradient(135deg,#2563eb,#06b6d4) !important;
  border-radius: 22px !important;
  font-family: var(--font);
  font-weight: 800 !important;
  letter-spacing: -.2px;
}
.nav-avatar { box-shadow: 0 0 0 2.5px rgba(96,165,250,.25); }

/* ════════════════════════════════════════════════════════════════
   SIDEBAR — Clean lines, blue accents
   ════════════════════════════════════════════════════════════════ */
.lk-sidebar {
  background: rgba(13,17,23,.98) !important;
  border-right: 1px solid rgba(96,165,250,.08) !important;
}
.sb-item {
  border-radius: 10px;
  margin: 2px 8px;
  font-weight: 700;
  font-family: var(--font);
  transition: all .15s ease !important;
}
.sb-item:hover { background: rgba(37,99,235,.1) !important; color: #93c5fd !important; }
.sb-item.active { background: rgba(37,99,235,.15) !important; color: #60a5fa !important; font-weight: 800 !important; }
.sb-item.active::before { background: #2563eb !important; width: 3px; border-radius: 0 3px 3px 0; }
.sb-section-title { font-family: var(--font); letter-spacing: .8px; font-size: 10px !important; }

/* ════════════════════════════════════════════════════════════════
   VIDEO CARDS — Premium hover, clean type
   ════════════════════════════════════════════════════════════════ */
.yt-card { transition: transform .2s ease !important; }
.yt-card:hover { transform: translateY(-4px) !important; }
.yt-thumb-wrap {
  border-radius: 12px !important;
  overflow: hidden;
}
.yt-card:hover .yt-thumb-wrap {
  box-shadow: 0 10px 32px rgba(37,99,235,.25) !important;
}
.yt-title {
  font-family: var(--font);
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  letter-spacing: -.1px;
}
.yt-title:hover { color: #60a5fa !important; }
.yt-channel { font-size: 12px !important; font-weight: 600 !important; }
.yt-meta    { font-size: 11.5px !important; color: #3d4f72 !important; }
.yt-badge {
  font-size: 11px !important;
  font-weight: 800 !important;
  background: rgba(0,0,0,.9) !important;
  border-radius: 5px !important;
  letter-spacing: .2px;
}
.yt-avatar {
  background: linear-gradient(135deg,#2563eb,#06b6d4) !important;
  border-radius: 50% !important;
}

/* ════════════════════════════════════════════════════════════════
   CATEGORY BAR — Polished chips
   ════════════════════════════════════════════════════════════════ */
.cat-bar {
  background: rgba(8,9,15,.94) !important;
  backdrop-filter: blur(18px) !important;
  padding: 9px 16px 8px !important;
  gap: 7px !important;
}
.cat-pill {
  font-family: var(--font);
  font-weight: 700 !important;
  border-radius: 22px !important;
  font-size: 13px !important;
  padding: 6px 16px !important;
  border: 1.5px solid rgba(96,165,250,.12) !important;
  background: rgba(22,28,39,.8) !important;
  transition: all .16s ease !important;
}
.cat-pill:hover {
  background: rgba(37,99,235,.12) !important;
  border-color: rgba(37,99,235,.3) !important;
  color: #93c5fd !important;
}
.cat-pill.active {
  background: linear-gradient(135deg,#2563eb,#06b6d4) !important;
  border-color: transparent !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: 0 3px 14px rgba(37,99,235,.4) !important;
}

/* ════════════════════════════════════════════════════════════════
   STORIES — Blue ring gradient
   ════════════════════════════════════════════════════════════════ */
.story-ring {
  background: linear-gradient(135deg,#2563eb,#06b6d4,#8b5cf6) !important;
  padding: 2.5px !important;
}
.story-ring-inner { background: #0e1117 !important; }
.add-story-btn {
  border-color: #2563eb !important;
  background: rgba(37,99,235,.08) !important;
  color: #60a5fa !important;
}

/* ════════════════════════════════════════════════════════════════
   BUTTONS — Sharp, confident
   ════════════════════════════════════════════════════════════════ */
.btn, .btn-pill, .btn-primary, .btn-outline, .action-pill {
  font-family: var(--font) !important;
  font-weight: 700 !important;
  letter-spacing: -.1px;
}
.btn-primary, .btn-pill {
  background: linear-gradient(135deg,#2563eb,#06b6d4) !important;
  box-shadow: 0 4px 16px rgba(37,99,235,.3) !important;
}
.btn-primary:hover, .btn-pill:hover {
  box-shadow: 0 6px 22px rgba(37,99,235,.5) !important;
  transform: translateY(-2px) !important;
}
.btn-outline {
  border-color: rgba(96,165,250,.22) !important;
}
.btn-outline:hover { border-color: #2563eb !important; color: #60a5fa !important; background: rgba(37,99,235,.07) !important; }
.sub-btn {
  background: linear-gradient(135deg,#2563eb,#06b6d4) !important;
  font-family: var(--font) !important;
  font-weight: 800 !important;
}
.sub-btn.subscribed {
  background: rgba(30,38,56,.9) !important;
  border: 1.5px solid rgba(96,165,250,.2) !important;
  color: #7b8aaa !important;
}
.action-pill.liked    { background: rgba(37,99,235,.18) !important; border-color: #2563eb !important; color: #60a5fa !important; }
.action-pill.disliked { background: rgba(239,68,68,.12)  !important; border-color: #ef4444 !important; color: #ef4444 !important; }

/* ════════════════════════════════════════════════════════════════
   CARDS — Elevated feel
   ════════════════════════════════════════════════════════════════ */
.card {
  background: rgba(14,17,23,.95) !important;
  border: 1px solid rgba(96,165,250,.09) !important;
  border-radius: 16px !important;
  transition: border-color .18s ease !important;
}
.card:hover { border-color: rgba(96,165,250,.18) !important; }
.card-title {
  font-family: var(--font);
  font-weight: 800 !important;
  letter-spacing: -.2px;
}

/* ════════════════════════════════════════════════════════════════
   WATCH PAGE — Cinematic
   ════════════════════════════════════════════════════════════════ */
.vplayer-wrap {
  border-radius: 14px !important;
  box-shadow: 0 16px 56px rgba(0,0,0,.8) !important;
  overflow: hidden;
}
.video-title-h {
  font-family: var(--font);
  font-weight: 900 !important;
  font-size: 1.18rem !important;
  letter-spacing: -.3px;
  line-height: 1.35;
}
.creator-card {
  border-radius: 14px !important;
  background: rgba(22,28,39,.7) !important;
  border: 1px solid rgba(96,165,250,.08) !important;
}
.desc-box {
  border-radius: 14px !important;
  background: rgba(22,28,39,.7) !important;
  font-family: var(--font);
  line-height: 1.7 !important;
}
.action-pill {
  border-radius: 22px !important;
  background: rgba(22,28,39,.8) !important;
  border: 1.5px solid rgba(96,165,250,.12) !important;
}
.action-pill:hover {
  background: rgba(37,99,235,.12) !important;
  border-color: rgba(37,99,235,.3) !important;
}

/* ════════════════════════════════════════════════════════════════
   FORMS — Polished inputs
   ════════════════════════════════════════════════════════════════ */
.form-control, .form-input {
  font-family: var(--font) !important;
  background: rgba(22,28,39,.8) !important;
  border: 1.5px solid rgba(96,165,250,.12) !important;
  border-radius: 12px !important;
  font-size: 14px !important;
}
.form-control:focus, .form-input:focus {
  border-color: #2563eb !important;
  background: rgba(30,38,56,.9) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.14) !important;
}
.form-label {
  font-family: var(--font);
  font-size: 11px !important;
  letter-spacing: .6px !important;
  font-weight: 800 !important;
  color: #7b8aaa !important;
}

/* ════════════════════════════════════════════════════════════════
   TABS — Clean underline style
   ════════════════════════════════════════════════════════════════ */
.tab-btn {
  font-family: var(--font) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}
.tab-btn.active { color: #60a5fa !important; border-bottom-color: #2563eb !important; font-weight: 800 !important; }

/* ════════════════════════════════════════════════════════════════
   NOTIFICATION PANEL — Glass style
   ════════════════════════════════════════════════════════════════ */
.notif-panel {
  background: rgba(13,17,23,.98) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(96,165,250,.12) !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 60px rgba(0,0,10,.8) !important;
}
.notif-item.unread { background: rgba(37,99,235,.08) !important; border-left: 3px solid #2563eb !important; }
.notif-item:hover  { background: rgba(37,99,235,.06) !important; }

/* Profile dropdown polish */
.profile-dropdown {
  background: rgba(13,17,23,.98) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(96,165,250,.12) !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 60px rgba(0,0,10,.8) !important;
}
.pd-item:hover { background: rgba(37,99,235,.08) !important; color: #93c5fd !important; }
.pd-item i     { color: #60a5fa !important; }

/* ════════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV — App quality
   ════════════════════════════════════════════════════════════════ */
.mobile-bottom-nav {
  background: rgba(8,9,15,.98) !important;
  border-top: 1px solid rgba(96,165,250,.1) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
}
.mbn-item {
  font-family: var(--font) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .3px !important;
  color: #3d4f72 !important;
}
.mbn-item.active { color: #60a5fa !important; }
.mbn-item i { font-size: 22px !important; }

/* Upload center button */
.mbn-item[href*="upload"] i,
.mbn-upload-center i {
  background: linear-gradient(135deg,#2563eb,#06b6d4) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 20px rgba(37,99,235,.55) !important;
  width: 48px !important; height: 48px !important;
}

/* ════════════════════════════════════════════════════════════════
   SECTION TITLES — Confident headings
   ════════════════════════════════════════════════════════════════ */
.section-title {
  font-family: var(--font) !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  letter-spacing: -.3px;
}
.section-title i { color: #60a5fa !important; }

/* ════════════════════════════════════════════════════════════════
   CHANNEL PAGE — Hero banner polish
   ════════════════════════════════════════════════════════════════ */
.channel-banner {
  background: linear-gradient(135deg,#0d1b3e,#1e3a8a,#1e40af) !important;
}
.channel-name {
  font-family: var(--font) !important;
  font-weight: 900 !important;
  letter-spacing: -.4px;
}
.verified-badge { color: #60a5fa !important; }

/* ════════════════════════════════════════════════════════════════
   STAT CARDS — Premium look
   ════════════════════════════════════════════════════════════════ */
.stat-card {
  background: rgba(14,17,23,.95) !important;
  border: 1px solid rgba(96,165,250,.09) !important;
  border-radius: 16px !important;
}
.stat-card::before { background: linear-gradient(90deg,#2563eb,#06b6d4) !important; }
.stat-value {
  font-family: var(--font) !important;
  font-weight: 900 !important;
  color: #60a5fa !important;
}
.stat-label { font-family: var(--font) !important; font-weight: 700 !important; }

/* ════════════════════════════════════════════════════════════════
   TABLE — Admin data tables
   ════════════════════════════════════════════════════════════════ */
.data-table th {
  font-family: var(--font) !important;
  font-weight: 800 !important;
  font-size: 10px !important;
  letter-spacing: .8px !important;
  color: #3d4f72 !important;
  border-bottom: 2px solid rgba(96,165,250,.1) !important;
}
.data-table td { font-family: var(--font) !important; font-size: 13px !important; }
.data-table tbody tr:hover { background: rgba(37,99,235,.04) !important; }
.table-wrap { border-radius: 14px !important; border-color: rgba(96,165,250,.09) !important; }

/* Pill badges */
.pill-accent { background: rgba(37,99,235,.15) !important; color: #60a5fa !important; }
.pill-green  { background: rgba(16,185,129,.15) !important; color: #10b981 !important; }
.pill-red    { background: rgba(239,68,68,.15)  !important; color: #ef4444 !important; }
.pill-orange { background: rgba(245,158,11,.15) !important; color: #f59e0b !important; }

/* ════════════════════════════════════════════════════════════════
   SHORTS FEED — TikTok-quality
   ════════════════════════════════════════════════════════════════ */
.short-action i {
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.6)) !important;
  transition: transform .15s ease !important;
}
.short-action:active i { transform: scale(.85) !important; }
.short-action.liked i  { color: #ef4444 !important; }
.short-sub-btn {
  font-family: var(--font) !important;
  font-weight: 800 !important;
  border-radius: 22px !important;
}
.short-sub-btn.subbed {
  background: linear-gradient(135deg,rgba(37,99,235,.6),rgba(6,182,212,.5)) !important;
  border-color: transparent !important;
}
.comment-drawer {
  border-radius: 24px 24px 0 0 !important;
  background: rgba(13,17,23,.98) !important;
  backdrop-filter: blur(20px) !important;
}
.drawer-header { font-family: var(--font) !important; font-weight: 900 !important; }
.share-sheet {
  border-radius: 24px 24px 0 0 !important;
  background: rgba(13,17,23,.98) !important;
  backdrop-filter: blur(20px) !important;
}
.share-option { border-radius: 14px !important; }
.share-option span { font-family: var(--font) !important; font-weight: 700 !important; }
.shorts-upload-fab {
  background: linear-gradient(135deg,#2563eb,#06b6d4) !important;
  box-shadow: 0 6px 24px rgba(37,99,235,.5) !important;
  font-family: var(--font) !important;
  font-weight: 800 !important;
  border-radius: 28px !important;
}

/* ════════════════════════════════════════════════════════════════
   SHORTS UPLOADER — Instagram Reels quality
   ════════════════════════════════════════════════════════════════ */
.su-hero {
  background: linear-gradient(135deg,#1e3a8a,#2563eb,#06b6d4) !important;
  border-radius: 18px !important;
  position: relative; overflow: hidden;
}
.su-hero::before {
  content: '';
  position: absolute; top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at 70% 30%, rgba(255,255,255,.08) 0%, transparent 60%);
  pointer-events: none;
}
.su-card {
  background: rgba(14,17,23,.95) !important;
  border: 1px solid rgba(96,165,250,.09) !important;
  border-radius: 16px !important;
  transition: border-color .18s !important;
}
.su-card:hover { border-color: rgba(96,165,250,.18) !important; }
.su-card-title {
  font-family: var(--font) !important;
  font-weight: 800 !important;
  letter-spacing: .5px !important;
}
.su-dropzone {
  border: 2px dashed rgba(96,165,250,.2) !important;
  border-radius: 14px !important;
  background: rgba(22,28,39,.6) !important;
  transition: all .2s ease !important;
}
.su-dropzone:hover, .su-dropzone.drag {
  border-color: #2563eb !important;
  background: rgba(37,99,235,.06) !important;
}
.su-steps .su-step.active { background: linear-gradient(90deg,#2563eb,#06b6d4) !important; }
.su-steps .su-step.done  { background: #10b981 !important; }
.su-submit-bar {
  background: rgba(8,9,15,.97) !important;
  backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(96,165,250,.1) !important;
}

/* ════════════════════════════════════════════════════════════════
   AI CONSOLE — Terminal feel
   ════════════════════════════════════════════════════════════════ */
.aic-chat {
  background: rgba(10,12,20,.98) !important;
  border: 1px solid rgba(99,102,241,.2) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 40px rgba(0,0,10,.6) !important;
}
.aic-head {
  background: rgba(14,17,23,.9) !important;
  border-bottom-color: rgba(99,102,241,.15) !important;
}
.aic-msgs { background: transparent !important; }
.aic-msg.ai .aic-bubble {
  background: rgba(22,28,39,.9) !important;
  border: 1px solid rgba(99,102,241,.15) !important;
  border-radius: 18px 18px 18px 4px !important;
  font-family: var(--font) !important;
}
.aic-msg.user .aic-bubble {
  background: linear-gradient(135deg,#2563eb,#1d4ed8) !important;
  border-radius: 18px 18px 4px 18px !important;
  font-family: var(--font) !important;
}
.aic-bar {
  background: rgba(14,17,23,.9) !important;
  border-top-color: rgba(99,102,241,.1) !important;
}
.aic-bar textarea {
  background: rgba(22,28,39,.8) !important;
  border-color: rgba(99,102,241,.15) !important;
  border-radius: 14px !important;
  font-family: var(--font) !important;
}
.aic-bar textarea:focus { border-color: #6366f1 !important; box-shadow: 0 0 0 3px rgba(99,102,241,.14) !important; }
.aic-send { background: linear-gradient(135deg,#6366f1,#8b5cf6) !important; }
.aic-panel {
  background: rgba(13,17,23,.95) !important;
  border: 1px solid rgba(99,102,241,.12) !important;
  border-radius: 14px !important;
}
.aic-ptitle { color: #818cf8 !important; font-family: var(--font) !important; }
.qbtn {
  font-family: var(--font) !important;
  font-weight: 700 !important;
  background: rgba(22,28,39,.7) !important;
  border-color: rgba(99,102,241,.12) !important;
}
.qbtn:hover { border-color: #6366f1 !important; color: #818cf8 !important; background: rgba(99,102,241,.08) !important; }
.ai-av.ai { background: linear-gradient(135deg,#6366f1,#8b5cf6) !important; }
pre { font-family: 'Fira Code','Cascadia Code',monospace !important; font-size: 12px !important; background: rgba(10,12,20,.9) !important; border: 1px solid rgba(99,102,241,.1) !important; border-radius: 10px !important; }
code { font-family: 'Fira Code','Cascadia Code',monospace !important; background: rgba(99,102,241,.12) !important; color: #a5b4fc !important; border-radius: 5px !important; }

/* ════════════════════════════════════════════════════════════════
   AD DASHBOARD — Clean metrics
   ════════════════════════════════════════════════════════════════ */
.adb-stat {
  background: rgba(14,17,23,.95) !important;
  border: 1px solid rgba(96,165,250,.09) !important;
  border-radius: 16px !important;
  transition: border-color .18s, transform .18s !important;
}
.adb-stat:hover { border-color: rgba(96,165,250,.2) !important; transform: translateY(-2px) !important; }
.adb-val   { font-family: var(--font) !important; font-weight: 900 !important; letter-spacing: -.5px; }
.adb-label { font-family: var(--font) !important; font-weight: 800 !important; }

/* ════════════════════════════════════════════════════════════════
   ADMIN PANEL — Professional
   ════════════════════════════════════════════════════════════════ */
.admin-nav {
  background: rgba(10,12,20,.98) !important;
  border-right: 1px solid rgba(96,165,250,.08) !important;
}
.admin-nav-item {
  font-family: var(--font) !important;
  font-weight: 700 !important;
  border-radius: 8px;
  margin: 1px 8px;
  font-size: 13px !important;
}
.admin-nav-item:hover  { background: rgba(37,99,235,.1) !important; color: #93c5fd !important; }
.admin-nav-item.active { background: rgba(37,99,235,.15) !important; color: #60a5fa !important; font-weight: 800 !important; border-left: 3px solid #2563eb !important; }
.admin-logo { font-family: var(--font) !important; font-weight: 900 !important; letter-spacing: -.4px; color: #60a5fa !important; }
.admin-content { background: var(--bg) !important; }

/* ════════════════════════════════════════════════════════════════
   TOAST — Crisp notifications
   ════════════════════════════════════════════════════════════════ */
#lt-toast-container > div {
  font-family: var(--font) !important;
  font-weight: 700 !important;
  border-radius: 28px !important;
  padding: 10px 22px !important;
  animation: ltToastIn .25s cubic-bezier(.34,1.56,.64,1) !important;
}

/* ════════════════════════════════════════════════════════════════
   ALERTS — Color coded
   ════════════════════════════════════════════════════════════════ */
.alert { font-family: var(--font) !important; font-weight: 600 !important; border-radius: 12px !important; }

/* ════════════════════════════════════════════════════════════════
   EMPTY STATES
   ════════════════════════════════════════════════════════════════ */
.empty-state h3 { font-family: var(--font) !important; font-weight: 800 !important; }
.empty-state i  { color: #60a5fa !important; opacity: .25 !important; }

/* ════════════════════════════════════════════════════════════════
   SPINNER
   ════════════════════════════════════════════════════════════════ */
.spinner { border-color: rgba(37,99,235,.2) !important; border-top-color: #60a5fa !important; }

/* ════════════════════════════════════════════════════════════════
   SKELETON — Refined shimmer
   ════════════════════════════════════════════════════════════════ */
.skeleton {
  background: linear-gradient(90deg,rgba(22,28,39,.8) 25%,rgba(30,38,56,.9) 50%,rgba(22,28,39,.8) 75%) !important;
  background-size: 400% 100% !important;
}

/* ════════════════════════════════════════════════════════════════
   SCROLLBAR — Thin and clean
   ════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px !important; height: 5px !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb { background: rgba(37,99,235,.2) !important; border-radius: 4px !important; }
::-webkit-scrollbar-thumb:hover { background: rgba(37,99,235,.4) !important; }

/* ════════════════════════════════════════════════════════════════
   FOCUS — Accessible but styled
   ════════════════════════════════════════════════════════════════ */
:focus-visible { outline: 2px solid #2563eb !important; outline-offset: 3px !important; border-radius: 4px !important; }

/* ════════════════════════════════════════════════════════════════
   LIGHT MODE — Clean whites
   ════════════════════════════════════════════════════════════════ */
[data-theme="light"] .yt-card:hover .yt-thumb-wrap { box-shadow: 0 8px 28px rgba(37,99,235,.2) !important; }
[data-theme="light"] .card   { background: #fff !important; border-color: rgba(37,99,235,.1) !important; }
[data-theme="light"] .navbar { background: rgba(255,255,255,.96) !important; }
[data-theme="light"] .lk-sidebar { background: #f8faff !important; }
[data-theme="light"] .cat-pill   { background: rgba(37,99,235,.07) !important; }

/* ════════════════════════════════════════════════════════════════
   MICRO-INTERACTIONS
   ════════════════════════════════════════════════════════════════ */
@media (hover: hover) {
  .yt-card:hover .yt-thumb-wrap img { transform: scale(1.04) !important; }
  .sb-item:hover .sb-icon i { color: #60a5fa !important; transform: scale(1.1) !important; }
  .nav-avatar:hover { box-shadow: 0 0 0 3px #2563eb !important; }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE POLISH
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .yt-title  { font-size: 13px !important; }
  .yt-channel{ font-size: 12px !important; }
  .cat-pill  { font-size: 12px !important; padding: 5px 13px !important; }
  .card      { border-radius: 14px !important; padding: 14px !important; }
  .section-title { font-size: 15px !important; }
  .stat-value { font-size: 22px !important; }
  .tab-btn { font-size: 13px !important; padding: 9px 14px !important; }
  .form-control { font-size: 16px !important; } /* Prevents iOS zoom */
}

/* === v55_fixes.css === */
/* ============================================================
   LOKTUBE V55 — v55_fixes.css
   Fixes: Bottom nav, Upload FAB, Full-screen search,
          Full light/dark theme, Clean UI, Mobile polish
   ============================================================ */

/* ── 1. FULL LIGHT / DARK THEME ─────────────────────────────── */

/* Dark mode baseline (already set in header, reinforced here) */
:root,
[data-theme="dark"],
body:not([data-theme="light"]) {
  --bg:    #09090f;
  --bg2:   #0f0f18;
  --bg3:   #171724;
  --bg4:   #1f1f2e;
  --bg5:   #262636;
  --text:  #f0f0f8;
  --text2: #8888a8;
  --text3: #4a4a68;
  --border: rgba(255,255,255,.08);
  --border2: rgba(255,255,255,.13);
  --card-bg: #0f0f18;
}

/* FULL light mode — every surface covered */
[data-theme="light"],
[data-theme="light"] body {
  --bg:    #f5f7fa;
  --bg2:   #ffffff;
  --bg3:   #edf0f5;
  --bg4:   #dde3ed;
  --bg5:   #cdd6e6;
  --text:  #0d1117;
  --text2: #536471;
  --text3: #8899a6;
  --border:  rgba(0,0,0,.1);
  --border2: rgba(0,0,0,.16);
  --card-bg: #ffffff;
  color-scheme: light;
}

[data-theme="light"] body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Navbar */
[data-theme="light"] .navbar,
[data-theme="light"] nav.top-nav,
[data-theme="light"] header.site-header {
  background: rgba(245,247,250,.97) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Sidebar */
[data-theme="light"] .lk-sidebar,
[data-theme="light"] aside.sidebar,
[data-theme="light"] .left-sidebar {
  background: #fff !important;
  border-right: 1px solid var(--border) !important;
}
[data-theme="light"] .sidebar-item:hover { background: rgba(0,0,0,.05) !important; }
[data-theme="light"] .sidebar-item.active { background: rgba(255,103,31,.1) !important; }

/* Bottom nav */
[data-theme="light"] .mobile-bottom-nav,
[data-theme="light"] .bottom-nav {
  background: rgba(255,255,255,.97) !important;
  border-top: 1px solid var(--border) !important;
}

/* Cards */
[data-theme="light"] .video-card,
[data-theme="light"] .yt-card,
[data-theme="light"] .su-card,
[data-theme="light"] .admin-stat-card,
[data-theme="light"] .chart-wrap {
  background: #fff !important;
  border-color: rgba(0,0,0,.09) !important;
}

/* Inputs */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="search"],
[data-theme="light"] input[type="url"],
[data-theme="light"] textarea,
[data-theme="light"] select,
[data-theme="light"] .form-control {
  background: #fff !important;
  border-color: rgba(0,0,0,.15) !important;
  color: var(--text) !important;
}

/* Modals */
[data-theme="light"] .modal-box,
[data-theme="light"] .modal-content,
[data-theme="light"] .popup-content,
[data-theme="light"] .comment-drawer {
  background: #fff !important;
  border-color: rgba(0,0,0,.1) !important;
}

/* Admin panel */
[data-theme="light"] .admin-sidebar,
[data-theme="light"] .admin-nav,
[data-theme="light"] .admin-main { background: var(--bg) !important; }

[data-theme="light"] .admin-table th {
  background: rgba(0,0,0,.04) !important;
  color: var(--text2) !important;
}

[data-theme="light"] .admin-table td {
  border-bottom-color: rgba(0,0,0,.06) !important;
}

[data-theme="light"] .profile-dropdown {
  background: #fff !important;
  border-color: rgba(0,0,0,.1) !important;
}

/* ── 2. BOTTOM NAV — FIXED, PROPER, NO-SCROLL ───────────────── */

.mobile-bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 500 !important;
  /* Glass effect */
  background: rgba(9,9,15,.92) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  /* GPU acceleration — prevents iOS scroll jump */
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  /* No transition — instant, never "scrolls away" */
  transition: none !important;
}

[data-theme="light"] .mobile-bottom-nav {
  background: rgba(255,255,255,.95) !important;
  border-top-color: rgba(0,0,0,.1) !important;
}

.mobile-bottom-nav-inner {
  display: flex !important;
  height: 56px !important;
  align-items: stretch !important;
  /* Make room for the center FAB */
  padding: 0 4px !important;
}

.mbn-item {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  text-decoration: none !important;
  color: var(--text2) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  transition: color .15s !important;
  position: relative !important;
  -webkit-tap-highlight-color: transparent !important;
  min-width: 0 !important;
}

.mbn-item i { font-size: 20px !important; }
.mbn-item.active,
.mbn-item:active { color: var(--accent) !important; }

/* Active top-line indicator */
.mbn-item.active::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 20px !important;
  height: 2px !important;
  background: var(--accent) !important;
  border-radius: 0 0 4px 4px !important;
}

/* Body padding to prevent content hiding behind nav */
@media (max-width: 768px) {
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important; }
  .mobile-bottom-nav { display: block !important; }
}

/* ── 3. UPLOAD FAB — CENTER PLUS BUTTON ─────────────────────── */

/* Reserve center slot — hide normal mbn-item for create, show FAB instead */
.mbn-item.mbn-create-slot {
  pointer-events: none !important;
  opacity: 0 !important;
  flex: 1 !important;
}

/* The FAB itself */
.upload-fab {
  position: fixed !important;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 12px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 501 !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--accent), #e55a14) !important;
  border: none !important;
  color: #fff !important;
  font-size: 22px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 20px rgba(255,103,31,.5), 0 2px 6px rgba(0,0,0,.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s !important;
  -webkit-tap-highlight-color: transparent !important;
}

.upload-fab:hover,
.upload-fab:active {
  transform: translateX(-50%) scale(1.08) !important;
  box-shadow: 0 8px 28px rgba(255,103,31,.6) !important;
}

.upload-fab.open {
  transform: translateX(-50%) rotate(45deg) !important;
}

/* FAB menu sheet */
.upload-fab-menu {
  position: fixed !important;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 80px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(20px) scale(.92) !important;
  z-index: 502 !important;
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.6) !important;
  padding: 8px !important;
  width: 220px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: all .22s cubic-bezier(.34,1.56,.64,1) !important;
}

.upload-fab-menu.open {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

[data-theme="light"] .upload-fab-menu {
  background: #fff !important;
  border-color: rgba(0,0,0,.1) !important;
}

.fab-menu-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  color: var(--text) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  transition: background .15s !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

.fab-menu-item:hover,
.fab-menu-item:active { background: var(--bg3) !important; }

.fab-menu-item i {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
}

.fab-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 500 !important;
  background: rgba(0,0,0,.4) !important;
  display: none !important;
}
.fab-backdrop.show { display: block !important; }

/* ── 4. FULLSCREEN SEARCH ────────────────────────────────────── */

.search-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2000 !important;
  background: var(--bg) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  transform: translateY(-8px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: all .22s cubic-bezier(.4,0,.2,1) !important;
}

.search-fullscreen.open {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

[data-theme="light"] .search-fullscreen { background: #f5f7fa !important; }

.search-fs-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--bg2) !important;
}

[data-theme="light"] .search-fs-header { background: #fff !important; }

.search-fs-input {
  flex: 1 !important;
  background: var(--bg3) !important;
  border: 1.5px solid transparent !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  color: var(--text) !important;
  font-size: 16px !important; /* 16px prevents iOS zoom */
  outline: none !important;
  font-family: inherit !important;
}

.search-fs-input:focus {
  border-color: var(--accent) !important;
  background: var(--bg4) !important;
}

[data-theme="light"] .search-fs-input {
  background: #edf0f5 !important;
  color: #0d1117 !important;
}

.search-fs-back {
  background: none !important;
  border: none !important;
  color: var(--text2) !important;
  font-size: 20px !important;
  cursor: pointer !important;
  padding: 8px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  -webkit-tap-highlight-color: transparent !important;
  flex-shrink: 0 !important;
}

.search-fs-back:hover { background: var(--bg3) !important; }

.search-fs-body {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 16px !important;
  -webkit-overflow-scrolling: touch !important;
}

.search-fs-trend-title {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--text2) !important;
  text-transform: uppercase !important;
  letter-spacing: .7px !important;
  margin-bottom: 10px !important;
}

.search-fs-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  padding: 7px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  margin: 4px !important;
  transition: all .15s !important;
  color: var(--text) !important;
  text-decoration: none !important;
}

.search-fs-chip:hover {
  background: rgba(255,103,31,.12) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* Result items */
.search-fs-result {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: background .15s !important;
  text-decoration: none !important;
  color: var(--text) !important;
}
.search-fs-result:hover { background: var(--bg3) !important; }

/* ── 5. REMOVE BLUE GLOW HOVER EFFECTS ──────────────────────── */

/* Remove blue/teal hover glows — keep UI minimal and clean */
.video-card:hover,
.yt-card:hover,
.vid-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.4) !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* Remove ALL blue box shadows */
*:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* Kill the blue button glows */
.btn:focus,
button:focus,
a:focus {
  box-shadow: none !important;
  outline: none !important;
}

/* Only show a subtle glow on primary action buttons */
.btn-primary:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

/* ── 6. SMOOTH SCROLL + PERFORMANCE ─────────────────────────── */

html { scroll-behavior: smooth !important; }

/* Shorts feed — maximum smoothness */
.shorts-feed,
.short-feed {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  scroll-snap-type: y mandatory !important;
}

.short-item {
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
}

/* ── 7. VIDEO PLAYER — YouTube-style RED progress bar ────────── */

/* Progress bar — red like YouTube */
.short-progress-fill,
.video-progress-fill,
.player-progress-fill {
  background: #ff0000 !important;
  box-shadow: none !important;
}

input[type="range"].seek-bar::-webkit-slider-runnable-track {
  background: rgba(255,255,255,.2) !important;
}

/* ── 8. DEFAULT THUMBNAIL — no "No Thumbnail" text ──────────── */

/* Show SVG placeholder instead of broken image or text */
img.thumb-img[src=""],
img.thumb-img:not([src]),
img.video-thumb-img[src=""],
img.video-thumb-img:not([src]) {
  content: url('/assets/images/default_thumb.svg') !important;
}

/* Fallback background for thumb containers */
.video-thumb,
.thumb-wrap,
.thumbnail-container {
  background: var(--bg3) url('/assets/images/default_thumb.svg') center/60% no-repeat !important;
}

/* ── 9. FESTIVAL THEME — Full UI Change ─────────────────────── */

/* Diwali */
body[data-festival="diwali"] {
  --accent: #FF9800 !important;
  --accent2: #F57C00 !important;
}
body[data-festival="diwali"] .navbar::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px; left: 0; right: 0;
  height: 3px !important;
  background: linear-gradient(90deg, #ff9800, #ffd700, #ff5722, #ffd700, #ff9800) !important;
  background-size: 200% 100% !important;
  animation: diwaliBar 3s linear infinite !important;
}
@keyframes diwaliBar { 0% { background-position:0% 50%; } 100% { background-position:200% 50%; } }
body[data-festival="diwali"] .btn-primary {
  background: linear-gradient(135deg, #ff9800, #f57c00) !important;
}

/* Holi */
body[data-festival="holi"] {
  --accent: #e91e63 !important;
  --accent2: #9c27b0 !important;
}
body[data-festival="holi"] .btn-primary {
  background: linear-gradient(135deg, #ff006e, #ff9e00, #00bbf9) !important;
  background-size: 200% 200% !important;
  animation: holiBtn 4s ease infinite !important;
}
@keyframes holiBtn { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

/* Independence Day */
body[data-festival="independence"] {
  --accent: #FF9933 !important;
  --accent2: #138808 !important;
}
body[data-festival="independence"] .navbar {
  border-top: 3px solid #FF9933 !important;
}
body[data-festival="independence"] .navbar::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0; left: 0; right: 0;
  height: 3px !important;
  background: linear-gradient(90deg, #FF9933 33%, #fff 33% 66%, #138808 66%) !important;
}

/* Navratri */
body[data-festival="navratri"] {
  --accent: #e91e63 !important;
  --accent2: #ff5722 !important;
}

/* ── 10. RESPONSIVE MOBILE POLISH ────────────────────────────── */

@media (max-width: 480px) {
  /* Video grid — 2 columns compact */
  .video-grid, .videos-grid, .yt-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  /* Card title — clamp to 2 lines */
  .video-card .card-title,
  .yt-card .card-title,
  .vid-title {
    font-size: 12px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

/* No horizontal scroll anywhere */
body, html {
  overflow-x: hidden !important;
}

/* ── 11. SEARCH ICON IN NAVBAR — click opens fullscreen ─────── */

/* On mobile, clicking search icon activates fullscreen search */
.nav-search-icon-btn {
  background: none !important;
  border: none !important;
  color: var(--text2) !important;
  font-size: 18px !important;
  cursor: pointer !important;
  padding: 8px !important;
  border-radius: 50% !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 768px) {
  .nav-search-icon-btn { display: flex !important; }
  /* Hide regular search bar on mobile */
  .navbar-search, .nav-search-form { display: none !important; }
}

/* ── 12. COMMUNITY — Instagram feed style ───────────────────── */

.community-post {
  border-radius: 16px !important;
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
  transition: border-color .2s !important;
}

[data-theme="light"] .community-post {
  background: #fff !important;
  border-color: rgba(0,0,0,.09) !important;
}

.community-post img.post-image {
  width: 100% !important;
  max-height: 400px !important;
  object-fit: cover !important;
  display: block !important;
}

/* ── 13. BLOG MICRO-CONTENT FEED ─────────────────────────────── */

.blog-card {
  border-radius: 14px !important;
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  overflow: hidden !important;
  transition: all .2s !important;
}

[data-theme="light"] .blog-card {
  background: #fff !important;
  border-color: rgba(0,0,0,.09) !important;
}

.blog-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.2) !important;
}

/* ── 14. PWA SPLASH — branded ────────────────────────────────── */

#splash-screen, .pwa-splash {
  background: #09090f !important;
}

#splash-screen img.splash-logo {
  background: transparent !important;
  filter: drop-shadow(0 8px 24px rgba(255,103,31,.5)) !important;
}

/* ── 15. ADMIN PANEL — global fixes ─────────────────────────── */

[data-theme="light"] .admin-main,
[data-theme="light"] body.admin-body {
  background: #f5f7fa !important;
  color: #0d1117 !important;
}

[data-theme="light"] .admin-sidebar { background: #fff !important; }
[data-theme="light"] .admin-table td { color: #0d1117 !important; }

/* Admin header in light mode */
[data-theme="light"] .admin-header,
[data-theme="light"] .admin-topbar {
  background: rgba(255,255,255,.97) !important;
  border-bottom-color: rgba(0,0,0,.1) !important;
}

/* === v55_player.css === */
/* ================================================================
   LOKTUBE V55 — Professional Video Player
   Fullscreen · Landscape/Sideways · Mobile-First · Zero Overlap
   ================================================================ */

/* ── PLAYER CONTAINER ───────────────────────────────────────── */
.player-outer {
  position: relative;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16/9;
  width: 100%;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
}
.player-outer video,
#mainVideo {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  object-fit: contain;
}

/* ── CUSTOM CONTROLS BAR ────────────────────────────────────── */
.vcontrols {
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  background: linear-gradient(transparent, rgba(0,0,0,.92)) !important;
  padding: 28px 14px 12px !important;
  z-index: 20 !important;
  transition: opacity .25s !important;
  pointer-events: auto !important;
}
.player-outer:not(:hover):not(.controls-visible) .vcontrols {
  opacity: 0;
  pointer-events: none;
}
.player-outer:hover .vcontrols,
.player-outer.controls-visible .vcontrols {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ── PROGRESS BAR ───────────────────────────────────────────── */
.progress-wrap {
  position: relative !important;
  height: 5px !important;
  background: rgba(255,255,255,.2) !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  margin-bottom: 10px !important;
  transition: height .15s !important;
}
.progress-wrap:hover { height: 8px !important; }
.progress-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #FF671F, #ff9a56) !important;
  border-radius: 5px !important;
  position: relative !important;
  transition: width .1s linear !important;
}
.progress-thumb {
  position: absolute !important;
  right: -6px !important; top: 50% !important;
  transform: translateY(-50%) scale(0) !important;
  width: 14px !important; height: 14px !important;
  border-radius: 50% !important;
  background: #FF671F !important;
  box-shadow: 0 0 8px rgba(255,103,31,.6) !important;
  transition: transform .15s !important;
}
.progress-wrap:hover .progress-thumb { transform: translateY(-50%) scale(1) !important; }

/* ── CONTROL BUTTONS ────────────────────────────────────────── */
.vcontrols-row {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
}
.vctrl-btn {
  background: none !important;
  border: none !important;
  color: #fff !important;
  font-size: 17px !important;
  cursor: pointer !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  transition: background .12s, transform .12s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important; min-height: 36px !important;
  flex-shrink: 0 !important;
}
.vctrl-btn:hover { background: rgba(255,255,255,.15) !important; transform: scale(1.1) !important; }
.vctrl-btn:active { transform: scale(.92) !important; }
.vtime {
  font-size: 12px !important; font-weight: 700 !important;
  color: rgba(255,255,255,.9) !important;
  white-space: nowrap !important; font-variant-numeric: tabular-nums !important;
  flex-shrink: 0 !important;
}

/* ── VOLUME SLIDER ──────────────────────────────────────────── */
.vvol-wrap { display: flex; align-items: center; gap: 4px; }
.vvol-slider {
  width: 70px !important;
  accent-color: #FF671F !important;
  cursor: pointer !important;
}
@media (max-width: 480px) { .vvol-slider { display: none !important; } }

/* ── QUALITY / SPEED SELECT ─────────────────────────────────── */
.vspeed-select {
  background: rgba(0,0,0,.6) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  color: #fff !important;
  border-radius: 6px !important;
  padding: 3px 6px !important;
  font-size: 12px !important; font-weight: 700 !important;
  cursor: pointer !important;
}

/* ── SETTINGS POPUP ─────────────────────────────────────────── */
.vsettings-popup {
  position: absolute !important;
  bottom: 56px !important; right: 10px !important;
  background: rgba(10,10,20,.95) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  min-width: 220px !important;
  z-index: 30 !important;
  display: none !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
}
.vsettings-popup.open { display: block !important; }
.vsetting-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.85) !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
.vsetting-row:last-child { border-bottom: none !important; }

/* ── FULLSCREEN ─────────────────────────────────────────────── */
:fullscreen .player-outer,
:-webkit-full-screen .player-outer,
:-moz-full-screen .player-outer {
  border-radius: 0 !important;
  width: 100vw !important; height: 100vh !important;
  aspect-ratio: unset !important;
}
:fullscreen .vcontrols,
:-webkit-full-screen .vcontrols,
:-moz-full-screen .vcontrols {
  padding: 40px 20px 18px !important;
}
:fullscreen .vctrl-btn,
:-webkit-full-screen .vctrl-btn {
  font-size: 22px !important;
  min-width: 44px !important; min-height: 44px !important;
}
:fullscreen .vtime,
:-webkit-full-screen .vtime {
  font-size: 15px !important;
}

/* ── LANDSCAPE MOBILE (SIDEWAYS) ────────────────────────────── */
@media screen and (orientation: landscape) and (max-width: 900px) {
  .player-outer {
    border-radius: 0 !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    aspect-ratio: unset !important;
    width: 100vw !important; height: 100dvh !important;
  }
  body.landscape-player { overflow: hidden !important; }
  .vcontrols { padding: 20px 20px 14px !important; }
  /* Hide page elements behind player in landscape */
  .player-outer ~ * { display: none !important; }
  /* Show back button */
  .landscape-back-btn { display: flex !important; }
}

/* ── LANDSCAPE BACK BUTTON ──────────────────────────────────── */
.landscape-back-btn {
  display: none;
  position: fixed; top: 14px; left: 14px; z-index: 10000;
  background: rgba(0,0,0,.6); color: #fff; border: none;
  width: 40px; height: 40px; border-radius: 50%;
  font-size: 18px; cursor: pointer; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
}

/* ── THEATRE MODE ───────────────────────────────────────────── */
body.theatre-mode .player-outer {
  border-radius: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  aspect-ratio: 21/9 !important;
}

/* ── AMBIENT MODE (glow behind player) ──────────────────────── */
.ambient-glow {
  position: absolute; inset: -20px; z-index: -1;
  filter: blur(40px) saturate(2);
  opacity: .4; border-radius: 20px;
  background: inherit;
  transition: opacity .5s;
  pointer-events: none;
}

/* ── PLAY BUTTON (big center) ───────────────────────────────── */
.play-center-btn {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 70px; height: 70px;
  background: rgba(255,103,31,.9);
  border-radius: 50%; border: none; color: #fff;
  font-size: 28px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), opacity .2s;
  opacity: 0; z-index: 10; pointer-events: none;
}
.play-center-btn.pop {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  animation: v55PlayPop .5s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes v55PlayPop {
  0%   { transform: translate(-50%,-50%) scale(.5); opacity: 1; }
  60%  { transform: translate(-50%,-50%) scale(1.1); opacity: .9; }
  100% { transform: translate(-50%,-50%) scale(1.6); opacity: 0; }
}

/* ── SKIP OVERLAY (double-tap) ──────────────────────────────── */
.skip-overlay {
  position: absolute; top: 0; bottom: 0; width: 30%;
  display: flex; align-items: center; justify-content: center;
  z-index: 8; cursor: pointer;
  font-size: 13px; font-weight: 800; color: rgba(255,255,255,.9);
  opacity: 0; transition: opacity .15s;
  pointer-events: none;
  gap: 6px; flex-direction: column;
}
.skip-overlay.left  { left: 0;   background: radial-gradient(ellipse at left, rgba(255,255,255,.08), transparent 70%); }
.skip-overlay.right { right: 0;  background: radial-gradient(ellipse at right, rgba(255,255,255,.08), transparent 70%); }
.skip-overlay.show  { opacity: 1; pointer-events: auto; }
.skip-overlay i { font-size: 28px; }

/* ── BUFFERING SPINNER ──────────────────────────────────────── */
.buffer-spinner {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 50px; height: 50px;
  border: 3px solid rgba(255,255,255,.15);
  border-top-color: #FF671F;
  border-radius: 50%;
  animation: v55Spin .8s linear infinite;
  display: none; z-index: 9;
}
.buffer-spinner.show { display: block; }
@keyframes v55Spin { to { transform: translate(-50%,-50%) rotate(360deg); } }

/* ── CHAPTERS TOOLTIP ───────────────────────────────────────── */
.chapter-tooltip {
  position: absolute; bottom: 16px;
  background: rgba(0,0,0,.9); color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: 6px;
  pointer-events: none; white-space: nowrap;
  transform: translateX(-50%);
  display: none; z-index: 25;
}
.progress-wrap:hover .chapter-tooltip { display: block; }

/* ── MOBILE TOUCH TARGETS ───────────────────────────────────── */
@media (max-width: 768px) {
  .vctrl-btn { min-width: 40px !important; min-height: 40px !important; font-size: 16px !important; }
  .progress-wrap { height: 6px !important; }
  .progress-wrap:hover { height: 10px !important; }
  .vvol-wrap { display: none !important; }
}

/* ── DEFAULT THUMBNAIL placeholder ──────────────────────────── */
.v55-default-thumb {
  width: 100%; aspect-ratio: 16/9;
  background: linear-gradient(135deg, #0d0d1a 0%, #1a1a2e 50%, #0d0d1a 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; color: rgba(255,255,255,.4);
  border-radius: 10px; overflow: hidden;
  position: relative;
}
.v55-default-thumb::before {
  content: '▶';
  font-size: 48px;
  color: rgba(255,103,31,.3);
}
.v55-default-thumb .platform-watermark {
  font-size: 13px; font-weight: 800;
  color: rgba(255,103,31,.5);
  letter-spacing: 1px;
}

/* === v58_hardening.css === */
/* ================================================================
   LOKTUBE V58 HARDENING — assets/css/v58_hardening.css
   Phase 10: UI/UX cleanup — no inline style overrides,
   mobile overflow fixes, theme consistency
   ================================================================ */

/* ── COMMUNITY TABS — mobile scrollable ─────────────────────── */
.comm-filters,
.community-tabs,
.feed-tabs {
  display: flex !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  padding-bottom: 4px !important;
}
.comm-filters::-webkit-scrollbar,
.community-tabs::-webkit-scrollbar,
.feed-tabs::-webkit-scrollbar { display: none !important; }

.comm-filter-btn,
.community-tab,
.feed-tab {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* ── UPLOAD ERROR VISIBILITY ────────────────────────────────── */
.upload-error-msg,
.v58-error-banner {
  background: rgba(239, 68, 68, .1);
  border: 1px solid rgba(239, 68, 68, .35);
  border-radius: 10px;
  padding: 12px 16px;
  color: #ef4444;
  font-size: 13px;
  font-weight: 700;
  margin: 10px 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.upload-error-msg i,
.v58-error-banner i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

.v58-warn-banner {
  background: rgba(245, 158, 11, .1);
  border: 1px solid rgba(245, 158, 11, .3);
  border-radius: 10px;
  padding: 12px 16px;
  color: #f59e0b;
  font-size: 13px;
  font-weight: 700;
  margin: 10px 0;
}

/* ── MOBILE OVERFLOW GLOBAL FIX ─────────────────────────────── */
@media (max-width: 768px) {
  .watch-layout,
  .watch-container { overflow-x: hidden !important; }

  .vsettings-popup {
    right: 4px !important;
    left: 4px !important;
    min-width: unset !important;
    max-width: calc(100vw - 8px) !important;
  }

  .vcontrols-row { gap: 2px !important; }

  /* Prevent text overflow on video titles */
  .video-title, .vcard-title, .watch-title {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
}

/* ── AI FALLBACK INDICATOR ──────────────────────────────────── */
.ai-fallback-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(245, 158, 11, .12);
  border: 1px solid rgba(245, 158, 11, .3);
  border-radius: 99px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #f59e0b;
}

/* ── DISK SPACE WARNING ─────────────────────────────────────── */
.disk-space-warn {
  background: rgba(239, 68, 68, .08);
  border-left: 3px solid #ef4444;
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  font-size: 13px;
  color: #ef4444;
  font-weight: 600;
  margin: 8px 0;
}

/* ── CONSISTENT API ERROR STATE ─────────────────────────────── */
.v58-api-error {
  text-align: center;
  padding: 32px 16px;
  color: var(--text3);
}
.v58-api-error i { font-size: 36px; margin-bottom: 10px; display: block; }
.v58-api-error p { font-size: 14px; }

/* === v59_stabilize.css === */
/* ================================================================
   LOKTUBE V59 — STABILIZATION CSS
   Fixes: Scroll, Theme, Shorts UI, Nav, AI Console, Dark/Light
   Rules: Additive only. Zero breaking changes.
   ================================================================ */

/* ══════════════════════════════════════════════════════════════
   STEP 1 — GLOBAL SCROLL FIX
   Remove any overflow:hidden on body/html from other files
   Story page excluded (intentional fullscreen)
   ══════════════════════════════════════════════════════════════ */
html:not(.story-page) {
  scroll-behavior: smooth;
  height: auto !important;
  overflow-y: auto !important;
}

body:not(.story-page) {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100vh;
}

/* v85 FIX: modal-open now uses position:fixed pattern in v85_scroll_fix.css */
/* body.modal-open { overflow: hidden !important; } — REMOVED in v85 */

/* v85 FIX: Content wrappers must NOT create nested scroll containers */
/* overflow-y:auto + constrained height = body scroll breaks on Android/PWA */
.main-container,
.page-content,
.main-content,
.watch-layout,
.has-sidebar main,
.no-sidebar main {
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
}

/* ══════════════════════════════════════════════════════════════
   STEP 2 — REMOVE DUPLICATE BUTTONS
   Hide nav-create-btn on mobile (mbn Upload handles it)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .nav-create-btn {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   STEP 3 — ALL-IN-ONE UPLOAD MODAL
   ══════════════════════════════════════════════════════════════ */
#v59UploadModal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
}
#v59UploadModal.open {
  display: flex;
}
.v59-upload-sheet {
  background: var(--bg2);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 520px;
  padding: 8px 0 calc(20px + env(safe-area-inset-bottom, 0px));
  animation: v59SheetIn .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes v59SheetIn {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.v59-sheet-handle {
  width: 40px; height: 4px;
  background: var(--border2);
  border-radius: 4px;
  margin: 10px auto 16px;
}
.v59-sheet-title {
  font-size: 16px; font-weight: 800;
  color: var(--text);
  padding: 0 20px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.v59-upload-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  cursor: pointer;
  transition: background .12s;
  text-decoration: none;
  color: var(--text);
}
.v59-upload-option:hover,
.v59-upload-option:active {
  background: var(--bg3);
}
.v59-upload-option-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.v59-upload-option-label {
  font-size: 14px; font-weight: 700;
}
.v59-upload-option-sub {
  font-size: 12px; color: var(--text3); margin-top: 1px;
}

/* ══════════════════════════════════════════════════════════════
   STEP 6 — SHORTS: HIDE COPY LINK + REPORT
   Functions still exist, just hidden on shorts page
   ══════════════════════════════════════════════════════════════ */
body.page-shorts .more-option-item[data-action="copy_link"],
body.page-shorts .more-option-item[data-action="report"],
body.page-shorts .more-option-item[onclick*="copy_link"],
body.page-shorts .more-option-item[onclick*="report"] {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   STEP 7 — DARK / LIGHT MODE — CONSISTENT VARIABLES
   ══════════════════════════════════════════════════════════════ */
/* Dark (default) */
body,
body[data-theme="dark"] {
  --bg1:      #0a0a0f;
  --bg2:      #0e1117;
  --bg3:      #161b24;
  --bg4:      #1c2230;
  --text:     #f0f0f5;
  --text2:    #9090a8;
  --text3:    #5a5a78;
  --border:   rgba(255,255,255,.08);
  --border2:  rgba(255,255,255,.13);
  --card-bg:  #0e1117;
  --text-color: #f0f0f5;
}

/* Light */
body[data-theme="light"] {
  --bg1:      #f4f4f8;
  --bg2:      #ffffff;
  --bg3:      #f0f0f5;
  --bg4:      #e8e8f0;
  --text:     #0a0a0f;
  --text2:    #4a4a68;
  --text3:    #8a8aaa;
  --border:   rgba(0,0,0,.08);
  --border2:  rgba(0,0,0,.13);
  --card-bg:  #ffffff;
  --text-color: #0a0a0f;
}

/* Universal: any hardcoded white text in theme — override with var */
body[data-theme="light"] .nav-bar,
body[data-theme="light"] .top-nav,
body[data-theme="light"] header {
  background: var(--bg2) !important;
  color: var(--text) !important;
}

body[data-theme="light"] .nav-link,
body[data-theme="light"] .mbn-item,
body[data-theme="light"] .nav-icon-btn {
  color: var(--text) !important;
}

body[data-theme="light"] .video-card,
body[data-theme="light"] .post-card,
body[data-theme="light"] .vcard {
  background: var(--bg2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ══════════════════════════════════════════════════════════════
   STEP 8 — AI CONSOLE + ADMIN CARDS READABLE
   ══════════════════════════════════════════════════════════════ */
.card,
.admin-card,
.adb-stat,
.ai-card {
  background: var(--card-bg, var(--bg2)) !important;
  color: var(--text-color, var(--text)) !important;
  border: 1px solid var(--border) !important;
}

/* AI console message bubbles */
.ai-msg,
.aic-bubble,
.msg-bubble-ai,
.ai-response {
  background: var(--bg3) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

/* Admin input fields readable */
.admin-page input,
.admin-page textarea,
.admin-page select,
#aic-prompt,
.aic-input {
  background: var(--bg3) !important;
  color: var(--text) !important;
  border: 1px solid var(--border2) !important;
}
.admin-page input::placeholder,
.admin-page textarea::placeholder,
#aic-prompt::placeholder {
  color: var(--text3) !important;
}

/* Ensure code blocks in AI console are readable */
pre, code, .code-block {
  background: var(--bg3) !important;
  color: #a8ff78 !important;
  border: 1px solid var(--border) !important;
}

/* ══════════════════════════════════════════════════════════════
   STEP 9 — DESCRIPTION TOGGLE
   ══════════════════════════════════════════════════════════════ */
.desc-body {
  max-height: 80px;
  overflow: hidden;
  transition: max-height .35s ease;
}
.desc-body.expanded {
  max-height: 2000px !important;
}
.desc-toggle-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 5px;
}
.desc-toggle-btn:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════
   STEP 10 — COMMENTS SYSTEM
   ══════════════════════════════════════════════════════════════ */
.comment-pin-badge {
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.comment-like-btn,
.comment-reply-btn,
.comment-pin-btn {
  background: none;
  border: none;
  color: var(--text2);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all .15s;
}
.comment-like-btn:hover  { color: #ef4444; background: rgba(239,68,68,.08); }
.comment-reply-btn:hover { color: var(--accent); background: rgba(255,103,31,.08); }
.comment-pin-btn:hover   { color: #f59e0b; background: rgba(245,158,11,.08); }
.comment-like-btn.liked  { color: #ef4444; }

/* ══════════════════════════════════════════════════════════════
   STEP 11 — MOBILE NAV CLEAN (5 items only)
   Hide extra nav items on mobile
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Keep only: Home, Trending, Shorts, Upload, Studio */
  .mbn-item[href*="search.php"],
  .mbn-item[href*="login.php"],
  .mbn-item[href*="history"],
  .mbn-item[href*="liked"],
  .mbn-item[href*="watchlater"] {
    display: none !important;
  }

  /* Navbar: only show essential icons */
  .nav-search-form { max-width: 180px; }

  /* Bottom nav spacing */
  .mobile-bottom-nav-inner {
    justify-content: space-around;
  }
}

/* ══════════════════════════════════════════════════════════════
   STEP 12 — Z-INDEX + OVERLAP FIXES
   ══════════════════════════════════════════════════════════════ */
/* Sidebar below nav */
.sidebar { z-index: 50 !important; }
.top-nav, .nav-bar, header { z-index: 100 !important; }
/* Modals above everything */
#v59UploadModal { z-index: 9999 !important; }
.share-sheet,
.drawer-sheet,
.bottom-sheet { z-index: 200 !important; }
/* Toast above sheets */
#lt-toast-container { z-index: 9998 !important; }

/* No overlapping fixed elements fighting each other */
#scrollTopBtn { z-index: 490 !important; }
#mini-player  { z-index: 900 !important; }

/* Fix sidebar blocking content on mobile */
@media (max-width: 960px) {
  .sidebar {
    position: fixed !important;
    left: -260px !important;
    transition: left .25s ease !important;
  }
  .sidebar.open {
    left: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   UPLOAD PROGRESS — no stuck-at-100 visual
   ══════════════════════════════════════════════════════════════ */
.prog-bar {
  transition: width .3s ease !important;
}
#v59ProcessingMsg {
  display: none;
  text-align: center;
  padding: 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  animation: v59Pulse 1.5s ease-in-out infinite;
}
#v59ProcessingMsg.show { display: block; }
@keyframes v59Pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .5; }
}

/* ══════════════════════════════════════════════════════════════
   SHORTS — CLEAN COMPACT ACTIONS (no clutter)
   ══════════════════════════════════════════════════════════════ */
body.page-shorts .short-actions {
  gap: 14px !important;
}
body.page-shorts .short-action span {
  font-size: 10px !important;
}

/* ══════════════════════════════════════════════════════════════
   UPLOAD MODAL — Community option styling
   ══════════════════════════════════════════════════════════════ */
.v59-upload-option-icon.video   { background: rgba(255,103,31,.15); color: #FF671F; }
.v59-upload-option-icon.shorts  { background: rgba(239,68,68,.15);  color: #ef4444; }
.v59-upload-option-icon.blog    { background: rgba(59,130,246,.15); color: #3b82f6; }
.v59-upload-option-icon.community { background: rgba(16,185,129,.15); color: #10b981; }

/* === v60_studio.css === */
/* ================================================================
   LOKTUBE V60 — Creator Studio + Admin Panel
   YouTube Studio-level UI · Instagram engagement feel
   Mobile-first · Scrollable · Clean · Premium
   ================================================================ */

/* ══════════════════════════════════════════════════════════════
   CREATOR STUDIO — FULL REDESIGN
   ══════════════════════════════════════════════════════════════ */

/* Studio shell */
.studio-shell {
  max-width: 1140px;
  margin: 0 auto;
  padding: 16px;
}

/* Studio header */
.studio-header-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding: 16px 20px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 18px;
}
.studio-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 20px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
  border: 2px solid rgba(255,103,31,.3);
}
.studio-avatar img { width:100%; height:100%; object-fit:cover; }
.studio-header-name { font-size: 16px; font-weight: 900; color: var(--text); }
.studio-header-sub  { font-size: 12px; color: var(--text2); margin-top: 2px; }
.studio-header-actions { margin-left: auto; display: flex; gap: 8px; flex-shrink: 0; }
.studio-upload-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent); color: #fff;
  border: none; border-radius: 99px;
  padding: 9px 20px; font-size: 13px; font-weight: 800;
  cursor: pointer; text-decoration: none;
  transition: opacity .15s, transform .15s;
  white-space: nowrap;
}
.studio-upload-btn:hover { opacity: .88; transform: translateY(-1px); }

/* ── STUDIO NAV — horizontal scrollable tabs ────────────────── */
.studio-nav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 2px solid var(--border);
  position: sticky;
  top: var(--nav-h, 58px);
  background: var(--bg1);
  z-index: 40;
  padding-top: 8px;
}
.studio-nav::-webkit-scrollbar { display: none; }

.snav-tab {
  flex-shrink: 0;
  padding: 9px 18px;
  font-size: 13px; font-weight: 700;
  color: var(--text2);
  cursor: pointer;
  text-decoration: none;
  border-radius: 10px 10px 0 0;
  white-space: nowrap;
  transition: all .15s;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
.snav-tab:hover { color: var(--accent); background: rgba(255,103,31,.06); }
.snav-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: rgba(255,103,31,.08);
}

/* Close X on tab (optional dismiss) */
.snav-tab .tab-close {
  display: none;
  margin-left: 6px;
  font-size: 11px;
  opacity: .5;
}

/* Panel content area */
.studio-panel { display: none; padding-top: 20px; }
.studio-panel.active { display: block; }

/* ── KPI CARDS — Instagram metric feel ──────────────────────── */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.kpi-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
  transition: border-color .2s, transform .2s;
  cursor: default;
  position: relative;
  overflow: hidden;
}
.kpi-box::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent-g, linear-gradient(90deg,#FF671F,#ff9a2f));
  opacity: 0;
  transition: opacity .2s;
}
.kpi-box:hover { border-color: rgba(255,103,31,.3); transform: translateY(-2px); }
.kpi-box:hover::before { opacity: 1; }
.kpi-val {
  font-size: 24px; font-weight: 900;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.kpi-lbl {
  font-size: 11px; font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-top: 4px;
}
.kpi-delta {
  font-size: 11px; font-weight: 700;
  margin-top: 5px;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 99px;
}
.kpi-delta.up   { background: rgba(16,185,129,.12); color: #10b981; }
.kpi-delta.down { background: rgba(239,68,68,.12);  color: #ef4444; }
.kpi-delta.flat { background: rgba(255,255,255,.06); color: var(--text3); }

/* ── CHARTS ─────────────────────────────────────────────────── */
.chart-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 22px;
}
@media (max-width: 680px) { .chart-row { grid-template-columns: 1fr; } }
.chart-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
}
.chart-box h3 {
  font-size: 13px; font-weight: 800;
  margin-bottom: 14px;
  color: var(--text);
  display: flex; align-items: center; gap: 7px;
}

/* ── VIDEO ROWS — YouTube Studio feel ───────────────────────── */
.vid-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.vid-row:last-child { border-bottom: none; }
.vid-row:hover { background: rgba(255,255,255,.02); margin: 0 -8px; padding: 12px 8px; border-radius: 10px; }
.vid-thumb-sm {
  width: 90px; flex-shrink: 0;
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg3);
}
.vid-thumb-sm img { width:100%; height:100%; object-fit:cover; }
.vid-row-info { flex: 1; min-width: 0; }
.vid-row-title {
  font-size: 13px; font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  color: var(--text);
}
.vid-row-meta { font-size: 11px; color: var(--text2); margin-top: 3px; }
.vid-row-stats {
  display: flex; gap: 12px; margin-top: 5px;
}
.vid-row-stat {
  font-size: 11px; font-weight: 700;
  color: var(--text2);
  display: flex; align-items: center; gap: 3px;
}
.vid-row-actions { display: flex; gap: 5px; flex-shrink: 0; }
.vid-action-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text2);
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 11px; font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.vid-action-btn:hover { border-color: var(--accent); color: var(--accent); }
.vid-action-btn.danger:hover { border-color: #ef4444; color: #ef4444; }

/* Video visibility badge */
.vis-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 99px;
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .4px;
}
.vis-public   { background: rgba(16,185,129,.12);  color: #10b981; }
.vis-private  { background: rgba(239,68,68,.12);   color: #ef4444; }
.vis-unlisted { background: rgba(245,158,11,.12);  color: #f59e0b; }

/* ── RETENTION GRAPH ─────────────────────────────────────────── */
.retention-wrap {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 22px;
}
.retention-title {
  font-size: 13px; font-weight: 800;
  color: var(--text); margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.retention-avg {
  font-size: 11px; font-weight: 700;
  background: rgba(255,103,31,.12);
  color: var(--accent);
  padding: 3px 10px; border-radius: 99px;
}

/* ── EARNINGS CARD ───────────────────────────────────────────── */
.earnings-hero {
  background: linear-gradient(135deg, rgba(255,103,31,.18), rgba(255,154,47,.08));
  border: 1px solid rgba(255,103,31,.3);
  border-radius: 18px;
  padding: 22px;
  margin-bottom: 20px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.earnings-hero-val {
  font-size: 32px; font-weight: 900;
  color: var(--accent);
}
.earnings-hero-lbl { font-size: 12px; color: var(--text2); margin-top: 2px; }
.earnings-withdraw-btn {
  margin-left: auto;
  background: var(--accent); color: #fff;
  border: none; border-radius: 99px;
  padding: 10px 22px; font-size: 13px; font-weight: 800;
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
  transition: opacity .15s;
}
.earnings-withdraw-btn:hover { opacity: .85; }

/* ── GROWTH / AI INSIGHTS ────────────────────────────────────── */
.insight-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
  display: flex; align-items: flex-start; gap: 12px;
}
.insight-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,103,31,.12);
  color: var(--accent); font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.insight-title { font-size: 13px; font-weight: 800; color: var(--text); }
.insight-body  { font-size: 12px; color: var(--text2); margin-top: 3px; line-height: 1.5; }

/* ── CATEGORY / CONTENT PILLS ────────────────────────────────── */
.category-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,103,31,.1);
  border: 1px solid rgba(255,103,31,.25);
  color: var(--accent);
  border-radius: 99px;
  padding: 4px 12px;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
}
.category-chip:hover { background: var(--accent); color: #fff; }

/* ── PERMISSION / FILE ATTACH SECTION ────────────────────────── */
.permission-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 14px;
}
.permission-card h4 {
  font-size: 14px; font-weight: 800;
  margin-bottom: 12px; color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.permission-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.permission-toggle:last-child { border-bottom: none; }
.toggle-label { font-size: 13px; font-weight: 600; color: var(--text); }
.toggle-sub   { font-size: 11px; color: var(--text3); margin-top: 2px; }

/* File attachment link */
.attach-link {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px; font-weight: 700;
  color: var(--text);
  text-decoration: none;
  transition: border-color .15s;
}
.attach-link:hover { border-color: var(--accent); color: var(--accent); }

/* Domain link input */
.domain-input-row {
  display: flex; gap: 8px; align-items: center;
  margin-top: 10px;
}
.domain-input {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 9px 12px;
  color: var(--text); font-size: 13px;
  outline: none;
}
.domain-input:focus { border-color: var(--accent); }

/* ══════════════════════════════════════════════════════════════
   ADMIN PANEL — SCROLL + MOBILE FIXES
   ══════════════════════════════════════════════════════════════ */

/* Admin nav scrollable on mobile */
.admin-nav {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Admin main content never clipped */
.admin-main {
  overflow-x: hidden;
  min-height: 100vh;
}

/* Admin content scrollable */
.admin-content {
  overflow-y: auto;
  overflow-x: hidden;
}

/* Mobile: X close button for admin nav */
.admin-nav-close {
  display: none;
  position: absolute;
  top: 14px; right: 14px;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text2);
  width: 32px; height: 32px;
  border-radius: 50%;
  align-items: center; justify-content: center;
  font-size: 14px; cursor: pointer;
  z-index: 10;
}
@media (max-width: 900px) {
  .admin-nav-close { display: flex; }
  /* X button visible when nav open */
  .admin-nav.open .admin-nav-close { display: flex; }
  /* Prevent admin nav from blocking scroll */
  .admin-nav {
    position: fixed !important;
    transform: translateX(-100%) !important;
    transition: transform .28s ease !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.4) !important;
  }
  .admin-nav.open { transform: translateX(0) !important; }
  /* Hamburger visible on mobile */
  #adminNavToggle { display: flex !important; }
  /* Overlay */
  .admin-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 99;
  }
  .admin-overlay.open { display: block; }
}

/* ── ADMIN TOPBAR ─────────────────────────────────────────────── */
.admin-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  background: var(--bg2) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ── FEATURE FLAGS SECTION (Admin key management) ──────────────── */
.feature-flag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.feature-flag-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.feature-flag-name {
  font-size: 13px; font-weight: 700;
  color: var(--text);
}
.feature-flag-key {
  font-size: 10px; color: var(--text3);
  font-family: monospace;
  margin-top: 2px;
}

/* Toggle switch */
.v60-toggle {
  position: relative;
  width: 44px; height: 24px;
  flex-shrink: 0;
}
.v60-toggle input { opacity: 0; width: 0; height: 0; }
.v60-toggle-slider {
  position: absolute; inset: 0;
  background: var(--border2);
  border-radius: 24px;
  cursor: pointer;
  transition: background .2s;
}
.v60-toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
}
.v60-toggle input:checked + .v60-toggle-slider { background: var(--accent); }
.v60-toggle input:checked + .v60-toggle-slider::before { transform: translateX(20px); }

/* ── SHORTS ADMIN SECTION ─────────────────────────────────────── */
.shorts-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.shorts-admin-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s;
}
.shorts-admin-card:hover { border-color: rgba(255,103,31,.3); }
.shorts-admin-thumb {
  width: 100%; aspect-ratio: 9/16;
  background: var(--bg3);
  object-fit: cover;
}
.shorts-admin-info { padding: 10px 12px; }
.shorts-admin-title { font-size: 12px; font-weight: 700; color: var(--text); }
.shorts-admin-meta  { font-size: 10px; color: var(--text3); margin-top: 3px; }
.shorts-admin-actions { padding: 8px 12px; display: flex; gap: 6px; border-top: 1px solid var(--border); }

/* ── STATUS PILLS ─────────────────────────────────────────────── */
.status-pill { display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:12px;font-size:11px;font-weight:700; }
.status-queued     { background:rgba(245,158,11,.12); color:#f59e0b; }
.status-processing { background:rgba(59,130,246,.12); color:#3b82f6; }
.status-done       { background:rgba(16,185,129,.12); color:#10b981; }
.status-failed     { background:rgba(239,68,68,.12);  color:#ef4444; }

/* ── UPLOAD VIDEO FROM STUDIO ─────────────────────────────────── */
.studio-upload-zone {
  border: 2px dashed var(--border2);
  border-radius: 18px;
  padding: 36px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  background: var(--bg2);
}
.studio-upload-zone:hover {
  border-color: var(--accent);
  background: rgba(255,103,31,.04);
}
.studio-upload-zone i { font-size: 40px; color: var(--accent); opacity: .6; margin-bottom: 12px; display: block; }
.studio-upload-zone h4 { font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.studio-upload-zone p  { font-size: 13px; color: var(--text2); }

/* === v61_final.css === */
/* ============================================================
   LOKTUBE V61 FINAL — Master Stabilization CSS
   Applied LAST — overrides all previous files
   ============================================================ */

/* ── 1. GLOBAL SCROLL ────────────────────────────────────────── */
html:not(.story-page):not(.shorts-page) {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  scroll-behavior: smooth;
}
body:not(.story-page):not(.shorts-page) {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100vh;
  position: static !important;
}
/* v85 FIX: See v85_scroll_fix.css — modal-open uses position:fixed pattern now */
/* body.modal-open { overflow: hidden !important; } — REMOVED in v85 */

/* All content wrappers — v85 FIX: must NOT create nested scroll containers */
/* Setting overflow-y:auto + constrained height = nested scroller = body scroll breaks */
.main-container, .page-content, .lk-main,
.studio-shell, .admin-wrap, .community-wrap,
.watch-layout, .channel-wrap, .blog-view,
.admin-content, .settings-wrap {
  overflow: visible !important;    /* NOT auto — body scrolls, not these containers */
  min-height: 0 !important;        /* NOT calc(100vh-56px) — that creates height constraint */
  height: auto !important;
}

/* ── 2. REMOVE DUPLICATE + BUTTONS ──────────────────────────── */
/* Keep only bottom-nav create button on mobile */
@media (max-width: 768px) {
  /* Hide desktop create btn */
  .nav-create-btn { display: none !important; }
}

/* ── 3. THEME SYSTEM — FULL DARK / FULL LIGHT ────────────────── */
:root {
  --bg:     #09090f;
  --bg2:    #0f0f18;
  --bg3:    #171724;
  --bg4:    #1f1f2e;
  --bg5:    #262636;
  --text:   #f0f0f8;
  --text2:  #8888a8;
  --text3:  #4a4a68;
  --border: rgba(255,255,255,.08);
  --border2:rgba(255,255,255,.12);
  --accent: #7c6aff;
  --accent2:#a78bfa;
  --green:  #22c55e;
  --red:    #ef4444;
  --yellow: #eab308;
}
[data-theme="light"] {
  --bg:     #ffffff !important;
  --bg2:    #f8f8fc !important;
  --bg3:    #f0f0f6 !important;
  --bg4:    #e8e8f0 !important;
  --bg5:    #e0e0ea !important;
  --text:   #0a0a18 !important;
  --text2:  #555568 !important;
  --text3:  #888899 !important;
  --border: rgba(0,0,0,.08) !important;
  --border2:rgba(0,0,0,.12) !important;
}
/* Ensure body actually uses the variables */
body { background: var(--bg) !important; color: var(--text) !important; }
[data-theme="light"] body,
body[data-theme="light"] {
  background: #ffffff !important;
  color: #0a0a18 !important;
}
[data-theme="light"] .lk-navbar,
[data-theme="light"] .mobile-bottom-nav {
  background: rgba(255,255,255,.97) !important;
  border-color: rgba(0,0,0,.1) !important;
}
[data-theme="light"] .lk-sidebar { background: #fff !important; }
[data-theme="light"] .modal-box,
[data-theme="light"] .v61-upload-sheet { background: #fff !important; }

/* ── 4. SHORTS CLEAN UI ──────────────────────────────────────── */
body.shorts-page {
  overflow: hidden !important;
  height: 100dvh !important;
}
body.shorts-page .lk-navbar { display: none !important; }
.shorts-feed {
  overflow-y: scroll !important;
  scroll-snap-type: y mandatory !important;
  height: 100dvh !important;
  scrollbar-width: none !important;
}
.shorts-feed::-webkit-scrollbar { display: none !important; }
.short-item {
  scroll-snap-align: start !important;
  height: 100dvh !important;
  position: relative !important;
}
/* Remove clutter from shorts */
.short-more-btn,
.short-copy-link,
.short-remix-btn { display: none !important; }

/* ── 5. UPLOAD MODAL ─────────────────────────────────────────── */
#v61UploadModal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 9800;
  align-items: flex-end;
  justify-content: center;
  backdrop-filter: blur(4px);
}
#v61UploadModal.open { display: flex !important; }
.v61-upload-sheet {
  background: var(--bg2);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 480px;
  padding: 8px 20px 40px;
  animation: v61SheetUp .28s cubic-bezier(.34,1.2,.64,1);
}
@keyframes v61SheetUp {
  from { transform: translateY(100%); }
  to   { transform: none; }
}
.v61-sheet-handle {
  width: 44px; height: 4px;
  background: var(--border2);
  border-radius: 2px;
  margin: 10px auto 16px;
}
.v61-sheet-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 16px;
  text-align: center;
}
.v61-upload-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 12px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--text);
  transition: background .15s;
  margin-bottom: 4px;
}
.v61-upload-opt:active { background: var(--bg3); }
.v61-upload-opt-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.v61-opt-video    { background: rgba(124,106,255,.15); color: #7c6aff; }
.v61-opt-short    { background: rgba(255,60,75,.15);   color: #ff3c4b; }
.v61-opt-blog     { background: rgba(59,130,246,.15);  color: #3b82f6; }
.v61-opt-community{ background: rgba(34,197,94,.15);   color: #22c55e; }
.v61-upload-opt-label { font-size: 15px; font-weight: 700; }
.v61-upload-opt-sub   { font-size: 12px; color: var(--text3); margin-top: 1px; }

/* ── 6. CHAT SCROLL ──────────────────────────────────────────── */
.msg-messages,
.chat-messages,
#msgMessages {
  overflow-y: auto !important;
  scroll-behavior: smooth;
}

/* ── 7. DESCRIPTION TOGGLE ───────────────────────────────────── */
.desc-body {
  max-height: 80px;
  overflow: hidden;
  transition: max-height .35s ease;
}
.desc-body.expanded { max-height: 3000px !important; }
.desc-toggle-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ── 8. EDIT BUTTON IN STUDIO ────────────────────────────────── */
.vid-action-btn {
  cursor: pointer !important;
  pointer-events: auto !important;
}
#videoEditModal { display: none; position: fixed; inset: 0; z-index: 9100;
  background: rgba(0,0,0,.75); align-items: center; justify-content: center; padding: 16px; }
#videoEditModal.open { display: flex !important; }
.video-edit-sheet {
  background: var(--bg2);
  border-radius: 20px;
  width: 100%;
  max-width: 560px;
  max-height: 90dvh;
  overflow-y: auto;
  padding: 24px;
  position: relative;
}

/* ── 9. PWA SAFE AREA ────────────────────────────────────────── */
.mobile-bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
body {
  padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
}
body.shorts-page, body.story-page { padding-bottom: 0 !important; }

/* ── 10. INVISIBLE OVERLAY FIX ────────────────────────────────── */
.sb-overlay:not(.open),
.modal-overlay:not(.open) {
  pointer-events: none !important;
}

/* ── 11. FESTIVAL THEMES ──────────────────────────────────────── */
[data-festival="diwali"] {
  --accent: #f59e0b;
  --bg: #0d0800;
  --bg2: #1a1000;
  --text: #fff8e7;
}
[data-festival="holi"] {
  --accent: #e91e9a;
  --bg: #0d001a;
  --bg2: #160026;
  --text: #fce4ec;
}
[data-festival="independence"] {
  --accent: #FF9933;
  --bg: #000d04;
  --bg2: #001a08;
  --text: #f1f8e9;
}

/* ── 12. AD SYSTEM ────────────────────────────────────────────── */
.ad-preroll-overlay {
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.ad-skip-btn {
  position: absolute;
  bottom: 60px; right: 16px;
  background: rgba(0,0,0,.8);
  color: #fff;
  border: 1px solid rgba(255,255,255,.4);
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 13px; font-weight: 700;
  cursor: pointer; z-index: 51;
}
.ad-skip-btn:disabled { opacity: .6; cursor: default; }

/* ── 13. COMMENT ENHANCEMENTS ─────────────────────────────────── */
.cmt-actions { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.cmt-like-btn, .cmt-reply-btn, .cmt-pin-btn {
  background: none; border: none; color: var(--text3);
  font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 20px; transition: background .15s;
}
.cmt-like-btn:hover, .cmt-reply-btn:hover { background: var(--bg3); color: var(--text); }
.cmt-like-btn.liked { color: var(--accent); }
.cmt-pin-badge {
  font-size: 11px; color: var(--accent);
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 6px;
}

/* ── 14. AI CONSOLE STYLE ─────────────────────────────────────── */
.ai-console-wrap { max-height: calc(100vh - 180px); overflow-y: auto; }

/* ── 15. PROCESSING BAR ───────────────────────────────────────── */
.upload-processing-bar {
  display: none;
  background: rgba(124,106,255,.15);
  border: 1px solid rgba(124,106,255,.3);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--accent2);
  margin-top: 10px;
  align-items: center;
  gap: 8px;
}
.upload-processing-bar.show { display: flex !important; }
.upload-processing-bar i { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* === v61_recovery.css === */
/* ================================================================
   LOKTUBE V61 — FULL SYSTEM RECOVERY CSS
   Fixes: Scroll, Theme, UI Duplication, Shorts, Chat, PWA, Ads
   Mobile-first · Zero regression · YouTube-level smooth
   ================================================================ */

/* ══════════════════════════════════════════════════════════════
   FIX 1 — GLOBAL SCROLL RECOVERY (CRITICAL)
   story-page excluded (intentional fullscreen)
   ══════════════════════════════════════════════════════════════ */
html:not(.story-page) {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  scroll-behavior: smooth;
}
body:not(.story-page) {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100vh;
  position: static !important;
}
/* Modal scroll lock — class only */
/* v85 FIX: modal-open no longer uses overflow:hidden (breaks Android/PWA scroll)
   position:fixed pattern is now used instead, handled by v85_scroll_fix.js
   The rule below is intentionally removed. v85_scroll_fix.css handles this safely. */
/* body.modal-open { overflow: hidden !important; } — REMOVED in v85 */

/* All pages scroll */
.main-container, .page-content, .main-content,
.watch-layout, .has-sidebar main, .no-sidebar main,
.studio-shell, .admin-content, .community-wrap,
.blog-view, .channel-wrap {
  overflow-y: auto;
  min-height: 100vh;
}

/* ══════════════════════════════════════════════════════════════
   FIX 2 — EDIT BUTTON (Creator Studio Videos panel)
   ══════════════════════════════════════════════════════════════ */
.vid-action-btn {
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 1;
}
#videoEditModal {
  display: none;
  position: fixed !important;
  inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 9100 !important;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#videoEditModal.open { display: flex !important; }
.video-edit-sheet {
  background: var(--bg2);
  border-radius: 20px;
  width: 100%;
  max-width: 560px;
  max-height: 90dvh;
  overflow-y: auto;
  padding: 24px;
  position: relative;
  animation: v61SlideUp .25s ease;
}
@keyframes v61SlideUp {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.video-edit-close {
  position: absolute; top: 14px; right: 14px;
  background: var(--bg3); border: none; color: var(--text);
  width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.video-edit-close:hover { background: var(--accent); color: #fff; }

/* ══════════════════════════════════════════════════════════════
   FIX 3 — UPLOAD STUCK AT 100% — visual
   ══════════════════════════════════════════════════════════════ */
.upload-processing-bar {
  display: none;
  text-align: center;
  padding: 14px;
  font-size: 14px; font-weight: 700;
  color: var(--accent);
  background: rgba(255,103,31,.08);
  border: 1px solid rgba(255,103,31,.2);
  border-radius: 12px;
  margin-top: 10px;
}
.upload-processing-bar.show { display: block; }
.upload-processing-bar i { animation: v61Spin 1s linear infinite; }
@keyframes v61Spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════
   FIX 4 — SHORTS CLEAN UI
   ══════════════════════════════════════════════════════════════ */
body.page-shorts .short-actions { gap: 14px !important; }
body.page-shorts [data-action="copy_link"],
body.page-shorts [data-action="report"],
body.page-shorts [data-action="remix"],
body.page-shorts [onclick*="'remix'"],
body.page-shorts [onclick*="'copy_link'"] { display: none !important; }

/* Shorts scroll fix */
body.page-shorts,
body.shorts-page {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* ══════════════════════════════════════════════════════════════
   FIX 5 — NO DUPLICATE UPLOAD BUTTONS
   Desktop nav create btn hidden on mobile (mbn handles it)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .nav-create-btn { display: none !important; }
}
/* Single floating action only — remove any extra fixed buttons */
.fab-extra, .floating-plus, [class*="floating-upload"]:not(.studio-upload-btn) {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   FIX 6 — ALL-IN-ONE UPLOAD MODAL
   ══════════════════════════════════════════════════════════════ */
#v61UploadModal {
  position: fixed; inset: 0; z-index: 9200;
  display: none;
  align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
}
#v61UploadModal.open { display: flex; }
.v61-upload-sheet {
  background: var(--bg2);
  border-radius: 24px 24px 0 0;
  width: 100%; max-width: 540px;
  padding: 8px 0 calc(20px + env(safe-area-inset-bottom, 0px));
  animation: v61SheetUp .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes v61SheetUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.v61-sheet-handle {
  width: 40px; height: 4px; background: var(--border2);
  border-radius: 4px; margin: 10px auto 14px;
}
.v61-sheet-title {
  font-size: 15px; font-weight: 900; color: var(--text);
  padding: 0 20px 12px; border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.v61-upload-opt {
  display: flex; align-items: center; gap: 15px;
  padding: 13px 20px; cursor: pointer; text-decoration: none;
  color: var(--text); transition: background .12s;
}
.v61-upload-opt:hover, .v61-upload-opt:active { background: var(--bg3); }
.v61-upload-opt-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.v61-opt-video     { background: rgba(255,103,31,.15); color: #FF671F; }
.v61-opt-short     { background: rgba(239,68,68,.15);  color: #ef4444; }
.v61-opt-blog      { background: rgba(59,130,246,.15); color: #3b82f6; }
.v61-opt-community { background: rgba(16,185,129,.15); color: #10b981; }
.v61-upload-opt-label { font-size: 14px; font-weight: 800; }
.v61-upload-opt-sub   { font-size: 12px; color: var(--text3); margin-top: 2px; }

/* ══════════════════════════════════════════════════════════════
   FIX 7 — THEME SYSTEM COMPLETE
   ══════════════════════════════════════════════════════════════ */
:root,
body[data-theme="dark"] {
  --bg:   #0a0a0f;
  --bg2:  #0e1117;
  --bg3:  #161b24;
  --bg4:  #1c2230;
  --text: #f0f0f5;
  --text2: #9090a8;
  --text3: #5a5a78;
  --border:  rgba(255,255,255,.08);
  --border2: rgba(255,255,255,.13);
  --card-bg: #0e1117;
  --text-color: #f0f0f5;
  --accent: #FF671F;
  --accent-g: linear-gradient(90deg,#FF671F,#ff9a2f);
  --green: #10b981;
  --red:   #ef4444;
  --blue:  #3b82f6;
  --orange: #f59e0b;
}
body[data-theme="light"] {
  --bg:   #f4f4f8;
  --bg2:  #ffffff;
  --bg3:  #f0f0f5;
  --bg4:  #e8e8f0;
  --text: #0a0a0f;
  --text2: #4a4a68;
  --text3: #8a8aaa;
  --border:  rgba(0,0,0,.08);
  --border2: rgba(0,0,0,.13);
  --card-bg: #ffffff;
  --text-color: #0a0a0f;
}
/* Light mode overrides */
body[data-theme="light"] .nav-bar,
body[data-theme="light"] header,
body[data-theme="light"] .top-nav { background: var(--bg2) !important; }
body[data-theme="light"] .video-card,
body[data-theme="light"] .post-card,
body[data-theme="light"] .chart-box,
body[data-theme="light"] .kpi-box { background: var(--bg2) !important; color: var(--text) !important; }

/* ══════════════════════════════════════════════════════════════
   FIX 8 — AI CONSOLE + ADMIN PANEL READABLE
   ══════════════════════════════════════════════════════════════ */
.card, .admin-card, .adb-stat, .ai-card,
.aic-bubble, .ai-msg, .ai-response {
  background: var(--card-bg, var(--bg2)) !important;
  color: var(--text-color, var(--text)) !important;
  border: 1px solid var(--border) !important;
}
.admin-page input, .admin-page textarea, .admin-page select,
#aic-prompt, .aic-input, .admin-input {
  background: var(--bg3) !important;
  color: var(--text) !important;
  border: 1px solid var(--border2) !important;
}
pre, code, .code-block, .aic-code {
  background: var(--bg3) !important;
  color: #a8ff78 !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px;
}

/* ══════════════════════════════════════════════════════════════
   FIX 9 — DESCRIPTION TOGGLE
   ══════════════════════════════════════════════════════════════ */
.desc-body {
  max-height: 72px;
  overflow: hidden;
  transition: max-height .35s ease;
  -webkit-mask-image: linear-gradient(#000 60%, transparent);
  mask-image: linear-gradient(#000 60%, transparent);
}
.desc-body.expanded {
  max-height: 4000px !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.desc-toggle-btn {
  background: none; border: none; color: var(--accent);
  font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 6px 0; display: flex; align-items: center; gap: 5px;
}
.desc-toggle-btn:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════
   FIX 10 — COMMENTS SYSTEM
   ══════════════════════════════════════════════════════════════ */
.comment-actions {
  display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap;
}
.cmt-btn {
  background: none; border: none;
  color: var(--text2); font-size: 12px; font-weight: 700;
  cursor: pointer; padding: 4px 8px; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 4px;
  transition: all .15s; min-height: 30px;
}
.cmt-btn:hover { color: var(--accent); background: rgba(255,103,31,.08); }
.cmt-btn.liked { color: #ef4444; }
.cmt-btn.liked:hover { background: rgba(239,68,68,.08); }
.cmt-pin-badge {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 800;
  padding: 2px 7px; border-radius: 99px; margin-left: 6px;
}
.reply-box {
  margin-left: 42px; margin-top: 8px;
  padding: 10px 12px;
  background: var(--bg3); border-radius: 10px;
  border: 1px solid var(--border);
}
.reply-input {
  width: 100%; background: transparent; border: none;
  color: var(--text); font-size: 13px; outline: none;
  resize: none; font-family: inherit;
}

/* ══════════════════════════════════════════════════════════════
   FIX 11 — CHAT SCROLL
   ══════════════════════════════════════════════════════════════ */
.msg-messages, .chat-messages, .chat-box {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-behavior: smooth;
  flex: 1;
}
/* Chat layout must fill height */
.msg-chat {
  display: flex !important;
  flex-direction: column !important;
  height: calc(100vh - var(--nav-h, 58px)) !important;
}
.msg-input-bar { flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════
   FIX 12 — PWA / MOBILE IMPROVEMENTS
   ══════════════════════════════════════════════════════════════ */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top, 0px); }
  .top-nav, .nav-bar { padding-top: env(safe-area-inset-top, 0px); }
}
/* Touch scroll everywhere */
* { -webkit-overflow-scrolling: touch; }

/* ══════════════════════════════════════════════════════════════
   FIX 13 — REMOVE BLOCKING OVERLAYS
   ══════════════════════════════════════════════════════════════ */
/* Ensure nothing blocks interaction unexpectedly */
.sb-overlay.hidden,
.admin-overlay:not(.open),
#v61UploadModal:not(.open),
#videoEditModal:not(.open) {
  pointer-events: none !important;
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   FIX 14 — API RESPONSE FEEDBACK
   ══════════════════════════════════════════════════════════════ */
.v61-api-loading {
  opacity: .6; pointer-events: none; cursor: wait;
}
.v61-btn-loading i { animation: v61Spin 1s linear infinite; }

/* ══════════════════════════════════════════════════════════════
   FIX 15 — FESTIVAL THEMES
   ══════════════════════════════════════════════════════════════ */
/* Diwali */
body[data-festival="diwali"] {
  --accent: #f59e0b;
  --accent-g: linear-gradient(90deg, #f59e0b, #ef4444);
}
body[data-festival="diwali"] .top-nav::after,
body[data-festival="diwali"] header::after {
  content: '🪔 🎆 🪔';
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  font-size: 14px; pointer-events: none; letter-spacing: 8px;
}
/* Holi */
body[data-festival="holi"] {
  --accent: #ec4899;
  --accent-g: linear-gradient(90deg, #ec4899, #f59e0b, #10b981);
}
body[data-festival="holi"] .kpi-box:nth-child(1) { border-top: 3px solid #ef4444; }
body[data-festival="holi"] .kpi-box:nth-child(2) { border-top: 3px solid #3b82f6; }
body[data-festival="holi"] .kpi-box:nth-child(3) { border-top: 3px solid #10b981; }
body[data-festival="holi"] .kpi-box:nth-child(4) { border-top: 3px solid #f59e0b; }
/* Independence Day */
body[data-festival="independence"] {
  --accent: #FF9933;
  --accent-g: linear-gradient(90deg, #FF9933, #ffffff, #138808);
}
body[data-festival="independence"] .nav-bar,
body[data-festival="independence"] header {
  border-bottom: 2px solid;
  border-image: linear-gradient(90deg, #FF9933, #fff, #138808) 1;
}

/* ══════════════════════════════════════════════════════════════
   FIX 16 — AD SYSTEM DISPLAY
   ══════════════════════════════════════════════════════════════ */
.ad-preroll-overlay {
  position: absolute; inset: 0; z-index: 50;
  display: flex; align-items: flex-end;
  padding: 14px; pointer-events: none;
}
.ad-preroll-overlay > * { pointer-events: auto; }
.ad-skip-btn {
  background: rgba(0,0,0,.7);
  color: #fff; border: none;
  padding: 7px 14px; border-radius: 6px;
  font-size: 12px; font-weight: 700; cursor: pointer;
}
.ad-banner-strip {
  width: 100%; padding: 8px 16px;
  background: var(--bg3); border-top: 1px solid var(--border);
  text-align: center; font-size: 12px; color: var(--text3);
}
.ad-label {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(245,158,11,.12); color: #f59e0b;
  padding: 2px 7px; border-radius: 4px;
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; margin-right: 8px;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE NAV — CLEAN 5 ITEMS
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .mbn-item:not([href*="/"]):not([href*="trending"]):not([href*="shorts"]):not([href*="upload"]):not([href*="lokstudio"]) {
    display: none !important;
  }
  .mobile-bottom-nav-inner { justify-content: space-around !important; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ══════════════════════════════════════════════════════════════
   Z-INDEX MAP (no conflicts)
   ══════════════════════════════════════════════════════════════ */
header, .top-nav, .nav-bar { z-index: 100 !important; }
.sidebar, .admin-nav        { z-index: 50 !important; }
.mobile-bottom-nav          { z-index: 99 !important; }
.share-sheet, .drawer-sheet { z-index: 200 !important; }
#mini-player                { z-index: 900 !important; }
#lt-toast-container         { z-index: 9000 !important; }
#v61UploadModal             { z-index: 9200 !important; }
#videoEditModal             { z-index: 9100 !important; }
.admin-nav                  { z-index: 9300 !important; }

/* ══════════════════════════════════════════════════════════════
   GLOBAL POLISH
   ══════════════════════════════════════════════════════════════ */
/* Smooth tap response */
button, a, [role="button"], [onclick] {
  -webkit-tap-highlight-color: transparent;
}
/* Input fields consistent */
input, textarea, select {
  background: var(--bg3);
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: 10px;
  font-family: inherit;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,103,31,.12);
}

/* === v70_india_theme.css === */
/* ============================================================
   LOKTUBE v70 — BHARAT SUPER APP THEME
   Indian Tricolor Design System: Saffron + White + Green
   Dark Mode: Deep Black + Gold Highlights
   ============================================================ */

:root {
  /* ── Indian Tricolor Palette ── */
  --saffron:       #FF6F00;
  --saffron-light: #FF9800;
  --saffron-dark:  #E65100;
  --india-white:   #FFFFFF;
  --india-green:   #138808;
  --india-green2:  #1B5E20;
  --ashoka-blue:   #000080;
  --gold:          #FFD700;
  --gold-light:    #FFECB3;

  /* ── Brand Override ── */
  --accent:   #FF6F00;
  --accent2:  #E65100;
  --accent3:  #FFAB40;
  --accent-g: linear-gradient(135deg, #FF6F00 0%, #FF9800 50%, #138808 100%);
  --accent-g2:linear-gradient(135deg, #FF6F00, #FFD700);
  --glow:     0 0 24px rgba(255,111,0,.35);

  /* ── Dark Mode Defaults ── */
  --bg:    #0A0A0A;
  --bg2:   #111111;
  --bg3:   #1A1A1A;
  --bg4:   #222222;
  --bg5:   #2A2A2A;
  --border:  rgba(255,111,0,.15);
  --border2: rgba(255,111,0,.28);
  --text:    #F5F5F0;
  --text2:   #9E9E9E;
  --text3:   #616161;
  --nav-bg:  rgba(10,10,10,.97);
  --card-bg: #111111;
  --shadow:  0 4px 24px rgba(0,0,0,.8);
  --green:   #4CAF50;
  --red:     #F44336;
  --nav-h:   56px;

  /* ── Tricolor gradient bar ── */
  --india-bar: linear-gradient(90deg, #FF6F00 33.3%, #FFFFFF 33.3% 66.6%, #138808 66.6%);
  --india-bar-h: 3px;
}

/* ─── LIGHT MODE ──────────────────────────────────────────── */
[data-theme="light"] {
  --bg:    #FAFAFA;
  --bg2:   #FFFFFF;
  --bg3:   #F5F5F5;
  --bg4:   #EEEEEE;
  --bg5:   #E0E0E0;
  --border:  rgba(0,0,0,.1);
  --border2: rgba(0,0,0,.18);
  --text:    #212121;
  --text2:   #616161;
  --text3:   #9E9E9E;
  --nav-bg:  rgba(255,255,255,.97);
  --card-bg: #FFFFFF;
  --shadow:  0 2px 12px rgba(0,0,0,.12);
}

/* ─── RESET + BASE ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Noto Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  transition: background .3s, color .3s;
}

/* ─── INDIA TRICOLOR TOP BAR ─────────────────────────────── */
body::before {
  content: '';
  display: block;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--india-bar-h);
  background: var(--india-bar);
  z-index: 9999;
}

/* ─── NAVBAR OVERRIDE ─────────────────────────────────────── */
.navbar {
  background: var(--nav-bg) !important;
  border-bottom: 1px solid var(--border) !important;
  top: var(--india-bar-h) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.logo {
  background: var(--accent-g);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 900 !important;
  font-size: 20px !important;
  letter-spacing: -.5px;
}

.logo::after {
  content: ' 🇮🇳';
  -webkit-text-fill-color: initial;
}

/* ─── CARDS ───────────────────────────────────────────────── */
.yt-card, .video-card, .blog-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  overflow: hidden;
}
.yt-card:hover, .video-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow), 0 0 0 1px var(--border2);
  border-color: var(--border2);
}

/* ─── BUTTONS ─────────────────────────────────────────────── */
.btn, .btn-primary, .btn-upload, .submit-btn {
  background: linear-gradient(135deg, var(--saffron), var(--saffron-light)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 24px !important;
  font-weight: 700 !important;
  transition: all .2s !important;
  cursor: pointer;
}
.btn:hover, .btn-primary:hover, .btn-upload:hover, .submit-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(255,111,0,.4) !important;
  filter: brightness(1.08) !important;
}

.btn-green {
  background: linear-gradient(135deg, var(--india-green), #4CAF50) !important;
}

/* ─── SEARCH BAR ──────────────────────────────────────────── */
.nav-search input {
  background: var(--bg3);
  border: 1.5px solid var(--border);
  color: var(--text);
  border-radius: 24px !important;
}
.nav-search input:focus {
  border-color: var(--saffron) !important;
  box-shadow: 0 0 0 3px rgba(255,111,0,.15) !important;
}
.search-btn {
  background: linear-gradient(135deg, var(--saffron), var(--saffron-light)) !important;
}

/* ─── SIDEBAR ─────────────────────────────────────────────── */
.lk-sidebar {
  background: var(--bg2) !important;
  border-right: 1px solid var(--border) !important;
}
.sb-item.active, .sb-item:hover {
  background: rgba(255,111,0,.12) !important;
  color: var(--saffron) !important;
}
.sb-item.active i { color: var(--saffron) !important; }

/* ─── INDIA LABEL BADGE ──────────────────────────────────── */
.india-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: linear-gradient(135deg, rgba(255,111,0,.15), rgba(19,136,8,.15));
  border: 1px solid rgba(255,111,0,.3);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--saffron);
}

/* ─── DARK MODE TOGGLE ────────────────────────────────────── */
.theme-toggle {
  width: 38px;
  height: 38px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s;
  color: var(--text2);
  font-size: 15px;
}
.theme-toggle:hover {
  background: rgba(255,111,0,.15);
  color: var(--saffron);
  border-color: var(--saffron);
}

/* ─── SECTION HEADERS ─────────────────────────────────────── */
.section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.section-head h2 {
  font-size: 1.1rem;
  font-weight: 800;
  background: var(--accent-g);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-head::before {
  content: '';
  width: 4px;
  height: 22px;
  background: var(--accent-g);
  border-radius: 2px;
}

/* ─── INDIA STAT CARDS ────────────────────────────────────── */
.stat-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  transition: all .2s;
}
.stat-card:hover {
  border-color: var(--saffron);
  box-shadow: 0 4px 20px rgba(255,111,0,.2);
  transform: translateY(-2px);
}
.stat-value {
  font-size: 1.8rem;
  font-weight: 900;
  background: var(--accent-g);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-label {
  font-size: 12px;
  color: var(--text2);
  font-weight: 600;
  margin-top: 4px;
}

/* ─── NOTIFICATION BADGE ──────────────────────────────────── */
.notif-badge {
  background: var(--saffron) !important;
}

/* ─── VIDEO TAGS ──────────────────────────────────────────── */
.video-tag {
  padding: 3px 10px;
  background: rgba(255,111,0,.12);
  color: var(--saffron);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}

/* ─── PROGRESS BARS ───────────────────────────────────────── */
.prog-bar, .progress-fill {
  background: linear-gradient(90deg, var(--saffron), var(--saffron-light)) !important;
}

/* ─── FORMS ───────────────────────────────────────────────── */
.uf-input, input[type="text"], input[type="email"],
input[type="password"], textarea, select {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 10px !important;
  transition: border-color .2s !important;
}
.uf-input:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--saffron) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255,111,0,.12) !important;
}

/* ─── TABS ────────────────────────────────────────────────── */
.tab-nav { border-bottom: 2px solid var(--border); }
.tab-btn {
  padding: 10px 20px;
  border: none;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all .2s;
}
.tab-btn.active {
  color: var(--saffron);
  border-bottom-color: var(--saffron);
}
.tab-btn:hover { color: var(--saffron); }

/* ─── MODALS ──────────────────────────────────────────────── */
.modal-box {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
}

/* ─── SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb {
  background: var(--saffron);
  border-radius: 3px;
  opacity: .6;
}
::-webkit-scrollbar-thumb:hover { opacity: 1; }

/* ─── SHIMMER LOADING ─────────────────────────────────────── */
.shimmer {
  background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── ANIMATIONS ──────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes bounceIn {
  0%   { transform: scale(.3); opacity: 0; }
  50%  { transform: scale(1.05); }
  70%  { transform: scale(.9); }
  100% { transform: scale(1); opacity: 1; }
}

.animate-in     { animation: fadeInUp .4s ease forwards; }
.animate-fade   { animation: fadeIn .3s ease forwards; }
.animate-bounce { animation: bounceIn .5s ease forwards; }
.animate-slide-right { animation: slideInRight .3s ease forwards; }

/* Staggered animation delays */
.stagger-1 { animation-delay: .05s; }
.stagger-2 { animation-delay: .1s; }
.stagger-3 { animation-delay: .15s; }
.stagger-4 { animation-delay: .2s; }

/* ─── LIVE INDICATOR ──────────────────────────────────────── */
.live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--red);
  border-radius: 50%;
  animation: pulse 1s infinite;
}
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--red);
  color: #fff;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
}

/* ─── VERIFIED BADGE ──────────────────────────────────────── */
.verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  background: var(--saffron);
  border-radius: 50%;
  font-size: 9px;
  color: #fff;
}

/* ─── TOAST NOTIFICATIONS ─────────────────────────────────── */
#lk-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.lk-toast {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 18px;
  min-width: 260px;
  max-width: 380px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
  animation: slideInRight .3s ease forwards;
  pointer-events: all;
}
.lk-toast.success { border-left: 4px solid var(--india-green); }
.lk-toast.error   { border-left: 4px solid var(--red); }
.lk-toast.info    { border-left: 4px solid var(--saffron); }
.lk-toast-icon    { font-size: 18px; flex-shrink: 0; }
.lk-toast-msg     { font-size: 13px; font-weight: 600; color: var(--text); }

/* ─── PREMIUM GRADIENT HEADINGS ───────────────────────────── */
.gradient-text {
  background: var(--accent-g);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gold-text {
  background: linear-gradient(135deg, var(--gold), var(--saffron-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── INDIA HERO BANNER ───────────────────────────────────── */
.india-hero {
  background: linear-gradient(135deg, #1a0a00 0%, #0d1a0d 50%, #0a0d1a 100%);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
  position: relative;
  overflow: hidden;
}
.india-hero::before {
  content: '🇮🇳';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 80px;
  opacity: .1;
}

/* ─── MOBILE BOTTOM NAV ───────────────────────────────────── */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  z-index: 1000;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
}
.mobile-bottom-nav .nav-items {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.mobile-bottom-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--text2);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 12px;
  transition: all .2s;
}
.mobile-bottom-nav .nav-item i { font-size: 18px; }
.mobile-bottom-nav .nav-item.active { color: var(--saffron); }
.mobile-bottom-nav .nav-item:hover { color: var(--saffron); }

/* Upload FAB */
.mobile-fab {
  width: 50px; height: 50px;
  background: linear-gradient(135deg, var(--saffron), var(--saffron-light));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  box-shadow: 0 4px 16px rgba(255,111,0,.5);
  margin-top: -14px;
  text-decoration: none;
}

@media (max-width: 768px) {
  .mobile-bottom-nav { display: block; }
  body { padding-bottom: 70px; }
}

/* ─── EARNINGS / MONETIZATION ────────────────────────────── */
.earning-card {
  background: linear-gradient(135deg, rgba(255,111,0,.08) 0%, rgba(19,136,8,.08) 100%);
  border: 1px solid rgba(255,111,0,.2);
  border-radius: 16px;
  padding: 20px;
}
.earning-value {
  font-size: 2rem;
  font-weight: 900;
  color: var(--saffron);
}
.earning-value small { font-size: .6em; font-weight: 600; }

/* ─── BLOG FEED CARD ──────────────────────────────────────── */
.blog-feed-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  transition: all .2s;
}
.blog-feed-card:hover {
  transform: translateY(-3px);
  border-color: var(--border2);
  box-shadow: var(--shadow);
}
.blog-cover {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: var(--bg3);
}
.blog-body { padding: 16px; }
.blog-tag {
  padding: 3px 10px;
  background: rgba(255,111,0,.12);
  color: var(--saffron);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

/* ─── CREATOR STUDIO HIGHLIGHT ────────────────────────────── */
.studio-card {
  background: linear-gradient(135deg, var(--bg2), var(--bg3));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  transition: all .2s;
}
.studio-card:hover {
  border-color: var(--saffron);
  box-shadow: 0 4px 20px rgba(255,111,0,.15);
}
.studio-icon {
  width: 44px; height: 44px;
  background: rgba(255,111,0,.12);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--saffron);
  margin-bottom: 12px;
}

/* ─── ADMIN PANEL COLORS ──────────────────────────────────── */
.admin-stat-saffron { --stat-color: var(--saffron); }
.admin-stat-green   { --stat-color: var(--india-green); }
.admin-stat-blue    { --stat-color: #2196F3; }
.admin-stat-red     { --stat-color: var(--red); }
.admin-stat { border-top: 3px solid var(--stat-color); }

/* ─── PWA INSTALL BANNER ──────────────────────────────────── */
.pwa-install-banner {
  position: fixed;
  bottom: 80px;
  left: 16px;
  right: 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
  z-index: 9998;
  animation: slideInRight .4s ease;
}
.pwa-install-banner .pwa-icon {
  width: 46px; height: 46px;
  background: linear-gradient(135deg, var(--saffron), var(--saffron-light));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.pwa-install-banner .pwa-text h4 {
  font-size: 14px; font-weight: 800;
  margin: 0 0 2px;
}
.pwa-install-banner .pwa-text p {
  font-size: 12px; color: var(--text2);
  margin: 0;
}
.pwa-install-btn {
  margin-left: auto;
  background: var(--saffron);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ─── CATEGORY PILLS ──────────────────────────────────────── */
.cat-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.cat-pills::-webkit-scrollbar { display: none; }
.cat-pill {
  padding: 6px 16px;
  border-radius: 20px;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text2);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all .2s;
}
.cat-pill:hover, .cat-pill.active {
  background: rgba(255,111,0,.15);
  border-color: var(--saffron);
  color: var(--saffron);
}

/* ─── LANGUAGE FLAG PILLS ─────────────────────────────────── */
.lang-pill {
  padding: 4px 12px;
  border-radius: 16px;
  background: rgba(19,136,8,.12);
  border: 1px solid rgba(19,136,8,.25);
  color: var(--india-green);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}
.lang-pill:hover, .lang-pill.active {
  background: rgba(19,136,8,.25);
}

/* ─── WATCHPARTY BADGE ────────────────────────────────────── */
.party-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: rgba(255,215,0,.15);
  border: 1px solid rgba(255,215,0,.3);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
}

/* ─── CHART COLORS ────────────────────────────────────────── */
.chart-saffron { fill: var(--saffron); stroke: var(--saffron); }
.chart-green   { fill: var(--india-green); stroke: var(--india-green); }

/* ─── SMOOTH PAGE TRANSITIONS ─────────────────────────────── */
.page-content { animation: fadeInUp .35s ease forwards; }

/* ─── INLINE HELPERS ──────────────────────────────────────── */
.text-saffron { color: var(--saffron) !important; }
.text-green   { color: var(--india-green) !important; }
.text-gold    { color: var(--gold) !important; }
.bg-saffron   { background: rgba(255,111,0,.1) !important; }
.bg-green     { background: rgba(19,136,8,.1) !important; }
.border-saffron { border-color: var(--saffron) !important; }

/* ─── RESPONSIVE FIXES ────────────────────────────────────── */
@media (max-width: 480px) {
  .logo::after { content: ''; }
  .stat-value  { font-size: 1.4rem; }
  .earning-value { font-size: 1.6rem; }
}

/* === v80_master_fix.css === */
/* ================================================================
   LOKTUBE v80 — MASTER FIX CSS
   Fixes: Scroll Blocking · Header Alignment · Upload UI · 
   Duplicate Buttons · Mobile/Desktop Layout
   Reference: YouTube-inspired Indian Platform Design
   ================================================================ */

/* ── 1. SCROLL BLOCKING FIX — Remove ALL body overflow locks ──────── */
html {
  overflow-x: hidden;
  overflow-y: auto !important;
  height: auto !important;
}

body {
  overflow-x: hidden !important;
  overflow-y: auto !important; /* CRITICAL: was blocking scroll */
  height: auto !important;
  min-height: 100vh;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain; /* subtle bounce dampen, not full lock */
}

/* Shorts/story page: ONLY those pages lock scroll, not all pages */
body.shorts-page,
body.story-page {
  overflow: hidden !important;
  height: 100dvh !important;
}

/* Fix: shell must not constrain height */
.lk-shell {
  display: flex;
  min-height: calc(100vh - var(--nav-h));
  overflow: visible !important; /* was causing nested scroll lockout */
}

.lk-main {
  flex: 1;
  min-width: 0;
  padding: 20px 16px;
  overflow: visible !important;
}

/* ── 2. NAVBAR — Clean, Aligned, Responsive ───────────────────────── */
.navbar {
  position: sticky !important;
  top: var(--india-bar-h, 3px) !important;
  z-index: 1000;
  height: 58px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--nav-bg, var(--bg)) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Logo — fixed size, no text-overflow issues */
.navbar .logo {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  min-width: 0;
  max-width: 160px;
}

.navbar .logo img {
  height: 32px;
  width: auto;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

/* Search bar — proper flex centering */
.nav-search {
  flex: 1 1 auto;
  min-width: 80px;
  max-width: 500px;
  margin: 0 8px;
  position: relative;
  display: flex;
  align-items: center;
}

.nav-search input {
  width: 100%;
  padding: 9px 44px 9px 16px;
  border-radius: 24px;
  border: 1.5px solid var(--border);
  background: var(--bg3);
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  font-family: inherit;
}

.nav-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,111,0,.12);
}

.search-btn {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  transition: opacity .15s;
}

.search-btn:hover { opacity: .85; }

/* Nav actions — no overflow, no wrapping */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}

/* ── 3. DUPLICATE UPLOAD BUTTON FIX ──────────────────────────────── */
/* Remove any floating FAB upload button that blocks UI */
.upload-fab,
.fab-upload,
.floating-upload,
#floatingUploadBtn,
.upload-float-btn {
  display: none !important;
}

/* ── 4. HEADER ELEMENTS — Proper sizing ──────────────────────────── */
.nav-notif-btn,
.nav-avatar,
.btn-icon {
  flex-shrink: 0;
}

/* Quick links — desktop only */
.nav-quicklinks {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

/* ── 5. SIDEBAR — sticky, proper scrolling ───────────────────────── */
.lk-sidebar {
  width: var(--sb-w, 240px);
  flex-shrink: 0;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  height: calc(100vh - var(--nav-h, 58px));
  position: sticky;
  top: var(--nav-h, 58px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--bg4) transparent;
  transition: width .25s cubic-bezier(.4,0,.2,1);
  z-index: 100;
}

/* ── 6. MOBILE BOTTOM NAV — Fixed, no scroll interference ────────── */
.mobile-bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: var(--bg2) !important;
  border-top: 1px solid var(--border) !important;
  z-index: 500 !important;
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

.mobile-bottom-nav-inner {
  display: flex;
  height: 54px;
}

.mbn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--text2);
  font-size: 9px;
  font-weight: 700;
  transition: color .15s;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.mbn-item i { font-size: 20px; }
.mbn-item.active,
.mbn-item:active { color: var(--accent); }

/* Body padding for mobile bottom nav */
@media (max-width: 768px) {
  body { padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px)) !important; }
  .mobile-bottom-nav { display: block !important; }
}

@media (min-width: 769px) {
  .mobile-bottom-nav { display: none !important; }
  .nav-quicklinks { display: flex; }
}

/* ── 7. VIDEO GRID — Responsive, clean ───────────────────────────── */
.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

@media (max-width: 640px) {
  .content-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

@media (max-width: 380px) {
  .content-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ── 8. VIDEO CARD — Modern YouTube-like ────────────────────────── */
.yt-card {
  border-radius: 12px;
  overflow: visible;
  transition: transform .15s ease;
  cursor: pointer;
  position: relative;
  background: transparent;
}

.yt-card:hover {
  transform: translateY(-3px);
}

.yt-thumb-wrap {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg3);
  transition: box-shadow .3s;
}

.yt-card:hover .yt-thumb-wrap {
  box-shadow: 0 8px 28px rgba(0,0,0,.4);
}

.yt-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}

.yt-card:hover .yt-thumb-wrap img {
  transform: scale(1.05);
}

.yt-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(0,0,0,.85);
  color: #fff;
}

.yt-info {
  display: flex;
  gap: 10px;
  padding: 10px 2px 4px;
  align-items: flex-start;
}

.yt-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text);
}

.yt-channel {
  font-size: 12px;
  color: var(--text2);
  margin-top: 3px;
}

.yt-meta {
  font-size: 12px;
  color: var(--text3);
  margin-top: 2px;
}

/* ── 9. UPLOAD PAGE — Clean progress, no stuck at 100% ──────────── */
.upload-area {
  border: 2px dashed var(--border2);
  border-radius: 16px;
  padding: 48px 24px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
  background: var(--bg3);
}

.upload-area:hover,
.upload-area.drag {
  border-color: var(--accent);
  background: rgba(255,111,0,.05);
}

.upload-progress {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  margin-top: 16px;
}

.prog-track {
  height: 8px;
  background: var(--bg4);
  border-radius: 4px;
  overflow: hidden;
  margin: 12px 0 8px;
}

.prog-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #ff9a2f);
  border-radius: 4px;
  width: 0%;
  transition: width .3s ease;
}

/* Stage chips */
.stage-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  background: var(--bg4);
  border: 1px solid var(--border);
  color: var(--text2);
  transition: all .2s;
}

.stage-chip.active {
  background: rgba(255,111,0,.15);
  border-color: var(--accent);
  color: var(--accent);
}

.stage-chip.done {
  background: rgba(76,175,80,.15);
  border-color: var(--green, #4caf50);
  color: var(--green, #4caf50);
}

/* ── 10. DESKTOP SIDEBAR LAYOUT ──────────────────────────────────── */
@media (min-width: 769px) {
  .lk-sidebar {
    display: block !important;
  }

  body.sb-hidden .lk-sidebar {
    display: none !important;
  }
}

@media (max-width: 768px) {
  /* On mobile: sidebar is drawer, not in flow */
  .lk-sidebar {
    position: fixed !important;
    top: var(--nav-h, 58px) !important;
    left: 0 !important;
    bottom: 0 !important;
    transform: translateX(-100%) !important;
    z-index: 200 !important;
    transition: transform .25s cubic-bezier(.4,0,.2,1) !important;
    height: auto !important;
  }

  .lk-sidebar.open {
    transform: translateX(0) !important;
  }

  .lk-main {
    padding: 12px 10px !important;
  }
}

/* ── 11. RESPONSIVE NAVBAR ───────────────────────────────────────── */
@media (max-width: 900px) {
  .nav-quicklinks { display: none !important; }
  .nav-trend-pill { display: none !important; }
  .nav-earn-chip  { display: none !important; }
}

@media (max-width: 640px) {
  .navbar {
    padding: 0 8px;
    gap: 4px;
    height: 52px;
  }
  .nav-search { margin: 0 4px; }
  .nav-search input {
    font-size: 13px;
    padding: 7px 36px 7px 10px;
  }
  .create-label { display: none !important; }
  .nav-create-btn { padding: 7px 10px; }
}

@media (max-width: 420px) {
  .logo { font-size: 15px; }
  /* Hide language picker on very small screens */
  #langWrap { display: none !important; }
}

/* ── 12. HOME PAGE — Feed + Recommendations desktop layout ───────── */
@media (min-width: 1024px) {
  .home-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    max-width: 1200px;
  }

  .home-feed { min-width: 0; }
  .home-sidebar { min-width: 0; }
}

/* ── 13. SHORTS — Proper full screen scroll snap ─────────────────── */
.shorts-feed {
  height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.shorts-feed::-webkit-scrollbar { display: none; }

.short-item {
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ── 14. WATCH PAGE — Player + sidebar ───────────────────────────── */
@media (min-width: 1024px) {
  .watch-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    align-items: flex-start;
  }
}

/* ── 15. SEARCH DROPDOWN — Proper z-index ────────────────────────── */
.search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  max-height: 360px;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  display: none;
  z-index: 1100;
}

.search-dropdown.open { display: block; }

/* ── 16. TOAST — above mobile nav ───────────────────────────────── */
#lt-toast-container {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  align-items: center;
}

/* ── 17. PWA INSTALL BANNER — above mobile nav ───────────────────── */
#pwaInstallBanner {
  bottom: 70px !important;
}

/* ── 18. MODAL — proper centering, scrollable ────────────────────── */
.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.8);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}

.modal-box {
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── 19. CHANNEL PAGE ─────────────────────────────────────────────── */
.channel-banner {
  width: 100%;
  aspect-ratio: 16/4;
  object-fit: cover;
  border-radius: 12px;
  background: var(--bg3);
}

@media (max-width: 640px) {
  .channel-banner { aspect-ratio: 16/5; border-radius: 8px; }
}

/* ── 20. TRENDING SECTION ─────────────────────────────────────────── */
.trending-rank {
  font-size: 32px;
  font-weight: 800;
  color: var(--border2);
  line-height: 1;
  min-width: 36px;
}

/* ── 21. FOOTER ───────────────────────────────────────────────────── */
.site-footer {
  padding: 16px;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  margin-top: 24px;
}

/* ── 22. FIX: remove v55_fixes.css conflicting body overflow ─────── */
/* Ensure body scroll is NEVER locked for normal pages */
body:not(.shorts-page):not(.story-page) {
  overflow-y: auto !important;
  height: auto !important;
}

/* ── v85 FIX: modal-open uses position:fixed pattern (see v85_scroll_fix.js) ── */
/* overflow-y:auto here was fighting with overflow:hidden in v61/v59 */
/* Both are now removed — v85_scroll_fix.css owns modal-open behavior */
/* body.modal-open { overflow-y: auto !important; } — superseded by v85 */

/* Exception: actual full-screen dialogs — also handled by lkLockScroll() in v85 */
body.dialog-open {
  overflow: hidden !important;
}

/* ── 23. LOADING SKELETON ─────────────────────────────────────────── */
@keyframes shimmer {
  0%  { background-position: 200% center; }
  100%{ background-position: -200% center; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg3) 25%,
    var(--bg4) 50%,
    var(--bg3) 75%
  );
  background-size: 400% 100%;
  animation: shimmer 1.6s infinite;
  border-radius: 8px;
}

/* ── 24. INDIA TRICOLOR BAR — not body::before (causes scroll offset) */
.india-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #FF6F00 33.3%, #FFFFFF 33.3% 66.6%, #138808 66.6%);
  z-index: 9999;
  pointer-events: none;
}

/* Override body::before tricolor so it doesn't affect layout */
body::before {
  position: fixed !important;
  pointer-events: none !important;
}

/* ── 25. BHARAT STRIP ─────────────────────────────────────────────── */
.bharat-strip {
  background: linear-gradient(90deg, rgba(255,111,0,.08), rgba(19,136,8,.08));
  border: 1px solid rgba(255,111,0,.15);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

.bharat-strip::-webkit-scrollbar { display: none; }

/* ── 26. WhatsApp float share button — not blocking content ──────── */
.wa-share-float {
  position: fixed;
  bottom: 80px;
  right: 16px;
  z-index: 450; /* below mobile nav */
  width: 48px;
  height: 48px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  box-shadow: 0 4px 16px rgba(37,211,102,.4);
  text-decoration: none;
  transition: transform .2s;
  cursor: pointer;
  border: none;
}

.wa-share-float:hover { transform: scale(1.1); }

@media (max-width: 768px) {
  .wa-share-float { bottom: 74px; }
}

/* ── 27. STORY RINGS ─────────────────────────────────────────────── */
.stories-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 8px 0 12px;
  scrollbar-width: none;
}

.stories-row::-webkit-scrollbar { display: none; }

.story-ring {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.story-ring-outer {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  padding: 2.5px;
  background: linear-gradient(135deg, #FF6F00, #FFD700, #138808);
}

.story-ring-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--bg);
  border: 2.5px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.story-ring-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-name {
  font-size: 11px;
  color: var(--text2);
  max-width: 68px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 28. PAGE WRAPPER — proper centering ─────────────────────────── */
.page-wrapper {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 16px;
}

/* ── 29. UPLOAD FORM — Clean layout ─────────────────────────────── */
.upload-form-grid {
  display: grid;
  gap: 18px;
}

.upload-thumb-preview {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 12px;
  object-fit: cover;
  background: var(--bg4);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── 30. NOTIFICATION PANEL ──────────────────────────────────────── */
.notif-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 320px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  display: none;
  z-index: 1100;
  -webkit-overflow-scrolling: touch;
}

.notif-panel.open { display: block; }

@media (max-width: 480px) {
  .notif-panel {
    right: -60px;
    width: calc(100vw - 16px);
  }
  .profile-dropdown {
    right: 0;
    width: calc(100vw - 16px);
    left: auto;
  }
}

/* === v81_premium_theme.css === */
/* ================================================================
   LOKTUBE v81 — PREMIUM INDIAN IDENTITY THEME
   Saffron + White + Deep Black | YouTube + Instagram + TikTok
   Reference: All uploaded UI mockups
   ================================================================ */

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

/* ── ROOT: SAFFRON PALETTE ────────────────────────────────────── */
:root {
  --saffron:        #FF6B00;
  --saffron-light:  #FF8C00;
  --saffron-dark:   #E55D00;
  --saffron-pale:   rgba(255,107,0,.08);
  --saffron-glow:   0 0 24px rgba(255,107,0,.35);
  --chakra-blue:    #000080;
  --gold:           #FFD700;
  --india-green:    #138808;
  --india-white:    #FFF8F0;

  /* Brand accent = saffron */
  --accent:   #FF6B00 !important;
  --accent2:  #E55D00 !important;
  --accent3:  #FFAB40 !important;
  --accent-g: linear-gradient(135deg, #FF6B00 0%, #FF9800 60%, #FFD700 100%) !important;
  --accent-g2:linear-gradient(135deg, #FF6B00 0%, #E55D00 100%) !important;
  --glow:     0 0 24px rgba(255,107,0,.35) !important;

  /* Dark base */
  --bg:    #0A0A0A;
  --bg2:   #111111;
  --bg3:   #1A1A1A;
  --bg4:   #222222;
  --bg5:   #2A2A2A;
  --border:  rgba(255,107,0,.14);
  --border2: rgba(255,107,0,.26);
  --text:    #F5F0E8;
  --text2:   #A09080;
  --text3:   #604030;
  --nav-bg:  rgba(8,8,8,.97);
  --card-bg: #111111;
  --shadow:  0 4px 24px rgba(0,0,0,.8);
  --nav-h:   58px;
  --sb-w:    220px;

  /* Tricolor bar */
  --india-bar: linear-gradient(90deg, #FF6B00 33.3%, #FFFFFF 33.3% 66.6%, #138808 66.6%);
  --india-bar-h: 3px;

  --green: #4CAF50;
  --red:   #F44336;
}

/* ── LIGHT MODE ───────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:    #FFFAF5;
  --bg2:   #FFFFFF;
  --bg3:   #FFF3E0;
  --bg4:   #FFE0B2;
  --bg5:   #FFCC80;
  --border:  rgba(255,107,0,.15);
  --border2: rgba(255,107,0,.25);
  --text:    #1A0A00;
  --text2:   #6D4C41;
  --text3:   #BCAAA4;
  --nav-bg:  rgba(255,250,245,.97);
  --card-bg: #FFFFFF;
  --shadow:  0 2px 12px rgba(255,107,0,.12);
}

/* ── BASE RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: hidden;
  overflow-y: auto !important;
  height: auto !important;
  scroll-behavior: smooth;
}

body {
  font-family: 'Noto Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
  min-height: 100vh;
  -webkit-overflow-scrolling: touch;
  line-height: 1.5;
}

/* Tricolor top bar */
body::before {
  content: '';
  display: block;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--india-bar-h);
  background: var(--india-bar);
  z-index: 9999;
  pointer-events: none;
}

/* Shorts/story: only these pages lock */
body.shorts-page,
body.story-page {
  overflow: hidden !important;
  height: 100dvh !important;
}

/* ── SCROLLBAR STYLING ────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--saffron); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--saffron-light); }

/* ── NAVBAR ───────────────────────────────────────────────────── */
.navbar {
  position: sticky !important;
  top: var(--india-bar-h) !important;
  z-index: 1000;
  height: var(--nav-h);
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--nav-bg) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Logo */
.navbar .logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
}

.logo-play {
  width: 36px; height: 36px;
  background: var(--accent);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #fff;
  box-shadow: var(--saffron-glow);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

/* Ashoka Chakra inside logo play button */
.logo-play::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.4);
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}

.logo span {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.3px;
  background: var(--accent-g);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Search bar */
.nav-search {
  flex: 1;
  max-width: 520px;
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg3);
  border: 1.5px solid var(--border);
  border-radius: 28px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}

.nav-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,107,0,.12);
}

.nav-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
}

.nav-search input::placeholder { color: var(--text2); }

.search-btn {
  background: var(--accent);
  border: none;
  width: 44px;
  height: 44px;
  cursor: pointer;
  color: #fff;
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
  flex-shrink: 0;
}

.search-btn:hover { background: var(--accent2); }

/* Nav actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

.nav-create-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #fff !important;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 700;
  transition: all .18s;
  box-shadow: 0 2px 12px rgba(255,107,0,.3);
  white-space: nowrap;
}

.nav-create-btn:hover {
  background: var(--accent2);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(255,107,0,.5);
}

.nav-icon-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  transition: all .15s;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-icon-btn:hover,
.nav-notif-btn:hover {
  border-color: var(--accent);
  background: var(--saffron-pale);
  color: var(--accent);
}

.nav-notif-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  transition: all .15s;
  position: relative;
}

.notif-badge {
  position: absolute;
  top: -3px; right: -3px;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  padding: 1px 4px;
  border-radius: 8px;
  line-height: 1.4;
  min-width: 16px;
  text-align: center;
}

.nav-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--border);
  background: var(--accent);
  cursor: pointer;
  transition: border-color .15s;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.nav-avatar:hover { border-color: var(--accent); }
.nav-avatar img { width: 100%; height: 100%; object-fit: cover; }

.avatar-placeholder {
  font-weight: 800;
  font-size: 15px;
  color: #fff;
}

/* Quick nav links */
.nav-quicklinks {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.nav-qlink {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  text-decoration: none;
  transition: all .15s;
  white-space: nowrap;
}

.nav-qlink:hover, .nav-qlink.active {
  background: var(--saffron-pale);
  color: var(--accent);
}

.nav-trend-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  background: linear-gradient(135deg, #FF6B00, #FF9800);
  color: #fff !important;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  animation: pulse-saffron 2.5s ease-in-out infinite;
}

@keyframes pulse-saffron {
  0%, 100% { box-shadow: 0 0 8px rgba(255,107,0,.4); }
  50% { box-shadow: 0 0 20px rgba(255,107,0,.7); }
}

/* ── SIDEBAR ──────────────────────────────────────────────────── */
.lk-sidebar {
  width: var(--sb-w);
  min-width: var(--sb-w);
  background: var(--bg2);
  border-right: 1px solid var(--border);
  padding: 12px 8px 80px;
  overflow-y: auto;
  overflow-x: hidden;
  position: sticky;
  top: calc(var(--nav-h) + var(--india-bar-h));
  height: calc(100vh - var(--nav-h) - var(--india-bar-h));
  flex-shrink: 0;
  z-index: 100;
  transition: transform .25s ease;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

.lk-shell {
  display: flex;
  min-height: calc(100vh - var(--nav-h) - var(--india-bar-h));
  overflow: visible !important;
}

.lk-main {
  flex: 1;
  min-width: 0;
  padding: 20px 16px 80px;
  overflow: visible !important;
}

/* Sidebar nav items */
.sb-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  color: var(--text2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all .15s;
  margin-bottom: 2px;
  position: relative;
  white-space: nowrap;
}

.sb-item:hover {
  background: var(--saffron-pale);
  color: var(--accent);
}

.sb-item.active {
  background: linear-gradient(135deg, rgba(255,107,0,.18), rgba(255,107,0,.08));
  color: var(--accent);
  border-left: 3px solid var(--accent);
}

.sb-item i {
  width: 18px;
  text-align: center;
  font-size: 15px;
  flex-shrink: 0;
}

.sb-divider {
  height: 1px;
  background: var(--border);
  margin: 10px 8px;
}

.sb-section-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text3);
  padding: 8px 14px 4px;
}

/* LokStudio button in sidebar */
.sb-studio-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--saffron-dark));
  color: #fff !important;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  margin: 8px 6px;
  transition: all .18s;
  box-shadow: 0 3px 14px rgba(255,107,0,.3);
}

.sb-studio-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(255,107,0,.5);
}

/* ── CARDS ────────────────────────────────────────────────────── */
.yt-card {
  background: var(--bg2);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  cursor: pointer;
  text-decoration: none;
  display: block;
  border: 1px solid transparent;
}

.yt-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(255,107,0,.18);
  border-color: var(--border);
}

.yt-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--bg3);
}

.yt-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .3s;
  display: block;
}

.yt-card:hover .yt-thumb img { transform: scale(1.04); }

.yt-duration {
  position: absolute;
  bottom: 6px; right: 6px;
  background: rgba(0,0,0,.85);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  backdrop-filter: blur(4px);
}

.yt-thumb-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--bg3), var(--bg4));
  display: flex; align-items: center; justify-content: center;
}

.yt-thumb-placeholder i { font-size: 32px; color: var(--text3); }

/* Play overlay on hover */
.yt-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.4) 0%, transparent 50%);
  opacity: 0;
  transition: opacity .2s;
}

.yt-card:hover .yt-thumb::after { opacity: 1; }

.yt-info {
  padding: 10px 12px 12px;
  display: flex;
  gap: 10px;
}

.yt-av {
  width: 34px; height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff;
}

.yt-av img { width: 100%; height: 100%; object-fit: cover; }

.yt-meta { flex: 1; min-width: 0; }

.yt-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.yt-channel {
  font-size: 12px;
  color: var(--text2);
  font-weight: 500;
  display: flex; align-items: center; gap: 4px;
}

.yt-channel .verified { color: var(--accent); font-size: 11px; }

.yt-stats {
  font-size: 11px;
  color: var(--text3);
  margin-top: 2px;
}

/* Videos grid */
.videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

/* ── SHORTS HORIZONTAL SCROLL ─────────────────────────────────── */
.shorts-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
}

.shorts-row::-webkit-scrollbar { display: none; }

.shorts-card {
  flex-shrink: 0;
  width: 130px;
  cursor: pointer;
  text-decoration: none;
  display: block;
}

.shorts-thumb {
  aspect-ratio: 9/16;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg3);
  position: relative;
  border: 2px solid transparent;
  transition: border-color .2s, transform .2s;
}

.shorts-card:hover .shorts-thumb {
  border-color: var(--accent);
  transform: scale(1.03);
}

.shorts-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.shorts-dur {
  position: absolute;
  bottom: 6px; left: 8px;
  background: rgba(0,0,0,.8);
  color: #fff; font-size: 10px; font-weight: 700;
  padding: 1px 5px; border-radius: 4px;
}

.shorts-title {
  font-size: 12px; font-weight: 700;
  color: var(--text);
  margin-top: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

.shorts-views { font-size: 10px; color: var(--text3); margin-top: 2px; }

/* ── SECTION HEADERS ──────────────────────────────────────────── */
.section-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-hd h2 {
  font-size: 1.1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-hd h2 .hd-icon {
  width: 28px; height: 28px;
  background: var(--accent);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #fff;
  box-shadow: 0 2px 8px rgba(255,107,0,.3);
}

.see-all-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  display: flex; align-items: center; gap: 4px;
}

.see-all-link:hover { text-decoration: underline; }

/* ── CATEGORY PILLS ───────────────────────────────────────────── */
.cat-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 20px;
  scrollbar-width: none;
}

.cat-pills::-webkit-scrollbar { display: none; }

.cat-pill {
  flex-shrink: 0;
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text2);
  background: var(--bg3);
  border: 1px solid var(--border);
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
  white-space: nowrap;
}

.cat-pill:hover,
.cat-pill.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 2px 10px rgba(255,107,0,.3);
}

/* ── BUTTONS ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px; border-radius: 22px;
  font-size: 14px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: all .18s; border: none; text-decoration: none;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 12px rgba(255,107,0,.3);
}

.btn-primary:hover {
  background: var(--accent2);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(255,107,0,.5);
}

.btn-secondary {
  background: var(--bg3);
  color: var(--text);
  border: 1.5px solid var(--border);
}

.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--saffron-pale);
}

.btn-sub {
  background: var(--accent);
  color: #fff;
  padding: 8px 20px;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  transition: all .18s;
}

.btn-sub:hover { background: var(--accent2); }

.btn-sub.subscribed {
  background: var(--bg3);
  color: var(--text2);
  border: 1px solid var(--border);
}

/* LokSupport / LokSahit button */
.btn-loksupport {
  background: var(--gold);
  color: #1A0A00;
  padding: 8px 20px;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  transition: all .18s;
  display: inline-flex; align-items: center; gap: 6px;
}

.btn-loksupport:hover {
  background: #FFE44D;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(255,215,0,.4);
}

/* ── MOBILE BOTTOM NAV ────────────────────────────────────────── */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 999;
  background: var(--nav-bg);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  height: 56px;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.mobile-bottom-nav .bottom-nav-inner {
  display: flex;
  height: 56px;
  align-items: stretch;
}

.bn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text2);
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
  transition: color .15s;
  position: relative;
}

.bn-item:hover, .bn-item.active { color: var(--accent); }

.bn-item i { font-size: 18px; }

/* Center Create button */
.bn-create {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: -6px;
}

.bn-create-btn {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: 3px solid var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  cursor: pointer;
  transition: all .18s;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(255,107,0,.5);
}

.bn-create-btn:hover {
  transform: scale(1.1) translateY(-2px);
  box-shadow: 0 8px 28px rgba(255,107,0,.7);
}

@media(max-width:768px) {
  .mobile-bottom-nav { display: block; }
  body.has-sidebar { padding-bottom: calc(60px + env(safe-area-inset-bottom,0)); }
  .lk-sidebar { 
    position: fixed;
    top: calc(var(--nav-h) + var(--india-bar-h));
    left: 0;
    height: calc(100vh - var(--nav-h) - var(--india-bar-h));
    transform: translateX(-100%);
    z-index: 990;
    box-shadow: 4px 0 24px rgba(0,0,0,.5);
    overflow-y: auto;
  }
  .lk-sidebar.open { transform: translateX(0); }
  .nav-quicklinks { display: none; }
  .nav-trend-pill { display: none; }
  .create-label { display: none; }
}

@media(max-width:480px) {
  .nav-create-btn { padding: 8px 10px; }
  .nav-search { max-width: none; }
  .videos-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .yt-title { font-size: 12px; }
}

/* ── WATCH PAGE ───────────────────────────────────────────────── */
.watch-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 16px;
}

@media(max-width:1024px) {
  .watch-layout { grid-template-columns: 1fr; }
}

.watch-player-wrap {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16/9;
}

.watch-player-wrap video {
  width: 100%; height: 100%;
  display: block;
}

.watch-info { padding: 16px 0; }

.watch-title {
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 10px;
}

.watch-meta {
  font-size: 13px;
  color: var(--text2);
  margin-bottom: 14px;
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}

.watch-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.action-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border-radius: 22px;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}

.action-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--saffron-pale);
}

.action-btn.liked {
  background: var(--saffron-pale);
  color: var(--accent);
  border-color: var(--accent);
}

/* Channel info strip */
.channel-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.channel-strip .ch-av {
  width: 44px; height: 44px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; font-size: 16px;
}

.channel-strip .ch-av img { width: 100%; height: 100%; object-fit: cover; }

.channel-strip .ch-info { flex: 1; min-width: 0; }
.channel-strip .ch-name { font-size: 15px; font-weight: 800; }
.channel-strip .ch-subs { font-size: 12px; color: var(--text2); }

/* Recommended sidebar */
.watch-sidebar {}

.rec-item {
  display: flex;
  gap: 10px;
  padding: 8px;
  border-radius: 12px;
  text-decoration: none;
  transition: background .15s;
  margin-bottom: 4px;
}

.rec-item:hover { background: var(--saffron-pale); }

.rec-thumb {
  width: 120px; flex-shrink: 0;
  aspect-ratio: 16/9; border-radius: 8px;
  overflow: hidden; background: var(--bg3);
  position: relative;
}

.rec-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rec-dur {
  position: absolute; bottom: 3px; right: 4px;
  background: rgba(0,0,0,.8);
  color: #fff; font-size: 9px; font-weight: 700;
  padding: 1px 4px; border-radius: 3px;
}

.rec-meta { flex: 1; min-width: 0; }

.rec-title {
  font-size: 13px; font-weight: 700;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
  line-height: 1.35;
}

.rec-ch { font-size: 11px; color: var(--text2); }
.rec-views { font-size: 11px; color: var(--text3); }

/* ── UPLOAD PAGE ──────────────────────────────────────────────── */
.upload-shell {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 16px 80px;
  overflow: visible;
}

.upload-zone {
  border: 2.5px dashed var(--border2);
  border-radius: 20px;
  padding: 60px 24px;
  text-align: center;
  cursor: pointer;
  transition: all .25s;
  background: var(--saffron-pale);
}

.upload-zone:hover, .upload-zone.drag {
  border-color: var(--accent);
  background: rgba(255,107,0,.06);
}

.upload-zone i { font-size: 52px; color: var(--accent); margin-bottom: 16px; display: block; }

.upload-zone h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: 8px; }

.upload-zone p { color: var(--text2); font-size: 14px; }

.upload-btn-pill {
  background: var(--accent);
  color: #fff; border: none;
  padding: 12px 28px; border-radius: 24px;
  font-size: 15px; font-weight: 700;
  cursor: pointer; margin-top: 14px;
  transition: all .18s; display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit;
}

.upload-btn-pill:hover {
  background: var(--accent2);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255,107,0,.4);
}

.upload-progress {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  margin-top: 16px;
}

.prog-bar-wrap {
  background: var(--bg4);
  border-radius: 8px; height: 10px;
  margin: 10px 0; overflow: hidden;
}

.prog-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #FFD700);
  border-radius: 8px;
  width: 0%;
  transition: width .3s;
}

.upload-form {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
  margin-top: 20px;
  overflow: visible;
}

.uf-input {
  width: 100%;
  background: var(--bg4);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 11px 14px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color .15s;
}

.uf-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,107,0,.12);
}

.submit-btn {
  background: var(--accent);
  color: #fff; border: none;
  padding: 13px 32px; border-radius: 12px;
  font-size: 15px; font-weight: 700;
  cursor: pointer; width: 100%; margin-top: 8px;
  transition: all .18s; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}

.submit-btn:hover {
  background: var(--accent2);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(255,107,0,.4);
}

/* ── CHANNEL PAGE ─────────────────────────────────────────────── */
.channel-banner {
  height: 200px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent) 0%, var(--saffron-dark) 40%, #8B0000 100%);
  margin-bottom: 0;
  position: relative;
}

.channel-banner img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

.channel-header {
  padding: 0 20px 20px;
  position: relative;
}

.channel-header .ch-av-big {
  width: 80px; height: 80px;
  border-radius: 50%; border: 4px solid var(--bg);
  overflow: hidden; background: var(--accent);
  margin-top: -40px; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 900; color: #fff;
}

.channel-header .ch-av-big img { width: 100%; height: 100%; object-fit: cover; }

.channel-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}

.channel-tabs::-webkit-scrollbar { display: none; }

.ch-tab {
  padding: 10px 20px;
  font-size: 14px; font-weight: 700;
  color: var(--text2);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: all .15s;
  white-space: nowrap;
}

.ch-tab:hover { color: var(--text); }
.ch-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── ADMIN + LOKSTUDIO ────────────────────────────────────────── */
.studio-sidebar {
  width: 220px; flex-shrink: 0;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  padding: 20px 10px;
  min-height: 100%;
}

.studio-main { flex: 1; min-width: 0; padding: 24px; }

.studio-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  transition: border-color .2s;
}

.studio-card:hover { border-color: var(--border2); }

.stat-badge {
  font-size: 1.8rem;
  font-weight: 900;
  background: var(--accent-g);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── BLOG CARDS ───────────────────────────────────────────────── */
.blog-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  text-decoration: none;
  display: block;
}

.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(255,107,0,.15);
  border-color: var(--border2);
}

.blog-thumb {
  aspect-ratio: 16/7;
  background: var(--bg3);
  overflow: hidden;
}

.blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.blog-body { padding: 14px 16px; }

.blog-cat {
  display: inline-block;
  background: var(--saffron-pale);
  color: var(--accent);
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  padding: 3px 8px; border-radius: 6px;
  margin-bottom: 8px;
}

.blog-title {
  font-size: 15px; font-weight: 800;
  line-height: 1.4;
  color: var(--text);
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── MODALS / OVERLAY ─────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  backdrop-filter: blur(8px);
}

.modal-box {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 20px;
  padding: 28px;
  max-width: 540px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,.7);
  position: relative;
}

.modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text2); font-size: 14px; transition: all .15s;
}

.modal-close:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── TOAST NOTIFICATIONS ──────────────────────────────────────── */
.lk-toast {
  position: fixed;
  bottom: 80px; right: 20px;
  background: var(--bg2);
  border: 1px solid var(--accent);
  border-radius: 14px;
  padding: 14px 20px;
  min-width: 260px; max-width: 380px;
  z-index: 9999;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  display: flex; align-items: center; gap: 12px;
  animation: toast-in .3s ease;
}

@keyframes toast-in {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.lk-toast.success .toast-icon { color: var(--green); }
.lk-toast.error   .toast-icon { color: var(--red); }
.lk-toast.info    .toast-icon { color: var(--accent); }

/* ── FORMS ────────────────────────────────────────────────────── */
.lk-form-card {
  max-width: 480px; margin: 40px auto;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 24px; padding: 36px 32px;
  box-shadow: 0 16px 60px rgba(0,0,0,.5);
}

.lk-form-title {
  font-size: 1.5rem; font-weight: 900;
  text-align: center; margin-bottom: 24px;
  background: var(--accent-g);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.lk-input {
  width: 100%;
  background: var(--bg3);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  color: var(--text); font-size: 15px;
  font-family: inherit;
  transition: border-color .15s;
  margin-bottom: 14px;
}

.lk-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,107,0,.12);
}

.lk-submit {
  width: 100%; padding: 13px;
  background: var(--accent); color: #fff;
  border: none; border-radius: 14px;
  font-size: 15px; font-weight: 800;
  cursor: pointer; transition: all .18s;
  font-family: inherit;
}

.lk-submit:hover {
  background: var(--accent2);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(255,107,0,.4);
}

/* ── STORIES ROW ──────────────────────────────────────────────── */
.stories-row {
  display: flex; gap: 12px;
  overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none; margin-bottom: 24px;
}

.stories-row::-webkit-scrollbar { display: none; }

.story-bubble {
  flex-shrink: 0;
  text-align: center; cursor: pointer; text-decoration: none; display: block;
}

.story-ring {
  width: 64px; height: 64px; border-radius: 50%;
  padding: 2.5px;
  background: linear-gradient(135deg, var(--accent), var(--gold));
  margin: 0 auto 6px;
}

.story-ring.seen { background: var(--bg4); }

.story-ring img, .story-ring .story-inner {
  width: 100%; height: 100%; border-radius: 50%;
  border: 2.5px solid var(--bg);
  display: block; object-fit: cover;
}

.story-label {
  font-size: 10px; font-weight: 700;
  color: var(--text2); white-space: nowrap;
  max-width: 64px; overflow: hidden; text-overflow: ellipsis;
}

/* ── SEARCH DROPDOWN ──────────────────────────────────────────── */
.search-dropdown {
  position: absolute;
  top: calc(100% + 6px); left: 0; right: 0;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.5);
  z-index: 500; overflow: hidden; display: none;
}

.sd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; text-decoration: none; color: var(--text);
  transition: background .12s;
}

.sd-item:hover { background: var(--saffron-pale); color: var(--accent); }
.sd-item i { color: var(--text3); font-size: 12px; }

/* ── VERIFIED BADGE ───────────────────────────────────────────── */
.verified-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  background: var(--accent); border-radius: 50%;
  color: #fff; font-size: 9px;
}

/* ── SIDEBAR OVERLAY ──────────────────────────────────────────── */
#sbOverlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 989;
  backdrop-filter: blur(2px);
}

#sbOverlay.active { display: block; }

/* ── NO-SIDEBAR PAGES ─────────────────────────────────────────── */
body.no-sidebar .lk-shell { display: block; }
body.no-sidebar .lk-main { padding: 0; max-width: 100%; }

/* ── PAGINATION ───────────────────────────────────────────────── */
.pagination {
  display: flex; gap: 6px; justify-content: center;
  padding: 24px 0;
  flex-wrap: wrap;
}

.page-btn {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--text); font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center;
}

.page-btn:hover, .page-btn.active {
  background: var(--accent); color: #fff; border-color: var(--accent);
}

/* ── EARNINGS / MONETIZE CHIP ─────────────────────────────────── */
.nav-earn-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 20px;
  background: rgba(255,215,0,.12); border: 1px solid rgba(255,215,0,.3);
  color: var(--gold) !important; font-size: 12px; font-weight: 800;
  text-decoration: none; transition: all .15s; flex-shrink: 0;
}

.nav-earn-chip:hover { background: rgba(255,215,0,.2); }

/* ── PROFILE DROPDOWN ─────────────────────────────────────────── */
.profile-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 220px; background: var(--bg2);
  border: 1px solid var(--border2); border-radius: 16px;
  box-shadow: 0 16px 50px rgba(0,0,0,.6);
  z-index: 1100; display: none; overflow: hidden;
}

.profile-dropdown.open { display: block; }

.pd-header {
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
}

.pd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; text-decoration: none;
  color: var(--text); font-size: 14px; font-weight: 600;
  transition: background .12s;
}

.pd-item:hover { background: var(--saffron-pale); color: var(--accent); }
.pd-item.danger:hover { color: var(--red); background: rgba(244,67,54,.08); }
.pd-item i { width: 18px; text-align: center; color: var(--text2); }

/* ── BREADCRUMB ───────────────────────────────────────────────── */
.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text3); margin-bottom: 16px;
  flex-wrap: wrap;
}

.breadcrumb a { color: var(--accent); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { color: var(--text3); }

/* ── INDIA THEMED HERO ────────────────────────────────────────── */
.india-hero-banner {
  background: linear-gradient(135deg, #0A0A0A 0%, #1A0800 50%, #0A0A0A 100%);
  border: 1px solid var(--border2);
  border-radius: 20px; padding: 28px 24px;
  position: relative; overflow: hidden; margin-bottom: 24px;
}

.india-hero-banner::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--india-bar);
}

.india-hero-banner::after {
  content: '🇮🇳';
  position: absolute; right: 24px; top: 50%;
  transform: translateY(-50%);
  font-size: 48px; opacity: .15;
  pointer-events: none;
}

/* ── COMMENTS ─────────────────────────────────────────────────── */
.comment-item {
  display: flex; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.comment-av {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff; overflow: hidden;
}

.comment-av img { width: 100%; height: 100%; object-fit: cover; }

.comment-body { flex: 1; min-width: 0; }

.comment-author {
  font-size: 13px; font-weight: 800; margin-bottom: 4px;
  display: flex; align-items: center; gap: 6px;
}

.comment-text { font-size: 14px; color: var(--text2); line-height: 1.5; }

.comment-time { font-size: 11px; color: var(--text3); margin-top: 4px; }

/* ── PWA INSTALL BANNER ───────────────────────────────────────── */
#pwaInstallBanner {
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}

/* ── NOTIF PANEL ──────────────────────────────────────────────── */
.notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 340px; max-height: 420px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.5);
  overflow: hidden; z-index: 1100; display: none;
}

.notif-panel.open { display: block; }

.notif-panel-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 15px; font-weight: 800;
}

.notif-item {
  display: flex; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid var(--border); cursor: pointer;
  transition: background .12s; text-decoration: none; color: var(--text);
}

.notif-item:hover { background: var(--saffron-pale); }
.notif-item.unread { background: rgba(255,107,0,.05); }

/* ── HIDE DESKTOP SIDEBAR ON NO-SIDEBAR ──────────────────────── */
body.no-sidebar .lk-sidebar { display: none; }

/* ── LOADING SKELETON ─────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ── FOOTER (MINIMAL) ─────────────────────────────────────────── */
.lk-footer {
  border-top: 1px solid var(--border);
  padding: 16px 24px;
  text-align: center;
  font-size: 12px; color: var(--text3);
}

/* ── LANG DROPDOWN FIX ────────────────────────────────────────── */
.lang-drop a:hover { background: var(--saffron-pale); color: var(--accent); }

/* ── SIDEBAR TOGGLE BUTTON ────────────────────────────────────── */
.sb-toggle {
  width: 38px; height: 38px;
  background: transparent; border: none;
  color: var(--text); font-size: 18px;
  cursor: pointer; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s; flex-shrink: 0;
}

.sb-toggle:hover { background: var(--saffron-pale); color: var(--accent); }

/* ── VIDEO TYPE CHIPS ─────────────────────────────────────────── */
.video-type-chip {
  position: absolute; top: 8px; left: 8px;
  background: rgba(255,107,0,.85); color: #fff;
  font-size: 9px; font-weight: 800; padding: 2px 7px;
  border-radius: 6px; text-transform: uppercase; letter-spacing: .4px;
  backdrop-filter: blur(4px);
}

/* ── SHORTS SWIPE (VERTICAL PLAYER) ──────────────────────────── */
.shorts-feed {
  height: calc(100dvh - var(--nav-h) - var(--india-bar-h));
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}

.shorts-feed::-webkit-scrollbar { display: none; }

.shorts-slide {
  height: calc(100dvh - var(--nav-h) - var(--india-bar-h));
  scroll-snap-align: start;
  position: relative; background: #000;
  display: flex; align-items: center; justify-content: center;
}

/* ── UPLOADER TYPE CARDS ──────────────────────────────────────── */
.type-btn {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 20px 12px;
  background: var(--bg2); border: 2px solid var(--border);
  border-radius: 16px; cursor: pointer; transition: all .2s;
  color: var(--text2); font-size: 13px; font-weight: 700;
}

.type-btn:hover, .type-btn.active {
  border-color: var(--accent);
  background: var(--saffron-pale);
  color: var(--accent);
}

.type-btn i { font-size: 28px; color: var(--accent); }

/* ── FIX: Overflow issues on inner containers ─────────────────── */
.lk-shell,
.lk-main,
.lk-sidebar,
.watch-layout,
.upload-shell {
  overflow: visible !important;
  /* Never block scroll with overflow:hidden on containers */
}

/* ── PRINT HIDE ───────────────────────────────────────────────── */
@media print {
  .navbar, .lk-sidebar, .mobile-bottom-nav { display: none; }
}

/* ── REDUCED MOTION ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* === v82_final.css === */
/* ================================================================
   LOKTUBE v82 — FINAL MASTER THEME
   Watch Page · Index Layout · LokStudio Charts · Admin Panel
   Channel Page · Mobile Bottom Nav · All Reference Image Fixes
   ================================================================ */

/* ══════════════════════════════════════════════════════════════
   1. WATCH PAGE — Player + Actions + Channel Strip + Right Sidebar
   ══════════════════════════════════════════════════════════════ */

/* Watch layout: 2-col on desktop */
.watch-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 16px;
  align-items: start;
}
@media (max-width: 1100px) {
  .watch-layout { grid-template-columns: 1fr; }
  .watch-right  { display: none; } /* hidden on tablet */
}
@media (max-width: 768px) {
  .watch-layout { padding: 0; gap: 0; }
}

/* Player wrapper — premium rounded dark */
.vplayer-wrap, .player-outer {
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #000 !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.7), 0 0 0 1px var(--border) !important;
  aspect-ratio: 16/9;
  position: relative;
}

/* Theater mode toggle */
.theater-btn {
  background: rgba(255,107,0,.12) !important;
  border: 1px solid rgba(255,107,0,.25) !important;
  color: var(--accent) !important;
}
.theater-btn:hover {
  background: rgba(255,107,0,.22) !important;
}

/* ── Video title + meta below player ── */
.watch-title-row {
  margin-top: 14px;
}
.watch-title-row h1 {
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.35;
  margin: 0 0 6px;
}
.watch-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.watch-views-date {
  font-size: 13px;
  color: var(--text2);
  font-weight: 600;
}

/* ── Action bar — saffron redesign ── */
.action-bar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  padding: 12px 0 !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  margin: 12px 0 !important;
}

.action-pill {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  padding: 9px 18px !important;
  border-radius: 24px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  transition: all .18s !important;
  text-decoration: none !important;
}
.action-pill:hover {
  background: var(--bg4) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  transform: translateY(-1px) !important;
}
.action-pill.liked,
.action-pill.like-btn.liked {
  background: rgba(255,107,0,.15) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}
.action-pill.disliked,
.action-pill.dislike-btn.disliked {
  background: rgba(244,67,54,.12) !important;
  color: var(--red) !important;
  border-color: var(--red) !important;
}
.action-pill.saved,
.action-pill.save-btn.saved {
  background: rgba(33,150,243,.12) !important;
  color: #60a5fa !important;
  border-color: #2563eb !important;
}

/* Like count badge */
.like-count {
  font-weight: 800;
  font-size: 14px;
}

/* ── Channel strip below actions ── */
.channel-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.channel-strip-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--accent);
}
.channel-strip-info {
  flex: 1;
  min-width: 0;
}
.channel-strip-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}
.channel-strip-name:hover { color: var(--accent); }
.channel-strip-subs {
  font-size: 12px;
  color: var(--text2);
  margin-top: 2px;
}
.channel-strip-desc {
  font-size: 13px;
  color: var(--text2);
  margin-top: 4px;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Subscribe + LokSupport buttons */
.btn-subscribe {
  background: var(--accent-g) !important;
  color: #fff !important;
  border: none !important;
  padding: 9px 20px !important;
  border-radius: 24px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all .18s !important;
  letter-spacing: .3px !important;
}
.btn-subscribe:hover { opacity: .88 !important; transform: translateY(-1px) !important; }
.btn-subscribe.subscribed {
  background: var(--bg4) !important;
  color: var(--text2) !important;
  border: 1px solid var(--border) !important;
}

.btn-loksupport {
  background: rgba(255,107,0,.12) !important;
  border: 1px solid rgba(255,107,0,.3) !important;
  color: var(--accent) !important;
  padding: 8px 16px !important;
  border-radius: 24px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all .18s !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.btn-loksupport:hover {
  background: rgba(255,107,0,.22) !important;
  transform: translateY(-1px) !important;
}

/* ── Right Sidebar — Recommended ── */
.watch-right {
  position: sticky;
  top: calc(var(--nav-h) + 20px);
  max-height: calc(100vh - var(--nav-h) - 40px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.watch-right::-webkit-scrollbar { width: 3px; }
.watch-right::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

.recommended-section-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.recommended-section-title::before {
  content: '';
  width: 3px;
  height: 16px;
  background: var(--accent);
  border-radius: 2px;
  display: block;
}

/* Recommended video card — horizontal */
.rec-card {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  text-decoration: none;
  border-radius: 12px;
  padding: 8px;
  transition: background .15s;
  cursor: pointer;
}
.rec-card:hover {
  background: var(--bg3);
}
.rec-thumb {
  width: 160px;
  height: 90px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg3);
  position: relative;
  overflow: hidden;
}
.rec-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rec-duration {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0,0,0,.85);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
}
.rec-info {
  flex: 1;
  min-width: 0;
}
.rec-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
}
.rec-channel {
  font-size: 11px;
  color: var(--text2);
  font-weight: 600;
}
.rec-views {
  font-size: 11px;
  color: var(--text2);
}

/* Blogs section in right sidebar */
.sidebar-blogs-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  margin: 20px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sidebar-blogs-title::before {
  content: '';
  width: 3px;
  height: 16px;
  background: var(--india-green);
  border-radius: 2px;
  display: block;
}
.sidebar-blog-item {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  text-decoration: none;
  border-radius: 10px;
  padding: 8px;
  transition: background .15s;
}
.sidebar-blog-item:hover { background: var(--bg3); }
.sidebar-blog-thumb {
  width: 70px;
  height: 50px;
  border-radius: 7px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg3);
}
.sidebar-blog-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sidebar-blog-cat {
  font-size: 10px;
  color: var(--accent);
  font-weight: 700;
  margin-top: 3px;
}

/* ══════════════════════════════════════════════════════════════
   2. INDEX PAGE — Featured Video + Right Monetize Panel
   ══════════════════════════════════════════════════════════════ */

/* 3-column index layout: sidebar | feed | monetize panel */
.index-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 4px;
}
@media (max-width: 1200px) {
  .index-layout { grid-template-columns: 1fr; }
  .index-monetize-panel { display: none; }
}

/* Monetize panel (right sidebar on homepage — Image 1 reference) */
.index-monetize-panel {
  position: sticky;
  top: calc(var(--nav-h) + 12px);
  max-height: calc(100vh - var(--nav-h) - 24px);
  overflow-y: auto;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  scrollbar-width: thin;
}
.monetize-header {
  font-size: 16px;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.monetize-header i { color: var(--accent); }

.monetize-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 4px;
}
.monetize-stat-label {
  font-size: 11px;
  color: var(--text2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.monetize-stat-val {
  font-size: 28px;
  font-weight: 900;
  color: var(--text);
  line-height: 1.1;
}
.monetize-stat-val.green { color: #4CAF50; }
.monetize-stat-val.saffron { color: var(--accent); }

/* Earnings mini-chart area */
.monetize-chart-area {
  background: var(--bg3);
  border-radius: 12px;
  padding: 12px;
  margin: 14px 0;
  height: 80px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  overflow: hidden;
}
.monetize-chart-bar {
  flex: 1;
  background: linear-gradient(180deg, var(--accent), rgba(255,107,0,.3));
  border-radius: 3px 3px 0 0;
  min-height: 4px;
  transition: height .3s;
}

/* Revenue by day button */
.revenue-day-btn {
  width: 100%;
  background: var(--accent-g) !important;
  color: #fff !important;
  border: none !important;
  padding: 12px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-decoration: none !important;
  margin-bottom: 14px !important;
  transition: opacity .18s !important;
}
.revenue-day-btn:hover { opacity: .88 !important; }

/* Payout card */
.monetize-payout-card {
  background: var(--bg3);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
}
.payout-amount {
  font-size: 22px;
  font-weight: 900;
  color: var(--text);
}
.payout-label {
  font-size: 11px;
  color: var(--text2);
  font-weight: 600;
  margin-bottom: 4px;
}
.payout-status {
  font-size: 11px;
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
.payout-status.pending { color: #FF9800; }
.payout-status.approved { color: #4CAF50; }

/* Latest transactions chart */
.transactions-chart {
  background: var(--bg3);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
}
.transactions-chart-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--text2);
  margin-bottom: 8px;
}
.transactions-sparkline {
  height: 50px;
  position: relative;
}

/* Payout Request button */
.payout-request-btn {
  width: 100%;
  background: var(--bg3) !important;
  border: 1px solid var(--border2) !important;
  color: var(--text) !important;
  padding: 10px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: all .15s !important;
}
.payout-request-btn:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ══════════════════════════════════════════════════════════════
   3. LOKSTUDIO — Saffron Charts + Monetization Panel
   ══════════════════════════════════════════════════════════════ */

/* Chart boxes — saffron glow */
.chart-box {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  padding: 20px !important;
  transition: border-color .2s !important;
}
.chart-box:hover {
  border-color: var(--border2) !important;
}
.chart-box h3 {
  font-size: 14px !important;
  font-weight: 800 !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* KPI boxes — premium cards */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.kpi-box {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  padding: 18px 16px !important;
  transition: all .2s !important;
  position: relative;
  overflow: hidden;
}
.kpi-box::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent-g);
  border-radius: 3px 3px 0 0;
}
.kpi-box:hover {
  border-color: var(--border2) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.3) !important;
}
.kpi-val {
  font-size: 28px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
}
.kpi-lbl {
  font-size: 11px !important;
  color: var(--text2) !important;
  margin-top: 5px !important;
  font-weight: 600 !important;
  letter-spacing: .3px !important;
}

/* Monetization panel inside LokStudio */
.monetize-panel-studio {
  background: linear-gradient(135deg, rgba(255,107,0,.12), rgba(255,152,0,.06));
  border: 1px solid rgba(255,107,0,.25);
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 24px;
}
.monetize-panel-title {
  font-size: 16px;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.monetize-panel-title i { color: var(--accent); font-size: 18px; }

/* Ad type toggles (Pre-roll, Mid-roll, Banner) */
.ad-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
@media (max-width: 500px) { .ad-type-grid { grid-template-columns: 1fr; } }

.ad-type-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  transition: all .18s;
}
.ad-type-card.active,
.ad-type-card:hover {
  border-color: var(--accent);
  background: rgba(255,107,0,.08);
}
.ad-type-card i {
  font-size: 20px;
  color: var(--accent);
  margin-bottom: 6px;
  display: block;
}
.ad-type-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text);
}
.ad-type-sub {
  font-size: 10px;
  color: var(--text2);
  margin-top: 2px;
}

/* Earnings display — styled */
.earnings-display {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 12px 0;
}
.earnings-currency {
  font-size: 18px;
  font-weight: 800;
  color: var(--accent);
}
.earnings-amount {
  font-size: 36px;
  font-weight: 900;
  color: var(--text);
  line-height: 1;
}
.earnings-period {
  font-size: 12px;
  color: var(--text2);
  font-weight: 600;
}

/* Studio tabs — saffron pills */
.snav-tab {
  padding: 9px 20px !important;
  border-radius: 22px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--text2) !important;
  cursor: pointer !important;
  transition: all .18s !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
}
.snav-tab:hover {
  color: var(--accent) !important;
  border-color: var(--border) !important;
  background: var(--bg3) !important;
}
.snav-tab.active {
  background: var(--accent-g) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* Studio upload buttons */
.studio-upload-btn {
  background: var(--accent-g) !important;
  color: #fff !important;
  border: none !important;
  padding: 10px 20px !important;
  border-radius: 22px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all .18s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  text-decoration: none !important;
}
.studio-upload-btn:hover { opacity: .88 !important; transform: translateY(-1px) !important; }

/* Ranking insights card */
.ranking-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 16px;
}
.ranking-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.ranking-card-title {
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ranking-card-title i { color: var(--accent); }
.ranking-period {
  font-size: 11px;
  color: var(--text2);
  font-weight: 600;
}

/* Recent updates list */
.recent-update-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.recent-update-item:last-child { border-bottom: none; }
.update-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,107,0,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}
.update-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.update-meta {
  font-size: 11px;
  color: var(--text2);
  margin-top: 2px;
}
.update-status {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 8px;
}
.update-status.approved {
  background: rgba(76,175,80,.15);
  color: #4CAF50;
}
.update-status.pending {
  background: rgba(255,152,0,.15);
  color: #FF9800;
}

/* ══════════════════════════════════════════════════════════════
   4. ADMIN PANEL — Saffron Theme
   ══════════════════════════════════════════════════════════════ */

.admin-nav,
#adminSidebar {
  background: var(--bg2) !important;
  border-right: 1px solid var(--border) !important;
}

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

/* Admin stats cards */
.admin-stat-card {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all .2s !important;
}
.admin-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent-g);
}
.admin-stat-card:hover {
  border-color: var(--border2) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.3) !important;
}
.admin-stat-val {
  font-size: 28px;
  font-weight: 900;
  color: var(--text);
}
.admin-stat-label {
  font-size: 12px;
  color: var(--text2);
  font-weight: 600;
  margin-top: 4px;
}

/* Admin header bar */
.admin-header {
  background: var(--bg2) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}
.admin-logo {
  font-size: 16px;
  font-weight: 900;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-section-title {
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-section-title i { color: var(--accent); }

/* Recent uploads in admin */
.admin-recent-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  transition: background .15s;
  cursor: pointer;
}
.admin-recent-item:hover { background: var(--bg3); }
.admin-recent-thumb {
  width: 60px;
  height: 36px;
  border-radius: 6px;
  background: var(--bg4);
  object-fit: cover;
  flex-shrink: 0;
}
.admin-recent-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-recent-sub {
  font-size: 11px;
  color: var(--text2);
  margin-top: 2px;
}

/* Platform stats list */
.platform-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.platform-stat-row:last-child { border-bottom: none; }
.platform-stat-row span:first-child { color: var(--text2); font-weight: 600; }
.platform-stat-row span:last-child { color: var(--text); font-weight: 800; }

/* Admin table */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.admin-table th {
  background: var(--bg3);
  color: var(--text2);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.admin-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
.admin-table tr:hover td { background: var(--bg3); }

/* ══════════════════════════════════════════════════════════════
   5. CHANNEL PAGE — Banner + Tabs (Image 3 Reference)
   ══════════════════════════════════════════════════════════════ */

/* Channel banner */
.channel-banner {
  width: 100%;
  height: 180px;
  border-radius: 16px;
  object-fit: cover;
  background: linear-gradient(135deg, var(--accent) 0%, #FF9800 50%, #FFD700 100%);
  position: relative;
  overflow: hidden;
  margin-bottom: -40px;
}
.channel-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.channel-banner-default {
  width: 100%;
  height: 180px;
  border-radius: 16px;
  background: linear-gradient(135deg, #FF6B00 0%, #FF9800 50%, #e65d00 100%);
  margin-bottom: -40px;
  position: relative;
}

/* Channel header area */
.channel-header-area {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: 0 16px 20px;
  flex-wrap: wrap;
}
.channel-avatar-wrap {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid var(--bg);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  margin-bottom: -10px;
}
.channel-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; }

.channel-info-wrap {
  flex: 1;
  min-width: 200px;
  padding-bottom: 8px;
}
.channel-display-name {
  font-size: 22px;
  font-weight: 900;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.channel-handle {
  font-size: 13px;
  color: var(--text2);
  font-weight: 600;
  margin-top: 2px;
}
.channel-tagline {
  font-size: 13px;
  color: var(--text2);
  margin-top: 6px;
  line-height: 1.4;
}

.channel-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding-bottom: 8px;
}

/* Channel tabs — matching Image 3 */
.channel-tabs {
  display: flex;
  gap: 4px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.channel-tabs::-webkit-scrollbar { display: none; }
.channel-tab {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all .18s;
  white-space: nowrap;
  text-decoration: none;
  display: block;
}
.channel-tab:hover { color: var(--text); }
.channel-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ══════════════════════════════════════════════════════════════
   6. MOBILE BOTTOM NAV — Final Fix (Image 6 reference)
   ══════════════════════════════════════════════════════════════ */

/* Override mobile bottom nav completely */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  z-index: 500;
  padding-bottom: env(safe-area-inset-bottom, 0);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}

@media (max-width: 768px) {
  .mobile-bottom-nav { display: block; }
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0)) !important; }
}

.mobile-bottom-nav-inner,
.bottom-nav-inner {
  display: flex;
  height: 60px;
  align-items: stretch;
}

/* Nav items */
.bn-item,
.mbn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--text2);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .3px;
  transition: color .15s;
  position: relative;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}
.bn-item i,
.mbn-item i { font-size: 20px; }

.bn-item.active,
.bn-item:active,
.mbn-item.active,
.mbn-item:active {
  color: var(--accent);
}

/* Center create button — elevated */
.bn-create {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.bn-create-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--accent-g);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  text-decoration: none;
  border: 3px solid var(--bg2);
  box-shadow: 0 4px 16px rgba(255,107,0,.5);
  transform: translateY(-8px);
  transition: all .2s;
  cursor: pointer;
}
.bn-create-btn:hover, .bn-create-btn:active {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 6px 20px rgba(255,107,0,.6);
}

/* Active indicator dot */
.bn-item.active::after,
.mbn-item.active::after {
  content: '';
  position: absolute;
  bottom: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

/* ══════════════════════════════════════════════════════════════
   7. FEED GRID — Video Cards Upgrade
   ══════════════════════════════════════════════════════════════ */

/* Video card (yt-card) — premium dark */
.yt-card {
  background: var(--bg2) !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  transition: all .22s !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: block !important;
}
.yt-card:hover {
  border-color: var(--border) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.4) !important;
}

.yt-thumb-wrap {
  aspect-ratio: 16/9 !important;
  overflow: hidden !important;
  position: relative !important;
  background: var(--bg3) !important;
}
.yt-thumb-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .3s !important;
}
.yt-card:hover .yt-thumb-wrap img {
  transform: scale(1.04) !important;
}

/* Duration badge */
.yt-duration, .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: 800 !important;
  padding: 3px 7px !important;
  border-radius: 5px !important;
}

/* Card info area */
.yt-info {
  padding: 12px !important;
  display: flex !important;
  gap: 10px !important;
}
.yt-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--accent) !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}
.yt-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

.yt-text { flex: 1 !important; min-width: 0 !important; }
.yt-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin-bottom: 4px !important;
}
.yt-channel {
  font-size: 12px !important;
  color: var(--text2) !important;
  font-weight: 600 !important;
}
.yt-meta {
  font-size: 11px !important;
  color: var(--text2) !important;
  margin-top: 2px !important;
}

/* Verified badge */
.verified-badge {
  color: #4fc3f7;
  font-size: 11px;
  margin-left: 2px;
}

/* ══════════════════════════════════════════════════════════════
   8. SIDEBAR — Premium Look
   ══════════════════════════════════════════════════════════════ */

.lk-sidebar {
  width: var(--sb-w) !important;
  background: var(--bg) !important;
  border-right: 1px solid var(--border) !important;
  padding: 12px 8px !important;
  flex-shrink: 0 !important;
  position: sticky !important;
  top: calc(var(--nav-h) + var(--india-bar-h)) !important;
  height: calc(100vh - var(--nav-h) - var(--india-bar-h)) !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}
.lk-sidebar::-webkit-scrollbar { display: none !important; }

/* Sidebar items */
.sb-item, .sidebar-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  color: var(--text2) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all .15s !important;
  text-decoration: none !important;
  margin-bottom: 2px !important;
}
.sb-item:hover, .sidebar-item:hover {
  background: var(--bg3) !important;
  color: var(--text) !important;
}
.sb-item.active, .sidebar-item.active,
.sb-item.sb-active {
  background: rgba(255,107,0,.1) !important;
  color: var(--accent) !important;
}
.sb-item i, .sidebar-item i {
  width: 18px !important;
  text-align: center !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
}

/* Sidebar divider */
.sb-divider {
  height: 1px;
  background: var(--border);
  margin: 10px 8px;
}

/* Sidebar section title */
.sb-section-title {
  font-size: 10px;
  font-weight: 800;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .8px;
  padding: 8px 14px 4px;
}

/* ══════════════════════════════════════════════════════════════
   9. COMMENTS — Saffron Styled
   ══════════════════════════════════════════════════════════════ */

.comment-box {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
}
.comment-input-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.comment-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
}
.comment-textarea {
  flex: 1;
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text);
  font-size: 14px;
  resize: none;
  outline: none;
  transition: border-color .2s;
  font-family: inherit;
}
.comment-textarea:focus { border-color: var(--accent); }
.btn-post-comment {
  background: var(--accent-g) !important;
  color: #fff !important;
  border: none !important;
  padding: 9px 20px !important;
  border-radius: 22px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all .18s !important;
}
.btn-post-comment:hover { opacity: .88 !important; }

/* Individual comments */
.comment-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 12px;
}
.comment-item:last-child { border-bottom: none; }
.comment-username {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}
.comment-text {
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
}
.comment-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.comment-action-btn {
  background: none !important;
  border: none !important;
  color: var(--text2) !important;
  font-size: 12px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-weight: 700 !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  transition: all .15s !important;
}
.comment-action-btn:hover {
  background: var(--bg3) !important;
  color: var(--accent) !important;
}
.comment-action-btn.liked { color: var(--accent) !important; }

/* ══════════════════════════════════════════════════════════════
   10. SHORTS PAGE — Vertical Cards
   ══════════════════════════════════════════════════════════════ */

.shorts-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.shorts-title {
  font-size: 20px;
  font-weight: 900;
  color: var(--text);
}
.shorts-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.shorts-tabs::-webkit-scrollbar { display: none; }
.shorts-tab {
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid var(--border);
  color: var(--text2);
  background: none;
  transition: all .15s;
}
.shorts-tab.active,
.shorts-tab:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ══════════════════════════════════════════════════════════════
   11. TOAST + MODAL — Global Components
   ══════════════════════════════════════════════════════════════ */

/* Upgraded toast */
#lt-toast-container .lt-toast {
  background: var(--bg2) !important;
  border: 1px solid var(--border2) !important;
  border-radius: 14px !important;
  padding: 12px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--text) !important;
  animation: ltToastIn .25s ease !important;
}

/* Modal upgrade */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-box {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  max-width: 480px !important;
  width: 100% !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.6) !important;
}

/* ══════════════════════════════════════════════════════════════
   12. BUTTONS — Global System
   ══════════════════════════════════════════════════════════════ */

.btn-primary {
  background: var(--accent-g) !important;
  color: #fff !important;
  border: none !important;
  padding: 10px 22px !important;
  border-radius: 22px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all .18s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  text-decoration: none !important;
}
.btn-primary:hover { opacity: .88 !important; transform: translateY(-1px) !important; }

.btn-secondary {
  background: var(--bg3) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  padding: 10px 22px !important;
  border-radius: 22px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all .18s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  text-decoration: none !important;
}
.btn-secondary:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ══════════════════════════════════════════════════════════════
   13. LIGHT MODE OVERRIDES — All New Components
   ══════════════════════════════════════════════════════════════ */

[data-theme="light"] .yt-card { background: #fff !important; }
[data-theme="light"] .chart-box { background: #fff !important; border-color: rgba(255,107,0,.15) !important; }
[data-theme="light"] .kpi-box { background: #fff !important; }
[data-theme="light"] .rec-card:hover { background: var(--bg3) !important; }
[data-theme="light"] .channel-banner-default {
  background: linear-gradient(135deg, #FF6B00 0%, #FF9800 50%, #FFD700 100%);
}
[data-theme="light"] .admin-stat-card { background: #fff !important; }
[data-theme="light"] .monetize-panel-studio { background: rgba(255,107,0,.06) !important; }
[data-theme="light"] .index-monetize-panel { background: #fff !important; }
[data-theme="light"] .action-pill { background: #f5f5f5 !important; border-color: rgba(0,0,0,.1) !important; color: #333 !important; }
[data-theme="light"] .action-pill:hover { border-color: var(--accent) !important; color: var(--accent) !important; background: rgba(255,107,0,.06) !important; }

/* ══════════════════════════════════════════════════════════════
   14. SCROLL FIX — Final Override
   ══════════════════════════════════════════════════════════════ */

html, body {
  overflow-x: hidden !important;
}
html {
  overflow-y: auto !important;
  height: auto !important;
}
body:not(.shorts-page):not(.story-page) {
  overflow-y: auto !important;
  height: auto !important;
}

/* Fix lk-shell height */
.lk-shell {
  display: flex !important;
  min-height: calc(100vh - var(--nav-h)) !important;
}
.lk-main {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: visible !important;
}

/* ══════════════════════════════════════════════════════════════
   15. BLOG CARDS
   ══════════════════════════════════════════════════════════════ */

.blog-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: all .22s;
  cursor: pointer;
  text-decoration: none;
  display: block;
}
.blog-card:hover {
  border-color: var(--border2);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.blog-thumb {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--bg3);
}
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.blog-card:hover .blog-thumb img { transform: scale(1.04); }
.blog-content { padding: 14px; }
.blog-category {
  font-size: 10px;
  font-weight: 800;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 6px;
}
.blog-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-meta {
  font-size: 11px;
  color: var(--text2);
}
.blog-read-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  margin-top: 8px;
  text-decoration: none;
}

/* Blogs section title on index */
.section-title {
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
  margin: 24px 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-title::before {
  content: '';
  width: 4px;
  height: 20px;
  background: var(--accent-g);
  border-radius: 3px;
  display: block;
}

/* ══════════════════════════════════════════════════════════════
   16. RESPONSIVE CLEANUP
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .watch-title-row h1 { font-size: 16px; }
  .action-pill { padding: 8px 12px !important; font-size: 13px !important; }
  .channel-strip-desc { display: none; }
  .kpi-val { font-size: 22px !important; }
  .channel-display-name { font-size: 18px; }
  .channel-banner, .channel-banner-default { height: 130px; }
  .section-title { font-size: 16px; }
}

@media (max-width: 480px) {
  .action-bar { gap: 5px !important; }
  .action-pill { padding: 7px 10px !important; font-size: 12px !important; }
  .channel-header-area { padding: 0 10px 14px; }
  .watch-layout { padding: 0 8px; }
}

/* === v83_master.css === */
/* ================================================================
   LOKTUBE v83 — MASTER CSS
   ✅ Scroll bug fix (no rogue overflow:hidden on body)
   ✅ LokFeed social post system
   ✅ Moments (replaces Stories)
   ✅ Regional language strip
   ✅ Creator rank badges
   ✅ Festival themes
   ✅ Skeleton loaders
   ✅ Premium micro-interactions
   ✅ Category pills
   ✅ Mobile-first optimization
   ✅ Low-end Android GPU hints
   ================================================================ */

/* ── SCROLL FIX: Global rule — body must scroll unless explicitly locked ── */
html,
body {
  overflow-x: hidden !important;
  overflow-y: auto;            /* DEFAULT: scrollable */
}

/* Shorts and Story pages legitimately lock scroll */
body.shorts-page,
body.story-page,
body.moments-page {
  overflow: hidden !important;
}

/* Never let overlay divs block underlying scroll */
body:not(.shorts-page):not(.story-page):not(.moments-page) > .shorts-shell,
body:not(.shorts-page):not(.story-page):not(.moments-page) > .moments-overlay {
  pointer-events: none;
  display: none !important;
}

/* GPU-accelerate main scroll container */
.main-content,
.page-wrap,
.home-wrap,
#mainContent {
  will-change: scroll-position;
  -webkit-overflow-scrolling: touch;
  transform: translateZ(0); /* promote to own layer */
}

/* ── SCROLL FIX: Sidebar overlay must NOT block page scroll ── */
#sbOverlay {
  pointer-events: none;
  touch-action: none;
}
#sbOverlay.active {
  pointer-events: auto;
}

/* ================================================================
   REGIONAL LANGUAGE STRIP
   ================================================================ */
.regional-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 0 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.regional-strip::-webkit-scrollbar { display: none; }

.regional-btn {
  flex-shrink: 0;
  padding: 7px 16px;
  border-radius: 22px;
  border: 1.5px solid var(--border);
  background: var(--bg3);
  color: var(--text2);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s;
  -webkit-tap-highlight-color: transparent;
  font-family: 'Noto Sans', system-ui, sans-serif;
}
.regional-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(255, 107, 0, 0.06);
}
.regional-btn.active {
  background: linear-gradient(135deg, #FF6B00, #FF9800);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 3px 12px rgba(255, 107, 0, 0.35);
}

/* ================================================================
   CATEGORY PILL STRIP (LokFeed topics)
   ================================================================ */
.cat-strip,
#lokFeedCategoryStrip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cat-strip::-webkit-scrollbar,
#lokFeedCategoryStrip::-webkit-scrollbar { display: none; }

.cat-pill {
  flex-shrink: 0;
  padding: 7px 16px;
  border-radius: 22px;
  border: 1.5px solid var(--border);
  background: var(--bg3);
  color: var(--text2);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s;
  -webkit-tap-highlight-color: transparent;
}
.cat-pill:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.cat-pill.active {
  background: linear-gradient(135deg, #FF6B00, #FF9800);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 3px 10px rgba(255, 107, 0, 0.3);
}

/* ================================================================
   LOKFEED — Social Post Feed
   ================================================================ */
.lokfeed-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 12px;
}

/* Compose box */
.lf-compose {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px 16px;
  margin-bottom: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.lf-compose:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1);
}
.lf-compose-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-g);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
  overflow: hidden;
}
.lf-compose-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lf-compose-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 15px;
  font-family: 'Noto Sans', system-ui, sans-serif;
  resize: none;
  min-height: 44px;
  line-height: 1.5;
  placeholder-color: var(--text3);
}
.lf-compose-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.lf-type-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--bg3);
  color: var(--text2);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.lf-type-btn:hover { border-color: var(--accent); color: var(--accent); }
.lf-post-btn {
  margin-left: auto;
  padding: 8px 20px;
  background: linear-gradient(135deg, #FF6B00, #FF9800);
  border: none;
  border-radius: 20px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(255, 107, 0, 0.35);
  transition: all 0.18s;
}
.lf-post-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(255, 107, 0, 0.45); }

/* Feed card */
.lf-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 12px;
  transition: border-color 0.2s;
  animation: lfSlideIn 0.25s ease;
}
.lf-card:hover { border-color: var(--border2); }
@keyframes lfSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lf-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.lf-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-g);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
  overflow: hidden;
}
.lf-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lf-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 5px;
}
.lf-sub {
  font-size: 12px;
  color: var(--text2);
  margin-top: 2px;
}
.lf-body {
  font-size: 15px;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 12px;
  font-family: 'Noto Sans', system-ui, sans-serif;
  white-space: pre-wrap;
  word-break: break-word;
}
.lf-img-wrap {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
  max-height: 400px;
}
.lf-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Actions */
.lf-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.lf-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--bg3);
  color: var(--text2);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.lf-btn:hover { border-color: var(--accent); color: var(--accent); }
.lf-like.active { background: rgba(239, 68, 68, 0.1); border-color: #ef4444; color: #ef4444; }
.lf-btn i { font-size: 14px; }
.lf-share { margin-left: auto; }

/* Poll widget inside feed */
.lf-poll {
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
}
.lf-poll-option {
  padding: 12px 14px;
  cursor: pointer;
  position: relative;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
  transition: background 0.15s;
  overflow: hidden;
}
.lf-poll-option:last-child { border-bottom: none; }
.lf-poll-option:hover { background: var(--bg3); }
.lf-poll-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: rgba(255, 107, 0, 0.12);
  border-right: 3px solid var(--accent);
  transition: width 0.5s ease;
  pointer-events: none;
}
.lf-poll-pct {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--accent);
  font-weight: 800;
}

/* Infinite scroll sentinel */
.feed-spinner {
  display: flex;
  justify-content: center;
  padding: 20px;
}
.spin-ring {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 107, 0, 0.2);
  border-top-color: #FF6B00;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.feed-end {
  text-align: center;
  color: var(--text2);
  font-size: 14px;
  padding: 20px;
}

/* Feed comment drawer */
#feedCommentDrawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 65vh;
  background: var(--bg2);
  border-radius: 24px 24px 0 0;
  border-top: 1px solid var(--border);
  z-index: 800;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#feedCommentDrawer.open { transform: translateY(0); }

/* ================================================================
   MOMENTS SYSTEM (replaces Stories)
   ================================================================ */

/* Moments ring strip */
.moments-strip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 12px 0 8px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.moments-strip::-webkit-scrollbar { display: none; }

.moment-ring-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.moment-ring {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, #FF6B00, #FF9800, #FFD700);
  transition: transform 0.18s;
}
.moment-ring:hover { transform: scale(1.06); }
.moment-ring.unseen {
  background: linear-gradient(135deg, #FF6B00, #FFD700, #FF6B00);
  animation: momentGlow 2s ease-in-out infinite;
}
.moment-ring.seen {
  background: var(--bg4);
}
@keyframes momentGlow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.3); }
  50% { box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.6); }
}
.moment-ring-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2.5px solid var(--bg);
  overflow: hidden;
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.moment-ring-inner img { width: 100%; height: 100%; object-fit: cover; }
.moment-ring-inner span { font-size: 22px; }
.moment-name {
  font-size: 11px;
  color: var(--text2);
  text-align: center;
  max-width: 68px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

/* Add moment button */
.moment-add {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 2.5px dashed var(--border2);
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s;
  flex-shrink: 0;
  font-size: 26px;
  color: var(--accent);
}
.moment-add:hover { border-color: var(--accent); background: rgba(255, 107, 0, 0.08); }

/* Moments fullscreen overlay */
#momentsOverlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 2000;
  display: none;
  opacity: 0;
  transition: opacity 0.25s;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  touch-action: pan-x;
}

.moments-viewer {
  position: relative;
  width: 100%;
  max-width: 430px;
  height: 100%;
  max-height: 100dvh;
  background: #111;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Progress bars */
.moments-progress {
  display: flex;
  gap: 4px;
  padding: 14px 14px 0;
  z-index: 10;
}
.moment-prog-seg {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  overflow: hidden;
}
#momentProgressBar {
  height: 100%;
  background: #fff;
  width: 0%;
  border-radius: 3px;
}

/* Moment header */
.moment-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  z-index: 10;
}
.moment-header-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  overflow: hidden;
  flex-shrink: 0;
}
.moment-header-avatar img { width: 100%; height: 100%; object-fit: cover; }
#momentCreatorName { font-size: 14px; font-weight: 800; color: #fff; }
#momentTime { font-size: 12px; color: rgba(255, 255, 255, 0.7); }
.moment-close {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

/* Moment media */
.moment-media {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
#momentImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
#momentText {
  position: absolute;
  bottom: 80px;
  left: 20px;
  right: 20px;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0.4);
  padding: 12px 16px;
  border-radius: 14px;
  backdrop-filter: blur(4px);
  font-family: 'Noto Sans', system-ui, sans-serif;
}

/* Moment tap zones */
.moment-tap-prev,
.moment-tap-next {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  z-index: 5;
  cursor: pointer;
}
.moment-tap-prev { left: 0; }
.moment-tap-next { right: 0; }

/* Moment type badge */
.moment-type-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 12px;
  backdrop-filter: blur(4px);
  z-index: 8;
}

/* ================================================================
   CREATOR RANK BADGES
   ================================================================ */
.creator-rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.rank-beginner { background: rgba(76, 175, 80, 0.15); color: #4CAF50; border: 1px solid rgba(76, 175, 80, 0.3); }
.rank-rising   { background: rgba(33, 150, 243, 0.15); color: #2196F3; border: 1px solid rgba(33, 150, 243, 0.3); }
.rank-popular  { background: rgba(255, 152, 0, 0.15); color: #FF9800; border: 1px solid rgba(255, 152, 0, 0.3); }
.rank-star     { background: rgba(255, 107, 0, 0.15); color: #FF6B00; border: 1px solid rgba(255, 107, 0, 0.3); }
.rank-legend   { background: linear-gradient(135deg, rgba(255,215,0,.2), rgba(255,107,0,.2)); color: #FFD700; border: 1px solid rgba(255,215,0,.4); }

/* Verified badge */
.verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: #2196F3;
  border-radius: 50%;
  font-size: 9px;
  color: #fff;
  font-weight: 900;
  flex-shrink: 0;
}

/* ================================================================
   SKELETON LOADERS
   ================================================================ */
.skel-pulse {
  background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%);
  background-size: 200% 100%;
  animation: skelShimmer 1.4s ease infinite;
}
@keyframes skelShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skel-card {
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
}
.skel-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 12px;
  margin-bottom: 10px;
}
.skel-body { padding: 0 4px; }
.skel-line {
  height: 13px;
  border-radius: 8px;
  margin-bottom: 8px;
}
.skel-post {
  height: 140px;
  border-radius: 18px;
  margin-bottom: 12px;
}
.skel-channel {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}
.skel-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}
.skel-channel-info { flex: 1; }

/* ================================================================
   FESTIVAL THEMES
   ================================================================ */

/* Diwali */
[data-festival="diwali"] {
  --accent: #FF8C00;
  --accent-g: linear-gradient(135deg, #FF8C00, #FFD700, #FF4500);
}
[data-festival="diwali"] .navbar::before {
  content: '🪔';
  position: absolute;
  right: 70px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  animation: diwaLiFlicker 1.5s ease-in-out infinite;
}
@keyframes diwaLiFlicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Holi */
[data-festival="holi"] {
  --accent: #E91E63;
  --accent-g: linear-gradient(135deg, #E91E63, #9C27B0, #2196F3, #4CAF50, #FF9800);
}

/* Republic / Independence Day */
[data-festival="republic-day"],
[data-festival="independence-day"] {
  --accent: #FF6B00;
}
[data-festival="republic-day"] .navbar::after,
[data-festival="independence-day"] .navbar::after {
  content: '🇮🇳';
  position: absolute;
  right: 70px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
}

/* ================================================================
   LOKFEED PAGE LAYOUT
   ================================================================ */
.lokfeed-page {
  padding-top: 8px;
}
.lokfeed-page .section-title {
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 14px;
  padding-left: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lokfeed-page .section-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 18px;
  background: var(--accent-g);
  border-radius: 3px;
  flex-shrink: 0;
}

/* Trending topics sidebar */
.lf-trending-wrap {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 16px;
}
.lf-trending-title {
  font-size: 14px;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.lf-trend-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: color 0.15s;
}
.lf-trend-item:last-child { border-bottom: none; }
.lf-trend-item:hover .lf-trend-tag { color: var(--accent); }
.lf-trend-tag { font-size: 13px; font-weight: 700; color: var(--text); }
.lf-trend-count { font-size: 11px; color: var(--text2); }

/* ================================================================
   COMMUNITY / DIGITAL INDIA SECTION
   ================================================================ */
.community-categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.community-cat-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: block;
}
.community-cat-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 0, 0.15);
}
.community-cat-icon { font-size: 28px; margin-bottom: 8px; }
.community-cat-name { font-size: 13px; font-weight: 700; color: var(--text); }
.community-cat-count { font-size: 11px; color: var(--text2); margin-top: 2px; }

/* ================================================================
   CREATOR EARNINGS DASHBOARD UPGRADE
   ================================================================ */
.earnings-hero {
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.15), rgba(255, 152, 0, 0.08));
  border: 1px solid rgba(255, 107, 0, 0.25);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.earnings-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255, 107, 0, 0.15), transparent 70%);
  pointer-events: none;
}
.earnings-hero-amount {
  font-size: 36px;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 4px;
}
.earnings-hero-label {
  font-size: 13px;
  color: var(--text2);
  font-weight: 600;
}
.earnings-hero-upi {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text2);
}
.upi-badge {
  background: #fff;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 900;
  color: #6739b7;
  letter-spacing: 0.3px;
}

/* ================================================================
   ANTI-SPAM / BOT PROTECTION BADGE
   ================================================================ */
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid rgba(76, 175, 80, 0.3);
  border-radius: 10px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #4CAF50;
}

/* ================================================================
   UPLOAD PAGE — Chunk progress
   ================================================================ */
.chunk-progress-wrap {
  background: var(--bg3);
  border-radius: 12px;
  overflow: hidden;
  height: 8px;
  margin: 10px 0;
}
.chunk-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #FF6B00, #FF9800);
  border-radius: 12px;
  transition: width 0.3s;
}

/* ================================================================
   GLOBAL BUTTON SYSTEM (ensure saffron everywhere)
   ================================================================ */
.btn-primary,
.btn-saffron {
  background: linear-gradient(135deg, #FF6B00, #FF9800) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 3px 12px rgba(255, 107, 0, 0.35) !important;
}
.btn-primary:hover,
.btn-saffron:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(255, 107, 0, 0.45) !important;
}
.btn-secondary {
  background: var(--bg3) !important;
  color: var(--text) !important;
  border: 1.5px solid var(--border) !important;
}
.btn-secondary:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ================================================================
   PULL-TO-REFRESH INDICATOR
   ================================================================ */
.ptr-indicator {
  position: fixed;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 9999;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transition: top 0.25s ease;
}
.ptr-indicator.visible { top: 14px; }

/* ================================================================
   MOBILE OPTIMIZATIONS (< 768px)
   ================================================================ */
@media (max-width: 768px) {
  .lokfeed-wrap { padding: 0 8px; }

  .lf-card { border-radius: 14px; padding: 14px; }
  .lf-body { font-size: 14px; }

  .moment-ring { width: 60px; height: 60px; }
  .moment-ring-inner { font-size: 18px; }
  .moment-name { font-size: 10px; max-width: 60px; }

  .community-categories { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .community-cat-card { padding: 12px 8px; }
  .community-cat-icon { font-size: 24px; }

  /* Bottom nav safe area */
  .main-content,
  .page-wrap {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }

  /* Low-end Android: reduce animations */
  @media (prefers-reduced-motion: reduce) {
    .lf-card, .moment-ring, .regional-btn, .cat-pill {
      animation: none;
      transition: none;
    }
  }
}

/* ================================================================
   DESKTOP (> 1024px) — 3-column layout for LokFeed
   ================================================================ */
@media (min-width: 1024px) {
  .lokfeed-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
  }
  .lokfeed-sidebar {
    position: sticky;
    top: calc(var(--nav-h, 58px) + 16px);
  }
}

/* ================================================================
   ACCESSIBILITY
   ================================================================ */
.lf-btn:focus-visible,
.cat-pill:focus-visible,
.regional-btn:focus-visible,
.moment-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ================================================================
   LIGHT MODE OVERRIDES
   ================================================================ */
[data-theme="light"] .lf-card { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); }
[data-theme="light"] .lf-compose { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); }
[data-theme="light"] .moments-viewer { background: #f5f5f5; }
[data-theme="light"] .skel-pulse {
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 200% 100%;
  animation: skelShimmer 1.4s ease infinite;
}
[data-theme="light"] #momentText { color: #111; text-shadow: 0 1px 6px rgba(255,255,255,0.5); }

/* === v84_premium.css === */
/* ================================================================
   LOKTUBE v84 — PREMIUM UI POLISH
   ✅ Watch page: theater mode, chapters, like animation
   ✅ Upload: drag-drop zone glow, AI badge, resume progress
   ✅ Home feed: balanced grid, hover glow, skeleton refinement
   ✅ Shorts: action bar refinement, creator verified tick
   ✅ Channel: cover gradient, stats bar
   ✅ Creator Studio: metric cards premium
   ✅ Navbar: search voice button, notification dot
   ✅ PWA install banner
   ✅ LokFeed: post card premium polish
   ✅ Toast notifications
   ✅ Bottom nav mobile refinement
   ================================================================ */

/* ── CSS CUSTOM PROPERTIES EXTENSION ───────────────────────── */
:root {
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --transition-fast: 0.12s cubic-bezier(.4,0,.2,1);
  --transition-med:  0.22s cubic-bezier(.4,0,.2,1);
  --transition-spring: 0.35s cubic-bezier(.34,1.56,.64,1);
  --shadow-card: 0 2px 16px rgba(0,0,0,.35);
  --shadow-elevated: 0 8px 32px rgba(0,0,0,.5);
  --shadow-accent: 0 4px 20px rgba(255,107,0,.25);
  --green: #4caf50;
  --red: #ef4444;
  --blue: #3b82f6;
  --gold: #FFD700;
  --nav-h: 58px;
}

/* ================================================================
   WATCH PAGE — PREMIUM UPGRADES
   ================================================================ */

/* Player wrapper */
.watch-player-wrap,
.video-player-box {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
  position: relative;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
}

/* Theater mode */
body.theater-mode .watch-player-wrap,
body.theater-mode .video-player-box {
  max-width: 100%;
  border-radius: 0;
  margin: 0;
  box-shadow: none;
}
body.theater-mode .watch-side   { display: none !important; }
body.theater-mode .watch-layout { grid-template-columns: 1fr !important; }

/* Chapters bar */
.chapters-bar {
  display: flex;
  gap: 2px;
  margin: 8px 0 4px;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
}
.chapter-seg {
  flex: 1;
  background: rgba(255,255,255,.2);
  cursor: pointer;
  transition: background var(--transition-fast);
  position: relative;
}
.chapter-seg.active  { background: var(--accent); }
.chapter-seg:hover   { background: rgba(255,255,255,.5); }
.chapter-seg[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.85);
  color: #fff;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
}

/* Video action bar */
.video-action-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 0 6px;
}
.vab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 22px;
  border: none;
  background: var(--bg3);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
}
.vab-btn:hover { background: var(--bg4); transform: translateY(-1px); }
.vab-btn.liked { background: rgba(239,68,68,.15); color: var(--red); }
.vab-btn.liked i { color: var(--red); }
.vab-btn.primary { background: var(--accent); color: #fff; }
.vab-btn.primary:hover { filter: brightness(1.1); }
.vab-btn i { font-size: 16px; color: var(--accent); }
.vab-btn.liked i, .vab-btn.primary i { color: inherit; }

/* Like animation */
@keyframes likePopV84 {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  70%  { transform: scale(.9); }
  100% { transform: scale(1); }
}
.vab-btn.just-liked i { animation: likePopV84 .4s var(--transition-spring) forwards; }

/* Save to playlist pill */
.save-pill {
  position: relative;
}
.save-pill-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  min-width: 220px;
  box-shadow: var(--shadow-elevated);
  z-index: 200;
  display: none;
  overflow: hidden;
}
.save-pill-dropdown.open { display: block; }
.spd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  transition: background var(--transition-fast);
}
.spd-item:hover { background: var(--bg3); color: var(--accent); }
.spd-item i { color: var(--accent); font-size: 14px; width: 16px; }

/* Creator card on watch page */
.watch-creator-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 8px 0;
}
.wcc-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--accent);
}
.wcc-info { flex: 1; min-width: 0; }
.wcc-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.wcc-subs { font-size: 13px; color: var(--text2); margin-top: 2px; }
.wcc-sub-btn {
  padding: 9px 20px;
  border-radius: 22px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
}
.wcc-sub-btn.subbed {
  background: var(--bg3);
  color: var(--text2);
}
.wcc-sub-btn:hover { filter: brightness(1.1); transform: scale(1.03); }

/* ================================================================
   HOME FEED — PREMIUM VIDEO CARD
   ================================================================ */
.yt-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: transparent;
  transition: transform var(--transition-med), box-shadow var(--transition-med);
  cursor: pointer;
  text-decoration: none;
  display: block;
}
.yt-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.yt-card:hover .yt-thumb img {
  transform: scale(1.04);
}
.yt-thumb {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg3);
}
.yt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-med);
}
.yt-duration {
  position: absolute;
  bottom: 6px;
  right: 8px;
  background: rgba(0,0,0,.82);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 5px;
  letter-spacing: .3px;
}
.yt-card-body {
  display: flex;
  gap: 10px;
  padding: 10px 4px 8px;
}
.card-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg3);
}
.card-meta { flex: 1; min-width: 0; }
.card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
}
.card-channel {
  font-size: 12px;
  color: var(--text2);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}
.card-channel .verified-tick { font-size: 11px; color: var(--accent); }
.card-stats {
  font-size: 12px;
  color: var(--text2);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}
/* Creator rank badge on cards */
.rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 800;
  background: rgba(255,107,0,.12);
  color: var(--accent);
  margin-left: 4px;
  vertical-align: middle;
}

/* ================================================================
   UPLOAD PAGE — PREMIUM DRAG-DROP + AI BADGES
   ================================================================ */

/* AI suggestion badge */
.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, rgba(147,51,234,.2), rgba(59,130,246,.2));
  border: 1px solid rgba(147,51,234,.3);
  color: #a855f7;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 20px;
  margin-left: 8px;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.ai-badge:hover { background: rgba(147,51,234,.3); }
.ai-badge i { font-size: 10px; }

/* Upload zone premium glow */
.upload-zone.drag {
  border-color: var(--accent) !important;
  background: rgba(255,107,0,.06) !important;
  box-shadow: 0 0 0 4px rgba(255,107,0,.12), var(--shadow-accent);
}
.upload-zone.uploading {
  pointer-events: none;
  opacity: .8;
}

/* Chunk upload progress */
.chunk-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
}
.chunk-progress-row label {
  font-size: 12px;
  color: var(--text2);
  width: 100px;
  flex-shrink: 0;
}
.chunk-bar-wrap {
  flex: 1;
  height: 6px;
  background: var(--bg4);
  border-radius: 4px;
  overflow: hidden;
}
.chunk-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #ff9a2f);
  border-radius: 4px;
  transition: width .2s ease;
}
.chunk-percent {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent);
  width: 38px;
  text-align: right;
}

/* Resume upload indicator */
.resume-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(76,175,80,.12);
  border: 1px solid rgba(76,175,80,.25);
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  margin-top: 8px;
}
.resume-badge i { font-size: 12px; }

/* AI suggestions dropdown */
.ai-suggestions-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-top: 6px;
  display: none;
}
.ai-suggestions-box.open { display: block; }
.ai-suggestion-item {
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: background var(--transition-fast);
  border-left: 2px solid var(--accent);
  margin-bottom: 6px;
}
.ai-suggestion-item:hover { background: var(--bg3); }
.ai-suggestion-item:last-child { margin-bottom: 0; }

/* ================================================================
   CHANNEL PAGE — COVER + STATS BAR
   ================================================================ */
.channel-cover-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 5/1;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg3);
  margin-bottom: 16px;
}
@media (max-width: 640px) {
  .channel-cover-wrap { aspect-ratio: 3/1; border-radius: 0; }
}
.channel-cover-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.channel-cover-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.6));
}
.channel-stats-bar {
  display: flex;
  gap: 20px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 12px 0;
  flex-wrap: wrap;
}
.csb-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 70px;
}
.csb-num {
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
}
.csb-label {
  font-size: 11px;
  color: var(--text2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ================================================================
   CREATOR STUDIO — METRIC CARDS
   ================================================================ */
.metric-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: transform var(--transition-med), box-shadow var(--transition-med);
  position: relative;
  overflow: hidden;
}
.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.metric-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent-g);
  opacity: 0;
  transition: opacity var(--transition-med);
}
.metric-card:hover::before { opacity: 1; }
.mc-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255,107,0,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--accent);
  margin-bottom: 12px;
}
.mc-value {
  font-size: 28px;
  font-weight: 900;
  color: var(--text);
  line-height: 1;
  margin-bottom: 4px;
}
.mc-label {
  font-size: 13px;
  color: var(--text2);
  font-weight: 600;
}
.mc-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  margin-top: 6px;
}
.mc-trend.up   { color: var(--green); }
.mc-trend.down { color: var(--red); }

/* Retention graph placeholder */
.retention-graph-wrap {
  position: relative;
  width: 100%;
  height: 120px;
  background: var(--bg3);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: 12px;
}
.retention-graph-wrap canvas { width: 100% !important; height: 100% !important; }

/* ================================================================
   NAVBAR — VOICE SEARCH + NOTIFICATION DOT UPGRADE
   ================================================================ */
.nav-voice-btn {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: var(--bg3);
  color: var(--text2);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}
.nav-voice-btn:hover, .nav-voice-btn.listening {
  background: rgba(255,107,0,.15);
  color: var(--accent);
}
.nav-voice-btn.listening {
  animation: voicePulse 1s infinite;
}
@keyframes voicePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,0,.4); }
  50%       { box-shadow: 0 0 0 8px rgba(255,107,0,0); }
}

/* Notification badge — premium pill */
.notif-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  background: var(--red);
  border-radius: 9px;
  font-size: 10px;
  font-weight: 900;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--bg);
  line-height: 1;
}

/* ================================================================
   PWA INSTALL BANNER
   ================================================================ */
.pwa-install-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 950;
  transform: translateY(100%);
  transition: transform var(--transition-med);
  box-shadow: 0 -4px 20px rgba(0,0,0,.3);
}
.pwa-install-bar.visible { transform: translateY(0); }
@media (min-width: 769px) {
  .pwa-install-bar {
    bottom: 20px;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(200px);
    width: 420px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
  }
  .pwa-install-bar.visible { transform: translateX(-50%) translateY(0); }
}
.pwa-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: contain;
  flex-shrink: 0;
}
.pwa-text { flex: 1; min-width: 0; }
.pwa-text strong { font-size: 14px; font-weight: 800; color: var(--text); display: block; }
.pwa-text span   { font-size: 12px; color: var(--text2); }
.pwa-install-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.pwa-close-btn {
  background: none;
  border: none;
  color: var(--text2);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}

/* ================================================================
   TOAST NOTIFICATION SYSTEM
   ================================================================ */
#lk-toast-container {
  position: fixed;
  top: calc(var(--nav-h) + 10px);
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.lk-toast {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-elevated);
  min-width: 260px;
  max-width: 340px;
  pointer-events: auto;
  animation: toastIn .3s var(--transition-spring) forwards;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.lk-toast.hiding { animation: toastOut .25s ease forwards; }
.lk-toast i { font-size: 16px; flex-shrink: 0; }
.lk-toast.success i { color: var(--green); }
.lk-toast.error   i { color: var(--red);   }
.lk-toast.info    i { color: var(--blue);  }
.lk-toast.warning i { color: var(--gold);  }
.lk-toast-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text2);
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}
@keyframes toastIn  { from { opacity:0; transform: translateX(40px) scale(.95); } to { opacity:1; transform: none; } }
@keyframes toastOut { from { opacity:1; transform: none; } to { opacity:0; transform: translateX(40px); } }

/* ================================================================
   LOKFEED POST CARDS — PREMIUM POLISH
   ================================================================ */
.lf-post-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  transition: box-shadow var(--transition-med);
  margin-bottom: 12px;
}
.lf-post-card:hover { box-shadow: var(--shadow-card); }
.lf-post-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.lf-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border2);
  flex-shrink: 0;
}
.lf-author-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 5px;
}
.lf-time { font-size: 12px; color: var(--text2); margin-top: 1px; }
.lf-content {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}
.lf-hashtag { color: var(--accent); font-weight: 700; cursor: pointer; }
.lf-hashtag:hover { text-decoration: underline; }
.lf-image {
  width: 100%;
  border-radius: var(--radius-md);
  max-height: 400px;
  object-fit: cover;
  cursor: pointer;
  margin-bottom: 10px;
}
.lf-actions {
  display: flex;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.lf-action-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: 20px;
  border: none;
  background: none;
  color: var(--text2);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.lf-action-btn:hover { background: var(--bg3); color: var(--text); }
.lf-action-btn.liked { color: var(--red); }
.lf-action-btn.liked i { color: var(--red); }

/* Poll widget */
.lf-poll {
  background: var(--bg3);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 10px;
}
.poll-option {
  position: relative;
  padding: 9px 12px;
  border-radius: 8px;
  margin-bottom: 6px;
  border: 1.5px solid var(--border);
  cursor: pointer;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  transition: border-color var(--transition-fast);
}
.poll-option:hover { border-color: var(--accent); }
.poll-option.voted { border-color: var(--accent); }
.poll-option .poll-bar {
  position: absolute;
  inset: 0;
  background: rgba(255,107,0,.12);
  transform-origin: left;
  transition: width .5s ease;
  border-radius: inherit;
}
.poll-option .poll-text { position: relative; z-index: 1; }
.poll-option .poll-pct  { position: relative; z-index: 1; float: right; color: var(--accent); }

/* ================================================================
   MOBILE BOTTOM NAV — v84 REFINEMENT
   ================================================================ */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 58px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  display: none;
  align-items: center;
  justify-content: space-around;
  z-index: 900;
  padding-bottom: env(safe-area-inset-bottom);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
@media (max-width: 768px) {
  .mobile-bottom-nav { display: flex; }
  body { padding-bottom: 58px; }
  /* Don't pad on shorts/story pages */
  body.shorts-page,
  body.story-page,
  body.moments-page { padding-bottom: 0; }
}
.mbn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 12px;
  border-radius: 14px;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  color: var(--text2);
  position: relative;
  flex: 1;
}
.mbn-item.active { color: var(--accent); }
.mbn-item i { font-size: 20px; }
.mbn-item span { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.mbn-upload {
  width: 44px;
  height: 44px;
  background: var(--accent-g);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-accent);
  margin: -8px 0;
  flex-shrink: 0;
}
.mbn-upload i { font-size: 22px; color: #fff; }

/* ================================================================
   SKELETON LOADER REFINEMENTS
   ================================================================ */
@keyframes shimmerV84 {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skel {
  background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%);
  background-size: 800px 100%;
  animation: shimmerV84 1.4s infinite linear;
  border-radius: 6px;
}
.skel-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--radius-md);
  margin-bottom: 10px;
}
.skel-line {
  height: 12px;
  border-radius: 6px;
  margin-bottom: 6px;
}
.skel-line.w80 { width: 80%; }
.skel-line.w60 { width: 60%; }
.skel-line.w40 { width: 40%; }
.skel-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ================================================================
   SEARCH PAGE — PREMIUM FILTER BAR
   ================================================================ */
.search-filter-bar {
  display: flex;
  gap: 8px;
  padding: 10px 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.search-filter-bar::-webkit-scrollbar { display: none; }
.sfb-chip {
  padding: 7px 16px;
  border-radius: 22px;
  border: 1.5px solid var(--border);
  background: var(--bg3);
  color: var(--text2);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}
.sfb-chip.active,
.sfb-chip:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ================================================================
   TRENDING PAGE — RANK ITEM
   ================================================================ */
.trend-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
  cursor: pointer;
}
.trend-item:hover { background: var(--bg3); }
.trend-rank {
  font-size: 20px;
  font-weight: 900;
  color: var(--text3);
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.trend-rank.top3 { color: var(--accent); }

/* ================================================================
   EARNINGS PAGE — LIVE TICKER
   ================================================================ */
.earnings-ticker {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(76,175,80,.1);
  border: 1px solid rgba(76,175,80,.25);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  margin-bottom: 16px;
}
.earnings-ticker i { color: var(--green); font-size: 18px; }
.earnings-ticker .et-label { color: var(--text2); font-size: 13px; font-weight: 600; }
.earnings-ticker .et-value {
  font-size: 22px;
  font-weight: 900;
  color: var(--green);
  margin-left: auto;
}
@keyframes earningsPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.earnings-ticker.updated .et-value {
  animation: earningsPop .35s ease;
}

/* ================================================================
   RESPONSIVE GRID IMPROVEMENTS
   ================================================================ */
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
@media (max-width: 640px) {
  .home-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .card-title { font-size: 12px; }
  .card-stats { font-size: 11px; }
}
@media (max-width: 360px) {
  .home-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   MOMENTS / STORIES — RING UPGRADE
   ================================================================ */
.moment-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent-g);
  padding: 2px;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform var(--transition-spring);
}
.moment-ring:hover { transform: scale(1.08); }
.moment-ring.seen {
  background: var(--bg4);
}
.moment-ring img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid var(--bg);
  display: block;
}
.moment-ring-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text2);
  text-align: center;
  margin-top: 4px;
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ================================================================
   MISC UTILITIES
   ================================================================ */
.text-gradient {
  background: var(--accent-g);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.badge-new {
  display: inline-flex;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: .5px;
  vertical-align: middle;
  margin-left: 4px;
}
.divider-subtle {
  border: none;
  border-top: 1px solid var(--border);
  margin: 12px 0;
}

/* Festival: Holi rainbow */
[data-festival="holi"] .navbar { background: linear-gradient(135deg, rgba(255,60,60,.1), rgba(60,180,255,.1), rgba(60,255,120,.1)) !important; }
[data-festival="holi"] .logo   { background: linear-gradient(135deg, #f43f5e, #8b5cf6, #3b82f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* Festival: Diwali gold glow */
[data-festival="diwali"] { --accent: #FFB300; --accent2: #FF8F00; }
[data-festival="diwali"] .navbar { box-shadow: 0 2px 20px rgba(255,179,0,.2); }

/* ================================================================
   PWA SPLASH / OFFLINE PAGE OVERRIDE
   ================================================================ */
.offline-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  background: var(--bg);
}
.offline-icon { font-size: 72px; margin-bottom: 16px; }
.offline-title { font-size: 24px; font-weight: 900; color: var(--text); margin-bottom: 8px; }
.offline-sub   { font-size: 15px; color: var(--text2); max-width: 320px; }

/* Service worker update banner */
.sw-update-bar {
  position: fixed;
  top: calc(var(--nav-h) + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg2);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 9998;
  box-shadow: var(--shadow-elevated);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  display: none;
}
.sw-update-bar.show { display: flex; }
.sw-update-bar button {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

/* === v85_scroll_fix.css === */
/* ================================================================
   LOKTUBE v85 — DEFINITIVE SCROLL ARCHITECTURE FIX
   ================================================================
   ROOT CAUSE SUMMARY (verified from source audit):

   BUG 1 — CSS RULE CONFLICT: v61_final.css line 23-28 sets
     .lk-main { overflow-y: auto; min-height: calc(100vh - 56px); }
     and v59_stabilize.css does same for .main-container etc.
     This creates a NESTED SCROLL CONTAINER inside <body>.
     The browser's native body scroll stops working because the
     inner .lk-main is the one scrolling instead of <body>.
     On Android/PWA, this manifests as total feed scroll failure.

   BUG 2 — JS DEFINEPROPERT Y TRAP (v61_recovery.js line 24-31):
     body.style.overflow is intercepted via Object.defineProperty.
     When ANY code sets body.style.overflow = 'hidden', it adds
     .modal-open CSS class. But v61_recovery.css line 25 says:
       body.modal-open { overflow: hidden !important; }
     The class never gets reliably removed if: the story viewer
     crashes, the API call fails, or the timer fires while a
     previous story's scroll state is mid-transition.
     This is WHY upload button temporarily fixes it — clicking
     upload calls document.body.style.overflow = '' on line 721
     of upload.php, which removes modal-open via the defineProperty
     setter, restoring scroll.

   BUG 3 — STORY VIEWER (index.php line 656):
     openStoryViewer() sets document.body.style.overflow = 'hidden'
     directly WITHOUT checking if it's already locked. If the API
     call fails AFTER setting the lock but BEFORE closeStoryViewer()
     runs, the lock is permanent for the session.

   BUG 4 — v83_core.js MutationObserver (line 32-43):
     Watches body style changes to strip overflow:hidden. BUT it
     only strips when el.style.overflow === 'hidden' directly. The
     defineProperty trap from v61_recovery.js intercepts the setter
     so the actual style attribute never shows 'hidden' — only the
     class does. The MutationObserver never fires to fix it.

   FIX ARCHITECTURE:
   - NEVER let .lk-main / .lk-shell be the scroll container
   - Body scrolls. Content flows naturally.
   - modal-open adds position:fixed to body (iOS-safe pattern)
     saving scroll position, instead of overflow:hidden
   - Story viewer / modals use the safe lock/unlock pattern
   - All fixes are contained here and in v85_scroll_fix.js
   ================================================================ */

/* ── 1. BODY / HTML — THE ONLY SCROLLER ─────────────────────── */
html {
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;   /* html scrolls on desktop */
  scroll-behavior: smooth;
}

body {
  height: auto !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;   /* body scrolls on mobile */
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: auto !important;
  position: static !important;
}

/* ── 2. DESTROY THE NESTED SCROLL CONTAINER PATTERN ─────────── */
/* v59_stabilize.css and v61_final.css incorrectly set
   overflow-y: auto on layout containers, creating nested scrollers.
   These MUST be visible/static so body scroll works. */
.lk-shell,
.lk-main,
.main-container,
.page-content,
.main-content,
.page-wrap,
.home-wrap,
#mainContent,
.studio-shell,
.admin-wrap,
.community-wrap,
.watch-layout,
.channel-wrap,
.blog-view,
.admin-content,
.settings-wrap {
  overflow: visible !important;
  /* Let height be driven by content, not constrained */
  height: auto !important;
  min-height: 0 !important;       /* was calc(100vh-56px) → creates lockout */
  max-height: none !important;
}

/* lk-shell is a flexbox row container — it should never scroll */
.lk-shell {
  display: flex !important;
  flex-direction: row !important;
  overflow: visible !important;
}

/* lk-main is the content column — MUST be overflow:visible */
.lk-main {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: visible !important;
}

/* ── 3. SAFE MODAL LOCK — position:fixed pattern (iOS-compatible) */
/* REPLACES: overflow:hidden on body (which breaks Android scroll) */
body.modal-open {
  /* Do NOT use overflow:hidden — it breaks Android/PWA scroll */
  /* Instead: fix position to freeze scroll position */
  /* JS in v85_scroll_fix.js handles position:fixed + top:-Xpx */
  overflow: hidden !important;
  /* This rule intentionally kept for safety net CSS,
     but JS in v85_scroll_fix.js provides the robust version */
}

/* ── 4. SHORTS / STORY PAGES — legitimate full-height lock ───── */
body.shorts-page,
body.story-page,
body.moments-page {
  overflow: hidden !important;
  height: 100dvh !important;
  height: 100vh !important; /* fallback */
}

/* ── 5. SIDEBAR — STICKY, NOT POSITION:FIXED ─────────────────── */
/* Sidebar must scroll with page on mobile, sticky on desktop */
.lk-sidebar {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* sticky keeps it in the flow — doesn't break body scroll */
  position: sticky !important;
  top: calc(var(--nav-h, 58px) + var(--india-bar-h, 3px)) !important;
  height: calc(100vh - var(--nav-h, 58px) - var(--india-bar-h, 3px)) !important;
  align-self: flex-start !important; /* critical for sticky in flex */
}

/* On mobile: sidebar hides, no sticky needed */
@media (max-width: 900px) {
  .lk-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100dvh !important;
    height: 100vh !important;
    z-index: 800 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.25s ease !important;
  }
  .lk-sidebar.open {
    transform: translateX(0) !important;
  }
}

/* ── 6. STORY VIEWER MODAL — z-index overlay, NOT body lock ──── */
#storyViewerModal,
.moments-overlay,
.lk-moment-viewer,
.sv-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2000 !important;
  /* Modal itself scrolls internally if needed, not body */
  overflow: hidden !important;
  /* Does not lock body — JS handles this cleanly */
}

/* ── 7. FEED GRID — GPU COMPOSITING ─────────────────────────── */
.feed-grid,
#feedGrid,
.home-wrap,
.video-grid,
.shorts-feed,
#shortsFeed {
  will-change: auto;            /* don't over-promote — use transform instead */
  transform: translateZ(0);     /* GPU compositor layer */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ── 8. TOUCH TARGET SAFETY ──────────────────────────────────── */
/* Prevent touch-action none on scroll containers */
body,
.lk-main,
.home-wrap,
.feed-grid {
  touch-action: pan-y !important;  /* vertical scroll always permitted */
}

/* ── 9. BOTTOM NAV — compositor layer, no reflow ─────────────── */
.mobile-bottom-nav,
.bottom-nav,
.mbn {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important; right: 0 !important;
  transform: translateZ(0) !important;  /* own compositor layer */
  will-change: transform !important;
  z-index: 700 !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* ── 10. BODY PADDING FOR FIXED BOTTOM NAV ───────────────────── */
body:not(.shorts-page):not(.story-page):not(.moments-page) {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ── 11. NAVBAR — GPU layer, never affects scroll ────────────── */
.navbar,
nav.navbar,
.lk-navbar {
  position: fixed !important;
  top: var(--india-bar-h, 3px) !important;
  left: 0 !important; right: 0 !important;
  z-index: 900 !important;
  transform: translateZ(0) !important;
  will-change: transform !important;
}

/* ── 12. OVERLAY — pointer-events safe ───────────────────────── */
#sbOverlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 799 !important;
  pointer-events: none !important;
  background: rgba(0,0,0,0) !important;
  transition: background 0.25s ease !important;
}
#sbOverlay.active {
  pointer-events: auto !important;
  background: rgba(0,0,0,0.5) !important;
}

/* ── 13. PREVENT SCROLL FIGHTING FROM OLDER CSS ─────────────── */
/* v61_final.css and v59_stabilize.css set overflow-y:auto on
   containers with fixed heights. Kill all of those. */
.main-container { overflow: visible !important; min-height: 0 !important; }
.page-content   { overflow: visible !important; min-height: 0 !important; }

/* ── 14. SAFE SCROLLBAR STYLING ──────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,107,0,0.4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent, #FF6B00); }

/* horizontal scroll containers: hide scrollbar visually */
.cat-bar, .regional-strip, .trend-cards, .stories-row,
.moments-strip, .channel-tabs-row {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.cat-bar::-webkit-scrollbar,
.regional-strip::-webkit-scrollbar,
.trend-cards::-webkit-scrollbar,
.stories-row::-webkit-scrollbar,
.moments-strip::-webkit-scrollbar {
  display: none !important;
}

/* ── 15. PWA VIEWPORT FIX ────────────────────────────────────── */
@media (display-mode: standalone) {
  html, body {
    height: auto !important;
    overflow-y: auto !important;
  }
  .lk-main, .home-wrap {
    overflow: visible !important;
    height: auto !important;
  }
}

/* ── 16. ANIMATION: do not use overflow:hidden on animated containers */
/* This catches any CSS animation that accidentally locks scroll */
@keyframes v85SafeFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.yt-card[style*="animation"] {
  animation: v85SafeFadeIn 0.3s ease both !important;
}

/* === v86_launch.css === */
/* ================================================================
   LOKTUBE v86 — LAUNCH POLISH
   Final production CSS layer
   Fixes: accent inconsistency, mobile gaps, PWA polish,
   card rendering, shorts actions, upload UX, studio premium
   ================================================================ */

/* ─── 1. ACCENT CONSISTENCY FIX ────────────────────────────── */
/* Multiple versions defined --accent differently. Lock it here. */
:root {
  --accent:       #FF6B00 !important;
  --accent2:      #E55D00 !important;
  --accent3:      #FFAB40 !important;
  --accent-g:     linear-gradient(135deg,#FF6B00,#FF9800) !important;
  --accent-g2:    linear-gradient(135deg,#FF6B00,#E55D00) !important;
  --glow:         0 0 24px rgba(255,107,0,.3) !important;
  --shadow-accent:0 4px 20px rgba(255,107,0,.25);
  --india-bar-h:  3px;
  --nav-h:        58px;
  --radius:       14px;
  --radius-lg:    20px;
  --radius-sm:    8px;
  --transition:   all .2s cubic-bezier(.4,0,.2,1);
}
[data-theme="light"] {
  --accent: #FF6B00 !important;
}

/* ─── 2. PWA / MOBILE SAFE AREA ─────────────────────────────── */
html {
  padding-top: env(safe-area-inset-top, 0);
}
@supports (padding-top: env(safe-area-inset-top)) {
  .navbar, .lk-navbar, nav.navbar {
    padding-top: env(safe-area-inset-top);
    height: calc(var(--nav-h) + env(safe-area-inset-top)) !important;
  }
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .mobile-bottom-nav, .bottom-nav, .mbn {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    height: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ─── 3. SPLASH / STARTUP FEEL ───────────────────────────────── */
@keyframes lkFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.yt-card {
  animation: lkFadeUp .3s ease both;
}
.yt-card:nth-child(1) { animation-delay: .03s }
.yt-card:nth-child(2) { animation-delay: .06s }
.yt-card:nth-child(3) { animation-delay: .09s }
.yt-card:nth-child(4) { animation-delay: .12s }
.yt-card:nth-child(5) { animation-delay: .15s }
.yt-card:nth-child(6) { animation-delay: .18s }

/* ─── 4. NAVBAR PREMIUM REFINEMENT ──────────────────────────── */
.navbar, .lk-navbar {
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  background: rgba(10,10,10,.92) !important;
  border-bottom: 1px solid rgba(255,107,0,.1) !important;
  box-shadow: 0 1px 0 rgba(255,107,0,.08) !important;
}
[data-theme="light"] .navbar,
[data-theme="light"] .lk-navbar {
  background: rgba(255,250,245,.94) !important;
  border-bottom: 1px solid rgba(255,107,0,.12) !important;
}

/* Logo pulse on hover */
.nav-logo-text, .nav-brand {
  transition: opacity .2s !important;
}
.nav-logo-text:hover, .nav-brand:hover {
  opacity: .85;
}

/* Search bar focus glow */
.nav-search input:focus,
.search-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(255,107,0,.15) !important;
  outline: none !important;
}

/* ─── 5. INDIA TRICOLOR TOP BAR ─────────────────────────────── */
.india-bar, #indiaBar {
  height: var(--india-bar-h) !important;
  background: var(--india-bar, linear-gradient(90deg,#FF6B00 33.3%,#fff 33.3% 66.6%,#138808 66.6%)) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important; right: 0 !important;
  z-index: 1000 !important;
  transform: translateZ(0);
}

/* ─── 6. HOME FEED CARDS ─────────────────────────────────────── */
.yt-card {
  border-radius: var(--radius-lg) !important;
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  overflow: hidden !important;
  transition: transform .22s cubic-bezier(.4,0,.2,1),
              box-shadow .22s cubic-bezier(.4,0,.2,1),
              border-color .22s !important;
}
.yt-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 32px rgba(255,107,0,.15) !important;
  border-color: rgba(255,107,0,.3) !important;
}
/* Card thumbnail shimmer on hover */
.yt-card:hover .yt-thumb-wrap img {
  transform: scale(1.04) !important;
}
.yt-thumb-wrap {
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}
.yt-thumb-wrap img {
  transition: transform .4s cubic-bezier(.4,0,.2,1) !important;
}

/* View count + duration badge */
.yt-badge {
  font-size: 11px !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  background: rgba(0,0,0,.82) !important;
  backdrop-filter: blur(4px) !important;
  letter-spacing: .3px !important;
}

/* Channel avatar */
.yt-avatar {
  flex-shrink: 0 !important;
  border: 1.5px solid var(--border2) !important;
  transition: border-color .2s, transform .2s !important;
}
.yt-avatar:hover {
  border-color: var(--accent) !important;
  transform: scale(1.06) !important;
}

/* Video title */
.yt-title {
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: -.01em !important;
}
.yt-title:hover {
  color: var(--accent) !important;
}

/* ─── 7. CATEGORY / FILTER BAR ───────────────────────────────── */
.cat-bar {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  padding: 4px 0 10px !important;
  -ms-overflow-style: none !important;
  scroll-snap-type: x mandatory !important;
}
.cat-bar::-webkit-scrollbar { display: none !important; }
.cat-chip, .filter-chip {
  scroll-snap-align: start;
  flex-shrink: 0 !important;
  padding: 7px 16px !important;
  border-radius: 20px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg3) !important;
  color: var(--text2) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all .15s !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
}
.cat-chip:hover, .filter-chip:hover,
.cat-chip.active, .filter-chip.active {
  background: rgba(255,107,0,.12) !important;
  color: var(--accent) !important;
  border-color: rgba(255,107,0,.35) !important;
}
.cat-chip.active, .filter-chip.active {
  background: var(--accent-g) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 12px rgba(255,107,0,.3) !important;
}

/* ─── 8. SHORTS PREMIUM POLISH ───────────────────────────────── */
/* Action bar right side */
.short-actions {
  position: absolute !important;
  right: 12px !important;
  bottom: 100px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 20px !important;
  z-index: 10 !important;
}
.short-action-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  background: rgba(255,255,255,.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 50% !important;
  width: 52px !important;
  height: 52px !important;
  color: #fff !important;
  font-size: 22px !important;
  cursor: pointer !important;
  transition: transform .2s, background .2s !important;
  justify-content: center !important;
}
.short-action-btn:active {
  transform: scale(.92) !important;
}
.short-action-btn.liked {
  background: rgba(244,67,54,.25) !important;
  border-color: rgba(244,67,54,.5) !important;
}
.short-action-count {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.9) !important;
  margin-top: -14px !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.5) !important;
}

/* Progress bar (time indicator) */
.short-progress {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: rgba(255,255,255,.2) !important;
  z-index: 10 !important;
}
.short-progress-fill {
  height: 100% !important;
  background: var(--accent) !important;
  transition: width .1s linear !important;
  border-radius: 0 2px 2px 0 !important;
}

/* ─── 9. WATCH PAGE POLISH ───────────────────────────────────── */
.watch-title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -.02em !important;
}

/* Like/dislike/share action row */
.video-action-bar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  padding: 12px 0 !important;
}
.vab-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 8px 16px !important;
  border-radius: 20px !important;
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  color: var(--text2) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all .15s !important;
  white-space: nowrap !important;
}
.vab-btn:hover {
  background: rgba(255,107,0,.1) !important;
  color: var(--accent) !important;
  border-color: rgba(255,107,0,.3) !important;
}
.vab-btn.liked, .vab-btn.active {
  background: rgba(255,107,0,.15) !important;
  color: var(--accent) !important;
  border-color: rgba(255,107,0,.4) !important;
}

/* Like heart pop animation */
@keyframes heartPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  60%  { transform: scale(.9); }
  100% { transform: scale(1); }
}
.vab-btn.liked i {
  animation: heartPop .4s ease !important;
}

/* Subscribe button */
.subscribe-btn, .btn-subscribe {
  background: var(--accent-g) !important;
  color: #fff !important;
  border: none !important;
  padding: 9px 20px !important;
  border-radius: 20px !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: filter .15s, transform .15s !important;
  box-shadow: 0 2px 12px rgba(255,107,0,.3) !important;
}
.subscribe-btn:hover, .btn-subscribe:hover {
  filter: brightness(1.1) !important;
  transform: translateY(-1px) !important;
}
.subscribe-btn.subscribed, .btn-subscribe.subscribed {
  background: var(--bg3) !important;
  color: var(--text) !important;
  border: 1px solid var(--border2) !important;
  box-shadow: none !important;
}

/* Comments section */
.comment-item {
  display: flex !important;
  gap: 10px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--border) !important;
}
.comment-item:last-child { border-bottom: none !important; }
.comment-avatar {
  width: 36px !important; height: 36px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  border: 1.5px solid var(--border2) !important;
}
.comment-body { flex: 1; min-width: 0; }
.comment-author {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}
.comment-text {
  font-size: 13px !important;
  color: var(--text2) !important;
  margin-top: 3px !important;
  line-height: 1.5 !important;
}
.comment-actions {
  display: flex !important;
  gap: 12px !important;
  margin-top: 6px !important;
}
.comment-act-btn {
  font-size: 12px !important;
  color: var(--text3) !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 !important;
  transition: color .15s !important;
}
.comment-act-btn:hover { color: var(--accent) !important; }

/* Comment input */
.comment-input-wrap {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--border) !important;
  margin-bottom: 8px !important;
}
.comment-input {
  flex: 1 !important;
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  padding: 9px 16px !important;
  color: var(--text) !important;
  font-size: 13px !important;
  font-family: inherit !important;
  outline: none !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.comment-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(255,107,0,.1) !important;
}

/* ─── 10. SIDEBAR REFINEMENT ─────────────────────────────────── */
.sb-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  color: var(--text2) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .15s !important;
  margin: 1px 6px !important;
}
.sb-item:hover, .sb-item.active {
  background: rgba(255,107,0,.1) !important;
  color: var(--accent) !important;
}
.sb-item.active {
  background: rgba(255,107,0,.14) !important;
  font-weight: 700 !important;
}
.sb-icon {
  width: 22px !important;
  text-align: center !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
}

/* ─── 11. BOTTOM NAV PREMIUM ─────────────────────────────────── */
.mobile-bottom-nav, .bottom-nav, .mbn {
  background: var(--bg2) !important;
  border-top: 1px solid var(--border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
}
.bn-item, .mbn-item {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 8px 0 !important;
  color: var(--text3) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color .15s !important;
  position: relative !important;
}
.bn-item i, .mbn-item i { font-size: 20px !important; }
.bn-item.active, .mbn-item.active,
.bn-item:active, .mbn-item:active {
  color: var(--accent) !important;
}
.bn-item.active::before, .mbn-item.active::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  width: 28px !important;
  height: 3px !important;
  background: var(--accent) !important;
  border-radius: 0 0 3px 3px !important;
}

/* Upload CTA in bottom nav */
.bn-upload, .mbn-upload {
  width: 46px !important; height: 46px !important;
  border-radius: 50% !important;
  background: var(--accent-g) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  box-shadow: 0 4px 16px rgba(255,107,0,.4) !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  transition: transform .2s, box-shadow .2s !important;
}
.bn-upload:active, .mbn-upload:active {
  transform: scale(.94) !important;
  box-shadow: 0 2px 8px rgba(255,107,0,.3) !important;
}

/* ─── 12. UPLOAD PAGE POLISH ─────────────────────────────────── */
/* Drag zone */
.upload-zone, .drop-zone, #dropZone {
  border: 2px dashed var(--border2) !important;
  border-radius: var(--radius-lg) !important;
  padding: 52px 24px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all .2s !important;
  background: var(--bg2) !important;
}
.upload-zone:hover, .upload-zone.dragover,
.drop-zone:hover, .drop-zone.dragover,
#dropZone:hover, #dropZone.drag-over {
  border-color: var(--accent) !important;
  background: rgba(255,107,0,.04) !important;
  box-shadow: 0 0 0 4px rgba(255,107,0,.08) !important;
}
.upload-zone-icon {
  font-size: 48px !important;
  color: var(--accent) !important;
  margin-bottom: 14px !important;
  display: block !important;
}
/* Progress bar */
.upload-prog-bar, .progress-bar-fill, #uploadProg {
  background: var(--accent-g) !important;
  border-radius: 4px !important;
  transition: width .3s !important;
}

/* AI suggestion badges */
.ai-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  background: rgba(255,107,0,.1) !important;
  border: 1px solid rgba(255,107,0,.25) !important;
  color: var(--accent) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background .15s !important;
}
.ai-tag:hover {
  background: rgba(255,107,0,.2) !important;
}

/* ─── 13. CREATOR STUDIO DASHBOARD PREMIUM ───────────────────── */
/* Metric cards */
.metric-card, .stat-card, .studio-card {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 20px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.metric-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: var(--accent-g) !important;
}
.metric-card:hover {
  border-color: rgba(255,107,0,.3) !important;
  box-shadow: 0 4px 20px rgba(255,107,0,.1) !important;
}
.metric-val {
  font-size: 1.8rem !important;
  font-weight: 900 !important;
  background: var(--accent-g) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  line-height: 1.1 !important;
}
.metric-label {
  font-size: 12px !important;
  color: var(--text2) !important;
  margin-top: 4px !important;
  font-weight: 500 !important;
}
.metric-delta {
  font-size: 11px !important;
  font-weight: 700 !important;
  margin-top: 6px !important;
}
.metric-delta.up { color: #4caf50 !important; }
.metric-delta.dn { color: #f44336 !important; }

/* ─── 14. MONETIZATION / EARNINGS ───────────────────────────── */
.earnings-hero {
  background: linear-gradient(135deg,rgba(255,107,0,.12),rgba(255,215,0,.06)) !important;
  border: 1px solid rgba(255,107,0,.25) !important;
  border-radius: var(--radius-lg) !important;
  padding: 28px !important;
  text-align: center !important;
}
.earnings-amount {
  font-size: 2.5rem !important;
  font-weight: 900 !important;
  background: var(--accent-g) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.withdraw-btn {
  background: var(--accent-g) !important;
  color: #fff !important;
  border: none !important;
  padding: 12px 32px !important;
  border-radius: 20px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 20px rgba(255,107,0,.35) !important;
  transition: filter .15s, transform .15s !important;
}
.withdraw-btn:hover {
  filter: brightness(1.1) !important;
  transform: translateY(-2px) !important;
}

/* ─── 15. TOAST NOTIFICATIONS PREMIUM ───────────────────────── */
.lk-toast, #lt-toast-container .toast-item {
  background: var(--bg3) !important;
  border: 1px solid var(--border2) !important;
  border-left: 4px solid var(--accent) !important;
  border-radius: var(--radius) !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
  backdrop-filter: blur(12px) !important;
  min-width: 260px !important;
  animation: toastIn .3s cubic-bezier(.4,0,.2,1) both !important;
}
@keyframes toastIn {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.toast-success { border-left-color: #4caf50 !important; }
.toast-error   { border-left-color: #f44336 !important; }
.toast-warning { border-left-color: #ff9800 !important; }

/* ─── 16. MODALS PREMIUM ─────────────────────────────────────── */
.modal-box, .lk-modal {
  background: var(--bg2) !important;
  border: 1px solid var(--border2) !important;
  border-radius: var(--radius-xl, 28px) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.8) !important;
  overflow: hidden !important;
}
.modal-header {
  padding: 18px 20px 14px !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}
.modal-close {
  width: 32px !important; height: 32px !important;
  border-radius: 50% !important;
  background: var(--bg3) !important;
  border: none !important;
  color: var(--text2) !important;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: background .15s, color .15s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.modal-close:hover {
  background: rgba(255,107,0,.15) !important;
  color: var(--accent) !important;
}

/* ─── 17. INPUT / FORM POLISH ────────────────────────────────── */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="url"],
textarea, select {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 14px !important;
  color: var(--text) !important;
  font-size: 14px !important;
  font-family: inherit !important;
  transition: border-color .15s, box-shadow .15s !important;
  outline: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(255,107,0,.12) !important;
}
select {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 36px !important;
}

/* Primary button */
.btn-primary, .btn-accent {
  background: var(--accent-g) !important;
  color: #fff !important;
  border: none !important;
  padding: 10px 24px !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: filter .15s, transform .15s, box-shadow .15s !important;
  box-shadow: 0 2px 12px rgba(255,107,0,.25) !important;
}
.btn-primary:hover, .btn-accent:hover {
  filter: brightness(1.1) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 20px rgba(255,107,0,.4) !important;
}
.btn-primary:active, .btn-accent:active {
  transform: translateY(0) !important;
}

/* ─── 18. PWA INSTALL BANNER PREMIUM ────────────────────────── */
#pwaInstallBanner {
  border-radius: var(--radius-lg) !important;
  background: var(--bg2) !important;
  border: 1px solid rgba(255,107,0,.3) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.6) !important;
  backdrop-filter: blur(20px) !important;
  animation: pwaSlideUp .4s cubic-bezier(.34,1.56,.64,1) both !important;
}
@keyframes pwaSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ─── 19. SKELETON LOADING REFINEMENT ───────────────────────── */
.skeleton {
  background: linear-gradient(90deg,
    var(--bg3,#1a1a2e) 25%,
    var(--bg4,#1f1f35) 50%,
    var(--bg3,#1a1a2e) 75%
  ) !important;
  background-size: 400% 100% !important;
  animation: shimmer 1.6s ease-in-out infinite !important;
}
@keyframes shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* ─── 20. ADMIN PANEL RESPONSIVE ─────────────────────────────── */
.admin-card {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 18px !important;
  transition: border-color .2s !important;
}
.admin-card:hover { border-color: var(--border2) !important; }
.admin-stat-num {
  font-size: 1.6rem !important;
  font-weight: 900 !important;
  color: var(--accent) !important;
}

/* ─── 21. LOKFEED (COMMUNITY FEED) POLISH ────────────────────── */
.feed-post, .lf-post {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
  transition: border-color .2s !important;
}
.feed-post:hover, .lf-post:hover {
  border-color: rgba(255,107,0,.2) !important;
}
.feed-post-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 16px 10px !important;
}
.feed-post-actions {
  display: flex !important;
  gap: 4px !important;
  padding: 8px 12px !important;
  border-top: 1px solid var(--border) !important;
}
.feed-act-btn {
  flex: 1 !important;
  padding: 8px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: none !important;
  color: var(--text2) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background .15s, color .15s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}
.feed-act-btn:hover {
  background: rgba(255,107,0,.08) !important;
  color: var(--accent) !important;
}

/* ─── 22. STORIES STRIP PREMIUM ──────────────────────────────── */
.story-bubble-ring {
  width: 64px !important; height: 64px !important;
  border-radius: 50% !important;
  padding: 2.5px !important;
  background: var(--accent-g) !important;
}
.story-bubble-ring.seen {
  background: var(--bg4) !important;
}
.story-bubble-ring img {
  width: 100% !important; height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2.5px solid var(--bg) !important;
  display: block !important;
}
.story-bubble-name {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text2) !important;
  max-width: 64px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: center !important;
  margin-top: 4px !important;
}

/* ─── 23. VERIFIED BADGE ─────────────────────────────────────── */
.verified-badge, .is-verified::after {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important; height: 14px !important;
  background: var(--accent) !important;
  border-radius: 50% !important;
  color: #fff !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  margin-left: 3px !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
}

/* ─── 24. MOBILE-SPECIFIC OVERRIDES ──────────────────────────── */
@media (max-width: 768px) {
  /* Home feed: single-column clean */
  .content-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 0 4px !important;
  }
  /* Thumb border-radius tighter on mobile */
  .yt-thumb-wrap {
    border-radius: 12px 12px 0 0 !important;
  }
  .yt-card {
    border-radius: 12px !important;
  }
  /* Watch page: no side padding on player */
  .watch-player-wrap, .video-player-box {
    border-radius: 0 !important;
    margin: 0 -16px !important;
  }
  /* Upload page: full-width form */
  .upload-form-grid {
    grid-template-columns: 1fr !important;
  }
  /* Studio: stack cards */
  .studio-metrics-grid {
    grid-template-columns: repeat(2,1fr) !important;
  }
}

/* ─── 25. AMOLED DARK MODE ───────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .amoled-ready {
    --bg:  #000000 !important;
    --bg2: #0a0a0a !important;
    --bg3: #111111 !important;
  }
}

/* ─── 26. REDUCED MOTION RESPECT ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ─── 27. SELECTION COLOR ────────────────────────────────────── */
::selection {
  background: rgba(255,107,0,.25) !important;
  color: var(--text) !important;
}
::-moz-selection {
  background: rgba(255,107,0,.25) !important;
  color: var(--text) !important;
}

/* ─── 28. FOCUS RING (ACCESSIBILITY) ─────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent) !important;
  border-radius: var(--radius-sm) !important;
}

/* === v87_master.css === */
/* ================================================================
   LOKTUBE v87 — MASTER UPGRADE CSS
   New: S3/R2/Wasabi storage UI, sponsorship marketplace,
   subscription system, enhanced creator cards, festival banner,
   skeleton improvements, watch party UI, notification center,
   wallet card, PWA full-screen transitions
   ================================================================ */

/* ─── 1. ROOT UPGRADES ───────────────────────────────────────── */
:root {
  --v87-accent:       #FF6B00;
  --v87-accent-soft:  rgba(255,107,0,0.08);
  --v87-accent-mid:   rgba(255,107,0,0.18);
  --v87-green:        #138808;
  --v87-green-soft:   rgba(19,136,8,0.10);
  --v87-gold:         #FFD700;
  --v87-gold-soft:    rgba(255,215,0,0.10);
  --v87-sponsor:      #7C3AED;
  --v87-sponsor-soft: rgba(124,58,237,0.10);
  --v87-radius:       16px;
  --v87-radius-lg:    22px;
  --v87-radius-xl:    28px;
  --v87-transition:   all .22s cubic-bezier(.4,0,.2,1);
  --v87-shadow:       0 4px 24px rgba(0,0,0,.35);
  --v87-shadow-acc:   0 6px 28px rgba(255,107,0,.22);
}

/* ─── 2. FESTIVAL / ANNOUNCEMENT BANNER ─────────────────────── */
.festival-banner {
  background: linear-gradient(135deg, #FF6B00, #FFD700, #138808) !important;
  color: #fff !important;
  text-align: center !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .3px !important;
  position: relative !important;
  z-index: 999 !important;
}
.festival-banner a { color: #fff !important; text-decoration: underline !important; }
.festival-banner .fb-close {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.2); border: none; color: #fff;
  width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
  font-size: 13px; display: flex; align-items: center; justify-content: center;
}

/* ─── 3. CREATOR WALLET CARD ─────────────────────────────────── */
.creator-wallet {
  background: linear-gradient(135deg, #1a1206, #2d1f00) !important;
  border: 1px solid rgba(255,215,0,.25) !important;
  border-radius: var(--v87-radius-lg) !important;
  padding: 24px !important;
  position: relative; overflow: hidden !important;
}
.creator-wallet::before {
  content: '₹';
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-size: 96px; opacity: .05; font-weight: 900;
  color: var(--v87-gold); line-height: 1;
}
.wallet-balance {
  font-size: 36px !important; font-weight: 800 !important;
  color: var(--v87-gold) !important; line-height: 1 !important;
  margin-bottom: 4px !important;
}
.wallet-label {
  font-size: 12px !important; text-transform: uppercase !important;
  letter-spacing: 2px !important; color: rgba(255,215,0,.6) !important;
  margin-bottom: 20px !important;
}
.wallet-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.wallet-btn {
  padding: 9px 20px !important; border-radius: 40px !important;
  font-size: 13px !important; font-weight: 700 !important;
  border: none !important; cursor: pointer !important;
  transition: var(--v87-transition) !important;
}
.wallet-btn-primary {
  background: linear-gradient(135deg, #FFD700, #FF9800) !important;
  color: #1a0e00 !important;
}
.wallet-btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.wallet-btn-secondary {
  background: rgba(255,215,0,.12) !important;
  border: 1px solid rgba(255,215,0,.3) !important;
  color: var(--v87-gold) !important;
}

/* ─── 4. SUBSCRIPTION TIERS ──────────────────────────────────── */
.sub-tiers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 16px; margin-top: 20px;
}
.sub-tier {
  border-radius: var(--v87-radius) !important;
  padding: 24px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg2) !important;
  position: relative; overflow: hidden;
  transition: var(--v87-transition) !important;
  cursor: pointer;
}
.sub-tier:hover { transform: translateY(-3px); border-color: var(--v87-accent-mid) !important; }
.sub-tier.recommended { border-color: var(--v87-accent) !important; }
.sub-tier.recommended::before {
  content: '⭐ Popular';
  position: absolute; top: 0; right: 0;
  background: var(--v87-accent); color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 4px 12px; border-radius: 0 var(--v87-radius) 0 12px;
}
.sub-tier-price {
  font-size: 28px; font-weight: 800; color: #fff; margin-bottom: 4px;
}
.sub-tier-price span { font-size: 14px; font-weight: 500; color: var(--muted); }
.sub-tier-name { font-size: 13px; font-weight: 700; color: var(--v87-accent); margin-bottom: 16px; text-transform: uppercase; letter-spacing: 1px; }
.sub-tier-perks { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.sub-tier-perks li { font-size: 13px; color: var(--muted2); display: flex; align-items: center; gap: 8px; }
.sub-tier-perks li::before { content: '✓'; color: var(--v87-accent); font-weight: 700; }
.sub-btn {
  display: block; width: 100%; margin-top: 20px;
  padding: 11px 0; border-radius: 40px;
  background: linear-gradient(135deg, #FF6B00, #FF9800);
  color: #fff; font-weight: 700; font-size: 14px;
  border: none; cursor: pointer; text-align: center;
  transition: var(--v87-transition);
}
.sub-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }

/* ─── 5. SPONSORSHIP MARKETPLACE ────────────────────────────── */
.sponsor-card {
  background: linear-gradient(135deg, #120a24, #1e1035) !important;
  border: 1px solid rgba(124,58,237,.25) !important;
  border-radius: var(--v87-radius-lg) !important;
  padding: 24px !important;
  position: relative; overflow: hidden;
}
.sponsor-card::before {
  content: '🤝';
  position: absolute; right: 20px; top: 20px;
  font-size: 40px; opacity: .15;
}
.sponsor-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--v87-sponsor-soft); border: 1px solid rgba(124,58,237,.3);
  border-radius: 40px; padding: 5px 14px;
  font-size: 12px; font-weight: 700; color: #a78bfa;
  margin-bottom: 14px; letter-spacing: .5px;
}
.sponsor-deal {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px; border-radius: 12px;
  background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.15);
  margin-bottom: 10px; gap: 12px; flex-wrap: wrap;
}
.sponsor-deal-brand { font-weight: 700; color: #fff; font-size: 14px; }
.sponsor-deal-budget { color: #a78bfa; font-weight: 700; font-size: 14px; }
.sponsor-deal-btn {
  padding: 7px 18px; border-radius: 40px;
  background: linear-gradient(135deg, #7C3AED, #9333EA);
  color: #fff; font-size: 12px; font-weight: 700;
  border: none; cursor: pointer; white-space: nowrap;
  transition: var(--v87-transition);
}
.sponsor-deal-btn:hover { filter: brightness(1.1); }

/* ─── 6. EXTERNAL STORAGE ADMIN UI ──────────────────────────── */
.storage-provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: 12px; margin: 16px 0;
}
.storage-provider-card {
  background: var(--bg3); border: 2px solid transparent;
  border-radius: var(--v87-radius); padding: 18px 16px;
  cursor: pointer; transition: var(--v87-transition);
  text-align: center;
}
.storage-provider-card:hover { border-color: var(--v87-accent-mid); }
.storage-provider-card.active { border-color: var(--v87-accent) !important; background: var(--v87-accent-soft); }
.storage-provider-card .sp-icon { font-size: 28px; margin-bottom: 8px; }
.storage-provider-card .sp-name { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.storage-provider-card .sp-desc { font-size: 11px; color: var(--muted); }
.storage-provider-card .sp-badge {
  display: inline-block; margin-top: 8px; padding: 2px 8px;
  border-radius: 20px; font-size: 10px; font-weight: 700;
}
.sp-badge-free { background: var(--v87-green-soft); color: #4ade80; }
.sp-badge-cheap { background: var(--v87-accent-soft); color: var(--v87-accent); }
.sp-badge-fast { background: var(--v87-gold-soft); color: var(--v87-gold); }

/* S3-compatible fields reveal */
.s3-fields { display: none; }
.s3-fields.visible { display: block; }
.s3-field-group {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px;
}
@media(max-width:640px){ .s3-field-group { grid-template-columns: 1fr; } }

/* ─── 7. NOTIFICATION CENTER ─────────────────────────────────── */
.notif-center {
  position: fixed; top: 62px; right: 12px; width: 360px;
  max-height: 520px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: var(--v87-radius-lg);
  box-shadow: 0 16px 48px rgba(0,0,0,.6);
  display: flex; flex-direction: column;
  z-index: 500; overflow: hidden;
  transform: translateY(-8px) scale(.97); opacity: 0;
  transition: all .2s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.notif-center.open {
  transform: translateY(0) scale(1); opacity: 1; pointer-events: auto;
}
.notif-header {
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.notif-header h4 { font-size: 15px; font-weight: 700; color: #fff; }
.notif-mark-all { font-size: 12px; color: var(--v87-accent); cursor: pointer; font-weight: 600; border: none; background: none; }
.notif-list { overflow-y: auto; flex: 1; }
.notif-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.04);
  cursor: pointer; transition: background .15s;
}
.notif-item:hover { background: var(--bg3); }
.notif-item.unread { background: var(--v87-accent-soft); }
.notif-item.unread:hover { background: rgba(255,107,0,.12); }
.notif-icon { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.notif-icon-fallback {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg,#FF6B00,#FF9800);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.notif-body { flex: 1; min-width: 0; }
.notif-text { font-size: 13px; color: var(--text); line-height: 1.5; }
.notif-text strong { color: #fff; }
.notif-time { font-size: 11px; color: var(--muted); margin-top: 3px; }
.notif-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--v87-accent); flex-shrink: 0; margin-top: 6px; }
@media(max-width:400px){ .notif-center { width: calc(100vw - 24px); right: 12px; } }

/* ─── 8. WATCH PARTY ROOM UI ─────────────────────────────────── */
.watch-party-bar {
  background: linear-gradient(90deg, rgba(19,136,8,.12), rgba(255,107,0,.08)) !important;
  border: 1px solid rgba(19,136,8,.25) !important;
  border-radius: var(--v87-radius) !important;
  padding: 12px 18px !important;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.wp-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px #4ade80;
  animation: wpPulse 1.2s ease infinite;
}
@keyframes wpPulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.wp-label { font-size: 13px; font-weight: 700; color: #4ade80; }
.wp-viewers { font-size: 12px; color: var(--muted); }
.wp-join-btn {
  margin-left: auto; padding: 7px 18px; border-radius: 40px;
  background: linear-gradient(135deg,#138808,#22c55e);
  color: #fff; font-size: 12px; font-weight: 700;
  border: none; cursor: pointer; transition: var(--v87-transition);
}
.wp-join-btn:hover { filter: brightness(1.1); }

/* ─── 9. CREATOR ANALYTICS UPGRADE ──────────────────────────── */
.analytics-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap: 14px; margin-bottom: 24px;
}
.kpi-box {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--v87-radius); padding: 18px 16px;
  position: relative; overflow: hidden;
  transition: var(--v87-transition);
}
.kpi-box:hover { border-color: var(--v87-accent-mid); transform: translateY(-2px); }
.kpi-box::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #FF6B00, #FF9800);
  transform: scaleX(0); transform-origin: left; transition: transform .22s;
}
.kpi-box:hover::after { transform: scaleX(1); }
.kpi-val { font-size: 26px; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 4px; }
.kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); margin-bottom: 8px; }
.kpi-change { font-size: 12px; font-weight: 600; }
.kpi-up { color: #4ade80; }
.kpi-down { color: #f87171; }
.kpi-flat { color: var(--muted); }

/* ─── 10. LIVE STREAMING STUB UI ────────────────────────────── */
.live-preview-card {
  background: linear-gradient(135deg, #1a0000, #200808) !important;
  border: 1px solid rgba(239,68,68,.2) !important;
  border-radius: var(--v87-radius-lg) !important;
  padding: 28px !important; text-align: center;
}
.live-red-dot {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3);
  border-radius: 40px; padding: 6px 16px;
  font-size: 13px; font-weight: 700; color: #f87171;
  margin-bottom: 16px;
}
.live-red-dot::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: #ef4444; animation: wpPulse 1s ease infinite;
}

/* ─── 11. REGIONAL TRENDING STRIP ───────────────────────────── */
.regional-strip {
  display: flex; gap: 10px; overflow-x: auto; padding: 0 0 8px;
  scrollbar-width: none;
}
.regional-strip::-webkit-scrollbar { display: none; }
.regional-chip {
  flex-shrink: 0; padding: 7px 18px; border-radius: 40px;
  font-size: 13px; font-weight: 600;
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--muted2); cursor: pointer; transition: var(--v87-transition);
  white-space: nowrap;
}
.regional-chip:hover, .regional-chip.active {
  background: var(--v87-accent-soft);
  border-color: var(--v87-accent-mid);
  color: var(--v87-accent);
}

/* ─── 12. ENHANCED CREATOR CHANNEL PAGE ─────────────────────── */
.channel-stats-row {
  display: flex; gap: 24px; flex-wrap: wrap; margin-top: 16px;
}
.ch-stat { text-align: center; }
.ch-stat-val { font-size: 20px; font-weight: 800; color: #fff; }
.ch-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); }

/* ─── 13. PWA SPLASH / TRANSITION ───────────────────────────── */
@keyframes lkSlideIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes lkSlideOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-24px); }
}
.page-enter { animation: lkSlideIn .25s ease both; }
.page-exit  { animation: lkSlideOut .2s ease both; }

/* ─── 14. SHORTS COMPOSER — PREMIUM ─────────────────────────── */
.shorts-composer-overlay {
  position: fixed; inset: 0; background: #000;
  z-index: 800; display: flex; flex-direction: column;
}
.composer-preview {
  flex: 1; position: relative; overflow: hidden;
  background: #111;
}
.composer-preview video {
  width: 100%; height: 100%; object-fit: cover;
}
.composer-toolbar {
  background: rgba(0,0,0,.8);
  backdrop-filter: blur(12px);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.composer-action-btn {
  background: rgba(255,255,255,.1); border: none;
  border-radius: 50%; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px; cursor: pointer;
  transition: var(--v87-transition);
}
.composer-action-btn:hover { background: rgba(255,107,0,.3); }
.composer-record-btn {
  width: 60px; height: 60px; border-radius: 50%; margin: 0 auto;
  background: #ef4444; border: 4px solid rgba(255,255,255,.3);
  cursor: pointer; transition: var(--v87-transition);
}
.composer-record-btn.recording {
  background: #fff;
  box-shadow: 0 0 0 6px rgba(239,68,68,.4);
}

/* ─── 15. PERFORMANCE: WILL-CHANGE + GPU HINTS ──────────────── */
.lk-card, .yt-card, .short-card {
  will-change: transform;
  transform: translateZ(0);
}
.lk-feed-wrap, .shorts-feed, .home-feed-grid {
  contain: layout style;
}

/* ─── 16. DARK/LIGHT CONSISTENT OVERRIDES ───────────────────── */
[data-theme="light"] .creator-wallet {
  background: linear-gradient(135deg, #fff8e7, #fffbf2) !important;
  border-color: rgba(255,107,0,.2) !important;
}
[data-theme="light"] .sponsor-card {
  background: linear-gradient(135deg, #f5f0ff, #ede8ff) !important;
}
[data-theme="light"] .festival-banner { color: #fff !important; }

/* ─── 17. TOAST UPGRADE (position awareness) ────────────────── */
@media(max-width:640px) {
  #lt-toast-container {
    bottom: calc(68px + env(safe-area-inset-bottom,0)) !important;
    right: 12px !important; left: 12px !important;
    max-width: 100% !important;
  }
}

/* ─── 18. SEARCH RESULTS PREMIUM ────────────────────────────── */
.search-result-row {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.05);
  transition: var(--v87-transition); cursor: pointer;
}
.search-result-row:hover { background: var(--v87-accent-soft); border-radius: 12px; padding: 14px 12px; margin: 0 -12px; }
.search-thumb { width: 160px; height: 90px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.search-meta h4 { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 6px; line-height: 1.4; }
.search-meta p  { font-size: 13px; color: var(--muted); }
@media(max-width:480px) { .search-thumb { width: 120px; height: 68px; } }

/* ─── 19. EMPTY STATE PREMIUM ────────────────────────────────── */
.empty-state {
  text-align: center; padding: 60px 24px;
}
.empty-state .es-icon { font-size: 64px; margin-bottom: 16px; opacity: .6; }
.empty-state h3 { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.empty-state p  { font-size: 14px; color: var(--muted); max-width: 340px; margin: 0 auto 24px; }
.empty-state .es-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg,#FF6B00,#FF9800);
  color: #fff; font-weight: 700; font-size: 14px;
  padding: 11px 28px; border-radius: 40px;
  border: none; cursor: pointer; transition: var(--v87-transition);
  text-decoration: none;
}
.empty-state .es-btn:hover { filter: brightness(1.1); transform: translateY(-2px); }

/* ─── 20. MOBILE: FULL-WIDTH VIDEO ON FEED ───────────────────── */
@media(max-width:480px) {
  .yt-card .yt-thumb-wrap {
    border-radius: 0 !important;
    margin: -1px -1px 0 !important;
  }
  .home-feed-grid, .lk-video-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ─── 21. REDUCED MOTION SAFETY ─────────────────────────────── */
@media(prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* === v88_fixes.css === */
/* ================================================================
   LOKTUBE v88 — SCROLL + UI FIXES CSS
   Loaded LAST — overrides all previous CSS conflicts
   ================================================================ */

/* ── SCROLL LOCK SYSTEM ─────────────────────────────────────── */
/* lk-scroll-locked: safe scroll lock using position:fixed + top */
body.lk-scroll-locked {
  position: fixed !important;
  overflow: hidden !important;
  width: 100% !important;
  /* top is set dynamically via JS */
}

/* NEUTRALIZE nested scroll from v61_final.css */
.lk-main,
.main-container,
.main-content,
.page-wrapper,
.content-wrap,
.feed-wrapper {
  overflow: visible !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
}

/* Body base: must scroll freely on non-shorts pages */
html:not(.shorts-active),
body:not(.shorts-page):not(.lk-scroll-locked) {
  overflow-x: hidden;
  overflow-y: auto;
  height: auto;
  min-height: 100vh;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* Shorts page: full lock is valid */
body.shorts-page {
  overflow: hidden !important;
  height: 100dvh !important;
  position: fixed;
  width: 100%;
}

/* Legacy modal-open: map to our system */
body.modal-open:not(.lk-scroll-locked) {
  position: fixed !important;
  overflow: hidden !important;
  width: 100% !important;
}

/* ── GPU ACCELERATION FOR FEEDS ─────────────────────────────── */
.video-grid,
.feed-container,
#lokfeed-container,
.shorts-feed,
.content-grid {
  will-change: transform;
  transform: translateZ(0);
  -webkit-overflow-scrolling: touch;
}

/* ── INDIA TRICOLOR BAR ─────────────────────────────────────── */
.india-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    #FF6B00 33.33%,
    #ffffff 33.33% 66.66%,
    #138808 66.66%);
  z-index: 2001;
  pointer-events: none;
}
/* Ensure navbar is below the bar */
.navbar, .lk-navbar, header.main-header {
  top: 3px !important;
}

/* ── LOK COINS / TIPS BUTTON ON WATCH PAGE ──────────────────── */
/* FIX: inventory shows STUB — adding the UI hook */
.lok-coins-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #FFD700, #FF9800);
  border: none;
  border-radius: 40px;
  color: #000;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  font-family: inherit;
}
.lok-coins-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(255,152,0,.4);
}
.lok-coins-modal {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(0,0,0,.75);
  display: none;
  align-items: flex-end;
  justify-content: center;
}
.lok-coins-modal.open { display: flex; }
.lok-coins-sheet {
  width: 100%;
  max-width: 480px;
  background: var(--bg2, #12121a);
  border-radius: 24px 24px 0 0;
  padding: 24px 20px 36px;
}
.lok-coins-amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 16px 0;
}
.lok-coins-amt {
  padding: 14px 8px;
  background: rgba(255,215,0,.08);
  border: 1.5px solid rgba(255,215,0,.2);
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: all .15s;
}
.lok-coins-amt:hover,
.lok-coins-amt.selected {
  border-color: #FFD700;
  background: rgba(255,215,0,.15);
}
.lok-coins-amt .amount {
  font-size: 18px;
  font-weight: 900;
  color: #FFD700;
}
.lok-coins-amt .coins {
  font-size: 11px;
  color: var(--text2, #888);
  margin-top: 2px;
}

/* ── SEARCH AUTOCOMPLETE ────────────────────────────────────── */
/* FIX: inventory says NAHI — adding UI */
.search-autocomplete {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--bg2, #12121a);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  z-index: 1200;
  overflow: hidden;
  max-height: 320px;
  overflow-y: auto;
  display: none;
}
.search-autocomplete.open { display: block; }
.search-ac-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background .1s;
  text-decoration: none;
  color: var(--text, #f0f0f5);
  font-size: 14px;
}
.search-ac-item:hover { background: var(--bg3, #1a1a26); }
.search-ac-icon {
  width: 16px;
  color: var(--text2, #888);
  flex-shrink: 0;
  font-size: 13px;
  text-align: center;
}
.search-ac-text { flex: 1; }
.search-ac-cat {
  font-size: 11px;
  color: var(--text2, #888);
  background: var(--bg3, #1a1a26);
  padding: 2px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}

/* ── OFFLINE PAGE UPGRADE ───────────────────────────────────── */
.offline-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #0a0a0f;
  color: #f0f0f5;
  text-align: center;
  padding: 24px;
  font-family: system-ui, sans-serif;
}
.offline-logo {
  font-size: 28px;
  font-weight: 900;
  color: #FF6B00;
  margin-bottom: 24px;
}
.offline-icon { font-size: 64px; margin-bottom: 16px; }
.offline-title {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 8px;
}
.offline-sub {
  font-size: 14px;
  color: rgba(255,255,255,.5);
  max-width: 300px;
  line-height: 1.6;
}
.offline-retry-btn {
  margin-top: 24px;
  padding: 12px 28px;
  background: linear-gradient(135deg, #FF6B00, #E55D00);
  border: none;
  border-radius: 40px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.offline-cached-list {
  margin-top: 32px;
  width: 100%;
  max-width: 400px;
}
.offline-cached-title {
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 12px;
}

/* ── TOAST CONTAINER ─────────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
  width: min(90vw, 360px);
}

/* ── SW UPDATE BANNER ────────────────────────────────────────── */
#swUpdateBanner {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: var(--bg2, #12121a);
  border: 1px solid rgba(255,107,0,.3);
  border-radius: 40px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(255,107,0,.2);
  z-index: 9000;
  opacity: 0;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .35s;
  pointer-events: none;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #f0f0f5);
}
#swUpdateBanner.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
#swUpdateBanner button {
  background: #FF6B00;
  border: none;
  border-radius: 20px;
  padding: 5px 14px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* ── THEATER MODE FIX (watch.php PART status) ───────────────── */
body.theater-mode .watch-sidebar { display: none !important; }
body.theater-mode .watch-layout {
  grid-template-columns: 1fr !important;
  max-width: 1600px !important;
}
body.theater-mode .watch-player-wrap {
  aspect-ratio: 21/9 !important;
}

/* ── CHAPTER TIMELINE (watch.php PART status) ───────────────── */
.chapter-markers {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 100%;
  pointer-events: none;
}
.chapter-marker {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: rgba(255,255,255,.6);
  transform: translateX(-50%);
}
.chapter-marker-label {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.9);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.video-progress:hover .chapter-marker-label { opacity: 1; }

/* ── AMOLED MODE ─────────────────────────────────────────────── */
[data-amoled="1"] {
  --bg:  #000000 !important;
  --bg2: #080808 !important;
  --bg3: #101010 !important;
  --bg4: #181818 !important;
}

/* ── REDUCED MOTION ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ── SAFE AREA FIXES FOR NOTCH DEVICES ──────────────────────── */
.mobile-bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  height: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
}
.shorts-info-section {
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ── SCROLL-TO-TOP BTN ───────────────────────────────────────── */
#scrollToTopBtn {
  position: fixed;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  right: 16px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg2, #12121a);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  color: #FF6B00;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  z-index: 400;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
#scrollToTopBtn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── RTL SUPPORT (Urdu) — inventory NAHI → fixed ────────────── */
[dir="rtl"],
html[lang="ur"],
body.rtl-mode {
  direction: rtl;
  text-align: right;
}
[dir="rtl"] .sidebar,
body.rtl-mode .sidebar {
  left: auto;
  right: 0;
  border-right: none;
  border-left: 1px solid var(--border, rgba(255,255,255,.08));
}
[dir="rtl"] .mobile-bottom-nav,
body.rtl-mode .mobile-bottom-nav { direction: ltr; /* keep icons logical */ }
[dir="rtl"] .yt-meta,
body.rtl-mode .yt-meta { flex-direction: row-reverse; }
[dir="rtl"] .nav-actions,
body.rtl-mode .nav-actions { flex-direction: row-reverse; }
[dir="rtl"] .sidebar-item,
body.rtl-mode .sidebar-item { flex-direction: row-reverse; }
[dir="rtl"] .lf-post-header,
body.rtl-mode .lf-post-header { flex-direction: row-reverse; }
/* Urdu font preference */
html[lang="ur"] body,
body.rtl-mode {
  font-family: 'Noto Nastaliq Urdu', 'Noto Sans', system-ui, sans-serif;
}


/* ═══════════════════════════════════════════════════════
   LOKTUBE v92 — Mobile Layout Stabilization Patch
   Fixes: toast overlap, safe-area, nav inner flex
   ═══════════════════════════════════════════════════════ */

/* Fix bottom-nav-inner (used in header.php) same as mobile-bottom-nav-inner */
.mobile-bottom-nav .bottom-nav-inner {
  display: flex;
  height: 56px;
  align-items: stretch;
  width: 100%;
}

/* Toast must sit ABOVE bottom nav but not block content */
#lt-toast-container {
  bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 32px) !important;
  max-width: 420px !important;
  z-index: 8000 !important;
  pointer-events: none !important;
}
@media (min-width: 769px) {
  #lt-toast-container {
    bottom: 24px !important;
    left: auto !important;
    right: 16px !important;
    transform: none !important;
    width: auto !important;
  }
}

/* Prevent mobile bottom nav from creating duplicate on pages that already have one */
@media (max-width: 768px) {
  /* Only show one bottom nav - the mobile-bottom-nav */
  body.has-bottom-nav .bottom-nav:not(.mobile-bottom-nav) {
    display: none !important;
  }
  
  /* Safe area padding for main content */
  body { 
    padding-bottom: max(60px, calc(60px + env(safe-area-inset-bottom, 0px))) !important;
  }
  
  /* PWA: prevent content jumping on address bar hide */
  .mobile-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    transform: translateZ(0) !important;
    will-change: transform !important;
  }

  /* Shorts page: extra bottom padding for action buttons */
  .shorts-container { 
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 8px)) !important; 
  }
  
  /* Fix comment input on shorts - sits above nav */
  .comment-input-wrap {
    bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* bn-item active state - touch feedback */
.bn-item:active, .mbn-item:active {
  transform: scale(0.88) !important;
  color: var(--accent) !important;
  transition: transform .08s !important;
}

/* bn-create button active feedback */
.bn-create-btn:active {
  transform: scale(0.90) translateY(-2px) !important;
}

/* === v92_mobile_fix.css — appended during build === */
/* ================================================================
   LOKTUBE v92 — Mobile Fix CSS
   File: assets/css/v92_mobile_fix.css
   Add to bundle.css (append at end) OR include separately in header.php
   ================================================================

   Fixes:
   BUG-1: bottom-nav-inner class mismatch → items not flex-laid-out
   BUG-3: Profile/login icon missing for guests in bottom nav
   BUG-4: Dual bottom-nav on no-sidebar pages
   BUG-8: 5× conflicting .bottom-nav rules → normalised here as !important
   BUG-12: Profile dropdown z-index behind bottom nav on mobile
   + PWA safe-area fixes
   + Premium app-like feel
   ================================================================ */

/* ── 1. CANONICAL MOBILE BOTTOM NAV ─────────────────────────
   Override all previous conflicting definitions with one clear rule.
   The .mobile-bottom-nav is in header.php (always present).
   The .bottom-nav (footer) is only rendered on noSidebar pages.
   Both must look identical and only ONE shows at a time on mobile.
   ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Hide the old footer bottom-nav on pages that have the header nav */
  .lk-shell ~ .bottom-nav,
  body:not(.no-sidebar-page) .bottom-nav {
    display: none !important;
  }

  /* FIX BUG-1: The HTML uses .bottom-nav-inner but CSS defines .mobile-bottom-nav-inner
     Target BOTH so it works regardless of which class is on the div */
  .mobile-bottom-nav .bottom-nav-inner,
  .mobile-bottom-nav .mobile-bottom-nav-inner {
    display: flex !important;
    height: 54px;
    align-items: stretch;
  }

  /* Canonical bottom nav container */
  .mobile-bottom-nav {
    display: block !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 600 !important;           /* FIX BUG-12: Higher than dropdown (500) */
    background: var(--bg2) !important;
    border-top: 1px solid var(--border) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    /* GPU compositing — prevents nav from jumping on iOS scroll */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  /* Nav items (both class names for compat) */
  .mobile-bottom-nav .bn-item,
  .mobile-bottom-nav .mbn-item {
    flex: 1;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: var(--text2);
    font-size: 9px;
    font-weight: 700;
    transition: color .15s;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    min-width: 0;                       /* prevent overflow on small phones */
  }

  .mobile-bottom-nav .bn-item i,
  .mobile-bottom-nav .mbn-item i {
    font-size: 20px;
    transition: transform .2s cubic-bezier(.34,1.56,.64,1);
  }

  .mobile-bottom-nav .bn-item.active,
  .mobile-bottom-nav .bn-item:active,
  .mobile-bottom-nav .mbn-item.active,
  .mobile-bottom-nav .mbn-item:active {
    color: var(--accent);
  }

  .mobile-bottom-nav .bn-item.active i {
    transform: scale(1.15);
  }

  /* Body clearance for bottom nav + safe area */
  body {
    padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ── 2. CENTER CREATE BUTTON ─────────────────────────────── */
.bn-create {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 60px;
}

.bn-create-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--accent-g, linear-gradient(135deg, #FF6B00, #FF9800));
  color: #fff;
  border: none;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(255, 107, 0, .45);
  transition: transform .18s, box-shadow .18s;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  /* Lift above nav height to make it stand out */
  margin-bottom: 8px;
}

.bn-create-btn:hover,
.bn-create-btn:active {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(255, 107, 0, .6);
}

/* ── 3. PROFILE DROPDOWN Z-INDEX FIX ────────────────────── */
/* FIX BUG-12: dropdown must appear ABOVE bottom nav on mobile */
.profile-dropdown {
  z-index: 700 !important;
}

/* On mobile, profile dropdown should expand upward if near bottom */
@media (max-width: 768px) {
  .profile-dropdown {
    position: fixed !important;
    top: auto !important;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    right: 8px !important;
    left: 8px !important;
    min-width: unset !important;
    width: calc(100% - 16px) !important;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 18px 18px 14px 14px !important;
  }
}

/* ── 4. NAVBAR ALIGNMENT FIX ────────────────────────────── */
@media (max-width: 480px) {
  .navbar {
    padding: 0 8px !important;
    gap: 4px !important;
  }

  /* Shrink logo text on very small screens */
  .logo {
    font-size: 16px !important;
  }

  /* Upload button: icon only on very small screens */
  .btn-upload span.upload-label {
    display: none;
  }

  /* Notif icon — make tap target bigger */
  .nav-icon-btn {
    width: 36px !important;
    height: 36px !important;
  }
}

/* ── 5. PWA STANDALONE MODE OVERRIDES ───────────────────── */
@media (display-mode: standalone) {
  /* Extra top padding for the status bar area on iOS/Android */
  .navbar {
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(var(--nav-h, 58px) + env(safe-area-inset-top, 0px)) !important;
  }

  /* Smoother scrolling in PWA */
  .lk-main, .shorts-feed {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  /* Hide browser-only elements in PWA */
  .pwa-install-banner {
    display: none !important;
  }
}

/* ── 6. TOUCH INTERACTIONS ───────────────────────────────── */
/* Ripple effect on tap-able elements */
.bn-item, .mbn-item, .bn-create-btn {
  position: relative;
  overflow: hidden;
}

.bn-item::after, .mbn-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transition: opacity .15s;
}

.bn-item:active::after, .mbn-item:active::after {
  opacity: .08;
}

/* ── 7. SHORTS PAGE BOTTOM NAV (no-sidebar) ─────────────── */
/* On Shorts page ($noSidebar=true), the footer renders .bottom-nav.
   Hide the header .mobile-bottom-nav on shorts to prevent double nav */
.shorts-page .mobile-bottom-nav {
  display: none !important;
}

/* Make the shorts .bottom-nav match the mobile bottom nav style */
.shorts-page .bottom-nav {
  background: rgba(0, 0, 0, .85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, .1) !important;
}

.shorts-page .bottom-nav .bn-item {
  color: rgba(255, 255, 255, .7) !important;
}

.shorts-page .bottom-nav .bn-item.active,
.shorts-page .bottom-nav .bn-item:active {
  color: #fff !important;
}

/* ── 8. SCROLLBAR HIDE ───────────────────────────────────── */
@media (max-width: 768px) {
  ::-webkit-scrollbar { display: none; }
  * { scrollbar-width: none; -ms-overflow-style: none; }
}

/* ── 9. CARD / CONTENT PADDING FIX ──────────────────────── */
@media (max-width: 480px) {
  .lk-main {
    padding: 8px 8px 0 !important;
  }

  .content-grid {
    gap: 10px !important;
  }

  /* Prevent text overflow in video cards */
  .yt-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ── 10. UPLOAD PAGE MOBILE FIX ─────────────────────────── */
@media (max-width: 768px) {
  .upload-shell {
    padding: 16px 12px 80px !important;
  }

  .uf-grid {
    grid-template-columns: 1fr !important;
  }

  .upload-zone {
    padding: 40px 16px !important;
  }

  /* Make file input accessible on iOS PWA
     The actual input must be visible (opacity 0) to trigger picker */
  .upload-zone #fileInput {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    /* display:none BREAKS iOS PWA file picker — must be visible but transparent */
  }

  /* Keep choose button on top */
  .upload-zone #chooseFileBtn {
    position: relative;
    z-index: 2;
    pointer-events: none; /* Let the overlaid fileInput catch the click */
  }
}

/* ── 11. TABLET OPTIMIZATIONS ───────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .content-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .mobile-bottom-nav {
    display: none !important;
  }
}
/* ================================================================
   LOKTUBE v93 — MASTER CSS PATCH
   Fixes ALL critical UI/PWA/mobile issues from v93 prompt
   Add to end of bundle.css and include in header.php
   ================================================================

   FIXES:
   [1] Mobile header redesign — premium app-like navbar
   [2] Bottom nav bn-item class missing styles (used in header.php)
   [3] Plus button create sheet — z-index and stability
   [4] Shorts share overlay — hide Telegram/WhatsApp globally on immersive
   [5] Shorts dual-nav conflict — definitive fix
   [6] Content density — better card layout
   [7] Safe area handling — all edges
   [8] Creator Studio navigation — visible and clear
   [9] Admin panel — loading state stability
   [10] Profile dropdown — fixed positioning on mobile
   ================================================================ */

/* ═══════════════════════════════════════════════════════════════
   [1] PREMIUM MOBILE NAVBAR
   ═══════════════════════════════════════════════════════════════ */

/* Navbar baseline: taller, more breathing room */
.navbar {
  height: 56px;
  padding: 0 12px;
  gap: 8px;
  background: var(--bg, #0A0A0A);
  border-bottom: 1px solid var(--border, rgba(255,107,0,.14));
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1000;
  /* GPU composite for smooth scroll */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}

@media (max-width: 768px) {
  .navbar {
    padding: 0 10px;
    gap: 6px;
    height: 54px;
  }

  /* Hide these cluttering elements on mobile */
  .nav-quicklinks,
  .nav-trend-pill,
  .nav-earn-chip {
    display: none !important;
  }

  /* Voice search: visible on mobile */
  .nav-voice-btn {
    display: flex !important;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }

  /* Search bar: takes most space */
  .nav-search {
    flex: 1;
    margin: 0 4px;
  }

  .nav-search input {
    height: 36px;
    font-size: 13px;
    border-radius: 18px;
  }

  /* Shrink action buttons */
  .nav-create-btn {
    padding: 7px 10px;
    font-size: 12px;
  }

  .nav-create-btn .create-label {
    display: none;
  }

  /* Notif bell sizing */
  .nav-notif-btn {
    width: 34px;
    height: 34px;
  }

  /* Avatar sizing */
  .nav-avatar {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 380px) {
  /* Ultra small: hide voice search, shrink logo */
  .nav-voice-btn {
    display: none !important;
  }
  .logo span {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   [2] BOTTOM NAV: bn-item CANONICAL STYLES
   Used in header.php .mobile-bottom-nav (not mbn-item)
   ═══════════════════════════════════════════════════════════════ */

/* The header.php uses .bn-item inside .mobile-bottom-nav-inner
   Many CSS files only define .mbn-item — this fills the gap */
.mobile-bottom-nav .bn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: var(--text2, #A09080);
  font-size: 9px;
  font-weight: 700;
  transition: color .15s;
  position: relative;
  min-width: 0;
  -webkit-tap-highlight-color: transparent;
  padding: 4px 0;
}

.mobile-bottom-nav .bn-item i {
  font-size: 20px;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}

.mobile-bottom-nav .bn-item span {
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.mobile-bottom-nav .bn-item.active,
.mobile-bottom-nav .bn-item:active {
  color: var(--accent, #FF6B00);
}

.mobile-bottom-nav .bn-item.active i {
  transform: scale(1.12);
}

/* Active indicator dot */
.mobile-bottom-nav .bn-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: var(--accent);
  border-radius: 0 0 2px 2px;
}

/* ═══════════════════════════════════════════════════════════════
   [3] CREATE SHEET — STABLE Z-INDEX + SMOOTH
   ═══════════════════════════════════════════════════════════════ */

/* The sheet uses inline display:none → display:flex
   Ensure it never gets destroyed by other overlays */
#ltCreateSheet {
  z-index: 9999 !important;
  /* Prevent click-through during animation */
  pointer-events: auto;
}

/* Inner sheet panel */
#ltCreateSheet > div {
  background: var(--bg2, #111);
  border-radius: 24px 24px 0 0;
  border-top: 1px solid var(--border);
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  /* Slide-up animation */
  animation: ltSheetSlideUp .28s cubic-bezier(.34,1,.64,1) both;
  will-change: transform;
}

@keyframes ltSheetSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Option buttons: bigger tap targets */
.lt-create-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 12px;
  background: var(--bg3, #1A1A1A);
  border-radius: 16px;
  text-decoration: none;
  color: var(--text, #F5F0E8);
  border: 2px solid transparent;
  transition: border-color .15s, background .15s, transform .12s;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}

.lt-create-opt:hover,
.lt-create-opt:active {
  border-color: var(--accent, #FF671F);
  background: rgba(255,103,31,.08);
  transform: scale(.97);
}

.lt-create-opt > span:first-child {
  font-size: 32px;
}

.lt-create-opt > span:nth-child(2) {
  font-weight: 800;
  font-size: 13px;
}

.lt-create-opt > span:last-child {
  font-size: 10px;
  color: var(--text2);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   [4] SHORTS — CLEAN SHARE OVERLAY (NO FLOATING BUTTONS)
   ═══════════════════════════════════════════════════════════════ */

/* Share overlay backdrop */
#shareOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 298;
  display: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Share sheet: smooth slide from bottom */
.share-sheet {
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(0) !important;
  width: min(480px, 100vw) !important;
  background: var(--bg2, #111) !important;
  border-radius: 24px 24px 0 0 !important;
  z-index: 300 !important;
  padding: 20px 16px !important;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  box-shadow: 0 -12px 48px rgba(0,0,0,.8) !important;
  /* Slide animation */
  transition: transform .28s cubic-bezier(.34,1,.64,1), opacity .2s !important;
}

.share-sheet.hidden {
  transform: translateX(-50%) translateY(110%) !important;
  pointer-events: none;
}

/* Share buttons grid */
.share-sheet-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.share-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--bg3, #1A1A1A);
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 14px 8px;
  transition: background .15s, transform .12s;
  -webkit-tap-highlight-color: transparent;
}

.share-btn:hover,
.share-btn:active {
  background: var(--bg4, #222);
  transform: scale(.95);
}

.share-btn i {
  font-size: 26px;
}

/* Comment drawer backdrop */
#drawerOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 199;
  display: none;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ═══════════════════════════════════════════════════════════════
   [5] SHORTS — DEFINITIVE DUAL NAV FIX
   ═══════════════════════════════════════════════════════════════ */

/* On shorts page, suppress the header mobile-bottom-nav
   (shorts.php has its OWN bottom nav via renderFooter) */
body.shorts-page .mobile-bottom-nav {
  display: none !important;
}

/* Shorts bottom nav: semi-transparent over video */
body.shorts-page .bottom-nav {
  position: fixed !important;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(0,0,0,.7) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,.1) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

body.shorts-page .bottom-nav .bn-item {
  color: rgba(255,255,255,.65) !important;
}

body.shorts-page .bottom-nav .bn-item.active,
body.shorts-page .bottom-nav .bn-item:active {
  color: #fff !important;
}

/* Shorts feed: clear of bottom nav */
body.shorts-page .shorts-shell {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Shorts action sidebar: clear of safe area */
.short-actions {
  bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Short info: clear of bottom elements */
.short-info {
  bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ═══════════════════════════════════════════════════════════════
   [6] CONTENT DENSITY — BETTER CARDS
   ═══════════════════════════════════════════════════════════════ */

/* Video grid: better mobile spacing */
.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

@media (max-width: 640px) {
  .content-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

@media (max-width: 360px) {
  .content-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Video card: consistent sizing */
.yt-card {
  background: var(--bg2, #111);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .18s, box-shadow .18s;
  cursor: pointer;
  display: block;
  text-decoration: none;
  border: 1px solid var(--border);
}

.yt-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,.4);
}

.yt-card:active {
  transform: scale(.98);
}

/* Thumbnail: fixed aspect ratio */
.yt-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: var(--bg3);
  display: block;
}

/* Card body */
.yt-card-body {
  padding: 10px 12px 12px;
}

.yt-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 5px;
  line-height: 1.4;
}

.yt-meta {
  font-size: 11px;
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

/* Channel avatar row */
.yt-channel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.yt-channel-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  overflow: hidden;
  object-fit: cover;
}

.yt-channel-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════════
   [7] PROFILE DROPDOWN — MOBILE FIX
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .profile-dropdown {
    position: fixed !important;
    top: auto !important;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    min-width: unset !important;
    max-height: 78vh;
    overflow-y: auto;
    border-radius: 20px !important;
    z-index: 1500 !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* Notification panel: prevent it from going off-screen */
@media (max-width: 768px) {
  .notif-panel {
    position: fixed !important;
    top: 60px !important;
    right: 8px !important;
    left: 8px !important;
    width: auto !important;
    max-height: 75vh;
    overflow-y: auto;
    z-index: 1500 !important;
    border-radius: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   [8] CREATOR STUDIO NAV — VISIBLE & CLEAR
   ═══════════════════════════════════════════════════════════════ */

/* Profile dropdown creator section: highlight */
.pd-section-title {
  padding: 8px 16px 4px;
  font-size: 10px;
  font-weight: 800;
  color: var(--text3, #604030);
  text-transform: uppercase;
  letter-spacing: .7px;
}

/* Creator studio link: accent color highlight */
.pd-item[href*="lokstudio"] {
  color: var(--accent) !important;
  font-weight: 800 !important;
}

.pd-item[href*="lokstudio"] i {
  color: var(--accent) !important;
}

/* ═══════════════════════════════════════════════════════════════
   [9] ADMIN PANEL — LOADING STABILITY
   ═══════════════════════════════════════════════════════════════ */

/* Prevent admin widgets from flash-of-broken-layout */
.admin-widget-loading {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text2);
  font-size: 13px;
}

.admin-widget-error {
  background: rgba(244,67,54,.08);
  border: 1px solid rgba(244,67,54,.2);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  color: #ef4444;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   [10] ONBOARDING / EMPTY STATES — ENGAGING
   ═══════════════════════════════════════════════════════════════ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  gap: 12px;
}

.empty-state-icon {
  font-size: 56px;
  opacity: .6;
}

.empty-state-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}

.empty-state-msg {
  font-size: 14px;
  color: var(--text2);
  max-width: 280px;
  line-height: 1.5;
}

.empty-state-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-g, linear-gradient(135deg,#FF6B00,#FF9800));
  color: #fff;
  padding: 10px 22px;
  border-radius: 22px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  margin-top: 4px;
  transition: opacity .15s, transform .15s;
}

.empty-state-btn:hover {
  opacity: .88;
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════
   [11] TRENDING / DISCOVERY WIDGETS
   ═══════════════════════════════════════════════════════════════ */

.discovery-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 0 8px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.discovery-row::-webkit-scrollbar { display: none; }

.creator-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 72px;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.creator-chip-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  overflow: hidden;
  border: 2.5px solid var(--border);
  transition: border-color .15s, transform .15s;
}

.creator-chip:hover .creator-chip-avatar,
.creator-chip:active .creator-chip-avatar {
  border-color: var(--accent);
  transform: scale(1.05);
}

.creator-chip-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hashtag pills */
.hashtag-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.hashtag-pill:hover,
.hashtag-pill:active {
  background: rgba(255,103,31,.1);
  border-color: var(--accent);
  color: var(--accent);
}

/* Section headings */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 10px;
}

.section-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.section-more {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════
   [12] SAFE AREA — ALL EDGES
   ═══════════════════════════════════════════════════════════════ */

@supports (padding-top: env(safe-area-inset-top)) {
  /* Navbar: clear status bar on iOS notch */
  @media (display-mode: standalone) {
    .navbar {
      padding-top: env(safe-area-inset-top, 0px);
      height: calc(56px + env(safe-area-inset-top, 0px));
    }
    /* Compensate body top for taller navbar */
    .lk-shell, .page-wrapper {
      padding-top: 0;
    }
  }

  /* Bottom nav: clear home indicator on iPhone */
  .mobile-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Body: clear both navs */
  body:not(.shorts-page) {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
}

/* ═══════════════════════════════════════════════════════════════
   [13] SHORTS IMMERSION — PERFECT OVERLAY CLEANUP
   ═══════════════════════════════════════════════════════════════ */

/* When share sheet is open: prevent shorts from being interacted with */
body.share-sheet-open .shorts-feed {
  pointer-events: none;
}

/* Ensure no orphaned overlays */
.share-sheet.hidden + * {
  pointer-events: auto;
}

/* Short action buttons: better tap targets */
.short-action-btn {
  width: 44px !important;
  height: 44px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.35);
  border-radius: 50%;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}

.short-action-btn:active {
  transform: scale(.88);
  background: rgba(0,0,0,.55);
}

/* ═══════════════════════════════════════════════════════════════
   [14] UPLOAD PAGE — MOBILE FULLSCREEN FIX
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .upload-shell {
    padding: 16px 12px calc(80px + env(safe-area-inset-bottom, 0px));
  }

  .upload-zone {
    border-radius: 16px;
    padding: 36px 16px;
  }

  /* iOS PWA file input: must remain opacity:0 but NOT display:none */
  .upload-zone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    /* Never display:none — breaks iOS PWA file picker */
  }

  .upload-form-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   [15] GLOBAL SMOOTHNESS + POLISH
   ═══════════════════════════════════════════════════════════════ */

/* Smooth scrolling everywhere */
* {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* No text selection on interactive elements */
.bn-item, .mbn-item, .bn-create-btn, .lt-create-opt,
.short-action-btn, .share-btn, .nav-notif-btn, .nav-avatar {
  -webkit-user-select: none;
  user-select: none;
}

/* Focus outlines: visible but stylized */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Buttons: remove 300ms tap delay on Android */
button, a, [role="button"] {
  touch-action: manipulation;
}

/* Prevent horizontal scroll on mobile */
body {
  overflow-x: hidden;
}