/* local-fix.css
     Overrides and quick fixes for navigation, layout and responsive spacing
*/

:root{ --app-max-width:1200px; --nav-height:72px; }

html,body,#app{height:100%;margin:0;padding:0;box-sizing:border-box;font-family:Inter, "Microsoft YaHei", Arial, sans-serif;color:#333}

/* ensure compiled css min-width doesn't force large layout */
#app, .content, body, html { min-width: 320px !important; }

/* responsive container */
.mainContent, .container { max-width: var(--app-max-width); margin:0 auto; padding:0 16px; box-sizing:border-box; }

/* navbar fixes */
.nav { position: fixed; top:0; left:0; right:0; height:var(--nav-height); z-index:999; background: rgba(255,255,255,0.96); display:block; box-shadow: 0 1px 8px rgba(0,0,0,0.06); }
.nav .mainContent{ display:flex; align-items:center; justify-content:space-between; height:100%; }
.nav .logoImg{ height:44px; width:auto; display:block; }
.nav .menuItem{ margin:0 10px; cursor:pointer; font-size:15px; color:#333; }
.nav .menuItem.active{ font-weight:600; }
.loginGrp{ display:flex; gap:12px; align-items:center }

/* push main content below fixed nav */
.main, #app > *:not(.nav) { padding-top: calc(var(--nav-height) + 12px); }

/* general useful resets */
img{max-width:100%;height:auto;display:block}
button, .button{cursor:pointer}

/* small screens */
@media (max-width:768px){
    :root{ --app-max-width:100%; --nav-height:64px }
    .nav .mainContent{ padding:0 12px }
    .nav .menuItem{ display:none }
}

/* utility spacing */
.mt-1{margin-top:8px}.mt-2{margin-top:16px}

/* ensure modals and popovers are above nav */
.ivu-modal-wrap, .ivu-modal-mask { z-index: 2000 !important }

/* keep footer/layout consistent */
footer{clear:both}

.content .part3 .imgBox > img{width:624px;max-width:624px;flex:none}
.content .part3 .imgBox > .relative{width:544px;flex:none}
.content .part3 .imgBox > .relative > img{width:544px;max-width:544px;height:auto}
.content .part3 .desc3_1{left:100px !important}
.content .imgBox .desc{display:none !important}

/* Contact page: keep the three customer channels in one stable row. */
.part1 .customerBox{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
    align-items:start;
    height:auto !important;
}
.part1 .customerBox > div,
.part2 .customerBox > div{
    width:auto !important;
    min-width:0;
    margin:0 !important;
}
.part1 .customerBox > div > img:first-child,
.part2 .customerBox > div > img:first-child,
.part2 .customerBox > div > a > img{
    display:block !important;
    width:100% !important;
    max-width:300px;
    height:auto !important;
    margin:0 auto;
}
.part2 .customerBox{
    display:flex !important;
    justify-content:center;
    height:auto !important;
}

@media (max-width:768px){
    .part1 .customerBox{
        grid-template-columns:1fr;
        gap:24px;
    }
    .part1 .customerBox > div,
    .part2 .customerBox > div{
        width:min(100%,300px) !important;
        margin:0 auto !important;
    }
    .part1 .mainContent,
    .part2 .mainContent{
        padding-left:16px;
        padding-right:16px;
    }
}

/* end local-fix */

/* Keep a clear download action visible without requiring card hover. */
.download .mainContent{
    width:min(100% - 48px,880px) !important;
    max-width:880px !important;
    padding:32px 0 64px !important;
}
.download .moduleTitle{
    margin:0 0 24px !important;
    color:#10233f !important;
    font-size:28px !important;
    font-weight:700 !important;
    line-height:1.25 !important;
    text-align:left !important;
}
.download .pcdownArea{
    display:grid !important;
    grid-template-columns:repeat(auto-fill,minmax(280px,360px));
    justify-content:start;
    align-items:stretch;
    gap:20px;
}
.download .pcdownArea > div{
    box-sizing:border-box;
    display:flex !important;
    flex-direction:column;
    width:100% !important;
    min-height:244px;
    height:auto !important;
    padding:24px !important;
    border:1px solid #d9e2ef;
    border-radius:8px;
    background:#fff !important;
    background-image:none !important;
    box-shadow:0 8px 22px rgba(16,35,63,.08);
    color:#10233f !important;
}
.download .pcdownArea .appTitle{
    width:auto !important;
    color:#10233f !important;
    font-size:22px;
    font-weight:700;
    line-height:1.35;
}
.download .pcdownArea .splitList{
    width:100%;
    height:1px;
    margin:16px 0;
    background:#d9e2ef !important;
}
.download .pcdownArea .version{
    color:#52627a;
    font-size:14px;
    line-height:1.5;
}
.pcdownArea > div > .localDownloadBtn{
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:48px;
    margin:22px 0 0;
    padding:0 18px;
    border:0;
    border-radius:8px;
    background:#084aff;
    box-shadow:0 5px 14px rgba(8,74,255,.2);
    color:#fff !important;
    font-size:16px;
    font-weight:700;
    line-height:1.2;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
}
.pcdownArea > div > .localDownloadBtn:hover,
.pcdownArea > div > .localDownloadBtn:focus-visible{
    background:#063bd1;
    outline:3px solid rgba(8,74,255,.22);
    outline-offset:2px;
}
@media (max-width:600px){
    .download .mainContent{width:calc(100% - 32px) !important;padding-top:24px !important}
    .download .moduleTitle{font-size:24px !important}
    .download .pcdownArea{grid-template-columns:minmax(0,1fr)}
}