:root {
    --ac-blue: #0071e3;
    --ac-blue-hover: #0077ed;
    --ac-text: #1d1d1f;
    --ac-muted: #6e6e73;
    --ac-bg: #f5f5f7;
    --ac-card: rgba(255, 255, 255, .92);
    --ac-line: rgba(0, 0, 0, .08);
    --ac-shadow: 0 14px 40px rgba(0, 0, 0, .07);
    --ac-radius: 20px;
}

* { box-sizing: border-box; }
html { background: var(--ac-bg); }
html body {
    margin: 0;
    color: var(--ac-text);
    background: var(--ac-bg);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

html body div,
html body p,
html body span,
html body a,
html body button,
html body label {
    word-break: normal !important;
}

html body a { color: var(--ac-blue); text-decoration: none; }
html body img { image-rendering: auto; }

.background {
    min-width: 0 !important;
    background:
        radial-gradient(circle at 10% 0%, rgba(0, 113, 227, .09), transparent 34%),
        radial-gradient(circle at 92% 12%, rgba(122, 92, 255, .08), transparent 32%),
        var(--ac-bg) !important;
}

.layui-row { margin: 0 14px; }
.header .header-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
    row-gap: 16px;
    position: relative;
    padding: 22px 0 0;
    min-height: 72px;
}
.header .header-box > a { display: inline-flex; align-items: center; max-width: calc(100% - 150px) !important; margin-left: 16px; }
.header .header-box > a:first-child { min-height: 48px; }
.header .header-box > a[aria-label="进入个人中心"] {
    align-self: center;
    height: 40px !important;
    margin-left: 0 !important;
    padding: 0 14px !important;
}
.header .header-box > .main { flex: 0 0 100%; width: 100%; }
.header .header-box img { max-width: 48px; max-height: 48px; border-radius: 12px; object-fit: contain; }
.header .header-box .info {
    margin-left: 12px;
    color: var(--ac-text);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.header .header-box .notice {
    margin-top: 16px;
    padding: 18px 22px;
    background: var(--ac-card);
    border: 1px solid var(--ac-line);
    border-radius: 24px;
    box-shadow: var(--ac-shadow);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.header .header-box .notice .tit { color: var(--ac-text); font-size: 15px; font-weight: 600; }
.header .header-box .notice .tips { color: var(--ac-muted); font-size: 13px; line-height: 1.75; }
/* 公告模板自身包含第二层 layui-row，清除横向间距以对齐下方主内容。 */
.header .header-box > .main > .layui-row { margin-left: 0 !important; margin-right: 0 !important; }

.home-order-query-shell { top: 26px !important; }
.home-order-query-shell a {
    right: 16px !important;
    height: 40px !important;
    padding: 0 15px !important;
    color: var(--ac-text) !important;
    background: rgba(255, 255, 255, .9) !important;
    border: 1px solid var(--ac-line) !important;
    border-radius: 999px !important;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .08) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    white-space: nowrap;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}
.home-order-query-shell a:hover { background: #fff !important; transform: translateY(-1px); }

.main .main-box {
    margin-top: 22px;
    padding: 22px 0 26px;
    background: var(--ac-card);
    border: 1px solid var(--ac-line);
    border-radius: 24px;
    box-shadow: var(--ac-shadow);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.main .title,
.main .cate,
.main .goods { margin-left: 24px; margin-right: 24px; }
.main .title,
.pay-title { color: var(--ac-text); font-size: 21px; font-weight: 650; letter-spacing: -.35px; }
.main .title-2 { color: var(--ac-text); font-size: 15px; font-weight: 600; }
.main .title svg,
.main .title-2 svg,
.pay-title svg { opacity: .82; }

.main-box > div[style*="margin: 15px 0"] { margin: 16px 24px 22px !important; padding: 0 !important; }
.main-box > div[style*="margin: 15px 0"] > a {
    padding: 12px 18px !important;
    color: var(--ac-blue) !important;
    background: #f2f7fd !important;
    border: 1px solid rgba(0, 113, 227, .12) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.main .cate {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: 10px;
    padding-top: 16px;
    font-size: inherit;
}
.main .cate .cate-box {
    display: block;
    min-width: 0;
    width: auto;
    height: 70px;
    margin: 0;
    padding: 13px 16px;
    background: #f5f5f7;
    border: 1px solid transparent;
    border-radius: 14px;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.main .cate .cate-box:hover { transform: translateY(-2px); background: #eeeef1; }
.main .cate .cate-box-select {
    background: var(--ac-blue) !important;
    border-color: var(--ac-blue);
    box-shadow: 0 8px 22px rgba(0, 113, 227, .2);
}
.main .cate .cate-box p { margin-top: 0; color: var(--ac-text); font-size: 13px; font-weight: 600; line-height: 1.35; }
.main .cate .cate-box div { margin-top: 6px; color: var(--ac-muted); font-size: 12px; }
.main .cate .cate-box-select p,
.main .cate .cate-box-select div { color: #fff; }

.main .goods { margin-top: 22px; padding-top: 18px; border-top-color: var(--ac-line); }
.goods-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}
.main .goods .goods-box {
    display: flex;
    min-width: 0;
    min-height: 118px;
    margin: 0;
    padding: 16px;
    color: var(--ac-text);
    background: #fff;
    border: 1px solid var(--ac-line);
    border-radius: 16px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .04);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.main .goods .goods-box:hover { transform: translateY(-3px); border-color: rgba(0, 113, 227, .22); box-shadow: 0 12px 28px rgba(0, 0, 0, .075); }
.main .goods .picture { flex: 0 0 82px; width: 82px; height: 82px; min-width: 82px; margin-right: 14px; border-radius: 13px; background: #f5f5f7; }
.main .goods .picture img { border-radius: 13px; }
.main .goods .msg { min-width: 0; flex: 1; }
.main .goods .msg .goods-name { margin: 2px 0 10px; color: var(--ac-text); font-size: 14px; font-weight: 600; line-height: 1.45; }
.main .goods .msg .goods-price { color: var(--ac-blue); font-size: 16px; font-weight: 650; }
.main .goods .msg .goods-price div { background: #fff2f0; color: #d84a4a; border-radius: 7px; padding: 2px 6px; }
.main .goods .msg .goods-num div { background: #e8e8ed; }
.main .goods .msg .goods-num div p { background: #30b873; }
.main .goods .msg .goods-num span { color: #248a56; }

.main-box .goods-img { padding: 18px !important; }
.main-box .goods-img img { border-radius: 16px; background: #f5f5f7; }
.main-box .goods-msg { padding: 10px 24px 20px; }
.main-box .goods-msg .goods-name { color: var(--ac-text); font-size: 18px; font-weight: 650; }
.price .price-sign,
.price .price-num { color: var(--ac-blue); }
.price .price-num { font-size: 28px; font-weight: 650; }
.small-tips { border-radius: 999px !important; padding: 3px 9px !important; font-weight: 500 !important; }
.entry { margin-top: 16px; }
.l-msg { width: 86px; color: var(--ac-muted); font-weight: 500; }
.input input,
.layui-input,
.layui-textarea,
.layui-select,
.order-info {
    min-height: 42px;
    padding: 8px 12px;
    color: var(--ac-text);
    background: #fff;
    border: 1px solid #d2d2d7;
    border-radius: 10px;
    box-shadow: none;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.input input:focus,
.layui-input:focus,
.layui-textarea:focus,
.order-info:focus { border-color: var(--ac-blue); box-shadow: 0 0 0 4px rgba(0, 113, 227, .12); }

/* 验证码按源图比例完整显示，不能裁掉第 5 位字符。 */
.captcha-entry {
    display: grid;
    grid-template-columns: 86px minmax(150px, 300px) 180px;
    align-items: center;
    gap: 10px;
}
.captcha-entry .l-msg { width: auto; }
.captcha-entry .input { display: block; width: 100%; min-width: 0; }
.captcha-entry .input input {
    width: 100% !important;
    min-width: 0;
    text-transform: uppercase;
    letter-spacing: .12em;
}
.captcha-entry .captcha-img {
    display: block;
    width: 180px !important;
    max-width: 100% !important;
    height: 54px !important;
    margin: 0 !important;
    border: 1px solid var(--ac-line);
    border-radius: 10px !important;
    background: #f7f7f9;
    object-fit: contain;
    cursor: pointer;
}
.layui-form-select dl { border: 1px solid var(--ac-line); border-radius: 12px; box-shadow: var(--ac-shadow); overflow: hidden; }
.layui-form-select dl dd.layui-this { background: var(--ac-blue); }

.buy button,
.btn a,
.btn button {
    width: auto;
    min-width: 150px;
    min-height: 44px;
    padding: 0 22px;
    color: #fff;
    background: var(--ac-blue);
    background-image: none;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    font-size: 15px;
    font-weight: 600;
    line-height: 44px;
    white-space: nowrap;
    transition: background .2s ease, transform .2s ease;
}
.buy button:hover,
.btn a:hover,
.btn button:hover { background: var(--ac-blue-hover); transform: translateY(-1px); }

.layui-tab-title { border-bottom-color: var(--ac-line); }
.layui-tab-title li { color: var(--ac-muted); }
.layui-tab-title .layui-this { color: var(--ac-text); font-weight: 600; }
.layui-tab-title .layui-this:after { border: 0; border-bottom: 2px solid var(--ac-blue); }
.layui-card-body { padding: 22px; }
.layui-table { border-radius: 12px; overflow: hidden; color: var(--ac-text); }
.layui-table thead tr { background: #f5f5f7; }
.layui-table td,
.layui-table th { border-color: var(--ac-line); }
.intro { color: #424245; font-weight: 400; line-height: 1.85; letter-spacing: 0; }
.footer { margin-top: 34px; color: #86868b; font-size: 12px; }

.home-tips { border-radius: 18px !important; overflow: visible !important; box-shadow: var(--ac-shadow) !important; }
.home-tips .layui-layer-title {
    height: 48px;
    padding: 0 54px 0 20px !important;
    line-height: 48px;
    background: #fff;
    background-image: none;
    color: var(--ac-text) !important;
    border-bottom: 1px solid var(--ac-line);
    border-radius: 18px 18px 0 0;
    font-size: 15px;
    text-align: left;
}
.home-tips .layui-layer-content {
    padding: 16px 20px !important;
    color: #424245;
    background: #fff;
    border-radius: 0 0 18px 18px;
    font-weight: 400;
    line-height: 1.75;
}
.home-tips .layui-layer-setwin {
    top: 10px !important;
    right: 12px !important;
    bottom: auto !important;
    left: auto !important;
    width: 28px !important;
    height: 28px !important;
    transform: none !important;
    z-index: 3;
}
.home-tips .layui-layer-setwin .layui-layer-close2 {
    position: relative !important;
    display: block;
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    background: #f2f2f4 !important;
    border-radius: 50%;
}
.home-tips .layui-layer-setwin .layui-layer-close2::before {
    content: "\00d7";
    position: absolute;
    inset: 0;
    color: #515154;
    font: 22px/27px -apple-system, BlinkMacSystemFont, sans-serif;
    text-align: center;
}
.query-m,
.order-m { background: var(--ac-blue); background-image: none; box-shadow: 0 8px 24px rgba(0, 113, 227, .25); }

@media (max-width: 768px) {
    html body { background: var(--ac-bg); }
    .layui-row { margin: 0 10px; }
    .header { height: auto; min-height: 84px; margin-bottom: 0; background: transparent; background-image: none; color: var(--ac-text); border-radius: 0; }
    .header .header-box { padding: 16px 0 0; column-gap: 8px; row-gap: 12px; min-height: 72px; }
    .header .header-box > a { margin-left: 10px; }
    .header .info { color: var(--ac-text) !important; }
    .header .header-box > a[aria-label="进入个人中心"] {
        position: absolute !important;
        top: 20px !important;
        left: 74px !important;
        z-index: 1001;
        width: auto !important;
        max-width: 112px !important;
        height: 40px !important;
        margin: 0 !important;
    }
    .home-order-query-shell { top: 20px !important; }
    .home-order-query-shell a {
        top: 0 !important;
        right: 10px !important;
        height: 40px !important;
        padding: 0 12px !important;
    }
    .main .main-box { margin-top: 14px; padding-top: 18px; border-radius: 18px; }
    .main .title,
    .main .cate,
    .main .goods { margin-left: 16px; margin-right: 16px; }
    .main-box > div[style*="margin: 15px 0"] { margin-left: 16px !important; margin-right: 16px !important; }
    .main .cate { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .main .cate .cate-box { min-width: 0; height: 74px; padding: 12px; }
    .goods-list { grid-template-columns: 1fr; }
    .main .goods .goods-box { min-height: 108px; padding: 14px; }
    .main .goods .picture { flex-basis: 76px; width: 76px; height: 76px; min-width: 76px; }
    .main-box .goods-msg { margin-left: 0; padding: 8px 16px 18px; }
    .l-msg { display: block; width: auto; margin-bottom: 7px; }
    .input { display: flex; align-items: center; width: 100%; }
    .input input { width: 100% !important; }
    .captcha-entry {
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
        width: 100%;
    }
    .captcha-entry .l-msg {
        grid-column: 1;
        margin: 0 0 2px;
    }
    .captcha-entry .input { grid-column: 1; }
    .captcha-entry .captcha-img {
        grid-column: 1;
        width: 180px !important;
        max-width: 100% !important;
        height: 54px !important;
        object-fit: contain;
    }
    .entry.notSelection .input { display: inline-flex; width: auto; }
    .entry.notSelection .input input { width: 64px !important; }
    .layui-card-body { padding: 16px; }
    .query-m { right: 14px; bottom: 18px; }
}