/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 860px) {
  .sidebar { width: 270px; }
  .flip-card { width: 420px; height: 241px; }
}

@media (max-width: 660px) {
  .style-toolbar {
    flex-wrap: wrap;
    justify-content: center;
    max-width: calc(100vw - 32px);
  }
  .topbar { padding: 0 14px; }
  .dm-toggle__label, .topbar__sep, .topbar__sub { display: none; }
  .workspace { flex-direction: column; }
  .sidebar {
    width: 100%;
    max-height: 44vh;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .flip-card {
    width: calc(100vw - 48px);
    height: auto;
    aspect-ratio: 5 / 3;
  }
  .canvas-area { padding: 22px 16px; }
  .bottom-bar { padding: 9px 14px; }
  .template-grid { grid-template-columns: repeat(4, 1fr); }
  .kbd-hint { display: none; }
}