/* 响应式设计优化 */

/* 未引入 common/style 的页面（如部分 admin）也需媒体不撑破 — 与 common/style 规则一致 */
img,
picture,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
}

/* 基础断点 */
:root {
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
    /* 触控最小点击区域（约 44×44 CSS 像素，WCAG 2.5.5 参考） */
    --touch-target-min: 44px;
}

/* 超小屏幕 (手机竖屏) */
@media (max-width: 575.98px) {
    .container {
        width: 100%;
        padding: 0 15px;
    }
    
    .row {
        margin: 0 -7.5px;
    }
    
    .col-xs-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-xs-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-xs-3 { flex: 0 0 25%; max-width: 25%; }
    .col-xs-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-xs-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-xs-6 { flex: 0 0 50%; max-width: 50%; }
    .col-xs-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-xs-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-xs-9 { flex: 0 0 75%; max-width: 75%; }
    .col-xs-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-xs-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-xs-12 { flex: 0 0 100%; max-width: 100%; }
    
    /* 移动端导航 */
    .navbar {
        padding: 0.5rem 1rem;
    }
    
    .navbar-brand {
        font-size: 1.2rem;
    }
    
    .navbar-nav {
        flex-direction: column;
        width: 100%;
    }
    
    .navbar-toggler {
        display: block;
    }
    
    /* 移动端卡片 */
    .card {
        margin-bottom: 1rem;
        border-radius: 0.5rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    /* 移动端表格 */
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .table {
        font-size: 0.875rem;
    }
    
    /* 移动端表单 */
    .form-control {
        font-size: 16px; /* 防止iOS缩放 */
    }
    
    .form-group {
        margin-bottom: 1rem;
    }
    
    /* 移动端按钮 */
    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        line-height: 1.5;
    }
    
    .btn-block {
        display: block;
        width: 100%;
    }

    /* 触控最小点击区域：主要按钮、分页、顶栏 Tab；排除 .touch-ignore / 纯图标小钮 */
    .btn:not(.touch-ignore),
    button:not(.touch-ignore):not(.cost-toggle),
    input[type="submit"]:not(.touch-ignore),
    input[type="button"]:not(.touch-ignore),
    .nav-tab,
    .nav-tabs .nav-tab,
    .tabs .tab,
    .page-btn,
    .pager .page-btn,
    .pagination .page-btn,
    .pager button:not(.touch-ignore),
    .header .location,
    .bottom-nav .nav-item {
        min-height: var(--touch-target-min);
        box-sizing: border-box;
    }
    .btn-block:not(.touch-ignore) {
        min-width: auto;
        width: 100%;
    }

    /* 后台侧栏一级链接 */
    .admin-container .menu-link,
    .admin-layout .sidebar a.menu-link {
        min-height: var(--touch-target-min);
    }
    
    /* 移动端网格系统 */
    .grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* 移动端隐藏/显示 */
    .d-xs-none { display: none !important; }
    .d-xs-block { display: block !important; }
    .d-xs-inline { display: inline !important; }
    .d-xs-inline-block { display: inline-block !important; }
    .d-xs-flex { display: flex !important; }
    .d-xs-inline-flex { display: inline-flex !important; }
}

/* 小屏幕 (手机横屏) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .container {
        max-width: 540px;
    }
    
    .col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
    .col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
    .col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-sm-9 { flex: 0 0 75%; max-width: 75%; }
    .col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
    
    .grid-sm-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-sm-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .grid-sm-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .d-sm-none { display: none !important; }
    .d-sm-block { display: block !important; }
    .d-sm-inline { display: inline !important; }
    .d-sm-inline-block { display: inline-block !important; }
    .d-sm-flex { display: flex !important; }
    .d-sm-inline-flex { display: inline-flex !important; }
}

/* 中等屏幕 (平板) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .container {
        max-width: 720px;
    }
    
    .col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-md-9 { flex: 0 0 75%; max-width: 75%; }
    .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-md-12 { flex: 0 0 100%; max-width: 100%; }
    
    .grid-md-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-md-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .grid-md-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .grid-md-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .d-md-none { display: none !important; }
    .d-md-block { display: block !important; }
    .d-md-inline { display: inline !important; }
    .d-md-inline-block { display: inline-block !important; }
    .d-md-flex { display: flex !important; }
    .d-md-inline-flex { display: inline-flex !important; }
    
    /* 平板导航 */
    .navbar {
        padding: 1rem 2rem;
    }
    
    .navbar-nav {
        flex-direction: row;
    }
    
    .navbar-toggler {
        display: none;
    }
    
    /* 平板卡片 */
    .card-deck {
        display: flex;
        flex-flow: row wrap;
        margin-right: -15px;
        margin-left: -15px;
    }
    
    .card-deck .card {
        flex: 1 0 0%;
        margin-right: 15px;
        margin-bottom: 0;
        margin-left: 15px;
    }
}

/* 大屏幕 (桌面) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .container {
        max-width: 960px;
    }
    
    .col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
    .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
    .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
    
    .grid-lg-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-lg-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .grid-lg-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .grid-lg-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .d-lg-none { display: none !important; }
    .d-lg-block { display: block !important; }
    .d-lg-inline { display: inline !important; }
    .d-lg-inline-block { display: inline-block !important; }
    .d-lg-flex { display: flex !important; }
    .d-lg-inline-flex { display: inline-flex !important; }
    
    /* 桌面侧边栏 */
    .sidebar {
        width: 250px;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        background: #fff;
        box-shadow: 2px 0 5px rgba(0,0,0,0.1);
        z-index: 1000;
    }
    
    .main-content {
        margin-left: 250px;
    }
}

/* 超大屏幕 (大桌面) */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    
    .col-xl-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-xl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-xl-3 { flex: 0 0 25%; max-width: 25%; }
    .col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-xl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-xl-6 { flex: 0 0 50%; max-width: 50%; }
    .col-xl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-xl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-xl-9 { flex: 0 0 75%; max-width: 75%; }
    .col-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-xl-12 { flex: 0 0 100%; max-width: 100%; }
    
    .grid-xl-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-xl-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .grid-xl-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .grid-xl-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .d-xl-none { display: none !important; }
    .d-xl-block { display: block !important; }
    .d-xl-inline { display: inline !important; }
    .d-xl-inline-block { display: inline-block !important; }
    .d-xl-flex { display: flex !important; }
    .d-xl-inline-flex { display: inline-flex !important; }
}

/* 超超大屏幕 */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/* 基础网格系统 */
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

/* 网格工具类 */
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }

.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }

.mw-100 { max-width: 100% !important; }
.mh-100 { max-height: 100% !important; }

/* 间距工具类 */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mr-0 { margin-right: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ml-0 { margin-left: 0 !important; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }

.m-1 { margin: 0.25rem !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.ml-1 { margin-left: 0.25rem !important; }
.mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }

.m-2 { margin: 0.5rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }

.m-3 { margin: 1rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.ml-3 { margin-left: 1rem !important; }
.mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }

.m-4 { margin: 1.5rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }

.m-5 { margin: 3rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mr-5 { margin-right: 3rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.ml-5 { margin-left: 3rem !important; }
.mx-5 { margin-left: 3rem !important; margin-right: 3rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }

.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }

.p-1 { padding: 0.25rem !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pl-1 { padding-left: 0.25rem !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }

.p-2 { padding: 0.5rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }

.p-3 { padding: 1rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pl-3 { padding-left: 1rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }

.p-4 { padding: 1.5rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }

.p-5 { padding: 3rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pr-5 { padding-right: 3rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.pl-5 { padding-left: 3rem !important; }
.px-5 { padding-left: 3rem !important; padding-right: 3rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

/* 文本工具类 */
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.text-justify { text-align: justify !important; }

.text-wrap { white-space: normal !important; }
.text-nowrap { white-space: nowrap !important; }
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-lowercase { text-transform: lowercase !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-capitalize { text-transform: capitalize !important; }

/* 显示工具类 */
.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-table { display: table !important; }
.d-table-row { display: table-row !important; }
.d-table-cell { display: table-cell !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }

/* Flexbox 工具类 */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }

.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }

.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }

.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }

.align-content-start { align-content: flex-start !important; }
.align-content-end { align-content: flex-end !important; }
.align-content-center { align-content: center !important; }
.align-content-between { align-content: space-between !important; }
.align-content-around { align-content: space-around !important; }
.align-content-stretch { align-content: stretch !important; }

.flex-fill { flex: 1 1 auto !important; }
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }

/* 位置工具类 */
.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }

/* 可访问性 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ===== 易修项目组件响应式适配 (PC + H5) ===== */

/* 头部区域 */
@media (max-width: 576px) {
    .header { padding: 8px 12px; }
    .header-content { gap: 8px; }
    .location span { max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .search-bar { padding: 6px 12px; }
}

/* 轮播图 */
@media (max-width: 576px) {
    .banner-slider { height: 130px; }
    .slider-btn { width: 28px; height: 28px; font-size: 12px; }
    .slide-text h2 { font-size: 16px; }
    .slide-text p { font-size: 12px; }
}
@media (max-width: 768px) {
    .banner-slider { height: 150px; }
}

/* 服务分类网格 */
@media (max-width: 576px) {
    .service-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px; }
    .service-item img, .service-item .fa, .service-item i { width: 36px !important; height: 36px !important; font-size: 20px !important; }
    .service-item span { font-size: 11px; }
}

/* 商品网格（首页 3 列 → 2 列；商城页 3 列 → 2 列） */
@media (max-width: 768px) {
    .product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
}
@media (max-width: 576px) {
    .product-grid { gap: 8px; padding: 10px !important; }
    .product-info h3 { font-size: 12px; }
}

/* 城市选择弹窗 */
@media (max-width: 576px) {
    .city-modal-content { width: 95%; max-height: 70vh; }
    .city-modal-body { max-height: 50vh; }
}

/* 商城页 nav-tabs 横向滚动 */
@media (max-width: 576px) {
    .nav-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 8px 12px; gap: 16px; }
    .nav-tabs::-webkit-scrollbar { display: none; }
}

/* 返回顶部按钮 */
@media (max-width: 576px) {
    .back-to-top { right: 12px; bottom: 68px; width: 30px; height: 30px; font-size: 18px; }
}

/* 表单防 iOS 缩放 */
@media (max-width: 768px) {
    .form-control, .search-bar input, .search-box input { font-size: 16px !important; }
}

/* ========== 易修 H5 扩展（全站 PC 页通用，无需改 HTML） ========== */

/* 全局：防止横向撑破、媒体自适应 */
@media (max-width: 768px) {
    html { -webkit-text-size-adjust: 100%; }
    body { overflow-x: hidden; }
    img, video, canvas { max-width: 100%; height: auto; }
    pre, code { max-width: 100%; overflow-x: auto; word-break: break-word; }
}

/* 表格区域横向滚动（页面将 table 放在带此类名的容器内即可；无容器时兜底常见卡片内 table） */
.table-responsive,
.rj-table-scroll {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
    .table-responsive table,
    .rj-table-scroll table,
    .table-responsive .order-table { min-width: 560px; }
    .table-responsive th,
    .table-responsive td,
    .rj-table-scroll th,
    .rj-table-scroll td { white-space: nowrap; }
    .card .table,
    .table { font-size: 12px; }
    .table th, .table td { padding: 0.4rem 0.5rem; }
}

/* 登录 / 注册等窄卡片 */
@media (max-width: 576px) {
    .login-wrapper,
    .register-wrapper,
    .reg-wrapper {
        max-width: none !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
        margin-top: 20px !important;
        margin-bottom: 20px !important;
        padding: 16px 14px !important;
        box-sizing: border-box;
    }
    .login-wrapper .form-group input,
    .register-wrapper .form-group input,
    .reg-wrapper .form-group input,
    .login-wrapper .form-group select,
    .register-wrapper .form-group select {
        font-size: 16px !important;
    }
}

/* 表单控件 16px（覆盖内联 14px，减少 iOS 自动缩放） */
@media (max-width: 768px) {
    .form-group input:not([type="checkbox"]):not([type="radio"]),
    .form-group select,
    .form-group textarea,
    input[type="text"], input[type="password"], input[type="number"],
    input[type="tel"], input[type="email"], input[type="search"],
    input[type="date"], input[type="time"],
    select, textarea {
        font-size: 16px !important;
    }
}

/* 资讯列表：小屏缩略图改上置全宽 */
@media (max-width: 576px) {
    .article-preview { flex-direction: column; align-items: stretch; }
    .article-thumbnail {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
        margin-right: 0 !important;
        margin-bottom: 10px;
    }
    .article-list { padding: 10px; }
    .article-item .article-header,
    .article-item .article-preview { padding: 12px; }
}

/* 资讯全文浮层：顶栏与正文区窄屏留白、标题两行省略、正文略放大便于阅读 */
@media (max-width: 576px) {
    .article-detail .detail-header {
        padding: 10px 12px !important;
    }
    .article-detail .detail-title {
        font-size: 14px !important;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .article-detail .detail-content {
        padding: 14px 12px 88px !important;
    }
    .article-detail .detail-text {
        font-size: 16px !important;
        line-height: 1.75;
    }
    /* 分享抽屉：链接 + 复制按钮纵向排布，避免横向撑破 */
    #share-modal .share-url-row {
        flex-wrap: wrap;
    }
    #share-modal .share-url-row input {
        min-width: 0;
        flex: 1 1 100%;
    }
    #share-modal .share-url-row .btn-copy {
        width: 100%;
        margin-top: 8px;
    }
    /* 评论：昵称与内容输入改为纵向，避免窄屏挤压 */
    .article-detail .comment-form .row {
        flex-direction: column;
        align-items: stretch;
    }
    .article-detail .comment-form .row input {
        flex: none !important;
        width: 100% !important;
    }
    /* 详情底部点赞/收藏/分享 */
    .article-detail .detail-actions {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }
}

/* 订单详情：时间线 / 费用卡片边距；费用行长标签换行 */
@media (max-width: 576px) {
    .order-timeline,
    .cost-breakdown {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
    .order-timeline {
        padding: 12px !important;
    }
    .cost-item {
        gap: 8px;
        align-items: flex-start !important;
    }
    .cost-item .cost-label {
        flex: 1;
        min-width: 0;
        word-break: break-word;
        padding-right: 8px;
    }
    .cost-item .cost-value {
        flex-shrink: 0;
        text-align: right;
    }
}

/* 订单详情页：主卡片边距、顶栏换行、操作按钮两列/单按钮满宽；编辑弹窗底栏全宽 */
@media (max-width: 576px) {
    #order-detail-view .order-item {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
    #order-detail-view .detail-back {
        flex-wrap: wrap;
        row-gap: 8px;
    }
    #order-detail-view .btn-group {
        justify-content: stretch;
        gap: 8px;
    }
    #order-detail-view .btn-group > .btn,
    #order-detail-view .btn-group > button {
        flex: 1 1 calc(50% - 4px);
        min-width: min(148px, 100%);
        max-width: 100%;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    #order-detail-view .btn-group > .btn:only-child,
    #order-detail-view .btn-group > button:only-child {
        flex: 1 1 100%;
    }
    .edit-modal .edit-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .edit-modal .edit-actions button {
        width: 100%;
    }
}

/* 订单列表（服务订单 / 商城订单共用 #order-list-view + order-card.css） */
@media (max-width: 576px) {
    #order-list-view .order-item {
        padding: 12px 12px !important;
    }
    #order-list-view .order-strip {
        flex-wrap: wrap;
        gap: 8px;
        align-items: flex-start;
    }
    #order-list-view .order-title {
        white-space: normal !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.35;
    }
    #order-list-view .order-meta span {
        word-break: break-word;
    }
    /* 商城列表第三列金额：窄屏单独一行右对齐 */
    #order-list-view .order-right {
        flex: 1 1 100%;
        width: 100%;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        padding-top: 2px;
    }
    /* 商城订单：卡片底部「去支付 / 确认收货」全宽便于点击 */
    #order-list-view .order-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
        text-align: center;
    }
    #order-list-view .order-actions .btn-go-pay,
    #order-list-view .order-actions .btn-confirm-receipt {
        display: flex !important;
        width: 100%;
        box-sizing: border-box;
        justify-content: center;
        align-items: center;
        min-height: 44px;
        font-size: 15px !important;
    }
    /* 商城订单底部分页：页码独占一行，链接可换行 */
    #order-list-view .pager {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px 14px;
        padding: 12px 10px 20px !important;
    }
    #order-list-view .pager > span:first-of-type {
        flex: 1 1 100%;
        width: 100%;
        text-align: center;
    }
}

/* 积分兑换订单（user/points_orders）：#orderList + .order-list 仅此页组合 */
@media (max-width: 576px) {
    #orderList.order-list {
        padding: 10px 12px !important;
    }
    /* 本页独占 .status-tabs */
    .status-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        gap: 6px;
        padding-left: 12px;
        padding-right: 12px;
    }
    .status-tab {
        flex-shrink: 0;
    }
    #orderList.order-list .goods-title {
        white-space: normal !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.35;
    }
    #orderList.order-list .order-extra {
        word-break: break-word;
    }
    /* 积分兑换订单：分页区上一页/下一页大按钮（紧随 #orderList.order-list） */
    #orderList.order-list + .pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px;
        padding: 12px 12px 24px !important;
    }
    #orderList.order-list + .pagination #pageInfo {
        flex: 1 1 100%;
        width: 100%;
        text-align: center;
    }
    #orderList.order-list + .pagination button {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
        min-height: 44px;
        margin: 0 !important;
        font-size: 15px !important;
    }
    /* 积分明细页：结构同上分页（#logList.log-list + .pagination） */
    #logList.log-list + .pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px;
        padding: 12px 12px 24px !important;
    }
    #logList.log-list + .pagination #pageInfo {
        flex: 1 1 100%;
        width: 100%;
        text-align: center;
    }
    #logList.log-list + .pagination button {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
        min-height: 44px;
        margin: 0 !important;
        font-size: 15px !important;
    }
}

/* 服务商：订单/财务/装修项目/商品 — 「上一页 + 页码文案 + 下一页」分页 */
@media (max-width: 576px) {
    #list-view .pagination,
    #servicePager.pagination,
    #mallPager.pagination,
    .pagination#pager {
        flex-wrap: wrap !important;
        gap: 10px !important;
        justify-content: center;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    #list-view .pagination #pageInfo,
    #servicePager #servicePageInfo,
    #mallPager #mallPageInfo,
    .pagination#pager #pageInfo {
        flex: 1 1 100%;
        width: 100%;
        text-align: center;
        order: -1;
    }
    #list-view .pagination button,
    #servicePager button,
    #mallPager button,
    .pagination#pager button {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
        min-height: 44px;
        font-size: 15px !important;
    }
}

/* 用户优惠券中心：数字页码 + 上下页（#pagination 在 .container 内，与 service-orders 的 #list-view #pagination 区分） */
@media (max-width: 576px) {
    .container #pagination.pagination {
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 12px 8px 20px !important;
        max-width: 100%;
        box-sizing: border-box;
    }
    .container #pagination.pagination .page-btn {
        min-height: 42px;
        min-width: 42px;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px 12px;
        font-size: 14px;
    }
}

/* 财务管理：服务/商城子 Tab 过多时横向滑动 */
@media (max-width: 768px) {
    #serviceSection .nav-tabs-inner,
    #mallSection .nav-tabs-inner {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }
    #serviceSection .nav-tab-inner,
    #mallSection .nav-tab-inner {
        flex: 0 0 auto;
        min-width: 72px;
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* 财务管理：顶部说明条、列表标题两行、板块标题与统计分行（仅本页使用 .summary-bar） */
@media (max-width: 576px) {
    .summary-bar {
        flex-wrap: wrap;
        gap: 6px 12px;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 10px 12px !important;
        margin-bottom: 8px;
    }
    /* 与首块「服务订单收入」间距：避免与 .section{margin-top} 叠成过大空白 */
    #serviceSection.section {
        margin-top: 0;
    }
    .summary-bar > span {
        flex: 1 1 auto;
        min-width: 0;
        word-break: break-word;
    }
    #serviceSection .section-header,
    #mallSection .section-header {
        flex-wrap: wrap;
        gap: 8px;
        align-items: flex-start;
    }
    #serviceSection .section-header > div:first-child,
    #mallSection .section-header > div:first-child {
        flex: 1 1 100%;
        min-width: 0;
    }
    #serviceSection .section-header > div:last-child,
    #mallSection .section-header > div:last-child {
        width: 100%;
        text-align: right;
    }
    #serviceSection .list-title,
    #mallSection .list-title {
        white-space: normal !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.35;
    }
    /* 列表行：主信息与金额/状态分行，避免窄屏左右挤压 */
    #serviceSection .list-item,
    #mallSection .list-item {
        flex-wrap: wrap;
        align-items: flex-start;
        padding: 12px 12px !important;
    }
    #serviceSection .list-main,
    #mallSection .list-main {
        flex: 1 1 100%;
        min-width: 0;
    }
    #serviceSection .list-right,
    #mallSection .list-right {
        flex: 1 1 100%;
        width: 100%;
        text-align: right;
        padding-top: 4px;
    }
    /* 副行：地址/时间与图标对齐顶，文案可换行 */
    #serviceSection .list-meta,
    #mallSection .list-meta {
        align-items: flex-start;
    }
    #serviceSection .list-meta i,
    #mallSection .list-meta i {
        flex-shrink: 0;
        margin-top: 2px;
    }
    #serviceSection .list-meta span,
    #mallSection .list-meta span {
        flex: 1;
        min-width: 0;
        word-break: break-word;
        line-height: 1.45;
    }
}

/* 服务商订单管理（service-orders）：详情视图仅此页 id=detail-view */
@media (max-width: 576px) {
    #detail-view {
        padding: 0 10px 20px !important;
        box-sizing: border-box;
    }
    #detail-view .detail-card {
        padding: 12px !important;
    }
    #detail-view .detail-row label {
        display: block;
        width: auto !important;
        margin-bottom: 2px;
        font-size: 12px;
    }
    #detail-view .detail-row span {
        display: block;
        width: 100%;
        word-break: break-word;
    }
    #detail-view .master-quotes .quote-item {
        flex-wrap: wrap;
        gap: 6px;
        align-items: flex-start;
    }
    #detail-view .order-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    #detail-view .order-actions .btn,
    #detail-view .order-actions button {
        display: inline-flex;
        width: 100%;
        min-height: 44px;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
    }
}

/* 服务商订单管理：列表视图仅此页 id=list-view（复用 order-card.css 的 .order-item） */
@media (max-width: 576px) {
    #list-view {
        padding: 0 8px 12px;
        box-sizing: border-box;
    }
    #list-view .empty-state {
        padding-left: 12px;
        padding-right: 12px;
    }
    #list-view .order-item {
        padding: 12px 10px !important;
    }
    #list-view .order-strip {
        gap: 8px;
        align-items: flex-start;
    }
    #list-view .order-title {
        white-space: normal !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.35;
    }
    #list-view .order-meta span {
        word-break: break-word;
    }
    #list-view .order-meta {
        align-items: flex-start;
    }
}

/* 师傅「我的接单」：仅本页为 div#orderList.content，避免与其它页面 id 冲突 */
@media (max-width: 576px) {
    #orderList.content {
        padding: 10px !important;
    }
    #orderList > .view-switcher {
        justify-content: stretch;
        gap: 8px;
        margin-bottom: 12px;
    }
    #orderList > .view-switcher .btn {
        flex: 1;
        text-align: center;
    }
    #orderList > .order-card {
        padding: 12px;
        margin-bottom: 10px;
    }
    #orderList .order-actions {
        gap: 8px;
    }
    #orderList .order-actions .btn {
        flex: 1 1 calc(50% - 4px);
        min-width: min(120px, 100%);
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    #orderList .order-actions .btn:only-child {
        flex: 1 1 100%;
    }
}

/* 师傅接单页：完工 / 改期弹窗底部操作区全宽（含「联系客户」链接） */
@media (max-width: 576px) {
    #completionModal .completion-actions,
    #visitTimeModal .visit-time-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 8px;
    }
    #completionModal .completion-actions > .btn,
    #visitTimeModal .visit-time-actions > .btn,
    #visitTimeModal .visit-time-actions > a {
        width: 100% !important;
        box-sizing: border-box;
        justify-content: center;
    }
}

/* 常见顶部 Tab：横向滑动 */
@media (max-width: 768px) {
    .nav-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }
    .nav-tabs .nav-tab { flex-shrink: 0; }
    /* 紧跟 .header 的一级 Tab（订单/资讯/服务商订单等）：覆盖页面内 flex:1，保证可滑动且不挤成细条 */
    .header + .nav-tabs .nav-tab {
        flex: 0 0 auto !important;
        min-width: 72px;
        padding-left: 12px;
        padding-right: 12px;
        box-sizing: border-box;
    }
}

/* 订单/详情页常用卡片边距 */
@media (max-width: 576px) {
    .card {
        margin-left: 8px !important;
        margin-right: 8px !important;
    }
}

/* 弹层内容不超出屏宽 */
@media (max-width: 576px) {
    .payment-content,
    .review-content,
    .edit-modal .edit-content,
    .contact-master-content,
    .membership-modal-content,
    .quote-modal-content,
    .profile-content,
    .city-modal-content,
    /* 师傅端提醒/会员/报价（含 #notifyModal 加宽版） */
    .notify-modal-content,
    #notifyModal .notify-modal-content,
    /* 师傅订单：完工确认 / 上门时间 */
    .completion-content,
    .visit-time-content,
    /* 服务页：质保、项目列表、商品编辑等全屏滚动弹窗（排除购物车三种居中弹层） */
    .modal:not(.payment-modal):not(.coupon-modal):not(.address-modal) > .modal-content,
    /* 个人中心地址、客服聊天、我的页分享 */
    .address-modal-content,
    .chat-content,
    /* 仅「我的」页二维码弹窗（居中卡片）；资讯页 #share-modal 内为底部抽屉，勿用此类名全局限制 */
    #qrcodeModal .share-content {
        max-width: calc(100vw - 24px) !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* 师傅端弹窗外层留白略收紧，避免与 max-width 叠加溢出 */
    .notify-modal {
        padding: 12px !important;
    }

    /* 用户装修详情：JS 生成的验收/整改简易弹窗内层 */
    .simple-modal-overlay > div {
        max-width: calc(100vw - 24px) !important;
        width: calc(100vw - 24px) !important;
        margin: 12px !important;
        box-sizing: border-box;
    }
}

/* 双列统计：极窄屏允许换行 */
@media (max-width: 380px) {
    .user-stats,
    .stat-row { flex-wrap: wrap; }
}

/* 触摸目标：主按钮略增高 */
@media (max-width: 576px) {
    .submit-btn,
    .btn-primary,
    button[type="submit"] {
        min-height: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

/* 双列表单/时间选择：小屏单列 */
@media (max-width: 576px) {
    .edit-grid,
    .visit-time-grid,
    .quote-fee-grid,
    .decor-stage-percent-grid {
        grid-template-columns: 1fr !important;
    }
}

/* 服务商装修详情：验收/整改/编辑项目弹窗内层卡片贴边不溢出 */
@media (max-width: 576px) {
    #inspectModal > div,
    #rectModal > div,
    #editProjectModal > div {
        margin-left: 12px !important;
        margin-right: 12px !important;
        margin-top: 12px !important;
        margin-bottom: 12px !important;
        max-width: none !important;
        width: calc(100vw - 24px) !important;
        box-sizing: border-box;
    }
}

/* 师傅入口 / 数据宫格：极窄屏单列 */
@media (max-width: 400px) {
    .feature-grid,
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
}

/* 师傅管理首页：统计区边距 */
@media (max-width: 576px) {
    .stats-section {
        margin-left: 12px !important;
        margin-right: 12px !important;
    }
    .manager-section {
        margin-left: 12px !important;
        margin-right: 12px !important;
    }
}

/* 商城 / 积分商城商品宫格：与 shop/index 小屏一致 */
@media (max-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 576px) {
    .product-grid {
        gap: 8px !important;
        padding: 10px !important;
    }
}

/* 服务下单页：地址输入 + 选点按钮横排易挤爆，小屏纵向铺满 */
@media (max-width: 576px) {
    .address-group {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .address-group input,
    .address-group button,
    .address-group .map-btn {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box;
    }
}

/* ========== 服务商入口与项目/商品列表（收尾） ========== */
@media (max-width: 576px) {
    /* service/index：入驻/登录表单与已登录管理区 */
    .form-section {
        margin-left: 12px !important;
        margin-right: 12px !important;
        margin-top: 12px !important;
        padding: 16px !important;
    }
    .service-section {
        margin-left: 12px !important;
        margin-right: 12px !important;
    }
    .service-stats .stat-item {
        padding: 8px 4px;
    }
    .service-stats .stat-value {
        font-size: 16px;
    }
    /* service/index 顶部「申请 / 登录」Tab：可横向滑动 */
    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }
    .tabs .tab {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    /* 装修项目：搜索条与新建弹窗双列表单 */
    .filter-bar {
        flex-wrap: wrap;
    }
    .filter-bar input {
        flex: 1 1 100%;
        min-width: 0;
    }
    .filter-bar button {
        flex: 1 1 auto;
        min-width: 120px;
    }
    .project-list {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    #editModal .form-row-inline {
        flex-direction: column !important;
        gap: 0;
    }
    #editModal .form-row-inline .form-row {
        width: 100%;
    }
    /* 商品管理：仅本页使用 .toolbar / .goods-item */
    .toolbar {
        flex-wrap: wrap;
    }
    .toolbar input {
        flex: 1 1 100%;
        min-width: 0;
    }
    .goods-item {
        flex-wrap: wrap;
    }
    .goods-right {
        flex: 1 1 100%;
        width: 100%;
        text-align: right;
        padding-top: 4px;
    }
    #goodsList.goods-list {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* ========== 用户端顶栏汉堡菜单（html/pc：.header > .header-content，由 mobile-nav.js 注入） ========== */
.mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: 4px;
    padding: 0;
    border: none;
    background: transparent;
    color: #333;
    font-size: 1.25rem;
    cursor: pointer;
    border-radius: 8px;
    flex-shrink: 0;
}

.mobile-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.mobile-nav-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mobile-nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(85vw, 300px);
    max-width: 100%;
    background: #fff;
    z-index: 1100;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
    transform: translateX(-100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.25s ease, visibility 0.25s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mobile-nav-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
}

.mobile-nav-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.mobile-nav-drawer-title {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

.mobile-nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: -8px;
    padding: 8px;
    border: none;
    background: none;
    font-size: 1.75rem;
    line-height: 1;
    color: #666;
    cursor: pointer;
    border-radius: 8px;
}

.mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

.mobile-nav-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--touch-target-min, 44px);
    padding: 10px 16px;
    text-decoration: none;
    color: #333;
    font-size: 1rem;
    border-bottom: 1px solid #f0f0f0;
    box-sizing: border-box;
}

.mobile-nav-list a i {
    width: 1.25rem;
    text-align: center;
    color: #1890ff;
}

.mobile-nav-list a.active {
    background: #f0f7ff;
    color: #007bff;
    font-weight: 500;
}

.mobile-nav-list a.active i {
    color: #007bff;
}

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

@media (max-width: 768px) {
    .header .header-content .mobile-menu-btn,
    .header .mobile-menu-btn.mobile-menu-btn--trailing {
        display: inline-flex;
    }
    /* 仅返回键 + 标题（无 .header-content）时：顶栏 flex + 汉堡靠右（JS 会加 .mobile-nav-header--trailing） */
    .header.mobile-nav-header--trailing,
    .header:has(.mobile-menu-btn--trailing) {
        display: flex !important;
        align-items: center;
        flex-wrap: nowrap;
    }
    .header .mobile-menu-btn.mobile-menu-btn--trailing {
        margin-left: auto;
        flex-shrink: 0;
    }
}

@media (min-width: 769px) {
    .mobile-nav-overlay,
    .mobile-nav-drawer {
        display: none !important;
    }

    .header .header-content .mobile-menu-btn,
    .header .mobile-menu-btn.mobile-menu-btn--trailing {
        display: none !important;
    }
}

/* ========== 后台管理 html/admin（侧栏 + 主区） ========== */
@media (max-width: 992px) {
    .admin-container,
    .admin-layout {
        flex-direction: column !important;
        min-height: 0 !important;
    }
    .admin-container .sidebar,
    .admin-layout .sidebar {
        width: 100% !important;
        min-height: auto;
        padding: 12px 0 !important;
    }
    .admin-container .sidebar .logo,
    .admin-layout .sidebar .logo {
        margin-bottom: 12px !important;
    }
    /* 窄屏：子菜单默认折叠，.is-open 展开（配合 admin-sidebar.js 点击） */
    .admin-container .sidebar .menu > .menu-item > .submenu,
    .admin-layout .sidebar .menu > .menu-item > .submenu {
        display: none !important;
        position: static !important;
    }
    .admin-container .sidebar .menu > .menu-item.is-open > .submenu,
    .admin-layout .sidebar .menu > .menu-item.is-open > .submenu {
        display: block !important;
    }
    /* 窄屏下禁用纯 hover 展开，避免与点击态冲突 */
    .admin-container .menu-item:hover > .submenu,
    .admin-layout .menu-item:hover > .submenu {
        display: none !important;
    }
    .admin-container .menu-item.is-open:hover > .submenu,
    .admin-layout .menu-item.is-open:hover > .submenu {
        display: block !important;
    }
    .main-content {
        min-width: 0 !important;
    }
    .top-nav {
        flex-wrap: wrap;
        height: auto !important;
        min-height: 52px;
        padding: 10px 12px !important;
        gap: 8px;
    }
    .top-nav .breadcrumb {
        flex: 1 1 auto;
        min-width: 0;
    }
    .content {
        padding: 12px !important;
    }
}
@media (max-width: 576px) {
    .admin-container .dashboard,
    .admin-layout .dashboard-grid {
        gap: 12px !important;
    }
}

/* ========== 收银台 payment/pay.html ========== */
@media (max-width: 576px) {
    body.page-cashier .pay-btn {
        min-height: var(--touch-target-min, 44px);
    }
    body.page-cashier .pay-method {
        min-height: 52px;
    }
}

/* ========== 无障碍：减少动效、键盘焦点可见 ========== */
@media (prefers-reduced-motion: reduce) {
    .mobile-nav-drawer,
    .mobile-nav-overlay {
        transition: none !important;
    }
    .slider-container {
        transition: none !important;
    }
}

.mobile-menu-btn:focus-visible,
.mobile-nav-close:focus-visible,
.mobile-nav-list a:focus-visible {
    outline: 2px solid #1890ff;
    outline-offset: 2px;
}

.admin-container .sidebar .menu-link:focus-visible,
.admin-layout .sidebar .menu-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: -4px;
}

.admin-container .submenu a:focus-visible,
.admin-layout .submenu a:focus-visible {
    outline: 2px solid #69c0ff;
    outline-offset: -2px;
}

/* ========== 师傅接单 merchant/master.html ========== */
@media (max-width: 768px) {
    /* 功能卡片：平板/大屏手机两列 */
    .feature-grid {
        gap: 12px !important;
    }
    .feature-card {
        padding: 16px !important;
    }
    .feature-icon {
        font-size: 22px !important;
    }
    .feature-title {
        font-size: 15px !important;
    }
}

@media (max-width: 576px) {
    /* 功能卡片：小屏单列显示 */
    .feature-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .feature-card {
        padding: 14px !important;
        text-align: left !important;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .feature-icon {
        margin-bottom: 0 !important;
        font-size: 20px !important;
    }
    .feature-title {
        margin-bottom: 2px !important;
    }
    .feature-desc {
        font-size: 11px !important;
    }
    
    /* 报价按钮触控区域优化 */
    .quote-btn {
        min-height: 44px !important;
        padding: 8px 14px !important;
    }
    
    /* 订单列表筛选栏优化 */
    #orderListWrap select {
        font-size: 14px !important;
        min-height: 36px !important;
        padding: 6px 8px !important;
    }
    
    /* 弹窗适配小屏 */
    .quote-modal-content,
    .membership-modal-content {
        max-width: min(420px, 92vw) !important;
        margin: 0 10px !important;
        max-height: 85vh !important;
    }
    
    /* 通知弹窗内容区域 */
    #notifyModal .notify-modal-content {
        max-width: min(460px, 95vw) !important;
        padding: 16px !important;
    }
    
    /* 资料编辑弹窗 */
    .profile-content {
        max-width: min(400px, 92vw) !important;
        padding: 20px !important;
    }
    
    /* 订单卡片优化 */
    .order-card {
        padding: 10px 12px !important;
        margin-bottom: 10px !important;
    }
    .order-header {
        font-size: 13px !important;
    }
    .order-desc {
        font-size: 12px !important;
    }
    
    /* 头部标题缩小 */
    .header .title {
        font-size: 16px !important;
    }
    
    /* 金牌会员套餐卡片 */
    .membership-plans {
        flex-direction: column !important;
    }
    .membership-plan {
        flex: 1 1 auto !important;
        min-width: auto !important;
        padding: 12px !important;
    }
    
    /* 支付方式选择 */
    .membership-pay-methods {
        flex-direction: row !important;
    }
    .membership-pay-method {
        padding: 10px !important;
        font-size: 13px !important;
    }
}

/* 打印样式 */
@media print {
    .mobile-nav-overlay,
    .mobile-nav-drawer,
    .mobile-menu-btn {
        display: none !important;
    }
    .d-print-none { display: none !important; }
    .d-print-inline { display: inline !important; }
    .d-print-inline-block { display: inline-block !important; }
    .d-print-block { display: block !important; }
    .d-print-table { display: table !important; }
    .d-print-table-row { display: table-row !important; }
    .d-print-table-cell { display: table-cell !important; }
    .d-print-flex { display: flex !important; }
    .d-print-inline-flex { display: inline-flex !important; }
}