/* Large desktop */
@media (min-width: 1400px) {
  .container { max-width: 1320px; }
  .tool-grid { grid-template-columns: 1.2fr 1fr; }
}

/* Desktop */
@media (max-width: 1199px) {
  .tool-grid { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
}

/* Tablet */
@media (max-width: 991px) {
  .tool-grid { grid-template-columns: 1fr; }
  .picker-panel { order: 1; }
  .values-panel { order: 2; }
  .nav-menu {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--color-background);
    flex-direction: column;
    padding: 1rem 2rem;
    border-bottom: 1px solid var(--color-border);
    transform: translateY(-120%);
    transition: transform 0.3s ease;
    z-index: 40;
  }
  .nav-menu.open {
    transform: translateY(0);
  }
  .nav-toggle {
    display: flex;
  }
  .contrast-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile */
@media (max-width: 575px) {
  .container { padding: 0 12px; }
  .section { margin: 1.5rem auto; }
  .card { padding: 1rem; }
  .tool-grid { gap: 1rem; }
  .preview-swatch { width: 60px; height: 60px; }
  .preview-actions { flex-wrap: wrap; }
  .palette-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
  .header-inner { height: 56px; }
  .nav-menu { top: 56px; }
  .logo span { font-size: 1rem; }
}

/* Small mobile */
@media (max-width: 380px) {
  .btn { padding: 0.5rem 0.9rem; font-size: 0.9rem; }
  .swatch { width: 40px; height: 40px; }
}