/* ZBGJ 前台用户中心样式
   设计原则：现代简约、响应式、明暗双主题（借鉴 UAA 漫画站配色） */

/* ---------- 白天主题（默认，UAA 亮色：米白底 + 红粉主色） ---------- */
:root {
    color-scheme: light;
    --zbgj-primary: #e0344a;
    --zbgj-primary-light: #f4586f;
    --zbgj-primary-dark: #c22840;
    --zbgj-secondary: #f2688a;
    --zbgj-success: #10b981;
    --zbgj-warning: #f59e0b;
    --zbgj-danger: #ef4444;
    --zbgj-text: #2b2b33;
    --zbgj-text-light: #8a8a93;
    --zbgj-text-lighter: #b3b3bb;
    --zbgj-bg: #f7f2ef;
    --zbgj-bg-white: #ffffff;
    --zbgj-border: #eee3de;
    --zbgj-radius: 8px;
    --zbgj-shadow: 0 1px 3px rgba(120,60,60,.05), 0 1px 2px rgba(120,60,60,.06);
    --zbgj-shadow-lg: 0 4px 14px rgba(120,60,60,.1);
    /* 辅助（主题相关） */
    --zbgj-input-bg: #ffffff;
    --zbgj-hover-bg: #faf6f3;
    --zbgj-tip-bg: linear-gradient(135deg, #fdeef0, #fce4ea);
    --zbgj-tip-text: #b03050;
    --zbgj-ok-bg: #ecfdf5;
    --zbgj-ok-text: #047857;
    --zbgj-err-bg: #fef2f2;
    --zbgj-err-text: #b91c1c;
    --zbgj-auth-bg: linear-gradient(135deg, #faf4f0 0%, #f8e8e6 100%);
    --zbgj-topbar-bg: rgba(255,255,255,.72);
    --zbgj-checked-bg: linear-gradient(135deg, #fdeef0, #fce4ea);
    --zbgj-checked-shadow: rgba(224,52,74,.12);
    --zbgj-focus-shadow: rgba(224,52,74,.14);
    --zbgj-plan-bg: linear-gradient(180deg, #ffffff 0%, #fdf6f4 100%);
    --zbgj-unread-bg: rgba(224,52,74,.05);
    --zbgj-theme-icon: #8a8a93;
    --zbgj-primary-soft: #fdeef0;
    --zbgj-bg-soft: #f3eeea;
}

/* ---------- 黑夜主题（UAA 暗色：近黑 + 暗红光晕 + 粉红主色） ---------- */
html[data-theme="dark"] {
    color-scheme: dark;
    --zbgj-primary: #f4586f;
    --zbgj-primary-light: #ff7a8c;
    --zbgj-primary-dark: #d94058;
    --zbgj-secondary: #ff7f95;
    --zbgj-success: #00d563;
    --zbgj-warning: #f59e0b;
    --zbgj-danger: #f87171;
    --zbgj-text: #ececf0;
    --zbgj-text-light: #9b9ba3;
    --zbgj-text-lighter: #6b6b75;
    --zbgj-bg: #0c0d10;
    --zbgj-bg-white: #1a1b21;
    --zbgj-border: #2a2b33;
    --zbgj-shadow: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.45);
    --zbgj-shadow-lg: 0 4px 14px rgba(0,0,0,.55);
    --zbgj-input-bg: #23242c;
    --zbgj-hover-bg: #222329;
    --zbgj-tip-bg: linear-gradient(135deg, #2b141a, #271016);
    --zbgj-tip-text: #ff8ba0;
    --zbgj-ok-bg: #0c2a1c;
    --zbgj-ok-text: #4ade80;
    --zbgj-err-bg: #2c1414;
    --zbgj-err-text: #fca5a5;
    --zbgj-auth-bg:
        radial-gradient(700px 460px at 18% 28%, rgba(244,88,111,.10), transparent 70%),
        radial-gradient(520px 380px at 85% 12%, rgba(244,88,111,.06), transparent 70%),
        linear-gradient(135deg, #0c0d10 0%, #140d12 100%);
    --zbgj-topbar-bg: rgba(26,27,33,.78);
    --zbgj-checked-bg: linear-gradient(135deg, #2b141a, #241017);
    --zbgj-checked-shadow: rgba(244,88,111,.16);
    --zbgj-focus-shadow: rgba(244,88,111,.18);
    --zbgj-plan-bg: linear-gradient(180deg, #1e1f26 0%, #221419 100%);
    --zbgj-unread-bg: rgba(244,88,111,.08);
    --zbgj-theme-icon: #9b9ba3;
    --zbgj-primary-soft: #2b141a;
    --zbgj-bg-soft: #17181e;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    color: var(--zbgj-text);
    background: var(--zbgj-bg);
    line-height: 1.5;
    font-size: 14px;
}

.zbgj-app { min-height: 100vh; }

a { color: var(--zbgj-primary); text-decoration: none; }
a:hover { color: var(--zbgj-primary-dark); }

/* ============ 布局 ============ */
.zbgj-layout {
    display: flex;
    max-width: 1280px;
    margin: 0 auto;
    min-height: 100vh;
    padding: 24px;
    gap: 24px;
}

.zbgj-side {
    width: 240px;
    flex-shrink: 0;
    background: var(--zbgj-bg-white);
    border-radius: var(--zbgj-radius);
    box-shadow: var(--zbgj-shadow);
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: calc(var(--zbgj-header-h, 62px) + 24px);
    height: fit-content;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

.zbgj-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ============ 用户卡片 ============ */
.zbgj-user-card {
    text-align: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--zbgj-border);
}
.zbgj-avatar {
    width: 72px;
    height: 72px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--zbgj-primary), var(--zbgj-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    font-weight: 600;
    overflow: hidden;
}
.zbgj-avatar img { width: 100%; height: 100%; object-fit: cover; }

.zbgj-user-name {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 4px;
}
.zbgj-vip-badge {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
}
.zbgj-user-meta { font-size: 12px; color: var(--zbgj-text-light); }

/* ============ 导航 ============ */
.zbgj-nav { display: flex; flex-direction: column; gap: 2px; }
.zbgj-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    color: var(--zbgj-text);
    font-size: 13px;
    transition: all .15s;
}
.zbgj-nav-item:hover { background: var(--zbgj-bg); color: var(--zbgj-primary); }
.zbgj-nav-item.is-active { background: var(--zbgj-primary); color: #fff; }
.zbgj-nav-icon { font-size: 16px; }
.zbgj-nav-label { flex: 1; }

.zbgj-side-footer {
    padding-top: 12px;
    border-top: 1px solid var(--zbgj-border);
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}
.zbgj-side-footer a { color: var(--zbgj-text-light); }
.zbgj-side-footer a:hover { color: var(--zbgj-primary); }
.zbgj-logout { color: var(--zbgj-danger) !important; }

/* ============ 页面头部 ============ */
.zbgj-page-header h1 { font-size: 22px; margin: 0 0 4px; font-weight: 600; }
.zbgj-subtitle { color: var(--zbgj-text-light); margin: 0; font-size: 13px; }

/* ============ 概览卡片 ============ */
.zbgj-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.zbgj-card {
    background: var(--zbgj-bg-white);
    padding: 20px;
    border-radius: var(--zbgj-radius);
    box-shadow: var(--zbgj-shadow);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.zbgj-card-label { color: var(--zbgj-text-light); font-size: 13px; }
.zbgj-card-num { font-size: 26px; font-weight: 600; color: var(--zbgj-primary); }
.zbgj-card-link { font-size: 12px; color: var(--zbgj-text-lighter); }
/* 整卡可点击（VIP 卡片）：去掉链接默认样式 + 悬停微动效 */
.zbgj-card-link-wrap { text-decoration: none; color: inherit; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.zbgj-card-link-wrap:hover { transform: translateY(-2px); }
.zbgj-card-link-wrap:hover .zbgj-card-link { color: var(--zbgj-primary); }

/* 手机端：概览卡片移入侧栏（头像之下、导航之上），两列紧凑显示 */
@media (max-width: 768px) {
    .zbgj-side .zbgj-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .zbgj-side .zbgj-card { padding: 12px; }
    .zbgj-side .zbgj-card-num { font-size: 20px; }
    /* VIP 卡片跨满整行并水平居中 */
    .zbgj-side .zbgj-card--vip { grid-column: 1 / -1; align-items: center; text-align: center; }
}

/* 手机端子页面：用「返回」按钮替代图标菜单 */
@media (max-width: 768px) {
    .zbgj-side--back { background: transparent; box-shadow: none; padding: 0 0 4px; }
    .zbgj-mobile-back { margin: 0; }
    .zbgj-back-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 9px 16px;
        border-radius: 8px;
        background: var(--zbgj-bg-white);
        box-shadow: var(--zbgj-shadow);
        color: var(--zbgj-text);
        font-size: 14px;
        font-weight: 500;
    }
    .zbgj-back-btn:hover { color: var(--zbgj-primary); }
}

/* ============ 区块 ============ */
.zbgj-section {
    background: var(--zbgj-bg-white);
    padding: 20px;
    border-radius: var(--zbgj-radius);
    box-shadow: var(--zbgj-shadow);
}
.zbgj-section h3 { margin: 0 0 14px; font-size: 15px; font-weight: 600; }

/* ============ 快捷入口 ============ */
.zbgj-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}
.zbgj-quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    border-radius: 6px;
    transition: all .15s;
    color: var(--zbgj-text);
}
.zbgj-quick-item:hover { background: var(--zbgj-bg); color: var(--zbgj-primary); transform: translateY(-1px); }
.zbgj-quick-icon { font-size: 24px; }
.zbgj-quick-label { font-size: 12px; }

/* ============ 提示 / Alert ============ */
.zbgj-tip {
    background: var(--zbgj-tip-bg);
    color: var(--zbgj-tip-text);
    padding: 14px 18px;
    border-radius: var(--zbgj-radius);
    font-size: 13px;
    line-height: 1.7;
    border-left: 4px solid var(--zbgj-primary);
}
.zbgj-alert {
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.6;
}
.zbgj-alert.is-ok { background: var(--zbgj-ok-bg); color: var(--zbgj-ok-text); border-left: 3px solid var(--zbgj-success); }
.zbgj-alert.is-err { background: var(--zbgj-err-bg); color: var(--zbgj-err-text); border-left: 3px solid var(--zbgj-danger); }

/* ============ 表单 ============ */
.zbgj-form { display: flex; flex-direction: column; gap: 14px; }
.zbgj-field { display: flex; flex-direction: column; gap: 6px; }
.zbgj-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.zbgj-field label { font-size: 13px; color: var(--zbgj-text); font-weight: 500; }
.zbgj-field input[type="text"],
.zbgj-field input[type="email"],
.zbgj-field input[type="password"],
.zbgj-field input[type="date"],
.zbgj-field input[type="number"],
.zbgj-field select,
.zbgj-field textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--zbgj-border);
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
    background: var(--zbgj-input-bg);
    color: var(--zbgj-text);
}
.zbgj-field input:focus,
.zbgj-field select:focus,
.zbgj-field textarea:focus {
    border-color: var(--zbgj-primary);
    box-shadow: 0 0 0 3px var(--zbgj-focus-shadow);
}
.zbgj-field input:disabled { background: var(--zbgj-bg); cursor: not-allowed; }
.zbgj-field textarea { resize: vertical; min-height: 70px; }
.zbgj-req { color: var(--zbgj-danger); }
.zbgj-opt { color: var(--zbgj-text-lighter); font-weight: 400; font-size: 12px; }
.zbgj-hint { color: var(--zbgj-text-lighter); font-size: 12px; }

.zbgj-form-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.zbgj-checkbox { color: var(--zbgj-text-light); cursor: pointer; }
.zbgj-form-actions { display: flex; gap: 8px; padding-top: 8px; }
.zbgj-form-msg { min-height: 18px; font-size: 13px; }
.zbgj-form-msg.is-err { color: var(--zbgj-danger); }
.zbgj-form-msg.is-ok { color: var(--zbgj-success); }

.zbgj-btn-exchange {
    display: block;
    width: 100%;
    margin-bottom: 8px;
    padding: 9px 12px;
    border: 1px solid var(--zbgj-primary);
    border-radius: 8px;
    background: transparent;
    color: var(--zbgj-primary);
    font-size: 13px;
    cursor: pointer;
    transition: opacity .15s;
}
.zbgj-btn-exchange:hover { opacity: .82; }

.zbgj-btn-primary {
    background: linear-gradient(135deg, var(--zbgj-primary), var(--zbgj-secondary));
    color: #fff;
    border: none;
    padding: 11px 18px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity .15s, transform .05s;
    font-family: inherit;
}
.zbgj-btn-primary:hover { opacity: .9; }
.zbgj-btn-primary:active { transform: translateY(1px); }
.zbgj-btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.zbgj-btn-block { width: 100%; }

/* 验证码 */
.zbgj-captcha-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.zbgj-captcha-row input { flex: 1; }
.zbgj-captcha-img {
    height: 38px;
    width: auto;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid var(--zbgj-border);
}
.zbgj-cap-refresh {
    border: 1px solid var(--zbgj-border);
    background: var(--zbgj-input-bg);
    color: var(--zbgj-text-light);
    border-radius: 6px;
    padding: 9px 12px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
}
.zbgj-cap-refresh:hover { color: var(--zbgj-primary); border-color: var(--zbgj-primary); }

/* 蜜罐（隐藏字段，仅机器人会填） */
.zbgj-hp-wrap {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* 图标点选 / 选择题 选项 */
.zbgj-captcha-opts {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.zbgj-cap-opt {
    min-width: 42px;
    height: 40px;
    padding: 0 10px;
    font-size: 20px;
    line-height: 1;
    border: 1px solid var(--zbgj-border);
    background: var(--zbgj-input-bg);
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.zbgj-cap-opt:hover { border-color: var(--zbgj-primary); }
.zbgj-cap-opt.is-active {
    border-color: var(--zbgj-primary);
    background: var(--zbgj-primary);
    color: #fff;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, .2);
}

/* ============ 鉴权页布局 ============ */
.zbgj-auth-body { background: var(--zbgj-auth-bg); }
.zbgj-auth-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 32px;
    background: var(--zbgj-topbar-bg);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 10;
}
.zbgj-auth-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--zbgj-text);
}
.zbgj-auth-logo {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--zbgj-primary), var(--zbgj-secondary));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.zbgj-auth-back { color: var(--zbgj-text-light); font-size: 13px; }

.zbgj-auth-wrap {
    min-height: calc(100vh - 130px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
}
.zbgj-auth-card {
    background: var(--zbgj-bg-white);
    padding: 36px 32px;
    border-radius: var(--zbgj-radius);
    box-shadow: var(--zbgj-shadow-lg);
    width: 100%;
    max-width: 380px;
}
.zbgj-auth-card-wide { max-width: 520px; }
.zbgj-auth-h { font-size: 22px; margin: 0 0 6px; text-align: center; font-weight: 600; }
.zbgj-auth-sub {
    text-align: center;
    color: var(--zbgj-text-light);
    font-size: 13px;
    margin: 0 0 24px;
}
.zbgj-auth-card .zbgj-field { margin-bottom: 14px; }
.zbgj-auth-links {
    text-align: center;
    margin-top: 16px;
    font-size: 13px;
    color: var(--zbgj-text-light);
}
.zbgj-link-sep { color: var(--zbgj-border); margin: 0 6px; }

.zbgj-auth-footer {
    text-align: center;
    padding: 20px;
    color: var(--zbgj-text-lighter);
    font-size: 12px;
}

/* ============ 每日签到 ============ */
.zbgj-sign-calendar {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.zbgj-sign-calendar th {
    padding: 8px 0;
    font-size: 12px;
    color: var(--zbgj-text-light);
    font-weight: 500;
}
.zbgj-sign-calendar td {
    text-align: center;
    padding: 6px 0;
    position: relative;
    height: 44px;
}
.zbgj-sign-calendar td.is-empty {
    background: transparent;
}
.zbgj-sign-d {
    display: inline-block;
    min-width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 50%;
    font-size: 13px;
    color: var(--zbgj-text);
}
.zbgj-sign-calendar td.is-signed .zbgj-sign-d {
    background: var(--zbgj-primary);
    color: #fff;
}
.zbgj-sign-calendar td.is-today .zbgj-sign-d {
    box-shadow: 0 0 0 2px var(--zbgj-primary);
}
.zbgj-sign-mark {
    position: absolute;
    top: 2px;
    right: calc(50% - 20px);
    font-size: 10px;
    color: var(--zbgj-success);
}
.zbgj-nav-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    text-align: center;
}
.zbgj-msg-unread td {
    background: var(--zbgj-unread-bg);
}

/* ============ 第三方登录 ============ */
.zbgj-oauth-box {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--zbgj-border);
}
.zbgj-oauth-label {
    text-align: center;
    font-size: 12px;
    color: var(--zbgj-text-lighter);
    margin-bottom: 14px;
}
.zbgj-oauth-btns {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.zbgj-oauth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    padding: 9px 18px;
    border-radius: 6px;
    font-size: 14px;
    text-decoration: none;
    color: #fff;
    transition: opacity .15s;
}
.zbgj-oauth-btn:hover { opacity: .85; color: #fff; }
.zbgj-oauth-qq      { background: #12b7f5; }
.zbgj-oauth-github  { background: #3a3f47; }
.zbgj-oauth-weibo   { background: #e6162d; }

/* ============ 顶部导航（仅电脑端；手机端分类导航见底部常驻导航） ============ */
.zbgj-topnav {
    background: var(--zbgj-bg-white);
    border-bottom: 1px solid var(--zbgj-border);
    position: sticky;
    top: 0;
    z-index: 60;
}
.zbgj-topnav-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    gap: 2px;
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.zbgj-topnav-inner::-webkit-scrollbar { display: none; }
.zbgj-topnav-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 13px 14px;
    font-size: 14px;
    color: var(--zbgj-text-light);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    flex-shrink: 0;
    margin-bottom: -1px; /* 选中下划线贴合导航条底边 */
}
.zbgj-topnav-item:hover { color: var(--zbgj-primary); background: var(--zbgj-hover-bg); }
.zbgj-topnav-item.is-active { color: var(--zbgj-primary); border-bottom-color: var(--zbgj-primary); font-weight: 600; }
.zbgj-topnav-ico { font-size: 16px; line-height: 1; }
/* 手机端不显示顶部导航条（分类菜单由底部常驻导航承担） */
@media (max-width: 768px) {
    .zbgj-topnav { display: none; }
}

/* ============ 手机底部常驻导航 ============ */
.zbgj-tabbar {
    display: none; /* 仅手机端（body.zbgj-tabbar-on + 移动宽度）显示 */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: var(--zbgj-topbar-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--zbgj-border);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.zbgj-tabbar::-webkit-scrollbar { display: none; }
.zbgj-tabbar-item {
    flex: 1 0 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 4px;
    border-radius: 10px;
    font-size: 11px;
    color: var(--zbgj-text-light);
    text-decoration: none;
    position: relative;
    white-space: nowrap;
}
.zbgj-tabbar-item.is-active { color: var(--zbgj-primary); background: var(--zbgj-primary-soft); }
.zbgj-tabbar-icon { font-size: 20px; line-height: 1; }
.zbgj-tabbar-label { max-width: 72px; overflow: hidden; text-overflow: ellipsis; }
.zbgj-tabbar-badge {
    position: absolute;
    top: 0;
    right: 8px;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 10px;
    border-radius: 999px;
    background: var(--zbgj-danger);
    color: #fff;
    text-align: center;
    padding: 0 4px;
    box-sizing: border-box;
}
@media (max-width: 768px) {
    body.zbgj-tabbar-on .zbgj-tabbar { display: flex; }
    /* 底部常驻导航只承担分类入口，侧栏用户中心菜单网格保持显示 */
    /* 全站页面（用户中心 + 漫画/小说/图集频道）为常驻导航留出底部空间 */
    body.zbgj-tabbar-on .zbgj-app { padding-bottom: 78px; }
    body.zbgj-tabbar-on .zbgj-page { padding-bottom: 78px; }
}

/* 漫画沉浸阅读模式：隐藏顶部导航与底部常驻导航 */
body.zbgj-reading .zbgj-tabbar,
body.zbgj-reading .zbgj-topnav { display: none !important; }
body.zbgj-reading.zbgj-tabbar-on .zbgj-app { padding-bottom: 0; }

/* ============ 响应式 ============ */
@media (max-width: 768px) {
    .zbgj-layout { flex-direction: column; padding: 12px; gap: 12px; }
    .zbgj-side {
        width: 100%;
        position: static;
        max-height: none;
    }
    .zbgj-nav {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 4px;
    }
    .zbgj-nav-item { flex-direction: column; gap: 4px; padding: 10px 4px; text-align: center; }
    .zbgj-nav-label { font-size: 11px; }
    .zbgj-cards { grid-template-columns: repeat(2, 1fr); }
    .zbgj-card-num { font-size: 22px; }
    /* VIP 卡片跨满整行并水平居中 */
    .zbgj-card--vip { grid-column: 1 / -1; align-items: center; text-align: center; }
    .zbgj-page-header h1 { font-size: 18px; }
    .zbgj-field-row { grid-template-columns: 1fr; }
    .zbgj-auth-card { padding: 28px 22px; }
    .zbgj-auth-card-wide { padding: 24px 18px; }
    .zbgj-table th, .zbgj-table td { padding: 8px 6px; font-size: 12px; }
    /* 兜底：整页（含 sticky 顶栏）不横向滚动，宽内容只能在各自容器内滑动 */
    html, body { max-width: 100%; overflow-x: hidden; }
    .zbgj-app { width: 100%; max-width: 100%; }
    /* 显式约束整条宽度链，避免 flex:1 的 main 被 600px 表格反向撑宽 */
    .zbgj-layout { width: 100%; }
    .zbgj-main { width: 100%; max-width: 100%; }
    .zbgj-main > * { min-width: 0; width: 100%; max-width: 100%; }
    .zbgj-table-wrap { width: 100%; max-width: 100%; }
    .zbgj-recharge-grid { grid-template-columns: repeat(3, 1fr); }
    .zbgj-plan-grid { grid-template-columns: 1fr; }
}

/* ============ 数据表格 ============ */
.zbgj-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.zbgj-table th {
    background: var(--zbgj-bg);
    text-align: left;
    padding: 10px 14px;
    font-weight: 600;
    color: var(--zbgj-text-light);
    border-bottom: 1px solid var(--zbgj-border);
    font-size: 12px;
}
.zbgj-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--zbgj-border);
    color: var(--zbgj-text);
}
.zbgj-table tbody tr:hover { background: var(--zbgj-hover-bg); }
.zbgj-table tbody tr:last-child td { border-bottom: none; }
/* 表格横向滚动容器：宽表格仅在容器内左右滑动，不撑开整页（顶栏保持不动） */
.zbgj-table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.zbgj-table-wrap .zbgj-table { min-width: 600px; }
.zbgj-empty { text-align: center; color: var(--zbgj-text-lighter); padding: 40px 16px !important; }

.zbgj-link-btn {
    background: none;
    border: none;
    color: var(--zbgj-primary);
    cursor: pointer;
    padding: 0;
    margin-right: 8px;
    font-size: 13px;
    font-family: inherit;
}
.zbgj-link-btn:hover { color: var(--zbgj-primary-dark); text-decoration: underline; }

.zbgj-pager {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 16px;
}
.zbgj-pager a {
    display: inline-block;
    padding: 5px 11px;
    border: 1px solid var(--zbgj-border);
    border-radius: 4px;
    color: var(--zbgj-text);
    text-decoration: none;
    font-size: 13px;
}
.zbgj-pager a:hover { border-color: var(--zbgj-primary); color: var(--zbgj-primary); }
.zbgj-pager a.is-now {
    background: var(--zbgj-primary);
    color: #fff;
    border-color: var(--zbgj-primary);
}

/* ============ 充值 / 套餐 ============ */
.zbgj-recharge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}
.zbgj-recharge-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 8px;
    border: 2px solid var(--zbgj-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s;
    background: var(--zbgj-bg-white);
}
.zbgj-recharge-cell input[type="radio"] { display: none; }
.zbgj-recharge-cell:hover { border-color: var(--zbgj-primary-light); }
.zbgj-recharge-cell:has(input:checked),
.zbgj-recharge-cell.is-checked {
    border-color: var(--zbgj-primary);
    background: var(--zbgj-checked-bg);
    box-shadow: 0 0 0 3px var(--zbgj-checked-shadow);
}
.zbgj-recharge-num { font-size: 22px; font-weight: 600; color: var(--zbgj-primary); }
.zbgj-recharge-unit { font-size: 12px; color: var(--zbgj-text-light); }

.zbgj-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}
.zbgj-plan-cell {
    background: var(--zbgj-plan-bg);
    border: 2px solid var(--zbgj-border);
    border-radius: 10px;
    padding: 22px 18px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all .2s;
}
.zbgj-plan-cell:hover {
    border-color: var(--zbgj-primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px var(--zbgj-checked-shadow);
}
.zbgj-plan-name { font-size: 15px; font-weight: 600; color: var(--zbgj-text); }
.zbgj-plan-price { font-size: 28px; font-weight: 700; color: var(--zbgj-primary); }
.zbgj-plan-meta { color: var(--zbgj-text-light); font-size: 13px; margin-bottom: 8px; }

/* ============ 推广邀请 ============ */
.zbgj-invite-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.zbgj-invite-row input {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid var(--zbgj-border);
    border-radius: 6px;
    font-size: 13px;
    background: var(--zbgj-bg);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ============ 明暗主题切换按钮 ============ */
.zbgj-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--zbgj-border);
    background: var(--zbgj-input-bg);
    color: var(--zbgj-theme-icon);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    transition: all .15s;
    text-decoration: none;
    vertical-align: middle;
}
.zbgj-theme-toggle:hover {
    color: var(--zbgj-primary);
    border-color: var(--zbgj-primary);
    transform: rotate(15deg);
}
.zbgj-theme-toggle .zbgj-theme-moon { display: none; }
html[data-theme="dark"] .zbgj-theme-toggle .zbgj-theme-moon { display: inline; }
html[data-theme="dark"] .zbgj-theme-toggle .zbgj-theme-sun { display: none; }
/* 平滑过渡 */
html.zbgj-theme-anim body,
html.zbgj-theme-anim .zbgj-side,
html.zbgj-theme-anim .zbgj-card,
html.zbgj-theme-anim .zbgj-section,
html.zbgj-theme-anim .zbgj-auth-card,
html.zbgj-theme-anim .zbgj-auth-topbar {
    transition: background-color .25s, color .25s, border-color .25s;
}

/* ============ 漫画模块（阶段 8） ============ */
/* 顶栏 */
.zbgj-comic-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--zbgj-topbar-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--zbgj-border);
}
.zbgj-comic-topbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.zbgj-comic-logo {
    font-weight: 700;
    font-size: 15px;
    color: var(--zbgj-text);
    text-decoration: none;
    white-space: nowrap;
}
.zbgj-comic-search {
    flex: 1;
    display: flex;
    min-width: 200px;
    max-width: 420px;
}
.zbgj-comic-search input {
    flex: 1;
    padding: 7px 12px;
    border: 1px solid var(--zbgj-border);
    border-right: none;
    border-radius: 8px 0 0 8px;
    background: var(--zbgj-input-bg);
    color: var(--zbgj-text);
    font-size: 13px;
    outline: none;
}
.zbgj-comic-search input:focus { border-color: var(--zbgj-primary-light); }
.zbgj-comic-search button {
    padding: 0 16px;
    border: none;
    border-radius: 0 8px 8px 0;
    background: linear-gradient(135deg, var(--zbgj-primary), var(--zbgj-secondary));
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}
.zbgj-comic-links { display: flex; gap: 14px; margin-left: auto; }
.zbgj-comic-links a {
    font-size: 13px;
    color: var(--zbgj-text-light);
    text-decoration: none;
}
.zbgj-comic-links a:hover { color: var(--zbgj-primary); }

/* 分类栏 */
.zbgj-comic-wrap { max-width: 1200px; margin: 0 auto; padding: 16px; }
.zbgj-cat-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.zbgj-cat-item {
    padding: 5px 14px;
    border-radius: 999px;
    border: 1px solid var(--zbgj-border);
    background: var(--zbgj-bg-white);
    color: var(--zbgj-text-light);
    font-size: 13px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all .15s;
}
.zbgj-cat-item span { font-size: 11px; color: var(--zbgj-text-lighter); }
.zbgj-cat-item:hover { color: var(--zbgj-primary); border-color: var(--zbgj-primary-light); }
.zbgj-cat-item.cur {
    background: linear-gradient(135deg, var(--zbgj-primary), var(--zbgj-secondary));
    border-color: transparent;
    color: #fff;
}
.zbgj-cat-item.cur span { color: rgba(255,255,255,.85); }
.zbgj-cat-order { margin-left: auto; display: flex; gap: 8px; }
.zbgj-cat-tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 排序下拉（右上角） */
.zbgj-cat-sort { position: relative; margin-left: auto; z-index: 10; overflow: visible; }
.zbgj-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid var(--zbgj-border);
    border-radius: 8px;
    background: var(--zbgj-bg-white);
    color: var(--zbgj-text-light);
    font-size: 13px;
    line-height: 20px;
    cursor: pointer;
    transition: all .15s;
}
.zbgj-sort-btn:hover { color: var(--zbgj-primary); border-color: var(--zbgj-primary-light); }
.zbgj-sort-ico { font-size: 13px; }
.zbgj-sort-caret { font-size: 10px; color: var(--zbgj-text-lighter); transition: transform .15s; }
.zbgj-cat-sort.is-open .zbgj-sort-btn { color: var(--zbgj-primary); border-color: var(--zbgj-primary-light); }
.zbgj-cat-sort.is-open .zbgj-sort-caret { transform: rotate(180deg); }
.zbgj-sort-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 150;
    min-width: 116px;
    padding: 6px;
    background: var(--zbgj-bg-white);
    border: 1px solid var(--zbgj-border);
    border-radius: 10px;
    box-shadow: var(--zbgj-shadow-lg);
}
.zbgj-cat-sort.is-open .zbgj-sort-menu { display: block; }
.zbgj-sort-item {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--zbgj-text-light);
    text-decoration: none;
    white-space: nowrap;
}
.zbgj-sort-item:hover { background: var(--zbgj-hover-bg); color: var(--zbgj-primary); }
.zbgj-sort-item.cur { background: var(--zbgj-primary-soft); color: var(--zbgj-primary); font-weight: 600; }

/* 筛选面板 */
.zbgj-filter-panel {
    background: var(--zbgj-bg-white);
    border: 1px solid var(--zbgj-border);
    border-radius: 12px;
    padding: 4px 16px;
    margin-bottom: 16px;
}
.zbgj-filter-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
    padding: 10px 0;
    border-bottom: 1px dashed var(--zbgj-border);
}
.zbgj-filter-row:last-child { border-bottom: none; }
.zbgj-filter-group { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.zbgj-filter-label {
    flex: 0 0 auto;
    padding-top: 5px;
    font-size: 13px;
    color: var(--zbgj-text-lighter);
    white-space: nowrap;
}
.zbgj-filter-opts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zbgj-filter-opt {
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: var(--zbgj-hover-bg);
    color: var(--zbgj-text-light);
    font-size: 13px;
    line-height: 18px;
    text-decoration: none;
    white-space: nowrap;
    transition: all .15s;
}
.zbgj-filter-opt:hover { color: var(--zbgj-primary); border-color: var(--zbgj-primary-light); }
.zbgj-filter-opt.cur {
    background: var(--zbgj-bg-white);
    color: var(--zbgj-primary);
    border-color: var(--zbgj-primary);
    font-weight: 600;
}
.zbgj-filter-letters .zbgj-filter-opt { min-width: 34px; text-align: center; padding-left: 6px; padding-right: 6px; }
.zbgj-filter-empty { font-size: 13px; color: var(--zbgj-text-lighter); }

/* 标题在上、选项在下的筛选组（字母 / 标签） */
.zbgj-filter-group--block { flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
.zbgj-filter-group--block .zbgj-filter-label { padding-top: 0; }
.zbgj-filter-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.zbgj-filter-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: none;
    background: none;
    color: var(--zbgj-primary);
    font-size: 12px;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
}
.zbgj-filter-more:hover { opacity: .8; }
.zbgj-filter-more[hidden] { display: none; }
.zbgj-filter-more i { font-style: normal; font-size: 10px; transition: transform .15s; }
.zbgj-filter-more.is-open i { transform: rotate(180deg); }
.zbgj-filter-opt.is-hidden { display: none; }

/* 已选筛选提示 */
.zbgj-filter-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: -4px 0 14px;
    font-size: 13px;
    color: var(--zbgj-text-light);
}
.zbgj-filter-chip {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--zbgj-primary-soft);
    color: var(--zbgj-primary);
    font-size: 12px;
}
.zbgj-filter-clear { color: var(--zbgj-primary); text-decoration: none; }
.zbgj-filter-clear:hover { text-decoration: underline; }

/* 卡片网格 */
.zbgj-comic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
}
.zbgj-comic-card {
    background: var(--zbgj-bg-white);
    border: 1px solid var(--zbgj-border);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    transition: all .2s;
    display: flex;
    flex-direction: column;
}
.zbgj-comic-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--zbgj-shadow-lg);
    border-color: var(--zbgj-primary-light);
}
.zbgj-comic-cover {
    position: relative;
    aspect-ratio: 3/4;
    background: var(--zbgj-hover-bg);
    overflow: hidden;
}
.zbgj-comic-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.zbgj-cover-none {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    background: var(--zbgj-plan-bg);
}
.zbgj-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    backdrop-filter: blur(4px);
}
.zbgj-badge-free { background: rgba(16,185,129,.9); }
.zbgj-badge-vip  { background: linear-gradient(135deg, #f59e0b, #d97706); }
.zbgj-badge-pay  { background: rgba(224,52,74,.9); }
.zbgj-comic-info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.zbgj-comic-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--zbgj-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zbgj-comic-meta { display: flex; gap: 10px; font-size: 12px; color: var(--zbgj-text-lighter); }
.zbgj-comic-author {
    font-size: 12px;
    color: var(--zbgj-text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zbgj-comic-empty {
    padding: 70px 0;
    text-align: center;
    color: var(--zbgj-text-light);
}
.zbgj-comic-empty-icon { font-size: 48px; margin-bottom: 12px; }
.zbgj-comic-empty p { margin: 6px 0; font-size: 14px; }

/* 分页 */
.zbgj-pager { display: flex; justify-content: center; gap: 6px; margin-top: 24px; flex-wrap: wrap; }
.zbgj-pager a {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid var(--zbgj-border);
    background: var(--zbgj-bg-white);
    color: var(--zbgj-text-light);
    font-size: 13px;
    text-decoration: none;
    transition: all .15s;
}
.zbgj-pager a:hover { border-color: var(--zbgj-primary-light); color: var(--zbgj-primary); }
.zbgj-pager a.cur {
    background: linear-gradient(135deg, var(--zbgj-primary), var(--zbgj-secondary));
    border-color: transparent;
    color: #fff;
}
.zbgj-pager-jump {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    font-size: 13px;
    color: var(--zbgj-text-light);
}
.zbgj-pager-jump input[type="number"] {
    width: 56px;
    padding: 5px 6px;
    border-radius: 8px;
    border: 1px solid var(--zbgj-border);
    background: var(--zbgj-bg-white);
    color: var(--zbgj-text);
    font-size: 13px;
    text-align: center;
}
.zbgj-pager-jump button {
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid var(--zbgj-border);
    background: var(--zbgj-bg-white);
    color: var(--zbgj-text-light);
    font-size: 13px;
    cursor: pointer;
    transition: all .15s;
}
.zbgj-pager-jump button:hover {
    border-color: var(--zbgj-primary-light);
    color: var(--zbgj-primary);
}

/* 详情页 */
.zbgj-comic-head {
    position: relative;
    display: flex;
    gap: 24px;
    align-items: flex-start;
    background: var(--zbgj-bg-white);
    border: 1px solid var(--zbgj-border);
    border-radius: 14px;
    padding: 22px;
    margin-bottom: 16px;
}
.zbgj-comic-head-cover {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    align-self: flex-start;
    width: 200px;
    min-width: 200px;
    aspect-ratio: 3/4;
    border-radius: 12px;
    overflow: hidden;
    background: var(--zbgj-hover-bg);
    box-shadow: 0 6px 18px rgba(0,0,0,.14);
}
.zbgj-comic-head-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zbgj-comic-head-info {
    position: relative;
    z-index: 2;
    flex: 1;
    min-width: 0;
}
/* 下架提示（仅管理员可见） */
.zbgj-offline-tag { color: var(--zbgj-warning); font-weight: 400; }
/* 作者公告 */
.zbgj-comic-notice { margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--zbgj-warning, #f59e0b); border-radius: 4px; font-size: 13px; color: var(--zbgj-text-light); }
/* 详细介绍区块 */
.zbgj-comic-content { background: var(--zbgj-bg, #fff); border: 1px solid var(--zbgj-border, #e5e7eb); border-radius: 8px; padding: 16px; margin-bottom: 16px; font-size: 14px; line-height: 1.8; color: var(--zbgj-text); }
.zbgj-comic-content-title { font-weight: 600; margin-bottom: 8px; }
/* 不可用按钮（如暂无章节态） */
.zbgj-disabled { opacity: .5; cursor: not-allowed; }
.zbgj-comic-head-info h1 {
    margin: 0 0 10px;
    font-size: 22px;
    color: var(--zbgj-text);
}
.zbgj-comic-head-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--zbgj-text-light); margin-bottom: 10px; }
.zbgj-meta-star{ color: #f59e0b; font-weight: 700; }
.zbgj-comic-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.zbgj-comic-tags a {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--zbgj-tip-bg);
    color: var(--zbgj-tip-text);
    font-size: 12px;
    text-decoration: none;
}
.zbgj-comic-summary {
    color: var(--zbgj-text-light);
    font-size: 13px;
    line-height: 1.8;
    margin-bottom: 16px;
    max-height: 110px;
    overflow: auto;
}
.zbgj-comic-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.zbgj-btn {
    display: inline-block;
    padding: 9px 24px;
    border-radius: 8px;
    border: 1px solid var(--zbgj-border);
    background: var(--zbgj-bg-white);
    color: var(--zbgj-text);
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all .15s;
}
.zbgj-btn-primary {
    background: linear-gradient(135deg, var(--zbgj-primary), var(--zbgj-secondary));
    border: none;
    color: #fff;
}
.zbgj-btn-primary:hover { filter: brightness(1.08); }
.zbgj-btn-ghost:hover { border-color: var(--zbgj-primary-light); color: var(--zbgj-primary); }
.zbgj-btn.marked { color: var(--zbgj-primary); border-color: var(--zbgj-primary-light); }

/* 章节列表 */
.zbgj-chapter-list {
    background: var(--zbgj-bg-white);
    border: 1px solid var(--zbgj-border);
    border-radius: 14px;
    overflow: hidden;
}
.zbgj-chapter-list-title {
    padding: 14px 20px;
    font-weight: 600;
    font-size: 15px;
    color: var(--zbgj-text);
    border-bottom: 1px solid var(--zbgj-border);
}
.zbgj-chapter-list ul { list-style: none; margin: 0; padding: 0; }
.zbgj-chapter-list li { border-bottom: 1px solid var(--zbgj-border); }
.zbgj-chapter-list li:last-child { border-bottom: none; }
.zbgj-chapter-list li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    color: var(--zbgj-text);
    font-size: 14px;
    text-decoration: none;
    transition: background .15s;
}
.zbgj-chapter-list li a:hover { background: var(--zbgj-hover-bg); color: var(--zbgj-primary); }
.zbgj-chapter-list li.reading a { background: var(--zbgj-checked-bg); }
.zbgj-chapter-lock { font-size: 12px; color: var(--zbgj-warning); }
/* 章节解锁图标：金钻 + V（SVG，缩放清晰；改尺寸调 .zbgj-gem 的宽高） */
.zbgj-gem{ width:14px; height:14px; vertical-align:-2px; margin-right:4px; }
.zbgj-gem-body{ fill: url(#zbgjGemGold); }
.zbgj-gem-cut{ fill: none; stroke: #fff; stroke-opacity: .45; stroke-width: .7; stroke-linejoin: round; }
.zbgj-gem-v{ fill: #5a3810; }
/* 不同位置的尺寸适配 */
.zbgj-paywall-icon .zbgj-gem{ width:52px; height:52px; margin:0; }
.zbgj-paywall-tip .zbgj-gem{ width:16px; height:16px; vertical-align:-3px; }
.zbgj-paybox-head .zbgj-gem{ width:15px; height:15px; vertical-align:-2px; }
.zbgj-rd-catalog-item .lock .zbgj-gem{ width:12px; height:12px; vertical-align:-1px; margin-right:2px; }
.zbgj-chapter-empty { padding: 40px; text-align: center; color: var(--zbgj-text-lighter); font-size: 13px; }

/* 章节目录工具栏：排序 + 展开/收起 */
.zbgj-chapter-bar { display: flex; gap: 10px; padding: 10px 20px; border-bottom: 1px solid var(--zbgj-border); }
.zbgj-chapter-btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 14px; border: 1px solid var(--zbgj-border); border-radius: 20px; background: var(--zbgj-bg-white); color: var(--zbgj-text); font-size: 13px; cursor: pointer; transition: .15s; }
.zbgj-chapter-btn:hover { border-color: var(--zbgj-primary-light); color: var(--zbgj-primary); }
.zbgj-chapter-btn[hidden] { display: none; }
.zbgj-chapter-arrow { font-weight: 700; }
/* 两列网格（电脑端每行两个章节），移动端单列 */
.zbgj-chapter-list ul.zbgj-chapter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--zbgj-border); }
.zbgj-chapter-list ul.zbgj-chapter-grid > li { border: none; background: var(--zbgj-bg-white); }
.zbgj-chapter-list ul.zbgj-chapter-grid > li a { padding: 12px 16px; }
.zbgj-chapter-list ul.zbgj-chapter-grid .zbgj-chapter-empty { grid-column: 1 / -1; }
@media (max-width: 768px) {
    .zbgj-chapter-list ul.zbgj-chapter-grid { grid-template-columns: 1fr; }
}

/* 阅读页 */
.zbgj-reader-bar {
    position: sticky;
    top: 53px;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--zbgj-topbar-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--zbgj-border);
    flex-wrap: wrap;
}
.zbgj-reader-back {
    font-size: 14px;
    font-weight: 600;
    color: var(--zbgj-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40%;
}
.zbgj-reader-back:hover { color: var(--zbgj-primary); }
.zbgj-reader-title { flex: 1; font-size: 13px; color: var(--zbgj-text-light); text-align: center; min-width: 100px; }
.zbgj-reader-nav { display: flex; gap: 8px; }
.zbgj-reader-nav .zbgj-btn { padding: 7px 16px; font-size: 13px; }
.zbgj-reader-images img {
    display: block;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    background: var(--zbgj-hover-bg);
    min-height: 60px;
}
.zbgj-reader-bottom { position: static; margin-top: 16px; }

/* ---------- 沉浸式阅读页（漫城CMS 风格） ---------- */
/* 阅读页隐藏站点顶栏，正文独占屏幕 */
body.zbgj-reading .zbgj-comic-topbar { display: none; }
body.zbgj-reading .zbgj-app { min-height: 100vh; }
body.zbgj-rd-lock { overflow: hidden; }

.zbgj-reader { position: relative; min-height: 100vh; }

/* 阅读进度（常驻细线） */
.zbgj-rd-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 90;
    background: linear-gradient(90deg, var(--zbgj-primary), var(--zbgj-secondary));
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .1s linear;
    pointer-events: none;
}

/* 顶 / 底悬浮栏 */
.zbgj-rd-bar {
    position: fixed;
    left: 0; right: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--zbgj-topbar-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: transform .28s ease, opacity .28s ease;
}
.zbgj-rd-top { top: 0; transform: translateY(0); border-bottom: 1px solid var(--zbgj-border); }
.zbgj-rd-bottom { bottom: 0; transform: translateY(0); border-top: 1px solid var(--zbgj-border); justify-content: center; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
body.zbgj-rd-off .zbgj-rd-top { transform: translateY(-102%); opacity: 0; }
body.zbgj-rd-off .zbgj-rd-bottom { transform: translateY(102%); opacity: 0; }

.zbgj-rd-icbtn {
    flex: 0 0 36px;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--zbgj-border);
    background: var(--zbgj-bg-white);
    color: var(--zbgj-text);
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
}
.zbgj-rd-icbtn:hover { color: var(--zbgj-primary); border-color: var(--zbgj-primary-light); }
.zbgj-rd-heading { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.zbgj-rd-heading-comic {
    font-size: 14px; font-weight: 600; color: var(--zbgj-text);
    text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zbgj-rd-heading-comic:hover { color: var(--zbgj-primary); }
.zbgj-rd-heading-chapter { font-size: 12px; color: var(--zbgj-text-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zbgj-rd-bar-tools { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }

.zbgj-rd-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 7px 14px;
    border-radius: 8px;
    border: 1px solid var(--zbgj-border);
    background: var(--zbgj-bg-white);
    color: var(--zbgj-text);
    font-size: 13px;
    font-family: inherit;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s;
}
.zbgj-rd-btn:hover { border-color: var(--zbgj-primary-light); color: var(--zbgj-primary); }
.zbgj-rd-btn-primary {
    background: linear-gradient(135deg, var(--zbgj-primary), var(--zbgj-secondary));
    border: none;
    color: #fff;
}
.zbgj-rd-btn-primary:hover { color: #fff; filter: brightness(1.08); }
.zbgj-rd-btn.is-disabled { opacity: .45; cursor: default; }
.zbgj-rd-btn.is-disabled:hover { border-color: var(--zbgj-border); color: var(--zbgj-text); }
.zbgj-rd-count { font-size: 12px; color: var(--zbgj-text-lighter); }
.zbgj-rd-kbd { font-size: 12px; color: var(--zbgj-text-lighter); margin-left: 6px; }

/* 正文区 */
.zbgj-rd-body { padding-bottom: 8px; }
.zbgj-rd-end { max-width: 900px; margin: 30px auto 60px; padding: 0 16px; text-align: center; }
.zbgj-rd-next-big {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 44px;
    border-radius: 999px;
    font-size: 15px; font-weight: 600;
    background: linear-gradient(135deg, var(--zbgj-primary), var(--zbgj-secondary));
    color: #fff;
    text-decoration: none;
    box-shadow: var(--zbgj-shadow-lg);
}
.zbgj-rd-next-big:hover { color: #fff; filter: brightness(1.08); }
.zbgj-rd-end-tip { margin: 0 0 12px; color: var(--zbgj-text-light); font-size: 14px; }

/* 侧边工具条 */
.zbgj-rd-aside {
    position: fixed;
    right: 12px; top: 50%;
    z-index: 85;
    display: flex; flex-direction: column; gap: 4px;
    padding: 8px 6px;
    border-radius: 16px;
    background: var(--zbgj-topbar-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--zbgj-border);
    box-shadow: var(--zbgj-shadow-lg);
    transform: translate(0, -50%);
    opacity: 1;
    transition: transform .28s ease, opacity .28s ease;
}
body.zbgj-rd-off .zbgj-rd-aside { transform: translate(140%, -50%); opacity: 0; pointer-events: none; }
.zbgj-rd-aside > * {
    width: 50px;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 0;
    border: none; border-radius: 10px; background: transparent;
    color: var(--zbgj-text-light);
    font-size: 11px; font-family: inherit; line-height: 1;
    text-decoration: none; cursor: pointer;
    transition: background .15s, color .15s;
}
.zbgj-rd-aside > *:hover { background: var(--zbgj-hover-bg); color: var(--zbgj-primary); }
.zbgj-rd-aside i { font-style: normal; font-size: 18px; line-height: 1; }

/* 章节目录抽屉 */
.zbgj-rd-mask {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    z-index: 95;
    background: rgba(0, 0, 0, .45);
    opacity: 0; visibility: hidden;
    transition: opacity .25s, visibility .25s;
}
.zbgj-rd-mask.open { opacity: 1; visibility: visible; }
.zbgj-rd-catalog {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 330px; max-width: 88vw;
    z-index: 96;
    display: flex; flex-direction: column;
    background: var(--zbgj-bg-white);
    border-left: 1px solid var(--zbgj-border);
    box-shadow: -8px 0 26px rgba(0, 0, 0, .16);
    transform: translateX(100%);
    transition: transform .28s ease;
}
.zbgj-rd-catalog.open { transform: translateX(0); }
.zbgj-rd-catalog-head {
    flex-shrink: 0;
    display: flex; align-items: center; gap: 8px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--zbgj-border);
}
.zbgj-rd-catalog-head .t { font-size: 15px; font-weight: 600; color: var(--zbgj-text); }
.zbgj-rd-catalog-head .c { font-size: 12px; color: var(--zbgj-text-lighter); margin-right: auto; }
.zbgj-rd-catalog-close {
    width: 30px; height: 30px; border-radius: 8px;
    border: 1px solid var(--zbgj-border); background: transparent;
    color: var(--zbgj-text-light); font-size: 13px; font-family: inherit;
    line-height: 1; cursor: pointer;
}
.zbgj-rd-catalog-close:hover { color: var(--zbgj-primary); border-color: var(--zbgj-primary-light); }
.zbgj-rd-catalog-sort {
    flex: 0 0 30px;
    width: 30px; height: 30px; border-radius: 8px;
    border: 1px solid var(--zbgj-border); background: transparent;
    color: var(--zbgj-text-light);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.zbgj-rd-catalog-sort:hover { color: var(--zbgj-primary); border-color: var(--zbgj-primary-light); }
.zbgj-rd-catalog-sort.is-desc { color: var(--zbgj-primary); border-color: var(--zbgj-primary-light); }
.zbgj-rd-catalog-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 20px; }
.zbgj-rd-catalog-item {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--zbgj-border);
    color: var(--zbgj-text); font-size: 13px; text-decoration: none;
}
.zbgj-rd-catalog-item:hover { background: var(--zbgj-hover-bg); color: var(--zbgj-primary); }
.zbgj-rd-catalog-item.cur { background: var(--zbgj-checked-bg); color: var(--zbgj-primary); font-weight: 600; }
.zbgj-rd-catalog-item .idx { flex: 0 0 28px; font-size: 12px; color: var(--zbgj-text-lighter); }
.zbgj-rd-catalog-item.cur .idx { color: var(--zbgj-primary); }
.zbgj-rd-catalog-item .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zbgj-rd-catalog-item .lock { font-size: 12px; }
.zbgj-rd-catalog-empty { padding: 40px; text-align: center; color: var(--zbgj-text-lighter); font-size: 13px; }

/* 首次进入提示 */
.zbgj-rd-hint {
    position: fixed; left: 50%; bottom: 96px;
    z-index: 88;
    padding: 9px 18px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .72);
    color: #fff; font-size: 12.5px;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
}
.zbgj-rd-hint.show { opacity: 1; }

/* 付费墙 */
.zbgj-paywall {
    max-width: 460px;
    margin: 60px auto;
    padding: 40px 30px;
    text-align: center;
    background: var(--zbgj-bg-white);
    border: 1px solid var(--zbgj-border);
    border-radius: 14px;
}
.zbgj-paywall-icon { font-size: 48px; margin-bottom: 14px; }
.zbgj-paywall h3 { margin: 0 0 10px; color: var(--zbgj-text); }
.zbgj-paywall p { color: var(--zbgj-text-light); font-size: 14px; margin: 0 0 18px; }
.zbgj-paywall-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.zbgj-paywallet { margin-top: 16px !important; font-size: 13px !important; color: var(--zbgj-text-lighter) !important; }

@media (max-width: 640px) {
    .zbgj-comic-head {
        flex-direction: column;
        align-items: center;
        padding: 18px 16px 20px;
        gap: 16px;
    }
    .zbgj-comic-head-cover {
        align-self: center;
        width: 150px;
        min-width: 150px;
    }
    .zbgj-comic-head-info { width: 100%; }
    .zbgj-comic-head-info .zbgj-comic-title-row { flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
    .zbgj-comic-head-info h1 { text-align: center; font-size: 20px; margin-bottom: 0; }
    .zbgj-comic-head-meta { justify-content: center; gap: 8px 14px; margin-top: 10px;}
    .zbgj-comic-tags { justify-content: center; }
    .zbgj-comic-actions { justify-content: center; }
    .zbgj-comic-summary { max-height: none; overflow: visible; text-align: left; }
    .zbgj-comic-notice { text-align: left; }
    .zbgj-reader-title { display: none; }
    .zbgj-cat-order { margin-left: 0; }
    .zbgj-cat-sort { margin-left: 0; }
    .zbgj-sort-menu { right: auto; left: 0; }
    .zbgj-filter-row { gap: 10px; padding: 8px 0; }
    .zbgj-filter-group { flex-direction: column; gap: 6px; }
    .zbgj-filter-label { padding-top: 0; }
    .zbgj-comic-search { max-width: none; }
    .zbgj-comic-links { margin-left: 0; }
    /* 沉浸式阅读页 */
    .zbgj-rd-heading-chapter { display: none; }
    .zbgj-rd-bar { gap: 8px; padding: 8px 12px; }
    .zbgj-rd-bar-tools .zbgj-rd-btn { padding: 7px 10px; font-size: 12px; }
    .zbgj-rd-btn { padding: 8px 12px; font-size: 12.5px; }
    .zbgj-rd-kbd { display: none; }
    .zbgj-rd-aside { right: 8px; padding: 6px 4px; gap: 2px; }
    .zbgj-rd-aside > * { width: 44px; padding: 7px 0; }
    .zbgj-rd-catalog { width: 82%; max-width: 82vw; }
    /* 章节末尾区块收紧，底部不留过多空白（仅保留少量安全区间距） */
    .zbgj-rd-end { margin-top: 24px; margin-bottom: 0; }
    .zbgj-rd-body { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* 排行榜 */
.zbgj-rank-hint {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--zbgj-text-lighter);
}
.zbgj-rank-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: rgba(15, 23, 42, .5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.zbgj-rank-badge.rank-1 { background: linear-gradient(135deg, #f59e0b, #d97706); }
.zbgj-rank-badge.rank-2 { background: linear-gradient(135deg, #94a3b8, #64748b); }
.zbgj-rank-badge.rank-3 { background: linear-gradient(135deg, #ca8a04, #92400e); }

/* 阅读页键盘提示 */
.zbgj-reader-tip {
    font-size: 12px;
    font-weight: 400;
    color: var(--zbgj-text-lighter);
}/* ==================== 阶段10 新增（图片/小说/广告/积木） ==================== */
.zbgj-topbar{padding:12px 24px;background:var(--zbgj-topbar-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--zbgj-border);position:sticky;top:0;z-index:50}
.zbgj-topbar-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.zbgj-logo{font-size:17px;font-weight:600;color:var(--zbgj-primary);text-decoration:none}
.zbgj-comic-links{display:flex;gap:14px;flex-wrap:wrap;margin-left:auto}
.zbgj-comic-links a{color:var(--zbgj-text);text-decoration:none;font-size:13px;padding:4px 10px;border-radius:6px;transition:.2s}
.zbgj-comic-links a:hover{background:var(--zbgj-bg-soft)}
.zbgj-comic-links a.zbgj-nav-active{color:var(--zbgj-primary);background:var(--zbgj-primary-soft);font-weight:500}
.zbgj-main{max-width:1200px;margin:0 auto;padding:18px 24px 60px}
.zbgj-cats{display:flex;gap:8px;flex-wrap:wrap;padding:12px 24px;max-width:1200px;margin:0 auto}
.zbgj-cat-item{padding:5px 14px;border-radius:16px;font-size:13px;color:var(--zbgj-text-light);text-decoration:none;border:1px solid var(--zbgj-border)}
.zbgj-cat-item.cur{background:linear-gradient(135deg,var(--zbgj-primary),var(--zbgj-secondary));color:#fff;border-color:transparent}
.zbgj-list-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.zbgj-cat-order{display:flex;gap:6px;margin-left:auto}
.zbgj-cat-order a{padding:5px 14px;border-radius:14px;font-size:13px;color:var(--zbgj-text-light);text-decoration:none;border:1px solid var(--zbgj-border)}
.zbgj-cat-order a.cur{background:var(--zbgj-primary-soft);color:var(--zbgj-primary);border-color:var(--zbgj-primary-light)}
.zbgj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.zbgj-grid-item{display:flex;flex-direction:column;background:var(--zbgj-card);border:1px solid var(--zbgj-border);border-radius:10px;overflow:hidden;text-decoration:none;color:inherit;transition:.2s}
.zbgj-grid-item:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.08)}
.zbgj-grid-thumb{position:relative;aspect-ratio:3/4;background:var(--zbgj-bg-soft);overflow:hidden}
.zbgj-grid-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.zbgj-grid-nocover{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:42px;color:var(--zbgj-text-lighter)}
.zbgj-grid-info{padding:10px 12px}
.zbgj-grid-title{font-size:14px;font-weight:500;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zbgj-grid-meta{display:block;margin-top:4px;font-size:12px;color:var(--zbgj-text-lighter)}
.zbgj-badge{position:absolute;top:8px;left:8px;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:500;backdrop-filter:blur(4px);background:rgba(255,255,255,.85);color:var(--zbgj-text)}
.zbgj-badge-free{background:rgba(34,197,94,.92);color:#fff}
.zbgj-badge-vip{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}
.zbgj-badge-pay{background:rgba(239,68,68,.92);color:#fff}
/* 连载状态角标（分类卡片封面左上角）：连载中=红，已完结=蓝。必须置于上方 .zbgj-badge 基础样式之后，否则会被其白色背景覆盖 */
.zbgj-badge-serial{background:rgba(255,77,79,.94);color:#fff}
.zbgj-badge-done{background:rgba(24,144,255,.94);color:#fff}
.zbgj-pagebar{display:flex;justify-content:center;gap:6px;margin-top:24px;flex-wrap:wrap}
.zbgj-pagebar a{padding:6px 12px;border-radius:6px;font-size:13px;color:var(--zbgj-text-light);text-decoration:none;border:1px solid var(--zbgj-border);min-width:34px;text-align:center}
.zbgj-pagebar a.cur{background:linear-gradient(135deg,var(--zbgj-primary),var(--zbgj-secondary));color:#fff;border-color:transparent}
.zbgj-photo-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:18px}
.zbgj-photo-img{display:block;background:var(--zbgj-bg-soft);border-radius:8px;overflow:hidden}
.zbgj-photo-img img{width:100%;height:auto;display:block;cursor:zoom-in}
.zbgj-list{display:flex;flex-direction:column;gap:10px}
.zbgj-list-item{display:flex;gap:14px;padding:14px;background:var(--zbgj-card);border:1px solid var(--zbgj-border);border-radius:10px;text-decoration:none;color:inherit;transition:.2s}
.zbgj-list-item:hover{border-color:var(--zbgj-primary-light)}
.zbgj-list-cover{flex-shrink:0;width:80px;height:108px;background:var(--zbgj-bg-soft);border-radius:6px;overflow:hidden}
.zbgj-list-cover img{width:100%;height:100%;object-fit:cover}
.zbgj-list-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.zbgj-list-title{font-size:15px;font-weight:500;display:flex;align-items:center;gap:6px}
.zbgj-list-title .zbgj-badge{position:static;display:inline-block}
.zbgj-list-meta{font-size:12px;color:var(--zbgj-text-lighter)}
.zbgj-list-summary{font-size:13px;color:var(--zbgj-text-light);margin-top:4px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.zbgj-novel-head{display:flex;gap:20px;padding:20px;background:var(--zbgj-card);border:1px solid var(--zbgj-border);border-radius:12px}
.zbgj-novel-cover{flex-shrink:0;width:140px;height:180px;border-radius:8px;overflow:hidden;background:var(--zbgj-bg-soft)}
.zbgj-novel-cover img{width:100%;height:100%;object-fit:cover}
.zbgj-novel-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.zbgj-novel-info h1{margin:0;font-size:22px;display:flex;align-items:center;gap:8px}
.zbgj-novel-info h1 .zbgj-badge{position:static;display:inline-block}
.zbgj-novel-meta{color:var(--zbgj-text-lighter);font-size:13px}
.zbgj-novel-summary{color:var(--zbgj-text-light);font-size:14px;line-height:1.7;margin-top:6px}
.zbgj-novel-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.zbgj-section-title{margin:24px 0 12px;font-size:16px;color:var(--zbgj-text);border-left:3px solid var(--zbgj-primary);padding-left:10px}
.zbgj-chapter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.zbgj-chapter-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--zbgj-card);border:1px solid var(--zbgj-border);border-radius:8px;text-decoration:none;color:inherit;font-size:13px;transition:.2s}
.zbgj-chapter-item:hover{border-color:var(--zbgj-primary-light);background:var(--zbgj-primary-soft)}
.zbgj-chapter-sort{flex-shrink:0;width:42px;color:var(--zbgj-text-lighter);font-weight:500}
.zbgj-chapter-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zbgj-chapter-meta{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--zbgj-text-lighter)}
.zbgj-chapter-meta .zbgj-badge{position:static;display:inline-block}
.zbgj-novel-reader{max-width:780px;margin:0 auto;background:var(--zbgj-card);border-radius:12px;border:1px solid var(--zbgj-border);overflow:hidden}
.zbgj-novel-reader-head{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--zbgj-border);background:var(--zbgj-bg-soft)}
.zbgj-novel-reader-head .zbgj-back{color:var(--zbgj-text-light);text-decoration:none;font-size:13px;padding:4px 10px;border-radius:6px}
.zbgj-novel-reader-head .zbgj-back:hover{background:var(--zbgj-bg-card)}
.zbgj-novel-reader-info{flex:1;font-size:13px;color:var(--zbgj-text-light);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zbgj-novel-content{padding:24px 32px;font-size:16px;line-height:1.85;color:var(--zbgj-text);max-height:65vh;overflow-y:auto}
.zbgj-novel-content p{margin:0 0 1em;text-indent:2em}
.zbgj-novel-content h2,.zbgj-novel-content h3{margin:1.2em 0 .6em}
.zbgj-reader-bar{display:flex;gap:8px;padding:14px 20px;border-top:1px solid var(--zbgj-border);background:var(--zbgj-bg-soft);flex-wrap:wrap;justify-content:center}
.zbgj-detail-head{padding:20px;background:var(--zbgj-card);border:1px solid var(--zbgj-border);border-radius:12px;margin-bottom:14px}
.zbgj-detail-info h1{margin:0 0 8px;font-size:22px}
.zbgj-detail-meta{font-size:13px;color:var(--zbgj-text-lighter);margin-bottom:8px}
.zbgj-detail-summary{color:var(--zbgj-text-light);font-size:14px;line-height:1.7;margin:10px 0}
.zbgj-detail-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.zbgj-paywall-tip{padding:16px;background:var(--zbgj-card);border:1px solid var(--zbgj-border);border-radius:10px;text-align:center;margin-bottom:14px;font-size:15px;color:var(--zbgj-text-light)}
.zbgj-btn-small{padding:3px 10px !important;font-size:12px !important}
.zbgj-btn-danger{background:#dc2626 !important;color:#fff !important}
.zbgj-btn-danger:hover{background:#b91c1c !important}
.zbgj-footer{padding:24px;text-align:center;color:var(--zbgj-text-lighter);font-size:12px;border-top:1px solid var(--zbgj-border);margin-top:30px}
@media(max-width:640px){.zbgj-topbar-inner{flex-direction:column;align-items:flex-start}.zbgj-comic-links{margin-left:0}.zbgj-novel-head{flex-direction:column}.zbgj-novel-cover{width:100%;max-width:160px;margin:0 auto}.zbgj-novel-content{padding:18px}.zbgj-chapter-grid{grid-template-columns:1fr}}

/* 广告位与积木容器 */
.zbgj-ad-wrap{margin:14px 0}
.zbgj-ad-image{display:block;margin:0 auto;max-width:100%;border-radius:8px;overflow:hidden}
.zbgj-ad-image img{width:100%;height:auto;display:block}
.zbgj-ad-text{padding:8px 14px;border:1px dashed var(--zbgj-border);border-radius:6px;display:inline-block;color:var(--zbgj-text-light);text-decoration:none}
.zbgj-ad-html{max-width:100%;overflow:auto}
.zbgj-block{margin:24px 0}

/* ============== 内容评分（书本图标） ============== */
/* 标题行：标题居左，评分控件居右（标题右侧空白区域） */
.zbgj-comic-title-row,
.zbgj-novel-title-row,
.zbgj-photo-title-row{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.zbgj-comic-title-row h1,
.zbgj-novel-title-row h1,
.zbgj-photo-title-row h1{ flex: 1; min-width: 0; }

.zbgj-rate{
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 14px;
    border: 1px solid var(--zbgj-border, #eaecef);
    border-radius: 12px;
    background: var(--zbgj-rate-bg, #fafbfc);
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    flex: 0 0 auto;
    width: 260px;            /* 固定宽度：底部文案长度变化时火焰不再左右偏移 */
    box-sizing: border-box;
}
html[data-theme="dark"] .zbgj-rate{ background: rgba(40,42,50,.6); }
.zbgj-rate-books{ display: flex; gap: 3px; }
.zbgj-rate-book{
    position: relative;
    display: inline-flex;
    padding: 2px;
    border: 0;
    background: none;
    cursor: pointer;
    line-height: 0;
    border-radius: 6px;
    transition: transform .12s ease;
}
.zbgj-rate-book:hover{ transform: translateY(-2px) scale(1.08); }
.zbgj-rate-ico{
    font-size: 22px;
    line-height: 1;
    filter: grayscale(1) opacity(.35);
    transition: filter .12s ease, transform .12s ease;
}
/* 已点亮的火焰：恢复彩色 */
.zbgj-rate-book.on .zbgj-rate-ico{ filter: none; }
.zbgj-rate-book:hover .zbgj-rate-ico{
    transform: scale(1.15);
    filter: brightness(1.1);
}
.zbgj-rate-foot{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-top: 2px;
    font-size: 12px;
    color: var(--zbgj-text-light, #6b7280);
}
.zbgj-rate-level{ font-weight: 600; color: #ff7a18; }
.zbgj-rate-agg{ color: #9ca3af; white-space: nowrap; }
.zbgj-rate-agg b{ color: #f0883e; font-size: 14px; }
.zbgj-rate[data-login="0"] .zbgj-rate-book{ cursor: pointer; }
.zbgj-rate-loading{ opacity: .6; pointer-events: none; }

@media (max-width: 640px){
    .zbgj-rate{ width: 100%; }
}
.zbgj-block-grid{display:grid;gap:12px}
.zbgj-block-item{display:flex;gap:10px;padding:10px;background:var(--zbgj-card);border:1px solid var(--zbgj-border);border-radius:8px;text-decoration:none;color:inherit;transition:.2s;overflow:hidden}
.zbgj-block-item:hover{border-color:var(--zbgj-primary-light)}
.zbgj-block-thumb{flex-shrink:0;width:90px;height:64px;border-radius:6px;overflow:hidden;background:var(--zbgj-bg-soft)}
.zbgj-block-thumb img{width:100%;height:100%;object-fit:cover}
.zbgj-block-nocover{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:28px;color:var(--zbgj-text-lighter)}
.zbgj-block-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.zbgj-block-title{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zbgj-block-sub{font-size:11px;color:var(--zbgj-text-lighter)}
.zbgj-block-chip{position:absolute;top:8px;right:8px;padding:1px 6px;border-radius:3px;font-size:10px;background:var(--zbgj-primary);color:#fff}
.zbgj-block-item{position:relative}

/* ==================== 书架（封面网格） ==================== */
.zbgj-shelf-labels{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px;margin-bottom:14px}
.zbgj-shelf-chip{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border:1px solid var(--zbgj-border);border-radius:16px;background:var(--zbgj-card);color:var(--zbgj-text-light);font-size:13px;text-decoration:none;cursor:pointer;transition:.15s}
.zbgj-shelf-chip:hover{border-color:var(--zbgj-primary-light)}
.zbgj-shelf-chip.is-on{background:var(--zbgj-primary);border-color:var(--zbgj-primary);color:#fff}
.zbgj-shelf-chip-n{font-size:11px;opacity:.7}
.zbgj-shelf-add{border-style:dashed;color:var(--zbgj-primary)}

.zbgj-shelf{padding:4px 16px 90px}
.zbgj-shelf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:14px}
.zbgj-shelf-card{position:relative}
.zbgj-shelf-cover{display:block;position:relative;width:100%;aspect-ratio:2/3;overflow:hidden;border-radius:8px;background:var(--zbgj-bg-soft)}
.zbgj-shelf-cover img{width:100%;height:100%;object-fit:cover;display:block}
.zbgj-shelf-nocover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:8px;text-align:center;font-size:12px;color:var(--zbgj-text-lighter)}
.zbgj-shelf-badge{position:absolute;top:6px;left:6px;padding:2px 7px;border-radius:4px;font-size:11px;font-weight:500;color:#fff;line-height:1.4}
.zbgj-shelf-badge.serial{background:rgba(245,158,11,.92)}
.zbgj-shelf-badge.done{background:rgba(16,185,129,.92)}
.zbgj-shelf-progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(0,0,0,.4)}
.zbgj-shelf-progress i{display:block;height:100%;background:linear-gradient(90deg,#f59e0b,#ef4444)}
.zbgj-shelf-progress-txt{position:absolute;right:6px;bottom:9px;font-size:10px;color:#fff;background:rgba(0,0,0,.5);padding:1px 5px;border-radius:8px;line-height:1.4}
.zbgj-shelf-check{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.4);color:#fff;display:none;align-items:center;justify-content:center;font-size:14px;line-height:1}
.zbgj-shelf-remove{position:absolute;top:6px;right:6px;width:22px;height:22px;border:none;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;font-size:14px;line-height:1;cursor:pointer;display:none}
.zbgj-shelf-card:hover .zbgj-shelf-remove{display:block}
.zbgj-shelf.is-selecting .zbgj-shelf-remove{display:none!important}
.zbgj-shelf.is-selecting .zbgj-shelf-check{display:flex}
.zbgj-shelf.is-selecting .zbgj-shelf-card:not(.sel) .zbgj-shelf-cover{opacity:.82}
.zbgj-shelf-card.sel .zbgj-shelf-cover{box-shadow:0 0 0 2px var(--zbgj-primary)}
.zbgj-shelf-card.sel .zbgj-shelf-check{background:var(--zbgj-primary);display:flex}
.zbgj-shelf-meta{padding:6px 2px 0}
.zbgj-shelf-title{display:block;font-size:13px;color:var(--zbgj-text);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zbgj-shelf-sub{font-size:11px;color:var(--zbgj-text-lighter);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zbgj-shelf-tag{color:var(--zbgj-primary-light)}

.zbgj-shelf-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--zbgj-card);border-top:1px solid var(--zbgj-border);box-shadow:0 -2px 12px rgba(0,0,0,.08)}
.zbgj-shelf-bar-btn{padding:8px 14px;border:1px solid var(--zbgj-border);border-radius:8px;background:var(--zbgj-bg);color:var(--zbgj-text);font-size:14px;cursor:pointer}
.zbgj-shelf-bar-primary{background:var(--zbgj-primary);color:#fff;border-color:var(--zbgj-primary)}
.zbgj-shelf-bar-danger{color:#ef4444;border-color:#fca5a5}
.zbgj-shelf-bar-spacer{flex:1}
.zbgj-shelf-bar-info{font-size:13px;color:var(--zbgj-text-light)}
.zbgj-shelf-move-wrap{position:relative}
.zbgj-shelf-move-pop{position:absolute;bottom:calc(100% + 8px);right:0;min-width:160px;background:var(--zbgj-card);border:1px solid var(--zbgj-border);border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.12);padding:6px;display:flex;flex-direction:column;gap:2px}
.zbgj-shelf-move-pop button{text-align:left;border:none;background:none;padding:8px 10px;border-radius:6px;font-size:13px;color:var(--zbgj-text);cursor:pointer}
.zbgj-shelf-move-pop button:hover{background:var(--zbgj-bg-soft)}

/* 阅读历史列表 */
.zbgj-hist-list{display:flex;flex-direction:column}
.zbgj-hist-item{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--zbgj-border)}
.zbgj-hist-cover{width:48px;height:64px;flex-shrink:0;border-radius:6px;overflow:hidden;background:var(--zbgj-bg-soft)}
.zbgj-hist-cover img{width:100%;height:100%;object-fit:cover;display:block}
.zbgj-hist-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.zbgj-hist-title{font-size:14px;color:var(--zbgj-text);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zbgj-hist-sub{font-size:12px}
.zbgj-hist-time{font-size:11px;color:var(--zbgj-text-lighter)}
.zbgj-hist-del{position:absolute;top:10px;right:10px;width:24px;height:24px;border:none;border-radius:50%;background:rgba(0,0,0,.4);color:#fff;font-size:16px;line-height:1;cursor:pointer;display:none}
.zbgj-hist-item{position:relative}
.zbgj-hist-item:hover .zbgj-hist-del{display:block}

/* ==================== 全站统一顶部导航条（电脑端） ==================== */
:root {
    --zbgj-header-h: 62px;
    --zbgj-header-bg: linear-gradient(to bottom, #0a0a0b 0%, #0a0a0b 80%, #7f1d1d 100%);
    --zbgj-header-border: rgba(220, 38, 38, .25);
    --zbgj-header-text: rgba(255, 255, 255, .78);
}
html[data-theme="dark"] {
    --zbgj-header-bg: linear-gradient(to bottom, #000000 0%, #000000 85%, #5f1414 100%);
    --zbgj-header-border: rgba(220, 38, 38, .2);
}
.zbgj-header {
    position: sticky;
    top: 0;
    z-index: 80;
    background: var(--zbgj-header-bg);
    border-bottom: 1px solid var(--zbgj-header-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}
.zbgj-header-inner {
    max-width: 1280px;
    margin: 0 auto;
    min-height: var(--zbgj-header-h);
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 24px;
}
.zbgj-header-logo { display: flex; align-items: center; gap: 9px; flex-shrink: 0; text-decoration: none; }
.zbgj-header-logo-mark {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    font-size: 15px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--zbgj-primary), var(--zbgj-secondary));
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}
.zbgj-header-logo-text { font-size: 17px; font-weight: 700; color: #fff; letter-spacing: .2px; }
.zbgj-header-nav {
    display: flex; align-items: center; gap: 2px;
    flex: 1; min-width: 0;
    overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.zbgj-header-nav::-webkit-scrollbar { display: none; }
.zbgj-header-nav-item {
    position: relative;
    display: flex; align-items: center; gap: 6px;
    padding: 9px 13px;
    border-radius: 8px;
    font-size: 15px;
    color: var(--zbgj-header-text);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color .15s, background .15s;
}
.zbgj-header-nav-item:hover { color: #fff; background: rgba(255, 255, 255, .09); }
.zbgj-header-nav-item.is-active { color: #fff; font-weight: 600; }
.zbgj-header-nav-item.is-active::after {
    content: '';
    position: absolute; left: 13px; right: 13px; bottom: 3px;
    height: 2px; border-radius: 2px;
    background: var(--zbgj-primary);
}
.zbgj-header-nav-ico { font-size: 14px; line-height: 1; opacity: .92; }
.zbgj-header-search {
    display: flex; align-items: center;
    width: 232px; flex-shrink: 0;
    padding: 3px 4px 3px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .14);
    transition: background .18s, border-color .18s;
}
.zbgj-header-search:focus-within { background: rgba(255, 255, 255, .16); border-color: var(--zbgj-primary); }
.zbgj-header-search input {
    flex: 1; min-width: 0;
    padding: 5px 0;
    border: none; outline: none; background: transparent;
    color: #fff; font-size: 13px; font-family: inherit;
}
.zbgj-header-search input::placeholder { color: rgba(255, 255, 255, .5); }
.zbgj-header-search button {
    flex-shrink: 0;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%;
    background: transparent; color: rgba(255, 255, 255, .72);
    font-size: 14px; cursor: pointer;
    transition: color .15s, background .15s;
}
.zbgj-header-search button:hover { color: #fff; background: rgba(255, 255, 255, .16); }
.zbgj-header-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.zbgj-header-act {
    display: flex; align-items: center; gap: 5px;
    font-size: 13px; color: var(--zbgj-header-text); text-decoration: none; white-space: nowrap;
    transition: color .15s;
}
.zbgj-header-act:hover { color: #fff; }
.zbgj-header-act-ico { font-size: 15px; line-height: 1; }
.zbgj-header-avatar { display: block; flex-shrink: 0; }
.zbgj-header-avatar img {
    width: 34px; height: 34px; display: block;
    border-radius: 50%; object-fit: cover;
    border: 2px solid rgba(255, 255, 255, .22);
    transition: border-color .15s;
}
.zbgj-header-avatar:hover img { border-color: var(--zbgj-primary); }
.zbgj-header-btn {
    padding: 6px 16px; border-radius: 999px;
    font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s, opacity .15s;
}
.zbgj-header-btn-login { color: var(--zbgj-header-text); border: 1px solid rgba(255, 255, 255, .24); }
.zbgj-header-btn-login:hover { color: #fff; border-color: rgba(255, 255, 255, .5); }
.zbgj-header-btn-reg { color: #fff; background: linear-gradient(135deg, var(--zbgj-primary), var(--zbgj-secondary)); }
.zbgj-header-btn-reg:hover { color: #fff; opacity: .88; }
/* 顶栏内的主题切换按钮：覆盖浅底配色，适配暗色顶栏 */
.zbgj-header-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .78);
    font-size: 15px; line-height: 1;
    text-decoration: none; flex-shrink: 0;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.zbgj-header-theme-toggle:hover {
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .32);
    transform: rotate(18deg);
}

/* 中等屏幕：收紧间距，隐藏右侧文字标签只留图标 */
@media (max-width: 1024px) {
    .zbgj-header-inner { gap: 12px; padding: 0 14px; }
    .zbgj-header-search { width: 170px; }
    .zbgj-header-act span:not(.zbgj-header-act-ico) { display: none; }
}
/* 手机端：隐藏电脑端顶栏（分类导航由底部常驻导航承担） */
@media (max-width: 768px) {
    .zbgj-header { display: none; }
}
/* 沉浸式阅读：隐藏顶栏 */
body.zbgj-reading .zbgj-header { display: none !important; }

/* ==================== 手机端顶部栏（站点名 + 放大镜搜索） ==================== */
.zbgj-mobilebar { display: none; }
@media (max-width: 768px) {
    .zbgj-mobilebar {
        display: block;
        position: sticky;
        top: 0;
        z-index: 80;
        background: var(--zbgj-header-bg);
        border-bottom: 1px solid var(--zbgj-header-border);
    }
    .zbgj-mobilebar-inner {
        display: flex;
        align-items: center;
        gap: 12px;
        height: 50px;
        padding: 0 14px;
    }
    .zbgj-mobilebar-logo { display: flex; align-items: center; gap: 8px; min-width: 0; text-decoration: none; }
    .zbgj-mobilebar-mark {
        width: 26px; height: 26px; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        border-radius: 7px;
        background: var(--zbgj-primary);
        color: #fff; font-size: 14px; font-weight: 700;
    }
    .zbgj-mobilebar-name {
        font-size: 15px; font-weight: 600; color: #fff;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .zbgj-mobilebar-search-btn {
        margin-left: auto; flex-shrink: 0;
        width: 36px; height: 36px;
        display: flex; align-items: center; justify-content: center;
        border: none; border-radius: 50%;
        background: rgba(255, 255, 255, .1);
        color: #fff; font-size: 17px; cursor: pointer;
        transition: background .15s;
    }
    .zbgj-mobilebar-search-btn:hover,
    .zbgj-mobilebar-search-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .2); }
    .zbgj-mobilebar-search-ico { line-height: 1; }
    .zbgj-mobilebar-search { display: flex; gap: 8px; padding: 0 14px 10px; }
    .zbgj-mobilebar-search.is-hidden { display: none; }
    .zbgj-mobilebar-search input {
        flex: 1; min-width: 0;
        padding: 9px 14px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, .18);
        background: rgba(255, 255, 255, .1);
        color: #fff; font-size: 13px; font-family: inherit; outline: none;
    }
    .zbgj-mobilebar-search input::placeholder { color: rgba(255, 255, 255, .5); }
    .zbgj-mobilebar-search input:focus { border-color: var(--zbgj-primary); }
    .zbgj-mobilebar-submit {
        flex-shrink: 0; padding: 0 16px;
        border: none; border-radius: 999px;
        background: var(--zbgj-primary); color: #fff;
        font-size: 13px; cursor: pointer;
    }
    /* 左侧汉堡按钮 */
    .zbgj-mobilebar-menu-btn {
        flex-shrink: 0;
        width: 36px; height: 36px;
        display: flex; align-items: center; justify-content: center;
        border: none; border-radius: 50%;
        background: rgba(255, 255, 255, .1);
        color: #fff; font-size: 18px; cursor: pointer;
        transition: background .15s;
    }
    .zbgj-mobilebar-menu-btn:hover,
    .zbgj-mobilebar-menu-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .2); }
    .zbgj-mobilebar-menu-ico { line-height: 1; }
    /* 抽屉遮罩 */
    .zbgj-drawer-mask {
        display: block;
        position: fixed; inset: 0;
        background: rgba(17, 24, 39, .45);
        z-index: 190;
    }
    .zbgj-drawer-mask.is-hidden { display: none; }
    /* 抽屉面板 */
    .zbgj-drawer {
        display: flex; flex-direction: column;
        position: fixed; top: 0; left: 0; bottom: 0;
        width: 80%; max-width: 320px;
        background: var(--zbgj-bg, #fff);
        z-index: 200;
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 2px 0 16px rgba(0, 0, 0, .25);
    }
    .zbgj-drawer.is-open { transform: translateX(0); }
    .zbgj-drawer-head {
        display: flex; align-items: center; gap: 10px;
        padding: 16px 16px 14px;
        border-bottom: 1px solid var(--zbgj-border, #eee);
    }
    .zbgj-drawer-mark {
        width: 30px; height: 30px; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        border-radius: 8px;
        background: var(--zbgj-primary); color: #fff;
        font-size: 15px; font-weight: 700;
    }
    .zbgj-drawer-site { flex: 1; font-size: 15px; font-weight: 600; color: var(--zbgj-text, #222); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .zbgj-drawer-close {
        border: none; background: transparent; cursor: pointer;
        font-size: 18px; color: var(--zbgj-text-light, #888);
        width: 32px; height: 32px; border-radius: 50%;
    }
    .zbgj-drawer-close:hover { background: rgba(0, 0, 0, .06); }
    .zbgj-drawer-nav { padding: 8px 0; overflow-y: auto; flex: 1; }
    .zbgj-drawer-item {
        display: flex; align-items: center; gap: 12px;
        padding: 13px 18px;
        color: var(--zbgj-text, #222);
        text-decoration: none; font-size: 15px;
        border-left: 3px solid transparent;
        border-bottom: 1px solid var(--zbgj-border, #eee);
    }
    .zbgj-drawer-item:last-child { border-bottom: none; }
    .zbgj-drawer-item:active { background: rgba(0, 0, 0, .04); }
    .zbgj-drawer-item.is-active {
        color: var(--zbgj-primary);
        background: var(--zbgj-primary-soft, rgba(99, 102, 241, .08));
        border-left-color: var(--zbgj-primary);
        font-weight: 600;
    }
    .zbgj-drawer-ico { font-size: 18px; width: 22px; text-align: center; }
    .zbgj-drawer-label { flex: 1; }
    .zbgj-drawer-empty { padding: 18px; color: var(--zbgj-text-light, #999); font-size: 13px; line-height: 1.7; }
}
/* 沉浸式阅读：隐藏手机端顶部栏 */
body.zbgj-reading .zbgj-mobilebar { display: none !important; }

/* 手机端抽屉导航：桌面端隐藏（用 min-width 媒体查询，避免覆盖手机端的 display:flex/block） */
@media (min-width: 769px) {
    .zbgj-drawer, .zbgj-drawer-mask { display: none; }
}

/* ============================================================
 * 积分兑换确认弹窗（屏幕居中模态）
 * ============================================================ */
.zbgj-modal-mask {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 24, 39, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.18s ease;
    padding: 24px;
}
.zbgj-modal-mask.is-open { opacity: 1; }
.zbgj-modal {
    width: min(380px, 100%);
    background: var(--zbgj-bg-white, #fff);
    color: var(--zbgj-text, #374151);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
    overflow: hidden;
    transform: translateY(18px) scale(0.95);
    transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
.zbgj-modal-mask.is-open .zbgj-modal { transform: none; }
.zbgj-modal-head {
    padding: 20px 22px 0;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}
.zbgj-modal-body { padding: 14px 22px 4px; }
.zbgj-modal-plan {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.09), rgba(236, 72, 153, 0.09));
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}
.zbgj-modal-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 2px;
    font-size: 13.5px;
    border-bottom: 1px dashed var(--zbgj-border, #e5e7eb);
}
.zbgj-modal-row span { color: var(--zbgj-text-light, #6b7280); }
.zbgj-modal-cost { color: var(--zbgj-primary, #7c3aed); }
.zbgj-modal-warn { color: #e11d48; }
.zbgj-modal-note {
    margin: 12px 0 4px;
    font-size: 12px;
    color: #e11d48;
    text-align: center;
}
.zbgj-modal-foot {
    display: flex;
    gap: 10px;
    padding: 16px 22px 20px;
}
.zbgj-modal-btn-cancel,
.zbgj-modal-btn-ok {
    flex: 1;
    padding: 10px 0;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.zbgj-modal-btn-cancel {
    border: 1px solid var(--zbgj-border, #e5e7eb);
    background: transparent;
    color: var(--zbgj-text, #374151);
}
.zbgj-modal-btn-cancel:hover { background: rgba(0, 0, 0, 0.045); }
.zbgj-modal-btn-ok {
    border: none;
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    color: #fff;
    font-weight: 600;
    letter-spacing: 1px;
}
.zbgj-modal-btn-ok:hover { opacity: 0.88; }

/* ============================================================
 * 工单图片上传组件 & 工单对话图片
 * ============================================================ */
.zbgj-fb-up { margin-top: 10px; }
.zbgj-fb-up-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.zbgj-fb-up-cell {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--zbgj-border, #e5e7eb);
    background: var(--zbgj-bg, #f9fafb);
}
.zbgj-fb-up-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zbgj-fb-up-del {
    position: absolute;
    top: 0;
    right: 0;
    width: 18px;
    height: 18px;
    line-height: 17px;
    text-align: center;
    font-size: 13px;
    color: #fff;
    background: rgba(17, 24, 39, 0.6);
    border-bottom-left-radius: 8px;
    cursor: pointer;
    user-select: none;
}
.zbgj-fb-up-del:hover { background: rgba(220, 38, 38, 0.85); }
.zbgj-fb-up-bar { display: flex; align-items: center; gap: 10px; }
.zbgj-fb-up-add {
    padding: 5px 14px;
    font-size: 12px;
    border-radius: 8px;
    border: 1px dashed var(--zbgj-border, #d1d5db);
    background: transparent;
    color: var(--zbgj-text-light, #6b7280);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.zbgj-fb-up-add:hover { color: var(--zbgj-primary, #e0344a); border-color: var(--zbgj-primary, #e0344a); }
.zbgj-fb-up-add:disabled { opacity: 0.5; cursor: default; }
.zbgj-fb-up-tip { font-size: 12px; color: var(--zbgj-text-light, #6b7280); }
.zbgj-fb-up-tip.is-err { color: #ef4444; }

/* 对话中的图片（点击页内放大） */
.zbgj-fb-msg-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.zbgj-fb-msg-imgs img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    border: 1px solid var(--zbgj-border, #e5e7eb);
    cursor: zoom-in;
    transition: transform 0.2s, box-shadow 0.2s;
}
.zbgj-fb-msg-imgs img:hover { transform: scale(1.06); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }

/* 图片灯箱（页内全屏放大） */
.zbgj-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(10, 12, 18, 0.86);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.2s ease;
    cursor: zoom-out;
}
.zbgj-lightbox.is-open { opacity: 1; }
.zbgj-lightbox img {
    max-width: min(92vw, 1200px);
    max-height: 86vh;
    border-radius: 10px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
    transform: scale(0.92);
    transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.zbgj-lightbox.is-open img { transform: scale(1); }
.zbgj-lightbox-tip {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 1px;
    user-select: none;
}