:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;--red:#ff0b3c;--line:#7d1735;--muted:#c8b7c1}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#070207;color:white}
button,input{font:inherit}button{cursor:pointer}button:focus-visible{outline:3px solid white;outline-offset:3px;z-index:3;box-shadow:0 0 25px #ff255a88}
#app{position:relative;width:100vw;height:100dvh;overflow:hidden;container-type:size;background:#090108}
.ref{position:absolute;width:100%;height:100%;inset:0;object-fit:fill;user-select:none;pointer-events:none}
.hotspot{position:absolute;border:0;background:transparent;color:transparent;cursor:pointer}
.hotspot:focus-visible{background:#ef214126;outline:3px solid white;outline-offset:-3px;border-radius:1vw}
.login-mask{position:absolute;left:51.5%;top:72.7%;width:40.6%;height:8.8%;background:linear-gradient(105deg,#100306,#0d0306 44%,#110307);border-radius:.5vw;box-shadow:0 0 2vw #110306a0}
.mac-mask{position:absolute;left:46.4%;top:46.6%;width:39.8%;height:10.2%;display:grid;place-items:center;background:#0b0205;color:#fff;font-size:min(3.3vw,6vh);font-weight:900;letter-spacing:.06em;text-shadow:0 0 6px #aaa}
.state-mask{position:absolute;left:58%;top:63.7%;width:24%;height:5%;display:grid;place-items:center;background:linear-gradient(105deg,#2e1602,#381900);border:1px solid #ffa638;border-radius:50px;color:#ffd19b;font-weight:bold;font-size:1.25vw}
.active-state{background:#11371a;border-color:#00e064;color:#a7ffbb}
.login-error{position:absolute;left:47%;top:84%;font-size:1.2vw;color:#fca5b7;max-width:45%;text-align:center}
.layout{position:absolute;inset:0;display:flex;flex-direction:column;background:radial-gradient(circle at 90% 10%,#6b001b5e,transparent 42%),linear-gradient(130deg,#090309,#170009 70%,#070207)}
.top{height:10%;min-height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 2.2%;border-bottom:1px solid #7b1430;background:#100207e8;gap:15px}
.top strong{font-style:italic;font-size:clamp(20px,3vw,42px);letter-spacing:-.06em;white-space:nowrap}.top strong span{color:#ff123e}
.top button{padding:.6em 1em;color:white;background:#260711;border:1px solid #9c2a42;border-radius:10px;font-size:clamp(12px,1.2vw,19px)}
.body{height:90%;display:grid;grid-template-columns:25% 28% 47%;gap:0;min-height:0;padding:1% 1.5% 1.5%}
.panel{border:1px solid #65152c;border-radius:12px;background:#10040bcc;margin-right:1.4%;padding:1.4%;min-height:0;overflow:auto}
.panel:last-child{margin-right:0}.panel-title{color:#f7dfe7;font-size:clamp(13px,1.15vw,19px);font-weight:bold;letter-spacing:.17em;text-transform:uppercase;margin:.7em .6em 1.25em}
.item{display:flex;align-items:center;gap:10px;width:100%;min-height:60px;margin-bottom:.65em;padding:.9em 1em;text-align:left;background:linear-gradient(100deg,#240815,#10040a);color:white;border:1px solid #69213b;border-radius:10px;font-size:clamp(13px,1.3vw,21px)}
.item.selected{background:linear-gradient(110deg,#b9002b,#6b0019);border-color:#ff5276;box-shadow:0 0 16px #f20a3a66}
.item img{width:48px;height:48px;object-fit:contain;background:#fff;border-radius:8px}.item .sub{color:#cbb0b8;font-size:.7em;margin-top:.25em}.item .text{min-width:0;white-space:normal;overflow:hidden;flex:1}.count{margin-left:auto;color:#fff;background:#51162a;border-radius:20px;padding:.25em .5em;font-size:.8em}
.right{display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:0.3% 1.6% 0 1%}
.preview{height:51%;min-height:0;border:2px solid #c8133e;border-radius:12px;background:radial-gradient(circle,#321321,#080305 70%);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.preview .mark{font-size:clamp(60px,11vw,190px);color:#ce1b44;text-shadow:0 0 60px #f30d4666}
.preview .caption{position:absolute;bottom:1.2em;background:#0b0108c9;padding:.5em 1em;font-size:clamp(12px,1.3vw,18px);max-width:100%;text-align:center}
.details{height:49%;padding:3% 1.5%;overflow:auto}.details h1{font-size:clamp(20px,2.4vw,38px);margin:.4em 0;color:white}.details h2{font-size:clamp(16px,1.6vw,26px);color:#ff295a;margin:.7em 0}.details p{color:var(--muted);font-size:clamp(13px,1.2vw,18px)}
.red{border:1px solid #ff4c68;background:linear-gradient(130deg,#f80038,#a90023);color:#fff;border-radius:9px;padding:.8em 1.4em;font-weight:900;font-size:clamp(14px,1.4vw,22px);margin:.7em .5em 0 0}
.secondary{background:#211019;border:1px solid #73334b;color:white;border-radius:9px;padding:.8em 1.4em;font-weight:700;font-size:clamp(14px,1.3vw,20px)}
.empty{color:#d5a6b7;padding:1.7em 1em;font-size:1.2vw;line-height:1.5}
.vod{display:grid;grid-template-columns:22% 52% 26%;gap:0;height:90%;padding:1%}.vod .panel{margin:0 1%;}.poster-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(150px,35%);gap:1%;padding:1%;overflow:auto;align-content:start}
.poster{border:1px solid #65223a;background:linear-gradient(155deg,#3a0d1a,#090308);border-radius:10px;color:white;min-height:150px;padding:8%;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;text-align:left;position:relative;overflow:hidden}
.poster:has(.poster-art)::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 28%,#0c030aef);pointer-events:none}
.poster-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.poster strong,.poster small{position:relative;z-index:1}
.poster strong{font-size:clamp(13px,1.2vw,19px)}.poster small{color:#db93a9}.poster.selected{border:2px solid #ff1952;box-shadow:0 0 16px #ee19497d}
.vod-detail{border:1px solid #d31a4a;border-radius:12px;margin:1% 2%;padding:4%;background:linear-gradient(#260612,#0d0309);overflow:auto}
.vod-detail h1{font-size:clamp(19px,2.1vw,35px)}.vod-detail p{line-height:1.5;color:#c1acb5;font-size:clamp(13px,1.2vw,18px)}
.search{padding:1% 2%;background:#150610;border:1px solid #822244;border-radius:8px;color:white;max-width:35%;font-size:clamp(14px,1.3vw,20px);width:100%}
#notice{position:fixed;z-index:99;bottom:3%;left:50%;transform:translateX(-50%);background:#26040f;border:1px solid #ff3155;color:white;padding:1.1em 2em;border-radius:12px;display:none;font-size:16px;box-shadow:0 5px 25px #000b}#notice.show{display:block}
@media(max-width:900px){.body{grid-template-columns:26% 35% 39%}.item{min-height:45px}.panel{padding:1%}.top{min-height:45px}.item img{width:25px;height:25px}.vod{grid-template-columns:24% 51% 25%}.poster-grid{grid-template-columns:repeat(3,1fr)}}