:root {
  color-scheme: dark;
  --font-ar: "Cairo", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  --font-latin: "DM Sans", Arial, "Helvetica Neue", sans-serif;
  --ink: #090909;
  --surface: #111112;
  --surface-2: #171719;
  --line: rgba(255,255,255,.11);
  --muted: #8790a1;
  --cream: #afcfc3;
  --cream-strong: #d0e9df;
  --blue: #8facd3;
  --white: #fbfaf8;
  --tea: #afcfc3;
  --shadow: 0 24px 60px rgba(0,0,0,.32);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
::selection { background:rgba(175,207,195,.35); }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--white); font-family: var(--font-ar); min-width: 320px; overflow-x: hidden; }
button, a { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.wrap { width: min(1700px, calc(100% - 10.8vw)); margin-inline: auto; }
.grain { position: fixed; inset: 0; pointer-events: none; opacity: .065; z-index: 40; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }

.topbar { height: 95px; display: flex; align-items: center; justify-content: flex-start; padding-inline: 5.4vw; border-bottom: 1px solid var(--line); position: relative; z-index: 30; background: rgba(9,9,9,.93); backdrop-filter: blur(16px); }
.brand { order: 0; display: flex; align-items: center; gap: 9px; direction:ltr; font-family: var(--font-latin); font-weight: 700; letter-spacing: -.03em; font-size: 22px; color: var(--tea); }
.brand-mark { display: inline-flex; width: 34px; height: 34px; position: relative; align-items: center; justify-content: center; flex:none; }
.brand-mark:before { content: ""; width: 19px; height: 12px; position: absolute; left:5px; bottom:6px; background:var(--tea); border-radius:2px 2px 7px 7px; box-shadow:inset 0 2px 0 rgba(255,255,255,.25); }
.brand-mark:after { content:""; position:absolute; right:2px; bottom:9px; width:9px; height:9px; border:2px solid var(--tea); border-left:0; border-radius:0 8px 8px 0; }
.brand-mark i { width:2px; height:9px; position:absolute; top:3px; background:var(--tea); border-radius:3px; opacity:.85; }
.brand-mark i:nth-child(1) { left:9px; transform:rotate(-17deg); }.brand-mark i:nth-child(2) { left:16px; top:1px; }.brand-mark i:nth-child(3) { left:23px; transform:rotate(17deg); }
.main-nav { order:1; display: flex; gap: 8px; align-items: center; margin-right: 35px; }
.nav-link { color: #9aa5b7; border: 0; background: transparent; padding: 15px 20px; font-weight: 700; transition: .25s; font-size: 15px; }
.nav-link:hover, .nav-link.active { background: #19191b; color: white; border-radius: 13px; }
.menu-toggle { display: flex; gap: 10px; align-items: center; }.chevron { font-size: 20px; line-height: .5; transform: translateY(-2px); }
.work-menu { position: relative; }.menu-panel { direction: rtl; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); position: absolute; top: calc(100% + 9px); right: 0; width: 215px; padding: 9px; border: 1px solid var(--line); border-radius: 15px; background: rgba(14,14,15,.98); box-shadow: var(--shadow); transition: .2s; }
.work-menu.open .menu-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }.work-menu.open .chevron { transform: rotate(180deg); }
.menu-panel button,.menu-panel a { color: #9ba7b9; display: flex; justify-content: space-between; align-items: center; background: none; border: 0; border-radius: 9px; width: 100%; padding: 11px 13px; font-weight: 700; text-align: right; }.menu-panel button:hover,.menu-panel a:hover { color: white; background: #1b1b1d; }
.dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; }.green { background:#72ce98; box-shadow: 0 0 12px #72ce98; }.gold { background:var(--cream); box-shadow: 0 0 12px var(--cream); }
.header-actions { order:2; margin-right:auto; display: flex; gap: 7px; align-items: center; }.icon-button,.mobile-menu { color: #9fa8b6; border: 1px solid var(--line); background: transparent; height: 37px; width: 37px; border-radius: 10px; font-size: 18px; }.mobile-menu { display:none; }

.hero { position: relative; height: min(680px, calc(100vh - 95px)); min-height: 570px; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--line); background: #101016; }
.hero-aurora { position:absolute; border-radius:50%; filter: blur(50px); opacity:.54; }.hero-aurora-a { width: 67vw; height: 67vw; right:-10vw; top:-49vw; background:#664b91; }.hero-aurora-b { width: 55vw; height: 55vw; left:8vw; bottom:-43vw; background:#b7574a; opacity:.28; }
.hero-art { position:absolute; inset:0; direction:ltr; overflow:hidden; background: radial-gradient(circle at 68% 37%, rgba(255,196,133,.19), transparent 25%), radial-gradient(circle at 78% 10%, #2f2548 0, #17131e 43%, transparent 72%); transition: background .8s ease; }
.hero-art:before { content:""; position:absolute; inset:0; background-image: radial-gradient(#f7d5a8 1.2px,transparent 1.4px), radial-gradient(#a8b3df 1px,transparent 1.5px); background-size: 61px 61px, 97px 97px; background-position: 20px 30px, 0 0; opacity:.35; }
.hero-art:after { content:""; position:absolute; width:100%; height:100%; background:linear-gradient(90deg, rgba(6,6,7,.8) 4%, rgba(6,6,7,.08) 56%, rgba(6,6,7,.1)), linear-gradient(0deg, #090909 0%, transparent 30%); }
.planet { position:absolute; width: 650px; height:650px; right:9vw; top:-110px; border-radius:50%; background:radial-gradient(circle at 34% 34%,#e9bf8d 0 2%, #805353 3% 4%, #3b294a 20%, #1b1833 55%, #090b16 75%); border:1px solid rgba(255,230,177,.16); box-shadow: inset -62px -30px 90px rgba(4,3,10,.74), 0 0 60px rgba(159,118,212,.16); }.planet:before { content:""; position:absolute; inset:16% 11% 9% 14%; border:1px solid rgba(255,215,166,.15); border-radius:50%; transform:rotate(-20deg); }.planet:after { content:""; position:absolute; width:93%; height:27%; top:46%; left:-2%; border: 18px solid rgba(238,180,139,.45); border-left-width: 4px; border-right-width: 4px; border-radius:50%; transform:rotate(-18deg); box-shadow: 0 0 16px rgba(255,177,124,.3); }
.moon { position:absolute; width:145px; height:145px; border-radius:50%; right:7%; top:19%; background:linear-gradient(140deg,#f7dcc3,#bc899a); box-shadow:0 0 34px rgba(250,196,159,.32); }.moon:after { content:""; position:absolute; inset:0; border-radius:50%; background: radial-gradient(circle at 35% 30%,rgba(98,54,73,.25) 0 6%,transparent 6.5%), radial-gradient(circle at 68% 70%,rgba(98,54,73,.2) 0 9%,transparent 9.5%); }
.orbit { position:absolute; border:1px solid rgba(241,206,171,.28); border-radius:50%; transform:rotate(-27deg); }.orbit-one { height:500px; width:900px; right:1vw; top:30px; }.orbit-two { width:680px; height:390px; right:10vw; top:128px; border-color:rgba(151,130,207,.26); }
.star { position:absolute; background:#fff2d4; width:4px; height:4px; border-radius:50%; box-shadow:0 0 16px 4px #ffc588; }.s1 { right:35%; top:22%; }.s2 { right:22%; top:60%; }.s3 { right:51%; top:15%; }.s4 { right:13%; top:34%; }
.figure { position:absolute; z-index:2; opacity:.85; filter:drop-shadow(0 20px 15px #0b0911); }.figure:before { content:""; position:absolute; background:linear-gradient(135deg,#e8c3ac,#9d5e7c); border-radius:46% 46% 43% 43%; }.figure:after { content:""; position:absolute; background:linear-gradient(145deg,#3d2855,#a85d6a 75%); border-radius:50% 50% 8% 8%; }.figure-left { right:42%; top:34%; width:135px; height:245px; transform:rotate(8deg); }.figure-left:before { width:62px; height:75px; left:39px; top:0; }.figure-left:after { width:135px; height:180px; left:0; top:63px; }.figure-right { right:23%; top:26%; width:125px; height:270px; transform:rotate(-12deg); }.figure-right:before { width:58px; height:72px; left:34px; top:0; }.figure-right:after { width:125px; height:210px; left:0; top:63px; background:linear-gradient(145deg,#dec99e,#9c596d 70%); }
.hero-content { position:relative; z-index:5; padding-top: clamp(90px,15vh,160px); text-align:right; }.eyebrow { display: inline-flex; direction:ltr; font-family:"DM Sans"; font-size:12px; font-weight:700; letter-spacing:.08em; color:#1d1813; background:var(--cream); padding:7px 13px; border-radius:20px; }.hero-kicker { margin:16px 0 3px; color:var(--cream); font-size:14px; }.hero h1 { font-family:"DM Sans", Cairo, sans-serif; direction:rtl; font-size:clamp(48px,5vw,88px); line-height:1.04; letter-spacing:-.06em; margin:0; max-width:675px; }.hero-copy { color:#bec6d3; font-size:16px; max-width:470px; line-height:2; margin:18px 0 25px; }.primary-button { border:0; color:#1b1715; background:var(--cream); padding:14px 21px; border-radius:28px; font-weight:800; display:flex; align-items:center; gap:15px; transition:.25s; }.primary-button:hover { background:#ffdfb7; transform:translateY(-3px); }.primary-button span { font-family:Arial; font-size:21px; }
.hero-controls { position:absolute; z-index:7; bottom:36px; display:flex; gap:9px; align-items:center; direction:rtl; }.arrow { color:#fff; border:1px solid rgba(255,255,255,.2); background:rgba(10,10,12,.3); width:50px; height:50px; border-radius:50%; font-size:23px; transition:.25s; }.arrow:hover { background:var(--cream); color:#1a1714; border-color:var(--cream); }.slide-dots { display:flex; gap:7px; margin-right: 18px; direction:ltr; }.slide-dots button { position:relative; border:0; width:25px; height:22px; border-radius:4px; background:none; padding:0; transition:.25s; }.slide-dots button::after { content:""; position:absolute; left:0; right:0; top:9px; height:4px; border-radius:4px; background:rgba(255,255,255,.25); transition:.25s; }.slide-dots button.active::after { background:var(--cream); width:43px; }.hero-index { position:absolute; z-index:7; left:5.4vw; bottom:43px; direction:ltr; font-family:"DM Sans"; }.hero-index span { font-size:23px; font-weight:700; }.hero-index em { color:#8990a0; font-style:normal; font-size:12px; margin-left:5px; }

.latest { padding-top:96px; }.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:25px; }.section-kicker { color:var(--blue); font-size:14px; margin:0 0 6px; }.section-heading h2, .episodes h2 { font-size:32px; letter-spacing:0; margin:0; }.section-heading h2:after { content:""; display:block; width:52px; height:3px; margin-top:12px; background:var(--cream); border-radius:3px; }
.gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }.work-card { background:var(--surface); border:1px solid var(--line); overflow:hidden; border-radius:18px; cursor:pointer; transition:transform .33s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s; min-width:0; animation:rise .45s backwards; }.work-card:hover { transform:translateY(-8px); border-color:rgba(240,207,170,.62); box-shadow:var(--shadow); }.work-card.hidden { display:none; }.card-art { height:250px; position:relative; overflow:hidden; background:var(--art); }.card-art:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 49%, rgba(0,0,0,.35)); }.card-art .sun { width:125px; height:125px; border-radius:50%; position:absolute; left:19%; top:16%; background:var(--sun); box-shadow:0 0 50px var(--glow); }.card-art .ring { position:absolute; width:260px; height:70px; border:3px solid rgba(255,255,255,.33); border-radius:50%; top:39%; left:-23px; transform:rotate(-17deg); }.card-art .arch { position:absolute; width:116px; height:220px; bottom:-36px; right:18%; border: 16px solid rgba(253,225,186,.68); border-bottom:0; border-radius:90px 90px 0 0; }.card-art .horizon { position:absolute; height:64px; left:-10%; right:-10%; bottom:-9px; background:var(--horizon); transform:rotate(-5deg); }.card-art .waves { position:absolute; inset:40% -50% -10%; background:repeating-radial-gradient(ellipse at center, transparent 0 12px, rgba(243,227,191,.32) 13px 15px); transform:rotate(15deg); opacity:.8; }.tag-wrap { z-index:3; position:absolute; top:12px; right:12px; display:flex; gap:5px; }.card-tag { background:var(--cream); color:#17130f; border-radius:14px; padding:4px 10px; font-family:"DM Sans"; font-size:10px; font-weight:700; }.card-tag.status { background:rgba(20,94,54,.9); color:#a6efbd; }.card-body { min-height:120px; padding:15px 17px 13px; position:relative; }.card-title { direction:rtl; font-family:"DM Sans",Cairo,sans-serif; font-size:17px; line-height:1.4; margin:0 0 8px; min-height:48px; }.empty-state { grid-column:1/-1; text-align:center; padding:75px; background:#101011; border:1px dashed var(--line); border-radius:17px; color:#97a3b4; }


.footer { min-height:105px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; color:#8b96a6; font-size:13px; }.footer-brand { color:var(--cream); font-family:"DM Sans"; font-weight:700; display:flex; align-items:center; gap:7px; }.footer-brand .brand-mark { transform:scale(.72); }.socials { display:flex; gap:17px; }.socials a:hover { color:var(--cream); }.scroll-top { position:fixed; z-index:20; bottom:25px; left:25px; width:49px; height:49px; border-radius:50%; background:#151516; border:1px solid rgba(240,207,170,.7); color:var(--cream); font-size:22px; opacity:0; pointer-events:none; transition:.25s; }.scroll-top.visible { opacity:1; pointer-events:auto; }
.toast { z-index:100; position:fixed; bottom:28px; right:50%; transform:translate(50%,20px); background:#f0cfaa; color:#161310; padding:10px 17px; border-radius:20px; font-size:13px; font-weight:700; opacity:0; pointer-events:none; transition:.25s; }.toast.show { opacity:1; transform:translate(50%,0); }

.search-main { min-height:calc(100vh - 200px); padding-top:78px; padding-bottom:100px; }.search-intro { text-align:center; max-width:680px; margin:0 auto 42px; }.search-intro h1 { margin:0; font-size:clamp(42px,5vw,67px); line-height:1.1; letter-spacing:0; }.search-intro > p:last-child { color:#9aa7ba; margin:13px auto 0; line-height:2; max-width:530px; }.search-panel { background:linear-gradient(135deg,rgba(28,28,31,.97),rgba(17,17,19,.97)); border:1px solid var(--line); border-radius:22px; padding:25px; box-shadow:var(--shadow); }.search-input-wrap label,.filter-label { display:block; color:#a5b0c0; font-size:13px; font-weight:700; margin-bottom:9px; }.search-input { display:flex; direction:rtl; align-items:center; height:57px; border-radius:13px; border:1px solid rgba(255,255,255,.14); background:#0d0d0f; padding:0 16px; transition:.2s; }.search-input:focus-within { border-color:var(--cream); box-shadow:0 0 0 4px rgba(240,207,170,.08); }.search-input span { font:25px/1 Arial; color:var(--cream); transform:rotate(-20deg); margin-left:9px; }.search-input input { flex:1; color:white; background:transparent; border:0; outline:0; direction:rtl; font-family:Cairo; font-size:15px; }.search-input input::placeholder { color:#7f8ca0; }.filter-group { margin-top:22px; }.search-chips { display:flex; gap:8px; flex-wrap:wrap; direction:rtl; }.search-chip { background:#19191b; border:1px solid var(--line); color:#98a4b4; padding:7px 14px; border-radius:18px; font:700 12px "DM Sans",Cairo; transition:.2s; }.search-chip:hover { color:white; border-color:rgba(240,207,170,.45); }.search-chip.active { background:var(--cream); color:#1b1715; border-color:var(--cream); }.search-controls { display:grid; grid-template-columns:1fr 1fr 1.1fr auto; gap:15px; align-items:end; margin-top:25px; padding-top:22px; border-top:1px solid var(--line); }.select-label { display:grid; gap:9px; color:#a5b0c0; font-size:13px; font-weight:700; }.select-label select { color:white; background:#111113; border:1px solid var(--line); border-radius:10px; outline:0; height:43px; padding:0 12px; font-family:Cairo; }.mal-filter { min-width:190px; }.mal-filter > div { display:flex; justify-content:space-between; align-items:start; }.mal-filter b { color:var(--cream); font-family:"DM Sans"; }.mal-filter input { width:100%; accent-color:var(--cream); }.clear-filters { color:#c1cada; border:1px solid var(--line); background:transparent; border-radius:10px; height:43px; padding:0 14px; white-space:nowrap; font-weight:700; }.clear-filters:hover { color:var(--cream); border-color:rgba(240,207,170,.5); }.results-section { margin-top:36px; }.results-top { display:flex; justify-content:space-between; align-items:center; color:#c7d0dd; font-size:14px; margin-bottom:17px; }.results-top p { margin:0; font-weight:700; }.results-top span { color:#728197; font-size:12px; }.search-gallery { grid-template-columns:repeat(4,1fr); }.search-gallery .work-card { cursor:default; }
.custom-select { position:relative; min-width:0; z-index:4; }.custom-select.open { z-index:15; }.custom-select .select-label { display:block; margin-bottom:9px; }.custom-select-toggle { display:flex; direction:rtl; align-items:center; justify-content:space-between; color:#fff; background:#111113; border:1px solid var(--line); width:100%; height:43px; padding:0 12px; border-radius:10px; font-family:Cairo; text-align:right; }.custom-select-toggle:hover,.custom-select.open .custom-select-toggle { border-color:rgba(240,207,170,.7); }.custom-select-toggle b { color:var(--cream); font-size:17px; line-height:1; transition:.2s; }.custom-select.open .custom-select-toggle b { transform:rotate(180deg); }.select-options { position:absolute; top:calc(100% + 7px); right:0; left:0; display:grid; padding:6px; background:#18181a; border:1px solid rgba(240,207,170,.35); box-shadow:0 18px 42px rgba(0,0,0,.42); border-radius:11px; opacity:0; visibility:hidden; transform:translateY(-5px); transition:.18s; }.custom-select.open .select-options { opacity:1; visibility:visible; transform:translateY(0); }.select-options button { color:#c1cad5; background:transparent; border:0; border-radius:7px; text-align:right; padding:9px 10px; font-family:Cairo; }.select-options button:hover { color:#191510; background:var(--cream); }.search-gallery .work-card { cursor:pointer; }
.catalog-main { min-height:calc(100vh - 200px); padding-top:78px; padding-bottom:105px; }.catalog-intro { text-align:center; max-width:600px; margin:0 auto 68px; }.catalog-intro h1 { font-size:clamp(42px,5vw,67px); line-height:1.1; letter-spacing:0; margin:0; }.catalog-intro > p:last-child { color:#9aa7ba; margin:13px auto 0; line-height:2; }.catalog-rule { border-top:1px solid var(--line); position:relative; margin-bottom:31px; }.catalog-rule:before { content:""; position:absolute; right:0; top:-2px; width:74px; height:3px; border-radius:3px; background:var(--cream); }.catalog-gallery { grid-template-columns:repeat(4,1fr); }
.studio-header { min-height:94px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }.studio-badge { color:var(--cream); font:700 11px "DM Sans"; letter-spacing:.1em; border:1px solid rgba(240,207,170,.35); padding:7px 10px; border-radius:14px; }.studio-main { padding-top:70px; padding-bottom:100px; }.studio-intro { max-width:680px; }.studio-intro h1 { font-size:clamp(42px,5vw,64px); letter-spacing:0; margin:0; }.studio-intro > p:last-child { color:#94a0b1; line-height:2; }.studio-layout { display:grid; grid-template-columns:1.45fr .75fr; gap:24px; margin-top:34px; }.admin-form,.studio-note { background:var(--surface); border:1px solid var(--line); border-radius:19px; padding:28px; }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:17px; margin-bottom:17px; }.form-row:nth-of-type(3) { grid-template-columns:.75fr .75fr 1.5fr; }.admin-form label { display:grid; gap:8px; color:#aeb9c8; font-size:13px; font-weight:700; }.admin-form input,.admin-form select { width:100%; height:47px; padding:0 13px; color:#fff; border:1px solid var(--line); border-radius:10px; outline:0; background:#0d0d0f; font:500 14px var(--font-ar); }.admin-form input:focus,.admin-form select:focus { border-color:var(--cream); box-shadow:0 0 0 4px rgba(240,207,170,.07); }.admin-form .primary-button { margin-top:8px; }.form-note { color:#788596; font-size:12px; line-height:1.8; margin:16px 0 0; }.studio-note { background:linear-gradient(145deg,#1c1a1c,#171415); }.studio-note > span { display:grid; place-items:center; width:48px; height:48px; border-radius:14px; color:#1c1713; background:var(--cream); font-size:24px; }.studio-note h2 { margin:22px 0 5px; font-size:24px; }.studio-note p { color:#9ba6b5; font-size:14px; line-height:2; }.studio-note a { display:inline-flex; color:var(--cream); font-weight:700; margin-top:18px; }.studio-note a b { margin-right:8px; }.managed-list { margin-top:70px; }.admin-work { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:17px 20px; background:#121214; border:1px solid var(--line); border-radius:14px; margin-bottom:10px; }.admin-work h2 { margin:8px 0 0; font-size:17px; }.admin-work p { color:#8491a2; font:13px var(--font-latin); margin:4px 0 0; }.admin-work button { color:#f2a2a2; background:rgba(149,55,55,.13); border:1px solid rgba(224,110,110,.3); padding:8px 14px; border-radius:9px; font-family:var(--font-ar); }.admin-work button:hover { background:rgba(149,55,55,.25); }

.detail-page { display:none; background:#090909; position:relative; }.detail-page.visible { display:block; animation:fade .35s both; }.detail-hero { height:540px; position:relative; overflow:hidden; border-bottom:1px solid var(--line); }.detail-backdrop { position:absolute; inset:-50px; background:radial-gradient(circle at 69% 30%,#d08591 0, #54375d 23%,#101322 58%,#090909 78%); filter:blur(5px); }.detail-backdrop:after { content:""; position:absolute; inset:0; background:repeating-radial-gradient(ellipse at 68% 48%,transparent 0 34px,rgba(244,213,182,.13) 35px 37px); transform:rotate(-19deg); }.detail-backdrop-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,4,5,.72),rgba(4,4,5,.18) 62%,rgba(4,4,5,.4)),linear-gradient(0deg,#090909,transparent 40%); }.detail-wrap { position:relative; z-index:1; height:100%; display:flex; align-items:center; justify-content:space-between; direction:rtl; }.detail-copy { width:min(620px,55%); }.detail-overline { color:var(--cream); margin:15px 0 5px; }.detail-copy h2 { font-family:"DM Sans",Cairo; font-size:clamp(39px,5vw,74px); letter-spacing:-.06em; margin:0; line-height:1.08; }.detail-copy > p:last-child { color:#b9c3d0; max-width:470px; line-height:2; }.feature-poster { position:relative; flex:none; width:220px; height:302px; overflow:hidden; background:linear-gradient(145deg,#281228 0%,#cf6687 43%,#101021 43%); border-radius:16px; border:1px solid rgba(255,255,255,.2); box-shadow:0 25px 45px rgba(0,0,0,.35); }.poster-sun { position:absolute; width:170px; height:170px; left:-15px; top:29px; border-radius:50%; background:repeating-linear-gradient(180deg,#ffd2ad 0 6px,#eb8993 7px 10px); }.poster-lines { position:absolute; height:330px; width:7px; left:142px; top:-14px; transform:rotate(39deg); background:rgba(15,15,30,.7); box-shadow:17px 0 0 rgba(15,15,30,.7),34px 0 0 rgba(15,15,30,.7); }.poster-name { position:absolute; color:white; font-size:36px; font-weight:800; bottom:28px; right:18px; text-shadow:0 2px 0 #482041; }.poster-label { position:absolute; top:12px; left:12px; background:var(--cream); color:#17130f; font-size:10px; padding:5px 10px; border-radius:13px; font-weight:800; }
.detail-body { direction:rtl; display:grid; grid-template-columns:1fr 1.3fr; gap:24px; padding-top:55px; }.data-card,.synopsis-card { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:25px 34px; }.data-card > div { display:flex; justify-content:space-between; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.075); }.data-card > div:last-child { border-bottom:0; }.data-card span { color:#8d9aae; }.data-card b { font-family:"DM Sans",Cairo; }.genre { background:#281727; color:var(--cream); padding:4px 10px; border-radius:7px; font-size:12px; }.synopsis-card h3 { font-size:25px; margin:0 0 8px; }.synopsis-card > p:not(.section-kicker) { color:#b4bfcd; line-height:2.15; margin:0; }.meta-row { display:flex; gap:10px; flex-wrap:wrap; direction:rtl; margin-top:20px; color:var(--cream); font-size:13px; }.episodes { padding-top:85px; padding-bottom:100px; }.episode-count { color:var(--blue); font-family:"DM Sans"; }.episode-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }.episode { display:flex; direction:rtl; gap:17px; align-items:center; padding:15px; background:#131314; border:1px solid var(--line); border-radius:16px; transition:.25s; }.episode:hover { border-color:rgba(240,207,170,.7); transform:translateY(-2px); }.episode-number { height:58px; width:58px; flex:none; border:1px solid rgba(255,255,255,.12); border-radius:13px; display:grid; place-items:center; text-align:center; line-height:1.1; color:var(--blue); font-size:11px; }.episode-number b { display:block; color:white; font-family:"DM Sans"; font-size:21px; }.episode-info { flex:1; }.episode-info h4 { margin:0 0 4px; font-family:"DM Sans",Cairo; font-size:15px; }.episode-info p { margin:0; color:#93a1af; font-size:12px; }.episode-action { color:var(--cream); font-size:21px; }

html.light { color-scheme:light; --ink:#ece8e2; --surface:#f8f5f1; --surface-2:#fff; --line:rgba(28,24,21,.13); --muted:#5e6773; --white:#1c1917; --blue:#385777; --tea:#5b391c; --shadow:0 24px 60px rgba(50,40,34,.12); }.light .topbar{background:rgba(236,232,226,.95)}.light .hero{background:#d8cfc8}.light .hero-art:after{background:linear-gradient(90deg,rgba(237,232,224,.82) 4%,rgba(237,232,224,.05) 56%,rgba(237,232,224,.08)),linear-gradient(0deg,#ece8e2,transparent 30%)}.light .hero h1{color:#1c1917}.light .hero-copy{color:#344252}.light .nav-link{color:#3b4653}.light .nav-link.active,.light .nav-link:hover{background:#d8cec4;color:#17130f}.light .menu-panel{background:#faf7f4}.light .menu-panel a,.light .menu-panel button{color:#394553}.light .menu-panel a:hover,.light .menu-panel button:hover{color:#17130f;background:#e7ded5}.light .work-card,.light .data-card,.light .synopsis-card,.light .episode{background:#f9f6f2}.light .detail-page{background:#ece8e2}.light .detail-backdrop-shade{background:linear-gradient(90deg,rgba(237,232,224,.7),rgba(237,232,224,.08) 62%,rgba(237,232,224,.32)),linear-gradient(0deg,#ece8e2,transparent 40%)}.light .detail-copy h1,.light .detail-copy h2,.light .episode-number b{color:#1c1917}.light .footer{color:#455160}.light .footer-brand{color:var(--tea)}.light .detail-body{background:#ece8e2}.light .empty-state{background:#f7f4f0}.light .icon-button,.light .mobile-menu{color:#283444;border-color:rgba(50,39,28,.25)}

/* Direction, font fallbacks, English work titles, and score presentation. */
.hero h1,.card-title,#detailTitle,.poster-name,.episode-info h3,.admin-work h2 { direction:ltr; text-align:left; unicode-bidi:plaintext; font-family:var(--font-latin); }
.hero h1 { text-align:start; }.card-title { min-height:48px; }.detail-copy h1,.detail-copy h2 { font-family:var(--font-latin); font-size:clamp(39px,5vw,74px); letter-spacing:-.06em; margin:0; line-height:1.08; }
button,input,select,textarea,.nav-link,.menu-panel,.search-input input,.custom-select-toggle,.select-options button,.admin-form input,.admin-form select { font-family:var(--font-ar); }
.brand,.card-tag,.eyebrow,.hero-index,.episode-count,.studio-badge { font-family:var(--font-latin); }
.admin-form input[name="title"],.admin-form input[name="posterWord"] { direction:ltr; text-align:left; font-family:var(--font-latin); }
.episode-info h3 { margin:0 0 4px; font-size:15px; }
@keyframes rise { from { opacity:0; transform:translateY(16px) } to { opacity:1; transform:none } } @keyframes fade { from {opacity:0} to {opacity:1} }
@media (max-width: 900px) { .wrap { width:min(100% - 40px, 700px); }.topbar { height:76px; padding-inline:20px; }.brand { font-size:19px; }.icon-button { display:none; }.main-nav .nav-link { display:block; width:100%; text-align:right; }.hero { height:610px; min-height:0; }.hero-content { padding-top:97px; }.hero h1 { font-size:clamp(30px,8vw,44px); white-space:normal; overflow-wrap:anywhere; text-wrap:balance; }.hero-copy { font-size:14px; max-width:360px; }.planet { width:520px; height:520px; right:-120px; top:60px; }.moon { right:-30px; }.figure-right { right:20%; }.figure-left { right:51%; }.gallery { grid-template-columns:repeat(2,1fr); }.detail-body { grid-template-columns:1fr; }.detail-hero { height:560px; }.feature-poster { width:184px;height:260px; }.detail-copy{width:55%;}.episode-grid{grid-template-columns:1fr; } }
@media (max-width: 560px) { .wrap { width:calc(100% - 32px); }.brand-mark { transform:scale(.85); }.brand { gap:3px; }.hero { height:640px; }.hero-content { padding-top:68px; }.hero h1 { font-size:42px; max-width:310px; }.hero-copy { max-width:280px; line-height:1.8; }.hero-art:after { background:linear-gradient(90deg, rgba(6,6,7,.82) 4%, rgba(6,6,7,.25) 80%),linear-gradient(0deg,#090909,transparent 30%); }.planet { right:-222px; top:160px; }.moon,.orbit-two { display:none; }.figure-left{right:27%;top:47%;}.figure-right { right:-3%;top:37%; }.hero-index { display:none; }.hero-controls { bottom:26px; }.arrow { width:43px; height:43px; }.slide-dots{display:none}.latest{padding-top:62px}.section-heading h2,.episodes h2{font-size:27px}.gallery { grid-template-columns:1fr 1fr; gap:12px; }.card-art{height:190px}.card-body{padding:12px}.card-title{font-size:13px;min-height:55px}.footer{flex-wrap:wrap;gap:10px;padding-block:22px}.footer p{order:3;width:100%;margin:0}.scroll-top{bottom:18px;left:16px}.detail-wrap{align-items:end;padding-bottom:45px}.detail-copy{width:100%}.detail-copy h2{font-size:42px}.detail-copy>p:last-child{font-size:14px;max-width:300px}.feature-poster{position:absolute; width:122px;height:176px; left:0; bottom:68px; opacity:.82}.poster-name{font-size:24px}.poster-lines{left:76px}.poster-sun{transform:scale(.7);transform-origin:top left}.detail-body{padding-top:28px}.data-card,.synopsis-card{padding:20px}.episodes{padding-top:55px;padding-bottom:65px}.episode{gap:11px}.detail-hero{height:530px}.section-kicker{font-size:12px} }

@media (max-width: 900px) { .search-main,.catalog-main { padding-top:55px; }.search-controls { grid-template-columns:1fr 1fr; }.mal-filter { grid-column:1 / -1; }.clear-filters { grid-column:1 / -1; }.catalog-gallery { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 700px) { .studio-layout { grid-template-columns:1fr; }.studio-main { padding-top:48px; }.studio-header { min-height:76px; }.form-row,.form-row:nth-of-type(3) { grid-template-columns:1fr; gap:14px; margin-bottom:14px; }.studio-note { order:-1; }.studio-note h2 { margin-top:14px; }.admin-work { align-items:flex-start; }.admin-work button { flex:none; } }
@media (max-width: 560px) { .search-intro { text-align:right; margin-bottom:28px; }.search-intro h1 { font-size:43px; }.search-panel { padding:17px; border-radius:17px; }.search-controls { grid-template-columns:1fr; gap:14px; }.mal-filter,.clear-filters { grid-column:auto; }.search-gallery { grid-template-columns:1fr 1fr; } }

@media (max-width: 560px) { .card-title { min-height:58px; }.detail-copy h1,.detail-copy h2 { font-size:42px; }.form-row:nth-of-type(3) { grid-template-columns:1fr; } }

/* TeaHouse navigation, work metadata, and mobile refinements. */
.poster-stats { position:absolute; z-index:3; right:11px; bottom:10px; display:flex; flex-wrap:wrap; gap:4px; max-width:calc(100% - 22px); direction:ltr; }
.card-art.has-poster { background-image:linear-gradient(180deg,rgba(0,0,0,.02) 32%,rgba(0,0,0,.78) 100%),var(--poster); background-size:cover; background-position:center; }.card-art.has-poster .sun,.card-art.has-poster .ring,.card-art.has-poster .arch,.card-art.has-poster .waves,.card-art.has-poster .horizon { display:none; }
.card-art { height:330px; }.hero-art.has-image .planet,.hero-art.has-image .moon,.hero-art.has-image .orbit,.hero-art.has-image .figure { display:none; }.hero-stats { display:flex; gap:6px; flex-wrap:wrap; direction:ltr; margin:0 0 19px; }.hero-stats span { background:rgba(5,12,12,.66); border:1px solid rgba(222,255,246,.24); color:#eaf5f1; border-radius:8px; padding:5px 8px; font:600 11px var(--font-latin); }.hero-stats b { color:var(--cream); }
@media (max-width:560px) { .card-art { height:255px; } }
.header-actions { margin-right:auto; }.mobile-menu { place-items:center; gap:4px; padding:0; }.mobile-menu i { display:block; width:17px; height:2px; background:currentColor; border-radius:2px; transition:transform .22s,opacity .22s; }.mobile-menu.is-open i:nth-child(1) { transform:translateY(6px) rotate(45deg); }.mobile-menu.is-open i:nth-child(2) { opacity:0; }.mobile-menu.is-open i:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
@media (max-width:900px) { .main-nav { display:none; position:absolute; top:76px; left:20px; right:auto; margin:0; width:min(230px,calc(100% - 40px)); padding:9px; background:#141416; border:1px solid var(--line); border-radius:15px; box-shadow:var(--shadow); z-index:50; }.main-nav.menu-open { display:block; }.mobile-menu { display:grid; }.main-nav .work-menu { width:100%; }.main-nav .menu-panel { position:static; display:grid; width:100%; opacity:1; visibility:visible; transform:none; pointer-events:auto; padding:0; border:0; box-shadow:none; background:transparent; }.main-nav .menu-panel a { padding:12px 13px; } }
.poster-stats span { color:#eef8f4; border:1px solid rgba(232,255,247,.22); background:rgba(7,11,13,.66); backdrop-filter:blur(6px); padding:3px 6px; border-radius:7px; font:600 9px var(--font-latin); }
.poster-stats b { color:var(--cream); }
.form-description { display:grid; gap:8px; color:#aeb9c8; font-size:13px; font-weight:700; margin-bottom:17px; }.form-description textarea { width:100%; min-height:108px; resize:vertical; padding:13px; color:#fff; border:1px solid var(--line); border-radius:10px; outline:0; background:#0d0d0f; font:500 14px var(--font-ar); }.form-description textarea:focus { border-color:var(--cream); box-shadow:0 0 0 4px rgba(175,207,195,.08); }
.footer { gap:20px; }.footer-legal { margin-right:auto; text-align:left; direction:ltr; display:grid; gap:4px; font:12px var(--font-latin); }.footer-legal a { color:var(--cream); }.footer-legal p { margin:0; color:#8b96a6; }
.footer { position:relative; }.footer-legal { position:absolute; right:50%; transform:translateX(50%); text-align:center; justify-items:center; }.footer-legal .x-link { display:grid; place-items:center; width:20px; height:20px; }.footer-legal .x-link svg { width:16px; height:16px; fill:currentColor; }
.catalog-count { margin:17px 0 0; color:var(--cream); font-size:14px; }.catalog-count b { font-family:var(--font-latin); }
.synopsis-card h2 { color:var(--white); font-size:33px; margin:0 0 13px; letter-spacing:0; }.synopsis-card .meta-row { margin-top:24px; }.episodes .section-heading { margin-bottom:25px; }
html.light { --tea:#28554d; }.light .footer-brand { color:var(--tea); }.light .footer-legal p { color:#455160; }
.primary-button:hover { background:var(--cream-strong); }.search-chip:hover,.clear-filters:hover { border-color:rgba(175,207,195,.55); }.work-card:hover,.episode:hover { border-color:rgba(175,207,195,.68); }.scroll-top { border-color:rgba(175,207,195,.72); }.toast { background:var(--cream); }.search-input:focus-within { box-shadow:0 0 0 4px rgba(175,207,195,.10); }.custom-select-toggle:hover,.custom-select.open .custom-select-toggle { border-color:rgba(175,207,195,.7); }.select-options { border-color:rgba(175,207,195,.4); }.studio-badge { border-color:rgba(175,207,195,.4); }.admin-form input:focus,.admin-form select:focus { box-shadow:0 0 0 4px rgba(175,207,195,.09); }
@media (max-width: 900px) { .icon-button#themeButton { display:grid; place-items:center; }.main-nav { order:3; } .header-actions { margin-right:auto; } }
@media (max-width: 560px) { .poster-stats { right:8px; bottom:8px; gap:3px; }.poster-stats span { font-size:8px; padding:3px 4px; }.footer { align-items:flex-start; }.footer-legal { margin-right:0; text-align:right; }.synopsis-card h2 { font-size:30px; } }
.work-content { padding-top:54px; }.detail-cards { display:grid; grid-template-columns:1fr 1fr; gap:24px; }.work-content .synopsis-card { margin-top:24px; }.hero-ratings { display:flex; gap:9px; margin-top:20px; direction:ltr; }.hero-ratings a { min-width:75px; padding:8px 11px; border-radius:10px; background:rgba(5,11,13,.74); border:1px solid rgba(255,255,255,.17); display:grid; gap:2px; text-align:center; font-family:var(--font-latin); }.hero-ratings b { color:var(--cream); font-size:11px; }.hero-ratings span { color:#fff; font-size:17px; font-weight:700; }.feature-poster,.detail-backdrop { background-size:cover; background-position:center; }.feature-poster .poster-sun,.feature-poster .poster-lines { display:none; }.feature-poster:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.76)); }.feature-poster .poster-name,.feature-poster .poster-label { z-index:1; }.episode-action { font:700 10px var(--font-latin); border:1px solid rgba(175,207,195,.45); border-radius:7px; padding:5px 8px; }
@media (max-width:900px) { .detail-cards { grid-template-columns:1fr; }.work-content { padding-top:28px; } }
@media (max-width:560px) { .footer-legal { right:50%; transform:translateX(50%); text-align:center; }.work-content .synopsis-card { margin-top:16px; }.hero-ratings { margin-top:14px; }.hero-ratings a { min-width:67px; } }
.episode-editor { border-top:1px solid var(--line); margin-top:24px; padding-top:22px; }.episode-editor-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }.episode-editor h2 { font-size:18px; margin:0; }.episode-editor button { border:1px solid var(--line); color:var(--cream); background:transparent; border-radius:8px; padding:7px 10px; font:700 12px var(--font-ar); }.episode-drafts { display:grid; gap:7px; margin-top:13px; }.episode-drafts > p { color:#7e8b9c; font-size:12px; margin:0; }.episode-drafts article { display:grid; grid-template-columns:auto 1fr auto auto; gap:9px; align-items:center; padding:9px 10px; border:1px solid var(--line); border-radius:9px; font-size:12px; }.episode-drafts small { color:#8d9aac; }.episode-drafts button { color:#f0a3a3; padding:2px 7px; }.admin-actions { display:flex; gap:8px; flex-wrap:wrap; }.admin-actions a,.admin-actions button { border:1px solid var(--line); padding:8px 11px; border-radius:8px; background:transparent; color:#b9c8d7; font:700 12px var(--font-ar); }.admin-actions .delete { color:#f2a2a2; border-color:rgba(224,110,110,.3); }

/* Final card, navigation, and work-page layout. */
.mobile-menu { place-content:center; width:40px; height:40px; padding:0; gap:5px; flex:none; }.mobile-menu i { width:18px; height:2px; display:block; background:currentColor; border-radius:4px; }.header-actions { margin-right:auto; }
.hero-art { background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }.hero-art:before { display:none; }.hero-art.has-image .planet,.hero-art.has-image .moon,.hero-art.has-image .orbit,.hero-art.has-image .figure { display:none; }
.work-card .card-art { height:355px; }.work-card .card-body { min-height:94px; display:flex; flex-direction:column; justify-content:space-between; }.work-card .card-title { min-height:0; margin:0; }.card-badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }.tag-wrap { flex-wrap:wrap; }
.card-tag { color:#fff; border:1px solid rgba(255,255,255,.24); box-shadow:0 5px 14px rgba(0,0,0,.2); }.format-web { background:#a4289f !important; }.format-bd { background:#2563d8 !important; }.format-dvd { background:#a45a31 !important; }.state-completed { background:#27785a !important; }.state-ongoing { background:#bb3b57 !important; }.kind-tv { background:#4c6f9e !important; }.kind-movie { background:#8057a9 !important; }.kind-special { background:#a36e35 !important; }.kind-ova,.kind-ona { background:#3c817c !important; }
.detail-page .detail-hero { height:auto; min-height:510px; }.detail-page .detail-wrap { min-height:510px; padding-block:54px; gap:52px; }.detail-page .detail-copy { width:min(660px,60%); }.detail-page .detail-copy > p { max-width:650px; }.detail-page .feature-poster { width:250px; height:350px; border-radius:18px; background-size:cover; background-position:center; }.detail-page .feature-poster:after { display:none; }.detail-page .work-content { padding-top:48px; }.detail-page .data-card,.detail-page .synopsis-card { background:linear-gradient(145deg,rgba(27,34,36,.94),rgba(13,17,18,.98)); border-color:rgba(180,222,208,.18); }.detail-page .synopsis-card { margin-top:24px; }.detail-page .hero-ratings { direction:ltr; align-items:stretch; }.detail-page .hero-ratings a { min-width:86px; border-color:rgba(175,207,195,.42); background:rgba(5,14,15,.72); }
.episode-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.episode { min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:13px; align-items:center; padding:18px; background:linear-gradient(135deg,#171c1e,#101314); border-color:rgba(180,222,208,.16); }.episode-tags { align-self:start; }.episode-info { min-width:0; }.episode-info h3 { font-size:15px; white-space:normal; overflow-wrap:anywhere; text-align:right; }.episode-info p { margin:5px 0 0; }.episode-links { display:grid; gap:7px; align-self:stretch; place-content:center; }.episode-links a,.episode-links span { text-align:center; color:#d8f3e9; background:#235e52; border:1px solid rgba(175,207,195,.35); padding:8px 10px; border-radius:8px; font-size:12px; white-space:nowrap; }.episode-links span { color:#7e8d91; background:transparent; border-style:dashed; white-space:normal; }.episode-number,.episode-action { display:none; }
.related-works { margin-top:24px; padding:24px; border:1px solid var(--line); border-radius:18px; background:var(--surface); }.related-works h2 { margin:0 0 14px; font-size:22px; }.related-works > div { display:flex; flex-wrap:wrap; gap:10px; }.related-works a { min-width:200px; flex:1; border:1px solid var(--line); border-radius:10px; padding:12px; background:#16191a; font:700 14px var(--font-latin); }.related-works a span { display:block; margin-top:5px; color:#8ea0ad; font-size:12px; }
.search-controls { grid-template-columns:repeat(3,minmax(0,1fr)); }.search-controls .mal-filter { grid-column:span 2; }.search-controls .clear-filters { grid-column:span 1; }
@media (max-width:900px) { .work-card .card-art { height:290px; }.detail-page .detail-wrap { min-height:0; }.episode-grid { grid-template-columns:1fr; }.search-controls { grid-template-columns:1fr 1fr; }.search-controls .mal-filter,.search-controls .clear-filters { grid-column:auto; } }
@media (max-width:560px) { .work-card .card-art { height:245px; }.detail-page .detail-hero { min-height:0; }.detail-page .detail-wrap { display:block; padding:42px 0 30px; }.detail-page .detail-copy { width:100%; }.detail-page .detail-copy h1 { font-size:38px; }.detail-page .feature-poster { position:relative; width:155px; height:218px; left:auto; right:auto; bottom:auto; margin:24px auto 0; opacity:1; }.detail-page .detail-cards { gap:14px; }.detail-page .data-card,.detail-page .synopsis-card { padding:19px; }.episode { grid-template-columns:auto minmax(0,1fr); }.episode-links { grid-column:1 / -1; display:flex; justify-content:stretch; }.episode-links a,.episode-links span { width:100%; }.search-controls { grid-template-columns:1fr; }.search-controls .mal-filter,.search-controls .clear-filters { grid-column:auto; }.related-works { padding:18px; }.related-works a { min-width:100%; } }

/* Explicit fallback stacks keep all text legible when web fonts do not load. */
.brand,.eyebrow,.card-tag,.card-title,.hero h1,.detail-copy h1,.episode-info h3,.episode-links,.hero-ratings,.footer-legal,.admin-work h2 { font-family:var(--font-latin), Arial, Helvetica, sans-serif; }
.nav-link,.menu-panel,.data-card,.synopsis-card,.episode-info p,.card-badges,.search-panel,.admin-form { font-family:var(--font-ar), Tahoma, Arial, sans-serif; }

/* Work page: poster on the right, unbroken title, and release-card layout. */
.detail-page .detail-wrap { direction:ltr; }.detail-page .detail-copy { width:auto; flex:1; min-width:0; direction:rtl; }.detail-page .detail-copy h1 { white-space:normal; overflow-wrap:anywhere; font-size:clamp(30px,4.4vw,68px); }.detail-page .feature-poster { order:-1; }
.episode-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }.episode { min-width:0; min-height:235px; display:grid; grid-template-columns:1fr auto; grid-template-rows:auto 1fr auto; gap:14px; padding:20px; background:linear-gradient(145deg,#2a241d,#171512); border-color:rgba(226,195,148,.28); }.episode-top { grid-column:1 / -1; display:flex; justify-content:space-between; align-items:start; }.episode-new { color:#fff; background:#ee4649; padding:5px 9px; border-radius:7px; font-size:12px; font-weight:800; }.episode-range { align-self:center; }.episode-range span { display:block; color:#cfc8bc; font-weight:700; }.episode-range b { display:block; direction:ltr; color:white; font:800 clamp(30px,3vw,46px) var(--font-latin); margin-top:3px; }.episode-info { min-width:0; align-self:center; text-align:left; }.episode-info h3 { font-size:15px; white-space:normal; overflow-wrap:anywhere; text-align:left; }.episode-info p { margin:5px 0 0; }.episode-links { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:7px; direction:ltr; }.episode-links a,.episode-links span { text-align:center; color:#d8f3e9; background:#235e52; border:1px solid rgba(175,207,195,.35); padding:8px 10px; border-radius:8px; font-size:12px; white-space:nowrap; }.episode-links span { color:#a39c90; background:transparent; border-style:dashed; white-space:normal; }.episode-number,.episode-action { display:none; }
.related-works a { display:flex; align-items:center; gap:12px; padding:10px; }.related-works img { width:52px; height:70px; object-fit:cover; border-radius:6px; }.related-works a span { display:grid; gap:5px; min-width:0; }.related-works a b { overflow-wrap:anywhere; }.related-works a small { color:#8ea0ad; font-size:12px; }
.social-preview { overflow:hidden; margin-top:20px; border:1px solid rgba(175,207,195,.26); border-radius:12px; background:#101718; }.social-preview img { display:block; width:100%; height:145px; object-fit:cover; background:linear-gradient(135deg,#294846,#101718); }.social-preview strong,.social-preview small { display:block; padding-inline:12px; }.social-preview strong { padding-top:12px; font:700 16px var(--font-latin); }.social-preview small { padding-block:6px 13px; color:#a5b5b8; line-height:1.7; }
@media (max-width:900px) { .episode-grid { grid-template-columns:1fr; } }
@media (max-width:560px) { .detail-page .detail-wrap { display:block; }.detail-page .detail-copy h1 { white-space:normal; font-size:38px; }.detail-page .feature-poster { order:initial; }.episode { grid-template-columns:auto minmax(0,1fr); }.episode-links { grid-column:1 / -1; }.episode-links a,.episode-links span { flex:1; } }

/* Final work-page composition: poster right, clear stat rhythm, source-like releases. */
.detail-page .detail-wrap { direction:ltr; align-items:center; }
.detail-page .feature-poster { order:initial; flex:0 0 250px; }
.detail-page .detail-copy { direction:rtl; text-align:right; }
.detail-page .detail-copy h1 { max-width:none; margin:0; overflow-wrap:anywhere; font-size:clamp(26px,3.5vw,56px); }
.detail-page .detail-copy > p { margin:18px 0 20px; }
.detail-page .hero-ratings { width:min(100%, 235px); display:grid; grid-template-columns:1fr; gap:8px; direction:rtl; }
.detail-page .hero-ratings a { min-width:0; display:flex; align-items:center; justify-content:space-between; padding:9px 13px; }
.detail-page .hero-ratings b { order:0; }
.detail-page .hero-ratings span { order:1; }

/* The homepage teaser has one intentional vertical column of information. */
.hero-content { display:flex; flex-direction:column; align-items:flex-start; }
.hero h1 { white-space:normal; max-width:none; font-size:clamp(34px,4.6vw,76px); overflow-wrap:anywhere; text-wrap:balance; }
.hero-stats { display:grid; grid-template-columns:1fr; gap:6px; width:180px; margin-top:18px; direction:ltr; }
.hero-stats span { display:flex; justify-content:space-between; align-items:center; padding:6px 9px; border:1px solid rgba(255,255,255,.18); border-radius:8px; background:rgba(4,10,10,.45); color:#cfd8dc; font:700 12px var(--font-latin); }
.hero-stats b { color:#fff; }
.hero-stats em { font-style:normal; }

/* Removing card labels also removes their former reserved vertical space. */
.work-card .card-body { min-height:64px; padding:13px 16px; }
.work-card .card-title { min-height:0; line-height:1.25; }
.work-card .card-art { height:375px; }

/* Release cards deliberately mirror the reference structure: controls / info / episode number. */
.episode-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.episode { position:relative; min-height:176px; display:grid; grid-template-columns:132px minmax(0,1fr) 102px; grid-template-rows:1fr; gap:18px; align-items:center; direction:ltr; padding:20px 22px; border:1px solid rgba(175,207,195,.24); border-radius:18px; background:linear-gradient(135deg,#1b2524,#101515); }
.episode .episode-links { grid-column:auto; grid-row:auto; align-self:center; display:grid; gap:8px; direction:rtl; }
.episode .episode-links a,.episode .episode-links span { display:block; width:100%; padding:9px 8px; border-radius:8px; color:#def5ed; border:1px solid rgba(175,207,195,.36); background:#1e685d; font:700 12px var(--font-ar); text-align:center; white-space:nowrap; }
.episode .episode-links span { color:#94a4a1; background:transparent; border-style:dashed; white-space:normal; }
.episode .episode-info { align-self:center; min-width:0; text-align:right; direction:rtl; }
.episode .episode-info h3 { margin:0; color:#f8fbfa; font:700 16px/1.55 var(--font-latin); text-align:right; overflow-wrap:anywhere; }
.episode .episode-info p { margin:7px 0 0; color:#a3b1b5; font-size:13px; }
.episode-number-box { align-self:stretch; display:flex; position:relative; flex-direction:column; align-items:center; justify-content:center; min-width:0; padding:36px 8px 12px; border-radius:13px; background:rgba(0,0,0,.25); direction:rtl; }
.episode-number-box > span { color:#c6d1d2; font-size:12px; font-weight:700; }
.episode-number-box > b { direction:ltr; color:#fff; font:800 27px/1.18 var(--font-latin); white-space:nowrap; }
.episode-flags { position:absolute; top:9px; left:50%; transform:translateX(-50%); display:flex; flex-wrap:wrap; gap:5px; align-items:center; justify-content:center; max-width:calc(100% - 10px); }
.episode-flags .card-tag { padding:4px 7px; border-radius:6px; font-size:10px; }
.episode-new { padding:4px 7px; border-radius:6px; font-size:10px; }

/* A collection is a separate, named relationship group—not one mixed grid. */
.collection-groups { display:grid; gap:54px; }
.collection-group { border-top:1px solid var(--line); padding-top:22px; }
.collection-group header { display:flex; align-items:baseline; justify-content:space-between; gap:18px; margin-bottom:22px; }
.collection-group h2 { margin:0; font-size:27px; letter-spacing:0; }
.collection-group h2 span { font-family:var(--font-latin); }
.collection-group header p { margin:0; color:var(--muted); font-size:13px; }
.collection-gallery { grid-template-columns:repeat(4,minmax(0,1fr)); }
.relationship-label { position:absolute; z-index:4; right:12px; left:12px; bottom:12px; padding:7px 9px; border-radius:8px; background:rgba(3,8,8,.78); color:#fff; backdrop-filter:blur(6px); text-align:center; font-size:12px; font-weight:800; }

@media (max-width:900px) {
  .detail-page .detail-wrap { gap:28px; }
  .detail-page .feature-poster { flex-basis:210px; width:210px; height:295px; }
  .episode-grid { grid-template-columns:1fr; }
  .collection-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px) {
  .hero h1 { white-space:normal; }
  .hero-stats { width:156px; }
  .work-card .card-art { height:310px; }
  .work-card .card-body { min-height:60px; }
  .detail-page .detail-wrap { display:flex; flex-direction:column; align-items:stretch; padding:34px 0; }
  .detail-page .feature-poster { position:relative; order:initial; width:165px; height:230px; margin:0 auto; left:auto; right:auto; bottom:auto; opacity:1; }
  .detail-page .detail-copy { order:1; }
  .detail-page .feature-poster { order:0; }
  .detail-page .detail-copy h1 { white-space:normal; font-size:clamp(27px,9vw,37px); }
  .detail-page .hero-ratings { width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .episode { min-height:0; grid-template-columns:minmax(0,1fr) auto; gap:12px; padding:13px; }
  .episode .episode-links { grid-column:1 / -1; grid-row:2; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .episode .episode-info { grid-column:1; grid-row:1; }
  .episode-number-box { grid-column:2; grid-row:1; width:84px; min-width:84px; max-width:84px; aspect-ratio:1/1; align-self:center; }
  .episode .episode-links a,.episode .episode-links span { font-size:11px; white-space:normal; }
  .collection-group header { align-items:flex-start; flex-direction:column; gap:5px; }
  .collection-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
}

/* Work-page score cards use their source colors and stay square. */
.detail-page .detail-copy h1 { width:100%; text-align:right; direction:ltr; }
.detail-page .hero-ratings { width:auto; display:grid; grid-template-columns:repeat(2,76px); gap:10px; direction:ltr; }
.detail-page .hero-ratings a { width:76px; min-width:0; aspect-ratio:1; padding:8px; display:grid; place-content:center; gap:3px; border:0; border-radius:11px; text-align:center; box-shadow:0 10px 22px rgba(0,0,0,.22); }
.detail-page .hero-ratings #malLink { color:#fff; background:#2e51a2; }
.detail-page .hero-ratings #imdbLink { color:#15110a; background:#f5c518; }
.detail-page .hero-ratings #malLink b,.detail-page .hero-ratings #imdbLink b { color:inherit; }
.detail-page .hero-ratings #malLink span,.detail-page .hero-ratings #imdbLink span { color:inherit; font-size:19px; }

/* The featured banner is data-first: no marketing line or synopsis over the image. */
.hero .eyebrow,.hero .hero-kicker,.hero .hero-copy { display:none; }
.hero-content { padding-top:clamp(118px,20vh,205px); }
.hero-stats { margin-top:20px; }

/* Download controls are visibly interactive. */
.episode .episode-links a { transition:transform .18s ease, background .18s ease, box-shadow .18s ease; }
.episode .episode-links a:hover { transform:translateY(-3px); background:#2a8274; box-shadow:0 8px 18px rgba(0,0,0,.26); }

/* Relation text sits directly on the poster—without a separate framed badge. */
.relationship-label { right:10px; left:10px; bottom:11px; padding:0; background:transparent; border:0; border-radius:0; text-shadow:0 2px 8px #000,0 0 14px #000; }

/* Related titles now use the same poster-led treatment as the reference. */
.related-works > div { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:17px; }
.related-works .related-card { display:grid; min-width:0; gap:8px; padding:0; border:0; border-radius:0; background:transparent; }
.related-works .related-art { position:relative; overflow:hidden; aspect-ratio:2 / 3; border:1px solid var(--line); border-radius:12px; background:#15191a; }
.related-works .related-art img { width:100%; height:100%; display:block; object-fit:cover; border-radius:0; }
.related-works .related-art::after { content:""; position:absolute; inset:55% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.86)); }
.related-works .related-art small { position:absolute; z-index:1; right:9px; left:9px; bottom:10px; color:#fff; font-size:12px; font-weight:800; text-align:center; text-shadow:0 2px 7px #000; }
.related-works .related-card > b { overflow-wrap:anywhere; color:#fff; font:700 13px/1.45 var(--font-latin); text-align:center; }

@media (max-width:560px) {
  .detail-page .hero-ratings { grid-template-columns:repeat(2,72px); width:auto; }
  .detail-page .hero-ratings a { width:72px; }
  .related-works > div { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
}

/* Light-theme corrections for rules defined later in the cascade. */
html.light .detail-page .data-card, html.light .detail-page .synopsis-card { background:#f9f6f2; border-color:rgba(28,24,21,.13); }
html.light .related-works .related-card > b, html.light .related-works .related-art small { color:var(--white); }
html.light .related-works .related-art { background:#e7e0d8; }
html.light .social-preview { background:#fff; border-color:rgba(28,24,21,.13); }
html.light .social-preview small { color:#5e6773; }
html.light .episode-number-box { background:rgba(28,24,21,.06); }
html.light .hero-ratings a { border-color:rgba(28,24,21,.15); }

/* Prevent iOS Safari zoom-on-focus and honor reduced-motion preferences. */
@media (max-width:560px) { .search-input input, .admin-form input, .admin-form select, .form-description textarea { font-size:16px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
/* ============================================================
   FINAL COMPONENT LAYER — authoritative overrides (highest specificity)
   ============================================================ */

/* ---- 1) Advanced search panel: proper light theme ---- */
html.light .search-panel {
  background: #fdfbf8;
  border-color: rgba(28,24,21,.13);
  box-shadow: 0 18px 44px rgba(50,40,34,.10);
}
html.light .search-input-wrap label,
html.light .filter-label,
html.light .select-label { color:#5a4a3a; }
html.light .search-input { background:#ffffff; border-color:rgba(28,24,21,.16); }
html.light .search-input input { color:#1c1917; }
html.light .search-input input::placeholder { color:#9a8f80; }
html.light .search-input span { color:#28554d; }
html.light .search-input:focus-within { border-color:#28554d; box-shadow:0 0 0 4px rgba(40,85,77,.08); }
html.light .search-chip { background:#f1ebe3; border-color:rgba(28,24,21,.14); color:#5e6773; }
html.light .search-chip:hover { color:#17130f; border-color:rgba(40,85,77,.45); }
html.light .search-chip.active { background:#28554d; border-color:#28554d; color:#fff; }
html.light .custom-select-toggle { background:#fff; color:#1c1917; border-color:rgba(28,24,21,.16); }
html.light .custom-select-toggle:hover,
html.light .custom-select.open .custom-select-toggle { border-color:#28554d; }
html.light .custom-select-toggle b { color:#28554d; }
html.light .select-options { background:#faf7f4; border-color:rgba(40,85,77,.35); box-shadow:0 18px 42px rgba(50,40,34,.16); }
html.light .select-options button { color:#394553; }
html.light .select-options button:hover { background:#28554d; color:#fff; }
html.light .mal-filter b { color:#28554d; }
html.light .clear-filters { color:#5a4a3a; border-color:rgba(28,24,21,.16); }
html.light .clear-filters:hover { color:#28554d; border-color:rgba(40,85,77,.5); }
html.light .results-top p { color:#1c1917; }
html.light .results-top span { color:#5e6773; }

/* ---- 2) Hero info box: clean aligned rows (wider, readable) ---- */
.hero-content .hero-stats {
  width: min(300px, 100%);
  display: grid;
  gap: 8px;
  margin-top: 22px;
  direction: rtl;
}
.hero-content .hero-stats span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-radius: 10px;
  background: rgba(6,12,14,.58);
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  color: #d5dee0;
  font: 600 13px/1.5 var(--font-ar);
}
.hero-content .hero-stats em { font-style: normal; opacity: .9; white-space: nowrap; }
.hero-content .hero-stats b {
  font: 700 14px/1.2 var(--font-latin);
  color: #fff;
  direction: ltr;
  unicode-bidi: plaintext;
}

/* ---- 3) Episode number box: SMALL SQUARE, fixed size, always ---- */
.episode .episode-number-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 92px;
  min-width: 92px;
  max-width: 92px;
  aspect-ratio: 1 / 1;
  padding: 8px 6px;
  align-self: center;
  justify-self: center;
  border-radius: 12px;
  background: rgba(0,0,0,.25);
  direction: rtl;
}
.episode .episode-flags {
  position: static !important;
  transform: none !important;
  order: -1;
  display: flex;
  flex-wrap: nowrap;      /* badges stay side-by-side, never stack */
  justify-content: center;
  align-items: center;
  gap: 4px;
  max-width: 100%;
}
.episode .episode-flags .card-tag,
.episode .episode-flags .episode-new {
  flex: 0 1 auto;
  min-width: 0;
  padding-inline: 5px;
  font-size: 9px;
  white-space: nowrap;
}
.episode .episode-number-box > span { order: 0; margin: 0; font-size: 10px; }
.episode .episode-number-box > b { order: 1; font-size: 21px; }

/* ---- 4) Rating cards: compact, anchored right beside the title ---- */
.detail-page .detail-copy .hero-ratings {
  width: auto !important;
  max-width: 100%;
  display: flex !important;
  flex-direction: row;
  justify-content: flex-start;
  gap: 12px;
  margin: 22px 0 4px;
  direction: rtl;
}
.detail-page .detail-copy .hero-ratings a {
  width: auto;
  min-width: 86px;
  aspect-ratio: auto;
  padding: 11px 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 12px;
  transition: transform .18s ease;
}
.detail-page .detail-copy .hero-ratings a:hover { transform: translateY(-3px); }
.detail-page .detail-copy .hero-ratings b { order: 0; font-size: 12px; letter-spacing:.05em; }
.detail-page .detail-copy .hero-ratings span { order: 1; direction: ltr; unicode-bidi: plaintext; font-size: 20px; font-weight: 800; }

/* ============================================================
   FIX LAYER — light-theme gaps, focus visibility, font hardening
   ============================================================ */

/* 1) Light theme: readable cream accent + uncovered surfaces */
html.light { --cream:#8a6d4f; }
html.light .hero-kicker { color:#28554d; }
html.light .hero-stats span { background:rgba(255,255,255,.72); border-color:rgba(28,24,21,.16); color:#3b4653; }
html.light .hero-stats b { color:#1c1917; }
html.light .eyebrow { color:#fff; background:#28554d; }
html.light .primary-button { color:#fff; background:#28554d; }
html.light .primary-button:hover { background:#1e4038; transform:translateY(-3px); }
html.light .arrow { color:#3b4653; border-color:rgba(28,24,21,.25); background:rgba(255,255,255,.55); }
html.light .scroll-top { background:#fff; border-color:rgba(40,85,77,.5); color:#28554d; }
html.light .toast { background:#28554d; color:#fff; }
html.light .studio-header { background:rgba(236,232,226,.95); }
html.light .admin-form { background:#f9f6f2; }
html.light .admin-form label { color:#5a4a3a; }
html.light .admin-form input,
html.light .admin-form select { color:#1c1917; background:#fff; border-color:rgba(28,24,21,.18); }
html.light .admin-form input:focus,
html.light .admin-form select:focus { border-color:#28554d; box-shadow:0 0 0 4px rgba(40,85,77,.08); }
html.light .studio-note { background:#fff; }
html.light .studio-note p { color:#5e6773; }
html.light .form-note { color:#7c6f60; }
html.light .episode-drafts > p { color:#7c6f60; }
html.light .episode-drafts small { color:#5e6773; }
html.light .admin-work { background:#f9f6f2; }
html.light .admin-work p { color:#5e6773; }
html.light .admin-actions a,
html.light .admin-actions button { color:#4a4438; }
html.light .catalog-count { color:#28554d; }
html.light .section-heading h2:after { background:#28554d; }
html.light .relationship-label { text-shadow:0 2px 8px rgba(255,255,255,.9); }

/* 2) Keyboard focus visibility (was missing entirely) */
:focus-visible { outline:2px solid var(--cream); outline-offset:2px; border-radius:4px; }
html.light :focus-visible { outline-color:#28554d; }

/* 3) Font stacks hardened (bare "DM Sans"/Cairo got no fallback) */
.eyebrow, .mal-filter b, .studio-badge { font-family:"DM Sans", var(--font-latin), sans-serif; }
.search-input input, .select-label select { font-family:var(--font-ar), Tahoma, Arial, sans-serif; }
.search-chip { font-family:"DM Sans", var(--font-latin), Cairo, sans-serif; }

/* ============================================================
   4) Comments section
   ============================================================ */
.comments-section { padding-top:26px; padding-bottom:90px; }
.comment-form { display:grid; gap:11px; background:var(--surface); border:1px solid var(--line); border-radius:17px; padding:19px; }
.comment-row { display:flex; gap:10px; flex-wrap:wrap; }
.comment-row input { flex:1; min-width:180px; height:44px; padding:0 13px; color:#fff; background:#0d0d0f; border:1px solid var(--line); border-radius:10px; outline:0; font:500 14px var(--font-ar); }
.comment-row input:focus { border-color:var(--cream); }
.comment-form textarea { width:100%; resize:vertical; padding:12px 13px; color:#fff; background:#0d0d0f; border:1px solid var(--line); border-radius:11px; outline:0; font:500 14px/1.9 var(--font-ar); }
.comment-form textarea:focus { border-color:var(--cream); }
.comment-form .primary-button { padding:11px 18px; }
.comments-list { display:grid; gap:11px; margin-top:17px; }
.comment { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 17px; }
.comment header { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:7px; }
.comment b { color:var(--cream); font-size:13px; }
.comment time { color:var(--muted); font-size:11px; }
.comment p { margin:0; color:#c3ccd8; font-size:14px; line-height:2; overflow-wrap:anywhere; }
html.light .comment-form, html.light .comment { background:#f9f6f2; }
html.light .comment-row input, html.light .comment-form textarea { color:#1c1917; background:#fff; border-color:rgba(28,24,21,.18); }
html.light .comment p { color:#3b4653; }
html.light .comment b { color:#28554d; }

/* Studio: pending-comments manager */
.studio-comments { margin-top:26px; background:var(--surface); border:1px solid var(--line); border-radius:17px; padding:19px; }
.studio-comments h2 { font-size:18px; margin:0 0 12px; }
.studio-comment { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; padding:12px; border:1px solid var(--line); border-radius:11px; margin-bottom:9px; }
.studio-comment p { margin:4px 0 0; color:#b9c3d0; font-size:13px; line-height:1.9; overflow-wrap:anywhere; }
.studio-comment small { color:var(--muted); }
.studio-comment .admin-actions { flex:none; display:flex; gap:7px; }
html.light .studio-comments { background:#f9f6f2; }
html.light .studio-comment p { color:#3b4653; }

/* Studio: episode editor checkbox alignment */
.form-row .check-label { display:flex; align-items:center; gap:8px; cursor:pointer; padding-top:14px; font-weight:700; font-size:13px; color:#aeb9c8; }
.form-row .check-label input[type="checkbox"] { width:17px; height:17px; accent-color:#28554d; flex:none; }
html.light .form-row .check-label { color:#5a4a3a; }