/**
 * user_shares 移动端边距与垂直节奏
 * 水平 gutter 与全站顶栏共用 --sa-topbar-px；模块内用 --us-inner-x。
 */

:root {
    --us-gutter: var(--sa-topbar-px, 24px);
    --us-inner-x: var(--sa-topbar-px, 24px);
    --us-section-gap: 20px;
    --us-card-radius: 12px;
}

@media (max-width: 768px) {
    :root {
        --us-gutter: var(--sa-topbar-px, 12px);
        --us-inner-x: var(--sa-topbar-px, 12px);
        --us-section-gap: 12px;
        --us-card-radius: 10px;
    }

    body > .container,
    .container {
        max-width: 100% !important;
        padding-top: 10px !important;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
        padding-left: max(var(--us-gutter), env(safe-area-inset-left, 0px)) !important;
        padding-right: max(var(--us-gutter), env(safe-area-inset-right, 0px)) !important;
    }

    .user-shares-sticky-top {
        margin-bottom: 0 !important;
        border-bottom-color: #e8ecf0 !important;
    }

    .user-shares-topbar-stack .sa-site-bar--user-shares {
        border-bottom-color: #e8ecf0;
    }

    .user-shares-topbar-stack .sa-site-bar__inner {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        /* 水平 padding 沿用 site_topbar token，勿再写死 */
    }

    .user-shares-sticky-top .global-search-container,
    .user-shares-sticky-top .global-search-wrapper {
        max-width: 100% !important;
    }

    .user-shares-sticky-top .global-search-container {
        padding-left: max(var(--us-gutter), env(safe-area-inset-left, 0px)) !important;
        padding-right: max(var(--us-gutter), env(safe-area-inset-right, 0px)) !important;
    }

    .user-shares-topbar-stack {
        margin-bottom: 0 !important;
        border-bottom-color: #e8ecf0 !important;
    }

    .shares-module {
        margin-bottom: var(--us-section-gap) !important;
        border-radius: var(--us-card-radius) !important;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.03) !important;
    }

    .shares-header {
        padding: 14px var(--us-inner-x) !important;
        gap: 10px !important;
    }

    .shares-title {
        font-size: 1.2rem !important;
    }

    .monthly-change-container {
        padding: 16px var(--us-inner-x) !important;
    }

    .trade-analytics-daily-wrap {
        padding: 12px var(--us-inner-x) 14px !important;
    }

    .index-chart-container {
        padding: 10px var(--us-inner-x) 14px !important;
        min-height: 268px !important;
    }

    #index-chart {
        min-height: 268px !important;
    }

    .skeleton-chart {
        padding: 12px var(--us-inner-x) !important;
        min-height: 268px !important;
    }

    .shares-grid,
    .skeleton-shares {
        padding: 8px var(--us-inner-x) 14px !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .shares-list-wrap {
        padding: 0 var(--us-inner-x) 12px !important;
    }

    .sort-tabs,
    .today-realtime-summary {
        padding-left: var(--us-inner-x) !important;
        padding-right: var(--us-inner-x) !important;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }

    .recovery-strategy-flyout {
        margin-left: var(--us-inner-x) !important;
        margin-right: var(--us-inner-x) !important;
    }

    .user-shares-decision-zone {
        margin-bottom: var(--us-section-gap) !important;
    }

    body:not(.is-shared-view) .user-shares-decision-zone:has(#recovery-module.admin-mode) {
        gap: var(--us-section-gap) !important;
    }

    .empty-state-modern,
    #empty-state.empty-state-modern {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 28px var(--us-inner-x) 36px !important;
    }

    #shares-container #error-state.error-state {
        margin: 0 var(--us-inner-x) 12px !important;
    }

    .rankings-container {
        padding: 0 var(--us-inner-x) 12px !important;
    }

    #rankings-skeleton.skeleton-rankings {
        margin: 0 var(--us-inner-x) !important;
    }
}

@media (max-width: 480px) {
    :root {
        --us-gutter: 14px;
        --us-inner-x: 14px;
        --us-section-gap: 10px;
        --us-card-radius: 8px;
    }

    .user-shares-sticky-top .global-search-container {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    .shares-header {
        padding: 12px var(--us-inner-x) !important;
    }

    .shares-title {
        font-size: 1.1rem !important;
    }

    .index-chart-container,
    #index-chart,
    .skeleton-chart {
        min-height: 240px !important;
    }

    .sort-tab {
        padding: 5px 12px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 360px) {
    :root {
        --us-gutter: 12px;
        --us-inner-x: 12px;
    }
}