/* ============================================================
   FicPort Dark Theme v3 — CSS 变量体系
   全站颜色由 :root 变量控制，为亮暗切换打基础
   ============================================================ */

:root {
    /* 背景体系 */
    --bg: #0d1117;
    --bg-card: #161b22;
    --bg-nav: #161b22;
    --bg-input: #0d1117;
    --bg-cover-ph: #0a0e14;
    --bg-overlay: rgba(0,0,0,.4);

    /* 边框 */
    --border: rgba(255,255,255,.06);
    --border-light: rgba(255,255,255,.03);
    --border-input: rgba(255,255,255,.12);

    /* 文字 */
    --text: #c9d1d9;
    --text-bright: #f0f6fc;
    --text-dim: #8b949e;
    --text-white: #fff;
    --text-error: #f87171;
    --text-error-strong: #f85149;
    --text-warning: #fbbf24;
    --text-success: #4ade80;

    /* 强调色 */
    --accent: #3B82F6;
    --accent-hover: #2563EB;
    --accent-light: #60a5fa;

    /* 半透明强调色 */
    --accent-bg: rgba(59,130,246,.08);
    --accent-bg-light: rgba(59,130,246,.03);
    --accent-bg-strong: rgba(59,130,246,.12);
    --accent-bg-hover: rgba(59,130,246,.18);
    --accent-border: rgba(59,130,246,.15);
    --accent-shadow: rgba(59,130,246,.25);

    /* 星级 */
    --star: #F2C71E;
    --star-empty: #3a3f47;

    /* 状态色 */
    --warning-bg: rgba(251,191,36,.06);
    --warning-border: rgba(251,191,36,.2);
    --error-bg: rgba(248,113,73,.08);
    --error-bg-form: rgba(248,113,73,.1);
    --error-border-form: rgba(248,113,73,.2);
    --success-bg: rgba(34,197,94,.15);
    --success-border: rgba(34,197,94,.2);

    /* 表单/按钮 */
    --btn-secondary-bg: #30363d;
    --btn-secondary-border: rgba(255,255,255,.12);

    /* 其他 */
    --radius: 10px;
    --shadow-card: 0 8px 32px rgba(0,0,0,.5);
    --shadow-dropdown: 0 8px 24px rgba(0,0,0,.4);

    /* 过渡 */
    --theme-transition: background .3s ease, color .3s ease, border-color .3s ease;
}

/* ===== 亮色主题 ===== */
[data-ficport-theme="light"] {
    --bg: #f4f4f5;
    --bg-card: #ffffff;
    --bg-nav: #ffffff;
    --bg-input: #ffffff;
    --bg-cover-ph: #e5e7eb;
    --bg-overlay: rgba(0,0,0,.15);

    --border: rgba(0,0,0,.08);
    --border-light: rgba(0,0,0,.04);
    --border-input: rgba(0,0,0,.15);

    --text: #374151;
    --text-bright: #111827;
    --text-dim: #6b7280;
    --text-white: #fff;

    --text-error: #dc2626;
    --text-error-strong: #b91c1c;
    --text-warning: #d97706;
    --text-success: #059669;

    --accent: #2563EB;
    --accent-hover: #1d4ed8;
    --accent-light: #3B82F6;

    --accent-bg: rgba(37,99,235,.08);
    --accent-bg-light: rgba(37,99,235,.03);
    --accent-bg-strong: rgba(37,99,235,.12);
    --accent-bg-hover: rgba(37,99,235,.18);
    --accent-border: rgba(37,99,235,.15);
    --accent-shadow: rgba(37,99,235,.2);

    --star: #d97706;
    --star-empty: #d1d5db;

    --warning-bg: rgba(217,119,6,.08);
    --warning-border: rgba(217,119,6,.2);
    --error-bg: rgba(220,38,38,.08);
    --error-bg-form: rgba(220,38,38,.1);
    --error-border-form: rgba(220,38,38,.2);
    --success-bg: rgba(5,150,105,.12);
    --success-border: rgba(5,150,105,.2);

    --btn-secondary-bg: #e5e7eb;
    --btn-secondary-border: rgba(0,0,0,.15);


    /* PMPro 会员页亮色覆盖 */
    --pmpro--color--accent: var(--accent);
    --pmpro--color--accent--variation: var(--accent-hover);
    --pmpro--color--border: rgba(0,0,0,.15);
    --pmpro--color--border--variation: rgba(0,0,0,.08);
    --pmpro--box-shadow: 0 4px 16px rgba(0,0,0,.06);
    --shadow-card: 0 4px 16px rgba(0,0,0,.08);
    --shadow-dropdown: 0 8px 24px rgba(0,0,0,.1);
}

/* ===== 主题按钮 ===== */
.theme-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: none; border: 1px solid var(--border);
    border-radius: 8px; cursor: pointer; font-size: 1.1rem;
    color: var(--text-dim); transition: all .15s;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
    margin: 0; padding: 0; background: var(--bg); color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
    line-height: 1.6; overflow-y: scroll;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* === 导航栏 === */
.ficport-nav { background: var(--bg-nav); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
.nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; list-style: none; }
.nav-inner li { margin: 0; }
.nav-inner a { display: block; padding: 12px 16px; color: var(--text) !important; text-decoration: none !important; font-size: .88rem; font-weight: 500; transition: color .15s; }
.nav-inner a:hover { color: var(--text-bright) !important; }
.nav-inner a.current { color: var(--accent) !important; }
/* === 导航下拉菜单 === */
.nav-user-dropdown { position: relative; }
.nav-user-btn { display: block; padding: 12px 16px; color: var(--text); font-size: .88rem; font-weight: 500; background: none; border: none; cursor: pointer; font-family: inherit; transition: color .15s; }
.nav-user-btn:hover { color: var(--text-bright); }
.nav-dropdown-menu { display: none; position: absolute; right: 0; top: 100%; min-width: 200px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-dropdown); z-index: 200; overflow: hidden; }
.nav-user-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-header { padding: 12px 16px; font-size: .85rem; font-weight: 600; color: var(--text-bright); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.nav-member-badge { font-size: .72rem; font-weight: 400; color: var(--accent); }
.nav-dropdown-item { display: block; padding: 10px 16px; color: var(--text) !important; font-size: .85rem; text-decoration: none !important; transition: background .12s; }
.nav-dropdown-item:hover { background: var(--accent-bg); color: var(--text-bright) !important; }
.nav-dropdown-divider { border: none; border-top: 1px solid var(--border); margin: 4px 0; }
.nav-dropdown-logout { color: var(--text-error) !important; }
.nav-dropdown-logout:hover { background: var(--error-bg); }


/* === 品牌页头 === */
.ficport-header { background: var(--bg-nav); border-bottom: 1px solid var(--border); }
.ficport-header .hc { max-width: 1280px; margin: 0 auto; padding: 18px 20px; display: flex; align-items: baseline; gap: 12px; }
.ficport-header .hc a { color: var(--accent) !important; font-weight: 700; font-size: clamp(18px, 2.5vw, 24px); text-decoration: none !important; }
.ficport-header .hc a:hover { color: var(--accent-light) !important; }
.ficport-header .hc .tag { color: var(--text-dim) !important; font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* === 主内容 === */
.main-content { max-width: 1280px; margin: 0 auto; padding: 24px 20px 48px; }

/* === 区段 === */
.novel-section { margin-bottom: 40px; }
.section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.section-title { font-size: 1.25rem; font-weight: 700; color: var(--text-bright); margin: 0; }
.section-more { font-size: .82rem; color: var(--accent); white-space: nowrap; }
.section-more:hover { color: var(--accent-light); }

/* === 网格行 === */
.novel-grid-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
}
@media (max-width: 1100px) { .novel-grid-row { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 768px) { .novel-grid-row { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px) { .novel-grid-row { grid-template-columns: repeat(3, 1fr); } }

/* === 横向卡片 === */
.novel-h-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .15s, border-color .15s;
}
.novel-h-card:hover { transform: translateY(-3px); border-color: var(--accent); }

.h-card-cover {
    display: block; position: relative; overflow: hidden;
    aspect-ratio: 2/3;
    background: var(--bg-cover-ph);
}
.h-card-cover img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .3s;
}
.novel-h-card:hover .h-card-cover img { transform: scale(1.05); }
.h-card-cover-ph {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; color: var(--text-dim); background: var(--bg);
}

/* 排行号徽章 */
.rank-badge {
    position: absolute; top: 0; left: 0;
    background: var(--accent); color: var(--text-white);
    font-size: .8rem; font-weight: 800;
    padding: 4px 10px 6px 8px;
    border-radius: 0 0 8px 0;
    line-height: 1;
    letter-spacing: .5px;
}

.h-card-body { padding: 8px 10px 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.h-card-title { display: none; }
.h-card-author { display: none; }
.h-card-meta { display: contents; }
.h-card-genre { font-size: .72rem; background: var(--accent-bg-strong); color: var(--accent); padding: 1px 6px; border-radius: 3px; font-weight: 500; }
.h-card-stars { font-size: .78rem; color: var(--star); }
.h-card-name { font-size: .85rem; color: var(--text); line-height: 1.3; width: 100%;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* === 页脚 === */
.site-footer { text-align: center; padding: 20px; color: var(--text-dim); font-size: .78rem; border-top: 1px solid var(--border); }

/* === 最近更新列表 === */
    display: grid;
    grid-template-columns: 48px 200px 1fr auto 1fr auto 1fr auto;
    gap: 0 12px;
    align-items: center;
    padding: 12px 16px; border-bottom: 1px solid var(--border-light);
    color: inherit; text-decoration: none;
}

.u-cover { width: 48px; height: 72px; border-radius: 4px; overflow: hidden; background: var(--bg-cover-ph); }
.u-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.u-cover-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--text-dim); }

.u-title { font-weight: 600; color: var(--text-bright); font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.u-genre { font-size: .68rem; background: var(--accent-bg); color: var(--accent); padding: 2px 10px; border-radius: 3px; font-weight: 500; white-space: nowrap; }
.u-stars { font-size: .76rem; white-space: nowrap; }
.u-chapters { font-size: .76rem; color: var(--text-dim); white-space: nowrap; }

/* === 翻页 === */
.u-pagination { display: flex; justify-content: center; gap: 4px; margin-top: 16px; }
.u-pagination a, .u-pagination .page-current {
    display: inline-block; padding: 5px 12px; border-radius: 4px;
    font-size: .82rem; text-decoration: none;
    background: var(--bg-card); border: 1px solid var(--border); color: var(--text);
}
.u-pagination .page-current { background: var(--accent); border-color: var(--accent); color: var(--text-white); }
.u-pagination a:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 640px) {
}


@media (max-width: 768px) {
    .h-card-body { padding: 8px; }
    .h-card-title { font-size: .78rem; }
}

/* ============================================================
   小说列表页/故事页/章节页 样式
   ============================================================ */

/* 故事详情页 */
.story-header { display: flex; gap: 28px; margin-bottom: 36px; flex-wrap: wrap; }
.story-header .story-cover { flex-shrink: 0; width: 200px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.story-header .story-cover img { width: 100%; aspect-ratio: 2/3; object-fit: cover; }
.story-header .story-info { flex: 1; min-width: 280px; }
.story-header .story-info h1 { font-size: 26px; font-weight: 700; color: var(--text-bright); margin: 0 0 10px; }
.story-header .story-meta { color: var(--text-dim); font-size: .88rem; margin-bottom: 10px; }
.story-header .story-desc { color: var(--text); line-height: 1.7; font-size: .92rem; }
/* ----- v2 元数据行 ----- */
.story-meta-line { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; color: var(--text-dim); font-size: .88rem; }
.story-meta-line span { white-space: nowrap; }
.meta-author { color: var(--text-bright); font-weight: 600; }
.meta-genre { color: var(--accent); }
.meta-subgenre { color: var(--text-dim); }
.meta-status { padding: 2px 10px; border-radius: 4px; font-size: .78rem; font-weight: 600; }
.meta-status.status-ongoing   { background: var(--accent-bg-hover); color: var(--accent-light); }
.meta-status.status-completed { background: var(--success-bg); color: var(--text-success); }
.meta-status.status-hiatus    { background: var(--warning-bg); color: var(--text-warning); }
.meta-tag { display: inline-block; padding: 2px 10px; border-radius: 12px; background: var(--accent-bg); color: var(--accent); font-size: .75rem; text-decoration: none; transition: background .15s; }
.meta-tag:hover { background: var(--accent-bg-hover); color: var(--accent-light); }
.meta-rating { display: flex; align-items: center; gap: 6px; }
.meta-rating small { color: var(--text-dim); font-size: .78rem; }
/* 简介区 */
.story-synopsis { margin: 28px 0 20px; }
.story-synopsis h2 { font-size: 1.1rem; font-weight: 600; color: var(--text-bright); margin-bottom: 10px; }
.synopsis-content { color: var(--text); line-height: 1.8; font-size: .92rem; }

.chapter-list { margin-top: 36px; }
.chapter-list h2 { font-size: 1.15rem; font-weight: 600; color: var(--text-bright); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.chapter-group__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 20px; list-style: none; padding: 0; margin: 0; }
@media (max-width: 768px) { .chapter-group__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .chapter-group__list { grid-template-columns: 1fr; } }
.chapter-group__list li a { display: block; padding: 5px 0; color: var(--text); font-size: .85rem; border-bottom: 1px solid var(--border-light); transition: color .15s; }
.chapter-group__list li a:hover { color: var(--accent); }

/* 章节阅读页 */
.chapter-article { margin: 0 auto; }
.chapter-header { margin-bottom: 28px; text-align: center; }
.chapter-breadcrumb { margin-bottom: 14px; }
.chapter-breadcrumb a { color: var(--text-dim); font-size: .82rem; }
.chapter-breadcrumb a:hover { color: var(--accent); }
.chapter-number { display: block; color: var(--accent); font-size: .78rem; margin-bottom: 6px; font-weight: 500; }
.chapter-title { font-size: 22px; font-weight: 700; color: var(--text-bright); }
.chapter-footer { margin-top: 44px; text-align: center; padding: 20px 0; }
.chapter-footer .btn-back { display: inline-block; background: var(--bg-card); color: var(--text) !important; padding: 8px 22px; border-radius: 6px; font-size: .88rem; border: 1px solid var(--border); transition: border-color .15s; }
.chapter-footer .btn-back:hover { border-color: var(--accent); color: var(--accent) !important; }

/* 小说列表表格 (/xiaoshuo/) */
.novel-table { width: 100%; border-collapse: collapse; background: var(--bg); }
.novel-table thead { position: sticky; top: 52px; z-index: 10; }
.novel-table th { background: var(--bg-card); color: var(--text-dim); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; padding: 10px 12px; text-align: left; border-bottom: 2px solid var(--border); }
.novel-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: .84rem; vertical-align: middle; }
.novel-table tr:hover td { background: var(--accent-bg-light); }
.novel-table .col-cover { width: 56px; }
.novel-table .cover-thumb { width: 42px; height: 58px; object-fit: cover; border-radius: 4px; background: var(--bg); display: block; }
.cover-thumb-placeholder { width: 42px; height: 58px; background: var(--bg-card); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--text-dim); }
.novel-table .title-link { color: var(--text-bright); font-weight: 600; }
.novel-table .title-link:hover { color: var(--accent); }
.novel-table .author-sub { color: var(--text-dim); font-size: .72rem; }
.novel-table .table-genre { display: inline-block; background: var(--accent-bg-strong); color: var(--accent); font-size: .68rem; padding: 2px 7px; border-radius: 3px; }
.novel-table .table-rating { color: var(--star); font-size: .78rem; }
.empty-state { color: var(--text-dim); text-align: center; padding: 44px 0; }
.pagination { margin-top: 22px; text-align: center; }
.pagination .page-numbers { display: inline-block; padding: 5px 11px; margin: 0 2px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-size: .82rem; }
.pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: var(--text-white); }
.pagination .page-numbers:hover:not(.current) { border-color: var(--accent); color: var(--accent); }

/* 通用页面 */
.page-title-main { font-size: 1.25rem; font-weight: 700; color: var(--text-bright); margin-bottom: 20px; }
.page-article { max-width: 900px; margin: 0 auto; }
.page-header { margin-bottom: 20px; }
.page-title { font-size: 1.25rem; font-weight: 700; color: var(--text-bright); }

/* === 书架页 === */
.empty-state { text-align:center; padding:60px 20px; color:var(--text-dim); }
.empty-state p { margin:8px 0; font-size:.95rem; }
.empty-state a { color:var(--accent); }
.bs-table { border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.bs-row { display:flex; align-items:center; gap:14px; padding:14px 16px; border-bottom:1px solid var(--border); transition:opacity .3s; }
.bs-row:last-child { border-bottom:none; }
.bs-row:hover { background:var(--accent-bg-light); }
.bs-cover-link { flex-shrink:0; }
.bs-cover { width:48px; height:72px; object-fit:cover; border-radius:4px; }
.bs-info { flex:1; min-width:0; }
.bs-title { font-size:.92rem; font-weight:600; color:var(--text-bright); text-decoration:none; display:block; margin-bottom:4px; }
.bs-title:hover { color:var(--accent); }
.bs-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:.78rem; color:var(--text-dim); }
.bs-genre { color:var(--accent); padding:1px 8px; border-radius:10px; background:var(--accent-bg); font-size:.72rem; }
.bs-progress { color:var(--text-warning); }
.bs-continue { color:var(--accent); font-weight:600; text-decoration:none; }
.bs-continue:hover { text-decoration:underline; }
.bs-remove { flex-shrink:0; width:32px; height:32px; border:none; background:none; color:var(--text-dim); font-size:1rem; cursor:pointer; border-radius:4px; transition:all .12s; display:flex; align-items:center; justify-content:center; }
.bs-remove:hover { color:var(--text-error); background:var(--error-bg); }

/* ==== 详情页操作按钮 ==== */
.story-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }
.ficport-read-btn { display:inline-flex; align-items:center; gap:6px; padding:10px 24px; border-radius:8px; font-size:.95rem; font-weight:600; text-decoration:none; background:var(--accent); color:var(--text-white); transition:all .15s; }
.ficport-read-btn:hover { background:var(--accent-hover); color:var(--text-white); }
.ficport-bs-btn { display:inline-flex; align-items:center; gap:6px; padding:10px 24px; border-radius:8px; font-size:.95rem; font-weight:600; cursor:pointer; border:1px solid var(--accent); background:var(--accent-bg); color:var(--accent); transition:all .15s; font-family:inherit; }
.ficport-bs-btn:hover { background:var(--accent-bg-hover); }
.ficport-bs-btn.saved { background:var(--accent); color:var(--text-white); }
.meta-paywall-info { color:var(--accent); font-size:.8rem; margin-left:auto; }

/* ==== 章节目录 VIP 标记 ==== */
.chapter-free-hint { text-align:center; font-size:.8rem; color:var(--text-warning); padding:8px; margin:0; background:var(--warning-bg); border-radius:6px; }
.chapter-divider { list-style:none; text-align:center; color:var(--text-dim); font-size:.82rem; padding:12px 0 8px; margin:4px 0; border-top:1px dashed var(--border); }
.chapter-locked a { color:var(--text-dim) !important; }
.chapter-lock-icon { margin-right:4px; font-size:.8rem; opacity:.6; }

/* === 章节导航（上/下翻页）=== */
.chapter-nav { display: flex; justify-content: space-between; margin: 32px 0 16px; gap: 12px; }
.chapter-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; color: var(--text) !important; font-size: .88rem; text-decoration: none !important; transition: border-color .15s; }
.chapter-nav a:hover { border-color: var(--accent); color: var(--accent) !important; }
.chapter-nav .nav-disabled { opacity: .3; pointer-events: none; }

/* ============================================================
   阅读器变量 & 设置面板
   ============================================================ */
.chapter-content {
    --reader-font-size: 18px;
    --reader-line-height: 1.8;
    --reader-bg: transparent;
    --reader-text: inherit;
    --reader-width: 800px;

    font-size: var(--reader-font-size) !important;
    line-height: var(--reader-line-height) !important;
    max-width: var(--reader-width);
    margin: 0 auto;
    padding: 24px 20px;
    border-radius: 8px;
    background: var(--reader-bg);
    color: var(--reader-text);
    transition: background .2s, color .2s;
}
.chapter-content p { margin: 0 0 1.1em; }

/* 章节工具栏 */
.chapter-toolbar {
    display: flex; justify-content: center; gap: 10px;
    margin-top: 14px; flex-wrap: wrap;
}
.reader-fab-inline {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 18px; border-radius: 20px;
    font-size: .85rem; font-weight: 500; font-family: inherit;
    background: var(--accent-bg); border: 1px solid var(--accent-border);
    color: var(--accent); cursor: pointer;
    transition: all .15s;
}
.reader-fab-inline:hover { background: var(--accent-bg-hover); }

/* 设置面板 */
.reader-panel {
    position: fixed; bottom: 84px; right: 24px; z-index: 501;
    width: 300px; max-width: 90vw;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: var(--shadow-dropdown);
    overflow: hidden;
}
.reader-panel-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px; border-bottom: 1px solid var(--border);
    font-size: .95rem; font-weight: 600; color: var(--text-bright);
}
.reader-panel-close {
    background: none; border: none; color: var(--text-dim);
    font-size: 1rem; cursor: pointer; padding: 2px 6px; border-radius: 4px;
}
.reader-panel-close:hover { color: var(--text); background: var(--accent-bg); }

.reader-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px; border-bottom: 1px solid var(--border-light);
}
.reader-row:last-child { border-bottom: none; }
.reader-label { font-size: .82rem; color: var(--text-dim); white-space: nowrap; }
.reader-controls { display: flex; align-items: center; gap: 8px; }
.reader-val { font-size: .8rem; color: var(--text); min-width: 36px; text-align: center; }

.reader-btn-sm {
    padding: 4px 10px; border-radius: 5px; font-size: .78rem; font-weight: 600;
    background: var(--bg); border: 1px solid var(--border); color: var(--text);
    cursor: pointer; transition: all .12s;
}
.reader-btn-sm:hover { border-color: var(--accent); color: var(--accent); }
.reader-btn-sm.active { background: var(--accent); border-color: var(--accent); color: var(--text-white); }

/* 背景色块 */
.reader-swatches { display: flex; gap: 6px; }
.reader-swatch {
    width: 32px; height: 32px; border-radius: 6px; border: 2px solid var(--border);
    cursor: pointer; font-size: .6rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .12s;
}
.reader-swatch:hover { border-color: var(--accent); }
.reader-swatch.active { border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--accent-shadow); }

/* 滑动条 */
.reader-slider {
    width: 100px; height: 4px; -webkit-appearance: none; appearance: none;
    background: var(--border); border-radius: 2px; outline: none; cursor: pointer;
}
.reader-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
    background: var(--accent); cursor: pointer;
}

.reader-reset-btn {
    padding: 6px 16px; border-radius: 6px; font-size: .8rem;
    background: none; border: 1px solid var(--border);
    color: var(--text-dim); cursor: pointer; transition: all .12s;
}
.reader-reset-btn:hover { border-color: var(--accent); color: var(--accent); }

/* 声音选择下拉 */
.reader-select {
    background: var(--bg-input); border: 1px solid var(--border-input);
    color: var(--text); border-radius: 6px; padding: 5px 10px;
    font-size: .82rem; cursor: pointer; font-family: inherit;
    min-width: 140px;
}

@media (max-width: 480px) {
    .chapter-content { padding: 16px 12px; }
    .reader-panel { right: 8px; bottom: 80px; width: 280px; }
}

/* ============================================================
   TTS 朗读
   /* TTS 朗读 */
   .tts-start-btn {
       display: inline-block; margin-top: 0;
       padding: 6px 18px; border-radius: 20px;
       font-size: .85rem; font-weight: 500;
       background: var(--accent-bg); border: 1px solid var(--accent-border);
       color: var(--accent); cursor: pointer;
       transition: all .15s; font-family: inherit;
   }
   .tts-start-btn:hover { background: var(--accent-bg-hover); }
   .tts-start-btn:disabled { opacity: .6; cursor: wait; }

   .tts-bar {
       position: fixed; bottom: 0; left: 0; right: 0; z-index: 600;
       display: flex; align-items: center; gap: 12px;
       padding: 10px 20px;
       background: var(--bg-card); border-top: 1px solid var(--border);
       box-shadow: 0 -4px 16px var(--bg-overlay);
   }
   .tts-btn {
       width: 36px; height: 36px; border-radius: 50%;
       background: var(--accent); border: none; color: var(--text-white);
       font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
       transition: background .15s; flex-shrink: 0;
   }
   .tts-btn:hover { background: var(--accent-hover); }
   #tts-stop { background: var(--bg); border: 1px solid var(--border); color: var(--text); }
   #tts-stop:hover { color: var(--text-error); border-color: var(--text-error); }
   .tts-info { flex: 1; font-size: .82rem; color: var(--text-dim); text-align: center; }

/* ===== 自定义登录/注册页 ===== */
.ficport-auth-wrap { width: 100%;
    display: flex; justify-content: center; align-items: flex-start;
    min-height: 60vh; padding: 48px 20px;
}
.ficport-auth-card {
    width: 420px; max-width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 40px 32px;
    box-shadow: var(--shadow-card);
}
.ficport-auth-header { text-align: center; margin-bottom: 28px; }
.ficport-auth-title { font-size: 1.5rem; font-weight: 700; color: var(--text-bright); margin: 0 0 8px; }
.ficport-auth-subtitle { font-size: .85rem; color: var(--text-dim); margin: 0; }

.ficport-auth-error {
    background: var(--error-bg); border: 1px solid var(--error-border-form);
    color: var(--text-error); border-radius: 8px;
    padding: 12px 16px; margin-bottom: 20px; font-size: .88rem; line-height: 1.5;
}

.ficport-auth-form { display: flex; flex-direction: column; gap: 18px; }
.ficport-field { display: flex; flex-direction: column; gap: 6px; position: relative; }
.ficport-field label { font-size: .85rem; font-weight: 600; color: var(--text-bright); }
.ficport-field input[type="text"],
.ficport-field input[type="password"],
.ficport-field input[type="email"] {
    background: var(--bg-input); border: 1px solid var(--border-input);
    border-radius: 8px; color: var(--text-bright); padding: 12px 14px;
    font-size: 1rem; width: 100%; box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.ficport-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-shadow); outline: none; }
.ficport-field input.valid { border-color: var(--text-success) !important; }
.ficport-field input.invalid { border-color: var(--text-error) !important; }

.ficport-field-row { display: flex; align-items: center; }
.ficport-remember { font-size: .85rem; color: var(--text-dim); cursor: pointer; display: flex; align-items: center; gap: 6px; }
.ficport-remember input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }

.ficport-pwd-wrap { position: relative; }
.ficport-pwd-wrap input { padding-right: 44px !important; }
.ficport-pwd-toggle {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    background: transparent; border: none; cursor: pointer;
    font-size: 1.2rem; padding: 8px; color: var(--text-dim);
    line-height: 1; transition: color .15s;
}
.ficport-pwd-toggle:hover { color: var(--text-bright); }

.ficport-btn-primary {
    background: var(--accent); border: none; border-radius: 8px;
    color: var(--text-white); padding: 14px 24px;
    font-size: 1rem; font-weight: 600; cursor: pointer;
    transition: background .15s; width: 100%; margin-top: 8px;
}
.ficport-btn-primary:hover { background: var(--accent-hover); }
.ficport-btn-primary:disabled { background: var(--btn-secondary-bg); color: var(--text-dim); cursor: not-allowed; }

.ficport-auth-footer { text-align: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-light); }
.ficport-auth-footer p { margin: 0; font-size: .85rem; color: var(--text-dim); }
.ficport-auth-footer a { color: var(--accent); text-decoration: none; font-weight: 500; }
.ficport-auth-footer a:hover { color: var(--accent-hover); }

/* 注册页密码规则 */
.ficport-pw-rules {
    margin: 4px 0 0; padding: 10px 14px;
    background: var(--accent-bg-light); border-radius: 8px; list-style: none;
}
.ficport-pw-rules li { font-size: .78rem; color: var(--text-dim); padding: 2px 0; transition: color .2s; }
.ficport-pw-rules li.pass { color: var(--text-success); }
.ficport-pw-rules li.fail { color: var(--text-error); }
.ficport-pw-rules li::before { display: inline-block; width: 16px; margin-right: 4px; text-align: center; }
.ficport-pw-rules li.pass::before { content: '\2713'; }
.ficport-pw-rules li.fail::before { content: '\2717'; }
.ficport-pw-rules li.pending::before { content: '\25CB'; }

/* 校验状态 */
.ficport-field-status {
    position: absolute; right: 12px; top: 36px;
    font-size: .78rem; font-weight: 600; pointer-events: none;
}
.ficport-field-status.valid { color: var(--text-success); }
.ficport-field-status.invalid { color: var(--text-error); }
.ficport-field-status.checking { color: var(--text-dim); }

.ficport-field-msg { font-size: .78rem; margin: 2px 0 0; padding: 0; }
.ficport-field-msg.error { color: var(--text-error); }
.ficport-field-msg.success { color: var(--text-success); }

.ficport-auth-success {
    background: var(--success-bg); border: 1px solid var(--success-border);
    color: var(--text-success); border-radius: 8px;
    padding: 12px 16px; margin-bottom: 20px; font-size: .88rem;
}

/* ===== 会员中心 ===== */
.ficport-account-wrap { max-width: 680px; margin: 0 auto; padding: 36px 16px; }
.ficport-account-section { margin-bottom: 28px; }
.ficport-section-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text); margin: 0 0 10px 4px; font-weight: 600; opacity: .7; }
.ficport-account-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.ficport-account-avatar { flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--bg-cover-ph); }
.ficport-account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ficport-account-info { flex: 1; min-width: 200px; }
.ficport-account-welcome { font-size: 1rem; color: var(--text-bright); margin: 0 0 6px; }
.ficport-account-detail { font-size: .82rem; color: var(--text-dim); margin: 2px 0; }
.ficport-account-actions { flex-shrink: 0; }
.ficport-account-link { font-size: .82rem; color: var(--accent); text-decoration: none; }
.ficport-account-link:hover { text-decoration: underline; }
.ficport-account-sep { color: var(--border); margin: 0 6px; font-size: .78rem; }
.ficport-account-status { font-size: .9rem; color: var(--text); margin: 0; }
.ficport-account-status.active { color: #22c55e; }

@media (max-width: 640px) {
    .ficport-account-card { flex-direction: column; align-items: flex-start; }
    .ficport-account-actions { margin-top: 12px; }
}

.novel-table .col-rating { text-align: right; white-space: nowrap; }

.novel-table .col-chapters { text-align: right; white-space: nowrap; }

/* === Listing search bar === */
.listing-search {
    display: flex;
    gap: 8px;
    max-width: 480px;
    margin-bottom: 20px;
}
.listing-search-input {
    flex: 1;
    padding: 10px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 6px;
    color: var(--text-bright);
    font-size: 15px;
    outline: none;
    transition: border-color .2s;
}
.listing-search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-shadow);
}
.listing-search-input::placeholder {
    color: var(--text-dim);
}
.listing-search-btn {
    padding: 10px 20px;
    background: var(--accent);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    transition: background .2s;
}
.listing-search-btn:hover {
    background: var(--accent-hover);
}

/* ===== RTL Support (Arabic) ===== */
[dir="rtl"] .nav-inner li:last-child { margin-left: 0; margin-right: auto; }
[dir="rtl"] .nav-dropdown-menu { right: auto; left: 0; }
[dir="rtl"] .novel-table th { text-align: right; }
[dir="rtl"] .meta-paywall-info { margin-left: 0; margin-right: auto; }
[dir="rtl"] .ficport-auth-form input[type="text"],
[dir="rtl"] .ficport-auth-form input[type="email"],
[dir="rtl"] .ficport-auth-form input[type="password"] { direction: rtl; text-align: right; }
[dir="rtl"] .search-input { direction: rtl; text-align: right; }
[dir="rtl"] .h-card-body { align-items: flex-end; }
[dir="rtl"] .h-card-genre { text-align: right; }
[dir="rtl"] input, [dir="rtl"] textarea { direction: rtl; }