@media (max-width: 768px) {
    .admin-body .page-heading {
        min-height: 0;
        padding: 22px;
    }

    .admin-body .stats-grid,
    .admin-body .mini-metrics {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .page-heading { align-items: stretch; flex-direction: column; }
    .sidebar {
        position: relative;
        inset: auto;
        width: min(100% - 20px, 1180px);
        min-height: auto;
        margin: 10px auto 0;
        padding: 14px;
        border: 1px solid rgba(255, 255, 255, 0.95);
        border-radius: 24px;
        box-shadow: var(--shadow);
    }
    .sidebar-head {
        padding: 0 2px 12px;
    }
    .sidebar .brand {
        padding: 0;
    }
    .app-body.is-sidebar-collapsed .sidebar,
    .sidebar-collapsed-pref .app-body .sidebar {
        width: min(100% - 20px, 1180px);
        gap: 0;
        padding: 14px;
    }
    .app-body.is-sidebar-collapsed .sidebar-head,
    .sidebar-collapsed-pref .app-body .sidebar-head {
        justify-content: space-between;
        padding: 0;
        border-bottom: 0;
    }
    .app-body.is-sidebar-collapsed .brand-name,
    .sidebar-collapsed-pref .app-body .brand-name {
        display: inline;
    }
    .app-body.is-sidebar-collapsed .brand,
    .sidebar-collapsed-pref .app-body .brand {
        flex: 1;
    }
    .app-body.is-sidebar-collapsed .sidebar-toggle,
    .sidebar-collapsed-pref .app-body .sidebar-toggle {
        position: relative;
        top: auto;
        right: auto;
        box-shadow: none;
    }
    .sidebar-nav {
        flex: none;
        gap: 7px;
    }
    .app-body.is-sidebar-collapsed .sidebar-nav,
    .sidebar-collapsed-pref .app-body .sidebar-nav {
        display: none;
    }
    .sidebar-logout {
        margin-top: 0;
    }
    .sidebar-nav a,
    .sidebar-nav .link-button {
        min-height: 42px;
        background: #f5f9fc;
    }
    .stats-grid, .content-grid, .analytics-grid, .analytics-grid.compact, .form-grid, .detail-grid { grid-template-columns: 1fr; }
    .settings-grid { grid-template-columns: 1fr; }
    h1 { font-size: 24px; }
    .page { width: min(100% - 20px, 1180px); margin: 18px auto 56px; }
    .app-body.is-sidebar-collapsed .page,
    .sidebar-collapsed-pref .app-body .page {
        width: min(100% - 20px, 1180px);
        margin: 18px auto 56px;
    }
    .panel { padding: 16px; }
    .auth-panel {
        width: min(340px, calc(100vw - 48px));
        min-height: 560px;
        padding: 84px 24px 28px;
    }
    .auth-panel-wide { width: min(100%, calc(100vw - 24px)); padding: 70px 16px 20px; }
    .btn { width: 100%; min-height: 44px; }
    .panel-head { align-items: flex-start; flex-direction: column; }
    .filters input, .filters select, .filters .btn { max-width: none; width: 100%; }
    .stats-grid { gap: 10px; }
    .bar-chart { grid-template-columns: repeat(3, minmax(0, 1fr)); height: auto; }
    .bar-pair { height: 160px; }
    .donut-wrap, .unit-donut-layout { grid-template-columns: 1fr; justify-items: center; }
    .mini-metrics { grid-template-columns: 1fr; }
    .stat-card { padding: 15px; }
    .stat-card strong { font-size: 28px; }
    .auth-shell { min-height: auto; padding: 20px 0; }
    .auth-panel-wide .form-grid { grid-template-columns: 1fr; }
    .auth-panel h1 { font-size: 22px; }
    .auth-panel > .muted { font-size: 13px; margin-bottom: 22px; }
    .auth-panel input, .auth-panel select, .auth-panel textarea { min-height: 44px; font-size: 14px; }
    .auth-panel .btn.primary { min-height: 44px; font-size: 13px; }
    .auth-welcome-panel {
        width: min(390px, calc(100vw - 28px));
        min-height: auto;
        padding: 34px 22px 28px;
    }
    .auth-logo-large { width: 82px; height: 82px; }
    .auth-welcome-panel h1, .auth-welcome-panel h2 { font-size: 22px; }
    .auth-input input { min-height: 48px; font-size: 14px; }
    .auth-welcome-panel .btn.primary { min-height: 52px; font-size: 15px; }
    .social-actions button { width: 46px; height: 46px; font-size: 21px; }
}

@media (max-width: 640px) {
    body.user-body {
        background: linear-gradient(180deg, #eef6ff 0%, #f8fafc 42%, #f8fafc 100%);
    }

    .user-body .page {
        width: min(100% - 14px, 420px);
        margin-top: 16px;
        padding-bottom: 8px;
    }

    .user-body .page-heading {
        position: relative;
        overflow: hidden;
        align-items: flex-start;
        margin-bottom: 16px;
        padding: 22px 24px 24px;
        border-radius: 22px;
        border-color: rgba(255, 255, 255, 0.72);
        background:
            radial-gradient(circle at 88% 18%, rgba(20, 184, 166, 0.28), transparent 28%),
            radial-gradient(circle at 100% 100%, rgba(37, 99, 235, 0.24), transparent 34%),
            linear-gradient(135deg, #172554, #1e3a8a);
        box-shadow: 0 18px 38px rgba(23, 37, 84, 0.2);
    }

    .user-body .page-heading h1 {
        position: relative;
        z-index: 1;
        max-width: 100%;
        font-size: clamp(22px, 7vw, 28px);
        line-height: 1.12;
        color: #fff;
        overflow-wrap: anywhere;
    }

    .user-body .page-heading::after {
        content: "";
        position: absolute;
        right: -26px;
        top: -30px;
        width: 130px;
        height: 130px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.08);
    }

    .user-body .welcome-kicker {
        position: relative;
        z-index: 1;
    }

    .user-body .user-dashboard-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 16px;
    }

    .user-body .user-dashboard-stats .stat-card {
        min-height: 104px;
        padding: 15px 14px 16px;
        border-radius: 18px;
    }

    .user-body .user-dashboard-stats .stat-card::before {
        height: 3px;
    }

    .user-body .user-dashboard-stats .stat-card span {
        min-height: 34px;
        font-size: 11px;
        line-height: 1.25;
    }

    .user-body .user-dashboard-stats .stat-card strong {
        margin-top: 8px;
        font-size: clamp(28px, 9vw, 34px);
        line-height: 1;
    }

    .user-body .user-history-panel {
        padding: 16px;
        border-radius: 22px;
    }

    .user-body .user-history-panel .panel-head {
        flex-direction: row;
        align-items: center;
        margin-bottom: 12px;
        padding-bottom: 0;
        border-bottom: 0;
    }

    .user-body .user-history-panel .panel-head h2 {
        font-size: 18px;
    }

    .user-body .user-history-panel .panel-head a {
        font-size: 13px;
        font-weight: 800;
    }

    .user-body .user-history-panel .table-wrap {
        overflow: visible;
    }

    .user-body .user-history-panel .mobile-table {
        border-spacing: 0 12px;
    }

    .user-body .user-history-panel .mobile-table tr {
        border-radius: 16px;
        box-shadow: 0 10px 24px rgba(30, 58, 138, 0.08);
    }

    .user-body .user-history-panel .mobile-table td {
        grid-template-columns: minmax(78px, 31%) minmax(0, 1fr);
        padding: 10px 12px;
    }

    .user-body .user-history-panel .mobile-table td::before {
        font-size: 11px;
    }

    .user-body .user-history-panel .badge {
        justify-content: center;
        width: 100%;
        padding: 6px 10px;
        font-size: 11px;
    }

    .user-body .documents-heading {
        display: none;
    }

    .user-body .upload-heading {
        display: none;
    }

    .user-body .user-documents-panel {
        padding: 14px;
        border-radius: 22px;
    }

    .user-body .document-list-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
        padding: 2px 2px 4px;
    }

    .user-body .document-list-head h1 {
        margin: 0;
        color: #172554;
        font-size: 20px;
        line-height: 1.15;
    }

    .user-body .document-list-head p {
        margin: 4px 0 0;
        color: #64748b;
        font-size: 12px;
        font-weight: 800;
    }

    .user-body .upload-list-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .user-body .upload-list-head .btn {
        width: auto;
        min-height: 38px;
        padding: 8px 14px;
        border-radius: 999px;
        font-size: 13px;
    }

    .user-body .user-documents-panel > .table-wrap {
        display: none;
    }

    .user-body .document-mobile-list {
        display: grid;
        gap: 12px;
        padding-bottom: 8px;
    }

    .user-body .document-item {
        display: grid;
        gap: 14px;
        padding: 14px;
        border: 1px solid #e5edf6;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 10px 24px rgba(30, 58, 138, 0.07);
    }

    .user-body .document-item-head {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 12px;
        align-items: start;
    }

    .user-body .document-number {
        display: inline-flex;
        width: 34px;
        height: 34px;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: #eff6ff;
        color: #1d4ed8;
        font-size: 13px;
        font-weight: 900;
    }

    .user-body .document-item h2 {
        margin: 0 0 9px;
        color: #172554;
        font-size: 15px;
        line-height: 1.35;
    }

    .user-body .document-item .badge {
        justify-content: center;
        min-width: 138px;
        padding: 6px 11px;
        font-size: 11px;
    }

    .user-body .document-note {
        display: grid;
        gap: 4px;
        padding: 10px 12px;
        border-radius: 14px;
        background: #f8fafc;
    }

    .user-body .document-note span {
        color: #64748b;
        font-size: 11px;
        font-weight: 900;
    }

    .user-body .document-note p {
        margin: 0;
        color: #334155;
        font-size: 13px;
    }

    .user-body .document-actions {
        display: flex;
        min-height: 42px;
        align-items: center;
        justify-content: stretch;
        gap: 8px;
    }

    .user-body .document-actions form {
        flex: 1;
        margin: 0;
    }

    .user-body .document-actions .document-action-button {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }

    .user-body .document-done {
        display: inline-flex;
        width: 100%;
        min-height: 38px;
        align-items: center;
        justify-content: center;
        padding: 0 14px;
        border-radius: 999px;
        background: #f0fdfa;
        color: #0f766e;
        font-size: 13px;
        font-weight: 900;
    }

    .user-body .upload-panel {
        padding: 16px;
        border-radius: 22px;
    }

    .user-body .upload-form {
        gap: 14px;
    }

    .user-body .upload-dropzone {
        min-height: 250px;
        padding: 28px 18px;
        border-style: solid;
        box-shadow: 0 14px 34px rgba(30, 58, 138, 0.08);
    }

    .user-body .upload-form .btn.primary {
        width: 100%;
        min-height: 48px;
        border-radius: 999px;
    }

    .user-body .profile-heading {
        display: none;
    }

    .user-body .profile-page-title {
        align-items: flex-start;
        gap: 12px;
        margin: 4px 0 16px;
    }

    .user-body .profile-page-title h1 {
        font-size: 27px;
        line-height: 1.05;
    }

    .user-body .profile-page-title p {
        font-size: 15px;
        line-height: 1.25;
    }

    .user-body .profile-desktop-grid {
        display: block;
    }

    .user-body .profile-desktop-grid > .profile-id-card {
        position: static;
        min-height: 0;
        background: rgba(255, 255, 255, 0.9);
        color: #172554;
    }

    .user-body .profile-back {
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }

    .user-body .profile-id-card {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 14px;
        margin-bottom: 14px;
        padding: 16px;
        border-radius: 22px;
    }

    .user-body .profile-id-main h2 {
        color: #172554;
        font-size: 21px;
        line-height: 1.15;
    }

    .user-body .profile-id-main p {
        color: #64748b;
        margin-top: 4px;
        font-size: 14px;
    }

    .user-body .profile-id-main span {
        background: #dbeafe;
        color: #1d4ed8;
        margin-top: 9px;
        padding: 6px 12px;
        font-size: 12px;
    }

    .user-body .profile-edit-shortcut {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 46px;
        border-radius: 14px;
        background: #00a99d;
        color: #fff;
    }

    .user-body .profile-avatar {
        width: 58px;
        height: 58px;
        border-radius: 18px;
        border-color: #e0f2fe;
        background: #eff6ff;
        color: #2563eb;
        font-size: 20px;
    }

    .user-body .profile-section-card {
        margin-bottom: 14px;
        padding: 18px;
        border-radius: 22px;
    }

    .user-body .profile-section-card > h2 {
        margin-bottom: 14px;
        font-size: 20px;
    }

    .user-body .profile-section-card .profile-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .user-body .profile-section-card .profile-info-grid div {
        min-height: 92px;
        padding: 14px;
        border-radius: 16px;
    }

    .user-body .profile-section-card .profile-info-grid dt {
        font-size: 13px;
        font-weight: 700;
    }

    .user-body .profile-section-card .profile-info-grid dd {
        color: #243247;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.3;
    }

    .user-body .profile-form {
        margin-top: 14px;
        padding-top: 14px;
    }

    .user-body .profile-edit-panel:not([hidden]) {
        align-items: start;
        padding: max(18px, calc(12px + env(safe-area-inset-top))) 6px calc(18px + env(safe-area-inset-bottom));
    }

    .user-body.is-user-profile-editing .profile-edit-panel:not([hidden]) {
        padding: 0;
    }

    .user-body .profile-edit-panel .profile-form {
        width: min(100%, 408px);
        max-height: calc(100dvh - max(42px, calc(24px + env(safe-area-inset-top))) - env(safe-area-inset-bottom));
        padding: 18px;
        border-radius: 22px;
    }

    .user-body.is-user-profile-editing .profile-edit-panel .profile-form {
        width: 100%;
        max-height: none;
        padding: 18px;
    }

    .user-body .profile-edit-panel input,
    .user-body .profile-edit-panel select,
    .user-body .profile-edit-panel textarea {
        min-height: 44px;
        font-size: 14px;
    }

    .user-body .profile-form-head h2 {
        font-size: 17px;
    }

    .user-body .profile-form-head p {
        font-size: 12px;
    }

    .user-body .profile-form-grid {
        gap: 12px;
    }

    .user-body .profile-edit-actions {
        flex-direction: column-reverse;
    }

    .user-body .profile-edit-actions .btn {
        width: 100%;
        min-height: 48px;
        border-radius: 999px;
    }

    .user-body .profile-form .btn.primary {
        width: 100%;
        min-height: 48px;
        border-radius: 999px;
    }

    .glass-login-shell { align-items: flex-start; padding: 14px; }
    .glass-login-card {
        margin: 8px 0;
        padding: 28px 22px;
        border-radius: 30px;
    }
    .glass-form-grid { grid-template-columns: 1fr; }
    .glass-close { top: 28px; right: 22px; }
    .glass-back { top: 22px; left: 22px; }
    .glass-header { margin-bottom: 24px; }
    .glass-header img { height: 72px; }
    .glass-header h1 { font-size: 19px; }
    .glass-header h2 { margin-top: 20px; font-size: 22px; }
    .glass-input input { min-height: 48px; }
    .glass-divider { margin: 26px 0; }
    .glass-social { margin-bottom: 26px; }
    .sidak-shell { padding: 14px; align-items: flex-start; }
    .sidak-card {
        margin: 10px 0;
        padding: 28px 22px 22px;
        border-radius: 14px;
    }
    .sidak-header { margin-bottom: 24px; }
    .sidak-logo { width: 82px; height: 82px; }
    .sidak-header h1 { font-size: 23px; }
    .sidak-header p { font-size: 11px; }
    .sidak-form { gap: 15px; }
    .sidak-input-wrap input { min-height: 46px; font-size: 14px; }
    .sidak-submit { min-height: 48px; }
    .brand-mark { width: 32px; height: 32px; }
    .page { width: min(100% - 16px, 1180px); margin-bottom: 32px; }
    .mobile-table {
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0 10px;
    }
    .mobile-table thead { display: none; }
    .mobile-table tbody, .mobile-table tr, .mobile-table td { display: block; width: 100%; }
    .mobile-table tr {
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        box-shadow: 0 8px 22px rgba(23, 50, 77, 0.07);
        overflow: hidden;
    }
    .mobile-table td {
        display: grid;
        grid-template-columns: minmax(96px, 36%) minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        padding: 11px 12px;
        border-bottom: 1px solid #edf3f7;
        overflow-wrap: anywhere;
    }
    .mobile-table td:last-child { border-bottom: 0; }
    .mobile-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
    }
    .mobile-table .empty {
        display: block;
        border: 0;
        text-align: center;
    }
    .mobile-table .empty::before { content: ""; display: none; }
    .mobile-table .btn { width: auto; min-height: 38px; }
    .row-actions { align-items: stretch; }
}

@media (max-width: 860px) {
    .user-body.app-body .sidebar,
    .sidebar-collapsed-pref .user-body.app-body .sidebar {
        width: min(100% - 14px, 420px);
        gap: 0;
        margin-top: 8px;
        padding: 12px 16px;
        border-radius: 20px;
    }

    .user-body.app-body .sidebar-head,
    .sidebar-collapsed-pref .user-body.app-body .sidebar-head {
        justify-content: space-between;
        padding: 0;
        border-bottom: 0;
    }

    .user-body.app-body .brand,
    .sidebar-collapsed-pref .user-body.app-body .brand {
        display: inline-flex;
        flex: 1;
        min-width: 0;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        color: #172554;
    }

    .user-body.app-body .brand-name,
    .sidebar-collapsed-pref .user-body.app-body .brand-name {
        position: static;
        display: inline-block;
        width: auto;
        height: auto;
        max-width: none;
        overflow: visible;
        clip: auto;
        color: #172554;
        font-size: 14px;
        font-weight: 900;
        white-space: nowrap;
    }

    .mobile-header-logout {
        display: block;
        flex: 0 0 auto;
        margin: 0;
    }

    .mobile-header-logout button {
        display: inline-flex;
        width: 38px;
        height: 38px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid #ccfbf1;
        border-radius: 12px;
        background: #f0fdfa;
        color: #0f766e;
        cursor: pointer;
    }

    .mobile-header-logout button:hover {
        border-color: #99f6e4;
        background: #ccfbf1;
    }

    .mobile-header-logout svg {
        width: 18px;
        height: 18px;
        fill: currentColor;
    }

    .user-body.app-body .sidebar-nav,
    .sidebar-collapsed-pref .user-body.app-body .sidebar-nav {
        display: none;
    }

    .user-bottom-nav {
        position: fixed;
        left: 50%;
        bottom: 0;
        bottom: env(safe-area-inset-bottom);
        z-index: 40;
        display: grid;
        width: min(100%, 420px);
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
        padding: 10px 18px calc(12px + env(safe-area-inset-bottom));
        transform: translateX(-50%);
        border: 1px solid rgba(255, 255, 255, 0.95);
        border-radius: 18px 18px 0 0;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 -12px 30px rgba(30, 58, 138, 0.08);
        backdrop-filter: blur(16px);
    }

    .user-bottom-nav.compact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .user-bottom-nav a {
        position: relative;
        display: inline-flex;
        min-height: 48px;
        align-items: center;
        justify-content: center;
        border-radius: 0;
        color: #a8b3c7;
        text-decoration: none;
    }

    .user-bottom-nav a:hover {
        color: #64748b;
    }

    .user-bottom-nav a.is-active {
        color: #2563eb;
    }

    .user-bottom-nav a.is-active::after {
        content: "";
        position: absolute;
        left: 24%;
        right: 24%;
        bottom: -12px;
        height: 3px;
        border-radius: 999px;
        background: #2563eb;
        box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25);
    }

    .user-bottom-nav svg {
        width: 22px;
        height: 22px;
        fill: currentColor;
    }

    .user-body.app-body .sidebar-logout {
        display: none;
    }

    .user-body.app-body .page,
    .sidebar-collapsed-pref .user-body.app-body .page {
        width: min(100% - 14px, 420px);
        margin: 18px auto 82px;
    }

    .is-user-profile-editing.app-body .page,
    .sidebar-collapsed-pref .is-user-profile-editing.app-body .page {
        margin: 14px auto;
        padding-bottom: 14px;
    }
}

@media (max-width: 380px) {
    .brand-name { max-width: 220px; }
    .mobile-table td { grid-template-columns: 1fr; gap: 4px; }
}