/* Shared responsive shell and generated-page overrides. */

:root {
    --m-brand: #0b4db8;
    --m-brand-dark: #083d93;
    --m-brand-soft: #eaf1ff;
    --m-accent: #08a88a;
    --m-accent-soft: #e4f8f3;
    --m-text: #13233d;
    --m-muted: #718096;
    --m-surface: #fff;
    --m-bg: #f3f6fa;
    --m-border: #dfe6ef;
    --m-radius: 14px;
    --m-gutter: 12px;
    --m-header: 56px;
    --m-tabbar: 68px;
    --m-app-width: 430px;
}

.mobile-admin-link { display: none; }

@media (max-width: 768px) {
    :root {
        --m-brand: #0b4db8;
        --m-brand-dark: #083d93;
        --m-brand-soft: #eaf1ff;
        --m-accent: #08a88a;
        --m-accent-soft: #e4f8f3;
        --m-text: #13233d;
        --m-muted: #718096;
        --m-surface: #fff;
        --m-bg: #f3f6fa;
        --m-border: #dfe6ef;
        --m-radius: 14px;
        --m-gutter: 12px;
        --m-header: 56px;
        --m-tabbar: 68px;
        --m-app-width: 430px;
    }

    html,
    body {
        width: 100%;
        min-width: 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        color: var(--m-text);
        background: var(--m-bg);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", Arial, sans-serif !important;
    }

    body:not(.app-shell) * {
        box-sizing: border-box;
        max-width: 100%;
    }

    img,
    video,
    canvas,
    svg {
        max-width: 100% !important;
    }

    input,
    select,
    textarea,
    button,
    .layui-btn {
        max-width: 100% !important;
        font-size: 16px !important;
        touch-action: manipulation;
    }

    /* Application shell: compact header and fixed bottom navigation. */
    body.app-shell {
        min-height: 100vh;
        min-height: 100dvh;
        padding: 0 0 calc(var(--m-tabbar) + env(safe-area-inset-bottom)) !important;
        background: var(--m-bg);
    }

    .app-shell,
    .app-shell * {
        box-sizing: border-box;
    }

    .app-shell #header {
        position: fixed !important;
        inset: 0 0 auto !important;
        z-index: 1000 !important;
        width: 100% !important;
        height: 54px !important;
        min-height: 54px !important;
        background: var(--m-brand) !important;
        border: 0 !important;
        box-shadow: 0 2px 12px rgba(11, 77, 184, .18) !important;
    }

    .app-shell #header .nav-top {
        height: 54px !important;
        padding: 0 64px 0 16px !important;
        justify-content: flex-start !important;
        background: linear-gradient(135deg, var(--m-brand), var(--m-brand-dark)) !important;
        box-shadow: none !important;
    }

    .app-shell #header .nav-top-title {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;
        color: #fff !important;
        font-size: 17px !important;
        font-weight: 700;
        line-height: 54px !important;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .app-shell #header .mobile-admin-link {
        position: absolute;
        top: 0;
        right: 4px;
        display: flex;
        width: 58px;
        height: 54px;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        line-height: 54px;
    }

    .app-shell #header .nav-top-img,
    .app-shell #header .nav-top-tel {
        display: none !important;
    }

    .app-shell #header .navs {
        position: fixed !important;
        inset: auto 0 0 !important;
        z-index: 1001 !important;
        display: block !important;
        width: 100% !important;
        height: calc(var(--m-tabbar) + env(safe-area-inset-bottom)) !important;
        padding: 0 0 env(safe-area-inset-bottom) !important;
        background: rgba(255, 255, 255, .98) !important;
        border-top: 1px solid var(--m-border) !important;
        box-shadow: 0 -5px 22px rgba(23, 32, 51, .09) !important;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .app-shell #header .navs .list,
    .app-shell #header .navs ul {
        width: 100% !important;
        height: var(--m-tabbar) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .app-shell #header .navs ul {
        display: flex !important;
        align-items: stretch !important;
        justify-content: space-around !important;
    }

    .app-shell #header .navs li {
        position: relative;
        display: flex !important;
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        height: var(--m-tabbar) !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: stretch;
        justify-content: center;
        color: var(--m-muted) !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
    }

    .app-shell #header .navs li a {
        display: flex !important;
        flex: 1;
        min-width: 0;
        height: 100%;
        padding: 0 2px 8px !important;
        align-items: center;
        justify-content: flex-end;
        flex-direction: column;
        color: inherit !important;
        font-size: 11px !important;
        line-height: 1.15 !important;
        text-align: center;
        white-space: nowrap;
    }

    .app-shell #header .navs li:not(:last-child)::before {
        position: absolute;
        top: 8px;
        left: 50%;
        width: 24px;
        height: 24px;
        color: currentColor;
        font: 21px/24px Arial, sans-serif;
        text-align: center;
        transform: translateX(-50%);
        pointer-events: none;
    }

    .app-shell #header .navs li:nth-child(1)::before { content: "⌂"; }
    .app-shell #header .navs li:nth-child(2)::before { content: "✦"; }
    .app-shell #header .navs li:nth-child(3)::before { content: "▣"; }
    .app-shell #header .navs li:nth-child(4)::before { content: "✈"; }
    .app-shell #header .navs li:nth-child(5)::before { content: "○"; }

    .app-shell #header .navs li.current,
    .app-shell #header .navs li:hover {
        color: var(--m-brand-dark) !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .app-shell #header .navs li.current::after {
        position: absolute;
        right: 26%;
        bottom: 3px;
        left: 26%;
        height: 3px;
        content: "";
        background: var(--m-brand-dark);
        border-radius: 99px;
    }

    /* The same admin route is exposed by .mobile-admin-link in the top bar. */
    .app-shell #header .navs li:last-child {
        display: none !important;
    }

    .app-shell #iframe {
        display: block !important;
        width: 100% !important;
        min-height: calc(100vh - 54px - var(--m-tabbar)) !important;
        min-height: calc(100dvh - 54px - var(--m-tabbar)) !important;
        margin: 54px 0 0 !important;
        padding: 0 !important;
        background: var(--m-bg);
        border: 0;
    }

    .app-shell #tabbar {
        display: none !important;
    }

    /* Shared fixed-width containers. */
    .container,
    .wrapper,
    .con_1000,
    .recommend .box,
    .news .box,
    .lists .box,
    .search-container,
    .data-container,
    .data-detail,
    .data-add-container,
    .news-container,
    .news-container .news-list,
    .news-container .content,
    .news-container .bottom-container,
    .message-container,
    .forum-container,
    .forum-container .content,
    .forum-container .bottom-container,
    .paper-container,
    .center-container,
    .index-title {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    #app {
        width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden;
    }

    /* Banners and carousels. */
    .banner {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        overflow: hidden;
    }

    #test1,
    #swiper,
    .layui-carousel {
        width: 100% !important;
        height: clamp(180px, 58vw, 300px) !important;
        max-height: 300px !important;
        border-radius: 0 !important;
    }

    .layui-carousel > [carousel-item],
    .layui-carousel > [carousel-item] > *,
    .layui-carousel > [carousel-item] img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .layui-carousel-arrow { display: none !important; }
    .layui-carousel-ind { top: auto !important; bottom: 8px !important; }

    /* Home and list card grids. */
    .recommend,
    .news,
    .lists {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 8px 0 !important;
        background: var(--m-bg) !important;
    }

    .recommend .box,
    .news .box,
    .lists .box {
        margin: 0 !important;
        padding: 0 var(--m-gutter) !important;
        overflow: visible !important;
    }

    .recommend .box .title,
    .news .box .title,
    .lists .box .title,
    .index-title {
        min-height: 48px !important;
        height: auto !important;
        margin: 0 0 8px !important;
        padding: 12px 4px !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        color: var(--m-text) !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        font-size: 18px !important;
        font-weight: 700;
        text-align: left !important;
    }

    .recommend .box .title span,
    .news .box .title span,
    .lists .box .title span,
    .index-title span {
        max-width: 100%;
        padding: 0 !important;
        overflow: hidden;
        font-size: inherit !important;
        line-height: 1.35 !important;
        text-overflow: ellipsis;
    }

    .recommend .box .title span + span,
    .news .box .title span + span,
    .lists .box .title span + span {
        color: var(--m-muted) !important;
        font-size: 12px !important;
        font-weight: 400;
    }

    .recommend .box .list,
    .news .box .list,
    .lists .box .list {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        flex-wrap: wrap !important;
    }

    .recommend .box .list .list-item,
    .index-pv1 .box .list .list-item,
    .index-pv3 .box .list .list-item,
    .recommend .box .list .list-item3,
    .recommend .box .list .list-item5 {
        flex: 0 0 50% !important;
        width: 50% !important;
        min-width: 0 !important;
        padding: 5px !important;
    }

    .recommend .box .list .list-item-body,
    .recommend .box .list .list-item .list-item-body {
        height: 100%;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 0 10px !important;
        overflow: hidden;
        background: var(--m-surface) !important;
        border: 1px solid var(--m-border) !important;
        border-radius: var(--m-radius) !important;
        box-shadow: 0 5px 16px rgba(23, 32, 51, .06) !important;
        transform: none !important;
    }

    .recommend .box .list .list-item-body > img,
    .recommend .box .list .list-item .list-item-body > img {
        display: block !important;
        width: 100% !important;
        height: clamp(132px, 42vw, 176px) !important;
        margin: 0 !important;
        object-fit: cover !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .recommend .box .list .name,
    .recommend .box .list .price,
    .recommend .box .list .info > * {
        width: 100% !important;
        min-width: 0;
        margin: 0 !important;
        padding: 8px 9px 0 !important;
        overflow: hidden;
        color: var(--m-text) !important;
        font-size: 14px !important;
        line-height: 1.35;
        text-align: left !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .recommend .box .list .price {
        color: var(--m-brand-dark) !important;
        font-size: 16px !important;
        font-weight: 700;
    }

    .news .box .list .list-item,
    .recommend .box .news .list-item,
    .news .box .list .list-item1,
    .news .box .list .list-item3 {
        flex: 0 0 100% !important;
        width: 100% !important;
        padding: 5px !important;
    }

    .news .box .list .list-item .list-item-body,
    .recommend .box .news .list-item .list-item-body {
        min-height: 106px;
        margin: 0 !important;
        padding: 10px !important;
        overflow: hidden;
        background: var(--m-surface) !important;
        border: 1px solid var(--m-border) !important;
        border-radius: var(--m-radius) !important;
        box-shadow: none !important;
    }

    .news .box .list .list-item .list-item-body img,
    .recommend .box .news .list-item .list-item-body img {
        width: 96px !important;
        min-width: 96px;
        height: 86px !important;
        margin: 0 !important;
        object-fit: cover;
        border-radius: 10px;
    }

    /* Search and filter rows. */
    .recommend .box .filter,
    .search-container,
    form.filter {
        display: flex !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 0 10px !important;
        padding: 10px !important;
        gap: 8px;
        align-items: stretch !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        background: var(--m-surface) !important;
        border: 1px solid var(--m-border) !important;
        border-radius: var(--m-radius) !important;
    }

    .recommend .box .filter .item-list,
    form.filter .item-list {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        align-items: center !important;
    }

    .recommend .box .filter .item-list .lable,
    form.filter .item-list .lable {
        flex: 0 0 auto;
        width: auto !important;
        min-width: 70px;
        padding: 0 8px 0 0 !important;
        font-size: 14px !important;
        text-align: left !important;
    }

    .recommend .box .filter .item-list input,
    form.filter .item-list input,
    .search-container input {
        flex: 1 1 auto !important;
        width: 0 !important;
        min-width: 0 !important;
        height: 44px !important;
        border: 1px solid #dce1ea !important;
        border-radius: 10px !important;
    }

    .recommend .box .filter > button,
    form.filter > button,
    .search-container .layui-btn {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 96px;
        height: 44px !important;
        margin: 0 !important;
        border-radius: 10px !important;
    }

    /* Detail pages. */
    .data-detail {
        margin: 0 !important;
        padding: var(--m-gutter) !important;
        background: var(--m-bg);
    }

    .data-detail-breadcrumb {
        width: 100% !important;
        height: auto !important;
        min-height: 48px !important;
        margin: 0 0 12px !important;
        padding: 8px 10px !important;
        gap: 6px;
        overflow: hidden;
        background: var(--m-surface) !important;
        border: 1px solid var(--m-border) !important;
        border-radius: 12px !important;
        box-shadow: none !important;
    }

    .data-detail-breadcrumb .layui-breadcrumb {
        display: flex;
        min-width: 0;
        align-items: center;
        overflow: hidden;
    }

    .data-detail-breadcrumb .layui-breadcrumb a {
        min-width: 0;
        margin: 0 !important;
        padding: 6px 4px !important;
        overflow: hidden;
        font-size: 13px !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .data-detail-breadcrumb > a {
        flex: 0 0 auto;
        padding: 0 8px !important;
        font-size: 13px !important;
    }

    .data-detail > .layui-row,
    .data-detail .layui-row[style*="display: flex"] {
        display: flex !important;
        width: 100% !important;
        margin: 0 !important;
        flex-direction: column !important;
    }

    .data-detail > .layui-row > [class*="layui-col-"],
    .data-detail .layui-row[style*="display: flex"] > [class*="layui-col-"] {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
    }

    .data-detail #swiper {
        width: 100% !important;
        height: min(88vw, 360px) !important;
        max-height: 360px !important;
        border-radius: var(--m-radius) !important;
    }

    .data-detail .title {
        margin: 0 !important;
        padding: 12px !important;
        font-size: 19px !important;
        line-height: 1.35;
    }

    .data-detail .detail-item {
        display: flex !important;
        width: 100% !important;
        min-height: 46px;
        margin: 0 !important;
        padding: 8px 10px !important;
        align-items: flex-start !important;
        background: var(--m-surface) !important;
        border-bottom: 1px solid var(--m-border) !important;
    }

    .data-detail .detail-item > span:first-child {
        flex: 0 0 82px;
        width: 82px !important;
        min-width: 82px !important;
        padding: 7px 8px 7px 0 !important;
        color: var(--m-muted) !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
        text-align: left !important;
    }

    .data-detail .detail-item .desc,
    .data-detail .detail-item > span:last-child {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0 !important;
        padding: 6px 0 !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .data-detail .tool-container,
    .data-detail .count-container {
        width: 100%;
        margin-top: 10px !important;
        padding: 10px !important;
        gap: 8px;
        flex-wrap: wrap;
    }

    .detail-tab,
    .message-container,
    .forum-container {
        width: 100% !important;
        margin: 12px 0 0 !important;
        padding: 0 !important;
    }

    .detail-tab .layui-tab-title {
        display: flex;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .detail-tab .layui-tab-title::-webkit-scrollbar { display: none; }
    .detail-tab .layui-tab-title li { flex: 0 0 auto; min-width: 92px; }

    .detail-tab .layui-tab-content,
    .message-container .message-form,
    .message-container .message-list {
        padding: 10px !important;
    }

    .detail-tab img,
    .news-container .content img,
    .forum-container .content img {
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
    }

    .video-container video,
    .video-container iframe {
        width: 100% !important;
        height: auto !important;
        min-height: 210px;
    }

    /* Add/edit/booking forms. */
    .data-add-container {
        margin: 0 !important;
        padding: 12px !important;
        background: var(--m-bg) !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .data-add-container .add {
        padding: 14px 12px !important;
        background: var(--m-surface);
        border: 1px solid var(--m-border);
        border-radius: var(--m-radius);
        box-shadow: 0 5px 18px rgba(23, 32, 51, .05);
    }

    .data-add-container .add .layui-form-item,
    .data-add-container .layui-form-item,
    .right-container .layui-form-item {
        display: flex !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        flex-direction: column !important;
        background: transparent !important;
        border: 0 !important;
    }

    .data-add-container .layui-form-label,
    .right-container .layui-form-label {
        display: block !important;
        float: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 28px;
        margin: 0 !important;
        padding: 0 0 6px !important;
        overflow: visible !important;
        color: var(--m-text) !important;
        font-size: 14px !important;
        font-weight: 600;
        line-height: 22px !important;
        text-align: left !important;
        white-space: normal !important;
        opacity: 1 !important;
        background: transparent !important;
        border: 0 !important;
    }

    .data-add-container .layui-input-block,
    .data-add-container .layui-input-inline,
    .right-container .layui-input-block,
    .right-container .layui-input-inline {
        display: block !important;
        flex: none !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .data-add-container .layui-input,
    .data-add-container .layui-textarea,
    .data-add-container .layui-select-title input,
    .right-container .layui-input,
    .right-container .layui-textarea,
    .right-container .layui-select-title input {
        width: 100% !important;
        min-width: 0 !important;
        height: 46px !important;
        padding: 0 12px !important;
        color: var(--m-text) !important;
        background: #fff !important;
        border: 1px solid #dce1ea !important;
        border-radius: 10px !important;
    }

    .data-add-container .layui-textarea,
    .right-container .layui-textarea {
        min-height: 120px !important;
        height: auto !important;
        padding: 10px 12px !important;
    }

    .data-add-container .layui-form-radio,
    .data-add-container .layui-form-checkbox,
    .right-container .layui-form-radio,
    .right-container .layui-form-checkbox {
        margin: 4px 12px 4px 0 !important;
    }

    .data-add-container .layui-btn,
    .right-container .layui-btn {
        min-height: 44px !important;
        margin: 4px 0 !important;
        border-radius: 10px !important;
    }

    .data-add-container .layui-form-item:last-child .layui-input-block,
    .right-container .layui-form-item:last-child .layui-input-block {
        display: flex !important;
        gap: 8px;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        text-align: left !important;
    }

    .data-add-container .layui-form-item:last-child .layui-btn,
    .right-container .layui-form-item:last-child .layui-btn {
        flex: 1 1 calc(50% - 4px) !important;
        width: auto !important;
        min-width: 120px;
        margin: 0 !important;
    }

    .data-add-container .layui-upload-img,
    .right-container .layui-upload-img,
    .data-add-container [id$="Img"],
    .right-container [id$="Img"] {
        width: 88px !important;
        height: 88px !important;
        object-fit: cover;
        border-radius: 12px !important;
    }

    .tox,
    .tox-tinymce,
    .edui-default,
    .edui-editor,
    iframe[id*="tiny"],
    iframe[id*="ueditor"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Personal center. */
    .index-title {
        padding: 14px var(--m-gutter) !important;
        flex-direction: row !important;
        gap: 6px;
    }

    .index-title span:first-child { display: none; }

    .center-container {
        display: flex !important;
        margin: 0 !important;
        padding: 0 var(--m-gutter) var(--m-gutter) !important;
        flex-direction: column !important;
        text-align: left !important;
    }

    .center-container .left-container {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 0 10px !important;
        padding: 0 !important;
        overflow: hidden;
        background: var(--m-surface) !important;
        border: 1px solid var(--m-border) !important;
        border-radius: 12px !important;
        box-shadow: none !important;
    }

    .center-container .layui-nav-tree {
        display: flex !important;
        width: 100% !important;
        padding: 4px !important;
        overflow-x: auto;
        overflow-y: hidden;
        background: transparent !important;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .center-container .layui-nav-tree::-webkit-scrollbar { display: none; }

    .center-container .layui-nav-tree .layui-nav-item {
        flex: 0 0 auto !important;
        width: auto !important;
        height: 42px !important;
        min-width: 92px;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 9px !important;
        line-height: 42px !important;
    }

    .center-container .layui-nav-tree .layui-nav-item a {
        padding: 0 14px !important;
        font-size: 13px !important;
    }

    .center-container .right-container {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 14px !important;
        background: var(--m-surface) !important;
        border: 1px solid var(--m-border) !important;
        border-radius: var(--m-radius) !important;
        box-shadow: none !important;
    }

    .center-container .right-container form { width: 100%; }

    .right-container .layui-form-label[style*="opacity: 0"] {
        min-height: 0 !important;
        padding: 0 !important;
        font-size: 0 !important;
    }

    #touxiangImg {
        display: block;
        width: 88px !important;
        height: 88px !important;
        margin: 0 auto 8px !important;
        border-radius: 50% !important;
    }

    #touxiangUpload { width: 100% !important; }

    /* Login and registration. */
    .login,
    .register,
    .reg {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        height: auto !important;
        margin: 0 !important;
        padding: 24px 14px !important;
        align-items: flex-start !important;
        justify-content: center !important;
        overflow-y: auto;
        background-position: center !important;
        background-size: cover !important;
    }

    .login form,
    .register form,
    .reg form,
    .login-form,
    .login-container {
        width: 100% !important;
        max-width: 420px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        margin: auto !important;
        padding: 20px 16px !important;
        background: rgba(255, 255, 255, .97) !important;
        border: 1px solid rgba(255, 255, 255, .75) !important;
        border-radius: 18px !important;
        box-shadow: 0 16px 46px rgba(23, 32, 51, .18) !important;
    }

    .login .title,
    .register .title,
    .reg .title {
        margin: 0 0 16px !important;
        padding: 0 !important;
        color: var(--m-brand-dark) !important;
        font-size: 22px !important;
        font-weight: 700;
        line-height: 1.4 !important;
        text-align: center !important;
    }

    .login .form-item,
    .register .form-item,
    .reg .form-item {
        display: flex !important;
        width: 100% !important;
        height: auto !important;
        min-height: 58px;
        margin: 0 0 8px !important;
        padding: 0 !important;
        align-items: center !important;
        background: transparent !important;
        border: 0 !important;
    }

    .login .form-item .layui-input,
    .register .form-item .layui-input,
    .reg .form-item .layui-input,
    .login .form-item > input,
    .register .form-item > input,
    .reg .form-item > input {
        width: 100% !important;
        min-width: 0 !important;
        height: 48px !important;
        padding: 0 12px !important;
        font-size: 16px !important;
        background: #fff !important;
        border: 1px solid #dce1ea !important;
        border-radius: 10px !important;
    }

    .login .codes,
    .register .codes,
    .reg .codes { gap: 8px; }

    .login .codes #code,
    .register .codes #code,
    .reg .codes #code {
        flex: 1 1 auto !important;
        width: 0 !important;
    }

    .login .codes .nums,
    .register .codes .nums,
    .reg .codes .nums {
        flex: 0 0 92px;
        min-height: 48px;
        background: #f2f4f8;
        border: 1px solid var(--m-border);
        border-radius: 10px;
    }

    .login .l-redio,
    .register .l-redio,
    .reg .l-redio {
        min-height: 48px !important;
        padding: 4px 0 !important;
    }

    .login .btn-submit,
    .register .btn-submit,
    .reg .btn-submit {
        width: 100% !important;
        height: 48px !important;
        margin: 8px 0 12px !important;
        border-radius: 10px !important;
    }

    .login form p.txt,
    .register form p.txt,
    .reg form p.txt {
        width: 100% !important;
        padding: 4px 0 !important;
        font-size: 14px !important;
        text-align: center !important;
    }

    /* News/forum/message content. */
    .news-container {
        margin: 0 !important;
        padding: var(--m-gutter) !important;
    }

    .news-container .news-list .news-item {
        display: flex;
        width: 100%;
        padding: 10px 0 !important;
        gap: 10px;
        align-items: flex-start;
    }

    .news-container .news-list .news-item .cover-container {
        flex: 0 0 104px;
        width: 104px !important;
        margin: 0 !important;
    }

    .news-container .news-list .news-item .cover-container .cover {
        width: 104px !important;
        height: 88px !important;
        border-radius: 10px;
    }

    .news-container .news-list .news-item .detail-container { min-width: 0; }

    .news-container .news-list .news-item .detail-container .desc {
        height: auto !important;
        max-height: 62px;
        padding-top: 6px !important;
        overflow: hidden;
    }

    .news-container .content,
    .forum-container .content {
        margin: 12px 0 !important;
        padding: 12px !important;
        overflow-wrap: anywhere;
        font-size: 15px !important;
        line-height: 1.7 !important;
        background: var(--m-surface);
        border-radius: var(--m-radius);
    }

    .news-container .bottom-container,
    .forum-container .bottom-container {
        height: auto !important;
        min-height: 50px;
        margin: 12px 0 !important;
        padding: 8px !important;
        line-height: 1.4 !important;
        align-items: center;
    }

    .message-container textarea,
    .forum-container textarea {
        width: 100% !important;
        min-height: 110px;
    }

    /* Tables, pagination and popups. */
    .paper-container,
    .address-table,
    .layui-table-view,
    .layui-table-box,
    .layui-table-body {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .layui-table { min-width: 620px; }

    .pager,
    .layui-laypage {
        display: flex !important;
        width: 100% !important;
        margin: 12px 0 !important;
        padding: 0 2px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .layui-laypage a,
    .layui-laypage span {
        min-width: 44px;
        height: 44px !important;
        margin: 2px !important;
        padding: 0 9px !important;
        line-height: 44px !important;
    }

    .layui-laypage-count,
    .layui-laypage-limits,
    .layui-laypage-skip { display: none !important; }

    .layui-layer:not(.layui-layer-tips) {
        right: 12px !important;
        left: 12px !important;
        width: auto !important;
        max-width: calc(100vw - 24px) !important;
    }

    .layui-layer-iframe,
    .layui-layer-page {
        height: min(82vh, 680px) !important;
        height: min(82dvh, 680px) !important;
    }

    .layui-layer-content,
    .layui-layer-content iframe { max-width: 100% !important; }

    .layui-laydate,
    .layui-laydate-main,
    .layui-laydate-content,
    .layui-laydate-content table { max-width: calc(100vw - 24px) !important; }

    .gotop {
        right: 12px !important;
        top: auto !important;
        bottom: 82px !important;
    }

    .gotop a {
        width: 44px !important;
        height: 44px !important;
    }

    .footer,
    #footer { min-width: 0 !important; max-width: 100% !important; }
    .footer .wrapper,
    .f_top { width: 100% !important; }
}

@media (max-width: 359px) {
    .recommend .box .list .list-item,
    .index-pv1 .box .list .list-item,
    .index-pv3 .box .list .list-item { padding: 4px !important; }

    .recommend .box .list .list-item-body > img,
    .recommend .box .list .list-item .list-item-body > img { height: 126px !important; }

    .app-shell #header .navs li a { font-size: 10px !important; }
}

@media (min-width: 769px) and (max-width: 1100px) {
    .container,
    .wrapper,
    .con_1000,
    .recommend .box,
    .news .box,
    .lists .box,
    .search-container,
    .data-detail,
    .center-container,
    .index-title,
    .news-container .news-list,
    .news-container .content,
    .news-container .bottom-container,
    .message-container,
    .forum-container,
    .forum-container .content,
    .forum-container .bottom-container {
        width: calc(100% - 32px) !important;
        max-width: 1000px !important;
        min-width: 0 !important;
    }

    .data-add-container {
        width: calc(100% - 32px) !important;
        max-width: 800px !important;
    }
}

/* The public entry always behaves like a centered phone application. */
html:has(> body.app-shell) {
    min-width: 0 !important;
    background: #fff !important;
}

body.app-shell {
    position: relative;
    width: 100% !important;
    max-width: var(--m-app-width) !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto !important;
    padding: var(--m-header) 0 calc(var(--m-tabbar) + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    color: var(--m-text);
    background: var(--m-surface) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", Arial, sans-serif !important;
}

.app-shell,
.app-shell * {
    box-sizing: border-box;
}

.app-shell #header {
    position: fixed !important;
    top: 0 !important;
    right: auto !important;
    left: max(0px, calc((100% - var(--m-app-width)) / 2)) !important;
    z-index: 1000 !important;
    width: min(100%, var(--m-app-width)) !important;
    height: var(--m-header) !important;
    min-height: var(--m-header) !important;
    background: var(--m-brand) !important;
    border: 0 !important;
    box-shadow: 0 3px 16px rgba(11, 77, 184, .2) !important;
}

.app-shell #header .nav-top {
    position: relative;
    display: flex !important;
    width: 100% !important;
    height: var(--m-header) !important;
    margin: 0 !important;
    padding: 0 62px !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #0b4db8 0%, #0b61c9 76%, #087f9d 100%) !important;
    border: 0 !important;
    box-shadow: none !important;
}

.app-shell #header .nav-top::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    content: "";
    background: linear-gradient(90deg, transparent, var(--m-accent), transparent);
    opacity: .9;
}

.app-shell #header .nav-top-title {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: var(--m-header) !important;
    letter-spacing: .02em;
    text-align: center !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-shell #header .nav-top-img,
.app-shell #header .nav-top-tel {
    display: none !important;
}

.app-shell #header .mobile-admin-link {
    position: absolute;
    top: 6px;
    right: 10px;
    z-index: 2;
    display: flex !important;
    width: 46px !important;
    height: 44px !important;
    padding: 0 !important;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 600;
    line-height: 44px !important;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 17px;
}

.app-shell #header .navs {
    position: fixed !important;
    top: auto !important;
    right: auto !important;
    bottom: 0 !important;
    left: max(0px, calc((100% - var(--m-app-width)) / 2)) !important;
    z-index: 1001 !important;
    display: block !important;
    width: min(100%, var(--m-app-width)) !important;
    height: calc(var(--m-tabbar) + env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    padding: 0 0 env(safe-area-inset-bottom) !important;
    background: rgba(255, 255, 255, .97) !important;
    border: 0 !important;
    border-top: 1px solid var(--m-border) !important;
    box-shadow: 0 -7px 24px rgba(19, 35, 61, .09) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.app-shell #header .navs .list,
.app-shell #header .navs ul {
    width: 100% !important;
    height: var(--m-tabbar) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.app-shell #header .navs ul {
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-between !important;
}

.app-shell #header .navs li,
.app-shell #header .navs li:last-child {
    position: relative;
    display: flex !important;
    flex: 1 1 25% !important;
    width: 25% !important;
    min-width: 0 !important;
    height: var(--m-tabbar) !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch;
    justify-content: center;
    color: var(--m-muted) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

.app-shell #header .navs li::before {
    display: none !important;
    content: none !important;
}

.app-shell #header .navs li a {
    display: flex !important;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 8px 2px 7px !important;
    align-items: center;
    justify-content: center !important;
    flex-direction: column;
    gap: 3px;
    color: inherit !important;
    font-size: 11px !important;
    font-weight: 600;
    line-height: 1.15 !important;
    text-align: center;
    white-space: nowrap;
}

.app-shell #header .navs .tab-icon {
    display: block !important;
    width: 26px;
    height: 26px;
    margin: 0 !important;
    color: currentColor !important;
    font-size: 23px !important;
    font-weight: 400;
    line-height: 26px !important;
}

.app-shell #header .navs li.current,
.app-shell #header .navs li:hover,
.app-shell #header .navs li:focus-within {
    color: var(--m-brand) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-shell #header .navs li.current::after {
    position: absolute;
    right: 34%;
    bottom: 3px;
    left: 34%;
    height: 3px;
    content: "";
    background: var(--m-accent);
    border-radius: 99px;
}

.app-shell #iframe {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: calc(100vh - var(--m-header) - var(--m-tabbar)) !important;
    min-height: calc(100dvh - var(--m-header) - var(--m-tabbar)) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    background: var(--m-bg) !important;
    border: 0 !important;
}

.app-shell #tabbar {
    display: none !important;
}

@media (min-width: 431px) {
    body.app-shell {
        border-right: 1px solid var(--m-border);
        border-left: 1px solid var(--m-border);
        box-shadow: 0 0 36px rgba(19, 35, 61, .12);
    }
}

/* Palette and resilient controls shared by all generated iframe pages. */
@media (max-width: 768px) {
    body:not(.app-shell) {
        min-height: 100vh;
        min-height: 100dvh;
        background: var(--m-bg) !important;
    }

    body:not(.app-shell) .layui-fluid,
    body:not(.app-shell) .layui-container,
    body:not(.app-shell) .layui-row,
    body:not(.app-shell) .layui-form,
    body:not(.app-shell) .layui-form-item,
    body:not(.app-shell) .layui-inline {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body:not(.app-shell) .layui-btn:not(.layui-btn-primary):not(.layui-btn-danger):not(.layui-btn-disabled),
    body:not(.app-shell) button[type="submit"] {
        color: #fff !important;
        background: var(--m-brand) !important;
        border-color: var(--m-brand) !important;
        box-shadow: none !important;
    }

    body:not(.app-shell) .layui-btn:not(.layui-btn-primary):not(.layui-btn-danger):not(.layui-btn-disabled):hover,
    body:not(.app-shell) button[type="submit"]:hover {
        background: var(--m-brand-dark) !important;
        border-color: var(--m-brand-dark) !important;
    }

    body:not(.app-shell) .layui-btn-primary {
        color: var(--m-brand) !important;
        background: #fff !important;
        border-color: #b9c9e5 !important;
    }

    body:not(.app-shell) .recommend .box > div[style*="text-align"] > button,
    body:not(.app-shell) .news .box > div[style*="text-align"] > button,
    body:not(.app-shell) .lists .box > div[style*="text-align"] > button {
        min-height: 44px !important;
        color: var(--m-brand) !important;
        background: var(--m-brand-soft) !important;
        border: 1px solid #cfdbef !important;
        box-shadow: none !important;
    }

    body:not(.app-shell) .recommend .box > div[style*="text-align"] > button i,
    body:not(.app-shell) .news .box > div[style*="text-align"] > button i,
    body:not(.app-shell) .lists .box > div[style*="text-align"] > button i {
        color: inherit !important;
    }

    body:not(.app-shell) input:focus,
    body:not(.app-shell) select:focus,
    body:not(.app-shell) textarea:focus,
    body:not(.app-shell) .layui-input:focus,
    body:not(.app-shell) .layui-textarea:focus {
        border-color: var(--m-brand) !important;
        box-shadow: 0 0 0 3px rgba(11, 77, 184, .1) !important;
        outline: 0;
    }

    body:not(.app-shell) .layui-form-select dl dd.layui-this,
    body:not(.app-shell) .layui-laypage .layui-laypage-curr .layui-laypage-em,
    body:not(.app-shell) .layui-form-checked[lay-skin="primary"] i {
        background-color: var(--m-brand) !important;
    }

    body:not(.app-shell) .layui-form-radio > i:hover,
    body:not(.app-shell) .layui-form-radioed > i,
    body:not(.app-shell) .layui-form-checked[lay-skin="primary"] i {
        color: var(--m-brand) !important;
        border-color: var(--m-brand) !important;
    }

    body:not(.app-shell) .layui-badge,
    body:not(.app-shell) .layui-badge-dot,
    body:not(.app-shell) .layui-badge-rim {
        background-color: var(--m-accent) !important;
        border-color: var(--m-accent) !important;
    }

    body:not(.app-shell) .recommend .box .list .price,
    body:not(.app-shell) .data-detail .price {
        color: var(--m-accent) !important;
    }

    body:not(.app-shell) .data-detail-breadcrumb > a:last-child,
    body:not(.app-shell) .data-detail-breadcrumb > a:last-child i {
        color: var(--m-accent) !important;
    }

    body:not(.app-shell) .detail-tab .layui-tab {
        background: #fff !important;
        border: 1px solid var(--m-border) !important;
        border-radius: var(--m-radius) !important;
        box-shadow: none !important;
    }

    body:not(.app-shell) .detail-tab .layui-tab-title {
        color: var(--m-muted) !important;
        background: #fff !important;
        border-color: var(--m-border) !important;
    }

    body:not(.app-shell) .detail-tab .layui-tab-title li {
        color: var(--m-muted) !important;
        background: transparent !important;
    }

    body:not(.app-shell) .detail-tab .layui-tab-title li.layui-this {
        color: #fff !important;
        background: var(--m-brand) !important;
    }

    body:not(.app-shell) .detail-tab .layui-tab-title li.layui-this::after {
        border: 0 !important;
    }

    body:not(.app-shell) .layui-table thead tr,
    body:not(.app-shell) .layui-table-header,
    body:not(.app-shell) .layui-layer-title {
        color: var(--m-text) !important;
        background: var(--m-brand-soft) !important;
    }

    body:not(.app-shell) .layui-layer:not(.layui-layer-tips) {
        overflow: hidden;
        background: #fff !important;
        border-radius: var(--m-radius) !important;
        box-shadow: 0 18px 48px rgba(19, 35, 61, .2) !important;
    }
}