/* Phone layout (screens up to 600px wide). Computers and tablets are not affected.
   Goal: more of your own numbers on screen, smaller controls, same look and colours. */
@media (max-width:600px){
 /* Settings bar: one slim row (no date), scrolls sideways if it needs to */
 .util-in{flex-wrap:nowrap;justify-content:flex-start;gap:2px;padding:3px 8px;font-size:12px;overflow-x:auto;scrollbar-width:none}
 .util-in::-webkit-scrollbar{display:none}
 .util-date{display:none}
 .util-ctrls{flex-wrap:nowrap;gap:2px;margin-inline:auto}
 .util-sel{height:30px;padding:0 2px 0 4px;gap:2px}
 .util-sel>svg,.util-sel>i{display:none}
 .util-sel .pk-btn{font-size:12px;max-width:78px;padding:2px}
 .util-sel .pk-btn svg{width:11px;height:11px}
 .util-btn{height:30px;padding:0 6px;margin-inline-end:0;border:0}
 .util-btn svg{width:14px;height:14px}
 .util-theme{padding:2px;margin-inline-start:2px}
 .util-theme button{width:24px;height:24px}

 /* Top bar */
 .topbar{top:6px;margin-top:6px;padding:0 10px}
 .nav{padding:5px 5px 5px 14px;gap:4px}
 .logo svg{width:26px;height:26px}
 .wordmark{font-size:18px}
 .icon-btn{width:36px;height:36px}
 .icon-btn svg{width:18px;height:18px}
 .avatar span{width:34px;height:34px;font-size:13px}
 .nav .btn-sm{min-height:36px;padding:0 14px;font-size:14px}

 /* Pages */
 .shell{padding:0 14px}
 .app{padding-top:14px!important}
 .page-head,.td-head{margin-bottom:12px;gap:10px}
 body[data-view="app"] .page-head h1,body[data-view="app"] .td-head h1{font-size:28px;letter-spacing:-.025em}
 .page-head p,.td-head p{font-size:14px;margin-top:4px}
 body[data-view="app"] .card h2,body[data-view="app"] .b2-card h2{font-size:19px}

 /* Cards */
 .card,.b2-card{padding:16px;border-radius:20px}
 .b2-hero{padding:18px;border-radius:22px}
 .b2-big,.td .b2-big{font-size:clamp(38px,11vw,48px);margin-top:6px}
 .b2-io b{font-size:16px}
 .b2-row{padding:9px 10px}
 .b2-amt{font-size:15px}
 .head-total .v{font-size:24px}
 .kpi2 .v{font-size:20px}
 .bigbal{font-size:22px}
 .hand{font-size:clamp(32px,10vw,40px)}
 .trial-big{font-size:30px}
 .b2-grid,.td .b2-grid{gap:12px}

 /* Buttons and fields: still easy to tap (44px), just less bulky */
 .btn{min-height:42px;padding:0 16px;font-size:14.5px}
 .btn-lg{min-height:46px;padding:0 20px;font-size:15px}
 .input{min-height:44px;font-size:16px;border-radius:12px}
 select.input{padding-inline:12px}
 .chip-r span,.chip{font-size:13px}

 /* Month switcher on Budget */
 .stepper .icon-btn{width:38px;height:38px}
 .stepper .months,.app-head h1{font-size:26px}

 /* Bottom tabs: slimmer bar, smaller icons and labels */
 body[data-view="app"] .subnav-wrap{padding:0 6px calc(6px + env(safe-area-inset-bottom))}
 .subnav{padding:4px;border-radius:20px}
 .subnav a{gap:2px;padding:6px 1px;font-size:10px;border-radius:14px}
 .subnav a svg{width:19px;height:19px}
 body[data-view="app"] main{padding-bottom:84px}
}