переключение адаптива для разных устройств по поинтеру,а не по ширине

styles.css

@@ -1360,11 +1360,14 @@ html[data-theme="light"] .accent-swatch-custom {
 /* ==========================================================================
    13. Responsive Layout
    --------------------------------------------------------------------------
-   На планшетах sidebar перестает быть отдельной колонкой, а на телефонах
-   уменьшаются панели, кнопки и размеры карточек.
+   Основной режим выбирается по типу ввода, а не по ширине экрана:
+   - touch / coarse pointer -> компактный "мобильный" layout;
+   - hover + fine pointer -> десктопный layout даже на широком touch-мониторе.
+   Узкое окно с мышью дополнительно поджимает сетку через max-width fallback.
    ========================================================================== */
 
-@media (max-width: 1120px) {
+/* Узкое окно на устройствах с мышью: sidebar и сетка карточек чуть компактнее. */
+@media (hover: hover) and (pointer: fine) and (max-width: 1120px) {
   .app-layout {
     grid-template-columns: minmax(240px, min(var(--sidebar-width), 320px)) 8px minmax(0, 1fr);
   }
@@ -1378,7 +1381,8 @@ html[data-theme="light"] .accent-swatch-custom {
   }
 }
 
-@media (max-width: 720px) {
+/* Touch-устройства: stacked layout, без resizer, крупнее touch-targets. */
+@media (hover: none), (pointer: coarse) {
   .shell {
     width: min(var(--shell-max-width), calc(100% - 22px));
     padding: 14px 0;