:root{
  --vp-bg:#f6f8fc;
  --vp-card:#ffffff;
  --vp-card-2:#f9fbff;
  --vp-ink:#101828;
  --vp-muted:#667085;
  --vp-line:#e8edf5;
  --vp-blue:#1769ff;
  --vp-blue-dark:#0f56d9;
  --vp-blue-soft:#edf4ff;
  --vp-shadow:0 16px 44px rgba(33,52,86,.08);
  --vp-radius:24px;
}
*{box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--vp-ink);background:var(--vp-bg)}
a{color:inherit}
button,input{font:inherit}
.video-platform{min-height:100vh;background:linear-gradient(180deg,#fff 0,#f8faff 18%,#f6f8fc 100%)}
.video-platform svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.video-platform svg path[fill]{fill:currentColor;stroke:none}
.vp-topbar{height:78px;position:sticky;top:0;z-index:80;display:grid;grid-template-columns:230px minmax(260px,650px) 1fr;align-items:center;gap:28px;padding:0 28px;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);border-bottom:1px solid rgba(228,234,244,.95)}
.vp-logo{font-family:Sora,Inter,sans-serif;font-weight:800;font-size:1.65rem;letter-spacing:-.06em;text-decoration:none}.vp-logo span{color:var(--vp-blue)}
.vp-search{height:48px;display:flex;align-items:center;gap:12px;padding:0 17px;background:#f5f7fb;border:1px solid #e9edf4;border-radius:16px;color:#8390a5;transition:.2s}.vp-search:focus-within{background:#fff;border-color:#b9d2ff;box-shadow:0 0 0 4px rgba(23,105,255,.08)}.vp-search input{width:100%;border:0;outline:0;background:transparent;color:var(--vp-ink);font-size:.98rem}.vp-search input::placeholder{color:#98a2b3}
.vp-top-actions{justify-self:end;display:flex;align-items:center;gap:16px}.vp-text-link{font-size:.9rem;color:#576579;text-decoration:none}.vp-avatar{width:39px;height:39px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#1769ff,#73a5ff);color:white;font-weight:800;box-shadow:0 8px 20px rgba(23,105,255,.2)}
.vp-mobile-menu{display:none;width:42px;height:42px;border:0;background:#f4f7fb;border-radius:13px;align-items:center;justify-content:center;color:#334155}
.vp-layout{display:grid;grid-template-columns:220px minmax(0,1fr) 318px;gap:28px;max-width:1580px;margin:0 auto;padding:26px 28px 52px}
.vp-sidebar{position:sticky;top:104px;align-self:start;min-height:calc(100vh - 130px);padding:8px 10px 18px 0}
.vp-nav,.vp-category-nav{display:flex;flex-direction:column;gap:5px}.vp-nav a,.vp-category-nav button,.vp-category-nav a{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 14px;border:0;border-radius:14px;background:transparent;text-decoration:none;color:#566176;font-weight:600;font-size:.94rem;text-align:left;cursor:pointer}.vp-nav a span{display:grid;place-items:center}.vp-nav a:hover,.vp-category-nav button:hover,.vp-category-nav a:hover,.vp-category-nav a.active{background:#f0f4fa;color:#223047}.vp-nav a.active{background:var(--vp-blue-soft);color:var(--vp-blue)}.vp-nav a.active svg{stroke-width:2.1}.vp-side-divider{height:1px;background:var(--vp-line);margin:18px 10px}.vp-side-label{padding:0 14px 9px;color:#98a2b3;font-size:.875rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.vp-category-nav button i,.vp-category-nav a i{width:8px;height:8px;border-radius:50%;background:#c7d0df}.vp-category-nav button:nth-child(1) i,.vp-category-nav a:nth-child(1) i{background:#608dff}.vp-category-nav button:nth-child(2) i,.vp-category-nav a:nth-child(2) i{background:#56c8a6}.vp-category-nav button:nth-child(3) i,.vp-category-nav a:nth-child(3) i{background:#a77bf3}.vp-category-nav button:nth-child(4) i,.vp-category-nav a:nth-child(4) i{background:#f7ad55}.vp-category-nav button:nth-child(5) i,.vp-category-nav a:nth-child(5) i{background:#f47d8f}.vp-category-nav button:nth-child(6) i,.vp-category-nav a:nth-child(6) i{background:#63bde4}.vp-side-foot{margin:28px 12px 0;padding:18px;border:1px solid var(--vp-line);border-radius:18px;background:#fff}.vp-side-foot strong{font-family:Sora;font-size:.95rem}.vp-side-foot p{margin:7px 0 0;color:#8a96a8;font-size:.875rem;line-height:1.6}
.vp-main{min-width:0}
.vp-featured{position:relative;min-height:410px;overflow:hidden;border-radius:28px;background:#0f172a;box-shadow:var(--vp-shadow);isolation:isolate}.vp-featured-media{position:absolute;inset:0;display:block}.vp-featured-media img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85;transition:transform .55s ease}.vp-featured:hover .vp-featured-media img{transform:scale(1.02)}.vp-featured-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,18,36,.94) 0%,rgba(8,18,36,.72) 42%,rgba(8,18,36,.18) 78%,rgba(8,18,36,.1) 100%),linear-gradient(0deg,rgba(8,18,36,.38),transparent 55%)}.vp-featured-copy{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center;min-height:410px;width:min(620px,68%);padding:54px 48px;color:#fff;pointer-events:none}.vp-kicker{display:inline-flex;width:max-content;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18);font-size:.875rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}.vp-featured-copy h1{font-family:Sora,Inter,sans-serif;font-size:clamp(2rem,3.6vw,3.6rem);line-height:1.04;letter-spacing:-.05em;margin:16px 0 13px}.vp-featured-copy p{margin:0;max-width:590px;color:#dfe8f7;font-size:1rem;line-height:1.7}.vp-feature-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:17px;color:#c6d2e4;font-size:.875rem}.vp-feature-meta b{font-weight:400;opacity:.45}.vp-feature-actions{display:flex;gap:10px;margin-top:24px;pointer-events:auto}.vp-play-large{position:absolute;right:40px;bottom:36px;z-index:4;width:64px;height:64px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.95);color:var(--vp-blue);box-shadow:0 14px 34px rgba(0,0,0,.22)}.vp-play-large svg{width:27px;height:27px;fill:currentColor;stroke:none;margin-left:3px}
.vp-btn{height:43px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:13px;padding:0 15px;text-decoration:none;font-weight:700;font-size:.88rem;cursor:pointer}.vp-btn.primary{background:var(--vp-blue);color:#fff;box-shadow:0 10px 24px rgba(23,105,255,.22)}.vp-btn.primary:hover{background:var(--vp-blue-dark)}.vp-btn.soft{background:#fff;border-color:#e7edf6;color:#344054}.vp-featured .vp-btn.soft{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18);color:#fff}.vp-btn svg{width:18px;height:18px}
.vp-section{padding-top:32px}.vp-section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:17px}.vp-section-head small,.vp-right-head small{display:block;color:#8a96a8;font-size:.875rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}.vp-section-head h2,.vp-right-head h3{font-family:Sora,Inter,sans-serif;margin:0;letter-spacing:-.035em}.vp-section-head h2{font-size:1.35rem}.vp-section-head>a{font-size:.875rem;color:var(--vp-blue);text-decoration:none;font-weight:700}.vp-chips{display:flex;gap:9px;overflow:auto;padding-bottom:4px;scrollbar-width:none}.vp-chips::-webkit-scrollbar{display:none}.vp-chips button,.vp-chips a{white-space:nowrap;border:1px solid #e8edf5;background:#fff;color:#596579;padding:9px 14px;border-radius:999px;font-weight:650;font-size:.875rem;cursor:pointer}.vp-chips button:hover,.vp-chips button.active,.vp-chips a:hover,.vp-chips a.active{background:#101828;color:#fff;border-color:#101828}
.vp-video-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 17px}.vp-video-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.vp-video-card{min-width:0;text-decoration:none}.vp-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:17px;background:#e9edf5;box-shadow:0 8px 24px rgba(32,51,82,.06)}.vp-thumb img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .28s ease}.vp-video-card:hover .vp-thumb img{transform:scale(1.035)}.vp-thumb-play{position:absolute;left:12px;bottom:12px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.94);color:var(--vp-blue);opacity:0;transform:translateY(5px);transition:.2s}.vp-video-card:hover .vp-thumb-play{opacity:1;transform:none}.vp-thumb-play svg{width:17px;height:17px;fill:currentColor;stroke:none;margin-left:2px}.vp-card-body{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;padding:12px 3px 0}.vp-channel-dot{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#edf3ff;color:#2d63d6;font-size:.875rem;font-weight:800}.vp-card-body h3{font-size:.93rem;line-height:1.38;margin:0;color:#182230;font-weight:750;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.vp-card-body p{margin:5px 0 0;color:#7b8798;font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vp-card-meta{display:flex;gap:6px;align-items:center;margin-top:6px;color:#9aa4b2;font-size:.875rem}.vp-card-meta b{font-weight:400;color:#c4cbd5}.vp-empty{padding:30px;border:1px dashed #d8e0ec;background:#fff;border-radius:18px;color:#7b8798;text-align:center}
.vp-right{position:sticky;top:104px;align-self:start;padding:20px;background:#fff;border:1px solid var(--vp-line);border-radius:24px;box-shadow:0 12px 32px rgba(33,52,86,.05)}.vp-right-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.vp-right-head h3{font-size:1.08rem}.vp-right-head>span{color:#31c48d;font-size:.875rem}.vp-mini-video{display:grid;grid-template-columns:26px 82px minmax(0,1fr);gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid #f0f2f6;text-decoration:none}.vp-mini-video:last-of-type{border-bottom:0}.vp-rank{font-family:Sora;color:#a2acbb;font-size:.875rem;font-weight:700}.vp-mini-video img{width:82px;aspect-ratio:16/10;object-fit:cover;border-radius:10px}.vp-mini-video strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.875rem;line-height:1.35}.vp-mini-video small{display:block;margin-top:4px;color:#8b96a5;font-size:.875rem}.vp-right-box{display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:15px;border-radius:16px;background:#f6f9ff}.vp-right-box>span{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:#fff;color:var(--vp-blue)}.vp-right-box strong{font-size:.875rem}.vp-right-box p{margin:4px 0 0;color:#8995a6;font-size:.875rem;line-height:1.5}
.vp-overlay{display:none}
/* Watch page */
.vp-watch-page{background:#fff}.vp-watch-layout{display:grid;grid-template-columns:minmax(0,1fr) 318px;gap:28px;max-width:1580px;margin:0 auto;padding:26px 28px 52px}.vp-watch-main{min-width:0}.vp-player{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:22px;background:#0b1020;box-shadow:0 18px 50px rgba(16,24,40,.12)}.vp-player iframe{width:100%;height:100%;border:0}.vp-watch-title{padding:20px 3px 4px}.vp-watch-badges{display:flex;gap:8px}.vp-watch-badges span{padding:6px 9px;border-radius:999px;background:#eef4ff;color:#2f65d7;font-size:.875rem;font-weight:800}.vp-watch-title h1{font-family:Sora,Inter,sans-serif;font-size:clamp(1.45rem,2.4vw,2.25rem);line-height:1.18;letter-spacing:-.04em;margin:12px 0 0}.vp-watch-actions{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 3px 20px;border-bottom:1px solid var(--vp-line)}.vp-watch-channel{display:flex;align-items:center;gap:11px}.vp-channel-avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#edf3ff;color:#2f65d7;font-weight:800}.vp-watch-channel strong{display:block;font-size:.9rem}.vp-watch-channel small{display:block;color:#8a96a8;font-size:.875rem;margin-top:3px}.vp-action-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.vp-content-card{margin-top:22px;border:1px solid var(--vp-line);border-radius:22px;background:#fff;overflow:hidden}.vp-content-tabs{display:flex;gap:4px;padding:9px 12px;border-bottom:1px solid var(--vp-line);background:#fbfcfe}.vp-content-tabs button{border:0;background:transparent;padding:10px 13px;border-radius:11px;color:#738094;font-weight:700;font-size:.875rem;cursor:pointer}.vp-content-tabs button.active{background:#fff;color:#172033;box-shadow:0 2px 10px rgba(27,39,64,.06)}.vp-tab-panel{display:none;padding:25px}.vp-tab-panel.active{display:block}.vp-tab-panel h2{font-family:Sora;margin:0 0 11px;font-size:1.2rem;letter-spacing:-.03em}.vp-tab-panel p,.vp-tab-panel li{color:#58667a;line-height:1.75;font-size:.95rem}.vp-tab-panel ul{margin:0;padding-left:20px}.vp-info-note{margin-top:18px;padding:14px 16px;border-radius:14px;background:#f5f8ff;color:#61708a;font-size:.875rem;line-height:1.65}.vp-info-note strong{color:#2c5fc7}.vp-muted{color:#8a96a8!important}.vp-watch-related{position:sticky;top:104px;align-self:start}.vp-section-head.compact{margin-bottom:10px}.vp-section-head.compact h2{font-size:1.1rem}.vp-related-card{display:grid;grid-template-columns:145px minmax(0,1fr);gap:11px;text-decoration:none;padding:10px 0;border-bottom:1px solid #f0f2f6}.vp-related-card img{width:145px;aspect-ratio:16/9;object-fit:cover;border-radius:12px}.vp-related-card strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.875rem;line-height:1.35}.vp-related-card small{display:block;color:#8b96a5;font-size:.875rem;margin-top:5px}.vp-related-card span{display:inline-block;margin-top:5px;color:#5576b6;background:#f3f7ff;border-radius:999px;padding:3px 7px;font-size:.875rem;font-weight:700}
@media(max-width:1280px){.vp-layout{grid-template-columns:205px minmax(0,1fr);}.vp-right{display:none}.vp-video-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.vp-video-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.vp-topbar{grid-template-columns:205px minmax(260px,620px) 1fr}}
@media(max-width:980px){.vp-topbar{grid-template-columns:auto 1fr auto;gap:12px;padding:0 18px}.vp-mobile-menu{display:flex}.vp-logo{font-size:1.45rem}.vp-search{grid-column:1/-1;grid-row:2;height:44px}.vp-topbar{height:auto;padding-top:11px;padding-bottom:11px}.vp-text-link{display:none}.vp-layout{grid-template-columns:1fr;padding:20px}.vp-sidebar{position:fixed;z-index:100;top:0;bottom:0;left:0;width:270px;min-height:100vh;padding:22px 16px;background:#fff;transform:translateX(-105%);transition:transform .25s ease;box-shadow:20px 0 50px rgba(16,24,40,.14)}.vp-sidebar.open{transform:none}.vp-overlay{position:fixed;inset:0;z-index:90;background:rgba(15,23,42,.22);backdrop-filter:blur(2px)}.vp-overlay.show{display:block}.vp-featured{min-height:370px}.vp-featured-copy{min-height:370px;width:75%;padding:38px}.vp-watch-layout{grid-template-columns:1fr;padding:20px}.vp-watch-related{position:static}.vp-watch-related{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.vp-watch-related .vp-section-head{grid-column:1/-1}.vp-related-card{grid-template-columns:1fr;border:1px solid var(--vp-line);padding:0 0 10px;border-radius:14px;overflow:hidden}.vp-related-card img{width:100%;border-radius:0}.vp-related-card div{padding:0 10px}}
@media(max-width:720px){.vp-top-actions{display:none}.vp-featured{min-height:480px}.vp-featured-media img{height:55%;object-position:center top}.vp-featured-shade{background:linear-gradient(0deg,rgba(8,18,36,.98) 0%,rgba(8,18,36,.94) 47%,rgba(8,18,36,.18) 75%,rgba(8,18,36,.12) 100%)}.vp-featured-copy{justify-content:flex-end;min-height:480px;width:100%;padding:26px 24px}.vp-featured-copy h1{font-size:1.72rem}.vp-featured-copy p{font-size:.9rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.vp-play-large{right:20px;top:28%;bottom:auto;width:52px;height:52px}.vp-feature-actions{margin-top:18px}.vp-video-grid,.vp-video-grid-3{grid-template-columns:repeat(2,minmax(0,1fr));gap:19px 12px}.vp-card-body{grid-template-columns:30px minmax(0,1fr);gap:8px}.vp-channel-dot{width:30px;height:30px}.vp-card-body h3{font-size:.875rem}.vp-watch-actions{align-items:flex-start;flex-direction:column}.vp-action-row{justify-content:flex-start}.vp-watch-related{grid-template-columns:1fr 1fr}.vp-related-card strong{font-size:.875rem}}
@media(max-width:520px){.vp-layout,.vp-watch-layout{padding:14px}.vp-featured{border-radius:22px}.vp-featured-copy{padding:22px 20px}.vp-featured-copy h1{font-size:1.5rem}.vp-feature-actions .vp-btn.soft{display:none}.vp-section{padding-top:27px}.vp-video-grid,.vp-video-grid-3{grid-template-columns:1fr 1fr}.vp-thumb{border-radius:13px}.vp-card-body{display:block;padding-top:9px}.vp-channel-dot{display:none}.vp-card-body h3{font-size:.875rem;line-height:1.34}.vp-card-body p{font-size:.875rem}.vp-card-meta{font-size:.875rem}.vp-watch-layout{padding-top:14px}.vp-player{border-radius:14px}.vp-watch-title h1{font-size:1.35rem}.vp-content-card{border-radius:16px}.vp-tab-panel{padding:19px}.vp-watch-related{grid-template-columns:1fr}.vp-related-card{grid-template-columns:130px minmax(0,1fr);padding:8px;border-radius:14px}.vp-related-card img{width:130px;border-radius:10px}.vp-related-card div{padding:0}.vp-content-tabs{overflow:auto;scrollbar-width:none}.vp-content-tabs::-webkit-scrollbar{display:none}}

/* v1.5.2 — Watch page alignment */
.vp-watch-page .vp-search{max-width:650px;width:100%}
.vp-watch-page .vp-watch-related{width:100%}
@media(max-width:1280px){.vp-watch-layout{grid-template-columns:minmax(0,1fr) 300px;gap:24px;max-width:1280px}.vp-watch-page .vp-search{max-width:620px}}
@media(max-width:980px){.vp-watch-layout{grid-template-columns:1fr;max-width:none;padding:20px}.vp-watch-page .vp-search{max-width:none}}
@media(max-width:520px){.vp-watch-layout{padding:14px}}

/* v1.5.3 — Header container alignment */
.vp-topbar{
  display:block;
  height:68px;
  padding:0;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid #e8edf5;
  backdrop-filter:blur(18px);
}
.vp-topbar-inner{
  width:100%;
  max-width:1440px;
  height:68px;
  margin:0 auto;
  padding:0 28px;
  display:grid;
  grid-template-columns:210px minmax(360px,580px) 1fr;
  align-items:center;
  gap:28px;
}
.vp-topbar .vp-logo{justify-self:start}
.vp-topbar .vp-search{width:100%;height:46px;border-radius:15px}
.vp-topbar .vp-top-actions{justify-self:end}
.vp-topbar .vp-avatar{width:38px;height:38px}

/* Keep homepage and watch page on the same visual axis */
.vp-layout,.vp-watch-layout{max-width:1440px}
.vp-watch-page .vp-search{max-width:none;width:100%}

@media(max-width:1280px){
  .vp-topbar-inner{grid-template-columns:190px minmax(320px,560px) 1fr;padding:0 24px;gap:22px}
  .vp-layout,.vp-watch-layout{max-width:1240px}
}
@media(max-width:980px){
  .vp-topbar{height:auto;padding:0}
  .vp-topbar-inner{
    height:auto;
    min-height:68px;
    grid-template-columns:auto 1fr auto;
    gap:12px;
    padding:11px 18px;
  }
  .vp-mobile-menu{display:flex}
  .vp-topbar .vp-logo{font-size:1.45rem}
  .vp-topbar .vp-search{grid-column:1/-1;grid-row:2;height:44px}
}
@media(max-width:720px){
  .vp-topbar-inner{padding:10px 14px}
}

/* v1.5.4 — Stable shell / anti layout-jump */
:root{
  --vp-shell-max:1440px;
  --vp-shell-pad:28px;
  --vp-side-width:220px;
  --vp-right-width:318px;
  --vp-shell-gap:28px;
  --vp-header-height:68px;
}

/* Keep viewport width stable when moving between pages with different heights. */
html{
  scrollbar-gutter:stable;
  overflow-y:scroll;
}
body.video-platform{
  min-width:320px;
  min-height:100vh;
  overflow-x:hidden;
}

/* One shared shell for Home + Watch. */
.vp-topbar{
  left:0;
  right:0;
  width:100%;
  min-height:var(--vp-header-height);
}
.vp-topbar-inner,
.vp-layout,
.vp-watch-layout{
  width:100%;
  max-width:var(--vp-shell-max)!important;
  margin-left:auto;
  margin-right:auto;
}
.vp-topbar-inner{
  height:var(--vp-header-height);
  padding-left:var(--vp-shell-pad);
  padding-right:var(--vp-shell-pad);
  grid-template-columns:var(--vp-side-width) minmax(360px,580px) 1fr;
  gap:var(--vp-shell-gap);
}
.vp-layout{
  grid-template-columns:var(--vp-side-width) minmax(0,1fr) var(--vp-right-width);
  gap:var(--vp-shell-gap);
  padding-left:var(--vp-shell-pad);
  padding-right:var(--vp-shell-pad);
}

/* Watch page keeps the same main-content axis as Home without showing a sidebar.
   Column 1 is intentionally reserved as shell space, so the page does not jump sideways. */
.vp-watch-layout{
  grid-template-columns:var(--vp-side-width) minmax(0,1fr) var(--vp-right-width);
  gap:var(--vp-shell-gap);
  padding-left:var(--vp-shell-pad);
  padding-right:var(--vp-shell-pad);
}
.vp-watch-main{
  grid-column:2;
  min-width:0;
}
.vp-watch-related{
  grid-column:3;
  min-width:0;
}

/* Reserve media geometry before remote YouTube assets finish loading. */
.vp-player,
.vp-thumb,
.vp-related-card img,
.vp-mini-video img{
  contain:layout paint;
}
.vp-player iframe{
  display:block;
}
.vp-featured-media img,
.vp-thumb img,
.vp-related-card img,
.vp-mini-video img{
  font-size:0;
}

/* Avoid anchor correction moving the shell when remote media arrives. */
.vp-layout,
.vp-watch-layout,
.vp-main,
.vp-watch-main{
  overflow-anchor:none;
}

@media(max-width:1280px){
  :root{
    --vp-shell-pad:24px;
    --vp-side-width:205px;
    --vp-shell-gap:24px;
  }
  .vp-topbar-inner{
    grid-template-columns:var(--vp-side-width) minmax(320px,560px) 1fr;
    padding-left:var(--vp-shell-pad);
    padding-right:var(--vp-shell-pad);
  }
  .vp-layout{
    grid-template-columns:var(--vp-side-width) minmax(0,1fr);
  }
  .vp-watch-layout{
    grid-template-columns:var(--vp-side-width) minmax(0,1fr);
  }
  .vp-watch-main{
    grid-column:2;
  }
  .vp-watch-related{
    grid-column:2;
    position:static;
    margin-top:8px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .vp-watch-related .vp-section-head{
    grid-column:1/-1;
  }
  .vp-watch-related .vp-related-card{
    grid-template-columns:145px minmax(0,1fr);
    border:1px solid var(--vp-line);
    padding:8px;
    border-radius:14px;
  }
}

@media(max-width:980px){
  :root{
    --vp-shell-pad:20px;
    --vp-shell-gap:20px;
  }
  html{overflow-y:auto}
  .vp-topbar-inner{
    grid-template-columns:auto 1fr auto;
    padding:11px 18px;
  }
  .vp-layout,
  .vp-watch-layout{
    grid-template-columns:1fr;
    padding-left:var(--vp-shell-pad);
    padding-right:var(--vp-shell-pad);
  }
  .vp-watch-main,
  .vp-watch-related{
    grid-column:1;
  }
  .vp-watch-related{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:520px){
  :root{--vp-shell-pad:14px}
  .vp-layout,
  .vp-watch-layout{
    padding-left:var(--vp-shell-pad);
    padding-right:var(--vp-shell-pad);
  }
  .vp-watch-related{
    grid-template-columns:1fr;
  }
}


/* v1.5.5 — Fast media: local WebP thumbnail cache + click-to-load YouTube */
.vp-featured-media img,
.vp-thumb img,
.vp-mini-video img,
.vp-related-card img,
.vp-player-facade>img{
  content-visibility:auto;
  backface-visibility:hidden;
}
.vp-player-facade{
  cursor:pointer;
  isolation:isolate;
  outline:0;
}
.vp-player-facade>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  z-index:1;
}
.vp-player-facade .vp-player-shade{
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(180deg,rgba(5,10,20,.04),rgba(5,10,20,.20));
  transition:background .2s ease;
}
.vp-player-facade:hover .vp-player-shade,
.vp-player-facade:focus-visible .vp-player-shade{
  background:linear-gradient(180deg,rgba(5,10,20,.01),rgba(5,10,20,.12));
}
.vp-youtube-play{
  position:absolute;
  z-index:3;
  left:50%;
  top:50%;
  width:76px;
  height:54px;
  transform:translate(-50%,-50%);
  border-radius:15px;
  display:grid;
  place-items:center;
  background:#ff0033;
  box-shadow:0 14px 36px rgba(0,0,0,.24);
  transition:transform .18s ease,filter .18s ease;
}
.vp-youtube-play i{
  display:block;
  width:0;
  height:0;
  margin-left:4px;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:17px solid #fff;
}
.vp-player-facade:hover .vp-youtube-play,
.vp-player-facade:focus-visible .vp-youtube-play{
  transform:translate(-50%,-50%) scale(1.06);
  filter:brightness(1.04);
}
.vp-player-hint{
  position:absolute;
  z-index:3;
  left:18px;
  bottom:16px;
  padding:8px 11px;
  border-radius:10px;
  background:rgba(9,16,29,.72);
  color:#fff;
  font-size:.875rem;
  font-weight:700;
  backdrop-filter:blur(8px);
}
.vp-player.is-playing{cursor:default}
.vp-player.is-playing iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  z-index:5;
}
@media(max-width:520px){
  .vp-youtube-play{width:62px;height:44px;border-radius:13px}
  .vp-youtube-play i{border-top-width:8px;border-bottom-width:8px;border-left-width:14px}
  .vp-player-hint{left:10px;bottom:10px;font-size:.875rem}
}

/* v1.5.6 — Professional context rail for watch page */
.vp-watch-rail{
  grid-column:1;
  align-self:start;
  position:sticky;
  top:92px;
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
  padding:2px 0 22px;
}
.vp-rail-back{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:0 12px;
  border:1px solid var(--vp-line);
  border-radius:14px;
  background:#fff;
  color:#24324a;
  text-decoration:none;
  box-shadow:0 7px 24px rgba(25,42,70,.045);
}
.vp-rail-back span,
.vp-rail-link span{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  flex:0 0 18px;
  color:#5f6f86;
}
.vp-rail-back svg,
.vp-rail-link svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.vp-rail-back b{font-size:.875rem;font-weight:750}
.vp-rail-card{
  border:1px solid var(--vp-line);
  background:linear-gradient(180deg,#fff 0%,#fbfcff 100%);
  border-radius:18px;
  padding:15px;
  box-shadow:0 10px 28px rgba(25,42,70,.045);
}
.vp-rail-eyebrow,
.vp-rail-label{
  color:#97a3b4;
  font-size:.875rem;
  font-weight:800;
  letter-spacing:.1em;
}
.vp-rail-channel{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:12px;
}
.vp-rail-avatar{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  flex:0 0 38px;
  border-radius:12px;
  background:#edf4ff;
  color:#2168ee;
  font-weight:800;
  box-shadow:inset 0 0 0 1px #dce9ff;
}
.vp-rail-channel strong{
  display:block;
  color:#182230;
  font-size:.875rem;
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
}
.vp-rail-channel small{
  display:block;
  color:#96a1b0;
  font-size:.875rem;
  margin-top:3px;
}
.vp-rail-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}
.vp-rail-meta span{
  padding:5px 7px;
  border-radius:999px;
  background:#f2f6fd;
  color:#55709b;
  font-size:.875rem;
  font-weight:750;
}
.vp-rail-section{
  border-top:1px solid #edf0f5;
  border-bottom:1px solid #edf0f5;
  padding:14px 0;
}
.vp-rail-label{padding:0 10px 8px}
.vp-rail-link{
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  gap:10px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:#5f6d81;
  padding:0 11px;
  font:inherit;
  font-size:.875rem;
  font-weight:700;
  text-align:left;
  cursor:pointer;
  transition:.18s ease;
}
.vp-rail-link:hover{background:#f6f8fc;color:#23334d}
.vp-rail-link.active{
  background:#edf4ff;
  color:#1b63e8;
}
.vp-rail-link.active span{color:#1b63e8}
.vp-rail-note{
  display:flex;
  gap:9px;
  align-items:flex-start;
  padding:12px;
  border-radius:14px;
  background:#f7f9fc;
  color:#6f7d90;
}
.vp-rail-dot{
  width:8px;
  height:8px;
  flex:0 0 8px;
  margin-top:5px;
  border-radius:50%;
  background:#2ec8a4;
  box-shadow:0 0 0 4px rgba(46,200,164,.10);
}
.vp-rail-note strong{display:block;color:#26344a;font-size:.875rem}
.vp-rail-note p{margin:4px 0 0;font-size:.875rem;line-height:1.5}

@media(max-width:1280px){
  .vp-watch-rail{grid-column:1;top:90px}
}
@media(max-width:980px){
  .vp-watch-rail{display:none}
}

/* v1.5.7 — Homepage polish: clean responsive shell, proper thumbnail geometry */
:root{
  --vp-shell-max:1480px;
  --vp-home-side:208px;
  --vp-home-right:300px;
  --vp-home-gap:24px;
}

/* Cleaner desktop proportions */
.vp-layout{
  grid-template-columns:var(--vp-home-side) minmax(0,1fr) var(--vp-home-right);
  gap:var(--vp-home-gap);
  padding-top:24px;
}
.vp-sidebar{
  padding-right:4px;
}
.vp-nav a,
.vp-category-nav button{
  min-height:44px;
  padding-left:13px;
  padding-right:13px;
  border-radius:12px;
}
.vp-side-foot{
  margin-left:6px;
  margin-right:6px;
  padding:16px;
  border-radius:16px;
}

/* Hero must read like a video platform, not an oversized poster */
.vp-featured{
  min-height:390px;
  border-radius:24px;
}
.vp-featured-copy{
  min-height:390px;
  width:min(600px,66%);
  padding:42px 40px;
}
.vp-featured-copy h1{
  max-width:560px;
  font-size:clamp(2rem,3vw,3rem);
  line-height:1.06;
  margin-top:14px;
  margin-bottom:12px;
  text-wrap:balance;
}
.vp-featured-copy p{
  max-width:540px;
  font-size:.94rem;
  line-height:1.62;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.vp-feature-actions{margin-top:20px}
.vp-play-large{
  right:30px;
  bottom:30px;
  width:58px;
  height:58px;
}

/* Popular rail: force true landscape thumbnails even when width/height attrs exist */
.vp-right{
  padding:18px;
  border-radius:20px;
}
.vp-right-head{margin-bottom:4px}
.vp-mini-video{
  grid-template-columns:24px 92px minmax(0,1fr);
  gap:9px;
  min-height:76px;
  padding:10px 0;
}
.vp-mini-video img{
  width:92px!important;
  height:56px!important;
  min-width:92px;
  max-width:92px;
  aspect-ratio:auto!important;
  object-fit:cover!important;
  object-position:center;
  border-radius:9px;
}
.vp-mini-video strong{
  font-size:.875rem;
  line-height:1.32;
}
.vp-mini-video small{
  font-size:.875rem;
  line-height:1.25;
}
.vp-rank{font-size:.875rem}

/* Keep sections visually compact and aligned */
.vp-section{padding-top:28px}
.vp-section-head{margin-bottom:14px}
.vp-chips{gap:8px}
.vp-chips button,.vp-chips a{padding:8px 13px}
.vp-video-grid{gap:20px 16px}

/* At medium desktop widths the third rail makes the page cramped.
   Hide it cleanly and give the video feed the space instead. */
@media(max-width:1400px){
  :root{
    --vp-shell-max:1240px;
    --vp-home-side:198px;
    --vp-home-gap:22px;
  }
  .vp-layout{
    grid-template-columns:var(--vp-home-side) minmax(0,1fr)!important;
    max-width:1240px!important;
  }
  .vp-right{display:none!important}
  .vp-featured-copy{
    width:min(620px,62%);
  }
  .vp-featured-copy h1{
    font-size:clamp(2rem,3.2vw,3.15rem);
  }
}

@media(max-width:1120px){
  .vp-layout{
    grid-template-columns:185px minmax(0,1fr)!important;
    gap:20px;
  }
  .vp-featured{min-height:370px}
  .vp-featured-copy{
    min-height:370px;
    padding:36px 34px;
    width:68%;
  }
  .vp-featured-copy h1{font-size:clamp(1.9rem,3.5vw,2.75rem)}
}

@media(max-width:980px){
  .vp-layout{grid-template-columns:1fr!important}
  .vp-featured-copy{width:72%}
}

@media(max-width:720px){
  .vp-featured{min-height:460px}
  .vp-featured-copy{
    min-height:460px;
    width:100%;
    padding:24px 22px;
  }
  .vp-featured-copy h1{
    font-size:1.68rem;
    line-height:1.08;
  }
  .vp-featured-copy p{-webkit-line-clamp:2}
}

/* v1.5.8 — Professional related-video rail on watch page */
.vp-watch-page .vp-watch-related{
  background:#fff;
  border:1px solid #e8edf5;
  border-radius:20px;
  padding:17px 16px 10px;
  box-shadow:0 12px 34px rgba(22,34,58,.055);
  max-height:calc(100vh - 116px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:none;
}
.vp-watch-page .vp-watch-related::-webkit-scrollbar{display:none}
.vp-watch-page .vp-watch-related .vp-section-head.compact{
  margin:0 0 8px;
  padding:0 2px 10px;
  border-bottom:1px solid #f0f3f8;
}
.vp-watch-page .vp-watch-related .vp-section-head.compact small{
  display:block;
  margin-bottom:3px;
  color:#94a0b1;
  font-size:.875rem;
  line-height:1;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.vp-watch-page .vp-watch-related .vp-section-head.compact h2{
  margin:0;
  font-size:1.02rem;
  line-height:1.2;
  letter-spacing:-.025em;
}
.vp-watch-page .vp-related-card{
  display:grid;
  grid-template-columns:124px minmax(0,1fr);
  gap:11px;
  align-items:start;
  min-width:0;
  padding:10px 2px;
  border:0;
  border-bottom:1px solid #f0f3f8;
  border-radius:0;
  transition:background .18s ease,transform .18s ease;
}
.vp-watch-page .vp-related-card:last-child{border-bottom:0}
.vp-watch-page .vp-related-card:hover{
  background:#f8faff;
  transform:translateY(-1px);
}
.vp-watch-page .vp-related-card img{
  display:block!important;
  width:124px!important;
  min-width:124px!important;
  max-width:124px!important;
  height:70px!important;
  min-height:70px!important;
  max-height:70px!important;
  aspect-ratio:auto!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:10px!important;
  background:#edf1f7;
}
.vp-watch-page .vp-related-card>div{
  min-width:0;
  padding:1px 0 0!important;
}
.vp-watch-page .vp-related-card strong{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  margin:0;
  color:#172033;
  font-size:.875rem;
  line-height:1.32;
  font-weight:750;
}
.vp-watch-page .vp-related-card small{
  display:block;
  margin-top:4px;
  color:#8c98aa;
  font-size:.875rem;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.vp-watch-page .vp-related-card span{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  margin-top:5px;
  padding:3px 7px;
  border-radius:999px;
  background:#f1f5ff;
  color:#5574b6;
  font-size:.875rem;
  line-height:1.2;
  font-weight:750;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Keep the rail compact instead of letting remote image dimensions stretch rows. */
@media(min-width:1281px){
  .vp-watch-layout{--vp-right-width:320px}
}

@media(max-width:1280px){
  .vp-watch-page .vp-watch-related{
    max-height:none;
    padding:14px;
    border-radius:18px;
  }
  .vp-watch-page .vp-watch-related .vp-related-card{
    grid-template-columns:132px minmax(0,1fr)!important;
    gap:10px;
    padding:9px!important;
    border:1px solid #edf1f6!important;
    border-radius:14px!important;
    background:#fff;
  }
  .vp-watch-page .vp-watch-related .vp-related-card img{
    width:132px!important;
    min-width:132px!important;
    max-width:132px!important;
    height:74px!important;
    min-height:74px!important;
    max-height:74px!important;
    border-radius:9px!important;
  }
}

@media(max-width:720px){
  .vp-watch-page .vp-watch-related{
    display:block!important;
    padding:13px;
  }
  .vp-watch-page .vp-watch-related .vp-section-head.compact{margin-bottom:5px}
  .vp-watch-page .vp-watch-related .vp-related-card{
    display:grid!important;
    grid-template-columns:116px minmax(0,1fr)!important;
    margin:0;
    padding:9px 0!important;
    border:0!important;
    border-bottom:1px solid #f0f3f8!important;
    border-radius:0!important;
  }
  .vp-watch-page .vp-watch-related .vp-related-card img{
    width:116px!important;
    min-width:116px!important;
    max-width:116px!important;
    height:65px!important;
    min-height:65px!important;
    max-height:65px!important;
  }
}

/* v1.6 content reading polish */
.vp-preview-banner{margin-bottom:10px;padding:9px 12px;border:1px solid #f1d9a0;background:#fff8e8;color:#825d0b;border-radius:10px;font-size:.875rem;font-weight:800}.vp-summary-copy{font-size:1rem;line-height:1.75;color:#3b4b61}.vp-learning{margin-top:22px;padding-top:18px;border-top:1px solid #e8edf4}.vp-learning h3{margin:0 0 10px;font-size:1rem}.vp-learning ul{margin:0;padding-left:20px;color:#405067;line-height:1.7}.vp-transcript{max-height:620px;overflow:auto;padding-right:8px;white-space:normal;color:#536278;line-height:1.75;font-size:.94rem}

/* v1.6.3 — article-style public video content */
.vp-article-post{margin-top:24px;border-top:1px solid var(--vp-line);padding:30px 4px 8px;background:#fff}
.vp-article-body{max-width:820px;color:#34435a}
.vp-article-body>p{margin:0 0 1.25em;font-size:1.02rem;line-height:1.9;letter-spacing:-.006em;color:#3f4f65}
.vp-article-body>p:first-child{font-size:1.08rem;line-height:1.85;color:#26364c}
.vp-article-learning{margin-top:30px;padding:24px 26px;border:1px solid #e7ecf3;border-radius:18px;background:#fafcff}
.vp-article-learning h2{margin:0 0 14px;font-family:Sora,Inter,sans-serif;font-size:1.08rem;letter-spacing:-.025em;color:#172033}
.vp-article-learning ul{margin:0;padding-left:21px;display:grid;gap:9px}
.vp-article-learning li{font-size:.95rem;line-height:1.65;color:#4d5d73}
.vp-rail-tags{display:flex;flex-wrap:wrap;gap:7px;padding-top:3px}
.vp-rail-tags span{display:inline-flex;align-items:center;min-height:27px;padding:5px 9px;border-radius:999px;background:#f3f6fb;border:1px solid #e5eaf2;color:#53637a;font-size:.875rem;font-weight:750}
@media(max-width:520px){.vp-article-post{margin-top:18px;padding:22px 0 4px}.vp-article-body>p{font-size:.96rem;line-height:1.82}.vp-article-body>p:first-child{font-size:1rem}.vp-article-learning{padding:20px;border-radius:15px}}


/* v1.6.8 — video cards: tajuk + kategori sahaja */
.vp-card-body{display:block!important;padding:11px 3px 0!important}
.vp-card-body>div{min-width:0}
.vp-card-body h3{margin:0 0 6px!important}
.vp-card-meta{margin-top:0!important;gap:0!important}
.vp-card-meta span{display:inline-flex;align-items:center;min-height:24px;padding:3px 9px;border-radius:999px;background:#f1f5ff;color:#4b68a8;font-weight:650;line-height:1.2}
.vp-mini-video small{display:inline-flex!important;width:max-content;max-width:100%;margin-top:5px!important;padding:2px 7px;border-radius:999px;background:#f1f5ff;color:#5570ad!important;font-weight:650;line-height:1.2!important}
@media(max-width:720px){.vp-card-body{display:block!important;padding-top:9px!important}}

.vp-category-nav a,.vp-chips a{text-decoration:none}.vp-chips a{display:inline-flex;align-items:center}.vp-category-nav a.active{background:#f0f4fa;color:#223047}