/* ==========================================================================
   客服台高级质感统一层（克制风格：灰底 + 白卡 + 毛玻璃顶栏）
   在各页面 </body> 前引入，靠文档顺序覆盖页面内联样式
   ========================================================================== */
@font-face {
    font-family: 'XZBrush';
    src: url('/fonts/xz-title.woff2?v=1') format('woff2');
    font-display: swap;
}

:root {
    --xz-bg: #f4f5f7;
    --xz-card: #ffffff;
    --xz-line: rgba(60, 60, 67, 0.08);
    --xz-accent: #2f6bff;
    --xz-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 20px rgba(16, 24, 40, 0.05);
}

html { background: #f4f5f7 !important; }
body {
    background: #f4f5f7 !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ---------- 顶栏：毛玻璃 ---------- */
.header {
    background: rgba(255, 255, 255, 0.86) !important;
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    box-shadow: 0 0.5px 0 rgba(60, 60, 67, 0.12);
    position: relative;
    z-index: 20;
}

/* 顶栏标题（毛笔字 + 渐变 + 胶囊），四个页面统一 */
.header-avatar {
    width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
    margin-right: 10px; flex-shrink: 0;
    box-shadow: 0 0 0 2px #ffffff, 0 2px 10px rgba(0, 0, 0, 0.16);
}
.header-title {
    font-family: 'XZBrush', 'Ma Shan Zheng', cursive;
    font-size: 27px; font-weight: normal; letter-spacing: 2px;
    background: linear-gradient(92deg, #2f6bff 10%, #7a3cff 55%, #c93cff 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: #2f6bff;
    line-height: 1.1; display: inline-block; padding-bottom: 2px;
}
.header-plane { font-size: 16px; margin-left: 6px; transform: translateY(-1px); }
.header-tag {
    font-size: 12.5px; font-weight: 700; color: #2f6bff;
    background: rgba(47, 107, 255, 0.09);
    border: 1px solid rgba(47, 107, 255, 0.28);
    padding: 3px 10px 4px; border-radius: 999px;
    margin-left: 8px; line-height: 1; white-space: nowrap;
}

/* ---------- 内容区：让卡片浮在灰底上 ---------- */
.content { background: transparent !important; }
.content > * { flex-shrink: 0; } /* flex 布局的内容区禁止压缩子元素，保证可滚动 */

/* 列表卡片化 */
.group-list {
    background: var(--xz-card) !important;
    margin: 12px 12px 0 !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: var(--xz-shadow);
    padding: 0 !important;
    flex-shrink: 0 !important; /* 防止被 flex 容器压缩导致无法滚动 */
}
.group-item { transition: background 0.16s ease; }
.group-item:active { background: #f2f4f8; }
.group-item:last-child { border-bottom: none !important; }

/* 分组小标题：卡片内的浅灰分区行（iOS 分组表风格） */
.group-list .section-header {
    background: #f6f7f9 !important;
    padding: 7px 16px 6px !important;
    margin: 0 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    color: #98a0ab !important;
    border-bottom: 0.5px solid var(--xz-line);
    border-top: 0.5px solid var(--xz-line);
}
.group-list .section-header:first-child { border-top: none; }

/* 「我的」页卡片化 */
.profile-section,
.menu-group {
    background: var(--xz-card) !important;
    margin: 12px 12px 0 !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: var(--xz-shadow);
    flex-shrink: 0 !important; /* 防止被 flex 容器压缩导致无法滚动 */
}
.menu-item,
.profile-link { transition: background 0.16s ease; }
.menu-item:active,
.profile-link:active { background: #f2f4f8; }
.menu-item:last-child { border-bottom: none !important; }

/* 图标圆角统一 */
.group-item-icon img { border-radius: 9px; }