/* ==========================================================================
   glass-ui.css — 服务页面统一视觉系统
   覆盖：卡密查询 / 投诉中心 / 联系我们 / 常见问题
   设计基准：首页 home-tech.css（蓝白配色 · 玻璃质感 · 克制留白 · 无模板感）
   命名：所有组件以 .gl- 前缀，避免与 theme.css / service-pages.css 冲突
   ========================================================================== */

/* ---------- 1. 设计令牌（与首页对齐） ---------- */
:root {
    --gl-ink: #0b2545;
    --gl-ink-2: #44597a;
    --gl-ink-3: #7c8ba1;

    --gl-blue: #2563eb;
    --gl-blue-deep: #1d4ed8;
    --gl-blue-soft: #3b82f6;
    --gl-blue-100: #e3edfe;
    --gl-blue-50: #f2f7ff;

    --gl-line: rgba(19, 49, 92, .10);
    --gl-line-soft: rgba(19, 49, 92, .07);
    --gl-line-strong: rgba(37, 99, 235, .45);

    --gl-glass: linear-gradient(165deg, rgba(255, 255, 255, .97), rgba(247, 250, 255, .93));
    --gl-glass-2: linear-gradient(165deg, rgba(255, 255, 255, .90), rgba(244, 249, 255, .84));
    --gl-blur: blur(16px) saturate(120%);
    --gl-hi: inset 0 1px 0 rgba(255, 255, 255, .95);

    --gl-r-sm: 10px;
    --gl-r-md: 14px;
    --gl-r: 16px;
    --gl-r-lg: 22px;

    --gl-sh-sm: 0 6px 18px rgba(19, 49, 92, .08);
    --gl-sh: 0 18px 46px rgba(19, 49, 92, .12);
    --gl-sh-lg: 0 30px 80px rgba(19, 49, 92, .16);

    --gl-grad: linear-gradient(180deg, #5b93f7 0%, #2563eb 46%, #1d4ed8 100%);
    --gl-grad-soft: linear-gradient(160deg, rgba(37, 99, 235, .13), rgba(37, 99, 235, .04));

    --gl-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 2. 页面基底 ---------- */
body.gl-page {
    margin: 0;
    min-height: 100vh;
    color: var(--gl-ink);
    font-family: var(--gl-font);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* 背景由 service-pages.css 提供柔和浅色渐变，这里不再叠加光斑，保持克制 */
.gl-orb { display: none; }

.gl-main { position: relative; z-index: 1; }
.gl-wrap { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }

/* ---------- 3. 面包屑 ---------- */
.gl-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    font-size: 13px;
    color: var(--gl-ink-3);
}
.gl-crumbs a { color: var(--gl-ink-3); text-decoration: none; transition: color .2s; }
.gl-crumbs a:hover { color: var(--gl-blue); }
.gl-crumbs span { color: rgba(19, 49, 92, .28); }
.gl-crumbs b { color: var(--gl-ink-2); font-weight: 700; }

/* ---------- 4. 首屏区块 ---------- */
.gl-hero { position: relative; padding: 46px 0 30px; }
.gl-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    align-items: center;
    gap: clamp(26px, 4vw, 58px);
}
.gl-hero-grid--single { grid-template-columns: minmax(0, 1fr); }
.gl-hero-copy { min-width: 0; }

.gl-hero-title {
    margin: 16px 0 0;
    font-size: clamp(30px, 3.5vw, 46px);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -.02em;
    color: var(--gl-ink);
}
.gl-hero-title em {
    font-style: normal;
    background: linear-gradient(180deg, #3b82f6, #1d4ed8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.gl-hero-desc {
    margin: 16px 0 0;
    max-width: 560px;
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--gl-ink-2);
}

.gl-hero-art { display: flex; align-items: center; justify-content: center; }
.gl-hero-art svg { width: 100%; max-width: 440px; height: auto; display: block; }

/* 小标签（与首页 eyebrow 同一语汇） */
.gl-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 32px;
    padding: 0 15px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--gl-blue);
    background: rgba(37, 99, 235, .08);
    border: 1px solid rgba(37, 99, 235, .20);
}
.gl-tag::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gl-blue);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .14);
}
.gl-tag svg { display: none; }

.gl-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.gl-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border-radius: var(--gl-r-sm);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--gl-ink);
    text-decoration: none;
    background: rgba(255, 255, 255, .76);
    border: 1px solid var(--gl-line);
    box-shadow: var(--gl-hi), 0 4px 14px rgba(19, 49, 92, .06);
    -webkit-backdrop-filter: var(--gl-blur);
    backdrop-filter: var(--gl-blur);
    transition: transform .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.gl-chip:hover {
    transform: translateY(-2px);
    color: var(--gl-blue-deep);
    border-color: rgba(37, 99, 235, .35);
    box-shadow: var(--gl-hi), 0 10px 22px rgba(19, 49, 92, .12);
}
.gl-chip svg { width: 16px; height: 16px; color: var(--gl-blue); }

/* ---------- 5. 按钮（与首页同样的立体渐变） ---------- */
.gl-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 50px;
    padding: 0 28px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
}
.gl-btn svg { width: 17px; height: 17px; }
.gl-btn:active { transform: translateY(1px); }

.gl-btn--primary {
    color: #fff;
    background: var(--gl-grad);
    border-color: rgba(255, 255, 255, .22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .32),
        inset 0 -2px 0 rgba(0, 0, 0, .14),
        0 1px 0 #1e40af,
        0 10px 26px rgba(37, 99, 235, .28);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}
.gl-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .38),
        inset 0 -2px 0 rgba(0, 0, 0, .12),
        0 1px 0 #1e40af,
        0 16px 34px rgba(37, 99, 235, .34);
}

.gl-btn--ghost {
    color: var(--gl-ink);
    background: rgba(255, 255, 255, .72);
    border-color: rgba(19, 49, 92, .16);
    box-shadow: var(--gl-hi), 0 4px 14px rgba(19, 49, 92, .08);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.gl-btn--ghost:hover {
    transform: translateY(-2px);
    color: var(--gl-blue-deep);
    background: rgba(255, 255, 255, .95);
    border-color: rgba(37, 99, 235, .4);
    box-shadow: var(--gl-hi), 0 10px 22px rgba(19, 49, 92, .12);
}

.gl-btn--soft {
    color: var(--gl-blue-deep);
    background: var(--gl-blue-100);
    border-color: rgba(37, 99, 235, .16);
}
.gl-btn--soft:hover { transform: translateY(-2px); background: #d8e7fe; }

.gl-btn--sm { height: 40px; padding: 0 18px; font-size: 13.5px; border-radius: 10px; }
.gl-btn--block { width: 100%; }
.gl-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ---------- 6. 表单控件 ---------- */
.gl-fields { display: grid; gap: 16px; }
.gl-fields--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gl-field { display: block; min-width: 0; }
.gl-field--full { grid-column: 1 / -1; }
.gl-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--gl-ink-2);
}
.gl-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: var(--gl-r-md);
    background: rgba(255, 255, 255, .8);
    border: 1px solid var(--gl-line);
    box-shadow: var(--gl-hi);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.gl-input-wrap:focus-within {
    border-color: rgba(37, 99, 235, .42);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .1), var(--gl-hi);
}
.gl-input-ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    color: var(--gl-blue);
}
.gl-input-ico svg { width: 18px; height: 18px; }
.gl-input,
.gl-select,
.gl-textarea {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 52px;
    padding: 0 16px;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--gl-ink);
    border-radius: inherit;
}
.gl-input-iconed { padding-left: 0; }
.gl-textarea { height: auto; min-height: 118px; padding: 14px 16px; line-height: 1.75; resize: vertical; }
.gl-select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px; }
.gl-select-wrap { position: relative; display: block; }
.gl-select-wrap::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--gl-ink-3);
    border-bottom: 2px solid var(--gl-ink-3);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}
.gl-input::placeholder,
.gl-textarea::placeholder { color: #9db2cb; }
.gl-field-hint { margin: 8px 0 0; font-size: 12px; line-height: 1.7; color: var(--gl-ink-3); }

.gl-captcha {
    flex: 0 0 auto;
    height: 42px;
    margin-right: 6px;
    border-radius: 10px;
    border: 1px solid var(--gl-line);
    background: #fff;
    cursor: pointer;
}
.gl-inline-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
    height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: var(--gl-grad);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.gl-inline-btn:hover { filter: brightness(1.05); }

/* 首屏查询条 */
.gl-search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    padding: 10px;
    border-radius: var(--gl-r);
    background: rgba(255, 255, 255, .82);
    border: 1px solid var(--gl-line);
    box-shadow: var(--gl-hi), var(--gl-sh);
    -webkit-backdrop-filter: var(--gl-blur);
    backdrop-filter: var(--gl-blur);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.gl-search-field { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.gl-search-field svg { flex: 0 0 auto; width: 19px; height: 19px; margin: 0 12px 0 12px; color: var(--gl-blue); }
.gl-search-field input {
    flex: 1 1 auto;
    min-width: 0;
    height: 50px;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    color: var(--gl-ink);
}
.gl-search-field input::placeholder { color: #9db2cb; }
.gl-search .gl-btn { flex: 0 0 auto; }
.gl-search.is-focus { border-color: rgba(37, 99, 235, .42); box-shadow: 0 0 0 4px rgba(37, 99, 235, .1), var(--gl-hi), var(--gl-sh); }

/* ---------- 7. 玻璃卡片 ---------- */
.gl-card {
    position: relative;
    border-radius: var(--gl-r-lg);
    background: var(--gl-glass);
    border: 1px solid var(--gl-line);
    box-shadow: var(--gl-hi), var(--gl-sh);
    -webkit-backdrop-filter: var(--gl-blur);
    backdrop-filter: var(--gl-blur);
    overflow: hidden;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.gl-card + .gl-card { margin-top: 22px; }
.gl-card--soft { background: var(--gl-glass-2); }
.gl-card--solid { background: rgba(255, 255, 255, .96); }

.gl-card-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 24px 28px 0;
}
.gl-card-head h2,
.gl-card-head h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--gl-ink); }
.gl-card-head p { margin: 6px 0 0; font-size: 13px; line-height: 1.7; color: var(--gl-ink-3); }
.gl-card-head > div { min-width: 0; }
.gl-card-body { padding: 20px 28px 26px; }

/* 注意：service-pages.css 里有 `.service-page footer{background:#0b2545!important}`，
   因此页面内统一使用 div 作为卡片页脚；此条为兜底保护。 */
.service-page .gl-card-foot,
.service-page footer.gl-card-foot {
    color: inherit !important;
    background: transparent !important;
    border: 0 !important;
}
.service-page .gl-card-foot a { color: inherit !important; }

.gl-card-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0 28px 26px;
}
.gl-card-foot--split { align-items: center; justify-content: space-between; }

.gl-ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    color: var(--gl-blue);
    background: var(--gl-grad-soft);
    border: 1px solid rgba(37, 99, 235, .22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
.gl-ico svg { width: 22px; height: 22px; }

/* ---------- 8. 步骤条 ---------- */
.gl-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}
.gl-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px;
    border-radius: var(--gl-r-md);
    background: rgba(255, 255, 255, .7);
    border: 1px solid var(--gl-line-soft);
    box-shadow: var(--gl-hi);
    -webkit-backdrop-filter: var(--gl-blur);
    backdrop-filter: var(--gl-blur);
}
.gl-step-dot {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    color: var(--gl-blue);
    background: #fff;
    border: 1px solid var(--gl-line);
    box-shadow: var(--gl-hi);
}
.gl-step strong { display: block; font-size: 14px; color: var(--gl-ink); }
.gl-step p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--gl-ink-3); }
.gl-step.is-active { background: rgba(255, 255, 255, .92); border-color: var(--gl-line); box-shadow: var(--gl-hi), var(--gl-sh-sm); }
.gl-step.is-active .gl-step-dot { color: #fff; background: var(--gl-grad); border-color: transparent; }
.gl-step.is-done .gl-step-dot { color: #fff; background: linear-gradient(160deg, #34d399, #10b981); border-color: transparent; }

/* ---------- 9. 键值信息行 ---------- */
.gl-kv { display: grid; gap: 2px; }
.gl-kv-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 4px;
    border-bottom: 1px solid var(--gl-line-soft);
}
.gl-kv-row:last-child { border-bottom: 0; }
.gl-kv-key { flex: 0 0 auto; font-size: 13.5px; color: var(--gl-ink-3); }
.gl-kv-val { min-width: 0; text-align: right; font-size: 14.5px; font-weight: 700; color: var(--gl-ink); overflow-wrap: anywhere; }
.gl-kv-val--strong { font-size: 17px; font-weight: 800; color: var(--gl-blue-deep); }

.gl-badge {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 11px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #0f766e;
    background: #e7f8f3;
    border: 1px solid rgba(16, 185, 129, .22);
}
.gl-badge--warn { color: #b45309; background: #fff6e6; border-color: rgba(245, 158, 11, .26); }

/* ---------- 10. 订单列表 ---------- */
.gl-order-list { display: grid; gap: 12px; }
.gl-order-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    border-radius: var(--gl-r-md);
    background: rgba(255, 255, 255, .78);
    border: 1px solid var(--gl-line-soft);
    box-shadow: var(--gl-hi);
    text-decoration: none;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.gl-order-row:hover { transform: translateY(-3px); border-color: rgba(37, 99, 235, .3); box-shadow: var(--gl-sh-sm); }
.gl-order-row h3 { margin: 0 0 8px; font-size: 14.5px; font-weight: 700; color: var(--gl-ink); }
.gl-order-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; }
.gl-order-meta li { font-size: 12.5px; color: var(--gl-ink-3); }
.gl-order-meta b { color: var(--gl-ink-2); font-weight: 600; }
.gl-order-amount { font-size: 16px; font-weight: 800; color: var(--gl-blue-deep); white-space: nowrap; }
.gl-order-go {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 15px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--gl-blue-deep);
    background: var(--gl-blue-100);
    white-space: nowrap;
}

/* ---------- 11. 卡密内容区 ---------- */
.gl-cards-box {
    margin-top: 8px;
    padding: 18px 20px;
    border-radius: var(--gl-r-md);
    background: linear-gradient(160deg, rgba(240, 247, 255, .92), rgba(255, 255, 255, .8));
    border: 1px solid var(--gl-line-soft);
}
.gl-cards-box h4 { margin: 0 0 12px; font-size: 13.5px; font-weight: 800; color: var(--gl-ink-2); }
.gl-cards-box p { margin: 0 0 8px; font-size: 14px; line-height: 1.8; color: var(--gl-ink); overflow-wrap: anywhere; }
.gl-cards-box p:last-child { margin-bottom: 0; }
.gl-cards-box a { color: var(--gl-blue); font-weight: 700; text-decoration: none; }
.gl-cards-box a:hover { text-decoration: underline; }
.gl-cards-box img { max-height: 150px; border-radius: 10px; cursor: pointer; }

/* ---------- 12. 结果提示 ---------- */
.gl-notice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 24px;
    border-radius: var(--gl-r-md);
    background: linear-gradient(150deg, rgba(255, 255, 255, .94), rgba(232, 241, 255, .8));
    border: 1px solid var(--gl-line);
    box-shadow: var(--gl-hi);
}
.gl-notice svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--gl-blue); }
.gl-notice p { margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--gl-ink-2); }
.gl-notice strong { color: var(--gl-ink); }

/* ---------- 13. 侧栏 ---------- */
.gl-side-col { display: flex; flex-direction: column; gap: 22px; }
.gl-side-col .gl-card + .gl-card { margin-top: 0; }

.gl-tips { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.gl-tips li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--gl-ink-2);
}
.gl-tips li::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin-top: 9px;
    border-radius: 50%;
    background: var(--gl-blue);
}
.gl-tips a { color: var(--gl-blue); font-weight: 700; text-decoration: none; }
.gl-tips a:hover { text-decoration: underline; }

.gl-quick { display: grid; gap: 10px; }
.gl-quick a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    border-radius: var(--gl-r-sm);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gl-ink-2);
    text-decoration: none;
    background: rgba(255, 255, 255, .68);
    border: 1px solid var(--gl-line-soft);
    transition: transform .2s ease, color .2s ease, border-color .2s ease;
}
.gl-quick a:hover { transform: translateX(3px); color: var(--gl-blue-deep); border-color: rgba(37, 99, 235, .3); }
.gl-quick a svg { width: 15px; height: 15px; color: var(--gl-blue); }

/* 联系我们：联系方式卡片（旧版三等分卡片，已由 15b 的通道层级替换） */
.gl-side-art { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.gl-side-art svg { width: 100%; max-width: 200px; height: auto; }
.gl-side-art img { width: 168px; height: auto; border-radius: 12px; border: 1px solid var(--gl-line); background: #fff; }
.gl-side-art p { margin: 0; font-size: 13px; color: var(--gl-ink-3); text-align: center; }

/* ---------- 14. 正文两栏 ---------- */
.gl-body { position: relative; padding: 12px 0 96px; }
.gl-grid { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.gl-grid--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gl-stack { display: flex; flex-direction: column; gap: 22px; }
.gl-stack > .gl-card + .gl-card { margin-top: 0; }

/* ---------- 15. 常见问题 ---------- */
.gl-faq .layui-tab {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    grid-template-areas: "nav main" "aside main";
    gap: 22px;
    align-items: start;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.gl-faq .layui-tab-title {
    grid-area: nav;
    position: static;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 14px;
    white-space: normal;
    overflow: visible;
    border: 1px solid var(--gl-line);
    border-radius: var(--gl-r-lg);
    background: var(--gl-glass);
    box-shadow: var(--gl-hi), var(--gl-sh);
    -webkit-backdrop-filter: var(--gl-blur);
    backdrop-filter: var(--gl-blur);
    box-sizing: border-box;
}
.gl-faq .layui-tab-title li {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 46px;
    margin: 0;
    padding: 0 15px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--gl-ink-2);
    cursor: pointer;
    box-sizing: border-box;
    transition: background .2s ease, color .2s ease;
}
.gl-faq .layui-tab-title li::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(19, 49, 92, .22);
    transition: background .2s ease, box-shadow .2s ease;
}
.gl-faq .layui-tab-title li:hover { background: rgba(255, 255, 255, .8); color: var(--gl-blue-deep); }
.gl-faq .layui-tab-title li.layui-this {
    color: var(--gl-blue-deep);
    background: linear-gradient(150deg, #ffffff, #e8f1ff);
    box-shadow: var(--gl-hi), 0 10px 22px -18px rgba(37, 99, 235, .6);
}
.gl-faq .layui-tab-title li.layui-this::before { background: var(--gl-blue); box-shadow: 0 0 0 4px rgba(37, 99, 235, .14); }
.gl-faq .layui-tab-title .layui-this:after,
.gl-faq .layui-tab-bar { display: none !important; }

.gl-faq .layui-tab-content {
    grid-area: main;
    padding: 0;
    min-width: 0;
    border-radius: var(--gl-r-lg);
    background: var(--gl-glass);
    border: 1px solid var(--gl-line);
    box-shadow: var(--gl-hi), var(--gl-sh);
    -webkit-backdrop-filter: var(--gl-blur);
    backdrop-filter: var(--gl-blur);
}
.gl-faq .layui-tab-item { padding: 10px; }
.gl-faq .layui-tab-item > ul { margin: 0; padding: 0; list-style: none; }

/* 提高优先级：页面内联 <style> 里的 `.layui-tab-item li` 需被覆盖。
   直接作用于结构（> ul > li），这样「加载更多」动态插入的条目也能生效。 */
.gl-faq .layui-tab-content .layui-tab-item > ul > li {
    position: relative;
    padding: 18px 22px;
    border-radius: var(--gl-r-md);
    background: transparent;
    border: 1px solid transparent;
    border-bottom: 0;
    transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.gl-faq .layui-tab-content .layui-tab-item > ul > li + li { margin-top: 4px; }
.gl-faq .layui-tab-content .layui-tab-item > ul > li:hover { background: rgba(255, 255, 255, .7); border-color: var(--gl-line-soft); }
.gl-faq .layui-tab-content .layui-tab-item > ul > li.open {
    background: rgba(255, 255, 255, .94);
    border-color: var(--gl-line);
    box-shadow: var(--gl-hi), var(--gl-sh-sm);
}
.gl-faq .layui-tab-content .layui-tab-item > ul > li > h3 {
    position: relative;
    margin: 0;
    padding: 0 44px 0 0;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--gl-ink);
    cursor: pointer;
}
.gl-faq .layui-tab-content .layui-tab-item > ul > li > h3::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--gl-blue);
    border-bottom: 2px solid var(--gl-blue);
    transform: translateY(-70%) rotate(45deg);
    transition: transform .25s ease;
}
.gl-faq .layui-tab-content .layui-tab-item > ul > li.open > h3::after { transform: translateY(-30%) rotate(-135deg); }
.gl-faq .layui-tab-content .layui-tab-item > ul > li > p { display: none; margin: 8px 0 0; font-size: 12.5px; color: var(--gl-ink-3); }
.gl-faq .layui-tab-content .layui-tab-item > ul > li.open > p { display: block; }
.gl-faq .service-article-body {
    display: none;
    margin-top: 12px;
    padding: 16px 18px;
    border-radius: var(--gl-r-sm);
    font-size: 14px;
    line-height: 1.9;
    color: var(--gl-ink-2);
    background: rgba(242, 247, 255, .86);
    border: 1px solid var(--gl-line-soft);
    overflow-wrap: anywhere;
}
.gl-faq .layui-tab-content .layui-tab-item > ul > li.open .service-article-body { display: block; }
.gl-faq .service-article-body img { max-width: 100% !important; height: auto; border-radius: 10px; }
.gl-faq .service-article-body p { margin: 0 0 10px; }

.gl-faq-more {
    margin: 16px 0 6px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--gl-blue);
    cursor: pointer;
}
.gl-faq-empty {
    margin: 18px 0 6px;
    text-align: center;
    font-size: 13.5px;
    color: var(--gl-ink-3);
}
.gl-faq-aside { grid-area: aside; }
.gl-faq-aside .gl-card + .gl-card { margin-top: 18px; }

/* ---------- 15b. 联系我们：三级信息层级 ---------- */
.gl-sec-head { max-width: 640px; margin: 0 0 24px; }
.gl-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--gl-blue);
}
.gl-kicker::before {
    content: "";
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--gl-grad);
}
.gl-sec-title {
    margin: 12px 0 0;
    font-size: clamp(21px, 2.2vw, 25px);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.02em;
    color: var(--gl-ink);
}
.gl-sec-note { margin: 10px 0 0; font-size: 14px; line-height: 1.85; color: var(--gl-ink-3); }

.gl-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.58fr) minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}
.gl-contact-main { min-width: 0; }

/* 主通道：一条横向信息带，而不是与次级卡片等权 */
.gl-channel { display: flex; align-items: center; gap: 20px; padding: 26px 28px; }
.gl-channel-main { flex: 1 1 auto; min-width: 0; }
.gl-channel-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--gl-ink);
}
.gl-channel-desc { margin: 8px 0 0; font-size: 13.5px; line-height: 1.8; color: var(--gl-ink-3); }
.gl-channel-act { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }

.gl-channel--primary {
    padding: 28px;
    background: linear-gradient(150deg, rgba(255, 255, 255, .98), rgba(235, 243, 255, .9));
    border-color: rgba(37, 99, 235, .20);
}
.gl-channel--primary .gl-ico { width: 54px; height: 54px; border-radius: 16px; }
.gl-channel--primary .gl-ico svg { width: 26px; height: 26px; }
.gl-channel-value {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 0;
    font-size: clamp(21px, 2.4vw, 26px);
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.2;
    color: var(--gl-blue-deep);
    font-variant-numeric: tabular-nums;
}
.gl-channel-value em {
    font-style: normal;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--gl-ink-3);
}

/* 次级通道：等权两列 */
.gl-duo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
    margin-top: 22px;
}
.gl-duo .gl-card + .gl-card { margin-top: 0; }

.gl-mini { display: flex; flex-direction: column; height: 100%; padding: 24px 26px; }
.gl-mini-top { display: flex; align-items: center; gap: 13px; }
.gl-mini h3 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--gl-ink); }
.gl-mini-value {
    margin: 16px 0 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--gl-blue-deep);
    overflow-wrap: anywhere;
}
.gl-mini-value--muted { font-weight: 600; color: var(--gl-ink-3); }
.gl-mini p { margin: 8px 0 0; font-size: 13px; line-height: 1.8; color: var(--gl-ink-3); }
.gl-mini .gl-btn { margin-top: 18px; align-self: flex-start; }

/* 侧栏：二维码卡 */
.gl-qr { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 24px; }
.gl-qr h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--gl-ink); }
.gl-qr img {
    width: 178px;
    height: 178px;
    padding: 8px;
    object-fit: contain;
    border-radius: var(--gl-r-md);
    background: #fff;
    border: 1px solid var(--gl-line);
    box-shadow: 0 10px 26px rgba(19, 49, 92, .08);
}
.gl-qr p { margin: 0; font-size: 12.5px; line-height: 1.75; color: var(--gl-ink-3); text-align: center; }

/* 侧栏：资料行 */
.gl-meta { display: grid; }
.gl-meta-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid var(--gl-line-soft);
}
.gl-meta-row:last-child { border-bottom: 0; }
.gl-meta-key { flex: 0 0 auto; font-size: 13px; color: var(--gl-ink-3); }
.gl-meta-val { min-width: 0; text-align: right; font-size: 13.5px; font-weight: 700; color: var(--gl-ink); }

/* 右侧悬浮联系模块的样式已独立到 float-widget.css（首页 + 服务页共用） */

/* ---------- 16. 响应式 ---------- */
@media (max-width: 1080px) {
    .gl-hero-grid { grid-template-columns: minmax(0, 1fr); }
    .gl-hero-art { order: -1; }
    .gl-hero-art svg { max-width: 340px; }
    .gl-grid { grid-template-columns: minmax(0, 1fr); }
    .gl-faq .layui-tab { grid-template-columns: minmax(0, 1fr); grid-template-areas: "nav" "main" "aside"; }
    .gl-faq .layui-tab-title { flex-direction: row; flex-wrap: wrap; }
    .gl-faq .layui-tab-title li { width: auto; flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 767px) {
    .gl-wrap { width: calc(100% - 32px); }
    .gl-hero { padding: 30px 0 22px; }
    .gl-hero-title { font-size: 30px; }
    .gl-hero-desc { font-size: 14.5px; }
    .gl-card-head { padding: 20px 20px 0; }
    .gl-card-body { padding: 16px 20px 22px; }
    .gl-card-foot { padding: 0 20px 22px; }
    .gl-search { flex-wrap: wrap; padding: 12px; }
    .gl-search-field { flex: 1 1 100%; }
    .gl-search .gl-btn { flex: 1 1 100%; }
    .gl-fields--two { grid-template-columns: minmax(0, 1fr); }
    .gl-steps { grid-template-columns: minmax(0, 1fr); }
    .gl-order-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .gl-order-amount { justify-self: start; }
    .gl-kv-row { flex-direction: column; align-items: flex-start; gap: 6px; }
    .gl-kv-val { text-align: left; }
    .gl-body { padding: 8px 0 96px; }
    .gl-faq .layui-tab-item { padding: 6px; }
    .gl-faq .layui-tab-content .gl-faq-item { padding: 16px 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .gl-btn, .gl-chip, .gl-order-row, .gl-quick a, .gl-card { transition: none !important; }
}

/* ---------- 17. 响应式补充（联系页三级层级） ---------- */
@media (max-width: 1080px) {
    .gl-contact-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
    .gl-sec-head { margin-bottom: 20px; }
    .gl-channel { flex-wrap: wrap; gap: 16px; padding: 22px 20px; }
    .gl-channel-act { width: 100%; }
    .gl-channel-act .gl-btn { flex: 1 1 auto; }
    .gl-mini { padding: 20px; }
    .gl-qr img { width: 156px; height: 156px; }
    .gl-meta-row { flex-direction: column; align-items: flex-start; gap: 5px; }
    .gl-meta-val { text-align: left; }
}