/* Global red–white redesign */
:root{
  --bg:#ffffff;
  --bg-elev:#ffffff;
  --text:#1a1a1a;
  --muted:#6f6f6f;
  --accent:#d0021b; /* vivid red */
  --accent-contrast:#ffffff;
  --card:#ffffff;
  --border:#e8e8e8;
  --hover:#f7f7f7;
  --shadow-sm:0 1px 2px rgba(0,0,0,.06);
  --shadow-lg:0 8px 24px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans','Apple Color Emoji','Segoe UI Emoji';
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-top:var(--header-h, 64px);
}

a{color:inherit;text-decoration:none}

/* Header */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:var(--bg-elev);
  border-bottom:2px solid var(--accent);
}
.topbar{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:16px;padding:12px 16px;max-width:1260px;margin:0 auto;
}
.logo{font-weight:800;letter-spacing:.2px;cursor:pointer;display:inline-flex;align-items:center;line-height:1;font-size:18px}
.logo span{display:inline-block;padding:2px 6px;border-radius:6px;background:var(--accent);color:var(--accent-contrast)}
.logo img+span{margin-left:6px}
.logo-img{height:24px;width:auto;display:block;margin-right:8px}

.search{display:flex;align-items:center;gap:8px}
form.search{margin:0;width:100%}
.search input{
  width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--border);
  background:#fff;color:var(--text);line-height:1.2;
  box-shadow:var(--shadow-sm);
}
.search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(208,2,27,.15)}
.search button{
  padding:12px 16px;border-radius:10px;border:0;background:var(--accent);
  color:var(--accent-contrast);font-weight:700;cursor:pointer;display:inline-flex;align-items:center
}
.search button:hover{filter:saturate(110%)}

.pill-btn{
  white-space:nowrap;padding:10px 14px;border-radius:10px;
  border:1px solid var(--border);background:#fff;color:var(--text);
  cursor:pointer;font-size:14px;display:inline-flex;align-items:center;box-shadow:var(--shadow-sm)
}
.pill-btn:hover{border-color:var(--accent);color:var(--accent)}

.top-actions{display:flex;gap:8px;align-items:center}

/* Top nav as underline tabs */
.nav{display:flex;align-items:center;gap:12px;padding:8px 16px 12px 16px;max-width:1260px;margin:0 auto;overflow-x:auto;scrollbar-width:thin}
.pill{
  white-space:nowrap;padding:8px 4px;border-radius:0;border:0;background:transparent;color:var(--muted);
  cursor:pointer;font-size:14px;text-decoration:none;border-bottom:2px solid transparent
}
.pill.active,.pill:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* Layout */
.container{max-width:1260px;margin:0 auto;padding:16px}
h2{margin:20px 0 12px 0;font-size:20px;font-weight:800}

/* Cards */
.card{
  background:var(--card);
  border:0;border-radius:16px;overflow:hidden;cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:transform .14s ease, box-shadow .14s ease
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.thumb{position:relative;aspect-ratio:16/9;background:var(--hover);overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.badge{position:absolute;bottom:10px;right:10px;background:var(--accent);color:#fff;font-size:12px;padding:4px 8px;border-radius:999px;box-shadow:var(--shadow-sm)}
.meta{padding:12px}
.meta .title{font-size:15px;line-height:1.35;margin:0 0 6px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-height:calc(1.35em * 2)}
.meta .sub{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Grids */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.row-actions{display:flex;justify-content:center;margin:16px 0}
.btn{background:#fff;color:var(--text);border:1px solid var(--border);padding:10px 14px;border-radius:10px;cursor:pointer;box-shadow:var(--shadow-sm)}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Big cards for slider */
.card.big .meta{display:none}
.card.big .thumb{aspect-ratio:16/9}
.card.big .ov-title{position:absolute;left:14px;right:14px;bottom:12px;color:#fff;font-weight:800;text-shadow:0 2px 8px rgba(0,0,0,.45);font-size:16px;line-height:1.3}
.card.big .ov-badge{position:absolute;top:12px;right:14px;background:rgba(208,2,27,.9);color:#fff;font-size:12px;padding:4px 8px;border-radius:999px}

/* Popular slider visuals */
#popularProgress{height:3px;background:var(--border);border-radius:3px;overflow:hidden}
#popularProgress .bar{height:100%;background:var(--accent);width:0}
.popular-slider{position:relative;overflow:hidden;border-radius:16px}
.popular-track{display:flex;width:200%;}
.popular-slide{width:50%;flex:0 0 50%;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0 2px}
.popular-curr,.popular-prev{padding:0 2px}
.popular-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* Footer */
.footer{max-width:1260px;margin: 20px auto;padding: 16px;color: var(--muted);font-size: 12px;border-top: 1px solid var(--border)}

/* Category cards */
.cats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.cat-card{display:block;padding:28px;border:1px solid var(--border);background:#fff;border-radius:16px;cursor:pointer;text-align:center;transition:border-color .14s ease,transform .14s ease, box-shadow .14s ease;text-decoration:none;color:var(--text);font-size:20px;font-weight:800;letter-spacing:.2px;box-shadow:var(--shadow-sm)}
.cat-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-lg)}

/* Home two-column layout */
.home-layout{display:grid;grid-template-columns:3fr 1.2fr;gap:16px;align-items:start}
.home-side .sticky{position:sticky;top:calc(var(--sticky-top, 76px))}
.vlist{display:flex;flex-direction:column;gap:12px}
.vcard{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.vthumb{flex:0 0 132px;width:132px;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--hover);position:relative}
.vthumb img{width:100%;height:100%;object-fit:cover;display:block}
.vinfo{flex:1;min-width:0}
.vinfo .title{font-size:14px;line-height:1.35;margin:0 0 6px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-height:calc(1.35em * 2)}
.vinfo .sub{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Right column big cards */
.home-side .card.big{margin-bottom:12px}

/* Player page */
.player{background:#fff;border-radius:16px;overflow:hidden;border:0;box-shadow:var(--shadow-lg)}
.player-inner{position:relative;aspect-ratio:16/9;background:#000}
.player-inner iframe,.player-inner video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.title{margin:16px 0 8px 0;font-size:24px;font-weight:800}
.meta-block{color:var(--muted);font-size:13px;margin-bottom:14px}
.controls{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.player.card:hover{transform:none}
.panel{background:#fff;border-radius:16px;box-shadow:var(--shadow-sm);padding:12px}
.section-title{font-size:16px;font-weight:800;margin:0 0 8px 0}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{padding:6px 10px;border:1px solid var(--border);border-radius:999px;font-size:12px;color:var(--text);background:#fff}
.list{margin:0;padding:0;list-style:none}
.list li{list-style:none}
.list li+li{margin-top:8px}

/* Video page layout */
.video-layout{display:grid;grid-template-columns:5fr 2fr;gap:20px;align-items:start}
.video-layout .side-col{align-self:start}
.video-layout #recoGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.video-layout #moreLikeGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
/* Wider container on video page */
.page-video .container{max-width:1600px}
@media (max-width:1200px){ .video-layout{grid-template-columns:2fr 1fr} }
@media (max-width:960px){ .video-layout{grid-template-columns:1fr} }

/* Bottom mobile nav */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--border);display:none;z-index:40}
.bottom-nav .bn-item{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 4px;color:var(--text);text-decoration:none;gap:2px;font-size:12px;flex:1 1 0;min-width:0}
.bottom-nav .bn-item svg{width:22px;height:22px;display:block;fill:currentColor}
.bottom-nav .bn-item.active,.bottom-nav .bn-item:hover{color:var(--accent)}
.bottom-nav .bn-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Responsive tweaks */
@media (max-width:768px){
  .topbar{grid-template-columns:auto 1fr;gap:10px}
  .top-actions{grid-column:1 / -1}
  .nav{display:none}
  .bottom-nav{display:flex;gap:0;align-items:center;height:56px;padding:0;padding-bottom:env(safe-area-inset-bottom)}
  .bottom-nav .bn-item{flex:0 0 16.6667%;max-width:16.6667%}
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
}

@media (max-width:960px){
  .home-layout{grid-template-columns:1fr}
  .home-side .sticky{position:static}
}

/* UA hint – force mobile layout */
.is-mobile .topbar{grid-template-columns:auto 1fr;gap:10px}
.is-mobile .top-actions{grid-column:1 / -1}
.is-mobile .nav{display:none}
.is-mobile .bottom-nav{display:flex;gap:0;align-items:center;height:56px;padding:0;padding-bottom:env(safe-area-inset-bottom)}
.is-mobile .bottom-nav .bn-item{flex:0 0 16.6667%;max-width:16.6667%}
.is-mobile body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}

/* Blur mode */
body.blur-on img, body.blur-on video, body.blur-on iframe { filter: blur(24px) saturate(60%); }
/* Do not blur header/logo */
body.blur-on .header img, body.blur-on .logo-img { filter: none !important; }

/* Forms */
input[type="text"], textarea{padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--text)}
input[type="text"]:focus, textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(208,2,27,.15)}

/* Utilities */
.stack{display:flex;gap:8px;align-items:center}
.vstack{display:flex;flex-direction:column;gap:8px}
.mt-16{margin-top:16px}

.mt-10{margin-top:10px}.mt-6{margin-top:6px}

.progress{height:3px;background:var(--border);border-radius:3px;overflow:hidden;margin-top:8px}
.progress .bar{height:100%;width:0;background:var(--accent)}