/* =========================
   Brand: Black + Gold
   ========================= */
:root{
  --black:#000000;
  --bg:#0a0a0a;
  --panel:#0f0f0f;
  --muted:#9b9b9b;
  --gold:#E5BD01;
  --white:#fff;

  /* Layout */
  --container: 1440px;   /* wider so center can fit 4 cards */
  --left: 220px;
  --right: 300px;
  --gap: 18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--white);font-family:Inter,system-ui,Arial,sans-serif}
a{color:var(--gold);text-decoration:none}
a:hover{opacity:.9}
img{display:block;max-width:100%}
h1,h2,h3{margin:0 0 10px;color:var(--gold)}

/* Buttons */
.btn{display:inline-block;padding:10px 14px;border-radius:10px;background:#222;color:#fff;font-weight:600;border:1px solid rgba(255,255,255,.06)}
.btn.gold{
  background: linear-gradient(180deg, #FFD84D 0%, #E5BD01 60%, #C7A100 100%);
  color:#000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 8px rgba(229,189,1,.25);
}
.btn.ghost{background:#0f0f0f;color:#fff;border:1px solid #2a2a2a}
.btn.block{display:block;text-align:center;width:100%}

/* =========================
   Header
   ========================= */
.site-header{
  position:sticky;top:0;z-index:50;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:var(--container);margin:0 auto;padding:10px 16px;
}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{height:36px;width:auto}
.brand-text{font-weight:800;color:#fff}
.nav-right{display:flex;align-items:center;gap:12px}

/* Tools row – uses same container */
.tools-row{
  display:flex;align-items:center;gap:12px;
  max-width:var(--container);margin:0 auto;padding:8px 16px;
  border-top:1px solid #161616;border-bottom:1px solid #161616;background:#060606;
}
.search-form{display:flex;gap:8px;flex:1 0 auto}
.search-form input{
  flex:0 1 560px;height:40px;background:#0f0f0f;border:1px solid #1e1e1e;color:#fff;border-radius:10px;padding:0 12px
}
.sort-form{display:flex;align-items:center;gap:8px}
.sort-form select{height:40px;background:#0f0f0f;border:1px solid #1e1e1e;color:#fff;border-radius:10px;padding:0 10px}

/* =========================
   3-column page shell
   ========================= */
.shell{
  max-width:var(--container);
  margin:16px auto;
  padding:0 16px;
  display:grid; gap:var(--gap);
  grid-template-columns: var(--left) 1fr var(--right);
}
.sidebar-left,.sidebar-right{display:flex;flex-direction:column;gap:16px}
.card{background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:14px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.card h3{margin-bottom:8px}
.nav-card a,.cat-card a{
  display:block;padding:8px;border-radius:8px;background:#0c0c0c;border:1px solid #141414;margin-bottom:8px;color:#fff
}
.nav-card a:hover,.cat-card a:hover{background:#111}

.content{min-height:400px}

/* =========================
   Right rail (compact thumbs)
   ========================= */
.rail-grid,.rail-list{display:flex;flex-direction:column;gap:10px}
.rail-item{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:center}
.rail-item img{width:120px;height:68px;object-fit:cover;border-radius:6px;border:1px solid rgba(255,255,255,.07)}
.rail-item .title{font-size:14px;color:#fff;margin-top:0;line-height:1.2}

/* Badges */
.badge-premium,.badge.premium{
  position:absolute;top:6px;left:6px;background:var(--gold);color:#000;
  padding:3px 8px;border-radius:999px;font-weight:700;font-size:12px
}
.badge-duration{
  position:absolute; right:6px; bottom:6px;
  background:rgba(0,0,0,.65); color:#fff; font-size:12px; font-weight:700;
  padding:2px 6px; border-radius:6px; border:1px solid rgba(255,255,255,.12);
}

/* =========================
   Video grid & cards
   ========================= */
.video-grid{display:grid;gap:14px}

/* Desktop/laptop: 4-up */
@media (min-width:1280px){
  .video-grid{grid-template-columns:repeat(4,1fr)}
}
/* Large tablets: 3-up */
@media (min-width:992px) and (max-width:1279.98px){
  .video-grid{grid-template-columns:repeat(3,1fr)}
}
/* Mobile/tablet: 2-up */
@media (max-width:991.98px){
  .video-grid{grid-template-columns:repeat(2,1fr)}
}

.video-card{
  background:#1a1a1a;border-radius:10px;padding:8px;display:block;text-decoration:none;
  overflow:hidden;border:1px solid rgba(255,255,255,.06);box-shadow:0 10px 28px rgba(0,0,0,.32);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.video-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,0,.45);
  border-color: rgba(229,189,1,.35);
}
.thumb-wrap{position:relative;aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden}
.thumb-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:8px;box-shadow: inset 0 0 0 1px rgba(255,255,255,.05)}
.thumb-wrap img{width:100%;height:100%;object-fit:cover;display:block;border-radius:8px}
.preview-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:none;pointer-events:none;z-index:1}
.thumb-wrap.previewing .preview-video{display:block}
.thumb-wrap.previewing img{ filter: brightness(.92); transform: scale(1.01); transition:.2s; }

.video-card .title{
  margin:6px 2px 0;font-size:14px;line-height:1.3;color:#fff;font-weight:700;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.card.video .meta{padding:10px}
.card.video .cat{color:var(--muted);font-size:12px;margin-top:4px}

/* =========================
   Pagination
   ========================= */
.pagination{display:flex;gap:8px;align-items:center;justify-content:center;margin:16px 0}
.pagination a,.pagination span{padding:6px 10px;border:1px solid #1a1a1a;border-radius:8px;background:#0f0f0f;color:#fff}
.pagination .active{background:var(--gold);color:#000;border-color:var(--gold)}

/* =========================
   Auth compact
   ========================= */
.auth-card{max-width:420px;margin:24px auto}
.auth-card input{width:100%;padding:12px;border-radius:10px;background:#0f0f0f;border:1px solid #1a1a1a;color:#fff;margin-bottom:10px}
.auth-card .btn{width:100%}

/* =========================
   Mobile header & nav
   ========================= */
.desktop-only{display:block}
.mobile-only{display:none}

@media (max-width:991.98px){
  .desktop-only{display:none}
  .mobile-only{display:block}

  /* center logo row */
  .header-inner{justify-content:center;position:relative}
  .header-inner .brand{position:absolute;left:16px;top:50%;transform:translateY(-50%)}
  .header-inner .nav-right{position:absolute;right:16px;top:50%;transform:translateY(-50%)}

  /* stacked tools under header */
  .tools-row{flex-wrap:wrap;padding:10px 16px}
  .search-form{order:1;flex-basis:100%}
  .sort-form{order:2}

  /* shell collapses to single column */
  .shell{
    max-width:100%;
    grid-template-columns: 1fr;
    padding:0 12px;
  }
  .sidebar-left,.sidebar-right{order:0}
  .content{order:0}

  /* right-rail thumbs slightly smaller */
  .rail-item{grid-template-columns:96px 1fr}
  .rail-item img{width:96px;height:54px}
}

/* =========================
   Category chips scroller (mobile)
   ========================= */
.chips{
  display:flex;gap:10px;overflow-x:auto;padding:12px 16px 4px 16px;margin:0 auto;
  max-width:var(--container);
}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;background:#0f0f0f;border:1px solid #1e1e1e;color:#fff;
  border-radius:999px;padding:8px 14px;font-weight:700;white-space:nowrap
}
.chip.active{background:var(--gold);color:#000;border-color:var(--gold)}
/* --- Compatibility patch: support legacy class names (.grid, .thumb) --- */

/* Make BOTH .video-grid and .grid act as our card grid */
.video-grid,
.grid{
  display:grid;
  gap:14px;
}

/* Desktop 4-up, large tablet 3-up, mobile 2-up */
@media (min-width:1280px){
  .video-grid, .grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width:992px) and (max-width:1279.98px){
  .video-grid, .grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width:991.98px){
  .video-grid, .grid { grid-template-columns: repeat(2, 1fr); }
}

/* Cards may be either .video-card OR .card.video in older templates */
.grid .video-card,
.grid .card.video,
.video-grid .video-card,
.video-grid .card.video{
  background:#1a1a1a;
  border-radius:10px;
  padding:8px;
  display:block;
  overflow:hidden;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 10px 28px rgba(0,0,0,.32);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.grid .video-card:hover,
.grid .card.video:hover,
.video-grid .video-card:hover,
.video-grid .card.video:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,0,.45);
  border-color: rgba(229,189,1,.35);
}

/* Thumbnails may be .thumb or .thumb-wrap */
.thumb,
.thumb-wrap{
  position:relative;
  aspect-ratio:16/9;
  background:#000;
  border-radius:8px;
  overflow:hidden;
}
.thumb img,
.thumb-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:8px;
}

/* Duration + Premium badges still work on either wrapper */
.thumb .badge-duration,
.thumb-wrap .badge-duration{ position:absolute; right:6px; bottom:6px; }
.thumb .badge-premium,
.thumb-wrap .badge-premium{ position:absolute; left:6px; top:6px; }

/* Right-rail mini thumbs: make sure legacy .thumb is sized too */
.rail-item .thumb img{ width:120px; height:68px; object-fit:cover; border-radius:6px; }
@media (max-width:991.98px){
  .rail-item .thumb img{ width:96px; height:54px; }
}
/* ===== Visibility helpers: desktop vs mobile ===== */
.only-mobile{ display:none !important; }
.only-desktop{ display:block !important; }

@media (max-width:991.98px){
  .only-mobile{ display:initial !important; }
  .only-desktop{ display:none !important; }
}

/* Mobile chips row: hidden on desktop, flex on mobile */
.cat-chips,
.mobile-chips,
.chips-row{
  display:none;
}
@media (max-width:991.98px){
  .cat-chips,
  .mobile-chips,
  .chips-row{
    display:flex;
    gap:10px;
    align-items:center;
    overflow-x:auto;
    padding:8px 12px;
  }
}

/* Mobile drawer: don’t render on desktop */
#mb-drawer{ display:none; }
@media (max-width:991.98px){
  #mb-drawer{ display:block; }
}
/* ===== Visibility helpers (lock mobile UI to mobile only) ===== */
.only-mobile{ display:none !important; }
.only-desktop{ display:block !important; }

@media (max-width:991.98px){
  .only-mobile{ display:initial !important; }
  .only-desktop{ display:none !important; }
}

/* Chips row hidden on desktop, visible on mobile */
.cat-chips{ display:none; }
@media (max-width:991.98px){
  .cat-chips{
    display:flex;
    gap:10px;
    align-items:center;
    overflow-x:auto;
    padding:8px 12px;
  }
  .cat-chips .chip{
    background:#1a1a1a;
    border:1px solid #2a2a2a;
    color:#fff;
    padding:8px 12px;
    border-radius:999px;
    white-space:nowrap;
  }
  .cat-chips .chip.active{
    background:var(--gold);
    color:#000;
    border-color:var(--gold);
    font-weight:700;
  }
}

/* Mobile drawer hidden on desktop */
#mb-drawer{ display:none; }
@media (max-width:991.98px){
  #mb-drawer{
    display:block;
    position: fixed;
    top: 56px; left: 0; right: 0;
    background: #0d0d0d;
    border-top:1px solid #1a1a1a;
    z-index: 60;
  }
  #mb-drawer[hidden]{ display:none !important; }
  #mb-drawer .drawer-inner{
    padding: 12px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  #mb-drawer a{
    padding:10px 12px;
    border:1px solid #1a1a1a;
    border-radius:10px;
    color:#fff;
    background:#111;
  }
  #mb-drawer .drawer-cta .title{
    color:var(--gold);
    font-weight:800;
    margin:8px 0 4px;
  }
}

/* Simple hamburger icon */
.hamb{ background:transparent; border:0; padding:8px; border-radius:10px; }
.hamb-line{
  display:block; width:24px; height:2px; background:#fff; margin:4px 0; border-radius:2px;
}

/* Center logo on mobile header */
@media (max-width:991.98px){
  .header-inner{ justify-content:space-between; }
  .brand{ margin: 0 auto; }
  .brand-logo{ height:36px; }
}
/* --- Mobile App Bar --- */
.appbar {
  position: sticky; top: 0; z-index: 1000;
  height: 56px; display: flex; align-items: center;
  justify-content: space-between; padding: 0 12px;
  background: #0b0b0b; border-bottom: 1px solid #242424;
  transition: transform .25s ease;
}
.appbar--hidden { transform: translateY(-100%); }

.appbar__hamburger { display: none; gap: 4px; }
.appbar__hamburger span { display:block; width:22px; height:2px; background:#fff; border-radius:2px; }

.appbar__logo { position:absolute; left:50%; transform:translateX(-50%); height:56px; display:flex; align-items:center; }
.appbar__logo img { height:28px; display:block; }

.appbar__actions { display:flex; align-items:center; gap:8px; }
.appbar .btn-sm { padding:6px 10px; border-radius:10px; font-size:13px; }

/* Collapsible search */
.mobile-search { position: sticky; top:56px; z-index: 999; background:#0b0b0b; padding:8px 12px; border-bottom:1px solid #242424; transition: max-height .25s ease, opacity .2s ease; }
.mobile-search--hidden { max-height:0; opacity:0; overflow:hidden; padding-top:0; padding-bottom:0; border-bottom:0; }
.mobile-search__form { display:flex; gap:8px; }
.mobile-search__form input { flex:1; height:40px; border-radius:12px; background:#161616; border:1px solid #2a2a2a; color:#fff; padding:0 12px; }
.mobile-search__form button { height:40px; border-radius:12px; }

/* Category chips (mobile only) */
.chipbar { position: sticky; top: calc(56px + 48px); z-index: 998; display:flex; gap:8px; overflow-x:auto; padding:8px 12px; background:#0b0b0b; border-bottom:1px solid #242424; }
.chip { white-space:nowrap; padding:8px 12px; border-radius:999px; background:#1a1a1a; color:#ddd; border:1px solid #2a2a2a; font-size:13px; }
.chip--active { background:#ffd34d; color:#000; border-color:#ffd34d; }

/* Drawer */
.drawer { position: fixed; inset: 0 auto 0 0; width:80%; max-width:320px; background:#0d0d0d; transform: translateX(-100%); transition: transform .25s ease; z-index: 1100; border-right:1px solid #242424; }
.drawer--open { transform: translateX(0); }
.drawer__header { display:flex; align-items:center; justify-content:space-between; padding:14px 14px; border-bottom:1px solid #242424; }
.drawer__body { display:flex; flex-direction:column; padding:10px; }
.drawer__body a { padding:12px 8px; border-radius:10px; color:#eee; text-decoration:none; }
.drawer__body a:hover { background:#171717; }

.backdrop { position: fixed; inset:0; background:rgba(0,0,0,.5); z-index:1095; opacity:0; transition: opacity .25s ease; }
.backdrop--show { opacity:1; }

/* Show hamburger + mobile layout at <= 768px */
@media (max-width: 768px) {
  .appbar__hamburger { display:flex; }
  /* Hide your desktop nav if you have one */
  .desktop-nav { display:none !important; }
}

/* Desktop: hide mobile-only rows */
@media (min-width: 769px) {
  .mobile-search, .chipbar, .drawer, .backdrop { display:none !important; }
}
/* ===== MOBILE HEADER: PERFECT CENTER LOGO + HAMBURGER LEFT + AUTH RIGHT ===== */
@media (max-width: 991.98px){
  .header-inner{
    display: grid !important;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    height: 56px;
    padding: 0 12px;
  }
  /* show hamburger on mobile */
  #hamb.only-mobile{ display:flex !important; grid-column: 1; justify-self: start; }
  /* brand dead-center regardless of button widths */
  .brand{ grid-column: 2; justify-self: center; margin: 0 !important; }
  .brand-logo{ height: 28px; }

  /* auth buttons on the right */
  .auth-right.only-mobile{ display:flex !important; grid-column: 3; justify-self: end; gap:8px; }

  /* collapse tools row on demand (JS adds/removes tools-row--hidden) */
  .tools-row{ transition: max-height .25s ease, opacity .2s ease; }
  .tools-row--hidden{ max-height:0; opacity:0; overflow:hidden; padding-top:0; padding-bottom:0; border-top:0; border-bottom:0; }

  /* category chips stay under the header+tools */
  .cat-chips{
    position: sticky; top: calc(56px + 48px);
    z-index: 998; background:#0b0b0b; border-bottom:1px solid #242424;
    display:flex; gap:8px; overflow-x:auto; padding:8px 12px;
  }
}

/* ===== LEFT SLIDE-IN DRAWER (mobile) ===== */
#mb-drawer{
  position: fixed;
  inset: 0 auto 0 0;           /* left side */
  width: 80%;
  max-width: 320px;
  background: #0d0d0d;
  border-right: 1px solid #1a1a1a;
  transform: translateX(-100%);
  transition: transform .25s ease;
  z-index: 1100;
}
#mb-drawer.drawer--open{ transform: translateX(0); }
#mb-drawer[hidden]{ display:none !important; } /* keep hidden attribute respected */

.backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1095;
  opacity: 0; transition: opacity .25s ease;
}
.backdrop.show{ opacity: 1; }

/* Ensure mobile-only / desktop-only don’t conflict */
.only-mobile{ display:none !important; }
.only-desktop{ display:block !important; }
@media (max-width: 991.98px){
  .only-mobile{ display:initial !important; }
  .only-desktop{ display:none !important; }
}

/* Desktop layout guard (hide mobile UI elements) */
@media (min-width: 992px){
  #mb-drawer, #mb-backdrop, .cat-chips{ display:none !important; }
}
/* --- Mobile header: 3-column grid so the logo stays perfectly centered --- */
@media (max-width: 991.98px){
  .header-inner{
    display:grid; grid-template-columns:48px 1fr 48px;
    align-items:center; height:56px; padding:0 12px;
  }
  /* hamburger left, visible only on mobile */
  #hamb.only-mobile{ display:flex !important; grid-column:1; justify-self:start; }
  /* logo perfectly centered regardless of button widths */
  .brand{ grid-column:2; justify-self:center; margin:0 !important; }
  .brand-logo{ height:28px; }

  /* auth buttons on the right (mobile only) */
  .auth-right.only-mobile{ display:flex !important; grid-column:3; justify-self:end; gap:8px; }

  /* hide desktop nav on mobile, keep desktop styling elsewhere */
  .nav-right.only-desktop{ display:none !important; }

  /* Drawer: left slide-in + backdrop */
  #mb-drawer{
    position:fixed; inset:0 auto 0 0; width:80%; max-width:320px;
    background:#0d0d0d; border-right:1px solid #1a1a1a;
    transform:translateX(-100%); transition:transform .25s ease; z-index:1100;
  }
  #mb-drawer.drawer--open{ transform:translateX(0); }
  #mb-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.5);
    opacity:0; transition:opacity .25s ease; z-index:1095;
  }
  #mb-backdrop.show{ opacity:1; }
}

/* Desktop guard: hide mobile-only elements on >=992px (does NOT touch your desktop CSS) */
@media (min-width: 992px){
  #mb-drawer, #mb-backdrop { display:none !important; }
}
/* Mobile only */
@media (max-width: 991.98px){
  /* Keep logo perfectly centered */
  .header-inner{ display:grid; grid-template-columns:48px 1fr 48px; align-items:center; height:56px; padding:0 12px; }
  #hamb.only-mobile{ display:flex !important; grid-column:1; justify-self:start; }
  .brand{ grid-column:2; justify-self:center; margin:0 !important; }
  .auth-right.only-mobile{ display:flex !important; grid-column:3; justify-self:end; gap:8px; }

  /* Drawer: don't block clicks when closed */
  #mb-drawer{
    position:fixed; inset:0 auto 0 0; width:80%; max-width:320px;
    background:#0d0d0d; border-right:1px solid #1a1a1a;
    transform:translateX(-100%); transition:transform .25s ease; z-index:1100;
    pointer-events:none;                 /* <— important */
  }
  #mb-drawer.drawer--open{ transform:translateX(0); pointer-events:auto; }

  /* Backdrop: only receive clicks when visible */
  #mb-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1095;
    opacity:0; transition:opacity .25s ease;
    display:none; pointer-events:none;   /* <— important */
  }
  #mb-backdrop.show{ opacity:1; display:block; pointer-events:auto; }
}

/* Desktop guard */
@media (min-width: 992px){
  #mb-drawer, #mb-backdrop { display:none !important; }
}
/* === Mobile header fix: true centered logo + smaller hamburger === */
@media (max-width: 991.98px){
  /* revert to flex so we can absolutely center the logo */
  .header-inner{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    position:relative;
    height:56px; padding:0 12px;
  }

  /* smaller hamburger */
  #hamb.only-mobile{
    display:flex !important;
    width:36px; height:36px;
    align-items:center; justify-content:center;
    padding:0; margin:0;
  }
  #hamb.only-mobile .hamb-line{
    width:18px; height:2px; background:#fff; border-radius:2px;
  }
  #hamb.only-mobile .hamb-line + .hamb-line{ margin-top:3px; }

  /* logo dead-center regardless of right-side button widths */
  .brand{
    position:absolute; left:50%; top:50%;
    transform:translate(-50%, -50%);
    margin:0 !important; display:flex; align-items:center;
  }
  .brand-logo{ height:28px; } /* tweak if you want 26–28px */

  /* keep mobile auth on the right */
  .auth-right.only-mobile{ display:flex !important; gap:8px; }
}

/* keep drawer clickable only when open (unchanged) */
@media (max-width: 991.98px){
  #mb-drawer{ pointer-events:none; }
  #mb-drawer.drawer--open{ pointer-events:auto; }
  #mb-backdrop{ display:none; pointer-events:none; }
  #mb-backdrop.show{ display:block; pointer-events:auto; }
}
/* === MOBILE HEADER: show hamburger + perfectly center logo (no desktop changes) === */
@media (max-width: 991.98px){
  /* force flex so older grid rules don't win */
  .header-inner{
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 12px;
  }

  /* hamburger visible + smaller */
  #hamb.only-mobile{
    display: flex !important;
    width: 34px; height: 34px; padding: 0; margin: 0;
    align-items: center; justify-content: center;
  }
  #hamb.only-mobile .hamb-line{
    display:block; width:18px; height:2px; background:#fff; border-radius:2px;
  }
  #hamb.only-mobile .hamb-line + .hamb-line{ margin-top:3px; }

  /* logo dead center regardless of right buttons */
  .brand{
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
  }
  .brand-logo{ height: 24px; } /* tweak 24–28px to taste */

  /* keep mobile auth on right; hide desktop nav on mobile */
  .auth-right.only-mobile{ display:flex !important; gap:8px; }
  .nav-right.only-desktop{ display:none !important; }
}
/* ===== FINAL MOBILE HEADER + DRAWER OVERRIDES (desktop untouched) ===== */
@media (max-width: 991.98px){
  /* Header layout */
  .header-inner{
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 12px;
  }

  /* Hamburger (visible + smaller) */
  #hamb.only-mobile{
    display: flex !important;
    width: 34px; height: 34px; padding: 0; margin: 0;
    align-items: center; justify-content: center;
  }
  #hamb.only-mobile .hamb-line{
    width: 18px; height: 2px; border-radius: 2px; background: #fff; margin: 0;
  }
  #hamb.only-mobile .hamb-line + .hamb-line{ margin-top: 3px; }

  /* Logo dead-center regardless of right buttons */
  .brand{
    position: absolute !important;
    left: 50% !important; top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important; display: flex; align-items: center;
  }
  .brand-logo{ height: 28px !important; width: auto; }

  /* Right-side auth visible on mobile; hide desktop nav on mobile */
  .auth-right.only-mobile{ display: flex !important; gap: 8px; }
  .nav-right.only-desktop{ display: none !important; }

  /* Drawer: left slide-in; do NOT block taps when closed */
  #mb-drawer{
    position: fixed !important; inset: 0 auto 0 0 !important;
    width: 80%; max-width: 320px;
    background: #0d0d0d; border-right: 1px solid #1a1a1a;
    transform: translateX(-100%); transition: transform .25s ease;
    z-index: 1100; display: block !important;
    pointer-events: none;
  }
  #mb-drawer.drawer--open{ transform: translateX(0); pointer-events: auto; }

  /* Backdrop: only interactive when shown */
  #mb-backdrop{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    opacity: 0; transition: opacity .25s ease;
    z-index: 1095; display: none; pointer-events: none;
  }
  #mb-backdrop.show{ display: block; opacity: 1; pointer-events: auto; }
}

/* Hide drawer/backdrop on desktop */
@media (min-width: 992px){
  #mb-drawer, #mb-backdrop{ display: none !important; }
}
/* ===== DESKTOP FIX: restore header layout + smaller search ===== */
@media (min-width: 992px){
  /* Logo back on the left (undo any mobile centering that leaked) */
  .brand{
    position: static !important;
    left: auto !important; top: auto !important;
    transform: none !important;
    margin: 0 !important;
  }
  .header-inner{
    display: flex !important;
    align-items: center;
    justify-content: space-between;
  }

  /* Right-side nav/login visible on desktop; hide mobile auth */
  .nav-right.only-desktop{ display: flex !important; }
  .auth-right.only-mobile{ display: none !important; }

  /* Make the search bar narrower */
  .search-form{ flex: 0 0 auto; }
  .search-form input{
    width: 420px;            /* tweak to taste: 360–480px */
    max-width: 420px;
    flex: 0 0 420px;
  }
  .search-form .btn{ padding: 8px 12px; }  /* keep button compact */
}
/* === Desktop tidy-up (logo left, nav right, slimmer search, roomier center) === */
@media (min-width: 992px){
  /* header layout */
  .brand{ position:static !important; transform:none !important; margin:0 !important; }
  .header-inner{ display:flex !important; align-items:center; justify-content:space-between; height:56px; }

  /* nav & login */
  .nav-right.only-desktop{ display:flex !important; gap:16px; }
  .nav-right.only-desktop a{ font-weight:600; }
  .btn.gold{ padding:8px 12px; border-radius:12px; }

  /* slimmer search */
  .search-form{ flex:0 0 auto; }
  .search-form input{
    width:380px; max-width:380px; flex:0 0 380px;
    background:#0f0f0f; border:1px solid #1c1c1c;
  }
  .search-form .btn{ padding:8px 12px; }

  /* give center more space */
  :root{
    --container: 1280px;
    --left: 200px;
    --right: 280px;
    --gap: 16px;
  }

  /* lighter big-card shadow so sidebars don't feel heavier than content */
  .card{ box-shadow:0 4px 16px rgba(0,0,0,.28); }

  /* right rail priority */
  .sidebar-right .card:first-child{ margin-bottom:12px; }
  .sidebar-right h3{ font-weight:800; }

  /* consistent badges on cards */
  .badge-premium{ top:6px; left:6px; padding:3px 8px; }
  .badge-duration{ right:6px; bottom:6px; padding:2px 6px; }
}

/* Focus ring (a11y) */
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
#actionsRow .btn { padding:6px 10px; }
#speedWrap { position:relative; }
#speedMenu a { display:block; padding:6px 10px; color:#fff; text-decoration:none; }
#speedMenu a:hover { background:#181818; }