/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
    .home-top, .tp-grid, .dp-grid, .dh-layout { grid-template-columns: minmax(0, 1fr); }
    .dh-rail { position: static; order: -1; flex-direction: row; flex-wrap: wrap; }
    .dh-rail .rail-title, .dh-rail .rail-btn.sub { display: none; }
    .dh-rail .rail-btn { width: auto; }
}

@media (max-width: 768px) {
    .app-header { padding: 0 16px; }
    .app-main-content { padding: 18px 16px; }
    .user-info, .sync-status span, .header-divider, .active-module-indicator { display: none; }
    .user-profile-badge { padding-left: 12px; }
    .toolbar-container { flex-direction: column; align-items: stretch; gap: 12px; }
    .search-input-wrapper { width: 100%; }
    .roles-layout { grid-template-columns: 1fr; }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 16px 16px; }
    .spec-list li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .spec-list .k.child { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}