@media (max-width: 680px) {
  .app { display: block; }
  .sidebar {
    position: fixed;
    z-index: 20;
    inset: auto 0 0;
    width: 100%;
    height: 68px;
    padding: 5px 4px;
    display: block;
    background: #fff;
    box-shadow: 0 -8px 30px #263d3320;
  }
  .sidebar .brand, .sidebar .logout { display: none; }
  .sidebar nav {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
  }
  .sidebar nav button {
    display: grid;
    place-items: center;
    padding: 4px 2px;
    font-size: 8.5px;
    text-align: center;
    color: #9da3af;
    white-space: normal;
  }
  .sidebar nav button:hover, .sidebar nav button.active {
    background: #fff1ed;
    color: #ff3a2f;
  }
  .workspace { padding: 22px 12px 94px; }
  .workspace h2 { font-size: 26px; }
  .list-item { grid-template-columns: 40px 1fr; }
  .item-actions { grid-column: 2; justify-content: flex-start; }
  .list-icon { width: 40px; height: 40px; }
  .login-card { padding: 30px 24px; }
}