/* Flux Pro Unified UI (A: 服务器/云主机官网)
   说明：不改后端，只做全站统一视觉（间距/按钮/卡片/表单/表格/hero）
*/

:root{
  --pro-radius: 16px;
  --pro-radius-sm: 12px;
  --pro-shadow: 0 20px 55px rgba(0,0,0,.08);
  --pro-shadow-sm: 0 10px 30px rgba(0,0,0,.10);
  --pro-border: 1px solid rgba(0,0,0,.06);
}

/* ===== Public pages: neutralize admin sidebar offsets ===== */
body.flux-public{background-color: #f5f7fb;}
#page-container.flux-public-container{padding-left:0 !important;}
#page-container.flux-public-container #main-container{padding-left:0 !important;}
#page-container.flux-public-container .content{max-width: 1200px; margin-left:auto; margin-right:auto;}

/* Minimal display utilities (for pages that don't load Bootstrap/OneUI) */
.d-none{display:none !important;}
.d-flex{display:flex !important;}
.d-block{display:block !important;}
@media (min-width: 768px){
  .d-md-flex{display:flex !important;}
  .d-md-none{display:none !important;}
}

html,body{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body{ letter-spacing:.2px; }

/* ===== 主页 Hero（官网感的关键） ===== */
.bg-black-50{
  background: linear-gradient(180deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.72) 100%) !important;
}
.hero-pro{ min-height: 78vh; display:flex; align-items:center; }
.hero-title{ font-size: 56px; font-weight: 750; letter-spacing: 2px; line-height: 1.12; margin-bottom: 18px; }
.hero-subtitle{ font-size: 18px; color: rgba(255,255,255,.86) !important; max-width: 860px; margin: 0 auto 38px; line-height: 1.85; }

/* ===== 按钮（更“重”更企业） ===== */
.btn{ border-radius: 999px; }
.btn-hero{
  padding: 14px 38px !important;
  font-size: 16px !important;
  font-weight: 650 !important;
  box-shadow: var(--pro-shadow-sm);
}
.btn-hero.btn-outline-light{
  backdrop-filter: blur(6px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.45) !important;
}
.btn-hero + .btn-hero{ margin-left: 14px; }

/* 普通按钮统一更厚一点 */
.btn.btn-primary, .btn.btn-success, .btn.btn-info, .btn.btn-warning, .btn.btn-danger{
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}
.btn.btn-outline-primary, .btn.btn-outline-success, .btn.btn-outline-info, .btn.btn-outline-warning, .btn.btn-outline-danger, .btn.btn-outline-light{
  box-shadow: none;
}

/* ===== 内容区节奏（留白=高级感） ===== */
.content.content-full{ padding-top: 4.5rem; padding-bottom: 4.5rem; }

/* ===== Block 卡片统一（OneUI 的 block 变“官网卡片”） ===== */
.block{
  border-radius: var(--pro-radius) !important;
  box-shadow: var(--pro-shadow) !important;
  border: var(--pro-border) !important;
}
.block-header-default{ background: transparent !important; }
.block-title{ font-weight: 750 !important; letter-spacing: .3px; }
.block-content{ padding: 1.5rem 1.75rem; }

/* hover 动效轻一点，显高级 */
.block-fx-pop:hover{
  transform: translateY(-2px);
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 28px 70px rgba(0,0,0,.10) !important;
}

/* ===== 表单统一（登录/注册/下单页会立刻提升质感） ===== */
.form-control{
  border-radius: var(--pro-radius-sm);
  padding: .72rem .95rem;
}
.form-control:focus{
  box-shadow: 0 0 0 .22rem rgba(52, 152, 219, .16);
}
.input-group-text{
  border-radius: var(--pro-radius-sm);
}

/* ===== 表格/分页更“后台SaaS”但不廉价 ===== */
.table thead th{ font-weight: 750; letter-spacing: .2px; }

.pagination>li>a,.pagination>li>span{ border-radius: 999px !important; margin: 0 4px; }
.pagination>.active>a,.pagination>.active>span{
  background-color: var(--primary, #2D7EFF) !important;
  border-color: var(--primary, #2D7EFF) !important;
}


/* ===== V3.4 官方增强：Topbar 固定 + 居中布局 ===== */
.pro-topbar--solid{
  position: fixed;
  top:0; left:0; right:0;
}
.pro-topbar-inner{
  display:flex;
  align-items:center;
  height:74px;
}
.pro-topbar-inner .pro-brand{ flex:0 0 auto; display:flex; align-items:center; gap:10px; }
.pro-topbar-inner .pro-nav{ flex:1 1 auto; justify-content:center; }
.pro-topbar-inner .pro-cta{ flex:0 0 auto; display:flex; align-items:center; gap:10px; }
.pro-cta-btn{ height:38px; padding:0 14px !important; border-radius:999px !important; display:inline-flex !important; align-items:center; }
.pro-nav-link{ display:inline-flex !important; align-items:center; }


/* ===== V3.4 官方增强：登录/注册页 ===== */
.pro-auth-page{
  background: radial-gradient(1200px 600px at 50% 0%, rgba(45,126,255,.20), rgba(15,23,42,.02) 60%) , #f5f7fb !important;
  background-image: none !important;
}
.pro-auth-page #page-container{ background: transparent !important; }
.pro-auth-page .hero-static{ padding-top: 24px; padding-bottom: 64px; }
.pro-auth-card{
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 18px !important;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(15,23,42,.10) !important;
}
.pro-auth-card .block-header{
  background: transparent !important;
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
  padding: 16px 22px !important;
}
.pro-auth-card .block-title{
  font-weight: 750 !important;
  letter-spacing: .2px;
}
.pro-auth-card .nav-tabs-block .nav-link{
  border:0 !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  margin-right: 8px;
  background: rgba(15,23,42,.04) !important;
  color: rgba(15,23,42,.78) !important;
}
.pro-auth-card .nav-tabs-block .nav-link.active{
  background: rgba(45,126,255,.12) !important;
  color: rgba(45,126,255,1) !important;
  font-weight: 650;
}
.pro-auth-card .form-control{
  border-radius: 12px !important;
  height: 44px;
  border-color: rgba(15,23,42,.10) !important;
}
.pro-auth-card .btn-block{
  height: 46px;
  border-radius: 999px !important;
  font-weight: 650;
}
.pro-auth-page .pro-topbar--solid{
  background: rgba(255,255,255,.85) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(15,23,42,.08);
}

/* ===== 页脚 ===== */
#page-footer{ padding-top: 1.2rem; padding-bottom: 1.2rem; }

/* ===== 用户中心（带背景图时更干净） ===== */
#page-container{ background: rgba(255,255,255,.92); }

/* ===== 移动端 ===== */
@media (max-width: 768px){
  .hero-title{ font-size: 40px; letter-spacing: 1px; }
  .content.content-full{ padding-top: 3.2rem; padding-bottom: 3.2rem; }
  .btn-hero{ width: 90%; max-width: 360px; margin: 10px auto 0 !important; display:block; }
  .btn-hero + .btn-hero{ margin-left: 0 !important; }
  .block-content{ padding: 1.25rem 1.25rem; }
}


/* ===== 顶部导航（云厂商官网感） ===== */
.pro-topbar{
  width:100%;
  z-index: 1030;
}
.pro-topbar--overlay{
  position:absolute;
  top:0; left:0;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 100%);
}
.pro-topbar--solid{
  position: fixed;
  top:0; left:0;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.pro-has-topbar{ padding-top: 74px; }

.pro-brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none !important;
}
.pro-brand-text{
  font-weight: 800;
  letter-spacing: .8px;
  color: rgba(0,0,0,.86);
}
.pro-topbar--overlay .pro-brand-text{ color: rgba(255,255,255,.95); }

.pro-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  column-gap: 28px;
  row-gap: 10px;
}
.pro-nav a{
  color: rgba(0,0,0,.74);
  font-weight: 650;
  letter-spacing: .2px;
  text-decoration:none !important;
  padding: 10px 2px;
  margin: 0 12px; /* gap fallback */
  border-bottom: 2px solid transparent;
}
.pro-nav a:hover{
  color: rgba(0,0,0,.92);
  border-bottom-color: rgba(45,126,255,.6);
}
.pro-topbar--overlay .pro-nav a{
  color: rgba(255,255,255,.88);
}
.pro-topbar--overlay .pro-nav a:hover{
  color: #fff;
  border-bottom-color: rgba(255,255,255,.65);
}

.pro-cta{ gap:10px; }
.pro-cta-btn{
  border-radius: 999px !important;
  padding: 9px 14px !important;
  font-weight: 700 !important;
}
.pro-topbar--overlay .btn-outline-primary{
  color:#fff !important;
  border-color: rgba(255,255,255,.55) !important;
  background: rgba(255,255,255,.06);
}
.pro-topbar--overlay .btn-outline-primary:hover{
  background: rgba(255,255,255,.14);
}

/* ===== 页脚（云厂商官网分栏） ===== */
.pro-footer{
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.06);
}
.pro-footer-brand{
  display:flex; align-items:center; gap:10px;
  font-size: 18px;
}
.pro-footer-title{
  font-weight: 800;
  letter-spacing: .4px;
  margin-bottom: 12px;
  color: rgba(0,0,0,.86);
}
.pro-footer-link{
  display:block;
  padding: 6px 0;
  color: rgba(0,0,0,.62);
  text-decoration:none !important;
}
.pro-footer-link:hover{ color: rgba(0,0,0,.92); }

.pro-footer-badge{
  display:inline-flex;
  align-items:center;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 999px;
  padding: 8px 12px;
  margin: 6px 10px 0 0;
  font-size: 13px;
  color: rgba(0,0,0,.70);
  text-decoration:none !important;
  background: rgba(255,255,255,.72);
}
.pro-footer-badge:hover{
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
.pro-footer-bottom{
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.pro-footer-link-inline{
  color: rgba(0,0,0,.55);
  text-decoration:none !important;
}
.pro-footer-link-inline:hover{ color: rgba(0,0,0,.85); }

@media (max-width: 768px){
  .pro-has-topbar{ padding-top: 66px; }
}


/* ===== V3 Cloud Official Enhancements ===== */
:root{
  --pro-primary:#2563eb;          /* 企业蓝 */
  --pro-primary-600:#1d4ed8;
  --pro-primary-700:#1e40af;
  --pro-accent:#06b6d4;           /* 青色点缀 */
  --pro-bg:#0b1220;               /* 深底 */
  --pro-surface:#0f172a;          /* 深卡片 */
}

/* 强制把 OneUI 的 primary 从“红”拉回企业蓝 */
.text-primary{ color: var(--pro-primary) !important; }
.bg-primary{ background-color: var(--pro-primary) !important; }
.badge-primary{ background-color: rgba(37,99,235,.12) !important; color: var(--pro-primary) !important; border:1px solid rgba(37,99,235,.18) !important; }
.btn-primary{
  background: linear-gradient(180deg, var(--pro-primary) 0%, var(--pro-primary-600) 100%) !important;
  border-color: rgba(37,99,235,.35) !important;
  box-shadow: 0 10px 26px rgba(37,99,235,.22);
}
.btn-primary:hover{
  background: linear-gradient(180deg, var(--pro-primary-600) 0%, var(--pro-primary-700) 100%) !important;
}
.btn-outline-primary{
  color: var(--pro-primary) !important;
  border-color: rgba(37,99,235,.45) !important;
}
.btn-outline-primary:hover{
  background: rgba(37,99,235,.08) !important;
}

/* 顶部导航：更像云厂商 */
.pro-topbar{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(15,23,42,.06);
}
.pro-topbar--overlay{
  position:absolute;
  left:0; right:0; top:0;
  background: rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.pro-topbar .content,
.pro-topbar .content-full{
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
.pro-brand{
  display:flex; align-items:center;
  font-weight: 700;
  letter-spacing:.2px;
}
.pro-brand .pro-brand-text{
  font-size: 15px;
  color: rgba(15,23,42,.92);
}
.pro-topbar--overlay .pro-brand .pro-brand-text{
  color: rgba(255,255,255,.92);
}
.pro-nav a{
  padding: 10px 14px;
  border-radius: 10px;
  color: rgba(15,23,42,.72);
  font-weight: 500;
  letter-spacing:.2px;
}
.pro-topbar--overlay .pro-nav a{ color: rgba(255,255,255,.86); }
.pro-nav a:hover{
  color: rgba(15,23,42,.92);
  background: rgba(15,23,42,.04);
}
.pro-topbar--overlay .pro-nav a:hover{ background: rgba(255,255,255,.10); color:#fff; }

/* 首页 Hero：高级深色渐变 + 网格纹理 */
.hero-pro{
  position: relative;
  min-height: 86vh;
  display:flex;
  align-items:center;
  background:
    radial-gradient(1200px 600px at 50% 20%, rgba(37,99,235,.42) 0%, rgba(37,99,235,0) 60%),
    radial-gradient(900px 500px at 18% 30%, rgba(6,182,212,.25) 0%, rgba(6,182,212,0) 55%),
    linear-gradient(180deg, #0b1220 0%, #0a1020 60%, #070b14 100%);
}
.hero-pro:before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .30;
  pointer-events:none;
}
.hero-pro:after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
}
.hero-pro .hero-inner{ position:relative; z-index:1; }

.hero-title{
  font-size: 60px;
  font-weight: 800;
  letter-spacing: 2px;
  line-height: 1.12;
  margin-bottom: 18px;
  text-shadow: 0 18px 60px rgba(0,0,0,.55);
}
.hero-subtitle{
  font-size: 18px;
  color: rgba(255,255,255,.80);
  max-width: 760px;
  margin: 0 auto 44px;
  line-height: 1.85;
}
.btn-hero{
  padding: 14px 40px !important;
  font-size: 16px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing:.2px;
}
.btn-outline-light.btn-hero{
  border-color: rgba(255,255,255,.38) !important;
  color: rgba(255,255,255,.92) !important;
}
.btn-outline-light.btn-hero:hover{ background: rgba(255,255,255,.10) !important; }

/* 内页：减少“大片空白”，统一页头标题样式 */
#main-container{
  background: linear-gradient(180deg, rgba(15,23,42,.02) 0%, rgba(15,23,42,0) 420px);
}
#main-container .content{
  max-width: 1240px;
  margin-left:auto;
  margin-right:auto;
}
#main-container .content > h1.text-primary{
  font-size: 40px;
  font-weight: 800;
  color: rgba(15,23,42,.92) !important;
  margin: 22px 0 10px;
  letter-spacing:.6px;
}
#main-container .content > h2.content-heading{
  font-size: 16px;
  font-weight: 500;
  color: rgba(15,23,42,.58) !important;
  margin-top: 0;
  margin-bottom: 26px;
  border: 0 !important;
  padding: 0 !important;
}

/* 产品卡片：更像云厂商的“规格卡” */
.block.block-rounded{
  border-radius: 16px !important;
}
.block{
  background: #fff;
}
.block .block-header{
  padding: 16px 18px;
}
.block .block-title{
  font-size: 14px;
  color: rgba(15,23,42,.84);
}
.block-content{
  padding: 18px 20px !important;
}
.table thead th{
  color: rgba(15,23,42,.66) !important;
  font-weight: 600;
}
.table td, .table th{
  padding: 14px 14px;
}

/* 页脚：云厂商深色分栏 */
.pro-footer{
  background: linear-gradient(180deg, #070b14 0%, #060911 100%) !important;
  color: rgba(255,255,255,.82) !important;
  border-top: 1px solid rgba(255,255,255,.08);
}
.pro-footer .text-muted{ color: rgba(255,255,255,.58) !important; }
.pro-footer-title{
  color: rgba(255,255,255,.88) !important;
  font-weight: 700;
  letter-spacing:.3px;
}
.pro-footer-link{
  color: rgba(255,255,255,.65) !important;
}
.pro-footer-link:hover{ color: #fff !important; }
.pro-footer-badge{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.84) !important;
}
.pro-footer-bottom{
  border-top: 1px solid rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.55) !important;
}

/* 右下角浮动按钮：更克制 */
.pro-float-cta{
  box-shadow: 0 18px 55px rgba(15,23,42,.25) !important;
  background: linear-gradient(180deg, var(--pro-primary) 0%, var(--pro-primary-600) 100%) !important;
}


/* ===== V3.2 NAV SPACING (force) ===== */
.pro-header .pro-nav{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;column-gap:32px;row-gap:10px;}
.pro-header .pro-nav a{display:inline-block;margin:0 14px !important;}
@media (max-width: 768px){.pro-header .pro-nav{column-gap:18px;}.pro-header .pro-nav a{margin:0 10px !important;}}


/* ===== Flux Pro Unified UI V3.3 Official Polish ===== */
:root{
  --pro-primary:#1f6fff;
  --pro-primary-2:#0b4bd6;
  --pro-text:#1d232f;
  --pro-muted:#5b6475;
  --pro-border:rgba(15,23,42,.10);
  --pro-card-shadow:0 18px 55px rgba(15,23,42,.08);
}

/* Header / Nav (force spacing even when theme overrides) */
.pro-topbar{ position: sticky; top:0; z-index: 50; backdrop-filter: saturate(180%) blur(10px); }
.pro-topbar .content-full{ max-width: 1240px; margin: 0 auto; }
.pro-nav{ display:flex !important; align-items:center !important; justify-content:center !important; flex-wrap:wrap !important; }
.pro-topbar .pro-nav{ column-gap: 32px !important; row-gap: 10px !important; }
.pro-topbar .pro-nav a,
.pro-topbar .pro-nav .pro-nav-link{
  display:inline-flex !important;
  align-items:center !important;
  height: 44px !important;
  padding: 0 16px !important;  /* spacing that cannot be “collapsed” */
  margin: 0 6px !important;    /* extra保险 */
  border-radius: 999px !important;
  color: var(--pro-text) !important;
  font-weight: 500 !important;
  letter-spacing: .2px;
}
.pro-topbar .pro-nav a:hover,
.pro-topbar .pro-nav .pro-nav-link:hover{
  background: rgba(31,111,255,.08) !important;
  color: var(--pro-primary) !important;
}
.pro-topbar .pro-brand{ display:flex !important; align-items:center !important; gap:10px; }
.pro-topbar .pro-brand i{ font-size: 14px; }
.pro-topbar .pro-brand-text{ color: var(--pro-text) !important; font-weight: 700; letter-spacing:.4px; }

/* Right CTA button */
.pro-topbar .pro-cta .btn{
  height: 40px !important;
  border-radius: 10px !important;
  padding: 0 14px !important;
  font-weight: 600 !important;
}
.pro-topbar .pro-cta .btn-outline-primary{
  border-color: rgba(31,111,255,.35) !important;
  color: var(--pro-primary) !important;
}
.pro-topbar .pro-cta .btn-outline-primary:hover{
  background: rgba(31,111,255,.08) !important;
}

/* Hero: make it official even without background image */
.bg-image{
  background-color: #0b1220;
  background-image:
    radial-gradient(1200px 600px at 50% 30%, rgba(31,111,255,.35), rgba(0,0,0,0)),
    radial-gradient(900px 450px at 20% 80%, rgba(43,195,255,.18), rgba(0,0,0,0)),
    linear-gradient(180deg, rgba(8,13,26,.86), rgba(8,13,26,.92));
  background-size: cover;
}
.hero-pro{ min-height: 72vh; }
.hero-title{ font-size: 56px !important; font-weight: 800 !important; letter-spacing: 1.8px; }
.hero-subtitle{ color: rgba(255,255,255,.82) !important; }
.btn-hero{
  height: 48px !important;
  padding: 0 28px !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}
.btn-hero.btn-primary{
  background: linear-gradient(135deg, var(--pro-primary), var(--pro-primary-2)) !important;
  border-color: transparent !important;
}
.btn-hero.btn-outline-light{ border-color: rgba(255,255,255,.35) !important; }

/* Hero bottom slogan strip */
.pro-hero-bottom{
  padding-top: 26px !important;
  padding-bottom: 26px !important;
  background: linear-gradient(90deg, rgba(31,111,255,.12), rgba(255,255,255,0));
  border-top: 1px solid rgba(255,255,255,.10);
}

/* Cards / Tables look more official */
.block, .card-pro, .pro-card{
  border: 1px solid var(--pro-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--pro-card-shadow) !important;
}
.table thead th{
  background: rgba(15,23,42,.03) !important;
  border-bottom: 1px solid var(--pro-border) !important;
  color: var(--pro-muted) !important;
  font-weight: 700 !important;
}
.table td{ border-top: 1px solid rgba(15,23,42,.06) !important; }

/* Footer: darker + link colors */
.pro-footer{
  background: linear-gradient(180deg, #0b1220, #070b14) !important;
  color: rgba(255,255,255,.82) !important;
}
.pro-footer a{ color: rgba(255,255,255,.78) !important; }
.pro-footer a:hover{ color: #fff !important; }
.pro-footer .text-muted{ color: rgba(255,255,255,.60) !important; }

/* Global primary color override to remove “red” */
.text-primary{ color: var(--pro-primary) !important; }
.btn-primary{
  background: linear-gradient(135deg, var(--pro-primary), var(--pro-primary-2)) !important;
  border-color: transparent !important;
}
.badge-primary, .bg-primary{
  background: linear-gradient(135deg, var(--pro-primary), var(--pro-primary-2)) !important;
}


/* ===== V3.5 一次性修复：顶部背景不一致 + 内页黑条 + 登录注册官方化 ===== */

/* 1) 内页(body带pro-has-topbar)统一浅色背景，去掉模板设置的背景图(避免空url导致黑条) */
body.pro-has-topbar.bg-image{
  background-image: none !important;
  background-color: #f5f7fb !important;
}

/* 登录/注册页保持自己的官方渐变，但也避免被bg-image覆盖 */
body.pro-auth-page.bg-image{
  background-image: none !important;
}

/* 2) 顶部导航栏：固定、统一白底毛玻璃，确保不透出底色 */
.pro-topbar--solid{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
}

/* 3) Topbar 三段式布局：logo/中间导航/右侧按钮 全部垂直居中 */
.pro-topbar-inner{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 74px !important;
}
.pro-topbar-inner .pro-brand{ display:flex !important; align-items:center !important; gap:10px; }
.pro-topbar-inner .pro-nav{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex: 1 1 auto !important;
  min-width: 0;
}
.pro-topbar-inner .pro-cta{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap: 10px;
}

/* 4) 导航链接：用padding做间距(不依赖gap)，并避免换行挤压 */
.pro-topbar .pro-nav a,
.pro-topbar .pro-nav .pro-nav-link{
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 16px !important;
  height: 36px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  border-radius: 10px;
  color: #0f172a !important;
  font-weight: 500;
}
.pro-topbar .pro-nav a:hover,
.pro-topbar .pro-nav .pro-nav-link:hover{
  background: rgba(37,99,235,.08) !important;
  color: #1d4ed8 !important;
}

/* 5) 右侧按钮(登录/注册/控制台)垂直对齐 + 官方蓝 */
.pro-topbar .pro-cta a,
.pro-topbar .pro-cta .btn{
  display:inline-flex !important;
  align-items:center !important;
  height: 38px !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
}
.pro-topbar .pro-cta .btn-outline-primary{
  border-color: rgba(37,99,235,.35) !important;
  color: #2563eb !important;
  background: rgba(37,99,235,.05) !important;
}
.pro-topbar .pro-cta .btn-outline-primary:hover{
  background: rgba(37,99,235,.12) !important;
}
.pro-topbar .pro-cta .btn-primary{
  background: linear-gradient(90deg,#2563eb,#1d4ed8) !important;
  border: none !important;
  box-shadow: 0 10px 25px rgba(37,99,235,.22);
}

/* 6) 登录/注册卡片：去掉红/绿“廉价条”，统一成官方蓝头部 */
.pro-auth-page .block,
.pro-auth-page .pro-auth-card{
  border-radius: 18px !important;
  box-shadow: 0 30px 70px rgba(15,23,42,.12) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  overflow: hidden;
}
.pro-auth-page .block-header{
  background: linear-gradient(90deg,#2563eb,#1d4ed8) !important;
  color: #fff !important;
  border-bottom: none !important;
}
.pro-auth-page .block-header .block-title,
.pro-auth-page .block-header a,
.pro-auth-page .block-header span{
  color: #fff !important;
}

/* 7) 登录/注册页：把危险色(红/绿)弱化，按钮统一蓝 */
.pro-auth-page .btn-danger,
.pro-auth-page .btn-success,
.pro-auth-page .bg-danger,
.pro-auth-page .bg-success{
  background: linear-gradient(90deg,#2563eb,#1d4ed8) !important;
  border: none !important;
  color: #fff !important;
}
.pro-auth-page .nav-tabs .nav-link.active{
  background: rgba(255,255,255,.16) !important;
  border-color: transparent !important;
}



/* ===== V3.6 导航组件化 + Auth 双栏版 ===== */
/* 统一 Topbar 三段式：左LOGO / 中菜单 / 右CTA */
.pro-topbar .content-full{ max-width: 1280px; }
.pro-topbar-inner{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap: 16px;
}
.pro-topbar .pro-brand{ display:flex !important; align-items:center !important; gap:10px; min-width: 220px; }
.pro-topbar .pro-nav{ display:flex !important; align-items:center !important; justify-content:center !important; flex:1 1 auto; }
.pro-topbar .pro-cta{ display:flex !important; align-items:center !important; justify-content:flex-end !important; min-width: 220px; gap: 10px; }

/* 仅在顶部导航生效的链接样式（避免影响页脚） */
.pro-topbar .pro-nav a,
.pro-topbar .pro-brand,
.pro-topbar .pro-cta a{
  display:inline-flex !important;
  align-items:center !important;
  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}
.pro-topbar .pro-nav a{ color: #0f172a !important; font-weight: 600; letter-spacing:.2px; margin:0 6px; }
.pro-topbar .pro-nav a:hover{ background: rgba(37,99,235,.08) !important; color:#1d4ed8 !important; }
.pro-topbar .pro-cta a{ margin:0; }

/* 页脚：链接不要被“导航链接”样式污染 */
.pro-footer .pro-footer-link,
.pro-footer .pro-footer-badge{
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 10px;
}
.pro-footer .pro-footer-link{
  display:block;
  padding: 8px 0 !important;
  color: rgba(226,232,240,.86) !important;
}
.pro-footer .pro-footer-link:hover{ color:#fff !important; background: transparent !important; text-decoration: none; }
.pro-footer .pro-footer-title{ margin-bottom: 12px; }
.pro-footer .row{ align-items:flex-start; }

/* Auth 双栏布局（登录/注册/找回） */
.pro-auth-page .hero-static .content{ max-width: 1280px; }
.pro-auth-layout{ align-items: stretch; }
.pro-auth-side{
  border-radius: 18px;
  background: radial-gradient(900px 500px at 10% 10%, rgba(37,99,235,.35), rgba(2,6,23,.0) 60%),
              linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
  color: #e2e8f0;
  padding: 28px;
  box-shadow: 0 24px 60px rgba(2,6,23,.28);
}
.pro-auth-side-inner{ max-width: 420px; }
.pro-auth-logo{ display:flex; align-items:center; gap:10px; font-weight: 700; font-size: 18px; }
.pro-auth-logo i{ color:#60a5fa; }
.pro-auth-side-title{ margin-top: 18px; font-size: 28px; line-height:1.25; font-weight: 800; color:#fff; }
.pro-auth-side-desc{ margin-top: 10px; color: rgba(226,232,240,.82); line-height:1.75; }
.pro-auth-side-points{ margin-top: 18px; display:grid; gap:10px; font-weight: 500; }
.pro-auth-side-points i{ color:#34d399; margin-right: 8px; }

.pro-auth-cardcol{ display:flex; align-items:center; justify-content:center; }
.pro-auth-page .block{ border-radius: 18px !important; overflow: hidden; box-shadow: 0 24px 70px rgba(2,6,23,.16) !important; }
.pro-auth-page .block-header{
  background: linear-gradient(90deg, #2563eb 0%, #1d4ed8 45%, #0ea5e9 100%) !important;
  border: none !important;
}
.pro-auth-page .block-title{ color:#fff !important; font-weight: 700; }
.pro-auth-page .block-options a{ color: rgba(255,255,255,.9) !important; }
.pro-auth-page .block-options a:hover{ color:#fff !important; opacity: 1; }

/* 去掉表单页“怪异大空白/色带”的来源：禁止 bg-image 影响 auth */
.pro-auth-page.bg-image{ background-image:none !important; }



/* ===== V3.7 官方增强：Auth 双栏居中 + 更大表单 ===== */
.pro-auth-layout{
  justify-content: center;
  align-items: stretch;
  gap: 28px;
}
.pro-auth-side{
  border-radius: 22px;
  overflow: hidden;
  min-height: 560px;
}
.pro-auth-side-inner{
  width: 100%;
  padding: 36px 34px;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 22px;
  background: radial-gradient(900px 520px at 20% 0%, rgba(45,126,255,.22), rgba(15,23,42,.82) 55%) , #0b1220;
  box-shadow: 0 28px 70px rgba(15,23,42,.18);
}
.pro-auth-logo{ display:flex; align-items:center; gap:10px; color: rgba(255,255,255,.9); font-weight: 700; }
.pro-auth-logo i{ color: rgba(45,126,255,1); }
.pro-auth-side-title{ color:#fff; margin-top: 20px; font-size: 30px; letter-spacing: .3px; font-weight: 800; }
.pro-auth-side-desc{ color: rgba(255,255,255,.78); margin-top: 10px; line-height: 1.8; max-width: 420px; }
.pro-auth-side-points{ margin-top: 18px; color: rgba(255,255,255,.86); }
.pro-auth-side-points div{ display:flex; align-items:center; gap:10px; margin-top: 10px; }
.pro-auth-side-points i{ color: #22c55e; }

.pro-auth-cardcol{
  display:flex;
  justify-content:center;
}
.pro-auth-card{
  width: 100%;
  max-width: 540px;
}
.pro-auth-card .block-content{
  padding: 26px 28px !important;
}
.pro-auth-card h1,
.pro-auth-card h2,
.pro-auth-card h3{
  letter-spacing: .2px;
}
.pro-auth-card .form-control{
  height: 52px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
}
.pro-auth-card .btn{
  border-radius: 999px !important;
  height: 52px !important;
  font-weight: 800 !important;
  letter-spacing: .2px;
}

/* ===== V3.7 官方增强：页脚全宽对齐（防止被 content 容器限制） ===== */
.pro-footer{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: radial-gradient(1200px 600px at 50% 0%, rgba(45,126,255,.14), rgba(15,23,42,.86) 55%) , #0b1220;
  color: rgba(255,255,255,.86);
  border-top: 0;
}
.pro-footer .text-muted{ color: rgba(255,255,255,.68) !important; }
.pro-footer a{ color: rgba(255,255,255,.78); }
.pro-footer a:hover{ color: #fff; }

.pro-footer-title{ color: rgba(255,255,255,.92); }
.pro-footer-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.88) !important;
  border-radius: 999px;
  padding: 10px 14px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.pro-footer-badge:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.22);
}


/* ===== V3.9 Auth Dual-Column Enhancements ===== */
.pro-auth-layout-center{ justify-content: center; }
.pro-auth-layout-center{ gap: 22px; }
.pro-auth-cardcol > .block{ width:100%; max-width: 560px; }
.pro-auth-side{ min-height: 620px; display:flex; }
.pro-auth-side-inner{ display:flex; flex-direction:column; }
.pro-auth-side-points{ margin-top: 22px; }
.pro-auth-card .block-content{ padding: 22px 26px !important; }
.pro-auth-card h1{ font-size: 34px !important; line-height: 1.15 !important; font-weight: 850 !important; margin-bottom: 10px !important; }
.pro-auth-card p{ color: rgba(15,23,42,.72) !important; }
.pro-auth-card .form-control{ height: 52px !important; font-size: 15px !important; }
.pro-auth-card .input-group-text{ height: 52px !important; border-radius: 12px 0 0 12px !important; }
.pro-auth-card .btn{ height: 52px !important; border-radius: 14px !important; font-weight: 700 !important; }
@media (max-width: 991.98px){
  .pro-auth-cardcol > .block{ max-width: 620px; }
  .pro-auth-page .hero-static{ padding-top: 10px; }
}



/* =========================
   V4.0 Cloud Final - Auth
   - 登录/注册：双栏等高
   - 重置密码：单栏居中
   ========================= */
.pro-auth-page.pro-auth-dual .pro-auth-layout-dual{
  /* 双栏：使用 flex 让两侧等高，且精确控制间距 */
  display: flex;
  /* 永远左右双栏：不允许换行（避免变上下） */
  flex-wrap: nowrap;
  align-items: stretch;
  column-gap: 12px;
  row-gap: 16px;

  /* 统一左右卡片高度：注册/登录字段不同也不会“高低不齐” */
  --pro-auth-dual-h: clamp(660px, 78vh, 860px);

  /* 覆盖 bootstrap .row 的负 margin，避免左右留白不一致 */
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 移除 col 的左右 padding（bootstrap gutter），用 column-gap 统一控制中间距离 */
.pro-auth-page.pro-auth-dual .pro-auth-layout-dual > [class*='col-']{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 关键修复：左右列必须自己也是 flex 容器，否则内部卡片 height:100% 不会生效 */
.pro-auth-page.pro-auth-dual .pro-auth-layout-dual > [class*='col-']{
  display: flex;
  flex-direction: column;
}

/* 左侧品牌卡填满列高 */
.pro-auth-page.pro-auth-dual .pro-auth-side{ display:flex; flex-direction:column; }
.pro-auth-page.pro-auth-dual .pro-auth-side-inner{ flex: 1; }

/* 强制左右等高（以视口高度为准），内容超出则在右侧表单区滚动 */
.pro-auth-page.pro-auth-dual .pro-auth-side,
.pro-auth-page.pro-auth-dual .pro-auth-card{
  height: var(--pro-auth-dual-h);
  min-height: var(--pro-auth-dual-h);
}

/* 右侧表单卡填满列高 */
.pro-auth-page.pro-auth-dual .pro-auth-cardcol{ display:flex; flex-direction:column; }
.pro-auth-page.pro-auth-dual .pro-auth-card{ flex: 1; }

/* 双栏等高（关键）：左右卡片统一高度，避免注册/登录字段不同导致“高低不齐” */
.pro-auth-page.pro-auth-dual .pro-auth-side,
.pro-auth-page.pro-auth-dual .pro-auth-card{
  height: var(--pro-auth-dual-h);
  min-height: var(--pro-auth-dual-h);
}

/* 左侧内容容器占满高度 */
.pro-auth-page.pro-auth-dual .pro-auth-side-inner{
  height: 100%;
}

/* 右侧卡片内部布局：保持内容在上，底部留白；内容过多时只滚动表单区域 */
.pro-auth-page.pro-auth-dual .pro-auth-card{
  display: flex;
  flex-direction: column;
}

.pro-auth-page.pro-auth-dual .pro-auth-card .block-content{
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.pro-auth-page.pro-auth-dual .pro-auth-card .block-content > form{
  flex: 1;
}

/* 去掉 bootstrap 栅格的左右 gutter，让两栏更紧凑 */
.pro-auth-page.pro-auth-dual .pro-auth-layout-dual > [class*='col-']{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 永远左右双栏：强制两列各占 50%，覆盖 bootstrap 的 .col-12 width:100% */
.pro-auth-page.pro-auth-dual .pro-auth-layout-dual > [class*='col-']{
  flex: 0 0 50% !important;
  max-width: 50% !important;
  width: 50% !important;
}
.pro-auth-page.pro-auth-dual .pro-auth-side,
.pro-auth-page.pro-auth-dual .pro-auth-page-card{
  height: 100%;
}
.pro-auth-page.pro-auth-dual .pro-auth-side{ display:flex; }
.pro-auth-page.pro-auth-dual .pro-auth-side-inner{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height: 560px;
  width: 100%;
}

.pro-auth-page.pro-auth-single .pro-auth-layout-single{
  justify-content: center;
}
.pro-auth-page.pro-auth-single .pro-auth-cardcol{
  max-width: 560px;
}
.pro-auth-page.pro-auth-single .block{
  min-height: auto;
}
@media (max-width: 991.98px){
  /* 小屏也保持左右双栏：允许横向滚动，避免变上下 */
  .pro-auth-page.pro-auth-dual .pro-auth-wrap{ overflow-x: auto; }
  .pro-auth-page.pro-auth-dual .pro-auth-layout-dual{ min-width: 980px; }
}

/* 表单更“云厂商”一些：更高输入、更柔和边框 */
.pro-auth-page .form-control.form-control-lg{
  min-height: 52px;
  border-radius: 14px;
  border-color: rgba(15,23,42,.10);
}
.pro-auth-page .form-control.form-control-alt{
  background: rgba(248,250,252,.92);
}
.pro-auth-page .btn.btn-block{
  border-radius: 999px;
  padding-top: 12px;
  padding-bottom: 12px;
  font-weight: 700;
}

/* =========================
   V4.6 顶部导航（云厂商风格）
   - 更低高度
   - 蓝色官网顶栏
   - 下拉菜单（纯 CSS，方便你后续改链接）
   ========================= */

/* 顶部栏更紧凑 */
.pro-topbar{ height:56px !important; }
.pro-topbar .pro-topbar-inner{ min-height:56px !important; }

/* ===============================
   v4.7 顶部导航紧凑化 + MegaMenu 修复
   =============================== */

/* 顶部整体高度（更“官网”紧凑） */
.pro-has-topbar{ padding-top:60px !important; }
.pro-topbar{ height:60px !important; }
.pro-topbar .pro-topbar-inner{ min-height:60px !important; padding-top:0 !important; padding-bottom:0 !important; }
.pro-nav{ gap:10px !important; }
.pro-nav-item{ height:60px !important; line-height:60px !important; padding:0 10px !important; }

/* 云厂商风格下拉（header.html 里使用 has-dropdown + pro-dropdown） */
.pro-nav-item.has-dropdown{ position:relative; }
.pro-nav-item.has-dropdown .pro-dropdown{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%);
  width:min(920px, calc(100vw - 40px));
  background:#fff;
  border:1px solid rgba(16,24,40,.10);
  border-radius:16px;
  padding:16px;
  box-shadow:0 22px 60px rgba(16,24,40,.18);
  z-index:1200;
}
.pro-nav-item.has-dropdown:hover .pro-dropdown,
.pro-nav-item.has-dropdown:focus-within .pro-dropdown{
  display:block;
}
.pro-dropdown-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px 12px;
}
.pro-dropdown .pro-dropdown-title{
  font-size:12px;
  color:#475467;
  letter-spacing:.02em;
  font-weight:700;
  margin:2px 0 10px;
  opacity:.9;
}
.pro-dd-link{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  color:#101828;
  text-decoration:none;
  transition:background .15s ease, transform .15s ease;
}
.pro-dd-link:hover{ background:rgba(15,91,255,.06); transform:translateY(-1px); }
.pro-dd-link strong{ display:block; font-weight:700; font-size:14px; line-height:1.2; }
.pro-dd-link span{ display:block; font-size:12px; color:#667085; margin-top:4px; line-height:1.35; }

@media (max-width: 1024px){
  .pro-dropdown-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}


/* 顶栏主色 */
.pro-topbar--solid{
  background:#0b5cad;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.pro-topbar--solid .pro-brand-text{ color:rgba(255,255,255,.95); }
.pro-topbar--solid .pro-nav a{ color:rgba(255,255,255,.92); }
.pro-topbar--solid .pro-nav a:hover{ color:#fff; }
.pro-topbar--solid .pro-auth-actions .btn-outline-primary{
  color:#fff;
  border-color:rgba(255,255,255,.35);
  background:rgba(255,255,255,.08);
}
.pro-topbar--solid .pro-auth-actions .btn-outline-primary:hover{
  border-color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.14);
}
.pro-topbar--solid .pro-auth-actions .btn-primary{
  background:#1f6fff;
  border-color:#1f6fff;
  box-shadow:0 8px 18px rgba(31,111,255,.28);
}

/* 导航更小、更“官网” */
.pro-nav{ gap:10px !important; }
.pro-nav > .pro-nav-item{ position:relative; }
.pro-nav > .pro-nav-item > a{
  padding:8px 10px !important;
  border-radius:10px;
  font-weight:600;
  font-size:14px;
  letter-spacing:.2px;
}
.pro-nav > .pro-nav-item > a:hover{
  background:rgba(255,255,255,.10) !important;
}
.pro-nav .pro-nav-caret{
  margin-left:6px;
  font-size:12px;
  opacity:.85;
}

/* 下拉面板 */
.pro-nav-dropdown{
  position:absolute;
  left:50%;
  top:calc(100% + 10px);
  transform:translateX(-50%);
  min-width:260px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  padding:12px;
  box-shadow:0 18px 50px rgba(2,6,23,.22);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:all .18s ease;
}
.pro-nav-item:hover .pro-nav-dropdown,
.pro-nav-item:focus-within .pro-nav-dropdown{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  top:calc(100% + 6px);
}
.pro-nav-dropdown .pro-nav-dd-title{
  font-weight:800;
  color:#0f172a;
  font-size:14px;
  margin-bottom:4px;
}
.pro-nav-dropdown .pro-nav-dd-desc{
  color:rgba(15,23,42,.62);
  font-size:12px;
  margin-bottom:10px;
}
.pro-nav-dropdown a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:9px 10px;
  border-radius:12px;
  color:#0f172a !important;
  text-decoration:none;
  font-weight:600;
}
.pro-nav-dropdown a small{
  color:rgba(15,23,42,.55);
  font-weight:600;
}
.pro-nav-dropdown a:hover{
  background:rgba(31,111,255,.08);
}

/* 小屏仍保持左右：如需手机单列，把下面注释取消 */
/*
@media (max-width: 991.98px){
  .pro-auth-page.pro-auth-dual .pro-auth-layout-dual{ min-width: 0; }
  .pro-auth-page.pro-auth-dual .pro-auth-layout-dual{ display:block !important; }
}
*/


/* ===================== v4.8 顶部导航最终优化（单行、紧凑、官网感） ===================== */
/* 目标：
   1) 导航永远单行不换行（避免分成两排）
   2) 顶部高度更紧凑、视觉更“云厂商”
   3) MegaMenu 居中且不拉高页面
*/

/* 顶部条整体更紧凑 */
.pro-topbar{
  height: 58px !important; /* 原先有 74/60/56 多版本，统一为 58 */
  min-height: 58px !important;
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid rgba(16,24,40,.06);
}

/* 顶部容器：永远单行 */
.pro-topbar-inner{
  min-height: 58px !important;
  padding: 10px 0 !important;
  flex-wrap: nowrap !important;
  gap: 18px !important;
}

/* 左中右布局：更自然的云厂商结构 */
.pro-brand{ flex: 0 0 auto !important; min-width: 220px; }
.pro-nav-wrap{ flex: 1 1 auto !important; min-width: 0 !important; }
.pro-cta{ flex: 0 0 auto !important; }

/* 导航：不换行 + 更小高度 */
.pro-nav{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 26px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
.pro-nav-item{ position: relative; }

/* 让导航在窄屏也尽量不换行：不够时允许横向滚动（视觉上比换行更干净） */
@media (max-width: 1180px){
  .pro-nav{
    justify-content: flex-start !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pro-nav::-webkit-scrollbar{ display:none; }
}

/* 链接尺寸更“紧凑” */
.pro-nav-link{
  padding: 6px 4px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  color: rgba(16,24,40,.82) !important;
}
.pro-nav-link:hover{ color: #0b60ff !important; }

/* 下拉按钮箭头对齐 */
.pro-nav-link .caret,
.pro-nav-link .bi-chevron-down{
  margin-left: 6px !important;
  transform: translateY(-1px);
}

/* 右侧按钮更贴合且不抬高导航 */
.pro-cta{ gap: 10px !important; }
.pro-btn{
  height: 34px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  line-height: 34px !important;
}

/* MegaMenu：居中、轻阴影、不拉高页面（绝对定位） */
.pro-nav-item.has-dropdown > .pro-dropdown{
  top: calc(100% + 10px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  min-width: 760px !important;
  max-width: 920px !important;
  border: 1px solid rgba(16,24,40,.08) !important;
  box-shadow:
    0 20px 50px rgba(16,24,40,.12),
    0 2px 8px rgba(16,24,40,.06) !important;
  border-radius: 16px !important;
}

/* MegaMenu 内部：更官方的栅格 */
.pro-dropdown-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}
.pro-dd-col{
  padding: 12px 10px !important;
  border-radius: 12px;
}
.pro-dd-col:hover{ background: rgba(11,96,255,.04); }

.pro-dd-title{
  font-size: 14px !important;
  letter-spacing: .2px;
}
.pro-dd-link{
  padding: 7px 8px !important;
  border-radius: 10px !important;
}
.pro-dd-link:hover{ background: rgba(11,96,255,.06) !important; }

/* 下拉在更窄屏：自动变窄，避免溢出 */
@media (max-width: 980px){
  .pro-nav-item.has-dropdown > .pro-dropdown{
    min-width: 88vw !important;
    max-width: 92vw !important;
  }
  .pro-dropdown-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 640px){
  .pro-dropdown-grid{ grid-template-columns: 1fr !important; }
}

/* ===================== v4.8 顶部导航最终优化（单行、紧凑、官网感） ===================== */
/* 目标：
   1) 导航永远单行不换行（避免分成两排）
   2) 顶部高度更紧凑、视觉更“云厂商”
   3) MegaMenu 居中且不拉高页面
*/

/* 顶部条整体更紧凑 */
.pro-topbar{
  height: 58px !important; /* 原先有 74/60/56 多版本，统一为 58 */
  min-height: 58px !important;
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid rgba(17,24,39,.06) !important;
}
.pro-topbar-inner{
  min-height: 58px !important;
  padding: 0 18px !important;
  gap: 18px !important;
  flex-wrap: nowrap !important; /* 关键：禁止换行 */
}

/* Logo / 右侧按钮不要挤压导航 */
.pro-brand{ flex: 0 0 auto !important; min-width: 0 !important; }
.pro-cta{ flex: 0 0 auto !important; min-width: 0 !important; gap: 10px !important; }

/* 导航：永远单行，必要时横向滚动（不会掉到第二排） */
.pro-nav{
  flex: 1 1 auto !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -ms-overflow-style: none; /* IE/Edge */
  scrollbar-width: none; /* Firefox */
  padding: 0 !important;
}
.pro-nav::-webkit-scrollbar{ display:none; }
.pro-nav .pro-nav-list{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 22px !important;
  align-items: center !important;
  white-space: nowrap;
}

/* 菜单项更官方：更小的高度/更明确 hover */
.pro-nav-link{
  height: 34px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: .2px;
  line-height: 34px !important;
}
.pro-nav-link:hover{
  background: rgba(37,99,235,.08) !important;
}

/* 让下拉箭头更紧凑 */
.pro-nav-item.has-dropdown > .pro-nav-link::after,
.pro-nav-link.has-caret::after{
  margin-left: 6px !important;
  transform: translateY(1px);
}

/* MegaMenu：居中展示、不影响页面布局（绝对定位），宽度更像云厂商 */
.pro-nav-item{ position: relative !important; }
.pro-dropdown{
  top: calc(100% + 10px) !important;
  left: 50% !important;
  transform: translateX(-50%);
  min-width: 760px;
  max-width: min(960px, calc(100vw - 80px));
  border: 1px solid rgba(17,24,39,.08) !important;
  box-shadow: 0 18px 50px rgba(15,23,42,.12) !important;
  border-radius: 16px !important;
  overflow: hidden;
}

/* 下拉内容更紧凑，避免看起来“撑高” */
.pro-dropdown .pro-dd-grid{
  gap: 18px !important;
  padding: 18px !important;
}
.pro-dd-item{
  padding: 12px 12px !important;
  border-radius: 12px !important;
}
.pro-dd-title{ font-weight: 700 !important; }
.pro-dd-desc{ margin-top: 3px !important; line-height: 1.35 !important; }

/* 小屏：保持一行 + 可横滑；下拉宽度自动收缩 */
@media (max-width: 1024px){
  .pro-topbar-inner{ padding: 0 12px !important; gap: 12px !important; }
  .pro-nav .pro-nav-list{ gap: 14px !important; }
  .pro-dropdown{ min-width: 0; width: calc(100vw - 24px); max-width: calc(100vw - 24px); }
}

/* v4.8 统一顶部占位高度 */
.pro-has-topbar{ padding-top:58px !important; }


/* ===================== v4.9 顶部导航：云厂商玻璃态 + 更紧凑 ===================== */
.pro-topbar--glass{
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
}
/* 深色 Hero 背景下也保持可读性 */
.pro-topbar--glass .pro-nav-link,
.pro-topbar--glass .pro-brand-name{
  color: rgba(15,23,42,.92);
}
.pro-topbar--glass .pro-nav-caret{ color: rgba(15,23,42,.55); }
.pro-topbar--glass .pro-cta-login{ background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.25); }
.pro-topbar--glass .pro-cta-login:hover{ background: rgba(37,99,235,.12); }

/* 进一步压缩高度（避免“顶部太高”） */
.pro-topbar{ height: 54px; }
.pro-topbar-inner{ height: 54px; }
.pro-brand{ height: 54px; }
.pro-nav-link{ padding: 0 10px; font-size: 13.5px; }
.pro-cta-login, .pro-cta-register{ height: 34px; padding: 0 12px; font-size: 13px; }

/* 防止导航在部分页面被挤成两行：强制不换行 + 横向滚动兜底 */
.pro-nav{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pro-nav-list{ flex-wrap: nowrap !important; white-space: nowrap; }
.pro-nav::-webkit-scrollbar{ height: 0; }

/* 下拉菜单视觉升级（更像云厂商 MegaMenu） */
.pro-dropdown{
  top: calc(100% + 10px);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 20px 60px rgba(15,23,42,.18);
}
.pro-dropdown::before{
  content: "";
  position: absolute;
  top: -10px;
  left: 28px;
  width: 14px;
  height: 14px;
  background: #fff;
  transform: rotate(45deg);
  border-left: 1px solid rgba(15,23,42,.10);
  border-top: 1px solid rgba(15,23,42,.10);
}
.pro-dropdown-title{ letter-spacing: .2px; }
.pro-dropdown-item{ border-radius: 10px; }


/* ===================== v4.9 顶部导航：云厂商玻璃态 + 更紧凑 ===================== */
.pro-topbar--glass{
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
}

.pro-topbar--glass .pro-nav-link,
.pro-topbar--glass .pro-brand-name{
  color: rgba(15,23,42,.86);
}

.pro-topbar--glass .pro-nav-link:hover,
.pro-topbar--glass .pro-nav-item.is-active .pro-nav-link{
  color: var(--primary, #1d4ed8);
}

/* 下拉触发区更“紧凑”，避免撑高 */
.pro-topbar--glass .pro-nav-link{
  height: 42px;
  line-height: 42px;
}

/* 让下拉层永远悬浮，不影响页面流（避免出现你截图那种大空白） */
.pro-topbar--glass .pro-nav-item{ position: relative; }
.pro-topbar--glass .pro-dropdown{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(980px, calc(100vw - 32px));
}

/* 避免内容区顶部被 Header 盖住 */
body{ padding-top: 58px; }


/* ===================== v4.9 顶部导航：云厂商玻璃态 + 更紧凑 ===================== */
.pro-topbar--glass{
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
}

.pro-topbar--glass .pro-nav-link,
.pro-topbar--glass .pro-brand-name{
  color: rgba(15,23,42,.86);
}

.pro-topbar--glass .pro-nav-link:hover,
.pro-topbar--glass .pro-dropdown:hover > .pro-nav-link,
.pro-topbar--glass .pro-nav-link.is-active{
  color: var(--pro-blue);
}

/* 下拉层：更像云厂商（分栏、阴影、圆角、不会撑高页面） */
.pro-topbar--glass .pro-dropdown-menu{
  top: calc(100% + 10px);
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 18px 45px rgba(15,23,42,.16);
  border-radius: 16px;
}

/* 防止导航项在宽度不足时换行导致“第二行菜单” */
.pro-topbar .pro-nav{
  min-width: 0;
}
.pro-topbar .pro-nav-list{
  flex-wrap: nowrap !important;
  white-space: nowrap;
}

/* 顶部整体高度再压一点：更利落 */
.pro-topbar--glass .pro-topbar-inner{
  min-height: 56px;
}
.pro-topbar--glass .pro-nav-link{
  padding: 6px 10px;
}

/* 让 Logo/菜单/按钮在同一水平线（避免视觉“歪”） */
.pro-topbar .pro-topbar-inner,
.pro-topbar .pro-brand,
.pro-topbar .pro-nav,
.pro-topbar .pro-actions{
  align-items: center;
}

/* 移动端仍然保持单行横向滚动，不出现两行 */
@media (max-width: 900px){
  .pro-topbar .pro-nav{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pro-topbar .pro-nav::-webkit-scrollbar{ height: 0; }
}

/* v4.9 修复：顶部实际高度已压缩，但页面仍按旧高度预留空白，统一变量避免“顶端空一大块” */
:root{ --pro-topbar-h: 56px; }
@media (max-width: 900px){ :root{ --pro-topbar-h: 56px; } }

/* v5.0 顶部导航：行距/垂直居中严格修复（覆盖旧 padding 导致的“上下不居中/顶部空白”） */
.pro-topbar{ height: var(--pro-topbar-h) !important; }
.pro-topbar .content,
.pro-topbar .content-full{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.pro-topbar .pro-topbar-inner{
  height: var(--pro-topbar-h) !important;
  min-height: var(--pro-topbar-h) !important;
  align-items: center !important;
}
.pro-topbar .pro-brand,
.pro-topbar .pro-actions{
  display: flex;
  align-items: center;
}
/* 让菜单文字的“行距”稳定在中线，避免字体基线造成的视觉偏下 */
.pro-topbar .pro-nav-link{
  height: 36px !important;
  line-height: 36px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex;
  align-items: center;
}
/* 按钮也对齐同一中线 */
.pro-topbar .pro-btn{
  height: 36px !important;
  line-height: 36px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* ==========================================================================
   Marketing / Product Landing Pages (v2026.01)
   - 统一产品落地页风格：深蓝科技 Hero + SVG 机房背景 + 规格/场景/FAQ
   - 仅前端样式，不依赖后端改动
   ========================================================================== */

/* Topbar: 更像云厂商（深色玻璃态），与 SVG 机房 Hero 更协调 */
.pro-topbar--glass{
  background: rgba(7,20,40,.86) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.22) !important;
}
.pro-topbar--glass .pro-brand-text,
.pro-topbar--glass .pro-nav-link{
  color: rgba(255,255,255,.92) !important;
}
.pro-topbar--glass .pro-nav-link:hover{
  color: #fff !important;
}
.pro-topbar--glass .pro-caret{
  color: rgba(255,255,255,.70) !important;
}

/* Hero */
.pro-mk-hero{
  position: relative;
  overflow: hidden;
  padding: 52px 0 34px;
  background: radial-gradient(1200px 600px at 72% 20%, rgba(45,126,255,.22), rgba(45,126,255,0) 60%),
              linear-gradient(135deg, #071428 0%, #061B38 55%, #030817 100%);
  color: rgba(255,255,255,.94);
}
.pro-mk-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--pro-mk-bg, url('/static/assets/svg/datacenter/dc-room-01.svg'));
  background-repeat:no-repeat;
  background-position: right center;
  background-size: cover;
  opacity: .92;
  pointer-events:none;
  transform: translateZ(0);
}
.pro-mk-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(90deg, rgba(7,20,40,.95) 0%, rgba(7,20,40,.86) 46%, rgba(7,20,40,.50) 72%, rgba(7,20,40,0) 100%),
    var(--pro-mk-overlay, url('/static/assets/svg/datacenter/dc-lines-01.svg'));
  background-repeat:no-repeat, no-repeat;
  background-position:left top, center;
  background-size: cover, 1600px 900px;
  opacity: 1;
  pointer-events:none;
}

.pro-mk-hero .content{ position: relative; z-index: 2; padding-top: 26px; padding-bottom: 26px; }
.pro-mk-title{
  font-size: 46px;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.12;
  margin-bottom: 12px;
}
.pro-mk-subtitle{
  font-size: 16px;
  line-height: 1.9;
  color: rgba(255,255,255,.78);
  margin-bottom: 18px;
  max-width: 560px;
}
.pro-mk-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom: 18px;
}
.pro-mk-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.85);
  font-size: 13px;
  backdrop-filter: blur(8px);
}
.pro-mk-tag i{ opacity: .9; }

.pro-mk-ip{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 22px;
  color: rgba(255,255,255,.75);
  font-size: 14px;
}
.pro-mk-ip code{
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
  padding: 4px 10px;
  border-radius: 999px;
  color: rgba(255,255,255,.92);
}

.pro-mk-cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.pro-mk-cta .btn-hero{ padding: 12px 28px !important; }

.pro-mk-right{
  display:none;
}
@media (min-width: 992px){
  .pro-mk-hero{ padding: 60px 0 40px; }
  .pro-mk-title{ font-size: 56px; }
  .pro-mk-right{ display:block; }
}

/* Sections */
.pro-mk-section{
  padding: 56px 0;
}
.pro-mk-section--muted{
  background: radial-gradient(1000px 540px at 50% 0%, rgba(45,126,255,.06), rgba(255,255,255,0) 60%);
}
.pro-mk-section-title{
  font-weight: 800;
  letter-spacing: .2px;
  margin-bottom: 14px;
}
.pro-mk-section-desc{
  color: rgba(15,23,42,.70);
  line-height: 1.9;
  margin-bottom: 26px;
  max-width: 860px;
}

/* Feature cards */
.pro-mk-feature{
  height: 100%;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 40px rgba(15,23,42,.06) !important;
}
.pro-mk-feature .block-content{ padding: 22px 22px 18px !important; }
.pro-mk-feature .pro-ic{
  width: 46px; height: 46px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 14px;
  background: rgba(45,126,255,.10);
  border: 1px solid rgba(45,126,255,.18);
  margin-bottom: 12px;
}
.pro-mk-feature h3{
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 8px;
}
.pro-mk-feature p{ color: rgba(15,23,42,.70); line-height: 1.9; margin-bottom: 0; }

/* Plan cards */
.pro-plan{
  height: 100%;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.08);
  background: #fff;
  box-shadow: 0 18px 44px rgba(15,23,42,.06);
  overflow:hidden;
}
.pro-plan-hd{
  padding: 18px 20px 12px;
  border-bottom: 1px solid rgba(15,23,42,.06);
  background: linear-gradient(90deg, rgba(45,126,255,.08), rgba(255,255,255,0));
}
.pro-plan-name{ font-weight: 850; margin-bottom: 6px; }
.pro-plan-price{ color: rgba(15,23,42,.70); font-size: 13px; }
.pro-plan-bd{ padding: 16px 20px 18px; }
.pro-plan-bd ul{ padding-left: 18px; margin-bottom: 14px; color: rgba(15,23,42,.72); line-height: 1.85; }
.pro-plan-bd .btn{ border-radius: 999px; }

/* FAQ */
.pro-faq .block{
  border-radius: 18px !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 14px 36px rgba(15,23,42,.05) !important;
}
.pro-faq .block-title{ font-weight: 850 !important; }
.pro-faq .text-muted{ color: rgba(15,23,42,.70) !important; }

/* Small helpers */
.pro-divider-soft{
  height: 1px;
  background: linear-gradient(90deg, rgba(15,23,42,0), rgba(15,23,42,.10), rgba(15,23,42,0));
  margin: 18px 0;
}

/* Footer brand text contrast */
.pro-footer .pro-brand-text{ color: rgba(255,255,255,.92) !important; }

/* =======================================================================
   v2026.01.02 依据截图风格优化：顶部导航 + Hero 文案叠加背景图
   - 顶部导航固定在最上方
   - Hero 背景图从页面最顶部铺开（导航压在背景上）
   - Hero 内部留出导航高度的间距，避免遮挡标题
   ======================================================================= */

/* 1) 顶部导航：固定在页面顶部（match screenshot） */
.pro-topbar{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
}

/* 2) 普通页面：由 body 预留导航高度（避免内容被盖住） */
body.pro-has-topbar{
  padding-top: 74px !important;
}

/* 3) Hero 页：不在 body 预留高度，让 Hero 背景从最顶部开始铺开 */
body.pro-hero-top{
  padding-top: 0 !important;
}

/* 4) Hero 页：在 Hero 内部预留高度（标题不会被导航盖住） */
body.pro-hero-top .pro-mk-hero{
  padding-top: 128px !important;
}

/* 5) 顶部导航（深蓝玻璃态）：更贴近你截图那种“导航压在背景图上”的效果 */
.pro-topbar--glass{
  background: rgba(7, 20, 40, .78) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.18) !important;
}

/* 导航链接：去掉“白底胶囊”风，换成更像官网导航的 hover 轻高亮 */
.pro-topbar--glass .pro-nav-link{
  height: 44px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: rgba(255,255,255,.92) !important;
}
.pro-topbar--glass .pro-nav-link:hover{
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
}

/* 下拉菜单：深色面板 */
.pro-topbar--glass .pro-dropdown{
  background: rgba(7,20,40,.96) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.35) !important;
}
.pro-topbar--glass .pro-dd-link{
  color: rgba(255,255,255,.88) !important;
}
.pro-topbar--glass .pro-dd-link:hover{
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
}

/* 6) Hero（照片风格）：更像你截图的“右侧机房照片 + 左侧渐变遮罩” */
.pro-mk-hero.pro-mk-hero--photo{
  min-height: 520px;
  display: flex;
  align-items: center;
}

/* 让背景图更像真实照片（opacity 不要太低） */
.pro-mk-hero.pro-mk-hero--photo::before{
  opacity: 1;
  background-position: right center;
  background-size: cover;
}

/* 覆盖掉线条 overlay，改成更干净的遮罩（截图风格更接近） */
.pro-mk-hero.pro-mk-hero--photo::after{
  background-image:
    linear-gradient(90deg,
      rgba(7,20,40,.98) 0%,
      rgba(7,20,40,.92) 44%,
      rgba(7,20,40,.62) 70%,
      rgba(7,20,40,0) 100%
    );
  background-repeat: no-repeat;
  background-position: left top;
  background-size: cover;
}

/* 右侧“产品要点”卡片：与截图一致，默认隐藏（如果你后面想显示可删掉这一条） */
.pro-mk-hero.pro-mk-hero--photo .pro-mk-right{
  display: none !important;
}

/* 移动端：Hero 更紧凑 */
@media (max-width: 768px){
  body.pro-hero-top .pro-mk-hero{ padding-top: 110px !important; }
  .pro-mk-hero.pro-mk-hero--photo{ min-height: 460px; }
  .pro-mk-title{ font-size: 40px; }
}

/* OneUI 自带 page-header-fixed 会给 #main-container 顶部加 60px（用于 #page-header）。
   我们用自己的顶部导航，所以在公共营销页里把这段 padding 去掉，避免 Hero 下移。 */
#page-container.page-header-fixed.flux-public-container #main-container{
  padding-top: 0 !important;
}

/* 照片风格 Hero：默认不展示标签条（更接近你截图：只保留标题/文案/测试IP） */
.pro-mk-hero.pro-mk-hero--photo .pro-mk-meta{
  display: none !important;
}


/* =======================================================================
   v2026.01.02b 依据最新需求：所有页面“顶部导航在上方 + 下方 Hero 背景图 + 文案”
   - 顶部导航不再压住 Hero（避免导航盖住背景图/文案）
   - 采用 sticky（既在顶部，也不会破坏文档流）
   - 导航背景改为实心深蓝（更接近截图：导航下面再是背景图）
   ======================================================================= */

/* 顶部导航：sticky，保持在顶部但仍占位（Hero 会自然出现在导航下方） */
.pro-topbar{
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
}

/* 取消之前为 fixed 导航预留的 body padding */
body.pro-has-topbar{
  padding-top: 0 !important;
}
body.pro-hero-top{
  padding-top: 0 !important;
}
body.pro-hero-top .pro-mk-hero{
  padding-top: 52px !important; /* 回归默认 Hero 上内边距，避免出现“多出来的空白” */
}
@media (min-width: 992px){
  body.pro-hero-top .pro-mk-hero{ padding-top: 60px !important; }
}

/* 导航“玻璃态”改为实心深蓝（截图风格：导航是深蓝条，背景图从导航下方开始更直观） */
.pro-topbar--glass{
  background: #071428 !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.18) !important;
}

/* Hero：让它紧贴导航下方（避免 OneUI/组件带来的 margin） */
.pro-mk-hero{ margin-top: 0 !important; }


/* ===================== v7.1 官方视觉增强：Hero 文案可读性 + 顶部导航暗色玻璃态 ===================== */

:root{
  --pro-brand: #2d7eff;
  --pro-hero-ink: rgba(255,255,255,.94);
  --pro-hero-sub: rgba(255,255,255,.80);
  --pro-hero-muted: rgba(255,255,255,.66);
}

/* 更“官方”的字体与抗锯齿（不依赖外部字体） */
html, body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========== 深色 Hero：标题/描述更清晰、更有层次 ========== */
.pro-mk-hero{
  color: var(--pro-hero-ink) !important;
}

/* 即使用户没加 class，也强制 Hero 内 h1/p 可读 */
.pro-mk-hero h1,
.pro-mk-hero .pro-mk-title{
  color: #fff !important;
  text-shadow: 0 10px 30px rgba(0,0,0,.36);
}

.pro-mk-hero p,
.pro-mk-hero .pro-mk-subtitle{
  color: var(--pro-hero-sub) !important;
  text-shadow: 0 6px 18px rgba(0,0,0,.28);
}

/* 测试 IP 区块 */
.pro-mk-hero .pro-mk-ip{
  color: rgba(255,255,255,.82) !important;
}
.pro-mk-hero .pro-mk-ip code{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.20);
  color: rgba(255,255,255,.94);
}

/* 标签（小胶囊）更像云厂商风格 */
.pro-mk-hero .pro-mk-tag{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
}

/* Hero 按钮更“企业” */
.pro-mk-hero .btn-hero.btn-primary{
  box-shadow: 0 14px 34px rgba(37,99,235,.34);
  border: 1px solid rgba(255,255,255,.12);
}
.pro-mk-hero .btn-hero.btn-outline-light{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.24) !important;
  color: rgba(255,255,255,.92) !important;
}
.pro-mk-hero .btn-hero.btn-outline-light:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.38) !important;
}

/* ========== 顶部导航：在 Hero 顶部时改为深色玻璃态（更官方） ========== */
body.pro-hero-top .pro-topbar--glass{
  background: rgba(7,20,40,.76);
  border-bottom: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 34px rgba(0,0,0,.30);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

body.pro-hero-top .pro-topbar--glass .pro-brand-text,
body.pro-hero-top .pro-topbar--glass .pro-nav-link{
  /* 顶部导航字体纯白（官方感更强） */
  color: #fff !important;
}
body.pro-hero-top .pro-topbar--glass .pro-nav-link:hover{
  color: #fff !important;
}
body.pro-hero-top .pro-topbar--glass .pro-nav-caret{
  color: rgba(255,255,255,.62) !important;
}

/* 兼容：模板里下拉箭头使用 .pro-caret */
body.pro-hero-top .pro-topbar--glass .pro-caret{
  color: rgba(255,255,255,.78) !important;
}

/* Brand 更像“官方”圆角胶囊 */
body.pro-hero-top .pro-topbar--glass .pro-brand{
  padding: 6px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

/* 顶部右侧按钮：深色背景下的可读性 */
body.pro-hero-top .pro-topbar--glass .pro-cta-btn.btn-outline-primary{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.92);
}
body.pro-hero-top .pro-topbar--glass .pro-cta-btn.btn-outline-primary:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.34);
}

/* 注册按钮稍微“更亮”一点 */
body.pro-hero-top .pro-topbar--glass .pro-cta-btn.btn-primary{
  box-shadow: 0 12px 28px rgba(37,99,235,.28);
}


/* v7.1 Hero 背景图质感增强 */

/* 背景图更有“官方质感”：轻微提升对比与饱和（不影响文字） */
.pro-mk-hero.pro-mk-hero--photo::before{
  filter: saturate(1.06) contrast(1.04) brightness(.96);
}

/* =======================================================================
   v2026.01.03 FIX
   目标：
   1) 顶部导航（Logo / 菜单 / 右侧按钮）间距更合理，避免挤压导致“被遮挡/换行被裁切”
   2) 顶部下拉菜单：统一深色玻璃态面板 + 阴影 + 小箭头 + 不被父容器裁切
   说明：本段放在文件末尾，作为最终覆盖层（不需要去逐段删旧版本规则）。
   ======================================================================= */

/* 统一顶部高度，避免旧版本(56/60/74)混用 */
:root{ --pro-topbar-h: 64px; --pro-nav-gap: 18px; --pro-nav-link-px: 12px; }

/* 顶部容器：可见溢出，避免下拉被裁切 */
.pro-topbar{ height: var(--pro-topbar-h) !important; z-index: 10000 !important; }
.pro-topbar,
.pro-topbar .content,
.pro-topbar .content-full,
.pro-topbar .pro-topbar-inner{ overflow: visible !important; }

/* 去掉 OneUI/模板在 content 上的左右 padding 挤压（内层统一用 pro-topbar-inner 控制） */
.pro-topbar .content,
.pro-topbar .content-full{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 三段式布局：留出间距，避免菜单贴边/被右侧按钮挤压 */
.pro-topbar .pro-topbar-inner{
  height: var(--pro-topbar-h) !important;
  min-height: var(--pro-topbar-h) !important;
  padding: 0 20px !important;
  gap: 14px !important;
  align-items: center !important;
}
.pro-topbar .pro-brand{ flex: 0 0 auto !important; }
.pro-topbar .pro-nav{ flex: 1 1 auto !important; min-width: 0 !important; justify-content: center !important; }
.pro-topbar .pro-cta{ flex: 0 0 auto !important; }

/* 菜单：用 gap + padding 控制“水平间距”，更紧凑不挤压 */
.pro-topbar .pro-nav{ column-gap: var(--pro-nav-gap) !important; row-gap: 10px !important; }
.pro-topbar .pro-nav-link{
  height: 40px !important;
  line-height: 40px !important;
  padding: 0 var(--pro-nav-link-px) !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* 页面占位：统一跟随 --pro-topbar-h */
body.pro-has-topbar{ padding-top: var(--pro-topbar-h) !important; }
body.pro-hero-top{ padding-top: 0 !important; }
body.pro-hero-top .pro-mk-hero{ padding-top: calc(var(--pro-topbar-h) + 64px) !important; }

/* ===================== 顶部下拉菜单（深色玻璃态） ===================== */
.pro-nav-item.has-dropdown{ position: relative !important; }

/* 默认隐藏，hover / focus-within 展开（桌面端） */
.pro-nav-item.has-dropdown > .pro-dropdown{
  display: none !important;
  position: absolute !important;
  top: calc(100% + 12px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 360px;
  max-width: calc(100vw - 24px);
  padding: 10px !important;
  border-radius: 14px !important;
  z-index: 10050 !important;
  overflow: hidden;
}
.pro-nav-item.has-dropdown:hover > .pro-dropdown,
.pro-nav-item.has-dropdown:focus-within > .pro-dropdown{ display: block !important; }

/* 面板外观（跟截图一致：深蓝玻璃态） */
.pro-topbar--glass .pro-nav-item.has-dropdown > .pro-dropdown{
  background: rgba(7,20,40,.96) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.35) !important;
}

/* 小箭头 */
.pro-topbar--glass .pro-nav-item.has-dropdown > .pro-dropdown::before{
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: rgba(7,20,40,.96);
  border-left: 1px solid rgba(255,255,255,.10);
  border-top: 1px solid rgba(255,255,255,.10);
}

/* 下拉项（标题+描述的两行结构） */
.pro-dd-link{
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  padding: 12px 12px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
}
.pro-topbar--glass .pro-dd-link{ color: rgba(255,255,255,.90) !important; }
.pro-topbar--glass .pro-dd-link:hover{ background: rgba(255,255,255,.10) !important; color:#fff !important; }
.pro-dd-desc{ font-size: 12px; opacity: .75; line-height: 1.35; }

/* caret 动效 */
.pro-nav-item.has-dropdown > .pro-nav-link .pro-caret{ transition: transform .15s ease; }
.pro-nav-item.has-dropdown:hover > .pro-nav-link .pro-caret,
.pro-nav-item.has-dropdown:focus-within > .pro-nav-link .pro-caret{ transform: rotate(180deg); }

/* 小屏：避免下拉超出屏幕（仍然保留 hover/focus-within 逻辑） */
@media (max-width: 1024px){
  :root{ --pro-nav-gap: 12px; --pro-nav-link-px: 10px; }
  .pro-nav-item.has-dropdown > .pro-dropdown{ width: min(420px, calc(100vw - 24px)); }
}


/* =======================================================================
   v2026.01.03 MEGA MENU
   目标：按菜单设置下拉“列数”
   - 立即选购：1列（dd-cols-1）
   - 云服务器：2列（dd-cols-2）
   - 服务器租用：4列（dd-cols-4）
   - 安全防护：1列（dd-cols-1）
   - 公司介绍：1列（dd-cols-1）
   - 数据中心：无下拉（不加 has-dropdown）
   使用方式：在 .pro-nav-item 上加 dd-cols-1 / dd-cols-2 / dd-cols-4
   ======================================================================= */

/* 下拉改为 Grid（列数由 dd-cols-* 控制） */
.pro-nav-item.has-dropdown > .pro-dropdown{
  /* 覆盖上一个修复段里的 display:block；这里统一用 grid */
  display: none !important;
  gap: 10px !important;
  grid-auto-flow: row;
  align-items: stretch;
}

/* hover / focus-within 展开：用 grid 展示 */
.pro-nav-item.has-dropdown:hover > .pro-dropdown,
.pro-nav-item.has-dropdown:focus-within > .pro-dropdown{
  display: grid !important;
}

/* 默认：与截图一致，靠左对齐（宽菜单再单独居中） */
.pro-nav-item.has-dropdown > .pro-dropdown{
  left: 0 !important;
  transform: none !important;
}

/* 列数与宽度（桌面端） */
.pro-nav-item.dd-cols-1 > .pro-dropdown{
  grid-template-columns: 1fr;
  width: 340px !important;
}
.pro-nav-item.dd-cols-2 > .pro-dropdown{
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  width: 560px !important;
}
.pro-nav-item.dd-cols-4 > .pro-dropdown{
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  width: 960px !important;
  /* 4列通常更宽：居中更不容易溢出 */
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* 让每个下拉项像“卡片”，视觉更统一 */
.pro-dd-link{
  min-height: 64px;
  justify-content: center;
}

/* 响应式：宽度不够时自动降列 */
@media (max-width: 992px){
  .pro-nav-item.dd-cols-4 > .pro-dropdown{
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    width: min(680px, calc(100vw - 24px)) !important;
    left: 0 !important;
    transform: none !important;
  }
  .pro-nav-item.dd-cols-2 > .pro-dropdown{
    grid-template-columns: 1fr;
    width: min(420px, calc(100vw - 24px)) !important;
  }
}

@media (max-width: 576px){
  .pro-nav-item.has-dropdown > .pro-dropdown{
    width: calc(100vw - 24px) !important;
  }
}

/* =======================================================================
   v2026.01.03 DROPDOWN PATCH（兼容 & 防遮挡）
   你反馈“没有下拉效果”时，最常见原因：
   - 触屏设备没有 hover（手机/平板）
   - 模板结构不是直接子元素，导致 `>` 选择器未命中
   - 其它层级 z-index 盖住下拉
   ======================================================================= */

/* 初始隐藏：兼容 descendant 结构 */
.pro-nav-item.has-dropdown .pro-dropdown{ display: none !important; }

/* hover / focus 展开：兼容 `>` 与 descendant 两种结构 */
.pro-nav-item.has-dropdown:hover > .pro-dropdown,
.pro-nav-item.has-dropdown:focus-within > .pro-dropdown,
.pro-nav-item.has-dropdown:hover .pro-dropdown,
.pro-nav-item.has-dropdown:focus-within .pro-dropdown{ display: grid !important; }

/* 触屏：JS 会给父级加 is-open */
.pro-nav-item.has-dropdown.is-open > .pro-dropdown,
.pro-nav-item.has-dropdown.is-open .pro-dropdown{ display: grid !important; }
.pro-nav-item.has-dropdown.is-open > .pro-nav-link .pro-caret{ transform: rotate(180deg); }

/* 防遮挡：把层级拉到非常靠前 */
.pro-topbar{ z-index: 2147483000 !important; }
.pro-nav-item.has-dropdown > .pro-dropdown,
.pro-nav-item.has-dropdown .pro-dropdown{ z-index: 2147483100 !important; }

/* =======================================================================
   v2026.01.03 DROPDOWN CLIP FIX（关键修复：下拉被父容器 overflow 裁切）
   现状：上方样式中把 .pro-nav 设为 overflow:hidden（为了不换行），
   会导致 .pro-dropdown（绝对定位）在“向下溢出”时被直接裁掉。
   解决：桌面端让顶部相关容器 overflow 可见；中等宽度下仍允许横向滚动。
   ======================================================================= */

/* 桌面端：允许下拉溢出显示（不再被裁切） */
.pro-topbar,
.pro-topbar .content,
.pro-topbar .content-full,
.pro-topbar-inner,
.pro-nav{
  overflow: visible !important;
}

/* 1180px 以下：导航可横滑，但下拉仍然可见 */
@media (max-width: 1180px){
  .pro-nav{
    overflow-x: auto !important;
    /* 注意：当 overflow-x 非 visible 时，部分浏览器会把 overflow-y 计算为 auto。
       为避免下拉被裁切，下面把下拉改为 fixed（脱离滚动容器裁切）。 */
  }
  .pro-nav-item.has-dropdown > .pro-dropdown,
  .pro-nav-item.has-dropdown .pro-dropdown{
    position: fixed !important;
    top: calc(var(--pro-topbar-h, 58px) + 12px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
  }
}

/* =======================================================================
   v2026.01.03 OFFICIAL DROPDOWN THEME（按你图二：深蓝、白字、更“官方”）
   目标：去掉“大玻璃面板”观感，做成云厂商常见的深色列表式下拉。
   ======================================================================= */

/* 下拉容器：深蓝底 + 细边框 + 阴影 */
.pro-nav-item.has-dropdown > .pro-dropdown,
.pro-nav-item.has-dropdown .pro-dropdown{
  background: rgba(6, 26, 52, .98) !important; /* 深蓝 */
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 16px 44px rgba(0,0,0,.45) !important;
  border-radius: 12px !important;
  padding: 8px !important;
  gap: 4px !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* 小三角：同色（可选，保留更像“官方”组件） */
.pro-nav-item.has-dropdown > .pro-dropdown::before,
.pro-nav-item.has-dropdown .pro-dropdown::before{
  background: rgba(6, 26, 52, .98) !important;
  border-left: 1px solid rgba(255,255,255,.10) !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
}

/* 下拉链接：白字、左对齐、紧凑 */
.pro-dropdown .pro-dd-link{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 10px 14px !important;
  min-height: auto !important;
  border-radius: 10px !important;
  color: rgba(255,255,255,.95) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: background-color .15s ease, transform .15s ease;
}

/* hover：更亮一点，像图二那种“官方”高亮 */
.pro-dropdown .pro-dd-link:hover{
  background: rgba(255,255,255,.08) !important;
  transform: translateY(-1px);
}

/* 描述文字：默认隐藏（图二是纯标题列表） */
.pro-dropdown .pro-dd-desc{
  display: none !important;
}

/* 下拉标题（如果你以后启用 title 区块） */
.pro-dropdown .pro-dropdown-title{
  color: rgba(255,255,255,.92) !important;
}

/* 列宽更“收敛”，避免出现截图那种超大面板 */
.pro-nav-item.dd-cols-1 > .pro-dropdown{ width: 260px !important; }
.pro-nav-item.dd-cols-2 > .pro-dropdown{ width: 520px !important; }
.pro-nav-item.dd-cols-4 > .pro-dropdown{ width: 920px !important; }

/* 顶部深色 Hero 背景下，hover 打开时保持触发项白字 */
body.pro-hero-top .pro-topbar--glass .pro-nav-item.has-dropdown:hover > .pro-nav-link,
body.pro-hero-top .pro-topbar--glass .pro-nav-item.has-dropdown:focus-within > .pro-nav-link{
  color: rgba(255,255,255,.95) !important;
}

/* =======================================================================
   v2026.01.04d DROPDOWN OFFICIAL COMPACT (最终覆盖)
   - 箭头始终在对应栏目正下方
   - 子菜单文字居中，仅显示名称（无描述）
   - 下拉宽度进一步收敛；4列行距/间距更紧凑
   - 修复 hover 经过时下拉消失、难以点击（增加 hover 缓冲区）
   ======================================================================= */

/* 统一以“当前栏目”为参照定位下拉（避免 left:0 导致箭头偏移） */
.pro-nav-item.has-dropdown{ position: relative !important; }

.pro-nav-item.has-dropdown > .pro-dropdown,
.pro-nav-item.has-dropdown .pro-dropdown{
  /* 更靠近主菜单，减少空隙 */
  top: calc(100% + 6px) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;

  /* 去掉历史 min-width 影响 */
  min-width: 0 !important;

  /* 更“官方”的深色面板 */
  background: rgba(6, 24, 48, .98) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.48) !important;
  border-radius: 12px !important;

  /* 紧凑 */
  padding: 6px !important;
  gap: 4px !important;

  /* 可点击 */
  pointer-events: auto !important;
}

/* hover 缓冲区：解决从主菜单移动到下拉时“闪退/点不中” */
.pro-nav-item.has-dropdown > .pro-dropdown::after,
.pro-nav-item.has-dropdown .pro-dropdown::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
  background: transparent;
}

/* 小箭头：居中对齐当前栏目 */
.pro-nav-item.has-dropdown > .pro-dropdown::before,
.pro-nav-item.has-dropdown .pro-dropdown::before{
  left: 50% !important;
  transform: translateX(-50%) rotate(45deg) !important;
  width: 10px !important;
  height: 10px !important;
  top: -6px !important;
  background: rgba(6, 24, 48, .98) !important;
  border-left: 1px solid rgba(255,255,255,.10) !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  pointer-events: none;
}

/* 子菜单：只要名字、居中、更紧凑 */
.pro-dropdown .pro-dd-link{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  padding: 7px 8px !important;
  border-radius: 10px !important;

  color: rgba(255,255,255,.95) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  text-decoration: none !important;

  background: transparent !important;
  transition: background-color .12s ease;

  /* 长文本更稳：单行省略 */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.pro-dropdown .pro-dd-link:hover{
  background: rgba(255,255,255,.08) !important;
}

/* 兜底：彻底隐藏描述 */
.pro-dropdown .pro-dd-desc{ display: none !important; }

/* 宽度进一步收敛（你反馈“仍然太宽”） */
.pro-nav-item.dd-cols-1 > .pro-dropdown{ width: 190px !important; }
.pro-nav-item.dd-cols-2 > .pro-dropdown{ width: 360px !important; }
.pro-nav-item.dd-cols-4 > .pro-dropdown{ width: 520px !important; }

/* 列布局：4列也更紧凑，子项不足时自动收缩列数（避免 3 个菜单撑出超宽空白） */
.pro-nav-item.dd-cols-1 > .pro-dropdown{
  display: grid !important;
  grid-template-columns: 1fr !important;
}

.pro-nav-item.dd-cols-2 > .pro-dropdown{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
  gap: 2px 6px !important;
}

.pro-nav-item.dd-cols-4 > .pro-dropdown{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  gap: 2px 6px !important;
}

/* 移动端 fixed 下拉时也保持紧凑宽度（避免铺满屏幕） */
@media (max-width: 1180px){
  .pro-nav-item.has-dropdown > .pro-dropdown,
  .pro-nav-item.has-dropdown .pro-dropdown{
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(92vw, 520px) !important;
  }
}

/* =======================================================================
   v2026.01.04e DROPDOWN FINAL NARROW (修复残影/过宽/点击不中)
   - 修复：之前 dd-cols 规则把下拉常驻 display:grid 导致“多个下拉残影”
   - 更窄：下拉宽度改为内容自适应（max-content）+ 上限约束
   - 居中：子菜单文字居中（仅名字，无描述）
   - 更紧凑：4列行距/间距再压缩
   - 可点击：缩小 gap + 增大 hover 缓冲桥，避免下拉闪退
   ======================================================================= */

/* 默认隐藏（覆盖之前 dd-cols 的 display:grid 常驻问题） */
.pro-nav-item.has-dropdown > .pro-dropdown,
.pro-nav-item.has-dropdown .pro-dropdown{
  display: none !important;
}

/* 桌面端：只用 hover 打开，避免 click 后 focus-within 导致多个下拉同时显示 */
@media (hover:hover) and (pointer:fine){
  .pro-nav-item.has-dropdown:focus-within > .pro-dropdown,
  .pro-nav-item.has-dropdown:focus-within .pro-dropdown{
    display: none !important;
  }
  .pro-nav-item.has-dropdown:hover > .pro-dropdown,
  .pro-nav-item.has-dropdown:hover .pro-dropdown{
    display: grid !important;
  }
}

/* 触屏端：保留 is-open 打开 */
.pro-nav-item.has-dropdown.is-open > .pro-dropdown,
.pro-nav-item.has-dropdown.is-open .pro-dropdown{
  display: grid !important;
}

/* 统一面板：更紧凑、更实、更官方 */
.pro-nav-item.has-dropdown > .pro-dropdown,
.pro-nav-item.has-dropdown .pro-dropdown{
  position: absolute !important;
  top: calc(100% + 2px) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;

  background: rgba(6, 22, 44, .98) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.42) !important;
  border-radius: 12px !important;

  padding: 6px !important;
  gap: 2px 6px !important;

  min-width: 0 !important;
  max-width: calc(100vw - 32px) !important;
  overflow: visible !important;

  z-index: 2147483100 !important;
  pointer-events: auto !important;
}

/* hover 缓冲桥：加大到 14px，彻底解决“移动一下就消失/点不中” */
.pro-nav-item.has-dropdown > .pro-dropdown::after,
.pro-nav-item.has-dropdown .pro-dropdown::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
  background: transparent;
}

/* 箭头：必须在栏目正下方 */
.pro-nav-item.has-dropdown > .pro-dropdown::before,
.pro-nav-item.has-dropdown .pro-dropdown::before{
  content: "";
  position: absolute;
  left: 50% !important;
  top: -6px !important;
  width: 10px !important;
  height: 10px !important;
  transform: translateX(-50%) rotate(45deg) !important;
  background: rgba(6, 22, 44, .98) !important;
  border-left: 1px solid rgba(255,255,255,.12) !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  pointer-events: none;
}

/* 只要名字：兜底隐藏描述 */
.pro-dropdown .pro-dd-desc{ display: none !important; }

/* 子菜单链接：居中、紧凑、可换行（避免撑宽） */
.pro-dropdown .pro-dd-link{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  padding: 6px 10px !important;
  border-radius: 10px !important;

  color: rgba(255,255,255,.96) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.18 !important;

  text-decoration: none !important;
  background: transparent !important;
  transition: background-color .12s ease;

  /* 允许换行，避免宽度被长标题撑大 */
  white-space: normal !important;
  word-break: break-word !important;
  pointer-events: auto !important;
}
.pro-dropdown .pro-dd-link:hover{ background: rgba(255,255,255,.08) !important; }

/* 更窄的宽度策略：内容自适应 + 上限约束（单列/多列都不会虚胖） */
.pro-nav-item.dd-cols-1 > .pro-dropdown,
.pro-nav-item.dd-cols-1 .pro-dropdown{
  width: max-content !important;
  min-width: 160px !important;
  max-width: min(220px, calc(100vw - 32px)) !important;
  grid-template-columns: 1fr !important;
}

.pro-nav-item.dd-cols-2 > .pro-dropdown,
.pro-nav-item.dd-cols-2 .pro-dropdown{
  width: max-content !important;
  min-width: 320px !important;
  max-width: min(420px, calc(100vw - 32px)) !important;
  grid-template-columns: repeat(2, minmax(150px, max-content)) !important;
  justify-content: center !important;
  gap: 2px 6px !important;
}

/* 服务器租用：标记 4 列，但用 auto-fit 自动收缩到实际条目数，避免“超宽空白” */
.pro-nav-item.dd-cols-4 > .pro-dropdown,
.pro-nav-item.dd-cols-4 .pro-dropdown{
  width: max-content !important;
  min-width: 420px !important;
  max-width: min(620px, calc(100vw - 32px)) !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, max-content)) !important;
  justify-content: center !important;
  gap: 2px 6px !important;
}

/* =======================================================================
   v2026.01.04e DROPDOWN FINAL NARROW (修复残影/过宽/点击不中)
   ======================================================================= */

/* 1) 先强制默认隐藏：覆盖之前 dd-cols 的“常驻 display:grid” */
.pro-nav-item.has-dropdown > .pro-dropdown,
.pro-nav-item.has-dropdown .pro-dropdown{
  display: none !important;
}

/* 2) 仅在 hover / is-open 时显示（桌面 hover；触屏 is-open） */
.pro-nav-item.has-dropdown:hover > .pro-dropdown,
.pro-nav-item.has-dropdown:hover .pro-dropdown,
.pro-nav-item.has-dropdown.is-open > .pro-dropdown,
.pro-nav-item.has-dropdown.is-open .pro-dropdown{
  display: grid !important;
}

/* 3) 桌面端：避免 click 后 focus-within 造成“多个下拉同时挂住/残影” */
@media (hover:hover) and (pointer:fine){
  .pro-nav-item.has-dropdown:focus-within > .pro-dropdown,
  .pro-nav-item.has-dropdown:focus-within .pro-dropdown{
    display: none !important;
  }
}

/* 4) 面板样式：更官方、更窄（内容自适应） */
.pro-nav-item.has-dropdown{ position: relative !important; }

.pro-nav-item.has-dropdown > .pro-dropdown,
.pro-nav-item.has-dropdown .pro-dropdown{
  position: absolute !important;
  top: calc(100% + 2px) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;

  /* 覆盖历史超宽 */
  min-width: 0 !important;
  width: max-content !important;
  max-width: calc(100vw - 32px) !important;

  background: rgba(6, 24, 48, .98) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 18px 54px rgba(0,0,0,.55) !important;
  border-radius: 12px !important;

  padding: 6px !important;
  gap: 2px 6px !important;

  z-index: 2147483100 !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

/* hover 缓冲桥：更大一点，彻底解决“闪退/点不中” */
.pro-nav-item.has-dropdown > .pro-dropdown::after,
.pro-nav-item.has-dropdown .pro-dropdown::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
  background: transparent;
}

/* 小箭头：严格在栏目正下方 */
.pro-nav-item.has-dropdown > .pro-dropdown::before,
.pro-nav-item.has-dropdown .pro-dropdown::before{
  content: "";
  position: absolute;
  left: 50% !important;
  top: -6px !important;
  width: 10px !important;
  height: 10px !important;
  transform: translateX(-50%) rotate(45deg) !important;
  background: rgba(6, 24, 48, .98) !important;
  border-left: 1px solid rgba(255,255,255,.12) !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  pointer-events: none;
}

/* 5) 子菜单：只显示名字 + 居中 + 更紧凑 */
.pro-dropdown .pro-dd-desc{ display:none !important; }

.pro-dropdown .pro-dd-link{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  padding: 6px 10px !important;
  border-radius: 10px !important;

  color: rgba(255,255,255,.95) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  text-decoration: none !important;

  background: transparent !important;
  transition: background-color .12s ease;

  /* 允许换行，避免撑宽 */
  white-space: normal !important;
  max-width: 220px;
}

.pro-dropdown .pro-dd-link:hover{
  background: rgba(255,255,255,.09) !important;
}

/* 6) 列数 & 宽度（继续收窄） */
.pro-nav-item.dd-cols-1 > .pro-dropdown,
.pro-nav-item.dd-cols-1 .pro-dropdown{
  min-width: 160px !important;
  max-width: 220px !important;
  grid-template-columns: 1fr !important;
}

.pro-nav-item.dd-cols-2 > .pro-dropdown,
.pro-nav-item.dd-cols-2 .pro-dropdown{
  min-width: 320px !important;
  max-width: 420px !important;
  grid-template-columns: repeat(2, minmax(140px, max-content)) !important;
  justify-content: center !important;
  gap: 2px 8px !important;
}

.pro-nav-item.dd-cols-4 > .pro-dropdown,
.pro-nav-item.dd-cols-4 .pro-dropdown{
  min-width: 420px !important;
  max-width: 620px !important;
  /* 子项不足时自动收缩列数，避免“超宽空白” */
  grid-template-columns: repeat(auto-fit, minmax(140px, max-content)) !important;
  justify-content: center !important;
  gap: 2px 8px !important;
}


/* =======================================================================
   v2026.01.04e DROPDOWN FINAL NARROW (修复残影/过宽/点击不中)
   - 默认隐藏（解决残影/多下拉同时出现）
   - 打开条件：hover / is-open
   - 宽度：内容自适应 + 上限约束（更窄更官方）
   - 子菜单：仅名称、居中、更紧凑
   - hover 缓冲桥：避免鼠标移动时闪退/点击不中
   ======================================================================= */

/* 默认隐藏：覆盖历史 dd-cols “display:grid 常驻” */
.pro-nav-item.has-dropdown > .pro-dropdown,
.pro-nav-item.has-dropdown .pro-dropdown{
  display: none !important;
}

/* 桌面：只用 hover 打开（避免 click 后 focus-within 导致多个下拉残留） */
@media (hover: hover) and (pointer: fine){
  .pro-nav-item.has-dropdown:hover > .pro-dropdown{ display: grid !important; }
  .pro-nav-item.has-dropdown:focus-within > .pro-dropdown{ display: none !important; }
}

/* 触屏：沿用 is-open 打开 */
.pro-nav-item.has-dropdown.is-open > .pro-dropdown,
.pro-nav-item.has-dropdown.is-open .pro-dropdown{
  display: grid !important;
}

/* 面板基础样式（更窄、更官方） */
.pro-nav-item.has-dropdown > .pro-dropdown,
.pro-nav-item.has-dropdown .pro-dropdown{
  top: calc(100% + 2px) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;

  /* 去掉历史 min-width 影响 */
  min-width: 0 !important;

  /* 深色官方下拉 */
  background: rgba(6, 22, 44, .98) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.45) !important;
  border-radius: 12px !important;

  /* 更紧凑 */
  padding: 6px !important;
  gap: 4px 8px !important;

  /* 重要：允许溢出显示 */
  overflow: visible !important;

  /* 保证可点击 */
  pointer-events: auto !important;
  z-index: 2147483100 !important;

  /* 兜底：别超出视口 */
  max-width: calc(100vw - 24px) !important;
}

/* hover 缓冲桥：增加到 14px（更稳） */
.pro-nav-item.has-dropdown > .pro-dropdown::after,
.pro-nav-item.has-dropdown .pro-dropdown::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
  background: transparent;
}

/* 箭头：始终对齐当前栏目正下方 */
.pro-nav-item.has-dropdown > .pro-dropdown::before,
.pro-nav-item.has-dropdown .pro-dropdown::before{
  left: 50% !important;
  transform: translateX(-50%) rotate(45deg) !important;
  width: 10px !important;
  height: 10px !important;
  top: -6px !important;
  background: rgba(6, 22, 44, .98) !important;
  border-left: 1px solid rgba(255,255,255,.10) !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  pointer-events: none;
}

/* 子菜单：只要名称（无描述） */
.pro-dropdown .pro-dd-desc{ display: none !important; }

/* 子菜单链接：居中、紧凑、可换行以缩窄整体宽度 */
.pro-dropdown .pro-dd-link{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  padding: 6px 10px !important;
  border-radius: 10px !important;

  color: rgba(255,255,255,.96) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;

  background: transparent !important;
  transition: background-color .12s ease;

  /* 允许换行，避免撑宽 */
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.pro-dropdown .pro-dd-link:hover{
  background: rgba(255,255,255,.08) !important;
}

/* 宽度继续收窄：用内容自适应 + 上限约束 */
.pro-nav-item.dd-cols-1 > .pro-dropdown,
.pro-nav-item.dd-cols-1 .pro-dropdown{
  width: max-content !important;
  min-width: 160px !important;
  max-width: 210px !important;
  grid-template-columns: 1fr !important;
}

.pro-nav-item.dd-cols-2 > .pro-dropdown,
.pro-nav-item.dd-cols-2 .pro-dropdown{
  width: max-content !important;
  min-width: 300px !important;
  max-width: 420px !important;
  grid-template-columns: repeat(2, minmax(140px, max-content)) !important;
  justify-content: center !important;
  gap: 4px 8px !important;
}

/* 服务器租用：标记为 4 列，但用 auto-fit 让条目少时自动变 3 列，更不“太宽” */
.pro-nav-item.dd-cols-4 > .pro-dropdown,
.pro-nav-item.dd-cols-4 .pro-dropdown{
  width: max-content !important;
  min-width: 420px !important;
  max-width: 620px !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, max-content)) !important;
  justify-content: center !important;
  gap: 2px 8px !important; /* 行距更紧凑 */
}


/* =======================================================================
   v2026.01.04e DROPDOWN FINAL NARROW (修复残影/过宽/点击不中)
   ======================================================================= */

/* 默认隐藏：覆盖历史 dd-cols “display:grid 常驻”导致的残影 */
.pro-topbar .pro-nav-item.has-dropdown > .pro-dropdown,
.pro-topbar .pro-nav-item.has-dropdown .pro-dropdown{
  display: none !important;
}

/* 仅在桌面鼠标设备启用 hover 打开；并禁用 focus-within 造成的“点一下残留多个下拉” */
@media (hover:hover) and (pointer:fine){
  .pro-topbar .pro-nav-item.has-dropdown:hover > .pro-dropdown{
    display: grid !important;
  }
  .pro-topbar .pro-nav-item.has-dropdown:focus-within > .pro-dropdown{
    display: none !important;
  }
}

/* 触屏：由 header 的 JS 加 is-open 控制 */
.pro-topbar .pro-nav-item.has-dropdown.is-open > .pro-dropdown{
  display: grid !important;
}

/* 下拉面板基础样式：更窄、更“官方” */
.pro-topbar .pro-nav-item.has-dropdown > .pro-dropdown{
  position: absolute !important;
  top: calc(100% + 2px) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;

  /* 宽度：内容自适应 + 视口上限 */
  width: max-content !important;
  min-width: 0 !important;
  max-width: calc(100vw - 32px) !important;

  background: rgba(6, 24, 48, .98) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.55) !important;
  border-radius: 12px !important;

  padding: 8px !important;
  row-gap: 4px !important;
  column-gap: 8px !important;

  z-index: 2147483100 !important;
  overflow: visible !important;
}

/* hover 缓冲桥：避免从主菜单移动到下拉时闪退/点不中 */
.pro-topbar .pro-nav-item.has-dropdown > .pro-dropdown::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
  background: transparent;
}

/* 小箭头：必须在栏目正下方 */
.pro-topbar .pro-nav-item.has-dropdown > .pro-dropdown::before{
  content: "";
  position: absolute;
  left: 50% !important;
  top: -6px !important;
  width: 10px !important;
  height: 10px !important;
  transform: translateX(-50%) rotate(45deg) !important;
  background: rgba(6, 24, 48, .98) !important;
  border-left: 1px solid rgba(255,255,255,.12) !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  pointer-events: none;
}

/* 列数与宽度：继续收窄 */
.pro-topbar .pro-nav-item.dd-cols-1 > .pro-dropdown{
  grid-template-columns: 1fr !important;
  min-width: 160px !important;
  max-width: 210px !important;
}

.pro-topbar .pro-nav-item.dd-cols-2 > .pro-dropdown{
  grid-template-columns: repeat(2, minmax(140px, max-content)) !important;
  justify-content: center !important;
  min-width: 300px !important;
  max-width: 420px !important;
}

/* 4列：子项不足时自动收缩（更窄、更像官方下拉） */
.pro-topbar .pro-nav-item.dd-cols-4 > .pro-dropdown{
  grid-template-columns: repeat(auto-fit, minmax(140px, max-content)) !important;
  justify-content: center !important;
  min-width: 440px !important;
  max-width: 620px !important;
  row-gap: 2px !important;
  column-gap: 6px !important;
}

/* 子菜单：只显示名字，居中，更紧凑 */
.pro-topbar .pro-nav-item.has-dropdown > .pro-dropdown > .pro-dd-link{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  padding: 6px 10px !important;
  border-radius: 10px !important;

  color: rgba(255,255,255,.96) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;

  background: transparent !important;
  transition: background-color .12s ease;

  /* 允许自动换行，避免撑宽 */
  white-space: normal !important;
  max-width: 220px;
}

.pro-topbar .pro-nav-item.has-dropdown > .pro-dropdown > .pro-dd-link:hover{
  background: rgba(255,255,255,.10) !important;
}

/* 兜底：彻底禁用任何描述文案 */
.pro-topbar .pro-dropdown .pro-dd-desc{ display: none !important; }

/* =======================================================================
   v2026.01.04e DROPDOWN FINAL NARROW (修复残影/过宽/点击不中)
   ======================================================================= */

/* 默认隐藏：覆盖历史 dd-cols “display:grid 常驻”导致的残影 */
.pro-topbar .pro-nav-item.has-dropdown > .pro-dropdown,
.pro-topbar .pro-nav-item.has-dropdown .pro-dropdown{
  display: none !important;
}

/* 打开：桌面 hover */
.pro-topbar .pro-nav-item.has-dropdown:hover > .pro-dropdown{
  display: grid !important;
}

/* 打开：触屏点击（JS 加 is-open） */
.pro-topbar .pro-nav-item.has-dropdown.is-open > .pro-dropdown{
  display: grid !important;
}

/* 桌面端：禁用 focus-within 常驻（避免点击后多个下拉同时保持显示） */
@media (hover:hover) and (pointer:fine){
  .pro-topbar .pro-nav-item.has-dropdown:focus-within > .pro-dropdown{
    display: none !important;
  }
}

/* 位置与面板：以“当前栏目”为参照居中，更靠近主菜单 */
.pro-topbar .pro-nav-item.has-dropdown{ position: relative !important; }
.pro-topbar .pro-nav-item.has-dropdown > .pro-dropdown{
  position: absolute !important;
  top: calc(100% + 2px) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;

  /* 宽度：内容自适应 + 上限（避免太宽） */
  width: max-content !important;
  min-width: 0 !important;
  max-width: calc(100vw - 24px) !important;

  padding: 8px !important;
  row-gap: 4px !important;
  column-gap: 8px !important;

  background: rgba(6, 22, 44, .98) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.46) !important;
  border-radius: 12px !important;

  overflow: visible !important;
  z-index: 2147483100 !important;
}

/* hover 缓冲桥：解决鼠标从主菜单移动到下拉的“空隙闪退/点不中” */
.pro-topbar .pro-nav-item.has-dropdown > .pro-dropdown::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
  background: transparent;
}

/* 小箭头：必须在对应栏目正下方 */
.pro-topbar .pro-nav-item.has-dropdown > .pro-dropdown::before{
  content: "";
  position: absolute;
  left: 50% !important;
  top: -6px !important;
  transform: translateX(-50%) rotate(45deg) !important;
  width: 10px !important;
  height: 10px !important;
  background: rgba(6, 22, 44, .98) !important;
  border-left: 1px solid rgba(255,255,255,.12) !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  pointer-events: none;
}

/* 列数与最大宽度：继续收窄 */
.pro-topbar .pro-nav-item.dd-cols-1 > .pro-dropdown{
  grid-template-columns: 1fr !important;
  min-width: 160px !important;
  max-width: 220px !important;
}

.pro-topbar .pro-nav-item.dd-cols-2 > .pro-dropdown{
  grid-template-columns: repeat(2, minmax(140px, max-content)) !important;
  justify-content: center !important;
  min-width: 320px !important;
  max-width: 420px !important;
}

.pro-topbar .pro-nav-item.dd-cols-4 > .pro-dropdown{
  /* auto-fit：子项不足时自动收缩列数，避免“4列但只有3项”仍然很宽 */
  grid-template-columns: repeat(auto-fit, minmax(140px, max-content)) !important;
  justify-content: center !important;
  min-width: 460px !important;
  max-width: 620px !important;
  row-gap: 2px !important;
  column-gap: 6px !important;
}

/* 子菜单：仅名字、文字居中、更紧凑（强权重覆盖旧样式） */
.pro-topbar .pro-nav-item.has-dropdown > .pro-dropdown > .pro-dd-link{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  padding: 6px 10px !important;
  border-radius: 10px !important;

  color: rgba(255,255,255,.96) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;

  text-decoration: none !important;
  background: transparent !important;
  transition: background-color .12s ease;

  /* 允许换行，避免撑宽 */
  white-space: normal !important;
  max-width: 220px !important;
}

.pro-topbar .pro-nav-item.has-dropdown > .pro-dropdown > .pro-dd-link:hover{
  background: rgba(255,255,255,.10) !important;
}

/* 兜底：彻底隐藏描述 */
.pro-topbar .pro-dropdown .pro-dd-desc{ display: none !important; }


/* =======================================================================
   v2026.01.04e DROPDOWN FINAL NARROW (修复残影/过宽/点击不中)
   ======================================================================= */

/* 默认隐藏：覆盖历史 dd-cols “display:grid 常驻”导致的残影 */
.pro-topbar .pro-nav-item.has-dropdown > .pro-dropdown,
.pro-topbar .pro-nav-item.has-dropdown .pro-dropdown{
  display: none !important;
}

/* 打开：桌面 hover */
.pro-topbar .pro-nav-item.has-dropdown:hover > .pro-dropdown{
  display: grid !important;
}

/* 打开：触屏点击（JS 加 is-open） */
.pro-topbar .pro-nav-item.has-dropdown.is-open > .pro-dropdown{
  display: grid !important;
}

/* 桌面端：禁用 focus-within 常驻（避免点击后多个下拉同时保持显示） */
@media (hover:hover) and (pointer:fine){
  .pro-topbar .pro-nav-item.has-dropdown:focus-within > .pro-dropdown{ display: none !important; }
}

/* =======================================================================
   v2026.01.04e DROPDOWN FINAL NARROW (修复残影/过宽/点击不中)
   ======================================================================= */

/* 默认隐藏：覆盖历史 dd-cols “display:grid 常驻”导致的残影 */
.pro-topbar .pro-nav-item.has-dropdown > .pro-dropdown,
.pro-topbar .pro-nav-item.has-dropdown .pro-dropdown{
  display: none !important;
}

/* 打开：桌面 hover */
.pro-topbar .pro-nav-item.has-dropdown:hover > .pro-dropdown{
  display: grid !important;
}

/* 打开：触屏点击（JS 加 is-open） */
.pro-topbar .pro-nav-item.has-dropdown.is-open > .pro-dropdown{
  display: grid !important;
}

/* 桌面端：禁用 focus-within 常驻（避免点击后多个下拉同时保持显示） */
@media (hover:hover) and (pointer:fine){
  .pro-topbar .pro-nav-item.has-dropdown:focus-within > .pro-dropdown{
    display: none !important;
  }
}

/* =======================================================================
   v2026.01.04e DROPDOWN FINAL NARROW (修复残影/过宽/点击不中)
   ======================================================================= */

/* 默认隐藏：覆盖历史 dd-cols “display:grid 常驻”导致的残影 */
.pro-topbar .pro-nav-item.has-dropdown > .pro-dropdown,
.pro-topbar .pro-nav-item.has-dropdown .pro-dropdown{
  display: none !important;
}

/* 打开：桌面 hover */
.pro-topbar .pro-nav-item.has-dropdown:hover > .pro-dropdown{
  display: grid !important;
}

/* 打开：触屏点击（JS 加 is-open） */
.pro-topbar .pro-nav-item.has-dropdown.is-open > .pro-dropdown{
  display: grid !important;
}

/* 桌面端：禁用 focus-within 常驻（避免点击后多个下拉同时保持显示） */
@media (hover:hover) and (pointer:fine){
  .pro-topbar .pro-nav-item.has-dropdown:focus-within > .pro-dropdown{
    display: none !important;
  }
}
/*test*/

/* =======================================================================
   v2026.01.04e DROPDOWN FINAL NARROW (修复残影/过宽/点击不中)
   ======================================================================= */

/* 默认隐藏：覆盖历史 dd-cols “display:grid 常驻”导致的残影 */
.pro-topbar .pro-nav-item.has-dropdown > .pro-dropdown,
.pro-topbar .pro-nav-item.has-dropdown .pro-dropdown{
  display: none !important;
}

/* 打开：桌面 hover */
.pro-topbar .pro-nav-item.has-dropdown:hover > .pro-dropdown{
  display: grid !important;
}

/* 打开：触屏点击（JS 加 is-open） */
.pro-topbar .pro-nav-item.has-dropdown.is-open > .pro-dropdown{
  display: grid !important;
}

/* 桌面端：禁用 focus-within 常驻（避免点击后多个下拉同时保持显示） */
@media (hover:hover) and (pointer:fine){
  .pro-topbar .pro-nav-item.has-dropdown:focus-within > .pro-dropdown{
    display: none !important;
  }
}

/* =======================================================================
   v2026.01.04e DROPDOWN FINAL NARROW (修复残影/过宽/点击不中)
   ======================================================================= */

/* 默认隐藏：覆盖历史 dd-cols “display:grid 常驻”导致的残影 */
.pro-topbar .pro-nav-item.has-dropdown > .pro-dropdown,
.pro-topbar .pro-nav-item.has-dropdown .pro-dropdown{
  display: none !important;
}

/* 打开：桌面 hover */
.pro-topbar .pro-nav-item.has-dropdown:hover > .pro-dropdown{
  display: grid !important;
}

/* 打开：触屏点击（JS 加 is-open） */
.pro-topbar .pro-nav-item.has-dropdown.is-open > .pro-dropdown{
  display: grid !important;
}

/* 桌面端：禁用 focus-within 常驻（避免点击后多个下拉同时保持显示） */
@media (hover:hover) and (pointer:fine){
  .pro-topbar .pro-nav-item.has-dropdown:focus-within > .pro-dropdown{
    display: none !important;
  }
}

/* =======================================================================
   v2026.01.04e DROPDOWN FINAL NARROW (修复残影/过宽/点击不中)
   ======================================================================= */

/* 默认隐藏：覆盖历史 dd-cols “display:grid 常驻”导致的残影 */
.pro-topbar .pro-nav-item.has-dropdown > .pro-dropdown,
.pro-topbar .pro-nav-item.has-dropdown .pro-dropdown{
  display: none !important;
}

/* 打开：桌面 hover */
.pro-topbar .pro-nav-item.has-dropdown:hover > .pro-dropdown{
  display: grid !important;
}

/* 打开：触屏点击（JS 加 is-open） */
.pro-topbar .pro-nav-item.has-dropdown.is-open > .pro-dropdown{
  display: grid !important;
}

/* 桌面端：禁用 focus-within 常驻（避免点击后多个下拉同时保持显示） */
@media (hover:hover) and (pointer:fine){
  .pro-topbar .pro-nav-item.has-dropdown:focus-within > .pro-dropdown{
    display: none !important;
  }
}

/* =======================================================================
   v2026.01.04e DROPDOWN FINAL NARROW (修复残影/过宽/点击不中)
   ======================================================================= */

/* 默认隐藏：覆盖历史 dd-cols “display:grid 常驻”导致的残影 */
.pro-topbar .pro-nav-item.has-dropdown > .pro-dropdown,
.pro-topbar .pro-nav-item.has-dropdown .pro-dropdown{
  display: none !important;
}

/* 打开：桌面 hover */
.pro-topbar .pro-nav-item.has-dropdown:hover > .pro-dropdown{
  display: grid !important;
}

/* 打开：触屏点击（JS 加 is-open） */
.pro-topbar .pro-nav-item.has-dropdown.is-open > .pro-dropdown{
  display: grid !important;
}

/* 桌面端：禁用 focus-within 常驻（避免点击后多个下拉保持显示） */
@media (hover:hover) and (pointer:fine){
  .pro-topbar .pro-nav-item.has-dropdown:focus-within > .pro-dropdown{
    display: none !important;
  }
}

/* =======================================================================
   v2026.01.04e DROPDOWN FINAL NARROW (修复残影/过宽/点击不中)
   ======================================================================= */

/* 默认隐藏：覆盖历史 dd-cols “display:grid 常驻”导致的残影 */
.pro-topbar .pro-nav-item.has-dropdown > .pro-dropdown,
.pro-topbar .pro-nav-item.has-dropdown .pro-dropdown{
  display: none !important;
}

/* 打开：桌面 hover */
.pro-topbar .pro-nav-item.has-dropdown:hover > .pro-dropdown{
  display: grid !important;
}

/* 打开：触屏点击（JS 加 is-open） */
.pro-topbar .pro-nav-item.has-dropdown.is-open > .pro-dropdown{
  display: grid !important;
}

/* 桌面端：禁用 focus-within 常驻（避免点击后多个下拉同时保持显示） */
@media (hover:hover) and (pointer:fine){
  .pro-topbar .pro-nav-item.has-dropdown:focus-within > .pro-dropdown{
    display: none !important;
  }
}

/* =======================================================================
   v2026.01.04e DROPDOWN FINAL NARROW (修复残影/过宽/点击不中)
   ======================================================================= */

/* 默认隐藏：覆盖历史 dd-cols “display:grid 常驻”导致的残影 */
.pro-topbar .pro-nav-item.has-dropdown > .pro-dropdown,
.pro-topbar .pro-nav-item.has-dropdown .pro-dropdown{
  display: none !important;
}

/* 位置与面板：以“当前栏目”为参照居中，更靠近主菜单 */
.pro-topbar .pro-nav-item.has-dropdown{ position: relative !important; }
.pro-topbar .pro-nav-item.has-dropdown > .pro-dropdown{
  position: absolute !important;
  top: calc(100% + 2px) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;

  /* 宽度：内容自适应 + 上限 */
  width: max-content !important;
  min-width: 0 !important;
  max-width: calc(100vw - 24px) !important;

  padding: 8px !important;
  row-gap: 4px !important;
  column-gap: 8px !important;

  background: rgba(6, 22, 44, .98) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.46) !important;
  border-radius: 12px !important;

  overflow: visible !important;
  z-index: 2147483100 !important;
}

/* hover 缓冲桥：避免鼠标移动时闪退/点击不中 */
.pro-topbar .pro-nav-item.has-dropdown > .pro-dropdown::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
  background: transparent;
}

/* 小箭头：在对应栏目正下方 */
.pro-topbar .pro-nav-item.has-dropdown > .pro-dropdown::before{
  content: "";
  position: absolute;
  left: 50% !important;
  top: -6px !important;
  transform: translateX(-50%) rotate(45deg) !important;
  width: 10px !important;
  height: 10px !important;
  background: rgba(6, 22, 44, .98) !important;
  border-left: 1px solid rgba(255,255,255,.12) !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  pointer-events: none;
}

/* 列数与最大宽度：继续收窄 */
.pro-topbar .pro-nav-item.dd-cols-1 > .pro-dropdown{
  grid-template-columns: 1fr !important;
  min-width: 160px !important;
  max-width: 220px !important;
}

.pro-topbar .pro-nav-item.dd-cols-2 > .pro-dropdown{
  grid-template-columns: repeat(2, minmax(140px, max-content)) !important;
  justify-content: center !important;
  min-width: 320px !important;
  max-width: 420px !important;
}

.pro-topbar .pro-nav-item.dd-cols-4 > .pro-dropdown{
  /* auto-fit：子项不足时自动收缩列数，避免仍然很宽 */
  grid-template-columns: repeat(auto-fit, minmax(140px, max-content)) !important;
  justify-content: center !important;
  min-width: 440px !important;
  max-width: 600px !important;
  row-gap: 2px !important;
  column-gap: 6px !important;
}

/* 子菜单：仅名字、文字居中、更紧凑（强权重覆盖旧样式） */
.pro-topbar .pro-nav-item.has-dropdown > .pro-dropdown > .pro-dd-link{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  padding: 6px 10px !important;
  border-radius: 10px !important;

  color: rgba(255,255,255,.96) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;

  text-decoration: none !important;
  background: transparent !important;
  transition: background-color .12s ease;

  /* 允许换行，避免撑宽 */
  white-space: normal !important;
  max-width: 220px !important;
}

.pro-topbar .pro-nav-item.has-dropdown > .pro-dropdown > .pro-dd-link:hover{
  background: rgba(255,255,255,.10) !important;
}

/* 兜底：彻底隐藏描述（即使未来有人又加回去） */
.pro-topbar .pro-dropdown .pro-dd-desc{ display: none !important; }

/* 显示规则放在最后：确保 hover/is-open 能覆盖默认隐藏 */
.pro-topbar .pro-nav-item.has-dropdown:hover > .pro-dropdown{
  display: grid !important;
}
.pro-topbar .pro-nav-item.has-dropdown.is-open > .pro-dropdown{
  display: grid !important;
}
@media (hover:hover) and (pointer:fine){
  .pro-topbar .pro-nav-item.has-dropdown:focus-within > .pro-dropdown{
    display: none !important;
  }
}

/* =======================================================================
   v2026.01.04f DROPDOWN CLICK FIX
   现象：下拉菜单可见，但链接“点不动”。
   根因：之前为防止 focus-within 残留，桌面端写了
   `.pro-nav-item.has-dropdown:focus-within > .pro-dropdown{ display:none }`
   点击下拉里的 <a> 时会触发 focus-within，导致面板在 mousedown 阶段瞬间隐藏，导航被打断。
   修复：
   - 允许 focus-within 时保持下拉显示（便于点击/键盘导航）
   - 当不 hover 且仅 focus-within 残留时再隐藏（防“残影”）
   ======================================================================= */

@media (hover: hover) and (pointer: fine){
  /* 点击下拉链接时会触发 focus-within：必须保持可见，否则会“点不动” */
  .pro-nav-item.has-dropdown:focus-within > .pro-dropdown,
  .pro-nav-item.has-dropdown:focus-within .pro-dropdown{
    display: grid !important;
  }

  /* 鼠标离开后，如果只剩 focus-within（例如点了主菜单但没移开焦点），隐藏以避免残留 */
  .pro-nav-item.has-dropdown:focus-within:not(:hover) > .pro-dropdown,
  .pro-nav-item.has-dropdown:focus-within:not(:hover) .pro-dropdown{
    display: none !important;
  }
}

/* v2026.01.04f 补强：覆盖更高特异性（.pro-topbar 前缀） */
@media (hover: hover) and (pointer: fine){
  .pro-topbar .pro-nav-item.has-dropdown:focus-within > .pro-dropdown,
  .pro-topbar .pro-nav-item.has-dropdown:focus-within .pro-dropdown{
    display: grid !important;
  }
  .pro-topbar .pro-nav-item.has-dropdown:focus-within:not(:hover) > .pro-dropdown,
  .pro-topbar .pro-nav-item.has-dropdown:focus-within:not(:hover) .pro-dropdown{
    display: none !important;
  }
}

/* =======================================================================
   v2026.01.04g NOTIFY / 提示条不被顶部导航遮挡
   现象：OneUI / bootstrap-notify 的提示条默认 z-index=1031，且 top=20px。
        你这套顶部导航经过多次修复后 z-index 很高，导致提示条被压在下面。
   解决：
   - 把顶部导航与下拉的 z-index 回归到合理范围（仍保持不被内容盖住）
   - 强制把 notify 提示条整体下移到导航下方，并提高层级
   ======================================================================= */

/* 统一层级：避免“无限大 z-index”影响其它弹层（模态框/提示等） */
.pro-topbar{ z-index: 1030 !important; }
.pro-topbar .pro-nav-item.has-dropdown > .pro-dropdown,
.pro-topbar .pro-nav-item.has-dropdown .pro-dropdown{ z-index: 1035 !important; }

/* 顶部安全距离：按你模板常见导航高度（约 74px）预留 */
:root{ --pro-topbar-safe: 74px; }

/* bootstrap-notify 容器：下移 + 提高层级 */
/* 仅处理“从顶部出现”的提示，避免影响底部通知 */
div[data-notify="container"][data-notify-position^="top-"]{
  top: calc(env(safe-area-inset-top, 0px) + var(--pro-topbar-safe) + 10px) !important;
  z-index: 1060 !important;
}

/* 兼容：有些页面把 notify 放在 header-fixed 的容器里，会被 transform 影响；
   强制 fixed 保证跟随视口 */
div[data-notify="container"]{
  position: fixed !important;
}


/* =======================================================================
   v2026.01.04h CART 卡片封面（图片风格）
   ======================================================================= */

.page-cart .pro-prod-card{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(10, 20, 40, 0.65);
  backdrop-filter: blur(10px);
}

.page-cart .pro-prod-cover{
  position: relative;
  height: 120px;
  background-image: var(--pro-prod-cover);
  background-size: cover;
  background-position: center;
}

.page-cart .pro-prod-cover::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.65));
}

.page-cart .pro-prod-cover-inner{
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 12px 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.page-cart .pro-prod-name{
  color: rgba(255,255,255,0.95);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.25;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-cart .pro-prod-stock .badge{
  border-radius: 999px;
  padding: 0.35rem 0.55rem;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}

.page-cart .pro-prod-price{
  padding-top: 10px;
  padding-bottom: 6px;
}

.page-cart .pro-prod-price .py-2{ padding: 0 !important; }

.page-cart .pro-prod-price-main{
  color: rgba(255,255,255,0.96);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.2;
  text-align: center;
}

.page-cart .pro-prod-first{
  margin-top: 6px;
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.82);
}

.page-cart .pro-prod-desc{
  padding-top: 8px;
  padding-bottom: 10px;
}

.page-cart .pro-prod-desc-text{
  color: rgba(255,255,255,0.80);
  font-size: 12px;
  line-height: 1.55;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.55em * 3);
}

.page-cart .pro-prod-actions{
  padding-top: 10px;
  padding-bottom: 12px;
  background: rgba(255,255,255,0.03);
}

.page-cart .pro-prod-actions .btn,
.page-cart .pro-prod-actions .btn-primary{
  width: 100%;
  border-radius: 10px;
}

@media (hover:hover) and (pointer:fine){
  .page-cart .pro-prod-card:hover{
    transform: translateY(-2px);
    transition: transform 180ms ease, box-shadow 180ms ease;
    box-shadow: 0 14px 36px rgba(0,0,0,0.32);
    border-color: rgba(255,255,255,0.18);
  }
}

/* =======================================================================
   v2026.01.04i PRODUCT 产品配置：参数“图片卡片”样式
   - 参数选项改成卡片/图标（图片样式）
   - 没有后端参数时，模板内已提供默认选项
   ======================================================================= */

.page-product #configStart{ margin-top: 18px; }

.page-product .pro-config-wrap{
  background: #ffffff;
  border: 1px solid #eef2f8;
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
  padding: 18px;
}

.page-product .pro-config-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eef2f8;
  margin-bottom: 14px;
}

.page-product .pro-config-title{
  font-size: 18px;
  font-weight: 800;
  color: #0b1b3a;
  line-height: 1.2;
}

.page-product .pro-config-sub{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(11,27,58,0.65);
}

.page-product .pro-config-group{
  border: 1px solid #eef2f8;
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
}

.page-product .pro-config-group-hd{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: #0b1b3a;
  margin-bottom: 12px;
}

.page-product .pro-config-ico{
  width: 22px;
  height: 22px;
  display: inline-block;
  background: rgba(45,126,255,0.12);
  border: 1px solid rgba(45,126,255,0.25);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.page-product .pro-config-ico::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--ico);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  opacity: 0.92;
}

.page-product .pro-pickgrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.page-product .pro-pickgrid--tight{
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 6px;
}

.page-product .pro-pickgrid--time{
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  align-items: center;
}

.page-product .pro-pick{
  appearance: none;
  border: 1px solid #e7edf7;
  background: #f7f9fe;
  border-radius: 12px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.page-product .pro-pick:hover{ transform: translateY(-1px); border-color: rgba(45,126,255,0.45); }

.page-product .pro-pick.is-active{
  background: rgba(45,126,255,0.08);
  border-color: rgba(45,126,255,0.65);
  box-shadow: 0 10px 22px rgba(45,126,255,0.10);
}

.page-product .pro-pick-ico{
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 8px;
  background: rgba(11,27,58,0.08);
  position: relative;
  overflow: hidden;
}

.page-product .pro-pick-ico::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--ico);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  filter: none;
  opacity: 0.95;
}

.page-product .pro-pick-txt{
  font-weight: 800;
  font-size: 13px;
  color: #0b1b3a;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-product .pro-time-custom{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 6px 10px;
  border: 1px dashed #d9e3f6;
  border-radius: 12px;
  background: #fbfcff;
}

.page-product .pro-time-label{
  font-size: 12px;
  font-weight: 800;
  color: rgba(11,27,58,0.70);
}

.page-product .pro-time-input{
  width: 86px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #e7edf7;
  padding: 0 10px;
  font-weight: 800;
  color: #0b1b3a;
}

.page-product .pro-range{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-product .pro-range-input{ width: 100%; }

.page-product .pro-range-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(11,27,58,0.65);
}

.page-product .pro-range-val{ font-weight: 900; color: #0b1b3a; }

.page-product .pro-cred .input-group-text{ border-radius: 10px 0 0 10px; }
.page-product .pro-cred .form-control{ border-radius: 0 10px 10px 0; }

.page-product .pro-order-wrap{
  background: #ffffff;
  border: 1px solid #eef2f8;
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
  padding: 16px;
  position: sticky;
  top: calc(var(--pro-topbar-safe) + 16px);
}

.page-product .pro-order-title{
  font-size: 16px;
  font-weight: 900;
  color: #0b1b3a;
  padding-bottom: 10px;
  border-bottom: 1px solid #eef2f8;
  margin-bottom: 10px;
}

.page-product .pro-order-kv{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eef2f8;
  margin-bottom: 10px;
}

.page-product .pro-order-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: rgba(11,27,58,0.75);
}

.page-product .pro-order-row span:last-child{ font-weight: 800; color: #0b1b3a; }

.page-product .pro-price{
  display: grid;
  gap: 8px;
  padding: 10px 0 12px;
}

.page-product .pro-price-line{
  display:flex;
  align-items:center;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(11,27,58,0.75);
}

.page-product .pro-price-line span:last-child{ font-weight: 900; color: #0b1b3a; }

.page-product .pro-price-line--sale span:last-child{ color: #e11d48; }

.page-product .pro-price-sub{
  font-size: 12px;
  color: rgba(11,27,58,0.65);
}

.page-product .pro-order-btn{ border-radius: 12px; font-weight: 900; }

/* 小屏：让选择更紧凑 */
@media (max-width: 575.98px){
  .page-product .pro-config-wrap{ padding: 14px; }
  .page-product .pro-config-group{ padding: 12px; }
  .page-product .pro-pick{ padding: 9px 9px; }
}


/* v2026.01.04i /product 页底部信息居中（如模板页脚使用 flex） */
.page-product .pro-footer-bottom .d-flex{ justify-content:center !important; text-align:center; gap:14px; }

/* v2026.01.06a /product 右侧「检查订单」恢复“悬浮（跟随滚动）”质感
   - 桌面端：sticky 跟随滚动 + 更明显的悬浮阴影
   - 移动端：取消 sticky，避免遮挡 */
.page-product .pro-order-wrap{
  z-index: 20;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: box-shadow .18s ease, transform .18s ease;
}

@media (min-width: 768px){
  .page-product .pro-order-wrap{
    position: sticky;
    top: calc(var(--pro-topbar-safe) + 18px);
  }
  .page-product .pro-order-wrap:hover{
    transform: translateY(-2px);
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
  }
}

@media (max-width: 767.98px){
  .page-product .pro-order-wrap{ position: static; top: auto; }
}

/* =======================================================================
   v2026.01.06b /product 右侧订单“强制跟随滚动”兜底
   说明：部分浏览器/布局（祖先元素存在 overflow/transform）会导致 position: sticky 失效。
        JS 会在滚动时给订单块添加 pro-order-fixed / pro-order-bottom 类进行兜底。
   ======================================================================= */

@media (min-width: 768px){
  .page-product .pro-product-row{ position: relative; }
  .page-product .pro-product-row > [class*="col-"]{ align-self: stretch; }

  .page-product .pro-order-wrap.pro-order-fixed{
    position: fixed !important;
    z-index: 40;
  }
  .page-product .pro-order-wrap.pro-order-bottom{
    position: absolute !important;
    top: auto !important;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .page-product .pro-order-placeholder{ height: 0; }
}


/* v2026.01.04j PRODUCT CATEGORY SWITCH (cat_id: 1=云主机, 2=服务器租用) */

/* 分类2：服务器租用（图二）布局 */
.page-product.prod-cat-2 .pro-rent-wrap{
  display: grid;
  gap: 14px;
}

.page-product.prod-cat-2 .pro-rent-card{
  border: 1px solid rgba(20, 35, 65, 0.10);
  border-radius: 14px;
  background: #fff;
  padding: 12px 14px;
  box-shadow: 0 10px 28px rgba(11,27,58,0.08);
}

.page-product.prod-cat-2 .pro-rent-card .pro-config-group-hd{
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #0b1b3a;
}

.page-product.prod-cat-2 .pro-rent-body{
  display: grid;
  gap: 12px;
}

.page-product.prod-cat-2 .pro-rent-base{
  font-size: 13px;
  line-height: 1.75;
  color: rgba(11,27,58,0.85);
}

.page-product.prod-cat-2 .pro-rent-base p{ margin: 0 0 6px; }
.page-product.prod-cat-2 .pro-rent-base ul,
.page-product.prod-cat-2 .pro-rent-base ol{ margin: 0; padding-left: 18px; }

.page-product.prod-cat-2 .pro-rent-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.page-product.prod-cat-2 .pro-rent-label{
  font-size: 13px;
  font-weight: 600;
  color: rgba(11,27,58,0.85);
  white-space: nowrap;
}

.page-product.prod-cat-2 .pro-rent-select{
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(20,35,65,0.14);
  font-size: 13px;
}

.page-product.prod-cat-2 .pro-stepper{
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(20,35,65,0.14);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.page-product.prod-cat-2 .pro-step-btn{
  width: 36px;
  height: 36px;
  border: 0;
  background: rgba(20,35,65,0.04);
  color: #0b1b3a;
  font-weight: 800;
}

.page-product.prod-cat-2 .pro-step-input{
  width: 54px;
  height: 36px;
  border: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #0b1b3a;
  outline: none;
}

.page-product.prod-cat-2 .pro-range--compact{ width: 260px; }
.page-product.prod-cat-2 .pro-range--compact .pro-range-meta{ margin-top: 6px; }

/* 付款周期按钮更像图二 */
.page-product.prod-cat-2 .pro-pickgrid--time{
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 0 !important;
}

.page-product.prod-cat-2 .pro-pickgrid--time .pro-pick{
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
}

.page-product.prod-cat-2 .pro-pickgrid--time .pro-time-custom{
  height: 36px;
  border-radius: 12px;
}

/* 右侧检查订单：服务器租用只显示附加项 */
.page-product.prod-cat-2 .pro-order-base{
  margin: 10px 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(32, 92, 255, 0.06);
  border: 1px solid rgba(32, 92, 255, 0.10);
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(11,27,58,0.85);
}

.page-product.prod-cat-2 .pro-order-row[data-field="dc"],
.page-product.prod-cat-2 .pro-order-row[data-field="zone"],
.page-product.prod-cat-2 .pro-order-row[data-field="cpu"],
.page-product.prod-cat-2 .pro-order-row[data-field="ram"],
.page-product.prod-cat-2 .pro-order-row[data-field="line"],
.page-product.prod-cat-2 .pro-order-row[data-field="sysdisk"],
.page-product.prod-cat-2 .pro-order-row[data-field="datadisk"]{
  display: none;
}

/* v2026.01.04l FOOTER FULLWIDTH + CENTER FIX (product 页面) */
.page-product #page-footer.pro-footer{
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
}
.page-product #page-footer.pro-footer > .content{
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}



/* =========================
   OS Select (双栏系统镜像选择)
   v20260104os
   ========================= */
.pro-osselect{ position:relative; max-width:640px; }
.pro-osselect-trigger{ position:relative; }
.pro-osselect-field{
  cursor:pointer;
  background:#fff;
  padding-right:44px;
}
.pro-osselect-field[readonly]{ background:#fff; }
.pro-osselect-caret{
  position:absolute;
  right:14px;
  top:50%;
  width:0;
  height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:7px solid rgba(17, 24, 39, .55);
  transform:translateY(-45%);
  pointer-events:none;
}

.pro-osselect-panel{
  position:absolute;
  left:0;
  top:calc(100% + 10px);
  width:min(720px, calc(100vw - 30px));
  background:#fff;
  border:1px solid rgba(15, 23, 42, .10);
  border-radius:14px;
  box-shadow:0 24px 70px rgba(0,0,0,.18);
  overflow:hidden;
  display:none;
  z-index:3000;
}
.pro-osselect.is-open .pro-osselect-panel{ display:flex; }

.pro-osselect-col{
  max-height:340px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.pro-osselect-col--left{
  flex:0 0 180px;
  background:rgba(2, 6, 23, .02);
  border-right:1px solid rgba(15, 23, 42, .08);
}
.pro-osselect-col--right{
  flex:1 1 auto;
  min-width:0;
}

.pro-osselect-list{ list-style:none; margin:0; padding:10px; }
.pro-osselect-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  user-select:none;
  color:rgba(17,24,39,.86);
  font-weight:600;
  line-height:1.1;
}
.pro-osselect-item:hover{
  background:rgba(32, 92, 255, .08);
}
.pro-osselect-item.is-active{
  background:rgba(32, 92, 255, .14);
  color:#205cff;
}

.pro-osselect-icon{
  width:18px;
  height:18px;
  flex:0 0 18px;
  background:var(--ico) center/contain no-repeat;
  opacity:.9;
}

.pro-osselect-col--right .pro-osselect-item{
  font-weight:600;
}
.pro-osselect-col--right .pro-osselect-item.is-active::after{
  content:"✓";
  margin-left:auto;
  color:#205cff;
  font-weight:800;
}

/* 服务器租用（更宽） */
.pro-rent-body .pro-osselect{ max-width:none; }
.pro-rent-body .pro-osselect-panel{ width:min(760px, calc(100vw - 30px)); }

@media (max-width: 576px){
  .pro-osselect-panel{ width:calc(100vw - 20px); }
  .pro-osselect-col--left{ flex-basis:140px; }
  .pro-osselect-item{ padding:10px; }
}


/* ===== product(服务器租用) 布局修复：订单栏保持右侧 & 防止换行 ===== */
@media (min-width: 768px){
  .page-product .pro-product-row{ flex-wrap: nowrap; align-items: flex-start; }
  .page-product .pro-order-wrap{ position: sticky; top: 92px; }
}
@media (max-width: 767.98px){
  .page-product .pro-order-wrap{ margin-top: 14px; }
}

/* 主机密码刷新按钮（更精致，避免被 .btn 样式影响） */
.pro-passgroup{
  border: 1px solid #dbe4f3;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.pro-passgroup .input-group-text{
  border: 0;
  background: transparent;
}
.pro-passgroup .form-control{
  border: 0;
  background: transparent;
  height: 44px;
}
.pro-passgroup .input-group-append{ background: transparent; }

.pro-passgroup .pro-pass-refresh-btn{
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-left: 1px solid #e2ebff;
  background: linear-gradient(180deg,#ffffff 0%,#f3f7ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 12px 12px 0;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.pro-passgroup .pro-pass-refresh-btn .pro-refresh-ico{
  width: 18px;
  height: 18px;
  color: #1d48ff;
  opacity: .92;
  display: block;
  overflow: visible; /* 避免 SVG 细线/箭头在边缘被裁切 */
}
.pro-passgroup .pro-pass-refresh-btn:hover{
  background: linear-gradient(180deg,#ffffff 0%,#eaf1ff 100%);
  box-shadow: 0 10px 24px rgba(29,72,255,.14);
  transform: translateY(-1px);
}
.pro-passgroup .pro-pass-refresh-btn:hover .pro-refresh-ico{ opacity: 1; }
.pro-passgroup .pro-pass-refresh-btn:active{ transform: translateY(0); box-shadow: none; }
.pro-passgroup .pro-pass-refresh-btn:focus{ outline: none; box-shadow: 0 0 0 3px rgba(29,72,255,.18); }
.pro-passgroup .pro-pass-refresh-btn.is-rotating .pro-refresh-ico{ animation: proRotate360 .5s linear; }
@keyframes proRotate360{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }

/* ===== 修复：主机账号/主机密码输入框高度不一致 ===== */
.page-product .pro-cred .input-group{ height:44px; }
.page-product .pro-cred .input-group > *{ height:44px; }
.page-product .pro-cred .input-group-text{
  display:flex;
  align-items:center;
  padding:0 14px;
  line-height:1;
}
.page-product .pro-cred .form-control{
  height:44px;
  padding-top:0;
  padding-bottom:0;
}
.page-product .pro-passgroup .form-control{ height:44px; }
.page-product .pro-pass-refresh-btn{
  height:44px;
  min-height:44px;
  align-self:stretch;
}
.page-product .pro-pass-refresh-btn img{ display:block; }

/* ==============================
   Topbar Logo (CloudMatrix)
   ============================== */
.pro-brand-logo{
  height: 28px;
  width: auto;
  display: block;
}

@media (max-width: 576px){
  .pro-brand-logo{ height: 24px; }
  /* 手机端如需隐藏文字，取消注释 */
  /* .pro-brand-text{ display:none; } */
}