/* ========= THEME ========= */
:root{
  --bg:#ffffff;
  --ink:#111111;
  --muted:#6b7280;
  --chip:#eef0f2;
  --chip-text:#111;
  --brand:#ff2b7a;
  --shadow:0 2px 10px rgba(0,0,0,.06);
  --radius:16px;
  --sidebar-w:258px;
  --nav-h:112px; /* will be updated by JS at runtime */
}
[data-theme="dark"]{
  --bg:#0f1112;
  --ink:#f2f3f4;
  --muted:#a3a7ad;
  --chip:#1c1f23;
  --chip-text:#f2f3f4;
  --shadow:0 2px 14px rgba(0,0,0,.45);
  background:#0f1112;
  color:var(--ink);
}

*{ box-sizing:border-box; }
body{
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--ink);
}

/* ========= NAVBAR ========= */
.navbar{ border-bottom:none; background:var(--bg)!important; }
.brand .logo-dot{
  width:30px;height:30px;border-radius:50%;
  background:var(--brand); color:#fff; font-size:18px;
}
.search-wrap{ max-width:640px; width:100%; }
.search-input{
  border:1px solid #e5e7eb; border-right:0; border-radius:999px 0 0 999px;
  padding-left:18px; height:38px; background:var(--bg); color:var(--ink);
}
.search-input:focus{ box-shadow:none; border-color:#d1d5db; }
.search-btn{
  border:1px solid #e5e7eb; border-left:0; background:var(--bg); height:38px;
  border-radius:0 999px 999px 0; color:var(--ink);
}

/* Chips */
.chips{ background:var(--bg); }
.scroller-x{ overflow-x:auto; white-space:nowrap; }
.scroller-x::-webkit-scrollbar{ display:none; }
.chip{
  display:inline-block; margin:20px 6px 0 0; padding:8px 14px;
  background:var(--chip); color:var(--chip-text); border:0; border-radius:999px;
  font-weight:500; font-size:14px;
}

/* ========= SIDEBAR ========= */
.sidebar{
  position:fixed; left:0; width:var(--sidebar-w); background:var(--bg); color: var(--ink);
  height:calc(100vh - var(--nav-h)); top:var(--nav-h);
  overflow:auto; z-index:1040; box-shadow:var(--shadow);
 
}

.sidebar .side-link{
  display:block; padding:12px 20px; color:var(--ink);
  text-decoration:none; font-weight:500; border-radius:10px; margin:2px 8px;
}
.sidebar .side-link:hover{ background:rgba(125,125,125,.08); }
.sidebar hr{ border-color:#e5e7eb }
.side-sec{ padding:0 4px; }

/* Overlay for mobile */
.backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; z-index:1035;
}

/* ========= LAYOUT ========= */
.app-wrap{ display:flex; }
.main-content{
  width:100%; padding:3px; margin-left:var(--sidebar-w); margin-top:calc(var(--nav-h) - 84px);
  transition:margin-left .25s ease, margin-top .1s ease;
}

/* Grid */
.video-grid{ display:grid; gap:10px; padding:0; }
.sidebar-open .video-grid{ grid-template-columns:repeat(4,1fr); }  /* desktop default */
.sidebar-closed .video-grid{ grid-template-columns:repeat(5,1fr); }/* desktop hidden */

/* Cards */
.vcard{ border-radius:var(--radius); background:var(--bg); box-shadow:var(--shadow); }



/* Thumbnail wrapper becomes the positioning context */
.thumb{ position:relative; }

/* Bootstrap .ratio will stretch its direct children; keep img full-cover */
.thumb .ratio > img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:12px;
  display:block;
}

/* Duration overlay – pinned to bottom-right of .thumb */
.duration{
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:2;
  background:rgba(0,0,0,0.6);
  color:#fff;
  border-radius:6px;
  padding:3px 8px;
  font-weight:700;
  font-size:13px;
  line-height:1.2;
  width:auto;           /* override any ratio child rules */
  height:auto;
  top:auto;             /* important to cancel .ratio > * { top:0 } */
  left:auto;            /* important to cancel .ratio > * { left:0 } */
}

.avatar{ width:36px; height:36px; object-fit:cover; }
.meta{ color:var(--muted); }

/* Bottom tabbar (mobile) */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0;
  background:linear-gradient(180deg,#0f1011,#191b1c);
  padding:8px 12px; z-index:1030; display:flex; justify-content:space-around;
  border-top-left-radius:12px; border-top-right-radius:12px;
}
.bottom-nav .item{ color:#e5e7eb; text-align:center; text-decoration:none; font-size:12px; }
.bottom-nav .item i{ font-size:20px; display:block; }
.bottom-nav .item.active{ color:#fff; }

/* ========= DESKTOP BEHAVIOR ========= */
@media (min-width: 992px){
  body.sidebar-closed .main-content{ margin-left:0; padding: 5px 0px 70px 0px }
  body.sidebar-closed .sidebar{ transform:translateX(-100%); }
  .backdrop{ display:none !important; }
}


/* ========= MOBILE (overlay) ========= */
@media (max-width: 991.98px){
  .sidebar{
    top:0; height:100vh; transform:translateX(-100%);
    transition:transform .25s ease, box-shadow .25s ease;
    box-shadow:none;
  }
  .sidebar.show{ transform:none; box-shadow:0 10px 30px rgba(0,0,0,.25); }

  .main-content{ margin-left:0; margin-top:calc(var(--nav-h) - 110px); margin: 1px 0 30px 0;}
  .video-grid{ grid-template-columns:1fr !important; }

  .backdrop.show{ display:block; }
  html.no-scroll, body.no-scroll{ overflow:hidden; height:100%; }
  #sidebarClose{ display:block; }
}