@media (display-mode: standalone) {
  html { background:#f4f6f8; }
  body { padding-top:env(safe-area-inset-top); }
  .app { height:calc(100dvh - env(safe-area-inset-top)); }
}

.kwb-offline #persistenceStatus {
  color:#ad2731 !important;
  border-color:#efc7c7 !important;
}

@media (max-width: 760px) {
  html, body { width:100%; max-width:100%; overscroll-behavior:none; }
  body { font-size:13px; }
  .login-screen { min-height:100dvh; }
  .login-panel { padding:24px 20px max(24px,env(safe-area-inset-bottom)); }
  .brand-mark { width:min(290px,92%); margin-bottom:22px; }
  .login-panel h1 { font-size:22px; }
  .field input, .field select, .field textarea { min-height:44px; font-size:16px; }

  .app { grid-template-columns:1fr; grid-template-rows:60px minmax(0,1fr); }
  .rail { height:60px; padding:0 8px; gap:7px; overflow:hidden; }
  .logo { width:86px; height:48px; }
  .nav { height:60px; gap:0; scrollbar-width:none; }
  .nav::-webkit-scrollbar { display:none; }
  .nav button { min-width:64px; min-height:60px; padding:6px 7px; font-size:9px; }
  .nav button .nav-icon { font-size:15px; margin-bottom:2px; }

  .top { min-height:52px; height:52px; padding:7px 9px; gap:6px; flex-wrap:nowrap; }
  .top h2 { max-width:34vw; overflow:hidden; text-overflow:ellipsis; font-size:15px; }
  .top .user-pill { max-width:31vw; overflow:hidden; text-overflow:ellipsis; padding:6px 8px; }
  .top .btn { min-height:36px; padding:7px 9px; }
  #newProjectButton { white-space:nowrap; }
  #logoutButton { font-size:0; width:38px; padding:7px; }
  #logoutButton::before { content:"×"; font-size:22px; line-height:1; }

  .page { height:calc(100dvh - 112px); padding:9px 8px max(82px,calc(env(safe-area-inset-bottom) + 70px)); scroll-padding-bottom:max(82px,calc(env(safe-area-inset-bottom) + 70px)); }
  .panelhead, .panelbody { padding:10px; }
  .cards, .two, .grid2, .grid3, .time-summary, .time-filters { grid-template-columns:1fr !important; }
  .card { padding:10px; }
  .modal { padding:6px; align-items:flex-end; }
  .modalbox, .modalbox.compact { width:calc(100vw - 12px); max-width:none; max-height:calc(100dvh - 12px); padding:14px; border-radius:8px 8px 0 0; }
  .actions { position:sticky; bottom:0; padding:9px 0 max(2px,env(safe-area-inset-bottom)); background:inherit; }
  .actions .btn { min-height:42px; }
  .table-wrap { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .project-workspace, .personal-workspace { grid-template-columns:minmax(180px,42vw) minmax(440px,1fr) !important; }
  .toast { left:8px; right:8px; bottom:max(8px,env(safe-area-inset-bottom)); max-width:none; }
}

@media (max-width: 430px) {
  .logo { width:72px; }
  .nav button { min-width:58px; }
  .top h2 { max-width:27vw; }
  .top .user-pill { display:none; }
  #newProjectButton { font-size:11px; }
}