.mobile-drawer-actions,
.mobile-panel-backdrop { display: none; }
#closeLibraryPanel { display: none; }

@media (max-width: 900px) {
  body { min-width: 0; overscroll-behavior: none; }
  button { -webkit-tap-highlight-color: transparent; }

  .topbar {
    height: 58px;
    gap: 9px;
    padding: 0 10px;
  }
  .brand { width: 32px; flex: 0 0 32px; }
  .brand-mark { width: 32px; height: 32px; }
  .doc-title { display: none; }
  .top-actions {
    min-width: 0;
    flex: 1;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .top-actions::-webkit-scrollbar { display: none; }
  .top-actions .btn,
  .top-actions .icon-btn {
    min-height: 42px;
    flex: 0 0 auto;
  }
  .top-actions .btn { padding: 8px 11px; font-size: 11px; }

  .app-shell {
    display: block;
    height: calc(100dvh - 58px);
  }
  .workspace { height: 100%; }
  .workspace-toolbar {
    min-height: 52px;
    height: auto;
    padding: 6px 9px;
    gap: 8px;
  }
  .crumb { display: none; }
  .mobile-drawer-actions { display: flex; gap: 6px; }
  .mobile-drawer-actions button {
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    padding: 0 11px;
    color: var(--green-dark);
    font-size: 11px;
    font-weight: 700;
  }
  .mobile-drawer-actions button[aria-expanded="true"] {
    background: var(--green-pale);
    border-color: #86af99;
  }
  .view-actions { margin-left: auto; }
  .view-actions .mini-btn { width: 40px; height: 40px; }
  .zoom-control { height: 40px; }
  .zoom-control button { width: 38px; font-size: 18px; }
  .zoom-control span { min-width: 45px; }

  .canvas-wrap {
    padding: 12px;
    padding-bottom: 88px;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }
  .canvas-hint {
    position: absolute;
    bottom: 76px;
    left: 50%;
    max-width: calc(100vw - 28px);
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tool-rail {
    position: fixed;
    z-index: 16;
    left: 10px;
    right: 10px;
    bottom: max(9px, env(safe-area-inset-bottom));
    height: 60px;
    padding: 5px;
    border: 1px solid #3a4841;
    border-radius: 15px;
    box-shadow: 0 9px 28px rgba(13, 22, 17, .28);
    flex-direction: row;
    justify-content: space-around;
  }
  .tool { width: 68px; min-height: 48px; }
  .tool span { font-size: 19px; }
  .rail-divider { width: 1px; height: 36px; margin: 3px; }

  .library-panel,
  .properties-panel {
    display: block;
    position: fixed;
    z-index: 31;
    top: 0;
    bottom: 0;
    width: min(88vw, 360px);
    max-width: none;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    box-shadow: 0 0 34px rgba(12, 22, 17, .25);
    transition: transform .22s ease;
    overscroll-behavior: contain;
  }
  .library-panel {
    left: 0;
    padding: 18px 14px 80px;
    transform: translateX(-105%);
  }
  .properties-panel {
    right: 0;
    padding-bottom: 70px;
    transform: translateX(105%);
  }
  .library-panel.mobile-open,
  .properties-panel.mobile-open { transform: translateX(0); }
  .library-panel .panel-heading,
  .properties-panel .panel-heading {
    position: sticky;
    z-index: 2;
    top: 0;
    padding-top: max(2px, env(safe-area-inset-top));
    background: var(--panel);
  }
  .library-panel .mini-btn,
  .properties-panel .mini-btn { width: 44px; height: 44px; font-size: 20px; }
  #closeLibraryPanel { display: block; }
  .component-grid { grid-template-columns: 1fr 1fr; }
  .component-card { min-height: 96px; height: auto; }
  .section-title { min-height: 44px; align-items: center; padding-bottom: 0; }
  .search { height: 46px; }
  .search input { font-size: 16px; }

  .prop-section { padding: 16px; }
  .prop-section label { font-size: 12px; }
  .prop-section input,
  .prop-section textarea,
  .prop-section select {
    min-height: 46px;
    padding: 11px;
    font-size: 16px;
  }
  .toggle-row { min-height: 48px; }
  .toggle-row i { width: 44px; height: 26px; border-radius: 14px; }
  .toggle-row i::after { width: 22px; height: 22px; }
  .toggle-row input:checked + i::after { left: 20px; }
  .danger-zone button,
  .editable-convert { min-height: 46px; font-size: 12px; }

  .mobile-panel-backdrop {
    display: block;
    position: fixed;
    z-index: 30;
    inset: 0;
    width: 100%;
    border: 0;
    background: rgba(11, 17, 14, .48);
  }
  .mobile-panel-backdrop[hidden] { display: none; }

  .modal-backdrop,
  .library-dialog-backdrop { padding: 10px; align-items: end; }
  .template-modal,
  .library-dialog {
    width: 100%;
    max-height: calc(100dvh - 20px);
    overflow: auto;
    border-radius: 16px 16px 10px 10px;
    padding: 18px;
  }
  .modal-heading .mini-btn { width: 44px; height: 44px; flex: 0 0 44px; }
  .template-save-panel { grid-template-columns: 1fr; }
  .template-save-actions { flex-direction: column; }
  .template-save-actions input,
  .template-save-actions .btn { width: 100%; min-height: 46px; font-size: 16px; }
  .template-gallery { grid-template-columns: 1fr; }
  .custom-template-open { grid-template-columns: 92px 1fr; }
  .custom-template-open .gallery-preview { width: 92px; }
  .gallery-card { min-height: 96px; }
  .revision-layout { grid-template-columns: 1fr; }
  .revision-form input,
  .revision-form textarea { min-height: 46px; font-size: 16px; }
  .revision-history { max-height: none; }
  .toast,
  .portal-toast { bottom: 82px; max-width: calc(100vw - 24px); text-align: center; }

  .portal-nav { height: 58px; padding: 0 12px; gap: 10px; }
  .portal-brand { font-size: 15px; }
  .portal-nav-links { display: none; }
  .account-menu { min-width: 0; gap: 6px; }
  .account-menu > span:not(.account-chip) { display: none; }
  .account-menu button { min-height: 42px; padding-inline: 8px; }
  .portal-main { padding: 24px 14px 60px; }
  .portal-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
  .portal-heading h1 { font-size: 24px; }
  .portal-actions { width: 100%; }
  .portal-actions .portal-btn { min-height: 44px; flex: 1; }
  .card-actions button { min-height: 40px; flex: 1; font-size: 10px; }
  .dialog-actions .portal-btn { min-height: 44px; }
  .auth-form-wrap { padding: 16px; }
  .auth-card { padding: 22px 18px; }
  .account-form input,
  .dialog-form input,
  .dialog-form textarea,
  .dialog-form select { min-height: 46px; font-size: 16px; }
}

@media (max-width: 420px) {
  .top-actions #libraryBtn,
  .top-actions #undoBtn { display: none; }
  .top-actions #downloadFileBtn,
  .top-actions #exportPdfBtn,
  .top-actions #exportBtn { font-size: 10px; padding-inline: 8px; }
  .zoom-control span { display: none; }
  .zoom-control button + span + button { border-left: 1px solid var(--line); }
  .zoom-slider { width: 90px; }
  .component-grid { gap: 7px; }
  .field-row { grid-template-columns: 1fr; }
  .gallery-card { grid-template-columns: 92px 1fr; }
  .gallery-preview { width: 92px; }
}

@media (hover: none) and (pointer: coarse) {
  .free-node .selection { stroke-width: 3; }
  .connection-hit { stroke-width: 24; }
}