/* Mobile editing: one scroll surface, reachable controls and keyboard-safe forms. */
@media (max-width: 768px) {
    body { height: var(--editing-viewport-height,100dvh); }
    .main-container { min-width: 0; height: var(--editing-viewport-height,100dvh); padding: 0; }
    .top-bar { gap: 10px; padding: max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left)); }
    .top-bar h3 { flex: 1; font-size: 15px; }
    .user-info { width: 100%; min-width: 0; flex-wrap: wrap; overflow-wrap: anywhere; font-size: 12px; }
    .content-area { padding: 18px; padding-bottom: max(24px,env(safe-area-inset-bottom)); }
    .sidebar { height: 100dvh; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); box-shadow: 8px 0 35px rgba(0,0,0,.2); }
    .sidebar-header h2, .sidebar-header small, .sidebar .nav-link span { display: block; }
    .sidebar .nav-link { justify-content: flex-start; min-height: 48px; gap: 12px; }
    .sidebar .nav-link i { width: 20px; }
    #login-screen { top: var(--editing-viewport-top,0px); bottom: auto; height: var(--editing-viewport-height,100dvh); padding: max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom)); overflow-y: auto; }
    .login-box { padding: 26px 22px; margin: auto; }
    .form-control, .input-control, .pm-url-input-wrap .form-control, .ap-search-bar .form-control { font-size: 16px; min-height: 48px; }
    .form-row, .pm-three-col, .pm-layout { grid-template-columns: minmax(0,1fr); }
    .pm-preview-col { position: static; border-right: 0; border-bottom: 1px solid var(--border); padding: 18px; }
    .pm-img-box { aspect-ratio: auto; height: min(220px,30dvh); }
    .pm-form-col { max-height: none; overflow-y: visible; padding: 18px; }
    .modal-overlay { top: var(--editing-viewport-top,0px); bottom: auto; align-items: stretch; height: var(--editing-viewport-height,100dvh); padding: 0; }
    .modal, .modal.modal-xl, .modal.modal-lg, .modal.modal-sm { width: 100%; max-width: 100%; max-height: 100%; border-radius: 0; overflow: hidden; }
    .modal-header { padding: max(12px,env(safe-area-inset-top)) 16px 12px; gap: 12px; }
    .modal-header h3 { min-width: 0; }
    .modal-body { min-height: 0; padding: 18px; overscroll-behavior-y: contain; }
    #modal-painting .modal-body { overflow-y: auto !important; }
    .modal-tabs { flex-shrink: 0; overflow-x: auto; }
    .modal-tab { min-height: 48px; flex: 0 0 auto; font-size: 13px; }
    .modal-footer { flex-wrap: wrap; padding: 12px 16px max(12px,env(safe-area-inset-bottom)); }
    .modal-footer button { flex: 1; justify-content: center; }
    .btn-primary, .btn-secondary, .btn-danger, .btn-outline, .close-modal, .icon-btn, .ex-remove-btn, .profile-editor-remove, .profile-media-actions button { min-height: 44px; min-width: 44px; }
    .ap-card-actions { opacity: 1; background: linear-gradient(transparent,rgba(0,0,0,.45)); align-items: flex-end; padding: 10px; }
    .ap-card-actions button { width: 44px; height: 44px; }
    .ex-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); padding: 12px; }
    .ex-remove-btn { margin-top: 0; }
    .ex-section { padding: 16px; }
    .ex-section-header { flex-wrap: wrap; }
    #toast-container { bottom: max(16px,env(safe-area-inset-bottom)); left: 16px; right: 16px; }
    .toast { max-width: 100%; overflow-wrap: anywhere; }
    .table-container { max-width: 100%; overscroll-behavior-x: contain; }
    .side-panel { width: 100%; height: 100dvh; }
}