/* JAV Classic - the original "cool black gradient" design: warm #29262d -> #000 page gradient, transparent header,
   yellow #fdf751 highlights with the 3px underline, orange #ff6600 menu accents, gold #e4bd18 pager, #1c1b1e cards,
   Georgia scores and the cinema-seat backdrop on the watch page. Dark is the default; light keeps the same structure. */
html,html[data-color-mode="dark"]{
  --bg:#141316;--page-top:#29262d;--page-bottom:#000;--surface:#1c1b1e;--surface-2:#252527;--card-bg:#1c1b1e;
  --ink:#c9c8cf;--ink-strong:#fff;--ink-soft:#b9b8c0;--muted:#a19fa9;--line:#363439;
  --accent:#fdf751;--accent-ink:#29260a;--accent-text:#fdf751;--accent-2:#ff6600;--gold:#e4bd18;--count:#ff9900;
  --chip-bg:#252527;--chip-ink:#c9c8cf;--pager-active:#e4bd18;--side-bg:#2b2a2e;--meta-bg:#19181b;--film-bg:#1c1b1e;--film-pad:20px;
  --drop-bg:#1f1e22;--drop-ink:#d6d5dc;--drop-line:#38363c;--hdr-ink:#a9a8b1;--nav-ink:#9f9ea8;
  --skel-a:#232126;--skel-b:rgba(255,255,255,.06);--spot:rgba(253,247,81,.13);--accent-glow:rgba(253,247,81,.22);
  --focus:#fdf751;--shadow:0 16px 44px rgba(0,0,0,.55);--desc-fade:#151417;--bg-input:#141316;
  --radius:4px;--radius-sm:4px;--card-radius:3px;--btn-radius:5px;--h2:19px;--gutter:15px;
  --canvas:#141316;--paper:#1c1b1e;--accent-soft:#3b3916;--readable-link:#fdf751;--error:#ff9b9b;--logo-filter:brightness(1.55) saturate(1.1);
  color-scheme:dark}
html[data-color-mode="light"]{
  --bg:#f3f2f6;--page-top:#f6f5fb;--page-bottom:#ffffff;--surface:#fff;--surface-2:#efeef3;--card-bg:#fff;
  --ink:#2b2a31;--ink-strong:#16151a;--ink-soft:#3a3940;--muted:#5d5b66;--line:#dcdae2;
  --accent:#f6dd1e;--accent-ink:#262200;--accent-text:#7a5c00;--accent-2:#b84a00;--gold:#d4a90f;--count:#b45700;
  --chip-bg:#efeef3;--chip-ink:#2b2a31;--pager-active:#e4bd18;--side-bg:#f7f6f9;--meta-bg:#fbfaf7;--film-bg:#fff;
  --drop-bg:#fff;--drop-ink:#2b2a31;--drop-line:#e4e2e8;--hdr-ink:#55535e;--nav-ink:#55535e;
  --skel-a:#e8e6ee;--skel-b:rgba(255,255,255,.75);--spot:rgba(246,221,30,.22);--accent-glow:rgba(212,169,15,.28);
  --focus:#7a5c00;--shadow:0 12px 32px rgba(40,30,60,.14);--desc-fade:#fff;--bg-input:#fff;
  --canvas:#f3f2f6;--paper:#fff;--accent-soft:#fbf3c4;--readable-link:#7a5c00;--error:#a32638;--logo-filter:none;
  color-scheme:light}

/* ---------- base ---------- */
body{position:relative;margin:0;font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;font-size:14px;line-height:1.5;color:var(--ink);background:var(--bg)}
html[lang="ar"] body{font-family:Tahoma,"Segoe UI","Noto Naskh Arabic","Noto Sans Arabic",Arial,sans-serif}
html[lang="th"] body{font-family:"Segoe UI","Leelawadee UI","Noto Sans Thai",Tahoma,sans-serif}
html[lang="hi"] body{font-family:"Segoe UI","Nirmala UI","Noto Sans Devanagari",sans-serif}
body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(180deg,var(--page-top),var(--page-bottom))}
h1,h2,h3,h4,h5,h6{color:var(--ink-strong);font-weight:600}
a{color:var(--ink);transition:color .2s}
a:hover,a:focus-visible{color:var(--accent-text)}
p{margin:0 0 10px}
ul,ol{margin:0;padding:0}
::selection{background:var(--accent);color:var(--accent-ink)}
html,body{scrollbar-color:#4a474f transparent}
html[data-color-mode="light"],html[data-color-mode="light"] body{scrollbar-color:#b9b6c2 transparent}
::-webkit-scrollbar{width:8px;height:8px;background:transparent}
::-webkit-scrollbar-thumb{background:#434145;border-radius:8px}
html[data-color-mode="light"] ::-webkit-scrollbar-thumb{background:#bdbac6}
select{color-scheme:inherit}
.container{width:100%;max-width:1170px;margin-inline:auto;padding-inline:var(--gutter)}
@media(min-width:1440px){.container{max-width:1240px}}
.row{margin-inline:0}
.clearfix::after{content:"";display:table;clear:both}
.text-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.form-control{display:block;width:100%;min-height:40px;padding:6px 12px;border:1px solid var(--line);border-radius:4px;background:var(--bg-input);color:var(--ink);font-size:14px}
.stui-pannel{margin:0}

/* ---------- header (original: transparent, logo left, italic links right, yellow underlined nav) ---------- */
.stui-header{position:relative;z-index:40;margin:0;padding:24px 0 0;background:transparent}
.stui-header__bar{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:60px}
.stui-header__logo{display:block;flex:none;line-height:0}
.stui-header__logo img{display:block;width:auto;height:60px;max-width:200px;object-fit:contain;filter:var(--logo-filter);transition:filter .3s,transform .3s}
.stui-header__logo:hover img{transform:translateY(-1px)}
.stui_header__user{display:flex;align-items:center;gap:20px;margin:0;padding:0;list-style:none}
.stui_header__user>li{position:relative;float:none;margin:0;padding:0}
.hdr-link{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0;border:0;background:none;color:var(--hdr-ink);font-size:15px;font-style:italic;line-height:1;cursor:pointer;transition:color .2s}
.hdr-link:hover,.hdr-link[aria-expanded="true"]{color:var(--accent-text)}
.hdr-link .iconfont{font-size:20px;font-style:normal}
.hdr-icon{justify-content:center;min-width:40px}
.hdr-icon .iconfont{font-size:22px}
.hdr-svg,.hdr-link.tui-color-toggle svg{width:22px;height:22px}
.hdr-link.tui-color-toggle{min-height:40px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--hdr-ink);font-size:15px!important}
.hdr-link.tui-color-toggle:hover{color:var(--accent-text);background:none}
.menu-morph{position:relative;display:inline-block;width:20px;height:14px;font-style:normal}
.menu-morph span{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .2s,top .3s}
.menu-morph span:nth-child(1){top:0}.menu-morph span:nth-child(2){top:6px}.menu-morph span:nth-child(3){top:12px}
[aria-expanded="true"] .menu-morph span:nth-child(1){top:6px;transform:rotate(45deg)}
[aria-expanded="true"] .menu-morph span:nth-child(2){opacity:0;transform:scaleX(.2)}
[aria-expanded="true"] .menu-morph span:nth-child(3){top:6px;transform:rotate(-45deg)}
.hdr-lang select{max-width:128px;min-height:36px;padding:4px 8px;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--hdr-ink);font-size:13px;cursor:pointer}

/* dropdowns: original white popovers with the little arrow and orange accents (dark surface in dark mode) */
.dropdown{position:absolute;top:calc(100% + 12px);inset-inline-end:-12px;z-index:80;display:block;width:300px;padding:16px;border:1px solid var(--drop-line);border-radius:6px;background:var(--drop-bg);color:var(--drop-ink);box-shadow:0 18px 48px rgba(0,0,0,.5);animation:jv-drop .2s cubic-bezier(.2,.7,.2,1)}
html[data-color-mode="light"] .dropdown{box-shadow:0 14px 38px rgba(30,20,50,.16)}
.dropdown::before{content:"";position:absolute;top:-6px;inset-inline-end:26px;width:10px;height:10px;background:var(--drop-bg);border-top:1px solid var(--drop-line);border-left:1px solid var(--drop-line);transform:rotate(45deg)}
@keyframes jv-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.dropdown a{color:var(--drop-ink)}
.dropdown.search .item{position:relative;margin:0}
.dropdown.search .form-control{padding-inline-end:44px;background:var(--surface-2);border-color:var(--drop-line);color:var(--drop-ink)}
.dropdown.search .submit{position:absolute;top:0;inset-inline-end:0;display:grid;place-items:center;width:42px;height:40px;border:0;background:none;color:var(--accent-2);cursor:pointer}
.hot-words{display:flex;flex-wrap:wrap;gap:6px;max-height:180px;overflow:auto;margin:12px 0 0;padding:0;list-style:none}
.hot-words a{display:inline-flex;min-height:30px;align-items:center;padding:3px 10px;border-radius:999px;background:var(--surface-2);font-size:13px}
.hot-words a:hover{background:var(--accent-2);color:#1a1a1a}
.dropdown.type{width:360px;max-height:min(70vh,560px);overflow:auto}
.type-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.type-grid li a{display:flex;align-items:center;min-height:36px;padding:6px 12px;border-radius:4px;background:var(--surface-2);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.type-grid li a:hover,.type-grid li.active a{background:var(--accent-2);color:#1a1a1a}
.menu-extra{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;padding-top:12px;border-top:1px solid var(--drop-line);font-size:13px}
.menu-extra a{display:inline-flex;align-items:center;gap:6px;min-height:32px}
.menu-extra a:hover{color:var(--accent-2)}
.menu-langs{display:none}
.dropdown.history{width:300px}
.dropdown.history .head{display:flex;align-items:center;justify-content:space-between;flex-direction:row-reverse;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--drop-line)}
.dropdown.history .head h5{margin:0;font-size:14px;color:var(--drop-ink)}
.dropdown.history .head a{color:var(--accent-2);font-size:13px}
#stui_history{margin:0;padding:0;list-style:none;max-height:320px;overflow:auto}
#stui_history li{padding:0;border-bottom:1px solid var(--drop-line);font-size:13px;color:var(--muted)}
#stui_history li:last-child{border-bottom:0}
#stui_history li a{display:block;padding:9px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#stui_history li a:hover{color:var(--accent-2)}
#stui_history li:only-child:not(:has(a)){padding:12px 0}

/* main nav with the original 3px yellow underline */
.stui-header__menu{margin:18px 0 0;float:none}
.stui-header__menu ul{display:flex;align-items:center;gap:30px;margin:0;padding:0 0 14px;list-style:none;overflow-x:auto;scrollbar-width:none}
.stui-header__menu ul::-webkit-scrollbar{display:none}
.stui-header__menu li{float:none;margin:0;flex:none}
.stui-header__menu li a{position:relative;display:inline-block;padding:4px 0;font-size:18px;color:var(--nav-ink);white-space:nowrap}
.stui-header__menu li a::after{content:"";position:absolute;left:50%;bottom:-6px;width:0;height:3px;border-radius:2px;background:var(--accent);transform:translateX(-50%);transition:width .3s cubic-bezier(.2,.7,.2,1)}
.stui-header__menu li a:hover,.stui-header__menu li.active a{color:var(--accent-text)}
.stui-header__menu li a:hover::after{width:24%}
.stui-header__menu li.active a::after{width:40%}
html[data-color-mode="light"] .stui-header__menu li a::after{background:var(--gold)}

/* ---------- home ---------- */
.home-intro{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;margin:14px 0 2px}
.home-title{margin:0;font-size:15px;font-weight:500;color:var(--muted);letter-spacing:.01em}
.home-stats{margin:0;font-size:14px;color:var(--muted)}
.home-stats .hl,.jav-footer__stats strong{color:var(--count);font-weight:600}

/* ---------- section heads (original yellow titles) ---------- */
.stui-vodlist__head h2,.stui-vodlist__head h2 a,.stui-vodlist__head h3{color:var(--accent-text);font-weight:500}
.stui-vodlist__head h2 .iconfont{font-size:18px}
.stui-vodlist__head .more-link{color:var(--muted)}
.stui-vodlist__head .more-link:hover{color:var(--accent-text)}

/* ---------- cards ---------- */
.stui-vodlist__thumb .play{background:rgba(0,0,0,.18) url(../img/play.png) center no-repeat}
.stui-vodlist__thumb .pic-text{inset-inline:0;bottom:0;max-width:none;padding:14px 10px 5px;border-radius:0;background:linear-gradient(transparent,rgba(0,0,0,.78));text-align:end;font-weight:600}
.stui-vodlist__thumb .pic-dur{bottom:5px;background:transparent;padding:0;font-weight:500;color:rgba(255,255,255,.88);text-shadow:0 1px 2px rgba(0,0,0,.8)}
.stui-vodlist__detail{background:var(--card-bg);padding:10px 12px 12px}
.stui-vodlist__detail .title a{color:var(--ink)}
.stui-vodlist__detail .title a:hover{color:var(--accent-text)}
.stui-vodlist__detail .text .score{font-family:Georgia,"Times New Roman",Times,serif;font-size:13px;color:var(--gold)}
html[data-color-mode="light"] .stui-vodlist__detail .text .score{color:#8a6500}
.stui-vodlist__box{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.stui-vodlist__box:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.45),0 0 0 1px rgba(253,247,81,.18)}
html[data-color-mode="light"] .stui-vodlist__box{box-shadow:0 1px 3px rgba(30,20,50,.08)}
html[data-color-mode="light"] .stui-vodlist__box:hover{box-shadow:0 12px 26px rgba(30,20,50,.14),0 0 0 1px rgba(212,169,15,.35)}

/* ---------- list pages, filters ---------- */
.list-title h1{color:var(--ink-strong);font-weight:600}
.film-filter{background:#232126;border-color:#343238}
html[data-color-mode="light"] .film-filter{background:#fff;border-color:var(--line)}
.filter-chips a.active{background:var(--accent);color:var(--accent-ink)}
.sort-tabs a.active{background:var(--accent);color:var(--accent-ink)}

/* ---------- detail ---------- */
.film{border:1px solid rgba(255,255,255,.04)}
html[data-color-mode="light"] .film{border-color:var(--line);box-shadow:0 2px 10px rgba(30,20,50,.06)}
.film-title{color:var(--ink-strong)}
.btn-watch{border-radius:5px;text-transform:uppercase;letter-spacing:.04em}

/* ---------- watch: original side panel, yellow episode pill, cinema seats ---------- */
.stui-player__side .tab li.active a::after{content:"";position:absolute;left:25%;bottom:-11px;width:50%;height:2px;background:var(--accent)}
.page-watch .play-bg{display:block;position:fixed;inset-inline:0;bottom:0;z-index:-1;height:150px;pointer-events:none;background:url(../img/play_bg.webp) center bottom no-repeat;opacity:.6}
html[data-color-mode="light"] .page-watch .play-bg{display:none}
@media(max-width:767px){.page-watch .play-bg{display:none}}

/* ---------- footer (original centred stats line + links + notice) ---------- */
.jav-footer{margin-top:40px;padding:26px 0 30px;border-top:1px solid rgba(255,255,255,.06);text-align:center;font-size:13px;color:var(--muted);background:linear-gradient(180deg,transparent,rgba(0,0,0,.35))}
html[data-color-mode="light"] .jav-footer{border-top-color:var(--line);background:linear-gradient(180deg,transparent,rgba(0,0,0,.03))}
.jav-footer__stats{margin:0 0 12px;font-size:14px}
.jav-footer__stats .sep{margin:0 6px;opacity:.6}
.jav-footer__nav ul{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0;margin:0 0 14px;padding:0;list-style:none}
.jav-footer__nav li{display:inline-flex;align-items:center}
.jav-footer__nav li+li::before{content:"\00B7";margin:0 10px;opacity:.55}
.jav-footer__nav a{color:var(--muted)}
.jav-footer__nav a:hover{color:var(--accent-text)}
.jav-footer__notice{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:0 0 8px}
.age-badge{display:inline-grid;place-items:center;min-width:34px;height:22px;padding:0 6px;border:1.5px solid var(--accent-2);border-radius:4px;color:var(--accent-2);font-size:11px;font-weight:800;letter-spacing:.04em}
.jav-footer__copy,.jav-footer__mail{margin:0}

/* ---------- account and community pages on the gradient ---------- */
.gallery-account,.gallery-permission-card,.stui-gbook,.gallery-comments-panel{background:var(--surface);color:var(--ink)}
.stui-gbook{margin:20px 0;padding:20px;border-radius:var(--radius)}
.stui-gbook h1{margin:0 0 16px;font-size:24px}
.stui-gbook-form{margin:0 0 20px;padding:0;list-style:none}
.stui-gbook-form textarea.form-control{min-height:120px;padding:12px}
.stui-gbook__item{display:grid;gap:6px;margin:0;padding:14px 0;list-style:none;border-top:1px dotted var(--line)}
.stui-gbook__item .name h4{margin:0;font-size:14px;color:var(--muted)}
.stui-gbook__item .cont{position:relative;margin:0;padding:14px 16px;border-radius:4px;background:var(--surface-2);color:var(--ink)}
.stui-gbook__item .foot{font-size:12px;color:var(--muted)}
.gbook_submit,.stui-gbook-form .submit{min-height:42px;padding:0 24px;border:0;border-radius:4px;background:var(--accent)!important;color:var(--accent-ink)!important;font-weight:700;cursor:pointer}

/* ---------- jump / close cards ---------- */
.page-jump .jump-card{background:var(--surface);border-color:var(--line)}
.page-jump .jump-logo img,.page-jump img.jump-logo{filter:var(--logo-filter)}

/* ---------- tablets: original hides the nav row, categories live in Menu ---------- */
@media(min-width:1025px) and (max-width:1199px){.stui-header__menu ul{gap:20px}.stui-header__menu li a{font-size:16px}}
@media(max-width:1024px){.stui-header__menu{display:none}.stui-header{padding-bottom:6px}}
@media(min-width:768px) and (max-width:860px){.stui-header__bar,.stui_header__user{gap:12px}.hdr-lang select{max-width:112px}}

/* ---------- phones: one 56px row - logo, search, history, mode, menu ---------- */
@media(max-width:767px){
  :root{--gutter:12px}
  .stui-header{position:sticky;top:0;padding:0;background:rgba(20,19,22,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.05)}
  html[data-color-mode="light"] .stui-header{background:rgba(255,255,255,.94);border-bottom-color:var(--line)}
  .stui-header__bar{min-height:56px;gap:8px}
  .stui-header__logo img{height:34px;max-width:120px}
  .stui_header__user{gap:2px}
  .hdr-text,.hdr-gbook,.hdr-account,.hdr-lang{display:none!important}
  .hdr-link{min-width:42px;min-height:42px;justify-content:center;font-size:0}
  .hdr-link .iconfont{font-size:21px}
  .hdr-search{order:1}.hdr-history{order:2}.hdr-mode{order:3}.hdr-menu{order:4}
  .stui_header__user>li{position:static}
  .dropdown{position:fixed;top:60px;inset-inline:8px;width:auto;max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px);overflow:auto}
  .dropdown::before{display:none}
  .dropdown.type{width:auto}
  .menu-langs{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--drop-line)}
  .menu-langs a{display:inline-flex;align-items:center;min-height:32px;padding:3px 10px;border-radius:999px;background:var(--surface-2);font-size:13px}
  .menu-langs a[aria-current]{background:var(--accent);color:var(--accent-ink)}
  .home-intro{margin-top:12px}
  .home-title{font-size:13px}
  .home-stats{font-size:12px}
  .stui-vodlist__head h2,.stui-vodlist__head h2 a{font-size:16px}
  .film{--film-pad:14px}
  .stui-vodlist__box:hover{transform:none}
  .jav-footer{margin-top:28px}
}
@media(max-width:360px){.stui-header__logo img{height:30px;max-width:96px}.hdr-link{min-width:40px}}

/* ---------- refinements after first render ---------- */
.film-title{font-size:clamp(19px,1.75vw,24px)}
.page-watch{--player-offset:250px}
@media(min-width:768px) and (max-width:1024px){.page-watch{--player-offset:190px}}
.watch-info{margin-top:0;padding:18px 20px 6px;border-radius:0 0 var(--radius) var(--radius);background:var(--surface)}
.watch-stage:not(.has-side) .player-box{border-radius:var(--radius) var(--radius) 0 0}
/* the title card is never squeezed to a short-screen player: at least 880px (or the full width), as wide as the player when that is wider */
.watch-stage:not(.has-side)+.watch-info{max-width:min(100%,max(880px,calc((100vh - var(--player-offset,150px)) * 1.7778)));max-width:min(100%,max(880px,calc((100svh - var(--player-offset,150px)) * 1.7778)));margin-inline:auto}
/* short windows: the player can be narrower than the card, so player and card become two separate panels */
@media(min-width:768px) and (max-height:745px){
  .watch-stage:not(.has-side) .player-box{border-radius:var(--radius)}
  .watch-info{margin-top:14px;border-radius:var(--radius)}
}
@media(max-width:767px){.watch-info{padding:14px 12px 4px;margin-inline:calc(var(--gutter) * -1);border-radius:0}.watch-stage:not(.has-side)+.watch-info{max-width:none}}
/* phones in landscape: the player takes the whole screen height under the header and stays fully visible; full-width card */
@media(orientation:landscape) and (max-height:500px){
  .page-watch{--player-offset:76px}
  .watch-page{padding-top:8px}
  .watch-stage .watch-main{max-width:min(100%,calc((100vh - var(--player-offset)) * 1.7778));max-width:min(100%,calc((100svh - var(--player-offset)) * 1.7778));margin-inline:auto}
  .watch-stage:not(.has-side)+.watch-info{max-width:none;margin-top:12px}
}
@media(min-width:768px) and (orientation:landscape) and (max-height:500px){
  .stui-header{padding-top:6px;padding-bottom:4px}
  .stui-header__bar{min-height:48px}
  .stui-header__logo img{height:40px}
}
.stui-vodlist__thumb:has(.pic-dur) .pic-text{max-width:none;padding-inline-start:70px}
body{background-color:var(--page-bottom)}
/* phones: footer links wrap, so no leading separator dot on a new line */
@media(max-width:767px){.jav-footer__nav ul{gap:6px 18px}.jav-footer__nav li+li::before{display:none}}