:root{--vl-view-max:1200px}
html[data-vlite-view="mobile"]{--vl-view-max:430px}
html[data-vlite-view="web"]{--vl-view-max:1200px}

/* Selector tampilan global. */
.vlite-view-switch{
  position:fixed;right:max(12px,env(safe-area-inset-right));bottom:max(96px,calc(96px + env(safe-area-inset-bottom)));
  z-index:10020;display:grid;grid-template-columns:1fr 1fr;width:178px;padding:4px;gap:3px;
  border:1px solid #cfdee8;border-radius:15px;background:rgba(255,255,255,.96);
  box-shadow:0 10px 28px rgba(15,51,75,.18);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)
}
.vlite-view-switch button{min-height:38px;padding:7px 9px;border:0;border-radius:11px;background:transparent;color:#607487;font:800 12px/1 Inter,system-ui,sans-serif;cursor:pointer}
.vlite-view-switch button[aria-pressed="true"]{background:#126fa7;color:#fff;box-shadow:0 4px 12px rgba(18,111,167,.22)}
.vlite-view-switch button:focus-visible{outline:3px solid rgba(18,111,167,.25);outline-offset:2px}

/* Canvas yang sama dipakai oleh seluruh modul. */
html[data-vlite-view] body>section[data-vmodule]{
  width:min(100%,var(--vl-view-max))!important;
  max-width:var(--vl-view-max)!important;
  min-height:100dvh;
  margin-inline:auto!important;
}
html[data-vlite-view] body>section[data-vmodule]>[data-vview]{width:100%!important;max-width:100%!important;margin-inline:auto!important}
html[data-vlite-view] body>section[data-vmodule]>.app,
html[data-vlite-view] body>section[data-vmodule]>.wrap,
html[data-vlite-view] body>section[data-vmodule]>.page,
html[data-vlite-view] body>section[data-vmodule]>.shell,
html[data-vlite-view] body>section[data-vmodule]>.container,
html[data-vlite-view] body>section[data-vmodule]>.phone,
html[data-vlite-view] body>section[data-vmodule]>.phone-shell,
html[data-vlite-view] body>section[data-vmodule]>.app-shell,
html[data-vlite-view] body>.shell{width:min(100%,var(--vl-view-max))!important;max-width:var(--vl-view-max)!important;margin-inline:auto!important}

html[data-vlite-view="mobile"] body{min-width:320px!important;overflow-x:hidden!important}
html[data-vlite-view="mobile"] body>section[data-vmodule]{border-inline:0!important;box-shadow:none!important}
html[data-vlite-view="mobile"] body>section[data-vmodule]>.app,
html[data-vlite-view="mobile"] body>section[data-vmodule]>.wrap,
html[data-vlite-view="mobile"] body>section[data-vmodule]>.page,
html[data-vlite-view="mobile"] body>section[data-vmodule]>.shell,
html[data-vlite-view="mobile"] body>section[data-vmodule]>.container,
html[data-vlite-view="mobile"] body>section[data-vmodule]>.phone,
html[data-vlite-view="mobile"] body>section[data-vmodule]>.phone-shell,
html[data-vlite-view="mobile"] body>section[data-vmodule]>.app-shell,
html[data-vlite-view="mobile"] body>.shell{border-inline:0!important;border-radius:0!important;box-shadow:none!important}
html[data-vlite-view="mobile"] .income-page-tabs,
html[data-vlite-view="mobile"] .tabs{gap:5px!important;padding:6px!important}
html[data-vlite-view="mobile"] .income-page-tabs a,
html[data-vlite-view="mobile"] .tabs a{min-height:42px!important;padding:8px 6px!important;font-size:12px!important;white-space:normal!important}

/* Mode Mobile juga dapat dipratinjau dari PC. */
html[data-vlite-view="mobile"] body.vlite-login-page{display:block!important;padding:0!important}
html[data-vlite-view="mobile"] body.vlite-login-page>.shell{display:block!important;min-height:100dvh!important}
html[data-vlite-view="mobile"] body.vlite-login-page .hero{min-height:310px!important;padding:36px 28px!important;border-radius:0 0 36px 36px!important}
html[data-vlite-view="mobile"] body.vlite-login-page .hero h1{margin-top:58px!important;font-size:30px!important}
html[data-vlite-view="mobile"] body.vlite-login-page .hero p{font-size:14px!important}
html[data-vlite-view="mobile"] body.vlite-login-page .card{width:auto!important;max-width:none!important;margin:-36px 16px 0!important;padding:22px!important}
html[data-vlite-view="mobile"] body.vlite-login-page .foot{margin:22px 0 110px!important}

html[data-vlite-view="mobile"] body.vlite-payment-page>.shell{padding:12px!important}
html[data-vlite-view="mobile"] body.vlite-payment-page .top{min-height:64px!important;margin:-12px -12px 14px!important;padding:0 8px!important;grid-template-columns:46px minmax(0,1fr) 46px!important}
html[data-vlite-view="mobile"] body.vlite-payment-page .top .back,
html[data-vlite-view="mobile"] body.vlite-payment-page .top .refresh{width:44px!important;height:44px!important;min-height:44px!important;border-radius:13px!important}
html[data-vlite-view="mobile"] body.vlite-payment-page .top .title h1{font-size:18px!important}
html[data-vlite-view="mobile"] body.vlite-payment-page .global-period{grid-template-columns:84px minmax(0,1fr) 84px!important;margin:14px 0!important;padding:6px!important;border-radius:18px!important}
html[data-vlite-view="mobile"] body.vlite-payment-page .global-period button{min-height:52px!important;padding:7px 4px!important;font-size:11px!important}
html[data-vlite-view="mobile"] body.vlite-payment-page .filters,
html[data-vlite-view="mobile"] body.vlite-payment-page .summary{grid-template-columns:1fr!important}
html[data-vlite-view="mobile"] body.vlite-payment-page .filters input[type=search]{grid-column:auto!important}
html[data-vlite-view="mobile"] body.vlite-payment-page .table-wrap{max-width:100%;overflow:auto}

@media(max-width:760px){
  .vlite-view-switch{right:max(8px,env(safe-area-inset-right));bottom:max(82px,calc(82px + env(safe-area-inset-bottom)));width:160px;padding:3px;border-radius:13px}
  .vlite-view-switch button{min-height:36px;padding:6px;font-size:11px}
}
@media(min-width:761px){
  html[data-vlite-view="web"] body>section[data-vmodule],html[data-vlite-view="web"] body>.shell{border-inline:1px solid rgba(220,232,241,.9);box-shadow:0 16px 42px rgba(12,49,84,.08)}
  html[data-vlite-view="mobile"] .vlite-view-switch{right:calc(50% - 203px)}
}