/* MBI Upgrade 2026 — Jelajahi MBI */
.mbi-live-strip{position:relative;overflow:hidden;border-top:1px solid rgba(197,153,52,.28);border-bottom:1px solid rgba(197,153,52,.28);background:linear-gradient(110deg,#071512,#091b18 52%,#06110f);color:#fff}.mbi-live-inner{position:relative;z-index:1;width:min(1180px,94%);min-height:76px;margin:auto;display:grid;grid-template-columns:1.25fr repeat(3,1fr);align-items:center}.mbi-live-inner>div{min-width:0;padding:10px 22px}.mbi-live-inner>div+div{border-left:1px solid rgba(111,156,142,.32)}.mbi-live-heading{display:flex;align-items:center;gap:11px}.mbi-live-heading>i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#e4b83f;box-shadow:0 0 12px rgba(228,184,63,.9);animation:mbiLivePulse 1.45s ease-in-out infinite}.mbi-live-heading strong{font-size:15px;letter-spacing:.025em}.mbi-live-stat b{display:block;color:#f1c53d;font-size:19px;line-height:1.1;font-variant-numeric:tabular-nums}.mbi-live-stat span{display:block;margin-top:5px;color:#91aaa3;font-size:10px}.mbi-online b{display:flex;align-items:center;gap:8px}@keyframes mbiLivePulse{50%{opacity:.42;transform:scale(.75)}}
.mbi-upgrade{max-width:1180px;margin:34px auto 46px;padding:0 18px;color:#f5f7fb}
.mbi-upgrade-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:18px}
.mbi-upgrade-kicker{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid rgba(239,35,45,.45);border-radius:999px;background:rgba(239,35,45,.08);color:#ff6d75;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.mbi-upgrade h2{margin:9px 0 5px;font-size:clamp(25px,3.4vw,38px);line-height:1.05;color:#fff;letter-spacing:-.025em}
.mbi-upgrade .sub{color:#aeb6c4;margin:0;font-size:14px;line-height:1.6}
.mbi-upgrade-note{color:#8f98a8;font-size:12px;white-space:nowrap}
.mbi-upgrade-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(310px,.65fr);gap:18px}
.mbi-panel{position:relative;overflow:hidden;background:linear-gradient(145deg,#11141a 0%,#0b0d11 100%);border:1px solid #252a33;border-radius:22px;padding:20px;box-shadow:0 18px 50px rgba(0,0,0,.28)}
.mbi-panel:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#ed101b,#ff7a00 48%,transparent 84%);opacity:.9}
.mbi-panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}
.mbi-panel-title h3{margin:0;color:#fff;font-size:19px;letter-spacing:-.01em}
.mbi-panel-title span{font-size:10px;font-weight:900;letter-spacing:.12em;color:#ff6d75;text-transform:uppercase}

/* Shorts */
.mbi-short-wrap{position:relative}.mbi-short-list{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,31%);gap:13px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 9px;scrollbar-width:thin;scrollbar-color:#3a3f4a transparent;scroll-behavior:smooth}
.mbi-short-nav{position:absolute;z-index:20;top:46%;display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:rgba(8,10,14,.88);color:#fff;font:700 25px/1 Arial;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.4);touch-action:manipulation}.mbi-short-nav:hover,.mbi-short-nav:focus-visible{background:#ed101b;border-color:#ed101b;transform:scale(1.06)}.mbi-short-prev{left:7px}.mbi-short-next{right:7px}
.mbi-short{position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#151820;scroll-snap-align:start;border:1px solid #2c313b;isolation:isolate}
.mbi-short video,.mbi-short img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.mbi-short:hover video,.mbi-short:hover img{transform:scale(1.035)}
.mbi-short:after{content:"";position:absolute;inset:32% 0 0;background:linear-gradient(transparent,rgba(5,6,8,.93));z-index:1;pointer-events:none}
.mbi-short .short-badge{position:absolute;top:11px;left:11px;z-index:3;display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border-radius:999px;background:rgba(237,16,27,.93);color:#fff;font-size:9px;font-weight:950;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 8px 22px rgba(237,16,27,.25)}
.mbi-short .short-play{position:absolute;inset:0;display:grid;place-items:center;z-index:2;pointer-events:auto;text-decoration:none;cursor:pointer;touch-action:manipulation}
.mbi-short .short-play i{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.34);font-style:normal;color:#fff;font-size:17px;padding-left:3px}
.mbi-short .cap{position:absolute;inset:auto 0 0;padding:54px 13px 13px;z-index:4;color:#fff;pointer-events:none}.mbi-short .cap a{pointer-events:auto}
.mbi-short .cap b{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.36;text-shadow:0 2px 8px #000}
.mbi-short .cap a{display:inline-flex;align-items:center;gap:5px;margin-top:9px;color:#fff;text-decoration:none;font-weight:900;font-size:10px;letter-spacing:.04em}
.mbi-empty-short{min-height:290px;border:1px dashed #383e49;border-radius:18px;display:grid;place-items:center;text-align:center;padding:24px;background:radial-gradient(circle at 50% 10%,rgba(237,16,27,.14),transparent 45%)}
.mbi-empty-short .icon{font-size:44px;filter:drop-shadow(0 8px 18px rgba(237,16,27,.22))}
.mbi-empty-short b{display:block;margin:10px 0 5px;color:#fff;font-size:17px}.mbi-empty-short p{margin:0;color:#9da6b5;font-size:13px;max-width:330px;line-height:1.55}

/* Region selector */
.mbi-map-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mbi-region{position:relative;border:1px solid #303641;background:#171a21;color:#edf1f7;border-radius:12px;padding:11px 10px;text-align:left;cursor:pointer;font-weight:850;font-size:12px;line-height:1.2;transition:.2s ease;min-height:47px}
.mbi-region:hover{transform:translateY(-1px);border-color:#ed101b;background:#1c171b;color:#fff}.mbi-region.active{border-color:#ed101b;background:linear-gradient(135deg,#3b1014,#1b1214);color:#fff;box-shadow:0 0 0 1px rgba(237,16,27,.15) inset}
.mbi-region-results{margin-top:14px;border-top:1px solid #272c35;padding-top:12px;min-height:52px}
.mbi-region-result-head{display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:12px;margin-bottom:4px}.mbi-region-result-head span{color:#8f98a8;font-size:10px}
.mbi-region-results a{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:center;padding:9px 0;border-top:1px solid #232831;color:#e8edf5;text-decoration:none;font-weight:750;font-size:12px;line-height:1.35}
.mbi-region-results a:first-of-type{border-top:0}.mbi-region-results a img{width:52px;height:38px;border-radius:8px;object-fit:cover;background:#1b1f26}.mbi-region-results a:hover{color:#ff646c}
.mbi-region-empty{margin:8px 0 0;color:#98a2b2;font-size:12px;line-height:1.5;padding:11px;border:1px dashed #303641;border-radius:10px;background:#12151a}

/* 30-second summary */
.mbi-30{margin:20px 0;padding:17px 19px;border-radius:17px;background:linear-gradient(135deg,#171a20,#111319);border:1px solid #2d323c;border-left:5px solid #ed101b;color:#e9edf4;box-shadow:0 12px 32px rgba(0,0,0,.18)}
.mbi-30 h3{margin:0 0 10px;color:#fff;font-size:17px}.mbi-30 ul{margin:0;padding-left:20px}.mbi-30 li{margin:7px 0;line-height:1.55;color:#cfd5df}

/* Light theme compatibility */
body.light .mbi-upgrade{color:#15171b}body.light .mbi-upgrade h2{color:#121316}body.light .mbi-upgrade .sub{color:#667085}
body.light .mbi-live-strip{background:linear-gradient(110deg,#f7faf8,#edf5f2 52%,#f8fbfa);color:#15201d}body.light .mbi-live-stat span{color:#60756f}
body.light .mbi-panel{background:linear-gradient(145deg,#fff,#f8f9fb);border-color:#e2e6ec;box-shadow:0 16px 38px rgba(15,23,42,.08)}
body.light .mbi-panel-title h3{color:#16181d}body.light .mbi-region{background:#f7f8fa;border-color:#dde2e8;color:#1d2026}body.light .mbi-region:hover{background:#fff4f4;color:#b90812}
body.light .mbi-region-results{border-color:#e4e7ec}body.light .mbi-region-results a{border-color:#eceff3;color:#20242b}body.light .mbi-region-result-head{color:#17191d}
body.light .mbi-region-empty{background:#f7f8fa;border-color:#dfe4ea;color:#667085}
body.light .mbi-empty-short{background:radial-gradient(circle at 50% 10%,rgba(237,16,27,.08),transparent 45%);border-color:#dfe3e8}body.light .mbi-empty-short b{color:#181b20}
body.light .mbi-30{background:#f7f8fa;border-color:#e3e7ed;color:#20242a}body.light .mbi-30 h3{color:#17191d}body.light .mbi-30 li{color:#4d5562}

@media(max-width:900px){.mbi-upgrade-grid{grid-template-columns:1fr}.mbi-short-list{grid-auto-columns:minmax(190px,36%)}.mbi-upgrade-note{display:none}}
@media(max-width:620px){.mbi-live-inner{width:100%;grid-template-columns:1fr 1fr}.mbi-live-inner>div{padding:12px 15px}.mbi-live-inner>div:nth-child(3){border-left:0;border-top:1px solid rgba(111,156,142,.25)}.mbi-live-inner>div:nth-child(4){border-top:1px solid rgba(111,156,142,.25)}.mbi-live-heading strong{font-size:12px}.mbi-live-stat b{font-size:17px}.mbi-live-stat span{font-size:9px}.mbi-upgrade{padding:0 12px;margin-top:26px}.mbi-upgrade-head{align-items:flex-start}.mbi-panel{padding:15px;border-radius:18px}.mbi-short-list{grid-auto-columns:72%;gap:10px}.mbi-map-grid{grid-template-columns:repeat(2,1fr)}.mbi-upgrade h2{font-size:28px}.mbi-panel-title h3{font-size:17px}}