@media(max-width:600px){
  body{overflow-x:hidden}
  .shell main,.master-page{padding:18px 14px max(24px,env(safe-area-inset-bottom))!important}
  header{gap:16px}
  header h1{font-size:25px;line-height:1.25}
  header>div:last-child{display:grid;width:100%;grid-template-columns:1fr 1fr;gap:8px}
  header>div:last-child button{width:100%;padding:11px 8px}
  .stats{gap:10px;margin:20px 0}
  .stat{min-width:0;padding:14px 12px}
  .stat b{font-size:25px}
  .stat small{font-size:12px;line-height:1.35}
  .board,.master-board,.bulk{border-radius:12px}
  .toolbar,.master-tools{padding:14px}
  .toolbar h2,.master-tools h2{width:100%;font-size:20px}
  .table{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  th,td{padding:12px 10px}
  dialog{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);margin:12px auto;overflow:auto;border-radius:14px}
  .modal{padding:18px 14px}
  .modal-head{gap:10px;align-items:flex-start}
  .modal-head h2{font-size:21px}
  .actions{flex-direction:column-reverse;gap:8px}
  .actions button{width:100%}
  .request-page,.pay-page{width:auto!important;margin:12px!important;padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .request-card,.pay-card{padding:18px 14px!important;border-radius:14px!important}
  .request-brand,.pay-brand{flex-wrap:wrap}
  .request-brand>a,.pay-brand>a{width:100%;margin-left:0!important;text-align:center}
  .request-card h1,.pay-card h1{font-size:25px;line-height:1.25}
  input,select,textarea{font-size:16px;min-height:44px}
  textarea{min-height:96px}
  input[type=file]{min-height:auto;padding:10px 7px}
  .task-item{white-space:normal;overflow-wrap:anywhere}
  .task-item small,.selected-task{line-height:1.55}
  .tabs{overflow-x:auto;padding-bottom:3px}
  .tabs button{white-space:nowrap}
  .bulk{padding:16px 14px!important}
}

@media(max-width:380px){
  .stats{grid-template-columns:1fr}
  header>div:last-child{grid-template-columns:1fr}
}

.mobile-menu-toggle,.mobile-menu-backdrop{display:none}
@media(max-width:850px){
  .shell aside{display:flex!important;flex-direction:column;position:fixed;z-index:1002;top:0;bottom:0;left:0;width:min(290px,86vw);max-width:290px;min-height:100dvh;padding:22px 18px max(18px,env(safe-area-inset-bottom));overflow-y:auto;transform:translateX(-105%);transition:transform .22s ease;box-shadow:14px 0 35px rgba(5,16,37,.28)}
  .shell aside.mobile-nav-open{transform:translateX(0)}
  .shell aside nav{display:flex;flex:1;flex-direction:column;gap:8px;min-height:0}
  .shell aside nav .line{margin-top:auto;margin-bottom:6px}
  .shell aside nav .logout-button,.shell aside nav button:last-child{margin-bottom:4px}
  .mobile-menu-toggle{display:flex;align-items:center;justify-content:center;position:fixed;z-index:1003;top:max(12px,env(safe-area-inset-top));left:12px;width:46px;height:46px;padding:0;border:1px solid rgba(255,255,255,.65);border-radius:12px;background:#12213d;color:#fff;font-size:25px;line-height:1;box-shadow:0 7px 20px rgba(18,33,61,.28)}
  .mobile-menu-toggle.is-open{left:min(calc(86vw - 58px),232px);background:#d83a45}
  .mobile-menu-backdrop{display:block;position:fixed;z-index:1001;inset:0;background:rgba(5,16,37,.55);opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease}
  .mobile-menu-backdrop.is-open{opacity:1;visibility:visible}
  body.mobile-nav-active{overflow:hidden}
  .shell main{padding-top:72px!important}
}