@media (max-width: 768px) {
  .sb { width: 100%; height: auto; position: relative; flex-direction: row; flex-wrap: wrap; }
  .sb nav { display: flex; flex-wrap: wrap; padding: 6px; width: 100%; overflow-x: auto; }
  .ni { font-size: 11px; padding: 6px 8px; white-space: nowrap; }
  .sb-ft { display: none; }
  .main { margin-left: 0; padding: 12px; }
  .app { flex-direction: column; }
  .kg { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .kc { padding: 12px; }
  .kv { font-size: 24px; }
  .fg { grid-template-columns: 1fr; }
  .mbox { padding: 16px; max-width: 100%; margin: 8px; border-radius: 8px; }
  table { font-size: 11px; }
  th, td { padding: 6px 8px; }
  .ph { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ph .btn { width: 100%; text-align: center; }
  .sr { flex-direction: column; }
  .si { width: 100%; }
  .btn { padding: 10px 14px; font-size: 13px; }
  .btn-sm { padding: 6px 10px; font-size: 11px; }
  .card { border-radius: 6px; }
  .sb-logo { padding: 10px 12px; }
  .sb-logo img { width: 90px; }
  /* Mobile nav bar bottom */
  .mob-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: #000; border-top: 1px solid #39e600; z-index: 200; }
  .mob-nav button { flex: 1; padding: 10px 4px; background: none; border: none; color: rgba(255,255,255,.6); font-size: 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
  .mob-nav button.active { color: #39e600; }
  .mob-nav button span.icon { font-size: 18px; }
  .main { padding-bottom: 70px; }
  /* Hide desktop sidebar on mobile */
  .sb { display: none; }
  /* Company logo bar */
  #company-logo-bar { top: 6px; right: 6px; padding: 4px 8px; }
  #company-logo-img { height: 36px; }
}
@media (min-width: 769px) {
  .mob-nav { display: none; }
}