:root {
  --bg-primary: #071016;
  --bg-secondary: #0f1a22;
  --bg-navbar: rgba(8, 15, 21, 0.94);
  --bg-card: rgba(12, 22, 30, 0.94);
  --bg-hover: rgba(18, 31, 42, 0.98);
  --accent: #4cc9f0;
  --accent-hover: #74d8ff;
  --accent-red: #4cc9f0;
  --text-main: #eef7fb;
  --text-muted: #8fa7b5;
  --border: rgba(140, 180, 200, 0.22);
  --shadow: 0 14px 36px rgba(0, 0, 0, 0.36);
}

body {
  background:
    radial-gradient(circle at 18% 0%, rgba(76, 201, 240, 0.16), transparent 26rem),
    radial-gradient(circle at 100% 0%, rgba(116, 216, 255, 0.08), transparent 20rem),
    var(--bg-primary);
}

.notice-bar {
  background: rgba(10, 18, 25, 0.92);
  color: var(--text-main);
}

.site-header {
  background: rgba(7, 16, 22, 0.9);
  border-bottom-color: var(--border);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.26);
}

.language-control select,
.search-form,
.nav-chip,
.sort-pill,
.page-button,
.video-card,
.video-details,
.sidebar {
  box-shadow: var(--shadow);
}

.search-form,
.nav-chip,
.sort-pill,
.page-button,
.video-card,
.video-details,
.sidebar,
.empty-state,
.player-frame,
.download-link {
  border-radius: 16px;
}

.search-form {
  border-radius: 999px;
}

.nav-chip,
.sort-pill,
.page-button,
.download-link {
  border-radius: 999px;
}

.language-control select,
.search-form {
  background: rgba(13, 25, 34, 0.96);
  color: var(--text-main);
  border-color: var(--border);
}

.search-form button {
  background: linear-gradient(135deg, var(--accent), #1fb7e0);
}

.nav-chip,
.sort-pill,
.page-button {
  background: rgba(14, 24, 33, 0.96);
  color: var(--text-main);
  border-color: var(--border);
}

.nav-chip.active,
.nav-chip:hover,
.page-button.active,
.page-button:hover {
  background: linear-gradient(135deg, var(--accent), #1fb7e0);
  border-color: transparent;
  color: #041018;
}

.sort-pill {
  color: var(--accent-hover);
}

.video-card,
.video-details,
.sidebar,
.empty-state,
.player-frame {
  border-color: var(--border);
}

.video-card {
  background: linear-gradient(180deg, rgba(12, 22, 30, 0.94), rgba(9, 16, 22, 0.94));
}

.video-card:hover {
  background: var(--bg-hover);
  border-color: rgba(76, 201, 240, 0.46);
}

.section-title-row {
  border-bottom-color: var(--border);
}

.section-title-row h2::before {
  background: var(--accent);
}

.card-meta,
.section-head p,
.side-item p,
.back-link,
.site-footer {
  color: var(--text-muted);
}

.duration,
.download-link,
.card-play-button,
.detail-play-button {
  background: linear-gradient(135deg, var(--accent), #1fb7e0);
}

.duration {
  color: #031018;
}

.tag-list span {
  background: rgba(76, 201, 240, 0.12);
  color: var(--accent-hover);
}

.meta-row span {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-main);
}

.site-footer {
  border-top-color: var(--border);
}

@media (min-width: 980px) {
  .home-page .site-header {
    position: sticky;
  }

  .home-page .category-nav {
    position: sticky;
    top: 1rem;
    align-self: start;
    width: 220px;
    max-height: calc(100vh - 2rem);
    margin: 1rem 0 0 max(15px, calc((100vw - 1440px) / 2 + 15px));
    padding: 0.85rem;
    flex-direction: column;
    overflow-y: auto;
    background: rgba(8, 18, 25, 0.96);
    border: 1px solid var(--border);
    border-radius: 18px;
    float: left;
  }

  .home-page .nav-chip {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }

  .home-page .page {
    padding-left: 245px;
  }
}