/* 管理端 H5 适配层：仅在平板及手机宽度启用，桌面布局继续由 admin.css 控制。 */
.admin-mobile-topbar,
.admin-sidebar-backdrop,
.admin-mobile-drawer-head {
    display: none;
}

@media (max-width: 960px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body.admin-mobile-nav-open {
        overflow: hidden;
    }

    .admin-layout {
        display: block;
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .admin-mobile-topbar {
        position: sticky;
        top: 0;
        z-index: 34;
        min-height: calc(58px + env(safe-area-inset-top));
        display: flex;
        align-items: center;
        gap: 12px;
        padding: env(safe-area-inset-top) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
        border-bottom: 1px solid var(--line);
        background: var(--panel);
        background: color-mix(in srgb, var(--panel) 94%, transparent);
        box-shadow: 0 8px 24px rgba(15, 23, 42, .07);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .admin-mobile-nav-toggle,
    .admin-mobile-drawer-head button {
        width: 44px;
        height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--panel);
        color: var(--text);
        box-shadow: none;
    }

    .admin-mobile-nav-toggle svg,
    .admin-mobile-drawer-head button svg {
        width: 21px;
        height: 21px;
    }

    .admin-mobile-brand {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .admin-mobile-brand img {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        border-radius: 10px;
        object-fit: contain;
    }

    .admin-mobile-brand span {
        min-width: 0;
        display: grid;
        gap: 1px;
    }

    .admin-mobile-brand strong,
    .admin-mobile-brand small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-mobile-brand strong {
        font-size: 14px;
    }

    .admin-mobile-brand small {
        color: var(--muted);
        font-size: 11px;
        font-weight: 700;
    }

    .admin-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 39;
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 0;
        background: rgba(15, 23, 42, .46);
        padding: 0;
        opacity: 1;
        -webkit-tap-highlight-color: transparent;
    }

    .admin-sidebar-backdrop[hidden] {
        display: none;
    }

    .admin-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 40;
        width: min(86vw, 320px);
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        padding: max(12px, env(safe-area-inset-top)) 14px max(12px, env(safe-area-inset-bottom));
        border-right: 1px solid var(--line);
        background: var(--panel);
        box-shadow: 24px 0 60px rgba(15, 23, 42, .24);
        transform: translateX(-104%);
        transition: transform .22s ease;
        overscroll-behavior: contain;
    }

    body.admin-mobile-nav-open .admin-sidebar {
        transform: translateX(0);
    }

    .admin-mobile-drawer-head {
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0 2px 8px 8px;
        color: var(--text);
        font-size: 13px;
        font-weight: 900;
    }

    .admin-sidebar .brand {
        min-height: 62px;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 4px 8px 12px;
    }

    .admin-sidebar .brand img {
        width: 88px;
        height: 50px;
        flex: 0 0 88px;
    }

    .admin-sidebar .brand span {
        min-width: 0;
        padding-left: 0;
        letter-spacing: .08em;
    }

    .admin-nav {
        grid-template-columns: 1fr;
        gap: 3px;
        padding-right: 4px;
        scrollbar-gutter: stable;
        overscroll-behavior: contain;
    }

    .admin-nav button {
        min-height: 44px;
        height: auto;
        padding: 9px 14px;
        touch-action: manipulation;
    }

    .sidebar-foot {
        flex: 0 0 auto;
        padding: 12px 8px max(2px, env(safe-area-inset-bottom));
    }

    .admin-logout-btn,
    .sidebar-foot a {
        min-height: 44px;
    }

    .sidebar-foot a {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .admin-main {
        width: 100%;
        max-width: 100vw;
        min-width: 0;
        padding: 16px max(14px, env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    }

    .merchant-ops-active .admin-main {
        padding-top: 12px;
    }

    .admin-header {
        gap: 14px;
        margin-bottom: 16px;
    }

    .admin-header h1 {
        font-size: clamp(22px, 6vw, 26px);
    }

    .admin-header p {
        line-height: 1.55;
    }

    .header-actions {
        width: 100%;
        max-width: 100%;
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 1px 1px 7px;
        scroll-snap-type: x proximity;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .header-actions button {
        min-height: 44px;
        flex: 0 0 auto;
        scroll-snap-align: start;
        padding-inline: 15px;
        touch-action: manipulation;
    }

    .view,
    .panel,
    .summary-card,
    .split-grid,
    .metric-grid,
    .model-api-layout,
    .model-api-main,
    .user-api-layout,
    .user-api-main,
    .merchant-ops-shell,
    .merchant-workspace,
    .pricing-shell {
        min-width: 0;
        max-width: 100%;
    }

    .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 14px;
    }

    .summary-card {
        min-height: 104px;
        padding: 15px;
    }

    .summary-card::after {
        right: 13px;
        top: 17px;
        width: 38px;
        height: 38px;
    }

    .summary-card strong {
        margin-top: 6px;
        font-size: clamp(23px, 7vw, 29px);
        overflow-wrap: anywhere;
    }

    .panel {
        margin-bottom: 14px;
    }

    .panel-head {
        gap: 10px;
        padding: 16px;
    }

    .panel-head > div,
    .panel-head > div:first-child {
        min-width: 0;
    }

    .panel-head button,
    .text-btn,
    .order-filter button,
    .upload-form button,
    .submit,
    .row-actions button,
    .review-actions button,
    .merchant-review-actions button,
    .merchant-publish-actions button,
    .job-post-modal-actions button,
    .pricing-page-actions button,
    .modal-actions button,
    .pagination button,
    .pagination-buttons button,
    .generated-pagination button,
    .user-usage-pagination button {
        min-height: 44px;
        touch-action: manipulation;
    }

    .filter-row,
    .upload-form,
    .user-usage-toolbar,
    .user-usage-head-actions,
    .pricing-table-toolbar,
    .agent-api-form,
    .recharge-filter,
    .project-filter,
    .order-filter {
        max-width: 100%;
        gap: 10px;
        padding: 14px;
    }

    .filter-row > *,
    .upload-form > *,
    .user-usage-toolbar > *,
    .pricing-table-toolbar > *,
    .agent-api-form > * {
        min-width: 0;
        max-width: 100%;
    }

    .filter-row input,
    .filter-row select,
    .upload-form input,
    .modal-card input:not([type="checkbox"]):not([type="radio"]),
    .modal-card select,
    .modal-card textarea,
    .model-api-dialog input,
    .model-api-dialog select,
    .model-api-dialog textarea,
    .pricing-table-search input,
    .pricing-table-toolbar select,
    .job-post-modal input,
    .job-post-modal select,
    .job-post-modal textarea,
    .job-service-modal input {
        max-width: 100%;
        font-size: 16px;
    }

    .filter-row input,
    .filter-row select,
    .order-filter input,
    .order-filter select,
    .recharge-filter input,
    .recharge-filter select,
    .project-filter input,
    .project-filter select,
    .upload-form input {
        width: 100%;
    }

    .upload-form input {
        min-width: 0;
    }

    .project-deadline-summary {
        padding: 12px 14px;
    }

    .table-wrap,
    .pricing-table-wrap,
    .user-usage-table-wrap,
    .user-usage-detail-table-wrap,
    .error-log-table-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-gutter: stable;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .table-wrap table,
    .pricing-table-wrap table,
    .user-usage-table-wrap table,
    .user-usage-detail-table-wrap table,
    .error-log-table-wrap table {
        min-width: 720px;
    }

    th,
    td {
        padding: 12px 13px;
    }

    .row-actions,
    .merchant-order-actions,
    .merchant-detail-actions,
    .referral-withdrawal-actions,
    .model-api-credential-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    .generated-type-switcher,
    .media-strip,
    .generated-grid,
    .overview-list,
    .asset-summary {
        padding-right: 14px;
        padding-left: 14px;
    }

    .media-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .generated-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .generated-card,
    .generated-card img,
    .generated-card video,
    .media-card,
    .media-card img,
    .media-card video,
    .asset-card img,
    .asset-card video {
        max-width: 100%;
    }

    .generated-pagination,
    .pagination,
    .user-usage-pagination {
        max-width: 100%;
        flex-wrap: wrap;
        gap: 10px;
        padding-right: 14px;
        padding-left: 14px;
    }

    .pagination-buttons {
        max-width: 100%;
        justify-content: flex-start;
    }

    .tool-view {
        height: calc(100dvh - 58px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px);
        min-height: 520px;
        border-radius: 10px;
    }

    .tool-view iframe {
        max-width: 100%;
    }

    .modal,
    .modal-backdrop {
        align-items: end;
        justify-items: stretch;
        place-items: end stretch;
        padding: max(10px, env(safe-area-inset-top)) 0 0;
        overflow: hidden;
        overscroll-behavior: contain;
    }

    .modal .modal-card,
    .modal .modal-card.wide-modal,
    .modal-backdrop .modal-card,
    .merchant-detail-modal,
    .merchant-publish-modal,
    .merchant-review-modal,
    .job-post-modal,
    .job-service-modal,
    .agent-team-binding-card,
    .user-usage-detail-modal,
    .error-log-modal {
        width: 100%;
        max-width: none;
        max-height: calc(100dvh - max(10px, env(safe-area-inset-top)));
        margin: 0;
        border-radius: 18px 18px 0 0;
        padding: 22px 16px calc(16px + env(safe-area-inset-bottom));
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scroll-padding-block: 72px calc(88px + env(safe-area-inset-bottom));
        -webkit-overflow-scrolling: touch;
    }

    .modal-close,
    .modal-head > button {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 12px;
    }

    .modal-close {
        top: 8px;
        right: 8px;
    }

    .choice-list,
    .agent-team-binding-users,
    .model-api-binding-users {
        grid-template-columns: 1fr;
        max-height: min(42dvh, 340px);
        overscroll-behavior: contain;
    }

    .modal-actions,
    .job-post-modal-actions,
    .merchant-publish-actions,
    .merchant-detail-footer,
    .merchant-review-actions,
    .review-actions,
    .pricing-form-footer {
        position: sticky;
        bottom: calc(-16px - env(safe-area-inset-bottom));
        z-index: 2;
        margin-right: -16px;
        margin-left: -16px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--line);
        background: var(--panel);
        box-shadow: 0 -12px 28px rgba(15, 23, 42, .06);
    }

    .modal-actions,
    .job-post-modal-actions,
    .merchant-publish-actions,
    .merchant-review-actions,
    .review-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .modal-actions button,
    .job-post-modal-actions button,
    .merchant-publish-actions button,
    .merchant-review-actions button,
    .review-actions button {
        flex: 1 1 128px;
    }

    .admin-auth-gate {
        align-items: start;
        padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
        overscroll-behavior: contain;
        scroll-padding-block: max(18px, env(safe-area-inset-top)) calc(84px + env(safe-area-inset-bottom));
        -webkit-overflow-scrolling: touch;
    }

    .admin-auth-shell {
        width: 100%;
    }

    .admin-auth-field input {
        font-size: 16px;
    }

    .admin-auth-submit,
    .admin-password-toggle,
    .admin-auth-back {
        min-height: 44px;
        touch-action: manipulation;
    }

    .admin-auth-back {
        display: inline-flex;
        align-items: center;
    }
}

@media (max-width: 600px) {
    .admin-main {
        padding-right: max(10px, env(safe-area-inset-right));
        padding-left: max(10px, env(safe-area-inset-left));
    }

    .panel-head h2 {
        font-size: 17px;
    }

    .filter-row,
    .order-filter,
    .recharge-filter,
    .project-filter,
    .agent-admin-filter,
    .agent-ledger-filter,
    .credit-management-filter,
    .error-log-filter {
        align-items: stretch;
        flex-direction: column;
    }

    .filter-row button,
    .upload-form button,
    .user-usage-head-actions button,
    .pricing-page-actions button {
        width: 100%;
    }

    .generated-type-switcher {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .media-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .merchant-ops-summary,
    .job-admin-summary,
    .merchant-cover-picker,
    .merchant-detail-facts,
    .pricing-summary-grid,
    .model-api-summary-grid {
        grid-template-columns: 1fr;
    }

    .merchant-channel-switch,
    .error-log-channel-switcher,
    .user-usage-periods {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .merchant-channel-switch button,
    .error-log-channel-switcher button,
    .user-usage-periods button {
        min-height: 44px;
        flex: 0 0 auto;
    }

    .model-api-workspace-head,
    .model-api-model-toolbar,
    .user-api-model-toolbar,
    .pricing-model-table-head,
    .merchant-workspace-head,
    .merchant-order-card-head,
    .merchant-order-card-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .model-api-workspace-head button,
    .model-api-model-toolbar button,
    .user-api-model-toolbar button {
        width: 100%;
        min-height: 44px;
    }
}

@media (max-width: 420px) {
    .admin-mobile-topbar {
        gap: 10px;
        padding-right: max(10px, env(safe-area-inset-right));
        padding-left: max(10px, env(safe-area-inset-left));
    }

    .metric-grid {
        gap: 8px;
    }

    .summary-card {
        min-height: 98px;
        padding: 13px;
    }

    .summary-card::after {
        display: none;
    }

    .summary-card span {
        font-size: 12px;
    }

    .summary-card strong {
        font-size: 24px;
    }

    .media-strip {
        grid-template-columns: 1fr 1fr;
    }

    .modal-actions button,
    .job-post-modal-actions button,
    .merchant-publish-actions button,
    .merchant-review-actions button,
    .review-actions button {
        flex-basis: 100%;
    }
}

@media (max-width: 960px) and (max-height: 700px) {
    .admin-auth-story {
        display: none;
    }

    .admin-auth-shell {
        min-height: 0;
        grid-template-columns: 1fr;
    }

    .admin-auth-panel {
        padding-top: 24px;
        padding-bottom: 24px;
    }
}

@media (hover: none) and (pointer: coarse) {
    .summary-card:hover,
    .generated-card:hover,
    .media-card:hover,
    .merchant-order-card:hover,
    .model-api-credential-card:hover,
    .merchant-cover-option:hover,
    button:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-sidebar,
    .admin-sidebar-backdrop,
    .admin-mobile-topbar {
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}