/* ============================================
   NEUROFLIX — DESIGN SYSTEM
   Cinematic entertainment UI — Blue accent
   No shadows, no gradients — clean flat 2026
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ---- TOKENS ---- */
:root {
  --bg-base: #0a0a0f;
  --bg-surface: #111118;
  --bg-card: #16161e;
  --bg-elevated: #1e1e28;
  --bg-hover: #25253a;
  --bg-input: #16161e;
  --bg-overlay: rgba(0,0,0,0.85);

  --accent: #4d7cfe;
  --accent-hover: #6b93ff;
  --accent-soft: rgba(77,124,254,0.12);
  --accent-muted: rgba(77,124,254,0.06);

  --text-1: #eef0f6;
  --text-2: #8b8fa3;
  --text-3: #53566b;
  --text-inv: #0a0a0f;

  --border: rgba(255,255,255,0.06);
  --border-m: rgba(255,255,255,0.1);

  --green: #34d399;
  --orange: #fbbf24;
  --red: #f87171;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;
  --s12: 48px; --s16: 64px;

  --r-xs: 6px; --r-sm: 10px; --r-md: 14px;
  --r-lg: 18px; --r-xl: 24px; --r-full: 9999px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(0.4,0,0.2,1);
  --spring: cubic-bezier(0.34,1.56,0.64,1);
  --tr-f: 120ms var(--ease);
  --tr: 200ms var(--ease);
  --tr-s: 300ms var(--ease);

  --sidebar-w: 230px;
  --bnav-h: 62px;
}

/* ---- LIGHT THEME ---- */
[data-theme="light"] {
  --bg-base: #f4f5f9;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-elevated: #eef0f4;
  --bg-hover: #e2e4ec;
  --bg-input: #eef0f4;
  --bg-overlay: rgba(0,0,0,0.45);
  --text-1: #111118;
  --text-2: #5a5d72;
  --text-3: #9496a8;
  --text-inv: #f4f5f9;
  --border: rgba(0,0,0,0.05);
  --border-m: rgba(0,0,0,0.08);
}

/* ---- RESET ---- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth}
body{font-family:var(--font);font-size:15px;color:var(--text-1);background:var(--bg-base);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;min-height:100dvh;transition:background .4s var(--ease),color .3s var(--ease)}
body.no-scroll{overflow:hidden}
#app{min-height:100vh;min-height:100dvh}
a{color:var(--accent);text-decoration:none;transition:color var(--tr-f)}
a:hover{color:var(--accent-hover)}
img,video{max-width:100%;display:block}
ul,ol{list-style:none}
button{font-family:var(--font);cursor:pointer;border:none;background:none;font-size:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
input,select,textarea{font-family:var(--font);font-size:15px;color:var(--text-1);background:var(--bg-input);border:1.5px solid var(--border);border-radius:var(--r-md);padding:var(--s3) var(--s4);outline:none;width:100%;transition:border var(--tr-f),background var(--tr-f)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);background:var(--bg-elevated)}
input::placeholder,textarea::placeholder{color:var(--text-3)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238b8fa3'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}

/* Scrollbar */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-m);border-radius:var(--r-full)}
::selection{background:var(--accent);color:#fff}

/* ============================================
   LAYOUT — APP SHELL
   ============================================ */
.app-shell{display:flex;min-height:100vh;min-height:100dvh;overflow-x:hidden;}

/* ---- SIDEBAR (Desktop) ---- */
.sidebar{
  width:var(--sidebar-w);height:100vh;position:fixed;left:0;top:0;z-index:100;
  background:var(--bg-surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:var(--s6) var(--s4);
  transition:transform .35s var(--ease);overflow-y:auto;
}
.sidebar .logo-row{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s10);padding:0 var(--s2)}
.sidebar .logo-row img{width:36px;height:36px;border-radius:var(--r-md);object-fit:cover}
.sidebar .logo-row h2{font-size:20px;font-weight:800;letter-spacing:-0.5px;color:var(--text-1)}
.sidebar .logo-row h2 span{color:var(--accent)}

.sidebar nav{flex:1}
.sidebar nav ul li{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s4);margin-bottom:var(--s1);
  border-radius:var(--r-full);cursor:pointer;
  color:var(--text-2);font-weight:500;font-size:14px;
  transition:all .2s var(--ease);position:relative;
}
.sidebar nav ul li i{font-size:18px;width:22px;text-align:center;transition:transform .2s var(--spring)}
.sidebar nav ul li:hover{background:var(--bg-hover);color:var(--text-1)}
.sidebar nav ul li:hover i{transform:scale(1.15)}
.sidebar nav ul li.active{background:var(--accent-soft);color:var(--accent);font-weight:600}

.sidebar-footer{border-top:1px solid var(--border);padding-top:var(--s4);margin-top:var(--s4)}
.sidebar-footer .user-card{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3);border-radius:var(--r-lg);margin-bottom:var(--s3);
  background:var(--bg-card);border:1px solid var(--border);
}
.sidebar-footer .user-card .avatar{
  width:36px;height:36px;border-radius:var(--r-full);
  background:var(--accent);color:#fff;display:flex;
  align-items:center;justify-content:center;font-weight:700;font-size:14px;
  flex-shrink:0;
}
.sidebar-footer .user-card .user-info{overflow:hidden}
.sidebar-footer .user-card .user-info p{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-footer .user-card .user-info small{font-size:11px;color:var(--text-3)}

.sidebar-footer .logout-btn{
  display:flex;align-items:center;justify-content:center;gap:var(--s2);
  width:100%;padding:var(--s3);border-radius:var(--r-full);
  color:var(--red);font-size:13px;font-weight:500;
  border:1px solid rgba(248,113,113,0.12);
  transition:all .2s var(--ease);
}
.sidebar-footer .logout-btn:hover{background:rgba(248,113,113,0.06);border-color:rgba(248,113,113,0.25)}

/* ---- MAIN CONTENT ---- */
.main-area{
  flex:1;margin-left:var(--sidebar-w);min-height:100vh;
  display:flex;flex-direction:column;max-width:100vw;
}
.page-content{
  flex:1;padding:var(--s6) var(--s8);max-width:1300px;
  width:100%;margin:0 auto;
}

/* ---- TOP BAR ---- */
.topbar{
  position:sticky;top:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s4) var(--s8);
  background:var(--bg-base);border-bottom:1px solid var(--border);
  min-height:64px;
}
.topbar h1{font-size:20px;font-weight:700;color:var(--text-1)}
.topbar .mobile-logo{display:none;align-items:center;gap:var(--s2);font-weight:800;font-size:20px;letter-spacing:-0.5px;}
.topbar .mobile-logo img{width:32px;height:32px;border-radius:var(--r-sm);object-fit:cover;}
.topbar .mobile-logo span{color:var(--accent);}
.topbar .topbar-actions{display:flex;align-items:center;gap:var(--s3)}
.topbar .hamburger{
  display:none;width:40px;height:40px;border-radius:var(--r-full);
  background:var(--bg-card);color:var(--text-1);font-size:18px;
  align-items:center;justify-content:center;border:1px solid var(--border);
  transition:all .2s var(--ease);
}
.topbar .hamburger:active{transform:scale(0.92)}

/* ---- BOTTOM NAV (Mobile) ---- */
.bottom-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:90;
  background:var(--bg-surface);border-top:1px solid var(--border);
  padding:var(--s1) 0 calc(var(--s1) + env(safe-area-inset-bottom,0px));
}
.bottom-nav ul{display:flex;justify-content:space-around;align-items:center}
.bottom-nav ul li{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:var(--s2) var(--s3);border-radius:var(--r-lg);
  cursor:pointer;color:var(--text-3);font-size:10px;font-weight:500;
  transition:all .2s var(--ease);min-width:60px;
  -webkit-tap-highlight-color:transparent;
}
.bottom-nav ul li i{font-size:20px;transition:transform .25s var(--spring)}
.bottom-nav ul li.active{color:var(--accent)}
.bottom-nav ul li.active i{transform:scale(1.15) translateY(-1px)}
.bottom-nav ul li:active{transform:scale(0.9)}

/* ---- MOBILE OVERLAY ---- */
.sidebar-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:99;
  display:none;opacity:0;transition:opacity .3s var(--ease);
}
.sidebar-overlay.show{display:block;opacity:1}

/* ============================================
   COMPONENTS
   ============================================ */

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:var(--s3) var(--s5);border-radius:var(--r-full);
  font-weight:600;font-size:14px;
  transition:all .2s var(--ease);white-space:nowrap;
  position:relative;overflow:hidden;
}
.btn:active{transform:scale(0.96)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--text-1);border:1.5px solid var(--border-m)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-muted)}
.btn-white{background:#fff;color:#000}
.btn-white:hover{background:#e0e0e0;transform:translateY(-1px)}
.btn-ghost{color:var(--text-2);padding:var(--s2) var(--s3);border-radius:var(--r-full)}
.btn-ghost:hover{color:var(--text-1);background:var(--bg-hover)}
.btn-icon{
  width:40px;height:40px;border-radius:var(--r-full);padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-2);transition:all .2s var(--ease);
}
.btn-icon:hover{background:var(--bg-hover);color:var(--text-1)}
.btn-icon:active{transform:scale(0.88)}
.btn-block{width:100%}
.btn-lg{padding:var(--s4) var(--s6);font-size:15px}
.btn[disabled]{opacity:0.5;pointer-events:none}

.btn-clear {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s4);
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3);
  background: transparent;
  border: 1px solid var(--border);
  transition: all .2s var(--ease);
}
.btn-clear:hover {
  background: rgba(248, 113, 113, 0.08);
  color: var(--red);
  border-color: rgba(248, 113, 113, 0.2);
  transform: translateY(-1px);
}
.btn-clear i { font-size: 14px; }

/* ---- Video Card ---- */
.video-card{
  background:var(--bg-card);border-radius:var(--r-lg);
  overflow:hidden;cursor:pointer;
  border:1px solid var(--border);
  transition:all .25s var(--ease);position:relative;
}
.video-card:hover{transform:translateY(-4px) scale(1.02);border-color:var(--accent)}
.video-card:active{transform:scale(0.98)}
.video-card .thumb-wrap{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-elevated)}
.video-card .thumb-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.video-card:hover .thumb-wrap img{transform:scale(1.06)}
.video-card .play-overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.25);opacity:0;transition:opacity .25s var(--ease);
}
.video-card:hover .play-overlay{opacity:1}
.video-card .play-circle{
  width:48px;height:48px;border-radius:var(--r-full);
  background:var(--accent);color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:18px;
  transform:scale(0.7);transition:transform .3s var(--spring);
}
.video-card:hover .play-circle{transform:scale(1)}
.video-card .card-meta{padding:var(--s3) var(--s4)}
.video-card .card-meta .v-title{
  font-size:14px;font-weight:600;color:var(--text-1);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  line-height:1.35;margin-bottom:var(--s1);
}
.video-card .card-meta .v-channel{font-size:12px;color:var(--text-3);font-weight:400}

/* Progress bar on continue watching */
.video-card .progress-bar{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,0.1)}
.video-card .progress-bar .progress-fill{height:100%;background:var(--accent);border-radius:0 var(--r-xs) 0 0}

/* ---- Video Player Overlay ---- */
.player-overlay{
  position:fixed;inset:0;z-index:300;background:var(--bg-overlay);
  display:none;align-items:center;justify-content:center;
  padding:var(--s8);
}
.player-overlay.show{display:flex;animation:fadeIn .25s var(--ease)}
.player-overlay .player-wrap{
  width:100%;max-width:960px;aspect-ratio:16/9;
  background:#000;border-radius:var(--r-xl);overflow:hidden;
  position:relative;animation:scaleIn .3s var(--spring);
}
.player-overlay .player-wrap iframe{width:100%;height:100%;border:none}
.player-overlay .close-player{
  position:absolute;top:var(--s4);right:var(--s4);z-index:5;
  width:40px;height:40px;border-radius:var(--r-full);
  background:rgba(0,0,0,0.6);color:#fff;font-size:18px;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s var(--ease);backdrop-filter:blur(4px);
}
.player-overlay .close-player:hover{background:var(--accent);transform:scale(1.1)}
.player-overlay .close-player:active{transform:scale(0.9)}

/* ---- Details Modal ---- */
.details-modal {
  position:fixed;inset:0;background:rgba(0,0,0,0.8);z-index:250;
  display:flex;align-items:center;justify-content:center;padding:var(--s4);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.details-modal.show { opacity:1;pointer-events:auto; }
.details-card {
  width:100%;max-width:640px;background:var(--bg-surface);
  border-radius:var(--r-xl);overflow:hidden;
  transform:scale(0.95) translateY(10px);transition:transform .35s var(--spring);
  border:1px solid var(--border);position:relative;
}
.details-modal.show .details-card { transform:scale(1) translateY(0); }
.details-card .d-thumb { position:relative; aspect-ratio:16/9; background:#000; overflow:hidden;}
.details-card .d-thumb iframe { position:absolute;inset:-20%;width:140%;height:140%;pointer-events:none;opacity:0.4; filter:blur(4px) }
.details-card .d-thumb img { width:100%;height:100%;object-fit:cover; z-index:2; position:relative; }
.details-card .d-close {
  position:absolute;top:var(--s4);right:var(--s4);z-index:5;
  width:36px;height:36px;border-radius:var(--r-full);
  background:rgba(0,0,0,0.6);color:#fff;display:flex;
  align-items:center;justify-content:center;
  backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,0.1);cursor:pointer;
}
.details-card .d-close:hover { background:var(--bg-hover) }
.details-card .d-content { padding:var(--s6); position:relative; }
.details-card .d-title { font-size:22px;font-weight:800;color:var(--text-1);margin-bottom:var(--s2);line-height:1.2; }
.details-card .d-meta { display:flex;gap:var(--s3);align-items:center;margin-bottom:var(--s5);font-size:13px;color:var(--text-3); }
.details-card .d-channel { color:var(--text-2);font-weight:600;display:flex;align-items:center;gap:6px;}
.details-card .d-channel img { width:20px;height:20px;border-radius:var(--r-full); }
.details-card .d-actions { display:flex;gap:var(--s3); }

/* ---- Cinematic Hero Banner ---- */
.hero{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  margin-bottom:var(--s8);height:60vh;min-height:380px;max-height:550px;
  display:flex;align-items:flex-end;
  background:var(--bg-elevated);border:1px solid rgba(255,255,255,0.05);
}
.hero .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.4;transition:opacity .5s var(--ease)}
.hero .hero-iframe { position:absolute;inset:-20%;width:140%;height:140%;pointer-events:none;opacity:0.5; } 
.hero .hero-gradient{position:absolute;inset:0;background:linear-gradient(to top, var(--bg-surface) 0%, rgba(17,17,24,0.6) 40%, transparent 100%); z-index:1;}
.hero .hero-content{
  position:relative;z-index:2;padding:var(--s8);width:100%;max-width:800px;
  padding-bottom:var(--s10);
  animation: slideUp 0.6s var(--spring);
}
.hero .hero-badge { display:inline-block; background:rgba(255,255,255,0.1); color:#fff; font-size:11px; font-weight:700; padding:4px 8px; border-radius:var(--r-sm); letter-spacing:1px; margin-bottom:var(--s3); backdrop-filter:blur(4px); }
.hero .hero-content h2{font-size:clamp(28px,5vw,52px);font-weight:900;line-height:1.1;margin-bottom:var(--s3);color:#fff; text-shadow:0 2px 10px rgba(0,0,0,0.6);}
.hero .hero-content p{
  font-size:16px;color:rgba(255,255,255,0.85);margin-bottom:var(--s5);line-height:1.5; 
  text-shadow:0 1px 4px rgba(0,0,0,0.5); 
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.hero .hero-actions{display:flex;gap:var(--s3);flex-wrap:wrap}

/* ---- Content Rows (Horizontal Scrolling fix) ---- */
.content-row{margin-bottom:var(--s8); width:100%;}
.content-row .row-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s4)}
.content-row .row-header h3{font-size:18px;font-weight:700;color:var(--text-1)}
.content-row .row-header h3 span{color:var(--accent)}
.content-row .row-header .see-all{font-size:13px;color:var(--text-2);font-weight:500;cursor:pointer;transition:color var(--tr-f);border-radius:var(--r-full);padding:var(--s1) var(--s3)}
.content-row .row-header .see-all:hover{color:var(--accent);background:var(--accent-muted)}

.video-rail-wrapper {
  margin-left: calc(var(--s8) * -1); margin-right: calc(var(--s8) * -1); /* bleed edges for mobile*/
  padding-left: var(--s8); padding-right: var(--s8);
  width: calc(100% + (var(--s8) * 2));
}

.video-rail{
  display:flex;gap:var(--s4);overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding-bottom:var(--s4); 
  scrollbar-width:none; /* Firefox */
}
.video-rail::-webkit-scrollbar{display:none} /* Chrome */
.video-rail .video-card{min-width:220px;max-width:260px;scroll-snap-align:start;flex-shrink:0}

/* Standard grid */
.video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:var(--s5);
}

/* ---- Search Bar ---- */
.search-bar{
  display:flex;gap:var(--s3);margin-bottom:var(--s6);
  max-width:600px;
}
.search-bar .search-input-wrap{
  flex:1;position:relative;
}
.search-bar .search-input-wrap i{
  position:absolute;left:var(--s4);top:50%;transform:translateY(-50%);
  color:var(--text-3);font-size:16px;
}
.search-bar .search-input-wrap input{padding-left:42px;border-radius:var(--r-full);height:46px}
.search-bar .btn{height:46px;border-radius:var(--r-full);padding:0 var(--s6)}

/* ---- Category Chips ---- */
.category-chips{
  display:flex;flex-wrap:nowrap;gap:var(--s2);margin-bottom:var(--s6);
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding-bottom:var(--s2);
}
.category-chips::-webkit-scrollbar{display:none;}
.chip{
  display:inline-flex;align-items:center;gap:var(--s2);
  padding:var(--s2) var(--s4);border-radius:var(--r-full);
  background:var(--bg-card);border:1px solid var(--border);
  font-size:13px;font-weight:500;color:var(--text-2);
  cursor:pointer;transition:all .2s var(--ease);white-space:nowrap;flex-shrink:0;
}
.chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-muted)}
.chip:active{transform:scale(0.95)}
.chip.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.chip i{font-size:14px}

/* ---- Upload, Profile, Auth Form ---- */
.upload-form{max-width:520px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s8);}
.upload-form .upload-icon{width:60px;height:60px;border-radius:var(--r-full);background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto var(--s5);transition:transform .3s var(--spring);}
.upload-form:hover .upload-icon{transform:scale(1.08)}
.upload-form h3{text-align:center;font-size:18px;font-weight:700;margin-bottom:var(--s2)}
.upload-form .upload-desc{text-align:center;color:var(--text-2);font-size:13px;margin-bottom:var(--s6)}

.profile-card{max-width:520px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s8);}
.profile-header{display:flex;align-items:center;gap:var(--s5);margin-bottom:var(--s8);padding-bottom:var(--s6);border-bottom:1px solid var(--border)}
.profile-avatar{width:64px;height:64px;border-radius:var(--r-full);background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;flex-shrink:0;}
.profile-info h3{font-size:18px;font-weight:700;margin-bottom:var(--s1)}
.profile-info p{font-size:13px;color:var(--text-3)}

.form-group{margin-bottom:var(--s4)}
.form-group label{display:block;font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:var(--s2)}

/* ---- Settings ---- */
.settings-group{margin-bottom:var(--s6)}
.settings-group h4{font-size:12px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:1px;margin-bottom:var(--s3)}
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:var(--s4);border-radius:var(--r-lg);background:var(--bg-card);border:1px solid var(--border);margin-bottom:var(--s2);transition:background .15s var(--ease);}
.setting-row:hover{background:var(--bg-elevated)}
.setting-row .setting-label{font-size:14px;font-weight:500;color:var(--text-1)}
.setting-row .setting-desc{font-size:12px;color:var(--text-3);margin-top:2px}

/* Toggle Switch */
.toggle{position:relative;width:44px;height:24px;background:var(--bg-hover);border-radius:var(--r-full);cursor:pointer;transition:background .25s var(--ease);flex-shrink:0;}
.toggle.on{background:var(--accent)}
.toggle::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:var(--r-full);background:#fff;transition:transform .25s var(--spring);}
.toggle.on::after{transform:translateX(20px)}
.toggle:active{transform:scale(0.95)}

/* ---- Admin ---- */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s4);margin-bottom:var(--s8)}
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s5);transition:all .2s var(--ease);}
.stat-card:hover{border-color:var(--border-m);transform:translateY(-2px)}
.stat-card .stat-icon{width:40px;height:40px;border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:var(--s3);}
.stat-card .stat-icon.blue{background:var(--accent-soft);color:var(--accent)}
.stat-card .stat-icon.green{background:rgba(52,211,153,0.12);color:var(--green)}
.stat-card .stat-icon.orange{background:rgba(251,191,36,0.12);color:var(--orange)}
.stat-card .stat-icon.red{background:rgba(248,113,113,0.12);color:var(--red)}
.stat-card .stat-number{font-size:28px;font-weight:800;margin-bottom:var(--s1)}
.stat-card .stat-label{font-size:13px;color:var(--text-3)}

/* ---- Auth Pages ---- */
.auth-page{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:var(--s6);background:var(--bg-base);}
.auth-card{width:100%;max-width:380px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s8);animation:slideUp .4s var(--ease);}
.auth-card .auth-logo{display:flex;flex-direction:column;align-items:center;gap:var(--s3);margin-bottom:var(--s8)}
.auth-card .auth-logo img{width:52px;height:52px;border-radius:var(--r-lg);object-fit:cover}
.auth-card .auth-logo h1{font-size:24px;font-weight:800;letter-spacing:-0.5px}
.auth-card .auth-logo h1 span{color:var(--accent)}
.auth-card .form-group input{height:46px;border-radius:var(--r-md)}
.auth-card .btn{height:46px;margin-top:var(--s2)}
.auth-card .auth-footer{text-align:center;margin-top:var(--s5);font-size:13px;color:var(--text-3)}
.auth-card .auth-footer a{color:var(--accent);font-weight:600}

/* ---- Splash Screen ---- */
.splash-screen{position:fixed;inset:0;z-index:400;background:var(--bg-base);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s5);}
.splash-screen .splash-logo{width:72px;height:72px;border-radius:var(--r-xl);object-fit:cover;animation:splashPulse 1.8s var(--ease) infinite}
.splash-screen h1{font-size:30px;font-weight:900;letter-spacing:-1px;animation:fadeIn .6s var(--ease) .2s both}
.splash-screen h1 span{color:var(--accent)}
.splash-screen .splash-bar{width:140px;height:3px;background:var(--bg-elevated);border-radius:var(--r-full);overflow:hidden;animation:fadeIn .5s var(--ease) .4s both}
.splash-screen .splash-bar-fill{height:100%;background:var(--accent);border-radius:var(--r-full);animation:splashLoad 2s var(--ease) forwards}
.splash-screen .splash-text{font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:2px;animation:fadeIn .5s var(--ease) .6s both}

/* ---- Animations ---- */
@keyframes splashPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes splashLoad{0%{width:0}60%{width:65%}100%{width:100%}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.92)}to{opacity:1;transform:scale(1)}}
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.page-enter{animation:pageIn .35s var(--ease) forwards}

/* ---- Toast ---- */
.toast-container{position:fixed;top:var(--s5);right:var(--s5);z-index:900;display:flex;flex-direction:column;gap:var(--s2)}
.toast{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s5);border-radius:var(--r-full);background:var(--bg-elevated);border:1px solid var(--border);font-size:13px;font-weight:500;animation:slideIn .3s var(--spring);min-width:240px;max-width:360px;}
.toast.success{border-color:rgba(52,211,153,0.25)}
.toast.error{border-color:rgba(248,113,113,0.25)}
.toast.info{border-color:rgba(77,124,254,0.25)}
.toast.warn{border-color:rgba(251,191,36,0.3)}
.toast i{font-size:16px;flex-shrink:0}
.toast.success i{color:var(--green)}
.toast.error i{color:var(--red)}
.toast.info i{color:var(--accent)}
.toast.warn i{color:var(--orange)}
.toast .toast-msg{flex:1}
.toast .toast-close{color:var(--text-3);cursor:pointer;font-size:14px;padding:var(--s1);border-radius:var(--r-full);transition:all var(--tr-f)}
.toast .toast-close:hover{color:var(--text-1);background:var(--bg-hover)}
.toast.exit{animation:slideOut .25s var(--ease) forwards}
@keyframes slideIn{from{opacity:0;transform:translateX(30px) scale(0.95)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes slideOut{to{opacity:0;transform:translateX(30px) scale(0.95)}}

/* ---- Skeleton & Empty ---- */
.skeleton{background:linear-gradient(90deg,var(--bg-card) 25%,var(--bg-elevated) 50%,var(--bg-card) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--r-md);}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton-card{height:140px;border-radius:var(--r-lg); margin-bottom:var(--s2)}
.skeleton-text{height:12px;border-radius:var(--r-xs);margin-bottom:var(--s2)}
.skeleton-text.short{width:60%}

.empty-state{text-align:center;padding:var(--s16) var(--s6);color:var(--text-3);width:100%}
.empty-state i{font-size:44px;margin-bottom:var(--s4);opacity:0.2}
.empty-state h3{font-size:16px;font-weight:600;color:var(--text-2);margin-bottom:var(--s2)}

/* ---- Section headers ---- */
.section-header{margin-bottom:var(--s6)}
.section-header h2{font-size:24px;font-weight:800;margin-bottom:var(--s2)}
.section-header p{font-size:14px;color:var(--text-2)}

/* ---- Tabs ---- */
.tabs{display:flex;gap:var(--s1);margin-bottom:var(--s6);border-bottom:1px solid var(--border);padding-bottom:0}
.tab{padding:var(--s3) var(--s5);font-size:14px;font-weight:600;color:var(--text-3);border-bottom:2px solid transparent;cursor:pointer;transition:all .2s var(--ease);margin-bottom:-1px;border-radius:var(--r-sm) var(--r-sm) 0 0;}
.tab:hover{color:var(--text-1);background:var(--bg-hover)}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}

/* ============================================
   RESPONSIVE
   ============================================ */
@media(max-width:900px){
  .sidebar{transform:translateX(-100%);position:fixed;z-index:101;width:260px}
  .sidebar.open{transform:translateX(0)}
  .main-area{margin-left:0; width:100vw; overflow-x:hidden;}
  .topbar .hamburger{display:flex}
  .topbar h1{display:none} /* hide standard page title if logo is showing */
  .topbar .mobile-logo{display:flex}
  .bottom-nav{display:block}
  
  .page-content{padding:var(--s4) var(--s4) calc(var(--s4) + var(--bnav-h) + 20px); width:100vw; overflow-x:hidden;}
  .topbar{padding:var(--s3) var(--s4)}
  
  /* Hero fixes for mobile */
  .hero{min-height:300px; height:auto; border-radius:var(--r-lg)}
  .hero .hero-content{padding:var(--s4); padding-bottom:var(--s6)}
  .hero .hero-content h2{font-size:24px}
  .hero .hero-content p{font-size:13px; -webkit-line-clamp:2;}
  
  /* Rails bleed fix */
  .video-rail-wrapper {
    margin-left: calc(var(--s4) * -1); margin-right: calc(var(--s4) * -1); 
    padding-left: var(--s4); padding-right: var(--s4);
    width: calc(100% + (var(--s4) * 2));
  }
  
  .video-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s3)}
  .video-rail .video-card{min-width:160px;max-width:180px;}
  .search-bar{max-width:100%}
  .upload-form,.profile-card,.auth-card{padding:var(--s5)}
  .stats-grid{grid-template-columns:1fr 1fr}
  
  .toast-container{top:auto;bottom:calc(var(--bnav-h) + var(--s4));left:var(--s4);right:var(--s4)}
  .toast{min-width:auto;border-radius:var(--r-lg)}
}

@media(max-width:480px){
  .video-grid{grid-template-columns:1fr 1fr;gap:var(--s2)}
  .video-card .card-meta{padding:var(--s2)}
  .video-card .card-meta .v-title{font-size:12px; line-height:1.2}
  .video-card .card-meta .v-channel{font-size:10px}
  .video-card .play-circle{width:36px;height:36px;font-size:14px}
  
  .hero{min-height:280px; align-items:flex-end;}
  .hero .hero-content h2{font-size:22px;}
  .hero .btn{padding:var(--s2) var(--s4); font-size:13px}
  
  .stats-grid{grid-template-columns:1fr}
  .section-header h2{font-size:20px}
  .player-overlay{padding:0; background:#000;}
  .player-overlay .player-wrap{width:100vw; max-width:100%; border-radius:0; min-height:100%; display:flex; flex-direction:column; justify-content:center;}
  .player-overlay .close-player{top:var(--s5); right:var(--s4); background:rgba(255,255,255,0.15);}
  
  .details-card { transform: scale(1) translateY(20px); border-radius:var(--r-lg); }
  .details-modal.show .details-card { transform:scale(1) translateY(0); }
  .details-card .d-content { padding:var(--s4); }
  .details-card .d-title { font-size:18px; }
  .details-card .d-meta { font-size:12px; }
}

@media(min-width:1400px){
  .video-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
  .video-rail .video-card{min-width:240px;max-width:280px}
}