/* =====================================================================
   前台样式 · 个人网站
   ===================================================================== */

:root {
    --c-primary: #2563eb;
    --c-primary-dark: #1d4ed8;
    --c-primary-soft: #eff5ff;
    --c-accent: #0ea5e9;
    --c-text: #1f2937;
    --c-text-sub: #4b5563;
    --c-text-light: #8b95a5;
    --c-border: #e8ecf3;
    --c-bg: #f5f7fb;
    --c-card: #ffffff;
    --c-footer: #1b2434;
    --radius: 14px;
    --shadow: 0 6px 22px rgba(23, 37, 84, .07);
    --shadow-hover: 0 14px 34px rgba(23, 37, 84, .13);
    /* 为右侧的字号控件预留的空间（控件实测宽 218px），避免与居中的正文信息重叠 */
    --jc-readsize-space: 232px;
}

body.theme-green { --c-primary: #0f9d58; --c-primary-dark: #0b7a44; --c-primary-soft: #e9f8f0; --c-accent: #10b981; }
body.theme-red { --c-primary: #dc2626; --c-primary-dark: #b91c1c; --c-primary-soft: #fdeeee; --c-accent: #f97316; }
body.theme-dark { --c-primary: #6366f1; --c-primary-dark: #4f46e5; --c-primary-soft: #eef0ff; --c-accent: #8b5cf6; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    /* 粘性页脚：内容不足时页脚也贴住视口底部 */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    font-size: 15px;
    line-height: 1.7;
}

a { color: inherit; text-decoration: none; transition: color .16s; }
img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }

.jc-wrap { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 24px; }

/* ---------------------------------------------------------------------
   顶栏
   --------------------------------------------------------------------- */
/**
 * 顶栏与下面的菜单栏同色（白底），连成一片
 *
 * 底下那条细线是用来分隔的：两块都是白底，没有线就糊成一整块了。
 * 文字/链接也要跟着换成深色，否则在浅底上看不见。
 */
.jc-topbar {
    flex: 0 0 auto;
    background: var(--c-card);
    color: var(--c-text-light);
    font-size: 13px;
    border-bottom: 1px solid var(--c-border);
}
.jc-topbar .jc-wrap { display: flex; align-items: center; gap: 14px; height: 38px; }
.jc-topbar a { color: var(--c-text-sub); }
.jc-topbar a:hover { color: var(--c-primary); }
.jc-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* 顶栏访客数 */
.jc-topbar-visit {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 10px; border-radius: 20px;
    background: var(--c-bg);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.jc-topbar-visit b { font-weight: 600; color: var(--c-text); }
.jc-visit-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18);
}

.jc-theme-switch { display: flex; gap: 6px; }
.jc-theme-switch button {
    width: 16px; height: 16px; border-radius: 50%; border: 2px solid transparent;
    cursor: pointer; padding: 0;
}
.jc-theme-switch button[data-theme="blue"] { background: #2563eb; }
.jc-theme-switch button[data-theme="green"] { background: #0f9d58; }
.jc-theme-switch button[data-theme="red"] { background: #dc2626; }
.jc-theme-switch button[data-theme="dark"] { background: #6366f1; }
.jc-theme-switch button.active { border-color: var(--c-text-light); }

/* ---------------------------------------------------------------------
   页头与导航
   --------------------------------------------------------------------- */
.jc-header {
    flex: 0 0 auto;
    background: var(--c-card);
    box-shadow: 0 1px 0 var(--c-border);
    position: sticky;
    top: 0;
    z-index: 60;
}
.jc-header-main { display: flex; align-items: center; gap: 20px; height: 74px; }

.jc-logo { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.jc-logo-mark {
    width: 38px; height: 38px; border-radius: 11px;
    background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
    color: #fff; font-weight: 700; font-size: 17px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.jc-logo-mark img { width: 100%; height: 100%; object-fit: cover; }
.jc-logo-text { font-size: 19px; font-weight: 700; letter-spacing: .5px; }
.jc-logo-sub { display: block; font-size: 11px; font-weight: 400; color: var(--c-text-light); letter-spacing: 1px; }

.jc-nav { flex: 1; min-width: 0; }
.jc-nav-list { display: flex; align-items: center; gap: 2px; }
.jc-nav-item { position: relative; }
.jc-nav-link {
    display: block; padding: 8px 14px; border-radius: 9px;
    font-size: 15px; color: var(--c-text-sub); white-space: nowrap;
}
.jc-nav-link:hover { background: var(--c-primary-soft); color: var(--c-primary); }
.jc-nav-item.active > .jc-nav-link { background: var(--c-primary); color: #fff; }

.jc-submenu {
    position: absolute; top: calc(100% + 8px); left: 0; min-width: 168px;
    background: #fff; border-radius: 12px; padding: 8px;
    box-shadow: 0 16px 40px rgba(23, 37, 84, .14);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: all .18s ease; z-index: 70;
}
.jc-nav-item:hover .jc-submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.jc-submenu a {
    display: block; padding: 8px 12px; border-radius: 8px;
    font-size: 14px; color: var(--c-text-sub);
}
.jc-submenu a:hover { background: var(--c-primary-soft); color: var(--c-primary); }

.jc-nav-toggle {
    display: none; margin-left: auto; border: 0; background: var(--c-primary-soft);
    color: var(--c-primary); width: 40px; height: 40px; border-radius: 11px;
    font-size: 19px; cursor: pointer;
}

.jc-search { flex: 0 0 auto; display: flex; align-items: center; }
/* 方形：原来 input 和 button 各占半边的 19px 圆角，拼起来是一整颗胶囊 */
.jc-search input {
    width: 168px; height: 38px; padding: 0 14px; border-radius: 4px 0 0 4px;
    border: 1px solid var(--c-border); border-right: 0; background: var(--c-bg);
    font-size: 14px; color: var(--c-text); outline: none;
}
.jc-search input:focus { background: #fff; border-color: var(--c-primary); }
.jc-search button {
    height: 38px; padding: 0 16px; border: 0; border-radius: 0 4px 4px 0;
    background: var(--c-primary); color: #fff; font-size: 14px; cursor: pointer;
}
.jc-search button:hover { background: var(--c-primary-dark); }
/* 搜索页那个大搜索框也保持方形，按钮跟着走（.jc-btn 默认 10px 圆角） */
.jc-search-form .jc-btn { border-radius: 4px; }

/* ---------------------------------------------------------------------
   通用区块
   --------------------------------------------------------------------- */
.jc-main { flex: 1 0 auto; padding: 26px 0 40px; }

.jc-section { margin-bottom: 30px; }
/**
 * 区块标题行
 *
 * 窄屏下「标题 + 说明 + 更多」一行放不下，允许换行；
 * 说明文字允许收缩（min-width:0），否则 flex 项的 min-content 会顶宽整行。
 */
.jc-section-head {
    display: flex; align-items: flex-end; gap: 12px; margin-bottom: 16px;
    flex-wrap: wrap;
}
.jc-section-title { font-size: 21px; position: relative; padding-left: 13px; }
.jc-section-title::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 4px; height: 19px; border-radius: 2px; background: var(--c-primary);
}
.jc-section-desc { color: var(--c-text-light); font-size: 13px; min-width: 0; }
.jc-section-more { margin-left: auto; font-size: 13px; color: var(--c-text-light); white-space: nowrap; }
.jc-section-more:hover { color: var(--c-primary); }

.jc-panel {
    background: var(--c-card); border-radius: var(--radius);
    padding: 20px; box-shadow: var(--shadow);
}

.jc-grid { display: grid; gap: 16px; }
.jc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jc-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.jc-empty-tip {
    background: var(--c-card); border-radius: var(--radius); padding: 46px 20px;
    text-align: center; color: var(--c-text-light); font-size: 14px;
}

/* 渐变占位图 */
.ph-cover {
    position: relative; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, .92); font-size: 15px; font-weight: 600;
    letter-spacing: 1px; overflow: hidden;
}
.ph-cover span { padding: 0 12px; text-align: center; }
.ph-grad-1 { background: linear-gradient(135deg, #3b82f6, #1e3a8a); }
.ph-grad-2 { background: linear-gradient(135deg, #f97316, #b91c1c); }
.ph-grad-3 { background: linear-gradient(135deg, #10b981, #065f46); }
.ph-grad-4 { background: linear-gradient(135deg, #8b5cf6, #4c1d95); }
.ph-grad-5 { background: linear-gradient(135deg, #06b6d4, #0e7490); }
.ph-grad-6 { background: linear-gradient(135deg, #ef4444, #7f1d1d); }
.ph-grad-7 { background: linear-gradient(135deg, #eab308, #a16207); }
.ph-grad-8 { background: linear-gradient(135deg, #ec4899, #831843); }

/* ---------------------------------------------------------------------
   首页 · 个人名片
   --------------------------------------------------------------------- */
.jc-hero {
    background: linear-gradient(120deg, var(--c-primary), var(--c-primary-dark));
    border-radius: 18px;
    color: #fff;
    padding: 34px 36px;
    margin-bottom: 26px;
    position: relative;
    overflow: hidden;
}
.jc-hero::after {
    content: ''; position: absolute; right: -60px; top: -70px;
    width: 260px; height: 260px; border-radius: 50%;
    background: rgba(255, 255, 255, .09);
}
.jc-hero::before {
    content: ''; position: absolute; right: 90px; bottom: -110px;
    width: 200px; height: 200px; border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}
.jc-hero-inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

.jc-hero-avatar {
    width: 92px; height: 92px; flex: 0 0 92px; border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    border: 3px solid rgba(255, 255, 255, .4);
    display: flex; align-items: center; justify-content: center;
    font-size: 34px; font-weight: 700; overflow: hidden;
}
.jc-hero-avatar img { width: 100%; height: 100%; object-fit: cover; }

.jc-hero-text { flex: 1; min-width: 240px; }
.jc-hero-text h1 { font-size: 26px; margin-bottom: 8px; }
.jc-hero-text p { margin: 0; opacity: .9; font-size: 14px; line-height: 1.8; }

.jc-hero-stats { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 18px; }
.jc-hero-stat b { display: block; font-size: 22px; line-height: 1.2; }
.jc-hero-stat span { font-size: 12px; opacity: .82; }

/* ---------------------------------------------------------------------
   文章卡片
   --------------------------------------------------------------------- */
.jc-card {
    background: var(--c-card); border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s;
    display: flex; flex-direction: column;
}
.jc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }

.jc-card-cover { aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-primary-soft); }
.jc-card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.jc-card:hover .jc-card-cover img { transform: scale(1.04); }

.jc-card-body { padding: 15px 17px 17px; flex: 1; display: flex; flex-direction: column; }
.jc-card-title {
    font-size: 16px; line-height: 1.5; margin-bottom: 8px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.jc-card:hover .jc-card-title { color: var(--c-primary); }
.jc-card-summary {
    font-size: 13px; color: var(--c-text-light); line-height: 1.7; margin-bottom: 12px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.jc-card-meta {
    margin-top: auto; display: flex; align-items: center; gap: 12px;
    font-size: 12px; color: var(--c-text-light);
}
.jc-card-meta .jc-tag { margin-left: auto; }

.jc-tag {
    display: inline-block; padding: 2px 9px; border-radius: 20px;
    background: var(--c-primary-soft); color: var(--c-primary);
    font-size: 12px; line-height: 18px;
}
.jc-tag-red { background: #fdecec; color: #dc2626; }
.jc-tag-green { background: #e8f8ef; color: #0f9d58; }
.jc-tag-orange { background: #fff5e6; color: #d97706; }

/* 文章横向条目 */
.jc-article-item {
    display: flex; gap: 16px; padding: 16px; background: var(--c-card);
    border-radius: var(--radius); box-shadow: var(--shadow);
    transition: transform .18s, box-shadow .18s;
}
.jc-article-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.jc-article-thumb { width: 190px; flex: 0 0 190px; aspect-ratio: 16/10; border-radius: 10px; overflow: hidden; background: var(--c-primary-soft); }
.jc-article-thumb img { width: 100%; height: 100%; object-fit: cover; }
.jc-article-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.jc-article-body h3 { font-size: 17px; margin-bottom: 8px; }
.jc-article-item:hover h3 { color: var(--c-primary); }
.jc-article-body p {
    margin: 0 0 10px; font-size: 13px; color: var(--c-text-light); line-height: 1.75;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.jc-list-stack { display: flex; flex-direction: column; gap: 14px; }

/* ---------------------------------------------------------------------
   动态时间轴
   --------------------------------------------------------------------- */
.jc-timeline { position: relative; padding-left: 26px; }
.jc-timeline::before {
    content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px;
    width: 2px; background: var(--c-border);
}
.jc-timeline-group { margin-bottom: 22px; }
.jc-timeline-date {
    position: relative; font-size: 14px; color: var(--c-text-light);
    margin-bottom: 14px; font-weight: 600;
}
.jc-timeline-date::before {
    content: ''; position: absolute; left: -24px; top: 8px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft);
}

.jc-moment {
    background: var(--c-card); border-radius: var(--radius); padding: 16px 18px;
    box-shadow: var(--shadow); margin-bottom: 12px;
}
.jc-moment-text { font-size: 15px; line-height: 1.8; white-space: pre-wrap; }
.jc-moment-images { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.jc-moment-images img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 9px; cursor: zoom-in; }
.jc-moment-images.one { grid-template-columns: minmax(0, 62%); }
.jc-moment-images.one img { aspect-ratio: 16/10; }
.jc-moment-images.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jc-moment-images.two img { aspect-ratio: 4/3; }
.jc-moment-foot {
    display: flex; align-items: center; gap: 14px; margin-top: 12px;
    font-size: 12px; color: var(--c-text-light);
}
.jc-moment-foot .jc-moment-tag { background: var(--c-bg); padding: 2px 9px; border-radius: 20px; }
/* 「详情」靠右，和左侧的时间/心情拉开 */
.jc-moment-more {
    margin-left: auto; font-size: 12.5px; color: var(--c-primary);
    display: inline-flex; align-items: center; gap: 2px;
}
.jc-moment-more:hover { text-decoration: underline; }
.jc-moment-more .layui-icon { font-size: 12px; }

/* ---------------------------------------------------------------------
   归档
   --------------------------------------------------------------------- */
/* 顶部横幅和分类页一致，用共用的 .jc-page-hero（主色渐变），这里只管内容 */

/* 类型筛选：沿用搜索页那套胶囊标签 */
.jc-archive-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.jc-archive-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 999px; font-size: 13px;
    background: var(--c-card); color: var(--c-text-sub);
    box-shadow: var(--shadow);
    transition: background .16s, color .16s;
}
.jc-archive-tab span { font-size: 12px; opacity: .7; font-variant-numeric: tabular-nums; }
.jc-archive-tab:hover { color: var(--c-primary); }
.jc-archive-tab.active { background: var(--c-primary); color: #fff; }
.jc-archive-tab.active span { opacity: .85; }

/**
 * 时间线
 *
 * 复用动态页那套「左侧竖线 + 圆点」的观感：分组标题上的圆点是主色实心，
 * 每条记录自己在竖线上也有一个小节点，鼠标经过时点亮。
 */
.jc-archive { position: relative; padding-left: 26px; }
.jc-archive::before {
    content: ''; position: absolute; left: 6px; top: 10px; bottom: 10px;
    width: 2px; background: var(--c-border);
}

.jc-archive-group { margin-bottom: 24px; }
.jc-archive-month {
    position: relative; display: flex; align-items: baseline; gap: 8px;
    margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--c-text);
}
.jc-archive-month::before {
    content: ''; position: absolute; left: -24px; top: 6px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft);
}
.jc-archive-month em { font-style: normal; font-size: 12px; font-weight: 400; color: var(--c-text-light); }

.jc-archive-list {
    list-style: none; margin: 0; padding: 0;
}

/**
 * 每条一行：日期 + 栏目 + 标题，不折行
 *
 * 一行的高度固定（行高 + 上下 padding），节点圆点也就跟着对齐到中线。
 */
/**
 * 每条一行：日期 + 栏目 + 标题 + 摘要，整行可点
 *
 * 外层 li 不留 padding，全部交给里面的 a——这样点击热区就是整行（含左右留白），
 * 而不是只有标题那几个字。
 */
.jc-archive-item { position: relative; }

.jc-archive-link {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px; border-radius: 10px;
    transition: background .16s;
}
.jc-archive-link:hover { background: var(--c-card); }

.jc-archive-node {
    position: absolute; left: -22px; top: 50%; margin-top: -4px;
    width: 8px; height: 8px; border-radius: 50%;
    background: #cbd5e1; box-shadow: 0 0 0 3px var(--c-bg);
    transition: background .16s;
}
.jc-archive-link:hover .jc-archive-node { background: var(--c-primary); }

.jc-archive-date {
    flex: 0 0 44px;
    font-size: 12.5px; color: var(--c-text-light);
    font-variant-numeric: tabular-nums;
}

.jc-archive-type {
    flex: 0 0 auto; font-size: 11.5px; line-height: 1.7;
    padding: 0 8px; border-radius: 20px;
    background: var(--c-bg); color: var(--c-text-light);
}
/* 每个栏目一个色，扫一眼就能分辨 */
.jc-archive-type.type-article { background: #eff5ff; color: #2563eb; }
.jc-archive-type.type-moment  { background: #fff7ed; color: #c2410c; }
.jc-archive-type.type-album   { background: #f0fdf4; color: #15803d; }
.jc-archive-type.type-novel   { background: #faf5ff; color: #7e22ce; }
.jc-archive-type.type-movie   { background: #fef2f2; color: #b91c1c; }
.jc-archive-type.type-video   { background: #ecfeff; color: #0e7490; }
.jc-archive-type.type-soft    { background: #f1f5f9; color: #475569; }
.jc-archive-type.type-music   { background: #fdf2f8; color: #be185d; }

/* 标题不压缩（最多占 55%），摘要吃掉剩余空间、放不下就省略 */
.jc-archive-title {
    flex: 0 0 auto; max-width: 55%;
    font-size: 14.5px; font-weight: 600; color: var(--c-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jc-archive-link:hover .jc-archive-title { color: var(--c-primary); }

.jc-archive-summary {
    flex: 1 1 0; min-width: 0;
    font-size: 13px; color: var(--c-text-light);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.jc-archive-empty { padding: 50px 20px; text-align: center; color: var(--c-text-light); }
.jc-archive-empty .layui-icon { font-size: 44px; color: #d3d8e0; }
.jc-archive-empty p { margin: 12px 0 0; font-size: 14px; }

/* ---------------------------------------------------------------------
   动态详情
   --------------------------------------------------------------------- */
.jc-moment-detail-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
    padding-bottom: 14px; border-bottom: 1px solid var(--c-border);
}
.jc-moment-detail-head time { font-size: 13px; color: var(--c-text-light); }
.jc-moment-detail-tags { display: flex; align-items: center; gap: 8px; }
.jc-moment-mood,
.jc-moment-place {
    font-size: 12px; padding: 2px 10px; border-radius: 20px;
    background: var(--c-primary-soft); color: var(--c-primary);
}
.jc-moment-place { background: var(--c-bg); color: var(--c-text-light); }
.jc-moment-detail-body { font-size: 15px; line-height: 2; color: var(--c-text); }
.jc-moment-detail-images {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px; margin-top: 18px;
}
.jc-moment-detail-images a { display: block; border-radius: 10px; overflow: hidden; }
.jc-moment-detail-images img {
    width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
    transition: transform .3s;
}
.jc-moment-detail-images a:hover img { transform: scale(1.04); }

/* ---------------------------------------------------------------------
   相册
   --------------------------------------------------------------------- */
.jc-album-card { position: relative; display: block; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.jc-album-card img, .jc-album-card .ph-cover { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .35s; }
.jc-album-card:hover img, .jc-album-card:hover .ph-cover { transform: scale(1.05); }
.jc-album-info {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 14px;
    background: linear-gradient(to top, rgba(9, 14, 26, .82), rgba(9, 14, 26, 0));
    color: #fff;
}
.jc-album-info h3 { font-size: 16px; margin-bottom: 3px; }
.jc-album-info span { font-size: 12px; opacity: .85; }

/**
 * 相册瀑布流
 *
 * 保留图片**真实宽高比**（不再裁成正方形）。宽高由服务端量好写在 img 的
 * width/height 上，所以图片没下载完也能占住正确高度，不会加载一张跳一次。
 *
 * 默认状态是可用的 CSS 网格（JS 没跑起来时的兜底）；
 * JS 加上 .is-ready 之后切成绝对定位，由脚本补最短的列。
 */
.jc-masonry { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.jc-masonry.is-ready { display: block; }

.jc-masonry-item { min-width: 0; }
.jc-masonry.is-ready .jc-masonry-item {
    position: absolute; top: 0; left: 0;
    /* 只动 transform，避免逐帧触发布局 */
    will-change: transform;
}

.jc-masonry-item a { display: block; border-radius: 11px; overflow: hidden; position: relative; }
.jc-masonry-item img,
.jc-masonry-item .ph-cover {
    display: block; width: 100%; height: auto;
    transition: transform .3s;
}
.jc-masonry-item a:hover img,
.jc-masonry-item a:hover .ph-cover { transform: scale(1.04); }
.jc-masonry-item .jc-photo-title {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px;
    background: linear-gradient(to top, rgba(9, 14, 26, .75), transparent);
    color: #fff; font-size: 12px; opacity: 0; transition: opacity .22s;
}
.jc-masonry-item a:hover .jc-photo-title { opacity: 1; }
/* 触屏没有 hover，直接显示说明 */
@media (hover: none) {
    .jc-masonry-item .jc-photo-title { opacity: 1; }
}

@media (max-width: 992px) {
    .jc-masonry { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .jc-masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 灯箱 */
.jc-lightbox {
    position: fixed; inset: 0; z-index: 999;
    background: rgba(8, 12, 22, .93);
    display: none; align-items: center; justify-content: center;
}
.jc-lightbox.open { display: flex; }
.jc-lightbox img { max-width: 90vw; max-height: 86vh; border-radius: 8px; }
.jc-lightbox-close {
    position: absolute; top: 22px; right: 26px; color: #fff; font-size: 30px;
    cursor: pointer; line-height: 1; opacity: .8;
}
.jc-lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    color: #fff; font-size: 34px; cursor: pointer; opacity: .6; padding: 10px 18px;
    user-select: none;
}
.jc-lightbox-nav:hover { opacity: 1; }
.jc-lightbox-nav.prev { left: 10px; }
.jc-lightbox-nav.next { right: 10px; }
.jc-lightbox-caption {
    position: absolute; bottom: 26px; left: 0; right: 0; text-align: center;
    color: #fff; font-size: 14px; opacity: .85;
}

/* ---------------------------------------------------------------------
   播放模式切换
   --------------------------------------------------------------------- */
.jc-mode-switch { display: flex; gap: 6px; flex-wrap: wrap; }

.jc-mode-switch button {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 14px; border-radius: 10px;
    border: 1px solid var(--c-border); background: var(--c-card);
    color: var(--c-text-sub); font-size: 13px; line-height: 1;
    cursor: pointer;
    transition: background .16s, color .16s, border-color .16s;
}
.jc-mode-switch button:hover { border-color: var(--c-primary); color: var(--c-primary); }
.jc-mode-switch button.active {
    background: var(--c-primary); border-color: var(--c-primary); color: #fff;
}
.jc-mode-switch button > span:first-child { font-size: 15px; }

/* 侧栏竖排 */
.jc-mode-switch.vertical { flex-direction: column; }
.jc-mode-switch.vertical button { width: 100%; justify-content: flex-start; }

/* 歌单页顶部的模式条 */
.jc-mode-bar {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 14px 18px; margin-bottom: 16px;
    background: var(--c-card); border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.jc-mode-bar-label { font-size: 14px; font-weight: 600; color: var(--c-text); }
.jc-mode-bar audio { display: none; }

/* ---------------------------------------------------------------------
   歌单曲目列表（每行 ▶ 试听）
   --------------------------------------------------------------------- */
.jc-track-list { display: flex; flex-direction: column; gap: 8px; }

.jc-track {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px;
    background: var(--c-card); border-radius: 12px;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: transform .16s, box-shadow .16s, background .16s;
}
.jc-track:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.jc-track.current { background: var(--c-primary-soft); }
.jc-track.playing { background: var(--c-primary-soft); }

.jc-track-index {
    flex: 0 0 22px; text-align: center; font-size: 13px;
    color: var(--c-text-light); font-variant-numeric: tabular-nums;
}
.jc-track.current .jc-track-index { color: var(--c-primary); }

.jc-track-play {
    flex: 0 0 30px; width: 30px; height: 30px; border: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; padding-left: 2px; cursor: pointer;
    background: var(--c-bg); color: var(--c-text-light);
    transition: background .18s, color .18s;
}
.jc-track:hover .jc-track-play { background: var(--c-primary); color: #fff; }
.jc-track.playing .jc-track-play {
    background: var(--c-primary); color: #fff; padding-left: 0;
}

.jc-track-cover {
    flex: 0 0 46px; width: 46px; height: 46px;
    border-radius: 9px; overflow: hidden; background: var(--c-primary-soft);
}
.jc-track-cover img { width: 100%; height: 100%; object-fit: cover; }

.jc-track-text { flex: 1; min-width: 0; color: inherit; }
.jc-track-text b {
    display: block; font-size: 14px; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jc-track-text:hover b { color: var(--c-primary); }
.jc-track-text > span { font-size: 12px; color: var(--c-text-light); }
.jc-track-time { flex: 0 0 auto; font-size: 12px; color: var(--c-text-light); }

.jc-track-hint {
    margin: 12px 0 0; font-size: 12px; color: var(--c-text-light);
}

/* ---------------------------------------------------------------------
   歌单信息（右侧）
   --------------------------------------------------------------------- */
.jc-pl-info { text-align: center; }
.jc-pl-cover {
    width: 100%; aspect-ratio: 1; border-radius: 14px; overflow: hidden;
    background: var(--c-primary-soft); margin-bottom: 16px;
    box-shadow: var(--shadow);
}
.jc-pl-cover img { width: 100%; height: 100%; object-fit: cover; }
.jc-pl-name { font-size: 19px; margin-bottom: 8px; }
.jc-pl-desc {
    margin: 0 0 12px; font-size: 13px; line-height: 1.8;
    color: var(--c-text-light);
}
.jc-pl-meta {
    display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
    margin-bottom: 14px; font-size: 12px; color: var(--c-text-light);
}
.jc-pl-meta span { background: var(--c-bg); border-radius: 7px; padding: 3px 10px; }
/* 小说目录的跳章表单 */
.jc-chapter-jump {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    margin-bottom: 16px; padding: 12px 16px;
    background: var(--c-bg); border-radius: var(--radius);
    font-size: 13px; color: var(--c-text-sub);
}
.jc-chapter-jump input[type="number"] {
    width: 108px; height: 34px; padding: 0 11px;
    border: 1px solid var(--c-border); border-radius: 9px;
    font-size: 13px; background: var(--c-card); color: var(--c-text);
    outline: none;
}
.jc-chapter-jump input[type="number"]:focus { border-color: var(--c-primary); }
.jc-chapter-jump .jc-btn { height: 34px; padding: 0 16px; font-size: 13px; }
.jc-chapter-jump-tip { color: var(--c-text-light); font-size: 12px; }

/* 阅读页侧栏目录的窗口提示 */
.jc-side-window-tip {
    margin: 12px 0 10px; padding: 8px 10px;
    background: var(--c-bg); border-radius: 8px;
    font-size: 12px; line-height: 1.7; color: var(--c-text-light);
}

/* ---------------------------------------------------------------------
   歌曲播放页（网易云风格：模糊底图 + 唱片 + 滚动歌词）
   --------------------------------------------------------------------- */
.nc-song {
    position: relative; overflow: hidden;
    border-radius: 18px; background: #0f172a; color: #fff;
    margin-bottom: 8px;
}

.nc-bg {
    position: absolute; inset: -40px;
    background: linear-gradient(135deg, #1e3a8a, #4c1d95) center/cover no-repeat;
    filter: blur(46px) saturate(1.5) brightness(.75);
    transform: scale(1.18);
    z-index: 0;
}

/* 播放页背景：预设色（选这些时 JS 会清掉背景图，让这里的渐变生效） */
.nc-song[data-nc-bg="blue"]   .nc-bg { background-image: linear-gradient(135deg, #0f2c6b, #1e40af); }
.nc-song[data-nc-bg="violet"] .nc-bg { background-image: linear-gradient(135deg, #3b0764, #6d28d9); }
.nc-song[data-nc-bg="green"]  .nc-bg { background-image: linear-gradient(135deg, #052e22, #0f766e); }
.nc-song[data-nc-bg="black"]  .nc-bg { background-image: linear-gradient(135deg, #0b1120, #1f2937); }

/* 模糊强度 */
.nc-song[data-nc-blur="off"]    .nc-bg { filter: none; }
.nc-song[data-nc-blur="weak"]   .nc-bg { filter: blur(16px) saturate(1.2) brightness(.8); }
.nc-song[data-nc-blur="normal"] .nc-bg { filter: blur(46px) saturate(1.5) brightness(.75); }
.nc-song[data-nc-blur="strong"] .nc-bg { filter: blur(80px) saturate(1.6) brightness(.7); }
.nc-shade {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(160deg, rgba(11, 17, 32, .62), rgba(11, 17, 32, .88));
}

.nc-inner {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 340px minmax(0, 1fr);
    gap: 38px; padding: 40px 42px; align-items: center;
}

/* 左侧：唱片 + 信息 + 控制 */
.nc-left { text-align: center; min-width: 0; }

.nc-cover {
    position: relative; width: 240px; height: 240px;
    margin: 0 auto 22px;
}
.nc-disc {
    position: absolute; top: 4%; right: -46px; width: 92%; height: 92%;
    border-radius: 50%; z-index: 0;
    background:
        radial-gradient(circle at 50% 50%, #2b2b33 0 18%, #1a1a20 18% 19%, #26262e 19% 30%, #1a1a20 30% 31%, #26262e 31% 42%, #1a1a20 42% 43%, #26262e 43% 54%, #1a1a20 54% 55%, #26262e 55% 66%, #1a1a20 66% 67%, #26262e 67% 78%, #1a1a20 78% 100%);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
    animation: nc-spin 22s linear infinite;
    animation-play-state: paused;
}
.nc-song.playing .nc-disc { animation-play-state: running; }
@keyframes nc-spin { to { transform: rotate(360deg); } }

.nc-cover-img {
    position: relative; z-index: 1;
    display: block; width: 100%; height: 100%;
    border-radius: 14px; overflow: hidden;
    object-fit: cover;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
}

.nc-title { font-size: 24px; margin-bottom: 8px; color: #fff; }
.nc-meta { margin: 0 0 12px; font-size: 13px; color: rgba(255, 255, 255, .62); }
.nc-playlist {
    display: inline-block; margin-bottom: 18px; padding: 3px 13px;
    border: 1px solid rgba(255, 255, 255, .22); border-radius: 20px;
    font-size: 12px; color: rgba(255, 255, 255, .75);
    transition: background .16s, color .16s, border-color .16s;
}
.nc-playlist:hover { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .35); }

.nc-progress {
    display: flex; align-items: center; gap: 12px;
    max-width: 330px; margin: 0 auto 16px;
    font-size: 12px; color: rgba(255, 255, 255, .68);
    font-variant-numeric: tabular-nums;
}
.nc-bar {
    flex: 1; height: 4px; border-radius: 2px;
    background: rgba(255, 255, 255, .22);
    cursor: pointer; position: relative;
}
.nc-bar > i {
    display: block; height: 100%; width: 0;
    border-radius: 2px; background: #fff; position: relative;
}
.nc-bar > i::after {
    content: ''; position: absolute; right: -5px; top: 50%;
    width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
    background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
    opacity: 0; transition: opacity .16s;
}.nc-bar:hover > i::after { opacity: 1; }

.nc-controls {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; flex-wrap: wrap;
}
.nc-btn {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .08);
    color: #fff; font-size: 14px; line-height: 1; cursor: pointer;
    transition: background .16s, transform .16s, opacity .16s;
}
.nc-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .2); }
.nc-btn:disabled { opacity: .3; cursor: not-allowed; }
.nc-btn-play {
    width: 58px; height: 58px; border: 0;
    background: #fff; color: #0f172a; font-size: 19px; padding-left: 3px;
}
.nc-btn-play:hover { transform: scale(1.06); background: #fff; }
.nc-song.playing .nc-btn-play { padding-left: 0; }

.nc-audio { display: none; }
.nc-noaduio {
    margin: 18px auto 0; max-width: 330px;
    padding: 12px 14px; border-radius: 10px;
    border: 1px dashed rgba(255, 255, 255, .22);
    font-size: 13px; color: rgba(255, 255, 255, .6);
}

/* 右侧：滚动歌词 */
.nc-lyrics {
    position: relative;          /* 作为歌词行的 offsetParent，滚动定位才算得准 */
    height: 470px; overflow-y: auto;
    padding: 200px 16px;
    text-align: center;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
}
.nc-lyrics::-webkit-scrollbar { display: none; }

.nc-lrc-line {
    padding: 9px 6px; border-radius: 8px;
    font-size: 15px; line-height: 1.65;
    color: rgba(255, 255, 255, .5);
    cursor: pointer;
    transition: color .2s, font-size .2s, transform .2s;
}
.nc-lrc-line:hover { color: rgba(255, 255, 255, .88); }
.nc-lrc-line.active {
    color: #fff; font-size: 18px; font-weight: 600;
    text-shadow: 0 0 20px rgba(255, 255, 255, .45);
}
.nc-lrc-empty { color: rgba(255, 255, 255, .45); font-size: 14px; }

/* 右侧曲目列表 */
.nc-list-card { padding: 18px 18px 16px; }
.nc-list-card > h3 { display: flex; align-items: center; }
.nc-list-count {
    margin-left: auto; font-size: 12px; font-weight: 400;
    color: var(--c-text-light);
}

.nc-list {
    display: flex; flex-direction: column; gap: 2px;
    max-height: 440px; overflow-y: auto;
    margin: 0 -6px;
    scrollbar-width: thin;
}
.nc-list::-webkit-scrollbar { width: 5px; }
.nc-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

.nc-list-item {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; border-radius: 9px;
    font-size: 13.5px; color: var(--c-text-sub);
    transition: background .16s, color .16s;
}
.nc-list-item:hover { background: var(--c-primary-soft); color: var(--c-primary); }
.nc-list-item.active {
    background: var(--c-primary); color: #fff;
}
.nc-list-index {
    flex: 0 0 20px; text-align: center; font-size: 12px;
    color: var(--c-text-light); font-variant-numeric: tabular-nums;
}
.nc-list-item.active .nc-list-index { color: rgba(255, 255, 255, .8); }
.nc-list-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nc-list-text b {
    font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nc-list-text > span {
    font-size: 11.5px; color: var(--c-text-light);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nc-list-item.active .nc-list-text > span { color: rgba(255, 255, 255, .75); }
.nc-list-time { flex: 0 0 auto; font-size: 11.5px; color: var(--c-text-light); }
.nc-list-item.active .nc-list-time { color: rgba(255, 255, 255, .75); }

.nc-list-foot { margin-top: 14px; }

/* ---------------------------------------------------------------------
   导航链接
   --------------------------------------------------------------------- */
.jc-link-group { margin-bottom: 26px; scroll-margin-top: 100px; }
.jc-link-group-head {
    display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
    font-size: 16px; font-weight: 600;
}
.jc-link-group-head::after { content: ''; flex: 1; height: 1px; background: var(--c-border); }

.jc-link-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.jc-link-card {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    background: var(--c-card); border-radius: 13px; box-shadow: var(--shadow);
    transition: transform .18s, box-shadow .18s;
}
.jc-link-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.jc-link-icon {
    width: 42px; height: 42px; flex: 0 0 42px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 17px; font-weight: 600; overflow: hidden;
    background: var(--c-primary);
}
.jc-link-icon img { width: 100%; height: 100%; object-fit: cover; }
.jc-link-text { min-width: 0; }
.jc-link-text b { display: block; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jc-link-text span {
    font-size: 12px; color: var(--c-text-light);
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------------------------------------------------------------------
   软件
   --------------------------------------------------------------------- */
.jc-soft-card {
    background: var(--c-card); border-radius: var(--radius); padding: 18px;
    box-shadow: var(--shadow); display: flex; gap: 14px;
    transition: transform .18s, box-shadow .18s;
}
.jc-soft-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.jc-soft-icon {
    width: 56px; height: 56px; flex: 0 0 56px; border-radius: 13px; overflow: hidden;
    background: var(--c-primary-soft); display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 700; color: var(--c-primary);
}
.jc-soft-icon img { width: 100%; height: 100%; object-fit: cover; }
.jc-soft-body { flex: 1; min-width: 0; }
.jc-soft-body h3 { font-size: 16px; margin-bottom: 4px; }
.jc-soft-card:hover h3 { color: var(--c-primary); }
.jc-soft-body p {
    margin: 0 0 8px; font-size: 13px; color: var(--c-text-light);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.jc-soft-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--c-text-light); }
.jc-soft-meta span { background: var(--c-bg); border-radius: 6px; padding: 2px 8px; }

/* 软件详情 */
.jc-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.jc-soft-head { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.jc-soft-head .jc-soft-icon { width: 84px; height: 84px; flex: 0 0 84px; border-radius: 18px; font-size: 28px; }
.jc-soft-head h1 { font-size: 24px; margin-bottom: 8px; }
.jc-soft-attrs { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--c-text-light); }
.jc-soft-attrs span { background: var(--c-bg); padding: 3px 10px; border-radius: 7px; }

.jc-download-box {
    margin-top: 20px; padding: 18px; border-radius: 12px; background: var(--c-primary-soft);
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.jc-download-box .jc-download-info { font-size: 13px; color: var(--c-text-sub); }
.jc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 42px; padding: 0 22px; border-radius: 10px; border: 0;
    background: var(--c-primary); color: #fff; font-size: 15px; cursor: pointer;
    transition: background .16s;
}
.jc-btn:hover { background: var(--c-primary-dark); color: #fff; }
.jc-btn-ghost { background: var(--c-bg); color: var(--c-text-sub); }
.jc-btn-ghost:hover { background: var(--c-border); color: var(--c-text); }
.jc-btn-lg { height: 46px; padding: 0 28px; font-size: 16px; }

/* ---------------------------------------------------------------------
   小说
   --------------------------------------------------------------------- */
.jc-novel-card { display: flex; gap: 14px; background: var(--c-card); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); transition: transform .18s, box-shadow .18s; }
.jc-novel-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.jc-novel-cover { width: 92px; flex: 0 0 92px; aspect-ratio: 3/4; border-radius: 10px; overflow: hidden; background: var(--c-primary-soft); }
.jc-novel-cover img { width: 100%; height: 100%; object-fit: cover; }
.jc-novel-body { flex: 1; min-width: 0; }
.jc-novel-body h3 { font-size: 16px; margin-bottom: 6px; }
.jc-novel-card:hover h3 { color: var(--c-primary); }
.jc-novel-body p {
    margin: 0 0 8px; font-size: 13px; color: var(--c-text-light); line-height: 1.7;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.jc-novel-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--c-text-light); }

.jc-chapter-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.jc-chapter-list a {
    display: block; padding: 9px 12px; border-radius: 9px; background: var(--c-bg);
    font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jc-chapter-list a:hover { background: var(--c-primary-soft); color: var(--c-primary); }
.jc-chapter-list a.active { background: var(--c-primary); color: #fff; }

.jc-reader {
    background: var(--reader-bg, var(--c-card));
    border-radius: var(--radius); padding: 38px 44px;
    box-shadow: var(--shadow);
}
.jc-reader h1 { font-size: 24px; text-align: center; margin-bottom: 8px; color: var(--reader-title, var(--c-text)); }
.jc-reader-meta { text-align: center; font-size: 13px; color: var(--reader-muted, var(--c-text-light)); margin-bottom: 14px; }
.jc-reader-content {
    font-size: var(--jc-read-size, 17px); line-height: 2.1;
    color: var(--reader-body, #2b3447);
    font-family: var(--reader-font, inherit);
}
.jc-reader-content p { margin: 0 0 1.1em; text-indent: 2em; }
.jc-reader-nav { display: flex; gap: 12px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   小说阅读区的外观设置（只作用于 .jc-reader，不影响其它区域）
   --------------------------------------------------------------------- */
/* 背景主题 */
.jc-reader[data-reader-bg="sepia"] {
    --reader-bg: #f8f2e4; --reader-title: #3b3223; --reader-body: #463b28;
    --reader-muted: #8a7c62; --reader-line: #e8dfc8;
}
.jc-reader[data-reader-bg="green"] {
    --reader-bg: #e9f4ea; --reader-title: #20372a; --reader-body: #2c4433;
    --reader-muted: #6d8a76; --reader-line: #d3e6d6;
}
.jc-reader[data-reader-bg="night"] {
    --reader-bg: #1c2129; --reader-title: #e8ecf3; --reader-body: #c3cad6;
    --reader-muted: #8b95a5; --reader-line: #2b323d;
}

/* 深色背景上的按钮要跟着变，否则看不清 */
.jc-reader[data-reader-bg="night"] .jc-btn-ghost {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #dfe4ec;
}
.jc-reader[data-reader-bg="night"] .jc-btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* 字体 */
.jc-reader[data-reader-font="song"] .jc-reader-content { font-family: "Songti SC", "SimSun", "宋体", "Noto Serif CJK SC", serif; }
.jc-reader[data-reader-font="hei"] .jc-reader-content { font-family: "Heiti SC", "SimHei", "黑体", "Microsoft YaHei", "微软雅黑", sans-serif; }
.jc-reader[data-reader-font="kai"] .jc-reader-content { font-family: "Kaiti SC", "KaiTi", "楷体", "STKaiti", "Times New Roman", serif; }

/* 侧栏的阅读设置卡片 */
.jc-set-row + .jc-set-row { margin-top: 15px; }
.jc-set-label { display: block; font-size: 12px; color: var(--c-text-light); margin-bottom: 7px; }
.jc-set-row .jc-readsize { width: 100%; justify-content: space-between; }
/* 卡片里已经有「字号」标签了，控件自带的那个就不用再显示 */
.jc-set-row .jc-readsize-label { display: none; }
.jc-set-row .jc-readsize { padding-left: 8px; }
.jc-set-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.jc-set-opt {
    flex: 1 1 0; min-width: 50px; height: 30px; padding: 0 6px;
    border: 1px solid var(--c-border); border-radius: 8px;
    background: var(--c-card); color: var(--c-text-sub);
    font-size: 12px; line-height: 1; cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.jc-set-opt:hover { border-color: var(--c-primary); color: var(--c-primary); }
.jc-set-opt.active {
    background: var(--c-primary-soft); border-color: var(--c-primary);
    color: var(--c-primary); font-weight: 600;
}
.jc-set-swatch { min-width: 0; height: 32px; padding: 0; position: relative; }
.jc-set-swatch::after {
    content: ''; position: absolute; inset: 4px;
    border-radius: 5px; background: var(--sw, #fff);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .12);
}
.jc-set-swatch.active { border-color: var(--c-primary); background: var(--c-primary-soft); }
.jc-set-tip { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--c-border); font-size: 12px; line-height: 1.7; color: var(--c-text-light); }

/* 文章页：标题下面那一行的正文信息，字号控件贴右侧 */
.jc-article-headrow { position: relative; }
.jc-article-headrow .jc-article-meta { margin-bottom: 0; padding-right: var(--jc-readsize-space); }
.jc-article-headrow .jc-readsize {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
}

/* 正文字号调节 */
.jc-readsize {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 8px 4px 13px; border-radius: 999px;
    background: var(--c-bg); font-size: 12px; color: var(--c-text-light);
    white-space: nowrap;
}
.jc-readsize-label { margin-right: 2px; }
.jc-readsize-btn {
    min-width: 32px; height: 26px; padding: 0 8px;
    border: 1px solid var(--c-border); border-radius: 7px;
    background: var(--c-card); color: var(--c-text);
    font-size: 12px; line-height: 1; cursor: pointer;
    transition: border-color .15s, color .15s;
}
.jc-readsize-btn:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-primary); }
.jc-readsize-btn:disabled { opacity: .38; cursor: not-allowed; }
.jc-readsize-value { min-width: 26px; text-align: center; font-weight: 600; color: var(--c-text); }
.jc-readsize-reset {
    border: 0; background: transparent; padding: 0 4px;
    color: var(--c-text-light); font-size: 12px; cursor: pointer;
}
.jc-readsize-reset:hover { color: var(--c-primary); }
.jc-readsize-reset[disabled] { opacity: .38; cursor: default; }

/* 窄屏放不下时，文章页的字号控件落到下一行，不再绝对定位 */
@media (max-width: 880px) {
    .jc-article-headrow .jc-article-meta { padding: 0; }
    .jc-article-headrow .jc-readsize {
        position: static; transform: none;
        display: flex; width: max-content;
        margin: 12px 0 0;
    }
}

/* ---------------------------------------------------------------------
   视频
   --------------------------------------------------------------------- */
.jc-video-card { display: block; background: var(--c-card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.jc-video-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
/* 模板里是 <span>，必须显式块化，否则 aspect-ratio 不生效、文字区也会塌掉 */
.jc-video-cover { display: block; position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--c-primary-soft); }
.jc-video-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.jc-video-card:hover .jc-video-cover img { transform: scale(1.05); }
.jc-video-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(9, 14, 26, .55); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    transition: background .2s;
}
.jc-video-card:hover .jc-video-play { background: var(--c-primary); }
.jc-play-tri {
    display: block; width: 0; height: 0; margin-left: 3px;
    border-style: solid; border-width: 8px 0 8px 13px;
    border-color: transparent transparent transparent #fff;
}
.jc-video-duration {
    position: absolute; right: 8px; bottom: 8px; padding: 1px 7px; border-radius: 6px;
    background: rgba(9, 14, 26, .76); color: #fff; font-size: 12px;
}
.jc-video-body { display: block; padding: 12px 13px 14px; }
.jc-video-body h3 { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jc-video-card:hover h3 { color: var(--c-primary); }
.jc-video-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--c-text-light); }

/* 播放页：左播放器 + 右播放列表 */
.jc-video-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.jc-video-main { min-width: 0; }
/**
 * 播放器：**宽高比固定 16:9**
 *
 * 高度一律由这个容器决定，不跟视频文件走。理由：
 * video.js 开着 fluid 时会按源视频分辨率生成一条 `.{id}-dimensions`
 * （`width:640px; height:360px`）规则把尺寸冻住，实测 16:9 的源排出 990×557、
 * 4:3 的源排成 990×743——换个片子播放器就变高变矮。
 * 现在 fluid 已关掉，视频在里面等比留边（letterbox），不裁也不变形。
 *
 * 附带好处：高宽比在 CSS 里就定了，video.js 还没加载完时也不会塌成 0 高。
 */
.jc-video-player { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #0b1120; box-shadow: var(--shadow); }
.jc-video-player video,
.jc-video-player .video-js { width: 100%; height: 100%; }
.jc-video-player video { display: block; background: #0b1120; }
/* 压掉 video.js 按源视频尺寸生成的那条规则（它只有一个类名，我们这条更具体） */
.jc-video-player .video-js[class*="-dimensions"] { width: 100%; height: 100%; }
/* video.js 皮肤适配：圆角与容器一致，大播放键用主题色 */
.jc-video-player .video-js { border-radius: var(--radius); font-family: inherit; }
.jc-video-player .video-js .vjs-big-play-button {
    border-color: rgba(255, 255, 255, .9); background-color: rgba(9, 14, 26, .55);
    width: 68px; height: 68px; line-height: 68px; border-radius: 50%; margin-top: -34px; margin-left: -34px;
    border-width: 2px;
}
.jc-video-player .video-js:hover .vjs-big-play-button { background-color: var(--c-primary); border-color: var(--c-primary); }
.jc-video-player .video-js .vjs-control-bar { background-color: rgba(9, 14, 26, .78); }
/* video.js 8 的封面是 <picture class="vjs-poster"><img>，默认 contain 会留黑边；铺满更好看。
   注意别动 .vjs-tech（真正播放视频的元素），那里要保留 contain 才不裁画面。 */
.jc-video-player .video-js .vjs-poster img { object-fit: cover; }
.jc-video-player .video-js .vjs-poster { background-size: cover; background-position: center; }
.jc-video-player .video-js .vjs-play-progress,
.jc-video-player .video-js .vjs-volume-level { background-color: var(--c-primary); }
.jc-video-player .video-js .vjs-slider { background-color: rgba(255, 255, 255, .22); }
.jc-video-noplay {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    aspect-ratio: 16/9; color: #94a3b8; font-size: 14px;
}
.jc-video-noplay .jc-play-tri { width: 0; height: 0; border-width: 14px 0 14px 22px; opacity: .5; }
.jc-video-head { padding: 18px 4px 0; }
.jc-video-head h1 { font-size: 22px; margin-bottom: 12px; }
.jc-video-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 13px; color: var(--c-text-light); }
.jc-video-source { padding: 1px 8px; border-radius: 20px; background: var(--c-bg); }
.jc-video-desc { margin: 14px 0 0; font-size: 14px; line-height: 1.9; color: var(--c-text-sub); }

.jc-video-playlist { padding-bottom: 14px; }
/**
 * 播放列表滚动区：**隐藏滚动条，但保留滚动**
 *
 * 侧栏本来就窄，再占掉 15px 滚动条，标题的可读宽度就明显缩水。
 * 列表头部有总数徽标（如「14」），鼠标滚轮 / 触屏滑动照常，
 * 所以隐藏滚动条不影响可用性。写法和音乐页歌词区 `.nc-lyrics` 一致。
 */
.jc-vplay-scroll {
    max-height: 560px; overflow-y: auto; margin: 0 -6px 12px;
    scrollbar-width: none;     /* Firefox */
    -ms-overflow-style: none;  /* 旧版 Edge / IE */
}
.jc-vplay-scroll::-webkit-scrollbar { display: none; }   /* Chrome / Safari / 新版 Edge */
/**
 * 播放列表条目：序号 + 标题 + 时长，一行放完，不显示封面图
 *
 * 标题 ellipsis 单行截断，时长靠右对齐。时长原先绝对定位叠在封面角上，
 * 封面去掉后改成普通 flex 项，那几条绝对定位也就一起去掉了。
 */
.jc-vplay-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 6px; border-radius: 10px;
    transition: background .15s;
}
.jc-vplay-item:hover { background: var(--c-bg); }
.jc-vplay-item.active { background: var(--c-primary-soft); }
.jc-vplay-item.active .jc-vplay-text b { color: var(--c-primary); }
.jc-vplay-index { flex: 0 0 18px; text-align: center; font-size: 12px; color: var(--c-text-light); }
.jc-vplay-item.active .jc-vplay-index { color: var(--c-primary); font-weight: 600; }

.jc-vplay-text { flex: 1 1 auto; min-width: 0; }
.jc-vplay-text b {
    display: block; font-size: 13.5px; font-weight: 500; line-height: 1.5;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jc-vplay-duration {
    flex: 0 0 auto; font-size: 12px; color: var(--c-text-light);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 992px) {
    .jc-video-layout { grid-template-columns: minmax(0, 1fr); }
    .jc-vplay-scroll { max-height: 420px; }
}

/* ---------------------------------------------------------------------
   音乐歌单卡片（首页 / 音乐页）
   注意：这些名字和视频播放列表不是一套，
   视频那边用的是 .jc-vplay-*，两边不要再混用同一个前缀。
   --------------------------------------------------------------------- */
.jc-playlist-card {
    display: block; background: var(--c-card); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow);
    transition: transform .2s, box-shadow .2s;
}
.jc-playlist-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }

/* 模板里是 <span>，必须显式块化，否则会退化成行内元素互相叠在一起 */
.jc-playlist-cover {
    display: block; position: relative;
    aspect-ratio: 1; overflow: hidden; background: var(--c-primary-soft);
}
.jc-playlist-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.jc-playlist-card:hover .jc-playlist-cover img { transform: scale(1.05); }

.jc-playlist-count {
    position: absolute; left: 10px; bottom: 10px;
    padding: 2px 9px; border-radius: 20px;
    background: rgba(9, 14, 26, .62); color: #fff; font-size: 12px;
    backdrop-filter: blur(2px);
}
.jc-playlist-play {
    position: absolute; right: 10px; bottom: 10px;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(9, 14, 26, .55); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; text-indent: 2px;
    transition: background .2s;
}
.jc-playlist-card:hover .jc-playlist-play { background: var(--c-primary); }

.jc-playlist-body { display: block; padding: 12px 14px 14px; }
.jc-playlist-body h3 {
    font-size: 15px; margin-bottom: 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jc-playlist-card:hover .jc-playlist-body h3 { color: var(--c-primary); }
.jc-playlist-body p {
    margin: 0; font-size: 13px; line-height: 1.7; color: var(--c-text-light);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.jc-playlist-preview {
    display: block; margin-top: 8px; font-size: 12px; color: var(--c-text-light);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------
   电影
   --------------------------------------------------------------------- */
.jc-movie-card { background: var(--c-card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.jc-movie-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
/* 模板里用的是 <span>，必须显式转成块级：
   行内元素上 aspect-ratio 不生效，海报会塌成接近正方形；
   同理 .jc-movie-body 的行内盒子也会让内边距和标题全部消失 */
.jc-movie-poster { display: block; position: relative; aspect-ratio: 2/3; overflow: hidden; background: var(--c-primary-soft); }
.jc-movie-poster img { width: 100%; height: 100%; object-fit: cover; }
.jc-movie-score {
    position: absolute; right: 10px; top: 10px; padding: 2px 8px; border-radius: 8px;
    background: rgba(9, 14, 26, .72); color: #fbbf24; font-size: 13px; font-weight: 600;
}
.jc-movie-body { display: block; padding: 12px 13px 14px; }
.jc-movie-body h3 { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jc-movie-body p { margin: 6px 0 0; font-size: 12px; color: var(--c-text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.jc-filter-bar {
    background: var(--c-card); border-radius: var(--radius); padding: 14px 18px;
    box-shadow: var(--shadow); margin-bottom: 18px;
}
.jc-filter-row { display: flex; align-items: flex-start; gap: 12px; padding: 7px 0; font-size: 14px; }
.jc-filter-row > b { flex: 0 0 42px; color: var(--c-text-light); font-weight: 400; padding-top: 3px; }
.jc-filter-options { display: flex; flex-wrap: wrap; gap: 6px; }
.jc-filter-options a { padding: 3px 12px; border-radius: 20px; font-size: 13px; color: var(--c-text-sub); }
.jc-filter-options a:hover { background: var(--c-primary-soft); color: var(--c-primary); }
.jc-filter-options a.active { background: var(--c-primary); color: #fff; }

/* ---------------------------------------------------------------------
   收支
   --------------------------------------------------------------------- */
/**
 * 收支四个数字卡
 *
 * 用 auto-fit + 290px 最小列宽，让列数自己随宽度变（4/3/2/1），
 * 而不是靠一堆硬断点去猜。290px 是量出来的：「¥2,814.56 / ¥1,496.45」
 * 在 24px 字号下需要 250px，加上卡片内边距 20px×2。
 * 硬断点的问题是中段（993~1240px）名义上 4 列，实际放不下，数字会溢到隔壁卡片上。
 */
.jc-finance-hero {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
    gap: 16px; margin-bottom: 22px;
}
.jc-finance-stat {
    background: var(--c-card); border-radius: var(--radius); padding: 20px;
    box-shadow: var(--shadow);
}
.jc-finance-stat span { display: block; font-size: 13px; color: var(--c-text-light); margin-bottom: 8px; }
.jc-finance-stat b { font-size: 24px; font-variant-numeric: tabular-nums; }
.jc-finance-stat b.income { color: #0f9d58; }
.jc-finance-stat b.expense { color: #dc2626; }
/* 「收入 / 支出」这种成对的值：里面的 span 要还原成行内，
   否则会被上面那条 display:block 拆成三行、还缩成 13px 的灰字 */
.jc-finance-stat b span { display: inline; font-size: inherit; color: inherit; margin-bottom: 0; }
.jc-finance-stat b span.income { color: #0f9d58; }
.jc-finance-stat b span.expense { color: #dc2626; }
.jc-finance-pair { white-space: nowrap; font-size: 24px; line-height: 1.35; }
.jc-finance-pair .sep { color: var(--c-text-light); font-weight: 400; margin: 0 4px; }
/* 320px 级别的窄屏：单列也塞不下 24px 的这一对，缩到 19px 仍保持一行 */
@media (max-width: 360px) {
    .jc-finance-pair { font-size: 19px; }
}

.jc-bar-chart { display: flex; flex-direction: column; gap: 12px; }
.jc-bar-row { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.jc-bar-row > span:first-child { flex: 0 0 74px; color: var(--c-text-sub); }
.jc-bar-row .jc-bar-track { flex: 1; height: 10px; border-radius: 5px; background: var(--c-bg); overflow: hidden; }
.jc-bar-row .jc-bar-track > i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--c-primary), var(--c-accent)); }
/* 金额 + 占比必须在一行：原来固定 96px 放不下「¥1,053.89 (15.5%)」会被折成两行。
   改成按内容自适应，min-width 保证各行数值仍然对齐。 */
.jc-bar-row > span:last-child {
    flex: 0 0 auto; min-width: 118px; white-space: nowrap;
    text-align: right; font-variant-numeric: tabular-nums; color: var(--c-text-sub);
}

/* 收支流水：像动态那样一条一块，支持配图 */
.jc-finance-list { display: flex; flex-direction: column; }
.jc-finance-item {
    padding: 15px 2px 15px 14px; border-bottom: 1px solid var(--c-border);
    border-left: 3px solid var(--c-border); border-radius: 2px;
}
.jc-finance-item:last-child { border-bottom: 0; }
.jc-finance-item.is-income { border-left-color: #0f9d58; }
.jc-finance-item.is-expense { border-left-color: #dc2626; }
.jc-finance-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.jc-finance-cat { font-size: 15px; }
.jc-finance-account { font-size: 12px; color: var(--c-text-light); padding: 1px 8px; border-radius: 20px; background: var(--c-bg); }
.jc-finance-date { font-size: 12px; color: var(--c-text-light); font-variant-numeric: tabular-nums; }
.jc-finance-amount { margin-left: auto; font-size: 17px; font-variant-numeric: tabular-nums; }
.jc-finance-amount.income { color: #0f9d58; }
.jc-finance-amount.expense { color: #dc2626; }
.jc-finance-remark { margin: 8px 0 0; font-size: 14px; line-height: 1.8; color: var(--c-text-sub); }
.jc-finance-item .jc-moment-images { margin-top: 12px; }
/* 流水里的配图只是凭证，别占太大版面 */
.jc-finance-item .jc-moment-images { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 560px; }
.jc-finance-item .jc-moment-images.one { grid-template-columns: minmax(0, 180px); }
.jc-finance-item .jc-moment-images.one img { aspect-ratio: 1; }
.jc-finance-item .jc-moment-images.two { grid-template-columns: repeat(2, minmax(0, 130px)); }

/* 右侧「按年月」归档：年份可折叠，月份带时间轴导轨与当月支出 */
.jc-archive { margin-top: 6px; }
.jc-archive-year,
.jc-archive-group > summary {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 10px; border-radius: 9px; cursor: pointer;
    font-size: 14px; color: var(--c-text-sub);
    transition: background .15s;
}
.jc-archive-year:hover,
.jc-archive-group > summary:hover { background: var(--c-bg); }
.jc-archive-year { margin-bottom: 4px; }
.jc-archive-year.active { background: var(--c-primary-soft); }
.jc-archive-year.active .jc-archive-year-label { color: var(--c-primary); font-weight: 600; }
.jc-archive-group > summary { list-style: none; }
.jc-archive-group > summary::-webkit-details-marker { display: none; }
.jc-archive-group > summary::before {
    content: ''; width: 0; height: 0; margin-right: 8px;
    border-style: solid; border-width: 5px 0 5px 7px;
    border-color: transparent transparent transparent var(--c-text-light);
    transition: transform .15s;
}
.jc-archive-group[open] > summary::before { transform: rotate(90deg); }
.jc-archive-group > summary > a { flex: 1; }

/* 「2026 年」这种：数字重、单位轻，读起来更像时间 */
.jc-archive-year-label { font-variant-numeric: tabular-nums; }
.jc-archive-year-label i {
    font-style: normal; font-size: .82em; font-weight: 400;
    color: var(--c-text-light); margin-left: 2px;
}
.jc-archive-year-label.active { color: var(--c-primary); font-weight: 600; }
.jc-archive-year-label.active i { color: var(--c-primary); }

/* 月份列表：左侧一条时间轴，每月一个点 */
.jc-archive-months {
    position: relative; padding: 2px 0 8px 26px;
}
.jc-archive-months::before {
    content: ''; position: absolute; left: 13px; top: 6px; bottom: 12px;
    width: 1px; background: var(--c-border);
}
.jc-archive-month {
    position: relative;
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px 6px 8px; border-radius: 8px;
    font-size: 13px; color: var(--c-text-sub);
    transition: background .15s;
}
.jc-archive-month:hover { background: var(--c-bg); }
.jc-archive-dot {
    position: absolute; left: -17px; top: 50%; margin-top: -4px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--c-card); box-shadow: 0 0 0 2px var(--c-border) inset;
    transition: background .15s, box-shadow .15s;
}
.jc-archive-month:hover .jc-archive-dot { box-shadow: 0 0 0 2px var(--c-primary) inset; }
.jc-archive-month.active { background: var(--c-primary-soft); }
.jc-archive-month.active .jc-archive-dot {
    background: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft);
}
.jc-archive-month.active .jc-archive-month-label { color: var(--c-primary); font-weight: 600; }
.jc-archive-month-label {
    flex: 0 0 auto; min-width: 34px; font-variant-numeric: tabular-nums;
}
.jc-archive-month-label i {
    font-style: normal; font-size: .82em; font-weight: 400;
    color: var(--c-text-light); margin-left: 1px;
}
.jc-archive-amount {
    margin-left: auto; font-size: 12px; color: #dc2626;
    font-variant-numeric: tabular-nums; opacity: .78;
}
.jc-archive-month.active .jc-archive-amount { opacity: 1; }
.jc-archive-num {
    flex: 0 0 auto; min-width: 24px; text-align: right;
    font-size: 12px; color: var(--c-text-light); font-variant-numeric: tabular-nums;
}

.jc-money-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.jc-money-table th, .jc-money-table td { padding: 11px 12px; border-bottom: 1px solid var(--c-border); text-align: left; }
.jc-money-table th { font-size: 13px; color: var(--c-text-light); font-weight: 500; background: #fafbfe; }
.jc-money-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.jc-money-table .income { color: #0f9d58; font-weight: 600; }
.jc-money-table .expense { color: #dc2626; font-weight: 600; }

/* ---------------------------------------------------------------------
   文章详情
   --------------------------------------------------------------------- */
.jc-article-head { margin-bottom: 24px; }
.jc-article-head h1 { font-size: 28px; line-height: 1.45; margin-bottom: 14px; }
.jc-article-head .jc-article-meta {
    display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--c-text-light);
    padding-bottom: 16px; border-bottom: 1px solid var(--c-border);
}
.jc-article-content { position: relative; font-size: var(--jc-read-size, 16px); line-height: 2; color: #2b3447; }
.jc-article-content p { margin: 0 0 1.2em; }
.jc-article-content img { border-radius: 10px; margin: 1.2em auto; }
.jc-article-content h2, .jc-article-content h3 { margin: 1.6em 0 .8em; }
.jc-article-content blockquote {
    margin: 1.2em 0; padding: 12px 18px; border-left: 3px solid var(--c-primary);
    background: var(--c-primary-soft); border-radius: 0 10px 10px 0; color: var(--c-text-sub);
}
.jc-article-content pre {
    background: #0f172a; color: #e2e8f0; padding: 16px; border-radius: 10px; overflow-x: auto; font-size: 14px;
}
.jc-article-content code { background: var(--c-bg); padding: 1px 6px; border-radius: 5px; font-size: .92em; }
.jc-article-content pre code { background: transparent; padding: 0; }

/**
 * 详情页正文右下角的「编辑」入口（仅登录后显示，见 view/index/common/editbtn.html）
 *
 * 用一个右对齐的行来放，而不是绝对定位到容器角落：
 * 这样不用给每个容器加定位上下文和 padding-bottom，也不可能压住正文最后一行。
 */
.jc-edit-row { display: flex; justify-content: flex-end; margin-top: 22px; }
.jc-article-content > .jc-edit-row:last-child { margin-bottom: -6px; }
.jc-edit-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 15px; border-radius: 9px;
    background: var(--c-primary); color: #fff;
    font-size: 13px; font-weight: 600; line-height: 1;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(37, 99, 235, .3);
    transition: transform .15s, box-shadow .15s;
}
.jc-edit-btn:hover {
    color: #fff; transform: translateY(-1px);
    box-shadow: 0 7px 20px rgba(37, 99, 235, .38);
}
.jc-edit-btn:active { transform: translateY(0); }
.jc-edit-btn svg { display: block; flex: 0 0 auto; }

.jc-prevnext { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.jc-prevnext a {
    flex: 1; min-width: 240px; padding: 14px 18px; background: var(--c-card);
    border-radius: 12px; box-shadow: var(--shadow); font-size: 14px;
}
.jc-prevnext a:hover { color: var(--c-primary); }
.jc-prevnext a span { display: block; font-size: 12px; color: var(--c-text-light); margin-bottom: 5px; }

/* 侧栏（内容页） */
.jc-side { display: flex; flex-direction: column; gap: 18px; align-self: stretch; }
.jc-side-sticky { position: sticky; top: 92px; }
.jc-side-card { background: var(--c-card); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.jc-side-card h3 { font-size: 15px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--c-border); }

/* 侧栏里的支出分类排行（窄栏不放进度条，纯数字更清爽） */
.jc-side-sub {
    margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--c-text-light);
}
.jc-side-empty { font-size: 13px; color: var(--c-text-light); }

/* 收支两段：各自一个标题 + 合计 */
.jc-rank-section + .jc-rank-section {
    margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--c-border);
}
.jc-rank-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 6px; padding: 0 8px;
    font-size: 12px; color: var(--c-text-light); font-variant-numeric: tabular-nums;
}
.jc-rank-head b { font-size: 13px; }
.jc-rank-head b.expense { color: #dc2626; }
.jc-rank-head b.income { color: #0f9d58; }
.jc-rank-list { display: flex; flex-direction: column; gap: 2px; }
.jc-rank-list li { border-radius: 8px; }
/* 每一行是链接：点一下右侧明细就只看这个分类 */
.jc-rank-list li > a {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: 8px; font-size: 13px;
    color: inherit; transition: background .15s;
}
.jc-rank-list li > a:hover { background: var(--c-bg); }
.jc-rank-list li > a:hover .jc-rank-name { color: var(--c-primary); }
.jc-rank-list li.active > a { background: var(--c-primary-soft); }
.jc-rank-list li.active .jc-rank-name { color: var(--c-primary); font-weight: 600; }
.jc-rank-list li.active .jc-rank-index { background: var(--c-primary); color: #fff; }
.jc-rank-index {
    flex: 0 0 18px; height: 18px; border-radius: 5px; text-align: center;
    font-size: 11px; line-height: 18px; font-variant-numeric: tabular-nums;
    background: var(--c-bg); color: var(--c-text-light);
}
/* 前两名给点分量，不靠进度条也能看出高低 */
.jc-rank-list li:nth-child(1) .jc-rank-index { background: var(--c-primary); color: #fff; }
.jc-rank-list li:nth-child(2) .jc-rank-index { background: var(--c-primary-soft); color: var(--c-primary); }
.jc-rank-list li:nth-child(3) .jc-rank-index { background: var(--c-primary-soft); color: var(--c-primary); }
.jc-rank-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jc-rank-amount {
    flex: 0 0 auto; font-variant-numeric: tabular-nums;
    color: var(--c-text-sub); font-weight: 600;
}
.jc-rank-ratio {
    flex: 0 0 44px; text-align: right; font-size: 12px;
    color: var(--c-text-light); font-variant-numeric: tabular-nums;
}
.jc-side-foot {
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--c-border);
    font-size: 12px; color: var(--c-text-light);
}
.jc-side-foot b { font-weight: 600; }
.jc-side-foot b.income { color: #0f9d58; }
.jc-side-foot b.expense { color: #dc2626; }

/* 明细标题旁的「当前分类」小标签，带 × 可取消 */
.jc-active-filter {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: 8px; padding: 2px 6px 2px 10px; border-radius: 20px;
    background: var(--c-primary-soft); color: var(--c-primary);
    font-size: 13px; font-weight: 600; vertical-align: middle;
}
.jc-active-filter a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    background: rgba(0, 0, 0, .08); color: inherit;
    font-size: 13px; line-height: 1; text-decoration: none;
}
.jc-active-filter a:hover { background: var(--c-primary); color: #fff; }

/* 导航页右侧分类 */
.jc-cat-list { display: flex; flex-direction: column; gap: 2px; }
.jc-cat-list a {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 11px; border-radius: 9px; font-size: 14px; color: var(--c-text-sub);
    transition: background .16s, color .16s;
}
.jc-cat-list a:hover { background: var(--c-primary-soft); color: var(--c-primary); }
.jc-cat-list a.active { background: var(--c-primary); color: #fff; }
.jc-cat-list .jc-cat-count {
    flex: 0 0 auto; font-size: 12px; color: var(--c-text-light);
    background: var(--c-bg); border-radius: 20px; padding: 1px 8px; line-height: 18px;
}
.jc-cat-list a.active .jc-cat-count { background: rgba(255, 255, 255, .22); color: #fff; }

/**
 * 文章详情右侧目录
 *
 * 用一条竖向导轨串起来：每个条目在导轨上有个圆点，当前阅读到的位置圆点变主色、
 * 导轨上还有一段主色进度条（阅读进度由 JS 写进 --jc-toc-progress）。
 * 层级靠「缩进 + 圆点大小」区分，比单纯改 padding 更容易扫。
 */
.jc-toc {
    position: relative;
    display: flex; flex-direction: column; gap: 1px;
    max-height: 62vh; overflow-y: auto; scrollbar-width: thin;
    --jc-toc-progress: 0%;
}
.jc-toc::-webkit-scrollbar { width: 5px; }
.jc-toc::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* 导轨 */
.jc-toc::before {
    content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px;
    width: 2px; border-radius: 1px; background: var(--c-border);
}
/* 进度：盖在导轨上的一段 */
.jc-toc::after {
    content: ''; position: absolute; left: 5px; top: 6px;
    width: 2px; height: var(--jc-toc-progress);
    max-height: calc(100% - 12px);
    border-radius: 1px; background: var(--c-primary); opacity: .34;
    transition: height .2s;
}

.jc-toc-item {
    position: relative;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    padding: 7px 8px 7px 20px; border-radius: 0 8px 8px 0;
    font-size: 13.5px; line-height: 1.6; color: var(--c-text-sub);
    transition: color .16s, background .16s;
}
/* 导轨上的圆点 */
.jc-toc-item::before {
    content: ''; position: absolute; left: 3px; top: 15px;
    width: 6px; height: 6px; border-radius: 50%;
    background: #d5dbe6;
    transition: background .18s, transform .18s;
}
.jc-toc-item:hover { color: var(--c-primary); background: var(--c-primary-soft); }
.jc-toc-item:hover::before { background: var(--c-primary); }
.jc-toc-item.active {
    color: var(--c-primary); font-weight: 600; background: var(--c-primary-soft);
}
.jc-toc-item.active::before {
    background: var(--c-primary); transform: scale(1.35);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

/* 层级：缩进 + 更小的圆点 */
.jc-toc-item.level-3 { padding-left: 34px; font-size: 13px; }
.jc-toc-item.level-3::before,
.jc-toc-item.level-4::before,
.jc-toc-item.level-5::before,
.jc-toc-item.level-6::before { width: 4px; height: 4px; left: 4px; top: 16px; }
.jc-toc-item.level-4,
.jc-toc-item.level-5,
.jc-toc-item.level-6 { padding-left: 48px; font-size: 12.5px; }

/* 目录卡片标题右侧的条目数 */
.jc-toc-count {
    margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--c-text-light);
}

/* 正文标题留出吸顶头部的空间 */
.jc-article-content h2,
.jc-article-content h3,
.jc-article-content h4 { scroll-margin-top: 100px; }
.jc-article-content h2 { font-size: 21px; padding-bottom: 8px; border-bottom: 1px solid var(--c-border); }
.jc-article-content h3 { font-size: 18px; }
.jc-side-list li { display: flex; gap: 9px; padding: 7px 0; font-size: 13px; align-items: flex-start; }
.jc-side-list li a { flex: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.jc-side-list li a:hover { color: var(--c-primary); }
.jc-side-index {
    flex: 0 0 19px; height: 19px; border-radius: 5px; background: var(--c-bg);
    color: var(--c-text-light); font-size: 11px; text-align: center; line-height: 19px;
}
.jc-side-list li:nth-child(1) .jc-side-index { background: var(--c-primary); color: #fff; }
.jc-side-list li:nth-child(2) .jc-side-index { background: var(--c-accent); color: #fff; }
.jc-side-list li:nth-child(3) .jc-side-index { background: #f59e0b; color: #fff; }

.jc-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.jc-tag-cloud a { padding: 4px 12px; border-radius: 20px; background: var(--c-bg); font-size: 13px; color: var(--c-text-sub); }
.jc-tag-cloud a:hover { background: var(--c-primary); color: #fff; }

/* ---------------------------------------------------------------------
   搜索结果
   --------------------------------------------------------------------- */
/* 类型筛选标签 */
.jc-search-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.jc-search-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 999px; font-size: 13px;
    background: var(--c-bg); color: var(--c-text-sub);
    transition: background .16s, color .16s;
}
.jc-search-tab span { font-size: 12px; opacity: .7; font-variant-numeric: tabular-nums; }
.jc-search-tab:hover { background: var(--c-primary-soft, rgba(37, 99, 235, .1)); color: var(--c-primary); }
.jc-search-tab.active { background: var(--c-primary); color: #fff; }
.jc-search-tab.active span { opacity: .85; }

/* 结果行：不同栏目共用同一种排版，只是缩略图和角标不同 */
.jc-search-list { display: flex; flex-direction: column; gap: 14px; }
.jc-sr {
    display: flex; gap: 16px; padding: 14px;
    background: var(--c-card); border-radius: var(--radius);
    box-shadow: var(--shadow); transition: transform .16s, box-shadow .16s;
}
.jc-sr:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15, 23, 42, .1); }
.jc-sr-thumb {
    flex: 0 0 108px; width: 108px; height: 76px; border-radius: 10px;
    overflow: hidden; background: var(--c-bg); display: block;
}
.jc-sr-thumb img, .jc-sr-thumb svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.jc-sr-body { flex: 1; min-width: 0; display: block; }
.jc-sr-head { display: flex; align-items: center; gap: 8px; }
.jc-sr-type {
    flex: 0 0 auto; padding: 2px 8px; border-radius: 6px; font-size: 12px;
    background: var(--c-primary-soft, rgba(37, 99, 235, .1)); color: var(--c-primary);
}
.jc-sr-title {
    margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jc-sr:hover .jc-sr-title { color: var(--c-primary); }
.jc-sr-desc {
    margin: 6px 0 0; font-size: 13px; line-height: 1.7; color: var(--c-text-sub);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.jc-sr-meta {
    display: flex; align-items: center; gap: 14px; margin-top: 8px;
    font-size: 12px; color: var(--c-text-light);
}

@media (max-width: 560px) {
    .jc-sr-thumb { flex: 0 0 84px; width: 84px; height: 62px; }
    .jc-sr-title { font-size: 15px; }
}

/* ---------------------------------------------------------------------
   分页
   --------------------------------------------------------------------- */
.pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 30px 0 10px; flex-wrap: wrap; }
.pager-link {
    min-width: 38px; height: 38px; padding: 0 12px; border-radius: 9px;
    background: var(--c-card); box-shadow: var(--shadow);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; color: var(--c-text-sub);
}
.pager-link:hover { background: var(--c-primary); color: #fff; }
.pager-link.active { background: var(--c-primary); color: #fff; }
.pager-link.disabled { opacity: .45; pointer-events: none; }
.pager-total { margin-right: 10px; font-size: 13px; color: var(--c-text-light); }
.pager-ellipsis { color: var(--c-text-light); padding: 0 4px; }

/* ---------------------------------------------------------------------
   页脚
   --------------------------------------------------------------------- */
.jc-footer {
    flex: 0 0 auto;
    margin-top: auto;
    background: var(--c-footer); color: #93a1b8; padding: 34px 0 26px; font-size: 13px;
}
.jc-footer-top { display: flex; gap: 26px; flex-wrap: wrap; align-items: center; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.jc-footer-nav { display: flex; flex-wrap: wrap; gap: 16px; }
.jc-footer-nav a:hover { color: #fff; }
.jc-footer-bottom { padding-top: 18px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 12px; color: #6b7a91; }
.jc-footer-bottom .jc-footer-right { margin-left: auto; }

/* 页脚「已运行 N 天」 */
.jc-footer-days { display: inline-flex; align-items: center; gap: 4px; }
.jc-footer-days b { color: var(--c-primary); font-weight: 600; font-variant-numeric: tabular-nums; }

/* 一键向上 / 一键向下 */
.jc-scroll {
    position: fixed; right: 26px; bottom: 30px; z-index: 80;
    display: flex; flex-direction: column; gap: 10px;
    opacity: 0; visibility: hidden; transition: opacity .22s, visibility .22s;
}
.jc-scroll.show { opacity: 1; visibility: visible; }

.jc-scroll-btn {
    width: 44px; height: 44px; border-radius: 12px; border: 0; padding: 0;
    background: var(--c-primary); color: #fff; font-size: 19px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 26px rgba(37, 99, 235, .32);
    transition: background .16s, transform .16s, opacity .2s, visibility .2s;
}
.jc-scroll-btn:hover { background: var(--c-primary-dark); transform: translateY(-2px); }
.jc-scroll-btn.is-hidden { opacity: 0; visibility: hidden; transform: none; pointer-events: none; }

/* ---------------------------------------------------------------------
   面包屑与页头
   --------------------------------------------------------------------- */
.jc-page-hero {
    background: linear-gradient(120deg, var(--c-primary), var(--c-primary-dark));
    color: #fff; padding: 34px 0 30px; margin-bottom: 24px; border-radius: 0;
}
.jc-page-hero h1 { font-size: 26px; margin-bottom: 8px; }
.jc-page-hero p { margin: 0; opacity: .88; font-size: 14px; }
.jc-breadcrumb { font-size: 13px; color: var(--c-text-light); margin-bottom: 14px; }
.jc-breadcrumb a:hover { color: var(--c-primary); }
.jc-breadcrumb span { margin: 0 6px; }

/* ---------------------------------------------------------------------
   响应式
   --------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .jc-link-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .jc-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 992px) {
    .jc-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jc-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jc-detail-layout { grid-template-columns: minmax(0, 1fr); }
    .nc-inner { grid-template-columns: 320px minmax(0, 1fr); gap: 26px; padding: 32px 28px; }
    .nc-cover { width: 200px; height: 200px; }
    .nc-lyrics { height: 400px; padding: 168px 6px; }
    .jc-pl-cover { max-width: 320px; margin-left: auto; margin-right: auto; }
    .jc-chapter-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jc-reader { padding: 26px 24px; }
}

/* 1240px 以下：logo + 导航 + 搜索挤不进一行了。
   实测导航内容要 733px，而「可用宽 = 视口 − 520」，所以 1231px 以下必然溢出、
   进而压到搜索框上。这里让导航单独占一行（全部栏目照样可见），
   而不是提前收进汉堡菜单——1100px 左右的桌面窗口还很常见。 */
@media (max-width: 1240px) and (min-width: 861px) {
    .jc-header-main { height: auto; padding: 12px 0; flex-wrap: wrap; }
    .jc-search { margin-left: auto; }
    .jc-nav { order: 3; flex: 1 0 100%; margin-top: 4px; }
    /* 万一还放不下就换行，绝不允许溢出重叠 */
    .jc-nav-list { flex-wrap: wrap; row-gap: 4px; }
}

@media (max-width: 860px) {
    .jc-header-main { height: auto; padding: 12px 0; flex-wrap: wrap; }
    .jc-nav-toggle { display: flex; align-items: center; justify-content: center; }
    .jc-nav {
        order: 3; flex: 1 0 100%; display: none; padding: 6px 0 10px;
        border-top: 1px solid var(--c-border); margin-top: 10px; width: 100%;
    }
    .jc-nav.open { display: block; }
    .jc-nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
    .jc-nav-link { padding: 11px 12px; }
    .jc-submenu {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; padding: 0 0 0 16px; display: none; background: transparent;
    }
    .jc-nav-item.open .jc-submenu { display: block; }
    .jc-search { order: 2; flex: 1 0 100%; margin-top: 12px; }
    .jc-search input { flex: 1; width: auto; }
    .jc-topbar .jc-wrap { font-size: 12px; }
    .jc-topbar-date { display: none; }
    /* 顶栏东西多，窄屏允许换行，别把访客数或右侧按钮裁掉 */
    .jc-topbar .jc-wrap { height: auto; min-height: 38px; flex-wrap: wrap; padding-top: 7px; padding-bottom: 7px; gap: 6px 12px; }
    .jc-topbar-visit { margin-left: 0; }
}

@media (max-width: 720px) {
    .jc-wrap { padding: 0 14px; }
    .jc-grid-4, .jc-grid-3, .jc-grid-2, .jc-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jc-link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .jc-mode-bar { gap: 10px; padding: 12px 14px; }
    .jc-mode-switch button { flex: 1 1 auto; justify-content: center; padding: 0 10px; }
    .jc-track { gap: 9px; padding: 9px 12px; }
    .jc-track-cover { flex-basis: 40px; width: 40px; height: 40px; }
    .nc-inner { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 30px 22px; }
    .nc-cover { width: 190px; height: 190px; }
    .nc-disc { right: -34px; }
    .nc-lyrics { height: 330px; padding: 140px 6px; }
    .nc-title { font-size: 20px; }
    .jc-article-item { flex-direction: column; }
    .jc-article-thumb { width: 100%; flex: none; }
    .jc-hero { padding: 24px 20px; }
    .jc-hero-inner { gap: 16px; }
    .jc-hero-avatar { width: 66px; height: 66px; flex-basis: 66px; font-size: 24px; }
    .jc-hero-text h1 { font-size: 21px; }
    .jc-hero-stats { gap: 18px; }
    .jc-hero-stat b { font-size: 18px; }
    .jc-reader-content { font-size: 16px; }
    .jc-section-title { font-size: 18px; }
    .jc-money-table { font-size: 13px; }
    .jc-money-table th, .jc-money-table td { padding: 9px 8px; }
    .jc-money-table .hide-sm { display: none; }
}

/* 更窄：访客数只留「访客 N」，并把问候语让位，保证右侧按钮不被挤掉 */
@media (max-width: 560px) {
    .jc-visit-today,
    .jc-visit-views { display: none; }
    .jc-topbar-visit { padding: 2px 8px; }
}

@media (max-width: 420px) {
    .jc-topbar-welcome { display: none; }
}

@media (max-width: 480px) {
    .jc-grid-4, .jc-grid-3, .jc-grid-2 { grid-template-columns: minmax(0, 1fr); }
    .jc-chapter-list { grid-template-columns: minmax(0, 1fr); }
    .jc-reader { padding: 20px 16px; }
}

/* ---------------------------------------------------------------------
   超窄屏（≤420px，小手机）
   --------------------------------------------------------------------- */

/**
 * 兜底：这一档宽度下最容易出问题的是「一行里塞了好几个固定宽度的东西」——
 * flex 子项的默认最小宽度是 min-content，一旦加起来超过屏宽就会顶破布局。
 * 这里统一允许收缩 + 长词断行，比逐个元素去调更稳。
 */
@media (max-width: 420px) {
    .jc-wrap { padding-left: 12px; padding-right: 12px; }

    /* 卡片内部的两栏/多栏（封面 + 文字）允许文字列收缩 */
    .jc-movie-card, .jc-novel-card, .jc-soft-card, .jc-article-item,
    .jc-video-card, .jc-album-card, .jc-moment-foot, .jc-card-meta {
        min-width: 0;
    }
    .jc-movie-body, .jc-novel-body, .jc-soft-body, .jc-article-body { min-width: 0; }

    /* 详情页的元信息行（年份 / 地区 / 分类…）本来就换行，这里保证能收紧 */
    .jc-soft-attrs { min-width: 0; }

    /* 长标题、长地址不允许顶宽父级 */
    .jc-section-title, .jc-panel h1, .jc-panel h2,
    .jc-movie-body h3, .jc-novel-body h3, .jc-soft-body h3, .jc-article-body h3 {
        overflow-wrap: anywhere;
    }

    /* 数字排行榜这类「名称 + 金额」两列，窄屏允许换行 */
    .jc-rank-head, .jc-rank-list li { flex-wrap: wrap; }
}

@media (max-width: 360px) {
    .jc-finance-hero { gap: 12px; }
    .jc-finance-stat { padding: 16px; }
    /* 两列时卡片只剩 130px 出头，图标加文字挤成一团，不如单列 */
    .jc-link-grid { grid-template-columns: minmax(0, 1fr); }

}