.background{
    position:fixed;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    z-index:-10;
    zoom: 1;
    background-color: #070b18;
    background: url(/assets/accel/img/background_sudun.svg) no-repeat;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-position: center 0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type="number"] {
    -moz-appearance: textfield;
}

.noML {
    margin-left: initial !important;
}

.hide {
    display: none;
}

.layui-tab-title .layui-this:after {
    border-radius: 5px 5px 0 0;

}

.layui-tab-title .layui-this {
    color: #737373;
}

.layui-tab-title li {
    color: #737373;
}


/*极验*/
.geetest_holder.geetest_wind {
    display: inline-block;
    vertical-align: middle;
}

.notSelection {
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*滚动条重置*/
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar-track {
    background-color: #070b18;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb { /*border-radius: 10px;*/
    background-color: #AAA;
}

.layui-row {
    margin: 0 10px;
}

.header .header-box {
    padding-top: 15px;
}

.header .header-box img {
    max-width: 150px;
    max-height: 45px;
}

.header .header-box .info {
    font-size: 16px;
    font-weight: 700;
    color: #545454;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
}

.header .header-box .query {
    display: inline-block;
    float: right;
}

.header .header-box .query a {
    color: #fff;
    display: inline-block;
    width: 119px;
    line-height: 35px;
    border-radius: 19px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-shadow: 0 5px 6px 0 rgba(73, 105, 230, .22);
    background-image: linear-gradient(135deg, #3C8CE7 10%, #00EAFF 100%);
}

.header .header-box .query a svg {
    margin-left: 18px;
    margin-right: 5px;
    vertical-align: middle;
}

.header .header-box .notice {
    margin-top: 20px;
    padding: 0 15px;
}

.header .header-box .notice .tit {
    color: #545454;
    font-size: 14px;
    font-weight: 700;
}

.header .header-box .notice .tips {
    margin-top: 5px;
    color: #515a6e;
    font-size: 12px;
    line-height: 1.5;
}


/*主体*/
.main .main-box {
    margin-top: 20px;
    background: rgba(15, 20, 40, 0.68); /* patched: Sudun glass */
    -webkit-box-shadow: 0 7px 29px 0 rgba(18, 52, 91, .11);
    box-shadow: 0 7px 29px 0 rgba(18, 52, 91, .11);
    border-radius: 6px;
    padding-top: 14px;
    padding-bottom: 20px;
}

.main-box:after { /*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.main .title, .main .cate, .main .goods {
    margin: 0 20px;
}

.main .title {
    font-size: 18px;
    font-weight: 600;
    color: #545454;
}

.main .title svg, .main .title img {
    vertical-align: middle;
}

.main .cate {
    padding-top: 20px;
    margin: 0 10px;
    font-size: 0;
}

.main .cate .cate-box {
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    min-width: 130px;
    background: #f1f1f1;
    border-radius: 10px;
    height: 67px;
    padding: 0 20px;
    margin: 0 10px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    margin-bottom: 10px;
}

.main .cate .cate-box-select {
    background-image: linear-gradient(135deg, #3C8CE7 10%, #00EAFF 100%);
    -webkit-box-shadow: 0 7px 10px 0 rgba(54, 144, 248, .23);
    box-shadow: 0 7px 10px 0 rgba(54, 144, 248, .23);
}

.main .cate .cate-box-select img {
    position: absolute;
    right: -6px;
    bottom: -19px;
}

.main .cate .cate-box p {
    font-weight: 400;
    font-size: 12px;
    color: #545454;
    margin-top: 12px;
}

.main .cate .cate-box-select p {
    color: #fff;
}

.main .cate .cate-box div {
    opacity: .76;
    color: #999;
    font-size: 12px;
    margin-top: 7px;
}

.main .cate .cate-box-select div {
    color: #fff;
}


.main .goods {
    margin-top: 10px;
    border-top: 1px solid #f7f7f7;
    padding-top: 10px;
}

.main .title-2 {
    margin-bottom: 10px;
    color: #545454;
}

.main .title-2 svg, .main .title-2 span {
    vertical-align: middle;
}

.main .goods .goods-box {
    padding: 18px;
    vertical-align: middle;
    min-width: 185px;
    min-height: 80px;
    background: #fff;
    border: 2px solid #f1f4fb;
    -webkit-box-shadow: 0 4px 10px 0 rgba(135, 142, 154, .14);
    box-shadow: 0 4px 10px 0 rgba(135, 142, 154, .14);
    border-radius: 10px;
    margin-right: 11px;
    margin-bottom: 10px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    display: inline-flex
}

.main .goods .picture {
    vertical-align: top;
    margin-right: 10px;
    display: inline-block;
    min-width: 80px;
    width: 80px;
    height: 80px;

}

.main .goods .picture img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
}

.main .goods .msg {
    vertical-align: top;
    display: inline-block;
}

.main .goods .msg .goods-name {
    margin-bottom: 10px;
    color: #545454;
    font-size: 12px;
    font-weight: 400;
    margin-top: 5px;
}

.main .goods .msg .goods-price {
    color: #3C8CE7;
    font-size: 14px;
    font-weight: 700;
}

.main .goods .msg .goods-price span {
    font-size: 12px;
    vertical-align: bottom;
}

.main .goods .msg .goods-price div {
    display: inline-block;
    background: #ffebe8;
    color: #fb636b;
    padding: 1px 3px;
    border-radius: 3px;
    font-size: 12px;
    margin-right: 5px;
}

.main .goods .msg .goods-num {
    margin-top: 3px;
}

.main .goods .msg .goods-num div {
    display: inline-block;
    width: 53px;
    height: 5px;
    background: #f3f3f3;
    position: relative;
    border-radius: 3px;
}

.main .goods .msg .goods-num div p {
    display: inline-block;
    position: absolute;
    width: 40%;
    height: 100%;
    background: linear-gradient(55deg, #65d69e, #31dd92);
    border-radius: 3px;
}

.main .goods .msg .goods-num span {
    color: #0db26a;
    font-size: 12px;
    margin-left: 10px;
    margin-right: 18px;
}

/*手机端查单*/
.query-m {
    display: none;
    position: fixed;
    width: 60px;
    height: 60px;
    background-image: linear-gradient(135deg, #3C8CE7 10%, #00EAFF 100%);
    border-radius: 50%;
    right: 20px;
    bottom: 20%;
    box-shadow: 0 5px 6px 0 rgba(73, 105, 230, .22);
}

.query-m a {
    width: 60px;
    height: 60px;
    display: inline-block;
}

.query-m svg {
    margin-left: 15px;
    margin-top: 6px;
}

.query-m span {
    color: #fff;
    display: block;
    text-align: center;
    margin-top: -5px;
    font-weight: 700;
}


/*扫码下单*/
.order-m {
    cursor: pointer;
    position: fixed;
    width: 70px;
    height: 70px;
    background-image: linear-gradient(135deg, #3C8CE7 10%, #00EAFF 100%);
    border-radius: 50%;
    right: 100px;
    bottom: 20%;
    box-shadow: 0 5px 6px 0 rgba(73, 105, 230, .22);
}

.order-m a {
    width: 70px;
    height: 70px;
    display: inline-block;
}

.order-m svg {
    margin-left: 17.5px;
    margin-top: 6px;
}

.order-m span {
    color: #fff;
    display: block;
    text-align: center;
    margin-top: -4px;
    font-weight: 700;
}

.buy {
    text-align: center;
    margin-top: 10px;
}

.buy button {
    border: initial;
    color: #fff;
    display: inline-block;
    width: 170px;
    font-size: 18px;
    font-weight: 700;
    line-height: 45px;
    border-radius: 100px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-shadow: 0 5px 6px 0 rgba(73, 105, 230, .22);
    background-image: linear-gradient(135deg, #3C8CE7 10%, #00EAFF 100%);
}

.intro {
    padding: 10px 20px;
    color: #444444;
    font-size: 14px;
    line-height: 2.2;
    letter-spacing: .5px;
    font-weight: 700;
}

/*底部*/
.footer {
    margin-top: 50px;
    margin-bottom: 15px;
    text-align: center;
    color: #9a9a9a;
}


/*首页提示框*/
.home-tips {
    border-radius: 12px !important;
}

.home-tips .layui-layer-title {
    background-image: linear-gradient(135deg, #3C8CE7 10%, #00EAFF 100%);
    color: #fff !important;
    height: 40px;
    line-height: 40px;
    border-radius: 10px 10px 0 0;
    background-color: initial;
    border-bottom: initial;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    padding: initial;
    overflow: hidden;

}

.home-tips .layui-layer-setwin {
    color: #fff;
    position: absolute;
    top: initial;
    bottom: -50px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 30px;
    height: 30px;
}

.home-tips .layui-layer-setwin a {
    position: initial;
}

.home-tips .layui-layer-content {
    padding: 10px 20px;
    color: #444444;
    font-size: 14px;
    line-height: 2.2;
    letter-spacing: .5px;
    font-weight: 700;
    word-wrap: break-word;
    word-break: normal;
}

/*扫码*/
.qr {
    text-align: center;
    position: relative;
}

.qr svg {
    display: block;
    margin: 0 auto;
}

.qr img {
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/*购买页*/
.main-box .goods-img {
    margin-left: 20px;
    margin-right: 10px;
    margin-top: 10px;
    width: calc(100% - 30px);
    height: 0;
    position: relative;
    padding-bottom: calc(100% - 40px);
}

.main-box .goods-msg {
    margin-right: 20px;
    margin-left: 10px;
    margin-top: 20px;
}

.main-box .goods-img img {
    width: calc(100% - 10px);
    box-shadow: 0 5px 6px 0 rgba(73, 105, 230, .22);
    border-radius: 5px;
    margin-top: 5px;
    /*padding: 5px;*/
    height: 100%;
    position: absolute;
    object-fit: cover;
}

.main-box .goods-msg .goods-name {
    font-weight: 700;
    font-size: 18px;
    color: #545454;
    border-bottom: 1px solid #f7f7f7;
    padding-bottom: 5px;
}

.layui-form-select dl dd.layui-this {
    /*修改下拉框的颜色*/
    background-color: #22b6f2;
}

/*tips*/
.small-tips {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11px;
    margin-left: 5px;
    line-height: initial;
}

.tips-cyan {
    background: #ccdcf6;
    color: #2F4056;
}

.tips-pink {
    background: #ffebe8;
    color: #fb636b;
}

.tips-green {
    background: #dff7ea;
    color: #28C76F;
}

.tips-yellow {
    background: #fbf7da;
    color: #d6b900;
}

.tips-blue {
    background: #cadbff;
    color: #3C8CE7;
}

.tips-red {
    background: #ffd3d3;
    color: #FA016D;
}

.tips-black {
    background: #262626;
    color: #ffffff
}

.pay {
    margin-top: 20px;
    border-top: 1px solid #f7f7f7;
    padding-top: 10px;
}

.pay-type {
    display: inline-block;
    text-align: center;
    background: #f7f7f7;
    border: 2px solid #e7e7e7;
    border-radius: 5px;
    position: relative;
    padding: 7px 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}

.pay-type svg {
    vertical-align: middle;
}

.pay-select {
    border: 2px solid rgb(51, 105, 255);
    background: rgb(248, 250, 255);
    color: rgb(51, 105, 255);
}

.sale {
    margin-top: 5px;
    margin-left: -5px;
}

.sale .small-tips {
    margin-bottom: 5px;
}

.l-msg {
    color: #999;
    width: 72px;
    display: inline-block;
    vertical-align: middle;
}

.price {
    margin-top: 5px;
}

.price .price-sign {
    color: #e4393c;
    font-size: 16px;
}

.price .price-num {
    color: #e4393c;
    font-size: 22px;
}

.price .price-c {
    margin-left: 5px;
    color: #666;
    font: 12px/150% tahoma, arial, Microsoft YaHei, Hiragino Sans GB, "\u5b8b\u4f53", sans-serif;
}

.entry {
    margin-top: 15px;
}

.pay-num {
    width: 50px !important;
    text-align: center;
    font-size: 20px !important;
}

.sub svg, .add svg {
    vertical-align: middle;
    margin-top: -7px;
    cursor: pointer;
}

.input input {
    display: inline-block;
    padding: 0 5px;
    height: 35px;
    width: 300px;
    font-weight: 500;
    font-size: 14px;
    color: #999;
    background: #fff;
    border: 1px solid #f0f0f0;
    -webkit-box-shadow: 0 4px 10px 0 rgba(135, 142, 154, .07);
    box-shadow: 0 4px 10px 0 rgba(135, 142, 154, .07);
    border-radius: 4px;
    overflow: hidden;
}

.code img {
    height: 35px;
    border-radius: 4px;
    border: 1px solid #f0f0f0;
    vertical-align: middle;
    margin-top: -3px;
}

.code input {
    width: 178px !important;
}

#wait-geetest-captcha {
    color: #999;
}

.err_title {
    color: #545454;
    font-size: 20px;
    font-weight: 700;
    margin-top: 20px;
}

.err_content {
    margin-top: 30px;
    margin-bottom: 30px;
    color: #737373;
}

.err_but {
    padding-bottom: 100px;
}

.btn a, .btn button {
    border: initial;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    display: inline-block;
    width: 160px;
    line-height: 45px;
    margin-top: 15px;
    border-radius: 100px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-shadow: 0 5px 6px 0 rgba(73, 105, 230, .22);
    background-image: linear-gradient(135deg, #3C8CE7 10%, #00EAFF 100%);
}

.pay-title {
    color: #737373;
    font-weight: 700;
    font-size: 20px;
    margin: 0 15px;
}

.order-list {
    margin-left: initial;
    margin-right: initial;
    margin-top: 10px;
    border-bottom: 1px solid #f7f7f7;
    padding-bottom: 5px;
}

.info-ui {
    color: #737373;
}

.info-ui strong {
    width: 30%;
    margin-bottom: 3px;
    text-align: right;
    display: inline-block;
}

.order-info {
    width: calc(100% - 12px);
    height: 75px;
    overflow-wrap: break-word;
    padding: 5px;
    overflow: auto;
    resize: none !important;
    border: 1px solid #f0f0f0;
    -webkit-box-shadow: 0 4px 10px 0 rgba(135, 142, 154, .07);
    box-shadow: 0 4px 10px 0 rgba(135, 142, 154, .07);
    border-radius: 4px;
}

/*手机端适应*/
@media (max-width: 768px) {
    body {
        background: initial;
    }
    .header {
        background-image: linear-gradient(135deg, #3C8CE7 10%, #00EAFF 100%);
        color: #fff;
        height: 205px;
        margin-bottom: -145px;
        border-radius: 0 0 10px 10px;
    }

    .header .info {
        color: #fff !important;
    }

    .query-m {
        display: initial;
    }

    .order-m {
        display: none;
    }

    .input input {
        width: calc(100% - 95px);
    }

    .code input {
        width: calc(100% - 219px) !important;
    }

    .main-box .goods-msg {
        margin-left: 20px;
    }

    .main .goods .goods-price div {
        margin-bottom: 5px;
    }

    .geetest_holder.geetest_wind {
        margin-top: 10px;
    }

    .order-info {
        margin-top: 10px;
    }
}

@media (max-width: 425px) {
    .main .cate .cate-box {
        min-width: calc(50% - 60px);
    }
}


/* ===== ACCEL THEME OVERRIDES (VPN/加速营销风) ===== */

:root{
  --bg:#050814;
  --card:#0b1026;
  --card2:#0a1630;
  --text:#e9ecf8;
  --muted:#9aa7c4;
  --line:rgba(255,255,255,.10);
  --glow1:#7c3aed;
  --glow2:#22d3ee;
  --glow3:#38bdf8;
  --good:#22c55e;
  --warn:#f59e0b;
  --bad:#ef4444;
  --radius:18px;
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --max:1120px;
  --font: ui-sans-serif, system-ui, -apple-system, "Inter", "PingFang SC", "Microsoft YaHei", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(124,58,237,.25), transparent 60%),
    radial-gradient(1000px 700px at 80% 20%, rgba(34,211,238,.18), transparent 55%),
    radial-gradient(900px 600px at 50% 95%, rgba(56,189,248,.16), transparent 55%),
    linear-gradient(180deg, #050814, #040612 60%, #03040d);
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:0 18px}
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(5,8,20,.6);
  backdrop-filter: blur(16px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:68px;
}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px}
.brand-badge{
  width:38px; height:38px; border-radius:12px;
  background:
    url('/assets/accel/img/logo.png') center/contain no-repeat,
    radial-gradient(circle at 30% 30%, rgba(34,211,238,.28), rgba(124,58,237,.24));
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 12px 42px rgba(34,211,238,.10);
}
.nav-links{display:flex; gap:16px; align-items:center; color:var(--muted); font-weight:600}
.nav-links a{padding:10px 10px; border-radius:12px}
.nav-links a:hover{color:var(--text); background:rgba(255,255,255,.06)}
.nav-cta{display:flex; gap:10px; align-items:center}
.nav-toggle{display:none; align-items:center; justify-content:center; gap:0; width:44px; height:44px;
  border-radius:14px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06); cursor:pointer; padding:0;
}
.nav-toggle span{display:block; width:18px; height:2px; background:rgba(255,255,255,.86); border-radius:9px; margin:2px 0}
.nav-toggle:hover{background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.20)}
/* ===== NAV CLICK + WRAP FIX ===== */
.nav-links a,
.nav-cta a.btn,
.nav-cta button.btn{white-space:nowrap;}
.nav{overflow:visible;}


/*
 * 说明：accel 原主题大量使用 <div class="btn"> 作为“按钮容器”，
 * 而本套深色主题用 .btn 作为“按钮本体”（a/button）。
 * 为避免样式互相污染，这里将 .btn 限定为 a.btn / button.btn。
 */
a.btn, button.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 14px;
  border-radius:14px;
  font-weight:700;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  user-select:none;
}
a.btn:hover, button.btn:hover{transform: translateY(-1px); background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.20)}
a.btn.primary, button.btn.primary{
  background: linear-gradient(90deg, rgba(124,58,237,.95), rgba(34,211,238,.88));
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 18px 50px rgba(124,58,237,.22);
}
a.btn.primary:hover, button.btn.primary:hover{filter: brightness(1.04)}
a.btn.small, button.btn.small{padding:9px 12px; border-radius:12px; font-weight:700}
.pill{
  display:inline-flex; gap:8px; align-items:center;
  padding:8px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:var(--muted);
  font-weight:700;
}
.pill .dot{width:8px; height:8px; border-radius:99px; background:linear-gradient(90deg,var(--glow2),var(--glow1))}
.hero{
  position:relative;
  padding:70px 0 40px;
}
.hero-grid{
  display:grid; grid-template-columns: 1.18fr .82fr;
  gap:26px; align-items:start;
}
.h-title{
  font-size:46px; line-height:1.08;
  margin:14px 0 12px;
  letter-spacing:-.5px;
}
.h-title .grad{
  background: linear-gradient(90deg, rgba(34,211,238,1), rgba(124,58,237,1), rgba(56,189,248,1));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.h-sub{color:var(--muted); font-size:16px; line-height:1.7; max-width:56ch}
.hero-actions{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}
.kpis{display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:22px}
.kpi{
  padding:14px 14px; border-radius:var(--radius);
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 14px 35px rgba(0,0,0,.25);
}
.kpi b{display:block; font-size:18px}
.kpi span{color:var(--muted); font-weight:650; font-size:12.5px}

.panel{
  border-radius:24px;
  border:1px solid var(--line);
  background: radial-gradient(120% 120% at 0% 0%, rgba(34,211,238,.12), rgba(124,58,237,.10) 40%, rgba(255,255,255,.04) 70%);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.panel-inner{padding:18px}
.banner{
  padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.04);
}
.banner strong{font-size:13px}
.countdown{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.timer{
  display:flex; gap:6px; align-items:center;
  padding:8px 10px; border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.16);
  font-weight:800;
}
.timer small{color:var(--muted); font-weight:800}
.note{color:var(--muted); font-weight:650; font-size:12.5px}

.section{padding:46px 0}
.section h2{
  margin:0 0 10px;
  font-size:24px;
  letter-spacing:-.2px;
}
.section p.lead{margin:0 0 18px; color:var(--muted); line-height:1.7}

.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.card{
  border-radius:var(--radius);
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  padding:16px;
  box-shadow: 0 16px 45px rgba(0,0,0,.22);
}
.card h3{margin:0 0 8px; font-size:16px}
.card p{margin:0; color:var(--muted); line-height:1.65; font-weight:600; font-size:13.5px}
/*
 * NOTE:
 * accel 主题的业务页面（购买/订单/支付等）大量使用 <svg class="icon">。
 * 早期这里的 .icon 规则是为首页卡片上的「emoji 图标块」准备的，
 * 但会误伤 svg 导致尺寸/布局错乱（例如购买页图标被放大、遮挡表单）。
 * 因此将样式限定为 div.icon，仅作用于首页的图标容器。
 */
div.icon{
  width:40px; height:40px; border-radius:14px;
  background:
    radial-gradient(120% 120% at 20% 20%, rgba(56,189,248,.22), rgba(124,58,237,.12) 38%, rgba(255,255,255,.06) 78%),
    rgba(12,18,32,.55);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12) inset,
    0 10px 28px rgba(0,0,0,.26);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:10px;
}
div.icon .ico{width:22px; height:22px; color:rgba(255,255,255,.92)}
div.icon svg{opacity:.95}

.pricing{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.plan{
  position:relative;
  border-radius:22px;
  border:1px solid var(--line);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(34,211,238,.10), rgba(124,58,237,.10) 40%, rgba(255,255,255,.04) 80%);
  box-shadow: var(--shadow);
  padding:18px;
}
.plan .tag{
  position:absolute; top:14px; right:14px;
  font-size:12px; font-weight:900;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
  color:rgba(255,255,255,.92);
}
.plan.reco{
  border-color: rgba(34,211,238,.28);
  box-shadow: 0 24px 70px rgba(34,211,238,.10), var(--shadow);
}
.plan h3{margin:0 0 4px; font-size:16px}
.plan .desc{color:var(--muted); font-weight:650; font-size:13px; line-height:1.65}
.price{
  margin:14px 0 12px;
  display:flex; align-items:baseline; gap:8px;
}
.price b{font-size:34px; letter-spacing:-.5px}
.price span{color:var(--muted); font-weight:800}
.ul{
  margin:0; padding:0; list-style:none;
  display:grid; gap:10px;
}
.ul li{
  display:flex; gap:10px; align-items:flex-start;
  color:rgba(255,255,255,.92);
  font-weight:650;
  line-height:1.55;
}
.check{
  width:18px; height:18px; border-radius:6px;
  background: rgba(34,197,94,.18);
  border:1px solid rgba(34,197,94,.35);
  margin-top:2px;
  display:flex; align-items:center; justify-content:center;
}
.subgrid{
  display:grid; grid-template-columns: 1fr 1fr;
  gap:14px;
}
.map{
  border-radius:22px;
  border:1px solid var(--line);
  background: radial-gradient(100% 120% at 20% 10%, rgba(56,189,248,.16), rgba(124,58,237,.10), rgba(255,255,255,.03));
  padding:18px;
  min-height:320px;
  position:relative;
  overflow:hidden;
}
.map::after{
  content:"";
  position:absolute; inset:-80px;
  background:
    radial-gradient(circle at 30% 40%, rgba(34,211,238,.28), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(124,58,237,.24), transparent 55%);
  filter: blur(26px);
  opacity:.75;
}
.map .in{position:relative; z-index:1}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.badge{
  padding:9px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.14);
  color:rgba(255,255,255,.9);
  font-weight:800;
  font-size:12.5px;
}
.badge em{color:var(--muted); font-style:normal; font-weight:900}
.metric{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  margin-top:10px;
}
.metric b{font-size:13px}
.metric span{color:var(--muted); font-weight:900; font-size:12.5px}
.bar{
  height:8px; border-radius:99px; background: rgba(255,255,255,.08);
  overflow:hidden; margin-top:8px;
}
.bar > i{
  display:block; height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(34,211,238,.9), rgba(124,58,237,.9));
  border-radius:99px;
  transition: width 1.2s ease;
}

.faq{display:grid; gap:12px}
.qa{
  border-radius:18px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  padding:14px 14px;
}
.qa summary{
  cursor:pointer;
  font-weight:900;
}
.qa p{color:var(--muted); margin:10px 0 0; line-height:1.7; font-weight:650}

.footer{
  border-top:1px solid var(--line);
  padding:26px 0;
  color:var(--muted);
  font-weight:650;
}
.footgrid{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
.small{font-size:12.5px}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .subgrid{grid-template-columns:1fr}
  .h-title{font-size:40px}
}

/* ===== ACCEL HOME: NAV + HERO RESPONSIVE POLISH ===== */
@media (max-width: 1024px){
  .nav-inner{flex-wrap:wrap; height:auto; padding:10px 0}
  .nav-links{display:none; width:100%; order:3; flex-direction:column; align-items:flex-start; flex-wrap:nowrap; gap:8px; padding:10px 0 4px\}
  .nav.nav-open .nav-links{display:flex}
  .nav-cta{width:100%; order:2; justify-content:flex-end; flex-wrap:wrap}
  .nav-toggle{display:inline-flex}
}

@media (max-width: 560px){
  .container{padding:0 14px}
  .hero{padding:56px 0 28px}
  .h-title{font-size:32px}
  .h-sub{font-size:14px}
  .kpis{grid-template-columns:1fr; gap:12px}
  .banner{flex-direction:column; align-items:flex-start}
  .countdown{width:100%; justify-content:flex-start}
  .panel-inner{padding:14px}
}


/* ===== ACCEL BUY PAGE FIX ===== */
.accel-buy-wrap {
  position: relative;
  max-width: 420px;
  margin: 0 auto;
  background: transparent;
}

.accel-buy-wrap img {
  max-width: 100%;
  height: auto;
}

.accel-buy-wrap .buy-form,
.accel-buy-wrap .layui-form {
  background: rgba(15, 20, 40, 0.55);
  border-radius: 16px;
  padding: 16px;
}



/* ===== ACCEL BUY LAYOUT OVERRIDE (keep luna logic, fix image/form overlap) ===== */
body.accel-buy .main-box .goods-img{
  width: 260px;
  height: auto;
  padding-bottom: 0 !important;
  margin: 10px auto 0 auto;
}
body.accel-buy .main-box .goods-img img{
  position: static !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  margin-top: 0 !important;
}
body.accel-buy .main-box .goods-msg{
  margin-top: 10px;
}
@media (max-width: 768px){
  body.accel-buy .layui-col-md4,
  body.accel-buy .layui-col-md8{
    width: 100% !important;
    float: none !important;
  }
  body.accel-buy .main-box{
    margin: 12px 12px !important;
  }
}


/* ===== FIX: 页面任意位置出现“可编辑光标” =====
 * 常见原因：误设置了 contenteditable / designMode，或页面被某些隐藏输入框抢焦点。
 * 这里通过 caret-color 做兜底：默认隐藏插入光标，仅在表单输入框内显示。
 */
body{caret-color: transparent;}
form input,
form textarea,
.layui-layer input,
.layui-layer textarea,
form [contenteditable="true"]{caret-color: auto;}


/* ===== ACCEL BUY STYLE POLISH =====
 * 购买页（body.accel-buy）沿用 luna 的结构，但适配 accel 深色主题，并修复表单布局。
 */
body.accel-buy .main .main-box{
  background: rgba(15, 20, 40, 0.55);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  box-shadow: var(--shadow);
  color: var(--text);
}
body.accel-buy .main .title,
body.accel-buy .main .title-2{
  border-bottom-color: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.92);
}
body.accel-buy .main .title span,
body.accel-buy .main .title-2 span{
  color: rgba(255,255,255,.92);
}
body.accel-buy .main .title svg,
body.accel-buy .main .title img,
body.accel-buy .main .title-2 svg,
body.accel-buy .main .title-2 img{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
body.accel-buy .main-box .goods-msg .goods-name{
  color: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
body.accel-buy .money{color: rgba(255,255,255,.92);}
body.accel-buy .l-msg{color: var(--muted);}

/* 表单行：用 flex 代替固定宽度，防止图标/输入框换行错位 */
body.accel-buy .main-box .goods-msg .entry{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
body.accel-buy .main-box .goods-msg .entry .l-msg{
  flex:0 0 72px;
}
body.accel-buy .main-box .goods-msg .entry .input{
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  min-width: 220px;
}
body.accel-buy .main-box .goods-msg .entry .input input{
  flex:1;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
}
body.accel-buy .main-box .goods-msg .entry .input input::placeholder{
  color: rgba(154,167,196,.80);
}
body.accel-buy .sub,
body.accel-buy .add{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* 支付方式：深色卡片化 */
body.accel-buy .pay{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}
body.accel-buy .pay-type{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.90);
}
body.accel-buy .pay-select{
  border-color: rgba(34,211,238,.55);
  background: rgba(34,211,238,.12);
  color: rgba(255,255,255,.96);
}

/* 下单按钮：与 accel 主按钮风格一致 */
body.accel-buy .buy button{
  background: linear-gradient(90deg, rgba(124,58,237,.95), rgba(34,211,238,.88));
  border: 0;
  border-radius: 14px;
  height: 44px;
  line-height: 44px;
  padding: 0 22px;
  box-shadow: 0 18px 50px rgba(124,58,237,.22);
}
body.accel-buy .buy button span{
  color: rgba(255,255,255,.96);
  font-weight: 800;
  letter-spacing:.2px;
}
body.accel-buy .buy button:hover{filter: brightness(1.04);}

@media (max-width: 768px){
  body.accel-buy .main-box .goods-msg .entry .l-msg{
    flex:0 0 100%;
    width:100%;
  }
  body.accel-buy .main-box .goods-msg .entry .input{
    min-width: 0;
    width:100%;
  }
  body.accel-buy .buy button{width:100%;}
}


/* =========================================================
   SuDun Premium UI Upgrade
   - 更高端的深色科技感
   - 订单查询/支付页暗色玻璃化（不再“大白块”）
   - 活动营销组件（Banner + 悬浮入口 + 倒计时 + 复制券码）
   ========================================================= */

:root{
  /* 品牌色：蓝 + 青（更贴近你项目主视觉） */
  --glow1:#3C8CE7;
  --glow2:#00EAFF;
  --glow3:#38BDF8;

  --line: rgba(255,255,255,.12);
  --radius: 22px;
  --shadow: 0 28px 100px rgba(0,0,0,.55);
}

body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* 轻噪点质感（高级感来源） */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.06;
  mix-blend-mode: overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

/* 标题渐变更贴合品牌色 */
.h-title .grad{
  background: linear-gradient(90deg, rgba(0,234,255,1), rgba(60,140,231,1), rgba(56,189,248,1));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* 主按钮改为蓝青渐变（更符合 SuDun） */
a.btn.primary, button.btn.primary{
  background: linear-gradient(90deg, rgba(60,140,231,.98), rgba(0,234,255,.88)) !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: 0 20px 60px rgba(60,140,231,.24);
}
a.btn.primary:hover, button.btn.primary:hover{filter: saturate(1.06) brightness(1.05)}

/* 首页小图标块也换成蓝青 */
div.icon{
  background: radial-gradient(circle at 30% 30%, rgba(0,234,255,.95), rgba(60,140,231,.88));
}

/* 统一玻璃卡片的「渐变描边」：卡片/套餐/面板/订单盒子 */
.card, .plan, .panel, .kpi,
.page-order .main .main-box{
  position: relative;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.card::after, .plan::after, .panel::after, .kpi::after,
.page-order .main .main-box::after{
  content:"";
  position:absolute;
  inset:0;
  padding:1px;
  border-radius:inherit;
  background: linear-gradient(90deg,
    rgba(60,140,231,.55),
    rgba(0,234,255,.35),
    rgba(168,85,247,.22)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
  opacity:.85;
}

/* ========== 套餐角标：推荐/热卖/可购（更像商业站） ========== */
.plan .tag.reco{
  background: linear-gradient(90deg, rgba(60,140,231,.98), rgba(0,234,255,.86));
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 16px 40px rgba(60,140,231,.18);
}
.plan .tag.hot{
  background: rgba(245,158,11,.18);
  border-color: rgba(245,158,11,.35);
}
.plan .tag.ok{
  background: rgba(34,197,94,.16);
  border-color: rgba(34,197,94,.32);
}

/* ========== 订单查询/支付相关页面：暗色玻璃化（解决“过白”问题） ========== */
.page-order .main{
  padding: 56px 0 80px;
}

.page-order .main .main-box{
  background: radial-gradient(120% 120% at 0% 0%, rgba(0,234,255,.12), rgba(60,140,231,.10) 42%, rgba(255,255,255,.04) 78%) !important;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  box-shadow: var(--shadow);
  color: var(--text);
  padding: 18px 18px 22px !important;
}

/* 标题/分割线 */
.page-order .pay-title{
  display:flex;
  align-items:center;
  gap:10px;
  color: rgba(255,255,255,.95);
  margin: 0 0 16px;
  font-weight: 950;
  letter-spacing: -0.2px;
}
.page-order .order-list{
  border-bottom: 1px solid rgba(255,255,255,.10);
}

/* 订单查询页提示文案（原模板为 inline style，统一成高级提示条） */
.page-order .sd-order-tip{
  margin: 6px auto 18px;
  max-width: 56ch;
  text-align:center;
  color: rgba(154,167,196,.90);
  font-size: 13.5px;
  font-weight: 750;
  line-height: 1.6;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

/* 内容区不要白底 */
.page-order .layui-card-body,
.page-order .layui-tab-content{
  background: transparent !important;
}

/* Tab 高级化 */
.page-order .layui-tab-title{
  display:flex;
  gap:10px;
  padding:6px;
  height:auto;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
}
.page-order .layui-tab-title li{
  margin:0 !important;
  border:0 !important;
  border-radius: 10px;
  padding: 0 14px;
  height:40px;
  line-height:40px;
  color: rgba(255,255,255,.70);
}
.page-order .layui-tab-title li.layui-this{
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.10);
}
.page-order .layui-tab-title .layui-this:after{display:none !important;}
.page-order .layui-tab-content{padding-top: 18px;}

/* 输入框暗色 */
.page-order .layui-input,
.page-order .layui-textarea{
  background: rgba(2,6,23,.55) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: 12px !important;
}
.page-order .layui-input:focus,
.page-order .layui-textarea:focus{
  border-color: rgba(0,234,255,.55) !important;
  box-shadow: 0 0 0 4px rgba(0,234,255,.14) !important;
}

/* 兼容旧模板：订单页仍在使用 .entry/.input 结构（非 layui-input） */
.page-order .entry{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}
.page-order .l-msg{
  width:auto;
  color: rgba(255,255,255,.70);
  font-weight: 850;
}
.page-order .input{
  flex: 1 1 380px;
  display:flex;
  justify-content:center;
}
.page-order .input input{
  width: min(520px, 100%);
  height: 44px;
  padding: 0 14px;
  background: rgba(2,6,23,.55) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.page-order .input input::placeholder{color: rgba(154,167,196,.80);}
.page-order .input input:focus{
  outline: none;
  border-color: rgba(0,234,255,.55) !important;
  box-shadow: 0 0 0 4px rgba(0,234,255,.14) !important;
}

/* 旧模板按钮（div.btn > a/button）在订单页上也对齐高端风格 */
.page-order .btn a,
.page-order .btn button{
  width: min(320px, 100%) !important;
  height: 46px !important;
  line-height: 46px !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  letter-spacing: .2px;
  border-radius: 999px !important;
  box-shadow: 0 16px 40px rgba(60,140,231,.22) !important;
  background-image: linear-gradient(90deg, rgba(60,140,231,.98), rgba(0,234,255,.88)) !important;
}
.page-order .btn a:hover,
.page-order .btn button:hover{
  transform: translateY(-1px);
  filter: saturate(1.05) brightness(1.02);
}

/* 按钮统一 */
.page-order .layui-btn{
  border-radius: 999px !important;
  font-weight: 900;
}
.page-order .layui-btn:not(.layui-btn-primary){
  color: #061021 !important;
  background: linear-gradient(90deg, rgba(60,140,231,.98), rgba(0,234,255,.88)) !important;
  box-shadow: 0 16px 34px rgba(60,140,231,.22);
}
.page-order .layui-btn:hover{transform: translateY(-1px); filter: saturate(1.05)}

/* 信息列表卡片 */
.page-order .info-ui{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  box-shadow: 0 16px 45px rgba(0,0,0,.22);
}
.page-order .info-ui strong{color: rgba(255,255,255,.88);}

/* 表格暗色 */
.page-order .layui-table{
  background: transparent !important;
  color: rgba(255,255,255,.86);
}
.page-order .layui-table th{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.92);
}

.page-order .layui-table td{
  border-color: rgba(255,255,255,.08) !important;
}

/* ===== QRPay page (扫码支付) ===== */
.page-order-qrpay .qrpay-head{
  text-align:center;
  margin: 10px 0 16px;
  color: rgba(255,255,255,.88);
}
.page-order-qrpay .qrpay-label{color: var(--muted); font-weight:800}
.page-order-qrpay .qrpay-payname{
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  margin: 0 6px;
  font-weight: 900;
}
.page-order-qrpay .qrpay-expire{color: rgba(154,167,196,.92)}

.page-order-qrpay .qrpay-card{
  width: 320px;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 14px 14px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.page-order-qrpay .qrpay-card img{display:block; margin: 10px auto 0; border-radius: 12px}
.page-order-qrpay .product-pay-price{margin: 2px 0 8px; color: rgba(255,255,255,.86)}
.page-order-qrpay .product-pay-price b{color: rgba(255,255,255,.96); font-size: 18px}
.page-order-qrpay .qrpay-openapp a{
  display:inline-flex;
  width: min(320px, 100%);
  justify-content: center;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 950;
  color: #061021;
  background: linear-gradient(90deg, rgba(60,140,231,.98), rgba(0,234,255,.88));
  box-shadow: 0 16px 40px rgba(60,140,231,.22);
}
.page-order-qrpay .qrpay-openapp a:hover{transform: translateY(-1px); filter: saturate(1.05) brightness(1.02)}

/* ===== Bill page (确认订单) ===== */
.page-order-bill .bill-head{
  text-align:center;
  margin: 10px 0 14px;
}
.page-order-bill .bill-warn{
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.28);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  margin: 0 4px;
}
.page-order .td-right{
  text-align:right;
  color: rgba(154,167,196,.92);
  width: 48%;
}



/* 兼容性兜底：只有在浏览器支持 mask-composite 时才启用「渐变描边」伪元素。
   否则使用原本的 border（避免某些浏览器不支持 mask 时出现整块叠色）。 */
.card::after, .plan::after, .panel::after, .kpi::after,
.page-order .main .main-box::after{display:none;}

@supports (-webkit-mask: none) and (-webkit-mask-composite: xor){
  .card::after, .plan::after, .panel::after, .kpi::after,
  .page-order .main .main-box::after{display:block;}
}
@supports (mask-composite: exclude){
  .card::after, .plan::after, .panel::after, .kpi::after,
  .page-order .main .main-box::after{display:block;}
}


/* ===== RESPONSIVE FIX: background min-width ===== */
@media (max-width: 980px){
  .background{min-width:0 !important; width:100% !important;}
}


/* ===== BUY PAGE BACKGROUND + TOP NAV CONSISTENCY ===== */
body.accel-buy .main{
  padding: 32px 0 60px;
  min-height: calc(100vh - 68px);
}
body.accel-buy .main .main-box{
  background: radial-gradient(120% 120% at 0% 0%, rgba(124,58,237,.18), rgba(34,211,238,.10) 42%, rgba(255,255,255,.04) 78%);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
@media (max-width: 560px){
  body.accel-buy .nav-inner{padding:10px 0}
  body.accel-buy .nav-links a{width:100%;}
}

/* ===== SUDUN UI POLISH (auto) ===== */
:root{
  --sd-accent: #3C8CE7;
  --sd-accent2: #00EAFF;
  --sd-card: rgba(15, 20, 40, .68);
  --sd-card-strong: rgba(15, 20, 40, .82);
  --sd-border: rgba(255,255,255,.14);
  --sd-text: rgba(255,255,255,.92);
  --sd-muted: rgba(255,255,255,.70);
  --sd-shadow: 0 18px 55px rgba(0,0,0,.35);
}

/* Buy page: make the big white panels "glass" (works even if body_class is missing) */
body.accel-buy .main-box,
body.accel-buy .main .main-box,
.accel-buy .main-box,
.accel-buy .main .main-box {
  background: var(--sd-card) !important;
  border: 1px solid var(--sd-border) !important;
  border-radius: 22px !important;
  box-shadow: var(--sd-shadow) !important;
  color: var(--sd-text) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Titles / separators */
body.accel-buy .main .title,
body.accel-buy .main .title-2,
.accel-buy .main .title,
.accel-buy .main .title-2 {
  color: var(--sd-text) !important;
  border-bottom-color: rgba(255,255,255,.12) !important;
}
body.accel-buy .main .title span,
body.accel-buy .main .title-2 span,
.accel-buy .main .title span,
.accel-buy .main .title-2 span {
  color: var(--sd-text) !important;
}

/* Form inputs */
body.accel-buy .layui-form-pane .layui-input,
body.accel-buy .layui-form-pane .layui-textarea,
.accel-buy .layui-form-pane .layui-input,
.accel-buy .layui-form-pane .layui-textarea {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: var(--sd-text) !important;
  border-radius: 12px !important;
}
body.accel-buy .layui-form-pane .layui-input::placeholder,
.accel-buy .layui-form-pane .layui-input::placeholder {
  color: rgba(255,255,255,.55);
}

/* Payment buttons */
body.accel-buy .pay-type,
.accel-buy .pay-type {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 12px !important;
  color: var(--sd-text) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.20);
}
body.accel-buy .pay-select,
.accel-buy .pay-select {
  border-color: rgba(60,140,231,.9) !important;
  background: rgba(60,140,231,.16) !important;
  box-shadow: 0 0 0 4px rgba(60,140,231,.12);
}

/* Primary CTA (Submit) */
body.accel-buy .buy button,
.accel-buy .buy button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  height: 52px;
  padding: 0 26px;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .5px;
  background: linear-gradient(90deg, var(--sd-accent), var(--sd-accent2)) !important;
  box-shadow: 0 18px 40px rgba(60,140,231,.28);
  transition: transform .15s ease, filter .15s ease;
}
body.accel-buy .buy button:hover,
.accel-buy .buy button:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}
body.accel-buy .buy button:active,
.accel-buy .buy button:active {
  transform: translateY(0);
}

/* Slightly tone down light borders inside the buy page */
body.accel-buy .main .goods,
body.accel-buy .main .cate,
.accel-buy .main .goods,
.accel-buy .main .cate {
  border-color: rgba(255,255,255,.10) !important;
}

/* ===== /SUDUN UI POLISH (auto) ===== */


/* ===== SUDUN DESKTOP FORCE (auto) ===== */
@media (min-width: 768px){
  body.accel-buy .main .main-box,
  body.accel-buy .main-box{
    background: rgba(15, 20, 40, .68) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    color: rgba(255,255,255,.92) !important;
  }
  body.accel-buy .main .title{
    color: rgba(255,255,255,.92) !important;
    border-bottom-color: rgba(255,255,255,.12) !important;
  }
}


/* ===== FIX: ACCEL DESKTOP BUY WHITE PANEL (FINAL) ===== */
body.accel-buy .layui-form-pane,
.accel-buy .layui-form-pane {
    background: rgba(15, 20, 40, 0.68) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 55px rgba(0,0,0,.35) !important;
    color: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

body.accel-buy .layui-form-item,
.accel-buy .layui-form-item {
    background: transparent !important;
}

body.accel-buy .main + .main .main-box,
.accel-buy .main + .main .main-box {
    background: rgba(15, 20, 40, 0.68) !important;
}
/* ===== END FIX ===== */


/* ===== SUDUN ACCEL GLOBAL GLASS THEME ===== */
:root{
  --sd-bg: #0b1220;
  --sd-card: rgba(15,20,40,.68);
  --sd-border: rgba(255,255,255,.14);
  --sd-text: rgba(255,255,255,.92);
  --sd-muted: rgba(255,255,255,.7);
  --sd-accent: #3C8CE7;
  --sd-accent2: #00EAFF;
  --sd-shadow: 0 18px 55px rgba(0,0,0,.35);
}

/* 全站背景 */
body.accel{
  background: radial-gradient(1200px 600px at 20% -10%, #1a2b5a 0%, transparent 60%),
              radial-gradient(800px 500px at 90% 10%, #003b5c 0%, transparent 55%),
              var(--sd-bg);
  color: var(--sd-text);
}

/* 导航栏 */
.accel .nav,
.accel .layui-header{
  background: rgba(10,15,30,.75) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--sd-border);
}

/* 卡片统一 */
.accel .main-box,
.accel .layui-card,
.accel .card{
  background: var(--sd-card) !important;
  border: 1px solid var(--sd-border);
  border-radius: 22px;
  box-shadow: var(--sd-shadow);
  color: var(--sd-text);
  backdrop-filter: blur(14px);
}

/* 表单 */
.accel input,
.accel textarea,
.accel select{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--sd-border) !important;
  color: var(--sd-text) !important;
  border-radius: 12px;
}

/* 主按钮 */
.accel .layui-btn,
.accel button{
  background: linear-gradient(90deg,var(--sd-accent),var(--sd-accent2)) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(60,140,231,.35);
}

/* footer */
.accel footer,
.accel .footer{
  background: transparent;
  color: var(--sd-muted);
}

/* ===== END SUDUN ACCEL GLOBAL GLASS THEME ===== */

/* ===== SUDUN GLASS THEME (sitewide accel) ===== */
/*
  Sitewide SuDun Glass Style for ACCEL theme
  - Scopes to front pages only: body.accel (theme) and excludes admin.
  - Uses CSS variables for easy tuning.
*/
:root{
  --sd-bg1:#070b18;
  --sd-bg2:#0a1030;
  --sd-accent:#3C8CE7;
  --sd-accent2:#00EAFF;

  --sd-card: rgba(15, 20, 40, .68);
  --sd-card-strong: rgba(15, 20, 40, .82);
  --sd-border: rgba(255,255,255,.14);
  --sd-border2: rgba(255,255,255,.10);

  --sd-text: rgba(255,255,255,.92);
  --sd-muted: rgba(255,255,255,.70);

  --sd-shadow: 0 18px 55px rgba(0,0,0,.35);
  --sd-shadow-soft: 0 14px 40px rgba(0,0,0,.28);
  --sd-radius: 22px;
  --sd-radius-sm: 14px;
}

body.accel {
  color: var(--sd-text);
}

/* Background layer (keep your existing bg image, but avoid pure white fallback) */
body.accel .background {
  background-color: var(--sd-bg1) !important;
}

/* Generic glass containers */
body.accel .main .main-box,
body.accel .main-box,
body.accel .layui-card,
body.accel .card {
  background: var(--sd-card) !important;
  border: 1px solid var(--sd-border) !important;
  border-radius: var(--sd-radius) !important;
  box-shadow: var(--sd-shadow) !important;
  color: var(--sd-text) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Reduce accidental white panels from Layui form-pane on any page */
body.accel .layui-form-pane {
  background: transparent;
}
body.accel .layui-form-pane,
body.accel .layui-form-pane .layui-form-item {
  background: transparent !important;
}

/* Headers / titles */
body.accel .main .title,
body.accel .main .title-2,
body.accel .main .cate-title,
body.accel .main h1,
body.accel .main h2,
body.accel .main h3 {
  color: var(--sd-text) !important;
}
body.accel .main .title,
body.accel .main .title-2 {
  border-bottom-color: rgba(255,255,255,.12) !important;
}
body.accel .main .title span,
body.accel .main .title-2 span {
  color: var(--sd-text) !important;
}

/* List items / separators (avoid bright gray lines) */
body.accel hr,
body.accel .layui-elem-field,
body.accel .layui-field-title {
  border-color: rgba(255,255,255,.12) !important;
}
body.accel .layui-form-pane .layui-form-label {
  border-color: rgba(255,255,255,.12) !important;
  color: var(--sd-muted) !important;
  background: rgba(255,255,255,.04) !important;
}

/* Inputs */
body.accel .layui-input,
body.accel .layui-textarea,
body.accel input[type="text"],
body.accel input[type="email"],
body.accel input[type="password"],
body.accel input[type="number"] {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: var(--sd-text) !important;
  border-radius: 12px !important;
}
body.accel .layui-input::placeholder,
body.accel .layui-textarea::placeholder {
  color: rgba(255,255,255,.55);
}
body.accel .layui-input:focus,
body.accel .layui-textarea:focus {
  border-color: rgba(60,140,231,.8) !important;
  box-shadow: 0 0 0 4px rgba(60,140,231,.14) !important;
}

/* Buttons */
body.accel .layui-btn,
body.accel button.layui-btn,
body.accel .btn {
  border-radius: 999px !important;
}
body.accel .layui-btn.layui-btn-normal,
body.accel .layui-btn-primary,
body.accel .layui-btn {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--sd-text);
}
/* Primary CTA */
body.accel .layui-btn.layui-btn-normal,
body.accel .layui-btn.sd-primary,
body.accel .main .buy button,
body.accel .order button,
body.accel button[lay-filter="postOrder"] {
  background: linear-gradient(90deg, var(--sd-accent), var(--sd-accent2)) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 18px 40px rgba(60,140,231,.28) !important;
}
body.accel .layui-btn:hover,
body.accel button:hover {
  filter: brightness(1.05);
}

/* Tags / badges */
body.accel .layui-badge,
body.accel .layui-badge-dot,
body.accel .layui-badge-rim,
body.accel .layui-btn-xs {
  border-radius: 999px !important;
}
body.accel .layui-badge-rim {
  border-color: rgba(255,255,255,.16) !important;
  color: var(--sd-muted) !important;
}
body.accel .layui-badge {
  background: rgba(60,140,231,.20) !important;
}

/* Tables */
body.accel .layui-table,
body.accel table {
  background: transparent !important;
  color: var(--sd-text) !important;
}
body.accel .layui-table thead tr {
  background: rgba(255,255,255,.06) !important;
}
body.accel .layui-table td,
body.accel .layui-table th {
  border-color: rgba(255,255,255,.10) !important;
}
body.accel .layui-table tbody tr:hover {
  background: rgba(60,140,231,.10) !important;
}

/* Order / bill panels (common white blocks) */
body.accel .order,
body.accel .bill,
body.accel .search,
body.accel .query,
body.accel .notice,
body.accel .goods,
body.accel .cate {
  background: transparent !important;
}
body.accel .order .order-box,
body.accel .bill .bill-box,
body.accel .search .search-box,
body.accel .query .query-box,
body.accel .notice .notice-box {
  background: var(--sd-card) !important;
  border: 1px solid var(--sd-border) !important;
  border-radius: var(--sd-radius) !important;
  box-shadow: var(--sd-shadow-soft) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Pay options (sitewide) */
body.accel .pay-type {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 12px !important;
  color: var(--sd-text) !important;
}
body.accel .pay-select {
  border-color: rgba(60,140,231,.9) !important;
  background: rgba(60,140,231,.16) !important;
  box-shadow: 0 0 0 4px rgba(60,140,231,.12) !important;
}

/* Nav bar polish (keep structure, adjust text colors) */
body.accel .nav,
body.accel header,
body.accel .layui-header {
  background: rgba(10, 14, 30, .55) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body.accel .nav a,
body.accel .nav span,
body.accel header a,
body.accel header span {
  color: rgba(255,255,255,.85) !important;
}
body.accel .nav a:hover {
  color: #fff !important;
}

/* Footer */
body.accel footer,
body.accel .footer {
  color: rgba(255,255,255,.65) !important;
}

/* Modal / layer */
body.accel .layui-layer,
body.accel .layui-layer-content {
  background: var(--sd-card-strong) !important;
  color: var(--sd-text) !important;
  border: 1px solid var(--sd-border) !important;
  border-radius: 16px !important;
}
body.accel .layui-layer-title {
  background: rgba(255,255,255,.06) !important;
  color: var(--sd-text) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

/* Mobile floating button keep visible */
body.accel .mobile {
  box-shadow: 0 16px 34px rgba(0,0,0,.35);
}

/* Accessibility: ensure icons don't disappear on dark */
body.accel svg path[fill="#545454"] {
  fill: rgba(255,255,255,.80) !important;
}

/* ===== /SUDUN GLASS THEME (sitewide accel) ===== */


/* ===== SUDUN PAY BUTTON FIX (desktop) ===== */
@media (min-width: 768px){
  body.accel-buy .pay .pay-type,
  .accel-buy .pay .pay-type{
    background: rgba(15, 20, 40, .55) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 14px !important;
    padding: 10px 14px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.25) !important;
    color: rgba(255,255,255,.90) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  body.accel-buy .pay .pay-type svg,
  .accel-buy .pay .pay-type svg{
    width: 30px !important;
    height: 30px !important;
    margin-right: 8px !important;
    vertical-align: -6px;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
  }
  body.accel-buy .pay .pay-select,
  .accel-buy .pay .pay-select{
    background: rgba(60,140,231,.16) !important;
    border-color: rgba(60,140,231,.70) !important;
    box-shadow: 0 0 0 4px rgba(60,140,231,.12), 0 12px 30px rgba(0,0,0,.25) !important;
  }
  /* keep text spacing consistent */
  body.accel-buy .pay .pay-type,
  .accel-buy .pay .pay-type{
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .2px;
  }
}
/* ===== /SUDUN PAY BUTTON FIX (desktop) ===== */


/* ===== 支付方式按钮背景过白 修复（自动合并） ===== */
.pay-type{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.pay-type:hover{
  background: rgba(255,255,255,.12) !important;
}
.pay-type.pay-select{
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.34) !important;
}
.pay-type svg,
.pay-type .icon{
  background: transparent !important;
}
/* ===== 修复结束 ===== */


/* ======================================================================
   ✅ SuDun 站点统一玻璃拟态规范 + 移动端 touch 优化 + Safari/iOS 暗坑修复
   - 建议保持在所有 CSS 的末尾，确保覆盖组件库默认样式
   ====================================================================== */

/* ---- 设计变量（可按需改色） ---- */
:root{
  --glass-bg: rgba(255,255,255,.06);
  --glass-bg-strong: rgba(255,255,255,.10);
  --glass-border: rgba(255,255,255,.14);
  --glass-border-strong: rgba(255,255,255,.22);
  --glass-shadow: 0 18px 60px rgba(0,0,0,.45);
  --glass-shadow-soft: 0 10px 28px rgba(0,0,0,.28);
  --glass-blur: 14px;
  --glass-radius: 16px;

  --text-strong: rgba(255,255,255,.92);
  --text-muted: rgba(255,255,255,.70);

  --primary: rgba(0,160,255,.95);
  --primary-glow: rgba(0,160,255,.25);
}

/* ---- 移动端 touch 体验 ---- */
html, body{
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
*{
  -webkit-tap-highlight-color: rgba(0,0,0,0); /* iOS 点击高亮去除 */
}
a, button, [role="button"], .pay-type{
  touch-action: manipulation;            /* 减少 300ms 延迟/双击缩放干扰 */
}
button, input, textarea, select{
  -webkit-appearance: none;
  appearance: none;
}

/* ---- 玻璃拟态通用类（可用于任意容器/按钮/输入） ---- */
.glass{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
.glass-soft{
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow-soft);
  backdrop-filter: blur(calc(var(--glass-blur) - 4px));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 4px));
}
.glass-btn{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--text-strong);
  border-radius: 12px;
  box-shadow: var(--glass-shadow-soft);
  backdrop-filter: blur(calc(var(--glass-blur) - 4px));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 4px));
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, filter .16s ease;
}
.glass-btn:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
}
.glass-btn:active{
  transform: translateY(1px) scale(.98); /* touch 反馈 */
}

/* ---- 统一输入框玻璃风格（含 Safari/iOS 自动填充白底暗坑） ---- */
.glass-input, input, textarea, select{
  color: var(--text-strong);
}
.glass-input{
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
  backdrop-filter: blur(calc(var(--glass-blur) - 4px));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 4px));
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.glass-input:focus{
  outline: none;
  border-color: rgba(0,160,255,.55);
  box-shadow: 0 10px 30px rgba(0,160,255,.18);
}

/* Safari/iOS：自动填充会把背景变“惨白/黄”，用 box-shadow 覆盖 */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color: var(--text-strong) !important;
  transition: background-color 999999s ease-in-out 0s;
  box-shadow: 0 0 0px 1000px rgba(10,16,32,.35) inset !important;
  -webkit-box-shadow: 0 0 0px 1000px rgba(10,16,32,.35) inset !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

/* ---- iOS/Safari：backdrop-filter 偶发白块/闪烁的兜底 ---- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .glass, .glass-soft, .glass-btn, .glass-input, .pay-type{
    /* 无 blur 环境：用更稳的半透明替代 */
    background: rgba(20, 28, 52, .62) !important;
  }
}
/* iOS 某些情况下 blur 区域在滚动时出现白块：开启隔离层 & 促使合成 */
.glass, .glass-soft, .glass-btn, .glass-input, .pay-type{
  isolation: isolate;
  transform: translateZ(0);
}

/* ======================================================================
   ✅ 支付方式按钮：选中态动画 + touch 优化（命中 div.pay-type + .pay-select）
   ====================================================================== */
.pay-type{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;

  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 12px;

  color: var(--text-strong) !important;
  cursor: pointer;
  user-select: none;

  box-shadow: var(--glass-shadow-soft);
  backdrop-filter: blur(calc(var(--glass-blur) - 4px));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 4px));

  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
  position: relative;
  overflow: hidden; /* 用于选中态光晕 */
}

/* hover/active 手感 */
.pay-type:hover{
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.22) !important;
}
.pay-type:active{
  transform: translateY(1px) scale(.98);
}

/* 选中态动画：边框增强 + 呼吸光晕 */
@keyframes paySelectPop{
  0%{ transform: scale(.98); }
  60%{ transform: scale(1.02); }
  100%{ transform: scale(1); }
}
@keyframes payGlow{
  0%{ opacity: .0; transform: translateX(-30%) skewX(-12deg); }
  30%{ opacity: .18; }
  100%{ opacity: 0; transform: translateX(130%) skewX(-12deg); }
}

.pay-type.pay-select{
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.34) !important;
  box-shadow: 0 10px 34px rgba(0,0,0,.32), 0 0 0 1px rgba(0,160,255,.22);
  animation: paySelectPop .22s ease-out;
}

/* 光带扫过（选中时自动播放） */
.pay-type.pay-select::after{
  content: "";
  position: absolute;
  top: -20%;
  left: -40%;
  width: 60%;
  height: 140%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  filter: blur(2px);
  opacity: 0;
  animation: payGlow .75s ease-out;
  pointer-events: none;
}

/* svg 透明兜底（避免白底块） */
.pay-type svg, .pay-type .icon{
  display: block;
  background: transparent !important;
}

/* SVG 在 Safari 偶发锯齿/白边：开启合成层 */
.pay-type svg{
  transform: translateZ(0);
}

/* ======================================================================
   ✅ 小补丁：解决部分浏览器 button 默认白底/阴影导致的突兀
   ====================================================================== */
button{
  background-color: transparent;
}



/* ================== 首屏渐变呼吸 & 微动效（accel） ================== */
@keyframes heroBreath{
  0%{ filter: saturate(1.00) brightness(1.00); transform: scale(1.0); }
  50%{ filter: saturate(1.08) brightness(1.04); transform: scale(1.02); }
  100%{ filter: saturate(1.00) brightness(1.00); transform: scale(1.0); }
}
@keyframes heroDrift{
  0%{ background-position: 50% 0%; }
  50%{ background-position: 52% 2%; }
  100%{ background-position: 50% 0%; }
}

/* 背景层呼吸 + 轻微漂移（避免“拼接感”同时更高级） */
.background{
  animation: heroBreath 8s ease-in-out infinite, heroDrift 12s ease-in-out infinite;
  will-change: transform, filter, background-position;
}

/* 首屏卡片微浮动 */
@keyframes floaty{
  0%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
  100%{ transform: translateY(0); }
}
.hero-card, .notice-box, .service-box, .main-box{
  transform: translateZ(0);
}
.hero-card, .service-box{
  animation: floaty 6.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .background, .hero-card, .service-box{ animation: none !important; }
}


/* ================== 背景统一舞台层（解决拼接/错层感） ================== */

/* 全站仅保留一个背景舞台层 */
html, body {
  background: #060812 !important;
}

/* 背景层：单一整体 + 居中对称 */
.background{
  position: fixed;
  inset: 0;
  z-index: -10;

  /* 单一大背景（无分块/无渐变拼接） */
  background-image:
    radial-gradient(1200px 700px at 50% 30%, rgba(120,80,255,.35), transparent 65%),
    radial-gradient(1400px 900px at 50% 70%, rgba(0,200,255,.25), transparent 70%),
    linear-gradient(180deg, #060812, #0b1430 60%, #060812);

  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed;

  /* 轻微整体呼吸 */
  animation: bgBreath 10s ease-in-out infinite;
}

/* 去掉旧的背景干扰 */
.background::before,
.background::after{
  display:none !important;
}

/* 背景呼吸动画（整体，不分块） */
@keyframes bgBreath{
  0%{ filter: brightness(1) saturate(1); }
  50%{ filter: brightness(1.04) saturate(1.06); }
  100%{ filter: brightness(1) saturate(1); }
}

/* ================== 内容舞台对称布局 ================== */

/* 主容器统一居中，形成“舞台 + 卡片”结构 */
.main,
.container,
.layui-container{
  position: relative;
  z-index: 1;
}

/* 所有一级卡片统一对称宽度与阴影 */
.goods-msg,
.category,
.category-list,
.goods-list,
.card,
.main-box,
.panel{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px;
  box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* 分类与列表形成左右对称视觉 */
.layui-row{
  display:flex;
  gap:24px;
}
.layui-col-md4,
.layui-col-md8{
  display:flex;
}
.layui-col-md4 > *,
.layui-col-md8 > *{
  width:100%;
}

/* 移动端恢复纵向 */
@media (max-width: 992px){
  .layui-row{
    flex-direction: column;
  }
}

/* 减弱页面分割线，避免“背景断层”错觉 */
hr,
.divider{
  border:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
}


/* ================== 首屏渐进式进入动画（SaaS 级） ================== */
html{
  scroll-behavior: smooth;
}

body{
  opacity: 0;
  animation: pageFadeIn 0.9s ease-out forwards;
}

@keyframes pageFadeIn{
  from{ opacity:0; transform: translateY(12px); }
  to{ opacity:1; transform: translateY(0); }
}

/* 首屏标题/按钮依次出现 */
.hero-title, .hero-subtitle, .hero-actions{
  opacity:0;
  transform: translateY(16px);
  animation: heroIn 0.8s ease-out forwards;
}
.hero-title{ animation-delay:.2s; }
.hero-subtitle{ animation-delay:.35s; }
.hero-actions{ animation-delay:.5s; }

@keyframes heroIn{
  to{ opacity:1; transform: translateY(0); }
}


/* ================== 分类 → 套餐 视觉引导线 ================== */
.category-list{
  position: relative;
}
.category-list::after{
  content:"";
  position:absolute;
  right:-22px;
  top:20%;
  width:2px;
  height:60%;
  background: linear-gradient(180deg,
    transparent,
    rgba(255,255,255,.25),
    rgba(120,80,255,.45),
    rgba(0,200,255,.45),
    rgba(255,255,255,.25),
    transparent);
}
.category-item{
  position: relative;
}
.category-item.active::before{
  content:"";
  position:absolute;
  right:-22px;
  top:50%;
  width:14px;
  height:14px;
  transform: translateY(-50%);
  border-radius:50%;
  background: linear-gradient(135deg,#7a5cff,#00d4ff);
  box-shadow: 0 0 0 6px rgba(0,200,255,.18);
}
@media (max-width:992px){
  .category-list::after,
  .category-item.active::before{
    display:none;
  }
}


/* ================== 套餐卡片（Stripe / Vercel 风格） ================== */
.goods-list{
  display:grid;
  grid-template-columns: repeat(auto-fill,minmax(320px,1fr));
  gap:28px;
}
.goods-card{
  position: relative;
  padding:26px;
  border-radius:22px;
  background: linear-gradient(180deg,
    rgba(255,255,255,.10),
    rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.05);
  transition: transform .35s cubic-bezier(.2,.8,.2,1),
              box-shadow .35s ease,
              border-color .35s ease;
}
.goods-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:22px;
  background: linear-gradient(135deg,
    rgba(122,92,255,.35),
    rgba(0,212,255,.35));
  opacity:0;
  transition: opacity .35s ease;
}
.goods-card:hover{
  transform: translateY(-8px);
  box-shadow:
    0 45px 120px rgba(0,0,0,.75),
    0 0 0 1px rgba(122,92,255,.45);
}
.goods-card:hover::before{
  opacity:.18;
}
.goods-card .price-num{
  font-size:34px !important;
  font-weight:700;
}
.goods-card .btn{
  margin-top:16px;
  width:100%;
  background: linear-gradient(135deg,#7a5cff,#00d4ff);
}


/* ================== Premium 背景（单张图 + 统一遮罩） ================== */
.background{
  background-image: url("/assets/accel/img/bg-premium.svg") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed;
}
.background::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(1200px 600px at 50% 20%, rgba(255,255,255,.08), transparent 60%),
              radial-gradient(1400px 900px at 50% 85%, rgba(0,217,255,.06), transparent 65%),
              linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
}



/* ================== Premium 按钮体系（替换所有“丑按钮”） ================== */
:root{
  --cta1:#7c5cff;
  --cta2:#00d9ff;
  --btn-bg: rgba(255,255,255,.08);
  --btn-br: rgba(255,255,255,.16);
  --btn-br2: rgba(255,255,255,.26);
  --shadow-cta: 0 18px 60px rgba(0, 217, 255, .18), 0 12px 36px rgba(124, 92, 255, .16);
}

/* Base button reset */
a.btn, button, .layui-btn, .pay-type{
  -webkit-appearance:none;
  appearance:none;
  border:1px solid var(--btn-br) !important;
  background: var(--btn-bg) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: 999px !important;
  padding: 12px 18px !important;
  font-weight: 650;
  letter-spacing: .2px;
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

a.btn:hover, button:hover, .layui-btn:hover, .pay-type:hover{
  border-color: var(--btn-br2) !important;
  background: rgba(255,255,255,.11) !important;
  filter: brightness(1.04);
}

a.btn:active, button:active, .layui-btn:active, .pay-type:active{
  transform: translateY(1px) scale(.985);
}

/* Primary CTA */
a.btn.primary, .layui-btn-normal, .btn.primary, .primary{
  border: 1px solid rgba(255,255,255,.18) !important;
  background: linear-gradient(135deg, rgba(124,92,255,.92), rgba(0,217,255,.88)) !important;
  color: #fff !important;
  box-shadow: var(--shadow-cta);
}
a.btn.primary:hover, .layui-btn-normal:hover, .btn.primary:hover, .primary:hover{
  filter: brightness(1.06);
  box-shadow: 0 22px 80px rgba(0, 217, 255, .24), 0 14px 42px rgba(124, 92, 255, .20);
}

/* Secondary outline glass */
a.btn.ghost, .btn.ghost{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
}

/* Ensure the highlighted buttons in hero & notice look premium */
.hero-actions a,
.notice-box a,
.service-box a{
  padding: 12px 20px !important;
}

/* Mobile: bigger */
@media (max-width:768px){
  a.btn, button, .layui-btn, .pay-type{
    width:100% !important;
    height:52px !important;
    font-size:16px !important;
  }
}



/* ================== 价格高亮策略（推荐方案） ================== */
/* 默认：第 2 个套餐作为推荐（如果只有 2 个则第 1 个推荐） */
.goods-list .goods-card{
  position: relative;
}
.goods-list .goods-card:nth-child(2){
  transform: translateY(-10px);
  border-color: rgba(0,217,255,.38);
  box-shadow: 0 55px 140px rgba(0,0,0,.78),
             0 0 0 1px rgba(0,217,255,.35),
             0 24px 90px rgba(0,217,255,.18);
}
.goods-list .goods-card:nth-child(2)::after{
  content:"推荐";
  position:absolute;
  top:18px;
  right:18px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  background: linear-gradient(135deg, rgba(124,92,255,.92), rgba(0,217,255,.88));
  box-shadow: 0 14px 46px rgba(0,217,255,.22);
}

/* 推荐卡片的价格更突出 */
.goods-list .goods-card:nth-child(2) .price-num{
  font-size: 38px !important;
  letter-spacing: .2px;
}
.goods-list .goods-card:nth-child(2) .btn,
.goods-list .goods-card:nth-child(2) a.btn{
  background: linear-gradient(135deg, rgba(124,92,255,.92), rgba(0,217,255,.88)) !important;
  border-color: rgba(255,255,255,.20) !important;
  box-shadow: 0 22px 90px rgba(0,217,255,.26), 0 14px 44px rgba(124,92,255,.22);
}

/* 小屏不抬高，避免破坏纵向节奏 */
@media (max-width: 992px){
  .goods-list .goods-card:nth-child(2){
    transform: none;
  }
}



/* ================== Desktop 强制生效修复 ================== */
/* 去除仅 mobile 生效的问题，桌面端强制覆盖 */

/* 背景强制桌面端生效 */
@media (min-width: 992px){
  .background{
    background-image: url("/assets/accel/img/bg-premium.svg") !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: fixed !important;
  }
}

/* 桌面端按钮强制使用 Premium CTA */
@media (min-width: 992px){
  a.btn,
  button,
  .layui-btn,
  .pay-type{
    border:1px solid rgba(255,255,255,.18) !important;
    background: rgba(255,255,255,.08) !important;
    color: rgba(255,255,255,.92) !important;
    border-radius: 999px !important;
    box-shadow: 0 14px 40px rgba(0,0,0,.35) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  .layui-btn-normal,
  .primary,
  a.btn.primary{
    background: linear-gradient(135deg,#7c5cff,#00d9ff) !important;
    color:#fff !important;
    box-shadow: 0 22px 80px rgba(0,217,255,.25), 0 14px 44px rgba(124,92,255,.22) !important;
  }
}

/* 桌面端推荐套餐强制高亮 */
@media (min-width: 992px){
  .goods-list .goods-card:nth-child(2){
    transform: translateY(-12px) !important;
    border-color: rgba(0,217,255,.45) !important;
    box-shadow:
      0 60px 160px rgba(0,0,0,.85),
      0 0 0 1px rgba(0,217,255,.45),
      0 26px 100px rgba(0,217,255,.22) !important;
  }
}

/* 防止桌面端被旧 CSS 覆盖 */
body.desktop-fix{
  background: none !important;
}


/* ================== 桌面端真正生效：为 accel 布局补齐 background 容器 ================== */
body.accel{
  background: transparent !important;
}

/* Premium 背景（现在 background div 已真实存在于 DOM） */
body.accel > .background{
  position: fixed;
  inset: 0;
  z-index: -10;
  background-image: url("/assets/accel/img/bg-premium.svg") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
}
body.accel > .background::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 600px at 50% 18%, rgba(255,255,255,.09), transparent 62%),
    radial-gradient(1400px 900px at 50% 86%, rgba(0,217,255,.07), transparent 66%),
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.58));
}

/* 首屏渐进式进入动画（匹配 accel 的真实类名） */
body.accel{
  opacity: 0;
  animation: pageFadeIn 0.9s ease-out forwards;
}
@keyframes pageFadeIn{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}
.hero .pill, .hero .h-title, .hero .h-sub, .hero .hero-actions{
  opacity:0;
  transform: translateY(16px);
  animation: heroIn .85s ease-out forwards;
}
.hero .pill{ animation-delay:.15s; }
.hero .h-title{ animation-delay:.28s; }
.hero .h-sub{ animation-delay:.40s; }
.hero .hero-actions{ animation-delay:.52s; }
@keyframes heroIn{ to{ opacity:1; transform: translateY(0);} }
@media (prefers-reduced-motion: reduce){
  body.accel, .hero .pill, .hero .h-title, .hero .h-sub, .hero .hero-actions{ animation:none !important; opacity:1 !important; transform:none !important; }
}

/* Premium 按钮体系（用更高优先级覆盖旧主题） */
body.accel a.btn, body.accel button, body.accel .layui-btn, body.accel .pay-type{
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: 999px !important;
  padding: 12px 18px !important;
  font-weight: 650;
  letter-spacing: .2px;
  box-shadow: 0 12px 32px rgba(0,0,0,.34) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
body.accel a.btn:hover, body.accel button:hover, body.accel .layui-btn:hover{
  border-color: rgba(255,255,255,.28) !important;
  background: rgba(255,255,255,.11) !important;
  filter: brightness(1.04);
}
body.accel a.btn:active, body.accel button:active, body.accel .layui-btn:active{
  transform: translateY(1px) scale(.985);
}
body.accel a.btn.primary, body.accel .btn.primary, body.accel .layui-btn-normal{
  border: 1px solid rgba(255,255,255,.20) !important;
  background: linear-gradient(135deg, rgba(124,92,255,.92), rgba(0,217,255,.88)) !important;
  color:#fff !important;
  box-shadow: 0 22px 84px rgba(0,217,255,.22), 0 14px 44px rgba(124,92,255,.20) !important;
}
body.accel .nav-cta a.btn.small{
  padding: 10px 14px !important;
}

/* 套餐卡片（accel 的真实结构：.plan）Stripe/Vercel 级 */
.goods-list{
  display:grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 26px !important;
}
.plan{
  position: relative;
  padding: 24px !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 32px 90px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.05);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.plan:hover{
  transform: translateY(-8px);
  box-shadow: 0 48px 130px rgba(0,0,0,.75), 0 0 0 1px rgba(124,92,255,.35);
}
.plan .tag{
  position:absolute;
  top: 18px;
  right: 18px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.88);
}
.plan .price b{
  font-size: 38px;
  letter-spacing: .2px;
  text-shadow: 0 16px 46px rgba(0,0,0,.35);
}
.plan .btn.primary{
  width: 100%;
  margin-top: 6px;
}
.plan.reco{
  transform: translateY(-10px);
  border-color: rgba(0,217,255,.40) !important;
  box-shadow: 0 58px 160px rgba(0,0,0,.82), 0 0 0 1px rgba(0,217,255,.40), 0 28px 110px rgba(0,217,255,.20);
}
.plan.reco .tag{
  background: linear-gradient(135deg, rgba(124,92,255,.92), rgba(0,217,255,.88));
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 18px 60px rgba(0,217,255,.22);
}
@media (max-width: 992px){
  .plan.reco{ transform:none; }
}



/* ===== Final Unified Background ===== */
body.accel > .background{
  background-image:url("/assets/accel/img/bg-unified.svg") !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
body.accel > .background::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.6));
}


/* ===== Final Premium CTA Buttons ===== */
body.accel a.btn,
body.accel .layui-btn,
body.accel button{
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  border-radius:14px !important;
  color:#fff !important;
  padding:10px 18px !important;
  font-weight:600;
  box-shadow:0 12px 32px rgba(0,0,0,.35);
  backdrop-filter:blur(14px);
  transition:all .25s ease;
}
body.accel a.btn:hover,
body.accel .layui-btn:hover,
body.accel button:hover{
  background:rgba(255,255,255,.14) !important;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  transform:translateY(-1px);
}

/* Primary CTA */
body.accel .btn.primary,
body.accel .layui-btn-normal,
body.accel a[href*='pricing'],
body.accel a[href*='nodes']{
  background:linear-gradient(135deg,#6f6cff,#00c6ff) !important;
  border:none !important;
  box-shadow:0 22px 80px rgba(0,198,255,.35);
}



/* ================== Desktop Premium Buttons (force override) ================== */
/* 目标：顶部“立即购买/发卡问题”、首屏“查看套餐”、右侧卡片“查看套餐”全部变高级 */
/* 使用超高优先级 + !important，压过 layui/旧主题/内联风格（除非 style 属性直接写 background） */

body.accel .header a,
body.accel .nav a,
body.accel a.btn,
body.accel .btn,
body.accel .layui-btn,
body.accel button{
  -webkit-appearance: none !important;
  appearance: none !important;
  font-family: inherit;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-weight: 650 !important;
  letter-spacing: .2px !important;
  color: rgba(255,255,255,.94) !important;

  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.20) !important;

  box-shadow:
    0 16px 48px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.10) !important;

  backdrop-filter: blur(14px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;

  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
}

body.accel .header a:hover,
body.accel .nav a:hover,
body.accel a.btn:hover,
body.accel .btn:hover,
body.accel .layui-btn:hover,
body.accel button:hover{
  border-color: rgba(255,255,255,.32) !important;
  background: rgba(255,255,255,.12) !important;
  filter: brightness(1.05) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}

body.accel .header a:active,
body.accel .nav a:active,
body.accel a.btn:active,
body.accel .btn:active,
body.accel .layui-btn:active,
body.accel button:active{
  transform: translateY(0px) scale(.985) !important;
}

/* Primary CTA：用于“立即购买 / 查看套餐”这类按钮 */
body.accel a.btn.primary,
body.accel .btn.primary,
body.accel .layui-btn-normal,
body.accel a[href*="#pricing"],
body.accel a[href*="pricing"],
body.accel a[href*="buy"],
body.accel a[href*="nodes"],
body.accel .nav-cta a.btn,
body.accel .hero-actions a:first-child{
  border: 1px solid rgba(255,255,255,.18) !important;
  background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(0,217,255,.85)) !important;
  box-shadow:
    0 26px 92px rgba(0,217,255,.24),
    0 18px 60px rgba(124,92,255,.18),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}

body.accel a.btn.primary:hover,
body.accel .btn.primary:hover,
body.accel .layui-btn-normal:hover,
body.accel .nav-cta a.btn:hover,
body.accel .hero-actions a:first-child:hover{
  filter: brightness(1.08) saturate(1.05) !important;
  box-shadow:
    0 34px 120px rgba(0,217,255,.28),
    0 22px 76px rgba(124,92,255,.22),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}

/* Secondary：用于“发卡/邮箱问题 / 订单查询”等 */
body.accel .nav-cta a.btn.small,
body.accel .notice-box a,
body.accel .service-box a,
body.accel .hero-actions a:not(:first-child){
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
}

/* 修正 layui 默认圆角/高度 */
body.accel .layui-btn{
  height: auto !important;
  line-height: normal !important;
}

/* Desktop spacing to look premium */
@media (min-width: 992px){
  body.accel .nav-cta a.btn,
  body.accel .header .btn{
    padding: 10px 16px !important;
  }
}



/* ===== Warm unified background (final) ===== */
body.accel > .background{
  background-image: url("/assets/accel/img/bg-warm.svg") !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  background-position:center center !important;
}
body.accel > .background::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background: radial-gradient(1200px 700px at 50% 18%, rgba(255,255,255,.08), transparent 62%),
              linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.62));
}






/* ===== Order Query Mobile Spacing Fix ===== */
@media (max-width: 520px){
  .page-order-query .layui-tab-title{
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
  }
  .page-order-query .layui-tab-title li{
    flex: 1 1 calc(33.333% - 10px);
    height: 44px;
    line-height: 44px;
    padding: 0 10px;
    font-size: 13px !important;
    border-radius: 999px !important;
  }
  .page-order-query .layui-tab-content{
    padding-top: 14px;
  }
  .page-order-query .entry{
    margin-top: 10px;
    margin-bottom: 18px;
  }
  .page-order-query .btn{
    margin-top: 18px;
  }
  .page-order-query .btn a,
  .page-order-query .btn button{
    width: 100% !important;
    height: 50px !important;
    line-height: 50px !important;
    font-size: 16px !important;
  }
}


/* =====================================================================
   ✅ Mobile UI Polish (Home + Buy) — 解决：拥挤/支付两排/选中不明显/查单按钮难点/叠层怪
   ===================================================================== */

/* 1) 首页移动端：按钮与 KPI 更紧凑但不拥挤（减少纵向占用） */
@media (max-width: 560px){
  /* 首屏留出安全区，避免底部按钮被浏览器工具栏遮挡 */
  .hero{padding-bottom: calc(34px + env(safe-area-inset-bottom));}

  /* 4 个操作按钮：两列网格，减少堆叠高度 */
  .hero-actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
  }
  .hero-actions a.btn,
  .hero-actions button.btn{
    width: 100%;
    justify-content: center;
    padding: 12px 0;
    border-radius: 16px;
  }

  /* KPI：两列 + 第三项跨两列，明显减少“长条三连”的拥挤感 */
  .kpis{
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 18px;
  }
  .kpi{padding: 12px;}
  .kpi b{font-size: 16px;}
  .kpi:nth-child(3){grid-column: 1 / -1;}

  /* 右侧服务提示 panel 在移动端是下方：加一点间距更舒服 */
  .panel{margin-top: 18px;}
}

/* 2) 浮动查单按钮：移动端靠近底部时避开安全区/系统栏 */
@media (max-width: 768px){
  .query-m{
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    /* FIX: 某些移动端布局存在透明叠层（如容器/遮罩）覆盖，
       导致按钮“看得见但点不动”。强制提升层级并确保可接收点击。 */
    z-index: 2147483647 !important;
    pointer-events: auto !important;
    touch-action: manipulation;
  }
}

/* 兜底：无论媒体查询是否命中，都确保查单按钮可点击（避免被其它 fixed 层盖住） */
.query-m{
  z-index: 2147483647;
  pointer-events: auto;
  touch-action: manipulation;
}
.query-m a,
.query-m svg,
.query-m span{
  pointer-events: auto;
}

/* 3) 购买页移动端：整体留白 + 去除奇怪叠层 + 支付方式一排 + 选中更明显 */
@media (max-width: 560px){
  body.accel-buy .main{padding-bottom: calc(18px + env(safe-area-inset-bottom));}

  /* 主卡片：更圆润、更干净，避免“叠层”突兀 */
  body.accel-buy .main .main-box{
    border-radius: 22px !important;
    padding: 16px 14px 18px !important;
    overflow: hidden;
    background: radial-gradient(120% 120% at 0% 0%, rgba(34,211,238,.10), rgba(124,58,237,.08) 40%, rgba(255,255,255,.04) 75%) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 18px 60px rgba(0,0,0,.45) !important;
  }
  body.accel-buy .main .title{
    border-bottom-color: rgba(255,255,255,.10) !important;
  }

  /* 栅格在手机端统一纵向排列 */
  body.accel-buy .layui-col-md4,
  body.accel-buy .layui-col-md8{
    width: 100% !important;
    float: none !important;
  }

  /* 商品图更克制，避免压迫表单 */
  body.accel-buy .main-box .goods-img{
    width: 220px !important;
    margin: 12px auto 10px !important;
  }

  /* 表单：减少拥挤感 */
  body.accel-buy .layui-form{
    padding: 0 !important;
    background: transparent !important;
  }
  body.accel-buy .entry{margin-top: 12px !important;}

  /* 支付方式：一排展示（两种方式各占一半） */
  body.accel-buy .pay{
    display: flex !important;
    gap: 10px;
    flex-wrap: nowrap !important;
    margin-top: 12px;
  }
  body.accel-buy .pay .pay-type{
    flex: 1 1 0;
    justify-content: center;
    padding: 12px 10px !important;
    border-radius: 16px !important;
  }
  body.accel-buy .pay .pay-type svg{
    width: 28px !important;
    height: 28px !important;
    margin-right: 8px !important;
  }

  /* 选中态更明显：颜色 + 光晕 + 内描边 */
  body.accel-buy .pay .pay-select{
    background: rgba(0,160,255,.18) !important;
    border-color: rgba(0,160,255,.65) !important;
    box-shadow: 0 0 0 3px rgba(0,160,255,.20), 0 14px 40px rgba(0,0,0,.38) !important;
  }

  /* 下单按钮：更大更易点 */
  body.accel-buy .buy button{
    width: 100% !important;
    border-radius: 18px !important;
    padding: 14px 0 !important;
  }
}