.wrap{ max-width:1080px; margin:0 auto; padding:10px 16px; }
.row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.kpi{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:8px; }
.grid{ display:grid; gap:8px; }
@media(min-width:840px){
  .grid-2{ grid-template-columns:1fr 1fr; }
  .grid-3{ grid-template-columns:repeat(3,1fr); }
}

header.lm-header{ position:sticky; top:0; background:#fff; z-index:5; border-bottom:3px solid var(--pri); }
.brand{ display:flex; align-items:center; gap:10px; }
.brand .logo{ display:inline-flex; align-items:center; justify-content:center; }
.brand .logo img{ display:block; height:28px; width:auto; }
.brand .name{ font-weight:700; letter-spacing:.02em; }
nav.tabs .btn{ border-radius:999px; padding:8px 12px; }

@media (max-width:680px){
  .wrap{ padding:8px 12px; }
  .brand .logo img{ height:22px; }
  nav.tabs{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  nav.tabs .btn{ flex:0 0 auto; }
  .kpi{ grid-template-columns:1fr; }
  .row .input, .row select{ flex:1 1 100%; }
  #products .row > *:not(.btn){ flex:1 1 100%; }
  #products .row > .btn{ flex:0 0 auto; }
  #table-wrap{ overflow-x:auto; }
  #table{ min-width:760px; }
  #table thead th{ position:sticky; top:0; background:#fff; z-index:1; }
  .btn{ min-height:44px; }
  .pill{ font-size:11px; }
  .dialog{ max-width:100%; max-height:92vh; border-radius:12px; }
  #alerts .toolbar{ position:sticky; top:0; background:#fff; z-index:2; padding-top:6px; }
}