:root{
  --bg:#05070c;
  --bg-soft:#090d14;
  --panel:#0e141d;
  --panel2:#111a25;
  --line:#223348;
  --line-soft:#172638;
  --text:#f6f8fb;
  --muted:#9aaabe;
  --blue:#0298ff;
  --blue2:#006ee6;
  --cyan:#27d4ff;
  --orange:#ff8b22;
  --green:#25d366;
  --radius:18px;
  --shadow:0 18px 60px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:
    radial-gradient(circle at 12% 0%, rgba(2,152,255,.18), transparent 32%),
    radial-gradient(circle at 95% 10%, rgba(39,212,255,.12), transparent 34%),
    linear-gradient(180deg,#03050a 0%,#07101a 50%,#05070c 100%);
  color:var(--text);
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button,input,select{font:inherit}

.ar-app{
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  min-height:100vh;
}

.ar-sidebar{
  position:relative !important;
  z-index:500 !important;
  position:sticky;
  top:0;
  height:100vh;
  overflow:auto;
  background:rgba(5,8,14,.94);
  border-right:1px solid rgba(39,212,255,.13);
  padding:20px 16px;
}
.ar-logo{
  display:block;
  margin-bottom:22px;
}
.ar-logo strong{
  display:block;
  font-size:30px;
  line-height:.9;
  font-weight:1000;
  letter-spacing:-1.5px;
}
.ar-logo span{color:var(--blue)}
.ar-logo small{
  display:block;
  color:var(--cyan);
  font-size:10px;
  font-weight:900;
  letter-spacing:.9px;
  margin-top:5px;
}
.ar-menu-title{
  margin:18px 0 9px;
  color:#dceeff;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.9px;
  text-transform:uppercase;
}
.ar-menu{
  display:grid;
  gap:5px;
}
.ar-menu a{
  padding:10px 11px;
  border-radius:11px;
  color:#c9d6e6;
  font-size:14px;
  font-weight:800;
  transition:.18s;
}
.ar-menu a:hover,.ar-menu a.active{
  background:rgba(2,152,255,.13);
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(2,152,255,.24);
}
.ar-genre-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}
.ar-genre-grid a{
  padding:8px 9px;
  border-radius:9px;
  background:#08111b;
  border:1px solid #162638;
  color:#aec0d4;
  font-size:12px;
  font-weight:800;
}
.ar-genre-grid a:hover{border-color:var(--blue);color:#fff}

.ar-main{
  min-width:0;
}
.ar-topbar{
  position:sticky;
  top:0;
  z-index:40;
  min-height:76px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 24px;
  background:rgba(5,8,14,.86);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(39,212,255,.1);
}
.ar-menu-btn{
  display:none;
}
.ar-search{
  position:relative;
  flex:1;
  max-width:680px;
}
.ar-search input{
  width:100%;
  height:48px;
  border-radius:15px;
  border:1px solid #26394e;
  background:#070d15;
  color:#fff;
  padding:0 116px 0 18px;
  outline:none;
  font-weight:800;
}
.ar-search input:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(2,152,255,.12);
}
.ar-search button{
  position:absolute;
  right:5px;
  top:5px;
  height:38px;
  border:0;
  border-radius:11px;
  padding:0 16px;
  color:#fff;
  background:linear-gradient(180deg,var(--blue),var(--blue2));
  font-weight:1000;
  cursor:pointer;
}
.ar-top-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
}
.ar-pill-btn{
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  border-radius:999px;
  background:#0d1622;
  border:1px solid #24364b;
  color:#dcecff;
  font-weight:900;
  font-size:13px;
}
.ar-pill-btn.primary{
  background:linear-gradient(180deg,var(--blue),var(--blue2));
  border:0;
  color:#fff;
}

.ar-content{
  max-width:1440px;
  margin:0 auto;
  padding:24px;
}
.ar-hero{
  position:relative;
  overflow:hidden;
  min-height:440px;
  border-radius:26px;
  border:1px solid rgba(39,212,255,.18);
  background:
    linear-gradient(90deg,rgba(4,7,12,.98) 0%,rgba(4,7,12,.85) 34%,rgba(4,7,12,.26) 67%,rgba(4,7,12,.75) 100%),
    url("https://images.unsplash.com/photo-1607604276583-eef5d076aa5f?auto=format&fit=crop&w=1500&q=80") center/cover no-repeat;
  box-shadow:var(--shadow);
}
.ar-hero:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 72% 46%,rgba(2,152,255,.38),transparent 28%),
    linear-gradient(180deg,transparent,rgba(0,0,0,.62));
}
.ar-hero-content{
  position:relative;
  z-index:2;
  width:min(620px,58%);
  padding:62px 54px;
}
.ar-rank{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#cdeeff;
  background:rgba(2,152,255,.16);
  border:1px solid rgba(2,152,255,.34);
  padding:7px 11px;
  border-radius:999px;
  font-size:12px;
  font-weight:1000;
  text-transform:uppercase;
}
.ar-hero h1{
  margin:17px 0 13px;
  font-size:58px;
  line-height:.95;
  letter-spacing:-2.5px;
}
.ar-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:18px;
}
.ar-meta span{
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:0 9px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#dfe9f5;
  font-size:12px;
  font-weight:900;
}
.ar-meta span.blue{background:rgba(2,152,255,.18);color:#d9f4ff}
.ar-meta span.orange{background:rgba(255,139,34,.18);color:#ffe5ca}
.ar-hero p{
  margin:0 0 24px;
  color:#c5d3e2;
  font-size:15px;
  line-height:1.6;
}
.ar-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.ar-btn{
  min-height:45px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:999px;
  padding:0 20px;
  font-weight:1000;
  background:linear-gradient(180deg,var(--blue),var(--blue2));
  color:#fff;
  box-shadow:0 12px 30px rgba(2,152,255,.22);
}
.ar-btn.dark{
  background:rgba(13,22,34,.92);
  border:1px solid #2b3f55;
  box-shadow:none;
}
.ar-dots{
  position:absolute;
  z-index:3;
  right:34px;
  bottom:24px;
  display:flex;
  gap:8px;
}
.ar-dots span{
  width:28px;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.36);
}
.ar-dots span:first-child{background:var(--blue)}

.ar-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:22px;
  margin-top:24px;
}
.ar-stack{display:grid;gap:22px}
.ar-panel{
  background:linear-gradient(180deg,rgba(14,20,29,.96),rgba(8,13,20,.96));
  border:1px solid rgba(34,51,72,.86);
  border-radius:var(--radius);
  box-shadow:0 10px 32px rgba(0,0,0,.24);
  overflow:hidden;
}
.ar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:17px 18px 13px;
}
.ar-title{
  margin:0;
  font-size:20px;
  letter-spacing:-.4px;
  display:flex;
  align-items:center;
  gap:10px;
}
.ar-title:before{
  content:"";
  width:4px;
  height:22px;
  border-radius:99px;
  background:linear-gradient(180deg,var(--blue),var(--cyan));
  box-shadow:0 0 18px rgba(2,152,255,.55);
}
.ar-view{
  color:#d9e9f9;
  background:#0a121c;
  border:1px solid #273a4e;
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  font-weight:900;
}
.ar-card-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:15px;
  padding:0 18px 18px;
}
.ar-card{
  min-width:0;
}
.ar-poster{
  position:relative;
  aspect-ratio:2/3;
  overflow:hidden;
  border-radius:14px;
  background:#101b28;
  border:1px solid #25384c;
  transition:.18s;
}
.ar-card:hover .ar-poster{
  transform:translateY(-4px);
  border-color:rgba(2,152,255,.65);
  box-shadow:0 18px 42px rgba(2,152,255,.12);
}
.ar-poster img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.ar-poster:after{
  content:"";
  position:absolute;
  inset:47% 0 0;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.92));
}
.ar-quality{
  position:absolute;
  left:8px;
  bottom:8px;
  z-index:2;
  display:flex;
  gap:4px;
}
.ar-quality span{
  padding:4px 6px;
  border-radius:5px;
  background:var(--blue);
  color:#fff;
  font-size:10px;
  font-weight:1000;
}
.ar-quality span:nth-child(2){background:#24384f}
.ar-ep{
  position:absolute;
  right:8px;
  bottom:8px;
  z-index:2;
  padding:4px 6px;
  border-radius:5px;
  background:var(--orange);
  color:#fff;
  font-size:10px;
  font-weight:1000;
}
.ar-play{
  position:absolute;
  inset:0;
  z-index:3;
  display:grid;
  place-items:center;
  opacity:0;
  background:rgba(0,0,0,.18);
  transition:.18s;
}
.ar-card:hover .ar-play{opacity:1}
.ar-play span{
  width:54px;
  height:54px;
  border-radius:50%;
  background:var(--blue);
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:1000;
  box-shadow:0 12px 30px rgba(2,152,255,.3);
}
.ar-card h3{
  margin:9px 0 5px;
  font-size:14px;
  line-height:1.25;
}
.ar-sub{
  display:flex;
  justify-content:space-between;
  gap:8px;
  color:var(--muted);
  font-size:12px;
}

.ar-list{
  display:grid;
  gap:8px;
  padding:0 14px 14px;
}
.ar-list-item{
  display:grid;
  grid-template-columns:34px 48px 1fr auto;
  gap:10px;
  align-items:center;
  padding:9px;
  border-radius:13px;
  transition:.18s;
}
.ar-list-item:hover{
  background:rgba(255,255,255,.045);
}
.ar-num{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#08121d;
  border:1px solid #263a50;
  color:#e9f4ff;
  font-weight:1000;
  font-size:12px;
}
.ar-thumb{
  width:48px;
  height:62px;
  border-radius:9px;
  object-fit:cover;
}
.ar-list-info h4{
  margin:0 0 4px;
  font-size:13px;
}
.ar-list-info p{
  margin:0;
  color:var(--muted);
  font-size:12px;
}
.ar-score{
  color:#fff;
  font-size:12px;
  font-weight:1000;
  background:rgba(2,152,255,.16);
  border:1px solid rgba(2,152,255,.3);
  border-radius:999px;
  padding:5px 8px;
}
.ar-tabs{
  display:flex;
  gap:8px;
  padding:0 18px 14px;
  flex-wrap:wrap;
}
.ar-tab{
  padding:8px 12px;
  border-radius:999px;
  background:#08111b;
  border:1px solid #24384f;
  color:#d8e7f7;
  font-size:12px;
  font-weight:900;
}
.ar-tab.active{background:var(--blue);border-color:var(--blue);color:#fff}

.ar-filterbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:0 18px 18px;
}
.ar-filterbar input,.ar-filterbar select{
  min-height:42px;
  border-radius:11px;
  border:1px solid #26394e;
  background:#070d15;
  color:#fff;
  padding:0 13px;
  outline:none;
  font-weight:800;
}
.ar-filterbar input{min-width:260px;flex:1}

.ar-community{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:22px;
}
.ar-community-hero{
  padding:38px;
  min-height:330px;
  background:
    radial-gradient(circle at 88% 42%,rgba(2,152,255,.32),transparent 28%),
    linear-gradient(135deg,#0d1723,#07101a);
  border:1px solid rgba(2,152,255,.2);
  border-radius:24px;
}
.ar-community-hero h1{
  margin:14px 0 12px;
  font-size:46px;
  line-height:1;
  letter-spacing:-2px;
}
.ar-community-hero p{color:#c1cfdf;line-height:1.65}
.ar-post{
  padding:15px;
  border-radius:14px;
  border:1px solid #223348;
  background:#08111b;
}
.ar-post+.ar-post{margin-top:12px}
.ar-post h3{margin:0 0 8px}
.ar-post p{margin:0;color:#b3c2d3;line-height:1.45}

.ar-footer{
  margin-top:24px;
  padding:24px;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:18px;
}
.ar-footer h3{margin:0 0 8px;color:var(--blue)}
.ar-footer p{margin:0;color:#b4c3d4;line-height:1.55}
.ar-footer-links{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}
.ar-footer-links a{
  padding:12px;
  border-radius:11px;
  background:#08111b;
  border:1px solid #223348;
  text-align:center;
  font-weight:900;
}

@media(max-width:1200px){
  .ar-app{grid-template-columns:1fr}
  .ar-sidebar{display:none}
  .ar-menu-btn{display:inline-flex}
  .ar-layout{grid-template-columns:1fr}
  .ar-card-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:780px){
  .ar-topbar{flex-wrap:wrap;padding:12px 16px}
  .ar-search{order:3;max-width:none;min-width:100%}
  .ar-top-actions{margin-left:0}
  .ar-content{padding:16px}
  .ar-hero-content{width:100%;padding:42px 25px}
  .ar-hero h1{font-size:40px}
  .ar-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ar-community,.ar-footer{grid-template-columns:1fr}
}


/* v2 layout fixes: prevent poster wall, restore readable cards, add detail/watch pages */
.ar-content{
  max-width:1360px;
}

.ar-card-grid{
  grid-template-columns:repeat(auto-fill,minmax(154px,1fr));
  align-items:start;
}

.ar-card{
  min-width:0;
  overflow:hidden;
}

.ar-poster{
  aspect-ratio:2/2.95;
  max-height:245px;
}

.ar-card h3{
  min-height:36px;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  padding-right:3px;
}

.ar-sub{
  min-height:17px;
}

.ar-panel{
  overflow:visible;
}

.ar-sidebar{
  scrollbar-width:thin;
}

.ar-layout{
  align-items:start;
}

.ar-layout > .ar-stack,
.ar-layout > aside.ar-stack{
  min-width:0;
}

.ar-layout > aside.ar-stack{
  position:sticky;
  top:96px;
  max-height:calc(100vh - 112px);
  overflow:auto;
  padding-right:2px;
}

.ar-list-item{
  grid-template-columns:30px 44px minmax(0,1fr) auto;
}

.ar-list-info{
  min-width:0;
}

.ar-list-info h4{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.ar-score{
  white-space:nowrap;
}

.ar-detail-hero{
  position:relative;
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:24px;
  padding:28px;
  border-radius:26px;
  border:1px solid rgba(39,212,255,.18);
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(5,8,14,.96),rgba(5,8,14,.82)),
    var(--detail-bg, linear-gradient(135deg,#0d1723,#08111b));
  box-shadow:var(--shadow);
}

.ar-detail-hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 84% 34%,rgba(2,152,255,.2),transparent 30%),
    linear-gradient(180deg,transparent,rgba(0,0,0,.35));
  pointer-events:none;
}

.ar-detail-cover,
.ar-detail-info{
  position:relative;
  z-index:2;
}

.ar-detail-cover img{
  width:230px;
  aspect-ratio:2/3;
  object-fit:cover;
  border-radius:18px;
  border:1px solid #2b435b;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}

.ar-detail-info h1{
  margin:0 0 12px;
  font-size:46px;
  line-height:1;
  letter-spacing:-1.8px;
}

.ar-detail-info p{
  color:#c4d2e1;
  line-height:1.65;
  max-width:860px;
}

.ar-info-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:18px;
}

.ar-info-box{
  padding:12px;
  border-radius:13px;
  background:#08111b;
  border:1px solid #223348;
}

.ar-info-box b{
  display:block;
  color:#fff;
  font-size:13px;
  margin-bottom:4px;
}

.ar-info-box span{
  color:#9fb1c5;
  font-size:12px;
}

.ar-episode-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(92px,1fr));
  gap:10px;
  padding:0 18px 18px;
}

.ar-episode{
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  background:#08111b;
  border:1px solid #223348;
  color:#dcecff;
  font-weight:1000;
  font-size:13px;
}

.ar-episode:hover,
.ar-episode.active{
  background:rgba(2,152,255,.16);
  border-color:var(--blue);
  color:#fff;
}

.ar-watch-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:22px;
}

.ar-player{
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(39,212,255,.18);
  background:#000;
  box-shadow:var(--shadow);
}

.ar-player-screen{
  aspect-ratio:16/9;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 36%,rgba(2,152,255,.22),transparent 28%),
    linear-gradient(135deg,#020305,#07111b 54%,#000);
  position:relative;
}

.ar-player-screen:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.2));
}

.ar-big-play{
  width:86px;
  height:86px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,var(--blue),var(--blue2));
  color:#fff;
  font-size:34px;
  font-weight:1000;
  box-shadow:0 20px 60px rgba(2,152,255,.3);
  z-index:2;
}

.ar-player-bar{
  display:grid;
  grid-template-columns:auto 1fr auto auto auto;
  gap:12px;
  align-items:center;
  padding:12px 14px;
  background:#05080d;
  border-top:1px solid #162638;
}

.ar-time{
  color:#b6c7da;
  font-size:12px;
  font-weight:900;
}

.ar-seek{
  height:6px;
  border-radius:999px;
  overflow:hidden;
  background:#182638;
}

.ar-seek span{
  display:block;
  width:37%;
  height:100%;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
}

.ar-watch-title{
  padding:18px;
}

.ar-watch-title h1{
  margin:0 0 8px;
  font-size:24px;
}

.ar-watch-title p{
  margin:0;
  color:#9fb1c5;
}

.ar-server-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:0 18px 18px;
}

.ar-server{
  padding:10px 13px;
  border-radius:999px;
  background:#08111b;
  border:1px solid #223348;
  color:#dcecff;
  font-weight:1000;
  font-size:12px;
}

.ar-server.active{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
}

.ar-next-card{
  display:grid;
  grid-template-columns:112px 1fr;
  gap:12px;
  padding:12px;
  border-bottom:1px solid #162638;
}

.ar-next-card img{
  width:112px;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:10px;
}

.ar-next-card h3{
  margin:0 0 7px;
  font-size:14px;
  line-height:1.25;
}

.ar-next-card p{
  margin:0;
  color:#9fb1c5;
  font-size:12px;
}

@media(max-width:1200px){
  .ar-layout > aside.ar-stack{
    position:static;
    max-height:none;
  }
  .ar-watch-layout{
    grid-template-columns:1fr;
  }
}

@media(max-width:780px){
  .ar-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .ar-poster{
    max-height:none;
  }
  .ar-detail-hero{
    grid-template-columns:1fr;
  }
  .ar-detail-cover img{
    width:190px;
  }
  .ar-detail-info h1{
    font-size:34px;
  }
  .ar-info-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .ar-player-bar{
    grid-template-columns:auto 1fr auto;
  }
}


/* =========================================================
   PimpAnime v3 optimized layout fix
   Purpose: stop the cramped poster-wall look and make the
   HiAnime-style UI readable, clean, and production-looking.
   ========================================================= */

body{
  background:
    radial-gradient(circle at 18% 0%, rgba(2,152,255,.13), transparent 30%),
    linear-gradient(180deg,#03060b 0%,#07111b 46%,#05080d 100%) !important;
}

.ar-app{
  grid-template-columns:230px minmax(0,1fr) !important;
}

.ar-sidebar{
  width:230px !important;
  padding:18px 14px !important;
}

.ar-main{
  min-width:0 !important;
}

.ar-topbar{
  min-height:68px !important;
  padding:12px 22px !important;
}

.ar-content{
  width:100% !important;
  max-width:1240px !important;
  padding:26px 24px 36px !important;
  margin:0 auto !important;
}

/* cleaner standard page panels */
.ar-panel{
  border-radius:18px !important;
  border:1px solid rgba(47,76,105,.86) !important;
  background:linear-gradient(180deg,rgba(12,20,30,.98),rgba(7,13,21,.98)) !important;
  box-shadow:0 14px 44px rgba(0,0,0,.24) !important;
  overflow:hidden !important;
}

.ar-head{
  padding:18px 20px 14px !important;
}

.ar-title{
  font-size:19px !important;
}

.ar-title:before{
  height:22px !important;
  width:4px !important;
}

/* Main grid: fixed sane columns instead of cramped auto-fill */
.ar-card-grid{
  display:grid !important;
  grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
  gap:22px 18px !important;
  padding:0 20px 22px !important;
  align-items:start !important;
}

/* Card itself */
.ar-card{
  position:relative !important;
  min-width:0 !important;
  display:block !important;
  overflow:visible !important;
}

/* Poster fix: all posters same clean size */
.ar-poster{
  width:100% !important;
  aspect-ratio:2 / 3 !important;
  max-height:none !important;
  min-height:0 !important;
  border-radius:15px !important;
  overflow:hidden !important;
  background:#101925 !important;
  border:1px solid rgba(54,82,109,.95) !important;
  box-shadow:0 10px 26px rgba(0,0,0,.28) !important;
}

.ar-poster img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  transition:transform .18s ease, filter .18s ease !important;
}

.ar-card:hover .ar-poster{
  transform:translateY(-4px) !important;
  border-color:rgba(2,152,255,.75) !important;
  box-shadow:0 18px 42px rgba(2,152,255,.14) !important;
}

.ar-card:hover .ar-poster img{
  transform:scale(1.035) !important;
  filter:brightness(.86) saturate(1.08) !important;
}

/* Reduce badge clutter */
.ar-quality{
  left:8px !important;
  bottom:8px !important;
  gap:4px !important;
}

.ar-quality span{
  font-size:9px !important;
  line-height:1 !important;
  padding:4px 5px !important;
  border-radius:5px !important;
}

.ar-quality span:nth-child(3){
  display:none !important;
}

.ar-ep{
  right:8px !important;
  bottom:8px !important;
  font-size:10px !important;
  padding:4px 6px !important;
  background:#ff8b22 !important;
}

/* Readable titles under posters */
.ar-card h3{
  margin:10px 0 6px !important;
  padding:0 !important;
  min-height:39px !important;
  max-height:39px !important;
  color:#fff !important;
  font-size:14px !important;
  line-height:1.35 !important;
  font-weight:900 !important;
  overflow:hidden !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
}

.ar-card h3 a{
  color:#fff !important;
}

.ar-card h3 a:hover{
  color:#9de4ff !important;
}

.ar-sub{
  min-height:18px !important;
  font-size:12px !important;
  color:#9aacc0 !important;
}

/* Hero polish */
.ar-hero{
  min-height:390px !important;
  border-radius:24px !important;
}

.ar-hero-content{
  width:min(590px,60%) !important;
  padding:58px 48px !important;
}

.ar-hero h1{
  font-size:50px !important;
  line-height:1 !important;
}

/* Sidebar cards optimized */
.ar-layout{
  grid-template-columns:minmax(0,1fr) 330px !important;
  gap:22px !important;
}

.ar-layout > aside.ar-stack{
  top:88px !important;
}

.ar-list{
  padding:0 14px 14px !important;
}

.ar-list-item{
  grid-template-columns:28px 44px minmax(0,1fr) auto !important;
  gap:9px !important;
  padding:9px !important;
  border-radius:12px !important;
}

.ar-thumb{
  width:44px !important;
  height:58px !important;
  border-radius:8px !important;
}

.ar-list-info h4{
  max-width:160px !important;
  font-size:12px !important;
  line-height:1.2 !important;
}

.ar-list-info p{
  font-size:11px !important;
}

.ar-score{
  font-size:11px !important;
  padding:4px 7px !important;
}

/* Filter page cleanup */
.ar-filterbar{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 180px !important;
  padding:0 20px 16px !important;
  gap:12px !important;
}

.ar-filterbar input,
.ar-filterbar select{
  min-height:44px !important;
  border-radius:12px !important;
}

.ar-tabs{
  padding:0 20px 18px !important;
  gap:8px !important;
}

.ar-tab{
  font-size:12px !important;
  padding:8px 13px !important;
}

/* Detail page */
.ar-detail-hero{
  grid-template-columns:210px minmax(0,1fr) !important;
  padding:28px !important;
}

.ar-detail-cover img{
  width:210px !important;
}

.ar-detail-info h1{
  font-size:40px !important;
}

/* Episode buttons */
.ar-episode-list{
  grid-template-columns:repeat(auto-fill,minmax(82px,1fr)) !important;
  gap:9px !important;
  padding:0 20px 22px !important;
}

.ar-episode{
  min-height:42px !important;
  border-radius:10px !important;
}

/* Watch page */
.ar-watch-layout{
  grid-template-columns:minmax(0,1fr) 330px !important;
}

.ar-player{
  border-radius:20px !important;
}

.ar-next-card{
  grid-template-columns:104px minmax(0,1fr) !important;
}

.ar-next-card h3{
  font-size:13px !important;
  overflow:hidden !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
}

/* Footer */
.ar-footer{
  margin-top:26px !important;
  padding:24px !important;
}

/* Large desktop */
@media(min-width:1500px){
  .ar-content{
    max-width:1320px !important;
  }
  .ar-card-grid{
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  }
}

/* Medium desktop */
@media(max-width:1280px){
  .ar-card-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
  .ar-layout,
  .ar-watch-layout{
    grid-template-columns:1fr !important;
  }
  .ar-layout > aside.ar-stack{
    position:static !important;
    max-height:none !important;
    overflow:visible !important;
  }
}

/* Tablet */
@media(max-width:980px){
  .ar-app{
    grid-template-columns:1fr !important;
  }
  .ar-sidebar{
    display:none !important;
  }
  .ar-content{
    max-width:100% !important;
    padding:18px 16px 30px !important;
  }
  .ar-card-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  .ar-hero-content{
    width:100% !important;
  }
}

/* Mobile */
@media(max-width:680px){
  .ar-topbar{
    flex-wrap:wrap !important;
  }
  .ar-search{
    order:3 !important;
    max-width:none !important;
    min-width:100% !important;
  }
  .ar-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:18px 12px !important;
    padding:0 14px 18px !important;
  }
  .ar-head{
    padding:16px 14px 12px !important;
  }
  .ar-filterbar{
    grid-template-columns:1fr !important;
    padding:0 14px 14px !important;
  }
  .ar-tabs{
    padding:0 14px 16px !important;
  }
  .ar-hero{
    min-height:340px !important;
  }
  .ar-hero-content{
    padding:38px 24px !important;
  }
  .ar-hero h1{
    font-size:36px !important;
  }
  .ar-detail-hero{
    grid-template-columns:1fr !important;
    padding:22px !important;
  }
  .ar-detail-cover img{
    width:170px !important;
  }
  .ar-detail-info h1{
    font-size:30px !important;
  }
  .ar-info-grid{
    grid-template-columns:1fr 1fr !important;
  }
}

/* Tiny phones */
@media(max-width:420px){
  .ar-card-grid{
    grid-template-columns:1fr 1fr !important;
  }
  .ar-card h3{
    font-size:13px !important;
  }
}


/* =========================================================
   AniRatio final repair layer
   Fixes broken overlap/card issues and adds logo selector.
   ========================================================= */

:root{
  --blue:#4fa3dc;
  --blue2:#187ad8;
  --cyan:#63d7ff;
}

html[data-theme-color="purple"]{
  --blue:#4623c8;
  --blue2:#32149d;
  --cyan:#7d5cff;
}
html[data-theme-color="red"]{
  --blue:#c41739;
  --blue2:#8e102a;
  --cyan:#ff5874;
}
html[data-theme-color="green"]{
  --blue:#63e600;
  --blue2:#3eb300;
  --cyan:#9cff38;
}
html[data-theme-color="pink"]{
  --blue:#f1787e;
  --blue2:#d95367;
  --cyan:#ff9ca2;
}

.ar-app{
  grid-template-columns:244px minmax(0,1fr) !important;
}

.ar-sidebar{
  width:244px !important;
  overflow-x:hidden !important;
}

.ar-logo-img{
  margin:0 0 12px !important;
  padding:0 !important;
  display:block !important;
}

.ar-logo-img img{
  width:205px !important;
  height:auto !important;
  display:block !important;
  object-fit:contain !important;
}

.ar-logo-picker{
  display:flex !important;
  gap:8px !important;
  margin:0 0 18px !important;
  padding:8px !important;
  background:#070d15 !important;
  border:1px solid #17283b !important;
  border-radius:999px !important;
}

.ar-logo-picker button{
  width:20px !important;
  height:20px !important;
  border-radius:999px !important;
  border:2px solid rgba(255,255,255,.18) !important;
  cursor:pointer !important;
  padding:0 !important;
}

.ar-logo-picker button[data-logo-color="blue"]{background:#4fa3dc !important}
.ar-logo-picker button[data-logo-color="purple"]{background:#4623c8 !important}
.ar-logo-picker button[data-logo-color="red"]{background:#c41739 !important}
.ar-logo-picker button[data-logo-color="green"]{background:#63e600 !important}
.ar-logo-picker button[data-logo-color="pink"]{background:#f1787e !important}
.ar-logo-picker button.active{
  border-color:#fff !important;
  box-shadow:0 0 0 3px rgba(255,255,255,.12) !important;
}

/* Stop sticky topbar from covering anchor targets */
[id]{
  scroll-margin-top:96px !important;
}

/* Topbar fixed sizing */
.ar-topbar{
  height:74px !important;
  min-height:74px !important;
  padding:12px 24px !important;
}

.ar-search{
  max-width:760px !important;
}

/* Main content width and spacing */
.ar-content{
  max-width:1280px !important;
  padding:28px 26px 40px !important;
}

/* Clean grid that never turns into a poster wall */
.ar-card-grid{
  grid-template-columns:repeat(5,minmax(150px,1fr)) !important;
  gap:26px 20px !important;
  padding:0 22px 26px !important;
}

.ar-card{
  min-width:0 !important;
  contain:layout style !important;
}

.ar-poster{
  aspect-ratio:2/3 !important;
  height:auto !important;
  max-height:none !important;
  display:block !important;
  border-radius:16px !important;
}

.ar-poster img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

.ar-card h3{
  margin-top:11px !important;
  min-height:42px !important;
  max-height:42px !important;
  font-size:14px !important;
  line-height:1.35 !important;
  word-break:normal !important;
}

.ar-sub{
  display:flex !important;
  gap:8px !important;
  justify-content:space-between !important;
  font-size:12px !important;
}

/* Fix detail page being hidden behind topbar on direct hash load */
.ar-detail-hero{
  margin-top:0 !important;
}

/* Make the detail page readable */
.ar-detail-info h1{
  max-width:820px !important;
}

.ar-detail-info p{
  max-width:880px !important;
}

/* Watch page */
.ar-watch-layout{
  align-items:start !important;
}

.ar-player-screen{
  min-height:420px !important;
}

/* Sidebar ranked panels */
.ar-layout > aside.ar-stack{
  max-height:none !important;
  overflow:visible !important;
}

.ar-list-info h4{
  max-width:170px !important;
}

/* Better footer */
.ar-footer h3{
  color:var(--blue) !important;
}

/* Prevent old text logo CSS from interfering */
.ar-logo strong,
.ar-logo small{
  display:none !important;
}

/* Responsive */
@media(max-width:1350px){
  .ar-card-grid{
    grid-template-columns:repeat(4,minmax(150px,1fr)) !important;
  }
}

@media(max-width:1100px){
  .ar-app{
    grid-template-columns:1fr !important;
  }
  .ar-sidebar{
    display:none !important;
  }
  .ar-card-grid{
    grid-template-columns:repeat(4,minmax(140px,1fr)) !important;
  }
}

@media(max-width:820px){
  .ar-content{
    padding:18px 14px 30px !important;
  }
  .ar-topbar{
    height:auto !important;
    min-height:70px !important;
  }
  .ar-card-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:22px 14px !important;
  }
  .ar-player-screen{
    min-height:260px !important;
  }
}

@media(max-width:560px){
  .ar-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .ar-card h3{
    font-size:13px !important;
  }
}


/* =========================================================
   AniRatio UI - safe nav collapse
   Does not require changing nav link markup.
   ========================================================= */

.ar-app{
  transition:grid-template-columns .22s ease !important;
}

.ar-sidebar{
  transition:width .22s ease, padding .22s ease !important;
  white-space:nowrap !important;
}

.ar-nav-toggle{
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  border-radius:14px !important;
  border:1px solid #203246 !important;
  background:#09121d !important;
  color:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  font-size:20px !important;
  font-weight:900 !important;
}

.ar-nav-toggle:hover{
  border-color:var(--blue) !important;
  background:#0d1825 !important;
}

/* collapsed state */
body.aniratio-nav-collapsed .ar-app{
  grid-template-columns:82px minmax(0,1fr) !important;
}

body.aniratio-nav-collapsed .ar-sidebar{
  width:82px !important;
  padding-left:10px !important;
  padding-right:10px !important;
  overflow-x:hidden !important;
}

body.aniratio-nav-collapsed .ar-logo-img img{
  width:54px !important;
  max-width:54px !important;
}

body.aniratio-nav-collapsed .ar-logo-picker{
  flex-direction:column !important;
  align-items:center !important;
  gap:7px !important;
  padding:8px 4px !important;
  border-radius:18px !important;
}

body.aniratio-nav-collapsed .ar-logo-picker button{
  width:17px !important;
  height:17px !important;
}

/* Hide long labels safely without changing HTML */
body.aniratio-nav-collapsed .ar-menu-title{
  display:none !important;
}

body.aniratio-nav-collapsed .ar-menu a,
body.aniratio-nav-collapsed .ar-genre-grid a{
  width:48px !important;
  height:44px !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  color:transparent !important;
  font-size:0 !important;
  position:relative !important;
}

body.aniratio-nav-collapsed .ar-menu a::first-letter,
body.aniratio-nav-collapsed .ar-genre-grid a::first-letter{
  color:#fff !important;
  font-size:14px !important;
  font-weight:900 !important;
}

body.aniratio-nav-collapsed .ar-menu a.active{
  background:rgba(2,152,255,.20) !important;
}

/* Prevent mobile from forcing broken sidebar */
@media(max-width:1100px){
  body.aniratio-nav-collapsed .ar-app{
    grid-template-columns:1fr !important;
  }
}


/* AniRatio auth + language pages */
.ar-auth-wrap{
  max-width:520px;
  margin:34px auto;
}
.ar-auth-card{
  padding:26px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(12,20,30,.98),rgba(7,13,21,.98));
  border:1px solid rgba(47,76,105,.86);
  box-shadow:0 18px 55px rgba(0,0,0,.32);
}
.ar-auth-card h1{
  margin:0 0 8px;
  font-size:30px;
}
.ar-auth-card p{
  color:#9fb1c5;
  line-height:1.55;
}
.ar-field{
  display:grid;
  gap:7px;
  margin:15px 0;
}
.ar-field label{
  font-weight:900;
  color:#dcecff;
}
.ar-field input{
  width:100%;
  min-height:46px;
  border-radius:12px;
  border:1px solid #26394e;
  background:#070d15;
  color:#fff;
  padding:0 14px;
  outline:none;
  font-weight:800;
}
.ar-field input:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(2,152,255,.12);
}
.ar-auth-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:18px;
  flex-wrap:wrap;
}
.ar-message{
  padding:12px 14px;
  border-radius:12px;
  margin:12px 0;
  font-weight:800;
}
.ar-message.error{
  background:rgba(255,64,91,.12);
  border:1px solid rgba(255,64,91,.32);
  color:#ffd6dc;
}
.ar-message.success{
  background:rgba(37,211,102,.12);
  border:1px solid rgba(37,211,102,.32);
  color:#d8ffe5;
}
.ar-small-link{
  color:#9de4ff;
  font-weight:900;
}
html.lang-jp [data-en]::after{
  content:attr(data-jp);
}
html.lang-jp [data-en]{
  font-size:0 !important;
}
html.lang-jp [data-en]::after{
  font-size:initial !important;
}


/* =========================================================
   AniRatio final sidebar + JP fix
   Old collapsed sidebar state is disabled.
   Sidebar now fully hides instead of half-collapsing.
   ========================================================= */

body.aniratio-nav-collapsed .ar-app,
body.nav-collapsed .ar-app{
  grid-template-columns:244px minmax(0,1fr) !important;
}

body.aniratio-nav-collapsed .ar-sidebar,
body.nav-collapsed .ar-sidebar{
  width:244px !important;
  padding:18px 14px !important;
  display:block !important;
}

body.aniratio-nav-collapsed .ar-menu-title,
body.nav-collapsed .ar-menu-title,
body.aniratio-nav-collapsed .ar-menu a,
body.nav-collapsed .ar-menu a,
body.aniratio-nav-collapsed .ar-genre-grid a,
body.nav-collapsed .ar-genre-grid a{
  color:inherit !important;
  font-size:inherit !important;
  display:block !important;
  width:auto !important;
  height:auto !important;
  padding:10px 11px !important;
  overflow:visible !important;
}

body.aniratio-sidebar-hidden .ar-app{
  grid-template-columns:1fr !important;
}

body.aniratio-sidebar-hidden .ar-sidebar{
  display:none !important;
}

body.aniratio-sidebar-hidden .ar-content{
  max-width:1380px !important;
}

.ar-nav-toggle{
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  border-radius:14px !important;
  border:1px solid #203246 !important;
  background:#09121d !important;
  color:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  font-size:20px !important;
  font-weight:900 !important;
}

.ar-nav-toggle:hover{
  border-color:var(--blue) !important;
  background:#0d1825 !important;
}

.ar-main{
  min-width:0 !important;
}

.ar-topbar{
  position:sticky !important;
  top:0 !important;
  z-index:100 !important;
}

.ar-content{
  padding-top:28px !important;
}

.ar-menu a{
  white-space:normal !important;
  line-height:1.2 !important;
}

.ar-genre-grid{
  grid-template-columns:1fr 1fr !important;
}

.ar-genre-grid a{
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

html.lang-jp .ar-menu a,
html.lang-jp .ar-genre-grid a,
html.lang-jp .ar-tab,
html.lang-jp .ar-pill-btn{
  letter-spacing:0 !important;
}

@media(max-width:1100px){
  body.aniratio-sidebar-hidden .ar-app,
  .ar-app{
    grid-template-columns:1fr !important;
  }
}


/* AniRatio polished footer */
.ar-menu-btn{
  display:none !important;
}

.aniratio-footer{
  margin-top:34px !important;
  padding:28px !important;
  display:grid !important;
  grid-template-columns:minmax(280px,1.6fr) repeat(3,minmax(150px,.7fr)) !important;
  gap:26px !important;
  align-items:start !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(79,163,220,.14), transparent 28%),
    linear-gradient(180deg,rgba(12,20,30,.98),rgba(7,13,21,.98)) !important;
}

.ar-footer-brand{
  display:grid;
  gap:12px;
}

.ar-footer-logo{
  width:190px;
  max-width:100%;
  height:auto;
  object-fit:contain;
}

.ar-footer-brand p{
  margin:0;
  color:#b7c8da;
  line-height:1.55;
  font-size:14px;
}

.ar-footer-note{
  padding:12px 14px;
  border-radius:13px;
  background:rgba(2,152,255,.08);
  border:1px solid rgba(2,152,255,.18);
  color:#d1e8ff !important;
  font-size:13px !important;
}

.ar-footer-col{
  display:grid;
  gap:9px;
}

.ar-footer-col h3{
  margin:0 0 6px;
  color:#fff;
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:.7px;
}

.ar-footer-col a{
  padding:10px 12px;
  border-radius:11px;
  background:#08111b;
  border:1px solid #223348;
  color:#dcecff;
  font-weight:850;
  font-size:13px;
  transition:.18s ease;
}

.ar-footer-col a:hover{
  border-color:var(--blue);
  color:#fff;
  background:rgba(2,152,255,.12);
}

.ar-footer-bottom{
  max-width:1280px;
  margin:12px auto 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  color:#7f93aa;
  font-size:12px;
  padding:0 4px 4px;
}

body.aniratio-sidebar-hidden .ar-footer-bottom{
  max-width:1380px;
}

@media(max-width:1000px){
  .aniratio-footer{
    grid-template-columns:1fr 1fr !important;
  }
  .ar-footer-brand{
    grid-column:1/-1;
  }
}

@media(max-width:620px){
  .aniratio-footer{
    grid-template-columns:1fr !important;
    padding:22px !important;
  }
  .ar-footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }
}


/* =========================================================
   AniRatio Premium Cinema / Nova Layer
   ========================================================= */

body{
  background:
    radial-gradient(circle at 20% -8%, rgba(79,163,220,.18), transparent 33%),
    radial-gradient(circle at 92% 8%, rgba(255,139,34,.09), transparent 28%),
    linear-gradient(180deg,#02050a 0%,#06111c 48%,#03070c 100%) !important;
}

.ar-topbar{
  background:rgba(3,7,12,.72) !important;
  backdrop-filter:blur(22px) saturate(1.2) !important;
  border-bottom:1px solid rgba(79,163,220,.18) !important;
  box-shadow:0 18px 44px rgba(0,0,0,.24) !important;
}

.ar-content{
  max-width:1420px !important;
}

/* Premium animated hero */
.ar-hero{
  min-height:520px !important;
  position:relative !important;
  isolation:isolate !important;
  background:#03070c !important;
  border:1px solid rgba(79,163,220,.26) !important;
  box-shadow:
    0 28px 90px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(255,255,255,.035) !important;
}

.ar-hero::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  background:
    linear-gradient(90deg,rgba(2,5,10,.98) 0%,rgba(2,5,10,.86) 35%,rgba(2,5,10,.36) 68%,rgba(2,5,10,.74) 100%),
    radial-gradient(circle at 82% 38%,rgba(79,163,220,.28),transparent 32%),
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.68)) !important;
  pointer-events:none !important;
}

.ar-hero::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  background:
    linear-gradient(90deg,rgba(79,163,220,.18),transparent 18%),
    linear-gradient(180deg,transparent 72%,rgba(3,7,12,.82)) !important;
  mix-blend-mode:screen !important;
  opacity:.5 !important;
  pointer-events:none !important;
}

.ar-hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.045);
  opacity:.78;
  transition:opacity .65s ease, transform 6s ease;
  filter:saturate(1.08) contrast(1.08);
}

.ar-hero.is-changing .ar-hero-bg{
  opacity:.25;
  transform:scale(1.09);
}

.ar-hero-content{
  z-index:3 !important;
  width:min(650px,60%) !important;
  padding:78px 58px !important;
  animation:arHeroIn .55s ease both;
}

@keyframes arHeroIn{
  from{opacity:0; transform:translateY(14px)}
  to{opacity:1; transform:translateY(0)}
}

.ar-hero h1{
  font-size:64px !important;
  letter-spacing:-2.8px !important;
  text-shadow:0 18px 45px rgba(0,0,0,.58) !important;
}

.ar-hero p{
  font-size:16px !important;
  max-width:610px !important;
}

.ar-rank{
  backdrop-filter:blur(10px) !important;
}

.ar-btn{
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

.ar-btn:hover{
  transform:translateY(-2px) !important;
  filter:brightness(1.08) !important;
  box-shadow:0 18px 46px rgba(79,163,220,.26) !important;
}

.ar-hero-arrows{
  position:absolute;
  right:32px;
  top:50%;
  transform:translateY(-50%);
  z-index:4;
  display:grid;
  gap:10px;
}

.ar-hero-arrow{
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(5,10,17,.72);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  font-size:22px;
  font-weight:900;
  backdrop-filter:blur(12px);
}

.ar-hero-arrow:hover{
  border-color:var(--blue);
  background:rgba(79,163,220,.22);
}

/* Premium section rails */
.ar-panel{
  background:
    radial-gradient(circle at 8% 0%, rgba(79,163,220,.08), transparent 32%),
    linear-gradient(180deg,rgba(12,20,30,.96),rgba(6,12,20,.96)) !important;
}

.ar-card-grid{
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:28px 18px !important;
}

.ar-poster{
  border-radius:18px !important;
  box-shadow:0 16px 40px rgba(0,0,0,.38) !important;
}

.ar-play span{
  background:linear-gradient(180deg,var(--blue),var(--blue2)) !important;
}

.ar-card:hover h3 a{
  color:#bfeeff !important;
}

.ar-quality span{
  box-shadow:0 6px 16px rgba(0,0,0,.28) !important;
}

.ar-card::after{
  content:"";
  display:block;
  height:3px;
  border-radius:999px;
  margin-top:9px;
  background:linear-gradient(90deg,var(--blue),transparent);
  opacity:0;
  transform:scaleX(.3);
  transform-origin:left;
  transition:.18s ease;
}

.ar-card:hover::after{
  opacity:1;
  transform:scaleX(1);
}

/* Watch page premium */
.ar-player{
  box-shadow:
    0 30px 90px rgba(0,0,0,.55),
    0 0 0 1px rgba(79,163,220,.16) !important;
}

.ar-player-screen{
  background:
    radial-gradient(circle at 50% 38%,rgba(79,163,220,.24),transparent 30%),
    radial-gradient(circle at 70% 70%,rgba(255,139,34,.08),transparent 24%),
    linear-gradient(135deg,#000,#07111d 58%,#000) !important;
}

.ar-big-play{
  transition:.2s ease !important;
}

.ar-big-play:hover{
  transform:scale(1.08) !important;
}

/* Premium footer */
.aniratio-footer{
  border-color:rgba(79,163,220,.22) !important;
  box-shadow:0 24px 80px rgba(0,0,0,.32) !important;
}

/* Skeleton shimmer utility for later loading */
.ar-skeleton{
  background:linear-gradient(90deg,#08111b,#132234,#08111b);
  background-size:200% 100%;
  animation:arShimmer 1.4s infinite;
}

@keyframes arShimmer{
  from{background-position:200% 0}
  to{background-position:-200% 0}
}

@media(max-width:1500px){
  .ar-card-grid{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  }
}
@media(max-width:1150px){
  .ar-card-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
  .ar-hero-content{
    width:100% !important;
  }
}
@media(max-width:780px){
  .ar-hero{
    min-height:430px !important;
  }
  .ar-hero h1{
    font-size:38px !important;
  }
  .ar-hero-content{
    padding:44px 26px !important;
  }
  .ar-hero-arrows{
    display:none !important;
  }
  .ar-card-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}
@media(max-width:560px){
  .ar-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}


/* AniRatio pagination/load-more fix */
.aniratio-pagination{
  justify-content:center !important;
  padding:4px 20px 24px !important;
}

.aniratio-pagination .ar-tab{
  min-width:42px;
  text-align:center;
}

.ar-hero .ar-hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background-size:cover;
  background-position:center;
  opacity:.66;
  filter:saturate(1.08) contrast(1.05);
  transform:scale(1.04);
}


/* =========================================================
   AniRatio mobile nav drawer fix
   Desktop: button hides/shows sidebar.
   Mobile: button opens slide-out drawer.
   ========================================================= */

.aniratio-nav-backdrop{
  display:none;
}

@media(max-width:1100px){
  .ar-sidebar{
    display:block !important;
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    width:286px !important;
    height:100vh !important;
    z-index:999 !important;
    transform:translateX(-105%) !important;
    transition:transform .24s ease !important;
    box-shadow:28px 0 70px rgba(0,0,0,.55) !important;
    padding:18px 14px !important;
    background:rgba(5,8,14,.98) !important;
  }

  body.aniratio-mobile-nav-open .ar-sidebar{
    transform:translateX(0) !important;
  }

  .aniratio-nav-backdrop{
    display:none;
    position:fixed;
    inset:0;
    z-index:998;
    background:rgba(0,0,0,.58);
    backdrop-filter:blur(4px);
  }

  body.aniratio-mobile-nav-open .aniratio-nav-backdrop{
    display:block;
  }

  body.aniratio-sidebar-hidden .ar-sidebar{
    display:block !important;
  }

  body.aniratio-sidebar-hidden .ar-app,
  .ar-app{
    grid-template-columns:1fr !important;
  }

  .ar-nav-toggle{
    display:flex !important;
  }
}


/* AniRatio real search v1 */
.ar-search{
  position:relative !important;
}

.aniratio-search-suggestions{
  display:none;
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 10px);
  z-index:500;
  background:rgba(5,10,17,.98);
  border:1px solid rgba(79,163,220,.28);
  border-radius:18px;
  box-shadow:0 24px 80px rgba(0,0,0,.48);
  overflow:hidden;
  backdrop-filter:blur(18px);
}

.aniratio-search-suggestions.is-visible{
  display:block;
}

.ar-search-item{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.ar-search-item:last-child{
  border-bottom:0;
}

.ar-search-item:hover{
  background:rgba(79,163,220,.13);
}

.ar-search-item img{
  width:48px;
  height:64px;
  object-fit:cover;
  border-radius:9px;
  background:#111b27;
}

.ar-search-item b{
  display:block;
  color:#fff;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:14px;
}

.ar-search-item small{
  display:block;
  color:#9fb1c5;
  margin-top:4px;
  font-size:12px;
}

.ar-search-item em{
  font-style:normal;
  font-size:12px;
  font-weight:900;
  color:#bfeeff;
  padding:6px 8px;
  border-radius:999px;
  background:rgba(79,163,220,.12);
  border:1px solid rgba(79,163,220,.22);
}

.ar-search-empty{
  padding:14px;
  color:#9fb1c5;
  font-weight:800;
}


/* AniRatio user library system */
.ar-post{
  padding:18px 20px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(12,20,30,.95),rgba(7,13,21,.95));
  border:1px solid rgba(79,163,220,.16);
}

.ar-post h3{
  margin:0 0 8px;
  color:#fff;
}

.ar-post p{
  margin:0;
  color:#b8c8d8;
}

.ar-card .ar-sub{
  margin-top:8px;
}


/* AniRatio episode/watch upgrade */
.ar-episode-tools{
  display:grid;
  grid-template-columns:minmax(0,1fr) 180px;
  gap:12px;
  padding:0 20px 18px;
}

.ar-episode-tools input,
.ar-episode-tools select{
  min-height:44px;
  border-radius:12px;
  border:1px solid #26394e;
  background:#070d15;
  color:#fff;
  padding:0 13px;
  outline:none;
  font-weight:800;
}

.ar-episode-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
  gap:12px;
  padding:0 20px 24px;
}

.ar-episode-card{
  min-height:82px;
  display:grid;
  align-content:center;
  gap:3px;
  padding:12px;
  border-radius:14px;
  background:#08111b;
  border:1px solid #223348;
  color:#dcecff;
  transition:.18s ease;
}

.ar-episode-card:hover,
.ar-episode-card.active{
  border-color:var(--blue);
  background:rgba(79,163,220,.14);
  transform:translateY(-2px);
}

.ar-episode-card span{
  color:#9fb1c5;
  font-size:11px;
  font-weight:900;
}

.ar-episode-card b{
  color:#fff;
  font-size:22px;
}

.ar-episode-card small{
  color:#9fb1c5;
  font-size:11px;
}

.ar-watch-controls{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  padding:0 20px 20px;
}

.ar-disabled{
  opacity:.45;
  pointer-events:none;
}

.ar-server{
  cursor:pointer;
}

.ar-server-note{
  margin:0 20px 20px;
  padding:14px;
  border-radius:14px;
  background:rgba(79,163,220,.08);
  border:1px solid rgba(79,163,220,.18);
  color:#c7d8e8;
  font-weight:800;
}

@media(max-width:640px){
  .ar-episode-tools{
    grid-template-columns:1fr;
    padding:0 14px 16px;
  }
  .ar-episode-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:0 14px 18px;
  }
  .ar-watch-controls{
    padding:0 14px 16px;
  }
}


/* AniRatio watch source integration */
.ar-source-status{
  padding:0 20px 20px;
}

.ar-source-loading,
.ar-source-ok,
.ar-source-warn{
  padding:16px;
  border-radius:16px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.2);
  color:#c7d8e8;
}

.ar-source-ok{
  border-color:rgba(37,211,102,.35);
  background:rgba(37,211,102,.08);
}

.ar-source-warn{
  border-color:rgba(255,139,34,.35);
  background:rgba(255,139,34,.08);
}

.ar-source-ok b,
.ar-source-warn b{
  display:block;
  color:#fff;
  margin-bottom:6px;
}

.ar-source-ok span{
  display:inline-flex;
  margin-bottom:8px;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(79,163,220,.15);
  color:#dff5ff;
  font-weight:900;
  font-size:12px;
}

.ar-source-ok p,
.ar-source-warn p{
  margin:0;
}

.ar-source-fallbacks{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}

.ar-source-fallback{
  display:inline-flex;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(79,163,220,.15);
  border:1px solid rgba(79,163,220,.25);
  color:#dff5ff;
  font-weight:900;
  font-size:13px;
}


/* AniRatio custom watermarked player */
.ar-custom-player{
  overflow:hidden !important;
  background:#000 !important;
}

.ar-video-stage{
  position:relative;
  aspect-ratio:16/9;
  min-height:420px;
  background-size:cover;
  background-position:center;
  display:grid;
  place-items:center;
  overflow:hidden;
}

.ar-video,
.ar-iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:none;
  background:#000;
}

.ar-video.is-active,
.ar-iframe.is-active{
  display:block;
}

.ar-player-watermark{
  position:absolute;
  right:18px;
  top:18px;
  z-index:8;
  opacity:.84;
  pointer-events:none;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.55));
}

.ar-player-watermark img{
  width:132px;
  height:auto;
  display:block;
}

.ar-player-overlay{
  position:absolute;
  inset:0;
  z-index:7;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 42%,rgba(79,163,220,.18),transparent 28%),
    linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.48));
  transition:.18s ease;
}

.ar-player-overlay.is-hidden{
  opacity:0;
  pointer-events:none;
}

.ar-big-play{
  width:92px;
  height:92px;
  border:0;
  border-radius:50%;
  background:linear-gradient(180deg,var(--blue),var(--blue2));
  color:#fff;
  font-size:34px;
  font-weight:1000;
  cursor:pointer;
  box-shadow:0 24px 70px rgba(79,163,220,.34);
  transition:.18s ease;
}

.ar-big-play:hover{
  transform:scale(1.08);
}

.ar-player-message{
  position:absolute;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  max-width:90%;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(5,10,17,.76);
  border:1px solid rgba(255,255,255,.12);
  color:#dcecff;
  font-weight:900;
  font-size:13px;
  backdrop-filter:blur(14px);
}

.ar-control-bar{
  display:grid;
  grid-template-columns:auto auto minmax(80px,1fr) auto auto auto;
  gap:12px;
  align-items:center;
  padding:12px 14px;
  background:rgba(3,7,12,.98);
  border-top:1px solid rgba(79,163,220,.18);
}

.ar-control-btn{
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:11px;
  background:#09121d;
  color:#fff;
  cursor:pointer;
  font-weight:900;
}

.ar-control-btn:hover{
  border-color:var(--blue);
  background:rgba(79,163,220,.12);
}

.ar-time{
  color:#b8c8da;
  font-size:12px;
  font-weight:900;
}

.ar-seek-range{
  width:100%;
  accent-color:var(--blue);
}

.ar-source-fallback{
  border:0;
  cursor:pointer;
}

@media(max-width:760px){
  .ar-video-stage{
    min-height:240px;
  }
  .ar-player-watermark img{
    width:92px;
  }
  .ar-big-play{
    width:72px;
    height:72px;
    font-size:26px;
  }
  .ar-control-bar{
    grid-template-columns:auto auto minmax(70px,1fr) auto;
  }
  .ar-control-btn:nth-last-child(1){
    display:none;
  }
}


/* Player resilience upgrade */
.ar-server small{
  display:block;
  opacity:.72;
  margin-top:2px;
  font-size:10px;
}

.ar-video::cue{
  background:rgba(0,0,0,.74);
  color:#fff;
  font-size:16px;
  font-weight:800;
}

.ar-source-ok,
.ar-source-warn{
  transition:.18s ease;
}


/* AniRatio provider/admin health */
.ar-admin-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  padding:0 20px 22px;
}

.ar-admin-card{
  padding:18px;
  border-radius:18px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.18);
}

.ar-admin-card.ok{
  border-color:rgba(37,211,102,.28);
}

.ar-admin-card.bad{
  border-color:rgba(255,139,34,.32);
}

.ar-admin-card h3{
  margin:0 0 14px;
  color:#fff;
}

.ar-admin-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.ar-admin-row:last-child{
  border-bottom:0;
}

.ar-admin-row span{
  color:#9fb1c5;
}

.ar-admin-row b{
  color:#fff;
  text-align:right;
  word-break:break-word;
}

.ar-admin-note{
  color:#b8c8da;
  line-height:1.5;
  margin:14px 0 0;
}

.ar-admin-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) 140px auto;
  gap:14px;
  align-items:end;
  padding:0 20px 22px;
}

.ar-admin-json{
  margin:0 20px 22px;
  padding:18px;
  border-radius:18px;
  background:#050a11;
  border:1px solid rgba(79,163,220,.18);
}

.ar-admin-json pre{
  white-space:pre-wrap;
  overflow:auto;
  color:#dcecff;
  background:#02050a;
  padding:14px;
  border-radius:12px;
  max-height:520px;
}

.ar-admin-links{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  padding:0 20px 22px;
}

.ar-admin-links a{
  padding:13px;
  border-radius:13px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.18);
  color:#dcecff;
  font-weight:900;
  text-align:center;
}

.ar-admin-links a:hover{
  border-color:var(--blue);
  background:rgba(79,163,220,.12);
}

@media(max-width:900px){
  .ar-admin-grid,
  .ar-admin-form,
  .ar-admin-links{
    grid-template-columns:1fr;
  }
}


/* AniRatio admin control layer */
.ar-settings-form{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  padding:0 20px 22px;
}

.ar-settings-form .ar-admin-card{
  margin:0;
}

.ar-field select{
  width:100%;
  min-height:46px;
  border-radius:12px;
  border:1px solid #26394e;
  background:#070d15;
  color:#fff;
  padding:0 14px;
  outline:none;
  font-weight:800;
}

.ar-check{
  display:flex;
  align-items:center;
  gap:10px;
  margin:12px 0;
  color:#dcecff;
  font-weight:900;
}

.ar-check input{
  width:18px;
  height:18px;
  accent-color:var(--blue);
}

.ar-cache-table{
  padding:0 20px 22px;
  display:grid;
  gap:8px;
}

.ar-cache-row{
  display:grid;
  grid-template-columns:2fr .7fr .7fr 1.2fr;
  gap:12px;
  padding:12px;
  border-radius:12px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.12);
  color:#c7d8e8;
  align-items:center;
}

.ar-cache-row.head{
  background:rgba(79,163,220,.12);
  color:#fff;
  font-weight:900;
}

.ar-cache-row span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media(max-width:1000px){
  .ar-settings-form{
    grid-template-columns:1fr;
  }
  .ar-cache-row{
    grid-template-columns:1fr;
  }
}


/* AniRatio admin dashboard */
.ar-dashboard-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  padding:0 20px 22px;
}

.ar-dashboard-card{
  padding:20px;
  border-radius:18px;
  background:
    radial-gradient(circle at 90% 0%, rgba(79,163,220,.16), transparent 34%),
    #08111b;
  border:1px solid rgba(79,163,220,.18);
}

.ar-dashboard-card span{
  display:block;
  color:#9fb1c5;
  font-weight:900;
  margin-bottom:10px;
}

.ar-dashboard-card b{
  display:block;
  color:#fff;
  font-size:34px;
  line-height:1;
}

@media(max-width:900px){
  .ar-dashboard-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:560px){
  .ar-dashboard-grid{
    grid-template-columns:1fr;
  }
}


/* AniRatio diagnostics logs */
.ar-log-list{
  display:grid;
  gap:12px;
  padding:0 20px 22px;
}

.ar-log-entry{
  padding:15px;
  border-radius:16px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.16);
}

.ar-log-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.ar-log-head b{
  color:#fff;
}

.ar-log-head span,
.ar-log-entry small{
  color:#9fb1c5;
}

.ar-log-entry pre{
  white-space:pre-wrap;
  background:#02050a;
  border-radius:12px;
  padding:12px;
  color:#dcecff;
  overflow:auto;
  max-height:260px;
}


/* AniRatio iframe stabilization */
.ar-custom-player.is-iframe-mode .ar-control-bar{
  display:none !important;
}

.ar-custom-player.is-iframe-mode .ar-player-overlay{
  display:none !important;
}

.ar-custom-player.is-iframe-mode .ar-video-stage{
  min-height:520px;
  background:#000 !important;
}

.ar-custom-player.is-iframe-mode .ar-iframe{
  display:block !important;
  width:100%;
  height:100%;
  background:#000;
}

.ar-custom-player.is-iframe-mode .ar-video{
  display:none !important;
}

.ar-provider-badge{
  position:absolute;
  left:18px;
  top:18px;
  z-index:9;
  padding:8px 11px;
  border-radius:999px;
  background:rgba(5,10,17,.74);
  border:1px solid rgba(79,163,220,.28);
  color:#dff5ff;
  font-size:12px;
  font-weight:1000;
  backdrop-filter:blur(14px);
  pointer-events:none;
  box-shadow:0 10px 28px rgba(0,0,0,.32);
}

.ar-custom-player.is-iframe-mode .ar-player-watermark{
  top:18px;
  right:18px;
  opacity:.92;
}

.ar-custom-player.is-iframe-mode .ar-watch-title{
  border-top:1px solid rgba(79,163,220,.14);
}

.ar-custom-player.is-iframe-mode .ar-watch-title p::after{
  content:" Iframe mode hides AniRatio controls to avoid double-player confusion.";
  color:#9fb1c5;
}

@media(max-width:760px){
  .ar-custom-player.is-iframe-mode .ar-video-stage{
    min-height:260px;
    aspect-ratio:16/9;
  }

  .ar-provider-badge{
    left:10px;
    top:10px;
    font-size:10px;
    padding:6px 8px;
  }

  .ar-custom-player.is-iframe-mode .ar-player-watermark{
    right:10px;
    top:10px;
  }

  .ar-custom-player.is-iframe-mode .ar-player-watermark img{
    width:82px;
  }
}


/* MegaPlay iframe compatibility mode */
.ar-custom-player.is-iframe-mode .ar-provider-badge{
  border-color:rgba(255,139,34,.38);
  background:rgba(5,10,17,.82);
}

.ar-custom-player.is-iframe-mode .ar-video-stage{
  border-radius:18px 18px 0 0;
}

.ar-iframe{
  color-scheme:dark;
}


/* AniRatio iframe mode detection fix */
.ar-custom-player.is-iframe-mode .ar-control-bar,
.ar-player.is-iframe-mode .ar-control-bar{
  display:none !important;
}

.ar-custom-player.is-iframe-mode .ar-player-overlay,
.ar-player.is-iframe-mode .ar-player-overlay{
  display:none !important;
}

.ar-custom-player.is-iframe-mode .ar-video-stage,
.ar-player.is-iframe-mode .ar-video-stage{
  min-height:520px !important;
  background:#000 !important;
}

.ar-custom-player.is-iframe-mode .ar-iframe,
.ar-player.is-iframe-mode .ar-iframe{
  display:block !important;
  width:100% !important;
  height:100% !important;
  background:#000 !important;
}

.ar-custom-player.is-iframe-mode .ar-video,
.ar-player.is-iframe-mode .ar-video{
  display:none !important;
}

.ar-custom-player.is-iframe-mode .ar-provider-badge,
.ar-player.is-iframe-mode .ar-provider-badge{
  border-color:rgba(255,139,34,.38);
  background:rgba(5,10,17,.86);
}

@media(max-width:760px){
  .ar-custom-player.is-iframe-mode .ar-video-stage,
  .ar-player.is-iframe-mode .ar-video-stage{
    min-height:250px !important;
    aspect-ratio:16/9;
  }
}


/* AniRatio iframe aspect + fullscreen watermark fix */
.ar-custom-player.is-iframe-mode .ar-video-stage,
.ar-player.is-iframe-mode .ar-video-stage{
  position:relative !important;
  width:100% !important;
  aspect-ratio:16/9 !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  overflow:hidden !important;
  background:#000 !important;
  border-radius:18px 18px 0 0 !important;
}

.ar-custom-player.is-iframe-mode .ar-iframe,
.ar-player.is-iframe-mode .ar-iframe{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  border:0 !important;
  background:#000 !important;
  z-index:2 !important;
}

.ar-custom-player.is-iframe-mode .ar-video,
.ar-player.is-iframe-mode .ar-video{
  display:none !important;
}

.ar-custom-player.is-iframe-mode .ar-control-bar,
.ar-player.is-iframe-mode .ar-control-bar{
  display:none !important;
}

.ar-custom-player.is-iframe-mode .ar-player-overlay,
.ar-player.is-iframe-mode .ar-player-overlay{
  display:none !important;
}

.ar-player-watermark{
  z-index:40 !important;
}

.ar-player-watermark img{
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.65)) !important;
}

.ar-provider-badge{
  z-index:41 !important;
}

.ar-frame-fullscreen{
  position:absolute;
  right:18px;
  bottom:18px;
  z-index:42;
  width:44px;
  height:44px;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(5,10,17,.74);
  color:#fff;
  font-size:18px;
  font-weight:1000;
  cursor:pointer;
  backdrop-filter:blur(14px);
  display:none;
  box-shadow:0 10px 28px rgba(0,0,0,.36);
}

.ar-custom-player.is-iframe-mode .ar-frame-fullscreen,
.ar-player.is-iframe-mode .ar-frame-fullscreen{
  display:grid;
  place-items:center;
}

.ar-frame-fullscreen:hover{
  border-color:var(--blue);
  background:rgba(79,163,220,.22);
}

/* Keep watermark visible when AniRatio wrapper is fullscreen */
.ar-custom-player:fullscreen .ar-player-watermark,
.ar-player:fullscreen .ar-player-watermark,
.ar-custom-player:-webkit-full-screen .ar-player-watermark,
.ar-player:-webkit-full-screen .ar-player-watermark{
  display:block !important;
  opacity:.94 !important;
  z-index:40 !important;
}

.ar-custom-player:fullscreen .ar-provider-badge,
.ar-player:fullscreen .ar-provider-badge,
.ar-custom-player:-webkit-full-screen .ar-provider-badge,
.ar-player:-webkit-full-screen .ar-provider-badge{
  display:block !important;
  z-index:41 !important;
}

.ar-custom-player:fullscreen .ar-frame-fullscreen,
.ar-player:fullscreen .ar-frame-fullscreen,
.ar-custom-player:-webkit-full-screen .ar-frame-fullscreen,
.ar-player:-webkit-full-screen .ar-frame-fullscreen{
  z-index:42 !important;
}

.ar-custom-player:fullscreen .ar-video-stage,
.ar-player:fullscreen .ar-video-stage,
.ar-custom-player:-webkit-full-screen .ar-video-stage,
.ar-player:-webkit-full-screen .ar-video-stage{
  height:100vh !important;
  width:100vw !important;
  aspect-ratio:auto !important;
  border-radius:0 !important;
}

.ar-custom-player:fullscreen .ar-iframe,
.ar-player:fullscreen .ar-iframe,
.ar-custom-player:-webkit-full-screen .ar-iframe,
.ar-player:-webkit-full-screen .ar-iframe{
  width:100% !important;
  height:100% !important;
}

@media(max-width:760px){
  .ar-custom-player.is-iframe-mode .ar-video-stage,
  .ar-player.is-iframe-mode .ar-video-stage{
    aspect-ratio:16/9 !important;
    min-height:0 !important;
  }

  .ar-custom-player.is-iframe-mode .ar-player-watermark img,
  .ar-player.is-iframe-mode .ar-player-watermark img{
    width:82px !important;
  }

  .ar-frame-fullscreen{
    width:38px;
    height:38px;
    right:10px;
    bottom:10px;
    font-size:16px;
  }
}


/* AniRatio cleaner fullscreen UI */
.ar-custom-player.is-iframe-mode .ar-frame-fullscreen,
.ar-player.is-iframe-mode .ar-frame-fullscreen{
  display:grid !important;
  place-items:center !important;
}

/* Move AniRatio fullscreen away from provider controls */
.ar-frame-fullscreen{
  top:62px !important;
  right:18px !important;
  bottom:auto !important;
  width:42px !important;
  height:42px !important;
  border-radius:14px !important;
  border:1px solid rgba(79,163,220,.38) !important;
  background:rgba(5,10,17,.52) !important;
  color:#e9f7ff !important;
  font-size:18px !important;
  opacity:0 !important;
  transform:translateY(-4px) scale(.96) !important;
  transition:opacity .18s ease, transform .18s ease, background .18s ease, border-color .18s ease !important;
  backdrop-filter:blur(16px) saturate(1.12) !important;
  box-shadow:0 12px 34px rgba(0,0,0,.42) !important;
}

/* Show only when user interacts with player */
.ar-custom-player:hover .ar-frame-fullscreen,
.ar-custom-player:focus-within .ar-frame-fullscreen,
.ar-player:hover .ar-frame-fullscreen,
.ar-player:focus-within .ar-frame-fullscreen,
.ar-frame-fullscreen:focus{
  opacity:1 !important;
  transform:translateY(0) scale(1) !important;
}

.ar-frame-fullscreen:hover{
  background:rgba(79,163,220,.24) !important;
  border-color:rgba(128,216,255,.72) !important;
  color:#fff !important;
}

/* Tooltip */
.ar-frame-fullscreen::after{
  content:"AniRatio Fullscreen";
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  width:max-content;
  max-width:220px;
  padding:7px 10px;
  border-radius:10px;
  background:rgba(3,7,12,.88);
  border:1px solid rgba(79,163,220,.28);
  color:#dff5ff;
  font-size:11px;
  font-weight:900;
  opacity:0;
  pointer-events:none;
  transform:translateY(-3px);
  transition:.16s ease;
  white-space:nowrap;
}

.ar-frame-fullscreen:hover::after,
.ar-frame-fullscreen:focus::after{
  opacity:1;
  transform:translateY(0);
}

/* Keep watermark and fullscreen button as the top overlay group */
.ar-custom-player.is-iframe-mode .ar-player-watermark,
.ar-player.is-iframe-mode .ar-player-watermark{
  top:18px !important;
  right:18px !important;
}

.ar-custom-player.is-iframe-mode .ar-provider-badge,
.ar-player.is-iframe-mode .ar-provider-badge{
  top:18px !important;
  left:18px !important;
}

/* Make fullscreen mode cleaner */
.ar-custom-player:fullscreen .ar-frame-fullscreen,
.ar-player:fullscreen .ar-frame-fullscreen,
.ar-custom-player:-webkit-full-screen .ar-frame-fullscreen,
.ar-player:-webkit-full-screen .ar-frame-fullscreen{
  top:74px !important;
  right:26px !important;
  opacity:.72 !important;
}

.ar-custom-player:fullscreen:hover .ar-frame-fullscreen,
.ar-player:fullscreen:hover .ar-frame-fullscreen,
.ar-custom-player:-webkit-full-screen:hover .ar-frame-fullscreen,
.ar-player:-webkit-full-screen:hover .ar-frame-fullscreen{
  opacity:1 !important;
}

@media(max-width:760px){
  .ar-frame-fullscreen{
    top:50px !important;
    right:10px !important;
    width:36px !important;
    height:36px !important;
    border-radius:12px !important;
    font-size:15px !important;
  }

  .ar-frame-fullscreen::after{
    display:none !important;
  }

  .ar-custom-player.is-iframe-mode .ar-player-watermark,
  .ar-player.is-iframe-mode .ar-player-watermark{
    top:10px !important;
    right:10px !important;
  }

  .ar-custom-player.is-iframe-mode .ar-provider-badge,
  .ar-player.is-iframe-mode .ar-provider-badge{
    top:10px !important;
    left:10px !important;
  }
}


/* Branding + SEO admin polish */
.ar-logo img,
.ar-brand img,
.ar-footer-brand img,
.footer-logo img{
  max-width:220px;
  max-height:72px;
  object-fit:contain;
  display:block;
}

.ar-sidebar .ar-logo img{
  max-width:190px;
  max-height:68px;
}

.ar-field small{
  display:block;
  margin-top:6px;
  color:#9fb1c5;
  font-weight:700;
}

.ar-field textarea{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(79,163,220,.22);
  background:#08111b;
  color:#fff;
  padding:12px 14px;
  font:inherit;
  resize:vertical;
}


/* Branding upload final */
.ar-brand-preview{
  margin-top:12px;
  padding:14px;
  border-radius:16px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.16);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.ar-brand-preview span{
  color:#9fb1c5;
  font-weight:900;
}

.ar-brand-preview img{
  max-width:240px;
  max-height:76px;
  object-fit:contain;
  background:rgba(255,255,255,.04);
  border-radius:12px;
  padding:8px;
}

.ar-brand-preview.small img{
  width:48px;
  height:48px;
}

.ar-field input[type="file"]{
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(79,163,220,.22);
  background:#08111b;
  color:#dcecff;
}


/* Search UX polish */
.ar-search{
  position:relative;
}

.aniratio-search-suggestions{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  right:0;
  z-index:900;
  background:rgba(5,10,17,.98);
  border:1px solid rgba(79,163,220,.28);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.52);
  backdrop-filter:blur(18px);
}

.aniratio-search-suggestions.is-visible{
  display:block;
}

.ar-search-heading{
  padding:11px 14px;
  color:#9fb1c5;
  font-size:12px;
  font-weight:1000;
  border-bottom:1px solid rgba(255,255,255,.06);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.ar-search-loading,
.ar-search-empty{
  padding:16px;
  color:#b8c8da;
  display:grid;
  gap:4px;
}

.ar-search-empty b{
  color:#fff;
}

.ar-mini-spinner{
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.18);
  border-top-color:var(--blue);
  display:inline-block;
  animation:arSpin .75s linear infinite;
  margin-right:8px;
  vertical-align:-3px;
}

@keyframes arSpin{
  to{transform:rotate(360deg);}
}

.ar-search-item{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.ar-search-item img{
  width:48px;
  height:64px;
  border-radius:9px;
  object-fit:cover;
  background:#111b27;
}

.ar-search-item b{
  display:block;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ar-search-item small{
  color:#9fb1c5;
  font-size:12px;
}

.ar-search-item em,
.ar-search-chip em{
  font-style:normal;
  color:#dff5ff;
  font-size:12px;
  font-weight:1000;
  background:rgba(79,163,220,.12);
  border:1px solid rgba(79,163,220,.22);
  border-radius:999px;
  padding:6px 8px;
}

.ar-search-item:hover,
.ar-search-item.is-active,
.ar-search-chip:hover,
.ar-search-chip.is-active,
.ar-search-all:hover,
.ar-search-all.is-active{
  background:rgba(79,163,220,.13);
}

.ar-search-chip,
.ar-search-all{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  color:#fff;
  font-weight:900;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.ar-search-all{
  color:#dff5ff;
  justify-content:center;
}

@media(max-width:760px){
  .aniratio-search-suggestions{
    position:fixed;
    top:74px;
    left:12px;
    right:12px;
    max-height:70vh;
    overflow:auto;
  }
}


/* Provider hardening phase 1 */
#arProviderStatus{
  margin-top:10px;
  color:#dff5ff;
  font-weight:900;
}

.ar-server-btn.is-active,
.ar-server-btn.is-active{
  border-color:var(--blue);
  box-shadow:0 0 0 1px rgba(79,163,220,.22);
}


/* Provider hardening phase 2 */
.ar-provider-status-box{
  margin:12px 20px 20px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(79,163,220,.08);
  border:1px solid rgba(79,163,220,.18);
  color:#dff5ff;
  font-weight:900;
}


/* Provider hardening phase 3 */
.ar-admin-card.ok{
  border-color:rgba(37,211,102,.34);
}
.ar-admin-card.bad{
  border-color:rgba(255,139,34,.42);
}
.ar-cache-row span{
  overflow:hidden;
  text-overflow:ellipsis;
}


/* Provider hardening phase 4 */
.ar-field select{
  width:100%;
  min-height:44px;
  border-radius:12px;
  border:1px solid rgba(79,163,220,.22);
  background:#08111b;
  color:#fff;
  padding:0 12px;
}


/* Provider hardening phase 5 */
.ar-provider-chain{
  display:grid;
  gap:10px;
  padding:0 20px 20px;
}
.ar-provider-pill,
.ar-provider-chain-loading,
.ar-provider-chain-empty{
  padding:13px 14px;
  border-radius:16px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.18);
  color:#dcecff;
}
.ar-provider-pill{
  display:grid;
  gap:4px;
}
.ar-provider-pill.primary{
  border-color:rgba(37,211,102,.32);
  background:rgba(37,211,102,.07);
}
.ar-provider-pill b{
  color:#fff;
}
.ar-provider-pill span,
.ar-provider-pill small{
  color:#9fb1c5;
  font-weight:800;
}


/* Provider hardening phase 6 */
.ar-provider-issue-form{
  display:grid;
  grid-template-columns:190px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:0 20px 20px;
}
.ar-provider-issue-form select,
.ar-provider-issue-form input{
  min-height:42px;
  border-radius:12px;
  border:1px solid rgba(79,163,220,.22);
  background:#08111b;
  color:#fff;
  padding:0 12px;
}
#arProviderIssueStatus{
  color:#9fb1c5;
  font-weight:900;
}
@media(max-width:760px){
  .ar-provider-issue-form{
    grid-template-columns:1fr;
  }
}


/* Provider hardening phase 7 */
.ar-provider-checklist{
  margin:0 20px 22px;
  padding:18px;
  border-radius:18px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.18);
  display:grid;
  gap:10px;
}
.ar-provider-checklist h3{
  margin:0 0 6px;
  color:#fff;
}
.ar-provider-checklist label{
  color:#dcecff;
  font-weight:900;
  display:flex;
  gap:10px;
  align-items:center;
}
.ar-provider-checklist input{
  width:18px;
  height:18px;
  accent-color:var(--blue);
}


/* Watch system phase 1 */
.ar-watch-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(79,163,220,.12);
  border:1px solid rgba(79,163,220,.24);
  color:#dff5ff;
  font-weight:1000;
  font-size:12px;
}

.ar-watch-status.watched{
  background:rgba(37,211,102,.12);
  border-color:rgba(37,211,102,.28);
  color:#d8ffe7;
}

.ar-continue-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px;
  padding:0 20px 20px;
}

.ar-continue-card{
  display:grid;
  grid-template-columns:74px minmax(0,1fr);
  gap:12px;
  padding:12px;
  border-radius:18px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.18);
}

.ar-continue-card img{
  width:74px;
  height:104px;
  object-fit:cover;
  border-radius:12px;
  background:#111b27;
}

.ar-continue-meta{
  display:grid;
  gap:6px;
  min-width:0;
}

.ar-continue-meta b{
  color:#fff;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ar-continue-meta span,
.ar-continue-meta small{
  color:#9fb1c5;
  font-weight:900;
}

.ar-progress{
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}

.ar-progress i{
  display:block;
  height:100%;
  background:linear-gradient(90deg,#4fa3dc,#7cd6ff);
  border-radius:999px;
}


/* Watch system phase 2 */
.ar-library-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  padding:0 20px 22px;
}
.ar-watched-list{
  display:grid;
  gap:10px;
  padding:0 20px 22px;
}
.ar-watched-row{
  display:grid;
  grid-template-columns:54px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:16px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.18);
}
.ar-watched-row img{
  width:54px;
  height:74px;
  object-fit:cover;
  border-radius:10px;
  background:#111b27;
}
.ar-watched-row b{
  display:block;
  color:#fff;
}
.ar-watched-row small,
.ar-watched-row em{
  color:#9fb1c5;
  font-weight:900;
  font-style:normal;
}
.ar-episode-card.is-watched{
  border-color:rgba(37,211,102,.32);
}
.ar-episode-card.has-progress{
  border-color:rgba(79,163,220,.30);
}
@media(max-width:700px){
  .ar-library-actions{
    display:grid;
  }
  .ar-watched-row{
    grid-template-columns:44px minmax(0,1fr);
  }
  .ar-watched-row em{
    grid-column:2;
  }
}


/* Ratings phase 1 */
.ar-rating-box{
  padding:0 20px 22px;
  display:grid;
  gap:12px;
}
.ar-rating-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.ar-rating-buttons button{
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(79,163,220,.22);
  background:#08111b;
  color:#dcecff;
  font-weight:1000;
  cursor:pointer;
}
.ar-rating-buttons button:hover,
.ar-rating-buttons button.active{
  border-color:var(--blue);
  background:linear-gradient(180deg,#4fa3dc,#2479ad);
  color:#fff;
}
.ar-rating-box textarea{
  width:100%;
  min-height:82px;
  border-radius:14px;
  border:1px solid rgba(79,163,220,.22);
  background:#08111b;
  color:#fff;
  padding:12px 14px;
  resize:vertical;
}
.ar-rating-status{
  color:#9fb1c5;
  font-weight:900;
}
.ar-ratings-list{
  display:grid;
  gap:10px;
  padding:0 20px 22px;
}
.ar-rating-row-card{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:14px;
  border-radius:16px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.18);
}
.ar-rating-row-card b{
  color:#fff;
  display:block;
}
.ar-rating-row-card small{
  color:#9fb1c5;
}
.ar-rating-row-card em{
  color:#dff5ff;
  font-style:normal;
  font-weight:1000;
}


/* Ratings phase 2 */
.ar-cache-row.muted{
  opacity:.58;
}
.ar-top-rated-list{
  display:grid;
  gap:12px;
  padding:0 20px 22px;
}
.ar-top-rated-card{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:14px;
  align-items:center;
  padding:16px;
  border-radius:18px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.18);
}
.ar-top-rated-card b{
  color:#dff5ff;
  font-size:22px;
}
.ar-top-rated-card strong{
  display:block;
  color:#fff;
  font-size:17px;
}
.ar-top-rated-card small{
  color:#9fb1c5;
  font-weight:900;
}


/* OAuth prep phase 1 */
.ar-oauth-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:18px 0;
  color:#9fb1c5;
  font-weight:900;
}
.ar-oauth-divider::before,
.ar-oauth-divider::after{
  content:"";
  height:1px;
  background:rgba(255,255,255,.10);
  flex:1;
}
.ar-oauth-buttons{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.ar-oauth-btn{
  display:flex;
  min-height:42px;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  border:1px solid rgba(79,163,220,.22);
  background:#08111b;
  color:#fff;
  font-weight:1000;
}
.ar-oauth-btn:hover{
  border-color:var(--blue);
  background:rgba(79,163,220,.14);
}
.ar-auth-card{
  max-width:720px;
  margin:70px auto;
  padding:28px;
}
@media(max-width:700px){
  .ar-oauth-buttons{grid-template-columns:1fr;}
}


/* MAL sync prep */
.ar-mal-sync-form{
  display:grid;
  grid-template-columns:180px 120px auto minmax(0,1fr);
  gap:10px;
  padding:0 20px 22px;
  align-items:center;
}
.ar-mal-sync-form select,
.ar-mal-sync-form input{
  min-height:42px;
  border-radius:12px;
  border:1px solid rgba(79,163,220,.22);
  background:#08111b;
  color:#fff;
  padding:0 12px;
}
#arMalSyncStatus{
  color:#9fb1c5;
  font-weight:900;
}
@media(max-width:760px){
  .ar-mal-sync-form{
    grid-template-columns:1fr;
  }
}


/* OAuth phase 7 onboarding */
.ar-oauth-onboarding-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:18px;
}


/* Account system phase 1 */
.ar-profile-preview{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
  padding:14px;
  border-radius:18px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.18);
}
.ar-profile-preview img{
  width:72px;
  height:72px;
  border-radius:999px;
  object-fit:cover;
  background:#111b27;
}
.ar-profile-preview b{
  display:block;
  color:#fff;
  font-size:18px;
}
.ar-profile-preview small{
  color:#9fb1c5;
  font-weight:900;
}
.ar-dashboard-card.link{
  text-decoration:none;
}
.ar-dashboard-card.link:hover{
  border-color:var(--blue);
  background:rgba(79,163,220,.10);
}


/* Account system phase 2 library */
.ar-library-form{
  display:grid;
  grid-template-columns:170px auto minmax(0,1fr) auto minmax(0,1fr);
  gap:10px;
  align-items:center;
  padding:0 20px 22px;
}
.ar-library-form select,
.ar-library-form input{
  min-height:42px;
  border-radius:12px;
  border:1px solid rgba(79,163,220,.22);
  background:#08111b;
  color:#fff;
  padding:0 12px;
}
.ar-check.mini{
  display:flex;
  align-items:center;
  gap:8px;
  color:#dcecff;
  font-weight:900;
}
.ar-library-status{
  color:#9fb1c5;
  font-weight:900;
}
.ar-library-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:0 20px 22px;
}
.ar-library-tabs a{
  padding:10px 12px;
  border-radius:999px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.18);
  color:#dcecff;
  font-weight:900;
}
.ar-library-tabs a.active,
.ar-library-tabs a:hover{
  border-color:var(--blue);
  background:rgba(79,163,220,.14);
}
.ar-library-tabs b{
  color:#9fb1c5;
}
.ar-library-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:16px;
  padding:0 20px 22px;
}
.ar-library-card{
  display:grid;
  grid-template-columns:74px minmax(0,1fr);
  gap:12px;
  padding:12px;
  border-radius:18px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.18);
}
.ar-library-card img{
  width:74px;
  height:104px;
  object-fit:cover;
  border-radius:12px;
  background:#111b27;
}
.ar-library-card b{
  color:#fff;
  display:block;
}
.ar-library-card small{
  color:#9fb1c5;
  font-weight:900;
}
@media(max-width:760px){
  .ar-library-form{
    grid-template-columns:1fr;
  }
}


/* Account system phase 3 social */
.ar-profile-hero{
  display:grid;
  grid-template-columns:110px minmax(0,1fr) auto;
  gap:20px;
  align-items:center;
  padding:24px;
}
.ar-profile-hero img{
  width:110px;
  height:110px;
  border-radius:999px;
  object-fit:cover;
  background:#111b27;
  border:1px solid rgba(79,163,220,.28);
}
.ar-profile-hero h1{
  margin:0 0 8px;
  color:#fff;
  font-size:30px;
}
.ar-profile-hero p{
  margin:0 0 12px;
  color:#b8c8da;
}
.ar-profile-stats{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.ar-profile-stats span{
  padding:7px 10px;
  border-radius:999px;
  background:rgba(79,163,220,.10);
  color:#dff5ff;
  font-weight:900;
}
.ar-profile-actions{
  justify-self:end;
}
@media(max-width:760px){
  .ar-profile-hero{
    grid-template-columns:1fr;
    text-align:center;
  }
  .ar-profile-hero img,
  .ar-profile-actions{
    justify-self:center;
  }
  .ar-profile-stats{
    justify-content:center;
  }
}


/* Community phase 1 comments */
.ar-comment-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto minmax(0,160px);
  gap:10px;
  padding:0 20px 18px;
  align-items:center;
}
.ar-comment-form textarea{
  min-height:70px;
  border-radius:14px;
  border:1px solid rgba(79,163,220,.22);
  background:#08111b;
  color:#fff;
  padding:12px 14px;
  resize:vertical;
}
.ar-comment-status{
  color:#9fb1c5;
  font-weight:900;
}
.ar-comments-list{
  display:grid;
  gap:12px;
  padding:0 20px 22px;
}
.ar-comment-card{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:12px;
  padding:14px;
  border-radius:18px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.18);
}
.ar-comment-card img{
  width:48px;
  height:48px;
  border-radius:999px;
  object-fit:cover;
}
.ar-comment-card b{
  color:#fff;
  display:block;
}
.ar-comment-card small{
  color:#9fb1c5;
  font-weight:900;
}
.ar-comment-card p{
  color:#dcecff;
  margin:8px 0 0;
}
.ar-comment-card.spoiler p{
  background:rgba(255,255,255,.08);
  color:transparent;
  text-shadow:0 0 8px rgba(255,255,255,.8);
  border-radius:10px;
  padding:8px;
}
.ar-comment-card.spoiler:hover p{
  color:#dcecff;
  text-shadow:none;
}
@media(max-width:760px){
  .ar-comment-form{
    grid-template-columns:1fr;
  }
}


/* Community phase 2 reactions + notifications */
.ar-comment-reactions{
  display:flex;
  gap:8px;
  margin-top:10px;
}
.ar-comment-reactions button{
  border:1px solid rgba(79,163,220,.22);
  background:rgba(79,163,220,.08);
  color:#dff5ff;
  border-radius:999px;
  padding:7px 10px;
  font-weight:900;
  cursor:pointer;
}
.ar-comment-reactions button:hover{
  border-color:var(--blue);
}
.ar-notification-list{
  display:grid;
  gap:10px;
  padding:0 20px 22px;
}
.ar-notification-card{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:14px;
  border-radius:16px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.18);
}
.ar-notification-card.unread{
  border-color:rgba(37,211,102,.34);
  background:rgba(37,211,102,.06);
}
.ar-notification-card b{
  color:#fff;
  display:block;
}
.ar-notification-card small,
.ar-notification-card em{
  color:#9fb1c5;
  font-weight:900;
  font-style:normal;
}


/* Recommendation phase 1 */
.ar-recommendation-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px;
  padding:0 20px 22px;
}
.ar-recommendation-grid.compact{
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
}
.ar-recommendation-card{
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  gap:12px;
  padding:12px;
  border-radius:18px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.18);
}
.ar-recommendation-card:hover{
  border-color:var(--blue);
  background:rgba(79,163,220,.10);
}
.ar-recommendation-card img{
  width:76px;
  height:108px;
  object-fit:cover;
  border-radius:12px;
  background:#111b27;
}
.ar-recommendation-card b{
  display:block;
  color:#fff;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ar-recommendation-card small,
.ar-recommendation-card em{
  display:block;
  color:#9fb1c5;
  font-weight:900;
  font-style:normal;
  margin-top:5px;
}
.ar-recommendation-card em{
  color:#dff5ff;
}


/* Recommendation phase 2 */
.ar-rec-feedback{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:9px;
}
.ar-rec-feedback button{
  border:1px solid rgba(79,163,220,.20);
  background:rgba(79,163,220,.08);
  color:#dff5ff;
  border-radius:999px;
  padding:6px 8px;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}
.ar-rec-feedback button:hover{
  border-color:var(--blue);
}


/* Admin platform phase 1 */
.ar-admin-tool-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:12px;
  padding:0 20px 22px;
}
.ar-admin-tool-grid a{
  padding:14px;
  border-radius:16px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.18);
  color:#dff5ff;
  font-weight:1000;
}
.ar-admin-tool-grid a:hover{
  border-color:var(--blue);
  background:rgba(79,163,220,.12);
}


/* Admin platform phase 2 */
.ar-message.error{
  background:rgba(255,90,90,.12);
  border:1px solid rgba(255,90,90,.28);
  color:#ffdcdc;
  padding:12px 14px;
  border-radius:14px;
}


/* Player system phase 1 */
.ar-direct-video-player{
  width:100%;
  max-height:72vh;
  display:block;
  background:#000;
  border-radius:18px;
}
.ar-player-watermark{
  position:absolute;
  right:18px;
  top:16px;
  z-index:12;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.45);
  color:rgba(255,255,255,.86);
  font-weight:1000;
  pointer-events:none;
  backdrop-filter:blur(8px);
}
#aniratioPlayer,
.ar-player,
.ar-player{
  position:relative;
}
.ar-advanced-player-status{
  margin:10px 20px 0;
  color:#9fb1c5;
  font-weight:900;
}
.ar-advanced-player-tools{
  margin:0 20px 14px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}


/* Player system phase 2 */
.ar-player-control-panel{
  margin:12px 20px 0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.ar-player-control-panel select,
.ar-player-control-panel button{
  min-height:40px;
  border-radius:12px;
  border:1px solid rgba(79,163,220,.22);
  background:#08111b;
  color:#dff5ff;
  padding:0 12px;
  font-weight:900;
}
.ar-player-control-panel button:hover{
  border-color:var(--blue);
}
.ar-player-diagnostics{
  margin:10px 20px 0;
  padding:12px 14px;
  border-radius:14px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.18);
  color:#9fb1c5;
  font-weight:900;
  white-space:pre-wrap;
}
@media(max-width:760px){
  .ar-player-control-panel{
    display:grid;
  }
}


/* Anime list + movies pagination fix */
.ar-pagination{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin:24px 20px 34px;
}
.ar-pagination a,
.ar-pagination span{
  min-width:42px;
  min-height:40px;
  padding:0 12px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(79,163,220,.22);
  background:#08111b;
  color:#dff5ff;
  font-weight:1000;
}
.ar-pagination a:hover,
.ar-pagination .active{
  border-color:var(--blue);
  background:rgba(79,163,220,.16);
  color:#fff;
}
.ar-pagination .disabled{
  opacity:.42;
  cursor:not-allowed;
}


/* Player system phase 3 */
.ar-cache-row small{
  color:#9fb1c5;
  font-weight:800;
}


/* Search system phase 1 */
.ar-advanced-search{
  display:grid;
  grid-template-columns:minmax(0,1fr) 140px 110px 140px auto;
  gap:10px;
  padding:0 20px 22px;
  position:relative;
}
.ar-advanced-search input,
.ar-advanced-search select{
  min-height:44px;
  border-radius:14px;
  border:1px solid rgba(79,163,220,.22);
  background:#08111b;
  color:#fff;
  padding:0 12px;
}
.ar-search-didyoumean,
.ar-trending-searches{
  margin:0 20px 20px;
  padding:14px;
  border-radius:16px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.18);
  color:#dcecff;
}
.ar-search-didyoumean a,
.ar-trending-searches a{
  color:#dff5ff;
  font-weight:1000;
  margin-left:8px;
}
.ar-intelligent-results{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:16px;
  padding:0 20px 22px;
}
.ar-intelligent-card{
  display:grid;
  grid-template-columns:78px minmax(0,1fr);
  gap:12px;
  padding:12px;
  border-radius:18px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.18);
}
.ar-intelligent-card:hover{
  border-color:var(--blue);
  background:rgba(79,163,220,.10);
}
.ar-intelligent-card img{
  width:78px;
  height:110px;
  border-radius:12px;
  object-fit:cover;
  background:#111b27;
}
.ar-intelligent-card b{
  display:block;
  color:#fff;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ar-intelligent-card small,
.ar-intelligent-card em{
  display:block;
  color:#9fb1c5;
  font-weight:900;
  font-style:normal;
  margin-top:6px;
}
.ar-smart-search-box{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  left:20px;
  right:20px;
  z-index:1000;
  background:rgba(5,10,17,.98);
  border:1px solid rgba(79,163,220,.28);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.52);
}
.ar-smart-search-box.show{
  display:block;
}
.ar-smart-result{
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.ar-smart-result img{
  width:46px;
  height:62px;
  object-fit:cover;
  border-radius:8px;
  background:#111b27;
}
.ar-smart-result b{
  color:#fff;
  display:block;
}
.ar-smart-result small,
.ar-smart-empty,
.ar-smart-all{
  color:#9fb1c5;
  font-weight:900;
}
.ar-smart-empty,
.ar-smart-all{
  display:block;
  padding:14px;
}
@media(max-width:760px){
  .ar-advanced-search{
    grid-template-columns:1fr;
  }
  .ar-smart-search-box{
    position:fixed;
    top:82px;
    left:12px;
    right:12px;
    max-height:70vh;
    overflow:auto;
  }
}


/* Discovery system phase 1 */
.ar-discovery-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:0 20px 22px;
}
.ar-discovery-tabs a{
  padding:10px 13px;
  border-radius:999px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.18);
  color:#dcecff;
  font-weight:1000;
}
.ar-discovery-tabs a.active,
.ar-discovery-tabs a:hover{
  border-color:var(--blue);
  background:rgba(79,163,220,.14);
}
.ar-discovery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px;
  padding:0 20px 22px;
}
.ar-discovery-row{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(220px,260px);
  gap:16px;
  overflow-x:auto;
  padding:0 20px 22px;
  scroll-snap-type:x proximity;
}
.ar-discovery-card{
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  gap:12px;
  padding:12px;
  border-radius:18px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.18);
  scroll-snap-align:start;
}
.ar-discovery-card:hover{
  border-color:var(--blue);
  background:rgba(79,163,220,.10);
}
.ar-discovery-card img{
  width:76px;
  height:108px;
  object-fit:cover;
  border-radius:12px;
  background:#111b27;
}
.ar-discovery-card b{
  color:#fff;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ar-discovery-card small{
  color:#9fb1c5;
  font-weight:900;
}
.ar-genre-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:12px;
  padding:0 20px 22px;
}
.ar-genre-grid a{
  padding:16px;
  border-radius:18px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.18);
}
.ar-genre-grid b{
  color:#fff;
  display:block;
}
.ar-genre-grid span{
  color:#9fb1c5;
  font-weight:900;
}


/* Discovery phase 2C public metadata pages */
.ar-metadata-hero{
  display:grid;
  grid-template-columns:110px minmax(0,1fr);
  gap:16px;
  padding:0 20px 22px;
  align-items:center;
}
.ar-metadata-hero img{
  width:110px;
  height:150px;
  object-fit:cover;
  border-radius:16px;
  background:#111b27;
}
.ar-metadata-hero h2{
  margin:0 0 8px;
  color:#fff;
}
.ar-metadata-hero p{
  color:#9fb1c5;
  font-weight:900;
}
.ar-metadata-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}
.ar-metadata-links a{
  padding:9px 12px;
  border-radius:999px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.18);
  color:#dff5ff;
  font-weight:1000;
}
.ar-watch-order-list{
  display:grid;
  gap:10px;
  padding:0 20px 22px;
}
.ar-watch-order-list a{
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:16px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.18);
  color:#fff;
}
.ar-watch-order-list b{
  color:#dff5ff;
  font-size:20px;
}
.ar-character-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:12px;
  padding:0 20px 22px;
}
.ar-character-card{
  padding:14px;
  border-radius:16px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.18);
}
.ar-character-card b{
  display:block;
  color:#fff;
}
.ar-character-card span{
  color:#9fb1c5;
  font-weight:900;
}
@media(max-width:640px){
  .ar-metadata-hero{
    grid-template-columns:1fr;
  }
}


/* Discovery phase 2D guarded metadata widget */
.ar-metadata-widget{
  margin-top:22px;
}
.ar-metadata-links.widget{
  padding:0 20px 22px;
  margin-top:0;
}


/* User ecosystem phase 1A continue watching */
.ar-continue-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:16px;
  padding:0 20px 22px;
}
.ar-continue-row{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(230px,280px);
  gap:16px;
  overflow-x:auto;
  padding:0 20px 22px;
}
.ar-continue-card{
  display:grid;
  grid-template-columns:78px minmax(0,1fr);
  gap:12px;
  padding:12px;
  border-radius:18px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.18);
}
.ar-continue-card:hover{
  border-color:var(--blue);
  background:rgba(79,163,220,.10);
}
.ar-continue-card img{
  width:78px;
  height:110px;
  border-radius:12px;
  object-fit:cover;
  background:#111b27;
}
.ar-continue-card b{
  display:block;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ar-continue-card small{
  display:block;
  color:#9fb1c5;
  font-weight:900;
  margin-top:6px;
}
.ar-continue-card em{
  display:block;
  margin-top:10px;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.ar-continue-card em i{
  display:block;
  height:100%;
  background:rgba(79,163,220,.85);
}


/* User ecosystem phase 1B favorites/watchlist */
.ar-user-actions-panel{
  margin-top:22px;
}
.ar-user-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  padding:0 20px 22px;
}
.ar-user-actions button{
  padding:12px 16px;
  border-radius:14px;
  border:1px solid rgba(79,163,220,.22);
  background:#08111b;
  color:#dff5ff;
  font-weight:1000;
  cursor:pointer;
}
.ar-user-actions button:hover{
  border-color:var(--blue);
  background:rgba(79,163,220,.10);
}
.ar-user-list-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:16px;
  padding:0 20px 22px;
}
.ar-user-list-card{
  display:grid;
  grid-template-columns:84px minmax(0,1fr);
  gap:12px;
  padding:12px;
  border-radius:18px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.18);
}
.ar-user-list-card img{
  width:84px;
  height:120px;
  border-radius:12px;
  object-fit:cover;
  background:#111b27;
}
.ar-user-list-card b{
  display:block;
  color:#fff;
}
.ar-user-list-card small{
  display:block;
  margin-top:6px;
  color:#9fb1c5;
  font-weight:900;
}
.ar-user-list-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.ar-user-list-actions a,
.ar-user-list-actions button{
  padding:8px 12px;
  border-radius:12px;
  border:1px solid rgba(79,163,220,.18);
  background:#0b1622;
  color:#dff5ff;
  font-weight:1000;
  cursor:pointer;
}
.ar-account-links{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  padding:0 20px 22px;
}
.ar-account-links a{
  padding:12px 16px;
  border-radius:14px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.18);
  color:#dff5ff;
  font-weight:1000;
}


/* UI/list fix: prevent continue watching from floating above app layout */
body > .ar-panel:first-child.ar-continue-home-panel,
body > section.ar-panel:first-child{
  margin-left:auto;
  margin-right:auto;
}
.ar-continue-home-panel{
  clear:both;
}
.ar-list-tools{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  padding:0 20px 22px;
  color:#9fb1c5;
  font-weight:900;
}
.ar-list-tools a,
.ar-list-tools span{
  padding:9px 12px;
  border-radius:999px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.18);
  color:#dff5ff;
}
.ar-catalog-grid{
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
}
.ar-catalog-card{
  min-height:132px;
}


/* User ecosystem phase 1C library dashboard */
.ar-library-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:0 20px 22px;
}
.ar-library-tabs button{
  padding:12px 16px;
  border-radius:14px;
  border:1px solid rgba(79,163,220,.18);
  background:#08111b;
  color:#dff5ff;
  font-weight:1000;
  cursor:pointer;
}
.ar-library-tabs button.active{
  background:rgba(79,163,220,.18);
  border-color:var(--blue);
}
.ar-library-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:0 20px 22px;
}
.ar-library-actions button{
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(255,90,90,.18);
  background:#180b10;
  color:#ffd6d6;
  font-weight:1000;
  cursor:pointer;
}
.ar-library-section{
  display:none;
}
.ar-library-section.active{
  display:block;
}
.ar-library-empty{
  margin:0 20px 22px;
  padding:24px;
  border-radius:18px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.18);
  text-align:center;
}
.ar-library-empty b{
  display:block;
  color:#fff;
  font-size:20px;
}
.ar-library-empty p{
  color:#9fb1c5;
  margin:10px 0 18px;
}
.ar-library-empty a{
  display:inline-flex;
  padding:12px 16px;
  border-radius:14px;
  background:rgba(79,163,220,.16);
  border:1px solid rgba(79,163,220,.28);
  color:#dff5ff;
  font-weight:1000;
}
.ar-library-shortcuts{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  padding:0 20px 22px;
}
.ar-library-shortcuts a{
  padding:12px 16px;
  border-radius:14px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.18);
  color:#dff5ff;
  font-weight:1000;
}


/* Catalog core stabilization */
.ar-list-tools{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  padding:0 20px 22px;
  color:#9fb1c5;
  font-weight:900;
}
.ar-list-tools a,
.ar-list-tools span{
  padding:9px 12px;
  border-radius:999px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.18);
  color:#dff5ff;
}
.ar-catalog-grid{
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
}
.ar-catalog-card{
  min-height:132px;
}


/* Resolver stabilization phase 1 */
.ar-admin-card pre{
  padding:14px;
  border-radius:14px;
  background:#050a11;
  border:1px solid rgba(79,163,220,.18);
  color:#dff5ff;
  font-weight:800;
}


/* Resolver stabilization phase 2 */
.ar-cache-row small{
  color:#9fb1c5;
  font-weight:800;
}


/* Resolver stabilization phase 5 failover UI */
.ar-failover-panel{
  margin-top:22px;
}
.ar-failover-status{
  margin:0 20px 18px;
  padding:14px 16px;
  border-radius:16px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.18);
  color:#dff5ff;
  font-weight:900;
}
.ar-failover-status[data-state="success"]{
  border-color:rgba(84,255,167,.35);
  color:#c9ffe4;
}
.ar-failover-status[data-state="error"]{
  border-color:rgba(255,90,90,.35);
  color:#ffd6d6;
}
.ar-failover-status[data-state="warning"]{
  border-color:rgba(255,203,107,.35);
  color:#ffe8b0;
}
.ar-failover-debug{
  margin:0 20px 18px;
  padding:14px;
  border-radius:16px;
  background:#050a11;
  border:1px solid rgba(79,163,220,.18);
  color:#dff5ff;
  overflow:auto;
}
.ar-failover-debug pre{
  white-space:pre-wrap;
  margin:0;
}
.ar-admin-debug-toggle{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:0 20px 22px;
}
.ar-admin-debug-toggle button,
.ar-admin-debug-toggle a{
  padding:10px 13px;
  border-radius:12px;
  border:1px solid rgba(79,163,220,.22);
  background:#08111b;
  color:#dff5ff;
  font-weight:1000;
  cursor:pointer;
}
.ar-try-next-source{
  border:0;
  cursor:pointer;
}


/* Release Track Phase 1: ANN news */
.ar-news-list{
  display:grid;
  gap:14px;
  padding:0 20px 22px;
}
.ar-news-card{
  padding:16px;
  border-radius:18px;
  background:#08111b;
  border:1px solid rgba(79,163,220,.16);
}
.ar-news-card h2{
  margin:0 0 8px;
  font-size:20px;
}
.ar-news-card h2 a{
  color:#fff;
}
.ar-news-card small{
  color:#9fb1c5;
  font-weight:900;
}
.ar-news-card p{
  color:#c7d4e2;
  line-height:1.55;
}


/* AniRatio additional logo colors */
.ar-logo-picker button[data-logo-color="orange"]{background:#ff8a00 !important}
.ar-logo-picker button[data-logo-color="cyan"]{background:#00d4ff !important}
.ar-logo-picker button[data-logo-color="gold"]{background:#f5c542 !important}
.ar-logo-picker button[data-logo-color="rosepink"]{background:#ff8fb1 !important}
.ar-logo-picker button[data-logo-color="black"]{
  background:#050505 !important;
  border-color:#555 !important;
}

html[data-logo-color="orange"] #siteLogo,
html[data-logo-color="orange"] .ar-footer-logo{
  filter:hue-rotate(150deg) saturate(2.1) brightness(1.15);
}

html[data-logo-color="cyan"] #siteLogo,
html[data-logo-color="cyan"] .ar-footer-logo{
  filter:hue-rotate(35deg) saturate(2.3) brightness(1.25);
}

html[data-logo-color="gold"] #siteLogo,
html[data-logo-color="gold"] .ar-footer-logo{
  filter:hue-rotate(170deg) saturate(1.9) brightness(1.35);
}

html[data-logo-color="rosepink"] #siteLogo,
html[data-logo-color="rosepink"] .ar-footer-logo{
  filter:hue-rotate(310deg) saturate(1.9) brightness(1.2);
}

html[data-logo-color="black"] #siteLogo,
html[data-logo-color="black"] .ar-footer-logo{
  filter:grayscale(1) brightness(.18) contrast(2.2);
}


/* =========================================
   AniRatio Premium Logo Swatches
========================================= */

.ar-logo-picker{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  margin:10px 12px 18px;
  border-radius:22px;
  background:rgba(7,15,28,.92);
  border:1px solid rgba(79,163,220,.18);
  backdrop-filter:blur(10px);
  flex-wrap:wrap;
}

.ar-logo-picker button{
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  border-radius:50% !important;
  border:2px solid rgba(255,255,255,.08) !important;
  padding:0 !important;
  cursor:pointer;
  transition:.18s ease;
  position:relative;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.45),
    inset 0 0 10px rgba(255,255,255,.08);
}

.ar-logo-picker button:hover{
  transform:scale(1.12);
  border-color:rgba(255,255,255,.28) !important;
}

.ar-logo-picker button.active{
  transform:scale(1.16);
  border-color:#7fd1ff !important;
  box-shadow:
    0 0 0 2px rgba(79,163,220,.25),
    0 0 14px rgba(79,163,220,.45);
}

/* Original colors */
.ar-logo-picker button[data-logo-color="blue"]{
  background:linear-gradient(135deg,#61bfff,#8ad7ff) !important;
}

.ar-logo-picker button[data-logo-color="purple"]{
  background:linear-gradient(135deg,#6c3cff,#8d66ff) !important;
}

.ar-logo-picker button[data-logo-color="red"]{
  background:linear-gradient(135deg,#d91b52,#ff4d73) !important;
}

.ar-logo-picker button[data-logo-color="green"]{
  background:linear-gradient(135deg,#57d400,#8cff3d) !important;
}

.ar-logo-picker button[data-logo-color="pink"]{
  background:linear-gradient(135deg,#ff5ca8,#ff93c5) !important;
}

/* Added colors */
.ar-logo-picker button[data-logo-color="orange"]{
  background:linear-gradient(135deg,#ff8a00,#ffb347) !important;
}

.ar-logo-picker button[data-logo-color="cyan"]{
  background:linear-gradient(135deg,#00cfff,#69e7ff) !important;
}

.ar-logo-picker button[data-logo-color="gold"]{
  background:linear-gradient(135deg,#e0ab10,#ffd95e) !important;
}

.ar-logo-picker button[data-logo-color="rosepink"]{
  background:linear-gradient(135deg,#ff8fb1,#ffc1d5) !important;
}

.ar-logo-picker button[data-logo-color="black"]{
  background:linear-gradient(135deg,#050505,#3d3d3d) !important;
}


/* AniRatio theme color sync + refined swatches */
:root{
  --accent: var(--blue);
  --accent-2:#72c8ff;
  --accent-soft:rgba(79,163,220,.18);
  --accent-glow:rgba(79,163,220,.42);
}

/* Accent-aware UI */
.ar-menu a.active,
.ar-tab.active,
.ar-view:hover,
.ar-pill-btn.primary,
.ar-btn,
button.ar-tab.active{
  border-color:var(--accent) !important;
  background:linear-gradient(180deg,var(--accent),color-mix(in srgb, var(--accent) 72%, #000)) !important;
  color:#fff !important;
  box-shadow:0 10px 25px var(--accent-soft) !important;
}

.ar-title:before,
.ar-head .ar-title:before{
  background:var(--accent) !important;
  box-shadow:0 0 16px var(--accent-glow) !important;
}

.ar-panel,
.ar-card,
.ar-list-item,
.ar-sidebar,
.ar-topbar,
.ar-footer{
  border-color:color-mix(in srgb, var(--accent) 36%, rgba(35,55,78,.65)) !important;
}

.ar-score,
.ar-num,
.ar-badge,
.ar-status-good,
.ar-status-warn{
  border-color:var(--accent) !important;
  background:var(--accent-soft) !important;
}

.ar-logo-picker{
  display:flex;
  align-items:center;
  gap:7px;
  padding:9px 10px;
  margin:8px 12px 16px;
  border-radius:16px;
  background:rgba(5,12,22,.72);
  border:1px solid rgba(79,163,220,.16);
  backdrop-filter:blur(10px);
  flex-wrap:wrap;
}

.ar-logo-picker button{
  width:34px !important;
  height:18px !important;
  min-width:34px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  padding:0 !important;
  cursor:pointer;
  opacity:.82;
  transition:transform .16s ease, opacity .16s ease, box-shadow .16s ease, border-color .16s ease;
  box-shadow:inset 0 0 8px rgba(255,255,255,.08);
}

.ar-logo-picker button:hover{
  opacity:1;
  transform:translateY(-1px);
}

.ar-logo-picker button.active{
  opacity:1;
  transform:translateY(-1px) scale(1.06);
  border-color:var(--accent-2) !important;
  box-shadow:
    0 0 0 2px var(--accent-soft),
    0 0 12px var(--accent-glow),
    inset 0 0 9px rgba(255,255,255,.14);
}

.ar-logo-picker button[data-logo-color="blue"]{background:linear-gradient(135deg,#4fa3dc,#8ad7ff) !important}
.ar-logo-picker button[data-logo-color="purple"]{background:linear-gradient(135deg,#4623c8,#9b7cff) !important}
.ar-logo-picker button[data-logo-color="red"]{background:linear-gradient(135deg,#c41739,#ff5d7a) !important}
.ar-logo-picker button[data-logo-color="green"]{background:linear-gradient(135deg,#63e600,#a7ff4a) !important}
.ar-logo-picker button[data-logo-color="pink"]{background:linear-gradient(135deg,#f1787e,#ffb0b4) !important}
.ar-logo-picker button[data-logo-color="orange"]{background:linear-gradient(135deg,#ff8a00,#ffc46b) !important}
.ar-logo-picker button[data-logo-color="cyan"]{background:linear-gradient(135deg,#00d4ff,#8af2ff) !important}
.ar-logo-picker button[data-logo-color="gold"]{background:linear-gradient(135deg,#d6a615,#ffe17a) !important}
.ar-logo-picker button[data-logo-color="rosepink"]{background:linear-gradient(135deg,#ff8fb1,#ffc8d9) !important}
.ar-logo-picker button[data-logo-color="black"]{background:linear-gradient(135deg,#111,#575f6b) !important}

/* Logo filters for colors without native logo files */
html[data-logo-color="orange"] #siteLogo,
html[data-logo-color="orange"] .ar-footer-logo{filter:hue-rotate(150deg) saturate(2.1) brightness(1.15)}

html[data-logo-color="cyan"] #siteLogo,
html[data-logo-color="cyan"] .ar-footer-logo{filter:hue-rotate(35deg) saturate(2.3) brightness(1.25)}

html[data-logo-color="gold"] #siteLogo,
html[data-logo-color="gold"] .ar-footer-logo{filter:hue-rotate(170deg) saturate(1.9) brightness(1.35)}

html[data-logo-color="rosepink"] #siteLogo,
html[data-logo-color="rosepink"] .ar-footer-logo{filter:hue-rotate(310deg) saturate(1.9) brightness(1.2)}

html[data-logo-color="black"] #siteLogo,
html[data-logo-color="black"] .ar-footer-logo{filter:grayscale(1) brightness(.35) contrast(1.7)}

html[data-logo-color="blue"] #siteLogo,
html[data-logo-color="purple"] #siteLogo,
html[data-logo-color="red"] #siteLogo,
html[data-logo-color="green"] #siteLogo,
html[data-logo-color="pink"] #siteLogo,
html[data-logo-color="blue"] .ar-footer-logo,
html[data-logo-color="purple"] .ar-footer-logo,
html[data-logo-color="red"] .ar-footer-logo,
html[data-logo-color="green"] .ar-footer-logo,
html[data-logo-color="pink"] .ar-footer-logo{
  filter:none;
}


/* =========================================
   AniRatio Compact Theme Rail
========================================= */

.ar-logo-picker{
  display:grid !important;
  grid-template-columns:repeat(5,1fr) !important;
  gap:8px !important;

  width:calc(100% - 24px) !important;
  margin:8px 12px 14px !important;
  padding:10px !important;

  border-radius:18px !important;

  background:
    linear-gradient(
      180deg,
      rgba(10,18,30,.88),
      rgba(6,12,22,.92)
    ) !important;

  border:1px solid rgba(79,163,220,.14) !important;

  backdrop-filter:blur(10px);
}

.ar-logo-picker button{
  width:100% !important;
  height:14px !important;

  min-width:unset !important;

  border-radius:999px !important;

  border:1px solid rgba(255,255,255,.08) !important;

  opacity:.88;

  transition:
    transform .15s ease,
    opacity .15s ease,
    box-shadow .15s ease,
    border-color .15s ease;
}

.ar-logo-picker button:hover{
  opacity:1;
  transform:scale(1.04);
}

.ar-logo-picker button.active{
  transform:scale(1.05);
  border-color:rgba(255,255,255,.24) !important;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.05),
    0 0 14px var(--accent-glow);
}

/* tighter sidebar spacing */
.ar-logo{
  margin-bottom:8px !important;
}


/* AniRatio sidebar theme settings cleanup */
.ar-theme-settings{
  margin:16px 10px 8px;
  padding:10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.035);
}

.ar-theme-settings summary{
  cursor:pointer;
  font-size:12px;
  font-weight:700;
  color:rgba(255,255,255,.72);
  letter-spacing:.04em;
  text-transform:uppercase;
  list-style:none;
}

.ar-theme-settings summary::-webkit-details-marker{
  display:none;
}

.ar-theme-settings .ar-logo-picker{
  margin-top:10px;
}

/* AniRatio sidebar theme settings cleanup */
.ar-theme-settings{
  margin:16px 10px 8px;
  padding:10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.035);
}

.ar-theme-settings summary{
  cursor:pointer;
  font-size:12px;
  font-weight:700;
  color:rgba(255,255,255,.72);
  letter-spacing:.04em;
  text-transform:uppercase;
  list-style:none;
}

.ar-theme-settings summary::-webkit-details-marker{
  display:none;
}

.ar-theme-settings .ar-logo-picker{
  margin-top:10px;
}

/* =========================
   AniRatio Utility System
========================= */

.ar-mt-sm{
  margin-top:12px;
}

.ar-mt-md{
  margin-top:18px;
}

.ar-mt-lg{
  margin-top:22px;
}

.ar-mt-xl{
  margin-top:28px;
}

.ar-panel-pad{
  margin:0 20px 22px;
}

.ar-panel-pad-sm{
  margin:0 18px 18px;
}

.ar-flex{
  display:flex;
}

.ar-flex-between{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.ar-grid{
  display:grid;
  gap:18px;
}

.ar-grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.ar-grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.ar-inline-grid{
  display:grid;
  gap:10px;
}

.ar-hidden{
  display:none;
}

@media (max-width: 900px){

  .ar-grid-2,
  .ar-grid-3{
    grid-template-columns:1fr;
  }

}

/* =========================
   AniRatio Utility Cleanup Layer
========================= */

.ar-mt-sm{margin-top:12px}
.ar-mt-md{margin-top:18px}
.ar-mt-lg{margin-top:22px}
.ar-mt-xl{margin-top:24px}

.ar-panel-pad{margin:0 20px 22px}
.ar-panel-pad-lg{margin:0 20px 24px}
.ar-post-pad{margin:20px}

.ar-pad-box{padding:18px}
.ar-form-pad{padding:0 20px 22px}
.ar-form-pad-sm{padding:0 20px 18px}

.ar-grid-gap{display:grid;gap:12px}
.ar-grid-gap-lg{display:grid;gap:18px}

.ar-flex-center{display:flex;align-items:center}
.ar-flex-between{display:flex;align-items:center;justify-content:space-between}

.ar-date-muted{margin-top:8px;color:#7f93aa;font-size:12px}
.ar-episode-grid-compact{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:10px;padding:0 20px 22px}
.ar-episode-link{text-align:center;border-radius:12px}
.ar-faded{opacity:.55}

/* =========================
   AniRatio Phase 2 Utilities
========================= */

.ar-msg-space{margin:0 20px 20px}
.ar-form-stack{display:grid;gap:10px}
.ar-form-inline{display:flex;gap:8px;align-items:center}
.ar-pretty-json{white-space:pre-wrap}
.ar-admin-previewer{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  border-radius:16px;
  overflow:hidden;
}

.ar-admin-previewer iframe{
  width:100%;
  height:100%;
  border:0;
}

.ar-admin-grid-single{
  padding:12px 0 0;
  grid-template-columns:1fr;
}

.ar-stat-lg{
  font-size:18px;
}

.ar-inline-form{
  display:inline;
}

.ar-align-end{
  align-self:end;
}


/* =========================
   AniRatio Phase 3 Utilities
========================= */

.ar-grid-pad{
  padding:0 18px 18px;
  display:grid;
  gap:12px;
}

.ar-form-pad-sm{
  padding:0 20px 18px;
}

.ar-post-margin{
  margin:20px;
}

.ar-inline-zero{
  margin:0;
}

.ar-video-shell{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  border-radius:16px;
  overflow:hidden;
}

.ar-video-shell iframe{
  width:100%;
  height:100%;
  border:0;
}

.ar-date-note{
  margin-top:8px;
  color:#7f93aa;
  font-size:12px;
}

.ar-episode-grid-clean{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
  gap:10px;
  padding:0 20px 22px;
}

.ar-episode-btn{
  text-align:center;
  border-radius:12px;
}

.ar-dimmed{
  opacity:.55;
}


/* AniRatio Phase 4 Cleanup */
.ar-form-pad-md{padding:0 20px 20px}
.ar-form-pad-lg{padding:0 20px 22px}
.ar-admin-links-single{padding:12px 0 0;grid-template-columns:1fr}
.ar-small-top{margin-top:12px}

/* AniRatio watch page cleanup */
.ar-episode-map-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
  gap:10px;
  padding:0 20px 22px;
}

.ar-episode-map-btn{
  text-align:center;
  border-radius:12px;
}

/* AniRatio non-link status labels */
.ar-view-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:rgba(255,255,255,.72);
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  pointer-events:none;
}

.ar-muted-link{
  opacity:.68;
  pointer-events:none;
}

/* AniRatio non-link status labels */
.ar-view-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:rgba(255,255,255,.72);
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  pointer-events:none;
}

.ar-muted-link{
  opacity:.68;
  pointer-events:none;
}

/* AniRatio watch page collapsible utility panels */
.ar-collapsible{
  overflow:hidden;
}

.ar-collapsible > summary.ar-head{
  cursor:pointer;
  list-style:none;
  user-select:none;
}

.ar-collapsible > summary.ar-head::-webkit-details-marker{
  display:none;
}

.ar-collapsible > summary.ar-head::after{
  content:"⌄";
  margin-left:auto;
  color:rgba(255,255,255,.55);
  font-size:18px;
  transition:transform .18s ease;
}

.ar-collapsible[open] > summary.ar-head::after{
  transform:rotate(180deg);
}

.ar-collapsible:not([open]){
  padding-bottom:0;
}

.ar-collapsible:not([open]) > *:not(summary){
  display:none;
}

/* AniRatio community/news visual polish */
.ar-community-hero-img{
  position:relative;
  overflow:hidden;
}

.ar-community-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
  padding:0 20px 20px;
}

.ar-community-card,
.ar-news-card-img{
  display:grid;
  grid-template-columns:72px 1fr;
  gap:14px;
  align-items:center;
}

.ar-community-card img,
.ar-news-card-img img{
  width:72px;
  height:72px;
  object-fit:cover;
  border-radius:16px;
  background:rgba(255,255,255,.06);
}

.ar-news-date{
  margin-top:8px;
  color:#7f93aa;
  font-size:12px;
}

@media(max-width:640px){
  .ar-community-card,
  .ar-news-card-img{
    grid-template-columns:56px 1fr;
  }

  .ar-community-card img,
  .ar-news-card-img img{
    width:56px;
    height:56px;
    border-radius:14px;
  }
}

/* AniRatio movie page polish */
.ar-movie-page .ar-list-tools{
  margin:0 20px 18px;
}

.ar-movie-page .ar-catalog-grid{
  padding:0 20px 22px;
}

.ar-movie-page .ar-post.ar-panel-pad{
  margin:0 20px 22px;
}

/* =========================================
   AniRatio Cinematic Hero Upgrade
========================================= */

.ar-hero{
  position:relative;
  overflow:hidden;
  min-height:540px;
  border-radius:28px;
  isolation:isolate;
}

.ar-hero-bg{
  transform:scale(1.02);
  animation:arHeroZoom 18s ease-in-out infinite alternate;
  filter:saturate(1.05) brightness(.72);
}

@keyframes arHeroZoom{
  from{
    transform:scale(1.02);
  }
  to{
    transform:scale(1.08);
  }
}

.ar-hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(
      90deg,
      rgba(2,6,14,.92) 0%,
      rgba(2,6,14,.82) 28%,
      rgba(2,6,14,.38) 58%,
      rgba(2,6,14,.76) 100%
    ),
    linear-gradient(
      to top,
      rgba(0,0,0,.72) 0%,
      transparent 45%
    );
  pointer-events:none;
}

.ar-hero-poster-wrap{
  position:absolute;
  right:70px;
  bottom:38px;
  z-index:3;
  width:230px;
  pointer-events:none;
}

.ar-hero-poster{
  width:100%;
  aspect-ratio:2/3;
  object-fit:cover;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 30px 60px rgba(0,0,0,.65),
    0 0 40px rgba(102,76,255,.24);
}

.ar-hero-content{
  position:relative;
  z-index:4;
  max-width:760px;
  padding:72px 60px;
}

.ar-hero h1{
  font-size:72px;
  line-height:.96;
  letter-spacing:-2px;
  max-width:760px;
  margin-bottom:22px;
}

.ar-hero p{
  max-width:680px;
  font-size:15px;
  line-height:1.8;
  color:#d5deea;
}

.ar-meta{
  margin-bottom:20px;
}

.ar-meta span{
  backdrop-filter:blur(12px);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}

.ar-actions{
  margin-top:30px;
}

.ar-actions .ar-btn{
  min-height:50px;
  padding:0 26px;
  border-radius:16px;
  font-weight:700;
  font-size:15px;
}

.ar-dots{
  gap:10px;
}

.ar-dots span{
  width:42px;
  height:5px;
  border-radius:999px;
  background:rgba(255,255,255,.22);
  transition:all .28s ease;
}

.ar-dots span.active{
  width:72px;
  background:linear-gradient(90deg,#7c5cff,#9f7bff);
  box-shadow:0 0 18px rgba(124,92,255,.55);
}

.ar-hero-arrow{
  width:52px;
  height:52px;
  border-radius:16px;
  backdrop-filter:blur(10px);
  background:rgba(255,255,255,.08);
}

.ar-hero-arrow:hover{
  transform:translateY(-2px) scale(1.04);
}

@media(max-width:1200px){

  .ar-hero h1{
    font-size:58px;
  }

  .ar-hero-poster-wrap{
    width:180px;
    right:30px;
  }
}

@media(max-width:900px){

  .ar-hero{
    min-height:620px;
  }

  .ar-hero-content{
    padding:42px 28px 80px;
  }

  .ar-hero h1{
    font-size:42px;
  }

  .ar-hero-poster-wrap{
    position:relative;
    right:auto;
    bottom:auto;
    width:160px;
    margin:26px 0 0 28px;
  }
}


  line-height:1.65 !important;
}

.ar-hero-poster-wrap{
  width:170px !important;
  right:52px !important;
  bottom:34px !important;
}

.ar-actions{
  margin-top:22px !important;
}

@media(max-width:900px){
  .ar-hero{
    min-height:500px !important;
  }

  .ar-hero h1{
    font-size:38px !important;
  }

  .ar-hero-content{
    padding:36px 24px 64px !important;
  }

  .ar-hero-poster-wrap{
    display:none !important;
  }
}

  line-height:1.65 !important;
}

.ar-hero-poster-wrap{
  width:170px !important;
  right:52px !important;
  bottom:34px !important;
}

.ar-actions{
  margin-top:22px !important;
}

@media(max-width:900px){
  .ar-hero{
    min-height:500px !important;
  }

  .ar-hero h1{
    font-size:38px !important;
  }

  .ar-hero-content{
    padding:36px 24px 64px !important;
  }

  .ar-hero-poster-wrap{
    display:none !important;
  }
}


/* AniRatio hero height tuning */
.ar-hero{
  min-height:440px !important;
}

.ar-hero-content{
  padding:54px 48px !important;
}

.ar-hero h1{
  font-size:52px !important;
  line-height:1.02 !important;
  max-width:640px !important;
}

.ar-hero p{
  max-width:570px !important;
  font-size:14px !important;
  line-height:1.65 !important;
}

.ar-hero-poster-wrap{
  width:170px !important;
  right:52px !important;
  bottom:34px !important;
}

.ar-actions{
  margin-top:22px !important;
}

@media(max-width:900px){

  .ar-hero{
    min-height:500px !important;
  }

  .ar-hero h1{
    font-size:38px !important;
  }

  .ar-hero-content{
    padding:36px 24px 64px !important;
  }

  .ar-hero-poster-wrap{
    display:none !important;
  }
}


/* ===== AniRatio sidebar ranking refinement ===== */

.ar-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ar-list-item{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  min-height:74px;
  padding:10px 12px !important;
  border-radius:16px;
  background:rgba(8,14,24,.72);
  border:1px solid rgba(120,140,255,.12);
  transition:.18s ease;
}

.ar-list-item:hover{
  transform:translateY(-1px);
  border-color:rgba(140,110,255,.34);
  background:rgba(12,18,30,.94);
}

.ar-thumb{
  width:52px !important;
  height:68px !important;
  border-radius:12px;
  object-fit:cover;
  flex-shrink:0;
}

.ar-list-info{
  min-width:0;
  flex:1;
}

.ar-list-info h4{
  margin:0 0 6px 0 !important;
  font-size:13px !important;
  line-height:1.3 !important;
  font-weight:700;
  color:#fff;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.ar-list-info p{
  margin:0 !important;
  font-size:11px !important;
  color:#8ea6c9 !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ar-num{
  width:24px;
  height:24px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(130,90,255,.18);
  border:1px solid rgba(130,90,255,.32);
  font-size:11px;
  font-weight:700;
  flex-shrink:0;
}

.ar-score{
  flex-shrink:0;
  min-width:44px;
  text-align:center;
  padding:6px 8px !important;
  border-radius:999px;
  font-size:11px !important;
  font-weight:700;
  color:#fff;
  background:linear-gradient(135deg,#6f4cff,#8f6bff);
  box-shadow:0 0 18px rgba(120,90,255,.18);
}

.ar-favorite-tabs{
  margin-bottom:12px;
}

.ar-favorite-tabs .ar-tab{
  min-width:62px;
}





/* AniRatio hero poster consistency fix */
.ar-hero-poster-wrap{
  width:176px !important;
  height:264px !important;
  right:64px !important;
  bottom:42px !important;
  border-radius:24px !important;
  overflow:hidden !important;
  background:#07111f !important;
}

.ar-hero-poster{
  width:100% !important;
  height:100% !important;
  aspect-ratio:auto !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
}

.ar-hero-poster-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:24px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  pointer-events:none;
}

.ar-hero-arrows{
  right:24px !important;
}

.ar-dots{
  right:58px !important;
  bottom:24px !important;
}

@media(max-width:1100px){
  .ar-hero-poster-wrap{
    width:150px !important;
    height:225px !important;
    right:36px !important;
  }
}

@media(max-width:900px){
  .ar-hero-poster-wrap{
    display:none !important;
  }
}


/* AniRatio overlay click-through fix */
.ar-hero-overlay,
.ar-hero::before,
.ar-hero::after,
.ar-hero-bg,
.ar-hero-glow,
.ar-hero-effects{
  pointer-events:none !important;
}

.ar-sidebar a,
.ar-menu a,
.ar-view,
button,
.ar-btn{
  pointer-events:auto !important;
}


/* AniRatio main page nav/sidebar interaction safety */
.ar-sidebar{
  position:relative !important;
  z-index:500 !important;
}

.ar-sidebar,
.ar-sidebar *,
.ar-menu,
.ar-menu *,
.ar-topbar,
.ar-topbar *,
.ar-nav,
.ar-nav *{
  pointer-events:auto !important;
}

.ar-hero-overlay,
.ar-hero::before,
.ar-hero::after,
.ar-hero-bg,
.ar-hero-glow,
.ar-hero-effects{
  pointer-events:none !important;
}


/* ===== AniRatio final homepage layout repair ===== */

/* Left navigation/sidebar repair */
.ar-app{
  display:grid !important;
  grid-template-columns:260px minmax(0,1fr) !important;
  align-items:start !important;
}

.ar-sidebar{
  width:260px !important;
  min-width:260px !important;
  max-width:260px !important;
  position:sticky !important;
  top:0 !important;
  align-self:start !important;
  height:100vh !important;
  overflow-y:auto !important;
  z-index:500 !important;
  opacity:1 !important;
  filter:none !important;
}

.ar-sidebar .ar-logo,
.ar-sidebar .ar-menu-title,
.ar-sidebar .ar-menu,
.ar-sidebar .ar-genre-grid{
  width:100% !important;
}

.ar-menu a{
  display:flex !important;
  align-items:center !important;
  min-height:38px !important;
  opacity:1 !important;
  filter:none !important;
  pointer-events:auto !important;
}

/* Main content must not cover sidebars */
.ar-main,
.ar-content{
  min-width:0 !important;
  position:relative !important;
  z-index:1 !important;
}

/* Right ranking cards clickable */
.ar-list-item{
  text-decoration:none !important;
  cursor:pointer !important;
  pointer-events:auto !important;
}

.ar-list-item *{
  pointer-events:none !important;
}

/* Hero layers must never block clicks */
.ar-hero::before,
.ar-hero::after,
.ar-hero-overlay,
.ar-hero-bg{
  pointer-events:none !important;
}

/* Strict hero poster frame */
.ar-hero-poster-wrap{
  width:176px !important;
  min-width:176px !important;
  max-width:176px !important;
  height:264px !important;
  min-height:264px !important;
  max-height:264px !important;
  aspect-ratio:2/3 !important;
  overflow:hidden !important;
  border-radius:24px !important;
  right:64px !important;
  bottom:42px !important;
}

.ar-hero-poster-wrap img,
.ar-hero-poster{
  width:176px !important;
  height:264px !important;
  min-width:176px !important;
  min-height:264px !important;
  max-width:176px !important;
  max-height:264px !important;
  aspect-ratio:2/3 !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
}

@media(max-width:1100px){
  .ar-app{
    grid-template-columns:1fr !important;
  }

  .ar-sidebar{
    position:fixed !important;
    left:0 !important;
    top:0 !important;
    transform:translateX(-110%) !important;
  }

  body.aniratio-mobile-nav-open .ar-sidebar{
    transform:translateX(0) !important;
  }

  .ar-hero-poster-wrap{
    display:none !important;
  }
}

/* AniRatio watch tabs - scoped */
.ar-watch-tabs-panel{
  overflow:hidden;
}

.ar-watch-tabs-nav{
  display:flex;
  gap:10px;
  padding:16px 18px 8px;
  flex-wrap:wrap;
}

.ar-watch-tab-btn{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:#dce8ff;
  border-radius:999px;
  padding:10px 16px;
  font-weight:800;
  cursor:pointer;
}

.ar-watch-tab-btn.active,
.ar-watch-tab-btn:hover{
  background:linear-gradient(135deg,#6f4cff,#8f6bff);
  color:#fff;
}

.ar-watch-tabs-body{
  padding:0 18px 18px;
}

.ar-watch-tabs-body .ar-collapsible{
  margin:0 !important;
}

.ar-watch-tabs-body summary{
  display:none !important;
}

/* AniRatio watch tabs theme-generator compatible */
.ar-watch-tabs-panel{
  border-radius:22px !important;
  overflow:hidden !important;
}

.ar-watch-tabs-nav{
  display:flex !important;
  gap:10px !important;
  padding:16px 18px 10px !important;
  flex-wrap:wrap !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
}

.ar-watch-tab-btn{
  border:1px solid rgba(255,255,255,.10) !important;
  background:rgba(255,255,255,.055) !important;
  color:var(--text,#dce8ff) !important;
  border-radius:999px !important;
  padding:10px 16px !important;
  font-weight:800 !important;
  cursor:pointer !important;
  transition:.18s ease !important;
}

.ar-watch-tab-btn.active,
.ar-watch-tab-btn:hover{
  background:linear-gradient(135deg,var(--blue,#4f8cff),var(--purple,var(--blue,#4f8cff))) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.18) !important;
  box-shadow:0 10px 26px color-mix(in srgb,var(--blue,#4f8cff) 34%,transparent) !important;
  transform:translateY(-1px) !important;
}

.ar-watch-tabs-body{
  padding:16px 18px 18px !important;
}

.ar-watch-tabs-body .ar-watch-tab-content{
  border:0 !important;
  box-shadow:none !important;
  margin:0 !important;
}

.ar-watch-tabs-body .ar-watch-tab-content > summary{
  display:none !important;
}

.ar-watch-tabs-body textarea,
.ar-watch-tabs-body input,
.ar-watch-tabs-body select{
  max-width:100% !important;
}

@supports not (color: color-mix(in srgb, red 10%, transparent)){
  .ar-watch-tab-btn.active,
  .ar-watch-tab-btn:hover{
    box-shadow:0 10px 26px rgba(80,140,255,.26) !important;
  }
}

/* AniRatio provider quality badges */
.ar-provider-quality{
  display:inline-flex;
  align-items:center;
  margin-left:8px;
  padding:3px 7px;
  border-radius:999px;
  font-size:9px;
  font-style:normal;
  font-weight:900;
  letter-spacing:.04em;
  color:#fff;
  background:linear-gradient(135deg,var(--blue,#4f8cff),var(--purple,var(--blue,#4f8cff)));
  box-shadow:0 8px 20px rgba(80,140,255,.18);
  vertical-align:middle;
}

.ar-server.active .ar-provider-quality,
.ar-server:hover .ar-provider-quality{
  background:rgba(255,255,255,.18);
}

/* =========================================
   AniRatio Watch Polish Phase 1
========================================= */

.ar-watch-layout{
  gap:24px !important;
}

.ar-video-stage{
  border-radius:24px !important;
  overflow:hidden !important;
  min-height:520px !important;
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.04) inset !important;
}

.ar-video-overlay{
  background:
    linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.12) 55%, rgba(0,0,0,.08)) !important;
}

.ar-watch-main-actions{
  margin-top:-6px !important;
  padding:18px 22px !important;
  border-radius:22px !important;
}

.ar-watch-main-actions .ar-head{
  margin-bottom:14px !important;
}

.ar-watch-main-actions .ar-title{
  font-size:28px !important;
  line-height:1.1 !important;
  letter-spacing:-0.03em !important;
  font-weight:900 !important;
}

.ar-watch-main-actions .ar-view{
  opacity:.75;
  transition:.2s ease;
}

.ar-watch-main-actions .ar-view:hover{
  opacity:1;
  transform:translateY(-1px);
}

.ar-watch-main-actions .ar-btn{
  min-height:42px !important;
  border-radius:999px !important;
  padding:0 18px !important;
  font-weight:800 !important;
  letter-spacing:.01em;
}

.ar-watch-main-actions .ar-btn.primary{
  box-shadow:
    0 10px 30px rgba(90,140,255,.35),
    0 0 0 1px rgba(255,255,255,.08) inset !important;
}

.ar-control-bar{
  gap:10px !important;
  padding:14px 0 0 !important;
}

.ar-control-bar .ar-select,
.ar-control-bar button{
  min-height:40px !important;
  border-radius:14px !important;
}

.ar-panel{
  border-radius:22px !important;
}

.ar-watch-episodes-panel .ar-episode-grid{
  gap:12px !important;
}

.ar-watch-episodes-panel .ar-episode{
  min-height:82px !important;
  border-radius:18px !important;
  transition:.18s ease !important;
}

.ar-watch-episodes-panel .ar-episode:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,.28);
}

.ar-watch-episodes-panel .ar-episode.active{
  box-shadow:
    0 16px 35px rgba(90,140,255,.35),
    0 0 0 1px rgba(255,255,255,.08) inset !important;
}

.ar-watch-side .ar-next-card{
  border-radius:16px !important;
  padding:10px !important;
  gap:12px !important;
  transition:.18s ease !important;
}

.ar-watch-side .ar-next-card:hover{
  transform:translateX(4px);
  background:rgba(255,255,255,.03);
}

.ar-watch-side .ar-next-card img{
  width:110px !important;
  height:62px !important;
  object-fit:cover !important;
  border-radius:12px !important;
}


/* AniRatio provider button refinement */
.ar-server{
  min-width:156px !important;
  min-height:86px !important;
  padding:16px 18px !important;
  border-radius:999px !important;
  gap:8px !important;
}

.ar-server small{
  display:none !important;
}

.ar-server.active{
  background:linear-gradient(135deg,var(--blue,#4f8cff),var(--purple,var(--blue,#4f8cff))) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.18) !important;
  box-shadow:
    0 18px 42px color-mix(in srgb,var(--blue,#4f8cff) 38%,transparent),
    0 0 0 1px rgba(255,255,255,.12) inset !important;
}

.ar-server:not(.active){
  background:rgba(7,17,31,.72) !important;
}

.ar-server:not(.active):hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--blue,#4f8cff) 55%,rgba(255,255,255,.12)) !important;
}

.ar-provider-quality{
  margin-left:0 !important;
  margin-top:2px !important;
  padding:5px 10px !important;
  font-size:10px !important;
}

@supports not (color: color-mix(in srgb, red 10%, transparent)){
  .ar-server.active{
    box-shadow:0 18px 42px rgba(80,140,255,.28) !important;
  }
}

/* AniRatio provider compact refinement */
.ar-server{
  min-width:132px !important;
  min-height:64px !important;
  padding:10px 16px !important;
  border-radius:20px !important;
  gap:4px !important;

  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:flex-start !important;
}

.ar-server strong,
.ar-server b,
.ar-server-title{
  font-size:15px !important;
  line-height:1.05 !important;
  font-weight:900 !important;
}

.ar-provider-quality{
  margin-top:4px !important;
  padding:3px 8px !important;
  border-radius:999px !important;
  font-size:9px !important;
  letter-spacing:.03em !important;
}

.ar-server.active{
  background:
    linear-gradient(
      135deg,
      rgba(90,140,255,.24),
      rgba(126,92,255,.22)
    ) !important;

  border:1px solid rgba(120,170,255,.42) !important;

  box-shadow:
    0 12px 30px rgba(90,140,255,.16),
    0 0 0 1px rgba(255,255,255,.04) inset !important;
}

.ar-server:not(.active){
  background:rgba(7,16,30,.72) !important;
}

.ar-server:hover{
  transform:translateY(-1px) !important;
}

.ar-provider-quality{
  background:rgba(255,255,255,.12) !important;
  color:#fff !important;
}


/* AniRatio Sources panel polish */
.ar-watch-source-panel{
  padding-bottom:18px !important;
}

.ar-watch-source-panel .ar-head{
  margin-bottom:18px !important;
}

.ar-watch-source-panel .ar-server-list,
#serverList{
  gap:14px !important;
  align-items:center !important;
  flex-wrap:wrap !important;
}

.ar-source-message,
.ar-iframe-note,
.ar-provider-note,
.ar-watch-source-panel .ar-post,
.ar-watch-source-panel .ar-message{
  margin-top:18px !important;
  padding:14px 18px !important;
  border-radius:16px !important;
  font-size:14px !important;
  line-height:1.45 !important;
  color:rgba(220,235,255,.82) !important;
  background:rgba(8,23,39,.72) !important;
  border:1px solid rgba(80,140,255,.16) !important;
}

.ar-watch-source-panel p{
  margin:0 !important;
}

@media(max-width:760px){
  .ar-watch-source-panel .ar-server-list,
  #serverList{
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    padding-bottom:8px !important;
    scroll-snap-type:x mandatory;
  }

  .ar-server{
    flex:0 0 auto !important;
    scroll-snap-align:start;
  }
}

/* AniRatio watch tighten phase 2 */
.ar-watch-source-panel{
  padding:22px 22px 18px !important;
}

.ar-watch-source-panel .ar-head{
  margin-bottom:14px !important;
}

#serverList{
  gap:12px !important;
}

.ar-server{
  min-width:124px !important;
  min-height:58px !important;
  padding:10px 14px !important;
  border-radius:18px !important;
}

.ar-server strong,
.ar-server b,
.ar-server-title{
  font-size:14px !important;
  font-weight:900 !important;
  letter-spacing:-0.02em !important;
}

.ar-provider-quality{
  margin-top:3px !important;
  padding:2px 7px !important;
  font-size:8px !important;
}

.ar-server:not(.active){
  background:rgba(10,20,36,.88) !important;
  border:1px solid rgba(110,150,255,.12) !important;
}

.ar-source-message,
.ar-iframe-note,
.ar-provider-note,
.ar-watch-source-panel .ar-post,
.ar-watch-source-panel .ar-message{
  margin-top:14px !important;
  padding:10px 14px !important;
  border-radius:14px !important;
  font-size:13px !important;
  line-height:1.35 !important;
}

.ar-source-message p,
.ar-iframe-note p{
  margin:0 !important;
}

.ar-source-message{
  opacity:.9;
}


/* AniRatio provider status compact */
.ar-source-message,
.ar-iframe-note,
.ar-provider-note,
.ar-watch-source-panel .ar-message{
  position:relative;
  padding-left:42px !important;
}

.ar-source-message::before,
.ar-iframe-note::before,
.ar-provider-note::before,
.ar-watch-source-panel .ar-message::before{
  content:"✓";
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg,var(--blue,#4f8cff),var(--purple,var(--blue,#4f8cff)));
}

/* AniRatio player width tune */
.ar-watch-layout{
  max-width:1480px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.ar-video-stage{
  max-height:620px !important;
  min-height:460px !important;
}

.ar-player,
.ar-video-stage,
#arVideoStage{
  width:100% !important;
}

@media(min-width:1200px){
  .ar-watch-layout{
    grid-template-columns:minmax(0, 920px) 340px !important;
    justify-content:center !important;
  }
}

@media(max-width:900px){
  .ar-video-stage{
    min-height:300px !important;
  }
}

/* AniRatio Video.js Phase 1 */
.ar-video-stage .video-js{
  width:100% !important;
  height:100% !important;
  min-height:460px !important;
  background:#050814 !important;
  border-radius:24px !important;
  overflow:hidden !important;
}

.ar-video-stage .vjs-control-bar{
  background:linear-gradient(to top, rgba(5,8,20,.96), rgba(5,8,20,.72)) !important;
  backdrop-filter:blur(16px);
  min-height:54px;
}

.ar-video-stage .vjs-big-play-button{
  border:0 !important;
  border-radius:999px !important;
  width:78px !important;
  height:78px !important;
  line-height:78px !important;
  background:linear-gradient(135deg, var(--blue,#4f8cff), var(--purple,#7c5cff)) !important;
  box-shadow:0 18px 50px rgba(79,140,255,.35) !important;
}

.ar-video-stage .vjs-play-progress,
.ar-video-stage .vjs-volume-level{
  background:linear-gradient(90deg, var(--blue,#4f8cff), var(--purple,#7c5cff)) !important;
}

.ar-video-stage .vjs-slider{
  background:rgba(255,255,255,.18) !important;
}

.ar-video-stage .vjs-control{
  color:#fff !important;
}

@media(max-width:900px){
  .ar-video-stage .video-js{
    min-height:300px !important;
  }
}

/* AniRatio Video.js Cleanup Phase 2 */

/* Bigger centered watch player */
@media(min-width:1200px){
  .ar-watch-layout{
    grid-template-columns:minmax(0, 1050px) 360px !important;
    justify-content:center !important;
  }
}

/* Hide legacy duplicate custom controls under Video.js */
.ar-player-controls,
.ar-video-controls,
.ar-watch-controls,
.ar-control-row,
.ar-video-toolbar{
  display:none !important;
}

/* Hide old duplicated timeline if present */
.ar-progress-wrap,
.ar-progress-bar,
.ar-seek-wrap,
.ar-video-progress{
  display:none !important;
}

/* Keep player clean and cinematic */
.ar-video-stage{
  min-height:560px !important;
  border-radius:24px !important;
}

.ar-video-stage .video-js{
  min-height:560px !important;
  border-radius:24px !important;
}

.ar-video-stage .vjs-control-bar{
  border-radius:0 0 24px 24px !important;
}

/* Cleaner title spacing */
.ar-video-stage + .ar-watch-title,
.ar-watch-title{
  margin-top:14px !important;
}

/* Source label cleanup */
#arStatus,
#arMessage{
  font-size:13px !important;
  opacity:.85 !important;
}

/* AniRatio Video.js Cleanup Phase 2 */

/* Bigger centered watch player */
@media(min-width:1200px){
  .ar-watch-layout{
    grid-template-columns:minmax(0, 1050px) 360px !important;
    justify-content:center !important;
  }
}

/* Hide legacy duplicate custom controls under Video.js */
.ar-player-controls,
.ar-video-controls,
.ar-watch-controls,
.ar-control-row,
.ar-video-toolbar{
  display:none !important;
}

/* Hide old duplicated timeline if present */
.ar-progress-wrap,
.ar-progress-bar,
.ar-seek-wrap,
.ar-video-progress{
  display:none !important;
}

/* Keep player clean and cinematic */
.ar-video-stage{
  min-height:560px !important;
  border-radius:24px !important;
}

.ar-video-stage .video-js{
  min-height:560px !important;
  border-radius:24px !important;
}

.ar-video-stage .vjs-control-bar{
  border-radius:0 0 24px 24px !important;
}

/* Cleaner title spacing */
.ar-video-stage + .ar-watch-title,
.ar-watch-title{
  margin-top:14px !important;
}

/* Source label cleanup */
#arStatus,
#arMessage{
  font-size:13px !important;
  opacity:.85 !important;
}