/*
 * 手机端显示修正：仅在窄屏生效。
 * 只调整排布、间距、换行和容器滚动，不隐藏数据列，不改变控件状态或业务操作。
 */
@media (max-width: 760px) {
    /* 共享管理页面：限制网格子项最小宽度，避免长标题挤出整个页面。 */
    .shell {
        width: 100%;
        min-width: 0;
        padding: 16px 12px;
    }
    .shell header {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
    }
    .shell header > *,
    .shell .card,
    .shell .panel,
    .shell .form-grid > *,
    .shell .two-cols > * {
        min-width: 0;
        max-width: 100%;
    }
    .shell h1 {
        font-size: 22px;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }
    .shell header nav {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        gap: 8px;
    }
    .shell header nav a,
    .shell header nav button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        padding: 8px 10px;
        flex: 1 1 auto;
    }
    .shell .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 16px;
    }
    .shell .stats .card {
        padding: 12px;
    }
    .shell .stats strong {
        font-size: 22px;
        overflow-wrap: anywhere;
    }
    .shell .form-grid,
    .shell .two-cols {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    .shell .tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        max-width: 100%;
    }
    .shell .tabs button {
        flex: 0 0 auto;
        padding: 12px 16px;
    }
    .shell .panel {
        padding: 14px;
    }
    .shell .toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 8px;
    }
    .shell .toolbar > * {
        min-width: 0;
        max-width: 100%;
    }
    .shell .toolbar > input:not([type='checkbox']):not([type='hidden']),
    .shell .toolbar > label {
        flex: 1 1 100%;
        width: 100%;
    }
    .shell .toolbar > button,
    .shell .toolbar > select {
        flex: 1 1 130px;
        min-height: 42px;
        white-space: normal;
    }
    .shell .form-grid input:not([type='checkbox']),
    .shell .form-grid select,
    .shell .form-grid textarea {
        width: 100%;
        min-width: 0;
    }
    .shell .table-wrap {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .shell .pager {
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }
    .shell .pager > * {
        min-width: 0;
        max-width: 100%;
    }
    .shell .pager button {
        min-height: 42px;
    }
    .shell .section-heading {
        flex-wrap: wrap;
    }
    .shell .webhook-row {
        flex-wrap: wrap;
    }
    .shell .webhook-row input {
        flex-basis: 100%;
    }
    .shell .webhook-row button {
        min-height: 42px;
    }
    #notice,
    #message,
    #runtime,
    #page-error {
        overflow-wrap: anywhere;
    }

    /* 历史首页外壳：导航和用户名换行，标题与平台说明分开排布。 */
    body > nav {
        align-items: flex-start;
        gap: 10px;
        padding: 14px 12px;
    }
    body > nav .right {
        margin-left: 0;
        width: 100%;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        overflow-wrap: anywhere;
    }
    body > nav .right button {
        min-height: 42px;
    }
    main > .heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* TI 管理：顶部操作与分页允许换行，型号/监控表继续在自身容器内滚动。 */
    #main-app {
        min-width: 0;
        width: 100%;
        padding: 16px 12px;
    }
    #main-app > header {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    #main-app > header > div {
        min-width: 0;
        max-width: 100%;
    }
    #main-app > header > .flex {
        flex-wrap: wrap;
        gap: 10px;
    }
    #main-app h1 {
        font-size: 22px;
        line-height: 1.45;
    }
    #tab-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    #tab-nav > button {
        flex-shrink: 0;
        white-space: nowrap;
    }
    #main-app .tab-content {
        padding: 14px;
        min-width: 0;
    }
    #main-app .grid > * {
        min-width: 0;
    }
    #main-app .flex.justify-between {
        flex-wrap: wrap;
        gap: 10px;
    }
    #models-pagination,
    #monitor-pagination {
        flex-wrap: wrap;
        max-width: 100%;
    }
    #main-app input,
    #main-app select {
        min-width: 0;
        max-width: 100%;
    }
    #subscribe-modal > div,
    #history-modal > div {
        width: calc(100% - 24px);
        max-height: 90vh;
        overflow-y: auto;
        padding: 16px;
    }
    #history-modal h3 {
        overflow-wrap: anywhere;
    }
    #toast {
        max-width: calc(100vw - 24px);
        overflow-wrap: anywhere;
    }

    /* 汇率页面：顶部返回/退出操作在窄屏换行，提示信息不超出屏幕。 */
    body > .max-w-\[1180px\] > .flex {
        flex-wrap: wrap;
        gap: 12px;
    }
    #tokenGate > .card {
        max-height: 90vh;
        overflow-y: auto;
    }
}

@media (max-width: 420px) {
    .shell .filter-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .shell .toolbar > button,
    .shell .toolbar > select {
        flex-basis: 120px;
    }
    #main-app .tab-content .flex.gap-2 > button {
        flex-shrink: 0;
    }
}