/* =====================================================================
   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: column;
    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); }

/* ---------- 无障碍入口（关怀版） ---------- */
.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;
}