/* Shared compact geometry; no scaling/zoom/hidden overflow. */
.mobile-account-icon svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mobile-account-icon,.mobile-logout,.mobile-cell-label{display:none}
.mobile-cell-value{min-width:0}
.mobile-order-more{margin:0;border:0}
.mobile-order-more>summary{display:none}
.mobile-order-options{display:flex;flex-wrap:wrap;gap:10px}
@media(max-width:600px){
 :root{--body-size:16px;--label-size:15px;--meta-size:14px}
 html{scroll-padding-block:80px 100px}
 body{font-size:16px;line-height:1.8}
 :root[data-theme] body:not(.gateway-view)>header{position:relative;display:flex!important;flex-direction:row;flex-wrap:nowrap!important;align-items:center;justify-content:flex-start;gap:8px!important;padding:8px 16px!important;min-height:64px!important;border-bottom:1px solid var(--ui-line)}
 :root[data-theme] body>header .brand{gap:5px;margin-inline-end:auto;min-width:0;flex:0 1 auto;grid-area:auto}
 :root[data-theme] body>header .brand-symbol{width:48px;height:32px;flex:0 0 48px}
 :root[data-theme] body>header .brand-name{font-size:23px;line-height:1.2;white-space:nowrap}
 :root[data-theme] body>header .header-account-actions{display:contents!important}
 :root[data-theme] body>header .header-account-actions>.button{width:44px;height:44px;min-width:44px;min-height:44px;flex:0 0 44px;padding:10px;border-radius:12px}
 .account-link-text{display:none}
 .mobile-account-icon{display:block}
 :root[data-theme] body>header #logout-button{display:none!important}
 :root[data-theme] body>header .header-account-actions>.button{order:3}
 :root[data-theme] body>header .header-mobile-toggle{display:grid!important;place-items:center;order:4;padding:8px;width:44px;height:44px;min-width:44px;font-size:20px;flex:0 0 44px;margin:0;grid-area:auto}
 :root[data-theme] body>header nav{display:none!important;position:absolute;inset-inline:12px;top:calc(100% + 4px);padding:8px;border:1px solid var(--ui-line);border-radius:16px;box-shadow:0 12px 32px #1f202433;max-height:calc(100dvh - 92px);overflow-y:auto;z-index:var(--ui-layer-menu)}
 :root[data-theme] body>header.nav-open nav{display:flex!important;flex-direction:column;gap:4px}
 :root[data-theme] body>header nav a{font-size:16px;min-height:48px;padding:10px 12px}
 :root[data-theme] body>header nav .mobile-logout{display:block;text-align:start;min-height:48px;border-top:1px solid var(--ui-line);margin-top:4px;color:var(--ui-negative)!important}
 :root[data-theme] body #app :is(.container,.reference-content){padding-inline:16px;max-width:100%;min-width:0}
 :root[data-theme] body #app .page-title{padding:20px 0 16px;margin:0}
 :root[data-theme] body #app .page-title h1{font-size:24px;line-height:1.6;margin:0}
 :root[data-theme] body #app .page-title p{font-size:15px;line-height:1.8;margin:4px 0 0}
 :root[data-theme] body #app .panel-title-row{padding-bottom:12px;display:flex;align-items:center;min-height:64px}
 :root[data-theme] body #app .panel-title-row h1{font-size:22px}
 :root[data-theme] body #app .panel-title-row>p{display:none}
 :root[data-theme] body #app .workspace{display:block;position:relative;padding-bottom:24px;min-width:0}
 :root[data-theme] body #app .panel-nav-toggle{position:absolute;inset-inline-end:0;top:-62px;width:44px;height:44px;min-height:44px;min-width:44px;margin:0;padding:10px;display:flex;align-items:center;justify-content:center;font-size:19px;border-radius:12px;z-index:2}
 :root[data-theme] body #app .panel-nav-toggle>span:first-child{display:none}
 :root[data-theme] body #app .panel-title-row{padding-inline-end:56px!important}
 :root[data-theme] body #app .sidebar{display:none;margin:0 0 16px;padding:8px;max-height:none;position:static}
 :root[data-theme] body #app .workspace.menu-open>.sidebar{display:block}
 :root[data-theme] body #app .sidebar h3{font-size:15px;padding:8px;margin:0}
 :root[data-theme] body #app .sidebar a{min-height:48px;font-size:16px;margin:0;padding:10px 12px}
 :root[data-theme] body #app .panel-toolbar{display:none}
 :root[data-theme] body #app .workspace>section{min-width:0}
 :root[data-theme] body #app :is(.card,.role-card){padding:16px!important;border-radius:16px;margin-bottom:16px;box-shadow:none!important}
 :root[data-theme] body #app .role-welcome{padding:16px!important;gap:12px;margin-bottom:16px;display:grid;grid-template-columns:1fr;min-height:0;border-radius:16px}
 :root[data-theme] body #app .role-welcome h2{font-size:20px;line-height:1.6;margin:0}
 :root[data-theme] body #app .role-welcome p{font-size:15px;line-height:1.8;margin:4px 0 0}
 :root[data-theme] body #app .role-welcome .button{width:100%;font-size:15px;min-height:46px;padding:10px 14px;margin:0}
 :root[data-theme] body #app .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 20px}
 :root[data-theme] body #app .stats .stat{padding:12px 8px;min-height:88px;display:flex;flex-direction:column;gap:6px;justify-content:space-between;border-radius:14px;margin:0}
 :root[data-theme] body #app .stat span{font-size:13px;line-height:1.7;padding:0;min-height:0}
 :root[data-theme] body #app .stat strong{font-size:25px;line-height:1.2;margin:0}
 :root[data-theme] body #app .stat .metric-icon{display:none}
 :root[data-theme] body #app .panel-heading{gap:10px;align-items:center;margin-bottom:16px;padding-bottom:12px;flex-wrap:wrap}
 :root[data-theme] body #app .panel-heading h2{font-size:20px;line-height:1.7;gap:8px}
 :root[data-theme] body #app .panel-heading .button{font-size:14px;padding:8px 12px;min-height:44px}
 :root[data-theme] body #app .card-heading-icon{width:30px;height:30px;min-width:30px;padding:6px;border-radius:9px}
 :root[data-theme] body #app .card-heading-icon img{width:18px;height:18px}
 :root[data-theme] body #app .role-shortcuts{display:grid;grid-template-columns:1fr;gap:10px}
 :root[data-theme] body #app .role-shortcuts>a{padding:14px 16px;display:grid;grid-template-columns:32px 1fr;gap:4px 12px;align-items:center;min-height:76px;border-radius:14px}
 :root[data-theme] body #app .role-shortcuts .card-heading-icon{grid-row:1/3}
 :root[data-theme] body #app .role-shortcuts b{font-size:16px}
 :root[data-theme] body #app .role-shortcuts p{font-size:14px;line-height:1.8;margin:0}
 /* One clear primary action. Existing secondary nodes stay accessible in details. */
 :root[data-theme] body #app .actual-order{padding:16px!important;border-radius:14px;margin-bottom:12px}
 :root[data-theme] body #app .order-top{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
 :root[data-theme] body #app .order-top>b{font-size:16px;line-height:1.8}
 :root[data-theme] body #app .badge,:root[data-theme] body #app .finance-status{font-size:13px;line-height:1.7;padding:4px 9px;max-width:100%;white-space:normal}
 :root[data-theme] body #app .actual-order :is(p,small){font-size:14px!important;line-height:1.85;margin-block:6px;overflow-wrap:anywhere}
 :root[data-theme] body #app .actual-order .order-stage{margin-block:10px;height:3px}
 :root[data-theme] body #app .order-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
 :root[data-theme] body #app .order-actions> :is(a,button){flex:1 1 100%;width:100%;font-size:15px;min-height:46px;padding:10px 12px}
 :root[data-theme] body #app .mobile-order-more{width:100%;flex-basis:100%;padding:0;border:0;background:none}
 :root[data-theme] body #app .mobile-order-more>summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;font-size:14px;padding:8px 0;color:var(--ui-muted);cursor:pointer}
 .mobile-order-more>summary:after{content:'⌄';font-size:20px;line-height:1}
 .mobile-order-more[open]>summary:after{content:'⌃'}
 :root[data-theme] body #app .mobile-order-options{display:grid;grid-template-columns:1fr;gap:8px;padding-top:8px}
 :root[data-theme] body #app .mobile-order-options>:is(a,button){font-size:14px;min-height:44px;width:100%;margin:0;padding:8px 10px;justify-content:center}
 :root[data-theme] body #app :is(.live-filters,.filter-tabs){gap:6px;margin-bottom:16px;padding:4px;display:flex;flex-wrap:wrap;border-radius:12px}
 :root[data-theme] body #app :is(.live-filters,.filter-tabs) button{flex:1 1 auto;font-size:14px;padding:8px;min-height:44px}
 /* Forms: 16px inputs avoid automatic iOS zoom; labels remain above fields. */
 :root[data-theme] body #app :is(input:not([type=checkbox],[type=radio]),select,textarea){font-size:16px!important;min-width:0;max-width:100%;padding:11px 12px;min-height:48px;border-radius:12px}
 :root[data-theme] body #app textarea{min-height:112px}
 :root[data-theme] body #app :is(label.field,.login label){font-size:15px;line-height:1.8;margin-block:14px 6px}
 :root[data-theme] body #app :is(.form-grid,.signup-layout,.request-layout,.service-detail-grid){display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
 :root[data-theme] body #app :is(.form-actions,.hero-actions){display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
 :root[data-theme] body #app :is(.form-actions,.hero-actions)>*{flex:1 1 100%;min-height:46px;justify-content:center;font-size:15px;padding:10px 12px}
 :root[data-theme] body #app :is(button,.button,.secondary,.danger-text){min-height:44px;font-size:15px;line-height:1.7}
 :root[data-theme] body #app .progress{gap:8px;margin-bottom:20px}
 :root[data-theme] body #app .progress span{font-size:13px;line-height:1.8;padding-top:8px}
 :root[data-theme] body #app .login{width:calc(100% - 32px);margin:20px auto;padding:20px!important;border-radius:18px}
 :root[data-theme] body #app .login h1{font-size:24px}
 :root[data-theme] body #app .login p{font-size:15px;line-height:1.9}
 :root[data-theme] body #app .role-picker{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 :root[data-theme] body #app .account-role{padding:12px;display:flex;align-items:flex-start;gap:8px}
 :root[data-theme] body #app .account-role strong{font-size:15px}
 :root[data-theme] body #app .account-role small{font-size:13px;line-height:1.8}
 :root[data-theme] body #app .role-hint,:root[data-theme] body #app .auth-links{font-size:14px}
 :root[data-theme] body #app summary{min-height:44px;font-size:15px;padding-block:10px}
 :root[data-theme] body #app .empty{padding:24px 16px;min-height:0;border-radius:12px}
 :root[data-theme] body #app .empty :is(p,b){font-size:15px}
 /* Public service discovery: a list of scannable tasks, not large square tiles. */
 :root[data-theme] body #app .reference-hero{width:calc(100% - 32px);margin:16px auto 0;min-height:0;border-radius:20px;background-position:30% center}
 :root[data-theme] body #app .reference-hero .hero-content{min-height:328px;padding:24px 20px;justify-content:center}
 :root[data-theme] body #app .hero-content h1{font-size:27px;line-height:1.55;margin:0 0 10px}
 :root[data-theme] body #app .hero-content p{font-size:15px;line-height:1.9;margin:0 0 18px}
 :root[data-theme] body #app .hero-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:8px;border-radius:14px;width:100%}
 :root[data-theme] body #app .hero-search select{grid-column:1/-1;padding:8px;min-height:44px}
 :root[data-theme] body #app .hero-search>span{font-size:14px;padding-inline:8px}
 :root[data-theme] body #app .hero-search button{min-height:44px;font-size:15px;padding:8px 14px}
 :root[data-theme] body #app .ref-section{padding-top:28px}
 :root[data-theme] body #app .ref-title{margin-bottom:16px;text-align:start}
 :root[data-theme] body #app .ref-title h2{font-size:22px}
 :root[data-theme] body #app .ref-title p{font-size:14px;margin-top:4px}
 :root[data-theme] body #app .services{grid-template-columns:1fr;gap:10px}
 :root[data-theme] body #app .service{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:2px 12px;padding:14px 16px;align-items:center;min-height:88px;border-radius:16px}
 :root[data-theme] body #app .service .service-icon{grid-row:1/3;grid-column:1;width:34px;height:34px;margin:0}
 :root[data-theme] body #app .service h3{grid-row:1;grid-column:2;font-size:16px;line-height:1.8;margin:0}
 :root[data-theme] body #app .service p{grid-row:2;grid-column:2;font-size:14px;line-height:1.8;margin:0}
 :root[data-theme] body #app .service .badge{grid-row:1/3;grid-column:3;margin:0;padding:0;background:none!important;border:0!important;font-size:13px;align-self:center}
 :root[data-theme] body #app :is(.ref-split,.service-directory-grid){display:grid;grid-template-columns:1fr;gap:12px;margin-block:20px}
 :root[data-theme] body #app :is(.ref-why,.ref-flow,.ref-join,.ref-future){padding:20px 16px;gap:16px;border-radius:16px}
 :root[data-theme] body #app .reference-benefits{gap:16px;grid-template-columns:1fr 1fr}
 :root[data-theme] body #app :is(.reference-benefits,.ref-steps) h3{font-size:15px}
 :root[data-theme] body #app :is(.reference-benefits,.ref-steps) p{font-size:14px;line-height:1.8}
 :root[data-theme] body #app .ref-steps>div{padding-inline-start:48px;padding-bottom:20px;min-height:72px}
 :root[data-theme] body #app .ref-steps b{width:32px;height:32px;font-size:15px}
 :root[data-theme] body #app .ref-steps>div:not(:last-child):after{right:15px;top:32px}
 :root[data-theme] body #app :is(.ref-join,.ref-future) h2{font-size:21px;line-height:1.7}
 :root[data-theme] body #app .directory-card{padding:20px 16px;border-radius:16px}
 :root[data-theme] body #app .directory-card h2{font-size:21px}
 :root[data-theme] body #app .directory-card :is(p,li){font-size:15px;line-height:1.9}
 :root[data-theme] body #app .service-detail-hero{padding:20px 16px;gap:12px;border-radius:16px}
 :root[data-theme] body #app .service-detail-hero h1{font-size:25px;line-height:1.6}
 :root[data-theme] body #app .service-detail-hero>img{width:44px;height:44px}
 :root[data-theme] body #app .service-breadcrumb{padding-block:8px;font-size:14px}
 :root[data-theme] body #app .service-breadcrumb a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
 :root[data-theme] body #app .service-four-steps{grid-template-columns:1fr 1fr;gap:12px}
 :root[data-theme] body #app .service-four-steps p{font-size:14px;line-height:1.8}
 /* Stable map height with legible cards and 44px navigation links. */
 :root[data-theme] body #app .places-page{padding-top:16px}
 :root[data-theme] body #app .places-hero{padding:20px 16px;border-radius:16px}
 :root[data-theme] body #app .places-hero h1{font-size:24px;margin:6px 0}
 :root[data-theme] body #app .places-hero p{font-size:15px;line-height:1.8}
 :root[data-theme] body #app .places-filters{display:grid;grid-template-columns:1fr;gap:8px;padding:16px;margin-bottom:16px}
 :root[data-theme] body #app .places-filters label.field{margin:0}
 :root[data-theme] body #app .places-layout{display:flex;flex-direction:column;gap:16px}
 :root[data-theme] body #app .places-map-panel{position:static;width:100%;order:-1;margin:0}
 :root[data-theme] body #app .motoryar-street-map{height:260px!important;min-height:240px!important}
 :root[data-theme] body #app .street-map-toolbar{display:flex;gap:8px;flex-wrap:wrap;padding:12px}
 :root[data-theme] body #app .street-map-toolbar button{flex:1 1 auto;font-size:14px;min-height:44px}
 :root[data-theme] body #app .street-map-hint,:root[data-theme] body #app .street-map-status{font-size:13px!important;line-height:1.8;margin:0;padding:8px 12px}
 :root[data-theme] body #app .place-card{padding:16px;border-radius:16px;gap:12px}
 :root[data-theme] body #app .place-card h3{font-size:19px}
 :root[data-theme] body #app .place-card p{font-size:14px;line-height:1.85;margin-block:6px}
 :root[data-theme] body #app .place-card-actions{flex-wrap:wrap;gap:8px}
 :root[data-theme] body #app .place-card-actions>.button{font-size:15px;width:100%;flex:1 1 100%}
 :root[data-theme] body #app .place-navigation{gap:8px;flex-wrap:wrap}
 :root[data-theme] body #app .place-navigation .navigation-logo{min-height:52px;min-width:52px;flex:1 1 52px;font-size:13px;padding:8px;gap:4px;flex-direction:row}
 :root[data-theme] body #app .place-navigation .navigation-logo img{width:24px;height:24px}
 /* Flatten nested account surfaces; both appearances use identical geometry. */
 :root[data-theme] body #app :is(.role-card:has(>.bike-card),.case-grid,.case-facts,.report-checks,.document-grid,.coverage-layout){display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
 :root[data-theme] body #app .bike-card{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px 12px;padding:16px;margin:0 0 12px;border-radius:14px}
 :root[data-theme] body #app .bike-card>img{width:44px;height:44px;padding:8px}
 :root[data-theme] body #app .bike-card b{font-size:16px;line-height:1.8}
 :root[data-theme] body #app .bike-card p{font-size:14px;line-height:1.8;margin:4px 0}
 :root[data-theme] body #app .bike-facts{display:grid;grid-template-columns:1fr;gap:6px;margin-top:10px;padding-top:10px}
 :root[data-theme] body #app .bike-facts :is(b,span){font-size:14px}
 :root[data-theme] body #app .bike-card>a.link{grid-column:1/-1;min-height:44px;font-size:15px;padding-top:10px}
 :root[data-theme] body #app :is(.document-card,.skill-card,.review-card,.case-entry,.history-entry){padding:16px!important;border-radius:14px;margin-bottom:12px}
 :root[data-theme] body #app :is(.document-card,.skill-card) form{padding:12px!important;border-radius:12px}
 :root[data-theme] body #app .document-preview{padding:12px;min-width:0}
 :root[data-theme] body #app .document-preview img{max-height:280px;object-fit:contain;max-width:100%}
 :root[data-theme] body #app :is(.case-person,.case-money article,.finance-stats article,.finance-receipt-meta,.finance-support,.order-position,.order-location-point,.report-text,.report-fieldset){padding:12px!important;border-radius:12px}
 :root[data-theme] body #app .case-money,:root[data-theme] body #app .finance-stats{grid-template-columns:1fr 1fr;gap:8px}
 :root[data-theme] body #app :is(.case-money,.finance-stats) :is(strong,b){font-size:20px;line-height:1.7}
 :root[data-theme] body #app :is(.case-money,.finance-stats) :is(p,span){font-size:13px;line-height:1.8}
 :root[data-theme] body #app .case-person h3{font-size:17px}
 :root[data-theme] body #app .case-facts{gap:10px}
 :root[data-theme] body #app .case-facts :is(dt,dd){font-size:14px;line-height:1.85}
 :root[data-theme] body #app .admin-case .case-header h2{font-size:22px}
 :root[data-theme] body #app .admin-case .case-header p{font-size:14px;line-height:1.9}
 :root[data-theme] body #app .case-jumps{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 :root[data-theme] body #app .case-jumps .secondary{font-size:14px;min-height:44px;flex-basis:auto;padding:8px}
 :root[data-theme] body #app .case-entry h3{font-size:18px}
 :root[data-theme] body #app .order-state-timeline h3{font-size:17px}
 :root[data-theme] body #app .order-state-timeline :is(p,time){font-size:14px;line-height:1.8}
 :root[data-theme] body #app .order-state-timeline li>div{padding:12px}
 :root[data-theme] body #app .finance-receipt-heading h2{font-size:23px}
 :root[data-theme] body #app .finance-breakdown>div{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding:12px}
 :root[data-theme] body #app .finance-breakdown :is(span,b){font-size:15px;line-height:1.85}
 :root[data-theme] body #app .finance-breakdown b{margin-inline-start:auto;white-space:nowrap}
 :root[data-theme] body #app .invoice-edit-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;padding:12px;border:1px solid var(--ui-line);border-radius:12px;margin-bottom:12px}
 :root[data-theme] body #app .invoice-edit-row .invoice-line-title{grid-column:1/-1}
 :root[data-theme] body #app .invoice-edit-row label{margin:0}
 :root[data-theme] body #app .invoice-edit-row [data-remove-line]{grid-column:1/-1;width:100%}
 :root[data-theme] body #app .invoice-total{display:flex;flex-wrap:wrap;gap:8px;padding:16px;font-size:16px}
 :root[data-theme] body #app .invoice-total strong{font-size:20px}
 :root[data-theme] body #app .list-pagination{gap:8px;flex-wrap:wrap;font-size:14px}
 :root[data-theme] body #app .list-pagination button{min-height:44px;padding:8px 12px;font-size:14px}
 /* Labelled rows retain native table roles; no sideways swiping for simple tables. */
 .mobile-data-table{display:block!important;width:100%!important;min-width:0!important;border-collapse:separate}
 .mobile-data-table thead{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)}
 .mobile-data-table tbody{display:grid;gap:12px}
 .mobile-data-table tbody tr{display:block!important;border:1px solid var(--ui-line);border-radius:12px;overflow:hidden;background:var(--ui-surface)}
 :root[data-theme] body #app .mobile-data-table td{display:grid!important;grid-template-columns:100px minmax(0,1fr);gap:8px;width:auto!important;min-width:0;white-space:normal!important;overflow-wrap:anywhere;padding:10px 12px!important;font-size:14px;text-align:start;border:0;border-bottom:1px solid var(--ui-line)}
 .mobile-data-table td:last-child{border-bottom:0!important}
 .mobile-cell-label{display:block;direction:rtl;font-size:13px;line-height:1.8;color:var(--ui-muted)}
 .mobile-cell-value{overflow-wrap:anywhere;min-width:0}
 .mobile-data-table td:before{display:none!important}
 .table-wrap:has(.mobile-data-table){overflow:visible!important;border:0;border-radius:0}
 /* Payment steps fit the viewport; the amount precedes the interaction. */
 :root[data-theme] body #app .gateway-shell{width:100%;padding:0}
 :root[data-theme] body #app .gateway-top{gap:8px;flex-wrap:wrap;margin-bottom:16px}
 :root[data-theme] body #app .gateway-wordmark{font-size:23px;margin-inline-end:auto}
 :root[data-theme] body #app .gateway-simulation{font-size:13px;padding:6px 8px}
 :root[data-theme] body #app .gateway-grid{grid-template-columns:minmax(0,1fr);gap:16px}
 :root[data-theme] body #app .gateway-merchant{padding:16px;border-radius:16px}
 :root[data-theme] body #app .gateway-merchant dl{gap:8px 12px}
 :root[data-theme] body #app .gateway-merchant :is(dt,dd){font-size:14px;line-height:1.8}
 :root[data-theme] body #app .gateway-merchant dd.gateway-amount{font-size:21px}
 :root[data-theme] body #app .gateway-form{border-radius:16px}
 :root[data-theme] body #app .gateway-form :is(.gateway-card-head,form){padding:16px}
 :root[data-theme] body #app .gateway-fake-card{margin:16px;padding:16px}
 :root[data-theme] body #app .gateway-fields{padding-inline:16px}
 :root[data-theme] body #app .gateway-fields>div{grid-template-columns:1fr;gap:6px;padding:12px 0}
 :root[data-theme] body #app .gateway-fields b{font-size:14px}
 :root[data-theme] body #app .gateway-buttons{display:grid;grid-template-columns:1fr;gap:8px}
 :root[data-theme] body .panel-quick-nav{gap:0;padding:6px 8px calc(6px + env(safe-area-inset-bottom));min-height:68px;z-index:40}
 :root[data-theme] body .panel-quick-nav a{min-height:56px;font-size:12px;gap:4px;padding:4px 0;border-radius:10px}
 :root[data-theme] body .panel-quick-nav img{width:22px;height:22px}
 body.has-quick-nav #app{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
 :root[data-theme] body .ref-footer{padding:28px 16px;grid-template-columns:1fr 1fr;gap:20px 12px;font-size:14px}
 :root[data-theme] body .ref-footer>div:first-child{grid-column:1/-1}
 :root[data-theme] body .ref-footer :is(p,a:not(.brand)){font-size:14px;line-height:1.8}
 :root[data-theme] body .ref-footer .brand-symbol{width:60px;height:40px}
 :root[data-theme] body .ref-footer .brand-name{font-size:25px}
 #toast{font-size:14px;max-width:calc(100vw - 32px)}
}
@media(max-width:360px){
 :root[data-theme] body:not(.gateway-view)>header{padding-inline:12px!important;gap:6px!important}
 :root[data-theme] body>header .brand-name{font-size:21px}
 :root[data-theme] body>header .brand-symbol{width:38px;flex-basis:38px;height:30px}
 :root[data-theme] body #app .container,:root[data-theme] body #app .reference-content{padding-inline:12px}
 :root[data-theme] body #app .role-picker{grid-template-columns:1fr}
 :root[data-theme] body #app .stats{gap:6px}
 :root[data-theme] body #app .stat span{font-size:12px}
 :root[data-theme] body #app .service{grid-template-columns:32px minmax(0,1fr);padding:12px;gap:2px 10px}
 :root[data-theme] body #app .service .badge{grid-row:3;grid-column:2;justify-self:start;font-size:13px}
 .mobile-data-table td{grid-template-columns:84px minmax(0,1fr)!important}
}
@media print{.mobile-account-icon,.mobile-cell-label,.mobile-logout{display:none!important}.mobile-order-more>summary{display:none!important}.mobile-order-more>.mobile-order-options{display:flex!important}.mobile-data-table{display:table!important}}

@media(max-width:600px){
 :root[data-theme] body #app .panel-nav-toggle{display:none!important}
 :root[data-theme] body #app .panel-title-row{padding-inline-end:0!important}
 :root[data-theme] body #app .stats>.stat:last-child{grid-column:auto!important}
 :root[data-theme] body #app .sidebar .mobile-logout{display:block;min-height:48px;width:100%;text-align:start;padding:10px 12px;margin-top:8px;color:var(--ui-negative)!important}
}

@media(max-width:600px){
 :root[data-theme] body>header .brand{min-height:44px}
 :root[data-theme] body #app .invoice-heading{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:16px}
 :root[data-theme] body #app .invoice-heading h3{font-size:17px;margin:0}
 :root[data-theme] body #app .invoice-heading p{font-size:14px;margin:4px 0 0}
 :root[data-theme] body #app .invoice-cost-table tbody tr{display:grid!important;grid-template-columns:1fr 1fr;gap:8px 12px;padding:12px!important}
 :root[data-theme] body #app .invoice-cost-table td{display:flex!important;flex-direction:column;gap:2px;padding:0!important;border:0;align-items:flex-start}
 :root[data-theme] body #app .invoice-cost-table td:first-child{grid-column:1/-1;display:block!important;font-size:15px;font-weight:650;padding-bottom:6px!important}
 :root[data-theme] body #app .invoice-cost-table td:first-child>.mobile-cell-label{display:none}
 :root[data-theme] body #app .invoice-cost-table td:last-child{grid-column:1/-1;display:grid!important;grid-template-columns:1fr 1fr;border-top:1px solid var(--ui-line);padding-top:8px!important;align-items:center}
 :root[data-theme] body #app .invoice-cost-table td:last-child .mobile-cell-value{font-weight:750;justify-self:end}
 :root[data-theme] body #app .invoice-kind{font-size:12px}
}
@media(max-width:600px){
 :root[data-theme] body #app .role-welcome p{display:none}
 :root[data-theme] body #app .role-welcome h2{font-size:18px}
 :root[data-theme] body #app .stats .stat{height:96px;min-height:96px;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:4px}
 :root[data-theme] body #app .stats .stat>span{margin:0;padding:0;font-size:12.5px;line-height:1.65}
 :root[data-theme] body #app .stats .stat>strong{margin:0;line-height:1.2;font-size:24px}
 :root[data-theme] body #app .role-card:has(.actual-order,.bike-card,.document-card,.skill-card,.review-card){padding:0!important;border:0;background:transparent!important;box-shadow:none!important}
 :root[data-theme] body #app .role-card:has(.actual-order,.bike-card,.document-card,.skill-card,.review-card)>.panel-heading{padding-inline:0}
 :root[data-theme] body #app .report-checks>div{font-size:14px;line-height:1.8;padding:12px}
 :root[data-theme] body #app .check-result{font-size:13px;line-height:1.8}
}
@media(max-width:600px){
 :root[data-theme] body #app .form-grid>.field{margin:0!important}
 :root[data-theme] body #app .form-grid{row-gap:16px}
 :root[data-theme] body #app .form-grid>.field :is(input,select,textarea){margin-top:6px}
}

@media(max-width:600px){
 :root[data-theme] body #app .mobile-data-table td{direction:rtl}
 :root[data-theme] body #app .mobile-duplicate-title,:root[data-theme] body #app .mobile-duplicate-heading{display:none!important}
 :root[data-theme] body #app .role-card:has(.mobile-data-table){padding:0!important;border:0;background:transparent!important;box-shadow:none!important}
}

@media(max-width:600px){
 :root[data-theme] body #app .places-hero{padding:16px}
 :root[data-theme] body #app .places-hero>span,:root[data-theme] body #app .places-hero p{display:none}
 :root[data-theme] body #app .places-hero h1{font-size:22px;line-height:1.7;margin:0}
 :root[data-theme] body #app form[data-places-search]{grid-template-columns:minmax(0,1fr) auto;gap:12px}
 :root[data-theme] body #app form[data-places-search]>.field:first-child{grid-column:1/-1}
 :root[data-theme] body #app form[data-places-search]>.button{align-self:end;min-width:88px;padding:10px 14px;height:48px}
}

@media(max-width:600px){
 :root[data-theme] body:not(.gateway-view)>header{padding-top:calc(8px + env(safe-area-inset-top))!important;padding-inline-start:max(16px,env(safe-area-inset-right))!important;padding-inline-end:max(16px,env(safe-area-inset-left))!important}
 :root[data-theme] body #app :is(.container,.reference-content){padding-inline-start:max(16px,env(safe-area-inset-right));padding-inline-end:max(16px,env(safe-area-inset-left))}
}
@media(max-width:360px){:root[data-theme] body:not(.gateway-view)>header{padding-inline-start:max(12px,env(safe-area-inset-right))!important;padding-inline-end:max(12px,env(safe-area-inset-left))!important}}

/* Make map zoom and short footer links comfortably tappable on small screens. */
@media (max-width:1023px) {
 :root[data-theme] body #app .leaflet-control-zoom a { min-width:44px; min-height:44px; }
}
@media (max-width:600px) {
 :root[data-theme] body .redesign-footer .footer-group a { min-width:44px; }
}