/* ============================================================
   Apple Liquid Glass Theme · 彩虹易支付全站玻璃化
   2025 WWDC Liquid Glass —— 悬浮玻璃片 + 流动彩色光斑
   仅通过覆盖样式实现，不改动任何业务 HTML / PHP 逻辑
   ============================================================ */

:root{
  --lg-bg:        #f2f4f8;                 /* 晨雾白基底 */
  --lg-ink:       #1d1d1f;                 /* Apple 近黑 */
  --lg-ink-2:     rgba(29,29,31,.60);
  --lg-ink-3:     rgba(29,29,31,.38);
  --lg-blue:      #0a84ff;
  --lg-purple:    #bf5af2;
  --lg-pink:      #ff375f;
  --lg-orange:    #ff9f0a;
  --lg-cyan:      #64d2ff;
  --lg-mint:      #30d158;

  /* 玻璃材质 */
  --lg-glass:       rgba(255,255,255,.55);
  --lg-glass-strong:rgba(255,255,255,.72);
  --lg-glass-soft:  rgba(255,255,255,.40);
  --lg-glass-border:rgba(255,255,255,.65);
  --lg-hairline:    rgba(29,29,31,.08);
  --lg-blur:        blur(40px) saturate(180%);
  --lg-shadow:      0 18px 50px -12px rgba(31,38,135,.18), 0 4px 16px -6px rgba(31,38,135,.10);
  --lg-shadow-lg:   0 30px 80px -20px rgba(31,38,135,.28), 0 8px 28px -10px rgba(31,38,135,.14);
  --lg-radius:      22px;
  --lg-radius-sm:   14px;
  --lg-ease:        cubic-bezier(.22,.68,.32,1);
}

/* ---------- 1. 全局基底与彩色光斑背景 ---------- */
html, body{
  background: var(--lg-bg) !important;
  color: var(--lg-ink) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "PingFang SC", "Helvetica Neue", "Microsoft YaHei", "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body{ position: relative; min-height:100vh; }

/* 光斑层：固定在视口，位于所有内容之下 */
body::before{
  content:"";
  position: fixed;
  inset: -20vh -20vw;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(38vw 38vw at 12% 18%, rgba(10,132,255,.40),  transparent 62%),
    radial-gradient(34vw 34vw at 88% 12%, rgba(191,90,242,.36),  transparent 60%),
    radial-gradient(36vw 36vw at 78% 82%, rgba(255,55,95,.30),   transparent 62%),
    radial-gradient(32vw 32vw at 22% 86%, rgba(255,159,10,.30),  transparent 60%),
    radial-gradient(30vw 30vw at 55% 45%, rgba(100,210,255,.28), transparent 64%),
    radial-gradient(28vw 28vw at 50% 96%, rgba(48,209,88,.22),   transparent 66%);
  filter: blur(30px) saturate(140%);
  animation: lgDrift1 32s ease-in-out infinite alternate;
  will-change: transform;
}
/* 第二层慢速光斑，制造景深 */
body::after{
  content:"";
  position: fixed;
  inset: -10vh -10vw;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(26vw 26vw at 30% 30%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(22vw 22vw at 70% 70%, rgba(255,255,255,.35), transparent 72%);
  filter: blur(20px);
  animation: lgDrift2 46s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes lgDrift1{
  0%   { transform: translate3d(0,0) scale(1); }
  50%  { transform: translate3d(3vw,-2.5vh) scale(1.08); }
  100% { transform: translate3d(-2.5vw,2vh) scale(1.04); }
}
@keyframes lgDrift2{
  0%   { transform: translate3d(0,0) scale(1.05); }
  100% { transform: translate3d(-3vw,2.5vh) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  body::before, body::after{ animation: none; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ---------- 2. 玻璃核心材质（可复用） ---------- */
.lg-glass,
.panel, .well, .list-group, .modal-content,
.dropdown-menu, .popover, .tooltip-inner,
.app-aside, .app-header .navbar-collapse, .app-header .navbar-header,
.box-shadow, .box-shadow-lg{
  background: var(--lg-glass) !important;
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-glass-border) !important;
  box-shadow: var(--lg-shadow) !important;
  border-radius: var(--lg-radius) !important;
  position: relative;
}
/* 玻璃边缘顶部高光环（折射感） */
.panel::before, .well::before, .modal-content::before,
.app-aside::before, .list-group::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  padding:1px;
  background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,255,255,.15) 40%, rgba(255,255,255,.05) 60%, rgba(255,255,255,.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
}

/* ---------- 3. 导航栏：悬浮玻璃条 ---------- */
.navbar{
  background: rgba(255,255,255,.55) !important;
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-glass-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--lg-shadow) !important;
  margin: 14px 18px;
}
.navbar-default{ background: rgba(255,255,255,.55) !important; }
#main-nav.navbar{ /* 前台首页导航 */
  position: relative; z-index: 20;
}
.navbar-fixed-top{
  margin: 0;
  border-radius: 0 !important;
  border-left:0 !important; border-right:0 !important; border-top:0 !important;
  border-bottom: 1px solid var(--lg-glass-border) !important;
}
.navbar .navbar-brand,
.navbar-brand{
  color: var(--lg-ink) !important;
  font-weight: 700;
  letter-spacing: -.01em;
}
.navbar-nav > li > a{
  color: var(--lg-ink-2) !important;
  font-weight: 500;
  border-radius: 12px;
  margin: 6px 4px;
  transition: all .25s var(--lg-ease);
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus{
  color: var(--lg-ink) !important;
  background: rgba(255,255,255,.55) !important;
}
.navbar-nav > li.active > a,
.navbar-nav > li.open > a{
  background: rgba(10,132,255,.14) !important;
  color: var(--lg-blue) !important;
}
.navbar-toggle{ border-color: var(--lg-hairline) !important; background: rgba(255,255,255,.5); }
.navbar-toggle .icon-bar{ background: var(--lg-ink-2) !important; }
.navbar-default .navbar-collapse{ border-color: var(--lg-hairline) !important; }

/* 用户中心顶部 header 玻璃条 */
.app-header{
  background: rgba(255,255,255,.6) !important;
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border-bottom: 1px solid var(--lg-glass-border) !important;
  box-shadow: 0 8px 30px -12px rgba(31,38,135,.18) !important;
}
.app-header .navbar-header{
  background: transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important;
}
.app-header .navbar-collapse{
  background: transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important;
}
.app-header .navbar-header::before, .app-header .navbar-collapse::before{ display:none; }

/* 用户中心侧边栏：竖向玻璃面板 */
.app-aside{
  background: var(--lg-glass) !important;
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border-right: 1px solid var(--lg-glass-border) !important;
  border-radius: 0 !important;
  box-shadow: 10px 0 40px -18px rgba(31,38,135,.2) !important;
}
.app-aside::before{ display:none; }
.app-aside .nav > li > a{
  color: var(--lg-ink-2);
  margin: 3px 12px;
  border-radius: 12px;
  font-weight: 500;
  transition: all .25s var(--lg-ease);
}
.app-aside .nav > li > a:hover{ background: rgba(255,255,255,.6); color: var(--lg-ink); }
.app-aside .nav > li.active > a,
.app-aside .nav > li.active > a:hover{
  background: linear-gradient(135deg, rgba(10,132,255,.92), rgba(100,210,255,.85)) !important;
  color:#fff !important;
  box-shadow: 0 8px 20px -6px rgba(10,132,255,.55);
}
.app-aside .nav .nav-sub > li > a{ color: var(--lg-ink-2); }
.app-content-body{ background: transparent !important; }

/* ---------- 4. 卡片 / 面板 / 容器 ---------- */
.panel{
  overflow: hidden;
  transition: transform .35s var(--lg-ease), box-shadow .35s var(--lg-ease);
}
.panel:hover{ transform: translateY(-4px); box-shadow: var(--lg-shadow-lg) !important; }
.panel-default > .panel-heading{
  background: rgba(255,255,255,.45) !important;
  border-bottom: 1px solid var(--lg-hairline) !important;
  color: var(--lg-ink) !important;
  font-weight: 700;
  border-radius: var(--lg-radius) var(--lg-radius) 0 0 !important;
  padding: 16px 22px;
}
.panel-body{ background: transparent !important; color: var(--lg-ink); }
.panel-footer{
  background: rgba(255,255,255,.35) !important;
  border-top: 1px solid var(--lg-hairline) !important;
}
.well{
  background: var(--lg-glass-soft) !important;
  padding: 22px;
}
/* 用户中心统计卡片 .box-shadow 已玻璃化，补充间距 */
.app-content .panel, .app-content .box-shadow{ margin-bottom: 22px; }

/* 列表组 */
.list-group{
  overflow: hidden;
  border-radius: var(--lg-radius) !important;
}
.list-group::before{ display:none; }
.list-group-item{
  background: rgba(255,255,255,.35) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--lg-hairline) !important;
  color: var(--lg-ink) !important;
  transition: background .2s var(--lg-ease);
}
.list-group-item:last-child{ border-bottom:0 !important; }
.list-group-item:hover, .list-group-item:focus{ background: rgba(255,255,255,.62) !important; }
.list-group-item.active, .list-group-item.active:hover{
  background: linear-gradient(135deg, rgba(10,132,255,.92), rgba(100,210,255,.85)) !important;
  color:#fff !important;
}
.list-group-item .badge{ background: rgba(10,132,255,.16); color: var(--lg-blue); font-weight:700; }

/* ---------- 5. 表格 ---------- */
.table{ color: var(--lg-ink); }
.table > thead > tr > th{
  background: rgba(255,255,255,.5) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--lg-hairline) !important;
  color: var(--lg-ink) !important;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}
.table > tbody > tr > td{
  border-top: 1px solid var(--lg-hairline) !important;
  vertical-align: middle;
}
.table-hover > tbody > tr:hover > td,
.table-striped > tbody > tr:nth-of-type(odd) > td{
  background: rgba(255,255,255,.42) !important;
}
.bootstrap-table .fixed-table-container{
  background: transparent !important; border-radius: var(--lg-radius);
}

/* ---------- 6. 表单 ---------- */
.form-control,
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="tel"], input[type="search"],
input[type="url"], textarea, select{
  background: rgba(255,255,255,.5) !important;
  border: 1px solid rgba(29,29,31,.12) !important;
  border-radius: 14px !important;
  color: var(--lg-ink) !important;
  box-shadow: inset 0 1px 2px rgba(31,38,135,.06) !important;
  transition: all .25s var(--lg-ease);
  height: auto; padding: 11px 16px;
}
.form-control:focus,
input:focus, textarea:focus, select:focus{
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(10,132,255,.6) !important;
  box-shadow: 0 0 0 4px rgba(10,132,255,.18), inset 0 1px 2px rgba(31,38,135,.04) !important;
  outline: none !important;
}
.form-control::placeholder{ color: var(--lg-ink-3); }
.input-group-addon{
  background: rgba(255,255,255,.4) !important;
  border: 1px solid rgba(29,29,31,.12) !important;
  border-radius: 14px !important;
  color: var(--lg-ink-2);
}
label{ color: var(--lg-ink-2); font-weight: 600; }
.help-block{ color: var(--lg-ink-3); }

/* ---------- 7. 按钮：胶囊玻璃 ---------- */
.btn{
  border-radius: 999px !important;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 10px 24px;
  border: 1px solid transparent;
  transition: transform .2s var(--lg-ease), box-shadow .25s var(--lg-ease), background .25s var(--lg-ease);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.btn:active{ transform: scale(.97); }
.btn-primary{
  background: linear-gradient(135deg, rgba(10,132,255,.96), rgba(64,156,255,.9)) !important;
  color:#fff !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  box-shadow: 0 10px 26px -8px rgba(10,132,255,.6), inset 0 1px 0 rgba(255,255,255,.4) !important;
}
.btn-primary:hover, .btn-primary:focus{
  background: linear-gradient(135deg, rgba(28,144,255,1), rgba(10,132,255,.95)) !important;
  color:#fff !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -10px rgba(10,132,255,.7), inset 0 1px 0 rgba(255,255,255,.5) !important;
}
.btn-default{
  background: rgba(255,255,255,.5) !important;
  color: var(--lg-ink) !important;
  border: 1px solid rgba(29,29,31,.14) !important;
  box-shadow: 0 4px 14px -6px rgba(31,38,135,.18), inset 0 1px 0 rgba(255,255,255,.7) !important;
}
.btn-default:hover, .btn-default:focus{
  background: rgba(255,255,255,.8) !important;
  color: var(--lg-ink) !important;
  transform: translateY(-2px);
}
.btn-success{
  background: linear-gradient(135deg, rgba(48,209,88,.95), rgba(52,199,89,.9)) !important;
  color:#fff !important; border:1px solid rgba(255,255,255,.35) !important;
  box-shadow: 0 10px 26px -8px rgba(48,209,88,.55) !important;
}
.btn-warning{
  background: linear-gradient(135deg, rgba(255,159,10,.96), rgba(255,179,64,.92)) !important;
  color:#fff !important; border:1px solid rgba(255,255,255,.35) !important;
  box-shadow: 0 10px 26px -8px rgba(255,159,10,.55) !important;
}
.btn-danger{
  background: linear-gradient(135deg, rgba(255,55,95,.96), rgba(255,69,124,.92)) !important;
  color:#fff !important; border:1px solid rgba(255,255,255,.35) !important;
  box-shadow: 0 10px 26px -8px rgba(255,55,95,.55) !important;
}
.btn-info{
  background: linear-gradient(135deg, rgba(100,210,255,.96), rgba(90,200,250,.9)) !important;
  color:#06304a !important; border:1px solid rgba(255,255,255,.35) !important;
}
.btn-link{ color: var(--lg-blue) !important; background: transparent !important; box-shadow:none !important; }
.btn-sm{ padding: 7px 16px; }
.btn-lg{ padding: 13px 30px; font-size: 16px; }
.btn-block{ border-radius: 16px !important; }

/* ---------- 8. 标签页 / 徽章 / 面包屑 / 分页 ---------- */
.nav-tabs{
  border-bottom: 1px solid var(--lg-hairline) !important;
  background: rgba(255,255,255,.35);
  border-radius: 16px 16px 0 0;
  padding: 6px 6px 0;
}
.nav-tabs > li > a{
  background: transparent !important;
  border: 0 !important;
  color: var(--lg-ink-2) !important;
  border-radius: 12px 12px 0 0 !important;
  font-weight: 600;
  margin: 0 2px;
}
.nav-tabs > li > a:hover{ background: rgba(255,255,255,.5) !important; color: var(--lg-ink) !important; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{
  background: rgba(255,255,255,.85) !important;
  color: var(--lg-blue) !important;
  border:0 !important;
  box-shadow: 0 -4px 16px -8px rgba(31,38,135,.2);
}
.badge{
  background: rgba(10,132,255,.16) !important;
  color: var(--lg-blue) !important;
  font-weight: 700; border-radius: 999px;
}
.label{ border-radius: 999px; font-weight: 600; padding: .3em .8em; }
.label-default{ background: rgba(29,29,31,.1) !important; color: var(--lg-ink) !important; }
.label-primary{ background: rgba(10,132,255,.9) !important; }
.label-success{ background: rgba(48,209,88,.92) !important; }
.label-warning{ background: rgba(255,159,10,.95) !important; }
.label-danger{ background: rgba(255,55,95,.95) !important; }
.breadcrumb{
  background: rgba(255,255,255,.4) !important;
  border:1px solid var(--lg-glass-border);
  border-radius: 14px; padding: 10px 18px;
}
.pagination > li > a, .pagination > li > span{
  background: rgba(255,255,255,.5) !important;
  border: 1px solid var(--lg-hairline) !important;
  color: var(--lg-ink-2) !important;
  border-radius: 12px !important;
  margin: 0 3px;
}
.pagination > li.active > a, .pagination > li.active > span{
  background: var(--lg-blue) !important; border-color: var(--lg-blue) !important; color:#fff !important;
}

/* ---------- 9. 下拉 / 弹窗 / 提示 ---------- */
.dropdown-menu{
  padding: 8px;
  -webkit-animation: lgPop .28s var(--lg-ease);
          animation: lgPop .28s var(--lg-ease);
}
@keyframes lgPop{ from{ opacity:0; transform: translateY(8px) scale(.98);} to{ opacity:1; transform:none; } }
.dropdown-menu > li > a{
  border-radius: 10px; padding: 9px 14px; color: var(--lg-ink); font-weight: 500;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus{
  background: rgba(10,132,255,.12) !important; color: var(--lg-blue);
}
.dropdown-menu .divider{ background: var(--lg-hairline); }
.modal-content{
  overflow: hidden;
  -webkit-animation: lgPop .32s var(--lg-ease);
          animation: lgPop .32s var(--lg-ease);
}
.modal-header{
  background: rgba(255,255,255,.4); border-bottom: 1px solid var(--lg-hairline) !important;
}
.modal-footer{ border-top: 1px solid var(--lg-hairline) !important; background: rgba(255,255,255,.3); }
.modal-backdrop{ background: rgba(29,29,31,.25); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.alert{
  border-radius: 16px !important;
  border: 1px solid var(--lg-glass-border) !important;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.alert-info{ background: rgba(100,210,255,.28) !important; color:#06304a !important; }
.alert-success{ background: rgba(48,209,88,.26) !important; color:#0a3d1c !important; }
.alert-warning{ background: rgba(255,159,10,.26) !important; color:#5a3600 !important; }
.alert-danger{ background: rgba(255,55,95,.24) !important; color:#5c0018 !important; }

/* ---------- 10. 收银台 paypage / 登录注册页 ---------- */
.pay-box, .pay_main, .order-info, .weui-panel,
.login-box, .w-xxl, .w-auto-xs{ /* 登录容器 */
  background: var(--lg-glass) !important;
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-glass-border) !important;
  border-radius: 26px !important;
  box-shadow: var(--lg-shadow-lg) !important;
}
.weui-btn_primary, .weui-btn_primary:active{
  background: linear-gradient(135deg, rgba(10,132,255,.96), rgba(64,156,255,.9)) !important;
  border-radius: 999px !important;
}
.weui-cells{
  background: transparent !important;
}
.weui-cell{ background: rgba(255,255,255,.45) !important; }

/* 登录页居中玻璃卡片 */
body > .app, .container.w-xxl{ position: relative; z-index: 1; }

/* ---------- 11. 前台首页模板（template/default） ---------- */
#main-nav .container{ padding-top: 4px; }
.screen1, .banner2, .banner3{
  background: transparent !important;
}
#myCarousel, .carousel-inner, .item{ background: transparent !important; }
.ban2_middle{
  color: var(--lg-ink) !important; font-weight: 800;
  letter-spacing: -.02em; text-shadow: 0 2px 30px rgba(255,255,255,.6);
}
.ban2_content{ color: var(--lg-ink-2) !important; }
.screen3 .h3, .screen4 .h3, .blog-head .h3, .cloud_server .h3{
  color: var(--lg-ink) !important; font-weight: 800; letter-spacing: -.02em;
}
#container_server, #server-arrange, #codebuild{
  background: var(--lg-glass) !important;
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-glass-border) !important;
  border-radius: var(--lg-radius) !important;
  box-shadow: var(--lg-shadow) !important;
  padding: 36px 24px 28px;
  transition: transform .35s var(--lg-ease), box-shadow .35s var(--lg-ease);
}
#container_server:hover, #server-arrange:hover, #codebuild:hover{
  transform: translateY(-6px); box-shadow: var(--lg-shadow-lg) !important;
}
.server-head.h4{ color: var(--lg-ink) !important; font-weight: 700; }
.server-head .h5{ color: var(--lg-ink-2) !important; }
a.btn.proceed{
  background: linear-gradient(135deg, rgba(10,132,255,.96), rgba(100,210,255,.88)) !important;
  color:#fff !important; border-radius: 999px !important;
  box-shadow: 0 12px 30px -8px rgba(10,132,255,.6) !important;
  padding: 12px 30px; font-weight: 600; display:inline-block;
}
.screen4 .col-xs-3 img, .blog-head img{
  filter: drop-shadow(0 10px 20px rgba(31,38,135,.18));
  transition: transform .35s var(--lg-ease);
}
.screen4 .col-xs-3:hover img{ transform: scale(1.08) translateY(-4px); }

/* ---------- 12. 杂项 ---------- */
/* 滚动条 */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-thumb{
  background: rgba(29,29,31,.18); border-radius: 999px;
  border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover{ background: rgba(10,132,255,.4); background-clip: content-box; }
::selection{ background: rgba(10,132,255,.25); }

hr{ border-color: var(--lg-hairline); }
.text-muted{ color: var(--lg-ink-3) !important; }
.text-primary{ color: var(--lg-blue) !important; }
a{ color: var(--lg-blue); }
a:hover{ color: #0a6fe0; }

/* 数字等宽（金额） */
.table td, .badge, .label, .money, .amount, .text-danger, .text-success{
  font-variant-numeric: tabular-nums;
}

/* 页脚 */
footer, .app-footer, .footer{
  color: var(--lg-ink-2) !important;
}
.app-footer{
  background: rgba(255,255,255,.45) !important;
  border-top: 1px solid var(--lg-glass-border) !important;
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
}

/* 内容区容器抬升到光斑之上 */
.container, .app-content, .app-content-body{ position: relative; z-index: 1; }

/* 回到顶部按钮玻璃化 */
#scroll_Top{
  background: var(--lg-glass-strong) !important;
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-glass-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--lg-shadow) !important;
}
#scroll_Top a, #scroll_Top i{ color: var(--lg-blue) !important; }

/* ============================================================
   ★ 精致度增强层 (Refinement Layer)
   排版节奏 / 更细腻玻璃 / 真实布局 / 入场动效 / 移动端
   ============================================================ */
:root{
  --lg-grad-blue: linear-gradient(135deg,#0A84FF 0%,#64D2FF 100%);
  --lg-grad-purple: linear-gradient(135deg,#BF5AF2 0%,#FF375F 100%);
  --lg-grad-warm: linear-gradient(135deg,#FF9F0A 0%,#FF375F 100%);
  --lg-grad-mint: linear-gradient(135deg,#30D158 0%,#64D2FF 100%);
  --lg-glass-shine: linear-gradient(160deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.08) 26%, rgba(255,255,255,0) 48%, rgba(255,255,255,.45) 100%);
}

/* ---- 排版基线：更优雅的字距/行高/标题 ---- */
body{ letter-spacing: .005em; line-height: 1.65; font-size:15px; }
h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5,.panel-title{
  letter-spacing: -.02em !important; color: var(--lg-ink) !important;
}
.h3{ font-size: clamp(26px, 4vw, 38px) !important; font-weight: 800; }
.h4{ font-size: 19px !important; font-weight: 700; }
.h5{ font-size: 14px !important; font-weight: 500; line-height:1.7 !important; }
p{ line-height: 1.75; }
small,.text-muted{ font-weight: 500; }

/* ---- 品牌 Logo 渐变字（前台导航 / 控制台品牌 / 收银台标题） ---- */
.navbar-brand{
  background: var(--lg-grad-blue);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent !important;
}
.navbar-brand i{ -webkit-text-fill-color: initial; }

/* ---- 更细腻的玻璃：面板内再加一层柔和高光 ---- */
.panel, .well, .modal-content, .list-group,
.dropdown-menu, .popover, .app-aside{
  background: linear-gradient(155deg, rgba(255,255,255,.72), rgba(255,255,255,.42)) !important;
}
.panel-heading{
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.28)) !important;
  display:flex; align-items:center; min-height:56px;
}
.panel-heading .panel-title{ font-size:16px; font-weight:700; }
.panel-body{ padding: 24px !important; }
.panel-default{ box-shadow: var(--lg-shadow), inset 0 1px 0 rgba(255,255,255,.9) !important; }

/* ---- 卡片/面板入场：自下而上淡入 ---- */
@keyframes lgRise{ from{ opacity:0; transform: translateY(16px); } to{ opacity:1; transform:none; } }
.screen3 .col-xs-6, .screen4 .col-xs-3,
.app-content-body .panel, .app-content-body .list-group,
.app-aside, .w-xxl, #login .panel, .pay-box{
  animation: lgRise .6s var(--lg-ease) both;
}
.screen3 .col-xs-6:nth-child(2){ animation-delay:.06s; }
.screen3 .col-xs-6:nth-child(3){ animation-delay:.12s; }
.screen3 .col-xs-6:nth-child(4){ animation-delay:.18s; }

/* ---- 按钮细节：内部顶光 + 更柔回弹 ---- */
.btn{ position:relative; overflow:hidden; }
.btn.btn-primary::after, .btn.btn-success::after, .btn.btn-warning::after, .btn.btn-danger::after{
  content:""; position:absolute; inset:0; background: var(--lg-glass-shine);
  opacity:.5; pointer-events:none; border-radius:inherit;
}
.btn{ transition: transform .22s var(--lg-ease), box-shadow .28s var(--lg-ease), filter .25s; }
.btn:hover{ filter: brightness(1.04); }

/* ---- 表单：输入图标位、分组 ---- */
.form-group{ margin-bottom: 20px; }
.form-control{ font-size:15px; }
.input-lg{ height:50px !important; font-size:16px !important; }
.input-group{ border-radius: 14px; }
.input-group .form-control{ border-radius: 14px 0 0 14px !important; }
.input-group .input-group-btn .btn, .input-group .input-group-addon{ border-radius: 0 14px 14px 0 !important; }

/* ---- 表格：更强可读性 + 金额列等宽右对齐 ---- */
.table{ margin-bottom:0; }
.table > thead > tr > th{ padding: 15px 16px; font-size:13px; text-transform:uppercase; letter-spacing:.04em; color: var(--lg-ink-3) !important; }
.table > tbody > tr > td{ padding: 15px 16px; font-size:14.5px; }
.table-hover > tbody > tr{ transition: background .18s var(--lg-ease); }
.bootstrap-table .fixed-table-toolbar .btn{ margin-bottom:8px; }

/* ---- 导航：链接下划线动效 + 当前态胶囊 ---- */
#main-nav .z_navbar > li > a, .navbar-nav > li > a{ position:relative; }
.z_navbar > li > a::after{
  content:""; position:absolute; left:50%; bottom:2px; width:0; height:2px;
  background: var(--lg-grad-blue); border-radius:2px; transform:translateX(-50%);
  transition: width .28s var(--lg-ease);
}
.z_navbar > li:hover > a::after, .z_navbar > li.active > a::after{ width:60%; }

/* ---- 用户中心/后台：侧栏更通透、内容区留白 ---- */
.app-content-body{ padding: 22px 26px !important; }
.app-aside .nav > li > a{ font-size:14.5px; }
.app-aside .nav > li > a i{ width:20px; text-align:center; margin-right:6px; opacity:.85; }
.app-header .navbar-brand{ padding-left:20px; font-size:18px; }
.app-footer{ margin: 0 26px 22px; border-radius: 16px; border:1px solid var(--lg-glass-border) !important; padding: 14px 20px !important; }
/* 侧栏收起时圆角处理 */
.app-aside-fixed .app-aside{ border-radius: 0 22px 22px 0; margin:14px 0; height:calc(100vh - 28px); }

/* 控制台统计卡：数字渐变强调 */
.app-content-body .panel .h2, .app-content-body .panel .h3,
.stat-num, .text-2x, .text-lg{ font-variant-numeric: tabular-nums; }

/* ---- 前台首页布局精修 ---- */
#main-nav .container{ min-height:64px; }
.screen1{ padding: clamp(20px,5vh,70px) 0 clamp(30px,6vh,80px); }
.ban2_middle, .ban2_text .docker > div:first-child{ font-size: clamp(30px,5vw,50px) !important; line-height:1.2 !important; font-weight:800 !important; }
.ban2_content{ font-size: clamp(15px,2vw,18px) !important; margin:14px 0 26px; }
#container_server,#server-arrange,#codebuild{ margin-bottom:26px; text-align:center; }
.screen4 .col-xs-3{ display:flex; align-items:center; justify-content:center; min-height:80px; }
.screen4 img, .blog-head img{ max-width:120px; height:auto; opacity:.92; }
.cloud_db_img img{ filter: drop-shadow(0 30px 50px rgba(10,132,255,.28)); animation: lgFloat 7s ease-in-out infinite; }
@keyframes lgFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }

/* ---- 收银台 paypage（移动端支付页）玻璃化 ---- */
body .wrap, body .layout-flex{ background: transparent; }
.content{ background: transparent !important; }
.mar20, .set_amount, .set_remark, .amount_hd{
  background: var(--lg-glass); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  border:1px solid var(--lg-glass-border); border-radius:18px; box-shadow: var(--lg-shadow);
}
.mar20{ padding:16px; }
.set_amount{ margin:14px; padding:18px 14px; }
.set_remark{ margin:14px; padding:14px; }
.amount_bd{ border-bottom: 2px solid rgba(10,132,255,.4) !important; }
.input_simu, #amount{ color: var(--lg-ink) !important; font-weight:800 !important; }
.i_money{ color: var(--lg-blue) !important; }
.selTitle{ color: var(--lg-ink) !important; font-weight:700; font-size:18px; }
.payMoney, .amount_title, .pay_amount{ color: var(--lg-ink-2) !important; }
/* 支付方式选择按钮玻璃化 */
.btn_blue, .pay_btn, .btn_p{
  background: var(--lg-grad-blue) !important; color:#fff !important;
  border-radius: 999px !important; box-shadow: 0 12px 28px -10px rgba(10,132,255,.6) !important;
  border:1px solid rgba(255,255,255,.35) !important; font-weight:600;
}
.btn_white, .btn_wt, .b_all, .b_all2{
  background: rgba(255,255,255,.6) !important; color: var(--lg-ink) !important;
  border:1px solid var(--lg-hairline) !important; border-radius:14px !important;
}
/* 数字键盘玻璃化 */
.keyboard{ background: rgba(255,255,255,.55) !important; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); border-top:1px solid var(--lg-glass-border) !important; }
.key_table .key{
  background: rgba(255,255,255,.7) !important; color: var(--lg-ink) !important;
  border:1px solid rgba(29,29,31,.06) !important; font-weight:600;
  transition: background .15s, transform .1s;
}
.key_table .key:active{ background: rgba(10,132,255,.18) !important; transform: scale(.96); }
.key_table .clear, .key_table .disable{ background: rgba(255,255,255,.35) !important; }
.copyRight{ color: var(--lg-ink-3) !important; }
/* 支付成功/错误页图标玻璃托 */
.ico_success, .pay_suc1, .sico_pay_p{ filter: drop-shadow(0 12px 24px rgba(48,209,88,.35)); }
.error_tips, .grey, .pay_stop{ color: var(--lg-ink-2) !important; }
/* 收银台弹窗里的原生 modal 已被上方玻璃化，补充 textarea/按钮 */
.modal-body textarea{
  background: rgba(255,255,255,.6); border:1px solid var(--lg-hairline); border-radius:14px;
  width:100%; padding:12px; color:var(--lg-ink);
}

/* ---- 登录/注册页：居中玻璃卡片 + 品牌渐变标题 ---- */
body > .app .navbar-brand.block, .w-xxl .navbar-brand, .w-auto-xs .navbar-brand{
  display:block; text-align:center; font-size:28px !important; font-weight:800;
  background: var(--lg-grad-blue); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  margin-bottom:6px;
}
.container.w-xxl, .container.w-auto-xs{ padding-top: 4vh; }
.nav-tabs{ background: rgba(255,255,255,.4); border-radius: 16px; padding:5px; border:1px solid var(--lg-glass-border); }
.nav-tabs > li{ width:50%; text-align:center; }
.nav-tabs > li > a{ border-radius: 12px !important; }
.nav-tabs > li.active > a{ border-radius: 12px !important; }

/* ---- 面包屑/分页/标签间距 ---- */
.breadcrumb{ margin-bottom:20px; }
.pagination{ margin:18px 0; }

/* ---- 下拉菜单阴影层次 ---- */
.dropdown-menu{ box-shadow: var(--lg-shadow-lg) !important; }

/* ---- 焦点可访问性 ---- */
a:focus-visible, .btn:focus-visible, .form-control:focus-visible{
  outline: 3px solid rgba(10,132,255,.35); outline-offset: 2px;
}

/* ---- 滚动条在玻璃侧栏内 ---- */
.app-aside::-webkit-scrollbar-thumb{ background: rgba(29,29,31,.12); }

/* ---- 移动端适配精修 ---- */
@media (max-width: 767px){
  .navbar{ margin: 8px 10px; border-radius: 16px; }
  .panel, .well{ border-radius: 18px !important; }
  .panel-body{ padding: 18px !important; }
  .app-content-body{ padding: 14px !important; }
  .table > thead > tr > th, .table > tbody > tr > td{ padding: 11px 10px; font-size:13.5px; }
  .h3{ font-size:24px !important; }
  .btn{ padding: 10px 18px; }
  .app-aside{ border-radius: 0; }
}

/* ---- 深色主按钮在浅玻璃上的对比保障 ---- */
.btn-link:hover{ text-decoration:none; }

/* ---- 选中表格行/活动列表项更明显 ---- */
.list-group-item.active .badge{ background: rgba(255,255,255,.25) !important; color:#fff !important; }

/* ---- 页面整体内容悬浮于光斑之上，避免纯色块遮挡光斑 ---- */
.app-content, .app-content-full, .container{ position:relative; z-index:1; }
.modal{ z-index: 1050; }