/*==================================================================================
    Custom Stylesheet —— 桌鱼官网
    策略：结构与样式全部沿用模板（style.css/responsive.css），
    这里只做品牌化覆盖：配色用模板原生紫、按钮改小圆角、下滑导航压薄、
    字体颜色与紫色系适配、截图展示样式。
====================================================================================*/

:root {
    --zy-accent: #5b39c9;
    --zy-accent-dark: #47299e;
    --zy-ink: #241b3a;
    --zy-mute: #6f6c7f;
}

/* ---------- 全局 ---------- */
/* 字体与应用本体一致：WPF 侧是 Segoe UI Variable Text, Segoe UI, Microsoft YaHei UI。
   模板的 Poppins 从未被加载（无 webfont），此前实际回退成 Arial，观感与软件不一致。 */
body,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, p {
    font-family: 'Segoe UI Variable Text', 'Segoe UI', 'Microsoft YaHei UI', 'Microsoft YaHei', 'PingFang SC', sans-serif;
}
body {
    color: var(--zy-mute);
    font-size: 15px;
}
h1, h2, h3, h4, h5, h6 { color: #36324a; }

/* ---------- 导航：仅应用鱼形图标，无字标 ---------- */
.main-header { padding: 14px 0; }
.logo .zy-icon { height: 40px; width: auto; display: block; }
.main-header .header-menu > ul > li { padding-left: 18px; padding-right: 18px; }
.main-header .header-menu > ul > li > a { padding: 26px 0 26px; font-size: 15px; }
.main-header .header-menu > ul > li:hover > a,
.main-header .header-menu > ul > li:focus > a,
.main-header .header-menu > ul > li:active > a,
.main-header .header-menu > ul > li.active > a { color: var(--zy-accent); }

/* 下滑 sticky 态：比顶部态更薄，避免一条又高又宽的白条 */
.main-header.sticky {
    padding: 8px 0;
    box-shadow: 0 2px 8px rgba(36, 27, 58, .10);
}
.main-header.sticky .logo .zy-icon { height: 32px; width: auto; }
.main-header.sticky .header-menu > ul > li > a { padding: 11px 0; }

/* ---------- 品牌色 + 按钮：模板紫，50px 胶囊改 8px 小圆角（与 Fluent 应用窗口一致） ---------- */
.btn {
    color: var(--zy-accent);
    border-color: var(--zy-accent);
    border-radius: 8px;
    overflow: hidden;
}
/* 去掉模板的圆形放大扫过 hover（:before 直径 11px 圆 hover 时 scale(20) 刷满），
   改为直接颜色填充：透明按钮悬停入品牌紫，首屏实心按钮悬停加深。 */
.btn:before { display: none; }
.btn {
    transition: background-color .22s ease, border-color .22s ease, color .22s ease;
}
.btn:hover,
.btn.active,
.btn:focus {
    background: var(--zy-accent);
    border-color: var(--zy-accent);
    color: #fff;
}
.banner-text-inner .btn:hover,
.banner-text-inner .btn.active,
.banner-text-inner .btn:focus {
    background: var(--zy-accent-dark);
    border-color: var(--zy-accent-dark);
    color: #fff;
}
.center .single-feature-inner { border-color: var(--zy-accent); }
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span { background: var(--zy-accent); }
.back-to-top { background: var(--zy-accent); }

/* ---------- 首屏：真实桌面截图 ---------- */
.zy-banner-shot {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e4ddf2;
    box-shadow: 0 30px 70px rgba(46, 35, 84, .16);
    background: #fff;
}
.zy-banner-shot img { width: 100%; display: block; }
.banner-text-inner h1 {
    font-size: 34px;
    line-height: 1.45;
    font-weight: 600;
    letter-spacing: .5px;
}
.banner-text-inner p { margin-bottom: 30px; max-width: 430px; }
.banner-text-inner .btn { margin-right: 14px; margin-bottom: 10px; }

/* ---------- 功能轮播：小号线性图标，与模板卡片等比 ---------- */
.zy-fa-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 26px;
    border-radius: 14px;
    background: rgba(91, 57, 201, .08);
}
.zy-fa-icon i { font-size: 22px; color: var(--zy-accent); }
.center .zy-fa-icon { background: var(--zy-accent); }
.center .zy-fa-icon i { color: #fff; }
.single-feature-inner h5 { font-size: 17px; }

/* ---------- 界面欣赏 / 交互区截图 ---------- */
.zy-app-img {
    display: block;
    width: min(720px, 92%);
    margin: 0 auto;
    border-radius: 14px;
    border: 1px solid #e4ddf2;
    box-shadow: 0 22px 55px rgba(46, 35, 84, .14);
    background: #fff;
}
.zy-interact-img {
    width: 100%;
    display: block;
    border-radius: 14px;
    border: 1px solid #e4ddf2;
    box-shadow: 0 22px 55px rgba(46, 35, 84, .14);
    background: #fff;
}
.user-interact-inner .interact-icon img {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    border: 1px solid #e6defa;
    background: #fff;
}
.user-interact-inner .btn { margin-top: 6px; }

/* ---------- 下载区：暂未上架的诚实样式 ---------- */
.zy-dl-note { margin: 18px 0 30px; color: var(--zy-mute); font-size: 15px; line-height: 1.8; }
.zy-soon {
    color: #a89fbc !important;
    border-color: #cfc6df !important;
    border-style: dashed;
    background: #fff;
    cursor: default;
    margin: 0 10px 10px;
}
.zy-soon:before { display: none; }
.zy-soon i { margin-right: 8px; }

/* ---------- 页脚 ---------- */
.footer-bottom {
    background: var(--zy-ink);
    padding: 26px 0;
}
.footer-bottom p { color: #bcb2d1; font-size: 14px; }
.footer-bottom p a { color: #e6e0f2; margin-left: 16px; }
.footer-bottom p a:hover { color: #fff; }

/* ---------- 隐私政策页 ---------- */
.zy-privacy { padding-top: 150px; }
.zy-privacy h4 {
    font-size: 17px;
    font-weight: 700;
    margin: 32px 0 8px;
    padding-left: 12px;
    border-left: 3px solid var(--zy-accent);
    line-height: 1.4;
}
.zy-privacy p { font-size: 15px; line-height: 1.85; margin-bottom: 10px; }
.zy-privacy code {
    color: var(--zy-accent-dark);
    background: rgba(91, 57, 201, .08);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 13.5px;
}

/* ---------- 界面欣赏：电脑显示器框（替代模板手机壳 mockup） ---------- */
.app-scrin-inner { margin-top: 0; max-width: none; }
.app-carousel-inner {
    position: relative;
    width: min(980px, 94vw);
    height: auto;
    margin: 34px auto 0;
    padding: 0;
    background: none;
}
.app-carousel .single-app-image {
    position: relative;
    box-sizing: border-box;
    width: min(880px, 96%);
    margin: 0 auto;
    padding: 18px 18px 30px;
    background: linear-gradient(180deg, #2e2547, #241b3a);
    border: 1px solid #3a3154;
    border-radius: 16px;
    box-shadow: 0 30px 70px rgba(36, 27, 58, .22);
}
/* 显示器支柱 */
.app-carousel .single-app-image:before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -46px;
    width: 46px;
    height: 42px;
    background: linear-gradient(180deg, #2e2547, #3a3154);
    border-radius: 0 0 4px 4px;
}
/* 底座 */
.app-carousel .single-app-image:after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -58px;
    width: 216px;
    height: 10px;
    background: #2e2547;
    border: 1px solid #3a3154;
    border-radius: 6px;
}
/* 屏幕：覆盖模板 90%/95% 的手机比例 */
.app-carousel .single-app-image img {
    display: block;
    width: 100%;
    height: auto;
    top: auto;
    margin: 0;
    border: none;
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
}
/* 指示点移到支架下方 */
.app-carousel .owl-dots { margin-top: 100px; }
@media (max-width: 575.98px) {
    .app-carousel-inner { margin-top: 18px; }
    .app-carousel .single-app-image {
        width: 100%;
        padding: 12px 12px 22px;
        border-radius: 12px;
    }
    .app-carousel .single-app-image:before,
    .app-carousel .single-app-image:after { display: none; }
    .app-carousel .owl-dots { margin-top: 26px; }
}

/* ---------- 灯箱 ---------- */
.mfp-zoom-in .mfp-content {
    opacity: 0;
    transition: all .26s ease-in-out;
    transform: scale(.92);
}
.mfp-zoom-in.mfp-ready .mfp-content { opacity: 1; transform: scale(1); }
.mfp-zoom-in.mfp-bg { opacity: 0; transition: opacity .26s ease-out; }
.mfp-zoom-in.mfp-ready.mfp-bg { opacity: .82; }
.mfp-zoom-in.mfp-removing .mfp-content { transform: scale(.92); opacity: 0; }
.mfp-zoom-in.mfp-removing.mfp-bg { opacity: 0; }
.mfp-title { color: #d3cbe6; padding-right: 120px; }

/* ---------- 响应式 ---------- */
@media (max-width: 991px) {
    .banner-text-inner h1 { font-size: 28px; }
    .zy-banner-shot { margin-top: 30px; }
}
@media (max-width: 767px) {
    .banner-text-inner h1 { font-size: 25px; }
    .footer-bottom { text-align: center; padding: 22px 0; }
    .footer-bottom .text-md-right { text-align: center !important; }
    .footer-bottom .col-md-6 + .col-md-6 { margin-top: 8px; }
    .footer-bottom p a { margin: 0 9px; }
}
/* 模板 ≤480px 给第二个按钮压了 margin-top:15px（为竖排设计），
   但两按钮在小屏仍是横排，导致一上一下错位——归零拉平。 */
@media (max-width: 479.98px) {
    .banner-text-inner .btn + .btn { margin-top: 0; margin-left: 10px; }
}