#view-viewer {width:100vw; height:100vh; position:relative;}
.announcement-banner {position:fixed; top:10%; left:50%; transform:translateX(-50%); background:rgba(212,175,55,0.95); color:#000; padding:15px 60px; z-index:3000; border:2px solid #fff; box-shadow:0 0 30px var(--gold); animation:slideDown 0.5s ease-out; font-weight:bold; letter-spacing:2px;}
@keyframes slideDown { from {top:-100px;} to {top:10%;} }
.landing-overlay {position:absolute; inset:0; background:#000; z-index:2000; display:flex; justify-content:center; align-items:center; transition:opacity 0.5s;}
.landing-content {text-align:center; border:1px solid var(--gold); padding:4rem; background:rgba(10,10,10,0.95); box-shadow:0 0 50px rgba(212, 175, 55, 0.1);}
.landing-content {background:rgba(10, 10, 10, 0.85) !important; backdrop-filter:blur(10px); border:1px solid rgba(212, 175, 55, 0.3) !important; box-shadow:0 0 80px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(212, 175, 55, 0.05); padding:3rem 4rem !important; max-width:500px; width:90%; position:relative; overflow:hidden;}
.landing-content::after {content:''; position:absolute; top:0; left:0; width:100%; height:5px; background:rgba(212, 175, 55, 0.2); box-shadow:0 0 10px var(--gold); animation:scanline 4s linear infinite; opacity:0.5;}
@keyframes scanline { 0% {top:-10%;} 100% {top:110%;} }
.logo-icon {font-size:3rem; color:var(--gold); margin-bottom:15px;}
.logo-icon {font-size:4rem !important; text-shadow:0 0 20px rgba(212, 175, 55, 0.4); margin-bottom:20px !important;}
.studio-title {font-family:'Cinzel', serif; letter-spacing:8px; color:#fff; font-size:2rem;}
.studio-title {font-family:'Share Tech Mono', monospace !important; letter-spacing:5px !important; font-size:2rem !important;}
.divider {height:1px; background:linear-gradient(90deg, transparent, var(--gold), transparent); width:100%; margin:30px 0;}
.tagline {color:#888; letter-spacing:2px; margin-bottom:30px;}
.tagline {color:#666 !important; font-size:0.7rem !important; margin-bottom:30px !important;}
.enter-btn {padding:15px 50px; background:transparent; border:1px solid var(--gold); color:var(--gold); cursor:pointer; font-family:'Cinzel', serif; font-weight:bold; font-size:1.1rem; transition:all 0.3s;}
.enter-btn {background:transparent !important; border:1px solid var(--gold) !important; color:var(--gold) !important; font-family:'Share Tech Mono', monospace !important; letter-spacing:3px; font-size:1.2rem !important; padding:15px 40px !important; position:relative; overflow:hidden; transition:all 0.3s; animation:btnPulse 3s infinite;}
.enter-btn:hover {background:var(--gold) !important; color:#000 !important; box-shadow:0 0 30px var(--gold); cursor:pointer;}
@keyframes btnPulse { 0% {box-shadow:0 0 0 rgba(212,175,55,0);} 50% {box-shadow:0 0 15px rgba(212, 175, 55, 0.3);} 100% {box-shadow:0 0 0 rgba(212,175,55,0);} }
.system-status:hover {color:var(--gold); text-shadow:0 0 15px var(--gold);}
.system-status:hover .status-dot {background:var(--gold); box-shadow:0 0 15px var(--gold);}
.status-dot {width:8px; height:8px; background:var(--green); border-radius:50%; box-shadow:0 0 10px var(--green); animation:blink 2s infinite;}
@keyframes blink { 50% {opacity:0.3;} }
.request-link-btn {display:flex; align-items:center; gap:10px; margin:20px auto 0 auto; background:transparent; border:none; color:#666; font-family:'Share Tech Mono', monospace; font-size:0.9rem; cursor:pointer; letter-spacing:2px; transition:0.3s;}
.request-link-btn:hover {color:var(--gold); text-shadow:0 0 10px rgba(212,175,55,0.5);}
.catalog-overlay {position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0, 0, 0, 0.4) 20%, rgba(0, 0, 0, 0.4) 100%) !important; z-index:1500; display:flex; justify-content:center; padding:0 !important; overflow-y:auto; transition:opacity 0.4s, transform 0.4s;}
.catalog-container {width:100% !important; max-width:100% !important;}
.catalog-header-modern {display:flex; justify-content:space-between; align-items:center; padding:20px 10px 30px 10px; border-bottom:1px solid rgba(255,255,255,0.1); margin-bottom:10px; height:80px;}
.header-left {cursor:pointer; transition:0.3s; user-select:none;}
.header-left:hover .header-title {color:var(--red); text-shadow:0 0 15px var(--red);}
.header-left:hover .live-dot {background:var(--red); box-shadow:0 0 15px var(--red);}
.header-left:hover::after {content:" [EXIT]"; color:var(--red); font-family:'Share Tech Mono', monospace; font-size:0.8rem; margin-left:10px;}
.live-dot {width:8px; height:8px; background:var(--green); border-radius:50%; box-shadow:0 0 10px var(--green); animation:pulseLive 2s infinite;}
@keyframes pulseLive { 0% {opacity:1;} 50% {opacity:0.3;} 100% {opacity:1;} }
.header-title {font-family:'Share Tech Mono', monospace; font-size:1.8rem; color:#fff; font-weight:700; margin:0; line-height:1; position:relative; top:-2px;}
.header-subtitle {font-family:'Share Tech Mono', monospace; font-size:0.8rem; color:#666; margin-top:4px;}
.header-right {display:flex; align-items:center; gap:15px; height:100%;}
.search-pill {background:#111; border:1px solid #333; border-radius:50px; padding:10px 20px; display:flex; height:45px; align-items:center; gap:10px; transition:0.3s cubic-bezier(0.2, 0.8, 0.2, 1); width:250px;}
.search-pill:focus-within {border-color:var(--gold); box-shadow:0 0 15px rgba(212, 175, 55, 0.1); transform:scale(1.02); background:#000;}
.search-pill i {color:#555; font-size:0.9rem;}
.search-pill input {background:transparent; border:none; color:#fff; font-family:'Share Tech Mono', monospace; font-size:0.9rem; width:100%; outline:none;}
.search-pill input::placeholder {color:#444;}
div#catalog-grid {display:flex !important; flex-direction:column !important; grid-template-columns:none !important; width:100% !important; height:auto !important; overflow-y:visible !important;}
.series-section {width:100% !important; background:transparent !important; border:none !important; box-shadow:none !important; display:block !important; grid-column:1 / -1 !important;}
.series-header {cursor:default !important; pointer-events:none !important; background:transparent !important; border:none !important; padding:5px 15px !important; margin-bottom:0 !important; display:flex !important; justify-content:space-between; align-items:center;}
.series-title {color:#fff !important; font-size:1.1rem !important; font-weight:bold !important; text-shadow:0 2px 10px #000;}
.series-count {font-size:0.9rem !important; color:#555 !important; background:transparent !important;}
.series-section:not(.collapsed) .series-grid {display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; overflow-x:auto !important; overflow-y:hidden !important; gap:8px !important; padding:10px 15px !important; margin:0 !important; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch;}
.series-grid .movie-card {flex:0 0 auto !important; height:auto !important; aspect-ratio:2/3 !important; scroll-snap-align:start; border:none !important; width:115px !important;}
@media screen and (min-width: 768px) {
  .series-grid .movie-card {width:150px !important; gap:15px !important;}
  .series-section:not(.collapsed) .series-grid::-webkit-scrollbar {height:6px !important; display:block !important;}
  .series-section:not(.collapsed) .series-grid::-webkit-scrollbar-track {background:#050505 !important;}
  .series-section:not(.collapsed) .series-grid::-webkit-scrollbar-thumb {background:#333 !important; border-radius:10px !important;}
  .series-section:not(.collapsed) .series-grid::-webkit-scrollbar-thumb:hover {background:var(--gold) !important;}
}
@media screen and (max-width: 767px) {
  .series-section:not(.collapsed) .series-grid {scrollbar-width:none !important;}
  .series-section:not(.collapsed) .series-grid::-webkit-scrollbar {display:none !important;}
}
.solo-wrapper .series-title {color:var(--gold) !important; font-size:1.3rem !important; border-bottom:2px solid var(--gold); display:inline-block; padding-bottom:5px; margin-bottom:15px;}
.solo-grid-mode {display:flex !important; flex-wrap:wrap !important; justify-content:flex-start !important; gap:15px !important; overflow-x:hidden !important; padding-bottom:40px !important;}
.solo-grid-mode .movie-card {flex:0 0 auto !important; width:140px !important; margin-bottom:15px !important;}
.short-collection .series-grid {display:flex !important; justify-content:center !important; gap:20px !important; padding-bottom:20px !important;}
.short-collection .series-header {justify-content:center !important; text-align:center !important; margin-bottom:10px !important;}
.short-collection .series-title {font-size:1.2rem !important; color:var(--gold) !important; letter-spacing:4px !important; opacity:0.9;}
.movie-card {width:100%; aspect-ratio:2/3; position:relative; background:#111; border:1px solid #333; position:relative !important; overflow:hidden !important; animation:cardEntrance 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;}
.movie-card img {width:100%; height:100%; object-fit:cover; display:block;}
.movie-card:hover {border-color:var(--gold) !important; transform:scale(1.05); z-index:5; box-shadow:0 5px 15px rgba(0,0,0,0.8);}
.movie-card:hover img {filter:brightness(0.3) blur(2px) !important; transform:scale(1.1) !important;}
.movie-overlay {display:none !important;}
.movie-title-tag {position:absolute !important; top:50% !important; left:50% !important; transform:translate(-50%, -50%) scale(0.8) !important; width:90% !important; background:transparent !important; color:#fff !important; text-shadow:0 2px 10px #000, 0 0 20px rgba(0, 0, 0, 0.8) !important; font-family:'Cinzel', serif !important; font-size:.8rem !important; font-weight:bold !important; text-align:center !important; white-space:normal !important; line-height:1.4 !important; opacity:0 !important; transition:all 0.3s ease-out !important; z-index:20 !important; pointer-events:none !important;}
.movie-card:hover .movie-title-tag {opacity:1 !important; transform:translate(-50%, -50%) scale(1) !important; color:var(--gold) !important;}
@keyframes cardEntrance { 0% {opacity:0; transform:translateY(20px) scale(0.95);} 100% {opacity:1; transform:translateY(0) scale(1);} }
.movie-card:nth-child(1) {animation-delay:50ms;} .movie-card:nth-child(2) {animation-delay:100ms;} .movie-card:nth-child(3) {animation-delay:150ms;}
.cinema-container {position:absolute; inset:0; background:#000; z-index:1000; display:flex; flex-direction:column; justify-content:center; align-items:center; transition:opacity 1s;}
.cinema-split-layout {display:flex; width:100vw; height:100vh; overflow:hidden; position:relative; z-index:20;}
.cinema-left {flex:3; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:40px; position:relative;}
.cinema-left .screen-wrapper {width:100% !important; max-width:1200px !important; aspect-ratio:16/9 !important; background:#000; border:5px solid #111 !important; box-shadow:0 0 50px rgba(0,0,0,0.8) !important;}
iframe {width:100%; height:100%; border:none;}
.click-blocked {pointer-events:none !important; user-select:none;}
.placeholder {position:absolute; inset:0; background:#050505; display:flex; flex-direction:column; justify-content:center; align-items:center; color:#444;}
.loader-ring {width:60px; height:60px; border:3px solid #333; border-top:3px solid var(--gold); border-radius:50%; animation:spin 1s linear infinite; margin-bottom:20px;}
@keyframes spin { 100% {transform:rotate(360deg);} }
.projector-light {position:absolute; top:-50%; left:50%; transform:translateX(-50%); width:60vw; height:100%; background:linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 80%); filter:blur(50px); pointer-events:none;}
.ambient-glow {position:absolute; width:100%; height:100%; transition:opacity 3s; opacity:0; background:radial-gradient(circle, rgba(255,255,255,0.1), transparent 60%);}
.now-playing-info {width:100%; max-width:1200px; margin-top:20px; text-align:left;}
#np-title {font-family:'Cinzel', serif; color:#fff; font-size:1.5rem; letter-spacing:2px;}
#np-meta {color:var(--gold); font-family:'Share Tech Mono', monospace; font-size:0.9rem;}
.cinema-right {flex:1; background:rgba(10, 10, 10, 0.9); border-left:1px solid #222; display:flex; flex-direction:column; min-width:300px;}
.sidebar-header-cinema {padding:20px; font-family:'Share Tech Mono', monospace; color:#666; border-bottom:1px solid #222; font-size:0.8rem; letter-spacing:1px;}
.related-grid {flex:1; overflow-y:auto; padding:15px; display:flex; flex-direction:column; gap:15px;}
.sidebar-header {padding:10px 15px; font-family:'Cinzel', serif; color:var(--gold); font-size:0.9rem; letter-spacing:1px; background:transparent; margin-top:10px;}
.cinema-controls-cluster {position:absolute; top:30px; left:30px; z-index:2000; display:flex; gap:15px; transition:opacity 0.5s;}
.cinema-ctrl-btn {background:transparent !important; border:none !important; backdrop-filter:none !important; box-shadow:none !important; color:rgba(255,255,255,0.4); font-size:1.5rem; width:auto; height:auto; padding:10px; cursor:pointer; transition:all 0.3s ease;}
.cinema-ctrl-btn:hover {color:var(--gold) !important; transform:scale(1.2); background:transparent !important; text-shadow:0 0 15px var(--gold);}
body.watch-mode .cinema-right, body.watch-mode .now-playing-info, body.watch-mode .cinema-controls-cluster, body.watch-mode .top-controls, body.watch-mode .film-grain, body.watch-mode #dynamic-bg {opacity:0 !important; pointer-events:none !important; transition:opacity 0.8s ease;}
body.watch-mode .screen-wrapper {position:fixed !important; top:50% !important; left:50% !important; transform:translate(-50%, -50%) !important; width:100vw !important; max-width:100% !important; aspect-ratio:16/9 !important; z-index:9999 !important; border:none !important; box-shadow:0 0 100px #000 !important; background:#000;}
body.watch-mode {background:#000 !important; overflow:hidden !important;}
.slide-panel {position:fixed; top:0; right:-100%; width:100%; max-width:350px; height:100vh; background:rgba(5, 5, 5, 0.95); backdrop-filter:blur(15px); border-left:1px solid var(--gold); z-index:50001 !important; box-shadow:-10px 0 50px rgba(0, 0, 0, 0.8); transition:right 0.4s cubic-bezier(0.4, 0, 0.2, 1);}
.slide-panel.active {right:0;}
.panel-inner {padding:40px; display:flex; flex-direction:column; height:100%;}
.panel-header {display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #333; padding-bottom:20px; margin-bottom:30px;}
.panel-header h3 {color:var(--gold); font-family:'Cinzel', serif; letter-spacing:2px;}
.close-x {background:none; border:none; color:#fff; font-size:1.2rem; cursor:pointer; transition:0.3s; margin-right:50px;}
.close-x:hover {color:var(--red); transform:scale(1.1);}
.panel-desc {color:#888; font-size:0.9rem; margin-bottom:20px;}
.req-form input {width:100%; background:#000; border:1px solid #333; color:var(--gold); padding:15px; font-family:'Share Tech Mono', monospace; margin-bottom:15px;}
.req-form input:focus {border-color:var(--gold); box-shadow:0 0 15px rgba(212,175,55,0.2);}
.panel-footer {margin-top:auto; border-top:1px solid #222; padding-top:20px; color:#444; font-size:0.7rem; text-align:center;}
@media screen and (min-width: 1025px) {
  .cinema-right {display:flex !important; flex-direction:column !important; overflow:hidden !important;}
  .related-grid {display:block !important; overflow-y:auto !important; height:100% !important; padding:0 !important;}
  .sidebar-grid {display:flex !important; flex-direction:column !important; padding:0 20px 20px 20px !important; gap:10px !important;}
  .sidebar-card {display:flex !important; flex-direction:row !important; align-items:center; background:#111; border:1px solid #222; padding:10px; width:100%; cursor:pointer;}
  .sidebar-card:hover {border-color:var(--gold); background:#1a1a1a;}
  .sidebar-card img {width:50px; height:75px; object-fit:cover; margin-right:15px;}
  .sidebar-meta {display:flex; flex-direction:column; justify-content:center; text-align:left;}
  .s-title {color:#ddd; font-size:0.9rem; font-weight:bold;}
  .s-year {color:#666; font-size:0.8rem;}
}
@media screen and (max-width: 1024px) {
  .cinema-split-layout {flex-direction:column; overflow-y:auto;}
  .cinema-left {flex:none; padding:60px 20px 20px 20px; width:100%; background:#000;}
  .cinema-right {display:block !important; overflow-y:auto !important; overflow-x:hidden !important; padding-top:10px !important; padding-bottom:50px !important; background:#0a0a0a; -webkit-overflow-scrolling:touch;}
  .sidebar-header-cinema {display:none !important;}
  .sidebar-grid {display:flex !important; flex-direction:row !important; overflow-x:auto !important; gap:10px !important; padding:5px 15px 20px 15px !important; scroll-snap-type:x mandatory; scrollbar-width:none;}
  .sidebar-card {flex:0 0 auto !important; width:110px !important; background:transparent; scroll-snap-align:start; display:flex; flex-direction:column;}
  .sidebar-card img {width:100%; height:165px; object-fit:cover; border:1px solid #333; margin-bottom:5px;}
  .s-title {color:#ccc; font-size:0.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;}
  .s-year {display:none;}
}
@media screen and (max-width: 768px) {
  .landing-content {padding:2rem; width:90%;}
  .catalog-header-modern {display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:center !important; height:auto !important; min-height:120px !important; gap:15px !important; padding:30px 20px !important; margin-bottom:10px !important;}
  .header-left {width:100% !important; height:auto !important; margin-bottom:5px !important;}
  .header-right {width:100% !important; display:block !important; height:auto !important;}
  .search-pill {width:100% !important; margin:0 !important; height:50px !important;}
  .cinema-controls-cluster {top:15px; left:0 !important; width:100%; padding:0 20px; justify-content:space-between; gap:0;}
.announcement-banner {width:90%; padding:10px; font-size:0.8rem; text-align:center;}
}

/* NEW VIEWER SPLIT LAYOUT */
#viewer-catalog-container {display:flex; gap:20px; width:100%; height:calc(100vh - 160px); overflow:hidden; margin-top:10px;}
#viewer-category-list {flex:0 0 250px; display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; gap:5px; padding-right:10px; border-right:1px solid rgba(255,255,255,0.1); padding-bottom:100px;}
#viewer-category-list::-webkit-scrollbar {width:4px;}
#viewer-category-list::-webkit-scrollbar-thumb {background:#333; border-radius:4px;}
.viewer-cat-row {display:flex; justify-content:space-between; align-items:center; padding:12px 15px; color:#aaa; font-size:0.85rem; cursor:pointer; transition:0.2s; border-left:3px solid transparent;}
.viewer-cat-row:hover {background:rgba(255,255,255,0.05); color:var(--gold);}
.viewer-cat-row.active {background:rgba(212,175,55,0.1); color:var(--gold); border-left:3px solid var(--gold);}
.viewer-cat-count {font-size:0.75rem; color:#666; font-family:'Share Tech Mono', monospace;}
#viewer-movie-panel {flex:1; overflow-y:auto; padding:0 10px 100px 10px;}
#viewer-movie-grid {display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:15px; width:100%;}
#viewer-movie-panel::-webkit-scrollbar {width:6px;}
#viewer-movie-panel::-webkit-scrollbar-thumb {background:#333; border-radius:4px;}

