:root {
            --brand: #2563eb;
            --brand-2: #4f46e5;
            --brand-3: #1d4ed8;
            --brand-4: #7c3aed;
            --brand-soft: #eff6ff;
            --brand-ring: rgba(37,99,235,.12);
            --brand-shadow: rgba(37,99,235,.22);
            --page-bg: #f8fafc;
            --header-bg: rgba(255,255,255,.96);
            --header-ink: #0f172a;
            --radius-card: 12px;
            --font-display: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
        }

        .card-hover { transition: all 0.25s ease; }
        .card-hover:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -8px rgba(0,0,0,0.12); }

        /* ===== 默认封面（CSS 兜底）：封面图缺失或加载失败时显示 ===== */
        .book-cover {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #fff;
            padding: 12px;
            box-sizing: border-box;
            overflow: hidden;
            font-family: -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
        }
        .book-cover::before { /* 顶部装饰条 */
            content: "";
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 5px;
            background: rgba(255,255,255,.85);
        }
        .bc-top {
            position: absolute;
            top: 8px; left: 10px;
            background: rgba(255,255,255,.28);
            border-radius: 4px;
            padding: 2px 8px;
            font-size: 9px;
            letter-spacing: 1px;
            font-weight: 700;
        }
        .bc-title { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-size:12px; line-height:1.45;
            font-weight: 700;
            line-height: 1.35;
            font-size: 14px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            word-break: break-all;
            max-width: 100%;
        }
        .bc-line {
            width: 40%;
            height: 1px;
            background: rgba(255,255,255,.55);
            margin: 8px 0 6px;
        }
        .bc-author {
            font-size: 10px;
            opacity: .9;
            max-width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        /* 封面图覆盖层：加载成功时盖住 CSS 封面，失败/缺失时露出 */
        .book-cover-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
        }
        /* 迷你封面占位（右侧热门排行等 36x48 缩略图）：去掉大卡的装饰条与内边距，居中显示书名首字 */
                /* 卡片封面：显式 3:4 比例，避免 .book-cover 的 height:100% 把封面压扁（组件化页面） */
        .book-cover.card-cover { width: 100%; height: auto; aspect-ratio: 3 / 4; }
        .book-cover.card-cover.is-compact { aspect-ratio: 4 / 3; }.book-cover-xs { padding: 0; border-radius: 4px; }
        .book-cover-xs::before { display: none; }
        .bc-initial { font-size: 17px; font-weight: 700; line-height: 1; }
        /* 颜色轮换 */
        .c1 { background: linear-gradient(160deg, var(--brand, #2563eb), #1e40af); }
        .c2 { background: linear-gradient(160deg, #0f766e, #134e4a); }
        .c3 { background: linear-gradient(160deg, #9333ea, #6b21a8); }
        .c4 { background: linear-gradient(160deg, #dc2626, #991b1b); }
        .c5 { background: linear-gradient(160deg, #0891b2, #155e75); }
        .c6 { background: linear-gradient(160deg, #d97706, #92400e); }
        .c7 { background: linear-gradient(160deg, var(--brand-2, #4f46e5), #3730a3); }
        .c8 { background: linear-gradient(160deg, #059669, #065f46); }
        .c9 { background: linear-gradient(160deg, #e11d48, #9f1239); }
        .c10 { background: linear-gradient(160deg, #7c3aed, #4c1d95); }
    
/* ebookfront 组件默认变量与品牌色 */
:root {
    --brand: var(--brand, #2563eb);
    --accent: #f59e0b;
    --radius: 16px;
    --card-min: 150px;
    --gap: 16px;
}
.btn-brand { background: var(--brand); }
.btn-brand:hover { filter: brightness(.92); }
body { font-family: -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif; }
/* ===== ebookfront 布局（不依赖 Tailwind 任意值/响应式工具类） ===== */
.ef-hd { max-width: 1200px; margin: 0 auto; padding: 0 20px; height: 64px; display: flex; align-items: center; gap: 24px; }
.ef-nav { display: none; gap: 22px; font-size: 14px; color: #475569; white-space: nowrap; }
.ef-nav a:hover { color: var(--brand, #2563eb); }
.ef-search { display: none; position: relative; flex: 1; max-width: 420px; margin-left: auto; }
.ef-search input { width: 100%; height: 38px; padding: 0 78px 0 36px; background: #f1f5f9; border: 0; border-radius: 10px; font-size: 14px; outline: none; }
.ef-search input:focus { background: #fff; box-shadow: 0 0 0 2px #93c5fd; }
.ef-search .ef-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: #94a3b8; }
.ef-search button { position: absolute; right: 4px; top: 4px; height: 30px; padding: 0 12px; background: var(--brand, #2563eb); color: #fff; font-size: 12px; border: 0; border-radius: 8px; cursor: pointer; }
.ef-my { margin-left: auto; font-size: 14px; color: #64748b; white-space: nowrap; }
.ef-my:hover { color: var(--brand, #2563eb); }
.ef-search-m { display: block; flex: 1 0 100%; padding: 2px 0 10px; }
.site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg, rgba(255,255,255,.96)); color: var(--header-ink, #0f172a); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid #e2e8f0; }
@media (min-width: 640px) { .ef-search { display: block; } .ef-search-m { display: none; } }
@media (min-width: 768px) { .ef-nav { display: flex; } }
.ef-wrap { max-width: 1200px; margin: 0 auto; padding: 22px 20px 8px; }\n        body { background: var(--page-bg, #f8fafc); }\n        .ef-hero h1, .ef-section-title, .ef-logo, .dl-title, .detail-title, .ef-page-title { font-family: var(--font-display); }
.ef-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.ef-aside { display: none; }
@media (min-width: 1024px) { .ef-grid { grid-template-columns: minmax(0, 1fr) 290px; } .ef-aside { display: block; } }
@media (max-width: 640px) { .ef-wrap { padding: 14px 14px 4px; } }

/* ===== left category sidebar + multi-column shell ===== */
.ef-layout { display:flex; gap:24px; align-items:flex-start; }
.ef-main-col { flex:1; min-width:0; }
.ef-side { display:none; }
@media (min-width:1024px) {
  .ef-side { display:block; width:232px; flex:0 0 232px; position:sticky; top:88px; max-height:calc(100vh - 104px); overflow-y:auto; scrollbar-width:thin; }
}
.ef-side-card { background:#fff; border:1px solid #e9eef5; border-radius:16px; overflow:hidden; }
.ef-side-hd { display:flex; align-items:center; gap:8px; padding:14px 16px; font-size:14px; font-weight:700; color:#334155; border-bottom:1px solid #f1f5f9; background:linear-gradient(90deg,var(--brand-soft, #eff6ff),#eef2ff); }
.ef-side-hd svg { color:var(--brand, #3b82f6); }
.ef-side-nav { padding:8px; }
.ef-side-row { display:flex; align-items:center; gap:6px; padding:8px 10px; border-radius:8px; }
.ef-side-row:hover { background:var(--brand-soft, #eff6ff); }
.ef-side-row.is-active { background:var(--brand,var(--brand, #2563eb)); }
.ef-side-row.is-active .ef-side-name,
.ef-side-row.is-active .ef-side-count,
.ef-side-row.is-active .ef-side-caret { color:#fff; }
.ef-side-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; color:#475569; text-decoration:none; }
.ef-side-count { font-size:11px; color:#94a3b8; }
.ef-side-caret { border:0; background:none; padding:2px 4px; font-size:11px; color:#94a3b8; cursor:pointer; transition:transform .2s; }
.ef-side-caret.is-open { transform:rotate(180deg); }
.ef-side-sub { display:none; margin:2px 0 6px 18px; padding-left:8px; border-left:2px solid #e2e8f0; }
.ef-side-sub.is-open { display:block; }
.ef-side-sub a { display:block; padding:6px 10px; border-radius:6px; font-size:13px; color:#64748b; text-decoration:none; }
.ef-side-sub a:hover { background:#f8fafc; color:var(--brand,var(--brand, #2563eb)); }
.ef-side-sub a.is-active { color:var(--brand,var(--brand, #2563eb)); background:var(--brand-soft, #eff6ff); font-weight:600; }

/* mobile category button + drawer */
.ef-cat-btn { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 12px; border-radius:9px; border:1px solid #e2e8f0; background:#fff; font-size:13px; color:#475569; cursor:pointer; }
.ef-cat-btn:hover { border-color:#cbd5e1; }
@media (min-width:1024px) { .ef-cat-btn { display:none; } }
.ef-drawer-overlay { position:fixed; inset:0; z-index:60; background:rgba(15,23,42,.45); display:none; }
.ef-drawer-overlay.is-open { display:block; }
.ef-drawer { position:fixed; top:0; left:0; z-index:61; height:100%; width:282px; background:#fff; transform:translateX(-100%); transition:transform .25s; overflow-y:auto; }
.ef-drawer.is-open { transform:none; }
.ef-drawer-hd { display:flex; align-items:center; justify-content:space-between; padding:16px; background:linear-gradient(90deg,var(--brand, #2563eb),var(--brand-2, #4f46e5)); color:#fff; font-weight:700; }
.ef-drawer-hd button { border:0; background:none; color:#fff; font-size:16px; cursor:pointer; }

/* detail two-column: main + sticky action rail */
.ef-detail-layout { display:flex; gap:24px; align-items:flex-start; }
.ef-detail-main { flex:1; min-width:0; }
.ef-detail-rail { display:none; }
@media (min-width:1024px) { .ef-detail-rail { display:block; width:288px; flex:0 0 288px; position:sticky; top:88px; } }

/* DM-style tab panel */
.ef-tabs-head { display:flex; flex-wrap:wrap; gap:6px; padding-bottom:14px; margin-bottom:20px; border-bottom:1px solid #e9eef5; }
.ef-tab-btn { padding:8px 14px; border-radius:8px; border:1px solid transparent; background:none; font-size:13px; font-weight:600; color:#64748b; cursor:pointer; }
.ef-tab-btn:hover { background:#f8fafc; color:#334155; }
.ef-tab-btn.is-active { background:var(--brand-soft, #eff6ff); border-color:#bfdbfe; color:var(--brand, #2563eb); }
.ef-tab-panel { display:none; font-size:14px; line-height:1.9; color:#334155; }
.ef-tab-panel.is-active { display:block; }
.ef-tab-panel img { max-width:100%; height:auto; }

@media (max-width: 640px) {
    .ef-hd { height: auto; flex-wrap: wrap; row-gap: 8px; padding-top: 8px; padding-bottom: 8px; }
    .ef-search-m { flex: 1 0 100%; }
}

/* shared buttons */
.ef-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 20px; border-radius:10px; border:1px solid transparent; font-size:14px; font-weight:600; text-decoration:none; cursor:pointer; background:#fff; color:#1e293b; }
.ef-btn.primary { background:var(--brand,var(--brand, #2563eb)); color:#fff; }
.ef-btn.primary:hover { filter:brightness(.94); }
.ef-btn.ghost { background:#fff; border-color:#dbe3ef; color:#1e293b; }
.ef-btn.ghost:hover { border-color:#c3cede; }
.dl-cover { position:relative; }
.dl-cover.is-empty::after { content:"暂无封面"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; letter-spacing:.08em; }

.fv-cover, .bd-cover { position: relative; }
.fv-cover.is-empty::after, .bd-cover.is-empty::after { content:"暂无封面"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; letter-spacing:.08em; }

.fv-title, .bd-title { overflow-wrap:anywhere; word-break:break-word; }

/* 皮肤：页面底色与侧栏滚动条 */
body { background: var(--page-bg, #f8fafc) !important; }
.ef-side { scrollbar-width: thin; scrollbar-color: rgba(100, 116, 139, .35) transparent; }
.ef-side::-webkit-scrollbar { width: 6px; }
.ef-side::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .28); border-radius: 6px; }
.ef-side::-webkit-scrollbar-track { background: transparent; }