@media (max-width:1200px){.topbar{grid-template-columns:180px 1fr 520px 92px}.grid{grid-template-columns:repeat(4,1fr)}.country-title h3{font-size:12px}.price-big{font-size:48px}.price-main{font-size:26px}.country-price{font-size:28px}}
@media (max-width:900px){body{overflow-y:auto}.page{height:auto;max-height:none;overflow:visible;padding:12px}.topbar{grid-template-columns:1fr;min-height:0}.brand,.ticker,.home-btn{height:58px}.timebox{height:auto;grid-template-columns:1fr;min-width:0}.top-grid{grid-template-columns:1fr}.grid{grid-template-columns:1fr}.chart-head,.trend-row,.footer{flex-direction:column;align-items:flex-start}.chart-controls{width:100%;justify-content:space-between;flex-wrap:wrap}.chart-wrap{height:340px;min-height:340px}.hourly-panel{grid-template-columns:1fr 1fr;gap:5px}.hourly-row{font-size:9px}.source-note{white-space:normal}.country-card{min-height:auto}.home-btn{width:100%}}

@media (max-height:820px) and (min-width:901px){.page{padding:7px;gap:6px}.topbar{min-height:54px}.brand,.ticker,.home-btn{height:54px}.brand img{max-height:45px}.timebox{height:54px}.top-grid{gap:6px}.card{padding:8px}.country-card{min-height:98px}.country-price{font-size:clamp(25px,1.78vw,35px)}.price-big{font-size:clamp(34px,3.2vw,58px)}.price-main{font-size:clamp(20px,1.55vw,32px)}#indoSpot{font-size:clamp(25px,2.08vw,41px)!important}.chart-wrap{height:clamp(150px,18.2vh,194px);min-height:150px}.chart-head{margin-bottom:1px}.trend-under-title{font-size:clamp(7.4px,.48vw,9.1px)}.footer{min-height:18px}}


/* v31 1024x768 TV fit mode: compact desktop only, mobile remains unchanged */
@media (min-width:901px) and (max-width:1100px) and (max-height:820px){
  body{overflow:hidden}
  .page{width:100vw;min-height:100vh;max-height:100vh;padding:5px;gap:4px}
  .topbar{grid-template-columns:145px minmax(230px,1fr) 372px 70px;gap:5px;min-height:44px}
  .brand,.ticker,.home-btn{height:44px;border-radius:14px}
  .brand{padding:5px 9px}.brand img{max-height:38px}.ticker-track{gap:34px;font-size:clamp(12px,1.2vw,16px);letter-spacing:.13em}.ticker::before,.ticker::after{width:34px}
  .timebox{height:44px;grid-template-columns:1fr 1fr;gap:5px;min-width:0}.time-pill{padding:5px 7px;border-radius:12px}.time-label{font-size:7px;letter-spacing:.10em}.time-value{font-size:9px;margin-top:1px}.time-zone{font-size:7px;margin-top:1px}.home-btn{font-size:10px;letter-spacing:.05em}
  .top-grid{grid-template-columns:1.05fr .92fr .86fr;gap:5px}.card{padding:6px;border-radius:14px}.card-head{gap:5px;margin-bottom:2px}.label{font-size:8px;letter-spacing:.08em}.city{font-size:7.5px;margin-top:1px}.ny-time{font-size:9px;margin-top:1px}.market-badge{padding:4px 6px;font-size:8px;gap:5px}.market-badge::before{width:7px;height:7px}.status-chip{padding:3px 6px;font-size:7px}.top-status-chip{padding:4px 6px;font-size:7.5px}.currency-badge{padding:4px 6px;font-size:8px}
  .price-big{font-size:clamp(30px,3.0vw,40px);margin-top:2px}.price-main{font-size:clamp(18px,1.7vw,25px);margin:3px 0}.price-sub{font-size:8px;margin-top:2px;letter-spacing:.06em}.price-sub .arrow{font-size:1.35em;margin-left:4px}.small-row{padding-top:4px;margin-top:4px}.subtle{font-size:7.5px}.metric{margin-top:2px;font-size:9px;gap:5px}.metric strong{font-size:11px}.metric .arrow{font-size:1.25em}.fx-card .metric{margin-top:5px;font-size:10px}.fx-card .metric strong{font-size:13px}.fx-card .currency-badge{font-size:8px;padding:4px 6px}.divider{margin:3px 0}
  #indoSpot{font-size:clamp(29px,3.25vw,38px)!important;letter-spacing:.006em!important;line-height:.90!important}.indonesia-card .price-sub{margin-top:3px}.indonesia-card .divider{margin:5px 0 4px}.indonesia-card .retail-rotator{min-height:30px;max-height:30px;margin-top:3px}.indonesia-card .retail-main{font-size:clamp(11px,1.12vw,14px)}.indonesia-card .retail-sub{font-size:7.5px}.primary-badge{font-size:6.5px;padding:1px 5px}
  .grid{gap:5px}.country-card{min-height:84px;padding:6px}.country-title{gap:5px}.country-title h3{font-size:10px;letter-spacing:0}.flag{font-size:18px}.flag.small{font-size:14px}.country-price{font-size:clamp(21px,2.1vw,28px);margin:1px 0;line-height:.92}.country-card .metric{font-size:8.5px;margin-top:2px;gap:5px}.country-card .metric strong{font-size:10.5px}.retail-rotator{min-height:24px;max-height:24px;margin-top:2px}.retail-main{font-size:clamp(10.5px,1.05vw,13px)}.retail-sub{font-size:7.2px;letter-spacing:.035em}.source-note{font-size:7px;margin-top:2px}
  .chart-card{padding:5px}.chart-head{gap:6px;margin-bottom:1px}.chart-title{font-size:12px}.trend-under-title{font-size:7px!important;line-height:1!important;max-height:16px;overflow:hidden}.chart-controls{gap:5px}.select-wrap{gap:4px}select{padding:4px 20px 4px 7px;font-size:8.5px;border-radius:9px;background-position:calc(100% - 12px) 50%,calc(100% - 8px) 50%}.chart-wrap{height:clamp(88px,13.5vh,112px);min-height:88px;border-radius:12px}.trend-row{margin-top:1px}.refresh-foot{font-size:7px}.footer{min-height:14px;font-size:7px}
}


/* v37 precise browser auto-fit fill: no transform/zoom, chart consumes leftover height, mobile remains natural. */
body.auto-fit-active{overflow:hidden!important}
body.auto-fit-active .page{
  width:min(100vw,1920px);
  max-width:100vw;
  min-height:100dvh;
  height:100dvh;
  max-height:100dvh;
  transform:none!important;
  transform-origin:top left;
  will-change:auto;
  overflow:hidden;
}
body.auto-fit-active .chart-card{flex:0 0 auto!important}
body.auto-fit-active .chart-wrap{
  height:var(--auto-chart-height, clamp(96px,14.5vh,170px))!important;
  min-height:var(--auto-chart-height, 82px)!important;
  max-height:var(--auto-chart-height, 190px)!important;
}
body.auto-fit-active .page.auto-fit-ready{transition:none}

@media (min-width:901px){
  body.auto-fit-tight .page{padding:6px!important;gap:5px!important}
  body.auto-fit-tight .topbar{min-height:52px;gap:6px}
  body.auto-fit-tight .brand,body.auto-fit-tight .ticker,body.auto-fit-tight .home-btn{height:52px}
  body.auto-fit-tight .brand img{max-height:43px}
  body.auto-fit-tight .timebox{height:52px;gap:6px}
  body.auto-fit-tight .time-pill{padding:6px 8px}
  body.auto-fit-tight .top-grid,body.auto-fit-tight .grid{gap:6px}
  body.auto-fit-tight .card{padding:7px}
  body.auto-fit-tight .card-head{margin-bottom:3px}
  body.auto-fit-tight .price-big{font-size:clamp(34px,3.25vw,58px)}
  body.auto-fit-tight #indoSpot{font-size:clamp(28px,2.35vw,46px)!important}
  body.auto-fit-tight .price-main{font-size:clamp(20px,1.65vw,34px)}
  body.auto-fit-tight .country-card{min-height:96px}
  body.auto-fit-tight .country-price{font-size:clamp(24px,1.78vw,36px)}
  body.auto-fit-tight .metric{margin-top:3px}
  body.auto-fit-tight .divider{margin:4px 0}
  body.auto-fit-tight .retail-rotator{min-height:27px;max-height:27px;margin-top:3px}
  body.auto-fit-tight .indonesia-card .retail-rotator{min-height:33px;max-height:33px;margin-top:4px}
  body.auto-fit-tight .retail-main{font-size:clamp(12px,.86vw,16px)}
  body.auto-fit-tight .retail-sub{font-size:clamp(7.5px,.50vw,9px)}
  body.auto-fit-tight .chart-card{padding:6px}
  body.auto-fit-tight .chart-head{margin-bottom:1px}
  body.auto-fit-tight .chart-title{font-size:clamp(14px,.92vw,18px)}
  body.auto-fit-tight .trend-under-title{font-size:clamp(7.4px,.46vw,9px)!important;line-height:1.04!important}
  body.auto-fit-tight .trend-row{margin-top:1px}
  body.auto-fit-tight .footer{min-height:16px;font-size:clamp(7px,.48vw,9px)}

  body.auto-fit-ultra .page{padding:4px!important;gap:4px!important}
  body.auto-fit-ultra .topbar{min-height:48px;gap:5px}
  body.auto-fit-ultra .brand,body.auto-fit-ultra .ticker,body.auto-fit-ultra .home-btn{height:48px}
  body.auto-fit-ultra .brand img{max-height:39px}
  body.auto-fit-ultra .timebox{height:48px;gap:5px}
  body.auto-fit-ultra .time-pill{padding:5px 7px}
  body.auto-fit-ultra .top-grid,body.auto-fit-ultra .grid{gap:5px}
  body.auto-fit-ultra .card{padding:6px;border-radius:14px}
  body.auto-fit-ultra .card-head{margin-bottom:2px}
  body.auto-fit-ultra .label{font-size:clamp(8px,.50vw,10px)}
  body.auto-fit-ultra .city{font-size:clamp(7px,.46vw,9px)}
  body.auto-fit-ultra .ny-time{font-size:clamp(8px,.55vw,10px)}
  body.auto-fit-ultra .price-big{font-size:clamp(30px,2.9vw,50px)}
  body.auto-fit-ultra #indoSpot{font-size:clamp(25px,2.12vw,40px)!important}
  body.auto-fit-ultra .price-main{font-size:clamp(18px,1.48vw,30px)}
  body.auto-fit-ultra .price-sub{font-size:clamp(8px,.50vw,10px);margin-top:2px}
  body.auto-fit-ultra .country-card{min-height:88px}
  body.auto-fit-ultra .country-price{font-size:clamp(21px,1.62vw,32px)}
  body.auto-fit-ultra .metric{margin-top:2px;font-size:clamp(8px,.52vw,10px)}
  body.auto-fit-ultra .metric strong{font-size:clamp(10px,.75vw,14px)}
  body.auto-fit-ultra .divider{margin:3px 0}
  body.auto-fit-ultra .retail-rotator{min-height:24px;max-height:24px;margin-top:2px}
  body.auto-fit-ultra .indonesia-card .retail-rotator{min-height:29px;max-height:29px;margin-top:3px}
  body.auto-fit-ultra .retail-main{font-size:clamp(10px,.78vw,14px)}
  body.auto-fit-ultra .retail-sub{font-size:clamp(7px,.45vw,8px)}
  body.auto-fit-ultra .chart-card{padding:5px}
  body.auto-fit-ultra .chart-title{font-size:clamp(12px,.82vw,16px)}
  body.auto-fit-ultra .trend-under-title{font-size:clamp(6.8px,.42vw,8.2px)!important;line-height:1!important}
  body.auto-fit-ultra select{padding-top:4px;padding-bottom:4px;font-size:8px}
  body.auto-fit-ultra .refresh-foot{font-size:7px}
  body.auto-fit-ultra .footer{min-height:14px;font-size:7px}
}

/* v51.1.0 — compact FX lanes for television, desktop, and mobile. */
@media (min-width:901px) and (max-width:1100px){
  .market-context{grid-template-columns:minmax(190px,.7fr) minmax(0,1.3fr);padding:7px 9px;gap:7px 9px}
  .methodology-points{justify-content:flex-start;flex-wrap:wrap;white-space:normal}
  .snapshot-source{grid-column:1/-1;text-align:left;white-space:normal}
}
@media (max-width:900px){
  .market-context{grid-template-columns:1fr;padding:12px;gap:9px}.market-context h1{font-size:25px}.context-kicker{font-size:8px}.market-context-title p{font-size:11px}.methodology-points{justify-content:flex-start;flex-wrap:wrap;white-space:normal}.methodology-points span,.methodology-points a{font-size:9px;min-height:28px;padding:6px 9px}.snapshot-source{grid-column:auto;text-align:left;font-size:9px;white-space:normal}.footer-nav{order:3}
  .fx-bank-grid{gap:8px}
  .fx-bank-cell{padding:8px 9px}
  .fx-bank-cell>span{font-size:8px}
  .fx-bank-cell strong{font-size:13px}
  .fx-meta-line{align-items:flex-start;flex-direction:column;gap:5px}
  .fx-meta-line .source-note{text-align:left;white-space:normal;line-height:1.25}
  .country-idr-row.is-bank .country-idr-value{font-size:12px}
}
@media (min-width:901px) and (max-width:1100px) and (max-height:820px){
  .market-context{grid-template-columns:190px minmax(0,1fr) auto;padding:4px 6px;gap:5px;border-radius:11px}.context-kicker,.market-context-title p{display:none}.market-context h1{font-size:13px}.methodology-points{gap:3px;flex-wrap:nowrap;white-space:nowrap}.methodology-points span,.methodology-points a{min-height:17px;padding:2px 4px;font-size:5.8px}.snapshot-source{grid-column:auto;text-align:right;white-space:nowrap;font-size:5.8px}
  .fx-card .fx-official-row{margin-top:1px;padding:0}
  .fx-card .fx-official-row strong{font-size:11.5px}
  .fx-bank-grid{gap:4px;margin-top:1px}
  .fx-bank-cell{padding:3px 4px;border-radius:8px}
  .fx-bank-cell>span{font-size:6.4px;letter-spacing:.035em}
  .fx-bank-cell strong{font-size:9.2px;margin-top:1px}
  .fx-meta-line{gap:4px;margin-top:3px}
  .fx-meta-line .source-note{font-size:6.2px}
  .country-idr-row.is-bank .country-idr-value{font-size:8.7px!important}
  .country-idr-row>span:first-child{max-width:39%}
  .country-idr-row .country-idr-value{max-width:61%}
}
@media (min-width:901px){
  body.auto-fit-tight .market-context{grid-template-columns:220px minmax(0,1fr) auto;padding:5px 7px;gap:6px}body.auto-fit-tight .context-kicker{display:none}body.auto-fit-tight .market-context h1{font-size:15px}body.auto-fit-tight .market-context-title p{font-size:7px}body.auto-fit-tight .methodology-points{gap:3px;flex-wrap:nowrap;white-space:nowrap}body.auto-fit-tight .methodology-points span,body.auto-fit-tight .methodology-points a{min-height:18px;padding:3px 5px;font-size:6.2px}body.auto-fit-tight .snapshot-source{grid-column:auto;text-align:right;white-space:nowrap;font-size:6px}
  body.auto-fit-ultra .market-context{grid-template-columns:185px minmax(0,1fr) auto;padding:3px 5px;gap:4px}body.auto-fit-ultra .market-context-title p{display:none}body.auto-fit-ultra .market-context h1{font-size:12px}body.auto-fit-ultra .methodology-points span,body.auto-fit-ultra .methodology-points a{min-height:16px;padding:2px 4px;font-size:5.5px}body.auto-fit-ultra .snapshot-source{font-size:5.4px}
  body.auto-fit-tight .fx-bank-grid{gap:5px}
  body.auto-fit-tight .fx-bank-cell{padding:4px 5px}
  body.auto-fit-tight .fx-bank-cell strong{font-size:clamp(9.5px,.68vw,13px)}
  body.auto-fit-tight .fx-meta-line{margin-top:4px}
  body.auto-fit-tight .country-idr-row.is-bank .country-idr-value{font-size:clamp(9px,.61vw,12px)}
  body.auto-fit-ultra .fx-bank-grid{gap:4px}
  body.auto-fit-ultra .fx-bank-cell{padding:3px 4px;border-radius:8px}
  body.auto-fit-ultra .fx-bank-cell>span{font-size:6.2px}
  body.auto-fit-ultra .fx-bank-cell strong{font-size:clamp(8.7px,.61vw,11.5px);margin-top:1px}
  body.auto-fit-ultra .fx-meta-line{gap:4px;margin-top:3px}
  body.auto-fit-ultra .country-idr-row.is-bank .country-idr-value{font-size:clamp(8.4px,.55vw,10.5px)}
}
@media (max-width:420px){
  .country-idr-row.is-bank .country-idr-value{font-size:10.5px}
  .country-idr-row>span:first-child{font-size:9px}
}

/* v51.2.1 — movement pill fit guards; no hidden SEO content and no extra network requests. */
@media (min-width:901px) and (max-width:1200px){
  .gold-move.gold-move-summary{font-size:8px;padding:2px 5px;letter-spacing:.02em}
  .country-card .gold-move.gold-move-summary{font-size:7.2px;padding:2px 4px;margin-left:4px}
}
@media (max-width:900px){
  .price-sub.has-gold-move{flex-wrap:wrap;row-gap:5px}
  .gold-move.gold-move-summary{font-size:10px;padding:3px 7px}
  .country-card .gold-move.gold-move-summary{font-size:9px;padding:3px 6px}
}
@media (min-width:901px) and (max-width:1100px) and (max-height:820px){
  .gold-move{margin-left:4px}
  .gold-move.gold-move-arrow{font-size:1.35em}
  .gold-move.gold-move-summary,.country-card .gold-move.gold-move-summary{font-size:6.6px;padding:2px 4px;letter-spacing:.01em}
}
@media (min-width:901px){
  body.auto-fit-tight .gold-move.gold-move-summary{font-size:clamp(7.2px,.46vw,8.8px);padding:2px 5px}
  body.auto-fit-ultra .gold-move{margin-left:4px}
  body.auto-fit-ultra .gold-move.gold-move-summary{font-size:clamp(6.5px,.42vw,8px);padding:2px 4px;letter-spacing:.01em}
}