:root {
  --bg-primary: #10122b;
  --bg-secondary: #1a1e40;
  --bg-navbar: #141733;
  --bg-card: rgba(26,30,64,.82);
  --bg-hover: rgba(39,43,85,.94);
  --accent: #f2a7d6;
  --accent-hover: #ffc0e5;
  --text-main: #f7f3ff;
  --text-muted: #aaa9c9;
  --border: rgba(194,190,255,.22);
  --shadow: 0 20px 48px rgba(4,5,24,.38);
  --font: "DM Sans", Arial, sans-serif;
  --moon: #f4dfad;
  --periwinkle: #9da8ff;
}

body {
  background:
    radial-gradient(circle at 18px 24px, rgba(255,255,255,.22) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 8%, rgba(157,168,255,.22), transparent 30rem),
    linear-gradient(160deg, #0c0e23 0%, #171938 54%, #10122b 100%);
  background-size: 92px 92px, auto, auto;
}
.notice-bar { min-height: 30px; background: #23264c; color: #dedbff; font-size: .7rem; font-weight: 600; letter-spacing: .1em; }
.site-header { background: rgba(16,18,43,.88); border-color: rgba(194,190,255,.18); box-shadow: 0 12px 42px rgba(4,5,24,.36); backdrop-filter: blur(16px); }
.top-line { padding-block: 1.05rem; }
.brand { gap: .78rem; color: var(--text-main); }
.brand-emblem {
  width: 45px; height: 45px; display: grid; place-items: center;
  color: var(--moon); border: 1px solid rgba(244,223,173,.44); border-radius: 50%;
  background: rgba(244,223,173,.05); font-family: Georgia, serif; font-size: 2rem;
  box-shadow: 0 0 25px rgba(244,223,173,.14);
}
.brand-lockup { display: grid; line-height: .92; }
.brand-name { font-family: "Fraunces", Georgia, serif; font-size: 2rem; font-weight: 500; letter-spacing: -.025em; }
.brand-edition { margin-top: .4rem; color: #c9c7ff; font-size: .55rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }

.search-form, .language-control select { background: rgba(8,10,28,.62); color: var(--text-main); border-color: rgba(194,190,255,.26); }
.search-form { border-radius: 999px; }
.search-form button { margin: 4px; border-radius: 50%; background: var(--periwinkle); color: #11142d; }
.category-nav { padding-bottom: 1rem; gap: .55rem; }
.nav-chip { background: rgba(24,27,59,.7); color: #d8d6ef; border-color: rgba(194,190,255,.2); border-radius: 999px; font-weight: 600; }
.nav-chip.active, .nav-chip:hover { background: var(--accent); border-color: var(--accent); color: #24132a; }

.page { padding-top: 1.6rem; }
.section-head { min-height: 92px; align-items: center; padding: 1rem 1.2rem; border: 1px solid rgba(194,190,255,.18); border-radius: 24px; background: rgba(20,23,51,.56); box-shadow: var(--shadow); }
.section-head h1, .section-title-row h2, .video-details h1, .sidebar h2 { font-family: "Fraunces", Georgia, serif; font-weight: 500; }
.section-head h1 { font-size: clamp(2rem, 4.5vw, 3.6rem); letter-spacing: -.035em; }
.sort-pill { background: rgba(244,223,173,.08); color: var(--moon); border-color: rgba(244,223,173,.35); border-radius: 999px; font-weight: 600; }
.home-sections { gap: 2.4rem; }
.content-section { padding: .2rem; }
.section-title-row { min-height: 46px; border-bottom: 0; }
.section-title-row h2 { padding-left: 1rem; font-size: 1.55rem; }
.section-title-row h2::before { top: .3rem; width: 6px; height: 6px; border-radius: 50%; background: var(--moon); box-shadow: 0 0 12px var(--moon); }
.view-all-link { color: #c9c7ff; font-weight: 600; }

.video-grid { gap: 1.15rem; }
.video-card { background: rgba(26,30,64,.82); border-color: rgba(194,190,255,.18); border-radius: 22px; box-shadow: var(--shadow); backdrop-filter: blur(8px); }
.video-card:hover { background: rgba(39,43,85,.94); border-color: rgba(242,167,214,.55); transform: translateY(-5px); }
.thumb-box { border-radius: 21px 21px 0 0; }
.thumb-box img { filter: saturate(.92) brightness(.96); transition: transform .45s ease, filter .45s ease; }
.video-card:hover .thumb-box img { filter: saturate(1.08) brightness(1); transform: scale(1.025); }
.card-play-button, .detail-play-button { background: rgba(244,223,173,.9); border: 0; box-shadow: 0 8px 28px rgba(4,5,24,.5); }
.card-play-button span, .detail-play-button span { border-left-color: #171938; }
.card-body { padding: .8rem .9rem 1rem; text-align: left; }
.card-body h2 { font-weight: 600; }
.card-meta { color: #aaa9c9; }
.page-button { border-radius: 50%; background: rgba(26,30,64,.82); color: #fff; }
.page-button.active, .page-button:hover { background: var(--accent); border-color: var(--accent); color: #24132a; }
.player-frame { border-color: rgba(194,190,255,.26); border-radius: 24px; box-shadow: var(--shadow); }
.video-details, .sidebar { background: rgba(26,30,64,.84); border-color: rgba(194,190,255,.2); border-radius: 22px; box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.meta-row span { background: rgba(157,168,255,.12); }
.tag-list span { background: rgba(242,167,214,.1); color: #ffc8e9; border: 1px solid rgba(242,167,214,.22); }
.site-footer { border-color: rgba(194,190,255,.18); color: #8584a9; }

@media (min-width: 980px) {
  .watch-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 1.2rem; }
  .watch-layout .sidebar { margin-top: 0; }
  .home-page .content-section:nth-child(3n + 2) { padding-inline: 2vw; }
}
@media (max-width: 700px) {
  .brand-name { font-size: 1.7rem; }
  .brand-edition { letter-spacing: .1em; }
  .section-head { border-radius: 18px; }
  .video-card { border-radius: 18px; }
  .thumb-box { border-radius: 17px 17px 0 0; }
}