:root{
  --bg:#0b1214;
  --bg2:#0e1719;
  --panel:#101b1e;
  --panel2:#16282b;
  --panel3:#1b3033;
  --line:#2c4549;
  --line-soft:#21383b;
  --teal:#0f766e;
  --teal2:#149b8f;
  --green:#22c55e;
  --blue:#1685d8;
  --purple:#5b5bd6;
  --orange:#a66a19;
  --red:#ff4d4d;
  --text:#f2f7f7;
  --muted:#8fa6a8;
  --gold:#d99a2b;
  --cyan:#67e8f9;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  margin:0;
  padding:0;
  width:100%;
  min-height:100%;
  background:var(--bg);
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  overflow-x:hidden;
}

body{
  margin:0!important;
  padding:0!important;
  width:100%!important;
  max-width:100%!important;
  min-height:100%;
  background:var(--bg)!important;
  color:var(--text)!important;
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.45;
  overflow-x:hidden;
}

img{
  max-width:100%;
  height:auto;
}

iframe{
  max-width:100%;
}

/* =========================================================
   LINKS
   ========================================================= */

a,
a:link,
a:visited{
  color:var(--text);
  text-decoration:none;
}

a:hover{
  color:var(--cyan);
  text-decoration:none;
}

a:focus-visible{
  outline:2px solid var(--green);
  outline-offset:2px;
}

/* =========================================================
   OLD HEADER
   ========================================================= */

#top,
#top2{
  display:none!important;
}

/* =========================================================
   MAIN NAVIGATION
   ========================================================= */

#nav,
.nav2{
  display:flex!important;
  flex-wrap:wrap;
  align-items:center;
  gap:4px;
  width:100%!important;
  height:auto!important;
  min-height:46px;
  margin:0 auto!important;
  padding:7px 8px!important;
  list-style:none!important;
  background:var(--bg2)!important;
  border-bottom:1px solid var(--line)!important;
}

#nav li,
.nav2 li{
  float:none!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  list-style:none!important;
}

#nav li span{
  display:block;
}

#nav li a,
.nav2 li a{
  float:none!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  min-height:32px;
  margin:0!important;
  padding:8px 13px!important;
  line-height:1.3!important;
  border:1px solid transparent;
  border-radius:5px;
  background:transparent!important;
  color:#eaf2f2!important;
  font-weight:600;
  text-align:center;
  white-space:nowrap;
}

#nav li a:hover,
.nav2 li a:hover,
#nav .select a,
.nav2 .select a,
#nav li a[aria-current="page"],
.nav2 li a[aria-current="page"]{
  background:var(--teal)!important;
  border-color:var(--teal2)!important;
  color:#fff!important;
}

/* =========================================================
   MAIN THREE-COLUMN LAYOUT
   NOTE: the old "#main.mbg > .left / #min / .right" fixed-width
   (160px) block that used to live here has been REMOVED. It was
   more specific than the plain ".left / .right / #min" rules in
   spbo-terbaru.css, so it was overriding the responsive @media
   rules there and forcing a fixed 160px layout on every screen
   size, including mobile. The responsive column layout (desktop
   AND mobile) now comes entirely from spbo-terbaru.css.
   ========================================================= */

.lldiv{
  width:100%;
  min-width:0;
}

.leftnav{
  width:100%!important;
  margin:0 0 8px!important;
  padding:0!important;
  overflow:hidden;
  list-style:none!important;
  border:1px solid var(--line-soft)!important;
  border-radius:4px;
  background:var(--panel)!important;
}

.leftnav ul{
  margin:0!important;
  padding:0!important;
  list-style:none!important;
}

.leftnav h2,
.lr_tit{
  display:block;
  margin:0!important;
  padding:7px 10px!important;
  background:var(--teal)!important;
  color:#fff!important;
  font-size:14px!important;
  line-height:1.3!important;
  font-weight:600!important;
  border:0!important;
}

.leftnav li{
  float:none!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:29px;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-bottom:1px solid var(--line-soft)!important;
  background:var(--panel)!important;
  list-style:none!important;
}

.leftnav li:last-child{
  border-bottom:0!important;
}

.leftnav li a{
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:29px;
  margin:0!important;
  padding:5px 12px!important;
  line-height:19px!important;
  color:#dce8e9!important;
  font-weight:500!important;
  background:transparent!important;
}

.leftnav li a:hover,
.leftnav .select a,
.leftnav li a[aria-current="page"]{
  background:var(--teal2)!important;
  color:#fff!important;
}

#allList{
  background:var(--panel)!important;
  border-color:var(--teal)!important;
}

/* =========================================================
   CENTER / SCOREBOARD
   ========================================================= */

#min{
  width:100%!important;
  max-width:100%!important;
  background:var(--bg)!important;
  border:1px solid var(--line)!important;
  border-radius:5px;
  padding:6px;
  overflow:hidden!important;
}

#min iframe{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  border:0!important;
  margin:0!important;
  padding:0!important;
  background:var(--bg)!important;
}

.mintopnav{
  background:var(--panel2)!important;
  border-color:var(--line)!important;
}

.mintopnav li,
.mintopnav li a{
  background:transparent!important;
}

.mintopnav li a{
  color:var(--cyan)!important;
}

.scoretitle,
.scoretitle2{
  background:var(--teal)!important;
  color:#fff!important;
  border-color:var(--line)!important;
}

.Leaguestitle{
  background:var(--purple)!important;
  color:#fff!important;
}

.Leaguestitle2{
  background:var(--orange)!important;
  color:#fff!important;
}

.date_li{
  background:var(--panel2)!important;
  border-color:var(--line)!important;
  color:var(--text)!important;
}

.date_li b{
  background:var(--teal)!important;
  color:#fff!important;
}

.b1,
.b2,
.b3,
.b4,
.te1,
.te2{
  background:var(--panel)!important;
  color:var(--text)!important;
  border-color:var(--line-soft)!important;
}

.red,
.red2{
  color:var(--red)!important;
}

.blue,
.status{
  color:var(--blue)!important;
}

.time{
  color:var(--muted)!important;
}

.up{
  background:#3b252b!important;
}

.down{
  background:#17372a!important;
}

.menu{
  background:var(--teal)!important;
  color:#fff!important;
}

/* =========================================================
   RIGHT SIDEBAR / BANNERS
   ========================================================= */

.right{
  background:transparent!important;
}

.right iframe{
  display:block!important;
  width:160px!important;
  max-width:160px!important;
  height:160px!important;
  margin:0 auto 8px!important;
  padding:0!important;
  border:1px solid var(--line)!important;
  box-sizing:border-box!important;
}



body > iframe{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  border:0!important;
  margin:0!important;
  padding:0!important;
}

/* =========================================================
   BOTTOM / FOOTER
   ========================================================= */

#main2,
#main3{
  width:100%!important;
  background:var(--panel)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}

#bottom{
  width:100%!important;
  max-width:1200px!important;
  margin:0 auto!important;
  padding:18px 14px 40px!important;
  background:var(--panel)!important;
  border-top:1px solid var(--line)!important;
  color:var(--muted)!important;
}

#bottom p{
  margin:8px 0;
  color:var(--text)!important;
  font-size:13px!important;
  line-height:1.7!important;
}

#bottom a{
  color:var(--green)!important;
}

#bottom a:hover{
  color:var(--cyan)!important;
}

/* =========================================================
   GENERAL PANELS
   ========================================================= */

.panel,
.box,
.content-box{
  background:var(--panel)!important;
  border:1px solid var(--line)!important;
  color:var(--text)!important;
}

hr{
  border:0;
  border-top:1px solid var(--line);
}

/* =========================================================
   INLINE COLOR NORMALIZATION
   ========================================================= */

[style*="#22c55e"]{
  color:var(--green)!important;
}

[style*="#ffffff"],
[style*="#FFFFFF"]{
  color:var(--text)!important;
}

[style*="#020605"]{
  background:var(--bg)!important;
}

[style*="#0B1214"],
[style*="#0b1214"]{
  background:var(--bg)!important;
}

/* =========================================================
   TABLET / MOBILE
   The responsive mobile layout for .left / .right / #min comes
   entirely from spbo-terbaru.css's @media blocks (900px, 680px,
   420px breakpoints). Nothing overrides it here anymore.
   ========================================================= */

/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar{
  width:8px;
  height:8px;
}

::-webkit-scrollbar-track{
  background:var(--bg);
}

::-webkit-scrollbar-thumb{
  background:var(--teal);
  border-radius:5px;
}

::-webkit-scrollbar-thumb:hover{
  background:var(--teal2);
}

/* =========================================================
   FINAL THEME
   ========================================================= */

html,
body{
  background:var(--bg)!important;
  color:var(--text)!important;
}

#nav,
.nav2{
  background:var(--bg2)!important;
  border-color:var(--line)!important;
}

#nav li,
.nav2 li{
  background:transparent!important;
}

#nav li a,
.nav2 li a{
  color:#eaf2f2!important;
}

#nav li a:hover,
.nav2 li a:hover,
#nav .select a,
.nav2 .select a,
#nav li a[aria-current="page"],
.nav2 li a[aria-current="page"]{
  background:var(--teal)!important;
  color:#fff!important;
}

.leftnav,
.leftnav ul,
.leftnav li{
  background:var(--panel)!important;
  border-color:var(--line-soft)!important;
}

.leftnav h2,
.lr_tit{
  background:var(--teal)!important;
  color:#fff!important;
}

.leftnav li a{
  color:#dce8e9!important;
}

.leftnav li a:hover,
.leftnav .select a,
.leftnav li a[aria-current="page"]{
  background:var(--teal2)!important;
  color:#fff!important;
}

#min{
  background:var(--bg)!important;
  border-color:var(--line)!important;
}

.scoretitle,
.scoretitle2,
.menu,
.date_li b{
  background:var(--teal)!important;
  color:#fff!important;
}

.Leaguestitle{
  background:var(--purple)!important;
  color:#fff!important;
}

.Leaguestitle2{
  background:var(--orange)!important;
  color:#fff!important;
}

.b1,
.b2,
.b3,
.b4,
.te1,
.te2,
.date_li{
  background:var(--panel)!important;
  color:var(--text)!important;
  border-color:var(--line-soft)!important;
}

.red,
.red2{
  color:var(--red)!important;
}

.blue,
.status{
  color:var(--blue)!important;
}

.time{
  color:var(--muted)!important;
}

.up{
  background:#3b252b!important;
}

.down{
  background:#17372a!important;
}

#bottom,
#main2,
#main3{
  background:var(--panel)!important;
  color:#dce8e9!important;
  border-color:var(--line)!important;
}
/* =========================================================
   BOTTOM POPUP BANNER (full width, muncul dengan animasi pop)
   ========================================================= */

.banner-bottom{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:9999;
  width:100%;
  max-width:100%;
  background:var(--panel);
  border-top:1px solid var(--line);
  text-align:center;
  padding:4px 0;
  box-sizing:border-box;

  transform:translateY(100%);
  opacity:0;
  animation:bannerPopUp .4s ease-out forwards;
  animation-delay:.6s; /* jeda sebelum muncul, boleh diubah/dihapus */
}

@keyframes bannerPopUp{
  to{
    transform:translateY(0);
    opacity:1;
  }
}

.banner-bottom .close-btn{
  position:absolute;
  top:-14px;
  right:10px;
  width:26px;
  height:26px;
  border-radius:50%;
  border:0;
  background:#000;
  color:#fff;
  font-size:14px;
  line-height:26px;
  cursor:pointer;
}

.banner-bottom iframe,
.banner-bottom img{
  display:block;
  width:100%;
  max-width:728px;
  height:auto;
  max-height:70px;
  margin:0 auto;
  border:0;
}

@media(max-width:680px){
  .banner-bottom{ padding:3px 0; }
  .banner-bottom iframe,
  .banner-bottom img{ max-height:60px; }
}

@media(max-width:420px){
  .banner-bottom iframe,
  .banner-bottom img{ max-height:50px; }
}