/* =========================================================
   笔记详情页
   作用域：body[data-page="note-detail"]
   ========================================================= */

body[data-page="note-detail"] {

    --nd-primary: #5b4fe8;
    --nd-text: #241a52;
    --nd-text-2: #413a5f;
    --nd-muted: #7a7398;
    --nd-border: #e9e6f7;
    --nd-bg: #f6f7f9;

    --nd-code-bg: #241a52;
    --nd-code-bar: #161b22;

    background: var(--nd-bg);

}


/* =========================================================
   1. 阅读进度条
   ========================================================= */

body[data-page="note-detail"] .note-read-progress {

    position: fixed;

    top: 0;
    left: 0;

    z-index: 1030;

    width: 100%;
    height: 3px;

    background: transparent;

}

body[data-page="note-detail"] .note-read-progress span {

    display: block;

    width: 0;
    height: 100%;

    background: linear-gradient(
            90deg,
            #5b4fe8,
            #7c72f0
    );

    transition: width .1s linear;

}


/* =========================================================
   2. 页面容器
   ========================================================= */

body[data-page="note-detail"] .note-detail-page {

    padding: 22px 0 70px;

}

body[data-page="note-detail"] .note-crumb {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 16px;

    color: #8a83a8;

    font-size: .8rem;

}

body[data-page="note-detail"] .note-crumb a {

    color: var(--nd-muted);

    text-decoration: none;

    transition: color .2s ease;

}

body[data-page="note-detail"] .note-crumb a:hover {

    color: var(--nd-primary);

}

body[data-page="note-detail"] .note-crumb span {

    overflow: hidden;

    color: #8a83a8;

    white-space: nowrap;

    text-overflow: ellipsis;

}


body[data-page="note-detail"] .note-detail-layout {

    display: grid;

    grid-template-columns:
            minmax(0, 1fr) 250px;

    gap: 24px;

    align-items: start;

}


/* =========================================================
   3. 文章卡片
   ========================================================= */

body[data-page="note-detail"] .note-article {

    min-width: 0;

    padding: 34px 38px 30px;

    border: 1px solid var(--nd-border);

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
            0 1px 3px rgba(36, 26, 82, .04);

}


body[data-page="note-detail"] .note-article-title {

    margin: 0;

    color: var(--nd-text);

    font-size: 1.85rem;

    line-height: 1.4;

    font-weight: 750;

    letter-spacing: -.02em;

}


body[data-page="note-detail"] .note-article-meta {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 16px;

    padding-bottom: 18px;

    border-bottom: 1px solid #faf9ff;

    color: var(--nd-muted);

    font-size: .8rem;

}

body[data-page="note-detail"] .note-meta-author {

    display: inline-flex;

    align-items: center;

    gap: 7px;

}

body[data-page="note-detail"] .note-meta-avatar {

    width: 26px;
    height: 26px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    background: linear-gradient(
            135deg,
            #5b4fe8,
            #7c72f0
    );

    font-size: .72rem;

    font-weight: 700;

    overflow: hidden;

}

body[data-page="note-detail"] .note-meta-avatar img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 50%;

}

body[data-page="note-detail"] .note-meta-name {

    color: var(--nd-text-2);

    font-weight: 600;

}

body[data-page="note-detail"] .note-meta-dot {

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #d8d3ee;

}


/* =========================================================
   4. 正文排版
   ========================================================= */

body[data-page="note-detail"] .note-article-body {

    margin-top: 26px;

    color: #241a52;

    font-size: 1rem;

    line-height: 1.9;

    word-wrap: break-word;

}

body[data-page="note-detail"] .note-article-body > *:first-child {

    margin-top: 0;

}

body[data-page="note-detail"] .note-article-body h1,
body[data-page="note-detail"] .note-article-body h2,
body[data-page="note-detail"] .note-article-body h3,
body[data-page="note-detail"] .note-article-body h4 {

    scroll-margin-top: 76px;

    color: var(--nd-text);

    font-weight: 700;

    letter-spacing: -.01em;

}

body[data-page="note-detail"] .note-article-body h1 {

    margin: 34px 0 16px;

    font-size: 1.5rem;

}

body[data-page="note-detail"] .note-article-body h2 {

    position: relative;

    margin: 36px 0 16px;

    padding-left: 14px;

    font-size: 1.28rem;

    line-height: 1.5;

}

body[data-page="note-detail"] .note-article-body h2::before {

    content: "";

    position: absolute;

    left: 0;
    top: .28em;
    bottom: .28em;

    width: 4px;

    border-radius: 3px;

    background: var(--nd-primary);

}

body[data-page="note-detail"] .note-article-body h3 {

    margin: 28px 0 14px;

    font-size: 1.08rem;

}

body[data-page="note-detail"] .note-article-body h4 {

    margin: 24px 0 12px;

    font-size: 1rem;

    color: var(--nd-text-2);

}

body[data-page="note-detail"] .note-article-body p {

    margin: 0 0 18px;

}

body[data-page="note-detail"] .note-article-body a {

    color: var(--nd-primary);

    text-decoration: none;

    border-bottom: 1px solid rgba(91, 79, 232, .3);

    transition: border-color .2s ease;

}

body[data-page="note-detail"] .note-article-body a:hover {

    border-bottom-color: var(--nd-primary);

}

body[data-page="note-detail"] .note-article-body strong {

    color: var(--nd-text);

    font-weight: 700;

}

body[data-page="note-detail"] .note-article-body ul,
body[data-page="note-detail"] .note-article-body ol {

    margin: 0 0 18px;

    padding-left: 24px;

}

body[data-page="note-detail"] .note-article-body li {

    margin-bottom: 7px;

}

body[data-page="note-detail"] .note-article-body li > ul,
body[data-page="note-detail"] .note-article-body li > ol {

    margin: 7px 0 0;

}

body[data-page="note-detail"] .note-article-body blockquote {

    margin: 0 0 18px;

    padding: 12px 18px;

    border-left: 4px solid #bfdbfe;

    border-radius: 0 8px 8px 0;

    background: #faf9ff;

    color: var(--nd-muted);

}

body[data-page="note-detail"] .note-article-body blockquote p:last-child {

    margin-bottom: 0;

}

body[data-page="note-detail"] .note-article-body hr {

    margin: 30px 0;

    border: 0;

    border-top: 1px solid var(--nd-border);

}

body[data-page="note-detail"] .note-article-body img {

    max-width: 100%;

    height: auto;

    margin: 6px 0 18px;

    border-radius: 10px;

}

body[data-page="note-detail"] .note-article-body table {

    width: 100%;

    margin: 0 0 20px;

    border-collapse: collapse;

    font-size: .92rem;

    display: block;

    overflow-x: auto;

}

body[data-page="note-detail"] .note-article-body th,
body[data-page="note-detail"] .note-article-body td {

    padding: 9px 14px;

    border: 1px solid var(--nd-border);

    text-align: left;

}

body[data-page="note-detail"] .note-article-body th {

    background: #faf9ff;

    font-weight: 650;

    white-space: nowrap;

}

body[data-page="note-detail"] .note-article-body tbody tr:nth-child(even) {

    background: #fcfdfe;

}

/* 行内代码 */
body[data-page="note-detail"] .note-article-body code {

    padding: 2px 6px;

    border-radius: 5px;

    color: #b91c1c;

    background: #fef2f2;

    font-size: .88em;

    font-family:
            "JetBrains Mono",
            Consolas,
            Monaco,
            monospace;

}


/* =========================================================
   5. 代码块（服务 chroma 高亮）
   ========================================================= */

body[data-page="note-detail"] .note-code {

    margin: 0 0 20px;

    overflow: hidden;

    border-radius: 10px;

    background: var(--nd-code-bg);

}

body[data-page="note-detail"] .note-code-head {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 7px 12px 7px 14px;

    background: var(--nd-code-bar);

    color: #8a83a8;

    font-size: .72rem;

}

body[data-page="note-detail"] .note-code-lang {

    font-weight: 600;

    letter-spacing: .06em;

    text-transform: uppercase;

}

body[data-page="note-detail"] .note-code-copy {

    padding: 3px 10px;

    border: 1px solid #241a52;

    border-radius: 6px;

    color: #8a83a8;

    background: transparent;

    font-size: .72rem;

    cursor: pointer;

    transition: all .2s ease;

}

body[data-page="note-detail"] .note-code-copy:hover {

    color: #e9e6f7;

    border-color: #4b5563;

    background: #21262d;

}

body[data-page="note-detail"] .note-code-copy.done {

    color: #3fb950;

    border-color: #238636;

}

body[data-page="note-detail"] .note-code pre {

    margin: 0;

    padding: 14px 16px;

    overflow-x: auto;

    background: var(--nd-code-bg);

    color: #e9e6f7;

    font-size: .84rem;

    line-height: 1.75;

    font-family:
            "JetBrains Mono",
            Consolas,
            Monaco,
            monospace;

    tab-size: 4;

}

body[data-page="note-detail"] .note-code pre code {

    padding: 0;

    color: inherit;

    background: transparent;

    font-size: inherit;

    white-space: pre;

}

body[data-page="note-detail"] .note-code pre::-webkit-scrollbar {

    height: 8px;

}

body[data-page="note-detail"] .note-code pre::-webkit-scrollbar-thumb {

    border-radius: 4px;

    background: #241a52;

}


/* =========================================================
   6. 文章底部
   ========================================================= */

body[data-page="note-detail"] .note-article-foot {

    margin-top: 30px;

    padding-top: 22px;

    border-top: 1px solid #faf9ff;

}

body[data-page="note-detail"] .note-back-btn {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 8px 16px;

    border-radius: 9px;

    color: var(--nd-text-2);

    background: #faf9ff;

    font-size: .84rem;

    text-decoration: none;

    transition: all .2s ease;

}

body[data-page="note-detail"] .note-back-btn:hover {

    color: #ffffff;

    background: var(--nd-primary);

}


/* =========================================================
   7. 右侧目录
   ========================================================= */

body[data-page="note-detail"] .note-side {

    position: sticky;

    top: 74px;

    min-width: 0;

}

body[data-page="note-detail"] .note-toc {

    padding: 16px 6px 16px 16px;

    border: 1px solid var(--nd-border);

    border-radius: 14px;

    background: #ffffff;

}

body[data-page="note-detail"] .note-toc > summary {

    display: none;

}

body[data-page="note-detail"] .note-toc-title {

    margin-bottom: 10px;

    color: var(--nd-text);

    font-size: .9rem;

    font-weight: 700;

}

body[data-page="note-detail"] .note-toc-list {

    max-height: calc(100vh - 190px);

    margin: 0;

    padding: 0;

    overflow-y: auto;

    list-style: none;

}

body[data-page="note-detail"] .note-toc-list::-webkit-scrollbar {

    width: 4px;

}

body[data-page="note-detail"] .note-toc-list::-webkit-scrollbar-thumb {

    border-radius: 4px;

    background: #e9e6f7;

}

body[data-page="note-detail"] .note-toc-link {

    display: block;

    padding: 6px 12px 6px 10px;

    border-left: 2px solid #f5f3ff;

    color: var(--nd-muted);

    font-size: .8rem;

    line-height: 1.6;

    text-decoration: none;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    transition: all .18s ease;

}

body[data-page="note-detail"] .note-toc-link:hover {

    color: var(--nd-text);

    border-left-color: #d8d3ee;

}

body[data-page="note-detail"] .note-toc-link.active {

    color: var(--nd-primary);

    border-left-color: var(--nd-primary);

    background: #f5f3ff;

    font-weight: 600;

}

body[data-page="note-detail"] .note-toc-level-3 .note-toc-link {

    padding-left: 24px;

    font-size: .76rem;

}

body[data-page="note-detail"] .note-toc-level-4 .note-toc-link {

    padding-left: 34px;

    font-size: .76rem;

}

body[data-page="note-detail"] .note-toc-empty {

    margin: 0;

    color: #8a83a8;

    font-size: .8rem;

}


/* =========================================================
   8. 返回顶部
   ========================================================= */

body[data-page="note-detail"] .note-to-top {

    position: fixed;

    right: 26px;
    bottom: 34px;

    z-index: 1020;

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid var(--nd-border);

    border-radius: 12px;

    color: var(--nd-muted);

    background: #ffffff;

    box-shadow:
            0 4px 14px rgba(36, 26, 82, .08);

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

    transition: all .25s ease;

}

body[data-page="note-detail"] .note-to-top.show {

    opacity: 1;

    visibility: visible;

}

body[data-page="note-detail"] .note-to-top:hover {

    color: #ffffff;

    border-color: var(--nd-primary);

    background: var(--nd-primary);

}


/* =========================================================
   9. 响应式
   ========================================================= */

@media (max-width: 1199.98px) {

    body[data-page="note-detail"] .note-detail-layout {

        grid-template-columns: minmax(0, 1fr);

        gap: 16px;

    }

    body[data-page="note-detail"] .note-side {

        position: static;

        order: -1;

    }

    body[data-page="note-detail"] .note-toc > summary {

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding: 10px 14px 10px 4px;

        color: var(--nd-text);

        font-size: .88rem;

        font-weight: 700;

        cursor: pointer;

        list-style: none;

    }

    body[data-page="note-detail"] .note-toc > summary::-webkit-details-marker {

        display: none;

    }

    body[data-page="note-detail"] .note-toc > summary::after {

        content: "";

        width: 7px;
        height: 7px;

        border-right: 1.6px solid #8a83a8;

        border-bottom: 1.6px solid #8a83a8;

        transform: rotate(45deg);

    }

    body[data-page="note-detail"] .note-toc[open] > summary::after {

        transform: rotate(-135deg);

    }

    body[data-page="note-detail"] .note-toc {

        padding: 6px 10px 12px 14px;

    }

    body[data-page="note-detail"] .note-toc-title {

        display: none;

    }

    body[data-page="note-detail"] .note-toc-list {

        max-height: none;

        padding-top: 6px;

    }

}

@media (max-width: 767.98px) {

    body[data-page="note-detail"] .note-article {

        padding: 22px 18px 20px;

        border-radius: 14px;

    }

    body[data-page="note-detail"] .note-article-title {

        font-size: 1.4rem;

    }

    body[data-page="note-detail"] .note-article-body {

        font-size: .95rem;

        line-height: 1.85;

    }

    body[data-page="note-detail"] .note-article-body h2 {

        font-size: 1.15rem;

    }

    body[data-page="note-detail"] .note-to-top {

        right: 16px;

        bottom: 20px;

    }

}


/* =========================================================
   10. 减少动画
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    body[data-page="note-detail"] *,
    body[data-page="note-detail"] *::before,
    body[data-page="note-detail"] *::after {

        transition: none !important;

        scroll-behavior: auto !important;

    }

}