/* tilitili interface v2 — cinematic, content-first */
:root {
  --surface-base: #07090f;
  --surface-raised: #11141e;
  --surface-elevated: #181c29;
  --surface-hover: #202536;
  --text-primary: #f6f7fb;
  --text-secondary: #a8adbb;
  --text-tertiary: #6f7688;
  --accent: #fb7299;
  --accent-hover: #ff9fbb;
  --accent-active: #e65380;
  --accent-dim: rgba(251,114,153,.14);
  --accent-glow: rgba(251,114,153,.28);
  --cyan: #ff9fbb;
  --border: rgba(255,255,255,.08);
  --border-hover: rgba(255,255,255,.17);
  --border-accent: rgba(251,114,153,.5);
  --r: 16px;
  --r-sm: 10px;
  --r-full: 999px;
  --header-h: 76px;
  --max-width: 1500px;
  --ease: cubic-bezier(.16,1,.3,1);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.2);
  --shadow-md: 0 18px 45px rgba(0,0,0,.3);
  --shadow-lg: 0 30px 80px rgba(0,0,0,.45);
}

[data-theme="light"] {
  --surface-base: #f3f5fa;
  --surface-raised: #fff;
  --surface-elevated: #f8f9fd;
  --surface-hover: #eef0f8;
  --text-primary: #141723;
  --text-secondary: #626879;
  --text-tertiary: #989eac;
  --accent: #fb7299;
  --accent-hover: #e65380;
  --accent-active: #cf416b;
  --accent-dim: rgba(251,114,153,.1);
  --accent-glow: rgba(251,114,153,.18);
  --border: rgba(20,23,35,.08);
  --border-hover: rgba(20,23,35,.16);
  --border-accent: rgba(251,114,153,.38);
  --shadow-md: 0 18px 45px rgba(31,36,58,.1);
  --shadow-lg: 0 30px 80px rgba(31,36,58,.16);
}

html { background: var(--surface-base); }
body {
  min-height: 100vh;
  background:
    radial-gradient(900px 520px at 75% -180px, rgba(251,114,153,.15), transparent 70%),
    radial-gradient(700px 420px at -120px 420px, rgba(251,114,153,.07), transparent 72%),
    var(--surface-base);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
  letter-spacing: -.01em;
}
[data-theme="light"] body { background: linear-gradient(180deg,#fff 0,#fff8fb 620px); }

#scrollProgress { height: 2px; background: linear-gradient(90deg,var(--cyan),var(--accent)); box-shadow: 0 0 16px var(--accent); }

#header {
  height: var(--header-h);
  padding: 0 clamp(20px,3.5vw,64px);
  gap: clamp(20px,3vw,48px);
  background: rgba(7,9,15,.74);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  overflow: visible;
}
[data-theme="light"] #header { background: rgba(255,255,255,.78); }
#header::before,#header::after { display:none; }
#header.scrolled { background: rgba(7,9,15,.9); box-shadow: 0 12px 35px rgba(0,0,0,.18); }
[data-theme="light"] #header.scrolled { background: rgba(255,255,255,.92); }

.header-left,.header-center,.header-right { position:relative; z-index:1; }
.header-left { flex-shrink:0; }
.logo { min-width:0; display:flex; align-items:center; gap:10px; }
.logo::after { display:none; }
.logo svg { width:34px; height:34px; filter:drop-shadow(0 8px 18px rgba(251,114,153,.3)); }
.logo svg path,.logo svg rect { stroke:var(--accent); }
.logo svg rect { fill:var(--accent); }
.logo-name { font-size:19px; font-weight:800; letter-spacing:-.04em; }
.logo-beta { align-self:flex-start; margin-top:8px; padding:2px 5px; border:1px solid var(--border-accent); border-radius:5px; color:var(--accent-hover); font-size:8px; font-weight:800; letter-spacing:.08em; }

.header-center { flex:1; max-width:none; display:flex; align-items:center; justify-content:center; gap:clamp(12px,2vw,28px); }
.search-box { width:min(42vw,560px); min-width:240px; height:44px; display:flex; align-items:center; border:1px solid var(--border); border-radius:var(--r-full); background:rgba(255,255,255,.045); box-shadow:inset 0 1px 0 rgba(255,255,255,.035); overflow:hidden; }
[data-theme="light"] .search-box { background:rgba(20,23,35,.035); }
.search-box::before,.search-box::after { display:none; }
.search-box:focus-within { border-color:var(--border-accent); box-shadow:0 0 0 4px var(--accent-dim); }
.search-leading { width:18px; height:18px; margin-left:17px; flex:none; color:var(--text-tertiary); }
.search-box input { min-width:0; padding:0 12px; font-size:13px; }
.search-box button { min-width:82px; height:36px; margin:3px; padding:0 15px; display:flex; align-items:center; justify-content:center; gap:6px; border-radius:var(--r-full); background:linear-gradient(135deg,var(--accent-hover),var(--accent)); box-shadow:0 8px 22px var(--accent-glow); }
.search-box button svg { width:15px; height:15px; }
#navTabs { flex:none; display:flex; align-items:center; gap:2px; padding:0; border:0; background:transparent; box-shadow:none; overflow:visible; }
#navTabs::before,#navTabs::after { display:none; }
.nav-tab { position:relative; padding:10px 12px; border-radius:0; color:var(--text-secondary); font-size:13px; font-weight:600; background:transparent!important; box-shadow:none!important; }
.nav-tab::after { content:""; position:absolute; left:12px; right:12px; bottom:4px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--cyan),var(--accent)); transform:scaleX(0); transition:transform .25s var(--ease); }
.nav-tab:hover { color:var(--text-primary); }
.nav-tab.active { color:var(--text-primary); }
.nav-tab.active::after { transform:scaleX(1); }
.header-right { margin-left:0; display:flex; align-items:center; gap:12px; }
.live-pill { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid var(--border); border-radius:var(--r-full); color:var(--text-secondary); font-size:9px; font-weight:800; letter-spacing:.12em; }
.live-pill i { width:6px; height:6px; border-radius:50%; background:#48e39b; box-shadow:0 0 10px #48e39b; }
#themeToggle { width:40px; height:40px; border-radius:50%; border:1px solid var(--border); background:rgba(255,255,255,.045); box-shadow:none; }
#themeToggle::before,#themeToggle::after { display:none; }
#themeToggle:hover { background:var(--surface-hover); border-color:var(--border-hover); color:var(--accent-hover); box-shadow:none; }

#main { max-width:var(--max-width); padding:32px clamp(20px,3.5vw,64px) 80px; }
.hero-holder:empty { display:none; }
.hero { position:relative; margin:0 0 22px; border:1px solid var(--border); border-radius:24px; background:var(--surface-raised); box-shadow:var(--shadow-lg); overflow:hidden; }
.hero-track { display:flex; width:100%; transition:transform .65s var(--ease); will-change:transform; }
.hero-slide { position:relative; flex:0 0 100%; width:100%; aspect-ratio:2.55/1; min-height:430px; overflow:hidden; cursor:pointer; }
.hero-slide img { width:100%; height:100%; object-fit:cover; filter:saturate(.9) contrast(1.04); transition:transform .65s var(--ease); }
.hero-slide:hover img { transform:scale(1.025); }
.hero-slide::after { background:linear-gradient(90deg,rgba(4,6,12,.96) 0%,rgba(4,6,12,.7) 34%,rgba(4,6,12,.12) 72%),linear-gradient(0deg,rgba(4,6,12,.72),transparent 50%); }
.hero-slide::after { content:""; position:absolute; inset:0; }
.hero-info { left:clamp(28px,5vw,76px); bottom:clamp(40px,5vw,74px); max-width:min(580px,48%); }
.hero-info { position:absolute; z-index:2; }
.hero-tag { margin-bottom:18px; padding:6px 11px; border:1px solid rgba(251,114,153,.28); border-radius:7px; background:rgba(251,114,153,.12); box-shadow:none; color:#ffd7e3; font-size:10px; letter-spacing:.16em; }
.hero-title { font-size:clamp(30px,3.3vw,52px); font-weight:800; line-height:1.12; letter-spacing:-.04em; text-wrap:balance; }
.hero-meta { margin-top:16px; gap:20px; color:rgba(255,255,255,.68); }
.hero-play { margin-top:24px; padding:12px 20px; border:0; border-radius:var(--r-full); background:#f5f6fb; color:#10131c; box-shadow:0 12px 30px rgba(0,0,0,.25); backdrop-filter:none; }
.hero-play::before { display:none; }
.hero-play:hover { background:#fff; transform:translateY(-2px); }
.hero-arrow { position:absolute; top:50%; z-index:3; display:grid; place-items:center; width:44px; height:44px; border:1px solid rgba(255,255,255,.18); border-radius:50%; background:rgba(8,10,18,.45); color:#fff; font-size:24px; box-shadow:none; transform:translateY(-50%); cursor:pointer; opacity:0; transition:opacity .25s,background .25s,transform .2s; }
.hero:hover .hero-arrow { opacity:1; }
.hero-arrow:hover { background:rgba(8,10,18,.75); }
.hero-prev { left:20px; }
.hero-next { right:20px; }
.hero-dots { position:absolute; z-index:3; right:28px; bottom:26px; display:flex; gap:7px; }
.hero-dot { width:18px; height:3px; border-radius:2px; background:rgba(255,255,255,.3); }
.hero-dot.active { width:36px; height:3px; background:#fff; }

.chips { margin:0 0 34px; gap:9px; padding:0 0 2px; }
.chip { padding:9px 17px; border:1px solid var(--border); border-radius:var(--r-full); background:rgba(255,255,255,.035); color:var(--text-secondary); font-size:12px; font-weight:600; }
.chip:hover { color:var(--text-primary); border-color:var(--border-accent); background:var(--accent-dim); }
.section-header { margin:0 0 20px; align-items:center; }
.section-title { display:flex; align-items:center; gap:12px; font-size:22px; font-weight:750; letter-spacing:-.03em; }
.section-title::before { content:""; width:4px; height:22px; border-radius:3px; background:linear-gradient(180deg,var(--cyan),var(--accent)); box-shadow:0 0 14px var(--accent-glow); }
.count { color:var(--text-tertiary); font-size:12px; }

.video-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:30px 18px; }
.video-card { min-width:0; border-radius:var(--r); transition:transform .3s var(--ease); }
.video-card:hover { transform:translateY(-7px); }
.video-card .cover { border-radius:14px; border:1px solid var(--border); background:var(--surface-raised); box-shadow:0 8px 22px rgba(0,0,0,.12); }
.video-card:hover .cover { border-color:var(--border-hover); box-shadow:0 20px 44px rgba(0,0,0,.28); }
.video-card .cover img { transition:transform .55s var(--ease),filter .3s; }
.video-card:hover .cover img { transform:scale(1.045); filter:saturate(1.12); }
.video-card .info { padding:12px 3px 0; }
.video-card .title { min-height:43px; font-size:14px; line-height:1.5; font-weight:650; color:var(--text-primary); }
.video-card .up { margin-top:7px; color:var(--text-tertiary); font-size:11px; }
.up-badge { padding:2px 5px; border:1px solid var(--border); border-radius:4px; background:transparent; color:var(--text-tertiary); font-size:8px; }
.video-card .cover .duration,.video-card .cover .play-count { bottom:8px; padding:3px 7px; border:1px solid rgba(255,255,255,.12); border-radius:6px; background:rgba(5,7,12,.66); box-shadow:none; backdrop-filter:blur(8px); }
.video-card .play-glass { width:48px; height:48px; border:1px solid rgba(255,255,255,.25); background:rgba(8,10,18,.45); box-shadow:0 8px 24px rgba(0,0,0,.25); }
.video-card .play-glass::before { display:none; }
.scroll-sentinel { height:36px; }
.scroll-end { color:var(--text-tertiary); }

.ranking-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.rank-item { min-width:0; padding:13px; border:1px solid var(--border); border-radius:var(--r); background:rgba(255,255,255,.025); }
.rank-item:hover { background:var(--surface-raised); border-color:var(--border-hover); transform:translateY(-2px); }
.rank-item .rank-num { font-size:28px; font-weight:850; color:var(--text-tertiary); }
.rank-item:nth-child(-n+3) .rank-num { color:var(--accent-hover); }

.video-page { gap:28px; }
.player-container { border:1px solid var(--border); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-lg); }
.video-info { margin-top:18px; padding:24px; border:1px solid var(--border); border-radius:18px; background:var(--surface-raised); }
.video-info h1 { font-size:22px; letter-spacing:-.025em; }
.video-actions button { border-radius:var(--r-full); }
.sidebar { padding:18px; border:1px solid var(--border); border-radius:18px; background:var(--surface-raised); }
.sidebar h3 { margin-bottom:15px; }
.related-item { padding:8px; border-radius:12px; }
.related-item:hover { background:var(--surface-hover); }

.loading { background:rgba(7,9,15,.35); backdrop-filter:blur(6px); }
.spinner { border-top-color:var(--accent); }
#backToTop { right:28px; bottom:28px; width:44px; height:44px; border:1px solid var(--border); background:rgba(17,20,30,.8); box-shadow:var(--shadow-md); }

@media (max-width:1200px) {
  .live-pill { display:none; }
  .video-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .hero-slide { min-height:390px; }
}
@media (max-width:900px) {
  :root { --header-h:68px; }
  #header { gap:14px; padding:0 20px; backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(7,9,15,.97); }
  [data-theme="light"] #header { background:rgba(255,255,255,.97); }
  .logo-beta { display:none; }
  .search-box { width:auto; flex:1; min-width:160px; }
  #navTabs { position:fixed; left:0; right:0; bottom:0; height:62px; justify-content:center; gap:22px; background:rgba(7,9,15,.93); border-top:1px solid var(--border); backdrop-filter:blur(20px); z-index:160; }
  [data-theme="light"] #navTabs { background:rgba(255,255,255,.94); }
  .nav-tab { padding:15px 12px; }
  .nav-tab::after { bottom:7px; }
  #main { padding-bottom:96px; }
  .video-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hero-slide { min-height:350px; }
  .hero-info { max-width:70%; }
  .ranking-list { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  :root { --header-h:64px; }
  #header { padding:0 14px; gap:10px; }
  .logo-name { display:none; }
  .logo svg { width:31px; height:31px; }
  .search-box { height:40px; min-width:0; }
  .search-leading { margin-left:12px; }
  .search-box input { padding:0 8px; }
  .search-box button { min-width:40px; width:40px; padding:0; }
  .search-box button span { display:none; }
  #themeToggle { width:38px; height:38px; }
  #main { padding:16px 14px 92px; }
  .hero { border-radius:18px; margin-bottom:16px; }
  .hero-slide { min-height:390px; aspect-ratio:4/5; }
  .hero-slide::after { background:linear-gradient(0deg,rgba(4,6,12,.96),rgba(4,6,12,.06) 85%); }
  .hero-info { left:22px; right:22px; bottom:48px; max-width:none; }
  .hero-title { font-size:26px; }
  .hero-meta { flex-wrap:wrap; gap:8px 14px; }
  .hero-arrow { display:none; }
  .hero-dots { right:22px; bottom:20px; }
  .chips { margin-bottom:26px; }
  .section-title { font-size:19px; }
  .video-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 11px; }
  .video-card .title { font-size:13px; min-height:39px; }
  .video-page { display:block; }
  .sidebar { margin-top:20px; }
  .video-info { padding:18px; }
}
@media (max-width:390px) {
  .video-grid { grid-template-columns:1fr; }
  .video-card .title { min-height:auto; font-size:14px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}