@charset "UTF-8";

.mobile-order-list {
    display: none;
}

.mobile-table-card-list {
    display: none;
}

@media (max-width: 768px) {
    html,
    body {
        min-width: 0 !important;
        width: 100% !important;
        overflow-x: hidden !important;
        font-size: 14px;
        -webkit-text-size-adjust: 100%;
    }

    .layui-layout-body {
        overflow: auto !important;
    }

    .layui-layout-admin {
        min-width: 0 !important;
        width: 100% !important;
    }

    .layui-layout-admin > .layui-header {
        left: 0 !important;
        right: 0 !important;
        height: 50px !important;
        position: fixed !important;
        z-index: 1001 !important;
        box-shadow: 0 1px 8px rgba(0, 0, 0, .08);
    }

    .layui-layout-admin > .layui-header .layui-nav {
        height: 50px;
        padding: 0;
        background: transparent;
    }

    .layui-layout-admin > .layui-header .layui-nav .layui-nav-item,
    .layui-layout-admin > .layui-header .layui-nav .layui-nav-item > a {
        height: 50px;
        line-height: 50px;
    }

    .layui-layout-admin > .layui-header .layui-layout-left {
        left: 0 !important;
        right: 116px !important;
        max-width: calc(100vw - 116px);
        overflow: hidden;
        white-space: nowrap;
    }

    .layui-layout-admin > .layui-header .layui-layout-left > .layui-nav-item:not(:first-child):not(:nth-child(2)) {
        display: none !important;
    }

    .layui-layout-admin > .layui-header .layui-layout-left > .layui-nav-item:first-child > a {
        width: 50px;
        padding: 0;
        font-size: 18px;
    }

    .layui-layout-admin > .layui-header .layui-layout-left > .layui-nav-item:nth-child(2) > a {
        max-width: calc(100vw - 180px);
        padding: 0 8px;
    }

    .layui-layout-admin > .layui-header .layui-layout-right {
        right: 0 !important;
    }

    .layui-layout-admin > .layui-header .layui-layout-right > .layui-nav-item:first-child {
        display: none !important;
    }

    .layui-layout-admin > .layui-header .layui-layout-right > .layui-nav-item > a {
        padding: 0 9px !important;
    }

    .layui-layout-admin > .layui-header .layui-layout-right .headimg + span {
        display: none !important;
    }

    .layui-layout-admin > .layui-side {
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 286px !important;
        max-width: 82vw;
        position: fixed !important;
        z-index: 1003 !important;
        transform: translateX(-104%);
        transition: transform .2s ease;
        box-shadow: 8px 0 24px rgba(0, 0, 0, .18);
    }

    .layui-layout-admin.mobile-side-open > .layui-side {
        transform: translateX(0);
    }

    .layui-layout-admin > .layui-side .layui-logo {
        height: 50px !important;
        line-height: 50px !important;
    }

    .layui-layout-admin > .layui-side .layui-side-scroll {
        height: 100vh !important;
        padding-top: 50px;
        box-sizing: border-box !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .layui-layout-admin > .layui-side .layui-side-icon {
        width: 86px !important;
        flex: 0 0 86px;
    }

    .layui-layout-admin > .layui-side .layui-side-icon a {
        min-height: 52px;
        line-height: 52px !important;
        font-size: 13px !important;
    }

    .layui-layout-admin > .layui-side .layui-side-tree {
        min-width: 0;
    }

    .layui-layout-admin > .layui-side .layui-nav-tree {
        width: 100% !important;
    }

    .layui-layout-admin > .layui-side .layui-nav-tree .layui-nav-item a,
    .layui-layout-admin > .layui-side .layui-nav-child dd a {
        min-height: 44px;
        line-height: 44px !important;
        padding-top: 0;
        padding-bottom: 0;
        white-space: normal;
    }

    .admin-mobile-mask {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1002;
        background: rgba(0, 0, 0, .38);
    }

    .admin-mobile-mask.show {
        display: block;
    }

    .layui-layout-admin > .layui-body {
        top: 50px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .think-page-body {
        min-width: 0 !important;
        padding: 8px !important;
        box-sizing: border-box !important;
    }

    .layui-card {
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .layui-card-header {
        min-height: 44px;
        height: auto !important;
        line-height: 24px !important;
        padding: 10px 12px !important;
        box-sizing: border-box !important;
        white-space: normal !important;
    }

    .layui-card-header .pull-right {
        float: none !important;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 8px;
    }

    .layui-layout-admin > .layui-body > .think-page-body > .layui-card > .layui-card-header,
    .think-page-body > .layui-card > .layui-card-header,
    .layui-card-header {
        display: block !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        line-height: 22px !important;
        margin: 0 0 6px !important;
        padding: 6px 2px !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        color: #334155 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        white-space: normal !important;
    }

    .layui-card-header .pull-right {
        position: static !important;
        width: 100% !important;
        float: none !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 6px 0 0 !important;
    }

    .layui-card-header .pull-right .layui-btn {
        flex: 0 0 auto;
        min-height: 32px !important;
        line-height: 32px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }

    .layui-card-header > .layui-icon-next {
        display: none !important;
    }

    .layui-card-html > fieldset,
    .layui-tab-content > fieldset {
        min-width: 0 !important;
        margin: 0 0 10px !important;
        padding: 0 !important;
        border: 0 !important;
        box-sizing: border-box !important;
    }

    .layui-card-html > fieldset > legend,
    .layui-tab-content > fieldset > legend {
        display: none !important;
    }

    .layui-card-html fieldset,
    .layui-tab-content fieldset,
    .think-box-shadow fieldset {
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 0 10px !important;
        padding: 0 !important;
        border: 0 !important;
        box-sizing: border-box !important;
    }

    .layui-card-html fieldset legend,
    .layui-tab-content fieldset legend,
    .think-box-shadow fieldset legend {
        display: none !important;
    }

    .think-box-shadow,
    .think-box-notify {
        width: 100% !important;
        margin: 8px 0 !important;
        padding: 8px !important;
        box-sizing: border-box !important;
        border: 0 !important;
        border-radius: 6px !important;
        box-shadow: none !important;
    }

    .block.layui-badge,
    .layui-badge.block {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 8px 0 !important;
        padding: 8px !important;
        box-sizing: border-box !important;
        line-height: 20px !important;
        white-space: normal !important;
        word-break: break-word !important;
        text-align: left !important;
    }

    .layui-card-body {
        padding: 10px !important;
        box-sizing: border-box !important;
    }

    .layui-card-html,
    .layui-card-table {
        width: 100%;
        min-width: 0;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
    }

    .layui-tab,
    .layui-tab-content {
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .layui-tab-content > .layui-table,
    .layui-card-html > .layui-table,
    .layui-card-table > .layui-table {
        display: table;
    }

    .layui-tab-title {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .layui-tab-title li {
        flex: 0 0 auto;
    }

    .form-search {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .form-search .layui-form-item,
    .form-search .layui-inline {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        white-space: normal !important;
    }

    .form-search .layui-form-label {
        display: block;
        width: 100% !important;
        height: 30px !important;
        padding: 0 10px !important;
        line-height: 30px !important;
        text-align: left !important;
        box-sizing: border-box !important;
        border-right: 0 !important;
        border-bottom: 1px solid #eee;
    }

    .form-search .layui-input-inline,
    .form-search label.layui-input-inline,
    .form-search .layui-input-block {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .form-search input,
    .form-search select,
    .form-search .layui-input,
    .form-search .layui-select,
    .form-search .layui-form-select,
    .form-search .layui-form-select .layui-input {
        width: 100% !important;
        height: 38px !important;
        line-height: 38px !important;
        box-sizing: border-box !important;
    }

    .layui-form-item .layui-input-inline,
    .layui-form-item .layui-input-block {
        max-width: 100%;
        box-sizing: border-box !important;
    }

    .layui-input,
    .layui-textarea,
    .layui-select {
        max-width: 100%;
        box-sizing: border-box !important;
    }

    .layui-btn {
        min-height: 36px;
        line-height: 36px;
        padding: 0 12px;
        margin: 4px 4px 4px 0 !important;
        box-sizing: border-box;
    }

    .layui-btn-sm {
        min-height: 32px;
        line-height: 32px;
    }

    .layui-table-view,
    .layui-table-box,
    .layui-table-body,
    .layui-table-main {
        max-width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .layui-table {
        width: max-content !important;
        min-width: 960px !important;
        table-layout: auto !important;
        font-size: 12px;
    }

    .layui-table th,
    .layui-table td {
        width: auto !important;
        min-width: 72px;
        max-width: none !important;
        padding: 8px 6px !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
        vertical-align: middle;
    }

    .layui-table .nowrap,
    .layui-table [class*="nowrap"] {
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
    }

    .layui-table img,
    .layui-table .headimg {
        max-width: none;
        flex: 0 0 auto;
    }

    .layui-badge,
    .layui-btn,
    .layui-btn-sm,
    .layui-btn-xs {
        white-space: nowrap !important;
    }

    .pagination-container {
        display: block;
        overflow-x: auto;
        padding: 8px 0 !important;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .pagination-container ul {
        float: none !important;
        display: inline-flex !important;
        vertical-align: middle;
    }

    .layui-layer {
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 20px) !important;
        box-sizing: border-box !important;
    }

    .layui-layer-page .layui-layer-content {
        max-height: calc(100vh - 108px) !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #noticePopup {
        top: 58px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: none !important;
    }

    img,
    video,
    canvas,
    iframe {
        max-width: 100%;
    }

    /* Backend list pages are table-heavy. Keep a desktop-width canvas on mobile
       and let the user scroll horizontally instead of squeezing columns. */
    .layui-layout-admin > .layui-body {
        overflow: auto !important;
        overflow-x: auto !important;
    }

    .think-page-body {
        width: 1200px !important;
        min-width: 1200px !important;
        max-width: none !important;
        padding: 8px !important;
    }

    .think-page-body > .layui-card,
    .think-page-body .layui-card {
        width: 1184px !important;
        min-width: 1184px !important;
        max-width: none !important;
    }

    .layui-card-html,
    .layui-card-table,
    .layui-tab,
    .layui-tab-content {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        overflow: visible !important;
    }

    .form-search {
        display: block !important;
        width: auto !important;
        white-space: normal !important;
    }

    .form-search .layui-form-item,
    .form-search .layui-inline {
        display: inline-block !important;
        width: auto !important;
        margin-right: 8px !important;
        margin-bottom: 8px !important;
        white-space: nowrap !important;
        vertical-align: top;
    }

    .form-search .layui-form-label {
        display: inline-block !important;
        width: auto !important;
        border-right: 1px solid #eee !important;
        border-bottom: 0 !important;
    }

    .form-search .layui-input-inline,
    .form-search label.layui-input-inline {
        display: inline-block !important;
        width: 150px !important;
    }

    .form-search .layui-input-block {
        display: inline-block !important;
        width: auto !important;
        margin-left: 0 !important;
    }

    .form-search input,
    .form-search select,
    .form-search .layui-input,
    .form-search .layui-select,
    .form-search .layui-form-select,
    .form-search .layui-form-select .layui-input {
        width: 100% !important;
        height: 32px !important;
        line-height: 32px !important;
    }

    .layui-table {
        width: auto !important;
        min-width: 100% !important;
    }

    /* Global mobile mode: every backend page fits the phone viewport.
       Wide data tables scroll inside their own area instead of stretching the whole page. */
    .layui-layout-admin > .layui-body {
        overflow-x: hidden !important;
    }

    .think-page-body {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 8px !important;
    }

    .think-page-body > .layui-card,
    .think-page-body .layui-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .layui-card-html,
    .layui-card-table,
    .layui-tab,
    .layui-tab-content {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
    }

    .layui-table-view,
    .layui-table-box,
    .layui-table-body,
    .layui-table-main {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .layui-table {
        width: max-content !important;
        min-width: 720px !important;
        table-layout: auto !important;
    }

    .form-search {
        display: flex !important;
        flex-direction: column;
        gap: 8px;
        width: 100% !important;
        white-space: normal !important;
    }

    .form-search .layui-form-item,
    .form-search .layui-inline {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        white-space: normal !important;
    }

    .form-search .layui-form-label {
        display: block !important;
        width: 100% !important;
        height: 28px !important;
        padding: 0 4px !important;
        line-height: 28px !important;
        text-align: left !important;
        border: 0 !important;
        box-sizing: border-box !important;
    }

    .form-search .layui-input-inline,
    .form-search label.layui-input-inline,
    .form-search .layui-input-block {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .form-search input,
    .form-search select,
    .form-search .layui-input,
    .form-search .layui-select,
    .form-search .layui-form-select,
    .form-search .layui-form-select .layui-input {
        width: 100% !important;
        height: 38px !important;
        line-height: 38px !important;
        box-sizing: border-box !important;
    }

    .layui-table.mobile-card-ready,
    .js-mobile-card-table.mobile-card-ready {
        display: none !important;
    }

    .mobile-table-card-list {
        display: block;
        width: 100%;
    }

    .mobile-table-card {
        margin-bottom: 5px;
        padding: 7px;
        box-sizing: border-box;
        background: #fff;
        border: 1px solid #e5ebf2;
        border-radius: 7px;
        box-shadow: 0 1px 5px rgba(31, 45, 61, .05);
    }

    .mobile-table-card-head {
        display: flex;
        justify-content: space-between;
        gap: 6px;
        padding-bottom: 5px;
        border-bottom: 1px solid #edf1f5;
    }

    .mobile-table-card-title {
        min-width: 0;
        color: #111827;
        font-size: 13px;
        font-weight: 700;
        line-height: 18px;
        word-break: break-all;
    }

    .mobile-table-card-index {
        flex: 0 0 auto;
        color: #94a3b8;
        font-size: 11px;
        line-height: 18px;
    }

    .mobile-table-card-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
        margin-top: 6px;
    }

    .mobile-table-card-item {
        min-width: 0;
        padding: 5px 4px;
        border: 1px solid #eef2f6;
        border-radius: 5px;
        background: #f8fafc;
    }

    .mobile-table-card-item label {
        display: block;
        margin-bottom: 1px;
        color: #64748b;
        font-size: 10px;
        line-height: 14px;
    }

    .mobile-table-card-item strong {
        display: block;
        color: #111827;
        font-size: 12px;
        font-weight: 600;
        line-height: 16px;
        word-break: break-all;
    }

    .mobile-table-card-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-top: 6px;
        padding-top: 6px;
        border-top: 1px solid #edf1f5;
    }

    .mobile-table-card-actions:empty {
        display: none;
    }

    .mobile-table-card-actions .layui-btn,
    .mobile-table-card-actions .layui-badge,
    .mobile-table-card-actions a,
    .mobile-table-card-actions span {
        min-height: 28px !important;
        height: auto !important;
        line-height: 18px !important;
        margin: 0 !important;
        padding: 5px 8px !important;
        border-radius: 4px !important;
        font-size: 11px !important;
        white-space: normal !important;
    }

    .mobile-table-card-title .headimg {
        width: 52px !important;
        height: 52px !important;
        margin: 0 8px 0 0 !important;
        border-radius: 6px !important;
        vertical-align: top !important;
    }

    .mobile-table-card-title .inline-block {
        display: inline-block !important;
        max-width: calc(100% - 64px) !important;
        vertical-align: top !important;
    }

    .mobile-table-card-title .layui-badge {
        display: inline-block !important;
        margin-top: 4px !important;
        white-space: normal !important;
    }

    .mobile-table-card-actions {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .mobile-table-card-actions .layui-btn,
    .mobile-table-card-actions a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        border: 1px solid #dbe4ef !important;
        background: #fff !important;
        color: #1f2937 !important;
    }

    body.admin-mobile-order-page,
    body.admin-mobile-order-page .layui-layout-body {
        background: #f4f6f9 !important;
    }

    body.admin-mobile-order-page .think-page-body {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 8px !important;
        background: #f4f6f9 !important;
    }

    body.admin-mobile-order-page .think-page-body > .layui-card,
    body.admin-mobile-order-page .think-page-body .layui-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body.admin-mobile-order-page .layui-card-body {
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body.admin-mobile-order-page .layui-tab,
    body.admin-mobile-order-page .layui-tab-content,
    body.admin-mobile-order-page .layui-card-html,
    body.admin-mobile-order-page .layui-card-table {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    body.admin-mobile-order-page .layui-tab {
        margin: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body.admin-mobile-order-page .layui-tab-title {
        margin: 0 0 8px !important;
        padding: 0 2px !important;
        background: #fff;
        border: 1px solid #e8edf3;
        border-radius: 6px;
    }

    body.admin-mobile-order-page .layui-tab-title li {
        min-width: auto;
        padding: 0 12px;
        font-size: 13px;
    }

    body.admin-mobile-order-page .form-search {
        display: flex !important;
        flex-direction: column;
        gap: 8px;
        width: 100% !important;
        padding: 10px;
        margin-bottom: 10px;
        box-sizing: border-box;
        background: #fff;
        border: 1px solid #e8edf3;
        border-radius: 6px;
        white-space: normal !important;
    }

    body.admin-mobile-order-page .form-search .layui-form-item,
    body.admin-mobile-order-page .form-search .layui-inline {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        white-space: normal !important;
    }

    body.admin-mobile-order-page .form-search .layui-form-label {
        display: block !important;
        width: 100% !important;
        padding: 0 2px !important;
        height: 24px !important;
        line-height: 24px !important;
        border: 0 !important;
        color: #606b7b;
    }

    body.admin-mobile-order-page .form-search .layui-input-inline,
    body.admin-mobile-order-page .form-search label.layui-input-inline,
    body.admin-mobile-order-page .form-search .layui-input-block {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    body.admin-mobile-order-page .form-search .layui-input,
    body.admin-mobile-order-page .form-search .layui-select,
    body.admin-mobile-order-page .form-search .layui-form-select,
    body.admin-mobile-order-page .form-search .layui-form-select .layui-input {
        width: 100% !important;
        height: 38px !important;
        line-height: 38px !important;
    }

    body.admin-mobile-order-page .orderTable {
        display: none !important;
    }

    body.admin-mobile-order-page .mobile-order-list {
        display: block;
        width: 100%;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.admin-mobile-order-page .mobile-order-card {
        width: 100%;
        margin: 0 0 10px;
        padding: 12px;
        box-sizing: border-box;
        background: #fff;
        border: 1px solid #e5ebf2;
        border-radius: 8px;
        box-shadow: 0 1px 6px rgba(31, 45, 61, .06);
        color: #1f2937;
        overflow: hidden;
    }

    body.admin-mobile-order-page .mobile-order-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #edf1f5;
    }

    body.admin-mobile-order-page .mobile-order-head-main {
        min-width: 0;
        flex: 1 1 auto;
    }

    body.admin-mobile-order-page .mobile-order-time {
        margin-bottom: 4px;
        color: #64748b;
        font-size: 12px;
        line-height: 18px;
    }

    body.admin-mobile-order-page .mobile-order-no {
        color: #111827;
        font-size: 14px;
        font-weight: 700;
        line-height: 20px;
        word-break: break-all;
    }

    body.admin-mobile-order-page .mobile-status-pill {
        flex: 0 0 auto;
        max-width: 104px;
        padding: 4px 8px;
        border-radius: 999px;
        background: #e8f2ff;
        color: #1769aa;
        font-size: 12px;
        line-height: 18px;
        text-align: center;
        white-space: normal;
    }

    body.admin-mobile-order-page .mobile-status-pill.is-timeout {
        background: #fff1e6;
        color: #b45309;
    }

    body.admin-mobile-order-page .mobile-order-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin: 10px 0 0;
    }

    body.admin-mobile-order-page .mobile-order-tags span {
        max-width: 100%;
        padding: 3px 7px;
        border-radius: 4px;
        background: #f1f5f9;
        color: #475569;
        font-size: 12px;
        line-height: 18px;
        word-break: break-all;
    }

    body.admin-mobile-order-page .mobile-order-tags .is-green,
    body.admin-mobile-order-page .mobile-action-grid .is-green {
        background: #e9f8ef;
        color: #16833a;
        border-color: #bfe8cb;
    }

    body.admin-mobile-order-page .mobile-order-tags .is-orange {
        background: #fff3e7;
        color: #b45309;
    }

    body.admin-mobile-order-page .mobile-goods-block {
        display: grid;
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 10px;
        margin-top: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid #edf1f5;
    }

    body.admin-mobile-order-page .mobile-goods-cover {
        position: relative;
        width: 82px;
        height: 82px;
        border-radius: 6px;
        background: #f3f6fa;
        overflow: hidden;
    }

    body.admin-mobile-order-page .mobile-goods-cover img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    body.admin-mobile-order-page .mobile-goods-cover span {
        position: absolute;
        left: 4px;
        bottom: 4px;
        padding: 1px 5px;
        border-radius: 4px;
        background: #16a34a;
        color: #fff;
        font-size: 10px;
        line-height: 16px;
    }

    body.admin-mobile-order-page .mobile-goods-info {
        min-width: 0;
    }

    body.admin-mobile-order-page .mobile-goods-info h3 {
        margin: 0 0 6px;
        color: #111827;
        font-size: 15px;
        font-weight: 700;
        line-height: 21px;
        word-break: break-word;
    }

    body.admin-mobile-order-page .mobile-goods-info p {
        margin: 0 0 3px;
        color: #64748b;
        font-size: 12px;
        line-height: 18px;
        word-break: break-all;
    }

    body.admin-mobile-order-page .mobile-goods-info .mobile-remark {
        color: #d03a2f;
        font-weight: 600;
    }

    body.admin-mobile-order-page .mobile-info-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 12px;
    }

    body.admin-mobile-order-page .mobile-info-grid > div {
        min-width: 0;
        padding: 9px 8px;
        border-radius: 6px;
        background: #f8fafc;
        border: 1px solid #eef2f6;
    }

    body.admin-mobile-order-page .mobile-info-grid label {
        display: block;
        margin-bottom: 4px;
        color: #64748b;
        font-size: 12px;
        line-height: 16px;
    }

    body.admin-mobile-order-page .mobile-info-grid strong {
        display: inline-block;
        max-width: 100%;
        color: #111827;
        font-size: 15px;
        line-height: 20px;
        word-break: break-all;
    }

    body.admin-mobile-order-page .mobile-info-grid small {
        display: block;
        margin-top: 2px;
        color: #64748b;
        font-size: 11px;
        line-height: 14px;
    }

    body.admin-mobile-order-page .mobile-info-section,
    body.admin-mobile-order-page .mobile-action-panel,
    body.admin-mobile-order-page .mobile-kf-remark {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid #edf1f5;
    }

    body.admin-mobile-order-page .mobile-section-title {
        margin-bottom: 8px;
        color: #1f2937;
        font-size: 13px;
        font-weight: 700;
        line-height: 18px;
    }

    body.admin-mobile-order-page .mobile-line {
        display: grid;
        grid-template-columns: 74px minmax(0, 1fr);
        gap: 8px;
        align-items: start;
        margin-bottom: 7px;
        font-size: 13px;
        line-height: 19px;
    }

    body.admin-mobile-order-page .mobile-line span {
        color: #64748b;
    }

    body.admin-mobile-order-page .mobile-line b {
        color: #111827;
        font-weight: 500;
        word-break: break-all;
    }

    body.admin-mobile-order-page .mobile-line a {
        color: #1e80ff;
        text-decoration: underline;
    }

    body.admin-mobile-order-page .mobile-action-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body.admin-mobile-order-page .mobile-action-grid a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 36px;
        padding: 7px 8px;
        box-sizing: border-box;
        border: 1px solid #dbe4ef;
        border-radius: 6px;
        background: #fff;
        color: #1f2937;
        font-size: 13px;
        line-height: 18px;
        text-align: center;
        word-break: break-word;
        white-space: normal !important;
    }

    body.admin-mobile-order-page .mobile-action-more {
        margin-top: 8px;
    }

    body.admin-mobile-order-page .mobile-action-more summary {
        display: block;
        width: 100%;
        min-height: 36px;
        line-height: 36px;
        border-radius: 6px;
        background: #eef5ff;
        color: #1769aa;
        text-align: center;
        font-size: 13px;
        font-weight: 700;
        list-style: none;
    }

    body.admin-mobile-order-page .mobile-action-more summary::-webkit-details-marker {
        display: none;
    }

    body.admin-mobile-order-page .mobile-action-more[open] summary {
        margin-bottom: 8px;
    }

    body.admin-mobile-order-page .mobile-kf-remark textarea {
        width: 100% !important;
        min-height: 78px;
        padding: 8px;
        line-height: 20px;
        font-size: 14px;
        resize: vertical;
        box-sizing: border-box;
    }

    body.admin-mobile-order-page .pagination-container,
    body.admin-mobile-order-page .pagination {
        max-width: 100%;
        overflow-x: auto;
    }

    /* Compact order cards for mobile: show more information per screen. */
    body.admin-mobile-order-page .mobile-order-card {
        margin-bottom: 8px;
        padding: 9px;
        border-radius: 6px;
    }

    body.admin-mobile-order-page .mobile-order-head {
        gap: 8px;
        padding-bottom: 7px;
    }

    body.admin-mobile-order-page .mobile-order-time {
        margin-bottom: 2px;
        font-size: 11px;
        line-height: 16px;
    }

    body.admin-mobile-order-page .mobile-order-no {
        font-size: 13px;
        line-height: 18px;
    }

    body.admin-mobile-order-page .mobile-status-pill {
        max-width: 92px;
        padding: 2px 7px;
        font-size: 11px;
        line-height: 17px;
    }

    body.admin-mobile-order-page .mobile-order-tags {
        gap: 4px;
        margin-top: 7px;
    }

    body.admin-mobile-order-page .mobile-order-tags span {
        padding: 2px 6px;
        font-size: 11px;
        line-height: 16px;
    }

    body.admin-mobile-order-page .mobile-goods-block {
        grid-template-columns: 66px minmax(0, 1fr);
        gap: 8px;
        margin-top: 8px;
        padding-bottom: 8px;
    }

    body.admin-mobile-order-page .mobile-goods-cover {
        width: 66px;
        height: 66px;
    }

    body.admin-mobile-order-page .mobile-goods-info h3 {
        margin-bottom: 3px;
        font-size: 13px;
        line-height: 18px;
    }

    body.admin-mobile-order-page .mobile-goods-info p {
        margin-bottom: 1px;
        font-size: 11px;
        line-height: 16px;
    }

    body.admin-mobile-order-page .mobile-info-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
        margin-top: 8px;
    }

    body.admin-mobile-order-page .mobile-info-grid > div {
        padding: 6px 5px;
        border-radius: 5px;
    }

    body.admin-mobile-order-page .mobile-info-grid label {
        margin-bottom: 2px;
        font-size: 10px;
        line-height: 14px;
    }

    body.admin-mobile-order-page .mobile-info-grid strong {
        font-size: 12px;
        line-height: 16px;
    }

    body.admin-mobile-order-page .mobile-info-grid small {
        margin-top: 0;
        font-size: 10px;
        line-height: 13px;
    }

    body.admin-mobile-order-page .mobile-info-section,
    body.admin-mobile-order-page .mobile-action-panel,
    body.admin-mobile-order-page .mobile-kf-remark {
        margin-top: 8px;
        padding-top: 8px;
    }

    body.admin-mobile-order-page .mobile-section-title {
        margin-bottom: 5px;
        font-size: 12px;
        line-height: 16px;
    }

    body.admin-mobile-order-page .mobile-line {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 6px;
        margin-bottom: 3px;
        font-size: 12px;
        line-height: 17px;
    }

    body.admin-mobile-order-page .mobile-action-panel > .mobile-action-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        overflow-x: visible;
        padding-bottom: 0;
    }

    body.admin-mobile-order-page .mobile-action-panel > .mobile-action-grid a {
        flex: 1 1 auto;
        min-width: 58px;
        min-height: 28px;
        padding: 4px 7px;
        border-radius: 4px;
        font-size: 11px;
        line-height: 16px;
        text-align: center;
        word-break: break-word;
        white-space: normal !important;
    }

    body.admin-mobile-order-page .mobile-action-more {
        margin-top: 6px;
    }

    body.admin-mobile-order-page .mobile-action-more summary {
        min-height: 30px;
        line-height: 30px;
        border-radius: 4px;
        font-size: 12px;
    }

    body.admin-mobile-order-page .mobile-action-more .mobile-action-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    body.admin-mobile-order-page .mobile-action-more .mobile-action-grid a {
        min-height: 28px;
        padding: 4px 5px;
        border-radius: 4px;
        font-size: 11px;
        line-height: 15px;
    }

    body.admin-mobile-order-page .mobile-action-panel > .mobile-action-grid.mobile-action-all {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
        overflow: visible !important;
        padding-bottom: 0 !important;
    }

    body.admin-mobile-order-page .mobile-action-grid.mobile-action-all > a,
    body.admin-mobile-order-page .mobile-action-grid.mobile-action-all > span,
    body.admin-mobile-order-page .mobile-action-grid.mobile-action-all .dropdown-wrap {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 30px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 5px 6px !important;
        border-radius: 4px !important;
        border: 1px solid #dbe4ef !important;
        background: #fff !important;
        color: #1f2937 !important;
        font-size: 11px !important;
        line-height: 16px !important;
        text-align: center !important;
        white-space: normal !important;
        word-break: break-word !important;
        box-sizing: border-box !important;
    }

    body.admin-mobile-order-page .mobile-action-grid.mobile-action-all > a[data-confirm],
    body.admin-mobile-order-page .mobile-action-grid.mobile-action-all > a[data-load*="cancel"],
    body.admin-mobile-order-page .mobile-action-grid.mobile-action-all > a[style*="red"] {
        color: #b42318 !important;
        border-color: #f3c6c2 !important;
        background: #fffafa !important;
    }

    body.admin-mobile-order-page .mobile-action-grid.mobile-action-all > a.js-lease-contract,
    body.admin-mobile-order-page .mobile-action-grid.mobile-action-all > a.js-logistics-contract,
    body.admin-mobile-order-page .mobile-action-grid.mobile-action-all > a[data-modal*="contract"],
    body.admin-mobile-order-page .mobile-action-grid.mobile-action-all > a[data-modal*="Contract"] {
        color: #087443 !important;
        border-color: #b8e4cc !important;
        background: #f3fbf6 !important;
    }

    body.admin-mobile-order-page .mobile-action-grid.mobile-action-all .dropdown-menu {
        position: static !important;
        display: none !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-column: 1 / -1;
        margin-top: 5px !important;
        box-shadow: none !important;
    }

    body.admin-mobile-order-page .mobile-action-grid.mobile-action-all .dropdown-wrap.mobile-open {
        grid-column: 1 / -1;
        display: block !important;
    }

    body.admin-mobile-order-page .mobile-action-grid.mobile-action-all .dropdown-wrap.mobile-open .dropdown-menu {
        display: block !important;
    }

    body.admin-mobile-order-page .mobile-action-grid.mobile-action-all .dropdown-menu a {
        display: block !important;
        width: 100% !important;
        min-height: 28px !important;
        margin: 4px 0 0 !important;
        padding: 5px 8px !important;
        border: 1px solid #e5ebf2 !important;
        border-radius: 4px !important;
        background: #fff !important;
        color: #1f2937 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    body.admin-mobile-order-page .mobile-action-grid.mobile-action-all .not-locked-bubble {
        display: none !important;
    }

    body.admin-mobile-order-page .mobile-kf-remark textarea {
        min-height: 58px;
        padding: 6px;
        font-size: 12px;
        line-height: 17px;
    }

    /* Final global mobile layout reset. Keep every adapted page aligned like the order cards page. */
    html,
    body,
    .layui-layout-admin {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    .layui-layout-admin > .layui-body,
    .think-page-body {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch;
    }

    .think-page-body {
        padding: 8px !important;
        background: #f4f6f9 !important;
    }

    .think-page-body > .layui-card,
    .think-page-body .layui-card,
    .layui-card,
    .layui-tab,
    .layui-tab-card,
    .think-box-shadow,
    .think-box-notify {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .layui-card-body,
    .layui-card-html,
    .layui-tab-content {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
    }

    .layui-card-header {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 0 8px !important;
        padding: 0 2px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        line-height: 22px !important;
        color: #17324d !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }

    .layui-card-header > .layui-icon-next {
        display: none !important;
    }

    .layui-card-header .pull-right {
        position: static !important;
        float: none !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
        margin: 8px 0 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .layui-card-header .pull-right .layui-btn,
    .layui-card-header .pull-right button,
    .layui-card-header .pull-right a {
        min-height: 32px !important;
        height: 32px !important;
        line-height: 32px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        border-radius: 4px !important;
        font-size: 12px !important;
        box-sizing: border-box !important;
    }

    .admin-mobile-header-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        background: transparent !important;
        clear: both !important;
    }

    .admin-mobile-original-header {
        display: none !important;
    }

    .admin-mobile-page-title {
        width: 100% !important;
        margin: 0 0 8px !important;
        padding: 0 2px !important;
        color: #17324d !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 22px !important;
        box-sizing: border-box !important;
    }

    .admin-mobile-header-actions .pull-right {
        position: static !important;
        float: none !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .admin-mobile-header-actions .layui-btn,
    .admin-mobile-header-actions button,
    .admin-mobile-header-actions a {
        min-height: 32px !important;
        height: 32px !important;
        line-height: 32px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        border-radius: 4px !important;
        font-size: 12px !important;
        box-sizing: border-box !important;
    }

    .layui-card-html fieldset,
    .layui-tab-content fieldset,
    .think-box-shadow fieldset,
    fieldset {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
        border: 0 !important;
        box-sizing: border-box !important;
        background: transparent !important;
    }

    .layui-card-html fieldset legend,
    .layui-tab-content fieldset legend,
    .think-box-shadow fieldset legend,
    fieldset legend {
        display: none !important;
    }

    .form-search {
        width: 100% !important;
        margin: 0 0 8px !important;
        padding: 10px !important;
        border: 1px solid #e8edf3 !important;
        border-radius: 6px !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }

    .block.layui-badge,
    .layui-badge.block {
        display: block !important;
        width: 100% !important;
        margin: 0 0 8px !important;
        padding: 8px 10px !important;
        border-radius: 5px !important;
        line-height: 20px !important;
        white-space: normal !important;
        word-break: break-word !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }

    .mobile-order-card,
    .mobile-table-card {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    .layui-layer-page {
        width: calc(100vw - 20px) !important;
        left: 10px !important;
        right: 10px !important;
        box-sizing: border-box !important;
    }

    .layui-layer-page .layui-layer-content {
        max-height: calc(100vh - 96px) !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .packageon-mobile-form,
    .offline-order-mobile-form {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    .packageon-mobile-form .layui-card-body,
    .offline-order-mobile-form .layui-card-body {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 12px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .packageon-mobile-form .layui-card-body > div,
    .offline-order-mobile-form .layui-card-body > div,
    .packageon-mobile-form [style*="width: 45%"],
    .offline-order-mobile-form [style*="width: 45%"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        float: none !important;
        clear: both !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .packageon-mobile-form fieldset,
    .offline-order-mobile-form fieldset {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 12px !important;
        padding: 10px !important;
        border: 1px solid #e5ebf2 !important;
        border-radius: 8px !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }

    .packageon-mobile-form fieldset legend,
    .offline-order-mobile-form fieldset legend {
        display: block !important;
        width: auto !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .packageon-mobile-form .layui-form-item,
    .offline-order-mobile-form .layui-form-item {
        display: block !important;
        width: 100% !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .packageon-mobile-form .layui-input-inline,
    .offline-order-mobile-form .layui-input-inline,
    .packageon-mobile-form .layui-form-select,
    .offline-order-mobile-form .layui-form-select {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .packageon-mobile-form .layui-input,
    .offline-order-mobile-form .layui-input,
    .packageon-mobile-form select,
    .offline-order-mobile-form select {
        width: 100% !important;
        min-width: 0 !important;
        height: 40px !important;
        line-height: 40px !important;
        box-sizing: border-box !important;
    }

    .packageon-mobile-form .help-block,
    .offline-order-mobile-form .help-block,
    .packageon-mobile-form .help-label,
    .offline-order-mobile-form .help-label {
        display: block !important;
        margin: 4px 0 0 !important;
        line-height: 18px !important;
        white-space: normal !important;
    }

    .layui-card-header.admin-mobile-original-header {
        display: none !important;
    }

    .think-page-body .layui-card > .layui-card-header,
    .layui-card > .layui-card-header {
        display: none !important;
    }

    body .think-page-body .layui-card-header,
    body .layui-card .layui-card-header {
        display: none !important;
    }

    .admin-mobile-page-title {
        display: block !important;
    }

    .admin-mobile-page-title + .admin-mobile-page-title {
        display: none !important;
    }

    /* 修复重复标题：确保原始卡片标题被彻底隐藏，只保留 admin-mobile-page-title */
    body .layui-layout-admin > .layui-body > .think-page-body > .layui-card > .layui-card-header,
    body .think-page-body > .layui-card > .layui-card-header,
    body .layui-card > .layui-card-header,
    body .layui-card-header,
    .layui-card-header.admin-mobile-original-header {
        display: none !important;
    }

    /* 调整套餐弹窗移动端优化 */
    .packageon-mobile-form .layui-card-body {
        padding: 12px !important;
    }

    .packageon-mobile-form fieldset {
        float: none !important;
        width: 100% !important;
        margin: 0 0 15px !important;
        padding: 12px !important;
        border: 1px solid #e5ebf2 !important;
        border-radius: 8px !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }

    .packageon-mobile-form fieldset legend {
        display: block !important;
        margin-bottom: 10px !important;
        padding: 0 8px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #17324d !important;
    }

    .packageon-mobile-form .layui-form-item {
        margin-bottom: 12px !important;
    }

    .packageon-mobile-form .layui-form-item > span.font-w7,
    .packageon-mobile-form .layui-form-item > span.label-required-prev {
        display: block !important;
        margin-bottom: 5px !important;
        font-size: 13px !important;
        line-height: 20px !important;
        color: #334155 !important;
    }

    .packageon-mobile-form .layui-input,
    .packageon-mobile-form .layui-select,
    .packageon-mobile-form .layui-textarea,
    .packageon-mobile-form .layui-input-inline {
        width: 100% !important;
        height: 40px !important;
        line-height: 40px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
    }

    .packageon-mobile-form .layui-form-select dl {
        max-height: 220px !important;
    }

    .packageon-mobile-form .layui-form-item > div[style*="font-size:12px"] {
        margin-top: 4px !important;
        font-size: 11px !important;
        line-height: 16px !important;
        color: #64748b !important;
    }

    .packageon-mobile-form .layui-form-item.text-center {
        margin-top: 20px !important;
        margin-bottom: 0 !important;
    }

    .packageon-mobile-form .layui-form-item.text-center button {
        width: 100% !important;
        height: 42px !important;
        line-height: 42px !important;
        font-size: 15px !important;
        border-radius: 6px !important;
    }

    .packageon-mobile-form .layui-layer-page .layui-layer-content {
        padding: 0 !important;
    }

}