/* Cinematic viewer system: one identity, iOS / Android / desktop treatments. */
:root{--viewer-gold:#e7c69d;--viewer-rose:#ff718d;--viewer-ink:#0b0c13;--viewer-muted:#b8bacb;--viewer-line:rgba(232,208,175,.14)}
body{background:#0b0c13;background-image:radial-gradient(ellipse at 15% 0%,#3c203140,transparent 55%),radial-gradient(ellipse at 90% 50%,#233c5a20,transparent 60%);color:#f7f3ee}
button,input,select,textarea{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--viewer-gold);outline-offset:4px}
button:disabled{cursor:not-allowed;opacity:.45}
#app{background:transparent;max-width:1360px}
header.glass{background:rgba(11,12,19,.88);border-color:var(--viewer-line);backdrop-filter:blur(20px)}
header .gradient-text{background:linear-gradient(110deg,#fff1d8,#e9bc92 50%,#fd94aa);background-clip:text;-webkit-background-clip:text}
.jl-home-language{font-size:12px;color:var(--viewer-muted)}
.jl-home-language select{border-color:var(--viewer-line);background:#151621;color:#f2dcc0;border-radius:12px}
#jl-discovery{padding-inline:clamp(14px,3vw,38px)}
.jl-hero{border:1px solid var(--viewer-line);border-radius:28px;min-height:470px;box-shadow:0 30px 70px #0007;overflow:hidden;background:#171521}
.jl-hero>img{width:75%;height:100%;object-fit:cover;object-position:50% 27%}
.jl-hero:after{background:linear-gradient(90deg,#111019 5%,#111019d9 32%,#11101915 75%),linear-gradient(0deg,#1110199c,transparent 35%)}
.jl-hero-copy{padding:clamp(24px,4vw,58px);max-width:65%;position:relative;z-index:2}
.jl-hero h1{font-family:ui-serif,Georgia,'Noto Serif TC',serif;font-size:clamp(30px,4vw,54px);font-weight:650;letter-spacing:-.025em;line-height:1.17;color:#fff7e9;text-wrap:balance}
.jl-hero p{color:#d1cccf;line-height:1.8;max-width:380px}
.jl-eyebrow{color:var(--viewer-gold);font-size:10px;letter-spacing:.18em}
.jl-primary{background:linear-gradient(115deg,#f1d8b9,#d9aa82);color:#241823;box-shadow:0 6px 22px #e2b88b22;border:1px solid #f5d8b455;border-radius:12px;min-height:44px}
.jl-secondary{border:1px solid var(--viewer-line);background:#ffffff06;color:#e9d4c0;border-radius:12px;min-height:44px}
.jl-shelf-heading{margin-block:34px 22px}.jl-shelf-heading h2{font-size:clamp(24px,3vw,34px);letter-spacing:-.025em}
.jl-filters{padding:16px;background:#15162199;border:1px solid var(--viewer-line);border-radius:18px}
.jl-filters select,.jl-filters input{background:#0f1019;border-color:#393542;color:#e6dfdf;min-height:44px}
.jl-results-line{color:var(--viewer-muted);margin-block:22px}
.jl-poster{border:1px solid #e8d0af21;border-radius:15px;overflow:hidden;box-shadow:0 12px 28px #0005;isolation:isolate}
.jl-poster img{object-fit:cover;object-position:50% 28%;transition:transform .35s ease}
.jl-poster-card{min-width:0;text-align:start}.jl-poster-card h3{color:#f7f1e8;font-size:14px;font-weight:600;line-height:1.5;margin-top:10px}.jl-poster-card p{color:var(--viewer-muted);font-size:11px}
.jl-pill{background:#15121ade;border:1px solid #e7c69d44;color:#f5d8b7;backdrop-filter:blur(8px)}
.jl-episodes{background:#08090ecc;border-radius:8px;color:#eee7dd}
nav[aria-label="Main navigation"]{border-color:var(--viewer-line);background:#11121be8;backdrop-filter:blur(24px);padding-bottom:env(safe-area-inset-bottom)}
nav[aria-label="Main navigation"] button{position:relative;min-width:0;min-height:56px;color:#aaa8ba}
nav[aria-label="Main navigation"] button[aria-current="page"]{color:#f2d0a7;background:linear-gradient(0deg,#eac49812,transparent)}
nav[aria-label="Main navigation"] button[aria-current="page"]:before{content:'';position:absolute;top:0;width:22px;height:2px;border-radius:2px;background:var(--viewer-gold)}
nav[aria-label="Main navigation"] svg{width:23px;height:23px}
.jl-panel{background:linear-gradient(150deg,#1c1a29,#11131d);border:1px solid var(--viewer-line);border-radius:24px;box-shadow:0 35px 100px #000b}
body[data-platform="ios"]{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
body[data-platform="ios"] nav[aria-label="Main navigation"]{border-radius:22px 22px 0 0}
body[data-platform="android"]{font-family:Roboto,'Noto Sans',system-ui,sans-serif}
body[data-platform="android"] nav[aria-label="Main navigation"] button[aria-current="page"]{border-radius:18px;background:#e7c69d15}
@media(hover:hover) and (pointer:fine){.jl-poster-card:hover img{transform:scale(1.045)}.jl-primary:hover{filter:brightness(1.08)}.jl-secondary:hover{border-color:#e7c69d88}}
@media(min-width:1024px){body[data-platform="desktop"] nav[aria-label="Main navigation"]{position:fixed;left:18px;right:auto;top:125px;bottom:auto;width:92px;border:1px solid var(--viewer-line);border-radius:22px;padding:12px 0;z-index:55}body[data-platform="desktop"] nav[aria-label="Main navigation"]>div{display:grid;grid-template-columns:1fr}body[data-platform="desktop"] #app{padding-inline:100px 20px}body[data-platform="desktop"] #app-main{padding-inline:110px 20px}body[data-platform="desktop"] .jl-catalog-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:28px 18px}}
@media(min-width:600px) and (max-width:1023px){.jl-catalog-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.jl-hero{min-height:400px}.jl-hero-copy{max-width:72%}}
@media(max-width:599px){.jl-hero{min-height:400px;border-radius:22px}.jl-hero>img{width:100%;opacity:.85}.jl-hero-copy{padding:28px 24px;max-width:100%;padding-top:170px}.jl-hero h1{font-size:33px;max-width:280px}.jl-hero p{font-size:12px;max-width:270px}.jl-hero:after{background:linear-gradient(0deg,#111019 3%,#111019c9 45%,#11101900 85%)}.jl-catalog-grid{gap:22px 12px}.jl-poster-card h3{font-size:12px}.jl-filters{padding:12px}.jl-panel{border-radius:20px}#main-content{padding-bottom:calc(84px + env(safe-area-inset-bottom))}}
@media(max-width:359px){.jl-catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.jl-hero h1{font-size:28px}}
@media(prefers-reduced-motion:reduce){.jl-poster img{transition:none}.jl-poster-card:hover img{transform:none}.glow-btn{animation:none}}

.jl-desktop-toolbar,.jl-desktop-picks{display:none}
@media(min-width:1024px){
body[data-platform="desktop"] .jl-desktop-toolbar{display:flex;align-items:center;gap:28px;max-width:1360px;margin:0 auto;padding:18px 38px 18px 130px;border-bottom:1px solid var(--viewer-line)}
.jl-desktop-brand{font-size:24px;color:var(--viewer-gold);font-weight:750;white-space:nowrap}.jl-desktop-brand small{display:block;font-size:9px;letter-spacing:.18em}
.jl-desktop-toolbar form{display:flex;flex:1;max-width:650px;background:#171824;border:1px solid var(--viewer-line);border-radius:14px;padding:5px}
.jl-desktop-toolbar input{flex:1;min-width:0;background:transparent;border:0;padding:10px 14px;color:#f4ece4;outline-offset:0}
.jl-desktop-toolbar button{padding:10px 18px;color:var(--viewer-gold);border-radius:10px}
.jl-desktop-landing{display:grid;grid-template-columns:minmax(0,3fr) minmax(230px,1fr);gap:22px;align-items:stretch;margin-top:10px}
.jl-desktop-landing .jl-hero{margin:0;min-height:500px}.jl-desktop-landing .jl-hero-copy{max-width:76%;padding:42px}.jl-desktop-landing .jl-hero h1{font-size:43px}
.jl-desktop-picks{display:flex;flex-direction:column;gap:15px;background:#18172288;border:1px solid var(--viewer-line);border-radius:25px;padding:19px}
.jl-desktop-pick{position:relative;flex:1;min-height:180px;text-align:left;border-radius:15px;overflow:hidden;background:#171621;box-shadow:0 10px 20px #0003}
.jl-desktop-pick img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.jl-desktop-pick>span{position:absolute;inset:auto 0 0;padding:35px 15px 15px;background:linear-gradient(transparent,#0b0c13ed);color:#fff6e9}
.jl-desktop-pick strong,.jl-desktop-pick small{display:block}.jl-desktop-pick small{color:var(--viewer-gold);font-size:11px;margin-top:4px}
.jl-detail-panel{max-width:1150px}.jl-detail-top{grid-template-columns:220px minmax(0,1fr);gap:35px}.jl-detail-top>img{width:220px}.jl-episode-grid{grid-template-columns:repeat(10,minmax(0,1fr))}
#home-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-inline:26px}
#home-tabs{gap:28px;padding-block:18px}.row-section{padding-block:16px}.row-head h2{font-size:24px;color:#f1dcc4}
}
@media(min-width:1440px){.jl-desktop-landing .jl-hero h1{font-size:52px}body[data-platform="desktop"] .jl-catalog-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}

.jl-app-downloads{display:none}
@media(min-width:1024px){body[data-platform="desktop"] .jl-app-downloads{display:block;max-width:1080px;margin:38px auto 54px;padding:32px;border:1px solid var(--viewer-line);border-radius:26px;background:linear-gradient(130deg,#211b2c,#131922)}.jl-app-downloads h2{font-size:28px;color:var(--viewer-gold);margin-bottom:22px}.jl-download-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.jl-download-card{display:grid;grid-template-columns:1fr auto;gap:12px;padding:24px;border-radius:18px;background:#ffffff05;border:1px solid var(--viewer-line)}.jl-download-card h3{font-size:18px;color:#f6e8d9}.jl-download-qr{grid-row:span 3;padding:12px;border-radius:12px;background:#fff}.jl-download-qr img,.jl-download-qr canvas{display:block;width:144px;height:144px}.jl-download-card p{font-size:13px;color:var(--viewer-muted)}.jl-download-card a{padding:10px 14px;border:1px solid var(--viewer-line);border-radius:10px;color:var(--viewer-gold);width:max-content}}

/* Text-only primary navigation: state changes only the white text tone. */
body nav[aria-label="Main navigation"],body[data-platform] nav[aria-label="Main navigation"]{border:0;border-radius:0;box-shadow:none;background:#0b0c13;backdrop-filter:none}
body nav[aria-label="Main navigation"] .nav-item{color:#b8b8bc;background:transparent;border:0;border-radius:0;box-shadow:none;min-height:56px;transition:color .18s ease}
body nav[aria-label="Main navigation"] .nav-item[aria-current="page"]{color:#fff;background:transparent;border:0;box-shadow:none}
body nav[aria-label="Main navigation"] .nav-item:before,body nav[aria-label="Main navigation"] .nav-item:after{content:none;display:none}
body nav[aria-label="Main navigation"] .nav-item span{color:inherit;font-size:14px}
body nav[aria-label="Main navigation"] .nav-item:focus-visible{outline:2px solid #fff;outline-offset:-4px}
#home-language-bar[hidden]{display:none!important}
.jl-desktop-brand picture,.jl-desktop-brand img{display:block;width:96px;height:96px;object-fit:contain}
@media(hover:hover){body nav[aria-label="Main navigation"] .nav-item:hover{color:#fff}}
@media(prefers-reduced-motion:reduce){body nav[aria-label="Main navigation"] .nav-item{transition:none}}


/* Discovery/recommendation use the same text-only states as primary navigation. */
body #tab-discover,body #tab-feed{background:transparent!important;border:0!important;border-radius:0;box-shadow:none!important;color:#b8b8bc!important}
body #tab-discover.active,body #tab-feed.active{color:#fff!important}
body #tab-discover:before,body #tab-discover:after,body #tab-feed:before,body #tab-feed:after{content:none!important}
body #tab-discover:focus-visible,body #tab-feed:focus-visible{outline:2px solid #fff;outline-offset:-2px}

/* Overlay visibility must win over injected utility display styles. */
#player-modal [data-player-chrome][hidden]{display:none!important}
#player-stage.jl-chrome-hidden .art-controls,#player-stage.jl-chrome-hidden .art-layer,#player-stage.jl-chrome-hidden .art-mask{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
#player-top button,#player-interactions button,#player-interactions button>div{background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;color:#fff}
#player-settings{position:absolute;right:12px;top:64px;z-index:25;background:#151722;padding:12px;border-radius:12px;display:flex;gap:16px;color:white}
#player-settings button{min-height:44px;padding:8px}
#player-stage:focus-visible{outline:2px solid white;outline-offset:-4px}


/* Compact brand and illustrated discovery; retain original Julang identity. */
.jl-header-brand{display:flex;align-items:center;gap:6px;color:#f4dcc0;font-size:21px;font-weight:750;text-decoration:none}
.jl-header-brand picture,.jl-header-brand img{display:block;width:52px;height:52px;object-fit:contain}
header.glass>div{padding-block:4px;max-width:1360px}
.jl-genre-card{position:relative;aspect-ratio:1;overflow:hidden;border:1px solid var(--viewer-line);border-radius:14px;background:#181922;text-align:left;isolation:isolate;cursor:pointer}
.jl-genre-card>img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.jl-genre-card:after{content:"";position:absolute;inset:30% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.85));pointer-events:none}
.jl-genre-caption{position:absolute;inset:auto 12px 12px;z-index:1;display:flex;flex-direction:column;gap:4px;color:#fff}
.jl-genre-caption strong{font-size:16px}.jl-genre-caption small{font-size:11px;color:rgba(255,255,255,.7)}
@media(min-width:768px){#theater-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}.jl-genre-card{aspect-ratio:4/3}}
@media(min-width:1024px){body[data-platform="desktop"] .jl-desktop-toolbar{padding-block:14px;padding-top:82px}.jl-home-language:not([hidden])+.jl-desktop-toolbar{padding-top:14px}}
@media(hover:hover){.jl-genre-card:hover>img{transform:scale(1.04)}}
@media(prefers-reduced-motion:reduce){.jl-genre-card>img{transition:none}}



/* Blend the original dark logo matte into either header without altering animation. */
header.glass{isolation:isolate}
.jl-header-brand img{mix-blend-mode:lighten}