@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&family=Roboto+Condensed:wght@500;600;700;800&display=swap");
:root{--bg:#090b10;--panel:#11151d;--panel2:#191e28;--text:#f4f5f7;--muted:#9ba2b1;--line:rgba(255,255,255,.09);--accent:#c9ff5a;--accent2:#a7df36;--danger:#ff8e8e;font-family:Tahoma,Arial,"Segoe UI",sans-serif;color:var(--text);background:var(--bg);scroll-behavior:smooth}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 82% 2%,rgba(119,143,61,.11),transparent 34%),var(--bg);min-height:100vh}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{cursor:pointer}.hidden{display:none!important}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,6.5vw,100px);border-bottom:1px solid var(--line);background:rgba(9,11,16,.88);position:sticky;top:0;z-index:10;backdrop-filter:blur(18px)}.brand{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:900;letter-spacing:.12em;direction:ltr;white-space:nowrap}.brand-mark{display:grid;place-items:center;width:29px;height:29px;border-radius:8px;background:var(--accent);color:#0c1005;font-size:11px;letter-spacing:0}.brand-accent{color:var(--accent)}.main-nav{display:flex;gap:30px;color:#b0b5c0;font-size:12px}.main-nav a:hover{color:var(--accent)}.top-actions{display:flex;align-items:center;gap:14px}.connection{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:7px}.connection i{display:block;width:6px;height:6px;border-radius:50%;background:#c1c9d2}.connection.online i{background:var(--accent);box-shadow:0 0 10px var(--accent)}.icon-button{display:none;background:transparent;color:var(--text);border:1px solid var(--line);border-radius:9px;padding:7px 10px}.hero{padding:58px clamp(20px,9vw,145px) 54px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:36px;min-height:490px;overflow:hidden;position:relative}.hero-text{max-width:590px;z-index:2}.eyebrow{color:var(--accent);font-size:10px;font-weight:800;letter-spacing:.12em;margin:0 0 16px;display:flex;gap:9px;align-items:center}.eyebrow-line{height:1px;width:26px;background:var(--accent)}h1{font-size:clamp(42px,5.7vw,74px);line-height:1.14;letter-spacing:-.065em;margin:0 0 21px;font-weight:900}h1 em,h2 em{font-style:normal;color:var(--accent)}.hero-text>p:not(.eyebrow){font-size:14px;line-height:2;color:var(--muted);max-width:450px;margin:0 0 24px}.hero-buttons{display:flex;gap:10px;flex-wrap:wrap}.button{border:0;border-radius:999px;padding:12px 18px;display:inline-flex;align-items:center;justify-content:center;gap:18px;font-size:12px;font-weight:800;transition:transform .2s,background .2s;color:var(--text)}.button:hover{transform:translateY(-2px)}.button-primary{background:var(--accent);color:#0b0e07}.button-primary:hover{background:var(--accent2)}.button-ghost{background:rgba(255,255,255,.04);border:1px solid var(--line)}.button-outline{background:transparent;border:1px solid var(--line)}.hero-micro{margin-top:21px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:#7f8795;font-size:10px}.micro-check{color:var(--accent);font-weight:900}.micro-sep{color:#444a55}.hero-visual{height:360px;position:relative;display:flex;align-items:center;justify-content:center;perspective:950px}.hero-glow{position:absolute;width:270px;height:270px;background:#c9ff5a0c;filter:blur(34px);border-radius:50%}.hero-poster{position:absolute;width:174px;height:263px;border-radius:10px;display:flex;flex-direction:column;justify-content:flex-end;padding:17px;box-shadow:0 30px 60px #0009;overflow:hidden;isolation:isolate;letter-spacing:.12em;font-weight:900}.hero-poster:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#07080d 3%,transparent 80%)}.hero-poster span{font-size:19px;line-height:1.02}.hero-poster small{font-size:6px;letter-spacing:.16em;margin-top:9px}.hero-poster-a{background:linear-gradient(140deg,#ba996c,#663c41 55%,#1c1a26);transform:rotate(-12deg) translate(-99px,3px);opacity:.8}.hero-poster-b{background:linear-gradient(145deg,#6e8493,#263b50 54%,#101522);transform:rotate(12deg) translate(97px,4px);opacity:.8}.hero-poster-main{background:linear-gradient(145deg,#d7a05e 0%,#9a553b 34%,#403044 68%,#10131a);transform:rotate(1deg);z-index:2;align-items:center;text-align:center;width:194px;height:286px;justify-content:space-around;padding:18px}.hero-poster-main:before{background:linear-gradient(0deg,#07080d 0%,transparent 83%),radial-gradient(ellipse at 50% 25%,#ffe1a555,transparent 46%)}.hero-poster-main strong{position:relative;font-size:38px;line-height:.9;letter-spacing:-.05em}.hero-poster-main strong em{color:#d7ff89}.hero-poster-main .hero-tag,.hero-poster-main small{font-size:6px;letter-spacing:.2em}.hero-sun{position:absolute;width:120px;height:120px;border-radius:50%;background:#fad7a63a;top:40px;filter:blur(2px)}.hero-orbit{position:absolute;border:1px solid #c9ff5a20;border-radius:50%;width:300px;height:300px;transform:scaleX(1.35) rotate(25deg)}.orbit-two{width:360px;height:250px;transform:scaleX(1.12) rotate(-35deg)}.floating-rating{position:absolute;z-index:4;bottom:27px;right:calc(50% - 160px);display:flex;gap:7px;align-items:center;background:#10131ce8;border:1px solid #ffffff1a;padding:10px 13px;border-radius:10px;font-size:10px;box-shadow:0 10px 30px #0008}.floating-rating:first-letter{color:var(--accent)}.floating-rating b{font-size:14px}.floating-rating span{color:var(--muted);border-right:1px solid var(--line);padding-right:8px}.section-wrap{padding:55px clamp(18px,7vw,110px)}.catalog{background:linear-gradient(180deg,#0c0f15,#090b10)}.section-head{display:flex;align-items:end;justify-content:space-between;gap:28px}.section-head h2,.membership h2,.about h2{font-size:clamp(28px,3.5vw,42px);letter-spacing:-.05em;margin:0 0 8px;line-height:1.3}.section-sub{font-size:12px;color:var(--muted);margin:0}.search-box{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:5px 7px 5px 15px;width:min(390px,100%)}.home-search-box{width:min(440px,100%);margin-top:24px;background:#10141c;border-color:#ffffff1b;box-shadow:0 12px 35px #0003}.home-search-box:focus-within{border-color:#c9ff5a77;box-shadow:0 0 0 3px #c9ff5a0b,0 12px 35px #0003}.search-icon{font-size:25px;color:var(--muted);line-height:1}.search-box input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--text);font-size:11px}.search-box input::placeholder{color:#6f7786}.search-box button{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:999px;padding:9px 16px;font-size:11px}.media-switch{display:flex;gap:7px;margin-top:30px}.media-tab{background:transparent;border:1px solid var(--line);border-radius:999px;color:var(--muted);padding:9px 17px;font-size:11px}.media-tab.active,.media-tab:hover{background:var(--accent);border-color:var(--accent);color:#11150a}.catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0 21px}.filters{display:flex;gap:7px;flex-wrap:wrap}.filter{background:transparent;border:1px solid var(--line);border-radius:999px;color:#a0a7b5;padding:8px 12px;font-size:10px}.filter.active,.filter:hover{color:var(--accent);border-color:#c9ff5a66;background:#c9ff5a0c}.catalog-status{font-size:10px;color:var(--muted);white-space:nowrap}.notice{font-size:11px;line-height:1.8;color:#ddc98a;background:#e6bd5010;border:1px solid #e6bd5033;border-radius:10px;padding:11px 14px;margin-bottom:18px}.media-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:25px 15px}.media-card{min-width:0;cursor:pointer;transition:transform .22s}.media-card:hover{transform:translateY(-5px)}.media-poster{position:relative;aspect-ratio:2/3;background:linear-gradient(150deg,#292e38,#10131a);border:1px solid #ffffff0a;border-radius:12px;overflow:hidden}.media-poster img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}.media-card:hover .media-poster img{transform:scale(1.05)}.score-tag{position:absolute;top:9px;right:9px;background:#07090ddf;border:1px solid #ffffff18;border-radius:6px;padding:5px 7px;font-size:10px;font-weight:800;direction:ltr}.type-tag{position:absolute;bottom:9px;right:9px;background:#090b10d9;color:#dfe3e9;border:1px solid #ffffff18;border-radius:6px;padding:5px 7px;font-size:9px}.media-info{padding:10px 2px 0}.media-title{font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 0 6px;direction:auto}.media-meta{display:flex;justify-content:space-between;gap:5px;color:var(--muted);font-size:9px}.empty-state{text-align:center;padding:45px;color:var(--muted)}.empty-state>span{font-size:37px;color:var(--accent)}.empty-state h3{color:var(--text);margin:10px 0 5px}.empty-state p{font-size:12px}.load-more-row{text-align:center;padding-top:34px}.tmdb-disclaimer{display:flex;align-items:center;gap:12px;margin-top:40px;border-top:1px solid var(--line);padding-top:20px;font-size:9px;color:#7c8491;direction:ltr;text-align:left}.tmdb-symbol{font-weight:900;font-size:15px;letter-spacing:-.05em;color:#73c7d2}.membership{display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:55px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}.membership-art{height:275px;position:relative;display:grid;place-items:center}.membership-ring{position:absolute;width:250px;height:250px;border:1px solid #c9ff5a25;border-radius:50%;transform:scaleX(1.25) rotate(25deg)}.membership-ring:after{content:"";position:absolute;inset:25px;border:1px solid #c9ff5a22;border-radius:50%}.membership-ticket{width:230px;height:144px;background:linear-gradient(130deg,#d5ff81,#8ebf3d);color:#11170a;border-radius:17px;transform:rotate(-9deg);box-shadow:0 28px 70px #0009;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;position:relative}.membership-ticket:before,.membership-ticket:after{content:"";position:absolute;width:24px;height:24px;background:var(--bg);border-radius:50%;top:60px}.membership-ticket:before{right:-12px}.membership-ticket:after{left:-12px}.membership-ticket span{font-size:10px;font-weight:900;letter-spacing:.2em}.membership-ticket strong{font-size:21px;letter-spacing:.04em}.membership-ticket small{font-size:7px;letter-spacing:.15em}.membership-copy>p:not(.eyebrow){font-size:13px;line-height:2;color:var(--muted);max-width:540px}.membership-points{display:flex;gap:15px;flex-wrap:wrap;margin:20px 0 25px;color:#d5d9df;font-size:10px}.membership-points span::first-letter{color:var(--accent)}.membership-note{font-size:10px!important;color:#a6aebe!important;margin-top:12px!important}.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:45px;align-items:start}.about-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.about-steps article{border-top:1px solid var(--line);padding-top:16px}.about-steps article>span{color:var(--accent);font-size:10px;font-weight:900}.about-steps h3{font-size:14px;margin:18px 0 8px}.about-steps p{font-size:11px;color:var(--muted);line-height:1.9;margin:0}.footer{padding:24px clamp(18px,7vw,110px);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line)}.footer p{font-size:9px;color:var(--muted);margin:0}.footer-right{margin-right:auto!important}.dialog{background:#11151e;color:var(--text);border:1px solid var(--line);border-radius:19px;width:min(760px,calc(100% - 24px));padding:28px;max-height:91vh;overflow:auto;box-shadow:0 30px 90px #000d}.dialog::backdrop{background:#000c;backdrop-filter:blur(5px)}.dialog-close{position:sticky;top:0;float:left;border:1px solid var(--line);background:#151a23;color:#c9ced8;border-radius:50%;height:34px;width:34px;font-size:24px;line-height:1;cursor:pointer;z-index:3}.details-layout{display:grid;grid-template-columns:190px 1fr;gap:24px;padding-top:14px}.details-poster{width:100%;border-radius:12px;background:var(--panel)}.details-copy h2{font-size:30px;letter-spacing:-.04em;margin:0 0 8px}.details-meta{display:flex;gap:10px;flex-wrap:wrap;color:#aeb6c4;font-size:11px;margin:0 0 13px}.details-meta b{color:var(--accent)}.details-overview{color:var(--muted);font-size:12px;line-height:1.9}.details-genres{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}.details-genres span{font-size:9px;padding:6px 9px;border:1px solid var(--line);border-radius:999px;color:#c7ccd4}.watch-area{border-top:1px solid var(--line);padding-top:18px;margin-top:20px}.watch-area h3{font-size:14px;margin:0 0 10px}.match-status{font-size:11px;line-height:1.8;color:var(--muted);background:#ffffff05;border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:12px}.match-success{border-color:#c9ff5a40;color:#dce8c4}.match-actions{display:flex;gap:8px;flex-wrap:wrap}.candidate-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}.candidate-row{border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;justify-content:space-between;align-items:center;gap:10px}.candidate-row strong{font-size:11px}.candidate-row small{display:block;color:var(--muted);font-size:9px;margin-top:5px}.candidate-row button{font-size:10px;padding:9px 12px}.seasons-list{display:grid;gap:8px;margin-top:14px}.season-block{border:1px solid var(--line);border-radius:12px;overflow:hidden}.season-title{font-size:12px;font-weight:800;padding:12px;background:#ffffff06}.episode-list{display:flex;flex-direction:column}.episode-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-top:1px solid var(--line)}.episode-name{font-size:11px}.episode-row small{display:block;font-size:9px;color:var(--muted);margin-top:4px}.episode-row button{flex-shrink:0}.player-dialog{width:min(900px,calc(100% - 20px));}.player-heading{padding-top:10px}.player-heading h2{margin:0 0 15px;font-size:23px}.player-wrap{width:100%;background:#000;border-radius:12px;overflow:hidden;aspect-ratio:16/9}.player-wrap video{width:100%;height:100%;display:block;background:#000}.player-caption{font-size:10px;color:var(--muted);line-height:1.7}.info-dialog{width:min(500px,calc(100% - 24px))}.info-dialog h2{margin:0 0 12px}.info-dialog p:last-child{font-size:12px;line-height:2;color:var(--muted)}
@media(max-width:950px){.hero{padding-inline:6vw;gap:12px}.hero-poster{width:145px;height:220px}.hero-poster-main{width:163px;height:246px}.hero-poster-main strong{font-size:32px}.hero-poster-a{transform:rotate(-12deg) translate(-75px,3px)}.hero-poster-b{transform:rotate(12deg) translate(76px,3px)}.media-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.section-head{align-items:start;flex-direction:column}.search-box{width:100%}.membership{gap:28px}.about{grid-template-columns:1fr;gap:28px}}
@media(max-width:640px){.topbar{height:65px;padding:0 15px}.main-nav{display:none;position:absolute;top:64px;left:0;right:0;background:#0d1017;padding:18px;flex-direction:column;gap:18px;border-bottom:1px solid var(--line)}.main-nav.open{display:flex}.icon-button{display:block}.connection{font-size:9px}.hero{grid-template-columns:1fr;padding:42px 22px 15px}.hero h1{font-size:48px}.hero-text>p:not(.eyebrow){font-size:12px}.hero-visual{height:300px;margin-top:0}.hero-poster{width:125px;height:192px;padding:12px}.hero-poster span{font-size:15px}.hero-poster-main{width:145px;height:215px}.hero-poster-main strong{font-size:29px}.hero-poster-a{transform:rotate(-12deg) translate(-65px,2px)}.hero-poster-b{transform:rotate(12deg) translate(65px,2px)}.hero-orbit{width:245px;height:245px}.orbit-two{width:280px;height:220px}.floating-rating{bottom:15px;right:calc(50% - 135px)}.section-wrap{padding:39px 16px}.section-head h2,.membership h2,.about h2{font-size:30px}.search-box input{font-size:10px}.media-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:21px 11px}.media-title{font-size:11px}.catalog-toolbar{align-items:flex-start;flex-direction:column}.catalog-status{order:-1}.filters{gap:6px}.filter{font-size:9px;padding:8px 10px}.tmdb-disclaimer{align-items:flex-start;font-size:8px;line-height:1.6}.membership{grid-template-columns:1fr;gap:18px}.membership-art{height:210px}.membership-ticket{transform:rotate(-7deg) scale(.88)}.membership-copy{padding-bottom:20px}.membership-points{gap:11px}.about-steps{grid-template-columns:1fr;gap:24px}.about-steps h3{margin-top:12px}.footer{align-items:flex-start;flex-direction:column}.footer-right{margin-right:0!important}.details-layout{grid-template-columns:100px 1fr;gap:14px}.details-copy h2{font-size:22px}.details-overview{font-size:11px}.dialog{padding:20px 16px}.candidate-row{align-items:flex-start}.episode-row{align-items:flex-start}.episode-row button{padding:8px 10px}.player-heading h2{font-size:18px}}

/* CineNova curated homepage shelves and source-neutral catalog controls */
.home-shelves{padding-top:18px;padding-bottom:28px;background:linear-gradient(180deg,#090b10,#0c0f15)}
.home-shelf{padding:24px 0 27px;border-bottom:1px solid var(--line)}
.home-shelf:last-child{border-bottom:0}
.shelf-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:18px}
.shelf-heading h2{font-size:clamp(23px,3vw,32px);letter-spacing:-.04em;margin:0;line-height:1.4}
.shelf-kicker{font-size:10px;color:var(--muted);padding-bottom:5px}
.shelf-track{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;padding:2px 2px 12px;scrollbar-width:thin;scrollbar-color:#383f4c transparent;min-height:10px}
.shelf-card{flex:0 0 clamp(126px,15vw,174px);width:clamp(126px,15vw,174px);min-width:0;cursor:pointer;scroll-snap-align:start;transition:transform .2s}
.shelf-card:hover{transform:translateY(-4px)}
.shelf-poster{position:relative;aspect-ratio:2/3;border:1px solid #ffffff10;border-radius:11px;overflow:hidden;background:linear-gradient(145deg,#252a34,#10131b)}
.shelf-poster img{display:block;width:100%;height:100%;object-fit:cover}
.shelf-card-title{font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:10px 1px 5px;direction:auto}
.shelf-card-meta{display:flex;align-items:center;justify-content:space-between;gap:5px;color:var(--muted);font-size:9px;flex-wrap:wrap}
.shelf-note{color:var(--muted);font-size:11px;line-height:1.8;margin:8px 0 0}
.shelf-loading{color:var(--muted);font-size:11px;padding:22px 4px;min-width:180px}
.xtream-controls{display:flex;align-items:end;gap:12px;flex-wrap:wrap;padding:18px 0 12px;margin-top:18px;border-top:1px solid var(--line)}
.catalog-select-group{display:flex;flex-direction:column;gap:7px;min-width:180px}
.catalog-select-group label{font-size:10px;color:var(--muted)}
.catalog-select-group select{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:11px 13px;min-width:180px;max-width:100%;font-size:11px;outline:none}
.xtream-filter-note{flex:1 1 100%;color:var(--muted);font-size:10px;line-height:1.8;margin:2px 0 0}
.source-ratings{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px;direction:ltr;justify-content:flex-start}
.rating-source{display:inline-flex;align-items:center;border-radius:5px;padding:3px 6px;font-size:9px;font-weight:800;border:1px solid var(--line);white-space:nowrap}
.imdb-rating{color:#f2d36f;background:#f2d36f0c}

.cam-version-tag{position:absolute;left:7px;bottom:8px;z-index:2;max-width:calc(100% - 14px);background:#7c2626ed;color:#fff0f0;border:1px solid #ffaaaa55;border-radius:5px;padding:5px 6px;font-size:8px;font-weight:900;line-height:1.3;text-align:center}
.weekly-episode-tag{position:absolute;left:7px;right:7px;bottom:35px;z-index:2;background:#c9ff5aeb;color:#11150a;border-radius:5px;padding:5px 6px;font-size:8px;font-weight:900;text-align:center}
.cam-detail-warning{border:1px solid #ff8e8e50;background:#ff4d4d10;color:#ffb8b8;padding:9px 11px;border-radius:9px;font-size:11px;line-height:1.7;margin:8px 0 12px}
.subtitle-status{border:1px solid #c9ff5a3a;background:#c9ff5a08;color:#dbeab7;padding:9px 11px;border-radius:9px;font-size:10px;line-height:1.8;margin-top:14px}
.subtitle-status.unknown{color:var(--muted);border-color:var(--line);background:#ffffff04}
.media-extra{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.media-category-tag{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:4px 6px;font-size:8px;color:#c7ccd4}
@media(max-width:640px){.shelf-heading{align-items:flex-start;flex-direction:column;gap:4px}.shelf-heading h2{font-size:25px}.shelf-kicker{font-size:9px}.shelf-card{flex-basis:125px;width:125px}.xtream-controls{align-items:stretch}.catalog-select-group,.catalog-select-group select{width:100%;min-width:0}.shelf-card-title{font-size:11px}.cam-version-tag{font-size:7px}}

/* CineNova navigation views */
.nav-view.active{color:var(--accent,#c9ff5a)}
#homeShelves{padding-top:30px}
#catalog.hidden{display:none!important}
#homeShelves.hidden{display:none!important}

/* CineNova homepage refinement */
.home-search-box{position:absolute;top:91px;left:clamp(18px,6.5vw,100px);z-index:5;width:min(390px,38vw);background:#11151df2;box-shadow:0 12px 35px #0005}
.hero{padding-top:78px}
.hero-poster{overflow:hidden;padding:0!important;background:#11151d!important}
.hero-poster img{display:block;width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.hero-poster:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#07090ddd);pointer-events:none}
.hero-poster .hero-tag{z-index:2;position:absolute;top:12px;right:10px;background:#c9ff5a;color:#11150a;border-radius:5px;padding:6px 8px;font-size:9px;font-weight:900}
.hero-poster-a span,.hero-poster-b span{position:absolute;bottom:12px;right:10px;z-index:2;font-size:10px;font-weight:800}
.shelf-more-row{display:flex;justify-content:center;margin-top:14px}
.shelf-more{background:transparent;color:#ffd84d;border:1px solid #ffd84d;border-radius:9px;padding:10px 26px;font-size:12px;font-weight:800;transition:background .2s,color .2s}
.shelf-more:hover{background:#ffd84d;color:#15130a}
.movie-language-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 0}
.movie-language-tab{border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);padding:10px 18px;font-size:11px}
.movie-language-tab.active{background:var(--accent);border-color:var(--accent);color:#101408;font-weight:900}
@media(max-width:640px){.home-search-box{position:relative;top:auto;left:auto;width:auto;margin:14px 16px 0}.hero{padding-top:30px}.hero-poster img{object-fit:cover}.movie-language-tabs{margin-top:12px}}

/* CineNova v5: cinematic hero refinement */
.hero{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 78% 46%,#8a5b2830 0,transparent 40%),linear-gradient(120deg,#10131b 0%,#151923 52%,#0b0e14 100%);border-bottom:1px solid #ffffff0c}
.hero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0c0f16 0%,#0c0f16e8 37%,#0c0f1640 75%,#0c0f16aa 100%);pointer-events:none}
.hero-visual{perspective:1100px;isolation:isolate}
.hero-poster{border:1px solid #ffffff25!important;border-radius:16px!important;box-shadow:0 28px 65px #0009,0 0 0 1px #ffffff08;transition:transform .35s ease,box-shadow .35s ease;transform-style:preserve-3d}
.hero-poster-main{transform:translateY(-7px) rotateY(-5deg) scale(1.04);z-index:3;box-shadow:0 32px 80px #000b,0 0 40px #c9ff5a12}
.hero-poster-a{transform:translateX(-8px) rotateY(13deg) rotateZ(-8deg) scale(.91);z-index:1}
.hero-poster-b{transform:translateX(8px) rotateY(-13deg) rotateZ(8deg) scale(.91);z-index:2}
.hero-poster img{filter:saturate(1.08) contrast(1.04)}
.hero-poster:after{inset:35% 0 0!important;background:linear-gradient(transparent 0%,#080a10b8 65%,#080a10f2 100%)!important}
.hero-poster .hero-tag{box-shadow:0 5px 22px #c9ff5a40}
.movie-language-tabs{gap:10px}
.movie-language-tab{background:#ffffff05;transition:all .2s ease}
.movie-language-tab:hover{border-color:var(--accent);color:var(--text)}
.movie-language-tab.active{box-shadow:0 6px 22px #c9ff5a1f}
@media(max-width:640px){.hero{background:radial-gradient(ellipse at 50% 70%,#8a5b2830 0,transparent 55%),#0c0f16}.hero:before{background:linear-gradient(180deg,#0c0f1680,#0c0f16e8)}.hero-poster-main{transform:translateY(-3px) scale(1.02)}.hero-poster-a{transform:translateX(-5px) rotateZ(-8deg) scale(.9)}.hero-poster-b{transform:translateX(5px) rotateZ(8deg) scale(.9)}}

/* Five IPTV currently-airing weekly series shelves */
.weekly-lists{display:grid;gap:24px}
.weekly-region-shelf{padding:18px 0 22px;border-top:1px solid #ffffff12}
.weekly-region-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px}
.weekly-region-heading h3{font-size:clamp(18px,2vw,24px);margin:0;font-weight:900;letter-spacing:-.025em}
.weekly-region-heading span{font-size:10px;color:var(--muted)}
.weekly-region-shelf .shelf-track{min-height:8px}
@media(max-width:640px){.weekly-region-heading{align-items:flex-start;flex-direction:column;gap:4px}.weekly-region-heading h3{font-size:20px}.weekly-region-heading span{font-size:9px}}


/* v20: constrain horizontal overflow to the individual poster rail, never the page. */
html,body{width:100%;max-width:100%;overflow-x:hidden;overscroll-behavior-x:none}
@supports (overflow:clip){html,body{overflow-x:clip}}
#homeShelves,.home-shelf,.weekly-section,.weekly-lists,.weekly-region-shelf{width:100%;max-width:100%;min-width:0}
.shelf-heading,.weekly-region-heading{min-width:0;max-width:100%}
.shelf-track{display:flex;width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;overscroll-behavior-inline:contain;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;contain:inline-size;}
.shelf-card{flex-shrink:0}
.hero-poster.poster-invalid{display:none!important}


/* CineNova v21 refinements requested by the user. */
.main-nav{font-size:15px;font-weight:750;gap:clamp(22px,2.2vw,36px)}
.main-nav a{padding:9px 0;white-space:nowrap}
.main-nav a:focus-visible{outline:2px solid var(--accent);outline-offset:5px;border-radius:4px}
@media(max-width:640px){.main-nav{font-size:15px;gap:17px}}
.hero-poster{cursor:pointer;outline:none}
.hero-poster:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.hero-poster:hover{filter:brightness(1.08)}
.hero-poster-title{position:absolute;z-index:3;right:10px;left:10px;bottom:38px;color:#fff;font-size:clamp(10px,1vw,14px);font-weight:900;line-height:1.4;text-shadow:0 2px 12px #000;direction:auto;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero-poster-badge{position:absolute;z-index:3;right:10px;bottom:12px;color:#c9ff5a;font-size:9px;font-weight:900;text-shadow:0 2px 12px #000}
.hero-poster-main .hero-tag{right:10px;top:10px}
.floating-rating{gap:7px}
.floating-rating span{display:none!important}
/* Keep all five weekly shelves the same height even when a category has fewer cards. */
.weekly-region-shelf{display:grid;grid-template-rows:34px 320px 34px 44px;align-content:start;min-height:468px}
.weekly-region-heading{min-height:34px;align-items:center;margin:0 0 8px}
.weekly-region-shelf .shelf-track{height:320px;min-height:320px;align-items:flex-start;align-self:start}
.weekly-region-shelf .shelf-note{height:34px;min-height:34px;overflow:hidden;margin:0;padding-top:6px}
.weekly-region-shelf .shelf-more-row{height:44px;min-height:44px;align-self:end;align-items:center;margin-top:0}
.weekly-region-shelf .shelf-more{min-height:38px}
@media(max-width:640px){
  .weekly-region-shelf{grid-template-rows:auto 258px 36px 44px;min-height:0}
  .weekly-region-heading{min-height:34px;align-items:flex-start;margin-bottom:8px}
  .weekly-region-shelf .shelf-track{height:258px;min-height:258px}
  .weekly-region-shelf .shelf-note{height:36px;min-height:36px}
  .hero-poster-title{right:7px;left:7px;bottom:31px;font-size:9px}
  .hero-poster-badge{right:7px;bottom:9px;font-size:8px}
}


/* CineNova v22: a clear search entry, three visible cinematic posters and no provider-status disclosure. */
.connection{display:none!important}
.home-search-box{
  position:relative;top:auto;left:auto;z-index:5;
  width:min(470px,calc(100% - 36px));min-height:56px;
  margin:18px 0 0 clamp(18px,6.5vw,100px);
  padding:7px 9px 7px 17px;border-radius:15px;
  background:linear-gradient(135deg,#171d28f7,#11151df7);
  border:1px solid #c9ff5a82;
  box-shadow:0 0 0 4px #c9ff5a0c,0 15px 38px #0008;
}
.home-search-box .search-icon{font-size:28px;color:var(--accent);font-weight:700}
.home-search-box input{font-size:14px;color:#fff;min-height:38px}
.home-search-box input::placeholder{color:#b1b8c5;opacity:1}
.home-search-box button{background:var(--accent);color:#101407;border-color:var(--accent);padding:11px 21px;font-size:13px;font-weight:900}
.home-search-box button:hover{background:var(--accent2)}
.hero{padding-top:36px;min-height:470px}
.hero-visual{min-width:0;overflow:visible;isolation:isolate}
.hero-poster{display:block;position:absolute;width:clamp(145px,14vw,190px);height:auto;aspect-ratio:2/3;padding:0!important;opacity:1;backface-visibility:hidden}
.hero-poster-a{transform:translateX(-116px) rotateY(11deg) rotateZ(-7deg) scale(.92);z-index:1}
.hero-poster-b{transform:translateX(116px) rotateY(-11deg) rotateZ(7deg) scale(.92);z-index:2}
.hero-poster-main{width:clamp(165px,15.5vw,210px);height:auto;aspect-ratio:2/3;transform:translateY(-5px) rotateY(-3deg) scale(1.03);z-index:3;text-align:initial;justify-content:flex-end;align-items:stretch;padding:0!important}
.hero-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
.hero-poster:after{content:"";position:absolute;inset:36% 0 0;background:linear-gradient(transparent,#07090df2);pointer-events:none;z-index:1}
.hero-poster-title{position:absolute;right:12px;left:12px;bottom:38px;z-index:3;font-size:clamp(11px,1vw,15px);line-height:1.5}
.hero-poster-badge,.hero-poster .hero-tag{position:absolute;z-index:4;top:auto;right:10px;bottom:11px;margin:0;padding:5px 7px;border-radius:6px;background:#c9ff5ae8;color:#11150a;font-size:9px;letter-spacing:0;font-weight:900;box-shadow:0 5px 22px #c9ff5a28}
.hero-poster-main .hero-tag{top:11px;bottom:auto}
.hero-poster.poster-invalid{display:none!important}
.hero-visual .floating-rating{display:none!important}
.main-nav{font-size:17px;font-weight:850;gap:clamp(22px,2.4vw,38px)}
.main-nav a{padding:10px 0}
.xtream-filter-note{margin-top:12px;color:#aeb5c3;font-size:12px;line-height:1.8;background:#ffffff04;border-right:3px solid var(--accent);padding:10px 13px;border-radius:0 9px 9px 0}
@media(max-width:950px){.home-search-box{width:min(450px,calc(100% - 40px));margin-left:20px}.hero{padding-top:30px}.hero-poster-a{transform:translateX(-92px) rotateY(8deg) rotateZ(-7deg) scale(.9)}.hero-poster-b{transform:translateX(92px) rotateY(-8deg) rotateZ(7deg) scale(.9)}}
@media(max-width:640px){
  .home-search-box{position:relative;top:auto;left:auto;width:calc(100% - 32px);margin:13px 16px 0;min-height:52px;padding:6px 8px 6px 13px}
  .home-search-box input{font-size:12px}
  .home-search-box button{padding:10px 15px;font-size:12px}
  .hero{padding-top:22px;grid-template-columns:1fr;gap:8px}
  .hero-visual{height:285px;margin-top:0}
  .hero-poster{width:clamp(112px,32vw,145px)}
  .hero-poster-main{width:clamp(128px,36vw,160px)}
  .hero-poster-a{transform:translateX(-75px) rotateZ(-7deg) scale(.92)}
  .hero-poster-b{transform:translateX(75px) rotateZ(7deg) scale(.92)}
  .hero-poster-title{right:7px;left:7px;bottom:32px;font-size:9px}
  .hero-poster-badge,.hero-poster .hero-tag{right:7px;bottom:8px;font-size:8px}
  .main-nav{font-size:15px;gap:15px}
  .xtream-filter-note{font-size:11px}
}


/* CineNova v23: clearer CAM mix, stronger left-aligned search, and more visible side posters. */
.home-search-box {
  align-self: flex-start !important;
  margin: 18px auto 0 clamp(18px, 6.5vw, 100px) !important;
  direction: rtl;
}
.hero-poster-a {
  transform: translateX(-158px) rotateY(11deg) rotateZ(-7deg) scale(.91) !important;
  z-index: 1 !important;
}
.hero-poster-b {
  transform: translateX(158px) rotateY(-11deg) rotateZ(7deg) scale(.91) !important;
  z-index: 2 !important;
}
.hero-poster-main { z-index: 4 !important; }
@media (max-width: 950px) {
  .home-search-box { margin-left: 20px !important; margin-right: auto !important; }
  .hero-poster-a { transform: translateX(-126px) rotateY(8deg) rotateZ(-7deg) scale(.9) !important; }
  .hero-poster-b { transform: translateX(126px) rotateY(-8deg) rotateZ(7deg) scale(.9) !important; }
}
@media (max-width: 640px) {
  .home-search-box {
    width: calc(100% - 32px) !important;
    margin: 13px auto 0 16px !important;
  }
  .hero-poster-a { transform: translateX(-91px) rotateZ(-7deg) scale(.92) !important; }
  .hero-poster-b { transform: translateX(91px) rotateZ(7deg) scale(.92) !important; }
}


/* CineNova v24: the hero artwork uses only recent foreign films returned by the server. */
.hero-poster-a{z-index:1!important}
.hero-poster-b{z-index:2!important}
.hero-poster-main{z-index:3!important}

/* CineNova panoramic banner refinement — reference proportion 1656:252 (~6.57:1) */
@media (min-width: 761px) {
  html, body { overflow-x: clip; }
  .topbar {
    position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 72px;
    padding: 0 clamp(24px, 7.5vw, 124px); gap: clamp(16px, 2vw, 34px);
    background: linear-gradient(180deg, rgba(5,7,10,.86), rgba(5,7,10,.47));
    border-bottom: 1px solid rgba(255,255,255,.06); backdrop-filter: blur(8px);
  }
  .brand { font-size: 18px; }
  .brand-mark { width: 31px; height: 31px; }
  .main-nav { gap: clamp(15px, 2vw, 31px); color: #f2f2f2; font-size: 13px; white-space: nowrap; }
  .main-nav a.active, .main-nav a:hover { color: #d5ff42; }
  .top-actions { margin-left: auto; }
  .home-search-box {
    position: absolute; z-index: 13; top: 15px; left: 50%; transform: translateX(-14%);
    width: clamp(280px, 25vw, 420px); height: 43px; margin: 0;
    padding: 4px 7px 4px 14px; border-radius: 999px;
    background: rgba(14,16,20,.76); border: 1px solid rgba(220,228,239,.38);
    box-shadow: 0 4px 22px #0005; backdrop-filter: blur(14px);
  }
  .home-search-box .search-icon { font-size: 22px; color: #f2f2f2; }
  .home-search-box input { font-size: 12px; }
  .home-search-box button { padding: 7px 13px; }
  .hero {
    height: 252px; min-height: 252px; max-height: 252px; padding: 80px clamp(28px, 8.5vw, 140px) 15px;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .85fr); gap: 20px;
    background:
      radial-gradient(ellipse at 76% 35%, rgba(128,93,54,.28), transparent 34%),
      linear-gradient(90deg, rgba(5,7,10,.96) 0%, rgba(5,7,10,.78) 36%, rgba(5,7,10,.25) 72%, rgba(5,7,10,.6) 100%),
      linear-gradient(135deg, #34302b 0%, #15171d 45%, #080a0f 100%);
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .hero:after { content:""; position:absolute; inset:72px 0 0; pointer-events:none; background:linear-gradient(0deg,rgba(7,9,13,.32),transparent 58%); }
  .hero-text { max-width: 610px; align-self: center; padding-top: 0; }
  .hero .eyebrow { font-size: 9px; margin-bottom: 7px; }
  .hero h1 { font-size: clamp(27px, 2.7vw, 43px); line-height: 1.13; letter-spacing: -.04em; margin-bottom: 8px; }
  .hero-text>p:not(.eyebrow) { font-size: 11px; line-height: 1.65; max-width: 420px; margin-bottom: 10px; }
  .hero-buttons .button { padding: 8px 13px; font-size: 10px; }
  .hero-micro { margin-top: 8px; font-size: 9px; }
  .hero-visual { height: 168px; min-width: 0; align-self: end; margin-bottom: 0; }
  .hero-poster { width: 104px; height: 155px; border-radius: 7px; padding: 10px; }
  .hero-poster span { font-size: 12px; }
  .hero-poster small, .hero-poster-main .hero-tag, .hero-poster-main small { font-size: 5px; }
  .hero-poster-a { transform: rotate(-11deg) translate(-62px, 4px); }
  .hero-poster-b { transform: rotate(11deg) translate(62px, 4px); }
  .hero-poster-main { width: 118px; height: 168px; padding: 10px; }
  .hero-poster-main strong { font-size: 25px; }
  .hero-glow { width: 150px; height: 150px; }
  .hero-orbit { width: 180px; height: 180px; }
  .orbit-two { width: 220px; height: 150px; }
  .floating-rating { bottom: 5px; right: calc(50% - 105px); padding: 6px 8px; font-size: 8px; }
  .floating-rating b { font-size: 10px; }
  .section-wrap { padding-top: 42px; padding-bottom: 42px; }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .topbar { padding-inline: 24px; }
  .main-nav { gap: 13px; font-size: 11px; }
  .home-search-box { width: 270px; transform: translateX(-8%); }
  .connection { display:none; }
  .hero { padding-inline: 34px; }
}
@media (max-width: 760px) {
  .topbar { position: sticky; height: 64px; padding-inline: 16px; }
  .home-search-box { position: relative; top: auto; left: auto; transform: none; width: calc(100% - 32px); margin: 12px 16px 0; }
  .hero { min-height: 0; height: auto; padding: 30px 20px 20px; grid-template-columns: 1fr; gap: 8px; }
  .hero-text { max-width: 100%; }
  .hero h1 { font-size: clamp(31px, 8vw, 43px); }
  .hero-text>p:not(.eyebrow) { font-size: 12px; }
  .hero-visual { height: 190px; margin-top: 3px; }
  .hero-poster { width: 112px; height: 166px; }
  .hero-poster-main { width: 128px; height: 178px; }
}

/* v28 — match the reference navigation, balanced margins, and a full-width featured carousel. */
:root { --accent:#ffd400; --accent2:#f0bb00; }
@media (min-width:761px) {
  .topbar {
    position:absolute; inset:0 0 auto 0; z-index:30; height:58px;
    display:grid; grid-template-columns:auto auto minmax(185px,1fr) auto;
    align-items:center; gap:clamp(12px,1.7vw,28px);
    padding:0 clamp(16px,2.2vw,38px); direction:ltr;
    background:linear-gradient(180deg,rgba(2,4,6,.94),rgba(2,4,6,.70));
    border-bottom:1px solid rgba(255,255,255,.07); backdrop-filter:blur(9px);
  }
  .brand-qitta { grid-column:1; position:relative; display:flex; width:76px; height:51px; flex:0 0 76px; padding:12px 0 0; margin:0; align-items:center; justify-content:flex-end; flex-direction:column; gap:0; direction:rtl; letter-spacing:0; line-height:1; white-space:nowrap; }
  .brand-clapper { position:absolute; top:2px; left:15px; width:48px; height:9px; display:flex; gap:4px; transform:skew(-24deg) rotate(-7deg); overflow:visible; }
  .brand-clapper i { display:block; height:8px; flex:1; background:#ffd400; border-radius:1px; box-shadow:0 1px 2px #0008; }
  .brand-arabic { font-family:Tahoma,Arial,sans-serif; font-size:25px; line-height:.93; font-weight:1000; color:#fff; letter-spacing:-1.5px; text-shadow:0 2px 5px #0009; }
  .brand-plus { margin-top:2px; direction:ltr; font-size:10px; line-height:1; font-weight:1000; letter-spacing:2px; color:#fff; }
  .brand-plus span { color:#ffd400; font-size:15px; margin-left:1px; }
  .main-nav { grid-column:2; display:flex; align-items:center; justify-content:flex-start; gap:clamp(12px,1.65vw,27px); margin:0; padding:0; direction:rtl; color:#f2f2f2; font-size:clamp(10px,.9vw,14px); font-weight:800; white-space:nowrap; }
  .main-nav a { padding:8px 0; color:#f3f3f3; }
  .main-nav a.active,.main-nav a:hover { color:#ffd400; }
  .home-search-box { grid-column:3; position:relative; inset:auto; justify-self:center; transform:none; width:min(100%,clamp(200px,30vw,410px)); height:35px; min-height:35px; margin:0; padding:3px 7px 3px 11px; display:flex; align-items:center; gap:8px; border-radius:999px; background:rgba(18,20,23,.80); border:1px solid rgba(213,220,232,.40); box-shadow:0 3px 14px #0006; backdrop-filter:blur(12px); direction:ltr; }
  .home-search-box .search-icon { font-size:21px; line-height:1; color:#fafafa; }
  .home-search-box input { flex:1; min-width:0; color:#fff; font-size:clamp(9px,.8vw,12px); text-align:right; direction:rtl; background:transparent; }
  .home-search-box input::placeholder { color:#c4c7cc; }
  .home-search-box button { width:23px; height:25px; flex:0 0 23px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:#fff; font-size:0; padding:0; }
  .home-search-box button::before { content:""; width:11px; height:11px; border:1.8px solid currentColor; border-radius:50%; display:block; }
  .home-search-box button::after { content:""; width:5px; height:1.8px; background:currentColor; transform:translate(5px,-2px) rotate(45deg); display:block; margin-top:-4px; }
  .top-actions { grid-column:4; justify-self:end; display:flex; flex-direction:row; align-items:center; justify-content:flex-end; gap:clamp(8px,1.15vw,19px); margin:0; min-width:0; direction:ltr; }
  .connection { display:none!important; }
  .notification-button { border:0; background:transparent; color:#f8f8f8; width:29px; height:33px; flex:0 0 29px; padding:4px; display:grid; place-items:center; border-radius:50%; }
  .notification-button:hover { background:#ffffff12; color:#ffd400; }
  .notification-button svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .profile-menu { position:relative; display:block; flex:0 0 auto; }
  .profile-trigger { display:flex; align-items:center; justify-content:flex-start; gap:9px; background:transparent; border:0; color:#fff; padding:4px 0; margin:0; direction:ltr; white-space:nowrap; border-radius:8px; }
  .profile-trigger:hover .profile-name { color:#ffd400; }
  .profile-avatar { display:grid; place-items:center; width:31px; height:31px; flex:0 0 31px; border-radius:50%; background:radial-gradient(circle at 35% 27%,#9da9b5 0,#46505e 27%,#181c24 70%); border:2px solid #515863; box-shadow:0 0 0 2px #15171b; color:#fff; font-size:12px; font-weight:900; }
  .profile-name { color:#f7f7f7; font-size:clamp(10px,.88vw,13px); font-weight:750; }
  .profile-chevron { width:14px; height:14px; flex:0 0 14px; fill:none; stroke:#f5f5f5; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .profile-dropdown { position:absolute; top:calc(100% + 7px); right:-3px; z-index:70; width:194px; padding:7px; border:1px solid #262a31; border-radius:9px; background:rgba(10,12,15,.98); box-shadow:0 12px 32px #000b; direction:ltr; backdrop-filter:blur(12px); }
  .profile-dropdown[hidden] { display:none!important; }
  .profile-dropdown button { display:flex; flex-direction:row; align-items:center; gap:12px; width:100%; min-height:34px; padding:7px 8px; border:0; border-radius:6px; background:transparent; color:#f0f1f2; text-align:right; direction:ltr; font-family:inherit; font-size:11px; font-weight:600; white-space:nowrap; }
  .profile-dropdown button:hover { background:#ffffff0c; }
  .profile-dropdown button svg { display:block; width:19px; height:19px; flex:0 0 19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .profile-dropdown button span { direction:rtl; flex:1; }
  .profile-divider { height:1px; background:#ffffff14; margin:5px 3px; }
  .profile-dropdown .profile-logout { color:#ff4148; }
  .icon-button { display:none; }
  .hero { height:285px; min-height:285px; max-height:none; position:relative; isolation:isolate; display:flex; align-items:center; justify-content:flex-start; overflow:hidden; margin:0; padding:68px clamp(20px,5.4vw,88px) 20px; border:0; background:#07090c; }
  .hero:before { display:none!important; }
  .hero:after { content:""; position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(0deg,rgba(5,7,10,.74) 0%,transparent 40%),linear-gradient(90deg,rgba(4,6,8,.90) 0%,rgba(4,6,8,.72) 33%,rgba(4,6,8,.16) 67%,rgba(4,6,8,.30) 100%); }
  .hero-backdrop { position:absolute; inset:0; z-index:0; overflow:hidden; background:radial-gradient(ellipse at 70% 35%,#66513a 0,transparent 35%),linear-gradient(110deg,#262a29,#090b0f 75%); }
  .hero-backdrop img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center 28%; opacity:.91; filter:saturate(.88) contrast(1.04); transition:opacity .35s ease; }
  .hero-backdrop-shade { position:absolute; inset:0; background:linear-gradient(0deg,#07090bf0 0,transparent 42%); }
  .hero-text { position:relative; z-index:3; width:min(48%,590px); max-width:590px; padding:0; margin:0; align-self:center; text-align:left; direction:ltr; }
  .hero-kicker { margin:0 0 5px; color:#ffd400; font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
  .hero h1 { display:block; max-width:100%; margin:0 0 7px; color:#fff; font-size:clamp(26px,3.25vw,49px); line-height:1.04; letter-spacing:-.045em; font-weight:1000; overflow-wrap:anywhere; text-shadow:0 2px 18px #000b; direction:ltr; text-align:left; }
  .hero-meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:7px; margin:0 0 8px; color:#e6e7e8; font-size:clamp(9px,.9vw,12px); direction:ltr; }
  .hero-meta span { white-space:nowrap; }
  .hero-meta i { font-size:10px; color:#ffd400; font-style:normal; }
  .hero-description { max-width:410px; margin:0 0 10px; color:#f0f0f0; font-size:clamp(10px,1vw,13px); line-height:1.55; text-align:left; direction:rtl; text-shadow:0 1px 6px #000d; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .hero-buttons { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:9px; margin:0; direction:ltr; }
  .hero-buttons .button { min-height:33px; padding:8px 14px; border-radius:7px; font-size:11px; line-height:1.1; gap:7px; white-space:nowrap; }
  .hero-buttons .button-primary { background:#ffd400; color:#0b0c08; }
  .hero-buttons .button-ghost { background:rgba(10,12,16,.70); border:1px solid #ffffff28; color:#fff; }
  .hero-buttons .button-ghost.saved { border-color:#ffd40090; color:#ffd400; }
  .hero-dots { position:absolute; z-index:4; right:clamp(20px,7.5vw,124px); bottom:13px; display:flex; align-items:center; justify-content:center; gap:7px; direction:ltr; }
  .hero-dot { display:block; width:7px; height:7px; padding:0; border:0; border-radius:50%; background:#aeb1b7; opacity:.8; transition:width .2s,background .2s,opacity .2s; }
  .hero-dot:hover { opacity:1; }
  .hero-dot.active { width:9px; height:9px; background:#ffd400; opacity:1; }
  #homeShelves { padding:16px clamp(16px,2.1vw,36px) 34px; }
  .home-shelf { margin:0 0 23px; }
  .shelf-heading h2 { font-size:clamp(16px,1.45vw,22px); }
  .shelf-kicker { font-size:9px; }
  .site-toast { position:fixed; z-index:100; bottom:22px; left:50%; transform:translate(-50%,12px); opacity:0; pointer-events:none; max-width:calc(100vw - 32px); padding:11px 16px; border-radius:9px; background:#14171d; color:#fff; border:1px solid #ffffff22; box-shadow:0 8px 30px #0009; font-size:12px; transition:opacity .2s,transform .2s; }
  .site-toast.visible { opacity:1; transform:translate(-50%,0); }
  .footer-brand { transform:scale(.9); transform-origin:left center; }
}
@media (min-width:1100px) {
  .hero { height:252px; min-height:252px; padding-top:66px; }
  .hero h1 { font-size:clamp(30px,2.5vw,43px); }
  .hero-text { width:min(46%,620px); }
}
@media (max-width:1100px) and (min-width:761px) {
  .topbar { grid-template-columns:auto auto minmax(170px,1fr) auto; gap:12px; padding-inline:20px; }
  .brand-qitta { width:69px; flex-basis:69px; }
  .brand-arabic { font-size:23px; }
  .main-nav { gap:12px; font-size:10px; }
  .home-search-box { width:min(100%,270px); }
  .top-actions { gap:9px; }
  .profile-name { font-size:10px; }
  .profile-avatar { width:27px; height:27px; flex-basis:27px; }
  .hero { padding-inline:34px; }
  .hero-text { width:53%; }
}
@media (max-width:760px) {
  .topbar { position:sticky; top:0; inset:auto; z-index:40; width:100%; height:auto; min-height:0; display:grid; grid-template-columns:auto 1fr; grid-template-rows:48px 39px 34px; gap:0 10px; align-items:center; padding:5px 14px 0; direction:ltr; background:rgba(4,6,8,.96); border-bottom:1px solid #ffffff12; backdrop-filter:blur(14px); }
  .brand-qitta { grid-column:1; grid-row:1; position:relative; width:68px; height:44px; padding-top:10px; display:flex; align-items:center; justify-content:flex-end; flex-direction:column; gap:0; direction:rtl; }
  .brand-clapper { position:absolute; top:1px; left:14px; width:42px; height:8px; display:flex; gap:3px; transform:skew(-24deg) rotate(-7deg); }
  .brand-clapper i { display:block; flex:1; height:7px; background:#ffd400; }
  .brand-arabic { font-size:22px; line-height:.9; font-weight:1000; letter-spacing:-1.3px; color:#fff; }
  .brand-plus { margin-top:2px; font-size:9px; font-weight:1000; letter-spacing:1.6px; color:#fff; direction:ltr; }
  .brand-plus span { color:#ffd400; font-size:13px; }
  .main-nav { grid-column:1 / -1; grid-row:3; position:static; display:flex; flex-direction:row; align-items:center; justify-content:space-around; gap:15px; width:100%; height:34px; overflow-x:auto; padding:0 2px; margin:0; border:0; background:transparent; font-size:11px; white-space:nowrap; scrollbar-width:none; }
  .main-nav::-webkit-scrollbar { display:none; }
  .main-nav a { padding:7px 0; flex:0 0 auto; }
  .home-search-box { grid-column:1 / -1; grid-row:2; position:static; inset:auto; justify-self:stretch; align-self:center; transform:none; display:flex; width:100%; min-width:0; height:32px; min-height:32px; margin:0; padding:3px 8px; gap:7px; border-radius:999px; background:#11151bd9; border:1px solid #ffffff2a; direction:ltr; }
  .home-search-box .search-icon { font-size:19px; color:#f8f8f8; }
  .home-search-box input { font-size:11px; text-align:right; direction:rtl; }
  .home-search-box button { display:grid; place-items:center; width:22px; height:23px; padding:0; border:0; background:transparent; color:#fff; font-size:0; }
  .home-search-box button::before { content:""; width:10px; height:10px; border:1.6px solid currentColor; border-radius:50%; }
  .home-search-box button::after { content:""; width:5px; height:1.6px; background:currentColor; transform:translate(5px,-2px) rotate(45deg); display:block; margin-top:-4px; }
  .top-actions { grid-column:2; grid-row:1; display:flex; align-items:center; justify-content:flex-end; gap:10px; min-width:0; direction:ltr; }
  .connection { display:none!important; }
  .notification-button { display:grid; place-items:center; width:26px; height:30px; flex:0 0 26px; padding:3px; background:transparent; border:0; color:#fff; }
  .notification-button svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .profile-menu { position:relative; }
  .profile-trigger { display:flex; align-items:center; gap:6px; border:0; background:transparent; color:#fff; padding:3px 0; direction:ltr; min-width:0; }
  .profile-avatar { display:grid; place-items:center; width:27px; height:27px; flex:0 0 27px; border:2px solid #515862; border-radius:50%; background:radial-gradient(circle at 35% 27%,#9da9b5,#242a35 66%); color:#fff; font-size:10px; font-weight:900; }
  .profile-name { max-width:91px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; font-weight:750; }
  .profile-chevron { width:12px; height:12px; flex:0 0 12px; fill:none; stroke:#eee; stroke-width:2; }
  .profile-dropdown { position:absolute; right:-2px; top:calc(100% + 6px); z-index:75; width:194px; padding:7px; border:1px solid #262a31; border-radius:9px; background:#0b0d10f7; box-shadow:0 12px 32px #000b; direction:ltr; }
  .profile-dropdown[hidden] { display:none!important; }
  .profile-dropdown button { display:flex; width:100%; min-height:34px; align-items:center; gap:12px; padding:7px 8px; border:0; border-radius:6px; background:transparent; color:#f0f1f2; font-family:inherit; font-size:11px; text-align:right; direction:ltr; }
  .profile-dropdown button:hover { background:#ffffff0c; }
  .profile-dropdown button svg { width:19px; height:19px; flex:0 0 19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .profile-dropdown button span { flex:1; direction:rtl; }
  .profile-divider { height:1px; background:#ffffff14; margin:5px 3px; }
  .profile-dropdown .profile-logout { color:#ff4148; }
  .icon-button { display:none; }
  .hero { height:auto; min-height:356px; max-height:none; display:flex; align-items:flex-end; justify-content:flex-start; margin:0; padding:26px 19px 57px; overflow:hidden; position:relative; isolation:isolate; background:#080a0d; }
  .hero:before { display:none!important; }
  .hero:after { content:""; display:block; position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(0deg,rgba(5,7,10,.98) 0%,rgba(5,7,10,.87) 28%,rgba(5,7,10,.20) 83%,rgba(5,7,10,.4) 100%),linear-gradient(90deg,rgba(4,6,8,.65),transparent 100%); }
  .hero-backdrop { position:absolute; inset:0; z-index:0; overflow:hidden; background:linear-gradient(110deg,#262a29,#090b0f); }
  .hero-backdrop img { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; object-position:center 25%; opacity:.84; filter:saturate(.9); }
  .hero-backdrop-shade { position:absolute; inset:0; background:linear-gradient(0deg,#07090bf0 0,transparent 70%); }
  .hero-text { position:relative; z-index:3; width:100%; max-width:none; align-self:flex-end; text-align:left; direction:ltr; }
  .hero-kicker { margin:0 0 5px; color:#ffd400; font-size:10px; font-weight:900; }
  .hero h1 { max-width:100%; margin:0 0 7px; font-size:clamp(25px,7vw,34px); line-height:1.08; letter-spacing:-.04em; color:#fff; text-align:left; direction:ltr; }
  .hero-meta { display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:6px; margin:0 0 8px; font-size:10px; direction:ltr; color:#f0f0f0; }
  .hero-meta i { color:#ffd400; font-style:normal; }
  .hero-description { max-width:100%; margin:0 0 11px; font-size:11px; line-height:1.65; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; direction:rtl; text-align:right; color:#eee; }
  .hero-buttons { display:flex; flex-direction:row; justify-content:flex-start; flex-wrap:wrap; gap:8px; margin:0; direction:ltr; }
  .hero-buttons .button { min-height:34px; padding:8px 13px; border-radius:7px; font-size:11px; gap:7px; }
  .hero-buttons .button-primary { background:#ffd400; color:#0b0c08; }
  .hero-buttons .button-ghost { background:#0b0d11c9; border:1px solid #ffffff2b; color:#fff; }
  .hero-buttons .button-ghost.saved { color:#ffd400; border-color:#ffd40080; }
  .hero-dots { position:absolute; z-index:4; right:20px; bottom:16px; display:flex; align-items:center; gap:7px; direction:ltr; }
  .hero-dot { width:6px; height:6px; padding:0; border:0; border-radius:50%; background:#9da1a9; opacity:.8; }
  .hero-dot.active { width:8px; height:8px; background:#ffd400; opacity:1; }
  #homeShelves { padding:16px 15px 28px; }
  .home-shelf { margin-bottom:21px; }
  .shelf-heading h2 { font-size:19px; }
  .shelf-card { flex-basis:112px; width:112px; }
  .site-toast { position:fixed; z-index:100; bottom:18px; left:50%; transform:translate(-50%,12px); opacity:0; pointer-events:none; max-width:calc(100vw - 32px); padding:10px 14px; border-radius:9px; background:#14171d; color:#fff; border:1px solid #ffffff22; box-shadow:0 8px 30px #0009; font-size:11px; transition:opacity .2s,transform .2s; }
  .site-toast.visible { opacity:1; transform:translate(-50%,0); }
  .footer-brand { transform:none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-backdrop img,.hero-dot,.site-toast { transition:none!important; }
}
/* Layout calibration after browser-size review: keep search to the right of centre and hero copy on the left. */
@media (min-width:761px) {
  .main-nav { margin-left:clamp(8px,1.2vw,20px); }
  .home-search-box { position:absolute; left:48%; top:50%; transform:translateY(-50%); width:clamp(216px,25vw,410px); justify-self:unset; }
  .hero { direction:ltr; }
}
@media (max-width:1100px) and (min-width:761px) {
  .home-search-box { left:47%; width:clamp(212px,26vw,286px); }
  .top-actions { gap:7px; }
  .profile-trigger { gap:6px; }
  .profile-avatar { width:25px; height:25px; flex-basis:25px; }
  .profile-name { max-width:82px; font-size:9px; }
  .profile-chevron { width:12px; height:12px; flex-basis:12px; }
  .notification-button { width:25px; height:30px; flex-basis:25px; }
}
@media (max-width:760px) { .hero { direction:ltr; } }
@media (min-width:761px) {
  .home-search-box { grid-column:1 / -1; grid-row:1; }
  .brand-qitta { width:80px; flex-basis:80px; }
  .brand-arabic { font-size:28px; }
  .brand-clapper { left:11px; width:57px; }
}
@media (max-width:1100px) and (min-width:761px) {
  .brand-arabic { font-size:25px; }
  .brand-qitta { width:74px; flex-basis:74px; }
  .brand-clapper { left:10px; width:52px; }
}
@media (min-width:761px) {
  .home-search-box { left:calc(48vw - 40px); top:11.5px; transform:none; }
}
@media (max-width:1100px) and (min-width:761px) {
  .home-search-box { left:calc(48vw - 40px); top:11.5px; }
}
@media (min-width:761px) { .home-search-box { top:-6.5px; } }

/* CineNova v29 — responsive reference-layout calibration */
@media (min-width: 761px) {
  .topbar {
    height: clamp(58px, 4vw, 78px) !important;
    min-height: clamp(58px, 4vw, 78px) !important;
    padding: 0 clamp(30px, 3.8vw, 72px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  .brand-qitta {
    width: clamp(74px, 5.4vw, 104px) !important;
    min-width: clamp(74px, 5.4vw, 104px) !important;
    flex: 0 0 clamp(74px, 5.4vw, 104px) !important;
    height: clamp(51px, 3.5vw, 68px) !important;
    margin: 0 !important;
  }
  .brand-arabic {
    font-size: clamp(24px, 1.7vw, 34px) !important;
    letter-spacing: -1.5px !important;
  }
  .brand-clapper {
    left: clamp(10px, .7vw, 14px) !important;
    width: clamp(48px, 3.1vw, 62px) !important;
    height: clamp(8px, .55vw, 11px) !important;
  }
  .brand-clapper i { height: 100% !important; }
  .brand-plus { font-size: clamp(9px, .65vw, 13px) !important; }
  .brand-plus span { font-size: clamp(13px, .8vw, 16px) !important; }

  /* Keep navigation between the logo and search instead of crowding the logo. */
  .main-nav {
    position: absolute !important;
    left: clamp(134px, 16.7vw, 320px) !important;
    top: 50% !important;
    right: auto !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: clamp(16px, 1.35vw, 27px) !important;
    font-size: clamp(12px, .86vw, 16px) !important;
    white-space: nowrap !important;
    background: transparent !important;
    border: 0 !important;
    z-index: 31 !important;
  }
  .main-nav a { padding: 8px 0 !important; }

  /* Center search vertically. The previous -6.5px top offset clipped its spacing. */
  .home-search-box {
    position: absolute !important;
    left: 53% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: clamp(240px, 29.5vw, 550px) !important;
    min-width: 0 !important;
    height: clamp(30px, 1.85vw, 36px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 4px 8px 4px 13px !important;
    z-index: 31 !important;
    border-radius: 999px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }
  .home-search-box .search-icon { font-size: clamp(18px, 1.2vw, 24px) !important; }
  .home-search-box input { font-size: clamp(10px, .67vw, 13px) !important; }
  .home-search-box button { padding: 4px 8px !important; }

  .top-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: clamp(9px, .8vw, 16px) !important;
    margin: 0 0 0 auto !important;
    min-width: 0 !important;
    position: relative !important;
    z-index: 32 !important;
  }
  .notification-button {
    width: clamp(26px, 1.8vw, 34px) !important;
    height: clamp(30px, 2vw, 38px) !important;
    flex: 0 0 clamp(26px, 1.8vw, 34px) !important;
    padding: 3px !important;
  }
  .notification-button svg {
    width: clamp(20px, 1.3vw, 26px) !important;
    height: clamp(20px, 1.3vw, 26px) !important;
  }
  .profile-trigger { gap: clamp(6px, .5vw, 10px) !important; }
  .profile-avatar {
    width: clamp(28px, 2vw, 38px) !important;
    height: clamp(28px, 2vw, 38px) !important;
    flex: 0 0 clamp(28px, 2vw, 38px) !important;
  }
  .profile-name { font-size: clamp(11px, .76vw, 15px) !important; max-width: none !important; }
  .profile-chevron { width: clamp(11px, .7vw, 14px) !important; height: clamp(11px, .7vw, 14px) !important; }

  /* The banner scales with viewport width, matching the wide reference composition. */
  .hero {
    width: 100% !important;
    height: clamp(285px, 29vw, 560px) !important;
    min-height: clamp(285px, 29vw, 560px) !important;
    max-height: none !important;
    padding: clamp(65px, 5.5vw, 106px) clamp(30px, 4.2vw, 80px) clamp(20px, 1.5vw, 30px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .hero-backdrop, .hero-backdrop img, .hero-backdrop-shade { height: 100% !important; }
  .hero-backdrop img { object-fit: cover !important; object-position: center 30% !important; }
  .hero-text {
    width: min(46%, 720px) !important;
    max-width: 720px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
  }
  .hero-kicker { font-size: clamp(10px, .7vw, 13px) !important; margin-bottom: clamp(5px, .45vw, 9px) !important; }
  .hero h1 {
    max-width: 100% !important;
    font-size: clamp(34px, 3.2vw, 62px) !important;
    line-height: 1.04 !important;
    margin: 0 0 clamp(7px, .6vw, 12px) !important;
  }
  .hero-meta {
    font-size: clamp(10px, .78vw, 15px) !important;
    gap: clamp(6px, .55vw, 11px) !important;
    margin-bottom: clamp(7px, .55vw, 11px) !important;
  }
  .hero-description {
    max-width: min(42vw, 620px) !important;
    font-size: clamp(11px, .82vw, 16px) !important;
    line-height: 1.6 !important;
    margin: 0 0 clamp(10px, .9vw, 17px) !important;
    -webkit-line-clamp: 2 !important;
  }
  .hero-buttons { gap: clamp(8px, .65vw, 13px) !important; }
  .hero-buttons .button {
    min-height: clamp(34px, 2.2vw, 44px) !important;
    padding: clamp(8px, .7vw, 14px) clamp(13px, 1vw, 20px) !important;
    border-radius: clamp(7px, .55vw, 10px) !important;
    font-size: clamp(11px, .72vw, 14px) !important;
    gap: clamp(7px, .5vw, 10px) !important;
  }
  .hero-dots {
    right: clamp(30px, 4vw, 78px) !important;
    bottom: clamp(14px, 1vw, 22px) !important;
    gap: clamp(6px, .45vw, 9px) !important;
  }
  .hero-dot { width: clamp(6px, .42vw, 8px) !important; height: clamp(6px, .42vw, 8px) !important; }
  .hero-dot.active { width: clamp(8px, .52vw, 10px) !important; height: clamp(8px, .52vw, 10px) !important; }

  /* Keep the shelf density close to the reference at compact desktop widths. */
  #homeShelves { padding-inline: clamp(16px, 2.1vw, 36px) !important; }
  .shelf-track { gap: clamp(8px, .7vw, 14px) !important; }
  .shelf-card { flex-basis: clamp(76px, 9.1vw, 174px) !important; width: clamp(76px, 9.1vw, 174px) !important; }
  .shelf-card-title { font-size: clamp(9px, .63vw, 12px) !important; }
  .shelf-card-meta { font-size: clamp(8px, .47vw, 9px) !important; }
}

/* At compact desktop widths the avatar itself opens the same profile menu. */
@media (min-width: 761px) and (max-width: 900px) {
  .profile-name, .profile-chevron { display: none !important; }
  .top-actions { gap: 10px !important; }
  .home-search-box { width: clamp(220px, 29vw, 250px) !important; }
}


/* CineNova v30 — typography, search field and banner proportions matched to the supplied reference. */
:root {
  font-family: "Cairo", Tahoma, Arial, sans-serif !important;
}

@media (min-width: 761px) {
  .topbar {
    height: clamp(56px, 4.35vw, 74px) !important;
    min-height: clamp(56px, 4.35vw, 74px) !important;
    padding: 0 clamp(28px, 8.4vw, 140px) !important;
    background: linear-gradient(180deg, rgba(4, 6, 8, .78), rgba(4, 6, 8, .28)) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
    backdrop-filter: blur(10px) !important;
  }

  .brand-qitta {
    width: clamp(68px, 6vw, 102px) !important;
    min-width: clamp(68px, 6vw, 102px) !important;
    flex-basis: clamp(68px, 6vw, 102px) !important;
    height: clamp(48px, 4vw, 66px) !important;
    padding-top: 11px !important;
  }
  .brand-arabic {
    font-family: Tahoma, Arial, sans-serif !important;
    font-size: clamp(26px, 2.05vw, 34px) !important;
    font-weight: 1000 !important;
    letter-spacing: -1.5px !important;
    line-height: .93 !important;
  }
  .brand-clapper {
    top: 1px !important;
    left: clamp(10px, .85vw, 16px) !important;
    width: clamp(47px, 3.9vw, 66px) !important;
    height: clamp(8px, .65vw, 11px) !important;
  }
  .brand-clapper i { height: 100% !important; }
  .brand-plus { font-size: clamp(9px, .72vw, 12px) !important; letter-spacing: 1.8px !important; }
  .brand-plus span { font-size: clamp(13px, .9vw, 16px) !important; }

  .main-nav {
    left: clamp(128px, 19.15vw, 318px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    gap: clamp(14px, 1.55vw, 27px) !important;
    font-family: "Cairo", Tahoma, Arial, sans-serif !important;
    font-size: clamp(12px, .95vw, 16px) !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
  }
  .main-nav a { font-family: inherit !important; font-weight: 700 !important; }

  .home-search-box {
    left: 48.7% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: clamp(240px, 24.7vw, 410px) !important;
    min-width: 0 !important;
    height: clamp(30px, 2.65vw, 44px) !important;
    min-height: clamp(30px, 2.65vw, 44px) !important;
    margin: 0 !important;
    padding: 4px 9px 4px 15px !important;
    gap: 8px !important;
    border: 1px solid rgba(218, 225, 235, .43) !important;
    border-radius: 999px !important;
    background: rgba(15, 17, 21, .78) !important;
    box-shadow: 0 3px 15px rgba(0, 0, 0, .34) !important;
    backdrop-filter: blur(12px) !important;
  }
  .home-search-box .search-icon {
    font-size: clamp(18px, 1.4vw, 23px) !important;
    line-height: 1 !important;
    color: #f8f8f8 !important;
  }
  .home-search-box input {
    font-family: "Cairo", Tahoma, Arial, sans-serif !important;
    font-size: clamp(10px, .79vw, 13px) !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
  }
  .home-search-box input::placeholder { color: #c7c9ce !important; opacity: 1 !important; }
  .home-search-box button { width: 25px !important; height: 27px !important; flex: 0 0 25px !important; padding: 0 !important; }

  .top-actions { gap: clamp(9px, .8vw, 15px) !important; }
  .notification-button { width: clamp(27px, 1.8vw, 32px) !important; height: clamp(30px, 2.1vw, 36px) !important; flex-basis: clamp(27px, 1.8vw, 32px) !important; }
  .profile-avatar { width: clamp(29px, 2.1vw, 37px) !important; height: clamp(29px, 2.1vw, 37px) !important; flex-basis: clamp(29px, 2.1vw, 37px) !important; }
  .profile-name { font-family: "Cairo", Tahoma, Arial, sans-serif !important; font-size: clamp(11px, .78vw, 14px) !important; font-weight: 600 !important; }

  .hero {
    height: clamp(228px, 28.5vw, 480px) !important;
    min-height: clamp(228px, 28.5vw, 480px) !important;
    max-height: none !important;
    padding: clamp(48px, 5.3vw, 88px) clamp(30px, 5.4vw, 90px) clamp(18px, 1.6vw, 28px) !important;
  }
  .hero-backdrop img { object-position: center 30% !important; }
  .hero h1 {
    font-family: "Roboto Condensed", "Cairo", Arial, sans-serif !important;
    font-size: clamp(31px, 3.4vw, 58px) !important;
    font-weight: 800 !important;
    line-height: 1.02 !important;
    letter-spacing: -.035em !important;
  }
  .hero-meta { font-family: "Cairo", Tahoma, Arial, sans-serif !important; font-size: clamp(10px, .82vw, 14px) !important; }
  .hero-description { font-family: "Cairo", Tahoma, Arial, sans-serif !important; font-size: clamp(10px, .86vw, 14px) !important; line-height: 1.65 !important; }
  .hero-buttons .button { font-family: "Cairo", Tahoma, Arial, sans-serif !important; font-size: clamp(11px, .72vw, 13px) !important; font-weight: 700 !important; }
}

/* At laptop/tablet desktop widths, use the compact margins and keep search clear of the actions. */
@media (min-width: 761px) and (max-width: 1100px) {
  .topbar { padding-inline: 28px !important; }
  .main-nav { left: 130px !important; gap: 14px !important; font-size: 12px !important; }
  .home-search-box { left: 53% !important; width: clamp(240px, 30vw, 280px) !important; }
  .hero { padding-inline: clamp(30px, 5.4vw, 58px) !important; }
}

@media (max-width: 760px) {
  :root { font-family: "Cairo", Tahoma, Arial, sans-serif !important; }
  .topbar { font-family: "Cairo", Tahoma, Arial, sans-serif !important; }
  .home-search-box { height: 34px !important; min-height: 34px !important; }
  .home-search-box input { font-family: "Cairo", Tahoma, Arial, sans-serif !important; font-size: 12px !important; }
  .hero h1 { font-family: "Roboto Condensed", "Cairo", Arial, sans-serif !important; font-weight: 800 !important; }
}


/* CineNova v31 — working account, viewer-profile and Ko-fi support surfaces. */
.profile-dropdown .profile-support-link {
  display:flex; flex-direction:row; align-items:center; gap:12px; width:100%; min-height:34px;
  padding:7px 8px; border:0; border-radius:6px; color:#f0f1f2; text-align:right; direction:ltr;
  font-family:inherit; font-size:11px; font-weight:600; white-space:nowrap;
}
.profile-dropdown .profile-support-link:hover { background:#ffffff0c; color:#ffd400; }
.profile-dropdown .profile-support-link svg { display:block; width:19px; height:19px; flex:0 0 19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.profile-dropdown .profile-support-link span { direction:rtl; flex:1; }
.auth-dialog { width:min(470px, calc(100% - 24px)); padding:30px; border-color:#383b43; background:linear-gradient(155deg,#15191f,#0a0c10 72%); }
.auth-brand { display:flex; align-items:center; justify-content:flex-start; gap:12px; margin-bottom:19px; }
.auth-brand strong { position:relative; display:flex; flex-direction:column; align-items:center; font-family:"Cairo",Tahoma,sans-serif; font-size:26px; line-height:1; font-weight:900; }
.auth-brand small { margin-top:2px; font-size:10px; letter-spacing:2px; direction:ltr; }
.auth-brand small span { color:#ffd400; }
.auth-brand .brand-clapper { position:relative; inset:auto; width:60px; height:10px; transform:rotate(-12deg); display:flex; gap:4px; }
.auth-brand .brand-clapper i { display:block; flex:1; background:#ffd400; transform:skew(-25deg); }
.auth-dialog h2,.account-dialog h2 { margin:0 0 8px; font-family:"Cairo",Tahoma,sans-serif; font-weight:900; font-size:25px; color:#fff; }
.auth-lead,.account-subtitle { color:#aeb5c1; font-size:12px; line-height:1.9; margin:0 0 17px; }
.auth-mode-tabs,.account-tabs { display:flex; flex-wrap:wrap; gap:6px; padding:5px; margin:16px 0; border:1px solid #ffffff15; border-radius:10px; background:#080a0e; }
.auth-mode-tabs button,.account-tabs button { flex:1; min-width:max-content; border:0; border-radius:7px; background:transparent; color:#aeb5c1; padding:9px 11px; font:700 11px "Cairo",Tahoma,sans-serif; }
.auth-mode-tabs button.active,.account-tabs button.active { background:#ffd400; color:#12130d; }
.auth-form,.account-form { display:grid; gap:12px; }
.auth-form>label,.account-form>label { display:grid; gap:6px; color:#e5e8ed; font:600 11px "Cairo",Tahoma,sans-serif; }
.auth-form input:not([type=checkbox]),.account-form input:not([type=checkbox]),.account-form select { width:100%; min-height:39px; border:1px solid #ffffff1e; border-radius:8px; padding:9px 11px; outline:none; background:#090c11; color:#f7f7f8; font:500 12px "Cairo",Tahoma,sans-serif; }
.auth-form input:focus,.account-form input:focus,.account-form select:focus { border-color:#ffd400aa; box-shadow:0 0 0 3px #ffd40012; }
.auth-check { display:flex!important; grid-template-columns:18px 1fr; align-items:start; gap:9px!important; color:#b7bdc8!important; font-size:10px!important; line-height:1.8; }
.auth-check input { accent-color:#ffd400; width:16px; height:16px; margin-top:3px; flex:0 0 16px; }
.auth-submit { width:100%; margin-top:3px; min-height:40px; }
.form-message { min-height:0; margin:8px 0 0; color:#ff9b9b; font-size:11px; line-height:1.7; }
.form-message:empty { display:none; }
.form-message.success { color:#b8f18d; }
.auth-support { display:block; margin-top:17px; padding-top:13px; border-top:1px solid #ffffff13; color:#ffd400; font-size:11px; text-align:center; }
.account-dialog { width:min(830px, calc(100% - 24px)); padding:28px; border-color:#30343c; background:linear-gradient(150deg,#141820,#080a0e 76%); }
.account-modal-head { padding-inline-end:34px; }
.account-modal-head .eyebrow { margin-bottom:7px; }
.account-content { display:grid; gap:14px; }
.account-tabs { position:sticky; top:-28px; z-index:2; margin:0 0 3px; background:#080a0ef5; backdrop-filter:blur(10px); }
.account-tabs button { padding:8px 10px; }
.account-section { border:1px solid #ffffff13; border-radius:13px; background:#ffffff04; padding:17px; }
.account-section h3 { font-family:"Cairo",Tahoma,sans-serif; font-size:15px; margin:0 0 8px; color:#fff; }
.account-section h4 { margin:7px 0 0; font-size:13px; }
.account-muted { color:#969eac; font-size:11px; line-height:1.9; margin:0 0 13px; }
.account-form { margin-top:10px; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:end; }
.account-form>label,.account-form>.auth-check,.account-form>.button,.account-form>.form-message { min-width:0; }
.account-form>.auth-check,.account-form>.button,.account-form>.form-message,.account-form h4 { grid-column:1 / -1; }
.account-form .button { justify-self:start; min-height:36px; }
.account-danger { border-color:#f044442d; background:#f0444406; }
.account-danger h3 { color:#ffaaaa; }
.button-danger { background:#2a1014; border:1px solid #8d2a36; color:#ffb4b9; }
.button-danger:hover { background:#401319; }
.account-section .setting-row { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:13px 0; border-bottom:1px solid #ffffff10; }
.account-section .setting-row:last-of-type { border-bottom:0; }
.setting-row span { display:grid; gap:3px; }
.setting-row strong { color:#f2f4f7; font-size:12px; }
.setting-row small { color:#999fad; font-size:10px; line-height:1.6; }
.setting-row input { width:18px; height:18px; accent-color:#ffd400; flex:0 0 18px; }
.profile-rows,.saved-list-rows,.history-rows,.notification-rows { display:grid; gap:10px; }
.profile-edit-row { display:grid; grid-template-columns:50px minmax(0,1fr); gap:12px; padding:13px; border:1px solid #ffffff12; border-radius:10px; background:#05070b55; }
.profile-edit-avatar { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:#242a34; border:2px solid #ffd4007d; font-size:25px; overflow:hidden; }
.profile-edit-avatar img { width:100%; height:100%; object-fit:cover; }
.profile-edit-fields { display:grid; gap:10px; min-width:0; }
.profile-edit-fields>label { display:grid; gap:5px; color:#bdc4cf; font-size:10px; }
.profile-edit-fields input,.profile-edit-fields select { min-width:0; background:#0c0f14; color:#fff; border:1px solid #ffffff18; border-radius:7px; padding:8px; }
.profile-edit-actions { display:flex; flex-wrap:wrap; gap:7px; }
.profile-edit-actions .button { padding:7px 10px; font-size:10px; }
.profile-edit-actions button:disabled { opacity:.65; cursor:default; }
.create-profile-form { border-top:1px solid #ffffff14; padding-top:16px; }
.saved-list-row,.history-row,.notification-row { display:flex; align-items:center; gap:12px; border:1px solid #ffffff12; border-radius:10px; padding:10px; background:#05070b55; }
.saved-list-poster { width:40px; height:56px; flex:0 0 40px; display:grid; place-items:center; background:#20242c; border-radius:5px; overflow:hidden; }
.saved-list-poster img { width:100%; height:100%; object-fit:cover; }
.saved-list-copy,.history-row>div { display:grid; gap:5px; min-width:0; flex:1; }
.saved-list-copy strong,.history-row strong { color:#f6f7f8; font-size:11px; }
.saved-list-copy small,.history-row small,.notification-row small { color:#969eac; font-size:9px; }
.saved-list-row>.button,.history-row>.button { padding:7px 10px; font-size:10px; }
.notification-row { display:block; }
.notification-row strong { font-size:12px; }
.notification-row p,.help-item p { margin:6px 0; color:#aeb5c1; font-size:11px; line-height:1.8; }
.help-item { padding:13px 0; border-bottom:1px solid #ffffff10; }
.help-item:last-child { border-bottom:0; }
.help-item strong { font-size:12px; }
.help-item a:not(.button) { color:#ffd400; }
.support-ticket { background:linear-gradient(130deg,#ffe66d,#c69c25); }
.reduce-motion * { animation-duration:0.001ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:0.001ms!important; }
.high-contrast { --muted:#c1c7d0; --line:rgba(255,255,255,.22); }
@media(max-width:640px) {
  .auth-dialog,.account-dialog { padding:22px 16px; }
  .auth-dialog h2,.account-dialog h2 { font-size:21px; }
  .account-tabs { flex-wrap:nowrap; overflow-x:auto; }
  .account-tabs button { flex:0 0 auto; }
  .account-form { grid-template-columns:1fr; }
  .account-form>* { grid-column:1!important; }
  .profile-edit-row { grid-template-columns:38px minmax(0,1fr); gap:9px; padding:9px; }
  .profile-edit-avatar { width:36px; height:36px; font-size:20px; }
  .profile-edit-actions .button { flex:1 1 auto; }
  .saved-list-row,.history-row { align-items:flex-start; }
  .saved-list-row>.button,.history-row>.button { align-self:center; }
  .profile-dropdown .profile-support-link { min-height:34px; font-size:11px; gap:12px; padding:7px 8px; }
}

/* CineNova v32 — account dashboard, profile cards, watch-history rows and visible Ko-fi support. */
@media (min-width: 1050px) {
  .main-nav .top-support-cta {
    display:inline-flex; align-items:center; gap:8px; margin-inline-start:clamp(6px,1vw,16px);
    padding:5px 10px; min-height:35px; border-radius:9px; color:#1a1604;
    background:linear-gradient(125deg,#ffe783 0%,#ffd400 56%,#eab400 100%);
    box-shadow:0 4px 18px #ffd4001e,inset 0 1px #fff8; direction:rtl;
    border:1px solid #ffe476a8; white-space:nowrap; transition:transform .18s,box-shadow .18s;
  }
  .main-nav .top-support-cta:hover { color:#080907; transform:translateY(-1px); box-shadow:0 7px 22px #ffd40039,inset 0 1px #fff9; }
  .top-support-icon { display:grid; place-items:center; width:24px; height:24px; border-radius:7px; background:#13130e12; color:#171507; font-size:15px; }
  .top-support-copy { display:grid; gap:1px; line-height:1.05; text-align:right; }
  .top-support-copy strong { font-size:10px; font-weight:900; }
  .top-support-copy small { color:#554800; font-size:8px; font-weight:700; }
  .top-support-arrow { font-size:12px; font-weight:900; }
}
@media (max-width: 1049px) {
  .main-nav .top-support-cta { display:none !important; }
}
.profile-avatar {
  position:relative !important; overflow:hidden !important; isolation:isolate;
  display:grid !important; place-items:center !important; padding:0 !important;
  background:radial-gradient(circle at 34% 22%,#596371 0,#272f3a 42%,#0c1017 78%) !important;
  border:2px solid transparent !important;
  background-image:linear-gradient(#11151b,#11151b),linear-gradient(135deg,#ffe889,#ffd400 46%,#6b5610) !important;
  background-origin:border-box !important; background-clip:padding-box,border-box !important;
  box-shadow:0 0 0 2px #0007,0 2px 10px #ffd40020 !important;
  color:#ffe58c !important; font-size:15px !important; font-weight:800 !important;
}
.profile-avatar img { display:block; width:100%; height:100%; object-fit:cover; border-radius:50%; }
.profile-avatar-fallback { position:absolute; inset:0; display:grid; place-items:center; background:#171b23; font-size:14px; }
.profile-avatar-fallback[hidden] { display:none !important; }
.auth-dialog { overflow:visible; }
.auth-dialog .auth-support {
  position:relative; display:grid; grid-template-columns:64px minmax(0,1fr); gap:14px; align-items:center;
  margin-top:22px; padding:16px; border:1px solid #ffd40052; border-radius:15px; text-align:right;
  color:#fff; background:radial-gradient(ellipse at 0 100%,#ffd40017,transparent 55%),linear-gradient(135deg,#202014,#101216 72%);
  box-shadow:0 10px 28px #0005; overflow:hidden; text-decoration:none;
}
.auth-dialog .auth-support::before { content:""; position:absolute; left:-35px; top:-52px; width:110px; height:110px; border-radius:50%; border:1px solid #ffd40035; box-shadow:0 0 0 10px #ffd4000a,0 0 0 24px #ffd40008; pointer-events:none; }
.auth-support-art { position:relative; z-index:1; display:grid; place-items:center; width:60px; height:60px; border-radius:16px; background:linear-gradient(140deg,#ffe985,#ffd400 65%,#bd9200); color:#161406; box-shadow:0 7px 18px #ffd40027; }
.auth-support-art>span { font-size:28px; transform:translateY(-1px); }
.auth-support-art>i { position:absolute; right:5px; top:4px; font-size:14px; font-style:normal; }
.auth-support-copy { position:relative; z-index:1; display:grid; gap:5px; }
.auth-support-copy>strong { font-family:"Cairo",Tahoma,sans-serif; color:#fff3bf; font-size:13px; font-weight:900; }
.auth-support-copy>small { color:#c3c6cc; font-size:10px; line-height:1.8; font-weight:500; }
.auth-support-copy>b { display:inline-flex; align-items:center; justify-content:center; gap:7px; justify-self:start; margin-top:5px; padding:8px 12px; border-radius:8px; background:#ffd400; color:#171405; font-size:10px; font-weight:900; transition:transform .18s,background .18s; }
.auth-dialog .auth-support:hover { border-color:#ffe26f; box-shadow:0 12px 32px #ffd40015; }
.auth-dialog .auth-support:hover .auth-support-copy>b { transform:translateY(-1px); background:#ffe15c; }

/* Keep the site's top header visible while account management occupies the page below it. */
.account-dialog {
  position:fixed !important; inset:58px 0 0 0 !important; margin:0 !important;
  width:100vw !important; max-width:none !important; height:auto !important; max-height:none !important;
  min-height:0 !important; padding:0 !important; overflow:hidden !important;
  border:0 !important; border-radius:0 !important; background:#080b10 !important;
  box-shadow:none !important;
}
.account-dialog::backdrop { background:transparent !important; }
.account-dialog .dialog-close {
  position:absolute; top:12px; right:15px; z-index:30; float:none; width:29px; height:29px;
  border-radius:8px; border:1px solid #ffffff16; background:#171b22; color:#d7dbe2;
  font-size:21px; box-shadow:0 2px 10px #0004;
}
.account-dialog .dialog-close:hover { color:#ffd400; border-color:#ffd40055; }
.account-content { display:block !important; height:100%; min-height:0; padding:0 !important; overflow:hidden; }
.account-shell { display:grid; grid-template-columns:172px minmax(0,1fr); direction:ltr; height:100%; min-height:0; background:#080b10; }
.account-sidebar {
  direction:rtl; display:flex; flex-direction:column; min-width:0; min-height:0; padding:14px 0 13px;
  background:linear-gradient(180deg,#0b0e13,#080a0e); border-right:1px solid #252a31;
}
.account-sidebar-heading { padding:0 18px 14px; border-bottom:1px solid #ffffff0d; margin-bottom:8px; }
.account-sidebar-heading p { margin:0 0 3px; color:#f6f7f8; font:900 14px "Cairo",Tahoma,sans-serif; }
.account-sidebar-heading small { display:block; color:#727b89; font-size:9px; line-height:1.65; }
.account-sidebar-nav { display:grid; gap:2px; padding:0; }
.account-side-link { position:relative; display:flex; align-items:center; gap:10px; width:100%; min-height:36px; padding:8px 17px; border:0; border-radius:0; color:#aeb5bf; background:transparent; text-align:right; direction:rtl; font:700 11px "Cairo",Tahoma,sans-serif; cursor:pointer; }
.account-side-link:hover { color:#fff; background:#ffffff07; }
.account-side-link.active { color:#ffd400; background:linear-gradient(90deg,#ffd40008,#ffd40012); }
.account-side-link.active::before { content:""; position:absolute; right:0; top:0; bottom:0; width:3px; background:#ffd400; box-shadow:0 0 12px #ffd40038; }
.account-side-icon { flex:0 0 19px; width:19px; color:inherit; text-align:center; font:700 17px/1 Arial,sans-serif; }
.account-side-link.danger-link { margin-top:7px; color:#f08b8b; }
.account-sidebar-support { display:flex; align-items:center; gap:9px; margin:auto 10px 0; padding:10px 9px; border:1px solid #ffd4003c; border-radius:10px; color:#fff2b4; background:radial-gradient(ellipse at 0 100%,#ffd40018,transparent 60%),#12130e; text-decoration:none; }
.account-sidebar-support>span:first-child { display:grid; place-items:center; width:29px; height:29px; border-radius:8px; background:#ffd400; color:#151305; font-size:17px; }
.account-sidebar-support>span:nth-child(2) { display:grid; gap:2px; flex:1; min-width:0; }
.account-sidebar-support strong { font:900 10px "Cairo",Tahoma,sans-serif; white-space:nowrap; }
.account-sidebar-support small { color:#bbb18a; font-size:8px; white-space:nowrap; }
.account-sidebar-support>b { color:#ffd400; font-size:12px; }
.account-main { direction:rtl; display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; background:radial-gradient(ellipse at 90% 0,#161a2210,transparent 45%),#080b10; }
.account-page-head { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:17px 58px 14px 25px; min-height:72px; border-bottom:1px solid #ffffff10; background:linear-gradient(180deg,#0c0f14,#090c11); }
.account-page-head>div { min-width:0; }
.account-page-eyebrow { margin:0 0 2px; color:#ffd400; font-size:8px; font-weight:800; letter-spacing:.04em; }
.account-page-head h2 { margin:0 !important; font:900 19px/1.35 "Cairo",Tahoma,sans-serif !important; color:#f9fafb !important; }
.account-subtitle { margin:3px 0 0 !important; font-size:9px !important; color:#7e8795 !important; }
.account-head-brand { display:flex; flex-direction:column; align-items:center; color:#fff; font:900 16px/1 "Cairo",Tahoma,sans-serif; white-space:nowrap; }
.account-head-brand b { margin-top:3px; color:#d6d9df; font:900 7px/1 Arial,sans-serif; letter-spacing:2px; direction:ltr; }
.account-head-brand b span { color:#ffd400; }
.account-view-body { overflow:auto; min-height:0; flex:1 1 auto; padding:22px 24px 36px; scrollbar-width:thin; scrollbar-color:#303641 transparent; }
.account-view-body::-webkit-scrollbar { width:7px; }
.account-view-body::-webkit-scrollbar-thumb { background:#303641; border-radius:10px; }
.account-section { border-color:#ffffff0d !important; border-radius:8px !important; background:#0e1117 !important; padding:19px !important; }
.account-section-flat { border:0 !important; border-radius:0 !important; background:transparent !important; padding:0 !important; }
.account-section h3 { font:900 16px "Cairo",Tahoma,sans-serif !important; margin:0 0 3px !important; }
.account-muted { color:#929ba9 !important; font-size:10px !important; line-height:1.8 !important; margin:0 0 13px !important; }
.account-section-heading,.history-page-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:15px; }
.account-section-heading>div,.history-page-heading>div { min-width:0; }
.profile-count { flex:0 0 auto; font:800 10px "Cairo",Tahoma,sans-serif; color:#f6dc57; padding:5px 9px; border:1px solid #ffd40032; border-radius:999px; background:#ffd40008; }
.profiles-section { max-width:100%; }
.profile-rows { display:block !important; }
.viewer-profile-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); align-items:start; gap:11px 8px; max-width:800px; }
.viewer-profile-card { position:relative; min-width:0; display:flex; flex-direction:column; align-items:center; gap:0; padding:0 3px 9px; border:1px solid transparent; border-radius:12px; background:transparent; color:#f4f5f7; transition:background .18s,border-color .18s,transform .18s; }
.viewer-profile-card:hover { background:#ffffff04; border-color:#ffffff0b; transform:translateY(-1px); }
.viewer-profile-card.is-active .viewer-profile-avatar { border-color:#ffd400; box-shadow:0 0 0 3px #ffd40015,0 6px 20px #0008; }
.viewer-profile-select { display:flex; flex-direction:column; align-items:center; width:100%; border:0; background:transparent; color:inherit; cursor:pointer; padding:0; }
.viewer-profile-select:disabled { cursor:default; }
.viewer-profile-avatar { position:relative; display:grid; place-items:center; width:82px; height:82px; margin-bottom:7px; border:2px solid #6a778a; border-radius:50%; overflow:hidden; background:linear-gradient(145deg,#232a35,#11151b); box-shadow:0 3px 12px #0008; }
.viewer-profile-avatar img { display:block; width:100%; height:100%; object-fit:cover; }
.profile-card-emoji { font-size:32px; line-height:1; }
.viewer-profile-select strong,.viewer-profile-card>strong { max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font:800 11px "Cairo",Tahoma,sans-serif; }
.viewer-profile-select small,.viewer-profile-card>small { max-width:100%; margin-top:2px; color:#7e8795; font-size:8px; white-space:nowrap; }
.viewer-active-dot { position:absolute; bottom:2px; right:2px; display:grid; place-items:center; width:18px; height:18px; border:2px solid #11151c; border-radius:50%; background:#ffd400; color:#111; font:900 10px Arial,sans-serif; }
.viewer-profile-edit { position:relative; display:grid; place-items:center; width:25px; height:25px; margin-top:6px; border:1px solid #ffffff0b; border-radius:50%; background:#191e26; color:#aeb6c2; cursor:pointer; }
.viewer-profile-edit:hover { color:#ffd400; border-color:#ffd40044; background:#24251a; }
.viewer-profile-edit svg { display:block; width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.add-viewer-profile { min-height:115px; cursor:pointer; justify-content:center; border:1px dashed #474c55; background:#ffffff02; }
.add-viewer-profile:hover { border-color:#ffd4007a; background:#ffd40007; }
.add-profile-circle { display:grid; place-items:center; width:70px; height:70px; margin-bottom:9px; border:1px solid #444a55; border-radius:50%; background:radial-gradient(circle at 30% 20%,#313742,#151920 70%); color:#cbd0d8; font-size:39px; font-weight:300; line-height:1; }
.add-viewer-profile:hover .add-profile-circle { border-color:#ffd4007a; color:#ffd400; }
.viewer-profile-editor { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:end; gap:12px; margin:20px 0 0; padding:17px; border:1px solid #ffffff12; border-radius:10px; background:#0d1016; }
.viewer-profile-editor.hidden { display:none !important; }
.viewer-profile-editor>label { display:grid; gap:5px; color:#bdc4cf; font:600 10px "Cairo",Tahoma,sans-serif; }
.viewer-profile-editor input,.viewer-profile-editor select { width:100%; min-width:0; min-height:37px; background:#080b10; color:#fff; border:1px solid #ffffff19; border-radius:7px; padding:8px 10px; font:500 11px "Cairo",Tahoma,sans-serif; }
.viewer-editor-title,.viewer-editor-actions,.viewer-profile-editor>.form-message { grid-column:1/-1; }
.viewer-editor-title { display:flex; align-items:center; justify-content:space-between; }
.viewer-editor-title h4 { margin:0; color:#fff; font:900 13px "Cairo",Tahoma,sans-serif; }
.mini-close { width:26px; height:26px; border:1px solid #ffffff17; border-radius:7px; background:#181c23; color:#c2c7d0; font-size:18px; }
.viewer-editor-actions { display:flex; gap:8px; flex-wrap:wrap; }
.viewer-editor-actions .button { min-height:34px; padding:8px 13px; font-size:10px; }
.account-form { margin-top:14px; }
.account-form .button { font-size:10px; }
.account-danger { border:1px solid #db41412c !important; border-radius:10px !important; background:#a81c1c08 !important; padding:18px !important; }
.history-section { max-width:100%; }
.history-page-heading { margin-bottom:12px; }
.history-page-heading h3 { font-size:16px !important; }
.history-page-heading .account-muted { margin-top:3px !important; margin-bottom:0 !important; }
.history-clear { border:1px solid #ffffff14; border-radius:7px; padding:7px 10px; background:#141820; color:#aab1bd; font:700 9px "Cairo",Tahoma,sans-serif; white-space:nowrap; }
.history-clear:hover { color:#ffd400; border-color:#ffd40050; }
.history-toolbar { display:flex; align-items:center; justify-content:flex-start; margin:0 0 12px; }
.history-filter-tabs { display:flex; gap:7px; align-items:center; }
.history-filter-tabs button { min-width:58px; padding:6px 13px; border:1px solid #ffffff10; border-radius:7px; background:#13171e; color:#aeb5bf; font:800 10px "Cairo",Tahoma,sans-serif; }
.history-filter-tabs button.active { border-color:#ffd400; background:#ffd400; color:#171507; box-shadow:0 4px 12px #ffd40012; }
.history-rows { display:grid !important; gap:6px !important; }
.history-item { direction:ltr; display:grid; grid-template-columns:56px minmax(110px,1.45fr) 55px minmax(76px,.75fr) 118px 28px; align-items:center; gap:11px; min-width:0; padding:7px 9px; border:1px solid #ffffff07; border-radius:8px; background:linear-gradient(100deg,#0d1015,#101319 70%,#0e1116); transition:background .16s,border-color .16s; }
.history-item:hover { border-color:#ffd40020; background:#12161d; }
.history-thumb { display:grid; place-items:center; width:56px; height:38px; border-radius:5px; overflow:hidden; background:#202630; color:#ffd400; font-size:18px; }
.history-thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.history-title-col { display:grid; gap:3px; min-width:0; text-align:left; }
.history-title-col strong { display:block; min-width:0; color:#f2f4f7; font:700 10px/1.3 "Cairo",Tahoma,sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.history-title-col small { overflow:hidden; color:#7e8795; font:500 8px/1.4 "Cairo",Tahoma,sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.history-type { justify-self:center; color:#7f8998; font:600 8px "Cairo",Tahoma,sans-serif; }
.history-progress { display:grid; grid-template-columns:minmax(30px,1fr) 28px; align-items:center; gap:7px; min-width:0; }
.history-progress-track { height:4px; overflow:hidden; border-radius:99px; background:#333943; box-shadow:inset 0 1px 2px #0008; }
.history-progress-track span { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#b89c00,#ffd400); box-shadow:0 0 7px #ffd40029; }
.history-progress small { color:#9da5b2; font:600 8px Arial,sans-serif; text-align:right; }
.history-item time { color:#7f8793; font:500 8px Arial,sans-serif; white-space:nowrap; text-align:right; }
.history-more { justify-self:end; display:grid; place-items:center; width:25px; height:25px; padding:0 0 8px; border:0; border-radius:6px; background:transparent; color:#9099a7; font:900 17px/1 Arial,sans-serif; letter-spacing:1px; cursor:pointer; }
.history-more:hover { color:#ffd400; background:#ffffff09; }
.history-empty { display:grid; justify-items:center; padding:45px 15px; text-align:center; border:1px dashed #ffffff12; border-radius:9px; color:#9da5b2; }
.history-empty>span { color:#ffd400; font-size:25px; }
.history-empty strong { margin-top:8px; color:#e7e9ed; font:800 12px "Cairo",Tahoma,sans-serif; }
.history-empty p { margin:4px 0 0; font-size:10px; }
.device-rows { display:grid; gap:8px; }
.device-session-row { display:flex; align-items:center; gap:11px; padding:13px; border:1px solid #ffffff12; border-radius:9px; background:#0e1117; }
.device-session-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:9px; background:#1c2027; color:#ffd400; font-size:20px; }
.device-session-row>div { display:grid; gap:3px; flex:1; min-width:0; }
.device-session-row strong { color:#eceef2; font:800 11px "Cairo",Tahoma,sans-serif; }
.device-session-row small { color:#8992a0; font-size:9px; }
.device-current-badge { padding:5px 8px; border-radius:999px; background:#b6ff5710; color:#b6e777; font:800 8px "Cairo",Tahoma,sans-serif; }
.device-session-muted { color:#858e9c; font-size:9px; }
.support-help-card { display:grid; justify-items:start; gap:6px; max-width:440px; margin-top:18px; padding:18px; border:1px solid #ffd40036; border-radius:12px; background:radial-gradient(ellipse at 0 100%,#ffd40013,transparent 60%),#101319; }
.support-help-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:#ffd400; color:#1b1705; font-size:20px; }
.support-help-card>strong { color:#fff0a1; font:900 14px "Cairo",Tahoma,sans-serif; }
.support-help-card>p { margin:0 0 5px; max-width:360px; color:#aab1bd; font-size:10px; line-height:1.9; }
.support-help-card .button { min-height:35px; font-size:10px; }
@media (max-width: 900px) {
  .account-shell { grid-template-columns:148px minmax(0,1fr); }
  .account-sidebar-heading { padding-inline:13px; }
  .account-side-link { padding-inline:12px; font-size:10px; gap:7px; }
  .account-sidebar-support { margin-inline:6px; padding:8px 6px; gap:6px; }
  .account-sidebar-support small { display:none; }
  .account-page-head { padding-inline-end:50px; }
  .account-view-body { padding:19px 16px 30px; }
  .history-item { grid-template-columns:48px minmax(90px,1.2fr) 48px minmax(65px,.75fr) 90px 24px; gap:7px; }
  .history-thumb { width:48px; height:35px; }
}
@media (max-width: 640px) {
  .account-dialog { inset:64px 0 0 0 !important; }
  .account-shell { grid-template-columns:64px minmax(0,1fr); }
  .account-sidebar { padding-top:9px; }
  .account-sidebar-heading { padding:0 3px 10px; text-align:center; }
  .account-sidebar-heading p { font-size:0; }
  .account-sidebar-heading p::before { content:"⚙"; font-size:18px; color:#ffd400; }
  .account-sidebar-heading small { display:none; }
  .account-sidebar-nav { gap:3px; }
  .account-side-link { display:grid; justify-items:center; gap:2px; padding:8px 2px; min-height:47px; font-size:7px; line-height:1.25; text-align:center; }
  .account-side-link.active::before { width:2px; }
  .account-side-icon { font-size:16px; }
  .account-sidebar-support { display:grid; justify-items:center; gap:3px; margin: auto 3px 6px; padding:7px 1px; }
  .account-sidebar-support>span:first-child { width:27px; height:27px; }
  .account-sidebar-support>span:nth-child(2) { display:none; }
  .account-sidebar-support>b { font-size:9px; }
  .account-page-head { min-height:65px; padding:11px 43px 10px 12px; gap:8px; }
  .account-page-eyebrow { display:none; }
  .account-page-head h2 { font-size:15px !important; }
  .account-subtitle { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:8px !important; }
  .account-head-brand { display:none; }
  .account-dialog .dialog-close { top:11px; right:8px; width:26px; height:26px; }
  .account-view-body { padding:16px 10px 25px; }
  .account-section-heading,.history-page-heading { align-items:flex-start; }
  .viewer-profile-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px 4px; }
  .viewer-profile-avatar { width:62px; height:62px; }
  .add-profile-circle { width:58px; height:58px; font-size:32px; }
  .viewer-profile-editor { grid-template-columns:minmax(0,1fr); gap:10px; padding:12px; }
  .viewer-profile-editor>* { grid-column:1 !important; }
  .history-item { grid-template-columns:45px minmax(0,1fr) 25px; grid-template-areas:"poster title more" "poster progress more" "poster date more"; gap:5px 8px; padding:8px; }
  .history-thumb { grid-area:poster; width:45px; height:60px; }
  .history-title-col { grid-area:title; }
  .history-title-col strong { font-size:9px; }
  .history-title-col small { font-size:8px; }
  .history-type { display:none; }
  .history-progress { grid-area:progress; grid-template-columns:minmax(20px,1fr) 25px; }
  .history-item time { grid-area:date; text-align:left; font-size:7px; }
  .history-more { grid-area:more; align-self:center; }
  .history-filter-tabs { gap:4px; }
  .history-filter-tabs button { min-width:49px; padding:6px 9px; }
  .history-clear { padding:6px 7px; font-size:8px; }
  .auth-dialog .auth-support { grid-template-columns:51px minmax(0,1fr); gap:10px; padding:12px; }
  .auth-support-art { width:49px; height:49px; border-radius:12px; }
  .auth-support-art>span { font-size:23px; }
  .auth-support-copy>strong { font-size:11px; }
  .auth-support-copy>small { font-size:9px; }
}
.account-side-icon { display:grid; place-items:center; }
.account-side-icon svg { display:block; width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.account-side-link.active .account-side-icon svg { filter:drop-shadow(0 0 4px #ffd40025); }
@media (max-width:640px) { .account-side-icon svg { width:18px; height:18px; } }

/* Weekly shelf: highlight the featured episode in the series details dialog. */
.episode-row-weekly-highlight{background:linear-gradient(90deg,rgba(255,210,0,.10),rgba(255,210,0,.025));border:1px solid rgba(255,210,0,.48);border-radius:8px;scroll-margin:16px}
.episode-row-weekly-highlight .episode-name{color:#fff1ad}
.weekly-featured-label{display:inline-flex!important;align-items:center;margin-inline-start:9px;padding:3px 7px;border-radius:999px;background:#ffd400;color:#171300;font-size:9px;font-weight:800;white-space:nowrap}


/* CineNova v34 — centered account modal, post-login profile chooser and visual image library. */
.auth-dialog {
  max-height: calc(100dvh - 24px) !important;
  max-width: min(470px, calc(100vw - 24px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #4a4f59 transparent;
  box-sizing: border-box;
}
.auth-dialog .auth-support { margin-bottom: 2px; }
.auth-dialog .auth-support-copy { min-width: 0; }
.auth-dialog .auth-support-copy small { overflow-wrap: anywhere; }

.account-dialog {
  position: fixed !important;
  inset: 50% auto auto 50% !important;
  transform: translate(-50%, -50%);
  margin: 0 !important;
  width: min(1080px, calc(100vw - 44px)) !important;
  max-width: 1080px !important;
  height: min(690px, calc(100dvh - 58px)) !important;
  max-height: calc(100dvh - 58px) !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid #ffffff24 !important;
  border-radius: 18px !important;
  background: #080b10 !important;
  box-shadow: 0 28px 100px #000c, 0 0 0 1px #ffd4000c !important;
}
.account-dialog::backdrop {
  background: rgba(1, 3, 7, .72) !important;
  backdrop-filter: blur(8px) saturate(.8);
}
.account-shell { grid-template-columns: 184px minmax(0, 1fr) !important; }
.account-page-head { padding-inline-end: 58px; }
.account-view-body { padding: 24px 28px 32px; }
.profiles-section { width: 100%; max-width: 840px; margin-inline: auto; }
.profile-rows { width: 100%; display: flex !important; flex-direction: column; align-items: center; }
.viewer-profile-grid {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 14px 18px !important;
  width: 100%;
  max-width: 760px !important;
  margin: 4px auto 0 !important;
}
.viewer-profile-card { flex: 0 0 96px; }
.add-viewer-profile {
  width: 96px;
  min-height: 0 !important;
  height: 124px;
  margin: 0;
  padding: 8px 6px 9px !important;
  gap: 0;
  border: 1px dashed #555c68 !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.018) !important;
  justify-content: flex-start !important;
}
.add-profile-circle {
  width: 62px !important;
  height: 62px !important;
  min-height: 62px;
  margin: 0 0 7px !important;
  border-color: #4a505b !important;
  font-size: 35px !important;
}
.add-viewer-profile strong { font-size: 10px !important; }
.add-viewer-profile small { font-size: 8px !important; }

/* Image-first avatar selection: a visual gallery instead of a dropdown of title names. */
.avatar-picker-field { grid-column: 1 / -1; display: grid; gap: 7px; min-width: 0; }
.avatar-picker-label { color: #bdc4cf; font: 700 10px "Cairo",Tahoma,sans-serif; }
.avatar-image-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 7px;
  max-height: 218px;
  overflow: auto;
  padding: 7px;
  border: 1px solid #ffffff12;
  border-radius: 10px;
  background: #080b10;
  scrollbar-width: thin;
  scrollbar-color: #333a45 transparent;
}
.avatar-image-option {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 7px;
  background: #191e27;
  color: #d9dde5;
  cursor: pointer;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.avatar-image-option img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar-image-option:hover { transform: translateY(-2px); border-color: #ffd4006b; }
.avatar-image-option.is-selected { border-color: #ffd400; box-shadow: 0 0 0 2px #ffd40023, 0 5px 14px #0007; }
.avatar-image-none { aspect-ratio: 1 / 1; }
.avatar-image-none span { font-size: 22px; }
.avatar-picker-empty { grid-column: 1 / -1; color: #8c95a3; font-size: 10px; padding: 8px; }
.avatar-picker-hint { color: #858f9d; font-size: 9px; line-height: 1.7; }

/* Frosted-glass profile chooser shown immediately after a successful login or registration. */
.profile-picker-dialog {
  position: fixed !important;
  inset: 50% auto auto 50% !important;
  transform: translate(-50%, -50%);
  margin: 0 !important;
  width: min(880px, calc(100vw - 34px)) !important;
  max-width: 880px !important;
  max-height: calc(100dvh - 36px) !important;
  padding: 0 !important;
  overflow: hidden auto !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  border-radius: 22px !important;
  color: #f7f8fb;
  background: rgba(9,12,18,.8) !important;
  box-shadow: 0 30px 100px #000d, inset 0 1px #ffffff12 !important;
  backdrop-filter: blur(20px) saturate(1.2);
}
.profile-picker-dialog::backdrop {
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(13px) saturate(.78);
}
.profile-picker-backdrop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 20% 15%,#ffd40019,transparent 38%),linear-gradient(130deg,#151923,#07090e 75%); }
.profile-picker-backdrop img { position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: cover; opacity: 0; filter: blur(4px) saturate(.65); transform: scale(1.03); transition: opacity .25s; }
.profile-picker-backdrop img.is-ready { opacity: .34; }
.profile-picker-shade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(4,6,10,.6),rgba(5,7,11,.8)),linear-gradient(0deg,#080a10e8,transparent 78%); }
.profile-picker-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; min-height: 400px; padding: 25px clamp(18px,4vw,42px) 23px; }
.profile-picker-brand { display: flex; align-items: center; gap: 9px; align-self: flex-start; direction: ltr; }
.profile-picker-brand .brand-clapper { position: relative; inset: auto; width: 35px; height: 7px; transform: rotate(-12deg); display: flex; gap: 3px; }
.profile-picker-brand .brand-clapper i { flex: 1; background: #ffd400; transform: skew(-25deg); }
.profile-picker-brand-name { display: flex; flex-direction: column; align-items: center; font: 900 20px/1 "Cairo",Tahoma,sans-serif; }
.profile-picker-brand-name small { margin-top: 3px; font: 900 7px/1 Arial,sans-serif; letter-spacing: 2px; direction: ltr; }
.profile-picker-brand-name small span { color: #ffd400; }
.profile-picker-eyebrow { margin: 11px 0 4px; color: #ffd400; font: 800 10px "Cairo",Tahoma,sans-serif; letter-spacing: .06em; }
.profile-picker-content h2 { margin: 0; color: #fff; text-align: center; font: 900 clamp(24px,3vw,34px)/1.3 "Cairo",Tahoma,sans-serif; }
.profile-picker-lead { margin: 7px 0 24px; color: #c2c8d2; text-align: center; font: 500 11px/1.8 "Cairo",Tahoma,sans-serif; }
.profile-picker-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 17px clamp(10px,2.2vw,23px); width: 100%; max-width: 760px; margin: 0 auto; }
.profile-picker-card { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 112px; min-width: 0; padding: 7px 5px 10px; border: 1px solid transparent; border-radius: 14px; background: transparent; color: #fff; cursor: pointer; transition: transform .2s,background .2s,border-color .2s; }
.profile-picker-card:hover,.profile-picker-card:focus-visible { transform: translateY(-4px); background: rgba(255,255,255,.065); border-color: rgba(255,255,255,.16); outline: none; }
.profile-picker-avatar { position: relative; display: grid; place-items: center; width: 86px; height: 86px; overflow: hidden; border: 2px solid rgba(231,238,249,.88); border-radius: 50%; background: linear-gradient(145deg,#303746,#11151c); box-shadow: 0 6px 20px #0008; transition:border-color .2s,box-shadow .2s; }
.profile-picker-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.profile-picker-emoji { font-size: 34px; }
.profile-picker-current-dot { position: absolute; right: -1px; bottom: 1px; display: grid; place-items: center; width: 21px; height: 21px; border: 2px solid #11161d; border-radius: 50%; background: #ffd400; color: #111; font: 900 11px Arial,sans-serif; }
.profile-picker-card.is-current .profile-picker-avatar { border-color: #ffd400; box-shadow: 0 0 0 3px #ffd40023,0 7px 25px #0009; }
.profile-picker-card strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 12px "Cairo",Tahoma,sans-serif; }
.profile-picker-card small { max-width: 100%; color: #b3bcc9; font: 500 9px "Cairo",Tahoma,sans-serif; }
.profile-picker-card.is-loading { opacity: .65; pointer-events: none; }
.profile-picker-add-avatar { border-color: rgba(255,255,255,.35); border-style: dashed; color: #e0e4ec; font: 300 48px/1 "Cairo",Tahoma,sans-serif; }
.profile-picker-add:hover .profile-picker-add-avatar { border-color: #ffd400; color: #ffd400; }
.profile-picker-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; width: 100%; max-width: 760px; margin: auto auto 0; padding-top: 22px; border-top: 1px solid #ffffff13; color: #8792a2; font: 500 9px "Cairo",Tahoma,sans-serif; }
.profile-picker-manage { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid #ffd40055; border-radius: 8px; background: #ffd40010; color: #ffe77c; font: 800 10px "Cairo",Tahoma,sans-serif; cursor: pointer; }
.profile-picker-manage:hover { background: #ffd40020; border-color: #ffd400; }
@media (max-width: 760px) {
  .account-dialog { inset: 50% auto auto 50% !important; width: calc(100vw - 16px) !important; height: calc(100dvh - 40px) !important; max-height: calc(100dvh - 40px) !important; transform: translate(-50%,-50%); }
  .account-shell { grid-template-columns: 64px minmax(0,1fr) !important; }
  .account-page-head { padding: 12px 43px 10px 12px; }
  .account-view-body { padding: 16px 10px 24px; }
  .profiles-section { max-width: 100%; }
  .viewer-profile-grid { gap: 9px 10px !important; }
  .add-viewer-profile { width: 86px; height: 112px; padding: 7px 5px 8px !important; }
  .add-profile-circle { width: 54px !important; height: 54px !important; min-height: 54px; font-size: 30px !important; margin-bottom: 6px !important; }
  .avatar-image-picker { grid-template-columns: repeat(auto-fill,minmax(45px,1fr)); max-height: 180px; gap: 5px; }
  .profile-picker-content { min-height: 0; padding: 20px 13px 15px; }
  .profile-picker-lead { margin-bottom: 15px; }
  .profile-picker-grid { gap: 10px 5px; }
  .profile-picker-card { width: 88px; padding: 5px 3px 8px; gap: 5px; }
  .profile-picker-avatar { width: 66px; height: 66px; }
  .profile-picker-emoji { font-size: 27px; }
  .profile-picker-card strong { font-size: 10px; }
  .profile-picker-card small { font-size: 8px; }
  .profile-picker-footer { padding-top: 13px; }
}