/* =====================================================================
   JiLove BS5 主题 —— 基于 Bootstrap 5 之上的站内样式
   设计要点：
   1. 无障碍优先：允许缩放、焦点环、44px 触摸区、正文对比度 >= 4.5:1
   2. 品牌红保留但加深到 AA 对比度（文字用 --j-brand，装饰可用 --j-brand-vivid）
   3. 不依赖任何 layui 类名
   ===================================================================== */

:root {
    --j-brand: #c2185b;          /* 文字链接红，白底对比度约 5.4:1 */
    --j-brand-vivid: #e91e63;    /* 按钮/装饰红 */
    --j-brand-dark: #880e4f;     /* hover */
    --j-ink: #212121;            /* 主文字 */
    --j-ink-2: #5f6368;          /* 次要文字 */
    --j-bg: #faf7f8;
    --j-footer-bg: #2b2b2b;

    --bs-primary: var(--j-brand);
    --bs-link-color: var(--j-brand);
    --bs-link-hover-color: var(--j-brand-dark);
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.6;
}

html { scroll-behavior: smooth; }

body {
    background: var(--j-bg);
    color: var(--j-ink);
    padding-bottom: 4.5rem; /* 给固定底栏让位 */
    -webkit-tap-highlight-color: transparent;
}

/* ---------- 焦点可见性（键盘用户必需） ---------- */
:focus-visible {
    outline: 3px solid #1a73e8;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- 跳转链接（读屏/键盘用户跳过导航） ---------- */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 2000;
    background: var(--j-brand-dark);
    color: #fff;
    padding: .6rem 1.2rem;
    border-radius: 0 0 .5rem 0;
}
.skip-link:focus {
    left: 0;
    color: #fff;
}

/* ---------- 顶栏 ---------- */
.j-topbar {
    background: #fff;
    border-bottom: 1px solid #eee;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.j-topbar h1 {
    font-size: .9rem;
    font-weight: 500;
    margin: 0;
}
.j-topbar h1 a { color: var(--j-brand); text-decoration: none; }

/* ---------- 站点标题区 ---------- */
.j-site-title h1 a { color: var(--j-brand); text-decoration: none; }
.j-site-title .j-domain {
    color: var(--j-ink-2);
    font-size: .85rem;
    letter-spacing: .02em;
}

/* ---------- 内容容器 ----------
   移动/小屏下居中较窄宽度（≤760px）以保证阅读舒适；
   PC/大屏下放宽至 1180px，避免详情页大图与右侧资料拥挤。
   页面左右留白由容器 class 的 px-1(0.25rem) 控制，
   与首页嘉宾行(列自身 .25rem padding)叠加后恰等于两卡间距。 */
.j-page { max-width: 760px; }
@media (min-width: 992px) {
    .j-page { max-width: 1180px; }
}
.j-page-title {
    font-size: 1.15rem;
    font-weight: 600;
    border-left: 4px solid var(--j-brand-vivid);
    padding-left: .6rem;
    margin: 1.2rem 0 1rem;
}

/* ---------- 卡片 ---------- */
.j-card {
    background: #fff;
    border: 1px solid #f0e3e8;
    border-radius: .75rem;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.j-card + .j-card { margin-top: 1rem; }

/* ---------- 用户卡片（首页列表） ---------- */
.j-user-card { transition: box-shadow .2s ease; }
.j-user-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.j-user-card .j-avatar {
    width: 84px; height: 84px;
    border-radius: .6rem;
    object-fit: cover;
    background: #f3e6ec;
}
.j-user-card .j-name { font-weight: 600; font-size: 1rem; }
.j-user-card .j-meta { color: var(--j-ink-2); font-size: .85rem; }

/* j-list-item 占位背景渐变（图片未加载完成时的柔和色，避免空白突兀） */
.j-list-item .j-pic {
background: linear-gradient(135deg,#f5f5f5 0%,#e8e8e8 100%);
}

.j-tag {
    display: inline-block;
    font-size: .75rem;
    padding: .1rem .5rem;
    border-radius: 1rem;
    background: #fce4ec;
    color: var(--j-brand-dark);
    margin-right: .35rem;
}

/* ---------- 表单 ---------- */
.form-label { font-weight: 500; }
.form-control { min-height: 44px; }       /* 触摸目标 */
.form-control:focus {
    border-color: var(--j-brand-vivid);
    box-shadow: 0 0 0 .2rem rgba(233,30,99,.15);
}
.j-captcha { display: block; width: 100%; height: auto; max-width: 100%; max-height: 44px; border-radius: .375rem; cursor: pointer; }
/* 防止登录页等页面出现页面级横向溢出（验证码等被推到屏幕右侧外） */
html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }

/* 加载中遮罩（JUI.loading，纯原生，不依赖 Bootstrap Modal） */
.j-loading-mask {
    position: fixed; inset: 0; z-index: 2000;
    display: none; align-items: center; justify-content: center;
    background: rgba(0,0,0,.45);
}
.j-loading-mask.show { display: flex; }

/* 顶栏单按钮循环切换（无障碍版 ⇄ 经典版），紧凑不占高 */
.j-version-btn {
    display: inline-flex; align-items: center; gap: .35rem; flex-shrink: 0;
    font-size: .8rem; line-height: 1; padding: .35rem .75rem;
    border: none; color: #fff; cursor: pointer; white-space: nowrap;
    background: linear-gradient(135deg, var(--j-brand-vivid) 0%, var(--j-brand) 100%);
    border-radius: 2rem; box-shadow: 0 2px 8px rgba(194,24,91,.25);
    transition: transform .15s ease, box-shadow .15s ease;
}
.j-version-btn .ic { font-size: .95rem; line-height: 1; transition: transform .35s ease; }
.j-version-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(194,24,91,.32); }
.j-version-btn:hover .ic { transform: rotate(180deg); }
.j-version-btn:focus-visible { outline: 2px solid var(--j-brand-dark); outline-offset: 2px; }

/* ---------- 按钮 ---------- */
.btn-j {
    background: var(--j-brand-vivid);
    border-color: var(--j-brand-vivid);
    color: #fff;
    min-height: 44px;
    font-weight: 500;
}
.btn-j:hover, .btn-j:focus {
    background: var(--j-brand-dark);
    border-color: var(--j-brand-dark);
    color: #fff;
}
.btn-j-outline {
    border-color: var(--j-brand-vivid);
    color: var(--j-brand-dark);
    min-height: 44px;
}
.btn-j-outline:hover {
    background: var(--j-brand-vivid);
    border-color: var(--j-brand-vivid);
    color: #fff;
}

/* 按钮内文字垂直居中（解决 min-height 下文字靠上问题） */
.btn-j, .btn-j-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
}
.btn-j.btn-sm, .btn-j-outline.btn-sm { min-height: 2.25rem; }

/* 图标在上、文字在下的竖向服务按钮（会员中心“我的服务”等） */
.btn-j.j-svc-btn, .btn-j-outline.j-svc-btn {
    flex-direction: flex;
    gap: .15rem;
    line-height: 1.2;
    padding-top: .6rem;
    padding-bottom: .6rem;
}
.btn-j.j-svc-btn .iconfont, .btn-j-outline.j-svc-btn .iconfont {
    font-size: 1.6rem;
    line-height: 1;
    color: var(--j-brand-vivid);
}
/* 服务按钮右上角角标（缘豆数量 / new） */
.btn-j.j-svc-badge-pos, .btn-j-outline.j-svc-badge-pos { position: relative; }
.j-svc-badge {
    position: absolute;
    top: .35rem;
    right: .35rem;
    z-index: 1;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 .28rem;
    line-height: 1.05rem;
    font-size: .6rem;
    font-weight: 700;
    font-style: normal;
    text-align: center;
    color: #fff;
    background: var(--j-brand-vivid);
    border-radius: 1rem;
    white-space: nowrap;
    box-shadow: 0 0 0 2px #fff;
}
.j-svc-badge.j-svc-new {
    background: var(--j-danger, #d32f2f);
    font-size: .52rem;
    text-transform: uppercase;
}

/* ---------- 底部信息 ---------- */
.j-footer {
    background: var(--j-footer-bg);
    color: #cfcfcf;
    padding: 1.2rem 0 1.5rem;
    font-size: .85rem;
}

/* 个人中心分节标题 */
.j-sec {
    font-size: .95rem;
    font-weight: 600;
    color: var(--j-ink-2);
    margin: 1.2rem 0 .6rem;
    padding-left: .5rem;
    border-left: 3px solid var(--j-brand-vivid);
}

/* 缘豆兑换通知 */
.j-redeem-notify { border-left: 4px solid var(--j-brand-vivid); }

/* =====================================================================
   会员中心 —— 高级宫格（无障碍 BS5 版）
   ===================================================================== */
.page-member-home {
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
}

/* 顶部身份卡 */
.member-hero {
    position: relative;
    overflow: hidden;
    border: 0;
    background:
        radial-gradient(9.5rem 9.5rem at 108% -12%, rgba(233,30,99,.18), transparent 70%),
        linear-gradient(160deg, #fff 0%, #fff5f8 100%);
    box-shadow: 0 8px 22px rgba(194,24,91,.09);
}
.member-hero::after {
    content: "";
    position: absolute;
    right: -1.6rem;
    bottom: -2.3rem;
    width: 7.5rem;
    height: 7.5rem;
    border-radius: 50%;
    border: 1.4rem solid rgba(233,30,99,.05);
}
.member-hero .member-header-imgwrap img {
    border: 2px solid #fff;
    box-shadow: 0 4px 12px rgba(194,24,91,.2);
}

/* 宫格通用单元 */
.mg-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 6.4rem;
    padding: .75rem .55rem;
    text-align: center;
    border-radius: 1.1rem;
    background: #fff;
    border: 1px solid #f0e3e8;
    box-shadow: 0 3px 12px rgba(0,0,0,.045);
    text-decoration: none;
    color: var(--j-ink);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
a.mg-cell:hover,
a.mg-cell:focus-visible {
    text-decoration: none;
    color: var(--j-brand);
    border-color: #f7c3d6;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(194,24,91,.14);
}
.mg-cell .mg-ic {
    width: 2.6rem;
    height: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .85rem;
    font-size: 1.35rem;
    color: #fff;
    background: linear-gradient(135deg, #f0709b 0%, #d81b60 100%);
    box-shadow: 0 5px 12px rgba(216,27,96,.22);
}
.mg-cell .mg-ic.ic2 { background: linear-gradient(135deg, #5bb8ff 0%, #1565c0 100%); box-shadow: 0 5px 12px rgba(21,101,192,.2); }
.mg-cell .mg-ic.ic3 { background: linear-gradient(135deg, #ffb45c 0%, #ef6c00 100%); box-shadow: 0 5px 12px rgba(239,108,0,.2); }
.mg-cell .mg-ic.ic4 { background: linear-gradient(135deg, #5ed6c7 0%, #00897b 100%); box-shadow: 0 5px 12px rgba(0,137,123,.2); }
.mg-cell .mg-ic.ic5 { background: linear-gradient(135deg, #ab8bfc 0%, #5e35b1 100%); box-shadow: 0 5px 12px rgba(94,53,177,.2); }
.mg-cell .mg-ic.ic6 { background: linear-gradient(135deg, #7ce1f2 0%, #0288d1 100%); box-shadow: 0 5px 12px rgba(2,136,209,.2); }
.mg-cell .mg-name { font-size: .9rem; font-weight: 700; line-height: 1.3; }
.mg-cell .mg-sub { font-size: .72rem; color: var(--j-ink-2); line-height: 1.4; }
.mg-cell .mg-status { display: inline-flex; align-items: center; gap: .15rem; font-size: .68rem; color: #2e7d32; }
.mg-cell .mg-status.todo { color: var(--j-ink-2); }
.mg-cell .mg-status .iconfont { font-size: .8rem; }

/* 会员大卡（横幅式会员身份卡） */
.mg-feat {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1.05rem 1.15rem;
    border-radius: 1.25rem;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(120deg, #e91e63 0%, #ad1457 58%, #7b0f3c 100%);
    box-shadow: 0 10px 24px rgba(136,14,79,.24);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.mg-feat:hover,
.mg-feat:focus-visible {
    color: #fff;
    text-decoration: none;
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(136,14,79,.32);
}
.mg-feat::after {
    content: "";
    position: absolute;
    right: -2.4rem;
    top: -3rem;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
}
.mg-feat .feat-ic {
    flex: none;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.55rem;
    color: #fff;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.4);
}
.mg-feat img.feat-grade { height: 2.7rem; width: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.mg-feat .feat-txt { flex: 1; min-width: 0; }
.mg-feat .feat-title { display: block; font-size: 1.05rem; font-weight: 800; line-height: 1.3; }
.mg-feat .feat-sub { display: block; font-size: .78rem; opacity: .94; margin-top: .15rem; line-height: 1.45; }
.mg-feat .feat-go {
    flex: none;
    font-size: .8rem;
    font-weight: 700;
    color: #c2185b;
    padding: .48rem .95rem;
    border-radius: 2rem;
    background: #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,.12);
}

/* 会员中心分节标题（宫格化后增强） */
.member-sec {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 1.35rem 0 .7rem;
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--j-ink);
}
.member-sec .iconfont { color: var(--j-brand-vivid); font-size: 1.1rem; }
.member-sec small { font-weight: 400; color: var(--j-ink-2); font-size: .75rem; margin-left: auto; }

/* 宫格提示条（未实名 / 未传照片） */
.mg-hint {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .9rem;
    border-radius: .9rem;
    font-size: .82rem;
    color: var(--j-ink-2);
    background: #fff7e0;
    border: 1px solid #ffe1a8;
}
.mg-hint.is-danger { color: #a94442; background: #fff0f0; border-color: #f3c4c4; }
.mg-hint .iconfont { font-size: 1.1rem; flex: none; }

html.j-high-contrast .mg-cell,
html.j-high-contrast .mg-hint { border-color: #000; }

/* 宫格行内等宽：col 内 flex 撑满，保证同行卡片高度一致 */
.page-member-home .row > .col,
.page-member-home .row > .col-6,
.page-member-home .row > .col-12 {
    display: flex;
}
.page-member-home .mg-cell { flex: 1 1 auto; width: 100%; }

/* ---------- 无障碍入口（关怀版） ---------- */
.j-a11y {
    position: fixed;
    left: .75rem;
    bottom: 5rem;
    z-index: 1040;
}
.j-a11y-toggle {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--j-brand-vivid);
    color: #fff;
    border: none;
    border-radius: 2rem;
    min-height: 44px;
    padding: 0 1rem;
    font-size: .85rem;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
    cursor: pointer;
}
.j-a11y-toggle:hover, .j-a11y-toggle:focus { background: var(--j-brand-dark); color: #fff; }
.j-a11y-panel {
    position: absolute;
    left: 0;
    bottom: calc(100% + .5rem);
    width: 11rem;
    background: #fff;
    border: 1px solid #eee;
    border-radius: .75rem;
    box-shadow: 0 6px 20px rgba(0,0,0,.15);
    padding: .75rem;
}
.j-a11y-panel[hidden] { display: none; }
.j-a11y-title { font-size: .8rem; color: var(--j-ink-2); margin: 0 0 .5rem; font-weight: 600; }
.j-a11y-opt {
    display: block;
    width: 100%;
    text-align: left;
    background: #faf7f8;
    border: 1px solid #f0e3e8;
    border-radius: .5rem;
    padding: .5rem .6rem;
    margin-bottom: .4rem;
    color: var(--j-ink);
    cursor: pointer;
}
.j-a11y-opt[aria-pressed="true"] {
    background: var(--j-brand-vivid);
    border-color: var(--j-brand-vivid);
    color: #fff;
    font-weight: 500;
}
.j-a11y-close {
    width: 100%;
    background: none;
    border: none;
    color: var(--j-ink-2);
    font-size: .8rem;
    cursor: pointer;
    padding: .25rem;
}
.j-footer a { color: #e0e0e0; text-decoration: none; }
.j-footer a:hover { color: #fff; text-decoration: underline; }

/* ---------- 固定底部导航 ---------- */
.j-bottombar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1030;
    background: #fff;
    border-top: 1px solid #eee;
}
.j-bottombar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--j-ink-2);
    text-decoration: none;
    padding: .45rem 0 .5rem;
    font-size: .75rem;
}
.j-bottombar a .iconfont { font-size: 1.35rem; line-height: 1.2; }
.j-bottombar a.active { color: var(--j-brand); }
.j-bottombar a:hover { color: var(--j-brand); }

/* ---------- 聊天 ---------- */
.j-chat-box {
    height: 62vh;
    overflow-y: auto;
    background: var(--j-bg);
}
.j-bubble {
    max-width: 72%;
    padding: .5rem .8rem;
    border-radius: 1rem;
    margin-bottom: .6rem;
    word-break: break-word;
}
.j-bubble-them { background: #fff; border: 1px solid #eee; border-top-left-radius: .25rem; }
.j-bubble-me   { background: var(--j-brand-vivid); color: #fff; border-top-right-radius: .25rem; }
.j-chat-time { font-size: .72rem; color: var(--j-ink-2); text-align: center; margin: .5rem 0; }

/* ---------- 无障碍：高对比模式（可由“关怀版”开关启用） ---------- */
html.j-high-contrast {
    --j-ink: #000;
    --j-ink-2: #222;
    --j-bg: #fff;
    --j-brand: #880e4f;
}
html.j-high-contrast .j-card,
html.j-high-contrast .j-topbar,
html.j-high-contrast .j-bottombar { border-color: #000; }

/* ---------- 大字模式 ---------- */
html.j-large-text { font-size: 1.125rem; }
html.j-large-text .j-user-card .j-meta,
html.j-large-text .j-footer { font-size: 1rem; }

/* ---------- 减少动效（尊重系统偏好） ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Toast 位置（移动端顶部更醒目） ---------- */
.j-toast-wrap {
    position: fixed;
    top: .8rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    width: max-content;
    max-width: 92vw;
}