/* Mobile presentation only. Data, chart interaction and flow paths stay unchanged. */
.utility-icon{width:22px;height:22px;flex:none;}
.utility-label{display:none;}
.mobile-stat-bar{display:none;}

@media(max-width:700px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-bottom:100px;}
  html body.ui-refined{--ui-section-gap:20px;--mobile-line:rgba(168,205,222,.18);}
  /* Category colors identify the source; battery risk colors remain data-driven. */
  html body.ui-refined :is(.battery-current-card,.battery-runtime-card,.mobile-flow-battery,[data-energy="battery"]){
    --energy-accent:#82eab6;--energy-surface:#123b32;--energy-border:#357c61;
  }
  html body.ui-refined :is(.solar-today-card,.mobile-flow-solar,[data-energy="solar"]){
    --energy-accent:#ffdb70;--energy-surface:#38321c;--energy-border:#8b7638;
  }
  html body.ui-refined :is(.bill-cycle-card,.mobile-flow-grid,[data-energy="grid"]){
    --energy-accent:#d0adff;--energy-surface:#302343;--energy-border:#755799;
  }
  html body.ui-refined :is(.consumption-card,.mobile-flow-home,[data-energy="home"]){
    --energy-accent:#8fd8ff;--energy-surface:#143650;--energy-border:#416f95;
  }
  html body.ui-refined [data-energy="time"]{
    --energy-accent:#d8e5ef;--energy-surface:#102633;--energy-border:#3b5362;
  }
  html body.ui-refined .app{
    padding:calc(20px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(86px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px)) !important;
  }
  html body.ui-refined .shell{min-width:0 !important;}
  html body.ui-refined .premium-hero{
    grid-template-columns:minmax(0,1fr) 112px !important;
    gap:10px !important;min-height:116px !important;margin-bottom:24px !important;align-items:start !important;
  }
  html body.ui-refined .hero-copy{transform:none !important;align-self:start !important;}
  html body.ui-refined .hero-copy h1{font-size:30px !important;line-height:1.1 !important;}
  html body.ui-refined .hero-copy p{margin:10px 0 0 !important;max-width:none !important;white-space:normal !important;line-height:1.6 !important;}
  html body.ui-refined .premium-hero .hero-weather-card{
    display:grid !important;grid-template-columns:36px minmax(0,1fr) !important;grid-template-rows:44px auto auto !important;
    width:112px !important;max-width:112px !important;height:auto !important;min-height:116px !important;
    padding:10px !important;margin:0 !important;gap:4px !important;border-radius:12px !important;
    align-content:center !important;align-items:center !important;justify-items:center !important;align-self:start !important;
    background:rgba(13,46,66,.82) !important;border:1px solid rgba(135,191,216,.3) !important;
    box-shadow:none !important;overflow:visible !important;
  }
  html body.ui-refined .premium-hero .hero-weather-card::after{content:none !important;}
  html body.ui-refined .premium-hero .hero-weather-card .hero-weather-metrics{display:contents !important;}
  html body.ui-refined .premium-hero .hero-weather-card :is(.moon-visual,.hero-weather-temp,.hero-weather-text,.hero-weather-sub){
    position:static !important;inset:auto !important;transform:none !important;margin:0 !important;
    min-width:0 !important;max-width:100% !important;text-align:center !important;
  }
  html body.ui-refined .premium-hero .hero-weather-card .moon-visual{
    grid-column:1 !important;grid-row:1 !important;width:36px !important;height:36px !important;
    background-size:contain !important;filter:none !important;
  }
  html body.ui-refined .premium-hero .hero-weather-card .hero-weather-temp{
    grid-column:2 !important;grid-row:1 !important;font-size:29px !important;height:44px !important;line-height:44px !important;align-self:center !important;font-weight:750 !important;white-space:nowrap !important;
  }
  html body.ui-refined .premium-hero .hero-weather-card .hero-weather-text{
    display:block !important;justify-self:center !important;width:100% !important;
    grid-column:1 / -1 !important;grid-row:2 !important;font-size:12px !important;line-height:1.5 !important;font-weight:600 !important;white-space:normal !important;
  }
  html body.ui-refined .premium-hero .hero-weather-card .hero-weather-sub{
    display:block !important;justify-self:center !important;grid-column:1 / -1 !important;grid-row:3 !important;width:100% !important;
    border-top:1px solid var(--mobile-line) !important;padding:6px 0 0 !important;
    font-size:10px !important;line-height:1.5 !important;font-weight:500 !important;white-space:nowrap !important;color:#b6d0df !important;
  }

  /* An unframed overview gives the four measurements room without a second border. */
  html body.ui-refined .overview-card{
    padding:0 !important;border:0 !important;border-radius:0 !important;
    background:none !important;box-shadow:none !important;overflow:visible !important;
  }
  html body.ui-refined .overview-card::before,
  html body.ui-refined .overview-card::after{content:none !important;}
  html body.ui-refined .shell .overview-card .overview-main-4{gap:12px !important;}
  html body.ui-refined .shell .overview-card .overview-main-4 > :is(.overview-battery,.overview-runtime){
    position:relative !important;display:grid !important;grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:26px 48px minmax(18px,auto) !important;grid-template-areas:none !important;
    justify-items:start !important;align-content:start !important;align-items:center !important;
    padding:16px !important;gap:6px !important;min-height:144px !important;
    border:1px solid var(--energy-border) !important;border-radius:12px !important;
    background:var(--energy-surface) !important;box-shadow:none !important;
    text-align:left !important;overflow:hidden !important;
  }
  html body.ui-refined .shell .overview-card .overview-main-4 > :is(.overview-battery,.overview-runtime)::before,
  html body.ui-refined .shell .overview-card .overview-main-4 > :is(.overview-battery,.overview-runtime)::after{content:none !important;}
  html body.ui-refined .shell .overview-card .overview-main-4 > :is(.overview-battery,.overview-runtime) > *{
    position:static !important;grid-area:auto !important;grid-column:1 !important;
    margin:0 !important;padding:0 !important;transform:none !important;min-width:0 !important;
    width:100% !important;max-width:100% !important;text-align:left !important;
  }
  html body.ui-refined .shell .overview-card .overview-main-4 > :is(.overview-battery,.overview-runtime) .overview-icon{
    position:absolute !important;inset:14px 10px auto auto !important;
    width:28px !important;height:28px !important;min-height:0 !important;
    background:none !important;border:none !important;box-shadow:none !important;
  }
  html body.ui-refined .shell .overview-card .overview-main-4 .overview-icon::before,
  html body.ui-refined .shell .overview-card .overview-main-4 .overview-icon::after{content:none !important;}
  html body.ui-refined .shell .overview-card .overview-main-4 > :is(.overview-battery,.overview-runtime) .overview-label{
    grid-row:1 !important;font-size:12px !important;line-height:1.5 !important;
    font-weight:600 !important;padding-right:20px !important;color:var(--energy-accent) !important;
  }
  html body.ui-refined .shell .overview-card .overview-main-4 > :is(.overview-battery,.overview-runtime) :is(.overview-soc,.overview-runtime-value){
    grid-row:2 !important;align-self:center !important;height:auto !important;
    font-size:34px !important;line-height:1.2 !important;font-weight:750 !important;
    font-variant-numeric:tabular-nums;white-space:nowrap !important;text-shadow:none !important;
  }
  html body.ui-refined .shell .overview-card .overview-main-4 > :is(.overview-battery,.overview-runtime) .overview-sub{
    grid-row:3 !important;font-size:12px !important;line-height:1.6 !important;
    white-space:normal !important;color:#acbfce !important;
  }
  html body.ui-refined .shell .overview-card .overview-main-4 > :is(.solar-today-card,.bill-cycle-card){
    grid-template-rows:26px minmax(42px,auto) auto !important;min-height:172px !important;
  }
  html body.ui-refined .shell .overview-card .overview-main-4 .battery-runtime-card{--energy-surface:#102e2b;}
  html body.ui-refined .shell .overview-card .overview-main-4 .battery-runtime-card .overview-runtime-value{color:#c2f4db !important;}
  html body.ui-refined .shell .overview-card .overview-main-4 > :is(.solar-today-card,.bill-cycle-card) :is(#todaySolar,#billCycleCost){
    font-size:28px !important;gap:3px 5px !important;flex-wrap:wrap !important;color:var(--energy-accent) !important;
  }
  html body.ui-refined .shell .overview-card .overview-main-4 :is(#todaySolar,#billCycleCost) .metric-unit{font-size:11px !important;color:var(--energy-accent) !important;}
  html body.ui-refined .shell .overview-card .overview-main-4 .bill-cycle-detail{grid-row:auto !important;font-size:10px !important;line-height:1.65 !important;color:#acbfce !important;}

  /* Reuse the existing SOC, reserve and 12-hour runtime CSS values. */
  html body.ui-refined .shell .overview-card .overview-main-4 > :is(.battery-current-card,.battery-runtime-card){
    grid-template-rows:26px 48px minmax(18px,auto) 6px !important;min-height:160px !important;
  }
  html body.ui-refined .shell .overview-card .overview-main-4 .mobile-stat-bar{
    display:block !important;position:relative !important;grid-row:4 !important;height:6px !important;
    align-self:end !important;background:rgba(0,12,14,.45);border-radius:3px;overflow:visible;
  }
  html body.ui-refined .mobile-stat-bar > span{
    display:block;height:100%;border-radius:inherit;box-shadow:none;animation:none;transition:none;
  }
  html body.ui-refined .battery-stat-bar > span{width:var(--battery-fill,0%);background:var(--battery-status-color,#82eab6);}
  html body.ui-refined .runtime-stat-bar > span{width:var(--runtime-fill,0%);background:#c2f4db;}
  html body.ui-refined .battery-stat-bar::after{
    content:"";position:absolute;left:clamp(0%,var(--battery-reserve,20%),100%);top:-2px;
    width:2px;height:10px;background:#e1eee7;transform:translateX(-50%);border-radius:1px;
  }

  html body.ui-refined #mobileFlowDiagram.mobile-flow-diagram{
    left:auto !important;width:100% !important;max-width:100% !important;
    transform:none !important;margin:16px 0 0 !important;
    border:0 !important;background:none !important;box-shadow:none !important;
  }
  html body.ui-refined #mobileFlowDiagram .mobile-flow-title{
    font-size:18px !important;line-height:1.5 !important;text-shadow:none !important;
    max-width:100% !important;white-space:normal !important;
  }
  html body.ui-refined #mobileFlowDiagram .mobile-flow-title::before,
  html body.ui-refined #mobileFlowDiagram .mobile-flow-title::after,
  html body.ui-refined #mobileFlowDiagram .mobile-flow-node::before{content:none !important;}
  html body.ui-refined #mobileFlowDiagram .mobile-flow-node{
    padding:10px 12px !important;gap:2px !important;grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:20px 40px minmax(20px,1fr) !important;align-content:start !important;align-items:center !important;
    border:1px solid var(--energy-border) !important;border-radius:8px !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07) !important;
    background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(0,0,0,.18)),var(--energy-surface) !important;
  }
  html body.ui-refined #mobileFlowDiagram .mobile-node-copy{display:contents !important;}
  html body.ui-refined #mobileFlowDiagram .mobile-node-icon{
    position:absolute !important;inset:10px 10px auto auto !important;
    width:24px !important;height:24px !important;min-width:0 !important;min-height:0 !important;
    margin:0 !important;transform:none !important;border:0 !important;background:none !important;box-shadow:none !important;
  }
  html body.ui-refined #mobileFlowDiagram .mobile-node-icon img{width:100% !important;height:100% !important;}
  html body.ui-refined #mobileFlowDiagram .mobile-node-label{
    grid-column:1 !important;grid-row:1 !important;padding-right:24px !important;width:100% !important;box-sizing:border-box;text-align:left !important;
    font-size:13px !important;line-height:1.5 !important;font-weight:600 !important;color:var(--energy-accent) !important;
  }
  html body.ui-refined #mobileFlowDiagram .mobile-flow-node strong{
    grid-column:1 !important;grid-row:2 !important;font-size:28px !important;height:40px !important;line-height:40px !important;
    font-weight:750 !important;gap:5px !important;font-variant-numeric:tabular-nums;
  }
  html body.ui-refined #mobileFlowDiagram .mobile-flow-node .mobile-power-number{font-size:inherit !important;line-height:inherit !important;}
  html body.ui-refined #mobileFlowDiagram .mobile-flow-node .mobile-power-unit{font-size:11px !important;line-height:18px !important;font-weight:550 !important;color:#c2d4df !important;}
  html body.ui-refined #mobileFlowDiagram .mobile-node-status{
    display:block !important;grid-column:1 !important;grid-row:3 !important;align-self:end !important;width:100% !important;
    border:0 !important;border-top:1px solid rgba(188,214,224,.16) !important;border-radius:0 !important;
    padding:5px 0 0 !important;background:none !important;box-shadow:none !important;
    font-size:11px !important;font-weight:550 !important;line-height:1.5 !important;color:#c2d4df !important;text-align:left !important;
  }
  html body.ui-refined #mobileFlowDiagram .mobile-circuit-lines use{stroke-width:2px !important;filter:none !important;}
  html body.ui-refined #mobileFlowDiagram .mobile-flow-dot{r:4px !important;filter:none !important;}

  html body.ui-refined :is(.ai-card,.battery-plan-card,.power-profile-card,.settings-panel.scheduler-card){
    border:0 !important;border-top:1px solid var(--mobile-line) !important;border-radius:0 !important;
    padding:24px 0 !important;background:transparent !important;box-shadow:none !important;
  }
  html body.ui-refined :is(.ai-card,.battery-plan-card,.power-profile-card,.settings-panel.scheduler-card)::before,
  html body.ui-refined :is(.ai-card,.battery-plan-card,.power-profile-card,.settings-panel.scheduler-card)::after{content:none !important;}
  html body.ui-refined .ai-title{font-size:20px !important;}
  html body.ui-refined .ai-card-head{gap:12px !important;align-items:center !important;}
  html body.ui-refined .ai-text{font-size:13px !important;line-height:1.85 !important;margin-top:14px !important;}
  html body.ui-refined .speech-btn{padding:8px 12px !important;border-radius:8px !important;min-height:44px !important;box-shadow:none !important;flex-shrink:0;}
  html body.ui-refined .ai-action{padding:10px 12px !important;border-radius:8px !important;box-shadow:none !important;}
  html body.ui-refined .battery-plan-card{gap:16px !important;}
  html body.ui-refined .battery-plan-card .battery-plan-label{color:#82eab6 !important;}
  html body.ui-refined .battery-plan-title{font-size:27px !important;line-height:1.4 !important;margin-top:10px !important;}
  html body.ui-refined .battery-plan-subtitle{font-size:12px !important;line-height:1.75 !important;}
  html body.ui-refined .battery-plan-chip{box-shadow:none !important;font-size:11px !important;min-height:28px !important;}
  html body.ui-refined :is(.battery-plan-recommend,.battery-plan-progress,.battery-plan-solar-row,.battery-plan-metrics){
    background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;
    margin:0 !important;padding:0 !important;min-height:0 !important;
  }
  html body.ui-refined .battery-plan-recommend .recommend-title{font-size:18px !important;}
  html body.ui-refined .battery-plan-recommend p{margin:6px 0 14px !important;font-size:12px !important;line-height:1.8 !important;}
  html body.ui-refined .battery-plan-progress-labels{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:8px !important;font-size:11px !important;}
  html body.ui-refined .battery-plan-progress-labels > span{display:flex;flex-wrap:wrap;gap:3px 5px;}
  html body.ui-refined .battery-plan-bar{height:6px !important;margin-top:10px !important;box-shadow:none !important;}
  html body.ui-refined .battery-plan-solar-row{font-size:14px !important;color:#c0d0dd !important;}
  html body.ui-refined .battery-plan-metrics{border-top:1px solid var(--mobile-line) !important;}
  html body.ui-refined .battery-plan-metrics > div{padding:12px 8px !important;}
  html body.ui-refined .battery-plan-metrics strong{font-size:25px !important;line-height:1.3 !important;}
  html body.ui-refined .consumption-card{
    padding:20px !important;border-radius:12px !important;background:var(--energy-surface) !important;
    box-shadow:none !important;border:1px solid var(--energy-border) !important;
  }
  html body.ui-refined .consumption-card :is(.insight-label,.insight-value){color:var(--energy-accent) !important;}
  html body.ui-refined .consumption-card::before{content:none !important;}
  html body.ui-refined .consumption-card .insight-value{font-size:36px !important;line-height:1.4 !important;display:flex;flex-wrap:wrap;gap:0 6px;}
  html body.ui-refined .consumption-card .consumption-card-icon{width:42px !important;height:42px !important;box-shadow:none !important;}
  html body.ui-refined .consumption-card .consumption-value-grid{gap:0 !important;margin:16px 0 0 !important;}
  html body.ui-refined .consumption-card .consumption-value-grid div{
    border:0 !important;border-top:1px solid var(--mobile-line) !important;border-radius:0 !important;
    background:none !important;box-shadow:none !important;min-height:48px !important;font-size:14px !important;
  }
  html body.ui-refined .consumption-card .bill-forecast-card{
    background:rgba(1,16,28,.3) !important;border:0 !important;border-radius:8px !important;
    padding:14px 12px !important;box-shadow:none !important;
  }
  html body.ui-refined .consumption-card #solarTodayValue{color:#ffdb70 !important;}
  html body.ui-refined .consumption-card .bill-forecast-card strong{font-size:26px !important;color:#d0adff !important;}
  html body.ui-refined .consumption-card .consumption-meter{margin-top:16px !important;}
  html body.ui-refined .consumption-meter-track{height:4px !important;box-shadow:none !important;}
  html body.ui-refined .power-profile-card{gap:16px !important;}
  html body.ui-refined .power-profile-head h2{font-size:23px !important;line-height:1.5 !important;margin-top:8px !important;}
  html body.ui-refined .power-profile-legend{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important;}
  html body.ui-refined .power-profile-legend div{
    padding:10px 12px !important;min-height:66px !important;border-radius:8px !important;
    background:var(--energy-surface) !important;border:1px solid var(--energy-border) !important;box-shadow:none !important;
  }
  html body.ui-refined .power-profile-legend strong{font-size:19px !important;color:var(--energy-accent) !important;}
  html body.ui-refined .power-profile-legend .legend-dot{background:var(--energy-accent) !important;box-shadow:none !important;}
  html body.ui-refined .power-profile-legend .legend-dot.soc{background:transparent !important;border:2px solid var(--energy-accent);box-sizing:border-box;}
  html body.ui-refined .power-profile-plot{border-radius:0 !important;background:rgba(4,20,31,.7) !important;box-shadow:none !important;}
  html body.ui-refined .production-line{stroke:#ffdb70;}
  html body.ui-refined .consumption-line{stroke:#8fd8ff;}
  html body.ui-refined .grid-profile-line{stroke:#d0adff;}
  html body.ui-refined .battery-profile-line{stroke:#82eab6;}
  html body.ui-refined .soc-profile-line{stroke:#c2f4db;stroke-dasharray:5 4;}
  html body.ui-refined #profileConsumptionFill stop:first-child{stop-color:rgba(143,216,255,.2);}
  html body.ui-refined #profileConsumptionFill stop:last-child{stop-color:rgba(143,216,255,0);}
  html body.ui-refined .scheduler-head{text-align:left !important;justify-content:flex-start !important;margin-bottom:14px !important;}
  html body.ui-refined .scheduler-head span{font-size:22px !important;}
  html body.ui-refined .scheduler-field > span{font-size:12px !important;}
  html body.ui-refined .scheduler-field input{
    display:block !important;width:100% !important;max-width:100% !important;min-width:0 !important;
    box-sizing:border-box !important;min-height:56px !important;font-size:28px !important;
    background:#0a2334 !important;border:1px solid #6d8d9f !important;border-radius:8px !important;
    -webkit-appearance:none;appearance:none;
  }
  html body.ui-refined footer{padding:0 !important;margin-top:0 !important;font-size:10px !important;}

  /* Opaque safe-area toolbar: no blur layer and no floating controls over the data. */
  html body.ui-refined .page-utilities{
    position:fixed;inset:auto 0 0 !important;display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0 !important;align-items:center !important;
    padding:6px max(16px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
    background:#091e2b;border-top:1px solid var(--mobile-line);box-shadow:none;
  }
  html body.ui-refined .page-utility-button{
    display:flex !important;flex-direction:column;justify-content:center;gap:3px;
    width:100% !important;min-width:44px !important;height:50px !important;min-height:50px !important;
    margin:0;padding:4px !important;border:0 !important;border-radius:8px;
    color:#c0d0dd;background:transparent !important;box-shadow:none !important;transform:none !important;
  }
  html body.ui-refined .page-utility-button[hidden]{display:none !important;}
  html body.ui-refined .page-utility-button:focus-visible{outline:2px solid #a4ddf1;outline-offset:-2px;}
  html body.ui-refined .utility-label{display:block;font:550 10px/1.4 "Noto Sans Thai",sans-serif;letter-spacing:0;}
  html body.ui-refined .utility-icon{width:21px;height:21px;}
  html body.ui-refined .notification-button{order:1;grid-column:1;grid-row:1;}
  html body.ui-refined .notification-button.is-active{color:#78e7b3;}
  html body.ui-refined .page-refresh-button{order:2;grid-column:2;grid-row:1;}
  html body.ui-refined .back-to-top-button{order:3;grid-column:3;grid-row:1;visibility:visible;opacity:.3;}
  html body.ui-refined .back-to-top-button.is-visible{opacity:1;pointer-events:auto;}
}

@media(max-width:360px){
  html body.ui-refined .app{padding-left:max(12px,env(safe-area-inset-left,0px)) !important;padding-right:max(12px,env(safe-area-inset-right,0px)) !important;}
  html body.ui-refined .premium-hero{grid-template-columns:minmax(0,1fr) 100px !important;}
  html body.ui-refined .hero-copy h1{font-size:27px !important;}
  html body.ui-refined .premium-hero .hero-weather-card{width:100px !important;max-width:100px !important;padding:8px !important;grid-template-columns:30px minmax(0,1fr) !important;}
  html body.ui-refined .premium-hero .hero-weather-card .moon-visual{width:30px !important;height:30px !important;}
  html body.ui-refined .premium-hero .hero-weather-card .hero-weather-temp{font-size:26px !important;}
  html body.ui-refined .shell .overview-card .overview-main-4{gap:8px !important;}
  html body.ui-refined .shell .overview-card .overview-main-4 > :is(.overview-battery,.overview-runtime){padding:12px !important;}
  html body.ui-refined .shell .overview-card .overview-main-4 > :is(.overview-battery,.overview-runtime) :is(.overview-label,.overview-sub){font-size:11px !important;}
  html body.ui-refined .shell .overview-card .overview-main-4 > :is(.overview-battery,.overview-runtime) :is(.overview-soc,.overview-runtime-value){font-size:30px !important;}
  html body.ui-refined .shell .overview-card .overview-main-4 > :is(.solar-today-card,.bill-cycle-card) :is(#todaySolar,#billCycleCost){font-size:24px !important;}
  html body.ui-refined .shell .overview-card .overview-main-4 .overview-icon{opacity:.6;}
  html body.ui-refined #mobileFlowDiagram .mobile-flow-node{padding:10px !important;}
  html body.ui-refined #mobileFlowDiagram .mobile-node-icon{width:20px !important;height:20px !important;inset:10px 8px auto auto !important;}
  html body.ui-refined #mobileFlowDiagram .mobile-node-label{font-size:12px !important;}
  html body.ui-refined #mobileFlowDiagram .mobile-flow-node strong{font-size:24px !important;gap:3px !important;}
  html body.ui-refined .power-profile-head h2{font-size:21px !important;}
  html body.ui-refined .consumption-card{padding:16px !important;}
  html body.ui-refined .consumption-card .bill-forecast-card strong{font-size:22px !important;}
  html body.ui-refined .consumption-card .consumption-value-grid div{font-size:13px !important;}
}

/* Back-to-top is enabled by the existing controller only through 640px. */
@media(min-width:641px) and (max-width:700px){
  html body.ui-refined .page-utilities{grid-template-columns:repeat(2,minmax(0,1fr));}
  html body.ui-refined .back-to-top-button{display:none !important;}
}

@media(min-width:701px) and (max-width:1000px) and (orientation:landscape){
  html body.ui-refined .app{
    padding-left:max(24px,env(safe-area-inset-left,0px)) !important;
    padding-right:max(24px,env(safe-area-inset-right,0px)) !important;
    padding-bottom:calc(32px + env(safe-area-inset-bottom,0px)) !important;
  }
}