/* AnimeOra V7.54.6 — Midnight Premium brand polish.
   Keeps the AnimeOra layout and logo-matched orange, removes orange glow elevation,
   and lifts the midnight surfaces for improved visibility. */
:root[data-site-theme="midnight"]{
  --brand-primary:#fc6002;
  --brand-primary-hover:#ff740f;
  --brand-primary-bright:#ff9000;
  --brand-primary-rgb:252,96,2;
  --orange:#fc6002;
  --orange-2:#ff9000;
  --bg:#101c2b;
  --bg-2:#101c2b;
  --bg-3:#101c2b;
  --panel:rgba(24,39,58,.94);
  --panel-2:rgba(30,48,70,.96);
  --card:#17283b;
  --card-2:#1c3047;
  --line:rgba(180,202,226,.11);
  --line-2:rgba(180,202,226,.20);
  --shadow:0 20px 56px rgba(2,8,18,.32);
  --plyr-color-main:#fc6002;
}
:root[data-site-theme="midnight"] body,
:root[data-site-theme="midnight"] body.site-body{background:#101c2b!important;background-image:none!important;}
:root[data-site-theme="midnight"] body:before,
:root[data-site-theme="midnight"] body:after,
:root[data-site-theme="midnight"] .site-bg{background-image:none!important;}
:root[data-site-theme="midnight"] .topbar{background:rgba(16,28,43,.86)}
:root[data-site-theme="midnight"] .topbar.is-scrolled{background:rgba(16,28,43,.97);box-shadow:0 12px 34px rgba(2,8,18,.26)}
:root[data-site-theme="midnight"] .nav-drawer,
:root[data-site-theme="midnight"] .search-panel,
:root[data-site-theme="midnight"] .member-dropdown,
:root[data-site-theme="midnight"] .auth-modal{background:rgba(18,31,48,.98)}

/* Neutral elevation: orange remains an accent, never the depth/shadow colour. */
:root[data-site-theme="midnight"] .btn,
:root[data-site-theme="midnight"] button,
:root[data-site-theme="midnight"] .brand-mark,
:root[data-site-theme="midnight"] .anime-card,
:root[data-site-theme="midnight"] .latest-card,
:root[data-site-theme="midnight"] .card,
:root[data-site-theme="midnight"] .panel,
:root[data-site-theme="midnight"] .sidebar,
:root[data-site-theme="midnight"] .glass,
:root[data-site-theme="midnight"] .hero-slider,
:root[data-site-theme="midnight"] .details-hero,
:root[data-site-theme="midnight"] .top-anime-item,
:root[data-site-theme="midnight"] .latest-item .ani{box-shadow:0 12px 34px rgba(2,8,18,.24)}
:root[data-site-theme="midnight"] .anime-card:hover,
:root[data-site-theme="midnight"] .latest-card:hover,
:root[data-site-theme="midnight"] .card:hover,
:root[data-site-theme="midnight"] .top-anime-item:hover,
:root[data-site-theme="midnight"] .latest-item:hover .ani{box-shadow:0 18px 44px rgba(2,8,18,.34)}
:root[data-site-theme="midnight"] .btn.ghost,
:root[data-site-theme="midnight"] button.ghost,
:root[data-site-theme="midnight"] .ghost-btn,
:root[data-site-theme="midnight"] .icon-btn{box-shadow:none}

/* Softer blue surfaces and borders improve contrast without changing layout. */
:root[data-site-theme="midnight"] .panel,
:root[data-site-theme="midnight"] .sidebar,
:root[data-site-theme="midnight"] .glass{background:linear-gradient(180deg,rgba(30,48,70,.96),rgba(23,40,59,.96))}
:root[data-site-theme="midnight"] .card,
:root[data-site-theme="midnight"] .latest-item .ani{background:linear-gradient(180deg,#1c3047,#17283b)}
:root[data-site-theme="midnight"] .watch-actions,
:root[data-site-theme="midnight"] .episode-tools-wide,
:root[data-site-theme="midnight"] .info-tile{background:rgba(255,255,255,.045)}

/* V7.54.6 — Midnight Premium atmosphere and watch-page artwork polish. */
:root[data-site-theme="midnight"]{
  --bg:#0d1826;
  --bg-2:#101c2b;
  --bg-3:#132235;
  --midnight-chrome:#09121e;
  --midnight-page:#0d1826;
  --midnight-page-rgb:13,24,38;
}

/* Restore restrained depth without returning to the brighter flat background. */
:root[data-site-theme="midnight"] body,
:root[data-site-theme="midnight"] body.site-body{
  background-color:var(--midnight-page)!important;
  background-image:
    radial-gradient(circle at 12% -8%,rgba(42,78,116,.24),transparent 34%),
    radial-gradient(circle at 88% 12%,rgba(28,60,96,.16),transparent 30%),
    linear-gradient(180deg,#0f1b2a 0%,#0d1826 48%,#0b1522 100%)!important;
  background-attachment:fixed!important;
}
:root[data-site-theme="midnight"] body:before,
:root[data-site-theme="midnight"] body:after,
:root[data-site-theme="midnight"] .site-bg{background-image:none!important}

/* Navbar and footer use the same darker chrome so the page is framed consistently. */
:root[data-site-theme="midnight"] .topbar{
  background:rgba(9,18,30,.95)!important;
  border-bottom-color:rgba(181,203,226,.075)!important;
  box-shadow:0 10px 28px rgba(1,6,14,.22)!important;
}
:root[data-site-theme="midnight"] .topbar.is-scrolled{
  background:rgba(9,18,30,.985)!important;
  box-shadow:0 14px 34px rgba(1,6,14,.34)!important;
}
:root[data-site-theme="midnight"] .footer{
  background:var(--midnight-chrome)!important;
  border-top-color:rgba(181,203,226,.075)!important;
}
:root[data-site-theme="midnight"] .footer-glow{opacity:.18!important}

/* The homepage sidebar is layout-only; its widgets provide their own surfaces. */
:root[data-site-theme="midnight"] .home-sidebar,
:root[data-site-theme="midnight"] .home-layout>.sidebar{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}

/* Watch artwork becomes a full-width cinematic atmosphere behind the complete player area. */
:root[data-site-theme="midnight"] .watch-page{
  position:relative;
  isolation:isolate;
  z-index:0;
}
:root[data-site-theme="midnight"] .watch-page>*{
  position:relative;
  z-index:2;
}
:root[data-site-theme="midnight"] .watch-page::before{
  content:"";
  position:absolute;
  z-index:0;
  left:50%;
  top:-150px;
  width:100vw;
  height:clamp(820px,82vw,1120px);
  transform:translateX(-50%);
  background-image:
    linear-gradient(90deg,rgba(7,15,26,.48) 0%,rgba(7,15,26,.12) 48%,rgba(7,15,26,.48) 100%),
    linear-gradient(180deg,rgba(7,15,26,.08) 0%,rgba(13,24,38,.24) 54%,var(--midnight-page) 100%),
    var(--watch-page-art);
  background-position:center,center,center 22%;
  background-repeat:no-repeat;
  background-size:cover,cover,cover;
  filter:saturate(.88);
  opacity:.98;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 58%,rgba(0,0,0,.9) 70%,rgba(0,0,0,.36) 87%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 58%,rgba(0,0,0,.9) 70%,rgba(0,0,0,.36) 87%,transparent 100%);
}
:root[data-site-theme="midnight"] .watch-page::after{
  content:"";
  position:absolute;
  z-index:1;
  left:50%;
  top:-185px;
  width:112vw;
  height:clamp(850px,86vw,1160px);
  transform:translateX(-50%) scale(1.08);
  background-image:var(--watch-page-art);
  background-position:center 22%;
  background-repeat:no-repeat;
  background-size:cover;
  filter:blur(54px) saturate(.92);
  opacity:.52;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 52%,rgba(0,0,0,.78) 68%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 52%,rgba(0,0,0,.78) 68%,transparent 100%);
}
:root[data-site-theme="midnight"] .watch-player-heading{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
}
:root[data-site-theme="midnight"] .watch-player-heading::before,
:root[data-site-theme="midnight"] .watch-player-heading::after,
:root[data-site-theme="midnight"] .watch-player-heading-bg{display:none!important}
:root[data-site-theme="midnight"] .watch-player-heading-copy{
  background:transparent!important;
  position:relative;
  z-index:2;
}

@media(max-width:720px){
  :root[data-site-theme="midnight"] .watch-page::before{
    top:-92px;
    height:760px;
    background-position:center,center,center 18%;
  }
  :root[data-site-theme="midnight"] .watch-page::after{
    top:-112px;
    width:124vw;
    height:790px;
    background-position:center 18%;
    filter:blur(34px) saturate(.9);
    opacity:.46;
  }
}

/* V7.54.6 — Background-only frosted artwork. UI panels remain fully opaque. */
:root[data-site-theme="midnight"] .watch-page::before{
  top:-190px;
  height:clamp(900px,90vw,1220px);
  background-image:
    radial-gradient(ellipse at 50% 18%,rgba(156,190,224,.10) 0%,rgba(70,106,145,.045) 37%,transparent 68%),
    linear-gradient(90deg,rgba(7,15,26,.56) 0%,rgba(10,21,35,.18) 48%,rgba(7,15,26,.56) 100%),
    linear-gradient(180deg,rgba(11,23,38,.20) 0%,rgba(11,23,38,.36) 48%,rgba(11,23,38,.76) 76%,var(--midnight-page) 100%),
    var(--watch-page-art);
  background-position:center,center,center,center 22%;
  background-size:cover,cover,cover,cover;
  filter:blur(18px) saturate(.72) brightness(.82) contrast(.88);
  transform:translateX(-50%) scale(1.055);
  opacity:.96;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 54%,rgba(0,0,0,.93) 68%,rgba(0,0,0,.48) 85%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 54%,rgba(0,0,0,.93) 68%,rgba(0,0,0,.48) 85%,transparent 100%);
}
:root[data-site-theme="midnight"] .watch-page::after{
  top:-235px;
  width:124vw;
  height:clamp(960px,96vw,1300px);
  transform:translateX(-50%) scale(1.17);
  background-image:var(--watch-page-art);
  background-position:center 22%;
  background-repeat:no-repeat;
  background-size:cover;
  filter:blur(92px) saturate(.72) brightness(.84) contrast(.88);
  opacity:.72;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 50%,rgba(0,0,0,.88) 66%,rgba(0,0,0,.28) 88%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 50%,rgba(0,0,0,.88) 66%,rgba(0,0,0,.28) 88%,transparent 100%);
}

@media(max-width:720px){
  :root[data-site-theme="midnight"] .watch-page::before{
    top:-118px;
    height:820px;
    transform:translateX(-50%) scale(1.07);
    filter:blur(14px) saturate(.72) brightness(.82) contrast(.9);
  }
  :root[data-site-theme="midnight"] .watch-page::after{
    top:-155px;
    width:138vw;
    height:900px;
    transform:translateX(-50%) scale(1.18);
    filter:blur(64px) saturate(.72) brightness(.84) contrast(.9);
    opacity:.66;
  }
}

/* V7.55.0 — Midnight Premium V2.
   Cinematic blue-frosted watch artwork, lighter atmospheric page background,
   original AnimeOra surfaces, dark chrome, neutral depth and clearer separation. */
:root[data-site-theme="midnight"]{
  --bg:#131f2e;
  --bg-2:#162334;
  --bg-3:#19283b;
  --midnight-page:#131f2e;
  --midnight-page-rgb:19,31,46;
  --midnight-chrome:#08111d;
  --panel:rgba(24,39,58,.96);
  --panel-2:rgba(30,48,70,.97);
  --card:#17283b;
  --card-2:#1c3047;
  --line:rgba(190,210,232,.13);
  --line-2:rgba(190,210,232,.22);
  --shadow:0 18px 48px rgba(1,7,16,.30);
}

/* Lighter than V7.54, but still atmospheric rather than a flat solid fill. */
:root[data-site-theme="midnight"] body,
:root[data-site-theme="midnight"] body.site-body{
  background-color:var(--midnight-page)!important;
  background-image:
    radial-gradient(circle at 10% -8%,rgba(69,112,158,.20),transparent 34%),
    radial-gradient(circle at 88% 8%,rgba(40,83,127,.15),transparent 31%),
    radial-gradient(circle at 50% 108%,rgba(31,62,96,.12),transparent 38%),
    linear-gradient(180deg,#172536 0%,#131f2e 46%,#101a28 100%)!important;
  background-attachment:fixed!important;
}

/* Preserve AnimeOra's orange identity and keep the framing chrome dark. */
:root[data-site-theme="midnight"] .topbar,
:root[data-site-theme="midnight"] .footer{
  background:rgba(8,17,29,.97)!important;
}
:root[data-site-theme="midnight"] .topbar.is-scrolled{
  background:rgba(8,17,29,.992)!important;
}

/* Better separation without replacing the existing Midnight card/panel surfaces. */
:root[data-site-theme="midnight"] .anime-card,
:root[data-site-theme="midnight"] .latest-card,
:root[data-site-theme="midnight"] .card,
:root[data-site-theme="midnight"] .panel,
:root[data-site-theme="midnight"] .glass,
:root[data-site-theme="midnight"] .hero-slider,
:root[data-site-theme="midnight"] .details-hero,
:root[data-site-theme="midnight"] .top-anime-item,
:root[data-site-theme="midnight"] .latest-item .ani,
:root[data-site-theme="midnight"] .episode-sidebar-v714,
:root[data-site-theme="midnight"] .watch-details-shell,
:root[data-site-theme="midnight"] .watch-comments-panel,
:root[data-site-theme="midnight"] .watch-recommendations-panel{
  border-color:rgba(190,210,232,.13)!important;
  box-shadow:0 14px 38px rgba(1,7,16,.27)!important;
}
:root[data-site-theme="midnight"] .anime-card:hover,
:root[data-site-theme="midnight"] .latest-card:hover,
:root[data-site-theme="midnight"] .card:hover,
:root[data-site-theme="midnight"] .top-anime-item:hover,
:root[data-site-theme="midnight"] .latest-item:hover .ani{
  border-color:rgba(205,221,239,.20)!important;
  box-shadow:0 20px 48px rgba(1,7,16,.36)!important;
}

/* Blue-cinematic frosted artwork. Only the page artwork is treated; UI stays opaque. */
:root[data-site-theme="midnight"] .watch-page::before{
  top:-190px;
  height:clamp(920px,92vw,1240px);
  width:108vw;
  transform:translateX(-50%) scale(1.08);
  background-image:
    linear-gradient(90deg,rgba(5,12,22,.60) 0%,rgba(7,18,31,.18) 48%,rgba(5,12,22,.60) 100%),
    linear-gradient(180deg,rgba(4,12,23,.18) 0%,rgba(10,24,40,.36) 48%,rgba(14,27,42,.76) 76%,var(--midnight-page) 100%),
    linear-gradient(rgba(25,77,124,.40),rgba(15,53,91,.46)),
    var(--watch-page-art);
  background-position:center,center,center,center 22%;
  background-size:cover,cover,cover,cover;
  background-blend-mode:normal,normal,color,normal;
  filter:blur(24px) grayscale(.74) saturate(.62) brightness(.80) contrast(.92);
  opacity:.98;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 54%,rgba(0,0,0,.94) 68%,rgba(0,0,0,.50) 85%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 54%,rgba(0,0,0,.94) 68%,rgba(0,0,0,.50) 85%,transparent 100%);
}
:root[data-site-theme="midnight"] .watch-page::after{
  top:-240px;
  width:128vw;
  height:clamp(980px,98vw,1320px);
  transform:translateX(-50%) scale(1.18);
  background-image:
    linear-gradient(rgba(28,86,138,.30),rgba(12,47,82,.38)),
    var(--watch-page-art);
  background-position:center,center 22%;
  background-repeat:no-repeat;
  background-size:cover,cover;
  background-blend-mode:color,normal;
  filter:blur(96px) grayscale(.88) saturate(.52) brightness(.78) contrast(.90);
  opacity:.70;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 50%,rgba(0,0,0,.89) 66%,rgba(0,0,0,.30) 88%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 50%,rgba(0,0,0,.89) 66%,rgba(0,0,0,.30) 88%,transparent 100%);
}

@media(max-width:720px){
  :root[data-site-theme="midnight"] .watch-page::before{
    top:-120px;
    width:116vw;
    height:840px;
    transform:translateX(-50%) scale(1.09);
    filter:blur(18px) grayscale(.74) saturate(.62) brightness(.80) contrast(.92);
  }
  :root[data-site-theme="midnight"] .watch-page::after{
    top:-158px;
    width:142vw;
    height:920px;
    transform:translateX(-50%) scale(1.18);
    filter:blur(68px) grayscale(.88) saturate(.52) brightness(.78) contrast(.90);
    opacity:.64;
  }
}

/* V7.55.1 — Midnight Premium mockup pass.
   Carries AnimeOra Classic's square texture into Midnight and strengthens the
   steel-blue cinematic grade on the watch artwork without changing UI panels. */
:root[data-site-theme="midnight"] body,
:root[data-site-theme="midnight"] body.site-body{
  background-color:#131f2e!important;
  background-image:
    radial-gradient(circle at 12% -4%,rgba(50,91,137,.25),transparent 34%),
    radial-gradient(circle at 86% 7%,rgba(31,73,119,.19),transparent 35%),
    radial-gradient(circle at 48% 108%,rgba(24,55,91,.15),transparent 40%),
    linear-gradient(145deg,#172536 0%,#131f2e 48%,#0f1927 100%)!important;
  background-attachment:fixed!important;
}

/* Reuse the Classic theme's subtle square/grid atmosphere in Midnight. */
:root[data-site-theme="midnight"] .site-bg{
  display:block!important;
  background-image:
    linear-gradient(rgba(126,166,207,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(126,166,207,.055) 1px,transparent 1px)!important;
  background-size:44px 44px!important;
  background-position:center top!important;
  opacity:.72!important;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.94),rgba(0,0,0,.60) 67%,transparent 96%)!important;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.94),rgba(0,0,0,.60) 67%,transparent 96%)!important;
}

/* Make the steel-blue grade clearly visible while keeping the artwork frosted. */
:root[data-site-theme="midnight"] .watch-page::before{
  background-image:
    linear-gradient(90deg,rgba(3,9,17,.64) 0%,rgba(6,17,30,.18) 48%,rgba(3,9,17,.64) 100%),
    linear-gradient(180deg,rgba(4,12,22,.12) 0%,rgba(9,24,42,.29) 43%,rgba(12,29,49,.72) 74%,var(--midnight-page) 100%),
    linear-gradient(180deg,rgba(50,112,178,.66),rgba(22,73,126,.70)),
    var(--watch-page-art)!important;
  background-blend-mode:normal,normal,color,normal!important;
  filter:blur(28px) grayscale(.82) saturate(.72) brightness(.82) contrast(.94)!important;
  opacity:1!important;
}
:root[data-site-theme="midnight"] .watch-page::after{
  background-image:
    linear-gradient(180deg,rgba(64,130,201,.56),rgba(20,70,122,.64)),
    var(--watch-page-art)!important;
  background-blend-mode:color,normal!important;
  filter:blur(104px) grayscale(.90) saturate(.66) brightness(.80) contrast(.92)!important;
  opacity:.82!important;
}

@media(max-width:720px){
  :root[data-site-theme="midnight"] .site-bg{
    background-size:36px 36px!important;
    opacity:.60!important;
  }
  :root[data-site-theme="midnight"] .watch-page::before{
    filter:blur(22px) grayscale(.82) saturate(.72) brightness(.82) contrast(.94)!important;
  }
  :root[data-site-theme="midnight"] .watch-page::after{
    filter:blur(76px) grayscale(.90) saturate(.66) brightness(.80) contrast(.92)!important;
    opacity:.76!important;
  }
}


/* V7.55.2: lights-off stacking and persistent-login controls */
body.lights-off .watch-main-column{position:relative;z-index:1002}
body.lights-off .watch-player-shell{position:relative;z-index:1003}
body.lights-off .playerbox,body.lights-off .watch-actions{position:relative;z-index:auto}
.auth-remember{display:inline-flex!important;align-items:center;gap:8px;cursor:pointer;color:var(--muted);font-size:12px;font-weight:700}
.auth-remember input{width:16px!important;height:16px!important;margin:0;accent-color:var(--orange)}
.auth-password-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* V7.55.3: definitive watch overlay and report-dialog stacking fix */
body.lights-off .watch-page{isolation:auto!important;z-index:auto!important}
body.lights-off .player-layout-v714{position:relative!important;z-index:1001!important}
body.lights-off .watch-main-column{position:relative!important;z-index:1002!important}
body.lights-off .watch-player-shell{position:relative!important;z-index:1003!important}
body.lights-off .playerbox,body.lights-off .watch-actions{position:relative!important;z-index:auto!important}
.report-modal{isolation:isolate}
.report-modal.open{z-index:5000!important}
.report-modal .report-backdrop{z-index:0}
.report-modal .report-card{z-index:1}

/* V7.55.4 — match Classic/AniList lights-off stacking.
   Midnight's artwork must not turn the entire watch page into a trapped stacking context. */
:root[data-site-theme="midnight"] .watch-page{
  isolation:auto!important;
  z-index:auto!important;
}
:root[data-site-theme="midnight"] .watch-page::before{
  z-index:-2!important;
}
:root[data-site-theme="midnight"] .watch-page::after{
  z-index:-1!important;
}
:root[data-site-theme="midnight"] .watch-page>*{
  position:relative;
  z-index:auto;
}
:root[data-site-theme="midnight"] body.lights-off .player-layout-v714{
  position:relative!important;
  z-index:1001!important;
}
:root[data-site-theme="midnight"] body.lights-off .watch-main-column{
  position:relative!important;
  z-index:1002!important;
}
:root[data-site-theme="midnight"] body.lights-off .watch-player-shell{
  position:relative!important;
  z-index:1003!important;
}


/* V7.55.5 — Midnight Lights Off uses an in-context dimmer.
   The artwork, dimmer and player now share one deterministic stack. */
:root[data-site-theme="midnight"] .watch-page{
  isolation:isolate!important;
  z-index:0!important;
}
:root[data-site-theme="midnight"] .watch-page>.lights{
  position:fixed!important;
  inset:0!important;
  z-index:1000!important;
  pointer-events:auto!important;
}
:root[data-site-theme="midnight"] body.lights-off .player-layout-v714{
  position:relative!important;
  z-index:1001!important;
}
:root[data-site-theme="midnight"] body.lights-off .watch-main-column{
  position:relative!important;
  z-index:1002!important;
}
:root[data-site-theme="midnight"] body.lights-off .watch-player-shell{
  position:relative!important;
  z-index:1003!important;
}
:root[data-site-theme="midnight"] body.lights-off .episode-sidebar-v714{
  position:relative!important;
  z-index:2!important;
}