:root { color-scheme:dark; --bg:#0b1012; --text:#f3f5f3; --muted:#899397; --accent:#d5f785; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px 'Microsoft YaHei','Noto Sans',sans-serif; }
button,input,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; cursor:pointer; color:inherit; border:1px solid transparent; background:transparent; border-radius:8px; padding:11px 18px; transition:background .15s,transform .15s; }
button:hover { background:#ffffff10; }
button:focus,a:focus,input:focus { outline:3px solid var(--accent); outline-offset:4px; }
button:disabled { opacity:.5; cursor:wait; }
a { color:inherit; text-decoration:none; }
header { position:relative; z-index:3; height:94px; padding:0 5%; display:flex; align-items:center; gap:42px; border-bottom:1px solid #ffffff09; }
.brand { font-size:24px; font-weight:700; letter-spacing:2px; white-space:nowrap; display:flex; align-items:center; gap:10px; }
.brand-icon { font-size:17px; background:var(--accent); color:#101812; border-radius:8px; padding:7px 10px; letter-spacing:0; }
.tv-tag { font-size:10px; letter-spacing:0; color:var(--accent); border:1px solid #d5f78550; padding:3px 5px; border-radius:3px; align-self:flex-start; margin-top:3px; }
nav { display:flex; gap:7px; height:100%; align-items:center; }
nav button { color:#a4abad; border-radius:0; height:100%; padding:12px; position:relative; white-space:nowrap; }
nav button.active { color:var(--accent); }
nav button.active:after { content:''; position:absolute; bottom:16px; height:3px; width:20px; left:calc(50% - 10px); background:var(--accent); border-radius:2px; }
.header-tools { display:flex; align-items:center; margin-left:auto; gap:8px; color:#b9c0c1; white-space:nowrap; }
.header-tools button { padding:9px 10px; font-size:14px; }
#searchToggle { font-size:24px; }
#searchToggle span { font-size:14px; margin-left:5px; }
#sourcesButton { font-size:23px; }
time { font-size:15px; letter-spacing:1px; border-left:1px solid #ffffff20; padding-left:20px; margin-left:10px; }
#hero { height:540px; position:relative; overflow:hidden; }
#heroImage { position:absolute; inset:0; background-color:#142125; background-size:cover; background-position:75% 44%; }
#heroImage,.hero-shade,.modal-shade,#player { top:0; right:0; bottom:0; left:0; }
.poster img { top:0; right:0; bottom:0; left:0; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,#0b1012 0%,#0b1012e6 24%,#0b101255 55%,#0b101208 82%),linear-gradient(0deg,#0b1012,transparent 28%); }
.hero-copy { position:relative; padding:48px 5% 0; z-index:1; max-width:750px; }
.eyebrow { font-size:11px; letter-spacing:3px; color:var(--accent); display:flex; align-items:center; gap:10px; }
.eyebrow i,footer i { width:6px; height:6px; background:var(--accent); display:inline-block; border-radius:50%; }
.eyebrow span { font-size:9px; color:#8d9b99; letter-spacing:2px; margin-left:6px; }
h1 { font-size:92px; line-height:1.05; font-weight:500; margin:28px 0 4px; letter-spacing:10px; }
.hero-en { letter-spacing:10px; font-size:22px; font-weight:300; color:#dce5dc; }
.hero-meta { font-size:13px; color:#bac5c2; display:flex; gap:13px; align-items:center; margin-top:22px; }
.outline-tag { font-size:10px; border:1px solid #9aac9e; border-radius:3px; padding:1px 4px; }
.hero-copy p { font-size:14px; color:#b6c2be; line-height:1.95; margin:19px 0 23px; }
.primary { background:var(--accent); color:#162014; font-weight:700; }
.primary:hover { background:#e4ffae; }
.hero-actions { display:flex; gap:14px; }
.hero-actions button { padding:14px 25px; }
.hero-actions button+button { background:#ffffff13; border:1px solid #ffffff18; }
.hero-foot { font-size:10px; letter-spacing:2px; color:#aab9ac; margin-top:26px; }
.hero-foot span { margin-left:16px; font-size:10px; letter-spacing:1px; color:#7c8c84; }
.hero-index { position:absolute; right:5%; bottom:65px; letter-spacing:2px; }
.hero-index strong { font-size:24px; }
.hero-index span { color:#9ba6a0; font-size:13px; }
.hero-index div { height:2px; background:#ffffff40; width:95px; margin-top:13px; }
.hero-index div:before { content:''; display:block; height:2px; width:20px; background:var(--accent); }
#library { position:relative; padding:0 5% 30px; min-height:270px; }
.section-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; gap:20px; }
.small { font-size:9px; letter-spacing:3px; color:#879885; }
h2 { font-size:24px; font-weight:500; margin:10px 0; }
h2 span { font-size:12px; color:#788382; margin-left:20px; font-weight:400; }
.filters { display:flex; gap:5px; }
.filters button { font-size:12px; border-radius:5px; padding:8px 17px; color:#899796; }
.filters button.selected { color:var(--accent); background:#d5f78512; }
.cards { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:24px 20px; }
.card { text-align:left; padding:0; min-width:0; border-radius:8px; }
.poster { padding-top:62.5%; position:relative; overflow:hidden; border-radius:7px; background:linear-gradient(135deg,#243d36,#1c2534); }
.poster img { position:absolute; inset:0; height:100%; width:100%; object-fit:cover; display:block; transition:transform .25s; }
.card:hover img,.card:focus img { transform:scale(1.05); }
.poster:after { content:''; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,#0009); }
.badge { position:absolute; top:9px; left:9px; background:#101610c9; border:1px solid #ffffff20; font-size:10px; padding:3px 6px; border-radius:4px; z-index:1; }
.duration { position:absolute; bottom:9px; right:10px; font-size:11px; z-index:1; color:#e2e9e5; }
.card h3 { font-size:15px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:12px 0 6px; }
.card p { font-size:11px; color:#7c8989; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card p span { float:right; color:#a8b594; }
footer { margin:0 5%; padding:22px 0; border-top:1px solid #ffffff0c; display:flex; align-items:center; justify-content:space-between; font-size:10px; color:#687573; gap:15px; }
footer span:first-child { display:flex; align-items:center; gap:8px; }
footer b { font-weight:400; }
footer button { font-size:10px; padding:0; color:#899a88; }
.muted { color:var(--muted); font-size:13px; line-height:1.8; }
#resultsNote:empty { display:none; }
#searchPanel { padding:30px 5%; background:#121a1b; }
.search-box { display:flex; align-items:center; gap:15px; }
.search-box>span { font-size:30px; color:var(--accent); }
input { background:#ffffff08; border:1px solid #ffffff25; border-radius:8px; padding:15px; color:white; font:inherit; min-width:0; flex:1; }
#searchStatus { font-size:12px; color:#9aaba1; margin-bottom:0; }
#empty { text-align:center; padding:50px; color:#9aaba1; }
#empty>div { font-size:60px; }
#empty h3 { font-weight:400; }
#empty p { font-size:13px; }
#empty button { color:var(--accent); border:1px solid #d5f78555; }
dialog { background:#131b1e; border:1px solid #ffffff1b; border-radius:18px; color:var(--text); padding:38px; width:90vw; max-width:1000px; max-height:88vh; overflow:auto; box-shadow:0 30px 100px #0009; }
dialog:not([open]) { display:none; }
dialog[open] { display:block; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); margin:0; z-index:10; }
dialog::backdrop { background:#000c; }
.modal-shade { position:fixed; inset:0; background:#000c; z-index:9; }
.dialog-close { position:absolute; right:18px; top:12px; font-size:27px; z-index:1; }
.detail-layout { display:flex; gap:30px; padding-top:14px; }
.detail-layout>img { width:32%; height:300px; object-fit:cover; border-radius:10px; background:#23312b; }
.detail-info { min-width:0; flex:1; }
.detail-info h2 { font-size:31px; margin-top:16px; }
#detailDescription { font-size:14px; color:#b0beb6; line-height:1.9; max-height:150px; overflow:auto; }
.line-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
.line-tabs button { font-size:12px; border:1px solid #ffffff20; }
.line-tabs button.selected { border-color:var(--accent); color:var(--accent); }
.episodes { display:flex; flex-wrap:wrap; gap:8px; max-height:220px; overflow:auto; padding:6px; }
.episodes button { font-size:12px; background:#ffffff0b; min-width:85px; }
.source-row { padding:14px 4px; border-bottom:1px solid #ffffff0b; display:flex; align-items:center; gap:16px; }
.source-row .source-name { flex:1; }
.source-row small { display:block; color:#71827d; font-size:10px; margin-top:5px; word-break:break-all; }
.source-status { font-size:12px; color:#9aa99e; }
.source-status.ok { color:var(--accent); }
.source-status.fail { color:#ffb48d; }
.source-toggle { font-size:12px; border:1px solid #ffffff25; min-width:75px; }
.source-actions { display:flex; gap:15px; margin:25px 0; }
#player { position:fixed; inset:0; background:#000; z-index:20; }
#video { height:100%; width:100%; }
.player-top { position:absolute; top:0; left:0; right:0; background:linear-gradient(#000b,transparent); display:flex; align-items:center; padding:20px; gap:20px; }
.player-top h2 { font-size:17px; }
#playerMessage { position:absolute; top:45%; text-align:center; width:100%; pointer-events:none; font-size:17px; }
.player-help { position:absolute; bottom:70px; width:100%; text-align:center; font-size:12px; color:#ccc; pointer-events:none; }
#toast { position:fixed; bottom:45px; left:50%; transform:translateX(-50%); padding:15px 25px; border:1px solid #d5f78560; border-radius:9px; background:#1c2922; z-index:50; color:#d5f785; font-size:14px; }
[hidden] { display:none!important; }
#loadMore { display:block; margin:30px auto 0; border:1px solid #ffffff20; }
@media(min-width:1700px) {
 body { font-size:20px; } header { height:112px; } #hero { height:610px; }
 .hero-copy { padding-top:55px; } h1 { font-size:116px; } .hero-copy p { font-size:18px; }
 .card h3 { font-size:19px; } .card p { font-size:14px; }
}
@media(max-width:1100px) {
 header { padding:0 4%; gap:18px; height:80px; } .brand { font-size:21px; } nav { gap:0; }
 nav button { padding:9px; font-size:14px; } .header-tools { gap:0; } time { display:none; }
 .cards { gap:20px 15px; } .hero-copy { padding-top:35px; } #hero { height:510px; }
 .hero-actions button { padding:12px 21px; } #historyButton { font-size:12px; } .section-top h2 span { display:none; }
}
@media(max-width:720px) {
 header { gap:12px; flex-wrap:wrap; height:auto; padding:18px 5% 10px; }
 nav { order:3; width:100%; justify-content:center; height:45px; } nav button.active:after { bottom:0; }
 .header-tools { margin-left:auto; } .brand { font-size:20px; } .header-tools button { padding:7px; }
 #hero { height:490px; } .hero-copy { padding-top:38px; max-width:100%; }
 .hero-shade { background:linear-gradient(90deg,#0b1012e8,#0b101266),linear-gradient(0deg,#0b1012,transparent 40%); }
 #heroImage { background-position:65% center; } .eyebrow span { display:none; }
 .cards { grid-template-columns:repeat(2,minmax(0,1fr)); } .section-top { align-items:start; }
 .filters button { padding:8px; } .filters { flex-wrap:wrap; max-width:150px; }
 footer>span:nth-child(2) { display:none; } .detail-layout { display:block; }
 .detail-layout>img { width:100%; height:180px; margin-bottom:20px; }
 .search-box { flex-wrap:wrap; } input { flex-basis:70%; } .source-row { gap:8px; }
 dialog { padding:28px 22px; } .hero-index { bottom:55px; } .hero-copy p { max-width:80%; }
}

/* The default TV layout uses large labels and one clear action per card. */
body { font-size:20px; }
header { height:100px; gap:28px; }
nav button { font-size:22px; padding:12px 16px; }
.header-tools button { font-size:19px; padding:12px; }
#searchToggle span,#sourcesButton { font-size:19px; }
#hero { height:440px; }
.hero-copy { padding-top:30px; }
.eyebrow { font-size:17px; letter-spacing:1px; }
h1 { font-size:78px; margin:18px 0 10px; }
.hero-meta { font-size:17px; margin-top:15px; }
.outline-tag { font-size:14px; }
.hero-copy p { font-size:20px; line-height:1.7; margin:16px 0 20px; }
.hero-actions button { font-size:23px; padding:15px 28px; min-height:62px; }
.hero-foot { font-size:17px; letter-spacing:0; color:#c5d2c8; margin-top:21px; }
.cards { grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px 24px; }
.card { border:3px solid transparent; padding:7px; }
.card:focus { background:#d5f78512; border-color:var(--accent); outline:3px solid var(--accent); outline-offset:3px; transform:scale(1.025); }
.card h3 { font-size:24px; margin:15px 0 8px; }
.card p { font-size:17px; color:#bac6c0; }
#homeTvSection { padding:0 5% 35px; }
#moreTv { color:var(--accent); font-size:19px; }
#hero h1 { font-size:48px; line-height:1.25; letter-spacing:2px; max-width:800px; }
#hero .hero-copy { max-width:1000px; }
#heroDescription { max-width:650px; max-height:72px; overflow:hidden; }
#heroFoot { max-width:750px; font-size:16px; }
.rating { color:var(--accent); font-size:23px; }
#catalogFilters .filter-row { display:flex; align-items:flex-start; margin:18px 0; gap:15px; }
.filter-label { min-width:65px; padding-top:12px; font-size:20px; color:#becac3; }
.filter-options { display:flex; flex-wrap:wrap; gap:9px; }
.filter-options button { min-height:45px; font-size:19px; padding:10px 15px; border:1px solid #ffffff20; }
.filter-options .selected { color:var(--accent); border-color:var(--accent); background:#d5f78512; }
.year-input { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:22px 0; }
.year-input input { flex-basis:180px; }
.year-input button { font-size:19px; }
#catalogApply { width:100%; }
#catalogMore { display:block; margin:30px auto; border:1px solid #ffffff30; }
#providerTabs button.selected { color:var(--accent); border-color:var(--accent); }
.filters { flex-wrap:wrap; justify-content:flex-end; }
#resultsNote,#homeTvStatus { min-height:27px; }
.filters button:disabled { cursor:wait; }
@media(max-width:1100px) { #hero h1 {font-size:35px;max-width:550px;} #heroDescription {max-width:490px;} }
.card-play { position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%); font-size:31px; width:66px; height:66px; line-height:66px; text-align:center; background:#07150bc9; color:var(--accent); border:2px solid #d5f78577; border-radius:50%; opacity:0; }
.card:focus .card-play,.card:hover .card-play { opacity:1; }
.badge { font-size:15px; padding:5px 9px; }
.duration { font-size:16px; }
.section-top { margin-bottom:15px; }
h2 { font-size:29px; font-weight:600; }
.filters button { font-size:18px; padding:11px 19px; }
#continueSection { padding:12px 5% 35px; }
#allHistory { font-size:19px; color:var(--accent); }
.muted,#searchStatus { font-size:18px; color:#b7c4bd; }
.search-box button,.search-box input { font-size:21px; }
footer { font-size:16px; color:#aab9b0; }
footer button { font-size:17px; }
dialog { max-width:1080px; }
dialog button { min-height:54px; font-size:21px; }
.dialog-close { font-size:21px; padding:9px 15px; }
.detail-info { padding-top:28px; }
.detail-info h2 { font-size:32px; }
.detail-info h3 { font-size:23px; }
#detailDescription { font-size:20px; }
.line-tabs button { font-size:18px; }
.episodes { gap:14px; }
.episodes button { font-size:23px; min-width:130px; min-height:60px; }
#detailStatus { font-size:18px; }
.source-status,.source-toggle { font-size:18px; }
.source-row small { font-size:14px; }
#loadingDialog,#playbackMenu,#playbackError { max-width:640px; }
#loadingDialog { text-align:center; padding:45px; }
#loadingDialog p,#playbackError p { font-size:21px; line-height:1.8; color:#bdcac2; }
.simple-menu { display:flex; flex-direction:column; gap:15px; margin-top:26px; }
.simple-menu button { text-align:left; font-size:23px; padding:17px 24px; background:#ffffff0c; }
.simple-menu button.primary { background:var(--accent); }
.player-top h2 { flex:1; font-size:23px; }
.player-top button { background:#0008; font-size:21px; }
.player-help { font-size:18px; bottom:25px; background:#0009; padding:15px; }
#toast { font-size:21px; }
@media(min-width:1700px) {
 #hero { height:480px; } .hero-copy { padding-top:35px; }
 h1 { font-size:92px; } .card h3 { font-size:27px; } .card p { font-size:20px; }
}
@media(max-width:1200px) {
 header { gap:13px; padding:0 4%; height:90px; }
 .brand { font-size:23px; gap:7px; } nav button { font-size:19px; padding:10px; }
 .header-tools { gap:0; } .header-tools button,#searchToggle span,#sourcesButton { font-size:17px; padding:9px; }
 time { display:none; } .card h3 { font-size:21px; } .card p { font-size:16px; }
 .cards { gap:24px 15px; } footer { font-size:14px; } footer>span:nth-child(2) { display:none; }
}
@media(max-width:720px) {
 header { height:auto; padding:16px 5% 6px; } .brand { font-size:21px; }
 nav { height:50px; } nav button { font-size:20px; }
 .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
 #hero { height:440px; } .hero-copy p { font-size:19px; }
 .hero-foot { font-size:15px; } .hero-actions button { padding:12px 18px; font-size:20px; }
 .filters button { font-size:16px; padding:10px; }
 h2 { font-size:25px; } .card h3 { font-size:21px; }
 .card p { font-size:15px; } .badge { font-size:12px; }
 .player-top { flex-wrap:wrap; padding:10px; } .player-top h2 { font-size:18px; }
 .player-top button { font-size:17px; } .player-help { font-size:14px; }
}