/* Media Queries - Unified Responsive Styles */
/* All @media rules from other CSS files have been consolidated here */
/* Original rules have been commented out in their source files */

/* ==================== 0nav.css Media Queries ==================== */

/* @media screen and (max-width: 1024px) */
@media screen and (max-width: 1024px) {
    .y1985lf .lf2title {
        font-size: 12px;
    }
    .about-items {
        width: 90%;
    }
    .about-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .service-item {
        flex: 0 0 calc(50% - 15px);
    }
    .m90apr {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* @media screen and (min-width: 769px) */
@media screen and (min-width: 769px) {
    /* [MenuFix-3] 桌面端强制隐藏移动端按钮：close-menu 原在 0nav.css 被 display:flex 覆盖，此处加强 !important 兜底 */
    .hamburger-menu, 
    .mobile-menu-overlay,
    .close-menu {
        display: none !important;
    }
} 

/* ==================== @media screen and (max-width: 768px) - COMBINED ==================== */
@media screen and (max-width: 768px) {
    /* [Mobile-P0 / R1] 修复 Article/Project 页正文挤压成单列：
       desktop 版 wrapper 使用 flex-direction:row + sidebar 250px，
       mobile 应改为 column，且隐藏 sidebar、让主内容占满全宽（否则 mainContent 仅 30px 宽）
       影响：article/*.html + projects-*.html + 所有使用 learn-content-wrapper 模板的页面
    */
    .learn-content-wrapper {
        flex-direction: column !important;
        -ms-flex-direction: column !important;
        width: 100% !important;
        padding: 10px !important;
    }
    .learn-main-content {
        width: 100% !important;
        flex: 1 1 100% !important;
        -ms-flex: 1 1 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    #sidebar-container {
        display: none !important;
        width: 100% !important;
    }

    /* [Mobile-P1-3 / R2] 修复 nav1 .d3 分类链接字体仅 10px（违反 WCAG 2.5.5 Target Size ≥ 44×44）
       原 desktop 版：字体 10px，每个链接宽 16.7px × 高 46px（单个字链接），无法正常点击
       mobile 版改为：字号 ≥ 14px + 强制 44×44 点击目标，移动端菜单中可正常点
       影响：所有页面（5488 HTML，所有 nav1 都有 .d3）
    */
    .nav1 a.d3,
    .y1985 a.d3,
    .nav-center a.d3,
    a.d3 {
        font-size: 14px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 10px 12px !important;
        line-height: 24px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* 0nav.css - 隐藏登录DIV，避免阻挡汉堡菜单 */
    .loginDIV {
        display: none !important;
        pointer-events: none !important;
    }
    
    /* 0nav.css */
    .y1985 {
        position: relative;
        height: 85px;  
    }
    .y1985lf {
        width: 100%;
        margin-left: 0;
    } 
    .y1985lf > .lf2 {
        display: none !important;
    }
    .hamburger-menu,
    .y1985 .hamburger-menu {
        display: block !important;
        position: fixed !important;
        top: 25px !important;
        right: 25px !important;
        width: 40px !important;
        height: 40px !important;
        background: rgb(65, 65, 65) !important;
        border: none !important;
        border-radius: 5px !important;
        cursor: pointer !important;
        z-index: 1002 !important;
    }
    .hamburger-menu span,
    .y1985 .hamburger-menu span {
        display: block !important;
        width: 30px !important;
        height: 3px !important;
        margin: 6px auto !important;
        background-color: white !important;
    }
    .direction-toggle-btn {
        font-size: 10px;
        padding: 6px 8px;
    }
    /* P0-1: 隐藏桌面端菜单 - 加强版 */
    .nav-center,
    .nav-right,
    .y1985lf .nav-center,
    .y1985lf .nav-right {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* P0-2: 修复关闭按钮位置 - 加强版 */
    .mobile-menu .close-menu,
    .close-menu {
        display: flex !important;
        position: fixed !important;
        top: 15px !important;
        right: 15px !important;
        left: auto !important;
        width: 36px !important;
        height: 36px !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        z-index: 10000 !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 24px !important;
        font-weight: bold !important;
        background-color: rgba(65, 65, 65, 0.95) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
        transition: background-color 0.3s ease !important;
    }
    .mobile-menu .close-menu:hover,
    .mobile-menu .close-menu:active,
    .close-menu:hover,
    .close-menu:active {
        background-color: rgba(45, 45, 45, 0.95) !important;
    }

    /* P1-1: 扩大菜单内容区域 - 加强版 */
    .mobile-menu .mobile-menu-content,
    .mobile-menu-content {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: 85% !important;
        max-width: 320px !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        height: 100vh !important;
        padding: 70px 20px 20px !important;
        border-radius: 0 !important;
        z-index: 1003 !important;
        background-color: #2b2b2b !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        transform: translateX(100%) !important;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    .mobile-menu.active .mobile-menu-content {
        transform: translateX(0) !important;
    }

    /* P1-2: 添加过渡动画 - 加强版 */
    .y1985 .mobile-menu,
    .mobile-menu {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-color: rgba(0, 0, 0, 0.6) !important;
        z-index: 9999 !important;
        opacity: 0 !important;
        transition: opacity 0.35s ease !important;
    }
    .y1985 .mobile-menu.active,
    .mobile-menu.active {
        display: block !important;
        opacity: 1 !important;
    }

    /* P2-1: 页面滚动控制 */
    body.menu-open,
    html.menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* 移动端菜单列表和菜单项 */
    .mobile-menu .mobile-menu-list,
    .mobile-menu-list {
        list-style-type: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }
    .mobile-menu .mobile-menu-item,
    .mobile-menu-item {
        margin-bottom: 8px !important;
        line-height: normal !important;
        list-style: none !important;
    }

    /* 优化菜单项样式 - 加强版 */
    .mobile-menu .mobile-menu-title,
    .mobile-menu-title {
        font-weight: 600 !important;
        cursor: pointer !important;
        height: 44px !important;
        line-height: 44px !important;
        padding: 0 15px !important;
        color: #ffffff !important;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif !important;
        font-size: 16px !important;
        border-radius: 6px !important;
        transition: background-color 0.2s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    .mobile-menu .mobile-menu-title:hover,
    .mobile-menu .mobile-menu-title:active,
    .mobile-menu-title:hover,
    .mobile-menu-title:active {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }
    .mobile-menu .mobile-menu-title::after,
    .mobile-menu-title::after {
        content: '›' !important;
        font-size: 24px !important;
        color: #DAA520 !important;
        transition: transform 0.3s ease !important;
    }
    .mobile-menu .mobile-menu-title.open::after,
    .mobile-menu-title.open::after {
        transform: rotate(90deg) !important;
    }

    .mobile-menu .mobile-submenu,
    .mobile-submenu {
        display: none !important;
        background: none !important;
        list-style-type: none !important;
        padding: 0 !important;
        margin: 5px 0 15px !important;
        width: 100% !important;
    }
    .mobile-menu .mobile-submenu.active,
    .mobile-submenu.active {
        display: block !important;
    }
    .mobile-menu .mobile-submenu a,
    .mobile-submenu a {
        display: block !important;
        padding: 12px 15px 12px 30px !important;
        font-size: 15px !important;
        height: auto !important;
        line-height: 1.5 !important;
        text-decoration: none !important;
        color: #b0b0b0 !important;
        border-radius: 6px !important;
        transition: background-color 0.2s ease, color 0.2s ease !important;
    }
    .mobile-menu .mobile-submenu a:hover,
    .mobile-menu .mobile-submenu a:active,
    .mobile-submenu a:hover,
    .mobile-submenu a:active {
        background-color: rgba(255, 255, 255, 0.08) !important;
        color: #ffffff !important;
    }
    .mobile-menu .mobile-submenu li,
    .mobile-submenu li {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* index.css - category */
    .dots {
        display: none;
    }
    .category-item {
        flex-direction: column;
        height: auto;
    }
    .category-content,
    .category-image-cage {
        width: 100%;
        flex: none;
    }
    .category-prev, .category-next {
        display: none;
    }

    /* index.css - about */
    .about-us-section {
        padding: 60px 0;
    }
    .about-grid {
        grid-template-columns: 1fr;
    }
    .about-description {
        padding: 0 5%;
    }
    .about-item {
        padding: 25px;
    }
    .about-item h3 {
        font-size: 20px;
    }
    .about-description p {
        font-size: 16px;
    }

    /* index.css - case studies */
    .case-studies {
        padding: 60px 5%;
    }

    /* index.css - contact */
    .category-grid,
    .services-grid {
        grid-template-columns: 1fr;
    }
    .contact-buttons {
        flex-direction: column;
        align-items: center;
    }
    .contact-buttons a {
        width: 200px;
    }

    /* index.css - advantages/project */
    .project-grid {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    /* index.css - services slider */
    .service-item {
        flex: 0 0 calc(50% - 15px);
        min-width: calc(50% - 15px);
    }
    .services-slider {
        padding: 0 20px;
    }

    /* index.css - faq */
    .faq-grid {
        width: 90%;
    }
    .faq-question {
        padding: 15px 20px;
    }
    .faq-question h3 {
        font-size: 16px;
    }

    /* index.css - learn thumbnail */
    .learn-thumbnail {
        flex-direction: column;
    }
    .learn-thumbnail img {
        width: 100%;
        height: 120px;
        border-radius: 12px 12px 0 0;
    }
    .learn-thumbnail .learn-content {
        width: 100%;
        padding: 15px;
        border-radius: 0 0 12px 12px;
    }
    .learn-title {
        font-size: 18px;
        margin-bottom: 8px;
    }
    .learn-description {
        -webkit-line-clamp: 3;
    }

    /* index.css - learn section */
    .learn-section .m90apr {
        width: 95%;
        padding: 10px;
    }
    .learn-section .aprA {
        height: auto;
        min-height: 150px;
    }

    /* index.css - section titles */
    .product-categories h2,
    .about-us-section h2,
    .case-studies h2,
    .services-section h2,
    .why-section h2,
    .learn-section h2,
    .faq-section h2 {
        font-size: 28px;
        margin-bottom: 30px;
        padding-left: 5%;
    }

    /* index.css - headings */
    h1 {
        font-size: 32px;
        margin-bottom: 20px;
        padding-left: 5%;
        text-align: center;
    }
    h2 {
        font-size: 28px;
        margin-bottom: 30px;
        padding-left: 5%;
    }

    /* index.css - video */
    .video-container video {
        min-height: 300px;
    }

    /* index.css - video section */
    .video-section {
        padding: 60px 0;
    }
    .video-content {
        width: 95%;
    }
    .video-text h2 {
        font-size: 28px;
    }
    .video-text p {
        font-size: 16px;
    }

    /* 0app_index.css */
    .app-section-wrapper {
        width: 80%;
        top: 5vh;
        left: 10%;
        max-height: 85vh;
    }
    .app-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .app-image-cage {
        height: 60px;
    }
    .app-content p {
        display: block;
    }
    /* === Original position commented out — moved to right side below orm-toggle-icon (2026-08-19) ===
    .app-toggle-icon {
        top: 5vh;
        left: 10%;
    }
    */
    .app-toggle-icon {
        top: calc(5vh + 60px);
        right: 10%;
    }
    /* 0orm_index.css (login_orm iframe) */
    .orm-section-wrapper {
        width: 80%;
        top: 5vh;
        left: 10%;
        height: 80vh;
    }
    .orm-toggle-icon {
        top: 5vh;
        right: 10%;
    }
    .play-with-3d {
        top: calc(5vh + 120px);
        right: 10%;
    }
    .live-demo {
        top: calc(5vh + 180px);
        right: 10%;
    }
    .play-button {
        width: 40px;
        height: 40px;
    }
    .play-button svg {
        width: 18px;
        height: 18px;
    }

    /* 0learn-sidebar.css */
    .learn-sidebar {
        width: 100%;
    }
    .learn-sidebar-section li {
        width: calc(50% - 10px);
        margin: 5px 0;
    }

    /* 1about-us-our-story.css */
    .address-section {
        width: 90%;
        margin: 0 5%;
    }
    .founder-section {
        flex-direction: column;
        text-align: center;
    }
    .founder-photo img {
        width: 150px;
        height: 150px;
        max-width: 100%;
    }
    .founder-content .bd {
        text-align: left;
    }

    /* 0foot.css */
    .hide-on-mobile {
        display: none !important;
    }
    .preend {
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        background-color: #363636;
    }
    .lineone {
        display: flex;
        flex-direction: column;
        width: 100% !important;
        height: auto !important;
    }
    .preend .lineone .preeA:first-child {
        display: none !important;
    }
    .mobile-footer-section {
        width: 100% !important;
        margin: 0 !important;
        border-top: 1px solid #555;
    }
    .preeA {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .preend .preeA .Atitle {
        width: 100% !important;
        height: auto !important;
        min-height: 44px !important;
        line-height: 1.3 !important;
        font-size: 16px !important;
        margin: 0 !important;
        padding: 12px 40px 12px 15px !important;
        cursor: pointer;
        position: relative;
        background-color: #2b2b2b;
        box-sizing: border-box;
        display: block;
        color: #cccccc;
        font-weight: bold;
    }
    .preend .preeA .Atitle::after {
        content: '+';
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
    }
    .preend .preeA .Atitle.active::after {
        content: '-';
    }
    .preend .preeA .content-wrapper {
        display: none;
        padding: 0;
        background-color: #323232;
        width: 100% !important;
    }
    .preend .preeA .content-wrapper.active {
        display: block;
    }
    .preend .preeA .Acontent,
    .preend .preeA .Acontent2 {
        font-size: 13px !important;
        height: auto !important;
        padding: 8px 15px !important;
        border-top: 1px solid #444;
        width: 100% !important;
        box-sizing: border-box;
        display: block;
        color: #a0a0a0;
    }
    .preend .preeA .Acontent2 {
        font-size: 11px;
        color: #909090;
    }
    .preend:hover .preeA .Atitle {
        font-size: 16px !important;
    }
    .preend:hover .preeA .Acontent,
    .preend:hover .preeA .Acontent2 {
        color: #a0a0a0 !important;
        font-weight: normal !important;
    }
    .preend .preeA .Atitle:active {
        background-color: #404040;
    }
    .preend .preeA .Acontent:active,
    .preend .preeA .Acontent2:active {
        background-color: #383838;
    }
    .linetwo {
        display: none;
    }

    /* 1about-us-where-to-buy.css */
    .y1990s .m90feb {
        width: 85%;
        margin: 0 7.5% 30px 7.5%;
        padding: 20px 25px;
    }
    .y1990s .m90feb h2 {
        font-size: 24px;
    }
    .y1990s .m90feb h3 {
        font-size: 20px;
    }

    /* 1about-us-privacy-policy.css */
    .policy {
        width: 90%;
        margin: 0 5%;
    }
    .policy h1 {
        font-size: 28px;
    }
    .policy h2 {
        font-size: 20px;
    }

    /* 0faqart.css */
    .FAQT {
        width: 90%;
    }
    .pr {
        font-size: 20px;
    }
    .category h2 {
        font-size: 18px;
    }
    .faq-btn {
        font-size: 15px;
    }
    .faq-ul {
        font-size: 14px;
    }

    /* 1about-us-terms-and-conditions.css */
    .terms {
        width: 90%;
        margin: 0 5%;
    }
    .terms h1 {
        font-size: 28px;
    }
    .terms h2 {
        font-size: 20px;
    }

    /* 1case-studies.css */
    .m90apr .aprA {
        height: 450px;
    }
    .case-date {
        bottom: 15px;
        right: 15px;
        font-size: 12px;
    }

    /* 1sales-products.css */
    .m90apr {
        width: 90%;
        grid-template-columns: repeat(1, 1fr);
    }
    h2:last-of-type + .m90apr {
        grid-template-columns: repeat(2, 1fr) !important;
        width: 95% !important;
    }
    .vertical-nav {
        display: none !important;
    }

    /* 4systems-0common.css / 5components-common.css - 产品简介区改为上下排列：
       desktop 版 .intro-left / .intro-right 左右并排(float)，手机宽度下显示不全，
       且有部分页面（如 systems-all-in-one.html）外层没有 .y1990s 包裹，
       故用 :has() 只命中「产品型」intro（含 .intro-left + .intro-right），
       不影响 learn-*/ projects-*/ solutions-* 等只有纯 .introduction 的页面
       影响：systems-*.html / fixtures-*.html / retrofit-*.html（所有带 intro-left/right 的产品页）
       注意：Chromium 在解析本文件时会丢弃「紧跟在注释块后的第一条独立规则」（位置性
       缺陷，实测与选择器内容无关），因此这里放置一条无任何作用的占位牺牲规则去承受该
       丢弃；真正的布局规则全部放在其后，正常解析生效。
    */
    .intro-mobile-stack-sink {
        /* 占位牺牲规则：不承载任何关键样式 */
    }
    .introduction:has(> .intro-right) {
        width: 92%;
        margin: 0 4%;
        height: auto;
        display: flex;
        flex-direction: column;
    }
    .introduction:has(> .intro-left) .intro-left,
    .introduction:has(> .intro-left) .intro-right {
        width: 100%;
        float: none;
    }
    .introduction:has(> .intro-left) .intro-right {
        order: -1;
        margin-bottom: 20px;
    }
    .introduction:has(> .intro-left) .intro-right img {
        width: 90%;
        margin: 0 auto;
        display: block;
    }

    /* 4systems-0common.css / 5components-common.css - 产品规格区改为上下排列：
       desktop 版 .specs-left / .specs-right 左右并排(float)，手机宽度下表格显示不全，
       mobile 改为整列宽度、取消浮动，自上而下依次显示
       影响：systems-*.html / fixtures-*.html / retrofit-*.html（所有带 spec 的产品页）
    */
    .specs {
        width: 92%;
        margin: 0 4%;
    }
    .specs .specs-left,
    .specs .specs-right {
        width: 100%;
        float: none;
    }
    .specs .specs-table {
        width: 100%;
        margin-top: 15px;
    }
    .specs td {
        padding: 12px;
    }
    p {
        font-size: 16px;
        text-align: left;
    }

    /* app-html.css */
    .app-live-demo-frame {
        height: 480px;
    }
    .app-section-wrap {
        width: 90%;
        margin: 0 5%;
    }
    .bg .text {
        width: 90%;
        top: 30%;
    }
    .bg .text h1 {
        font-size: 32px;
    }
    .bg .text h2 {
        font-size: 18px;
    }
    .download-buttons {
        flex-direction: column;
        align-items: center;
    }
    .download-btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    .app-features-grid {
        grid-template-columns: 1fr;
    }
    .app-screenshots-grid {
        grid-template-columns: 1fr;
    }
    .app-specs-table td {
        padding: 12px 10px;
        font-size: 14px;
    }
    .y1990s .menu {
        width: 90%;
        margin: 0 5%;
        font-size: 16px;
    }

    /* donation.css */
    .container {
        width: 90%;
        margin: 0 5%;
    }
    .menu {
        width: 90%;
        margin: 0 5%;
    }
    .container section {
        padding: 20px;
    }

    /* [Mobile-P1-1 / R3] 产品页 Submit 按钮被 fixed #foot（preend占位壳 zIndex=1000 height≈140px）遮挡 14px
       修复思路：给底部所有区域（QuoteT 询盘表单、bt 底部文案、footer-wrapper 整体）
       统一加 padding-bottom 150px + iPhone 安全区，把表单/按钮整体向上托，
       确保 submit 按钮完全出现在 fixed #foot 上方，不再被 zIndex=1000 的占位壳覆盖
       影响：systems-*.html / 产品页 / 所有带 Quote 表单的页面
    */
    .QuoteT,
    .bt,
    .bt-wrapper,
    .footer-wrapper,
    #contactForm,
    form button[type="submit"],
    form input[type="submit"] {
        /* [Mobile-P1-1/P1-2 R4 调整] 原 R3 160px → 250px：
           首页只有 .QuoteT（无 .bt/.bt-wrapper/.footer-wrapper），
           Submit 底到文档底的真实间隙在 padding=160px 时仅 106.5px（被 #foot 吃 31px），
           220px 时仅 136.5px（仍差 0.5px，2% 重叠边缘），
           再+30 到 250px 保证任何页面 dist ≥ 166px > #foot.h=137px，Submit 远离 csWidget
        */
        --mobile-foot-safe-gap: 250px;
    }
    .QuoteT {
        /* [Mobile-P1-2 / R7] 修复移动端询盘表单被裁切：indexcommon 基础规则
           height:800px + overflow:hidden 在移动端把内容(约 937px)底部裁掉，
           submit 按钮悬在可视 350-400px 窗口之外 → “get a quote 被阻挡”。
           移动端改为高度自适应 + 不限裁切 + 加宽居中，仅保留脚部安全间距。
        */
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        display: block !important;
        width: 94% !important;
        margin: 20px auto 0 !important;
        padding-bottom: calc(var(--mobile-foot-safe-gap) + env(safe-area-inset-bottom)) !important;
        box-sizing: border-box !important;
    }
    .bt {
        padding-bottom: calc(40px + env(safe-area-inset-bottom)) !important;
        box-sizing: border-box !important;
    }
    .bt-wrapper,
    .footer-wrapper {
        padding-bottom: calc(var(--mobile-foot-safe-gap) + env(safe-area-inset-bottom)) !important;
        box-sizing: border-box !important;
    }

    /* indexcommon.css - bg image */
    .bg img {
        height: 100vh;
    }
    .bg {
        height: auto;
        min-height: 100vh;
    }

    /* indexcommon.css - overflow/touch */
    html, 
    body {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch; 
        height: auto;
        position: relative;
        touch-action: pan-y;  
    }
    .slides-container {
        height: 100vh;
        overflow: visible;
        touch-action: pan-y;
    }
    .mySlides {
        height: 100vh;
        touch-action: pan-y;
        overflow: visible;
    }
    .product-categories,
    .case-studies,
    .services-section,
    .about-us-section,
    .video-section,
    .why-section,
    .learn-section,
    .faq-section {
        overflow: visible;
        touch-action: pan-y;
        padding-bottom: 140px;
    }
    .nav1 {
        position: fixed;
        width: 100%;
        z-index: 1000;
        touch-action: none;  
    }

    /* ar.css */
    html[dir="rtl"] .y1985lf,
    html.rtl .y1985lf {
        float: right !important;
    }
    .ltr .y1985lf {
        float: left;
    }
    html[dir="rtl"] .learn-sidebar-section li,
    html.rtl .learn-sidebar-section li,
    body[lang="ar"] .learn-sidebar-section li, body[lang="ur"] .learn-sidebar-section li, body[lang="iw"] .learn-sidebar-section li,
    html[lang="ar"] .learn-sidebar-section li , html[lang="ur"] .learn-sidebar-section li , html[lang="iw"] .learn-sidebar-section li {
        margin: 5px 0 !important;
    }
}

/* ==================== @media screen and (max-width: 480px) - COMBINED ==================== */
@media screen and (max-width: 480px) {
    /* 1about-us-where-to-buy.css */
    .y1990s .m90feb {
        width: 92%;
        margin: 0 4% 30px 4%;
        padding: 15px 20px;
    }

    /* app-html.css */
    .app-hero-section h2,
    .app-cta-section h2 {
        font-size: 24px;
    }
    .app-hero-section p,
    .app-cta-section p {
        font-size: 14px;
    }

    /* 1sales-products.css */
    h2:last-of-type + .m90apr {
        grid-template-columns: repeat(1, 1fr) !important;
        width: 100% !important;
    }

    /* live-demo.css */

    /* indexcommon.css - bg text */
    .bg .text {
        top: 40%;
    }
    .bg .text h1 {
        font-size: 5vw;
        margin-bottom: 2vw;
    }
    .bg .text h2 {
        /* [Mobile-P2-1 / R5] 原 3vw 在 375px 宽度时计算出 11.25px，
           远低于移动端 H2 副标题可读性下限 14px；
           改为 clamp(16px, 4.5vw, 22px)：375px→17px / 768px→22px（被上限夹）
        */
        /* font-size: 3vw; */   /* [R5 注释掉原值] 375px → 11.25px 过小 */
        font-size: clamp(16px, 4.5vw, 22px) !important;
        line-height: 1.4 !important;
    }

    /* [Mobile-P2-1 / R5] 防御性覆盖：非 .bg 容器下的 Article/Project banner 标题
       （如 .picturectn .text h2 / .mySlides .text h2），也保证最小 16px
    */
    .picturectn .text h2,
    .mySlides .text h2,
    .banner .text h2,
    .banner1 .text h2,
    .banner2 .text h2,
    .text > h2 {
        font-size: clamp(16px, 4.8vw, 22px) !important;
        line-height: 1.4 !important;
    }

    /* [Mobile-P2-3 / R6] 修复首页 4 标签（services/advantages/project）小屏仍 2 列挤压
       根因：文件后部 @media (max-width: 1200px) 写了 repeat(2,1fr)，
       且 1200 块出现**在** 768 块之后 → 375px 同时命中两个，CSS 后写覆盖先写，
       导致前面 768 块 services-grid 的 1fr 被 1200 的 2fr 覆盖；
       advantages-grid 在 768 块内完全没写；project-grid 在 768 块里是 1fr 1fr。
       解决：全部强制 1 列（grid-template-columns: 1fr !important）
       → 每格宽 ≥ 330px，文字不再被 135px 窄格挤成 50+ 行。
    */
    .services-grid,
    .advantages-grid,
    .project-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        width: 94% !important;
        margin: 0 auto !important;
    }
    .services-grid .service-item,
    .advantages-grid .advantage-item,
    .project-grid .project-item {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
}

/* ==================== @media screen and (min-width: 481px) and (max-width: 767px) ==================== */
@media screen and (min-width: 481px) and (max-width: 767px) {
    .bg .text h1 {
        font-size: 4vw;
    }
    .bg .text h2 {
        font-size: 2.5vw;
    }
}

/* ==================== @media screen and (min-width: 768px) ==================== */
@media screen and (min-width: 768px) {
    .bg .text {
        width: 60%;
    }
}

/* ==================== @media screen and (max-width: 992px) - COMBINED ==================== */
@media screen and (max-width: 992px) {
    /* index.css - case studies */
    .project-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* index.css - faq */
    .faq-grid {
        width: 85%;
    }

    /* index.css - video content */
    .video-content {
        flex-direction: column;
        width: 90%;
    }
    .video-text {
        padding-right: 0;
        margin-bottom: 30px;
    }
}

/* ==================== @media screen and (max-width: 1000px) ==================== */
@media screen and (max-width: 1000px) {
    h2:last-of-type + .m90apr {
        grid-template-columns: repeat(3, 1fr) !important;
        width: 90% !important;
    }
}

/* ==================== @media screen and (max-width: 1024px) - already merged above ==================== */
/* See @media screen and (max-width: 1024px) at top of file */

/* ==================== @media screen and (max-width: 1200px) - COMBINED ==================== */
@media screen and (max-width: 1200px) {
    /* index.css - services */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* index.css - advantages */
    .advantages-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* index.css - learn section */
    .learn-section .m90apr {
        width: 90%;
    }

    /* 1about-us-where-to-buy.css */
    .y1990s .m90feb {
        width: 60%;
        margin: 0 20% 30px 20%;
        padding: 25px 35px;
    }

    /* 1sales-products.css */
    h2:last-of-type + .m90apr {
        grid-template-columns: repeat(4, 1fr) !important;
        width: 80% !important;
    }
}

/* ==================== @media screen and (max-width: 1400px) - COMBINED ==================== */
@media screen and (max-width: 1400px) {
    /* 1sales-products.css */
    .m90apr {
        grid-template-columns: repeat(3, 1fr);
    }
    h2:last-of-type + .m90apr {
        grid-template-columns: repeat(4, 1fr) !important;
        width: 80% !important;
    }
}

/* ==================== @media (max-width: 668px) ==================== */
@media (max-width: 668px) {
    .grid {
        grid-template-columns: 1fr;
        overflow: hidden;
    }
    .hide-on-mobile {
        display: none;
    }
}
/* ==================== [Mobile-P2-5 / R9] 首页最近文章列表（learn-section .m90apr）手机端被挤成竖排单字 ====================
   现象：375px 视口下 ja/en 等所有语言首页 "Technical Tidbits" 区块，注入的最近文章列表每行仅显示 1 个字符。
   根因（与 R6 同类的级联顺序坑）：
     本文件中存在 5 个不同断点的 h2:last-of-type + .m90apr 规则且全部带 !important：
       L727  (≤768)  repeat(2,1fr) → L934 (≤480) repeat(1,1fr) → L1042 (≤1000) repeat(3,1fr)
       → L1076 (≤1200) repeat(4,1fr) → L1088 (≤1400) repeat(4,1fr)
     375px 同时命中全部断点，CSS 后写覆盖先写 → 最终生效 ≤1400 的 repeat(4,1fr)！
     首页 .learn-section 的 m90apr 恰好也是 h2:last-of-type + .m90apr，
     于是注入的整个列表作为 1 个 grid 项被压进 4 列中 1 格（约 50px，减 padding 后约 20px）→ 每行 1 字。
   修复：在文件末尾（级联最后）重申 mobile 意图：
     1) learn-section 内的 m90apr 强制 1 列（选择器升级为 .learn-section h2:last-of-type + .m90apr，
        特异性 (0,3,1) > 原规则的 (0,2,1)，!important 同级时特异性高者胜）
     2) 其他页面的 h2:last-of-type + .m90apr（如 sales-products 产品卡）恢复 ≤768 设计意图 repeat(2,1fr)
   影响：29 个语言首页 + sales-products 等带该结构的页面；桌面端无影响（≤768 才生效）。
   回滚：删除整个 [Mobile-P2-5 / R9] 媒体查询块。
==================== */
@media screen and (max-width: 768px) {
    .learn-section .m90apr,
    .learn-section h2:last-of-type + .m90apr {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 0 !important;
    }
    h2:last-of-type + .m90apr {
        grid-template-columns: repeat(2, 1fr) !important;
        width: 95% !important;
    }
}

/* ==================== [Mobile-P2-6 / R10] case-studies 等页面案例卡片（.m90apr）手机端仍 3 列挤压 ====================
   现象：375px 视口下 /ja/case-studies 等页面，案例卡片每格仅约 100px 宽，日文标题每行 2-3 字无法阅读。
   根因（与 R9 同源）：本文件 ≤768 块 L723 已写 .m90apr { width:90%; repeat(1,1fr) }（mobile 意图 1 列），
     但文件更后的 ≤1400 块 L1085 写了 .m90apr { repeat(3,1fr) }（无 !important），
     375px 同时命中两个断点，级联"后写覆盖先写"→ 3 列在手机上生效。
     （case-studies 页的 .m90apr 前面没有 h2 兄弟节点，不匹配 h2:last-of-type + .m90apr，R9 管不到它）
   修复：文件末尾（级联最后）强制 mobile 1 列。
     注意：不覆盖 .aprA 的高度（≤768 块 L713 的 450px 继续生效，保持卡片图文比例）。
   影响：case-studies.html、learn.html 等所有使用裸 .m90apr 的页面（29 语言）；
     sales-products 的 h2:last-of-type + .m90apr 特异性更高，仍按 R9 的 2 列，不受本条影响。
   回滚：删除整个 [Mobile-P2-6 / R10] 媒体查询块。
==================== */
@media screen and (max-width: 768px) {
    .m90apr {
        grid-template-columns: 1fr !important;
        width: 90% !important;
        margin: 30px auto !important;
        gap: 24px !important;
    }
}

/* ==================== [Mobile-P0-3 / R11] Article/Project 页 banner 图溢出盖住正文标题 ====================
   现象：375px 视口下 /article/* 页面，正文大标题（.article-header h1）上半部分被 banner 图片下半部
   半透明遮挡（img opacity 0.8，文字透出来但模糊不可读）。
   根因（特异性错位）：
     - indexcommon.css  #img1 { height: 70vh }  ← id 选择器 (1,0,0)
     - media.css ≤768   .mySlides { height: 100vh }  ← 类选择器 (0,1,0)，被 #img1 压过
     - 但同块内 .bg { min-height:100vh } 和 .bg img { height:100vh } 正常生效
     → 内容高 100vh 装在 70vh 的容器里，且 ≤768 块把 .mySlides 设为 overflow:visible
     → 图片下部 30vh 溢出容器，盖在下方正文上（.picturectn 本身无 overflow:hidden，不裁剪）。
   修复：≤768 时把 #img1 高度对齐到 100vh（与 .bg/.bg img 一致，消除溢出）。
   影响：article/*.html、projects-*.html 等所有用 .picturectn#img1 banner 的页面（29 语言）；
     首页轮播第 1 张也是 #img1，同步对齐 100vh，与其余 3 张 slide 高度一致，无副作用。
   回滚：删除整个 [Mobile-P0-3 / R11] 媒体查询块。
==================== */
@media screen and (max-width: 768px) {
    #img1 {
        height: 100vh;
    }
}

/* ==================== [Mobile-P1-6 / R13] 首页右侧 4 标签重叠 + Mobile APP 弹层卡片竖排/超高 ====================
   现象（2026-08-26 用户报告，/ja/index 375px）：
   ① 右侧 4 个标签（OSD Demo / Mobile APP / 3D Design Tool / Live Demo）互相部分覆盖；
   ② Mobile APP 弹层内 3 个 app 介绍卡片被挤成 3 窄列、文字竖排；
   ③ 弹层高度超出 mySlides 背景（内容溢出屏幕底部）。
   根因：
   ① 4 标签在 ≤768 块中按 60px 步进排列（5vh/+60/+120/+180），但标签文字 2 行实际高约 55-60px，
      步进不足导致相邻标签视觉重叠；
   ②③ 0app_index.css 由 XHR 注入，其 <link> 在 DOM 中晚于 head 里的 media.css，
      同特异性 (0,1,0) 时"后出现的赢"→ 注入的 .app-grid { repeat(3,1fr) } 覆盖 media 的 1fr；
      且 .app-section 同时有 max-height:80vh 和 overflow:visible（后者覆盖 overflow-y:auto），
      max-height 形同虚设 → 内容超高直接溢出屏幕。
   修复：
   ① 标签步进 60px → 75px、加宽到 64px（减少折行）、统一靠右 12px（避开弹层 80% 宽度区）；
   ② .app-section .app-grid 提升特异性 + !important 强制 1 列；
   ③ .app-section 恢复 overflow-y:auto + max-height:82vh（弹层内部滚动，不再超出背景）；
      关闭按钮移入弹层内部（top/right 8px），避免被 overflow 裁剪。
   回滚：删除整个 [Mobile-P1-6 / R13] 媒体查询块。
==================== */
@media screen and (max-width: 768px) {
    /* [R13 补丁 2026-08-26b] ① 首个图标从 5vh 下移到导航高度(85px)之下，避开右上角汉堡按钮；
       ② 弹层 max-height 82vh → 70vh：手机浏览器 100vh 含地址栏区域，
       82vh 的底部会探到浏览器工具栏之下，导致滚到底也看不到"Open App / YouTube"结尾内容；
       70vh + 顶部 5vh = 75vh，完整落在可视区内，并加 padding-bottom 保障结尾文字可见。 */
    .orm-toggle-icon,
    .app-toggle-icon,
    .play-with-3d,
    .live-demo {
        top: auto !important;
        right: 12px !important;
        width: 64px !important;
        min-height: 50px !important;
        padding: 4px !important;
        box-sizing: border-box !important;
    }
    .orm-toggle-icon { top: calc(85px + 2vh)   !important; }
    .app-toggle-icon { top: calc(160px + 2vh)  !important; }
    .play-with-3d    { top: calc(235px + 2vh)  !important; }
    .live-demo       { top: calc(310px + 2vh)  !important; }

    .app-section .app-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .app-section {
        max-height: 70vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 24px !important;
    }
    .app-close-btn {
        top: 8px !important;
        right: 8px !important;
    }
}