@media (max-width: 768px) {

  .media-timeline,
  .media-timeline-label {
    display: none;
  }

  .header-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .logo-area {
    width: 100%;
  }

  .header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .nav {
    overflow-x: auto;
    width: 100%;
  }

  .nav-btn {
    white-space: nowrap;
    padding: 8px 16px;
  }

  main {
    padding: 16px;
  }

  .list {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
  }

  .item-preview {
    height: 140px;
  }

  .toolbar {
    flex-wrap: wrap;
  }

  .actions.filters {
    flex-wrap: wrap;
  }

  .actions.filters .filter-input {
    flex: 1;
    min-width: 140px;
  }

  .clipboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .clipboard-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .clipboard-actions button {
    flex: 1;
    min-width: 120px;
  }

  .lightbox {
    width: 100vw;
    height: 100vh;
  }

  .lightbox-footer {
    flex-wrap: wrap;
  }

  .lightbox-footer button {
    flex: 1;
  }

  .lightbox-status {
    font-size: 12px;
  }

  .login-box {
    margin: 16px;
    padding: 32px 24px;
  }
}

@media (max-width: 480px) {
  header {
    padding: 8px 16px;
  }

  h1 {
    font-size: 18px;
  }

  .logo-icon {
    font-size: 20px;
  }

  .nav-btn {
    font-size: 13px;
    padding: 8px 12px;
  }

  main {
    padding: 12px;
  }

  .list {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
  }

  .item-preview {
    height: 100px;
    font-size: 32px;
  }

  .item-info {
    padding: 8px;
  }

  .item-name {
    font-size: 13px;
  }

  .item-meta {
    font-size: 11px;
  }

  button {
    font-size: 13px;
    padding: 8px 12px;
  }

  .upload-zone {
    padding: 24px;
  }

  .login-box {
    padding: 24px 20px;
  }

  .login-logo {
    font-size: 40px;
  }

  .login-box h1 {
    font-size: 20px;
  }
}