/* ── 表单 ─────────────────────────────────────────────────── */

.novel-form-wrap {
    padding: 0.75rem 0;
    /* 所有直接子元素（grid / tag-selector / button）统一 flex gap，消除多机制导致的间距不一致 */
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    /* 覆盖 pico 默认间距，让 input/select/button 整体缩小 */
    --pico-form-element-spacing-vertical:   0.35rem;
    --pico-form-element-spacing-horizontal: 0.65rem;
    /* 去掉 pico article 的背景和边框，融入页面 */
    background: transparent;
    border: none;
    box-shadow: none;
}
.novel-form-wrap .grid { gap: 0.4rem; margin: 0; }
.novel-form-wrap .grid + .grid { margin-top: 0; }
.novel-form-wrap label { margin-bottom: 0; font-size: 0.8rem; }
.novel-form-wrap input[type="text"],
.novel-form-wrap select { font-size: 0.875rem; }

/* select 和 status-toggle 的高度由各自的 padding + line-height 决定，pico 已处理一致 */

.status-toggle {
    display: flex; width: 100%;
    /* pico 对 input/select 自动加：
         margin-top:  calc(--pico-spacing * 0.25)  ← via label > :where(input,select)
         margin-bottom: var(--pico-spacing)         ← via 直接选择器
       .status-toggle 是 div，两条规则均不覆盖，需手动补齐，
       否则连载状态 → 标签 之间只有 flex gap (0.4rem)，
       而其他字段之间有 1rem margin-bottom + gap = 1.4rem，视觉上明显偏小。 */
    margin-top: calc(var(--pico-spacing) * 0.25);
    margin-bottom: var(--pico-spacing);
    border: var(--pico-border-width) solid var(--pico-form-element-border-color);
    border-radius: var(--pico-border-radius);
    overflow: hidden;
    background: var(--pico-form-element-background-color);
}
.status-opt {
    flex: 1; align-self: stretch;
    padding: var(--pico-form-element-spacing-vertical, 0.35rem) 0.5rem;
    border: none; border-right: var(--pico-border-width) solid var(--pico-form-element-border-color);
    border-radius: 0 !important;
    background: transparent; color: var(--pico-secondary);
    font-size: 0.875rem; white-space: nowrap; cursor: pointer;
    transition: background 0.15s, color 0.15s;
    margin: 0; line-height: var(--pico-line-height, 1.5);
    box-shadow: none !important;
}
.status-opt:last-child { border-right: none; }
.status-opt:hover:not(.active) { background: var(--pico-muted-background); }
.status-opt.active { background: var(--pico-primary); color: var(--pico-primary-inverse, #fff); border-right-color: var(--pico-primary); }

#search-btn { width: 100%; }

/* ── 标签选择器 ───────────────────────────────────────────── */
.tag-selector { margin: 0; }
.tag-selector-hint { font-size: 0.8rem; color: var(--pico-color); margin-bottom: 0.5rem; }
.tag-selector-hint small { color: var(--pico-muted-color); }

.category-btn-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.15rem; }

.cat-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
    border: var(--pico-border-width) solid var(--pico-border-color);
    background: transparent;
    color: var(--pico-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.cat-btn:hover { border-color: var(--pico-primary); color: var(--pico-primary); }
.cat-btn.open  { border-color: var(--pico-primary); color: var(--pico-primary); }

/* 一级分类按钮：5 种分类色 hover / open */
.cat-btn.cc-0:hover,.cat-btn.cc-0.open { border-color:#2563eb; color:#2563eb; }
.cat-btn.cc-1:hover,.cat-btn.cc-1.open { border-color:#7c3aed; color:#7c3aed; }
.cat-btn.cc-2:hover,.cat-btn.cc-2.open { border-color:#dc2626; color:#dc2626; }
.cat-btn.cc-3:hover,.cat-btn.cc-3.open { border-color:#db2777; color:#db2777; }
.cat-btn.cc-4:hover,.cat-btn.cc-4.open { border-color:#b45309; color:#b45309; }

.cat-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.2em; height: 1.2em; padding: 0 0.25em;
    border-radius: 1rem;
    background: var(--pico-primary);
    color: #fff;
    font-size: 0.65em; font-weight: 700;
}
/* 统计数字 badge：5 种分类色 */
.cat-btn.cc-0 .cat-badge { background:#2563eb; }
.cat-btn.cc-1 .cat-badge { background:#7c3aed; }
.cat-btn.cc-2 .cat-badge { background:#dc2626; }
.cat-btn.cc-3 .cat-badge { background:#db2777; }
.cat-btn.cc-4 .cat-badge { background:#b45309; }

#tag-panels { margin-bottom: 0.35rem; }

.tag-panel {
    display: none; flex-wrap: wrap; gap: 0.35rem;
    padding: 0.3rem 0;
    background: transparent;
    margin-bottom: 0;
}
.tag-panel.open { display: flex; }

.tag-label {
    display: inline-flex; align-items: center; gap: 0.2rem;
    padding: 0.15rem 0.6rem;
    border-radius: 1rem;
    border: var(--pico-border-width) solid var(--pico-border-color);
    color: var(--pico-secondary);
    font-size: 0.78rem;
    cursor: pointer; user-select: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.tag-label:hover { border-color: var(--pico-primary); }
.tag-label.checked { background: var(--pico-primary); color: #fff; border-color: var(--pico-primary); }
/* 二级标签选中态：5 种分类色 */
.tag-label.cc-0.checked { background:#2563eb; border-color:#2563eb; color:#fff; }
.tag-label.cc-1.checked { background:#7c3aed; border-color:#7c3aed; color:#fff; }
.tag-label.cc-2.checked { background:#dc2626; border-color:#dc2626; color:#fff; }
.tag-label.cc-3.checked { background:#db2777; border-color:#db2777; color:#fff; }
.tag-label.cc-4.checked { background:#b45309; border-color:#b45309; color:#fff; }
.tag-label.cc-0:hover { border-color:#2563eb; }
.tag-label.cc-1:hover { border-color:#7c3aed; }
.tag-label.cc-2:hover { border-color:#dc2626; }
.tag-label.cc-3:hover { border-color:#db2777; }
.tag-label.cc-4:hover { border-color:#b45309; }
.tag-label input[type="checkbox"] { display: none; }

/* ── 封面图（loading / error 态）────────────────────────────
   4.5 cover loading shimmer */
.cover-wrap {
    position: relative;
    background: var(--pico-muted-background);
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}
.cover-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; }

.cover-wrap.loading::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--pico-color) 18%, transparent) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: cover-shimmer 1.4s infinite;
}
@keyframes cover-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
.cover-wrap.error img { opacity: 0; }
.cover-wrap.error::before {
    content: '📚';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
}

.cover-sm { width: 70px; aspect-ratio: 3/4; }
.cover-lg { width: 160px; aspect-ratio: 3/4; }

/* ── Badge & 标签 pill ────────────────────────────────────── */
.status-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem; border-radius: 1rem;
    font-size: 0.72rem; font-weight: 600; white-space: nowrap;
}
.status-ongoing  {
    background: color-mix(in srgb, var(--pico-primary) 12%, transparent);
    color: var(--pico-primary);
    border: 1px solid color-mix(in srgb, var(--pico-primary) 45%, transparent);
}
.status-finished {
    background: color-mix(in srgb, var(--pico-muted-color) 10%, transparent);
    color: var(--pico-muted-color);
    border: 1px solid color-mix(in srgb, var(--pico-muted-color) 35%, transparent);
}

/* 详情卡片内连载状态 + 评分徽章水平排列 */
.badge-row {
    display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap;
}
/* 包裹状态徽章的槽位：使其作为 flex item 与 rating-badge 居中对齐 */
#status-slot { display: inline-flex; align-items: center; }
.rating-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem; border-radius: 1rem;
    font-size: 0.72rem; font-weight: 600; white-space: nowrap;
    /* 琥珀/金黄色系，评分场景通用色 */
    background: color-mix(in srgb, #eab308 14%, transparent);
    color: #b45309;
    border: 1px solid color-mix(in srgb, #eab308 50%, transparent);
    text-decoration: none;
    cursor: pointer;
}
/* <a> 形态需显式指定颜色，绕过 pico.css 对 <a> 的 --pico-color 重写（见 E11） */
a.rating-badge { color: #b45309 !important; }
a.rating-badge:hover { text-decoration: underline; }
@media (prefers-color-scheme: dark) {
    .rating-badge { color: #facc15; }
    a.rating-badge { color: #facc15 !important; }
}

.tag-pill {
    display: inline-block;
    padding: 0.1rem 0.45rem; border-radius: 1rem;
    font-size: 0.72rem;
    background: var(--pico-muted-background);
    color: var(--pico-muted-color);
    border: var(--pico-border-width) solid var(--pico-border-color);
    margin: 0.1rem 0.05rem;
}

/* ── 列表视图 ─────────────────────────────────────────────── */
.result-summary { font-size: 0.85rem; color: var(--pico-muted-color); margin: 0.5rem 0 0.75rem; }

.novel-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.novel-card {
    display: flex; gap: 0.75rem;
    padding: 0.75rem;
    border: var(--pico-border-width) solid var(--pico-border-color);
    border-radius: var(--pico-border-radius);
    background: var(--pico-card-background-color, var(--pico-background-color));
    cursor: pointer;
    transition: border-color 0.15s, transform 0.1s;
}
.novel-card:hover { border-color: var(--pico-primary); transform: translateY(-1px); }

.novel-card-info {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 0.3rem;
}
.novel-card-title {
    font-weight: 600; font-size: 0.88rem; line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.novel-card-meta { font-size: 0.78rem; color: var(--pico-muted-color); }

/* ── 分页 ─────────────────────────────────────────────────── */
.novel-pagination {
    display: flex; justify-content: center; align-items: center;
    flex-wrap: wrap; gap: 0.3rem;
    margin-top: 1.5rem;
}
.page-btn {
    min-width: 2rem; height: 2rem; padding: 0 0.5rem;
    border-radius: 4px;
    border: var(--pico-border-width) solid var(--pico-border-color);
    background: transparent; color: var(--pico-secondary);
    font-size: 0.85rem; cursor: pointer;
    transition: border-color 0.12s, color 0.12s;
}
.page-btn:hover:not(:disabled):not(.active) { border-color: var(--pico-primary); color: var(--pico-primary); }
.page-btn.active { background: var(--pico-primary); color: #fff; border-color: var(--pico-primary); cursor: default; }
.page-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.page-ellipsis { color: var(--pico-muted-color); padding: 0 0.15rem; line-height: 2rem; }

/* ── 详情卡片 ─────────────────────────────────────────────── */
.back-btn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: none; border: none; padding: 0;
    color: var(--pico-primary); font-size: 0.875rem;
    cursor: pointer; margin-bottom: 1rem;
}
.back-btn:hover { text-decoration: underline; }

.novel-detail {
    display: grid; grid-template-columns: 160px 1fr;
    gap: 1.5rem; align-items: start;
}
@media (max-width: 540px) {
    .novel-detail { grid-template-columns: 1fr; }
    .cover-lg { width: 100px; }
}

.novel-detail-meta { display: flex; flex-direction: column; gap: 0.6rem; }
.novel-detail-title { font-size: 1.2rem; font-weight: 700; margin: 0; line-height: 1.3; }

.meta-row {
    display: flex; gap: 0.5rem;
    align-items: baseline; flex-wrap: wrap;
    font-size: 0.875rem;
}
.meta-label { color: var(--pico-muted-color); white-space: nowrap; min-width: 4em; }

.novel-intro {
    font-size: 0.875rem; line-height: 1.65; color: var(--pico-muted-color);
}
.intro-row { align-items: stretch; }
.intro-head { display: flex; align-items: center; gap: 0.35rem; }
.intro-edit-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.45rem; height: 1.45rem; min-width: 1.45rem;
    margin: 0; padding: 0;
    font-size: 0.82rem; line-height: 1;
    background: transparent; color: var(--pico-primary);
    border: var(--pico-border-width) solid var(--pico-primary);
    border-radius: 999px;
}
.intro-empty { color: var(--pico-muted-color); }
.ai-summary-row { margin-top: 0.25rem; }
.ai-summary-box {
    width: 100%;
    padding: 0.75rem 0.85rem;
    background: color-mix(in srgb, var(--pico-background-color) 94%, var(--pico-muted-color) 6%);
    border: var(--pico-border-width) solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
}
.ai-summary-body {
    font-size: 0.875rem; line-height: 1.65; color: var(--pico-muted-color);
}
.ai-summary-pager {
    display: flex;
    margin: 0.75rem -0.85rem -0.75rem;
    border-top: var(--pico-border-width) solid var(--pico-muted-border-color);
}
.ai-summary-pager button,
.ai-summary-select-wrap {
    flex: 1 1 0;
}
.ai-summary-pager button {
    width: auto;
    margin: 0;
    padding: 0.45rem 0.35rem;
    border: 0;
    border-right: var(--pico-border-width) solid var(--pico-muted-border-color);
    border-radius: 0;
    background: transparent;
    color: var(--pico-muted-color);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
}
.ai-summary-pager button:last-child { border-right: 0; }
.ai-summary-select-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.ai-summary-select-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 1.2rem 0.45rem 0.35rem;
    color: var(--pico-color);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    pointer-events: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ai-summary-page-select {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0.45rem 1.2rem 0.45rem 0.35rem;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    color: transparent;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-align-last: center;
    box-shadow: none;
}
.ai-summary-page-select:hover {
    background-color: color-mix(in srgb, var(--pico-muted-color) 8%, transparent);
}
.ai-summary-page-select option {
    color: var(--pico-color);
    background: var(--pico-background-color);
}
.ai-summary-pager button:hover:not(:disabled) {
    background: color-mix(in srgb, var(--pico-muted-color) 8%, transparent);
    color: var(--pico-color);
}
.ai-summary-pager button:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}
@media (max-width: 540px) {
    .ai-summary-pager button,
    .ai-summary-page-select,
    .ai-summary-select-label { font-size: 0.82rem; }
}
.ai-summary-edit-btn,
.ai-summary-ai-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.45rem; height: 1.45rem; min-width: 1.45rem;
    margin: 0; padding: 0;
    line-height: 1;
    background: transparent; color: var(--pico-muted-color);
    border: none;
    border-radius: 999px;
}
.ai-summary-edit-btn:hover,
.ai-summary-ai-btn:hover { color: var(--pico-primary); background: transparent; }
.ai-summary-icon {
    display: block;
    flex: none;
    width: 1rem; height: 1rem;
    background-color: currentColor;
    -webkit-mask-image: var(--ai-summary-icon-url);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-image: var(--ai-summary-icon-url);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
}
.ai-summary-edit-icon { --ai-summary-icon-url: url("../../img/novel/ai-summary-edit.png"); }
.ai-summary-ai-icon { --ai-summary-icon-url: url("../../img/novel/ai-summary-ai.png"); }
.ai-summary-dialog {
    width: min(34rem, calc(100vw - 2rem));
    padding: 1rem;
}
.ai-summary-dialog::backdrop { background: rgba(0,0,0,.35); }
.ai-summary-dialog h3 { margin: 0 0 0.75rem; font-size: 1rem; }
.ai-summary-dialog label { margin-bottom: 0.45rem; font-size: 0.875rem; }
.ai-summary-dialog input,
.ai-summary-dialog select { margin-bottom: 0.35rem; }
.ai-summary-dialog-actions {
    display: flex; justify-content: flex-end; gap: 0.5rem;
    margin-top: 0.75rem;
}
.ai-summary-dialog-actions button {
    width: auto; margin: 0; padding: 0.35rem 0.8rem; font-size: 0.82rem;
}
.ai-summary-progress {
    margin-top: 0.55rem;
    font-size: 0.82rem;
    color: var(--pico-muted-color);
}
.ai-summary-progress progress {
    width: 100%;
    height: 0.55rem;
    margin: 0.25rem 0 0;
}
.ai-summary-error {
    margin: 0.35rem 0 0;
    color: #dc2626;
    font-size: 0.82rem;
}
.ai-summary-body h1 {
    margin: 0 0 0.65rem;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--pico-color);
}
.ai-summary-body h2 {
    margin: 0.75rem 0 0.5rem;
    font-size: 0.84rem;
    line-height: 1.45;
    font-weight: 600;
    color: var(--pico-color);
}
.ai-summary-body h3 {
    margin: 0.75rem 0 0.45rem;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--pico-color);
}
.ai-summary-body p,
.ai-summary-body ul,
.ai-summary-body ol,
.ai-summary-body blockquote,
.ai-summary-body pre { margin: 0 0 0.55rem; }
.ai-summary-body > :last-child { margin-bottom: 0; }
.ai-summary-body ul,
.ai-summary-body ol { padding-left: 1.25rem; }
.ai-summary-body blockquote {
    padding-left: 0.75rem;
    border-left: 3px solid var(--pico-muted-border-color, var(--pico-border-color));
}
.ai-summary-body pre {
    padding: 0.6rem;
    overflow-x: auto;
    background: var(--pico-background-color);
    border-radius: var(--pico-border-radius);
}
.ai-summary-body code { font-size: 0.85em; }
.novel-intro p,
.novel-intro ul,
.novel-intro ol,
.novel-intro blockquote,
.novel-intro pre { margin: 0 0 0.5rem; }
.novel-intro > :last-child { margin-bottom: 0; }
.novel-intro ul,
.novel-intro ol { padding-left: 1.25rem; }
.novel-intro blockquote {
    padding-left: 0.75rem;
    border-left: 3px solid var(--pico-muted-border-color, var(--pico-border-color));
}
.novel-intro pre {
    padding: 0.6rem;
    overflow-x: auto;
    background: var(--pico-muted-background);
    border-radius: var(--pico-border-radius);
}
.novel-intro code { font-size: 0.85em; }
.intro-editing { width: 100%; align-self: stretch; }
.intro-editing textarea { width: 100%; max-width: none; min-height: 12rem; margin-bottom: 0.5rem; font-size: 0.875rem; resize: vertical; }
.intro-editor-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.intro-editor-actions button { width: auto; margin: 0; padding: 0.35rem 0.8rem; font-size: 0.82rem; }

/* ── 空状态 / loading ─────────────────────────────────────── */
.result-empty  { text-align: center; padding: 3rem 1rem; color: var(--pico-muted-color); }
.result-loading{ text-align: center; padding: 3rem 1rem; }

/* ── toast ────────────────────────────────────────────────── */
#novel-toast {
    position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(2rem);
    background: rgba(30,30,30,.88); color: #fff;
    padding: .45rem 1.1rem; border-radius: 2rem; font-size: .82rem;
    opacity: 0; pointer-events: none;
    transition: opacity .25s, transform .25s;
    z-index: 9999; white-space: nowrap;
}
#novel-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── 标签分类底色（详情卡片，按一级分类）──────────────────── */
.tag-pill.tc-0 { background: rgba(59,130,246,.1);  color: #2563eb; border-color: rgba(59,130,246,.4);  } /* 日常系 */
.tag-pill.tc-1 { background: rgba(139,92,246,.1);  color: #7c3aed; border-color: rgba(139,92,246,.4);  } /* 幻想系 */
.tag-pill.tc-2 { background: rgba(239,68,68,.1);   color: #dc2626; border-color: rgba(239,68,68,.4);   } /* 黑深残 */
.tag-pill.tc-3 { background: rgba(236,72,153,.1);  color: #db2777; border-color: rgba(236,72,153,.4);  } /* 人物属性 */
.tag-pill.tc-4 { background: rgba(245,158,11,.1);  color: #b45309; border-color: rgba(245,158,11,.5);  } /* 特殊属性 */