#m-bar, #m-scrim { display: none; }

@media (max-width: 820px) {
  
  #app-shell { flex-direction: column; }
  #m-bar {
    display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 900;
    height: 56px; padding: 0 12px; background: #fff; border-bottom: 1px solid oklch(91% 0.012 70);
  }
  #m-menu {
    width: 42px; height: 42px; flex: none; border: none; border-radius: 11px; background: var(--surface-2, #f4f1ec);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; padding: 0;
  }
  #m-menu span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink, #222); }
  #m-title { min-width: 0; line-height: 1.25; }
  #m-client { font-size: 12px; color: var(--muted, #777); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #m-tab { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  #app-side {
    position: fixed !important; top: 0; bottom: 0; right: 0; z-index: 1100;
    width: min(300px, 86vw) !important; height: 100% !important;
    transform: translateX(105%); transition: transform .22s ease; box-shadow: none;
  }
  body.m-nav-open #app-side { transform: none; box-shadow: -12px 0 40px rgba(15, 23, 42, .22); }
  body.m-nav-open #m-scrim { display: block; position: fixed; inset: 0; z-index: 1050; background: rgba(15, 20, 30, .4); }
  body.m-nav-open { overflow: hidden; }
  #app-side .navlink { padding: 13px 14px; font-size: 15.5px; }

  #tab-content { padding: 16px 14px 90px !important; width: 100%; }

  
  
  
  #tab-content [style*="grid-template-columns"]:not([style*="auto-fill"]):not([style*="auto-fit"]):not([style*="repeat(7"]):not([style*="repeat(4"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  
  #tab-content [style*="grid-template-columns"][style*="repeat(4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #tab-content [style*="grid-template-columns"][style*="auto-fill"], #tab-content [style*="grid-template-columns"][style*="auto-fit"] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)) !important; }
  
  #tab-content [style*="width:"] { max-width: 100%; }
  #tab-content img, #tab-content video { max-width: 100%; }
  #tab-content img:not([style*="height"]):not([height]) { height: auto; }
  #tab-content iframe { max-width: 100%; }   
  
  #tab-content [style*="position:sticky"] { position: static !important; max-height: none !important; }
  #tab-content pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  
  #tab-content table:not(.m-cards) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  
  #tab-content table.m-cards { display: block; min-width: 0 !important; }
  #tab-content table.m-cards thead { display: none; }
  #tab-content table.m-cards tbody, #tab-content table.m-cards tr, #tab-content table.m-cards td { display: block; width: auto !important; }
  #tab-content table.m-cards tr { padding: 10px 14px; }
  #tab-content table.m-cards td { padding: 3px 0 !important; text-align: right !important; white-space: normal !important; }
  #tab-content table.m-cards td:first-child { font-weight: 600; font-size: 15px; }
  #tab-content table.m-cards td[colspan] { text-align: center !important; padding: 16px 0 !important; }
  #tab-content table.m-cards td[data-label]:not([data-label=""])::before { content: attr(data-label) " · "; color: var(--muted, #777); font-size: 12.5px; font-weight: 600; }
  
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; }
  
  #tab-content > div > div:first-child [style*="font-size:26px"], #tab-content [style*="font-size:28px"] { font-size: 22px !important; }
  
  #tab-content .card { overflow-wrap: break-word; }
  #tab-content .card:hover { box-shadow: 0 2px 8px oklch(30% 0.02 60 / 0.06); }

  
  #login-screen { grid-template-columns: 1fr !important; grid-template-rows: auto 1fr; }
  #login-screen > div:first-child { min-height: 0 !important; padding: 22px 20px !important; gap: 14px; }
  #login-screen > div:first-child > div:nth-child(2), #login-screen > div:first-child > div:nth-child(3) { display: none; }
  #login-screen > div:nth-child(2) { padding: 28px 18px 40px !important; align-items: flex-start !important; }

  
  .ui-dlg { max-height: calc(100vh - 24px); }
}