/* Zagaschin Video v7 — reversible, token-driven design layer.
   v6 structural CSS intentionally retained to protect watch / billing demo logic.
   Default light (v5-inspired); dark is a separate deliberate visual treatment. */
:root,html[data-theme="light"] {
  color-scheme:light;
  --bg:#f4f8f9;
  --surface:#ffffff;
  --surface2:#f0f6f7;
  --surface3:#e7f1f3;
  --line:#d9e6e8;
  --txt:#173238;
  --muted:#5c7379;
  --gold:#855511;
  --gold-solid:#f5c761;
  --teal:#0e7783;
  --red:#bf5250;
  --brand:#0d7180;
  --radius:19px;
  --max:1360px;
  --shadow:0 18px 56px #174b5513;
  --top-bg:rgba(255,255,255,.95);
  --nav-active:#e7f3f4;
  --nav-muted:#45636a;
  --soft-bg:#edf6f7;
  --badge-free-bg:#e5f5e9;
  --badge-free-text:#176747;
  --badge-pro-bg:#fef0cf;
  --badge-pro-text:#795311;
  --badge-buy-bg:#fff0e9;
  --badge-buy-text:#94532e;
  --focus:#0e7783;
}
html[data-theme="dark"] {
  color-scheme:dark;
  --bg:#0d1318;
  --surface:#172229;
  --surface2:#1d2c34;
  --surface3:#263740;
  --line:#33454c;
  --txt:#f0f5f6;
  --muted:#a9bec1;
  --gold:#f4c66a;
  --gold-solid:#f4c66a;
  --teal:#75d4cf;
  --red:#ffa397;
  --brand:#75d4cf;
  --shadow:0 16px 54px #0006;
  --top-bg:rgba(13,20,25,.96);
  --nav-active:#263940;
  --nav-muted:#bfd0d3;
  --soft-bg:#22333a;
  --badge-free-bg:#214438;
  --badge-free-text:#b2f1cb;
  --badge-pro-bg:#483a24;
  --badge-pro-text:#ffe0a3;
  --badge-buy-bg:#453326;
  --badge-buy-text:#ffcfaa;
  --focus:#f4c66a;
}
/* Accessible, consistent shared foundations */
body{background:var(--bg);color:var(--txt);-webkit-font-smoothing:antialiased;transition:background-color .23s,color .23s}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.top{background:var(--top-bg);border-bottom:1px solid var(--line)}
.brand-copy b{color:var(--txt)}
.brand-copy small{color:var(--brand)}
.nav a{color:var(--nav-muted)}
.nav a:hover,.nav a.active{background:var(--nav-active);color:var(--txt)}
.nav .pro-nav{color:var(--gold)}
.search-top{background:var(--surface2);border-color:var(--line);color:var(--muted)}
.icon-btn,.top-right .btn.tiny{border-color:var(--line);color:var(--txt);background:var(--surface)}
.icon-btn:hover{border-color:var(--teal);background:var(--surface2)}
.theme-switch{flex:0 0 auto;position:relative}
.theme-glyph{display:block;font-size:23px;line-height:1;font-weight:600;transform:translateY(-1px)}
.btn{background:var(--surface2);border-color:var(--line);color:var(--txt)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:white}
.btn.primary:hover{filter:brightness(1.1)}
.btn.teal{background:var(--teal);border-color:var(--teal);color:var(--bg)}
.btn.ghost{color:var(--txt)}
.avatar{background:var(--brand);color:white;border-color:transparent}
.pill{background:var(--surface3);color:var(--txt)}
.pill.free{background:var(--badge-free-bg);color:var(--badge-free-text)}
.pill.pro{background:var(--badge-pro-bg);color:var(--badge-pro-text)}
.pill.buy{background:var(--badge-buy-bg);color:var(--badge-buy-text)}
.pill.gold{background:var(--gold-solid);color:#2b230b}
.pill.border{background:var(--surface2);border-color:var(--line)}
.eyebrow{color:var(--brand)}
.section{padding-top:43px}
.section-head{align-items:end;margin-bottom:19px}
.section-head h2{font-size:clamp(23px,2.15vw,30px);letter-spacing:-.045em;font-weight:800}
.section-head p{color:var(--muted);font-size:13px}
.section-head a{font-size:12px;color:var(--brand)}
.rail-actions{display:flex;gap:7px;align-items:center;white-space:nowrap}
.rail-actions a{padding-left:10px}
.rail-btn{width:36px;height:36px;border:1px solid var(--line);border-radius:11px;color:var(--txt);font-size:25px;line-height:1;background:var(--surface)}
.rail-btn:hover{background:var(--surface3);border-color:var(--teal)}
.chip{background:var(--surface);color:var(--txt);border:1px solid var(--line);font-size:12px}
.chip:hover{border-color:var(--teal)}
.chip.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.explore-chips.section{padding-top:16px;padding-bottom:0}
.explore-chips .chips{padding-bottom:3px}
/* A wide, fully occupied four-up desktop row. More videos remain scrollable. */
.rail{gap:18px;overscroll-behavior-inline:contain;scroll-padding-inline:2px}
.rail.video-rail>.card{flex:0 0 calc((100% - 54px)/4)}
.rail.shorts-rail>.short-card{flex:0 0 calc((100% - 90px)/6);height:auto;aspect-ratio:9/15}
.card{border-color:var(--line);background:var(--surface);border-radius:18px;box-shadow:0 5px 14px #1038410b}
.card:hover{border-color:var(--teal);box-shadow:0 12px 30px #123f501e}
.thumb,.grid .thumb{height:auto;aspect-ratio:16/9;background:var(--surface2)}
.thumb>img{height:100%;width:100%}
.thumb::after{background:linear-gradient(0deg,#04171b55,transparent 65%)}
.card-body{padding:16px 16px 15px}
.card-body h3{font-size:15px;line-height:1.4;min-height:42px;margin-bottom:10px}
.subline{font-size:12px;color:var(--muted)}
.meta-row{font-size:11px;color:var(--muted)}
.short-card{border-color:var(--line);box-shadow:0 5px 16px #00000018}
.short-card h3{font-size:13px;line-height:1.35}
.short-card span{color:#d9e9e4}
.short-card .short-play{color:white}
.duration{color:#fff;font-size:11px}
/* Entire-screen featured carousel with three real catalog targets */
.hero.hero-carousel{height:465px;min-height:465px;margin-top:26px;position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--line);border-radius:26px;background:#142d33;box-shadow:var(--shadow)}
.hero-slides,.hero-slide,.hero-image,.hero-shade{position:absolute;inset:0;width:100%;height:100%}
.hero-slide{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .48s ease,visibility .48s;z-index:1}
.hero-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;z-index:2}
.hero-image{object-fit:cover;object-position:center 43%}
.hero-shade{background:linear-gradient(90deg,rgba(3,21,27,.96) 0%,rgba(5,27,32,.91) 21%,rgba(8,29,34,.70) 49%,rgba(6,27,32,.05) 100%),linear-gradient(0deg,rgba(4,20,25,.50),transparent 45%)}
.hero.hero-carousel::after{display:none}
.hero-carousel .hero-content{z-index:2;position:relative;max-width:690px;padding:58px 53px}
.hero-carousel .eyebrow{font-size:12px;color:#f6d48a}
.hero-carousel h1{color:white;margin:16px 0 15px;font-weight:800;line-height:1.12;letter-spacing:-.04em;font-size:clamp(32px,3.2vw,48px)}
.hero-carousel p{color:#e2edef;max-width:515px;font-size:15px;line-height:1.6;min-height:46px}
.hero-carousel .hero-meta{color:#d8ebeb;font-size:12px;gap:10px;margin-top:15px}
.hero-carousel .hero-ctas{margin-top:23px;gap:10px}
.hero-carousel .btn.primary{background:#fff;border-color:#fff;color:#14363d}
.hero-carousel .hero-secondary{background:rgba(255,255,255,.13);border:1px solid #ffffff4f;color:white}
.hero-carousel .hero-secondary:hover{background:rgba(255,255,255,.22)}
.hero-carousel .pill.pro{background:#ffe2a1;color:#604108}
.hero-carousel .pill.free{background:#d6f6e3;color:#135a37}
.hero-carousel .pill.buy{background:#ffdfd0;color:#803b1e}
.hero-controls{position:absolute;z-index:8;right:30px;bottom:27px;display:flex;align-items:center;gap:13px}
.hero-arrow{width:39px;height:39px;border-radius:50%;background:#ffffff22;border:1px solid #ffffff77;color:#fff;font-size:27px;line-height:1;display:grid;place-items:center;backdrop-filter:blur(10px)}
.hero-arrow:hover{background:#fff;color:#0c2b31}
.hero-dots{display:flex;align-items:center;gap:7px}
.hero-dot{width:8px;height:8px;padding:0;border:0;border-radius:5px;background:#ffffff80;transition:width .2s,background .2s}
.hero-dot.is-active{width:26px;background:#fff}
.hero-slide-count{position:absolute;bottom:32px;left:53px;z-index:6;color:#ffffffaa;letter-spacing:.13em;font-size:12px}
.hero-slide-count b{color:white;font-size:14px}
/* Page-level components, all rendered legibly in both modes */
.page-head h1{color:var(--txt)}
.grid{gap:19px}
.grid .card-body h3{font-size:15px}
.input,.select,.textarea{color:var(--txt);background:var(--surface);border-color:var(--line)}
.input::placeholder,.textarea::placeholder{color:var(--muted);opacity:.85}
.input:focus,.select:focus,.textarea:focus{border-color:var(--teal)}
label.field{color:var(--txt)}
.panel,.panel.flat{background:var(--surface);border-color:var(--line)}
.notice{background:var(--surface2);border-color:var(--teal);color:var(--txt)}
.notice.warn{background:var(--badge-pro-bg);border-color:var(--gold);color:var(--txt)}
.notice.error{background:var(--badge-buy-bg);border-color:var(--red);color:var(--txt)}
.notice.success{background:var(--badge-free-bg);border-color:var(--teal);color:var(--txt)}
.keyfacts .factchip{background:var(--surface2);border-color:var(--line);color:var(--txt)}
.factchip b,.chapter time{color:var(--brand)}
.chapter{background:var(--surface2);color:var(--txt)}
.comment{border-bottom-color:var(--line)}
.benefits div{color:var(--txt)}
.benefits b{color:var(--brand)}
.side-video h4,.creator-row strong{color:var(--txt)}
.price{color:var(--brand)}
/* premium area intentionally stays rich charcoal/gold in both themes */
.large-pro{background:radial-gradient(circle at 90% 0%,#35575e 0%,#193940 41%,#10252e 100%);border-color:#3b6770;color:#fff}
.large-pro h1,.large-pro h2,.large-pro h3,.large-pro strong{color:#fff}
.large-pro p{color:#d7e8e7}
.large-pro .panel{background:#0d2a2ebe;border-color:#4b6a70;color:#fff}
.large-pro .panel p{color:#d7e8e7}
.large-pro .eyebrow{color:#f4c66a}
.access-three .panel{background:var(--surface);color:var(--txt)}
.access-three .panel h3{color:var(--txt)}
.step{color:var(--muted)}
.step .bubble{border-color:var(--line)}
.step.active{color:var(--brand)}
.step.active .bubble{color:#fff;border-color:var(--brand);background:var(--brand)}
.method{background:var(--surface);border-color:var(--line);color:var(--txt)}
.method.selected{background:var(--surface3);border-color:var(--brand)}
.method small{color:var(--muted)}
.order-lines>div{border-color:var(--line);color:var(--muted)}
.order-lines b{color:var(--txt)}
.order-lines .total{color:var(--txt)}
.order-lines .total b{color:var(--brand)}
.tabline{border-color:var(--line)}
.tabline button{color:var(--muted)}
.tabline button.active{color:var(--brand);border-color:var(--brand)}
.empty{border-color:var(--line);color:var(--muted)}
.counter{background:var(--surface2);border-color:var(--line)}
.counter b,.mini-table th{color:var(--brand)}
.creator-stats b{color:var(--txt)}
.upload-drop{background:var(--surface2);border-color:var(--teal)}
.upload-drop input{color:var(--txt)}
.preview-file{background:var(--surface2);color:var(--brand)}
.mini-table td,.mini-table th{border-color:var(--line)}
.mini-table td{color:var(--txt)}
.terms{color:var(--muted)}
.debug-label{color:var(--brand);border-color:var(--line)}
.value-strip{gap:16px}
.value-item{background:var(--surface);border-color:var(--line);box-shadow:0 7px 28px #0d50500a}
.value-item h3{color:var(--txt)}
.value-item p{color:var(--muted)}
.promo{border-color:var(--line);background:linear-gradient(120deg,#e7f5f5,#f7f5e9);box-shadow:var(--shadow)}
.promo p{color:var(--muted)}
.footer{border-top-color:var(--line);color:var(--muted)}
.footer a:hover{color:var(--brand)}
/* Other dark mode components use the exact same semantic roles. */
html[data-theme="dark"] .btn.primary{background:#eebf60;border-color:#eebf60;color:#19272a}
html[data-theme="dark"] .chip.active{background:#326e75;border-color:#326e75;color:#fff}
html[data-theme="dark"] .promo{background:linear-gradient(120deg,#1b2d33,#303321);border-color:#46534c}
html[data-theme="dark"] .large-pro{background:radial-gradient(circle at 90% 0%,#403c29 0%,#243038 50%,#111d22 100%)}
html[data-theme="dark"] .top-right .btn.tiny{background:#26363f}
html[data-theme="dark"] .notice.warn{color:#ffe5b1}
html[data-theme="dark"] .notice.error{color:#ffd0c7}
html[data-theme="dark"] .notice.success{color:#c8f3d6}
html[data-theme="dark"] .value-item{background:#18262c}
html[data-theme="dark"] .footer{color:#a4b9bf}
html[data-theme="dark"] .promo .btn.primary{color:#182a2d}
html[data-theme="dark"] .pill.free{background:#244736;color:#bcf2d1}
html[data-theme="dark"] .pill.pro{background:#554229;color:#ffe3a6}
html[data-theme="dark"] .pill.buy{background:#4a332b;color:#ffd1b6}
html[data-theme="dark"] .avatar{background:#28565c;color:#e5ffff}
/* The bottom app-style navigation is clear in both themes. */
.mobile-nav{background:var(--top-bg);border-top:1px solid var(--line)}
.mobile-nav a{color:var(--muted)}
.mobile-nav a.active{color:var(--brand)}
/* Responsive: 4 wide desktop, 3 tablet, 1 mobile long-video cards. */
@media(max-width:1080px){
  .rail.video-rail>.card{flex-basis:calc((100% - 36px)/3)}
  .rail.shorts-rail>.short-card{flex-basis:calc((100% - 48px)/5)}
}
@media(max-width:760px){
  .top{height:64px}
  .top-inner{gap:8px}
  .top-right{gap:6px}
  .theme-switch,.top-right .icon-btn{width:38px;height:39px;min-height:39px;border-radius:12px}
  .top-right .btn.tiny,.top-right .avatar{height:39px;min-height:39px;border-radius:12px}
  .theme-glyph{font-size:22px}
  .hero.hero-carousel{height:440px;min-height:440px;margin-top:15px;border-radius:20px}
  .hero-image{object-position:center 35%}
  .hero-shade{background:linear-gradient(0deg,#061e26f7 0%,#092b32e6 32%,#0a293480 63%,#0a293314 100%)}
  .hero-carousel .hero-content{position:absolute;bottom:0;left:0;right:0;max-width:none;padding:20px 21px 61px}
  .hero-carousel h1{font-size:clamp(26px,7vw,32px);margin:9px 0}
  .hero-carousel p{font-size:12px;line-height:1.5;min-height:auto;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:0}
  .hero-carousel .hero-meta{font-size:10px;gap:7px;margin-top:9px}
  .hero-carousel .hero-ctas{margin:13px 0 0;gap:7px}
  .hero-carousel .hero-ctas .btn{min-height:40px;font-size:11px;padding:8px 11px}
  .hero-controls{bottom:13px;right:16px;gap:8px}
  .hero-arrow{width:30px;height:30px;font-size:21px}
  .hero-dots{gap:6px}
  .hero-slide-count{bottom:18px;left:22px;font-size:10px}
  .section{padding-top:33px}
  .section-head{gap:8px;margin-bottom:14px}
  .section-head h2{font-size:20px;line-height:1.2}
  .section-head p{font-size:11px;line-height:1.4}
  .section-head a{font-size:11px}
  .rail-btn{display:none}
  .rail-actions a{padding-left:0}
  .rail.video-rail{display:grid;grid-template-columns:minmax(0,1fr);overflow:visible;scroll-snap-type:none;gap:16px;padding-bottom:0}
  .rail.video-rail>.card{width:100%;min-width:0}
  .rail.shorts-rail{display:flex;gap:12px;margin-right:-15px;padding-right:15px}
  .rail.shorts-rail>.short-card{flex:0 0 45%;height:auto;aspect-ratio:9/15}
  .card-body{padding:14px 15px}
  .card-body h3{font-size:15px;min-height:0;margin-bottom:8px}
  .subline{font-size:12px}
  .meta-row{font-size:11px}
  .grid{grid-template-columns:1fr;gap:15px}
  .grid .thumb{height:auto;aspect-ratio:16/9}
  .page-head h1{font-size:26px}
  .promo{background:linear-gradient(135deg,#e4f4f4,#f4f8f9)}
  html[data-theme="dark"] .promo{background:linear-gradient(135deg,#1a3035,#292e2c)}
  .footer{padding-bottom:20px}
}
@media(min-width:761px) and (max-width:850px){
  .top-inner{gap:10px}.nav a{padding:9px 8px}
}
@media(max-width:360px){
  .top-right .btn.tiny{font-size:11px;padding:0 9px}
  .brand-icon{width:32px;height:32px}
  .brand-copy b{font-size:11px}
  .brand-copy small{font-size:8px}
  .hero-carousel h1{font-size:25px}
  .hero-carousel .hero-ctas .btn{font-size:10px;padding:8px 9px}
}
@media(prefers-reduced-motion:reduce){.hero-slide,.hero-dot{transition:none!important}}
/* Text inside the intentionally dark PRO sales panel must not inherit light-page ink. */
.large-pro .benefits div{color:#dceceb}
.large-pro .benefits b{color:#93e8dd}
.large-pro .price{color:#ffda89}
.large-pro .price del{color:#c6d6d5}
.large-pro .panel .muted{color:#cad9da}