:root{
  --bg:#e7eef6; --bg-soft:#f5f7fa; --surface:#ffffff; --surface-2:#eef4fb; --surface-3:#f8fbff;
  --text:#384959; --text-2:#6a89a7; --muted:#7f94a8; --line:#d2deeb; --line-2:#c4d4e4;
  --accent:#88bdf2; --accent-strong:#5ea5eb; --footer:#384959;
  --shadow:0 10px 30px rgba(56,73,89,.10); --shadow-soft:0 8px 22px rgba(56,73,89,.08);
  --maxw:1420px; --hero-card-w:150px; --hero-card-h:222px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;background:linear-gradient(180deg,#edf3f9 0%, #e7eef6 100%);color:var(--text);overflow-x:hidden}
a{color:inherit;text-decoration:none} button,input,select{font:inherit}
img{display:block;max-width:100%}.hidden{display:none!important}
.page{max-width:var(--maxw);margin:14px auto 30px;padding:0 10px}
.shell{background:var(--surface);border:1px solid var(--line);border-radius:30px;overflow:hidden;box-shadow:var(--shadow)}
.topbar{height:82px;display:grid;grid-template-columns:280px 1fr 190px;align-items:center;gap:18px;padding:0 26px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.92);backdrop-filter:blur(10px);position:relative}
.brand{display:flex;align-items:center;gap:14px;min-width:0}.brand-mark{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#27c0f4,#88bdf2);position:relative;box-shadow:0 8px 18px rgba(136,189,242,.35);flex-shrink:0}
.brand-mark::before{content:"";position:absolute;inset:11px 13px;border-radius:999px;background:#fff;transform:skewX(-18deg)}
.brand-title{font-size:20px;font-weight:900;color:#22374d;line-height:1.05;white-space:nowrap}
.brand-sub{margin-top:4px;font-size:11px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:#4f86ff}
.nav{display:flex;align-items:center;justify-content:center;gap:34px;min-width:0}
.nav a{position:relative;padding:8px 0 12px;font-size:15px;font-weight:800;color:#314760;white-space:nowrap}
.nav a.active::after,.nav a:hover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:999px;background:#4f9eff}
.top-actions{display:flex;justify-content:flex-end;gap:12px;align-items:center}
.icon-btn,.btn{min-height:50px;padding:0 20px;border-radius:14px;border:1px solid var(--line);background:#f1f5fa;color:#344a62;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:14px;font-weight:800;cursor:pointer;transition:.18s ease}
.icon-btn{width:48px;height:48px;min-height:48px;padding:0;border-radius:999px}
.icon-btn:hover,.btn:hover{background:#e7eef7;border-color:#b8cadc}.btn-primary{background:#72b2ef;color:#fff;border-color:transparent;box-shadow:0 10px 20px rgba(114,178,239,.24)} .btn-primary:hover{background:#5aa5ec;border-color:transparent}
.icon-btn svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.search-pop{position:absolute;top:86px;right:24px;width:min(480px,calc(100% - 40px));display:none;z-index:30}.search-pop.open{display:block}
.search-shell{position:relative;width:100%}.search-input-global{width:100%;height:58px;border-radius:16px;border:1px solid var(--line-2);outline:none;padding:0 18px;background:#fff;color:var(--text);font-size:15px;box-shadow:var(--shadow)}
.search-suggestions{margin-top:10px;background:#fff;border-radius:16px;border:1px solid var(--line);overflow:hidden;display:none;box-shadow:var(--shadow)} .search-suggestions.show{display:block}
.suggestion-item{display:block;padding:13px 16px;border-bottom:1px solid #edf2f7}.suggestion-item:last-child{border-bottom:none}.suggestion-item:hover{background:#f7fbff}
.suggestion-title{font-size:14px;font-weight:800;color:#2f4964}.suggestion-sub{margin-top:4px;font-size:12px;font-weight:700;color:#7a90a5}
.section{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-soft);overflow:hidden}.section-inner{padding:20px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.section-title{margin:0;display:flex;align-items:center;gap:12px;color:#243d59;font-size:24px;font-weight:900;letter-spacing:-.4px}
.section-title::before{content:"";width:4px;height:30px;border-radius:999px;background:#1f92ff}.section-note{font-size:14px;font-weight:700;color:var(--text-2)}
.eyebrow{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.96);color:#5b7590;font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase}
.title-xl{margin:14px 0 0;font-size:58px;line-height:1.02;letter-spacing:-1.4px;font-weight:900;color:#2d4764}.subtitle{margin-top:16px;max-width:760px;font-size:16px;line-height:1.7;color:#5d7690;font-weight:600}
.meta-row{display:flex;flex-wrap:wrap;gap:14px;font-size:15px;font-weight:800;color:#465f7b}.meta-row .dot{opacity:.55}
.chips{display:flex;flex-wrap:wrap;gap:10px}.chip,.card-tag{min-height:28px;padding:0 10px;border-radius:999px;background:#eef4fb;border:1px solid #d8e4f0;color:#5d7893;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;white-space:nowrap}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.stat-card{min-height:92px;border-radius:18px;background:#fff;border:1px solid #dfe8f1;box-shadow:var(--shadow-soft);padding:14px}
.stat-label{font-size:12px;line-height:1.3;font-weight:800;color:#7f94a8;text-transform:uppercase;letter-spacing:.5px}.stat-value{margin-top:10px;font-size:22px;line-height:1.2;font-weight:900;color:#334d67}
.field{display:grid;gap:8px}.field label{font-size:12px;line-height:1.2;font-weight:800;color:#7f94a8;text-transform:uppercase;letter-spacing:.5px}
.input,.select{width:100%;height:50px;border-radius:14px;border:1px solid #d8e3ee;background:var(--surface-3);color:#334d67;padding:0 14px;outline:none;font-size:15px;font-weight:700}
.input:focus,.select:focus{border-color:#9cc4ef;background:#fff}
.card-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.poster-card,.actor-card,.trailer-card{background:#f8fbff;border:1px solid #e0e9f2;border-radius:18px;overflow:hidden;box-shadow:0 6px 14px rgba(56,73,89,.05);transition:.18s ease}
.poster-card:hover,.actor-card:hover,.trailer-card:hover,.cast-card:hover,.work-card:hover{transform:translateY(-2px);box-shadow:0 10px 18px rgba(56,73,89,.08)}
.poster{aspect-ratio:2/3;background:#dfe7f1;overflow:hidden}.poster img{width:100%;height:100%;object-fit:cover}
.card-body{padding:12px 12px 14px}.card-title{font-size:15px;line-height:1.35;font-weight:800;color:#2f4964;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:40px}
.card-meta{margin-top:8px;font-size:13px;line-height:1.5;font-weight:700;color:#6b839b}.card-tags{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
.results-footer{display:flex;align-items:center;justify-content:center;padding-top:18px}.empty{padding:14px 0 4px;color:#5e7690;font-size:14px;font-weight:700}
.footer{background:var(--footer);color:#fff;margin-top:18px;border:none;box-shadow:none;border-radius:26px;overflow:hidden}.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr 1fr;gap:30px;padding:22px 20px 24px}
.footer-brand-title{font-size:22px;font-weight:900;margin:0 0 14px}.footer-copy{font-size:15px;line-height:1.7;color:rgba(255,255,255,.78);max-width:280px}
.footer-col h4{margin:0 0 14px;font-size:18px;font-weight:900}.footer-col a{display:block;margin-bottom:11px;color:rgba(255,255,255,.78);font-size:15px;line-height:1.4}
.footer-col a:hover{color:#fff}
.video-modal{position:fixed;inset:0;background:rgba(13,20,27,.48);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:24px;z-index:100}.video-modal.open{display:flex}
.video-frame{position:relative;width:min(1100px,100%);aspect-ratio:16/9;background:#000;border-radius:22px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.18)} .video-frame iframe{width:100%;height:100%;border:none}
.video-close{position:absolute;top:12px;right:12px;width:42px;height:42px;border:none;border-radius:999px;background:rgba(0,0,0,.58);color:#fff;cursor:pointer;font-size:20px;z-index:2}
.hero-home{position:relative;min-height:705px;overflow:hidden;background:#dce7f2}.hero-backdrop-home{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat}
.hero-backdrop-home::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(231,238,246,.94) 0%, rgba(231,238,246,.90) 24%, rgba(231,238,246,.62) 42%, rgba(231,238,246,.16) 62%, rgba(231,238,246,.08) 100%)}
.hero-inner-home{position:relative;z-index:2;min-height:705px;padding:28px 26px 28px;display:flex;flex-direction:column}.hero-main-home{flex:1;display:grid;grid-template-columns:minmax(320px,470px) 1fr;align-items:flex-start;gap:20px;padding:24px 0 0}
.hero-copy-home{padding:16px 0 0 14px}.hero-title-home{margin:0;font-size:84px;line-height:.98;letter-spacing:-2px;font-weight:900;color:#2d4764}.hero-desc-home{margin-top:20px;max-width:460px;font-size:16px;line-height:1.65;color:#5d7690;font-weight:600}
.hero-actions-home{margin-top:24px;display:flex;gap:14px;flex-wrap:wrap}.hero-right-space{min-height:260px}
.hero-strip-area{position:relative;margin-top:auto;padding:0 52px 8px}.hero-arrow{position:absolute;top:46%;transform:translateY(-50%);width:56px;height:56px;border-radius:999px;border:1px solid #d7e0ea;background:rgba(255,255,255,.72);color:#5a7188;display:flex;align-items:center;justify-content:center;font-size:34px;cursor:pointer;box-shadow:0 6px 14px rgba(56,73,89,.08);z-index:3}
.hero-arrow.left{left:0}.hero-arrow.right{right:0}.hero-strip-wrap{overflow:hidden}.hero-strip{display:flex;gap:18px;transition:transform .32s ease;will-change:transform;align-items:flex-end}
.hero-card{width:var(--hero-card-w);min-width:var(--hero-card-w);height:var(--hero-card-h);border-radius:18px;overflow:hidden;position:relative;border:1px solid rgba(255,255,255,.72);box-shadow:0 14px 22px rgba(56,73,89,.12);background:#dfe7f1}
.hero-card.active{transform:translateY(-3px);box-shadow:0 18px 26px rgba(56,73,89,.16);border-color:#a9c4e4}.hero-card img{width:100%;height:100%;object-fit:cover}
.hero-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(13,21,29,0) 32%, rgba(13,21,29,.74) 100%)} .hero-card-text{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;color:#fff}
.hero-card-title{font-size:14px;line-height:1.2;font-weight:800;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.hero-card-meta{margin-top:8px;font-size:12px;line-height:1.2;font-weight:700;color:rgba(255,255,255,.92);display:flex;gap:8px;flex-wrap:wrap}
.section-colored.trailers{background:#6A89A7}.section-colored.actors{background:#BDDDFC}.section-colored.genres{background:#88BDF2}
.trailer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.trailer-thumb{position:relative;aspect-ratio:16/9;background:#dfe7f1;overflow:hidden}.trailer-thumb img{width:100%;height:100%;object-fit:cover}
.play-badge{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.play-circle{width:58px;height:58px;border-radius:999px;background:rgba(74,97,122,.62);border:1px solid rgba(255,255,255,.58);display:flex;align-items:center;justify-content:center}
.play-circle svg{width:23px;height:23px;fill:#fff;transform:translateX(2px)} .trailer-body{padding:14px 14px 16px;color:#344d66;min-height:80px;background:#f8fbff}.trailer-title{font-size:15px;font-weight:800;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.trailer-sub{margin-top:8px;font-size:13px;color:#6a89a7;font-weight:700}
.actors-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px}.home-actor-card{background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.8);border-radius:16px;padding:14px 10px 16px;text-align:center;box-shadow:0 8px 18px rgba(56,73,89,.05)} .home-actor-photo{width:88px;height:88px;border-radius:999px;overflow:hidden;margin:0 auto 12px;border:3px solid rgba(255,255,255,.92);background:#fff}.home-actor-photo img{width:100%;height:100%;object-fit:cover}
.genre-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px}.genre-chip-home{min-height:72px;border-radius:16px;border:1px solid rgba(255,255,255,.72);background:rgba(255,255,255,.84);color:#38506a;display:flex;align-items:center;justify-content:center;gap:10px;font-size:14px;font-weight:800;text-align:center;padding:10px}.genre-chip-home span{white-space:nowrap}
.page-hero{padding:26px;background:linear-gradient(180deg,#f7faff 0%, #eef4fb 100%);border-bottom:1px solid var(--line)} .page-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:end}
.filters-grid-6{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr;gap:14px}
.actor-photo{width:120px;height:120px;border-radius:999px;overflow:hidden;background:#dfe7f1;margin:0 auto 14px;border:3px solid #fff;box-shadow:0 6px 12px rgba(56,73,89,.10)} .actor-photo img{width:100%;height:100%;object-fit:cover}
.actor-card{text-align:center;padding:16px 14px 18px}.actor-name{font-size:16px;line-height:1.35;font-weight:800;color:#2f4964;min-height:44px}.actor-meta{margin-top:8px;font-size:13px;line-height:1.5;font-weight:700;color:#6b839b}
.hero-detail{position:relative;min-height:520px;overflow:hidden;background:#dce7f2}.hero-backdrop-detail{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat}.hero-backdrop-detail::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(231,238,246,.95) 0%, rgba(231,238,246,.92) 24%, rgba(231,238,246,.72) 46%, rgba(231,238,246,.20) 68%, rgba(231,238,246,.08) 100%)}
.hero-inner-detail{position:relative;z-index:2;min-height:520px;display:grid;grid-template-columns:320px minmax(0,1fr);gap:28px;align-items:end;padding:28px 26px 26px}
.poster-card-detail,.photo-card-detail{height:460px;border-radius:22px;overflow:hidden;background:#dfe7f1;border:1px solid rgba(255,255,255,.72);box-shadow:0 14px 22px rgba(56,73,89,.12)} .photo-card-detail{height:440px}
.poster-card-detail img,.photo-card-detail img{width:100%;height:100%;object-fit:cover}.hero-copy-detail{padding-bottom:8px;max-width:760px}.title-detail{margin:14px 0 0;font-size:64px;line-height:1.02;letter-spacing:-1.6px;font-weight:900;color:#2d4764}.summary{margin-top:18px;max-width:760px;font-size:16px;line-height:1.7;color:#5d7690;font-weight:600}
.facts-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.fact-card{min-height:96px;border-radius:18px;background:#f8fbff;border:1px solid #e0e9f2;padding:14px}.fact-label{font-size:12px;line-height:1.3;font-weight:800;color:#7f94a8;text-transform:uppercase;letter-spacing:.5px}.fact-value{margin-top:10px;font-size:16px;line-height:1.45;font-weight:800;color:#334d67}
.cast-grid,.works-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.cast-card,.work-card{background:#f8fbff;border:1px solid #e0e9f2;border-radius:18px;padding:14px;box-shadow:0 6px 14px rgba(56,73,89,.05)} .work-card{padding:0;overflow:hidden}
.cast-photo{width:88px;height:88px;border-radius:999px;overflow:hidden;margin:0 auto 12px;background:#dfe7f1;border:3px solid #fff}.cast-photo img{width:100%;height:100%;object-fit:cover}.cast-name{display:block;text-align:center;font-size:15px;line-height:1.3;font-weight:800;color:#2f4964}.cast-role{margin-top:6px;text-align:center;font-size:13px;line-height:1.5;font-weight:700;color:#6b839b}
.work-poster{aspect-ratio:2/3;background:#dfe7f1;overflow:hidden}.work-poster img{width:100%;height:100%;object-fit:cover}.work-body{padding:12px 12px 14px}.work-title{font-size:15px;line-height:1.35;font-weight:800;color:#2f4964;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.work-meta,.story,.bio{font-size:16px;line-height:1.8;color:#536d87;font-weight:600}.work-meta{font-size:13px;line-height:1.5;font-weight:700;color:#6b839b}
@media (max-width:1280px){.actors-row,.genre-row{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1200px){.card-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.facts-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.cast-grid,.works-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:980px){
  .topbar{grid-template-columns:1fr auto;height:auto;padding:18px}.nav{display:none}.page{padding:0 8px}.stats{grid-template-columns:1fr}.card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-home,.hero-inner-home{min-height:760px}.hero-main-home{grid-template-columns:1fr}.hero-title-home{font-size:56px}.hero-right-space{display:none}
  .trailer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.actors-row,.genre-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .page-hero-grid{grid-template-columns:1fr}.filters-grid-6{grid-template-columns:1fr 1fr}
  .hero-inner-detail{grid-template-columns:1fr;gap:20px}.title-detail{font-size:48px}.poster-card-detail,.photo-card-detail{width:320px;max-width:100%;height:420px}.facts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cast-grid,.works-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .topbar{padding:16px}.footer-grid{grid-template-columns:1fr}.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.title-xl{font-size:38px}
  .hero-home,.hero-inner-home{min-height:720px}.hero-title-home{font-size:48px}.hero-strip-area{padding:0 44px 8px}.trailer-grid{grid-template-columns:1fr}.actors-row,.genre-row{grid-template-columns:repeat(2,minmax(0,1fr))}.genre-chip-home span{white-space:normal}
  .filters-grid-6{grid-template-columns:1fr}.actor-photo{width:100px;height:100px}.hero-inner-detail{padding:18px}.title-detail{font-size:38px}.facts-grid{grid-template-columns:1fr}.cast-grid,.works-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* === HERO DESIGN FROM USER REFERENCE === */
.shell{background:var(--surface);border:1px solid var(--line);border-radius:30px;overflow:hidden;box-shadow:var(--shadow)}
.hero-home{position:relative;min-height:705px;overflow:hidden;background:#dce7f2}
.hero-backdrop-home{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;filter:none;transform:none}
.hero-backdrop-home::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(231,238,246,.94) 0%,rgba(231,238,246,.90) 24%,rgba(231,238,246,.62) 42%,rgba(231,238,246,.16) 62%,rgba(231,238,246,.08) 100%),linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 100%);backdrop-filter:saturate(.98)}
.hero-inner-home{position:relative;z-index:2;min-height:705px;padding:28px 26px 28px;display:flex;flex-direction:column}
.hero-main-home{flex:1;display:grid;grid-template-columns:minmax(320px,470px) 1fr;align-items:flex-start;gap:20px;padding:24px 0 0}
.hero-copy-home{padding:16px 0 0 14px;max-width:none}.hero-title-home{margin:0;font-size:84px;line-height:.98;letter-spacing:-2px;font-weight:900;color:#2d4764;max-width:470px;overflow-wrap:normal}
.hero-copy-home .meta-row,.hero-main-home .meta-row{margin-top:22px;display:flex;flex-wrap:wrap;gap:14px;font-size:18px;font-weight:800;color:#465f7b;line-height:1.35}.meta-row .dot{opacity:.55}
.hero-desc-home{margin-top:20px;max-width:460px;font-size:16px;line-height:1.65;color:#5d7690;font-weight:600;display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.hero-actions-home{display:none}.hero-right-space{min-height:260px}
.hero-strip-area{position:relative;margin-top:auto;padding:0 52px 8px 90px}.hero-arrow{position:absolute;top:46%;transform:translateY(-50%);width:56px;height:56px;border-radius:999px;border:1px solid #d7e0ea;background:rgba(255,255,255,.72);color:#5a7188;display:flex;align-items:center;justify-content:center;font-size:34px;cursor:pointer;box-shadow:0 6px 14px rgba(56,73,89,.08);z-index:3;transition:.18s ease}.hero-arrow:hover{background:#fff;color:#3d546c}.hero-arrow.left{left:0}.hero-arrow.right{right:0}
.hero-strip-wrap{overflow:hidden}.hero-strip{display:flex;gap:18px;transition:transform .32s ease;will-change:transform;align-items:flex-end}
.hero-card{width:var(--hero-card-w);min-width:var(--hero-card-w);height:var(--hero-card-h);aspect-ratio:auto;border-radius:18px;overflow:hidden;position:relative;border:1px solid rgba(255,255,255,.72);box-shadow:0 14px 22px rgba(56,73,89,.12);transition:.18s ease;background:#dfe7f1;transform:none}.hero-card.active{transform:translateY(-3px);box-shadow:0 18px 26px rgba(56,73,89,.16);border-color:#a9c4e4}.hero-card img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block}.hero-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(13,21,29,0) 32%,rgba(13,21,29,.74) 100%)}
.hero-card-text{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;color:#fff}.hero-card-title{font-size:14px;line-height:1.2;font-weight:800;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 2px 8px rgba(0,0,0,.34)}.hero-card-meta{margin-top:8px;font-size:12px;line-height:1.2;font-weight:700;color:rgba(255,255,255,.92);display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:1280px){.hero-home,.hero-inner-home{min-height:720px}.hero-title-home{font-size:72px}}
@media (max-width:980px){.hero-home,.hero-inner-home{min-height:760px}.hero-inner-home{padding:18px 18px 24px}.hero-main-home{grid-template-columns:1fr}.hero-copy-home{padding:6px 0 0 8px}.hero-title-home{font-size:56px;max-width:100%}.hero-right-space{display:none}}
@media (max-width:680px){.hero-home,.hero-inner-home{min-height:720px}.hero-title-home{font-size:48px}.hero-copy-home .meta-row,.hero-main-home .meta-row{font-size:15px}.hero-strip-area{padding:0 44px 8px}.hero-arrow{width:48px;height:48px}}

/* --- Quick Fix 3: cleaner genre cards + real search page --- */
.section-colored.genres .section-title{
  background:transparent!important;
  color:#243d59!important;
  padding:0!important;
  line-height:1.2;
}
.genre-row{grid-template-columns:repeat(7,minmax(0,1fr));align-items:stretch;}
.genre-chip-home{min-height:82px;padding:14px 12px;justify-content:center;gap:10px;overflow:hidden;}
.genre-chip-home svg{width:30px!important;height:30px!important;min-width:30px!important;flex:0 0 30px!important;stroke:currentColor;stroke-width:2.2;}
.genre-chip-home span{min-width:0;max-width:100%;white-space:normal!important;overflow:hidden;text-overflow:ellipsis;line-height:1.25;}
.search-panel{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr auto;gap:12px;align-items:end;}
.search-results-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:20px 0 14px;}
.search-result-count{font-size:14px;font-weight:800;color:#6a89a7;}
.search-page-tabs{display:flex;gap:10px;flex-wrap:wrap;}
.tab-btn{min-height:38px;padding:0 14px;border-radius:999px;border:1px solid #d8e3ee;background:#f8fbff;color:#38506a;font-size:13px;font-weight:900;cursor:pointer;}
.tab-btn.active{background:#72b2ef;color:#fff;border-color:#72b2ef;}
@media (max-width:1180px){.genre-row{grid-template-columns:repeat(4,minmax(0,1fr));}.search-panel{grid-template-columns:1fr 1fr 1fr;}}
@media (max-width:720px){.genre-row{grid-template-columns:repeat(2,minmax(0,1fr));}.search-panel{grid-template-columns:1fr;}.search-results-head{align-items:flex-start;flex-direction:column;}}


/* === Concept A Safe Theme Upgrade (visual only, JS untouched) === */
:root{
  --bg:#edf4fb;
  --bg-soft:#f7fbff;
  --surface:#ffffff;
  --surface-2:#f4f8fd;
  --surface-3:#f8fbff;
  --text:#203654;
  --text-2:#587392;
  --muted:#7e92a7;
  --line:#d8e4f1;
  --line-2:#c7d8eb;
  --accent:#2f8cff;
  --accent-strong:#2478f0;
  --accent-soft:#e9f3ff;
  --footer:#f3f8fe;
  --shadow:0 14px 34px rgba(37,68,109,.10);
  --shadow-soft:0 8px 20px rgba(37,68,109,.08);
  --hero-card-w:154px;
  --hero-card-h:144px;
}
body{
  background:radial-gradient(circle at top left,#f8fbff 0%,#edf4fb 42%,#e8f1fb 100%);
  color:var(--text);
}
.page{max-width:1470px;padding:0 14px;margin:14px auto 28px;}
.shell,.section,.footer{
  border-radius:26px;
}
.shell{
  border-color:var(--line);
  box-shadow:var(--shadow);
}
.topbar{
  height:74px;
  grid-template-columns:280px 1fr 120px;
  padding:0 22px;
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(216,228,241,.92);
}
.brand-mark{
  width:40px;height:40px;border-radius:12px;
  background:linear-gradient(135deg,#60a5fa,#2563eb);
  box-shadow:0 8px 18px rgba(47,140,255,.22);
}
.brand-title{font-size:18px;color:#1f4b8f;}
.brand-sub{display:none;}
.nav{gap:30px;}
.nav a{font-size:15px;font-weight:800;color:#284365;padding:8px 0 10px;}
.nav a.active,.nav a:hover{color:var(--accent);} 
.nav a.active::after,.nav a:hover::after{height:3px;background:var(--accent);bottom:-1px;}
.icon-btn{
  width:42px;height:42px;min-height:42px;
  background:#fff;
  border:1px solid var(--line);
  color:#2c4670;
  box-shadow:0 4px 12px rgba(37,68,109,.06);
}
.icon-btn:hover{background:#f6faff;border-color:#c8daed;}
.top-actions{gap:10px;}
.search-pop{top:76px;right:10px;}
.search-input-global{height:54px;border-radius:15px;}
.section{
  background:#fff;
  border-color:var(--line);
  box-shadow:var(--shadow-soft);
}
.section-colored.trailers,.section-colored.actors,.section-colored.genres{background:#fff;}
.section-inner{padding:18px 22px 20px;}
.section-head{margin-bottom:16px;}
.section-title{
  font-size:18px;
  color:#244774;
  gap:10px;
}
.section-title::before{height:24px;background:var(--accent);}
.section-head .btn{
  min-height:auto;height:auto;padding:0;
  border:none;background:transparent;box-shadow:none;
  color:var(--accent);font-size:14px;font-weight:900;
}
.section-head .btn:hover{background:transparent;border:none;color:var(--accent-strong);transform:none;}
.hero-home{
  min-height:470px;
  background:#214d86;
  border-radius:22px;
}
.hero-backdrop-home{
  background-position:center right;
}
.hero-backdrop-home::after{
  background:
    linear-gradient(90deg,rgba(25,69,126,.92) 0%,rgba(34,85,153,.86) 32%,rgba(60,118,187,.48) 58%,rgba(85,138,201,.10) 76%,rgba(255,255,255,0) 100%),
    linear-gradient(180deg,rgba(9,27,55,.10) 0%,rgba(9,27,55,.16) 100%);
}
.hero-inner-home{
  min-height:470px;
  padding:18px 18px 16px;
}
.hero-main-home{
  grid-template-columns:minmax(360px,500px) 1fr;
  gap:22px;
  padding:12px 0 0;
}
.hero-copy-home{padding:14px 0 0 18px;}
.hero-title-home{
  max-width:520px;
  font-family:Georgia, 'Times New Roman', serif;
  font-size:66px;
  line-height:1.02;
  letter-spacing:-1.2px;
  color:#fff;
  text-shadow:0 2px 20px rgba(0,0,0,.12);
}
.hero-copy-home .eyebrow{background:#3d8af4;color:#fff;border:none;min-height:30px;padding:0 12px;font-size:11px;}
.hero-copy-home .meta-row,.hero-main-home .meta-row{
  margin-top:16px;
  gap:12px;
  font-size:16px;
  color:rgba(255,255,255,.88);
}
.hero-desc-home{
  margin-top:16px;
  max-width:480px;
  color:rgba(255,255,255,.90);
  font-size:15px;
  line-height:1.6;
  -webkit-line-clamp:3;
  line-clamp:3;
}
.hero-actions-home{display:flex;margin-top:22px;gap:12px;}
.hero-actions-home .btn{min-height:46px;border-radius:999px;padding:0 20px;font-size:15px;}
.hero-actions-home .btn-primary{background:var(--accent);color:#fff;box-shadow:0 10px 22px rgba(47,140,255,.28);}
.hero-actions-home .btn-primary:hover{background:var(--accent-strong);}
.hero-actions-home .btn:not(.btn-primary){background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55);}
.hero-actions-home .btn:not(.btn-primary):hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.74);}
.hero-right-space{min-height:180px;}
.hero-strip-area{padding:0 50px 0 18px;margin-top:auto;}
.hero-arrow{
  top:50%;
  width:48px;height:48px;font-size:28px;
  border-color:rgba(209,224,241,.82);
  background:rgba(255,255,255,.94);
  color:#2b4a73;
}
.hero-card{
  width:var(--hero-card-w);min-width:var(--hero-card-w);height:var(--hero-card-h);
  border-radius:16px;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 8px 18px rgba(14,34,58,.20);
}
.hero-card.active{transform:none;border-color:#6eb5ff;box-shadow:0 0 0 2px rgba(110,181,255,.25),0 10px 20px rgba(14,34,58,.22);}
.hero-card-text{left:10px;right:10px;bottom:10px;}
.hero-card-title{font-size:13px;line-height:1.2;}
.hero-card-meta{font-size:11px;gap:6px;}
.trailer-grid{gap:14px;}
.trailer-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:none;
}
.trailer-card:hover,.home-actor-card:hover,.genre-chip-home:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft);}
.trailer-thumb{border-bottom:1px solid #edf3fb;}
.trailer-body{padding:12px 12px 14px;background:#fff;}
.trailer-title{font-size:15px;color:#29466f;}
.trailer-sub{font-size:12px;color:#7990a8;}
.play-circle{width:54px;height:54px;background:rgba(28,52,82,.40);}
.actors-row{gap:12px;}
.home-actor-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 10px 12px;
  text-align:center;
  box-shadow:none;
}
.home-actor-photo{
  width:72px;height:72px;
  border:2px solid #edf4fb;
  box-shadow:none;
  margin:0 auto 10px;
}
.actor-name{font-size:14px;min-height:36px;color:#28476f;}
.actor-meta{font-size:12px;color:#7a90a6;margin-top:4px;}
.genre-row{gap:12px;}
.genre-chip-home{
  min-height:84px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  color:#3463c9;
  box-shadow:none;
  flex-direction:column;
  gap:8px;
  padding:12px 10px;
}
.genre-chip-home svg{width:34px!important;height:34px!important;min-width:34px!important;stroke:currentColor;}
.genre-chip-home span{
  font-size:13px;
  font-weight:800;
  line-height:1.25;
  color:#2a4c7f;
}
.genre-chip-home:nth-child(7){border-color:#f0bfd2;color:#ef6e9f;background:#fff8fb;}
.genre-chip-home:nth-child(7) span{color:#ef6e9f;}
.footer{
  background:linear-gradient(180deg,#f5f9fe 0%,#eef5fd 100%);
  color:#28476f;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}
.footer-copy,.footer-col a{color:#6f87a2;}
.footer-col a:hover{color:#28476f;}
.footer-grid{padding:18px 22px 20px;gap:24px;}
.footer-brand-title,.footer-col h4{color:#244774;}
.video-close{background:rgba(9,19,33,.70);}
@media (max-width:1280px){
  .hero-title-home{font-size:58px;}
  .hero-home,.hero-inner-home{min-height:500px;}
}
@media (max-width:980px){
  .topbar{grid-template-columns:1fr auto;padding:16px;height:auto;}
  .hero-home,.hero-inner-home{min-height:580px;}
  .hero-main-home{grid-template-columns:1fr;}
  .hero-title-home{max-width:100%;font-size:48px;}
  .hero-copy-home{padding:12px 10px 0;}
  .hero-strip-area{padding:0 44px 0 8px;}
}
@media (max-width:680px){
  .page{padding:0 8px;}
  .hero-home,.hero-inner-home{min-height:600px;}
  .hero-title-home{font-size:40px;}
  .hero-copy-home .meta-row,.hero-main-home .meta-row{font-size:14px;}
  .hero-actions-home{gap:10px;flex-wrap:wrap;}
  .hero-actions-home .btn{min-height:42px;font-size:14px;}
  .hero-card{width:130px;min-width:130px;height:128px;}
  .home-actor-photo{width:66px;height:66px;}
}


/* === Genre + logo final safe fix === */
.brand-link{cursor:pointer;text-decoration:none;color:inherit;}
.brand-link:hover .brand-title{color:var(--accent);}
.footer-brand-title a{color:inherit;text-decoration:none;}
.footer-brand-title a:hover{color:var(--accent);}
.section-colored.genres{
  background:#fff!important;
  border:1px solid var(--line)!important;
  box-shadow:var(--shadow-soft)!important;
}
.section-colored.genres .section-inner{padding:18px 22px 18px!important;}
.section-colored.genres .section-head{margin-bottom:14px!important;}
.section-colored.genres .section-head .btn{display:none!important;}
.section-colored.genres .section-title{
  background:transparent!important;
  color:#244774!important;
  padding:0!important;
  font-size:18px!important;
  line-height:1.2!important;
  letter-spacing:0!important;
}
.section-colored.genres .section-title::before{
  width:4px!important;
  height:24px!important;
  background:var(--accent)!important;
  border-radius:999px!important;
}
.genre-row{
  display:grid!important;
  grid-template-columns:repeat(8,minmax(0,1fr))!important;
  gap:14px!important;
  align-items:stretch!important;
}
.genre-chip-home{
  min-height:96px!important;
  border-radius:16px!important;
  background:#fff!important;
  border:1px solid #dbe8f6!important;
  box-shadow:none!important;
  color:#2f8cff!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  padding:14px 10px!important;
  text-align:center!important;
  overflow:hidden!important;
}
.genre-chip-home:hover{
  transform:translateY(-2px)!important;
  border-color:#acd2ff!important;
  box-shadow:0 10px 20px rgba(37,68,109,.08)!important;
}
.genre-chip-home svg{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  flex:0 0 36px!important;
  stroke:currentColor!important;
  fill:none!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.genre-chip-home span{
  display:block!important;
  width:100%!important;
  color:#244774!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1.2!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
.genre-chip-home:nth-child(7){
  color:#2f8cff!important;
  background:#fff!important;
  border-color:#dbe8f6!important;
}
.genre-chip-home:nth-child(7) span{color:#244774!important;}
@media (max-width:1280px){.genre-row{grid-template-columns:repeat(4,minmax(0,1fr))!important;}}
@media (max-width:720px){.genre-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;}.genre-chip-home{min-height:92px!important;}}


/* Tiny safe tweak: show one more hero card on desktop */
@media (min-width:981px){
  .hero-strip{gap:14px;}
  .hero-strip-area{padding-right:42px;}
}


/* === Hero alignment polish: 8 cards centered + safer visuals === */
@media (min-width:981px){
  .hero-strip-area{
    padding-left:58px!important;
    padding-right:58px!important;
  }
  .hero-strip-wrap{
    width:100%!important;
    overflow:hidden!important;
  }
  .hero-strip{
    width:100%!important;
    justify-content:center!important;
    gap:12px!important;
  }
  .hero-card{
    flex:0 1 calc((100% - 84px) / 8)!important;
    width:calc((100% - 84px) / 8)!important;
    min-width:0!important;
    max-width:154px!important;
    height:136px!important;
  }
  .hero-arrow.left{left:16px!important;}
  .hero-arrow.right{right:16px!important;}
}
.hero-card.no-image,
.hero-card-fallback{
  background:linear-gradient(180deg,#edf5fd 0%,#c9d9eb 52%,#6f8299 100%)!important;
}
.hero-card.no-image::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.55),transparent 36%);
  z-index:0;
}
.hero-card.no-image .hero-card-text{z-index:2;}
.hero-desc-home{overflow-wrap:break-word;}
@media (max-width:1280px) and (min-width:981px){
  .hero-title-home{font-size:60px!important;}
  .hero-card-title{font-size:12.5px!important;}
  .hero-card-meta{font-size:10.5px!important;}
}

/* === Final safe fix: keep hero size stable across random refreshes === */
@media (min-width:981px){
  .hero-home{
    height:560px!important;
    min-height:560px!important;
    max-height:560px!important;
  }
  .hero-inner-home{
    height:560px!important;
    min-height:560px!important;
    max-height:560px!important;
  }
  .hero-main-home{
    min-height:328px!important;
    max-height:328px!important;
    overflow:hidden!important;
  }
  .hero-copy-home{
    max-height:322px!important;
    overflow:hidden!important;
  }
  .hero-title-home{
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
    max-height:136px!important;
  }
  .hero-desc-home{
    display:-webkit-box!important;
    -webkit-line-clamp:3!important;
    line-clamp:3!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
    max-height:74px!important;
  }
  .hero-strip-area{
    height:146px!important;
    min-height:146px!important;
    max-height:146px!important;
    overflow:hidden!important;
  }
  .hero-strip-wrap{
    height:140px!important;
  }
  .hero-backdrop-home{
    height:100%!important;
    min-height:100%!important;
  }
}
@media (max-width:980px) and (min-width:681px){
  .hero-home{
    height:620px!important;
    min-height:620px!important;
    max-height:620px!important;
  }
  .hero-inner-home{
    height:620px!important;
    min-height:620px!important;
    max-height:620px!important;
  }
  .hero-main-home{
    min-height:378px!important;
    max-height:378px!important;
    overflow:hidden!important;
  }
  .hero-title-home{
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }
  .hero-desc-home{
    display:-webkit-box!important;
    -webkit-line-clamp:3!important;
    line-clamp:3!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }
  .hero-strip-area{
    height:150px!important;
    min-height:150px!important;
    max-height:150px!important;
    overflow:hidden!important;
  }
}
@media (max-width:680px){
  .hero-home{
    height:680px!important;
    min-height:680px!important;
    max-height:680px!important;
  }
  .hero-inner-home{
    height:680px!important;
    min-height:680px!important;
    max-height:680px!important;
  }
  .hero-main-home{
    min-height:420px!important;
    max-height:420px!important;
    overflow:hidden!important;
  }
  .hero-title-home{
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }
  .hero-desc-home{
    display:-webkit-box!important;
    -webkit-line-clamp:3!important;
    line-clamp:3!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }
  .hero-strip-area{
    height:142px!important;
    min-height:142px!important;
    max-height:142px!important;
    overflow:hidden!important;
  }
}


/* === Hero detail button consistency fix === */
.hero-desc-home + .hero-actions-home,
.hero-actions-home{
  display:flex !important;
  align-items:center;
  justify-content:flex-start;
  margin-top:12px !important;
  gap:10px;
  min-height:40px;
}
#heroDetailBtn{
  display:inline-flex !important;
  min-height:38px !important;
  height:38px;
  padding:0 16px !important;
  border-radius:999px !important;
  font-size:13px !important;
  line-height:1;
  font-weight:900;
  white-space:nowrap;
  width:auto;
  flex:0 0 auto;
}
#heroTrailerBtn{
  min-height:38px !important;
  height:38px;
  padding:0 15px !important;
  border-radius:999px !important;
  font-size:13px !important;
  line-height:1;
  font-weight:900;
  white-space:nowrap;
  width:auto;
  flex:0 0 auto;
}
#heroTrailerBtn.hidden{display:none !important;}
@media (max-width:680px){
  .hero-actions-home{margin-top:10px !important;}
  #heroDetailBtn,#heroTrailerBtn{height:36px;min-height:36px !important;font-size:12px !important;padding:0 14px !important;}
}


/* === Clean hero layout with auto-shrinking title (no ellipsis on title) === */
.hero-home{
  height:560px !important;
  min-height:560px !important;
  max-height:560px !important;
  overflow:hidden !important;
  border-radius:22px !important;
}
.hero-inner-home{
  height:560px !important;
  min-height:560px !important;
  max-height:560px !important;
  padding:18px !important;
  display:grid !important;
  grid-template-rows:minmax(0,1fr) 154px !important;
  gap:12px !important;
  overflow:hidden !important;
}
.hero-main-home{
  min-height:0 !important;
  height:auto !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns:minmax(360px,520px) 1fr !important;
  align-items:start !important;
  gap:20px !important;
  overflow:hidden !important;
}
.hero-copy-home{
  min-height:0 !important;
  max-height:100% !important;
  padding:22px 0 0 18px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  overflow:visible !important;
}
.hero-title-home{
  margin:8px 0 0 !important;
  max-width:520px !important;
  font-size:64px !important;
  line-height:.98 !important;
  letter-spacing:-1.1px !important;
  color:#fff !important;
  white-space:normal !important;
  overflow:visible !important;
  display:block !important;
  -webkit-line-clamp:unset !important;
  line-clamp:unset !important;
  -webkit-box-orient:unset !important;
  word-break:normal !important;
  overflow-wrap:break-word !important;
}
.hero-title-home.is-long{font-size:56px !important;line-height:1 !important;}
.hero-title-home.is-xlong{font-size:48px !important;line-height:1.02 !important;letter-spacing:-.6px !important;}
.hero-title-home.is-xxlong{font-size:40px !important;line-height:1.06 !important;letter-spacing:-.3px !important;}
.hero-copy-home .meta-row,
.hero-main-home .meta-row{
  margin-top:12px !important;
  font-size:15px !important;
  line-height:1.25 !important;
  flex-shrink:0 !important;
}
.hero-desc-home{
  margin-top:12px !important;
  max-width:500px !important;
  font-size:15px !important;
  line-height:1.55 !important;
  color:rgba(255,255,255,.92) !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  flex-shrink:0 !important;
}
.hero-actions-home{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  margin-top:14px !important;
  min-height:38px !important;
  flex-shrink:0 !important;
  position:relative !important;
  z-index:5 !important;
}
#heroDetailBtn,#heroTrailerBtn{
  height:38px !important;
  min-height:38px !important;
  padding:0 16px !important;
  border-radius:999px !important;
  font-size:13px !important;
  line-height:1 !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}
#heroTrailerBtn.hidden{display:none !important;}
.hero-right-space{min-height:0 !important;}
.hero-strip-area{
  min-height:154px !important;
  height:154px !important;
  max-height:154px !important;
  padding:8px 48px 0 18px !important;
  margin:0 !important;
  align-self:end !important;
  overflow:hidden !important;
}
.hero-strip-wrap{height:100% !important;overflow:hidden !important;}
.hero-strip{height:100% !important;align-items:center !important;justify-content:center !important;}
.hero-card{
  width:142px !important;
  min-width:142px !important;
  height:132px !important;
  border-radius:15px !important;
}
.hero-card-title{font-size:12px !important;line-height:1.15 !important;}
.hero-card-meta{font-size:10px !important;margin-top:6px !important;}
.hero-arrow{top:50% !important;}
.hero-arrow.left{left:0 !important;}
.hero-arrow.right{right:0 !important;}
@media (max-width:1280px){
  .hero-home,.hero-inner-home{height:560px !important;min-height:560px !important;max-height:560px !important;}
  .hero-title-home{font-size:58px !important;}
  .hero-title-home.is-long{font-size:52px !important;}
  .hero-title-home.is-xlong{font-size:45px !important;}
  .hero-title-home.is-xxlong{font-size:38px !important;}
  .hero-card{width:132px !important;min-width:132px !important;height:126px !important;}
}
@media (max-width:980px){
  .hero-home,.hero-inner-home{height:620px !important;min-height:620px !important;max-height:620px !important;}
  .hero-inner-home{grid-template-rows:minmax(0,1fr) 150px !important;padding:16px !important;}
  .hero-main-home{grid-template-columns:1fr !important;}
  .hero-copy-home{padding:14px 8px 0 !important;}
  .hero-title-home{font-size:50px !important;max-width:94% !important;}
  .hero-title-home.is-long{font-size:44px !important;}
  .hero-title-home.is-xlong{font-size:38px !important;}
  .hero-title-home.is-xxlong{font-size:33px !important;}
  .hero-desc-home{max-width:92% !important;-webkit-line-clamp:2 !important;line-clamp:2 !important;}
  .hero-strip-area{height:150px !important;min-height:150px !important;max-height:150px !important;padding:8px 44px 0 8px !important;}
}
@media (max-width:680px){
  .hero-home,.hero-inner-home{height:650px !important;min-height:650px !important;max-height:650px !important;}
  .hero-inner-home{grid-template-rows:minmax(0,1fr) 146px !important;}
  .hero-title-home{font-size:42px !important;}
  .hero-title-home.is-long{font-size:36px !important;}
  .hero-title-home.is-xlong{font-size:31px !important;}
  .hero-title-home.is-xxlong{font-size:27px !important;}
  .hero-copy-home .meta-row,.hero-main-home .meta-row{font-size:13px !important;}
  .hero-desc-home{font-size:14px !important;line-height:1.5 !important;}
  .hero-actions-home{margin-top:12px !important;}
  #heroDetailBtn,#heroTrailerBtn{height:36px !important;min-height:36px !important;font-size:12px !important;padding:0 14px !important;}
  .hero-strip-area{height:146px !important;min-height:146px !important;max-height:146px !important;}
  .hero-card{width:126px !important;min-width:126px !important;height:120px !important;}
}


/* === Dramas page safe polish === */
body:has(.page-hero) .shell{background:#fff;}
.page-hero{
  background:linear-gradient(135deg,#f8fbff 0%,#edf6ff 48%,#eaf3ff 100%) !important;
}
.page-hero .eyebrow{background:#e8f3ff;color:#2f74d0;border-color:#d4e8ff;}
.filters-grid-6{align-items:end;}
.btn-small{min-height:38px !important;height:38px;padding:0 16px !important;border-radius:999px !important;font-size:13px !important;}
.card-grid > .empty{grid-column:1 / -1;}
.poster{position:relative;background:linear-gradient(135deg,#eaf3ff,#d8e8fb);}
.poster::before{
  content:"OnamiDramas";
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  color:#7890aa;font-size:12px;font-weight:900;letter-spacing:.4px;
}
.poster img{position:relative;z-index:1;background:#dfeaf7;}
.poster img[src=""],.poster img:not([src]){display:none;}
.poster-card{background:#fff;border-color:#dce8f4;}
.poster-card:hover{box-shadow:0 14px 26px rgba(37,68,109,.10);}
.card-title{color:#244774;}
.card-tag{background:#eef6ff;border-color:#d8eaff;color:#3768a5;}
.results-footer .btn{border-radius:999px;}
@media (max-width:1180px){.filters-grid-6{grid-template-columns:1fr 1fr 1fr !important;}}
@media (max-width:720px){.filters-grid-6{grid-template-columns:1fr !important;}.section-head{align-items:flex-start;flex-direction:column;}.btn-small{width:auto;}}

/* === Detail page safe polish === */
.detail-locked-layout{
  min-height:500px !important;
  background:#dcecff !important;
}
.detail-locked-layout .hero-backdrop-detail::after{
  background:
    linear-gradient(90deg,rgba(238,246,255,.96) 0%,rgba(238,246,255,.92) 30%,rgba(238,246,255,.72) 55%,rgba(238,246,255,.20) 78%,rgba(238,246,255,.08) 100%) !important;
}
.detail-locked-layout .hero-inner-detail{
  min-height:500px !important;
  grid-template-columns:300px minmax(0,1fr) !important;
  align-items:center !important;
  gap:30px !important;
  padding:26px !important;
}
.detail-locked-layout .poster-card-detail{
  position:relative !important;
  height:430px !important;
  border-radius:22px !important;
  background:linear-gradient(135deg,#eaf3ff,#d8e8fb) !important;
}
.detail-locked-layout .poster-card-detail img{
  position:relative;
  z-index:2;
}
.detail-image-fallback,
.cast-photo-fallback{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#7890aa;
  font-size:13px;
  font-weight:900;
  letter-spacing:.4px;
  background:linear-gradient(135deg,#eaf3ff,#d8e8fb);
}
.poster-card-detail.no-image img{display:none !important;}
.hero-copy-detail{max-width:780px !important;}
.title-detail{
  font-size:58px !important;
  line-height:1.02 !important;
  letter-spacing:-1.2px !important;
  color:#213f67 !important;
  overflow-wrap:break-word !important;
}
.title-detail.detail-title-long{font-size:52px !important;}
.title-detail.detail-title-xlong{font-size:46px !important;line-height:1.05 !important;}
.title-detail.detail-title-xxlong{font-size:40px !important;line-height:1.08 !important;letter-spacing:-.5px !important;}
.detail-chips{margin-top:16px !important;}
.detail-actions{
  margin-top:20px !important;
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:12px !important;
}
.detail-actions .btn{
  min-height:42px !important;
  border-radius:999px !important;
  padding:0 18px !important;
  font-size:14px !important;
}
.detail-content-wrap{padding:18px !important;margin:0 !important;max-width:none !important;}
.detail-section{margin-top:0 !important;margin-bottom:18px !important;}
.cast-card-link{
  display:block !important;
  color:inherit !important;
  text-decoration:none !important;
}
.cast-photo{position:relative;}
.cast-photo img{position:relative;z-index:2;}
.cast-photo.no-image .cast-photo-fallback{display:flex;}
.cast-photo:not(.no-image) .cast-photo-fallback{display:none;}
.cast-photo-fallback{
  border-radius:999px;
  font-size:28px;
  color:#3567a8;
  background:linear-gradient(135deg,#eaf3ff,#d8e8fb);
}
.cast-card-link:hover .cast-name{color:#2478f0;}
.cast-grid > .empty{grid-column:1 / -1;}
@media (max-width:980px){
  .detail-locked-layout .hero-inner-detail{
    grid-template-columns:1fr !important;
    min-height:auto !important;
    align-items:start !important;
    padding:20px !important;
  }
  .detail-locked-layout .poster-card-detail{
    width:280px !important;
    height:390px !important;
  }
  .title-detail{font-size:44px !important;}
  .title-detail.detail-title-long{font-size:40px !important;}
  .title-detail.detail-title-xlong{font-size:36px !important;}
  .title-detail.detail-title-xxlong{font-size:32px !important;}
}
@media (max-width:680px){
  .detail-locked-layout .hero-inner-detail{padding:16px !important;}
  .detail-locked-layout .poster-card-detail{width:230px !important;height:330px !important;}
  .title-detail{font-size:36px !important;}
  .title-detail.detail-title-long{font-size:33px !important;}
  .title-detail.detail-title-xlong{font-size:30px !important;}
  .title-detail.detail-title-xxlong{font-size:27px !important;}
  .detail-content-wrap{padding:12px !important;}
}


/* === Actor page safe fix === */
.actor-locked-layout{
  min-height:500px !important;
  background:#dcecff !important;
}
.actor-locked-layout .hero-backdrop-detail{
  background-position:center top !important;
  filter:none !important;
}
.actor-locked-layout .hero-backdrop-detail::after{
  background:
    linear-gradient(90deg,rgba(238,246,255,.97) 0%,rgba(238,246,255,.94) 32%,rgba(238,246,255,.74) 58%,rgba(238,246,255,.24) 82%,rgba(238,246,255,.10) 100%) !important;
}
.actor-locked-layout .hero-inner-detail{
  min-height:500px !important;
  grid-template-columns:300px minmax(0,1fr) !important;
  align-items:center !important;
  gap:30px !important;
  padding:26px !important;
}
.actor-photo-card{
  position:relative !important;
  width:300px !important;
  height:390px !important;
  border-radius:24px !important;
  background:linear-gradient(135deg,#eaf3ff,#d8e8fb) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.actor-photo-card img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center top !important;
  background:linear-gradient(135deg,#eaf3ff,#d8e8fb) !important;
  position:relative !important;
  z-index:2 !important;
}
.actor-image-fallback,
.work-image-fallback{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  color:#7890aa;
  font-size:13px;
  font-weight:900;
  letter-spacing:.4px;
  background:linear-gradient(135deg,#eaf3ff,#d8e8fb);
}
.actor-photo-card.no-image img{display:none !important;}
.actor-photo-card.no-image .actor-image-fallback{display:flex;}
.actor-locked-layout .hero-copy-detail{max-width:780px !important;}
.actor-locked-layout .title-detail{
  font-size:58px !important;
  line-height:1.02 !important;
  letter-spacing:-1.1px !important;
  color:#213f67 !important;
  overflow-wrap:break-word !important;
}
.actor-locked-layout .title-detail.actor-title-long{font-size:52px !important;}
.actor-locked-layout .title-detail.actor-title-xlong{font-size:46px !important;line-height:1.05 !important;}
.actor-locked-layout .title-detail.actor-title-xxlong{font-size:40px !important;line-height:1.08 !important;letter-spacing:-.5px !important;}
.actor-locked-layout .summary{
  max-width:760px !important;
  display:-webkit-box !important;
  -webkit-line-clamp:4 !important;
  line-clamp:4 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}
.actor-locked-layout .hero-actions{
  margin-top:20px !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}
.actor-locked-layout .hero-actions .btn{
  min-height:42px !important;
  border-radius:999px !important;
  padding:0 18px !important;
  font-size:14px !important;
}
.work-poster{position:relative;background:linear-gradient(135deg,#eaf3ff,#d8e8fb);}
.work-poster img{position:relative;z-index:2;background:#dfeaf7;}
.work-poster.no-image img,.work-poster img[src=""],.work-poster img:not([src]){display:none !important;}
.work-poster.no-image .work-image-fallback{display:flex;}
.works-grid > .empty{grid-column:1 / -1;}
.work-card{background:#fff !important;border-color:#dce8f4 !important;}
.work-card:hover .work-title{color:#2478f0;}
@media (max-width:980px){
  .actor-locked-layout .hero-inner-detail{
    grid-template-columns:1fr !important;
    min-height:auto !important;
    align-items:start !important;
    padding:20px !important;
  }
  .actor-photo-card{
    width:260px !important;
    height:340px !important;
  }
  .actor-locked-layout .title-detail{font-size:44px !important;}
  .actor-locked-layout .title-detail.actor-title-long{font-size:40px !important;}
  .actor-locked-layout .title-detail.actor-title-xlong{font-size:36px !important;}
  .actor-locked-layout .title-detail.actor-title-xxlong{font-size:32px !important;}
}
@media (max-width:680px){
  .actor-locked-layout .hero-inner-detail{padding:16px !important;}
  .actor-photo-card{width:220px !important;height:300px !important;}
  .actor-locked-layout .title-detail{font-size:36px !important;}
  .actor-locked-layout .title-detail.actor-title-long{font-size:33px !important;}
  .actor-locked-layout .title-detail.actor-title-xlong{font-size:30px !important;}
  .actor-locked-layout .title-detail.actor-title-xxlong{font-size:27px !important;}
}


/* === Actor page clean profile fix v2 ===
   Keep data logic untouched; only remove the oversized background portrait
   and make the actor page look like a clean profile header. */
.actor-locked-layout{
  min-height:430px !important;
  background:linear-gradient(135deg,#f3f8fe 0%,#eaf3fc 48%,#f8fbff 100%) !important;
  overflow:hidden !important;
}
.actor-locked-layout .hero-backdrop-detail{
  display:none !important;
  background-image:none !important;
}
.actor-locked-layout .hero-backdrop-detail::after{
  display:none !important;
}
.actor-locked-layout .hero-inner-detail{
  min-height:430px !important;
  grid-template-columns:260px minmax(0,1fr) !important;
  align-items:center !important;
  gap:34px !important;
  padding:34px 38px !important;
}
.actor-photo-card{
  width:260px !important;
  height:350px !important;
  border-radius:22px !important;
  background:#ffffff !important;
  border:1px solid #dce8f4 !important;
  box-shadow:0 16px 34px rgba(37,68,109,.12) !important;
  padding:0 !important;
  overflow:hidden !important;
}
.actor-photo-card img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center top !important;
  background:#edf4fb !important;
}
.actor-locked-layout .hero-copy-detail{
  max-width:850px !important;
  padding:0 !important;
}
.actor-locked-layout .eyebrow{
  background:#fff !important;
  color:#577395 !important;
  border:1px solid #dce8f4 !important;
  box-shadow:0 8px 18px rgba(37,68,109,.06) !important;
}
.actor-locked-layout .title-detail{
  margin-top:16px !important;
  font-size:56px !important;
  line-height:1.02 !important;
  letter-spacing:-1.1px !important;
  color:#244774 !important;
}
.actor-locked-layout .title-detail.actor-title-long{font-size:50px !important;}
.actor-locked-layout .title-detail.actor-title-xlong{font-size:44px !important;line-height:1.05 !important;}
.actor-locked-layout .title-detail.actor-title-xxlong{font-size:38px !important;line-height:1.08 !important;letter-spacing:-.4px !important;}
.actor-locked-layout .meta-row{
  color:#4f6f91 !important;
  font-size:15px !important;
  font-weight:850 !important;
}
.actor-locked-layout .chips{
  margin-top:16px !important;
}
.actor-locked-layout .chip{
  background:#ffffff !important;
  border-color:#dce8f4 !important;
  color:#567290 !important;
}
.actor-locked-layout .summary{
  margin-top:18px !important;
  max-width:780px !important;
  color:#587392 !important;
  font-size:16px !important;
  line-height:1.7 !important;
  -webkit-line-clamp:3 !important;
  line-clamp:3 !important;
}
.actor-locked-layout .hero-actions{
  margin-top:18px !important;
}
@media (max-width:980px){
  .actor-locked-layout{min-height:auto !important;}
  .actor-locked-layout .hero-inner-detail{
    min-height:auto !important;
    grid-template-columns:1fr !important;
    padding:26px !important;
    gap:22px !important;
  }
  .actor-photo-card{
    width:230px !important;
    height:310px !important;
  }
  .actor-locked-layout .title-detail{font-size:44px !important;}
  .actor-locked-layout .title-detail.actor-title-long{font-size:40px !important;}
  .actor-locked-layout .title-detail.actor-title-xlong{font-size:36px !important;}
  .actor-locked-layout .title-detail.actor-title-xxlong{font-size:32px !important;}
}
@media (max-width:680px){
  .actor-locked-layout .hero-inner-detail{padding:18px !important;}
  .actor-photo-card{
    width:200px !important;
    height:270px !important;
  }
  .actor-locked-layout .title-detail{font-size:36px !important;}
  .actor-locked-layout .summary{font-size:15px !important;}
}


/* === Actor page soft background photo fix ===
   Bring back the actor photo in the hero background, but keep it soft and non-distracting. */
.actor-locked-layout{
  position:relative !important;
  background:linear-gradient(135deg,#f3f8fe 0%,#eaf3fc 48%,#f8fbff 100%) !important;
}
.actor-locked-layout .hero-backdrop-detail{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  background-image:inherit;
  background-position:center top !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  filter:blur(18px) saturate(.9) !important;
  transform:scale(1.08) !important;
  opacity:.22 !important;
  z-index:0 !important;
  pointer-events:none !important;
}
.actor-locked-layout .hero-backdrop-detail::after{
  display:block !important;
  content:"" !important;
  position:absolute !important;
  inset:-2px !important;
  background:
    linear-gradient(90deg,rgba(246,250,255,.96) 0%,rgba(239,247,255,.90) 42%,rgba(239,247,255,.74) 100%),
    radial-gradient(circle at 78% 28%,rgba(47,140,255,.18),rgba(255,255,255,0) 42%) !important;
}
.actor-locked-layout .hero-inner-detail{
  position:relative !important;
  z-index:2 !important;
}
.actor-photo-card{
  position:relative !important;
  z-index:3 !important;
}
.actor-locked-layout .hero-copy-detail{
  position:relative !important;
  z-index:3 !important;
}


/* === Actor page visible hero poster fix ===
   The actor image should be visible in the hero background, but not cover the text. */
.actor-locked-layout{
  background:linear-gradient(135deg,#eef6ff 0%,#f6fbff 62%,#eaf3fc 100%) !important;
}
.actor-locked-layout .hero-backdrop-detail{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  background-position:right 6% center !important;
  background-size:auto 118% !important;
  background-repeat:no-repeat !important;
  filter:saturate(.96) contrast(.98) !important;
  transform:none !important;
  opacity:.58 !important;
  z-index:0 !important;
  pointer-events:none !important;
}
.actor-locked-layout .hero-backdrop-detail::after{
  display:block !important;
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:
    linear-gradient(90deg,
      rgba(242,248,255,.98) 0%,
      rgba(242,248,255,.96) 38%,
      rgba(242,248,255,.78) 58%,
      rgba(242,248,255,.36) 78%,
      rgba(242,248,255,.14) 100%),
    linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.04) 100%) !important;
}
.actor-locked-layout .hero-inner-detail{
  position:relative !important;
  z-index:2 !important;
}
.actor-photo-card,
.actor-locked-layout .hero-copy-detail{
  position:relative !important;
  z-index:3 !important;
}
@media (max-width:980px){
  .actor-locked-layout .hero-backdrop-detail{
    background-position:right -20px center !important;
    background-size:auto 105% !important;
    opacity:.28 !important;
  }
  .actor-locked-layout .hero-backdrop-detail::after{
    background:rgba(242,248,255,.88) !important;
  }
}
@media (max-width:680px){
  .actor-locked-layout .hero-backdrop-detail{
    opacity:.18 !important;
  }
}


/* === Actor page real visible poster fix ===
   Use a real <img> on the right side of actor hero instead of only CSS background.
   This makes the hero poster visible and predictable in every browser. */
.actor-locked-layout{
  position:relative !important;
  overflow:hidden !important;
  background:linear-gradient(135deg,#eef6ff 0%,#f7fbff 58%,#edf6ff 100%) !important;
}
.actor-locked-layout .hero-backdrop-detail{
  display:none !important;
}
.actor-hero-poster-wrap{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:44%;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}
.actor-hero-poster-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(90deg,rgba(242,248,255,1) 0%,rgba(242,248,255,.86) 22%,rgba(242,248,255,.28) 58%,rgba(242,248,255,.06) 100%),
    linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.18) 100%);
}
.actor-hero-poster-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  opacity:.72;
  filter:saturate(.98) contrast(.98);
  transform:scale(1.02);
}
.actor-hero-poster-wrap.no-image{display:none;}
.actor-locked-layout .hero-inner-detail{
  position:relative !important;
  z-index:3 !important;
}
.actor-photo-card,
.actor-locked-layout .hero-copy-detail{
  position:relative !important;
  z-index:4 !important;
}
@media (max-width:980px){
  .actor-hero-poster-wrap{
    width:42%;
    opacity:.55;
  }
  .actor-hero-poster-wrap::before{
    background:rgba(242,248,255,.72);
  }
}
@media (max-width:680px){
  .actor-hero-poster-wrap{display:none;}
}

/* === Actor hero right poster: decorative full-poster fix ===
   Keeps the left portrait and text untouched. The right visual is now a
   contained decorative poster, not a giant cropped face. */
.actor-locked-layout{
  background:linear-gradient(135deg,#eef6ff 0%,#f7fbff 58%,#edf6ff 100%) !important;
}
.actor-hero-poster-wrap{
  top:22px !important;
  right:28px !important;
  bottom:22px !important;
  width:38% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  border-radius:28px !important;
  opacity:1 !important;
}
.actor-hero-poster-wrap::before{
  z-index:2 !important;
  background:
    linear-gradient(90deg,
      rgba(242,248,255,1) 0%,
      rgba(242,248,255,.92) 20%,
      rgba(242,248,255,.56) 48%,
      rgba(242,248,255,.20) 78%,
      rgba(242,248,255,.10) 100%) !important;
}
.actor-hero-poster-wrap img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center right !important;
  opacity:.58 !important;
  filter:saturate(.98) contrast(.98) !important;
  transform:none !important;
}
@media (max-width:1180px){
  .actor-hero-poster-wrap{
    width:34% !important;
    right:18px !important;
  }
  .actor-hero-poster-wrap img{opacity:.42 !important;}
}
@media (max-width:980px){
  .actor-hero-poster-wrap{display:none !important;}
}


/* === Actor hero: show actor's highest-rated drama poster on the right === */
.actor-hero-poster-wrap{
  top:30px !important;
  right:42px !important;
  bottom:30px !important;
  width:270px !important;
  border-radius:22px !important;
  background:rgba(255,255,255,.72) !important;
  border:1px solid rgba(216,228,241,.96) !important;
  box-shadow:0 18px 34px rgba(37,68,109,.14) !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:stretch !important;
  justify-content:center !important;
  z-index:2 !important;
}
.actor-hero-poster-wrap::before{
  display:none !important;
}
.actor-hero-poster-wrap img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  opacity:1 !important;
  filter:none !important;
  transform:none !important;
}
.actor-hero-poster-wrap::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:42%;
  background:linear-gradient(180deg,rgba(12,27,45,0) 0%,rgba(12,27,45,.74) 100%);
  z-index:2;
  pointer-events:none;
}
.actor-hero-poster-caption{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  z-index:3;
  color:#fff;
  font-size:13px;
  line-height:1.25;
  font-weight:900;
  text-shadow:0 2px 8px rgba(0,0,0,.28);
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.actor-hero-poster-wrap.no-image{
  display:none !important;
}
@media (max-width:1180px){
  .actor-hero-poster-wrap{
    width:220px !important;
    right:22px !important;
    top:38px !important;
    bottom:38px !important;
  }
}
@media (max-width:980px){
  .actor-hero-poster-wrap{display:none !important;}
}


/* === Actor hero: use top-rated drama as full hero background (detail-page style) === */
.actor-locked-layout{
  min-height:500px !important;
  position:relative !important;
  overflow:hidden !important;
  background:#dcecff !important;
}
.actor-locked-layout .hero-backdrop-detail{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  background-size:cover !important;
  background-position:center right !important;
  background-repeat:no-repeat !important;
  filter:none !important;
  transform:none !important;
  opacity:1 !important;
  z-index:0 !important;
}
.actor-locked-layout .hero-backdrop-detail::after{
  display:block !important;
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:
    linear-gradient(90deg,
      rgba(238,246,255,.98) 0%,
      rgba(238,246,255,.95) 31%,
      rgba(238,246,255,.78) 52%,
      rgba(238,246,255,.36) 74%,
      rgba(238,246,255,.14) 100%),
    linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.18) 100%) !important;
}
.actor-locked-layout .hero-backdrop-detail.no-bg::after{
  background:linear-gradient(135deg,#eef6ff 0%,#f7fbff 58%,#edf6ff 100%) !important;
}
.actor-hero-poster-wrap{
  display:none !important;
}
.actor-locked-layout .hero-inner-detail{
  position:relative !important;
  z-index:2 !important;
  grid-template-columns:300px minmax(0,780px) !important;
  align-items:center !important;
  gap:30px !important;
  min-height:500px !important;
  padding:26px !important;
}
.actor-photo-card{
  z-index:3 !important;
  width:300px !important;
  height:390px !important;
  border-radius:24px !important;
  background:linear-gradient(135deg,#eaf3ff,#d8e8fb) !important;
}
.actor-photo-card img{
  object-fit:cover !important;
  object-position:center top !important;
}
.actor-locked-layout .hero-copy-detail{
  position:relative !important;
  z-index:3 !important;
  max-width:780px !important;
}
.actor-locked-layout .summary{
  max-width:760px !important;
  -webkit-line-clamp:3 !important;
  line-clamp:3 !important;
}
@media (max-width:980px){
  .actor-locked-layout .hero-backdrop-detail{
    background-position:center right !important;
  }
  .actor-locked-layout .hero-backdrop-detail::after{
    background:rgba(238,246,255,.88) !important;
  }
  .actor-locked-layout .hero-inner-detail{
    grid-template-columns:1fr !important;
    min-height:auto !important;
    padding:22px !important;
  }
}
@media (max-width:680px){
  .actor-locked-layout .hero-backdrop-detail::after{
    background:rgba(238,246,255,.93) !important;
  }
}


/* === Actor hero real drama background layer fix === */
.actor-locked-layout{
  background:linear-gradient(135deg,#eaf4ff 0%,#f7fbff 62%,#e9f3ff 100%) !important;
}
.actor-locked-layout .hero-backdrop-detail{
  opacity:.25 !important;
  background-size:cover !important;
  background-position:center right !important;
  z-index:0 !important;
}
.actor-hero-bg-img{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:66%;
  height:100%;
  object-fit:cover;
  object-position:center right;
  opacity:.42;
  filter:saturate(.95) contrast(.96);
  z-index:0;
  pointer-events:none;
}
.actor-hero-bg-img.hidden-bg{
  display:none !important;
}
.actor-locked-layout::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(238,246,255,.98) 0%,
      rgba(238,246,255,.94) 30%,
      rgba(238,246,255,.78) 50%,
      rgba(238,246,255,.46) 70%,
      rgba(238,246,255,.28) 100%),
    linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.22) 100%);
}
.actor-locked-layout .hero-backdrop-detail::after{
  background:transparent !important;
}
.actor-locked-layout .hero-inner-detail{
  position:relative !important;
  z-index:3 !important;
}
.actor-photo-card,
.actor-locked-layout .hero-copy-detail{
  position:relative !important;
  z-index:4 !important;
}
@media (max-width:980px){
  .actor-hero-bg-img{
    width:100%;
    opacity:.20;
    object-position:center;
  }
  .actor-locked-layout::after{
    background:rgba(238,246,255,.90) !important;
  }
}
@media (max-width:680px){
  .actor-hero-bg-img{
    display:none !important;
  }
  .actor-locked-layout::after{
    background:transparent !important;
  }
}


/* === Actor page final lower-section lock (hero untouched) === */
.actor-final-lower .section{
  border-color:#dbe8f5;
}
.actor-final-lower .facts-grid{
  align-items:stretch;
}
.actor-final-lower .fact-card{
  overflow:hidden;
}
.actor-final-lower .fact-value{
  word-break:break-word;
}
.actor-final-lower .bio{
  max-width:1100px;
}
.actor-final-lower .work-card{
  text-decoration:none;
}
.actor-final-lower .work-poster{
  position:relative;
}
.actor-final-lower .work-poster.no-image img{
  display:none;
}
.actor-final-lower .work-title{
  min-height:40px;
}
.actor-final-lower .card-tags:empty{
  display:none;
}
@media (max-width:680px){
  .actor-final-lower{padding:12px!important;}
}

/* === Global topbar search dropdown safety fix === */
.topbar{overflow:visible!important;z-index:1000;}
.search-pop{z-index:9999!important;}
.search-pop.open{display:block!important;}
.search-suggestions.show{display:block!important;}
.shell{overflow:visible;}

/* === Mobile & Tablet Revision Patch === */
html,body{max-width:100%;overflow-x:hidden;}
img{max-width:100%;}
@media (max-width:1180px){
  .page{max-width:100%;padding:0 12px;margin:10px auto 24px;}
  .topbar{grid-template-columns:240px 1fr 110px;gap:12px;padding:0 18px;}
  .nav{gap:20px;}
  .nav a{font-size:14px;}
  .card-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .trailer-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .actors-row,.genre-row{grid-template-columns:repeat(4,minmax(0,1fr));}
  .facts-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .cast-grid,.works-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .results-grid-dramas,.results-grid-actors{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
}
@media (max-width:980px){
  .page{padding:0 10px;}
  .shell,.section,.footer{border-radius:22px;}
  .topbar{
    height:auto!important;
    min-height:0;
    grid-template-columns:1fr auto!important;
    grid-template-areas:"brand actions" "nav nav";
    align-items:center;
    padding:14px 14px 12px!important;
    gap:10px 12px!important;
  }
  .brand{grid-area:brand;min-width:0;}
  .brand-title{font-size:17px;}
  .brand-sub{display:none!important;}
  .brand-mark{width:38px!important;height:38px!important;border-radius:12px!important;}
  .top-actions{grid-area:actions;gap:8px;}
  .icon-btn{width:40px!important;height:40px!important;min-height:40px!important;}
  .nav{
    grid-area:nav;
    display:flex!important;
    justify-content:flex-start!important;
    gap:18px!important;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    padding:8px 2px 2px;
    scrollbar-width:none;
  }
  .nav::-webkit-scrollbar{display:none;}
  .nav a{font-size:14px;padding:7px 0 9px;flex:0 0 auto;}
  .search-pop{
    position:absolute!important;
    top:calc(100% + 8px)!important;
    left:12px!important;
    right:12px!important;
    width:auto!important;
  }
  .search-input-global{height:52px!important;}

  .hero-home,.hero-inner-home{height:560px!important;min-height:560px!important;max-height:560px!important;}
  .hero-inner-home{padding:16px!important;}
  .hero-main-home{grid-template-columns:1fr!important;padding-top:4px!important;padding-bottom:10px!important;}
  .hero-copy-home{padding:8px 4px 0!important;max-width:100%!important;}
  .hero-title-home{font-size:clamp(38px,7vw,54px)!important;max-width:92%!important;line-height:1.05!important;}
  .hero-copy-home .meta-row,.hero-main-home .meta-row{font-size:14px!important;gap:10px!important;margin-top:12px!important;}
  .hero-desc-home{max-width:88%!important;font-size:14px!important;line-height:1.55!important;-webkit-line-clamp:2!important;line-clamp:2!important;}
  .hero-actions-home{margin-top:10px!important;gap:8px!important;}
  .hero-actions-home .btn,#heroDetailBtn,#heroTrailerBtn{height:36px!important;min-height:36px!important;font-size:12px!important;padding:0 13px!important;}
  .hero-strip-area{height:148px!important;min-height:148px!important;max-height:148px!important;padding:10px 44px 0 6px!important;}
  .hero-card{width:126px!important;min-width:126px!important;height:126px!important;border-radius:14px!important;}
  .hero-arrow{width:42px!important;height:42px!important;font-size:28px!important;}

  .section-inner{padding:16px!important;}
  .section-title{font-size:20px!important;}
  .card-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important;}
  .trailer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .actors-row,.genre-row{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;}
  .genre-chip-home{min-height:82px!important;}

  .page-hero{padding:24px 16px!important;}
  .title-xl{font-size:42px!important;}
  .subtitle{font-size:15px!important;}
  .filters-grid-6,.search-panel{grid-template-columns:repeat(2,minmax(0,1fr))!important;}

  .search-v2{margin:12px!important;padding:18px!important;border-radius:24px!important;}
  .search-v2-title{font-size:clamp(30px,6vw,44px)!important;}
  .search-control-row{align-items:flex-start!important;}
  .advanced-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .results-grid-dramas,.results-grid-actors{grid-template-columns:repeat(3,minmax(0,1fr))!important;}

  .actors-page-shell,.actors-v2,.actors-search-panel{margin:12px!important;padding:18px!important;border-radius:24px!important;}
  .actors-grid,.actor-list-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  .actors-advanced-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}

  .hero-inner-detail{grid-template-columns:260px 1fr!important;gap:18px!important;padding:20px!important;align-items:end!important;}
  .poster-card-detail,.photo-card-detail{width:260px!important;height:360px!important;}
  .title-detail{font-size:44px!important;}
  .facts-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  .cast-grid,.works-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}

  .actor-final-hero-inner,.actor-hero-inner{grid-template-columns:240px 1fr!important;gap:18px!important;padding:20px!important;}
  .actor-final-photo,.actor-photo-card,.photo-card-detail{width:240px!important;max-width:100%!important;height:330px!important;}
  .actor-final-title,.actor-title{font-size:42px!important;}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px!important;}
}
@media (max-width:680px){
  .page{padding:0 8px;margin:8px auto 20px;}
  .topbar{padding:12px!important;border-radius:0;}
  .brand-title{font-size:16px;}
  .brand{gap:10px;}
  .nav{gap:16px!important;padding-top:8px;}
  .nav a{font-size:13px;}
  .search-pop{left:8px!important;right:8px!important;}
  .search-input-global{height:50px!important;font-size:14px!important;}

  .hero-home,.hero-inner-home{height:540px!important;min-height:540px!important;max-height:540px!important;}
  .hero-backdrop-home{background-position:center right!important;}
  .hero-title-home{font-size:clamp(32px,10vw,42px)!important;max-width:100%!important;}
  .hero-copy-home .eyebrow{min-height:28px!important;font-size:10px!important;}
  .hero-desc-home{max-width:100%!important;font-size:14px!important;-webkit-line-clamp:2!important;line-clamp:2!important;}
  .hero-strip-area{height:142px!important;min-height:142px!important;max-height:142px!important;padding:10px 40px 0 2px!important;}
  .hero-card{width:112px!important;min-width:112px!important;height:122px!important;}
  .hero-card-title{font-size:12px!important;}
  .hero-card-meta{display:none!important;}
  .hero-arrow{width:38px!important;height:38px!important;font-size:26px!important;}

  .section{border-radius:20px!important;}
  .section-head{align-items:flex-start!important;flex-direction:column!important;gap:10px!important;}
  .section-head .btn{align-self:flex-start;}
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;}
  .trailer-grid{grid-template-columns:1fr!important;}
  .actors-row,.genre-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .genre-chip-home{min-height:78px!important;padding:10px!important;}
  .genre-chip-home svg{width:28px!important;height:28px!important;min-width:28px!important;}

  .title-xl{font-size:34px!important;}
  .page-hero{padding:20px 14px!important;}
  .filters-grid-6,.search-panel{grid-template-columns:1fr!important;}

  .search-v2{margin:8px!important;padding:14px!important;border-radius:20px!important;}
  .search-v2-head{text-align:left!important;margin-bottom:16px!important;}
  .search-v2-title{font-size:32px!important;}
  .search-v2-subtitle{font-size:14px!important;}
  .search-input-shell{border-radius:20px!important;gap:10px!important;padding:10px 12px!important;flex-wrap:wrap!important;}
  .search-input-shell input{font-size:15px!important;width:calc(100% - 34px)!important;flex:1 1 auto!important;}
  .search-submit-btn{width:100%!important;min-width:0!important;padding:11px 16px!important;}
  .search-control-row{display:block!important;}
  .search-tabs{margin-bottom:12px!important;}
  .search-tab-btn{padding:10px 14px!important;font-size:13px!important;}
  .search-sort{width:100%!important;justify-content:space-between!important;}
  .search-sort select{flex:1!important;min-width:0!important;}
  .advanced-toggle{padding:13px 14px!important;border-radius:16px!important;}
  .advanced-panel{padding:14px!important;border-radius:18px!important;}
  .advanced-grid{grid-template-columns:1fr!important;gap:12px!important;}
  .advanced-actions{display:grid!important;grid-template-columns:1fr 1fr!important;}
  .results-grid-dramas,.results-grid-actors{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;}
  .search-v2-section{padding:14px!important;border-radius:20px!important;}
  .search-drama-title,.search-actor-name{font-size:14px!important;min-height:36px!important;}
  .search-actor-photo{width:70px!important;height:70px!important;}

  .actors-page-shell,.actors-v2,.actors-search-panel{margin:8px!important;padding:14px!important;border-radius:20px!important;}
  .actors-grid,.actor-list-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;}
  .actors-advanced-grid{grid-template-columns:1fr!important;}
  .actors-control-row,.actors-search-row{display:block!important;}
  .actors-sort{margin-top:12px!important;width:100%!important;}

  .hero-detail,.actor-final-hero,.actor-hero{min-height:auto!important;}
  .hero-inner-detail{grid-template-columns:1fr!important;padding:16px!important;gap:16px!important;align-items:start!important;}
  .poster-card-detail,.photo-card-detail{width:190px!important;height:280px!important;margin:0 auto!important;}
  .title-detail{font-size:34px!important;line-height:1.08!important;}
  .summary,.bio,.story{font-size:15px!important;line-height:1.65!important;}
  .facts-grid{grid-template-columns:1fr!important;gap:10px!important;}
  .cast-grid,.works-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;}

  .actor-final-hero-inner,.actor-hero-inner{grid-template-columns:1fr!important;padding:16px!important;gap:16px!important;}
  .actor-final-photo,.actor-photo-card{width:190px!important;height:280px!important;margin:0 auto!important;}
  .actor-final-title,.actor-title{font-size:34px!important;line-height:1.08!important;}
  .actor-bg-real-img,.actor-hero-bg-img{display:none!important;}
  .actor-final-lower{padding:12px!important;}

  .footer{border-radius:20px!important;}
  .footer-grid{grid-template-columns:1fr!important;padding:18px!important;gap:18px!important;}
}
@media (max-width:390px){
  .card-grid,.actors-row,.genre-row,.results-grid-dramas,.results-grid-actors,.actors-grid,.actor-list-grid,.cast-grid,.works-grid{grid-template-columns:1fr!important;}
  .hero-card{width:106px!important;min-width:106px!important;height:118px!important;}
  .hero-title-home{font-size:31px!important;}
}


/* === Mobile polish pass: actors, drama placeholders, search advanced, cast placeholders === */
.poster{position:relative;}
.poster-fallback{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:14px;
  text-align:center;
  color:#2b4f85;
  font-size:13px;
  font-weight:900;
  line-height:1.25;
  background:linear-gradient(145deg,#eef6ff 0%,#dcecff 100%);
}
.poster.no-image img{display:none!important;}
.poster.no-image .poster-fallback{display:flex;}
.cast-photo.no-image{
  background:linear-gradient(145deg,#eef6ff 0%,#dcecff 100%)!important;
  border-color:#ffffff!important;
}
.cast-photo.no-image .cast-photo-fallback{
  display:flex!important;
  color:#2f6cc6!important;
  font-size:24px!important;
  font-weight:950!important;
  background:transparent!important;
}
@media (max-width: 430px){
  .advanced-grid,
  .actors-advanced-grid{
    grid-template-columns:1fr!important;
  }
  .advanced-panel,
  .actors-advanced-panel{
    padding:14px!important;
  }
  .advanced-field select,
  .advanced-field input,
  .actors-advanced-panel select,
  .actors-advanced-panel input{
    min-height:44px!important;
    font-size:13px!important;
  }
  .card-grid .poster-card .poster{
    aspect-ratio: 4 / 5!important;
  }
  .card-grid .poster-card .poster.no-image{
    min-height:150px!important;
    aspect-ratio:auto!important;
  }
  .card-grid .poster-card .card-body{
    padding:10px!important;
  }
  .card-grid .poster-card .card-title{
    font-size:14px!important;
    min-height:auto!important;
  }
}
@media (max-width: 380px){
  .actors-grid-v2,
  .actor-list-grid,
  .results-grid-actors{
    grid-template-columns:1fr!important;
  }
  .actor-card-v2{
    display:grid!important;
    grid-template-columns:78px 1fr!important;
    align-items:center!important;
    text-align:left!important;
    gap:12px!important;
    min-height:112px!important;
    padding:14px 16px!important;
  }
  .actor-card-v2 .actor-card-heart{top:10px!important;right:12px!important;}
  .actor-card-photo{
    width:72px!important;
    height:72px!important;
    margin:0!important;
    grid-row:1 / span 3!important;
  }
  .actor-card-name{
    min-height:auto!important;
    justify-content:flex-start!important;
    text-align:left!important;
    font-size:15px!important;
    padding-right:18px!important;
  }
  .actor-card-meta{
    min-height:auto!important;
    margin-top:2px!important;
    font-size:12px!important;
  }
  .actor-card-count{
    margin-top:3px!important;
    font-size:12px!important;
  }
  .actors-results-head{
    align-items:flex-start!important;
  }
  .actors-hint{
    width:100%!important;
  }
}
@media (max-width: 360px){
  .card-grid,
  .results-grid-dramas{
    grid-template-columns:1fr!important;
  }
  .search-v2-section,
  .actors-v2,
  .section,
  .footer{
    border-radius:18px!important;
  }
}


/* Actor detail empty facts cleanup */
.fact-card.hidden{display:none!important;}
.facts-grid .facts-empty{grid-column:1/-1;}


/* === Safe home hero height + landscape hero cards ===
   Scope: homepage hero only. Keeps existing colors/layout; only grows downward and changes card aspect. */
.hero-home{
  height:620px !important;
  min-height:620px !important;
  max-height:620px !important;
}
.hero-inner-home{
  height:620px !important;
  min-height:620px !important;
  max-height:620px !important;
  grid-template-rows:minmax(0,1fr) 172px !important;
}
.hero-strip-area{
  height:172px !important;
  min-height:172px !important;
  max-height:172px !important;
}
.hero-card{
  width:172px !important;
  min-width:172px !important;
  height:112px !important;
  border-radius:16px !important;
}
.hero-card img{object-fit:cover !important;}
.hero-card-title{font-size:12px !important;line-height:1.15 !important;}
.hero-card-meta{font-size:10px !important;margin-top:5px !important;}
@media (max-width:1280px){
  .hero-home,.hero-inner-home{height:620px !important;min-height:620px !important;max-height:620px !important;}
  .hero-inner-home{grid-template-rows:minmax(0,1fr) 166px !important;}
  .hero-strip-area{height:166px !important;min-height:166px !important;max-height:166px !important;}
  .hero-card{width:154px !important;min-width:154px !important;height:104px !important;}
}
@media (max-width:980px){
  .hero-home,.hero-inner-home{height:670px !important;min-height:670px !important;max-height:670px !important;}
  .hero-inner-home{grid-template-rows:minmax(0,1fr) 160px !important;}
  .hero-strip-area{height:160px !important;min-height:160px !important;max-height:160px !important;}
  .hero-card{width:152px !important;min-width:152px !important;height:102px !important;}
}
@media (max-width:680px){
  .hero-home,.hero-inner-home{height:700px !important;min-height:700px !important;max-height:700px !important;}
  .hero-inner-home{grid-template-rows:minmax(0,1fr) 154px !important;}
  .hero-strip-area{height:154px !important;min-height:154px !important;max-height:154px !important;}
  .hero-card{width:138px !important;min-width:138px !important;height:96px !important;}
}


/* === Home hero v2 safe adjustment ===
   Purpose: grow the hero slightly downward, make hero cards clearly landscape,
   and keep mobile arrow controls tappable. Scope: home hero only. */
.hero-home,
.hero-inner-home{
  height:680px !important;
  min-height:680px !important;
  max-height:680px !important;
}
.hero-inner-home{
  display:flex !important;
  flex-direction:column !important;
}
.hero-main-home{
  flex:1 1 auto !important;
  min-height:0 !important;
}
.hero-strip-area{
  height:150px !important;
  min-height:150px !important;
  max-height:150px !important;
  padding:10px 58px 12px !important;
  overflow:visible !important;
  position:relative !important;
  z-index:8 !important;
}
.hero-strip-wrap{
  height:100% !important;
  overflow:hidden !important;
  position:relative !important;
  z-index:1 !important;
}
.hero-strip{
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
}
.hero-card{
  flex:0 1 calc((100% - 84px) / 8) !important;
  width:calc((100% - 84px) / 8) !important;
  min-width:0 !important;
  max-width:176px !important;
  height:104px !important;
  aspect-ratio:16 / 9 !important;
  border-radius:16px !important;
}
.hero-card img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
}
.hero-arrow{
  z-index:60 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  -webkit-tap-highlight-color:transparent !important;
}
.hero-arrow.left{left:14px !important;}
.hero-arrow.right{right:14px !important;}

@media (max-width:1280px){
  .hero-home,.hero-inner-home{
    height:670px !important;
    min-height:670px !important;
    max-height:670px !important;
  }
  .hero-strip-area{height:148px !important;min-height:148px !important;max-height:148px !important;padding:10px 54px 12px !important;}
  .hero-card{
    flex-basis:calc((100% - 60px) / 6) !important;
    width:calc((100% - 60px) / 6) !important;
    max-width:170px !important;
    height:102px !important;
  }
}
@media (max-width:980px){
  .hero-home,.hero-inner-home{
    height:700px !important;
    min-height:700px !important;
    max-height:700px !important;
  }
  .hero-strip-area{height:144px !important;min-height:144px !important;max-height:144px !important;padding:10px 48px 12px !important;}
  .hero-card{
    flex-basis:calc((100% - 36px) / 4) !important;
    width:calc((100% - 36px) / 4) !important;
    max-width:166px !important;
    height:98px !important;
  }
}
@media (max-width:680px){
  .hero-home,.hero-inner-home{
    height:635px !important;
    min-height:635px !important;
    max-height:635px !important;
  }
  .hero-strip-area{
    height:130px !important;
    min-height:130px !important;
    max-height:130px !important;
    padding:8px 42px 10px !important;
  }
  .hero-strip{gap:10px !important;}
  .hero-card{
    flex-basis:calc((100% - 10px) / 2) !important;
    width:calc((100% - 10px) / 2) !important;
    min-width:0 !important;
    max-width:156px !important;
    height:88px !important;
    border-radius:13px !important;
  }
  .hero-card-title{font-size:11px !important;line-height:1.12 !important;}
  .hero-card-meta{display:none !important;}
  .hero-arrow{width:38px !important;height:38px !important;font-size:26px !important;}
  .hero-arrow.left{left:2px !important;}
  .hero-arrow.right{right:2px !important;}
}
@media (max-width:420px){
  .hero-home,.hero-inner-home{
    height:650px !important;
    min-height:650px !important;
    max-height:650px !important;
  }
  .hero-strip-area{padding-left:40px !important;padding-right:40px !important;}
  .hero-card{height:82px !important;}
}


/* === HERO V3 FINAL OVERRIDE - homepage only ===
   Cache-busted from index.html. This block is intentionally last. */
body .hero-home,
body .hero-home .hero-inner-home{
  height:720px !important;
  min-height:720px !important;
  max-height:none !important;
}
body .hero-home .hero-inner-home{
  display:flex !important;
  flex-direction:column !important;
}
body .hero-home .hero-main-home{
  flex:1 1 auto !important;
  min-height:0 !important;
}
body .hero-home .hero-strip-area{
  height:158px !important;
  min-height:158px !important;
  max-height:158px !important;
  padding:12px 60px 14px !important;
  overflow:visible !important;
  position:relative !important;
  z-index:20 !important;
}
body .hero-home .hero-strip-wrap{
  height:100% !important;
  overflow:hidden !important;
  position:relative !important;
}
body .hero-home .hero-strip{
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
}
body .hero-home .hero-card{
  flex:0 0 calc((100% - 84px) / 7) !important;
  width:calc((100% - 84px) / 7) !important;
  min-width:0 !important;
  max-width:190px !important;
  height:auto !important;
  aspect-ratio:16 / 9 !important;
  border-radius:16px !important;
}
body .hero-home .hero-card img,
body .hero-home .hero-card-fallback{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
}
body .hero-home .hero-arrow{
  z-index:999 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
}
body .hero-home .hero-arrow.left{left:14px !important;}
body .hero-home .hero-arrow.right{right:14px !important;}

@media (max-width:1280px){
  body .hero-home, body .hero-home .hero-inner-home{height:700px !important;}
  body .hero-home .hero-strip-area{height:154px !important;padding-left:56px !important;padding-right:56px !important;}
  body .hero-home .hero-card{flex-basis:calc((100% - 60px) / 6) !important;width:calc((100% - 60px) / 6) !important;max-width:180px !important;aspect-ratio:16/9 !important;}
}
@media (max-width:980px){
  body .hero-home, body .hero-home .hero-inner-home{height:710px !important;}
  body .hero-home .hero-strip-area{height:150px !important;padding-left:50px !important;padding-right:50px !important;}
  body .hero-home .hero-card{flex-basis:calc((100% - 42px) / 4) !important;width:calc((100% - 42px) / 4) !important;max-width:172px !important;aspect-ratio:16/9 !important;}
}
@media (max-width:680px){
  body .hero-home, body .hero-home .hero-inner-home{height:670px !important;}
  body .hero-home .hero-strip-area{height:136px !important;padding:9px 42px 11px !important;}
  body .hero-home .hero-strip{gap:10px !important;}
  body .hero-home .hero-card{flex-basis:calc((100% - 10px) / 2) !important;width:calc((100% - 10px) / 2) !important;max-width:170px !important;aspect-ratio:16/9 !important;border-radius:13px !important;}
  body .hero-home .hero-card-title{font-size:11px !important;}
  body .hero-home .hero-card-meta{display:none !important;}
  body .hero-home .hero-arrow{width:40px !important;height:40px !important;font-size:26px !important;}
  body .hero-home .hero-arrow.left{left:1px !important;}
  body .hero-home .hero-arrow.right{right:1px !important;}
}
@media (max-width:420px){
  body .hero-home, body .hero-home .hero-inner-home{height:685px !important;}
  body .hero-home .hero-strip-area{height:128px !important;padding-left:39px !important;padding-right:39px !important;}
}


/* === Hero v4: bottom-aligned vertical poster cards, keep hero height unchanged === */
.hero-inner-home{
  grid-template-rows:minmax(0,1fr) 224px !important;
  gap:8px !important;
}
.hero-main-home{
  min-height:0 !important;
  overflow:hidden !important;
}
.hero-strip-area{
  height:224px !important;
  min-height:224px !important;
  max-height:224px !important;
  padding:6px 58px 12px 58px !important;
  margin:0 !important;
  align-self:end !important;
  overflow:hidden !important;
}
.hero-strip-wrap{
  height:100% !important;
  overflow:hidden !important;
}
.hero-strip{
  height:100% !important;
  align-items:flex-end !important;
  justify-content:center !important;
  gap:18px !important;
}
.hero-card{
  width:148px !important;
  min-width:148px !important;
  max-width:148px !important;
  height:206px !important;
  border-radius:17px !important;
  flex:0 0 148px !important;
  background:#163c6e !important;
}
.hero-card img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
}
.hero-card-text{left:11px !important;right:11px !important;bottom:12px !important;}
.hero-card-title{font-size:13px !important;line-height:1.18 !important;}
.hero-card-meta{font-size:10.5px !important;margin-top:7px !important;gap:6px !important;}
.hero-arrow{
  top:auto !important;
  bottom:92px !important;
  transform:none !important;
}
.hero-arrow.left{left:14px !important;}
.hero-arrow.right{right:14px !important;}

@media (max-width:1280px) and (min-width:981px){
  .hero-inner-home{grid-template-rows:minmax(0,1fr) 216px !important;}
  .hero-strip-area{height:216px !important;min-height:216px !important;max-height:216px !important;padding-left:52px !important;padding-right:52px !important;}
  .hero-strip{gap:16px !important;}
  .hero-card{width:138px !important;min-width:138px !important;max-width:138px !important;height:196px !important;flex-basis:138px !important;}
  .hero-arrow{bottom:88px !important;}
}
@media (max-width:980px) and (min-width:681px){
  .hero-inner-home{grid-template-rows:minmax(0,1fr) 212px !important;}
  .hero-strip-area{height:212px !important;min-height:212px !important;max-height:212px !important;padding:6px 48px 12px 48px !important;}
  .hero-strip{gap:16px !important;align-items:flex-end !important;justify-content:center !important;}
  .hero-card{width:132px !important;min-width:132px !important;max-width:132px !important;height:190px !important;flex-basis:132px !important;}
  .hero-arrow{bottom:86px !important;}
}
@media (max-width:680px){
  .hero-inner-home{grid-template-rows:minmax(0,1fr) 190px !important;}
  .hero-strip-area{height:190px !important;min-height:190px !important;max-height:190px !important;padding:6px 42px 10px 42px !important;}
  .hero-strip{gap:14px !important;align-items:flex-end !important;justify-content:center !important;}
  .hero-card{width:118px !important;min-width:118px !important;max-width:118px !important;height:172px !important;flex-basis:118px !important;}
  .hero-arrow{width:44px !important;height:44px !important;bottom:74px !important;z-index:10 !important;}
  .hero-arrow.left{left:4px !important;}
  .hero-arrow.right{right:4px !important;}
}


/* === Hero v5 final override: vertical poster cards at bottom, keep current hero height === */
.hero-inner-home{display:flex!important;flex-direction:column!important;}
.hero-main-home{flex:1 1 auto!important;min-height:0!important;overflow:hidden!important;}
.hero-strip-area{margin-top:auto!important;height:254px!important;min-height:254px!important;max-height:254px!important;padding:8px 62px 14px!important;overflow:hidden!important;align-self:stretch!important;}
.hero-strip-wrap{height:100%!important;overflow:hidden!important;}
.hero-strip{height:100%!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;gap:18px!important;transform:none!important;}
.hero-card{flex:0 0 162px!important;width:162px!important;min-width:162px!important;max-width:162px!important;height:232px!important;min-height:232px!important;max-height:232px!important;border-radius:18px!important;}
.hero-card img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center center!important;display:block!important;}
.hero-card-text{left:12px!important;right:12px!important;bottom:12px!important;}
.hero-card-title{font-size:13px!important;line-height:1.18!important;}
.hero-card-meta{font-size:10.5px!important;margin-top:7px!important;gap:6px!important;}
.hero-arrow{top:auto!important;bottom:104px!important;transform:none!important;z-index:12!important;}
.hero-arrow.left{left:18px!important}.hero-arrow.right{right:18px!important}
@media (max-width:1280px) and (min-width:981px){.hero-strip-area{height:240px!important;min-height:240px!important;max-height:240px!important;padding-left:56px!important;padding-right:56px!important}.hero-card{flex-basis:150px!important;width:150px!important;min-width:150px!important;max-width:150px!important;height:218px!important;min-height:218px!important;max-height:218px!important}.hero-arrow{bottom:98px!important}}
@media (max-width:980px) and (min-width:681px){.hero-strip-area{height:226px!important;min-height:226px!important;max-height:226px!important;padding:8px 52px 12px!important}.hero-strip{gap:16px!important}.hero-card{flex-basis:142px!important;width:142px!important;min-width:142px!important;max-width:142px!important;height:206px!important;min-height:206px!important;max-height:206px!important}.hero-arrow{bottom:91px!important}}
@media (max-width:680px){.hero-strip-area{height:202px!important;min-height:202px!important;max-height:202px!important;padding:7px 44px 10px!important}.hero-strip{gap:14px!important}.hero-card{flex-basis:124px!important;width:124px!important;min-width:124px!important;max-width:124px!important;height:182px!important;min-height:182px!important;max-height:182px!important}.hero-arrow{width:44px!important;height:44px!important;bottom:80px!important}.hero-arrow.left{left:4px!important}.hero-arrow.right{right:4px!important}}


/* === HERO V6: final bottom-aligned vertical poster cards ===
   Scope: home hero only. Does not change hero outer height, colors, header, or other sections. */
.hero-home .hero-inner-home{
  display:grid !important;
  grid-template-rows:minmax(0,1fr) 260px !important;
  align-items:stretch !important;
}
.hero-home .hero-strip-area{
  align-self:end !important;
  height:260px !important;
  min-height:260px !important;
  max-height:260px !important;
  padding:8px 70px 24px !important;
  margin-top:0 !important;
  overflow:hidden !important;
}
.hero-home .hero-strip-wrap{
  height:100% !important;
  overflow:hidden !important;
}
.hero-home .hero-strip{
  height:100% !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  gap:22px !important;
  transform:none !important;
}
.hero-home .hero-card{
  flex:0 0 158px !important;
  width:158px !important;
  min-width:158px !important;
  max-width:158px !important;
  height:232px !important;
  min-height:232px !important;
  max-height:232px !important;
  aspect-ratio:158 / 232 !important;
  border-radius:18px !important;
  overflow:hidden !important;
}
.hero-home .hero-card img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
}
.hero-home .hero-card-text{
  left:11px !important;
  right:11px !important;
  bottom:12px !important;
}
.hero-home .hero-card-title{
  font-size:12.5px !important;
  line-height:1.15 !important;
}
.hero-home .hero-card-meta{
  font-size:10.5px !important;
  line-height:1.15 !important;
  margin-top:6px !important;
}
.hero-home .hero-arrow{
  top:auto !important;
  bottom:116px !important;
  transform:none !important;
  z-index:20 !important;
}
.hero-home .hero-arrow.left{left:22px !important;}
.hero-home .hero-arrow.right{right:22px !important;}

@media (max-width:1280px) and (min-width:981px){
  .hero-home .hero-inner-home{grid-template-rows:minmax(0,1fr) 250px !important;}
  .hero-home .hero-strip-area{height:250px !important;min-height:250px !important;max-height:250px !important;padding:8px 64px 22px !important;}
  .hero-home .hero-strip{gap:20px !important;}
  .hero-home .hero-card{flex-basis:148px !important;width:148px !important;min-width:148px !important;max-width:148px !important;height:218px !important;min-height:218px !important;max-height:218px !important;aspect-ratio:148 / 218 !important;}
  .hero-home .hero-arrow{bottom:108px !important;}
}
@media (max-width:980px) and (min-width:681px){
  .hero-home .hero-inner-home{grid-template-rows:minmax(0,1fr) 232px !important;}
  .hero-home .hero-strip-area{height:232px !important;min-height:232px !important;max-height:232px !important;padding:8px 58px 20px !important;}
  .hero-home .hero-strip{gap:18px !important;}
  .hero-home .hero-card{flex-basis:136px !important;width:136px !important;min-width:136px !important;max-width:136px !important;height:200px !important;min-height:200px !important;max-height:200px !important;aspect-ratio:136 / 200 !important;}
  .hero-home .hero-arrow{bottom:98px !important;}
}
@media (max-width:680px){
  .hero-home .hero-inner-home{grid-template-rows:minmax(0,1fr) 208px !important;}
  .hero-home .hero-strip-area{height:208px !important;min-height:208px !important;max-height:208px !important;padding:7px 48px 18px !important;}
  .hero-home .hero-strip{gap:14px !important;}
  .hero-home .hero-card{flex-basis:116px !important;width:116px !important;min-width:116px !important;max-width:116px !important;height:172px !important;min-height:172px !important;max-height:172px !important;aspect-ratio:116 / 172 !important;}
  .hero-home .hero-card-title{font-size:11.5px !important;}
  .hero-home .hero-card-meta{font-size:9.5px !important;}
  .hero-home .hero-arrow{width:44px !important;height:44px !important;bottom:82px !important;}
  .hero-home .hero-arrow.left{left:5px !important;}
  .hero-home .hero-arrow.right{right:5px !important;}
}

/* Hero v15 patch: final sizing is locked from index.html for balanced 9-card rail. */


/* Hero v18: card size reduced by an additional ~2% from v17. JS in index.html is the main lock; these are only fallback CSS values. */
@media (min-width:981px){
  .hero-home .hero-card{flex-basis:143px !important;width:143px !important;min-width:143px !important;max-width:166px !important;}
}
@media (max-width:980px) and (min-width:681px){
  .hero-home .hero-card{flex-basis:131px !important;width:131px !important;min-width:131px !important;max-width:139px !important;}
}
@media (max-width:680px){
  .hero-home .hero-card{flex-basis:113px !important;width:113px !important;min-width:113px !important;max-width:119px !important;}
}


/* Hero v19: current card size reduced by about 7%. Hero height, text, colors and layout remain unchanged. */
@media (min-width:981px){
  .hero-home .hero-card{flex-basis:133px !important;width:133px !important;min-width:133px !important;max-width:154px !important;}
}
@media (max-width:980px) and (min-width:681px){
  .hero-home .hero-card{flex-basis:122px !important;width:122px !important;min-width:122px !important;max-width:129px !important;}
}
@media (max-width:680px){
  .hero-home .hero-card{flex-basis:105px !important;width:105px !important;min-width:105px !important;max-width:111px !important;}
}


/* Hero v20: reduce strip inner bottom/top padding so vertical cards are not clipped by the holder. */
.hero-home .hero-strip-area{padding-top:4px !important;padding-bottom:12px !important;overflow:visible !important;}
.hero-home .hero-strip-wrap,.hero-home .hero-strip{overflow:visible !important;}
@media (max-width:680px){.hero-home .hero-strip-area{padding-top:4px !important;padding-bottom:10px !important;}}


/* === Dramas stats cards alignment fix v1 === */
.page-hero-grid{
  align-items:center !important;
}
.stats{
  align-items:stretch !important;
}
.stat-card{
  min-height:92px !important;
  height:92px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:flex-start !important;
  gap:8px !important;
  padding:14px 16px !important;
}
.stat-label{
  min-height:30px !important;
  display:flex !important;
  align-items:center !important;
  margin:0 !important;
}
.stat-value{
  margin-top:0 !important;
  line-height:1 !important;
}
@media (max-width:980px){
  .stat-card{
    height:auto !important;
    min-height:78px !important;
  }
  .stat-label{
    min-height:0 !important;
  }
}