/* ============================================================
   site-ui.css — 世纪云官网统一视觉层（v3 极简浅灰蓝）
   ------------------------------------------------------------
   职责：顶部导航、移动端菜单、产品下拉大面板、底部联系区、
         页脚、购买 CTA 带的统一样式与配色令牌。
   使用：官网 Smarty 布局（layouts/index.html）与开服助手
         静态页（/kszs/*.html）共用本文件，两处使用完全相同
         的导航/页脚标记，保证"子页共用官网导航页脚"。
   注意：本文件在 basis.css / media.css / nav.css 之后加载，
         覆盖其深色导航与页脚样式；也可脱离 basis.css 独立
         支撑开服助手静态页（容器/按钮自带基础规则）。
   ============================================================ */

:root{
    --ui-bg:#F6F7F8;            /* 页面浅灰底 */
    --ui-bg-soft:#EFF2F4;       /* 区块浅灰 */
    --ui-card:#FFFFFF;
    --ui-line:#E7EAEE;
    --ui-ink:#17191C;
    --ui-ink-2:#42474E;
    --ui-muted:#7A828C;
    --ui-faint:#A9B0B8;
    --ui-blue:#4A6FA5;          /* 低饱和蓝主题色 */
    --ui-blue-d:#3D5F90;
    --ui-blue-l:#8AA6C9;
    --ui-blue-soft:#EDF2F8;
    --ui-blue-ring:rgba(74,111,165,.14);
    --ui-serif:Georgia,"Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;
    --ui-r:14px;
    --ui-sh:0 1px 2px rgba(23,25,28,.04),0 2px 10px rgba(23,25,28,.05);
    --ui-sh-lg:0 14px 34px rgba(23,25,28,.10);
}

/* ---------- 基础（开服助手静态页无 basis.css，也保持一致） ---------- */
.siteui-body{ background:var(--ui-bg); color:var(--ui-ink-2);
    font-family:"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
    font-size:14px; -webkit-font-smoothing:antialiased; }
html,body{ background:var(--ui-bg); }
body{ color:var(--ui-ink-2); }
.w1280{ max-width:1200px; margin:0 auto; padding:0 24px; box-sizing:border-box; }
/* 去链接下划线：官网页由 basis.css 兜底，kszs 静态页只加载本文件，必须在这里声明 */
a{ transition:color .18s ease; text-decoration:none; }

/* ============================================================
   顶部导航（固定悬浮 · 白底毛玻璃 · 细分隔线）
   ============================================================ */
.header{
    position:fixed; z-index:1000; left:0; right:0; top:0; height:78px;
    background:rgba(255,255,255,.9);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    border-bottom:1px solid var(--ui-line);
}
.header.fixed{ background:rgba(255,255,255,.96); box-shadow:none; }
.header .w1280{ height:78px; }

.logo{ display:flex; align-items:center; flex-shrink:0; }
.logo img{ height:38px; width:auto; display:block; }

/* 主导航 */
.nav{ list-style:none; margin:0; padding:0; }
#navbar{ display:flex; align-items:center; }
.nav a{
    color:var(--ui-ink-2); font-size:15px; font-weight:500;
    margin:0 20px; height:78px; line-height:78px;
    display:block; position:relative; cursor:pointer;
}
.nav a::after{
    content:""; position:absolute; left:50%; right:50%; bottom:0;
    height:2px; width:0; background:var(--ui-blue); opacity:0;
    transition:all .25s ease; border-radius:1px;
}
.nav a:hover,.nav li.active a,.nav li a.active{ color:var(--ui-blue); }
.nav a:hover::after,.nav li.active a::after,.nav a.active::after{
    width:100%; left:0; right:0; opacity:1;
}

/* 悬停下拉（开服助手 / 静态页产品菜单） */
#navbar > li.has-drop{ position:relative; }
#navbar > li.has-drop > a{ display:inline-flex; align-items:center; gap:6px; }
.drop-arrow{
    width:0; height:0; margin-top:2px;
    border-left:4px solid transparent; border-right:4px solid transparent;
    border-top:5px solid currentColor; opacity:.6;
    transition:transform .22s ease;
}
#navbar > li.has-drop:hover .drop-arrow{ transform:rotate(180deg); }
#navbar > li.has-drop .drop-menu{
    display:none; position:absolute; top:78px; left:50%;
    transform:translateX(-50%);
    min-width:168px; padding:8px 0;
    background:#fff; border:1px solid var(--ui-line);
    border-radius:0 0 14px 14px;
    box-shadow:var(--ui-sh-lg); z-index:1200;
}
#navbar > li.has-drop:hover .drop-menu, #navbar > li.has-drop.open .drop-menu{ display:block; }
#navbar > li.has-drop.open > a{ color:var(--ui-blue); }
#navbar > li.has-drop.open .drop-arrow{ transform:rotate(180deg); }
#navbar > li.has-drop .drop-menu a{
    display:block; height:auto; line-height:1.45;
    margin:0; padding:10px 22px; font-size:14px; font-weight:400;
    color:var(--ui-ink-2); white-space:nowrap; transition:.15s;
}
#navbar > li.has-drop .drop-menu a::after{ display:none; }
#navbar > li.has-drop .drop-menu a:hover{
    color:var(--ui-blue); background:var(--ui-blue-soft); padding-left:26px;
}
#navbar > li.has-drop .drop-menu a:last-child{ border-radius:0 0 13px 13px; }

/* 右上角按钮 */
.pctop{ display:flex; align-items:center; flex-shrink:0; }
.topzc{
    height:36px; line-height:34px; padding:0 18px; margin-right:10px;
    color:var(--ui-ink-2); border:1px solid var(--ui-line);
    border-radius:999px; font-size:14px; background:transparent;
    display:inline-block; box-sizing:border-box; transition:.18s;
}
.topzc:hover{ color:var(--ui-blue); border-color:var(--ui-blue-l); }
.topzc img,.toprdl img{ display:none; }   /* 去掉按钮内小图，纯文字更简约 */
.toprdl{
    width:auto; min-width:104px; height:36px; line-height:36px;
    padding:0 20px; background:var(--ui-blue); border-radius:999px;
    color:#fff; font-size:14px; text-align:center;
    display:inline-block; box-sizing:border-box; transition:.18s;
}
.toprdl:hover{ background:var(--ui-blue-d); color:#fff; border-radius:999px; }

/* 汉堡按钮（移动端；官网页用 iconfont 字形，静态页用内联 SVG，两者通用） */
.icon-caidan.mnavBtn{ color:var(--ui-ink); }
.mnavBtn{ cursor:pointer; }
.mnavBtn svg{ width:26px; height:26px; display:block; color:var(--ui-ink); }

/* ---------- 布局 / 页脚小助手（静态页无 basis.css 也可用；官网页加载在其后，规则一致） ---------- */
.d-flex-center-between{ display:flex; align-items:center; justify-content:space-between; }
.footRul{ display:flex; gap:44px; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.footRul li{ display:flex; flex-direction:column; gap:9px; min-width:88px; }
.footRul h3{ margin:0; }
.footRul a{ font-size:13px; }
.copy{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
       padding:22px 0 26px; border-top:1px solid var(--ui-line); margin-top:36px;
       font-size:12.5px; color:var(--ui-faint); }

/* ---------- 产品下拉大面板（官网 subnav） ---------- */
.subnav{
    position:fixed; top:78px; left:0; right:0;
    background:rgba(255,255,255,.98); z-index:999;
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--ui-line);
    box-shadow:0 22px 44px rgba(23,25,28,.08);
}
.sub-nav{ padding-bottom:26px; }
.navp{ padding-top:26px; padding-bottom:20px; }
.toph3{ color:var(--ui-blue); font-family:var(--ui-serif); }
.prodNav h4{ color:var(--ui-ink); }
.prodNav p{ color:var(--ui-muted); }
.prodNav a:hover h4{ color:var(--ui-blue); }
.ffsub a{ color:var(--ui-ink-2); }
.ffsub a:hover{ color:var(--ui-blue); }
.top-menu-header{ background:rgba(255,255,255,.98); }

/* ---------- 移动端菜单（全屏抽屉，静态页无 basis.css 也可用） ---------- */
.mnavBtn{ display:none; }
.mNavPop{
    background:rgba(255,255,255,.98); color:var(--ui-ink);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    position:fixed; top:0; padding-top:64px; left:0; right:0; bottom:0;
    overflow:auto; z-index:990;
    transform:translate(100%,0);
    transition:transform .3s ease;
}
.mNavPop.show{ transform:translate(0,0); }
.mNavPop ul{ list-style:none; margin:0; padding:0; }
.mNavPop a{
    display:block; height:44px; line-height:44px;
    color:var(--ui-ink); padding-left:20px; font-size:15px;
}
.mNavPop .msub{ background:var(--ui-bg-soft); padding:5px 0; }
.mNavPop .msub a{
    float:left; width:33.3333%; font-size:14px;
    color:var(--ui-muted); padding-left:0; text-align:center;
    height:40px; line-height:40px; border:none; overflow:hidden;
}
/* 清浮动小助手（静态页无 basis.css；.msub 内 float 子项依赖它换行） */
.clearfix::after{ content:""; display:block; clear:both; }
.clearfix{ zoom:1; }

/* ============================================================
   底部联系区（客服联系统一放这里，简约线性图标）
   ============================================================ */
.ft-contact{ background:var(--ui-bg-soft); border-top:1px solid var(--ui-line); }
.ft-contact-in{
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:18px; padding:34px 0 30px;
}
.ftc-item{
    display:flex; align-items:center; gap:14px;
    color:var(--ui-ink-2); text-decoration:none;
    min-width:0;
}
a.ftc-item:hover{ color:var(--ui-blue); }
.ftc-ico{
    width:42px; height:42px; border-radius:12px; flex-shrink:0;
    display:grid; place-items:center;
    background:#fff; border:1px solid var(--ui-line); color:var(--ui-blue);
    transition:.18s;
}
a.ftc-item:hover .ftc-ico{ border-color:var(--ui-blue-l); background:var(--ui-blue-soft); }
.ftc-ico svg{ width:20px; height:20px; }
.ftc-t{ font-size:12.5px; color:var(--ui-muted); letter-spacing:.5px; }
.ftc-v{ font-size:14.5px; font-weight:600; color:var(--ui-ink); margin-top:2px;
        word-break:break-all; line-height:1.35; }
a.ftc-item:hover .ftc-v{ color:var(--ui-blue); }

/* ============================================================
   购买 CTA 带（浅色 · 克制）
   ============================================================ */
.cpbuy{ background:transparent; padding:64px 0 68px; }
.cpbuy h2{
    color:var(--ui-ink); font-weight:600; margin-bottom:6px;
    font-family:var(--ui-serif); letter-spacing:.5px;
}
.cpbuy p{ color:var(--ui-muted); font-size:14px; margin:0 0 22px; }
.cpbuy a{
    width:auto; min-width:150px; height:46px; line-height:44px; padding:0 34px;
    border:1px solid var(--ui-blue) !important; border-radius:999px !important;
    background:var(--ui-blue); color:#fff !important;
    font-weight:600; letter-spacing:1px; box-sizing:border-box;
    transition:background .2s ease, box-shadow .2s ease;
}
.cpbuy a:hover{ background:var(--ui-blue-d); border-color:var(--ui-blue-d) !important;
                color:#fff !important; box-shadow:0 10px 26px var(--ui-blue-ring); }

/* ============================================================
   页脚（浅色 · 与浅灰页面融为一体）
   ============================================================ */
.footer{ background:var(--ui-bg); border-top:1px solid var(--ui-line); }
.footer .item,.footer p,.footer a{ color:var(--ui-muted) !important; }
.footer h3{ color:var(--ui-ink) !important; font-size:15px; }
.footer a:hover{ color:var(--ui-blue) !important; }
.footLogo h3{ color:var(--ui-ink) !important; }
.footer .footL01 p,.footer .copy{ color:var(--ui-faint) !important; }
.footer .copy a{ color:var(--ui-muted) !important; }
.footer_2 span{ color:var(--ui-faint); }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:999px){
    .header{ height:60px; }
    .header .w1280{ height:60px; }
    /* #navbar 需用 ID 权重，否则被上方 #navbar{display:flex} 压掉（静态页无 media.css） */
    .header .nav, #navbar{ display:none; }
    .logo img{ height:32px; }
    .nav a{ height:60px; line-height:60px; }
    #navbar > li.has-drop .drop-menu{ top:60px; }
    .subnav{ top:60px; }
    .pctop{ display:none; }          /* 移动端入口收进抽屉菜单 */
    .mnavBtn{ display:block !important; cursor:pointer; font-size:26px !important; }
    .ft-contact-in{ grid-template-columns:1fr 1fr; gap:14px; padding:26px 0 22px; }
}
@media (max-width:560px){
    .ft-contact-in{ grid-template-columns:1fr; }
    .w1280{ padding:0 16px; }
}