/* ================================================================
11-responsive.css · 完整竖屏适配
================================================================ */
/* ══════════════════════════════════════════════════════════
第零层：基础修复（所有屏幕生效）
══════════════════════════════════════════════════════════ */
* {
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
}
html, body, #appContent {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
}
.page-panel {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}
.page-panel:not(.active) {
    pointer-events: none !important;
    display: none !important;
}

/* ════════════════════════════ 顶栏：确保下拉菜单不被裁剪 ════════════════════════════ */
#mainHeader { overflow: visible !important; }
#mainHeader .nav { overflow: visible !important; }
#mainHeader .nav-left { overflow: visible !important; }
#mainHeader .nav-center { overflow: visible !important; }
#mainHeader .nav-right { overflow: visible !important; }
#mainHeader .nav-dropdown { overflow: visible !important; }

/* ════════════════════════════ 导航下拉菜单 ════════════════════════════ */
#mainHeader .nav-dropdown {
    position: relative !important;
    flex-shrink: 0 !important;
}
#mainHeader .nav-dropdown-trigger {
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    user-select: none !important;
}
#mainHeader .nav-dropdown-arrow {
    display: inline-block !important;
    transition: transform .25s ease !important;
    font-size: 10px !important;
}
#mainHeader .nav-dropdown-item {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-6px) !important;
    min-width: 140px !important;
    font-size: 13px !important;
    padding: 10px 18px !important;
    white-space: nowrap !important;
    text-align: center !important;
    background: rgba(20,20,25,.96) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
    z-index: 99999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease !important;
    color: rgba(255,255,255,.75) !important;
}
#mainHeader .nav-dropdown-item:first-of-type { margin-top: 6px !important; }
#mainHeader .nav-dropdown-item + .nav-dropdown-item { margin-top: 2px !important; top: calc(100% + 40px) !important; }
#mainHeader .nav-dropdown-item + .nav-dropdown-item + .nav-dropdown-item { top: calc(100% + 80px) !important; }
#mainHeader .nav-dropdown-item:hover {
    color: #fff !important;
    background: rgba(255,255,255,.1) !important;
}
[data-theme="light"] #mainHeader .nav-dropdown-item {
    background: rgba(255,255,255,.98) !important;
    border-color: rgba(0,0,0,.08) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.15) !important;
    color: rgba(0,0,0,.7) !important;
}
[data-theme="light"] #mainHeader .nav-dropdown-item:hover {
    color: #000 !important;
    background: rgba(0,0,0,.06) !important;
}
#mainHeader .nav-dropdown.open .nav-dropdown-item {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
}
#mainHeader .nav-dropdown.open .nav-dropdown-arrow {
    transform: rotate(90deg) !important;
}
#mainHeader.nav-dark-force .nav-dropdown-item {
    color: rgba(255,255,255,.75) !important;
    background: rgba(20,20,25,.96) !important;
    border-color: rgba(255,255,255,.1) !important;
}
[data-theme="light"] #mainHeader.nav-dark-force .nav-dropdown-item {
    background: rgba(255,255,255,.98) !important;
    border-color: rgba(0,0,0,.08) !important;
    color: rgba(0,0,0,.7) !important;
}
#mainHeader.nav-dark-force .nav-dropdown-item:hover {
    color: #fff !important;
    background: rgba(255,255,255,.1) !important;
}
[data-theme="light"] #mainHeader.nav-dark-force .nav-dropdown-item:hover {
    color: #000 !important;
    background: rgba(0,0,0,.06) !important;
}

/* ════════════════════════════ 遮罩层强制隐藏/恢复 ════════════════════════════ */
#userDropdownPanel, #myCardOverlay, #wtDrawerOverlay, #calFormOverlay, #cmPostModal, #addProjectModal, #deleteModal, #pendingModal, #operatorModal, #orderModal, #ssPreviewOverlay {
    display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important;
}
#userDropdownPanel[style*="display: block"], #userDropdownPanel[style*="display:block"], #userDropdownPanel.show { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; }
#myCardOverlay[style*="display: block"], #myCardOverlay[style*="display:block"], #myCardOverlay.show { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; }
#wtDrawerOverlay[style*="display: block"], #wtDrawerOverlay[style*="display:block"], #wtDrawerOverlay.show { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; }
#calFormOverlay[style*="display: block"], #calFormOverlay[style*="display:block"], #calFormOverlay.show { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; }
#cmPostModal[style*="display: block"], #cmPostModal[style*="display:block"], #cmPostModal[style*="display: flex"], #cmPostModal[style*="display:flex"], #cmPostModal.show { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; }
#addProjectModal[style*="display: block"], #addProjectModal[style*="display:block"], #addProjectModal[style*="display: flex"], #addProjectModal[style*="display:flex"], #addProjectModal.show { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; }
#deleteModal[style*="display: block"], #deleteModal[style*="display:block"], #deleteModal[style*="display: flex"], #deleteModal[style*="display:flex"], #deleteModal.show { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; }
#pendingModal[style*="display: block"], #pendingModal[style*="display:block"], #pendingModal[style*="display: flex"], #pendingModal[style*="display:flex"], #pendingModal.show { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; }
#operatorModal[style*="display: block"], #operatorModal[style*="display:block"], #operatorModal[style*="display: flex"], #operatorModal[style*="display:flex"], #operatorModal.show { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; }
#orderModal[style*="display: block"], #orderModal[style*="display:block"], #orderModal[style*="display: flex"], #orderModal[style*="display:flex"], #orderModal.show { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; }
#ssPreviewOverlay[style*="display: block"], #ssPreviewOverlay[style*="display:block"], #ssPreviewOverlay[style*="display: flex"], #ssPreviewOverlay[style*="display:flex"] { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; }

/* ══════════════════════════════════════════════════════════
第一层：竖屏 ≤768px
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .page-panel {
        transition: none !important;
        transform: none !important;
    }

    /* ════════════════════════════ 顶栏 ════════════════════════════ */
    #mainHeader, #mainHeader.nav-transparent, #mainHeader.nav-dark-force, #mainHeader.nav-scrolled {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 56px !important;
        z-index: 900 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        background: #111214 !important;
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    [data-theme="light"] #mainHeader, [data-theme="light"] #mainHeader.nav-transparent, [data-theme="light"] #mainHeader.nav-dark-force, [data-theme="light"] #mainHeader.nav-scrolled {
        background: #ffffff !important;
        border-bottom: 1px solid rgba(0,0,0,.1) !important;
    }
    #mainHeader .brand-icon img, #mainHeader .ctrl-icon, #mainHeader .music-btn-icon, #mainHeader .user-btn-icon, #mainHeader .user-display-icon, #mainHeader.nav-dark-force .brand-icon img, #mainHeader.nav-dark-force .ctrl-icon, #mainHeader.nav-dark-force .music-btn-icon, #mainHeader.nav-dark-force .user-btn-icon, #mainHeader.nav-dark-force .user-display-icon {
        filter: none !important;
    }
    #mainHeader .nav-link, #mainHeader .nav-dropdown-trigger, #mainHeader .nav-dropdown-arrow, #mainHeader.nav-dark-force .nav-link, #mainHeader.nav-dark-force .nav-dropdown-trigger, #mainHeader.nav-dark-force .nav-dropdown-arrow {
        color: rgba(255, 255, 255, 0.75) !important;
    }
    #mainHeader .nav-link.active, #mainHeader .nav-dropdown-trigger.active, #mainHeader.nav-dark-force .nav-link.active, #mainHeader.nav-dark-force .nav-dropdown-trigger.active {
        color: #ffffff !important;
    }
    [data-theme="light"] #mainHeader .nav-link, [data-theme="light"] #mainHeader .nav-dropdown-trigger, [data-theme="light"] #mainHeader .nav-dropdown-arrow, [data-theme="light"] #mainHeader.nav-dark-force .nav-link, [data-theme="light"] #mainHeader.nav-dark-force .nav-dropdown-trigger, [data-theme="light"] #mainHeader.nav-dark-force .nav-dropdown-arrow {
        color: rgba(0, 0, 0, 0.7) !important;
    }
    [data-theme="light"] #mainHeader .nav-link.active, [data-theme="light"] #mainHeader .nav-dropdown-trigger.active, [data-theme="light"] #mainHeader.nav-dark-force .nav-link.active, [data-theme="light"] #mainHeader.nav-dark-force .nav-dropdown-trigger.active {
        color: var(--c-primary) !important;
    }
    #mainHeader .nav {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        height: 56px !important;
        padding: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    #mainHeader .nav-left {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
        padding: 0 8px !important;
        position: relative !important;
        z-index: 10 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    #mainHeader .nav-left .brand-text { display: none !important; }
    #mainHeader .nav-left .brand-icon {
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    #mainHeader .nav-left .brand-icon img {
        height: 24px !important;
        width: auto !important;
        display: block !important;
        pointer-events: none !important;
    }
    #mainHeader .nav-center {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        padding: 0 4px !important;
        height: 100% !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 30 !important;
    }
    #mainHeader .nav-dropdown {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        position: relative !important;
        height: 100% !important;
        flex-shrink: 0 !important;
    }
    #mainHeader .nav-dropdown-trigger {
        display: inline-flex !important;
        align-items: center !important;
        gap: 3px !important;
        cursor: pointer !important;
        height: 100% !important;
    }
    #mainHeader .nav-center .nav-link, #mainHeader .nav-dropdown-trigger {
        font-size: 13px !important;
        padding: 0 6px !important;
        white-space: nowrap !important;
        line-height: 1.3 !important;
        text-align: center !important;
        flex-shrink: 0 !important;
    }
    #mainHeader .nav-right {
        flex: 0 0 auto !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 2px !important;
        height: 100% !important;
        padding: 0 6px !important;
        position: relative !important;
        z-index: 10 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    #mainHeader .nav-right .volume-wrap { display: none !important; }
    #mainHeader .nav-right .ctrl-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    #userBtn[style*="margin-left"] { margin-left: 0 !important; }
    #mainHeader .ctrl-icon, #mainHeader .music-btn-icon, #mainHeader .user-btn-icon {
        height: 18px !important;
        width: auto !important;
        max-width: none !important;
        pointer-events: none !important;
    }
    #mainHeader .user-display {
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        display: flex !important;
        align-items: center !important;
        padding: 2px !important;
    }
    #mainHeader .user-display-icon {
        height: 18px !important;
        width: 18px !important;
        pointer-events: none !important;
    }
    #mainHeader .user-display-name { display: none !important; }

    main { padding-top: 56px !important; }
    .page-panel > section:first-child, .page-panel > .section-wrap:first-child, #panel-operator > section, #panel-orders > section, #panel-delta > section {
        padding-top: 20px !important;
    }

    /* ════════════════════════════ 全局布局 ════════════════════════════ */
    .section-wrap {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* 工作室情报：Logo 悬浮于右上角，放大至 96px */
    .intel-body { display: block !important; padding: 20px !important; }
    .intel-main { display: block !important; width: auto !important; padding: 0 !important; }
    .intel-aside {
        float: right !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 0 8px 12px !important;
        padding: 0 !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
    }
    .intel-aside > *:not(.intel-logo-frame) { display: none !important; }
    .intel-logo-frame {
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    .intel-logo-img {
        max-width: 96px !important;
        max-height: 96px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }
    .intel-name { font-size: 16px !important; }
    .intel-en { font-size: 11px !important; }
    .intel-meta { grid-template-columns: 1fr !important; }
    .intel-meta-item { padding: 8px 0 !important; }
    .intel-block-title { font-size: 13px !important; }
    .intel-text { font-size: 12px !important; line-height: 1.7 !important; }

    .faq-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
    .rules-card { margin-top: 20px !important; }
    .cm-grid { grid-template-columns: 1fr !important; }
    .cm-stats { grid-template-columns: repeat(3, 1fr) !important; }
    .cm-why-desc { font-size: 12px !important; }
    .cm-log-item { flex-direction: column !important; gap: 2px !important; }
    .cm-log-date { font-size: 10px !important; }

    .projects-grid { grid-template-columns: 1fr !important; }
    .project-card { height: 140px !important; }
    .project-card-logo {
        height: 36px !important;
        width: auto !important;
        max-width: 80% !important;
        object-fit: contain !important;
    }
    .supplement-header { flex-direction: column !important; gap: 6px !important; align-items: flex-start !important; }
    .section-title-icon { height: 16px !important; width: auto !important; max-width: none !important; }
    .section-title-icon img { height: 16px !important; width: auto !important; }

    /* ════════════════════════════ WT 战争雷霆 ════════════════════════════ */
    #wtMainView {
        position: relative !important;
        min-height: calc(100vh - 56px) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
    }
    #wtCanvas {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 0 !important;
        object-fit: cover !important;
        pointer-events: none !important;
    }
    .wt-left-area {
        position: relative !important;
        z-index: 2 !important;
        width: 88% !important;
        max-width: 400px !important;
        margin: 0 auto !important;
        padding: 24px 16px 80px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        background: none !important;
        background-color: transparent !important;
        border: none !important;
        border-right: none !important;
        box-shadow: none !important;
        min-height: 0 !important;
        height: auto !important;
    }
    .wt-left-area .wt-logo {
        max-width: 120px !important;
        width: auto !important;
        height: auto !important;
        margin: 0 auto 24px !important;
    }
    .wt-left-area .wt-btn-group {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
        margin-bottom: 20px !important;
    }
    .wt-left-area .wt-btn-group .wt-btn {
        width: 100% !important;
        text-align: center !important;
        font-size: 13px !important;
        padding: 10px 16px !important;
    }
    .wt-left-area .wt-qr-wrap {
        margin-top: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    .wt-left-area .wt-qr-link {
        width: auto !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }
    .wt-left-area .wt-qr-img {
        max-width: 160px !important;
        width: 160px !important; 
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
        border: none !important;
        border-radius: 8px !important; 
        box-shadow: 0 0 0 1px rgba(77, 166, 255, 0.3), 0 6px 24px rgba(0,0,0,.45) !important;
        object-fit: contain !important;
    }
    .wt-left-area .wt-qr-label {
        font-size: 11px !important;
        margin-top: 6px !important;
    }
    .wt-canvas-overlay { display: none !important; }
    .wt-scroll-hint {
        position: absolute !important;
        bottom: 16px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 10 !important;
    }
    .wt-scroll-hint-text { font-size: 11px !important; }
    .wt-scroll-hint-arrow { font-size: 14px !important; }
    #wtDrawerOverlay { z-index: 1000 !important; }
    #wtDrawer {
        width: 100% !important;
        max-width: 100% !important;
        z-index: 1001 !important;
    }
    .wt-yf-two-col { grid-template-columns: 1fr !important; gap: 16px !important; }
    .wt-yf-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    #wtDrawer .dtl-table { font-size: 11px !important; }
    #wtDrawer .dtl-table th, #wtDrawer .dtl-table td { padding: 6px 8px !important; }

    /* ════════════════════════════ WT 日历 ════════════════════════════ */
    .wt-cal-bg-img { height: 120px !important; object-fit: cover !important; }
    .wt-cal-toolbar { flex-direction: column !important; gap: 8px !important; align-items: flex-start !important; }
    .wt-cal-toolbar-right { align-self: flex-end !important; }
    .wt-cal-day-col { min-width: 0 !important; flex: 1 !important; }
    .wt-cal-day-num { font-size: 10px !important; }
    .wt-cal-day-wk { font-size: 8px !important; }
    .wt-cal-bar-name { font-size: 9px !important; max-width: 80px !important; }
    .wt-cal-bar-dates { display: none !important; }
    .wt-cal-cat-row { font-size: 10px !important; }
    .wt-cal-legend-item { font-size: 9px !important; }
    .wt-cal-form { width: 94vw !important; left: 3vw !important; right: 3vw !important; }
    .wt-cal-form-row { flex-direction: column !important; gap: 0 !important; }
    .wt-cal-tip { max-width: 260px !important; }

    /* ════════════════════════════ 人员管理 ════════════════════════════ */
    .op-cards-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    .op-card { padding: 16px !important; }
    .op-card-header { flex-wrap: wrap !important; gap: 8px !important; }
    .op-card-avatar { width: 40px !important; height: 40px !important; font-size: 14px !important; overflow: hidden !important; }
    .op-card-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
    .op-card-name { font-size: 14px !important; }
    .op-card-uid { font-size: 10px !important; }
    .op-card-status { font-size: 10px !important; padding: 2px 8px !important; }
    .op-card-tags { flex-wrap: wrap !important; }
    .op-card-tag { font-size: 10px !important; padding: 2px 6px !important; }
    .op-card-actions { flex-direction: column !important; gap: 6px !important; }
    .op-card-actions button { width: 100% !important; font-size: 12px !important; padding: 6px !important; }
    #operatorModal .modal-box { max-width: 100vw !important; width: 94vw !important; max-height: 90vh !important; }
    .dtl-table { font-size: 11px !important; }
    .dtl-table th, .dtl-table td { padding: 6px 8px !important; }

    /* ════════════════════════════ 订单记录 ════════════════════════════ */
    .orders-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .orders-stat-card { padding: 12px !important; }
    .orders-stat-num { font-size: 18px !important; }
    .orders-stat-label { font-size: 10px !important; }
    .orders-filter-tabs { overflow-x: auto !important; scrollbar-width: none !important; gap: 4px !important; padding-bottom: 4px !important; }
    .orders-filter-tabs::-webkit-scrollbar { display: none !important; }
    .orders-filter-tab { font-size: 10px !important; padding: 4px 10px !important; white-space: nowrap !important; flex-shrink: 0 !important; }
    .orders-add-btn { font-size: 11px !important; padding: 6px 12px !important; flex-shrink: 0 !important; }
    .order-card { padding: 14px !important; }
    .order-card-header { flex-wrap: wrap !important; gap: 6px !important; }
    .order-card-id { font-size: 12px !important; }
    .order-card-status { font-size: 10px !important; padding: 2px 8px !important; }
    .order-card-info { grid-template-columns: 1fr !important; gap: 4px !important; font-size: 12px !important; }
    .order-card-actions { flex-direction: column !important; gap: 6px !important; }
    .order-card-actions button { width: 100% !important; font-size: 11px !important; padding: 6px !important; }
    #orderModal .modal-box { max-width: 100vw !important; width: 94vw !important; max-height: 90vh !important; }
    .orders-title-icon img { height: 14px !important; width: auto !important; }

    /* ════════════════════════════ 弹窗通用 ════════════════════════════ */
    .modal-overlay .modal-box {
        max-width: 100vw !important;
        width: 94vw !important;
        margin: 16px auto !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    .user-modal-content {
        width: 94vw !important;
        max-width: 380px !important;
        padding: 28px 20px !important;
    }
    .auth-field-input { font-size: 14px !important; padding: 10px 12px !important; }
    .auth-btn { font-size: 13px !important; padding: 10px !important; }
    .cm-post-modal { width: 94vw !important; padding: 20px 16px !important; }
    .cm-post-modal-textarea { height: 120px !important; font-size: 14px !important; }

    /* ════════════════════════════ 我的名片 ════════════════════════════ */
    #myCardDrawer {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        right: -100vw !important;
        z-index: 401 !important;
        transition: right .38s cubic-bezier(.4,0,.2,1) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    #myCardDrawer.open { right: 0 !important; }
    #myCardFab.open { right: 100vw !important; }
    #myCardOverlay {
        position: fixed !important;
        inset: 0 !important;
        z-index: 400 !important;
        display: none !important;
        pointer-events: none !important;
    }
    #myCardOverlay.show { display: block !important; pointer-events: auto !important; }

    /* ════════════════════════════ FAB 按钮 ════════════════════════════ */
    .fab-container { bottom: 16px !important; right: 12px !important; gap: 8px !important; }
    .fab-btn { width: 36px !important; height: 36px !important; }
    .fab-btn svg { width: auto !important; height: 16px !important; max-width: none !important; }

    /* ════════════════════════════ 空状态页面 ════════════════════════════ */
    .empty-state-icon { max-width: 120px !important; max-height: 80px !important; width: auto !important; height: auto !important; object-fit: contain !important; }

    /* ════════════════════════════ Footer ════════════════════════════ */
    footer .footer-inner { flex-direction: column !important; gap: 4px !important; text-align: center !important; font-size: 11px !important; }

    /* ════════════════════════════ 截图预览 ════════════════════════════ */
    .ss-preview-controls { bottom: 60px !important; }
    .ss-ctrl-btn { width: 36px !important; height: 36px !important; font-size: 16px !important; }
    .ss-hint { font-size: 10px !important; bottom: 44px !important; }
    .ss-ctrl-zoom { top: 12px !important; right: 12px !important; font-size: 11px !important; }
    .ss-close-btn { top: 8px !important; left: 8px !important; width: 32px !important; height: 32px !important; font-size: 16px !important; }

    /* ════════════════════════════ Loading ════════════════════════════ */
    .loading-logo { max-width: 80px !important; width: auto !important; height: auto !important; }
    .loading-percent { font-size: 28px !important; }
    .loading-text { font-size: 11px !important; }
}

/* ══════════════════════════════════════════════════════════
第二层：极窄屏幕 ≤420px
══════════════════════════════════════════════════════════ */
@media (max-width: 420px) {
    .hero-title-lg { font-size: 20px !important; letter-spacing: 2px !important; }
    .hero-desc { font-size: 12px !important; }
    .wt-left-area .wt-logo { max-width: 80px !important; }
    .wt-left-area .wt-btn-group .wt-btn { font-size: 12px !important; padding: 8px 12px !important; }
    .wt-left-area .wt-qr-img { max-width: 120px !important; width: 120px !important; }
    .orders-stats-grid { grid-template-columns: 1fr 1fr !important; }
    .orders-stat-num { font-size: 16px !important; }
    .cm-stat-num { font-size: 18px !important; }
    #mainHeader .nav-center .nav-link, #mainHeader .nav-dropdown-trigger { padding: 0 4px !important; font-size: 12px !important; }
    /* 极窄屏幕 Logo 放大至 72px */
    .intel-logo-img { max-width: 72px !important; max-height: 72px !important; }
}

/* ══════════════════════════════════════════════════════════
第三层：横屏手机
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) and (orientation: landscape) {
    .wt-left-area {
        padding: 16px 40px !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 16px !important;
    }
    .wt-left-area .wt-logo { max-width: 56px !important; margin: 0 !important; }
    .wt-left-area .wt-btn-group { flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; }
    .wt-left-area .wt-btn-group .wt-btn { width: auto !important; flex: 0 0 auto !important; }
    .wt-left-area .wt-qr-img { max-width: 80px !important; width: 80px !important; }
    .wt-left-area .wt-qr-wrap { margin-top: 0 !important; }
}