/*
 * SBOTOTO R6.9.0.1 — Reference Match 10/10 visual correction
 * Scope: public homepage presentation only.
 * Objective: reproduce the supplied reference's boxed desktop portal composition,
 * density, alignment, vertical rhythm and hierarchy without importing third-party
 * branding, scripts or copyrighted reference artwork.
 */

body.reference-portal.page-home{
  --match-shell:1170px;
  --match-side:230px;
  --match-gap:8px;
  --match-red:#b20a13;
  --match-red-2:#78070d;
  --match-red-3:#430407;
  --match-maroon:#310205;
  --match-deep:#120103;
  --match-gold:#ffd145;
  --match-gold-2:#d89a10;
  --match-line:rgba(255,209,69,.30);
  --match-shadow:0 16px 36px rgba(0,0,0,.46);
}

@media (min-width:901px){
  /* BACKDROP: artwork frames the portal instead of competing with it. */
  body.reference-portal.page-home{
    background-color:#260003;
    background-image:url('../assets/site-background-r6819-crimson.webp');
    background-position:center top;
    background-size:100% 100%;
    background-repeat:no-repeat;
    background-attachment:scroll;
  }
  body.reference-portal.page-home::before{
    background:linear-gradient(180deg,rgba(24,0,2,.04),rgba(35,0,3,.12) 48%,rgba(28,0,2,.34) 100%);
  }
  body.reference-portal.page-home::after{display:none}

  body.reference-portal.page-home .container{
    width:min(calc(100% - 20px),var(--match-shell));
  }

  /* HEADER: no full-screen bar; only the centered portal owns chrome. */
  body.reference-portal.page-home .topbar{
    position:relative;
    top:auto;
    z-index:90;
    border:0;
    background:transparent;
    box-shadow:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  body.reference-portal.page-home .topbar-inner{
    min-height:58px;
    padding:0 13px;
    gap:12px;
    border:1px solid rgba(255,209,69,.22);
    border-top:0;
    background:linear-gradient(180deg,rgba(52,2,5,.98),rgba(24,1,3,.99));
    box-shadow:0 8px 20px rgba(0,0,0,.34);
  }
  body.reference-portal.page-home .brand-logo-native{height:36px;max-width:190px}
  body.reference-portal.page-home .brand-tagline{font-size:6.5px;letter-spacing:1.35px;color:#f2c94d}
  body.reference-portal.page-home .login-form{gap:5px}
  body.reference-portal.page-home .login-form input{
    width:132px;
    height:28px;
    padding:0 9px;
    border:1px solid #8a6966;
    border-radius:14px;
    background:#f8f4f1;
    color:#28191a;
    box-shadow:inset 0 1px 3px rgba(0,0,0,.12);
    font-size:8px;
  }
  body.reference-portal.page-home .login-form input::placeholder{color:#726163}
  body.reference-portal.page-home .login-form .btn{
    min-height:28px;
    height:28px;
    padding:0 11px;
    border-radius:5px;
    font-size:7px;
    letter-spacing:.25px;
  }
  body.reference-portal.page-home .btn-login{
    border-color:#ffdc55;
    background:linear-gradient(180deg,#ffdb4d,#d99708);
    color:#3c1800;
    box-shadow:inset 0 1px rgba(255,255,255,.58),0 4px 9px rgba(0,0,0,.22);
  }
  body.reference-portal.page-home .btn-register{
    border-color:#f2c43b;
    background:linear-gradient(180deg,#cf101a,#85070e);
    color:#fff;
  }

  /* TICKER: reference-like narrow running-news strip inside the portal width. */
  body.reference-portal.page-home .ticker-wrap{
    z-index:70;
    border:0;
    background:transparent;
    box-shadow:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  body.reference-portal.page-home .ticker-grid{
    height:25px;
    grid-template-columns:150px minmax(0,1fr);
    border-left:1px solid var(--match-line);
    border-right:1px solid var(--match-line);
    border-bottom:1px solid rgba(255,211,73,.23);
    background:linear-gradient(180deg,#a60b14,#66060b);
  }
  body.reference-portal.page-home .ticker-label{
    padding:0 10px;
    justify-content:center;
    background:linear-gradient(180deg,#ffd64c,#dd990a);
    color:#421a00;
    font-size:7px;
    letter-spacing:.65px;
  }
  body.reference-portal.page-home .ticker-label span{color:#138943}
  body.reference-portal.page-home .ticker-track{font-size:7px;color:#fff0bb}
  body.reference-portal.page-home .ticker-content{padding-left:18px}

  /* NAVIGATION: dense red icon tabs, boxed to the same shell. */
  body.reference-portal.page-home .portal-nav{
    border:0;
    background:transparent;
    box-shadow:none;
  }
  body.reference-portal.page-home .portal-nav-inner{
    min-height:61px;
    gap:5px;
    padding:5px 6px;
    overflow:visible;
    border-left:1px solid var(--match-line);
    border-right:1px solid var(--match-line);
    border-bottom:1px solid rgba(255,210,69,.22);
    background:linear-gradient(180deg,#3e0205,#210103);
  }
  body.reference-portal.page-home .portal-nav a{
    flex:1 1 0;
    min-width:0;
    min-height:49px;
    gap:3px;
    padding:3px 4px;
    border:1px solid #ee131d;
    border-radius:5px;
    background:linear-gradient(180deg,#e90f18 0%,#c20c14 43%,#8b0810 72%,#62060a 100%);
    box-shadow:inset 0 1px rgba(255,255,255,.19),0 4px 8px rgba(0,0,0,.28);
  }
  body.reference-portal.page-home .portal-nav .ui-icon-host{width:19px;height:19px}
  body.reference-portal.page-home .portal-nav .ui-icon-host svg{width:18px;height:18px}
  body.reference-portal.page-home .portal-nav strong{font-size:6.4px;letter-spacing:.05px}

  /* CONTINUOUS CENTER PORTAL: fixes the previous pasted-on-widget appearance. */
  body.reference-portal.page-home .main-shell{
    padding:0 0 10px;
  }
  body.reference-portal.page-home .main-shell>.page-grid{
    position:relative;
    grid-template-columns:var(--match-side) minmax(0,1fr);
    gap:var(--match-gap);
    padding:7px;
    border-left:1px solid var(--match-line);
    border-right:1px solid var(--match-line);
    border-bottom:1px solid rgba(255,207,64,.20);
    background:
      linear-gradient(180deg,rgba(53,2,5,.965),rgba(20,1,3,.985)),
      radial-gradient(circle at 50% 0,rgba(184,13,26,.12),transparent 38%);
    box-shadow:0 22px 44px rgba(0,0,0,.42);
  }
  body.reference-portal.page-home .main-shell>.page-grid::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:linear-gradient(90deg,rgba(255,212,72,.025),transparent 12%,transparent 88%,rgba(255,212,72,.025));
  }
  body.reference-portal.page-home .sidebar,
  body.reference-portal.page-home .content-column{position:relative;z-index:1}

  /* LEFT RAIL: compact blocks aligned on a strict baseline grid. */
  body.reference-portal.page-home .sidebar{
    position:static;
    top:auto;
    gap:6px;
    align-content:start;
  }
  body.reference-portal.page-home .sidebar-register{
    min-height:33px;
    border:1px solid #f6bd20;
    border-radius:4px;
    background:linear-gradient(180deg,#ffd748,#db9808);
    color:#471d00;
    font-size:8px;
    letter-spacing:.35px;
    box-shadow:inset 0 1px rgba(255,255,255,.52),0 4px 8px rgba(0,0,0,.28);
  }
  body.reference-portal.page-home .results-panel,
  body.reference-portal.page-home .transaction-box,
  body.reference-portal.page-home .support-card{
    border:1px solid rgba(255,207,62,.28);
    border-radius:4px;
    background:linear-gradient(180deg,#430306,#180103);
    box-shadow:0 6px 14px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.02);
  }
  body.reference-portal.page-home .transaction-box{padding:6px}
  body.reference-portal.page-home .transaction-box .panel-heading{margin:-6px -6px 5px}
  body.reference-portal.page-home .panel-heading{
    min-height:25px;
    padding:5px 7px;
    border-bottom:1px solid rgba(255,211,76,.24);
    background:linear-gradient(180deg,#c90d17,#7f070d);
  }
  body.reference-portal.page-home .panel-heading-title{font-size:7.3px;letter-spacing:.35px}
  body.reference-portal.page-home .panel-heading-title h2{font-size:7.3px;margin:0}
  body.reference-portal.page-home .panel-heading-icon{transform:scale(.78);transform-origin:center}
  body.reference-portal.page-home .panel-status{font-size:6px}
  body.reference-portal.page-home .transaction-window{height:84px;overflow:hidden}
  body.reference-portal.page-home .auto-scroll-list{max-height:84px}
  body.reference-portal.page-home .transaction-item{
    min-height:27px;
    grid-template-columns:22px minmax(0,1fr) auto;
    gap:5px;
    padding:4px 2px;
    font-size:6.7px;
  }
  body.reference-portal.page-home .transaction-item .avatar{width:20px;height:20px}
  body.reference-portal.page-home .transaction-item small{font-size:5.8px}
  body.reference-portal.page-home .transaction-item strong{font-size:6.7px;color:#ffe27a}
  body.reference-portal.page-home .result-toolbar{padding:4px 6px;min-height:25px}
  body.reference-portal.page-home .result-toolbar time{font-size:6.5px}
  body.reference-portal.page-home .result-controls{padding:0;gap:3px}
  body.reference-portal.page-home .result-controls button{width:19px;height:18px;border-radius:3px}
  body.reference-portal.page-home .result-slider,
  body.reference-portal.page-home .latest-news{padding:5px 7px}
  body.reference-portal.page-home .result-row,
  body.reference-portal.page-home .news-detail{padding:5px 0}
  body.reference-portal.page-home .result-row strong,
  body.reference-portal.page-home .news-detail strong{font-size:6.8px}
  body.reference-portal.page-home .result-number{font-size:10.5px;letter-spacing:1px}
  body.reference-portal.page-home .result-page,
  body.reference-portal.page-home .news-status{font-size:6px}
  body.reference-portal.page-home .support-card{padding:8px}
  body.reference-portal.page-home .support-card strong{font-size:10px}
  body.reference-portal.page-home .support-card small,
  body.reference-portal.page-home .sidebar-note{font-size:6.4px;line-height:1.35}

  /* RIGHT COLUMN: one coherent density system. */
  body.reference-portal.page-home .content-column{gap:7px}

  /* HERO: banner proportion rather than oversized landing-page billboard. */
  body.reference-portal.page-home .hero{
    min-height:286px;
    border:1px solid #d99f17;
    border-radius:5px;
    background:
      radial-gradient(circle at 76% 43%,rgba(167,14,27,.36),transparent 30%),
      linear-gradient(105deg,rgba(55,2,6,.98),rgba(33,2,5,.95) 52%,rgba(16,1,2,.91));
    box-shadow:0 10px 22px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.035);
  }
  body.reference-portal.page-home .hero::after{
    right:2%;
    font-size:145px;
    letter-spacing:-8px;
    -webkit-text-stroke:1px rgba(255,211,75,.12);
    opacity:.78;
  }
  body.reference-portal.page-home .hero-slide{
    min-height:286px;
    grid-template-columns:minmax(0,1.22fr) minmax(210px,.78fr);
    padding:25px 29px 30px;
  }
  body.reference-portal.page-home .hero-copy{max-width:520px}
  body.reference-portal.page-home .hero-kicker{font-size:7px;letter-spacing:1.5px}
  body.reference-portal.page-home .hero h1{margin:5px 0 3px;font-size:44px;line-height:.92;letter-spacing:-1px}
  body.reference-portal.page-home .hero h2{margin:6px 0;font-size:16px;line-height:1.12}
  body.reference-portal.page-home .hero p{max-width:480px;margin-top:7px;font-size:8.4px;line-height:1.48;color:#d2bec0}
  body.reference-portal.page-home .hero-actions{gap:9px;margin-top:12px}
  body.reference-portal.page-home .btn-hero{min-height:31px;height:31px;padding:0 12px;font-size:7px;border-radius:4px}
  body.reference-portal.page-home .hero-actions>a:not(.btn){font-size:7px}
  body.reference-portal.page-home .hero-art{min-height:190px}
  body.reference-portal.page-home .pe-hero-logo{width:min(200px,78%)}
  body.reference-portal.page-home .pe-hero-orbit{width:170px;height:170px;box-shadow:0 0 0 28px rgba(214,167,59,.02),0 0 0 58px rgba(158,16,30,.03)}
  body.reference-portal.page-home .pe-hero-chip{padding:4px 6px;font-size:5.7px}
  body.reference-portal.page-home .hero-arrow{right:9px;width:28px;height:28px}
  body.reference-portal.page-home .hero-dots{left:29px;bottom:11px}
  body.reference-portal.page-home .hero-dots button{width:12px;height:2px}
  body.reference-portal.page-home .hero-dots button.active{width:22px}

  /* FOUR PRODUCT TILES: same compact 4-column rhythm as the reference banners. */
  body.reference-portal.page-home .pg22-public-showcase{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:5px;
  }
  body.reference-portal.page-home .pg22-feature{
    min-height:154px;
    border:1px solid rgba(255,209,69,.30);
    border-radius:4px;
    box-shadow:0 6px 14px rgba(0,0,0,.30);
  }
  body.reference-portal.page-home .pg22-feature::before{width:48px;height:48px;background-size:48px 48px;opacity:.30}
  body.reference-portal.page-home .pg22-feature-content{left:9px;right:9px;bottom:8px}
  body.reference-portal.page-home .pg22-feature small{font-size:5.8px;letter-spacing:.8px}
  body.reference-portal.page-home .pg22-feature h3{margin:2px 0 3px;font-size:17px}
  body.reference-portal.page-home .pg22-feature p{display:none}
  body.reference-portal.page-home .pg22-feature a{padding:4px 7px;border-radius:3px;font-size:5.8px}

  /* LIVE METRICS STRIP. */
  body.reference-portal.page-home .service-strip{
    border:1px solid rgba(255,209,69,.28);
    border-radius:4px;
    background:linear-gradient(180deg,#ba0d17,#77070d);
    box-shadow:0 5px 12px rgba(0,0,0,.24);
  }
  body.reference-portal.page-home .service-strip article{min-height:54px;padding:7px 9px;border-right-color:rgba(255,221,109,.20)}
  body.reference-portal.page-home .service-strip small{font-size:5.8px;color:#ffe798}
  body.reference-portal.page-home .service-strip article>div:not(.progress){margin-top:3px}
  body.reference-portal.page-home .service-strip span{font-size:6px;color:#f0d7d9}
  body.reference-portal.page-home .service-strip strong{font-size:10px;color:#fff}
  body.reference-portal.page-home .progress{height:2px;margin-top:5px;background:#5b0b10}
  body.reference-portal.page-home .progress i{background:linear-gradient(90deg,#ffe36c,#f6a70a)}

  /* FIVE QUICK MENUS: compact equal-height cards. */
  body.reference-portal.page-home .feature-menu{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
  body.reference-portal.page-home .feature-menu a{
    min-height:61px;
    grid-template-columns:30px minmax(0,1fr);
    column-gap:7px;
    padding:7px;
    border:1px solid rgba(255,209,69,.24);
    border-radius:4px;
    background:linear-gradient(180deg,#2f0306,#100103);
    box-shadow:0 5px 11px rgba(0,0,0,.23);
  }
  body.reference-portal.page-home .feature-menu .ui-icon-host{width:29px;height:29px;padding:7px;border-radius:50%}
  body.reference-portal.page-home .feature-menu strong{font-size:7px}
  body.reference-portal.page-home .feature-menu small{font-size:5.5px}

  /* RESULTS + BANK: compact information modules; no oversized cards. */
  body.reference-portal.page-home .section-card,
  body.reference-portal.page-home .bank-schedule{
    border:1px solid rgba(255,209,69,.26);
    border-radius:4px;
    background:linear-gradient(180deg,#2f0306,#100103);
    box-shadow:0 7px 16px rgba(0,0,0,.27);
  }
  body.reference-portal.page-home .section-title,
  body.reference-portal.page-home .latest-pools-heading,
  body.reference-portal.page-home .bank-schedule-header{
    min-height:37px;
    padding:6px 9px;
    gap:8px;
    border-bottom:1px solid rgba(255,211,76,.22);
    background:linear-gradient(180deg,#81070d,#410407);
  }
  body.reference-portal.page-home .section-title span,
  body.reference-portal.page-home .latest-pools-heading span,
  body.reference-portal.page-home .section-eyebrow{font-size:5.8px;letter-spacing:.75px}
  body.reference-portal.page-home .section-title h2,
  body.reference-portal.page-home .latest-pools-heading h2,
  body.reference-portal.page-home .bank-schedule-header h2{margin-top:1px;font-size:12px}
  body.reference-portal.page-home .pool-controls button,
  body.reference-portal.page-home .bank-carousel-controls button{width:23px;height:23px;border-radius:3px;font-size:8px}
  body.reference-portal.page-home .pools-status-row{padding:5px 9px;font-size:6px}
  body.reference-portal.page-home .pools-track{gap:5px;padding:0 8px 8px}
  body.reference-portal.page-home .pool-card{
    flex:0 0 calc((100% - 15px)/4);
    border-radius:4px;
    border-color:rgba(255,210,69,.23);
    box-shadow:0 4px 9px rgba(0,0,0,.24);
  }
  body.reference-portal.page-home .pool-card-image{aspect-ratio:16/8}
  body.reference-portal.page-home .pool-result-number{left:7px;bottom:5px;font-size:15px;letter-spacing:1.5px}
  body.reference-portal.page-home .pool-result-date{right:6px;bottom:6px;font-size:5.5px}
  body.reference-portal.page-home .pool-card-copy{padding:6px 7px}
  body.reference-portal.page-home .pool-card-copy strong{font-size:6.7px}
  body.reference-portal.page-home .pool-card-copy small{font-size:5.4px}
  body.reference-portal.page-home .pools-progress{height:2px;margin:0 8px 7px}

  body.reference-portal.page-home .bank-schedule-header p{margin-top:2px;font-size:5.8px}
  body.reference-portal.page-home .bank-carousel-track{gap:5px;padding:7px 8px 7px}
  body.reference-portal.page-home .bank-card{
    flex:0 0 128px;
    min-height:67px;
    padding:7px;
    border-radius:4px;
    border-color:rgba(255,209,69,.20);
    background:linear-gradient(180deg,#220204,#0a0102);
  }
  body.reference-portal.page-home .bank-status-dot{right:6px;top:6px;width:5px;height:5px}
  body.reference-portal.page-home .bank-wordmark strong{margin-top:6px;font-size:12px}
  body.reference-portal.page-home .bank-wordmark small{font-size:5.4px}
  body.reference-portal.page-home .bank-status-label{margin-top:6px;font-size:5.4px}
  body.reference-portal.page-home .bank-status-legend{gap:10px;padding:0 8px 7px;font-size:5.5px}
  body.reference-portal.page-home .legend-dot{width:5px;height:5px}

  /* TRUST BANNER: contained; prevents the former giant full-width lower artwork break. */
  body.reference-portal.page-home .trust-strip-section{
    min-height:0;
    height:62px;
    overflow:hidden;
    border:1px solid rgba(255,209,69,.22);
    border-radius:4px;
    background:#120103;
  }
  body.reference-portal.page-home .trust-strip-viewport,
  body.reference-portal.page-home .trust-strip-track{width:100%;height:100%;overflow:hidden}
  body.reference-portal.page-home .trust-strip-track img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
  }

  /* FOOTER: centered continuation of the portal; eliminate black dead-space. */
  body.reference-portal.page-home .footer{
    width:min(calc(100% - 20px),var(--match-shell));
    margin:0 auto;
    border:1px solid rgba(255,209,69,.24);
    border-top:2px solid #f1ba21;
    border-radius:0 0 5px 5px;
    background:linear-gradient(180deg,#2d0205,#0e0102);
    box-shadow:0 18px 35px rgba(0,0,0,.42);
  }
  body.reference-portal.page-home .footer>.container{width:100%;padding-inline:11px}
  body.reference-portal.page-home .footer-grid{
    grid-template-columns:1.35fr .55fr .55fr .95fr;
    gap:11px 15px;
    padding:13px 0 9px;
  }
  body.reference-portal.page-home .footer .brand-logo-native{height:31px}
  body.reference-portal.page-home .footer h3{margin-bottom:5px;font-size:6.5px}
  body.reference-portal.page-home .footer a:not(.brand):not(.btn){margin:3px 0;font-size:6.2px}
  body.reference-portal.page-home .footer p{margin:4px 0;font-size:6.1px;line-height:1.35}
  body.reference-portal.page-home .responsible{margin-top:4px;padding:3px 6px;font-size:5.7px}
  body.reference-portal.page-home .footer-contact small{font-size:5.7px}
  body.reference-portal.page-home .footer-contact strong{margin-top:2px;font-size:11px}
  body.reference-portal.page-home .footer-contact .btn{min-height:25px;height:25px;padding:0 8px;font-size:5.8px;border-radius:3px}
  body.reference-portal.page-home .footer-guides{padding-top:7px}
  body.reference-portal.page-home .footer-info-grid{gap:5px}
  body.reference-portal.page-home .footer-info-grid .info-card{
    min-height:56px;
    grid-template-columns:24px minmax(0,1fr);
    gap:6px;
    padding:6px;
    border-radius:4px;
  }
  body.reference-portal.page-home .footer-info-grid .info-card>span:first-child{width:23px;height:23px;border-radius:50%;font-size:6px}
  body.reference-portal.page-home .footer-info-grid .info-card small{font-size:5px;letter-spacing:.4px}
  body.reference-portal.page-home .footer-info-grid .info-card h3{margin:1px 0;font-size:6.1px}
  body.reference-portal.page-home .footer-info-grid .info-card p{font-size:5.2px;line-height:1.25}
  body.reference-portal.page-home .footer-info-grid .info-card a{margin-top:2px;font-size:5.2px}
  body.reference-portal.page-home .footer-bottom{border-top:1px solid rgba(255,255,255,.06);font-size:5.7px}
  body.reference-portal.page-home .footer-bottom .container{min-height:25px;padding-inline:11px}

  /* Floating chrome is deliberately de-emphasized on desktop. */
  body.reference-portal.page-home .app-banner{display:none}
  body.reference-portal.page-home .asean-circle-menu{right:max(14px,calc((100vw - var(--match-shell))/2 - 62px));bottom:18px}
  body.reference-portal.page-home .asean-circle-menu__toggle{width:38px;height:38px;font-size:17px}
}

/* Tablet: retain boxed portal but collapse safely. */
@media (min-width:621px) and (max-width:900px){
  body.reference-portal.page-home .container{width:calc(100% - 16px)}
  body.reference-portal.page-home .main-shell>.page-grid{padding:8px;background:rgba(30,2,5,.94)}
  body.reference-portal.page-home .content-column{gap:10px}
  body.reference-portal.page-home .pg22-public-showcase{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Mobile keeps the existing responsive interaction model; tighten accidental excess spacing. */
@media (max-width:620px){
  body.reference-portal.page-home .main-shell{padding-bottom:12px}
  body.reference-portal.page-home .content-column{gap:10px}
  body.reference-portal.page-home .footer-grid{padding-top:18px;padding-bottom:12px}
}