:root{--bg:#09090d;--surface:#121219;--surface2:#1a1a23;--text:#f7f7fa;--muted:#9b9ba7;--line:rgba(255,255,255,.09);--accent:#e31d3f;--accent2:#ff5870;--good:#42d392;--shadow:0 25px 80px rgba(0,0,0,.38)}
:root.light{--bg:#f4f4f6;--surface:#fff;--surface2:#ececf0;--text:#17171b;--muted:#6c6c75;--line:rgba(0,0,0,.09);--accent:#d7193f;--accent2:#ef4561;--good:#16895d;--shadow:0 25px 80px rgba(20,20,30,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{text-decoration:none;color:inherit}button,input,select{font:inherit}button{cursor:pointer}
.topbar{height:72px;position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:34px;padding:0 5vw;background:color-mix(in srgb,var(--bg) 92%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}
.brand{display:flex;align-items:center;gap:10px;font-weight:950}.brand-mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),#8d112a);box-shadow:0 9px 30px rgba(227,29,63,.25)}.brand-text{font-size:13px;letter-spacing:.06em}.brand-text span{color:var(--accent)}
.nav{display:flex;gap:25px;flex:1}.nav a{font-size:13px;font-weight:750;color:var(--muted)}.nav a:hover,.nav a.active{color:var(--text)}
.actions{display:flex;align-items:center;gap:6px}.icon-btn,.theme-btn,.lang-btn,.signin{height:36px;border:0;background:transparent;color:var(--text);border-radius:9px}.icon-btn,.theme-btn{width:36px;font-size:20px}.lang-btn{padding:0 9px;font-size:11px;font-weight:850}.signin{background:var(--surface2);padding:0 14px;font-size:11px;font-weight:850}
.container{width:min(1180px,90vw);margin:auto}.page-head{padding:58px 0 25px}.kicker{font-size:10px;letter-spacing:.18em;font-weight:950;color:var(--accent);margin:0 0 10px}.page-head h1{margin:0;font-size:42px;letter-spacing:-.04em}.page-head p{color:var(--muted);max-width:680px;line-height:1.6}
.hero{min-height:470px;padding:70px 7vw;display:flex;align-items:center;overflow:hidden;background:radial-gradient(circle at 75% 50%,rgba(227,29,63,.18),transparent 32%)}.hero-copy{max-width:650px;z-index:2}.hero h1{font-size:clamp(48px,7vw,86px);line-height:.93;letter-spacing:-.06em;margin:0 0 22px}.hero h1 span{color:var(--accent)}.hero-sub{color:var(--muted);line-height:1.7;max-width:590px}.hero-actions{display:flex;gap:9px;margin-top:25px}.primary,.secondary{padding:13px 18px;border-radius:10px;font-size:12px;font-weight:900}.primary{background:var(--accent);color:#fff}.secondary{background:var(--surface);border:1px solid var(--line)}
.hero-art{flex:1;min-width:330px;height:330px;position:relative}.orb{position:absolute;border:1px solid rgba(227,29,63,.28);border-radius:50%;transform:rotate(-25deg)}.orb.a{width:420px;height:250px;right:-60px;top:40px}.orb.b{width:350px;height:210px;right:10px;top:60px}.hero-tile{position:absolute;right:65px;top:45px;width:245px;height:275px;border-radius:23px;padding:25px;background:linear-gradient(150deg,#28111b,#110e13);border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow);display:flex;flex-direction:column}.hero-tile small{font-size:9px;letter-spacing:.18em;color:#ff7b8e;font-weight:900}.hero-tile strong{margin-top:auto;font-size:28px}.hero-tile span{font-size:10px;color:#aaa;margin-top:5px}.play-circle{margin-top:20px;width:44px;height:44px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;font-size:12px}
.section{padding:40px 0 5px}.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:18px}.section-head h2{margin:0;font-size:24px;letter-spacing:-.03em}.section-head .mini{color:var(--muted);font-size:11px;font-weight:800}.show-all{color:var(--muted);font-size:11px;font-weight:850}.show-all:hover{color:var(--text)}
.continue-row{display:flex;gap:13px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}.continue-card{min-width:280px;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}.thumb{height:140px;background:linear-gradient(135deg,#2a111b,#101118);position:relative}.thumb-label{position:absolute;top:13px;left:13px;font-size:9px;font-weight:900;letter-spacing:.13em;color:#ff8797}.watch-progress{height:4px;background:var(--accent);position:absolute;bottom:0;left:0}.continue-info{padding:13px}.continue-info strong{font-size:13px}.continue-info p{margin:5px 0 0;color:var(--muted);font-size:10px}
.upcoming{border:1px solid var(--line);border-radius:16px;background:linear-gradient(100deg,var(--surface),rgba(227,29,63,.08));padding:22px;display:flex;align-items:center;gap:20px}.datebox{width:78px;height:78px;border-radius:14px;background:var(--surface2);display:grid;place-items:center;align-content:center}.datebox span{font-size:8px;color:var(--accent);font-weight:900;letter-spacing:.14em}.datebox strong{font-size:18px}.upcoming-copy{flex:1}.upcoming-copy small{color:var(--muted);font-size:10px}.upcoming-copy h3{margin:4px 0;font-size:19px}.upcoming-copy p{margin:0;color:var(--muted);font-size:11px}.badge{color:var(--accent);border:1px solid rgba(227,29,63,.25);padding:7px 9px;border-radius:7px;font-size:9px;font-weight:900;letter-spacing:.1em}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.18s}.card:hover{transform:translateY(-3px);border-color:rgba(227,29,63,.35)}.art{height:190px;background:linear-gradient(135deg,#2a111b,#11121a);position:relative;display:flex;align-items:flex-end;padding:14px}.art:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 25%,rgba(227,29,63,.3),transparent 35%)}.epno{position:relative;z-index:1;font-size:9px;color:#ff8999;font-weight:900;letter-spacing:.12em}.new{position:absolute;right:10px;top:10px;z-index:2;background:var(--accent);color:#fff;padding:5px 7px;border-radius:6px;font-size:8px;font-weight:900}.card-info{padding:12px}.card-info h3{font-size:13px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-info p{font-size:10px;color:var(--muted);margin:5px 0 0}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}.filter{border:1px solid var(--line);background:var(--surface);color:var(--muted);padding:8px 11px;border-radius:8px;font-size:10px;font-weight:850}.filter.active,.filter:hover{background:var(--accent);border-color:var(--accent);color:#fff}.searchbar{width:100%;padding:13px 14px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:10px;outline:none;margin-bottom:16px}.season-tabs{display:flex;gap:6px;overflow:auto;padding-bottom:10px;margin-bottom:12px}.season-tab{border:0;background:var(--surface2);color:var(--muted);padding:8px 12px;border-radius:8px;font-size:10px;font-weight:900;white-space:nowrap}.season-tab.active{background:var(--accent);color:#fff}
.watch-shell{padding:30px 0 60px}.player{background:#000;border-radius:15px;overflow:hidden;position:relative;box-shadow:var(--shadow)}.player video{width:100%;display:block;aspect-ratio:16/9;background:#000}.player-ui{padding:13px;background:#09090d}.progress-wrap{height:5px;background:#30303a;border-radius:8px;cursor:pointer;touch-action:none}.progress-bar{height:100%;width:0;background:var(--accent);border-radius:8px}.controls{display:flex;align-items:center;gap:7px;margin-top:10px}.control{border:0;background:#17171e;color:#fff;border-radius:8px;height:34px;min-width:34px}.time{font-size:10px;color:#aaa;margin:0 6px}.controls-spacer{flex:1}.watch-meta{padding:24px 0}.watch-meta h1{font-size:31px;margin:0}.watch-meta .sub{color:var(--muted);font-size:11px;margin:6px 0 16px}.watch-actions{display:flex;gap:8px;flex-wrap:wrap}.watch-action{border:1px solid var(--line);background:var(--surface);color:var(--text);padding:9px 12px;border-radius:8px;font-size:10px;font-weight:850}.watch-action:hover{border-color:rgba(227,29,63,.35)}.description{margin-top:20px;border-top:1px solid var(--line);padding-top:18px;color:var(--muted);font-size:12px;line-height:1.7}.prevnext{display:flex;justify-content:space-between;gap:10px;margin-top:24px}.prevnext a{padding:12px 15px;background:var(--surface);border:1px solid var(--line);border-radius:10px;font-size:10px;font-weight:850}
.footer{margin-top:70px;padding:40px 5vw 25px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:30px}.footer-links{display:flex;justify-content:flex-end;gap:55px}.footer-links div{display:flex;flex-direction:column;gap:8px}.footer-links b{font-size:10px}.footer-links a{font-size:10px;color:var(--muted)}.copyright{grid-column:1/-1;color:var(--muted);font-size:10px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.68);backdrop-filter:blur(5px);z-index:100;padding:70px 15px}.modal-box{width:min(700px,100%);margin:auto;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow)}.modal-top{display:flex;justify-content:space-between;align-items:center}.close{border:0;background:var(--surface2);color:var(--text);width:33px;height:33px;border-radius:8px;font-size:20px}.modal input{width:100%;margin-top:12px;padding:13px;border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:9px;outline:none}.results{margin-top:12px;display:grid;gap:7px}.result{display:flex;justify-content:space-between;padding:11px;background:var(--surface2);border-radius:8px;font-size:11px}.result small{color:var(--muted)}
.lang-pop{position:fixed;z-index:80;right:5vw;top:64px;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:7px;display:grid;grid-template-columns:1fr 1fr;box-shadow:var(--shadow)}.lang-pop button{border:0;background:transparent;color:var(--text);font-size:9px;padding:8px}.lang-pop button:hover{background:var(--surface2);border-radius:6px}
.empty{padding:28px;background:var(--surface);border:1px dashed var(--line);border-radius:12px;color:var(--muted);font-size:11px}
[hidden]{display:none!important}
@media(max-width:950px){.grid{grid-template-columns:repeat(3,1fr)}.nav{gap:13px}.nav a:nth-child(3),.nav a:nth-child(4){display:none}.hero-art{min-width:280px}.hero-tile{right:10px}}
@media(max-width:680px){.topbar{padding:0 4vw;height:64px;gap:12px}.brand-text{display:none}.actions{margin-left:auto}.lang-btn{display:none}.signin{padding:0 10px}.hero{display:block;padding:50px 6vw 25px}.hero-art{height:225px;min-width:0;margin-top:15px}.hero-tile{width:190px;height:205px;right:calc(50% - 95px);top:10px;padding:20px}.hero-tile strong{font-size:22px}.orb.a{width:300px;height:170px;right:calc(50% - 150px)}.orb.b{width:255px;height:150px;right:calc(50% - 127px)}.container{width:88vw}.grid{grid-template-columns:repeat(2,1fr);gap:9px}.art{height:145px}.upcoming{padding:15px;gap:12px}.datebox{width:60px;height:60px}.badge{display:none}.footer{grid-template-columns:1fr}.footer-links{justify-content:flex-start}.watch-meta h1{font-size:25px}}


/* ===== MiraculousHub responsive/mobile pass ===== */
html { overflow-x: hidden; }
body { overflow-x: hidden; }

.live-section {
  width: min(1200px, calc(100% - 32px));
  margin: 28px auto 42px;
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  margin-bottom: 6px;
}

.live-player-card {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: #111;
  box-shadow: 0 14px 45px rgba(0,0,0,.22);
}

.live-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #050505;
}

.live-player video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.live-player-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 24px;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(45,45,45,.28), rgba(0,0,0,.82));
}

.live-player-overlay.hidden { display: none; }

.live-player-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.12);
}

.live-player-overlay span {
  opacity: .72;
  font-size: .9rem;
}

.live-player-info {
  min-height: 58px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.live-player-info > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.live-player-info span {
  font-size: .78rem;
  opacity: .65;
}

.live-action {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 13px;
  border-radius: 10px;
  cursor: pointer;
}

@media (max-width: 700px) {
  .live-section {
    width: 100%;
    margin: 20px 0 30px;
  }

  .live-section .section-heading {
    padding: 0 14px;
  }

  .live-player-card {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .live-player {
    aspect-ratio: 16 / 9;
  }

  .live-player-info {
    padding: 9px 12px;
  }

  .live-action {
    min-height: 42px;
  }

  /* Generic mobile layout fixes */
  .container, .content, main, .page-content {
    max-width: 100%;
  }

  img, video, iframe {
    max-width: 100%;
  }

  .grid, .episode-grid, .cards, .episodes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  nav, .nav, .navbar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  nav::-webkit-scrollbar, .nav::-webkit-scrollbar, .navbar::-webkit-scrollbar {
    display: none;
  }

  button, a {
    -webkit-tap-highlight-color: transparent;
  }
}

@media (max-width: 420px) {
  .grid, .episode-grid, .cards, .episodes-grid {
    grid-template-columns: 1fr !important;
  }

  .live-player-info {
    align-items: stretch;
  }

  .live-action {
    padding-inline: 10px;
  }
}

/* Catalogue + mobile polish */
.art{position:relative}.availability{position:absolute;right:12px;bottom:12px;padding:5px 7px;border-radius:7px;background:rgba(0,0,0,.68);color:#fff;font-size:8px;font-weight:900;letter-spacing:.08em}.card-unavailable{opacity:.82}.card-unavailable:hover{opacity:1}
@media(max-width:760px){
 .topbar{height:60px;padding:0 4vw;gap:12px}.brand-text{font-size:11px}.brand-mark{width:31px;height:31px}.nav{gap:12px;overflow:hidden}.nav a{font-size:11px}.actions{margin-left:auto}.signin,.lang-btn{display:none}.icon-btn,.theme-btn{width:31px}
 .container{width:92vw}.hero{min-height:auto;padding:48px 6vw 30px}.hero-art{display:none}.hero h1{font-size:clamp(42px,14vw,64px)}.hero-sub{font-size:13px}.hero-actions{flex-wrap:wrap}
 .page-head{padding:38px 0 20px}.page-head h1{font-size:36px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.card-info{padding:10px}.card-info h3{font-size:12px}.art{height:130px}
 .season-tabs{overflow-x:auto;white-space:nowrap;padding-bottom:5px}.season-tab{flex:0 0 auto}
 .live-section{padding-top:25px}.live-player-card{border-radius:14px;overflow:hidden}.live-player video{width:100%;height:auto;aspect-ratio:16/9}
}
@media(max-width:420px){.nav a:nth-child(n+3){display:none}.grid{gap:8px}.art{height:115px}.card-info h3{font-size:11px}.epno{font-size:7px}}
@media(max-width:900px) and (orientation:landscape){
 .topbar{height:52px}.hero{padding:25px 5vw}.hero-art{display:none}.container{width:94vw}.grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}