/* =========================================================
   文章阅读页（单篇）—— 小红书笔记详情风格
   有图：左图画廊 + 右侧正文上半部分与评论区
   无图：标题与正文整版居中
   配色：冷灰渐变阅读底 + 白卡；主强调=品牌蓝渐变；
   语义强调=喜欢红 / 收藏金。
   ========================================================= */

.note-page {
    background: linear-gradient(180deg, #F7F9FC 0%, #EEF3F8 100%);
    padding: 20px 0 56px;
}
.note-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ============ 主卡（两栏有图布局） ============ */
.note-card-media {
    display: grid;
    grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
    align-items: stretch;
    background: #ffffff;
    border: 1px solid #E8EEF5;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(28, 55, 90, 0.08);
}

/* ---------- 左栏画廊（sticky 跟随阅读） ---------- */
.note-media { padding: 20px; min-width: 0; }

.note-gallery {
    position: sticky;
    top: 102px;
    height: calc(100vh - 168px);
    min-height: 340px;
    max-height: 700px;
    border-radius: 14px;
    overflow: hidden;
    background: #EFF3F8;
    user-select: none;
    touch-action: pan-y;
}
.note-gallery-track { display: flex; height: 100%; transition: transform .28s ease; }
.note-slide {
    flex: 0 0 100%;
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
}
.note-slide img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(28, 55, 90, 0.10);
}
.note-gallery.is-single .note-gal-btn { display: none; }

.note-gal-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px; height: 36px;
    border: 1px solid #E7EDF4;
    border-radius: 50%;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 3px 12px rgba(28, 55, 90, .14);
    color: #3A4A5F;
    font-size: 18px; line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform .2s, color .2s, box-shadow .2s;
    z-index: 3;
}
.note-gal-btn:hover { transform: translateY(-50%) scale(1.07); color: #2E7BFF; box-shadow: 0 5px 16px rgba(46, 123, 255, .28); }
.note-gal-prev { left: 10px; }
.note-gal-next { right: 10px; }
.note-gal-count {
    position: absolute; right: 12px; bottom: 12px;
    padding: 3px 12px; border-radius: 999px;
    font-size: 12px; color: #fff;
    background: rgba(23, 35, 55, .55);
    letter-spacing: .5px;
    z-index: 3;
}

/* ---------- 右栏正文 ---------- */
.note-body { border-left: 1px solid #EEF2F6; min-width: 0; }
.note-info { padding: 30px 36px 34px; max-width: 720px; }

.note-info-head { display: flex; align-items: center; gap: 12px; }
.note-author { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.note-author-avatar-link { flex: 0 0 auto; }
.note-author-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; display: block; background: #E9EFF6; }
.note-author-text { min-width: 0; }
.note-author-name { display: block; font-size: 16px; font-weight: 700; color: #17233A; text-decoration: none; line-height: 1.3; }
.note-author-name:hover { color: #2E7BFF; }
.note-date { font-size: 12px; color: #8B9AAC; margin-top: 2px; }

.note-follow {
    flex: 0 0 auto;
    padding: 7px 20px;
    border: 0; border-radius: 999px;
    font-size: 13px; font-weight: 500; color: #fff;
    background: linear-gradient(135deg, #4E9BFF, #2E7BFF);
    box-shadow: 0 4px 12px rgba(46, 123, 255, .28);
    cursor: pointer;
    transition: opacity .2s, transform .2s, box-shadow .2s;
}
.note-follow:hover { opacity: .92; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(46, 123, 255, .36); }
.note-follow.is-following { background: #EDF1F6; color: #6A7A90; box-shadow: none; }

.note-title { margin: 20px 0 12px; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.45; font-weight: 700; color: #17233A; }
.note-head-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.note-chip {
    display: inline-flex; align-items: center;
    padding: 4px 12px;
    font-size: 12px; font-weight: 500;
    color: #2E7BFF; background: #EAF3FE;
    border-radius: 999px; text-decoration: none;
    transition: color .2s, background .2s, box-shadow .2s;
}
.note-chip:hover { color: #fff; background: linear-gradient(135deg, #4E9BFF, #2E7BFF); box-shadow: 0 4px 12px rgba(46, 123, 255, .3); }
.note-readtime { font-size: 12px; color: #8B9AAC; }

/* ---------- 正文排版 ---------- */
.note-content { padding-top: 8px; }
.note-content p { margin: 0 0 1em; font-size: 16px; line-height: 1.9; color: #2A3547; }
.note-content h2 { margin: 1.4em 0 .6em; font-size: 21px; font-weight: 700; color: #17233A; }
.note-content h3 { margin: 1.3em 0 .5em; font-size: 18px; font-weight: 700; color: #17233A; }
.note-content h4 { margin: 1.2em 0 .5em; font-size: 16px; font-weight: 700; color: #2A3547; }
.note-content a { color: #2E7BFF; text-decoration: underline; text-underline-offset: 3px; }
.note-content img { max-width: 100%; height: auto; border-radius: 10px; }
.note-content ul, .note-content ol { padding-left: 1.4em; margin: 0 0 1em; line-height: 1.9; color: #2A3547; }
.note-content blockquote { margin: 1.2em 0; padding: 12px 18px; border-left: 3px solid #4E9BFF; background: #F2F7FE; border-radius: 0 10px 10px 0; color: #6A7A90; }
.note-content code { background: #EFF3F8; padding: 2px 6px; border-radius: 5px; font-size: .92em; color: #C0344D; }
.note-content pre { background: #1B2536; color: #E7EDF5; padding: 14px 16px; border-radius: 10px; overflow: auto; }
.note-content pre code { background: none; color: inherit; padding: 0; }
.note-content iframe { max-width: 100%; }
.note-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.note-content table { border-collapse: collapse; width: 100%; margin: 0 0 1em; }
.note-content th, .note-content td { border: 1px solid #E4EAF1; padding: 8px 10px; }

/* ---------- 标签 + 互动 ---------- */
.note-tags { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.note-tag {
    display: inline-block;
    padding: 4px 12px;
    font-size: 12px; color: #4A6DA0;
    background: #F0F4FA;
    border-radius: 999px; text-decoration: none;
    transition: background .2s, color .2s;
}
.note-tag:hover { background: #E3EDFB; color: #2E7BFF; }

.note-actions-main { margin-top: 20px; padding-top: 18px; border-top: 1px solid #F0F3F7; }
.note-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.note-act {
    display: inline-flex; align-items: center; justify-content: center;
    flex-direction: column;
    gap: 4px;
    padding: 9px 2px 7px;
    border: 1px solid #EDF1F6;
    border-radius: 12px;
    background: #F7F9FB;
    font-size: 11px; color: #6A7A90;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.note-act svg { width: 20px; height: 20px; }
.note-act:hover { background: #EAF3FE; border-color: #D7E6FB; color: #2E7BFF; transform: translateY(-1px); }
.note-act.is-active { color: #E6494D; background: #FDEEEE; border-color: #F6D9D9; }
.note-act[data-note-act="favorite"].is-active { color: #D98E1F; background: #FBF2E0; border-color: #F0E2C2; }
.note-act em { font-style: normal; font-weight: 500; }

/* ============ 无图布局：整版居中 ============ */
.note-card-plain {
    display: block;
    max-width: 980px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #E8EEF5;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(28, 55, 90, 0.08);
}
.note-plain { padding: 46px 40px 40px; }
.note-plain-head { text-align: center; margin-bottom: 26px; }
.note-plain-title {
    margin: 16px auto 12px;
    max-width: 18em;
    font-size: clamp(24px, 3.2vw, 34px);
    line-height: 1.45; font-weight: 700; color: #17233A;
}
.note-plain-meta { display: flex; align-items: center; justify-content: center; gap: 8px; }
.note-plain .note-content,
.note-plain .note-comments { max-width: 44em; margin-left: auto; margin-right: auto; }
.note-tags-center { justify-content: center; max-width: 44em; margin-left: auto; margin-right: auto; }
.note-actions-center { max-width: 460px; margin-left: auto; margin-right: auto; }

/* ============ 评论区（两套布局共用） ============ */
.note-comments { margin-top: 26px; scroll-margin-top: 96px; }
.note-info > .note-comments { margin-top: 6px; padding-top: 18px; border-top: 1px solid #F0F3F7; }
.note-plain .note-comments { margin-top: 8px; padding-top: 22px; border-top: 1px solid #F0F3F7; }

.note-comments .comment-list { list-style: none; margin: 0; padding: 0; }
.note-comments .comments-area { margin-top: 4px; }
.note-comments .comments-title,
.note-comments .comment-reply-title { margin: 4px 0 14px; font-size: 16px; font-weight: 700; color: #17233A; }
.note-comments .comment-reply-title small { margin-left: 8px; }
.note-comments .comment-list > .comment { margin: 0 0 18px; }
.note-comments .comment-body { position: relative; padding-left: 44px; }
.note-comments .comment-author .avatar { position: absolute; left: 0; top: 2px; width: 34px; height: 34px; border-radius: 50%; background: #E9EFF6; }
.note-comments .comment-author { font-size: 14px; font-weight: 600; color: #2A3547; }
.note-comments .comment-author .says { display: none; }
.note-comments .comment-metadata { font-size: 11px; color: #9AA8BA; margin: 2px 0 6px; }
.note-comments .comment-metadata a { color: inherit; text-decoration: none; }
.note-comments .comment-content { font-size: 14px; line-height: 1.8; color: #435066; }
.note-comments .comment-content p { margin: 0 0 .5em; }
.note-comments .reply { font-size: 12px; }
.note-comments .reply a { color: #8B9AAC; text-decoration: none; }
.note-comments .reply a:hover { color: #2E7BFF; }
.note-comments .children { list-style: none; margin: 10px 0 0; padding-left: 18px; }
.note-comments .comment-respond { margin-top: 20px; padding-top: 18px; border-top: 1px solid #F0F3F7; }
.note-comments .comment-form p { margin: 0 0 12px; }
.note-comments .comment-form input[type=text],
.note-comments .comment-form input[type=email],
.note-comments .comment-form input[type=url],
.note-comments .comment-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #E0E8F1;
    border-radius: 10px;
    font-size: 13px; color: #2A3547;
    background: #FBFCFE;
    outline: none;
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.note-comments .comment-form textarea { min-height: 76px; resize: vertical; }
.note-comments .comment-form input:focus,
.note-comments .comment-form textarea:focus { border-color: #7FB6FF; background: #fff; box-shadow: 0 0 0 3px rgba(46, 123, 255, .12); }
.note-comments .comment-form .submit {
    border: 0; border-radius: 999px;
    padding: 10px 26px;
    font-size: 13px; font-weight: 500; color: #fff;
    background: linear-gradient(135deg, #4E9BFF, #2E7BFF);
    box-shadow: 0 4px 12px rgba(46, 123, 255, .26);
    cursor: pointer;
    transition: opacity .2s, transform .2s;
}
.note-comments .comment-form .submit:hover { opacity: .92; transform: translateY(-1px); }
.note-comments .comment-form-cookies-consent { display: flex; align-items: center; gap: 6px; }
.note-comments .comment-form-cookies-consent input { width: auto; }
.note-comments .comment-form .required { color: #E6494D; }
.note-comments-empty { padding: 18px 0; text-align: center; font-size: 13px; color: #9AA8BA; }

/* ============ 相关推荐 ============ */
.note-related {
    margin-top: 24px;
    background: #fff;
    border: 1px solid #E8EEF5;
    border-radius: 18px;
    padding: 20px 24px 24px;
    box-shadow: 0 8px 24px rgba(28, 55, 90, 0.06);
}
.note-related-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.note-related-head h2 { margin: 0; font-size: 18px; font-weight: 700; color: #17233A; }
.note-related-head h2::before { content: ''; display: inline-block; width: 4px; height: 16px; margin-right: 8px; border-radius: 2px; vertical-align: -2px; background: linear-gradient(180deg, #4E9BFF, #2E7BFF); }
.note-related-more { font-size: 13px; color: #8B9AAC; text-decoration: none; }
.note-related-more:hover { color: #2E7BFF; }
.note-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px; }
.note-related-grid .xhs-card { width: 100%; margin: 0; }

/* ============ 复制 toast / 移动端操作栏 ============ */
.note-toast {
    position: fixed; left: 50%; bottom: 96px;
    transform: translateX(-50%) translateY(8px);
    padding: 9px 18px;
    font-size: 13px; color: #fff;
    background: rgba(23, 35, 55, .88);
    border-radius: 999px;
    opacity: 0; pointer-events: none;
    transition: opacity .2s, transform .2s;
    z-index: 999;
}
.note-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

.note-mobile-bar {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid #EEF2F6;
    box-shadow: 0 -4px 16px rgba(28, 55, 90, .06);
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
}
.note-mobile-bar .note-bar-input {
    flex: 1;
    min-width: 0;
    height: 36px;
    border-radius: 999px;
    border: 1px solid #EEF2F6;
    background: #F5F6F8;
    color: #9AA3AE;
    font-size: 14px;
    font-family: inherit;
    text-align: left;
    padding: 0 14px;
    cursor: pointer;
}
.note-mobile-bar .note-actions { flex: 0 0 auto; grid-template-columns: repeat(4, auto); gap: 8px; margin: 0; }
.note-mobile-bar .note-act {
    background: transparent; border: 0;
    flex-direction: row; gap: 3px; padding: 0;
}
.note-mobile-bar .note-act svg { width: 20px; height: 20px; }
.note-mobile-bar .note-act em { font-size: 11px; line-height: 1; }
.note-mobile-bar .note-act.is-active { background: transparent; border: 0; }

/* ============ 电脑端弹窗底部固定操作栏（图：弹窗文字栏下方一行） ============ */
.note-modal-bar {
    display: none;
    align-items: center;
    gap: 14px;
    padding: 12px 24px;
    background: #fff;
    border-top: 1px solid #EEF2F6;
}
.note-modal .note-modal-bar { display: flex; }
.note-modal-bar .note-bar-input {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: #F5F6F8;
    color: #9AA3AE;
    font-size: 14px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .2s;
}
.note-modal-bar .note-bar-input:hover { background: #EEF1F5; }
.note-modal-bar .note-bar-avatar {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: #E4E8EE;
}
.note-modal-bar .note-bar-avatar-fallback {
    background: #E4E8EE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23A6AFBB' d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 2c-3.3 0-8 1.7-8 4.7V21h16v-2.3c0-3-4.7-4.7-8-4.7z'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.note-modal-bar .note-bar-placeholder {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.note-modal-bar .note-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0;
}
.note-modal-bar .note-act {
    background: transparent;
    border: 0;
    flex-direction: row;
    gap: 5px;
    padding: 0;
    color: #4A5568;
}
.note-modal-bar .note-act:hover { background: transparent; border: 0; color: #2E7BFF; transform: none; }
.note-modal-bar .note-act svg { width: 22px; height: 22px; }
.note-modal-bar .note-act em { font-size: 14px; font-weight: 600; color: #1F2A37; }
.note-modal-bar .note-act.is-active { background: transparent; border: 0; }
.note-modal-bar .note-act[data-note-act="favorite"].is-active { background: transparent; }

/* ============ 响应式 ============ */
@media (max-width: 1024px) {
    .note-card-media { grid-template-columns: 1fr; }
    .note-media { padding: 14px 14px 0; }
    .note-gallery { position: static; top: auto; height: auto; max-height: none; min-height: 0; aspect-ratio: 4 / 4.6; }
    .note-gallery-track { height: 100%; }
    .note-slide { height: 100%; }
    .note-body { border-left: 0; }
    .note-info { padding: 22px 22px 28px; max-width: none; }
    .note-related-grid { grid-template-columns: repeat(3, 1fr); }
    .note-page { padding-bottom: 78px; }
    .note-toast { bottom: 92px; }
}

/* 手机端底栏（≤768 显示；平板段与桌面编辑器互斥，避免双输入） */
@media (max-width: 768px) {
    .note-mobile-bar { display: flex; }
    /* 正文下方的系统按钮行与底栏重复，移动端隐藏 */
    .note-actions-main { display: none !important; }
    /* .note-page(=.site-main) 在 ≤600px 被 article-display.css 的
       .site-main{padding:0!important} 归零，底部预留改挂内层 .note-wrap */
    .note-wrap { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

@media (max-width: 720px) {
    .note-wrap { padding-left: 12px; padding-right: 12px; }
    .note-page { padding-top: 12px; }
    .note-card-media, .note-card-plain, .note-related { border-radius: 14px; }
    .note-plain { padding: 28px 20px 26px; }
    .note-content p { font-size: 15px; line-height: 1.85; }
    .note-info { padding: 18px 18px 24px; }
    .note-related { padding: 16px 14px 18px; }
    .note-related-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .note-actions { gap: 6px; }
}

@media (max-width: 440px) {
    .note-gal-btn { width: 30px; height: 30px; }
    .note-plain-title { font-size: 24px; }
}

/* ============ 电脑端笔记弹窗 ============ */
html.note-modal-open,
html.note-modal-open body { overflow: hidden; }

.note-modal {
    position: fixed;
    inset: 0;
    z-index: 100020;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.note-modal.is-open { display: flex; }
.note-modal-mask {
    position: absolute;
    inset: 0;
    background: rgba(10, 16, 28, .56);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.note-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100vw - 48px));
    height: min(860px, calc(100vh - 48px));
    max-height: calc(100vh - 48px);
}
.note-modal-close {
    position: absolute;
    right: 14px;
    top: 12px;
    z-index: 4;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(23, 35, 55, .55);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.note-modal-close:hover { background: rgba(23, 35, 55, .78); }
.note-modal-body {
    height: 100%;
    overflow: hidden;
    border-radius: 18px;
}
.note-modal-loading {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #6A7A90;
    font-size: 14px;
    border-radius: 18px;
}
.note-modal .note-card {
    height: 100%;
    margin: 0;
    max-width: none;
}
.note-modal .note-card-media { height: 100%; }
.note-modal .note-media {
    height: 100%;
    min-height: 0;
}
.note-modal .note-gallery {
    position: relative;
    top: auto;
    height: 100%;
    min-height: 0;
    max-height: none;
}
/* 右栏改为「可滚动文字区 + 底部固定操作栏」两段式 */
.note-modal .note-body {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.note-modal .note-body > .note-info {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.note-modal .note-card-plain {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
}
.note-modal .note-card-plain > .note-plain {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.note-modal .note-mobile-bar { display: none !important; }
/* 弹窗内互动按钮已移到底部固定栏，隐藏正文中的旧按钮行与重复的登录引导卡 */
.note-modal .note-actions-main { display: none; }
.note-modal .xc-login-card { display: none; }
/* 文章弹窗打开时，登录弹窗必须盖在其上方，否则无法操作 */
html.note-modal-open .gsage-modal-overlay { z-index: 100100; }

@media (max-width: 768px) {
    .note-modal { display: none !important; }
}

/* =========================================================
   黑夜模式（跟随系统 prefers-color-scheme）
   主强调色在暗底上提亮为浅蓝，卡片面使用冷调深蓝灰。
   ========================================================= */
@media (prefers-color-scheme: dark) {

    .note-page { background: linear-gradient(180deg, #0a0f1c 0%, #0d1422 55%, #0a0e1a 100%); }

    .note-card-media,
    .note-card-plain,
    .note-related {
        background: #141b27;
        border-color: #253146;
        box-shadow: 0 14px 34px rgba(0, 0, 0, .42);
    }

    /* 画廊区 */
    .note-gallery { background: #0d1320; }
    .note-slide img { box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
    .note-gal-btn {
        background: rgba(24, 32, 47, .94);
        border-color: #2e3b53;
        color: #aebccf;
        box-shadow: 0 3px 12px rgba(0, 0, 0, .5);
    }
    .note-gal-btn:hover { color: #79ACFF; box-shadow: 0 5px 16px rgba(79, 155, 255, .35); }
    .note-gal-count { background: rgba(8, 12, 22, .78); }

    .note-body { border-left-color: #232f44; }

    /* 标题 / 正文文字 */
    .note-title,
    .note-plain-title,
    .note-author-name,
    .note-content h2,
    .note-content h3,
    .note-content h4,
    .note-comments .comments-title,
    .note-comments .comment-reply-title,
    .note-comments .comment-author,
    .note-related-head h2 { color: #E7EDF7; }
    .note-author-name:hover,
    .note-related-more:hover,
    .note-comments .reply a:hover { color: #79ACFF; }
    .note-date,
    .note-readtime,
    .note-comments .comment-metadata,
    .note-comments .reply a,
    .note-comments-empty,
    .note-related-more { color: #8A9BB1; }

    .note-content p,
    .note-comments .comment-content { color: #B9C4D4; }
    .note-content a { color: #79ACFF; }

    .note-chip { background: #1B2A45; color: #7FB0FF; }
    .note-chip:hover,
    .note-follow { color: #fff; background: linear-gradient(135deg, #4E9BFF, #2E7BFF); box-shadow: 0 4px 12px rgba(46, 123, 255, .32); }
    .note-follow.is-following { background: #1D2737; color: #7C8CA2; box-shadow: none; }

    .note-content blockquote { background: #15202F; border-left-color: #4E7AD0; color: #A9B6C6; }
    .note-content code { background: #0E1724; color: #F0849A; }
    .note-content pre { background: #0B0F19; border: 1px solid #1E2939; color: #DCE5F0; }
    .note-content th, .note-content td { border-color: #263247; }

    .note-tag { background: #1B2433; color: #86A3CB; }
    .note-tag:hover { background: #233352; color: #7FB0FF; }

    /* 互动操作行 */
    .note-act {
        background: #151E2E;
        border-color: #263247;
        color: #96A5BB;
    }
    .note-act:hover { background: #1E2C45; border-color: #33456B; color: #79ACFF; }
    .note-act.is-active { color: #FF8282; background: rgba(230, 73, 77, .16); border-color: rgba(255, 130, 130, .3); }
    .note-act[data-note-act="favorite"].is-active { color: #E6AC4A; background: rgba(217, 142, 31, .15); border-color: rgba(230, 172, 74, .32); }

    /* 移动端底栏 */
    .note-mobile-bar { background: rgba(16, 22, 34, .96); border-top-color: #1E2939; }
    .note-mobile-bar .note-bar-input { background: #151E2E; border-color: #263247; color: #6C7A90; }

    /* 电脑端弹窗底栏 */
    .note-modal-bar { background: #141b27; border-top-color: #232f44; }
    .note-modal-bar .note-bar-input { background: #151E2E; color: #6C7A90; }
    .note-modal-bar .note-bar-input:hover { background: #1b2638; }
    .note-modal-bar .note-bar-avatar { background: #1C2536; }
    .note-modal-bar .note-act { color: #96A5BB; }
    .note-modal-bar .note-act:hover { color: #79ACFF; }
    .note-modal-bar .note-act em { color: #E7EDF7; }

    /* 评论区 */
    .note-comments .comment-author .avatar { background: #1C2536; }
    .note-comments .comment-form input[type=text],
    .note-comments .comment-form input[type=email],
    .note-comments .comment-form input[type=url],
    .note-comments .comment-form textarea {
        background: #0F1624;
        border-color: #2B3A52;
        color: #D4DCE8;
    }
    .note-comments .comment-form input:focus,
    .note-comments .comment-form textarea:focus { border-color: #4E7AD0; background: #111A2A; box-shadow: 0 0 0 3px rgba(78, 122, 208, .18); }
    .note-comments .comment-form .submit { background: linear-gradient(135deg, #4E9BFF, #2E7BFF); box-shadow: 0 4px 12px rgba(46, 123, 255, .3); }

    /* 互动行分隔线、相关推荐卡片面 */
    .note-info > .note-comments,
    .note-plain .note-comments,
    .note-actions-main { border-top-color: #232F44; }

    /* 移动端底栏 + toast */
    .note-mobile-bar {
        background: rgba(17, 23, 36, .94);
        border-top-color: #263247;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .4);
    }
    .note-toast { background: rgba(10, 14, 26, .92); }

    .note-modal-mask { background: rgba(6, 10, 18, .72); }
    .note-modal-loading { background: #141b27; color: #8A9BB1; }
    .note-modal-close { background: rgba(8, 12, 22, .72); }

    @media (max-width: 1024px) {
        .note-body { border-top-color: #232F44; }
    }
}