/* DrawX — Responsive */
@media (max-width: 1200px) {
  :root {
    --sidebar-w: 200px;
    --props-w: 220px;
  }
}

@media (max-width: 900px) {
  :root {
    --sidebar-w: 0px;
    --props-w: 0px;
  }
  .left-sidebar { display: none; }
  .right-panel { display: none; }
  .left-toolbar { position: fixed; bottom: 32px; left: 0; width: 100%; height: 52px; flex-direction: row; border-right: none; border-top: 1px solid var(--border); overflow-x: auto; overflow-y: hidden; padding: 6px; z-index: 150; }
  .tool-group { flex-direction: row; width: auto; padding: 0 4px; }
  .tool-divider { width: 1px; height: 28px; margin: 0 4px; }
  .color-pickers { margin-top: 0; margin-left: auto; padding: 6px; flex-direction: row; align-items: center; }
  .canvas-area { bottom: 84px; }
  .status-bar { display: none; }
  .responsive-preview { display: none; }
}

@media (max-width: 600px) {
  .topnav-menus { display: none; }
  .topnav-left { gap: 0; }
  .logo-text { display: none; }
}

/* Touch support */
@media (hover: none) and (pointer: coarse) {
  .tool-btn::after { display: none; }
  .tool-btn { width: 44px; height: 44px; }
}

/* High DPI */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .canvas-wrapper canvas { image-rendering: -webkit-optimize-contrast; }
}