/* ============================================
   移动端样式表 — 自动从 style.css 提取
   断点：768px（平板/大屏手机）| 480px（小屏手机）
   ============================================ */

/* #1 — 768px (原 style.css:1171) */
        @media (max-width: 768px) {
            .section-nav { display: none !important; }
        }
/* #2 — 768px (原 style.css:3926) */
@media (max-width: 768px) {
  .osv2-hero-section {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 12px;
  }

  .osv2-hero-card {
    padding: 16px;
  }

  .osv2-hero-value {
    font-size: 20px;
  }

  .osv2-secondary-section,
  .osv2-history-section {
    padding: 16px;
  }

  .osv2-stats-grid {
    grid-template-columns: 1fr;
  }

  .osv2-toplist-section {
    grid-template-columns: 1fr;
    padding: 16px;
  }
}
/* #3 — 768px (原 style.css:4847) */
        @media (max-width: 768px) {
            .stock-cards-container.grid-view {
                grid-template-columns: 1fr;
            }
        }
/* #4 — 768px (原 style.css:4868) */
        @media (max-width: 768px) {
            .realtime-info {
                flex-direction: column;
                align-items: stretch;
            }

            .realtime-content {
                justify-content: center;
                padding-right: 0;
            }

            .realtime-actions {
                justify-content: center;
                padding-top: 0;
            }

            .refresh-status {
                right: 12px;
                top: 8px;
            }

            .stock-card-quote-grid {
                grid-template-columns: 1fr;
            }

            .stock-card-metric-grid,
            .stock-card-metric-grid-3 {
                grid-template-columns: 1fr;
            }

            .overview-stock-stats,
            .stock-stats-columns {
                grid-template-columns: 1fr;
            }

            .profit-loss-item {
                grid-template-columns: 24px minmax(0, 1fr);
                align-items: start;
            }

            .profit-loss-stats {
                grid-column: 2;
                align-items: flex-start;
                min-width: 0;
            }

            .stock-cards-container {
                grid-template-columns: 1fr;
            }

            .back-btn {
                padding: 6px 10px;
                font-size: 12px;
            }
        }
/* #5 — 768px (原 style.css:4924) */
        @media (max-width: 768px) {
            body {
                padding: 6px;
            }

            .container {
                padding: 14px;
            }

            h1 {
                font-size: 22px;
            }

            .form-row {
                grid-template-columns: 1fr;
            }

            .charts-container {
                grid-template-columns: 1fr;
            }

            table {
                font-size: 12px;
            }

            th, td {
                padding: 8px 4px;
            }

            .chart-container {
                height: 280px;
            }

            /* 移动端图表高度覆盖（覆盖 inline style） */
            #dailyPnLChart {
                height: 280px !important;
            }

            #tradeRecordsDailyAmountChart,
            #tradeRecordsDailyProfitChart,
            #tradeRecordsTypeDistributionChart,
            #tradeRecordsDailyCountChart,
            #tradeRecordsStockAmountChart,
            #tradeRecordsStockProfitChart {
                height: 250px !important;
            }

            #profitCompositionChart {
                height: 260px !important;
            }
        }
/* #6 — 768px (原 style.css:5168) */
        @media (max-width: 768px) {
            .pagination-controls {
                flex-direction: column;
                align-items: stretch;
            }

            .pagination-info {
                text-align: center;
                min-width: auto;
            }

            .pagination-buttons {
                justify-content: center;
            }
        }
/* #7 — 480px (原 style.css:7163) */
@media (max-width: 480px) {

    .alert-container {

        left: 10px;

        right: 10px;

        max-width: none;

    }



    .alert {

        max-width: 100%;

        width: 100%;

        box-sizing: border-box;

        padding: 12px 16px;

        font-size: 13px;

        word-break: break-word;

        overflow-wrap: break-word;

    }



    .alert-icon {

        margin-right: 8px;

        font-size: 16px;

    }



    .alert-close {

        margin-left: 8px;

        font-size: 16px;

    }

}
/* #8 — 768px (原 style.css:7233) */
@media (max-width: 768px) {
    /* ── header-bar 内边距缩减 ── */
    .header-bar {
        padding: 10px 12px;
    }

    /* ── headerLeft 占满整行 ── */
    #headerLeft {
        min-width: 100%;
    }

    /* ── 标题区域：截断 + 弹性布局 ── */
    .header-title {
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }

    .header-title h1 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ── header-right-actions 换行布局 ── */
    .header-right-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
        width: 100%;
    }

    /* ── 搜索容器（默认隐藏，点击展开） ── */
    .search-container {
        display: none !important;
        order: 3;
        width: 100%;
        margin-right: 0;
        margin-top: 8px;
    }
    .search-container.expanded {
        display: flex !important;
    }

    /* ── 搜索输入框 ── */
    .search-input {
        width: 100%;
        max-width: 100%;
    }

    /* ── 行情报价内联样式 ── */
    .header-quote {
        justify-content: flex-start;
        gap: 6px;
    }

    .header-quote-item {
        min-width: 60px;
        padding: 4px 8px;
    }

    .header-quote-group {
        min-width: 80px;
    }

    /* 移动端标题栏精简：重复入口按钮隐藏，底部 tab 栏替代 */
    #periodAnalysisBtn,
    #tradeRecordsBtn {
        display: none;
    }
    #settingsBtn {
        display: none !important;
    }

    /* 详情页：隐藏与详情页内部重复的报价组 */
    .header-quote-group:nth-of-type(3),
    .header-quote-group:nth-of-type(4),
    .header-quote-group:nth-of-type(5) {
        display: none;
    }

    /* 交易记录页：隐藏股票筛选下拉框 */
    #tradeRecordsStockFilter {
        display: none;
    }

    /* 移动端搜索切换（仅汇总页显示） */
    body:not(.page-detail):not(.page-trade-records):not(.page-period) .search-toggle-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin-left: auto;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: var(--text-primary);
        cursor: pointer;
        flex-shrink: 0;
    }
    .search-toggle-btn:active {
        background: rgba(128, 128, 128, 0.1);
    }

    /* 移动端隐藏 FAB 主题切换，改用 header 内联按钮 */
    .theme-toggle-btn,
    .theme-toggle-fab-trigger {
        display: none !important;
    }
    #mobileThemeBtn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin-left: 4px;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: var(--text-primary);
        cursor: pointer;
        flex-shrink: 0;
    }
    #mobileThemeBtn:active {
        background: rgba(128, 128, 128, 0.1);
    }

    /* 详情页：行情报价换到第二行（标题截断已在全局处理） */
    body.page-detail .header-quote {
        width: 100%;
    }
}
/* #9 — 768px (原 style.css:7377) */
@media (max-width: 768px) {

    .stock-card-list {

        flex-wrap: wrap;

        gap: 8px;

        min-width: auto;

        padding: 10px 12px;

    }



    .stock-card-list-name {

        min-width: auto;

        width: 100%;

        flex-direction: row;

        justify-content: space-between;

        align-items: center;

        margin-bottom: 8px;

    }



    .stock-card-list-item {

        min-width: auto;

        flex: 1 1 calc(33.33% - 8px);

        max-width: calc(50% - 4px);

    }

}
/* #10 — 768px (原 style.css:7428) */
@media (max-width: 768px) {
    .tr-stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .tr-stat-card {
        padding: 14px;
    }

    .tr-stat-icon {
        width: 36px;
        height: 36px;
    }

    .tr-stat-value {
        font-size: 18px;
    }

    /* 头部筛选器响应式 */
    .header-tr-filters {
        flex-wrap: wrap;
        gap: 8px;
        margin-left: 0;
        margin-top: 8px;
        /* 在小屏幕时占据整行 */
        width: 100%;
        order: 10;
    }

    .header-tr-input {
        width: 90px;
    }

    .header-tr-quick-btns {
        flex-wrap: wrap;
    }

    .header-tr-select {
        min-width: 100px;
    }
}
/* #11 — 768px (原 style.css:7471) */
@media (max-width: 768px) {

    .modal-content {

        padding: 16px;

        margin: 5% auto;

        width: 95%;

        max-width: none;

    }



    .settings-modal-content,
    .backup-modal-content,
    .alert-modal-content,
    .field-settings-content {
        max-width: none;
        max-height: 92vh;
        border-radius: 16px;
    }

    .modal-header,
    .settings-section,
    .modal-footer {
        padding-left: 20px;
        padding-right: 20px;
    }

    .storage-cards {
        grid-template-columns: 1fr;
    }

    .data-button-row {
        flex-direction: column;
    }

    .data-button-row-4 {
        grid-template-columns: 1fr 1fr;
    }

    /* 设置 Tab 移动端适配 */
    .settings-tabs {
        padding: 0 20px;
    }

    .settings-tab-btn {
        padding: 10px 12px;
        font-size: 13px;
    }

    .settings-tab-btn svg {
        width: 14px;
        height: 14px;
    }

    /* 双列变单列 */
    .settings-tab-columns {
        grid-template-columns: 1fr;
    }

    .settings-tab-column:first-child {
        border-right: none;
        border-bottom: 1px solid #eeeff6;
    }

    .settings-tab-column {
        padding: 16px 20px;
    }

    .settings-tab-single {
        padding: 16px 20px;
    }



    .modal-header h2,

    .modal-header h3 {

        font-size: 16px;

    }



    .modal-footer {

        flex-wrap: wrap;

    }



    .modal-footer .btn {

        flex: 1;

        min-width: 80px;

    }

}
/* #12 — 768px (原 style.css:7582) */
@media (max-width: 768px) {

    .trade-records-header {

        padding: 10px 12px;

    }



    .trade-records-controls {

        flex-direction: column;

        align-items: stretch;

        gap: 10px;

    }



    .trade-records-filters {

        flex-direction: column;

        align-items: stretch;

        gap: 8px;

    }



    .trade-records-date-filters {

        flex-wrap: wrap;

        gap: 6px;

    }



    .trade-records-filter-input {

        flex: 1;

        min-width: 0;

        width: auto;

    }



    .trade-records-filter-separator {

        display: none;

    }



    .trade-records-summary {

        justify-content: center;

        flex-wrap: wrap;

        margin-left: 0;

        gap: 8px;

    }

}
/* #13 — 768px (原 style.css:7664) */
@media (max-width: 768px) {

    .trade-records-charts .chart-row {

        flex-direction: column;

        gap: 12px;

    }



    .trade-records-charts .chart-container {

        width: 100% !important;

    }



    .chart-box {

        min-width: 0;

    }

}
/* #14 — 768px (原 style.css:7696) */
@media (max-width: 768px) {

    .section-header {

        flex-direction: column;

        align-items: stretch;

        gap: 10px;

    }



    .section-header-right {

        flex-wrap: wrap;

        justify-content: flex-end;

        gap: 6px;

    }



    .section-header-right select {

        max-width: 100%;

        flex: 1;

        min-width: 100px;

    }



    .form-btn-group {

        flex-wrap: wrap;

    }



    .form-btn-group .btn {

        flex: 1;

        min-width: 60px;

    }

}
/* #15 — 480px (原 style.css:7756) */
@media (max-width: 480px) {

    .cycle-history-modal-container {

        width: 95%;

        max-height: 90vh;

    }



    .cycle-history-modal-header {

        padding: 12px 16px;

    }



    .cycle-history-modal-content {

        padding: 12px 16px;

    }

}
/* #16 — 480px (原 style.css:7788) */
@media (max-width: 480px) {

    .sync-diff-details {

        max-height: 200px;

        padding: 12px;

    }



    #syncDiffModal .modal-footer {

        flex-direction: column;

    }



    #syncDiffModal .btn {

        width: 100%;

    }

}
/* #17 — 480px (原 style.css:7820) */
@media (max-width: 480px) {

    .field-settings-grid {

        grid-template-columns: 1fr;

    }

}
/* #18 — 768px (原 style.css:8337) */
@media (max-width: 768px) {
    .cycle-history-section {
        margin: 16px 0;
    }

    .cycle-history-section-header {
        padding: 12px 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .cycle-history-section-header h3 {
        font-size: 15px;
    }

    .cycle-history-list {
        padding: 12px 16px;
    }
}
/* #19 — 768px (原 style.css:8433) */
@media (max-width: 768px) {
    .risk-card {
        flex: 1 1 calc(50% - 12px);
        min-width: 100px;
        padding: 12px 10px;
    }
    .risk-card-value {
        font-size: 15px;
    }
}
/* #20 — 768px (原 style.css:8716) */
@media (max-width: 768px) {
    .ac-table {
        font-size: 12px;
    }
    
    .ac-table th,
    .ac-table td {
        padding: 8px 10px;
    }
    
    .ac-cycle-header {
        padding: 8px 10px;
    }
    
    .ac-cycle-title {
        font-size: 13px;
    }
}
/* #21 — 768px (原 style.css:9097) */
@media (max-width: 768px) {
    .rtv2-hero-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .rtv2-hero-card:nth-child(2) {
        border-right: none;
    }
    
    .rtv2-hero-card:nth-child(3),
    .rtv2-hero-card:nth-child(4),
    .rtv2-hero-card:nth-child(5) {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
}
/* #22 — 768px (原 style.css:9805) */
@media (max-width: 768px) {
    .stock-cards-container.v2-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* 列表视图字段折叠 */
    .scl-cycle {
        display: none;
    }
    
    /* 列表视图调整 */
    .stock-card-list-v2 {
        padding: 10px 12px;
        gap: 8px;
    }
    .scl-position {
        min-width: 140px;
    }
    .scl-price {
        min-width: 120px;
    }
}
/* #23 — 480px (原 style.css:9829) */
@media (max-width: 480px) {
    .stock-cards-container.v2-grid {
        grid-template-columns: 1fr;
    }
    
    /* 卡片数据区改为 2 列 */
    .sc-data {
        grid-template-columns: repeat(2, 1fr);
    }
    .sc-col:nth-child(2) {
        border-right: none;
    }
    
    /* 列表视图垂直布局 */
    .stock-card-list-v2 {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .scl-identity,
    .scl-profit,
    .scl-position,
    .scl-price {
        width: 100%;
        flex: none;
    }
    .scl-actions {
        width: 100%;
        opacity: 1;
        justify-content: flex-end;
    }

    /* Top5 区域窄屏堆叠 */
    .osv2-toplist-columns {
        grid-template-columns: 1fr;
    }

    /* 卡片流式字号 */
    .sc-name {
        font-size: clamp(11px, calc(10px + 0.5vw), 14px);
    }
    .sc-col-value {
        font-size: clamp(10px, calc(9px + 0.4vw), 12px);
    }
    .sc-profit-value {
        font-size: clamp(22px, calc(17px + 1.4vw), 28px);
    }

    /* 卡片间距缩减 */
    .stock-cards-container {
        gap: 8px;
    }

    /* 标题字号缩小 */
    .header-bar h1 {
        font-size: clamp(16px, calc(12px + 1.6vw), 24px);
    }

    /* header-bar padding 缩减 */
    .header-bar {
        padding: 8px 10px;
    }

    /* 年度统计区默认折叠 */
    .sc-yearly-item.sc-yearly-hidden {
        display: none;
    }
    .sc-yearly .sc-yearly-more {
        display: inline-flex;
    }
}
/* #24 — 480px (原 style.css:10208) */
@media (max-width: 480px) {
    .delete-confirm-modal {
        max-width: 95%;
        margin: 10px;
    }

    .delete-confirm-header {
        padding: 16px;
    }

    .delete-confirm-body {
        padding: 16px;
    }

    .delete-confirm-footer {
        padding: 12px 16px;
    }

    .delete-confirm-footer .btn {
        min-width: 80px;
        padding: 8px 16px;
    }
}
/* #25 — 768px (原 style.css:10965) */
@media (max-width: 768px) {
    .sp-input-row {
        flex-direction: column;
        gap: 12px;
    }

    .sp-input-group,
    .sp-result-group {
        width: 100%;
    }

    .sp-input {
        width: 100%;
    }

    .sp-holding-row {
        flex-direction: column;
        gap: 12px;
    }

    .sp-holding-data {
        flex-wrap: wrap;
    }

    .sp-after-group {
        border-left: none;
        border-top: 1px solid #c8e6c9;
        padding-left: 0;
        padding-top: 12px;
    }

    .sp-amount-group {
        min-width: 100%;
    }

    .sp-amount-input {
        width: 100px;
        flex-shrink: 0;
    }

    .sp-quick-btns {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}
/* #26 — 768px (原 style.css:13077) */
@media (max-width: 768px) {
    .batch-import-body {
        padding: 16px;
    }
    .batch-preview-stats {
        flex-wrap: wrap;
        gap: 8px;
    }
}
/* #27 — 480px (原 style.css:13216) */
@media (max-width: 480px) {
    .pa-stats-grid {
        grid-template-columns: 1fr;
    }
}
/* #28 — 768px (原 style.css:14422) */
@media (max-width: 768px) {
    .pa-daily-layout {
        flex-direction: column;
    }

    .pa-daily-left {
        width: 100%;
        min-width: 0;
    }

    .pa-daily-right {
        width: 100%;
    }
}
/* #29 — 768px (原 style.css:14967) */
@media (max-width: 768px) {
    body:not(.page-detail) .mobile-tab-bar {
        display: flex;
    }
    body.page-detail .mobile-tab-bar {
        display: none;
    }

    /* ── 移动端 viewport 高度修复（华为等 Chromium 浏览器） ── */
    html {
        height: -webkit-fill-available;
    }

    .page-period {
        min-height: calc(100dvh - 56px);
    }
}
/* #30 — 480px (原 style.css:15024) */
@media (max-width: 480px) {
    .modal-content {
        width: 100%;
        max-width: none;
        margin: 0;
        border-radius: 16px 16px 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 92vh;
        animation: slideUp 0.3s ease-out;
    }

    .settings-modal-content,
    .backup-modal-content,
    .alert-modal-content,
    .field-settings-content {
        max-width: none;
        max-height: 92vh;
        border-radius: 16px 16px 0 0;
        margin: 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }

    /* 触控目标最小 44px */
    .btn,
    .tab-btn,
    .stock-card-list,
    .stock-card-list-item {
        min-height: 44px;
    }

    .btn {
        padding: 12px 16px;
    }

    /* Section 间距 */
    .section {
        padding: 12px 12px;
    }

    /* Header 标题 */
    h1 {
        font-size: clamp(15px, calc(12px + 1.3vw), 22px);
    }

    .stock-info {
        font-size: clamp(11px, calc(10px + 0.5vw), 14px);
    }

    /* Summary-v2 单列布局 */
    .summary-hero-section {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px 16px;
    }

    .summary-flow-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .summary-hero-card {
        padding: 14px;
    }

    .hero-card-value {
        font-size: clamp(24px, calc(18px + 1.8vw), 32px);
    }

    .flow-item {
        padding: 10px 12px;
    }

    /* 图表容器（min-height 而非固定 height，避免 dataZoom 滑动条被挤出，同桌面端修复模式） */
    .chart-box {
        min-height: 280px;
    }

    /* 移动端图表高度覆盖（覆盖 inline style） */
    #dailyPnLChart {
        height: 280px !important;
    }

    #tradeRecordsDailyAmountChart,
    #tradeRecordsDailyProfitChart,
    #tradeRecordsTypeDistributionChart,
    #tradeRecordsDailyCountChart,
    #tradeRecordsStockAmountChart,
    #tradeRecordsStockProfitChart {
        height: 220px !important;
    }

    #profitCompositionChart {
        height: 230px !important;
    }

    /* 悬浮按钮在移动端隐藏 */
    #addStockFloatBtn,
    #viewModeFloatBtn {
        display: none !important;
    }

    /* 弹窗模态背景 */
    .modal-overlay {
        background: rgba(0, 0, 0, 0.8);
    }
}
/* #31 — 768px (原 style.css:15127) */
@media (max-width: 768px) {
    body:not(.page-detail) {
        padding-bottom: 64px;
    }
}