/* Vimvi Live — premium UI v2 */
/* Reset & base */
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#0f0f12;color:#f1f1f1;overflow:hidden}

/* Brand */
.logo{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:.5px}
.logo .accent{color:#e91e63}
.logo-img{filter:drop-shadow(0 2px 8px rgba(233,30,99,.35))}
.beta-badge{margin-left:.5rem;padding:.15rem .4rem;border:1px solid #333;border-radius:.4rem;font-size:.65rem;color:#bbb}

/* Buttons */
.btn-ghost,.btn-primary,.btn-danger{
  border:none;border-radius:12px;padding:8px 14px;font-weight:600;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  color:#fff;backdrop-filter:blur(8px)
}
.btn-ghost:hover{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04))}
.btn-primary{background:linear-gradient(180deg,#e91e63,#c2185b)}
.btn-danger{background:linear-gradient(180deg,#e53935,#c62828)}

/* Overlay Header */
.overlay-header{
  position:fixed;inset:0 0 auto 0;z-index:1000;background:rgba(10,10,12,.65);
  display:flex;justify-content:space-between;align-items:center;padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);backdrop-filter:blur(10px)
}
.overlay-header.gradient:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(233,30,99,.18),rgba(0,0,0,0) 70%)
}
.overlay-header .nav-buttons button{margin-left:8px}

/* Side Rail (desktop) */
.side-rail{
  position:fixed;left:12px;top:70px;bottom:70px;width:72px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:10px;display:flex;flex-direction:column;gap:8px;
  z-index:900;backdrop-filter:blur(6px);box-shadow:0 8px 30px rgba(0,0,0,.35)
}
.rail-link{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border-radius:14px;color:#cfcfd6;text-decoration:none;font-size:.78rem;cursor:pointer}
.rail-link i{font-size:1.15rem}
.rail-link:hover,.rail-link.active{background:rgba(255,255,255,.08);color:#fff}

/* Snap Container */
.snap-container{height:100vh;width:100vw;overflow-y:scroll;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;background:#000}

/* Reel base */
.reel{
  position:relative;height:100vh;width:100vw;scroll-snap-align:start;display:flex;justify-content:center;align-items:center;background:#000;overflow:hidden
}
/* Aspect-aware wrapper */
.reel .video-frame{position:absolute;inset:0;margin:auto;display:flex;justify-content:center;align-items:center}
.reel.fit-width .video-frame video{width:100vw;height:auto;max-height:100vh}
.reel.fit-height .video-frame video{height:100vh;width:auto;max-width:100vw}
.reel .bg-blur{position:absolute;inset:0;filter:blur(28px) brightness(.5);transform:scale(1.2);background:#000}
.reel .bg-blur img{width:100%;height:100%;object-fit:cover;opacity:.5}

/* Overlay Info */
.reel .overlay-info{position:absolute;bottom:110px;left:20px;right:20px;z-index:10;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.reel .overlay-info .video-meta{font-size:1.05em;margin-bottom:10px;color:#f1f1f1}
.reel .overlay-info .actions{display:flex;gap:12px}
.reel .overlay-info .actions button{background:rgba(0,0,0,.55);border:none;padding:10px 16px;border-radius:20px;color:#fff;font-size:1.05em;cursor:pointer;transition:background .3s}
.reel .overlay-info .actions button:hover{background:rgba(0,0,0,.8)}

/* Video Controls */
.video-controls{position:absolute;bottom:200px;right:20px;z-index:10}
.video-controls .volumeToggle{background:rgba(0,0,0,.55);border:none;padding:11px;border-radius:50%;color:#fff;font-size:1.25em;cursor:pointer;transition:background .3s}
.video-controls .volumeToggle:hover{background:rgba(0,0,0,.8)}

/* Comments */
.comment-overlay{position:fixed;left:0;right:0;bottom:0;height:70%;background:#111;color:#fff;z-index:1500;display:none;flex-direction:column;border-top-left-radius:16px;border-top-right-radius:16px;animation:slideUp .25s ease-out}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.comment-overlay .comment-header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:#e91e63;color:#fff;font-size:1.1em;border-top-left-radius:16px;border-top-right-radius:16px}
.comment-overlay .comment-header .closeComments{background:transparent;border:none;font-size:1.5em;color:#fff;cursor:pointer}
.comment-overlay .comment-body{flex:1;overflow-y:auto;padding:20px;font-size:1em}
.comment-overlay .comment-body p{margin:12px 0;border-bottom:1px solid #333;padding-bottom:8px}
.comment-overlay .comment-input{display:flex;padding:12px 20px;border-top:1px solid #222;background:#0f0f12}
.comment-overlay .comment-input input{flex:1;padding:10px;border:1px solid #333;border-radius:10px;background:#0a0a0d;color:#fff}
.comment-overlay .comment-input button{margin-left:10px;background:#e91e63;border:none;padding:10px 16px;border-radius:10px;color:#fff;font-size:1em;cursor:pointer;transition:transform .05s}
.comment-overlay .comment-input button:active{transform:scale(.98)}

/* Ad Reel */
.reel.ad{background:#141417;display:flex;justify-content:center;align-items:center;font-size:2em;text-transform:uppercase;color:#e91e63}

/* Modals — dark glass */
.auth-modal-content,.upload-modal-content,.dashboard-modal-content{background:rgba(22,22,26,.95);border:none;border-radius:16px;color:#e5e6ea}
.auth-form .form-control,.auth-form .form-control:focus{background:#0b0b0e;border:1px solid #2a2a2f;color:#fff}
.auth-form .btn{background:#e91e63;border:none}
.upload-modal-content .form-control{background:#0b0b0e;border:1px solid #2a2a2f;color:#fff}
.modal-body{padding:20px}

/* Bottom App Bar */
.app-bar{
  position:fixed;left:0;right:0;bottom:0;height:64px;background:rgba(12,12,14,.8);backdrop-filter:blur(12px);
  border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-around;align-items:center;z-index:1100
}
.appbar-btn{display:flex;flex-direction:column;align-items:center;gap:4px;background:transparent;border:none;color:#d0d1d6;font-size:.75rem}
.appbar-btn i{font-size:1.3rem}
.appbar-btn.cta i{font-size:1.6rem}
.appbar-btn:active{transform:translateY(1px)}

@media (max-width: 1024px){ .side-rail{display:none} }
@media (max-width:768px){
  .overlay-header .nav-buttons .btn-ghost{display:none}
  .reel .overlay-info .video-meta{font-size:1em}
  .comment-overlay{height:78%}
}